/* Company MRI brand system (Goal 7). Provisional, UNAPPROVED palette and
   typography: canon 04 requirement 75 reserves brand identity to founder
   decision D-004, so nothing here may be treated as approved brand identity.
   Executive, precise, discreet, premium. Color is never the only signal
   (icons/labels accompany status). WCAG 2.2 AA is the binding target, not a
   proven claim -- the audit is CMR-TEST-005 (canon 04 Known exclusion 8). */
:root {
  --ink: #05080B;        /* primary background */
  --carbon: #0B1117;     /* surfaces */
  --graphite: #17212B;   /* raised panels / borders */
  --line: #223141;
  --white: #F7FAFC;      /* primary text */
  --slate: #A8B3BE;      /* secondary text */
  --cyan: #00C8F0;       /* active / focus / key data / signal */
  --positive: #35C98A;
  --warning: #F4B740;
  --critical: #F06464;
  --maxw: 68rem;
  font-synthesis: none;
  -webkit-text-size-adjust: 100%;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--ink);
  color: var(--white);
  font: 17px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 1.25rem; }
a { color: var(--cyan); }
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; border-radius: 4px; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 1rem; top: 1rem; background: var(--cyan); color: var(--ink);
  padding: .5rem .9rem; border-radius: 6px; z-index: 10; }

.tabnum { font-variant-numeric: tabular-nums; }

/* header */
header.site { border-bottom: 1px solid var(--line); background: var(--ink); }
/* Wraps rather than overflowing: brand, navigation and the synthetic badge do
   not fit on one line at 320px, and an unwrapped flex row would push the page
   body into horizontal scroll (canon 04 §11 requirement 71). */
.site .wrap { display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: .6rem 1rem; padding-top: 1rem; padding-bottom: 1rem; }
.brand { display: flex; align-items: center; gap: .6rem; font-weight: 700;
  letter-spacing: .01em; color: var(--white); text-decoration: none; }
.brand .mark { width: 28px; height: 28px; }
.synthetic-badge { display: inline-flex; align-items: center; gap: .4rem;
  font-size: .8rem; color: var(--ink); background: var(--cyan);
  padding: .2rem .55rem; border-radius: 999px; font-weight: 700; }

/* Primary navigation. The current surface is marked with aria-current, and the
   underline below is a second, non-color signal for it (canon 04 §10 req 63). */
.nav { display: flex; gap: 1.1rem; flex-wrap: wrap; margin-right: auto;
  font-size: .95rem; }
.nav a { color: var(--slate); text-decoration: none; padding: .2rem 0;
  border-bottom: 2px solid transparent; }
.nav a:hover { color: var(--white); }
.nav a[aria-current="page"] { color: var(--white); font-weight: 700;
  border-bottom-color: var(--cyan); }

/* hero */
.hero { padding: 4.5rem 0 3rem; }
.hero h1 { font-size: clamp(2rem, 5vw, 3.1rem); line-height: 1.12; margin: 0 0 1rem;
  letter-spacing: -0.01em; }
.hero .lede { font-size: 1.25rem; color: var(--slate); max-width: 44rem; margin: 0 0 2rem; }
.hero .cyan { color: var(--cyan); }
.cta { display: inline-flex; align-items: center; gap: .5rem; background: var(--cyan);
  color: var(--ink); font-weight: 700; padding: .85rem 1.4rem; border-radius: 8px;
  text-decoration: none; border: 0; font-size: 1rem; cursor: pointer; }
.cta.secondary { background: transparent; color: var(--white);
  border: 1px solid var(--line); }
.cta-row { display: flex; gap: .75rem; flex-wrap: wrap; }

section { padding: 2.75rem 0; border-top: 1px solid var(--line); }
section h2 { font-size: 1.5rem; margin: 0 0 1.25rem; }
.muted { color: var(--slate); }
.grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.panel { background: var(--carbon); border: 1px solid var(--line); border-radius: 12px;
  padding: 1.25rem 1.35rem; }
.panel h3 { margin: 0 0 .5rem; font-size: 1.05rem; }
.panel p { margin: 0; color: var(--slate); }

