/* NARP styles. Every colour is a design token (narp-docs 03-architecture/theming.md, US-UX-003).
   Component rules below this block may use only var(--token); CI checks that (tests/server/test_theme.py). */

/* ===== TOKENS ===== */
:root,
:root[data-resolved-theme="light"] {
  color-scheme: light;
  --bg: #FFFFFF;
  --surface: #F8FAFC;
  --surface-2: #F1F5F9;
  --text: #0F172A;
  --text-muted: #475569;
  --accent: #4F46E5;
  --accent-2: #0F766E;
  --on-accent: #FFFFFF;
  --brand-indigo: #5B5FEF;
  --brand-teal: #18C3A7;
  --border-strong: #64748B;
  --border-subtle: #E2E8F0;
  --focus-ring: #4F46E5;
  --danger: #B91C1C;
  --warning: #92400E;
  --success: #15803D;
  --code-bg: #F1F5F9;
  --diff-add-bg: #DCFCE7;
  --diff-del-bg: #FEE2E2;
  --diff-add-word: #86EFAC;
  --diff-del-word: #FCA5A5;
  --diff-add-mark: #15803D;
  --diff-del-mark: #B91C1C;
  --status-draft-bg: #E2E8F0;
  --status-draft-fg: #334155;
  --status-review-bg: #FEF3C7;
  --status-review-fg: #92400E;
  --status-approved-bg: #E0E7FF;
  --status-approved-fg: #3730A3;
  --status-implemented-bg: #CCFBF1;
  --status-implemented-fg: #115E59;
  --status-verified-bg: #DCFCE7;
  --status-verified-fg: #166534;
  --status-deprecated-bg: #F1F5F9;
  --status-deprecated-fg: #475569;
  --blame-age-1: #E0E7FF;
  --blame-age-2: #C7D2FE;
  --blame-age-3: #A5B4FC;
  --blame-age-4: #818CF8;
  --blame-age-5: #4F46E5;
  --chart-1: #4F46E5;
  --chart-2: #0F766E;
  --chart-3: #B45309;
  --chart-4: #BE123C;
  --chart-5: #475569;
  --chart-6: #15803D;
  --shadow: rgb(15 23 42 / 0.08);
  --overlay: rgb(15 23 42 / 0.4);
  --syntax-keyword: #6D28D9;
  --syntax-string: #0F766E;
  --syntax-comment: #475569;
  --syntax-number: #B45309;
  --syntax-name: #1D4ED8;
  --syntax-type: #9D174D;
  --syntax-operator: #334155;
  --syntax-error: #B91C1C;
}

:root[data-resolved-theme="dark"] {
  color-scheme: dark;
  --bg: #0B1020;
  --surface: #111830;
  --surface-2: #1A2340;
  --text: #F1F5F9;
  --text-muted: #94A3B8;
  --accent: #A5A8FF;
  --accent-2: #2DD4BF;
  --on-accent: #0B1020;
  --brand-indigo: #5B5FEF;
  --brand-teal: #18C3A7;
  --border-strong: #64748B;
  --border-subtle: #1E293B;
  --focus-ring: #A5A8FF;
  --danger: #FCA5A5;
  --warning: #FCD34D;
  --success: #86EFAC;
  --code-bg: #111830;
  --diff-add-bg: #0F2E22;
  --diff-del-bg: #3A1620;
  --diff-add-word: #14532D;
  --diff-del-word: #7F1D1D;
  --diff-add-mark: #86EFAC;
  --diff-del-mark: #FCA5A5;
  --status-draft-bg: #1E293B;
  --status-draft-fg: #CBD5E1;
  --status-review-bg: #3B2A06;
  --status-review-fg: #FCD34D;
  --status-approved-bg: #25265E;
  --status-approved-fg: #C7C9FF;
  --status-implemented-bg: #0B3B36;
  --status-implemented-fg: #5EEAD4;
  --status-verified-bg: #0F3A22;
  --status-verified-fg: #86EFAC;
  --status-deprecated-bg: #1A2340;
  --status-deprecated-fg: #94A3B8;
  --blame-age-1: #25265E;
  --blame-age-2: #333682;
  --blame-age-3: #4B4FB0;
  --blame-age-4: #7377E0;
  --blame-age-5: #A5A8FF;
  --chart-1: #A5A8FF;
  --chart-2: #2DD4BF;
  --chart-3: #FCD34D;
  --chart-4: #FDA4AF;
  --chart-5: #94A3B8;
  --chart-6: #86EFAC;
  --shadow: rgb(0 0 0 / 0.5);
  --overlay: rgb(0 0 0 / 0.6);
  --syntax-keyword: #C4B5FD;
  --syntax-string: #5EEAD4;
  --syntax-comment: #94A3B8;
  --syntax-number: #FCD34D;
  --syntax-name: #93C5FD;
  --syntax-type: #F9A8D4;
  --syntax-operator: #CBD5E1;
  --syntax-error: #FCA5A5;
}
/* ===== END TOKENS ===== */

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: "Sarabun", "Noto Sans Thai", "Leelawadee UI", "Thonburi", system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.55; word-break: normal; line-break: auto;
}
a { color: var(--accent); }
a:hover { text-decoration-thickness: 2px; }
code, pre, kbd, .mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; }
.muted { color: var(--text-muted); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
[hidden] { display: none !important; }

/* focus (US-UX-007): 2 px ring, 2 px offset, keyboard only */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: 2px; }
.skip-link { position: absolute; left: 8px; top: -48px; background: var(--accent); color: var(--on-accent); padding: 8px 12px; z-index: 100; }
.skip-link:focus { top: 8px; }

