/* Feature page — compact header, tab bar, and the test-lane rows that replaced the
     tile grid. Its own sheet because styles.css sits at the 500-line guardrail.
     Reuses .btn / .ac-pill / .empty from styles.css rather than restyling them. */

  /* ---- header ---- */
  .feat-head { max-width: 900px; margin: 0 auto 18px; text-align: left; }
  .feat-head .eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--brand-gold); }
  .feat-titlerow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 5px; }
  .feat-titlerow h1 { font-family: var(--font-display); font-weight: 400; font-size: 34px; letter-spacing: -0.03em; line-height: 1.1; color: var(--teal-800); margin: 0; }
  .feat-grow { flex: 1 1 auto; }
  .feat-last { font-size: 12px; color: var(--ink-500); margin-top: 7px; }

  /* ---- tab bar ----
     A segmented control rather than underlined text: the underline-only version left the
     inactive tabs as muted grey on cream, which read as disabled. Now the group sits on a
     cream track and the active tab is a filled teal pill, so the current view is unmistakable
     and the inactive ones are still solidly legible. */
  .feat-tabs { display: inline-flex; gap: 3px; margin-top: 18px; padding: 4px; max-width: 100%;
    background: var(--cream-200); border: 1px solid var(--border-default); border-radius: 13px; }
  .feat-tab { appearance: none; border: none; cursor: pointer; font-family: var(--font-body);
    font-size: 13.5px; font-weight: 500; color: var(--ink-700); background: transparent;
    padding: 8px 15px; border-radius: 9px; white-space: nowrap;
    transition: background .15s ease, color .15s ease; }
  .feat-tab:hover { background: var(--cream-100); color: var(--teal-800); }
  .feat-tab.on { background: var(--teal-700); color: #fff; font-weight: 600;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 2px 6px rgba(0,0,0,.16); }
  .feat-tab.on:hover { background: var(--teal-700); color: #fff; }
  .feat-tab .n { font-size: 11px; font-weight: 600; color: var(--ink-450); margin-left: 6px; }
  .feat-tab.on .n { color: rgba(255,255,255,.72); }

  /* ---- lane rows ---- */
  .lanes { max-width: 900px; margin: 0 auto; text-align: left; }
  .lane { display: flex; align-items: center; gap: 14px; background: var(--cream-100);
    border: 1px solid var(--border-default); border-radius: 14px; padding: 13px 16px; margin-bottom: 9px;
    box-shadow: var(--shadow-neo-warm-sm); }
  .lane-ic { width: 36px; height: 36px; flex: none; border-radius: 10px; background: var(--cream-200);
    display: grid; place-items: center; color: var(--teal-700); }
  .lane-ic svg { width: 19px; height: 19px; display: block; }
  .lane-tx { flex: 1 1 auto; min-width: 0; }
  .lane-nm { font-size: 13.5px; font-weight: 600; color: var(--teal-800); }
  .lane-ds { font-size: 11.5px; color: var(--ink-500); margin-top: 1px; }
  .lane-st { text-align: right; white-space: nowrap; flex: none; }
  .lane-ago { display: block; font-size: 10px; color: var(--ink-450); margin-top: 3px; }
  .lane .btn { flex: none; }

  /* Guardrails rides along with corner cases — opt-in, never part of a default run. */
  .lane-opt { display: inline-flex; align-items: center; gap: 6px; margin-top: 7px; cursor: pointer;
    font-size: 11px; color: var(--ink-500); }
  .lane-opt input { accent-color: var(--brand-gold); margin: 0; cursor: pointer; }
  .lane-opt .muted { color: var(--ink-450); }
  .lanes-note { font-size: 11.5px; color: var(--ink-450); padding: 6px 2px; }

  @media (max-width: 700px) {
    .lane { flex-wrap: wrap; }
    .lane-st { text-align: left; }
    /* Four pills overflow a phone width — scroll the track rather than wrap it, which would
       break the segmented-control shape. */
    .feat-tabs { display: flex; width: 100%; overflow-x: auto; }
  }

  /* ---- Test cases tab ----
     Was a flat wall: 6 always-open sections, ~52 rows each repeating their suite prefix, with
     per-lane badge colours that had drifted off-palette (purple/blue). Now: collapsed lanes,
     the suite printed once as a subhead, TC-IDs lifted out, and teal/gold only. */
  .tc-tools { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
  .tc-filter { flex: 1 1 auto; height: 38px; border-radius: 10px; padding: 0 13px;
    border: 1px solid var(--border-default); background: var(--cream-100);
    font-family: var(--font-body); font-size: 13px; color: var(--ink-900); outline: none; }
  .tc-filter:focus { border-color: var(--teal-400); }
  .tc-count { font-size: 11.5px; color: var(--ink-450); white-space: nowrap; }

  .tc-sec { border: 1px solid var(--border-default); border-radius: 12px; background: var(--cream-100);
    margin-bottom: 8px; overflow: hidden; }
  .tc-sec-head { display: flex; align-items: center; gap: 10px; padding: 11px 14px; cursor: pointer;
    list-style: none; font-size: 13px; }
  .tc-sec-head::-webkit-details-marker { display: none; }
  /* Disclosure caret, drawn in gold so the row needs no extra icon asset. */
  .tc-sec-head::before { content: '▸'; color: var(--brand-gold); font-size: 11px; transition: transform .15s ease; }
  .tc-sec[open] .tc-sec-head::before { transform: rotate(90deg); }
  .tc-lane { font-weight: 600; color: var(--teal-800); }
  .tc-n { font-size: 11px; font-weight: 600; color: var(--teal-700); background: var(--cream-200);
    border-radius: 999px; padding: 1px 8px; }
  .tc-sec-desc { flex: 1 1 auto; min-width: 0; font-size: 11.5px; color: var(--ink-450);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tc-sec-body { border-top: 1px solid var(--border-default); padding: 6px 14px 12px; }

  .tc-suite { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
    color: var(--brand-gold); margin: 12px 0 5px; }
  .tc-case { display: flex; align-items: baseline; gap: 10px; padding: 4px 0 4px 12px;
    border-left: 2px solid var(--cream-200); }
  .tc-case:hover { border-left-color: var(--teal-400); }
  .tc-case-t { flex: 1 1 auto; font-size: 13px; line-height: 1.45; color: var(--ink-900); }
  .tc-id { flex: none; font-family: ui-monospace, monospace; font-size: 10.5px; color: var(--ink-450); }
  .tc-case[hidden], .tc-suite[hidden], .tc-sec[hidden] { display: none; }