/* The control room's layout and components. Matte surfaces, one border token,
   4 px radii; no shadows, glass, grid or glow. */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--canvas); color: var(--text); font: 13px/1.45 var(--font-ui); -webkit-font-smoothing: antialiased; }
a { color: var(--gold); }
button { font: inherit; color: inherit; cursor: pointer; }
input, textarea, select { font: inherit; color: var(--text); background: var(--canvas); border: 1px solid var(--border); border-radius: var(--radius); padding: 7px 10px; }
input:focus, textarea:focus, select:focus, button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 1px; }
.mono { font-family: var(--font-data); }
.voice { font-family: var(--font-voice); font-weight: 400; letter-spacing: -.005em; line-height: 1.2; }
.dim { color: var(--text-3); }
.muted { color: var(--text-2); }

/* status words */
.running { color: var(--cyan); font-weight: 500; }
.waiting, .suspended-approval { color: var(--amber); font-weight: 500; }
.done, .verified { color: var(--green); font-weight: 500; }
.failed, .denied, .canceled { color: var(--red); font-weight: 500; }
.suspended { color: var(--violet); font-weight: 500; }

/* a state as a chip: tinted ground, the color's word, a small icon */
.st { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 11px; font-size: 12px; font-weight: 500; white-space: nowrap; border: 1px solid transparent; color: var(--text-2); background: var(--raised); }
.st .icon { flex: none; }
.st-running { color: var(--cyan); background: color-mix(in srgb, var(--cyan) 12%, transparent); border-color: color-mix(in srgb, var(--cyan) 28%, transparent); }
.st-suspended, .st-pending, .st-waiting { color: var(--amber); background: color-mix(in srgb, var(--amber) 12%, transparent); border-color: color-mix(in srgb, var(--amber) 28%, transparent); }
.st-done, .st-served { color: var(--green); background: color-mix(in srgb, var(--green) 12%, transparent); border-color: color-mix(in srgb, var(--green) 28%, transparent); }
.st-failed, .st-denied, .st-canceled, .st-unreachable { color: var(--red); background: color-mix(in srgb, var(--red) 12%, transparent); border-color: color-mix(in srgb, var(--red) 28%, transparent); }
.st-queued { color: var(--text-2); background: color-mix(in srgb, var(--text-2) 10%, transparent); border-color: var(--border); }
.st-interrupted, .st-blocked { color: var(--violet); background: color-mix(in srgb, var(--violet) 12%, transparent); border-color: color-mix(in srgb, var(--violet) 28%, transparent); }
.st-running .icon { animation: spin 1.2s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.icon { vertical-align: -3px; }

/* shell */
.app { min-height: 100vh; display: grid; grid-template-columns: 172px 1fr; grid-template-rows: 48px 1fr; }
.side { grid-row: 1 / 3; background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: 12px 10px; gap: 4px; min-width: 0; }
.side .mark { display: flex; align-items: center; gap: 10px; margin: 2px 6px 14px; color: var(--gold); text-decoration: none; font: 700 13px var(--font-mark); letter-spacing: .12em; }
.side .mark img { width: 28px; height: 28px; flex: none; }
.side .item { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 8px; border-radius: var(--radius); color: var(--text-2); font-weight: 500; font-size: 13px; background: none; border: 1px solid transparent; text-decoration: none; text-align: left; min-width: 0; }
.side .item .key { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 4px; color: var(--text-3); background: var(--canvas); border: 1px solid var(--border); flex: none; }
.side .item .key .icon { vertical-align: 0; }
.side .item:hover { color: var(--text); }
.side .item.on { background: var(--raised); color: var(--text); border-color: var(--border); box-shadow: inset 3px 0 0 var(--crimson); }
.side .item.on .key { color: var(--gold); }
.side .item.who { color: var(--text-2); font-weight: 400; font-size: 12px; }
.side .spacer { flex: 1; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Three sizes: the full sidebar from 1100px, an icon rail down to 700px,
   below that a top bar whose menu opens the sidebar as a drawer. */
.app { grid-template-columns: 200px minmax(0, 1fr); }
.side { position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.side .item .key { position: relative; }
.side .badge { margin-left: auto; background: var(--amber); color: var(--on-amber); border-radius: 10px; font: 700 11px var(--font-data); padding: 1px 7px; }
.side .badge-dot { display: none; position: absolute; top: -3px; right: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--amber); }
.menu-btn { display: none; background: none; border: 0; color: var(--text); padding: 6px; margin-left: -6px; }
.drawer-scrim { display: none; }
.top .new-work { flex: none; }
.top .new-work .nw-short { display: none; }
@media (max-width: 1100px) {
  .app { grid-template-columns: 60px minmax(0, 1fr); }
  .side .item { padding: 0 6px; justify-content: center; }
  .side .item > :not(.key), .side .mark span { display: none; }
  .side .badge-dot { display: block; }
  .top .status .wide { display: none; }
}
@media (max-width: 700px) {
  .app { grid-template-columns: minmax(0, 1fr); grid-template-rows: 52px 1fr; }
  .side { position: fixed; z-index: 40; left: 0; top: 0; width: 240px; transform: translateX(-100%); transition: transform .18s ease; }
  .app.drawer .side { transform: none; box-shadow: 0 0 40px rgba(0,0,0,.5); }
  .app.drawer .drawer-scrim { display: block; position: fixed; inset: 0; z-index: 39; background: rgba(0,0,0,.45); }
  .side .item { padding: 0 8px; justify-content: flex-start; }
  .side .item > :not(.key), .side .mark span { display: inline; }
  .side .item .badge { display: inline-block; }
  .side .badge-dot { display: none; }
  .menu-btn { display: inline-flex; }
  .top { padding: 0 16px; gap: 12px; }
  .top .new-work .nw-long { display: none; }
  .top .new-work .nw-short { display: inline; } /* a bare + read as "add to this page" (#60) */
  .top .new-work { padding: 0 10px; }
  .top-ledger span:not(.num) { display: none; }
  .top-ledger { padding: 0 8px; }
  .main { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) { .side { transition: none; } }
.tabbar { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin: -6px 0 0; }
.tabbar a { padding: 8px 12px; color: var(--text-2); text-decoration: none; font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabbar a.on { color: var(--text); border-bottom-color: var(--gold); }
.mem-h { font-size: 13px; font-weight: 600; margin: 14px 16px 6px; }
.mem-h .dim { font-weight: 400; font-size: 12px; }
.tabs a { color: var(--text-3); text-decoration: none; margin-left: 10px; }
.tabs a.on { color: var(--text); font-weight: 500; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.card { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; background: var(--canvas); }
.card.on { border-color: var(--text-3); }
.card.off { opacity: .7; }
.why { margin-top: 12px; color: var(--text-2); font-size: 12.5px; line-height: 1.6; }
.why b { color: var(--text); font-weight: 500; }
.why.warn b { color: var(--amber); }
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details > summary::before { content: '▸ '; color: var(--text-3); }
details[open] > summary::before { content: '▾ '; }
.top { background: var(--surface); border-bottom: 1px solid var(--border); display: flex; align-items: center; padding: 0 20px; gap: 20px; }
.top .crumb { color: var(--text-2); }
.top .crumb b { color: var(--text); font-weight: 500; }
.top .status { margin-left: auto; display: flex; align-items: center; gap: 18px; color: var(--text-2); font-size: 13px; white-space: nowrap; }
.top-ledger { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 11px 0 9px; border-radius: 999px; border: 1px solid var(--border); background: var(--raised); color: var(--text); text-decoration: none; font-weight: 500; }
.top-ledger:hover { border-color: var(--text-3); }
.top-ledger .icon { color: var(--green); }
.top-ledger.quiet .icon { color: var(--text-3); }
.top-ledger.bad { color: var(--red); border-color: color-mix(in srgb, var(--red) 45%, transparent); background: color-mix(in srgb, var(--red) 12%, transparent); }
.top-ledger.bad .icon { color: var(--red); }
.top-ledger .num { font: 12px var(--font-data); color: var(--text-2); font-weight: 400; padding-left: 8px; border-left: 1px solid var(--border); }
.top-ver { font: 12px var(--font-data); color: var(--text-3); }
.top-clock { display: inline-flex; align-items: baseline; gap: 7px; color: var(--text-2); }
.top-clock b { font: 500 14px var(--font-data); color: var(--text); }
.main { padding: 20px 24px 28px; display: grid; gap: 20px; align-content: start; }

/* sections */
.sec { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); display: flex; flex-direction: column; min-width: 0; }
.sec > h2 { margin: 0; min-height: 44px; padding: 10px 18px; font-size: 13px; font-weight: 600; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.sec > h2 .icon { margin-right: 8px; color: var(--text-3); }
.sec > h2 span { font-weight: 400; color: var(--text-2); font-size: 12px; }
.sec .body { padding: 16px 18px; }
.cols { display: grid; grid-template-columns: 1fr 480px; gap: 18px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 1100px) { .grid2 { grid-template-columns: 1fr; } }
@media (max-width: 1100px) { .cols { grid-template-columns: 1fr; } }

table { border-collapse: collapse; width: 100%; font-size: 12.5px; }
td, th { padding: 9px 18px; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: middle; height: 40px; }
th { color: var(--text-3); font-weight: 500; font-size: 11.5px; white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
tr.link { cursor: pointer; }
tr.link:hover td { background: var(--raised); }
td.num, th.num { text-align: right; font-family: var(--font-data); white-space: nowrap; font-variant-numeric: tabular-nums; }
table.data td { white-space: nowrap; }
table.data td.wrap { white-space: normal; max-width: 60ch; }
.filters { display: grid; grid-template-columns: repeat(2, 170px); gap: 8px; align-content: start; }
.filters .btn { justify-content: center; }

/* the band that needs a person */
.band { border: 1px solid var(--border); border-left: 3px solid var(--amber); border-radius: var(--radius); background: var(--surface); display: grid; grid-template-columns: 1fr 420px; }
.band.calm { border-left-color: var(--border); }
@media (max-width: 1100px) { .band { grid-template-columns: 1fr; } }
.band .l { padding: 18px 22px; border-right: 1px solid var(--border); min-width: 0; }
.band .r { padding: 18px 22px; }
@media (max-width: 1100px) { .band .l { border-right: 0; border-bottom: 1px solid var(--border); } }
.band h1 { margin: 0; font-size: 27px; }
.code { background: var(--canvas); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 14px; margin-top: 12px; font-family: var(--font-data); font-size: 12.5px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; max-height: 240px; overflow: auto; }
.code .p { color: var(--text-3); }
.checks { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 24px; margin-top: 12px; color: var(--text-2); font-size: 12.5px; }
.checks b { color: var(--text); font-weight: 500; }

/* buttons */
.btn { height: 36px; padding: 0 14px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--raised); color: var(--text); font-weight: 500; font-size: 13px; display: inline-flex; align-items: center; gap: 10px; }
.btn:hover { border-color: var(--text-3); }
.btn.primary { background: var(--primary, var(--amber)); border-color: var(--primary, var(--amber)); color: var(--on-primary, var(--on-amber)); }
.btn.quiet { background: none; }
.btn kbd { font: 11px var(--font-data); border: 1px solid currentColor; border-radius: 3px; padding: 0 5px; opacity: .75; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; }
.feedback { margin-top: 10px; width: 100%; }

/* pipeline drawing */
.pipe { display: block; width: 100%; height: auto; }
.pipe text { font-family: var(--font-data); font-size: 12px; fill: var(--text); }
.pipe .lbl2 { fill: var(--text-2); }
.pipe .spine { stroke: var(--border); stroke-width: 2; }
.pipe .doneline { stroke: var(--green); stroke-width: 2; }
.pipe .waitline { stroke: var(--amber); stroke-width: 2; stroke-dasharray: 4 5; }
.pipe .lead { stroke: var(--border); stroke-width: 1; }

/* task view */
.events { display: flex; flex-direction: column; gap: 12px; }
.msg { padding: 2px 0; }
.msg.answer { border-left: 3px solid var(--gold); padding: 8px 14px; background: color-mix(in srgb, var(--gold) 6%, transparent); border-radius: 0 var(--radius) var(--radius) 0; }
.msg .who { font-family: var(--font-data); font-size: 11.5px; color: var(--text-3); }
.reply { white-space: pre-wrap; word-break: break-word; }
.reply.md { white-space: normal; } .reply.md > :last-child { margin-bottom: 0; }
.reasoning { color: var(--text-3); white-space: pre-wrap; font-size: 12.5px; }
.toolrow { display: grid; grid-template-columns: 80px 130px minmax(0, 1fr) minmax(0, 42%); gap: 14px; font-family: var(--font-data); font-size: 12px; padding: 8px 10px; margin: 2px 0; border-radius: var(--radius); background: var(--canvas); border: 1px solid var(--rule); align-items: center; }
.toolrow .in { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toolrow .out { color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.composer { display: flex; gap: 10px; align-items: flex-end; }
.composer textarea { flex: 1; min-height: 42px; resize: vertical; }

/* misc */
.empty { color: var(--text-2); padding: 22px 18px; display: flex; gap: 14px; align-items: center; line-height: 1.5; }
.empty .icon { color: var(--text-3); flex: none; }
.empty b { color: var(--text); font-weight: 500; display: block; }
.empty .btn { margin-left: auto; }
.err { color: var(--red); padding: 10px 16px; font-family: var(--font-data); font-size: 12.5px; }

/* loading: the shape of what will appear */
.skel { display: grid; gap: 10px; padding: 16px 18px; }
.skel i { display: block; height: 12px; border-radius: 3px; background: linear-gradient(90deg, var(--raised) 0%, var(--border) 50%, var(--raised) 100%); background-size: 200% 100%; animation: shimmer 1.4s ease infinite; }
.skel i:nth-child(2) { width: 70%; } .skel i:nth-child(3) { width: 45%; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* feedback */
.toasts { position: fixed; right: 20px; bottom: 20px; display: grid; gap: 8px; z-index: 30; max-width: min(420px, calc(100vw - 40px)); }
.toast { display: flex; gap: 10px; align-items: center; padding: 10px 14px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 13px; box-shadow: 0 4px 16px rgba(0,0,0,.25); animation: rise .18s ease-out; cursor: pointer; }
.toast.ok .icon { color: var(--green); } .toast.warn .icon { color: var(--amber); } .toast.fail .icon { color: var(--red); }
.scrim { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: grid; place-items: center; z-index: 40; padding: 20px; }
.dialog { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 22px; width: min(460px, 100%); display: grid; gap: 10px; animation: rise .16s ease-out; }
.dialog h2 { margin: 0; font-size: 16px; font-weight: 600; }
.dialog p { margin: 0; color: var(--text-2); line-height: 1.55; }
.btn.danger { background: var(--danger-bg); border-color: var(--danger-bg); color: #fff; }
.btn[disabled] { opacity: .55; cursor: default; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .toast, .dialog { animation: none; } .st-running .icon { animation: none; } .skel i { animation: none; } }
.form { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px 14px; }
.form label { display: grid; gap: 4px; font-size: 12px; color: var(--text-3); }
.form label > input, .form label > select { width: 100%; box-sizing: border-box; font-size: 12.5px; }
.form .wide { grid-column: 1 / -1; }
.form label.check { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-2); align-self: end; padding-bottom: 8px; }
.form label.check > input { width: auto; flex: none; margin: 0; }
.form label > textarea { width: 100%; box-sizing: border-box; font-size: 12.5px; }
tr.on td { background: color-mix(in srgb, var(--gold) 8%, transparent); }
/* the guided flow */
.stepper { list-style: none; margin: 0; padding: 12px 18px; display: flex; gap: 6px; flex-wrap: wrap; border-bottom: 1px solid var(--border); }
.stepper a { display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px; border-radius: var(--radius); color: var(--text-3); text-decoration: none; font-size: 12.5px; font-weight: 500; }
.stepper .n { width: 20px; height: 20px; border-radius: 10px; display: grid; place-items: center; font-size: 11px; border: 1px solid var(--border); }
.stepper li.on a { color: var(--text); background: var(--raised); }
.stepper li.on .n { border-color: var(--gold); color: var(--gold); }
.stepper li.done a { color: var(--text-2); }
.stepper li.done .n { background: var(--green); border-color: var(--green); color: var(--on-amber); }
.wiz { display: grid; gap: 14px; max-width: 860px; }
.wiz h1 { margin: 0; font-size: 24px; }
.wiz p { margin: 0; line-height: 1.6; }
.wiz textarea { width: 100%; font-size: 13.5px; line-height: 1.6; resize: vertical; }
.bar { height: 4px; background: var(--raised); border-radius: 2px; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--gold); transition: width .2s; }
.review { display: grid; gap: 2px; }
.review a { display: grid; grid-template-columns: 210px 1fr; gap: 12px; padding: 6px 8px; border-radius: var(--radius); text-decoration: none; color: var(--text); font-size: 12.5px; }
.review a:hover { background: var(--raised); }
.review .k { color: var(--text-3); }
.review .v { white-space: pre-wrap; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.review a.missing .v { color: var(--red); }
@media (max-width: 700px) { .review a { grid-template-columns: 1fr; } }
.kv { display: grid; grid-template-columns: 120px 1fr; gap: 6px 16px; font-size: 12.5px; }
.kv .k { color: var(--text-3); }
.token-screen { max-width: 520px; margin: 80px auto; padding: 0 24px; }
.token-screen .mark { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; color: var(--gold); font: 700 15px var(--font-mark); letter-spacing: .14em; }
.token-screen .mark img { width: 44px; height: 44px; }
.token-screen h1 { font-size: 28px; margin: 0 0 12px; }
.token-screen p { color: var(--text-2); line-height: 1.6; }
.token-screen input { width: 100%; margin: 14px 0; font-family: var(--font-data); }
.chip { display: inline-block; padding: 1px 8px; border-radius: var(--radius); border: 1px solid var(--border); font-family: var(--font-data); font-size: 11px; color: var(--text-2); }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 1100px) { .grid3 { grid-template-columns: 1fr; } }
.ok { color: var(--green); }
.no { color: var(--red); }

/* Editions (ADR-0042): the brand an edition carries, and its editor. */
.side .mark img, .token-screen .mark img { object-fit: contain; }
.side .item.powered, .token-screen .powered { font-size: 11px; color: var(--text-3); cursor: default; }
.token-screen .tagline { color: var(--text-2); margin-top: -6px; }
.preview-bar { margin-bottom: 16px; padding: 8px 14px; font-size: 12.5px; background: color-mix(in srgb, var(--gold) 12%, transparent); border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent); border-radius: var(--radius); color: var(--text-2); }
.edition-swatch { display: inline-flex; width: 30px; height: 30px; border-radius: 7px; align-items: center; justify-content: center; overflow: hidden; flex: none; }
.edition-swatch img { width: 24px; height: 24px; object-fit: contain; background: #FFFFFF; border-radius: 4px; }
.edition-editor { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; }
@media (max-width: 900px) { .edition-editor { grid-template-columns: 1fr; } }
.label-line { font-size: 12px; color: var(--text-3); margin-bottom: 6px; }
.chips-select { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-toggle { font: 500 12px var(--font-data); padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border); background: transparent; color: var(--text-2); cursor: pointer; }
.chip-toggle.on { border-color: var(--gold); color: var(--text); background: color-mix(in srgb, var(--gold) 12%, transparent); }
.chip-toggle { transition: border-color .15s ease, background-color .15s ease, color .15s ease, transform .12s ease; }
.chip-toggle:active:not(:disabled) { transform: scale(.96); }
.ok-line { display: inline-flex; align-items: center; gap: 5px; color: var(--green); font-size: 12.5px; animation: next-step-in .4s ease both; }
.check-line { display: flex; gap: 8px; align-items: baseline; font-size: 12.5px; color: var(--text-2); padding: 3px 0; }
.check-line input { margin: 0; }
.color-field { display: flex; gap: 6px; align-items: center; }
.color-field input[type="color"] { width: 34px; height: 30px; padding: 0; border: 1px solid var(--border); border-radius: var(--radius); background: transparent; flex: none; }
.color-field input.mono { flex: 1; }
.suggestion { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; font-size: 12px; }
.suggestion .dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; border: 1px solid var(--border); }
.edition-previews { display: grid; gap: 12px; align-content: start; }
/* The previews carry their own theme: the page's tokens are the page's. */
.edition-preview { display: grid; gap: 8px; padding: 16px; border-radius: var(--radius); border: 1px solid var(--border); font-size: 12px; }
.edition-preview[data-theme="dark"] { background: #11161B; color: #EEF1F5; }
.edition-preview[data-theme="light"] { background: #FFFFFF; color: #14181D; }
.edition-preview[data-theme="dark"] .dim { color: #A9B3BF; }
.edition-preview[data-theme="light"] .dim { color: #4B5563; }
.edition-preview .mark { display: flex; align-items: center; gap: 8px; color: var(--gold); font: 700 12px var(--font-mark); letter-spacing: .12em; }
.edition-preview .mark img { width: 22px; height: 22px; object-fit: contain; }
.edition-preview .voice { font-size: 17px; }
.edition-preview a { color: var(--gold); }
.edition-preview .tabs-mock { display: flex; gap: 14px; border-bottom: 1px solid color-mix(in srgb, currentColor 15%, transparent); }
.edition-preview .tabs-mock span { padding: 4px 0; opacity: .7; }
.edition-preview .tabs-mock span.on { opacity: 1; border-bottom: 2px solid var(--gold); }
.edition-preview .powered { font-size: 10.5px; }
.btn.sm { height: 26px; padding: 0 9px; font-size: 12px; }
.asset-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.asset { display: flex; gap: 12px; align-items: flex-start; font-size: 12.5px; }
.asset .dim { font-size: 11.5px; margin: 2px 0 6px; }
.asset-thumb { width: 64px; height: 64px; flex: none; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: var(--radius); font-size: 11px; }
.asset-thumb.on-light { background: #FFFFFF; }
.asset-thumb.on-dark { background: #11161B; }
.asset-thumb img { max-width: 52px; max-height: 52px; object-fit: contain; }
.font-upload { display: grid; gap: 10px; margin-top: 10px; padding: 12px; border: 1px dashed var(--border); border-radius: var(--radius); font-size: 12.5px; }
.font-upload label { display: grid; gap: 4px; color: var(--text-3); font-size: 12px; }
a.disabled { opacity: .5; cursor: default; }
.edition-preview .btn.primary { height: 28px; font-family: var(--font-ui); }
.edition-preview { font-family: var(--font-ui); }
.edition-preview .voice { font-family: var(--font-voice); }
a.btn { text-decoration: none; }

/* Home (redesign A+) */
.h-voice { margin: 0; font: 400 30px/1.2 var(--font-voice); letter-spacing: -.005em; }
.home-top { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr); gap: 20px; align-items: start; }
.home-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.home-cards .card { background: var(--surface); border-color: var(--rule); border-radius: 10px; padding: 16px 18px; display: grid; gap: 10px; align-content: start; }
.card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.card-head h2 { margin: 0; font-size: 14px; font-weight: 600; }
.card-head b { font: 600 22px var(--font-data); color: var(--gold); }
.card-head a { font-size: 12.5px; }
.bars { width: 100%; height: 64px; }
.mini-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid var(--rule); color: var(--text); text-decoration: none; font-size: 13px; }
/* Two lines before the cut: a narrow card left one word and an ellipsis. */
.mini-row { flex-wrap: wrap; } .mini-row .mini-title { flex: 1 1 150px; }
.mini-row .mini-title { overflow: hidden; min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-clamp: 2; }
.mini-row > span:last-child, .pd-row > span:last-child { flex: none; font-size: 11px; padding: 1px 8px; border: 1px solid; border-radius: 10px; }
.rec-line b.ok { color: var(--green); } .rec-line b.failed { color: var(--red); }
.pulse { background: radial-gradient(ellipse at 50% 40%, color-mix(in srgb, var(--raised) 85%, transparent) 0%, var(--surface) 70%); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; display: grid; gap: 8px; min-width: 0; }
.pulse-head { display: flex; justify-content: space-between; align-items: baseline; }
.pulse-head h2 { margin: 0; font-size: 14px; font-weight: 600; }
.pulse-head span { font: 12px var(--font-data); color: var(--text-3); }
.pulse-map { width: 100%; height: auto; overflow: visible; }
.pulse-map .ring { fill: none; stroke: var(--rule); stroke-dasharray: 2 6; }
.pulse-map .edge { stroke: var(--border); stroke-width: 1.5; fill: none; }
.pulse-map .flow, .pulse-map .flow-slow { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 3 12; animation: flow 1.4s linear infinite; }
.pulse-map .flow-slow { animation-duration: 2.6s; }
.pulse-map .amber { stroke: var(--amber); } .pulse-map .cyan { stroke: var(--cyan); }
.pulse-map .core { fill: var(--gold); filter: drop-shadow(0 0 10px color-mix(in srgb, var(--gold) 60%, transparent)); }
.pulse-map .core-ring { fill: none; stroke: var(--gold); stroke-width: 1.5; stroke-dasharray: 8 6; opacity: .7; }
.pulse-map .spin { transform-origin: 320px 150px; animation: spin 18s linear infinite; }
.pulse-map .core-label { fill: var(--text-3); font: 11px var(--font-data); }
.pulse-map .node { cursor: pointer; }
.pulse-map .node-dot { fill: var(--raised); stroke-width: 2; }
.pulse-map .node:hover .node-dot { fill: var(--border); }
.pulse-map .node-initials { font: 700 13px var(--font-ui); }
.pulse-map .node-label { fill: var(--text); font: 600 13px var(--font-ui); }
.pulse-map .node-line { fill: var(--text-3); font: 11px var(--font-data); }
.pulse-map.dense .node-label { font-size: 12px; } .pulse-map.dense .node-line { font-size: 10.5px; } .pulse-map.dense .node-initials { font-size: 11.5px; }
.pulse-map .node.more .node-dot { stroke-dasharray: 3 4; }
.pulse-map .pulse-ring { fill: none; stroke: var(--amber); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: ping 2s ease-out infinite; }
.pulse-map .spark.gold { fill: var(--gold); } .pulse-map .spark.cyan { fill: var(--cyan); }
.pulse-map .sat { animation: spin 7s linear infinite; } .pulse-map .sat circle { fill: var(--cyan); }
.pulse-map .core-beat { fill: none; stroke: var(--gold); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
.pulse-map .core-beat.go { animation: beat 1.6s ease-out 1; }
@keyframes beat { from { transform: scale(1); opacity: .6; } to { transform: scale(3.2); opacity: 0; } }
.pulse-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--text-2); border-top: 1px solid var(--rule); padding-top: 10px; }
.pulse-legend span { display: inline-flex; align-items: center; gap: 6px; }
.pulse-legend i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.pulse-legend .lg-gold { background: var(--gold); } .pulse-legend .lg-cyan { background: var(--cyan); }
.pulse-legend .lg-sat { border: 1.5px solid var(--cyan); width: 7px; height: 7px; } .pulse-legend .lg-amber { border: 1.5px solid var(--amber); width: 9px; height: 9px; }
.recorded { background: var(--surface); border-color: var(--rule); border-radius: 10px; padding: 16px 18px; display: grid; gap: 6px; }
.rec-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 10px; align-items: baseline; padding: 7px 0; border-top: 1px solid var(--rule); color: var(--text-2); text-decoration: none; font-size: 13px; }
.rec-row:hover .rec-what { color: var(--text); }
.rec-seq, .rec-when { font: 11.5px var(--font-data); color: var(--text-3); }
.rec-what { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rec-what b { font-weight: 500; }
.rec-times { font: 11.5px var(--font-data); color: var(--text-2); border: 1px solid var(--border); border-radius: 8px; padding: 0 6px; }
.rec-enter-active { transition: opacity .45s ease, transform .45s ease; } .rec-enter-from { opacity: 0; transform: translateY(-8px); }
.rec-move { transition: transform .45s ease; }
@media (prefers-reduced-motion: reduce) { .pulse-map .sat, .pulse-map .core-beat.go, .pulse-map .flow, .pulse-map .flow-slow, .pulse-map .spin, .pulse-map .pulse-ring { animation: none; } .rec-enter-active, .rec-move { transition: none; } }
@keyframes flow { to { stroke-dashoffset: -30; } }
@keyframes ping { from { transform: scale(1); opacity: .8; } to { transform: scale(1.7); opacity: 0; } }
.pulse-chips { display: none; flex-wrap: wrap; gap: 6px; }
.chip-btn { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 16px; border: 1px solid var(--border); background: var(--canvas); color: var(--text); font-size: 12.5px; }
.chip-btn i { width: 8px; height: 8px; border-radius: 50%; }
.chip-btn span { color: var(--text-3); font: 11px var(--font-data); }
.chip-btn.on { border-color: var(--gold); }
.pulse-detail { min-height: 22px; font-size: 13px; display: grid; gap: 4px; }
.pd-row { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.inbox { display: grid; gap: 12px; min-width: 0; }
.ask-card { background: var(--surface); border: 1px solid color-mix(in srgb, var(--amber) 45%, var(--border)); border-left: 3px solid var(--amber); border-radius: 10px; padding: 14px 16px; display: grid; gap: 8px; }
.ask-meta { display: flex; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--text-3); }
.ask-meta b { color: var(--amber); font-weight: 600; }
.ask-what { font-size: 15px; font-weight: 500; overflow-wrap: anywhere; }
/* A sign-off's question, drawn (defect #20): its table and list under the title line. */
.ask-md { font-size: 13px; line-height: 1.55; color: var(--text-2); overflow-wrap: anywhere; }
.ask-md > :last-child, .decision-md > :last-child { margin-bottom: 0; }
.ask-md table { font-size: 12.5px; }
.decision-md { margin-top: 12px; font: 14px/1.6 var(--font-ui); color: var(--text-2); }
.ask-what b, .band h1 b { font-weight: 700; color: var(--text); }
.md a { color: var(--gold); }
.ask-for { font-size: 12.5px; color: var(--text-2); }
.ask-warn { font-size: 12.5px; line-height: 1.5; color: var(--text-2); overflow-wrap: anywhere; }
.ask-warn b { color: var(--amber); font-weight: 600; }
/* A note's decision: what the department's knowledge says on the same subject (ADR-0114). It rises in after the card, so the eye lands on it. */
.ask-related { font-size: 12.5px; line-height: 1.5; color: var(--text-2); border-left: 2px solid color-mix(in srgb, var(--cyan, var(--gold)) 60%, transparent); padding: 2px 0 2px 10px; animation: rise .45s ease-out .15s both; overflow-wrap: anywhere; }
.ask-related b { color: var(--text); font-weight: 600; }
.ask-related ul { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.ask-related cite { font-style: normal; font-family: var(--font-data); font-size: 11.5px; color: var(--text); margin-right: 6px; }
@media (prefers-reduced-motion: reduce) { .ask-related { animation: none; } }
.ask-code { font: 12px var(--font-data); color: var(--text-2); background: var(--canvas); border: 1px solid var(--rule); border-radius: 6px; padding: 8px 10px; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 7.5em; overflow: hidden; }
.ask-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ask-actions .ask-open { margin-left: auto; font-size: 12.5px; }
.btn.go { background: var(--green); border-color: var(--green); color: var(--on-amber); }
.calm-card { background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; padding: 16px 18px; display: grid; gap: 6px; font-size: 13px; line-height: 1.55; }
.calm-title { font: 400 19px var(--font-voice); }
@media (max-width: 1100px) { .home-top { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 700px) {
  .h-voice { font-size: 24px; }
  .home-cards { grid-template-columns: minmax(0, 1fr); }
  .pulse-map .node-label, .pulse-map .node-line { display: none; }
  .pulse-chips { display: flex; }
}
@media (prefers-reduced-motion: reduce) { .pulse-map .flow, .pulse-map .flow-slow, .pulse-map .spin, .pulse-map .pulse-ring { animation: none; } }

/* New work */
.nw-scrim { position: fixed; inset: 0; z-index: 60; background: rgba(5, 8, 12, .6); display: grid; place-items: start center; padding: 8vh 16px 16px; overflow-y: auto; }
.nw { width: min(640px, 100%); background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 24px 60px rgba(0,0,0,.45); padding: 18px 20px; display: grid; gap: 16px; }
.nw-head { display: flex; justify-content: space-between; align-items: center; }
.nw-head h2 { margin: 0; font: 400 24px var(--font-voice); }
.nw-x { background: none; border: 0; color: var(--text-2); font-size: 24px; line-height: 1; padding: 4px 8px; }
.nw-step { display: grid; gap: 8px; }
.nw-q { font-size: 13px; font-weight: 600; color: var(--text-2); }
.nw-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.nw-choice { text-align: left; display: grid; gap: 3px; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--canvas); color: var(--text); }
.nw-choice b { font-weight: 600; font-size: 13.5px; }
.nw-choice span { font-size: 12px; color: var(--text-3); }
.nw-choice:hover { border-color: var(--text-3); }
.nw-choice.on { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.nw-choice.quiet { border-style: dashed; }
.nw-field { display: grid; gap: 6px; font-size: 13px; color: var(--text-2); }
.nw-field textarea, .nw-field input { width: 100%; box-sizing: border-box; font: inherit; color: var(--text); background: var(--canvas); border: 1px solid var(--border); border-radius: 6px; padding: 9px 10px; }
.nw-foot { display: flex; justify-content: flex-end; gap: 8px; }
/* Let Kyrvis choose, and why a kind of work was chosen: they arrive with a
   rise, and the router's choice shimmers gold while it is offered. */
.nw-choice.auto { border-color: color-mix(in srgb, var(--gold) 55%, var(--border)); background: linear-gradient(110deg, var(--canvas) 30%, color-mix(in srgb, var(--gold) 12%, var(--canvas)) 50%, var(--canvas) 70%) 0 0 / 250% 100%; animation: shimmer 5s linear infinite; }
.nw-choice.auto b::before { content: "✦ "; color: var(--gold); }
.nw-why, .nw-proposal { border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent); background: color-mix(in srgb, var(--gold) 8%, transparent); border-radius: 8px; padding: 10px 14px; font-size: 13px; line-height: 1.5; display: grid; gap: 6px; animation: rise .28s ease-out; }
.nw-proposal .nw-ask { border-left: 2px solid var(--gold); padding-left: 8px; }
.nw-proposal-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
@media (prefers-reduced-motion: reduce) { .nw-choice.auto, .nw-why, .nw-proposal { animation: none; } }
@media (max-width: 700px) { .nw-scrim { padding: 0; place-items: stretch; } .nw { border-radius: 0; min-height: 100vh; align-content: start; } }

/* Work list (redesign A+, step 2) */
.wl { display: grid; gap: 8px; }
.wl-bar { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin-bottom: 4px; }
.wl-views { display: flex; flex-wrap: wrap; gap: 6px; }
.wl-views button { border: 1px solid var(--border); background: var(--surface); color: var(--text-2); border-radius: 16px; padding: 6px 12px; font: 500 13px var(--font-ui); }
.wl-views button span { font: 11px var(--font-data); color: var(--text-3); margin-left: 4px; }
.wl-views button.on { color: var(--text); border-color: var(--gold); background: color-mix(in srgb, var(--gold) 10%, var(--surface)); }
.wl-views button.warn span { color: var(--amber); font-weight: 700; }
.wl-views button, .wl-mine { transition: border-color .15s ease, background-color .15s ease, color .15s ease; }
.wl-narrow { display: flex; gap: 6px; align-items: center; }
.wl-mine { border: 1px dashed var(--border); background: var(--surface); color: var(--text-2); border-radius: 16px; padding: 6px 12px; font: 500 13px var(--font-ui); }
.wl-mine span { font: 11px var(--font-data); color: var(--text-3); margin-left: 4px; }
.wl-mine.on { color: var(--text); border-style: solid; border-color: var(--cyan); background: color-mix(in srgb, var(--cyan) 10%, var(--surface)); }
.wl-narrow select { height: 30px; border-radius: 16px; padding: 0 10px; }
.wl-slots { font: 12px var(--font-data); color: var(--text-3); }
.wl-search { margin-left: auto; display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 0 10px; min-width: min(320px, 100%); color: var(--text-3); }
.wl-search input { flex: 1; min-width: 0; background: transparent; border: 0; color: var(--text); font: inherit; padding: 8px 0; outline: none; }
.wl-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 190px; gap: 16px; align-items: center; padding: 12px 16px; background: var(--surface); border: 1px solid var(--rule); border-left: 3px solid var(--border); border-radius: 8px; color: var(--text); text-decoration: none; }
.wl-row:hover { border-color: var(--border); background: color-mix(in srgb, var(--raised) 60%, var(--surface)); }
.wl-row.r-waiting { border-left-color: var(--amber); } .wl-row.r-running { border-left-color: var(--cyan); } .wl-row.r-done { border-left-color: var(--green); } .wl-row.r-failed, .wl-row.r-blocked { border-left-color: var(--red); }
.wl-main { display: grid; gap: 3px; min-width: 0; }
.wl-main b { font-weight: 600; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wl-sub { font-size: 12.5px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wl-prog { display: flex; gap: 3px; }
.wl-prog i { width: 18px; height: 6px; border-radius: 3px; background: var(--border); }
.wl-prog i.s-done { background: var(--green); } .wl-prog i.s-skipped { background: color-mix(in srgb, var(--green) 35%, var(--border)); }
.wl-prog i.s-suspended { background: var(--amber); } .wl-prog i.s-running { background: var(--cyan); } .wl-prog i.s-failed, .wl-prog i.s-canceled { background: var(--red); }
.wl-state { display: grid; justify-items: end; gap: 3px; font-size: 12.5px; text-align: right; }
.wl-state > span:first-child { border: 0 !important; background: none !important; font-weight: 500; }
.wl-paused > div { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid color-mix(in srgb, var(--red) 40%, var(--border)); border-radius: 8px; color: var(--text-2); font-size: 13px; }
details.fold > summary { padding: 12px 18px; font-weight: 600; font-size: 13px; cursor: pointer; display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
details.fold > summary span { font-weight: 400; color: var(--text-3); font-size: 12.5px; }
details.fold[open] > summary { border-bottom: 1px solid var(--border); }
@media (max-width: 1100px) { .wl-row { grid-template-columns: minmax(0, 1fr) 170px; } .wl-prog { grid-column: 1; grid-row: 2; } .wl-state { grid-row: 1 / 3; grid-column: 2; } }
@media (max-width: 700px) {
  .wl-search { margin-left: 0; width: 100%; }
  .wl-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .wl-main b, .wl-sub { white-space: normal; }
  .wl-state { grid-row: auto; grid-column: auto; justify-items: start; text-align: left; display: flex; gap: 10px; }
}

/* A piece of work */
.crumbs { font-size: 13px; color: var(--text-3); margin-bottom: -8px; }
.crumbs a { color: var(--text-2); }
.wi-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 24px; flex-wrap: wrap; }
.wi-what { display: grid; gap: 8px; min-width: 0; }
.wi-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--text-2); align-items: center; }
.wi-state { font-weight: 600; padding: 2px 10px; border-radius: 12px; border: 1px solid; }
.wi-stats { display: flex; gap: 20px; font-size: 12.5px; color: var(--text-3); flex-wrap: wrap; }
.wi-stats b { font: 600 18px var(--font-data); color: var(--text); margin-right: 4px; }
.wi-why { padding: 10px 14px; border-radius: 8px; border: 1px solid var(--border); color: var(--text-2); font-size: 13px; }
.wi-why.bad { border-color: color-mix(in srgb, var(--red) 45%, var(--border)); color: var(--text); }
.wi-pipe { background: radial-gradient(ellipse at 50% 30%, color-mix(in srgb, var(--raised) 80%, transparent) 0%, var(--surface) 75%); border: 1px solid var(--border); border-radius: 12px; padding: 14px 18px; display: grid; gap: 12px; }
.pmap { width: 100%; height: auto; overflow: visible; }
.pmap .pm-edge { stroke: var(--border); stroke-width: 3; fill: none; }
.pmap .pm-edge.done { stroke: var(--green); }
.pmap .pm-flow { fill: none; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 3 12; animation: flow 1.4s linear infinite; }
.pmap .pm-flow.amber { stroke: var(--amber); } .pmap .pm-flow.cyan { stroke: var(--cyan); }
.pmap .detour { fill: none; stroke: var(--border); stroke-width: 2; stroke-dasharray: 5 6; }
.pmap .pm-cond { fill: var(--text-3); font: 13.5px var(--font-ui); }
.pmap .pm-node { cursor: pointer; outline: none; }
.pmap .pm-dot { fill: var(--canvas); stroke: var(--border); stroke-width: 2; }
.pmap .pm-node.s-done .pm-dot { fill: var(--green); stroke: var(--green); }
.pmap .pm-node.s-skipped .pm-dot { stroke-dasharray: 3 3; }
.pmap .pm-node.s-suspended .pm-dot { fill: var(--raised); stroke: var(--amber); stroke-width: 3; }
.pmap .pm-node.s-running .pm-dot { fill: var(--raised); stroke: var(--cyan); stroke-width: 3; }
.pmap .pm-node.s-failed .pm-dot, .pmap .pm-node.s-canceled .pm-dot { fill: var(--raised); stroke: var(--red); stroke-width: 3; }
.pmap .pm-node.on .pm-dot, .pmap .pm-node:focus-visible .pm-dot { filter: drop-shadow(0 0 8px color-mix(in srgb, var(--gold) 70%, transparent)); }
.pmap .pm-ping { fill: none; stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: ping 2.2s ease-out infinite; }
.pmap .s-suspended .pm-ping { stroke: var(--amber); } .pmap .s-running .pm-ping { stroke: var(--cyan); }
.pmap .pm-mark { font: 700 16px var(--font-ui); fill: var(--on-amber); pointer-events: none; }
.pmap .s-suspended .pm-mark { fill: var(--amber); } .pmap .s-failed .pm-mark, .pmap .s-canceled .pm-mark { fill: var(--red); }
.pmap .pm-title { fill: var(--text); font: 600 16px var(--font-ui); }
.pmap .s-pending .pm-title { fill: var(--text-2); font-weight: 500; }
.pmap .pm-title.side { font-size: 14px; font-weight: 500; fill: var(--text-2); }
.pmap .pm-sub { fill: var(--text-3); font: 13.5px var(--font-ui); }
.pmap .s-suspended .pm-sub { fill: var(--amber); } .pmap .s-running .pm-sub { fill: var(--cyan); } .pmap .s-failed .pm-sub { fill: var(--red); }
/* A parallel step's branches (AT-213): each a small dot with its verdict, drawn in turn as the map appears. */
.pmap .pm-branch { animation: pm-branch-in 420ms cubic-bezier(.2, .8, .2, 1) both; }
.pmap .pm-branch.s-done .pm-dot { fill: var(--green); stroke: var(--green); }
.pmap .pm-branch.s-running .pm-dot { fill: var(--raised); stroke: var(--cyan); stroke-width: 3; }
.pmap .pm-branch.s-suspended .pm-dot { fill: var(--raised); stroke: var(--amber); stroke-width: 3; }
.pmap .pm-branch.s-failed .pm-dot, .pmap .pm-branch.s-canceled .pm-dot { fill: var(--raised); stroke: var(--red); stroke-width: 3; }
.pmap .pm-branch.s-running .pm-ping { stroke: var(--cyan); } .pmap .pm-branch.s-suspended .pm-ping { stroke: var(--amber); }
.pmap .pm-branch.s-failed .pm-mark { fill: var(--red); }
.pmap .pm-branch.s-pending .pm-dot, .pmap .pm-branch.s-skipped .pm-dot { fill: var(--canvas); stroke: var(--border); stroke-width: 2; }
.pmap .pm-branch.s-skipped .pm-dot { stroke-dasharray: 3 3; }
.pmap .pm-mark.sm { font-size: 12px; }
.pmap .pm-btext { fill: var(--text-2); font: 12.5px var(--font-ui); }
.pmap .pm-btitle { fill: var(--text); font-weight: 600; }
.pmap .pm-branch.s-failed .pm-btext { fill: var(--red); }
@keyframes pm-branch-in { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .pmap .pm-branch { animation: none; } }
.wi-branches { display: grid; gap: 8px; }
.wi-branch { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; animation: pm-branch-in 320ms ease-out both; }
.wi-branch.s-failed { border-color: color-mix(in srgb, var(--red) 45%, var(--border)); }
.wi-branch .wi-quote { flex-basis: 100%; margin: 0; }
.wi-tries summary { cursor: pointer; font-weight: 600; font-size: 13px; }
.wi-tries ol { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 6px; font-size: 13px; }
.wi-tries ul { margin: 4px 0 0; padding-left: 16px; color: var(--text-2); }
.wi-tries li.s-failed > b { color: var(--red); }
.wi-steps { display: flex; flex-wrap: wrap; gap: 8px; }
.wi-step { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: 13px var(--font-ui); }
.wi-step i { width: 9px; height: 9px; border-radius: 50%; background: var(--border); flex: none; }
.wi-step.s-done i { background: var(--green); } .wi-step.s-suspended i { background: var(--amber); } .wi-step.s-running i { background: var(--cyan); } .wi-step.s-failed i, .wi-step.s-canceled i { background: var(--red); } .wi-step.s-skipped i { background: transparent; border: 1px dashed var(--text-3); }
.wi-step b { font-weight: 600; } .wi-step span { color: var(--text-3); font-size: 12px; }
.wi-step:hover { border-color: var(--text-3); } .wi-step.on { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.wi-body { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(260px, 1fr); gap: 20px; align-items: start; }
.wi-panel { background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; padding: 18px 20px; display: grid; gap: 12px; min-width: 0; align-content: start; }
.wi-panel h2 { margin: 0; font: 400 24px var(--font-voice); display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.wi-panel p { margin: 0; line-height: 1.55; }
.wi-pmeta { font: 12px var(--font-data); color: var(--text-3); }
.wi-quote { border-left: 3px solid var(--gold); padding: 4px 12px; color: var(--text-2); white-space: pre-wrap; }
.wi-verdict { font-weight: 500; } .wi-verdict.ok { color: var(--green); } .wi-verdict.failed { color: var(--red); }
.wi-outputs { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; margin: 0; font-size: 13px; }
.wi-outputs dt { color: var(--text-3); } .wi-outputs dd { margin: 0; font-family: var(--font-data); font-size: 12.5px; overflow-wrap: anywhere; }
.wi-answer { margin: 0; background: var(--canvas); border: 1px solid var(--rule); border-radius: 8px; padding: 12px 14px; font: 12.5px/1.55 var(--font-data); color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 420px; overflow: auto; }
.wi-files { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; } .wi-files b { font-weight: 600; margin-right: 4px; }
.wi-files code { font: 12px var(--font-data); background: var(--canvas); border: 1px solid var(--rule); border-radius: 4px; padding: 1px 6px; }
.wi-error { font: 12.5px var(--font-data); }
.wi-link { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; }
.wi-side { display: grid; gap: 14px; min-width: 0; }
.wi-side .card { background: var(--surface); border-color: var(--rule); border-radius: 10px; padding: 14px 16px; display: grid; gap: 8px; }
.wi-side .card h2 { margin: 0; font-size: 13px; font-weight: 600; }
.wi-side .card p { margin: 0; font-size: 13px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.wi-input { display: grid; gap: 2px; } .wi-input span { font-size: 12px; }
.wi-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
@media (max-width: 1100px) { .wi-body { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 700px) {
  .pmap { display: none; }
  .wi-pipe { padding: 12px 14px; }
  .wi-steps { flex-direction: column; gap: 0; }
  .wi-step { border: 0; border-left: 2px solid var(--border); border-radius: 0; margin-left: 4px; padding: 9px 12px 9px 14px; background: none; position: relative; }
  .wi-step i { position: absolute; left: -6px; width: 10px; height: 10px; }
  .wi-step.on { box-shadow: none; background: color-mix(in srgb, var(--gold) 8%, transparent); border-left-color: var(--gold); }
  .wi-step span { margin-left: auto; }
  .wi-panel h2 { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) { .pmap .pm-flow, .pmap .pm-ping { animation: none; } }
.wi-decide .band .voice { font-size: 20px; line-height: 1.4; }
.wi-answer.md { white-space: normal; font: 14px/1.6 var(--font-ui); }
.md h4 { margin: 14px 0 6px; font-size: 14px; font-weight: 600; } .md h4:first-child { margin-top: 0; }
.md p { margin: 0 0 10px; } .md ul, .md ol { margin: 0 0 10px; padding-left: 22px; } .md li { margin: 2px 0; }
.md code { font: 12.5px var(--font-data); background: var(--raised); border-radius: 3px; padding: 0 4px; }
.md pre { font: 12.5px/1.5 var(--font-data); background: var(--raised); border-radius: 6px; padding: 10px 12px; white-space: pre-wrap; margin: 0 0 10px; }
.md blockquote { margin: 0 0 10px; border-left: 3px solid var(--border); padding-left: 10px; color: var(--text-2); }
.ask-direct > summary { cursor: pointer; color: var(--text-2); font-size: 13px; padding: 4px 0 10px; }
@media (max-width: 700px) { .wi-decide .band .voice { font-size: 17px; } }
.q-row { grid-template-columns: minmax(0, 1fr) 190px; }
@media (max-width: 1100px) { .q-row .wl-state { grid-row: auto; } }

/* Departments (redesign A+, step 3) */
.dept-badge { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; font: 700 14px var(--font-ui); color: color-mix(in srgb, var(--dc, var(--gold)) var(--ink-mix), #000); border: 2px solid var(--dc, var(--gold)); background: color-mix(in srgb, var(--dc, var(--gold)) 12%, var(--canvas)); }
.dept-badge.big { width: 56px; height: 56px; font-size: 18px; box-shadow: 0 0 24px color-mix(in srgb, var(--dc, var(--gold)) 30%, transparent); }
.dl-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.dl-lead { margin: -8px 0 0; font-size: 13.5px; max-width: 70ch; }
.dl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.dl-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 14px; align-items: center; padding: 16px 18px; border-radius: 12px; background: var(--surface); border: 1px solid var(--rule); border-top: 3px solid var(--dc); color: var(--text); text-decoration: none; }
.dl-card:hover { border-color: var(--border); border-top-color: var(--dc); background: color-mix(in srgb, var(--raised) 50%, var(--surface)); }
.dl-what { display: grid; gap: 2px; min-width: 0; } .dl-what b { font-size: 16px; font-weight: 600; } .dl-what span { font-size: 12.5px; color: var(--text-3); }
.dl-facts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--text-2); }
.dl-busy { grid-column: 1 / -1; font: 12px var(--font-data); color: var(--text-3); padding-top: 8px; border-top: 1px solid var(--rule); }
.dp-head { display: flex; gap: 16px; align-items: center; }
.dp-head h1 { margin: 0; }
.dp-sub { font-size: 13px; margin-top: 4px; }
.dp-over { display: grid; gap: 20px; }
.dp-ask { background: radial-gradient(ellipse at 20% 0%, color-mix(in srgb, var(--raised) 85%, transparent) 0%, var(--surface) 70%); border: 1px solid var(--border); border-radius: 12px; padding: 18px 20px; display: grid; gap: 14px; }
.dp-ask h2 { margin: 0; font: 400 24px var(--font-voice); }
.dp-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.dp-card { background: var(--surface); border-color: var(--rule); border-radius: 10px; padding: 16px 18px; display: grid; gap: 8px; align-content: start; }
.dp-agent { display: grid; gap: 2px; padding: 8px 0; border-top: 1px solid var(--rule); font-size: 13px; }
.dp-agent b { font-weight: 600; } .dp-agent span { color: var(--text-2); } .dp-agent span.dim { color: var(--text-3); font-size: 12px; }
.dp-base { display: grid; gap: 3px; padding: 8px 0; border-top: 1px solid var(--rule); color: var(--text); text-decoration: none; font-size: 13px; }
.dp-base b { font-weight: 600; } .dp-base span { color: var(--text-2); } .dp-base span.dim { color: var(--text-3); font-size: 12px; }
.dp-meter { display: block; height: 5px; border-radius: 3px; background: var(--border); overflow: hidden; margin-top: 3px; }
.dp-meter i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--green)); }
.dp-rules { margin: 0; font-size: 13px; line-height: 1.55; color: var(--text-2); }
.dp-links { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; }
.mini-title .dim { font-size: 12px; }
@media (max-width: 1100px) { .dp-cols { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 700px) { .tabbar { overflow-x: auto; scrollbar-width: none; } .tabbar a { white-space: nowrap; } .dp-ask { padding: 14px; } }
.dp-card, .home-cards .card { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 700px) { .mini-row .mini-title { white-space: normal; } }

/* Help and Ask Kyrvis (redesign A+, step 4) */
.help { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 24px; align-items: start; }
.help-toc { position: sticky; top: 16px; max-height: calc(100vh - 100px); overflow-y: auto; display: grid; gap: 16px; padding-right: 6px; }
.toc-name { font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); padding: 0 8px 4px; }
.toc-title { display: flex; gap: 6px; align-items: center; width: 100%; text-align: left; background: none; border: 0; color: var(--text); font: 600 13.5px var(--font-ui); padding: 6px 8px; border-radius: 6px; }
.toc-title:hover { background: var(--raised); }
.toc-title .icon { transition: transform .15s; } .toc-title .icon.turned { transform: rotate(90deg); }
.toc-chapters { display: grid; padding: 2px 0 6px 18px; }
.toc-chapters a { padding: 5px 8px; border-radius: 6px; color: var(--text-2); text-decoration: none; font-size: 13px; line-height: 1.35; }
.toc-chapters a:hover { background: var(--raised); color: var(--text); }
.toc-chapters a.on { background: var(--raised); color: var(--text); box-shadow: inset 2px 0 0 var(--gold); }
.help-main { display: grid; gap: 22px; min-width: 0; }
.ask-k { background: radial-gradient(ellipse at 30% 0%, color-mix(in srgb, var(--raised) 90%, transparent) 0%, var(--surface) 70%); border: 1px solid var(--border); border-radius: 12px; padding: 22px 24px; display: grid; gap: 14px; }
.ask-k h1 { margin: 0; }
.ask-box { display: flex; align-items: center; gap: 10px; background: var(--canvas); border: 1px solid var(--border); border-radius: 10px; padding: 6px 6px 6px 14px; color: var(--text-3); }
.ask-box:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 18%, transparent); }
.ask-box input { flex: 1; min-width: 0; background: transparent; border: 0; color: var(--text); font: inherit; font-size: 15px; outline: none; padding: 6px 0; }
.ask-samples { display: flex; flex-wrap: wrap; gap: 8px; }
.q-chip { background: var(--canvas); border: 1px solid var(--border); color: var(--text); border-radius: 16px; padding: 6px 12px; font: 13px var(--font-ui); }
.q-chip:hover { border-color: var(--gold); }
.ask-scan { position: relative; overflow: hidden; border: 1px solid var(--rule); border-radius: 10px; padding: 16px 18px; color: var(--text-2); font-size: 13px; background: var(--canvas); }
.ask-scan i { position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--gold) 18%, transparent) 50%, transparent 100%); width: 40%; animation: scan 1.4s ease-in-out infinite; }
.ask-scan span { position: relative; }
@keyframes scan { from { transform: translateX(-100%); } to { transform: translateX(260%); } }
.ask-answer { background: var(--canvas); border: 1px solid var(--rule); border-radius: 10px; padding: 16px 18px; display: grid; gap: 14px; }
.ans-text { font-size: 15px; line-height: 1.65; }
.ans-note { margin: 0; color: var(--text-2); }
.cite { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; margin: 0 1px; border-radius: 9px; border: 1px solid color-mix(in srgb, var(--gold) 60%, var(--border)); background: color-mix(in srgb, var(--gold) 12%, transparent); color: var(--gold); font: 600 11px var(--font-data); vertical-align: 2px; cursor: pointer; }
.cite:hover { background: var(--gold); color: var(--on-amber); }
.ans-sources { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.src { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; padding: 10px 12px; border: 1px solid var(--rule); border-radius: 8px; color: var(--text); text-decoration: none; font-size: 12.5px; opacity: .75; }
.src.used { opacity: 1; border-color: var(--border); }
.src.on { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); opacity: 1; }
.src b { grid-row: 1 / 3; font: 600 12px var(--font-data); color: var(--gold); border: 1px solid var(--border); border-radius: 9px; min-width: 18px; height: 18px; display: grid; place-items: center; }
.src-where { font-weight: 600; } .src-text { color: var(--text-3); line-height: 1.45; overflow-wrap: anywhere; }
.ans-foot { font-size: 12px; }
.help-read { background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; padding: 20px 24px; display: grid; gap: 10px; }
.help-read h2 { margin: 0 0 6px; font-size: 26px; }
.help-read h3 { margin: 12px 0 0; font-size: 15px; font-weight: 600; }
.read-p { font-size: 14.5px; line-height: 1.65; color: var(--text); border-radius: 6px; }
.read-p.hit { background: color-mix(in srgb, var(--gold) 10%, transparent); box-shadow: -10px 0 0 color-mix(in srgb, var(--gold) 10%, transparent), inset 3px 0 0 var(--gold); padding-left: 10px; }
.read-p pre { overflow-x: auto; white-space: pre; }
.flow-card { background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; padding: 18px 20px; display: grid; gap: 10px; }
.flow-card h2 { margin: 0; font-size: 15px; font-weight: 600; } .flow-card p { margin: 0; font-size: 13px; }
.flow-svg { width: 100%; height: auto; }
.flow-svg .f-line { stroke: var(--border); stroke-width: 2; fill: none; }
.flow-svg .f-flow { stroke: var(--gold); stroke-width: 2.5; fill: none; stroke-linecap: round; stroke-dasharray: 3 12; animation: flow 1.6s linear infinite; }
.flow-svg .f-box rect { fill: var(--raised); stroke: var(--border); }
.flow-svg .f-t { fill: var(--text); font: 600 13px var(--font-ui); text-anchor: middle; }
.flow-svg .f-s { fill: var(--text-3); font: 11px var(--font-ui); text-anchor: middle; }
.flow-svg .f-ask { stroke: var(--amber); stroke-width: 1.5; stroke-dasharray: 4 4; fill: none; }
.flow-svg .f-asktext { fill: var(--amber); font: 12px var(--font-ui); }
@media (max-width: 1100px) { .help { grid-template-columns: minmax(0, 1fr); } .help-toc { position: static; max-height: none; order: 2; } }
@media (max-width: 700px) { .ask-k { padding: 16px; } .help-read { padding: 16px; } .ask-box input { font-size: 16px; } }
@media (prefers-reduced-motion: reduce) { .ask-scan i, .flow-svg .f-flow { animation: none; } .toc-title .icon { transition: none; } }
@media (max-width: 700px) { .flow-svg { display: none; } }

/* Settings, grouped (redesign A+, step 5) */
.st-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.st-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px 14px; padding: 18px; border-radius: 12px; background: var(--surface); border: 1px solid var(--rule); align-content: start; }
.st-icon { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; color: var(--gold); background: color-mix(in srgb, var(--gold) 10%, var(--canvas)); border: 1px solid color-mix(in srgb, var(--gold) 30%, var(--border)); }
.st-what h2 { margin: 0 0 4px; font-size: 15.5px; font-weight: 600; }
.st-what p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-2); }
.st-now { margin-top: 8px; font: 12px var(--font-data); color: var(--text-3); }
.st-links { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; padding-top: 10px; border-top: 1px solid var(--rule); }
.st-links a { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: 6px; border: 1px solid var(--border); color: var(--text); text-decoration: none; font-size: 13px; background: var(--canvas); }
.st-links a:hover { border-color: var(--gold); }
.st-page { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 22px; align-items: start; }
.st-page.solo { grid-template-columns: minmax(0, 1fr); }
.st-nav { position: sticky; top: 16px; display: grid; gap: 12px; }
.st-home { font-size: 13px; color: var(--text-2); padding: 0 8px; }
.st-group { display: grid; }
.st-group > span { font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); padding: 0 8px 4px; }
.st-group a { padding: 6px 8px; border-radius: 6px; color: var(--text-2); text-decoration: none; font-size: 13.5px; }
.st-group a:hover { background: var(--raised); color: var(--text); }
.st-group a.on { background: var(--raised); color: var(--text); box-shadow: inset 2px 0 0 var(--gold); }
.st-body { display: grid; gap: 20px; min-width: 0; }
@media (max-width: 1100px) {
  .st-page { grid-template-columns: minmax(0, 1fr); }
  .st-nav { position: static; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
  .st-home, .st-group > span { display: none; }
  .st-group { display: flex; gap: 6px; }
  .st-group a { white-space: nowrap; border: 1px solid var(--border); background: var(--surface); }
  .st-group a.on { box-shadow: none; border-color: var(--gold); }
}
.st-group.solo > span { display: none; }
.st-group a .st-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-left: 8px; vertical-align: 1px; }
.st-dot.attention { background: var(--amber); } .st-dot.ok { background: var(--green); } .st-dot.optional, .st-dot.off { background: var(--text-3); opacity: .6; }

/* Settings: the setup checklist */
.stc-head { display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.stc-head h1 { margin: 0; }
.stc-head p { margin: 4px 0 0; color: var(--text-2); font-size: 13.5px; }
.stc-progress { display: grid; gap: 6px; min-width: 240px; font-size: 12.5px; color: var(--text-2); text-align: right; }
.stc-bar { height: 6px; border-radius: 3px; background: var(--raised); overflow: hidden; display: flex; gap: 2px; }
.stc-bar i { flex: 1; background: var(--raised); } .stc-bar i.ok { background: var(--green); } .stc-bar i.attention { background: var(--amber); }
.stc-next { color: var(--text); text-decoration: none; display: flex; gap: 14px; align-items: center; padding: 14px 18px; margin-bottom: 18px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--amber) 40%, var(--border)); background: color-mix(in srgb, var(--amber) 7%, var(--surface)); }
.stc-next .icon { color: var(--amber); flex: none; }
.stc-next.stc-fail { border-color: color-mix(in srgb, var(--red) 45%, var(--border)); background: color-mix(in srgb, var(--red) 8%, var(--surface)); } .stc-next.stc-fail .icon { color: var(--red); }
.stc-next div { flex: 1; font-size: 13.5px; line-height: 1.5; } .stc-next b { display: block; font-weight: 600; }
.stc-group { margin-bottom: 18px; }
.stc-group > h2 { margin: 0 0 8px; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); font-weight: 500; display: flex; align-items: center; gap: 8px; }
.stc-list { border: 1px solid var(--rule); border-radius: 12px; background: var(--surface); overflow: hidden; }
.stc-item { display: grid; grid-template-columns: 28px minmax(160px, 220px) minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 13px 18px; color: var(--text); text-decoration: none; border-top: 1px solid var(--rule); }
.stc-item:first-child { border-top: 0; }
.stc-item:hover { background: var(--raised); }
.stc-mark { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--text-3); color: var(--text-3); }
.stc-mark.ok { border-color: var(--green); background: color-mix(in srgb, var(--green) 15%, transparent); color: var(--green); }
.stc-mark.attention { border-color: var(--amber); background: color-mix(in srgb, var(--amber) 15%, transparent); color: var(--amber); }
.stc-mark.optional, .stc-mark.off { border-style: dashed; }
.stc-name b { display: block; font-weight: 600; font-size: 14px; } .stc-name span { font-size: 12.5px; color: var(--text-3); }
.stc-now { font-size: 13px; color: var(--text-2); line-height: 1.45; }
.stc-now.attention { color: var(--text); }
.stc-now i { margin-left: 6px; }
.stc-go { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--text-3); white-space: nowrap; }
.stc-item:hover .stc-go { color: var(--gold); }
@media (max-width: 760px) {
  .stc-item { grid-template-columns: 28px minmax(0, 1fr) auto; }
  .stc-now { grid-column: 2 / -1; grid-row: 2; }
}