/* layout */
.topbar { display: flex; align-items: center; gap: 12px; padding: 8px 16px; background: var(--surface); border-bottom: 1px solid var(--border-subtle); flex-wrap: wrap; }
.topbar .spacer { flex: 1; }
.logo img { height: 28px; display: block; }
.logo-dark { display: none !important; }
:root[data-resolved-theme="dark"] .logo-light { display: none !important; }
:root[data-resolved-theme="dark"] .logo-dark { display: block !important; }
.layout { display: grid; grid-template-columns: minmax(200px, 280px) minmax(0, 1fr) minmax(200px, 300px); min-height: calc(100vh - 52px); }
.layout.no-side { grid-template-columns: minmax(0, 1fr); }
.layout.no-context { grid-template-columns: minmax(200px, 280px) minmax(0, 1fr); }
.sidebar { border-right: 1px solid var(--border-subtle); background: var(--surface); padding: 12px; overflow: auto; }
.context { border-left: 1px solid var(--border-subtle); background: var(--surface); padding: 12px; overflow: auto; }
main { padding: 20px 28px; min-width: 0; }
@media (max-width: 1024px) {
  .layout, .layout.no-context { grid-template-columns: minmax(0, 1fr); }
  .sidebar, .context { border: 0; border-bottom: 1px solid var(--border-subtle); }
}
.page-narrow { max-width: 560px; margin: 48px auto; padding: 0 16px; }
.banner { padding: 8px 16px; border-bottom: 1px solid var(--border-subtle); background: var(--surface-2); }
.banner.warn { color: var(--warning); }
.banner.danger { color: var(--danger); }

/* menus and buttons */
details.menu { position: relative; }
details.menu > summary { list-style: none; cursor: pointer; padding: 6px 10px; border: 1px solid var(--border-strong); border-radius: 6px; }
details.menu > summary::-webkit-details-marker { display: none; }
details.menu .menu-items { position: absolute; right: 0; top: calc(100% + 4px); background: var(--bg); border: 1px solid var(--border-strong); border-radius: 6px; box-shadow: 0 8px 24px var(--shadow); min-width: 180px; z-index: 20; padding: 4px; }
.menu-items a, .menu-items button { display: block; width: 100%; text-align: left; padding: 6px 10px; background: none; border: 0; color: var(--text); font: inherit; cursor: pointer; border-radius: 4px; text-decoration: none; }
.menu-items a:hover, .menu-items button:hover { background: var(--surface-2); }
.menu-items [aria-checked="true"]::before { content: "✓ "; }
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 6px; border: 1px solid var(--border-strong); background: var(--bg); color: var(--text); font: inherit; cursor: pointer; text-decoration: none; }
.btn:hover { background: var(--surface-2); }
.btn.primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.btn.danger { color: var(--danger); border-color: var(--danger); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.6; cursor: not-allowed; }
.badge-count { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 10px; background: var(--accent); color: var(--on-accent); font-size: 0.8rem; text-align: center; }

