/* Q725 — the Copilot SPINE on candidate tool pages, matched to handoff/screens/02-wayfinding-desktop-rail:
   pink rail · white pill brand · YOUR JOURNEY nodes · white icon plates on the tool rows · white active plate. Same
   --rail-* tokens as the Copilot home so the tools are one app, never the marketing site. */
.tool-rail{position:fixed;top:0;left:0;bottom:0;width:var(--rail-w,264px);background:var(--rail-bg,#EC4D9C);color:var(--rail-text,#fff);display:flex;flex-direction:column;padding:16px 14px;z-index:60;overflow-y:auto}
.tool-rail.tr-under-banner,html.qa-imp-on .tool-rail{top:46px}

.tr-brand{display:flex;align-items:center;gap:8px;text-decoration:none;background:var(--rail-plate,#fff);color:var(--ink,#121016);font-family:var(--font-display,inherit);font-weight:800;font-size:15px;margin:0 0 6px;padding:10px 14px;border-radius:999px;box-shadow:var(--shadow-pop-sm,0 2px 8px rgba(0,0,0,.12))}
.tr-brand .spark{flex:0 0 auto}
.tr-brand__t{line-height:1.1}

.tr-eyebrow{margin:16px 6px 8px;font-size:var(--fs-eyebrow,12px);letter-spacing:.08em;text-transform:uppercase;color:var(--rail-text-dim,rgba(255,255,255,.72));font-weight:700}

.tr-journey{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.tr-jnode{display:flex;align-items:center;gap:12px;min-height:44px;padding:8px 10px;border-radius:var(--r,10px);text-decoration:none;color:var(--rail-text,#fff);font-weight:700;font-size:14px}
.tr-jnode:hover{background:rgba(255,255,255,.14)}
.tr-jdot{flex:0 0 auto;width:22px;height:22px;border-radius:50%;border:2px solid var(--rail-text-dim,rgba(255,255,255,.55))}

.tr-profile{display:flex;align-items:center;gap:12px;margin:10px 0 4px;padding:8px 10px;border-radius:var(--r,10px);text-decoration:none;color:var(--rail-text,#fff);font-weight:700;font-size:14px}
.tr-profile:hover{background:rgba(255,255,255,.14)}

.tr-group{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.tr-row{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:var(--r,10px);text-decoration:none;color:var(--rail-text,#fff);font-weight:700;font-size:14px}
.tr-row:hover{background:rgba(255,255,255,.14)}
.tr-row.is-on{background:var(--rail-plate,#fff);color:var(--ink,#121016);box-shadow:var(--shadow-pop-sm,0 2px 8px rgba(0,0,0,.12))}
.tr-ic{flex:0 0 auto;width:30px;height:30px;border-radius:8px;background:var(--rail-plate,#fff);display:inline-flex;align-items:center;justify-content:center}
.tr-ic svg{width:18px;height:18px;fill:none;stroke:var(--ink,#121016);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tr-row.is-on .tr-ic{background:var(--surface-2,#F4F1E8)}
.tr-label{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tr-brand:focus-visible,.tr-row:focus-visible,.tr-jnode:focus-visible,.tr-profile:focus-visible{outline:2px solid var(--rail-plate,#fff);outline-offset:2px}

/* Q720 — a TOOL PAGE IS A TRUE APP SHELL. When the spine mounts (has-tool-rail), the page sheds ALL marketing chrome:
   no masthead AND no footer, and the content fills the app pane beside the rail — never the centered/narrow marketing
   column. This is the ONE place the shell is enforced for every tool page; a comb guard (test-tool-shell) keeps it. */
html.has-tool-rail [data-site-header], html.has-tool-rail .masthead,
html.has-tool-rail [data-site-footer], html.has-tool-rail .lfoot { display:none !important; }
/* The content pane: left-aligned to the rail, a comfortable cap (--maxw-wide), app padding. Override EVERY tool
   page's narrow/centered container (.wrap · main.prose · .cv walk list · .vt voter tool) so none stays a webpage column. */
@media (min-width:761px){
  html.has-tool-rail body{padding-left:var(--rail-w,264px)}
  html.has-tool-rail body .wrap,
  html.has-tool-rail body main.prose,
  html.has-tool-rail body .cv,
  html.has-tool-rail body .vt{max-width:var(--maxw-app,1280px) !important;margin:0 !important;padding:28px 44px var(--space-11,64px)}
}
@media (max-width:760px){
  html.has-tool-rail body .wrap,
  html.has-tool-rail body main.prose,
  html.has-tool-rail body .cv,
  html.has-tool-rail body .vt{max-width:100% !important;margin:0 !important}
}

/* MOBILE spine: the flat prototype dock (rail hides on phones). Q810 — IDENTICAL grammar to learn/portal.css
   '.journey-dock'/'.dock-tab': Home · Journey · Tools · You, the rainbow spark IS Home, no raised center button.
   Tokens only (no raw hex): --surface bg, 1px --line top rule, --muted idle, --accent active, safe-area, 44px+ targets. */
.journey-dock{display:none}
.tr-back{display:none}
@media (max-width:760px){
  .tool-rail{display:none}
  html.has-tool-rail body{padding-left:0;padding-bottom:calc(74px + env(safe-area-inset-bottom))}
  /* GRAMMAR §dock — canon: --surface bg + 1px --line top rule (matches .journey-dock so the two dock paths are one) */
  .journey-dock{display:flex;align-items:stretch;position:fixed;left:0;right:0;bottom:0;z-index:60;gap:0;padding:6px 8px calc(8px + env(safe-area-inset-bottom));background:var(--surface);border-top:1px solid var(--line)}
  .journey-dock.tr-under-banner,html.qa-imp-on .journey-dock{}   /* dock stays anchored to the viewport bottom regardless of the impersonation banner */
  .dock-tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;text-decoration:none;color:var(--muted);font-size:12px;font-weight:600;min-height:52px;justify-content:center;border-radius:var(--r)}
  .dock-tab__l{white-space:nowrap}   /* the tab label never wraps to two lines */
  .dock-tab[aria-current="page"],.dock-tab.is-on{color:var(--accent)}   /* GRAMMAR §dock — active tab = --accent */
  .dock-tab__ic{width:24px;height:24px;display:inline-flex}
  .dock-tab__ic svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .dock-tab__spark{width:26px;height:26px;opacity:.45}   /* GRAMMAR §dock — Home spark is the inactive next-move affordance (~45%) */
  .dock-tab__spark.spark{font-size:26px}
  .dock-tab.is-on .dock-tab__spark{opacity:1}
  .dock-tab:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

  /* Q810 — the back-to-Tools affordance: a ‹ control that pops the stack back to the Tools grid (/learn/#tools). */
  .tr-back{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin:0 0 4px -6px;box-sizing:border-box;text-decoration:none;color:var(--ink);position:relative;z-index:7}
  .tr-back__chev{font-size:28px;line-height:1}
  .tr-back:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:var(--r)}
  /* Q813 — FIRST-RUN-REDLINE-v2 §3: the see-through preview. Frost the content; the ‹ chevron, dock, and unlock card stay sharp. */
  .is-frosted{position:relative}
  /* Q814 — the gentle empty-shell skeleton of the real tool IS the frosted content: it drives the pane height (in-flow)
     and the tool's own 403 markup is hidden, so a gated tool reads as the actual tool, blurred — never a blank pane. */
  .is-frosted > *:not(.tr-back):not(.tool-preview-skel):not(.tool-frost):not(.tool-unlock){display:none}
  .tool-preview-skel{position:relative;z-index:4;background:var(--paper);padding:16px 16px 96px;min-height:calc(100vh - 120px);overflow:hidden;display:flex;flex-direction:column;gap:12px}
  .tool-preview-skel .tps-h{margin:6px 0 2px;font-family:var(--font-display);font-weight:600;font-size:var(--fs-d3);line-height:var(--lh-d3);color:var(--ink)}
  .tool-preview-skel .tps-sub{margin:12px 0 0;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
  .tps-field{height:46px;border-radius:var(--r);background:var(--surface);border:1.5px solid var(--line)}
  .tps-field--search{height:42px}
  .tps-btn{height:48px;border-radius:var(--r);background:var(--line-strong,#C9C4B6)}
  .tps-map{height:190px;border-radius:var(--r-lg);background:var(--surface);border:1.5px solid var(--line)}
  .tps-card{height:180px;border-radius:var(--r-lg);background:var(--surface);border:1.5px solid var(--line)}
  .tps-chips{display:flex;gap:8px}
  .tps-chip{width:66px;height:28px;border-radius:999px;background:var(--surface);border:1.5px solid var(--line)}
  .tps-stats{display:flex;gap:10px}
  .tps-stat{flex:1;height:66px;border-radius:var(--r);background:var(--surface);border:1.5px solid var(--line)}
  .tps-row{display:flex;flex-direction:column;gap:7px;padding:13px 0;border-bottom:1px solid var(--line)}
  .tps-bar{height:12px;border-radius:6px;background:var(--line)}
  .tps-bar--nm{width:58%}
  .tps-bar--mt{width:36%;opacity:.7}
  .tool-frost{position:absolute;inset:0;z-index:5;background:rgba(244,246,248,.45);-webkit-backdrop-filter:blur(3.5px);backdrop-filter:blur(3.5px);pointer-events:none}
  .is-frosted > *:not(.tool-frost):not(.tool-unlock):not(.tr-back){pointer-events:none;user-select:none}
  .tool-unlock{position:absolute;z-index:6;left:16px;right:16px;top:56px;display:flex;flex-direction:column;gap:8px;background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-pop);padding:18px}
  .tool-unlock__lock{width:26px;height:26px;color:var(--muted)}
  .tool-unlock__lock svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2}
  .tool-unlock .eyebrow{margin:0;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--muted)}
  .tool-unlock__t{margin:2px 0 0;font-family:var(--font-display);font-weight:600;font-size:var(--fs-d3);line-height:var(--lh-d3);color:var(--ink)}
  .tool-unlock__r{margin:0 0 6px;font-size:14.5px;color:var(--muted);line-height:1.45}
  .tool-unlock__go{width:100%}
  .tool-unlock__back{background:none;border:0;color:var(--muted);font:inherit;font-size:15px;font-weight:600;min-height:44px;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
  .declare-steps{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:14px}
  .declare-steps li{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.4;color:var(--ink)}
  .declare-steps li b{flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:var(--accent-wash);color:var(--accent);display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:14px}
  .declare-scrape{margin:0 0 6px;padding:12px 14px;border:1.5px dashed var(--line-strong);border-radius:var(--r);font-size:13.5px;color:var(--muted);line-height:1.45}
  .declare-sheet .sheet__msg{margin:8px 0 0;font-size:13.5px;color:var(--muted)}
  .declare-ft{flex-direction:column;gap:10px}
  .btn-quiet.declare-later{background:none;border:0;color:var(--muted);font:inherit;font-size:15px;font-weight:600;cursor:pointer;min-height:44px}
}