/* =============================================================================
   F3i Tool Library — app.css
   Component styles only. Tokens live in tokens.css and are not redefined here.
   ========================================================================== */

:root{
  /* derived — compositions of guide section 1 tokens only. No new brand hues.
     Every colour literal in this file is confined to this block. */
  --navy-hover:      #16305c;                    /* guide section 2: the only sanctioned hover */
  --tint-green-bg:   rgba(47,125,94,.06);
  --tint-green-line: rgba(47,125,94,.40);
  --tint-gold-bg:    rgba(143,107,46,.06);
  --tint-gold-line:  rgba(143,107,46,.40);
  --tint-red-bg:     rgba(178,58,54,.07);
  --tint-red-line:   rgba(178,58,54,.45);
  --tint-navy-bg:    rgba(30,58,110,.06);
  --tint-navy-line:  rgba(30,58,110,.40);
  --console:         #0f1626;                    /* guide section 5 console surface */
  --console-ink:     #cdd6e4;
  --console-dim:     #8b98ab;                    /* 5.03:1 on --console; AA for 10px labels/prompts */
  --console-warn:    #e0b658;
  --console-err:     #f0817d;
  --console-line:    rgba(255,255,255,.14);
  --focus-ring:      0 0 0 4px rgba(30,58,110,.16);
  --overlay:         rgba(15,23,42,.40);
  --line-strong:     rgba(15,23,42,.22);
  --glow-mist:       rgba(125,211,252,.28);
  --glow-gold:       rgba(201,162,75,.18);
  --on-dark-72:      rgba(255,255,255,.72);
  --on-dark-66:      rgba(255,255,255,.66);
  --on-dark-62:      rgba(255,255,255,.62);
  --on-dark-55:      rgba(255,255,255,.55);
  --on-dark-rule:    rgba(255,255,255,.20);
  --mask-solid:      #000;
  --mask-clear:      transparent;

  /* motion */
  --ease:cubic-bezier(.16,1,.3,1);
  --dur-ui:.12s;
  --dur-reveal:.42s;
}

/* ============================================================ 0. shell */
body.is-locked{overflow:hidden}

.shell{
  max-width:1240px;
  margin:0 auto;
  padding:var(--space-7) var(--space-6) 64px;
}

.skip-link{
  position:absolute;left:var(--space-4);top:var(--space-4);
  z-index:80;
  font-family:var(--grotesk);font-weight:700;font-size:13px;
  background:var(--white);color:var(--navy);
  border:1px solid var(--line);border-radius:7px;
  padding:9px 14px;text-decoration:none;
  /* transform, not top: the spec forbids transitions on box-offset properties */
  transform:translateY(-200%);
  transition:transform var(--dur-ui) var(--ease);
}
.skip-link:focus{transform:translateY(0)}

.page-foot{
  margin-top:var(--space-7);
  padding-top:var(--space-5);
  border-top:1px solid var(--line-soft);
  font-size:12px;
  color:var(--muted);
}

/* ============================================================= 1. hero */
.hero{
  position:relative;
  overflow:hidden;
  background:var(--navy);
  color:var(--white);
  padding:56px 0 var(--space-7);
}
.hero-grid{
  position:absolute;inset:0;
  background-image:
    repeating-linear-gradient(0deg, var(--navy-line) 0 1px, var(--mask-clear) 1px 32px),
    repeating-linear-gradient(90deg, var(--navy-line) 0 1px, var(--mask-clear) 1px 32px);
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 20% 0%, var(--mask-solid) 0%, var(--mask-clear) 78%);
  mask-image:radial-gradient(ellipse 90% 70% at 20% 0%, var(--mask-solid) 0%, var(--mask-clear) 78%);
  pointer-events:none;
}
.hero-glow{
  position:absolute;inset:-20%;
  background:
    radial-gradient(circle at 8% 4%, var(--glow-mist) 0%, var(--mask-clear) 42%),
    radial-gradient(circle at 92% 96%, var(--glow-gold) 0%, var(--mask-clear) 46%);
  filter:blur(70px);
  pointer-events:none;
}
.hero-inner{
  position:relative;
  max-width:1240px;
  margin:0 auto;
  padding:0 var(--space-6);
}
.hero-top{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-6)}
.logo{
  font-family:var(--grotesk);font-weight:900;font-size:22px;
  letter-spacing:-.04em;color:var(--white);line-height:1;
}
.logo .i{color:var(--mist)}
.logo--sm{font-size:20px}
.hero-mark-label{
  font-family:var(--mono);font-weight:500;font-size:10px;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--on-dark-55);
  padding-left:var(--space-3);
  border-left:1px solid var(--on-dark-rule);
}
.eyebrow--dark{color:var(--gold-foil)}
.hero-title{
  font-family:var(--grotesk);font-weight:800;
  font-size:clamp(30px,4.6vw,44px);
  letter-spacing:-.02em;line-height:1.08;
  color:var(--white);
  margin-top:var(--space-3);
}
.hero-sub{
  font-size:15px;line-height:1.6;
  color:var(--on-dark-72);
  max-width:620px;
  margin-top:var(--space-4);
}
.hero-count{
  font-family:var(--mono);font-weight:500;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--mist);
  margin-top:var(--space-5);
}