/* forms */
label { display: block; font-weight: 600; margin: 12px 0 4px; }
.hint { color: var(--text-muted); font-size: 0.9rem; font-weight: normal; }
input[type=text], input[type=password], input[type=email], input[type=url], input[type=number], input[type=search], select, textarea {
  width: 100%; padding: 8px 10px; border: 1px solid var(--border-strong); border-radius: 6px; background: var(--bg); color: var(--text); font: inherit;
}
textarea { min-height: 90px; }
.field-error, .errorlist { color: var(--danger); margin: 4px 0; padding: 0; list-style: none; }
.form-summary { border: 1px solid var(--danger); color: var(--danger); padding: 8px 12px; border-radius: 6px; margin-bottom: 12px; }
.secret-box { display: flex; gap: 8px; align-items: center; padding: 8px; background: var(--surface-2); border-radius: 6px; font-family: ui-monospace, monospace; word-break: break-all; }
.messages { list-style: none; padding: 0; margin: 0 0 12px; }
.messages li { padding: 8px 12px; border-radius: 6px; margin-bottom: 6px; background: var(--surface-2); }
.messages .error { color: var(--danger); }
.messages .success { color: var(--success); }

/* tables */
table.data { width: 100%; border-collapse: collapse; }
table.data th, table.data td { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--border-subtle); vertical-align: top; }
table.data thead th { position: sticky; top: 0; background: var(--surface); }
table.data tbody tr:hover { background: var(--surface-2); }
td.num, th.num { text-align: right; }

/* status badges (label text always present, US-UX-003) */
.status { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 0.8rem; font-weight: 600; white-space: nowrap; }
.status-draft { background: var(--status-draft-bg); color: var(--status-draft-fg); }
.status-review { background: var(--status-review-bg); color: var(--status-review-fg); }
.status-approved { background: var(--status-approved-bg); color: var(--status-approved-fg); }
.status-implemented { background: var(--status-implemented-bg); color: var(--status-implemented-fg); }
.status-verified { background: var(--status-verified-bg); color: var(--status-verified-fg); }
.status-deprecated { background: var(--status-deprecated-bg); color: var(--status-deprecated-fg); }
.deprecated-title { text-decoration: line-through; }

/* tree */
.tree, .tree ul { list-style: none; padding-left: 12px; margin: 0; }
.tree > ul { padding-left: 0; }
.tree summary { cursor: pointer; padding: 2px 4px; border-radius: 4px; }
.tree a { display: block; padding: 2px 4px; border-radius: 4px; text-decoration: none; color: var(--text); }
.tree a:hover { background: var(--surface-2); }
.tree a.current { background: var(--surface-2); outline: 1px solid var(--border-strong); }
.tree .id { font-family: ui-monospace, monospace; font-size: 0.85rem; color: var(--text-muted); }

/* item page */
.item-header { border-bottom: 1px solid var(--border-subtle); padding-bottom: 12px; margin-bottom: 16px; }
.item-header h1 { margin: 4px 0; font-size: 1.6rem; }
.fields { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 8px 0; padding: 0; list-style: none; }
.fields li { color: var(--text-muted); }
.fields li b { color: var(--text); font-weight: 600; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border-subtle); margin: 12px 0; }
.tabs a { padding: 6px 12px; text-decoration: none; color: var(--text-muted); border-bottom: 2px solid transparent; }
.tabs a[aria-current="page"] { color: var(--text); border-bottom-color: var(--accent); }
.target-highlight { background: var(--surface-2); outline: 2px solid var(--accent); }

/* rendered markdown */
.md-body h1, .md-body h2, .md-body h3 { line-height: 1.3; }
.md-body h2 { border-bottom: 1px solid var(--border-subtle); padding-bottom: 4px; }
.md-body table { border-collapse: collapse; margin: 12px 0; display: block; overflow-x: auto; }
.md-body th, .md-body td { border: 1px solid var(--border-subtle); padding: 6px 10px; }
.md-body tr:nth-child(even) td { background: var(--surface-2); }
.md-body blockquote { margin: 12px 0; padding: 4px 14px; border-left: 4px solid var(--border-strong); color: var(--text-muted); }
.md-body pre { background: var(--code-bg); padding: 12px; border-radius: 6px; overflow-x: auto; }
.md-body code { background: var(--code-bg); padding: 1px 4px; border-radius: 4px; }
.md-body pre code { padding: 0; background: none; }
.md-body img { max-width: 100%; }
.md-body a.id-link { font-family: ui-monospace, monospace; }
.md-body .id-unknown { text-decoration: underline dotted; cursor: help; }
.md-body a.id-deprecated { text-decoration: line-through; }
.mermaid-error { color: var(--danger); }
.mermaid-diagram svg { max-width: 100%; height: auto; }

