/* RC22.3 Copilot right rail (shared/crail.js; ux-audit/copilot-rail-1016/SPEC.md). Loaded ONLY for an account the server
   stamps (<html data-crail="open|hidden">, app/copilot_rail.py): every rule below is scoped to that attribute or to the
   rail's own elements, which exist only then. Both shells (STUDIO_LAYOUT_V2 on or off). Tokens: shared/tokens.css.
   >= 1280 px: a docked column, #app gives up its width.  761-1279 px: a drawer from the right.  <= 760 px: a bottom sheet
   behind a 52 px peek bar above the tab bar. */

html[data-crail] { --crail-w: 352px; --crail-top: 0px; }

/* ── the page gives up the rail's width (docked); its own Copilot column / buttons go: the rail holds the one Copilot ── */
@media (min-width: 1280px) {
  html[data-crail="open"] #app { margin-right: var(--crail-w); }
  html[data-crail="open"] #toasts { right: calc(var(--crail-w) + 14px); }
  html[data-crail="open"] #toasts[aria-live] { left: calc((100% - var(--crail-w)) / 2); right: auto; }
  html[data-crail="open"] .bsel-bar { --bsel-r: var(--crail-w); }     /* the Jobs / Recently deleted selection bar (next/next.css) centres on the page, not under the rail */
}
html[data-crail] #app #copBtn, html[data-crail] #app .btn-cop, html[data-crail] #app .lv-cop-btn,
html[data-crail] #app #dCopBtn, html[data-crail] #hubCop, html[data-crail] #dCopAside, html[data-crail] .jb-ask,
html[data-crail] .lv-scrim, html[data-crail] #copScrim, html[data-crail] #chatSplit, html[data-crail] .work > .cop-scrim,
html[data-crail] .pd-open { display: none !important; }
/* .pd-open: the job's "Copilot · SM-…" button on Design and on a document (shared/project-drawer.js). With the rail on (open or hidden) it
   was a second Copilot beside the rail's, so it goes (consolidated review decision 16). No stamp, no rail, no rule: flag off, nothing changes. */