/* Settings: a page's parts (setting.js) */
.sth { display: flex; justify-content: space-between; align-items: start; gap: 16px; flex-wrap: wrap; padding-bottom: 4px; }
.sth h1 { margin: 0; font-size: 22px; font-weight: 600; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sth p { margin: 6px 0 0; max-width: 72ch; color: var(--text-2); font-size: 13.5px; line-height: 1.55; }
.sth-help { margin-left: 4px; white-space: nowrap; }
.sth-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.sth-state { display: inline-flex; align-items: center; gap: 5px; font: 500 12px var(--font-ui, inherit); padding: 3px 10px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-2); }
.sth-state.ok { color: var(--green); border-color: color-mix(in srgb, var(--green) 35%, transparent); background: color-mix(in srgb, var(--green) 10%, transparent); }
.sth-state.attention { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 35%, transparent); background: color-mix(in srgb, var(--amber) 10%, transparent); }
.sts { border: 1px solid var(--rule); border-radius: 12px; background: var(--surface); min-width: 0; }
.sts-head { display: flex; justify-content: space-between; align-items: start; gap: 12px; padding: 16px 20px 14px; border-bottom: 1px solid var(--rule); }
.sts-head h2 { margin: 0; font-size: 15px; font-weight: 600; }
.sts-head p { margin: 3px 0 0; font-size: 13px; color: var(--text-2); line-height: 1.5; max-width: 80ch; }
.sts-aside { display: flex; gap: 8px; align-items: center; flex: none; }
.sts-body > .actions, .sts-body > .sthow, .sts-body > .ste, .sts-body > .note { padding: 14px 20px; }
.sts-body > .actions { border-top: 1px solid var(--rule); }
.str { display: grid; grid-template-columns: minmax(200px, 34%) minmax(0, 1fr); gap: 8px 28px; padding: 16px 20px; border-top: 1px solid var(--rule); align-items: start; }
.sts-body > .str:first-child { border-top: 0; }
.str.wide { grid-template-columns: minmax(0, 1fr); }
.str-label { font-size: 13.5px; font-weight: 600; color: var(--text); }
.str-hint { margin-top: 3px; font-size: 12.5px; line-height: 1.5; color: var(--text-2); }
.str-more { border: 0; background: none; padding: 0; color: var(--gold); font-size: 12px; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.str-detail { margin: 8px 0 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 10px; font-size: 12px; padding: 8px 10px; border-radius: 6px; background: var(--canvas); border: 1px solid var(--rule); }
.str-detail dt { color: var(--text-3); } .str-detail dd { margin: 0; color: var(--text-2); line-height: 1.45; overflow-wrap: anywhere; }
.str-control { min-width: 0; display: grid; gap: 8px; align-content: start; }
.str-control > input, .str-control > select, .str-control > textarea { width: 100%; box-sizing: border-box; font-size: 13px; }
.str-control > .inline { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.str-control > .inline > input { flex: 1; min-width: 120px; }
.str-control .unit { font-size: 12.5px; color: var(--text-3); }
.str-value { font-size: 13px; color: var(--text); line-height: 1.5; padding-top: 2px; }
.str-value .mono, .str-control .mono-v { font: 12.5px var(--font-data); user-select: all; overflow-wrap: anywhere; }
@media (max-width: 760px) { .str { grid-template-columns: minmax(0, 1fr); } }
.sw { display: inline-flex; align-items: center; gap: 10px; border: 0; background: none; padding: 2px 0; color: var(--text-2); font-size: 13px; cursor: pointer; justify-self: start; }
.sw i { width: 34px; height: 20px; border-radius: 10px; background: var(--raised); border: 1px solid var(--border); position: relative; transition: background .15s ease; flex: none; }
.sw i::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--text-3); transition: transform .15s ease, background .15s ease; }
.sw.on i { background: color-mix(in srgb, var(--green) 30%, var(--raised)); border-color: var(--green); }
.sw.on i::after { transform: translateX(14px); background: var(--green); }
.sw.on span { color: var(--text); }
.sw[disabled] { opacity: .5; cursor: default; }
.sthow { border-top: 1px solid var(--rule); }
.sthow summary { cursor: pointer; font-size: 13px; color: var(--text-2); list-style: none; display: flex; align-items: center; gap: 6px; }
.sthow summary::before { content: '▸'; color: var(--text-3); font-size: 11px; transition: transform .15s ease; }
.sthow[open] summary::before { transform: rotate(90deg); }
.sthow summary::-webkit-details-marker { display: none; }
.sthow-body { margin-top: 10px; font-size: 13px; line-height: 1.6; color: var(--text-2); max-width: 90ch; }
.sthow-body ul, .sthow-body ol { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.sthow-body p { margin: 0 0 6px; }
.ste { display: flex; gap: 16px; align-items: center; padding: 22px 20px; color: var(--text-2); }
.ste > .icon { color: var(--text-3); flex: none; }
.ste b { color: var(--text); font-weight: 600; font-size: 14px; } .ste p { margin: 3px 0 0; font-size: 13px; line-height: 1.5; }
.ste-act { margin-left: auto; flex: none; }
.st-list { display: grid; }
.st-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; align-items: center; padding: 14px 20px; border-top: 1px solid var(--rule); }
.st-item:first-child { border-top: 0; }
.st-item-main b { font-weight: 600; font-size: 13.5px; } .st-item-main .dim { font-size: 12.5px; }
.st-item-acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: end; }