/* syntax highlighting (Pygments short classes), ≥ 4.5:1 on --code-bg in both themes */
.highlight .k, .highlight .kd, .highlight .kn, .highlight .kc, .highlight .kp, .highlight .kr, .highlight .ow, .highlight .nt { color: var(--syntax-keyword); }
.highlight .s, .highlight .s1, .highlight .s2, .highlight .sb, .highlight .sc, .highlight .sd, .highlight .se, .highlight .sh, .highlight .si, .highlight .sx, .highlight .sr, .highlight .ss, .highlight .dl { color: var(--syntax-string); }
.highlight .c, .highlight .c1, .highlight .cm, .highlight .cp, .highlight .cs, .highlight .ch, .highlight .cpf { color: var(--syntax-comment); font-style: italic; }
.highlight .m, .highlight .mi, .highlight .mf, .highlight .mh, .highlight .mo, .highlight .mb, .highlight .il { color: var(--syntax-number); }
.highlight .nf, .highlight .nc, .highlight .nn, .highlight .na, .highlight .nb, .highlight .bp, .highlight .nd, .highlight .fm { color: var(--syntax-name); }
.highlight .kt, .highlight .no, .highlight .nl, .highlight .nv { color: var(--syntax-type); }
.highlight .o, .highlight .p { color: var(--syntax-operator); }
.highlight .err, .highlight .gr { color: var(--syntax-error); }
.highlight .gi { color: var(--success); }
.highlight .gd { color: var(--danger); }

/* diffs (US-CR-003, US-UX-004) */
.diff { font-family: ui-monospace, monospace; font-size: 0.9rem; border: 1px solid var(--border-subtle); border-radius: 6px; overflow-x: auto; }
.diff .line { display: grid; grid-template-columns: 4em 4em 1.5em 1fr; white-space: pre-wrap; }
.diff .ln { color: var(--text-muted); text-align: right; padding-right: 6px; user-select: none; }
.diff .add { background: var(--diff-add-bg); box-shadow: inset 3px 0 0 var(--diff-add-mark); }
.diff .del { background: var(--diff-del-bg); box-shadow: inset 3px 0 0 var(--diff-del-mark); }
.diff .add .mark { color: var(--diff-add-mark); font-weight: 700; }
.diff .del .mark { color: var(--diff-del-mark); font-weight: 700; }
.diff ins { background: var(--diff-add-word); text-decoration: none; }
.diff del { background: var(--diff-del-word); text-decoration: none; }
.diff .hunk-head { background: var(--surface-2); color: var(--text-muted); padding: 2px 8px; }
.side-by-side { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.side-by-side .changed { border-left: 4px solid var(--accent); padding-left: 8px; }
.field-diff td.old { color: var(--danger); }
.field-diff td.new { color: var(--success); }

/* blame (US-HIST-003) */
.blame { font-family: ui-monospace, monospace; font-size: 0.88rem; width: 100%; border-collapse: collapse; }
.blame td { padding: 0 8px; vertical-align: top; }
.blame .age { width: 4px; padding: 0; }
.blame .age-1 { background: var(--blame-age-1); } .blame .age-2 { background: var(--blame-age-2); }
.blame .age-3 { background: var(--blame-age-3); } .blame .age-4 { background: var(--blame-age-4); }
.blame .age-5 { background: var(--blame-age-5); }
.blame .meta { color: var(--text-muted); white-space: nowrap; max-width: 380px; overflow: hidden; text-overflow: ellipsis; }
.blame tr.group-start td { border-top: 1px solid var(--border-subtle); }

/* dialogs */
dialog { border: 1px solid var(--border-strong); border-radius: 10px; background: var(--bg); color: var(--text); padding: 0; width: min(640px, 92vw); box-shadow: 0 16px 48px var(--shadow); }
dialog::backdrop { background: var(--overlay); }
dialog .dialog-body { padding: 16px; }
#quick-open ul { list-style: none; margin: 8px 0 0; padding: 0; max-height: 60vh; overflow: auto; }
#quick-open li { padding: 6px 10px; border-radius: 6px; cursor: pointer; }
#quick-open li[aria-selected="true"] { background: var(--surface-2); outline: 1px solid var(--border-strong); }
#quick-open mark { background: none; color: var(--accent); font-weight: 700; }
kbd { border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: 4px; padding: 0 5px; font-size: 0.85rem; }

/* cards, charts, kanban */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.card { border: 1px solid var(--border-subtle); background: var(--surface); border-radius: 8px; padding: 14px; }
.kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr); gap: 12px; overflow-x: auto; }
.kanban .column { background: var(--surface); border: 1px solid var(--border-subtle); border-radius: 8px; padding: 8px; min-height: 120px; }
.kanban .column.drop-target { outline: 2px dashed var(--accent); }
.kanban .column.no-drop { outline: 2px dashed var(--danger); }
.kanban .kcard { background: var(--bg); border: 1px solid var(--border-subtle); border-radius: 6px; padding: 8px; margin: 6px 0; cursor: grab; }
.bar { display: flex; height: 18px; border-radius: 4px; overflow: hidden; background: var(--surface-2); }
.bar span { display: block; height: 100%; }
.chart-1 { background: var(--chart-1); } .chart-2 { background: var(--chart-2); } .chart-3 { background: var(--chart-3); }
.chart-4 { background: var(--chart-4); } .chart-5 { background: var(--chart-5); } .chart-6 { background: var(--chart-6); }
.graph svg text { fill: var(--text); }
.graph svg line, .graph svg path { stroke: var(--border-strong); }
.pill { display: inline-block; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--border-strong); font-size: 0.8rem; }
.suspect { color: var(--warning); font-weight: 600; }
.progress { width: 100%; height: 10px; }