/* ========================================================== 2. toolbar */
.toolbar{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:var(--space-5);
  margin-bottom:var(--space-6);
}
.toolbar-row{display:flex;gap:var(--space-4);align-items:center;flex-wrap:wrap}
.toolbar-row--filters{
  margin-top:var(--space-5);
  padding-top:var(--space-5);
  border-top:1px solid var(--line-soft);
  gap:var(--space-6);
  align-items:flex-start;
}
.filter-group{display:flex;flex-direction:column;gap:var(--space-2)}
.filter-group--wide{flex:1 1 320px}
.filter-label{
  font-family:var(--mono);font-weight:500;font-size:11px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
}

.field--search{flex:1 1 320px;min-width:240px;position:relative;display:flex;align-items:center}
.field-icon{
  position:absolute;left:var(--space-3);
  width:16px;height:16px;color:var(--muted);pointer-events:none;
}
.input--search{
  width:100%;
  font-family:var(--sans);font-size:13px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:7px;
  padding:9px 34px 9px 34px;
  transition:border-color var(--dur-ui) var(--ease);
}
.input--search::placeholder{color:var(--muted)}
.input--search:hover{border-color:var(--line-strong)}
.input-clear{
  position:absolute;right:6px;
  width:26px;height:26px;
  display:grid;place-items:center;
  background:none;border:0;border-radius:6px;
  color:var(--muted);
  transition:color var(--dur-ui) var(--ease);
}
.input-clear:hover{color:var(--ink)}

.segmented{
  display:inline-flex;
  border:1px solid var(--line);
  border-radius:8px;
  overflow:hidden;
  background:var(--white);
}
.seg{
  font-family:var(--mono);font-weight:500;font-size:10.5px;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);
  padding:7px 12px;
  background:transparent;border:0;
  transition:background-color var(--dur-ui) var(--ease),color var(--dur-ui) var(--ease);
}
.seg + .seg{border-left:1px solid var(--line)}
.seg:hover{color:var(--ink);background:var(--paper)}
.seg[aria-pressed="true"]{background:var(--navy);color:var(--white)}
.seg[aria-pressed="true"]:hover{background:var(--navy-hover);color:var(--white)}

.chip-row{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.chip{
  font-family:var(--mono);font-weight:500;font-size:10px;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--navy);
  background:var(--white);
  border:1px solid var(--line);
  border-radius:20px;
  padding:6px 12px;
  transition:background-color var(--dur-ui) var(--ease),color var(--dur-ui) var(--ease),border-color var(--dur-ui) var(--ease);
}
.chip:hover{border-color:var(--navy)}
.chip[aria-pressed="true"]{background:var(--navy);color:var(--white);border-color:var(--navy)}
.chip[aria-pressed="true"]:hover{background:var(--navy-hover)}
.chip[data-empty]{color:var(--muted);border-style:dashed}

.ghost-btn--reset{margin-left:auto}

/* route note (bad deep link) */
.route-note{
  margin-bottom:var(--space-5);
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);
}

/* ======================================================= 3. card grid */
.card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:var(--space-5);
  align-items:stretch;
}