/* Settings: Models, by where they run */
.mdl-server-head { display: flex; gap: 12px; align-items: center; }
.mdl-where { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; flex: none; color: var(--green); background: color-mix(in srgb, var(--green) 10%, var(--canvas)); border: 1px solid color-mix(in srgb, var(--green) 30%, var(--border)); }
.mdl-server.remote .mdl-where { color: var(--violet); background: color-mix(in srgb, var(--violet) 10%, var(--canvas)); border-color: color-mix(in srgb, var(--violet) 30%, var(--border)); }
.mdl-kind { margin-left: 8px; font: 500 11px var(--font-data); padding: 1px 7px; border-radius: 4px; color: var(--green); border: 1px solid color-mix(in srgb, var(--green) 40%, transparent); }
.mdl-server.remote .mdl-kind { color: var(--violet); border-color: color-mix(in srgb, var(--violet) 40%, transparent); }
.mdl-state { font-size: 12.5px; color: var(--text-2); display: inline-flex; align-items: center; gap: 6px; }
.mdl-state::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); }
.mdl-state.up::before { background: var(--green); } .mdl-state.down::before { background: var(--red); } .mdl-state.down { color: var(--red); }
.mdl-row { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 150px auto; gap: 8px 18px; align-items: center; padding: 14px 20px; border-top: 1px solid var(--rule); }
.sts-body > .mdl-row:first-child { border-top: 0; }
.mdl-name b { font-size: 13.5px; font-weight: 500; margin-right: 8px; overflow-wrap: anywhere; }
.mdl-tag { display: inline-block; font: 500 11px var(--font-data); padding: 1px 7px; border-radius: 4px; border: 1px solid var(--border); color: var(--text-2); margin-right: 4px; vertical-align: 1px; }
.mdl-tag.embeddings, .mdl-tag.reranking { color: var(--cyan); border-color: color-mix(in srgb, var(--cyan) 40%, transparent); }
.mdl-tag.default { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 50%, transparent); }
.mdl-facts { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--text-3); }
.mdl-uses { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; font-size: 12px; }
.mdl-use { padding: 1px 8px; border-radius: 999px; background: var(--raised); color: var(--text-2); border: 1px solid var(--rule); }
.mdl-status { font-size: 12.5px; color: var(--text-2); display: flex; align-items: center; gap: 6px; }
.mdl-status i { width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); flex: none; }
.mdl-status.served i, .mdl-status.remote i { background: var(--green); } .mdl-status.unreachable i { background: var(--red); } .mdl-status.not-served i { background: var(--amber); }
.mdl-acts { display: flex; gap: 6px; justify-content: end; }
.mdl-test { grid-column: 1 / -1; font: 12px var(--font-data); padding: 8px 10px; border-radius: 6px; background: var(--canvas); color: var(--text-2); }
.mdl-test.ok { color: var(--green); } .mdl-test.failed { color: var(--red); }
.mdl-checks { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font: 12px var(--font-data); }
.mdl-checks li { padding: 6px 10px; border-radius: 6px; background: var(--canvas); color: var(--text-2); border-left: 3px solid var(--border); }
.mdl-checks li.ok { border-left-color: var(--green); } .mdl-checks li.warn { border-left-color: var(--amber); } .mdl-checks li.fail { border-left-color: var(--red); }
.mdl-checks b { color: var(--text); font-weight: 600; } .mdl-change { color: var(--text-3); }
.mdl-family { display: grid; grid-template-columns: minmax(140px, 220px) minmax(0, 1fr); gap: 16px; padding: 10px 20px; border-top: 1px solid var(--rule); font-size: 13px; color: var(--text-2); }
.mdl-family:first-child { border-top: 0; }
@media (max-width: 900px) { .mdl-row { grid-template-columns: minmax(0, 1fr) auto; } .mdl-uses, .mdl-status { grid-column: 1 / -1; } }

/* Insights */
.in-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.in-head h1 { margin: 0; }
.in-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.in-tile { display: grid; gap: 2px; padding: 16px 18px; border-radius: 12px; background: radial-gradient(ellipse at 20% 0%, color-mix(in srgb, var(--raised) 80%, transparent) 0%, var(--surface) 75%); border: 1px solid var(--rule); }
.in-tile b { font: 600 28px var(--font-data); color: var(--text); } .in-tile b.good { color: var(--green); } .in-tile b.bad { color: var(--red); }
.in-tile span { font-size: 13px; color: var(--text-2); } .in-tile i { font-style: normal; font-size: 12px; color: var(--text-3); } .in-tile i.bad { color: var(--red); }
.in-card { background: var(--surface); border-color: var(--rule); border-radius: 10px; padding: 16px 18px; display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
.in-chart { width: 100%; height: 140px; }
.in-axis { stroke: var(--border); }
.in-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--text-2); }
.in-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 6px; }
.in-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.in-row { display: grid; gap: 4px; padding: 8px 0; border-top: 1px solid var(--rule); font-size: 13px; }
.in-name { font-weight: 600; color: var(--text); text-decoration: none; } .in-name .dim { font-weight: 400; }
.in-bar { display: flex; height: 6px; border-radius: 3px; background: var(--border); overflow: hidden; }
.in-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--amber)); } .in-bar i.bad { background: var(--red); }
.in-num { font: 12px var(--font-data); color: var(--text-3); }
.in-record > .body { padding: 14px; }
@media (max-width: 1100px) { .in-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .in-cols { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 700px) { .in-tile b { font-size: 22px; } }
@media (max-width: 700px) { .sec { overflow-x: auto; } .sec > table { min-width: 560px; } }
.help-read, .ask-k, .ask-answer, .flow-card { min-width: 0; grid-template-columns: minmax(0, 1fr); }
.read-p { min-width: 0; overflow-x: auto; }
.md-table { overflow-x: auto; margin: 0 0 10px; }
.md table { border-collapse: collapse; font-size: 13px; }
.md th, .md td { border: 1px solid var(--rule); padding: 5px 9px; text-align: left; vertical-align: top; }
.md th { background: var(--raised); font-weight: 600; }
.src { align-content: start; }

/* Phones (the 2026-10-21 review): wide tables scroll sideways instead of
   spilling off the page or breaking words; the Memory tab's notes and the
   questions to the agents stack; a long decision reads at a calmer size. */
@media (max-width: 700px) {
  .sec table:not(.mem-t), .card table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .sec table:not(.mem-t) td, .sec table:not(.mem-t) th { white-space: nowrap; }
  .sec table:not(.mem-t) .actions { flex-wrap: nowrap; }
  .q-row { grid-template-columns: minmax(0, 1fr); }
  .band h1 { font-size: 21px; }
  table.mem-t, .mem-t tbody, .mem-t tr, .mem-t td { display: block; width: auto; }
  .mem-t colgroup, .mem-t thead { display: none; }
  .mem-t tr { padding: 10px 16px; border-bottom: 1px solid var(--rule); }
  .mem-t td { padding: 2px 0; border: 0; }
  .mem-t td:not(:first-child) { display: inline-block; margin-right: 12px; }
  .mem-h { margin: 14px 16px 6px; }
}

.in-ticks { position: relative; height: 18px; margin-top: 4px; font: 11px var(--font-data); color: var(--text-3); }
.in-ticks span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.in-ticks span:first-child { transform: none; } .in-ticks span:last-child { transform: translateX(-100%); }

/* Getting started, on Home for an administrator of a new server. */
.start { display: grid; gap: 2px; }
.start .card-head h2 .dim { font-weight: 400; font-size: 12.5px; }
.start-step { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 9px 4px; border-top: 1px solid var(--rule); color: var(--text); text-decoration: none; }
.start-step:hover { background: color-mix(in srgb, var(--raised) 50%, transparent); }
.start-step b { display: block; font-weight: 600; font-size: 13.5px; }
.start-step .dim { font-size: 12.5px; line-height: 1.5; }
.start-mark { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--border); display: grid; place-items: center; margin-top: 1px; }
.start-step.done .start-mark { border-color: var(--green); color: var(--green); }
.start-step.done b { color: var(--text-2); font-weight: 500; }

/* The sign-in form (ADR-0060). */
.token-screen .signin { display: grid; gap: 12px; margin: 10px 0 6px; }
.token-screen .signin label { display: grid; gap: 6px; font-size: 13px; color: var(--text-2); }
.token-screen .signin input { margin: 0; font-family: var(--font-ui); }
.token-screen .small { font-size: 12.5px; }