ul.plain { list-style: none; padding: 0; margin: 0; }
ul.plain li { padding: .35rem 0; color: var(--slate); }
ul.plain li::before { content: "—"; color: var(--cyan); margin-right: .6rem; }

/* scores */
.scorecards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.score { background: var(--carbon); border: 1px solid var(--line); border-radius: 12px; padding: 1.35rem; }
.score .label { color: var(--slate); font-size: .95rem; }
.score .value { font-size: 2.6rem; font-weight: 700; line-height: 1; margin: .35rem 0; }
.score .sub { font-size: .85rem; color: var(--slate); }
.meter { height: 8px; border-radius: 999px; background: var(--graphite); margin-top: .8rem; overflow: hidden; }
.meter > span { display: block; height: 100%; background: var(--cyan); }

/* findings */
.finding { background: var(--carbon); border: 1px solid var(--line); border-left-width: 4px;
  border-radius: 10px; padding: 1rem 1.15rem; margin-bottom: .85rem; }
.finding.risk { border-left-color: var(--critical); }
.finding.evidence_gap { border-left-color: var(--warning); }
.finding.dependency { border-left-color: var(--cyan); }
.finding.strength { border-left-color: var(--positive); }
.finding.opportunity { border-left-color: var(--cyan); }
.fhead { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.tag { font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; padding: .15rem .5rem; border-radius: 5px;
  background: var(--graphite); color: var(--white); }
.tag.risk { color: var(--critical); }
.tag.evidence_gap { color: var(--warning); }
.tag.dependency { color: var(--cyan); }
.tag.strength { color: var(--positive); }
.prio { font-size: .78rem; color: var(--slate); }
.finding h3 { margin: 0; font-size: 1.05rem; flex: 1 1 auto; }
.finding p { margin: .6rem 0 0; }
.finding .why .k { color: var(--slate); }

/* Canon 04 §11 requirement 72: confidence, completeness, missing evidence, the
   excluded-fact list and the advisory boundary are always visible. Only
   recommended action and validation method sit behind the disclosure below. */
.lim { color: var(--slate); font-size: .85rem; }
.advisory { color: var(--slate); font-size: .82rem; }

/* The disclosure keeps its native marker. The previous rules put display:flex
   on <summary> and removed the ::-webkit-details-marker, which left no visible
   affordance that a finding expanded at all. */
details.more { margin-top: .8rem; }
details.more > summary { cursor: pointer; color: var(--cyan); font-size: .88rem;
  padding: .2rem 0; }
details.more > dl { margin-top: .6rem; }
/* The value column is minmax(0, 1fr), not 1fr. A bare 1fr resolves to
   minmax(auto, 1fr), whose automatic minimum is min-content, so a long value
   could not shrink and pushed the whole dl wider than its container -- which
   cascaded up and made the page body scroll horizontally on a small screen
   once a finding was expanded (canon 04 §11 requirement 71). fit-content caps
   the label column so it wraps instead of forcing max-content. */
.finding dl { margin: 0; display: grid;
  grid-template-columns: fit-content(11rem) minmax(0, 1fr); gap: .3rem .9rem; }
/* Below this width a two-column definition list is not legible for executive
   content (requirement 72), so labels stack above their values. */
@media (max-width: 34rem) {
  .finding dl { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .finding dt { margin-top: .5rem; }
}
.finding dt { color: var(--slate); font-size: .85rem; }
.finding dd { margin: 0; }
.evbar { display: flex; gap: 1.2rem; flex-wrap: wrap; color: var(--slate); font-size: .85rem; }

.comparison td, .comparison th { text-align: left; padding: .5rem .7rem; border-bottom: 1px solid var(--line); }
.comparison { width: 100%; border-collapse: collapse; }
/* Requirement 32: the completeness swing travels with the row it qualifies, so
   a value gain accompanied by a completeness drop cannot read as pure gain. */
.comparison .note { color: var(--slate); font-size: .85rem; min-width: 16rem; }
.celllabel { display: none; color: var(--slate); }

/* Wide content scrolls in its own container; the body never scrolls
   horizontally (§11 requirement 71). Declared BEFORE the stacking block below,
   which releases it at narrow widths: both selectors are `.scrollx` with equal
   specificity, so source order decides. Review measured the release as inert
   when this rule came last -- computed overflow-x stayed `auto` at 320px, and
   the note was only on screen because the stacked table happened to fit. */
.scrollx { overflow-x: auto; }

/* Below this width the five-column table stacks into per-dimension blocks.
   Horizontally scrolling it instead left the mandatory note 115px off-screen at
   320px, so the default mobile reading was "improved 61 -> 94" with the
   completeness fall invisible -- requirement 32's exact failure mode, and
   limitations out of reach under requirement 72. Each cell shows its own label
   once the header row is gone. */
@media (max-width: 34rem) {
  .comparison, .comparison tbody, .comparison tr, .comparison td { display: block; }
  .comparison thead { display: none; }
  .comparison tr { border-bottom: 1px solid var(--line); padding: .65rem 0; }
  .comparison td { border: 0; padding: .1rem 0; }
  .comparison .dim { font-weight: 700; font-size: 1.02rem; }
  .comparison .note { min-width: 0; }
  .celllabel { display: inline; }
  .scrollx { overflow-x: visible; }
}
.chg { font-weight: 700; }
.chg.improved { color: var(--positive); }
.chg.worsened { color: var(--critical); }
.chg.evidence_only { color: var(--warning); }
.chg.unchanged { color: var(--slate); }

.disclosure { background: var(--graphite); border: 1px dashed var(--line);
  border-radius: 10px; padding: 1rem 1.2rem; color: var(--slate); font-size: .92rem; }

/* Provenance notice (canon 04 §3 requirement 3). Present on every logged-out
   surface as static markup so it survives with scripting disabled. */
.provenance { margin: 0 0 1.5rem; color: var(--slate); font-size: .9rem;
  border-left: 3px solid var(--cyan); padding: .35rem 0 .35rem .9rem;
  max-width: 46rem; }

/* Partial state (§9 requirement 56). Announced politely: a partial payload is a
   disclosed condition, not an error. */
.partial { margin: 0 0 1.5rem; color: var(--warning); font-size: .9rem;
  border: 1px solid var(--warning); border-radius: 8px; padding: .7rem .95rem; }

/* Absent section. Says so in words -- an empty box is not a disclosure. It is a
   <span> because these are written into <p id="intro"> and <p id="inventory">,
   and a <p> inside a <p> is invalid and gets reparented by the browser. */
.absent { display: block; color: var(--slate); font-style: italic; margin: 0; }

footer.site { border-top: 1px solid var(--line); color: var(--slate); font-size: .9rem;
  padding: 2rem 0 3rem; }
.state { padding: 3rem 0; text-align: center; color: var(--slate); }
[hidden] { display: none !important; }

/* CMR-EXPLAIN-001 explanation surface: evidence chips and inline fact ids. */
.chips { list-style: none; padding: 0; margin: .5rem 0 0; display: flex;
  flex-wrap: wrap; gap: .4rem; }
.chips li { margin: 0; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .85em; background: rgba(0, 200, 240, .12);
  color: var(--white, #f7fafc); padding: .1rem .4rem; border-radius: .3rem;
  word-break: break-word; }

/* CMR-ASSESS-001 assessment surface. */
.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; }
fieldset.qfield { border: 1px solid var(--line); border-radius: .5rem;
  padding: 1rem 1.1rem; margin: 1rem 0; }
fieldset.qfield legend { font-weight: 600; color: var(--white, #f7fafc);
  padding: 0 .4rem; }
fieldset.qfield[aria-invalid="true"] { border-color: #ff6b6b; }
.opts { display: flex; flex-direction: column; gap: .5rem; margin-top: .6rem; }
label.opt { display: flex; align-items: center; gap: .5rem; cursor: pointer; }
.qerror { color: #ff6b6b; font-size: .9rem; margin-top: .6rem; }

/* CMR-SCORE-003 executive score-context surface. */
.scenario { margin: 1.5rem 0 2rem; }
.scenario > h3 { margin: 0 0 .3rem; font-size: 1.2rem; }
p.subhead { margin: 1.1rem 0 .5rem; font-weight: 600; color: var(--white, #f7fafc);
  text-transform: uppercase; letter-spacing: .04em; font-size: .82rem; }
.panel h4 { margin: 0; font-size: 1.02rem; }
.score-line { margin: .5rem 0 .2rem; }
.score-line strong { font-size: 1.9rem; font-weight: 700; line-height: 1; }
li.panel[data-assessable="no"] .score-line strong { font-size: 1.15rem;
  color: var(--slate); }
details.trace { margin-top: .7rem; }
details.trace > summary { cursor: pointer; color: var(--cyan); font-size: .86rem; }
details.trace ol { margin: .5rem 0 0; padding-left: 1.2rem; color: var(--slate);
  font-size: .86rem; }
details.trace li { margin: .2rem 0; }

/* CMR-EVID-001 evidence-trace surface. */
.filterbar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem;
  margin: .8rem 0 1rem; }
.filterbar label { color: var(--slate); font-size: .9rem; }
.filterbar select { background: var(--carbon); color: var(--white, #f7fafc);
  border: 1px solid var(--line); border-radius: .4rem; padding: .35rem .6rem;
  font: inherit; font-size: .9rem; min-height: 2.2rem; }
.filterbar select:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
ol.plain { list-style: none; padding: 0; }

/* CMR-REC-001 action-plan surface. */
.narrative { border-left: 3px solid var(--cyan); padding: .1rem 0 .1rem .9rem;
  margin: .9rem 0; }
.panel ul { margin: .3rem 0 .6rem; padding-left: 1.2rem; color: var(--slate); }
.panel ul li { margin: .2rem 0; }
details.trace .subhead { margin-top: .9rem; }

/* CMR-REPORT-001 executive report surface. */
.identity { margin: 0 0 1.5rem; }
.identity .idrow { display: flex; flex-wrap: wrap; gap: .5rem 1rem;
  padding: .35rem 0; border-bottom: 1px solid var(--line); }
.identity dt { color: var(--slate); min-width: 12rem; margin: 0; }
.identity dd { margin: 0; word-break: break-word; }
.report .rsection { margin: 1.5rem 0; }
.report h3 { font-size: 1.05rem; margin: 0 0 .5rem; }
.report ul { margin: .3rem 0 0; padding-left: 1.2rem; color: var(--slate); }
.report ul li { margin: .25rem 0; }
#toolbar { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1rem 0 1.5rem; }
.reporttable { width: 100%; border-collapse: collapse; margin-top: .5rem;
  font-size: .9rem; }
.reporttable th, .reporttable td { text-align: left; padding: .45rem .6rem;
  border-bottom: 1px solid var(--line); }
.reporttable th { color: var(--white, #f7fafc); font-weight: 600; }
.reporttable td { color: var(--slate); word-break: break-word; }

/* Print / PDF. The report is a document first: drop the chrome, force legible
   ink-on-paper colours, and keep a section, a table row, and a heading with the
   content that follows it from being split across a page break. */
@media print {
  .no-print, .site, #toolbar, .skip { display: none !important; }
  html, body { background: #fff !important; color: #000 !important; }
  .wrap { max-width: none; padding: 0; }
  .report, .report p, .report li, .report dd, .report dt,
  .reporttable td, .reporttable th { color: #000 !important; }
  .muted, .lim, .slate { color: #333 !important; }
  a { color: #000 !important; text-decoration: underline; }
  h1, h2, h3 { break-after: avoid-page; page-break-after: avoid; }
  .rsection, .identity .idrow, li { break-inside: avoid; page-break-inside: avoid; }
  .reporttable { break-inside: auto; }
  .reporttable tr { break-inside: avoid; page-break-inside: avoid; }
  .reporttable thead { display: table-header-group; }
  #report > section { break-inside: avoid-page; }
  @page { margin: 18mm; }
}

/* CMR-AUTH-002 access screens. */
.tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.25rem 0 1rem; }
button.tab { background: var(--carbon); color: var(--slate); font: inherit;
  font-size: .92rem; border: 1px solid var(--line); border-radius: .45rem;
  padding: .45rem .9rem; cursor: pointer; min-height: 2.4rem; }
button.tab[aria-selected="true"] { color: var(--white, #f7fafc);
  border-color: var(--cyan); }
button.tab:focus-visible, .access input:focus-visible,
.access .cta:focus-visible, h2:focus-visible {
  outline: 2px solid var(--cyan); outline-offset: 2px; }
.panel.access { max-width: 34rem; }
.access .field { margin: 1rem 0; }
.access label { display: block; margin-bottom: .35rem;
  color: var(--white, #f7fafc); font-weight: 600; }
.access input { width: 100%; background: #0b0f14; color: var(--white, #f7fafc);
  border: 1px solid var(--line); border-radius: .45rem; padding: .6rem .7rem;
  font: inherit; min-height: 2.6rem; }
.access .help { margin: .35rem 0 0; color: var(--slate); font-size: .85rem; }
.access .cta { margin-top: .5rem; }

/* CMR-STORE-001 storage surface: wide tables scroll rather than overflowing. */
.tablescroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tablescroll table { min-width: 44rem; }

/* CMR-ENTITLE-001 post-sale journey: capability state is never colour-only --
   each row carries a glyph and the words "Available" / "Not yet". */
.caps { list-style: none; padding-left: 0; }
.caps .caprow { margin: .9rem 0; padding-left: .9rem;
  border-left: 2px solid var(--line); }
.caps .capname { color: var(--white); margin: 0 0 .15rem; }
.caps .ok { color: var(--positive); font-weight: 700; }
.caps .no { color: var(--warning); font-weight: 700; }
.reqs { margin: .4rem 0 0; padding-left: 1.1rem; }
.reqs li { margin: .3rem 0; }
.pill { display: inline-block; border: 1px solid var(--line); border-radius: 999px;
  padding: .05rem .5rem; margin-right: .35rem; font-size: .78rem;
  color: var(--white); white-space: nowrap; }
/* At a narrow viewport under 200% zoom the owner pills were the elements
   overflowing the line box -- caught by the browser evidence run, not by
   review. The pill keeps its nowrap (breaking "Company MRI" across lines reads
   as two owners), so the indents give way instead. This fixes the pill
   overflow; it does not claim the whole site reflows below the WCAG 1.4.10
   320px criterion, which is measured separately. */
@media (max-width: 34rem) {
  .caps .caprow { padding-left: .5rem; }
  .reqs { padding-left: 0; list-style-position: inside; }
  .reqs li { display: flow-root; }
  .pill { margin-bottom: .15rem; }
}

/* CMR-BILL-003 live-billing gate: three states, never two. UNVERIFIED gets its
   own glyph and word so it can never be read as a pass at a glance. */
.caps .unk { color: var(--slate); font-weight: 700; }

/* The containment table names destinations as machine identifiers
   (model_prompt_ungoverned), which are single unbreakable tokens wider than a
   320px viewport. Caught by the browser evidence run at the WCAG 1.4.10 reflow
   width. Breaking inside the token is right here: these are identifiers, not
   prose, and a horizontal scrollbar is worse than a mid-token wrap. */
.caps .capname strong { overflow-wrap: anywhere; }

/* CMR-DASH-001 executive overview. The four channels each carry a WORD plus a
   distinct chip shape, never colour alone: "observed" and "inferred" are the two
   things a buyer must never confuse, and colour is not a reliable carrier. */
.chan { display: inline-block; font-size: .7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; padding: .1rem .45rem;
  border-radius: .3rem; margin-right: .45rem; white-space: nowrap;
  border: 1px solid var(--line); color: var(--white); }
.chan-evidence   { border-left: 3px solid var(--positive); }
.chan-inference  { border-left: 3px solid var(--cyan); }
.chan-unknown    { border-left: 3px dashed var(--slate); }
.chan-limitation { border-left: 3px solid var(--warning); }
/* A dimension nothing may be claimed about must not look like a low number. */
.score .value.na { font-size: 1.35rem; color: var(--slate); line-height: 1.3; }
.score .na-note { color: var(--warning); }
@media (max-width: 34rem) {
  .score .value { font-size: 2rem; }
  .score .value.na { font-size: 1.15rem; }
}