/* adr-kit app — builds on the answer-me-with-html theme tokens (--bg, --paper, --ink…). */
/* crux is square: no rounded corners or round dots anywhere, including the renderer's base CSS,
   SVG rects (rx/ry) and project components. */
*, *::before, *::after { border-radius: 0 !important; }
rect { rx: 0; ry: 0; }
html { --ak-green: #1f7a3d; --ak-green-bg: #e3f3e8; --ak-mute: #8b929e; --ak-mute-bg: #eef0f3; --ak-purple: #6b46c1; --ak-purple-bg: #efe9fb; }

/* status tokens: any element with .ak-st-* gets --st / --st-bg (unknown statuses fall back to accent) */
[class*="ak-st-"] { --st: var(--accent); --st-bg: var(--accent-bg); }
.ak-st-open { --st: var(--warn); --st-bg: var(--warn-bg); }
.ak-st-proposed { --st: var(--accent); --st-bg: var(--accent-bg); }
.ak-st-accepted { --st: var(--ak-green); --st-bg: var(--ak-green-bg); }
.ak-st-rejected { --st: var(--err); --st-bg: var(--err-bg); }
.ak-st-superseded, .ak-st-deprecated { --st: var(--ak-mute); --st-bg: var(--ak-mute-bg); }
.ak-st-doc { --st: var(--ak-purple); --st-bg: var(--ak-purple-bg); }

body { min-height: 100vh; }
a { color: var(--accent); }
button { font: inherit; color: inherit; }
.mono { font-family: var(--font-mono); }
.muted { color: var(--ink-2); }
.hidden { display: none !important; }

/* ── top bar ───────────────────────────────────────────── */
.ak-top { position: sticky; top: 0; z-index: 30; background: var(--paper); border-bottom: var(--bw) solid var(--line); }
.ak-top-in { max-width: 1480px; margin: 0 auto; display: flex; align-items: stretch; gap: 0; min-height: 48px; padding: 0 20px; }
.ak-brand { display: flex; align-items: center; gap: 10px; padding-right: 20px; margin-right: 8px; border-right: 1px solid var(--line-2); text-decoration: none; color: var(--ink); font-weight: 700; white-space: nowrap; }
.ak-brand i { display: inline-grid; place-items: center; width: 26px; height: 26px; background: var(--head-bg); color: var(--head-fg); font: 700 11px var(--font-mono); font-style: normal; }
.ak-nav { display: flex; align-items: stretch; gap: 2px; overflow-x: auto; flex: 1; scrollbar-width: none; }
.ak-nav a { display: flex; align-items: center; gap: 6px; padding: 0 12px; color: var(--ink-2); text-decoration: none; font-size: 13.5px; border-bottom: 2.5px solid transparent; white-space: nowrap; }
.ak-nav a:hover { color: var(--ink); }
.ak-nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); font-weight: 600; }
.ak-nav a b { font: 600 10.5px var(--font-mono); background: var(--fill); border: 1px solid var(--line-2); padding: 1px 5px; color: var(--ink-2); }
.ak-tools { display: flex; align-items: center; gap: 8px; padding-left: 12px; }
.ak-btn { display: inline-flex; align-items: center; gap: 6px; font: 12.5px/1 var(--font-sans); background: var(--paper); color: var(--ink); border: var(--bw) solid var(--line); padding: 8px 11px; cursor: pointer; text-decoration: none; white-space: nowrap; }
.ak-btn:hover { background: var(--fill); }
.ak-btn:focus-visible, .ak-chip:focus-visible, a:focus-visible, .ak-node:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ak-btn--ghost { border-color: var(--line-2); }
.ak-btn kbd { font: 10.5px var(--font-mono); color: var(--ink-3); border: 1px solid var(--line-2); padding: 1px 4px; }
.ak-search-btn { min-width: 220px; justify-content: space-between; color: var(--ink-2); border-color: var(--line-2); }
.ak-live { width: 8px; height: 8px; background: var(--ak-green); box-shadow: 0 0 0 3px var(--ak-green-bg); }
.ak-live.off { background: var(--ink-3); box-shadow: none; }

/* ── page ──────────────────────────────────────────────── */
.ak-main { max-width: 1480px; margin: 0 auto; padding: 28px 20px 64px; }
.ak-page-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 24px; margin-bottom: 22px; }
.ak-page-head h1 { margin: 0; font-size: 26px; letter-spacing: -0.015em; line-height: 1.2; }
.ak-page-head p { margin: 4px 0 0; color: var(--ink-2); }
.ak-grid { display: grid; gap: 20px; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
.s12 { grid-column: span 12; } .s8 { grid-column: span 8; } .s7 { grid-column: span 7; } .s6 { grid-column: span 6; } .s5 { grid-column: span 5; } .s4 { grid-column: span 4; } .s3 { grid-column: span 3; }
@media (max-width: 1100px) { .s8, .s7, .s6, .s5, .s4 { grid-column: span 12; } .s3 { grid-column: span 6; } }
@media (max-width: 640px) { .s3 { grid-column: span 12; } .ak-search-btn { min-width: 0; } .ak-search-btn span { display: none; } .ak-brand span { display: none; } }

.ak-box { background: var(--paper); border: var(--bw) solid var(--line); box-shadow: var(--shadow); min-width: 0; overflow: hidden; }
.ak-box > .am-panel-head h2 { font-size: 14px; }
.ak-box-body { padding: 14px 16px 16px; }
.ak-box-body.flush { padding: 0; }
.ak-empty { padding: 20px; color: var(--ink-3); text-align: center; font-size: 13px; }

/* ── pills, chips ──────────────────────────────────────── */
.ak-pill { display: inline-flex; align-items: center; gap: 5px; font: 600 11px/1 var(--font-mono); letter-spacing: 0.03em; text-transform: uppercase; color: var(--st); background: var(--st-bg); border: 1px solid var(--st); padding: 4px 7px; white-space: nowrap; }
.ak-pill::before { content: ""; width: 6px; height: 6px; background: var(--st); }
.ak-pill--lg { font-size: 13px; padding: 7px 11px; }
.ak-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ak-chip { display: inline-flex; align-items: center; gap: 6px; font: 12px/1 var(--font-mono); color: var(--ink); background: var(--fill); border: 1px solid var(--line-2); padding: 5px 8px; text-decoration: none; cursor: pointer; white-space: nowrap; }
.ak-chip:hover { border-color: var(--ink-3); }
.ak-chip.on { background: var(--head-bg); color: var(--head-fg); border-color: var(--head-bg); }
.ak-chip b { font-weight: 400; color: var(--ink-3); }
.ak-chip.on b { color: inherit; opacity: 0.7; }
.ak-chip--tag::before { content: "#"; color: var(--ink-3); }
.ak-chip--node::before { content: "◇"; color: var(--accent); }
.ak-chip.ak-st { border-color: var(--st); background: var(--st-bg); color: var(--st); }
.ak-dot { display: inline-block; width: 9px; height: 9px; background: var(--st); flex: none; }

/* ── overview ──────────────────────────────────────────── */
.ak-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.ak-kpi { position: relative; display: block; text-decoration: none; color: var(--ink); background: var(--paper); border: var(--bw) solid var(--line); padding: 14px 16px 12px 18px; overflow: hidden; }
.ak-kpi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--st); }
.ak-kpi:hover { background: var(--st-bg); }
.ak-kpi-v { font: 700 34px/1 var(--font-sans); letter-spacing: -0.03em; color: var(--st); }
.ak-kpi-l { margin-top: 6px; font: 11px var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-2); }
.ak-kpi--total { --st: var(--ink); --st-bg: var(--fill); }
.ak-stack { display: flex; height: 14px; border: 1px solid var(--line); overflow: hidden; margin-top: 14px; }
.ak-stack span { background: var(--st); }
.ak-stack span + span { border-left: 2px solid var(--paper); }
.ak-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; font-size: 12px; color: var(--ink-2); }
.ak-legend span { display: inline-flex; align-items: center; gap: 6px; }

.ak-need { display: block; text-decoration: none; color: var(--ink); padding: 14px 16px; border-bottom: 1px solid var(--line-2); border-left: 4px solid var(--st); }
.ak-need:last-child { border-bottom: 0; }
.ak-need:hover { background: var(--st-bg); }
.ak-need-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ak-need-top .mono { color: var(--ink-3); font-size: 12px; }
.ak-need h3 { margin: 4px 0 4px; font-size: 15.5px; }
.ak-need p { margin: 0; color: var(--ink-2); font-size: 13.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ak-qcount { margin-left: auto; font: 600 11px var(--font-mono); color: var(--warn); background: var(--warn-bg); border: 1px solid var(--warn); padding: 3px 7px; }

.ak-decided { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 0 14px; text-decoration: none; color: var(--ink); padding: 12px 16px; border-bottom: 1px solid var(--line-2); }
.ak-decided:last-child { border-bottom: 0; }
.ak-decided:hover { background: var(--fill); }
.ak-decided .mono { font-size: 12px; color: var(--st); font-weight: 600; padding-top: 2px; }
.ak-decided h3 { margin: 0 0 3px; font-size: 14.5px; }
.ak-decided p { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--ink); line-height: 1.45; }
.ak-decided p::before { content: "→ "; color: var(--st); }

.ak-cloud { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: baseline; }
.ak-cloud a { text-decoration: none; color: var(--ink); font-family: var(--font-mono); }
.ak-cloud a:hover { color: var(--accent); }
.ak-cloud a sup { color: var(--ink-3); font-size: 10px; margin-left: 2px; }

.ak-timeline { list-style: none; margin: 0; padding: 4px 0 0; position: relative; }
.ak-timeline::before { content: ""; position: absolute; left: 82px; top: 0; bottom: 0; border-left: 1.5px solid var(--line-2); }
.ak-timeline li { display: grid; grid-template-columns: 74px 18px minmax(0, 1fr); gap: 8px; align-items: start; padding: 5px 0; }
.ak-timeline time { font: 11.5px var(--font-mono); color: var(--ink-2); text-align: right; padding-top: 3px; }
.ak-timeline .ak-dot { margin: 5px 0 0 0; justify-self: center; box-shadow: 0 0 0 3px var(--paper); position: relative; }
.ak-timeline a { text-decoration: none; color: var(--ink); font-size: 13.5px; }
.ak-timeline a:hover { color: var(--accent); }
.ak-timeline a b { font: 600 11.5px var(--font-mono); color: var(--st); margin-right: 6px; }