/* The second factor (S-3): the key for the app, and the recovery codes shown once. */
.factor-secret, .factor-recovery { display: grid; gap: 10px; max-width: 560px; }
.factor-steps { margin: 0; padding-left: 20px; color: var(--text-2); line-height: 1.6; font-size: 13px; }
.factor-key { font-size: 16px; letter-spacing: .08em; margin-top: 0; }
.factor-codes { column-count: 2; font-size: 14px; margin-top: 0; max-height: none; }
.factor-uri summary { cursor: pointer; color: var(--text-2); font-size: 12.5px; }
.factor-secret .actions, .factor-recovery .actions { margin: 0; }
.factor-recovery .check-line input, .token-screen .check-line input { width: auto; margin: 0; }
.token-screen .warn-line { color: var(--amber); font-size: 12.5px; line-height: 1.6; }
.code-input { font-family: var(--font-data) !important; letter-spacing: .2em; font-size: 18px; max-width: 220px; }

/* Lanes (option B): open work on its pipeline's line */
.lanes { display: grid; gap: 14px; }
.ln-group { display: grid; gap: 2px; }
.ln-dept { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13.5px; padding-bottom: 4px; }
.ln-dept i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.ln-dept a { color: var(--text); text-decoration: none; } .ln-dept a:hover { text-decoration: underline; }
.ln-dept span { font: 12px var(--font-data); color: var(--text-3); font-weight: 400; }
.ln-lane { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 14px; align-items: end; border-top: 1px solid var(--rule); padding-top: 8px; }
.ln-name { font-size: 13px; color: var(--text-2); margin-bottom: 18px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-clamp: 2; }
.ln-track { position: relative; min-width: 0; margin: 0 40px; }
.ln-rail { position: absolute; left: -40px; right: -40px; top: var(--rail); height: 2px; background: var(--border); }
.ln-station { position: absolute; top: calc(var(--rail) - 6px); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 3px; pointer-events: none; }
.ln-station i { width: 14px; height: 14px; border-radius: 50%; background: var(--raised); border: 2px solid var(--border); box-sizing: border-box; }
.ln-station em { font: 11px var(--font-data); color: var(--text-3); font-style: normal; white-space: nowrap; max-width: 110px; overflow: hidden; text-overflow: ellipsis; }
.ln-station.busy i { border-color: var(--cyan); } .ln-station.busy em { color: var(--cyan); }
.ln-station.wait i { border-color: var(--amber); animation: lnPulse 2s ease-in-out infinite; } .ln-station.wait em { color: var(--amber); }
.ln-start i { border-style: dashed; }
.ln-pill { position: absolute; transform: translateX(-50%); height: 22px; line-height: 20px; padding: 0 10px; border-radius: 11px; font-size: 12px; white-space: nowrap; max-width: 210px; overflow: hidden; text-overflow: ellipsis; box-sizing: border-box; color: var(--text); text-decoration: none; border: 1px solid var(--border); background-color: var(--raised); transition: left .9s cubic-bezier(.45, 0, .55, 1), top .3s ease; }
.ln-pill:hover { border-color: var(--text-2); }
.ln-pill.p-running { border-color: color-mix(in srgb, var(--cyan) 55%, transparent); background-color: color-mix(in srgb, var(--cyan) 12%, var(--surface)); background-image: linear-gradient(90deg, var(--cyan) 0 6px, transparent 6px 12px); background-size: 12px 2px; background-repeat: repeat-x; background-position: 0 100%; animation: lnRun .8s linear infinite; }
.ln-pill.p-waiting { border-color: var(--amber); background-color: color-mix(in srgb, var(--amber) 14%, var(--surface)); animation: lnPulse 2s ease-in-out infinite; }
.ln-pill.p-queued, .ln-pill.p-blocked { color: var(--text-2); border-style: dashed; }
@keyframes lnRun { to { background-position: -12px 100%; } }
@keyframes lnPulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--amber) 45%, transparent); } 50% { box-shadow: 0 0 0 6px transparent; } }
@media (max-width: 700px) { .ln-lane { grid-template-columns: minmax(0, 1fr); gap: 4px; } .ln-name { margin-bottom: 0; } .ln-track { margin: 0 24px; } .ln-rail { left: -24px; right: -24px; } }
@media (prefers-reduced-motion: reduce) { .ln-pill, .ln-pill.p-running, .ln-pill.p-waiting, .ln-station.wait i { animation: none; transition: none; } }
.wl-lanes, .dp-lanes { background: var(--surface); border-color: var(--rule); border-radius: 10px; padding: 16px 18px; display: grid; gap: 12px; margin-bottom: 16px; }
.wl-lanes .card-head .dim, .dp-lanes .card-head .dim { font-size: 12px; }
.ln-empty { font-size: 13px; color: var(--text-2); padding: 6px 0 2px; }

/* Ask Kyrvis on Home (ADR-0061) */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.askbar { position: relative; display: grid; gap: 10px; }
.askbar.open .ask-input, .askbar.open .ask-sheet { z-index: 31; }
.ask-scrim { position: fixed; inset: 0; z-index: 30; background: color-mix(in srgb, var(--canvas) 70%, transparent); animation: rise .15s ease-out; }
.ask-input { position: relative; display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 8px 0 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); transition: border-color .2s ease; }
.ask-input:focus-within, .askbar.open .ask-input { border-color: var(--gold); }
.ask-input input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font: 15px var(--font-ui); }
.ask-core { fill: var(--gold); } .ask-ring { fill: none; stroke: var(--gold); stroke-width: 1; stroke-dasharray: 4 3; transform-origin: 11px 11px; animation: spin 12s linear infinite; }
.ask-send { width: 36px; height: 36px; flex: none; border: 0; border-radius: 6px; background: var(--gold); color: var(--on-amber); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.ask-send:disabled { opacity: .45; cursor: default; }
.ask-close kbd { font: 11px var(--font-data); color: var(--text-3); margin-left: 4px; }
.ask-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ask-chip { height: 30px; padding: 0 12px; border-radius: 15px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); font: 13px var(--font-ui); cursor: pointer; }
.ask-chip:hover:not(:disabled) { border-color: var(--gold); color: var(--text); }
.ask-sheet { position: absolute; left: 0; right: 0; top: 60px; max-height: min(70vh, 560px); display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); box-shadow: 0 18px 50px rgba(0, 0, 0, .45); overflow: hidden; animation: rise .2s ease-out; }
.ask-thread { flex: 1; min-height: 0; overflow: auto; padding: 18px 22px; display: grid; gap: 18px; align-content: start; }
.ask-intro { margin: 0; color: var(--text-2); font-size: 14px; line-height: 1.5; max-width: 760px; }
.ask-turn { display: grid; gap: 8px; animation: rise .25s ease-out; }
.ask-q { font-size: 13px; color: var(--text-3); } .ask-q b { color: var(--text); font-weight: 500; }
.ask-a { font-size: 15px; line-height: 1.6; max-width: 860px; } .ask-a p { margin: 0 0 8px; } .ask-a > :last-child { margin-bottom: 0; }
.ask-cite { display: inline-flex; align-items: center; justify-content: center; min-width: 17px; height: 17px; padding: 0 4px; margin: 0 1px; border-radius: 4px; background: var(--raised); border: 1px solid var(--border); color: var(--gold); font: 11px var(--font-data); text-decoration: none; vertical-align: 2px; }
.ask-cite:hover { border-color: var(--gold); }
.ask-caret { display: inline-block; width: 7px; height: 15px; background: var(--gold); vertical-align: -2px; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.ask-note { font-size: 13px; color: var(--text-2); }
.ask-srcs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ask-src { display: inline-flex; align-items: center; gap: 6px; max-width: 320px; padding: 3px 8px 3px 4px; border: 1px solid var(--border); border-radius: 6px; color: var(--text-2); font-size: 12.5px; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ask-src:hover { border-color: var(--text-3); color: var(--text); }
.ask-src i { font: normal 11px var(--font-data); color: var(--gold); background: var(--raised); border-radius: 4px; padding: 0 5px; }
.ask-src span { font: 11px var(--font-data); color: var(--text-3); }
.ask-more { font-size: 12.5px; color: var(--text-3); } .ask-more summary { cursor: pointer; } .ask-more[open] { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; }
.ask-acts { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .ask-acts .dim { font-size: 13px; }
.ask-thinking { display: flex; align-items: center; gap: 5px; color: var(--text-3); font-size: 13px; }
.ask-thinking i { width: 6px; height: 6px; border-radius: 50%; background: var(--text-3); animation: askDot 1.2s infinite; }
.ask-thinking i:nth-child(2) { animation-delay: .2s; } .ask-thinking i:nth-child(3) { animation-delay: .4s; } .ask-thinking span { margin-left: 6px; }
@keyframes askDot { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
.ask-chips.in-sheet { padding: 10px 22px 14px; border-top: 1px solid var(--rule); }
@media (max-width: 700px) { .ask-sheet { position: fixed; left: 8px; right: 8px; top: 64px; max-height: calc(100vh - 80px); } .ask-close { display: none; } }
@media (prefers-reduced-motion: reduce) { .ask-ring, .ask-caret, .ask-thinking i, .ask-turn, .ask-sheet, .ask-scrim { animation: none; } }

/* Kinds of work and the pipeline editor (ADR-0062) */
.kow { display: grid; gap: 12px; }
.kow-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; } .kow-head p { margin: 0; max-width: 700px; font-size: 13px; }
.kow-card { border: 1px solid var(--rule); border-radius: 10px; background: var(--surface); padding: 14px 16px; display: grid; gap: 8px; }
.kow-card.broken { border-color: color-mix(in srgb, var(--red) 45%, transparent); }
.kow-top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .kow-top b { font-size: 14.5px; font-weight: 600; }
.kow-acts { margin-left: auto; display: flex; gap: 6px; }
.kow-line { display: flex; align-items: center; flex-wrap: wrap; gap: 0; }
.kow-st { display: inline-flex; align-items: center; gap: 6px; font: 12px var(--font-data); color: var(--text-2); }
.kow-st + .kow-st::before { content: ""; width: 28px; height: 2px; background: var(--border); margin: 0 8px; }
.kow-st i { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--cyan); display: inline-block; }
.kow-st.k-human i { border-color: var(--amber); border-radius: 2px; transform: rotate(45deg); }
.kow-st.k-run i { border-color: var(--text-3); border-radius: 2px; }
.kow-words { font-size: 12.5px; }
.pe-tag { font: 11px var(--font-data); color: var(--gold); border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent); border-radius: 8px; padding: 1px 7px; }
.pe { display: grid; gap: 18px; }
.pe-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.pe-title { flex: 1 1 420px; } .pe-title input { width: 100%; box-sizing: border-box; font: 400 24px var(--font-voice); background: transparent; border: 0; border-bottom: 1px solid var(--border); color: var(--text); padding: 4px 0; }
.pe-title input:focus { outline: none; border-bottom-color: var(--gold); }
.pe-name { font: 12px var(--font-data); color: var(--text-3); }
.pe-mark { font-size: 13px; color: var(--text-2); display: flex; gap: 6px; align-items: center; }
.pe-draw { width: 100%; height: auto; max-height: 150px; background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; }
.pe-rail { stroke: var(--border); stroke-width: 2; }
.pe-node circle, .pe-node rect { fill: var(--raised); stroke-width: 2; transition: all .3s ease; }
.pe-node.k-agent circle { stroke: var(--cyan); } .pe-node.k-human rect { stroke: var(--amber); } .pe-node.k-run rect { stroke: var(--text-3); }
.pe-node.when circle, .pe-node.when rect { stroke-dasharray: 3 3; }
.pe-id { fill: var(--text); font: 600 12px var(--font-ui); } .pe-lab { fill: var(--text-3); font: 11px var(--font-data); }
.pe-arc { fill: none; stroke: var(--red); stroke-width: 1.5; stroke-dasharray: 4 4; animation: peArc 1.2s linear infinite; }
.pe-arc-label { fill: var(--red); font: 10.5px var(--font-data); }
@keyframes peArc { to { stroke-dashoffset: 16; } }
.pe-sec { display: grid; gap: 10px; } .pe-sec h3 { margin: 0; font-size: 14px; font-weight: 600; }
.pe-input { display: grid; grid-template-columns: 200px minmax(0, 1fr) auto; gap: 8px; }
.pe-step { border: 1px solid var(--rule); border-left: 3px solid var(--cyan); border-radius: 8px; background: var(--surface); padding: 12px 14px; display: grid; gap: 10px; }
.pe-step.k-human { border-left-color: var(--amber); } .pe-step.k-run { border-left-color: var(--text-3); }
.pe-step.k-tickets { border-left-color: var(--violet); } .pe-node.k-tickets rect { stroke: var(--violet); }
.kow-st.k-tickets i { border-color: var(--violet); border-radius: 2px; }
.pe-step-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pe-n { font: 600 13px var(--font-data); color: var(--text-3); width: 18px; }
.pe-kinds { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.pe-kinds button { border: 0; background: transparent; color: var(--text-2); padding: 6px 10px; font: 12.5px var(--font-ui); cursor: pointer; }
.pe-kinds button.on { background: var(--raised); color: var(--text); box-shadow: inset 0 -2px 0 var(--gold); }
.pe-id-in { font: 12px var(--font-data); color: var(--text-3); display: flex; gap: 6px; align-items: center; } .pe-id-in input { width: 140px; font: 12px var(--font-data); }
.pe-tools { margin-left: auto; display: flex; gap: 4px; }
.pe-row { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; font-size: 13px; }
.pe-row label { display: flex; gap: 8px; align-items: center; }
.pe-text { display: grid; gap: 4px; font-size: 12.5px; color: var(--text-2); } .pe-text textarea, .pe-text input { width: 100%; box-sizing: border-box; }
.pe-chips { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; font-size: 12px; }
.pe-chip { border: 1px dashed var(--border); background: transparent; color: var(--text-2); border-radius: 10px; padding: 2px 8px; font: 11.5px var(--font-data); cursor: pointer; }
.pe-chip:hover { border-color: var(--gold); color: var(--text); }
.pe-retry { background: color-mix(in srgb, var(--red) 6%, transparent); border-radius: 6px; padding: 8px 10px; }
.pe-hint { font-size: 12px; }
.pe-more summary { font-size: 12.5px; color: var(--text-3); cursor: pointer; } .pe-more[open] { display: grid; gap: 6px; }
.pe-add-between { display: flex; gap: 6px; flex-wrap: wrap; opacity: .6; transition: opacity .15s ease; } .pe-step:hover .pe-add-between, .pe-add-between:focus-within { opacity: 1; }
.pe-foot { position: sticky; bottom: 0; display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; padding: 12px 0; background: var(--canvas); border-top: 1px solid var(--rule); }
.pe-check { font-size: 13px; color: var(--text-2); max-width: 760px; } .pe-check.ok { color: var(--green); } .pe-check ul { margin: 4px 0 0; padding-left: 18px; color: var(--text); }
.pe-yaml summary { cursor: pointer; color: var(--text-3); font-size: 12px; margin-top: 6px; } .pe-yaml pre { max-height: 260px; overflow: auto; font: 12px var(--font-data); background: var(--surface); border: 1px solid var(--rule); border-radius: 6px; padding: 10px; color: var(--text-2); }
@media (max-width: 700px) { .pe-input { grid-template-columns: minmax(0, 1fr) auto; } .pe-input input:nth-child(2) { grid-column: 1 / -1; grid-row: 2; } }
@media (prefers-reduced-motion: reduce) { .pe-arc, .pe-step { animation: none; } }
.dp-head .dp-newkind { margin-left: auto; align-self: center; flex: none; }
.dp-sub a { color: inherit; }
.kow-new { flex: none; }
.kow-shapes { display: grid; gap: 8px; margin-bottom: 10px; font-size: 13px; animation: next-step-in .45s cubic-bezier(.2, .8, .2, 1) both; }
.kow-shape-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; }
.kow-shape { display: grid; gap: 3px; text-align: left; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); padding: 10px 12px; color: var(--text); cursor: pointer; font: 13px var(--font-ui); transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.kow-shape:hover { border-color: var(--gold); transform: translateY(-1px); box-shadow: 0 4px 14px color-mix(in srgb, var(--gold) 14%, transparent); }
.kow-shape b { font-weight: 600; } .kow-shape .dim { font-size: 12px; }
.kow-describe { border: 1px solid var(--gold); border-radius: 10px; background: var(--surface); padding: 14px 16px; display: grid; gap: 10px; }
.kow-describe label { display: grid; gap: 4px; font-size: 13px; } .kow-describe label .dim { font-size: 12.5px; }
.kow-describe textarea { width: 100%; box-sizing: border-box; font: 14px/1.5 var(--font-ui); }
.kow-describe-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.kow-drafting { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--text-2); }
.kow-drafting i { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); animation: askDot 1.2s infinite; }
.kow-drafting i:nth-child(2) { animation-delay: .2s; } .kow-drafting i:nth-child(3) { animation-delay: .4s; margin-right: 6px; }
.pe-drafted { border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent); background: color-mix(in srgb, var(--gold) 8%, transparent); border-radius: 8px; padding: 10px 14px; font-size: 13px; margin-bottom: 14px; }
@media (prefers-reduced-motion: reduce) { .kow-describe, .kow-drafting i { animation: none; } }