/* the job page and the hub: no third column (the old layout keeps the outline; layout v2 has it in the nav rail) */
html[data-crail] .work, html[data-crail] .work.nocop { grid-template-columns: 250px minmax(0, 1fr); }
html[data-crail] .work.hub, html[data-crail] .work.docs-work { grid-template-columns: minmax(0, 1fr); }
html[data-crail] .jb-top { grid-template-columns: minmax(0, 1fr); }
html[data-crail][data-layout="v2"] .work, html[data-crail][data-layout="v2"] .work.nocop { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 1200px) { html[data-crail] .work, html[data-crail] .work.nocop { grid-template-columns: 220px minmax(0, 1fr); }
  html[data-crail][data-layout="v2"] .work, html[data-crail][data-layout="v2"] .work.nocop, html[data-crail] .work.hub, html[data-crail] .work.docs-work { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) { html[data-crail] .work, html[data-crail] .work.nocop { grid-template-columns: minmax(0, 1fr); }
  /* the page's own content row ends above the peek bar, which sits on the tab bar */
  html[data-crail="open"] #app > header.sh + div, html[data-crail="open"] #app > #cols { margin-bottom: 52px; } }

/* ── the rail ── */
.crail { display: none; position: fixed; top: 0; right: 0; bottom: 0; width: var(--crail-w); z-index: 40; min-width: 0;
  background: var(--hull-1); color: var(--ink); border-left: 1px solid var(--rule); font: 400 var(--fs-body)/1.45 var(--sans);
  grid-template-rows: auto auto minmax(0, 1fr); -webkit-font-smoothing: antialiased; }
.crail *, .crail *::before, .crail *::after { box-sizing: border-box; }
@media (min-width: 1280px) { html[data-crail="open"] .crail { display: grid; } }
.crail .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.crail .cr-i { flex: none; }
.cr-grip { position: absolute; left: -3px; top: 0; bottom: 0; width: 6px; cursor: col-resize; z-index: 5; touch-action: none; }
.cr-grip:hover, .cr-grip:focus-visible, .crail.cr-resizing .cr-grip { background: color-mix(in srgb, var(--accent) 30%, transparent); }
.cr-grip:focus-visible { outline-offset: 0; }     /* ← / → move this edge (crail.js): the ring sits on it */
.crail.cr-resizing { user-select: none; }

/* header: Copilot · New · Hide, then the scope chip and "On: ..." */
.cr-h { padding: 10px 10px 10px 14px; border-bottom: 1px solid var(--rule); display: grid; gap: 8px; min-width: 0; }
.cr-top { display: flex; align-items: center; gap: 4px; min-height: 28px; }
.cr-title { margin: 0; font-size: var(--fs-title); font-weight: 650; letter-spacing: -.01em; }
.cr-sp { flex: 1; }
.crail .cr-ib { width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 6px; background: none;
  color: var(--ink-3); cursor: pointer; font: inherit; flex: none; }
.crail .cr-ib:hover { background: var(--hull-3); color: var(--ink); border: 0; }
.cr-scope { display: flex; align-items: center; gap: 8px; min-width: 0; }
.crail .cr-chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 9px; border: 1px solid var(--rule-strong);
  border-radius: 16px; background: var(--hull-2); color: var(--ink-2); font: 500 var(--fs-ui)/1 var(--sans); white-space: nowrap; max-width: 100%;
  cursor: pointer; min-width: 0; }
.crail .cr-chip b { font: 600 var(--fs-meta) var(--mono); color: var(--ink); overflow: hidden; text-overflow: ellipsis; }
.crail .cr-chip:hover:not(:disabled) { border-color: var(--accent); background: var(--hull-2); }
/* S4 polish P3-8: a scope that cannot be changed (Jobs home, a document, Design) reads as plain text, not as a disabled copy of
   the job chip (which opens its menu) */
.crail .cr-chip:disabled { cursor: default; opacity: 1; border-color: transparent; background: none; padding: 0; }
.crail .cr-chip.wide { border-color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, var(--hull-1)); color: var(--warn); }
.crail .cr-chip.wide b { color: var(--warn); }
.cr-on { font-size: var(--fs-meta); color: var(--ink-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cr-banner { display: flex; align-items: center; gap: 8px; padding: 7px 14px; border-bottom: 1px solid var(--rule); background: var(--hull-2);
  font-size: var(--fs-ui); color: var(--ink-2); }
.cr-banner[hidden] { display: none; }
.cr-banner a { margin-left: auto; color: var(--accent); font-weight: 600; }
.cr-dot-warn { width: 7px; height: 7px; border-radius: 50%; background: var(--warn); flex: none; }
.cr-pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; animation: cr-pulse 1.1s ease-in-out infinite; }
@keyframes cr-pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

/* menus (the scope chip, the threads) */
.crail .cr-pop { position: absolute; z-index: 60; background: var(--hull-1); border: 1px solid var(--rule-strong); border-radius: 10px;
  box-shadow: var(--elev-2); padding: 6px; min-width: 260px; max-width: calc(var(--crail-w) - 20px); }
.crail .cr-pop[hidden] { display: none; }
.crail .cr-mi { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 8px 10px; border: 0; background: none; border-radius: 6px;
  cursor: pointer; text-align: left; color: var(--ink); font: inherit; min-height: 32px; }
.crail .cr-mi:hover, .crail .cr-mi:focus-visible { background: var(--hull-3); border: 0; }
.crail .cr-mi .ck { width: 16px; flex: none; color: var(--accent); display: grid; place-items: center; padding-top: 1px; }
.crail .cr-mi b { display: block; font-weight: 600; font-size: var(--fs-ui); }
.crail .cr-mi span span { display: block; font-size: var(--fs-meta); color: var(--ink-4); margin-top: 1px; }
.crail .cr-mi.danger b { color: var(--err); }
.crail .cr-pop hr { border: 0; border-top: 1px solid var(--rule); margin: 4px 0; }
/* RC22.6 the header's Conversations menu: All jobs, then each job (its title and ref), newest first; scrolls inside itself */
.crail .cr-pop.cr-convs { right: 10px; left: auto; width: min(340px, calc(100% - 20px)); max-width: none; max-height: min(60vh, 460px);
  overflow-y: auto; overscroll-behavior: contain; }
/* S4 polish P2-16: a fade at the foot while more rows are below; at the end it sits under the last row, which is never cut */
.crail .cr-pop.cr-convs::after { content: ""; position: sticky; bottom: calc(-1 * var(--s2)); display: block; height: var(--s5);
  margin-bottom: calc(-1 * var(--s2)); background: linear-gradient(to bottom, transparent, var(--hull-1)); pointer-events: none; }
.crail .cr-mg { display: flex; align-items: baseline; gap: 8px; padding: 8px 10px 4px; font-size: var(--fs-meta); color: var(--ink-4); min-width: 0; }
.crail .cr-mg .t { font-weight: 650; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.crail .cr-mg .ref { font-family: var(--mono); flex: none; }
.crail .cr-convs .cr-mi b, .crail .cr-convs .cr-mi span span { overflow-wrap: anywhere; }
.crail .cr-convs .cr-mi[aria-disabled="true"] { cursor: default; }
.crail .cr-convs .cr-mi:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* RC22.6 the job page's "Using: n designs · n documents" under the chip; the panel's own copy gives way while it shows */
.crail .cr-using { font-size: var(--fs-meta); color: var(--ink-3); min-width: 0; }
.crail .cr-using[hidden] { display: none; }
.crail .cr-using summary { cursor: pointer; width: fit-content; max-width: 100%; list-style: none; border-radius: 4px; }
.crail .cr-using summary::-webkit-details-marker { display: none; }
.crail .cr-using summary:hover { color: var(--ink-2); }
.crail .cr-using details > ul { margin: 6px 0 0; padding: 8px 10px 8px 26px; border: 1px solid var(--rule); border-radius: 8px; background: var(--hull-2);
  display: grid; gap: 3px; color: var(--ink-2); max-height: 30vh; overflow: auto; }
.crail .cr-using details > ul > li { list-style: none; margin-left: -16px; }
.crail .cr-using details > ul > li > b { font-size: var(--fs-meta); font-weight: 650; color: var(--ink-3); }
.crail .cr-using details > ul ul { margin: 2px 0 4px; padding-left: 16px; }
.crail .cr-using p { margin: 4px 0 0; font-size: var(--fs-meta); color: var(--ink-4); }
.crail[data-using] .cr-slot > .cop > .cp-head { display: none; }
.cr-confirm { padding: 8px 8px 4px; max-width: 300px; }
.cr-confirm p { margin: 0 0 10px; font-size: var(--fs-ui); }
.cr-confirm .row { display: flex; gap: 8px; justify-content: flex-end; }

/* the slot: the page's own Copilot, or the All jobs chat */
.cr-slot { grid-row: 3; min-height: 0; min-width: 0; display: flex; flex-direction: column; overflow: hidden; position: relative; }
.cr-h { grid-row: 1; } .cr-banner { grid-row: 2; }
.cr-slot > * { flex: 1 1 auto; min-height: 0; }
.cr-load { display: grid; gap: 10px; padding: 18px 14px; align-content: start; }
.cr-load i, .cr-skel i { display: block; height: 14px; border-radius: 4px; background: linear-gradient(90deg, var(--hull-3), var(--hull-2), var(--hull-3));
  background-size: 200% 100%; animation: cr-sh 1.4s linear infinite; }
.cr-load i:nth-child(1) { width: 60%; justify-self: end; height: 30px; border-radius: 10px; } .cr-load i:nth-child(2) { width: 90%; } .cr-load i:nth-child(3) { width: 70%; }
@keyframes cr-sh { to { background-position: -200% 0; } }
.cr-parked { display: none !important; }

/* adopted panels fill the slot; their own header lines and close buttons give way to the rail's */
.crail .cr-slot > .cop { display: flex !important; flex-direction: column; position: static !important; width: auto !important; height: 100%;
  max-height: none !important; border: 0 !important; box-shadow: none !important; transform: none !important; visibility: visible !important;
  border-radius: 0 !important; inset: auto !important; z-index: auto !important; background: var(--hull-1); }
.crail .cr-slot > .cop > .cop-body, .crail .cr-slot > .cop .cop-body { flex: 1 1 auto; min-height: 0; }
.crail .cr-slot > .cop > .cop-h > div:first-child, .crail #copClose, .crail #pcClose, .crail .cp-close, .crail .lv-x, .crail #dCopClose, .crail #dCopX { display: none !important; }
.crail .cr-slot > .cop > .cop-h:not(:has(#jevChip:not([hidden]))) { display: none; }
.crail .cr-slot > .cop .cp-head-t > b, .crail .cr-slot > .cop .cp-head-t > .cp-on { display: none; }
.crail .cr-slot > .cop > .cn, .crail .cr-slot > .cop > .cp-head { flex: none; }
.crail .cr-slot > form#dAsk { display: flex !important; flex-direction: column; margin: 0 !important; border: 0 !important; border-radius: 0 !important;
  box-shadow: none !important; height: 100%; padding: 10px 12px 12px; gap: 8px; background: var(--hull-1); max-width: none !important; }
.crail .cr-slot > form#dAsk .dask-log { flex: 1 1 auto; min-height: 0; max-height: none !important; overflow: auto; }
.crail .cr-slot > form#dAsk .dask-fold { display: none !important; }
.crail .cr-slot > #chat { display: flex !important; flex: 1 1 auto !important; flex-direction: column; width: auto !important; height: auto !important; max-height: none !important;
  border: 0 !important; position: static !important; transform: none !important; visibility: visible !important; box-shadow: none !important;
  inset: auto !important; z-index: auto !important; border-radius: 0 !important; order: 0 !important; }
.crail .cr-slot > #dpCop, .crail .cr-slot > .dcop { display: flex !important; flex-direction: column; width: auto !important; height: 100%;
  border: 0 !important; position: static !important; max-height: none !important; }
html[data-crail] .lv-cophead .lv-ch1 { display: none; }

/* ── the All jobs chat ── */
.cr-native { display: flex; flex-direction: column; min-height: 0; position: relative; }
.cr-thread { display: flex; align-items: center; gap: 2px; padding: 6px 8px 6px 14px; border-bottom: 1px solid var(--rule); flex: none; }
.crail .cr-thbtn { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 8px; margin-left: -8px; border: 0;
  background: none; border-radius: 6px; cursor: pointer; text-align: left; color: var(--ink); font: inherit; }
.crail .cr-thbtn:hover { background: var(--hull-3); border: 0; }
.crail .cr-thbtn b { font-weight: 600; font-size: var(--fs-ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crail .cr-thbtn span { font-size: var(--fs-meta); color: var(--ink-4); white-space: nowrap; }
.crail .cr-thbtn .cr-i { margin-left: auto; color: var(--ink-4); }
.crail .cr-rename { flex: 1; min-width: 0; height: 32px; padding: 0 8px; border: 1px solid var(--accent); border-radius: 6px; background: var(--hull-1);
  color: var(--ink); font: 600 var(--fs-ui) var(--sans); }
.cr-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 16px 14px 20px; display: flex; flex-direction: column; gap: 18px; }
.cr-m { max-width: 100%; }
.cr-m p { margin: 0 0 8px; overflow-wrap: anywhere; }
.cr-m p:last-child { margin-bottom: 0; }
.cr-m.u { align-self: flex-end; max-width: 88%; background: var(--hull-3); border-radius: 12px 12px 4px 12px; padding: 8px 12px; }
.cr-m.a .who { font-size: var(--fs-meta); color: var(--ink-4); margin-bottom: 5px; }
.cr-m.a .who b { color: var(--ink-2); font-weight: 600; }
.cr-label { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; margin-bottom: 8px; border-radius: 6px; background: var(--hull-3);
  color: var(--ink-3); font-size: var(--fs-meta); font-weight: 600; }
.cr-cite, .crail a.cr-cite { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 7px; margin: 0 1px; border: 1px solid var(--rule);
  border-radius: 5px; background: var(--hull-2); color: var(--accent); font: 550 var(--fs-meta)/1 var(--sans); cursor: pointer; vertical-align: 1px;
  white-space: nowrap; text-decoration: none; }
.cr-cite:hover { border-color: var(--accent); background: var(--wash); }
.cr-widened { display: flex; gap: 8px; align-items: flex-start; padding: 7px 10px; margin: 0 0 8px; border-radius: 8px;
  background: color-mix(in srgb, var(--warn) 12%, var(--hull-1)); color: var(--warn); font-size: var(--fs-ui); font-weight: 550; }
.cr-widened .cr-i { margin-top: 2px; }
/* RC22.8 (UX review 19 Oct P1-4, crail.js readHtml): what an answer read, over it ("Read R2 · 9 Oct 11:30"). Once the job's
   revision or the documents changed since: the kit's Out of date chip and Ask again (the kit's small button), and the answer's
   figures dimmed to --ink-4 (>= 4.5:1 on the panel, light and dark; no new colour) */
.cr-read { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; margin: 0 0 var(--s1); font-size: var(--fs-meta);
  line-height: var(--lh-meta); color: var(--ink-3); }
.cr-read.old { margin-bottom: var(--s2); }
.cr-fig { color: var(--ink-4); }
.cr-rows { list-style: none; margin: 8px 0 10px; padding: 0; border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; }
.cr-rows li + li { border-top: 1px solid var(--rule); }
.cr-rows a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1px 10px; padding: 8px 10px; text-decoration: none; color: var(--ink); min-height: 44px; }
.cr-rows a:hover { background: var(--hull-2); }
.cr-rows .ref { grid-column: 1; font: 500 var(--fs-meta) var(--mono); color: var(--ink-3); }
.cr-rows .t { grid-column: 1; font-weight: 600; font-size: var(--fs-ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-rows .w { grid-column: 1; font-size: var(--fs-meta); color: var(--ink-3); overflow-wrap: anywhere; }
.cr-rows .d { grid-column: 2; grid-row: 1 / 4; align-self: center; font-size: var(--fs-meta); font-weight: 600; color: var(--warn); text-align: right; white-space: nowrap; }
.cr-rows .d small { display: block; font-size: var(--fs-meta); font-weight: 400; color: var(--ink-4); }
.crail .cr-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid var(--rule-strong); border-radius: 6px;
  background: var(--hull-1); color: var(--ink); font: 550 var(--fs-ui) var(--sans); cursor: pointer; white-space: nowrap; }
.crail .cr-btn:hover { background: var(--hull-3); border-color: var(--rule-strong); }
/* text on the --err fill is --accent-ink, as components.css .btn.primary.danger: 6.8:1 dark (#0b1421 on #f4786d), 5.7:1 light
   (#fff on #be3128); white on the dark --err was 2.7:1 */
.crail .cr-btn.danger { background: var(--err); border-color: var(--err); color: var(--accent-ink); }
.crail .cr-btn.danger:hover { background: color-mix(in srgb, var(--err) 86%, #000); border-color: transparent; }
.cr-noprice { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 4px; }
/* the Copilot harness (crail.js navHtml / asksHtml): link buttons under an answer, and the ask card of a calculator's
   missing inputs (the proposal card's anatomy: a kicker, the rows, the action; no preselected value, no live region) */
.crail .cr-ask .btn[disabled] { opacity: 1; color: var(--ink-3); background: var(--hull-2); border-color: var(--rule); cursor: default; }
.cr-nav { display: flex; gap: var(--s2); flex-wrap: wrap; margin: var(--s3) 0 var(--s1); }
.crail .cr-go { max-width: 100%; text-decoration: none; color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--rule)); }
.crail .cr-go span { overflow: hidden; text-overflow: ellipsis; }
.crail .cr-go:hover { background: var(--wash); border-color: var(--accent); }
.cr-ask { display: grid; gap: var(--s3); margin: var(--s3) 0 var(--s1); padding: var(--s3); border: 1px solid color-mix(in srgb, var(--warn) 35%, var(--rule));
  border-radius: var(--r-md); background: color-mix(in srgb, var(--warn) 7%, var(--hull-1)); }
.cr-ask-h { display: flex; align-items: baseline; gap: var(--s2); flex-wrap: wrap; font-size: var(--fs-ui); font-weight: 600; color: var(--ink); }
.cr-ask-k { font-size: var(--fs-meta); font-weight: 650; letter-spacing: .02em; text-transform: uppercase; color: var(--warn); }
.cr-ask-row { display: grid; gap: var(--s1); }
.cr-ask-row label { font-size: var(--fs-ui); color: var(--ink-2); }
.cr-ask-in { display: flex; align-items: center; gap: var(--s2); }
.crail .cr-ask-in input { flex: 1 1 auto; min-width: 0; height: var(--h-ctl); padding: 0 var(--s2); border: 1px solid var(--rule-strong);
  border-radius: var(--r-sm); background: var(--hull-0); color: var(--ink); font: 400 var(--fs-ui) var(--sans); }
.crail .cr-ask-in input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.crail .cr-ask-in input[aria-invalid="true"] { border-color: var(--err); }
.cr-ask-u { flex: none; min-width: var(--s5); font: 500 var(--fs-meta) var(--mono); color: var(--ink-3); }
.cr-ask-why { margin: 0; font-size: var(--fs-meta); color: var(--ink-3); }
.cr-ask-a { display: flex; gap: var(--s2); }
/* hp2 (crail.js cardsHtml): the design cards. Start (the brief, Start design / Edit brief / Dismiss), Run (a compact stepper:
   dots and the current phase's name, the step line, the designer's questions, a pause as an amber notice with Resume), Keep
   (the summary line, Keep / Discard, the folded sections, then Undo). Tokens only; status tints are opaque (mixed with
   --hull-1, components.css .badge, D7), a full 1px edge, never a side stripe; light and dark from the tokens. */
.cr-dcs { display: grid; gap: var(--s3); margin: var(--s3) 0 var(--s1); }
.cr-dc { display: grid; gap: var(--s2); padding: var(--s3); border: 1px solid var(--rule); border-radius: var(--r-md); background: var(--hull-1);
  font-size: var(--fs-ui); color: var(--ink); min-width: 0; }
.cr-dc-h { display: flex; align-items: baseline; gap: var(--s1) var(--s2); flex-wrap: wrap; }
.cr-dc-k { font-size: var(--fs-meta); font-weight: 650; letter-spacing: .02em; text-transform: uppercase; color: var(--accent); }
.cr-dc-t { font-weight: 650; overflow-wrap: anywhere; }
.cr-dc-sub { font-size: var(--fs-meta); color: var(--ink-3); }
.cr-dc ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s1); }
.cr-dc-given li, .cr-dc-unk li { overflow-wrap: anywhere; }
.cr-dc-given .n { color: var(--ink-2); }
.cr-dc .src { font-size: var(--fs-meta); color: var(--ink-3); }
.cr-dc-unk { display: grid; gap: var(--s1); }
.cr-dc-unk ul { padding-left: var(--s3); list-style: disc; }
.cr-dc-notes li, .cr-dc-est { margin: 0; font-size: var(--fs-meta); color: var(--ink-3); }
.cr-dc-a { display: flex; flex-wrap: wrap; gap: var(--s2); }
/* a row that starts with a ghost button (no fill, no edge: only its words show) pulls it back by its own inline padding
   (.btn.sm: 0 var(--s2)), so its words line up with the card's text; the hover fill stays inside the card's --s3 padding */
