/* ===========================================================================
   Data Tomo — Instructions
   ===========================================================================

   Loaded after app.css. Nothing here may rely on a Pico default: an unstyled
   Pico <button> renders azure (--pico-primary is never overridden in this
   app) and looks foreign, so every button on these surfaces is styled here.

   NAMING. Everything in this file is prefixed `ins-`, with no exceptions.
   The prototype lost an afternoon to a cascade collision — a chat speaker
   label classed `.tomo` matched the page-layout rule `.tomo { display: grid }`
   and turned a 96px label into a 266px grid that overflowed its box. app.css
   is 4,419 lines of unprefixed class names; assume every short word is taken.

   ========================================================================= */


/* ===========================================================================
   SHARED — used by BOTH Instructions and Proposals.
   ---------------------------------------------------------------------------
   proposals.css loads after this file and its rules use these `ins-` classes
   directly. Do not duplicate any of this into proposals.css, and do not
   change a selector here without checking both surfaces.

   Everything BELOW the shared section is Instructions-only.
   ========================================================================= */

:root {
  /* Only the tokens app.css does not already carry. Prefer --ab-* everywhere
     else: --ab-bg, --ab-surface, --ab-border, --ab-border-light,
     --ab-hover-bg, --ab-text, --ab-success, --ab-amber, --ab-danger,
     --ab-primary, --ab-primary-light, --ab-font-body, --ab-font-display. */

  /* The app's real accent is deep green. --ab-nav-bg (navy) exists in app.css
     :root and is used by nothing — do not reach for it. */
  --ins-accent: #2c5f4a;
  --ins-accent-soft: #e8f0ec;

  /* Card header band. */
  --ins-card-head: #fbfcfc;

  /* Pico's own body and muted text, which is what the app's tables actually
     render in. --ab-text-muted (#8a8a7c) is a warmer, lighter grey used by
     older components; these two are the measured values. */
  --ins-text-body: #373c44;
  --ins-text-muted: #646b79;

  /* System mono — deliberately not a webfont. The prototype used IBM Plex
     Mono; adding it would be a new dependency for slugs and SQL. */
  --ins-font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas,
                   'Liberation Mono', monospace;

  --ins-radius: 10px;
  --ins-shadow: 0 1px 3px rgba(27, 40, 50, .04), 0 6px 16px rgba(27, 40, 50, .045);
}

/* --- Card shell ---------------------------------------------------------
   Both surfaces are built out of these: white, radius 10px, a #fbfcfc header
   band, 20px body. */

.ins-card {
  background: var(--ab-surface);
  border: 1px solid var(--ab-border);
  border-radius: var(--ins-radius);
  box-shadow: var(--ins-shadow);
  overflow: hidden;
}

.ins-card-h {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 13px 20px;
  background: var(--ins-card-head);
  border-bottom: 1px solid var(--ab-border-light);
}

.ins-card-h h3 {
  margin: 0;
  font-family: var(--ab-font-body);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ab-text);
}

/* Right-aligned secondary text in a card header ("4 revisions"). */
.ins-card-h .ins-note {
  margin-left: auto;
  font-size: 0.75rem;
  color: var(--ins-text-muted);
}

.ins-card-b {
  padding: 20px;
}

/* --- Review-state dot ---------------------------------------------------
   Three states, matching the backend's Literal: unreviewed (the default,
   neutral), confirmed, needs_update. Colour alone never carries the meaning —
   pair the dot with its word, or give it a title/aria-label. */

.ins-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #d6d3c4;          /* unreviewed */
  flex: none;
}

