/* ============================================================================
 * TRACE — signature feature styles. `.tr-*` only; no other screen's selector.
 *
 * Composes the v6 "Industrial iOS" tokens (styles/app-v6.css). Rules:
 *   - flat content (no backdrop-filter); chrome = the action bar only, and it
 *     is gated exactly like the app's chrome (noglask / reduced-transparency /
 *     contrast);
 *   - 12px type floor, 44px targets, AA contrast in light + dark + contrast;
 *   - motion only under prefers-reduced-motion:no-preference, and killed again
 *     by html.noglask (low-end) and .tr-nomotion (deviceMemory ≤ 4);
 *   - one accent (amber) for traversed evidence, green for verified only.
 * ==========================================================================*/

/* ------------------------------------------------------------- 0. SCAFFOLD */
.tr-root{
  position:relative;
  /* clearance for the fixed action bar (64) + tab bar (56) lives on the root,
   * AFTER the spine, so the idle pulse cannot travel under the glass bar */
  padding-bottom:calc(64px + var(--s2) + env(safe-area-inset-bottom));
  /* the rail/gutter rhythm: rail at 12, cards at 36 inside #view's 16px gutter */
  --tr-rail-x:12px;
  --tr-card-x:36px;
  --tr-bleed:var(--gutter);
}
@media (min-width:900px){ .tr-root{ --tr-bleed:var(--sp5); } }
@media (max-width:359px){ .tr-root{ --tr-card-x:34px; } }
.tr-root *{ box-sizing:border-box; }
.tr-root b,.tr-root strong{ font-weight:600; }
.tr-note{
  display:block; margin:var(--s5) 0 0; padding:0 var(--s1);
  font-size:var(--fs-13); line-height:1.5; color:var(--mut);
}

/* ------------------------------------------------------------------ 1. HEAD */
.tr-head{
  position:sticky; z-index:5;
  top:calc(var(--topbar-h) + env(safe-area-inset-top));
  background:var(--bg);
  padding:var(--s3) 0 var(--s2);
  margin:0 0 var(--s2);
}
/* the sticky head must cover the full canvas, not just the content column */
.tr-head::before,.tr-head::after{
  content:""; position:absolute; top:0; bottom:0; width:var(--tr-bleed); background:var(--bg);
}
.tr-head::before{ left:calc(var(--tr-bleed) * -1); }
.tr-head::after{ right:calc(var(--tr-bleed) * -1); }
.tr-headtop{ display:flex; align-items:center; gap:var(--s2); min-height:16px; }
/* scrolled: the head collapses to one summary row so the spine keeps the
 * viewport (200px of chrome on a 568px-tall phone leaves no room for a card) */
.tr-root.tr-stuck .tr-head{
  display:flex; align-items:center; gap:var(--s2); min-height:48px; padding:0;
}
.tr-root.tr-stuck .tr-headtop{ flex:none; }
.tr-root.tr-stuck .tr-kicker{ white-space:nowrap; }
.tr-root.tr-stuck .tr-title{
  flex:1; min-width:0; margin:0; font-size:var(--fs-15); line-height:1.2;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.tr-root.tr-stuck .tr-meta,
.tr-root.tr-stuck .tr-ledger,
.tr-root.tr-stuck .tr-honest,
.tr-root.tr-stuck .tr-seg,
.tr-root.tr-stuck .tr-tagbar{ display:none; }
.tr-stuckbadge{
  display:none; flex:none; align-items:center; min-height:24px; padding:0 var(--s2);
  border-radius:var(--r-pill); background:var(--surface-2); color:var(--mut);
  font-size:var(--fs-12); font-weight:600; white-space:nowrap;
}
.tr-root.tr-stuck .tr-stuckbadge{ display:inline-flex; }
.tr-kicker{
  font-size:var(--fs-12); font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--dim); font-variant-numeric:tabular-nums;
}
.tr-title{
  margin:2px 0 0; font-size:var(--fs-20); line-height:1.2; font-weight:700;
  letter-spacing:-.02em; color:var(--txt); overflow-wrap:anywhere;
}
.tr-meta{
  margin-top:2px; font-size:var(--fs-13); color:var(--mut);
  font-variant-numeric:tabular-nums;
}
.tr-ledger{ display:flex; flex-wrap:wrap; gap:6px; margin-top:var(--s2); }
.tr-led{
  display:inline-flex; align-items:center; gap:5px; min-height:22px; padding:0 var(--s2);
  border-radius:var(--r-pill); background:var(--surface-2); color:var(--mut);
  font-size:var(--fs-12); font-weight:600; white-space:nowrap;
}
.tr-led.ok{ background:color-mix(in srgb,var(--ok) 12%,var(--surface)); color:var(--ok-ink); }
.tr-led.acc{ background:var(--acc-weak); color:var(--acc-ink); }
.tr-led.gap{ background:transparent; border:1px dashed var(--line); color:var(--mut); }
.tr-led.hol{ background:transparent; border:1px solid var(--line); color:var(--mut); }
.tr-honest{
  display:flex; align-items:flex-start; gap:7px; margin-top:var(--s3);
  font-size:var(--fs-13); line-height:1.35; color:var(--mut);
}
.tr-honest.warn{ color:var(--warn-ink); }
.tr-honest.ok{ color:var(--ok-ink); }
.tr-hdot{
  flex:none; width:7px; height:7px; margin-top:5px; border-radius:50%;
  background:currentColor; opacity:.75;
}
.tr-honest.ok .tr-hdot{ background:var(--ok); opacity:1; }
.tr-honest.warn .tr-hdot{ background:var(--warn); opacity:1; }