.cr-dc-a > .btn.sm.ghost:first-child { margin-inline-start: calc(var(--s2) * -1); }
.cr-dc-state, .cr-dc-line, .cr-dc-sum, .cr-dc-why, .cr-dc-err { margin: 0; }
.cr-dc-state.dim, .cr-dc-line.dim { color: var(--ink-3); }
.cr-dc-state.warn, .cr-dc-line.warn, .cr-dc-err { color: color-mix(in srgb, var(--warn) 85%, var(--ink)); }
.cr-dc-line.ok { color: color-mix(in srgb, var(--ok) 85%, var(--ink)); }
.cr-dc-state:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r); }
/* a disabled button in a card is the kit's (components.css .btn:disabled); its reason sits beside it */
.cr-dc-why { font-size: var(--fs-meta); color: var(--ink-3); flex: 1 1 0; min-width: 0; }
/* the stepper: six dots in a row, the current one wider and named */
.cr-dc-steps { display: flex; align-items: center; gap: var(--s1); margin: 0; padding: 0; list-style: none; }
.cr-dc-steps li { display: flex; align-items: center; gap: var(--s1); }
/* a to-do step is a hollow ring in --ink-4 (>= 3:1 on the card's --hull-1: 5.9:1 light, 7.1:1 dark; the old --hull-3 fill and
   --rule-strong ring were 1.1-1.7:1); a done / current / stopped step is a filled dot */