.card{
  position:relative;
  overflow:hidden;
  height:100%;
  display:flex;flex-direction:column;gap:var(--space-3);
  text-align:left;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:var(--space-5);
  /* guide §4: borders separate, not shadows; §10: product-UI state = colour/border only */
  transition:border-color var(--dur-ui) var(--ease);
}
.card:hover{border-color:var(--navy)}
.card:hover .card-cue{color:var(--navy)}

.card-top{display:flex;align-items:center;gap:var(--space-2)}
.card-glyph{
  width:30px;height:30px;
  border:1px solid var(--line);border-radius:8px;
  display:grid;place-items:center;
  color:var(--navy);
}
.card-glyph .icon{width:17px;height:17px}
.card-type{
  font-family:var(--mono);font-weight:500;font-size:9.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
}
.card-lock{margin-left:auto;display:block}
.card-lock .icon{width:15px;height:15px}
.card-name{
  font-family:var(--grotesk);font-weight:700;font-size:16px;
  letter-spacing:-.01em;line-height:1.25;color:var(--ink);
  display:block;
}
.card-summary{
  font-size:13px;line-height:1.5;color:var(--muted);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  line-clamp:2;overflow:hidden;
}
.card-tags{display:flex;flex-wrap:wrap;gap:6px}
.card-foot{
  margin-top:auto;
  padding-top:var(--space-4);
  border-top:1px solid var(--line-soft);
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);
}
.card-cue{color:var(--muted);display:block;transition:color var(--dur-ui) var(--ease)}

/* locked treatment: rail + lock icon + pill word. Never opacity, and the card
   surface stays white so the tinted status pill keeps its AA contrast (a --paper
   repaint darkens the 6%-tint pill fill below 4.5:1 for the BETA label). */
.card.is-locked::before{
  content:"";
  position:absolute;left:0;top:0;bottom:0;width:3px;
  border-left:3px dashed var(--gold);
}
.card--beta .card-lock{color:var(--gold)}
.card--restricted.is-locked::before{border-left-style:solid;border-left-color:var(--red)}
.card--restricted .card-lock{color:var(--red)}
/* planned = low/inactive on the severity scale: muted, dashed rail, lock glyph */
.card--planned.is-locked::before{border-left-color:var(--muted)}
.card--planned .card-lock{color:var(--muted)}

/* first-paint reveal only; the class is removed before any refilter */
.card-grid.is-first-paint .card{
  opacity:0;
  transform:translateY(10px);
  animation:card-in var(--dur-reveal) var(--ease) forwards;
  animation-delay:calc(var(--i) * 80ms);
}
@keyframes card-in{to{opacity:1;transform:translateY(0)}}

/* ===================================================== 4. pills & tags */
.pill-icon{width:13px;height:13px;flex:0 0 auto}
.pill--live{color:var(--green);border-color:var(--tint-green-line);background:var(--tint-green-bg)}
.pill--planned{color:var(--muted);border-color:var(--line);background:transparent}
.pill--beta{color:var(--gold);border-color:var(--tint-gold-line);background:var(--tint-gold-bg)}
.pill--restricted{color:var(--red);border-color:var(--tint-red-line);background:var(--tint-red-bg)}
.pill--internal{color:var(--navy);border-color:var(--tint-navy-line);background:var(--tint-navy-bg)}
.pill--on{color:var(--green);border-color:var(--tint-green-line);background:var(--tint-green-bg)}
.pill--warn{color:var(--gold);border-color:var(--tint-gold-line);background:var(--tint-gold-bg)}
.pill--err{color:var(--red);border-color:var(--tint-red-line);background:var(--tint-red-bg)}

.tag{
  font-family:var(--mono);font-weight:500;font-size:9px;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);
  border:1px solid var(--line);
  border-radius:20px;
  padding:3px 8px;
  background:transparent;
  white-space:nowrap;
}
.tag--new{background:var(--gold);color:var(--white);border-color:var(--gold)}
.tag--tbd{border-style:dashed;border-color:var(--tint-gold-line);color:var(--gold)}
.tag--pain{border-color:var(--tint-red-line);color:var(--red)}