/* ── decision cards (list view) ────────────────────────── */
.ak-filters { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; margin-bottom: 16px; }
.ak-filters .ak-label { font: 11px var(--font-mono); color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em; }
.ak-input { font: 13.5px var(--font-sans); color: var(--ink); background: var(--paper); border: var(--bw) solid var(--line); padding: 8px 11px; min-width: 240px; }
.ak-input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.ak-deck { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; }
.ak-dcard { position: relative; display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: var(--ink); background: var(--paper); border: var(--bw) solid var(--line); padding: 14px 16px 14px 20px; overflow: hidden; box-shadow: var(--shadow); }
.ak-dcard::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--st); }
.ak-dcard:hover { border-color: var(--st); }
.ak-dcard-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ak-dcard-id { font: 600 12px var(--font-mono); color: var(--ink-3); }
.ak-dcard h3 { margin: 0; font-size: 16px; line-height: 1.3; }
.ak-gist { font-size: 13.5px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ak-gist--decision { font-weight: 600; }
.ak-gist--question { color: var(--ink-2); font-style: italic; }
.ak-gist-k { font: 600 10.5px var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--st); margin-right: 6px; font-style: normal; }
.ak-dcard-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: auto; padding-top: 4px; font-size: 12px; color: var(--ink-2); }
.ak-optbar { display: flex; gap: 3px; }
.ak-optbar i { width: 14px; height: 6px; background: var(--line-2); }
.ak-optbar i.ok { background: var(--ak-green); } .ak-optbar i.warn { background: var(--warn); } .ak-optbar i.no { background: var(--err); opacity: 0.5; }

/* ── ADR page ──────────────────────────────────────────── */
.ak-adr-head { position: relative; background: var(--paper); border: var(--bw) solid var(--line); padding: 22px 24px 18px 28px; margin-bottom: 20px; overflow: hidden; box-shadow: var(--shadow); }
.ak-adr-head::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 7px; background: var(--st); }
.ak-adr-id { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font: 600 13px var(--font-mono); color: var(--ink-3); }
.ak-adr-head h1 { margin: 8px 0 4px; font-size: 30px; line-height: 1.15; letter-spacing: -0.02em; }
.ak-adr-head .ak-sub { margin: 0; color: var(--ink-2); font-size: 15px; max-width: 90ch; }
.ak-adr-meta { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 14px; font-size: 12.5px; color: var(--ink-2); align-items: center; }
.ak-adr-meta b { font: 400 11px var(--font-mono); color: var(--ink-3); margin-right: 6px; text-transform: uppercase; }
.ak-adr-actions { position: absolute; top: 16px; right: 16px; display: flex; gap: 6px; }
.ak-rels { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line-2); }
.ak-rel { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ak-rel > span { font: 11px var(--font-mono); color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.05em; }
.ak-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font: 12px var(--font-mono); }
.ak-crumbs a { text-decoration: none; }
.ak-crumbs i { color: var(--ink-3); font-style: normal; }

.ak-adr-layout { display: grid; grid-template-columns: 190px minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
.ak-toc { position: sticky; top: 72px; font-size: 13px; }
.ak-toc a { display: flex; gap: 8px; color: var(--ink-2); text-decoration: none; padding: 5px 0 5px 10px; border-left: 2px solid var(--line-2); }
.ak-toc a span { font: 11px var(--font-mono); color: var(--ink-3); padding-top: 2px; }
.ak-toc a:hover, .ak-toc a.on { color: var(--ink); border-left-color: var(--accent); }
.ak-toc a.hero { color: var(--ink); font-weight: 600; }
.ak-rail { position: sticky; top: 72px; display: flex; flex-direction: column; gap: 16px; max-height: calc(100vh - 88px); overflow-y: auto; scrollbar-width: thin; }
.ak-body > .am-panel + .am-panel { margin-top: 18px; }
.ak-body .am-panel { scroll-margin-top: 70px; }
@media (max-width: 1240px) { .ak-adr-layout { grid-template-columns: minmax(0, 1fr) 300px; } .ak-toc { display: none; } }
@media (max-width: 900px) { .ak-adr-layout { grid-template-columns: minmax(0, 1fr); } .ak-rail { position: static; max-height: none; } .ak-adr-actions { position: static; margin-bottom: 8px; } }

/* hero panels: the decision is the loudest thing on the page */
.ak-panel--hero { border-color: var(--st, var(--line)); }
.ak-hero { position: relative; border: 2px solid var(--st); background: var(--st-bg); padding: 16px 20px 18px; }
.ak-hero--decision { --st: var(--ak-green); --st-bg: var(--ak-green-bg); }
.ak-hero--decision.ak-st-proposed { --st: var(--accent); --st-bg: var(--accent-bg); }
.ak-hero--decision.ak-st-rejected { --st: var(--err); --st-bg: var(--err-bg); }
.ak-hero--decision.ak-st-superseded, .ak-hero--decision.ak-st-deprecated { --st: var(--ak-mute); --st-bg: var(--ak-mute-bg); }
.ak-hero--question { --st: var(--warn); --st-bg: var(--warn-bg); }
.ak-hero--rec { --st: var(--accent); --st-bg: var(--accent-bg); border-style: dashed; }
.ak-hero-label { display: inline-block; font: 700 11px var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--paper); background: var(--st); padding: 4px 8px; margin-bottom: 10px; }
.ak-hero-text { font-size: 18.5px; line-height: 1.5; font-weight: 600; letter-spacing: -0.005em; }
.ak-hero-text p { margin: 0 0 6px; }
.ak-hero-text p:last-child { margin-bottom: 0; }
.ak-hero-more { margin-top: 10px; font-size: 14px; }

/* options */
.ak-options-title { font: 600 11px var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-2); margin-bottom: 8px; }
.ak-options-topic { font-weight: 700; font-size: 13.5px; margin: 14px 0 8px; padding-bottom: 4px; border-bottom: 1px solid var(--line-2); }
.ak-options-topic:first-child { margin-top: 0; }
.ak-options-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; align-items: stretch; }
.ak-opt { position: relative; border: 1.5px solid var(--line-2); padding: 12px 14px 12px; background: var(--paper); min-width: 0; }
.ak-opt header { margin-bottom: 8px; }
.ak-opt h3 { margin: 6px 0 0; font-size: 15px; line-height: 1.3; }
.ak-opt-badge { display: inline-block; font: 700 10.5px var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; padding: 3px 7px; background: var(--fill); color: var(--ink-2); }
.ak-opt-key { position: absolute; top: 10px; right: 12px; font: 700 18px var(--font-mono); color: var(--ink-3); opacity: 0.6; }
.ak-opt--ok { border: 2.5px solid var(--ak-green); background: var(--ak-green-bg); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ak-green) 15%, transparent); }
.ak-opt--ok .ak-opt-badge { background: var(--ak-green); color: var(--paper); }
.ak-opt--ok .ak-opt-badge::before { content: "✓ "; }
.ak-opt--ok h3 { font-size: 16.5px; }
.ak-opt--warn { border-color: var(--warn); border-style: dashed; }
.ak-opt--warn .ak-opt-badge { background: var(--warn-bg); color: var(--warn); }
.ak-opt--no { opacity: 0.72; }
.ak-opt--no h3 { text-decoration: line-through; text-decoration-color: var(--err); text-decoration-thickness: 1.5px; color: var(--ink-2); }
.ak-opt--no .ak-opt-badge { background: var(--err-bg); color: var(--err); }
.ak-opt--no:hover { opacity: 1; }
.ak-opt-field + .ak-opt-field { margin-top: 8px; }
.ak-opt-flabel { font: 10.5px var(--font-mono); text-transform: uppercase; color: var(--ink-3); letter-spacing: 0.05em; margin-bottom: 3px; }
.ak-opt p { margin: 0; font-size: 13px; }
.ak-opt-list { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.ak-opt-list li { display: flex; gap: 6px; line-height: 1.4; }
.ak-opt-list li + li { margin-top: 3px; }
.ak-opt-list i { flex: none; width: 14px; font-style: normal; font-weight: 700; text-align: center; }
.ak-opt-list--pro i { color: var(--ak-green); }
.ak-opt-list--con i { color: var(--err); }
.ak-opt-list--info li::before { content: "·"; color: var(--ink-3); width: 14px; text-align: center; flex: none; }
.ak-raw { margin-top: 12px; font-size: 13px; }
.ak-raw summary { cursor: pointer; color: var(--ink-2); font: 12px var(--font-mono); }
.ak-raw[open] summary { margin-bottom: 8px; }

/* consequences / proscons */
.ak-cqs { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.ak-cq { border: 1px solid var(--line-2); border-top: 4px solid var(--c); background: var(--paper); }
.ak-cq--pos { --c: var(--ak-green); } .ak-cq--neg { --c: var(--err); } .ak-cq--next { --c: var(--accent); } .ak-cq--other { --c: var(--ink-3); }
.ak-cq-head { display: flex; align-items: center; gap: 8px; padding: 8px 12px; font-weight: 700; font-size: 13px; border-bottom: 1px solid var(--line-2); }
.ak-cq-head i { display: grid; place-items: center; width: 20px; height: 20px; background: var(--c); color: var(--paper); font-style: normal; font-size: 13px; }
.ak-cq-head b { margin-left: auto; font: 11px var(--font-mono); color: var(--ink-3); }
.ak-cq ul { margin: 0; padding: 8px 12px 10px 28px; font-size: 13.5px; }
.ak-cq li + li { margin-top: 4px; }

/* questions + criteria */
.ak-questions, .ak-criteria { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ak-questions li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 10px 12px; border: 1.5px solid var(--warn); background: var(--warn-bg); font-weight: 500; }
.ak-questions em { font: 600 10px var(--font-mono); text-transform: uppercase; color: var(--warn); font-style: normal; padding-top: 4px; white-space: nowrap; }
.ak-n { display: grid; place-items: center; width: 26px; height: 26px; background: var(--head-bg); color: var(--head-fg); font: 700 12px var(--font-mono); }
.ak-questions .ak-n { background: var(--warn); color: var(--paper); }
.ak-criteria { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.ak-criteria li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: start; padding: 10px 12px; border: 1px solid var(--line-2); font-size: 13.5px; }

/* compare */
.ak-compare { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(220px, 1fr); gap: 18px; align-items: start; }
@media (max-width: 760px) { .ak-compare { grid-template-columns: minmax(0, 1fr); } }
.ak-cmp { width: 100%; border-collapse: separate; border-spacing: 3px; font-size: 13px; }
.ak-cmp th { font: 11px var(--font-mono); color: var(--ink-2); text-align: left; padding: 4px 6px; font-weight: 400; }
.ak-cmp tbody th { font: 500 13px var(--font-sans); color: var(--ink); }
.ak-cmp thead th.ak-win { color: var(--ak-green); font-weight: 700; }
.ak-cmp-cell { text-align: center; padding: 8px 6px; background: color-mix(in srgb, var(--ak-green) calc(var(--r) * 70%), var(--fill)); color: var(--ink); }
.ak-cmp-cell b { font: 700 15px var(--font-mono); }
.ak-cmp-cell small { display: block; font-size: 10.5px; color: var(--ink-2); }
.ak-cmp-w { font-size: 9px; color: var(--ink-3); letter-spacing: 1px; white-space: nowrap; }
.ak-cmp-w span { display: none; }
.ak-mini-label { font: 10.5px var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); margin-bottom: 8px; }
.ak-bars { display: grid; gap: 8px; }
.ak-bar { display: grid; grid-template-columns: minmax(70px, 110px) minmax(0, 1fr) 34px; gap: 8px; align-items: center; font-size: 13px; }
.ak-bar-track { height: 14px; background: var(--fill); border: 1px solid var(--line-2); overflow: hidden; }
.ak-bar-track span { display: block; height: 100%; background: var(--ink-3); }
.ak-bar-val { font: 600 12px var(--font-mono); text-align: right; }
.ak-bar.ak-win { font-weight: 700; }
.ak-bar.ak-win .ak-bar-track span { background: var(--ak-green); }
.ak-bar.ak-win .ak-bar-val { color: var(--ak-green); }

/* tradeoff, stats */
.ak-trades { display: grid; gap: 16px; }
.ak-trade-poles { display: flex; justify-content: space-between; font-size: 13px; color: var(--ink-2); margin-bottom: 6px; }
.ak-trade-poles .ak-lean { color: var(--ink); font-weight: 700; }
.ak-trade-track { position: relative; height: 6px; background: linear-gradient(90deg, var(--accent-bg), var(--fill) 50%, var(--accent-bg)); border: 1px solid var(--line-2); }
.ak-trade-track i { position: absolute; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; background: var(--accent); border: 3px solid var(--paper); box-shadow: 0 0 0 1.5px var(--accent); }
.ak-trade-note { font-size: 12.5px; color: var(--ink-2); margin-top: 6px; text-align: center; }
.ak-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.ak-stat { border: 1px solid var(--line-2); padding: 12px 14px; background: var(--paper); }
.ak-stat-v { font: 700 26px/1.1 var(--font-sans); letter-spacing: -0.02em; color: var(--accent); }
.ak-stat-l { font-size: 13px; font-weight: 600; margin-top: 4px; }
.ak-stat-n { font-size: 12px; color: var(--ink-2); }

/* cards for references */
.ak-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.ak-card { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 10px 12px 10px 16px; text-decoration: none; color: var(--ink); border: 1px solid var(--line-2); background: var(--paper); overflow: hidden; }
.ak-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--st); }
.ak-card:hover { border-color: var(--st); }
.ak-card .ak-pill { position: absolute; top: 8px; right: 8px; font-size: 9.5px; padding: 3px 5px; }
.ak-card-id { font: 600 11.5px var(--font-mono); color: var(--ink-3); }
.ak-card strong { font-size: 14px; line-height: 1.3; padding-right: 60px; }
.ak-card-gist { font-size: 12.5px; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ak-card em { font-size: 12px; color: var(--accent); font-style: normal; }

/* inline references */
a.ak-ref { font: 600 0.92em var(--font-mono); text-decoration: none; color: var(--st); background: var(--st-bg); padding: 0 4px; border-bottom: 1.5px solid var(--st); white-space: nowrap; }
a.ak-ref:hover { background: var(--st); color: var(--paper); }
.ak-pop { position: fixed; z-index: 60; width: 340px; pointer-events: none; background: var(--paper); border: var(--bw) solid var(--line); border-left: 5px solid var(--st); padding: 12px 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18); font-size: 13px; }
.ak-pop strong { display: block; font-size: 14.5px; margin: 6px 0 4px; }
.ak-pop p { margin: 0; color: var(--ink-2); }
.ak-pop p.d { color: var(--ink); font-weight: 600; }