/* editor (US-EDIT-001 …) */
.menu-pad { padding: 8px; }
.editor-page { padding: 12px 16px; }
.editor-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
.editor-toolbar .spacer { flex: 1; }
.editor-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; min-height: 70vh; }
.editor-split.no-preview { grid-template-columns: minmax(0, 1fr); }
.editor-split.with-fields { grid-template-columns: minmax(0, 1fr) minmax(260px, 360px) minmax(0, 1fr); }
.editor-split.with-fields.no-preview { grid-template-columns: minmax(0, 1fr) minmax(260px, 360px); }
.editor-pane { border: 1px solid var(--border-strong); border-radius: 6px; overflow: hidden; }
.editor-pane .cm-editor { height: 100%; min-height: 70vh; background: var(--bg); color: var(--text); }
.editor-pane .cm-gutters { background: var(--surface); color: var(--text-muted); border-right: 1px solid var(--border-subtle); }
.editor-pane .cm-activeLine { background: var(--surface-2); }
.editor-pane .cm-cursor { border-left-color: var(--text); }
.editor-pane .cm-selectionBackground, .editor-pane .cm-content ::selection { background: var(--diff-add-word); }
.cm-tooltip { background: var(--bg); color: var(--text); border: 1px solid var(--border-strong); }
.cm-tooltip-autocomplete ul li[aria-selected] { background: var(--surface-2); color: var(--text); }
.cm-diagnostic-error { border-left-color: var(--danger); }
.cm-diagnostic-warning { border-left-color: var(--warning); }
.cm-lintRange-error { background-image: none; text-decoration: underline wavy var(--danger); }
.cm-lintRange-warning { background-image: none; text-decoration: underline wavy var(--warning); }
.preview-pane { border: 1px solid var(--border-subtle); border-radius: 6px; padding: 12px; overflow: auto; max-height: 80vh; }
.fields-pane { border: 1px solid var(--border-subtle); border-radius: 6px; padding: 12px; overflow: auto; max-height: 80vh; background: var(--surface); }
.fields-pane fieldset { border: 0; padding: 0; margin: 0; }
.fields-pane .link-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 4px; margin: 4px 0; }
.merge-panes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.merge-panes pre { max-height: 40vh; overflow: auto; background: var(--code-bg); padding: 8px; }
.merge-hunks .card { margin: 8px 0; }
.inline { display: inline; }
.inline-comments { margin: 4px 0 4px 8em; }