/* The System page: the diagram and the parts in plain words */
.sys-lede { margin: 0; max-width: 900px; color: var(--text-2); font-size: 14px; line-height: 1.55; }
.sys-map { background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; padding: 14px 16px; display: grid; gap: 10px; }
.sys-map svg { width: 100%; height: auto; }
.sys-frame { fill: none; stroke: var(--cyan); stroke-opacity: .45; stroke-width: 1.2; stroke-dasharray: 6 6; }
.sys-frame-label { fill: var(--cyan); font: 11px var(--font-data); letter-spacing: .04em; opacity: .85; }
.sys-ring { fill: color-mix(in srgb, var(--red) 4%, transparent); stroke: var(--red); stroke-opacity: .6; stroke-width: 1.4; stroke-dasharray: 5 5; transition: opacity .25s ease; }
.sys-ring-label { fill: var(--red); font: 10.5px var(--font-data); opacity: .8; }
.sys-ring.dim { opacity: .3; }
.sys-node { cursor: pointer; transition: opacity .25s ease; }
.sys-node rect { fill: var(--raised); stroke-width: 1.6; transition: stroke-width .15s ease; }
.sys-node:hover rect, .sys-node:focus-visible rect { stroke-width: 2.6; }
.sys-node:focus { outline: none; }
.sys-node.on rect { stroke-width: 3; fill: color-mix(in srgb, var(--raised) 70%, var(--gold) 8%); }
.sys-node.dim { opacity: .28; }
.sys-node.k-in rect { stroke: var(--gold); } .sys-node.k-run rect { stroke: var(--cyan); } .sys-node.k-config rect { stroke: var(--violet); stroke-dasharray: 5 4; }
.sys-node.k-safety rect { stroke: var(--red); fill: var(--surface); } .sys-node.k-part rect { stroke: color-mix(in srgb, var(--cyan) 55%, var(--border)); }
.sys-node.k-people rect { stroke: var(--amber); } .sys-node.k-out rect { stroke: var(--green); } .sys-node.k-record rect { stroke: var(--gold); stroke-opacity: .7; } .sys-node.k-setup rect { stroke: var(--text-3); }
.sys-name { fill: var(--text); font: 600 13.5px var(--font-ui); pointer-events: none; }
.sys-node.small .sys-name, .sys-node.k-part .sys-name { font-size: 11.5px; font-weight: 500; }
.sys-fact { fill: var(--text-3); font: 10.5px var(--font-data); pointer-events: none; }
.sys-partial { fill: var(--amber); }
.sys-edge { transition: opacity .25s ease; } .sys-edge.dim { opacity: .12; }
.sys-line { fill: none; stroke-width: 1.4; stroke-opacity: .55; }
.sys-flow { fill: none; stroke-width: 2; stroke-dasharray: 2 14; stroke-linecap: round; animation: sysFlow 1.5s linear infinite; }
.sys-dot { opacity: .95; }
.sys-edge.k-flow .sys-line, .sys-edge.k-flow .sys-flow { stroke: var(--cyan); } .sys-edge.k-flow .sys-dot { fill: var(--cyan); }
.sys-edge.k-back .sys-line, .sys-edge.k-back .sys-flow { stroke: var(--green); } .sys-edge.k-back .sys-dot { fill: var(--green); }
.sys-edge.k-config .sys-line { stroke: var(--violet); stroke-dasharray: 5 5; }
.sys-edge.k-record .sys-line { stroke: var(--gold); stroke-dasharray: 2 5; stroke-opacity: .5; } .sys-edge.k-record .sys-flow { stroke: var(--gold); } .sys-edge.k-record .sys-dot { fill: var(--gold); }
.sys-edge.k-guard .sys-line { stroke: var(--red); stroke-dasharray: 3 3; stroke-opacity: .7; }
@keyframes sysFlow { to { stroke-dashoffset: -32; } }
.sys-elabel text { fill: var(--text-2); font: 10.5px var(--font-data); paint-order: stroke; stroke: var(--surface); stroke-width: 4px; } .sys-elabel.dim { opacity: .15; }
.sys-key { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12px; color: var(--text-2); }
.sys-key span::before { content: ""; display: inline-block; width: 22px; height: 0; border-top: 2px solid; vertical-align: middle; margin-right: 6px; }
.sys-key .k-flow::before { border-color: var(--cyan); } .sys-key .k-back::before { border-color: var(--green); } .sys-key .k-config::before { border-color: var(--violet); border-top-style: dashed; }
.sys-key .k-record::before { border-color: var(--gold); border-top-style: dotted; } .sys-key .k-guard::before { border-color: var(--red); border-top-style: dashed; }
.sys-detail { border-top: 1px solid var(--rule); padding-top: 12px; display: grid; gap: 8px; }
.sys-detail-head, .sys-card-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.sys-detail-head b { font-size: 16px; font-weight: 600; } .sys-detail-head .btn { margin-left: auto; }
.sys-detail p, .sys-card p { margin: 0; color: var(--text); font-size: 14px; line-height: 1.55; max-width: 900px; }
.sys-group { font: 11px var(--font-data); color: var(--text-3); text-transform: none; }
.sys-st { font-size: 11.5px; border: 1px solid; border-radius: 10px; padding: 0 8px; }
.sys-st.st-built { color: var(--green); } .sys-st.st-partial { color: var(--amber); } .sys-st.st-planned { color: var(--text-3); }
.sys-now { display: flex; gap: 12px; font-size: 13px; color: var(--text-2); } .sys-now > span { color: var(--text-3); white-space: nowrap; }
.sys-now ul, .sys-card-now { margin: 0; padding-left: 16px; } .sys-card-now { font-size: 12.5px; color: var(--text-2); }
.sys-links { font-size: 13px; color: var(--text-3); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sys-link { border: 1px solid var(--border); background: var(--raised); color: var(--text); border-radius: 12px; padding: 2px 10px; font: 12.5px var(--font-ui); cursor: pointer; }
.sys-link:hover { border-color: var(--gold); }
.sys-hint { margin: 0; font-size: 12.5px; }
.sys-group-sec { display: grid; gap: 10px; } .sys-group-sec h2 { margin: 8px 0 0; font-size: 15px; font-weight: 600; }
.sys-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.sys-card { border: 1px solid var(--rule); border-radius: 10px; background: var(--surface); padding: 14px 16px; display: grid; gap: 8px; align-content: start; cursor: default; }
.sys-card.on { border-color: var(--gold); }
.sys-card-head b { font-size: 14px; font-weight: 600; }
.sys-where { font: 11px var(--font-data); color: var(--text-3); opacity: .7; }
@media (prefers-reduced-motion: reduce) { .sys-flow { animation: none; } .sys-node, .sys-edge, .sys-ring, .sys-loop { transition: none; } }
/* The System page's two offers (system.js, harnessmap.js, factorymap.js):
   tabs, the story a piece of work tells in each drawing, the factory's
   line and gates, and the parts list. */
.sys-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.sys-tabs button { border: 1px solid var(--border); background: var(--surface); color: var(--text-2); border-radius: 18px; padding: 8px 16px; font: 600 14px var(--font-ui); cursor: pointer; }
.sys-tabs button:hover { color: var(--text); }
.sys-tabs button.on { color: var(--text); border-color: var(--gold); background: color-mix(in srgb, var(--gold) 12%, var(--surface)); }
.sys-panel { display: grid; gap: 12px; min-width: 0; }
.sys-panel > *, .sys-map > * { min-width: 0; }
.sys-scroll { overflow-x: auto; }
.sys-scroll svg { display: block; min-width: 720px; }
.sys-node:focus-visible rect { stroke-width: 3; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--gold) 70%, transparent)); }
.sys-planned { fill: none; stroke: var(--text-3); stroke-width: 1.5; }
.sys-dot.ambient { opacity: .5; }
.sys-glow { fill: none; stroke: var(--gold); stroke-width: 2.5; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--gold) 60%, transparent)); pointer-events: none; }
.sys-token { pointer-events: none; }
.sys-token-halo { fill: color-mix(in srgb, var(--gold) 22%, transparent); stroke: var(--gold); stroke-opacity: .55; transform-box: fill-box; transform-origin: center; animation: sysHalo 1.2s ease-in-out infinite; }
.sys-token-core { fill: var(--gold); filter: drop-shadow(0 0 5px color-mix(in srgb, var(--gold) 80%, transparent)); }
@keyframes sysHalo { 50% { transform: scale(1.35); stroke-opacity: .2; } }
.sys-tick { fill: none; stroke: var(--gold); stroke-opacity: .45; stroke-width: 1.2; }
.sys-tick.lit { fill: var(--gold); stroke-opacity: 1; } .sys-tick.lit.red { fill: var(--red); stroke: var(--red); }
.sys-caption text, .sys-caption-still { fill: var(--text); font: italic 16px var(--font-voice); paint-order: stroke; stroke: var(--surface); stroke-width: 5px; }
.sys-caption-still { fill: var(--text-2); }
.sys-caption .sys-caption-n { fill: var(--gold); font: normal 11px var(--font-data); }
.fl-belt { fill: none; stroke: var(--raised); stroke-width: 12; stroke-linecap: round; stroke-linejoin: round; }
.fl-belt-flow { fill: none; stroke: var(--cyan); stroke-opacity: .45; stroke-width: 2; stroke-dasharray: 2 14; stroke-linecap: round; animation: sysFlow 1.8s linear infinite; }
.fl-stub { transition: opacity .25s ease; } .fl-stub line { stroke: var(--border); stroke-width: 1.5; } .fl-stub circle { fill: var(--text-3); } .fl-stub.dim { opacity: .3; }
.fl-gate { transition: opacity .25s ease; } .fl-gate.dim { opacity: .3; }
.fl-bar { fill: var(--amber); } .fl-bar.red { fill: var(--red); } .fl-bar.green { fill: var(--green); }
.fl-checking { fill: none; stroke: var(--cyan); stroke-width: 2; stroke-dasharray: 5 5; transform-box: fill-box; transform-origin: center; animation: flSpin 2.4s linear infinite; }
@keyframes flSpin { to { transform: rotate(360deg); } }
.fl-gate-word { fill: var(--text-3); font: 10.5px var(--font-data); }
.fl-revert-edges path { fill: none; stroke: var(--red); stroke-width: 1.4; stroke-dasharray: 4 4; stroke-opacity: .75; } .fl-revert-edges.dim { opacity: .3; }
.fl-deploy-edges path { fill: none; stroke: var(--green); stroke-width: 1.4; stroke-opacity: .75; } .fl-deploy-edges .sys-dot { fill: var(--green); } .fl-deploy-edges.dim { opacity: .3; }
.sys-loop { transition: opacity .25s ease; } .sys-loop.dim { opacity: .3; }
.fl-ledger { transition: opacity .25s ease; } .fl-ledger.dim { opacity: .5; }
.fl-ledger-box { fill: var(--raised); stroke: var(--gold); stroke-opacity: .7; stroke-width: 1.6; }
.fl-ledger-name { fill: var(--text); font: 600 13.5px var(--font-ui); }
.fl-chain { stroke: var(--gold); stroke-opacity: .35; stroke-dasharray: 2 4; }
.sys-key .k-token::before, .sys-key .k-partly::before { width: 9px; height: 9px; border: 0; border-radius: 50%; background: var(--gold); box-shadow: 0 0 6px var(--gold); }
.sys-key .k-partly::before { background: var(--amber); box-shadow: none; }
.sys-key .k-gate::before, .sys-key .k-check::before, .sys-key .k-pass::before, .sys-key .k-fail::before { width: 5px; height: 14px; border: 0; border-radius: 2px; background: var(--amber); }
.sys-key .k-check::before { width: 12px; height: 12px; background: none; border: 2px dashed var(--cyan); border-radius: 50%; }
.sys-key .k-pass::before { background: var(--green); } .sys-key .k-fail::before { background: var(--red); }
.sys-help { margin-left: auto; font-size: 13px; }
.sys-parts { display: grid; gap: 10px; }
.sys-parts-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; } .sys-parts-head h2 { margin: 6px 0 0; font-size: 15px; font-weight: 600; } .sys-parts-head span { font: 12px var(--font-data); }
.sys-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 10px; }
.sys-list li { border: 1px solid var(--rule); border-radius: 10px; background: var(--surface); padding: 12px 14px; display: grid; gap: 6px; align-content: start; }
.sys-list li.on { border-color: var(--gold); }
.sys-item-name { font-size: 14px; font-weight: 600; } .sys-item-name a { text-decoration: none; } .sys-item-name a:hover, .sys-item-name a:focus-visible { text-decoration: underline; }
.sys-list p { margin: 0; color: var(--text-2); font-size: 13.5px; line-height: 1.5; }
.sys-item-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.sys-offer { font: 11.5px var(--font-ui); border-radius: 10px; padding: 0 8px; background: var(--raised); }
.sys-offer.o-harness { color: var(--gold); } .sys-offer.o-factory { color: var(--cyan); } .sys-offer.o-both { color: var(--violet); }
.sys-now-head { margin: 18px 0 0; font: 400 22px/1.2 var(--font-voice); }
@media (max-width: 700px) { .sys-tabs button { flex: 1 1 auto; } .sys-list { grid-template-columns: 1fr; } .sys-cards { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .sys-token-halo, .fl-belt-flow, .fl-checking { animation: none; } .fl-stub, .fl-gate, .fl-ledger { transition: none; } }

/* The team at work, on a department's overview */
.team { background: var(--surface); border-color: var(--rule); border-radius: 10px; padding: 16px 18px; display: grid; gap: 6px; margin-bottom: 16px; }
.team .card-head .dim { font: 12px var(--font-data); }
.team svg { width: 100%; height: auto; overflow: visible; }
.team-rail { stroke: var(--border); stroke-width: 2; stroke-dasharray: 2 6; }
.team-col { fill: var(--text-3); font: 11px var(--font-data); }
.team-kb rect { fill: var(--raised); stroke: var(--border); stroke-width: 1.4; }
.team-kb.ready rect { stroke: color-mix(in srgb, var(--gold) 65%, transparent); }
.team-kb text { fill: var(--text); font: 12.5px var(--font-ui); }
.team-kb .team-kb-state { fill: var(--text-3); font: 10.5px var(--font-data); }
.team-kb.none rect { fill: none; stroke-dasharray: 4 4; } .team-kb.none text { fill: var(--text-2); }
.team-line { fill: none; stroke-width: 1.4; stroke-dasharray: 3 6; }
.team-flow.k-know .team-line { stroke: var(--gold); stroke-opacity: .55; } .team-flow.k-know circle { fill: var(--gold); }
.team-flow.k-person .team-line { stroke: var(--amber); stroke-opacity: .6; } .team-flow.k-person circle { fill: var(--amber); }
.team-dot { fill: var(--raised); stroke-width: 2; }
.team-agent.busy .team-dot { stroke: var(--cyan); }
.team-pulse { fill: none; stroke: var(--cyan); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: ping 2s ease-out infinite; }
.team-sat { animation: spin 6s linear infinite; } .team-sat circle { fill: var(--cyan); }
.team-ini { fill: var(--text); font: 600 13px var(--font-ui); pointer-events: none; }
.team-name { fill: var(--text); font: 600 13px var(--font-ui); }
.team-name, .team-line-text { paint-order: stroke; stroke: var(--surface); stroke-width: 5px; stroke-linejoin: round; }
.team-line-text { fill: var(--text-3); font: 11px var(--font-data); } .team-line-text.busy { fill: var(--cyan); } .team-line-text.waiting { fill: var(--amber); }
.team-more { fill: var(--text-3); font: 12px var(--font-data); }
.team-person-box { fill: var(--raised); stroke: var(--border); stroke-width: 2; }
.team-person.waiting .team-person-box { stroke: var(--amber); }
.team-person-pulse { fill: none; stroke: var(--amber); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: ping 2s ease-out infinite; }
.team-person { cursor: pointer; } .team-person:hover .team-person-box { stroke-width: 3; }
.team-quiet { fill: var(--text-3); font: 12px var(--font-ui); }
@media (prefers-reduced-motion: reduce) { .team-pulse, .team-sat, .team-person-pulse { animation: none; } }

/* Insights, redrawn: tiles with their trend, where the work went, growing bars */
.in-filters { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.in-table-toggle { font-size: 13px; }
.in-tile { position: relative; overflow: hidden; gap: 4px; align-content: start; }
.in-tile-label { font-size: 13px; color: var(--text-2); }
.in-tile b { font: 600 30px var(--font-ui); letter-spacing: -.01em; }
.in-delta { font-size: 12.5px; color: var(--text-3); } .in-delta.good { color: var(--green); } .in-delta.bad { color: var(--red); }
.in-spark { width: 100%; height: auto; margin-top: 4px; overflow: visible; }
.in-spark-line { fill: none; stroke: var(--text-3); stroke-width: 1.6; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: inDraw 1.2s ease-out .2s forwards; }
.in-spark-dot { fill: var(--gold); }
@keyframes inDraw { to { stroke-dashoffset: 0; } }
.in-cols.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.in-col { transform-box: fill-box; transform-origin: 50% 100%; animation: inGrow .7s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes inGrow { from { transform: scaleY(0); } }
.in-row-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.in-swatch { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 7px; }
.in-stack { display: flex; gap: 2px; height: 8px; min-width: 6px; transform-origin: left; animation: inWide .8s cubic-bezier(.2, .8, .2, 1) both; animation-delay: var(--d, 0s); }
.in-stack i { display: block; height: 100%; border-radius: 2px; }
.in-bar { background: var(--rule); } .in-bar i { background: var(--gold); border-radius: 3px; transform-origin: left; animation: inWide .8s cubic-bezier(.2, .8, .2, 1) both; animation-delay: var(--d, 0s); }
@keyframes inWide { from { transform: scaleX(0); } }
.in-legend.small { font-size: 12px; } .in-legend.small i { width: 8px; height: 8px; }
.in-table { width: 100%; font-size: 12.5px; border-collapse: collapse; } .in-table th, .in-table td { text-align: left; padding: 4px 8px; border-top: 1px solid var(--rule); } .in-table td:last-child, .in-table th:last-child { font-variant-numeric: tabular-nums; }
@media (max-width: 1100px) { .in-cols.two { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .in-spark-line, .in-col, .in-stack, .in-bar i { animation: none; stroke-dashoffset: 0; } }

/* Where the work went: department rows (option B of the Insights canvas) */
.in-went { display: grid; grid-template-columns: 220px 120px minmax(0, 1fr) 130px; gap: 16px; align-items: center; padding: 12px 0; border-top: 1px solid var(--rule); }
.in-went-name { display: grid; gap: 3px; } .in-went-name b { font-size: 14px; font-weight: 600; display: flex; align-items: center; } .in-went-name span { font: 12px var(--font-data); color: var(--text-2); }
.in-went-drops { position: relative; height: 28px; overflow: hidden; }
.in-went-drops span { position: absolute; left: 0; width: 6px; height: 6px; border-radius: 50%; animation: inStream 2.4s linear infinite; }
@keyframes inStream { 0% { transform: translateX(0); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateX(114px); opacity: 0; } }
.in-went-bar { display: flex; gap: 2px; height: 28px; min-width: 0; }
.in-went-seg { border-radius: 4px; display: flex; align-items: center; justify-content: center; font: 600 12px var(--font-data); color: var(--on-amber); overflow: hidden; transform-origin: left; animation: inWide .9s cubic-bezier(.2, .8, .2, 1) both; min-width: 3px; }
.in-went-total { display: grid; justify-items: end; gap: 2px; } .in-went-total b { font: 600 18px var(--font-ui); } .in-went-total span { font-size: 12px; color: var(--text-3); white-space: nowrap; }
.in-foot { margin: 0; font-size: 12.5px; color: var(--text-3); }
@media (max-width: 900px) { .in-went { grid-template-columns: minmax(0, 1fr) auto; } .in-went-drops { display: none; } .in-went-bar { grid-column: 1 / -1; grid-row: 2; } }
@media (prefers-reduced-motion: reduce) { .in-went-drops span, .in-went-seg { animation: none; } }

/* Home's map, focused: a chosen department and what it points at */
.pulse-map g.dim, .pulse-map .node.dim, .pulse-map .tether.dim { opacity: .22; transition: opacity .25s ease; }
.pulse-map .node.on .node-dot { stroke-width: 3.5; }
.pulse-map .tether { fill: none; stroke: var(--amber); stroke-width: 1.5; stroke-dasharray: 3 7; stroke-linecap: round; animation: flow 1.6s linear infinite; opacity: .8; }
.pulse-map .core-fresh { fill: var(--gold); font-weight: 600; }
.pd-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.pd-head b { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; } .pd-head b i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.pd-head .btn { margin-left: auto; }
@media (prefers-reduced-motion: reduce) { .pulse-map .tether { animation: none; } }

/* Settings: Department packs, a card per department, Mark and agent */
.pk-dept { padding: 18px 20px; border-top: 1px solid var(--rule); display: grid; gap: 14px; }
.sts-body > .pk-dept:first-child { border-top: 0; }
.pk-dept-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pk-dept-name { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; } .pk-dept-name .icon { color: var(--gold); } .pk-dept-name b { font-weight: 600; }
.pk-meta { font-size: 12.5px; color: var(--text-3); }
.pk-dept-head .btn { margin-left: auto; }
.pk-protected summary { cursor: pointer; font-size: 12.5px; color: var(--text-2); list-style: none; } .pk-protected summary::-webkit-details-marker { display: none; }
.pk-protected summary::before { content: '▸ '; color: var(--text-3); } .pk-protected[open] summary::before { content: '▾ '; }
.pk-protected > div { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px; max-width: 640px; } .pk-protected p { flex-basis: 100%; margin: 4px 0 0; font-size: 12px; }
.pk-path { font: 11.5px var(--font-data); padding: 1px 7px; border-radius: 4px; background: var(--canvas); border: 1px solid var(--rule); color: var(--text-2); }
.pk-mark { border: 1px solid var(--rule); border-radius: 10px; background: var(--canvas); padding: 14px 16px; display: grid; gap: 12px; }
.pk-mark-head { display: grid; gap: 2px; } .pk-mark-head b { font-size: 14px; font-weight: 600; } .pk-mark-head span { font-size: 12.5px; line-height: 1.5; }
.pk-agents { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.pk-agent { border: 1px solid var(--rule); border-radius: 8px; background: var(--surface); padding: 11px 12px; display: grid; gap: 6px; align-content: start; }
.pk-agent-top { display: flex; align-items: center; gap: 7px; } .pk-agent-top .icon { color: var(--text-3); } .pk-agent-top b { font-size: 13px; font-weight: 600; }
.pk-access { margin-left: auto; font: 500 10.5px var(--font-data); padding: 1px 6px; border-radius: 4px; white-space: nowrap; }
.pk-access.ro { color: var(--cyan); border: 1px solid color-mix(in srgb, var(--cyan) 40%, transparent); }
.pk-access.rw { color: var(--amber); border: 1px solid color-mix(in srgb, var(--amber) 40%, transparent); }
.pk-agent p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--text-2); }
.pk-writes { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; font-size: 11.5px; }
.pk-tools { font-size: 11.5px; }
.pk-pipes { display: grid; gap: 6px; padding-top: 10px; border-top: 1px dashed var(--rule); }
.pk-pipe { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; font-size: 12.5px; }
.pk-pipe-name { font: 500 12px var(--font-data); color: var(--text); min-width: 150px; }
.pk-steps { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; } .pk-steps .icon { color: var(--text-3); }
.pk-step { padding: 2px 8px; border-radius: 999px; background: var(--raised); color: var(--text-2); font-size: 12px; }

/* Skills (skills.js) */
.sk-start { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; padding: 16px 20px; }
.sk-way { display: grid; gap: 8px; align-content: start; padding: 14px; border: 1px solid var(--rule); border-radius: 10px; background: var(--canvas); }
.sk-way b { display: flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; } .sk-way b .icon { color: var(--gold); }
.sk-way p { margin: 0; font-size: 12.5px; color: var(--text-2); line-height: 1.5; }
.sk-way textarea { width: 100%; box-sizing: border-box; font-size: 12.5px; }
.sk-way .btn, .sk-way label.btn { justify-self: start; cursor: pointer; }
.sk-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sk-body { min-height: 300px; font-size: 12.5px; line-height: 1.55; }
.sk-item .sth-state { vertical-align: 1px; margin-left: 6px; }
.sk-desc { margin-top: 4px; font-size: 13px; color: var(--text); line-height: 1.5; }
.sk-own { align-self: center; font-size: 12px; margin-right: 4px; animation: rise 240ms ease-out both; }
.sk-meta { margin-top: 3px; font-size: 12px; }
.sk-versions { grid-column: 1 / -1; display: grid; gap: 2px; margin-top: 6px; padding: 8px 10px; border-radius: 8px; background: var(--canvas); border: 1px solid var(--rule); }
.sk-version { display: grid; grid-template-columns: 40px minmax(140px, auto) minmax(0, 1fr) 110px 70px auto; gap: 10px; align-items: center; padding: 5px 4px; font-size: 12.5px; border-radius: 6px; }
.sk-version.on { background: var(--raised); }
.sk-vacts { display: flex; gap: 4px; justify-content: end; }
.sk-text { margin: 8px 0 0; max-height: 420px; overflow: auto; white-space: pre-wrap; font-size: 12px; }
@media (max-width: 900px) { .sk-version { grid-template-columns: 40px minmax(0, 1fr) auto; } .sk-version > :nth-child(3), .sk-version > :nth-child(4) { display: none; } }
.sk-files { display: grid; gap: 4px; }
.sk-file { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto auto; gap: 8px; align-items: center; padding: 4px 8px; border-radius: 6px; background: var(--canvas); border: 1px solid var(--rule); font-size: 12.5px; }
.sk-file .icon { color: var(--text-3); }
.btn.quiet.on { border-color: var(--text-3); }

/* Trust levels on a department's Safety rules (departments.js) */
.trust-levels { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.trust-level { display: grid; gap: 4px; padding: 12px 14px; border: 1px solid var(--rule); border-radius: 10px; background: var(--canvas); cursor: pointer; font-size: 12.5px; color: var(--text-2); line-height: 1.5; }
.trust-level input { position: absolute; opacity: 0; pointer-events: none; }
.trust-level b { color: var(--text); font-size: 13px; font-weight: 600; }
.trust-level.on { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 8%, var(--canvas)); }
.trust-level:focus-within { outline: 2px solid var(--gold); outline-offset: 2px; }

/* People: choosing departments (users.js DeptPicker) */
.dept-pick { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.dept-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px 4px 9px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); font: 500 12.5px var(--font-ui); color: var(--text-2); cursor: pointer; transition: border-color .15s ease, background-color .15s ease, color .15s ease, transform .12s ease; }
.dept-chip:hover:not(:disabled) { border-color: var(--gold); color: var(--text); }
.dept-chip:active:not(:disabled) { transform: scale(.96); }
.dept-chip.on { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 12%, transparent); color: var(--text); }
.dept-chip svg { transition: transform .18s ease; }
.dept-chip.on svg { transform: rotate(360deg); color: var(--gold); }
.dept-every { font-size: 12.5px; }

/* People: one row per person (users.js) */
.ppl-head, .ppl-row { display: grid; grid-template-columns: 36px minmax(150px, 1.1fr) minmax(140px, 1fr) minmax(200px, 1.4fr) auto; gap: 6px 16px; align-items: center; padding: 0 20px; }
.ppl-head { padding-top: 10px; padding-bottom: 6px; font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); }
.ppl-row { padding-top: 14px; padding-bottom: 14px; border-top: 1px solid var(--rule); }
.ppl-row.off { opacity: .6; }
.ppl-avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font: 600 12.5px var(--font-ui, inherit); color: var(--text); background: var(--raised); border: 1.5px solid var(--border); }
.ppl-avatar.admin { border-color: var(--gold); color: var(--gold); }
.ppl-avatar.head { border-color: var(--green); color: var(--green); }
.ppl-avatar.member { border-color: var(--cyan); color: var(--cyan); }
.ppl-avatar.auditor { border-color: var(--violet); color: var(--violet); }
.ppl-who b { font-size: 14px; font-weight: 600; margin-right: 8px; }
.ppl-who .dim { font-size: 12px; margin-top: 2px; }
.ppl-role { display: inline-block; font: 500 11px var(--font-data); padding: 1px 7px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-2); vertical-align: 1px; }
.ppl-role.admin { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 50%, transparent); }
.ppl-role.head { color: var(--green); border-color: color-mix(in srgb, var(--green) 50%, transparent); }
.ppl-role.member { color: var(--cyan); border-color: color-mix(in srgb, var(--cyan) 50%, transparent); }
.ppl-role.auditor { color: var(--violet); border-color: color-mix(in srgb, var(--violet) 50%, transparent); }
.ppl-depts { display: flex; flex-wrap: wrap; gap: 4px; font-size: 12.5px; }
.ppl-dept { padding: 2px 9px; border-radius: 999px; background: var(--raised); border: 1px solid var(--rule); color: var(--text); font-size: 12px; }
.ppl-status { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-2); line-height: 1.4; }
.ppl-status i { width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); flex: none; }
.ppl-status.ok i { background: var(--green); } .ppl-status.ok { color: var(--text); }
.ppl-status.wait i { background: var(--amber); } .ppl-status.wait { color: var(--text); }
.ppl-status.bad i { background: var(--red); } .ppl-status.bad { color: var(--red); }
.ppl-acts { display: flex; gap: 4px; justify-content: end; flex-wrap: wrap; }
.ppl-remove:hover { color: var(--red); border-color: color-mix(in srgb, var(--red) 50%, transparent); }
.ppl-decides { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; font-size: 12.5px; }
.ppl-decides .chips-select { display: inline-flex; }
.ppl-row > .user-edit { grid-column: 2 / -1; }
@media (max-width: 900px) {
  .ppl-head { display: none; }
  .ppl-row { grid-template-columns: 36px minmax(0, 1fr); }
  .ppl-depts, .ppl-status, .ppl-acts, .ppl-decides { grid-column: 2 / -1; justify-content: start; }
}
.ppl-decides .chip-toggle { font: 500 12px var(--font-ui, inherit); padding: 3px 10px; }

/* Rules: a department's rules in words (rules.js) */
.rl-depts { display: flex; flex-wrap: wrap; gap: 6px; }
.rl-you { display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 14px; border-radius: 10px; background: var(--surface); border: 1px solid var(--rule); font-size: 13.5px; color: var(--text); }
.rl-you .icon { color: var(--gold); }
.rl-row { display: grid; grid-template-columns: minmax(170px, 230px) minmax(0, 1fr) auto; gap: 8px 18px; align-items: start; padding: 13px 20px; border-top: 1px solid var(--rule); font-size: 13.5px; line-height: 1.55; }
.sts-body > .rl-row:first-child { border-top: 0; }
.rl-row > b { font-weight: 600; }
.rl-row > span { color: var(--text); }
.rl-item { display: inline-flex; align-items: center; gap: 6px; margin: 0 10px 6px 0; }
.rl-from { font-style: normal; font: 500 11px var(--font-data); padding: 1px 8px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-3); white-space: nowrap; }
.rl-from.Department { color: var(--green); border-color: color-mix(in srgb, var(--green) 45%, transparent); }
.rl-from.Organization { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 50%, transparent); }
.rl-from.Server, .rl-from.Department.pack { color: var(--cyan); border-color: color-mix(in srgb, var(--cyan) 45%, transparent); }
.rl-legend { font-size: 12.5px; line-height: 1.6; margin: 0; }
.rl-tech { border: 1px solid var(--rule); border-radius: 12px; padding: 12px 16px; background: var(--surface); }
.rl-tech > summary { cursor: pointer; font-weight: 600; font-size: 14px; }
.rl-tech[open] > summary { margin-bottom: 14px; }
.rl-tech > .sts, .rl-tech > section { margin-top: 14px; }
@media (max-width: 760px) { .rl-row { grid-template-columns: minmax(0, 1fr); } }
.rl-group { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; }
.rl-group:last-child { margin-bottom: 0; }
.rl-group .rl-from { margin-right: 4px; }
.rl-row > span:has(.rl-group) { display: grid; }

/* Environments: the three-step strip, the guided flow and one card per environment. */
.env-strip { list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.env-strip li { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text-2); font-size: 12.5px; }
.env-strip b, .env-num { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 600 11.5px var(--font-data); color: var(--gold); border: 1.5px solid var(--gold); }
.env-step { padding: 14px 20px; border-top: 1px solid var(--rule); }
.env-step:first-child { border-top: 0; }
.env-step-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13.5px; }
.env-step.env-done .env-num { color: var(--green); border-color: var(--green); }
.env-step-body { margin: 12px 0 0 32px; display: grid; gap: 12px; }
.env-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.env-card { display: grid; gap: 4px; text-align: left; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--canvas); color: var(--text); cursor: pointer; font-size: 12.5px; }
.env-card:hover:not(:disabled) { border-color: var(--gold); }
.env-card:disabled { opacity: .55; cursor: default; }
.env-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.env-chip, .env-tag { display: inline-block; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--border); font: 500 11px var(--font-data); color: var(--text-2); }
.env-tag { margin-left: 8px; color: var(--cyan); border-color: color-mix(in srgb, var(--cyan) 40%, transparent); }
.env-other { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; }
.env-other input { flex: 1 1 260px; }
.env-kinds { display: flex; flex-wrap: wrap; gap: 6px; }
.env-plan { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 6px 14px; margin: 0; font-size: 12.5px; }
.env-plan dt { color: var(--text-3); }
.env-plan dd { margin: 0; }
.env-warn { padding: 8px 12px; border: 1px solid color-mix(in srgb, var(--amber) 40%, transparent); background: color-mix(in srgb, var(--amber) 10%, transparent); border-radius: var(--radius); font-size: 12.5px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.env-adjust > summary, .env-advanced > summary { cursor: pointer; color: var(--text-2); font-size: 12.5px; }
.env-adjust[open] > summary { margin-bottom: 4px; }
.env-go { padding: 14px 20px; border-top: 1px solid var(--rule); }
.env-progress { display: inline-flex; align-items: center; gap: 8px; color: var(--amber); font-size: 13px; }
.env-progress svg { animation: spin 1s linear infinite; }
.env-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) minmax(170px, auto) auto; gap: 6px 16px; align-items: center; padding: 14px 20px; border-top: 1px solid var(--rule); }
.env-row:first-child { border-top: 0; }
.env-icon { width: 34px; height: 34px; border-radius: var(--radius); display: grid; place-items: center; background: var(--raised); color: var(--text-2); }
.env-what { display: grid; gap: 2px; min-width: 0; font-size: 12.5px; }
.env-what b { font-size: 13.5px; }
.env-built { color: var(--text-2); }
.env-status { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 500; }
.env-status i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.env-status.ok { color: var(--green); }
.env-status.wait { color: var(--amber); }
.env-status.bad { color: var(--red); }
.env-acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.env-out { grid-column: 2 / -1; font-size: 12.5px; }
.env-out pre { margin: 6px 0 0; max-height: 220px; overflow: auto; padding: 8px 12px; background: var(--canvas); border: 1px solid var(--border); border-radius: var(--radius); font-size: 12px; white-space: pre-wrap; }
.env-advanced { margin-top: 16px; display: grid; gap: 16px; }
.env-advanced > summary { padding: 10px 0; }
@media (max-width: 760px) {
  .env-strip { grid-template-columns: minmax(0, 1fr); }
  .env-row { grid-template-columns: 34px minmax(0, 1fr); }
  .env-status, .env-acts, .env-out { grid-column: 2 / -1; justify-content: flex-start; }
  .env-step-body { margin-left: 0; }
  .env-plan { grid-template-columns: minmax(0, 1fr); }
}