/* ======================================================== 5. buttons */
.primary-btn{transition:background-color var(--dur-ui) var(--ease)}
.primary-btn:hover{background:var(--navy-hover)}
.primary-btn:active{background:var(--navy-hover)}
.primary-btn[disabled],.primary-btn:disabled{
  background:var(--paper);color:var(--muted);
  border:1px solid var(--line);cursor:not-allowed;transform:none;
}
.ghost-btn{transition:border-color var(--dur-ui) var(--ease),background-color var(--dur-ui) var(--ease),color var(--dur-ui) var(--ease)}
.ghost-btn:hover{border-color:var(--navy)}
.ghost-btn:active{background:var(--paper)}
.ghost-btn[disabled],.ghost-btn:disabled{color:var(--muted);border-color:var(--line-soft);cursor:not-allowed}
.ghost-btn[disabled]:hover{border-color:var(--line-soft)}
.ghost-btn--gate .icon{color:var(--navy)}
.link-btn{transition:color var(--dur-ui) var(--ease)}
.link-btn:hover{color:var(--navy-hover);text-decoration-thickness:2px}
.icon-btn{
  width:36px;height:36px;
  display:grid;place-items:center;
  border:1px solid var(--line);border-radius:8px;
  background:var(--white);color:var(--navy);
  transition:border-color var(--dur-ui) var(--ease),background-color var(--dur-ui) var(--ease);
}
.icon-btn:hover{border-color:var(--navy)}
.icon-btn:active{background:var(--paper)}
.icon-btn--onDark{
  background:transparent;color:var(--console-ink);
  border-color:var(--console-line);
  width:28px;height:28px;
}
.icon-btn--onDark:hover{border-color:var(--console-ink)}

/* ==================================================== 6. empty state */
.empty-state{
  text-align:center;
  padding:72px var(--space-6);
  border:1px dashed var(--line);
  border-radius:var(--radius);
  background:var(--white);
}
.empty-glyph{width:44px;height:44px;color:var(--gold-foil);margin:0 auto}
.empty-title{
  font-family:var(--grotesk);font-weight:700;font-size:20px;
  letter-spacing:-.01em;color:var(--ink);
  margin-top:var(--space-4);
}
.empty-body{
  font-size:13.5px;line-height:1.55;color:var(--muted);
  max-width:420px;margin:var(--space-3) auto var(--space-5);
}

/* ==================================================== 7. shared bits */
.mono-inline{
  font-family:var(--mono);font-size:11.5px;
  color:var(--ink);background:var(--paper);
  border:1px solid var(--line-soft);border-radius:4px;
  padding:1px 5px;
}
.callout--high{border-left-color:var(--red)}
.callout--med{border-left-color:var(--gold)}
.callout--low{border-left-color:var(--muted)}
.callout strong{font-family:var(--grotesk);font-weight:700;font-size:12.5px;display:block;margin-bottom:4px}
.callout p + p{margin-top:var(--space-2)}

.spec-list{border-top:1px solid var(--line)}
.spec-row{
  display:grid;grid-template-columns:132px 1fr;gap:var(--space-4);
  padding:9px 0;border-bottom:1px solid var(--line-soft);
}
.spec-row dt{
  font-family:var(--mono);font-weight:500;font-size:9.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  padding-top:2px;
}
.spec-row dd{font-size:12.5px;line-height:1.5;color:var(--ink)}
.spec-list--compact{border-top:0}
.spec-list--compact .spec-row{padding:7px 0}

.table-scroll{overflow-x:auto}
.dtable{width:100%;text-align:left}
.dtable th{
  font-family:var(--mono);font-weight:500;font-size:9.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  border-bottom:1px solid var(--line);
  padding:0 var(--space-4) var(--space-2) 0;
  white-space:nowrap;
}
.dtable td{
  font-size:12.5px;line-height:1.5;
  border-bottom:1px solid var(--line-soft);
  padding:9px var(--space-4) 9px 0;
  vertical-align:top;
}
.method{
  font-family:var(--mono);font-weight:500;font-size:9.5px;
  letter-spacing:.1em;text-transform:uppercase;
  border-radius:4px;padding:2px 6px;
  border:1px solid var(--line);
  display:inline-block;white-space:nowrap;
}
.method--get{color:var(--navy);border-color:var(--tint-navy-line);background:var(--tint-navy-bg)}
.method--post{color:var(--gold);border-color:var(--tint-gold-line);background:var(--tint-gold-bg)}
.method--delete{color:var(--red);border-color:var(--tint-red-line);background:var(--tint-red-bg)}