/* segmented control: 44px hit area, 32px visual pill */
.tr-seg{
  display:flex; gap:var(--s1); margin-top:var(--s3); padding:0;
  background:transparent;
}
.tr-segbtn{
  flex:1; min-height:44px; padding:0; background:transparent; border:0;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  -webkit-appearance:none; appearance:none;
}
.tr-segv{
  display:inline-flex; align-items:center; justify-content:center; width:100%;
  min-height:32px; padding:0 var(--s3); border-radius:var(--r-sm);
  background:var(--surface-2); border:1px solid transparent;
  color:var(--mut); font-size:var(--fs-13); font-weight:600;
  transition:background var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out),
    border-color var(--dur-1) var(--ease-out);
}
.tr-segbtn[aria-pressed="true"] .tr-segv{
  background:var(--surface); color:var(--txt); border-color:var(--acc);
  box-shadow:var(--e1);
}
.tr-segbtn:active .tr-segv{ transform:scale(.98); }

/* --------------------------------------------------------------- 2. SPINE */
.tr-spinewrap{ position:relative; }
.tr-spine{
  list-style:none; margin:0; position:relative;
  padding:0;
}

.tr-station,.tr-hop{ position:relative; padding-left:var(--tr-card-x); }
/* the rhythm is padding, not margin: the rail is absolutely positioned to the
 * row box, so a margin would leave an 8px hole between every pair of rows */
.tr-station{ margin:0; padding-bottom:var(--s2); }

/* the rail: one 2px wire per row so gaps can be drawn as gaps */
.tr-rail{
  position:absolute; left:var(--tr-rail-x); width:2px; top:0; bottom:0;
  background:var(--hair); border-radius:1px;
}
.tr-rail.ok,.tr-rail.acc{
  background:var(--acc);
  box-shadow:0 0 8px color-mix(in srgb,var(--acc) 35%,transparent);
}
.tr-rail.mut{ background:var(--line); }
.tr-rail.gap{
  background:repeating-linear-gradient(180deg,var(--line) 0 3px,transparent 3px 9px);
  box-shadow:none;
}
.tr-spine>.tr-station:first-child>.tr-rail{ top:20px; }
.tr-spine>*:last-child>.tr-rail{ bottom:auto; height:20px; }

/* nodes sit on the rail */
.tr-node{
  position:absolute; left:2px; top:20px; width:22px; height:22px; border-radius:50%;
  background:var(--surface); border:2px solid var(--line); z-index:1;
  display:flex; align-items:center; justify-content:center;
}
.tr-node::after{ content:""; width:8px; height:8px; border-radius:50%; background:var(--mut); }
.tr-node.ok{ border-color:var(--ok); }
.tr-node.ok::after{ background:var(--ok); }
.tr-node.acc{ border-color:var(--acc); }
.tr-node.acc::after{ background:var(--acc); }
.tr-node.mut{ width:16px; height:16px; left:5px; top:23px; border-width:1.5px; border-color:var(--line); }
.tr-node.mut::after{ width:6px; height:6px; background:var(--mut); }
.tr-node.gap{
  width:14px; height:14px; left:6px; top:24px; border:1.5px dashed var(--line); background:transparent;
}
.tr-node.gap::after{ display:none; }
.tr-sel>.tr-node{ box-shadow:0 0 0 4px color-mix(in srgb,var(--acc) 18%,transparent); }

/* ----------------------------------------------------------- 3. STATION CARD */
.tr-card{
  position:relative; background:var(--surface); border:1px solid var(--hair);
  border-radius:var(--r-md); box-shadow:var(--e1);
  padding:var(--s3) 14px var(--s3) 14px; min-height:64px;
  transition:box-shadow var(--dur-1) var(--ease-out),border-color var(--dur-1) var(--ease-out),
    transform var(--dur-1) var(--spring);
}
.tr-card:active{ transform:scale(.992); }
.tr-card.pass{ background:var(--surface); border-style:dashed; }
.tr-card::before{
  content:""; position:absolute; left:0; top:14px; bottom:14px; width:3px;
  border-radius:0 2px 2px 0; background:transparent;
  transition:background var(--dur-1) var(--ease-out);
}
.tr-sel>.tr-card{
  border-color:var(--acc);
  box-shadow:inset 0 0 0 1.5px var(--acc),0 0 0 4px color-mix(in srgb,var(--acc) 10%,transparent);
  background:color-mix(in srgb,var(--acc) 5%,var(--surface));
}
.tr-sel>.tr-card::before{ background:var(--acc); }
.tr-cardlink{ position:absolute; inset:0; z-index:0; border-radius:var(--r-md); }
.tr-cardlink:focus-visible{ outline-offset:0; }

