/* Deliberately plain.
 *
 * All visual character — density, theming, typography, brand — is founder item
 * §11.1 and is NOT decided here. What this file may do is hold the a11y floor
 * (§11 item 10), which is safety-derived rather than taste:
 *
 *   - every grade and flag is a WORD in the markup; colour only ever repeats it.
 *     A colour-only "disputed" marker is a silent drop for a colour-blind
 *     reader, i.e. a §9 violation with a stylesheet in front of it.
 *   - the announcements bar has no dismiss control anywhere, in markup or CSS.
 *   - nothing is hidden by opacity or `display:none` that the reader is owed.
 */

:root {
  --ink: #16181d;
  --dim: #5b6270;
  --line: #d5d9e0;
  --paper: #ffffff;
  --wash: #f5f6f8;
  --alarm: #7a1420;
  --alarm-wash: #fdeef0;
  --caution: #6a4a00;
  --caution-wash: #fdf5e2;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 15px/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--wash);
}

code, pre { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; font-size: 0.92em; }

#app { max-width: 68rem; margin: 0 auto; padding: 1rem; }

/* nav ---------------------------------------------------------------------- */
.nav { display: flex; gap: .5rem; align-items: center; padding: .5rem 0; border-bottom: 1px solid var(--line); }
.nav__brand { font-weight: 700; letter-spacing: .02em; }
.nav__layer { color: var(--dim); font-weight: 400; }
.nav__tab { font: inherit; padding: .3rem .7rem; border: 1px solid var(--line); background: var(--paper); border-radius: .25rem; cursor: pointer; }
.nav__tab[aria-current="page"] { border-color: var(--ink); font-weight: 600; }
.nav__flag { margin-left: auto; font-size: .75rem; letter-spacing: .08em; color: var(--alarm); border: 1px solid var(--alarm); padding: .1rem .4rem; border-radius: .2rem; }

.unmet { background: var(--caution-wash); border: 1px solid var(--caution); color: var(--caution); padding: .5rem .75rem; border-radius: .25rem; margin: .75rem 0; }

/* chrome ------------------------------------------------------------------- */
.chrome { background: var(--paper); border: 1px solid var(--line); border-radius: .25rem; padding: .75rem 1rem; margin: 1rem 0; }
.announce { border-left: 4px solid var(--caution); background: var(--caution-wash); padding: .5rem .75rem; border-radius: .2rem; }
.announce--none { border-left-color: var(--line); background: var(--wash); color: var(--dim); }
.announce__head { margin: 0 0 .25rem; font-weight: 700; letter-spacing: .04em; }
.announce__list { margin: 0; padding-left: 1.1rem; }
.announce__item { margin: .15rem 0; }

.banner { padding: .5rem .75rem; border-radius: .2rem; margin: .5rem 0; border: 1px solid var(--alarm); background: var(--alarm-wash); color: var(--alarm); }
.banner--commons, .banner--denied { border-color: var(--caution); background: var(--caution-wash); color: var(--caution); }
.banner dl { display: grid; grid-template-columns: max-content 1fr; gap: .1rem .75rem; margin: .35rem 0 0; }
.banner dt { font-weight: 600; }
.banner dd { margin: 0; }
.banner__note { margin: .35rem 0 0; font-style: italic; }

.chrome__facts { margin-top: .6rem; padding-top: .6rem; border-top: 1px dashed var(--line); }
.clearance { margin: .2rem 0; }
.posture { display: flex; flex-wrap: wrap; gap: .15rem .5rem; margin: .2rem 0; color: var(--dim); }
.posture dt { font-weight: 600; }
.posture dt::after { content: ":"; }
.posture dd { margin: 0 .6rem 0 0; }
.identity { margin: .2rem 0; color: var(--dim); }
.identity[data-identity-source="configuration"] em { color: var(--caution); font-style: normal; font-weight: 600; }
.chrome__meta { margin: .2rem 0 0; color: var(--dim); font-size: .85rem; }

/* controls ----------------------------------------------------------------- */
.controls { display: flex; flex-wrap: wrap; gap: 1rem; background: var(--paper); border: 1px solid var(--line); border-radius: .25rem; padding: .75rem 1rem; }
.controls fieldset, .dig, .asof, .page-control { border: 1px solid var(--line); border-radius: .2rem; padding: .5rem .75rem; margin: 0; }
.controls legend, .dig legend, .asof legend, .page-control legend { font-weight: 600; font-size: .85rem; padding: 0 .3rem; }
/* A control that is absent because the SCHEMA has no such argument still shows,
 * greyed, with the reason. "This read cannot dig" and "this portal forgot the
 * control" must not look the same. */