.console-block{margin-top:var(--space-4)}
.console-head{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);
  font-family:var(--mono);font-weight:500;font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--console-dim);
  background:var(--console);
  border-radius:8px 8px 0 0;
  padding:var(--space-2) var(--space-3) 0 var(--space-4);
}
.console-head + .console{border-radius:0 0 8px 8px;margin-top:0}
.console{
  background:var(--console);color:var(--console-ink);
  font-family:var(--mono);font-weight:400;font-size:12px;line-height:1.6;
  border-radius:8px;
  padding:var(--space-4);
  overflow-x:auto;
  white-space:pre;
}
.console .t-dim{color:var(--console-dim)}
.console .t-warn{color:var(--console-warn)}
.console .t-err{color:var(--console-err)}
.console .t-info{color:var(--mist)}
.console--compact{font-size:11.5px;padding:var(--space-3)}

/* ==================================================== 8. detail view */
.detail-overlay{
  position:fixed;inset:0;z-index:50;
  background:var(--overlay);
  opacity:0;
  transition:opacity var(--dur-reveal) var(--ease);
}
.detail-overlay.is-open{opacity:1}
.detail-scroll{position:absolute;inset:0;overflow-y:auto;padding:var(--space-6)}
.detail-panel{
  max-width:1120px;margin:0 auto;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:var(--space-6);
  opacity:0;transform:translateY(14px);
  transition:opacity var(--dur-reveal) var(--ease),transform var(--dur-reveal) var(--ease);
}
.detail-overlay.is-open .detail-panel{opacity:1;transform:translateY(0)}
.detail-bar{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);
  padding-bottom:var(--space-5);
  border-bottom:1px solid var(--line-soft);
  margin-bottom:var(--space-6);
}
.detail-cols{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:var(--space-7);
  align-items:start;
}

/* --- preview panel --- */
.preview-stage{
  position:relative;
  aspect-ratio:16 / 10;
  background:var(--navy);
  border-radius:var(--radius);
  overflow:hidden;
  display:grid;place-items:center;
}
.preview-grid{
  position:absolute;inset:0;
  background-image:
    repeating-linear-gradient(0deg, var(--navy-line) 0 1px, var(--mask-clear) 1px 24px),
    repeating-linear-gradient(90deg, var(--navy-line) 0 1px, var(--mask-clear) 1px 24px);
  -webkit-mask-image:radial-gradient(ellipse 85% 85% at 22% 12%, var(--mask-solid) 0%, var(--mask-clear) 82%);
  mask-image:radial-gradient(ellipse 85% 85% at 22% 12%, var(--mask-solid) 0%, var(--mask-clear) 82%);
  pointer-events:none;
}
.preview-plate{position:relative;text-align:center;padding:var(--space-6);max-width:80%}
.preview-eyebrow{
  font-family:var(--mono);font-weight:500;font-size:10px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold-foil);
  margin-top:var(--space-3);
}
.preview-caption{
  font-family:var(--serif);font-weight:300;font-style:italic;font-size:17px;line-height:1.4;
  color:var(--on-dark-66);
  margin-top:6px;
}
.preview-badge{
  position:absolute;left:var(--space-4);bottom:var(--space-4);
  font-family:var(--mono);font-weight:500;font-size:9px;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--on-dark-62);
  border:1px solid var(--on-dark-rule);
  border-radius:20px;padding:3px 9px;
}
.thumb-strip{
  display:flex;gap:var(--space-3);
  margin-top:var(--space-3);
  overflow-x:auto;padding-bottom:4px;
  list-style:none;
}
.thumb{
  flex:0 0 96px;
  border:1px solid var(--line);border-radius:8px;
  padding:0;background:var(--white);overflow:hidden;
  display:block;
  transition:border-color var(--dur-ui) var(--ease);
}
.thumb:hover{border-color:var(--navy)}
.thumb-grid{
  display:block;aspect-ratio:16 / 10;
  background-color:var(--navy);
  background-image:
    repeating-linear-gradient(0deg, var(--navy-line) 0 1px, var(--mask-clear) 1px 24px),
    repeating-linear-gradient(90deg, var(--navy-line) 0 1px, var(--mask-clear) 1px 24px);
}
.thumb-label{
  font-family:var(--mono);font-weight:500;font-size:8.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  display:block;padding:4px 6px;
  background:var(--white);
  border-bottom:2px solid transparent;
  transition:color var(--dur-ui) var(--ease),border-color var(--dur-ui) var(--ease);
}
.thumb[aria-pressed="true"]{border-color:var(--navy)}
.thumb[aria-pressed="true"] .thumb-label{color:var(--navy);border-bottom-color:var(--gold)}