.tr-ctop{ display:flex; align-items:center; gap:var(--s2); min-height:24px; }
.tr-idx{
  font-size:var(--fs-12); font-weight:600; color:var(--dim);
  font-variant-numeric:tabular-nums; letter-spacing:.02em;
}
.tr-sheet{
  font-family:var(--f-mono); font-size:var(--fs-12); font-weight:600;
  color:var(--acc-ink); font-variant-numeric:tabular-nums;
}
.tr-name{
  margin:6px 0 0; font-size:var(--fs-17); line-height:1.24; font-weight:600;
  letter-spacing:-.01em; color:var(--txt); overflow-wrap:anywhere;
}
.tr-file{ margin-top:2px; font-size:var(--fs-12); color:var(--dim); }

.tr-tags{ display:flex; flex-wrap:wrap; gap:6px var(--s3); margin-top:var(--s2); }
.tr-tagrow{ display:inline-flex; align-items:baseline; gap:6px; }
.tr-tag{
  font-family:var(--f-mono); font-size:var(--fs-13); font-weight:600;
  letter-spacing:.02em; color:var(--txt); font-variant-numeric:tabular-nums;
}
.tr-rt{
  font-size:var(--fs-12); font-weight:600; color:var(--acc-ink);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.tr-rt.tbc{ color:var(--mut); display:inline-flex; align-items:center; gap:5px; }
.tr-rt.tbc::before{
  content:""; width:7px; height:7px; border-radius:50%;
  border:1.5px solid var(--line); background:transparent;
}
.tr-tagwrap{ margin-top:var(--s2); }

.tr-fn{
  margin:var(--s2) 0 0; font-size:var(--fs-13); line-height:1.42; color:var(--mut);
  overflow-wrap:anywhere;
}
.tr-more{
  position:relative; z-index:1; margin-top:var(--s1); min-height:44px; padding:0 var(--s2) 0 0;
  background:transparent; border:0; color:var(--acc-ink);
  font-size:var(--fs-13); font-weight:600; text-align:left; cursor:pointer;
}
.tr-fnmore{ position:relative; z-index:1; }

/* the column compass (wow micro-detail): 8 ticks, referenced column lit */
.tr-compass{ display:flex; align-items:flex-end; gap:3px; margin-top:var(--s3); height:12px; }
.tr-tick{
  width:5px; height:6px; border-radius:1px; background:var(--line);
  transition:height var(--dur-2) var(--spring),background var(--dur-2) var(--ease-out);
}
.tr-tick.on{ height:12px; background:var(--acc); }
.tr-collab{
  margin-left:var(--s2); font-size:var(--fs-12); font-weight:600; color:var(--mut);
  font-variant-numeric:tabular-nums; line-height:1;
}

/* ------------------------------------------------------------- 4. SEGMENTS */
.tr-hop{ min-height:44px; display:flex; flex-wrap:wrap; align-items:center; margin:0; padding-bottom:var(--s2); }
.tr-hopbtn{
  flex:1 1 100%; display:flex; align-items:center; flex-wrap:wrap; gap:6px var(--s2);
  width:100%; min-height:44px; padding:0; background:transparent; border:0;
  text-align:left; cursor:pointer; -webkit-appearance:none; appearance:none;
}
.tr-hopbtn:active{ opacity:.72; }
.tr-via{ font-size:var(--fs-12); color:var(--dim); }
.tr-inf{
  display:inline-flex; align-items:center; gap:5px;
  font-size:var(--fs-12); font-weight:600; color:var(--mut);
}
.tr-inf::before{
  content:""; width:7px; height:7px; border-radius:50%; border:1.5px solid var(--line);
}

/* chips: 24px visual, never a target (the 44px button is the target) */
.tr-chip{
  display:inline-flex; align-items:center; gap:5px; min-height:24px; padding:0 var(--s2);
  border-radius:var(--r-pill); background:var(--surface-2); color:var(--mut);
  font-size:var(--fs-12); font-weight:600; white-space:nowrap;
}
.tr-chip.ok{ background:color-mix(in srgb,var(--ok) 12%,var(--surface)); color:var(--ok-ink); }
.tr-chip.acc{ background:var(--acc-weak); color:var(--acc-ink); }
.tr-chip.hol{ background:transparent; border:1px solid var(--line); }
.tr-chip.gap{ background:transparent; border:1px dashed var(--line); color:var(--mut); }
.tr-dot{ width:6px; height:6px; border-radius:50%; background:currentColor; flex:none; }
.tr-dot.ok{ background:var(--ok); }
.tr-dot.acc{ background:var(--acc); }
.tr-dot.mut{ background:var(--mut); }
.tr-dot.hol{ background:transparent; border:1px solid currentColor; }
.tr-dot.gap{ background:transparent; border:1px dashed currentColor; }
.tr-dot.dim{ background:var(--dim); }

/* why-this-hop disclosure */
.tr-why{
  flex-basis:100%; width:100%; margin:0 0 var(--s2); padding:var(--s3);
  background:var(--surface); border:1px solid var(--hair); border-radius:var(--r-sm);
  box-shadow:var(--e1);
}
.tr-whyrow{ display:flex; gap:var(--s3); padding:3px 0; font-size:var(--fs-13); }
.tr-wk{ flex:none; width:76px; color:var(--dim); font-weight:600; }
.tr-wv{ color:var(--txt); overflow-wrap:anywhere; }
.tr-whynote{ margin:var(--s2) 0 0; font-size:var(--fs-13); line-height:1.42; color:var(--mut); }

/* the honest snap: an amber stub that overshoots then retracts at a gap */
.tr-snap{
  position:absolute; left:var(--tr-rail-x); top:0; width:2px; height:26px;
  background:var(--acc); border-radius:1px; opacity:0; pointer-events:none;
}
.tr-snap.tr-snapping{ animation:tr-snap 480ms var(--ease) both; animation-delay:calc(var(--tr-delay,0ms) + 120ms); }
@keyframes tr-snap{
  0%{ transform:scaleY(0); opacity:1; }
  62%{ transform:scaleY(1.16); opacity:1; }
  78%{ transform:scaleY(1); opacity:1; }
  100%{ transform:scaleY(1); opacity:0; }
}

/* the travelling pulse (wow detail 1) */
.tr-pulse{
  position:absolute; left:calc(var(--tr-rail-x) - 1px); top:0; width:4px; height:56px;
  margin-top:-28px; border-radius:2px; pointer-events:none; opacity:0; z-index:2;
  background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--acc) 78%,transparent),transparent);
  filter:blur(.3px);
  will-change:transform;
}
.tr-pulse.on{ opacity:1; }
.tr-pulse.idle{
  height:auto; bottom:0; margin-top:0; width:3px; left:calc(var(--tr-rail-x) - 1px); filter:none;
  background:linear-gradient(180deg,transparent,var(--amber-200),transparent)
    0 0/100% 64px no-repeat;
  animation:tr-idle 2.4s var(--ease) 600ms infinite;
  opacity:.95;
}
@keyframes tr-idle{
  0%{ background-position:0 -56px; }
  100%{ background-position:0 100%; }
}