/* Environments: the add flow's stepper and choosable cards */
.env-stepper { list-style: none; margin: 0; padding: 12px 20px; display: flex; gap: 8px; flex-wrap: wrap; border-bottom: 1px solid var(--rule); }
.env-stepper li { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 6px; border-radius: 999px; border: 1px solid var(--border); font-size: 12.5px; color: var(--text-3); }
.env-stepper li span { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font: 600 11px var(--font-data); border: 1.5px solid currentColor; }
.env-stepper li.now { color: var(--text); border-color: var(--gold); background: color-mix(in srgb, var(--gold) 10%, transparent); }
.env-stepper li.now span { color: var(--gold); }
.env-stepper li.done { color: var(--green); border-color: color-mix(in srgb, var(--green) 45%, transparent); }
.env-card { position: relative; gap: 6px; padding: 14px 16px; transition: border-color .15s ease, background .15s ease; }
.env-card:hover:not(:disabled), .env-card:focus-visible { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 6%, var(--canvas)); }
.env-card-top { display: flex; align-items: center; gap: 10px; }
.env-card-top b { font-size: 14px; }
.env-radio { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--text-3); flex: none; }
.env-card:hover:not(:disabled) .env-radio { border-color: var(--gold); box-shadow: inset 0 0 0 3px var(--canvas); background: var(--gold); }
.env-choose { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--gold); font-weight: 600; }
.env-card .mono { font-size: 12px; overflow-wrap: anywhere; }
.env-link { border: 0; background: none; padding: 0; color: var(--text-2); font-size: 12.5px; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; justify-self: start; }
.env-link:hover { color: var(--text); }
.env-explain { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--text-2); max-width: 80ch; }
.env-found { margin: 0; font-size: 13.5px; line-height: 1.6; }
.env-found .env-link { margin-left: 6px; }
.env-add { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border: 1px dashed var(--border); border-radius: var(--radius); }
.env-add-head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.env-add-ways { display: flex; gap: 8px; flex-wrap: wrap; }
.env-add-body { display: flex; flex-direction: column; gap: 10px; }
.env-add-body p { margin: 0; font-size: 12.5px; line-height: 1.55; }
.env-field { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 10px; align-items: center; font-size: 13px; }
.env-field input { max-width: 520px; }
.env-add-go { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
@media (max-width: 640px) { .env-field { grid-template-columns: 1fr; gap: 4px; } }
.env-choose-foot { align-self: end; padding-top: 4px; margin-left: 0; }
.prj-ways { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; padding: 14px 20px 0; }
.prj-way { display: grid; gap: 6px; text-align: left; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--canvas); color: var(--text); cursor: pointer; font-size: 12.5px; line-height: 1.5; }
.prj-way:hover, .prj-way:focus-visible { border-color: var(--gold); }
.prj-way.on { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 7%, var(--canvas)); }
.prj-way.on .env-radio { border-color: var(--gold); box-shadow: inset 0 0 0 4px var(--gold); }
.prj-form { padding: 6px 0 0; }
.prj-more { margin: 10px 20px 16px; }
.prj-choice { display: grid; gap: 10px; }
.prj-choice label { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; line-height: 1.5; cursor: pointer; }
.prj-choice label > span { display: grid; gap: 2px; }
.prj-choice label.off { opacity: .7; cursor: default; }
.prj-choice input { margin-top: 3px; }
.prj-body { margin-left: 0; }
.prj-facts { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 3px 12px; margin: 6px 0 0; font-size: 12.5px; }
.prj-facts dt { color: var(--text-3); }
.prj-facts dd { margin: 0; color: var(--text-2); }
.prj-note { margin-top: 8px; padding: 8px 12px; border: 1px solid color-mix(in srgb, var(--cyan) 35%, transparent); border-radius: var(--radius); font-size: 12.5px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.prj-publish { display: grid; gap: 8px; padding: 10px 14px; border: 1px dashed var(--border); border-radius: var(--radius); }
.prj-publish p { margin: 0; }
.prj-app-hint { font-size: 12px; align-self: center; animation: rise .3s ease both; }
.merge-rule.fresh { animation: rise .35s cubic-bezier(.2,.8,.2,1) both; }
.intake-app { animation: rise .3s ease both; }
.merge-templates .btn { transition: transform .15s ease, background-color .15s ease; }
.merge-templates .btn:not(:disabled):hover { transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) { .merge-rule.fresh, .intake-app { animation: none; } .merge-templates .btn:not(:disabled):hover { transform: none; } }
@media (prefers-reduced-motion: reduce) { .prj-app-hint { animation: none; } }
@media (max-width: 640px) { .prj-facts { grid-template-columns: 1fr; } }
.env-row.prj-row { grid-template-columns: 34px minmax(0, 1fr) auto; align-items: start; row-gap: 10px; }
.prj-row .env-status { padding-top: 2px; }
.prj-row .env-acts { grid-column: 2 / -1; justify-content: flex-start; }
.prj-row .env-out { grid-column: 2 / -1; }
@media (max-width: 640px) { .env-row.prj-row { grid-template-columns: 34px minmax(0, 1fr); } .prj-row .env-status { grid-column: 2; } }
/* Remote machines and a project's .kyrvis settings (ADR-0095) */
.mch-steps { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 2px; font-size: 12.5px; }
.mch-steps li { padding-left: 18px; position: relative; color: var(--text-2); }
.mch-steps li::before { content: "·"; position: absolute; left: 6px; }
.mch-steps li.ok::before { content: "✓"; color: var(--green); left: 2px; }
.mch-steps li.failed { font-weight: 400; }
.mch-steps li.failed::before { content: "✕"; color: var(--red); left: 2px; }
.mch-steps li.skip { color: var(--text-3); }
.prj-settings { grid-column: 2 / -1; }
.prj-settings-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.prj-settings .prj-also { margin-top: 8px; }
.prj-settings .chip-toggle .mono { font-size: 12px; }
.prj-confirm { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--amber) 40%, transparent); border-radius: var(--radius); }
.prj-confirm p { margin: 0; }
/* A service beside a toolbox (R-2): its card is neutral, not a warning. */
.svc-card { border-color: var(--border); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); align-items: end; }
.svc-card .svc-more { grid-column: 1 / -1; display: grid; gap: 6px; }
.svc-card .svc-more summary { cursor: pointer; color: var(--text-3); }
.svc-state { display: grid; gap: 4px; margin-top: 6px; }
.svc-state pre { margin: 0; max-height: 200px; overflow: auto; padding: 6px 10px; font-size: 12px; white-space: pre-wrap; }
.prj-confirm pre { margin: 0; max-height: 260px; overflow: auto; padding: 8px 12px; background: var(--canvas); border: 1px solid var(--border); border-radius: var(--radius); font-size: 12px; white-space: pre-wrap; }
.prj-either { margin: 8px 0 0; font-size: 12px; }
.prj-other { display: grid; gap: 8px; margin-top: 10px; }
.prj-other p { margin: 0; font-size: 12px; }
.prj-also { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; font-size: 12.5px; }
.prj-check { display: inline-flex; gap: 6px; align-items: center; cursor: pointer; }

/* Settings: Connectors (ADR-0069) */
/* A sign-in's own row (the account of a basic sign-in) rises in when chosen. */
.cn-rise { animation: rise .28s ease-out both; }
@media (prefers-reduced-motion: reduce) { .cn-rise { animation: none; } }
.cn-banner { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); font-size: 13px; line-height: 1.5; }
.cn-banner > div:first-of-type { flex: 1 1 320px; }
.cn-banner.ok { border-color: color-mix(in srgb, var(--green) 45%, transparent); } .cn-banner.ok > svg { color: var(--green); }
.cn-banner.bad { border-color: color-mix(in srgb, var(--red) 45%, transparent); } .cn-banner.bad > svg { color: var(--red); }
.cn-banner-acts { display: flex; gap: 6px; align-items: center; }
.cn-catalog { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; padding: 14px 20px 16px; }
.cn-entry { display: grid; gap: 6px; align-content: start; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--canvas); font-size: 12.5px; line-height: 1.5; }
.cn-entry:focus-within { border-color: var(--gold); }
.cn-entry b { font-size: 14px; }
.cn-entry.scratch { border-style: dashed; }
.cn-needs { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; margin: 2px 0 0; }
.cn-needs dt { color: var(--text-3); } .cn-needs dd { margin: 0; overflow-wrap: anywhere; }
.cn-entry-acts { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
/* A catalog entry's setup guide and what couldn't be verified (ADR-0098). */
.cn-guide summary { cursor: pointer; color: var(--text-2); }
.cn-guide ol { margin: 6px 0 4px; padding-left: 20px; display: grid; gap: 3px; }
.cn-guide p { margin: 4px 0 0; overflow-wrap: anywhere; }
.cn-guide.open { margin: 14px 20px 0; padding: 12px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--canvas); font-size: 12.5px; line-height: 1.55; display: grid; gap: 6px; }
.cn-unverified { padding: 6px 10px; border-left: 3px solid var(--amber); background: color-mix(in srgb, var(--amber) 8%, transparent); border-radius: 0 var(--radius) var(--radius) 0; font-size: 12px; line-height: 1.5; }
.cn-unverified b { font-weight: 600; }
.cn-fine { font-size: 12px; }
.cn-callback { font: 12.5px var(--font-data); user-select: all; overflow-wrap: anywhere; min-width: 0; }
.cn-picks { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; }
.cn-picks label { display: flex; gap: 8px; align-items: center; }
.cn-error { margin: 0 20px 14px; padding: 10px 14px; border: 1px solid color-mix(in srgb, var(--red) 45%, transparent); background: color-mix(in srgb, var(--red) 8%, transparent); border-radius: var(--radius); font-size: 13px; line-height: 1.55; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.cn-error b { color: var(--red); font-weight: 600; }
.cn-msg { overflow-wrap: anywhere; } .cn-hint { display: block; width: 100%; color: var(--text-2); font-size: 12.5px; }
.cn-where { overflow-wrap: anywhere; }
.cn-badges { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.cn-badges li { padding: 1px 9px; border-radius: 999px; border: 1px solid var(--border); font-size: 11.5px; font-weight: 500; color: var(--text-2); }
.cn-badges li.ok { color: var(--green); border-color: color-mix(in srgb, var(--green) 40%, transparent); }
.cn-badges li.wait { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 40%, transparent); }
.cn-badges li.bad { color: var(--red); border-color: color-mix(in srgb, var(--red) 40%, transparent); }
.prj-note.wait { border-color: color-mix(in srgb, var(--amber) 40%, transparent); }
.prj-note.bad { border-color: color-mix(in srgb, var(--red) 40%, transparent); }
.cn-failed pre { margin-top: 6px; }
.cn-failed .cn-hint { margin-top: 6px; }
.cn-tools > summary, .cn-history > summary { cursor: pointer; color: var(--text-2); font-size: 12.5px; padding: 2px 0; }
.cn-tools[open] > summary { margin-bottom: 6px; }
.cn-tools p { margin: 0 0 6px; }
.cn-tick-all { display: flex; gap: 12px; margin-bottom: 4px; }
.cn-tool-list { list-style: none; margin: 0 0 10px; padding: 0; border: 1px solid var(--rule); border-radius: var(--radius); max-height: 420px; overflow: auto; }
.cn-tool-list li + li { border-top: 1px solid var(--rule); }
.cn-tool-list label { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 12px; align-items: start; padding: 8px 12px; cursor: pointer; }
.cn-tool-list label:hover { background: var(--raised); }
.cn-tool-list input { margin-top: 3px; }
.cn-tool-list label > span:nth-child(2) { display: grid; gap: 2px; min-width: 0; }
.cn-tool-list b { font-size: 12.5px; font-weight: 500; overflow-wrap: anywhere; }
.cn-tool-list .dim { font-size: 12px; line-height: 1.45; }
.cn-ro { font-size: 11.5px; color: var(--text-3); white-space: nowrap; }
.cn-ro.on { color: var(--green); }
.cn-history table { font-size: 12.5px; margin-top: 6px; }
.cn-spin { animation: spin 1s linear infinite; vertical-align: -2px; }
.dp-conn { display: grid; gap: 8px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); font-size: 12.5px; }
.dp-conn-modes { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.dp-conn-modes label { display: inline-flex; gap: 6px; align-items: center; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .cn-spin { animation: none; } }
@media (max-width: 640px) {
  .cn-tool-list label { grid-template-columns: auto minmax(0, 1fr); }
  .cn-ro { grid-column: 2; }
  .cn-history { overflow-x: auto; }
  .cn-catalog { padding: 12px; }
  .cn-error { margin: 0 12px 12px; }
}

/* Costs, prices and the deployment page (COST-1, DEP-1, P-2c; ADR-0099) */
.cst-chart { width: 100%; height: auto; max-height: 220px; }
.cst-axis { stroke: var(--rule); stroke-width: 1; }
.cst-bar { fill: color-mix(in srgb, var(--gold) 70%, var(--surface)); }
.cst-proj { stroke: var(--gold); stroke-width: 1.6; stroke-dasharray: 5 4; }
.cst-range { fill: color-mix(in srgb, var(--gold) 14%, transparent); }
.cst-dot { fill: var(--gold); }
.cst-label { fill: var(--text); font: 600 12px var(--font-data); paint-order: stroke; stroke: var(--surface); stroke-width: 4px; }
.cst-tick { fill: var(--text-3); font: 10.5px var(--font-data); }
.cst-budget { display: grid; gap: 4px; padding: 10px 0; border-top: 1px solid var(--rule); }
.cst-budget:first-of-type { border-top: 0; }
.cst-budget-name { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.cst-bar-line { max-width: 420px; }
.cst-bar-line i.warning { background: var(--amber); }
.cst-bar-line i.reached { background: var(--red); }
.cst-table td.bad { color: var(--red); }
.cst-cell-bar { width: 22%; }
.cst-cell-bar i { display: block; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--gold) 65%, var(--surface)); }
.cst-form { display: grid; gap: 10px; margin-top: 12px; }
.cst-form h3 { margin: 0; font-size: 14px; }
.cst-note { display: grid; gap: 4px; font-size: 12.5px; color: var(--text-2); }
/* The signed price list (ADR-0225): where it came from, and what a new
   list changed, arriving as a notice; the rows it changed glow once. */
.cst-source { display: grid; gap: 4px; font-size: 12.5px; line-height: 1.6; }
.cst-notice { padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--gold) 45%, var(--rule)); border-radius: 8px; background: color-mix(in srgb, var(--gold) 7%, var(--surface)); }
.cst-notice .actions { margin-top: 8px; }
.cst-notice-enter-active, .cst-notice-leave-active { transition: opacity .35s ease, transform .35s cubic-bezier(.2, .8, .2, 1); }
.cst-notice-enter-from, .cst-notice-leave-to { opacity: 0; transform: translateY(-6px); }
.cst-changed { animation: cst-glow 2.4s ease-out 1; }
@keyframes cst-glow { 0% { background: color-mix(in srgb, var(--gold) 16%, transparent); } 100% { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .cst-notice-enter-active, .cst-notice-leave-active { transition: none; } .cst-changed { animation: none; } }
.in-tile b.bad { color: var(--red); }
.dep { display: grid; gap: 16px; }
.dep-node { cursor: default; }
.dep-boundary { stroke: var(--amber); stroke-width: 1.4; stroke-dasharray: 3 5; }
.dep-badge { display: inline-block; font: 600 12px var(--font-data); padding: 2px 9px; border-radius: 10px; color: var(--gold); border: 1px solid color-mix(in srgb, var(--gold) 50%, transparent); }
.dep-here { margin-left: 8px; font: 500 10.5px var(--font-data); color: var(--gold); text-transform: uppercase; letter-spacing: .04em; }
.dep-sizes button span { color: var(--gold); }
.dep-mine p { margin: 6px 0; line-height: 1.55; }
.dep-checks { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.dep-checks li { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 10px 12px; border-radius: 9px; border: 1px solid var(--rule); background: var(--surface); }
.dep-checks li p { margin: 2px 0 0; font-size: 13px; color: var(--text-2); }
.dep-checks .dep-fix { color: var(--text); }
.dep-state { font: 600 11.5px var(--font-data); text-transform: uppercase; letter-spacing: .03em; }
.dep-ok .dep-state { color: var(--green); } .dep-warn .dep-state { color: var(--amber); } .dep-fail .dep-state { color: var(--red); } .dep-info .dep-state { color: var(--text-3); }
.dep-fail { border-color: color-mix(in srgb, var(--red) 45%, var(--rule)) !important; }
.dep-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.dep-facts div { display: grid; gap: 4px; padding: 12px 14px; border: 1px solid var(--rule); border-radius: 10px; background: var(--surface); }
.dep-facts span { font-size: 12px; color: var(--text-3); }
.dep-facts b { font-weight: 500; font-size: 13.5px; line-height: 1.5; }
.dep-table-wrap { overflow-x: auto; }
.dep-table tr.dep-out td { color: var(--amber); }
.dep-prereqs { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 8px; }
.dep-prereqs li { line-height: 1.5; } .dep-prereqs b { font-weight: 500; display: block; } .dep-prereqs span { font-size: 12px; color: var(--text-3); }
.dep-offers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.dep-offer { padding: 12px 14px; border: 1px solid var(--rule); border-radius: 10px; background: var(--surface); }
.dep-offer.on { border-color: var(--gold); }
.dep-offer p { margin: 6px 0 0; font-size: 13px; color: var(--text-2); line-height: 1.5; }
.home-offer, .help-offer { margin: 4px 0 10px; font-size: 13px; color: var(--text-2); }
.home-offer a, .help-offer a { margin-left: 8px; }
@media (max-width: 760px) {
  .dep-facts, .dep-offers { grid-template-columns: 1fr; }
  .dep-checks li { grid-template-columns: 1fr; gap: 4px; }
  .cst-cell-bar { display: none; }
}

/* Ended as a person decided (AT-74, AT-121): declined, stalled and
   cancelled work is grey, kept apart from red failures. A step bar that
   ends so settles into grey rather than switching. */
.declined, .stalled, .canceled { color: var(--text-2); font-weight: 500; }
.st-declined, .st-stalled, .st-canceled { color: var(--text-2); background: color-mix(in srgb, var(--text-3) 12%, transparent); border-color: color-mix(in srgb, var(--text-3) 30%, transparent); }
.wl-row.r-declined, .wl-row.r-stalled, .wl-row.r-canceled { border-left-color: var(--text-3); }
.wl-row.r-declined b, .wl-row.r-stalled b, .wl-row.r-canceled b { color: var(--text-2); }
.wl-prog i { transition: background-color .5s ease; }
.wl-prog i.s-declined, .wl-prog i.s-stalled, .wl-prog i.s-canceled { background: var(--text-3); animation: endSettle .6s ease-out; }
.wi-step.s-declined i, .wi-step.s-stalled i, .wi-step.s-canceled i { background: var(--text-3); }
.pmap .pm-node.s-declined .pm-dot, .pmap .pm-node.s-stalled .pm-dot, .pmap .pm-node.s-canceled .pm-dot { fill: var(--raised); stroke: var(--text-3); stroke-width: 3; }
.pmap .s-declined .pm-mark, .pmap .s-stalled .pm-mark, .pmap .s-canceled .pm-mark { fill: var(--text-3); }
.pmap .s-declined .pm-sub, .pmap .s-stalled .pm-sub { fill: var(--text-2); }
.wl-views button.grey span { color: var(--text-2); }
.wl-views button.bad span { color: var(--red); font-weight: 700; }
@keyframes endSettle { from { transform: scaleY(1.8); opacity: .5; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .wl-prog i { transition: none; } .wl-prog i.s-declined, .wl-prog i.s-stalled, .wl-prog i.s-canceled { animation: none; } }

/* A department's Memory tab (ADR-0127): its switch, the approval queue, notes by hand */
.mem-top { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.mem-switch { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border-radius: 999px; border: 1px solid var(--border); background: var(--canvas); color: var(--text-2); font: 500 12.5px var(--font-ui); cursor: pointer; transition: border-color .2s, color .2s; }
.mem-switch i { position: relative; width: 30px; height: 18px; border-radius: 999px; background: var(--raised); transition: background .25s; }
.mem-switch i::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--text-3); transition: transform .3s cubic-bezier(.2, .8, .2, 1), background .25s; }
.mem-switch.on { border-color: var(--gold); color: var(--text); }
.mem-switch.on i { background: color-mix(in srgb, var(--gold) 35%, transparent); }
.mem-switch.on i::after { transform: translateX(12px); background: var(--gold); }
.mem-off { display: flex; gap: 8px; align-items: center; padding: 8px 12px; border-radius: var(--radius); border: 1px dashed var(--border); color: var(--text-2); font-size: 12.5px; animation: rise .2s ease-out; }
.mem-queue { display: grid; gap: 6px; margin: 0 16px; }
.mem-q-item { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 10px 12px; border-radius: var(--radius); border: 1px solid color-mix(in srgb, var(--amber) 45%, var(--border)); background: color-mix(in srgb, var(--amber) 6%, var(--surface)); flex-wrap: wrap; }
.mem-q-text { display: grid; gap: 3px; min-width: 0; flex: 1; font-size: 12.5px; line-height: 1.5; } .mem-q-text b { font-weight: 500; }
.mem-q-act { display: flex; gap: 6px; }
.mem-q-enter-active, .mem-q-leave-active, .mem-row-enter-active { transition: opacity .3s ease, transform .3s cubic-bezier(.2, .8, .2, 1); }
.mem-q-enter-from, .mem-row-enter-from { opacity: 0; transform: translateY(6px); }
.mem-q-leave-to { opacity: 0; transform: translateX(24px); }
.mem-row-leave-active { transition: opacity .2s ease; } .mem-row-leave-to { opacity: 0; }
.mem-add { margin: 4px 16px 0; }
.mem-add-form, .mem-edit { display: grid; gap: 6px; animation: rise .18s ease-out; }
.mem-add-form textarea, .mem-edit textarea { width: 100%; box-sizing: border-box; font-size: 12.5px; resize: vertical; }
.mem-add-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.mem-origin { font-size: 11.5px; color: var(--text-3); margin-top: 2px; }
/* Memory v1 (MEM-1): the settings, the review, a suspected conflict, the history. */
.mem-settings { margin: 0 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.mem-settings-head { display: flex; gap: 8px; align-items: center; width: 100%; padding: 8px 12px; border: 0; background: none; color: var(--text-2); font: 400 12px var(--font-ui); text-align: left; cursor: pointer; }
.mem-settings-head span:first-of-type { flex: 1; }
.mem-settings-head:hover { color: var(--text); }
.mem-settings-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px 12px; padding: 4px 12px 12px; font-size: 12px; }
.mem-settings-form label { display: grid; gap: 3px; color: var(--text-2); min-width: 0; }
.mem-settings-form label > input:not([type=checkbox]), .mem-settings-form label > select { width: 100%; min-width: 0; box-sizing: border-box; }
.mem-settings-form label.mem-check { display: flex; gap: 6px; align-items: center; grid-column: 1 / -1; }
.mem-review { border-color: color-mix(in srgb, var(--text-3) 45%, var(--border)); background: var(--surface); }
.mem-old { opacity: .78; border-style: dashed; border-color: var(--border); background: var(--canvas); }
.mem-old s { color: var(--text-2); }
.mem-suspect { display: flex; gap: 8px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-top: 4px; padding: 5px 8px; border-radius: var(--radius); border: 1px solid color-mix(in srgb, var(--amber) 45%, var(--border)); background: color-mix(in srgb, var(--amber) 6%, var(--surface)); font-size: 11.5px; animation: rise .2s ease-out; }
.mem-suspect-line { font-size: 11.5px; color: color-mix(in srgb, var(--amber) 70%, var(--text)); }
.mem-chain { font-size: 11.5px; color: var(--text-3); margin-top: 2px; }
.mem-history { display: block; border: 0; background: none; padding: 0; cursor: pointer; color: var(--text); text-align: left; }
@media (prefers-reduced-motion: reduce) { .mem-suspect { animation: none; } }

/* What a department's context settings did, on its Context tab (ADR-0127) */
.cx-effect { display: grid; gap: 10px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); animation: rise .2s ease-out; }
.cx-head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; } .cx-head b { font-weight: 600; } .cx-head .dim { font-size: 12px; }
.cx-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.cx-tile { display: grid; gap: 2px; padding: 8px 10px; border-radius: var(--radius); background: var(--canvas); border: 1px solid var(--rule); }
.cx-tile span { font-size: 12px; color: var(--text-3); } .cx-tile b { font: 600 22px var(--font-ui); } .cx-tile em { font-style: normal; font-size: 11.5px; color: var(--text-3); line-height: 1.4; }
.cx-tile.warn b { color: var(--amber); }
.cx-rows { display: grid; gap: 4px; }
.cx-row { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 12px; }
.cx-name { justify-content: flex-start; gap: 6px; height: 22px; padding: 0 6px; font: 12px var(--font-data); } .cx-name .dim { font-size: 11px; }
.cx-bar { position: relative; height: 10px; border-radius: 3px; background: var(--rule); overflow: visible; }
.cx-bar i { position: absolute; left: 0; top: 0; height: 100%; border-radius: 3px; transform-origin: left; animation: inWide .8s cubic-bezier(.2, .8, .2, 1) both; animation-delay: var(--d, 0s); }
.cx-max { background: color-mix(in srgb, var(--gold) 40%, transparent); } .cx-max.over { background: color-mix(in srgb, var(--amber) 60%, transparent); }
.cx-mean { background: var(--gold); }
.cx-bar i.cx-budget { width: 2px; top: -3px; height: 16px; background: var(--text-2); animation: none; border-radius: 1px; }
.cx-nums { color: var(--text-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cx-recent summary { cursor: pointer; font-size: 12.5px; color: var(--text-2); }
@media (max-width: 700px) { .cx-row { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .cx-effect, .cx-bar i, .mem-off, .mem-add-form, .mem-edit { animation: none; } .mem-switch i, .mem-switch i::after { transition: none; } }

/* Organization policy and the claim checker's calibration (ADR-0128) */
.op-pre { margin: 0; padding: 12px 14px; background: var(--raised); border: 1px solid var(--rule); border-radius: var(--radius); font: 12px/1.55 var(--font-data); white-space: pre-wrap; overflow-x: auto; max-height: 420px; color: var(--text-2); }
.sts-body > .op-pre { margin: 10px 0 4px; }
.op-rise { animation: rise .32s cubic-bezier(.2, .8, .2, 1) both; }
.op-banner { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; margin: 0 0 12px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); font-size: 13px; line-height: 1.55; }
.op-banner.attention { border-color: color-mix(in srgb, var(--amber) 55%, var(--border)); } .op-banner.attention .icon { color: var(--amber); flex: none; margin-top: 2px; }
.op-verdict { display: inline-flex; gap: 6px; align-items: center; font-size: 12px; font-weight: 600; color: var(--text-2); margin: 8px 0; }
.op-verdict.ok { color: var(--green); } .op-verdict.no { color: var(--amber); }
.op-verdict .spin { animation: spin 1s linear infinite; }
.op-conflicts { margin: 8px 0; padding-left: 20px; display: grid; gap: 4px; font-size: 13px; }
.op-draft, .cal-set { width: 100%; min-height: 120px; font-size: 12px; line-height: 1.5; resize: vertical; }
.cal-in { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.cal-run { display: grid; gap: 8px; margin: 6px 0 12px; } .cal-run .skel i { height: 8px; }
.cal-head { display: flex; gap: 28px; align-items: flex-end; flex-wrap: wrap; margin: 6px 0 14px; }
.cal-big b { display: block; font-size: 34px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; color: var(--text); animation: rise .5s cubic-bezier(.2, .8, .2, 1) both; }
.cal-big span, .cal-facts span { font-size: 12.5px; color: var(--text-2); }
.cal-facts { display: flex; gap: 18px; flex-wrap: wrap; } .cal-facts b { color: var(--text); font-variant-numeric: tabular-nums; }
.cal-scores td { white-space: nowrap; }
.cal-bar { display: inline-block; width: 70px; height: 6px; border-radius: 3px; margin-right: 8px; vertical-align: middle; overflow: hidden; } .cal-bar i { display: block; height: 100%; }
.cal-note { font-size: 12px; line-height: 1.55; margin: 10px 0; }
.cal-hit { color: var(--green); font-weight: 600; }
.cal-list { display: grid; gap: 6px; }
.cal-item { display: grid; grid-template-columns: 70px 1fr auto; gap: 12px; align-items: center; text-align: left; padding: 8px 12px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); color: var(--text); cursor: pointer; transition: border-color .15s ease, transform .15s ease; }
.cal-item:hover { border-color: var(--border); transform: translateX(2px); } .cal-item.on { border-color: var(--gold); }
.cal-item b { font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .cal-item { grid-template-columns: 56px 1fr; } .cal-item .dim { grid-column: 1 / -1; } }
@media (prefers-reduced-motion: reduce) { .op-rise, .cal-big b, .op-verdict .spin { animation: none; } .cal-item { transition: none; } }
/* Knowledge (W7): the services card opens with a slide, a test result and a
   refused upload rise in, and Add documents glows after Create. */
.kbs-open-enter-active, .kbs-open-leave-active { transition: opacity .2s ease, transform .2s ease; }
.kbs-open-enter-from, .kbs-open-leave-to { opacity: 0; transform: translateY(-4px); }
.kbs-tried, .kb-refused, .kb-picked, .kb-note { animation: rise .25s ease-out; }
.kb-refused { border: 1px solid color-mix(in srgb, var(--red, #d9534f) 55%, transparent); background: color-mix(in srgb, var(--red, #d9534f) 7%, transparent); border-radius: var(--radius); padding: 10px 12px; display: grid; gap: 4px; font-size: 12.5px; }
.kb-refused ul { margin: 0; padding-left: 18px; }
.kb-refused li { animation: rise .25s ease-out both; }
.kb-picked { border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent); background: color-mix(in srgb, var(--gold) 8%, transparent); border-radius: var(--radius); padding: 8px 12px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 12.5px; }
.kb-focus { animation: kbFocus 1.4s ease-out 2; }
@keyframes kbFocus { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--gold) 55%, transparent); } 100% { box-shadow: 0 0 0 10px transparent; } }
/* A setting's sentence under its label (AT-NEW-89); a rule picked from the
   file-name presets; the services' state, a run's changes and the drafts'
   bulk bar rise in, and a preset or a draft ticked settles in. */
.kb-help { display: block; flex-basis: 100%; font-size: 11.5px; line-height: 1.5; color: var(--text-3); font-weight: 400; }
.form label.check { flex-wrap: wrap; }
.form label.check > .kb-help { padding-left: 22px; }
.kb-rule { border: 1px solid var(--border); border-radius: var(--radius); padding: 6px 10px; animation: rise .25s ease-out; }
.kb-rule details summary { cursor: pointer; font-size: 11.5px; }
.kb-services-state > span, .kb-run-changes td, .kb-bulk { animation: rise .25s ease-out both; }
.kb-services-state > span:nth-child(2) { animation-delay: 40ms; }
.kb-services-state > span:nth-child(3) { animation-delay: 80ms; }
tr:has(> td > input[type=checkbox]:checked) { background: color-mix(in srgb, var(--gold) 7%, transparent); transition: background .2s ease; }
@media (prefers-reduced-motion: reduce) { .kbs-open-enter-active, .kbs-open-leave-active { transition: none; } .kbs-tried, .kb-refused, .kb-refused li, .kb-picked, .kb-note, .kb-focus, .kb-rule, .kb-services-state > span, .kb-run-changes td, .kb-bulk { animation: none; } }
/* Rules a person may read but not change (#24): said once, at the top. */
.ro-note { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--text-2); background: color-mix(in srgb, var(--cyan) 8%, var(--surface)); border: 1px solid color-mix(in srgb, var(--cyan) 30%, var(--border)); border-radius: 8px; padding: 8px 12px; }
fieldset:disabled input, fieldset:disabled textarea, fieldset:disabled select { cursor: default; opacity: .85; }