.dig--unavailable, .asof--unavailable, .page-control--unavailable { background: var(--wash); border-style: dashed; max-width: 24rem; }
.asof__armed { color: var(--alarm); font-size: .85rem; margin: .35rem 0 0; }
.controls label { display: block; margin: .2rem 0; }
.controls input[type="text"], .controls select { font: inherit; padding: .2rem .35rem; }
.controls input[type="number"] { width: 6rem; font: inherit; padding: .2rem .35rem; }
.controls .is-off { display: none; }
.controls__go { display: flex; gap: .5rem; align-items: flex-start; }
.controls__go button { font: inherit; padding: .35rem .8rem; cursor: pointer; }
.hint, .config-note { color: var(--dim); font-size: .85rem; margin: .3rem 0 0; }

.dig__warn { background: var(--caution-wash); border-left: 3px solid var(--caution); color: var(--caution); padding: .35rem .5rem; margin: .35rem 0 0; font-size: .85rem; }
.dig__armed { color: var(--alarm); font-size: .85rem; margin: .35rem 0 0; }

/* result ------------------------------------------------------------------- */
.result { background: var(--paper); border: 1px solid var(--line); border-radius: .25rem; padding: .75rem 1rem; margin: 1rem 0; }
.result__headline { font-size: 1rem; margin: 0 0 .5rem; }
.notes ul { margin: 0 0 .75rem; padding-left: 1.1rem; color: var(--caution); }
.empty { color: var(--dim); font-style: italic; }

/* Sectioned results (truth_about, pack). The name is a <p> inside a labelled
 * <section>, not a heading, so it never sits between the result's <h2> and each
 * row's <h3>. Consecutive grouping only — the order is always the store's. */
.rows-group { margin: .75rem 0 0; }
.rows-group__name { margin: 0; padding: .3rem .6rem; background: var(--wash); border-left: 3px solid var(--dim); font-weight: 600; font-size: .85rem; letter-spacing: .02em; }

.row { border-top: 1px solid var(--line); padding: .75rem 0; position: relative; }
.row__n { position: absolute; right: 0; top: .75rem; color: var(--dim); font-size: .8rem; }
.row__id { margin: 0; font-size: .95rem; }
.row__label { margin: .1rem 0; color: var(--dim); font-size: .88rem; }
.row__tags { margin: .15rem 0; }

/* Navigation between the reading surfaces. Buttons, so every one is keyboard
 * reachable without a single line of focus management. */
.row__nav { display: flex; flex-wrap: wrap; gap: .35rem; margin: .4rem 0 0; }
.row__go { font: inherit; font-size: .8rem; padding: .15rem .5rem; border: 1px solid var(--line); background: var(--paper); border-radius: .2rem; cursor: pointer; color: var(--dim); }
.row__go:hover, .row__go:focus-visible { border-color: var(--ink); color: var(--ink); }
.tag { display: inline-block; border: 1px solid var(--line); border-radius: .2rem; padding: 0 .3rem; margin-right: .25rem; font-size: .78rem; color: var(--dim); }
.row__text { margin: .4rem 0; }
.row__extra { display: grid; grid-template-columns: max-content 1fr; gap: 0 .75rem; margin: .4rem 0 0; font-size: .85rem; color: var(--dim); }
.row__extra dt { font-weight: 600; }
.row__extra dd { margin: 0; }
.nil { color: var(--line); }

/* The verdict is words. Colour is allowed to agree with the words and to do
 * nothing else — no grade is distinguishable by hue alone. */