/* --- info panel --- */
.detail-title{
  font-family:var(--grotesk);font-weight:800;
  font-size:clamp(26px,2.6vw,34px);
  letter-spacing:-.02em;line-height:1.12;color:var(--ink);
  margin-top:var(--space-3);
}
.detail-pills{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-4)}
.detail-summary{
  font-size:15px;line-height:1.6;color:var(--muted);
  max-width:52ch;margin-top:var(--space-4);
}
.detail-spec{margin-top:var(--space-5)}
.detail-actions{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);
  margin-top:var(--space-6);
  padding-top:var(--space-5);
  border-top:1px solid var(--line);
}
.detail-gate{margin-top:var(--space-4)}

/* --- tabs --- */
.detail-tabs{
  display:flex;gap:var(--space-6);
  margin-top:var(--space-7);
  border-bottom:1px solid var(--line);
  overflow-x:auto;
}
.tab{
  font-family:var(--grotesk);font-weight:600;font-size:14px;
  color:var(--muted);background:none;border:0;
  border-bottom:2px solid transparent;
  padding:0 0 10px;white-space:nowrap;
  display:inline-flex;align-items:center;
  transition:color var(--dur-ui) var(--ease),border-color var(--dur-ui) var(--ease);
}
.tab:hover{color:var(--ink)}
.tab[aria-selected="true"]{color:var(--navy);border-bottom-color:var(--gold)}
.tab-count{
  font-family:var(--mono);font-size:10px;
  background:var(--navy);color:var(--white);
  border-radius:20px;padding:2px 7px;
  margin-left:var(--space-2);
}
.tabpanel{padding-top:var(--space-6)}
.tabpanel--prose{max-width:820px}
.panel-prose p{font-size:14px;line-height:1.6;max-width:66ch}
.panel-prose p + p{margin-top:var(--space-3)}
.panel-h{
  font-family:var(--grotesk);font-weight:700;font-size:15px;
  margin-top:var(--space-6);margin-bottom:var(--space-3);
}
.panel-h:first-child{margin-top:0}

/* planned "intended capabilities" list — hairline gold rule per item */
.cap-list{margin-top:var(--space-4)}
.cap-list li{
  position:relative;
  font-size:13.5px;line-height:1.55;color:var(--ink);
  padding:8px 0 8px var(--space-5);
  border-bottom:1px solid var(--line-soft);
}
.cap-list li::before{
  content:"";
  position:absolute;left:0;top:14px;
  width:12px;height:1px;background:var(--gold);
}

.steps{counter-reset:step;margin-top:var(--space-4)}
.steps li{
  counter-increment:step;
  display:grid;grid-template-columns:22px 1fr;gap:var(--space-4);
  padding-bottom:var(--space-4);
}
.steps li::before{
  content:counter(step);
  width:22px;height:22px;border-radius:20px;
  background:var(--navy);color:var(--white);
  font-family:var(--mono);font-weight:500;font-size:11px;
  display:grid;place-items:center;
}
.step-title{font-family:var(--grotesk);font-weight:700;font-size:14px;display:block}
.step-body{font-size:13px;line-height:1.55;color:var(--muted);margin-top:2px}

.log-list{margin-top:var(--space-2)}
.log-list li{
  display:grid;grid-template-columns:96px 1fr;gap:var(--space-4);
  padding:10px 0;border-bottom:1px solid var(--line-soft);
}
.log-date{font-family:var(--mono);font-size:10.5px;color:var(--muted);padding-top:3px}
.log-entry{font-size:13px;line-height:1.55;color:var(--ink)}
.log-entry .tag{margin-right:var(--space-2)}
.log-version{font-family:var(--mono);font-size:11px;color:var(--muted);margin-left:var(--space-2)}

.endpoint{margin-top:var(--space-6);padding-top:var(--space-5);border-top:1px solid var(--line-soft)}
.endpoint-head{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap}
.endpoint-path{font-family:var(--mono);font-size:12.5px;color:var(--ink)}
.endpoint-desc{font-size:13px;color:var(--muted);margin-top:var(--space-2);max-width:66ch}