/* code */
.ak-code { margin: 0; border: 1px solid var(--line-2); background: var(--fill); overflow: hidden; }
.ak-code figcaption { display: flex; justify-content: space-between; align-items: center; padding: 4px 6px 4px 12px; border-bottom: 1px solid var(--line-2); font: 11px var(--font-mono); color: var(--ink-3); text-transform: lowercase; }
.ak-copy { font: 11px var(--font-mono); background: none; border: 1px solid transparent; color: var(--ink-2); padding: 3px 7px; cursor: pointer; }
.ak-copy:hover { border-color: var(--line-2); background: var(--paper); }
.ak-code pre { margin: 0; padding: 12px 14px; overflow-x: auto; font-size: 12.5px; line-height: 1.55; }
.ak-code code { font-family: var(--font-mono); background: none; padding: 0; }
.ak-error { border: 1.5px solid var(--err); background: var(--err-bg); color: var(--ink); padding: 10px 12px; font-size: 13px; }
.ak-error pre { margin: 8px 0 0; font-size: 12px; white-space: pre-wrap; }

/* ── graph + map canvases ──────────────────────────────── */
.ak-canvas-wrap { position: relative; }
.ak-canvas { display: block; width: 100%; height: auto; touch-action: none; user-select: none; }
.ak-canvas-tall { height: calc(100vh - 210px); min-height: 480px; }
.ak-gtools { position: absolute; left: 12px; bottom: 12px; display: flex; gap: 6px; }
.g-edge { fill: none; stroke: var(--ink-3); stroke-width: 1.2; opacity: 0.55; }
.g-edge.t-supersedes { stroke: var(--ak-mute); stroke-width: 2.4; stroke-dasharray: 6 4; opacity: 0.9; }
.g-edge.t-depends_on { stroke: var(--accent); stroke-width: 1.8; opacity: 0.85; }
.g-edge.t-amends { stroke: var(--ak-purple); stroke-width: 1.8; opacity: 0.85; }
.g-edge.t-relates { stroke: var(--ink-2); stroke-width: 1.5; opacity: 0.75; }
.g-edge.t-mentions { stroke-dasharray: 2 3; }
.g-edge.hot { opacity: 1; stroke: var(--accent); stroke-width: 2.4; }
.g-edge.dim { opacity: 0.08; }
.g-node { cursor: pointer; }
.g-node rect { fill: var(--st); stroke: var(--paper); stroke-width: 2.5; }
.g-node.doc rect { fill: var(--paper); stroke: var(--ak-purple); stroke-width: 2.5; }
.g-node text { font: 600 11px var(--font-mono); fill: var(--ink); paint-order: stroke; stroke: var(--bg); stroke-width: 4px; stroke-linejoin: miter; pointer-events: none; }
.g-node text.t { font: 500 11.5px var(--font-sans); fill: var(--ink-2); display: none; }
.g-node.hot text.t, .g-node.near text.t, .g-node:hover text.t, .ak-labels .g-node text.t { display: inline; }
.g-node.dim { opacity: 0.15; }
.g-node.hot rect { stroke: var(--ink); stroke-width: 3; }
.g-tag rect { fill: none; stroke: var(--line-2); stroke-dasharray: 3 3; }
.g-tag text { font: 11px var(--font-mono); fill: var(--ink-3); }
.ak-glegend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--ink-2); padding: 10px 14px; border-top: 1px solid var(--line-2); }
.ak-glegend span { display: inline-flex; gap: 6px; align-items: center; }
.ak-glegend svg { width: 26px; height: 8px; }

/* architecture map — same drawing language as a hand-made blueprint map */
.m-canvas { position: relative; height: clamp(420px, calc(100vh - 260px), 1100px); overflow: hidden; cursor: grab;
  background-color: var(--paper); background-image: radial-gradient(color-mix(in srgb, var(--ink) 14%, transparent) 1px, transparent 1px); background-size: 22px 22px; }
.m-canvas.is-panning { cursor: grabbing; }
.m-canvas.is-moving, .m-canvas.is-moving .m-node { cursor: move; }
.m-canvas svg { display: block; width: 100%; height: 100%; touch-action: none; user-select: none; }
.m-canvas .m-node { cursor: pointer; }
#m-stage { transition: opacity 300ms ease; }
@media (prefers-reduced-motion: reduce) { #m-stage { transition: none; } }
.m-zoom { display: inline-flex; }
.ak-mapbar .ak-btn[hidden] { display: none; }
.m-zoom .ak-btn { margin-left: calc(-1 * var(--bw)); min-width: 34px; justify-content: center; }
.m-zoom .ak-btn:first-child { margin-left: 0; }
.m-zlvl { font-family: var(--font-mono); font-size: 12px; min-width: 58px !important; }
.m-node { cursor: pointer; outline: none; }
.m-node rect.box { fill: var(--paper); stroke: var(--line); stroke-width: 1.5; }
.m-node .tag { font: 9.5px var(--font-mono); fill: var(--ink-3); letter-spacing: 0.06em; }
.m-node .label { font: 600 13.5px var(--font-sans); fill: var(--ink); }
.m-node .sub { font: 11.5px var(--font-sans); fill: var(--ink-2); }
.m-node .zoom { font: 600 11px var(--font-mono); fill: var(--accent); }
.m-node .cnt { font: 700 10.5px var(--font-mono); fill: var(--head-fg); }
.m-node rect.cntbg { fill: var(--head-bg); }
.m-node rect.adot { fill: var(--st); }
.m-node.k-context rect.box, .m-node.k-domain rect.box { fill: var(--accent-bg); stroke: var(--accent); stroke-width: 2; }
.m-node.k-context .label, .m-node.k-domain .label { fill: var(--accent); }
.m-node.k-planned rect.box, .m-node.k-deferred rect.box { stroke-dasharray: 5 4; stroke: var(--ink-3); }
.m-node.k-planned .label, .m-node.k-deferred .label { fill: var(--ink-2); }
.m-node.k-external rect.box, .m-node.k-actor rect.box, .m-node.k-store rect.box, .m-node.k-topic rect.box, .m-node.k-infra rect.box, .m-node.k-entity rect.box { fill: var(--fill); }
.m-node.k-iface rect.box { stroke: var(--accent); }
.m-node.k-iface .label, .m-node.k-package .label, .m-node.k-pkg .label, .m-node.k-binary .label, .m-node.k-topic .label, .m-node.k-entity .label { font-family: var(--font-mono); font-size: 12.5px; }
.m-node.drill rect.box { stroke-width: 2; }
.m-node.k-adr rect.box { stroke: var(--st); stroke-width: 1.5; }
.m-node.k-adr rect.bar { fill: var(--st); }
.m-node.k-adr .st { font: 700 9.5px var(--font-mono); fill: var(--st); letter-spacing: 0.06em; }
.m-node:hover rect.box { fill: var(--accent-bg); }
.m-node:focus-visible rect.box, .m-node.sel rect.box { stroke: var(--accent); stroke-width: 3; }
.m-node.dim { opacity: 0.35; }
.m-group rect { fill: none; stroke: var(--line-2); stroke-width: 1.2; stroke-dasharray: 4 3; }
.m-group text { font: 11px var(--font-mono); fill: var(--ink-3); }
.m-band-line { stroke: var(--line-2); stroke-dasharray: 4 3; }
.m-edge path { fill: none; stroke: var(--ink-2); stroke-width: 1.3; }
.m-edge.dashed path { stroke-dasharray: 5 4; }
.m-edge.t-supersedes path { stroke-width: 2; }
.m-edge .lbl rect { fill: var(--bg); }
.m-edge .lbl text { font: 11px var(--font-sans); fill: var(--accent); }
.m-dense .m-edge:not(.hot) { opacity: 0.5; }
.m-dense .m-edge .lbl { display: none; }
.m-dense .m-edge.hot .lbl { display: inline; }
.m-edge.hot path { stroke: var(--accent); stroke-width: 2; }
.m-edge.dim { opacity: 0.18; }
.m-edge.onsel { display: none; }
.m-edge.onsel.show { display: inline; }
.m-arrow { fill: var(--ink-2); }
.m-arrow--hot { fill: var(--accent); }
.m-detail h3 { margin: 2px 0 6px; font-size: 17px; }
.m-detail .kind { font: 11px var(--font-mono); color: var(--ink-3); letter-spacing: 0.06em; text-transform: uppercase; }
.m-detail .am-md { font-size: 13.5px; }
.m-detail .ak-cards { grid-template-columns: minmax(0, 1fr); margin-top: 10px; }
.ak-map-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
@media (max-width: 960px) { .ak-map-layout { grid-template-columns: minmax(0, 1fr); } }
.ak-mapbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
.ak-mapbar .ak-crumbs { flex: 1; font-size: 13px; }
.ak-mapbar .ak-crumbs button { font: inherit; background: none; border: 0; padding: 4px 6px; color: var(--accent); cursor: pointer; }
.ak-mapbar .ak-crumbs button[aria-current] { color: var(--ink); font-weight: 600; cursor: default; }
.ak-btn:disabled { color: var(--ink-3); border-color: var(--line-2); cursor: default; background: var(--paper); }
.m-foot { border-top: 1px solid var(--line-2); background: var(--fill); }
.m-foot .m-legend { margin: 0; padding: 8px 14px 6px; gap: 4px 14px; font-size: 11.5px; }
.m-foot .m-legend .m-key { width: 14px; height: 10px; }
.ak-maphint { padding: 0 14px 8px; font-size: 11.5px; color: var(--ink-3); }
.m-key { display: inline-block; width: 18px; height: 12px; border: 1.5px solid var(--line); background: var(--paper); }
.m-key--ctx { background: var(--accent-bg); border-color: var(--accent); }
.m-key--plan { border-style: dashed; border-color: var(--ink-3); }
.m-key--ext { background: var(--fill); }
.m-key--adr { border-color: var(--st); border-left-width: 5px; }
.m-key--line { height: 0; border: 0; border-top: 1.5px solid var(--ink-2); }
.m-key--dash { height: 0; border: 0; border-top: 1.5px dashed var(--ink-2); }
.m-key--cnt { width: auto; height: auto; padding: 0 5px; background: var(--head-bg); color: var(--head-fg); border: 0; font: 700 10.5px/16px var(--font-mono); }

/* ego graph in rail */
.ak-ego { display: block; width: 100%; height: auto; }
.ak-ego text { font: 600 10.5px var(--font-mono); fill: var(--ink); paint-order: stroke; stroke: var(--paper); stroke-width: 3px; }
.ak-ego a:hover rect { stroke: var(--ink); stroke-width: 2.5; }
.ak-glance { display: grid; gap: 10px; font-size: 13px; }
.ak-glance dt { font: 10.5px var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); }
.ak-glance dd { margin: 3px 0 0; }
.ak-glance .ok { color: var(--ak-green); font-weight: 700; }
.ak-glance .no { color: var(--ink-3); text-decoration: line-through; }
.ak-glance .warn { color: var(--warn); }
.ak-pn { display: flex; justify-content: space-between; gap: 12px; margin-top: 24px; }
.ak-pn a { flex: 1; display: block; padding: 12px 14px; border: var(--bw) solid var(--line-2); text-decoration: none; color: var(--ink); background: var(--paper); }
.ak-pn a:hover { border-color: var(--ink-3); }
.ak-pn a span { display: block; font: 11px var(--font-mono); color: var(--ink-3); }
.ak-pn a.next { text-align: right; }