/* scrub rail (the 44px left gutter) */
.tr-scrub{
  /* 36px = the rail gutter only; a 44px zone stole the first 8px of every card */
  position:absolute; left:0; top:0; bottom:0; width:36px; z-index:3;
  touch-action:pan-y; cursor:ns-resize;
}
.tr-scrub:focus-visible{ outline:2px solid var(--acc); outline-offset:-2px; border-radius:var(--r-xs); }
.tr-thumb{
  position:absolute; left:4px; top:0; width:26px; height:3px; border-radius:2px;
  background:var(--acc); opacity:0; transform:translate3d(0,0,0);
  box-shadow:0 0 6px color-mix(in srgb,var(--acc) 45%,transparent);
  transition:opacity var(--dur-2) var(--ease-out);
}
.tr-thumb.on{ opacity:1; }
.tr-scrub:focus-visible .tr-thumb{ opacity:1; }

/* compact station rows (Stations mode) */
.tr-compact{ min-height:64px; display:flex; align-items:center; }
.tr-compact .tr-node{ top:50%; margin-top:-11px; }
.tr-compact .tr-node.mut{ margin-top:-8px; }
.tr-crow{
  display:flex; align-items:center; gap:var(--s2); width:100%; min-height:64px;
  padding:var(--s2) var(--s3); background:var(--surface); border:1px solid var(--hair);
  border-radius:var(--r-md); box-shadow:var(--e1); text-decoration:none; color:var(--txt);
}
.tr-crow:active{ background:var(--surface-2); }
.tr-cidx{
  font-size:var(--fs-12); font-weight:600; color:var(--mut);
  font-variant-numeric:tabular-nums;
}
.tr-cmain{ flex:1; min-width:0; display:flex; flex-direction:column; }
.tr-cname{ font-size:var(--fs-15); font-weight:600; overflow-wrap:anywhere; }
.tr-csheet{ font-family:var(--f-mono); font-size:var(--fs-12); color:var(--acc-ink); }
.tr-cchev{ flex:none; color:var(--dim); font-size:var(--fs-17); line-height:1; }

/* ----------------------------------------------------------- 5. ACTION BAR */
/* The app's chat FAB is fixed at the same bottom-right slot as the Trace
 * action bar; on a Trace route it is not an action for this screen. */