.cr-dc-steps i { display: block; width: var(--s2); height: var(--s2); border-radius: 50%; background: var(--hull-1); box-shadow: inset 0 0 0 1.5px var(--ink-4); }
.cr-dc-steps li.done i { background: var(--ok); box-shadow: none; }
.cr-dc-steps li.now i { background: var(--accent); box-shadow: none; }
.cr-dc-steps li.bad i { background: var(--warn); box-shadow: none; }
.cr-dc-ph { font-size: var(--fs-meta); font-weight: 650; color: var(--accent); margin-right: var(--s1); }
.cr-dc-live { display: grid; gap: var(--s1); }
.cr-dc-pause { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); padding: var(--s2) var(--s3); border-radius: var(--r-md);
  border: 1px solid color-mix(in srgb, var(--warn) 35%, var(--rule)); background: color-mix(in srgb, var(--warn) 12%, var(--hull-1));
  color: color-mix(in srgb, var(--warn) 85%, var(--ink)); font-weight: 550; }
.cr-dc-pause span { flex: 1 1 160px; min-width: 0; }
.cr-dc-q { display: grid; gap: var(--s3); padding: var(--s3); border: 1px solid color-mix(in srgb, var(--warn) 35%, var(--rule));
  border-radius: var(--r-md); background: color-mix(in srgb, var(--warn) 7%, var(--hull-1)); }