.verdict { display: grid; grid-template-columns: max-content 1fr; gap: 0 .75rem; margin: .35rem 0; font-size: .88rem; border-left: 3px solid var(--line); padding-left: .6rem; }
.verdict--absent { border-left-color: var(--caution); }
.verdict__k { color: var(--dim); font-weight: 600; }
.verdict__k::after { content: ":"; }
.verdict__v { margin: 0; }
.verdict__grade { font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
/* Every wrapper the store served, in its order. A count of the ones not shown
 * would be a silent drop with a number in front of it. */
.verdict__wrapper { line-height: 1.4; }
.wrapper__grade { text-transform: uppercase; letter-spacing: .03em; }
.wrapper__clause, .wrapper__cite, .wrapper__sev { color: var(--dim); }
.flag { border: 1px solid currentColor; border-radius: .2rem; padding: 0 .25rem; margin-right: .25rem; font-size: .78rem; font-weight: 600; }
.flag[data-flag="WITHHELD"], .flag[data-flag="never-drop"] { color: var(--alarm); }

/* The fence: visually unmistakable, and escaped in the markup — the escaping is
 * what actually holds, the border only says so. */
.fence { margin: .5rem 0; border: 2px dashed var(--caution); border-radius: .2rem; background: var(--caution-wash); padding: .4rem .6rem; }
.fence__label { font-size: .8rem; color: var(--caution); margin-bottom: .25rem; }
.fence__badge { font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.fence__bar { margin: 0; color: var(--caution); opacity: .7; }
.fence__body { margin: 0; white-space: pre-wrap; word-break: break-word; }

.page__where { margin: .5rem 0 0; color: var(--dim); font-size: .85rem; }
.page__caveat { margin: .1rem 0 0; color: var(--caution); font-size: .85rem; }

/* entitlement review (screen 2) --------------------------------------------
 *
 * The one visual rule here that is safety and not taste: a CAP must not read as
 * a grant. The distinction is carried by the WORDS ("CEILING — this row is a
 * CAP" against "GRANT — this row confers"), by a different `aria-label` on the
 * panel's own landmark, and by a different border TREATMENT — solid for a
 * grant, doubled for a ceiling. Hue agrees with all three and replaces none of
 * them, so the distinction survives monochrome, a print-out and a screen
 * reader. */
.acl-notes { border-left: 3px solid var(--caution); background: var(--caution-wash); color: var(--caution); padding: .4rem .75rem; margin: 0 0 .75rem; font-size: .88rem; }
.acl-notes p { margin: .3rem 0; }

.filter-caveat { border: 1px solid var(--alarm); background: var(--alarm-wash); color: var(--alarm); padding: .5rem .75rem; border-radius: .2rem; margin: .75rem 0 0; flex-basis: 100%; }

.grant { margin: .5rem 0 0; padding: .4rem .6rem; border-left: 3px solid var(--line); background: var(--wash); border-radius: .2rem; font-size: .88rem; }
.grant p { margin: .2rem 0; }
.grant[data-grant-shape="cap"] { border-left: 6px double var(--caution); background: var(--caution-wash); }
.grant__shape strong { letter-spacing: .03em; }
.grant__state-word { letter-spacing: .04em; }
.grant__revoked, .grant__countersign[data-countersigned="false"] strong { color: var(--alarm); }
.row[data-grant-shape="cap"] { border-top-width: 3px; }

.rollup { margin: 1rem 0 0; border-top: 1px solid var(--line); padding-top: .75rem; }
.rollup__head { margin: 0 0 .4rem; font-size: .95rem; }
.rollup__scroll { overflow-x: auto; }
.rollup__table { border-collapse: collapse; font-size: .85rem; width: 100%; }
.rollup__table caption { text-align: left; color: var(--dim); padding-bottom: .3rem; }
.rollup__table th, .rollup__table td { border: 1px solid var(--line); padding: .25rem .45rem; text-align: left; vertical-align: top; }
.rollup__table thead th { background: var(--wash); }
.rollup__absent, .rollup__scope { color: var(--caution); font-size: .85rem; margin: .5rem 0 0; }

/* refusals ----------------------------------------------------------------- */
.refusal { border: 2px solid var(--alarm); background: var(--alarm-wash); border-radius: .25rem; padding: .75rem 1rem; }
.refusal__head { margin: 0 0 .35rem; font-size: 1rem; color: var(--alarm); }
.refusal__code { font-weight: 700; }
.refusal__message { margin: .2rem 0; }
.refusal__facts { display: grid; grid-template-columns: max-content 1fr; gap: 0 .75rem; margin: .4rem 0 0; font-size: .88rem; }
.refusal__facts dt { font-weight: 600; color: var(--dim); }
.refusal__facts dd { margin: 0; }

/* ==========================================================================
 * 04B/04C — Access and Administration screens (screens/admin*.mjs,
 * lib/render/admin-*.mjs). Appended block; nothing above is changed.
 * Same a11y floor: every state is a WORD in the markup; colour only agrees.
 * ========================================================================== */
.adm { background: var(--paper); border: 1px solid var(--line); border-radius: .25rem; padding: .75rem 1rem; margin: 1rem 0; }
.adm-h1 { font-size: 1.15rem; margin: 0 0 .25rem; }
.adm-h2 { font-size: 1.05rem; margin: 1rem 0 .35rem; }
.adm-h3 { font-size: .95rem; margin: .75rem 0 .3rem; }
.adm-intro, .adm-sub { color: var(--dim); font-size: .88rem; margin: .2rem 0 .5rem; }
.adm-tabs { display: flex; flex-wrap: wrap; gap: .35rem; border-bottom: 1px solid var(--line); padding: .4rem 0; margin: .5rem 0; }
.adm-tab, .adm-go, .adm-back { font: inherit; font-size: .85rem; padding: .2rem .6rem; border: 1px solid var(--line); background: var(--paper); border-radius: .2rem; cursor: pointer; }
.adm-tab[aria-current="page"] { border-color: var(--ink); font-weight: 600; }
.adm-back { margin: .25rem 0; }
.adm-missing { color: var(--caution); font-style: italic; }
.adm-none, .adm-empty { color: var(--dim); font-style: italic; }
.adm-json { font-size: .8rem; word-break: break-word; }
.adm-dl { display: grid; grid-template-columns: max-content 1fr; gap: .1rem .75rem; margin: .3rem 0; font-size: .88rem; }
.adm-dl dt { font-weight: 600; color: var(--dim); }
.adm-dl dd { margin: 0; min-width: 0; word-break: break-word; }
.adm-scroll { overflow-x: auto; }
.adm-table { border-collapse: collapse; font-size: .85rem; width: 100%; margin: .3rem 0; }
.adm-table caption { text-align: left; color: var(--dim); }
.adm-table th, .adm-table td { border: 1px solid var(--line); padding: .25rem .45rem; text-align: left; vertical-align: top; }
.adm-table thead th { background: var(--wash); }
.adm-card { border-top: 1px solid var(--line); padding: .5rem 0; }
.adm-state { font-size: .75rem; letter-spacing: .05em; border: 1px solid currentColor; border-radius: .2rem; padding: 0 .3rem; color: var(--dim); }
.adm-state[data-state="suspended"], .adm-state[data-state="revoked"], .adm-state[data-state="refused"], .adm-state[data-state="failed"], .adm-state[data-state="dead"], .adm-state[data-state="deprovisioned"] { color: var(--alarm); }
.adm-owed { color: var(--alarm); }
.adm-acts { display: flex; flex-wrap: wrap; gap: .5rem; margin: .4rem 0 0; }
.adm-acts--stack { flex-direction: column; }
.adm-field { display: inline-flex; flex-direction: column; margin: .2rem .5rem .2rem 0; font-size: .85rem; }
.adm-field__label { color: var(--dim); font-weight: 600; }
.adm-field input[type="text"], .adm-field input[type="number"], .adm-field input[type="datetime-local"], .adm-field select, .adm-field textarea { font: inherit; padding: .2rem .35rem; min-width: 12rem; }
.adm-hint { color: var(--dim); font-size: .8rem; }
.query { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem; margin: .3rem 0; }
.query button, .act__go { font: inherit; padding: .25rem .7rem; cursor: pointer; }
.adm-export { font-size: .85rem; }
.act { border: 1px solid var(--line); border-radius: .2rem; padding: .4rem .6rem; margin: .3rem 0; background: var(--wash); }
.act--inline { display: inline-block; vertical-align: top; }
.act--tiny { padding: .1rem .3rem; }
.act--danger { border-color: var(--alarm); }
.act--danger .act__go { color: var(--alarm); }
.act__note { margin: 0 0 .3rem; font-size: .85rem; color: var(--caution); }
.outcome { margin: .4rem 0; padding: .35rem .6rem; border-radius: .2rem; border-left: 4px solid var(--line); background: var(--paper); font-size: .88rem; }
.outcome__head { margin: 0; }
.outcome__note { margin: .2rem 0 0; color: var(--dim); }
.outcome--applied { border-left-color: var(--ink); }
.outcome--replayed { border-left-style: double; border-left-width: 6px; border-left-color: var(--caution); }
.outcome--refused { border-left-color: var(--alarm); padding: 0; border: 0; }
.outcome__two-person { color: var(--caution); font-weight: 600; }
.adm-degraded { border: 3px solid var(--alarm); background: var(--alarm-wash); color: var(--alarm); padding: .6rem .9rem; border-radius: .25rem; margin: .5rem 0; position: sticky; top: 0; z-index: 2; }
.adm-degraded__head { margin: 0; font-size: 1rem; letter-spacing: .03em; }
.adm-degraded ul { margin: .3rem 0; padding-left: 1.1rem; }
.adm-degraded__note { margin: .2rem 0 0; font-size: .85rem; }
.adm-token { border: 3px double var(--alarm); background: var(--alarm-wash); padding: .5rem .75rem; border-radius: .25rem; margin: .4rem 0; }
.adm-token__warn { color: var(--alarm); margin: 0 0 .3rem; }
.adm-token__value { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; min-width: 28rem; max-width: 100%; }
.adm-token--absent { border-style: dashed; border-color: var(--caution); background: var(--caution-wash); }
.adm-preview { border: 1px dashed var(--caution); background: var(--caution-wash); padding: .4rem .6rem; margin: .4rem 0; }
.adm-preview__head { margin: 0; }
.adm-request__rule { font-size: .85rem; color: var(--caution); margin: .2rem 0; }
.adm-conflict strong { color: var(--alarm); }
.adm-explain { border-left: 3px solid var(--line); padding-left: .6rem; margin: .5rem 0; }
.health-grid { display: grid; gap: .4rem; }
.health { margin: 0; padding: .4rem .6rem; border-radius: .2rem; }
.health--empty { border: 1px solid var(--line); background: var(--wash); }
.health--pending { border: 1px solid var(--ink); }
.health--unknown, .health--no-telemetry { border: 2px dashed var(--caution); background: var(--caution-wash); color: var(--caution); }
.health--outage { border: 3px solid var(--alarm); background: var(--alarm-wash); color: var(--alarm); }
.health--outage ul { margin: .2rem 0 0; }
.health--no-outage, .health--telemetry { border: 1px solid var(--line); color: var(--dim); }
.diff__head { margin: .2rem 0; font-size: .88rem; }
.diff__table { border-collapse: collapse; width: 100%; font-size: .85rem; }
.diff__table td { padding: 0 .4rem; vertical-align: top; }
.diff__no { color: var(--dim); text-align: right; width: 3rem; }
.diff__sign { width: 1.2rem; font-family: ui-monospace, Menlo, monospace; font-weight: 700; }
.diff__text code { white-space: pre-wrap; word-break: break-word; }
.diff__line--add { background: #e9f6ec; }
.diff__line--del { background: var(--alarm-wash); text-decoration: line-through; text-decoration-color: var(--alarm); }
.diff__hunk-head td { color: var(--dim); background: var(--wash); }
/* deployment configuration (admin-config.mjs): integrations, answer route, provider IO */
.adm-fake { border: 1px solid var(--caution); color: var(--caution); padding: 0 .25rem; border-radius: .15rem; font-size: .8rem; letter-spacing: .04em; }
.adm-route-source--unmanaged, .adm-route-ignored { border: 2px dashed var(--caution); background: var(--caution-wash); color: var(--caution); padding: .4rem .6rem; border-radius: .2rem; }
.adm-checks { border: 0; padding: 0; margin: 0; }
.adm-check { margin-right: .75rem; }
.adm-sealed { border: 3px double var(--alarm); background: var(--alarm-wash); padding: .5rem .75rem; border-radius: .25rem; margin: .4rem 0; }
.adm-sealed__head { color: var(--alarm); margin: 0 0 .3rem; }
.adm-sealed__text { white-space: pre-wrap; word-break: break-word; background: var(--paper); border: 1px solid var(--line); padding: .4rem .6rem; max-height: 28rem; overflow: auto; font-size: .82rem; }
/* ===== end 04B/04C block ===== */

/* ==========================================================================
 * Package 06 — question-first human screens (screens/{ask,source,lineage,
 * concepts,mine}.mjs, lib/render/{answer,citation,source,lineage,concept,
 * social}.mjs). Appended block; nothing above is changed.
 * Same a11y floor: every check, state and highlight is a WORD in the markup;
 * colour, borders and underlines only agree with it.
 * ========================================================================== */
.skip { position: absolute; left: -999px; top: 0; background: var(--paper); color: var(--ink); padding: .5rem .75rem; border: 2px solid var(--ink); z-index: 10; }
.skip:focus { left: .5rem; top: .5rem; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:focus-visible { outline: 3px solid #1a56db; outline-offset: 2px; }
#main:focus, .hq-h1:focus { outline: none; }
[data-highlight="true"]:focus { outline: 3px solid #1a56db; outline-offset: 2px; }
.nav { flex-wrap: wrap; }
.nav__group { display: flex; flex-wrap: wrap; gap: .35rem; }
.nav__group--secondary { padding-left: .5rem; border-left: 1px solid var(--line); }
.nav__group--secondary .nav__tab { font-size: .85rem; color: var(--dim); }
a.nav__tab { color: var(--ink); text-decoration: none; display: inline-block; }
.nav__who { color: var(--dim); font-size: .85rem; margin-left: auto; }
.nav__who + .nav__flag { margin-left: .5rem; }
.screen { min-width: 0; }
.screen--human { background: var(--paper); border: 1px solid var(--line); border-radius: .25rem; padding: .75rem 1rem; margin: 1rem 0; }

.hq-h1 { font-size: 1.3rem; margin: 0 0 .5rem; overflow-wrap: anywhere; }
.hq-h2 { font-size: 1.05rem; margin: 1rem 0 .4rem; }
.hq-h3 { font-size: .95rem; margin: .75rem 0 .3rem; }
.hq-hint, .hq-meta { color: var(--dim); font-size: .85rem; }
.hq-hint { margin: .25rem 0; }
.hq-empty { color: var(--dim); font-style: italic; }
.hq-nil { color: var(--dim); }
.hq-error { color: var(--alarm); font-weight: 600; }
.hq-ok { font-weight: 600; }
.hq-list { margin: .25rem 0; padding-left: 1.1rem; }
.hq-list li { margin: .3rem 0; overflow-wrap: anywhere; }
.hq-chips { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem .75rem; }
.hq-tag { display: inline-block; border: 1px solid var(--dim); border-radius: .2rem; padding: 0 .3rem; font-size: .78rem; color: var(--dim); }
.hq-tag--inference { border-style: dashed; color: var(--caution); border-color: var(--caution); }
.hq-tag--qualified { color: var(--caution); border-color: var(--caution); }
.hq-dl { display: grid; grid-template-columns: max-content 1fr; gap: .15rem .75rem; margin: .3rem 0; font-size: .9rem; }
.hq-dl dt { font-weight: 600; color: var(--dim); }
.hq-dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.hq-section { margin: 1rem 0 0; }
.hq-notice, .hq-historical, .hq-newer, .hq-not-prompt, .hq-not-authority { border-left: 4px solid var(--caution); background: var(--caution-wash); color: var(--ink); padding: .4rem .75rem; margin: .5rem 0; border-radius: .2rem; }
.hq-notices ul { margin: .3rem 0; padding-left: 1.1rem; color: var(--caution); }
.hq-fake { color: var(--alarm); font-weight: 700; letter-spacing: .03em; }
.hq-unavailable { border: 2px solid var(--caution); padding: .5rem .75rem; border-radius: .2rem; }

/* buttons */
.hq-btn, .hq-go { font: inherit; font-size: .9rem; padding: .35rem .75rem; border: 1px solid var(--ink); background: var(--paper); color: var(--ink); border-radius: .25rem; cursor: pointer; text-decoration: none; display: inline-block; min-height: 2.25rem; }
.hq-btn--primary { background: var(--ink); color: var(--paper); }
.hq-btn[disabled] { opacity: .55; cursor: not-allowed; }
.hq-btn[aria-pressed="true"] { font-weight: 700; box-shadow: inset 0 -3px 0 var(--ink); }
.hq-link-btn { font: inherit; font-size: .82rem; background: none; border: 0; padding: 0 .15rem; color: #1a4fb0; text-decoration: underline; cursor: pointer; }
.hq-actions { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0; align-items: center; }
.hq-act-outcome:empty { display: none; }

/* ask form + home */
.hq-ask { display: grid; gap: .35rem; margin: .5rem 0 1rem; }
.hq-ask textarea, .hq-dialog textarea, .hq-dialog input[type="text"], .hq-ask select, .hq-ask input, .hq-dialog select { font: inherit; padding: .4rem .5rem; border: 1px solid var(--dim); border-radius: .2rem; width: 100%; max-width: 100%; }
.hq-ask__row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end; }
.hq-field { display: grid; gap: .15rem; min-width: 0; }
.hq-field--check { display: flex; gap: .4rem; align-items: flex-start; }
.hq-field--check input { width: auto; margin-top: .3rem; }
.hq-label { font-weight: 600; font-size: .9rem; }
.hq-ask__error:empty { display: none; }
.hq-home__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.hq-panel { border-top: 1px solid var(--line); padding-top: .25rem; min-width: 0; }
.hq-panel--wide { grid-column: 1 / -1; }

/* run states */
.hq-run { border: 1px solid var(--line); border-left: 4px solid var(--ink); padding: .5rem .75rem; margin: .5rem 0; border-radius: .2rem; }
.hq-run--stopped { border-left-color: var(--alarm); background: var(--alarm-wash); }
.hq-run--insufficient { border-left-color: var(--caution); background: var(--caution-wash); }
.hq-run--progress { border-left-style: dashed; }
.hq-run p { margin: .2rem 0; }
.hq-run__slow { color: var(--caution); font-weight: 600; }
.hq-run__facts { color: var(--dim); font-size: .85rem; }

/* conversation + answer */
.hq-turns { list-style: none; padding: 0; margin: 0; }
.hq-turn { border-top: 1px solid var(--line); padding: .75rem 0; }
.hq-turn__q { margin: 0; color: var(--dim); font-size: .85rem; }
.hq-turn__who { font-weight: 600; }
.hq-turn__text { margin: .25rem 0 .5rem; padding: .4rem .75rem; background: var(--wash); border-left: 3px solid var(--dim); overflow-wrap: anywhere; }
.hq-answer { margin: .5rem 0; }
.hq-answer__q { font-size: 1.05rem; margin: .25rem 0; overflow-wrap: anywhere; }
.hq-claims { padding-left: 1.4rem; }
.hq-claim { margin: .6rem 0; overflow-wrap: anywhere; }
.hq-claim p { margin: .15rem 0; }
.hq-claim--qualified .hq-claim__text { border-left: 3px double var(--caution); padding-left: .5rem; }
.hq-claim__withheld { border: 2px dashed var(--alarm); background: var(--alarm-wash); padding: .35rem .6rem; border-radius: .2rem; }
.hq-qualifiers { margin: .2rem 0; padding-left: 1.2rem; font-size: .9rem; color: var(--caution); }
.hq-badges { display: flex; flex-wrap: wrap; gap: .3rem; }
.hq-badge { font-size: .76rem; border: 1px solid var(--line); border-radius: .2rem; padding: 0 .35rem; color: var(--dim); }
.hq-badge[data-value="failed"], .hq-badge[data-value="unsupported"] { border-color: var(--alarm); color: var(--alarm); border-width: 2px; }
.hq-badge[data-value="partial"], .hq-badge[data-value="pending"], .hq-badge[data-value="unavailable"] { border-style: dashed; color: var(--caution); border-color: var(--caution); }
.hq-cite { font: inherit; font-size: .75rem; vertical-align: super; line-height: 1; padding: .1rem .25rem; margin: 0 .1rem; border: 1px solid #1a4fb0; color: #1a4fb0; background: var(--paper); border-radius: .2rem; cursor: pointer; min-width: 1.6rem; min-height: 1.4rem; }
.hq-insufficient { border: 2px solid var(--caution); background: var(--caution-wash); padding: .4rem .75rem; border-radius: .2rem; }
.hq-evidence, .hq-trace { margin: .5rem 0; }
.hq-evidence summary, .hq-trace summary { cursor: pointer; font-weight: 600; }
.hq-generation { font-size: .82rem; }

/* citation + source reader */
.hq-quote { margin: .75rem 0; padding: .6rem .9rem; border-left: 4px solid var(--ink); background: var(--wash); white-space: pre-wrap; overflow-wrap: anywhere; }
.hq-mark { background: #fff1a8; color: var(--ink); border-bottom: 3px solid var(--ink); padding: 0 .1rem; }
.hq-mark__label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; border: 1px solid var(--ink); border-radius: .15rem; padding: 0 .2rem; margin-right: .2rem; background: var(--paper); }
.hq-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .25rem; padding: 0; margin: .25rem 0; color: var(--dim); font-size: .85rem; }
.hq-crumbs li + li::before { content: "›"; margin-right: .25rem; }
.hq-context { border: 1px dashed var(--line); padding: .3rem .6rem; margin: .4rem 0; }
.hq-context__role { margin: 0; font-size: .78rem; color: var(--dim); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.hq-context__text { margin: .1rem 0 0; }
.hq-doc { max-width: 46rem; line-height: 1.6; }
.hq-doc__p, .hq-doc__h { overflow-wrap: anywhere; }
.hq-doc__code { background: var(--wash); padding: .5rem; overflow-x: auto; white-space: pre-wrap; }
.hq-doc__quote { border-left: 3px solid var(--line); margin: .5rem 0; padding-left: .75rem; color: var(--dim); }
.hq-doc__scroll { overflow-x: auto; max-width: 100%; }
.hq-doc__table { border-collapse: collapse; font-size: .9rem; }
.hq-doc__table th, .hq-doc__table td { border: 1px solid var(--line); padding: .25rem .5rem; text-align: left; vertical-align: top; }
[data-highlight="true"] { outline: 2px solid var(--ink); outline-offset: 3px; }
.hq-paging { margin: 1rem 0 0; }
.hq-rev-switch { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: .5rem 0; }

/* lineage */
.hq-tabs { display: flex; flex-wrap: wrap; gap: .35rem; margin: .5rem 0; }
.hq-lin__list { list-style: none; padding-left: 1.1rem; margin: .2rem 0; border-left: 1px dotted var(--dim); }
.hq-lin__outline { padding-left: 0; border-left: 0; }
.hq-lin__item { margin: .3rem 0; overflow-wrap: anywhere; }
.hq-lin__item summary { cursor: pointer; }
.hq-lin__label { font-weight: 600; }
.hq-lin__acts { font-size: .82rem; }
.hq-lin__withheld { font-style: italic; color: var(--caution); }
.hq-paths { font-size: .78rem; font-weight: 700; border: 1px solid var(--ink); padding: 0 .3rem; border-radius: .2rem; }
.hq-lin__count { font-size: 1rem; }
.hq-graph { overflow-x: auto; border: 1px solid var(--line); padding: .5rem; }
.hq-graph svg { max-width: none; }
.hq-graph__node rect { fill: var(--paper); stroke: var(--ink); }
.hq-graph__node text { font: 12px ui-sans-serif, system-ui, sans-serif; fill: var(--ink); }
.hq-graph__kind { fill: var(--dim); font-size: 10px; }
.hq-graph__edge { stroke: var(--dim); stroke-width: 1.5; }
.hq-graph__edge--approval { stroke-dasharray: 4 3; }

/* corrections, saved, sharing, dialog */
.hq-dialog { border: 2px solid var(--ink); border-radius: .3rem; padding: 1rem; max-width: min(36rem, calc(100vw - 1.5rem)); width: 100%; }
.hq-dialog::backdrop { background: rgba(0, 0, 0, .45); }
.hq-dialog__form { display: grid; gap: .5rem; }
.hq-share__refused { border: 2px solid var(--alarm); background: var(--alarm-wash); padding: .4rem .75rem; border-radius: .2rem; }
.hq-share__ok { border: 1px solid var(--ink); padding: .4rem .75rem; border-radius: .2rem; }
.hq-timeline { margin: .25rem 0; padding-left: 1.2rem; font-size: .88rem; }
.hq-corrections { padding-left: 0; }
.hq-correction { border-top: 1px solid var(--line); padding: .5rem 0; list-style: none; }
.hq-correction__text { margin: .25rem 0; padding-left: .5rem; border-left: 3px solid var(--line); white-space: pre-wrap; }

/* narrow screens: stack, never scroll sideways */
@media (max-width: 40rem) {
  #app { padding: .5rem; }
  .nav { gap: .35rem; }
  .nav__group--secondary { border-left: 0; padding-left: 0; }
  .nav__who { margin-left: 0; flex-basis: 100%; }
  .nav__flag { margin-left: 0; }
  .screen--human { padding: .5rem .6rem; }
  .hq-home__grid { grid-template-columns: minmax(0, 1fr); }
  .hq-ask__row { flex-direction: column; align-items: stretch; }
  .hq-dl { grid-template-columns: minmax(0, 1fr); }
  .hq-dl dt { margin-top: .3rem; }
  .hq-lin__list { padding-left: .6rem; }
  .unmet { font-size: .85rem; }
}
/* ===== end Package 06 block ===== */