/* source view */
.ak-source { margin: 0; max-height: 70vh; overflow: auto; }

/* ── search palette ────────────────────────────────────── */
.ak-palette { position: fixed; inset: 0; z-index: 80; background: rgba(10, 14, 22, 0.45); display: flex; justify-content: center; align-items: flex-start; padding: 10vh 16px 16px; }
.ak-palette-box { width: min(760px, 100%); background: var(--paper); border: var(--bw) solid var(--line); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3); overflow: hidden; }
.ak-palette input { width: 100%; border: 0; border-bottom: var(--bw) solid var(--line); padding: 16px 18px; font: 17px var(--font-sans); background: var(--paper); color: var(--ink); outline: none; }
.ak-results { max-height: 60vh; overflow-y: auto; }
.ak-result { display: grid; grid-template-columns: 70px minmax(0, 1fr) auto; gap: 4px 12px; padding: 10px 18px; text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--line-2); border-left: 4px solid transparent; }
.ak-result.on, .ak-result:hover { background: var(--fill); border-left-color: var(--st); }
.ak-result .mono { font-size: 12px; color: var(--st); font-weight: 600; padding-top: 2px; }
.ak-result strong { font-size: 14.5px; }
.ak-result .snip { grid-column: 2 / 4; font-size: 12.5px; color: var(--ink-2); }
.ak-result mark { background: var(--warn-bg); color: var(--ink); border-bottom: 1.5px solid var(--warn); padding: 0 1px; }
.ak-palette-foot { display: flex; gap: 16px; padding: 8px 18px; font: 11px var(--font-mono); color: var(--ink-3); border-top: 1px solid var(--line-2); }

/* problems */
.ak-problems { list-style: none; margin: 0; padding: 0; font-size: 12.5px; }
.ak-problems li { padding: 6px 12px; border-bottom: 1px solid var(--line-2); }
.ak-problems code { font-size: 11.5px; color: var(--ink-2); }

/* components gallery */
.ak-comp { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 10px 20px; padding: 14px 16px; border-bottom: 1px solid var(--line-2); }
.ak-comp h3 { margin: 0; font: 600 14px var(--font-mono); }
.ak-comp h3 + small { display: block; font: 11px var(--font-mono); color: var(--ink-3); margin-top: 4px; }
.ak-comp pre { margin: 6px 0 0; font-size: 12px; white-space: pre-wrap; background: var(--fill); padding: 10px 12px; border: 1px solid var(--line-2); }
@media (max-width: 700px) { .ak-comp { grid-template-columns: minmax(0, 1fr); } }

.ak-toast { position: fixed; bottom: 18px; right: 18px; z-index: 90; background: var(--head-bg); color: var(--head-fg); font: 12px var(--font-mono); padding: 8px 12px; opacity: 0; transition: opacity 200ms; pointer-events: none; }
.ak-toast.on { opacity: 1; }
.m-band { font: 600 10.5px var(--font-mono); fill: var(--ink-3); letter-spacing: 0.08em; }

/* ── blueprint sheet parts ─────────────────────────────── */
.ak-frame { margin-bottom: 8px; }
.ak-sheet-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start; }
@media (max-width: 1100px) { .ak-sheet-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ak-sheet-grid > .ak-sp-3 { grid-column: 1 / -1 !important; } }
@media (max-width: 760px) { .ak-sheet-grid { grid-template-columns: minmax(0, 1fr); } .ak-sheet-grid > .am-panel { grid-column: auto !important; } }
.am-panel-body.ak-flush { padding: 0; }
.am-panel-meta a { color: var(--accent); text-decoration: none; }

/* title block */
.ak-kv { background: var(--paper); }
.ak-kv dd { font-size: 14px; }
.ak-kv .am-kv-cell--wide dd { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
.ak-kv dd .ak-chips { margin-top: 2px; }
.ak-adr-head .ak-kv { margin-top: 16px; }
.ak-adr-head .ak-kv .ak-crumbs { font-size: 12.5px; }

/* status cell: ✓ Accepted / ✗ Rejected / ? Open … */
.ak-stc { display: inline-flex; align-items: center; gap: 6px; color: var(--st); font-weight: 500; white-space: nowrap; }
.ak-stc i { font-style: normal; font-weight: 700; width: 1em; text-align: center; }

/* register table */
.ak-reg { font-size: 13.5px; }
.ak-reg th { padding: 8px 14px !important; }
.ak-reg td { padding: 9px 14px !important; vertical-align: top; }
.ak-reg td.mono { font: 12.5px var(--font-mono); white-space: nowrap; }
.ak-reg td.mono a { color: var(--ink); text-decoration: none; }
.ak-reg .ak-reg-title { color: var(--ink); text-decoration: none; font-weight: 600; }
.ak-reg .ak-reg-title:hover { color: var(--accent); }
.ak-reg .ak-reg-what { font: 12.5px/1.45 var(--font-mono); color: var(--ink-2); max-width: 60ch; }
.ak-reg .ak-reg-what em { font: 600 10px var(--font-mono); text-transform: uppercase; color: var(--warn); font-style: normal; letter-spacing: 0.05em; }

/* tree links + timeline text */
.ak-tree a { color: inherit; text-decoration: none; }
.ak-tree a.am-tree-box { display: block; }
.ak-tree a.am-tree-box:hover { border-color: var(--accent); }
.ak-tree .am-tree-label:hover { color: var(--accent); }
.ak-tree .am-tree-tag { display: inline-block; min-width: 1.6em; text-align: center; background: var(--fill); border: 1px solid var(--line-2); padding: 0 3px; }
.am-tl-text a { font-family: var(--font-mono); text-decoration: none; }

/* area bars: segments by status inside a limits track */
.ak-segs { display: flex; overflow: hidden; }
.ak-segs span { height: 100%; background: var(--st); opacity: 0.85; }
.ak-segs span + span { border-left: 2px solid var(--paper); }
.am-lim-head a { color: var(--ink); text-decoration: none; }
.am-lim-head a:hover { color: var(--accent); }

/* ADR page inside the sheet */
.ak-frame .ak-adr-layout { grid-template-columns: 180px minmax(0, 1fr) 300px; }
.ak-body--grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: start; }
.ak-body--grid > .am-panel + .am-panel { margin-top: 0; }
.ak-body--grid > .am-panel { grid-column: span 3; }
.ak-body--grid > .am-panel[data-span="1"] { grid-column: span 1; }
.ak-body--grid > .am-panel[data-span="2"] { grid-column: span 2; }
.ak-body--grid > .am-panel[data-rows="2"] { grid-row: span 2; }
.ak-adr-layout--grid .ak-toc { display: none; }
.ak-adr-layout--grid { grid-template-columns: minmax(0, 1fr) 300px !important; }
@media (max-width: 1240px) { .ak-frame .ak-adr-layout { grid-template-columns: minmax(0, 1fr) 280px; } }
@media (max-width: 900px) { .ak-frame .ak-adr-layout, .ak-adr-layout--grid { grid-template-columns: minmax(0, 1fr) !important; } .ak-body--grid { grid-template-columns: minmax(0, 1fr); } .ak-body--grid > .am-panel { grid-column: auto !important; } }
.ak-stackcol { display: grid; gap: 20px; align-content: start; min-width: 0; }
.ak-more { display: block; padding: 12px 16px; font: 12.5px var(--font-mono); text-decoration: none; border-top: 1px solid var(--line-2); }
.ak-more:hover { background: var(--fill); }
.ak-kv dd .ak-crumbs { display: flex; width: 100%; line-height: 1.7; }
.m-ghost rect.box { fill: var(--bg); stroke: var(--ink-3); stroke-dasharray: 2 3; stroke-width: 1.3; }
.m-ghost .label { fill: var(--ink-2); font-weight: 500; }