body.tr-route #chatfab{ display:none !important; }
.tr-actionbar{
  position:fixed; left:0; right:0; z-index:20;
  bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  display:flex; gap:var(--s2); align-items:center;
  padding:var(--s2) var(--tr-bleed,16px);
  background:var(--surface); border-top:1px solid var(--hair);
  box-shadow:0 -2px 12px rgba(0,0,0,.05);
}
@media (prefers-reduced-transparency:no-preference){
  html:not(.noglask) body:not(.contrast) .tr-actionbar{
    background:var(--glass-bg);
    -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
    backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  }
}
@media (prefers-reduced-transparency:reduce){
  .tr-actionbar{ background:var(--surface); -webkit-backdrop-filter:none; backdrop-filter:none; }
}
html.noglask .tr-actionbar{ background:var(--surface); -webkit-backdrop-filter:none; backdrop-filter:none; }
body.contrast .tr-actionbar{ background:#000; color:#fff; border-color:#fff; }
.tr-abtn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
  flex:1; min-height:48px; padding:0 var(--s4); border-radius:var(--r-sm);
  background:var(--surface-2); border:1px solid var(--hair); color:var(--txt);
  font-size:var(--fs-17); font-weight:600; text-decoration:none; cursor:pointer;
  -webkit-appearance:none; appearance:none;
  transition:transform var(--dur-1) var(--spring),background var(--dur-1) var(--ease-out);
}
.tr-abtn:active{ transform:scale(.97); }
.tr-abtn-play{ flex:0 0 40%; }
.tr-abtn-primary{ background:var(--acc); color:var(--acc-t); border-color:transparent; font-weight:700; }
.tr-abtn-ghost{ background:var(--surface-2); color:var(--txt); }
.tr-playico{ font-size:13px; line-height:1; }
body.contrast .tr-abtn{ background:#000; color:#fff; border-color:#fff; }
body.contrast .tr-abtn-primary{ background:var(--acc); color:var(--acc-t); }

/* --------------------------------------------------------------- 6. BOARD */
.tr-boardbody{ padding-top:var(--s1); }
.tr-eqlist{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--s2); }
.tr-eqcard{
  display:flex; align-items:center; gap:var(--s3); min-height:88px; padding:var(--s3) var(--s4);
  background:var(--surface); border:1px solid var(--hair); border-radius:var(--r-md);
  box-shadow:var(--e1); text-decoration:none; color:var(--txt);
  transition:transform var(--dur-1) var(--spring),box-shadow var(--dur-2) var(--ease-out);
}
.tr-eqcard:active{ transform:scale(.985); }
.tr-eqmain{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.tr-eqname{ font-size:var(--fs-17); font-weight:600; letter-spacing:-.01em; }
.tr-eqmeta{ font-size:var(--fs-13); color:var(--mut); font-variant-numeric:tabular-nums; }
.tr-eqhon{ font-size:var(--fs-12); font-weight:600; color:var(--acc-ink); }
.tr-mini{ position:relative; flex:none; width:20px; height:52px; }
.tr-minirail{ position:absolute; left:9px; top:6px; bottom:6px; width:2px; background:var(--acc); border-radius:1px; opacity:.5; }
.tr-minidot{
  position:absolute; left:5px; width:10px; height:10px; border-radius:50%;
  background:var(--surface); border:2px solid var(--line);
}
.tr-minidot.on{ border-color:var(--acc); background:var(--acc); }
.tr-minidot:nth-child(2){ top:4px; }
.tr-minidot:nth-child(3){ top:18px; }
.tr-minidot:nth-child(4){ top:32px; }
.tr-minidot:nth-child(5){ top:46px; }

.tr-search{ margin:0 0 var(--s3); }
.tr-search input{
  width:100%; min-height:48px; padding:0 var(--s4); border-radius:var(--r-sm);
  background:var(--surface); border:1px solid var(--hair); color:var(--txt);
  font-size:var(--fs-17); box-shadow:var(--e1); -webkit-appearance:none; appearance:none;
}
.tr-search input:focus{ border-color:var(--acc); box-shadow:var(--e2); outline:none; }
.tr-devlist{ display:flex; flex-direction:column; }
.tr-devrow{
  display:flex; align-items:center; gap:var(--s3); min-height:56px; padding:0 var(--s3);
  background:var(--surface); border-bottom:1px solid var(--hair);
  text-decoration:none; color:var(--txt);
}
.tr-devrow:first-child{ border-top-left-radius:var(--r-md); border-top-right-radius:var(--r-md); }
.tr-devrow:last-child{ border-bottom:0; border-bottom-left-radius:var(--r-md); border-bottom-right-radius:var(--r-md); }
.tr-devrow:active{ background:var(--surface-2); }
.tr-devtag{ font-family:var(--f-mono); font-size:var(--fs-13); font-weight:600; color:var(--txt); }
.tr-devsub{ flex:1; text-align:right; font-size:var(--fs-12); color:var(--dim); font-variant-numeric:tabular-nums; }

/* ------------------------------------------------------- 7. DEVICE / SHEET */
.tr-candhead{ margin:var(--s4) 0 var(--s2); }
.tr-candtitle{ font-size:var(--fs-13); font-weight:600; letter-spacing:.02em; color:var(--txt); }
.tr-candnote{ margin:var(--s1) 0 0; font-size:var(--fs-13); line-height:1.4; color:var(--mut); }
.tr-seedlist,.tr-nblist{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--s2); }
.tr-seed{
  display:flex; flex-direction:column; gap:2px; width:100%; min-height:76px;
  padding:var(--s3) var(--s4); text-align:left; cursor:pointer;
  background:var(--surface); border:1px solid var(--hair); border-radius:var(--r-md);
  box-shadow:var(--e1); color:var(--txt); -webkit-appearance:none; appearance:none;
}
.tr-seed.on{ border-color:var(--acc); box-shadow:0 0 0 1.5px var(--acc),var(--e1);
  background:color-mix(in srgb,var(--acc) 5%,var(--surface)); }
