[hidden] { display: none !important; }
:root {
  --bg: #f5f6f7; --panel: #ffffff; --ink: #1d2327; --muted: #5d6870; --line: #d9dee2;
  --accent: #1f5f8b; --accent-ink: #ffffff; --warn: #9a3412; --ok: #166534;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #14181b; --panel: #1c2226; --ink: #e6eaed; --muted: #9aa5ad; --line: #2e373d; --accent: #5aa3d6; --accent-ink: #0b1115; --warn: #f0a07a; --ok: #7ad19a; }
}
* { box-sizing: border-box; }
body { margin: 0; font: 14px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; background: var(--bg); color: var(--ink); }
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--line); background: var(--panel); flex-wrap: wrap; }
.brand { font-weight: 700; letter-spacing: .02em; }
.brand span { font-weight: 400; color: var(--muted); margin-inline-start: 6px; }
.env { font-size: 12px; color: var(--warn); }
.login { display: grid; place-items: center; padding: 48px 16px; }
.login form { width: 100%; max-width: 360px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 24px; display: grid; gap: 12px; }
.login h1 { margin: 0; font-size: 20px; }
label { display: grid; gap: 4px; font-size: 13px; color: var(--muted); }
input { font: inherit; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--ink); }
button { font: inherit; padding: 8px 14px; border: 0; border-radius: 6px; background: var(--accent); color: var(--accent-ink); cursor: pointer; }
button:disabled { opacity: .6; cursor: progress; }
.shell { display: grid; grid-template-columns: 220px 1fr; min-height: calc(100vh - 45px); }
nav { border-inline-end: 1px solid var(--line); background: var(--panel); padding: 12px 8px; display: grid; align-content: start; gap: 2px; }
nav a { display: block; padding: 8px 10px; border-radius: 6px; color: var(--ink); text-decoration: none; }
nav a.active { background: var(--accent); color: var(--accent-ink); }
nav a.locked { color: var(--muted); text-decoration: line-through; }
.content { min-width: 0; }
.context-bar { display: flex; justify-content: space-between; align-items: center; padding: 8px 16px; border-bottom: 1px solid var(--line); background: var(--panel); }
#workspace { padding: 16px; display: grid; gap: 16px; }
#workspace h1 { margin: 0; font-size: 20px; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; }
.panel h2 { margin: 0 0 8px; font-size: 15px; }
.note { color: var(--muted); font-size: 12px; margin: 0 0 8px; }
.empty, .loading { color: var(--muted); }
.error { color: var(--warn); }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 0; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }
.counts { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px; }
.counts li { display: flex; justify-content: space-between; border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px; }
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 13px; }
th, td { text-align: start; padding: 6px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
th { color: var(--muted); font-weight: 600; }
#selfcheck-summary { font-weight: 700; margin: 10px 0 6px; }
@media (max-width: 720px) {
  .shell { grid-template-columns: 1fr; }
  nav { border-inline-end: 0; border-bottom: 1px solid var(--line); grid-auto-flow: column; overflow-x: auto; }
  th, td { white-space: normal; }
}
/* SB-W2 governed writes */
.banner { margin: 0; padding: 6px 10px; border: 1px dashed var(--warn); border-radius: 6px; color: var(--warn); font-size: 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.chip { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: .02em; border: 1px solid currentColor; white-space: nowrap; }
.chip-ok { color: var(--ok); } .chip-bad { color: var(--warn); } .chip-warn { color: #b45309; } .chip-pending { color: var(--muted); }
.chip-unknown { color: #6b21a8; } .chip-cond { color: #0e7490; } .chip-rel { color: var(--accent); }
@media (prefers-color-scheme: dark) { .chip-warn { color: #f5b35c; } .chip-unknown { color: #c59cf0; } .chip-cond { color: #5fd0e0; } }
.state-text { color: var(--muted); font-size: 11px; margin-inline-start: 4px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin-bottom: 10px; }
.form-row { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; margin: 8px 0; }
.form-row label { flex: 1 1 200px; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
select, textarea { font: inherit; padding: 7px 9px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--ink); max-width: 100%; }
textarea { width: 100%; resize: vertical; }
button.secondary { background: transparent; color: var(--accent); border: 1px solid var(--accent); }
button.link { background: transparent; color: var(--accent); padding: 2px 6px; text-decoration: underline; }
.panel h3 { margin: 14px 0 6px; font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.mono { font-family: ui-monospace, Consolas, monospace; font-size: 12px; word-break: break-all; }
pre.content { background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 8px; overflow-x: auto; font-size: 12px; max-height: 240px; }
ul.log { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; font-size: 12px; }
ul.log li { word-break: break-word; }
ol.journey { margin: 0; padding-inline-start: 18px; display: grid; gap: 4px; }
/* SB-W3 C01: pairing, confirmations, inline results, sign-out */
fieldset.pairing { border: 1px solid var(--line); border-radius: 6px; padding: 8px 12px; margin: 8px 0; }
fieldset.pairing legend { color: var(--muted); font-size: 12px; padding: 0 4px; }
label.radio { display: flex; align-items: center; gap: 8px; color: var(--ink); font-size: 13px; margin: 4px 0; }
label.radio input { width: auto; }
.confirm { border: 2px solid var(--accent); border-radius: 8px; padding: 10px 14px; margin: 8px 0; background: var(--panel); }
.confirm h4 { margin: 0 0 6px; }
.result { border-radius: 6px; padding: 6px 10px; margin: 6px 0; font-size: 13px; word-break: break-word; border: 1px solid var(--line); }
.result.ok { border-color: var(--ok); } .result.bad { border-color: var(--warn); }
.signout { display: flex; gap: 8px; flex-wrap: wrap; }
#logout-all-confirm { margin: 8px 16px; }

/* ENG-01 engineering journey: long evidence text wraps inside its panel */
#workspace > section.panel { min-width: 0; }
.ej-wrap td { white-space: normal; vertical-align: top; }
.ej-wrap td:last-child { min-width: 280px; }
.ej-wrap .mono { word-break: normal; white-space: nowrap; }
/* APP-01: decision-gate blocks at the point of use and the consolidated decision list */
.gate-block { margin: 8px 0; padding: 8px 10px; border: 1px solid var(--warn); border-inline-start: 4px solid var(--warn); border-radius: 6px; background: color-mix(in srgb, var(--warn) 6%, transparent); }
.gate-block .chip { margin-inline-end: 6px; }
ol.decisions { margin: 4px 0 12px 18px; padding: 0; } ol.decisions li { margin: 3px 0; }

/* APP-02 (E1): CSP-compliant replacements of former inline style attributes (style-src 'self' — no inline styles anywhere) */
.doc-svg-img { max-width: 100%; background: #fff; }
.doc-frame { width: 100%; height: 520px; border: 1px solid #d0d5dd; background: #fff; }
.doc-sheet-frame { width: 100%; height: 680px; border: 1px solid #bbb; }
.doc-preview-dialog { max-width: min(94vw, 1100px); max-height: 90vh; overflow: auto; border: 1px solid #777; border-radius: 8px; padding: 16px; }
.doc-preview-media { display: block; max-width: 100%; max-height: 68vh; object-fit: contain; margin: 0 auto; }
.doc-preview-frame { display: block; width: min(88vw, 1000px); height: 68vh; border: 1px solid #bbb; margin: 0 auto; }
.doc-compare-dialog { width: min(96vw, 1500px); max-width: 96vw; max-height: 94vh; overflow: auto; border: 1px solid #777; border-radius: 8px; padding: 16px; }
.doc-compare-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr)); gap: 12px; align-items: start; }
.doc-compare-frame { width: 100%; height: min(68vh, 850px); border: 1px solid #bbb; }
.doc-compare-image { display: block; width: 100%; height: min(68vh, 850px); object-fit: contain; border: 1px solid #bbb; background: #fff; }
.ej-svg { max-width: 100%; height: auto; color: var(--ink); }
.overflow-box { overflow: auto; max-width: 100%; }
.pre-wrap { white-space: pre-wrap; overflow-wrap: anywhere; }
.wrap-anywhere { overflow-wrap: anywhere; }
.full-width { width: 100%; }
/* APP-10 document hashes and long custody identifiers must not widen a mobile page. */
#doc-project-sheet-source-coverage, #doc-project-sheet-run-source-coverage, #doc-project-sheets-sha { overflow-wrap: anywhere; }
/* APP-02 workspaces */
.scope-test { display: inline-block; margin: 4px 0; padding: 4px 8px; border: 2px dashed #b54708; background: #fffaeb; color: #93370d; font-weight: 600; }
.presence-box { border: 1px solid #d0d5dd; padding: 8px 10px; margin: 8px 0; background: #f9fafb; }
.mono-block { font-family: ui-monospace, Menlo, Consolas, monospace; white-space: pre-wrap; word-break: break-word; font-size: 12px; }
textarea.json { width: 100%; min-height: 110px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; }
.impact-list li { margin: 4px 0; }
/* APP-02 C01 banner law: a STAGING build is visibly marked in the top bar */
.env.env-staging { color: #fff; background: #b54708; padding: 2px 8px; border-radius: 4px; font-weight: 700; }

/* APP-03: language selector, operating context, coverage badge; right-to-left layout uses logical properties throughout */
.context-bar .lang { display: inline-flex; gap: 8px; align-items: center; margin-inline-start: 12px; }
.context-bar .lang select { width: auto; }
[dir="rtl"] .mono, [dir="rtl"] code { direction: ltr; unicode-bidi: isolate; }
/* APP-03: print path of a stored quotation document (the document's own classes; the app chrome is hidden while printing) */
#print-area { display: none; }
body.printing-doc > *:not(#print-area) { display: none !important; }
body.printing-doc #print-area { display: block; padding: 24px; background: #fff; color: #101828; }
body.printing-doc #print-area table { border-collapse: collapse; width: 100%; }
body.printing-doc #print-area td, body.printing-doc #print-area th { border: 1px solid #d0d5dd; padding: 4px 8px; text-align: start; white-space: normal; }
body.printing-doc #print-area .n { text-align: end; unicode-bidi: plaintext; white-space: nowrap; }
body.printing-doc #print-area .banner { color: #b42318; font-weight: bold; border: 2px solid #b42318; padding: 6px; margin: 8px 0; }
body.printing-doc #print-area .wm { color: #b42318; font-size: 24px; font-weight: bold; }
body.printing-doc #print-area .en { direction: ltr; unicode-bidi: isolate; display: block; font-weight: normal; }
body.printing-doc #print-area .foot { font-size: 11px; color: #475467; }
@media print {
  #print-area .print-close { display: none; }
  body.printing-doc #print-area { display: block; font-family: "Noto Sans", "Noto Sans Arabic", Arial, sans-serif; color: #101828; }
  #print-area table { border-collapse: collapse; width: 100%; }
  #print-area td, #print-area th { border: 1px solid #d0d5dd; padding: 4px 8px; text-align: start; white-space: normal; }
  #print-area .n { text-align: end; unicode-bidi: plaintext; white-space: nowrap; }
  #print-area .banner { color: #b42318; font-weight: bold; border: 2px solid #b42318; padding: 6px; margin: 8px 0; break-inside: avoid; }
  #print-area .wm { color: #b42318; font-size: 24px; font-weight: bold; }
  #print-area .en { direction: ltr; unicode-bidi: isolate; display: block; font-weight: normal; }
  #print-area .foot { font-size: 10px; color: #475467; }
}
/* APP-03 accessibility + small screens (tools/ci/a11y_smoke.py): grid / flex children may shrink below their content, long option texts
   and chips wrap instead of widening the page, touch targets are at least 24 px (WCAG 2.2 2.5.8), scrollable regions are focusable (markup) */
#workspace > *, .panel, label, .form-row label, .kv dd { min-width: 0; }
.context-bar { flex-wrap: wrap; gap: 8px; }
select { width: 100%; text-overflow: ellipsis; }
.chip { max-width: 100%; overflow-wrap: anywhere; }
button.link { min-height: 24px; min-width: 24px; }
.table-wrap:focus-visible, pre.content:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 720px) {
  .chip, .banner { white-space: normal; }
  #workspace { padding: 10px; }
  .panel { padding: 10px; }
  .kv { grid-template-columns: 1fr; }
  .kv dt { margin-top: 6px; }
  button, select, input:not([type=checkbox]):not([type=radio]) { min-height: 36px; }
  button.link { min-height: 32px; padding: 4px 8px; }
  .form-row label { flex: 1 1 100%; }
}

.workspace-navigation { display:flex; gap:0.5rem; flex-wrap:wrap; align-items:center; }
.workspace-navigation button { min-height:2.5rem; }

/* Keep the editable opening grid scrollable without shrinking its controls. */
#opening-grid input { min-width: 9rem; }
#opening-grid select { min-width: 8rem; }
@media (max-width: 600px) {
  #opening-grid input, #opening-grid select, #og-add, #og-save { min-height: 44px; }
}

/* Exact document-set hash and review-readiness hold codes wrap instead of widening the page on narrow screens. */
#doc-set-sha { overflow-wrap: anywhere; word-break: break-all; }
#doc-project-glass-sha { overflow-wrap: anywhere; word-break: break-all; }
#doc-review-readiness { overflow-wrap: anywhere; }