/* a folded section: a flex summary loses the browser's marker, so it draws its own chevron (right when closed, down when open);
   the opened rows sit under the title's text (indented by the chevron and the gap: --s2 + --s2) in the regular weight */
.cr-dc-more summary { cursor: pointer; font-weight: 600; color: var(--ink-2); min-height: var(--s5); display: flex; align-items: center; gap: var(--s2); list-style: none; }
.cr-dc-more summary::-webkit-details-marker { display: none; }
.cr-dc-more summary::before { content: ""; flex: none; box-sizing: border-box; width: var(--s2); height: var(--s2); border: solid var(--ink-3);
  border-width: 0 1.5px 1.5px 0; transform: rotate(-45deg); transition: transform .12s; }
.cr-dc-more[open] > summary::before { transform: rotate(45deg); }
.cr-dc-more summary:hover { color: var(--ink); }
.cr-dc-more summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r); }
.cr-dc-more > :not(summary) { margin-top: var(--s1); margin-inline-start: var(--s4); }
.cr-dc-list li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s1) var(--s2); padding: var(--s1) 0; border-top: 1px solid var(--rule); }
.cr-dc-list li:first-child { border-top: 0; }
.cr-dc-list li b { font-weight: 400; overflow-wrap: anywhere; min-width: 0; }
.cr-dc-list li span:not(.badge) { font-size: var(--fs-meta); color: var(--ink-3); }
.cr-dc-list .badge { height: auto; min-height: 20px; white-space: normal; }
.cr-dc-sumrow { display: flex; align-items: center; gap: var(--s3); }
.cr-dc-sum { font-weight: 600; }
.cr-dc-thumb { flex: none; width: 96px; height: 96px; object-fit: contain; border: 1px solid var(--rule); border-radius: var(--r-md); background: var(--hull-0); }
.cr-dc-kept { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.cr-dc-kept .cr-dc-state { flex: 1 1 100%; }
@media (max-width: 760px) { .cr-dc-a .btn, .cr-dc-pause .btn, .cr-dc-kept .btn { min-height: 44px; } }
@media (max-width: 760px) { .cr-nav .cr-btn, .cr-ask-a .btn { flex: 1 1 100%; justify-content: center; } }
@media (max-width: 760px) { .cr-noprice .cr-btn { flex: 1 1 100%; justify-content: center; } }
.cr-foot { display: flex; gap: 14px; margin-top: 8px; font-size: var(--fs-meta); color: var(--ink-4); }
.cr-working .cr-steps { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; font-size: var(--fs-ui); color: var(--ink-3); }
.cr-working .cr-steps li { display: flex; align-items: baseline; gap: 8px; }
.cr-working .cr-steps i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-4); animation: cr-pulse 1.1s ease-in-out infinite; }
.cr-wrow { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.cr-wrow span { font-size: var(--fs-meta); color: var(--ink-4); }
/* UX review 17 Oct (D11): a question that did not go through, in the engineer's words (dimmed), "Not sent" with a warn icon and Retry, on a light warn tint
   with a full 1px edge: it no longer reads as the end of the previous answer */
.cr-fail { display: grid; gap: 8px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--warn) 30%, var(--rule)); border-radius: 10px;
  background: color-mix(in srgb, var(--warn) 9%, var(--hull-1)); }