.tr-seedtop{ display:flex; align-items:center; gap:var(--s2); }
.tr-seedname{ margin-top:2px; font-size:var(--fs-15); font-weight:600; overflow-wrap:anywhere; }
.tr-seedwhy{ margin-top:2px; font-size:var(--fs-12); color:var(--mut); }
.tr-nbrow{ margin:0; }
.tr-nbgroup{ margin-top:var(--s3); }
.tr-nbhead{
  margin:0 0 var(--s2); font-size:var(--fs-12); font-weight:600; letter-spacing:.04em;
  text-transform:uppercase; color:var(--mut);
}
.tr-nbgroup .tr-nblist{ gap:var(--s2); }
.tr-nblink,.tr-nbdead{
  display:flex; flex-direction:column; gap:2px; min-height:64px; padding:var(--s3) var(--s4);
  background:var(--surface); border:1px solid var(--hair); border-radius:var(--r-md);
  box-shadow:var(--e1); text-decoration:none; color:var(--txt);
}
.tr-nblink:active{ background:var(--surface-2); }
.tr-nbtop{ display:flex; align-items:center; gap:var(--s2); flex-wrap:wrap; }
.tr-moreline{ margin-top:var(--s3); font-size:var(--fs-13); color:var(--mut); }
/* pass-through sheets: real sheets on the wire, not procedure stations */
.tr-pass{ position:relative; padding-left:var(--tr-card-x); min-height:44px; display:flex; align-items:center; }
.tr-passrow{
  display:flex; align-items:center; gap:var(--s2); width:100%; min-height:44px;
  padding:0 var(--s3); border-radius:var(--r-sm); text-decoration:none; color:var(--txt);
  background:transparent;
}
a.tr-passrow:active{ background:var(--surface-2); }
.tr-pass .tr-sheet{ font-size:var(--fs-12); }
.tr-passt{ flex:1; min-width:0; font-size:var(--fs-13); color:var(--mut);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tr-passx{ font-size:var(--fs-12); font-weight:600; color:var(--dim); }
.tr-pass.tr-back .tr-passrow{ background:transparent; }
.tr-pass.tr-back .tr-passt{ color:var(--dim); }

.tr-empty{
  display:flex; flex-direction:column; align-items:center; gap:var(--s3);
  padding:var(--s7) var(--s5); text-align:center; font-size:var(--fs-15); color:var(--mut);
}
.tr-empty b{ font-size:var(--fs-20); font-weight:600; color:var(--txt); }
.tr-empty .btn{ max-width:280px; }

/* ----------------------------------------------------------------- 8. STATES */
.tr-off{
  display:inline-flex; align-items:center; gap:5px; margin:var(--s2) 0 0;
  font-size:var(--fs-12); font-weight:600; color:var(--mut);
}
.tr-off::before{
  content:""; width:7px; height:7px; border-radius:50%; background:var(--warn);
}
.tr-live{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* loading: 3 ghost stations + rail drawn 30% */
.tr-skelrow .tr-card{ display:flex; flex-direction:column; gap:var(--s2); }
.tr-skl{ display:block; }
.tr-skl-a{ height:12px; width:42%; }
.tr-skl-b{ height:18px; width:78%; }
.tr-skl-c{ height:12px; width:58%; }
.tr-skl-t{ height:24px; width:64%; border-radius:var(--r-xs); }
.tr-skl-m{ height:14px; width:46%; border-radius:var(--r-xs); margin-top:var(--s2); }
.tr-skl-chip{ background:transparent; }
.tr-spine.tr-drawing .tr-rail{ transform:scaleY(.3); transform-origin:top; }

/* --------------------------------------------------------- 9. TAG-OUT MODE */
.tr-tagbar{
  display:flex; align-items:center; gap:var(--s3); margin-top:var(--s3);
  padding:var(--s2) var(--s3); border-radius:var(--r-sm);
  background:color-mix(in srgb,var(--ok) 8%,var(--surface)); border:1px solid var(--hair);
}
.tr-ring{
  --tr-pct:0%;
  position:relative; flex:none; width:44px; height:44px; border-radius:50%;
  background:conic-gradient(var(--ok) var(--tr-pct),var(--surface-3) 0);
  display:flex; align-items:center; justify-content:center;
  font-size:var(--fs-12); font-weight:700; color:var(--txt);
  font-variant-numeric:tabular-nums;
}
.tr-ring::before{
  content:""; position:absolute; inset:4px; border-radius:50%; background:var(--surface);
}
.tr-ring>span{ position:relative; z-index:1; }
.tr-ring.done{ box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 22%,transparent); }
.tr-tagt{ font-size:var(--fs-13); font-weight:600; color:var(--ok-ink); }
.tr-tagwarn{ flex:1; font-size:var(--fs-12); line-height:1.35; color:var(--mut); }
.tr-tagging .tr-card{ border-color:color-mix(in srgb,var(--ok) 35%,var(--hair)); }
.tr-tagging .tr-cardlink{ pointer-events:none; }
.tr-check{
  position:absolute; top:var(--s2); right:var(--s2); width:22px; height:22px;
  border-radius:50%; background:var(--surface-3); border:1.5px solid var(--line);
  display:flex; align-items:center; justify-content:center;
}
.tr-check::after{
  content:""; width:9px; height:5px; margin-top:-2px;
  border-left:2px solid transparent; border-bottom:2px solid transparent;
  transform:rotate(-45deg);
}
.tr-checked>.tr-card{
  transform:translateY(-2px);
  border-color:var(--ok);
  box-shadow:0 0 0 1.5px var(--ok),var(--e2);
  background:color-mix(in srgb,var(--ok) 5%,var(--surface));
}
.tr-checked>.tr-card .tr-check{ background:var(--ok); border-color:var(--ok); }
.tr-checked>.tr-card .tr-check::after{ border-color:var(--acc-t); }
.tr-checked>.tr-rail.ok{ background:var(--ok); box-shadow:0 0 8px color-mix(in srgb,var(--ok) 35%,transparent); }
.tr-hop.tr-checked>.tr-rail{ background:var(--ok); box-shadow:0 0 8px color-mix(in srgb,var(--ok) 35%,transparent); }
.tr-seal{ margin:var(--s5) 0 0; padding:var(--s4); border-color:color-mix(in srgb,var(--ok) 40%,var(--hair)); }
.tr-sealt{ font-size:var(--fs-20); font-weight:700; letter-spacing:.08em; color:var(--ok-ink); }
.tr-sealsub{ margin-top:var(--s1); font-size:var(--fs-13); color:var(--mut); font-variant-numeric:tabular-nums; }
.tr-cites{ list-style:none; margin:var(--s3) 0 0; padding:0; display:flex; flex-direction:column; gap:var(--s2); }
.tr-cites li{ display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--s2); font-size:var(--fs-13); }
.tr-dead{
  margin:var(--s3) 0 0; padding-top:var(--s3); border-top:1px solid var(--hair);
  font-size:var(--fs-13); line-height:1.45; color:var(--txt); font-weight:600;
}