/* The next step, offered right where the last one ended (fewest clicks): it slides in and glows once. */
.next-step { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0 0 12px; padding: 10px 12px; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--gold) 45%, var(--border)); background: color-mix(in srgb, var(--gold) 9%, var(--surface)); font-size: 13px; animation: next-step-in .5s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes next-step-in { 0% { opacity: 0; transform: translateY(-6px); box-shadow: 0 0 0 0 color-mix(in srgb, var(--gold) 45%, transparent); } 60% { opacity: 1; box-shadow: 0 0 0 7px transparent; } 100% { opacity: 1; transform: none; box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .next-step { animation: none; } }
/* Common schedules, one click each (AT-216). */
.sch-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.sch-preset { border: 1px solid var(--border); background: var(--surface); color: var(--text-2); border-radius: 16px; padding: 5px 11px; font: 500 12.5px var(--font-ui); cursor: pointer; transition: border-color .15s ease, background-color .15s ease, color .15s ease, transform .12s ease; }
.sch-preset:hover { border-color: var(--gold); color: var(--text); }
.sch-preset:active { transform: scale(.96); }
.sch-preset.on { color: var(--text); border-color: var(--gold); background: color-mix(in srgb, var(--gold) 12%, var(--surface)); }
/* Approval channels: a channel whose last post failed (#32). */
.ch-fail { display: flex; gap: 6px; align-items: flex-start; margin-top: 4px; }

/* The Ask page (ADR-0150, K-10): conversations on the left, the thread and its composer, the passage in its document on the right. */
.ap { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 16px; height: calc(100vh - 96px); min-height: 520px; }
.ap.withdoc { grid-template-columns: 250px minmax(0, 1fr) minmax(320px, 420px); }
.ap-side { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.ap-new { justify-content: center; }
.ap-find { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text-3); transition: border-color .2s ease; }
.ap-find:focus-within { border-color: var(--gold); }
.ap-find input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font: 13px var(--font-ui); }
.ap-list { flex: 1; min-height: 0; overflow: auto; display: grid; gap: 2px; align-content: start; }
.ap-conv { position: relative; display: flex; align-items: center; border-radius: 8px; border: 1px solid transparent; animation: rise .3s ease-out both; transition: background .15s ease, border-color .15s ease; }
.ap-conv:hover { background: var(--surface); }
.ap-conv.on { background: var(--surface); border-color: color-mix(in srgb, var(--gold) 45%, var(--border)); box-shadow: inset 2px 0 0 var(--gold); }
.ap-conv-a { flex: 1; min-width: 0; display: grid; gap: 1px; padding: 7px 10px; color: var(--text); text-decoration: none; }
.ap-conv-a b { font-weight: 500; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-conv-a span { font: 11px var(--font-data); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-conv-acts { display: flex; gap: 2px; padding-right: 6px; opacity: 0; transition: opacity .15s ease; }
.ap-conv:hover .ap-conv-acts, .ap-conv:focus-within .ap-conv-acts, .ap-conv.on .ap-conv-acts { opacity: 1; }
.ap-rename { flex: 1; margin: 4px; height: 30px; padding: 0 8px; border: 1px solid var(--gold); border-radius: 6px; background: var(--canvas); color: var(--text); font: 13px var(--font-ui); }
.ap-none { padding: 8px 10px; font-size: 12.5px; line-height: 1.5; }
.ap-ic { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 6px; background: none; color: var(--text-3); cursor: pointer; transition: color .15s ease, background .15s ease; }
.ap-ic:hover { color: var(--text); background: var(--raised); }
.ap-ic.big { width: 32px; height: 32px; }
.ap-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; border: 1px solid var(--border); border-radius: 12px; background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--raised) 70%, transparent) 0%, var(--surface) 60%); overflow: hidden; }
.ap-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 20px; border-bottom: 1px solid var(--rule); }
.ap-title { margin: 0; font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; animation: rise .25s ease-out; }
.ap-files { display: flex; flex-wrap: wrap; gap: 6px; }
.ap-file { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 4px 0 8px; border: 1px solid var(--border); border-radius: 12px; font: 11.5px var(--font-data); color: var(--text-2); background: var(--canvas); animation: rise .2s ease-out; }
.ap-x { border: 0; background: none; color: var(--text-3); cursor: pointer; font-size: 14px; line-height: 1; padding: 0 4px; border-radius: 8px; }
.ap-x:hover { color: var(--red); }
.ap-thread { flex: 1; min-height: 0; overflow: auto; padding: 20px 24px; display: grid; gap: 22px; align-content: start; scroll-behavior: smooth; }
.ap-empty { display: grid; justify-items: center; gap: 16px; padding: 48px 12px 12px; text-align: center; animation: rise .35s ease-out; }
.ap-empty .ask-chips { justify-content: center; }
.ap-orb .ask-core { animation: apBreathe 3.2s ease-in-out infinite; transform-origin: 11px 11px; }
@keyframes apBreathe { 50% { transform: scale(.82); opacity: .8; } }
.ap-intro { margin: 0; max-width: 620px; color: var(--text-2); font-size: 14px; line-height: 1.6; }
.ap-turn { display: grid; gap: 10px; animation: rise .25s ease-out; max-width: 900px; width: 100%; justify-self: center; }
.ap-q { justify-self: end; max-width: 80%; display: grid; gap: 4px; padding: 9px 14px; border-radius: 12px 12px 4px 12px; background: var(--raised); border: 1px solid var(--border); font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; animation: apIn .25s ease-out; }
.ap-q small { font: 11px var(--font-data); color: var(--text-3); display: inline-flex; align-items: center; gap: 4px; }
@keyframes apIn { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }
.ap-a { font-size: 14.5px; }
.ap-a pre { background: var(--canvas); border: 1px solid var(--rule); border-radius: 6px; padding: 10px 12px; overflow: auto; font: 12.5px var(--font-data); }
.ap-a .md-table { overflow: auto; }
.ap-scan { max-width: 520px; }
.ap-withheld b { color: var(--amber); font-weight: 600; }
.ap-srcs .ask-src { cursor: pointer; background: none; font-family: var(--font-ui); }
.ap-src { border-color: color-mix(in srgb, var(--cyan) 40%, var(--border)); }
.ap-src:hover { border-color: var(--cyan); }
.ap-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ap-by { font: 11px var(--font-data); color: var(--text-3); border: 1px solid var(--rule); border-radius: 4px; padding: 1px 6px; }
.ap-composer { display: grid; gap: 8px; padding: 12px 20px 14px; border-top: 1px solid var(--rule); background: var(--surface); }
.ap-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12.5px; }
.ap-fl { display: inline-flex; align-items: center; gap: 5px; color: var(--text-3); font: 11px var(--font-data); text-transform: uppercase; letter-spacing: .06em; margin-right: 2px; }
.ap-filters select { flex: 0 1 auto; min-width: 0; height: 26px; max-width: 180px; padding: 0 6px; border: 1px solid var(--border); border-radius: 6px; background: var(--canvas); color: var(--text); font: 12.5px var(--font-ui); transition: border-color .15s ease; }
.ap-filters select:focus { border-color: var(--gold); outline: 0; }
.ap-filters select:disabled { opacity: .5; }
.ap-clear { border: 0; background: none; color: var(--gold); cursor: pointer; font-size: 12.5px; }
.ap-fnote { font-size: 12px; }
.ap-box { display: grid; gap: 6px; padding: 8px 8px 6px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--canvas); transition: border-color .2s ease, box-shadow .2s ease; }
.ap-box:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 14%, transparent); }
.ap-box textarea { width: 100%; min-height: 44px; max-height: 220px; resize: vertical; border: 0; outline: 0; background: transparent; color: var(--text); font: 15px/1.5 var(--font-ui); padding: 4px 0; }
.ap-tools { display: flex; align-items: center; gap: 8px; }
.ap-tools .grow { flex: 1; }
.ap-mode { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.ap-mode button { height: 28px; padding: 0 10px; border: 0; background: none; color: var(--text-3); font: 12px var(--font-ui); cursor: pointer; transition: background .15s ease, color .15s ease; }
.ap-mode button.on { background: var(--raised); color: var(--text); box-shadow: inset 0 -2px 0 var(--gold); }
.ap-picker { position: relative; }
.ap-model { display: inline-flex; align-items: center; gap: 7px; height: 28px; max-width: 280px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; background: none; color: var(--text); font: 12px var(--font-data); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: border-color .15s ease; }
.ap-model:hover, .ap-model[aria-expanded="true"] { border-color: var(--gold); }
.ap-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex: none; display: inline-block; animation: apPulse 2.4s ease-in-out infinite; }
.remote > .ap-dot, .ap-opt.remote .ap-dot { background: var(--amber); }
@keyframes apPulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.ap-pop { position: absolute; bottom: 36px; left: 0; z-index: 20; width: min(420px, 80vw); max-height: 360px; overflow: auto; display: grid; gap: 2px; padding: 6px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); box-shadow: 0 18px 50px rgba(0, 0, 0, .45); animation: rise .16s ease-out; }
.ap-opt { display: grid; gap: 2px; text-align: left; padding: 8px 10px; border: 1px solid transparent; border-radius: 8px; background: none; color: var(--text); cursor: pointer; transition: background .12s ease, border-color .12s ease; }
.ap-opt:hover:not(:disabled) { background: var(--raised); }
.ap-opt.on { border-color: color-mix(in srgb, var(--gold) 55%, var(--border)); }
.ap-opt.off { opacity: .55; cursor: not-allowed; }
.ap-opt b { display: flex; align-items: center; gap: 7px; font: 500 12.5px var(--font-data); }
.ap-opt em { font: normal 10.5px var(--font-ui); color: var(--gold); border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent); border-radius: 8px; padding: 0 6px; }
.ap-opt span { font-size: 11.5px; color: var(--text-3); padding-left: 14px; }
.ap-opt .ap-ref { color: var(--amber); }
.ap-remote { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--text-2); border-left: 2px solid var(--amber); padding: 2px 0 2px 10px; animation: rise .2s ease-out; }
.ap-remote b { color: var(--amber); font-weight: 600; }
.ap-doc { display: flex; flex-direction: column; min-height: 0; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); overflow: hidden; animation: apSlide .28s cubic-bezier(.2, .8, .2, 1); }
@keyframes apSlide { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
.ap-doc-head { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--rule); }
.ap-doc-head > div { flex: 1; min-width: 0; display: grid; gap: 3px; }
.ap-doc-head b { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.ap-doc-head .dim { font: 11px var(--font-data); overflow-wrap: anywhere; }
.ap-tags { display: flex; gap: 6px; }
.ap-tags em { font: normal 11px var(--font-data); color: var(--gold); border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent); border-radius: 8px; padding: 1px 7px; }
.ap-doc-body { flex: 1; min-height: 0; overflow: auto; padding: 12px 14px; display: grid; gap: 10px; align-content: start; }
.ap-pass { padding: 8px 10px; border-left: 2px solid transparent; border-radius: 4px; font-size: 13px; line-height: 1.55; color: var(--text-2); transition: background .3s ease; }
.ap-pass.on { color: var(--text); border-left-color: var(--gold); background: color-mix(in srgb, var(--gold) 9%, transparent); animation: apGlow 1.6s ease-out; }
@keyframes apGlow { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--gold) 45%, transparent); } 100% { box-shadow: 0 0 0 10px transparent; } }
.ap-sec { font: 11px var(--font-data); color: var(--text-3); margin-bottom: 4px; }
.ap-doc-foot { display: flex; gap: 8px; align-items: baseline; padding: 10px 14px; border-top: 1px solid var(--rule); font-size: 12.5px; }
.ask-continue { margin-left: auto; }
@media (max-width: 1100px) { .ap.withdoc { grid-template-columns: 250px minmax(0, 1fr); } .ap-doc { position: fixed; z-index: 35; top: 56px; right: 8px; bottom: 8px; width: min(440px, calc(100vw - 16px)); box-shadow: 0 18px 50px rgba(0, 0, 0, .45); } }
@media (max-width: 760px) { .ap, .ap.withdoc { grid-template-columns: minmax(0, 1fr); height: auto; } .ap-side { max-height: 200px; } .ap-main { min-height: 70vh; } .ap-thread { padding: 14px; } .ap-q { max-width: 92%; } .ap-box textarea { font-size: 16px; } }
@media (prefers-reduced-motion: reduce) { .ap-conv, .ap-title, .ap-file, .ap-empty, .ap-orb .ask-core, .ap-turn, .ap-q, .ap-dot, .ap-pop, .ap-remote, .ap-doc, .ap-pass.on { animation: none; } .ap-thread { scroll-behavior: auto; } }

/* Improving (OR-6, OR-8): canaries with their guardrails live, and the
   failure clusters as hypothesis cards. Every motion here says something:
   a running canary breathes, an interval slides to where the evidence
   puts it, a breach flashes once, the cards rise in turn, the next
   failure to label slides in. Calm under reduced motion. */