.ins-dot-confirmed { background: var(--ab-success); }
.ins-dot-needs-update { background: var(--ab-amber); }
.ins-dot-unreviewed { background: #d6d3c4; }

/* --- Kind badge ---------------------------------------------------------
   The three kinds are a closed set in the backend (metric | dimension | rule)
   and each is a directory in the repo. An unrecognised kind falls through to
   the neutral base style rather than rendering invisibly. */

.ins-kind {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 5px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
  background: var(--ab-border-light);
  color: var(--ins-text-muted);
}

.ins-kind-metric { background: #ece9fb; color: var(--ab-brand-sgm); }
.ins-kind-dimension { background: #e6efe9; color: var(--ab-brand-mkt); }
.ins-kind-rule { background: #e8edf1; color: var(--ab-brand-btq); }

/* --- Tag pill ------------------------------------------------------------ */

.ins-tag {
  display: inline-block;
  padding: 3px 11px;
  border-radius: 99px;
  background: var(--ab-bg);
  border: 1px solid var(--ab-border);
  color: var(--ins-text-muted);
  font-size: 0.7rem;
  white-space: nowrap;
}

/* --- The PR notice ------------------------------------------------------
   THE MOST IMPORTANT BOX ON EITHER SURFACE. Every instruction write opens a
   pull request against Bokksu-Data/dbt_snowflake and returns before it is
   merged; the database is a rebuildable cache of that repo's YAML tree. So
   this box never says "saved". It says the change is proposed, names the pull
   request, and states that it is not live until that merges.

   Three variants, because the failure modes mean different things:
     .ins-pr-note            neutral — a PR is open, awaiting merge
     .ins-pr-note-stale      409 — someone else changed the file first.
                             Copy must tell the user to resync and redo it.
     .ins-pr-note-error      502 — GitHub was unreachable and the edit was
                             NOT saved. Never word this as "try again later"
                             without saying the change was lost. */

.ins-pr-note {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 8px;
  background: #eef4f8;
  border: 1px solid #d7e4ec;
  color: #2a4a5c;
  font-size: 0.8rem;
  line-height: 1.5;
}

.ins-pr-note code {
  font-family: var(--ins-font-mono);
  font-size: 0.75rem;
  background: none;
  padding: 0;
  color: inherit;
}

.ins-pr-note a {
  color: inherit;
  text-decoration: underline;
}

.ins-pr-note-stale {
  background: #fdf4e3;
  border-color: #f0dcae;
  color: #7a5a06;
}

.ins-pr-note-error {
  background: #fbeaea;
  border-color: #f0d2d2;
  color: #8f2020;
}

/* --- Buttons ------------------------------------------------------------
   Styled explicitly; a bare Pico button renders azure here. */

.ins-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: auto;
  margin: 0;
  padding: 12px 25px;
  border: 1px solid var(--ins-accent);
  border-radius: var(--ins-radius);
  background: var(--ins-accent);
  color: #fff;
  font-family: var(--ab-font-body);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}

.ins-btn:hover:not([disabled]) {
  background: transparent;
  color: var(--ins-accent);
}

.ins-btn[disabled] {
  opacity: .45;
  cursor: not-allowed;
  background: var(--ins-accent);
  color: #fff;
}

.ins-btn-small { padding: 8px 16px; font-size: 0.8rem; }

.ins-btn-ghost {
  background: transparent;
  color: var(--ab-text-secondary);
  border-color: var(--ab-border);
}

.ins-btn-ghost:hover:not([disabled]) {
  background: var(--ab-hover-bg);
  color: var(--ab-text);
}

.ins-btn-ghost[disabled] {
  background: transparent;
  color: var(--ab-text-secondary);
}

.ins-btn-danger {
  background: transparent;
  color: var(--ab-danger);
  border-color: var(--ab-danger);
}

.ins-btn-danger:hover:not([disabled]) {
  background: var(--ab-danger);
  color: #fff;
}

/* --- Chip -----------------------------------------------------------------
   A pressed-state toggle: filter chips, review-state chips, proposal view
   switchers. Drive it with aria-pressed, not a class — the state has to reach
   a screen reader either way, so there is no reason to track it twice. */

.ins-chip {
  width: auto;
  margin: 0;
  padding: 8px 17px;
  border: 1px solid var(--ab-border);
  border-radius: 99px;
  background: var(--ab-surface);
  color: var(--ab-text-secondary);
  font-family: var(--ab-font-body);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}

.ins-chip:hover { border-color: var(--ins-accent); color: var(--ins-accent); }

.ins-chip[aria-pressed="true"] {
  background: var(--ins-accent);
  border-color: var(--ins-accent);
  color: #fff;
}

/* The count that rides along on a filter chip. */
.ins-chip .ins-count {
  margin-left: 7px;
  font-family: var(--ins-font-mono);
  font-size: 0.7rem;
  font-weight: 400;
  opacity: .8;
}

/* --- Monospace + empty state -------------------------------------------- */

.ins-mono { font-family: var(--ins-font-mono); }

.ins-empty {
  padding: 48px 24px;
  text-align: center;
  background: var(--ab-surface);
  border: 1px dashed var(--ab-border);
  border-radius: var(--ins-radius);
  color: var(--ins-text-muted);
  font-size: 0.85rem;
}

/* --- Visually hidden ------------------------------------------------------ */

.ins-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --- Panes ---------------------------------------------------------------
   `[hidden]` must beat any display the component sets, or Form and YAML (and
   a proposal's four views) render on top of each other. This was a real bug
   in the prototype. */

.ins-pane[hidden],
.ins-card[hidden],
.ins-stack[hidden] { display: none !important; }

.ins-stack { display: flex; flex-direction: column; gap: 20px; }


/* ===========================================================================
   END OF SHARED SECTION
   ---------------------------------------------------------------------------
   INSTRUCTIONS-ONLY styles go below, appended by the Instructions surface.
   This file is otherwise intentionally empty: the list, the detail layout,
   the Form/YAML editors, run preview and the history rail are not written
   yet.

   Keep the `ins-` prefix. Keep anything Proposals also needs ABOVE this line.
   ========================================================================= */


/* ===========================================================================
   INSTRUCTIONS — list and detail components.
   ---------------------------------------------------------------------------
   Everything below is Instructions-only and stays `ins-` prefixed. Sizes are
   in rem against the app's 20px base (Pico scales the root to 125%), so the
   prototype's pixel values land as: 18px ≈ .9rem, 17px ≈ .85rem, 16px ≈ .8rem,
   15px ≈ .75rem, 14px ≈ .7rem.
   ========================================================================= */

/* --- Page furniture ----------------------------------------------------- */

.ins-page { padding-bottom: 40px; }

.ins-page-head { margin-bottom: 18px; }

/* Title and the admin-only Resync action share a row (LTA-102). The action
   sits with the title rather than in the filter bar: it acts on the whole
   cache, not on what is currently filtered. */
.ins-head-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.ins-head-row h2 { margin-bottom: 0; }

/* The result of a resync: counts on success, the offending filenames on a
   422. Hidden until there is something to say -- `hidden` needs the explicit
   rule because Pico gives buttons and blocks their own display. */
.ins-resync-note {
  margin: 0 0 14px;
  padding: 10px 14px;
  border: 1px solid var(--ab-border);
  border-left: 3px solid var(--ins-accent);
  border-radius: var(--ins-radius);
  background: var(--ab-surface);
  color: var(--ab-text-secondary);
  font-size: 0.82rem;
  line-height: 1.5;
}

.ins-resync-note[hidden] { display: none; }

.ins-resync-error {
  border-left-color: var(--ab-danger);
  color: var(--ab-danger);
}

/* The empty state names the resync and now also offers it. */
.ins-empty-action { margin-top: 18px; }

.ins-page-head h2 {
  margin: 0 0 6px;
  font-family: var(--ab-font-display);
  color: var(--ab-text);
}

.ins-sub {
  margin: 0;
  max-width: 62ch;
  color: var(--ins-text-muted);
  font-size: 0.85rem;
  line-height: 1.5;
}

.ins-sub code { font-family: var(--ins-font-mono); font-size: 0.8rem; }

.ins-foot {
  margin-top: 16px;
  color: var(--ins-text-muted);
  font-size: 0.8rem;
  line-height: 1.5;
}

.ins-foot-tight { margin: 14px 0 0; }

.ins-note-inline {
  margin: 10px 0 0;
  color: var(--ins-text-muted);
  font-size: 0.78rem;
  line-height: 1.5;
}

/* The API's own words, quoted under our explanation of them. Deliberately
   quieter than the sentence above it — it is evidence, not the message. */
.ins-detail-msg {
  display: inline-block;
  margin-top: 4px;
  font-size: 0.72rem;
  opacity: .85;
}

.ins-error-state { color: var(--ab-danger); }

.ins-back {
  display: inline-block;
  margin-bottom: 14px;
  color: var(--ab-text-secondary);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
}

.ins-back:hover { color: var(--ins-accent); }

/* --- Filter bar ---------------------------------------------------------- */

.ins-filters {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.ins-chip-group,
.ins-chip-row { display: flex; gap: 8px; flex-wrap: wrap; }

.ins-chip[disabled] { opacity: .5; cursor: progress; }

.ins-search {
  /* Pico gives every input `width:100%`, which as a flex-basis pushes the
     search box onto a row of its own. An explicit basis keeps it beside the
     chips and lets it take the slack. */
  flex: 1 1 260px;
  margin: 0 0 0 auto;
  min-width: 240px;
  padding: 9px 16px;
  border: 1px solid var(--ab-border);
  border-radius: 8px;
  background: var(--ab-surface);
  color: var(--ab-text);
  font-family: inherit;
  font-size: 0.85rem;
}

.ins-search:focus {
  outline: none;
  border-color: var(--ins-accent);
  box-shadow: 0 0 0 3px var(--ins-accent-soft);
}

/* --- The list ------------------------------------------------------------ */

.ins-list {
  background: var(--ab-surface);
  border: 1px solid var(--ab-border);
  border-radius: var(--ins-radius);
  box-shadow: var(--ins-shadow);
  overflow: hidden;
}

/* An anchor, not a button: a row is a link to a route, so middle-click and
   "open in new tab" work and the router needs no click handler. */
.ins-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid var(--ab-border-light);
  color: inherit;
  text-decoration: none;
}

.ins-row:last-child { border-bottom: 0; }
.ins-row:hover { background: var(--ab-hover-bg); }

.ins-row:focus-visible {
  outline: 2px solid var(--ins-accent);
  outline-offset: -2px;
}

.ins-r-main { min-width: 0; }

.ins-r-name {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ins-text-body);
}

.ins-r-slug {
  display: block;
  margin-top: 2px;
  font-size: 0.7rem;
  color: var(--ins-text-muted);
  overflow-wrap: anywhere;
}

.ins-r-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* `status` — "does the SQL still resolve?" — not review state. */
.ins-flag {
  padding: 3px 10px;
  border-radius: 5px;
  background: #fbeaea;
  color: #8f2020;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* --- Detail layout ------------------------------------------------------- */

.ins-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.ins-side {
  position: sticky;
  top: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

/* --- Form / YAML segmented control --------------------------------------- */

.ins-modebar {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin: 0 0 20px;
}

.ins-seg {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--ab-border);
  border-radius: 9px;
  background: var(--ab-surface);
}

.ins-seg-b {
  width: auto;
  margin: 0;
  padding: 7px 18px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--ab-text-secondary);
  font-family: var(--ab-font-body);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
}

.ins-seg-b:hover { color: var(--ins-accent); }

.ins-seg-b[aria-pressed="true"] { background: var(--ins-accent); color: #fff; }

.ins-modenote { font-size: 0.8rem; color: var(--ins-text-muted); }

/* --- Fields -------------------------------------------------------------- */

.ins-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

.ins-field-last { margin-bottom: 0; }

.ins-field label {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ins-text-muted);
}

.ins-field textarea,
.ins-field input {
  width: 100%;
  margin: 0;
  padding: 11px 14px;
  border: 1px solid var(--ab-border);
  border-radius: 8px;
  background: var(--ab-surface);
  color: var(--ins-text-body);
  font-family: var(--ab-font-body);
  font-size: 0.82rem;
  line-height: 1.55;
  resize: vertical;
}

/* SQL and other code fields. The font-family is repeated here deliberately
   (LTA-103): `.ins-mono` is on the element, but `.ins-field textarea` above is
   a more specific selector (0,1,1 against 0,1,0) and was winning, so the SQL
   editor rendered in the proportional body face -- columns did not line up and
   the indentation the corpus is written with read as noise. The YAML textarea
   escaped this only because it sits outside `.ins-field`.
   Tabs render as 2 columns rather than 8 so the corpus's own indentation does
   not push wrapped lines off the right edge. */
.ins-field textarea.ins-code {
  font-family: var(--ins-font-mono);
  font-size: 0.75rem;
  line-height: 1.65;
  tab-size: 2;
  white-space: pre;
  overflow-x: auto;
}

.ins-field textarea:focus,
.ins-field input:focus {
  outline: none;
  border-color: var(--ins-accent);
  box-shadow: 0 0 0 3px var(--ins-accent-soft);
}

.ins-kv {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 11px 20px;
  margin: 4px 0 0;
  font-size: 0.82rem;
}

.ins-kv dt { color: var(--ins-text-muted); white-space: nowrap; }
.ins-kv dd { margin: 0; color: var(--ins-text-body); }

/* --- YAML mode ----------------------------------------------------------- */

.ins-card-b-flush { padding: 0; }

.ins-filebar {
  display: flex;
  gap: 12px;
  align-items: baseline;
  flex-wrap: wrap;
  padding: 11px 20px;
  background: var(--ab-bg);
  border-bottom: 1px solid var(--ab-border-light);
}

.ins-filebar > code {
  background: none;
  padding: 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ins-text-body);
  overflow-wrap: anywhere;
}

.ins-filemeta { font-size: 0.72rem; color: var(--ins-text-muted); line-height: 1.5; }

.ins-filemeta code {
  background: none;
  padding: 0;
  font-size: 0.7rem;
  color: inherit;
}

textarea.ins-yaml {
  display: block;
  width: 100%;
  margin: 0;
  padding: 18px 20px;
  border: 0;
  border-radius: 0;
  background: #22333d;
  color: #dbe6ee;
  font-size: 0.7rem;
  line-height: 1.7;
  resize: vertical;
}

textarea.ins-yaml:focus { outline: none; box-shadow: inset 0 0 0 2px var(--ins-accent); }

/* The refusal. It names the real reason the API would reject the edit, so it
   is a sentence, not a toast. */
.ins-yerr {
  padding: 13px 20px;
  border-top: 1px solid #f0d2d2;
  background: #fbeaea;
  color: #8f2020;
  font-size: 0.78rem;
  line-height: 1.5;
}

.ins-yerr code {
  background: none;
  padding: 0;
  font-family: var(--ins-font-mono);
  font-size: 0.72rem;
  color: inherit;
}

/* --- Run preview --------------------------------------------------------- */

.ins-params { display: flex; flex-direction: column; gap: 10px; }

.ins-param {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
  padding: 12px 16px;
  border: 1px solid var(--ab-border-light);
  border-radius: 8px;
  background: var(--ab-bg);
}

.ins-param label { margin: 0; }

.ins-param code {
  background: none;
  padding: 0;
  font-size: 0.78rem;
  color: var(--ins-accent);
}

.ins-param-ty {
  font-family: var(--ins-font-mono);
  font-size: 0.7rem;
  color: var(--ins-text-muted);
}

.ins-param select,
.ins-param input {
  width: auto;
  margin: 0 0 0 auto;
  padding: 5px 10px;
  border: 1px solid var(--ab-border);
  border-radius: 6px;
  background: var(--ab-surface);
  color: var(--ab-text);
  font-family: var(--ins-font-mono);
  font-size: 0.78rem;
}

.ins-run-row {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
  margin: 18px 0 0;
}

.ins-run-row .ins-note-inline { margin: 0; }

/* Tables scroll in their own container; the page body never scrolls
   sideways. */
.ins-tw { overflow-x: auto; margin-top: 14px; }

.ins-table { margin: 0; font-size: 0.8rem; }
.ins-table th, .ins-table td { white-space: nowrap; }
.ins-table .ins-n { text-align: right; font-variant-numeric: tabular-nums; }

/* --- The pull-request bar ------------------------------------------------ */

.ins-prbar {
  display: flex;
  gap: 20px;
  align-items: flex-end;
  flex-wrap: wrap;
  padding: 16px 20px;
  border: 1px solid var(--ab-border);
  border-radius: var(--ins-radius);
  background: var(--ab-surface);
  box-shadow: var(--ins-shadow);
}

.ins-prbar-t {
  flex: 1 1 240px;
  min-width: 220px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.ins-pr-state { font-size: 0.85rem; font-weight: 600; color: var(--ab-text); }
.ins-pr-state.ins-dirty { color: var(--ab-amber); }

.ins-prbar-sub { font-size: 0.75rem; color: var(--ins-text-muted); line-height: 1.45; }

/* The change note is required and non-blank (the API rejects "" and "   "),
   so it sits beside the action rather than hidden behind it. */
.ins-field-note { flex: 1 1 220px; margin-bottom: 0; }

/* --- History ------------------------------------------------------------- */

.ins-revs {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ins-rev {
  display: flex;
  gap: 14px;
  align-items: baseline;
  padding: 13px 0;
  border-bottom: 1px solid var(--ab-border-light);
  font-size: 0.82rem;
}

.ins-rev:first-child { padding-top: 0; }
.ins-rev:last-child { border-bottom: 0; padding-bottom: 0; }

.ins-rev-v { font-size: 0.7rem; color: var(--ins-text-muted); white-space: nowrap; }

.ins-rev-note {
  flex: 1;
  min-width: 0;
  color: var(--ins-text-body);
  overflow-wrap: anywhere;
}

.ins-rev-when { display: block; font-size: 0.72rem; color: var(--ins-text-muted); }

.ins-rev-current { font-size: 0.72rem; font-weight: 600; color: var(--ab-success); }

.ins-rev-revert {
  width: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ins-accent);
  font-family: var(--ab-font-body);
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.ins-rev-revert:hover { text-decoration: underline; }

/* --- Narrow ------------------------------------------------------------- */

@media (max-width: 900px) {
  .ins-detail-grid { grid-template-columns: 1fr; }
  .ins-side { position: static; }
  .ins-search { margin-left: 0; width: 100%; min-width: 0; }
  .ins-row { grid-template-columns: auto minmax(0, 1fr); }
  .ins-r-meta { grid-column: 2; justify-content: flex-start; }
  .ins-prbar { align-items: stretch; }
}


/* --- Pico's [role=group] -------------------------------------------------
   Pico v2 treats ANY `role="group"` as a joined button group: `width:100%` on
   the wrapper, `flex:1 1 auto` on every child, and squared-off inner corners.
   The filter chips and the Form/YAML control are labelled groups for screen
   readers, not Pico button groups — without this every chip stretches to an
   equal share of the row (measured: 395px each at 1280px).

   Specificity has to beat `[role=group] > *:not(:first-child)` (0,2,0), which
   is why these are written as child selectors with the child's own class. */

.ins-chip-group,
.ins-seg {
  width: auto;
  margin: 0;
  box-shadow: none;
}

.ins-chip-group { display: flex; }

.ins-chip-group > .ins-chip,
.ins-seg > .ins-seg-b { flex: 0 0 auto; }

.ins-chip-group > .ins-chip:not(:first-child) {
  margin-left: 0;
  border-radius: 99px;
}

.ins-seg > .ins-seg-b:not(:first-child) {
  margin-left: 0;
  border-radius: 6px;
}