.cr-fail .cr-fail-q { margin: 0; color: var(--ink-3); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; }
.cr-fail-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.cr-fail-t { flex: 1 1 170px; min-width: 0; display: flex; align-items: flex-start; gap: 8px; font-size: var(--fs-ui); color: var(--ink-2); }
.cr-fail-t .cr-i { margin-top: 2px; color: var(--warn); }
.cr-fail-t b { font-weight: 650; color: var(--ink); }
.cr-empty { margin: auto 0; padding: 8px 4px; }
.cr-empty h3 { margin: 0 0 6px; font-size: var(--fs-title); font-weight: 650; }
.cr-empty p { margin: 0; color: var(--ink-3); }
.cr-starters { display: grid; gap: 6px; margin-top: 12px; }
/* RC22.6 K15 (STUDIO_KIT_PATTERNS): the kit empty state keeps the rail's tight inset; its starters span the column */
html[data-crail][data-kit="v2"] .crail .cr-empty.empty-state { padding: 8px 4px; }
html[data-crail][data-kit="v2"] .crail .cr-empty .cr-starters { justify-self: stretch; margin-top: 10px; }
.crail .cr-starters button { text-align: left; padding: 9px 12px; border: 1px solid var(--rule); border-radius: 8px; background: var(--hull-1); cursor: pointer;
  font: var(--fs-ui)/1.35 var(--sans); color: var(--ink-2); min-height: 36px; }