/* ------------------------------------------------- 10. HERO + RESULT CHIP */
.tr-hero{
  display:flex; align-items:center; gap:var(--s3); margin:var(--s3) 0 var(--s1);
  padding:var(--s3) var(--s4); min-height:76px;
  background:var(--surface); border:1px solid var(--hair); border-radius:var(--r-md);
  box-shadow:var(--e1); text-decoration:none; color:var(--txt);
  transition:transform var(--dur-1) var(--spring);
}
.tr-hero:active{ transform:scale(.985); }
.tr-heroleft{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.tr-herokick{ font-size:var(--fs-12); font-weight:600; letter-spacing:.06em; color:var(--acc-ink); }
.tr-herot{ font-size:var(--fs-17); font-weight:600; letter-spacing:-.01em; }
.tr-herosub{ font-size:var(--fs-12); color:var(--mut); }
.tr-heromini{ position:relative; flex:none; width:16px; height:56px; }
.tr-hrail{ position:absolute; left:7px; top:4px; bottom:4px; width:2px; background:var(--acc); border-radius:1px; opacity:.5; }
.tr-herodot{ position:absolute; left:4px; width:8px; height:8px; border-radius:50%; background:var(--surface); border:2px solid var(--line); }
.tr-herodot.on{ background:var(--acc); border-color:var(--acc); }
.tr-herodot:nth-child(2){ top:2px; }
.tr-herodot:nth-child(3){ top:15px; }
.tr-herodot:nth-child(4){ top:28px; }
.tr-herodot:nth-child(5){ top:41px; }
.tr-herodot:nth-child(6){ top:54px; }

/* Search-result Trace chip: v6 chip geometry (surface-2 + hairline, 44px),
 * amber only as the pressed/selected state — it sits inside an .result row
 * beside real chips, so it must not read as a second primary action. */
.tr-reschip{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; min-width:64px; margin-top:var(--s2); padding:0 var(--s3);
  background:var(--surface-2); border:1px solid var(--hair); border-radius:var(--r-sm);
  color:var(--txt); font-size:var(--fs-15); font-weight:600; line-height:1.2;
  cursor:pointer; -webkit-appearance:none; appearance:none;
  transition:transform var(--dur-1) var(--spring),background var(--dur-1) var(--ease-out),
    border-color var(--dur-1) var(--ease-out);
}
.tr-reschip:active,.tr-reschip.on,.tr-reschip[aria-pressed="true"]{
  background:var(--acc-weak); border-color:var(--acc); color:var(--acc-ink);
  transform:scale(.96);
}

/* -------------------------------------------------------------- 11. MOTION */
@media (prefers-reduced-motion:no-preference){
  .tr-root:not(.tr-nomotion) .tr-rail{
    transform:scaleY(0); transform-origin:top;
    transition:transform var(--dur-4) var(--ease);
    transition-delay:var(--tr-delay,0ms);
  }
  .tr-root.tr-drawn:not(.tr-nomotion) .tr-rail{ transform:none; }
  .tr-root:not(.tr-nomotion) .tr-spine.tr-drawing .tr-rail{ transform:scaleY(.3); }
  .tr-root:not(.tr-nomotion) .tr-in>.tr-node{
    opacity:0; transform:scale(.6);
    transition:opacity var(--dur-3) var(--ease-out),transform var(--dur-3) var(--spring);
    transition-delay:var(--tr-delay,0ms);
  }
  .tr-root.tr-drawn:not(.tr-nomotion) .tr-in>.tr-node{ opacity:1; transform:none; }
}
.tr-nomotion .tr-rail,.tr-nomotion .tr-node{ transform:none; opacity:1; }
.tr-node.tr-pop{ animation:tr-pop 200ms var(--spring); }
@keyframes tr-pop{ 0%{ transform:scale(1); } 45%{ transform:scale(1.06); } 100%{ transform:scale(1); } }
/* the arriving pulse lights the device tag left-to-right (background-clip:text) */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .tr-tags.lit .tr-tag{
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent;
    background-image:linear-gradient(90deg,var(--acc) 0 40%,currentColor 40% 100%);
    background-size:260% 100%; background-repeat:no-repeat;
    animation:tr-tsweep 160ms var(--ease-out) both;
  }
  @keyframes tr-tsweep{ from{ background-position:100% 0; } to{ background-position:0 0; } }
}
.tr-tick.on{ animation:tr-ignite 240ms var(--spring); }
@keyframes tr-ignite{ 0%{ height:5px; } 100%{ height:12px; } }