/* compact decision rows in the map details */
.m-rows { border-top: 1px solid var(--line-2); margin-top: 6px; }
.m-row { display: grid; grid-template-columns: 10px 38px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 6px 2px; border-bottom: 1px solid var(--line-2); color: var(--ink); text-decoration: none; font-size: 13px; }
.m-row:hover { background: var(--fill); }
.m-row .mono { font-size: 11.5px; color: var(--ink-3); }
.m-row-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-row-s { font: 600 10px var(--font-mono); text-transform: uppercase; color: var(--st); }
.m-more summary { cursor: pointer; padding: 6px 2px; font: 12px var(--font-mono); color: var(--accent); border-bottom: 1px solid var(--line-2); }
.m-more[open] summary { color: var(--ink-3); }
.m-contains { margin: 12px 0 0; font-size: 13px; color: var(--ink-2); }
.m-contains b { color: var(--ink); font-weight: 600; margin-right: 4px; }
/* decision boxes keep their status color when hovered or selected */
.m-node.k-adr:hover rect.box { fill: var(--st-bg); }
.m-node.k-adr.sel rect.box, .m-node.k-adr:focus-visible rect.box { stroke: var(--st); stroke-width: 3; }
.m-node.k-adr.sel rect.box { fill: var(--st-bg); }

/* scenarios grid */
.ak-scen { width: 100%; border-collapse: separate; border-spacing: 3px; font-size: 13px; }
.ak-scen th { font: 11px var(--font-mono); color: var(--ink-2); font-weight: 400; text-align: left; padding: 6px 8px; }
.ak-scen thead th.ak-win { color: var(--ak-green); font-weight: 700; }
.ak-scen tbody th { font: 500 13px var(--font-sans); color: var(--ink); }
.ak-sc { text-align: center; padding: 8px 6px; vertical-align: middle; }
.ak-sc b { display: block; font-size: 15px; }
.ak-sc span { display: block; font-size: 11.5px; color: var(--ink-2); line-height: 1.35; }
.ak-sc--ok { background: var(--ak-green-bg); color: var(--ak-green); }
.ak-sc--warn { background: var(--warn-bg); color: var(--warn); }
.ak-sc--bad { background: var(--err-bg); color: var(--err); }

/* blocks your Claude wrote, before you keep them */
.ak-panel--claude { border: 1.5px dashed var(--ak-purple); }
.ak-panel--claude > .am-panel-head { background: var(--ak-purple-bg); border-bottom-style: dashed; border-bottom-color: var(--ak-purple); }
.ak-panel--claude > .am-panel-head .am-panel-id { background: var(--ak-purple); }
.ak-claude-bar { display: flex; align-items: center; gap: 6px; padding: 0 10px; font: 600 10.5px var(--font-mono); color: var(--ak-purple); letter-spacing: 0.04em; white-space: nowrap; }
.ak-claude-bar button { font: 12px var(--font-sans); padding: 3px 9px; border: 1px solid var(--ak-purple); background: var(--paper); color: var(--ak-purple); cursor: pointer; }
.ak-claude-bar button:hover { background: var(--ak-purple-bg); }
.ak-claude-bar button.drop { border-color: var(--line-2); color: var(--ink-2); }
/* undecided: the leaning option is highlighted, but softer than a final choice */
.ak-opt--undecided.ak-opt--ok { border-style: dashed; box-shadow: none; }
.ak-opt--undecided.ak-opt--ok .ak-opt-badge::before { content: "→ "; }
.ak-opt--undecided.ak-opt--no h3 { text-decoration: none; }