.crail .cr-starters button:hover { border-color: var(--accent); color: var(--ink); background: var(--hull-1); }
.cr-skel { display: grid; gap: 10px; }
.cr-skel i.u { width: 60%; justify-self: end; height: 30px; border-radius: 10px; }
.cr-skel i:nth-child(2) { width: 90%; } .cr-skel i:nth-child(3) { width: 75%; }
.cr-in { border-top: 1px solid var(--rule); padding: 10px 12px 12px; background: var(--hull-1); flex: none; }
.cr-off { display: flex; gap: 8px; align-items: flex-start; font-size: var(--fs-ui); color: var(--ink-2); background: var(--hull-3); border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; }
.cr-off[hidden] { display: none; }
.cr-box { border: 1px solid var(--rule-strong); border-radius: 10px; background: var(--hull-2); transition: border-color .15s, box-shadow .15s; }
.cr-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--wash); background: var(--hull-1); }
.crail .cr-box textarea { display: block; width: 100%; min-height: 58px; max-height: 160px; resize: none; border: 0; background: none; padding: 10px 12px 4px;
  font: var(--fs-body)/1.45 var(--sans); color: var(--ink); outline: none; box-shadow: none; }
.crail .cr-box textarea::placeholder { color: var(--ink-4); }
.cr-row { display: flex; align-items: center; gap: 6px; padding: 4px 6px 6px 10px; }
.cr-hint { font-size: var(--fs-meta); color: var(--ink-4); }
.cr-hint kbd { font: 500 var(--fs-meta) var(--mono); padding: 0 5px; border: 1px solid var(--rule-strong); border-bottom-width: 2px; border-radius: 4px; color: var(--ink-3); background: var(--hull-1); }
.crail .cr-send { margin-left: auto; width: 32px; height: 32px; padding: 0; border-radius: 8px; border: 0; background: var(--accent-deep); color: #fff;
  display: grid; place-items: center; cursor: pointer; }
.crail .cr-send:hover { background: var(--accent-hover); border: 0; }

/* the bar's Copilot button (the rail hidden, and below 1280 px), the noticed count */
.cr-show { display: none; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--rule-strong);
  background: var(--hull-1); color: var(--ink); cursor: pointer; font: 600 var(--fs-ui) var(--sans); white-space: nowrap; flex: none; }
.cr-show:hover { background: var(--hull-3); }
@media (min-width: 1280px) { html[data-crail="hidden"] .cr-show { display: inline-flex; } }
@media (min-width: 761px) and (max-width: 1279px) { .cr-show { display: inline-flex; } }
.cr-badge { min-width: 18px; height: 18px; border-radius: 9px; background: var(--accent-deep); color: #fff; font: 600 var(--fs-meta)/18px var(--sans);
  text-align: center; padding: 0 5px; font-style: normal; }
.cr-badge[hidden] { display: none; }

/* Pricing with the rail open, below crail.js NAV_ICONS_BELOW (layout v2): the nav as a 56 px icon strip, expandable */
html.crail-navicons[data-layout="v2"] { --rail-w: 56px; }
html.crail-navicons[data-layout="v2"] #rail.sh-rail { width: 56px !important; overflow: hidden; }
html.crail-navicons[data-layout="v2"] #rail .sh-brand .wm, html.crail-navicons[data-layout="v2"] #rail .sh-nav a span,
html.crail-navicons[data-layout="v2"] #rail .sh-ctx, html.crail-navicons[data-layout="v2"] #rail .sh-who { display: none !important; }
html.crail-navicons[data-layout="v2"] #rail .sh-nav a { justify-content: center; padding: 0; }
html.crail-navicons[data-layout="v2"] #rail .sh-brand { padding: 0 14px; justify-content: center; }
.cr-navx { display: flex; align-items: center; gap: 8px; margin: 10px 8px 0; height: 34px; padding: 0 10px; border: 1px solid var(--rule); border-radius: 6px;
  background: var(--hull-1); color: var(--ink-3); cursor: pointer; font: 500 var(--fs-ui) var(--sans); }