.im { display: grid; gap: 16px; min-width: 0; }
.im .sts-body { padding: 14px 20px 16px; display: grid; gap: 12px; }
.im-empty { padding: 6px 0; font-size: 13px; }
.im-count { display: inline-block; min-width: 18px; margin-left: 6px; padding: 0 5px; border-radius: 9px; background: var(--gold); color: var(--on-amber); font: 600 11px/18px var(--font-data); text-align: center; animation: kbFocus 1.6s ease-out 1; }
.im-try { display: grid; gap: 10px; padding: 12px; border: 1px dashed color-mix(in srgb, var(--gold) 55%, var(--border)); border-radius: 10px; animation: rise .22s ease-out; }
.im-step { display: grid; gap: 6px; padding: 8px 10px; border-left: 2px solid var(--rule); border-radius: 4px; transition: border-color .2s ease, background-color .2s ease; }
.im-step.changed { border-left-color: var(--gold); background: color-mix(in srgb, var(--gold) 7%, transparent); }
.im-step-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13px; }
.im-step-head select { margin-left: auto; }
.im-step textarea { width: 100%; font-size: 13px; }
.im-canaries, .im-cards { display: grid; gap: 12px; }
.im-canary { display: grid; gap: 8px; padding: 14px 16px; border: 1px solid var(--rule); border-radius: 12px; background: var(--canvas); animation: rise .3s ease-out both; }
.im-canary.st-running { border-color: color-mix(in srgb, var(--green) 35%, var(--rule)); }
.im-canary.st-rolled_back { border-color: color-mix(in srgb, var(--amber) 45%, var(--rule)); animation: imBreach 1.4s ease-out 1; }
@keyframes imBreach { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--amber) 50%, transparent); } 100% { box-shadow: 0 0 0 12px transparent; } }
.im-canary-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.im-canary-head h3 { margin: 0; font-size: 14.5px; font-weight: 600; }
.im-live { position: relative; width: 9px; height: 9px; border-radius: 50%; background: var(--green); }
.im-live::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--green); animation: beat 1.8s ease-out infinite; }
.im-summary { margin: 0; font-size: 13px; color: var(--text); }
.im-changes { margin: 0; padding-left: 18px; font-size: 12.5px; color: var(--text-2); display: grid; gap: 2px; }
.im-split { display: grid; gap: 6px; font-size: 12.5px; color: var(--text-2); }
.im-strata { display: flex; gap: 3px; height: 8px; }
.im-strata i { position: relative; display: block; min-width: 10px; border-radius: 3px; background: var(--rule); overflow: hidden; transform-origin: left; animation: inWide .8s cubic-bezier(.2, .8, .2, 1) both; animation-delay: var(--d, 0s); }
.im-strata b { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, var(--gold), var(--amber)); border-radius: 3px; transition: width .6s cubic-bezier(.2, .8, .2, 1); }
.im-guards { display: grid; gap: 4px; }
.im-guard { display: grid; grid-template-columns: minmax(150px, 1.3fr) minmax(110px, .8fr) minmax(140px, 2fr) 90px; gap: 12px; align-items: center; padding: 6px 0; border-top: 1px solid var(--rule); font-size: 12.5px; animation: rise .3s ease-out both; animation-delay: var(--d, 0s); }
.im-guard-name { display: grid; } .im-guard-name b { font-weight: 600; color: var(--text); } .im-guard-name span { font-size: 11.5px; color: var(--text-3); }
.im-guard-vals { display: grid; font-variant-numeric: tabular-nums; } .im-guard-vals span:first-child { font: 600 14px var(--font-data); color: var(--text); }
.im-guard-state { font: 500 11.5px var(--font-data); text-align: right; color: var(--text-3); }
.im-guard.g-cleared .im-guard-state { color: var(--green); }
.im-guard.g-breached .im-guard-state { color: var(--red); font-weight: 600; }
.im-guard.g-watching .im-guard-state { color: var(--cyan); }
.im-ci { position: relative; height: 18px; border-radius: 9px; background: color-mix(in srgb, var(--raised) 70%, transparent); overflow: hidden; }
.im-ci i { position: absolute; top: 0; bottom: 0; transition: left .7s cubic-bezier(.2, .8, .2, 1), width .7s cubic-bezier(.2, .8, .2, 1); }
.im-ci-zero { width: 1px; background: var(--text-3); opacity: .6; }
.im-ci-margin { width: 0; border-left: 2px dashed var(--red); opacity: .8; }
.im-ci i.im-ci-band { top: 5px; bottom: 5px; border-radius: 4px; background: color-mix(in srgb, var(--cyan) 55%, transparent); }
.g-cleared .im-ci i.im-ci-band { background: color-mix(in srgb, var(--green) 60%, transparent); }
.g-breached .im-ci i.im-ci-band { background: color-mix(in srgb, var(--red) 70%, transparent); animation: apPulse 1.2s ease-in-out 2; }
.im-ci i.im-ci-dot { top: 4px; bottom: 4px; width: 10px; margin-left: -5px; border-radius: 50%; background: var(--text); box-shadow: 0 0 0 2px var(--surface); }
.im-ci-wait { position: absolute; inset: 0; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--gold) 18%, transparent), transparent); background-size: 200% 100%; animation: shimmer 2.4s linear infinite; }
.im-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.im-labeller { display: grid; gap: 8px; padding: 14px 16px; border: 1px solid color-mix(in srgb, var(--gold) 45%, var(--rule)); border-radius: 12px; background: color-mix(in srgb, var(--gold) 5%, var(--canvas)); animation: apSlide .28s cubic-bezier(.2, .8, .2, 1); }
.im-labeller p { margin: 0; font-size: 13px; }
.im-labeller-head { display: flex; gap: 8px; align-items: baseline; } .im-labeller-head button { margin-left: auto; }
.im-guess { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 8px 10px; border-left: 2px solid var(--gold); border-radius: 4px; background: color-mix(in srgb, var(--gold) 9%, transparent); font-size: 13px; }
.im-guess span { flex: 1; min-width: 220px; }
.im-modes { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } .im-modes > span { min-width: 110px; }
.im-filter { display: flex; gap: 6px; flex-wrap: wrap; }
.im-card { display: grid; gap: 8px; padding: 14px 16px; border: 1px solid var(--rule); border-radius: 12px; background: var(--canvas); animation: rise .35s ease-out both; animation-delay: var(--d, 0s); transition: border-color .2s ease, transform .2s ease; }
.im-card:hover { border-color: color-mix(in srgb, var(--gold) 40%, var(--rule)); transform: translateY(-1px); }
.im-card-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .im-card-head h3 { margin: 0; font-size: 14.5px; font-weight: 600; }
.im-mode { font: 600 11px var(--font-data); padding: 2px 8px; border-radius: 8px; border: 1px solid var(--border); color: var(--text-2); }
.im-mode.cat-specification { color: var(--violet); border-color: color-mix(in srgb, var(--violet) 45%, transparent); }
.im-mode.cat-misalignment { color: var(--cyan); border-color: color-mix(in srgb, var(--cyan) 45%, transparent); }
.im-mode.cat-verification { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 45%, transparent); }
.im-trend { font: 500 11px var(--font-data); padding: 1px 7px; border-radius: 8px; color: var(--text-3); border: 1px solid var(--rule); }
.im-trend.t-rising { color: var(--red); border-color: color-mix(in srgb, var(--red) 40%, transparent); }
.im-trend.t-new { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 45%, transparent); animation: apPulse 1.6s ease-in-out 3; }
.im-trend.t-falling { color: var(--green); border-color: color-mix(in srgb, var(--green) 40%, transparent); }
.im-tag { font: 11px var(--font-data); color: var(--gold); } .im-tag.ok { color: var(--green); }
.im-hyp { margin: 0; font-size: 13px; line-height: 1.55; color: var(--text); }
.im-spark { width: 100%; height: 28px; }
.im-spark rect { fill: var(--rule); } .im-spark rect.on { fill: var(--gold); }
.im-meta { line-height: 1.5; overflow-wrap: anywhere; }
.im-next { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 12.5px; color: var(--text-2); } .im-next span { flex: 1; min-width: 200px; }
.im-links { display: flex; gap: 10px; flex-wrap: wrap; font: 11.5px var(--font-data); }
.im-list-enter-active, .im-list-leave-active { transition: opacity .25s ease, transform .25s ease; }
.im-list-enter-from, .im-list-leave-to { opacity: 0; transform: translateY(6px); }
.im-list-move { transition: transform .3s ease; }
@media (max-width: 1100px) { .im-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .im-guard { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .im-ci { grid-column: 1 / -1; } .im-guard-state { text-align: left; } }
@media (prefers-reduced-motion: reduce) { .im-count, .im-try, .im-canary, .im-live::after, .im-strata i, .im-guard, .im-labeller, .im-card, .g-breached .im-ci i.im-ci-band, .im-ci-wait, .im-trend.t-new { animation: none; } .im-ci i, .im-strata b, .im-card, .im-list-enter-active, .im-list-leave-active, .im-list-move { transition: none; } }
/* Judged samples and simulated users (sampling.js, simusers.js; O-2, ADR-0260, ADR-0261): verdicts settling in, the day's tokens filling, a strip of results ticking in. */
.sm { display: grid; gap: 12px; }
.sm-judge { font-size: 14px !important; overflow-wrap: anywhere; }
.in-tile.sm-alert b { color: var(--amber); animation: apPulse 1.6s ease-in-out 2; }
.sm-day { display: grid; gap: 4px; }
.sm-day i { display: block; height: 6px; border-radius: 3px; background: var(--rule); overflow: hidden; }
.sm-day b { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--cyan), var(--gold)); transform-origin: left; animation: inWide .9s cubic-bezier(.2, .8, .2, 1) both; transition: width .6s cubic-bezier(.2, .8, .2, 1); }
.sm-lines, .sm-list { display: grid; gap: 4px; }
.im-ci i.sm-runs { border-left-color: var(--text-3); }
.sm-items h4 { margin: 4px 0; font-weight: 500; }
.sm-item { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 8px 10px; border-left: 2px solid var(--rule); border-radius: 4px; animation: rise .3s ease-out both; animation-delay: var(--d, 0s); transition: background-color .2s ease; }
.sm-item:hover { background: color-mix(in srgb, var(--raised) 50%, transparent); }
.sm-item.v-pass { border-left-color: var(--green); } .sm-item.v-fail { border-left-color: var(--red); }
.sm-verdict { font: 600 11.5px var(--font-data); text-transform: uppercase; letter-spacing: .04em; color: var(--text-2); }
.v-pass .sm-verdict { color: var(--green); } .v-fail .sm-verdict { color: var(--red); }
.sm-what p { margin: 4px 0 0; color: var(--text-2); line-height: 1.5; }
.sm-label { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.su-input { display: grid; gap: 4px; } .su-input textarea { width: 100%; font-size: 13px; }
.su-more summary { cursor: pointer; }
.su-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 8px; align-items: center; }
.su-grid textarea, .su-grid input.mono { grid-column: span 3; width: 100%; font-size: 13px; }
.su-user.su-failing { border-color: color-mix(in srgb, var(--red) 45%, var(--rule)); animation: imBreach 1.4s ease-out 1; }
.su-user.su-off, .su-user.su-paused { opacity: .75; }
.im-live.su-wait, .im-live.su-wait::after { background: var(--cyan); }
.su-alarm { width: 9px; height: 9px; border-radius: 50%; background: var(--red); animation: apPulse 1.2s ease-in-out infinite; }
.su-strip { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.su-strip i { display: block; width: 10px; height: 18px; border-radius: 3px; background: var(--rule); transform-origin: 50% 100%; animation: inGrow .5s cubic-bezier(.2, .8, .2, 1) both; animation-delay: var(--d, 0s); }
.su-strip i.ok { background: var(--green); } .su-strip i.bad { background: var(--red); }
.su-strip span { margin-left: 6px; }
.su-checks { margin: 4px 0 0; padding-left: 16px; font-size: 12px; display: grid; gap: 1px; }
.su-checks li.ok { color: var(--text-2); } .su-checks li.bad { color: var(--red); }
@media (max-width: 760px) { .sm-item { grid-template-columns: minmax(0, 1fr); } .su-grid { grid-template-columns: minmax(0, 1fr); } .su-grid textarea, .su-grid input.mono { grid-column: auto; } }
@media (prefers-reduced-motion: reduce) { .in-tile.sm-alert b, .sm-day b, .sm-item, .su-user.su-failing, .su-alarm, .su-strip i { animation: none; } .sm-day b, .sm-item { transition: none; } }
/* The Triad (triad.js; ADR-0235, ADR-0237, ADR-0238): the optimizer's front forming, reliability diagrams. */
.tr-chart { width: 100%; max-width: 760px; height: auto; }
.tr-axis { stroke: var(--text-3); stroke-width: 1; }
.tr-grid { stroke: var(--rule); stroke-width: 1; }
.tr-tick { fill: var(--text-3); font-size: 10px; font-family: var(--font-data); }
.tr-front { fill: none; stroke: var(--gold); stroke-width: 1.5; stroke-dasharray: 4 3; animation: flow 1.6s linear infinite; }
.tr-err { stroke: var(--text-3); stroke-width: 1; opacity: .7; }
.tr-pt { cursor: pointer; transform-box: fill-box; transform-origin: center; animation: tr-pop .45s cubic-bezier(.2, .9, .3, 1.3) both; }
.tr-pt .tr-mark { fill: none; stroke: var(--text-3); stroke-width: 1.5; transition: r .25s, stroke-width .25s; }
.tr-pt.front .tr-mark { stroke: var(--gold); stroke-width: 2; }
.tr-pt.front.sure .tr-mark { fill: var(--gold); }
.tr-pt.inc .tr-mark { stroke: var(--cyan); fill: var(--cyan); }
.tr-pt.bad .tr-mark { stroke: var(--red); stroke-dasharray: 2 2; }
.tr-pt.chosen .tr-mark { stroke-width: 3.5; }
.tr-pt.sent .tr-mark { animation: tr-ring 1.8s ease-out infinite; }
.tr-pt:focus { outline: none; }
.tr-pt:focus .tr-mark { stroke-width: 3; }
@keyframes tr-pop { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: none; } }
@keyframes tr-ring { 0% { stroke-opacity: 1; } 50% { stroke-opacity: .35; } 100% { stroke-opacity: 1; } }
/* Points that measured alike (W13's D-8): they pop in at their shared place, then fan out onto a small ring, and the
   place's count fades in with a soft halo that breathes once. */
.tr-spread { animation: tr-fan .55s cubic-bezier(.2, .9, .3, 1.2) .35s both; }
@keyframes tr-fan { from { transform: translate(var(--dx), var(--dy)); } to { transform: none; } }
.tr-stack { pointer-events: none; animation: tr-stackin .5s ease-out both; }
.tr-stackring { fill: var(--gold); fill-opacity: .07; stroke: var(--text-3); stroke-width: 1; stroke-dasharray: 2 3; transform-box: fill-box; transform-origin: center; animation: tr-halo 1.4s ease-out .6s both; }
.tr-stackn { fill: var(--text-2); font-size: 9.5px; font-family: var(--font-data); font-weight: 600; }
@keyframes tr-stackin { from { opacity: 0; } to { opacity: 1; } }
@keyframes tr-halo { 0% { transform: scale(.4); fill-opacity: 0; } 60% { transform: scale(1.12); fill-opacity: .16; } 100% { transform: none; fill-opacity: .07; } }
@media (prefers-reduced-motion: reduce) { .tr-spread, .tr-stack, .tr-stackring { animation: none; } }
/* A place clicked open (B8's AT-W13-D8): its ring is a target of its own, it blooms out to a wider ring, and its points
   fan from where they sat closed onto it one after another, with the list of them rising beside the chart. */
.tr-stack .tr-stackring { pointer-events: visiblePainted; cursor: pointer; }
.tr-stack:focus { outline: none; }
.tr-stack:focus .tr-stackring, .tr-stack:hover .tr-stackring { stroke: var(--gold); fill-opacity: .14; }
.tr-stackring.open { stroke: var(--gold); fill-opacity: .1; animation: tr-open .5s cubic-bezier(.2, .9, .3, 1.2) both, tr-breathe 2.6s ease-in-out .5s infinite; }
@keyframes tr-open { from { transform: scale(.45); fill-opacity: .2; } to { transform: none; } }
@keyframes tr-breathe { 0%, 100% { fill-opacity: .1; } 50% { fill-opacity: .17; } }
.tr-bloom { animation: tr-bloom .5s cubic-bezier(.2, .9, .3, 1.25) both; }
@keyframes tr-bloom { from { transform: translate(var(--bx), var(--by)) scale(.7); } to { transform: none; } }
.tr-pt.incomplete .tr-mark { stroke: var(--text-3); stroke-dasharray: 1 2; fill: none; }
.tr-incomplete { font-size: 12.5px; padding: 6px 10px; border-left: 2px solid var(--amber); border-radius: 4px; background: var(--rule); animation: tr-rise .35s ease-out both; }
.tr-stacklist { display: grid; gap: 6px; padding: 8px 10px; border: 1px solid var(--rule); border-left: 2px solid var(--gold); border-radius: 6px; max-width: 760px; }
.tr-stacklist-head { display: flex; align-items: center; gap: 4px; font-size: 12.5px; flex-wrap: wrap; }
.tr-stackitems { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px; max-height: 260px; overflow: auto; }
.tr-stackitem { display: grid; gap: 2px; text-align: left; font: inherit; font-size: 12px; color: inherit; background: none; border: 1px solid var(--rule); border-radius: 5px; padding: 5px 8px; cursor: pointer;
  animation: tr-rise .3s ease-out var(--d, 0s) both; transition: border-color .2s, transform .2s; }
.tr-stackitem:hover, .tr-stackitem:focus-visible { border-color: var(--gold); transform: translateY(-1px); outline: none; }
.tr-stackitem.on { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.tr-stackitem.front b::before { content: '● '; color: var(--gold); }
.tr-stackitem.inc b::before { content: '■ '; color: var(--cyan); }
.tr-stackitem.incomplete { border-style: dashed; }
.tr-stackchg { font-size: 11.5px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .tr-stackring.open, .tr-bloom, .tr-stackitem, .tr-incomplete { animation: none; } .tr-stackitem { transition: none; } }
.tr-bar { height: 6px; border-radius: 3px; background: var(--rule); overflow: hidden; }
.tr-bar i { display: block; height: 100%; background: var(--amber); transition: width .6s ease; }
.tr-bar.live i { background-image: linear-gradient(90deg, var(--amber), var(--gold), var(--amber)); background-size: 200% 100%; animation: shimmer 2s linear infinite; }
.tr-compare { display: grid; gap: 8px; }
.tr-slide-enter-active, .tr-slide-leave-active { transition: opacity .25s ease, transform .25s ease; }
.tr-slide-enter-from, .tr-slide-leave-to { opacity: 0; transform: translateY(8px); }
.tr-better { color: var(--green); }
.tr-worse { color: var(--red); }
.tr-unclear { color: var(--text-2); }
.tr-cal { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.tr-rel { width: 100%; height: auto; }
.tr-diag { stroke: var(--text-3); stroke-dasharray: 3 3; }
.tr-thr { stroke: var(--amber); stroke-width: 1; stroke-dasharray: 2 2; }
.tr-binbar { fill: var(--violet); transform-box: fill-box; transform-origin: bottom; animation: tr-grow .5s ease-out both; }
@keyframes tr-grow { from { transform: scaleY(0); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .tr-pt, .tr-pt.sent .tr-mark, .tr-front, .tr-binbar, .tr-bar.live i { animation: none; } .tr-bar i, .tr-slide-enter-active, .tr-slide-leave-active { transition: none; } }
/* The prompt and playbook operators (triad.js, improve.js; ADR-0251, ADR-0252): points an operator wrote as diamonds that
   trace in, a quill that writes while the study runs, lessons that slide in, and the department's own instructions. */
.tr-pt.op .tr-mark { stroke: var(--violet); stroke-dasharray: 48; animation: tr-trace .9s ease-out both; }
.tr-pt.op.front .tr-mark { stroke: var(--violet); stroke-width: 2; }
.tr-pt.op.front.sure .tr-mark { fill: var(--violet); fill-opacity: .55; }
@keyframes tr-trace { from { stroke-dashoffset: 48; } to { stroke-dashoffset: 0; } }
.tr-on { color: var(--violet); }
.tr-ops summary b { font-weight: 600; }
.tr-opsline { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; font-size: 12px; padding: 6px 10px; border-left: 2px solid var(--violet); background: color-mix(in srgb, var(--violet) 7%, transparent); border-radius: 0 6px 6px 0; }
.tr-quill { width: 8px; height: 8px; border-radius: 50%; background: var(--violet); flex: none; }
.tr-opsline.live .tr-quill { animation: tr-write 1.4s ease-in-out infinite; }
@keyframes tr-write { 0%, 100% { transform: translateX(0) scale(1); opacity: .5; } 50% { transform: translateX(6px) scale(1.25); opacity: 1; } }
.tr-op-tag { color: var(--violet); margin-right: 6px; }
.tr-text { display: grid; gap: 6px; padding: 8px 10px; border: 1px solid var(--rule); border-left: 2px solid var(--violet); border-radius: 6px; animation: tr-rise .35s ease-out both; }
.tr-text-head { font-size: 12.5px; }
.tr-why { margin: 0; font-size: 12.5px; font-style: italic; color: var(--text-2); }
.tr-instr { margin: 0; max-height: 220px; overflow: auto; white-space: pre-wrap; font: 12px/1.55 var(--font-data); background: var(--bg-2, transparent); padding: 8px; border-radius: 4px; }
.tr-instr.was { opacity: .7; }
.tr-playbook { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 12.5px; }
.tr-playbook li { display: flex; gap: 8px; align-items: baseline; padding: 3px 6px; border-radius: 4px; }
.tr-playbook li.added { background: color-mix(in srgb, var(--green) 10%, transparent); animation: tr-slidein .4s ease-out both; animation-delay: var(--d, 0s); }
.tr-playbook li.added::before { content: '+'; color: var(--green); font-weight: 600; }
.tr-playbook li.removed { text-decoration: line-through; opacity: .6; }
.tr-playbook li.removed::before { content: '−'; color: var(--red); text-decoration: none; }
@keyframes tr-slidein { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
@keyframes tr-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.tr-tune { border: 1px solid var(--rule); border-radius: 6px; padding: 6px 10px; transition: border-color .25s; }
.tr-tune.on { border-color: var(--violet); }
.tr-tune-head { all: unset; cursor: pointer; display: flex; gap: 10px; align-items: baseline; width: 100%; font-size: 13px; }
.tr-tune-head:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
.im-tag.wide { color: var(--violet); }
.im-tuning { font-size: 12.5px; }
.im-tuning summary { cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .tr-pt.op .tr-mark, .tr-opsline.live .tr-quill, .tr-text, .tr-playbook li.added { animation: none; } .tr-tune { transition: none; } }
/* A check's form (W13's D-4): the steps as chips that rise in one after another and press in one click, and the
   sample tried as it is typed, a sweep running across it while it is tried and the verdict popping in. */
.tr-steps { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tr-chip { animation: tr-rise .3s ease-out var(--d, 0s) both; }
.tr-try { position: relative; display: grid; gap: 8px; padding: 10px 12px; border: 1px solid var(--rule); border-radius: 6px; overflow: hidden; transition: border-color .25s; }
.tr-try.busy { border-color: var(--gold); }
.tr-try.busy::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent); background-size: 50% 100%; background-repeat: no-repeat; animation: tr-sweep 1s linear infinite; }
@keyframes tr-sweep { from { background-position: -50% 0; } to { background-position: 150% 0; } }
.tr-tried { display: inline-block; }
.tr-verdict-enter-active { animation: tr-verdict .35s cubic-bezier(.2, .9, .3, 1.3) both; }
.tr-verdict-leave-active { transition: opacity .12s ease; }
.tr-verdict-leave-to { opacity: 0; }
@keyframes tr-verdict { from { opacity: 0; transform: scale(.85) translateY(3px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .tr-chip, .tr-try.busy::after, .tr-verdict-enter-active { animation: none; } .tr-try, .tr-verdict-leave-active { transition: none; } }
/* The prompt-injection classifier on the Safety rules tab (ADR-0262): the chosen mode breathes, a scan line reads across the counts while it is on, the counts rise in one after another and light when not zero, and new findings slide in. */
.inj-modes .trust-level.inj-live { position: relative; overflow: hidden; animation: injLive 2.4s ease-in-out infinite; }
.inj-modes .trust-level.inj-live::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 40%; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--gold) 14%, transparent), transparent); animation: scan 3.2s linear infinite; pointer-events: none; }
@keyframes injLive { 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 18%, transparent); } }
.inj-more-enter-active, .inj-more-leave-active { transition: opacity .25s ease, transform .25s ease; }
.inj-more-enter-from, .inj-more-leave-to { opacity: 0; transform: translateY(-6px); }
.inj-seen { display: grid; gap: 8px; }
.inj-counts { position: relative; overflow: hidden; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 8px 12px; border: 1px solid var(--rule); border-radius: 10px; font-size: 12.5px; color: var(--text-2); }
.inj-counts .inj-scan { position: absolute; inset: 0 auto 0 0; width: 30%; opacity: 0; pointer-events: none; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--violet) 16%, transparent), transparent); }
.inj-counts.inj-scanning .inj-scan { opacity: 1; animation: scan 4s linear infinite; }
.inj-count { animation: rise .4s ease-out both; }
.inj-count b { font-variant-numeric: tabular-nums; color: var(--text); }
.inj-count.lit.inj-held b, .inj-count.lit.inj-asked b { color: var(--amber); animation: apPulse 2s ease-in-out 2; }
.inj-count.lit.inj-flagged b { color: var(--violet); }
.inj-count.lit.inj-unchecked b { color: var(--red); }
.inj-tag { display: inline-block; padding: 0 6px; margin-right: 4px; border-radius: 6px; font-size: 11px; border: 1px solid var(--rule); }
.inj-tag.inj-held, .inj-tag.inj-asked { border-color: var(--amber); color: var(--amber); }
.inj-tag.inj-flagged { border-color: var(--violet); color: var(--violet); }
.inj-tag.inj-unchecked { border-color: var(--red); color: var(--red); }
.inj-row-enter-active { transition: opacity .3s ease, transform .3s ease; }
.inj-row-enter-from { opacity: 0; transform: translateX(-8px); }
@media (prefers-reduced-motion: reduce) { .inj-modes .trust-level.inj-live, .inj-modes .trust-level.inj-live::after, .inj-counts.inj-scanning .inj-scan, .inj-count, .inj-count.lit b { animation: none; } .inj-more-enter-active, .inj-more-leave-active, .inj-row-enter-active { transition: none; } }

/* Customer hooks (O-2, ADR-0263): the way a call goes through them, a dot
   following it, and each hook lighting up with what it answered when tried. */
.hk { display: grid; gap: 10px; }
.hk-flow { width: 100%; max-width: 640px; height: auto; overflow: visible; }
.hk-flow text { font-size: 10.5px; fill: var(--text-3); }
.hk-line { stroke: var(--line); stroke-width: 2; stroke-dasharray: 6 5; fill: none; animation: hk-run 1.6s linear infinite; }
@keyframes hk-run { to { stroke-dashoffset: -22; } }
.hk-dot { fill: var(--gold, var(--amber)); animation: hk-travel 4.2s cubic-bezier(.45, 0, .55, 1) infinite; }
@keyframes hk-travel { 0% { transform: translateX(14px); opacity: 0; } 8% { opacity: 1; } 30%, 36% { transform: translateX(150px); } 52%, 58% { transform: translateX(280px); } 76%, 82% { transform: translateX(410px); } 96% { opacity: 1; } 100% { transform: translateX(546px); opacity: 0; } }
.hk-end { fill: var(--surface-2, var(--surface)); stroke: var(--line); }
.hk-tool { fill: var(--surface-2, var(--surface)); stroke: var(--text-3); }
.hk-gate rect { fill: var(--surface); stroke: var(--line); stroke-dasharray: 3 3; transition: stroke .3s ease, fill .3s ease; }
.hk-gate.on rect { stroke: var(--violet); stroke-dasharray: none; }
.hk-gate.lit rect { animation: hk-glow 1.4s ease-out 1; }
@keyframes hk-glow { 0% { stroke-width: 4; } 100% { stroke-width: 1; } }
.hk-list { display: grid; gap: 8px; }
.hk-card { border: 1px solid var(--line); border-left: 3px solid var(--violet); border-radius: 8px; padding: 9px 12px; display: grid; gap: 4px; background: var(--surface); transition: border-color .3s ease, opacity .3s ease, box-shadow .3s ease; }
.hk-card.hk-after { border-left-color: var(--cyan); }
.hk-card.off { opacity: .6; }
.hk-card.hk-lit-denied { box-shadow: 0 0 0 2px color-mix(in srgb, var(--red) 35%, transparent); }
.hk-card.hk-lit-allowed, .hk-card.hk-lit-noted { box-shadow: 0 0 0 2px color-mix(in srgb, var(--green) 35%, transparent); }
.hk-card.hk-lit-failed { box-shadow: 0 0 0 2px color-mix(in srgb, var(--amber) 40%, transparent); }
.hk-head { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; font-size: 13px; }
.hk-when { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--violet); }
.hk-after .hk-when { color: var(--cyan); }
.hk-what { font-size: 12px; color: var(--text-2); overflow-wrap: anywhere; }
.hk-result { font-size: 12.5px; padding: 4px 8px; border-radius: 6px; background: var(--surface-2, var(--surface)); }
.hk-r-allowed, .hk-r-noted, .hk-r-quiet { color: var(--green); }
.hk-r-denied { color: var(--red); }
.hk-r-failed { color: var(--amber); }
.hk-starts { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.hk-start { text-align: left; display: grid; gap: 3px; padding: 10px 12px; border: 1px dashed var(--line); border-radius: 8px; background: transparent; color: inherit; cursor: pointer; font: inherit; font-size: 12.5px; transition: border-color .2s ease, transform .2s ease, background .2s ease; }
.hk-start span { color: var(--text-3); line-height: 1.5; }
.hk-start:hover, .hk-start:focus-visible { border-color: var(--violet); border-style: solid; transform: translateY(-2px); }
.hk-secret { font-size: 12.5px; }
.hk-made { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 6px; padding: 6px 8px; border-radius: 6px; background: var(--surface-2, var(--surface)); overflow-wrap: anywhere; }
.btn.busy { position: relative; overflow: hidden; }
.btn.busy::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--violet) 25%, transparent), transparent); animation: scan 1.2s linear infinite; }
.hk-list-enter-active, .hk-list-leave-active { transition: opacity .3s ease, transform .3s ease; }
.hk-list-enter-from, .hk-list-leave-to { opacity: 0; transform: translateX(-10px); }
.hk-list-move { transition: transform .3s ease; }
.hk-pop-enter-active { transition: opacity .3s ease, transform .3s cubic-bezier(.2, 1.4, .4, 1); }
.hk-pop-enter-from { opacity: 0; transform: scale(.96) translateY(-3px); }
@media (prefers-reduced-motion: reduce) { .hk-line, .hk-dot, .hk-gate.lit rect, .btn.busy::after { animation: none; } .hk-dot { transform: translateX(280px); } .hk-card, .hk-start, .hk-gate rect, .hk-list-enter-active, .hk-list-leave-active, .hk-list-move, .hk-pop-enter-active { transition: none; } }