/* ===================================================== 9. request modal */
.modal-overlay{
  position:fixed;inset:0;z-index:60;
  background:var(--overlay);
  display:grid;place-items:center;
  padding:var(--space-6);
  overflow-y:auto;
}
.modal{
  width:min(520px,100%);
  background:var(--white);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:var(--space-6);
  opacity:0;transform:translateY(10px);
  transition:opacity .28s var(--ease),transform .28s var(--ease);
}
.modal-overlay.is-open .modal{opacity:1;transform:translateY(0)}
.modal-title{
  font-family:var(--grotesk);font-weight:700;font-size:19px;
  letter-spacing:-.01em;margin-top:var(--space-2);
}
.modal-text{font-size:13.5px;line-height:1.55;color:var(--muted);margin-top:var(--space-4)}
.modal-body .spec-list{margin-top:var(--space-4)}
.modal-actions{display:flex;justify-content:flex-end;gap:var(--space-3);margin-top:var(--space-6)}

.copy-note{
  position:fixed;left:50%;bottom:var(--space-6);transform:translateX(-50%);
  z-index:70;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  background:var(--white);color:var(--ink);
  border:1px solid var(--line);border-radius:20px;
  padding:6px 14px;
  box-shadow:var(--shadow);
}
/* stays in the a11y tree so role="status" announces; only the chrome hides */
.copy-note:empty{opacity:0;pointer-events:none;border-color:transparent;box-shadow:none}

/* ============================================== 10. interaction states */
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--navy);
  outline-offset:2px;
  box-shadow:var(--focus-ring);
}
/* Deliberate divergence, documented: guide section 5 gives form controls a
   navy border on focus with no glow; section 11 asks for a ring on every
   interactive element. Section 5 is the more specific rule for inputs, so the
   ring is suppressed here and the border carries the state. */
input:focus-visible,input:focus{
  outline:none;border-color:var(--navy);
  /* crisp 1px ring (2px total perimeter) for WCAG 2.4.11, no soft glow per §5 */
  box-shadow:0 0 0 1px var(--navy);
}
.seg:focus-visible,.tab:focus-visible{outline-offset:-2px}
@supports not selector(:focus-visible){
  a:focus,button:focus,[tabindex]:focus{
    outline:2px solid var(--navy);outline-offset:2px;box-shadow:var(--focus-ring);
  }
}
.tag,.pill{cursor:default}

/* ==================================================== 11. responsive */
@media (max-width:1100px){
  .shell,.hero-inner{padding-left:var(--space-5);padding-right:var(--space-5)}
  .detail-panel{padding:var(--space-5)}
  .detail-cols{gap:var(--space-6)}
}

@media (max-width:900px){
  .detail-cols{grid-template-columns:1fr}
  .preview-stage{max-height:60vh}
  .toolbar-row--filters{flex-direction:column;gap:var(--space-5)}
  .filter-group{width:100%}
  .hero{padding-top:44px}
}

@media (max-width:700px){
  .card-grid{grid-template-columns:1fr}
  .detail-scroll{padding:var(--space-4)}
  .detail-panel{padding:var(--space-4)}
  .detail-actions{flex-direction:column;align-items:stretch}
  .detail-actions > *{width:100%;justify-content:center}
  .spec-row{grid-template-columns:1fr;gap:2px}
  .detail-tabs{gap:var(--space-4);scrollbar-width:none}
  .toolbar-row--search{flex-direction:column;align-items:stretch}
  .ghost-btn--reset{margin-left:0;width:100%;justify-content:center}
  .segmented{width:100%}
  .seg{flex:1;padding:11px 8px}
  .chip{padding:10px 14px}
  .icon-btn{width:40px;height:40px}
  .thumb{flex:0 0 88px}
  .log-list li{grid-template-columns:1fr;gap:2px}
}

@media (max-width:430px){
  .card{padding:var(--space-4)}
  .card-summary{-webkit-line-clamp:3;line-clamp:3}
  .thumb{flex:0 0 78px}
  .modal{padding:var(--space-5)}
  .ghost-btn--back .btn-text{display:none}
  .steps li{grid-template-columns:22px 1fr;gap:var(--space-3)}
}