/* ── decision flow ─────────────────────────────────────── */
.ak-btn--primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.ak-btn--primary:hover { background: #2b2f37; }
.ak-btn--green { background: var(--ak-green); border-color: var(--ak-green); color: #fff; }
.ak-btn--green:hover { background: #196532; }
/* same box as .ak-pill--lg so the two chips line up */
.ak-priv { display: inline-flex; align-items: center; gap: 6px; font: 600 13px/1 var(--font-mono); padding: 7px 11px; border: 1px solid; letter-spacing: 0.03em; white-space: nowrap; }
.ak-priv--local { color: var(--ak-purple); background: var(--ak-purple-bg); }
.ak-priv--notes { color: var(--warn); background: var(--warn-bg); }
.ak-priv--shared { color: var(--accent); background: var(--accent-bg); }
.ak-priv--done { color: var(--ak-green); background: var(--ak-green-bg); }
.ak-flow { display: flex; border: var(--bw) solid var(--line); background: var(--paper); margin: -8px 0 20px; overflow-x: auto; }
.ak-flow-step { flex: 1; min-width: 150px; display: flex; gap: 10px; align-items: center; padding: 9px 14px; border-right: 1px solid var(--line-2); font-size: 13px; color: var(--ink-3); }
.ak-flow-step:last-child { border-right: 0; }
.ak-flow-step b { display: grid; place-items: center; width: 22px; height: 22px; border: 1.5px solid var(--ink-3); font: 700 11px var(--font-mono); flex: none; }
.ak-flow-step small { display: block; font: 10.5px var(--font-mono); color: var(--ink-3); }
.ak-flow-step.done { color: var(--ink-2); }
.ak-flow-step.done b { background: var(--ak-green); border-color: var(--ak-green); color: #fff; }
.ak-flow-step.now { color: var(--ink); font-weight: 600; background: var(--accent-bg); box-shadow: inset 0 -3px 0 var(--accent); }
.ak-flow-step.now b { background: var(--ink); border-color: var(--ink); color: #fff; }
.ak-flow-who { margin-left: auto; font: 600 9.5px var(--font-mono); font-style: normal; letter-spacing: 0.05em; padding: 1px 5px; border: 1px solid currentColor; }
.ak-flow-who--you { color: var(--ak-purple); }
.ak-flow-who--team { color: var(--accent); }
.ak-share-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.ak-share-url { display: flex; gap: 6px; align-items: center; border: 1px solid var(--line-2); background: var(--fill); padding: 4px 4px 4px 8px; }
.ak-share-url .mono { flex: 1; font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ak-share-url .ak-btn { padding: 4px 8px; }
.ak-mini-code { margin: 6px 0 0; font: 11.5px var(--font-mono); background: var(--fill); border: 1px solid var(--line-2); padding: 6px 8px; white-space: pre-wrap; word-break: break-all; }
.ak-team { border-color: var(--accent); margin-bottom: 18px; }
.ak-team > .am-panel-head { background: var(--accent-bg); }
.ak-team > .am-panel-head .am-panel-id { background: var(--accent); }
.ak-team-picks { display: grid; gap: 6px; margin-bottom: 12px; }
.ak-team-picks > div { display: grid; grid-template-columns: minmax(120px, 220px) minmax(0, 1fr) 24px; gap: 10px; align-items: center; font-size: 12.5px; }
.ak-team-bar { display: flex; gap: 2px; height: 22px; background: var(--fill); border: 1px solid var(--line-2); padding: 2px; }
.ak-team-bar i { font: 600 10.5px/16px var(--font-mono); font-style: normal; color: #fff; background: var(--ink); padding: 0 6px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ak-te-list { display: grid; gap: 8px; }
.ak-te { border: 1px solid var(--line-2); border-left: 4px solid var(--c, var(--line-2)); padding: 8px 11px; font-size: 13.5px; background: var(--paper); }
.ak-te--pro { --c: var(--ak-green); } .ak-te--con { --c: var(--err); } .ak-te--answer { --c: var(--accent); } .ak-te--note { --c: var(--warn); } .ak-te--pick { --c: var(--ink); }
.ak-te-top { display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--ink-3); margin-bottom: 3px; flex-wrap: wrap; }
.ak-te-top .mono { color: var(--ink); font-weight: 600; }
.ak-te-top time { margin-left: auto; font: 11px var(--font-mono); }
.ak-te-kind { font: 600 10px var(--font-mono); text-transform: uppercase; letter-spacing: 0.05em; padding: 1px 5px; border: 1px solid currentColor; color: var(--c, var(--ink-2)); }
.ak-te-why { margin-top: 3px; font-size: 12.5px; color: var(--ink-2); padding-left: 8px; border-left: 2px solid var(--line-2); }
.ak-te-acts { display: flex; gap: 4px; align-items: center; margin-top: 7px; flex-wrap: wrap; font-size: 11.5px; }
.ak-te-acts button { font: 11.5px var(--font-sans); padding: 2px 8px; border: 1px solid var(--line-2); background: var(--paper); cursor: pointer; }
.ak-te-acts button:hover { border-color: var(--ink-3); }
.ak-te-acts button.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.ak-te-acts .ak-te-go { border-color: var(--accent); color: var(--accent); }
.ak-te-reply { margin-top: 7px; padding: 4px 8px; background: var(--fill); border-left: 3px solid var(--ink); font-size: 12px; }
.ak-final { border-color: var(--ak-green); margin-top: 18px; }
.ak-final > .am-panel-head { background: var(--ak-green-bg); }
.ak-final > .am-panel-head .am-panel-id { background: var(--ak-green); }
.ak-final-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; }
.ak-final-opts button { text-align: left; padding: 10px 12px; border: 1.5px solid var(--line-2); background: var(--paper); cursor: pointer; font-size: 13px; }
.ak-final-opts button.on { border: 2.5px solid var(--ak-green); background: var(--ak-green-bg); font-weight: 600; }
.ak-ta, .ak-in { width: 100%; font: 14px var(--font-sans); padding: 8px 10px; border: 1.5px solid var(--line-2); background: var(--paper); color: var(--ink); }
.ak-ta { min-height: 70px; resize: vertical; }
.ak-ta:focus, .ak-in:focus { outline: none; border-color: var(--accent); }
.ak-in--big { font-size: 17px; font-weight: 600; border-color: var(--line); }
.ak-modal { position: fixed; inset: 0; z-index: 85; background: rgba(15, 18, 24, 0.45); display: grid; place-items: start center; padding: 12vh 16px 16px; }
.ak-modal-box { width: min(600px, 100%); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25); }
.ak-team-bar i { flex: none; min-width: 64px; }

/* ── tree: node tones and left-to-right layout ─────────────────────── */
.ak-tone-ok { --tone: var(--ak-green); --tone-bg: var(--ak-green-bg); }
.ak-tone-warn { --tone: var(--warn); --tone-bg: var(--warn-bg); }
.ak-tone-err { --tone: var(--err); --tone-bg: var(--err-bg); }
.ak-tone-hi { --tone: var(--accent); --tone-bg: var(--accent-bg); }
.am-tree-box[class*="ak-tone-"] { border-color: var(--tone); background: var(--tone-bg); color: var(--tone); }
.am-tree-box[class*="ak-tone-"] small { color: var(--ink-2); }
.am-tree-list li[class*="ak-tone-"] > .am-tree-label { color: var(--tone); font-weight: 600; }
.am-tree-list li[class*="ak-tone-"] > .am-tree-label::before { content: ""; display: inline-block; width: 7px; height: 7px; background: var(--tone); margin-right: 6px; vertical-align: 1px; }
.ak-ltree { font-size: 13px; overflow-x: auto; padding: 2px 0; }
.ak-ltree > .ak-lt-node + .ak-lt-node { margin-top: 10px; }
.ak-lt-node { display: flex; align-items: center; }
.ak-lt-box { flex: 0 1 auto; max-width: 280px; border: var(--bw) solid var(--line); background: var(--paper); padding: 5px 10px; font-weight: 600; line-height: 1.35; }
.ak-lt-box small { display: block; font-weight: 400; font-size: 11.5px; color: var(--ink-2); }
.ak-lt-box--root { background: var(--accent-bg); font-size: 14px; padding: 7px 14px; }
.ak-lt-box--leaf { font-weight: 400; border-color: var(--line-2); }
.ak-lt-box[class*="ak-tone-"] { border-color: var(--tone); background: var(--tone-bg); color: var(--tone); }
.ak-lt-box[class*="ak-tone-"] small { color: var(--ink-2); }
.ak-lt-kids { position: relative; display: flex; flex-direction: column; padding-left: 16px; }
.ak-lt-kids::before { content: ""; position: absolute; left: 0; top: 50%; width: 16px; border-top: 1px solid var(--ink-3); }
.ak-lt-kids > .ak-lt-node { position: relative; padding: 3px 0 3px 16px; }
.ak-lt-kids > .ak-lt-node::before { content: ""; position: absolute; left: 0; top: 50%; width: 16px; border-top: 1px solid var(--ink-3); }
.ak-lt-kids > .ak-lt-node::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; border-left: 1px solid var(--ink-3); }
.ak-lt-kids > .ak-lt-node:first-child::after { top: 50%; }
.ak-lt-kids > .ak-lt-node:last-child::after { bottom: 50%; }
.ak-lt-kids > .ak-lt-node:only-child::after { display: none; }
@media (max-width: 760px) { .ak-lt-box { max-width: 200px; } }

/* ── badges: (U), (assumption), [V] ─────────────────────────────────── */
.ak-badge { display: inline-block; font: 600 10px/1.5 var(--font-mono); text-transform: uppercase; letter-spacing: 0.03em; padding: 0 5px; border: 1px solid; vertical-align: 1px; white-space: nowrap; text-decoration: none; }
.ak-badge--u { color: var(--warn); background: var(--warn-bg); border-color: var(--warn); }
.ak-badge--v { color: var(--ak-green); background: var(--ak-green-bg); border-color: var(--ak-green); }
a.ak-badge--v:hover { filter: brightness(0.95); }

/* ── glossary ───────────────────────────────────────────────────────── */
abbr.ak-term { text-decoration: underline dotted var(--ink-3); text-underline-offset: 3px; cursor: help; }

/* ── fold ───────────────────────────────────────────────────────────── */
.ak-fold > summary { cursor: pointer; font: 12px var(--font-mono); color: var(--accent); list-style: none; }
.ak-fold > summary::-webkit-details-marker { display: none; }
.ak-fold > summary::before { content: "▸ "; }
.ak-fold[open] > summary::before { content: "▾ "; }
.ak-fold[open] > summary { margin-bottom: 12px; }
.ak-fold > * + * { margin-top: 12px; }

/* ── tabs ───────────────────────────────────────────────────────────── */
.ak-tab-input { position: absolute; opacity: 0; pointer-events: none; }
.ak-tab-bar { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--line-2); margin-bottom: 14px; }
.ak-tab-label { padding: 6px 12px; font-size: 13px; font-weight: 600; color: var(--ink-2); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.ak-tab-label:hover { color: var(--ink); }
.ak-tabs .ak-tab-body { display: none; }
.ak-tabs .ak-tab-body > * + * { margin-top: 12px; }
.ak-tab-input:nth-of-type(1):checked ~ .ak-tab-bar .ak-tab-label:nth-child(1) { color: var(--accent); border-bottom-color: var(--accent); }
.ak-tab-input:nth-of-type(1):checked ~ .ak-tab-body:nth-of-type(2) { display: block; }
.ak-tab-input:nth-of-type(2):checked ~ .ak-tab-bar .ak-tab-label:nth-child(2) { color: var(--accent); border-bottom-color: var(--accent); }
.ak-tab-input:nth-of-type(2):checked ~ .ak-tab-body:nth-of-type(3) { display: block; }
.ak-tab-input:nth-of-type(3):checked ~ .ak-tab-bar .ak-tab-label:nth-child(3) { color: var(--accent); border-bottom-color: var(--accent); }
.ak-tab-input:nth-of-type(3):checked ~ .ak-tab-body:nth-of-type(4) { display: block; }
.ak-tab-input:nth-of-type(4):checked ~ .ak-tab-bar .ak-tab-label:nth-child(4) { color: var(--accent); border-bottom-color: var(--accent); }
.ak-tab-input:nth-of-type(4):checked ~ .ak-tab-body:nth-of-type(5) { display: block; }
.ak-tab-input:nth-of-type(5):checked ~ .ak-tab-bar .ak-tab-label:nth-child(5) { color: var(--accent); border-bottom-color: var(--accent); }
.ak-tab-input:nth-of-type(5):checked ~ .ak-tab-body:nth-of-type(6) { display: block; }
.ak-tab-input:nth-of-type(6):checked ~ .ak-tab-bar .ak-tab-label:nth-child(6) { color: var(--accent); border-bottom-color: var(--accent); }
.ak-tab-input:nth-of-type(6):checked ~ .ak-tab-body:nth-of-type(7) { display: block; }
.ak-tab-input:nth-of-type(7):checked ~ .ak-tab-bar .ak-tab-label:nth-child(7) { color: var(--accent); border-bottom-color: var(--accent); }
.ak-tab-input:nth-of-type(7):checked ~ .ak-tab-body:nth-of-type(8) { display: block; }
.ak-tab-input:nth-of-type(8):checked ~ .ak-tab-bar .ak-tab-label:nth-child(8) { color: var(--accent); border-bottom-color: var(--accent); }
.ak-tab-input:nth-of-type(8):checked ~ .ak-tab-body:nth-of-type(9) { display: block; }
.ak-tab-input:focus-visible ~ .ak-tab-bar { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── rules ──────────────────────────────────────────────────────────── */
.ak-rules-title { font-weight: 600; margin-bottom: 6px; }
.ak-rules ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ak-rule { --tone: var(--line); --tone-bg: var(--paper); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border: 1px solid var(--line-2); border-left: 4px solid var(--tone); background: var(--paper); }
.ak-rule > div { padding: 7px 12px; min-width: 0; }
.ak-rule-then { background: var(--tone-bg); border-left: 1px dashed var(--line-2); }
.ak-rule span { display: block; font: 600 10px var(--font-mono); color: var(--ink-3); letter-spacing: 0.05em; }
.ak-rule b { color: var(--tone); }
.ak-rule:not([class*="ak-tone-"]) b { color: var(--ink); }
.ak-rule small { display: block; color: var(--ink-2); font-size: 12px; }
@media (max-width: 760px) { .ak-rule { grid-template-columns: minmax(0, 1fr); } .ak-rule-then { border-left: 0; border-top: 1px dashed var(--line-2); } }

/* ── arch ───────────────────────────────────────────────────────────── */
.ak-arch { display: grid; grid-template-columns: repeat(var(--n, 1), minmax(0, 1fr)); gap: 14px; align-items: start; }
.ak-arch--flow { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr) 18px; }
.ak-arch--flow > .ak-arch-col { grid-column: auto; }
.ak-arch-arrow { align-self: center; text-align: center; color: var(--ink-3); font-size: 18px; }
.ak-arch-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ak-arch-group { font: 600 11px var(--font-mono); text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-2); border-bottom: 2px solid var(--line-2); padding-bottom: 4px; }
.ak-arch-card { --tone: var(--line); --tone-bg: var(--paper); border: 1px solid var(--line-2); border-top: 3px solid var(--tone); background: var(--paper); padding: 7px 10px 8px; font-size: 12.5px; }
.ak-arch-card[class*="ak-tone-"] { background: var(--tone-bg); }
.ak-arch-title { font-weight: 600; font-size: 13.5px; }
.ak-arch-card[class*="ak-tone-"] .ak-arch-title { color: var(--tone); }
.ak-arch-meta { font: 11px var(--font-mono); color: var(--ink-3); margin-top: 1px; }
.ak-arch-card ul { margin: 5px 0 0; padding-left: 16px; color: var(--ink-2); }
.ak-arch-card li + li { margin-top: 2px; }
@media (max-width: 900px) { .ak-arch, .ak-arch--flow { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); grid-auto-columns: auto; } .ak-arch-arrow { transform: rotate(90deg); } }

/* ── architecture concepts: context ⊃ service ⊃ module; infra colored by technology ── */
.m-node.k-service rect.box, .m-node.k-binary rect.box { stroke: var(--ink); stroke-width: 2.25; }
.m-node.k-service .label, .m-node.k-binary .label { font-family: var(--font-mono); font-size: 12.5px; }
.m-node.k-module rect.box, .m-node.k-package rect.box, .m-node.k-component rect.box { stroke: var(--ink-2); stroke-width: 1.25; }
.m-node rect.modbar { fill: var(--ink-3); }
.m-node.k-module .tag, .m-node.k-package .tag { fill: var(--ink-2); }
.m-node.k-context rect.box { stroke-width: 2.5; }
/* tech palette (fill tint + top bar + label) */
.tech { --tc: var(--ink-2); --tc-bg: var(--fill); }
.tech-redis { --tc: #d82c20; --tc-bg: #fdecea; }
.tech-kafka, .tech-redpanda { --tc: #4b5563; --tc-bg: #eef0f2; }
.tech-postgres, .tech-postgresql { --tc: #336791; --tc-bg: #e8f0f7; }
.tech-s3, .tech-minio, .tech-objects { --tc: #c77700; --tc-bg: #fdf3e3; }
.tech-search, .tech-opensearch, .tech-elasticsearch { --tc: #00857e; --tc-bg: #e2f4f3; }
.tech-lb, .tech-nginx, .tech-haproxy { --tc: #2e7d32; --tc-bg: #e8f3e9; }
.tech-proxy { --tc: #6b46c1; --tc-bg: #efe9fb; }
.m-node.tech rect.box { fill: var(--tc-bg); stroke: var(--tc); }
.m-node.tech .tag { fill: var(--tc); font-weight: 700; }
.m-node.tech:hover rect.box { fill: var(--tc-bg); stroke-width: 2.5; }
.m-key--svc { border: 2px solid var(--ink) !important; }
.m-key--mod { border-color: var(--ink-2) !important; border-left: 4px solid var(--ink-3) !important; }
.m-key--tech { background: var(--tc-bg) !important; border: 1.5px solid var(--tc) !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tech { --tc-bg: color-mix(in srgb, var(--tc) 18%, var(--paper)); }
}
[data-theme="dark"] .tech { --tc-bg: color-mix(in srgb, var(--tc) 18%, var(--paper)); }
.m-node.k-system rect.box { fill: var(--fill); stroke: var(--ink); stroke-width: 2.5; }
.m-node.k-system .label { font-size: 14.5px; }

/* ── decisions: folder tree (architecture) ─────────────────────────── */
.ak-folders { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 20px; align-items: start; }
.ak-fside { position: sticky; top: 64px; display: flex; flex-direction: column; gap: 12px; max-height: calc(100vh - 80px); min-height: 0; }
.ak-ftree { flex: 0 1 auto; min-height: 120px; overflow: auto; background: var(--paper); border: var(--bw) solid var(--line); padding: 10px 8px 12px; }
.ak-ftree > .ak-label { display: block; font: 11px var(--font-mono); color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em; padding: 0 6px 6px; }
.ak-ftree ul { list-style: none; margin: 0; padding: 0; }
.ak-ftree ul ul { margin-left: 13px; padding-left: 6px; border-left: 1px solid var(--line-2); }
.ak-ftree details > summary { list-style: none; cursor: pointer; position: relative; }
.ak-ftree details > summary::-webkit-details-marker { display: none; }
.ak-ftree details > summary::before { content: "›"; position: absolute; left: -12px; top: 2px; width: 10px; text-align: center; font: 600 14px/1 var(--font-sans); color: var(--ink-2); transition: transform 0.12s; }
.ak-ftree details > summary:hover::before { color: var(--accent); }
.ak-ftree details[open] > summary::before { transform: rotate(90deg); }
.ak-ftree-list > li > details > summary::before { left: 0; top: 6px; }
.ak-ftree-list > li > details > summary > .ak-frow { padding-left: 12px; }
.ak-frow { display: flex; align-items: center; gap: 7px; padding: 4px 6px; color: var(--ink); text-decoration: none; font-size: 13px; line-height: 1.3; }
.ak-frow:hover { background: var(--fill); }
.ak-frow.on { background: var(--accent-bg); color: var(--accent); font-weight: 600; }
.ak-frow.zero { color: var(--ink-3); }
.ak-frow b { margin-left: auto; font: 600 10.5px var(--font-mono); color: var(--ink-3); }
.ak-frow.on b { color: var(--accent); }
.ak-fname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ak-fk { flex: none; width: 11px; height: 11px; border: 1.5px solid var(--ink-3); background: var(--paper); }
.ak-fk--context { border-color: var(--accent); background: var(--accent-bg); }
.ak-fk--system { border: 2px solid var(--ink); background: var(--fill); }
.ak-fk--service, .ak-fk--binary { border: 2px solid var(--ink); }
.ak-fk--module, .ak-fk--package, .ak-fk--component { border-color: var(--ink-2); border-left: 4px solid var(--ink-3); }
.ak-fk--planned { border-style: dashed; }
.ak-fk--external, .ak-fk--actor, .ak-fk--store, .ak-fk--topic, .ak-fk--infra { background: var(--fill); }
.ak-fk.tech { background: var(--tc-bg); border-color: var(--tc); }
.ak-fk--all { border: 0; background: var(--ink); }
.ak-fk--unfiled { border-style: dotted; }
.ak-funfiled { margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--line-2); }
.ak-fhead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 14px; padding: 8px 12px; background: var(--paper); border: var(--bw) solid var(--line); }
.ak-fcrumbs { font: 12.5px var(--font-mono); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.ak-fcrumbs a { color: var(--accent); text-decoration: none; }
.ak-fcrumbs i { color: var(--ink-3); font-style: normal; }
.ak-fhead-tools { display: flex; gap: 6px; }
.ak-fmain .ak-deck { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.ak-ftags { flex: 0 0 auto; background: var(--paper); border: var(--bw) solid var(--line); padding: 10px 8px 10px 12px; }
.ak-ftags > .ak-label { display: block; font: 11px var(--font-mono); color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px; }
.ak-ftags-list { display: flex; flex-wrap: wrap; gap: 5px; max-height: 190px; overflow-y: auto; padding-right: 4px; }
.ak-ftags-list .ak-chip { font-size: 11.5px; padding: 3px 6px; }
@media (max-width: 900px) { .ak-folders { grid-template-columns: minmax(0, 1fr); } .ak-fside { position: static; max-height: none; } .ak-ftree { max-height: 320px; } }

/* ── sequence: linked participants and playback ──────────────────── */
.ak-part--linked rect.am-actor { stroke-width: 1.75; }
.ak-part--linked.k-service rect.am-actor, .ak-part--linked.k-binary rect.am-actor { stroke: var(--ink); stroke-width: 2.25; }
.ak-part--linked.k-context rect.am-actor { fill: var(--accent-bg); stroke: var(--accent); stroke-width: 2; }
.ak-part--linked.tech rect.am-actor { fill: var(--tc-bg); stroke: var(--tc); }
.ak-part--linked a { cursor: pointer; }
.ak-part--linked a:hover rect.am-actor { stroke-width: 3; }
.ak-seq--play { outline: none; position: relative; }
.ak-seq--play:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
.ak-sq-bar { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; }
.ak-sq-btn { flex: none; display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; background: var(--ink); color: var(--paper); cursor: pointer; }
.ak-sq-btn:hover { background: var(--accent); }
.ak-sq-btn svg { width: 11px; height: 11px; fill: currentColor; }
.ak-sq-btn .i-play { display: none; }
.ak-seq.is-paused .ak-sq-btn .i-play { display: inline; }
.ak-seq.is-paused .ak-sq-btn .i-pause { display: none; }
.ak-sq-segs { flex: 1; display: flex; gap: 2px; min-width: 60px; }
.ak-sq-seg { flex: 1; height: 18px; padding: 5px 0; border: 0; background: none; cursor: pointer; }
.ak-sq-seg i { display: block; height: 8px; background: var(--line-2); position: relative; overflow: hidden; }
.ak-sq-seg:hover i { background: var(--ink-3); }
.ak-sq-seg.done i { background: var(--ink); }
.ak-sq-seg.cur i { background: var(--line-2); }
.ak-sq-seg.cur i::after { content: ""; position: absolute; inset: 0; background: var(--ink); transform-origin: left; animation: ak-sq-fill var(--dur, 1s) linear forwards; }
.ak-seq.is-paused .ak-sq-seg.cur i::after { animation: none; transform: none; }
@keyframes ak-sq-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.ak-sq-count { font: 11px var(--font-mono); color: var(--ink-3); min-width: 34px; text-align: right; }
.ak-sq-speed { border: 0; background: none; padding: 2px 4px; font: 600 11px var(--font-mono); color: var(--ink-2); cursor: pointer; }
.ak-sq-speed:hover { background: var(--fill); color: var(--accent); }
.ak-sq-caption { display: flex; align-items: center; gap: 6px; height: 26px; margin: 0 0 8px 36px; font: 500 12px var(--font-sans); text-align: left; white-space: nowrap; overflow: hidden; }
.ak-sq-chip { flex: none; padding: 2px 8px; border: 1.5px solid var(--line); background: var(--paper); color: var(--ink); font-weight: 600; }
.ak-sq-chip.k-service, .ak-sq-chip.k-binary { border: 2.25px solid var(--ink); font-family: var(--font-mono); font-size: 11.5px; }
.ak-sq-chip.k-context { background: var(--accent-bg); border-color: var(--accent); color: var(--accent); }
.ak-sq-chip.k-module, .ak-sq-chip.k-package, .ak-sq-chip.k-component { border-color: var(--ink-2); border-left: 4px solid var(--ink-3); }
.ak-sq-chip.k-external, .ak-sq-chip.k-actor, .ak-sq-chip.k-store, .ak-sq-chip.k-topic, .ak-sq-chip.k-infra { background: var(--fill); }
.ak-sq-chip.tech { background: var(--tc-bg); border-color: var(--tc); color: var(--tc); }
.ak-sq-to { color: var(--ink-3); font-weight: 600; }
.ak-sq-what { margin-left: auto; max-width: 62%; min-width: 0; overflow: hidden; text-overflow: ellipsis; padding: 3px 9px; background: var(--ink); color: var(--paper); font-weight: 500; }
.ak-seq--play .ak-sq-step { cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .ak-sq-seg.cur i::after { animation: none; transform: none; } }
.ak-seq .ak-sq-step { transition: opacity 0.25s; }
.ak-seq.is-stepping .ak-sq-step.is-future { opacity: 0.12; }
.ak-seq.is-stepping .ak-sq-step.is-done { opacity: 0.55; }
.ak-seq.is-stepping .ak-sq-step.is-current { opacity: 1; }
.ak-seq .ak-sq-step.is-current path.am-edge { stroke: var(--line-2); stroke-width: 2.5; }
.ak-seq path.ak-sq-flow { fill: none; stroke-width: 2.5; }
.ak-seq .ak-sq-step.is-current path.am-edge--dashed + path.ak-sq-flow { stroke-dasharray: 5 4; }
.ak-seq .ak-sq-step.is-current text { fill: var(--accent); font-weight: 600; }
.ak-seq .ak-sq-step.is-current rect.am-note { stroke-width: 2; }
.ak-sq-dot { fill: var(--paper); stroke-width: 2.5; }
.ak-sq-warn { margin-top: 6px; font: 11.5px var(--font-mono); color: var(--warn); text-align: left; }

/* sequence: during playback the two active participants stay, the rest dim */
.ak-seq .ak-part { transition: opacity 0.25s; }
.ak-seq.is-stepping .ak-part:not(.is-active) { opacity: 0.28; }
/* component preview (hover a linked participant) */
.ak-npop { width: 340px; max-width: calc(100vw - 24px); border-left: 5px solid var(--tc, var(--ink)); }
.ak-npop-tag { display: flex; flex-wrap: wrap; gap: 4px 8px; font: 600 10.5px var(--font-mono); letter-spacing: 0.05em; color: var(--tc, var(--ink-3)); margin-bottom: 4px; }
.ak-npop-tag span { font-weight: 400; color: var(--ink-3); letter-spacing: 0; }
.ak-npop-sub { font-size: 12.5px; color: var(--ink-2); margin-top: 2px; }
.ak-npop p { margin: 8px 0 0; font-size: 12.5px; color: var(--ink-2); line-height: 1.45; }
.ak-npop-h { margin: 10px 0 4px; font: 11px var(--font-mono); color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em; }
.ak-npop-adrs { list-style: none; margin: 0; padding: 0; }
.ak-npop-adrs li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 6px; align-items: center; padding: 3px 0; font-size: 12.5px; border-top: 1px solid var(--line-2); }
.ak-npop-adrs li .mono { font-size: 11px; color: var(--ink-3); }
.ak-npop-adrs li .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ak-npop-adrs li .ak-pill { font-size: 9.5px; padding: 2px 5px; }
.ak-npop-adrs li.more { display: block; color: var(--ink-3); font-size: 11.5px; }
.ak-npop-kids { font-size: 12.5px; color: var(--ink-2); }
.ak-npop-foot { margin-top: 10px; font: 11px var(--font-mono); color: var(--accent); }

/* map: decision impact */
.m-impact { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-bottom: 1px solid var(--line-2); font-size: 12.5px; }
.m-impact span { font: 11px var(--font-mono); color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em; }
.m-impact a { color: var(--ink); font-weight: 600; text-decoration: none; background: var(--ink); color: var(--paper); padding: 2px 8px; }
.m-impact a.x { margin-left: auto; background: none; color: var(--ink-2); font-size: 16px; padding: 0 4px; }
#m-stage.is-impact .m-node:not(.is-hit) { opacity: 0.2; transition: opacity 0.2s; }
#m-stage.is-impact .m-edge:not(.is-hit) { opacity: 0.08; }
#m-stage.is-impact .m-node.is-hit rect.box { stroke-width: 3; }
#m-stage.is-impact .m-edge.is-hit path { stroke: var(--ink); stroke-width: 2; stroke-dasharray: 7 5; animation: m-flow 0.9s linear infinite; }
@keyframes m-flow { to { stroke-dashoffset: -12; } }
@media (prefers-reduced-motion: reduce) { #m-stage.is-impact .m-edge.is-hit path { animation: none; } }
.ak-impact-link { font-weight: 400; text-transform: none; letter-spacing: 0; }

/* sequence → map replay */
.ak-sq-map { border: 1.5px solid var(--ink); background: var(--paper); padding: 2px 8px; font: 600 11px var(--font-mono); color: var(--ink); cursor: pointer; }
.ak-sq-map:hover { background: var(--ink); color: var(--paper); }
.m-replay { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-bottom: 1px solid var(--line-2); font-size: 12px; }
.m-replay .ak-sq-count { min-width: 40px; }
.m-replay-x { margin-left: 8px; color: var(--ink-2); text-decoration: none; font-size: 16px; }
.m-replay .ak-sq-what { margin-left: auto; }
.m-replay-tmp { fill: none; stroke: var(--ink); stroke-width: 2; stroke-dasharray: 6 5; }

/* graph: history */
.g-hist { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--line-2); font-size: 12px; }
.g-hist-l { font: 11px var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); }
.g-hist input { flex: 0 1 260px; accent-color: var(--ink); }
.g-hist-n { font: 600 11.5px var(--font-mono); min-width: 54px; }
.g-hist .ak-sq-what { margin-left: auto; max-width: 50%; }
.g-hist-x { border: 0; background: none; font-size: 16px; color: var(--ink-2); cursor: pointer; }
#g-svg.is-history .g-node.is-later { opacity: 0.05; pointer-events: none; }
#g-svg.is-history .g-edge.is-later { opacity: 0.03; }
#g-svg .g-node { transition: opacity 0.35s; }
#g-svg .g-node.is-newest rect { stroke: var(--ink); stroke-width: 4; animation: g-pop 0.6s ease-out; }
@keyframes g-pop { from { transform: scale(1.6); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { #g-svg .g-node.is-newest rect { animation: none; } }

/* ── IDE shell: explorer | canvas | details, with draggable splitters ── */
.ak-main--full { max-width: none; padding: 0; }
.ide { position: relative; --l: 276px; --r: 340px; display: flex; height: calc(100dvh - var(--m-top, 49px)); overflow: hidden; background: var(--bg); }
.ide-pane { flex: none; display: flex; flex-direction: column; min-width: 0; overflow: hidden; background: var(--paper); }
.ide-left { width: var(--l); border-right: 1px solid var(--line-2); }
.ide-right { width: var(--r); border-left: 1px solid var(--line-2); }
.ide.l-off .ide-left, .ide.l-off .ide-split[data-side="l"], .ide.r-off .ide-right, .ide.r-off .ide-split[data-side="r"] { display: none; }
.ide-split { flex: none; width: 5px; margin: 0 -2px; z-index: 4; cursor: col-resize; background: transparent; position: relative; }
.ide-split::after { content: ""; position: absolute; inset: 0 2px; background: transparent; transition: background 0.12s; }
.ide-split:hover::after, .ide-split.is-drag::after { background: var(--accent); }
body.ide-resizing { cursor: col-resize; user-select: none; }
.ide-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--line-2); flex: none; }
.ide-head h2 { margin: 0; font: 600 11px var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.ide-body { flex: 1; min-height: 0; overflow: auto; }
.ide-body.pad { padding: 12px 14px 16px; }
.ide-search { margin: 8px 10px; width: calc(100% - 20px); padding: 6px 9px; border: 1px solid var(--line-2); background: var(--bg); font: 13px var(--font-sans); color: var(--ink); flex: none; }
.ide-search:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.ide-center { flex: 1; min-width: 0; display: flex; flex-direction: column; position: relative; }
.ide-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 8px 12px; border-bottom: 1px solid var(--line-2); background: var(--paper); flex: none; }
.ide-bar .ide-title { min-width: 0; }
.ide-bar h1 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 17px; line-height: 1.25; }
.ide-bar p { margin: 2px 0 0; font-size: 12.5px; color: var(--ink-2); max-width: 70ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ide-bar .ak-crumbs { font-size: 12px; margin: 0 0 1px -6px; }
.ide-bar .ak-crumbs button { font: inherit; background: none; border: 0; padding: 2px 6px; color: var(--accent); cursor: pointer; }
.ide-bar .ak-crumbs button[aria-current] { color: var(--ink-2); cursor: default; }
.ide-bar .ak-crumbs i { color: var(--ink-3); font-style: normal; }
.ide-bar .ak-crumbs[hidden] { display: none; }
.ide-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ide-tools .ak-btn[hidden] { display: none; }
.ide-tools .ak-btn[aria-pressed="true"], .ide-tools .ak-btn.on { background: var(--fill); }
.ide-tabs { display: flex; gap: 2px; }
.ide-tabs button { padding: 5px 11px; border: 1px solid transparent; background: none; font: 600 12px var(--font-mono); letter-spacing: 0.04em; color: var(--ink-2); cursor: pointer; }
.ide-tabs button[aria-selected="true"] { border-color: var(--line); background: var(--paper); color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent); }
.ide-stage { flex: 1; min-height: 0; position: relative; }
.ide-stage .m-canvas, .ide-stage .pz-host { position: absolute; inset: 0; height: auto; }
.ide-foot { flex: none; border-top: 1px solid var(--line-2); background: var(--paper); }
.ide-foot > summary { cursor: pointer; padding: 6px 12px; font: 600 11px var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.ide-foot[open] > summary { border-bottom: 1px solid var(--line-2); }
.ide-foot .m-legend { margin: 0; padding: 8px 12px 4px; gap: 4px 14px; font-size: 11.5px; }
.ide-foot .m-legend .m-key { width: 14px; height: 10px; }
.ide-foot .ak-maphint { padding: 2px 12px 9px; }
.ide-center > .m-impact, .ide-center > .m-replay { position: absolute; z-index: 6; top: 58px; left: 50%; transform: translateX(-50%); max-width: calc(100% - 24px); background: var(--paper); border: var(--bw) solid var(--line); box-shadow: var(--shadow); }
.m-detail-body { padding: 12px 14px 16px; }

/* explorer tree */
.tree { list-style: none; margin: 0; padding: 0 0 12px; font-size: 13px; }
.tree ul { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 1px solid var(--line-2); margin-left: 11px; }
.tree-row { display: flex; align-items: center; gap: 5px; width: 100%; padding: 3px 10px 3px 6px; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; min-width: 0; }
.tree-row:hover { background: var(--fill); }
.tree-row.is-sel { background: var(--accent-bg); color: var(--accent); }
.tree-row.is-here { font-weight: 600; }
.tree-row .tw { flex: none; width: 14px; height: 14px; display: grid; place-items: center; color: var(--ink-3); font-size: 10px; border: 0; background: none; padding: 0; cursor: pointer; }
.tree-row .tw.leaf { visibility: hidden; }
.tree-row .tn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree-row .tk { flex: none; font: 10px var(--font-mono); color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.04em; }
.tree-row .ak-kg { flex: none; color: var(--ink-3); }
.tree li.is-hidden { display: none; }
.tree .tree-more { padding: 3px 10px 3px 30px; color: var(--ink-3); font-size: 12px; }

/* pan/zoom viewer */
.pz-host { position: relative; overflow: hidden; cursor: grab; touch-action: none; }
.pz-host.is-panning { cursor: grabbing; }
.pz-ctl { position: absolute; right: 10px; bottom: 10px; z-index: 3; display: flex; border: var(--bw) solid var(--line); background: var(--paper); box-shadow: var(--shadow); }
.pz-ctl button { min-width: 30px; height: 28px; padding: 0 6px; border: 0; background: none; font: 600 12px var(--font-mono); color: var(--ink); cursor: pointer; }
.pz-ctl button:hover { background: var(--fill); }
.pz-ctl .pz-lvl { min-width: 54px; border-left: 1px solid var(--line-2); border-right: 1px solid var(--line-2); }
.ak-pz { position: relative; height: var(--pz-h, 520px); border: 1px solid var(--line-2); background: var(--paper); }
.ak-pz svg text { user-select: none; }
@media (max-width: 900px) {
  .ide-split { display: none; }
  .ide-left, .ide-right { position: absolute; z-index: 8; top: 0; bottom: 0; box-shadow: var(--shadow); }
  .ide-left { left: 0; width: min(86vw, var(--l)); }
  .ide-right { right: 0; width: min(86vw, var(--r)); }
}

.tree-grp > .tree-gh { padding: 8px 12px 3px; font: 600 11px var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.tree-gh b { font-weight: 600; color: var(--ink-2); margin-left: 4px; }
.tree-grp > ul { border-left: 0; margin-left: 0; padding-left: 6px; }
.er-pz { cursor: grab; }
.ide-stage > .ide-body[hidden], .ide-stage > .pz-host[hidden] { display: none; }
.ide-stage > .ide-body { position: absolute; inset: 0; }
.er-fields td { padding: 2px 6px; font-size: 12px; }
.ak-seq[data-pz] { display: block; width: 100%; }
.am-md:has(> .ak-steps), .am-intro:has(.ak-seq) { max-width: none !important; }

.m-ctxframe rect { fill: color-mix(in srgb, var(--c) 5%, transparent); stroke: var(--c); stroke-width: 1.4; stroke-dasharray: 7 5; rx: 3; }
.m-ctxframe text { font: 700 11px var(--font-mono); letter-spacing: 0.08em; }
.m-tierframe rect { fill: color-mix(in srgb, var(--ink) 2.5%, transparent); stroke: var(--line-2); stroke-width: 1.2; }
.m-tierframe text { font: 700 12px var(--font-mono); letter-spacing: 0.12em; fill: var(--ink-3); }