@media (prefers-reduced-motion:reduce){
  .tr-pulse,.tr-snap{ display:none; }
  .tr-thumb{ transition:none; }
}
html.noglask .tr-pulse{ display:none; }
body.contrast .tr-pulse{ display:none; }
/* 12px labels: --dim is 4.11:1 on the dark selected-card tint (AA needs 4.5) */
html[data-theme="dark"] .tr-idx,
html[data-theme="dark"] .tr-collab,
html[data-theme="dark"] .tr-file,
html[data-theme="dark"] .tr-passx,
html[data-theme="dark"] .tr-via{ color:var(--mut); }
@media (prefers-contrast:more){
  .tr-card,.tr-eqcard,.tr-seed,.tr-nblink,.tr-nbdead,.tr-crow{ border-width:1.5px; }
  .tr-chip,.tr-led{ border-width:1.5px; }
}

/* ------------------------------------------------- 12. RESPONSIVE / LAYOUT */
/* Narrow phones: the why-panel key column must not squeeze the value. */
@media (max-width:359px){
  .tr-wk{ width:62px; }
  .tr-abtn{ font-size:var(--fs-15); padding:0 var(--s2); }
  .tr-tag{ font-size:var(--fs-12); }
}
/* Portrait tablet / desktop: a readable measure instead of a stretched phone. */
@media (min-width:700px){
  .tr-spinewrap,.tr-boardbody,.tr-note{ max-width:680px; }
  .tr-title{ font-size:var(--fs-24); }
}
/* Landscape / short viewport: the header becomes a fixed left rail and the
 * spine gets the remaining width — a considered layout, not a squeezed one. */
@media (min-width:700px) and (max-height:560px){
  .tr-root{
    display:grid; grid-template-columns:minmax(230px,300px) 1fr;
    column-gap:var(--s5); align-items:start;
  }
  .tr-head{
    grid-column:1; grid-row:1; position:static; margin:0; padding-top:0;
  }
  .tr-head::before,.tr-head::after{ display:none; }
  .tr-root > *:not(.tr-head):not(.tr-actionbar):not(.tr-live){ grid-column:2; }
  .tr-root > .tr-spinewrap{ grid-row:1; }
  .tr-root > .tr-boardbody{ grid-row:1; }
  .tr-root > .tr-note{ grid-column:2; }
  .tr-spinewrap,.tr-boardbody,.tr-note{ max-width:640px; }
  .tr-title{ font-size:var(--fs-20); }
  .tr-meta{ font-size:var(--fs-12); }
  .tr-honest{ font-size:var(--fs-12); }
  .tr-ledger{ margin-top:var(--s1); }
  .tr-seg{ margin-top:var(--s2); }
  .tr-spine{ padding-bottom:var(--s4); }
}
/* Landscape on phones: styles.css used to reserve 340px on the right for the
 * chat dock on EVERY route, so Trace claimed that space back with a negative
 * margin. The foundation now scopes the reserve to body.inchat (app-v6.css), so
 * this compensation is obsolete — and it overflowed every Trace route by 325px
 * at 844x390 (independent critic P0). Removed 2026-09-09. */

/* Very short screens (320x568): the head must never hold the viewport — it
 * scrolls away entirely and the spine owns the screen. */
@media (max-height:640px){
  .tr-head{ position:static; }
  .tr-head::before,.tr-head::after{ display:none; }
}