html.crail-navicons .cr-navx { width: 34px; padding: 0; justify-content: center; margin: 10px auto 0; }
.cr-navx:hover { background: var(--hull-3); color: var(--ink); }

/* a cited row flashes for 1.6 s */
.cr-flash, .cr-flash > td { animation: cr-flash 1.6s var(--ease, ease); }
@keyframes cr-flash { 0%, 40% { background: color-mix(in srgb, var(--accent) 18%, transparent); } 100% { background: transparent; } }
.cr-fbar { display: flex; align-items: center; gap: 12px; margin: 0 0 8px; padding: 8px 12px; border: 1px solid var(--rule); border-radius: 8px;
  background: var(--hull-2); font-size: var(--fs-ui); color: var(--ink-2); }
.cr-fbar .cr-btn { margin-left: auto; }
.cr-fbar .cr-btn, .cr-show { min-height: 32px; }
.cr-fbar button { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border: 1px solid var(--rule-strong); border-radius: 6px;
  background: var(--hull-1); color: var(--ink); font: 550 var(--fs-ui) var(--sans); cursor: pointer; margin-left: auto; }

/* ── 761-1279 px: a drawer from the right (scrim, Esc closes) ── */
.cr-scrim { display: none; }
@media (max-width: 1279px) {
  .crail { display: grid; top: 0; width: min(var(--crail-w), 92vw); z-index: 125; box-shadow: var(--shadow); transform: translateX(102%);
    visibility: hidden; transition: transform .22s var(--ease, ease), visibility 0s linear .22s; }
  /* the width is a docked rail's only (crail.js resizes in dock mode): no col-resize cursor, hover tint or tab stop here */
  .cr-grip { display: none; }
  html[data-crail-open] .crail { transform: none; visibility: visible; transition: transform .22s var(--ease, ease); }
  html[data-crail-open] .cr-scrim { display: block; position: fixed; inset: 0; z-index: 124; background: var(--scrim); }
}
/* ── <= 760 px: a bottom sheet, a peek bar above the tab bar ── */
.cr-peek { display: none; }
@media (max-width: 760px) {
  .crail { left: 0; right: 0; top: auto; bottom: 0; width: auto; height: 86dvh; border-left: 0; border-top: 1px solid var(--rule);
    border-radius: 16px 16px 0 0; transform: translateY(102%); padding-bottom: env(safe-area-inset-bottom); }
  .crail .cr-ib, .crail .cr-chip, .crail .cr-btn, .crail .cr-send, .crail .cr-thbtn, .crail .cr-mi { min-height: 44px; min-width: 44px; }
  .crail .cr-chip { min-width: 0; }
  .crail .cr-starters button { min-height: 44px; }
  html[data-crail="open"] .cr-peek { display: flex; align-items: center; gap: 6px; position: fixed; left: 0; right: 0; z-index: 90; height: 52px;
    bottom: var(--crail-tab, calc(56px + env(safe-area-inset-bottom))); padding: 0 16px; border: 0; border-top: 1px solid var(--rule); background: var(--hull-1);
    color: var(--ink); font: var(--fs-body) var(--sans); cursor: pointer; text-align: left; box-shadow: 0 -4px 12px rgba(13, 24, 36, .06); }
  html.sh-kb .cr-peek { display: none !important; }
  /* the peek bar never covers the Undo toast, the Library's bulk bar or the Jobs selection bar (D9): they sit above it (on top of it,
     if they ever meet); while documents are selected the Documents bulk bar takes the peek bar's place */
  html[data-crail="open"] #toasts { bottom: calc(var(--crail-tab, 56px) + 64px) !important; z-index: 95; }
  html[data-crail="open"] .cv-bulk { bottom: calc(var(--crail-tab, 56px) + 60px); }
  html[data-crail="open"] .bsel-bar { bottom: calc(var(--crail-tab, 56px) + 60px); }
  html[data-crail] body.dsel-on .cr-peek { display: none !important; }
  html[data-crail="open"] body.dsel-on #app > header.sh + div { margin-bottom: 0; }
  .cr-peek > span { color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .cr-peek .mono { font-family: var(--mono); font-size: var(--fs-meta); }
  .cr-peek .cr-badge { margin-left: auto; }
  .cr-grab { position: absolute; top: 5px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; background: var(--rule-strong); }
  .cr-show { display: none !important; }
  html[data-crail="hidden"] .cr-show { display: inline-flex !important; }
}
@media (prefers-reduced-motion: reduce) {
  .crail, html[data-crail-open] .crail { transition: none; }
  .cr-pulse, .cr-load i, .cr-skel i, .cr-working .cr-steps i { animation: none; }
  .cr-dc-more summary::before { transition: none; }
  .cr-flash, .cr-flash > td { animation: none; outline: 2px solid var(--accent); }
}