/* ==========================================================================
   Platform BMC diagnostic tool, Consilium Digitale
   Tokens are the Brandbook v1.0 values, identical to consiliumdigitale.lt.
   The rules on top of them are not: this is an application, denser and plainer
   than the marketing site, and the capture screen in particular is furniture,
   not a page. Brandbook constraints that still hold everywhere here:
   two typefaces, weight 500 at the heaviest, sentence case, 3px corners,
   flat surfaces, brass used sparingly.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, h4, p, ul, ol, figure, fieldset, legend { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
fieldset { border: 0; }

:root {
  --paper:      #FAF8F4;
  --white:      #FFFFFF;
  --sand:       #F2EDE4;

  --navy:       #1E3A5F;
  --navy-900:   #0F1C2D;
  --navy-800:   #162C48;
  --navy-500:   #3A5C86;

  --brass:      #8A6B3D;
  --brass-300:  #C89B54;

  --petrol:     #14524E;
  --signal:     #2D6BD4;

  --ink:        #14181C;
  --body:       #4D525A;
  --muted:      #6B6F78;
  --on-dark:    #A9B4C2;

  --rule:       #E4DED4;
  --rule-cool:  #EEF0F2;
  --rule-dark:  #2A3E58;

  /* Application-only. Status colours are muted on purpose: a red alert bar in
     front of a client's leadership team should look like information, not like
     something has gone wrong with the product. */
  --danger:     #8C2F2F;
  --danger-bg:  #F6EAE8;
  --ok:         #14524E;
  --ok-bg:      #E7EFEE;
  --warn-bg:    #F7F0E2;

  --radius:     3px;
  --shell:      1180px;
  --side:       clamp(16px, 4vw, 40px);
  --header-h:   60px;

  --serif: 'Instrument Serif', Georgia, serif;
  --sans:  'Instrument Sans', system-ui, sans-serif;
}

body {
  background: var(--paper);
  color: var(--body);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.015em;
  line-height: 1.15;
}
h1 { font-size: clamp(28px, 3.4vw, 40px); }
h2 { font-size: clamp(21px, 2.2vw, 27px); }
h3 { font-size: 18px; }
h4 {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}
em { font-style: italic; color: var(--navy); }

a { color: var(--signal); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration: none; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
}

/* --- layout --------------------------------------------------------------- */

.shell {
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--side);
}
.shell-narrow { max-width: 760px; }
.stack > * + * { margin-top: var(--gap, 16px); }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.row-between { display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.grow { flex: 1 1 auto; min-width: 0; }
.right { margin-left: auto; }

.eyebrow {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass);
  font-weight: 500;
}
.muted { color: var(--muted); }
.small { font-size: 13px; }
.mono-num { font-variant-numeric: tabular-nums; }

/* --- header --------------------------------------------------------------- */

.appbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--navy-900);
  color: var(--on-dark);
  border-bottom: 1px solid var(--rule-dark);
}
.appbar-inner {
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 20px;
}
.appbar a { color: var(--on-dark); text-decoration: none; }
.appbar a:hover { color: #fff; }
.brand { display: flex; align-items: center; gap: 10px; color: #fff !important; }
.brand svg { width: 22px; height: 22px; }
.brand-name { font-family: var(--serif); font-size: 17px; color: #fff; }
.appbar nav { display: flex; gap: 18px; font-size: 14px; }
.appbar nav a[aria-current="page"] { color: #fff; border-bottom: 1px solid var(--brass-300); }

.langswitch { display: inline-flex; gap: 6px; font-size: 13px; }
.langswitch button {
  background: none; border: 0; padding: 2px 4px; cursor: pointer;
  color: inherit; font: inherit; border-radius: var(--radius);
}
.langswitch button[aria-pressed="true"] { color: #fff; text-decoration: underline; }

/* --- page furniture ------------------------------------------------------- */

.page { padding-block: clamp(24px, 4vw, 44px) 80px; }
.page-head { margin-bottom: 28px; }
.page-head h1 { margin-bottom: 6px; }

.card {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: clamp(16px, 2.4vw, 24px);
}
.card + .card { margin-top: 16px; }
.card-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 14px;
}
.card-quiet { background: var(--sand); border-color: transparent; }

hr.rule { border: 0; border-top: 1px solid var(--rule); margin: 24px 0; }

/* --- forms ---------------------------------------------------------------- */

label, .label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 5px;
}
.hint { font-size: 13px; color: var(--muted); margin-bottom: 8px; }

input[type="text"], input[type="email"], input[type="password"], input[type="date"],
select, textarea {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 9px 11px;
}
textarea { resize: vertical; min-height: 96px; line-height: 1.55; }
input:hover, select:hover, textarea:hover { border-color: #D6CEC1; }
input:disabled, textarea:disabled, select:disabled {
  background: var(--sand); color: var(--muted); cursor: not-allowed;
}
select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 16px) 52%, calc(100% - 11px) 52%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 32px;
}
.field + .field { margin-top: 16px; }
.field-row { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* --- buttons -------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-size: 14px;
  padding: 9px 18px;
  border-radius: var(--radius);
  border: 1px solid var(--navy);
  background: var(--navy);
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.btn:hover { background: var(--navy-800); border-color: var(--navy-800); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.btn-ghost { background: transparent; color: var(--navy); }
.btn-ghost:hover { background: var(--sand); }
.btn-quiet { background: transparent; color: var(--body); border-color: var(--rule); }
.btn-quiet:hover { background: var(--sand); color: var(--ink); }
.btn-danger { background: transparent; color: var(--danger); border-color: #E0C9C5; }
.btn-danger:hover { background: var(--danger-bg); }
/* The one button that sits on the dark bar. A class rather than an inline
   style, because the CSP here allows no inline styles. */
.btn-onbar { color: var(--on-dark); border-color: var(--rule-dark); }
.btn-onbar:hover { background: var(--navy-800); color: #fff; }
.btn-sm { padding: 5px 11px; font-size: 13px; }
.btn-lg { padding: 12px 24px; font-size: 15px; }
.btn-block { width: 100%; }

/* --- status pills --------------------------------------------------------- */

.pill {
  display: inline-block;
  font-size: 12px;
  line-height: 1.5;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--sand);
  color: var(--body);
  white-space: nowrap;
}
.pill-wait  { background: var(--warn-bg);  color: #6E551F; }
.pill-live  { background: #E6ECF4;         color: var(--navy); }
.pill-draft { background: var(--sand);     color: var(--body); }
.pill-done  { background: var(--ok-bg);    color: var(--ok); }

/* --- tables --------------------------------------------------------------- */

.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  padding: 0 12px 8px;
  border-bottom: 1px solid var(--rule);
}
.table td { padding: 11px 12px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--paper); }
.table a { color: var(--ink); text-decoration: none; font-weight: 500; }
.table a:hover { text-decoration: underline; }
.table-wrap { overflow-x: auto; }

/* --- notices -------------------------------------------------------------- */

.notice {
  border: 1px solid var(--rule);
  border-left: 2px solid var(--brass);
  background: var(--sand);
  border-radius: var(--radius);
  padding: 12px 14px;
  font-size: 14px;
}
.notice-error { border-left-color: var(--danger); background: var(--danger-bg); color: #6C2626; }
.notice-ok    { border-left-color: var(--ok);     background: var(--ok-bg);     color: #123F3C; }

.empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--muted);
  border: 1px dashed var(--rule);
  border-radius: var(--radius);
}

/* --- toast ---------------------------------------------------------------- */

.toasts {
  position: fixed; bottom: 18px; right: 18px; z-index: 90;
  display: flex; flex-direction: column; gap: 8px; align-items: flex-end;
}
.toast {
  background: var(--navy-900); color: #fff;
  padding: 9px 14px; border-radius: var(--radius); font-size: 14px;
  max-width: 380px;
}
.toast-error { background: var(--danger); }

/* --- save state ----------------------------------------------------------- */
/* The one indicator that matters during a live session: has this been kept. */

.savestate { font-size: 13px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.savestate::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--rule); flex: none;
}
.savestate[data-state="saving"]::before { background: var(--brass-300); }
.savestate[data-state="saved"]::before  { background: var(--ok); }
.savestate[data-state="error"]::before  { background: var(--danger); }
.savestate[data-state="local"]::before  { background: var(--brass); }

/* --- sign in -------------------------------------------------------------- */

.signin-wrap {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 32px var(--side);
}
.signin { width: 100%; max-width: 420px; }
.signin .mark { margin: 0 auto 22px; width: 44px; }
.signin h1 { font-size: 28px; text-align: center; margin-bottom: 4px; }
.signin .sub { text-align: center; margin-bottom: 26px; }

.lang-row { display: flex; justify-content: center; margin-top: 18px; color: var(--muted); }
.lang-row .langswitch button[aria-pressed="true"] { color: var(--ink); }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--rule); margin-bottom: 20px; }
.tabs button {
  font: inherit; font-size: 14px; background: none; border: 0; cursor: pointer;
  padding: 8px 14px; color: var(--muted); border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--navy); }

/* --- capture screen ------------------------------------------------------- */
/* Two columns on a laptop: the prompt Mindaugas reads from on the left, the
   field the room's answer lands in on the right. One block at a time. */

.capture-shell { max-width: 1320px; }
.capture-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
  align-items: start;
}
@media (max-width: 900px) {
  .capture-grid { grid-template-columns: 1fr; }
}

.blocknav { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 20px; }
.blocknav button {
  font: inherit; font-size: 13px; cursor: pointer;
  background: var(--white); border: 1px solid var(--rule); color: var(--body);
  border-radius: var(--radius); padding: 6px 12px;
  display: inline-flex; align-items: center; gap: 7px;
}
.blocknav button[aria-current="true"] {
  background: var(--navy); border-color: var(--navy); color: #fff;
}
.blocknav .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--rule); flex: none;
}
.blocknav button[data-filled="true"] .dot { background: var(--ok); }
.blocknav button[aria-current="true"] .dot { background: var(--brass-300); }

.prompt-card p.ask {
  font-family: var(--serif);
  font-size: 21px;
  line-height: 1.3;
  color: var(--ink);
}
.prompt-list { font-size: 14px; }
.prompt-list li { padding-left: 16px; position: relative; }
.prompt-list li + li { margin-top: 7px; }
.prompt-list li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 6px; height: 1px; background: var(--brass);
}

.capture-top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 18px;
}
.capture-top-right { display: flex; align-items: center; gap: 16px; }
.blocknav-count {
  font-variant-numeric: tabular-nums; opacity: 0.7; margin-left: 2px;
}

/* The clock. A soft mark at forty minutes, not an alarm: a session that runs
   long is a judgement call, not an error. */
.pace {
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  color: var(--muted);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 3px 9px;
}
.pace[data-over="true"] { color: var(--brass); border-color: var(--brass-300); }

/* --- the follow-up stepper ------------------------------------------------ */

.probe-head { margin-bottom: 8px; }
.probe-text {
  font-size: 15px;
  color: var(--ink);
  min-height: 3em;
  margin-bottom: 12px;
}
.probe-all { margin-top: 14px; }
.probe-all summary { cursor: pointer; }
.probe-all[open] summary { margin-bottom: 8px; }

/* --- adding a statement --------------------------------------------------- */

.noteform {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
}
@media (max-width: 640px) {
  .noteform { grid-template-columns: 1fr; }
}
.noteform select { width: auto; min-width: 130px; }

/* --- the wall ------------------------------------------------------------- */

.notes { margin-top: 18px; }
.note, .proposal {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: baseline;
  padding: 9px 0;
  border-top: 1px solid var(--rule);
}
.notes .note:first-child { border-top: 0; }

.note-kind {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--sand);
  border-radius: 2px;
  padding: 2px 7px;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}
.proposal .note-kind { cursor: default; }

/* Kind is the only place colour does any work on this screen, and each one
   earns it: a disagreement and a decision are not the same evidence. */
.note[data-kind="disagreement"] .note-kind,
.proposal[data-kind="disagreement"] .note-kind { background: var(--warn-bg); color: #6E551F; }
.note[data-kind="number"] .note-kind,
.proposal[data-kind="number"] .note-kind { background: #E6ECF4; color: var(--navy); }
.note[data-kind="decision"] .note-kind,
.proposal[data-kind="decision"] .note-kind { background: var(--ok-bg); color: var(--ok); }
.note[data-kind="question"] .note-kind,
.proposal[data-kind="question"] .note-kind { background: var(--danger-bg); color: var(--danger); }

.note-text { color: var(--ink); line-height: 1.5; }
.note-text:focus { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 2px; }

.note-drop {
  background: none; border: 0; cursor: pointer;
  color: var(--muted); font-size: 18px; line-height: 1;
  padding: 0 4px; border-radius: 2px;
}
.note-drop:hover { color: var(--danger); }

/* --- proposals ------------------------------------------------------------
   The note-taker's output lives here and only here. Accepting one is a click;
   nothing crosses into the notes on its own. */

.proposals {
  margin-top: 18px;
  border: 1px solid var(--rule);
  border-left: 2px solid var(--brass-300);
  border-radius: var(--radius);
  background: var(--sand);
  padding: 12px 14px;
}
.proposals ul { margin-top: 6px; }
.proposal { border-top-color: #E0D9CB; }
.proposals li:first-child { border-top: 0; }
.proposal-actions { display: flex; gap: 6px; white-space: nowrap; }

.rec-bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 14px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--white);
}
.rec-dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--rule); flex: none;
}
.rec-bar[data-rec="on"] .rec-dot { background: var(--danger); animation: pulse 1.8s ease-in-out infinite; }
.rec-bar[data-rec="error"] .rec-dot { background: var(--danger); }
.rec-bar[data-thinking] .rec-dot { background: var(--brass-300); }

/* The last thing it heard, scrolling past. This is the difference between a
   screen that says it is listening and a screen that shows it. */
.heard {
  font-size: 13px;
  color: var(--muted);
  font-style: italic;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .rec-bar[data-rec="on"] .rec-dot { animation: none; } }

.capture-actions { margin-top: 16px; }
.transcript-wrap { margin-top: 14px; }
.transcript-wrap summary { cursor: pointer; }
.transcript-wrap[open] summary { margin-bottom: 8px; }
.aidraft + .transcript-wrap { margin-top: 14px; }
.aidraft { margin-top: 14px; }
.aidraft .row { margin-top: 12px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.transcript {
  max-height: 150px; overflow-y: auto;
  font-size: 13px; line-height: 1.55; color: var(--muted);
  background: var(--paper); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 10px 12px;
  white-space: pre-wrap;
}

/* --- questionnaire review (admin) ----------------------------------------- */

.qa + .qa { margin-top: 18px; border-top: 1px solid var(--rule); padding-top: 18px; }
.qa-q { font-size: 13px; font-weight: 500; color: var(--ink); margin-bottom: 4px; }
.qa-a { white-space: pre-wrap; }

/* --- prep notes ----------------------------------------------------------- */

.prep-grid {
  display: grid; gap: 12px; margin-top: 18px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.prep-block {
  border: 1px solid var(--rule);
  border-top: 2px solid var(--rule);
  border-radius: var(--radius);
  padding: 12px 14px;
  background: var(--paper);
}
/* The only thing colour is doing here is answering "where does the day go".  */
.prep-block[data-attention="high"]   { border-top-color: var(--brass); }
.prep-block[data-attention="medium"] { border-top-color: var(--navy-500); }
.prep-block h4 { margin-bottom: 6px; }
.prep-open { color: var(--ink); margin-top: 8px; }

/* --- the roster ----------------------------------------------------------- */

.roster li {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 8px 0; border-top: 1px solid var(--rule);
}
.roster li:first-child { border-top: 0; }
.roster-name { color: var(--ink); font-weight: 500; }
.roster-title { flex: 1 1 auto; }

/* --- answers, one question at a time, everyone underneath ------------------
   Laid out this way on purpose: reading down a single question is how the gap
   between two people's answers becomes visible. Person-by-person hides it. */

.qa + .qa { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--rule); }
.qa-q { color: var(--ink); font-weight: 500; margin-bottom: 10px; }
.qa-person { padding-left: 14px; border-left: 2px solid var(--rule); }
.qa-person + .qa-person { margin-top: 12px; }
.qa-who { font-size: 13px; color: var(--brass); margin-bottom: 2px; }
.qa-a { white-space: pre-wrap; }

/* --- prep splits ---------------------------------------------------------- */

.split {
  border: 1px solid var(--rule);
  border-left: 2px solid var(--brass);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-top: 12px;
}
.split-topic { color: var(--ink); font-weight: 500; margin-bottom: 8px; }
.split-positions { margin-bottom: 10px; }
.split-positions li { padding: 6px 0; border-top: 1px dotted var(--rule); }
.split-positions li:first-child { border-top: 0; }
.split-who { display: block; font-size: 13px; color: var(--navy); }
.split-said { display: block; }
.split-label { color: var(--muted); text-transform: uppercase; font-size: 10px; letter-spacing: 0.08em; }

/* --- report ---------------------------------------------------------------
   An executive paper, not a web page: fixed measure, real page breaks, and
   charts that print at the size they were drawn. Everything here is shared by
   the admin preview and the client view, so what is approved is what is read. */

.report {
  max-width: 760px;
  color: var(--body);
}

.report-cover {
  border-bottom: 1px solid var(--rule);
  padding-bottom: 26px;
  margin-bottom: 30px;
}
.report-cover h1 { font-size: clamp(30px, 4vw, 44px); margin: 6px 0 4px; }
.report-kicker {
  font-family: var(--serif);
  font-size: 20px;
  color: var(--navy);
}
.report-meta-top { font-size: 13px; color: var(--muted); margin-top: 10px; }

/* The one sentence a board member repeats to someone who was not there. */
.report-headline {
  margin-top: 22px;
  padding-left: 16px;
  border-left: 2px solid var(--brass);
  font-family: var(--serif);
  font-size: clamp(19px, 2.4vw, 25px);
  line-height: 1.32;
  color: var(--ink);
}

.report-section { margin-top: 38px; }
.report-section > h2 {
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 18px;
}
.report p + p { margin-top: 12px; }
.report-lead p { font-size: 16px; line-height: 1.62; }

.report-block { margin-top: 26px; }
.report-block-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 8px;
}
.report-block h3 { margin-bottom: 6px; }
.report-consequence, .report-evidence { margin-top: 12px; font-size: 14px; }
.label-inline {
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted);
}

.report ul.bullets { margin-top: 12px; }
.report ul.bullets li { padding-left: 18px; position: relative; }
.report ul.bullets li + li { margin-top: 8px; }
.report ul.bullets li::before {
  content: ""; position: absolute; left: 0; top: 11px;
  width: 8px; height: 1px; background: var(--brass);
}

/* --- charts --------------------------------------------------------------- */

.chart { margin: 20px 0 24px; }
.chart svg { width: 100%; height: auto; max-width: 520px; }
.chart figcaption {
  font-size: 12px; color: var(--muted); margin-top: 6px; max-width: 520px;
}

.dotlevel {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: #D7D2C8; margin-right: 5px; vertical-align: baseline;
}
.dotlevel[data-level="high"]   { background: #1E3A5F; }
.dotlevel[data-level="medium"] { background: #3A5C86; }
.dotlevel[data-level="low"]    { background: #9BAABD; }
.dotlevel[data-evidence="strong"]   { background: #14524E; }
.dotlevel[data-evidence="moderate"] { background: #8A6B3D; }
.dotlevel[data-evidence="thin"]     { background: #B9B2A6; }
.dotlevel[data-align="aligned"] { background: #14524E; }
.dotlevel[data-align="partial"] { background: #C89B54; }
.dotlevel[data-align="split"]   { background: #8A6B3D; }

.pill-level[data-level="high"]   { background: #E6ECF4; color: var(--navy); }
.pill-level[data-level="medium"] { background: var(--sand); color: var(--body); }
.pill-level[data-level="low"],
.pill-level[data-level="none"]   { background: var(--paper); color: var(--muted); }

.scorecard .score-name { font-weight: 500; color: var(--ink); }
.align-index { width: 28px; color: var(--brass); font-variant-numeric: tabular-nums; }

/* --- directions ----------------------------------------------------------- */

.direction {
  border-top: 1px solid var(--rule);
  padding-top: 22px;
  margin-top: 26px;
}
.direction-head { display: flex; align-items: baseline; gap: 12px; }
.direction-head h3 { margin: 0; }
.direction .idx {
  flex: none;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--navy); color: #fff;
  font-family: var(--serif); font-size: 15px;
  display: inline-flex; align-items: center; justify-content: center;
}
.direction-tags { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 14px; }
.direction .tag {
  font-size: 11px; color: var(--muted);
  border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 2px 8px;
}
.direction h4 { margin-top: 14px; margin-bottom: 4px; }
.lead-in { font-weight: 500; color: var(--ink); }

.report-meta {
  font-size: 12px; color: var(--muted);
  border-top: 1px solid var(--rule); margin-top: 44px; padding-top: 14px;
}

/* --- print ---------------------------------------------------------------- */
/* The PDF export is the browser's own "save as PDF" over this stylesheet, so
   what is printed is the same document the client reads on screen. */

@media print {
  :root { --side: 0; }
  body { background: #fff; font-size: 11pt; color: #14181C; }
  .appbar, .toasts, .no-print, .btn { display: none !important; }
  .page { padding: 0; }
  .card { border: 0; padding: 0; background: none; }
  .report { max-width: none; }
  .report h2 { margin-top: 22pt; }
  .direction { break-inside: avoid; }
  .page-break { break-before: page; }
  .chart, .report-block { break-inside: avoid; }
  .report-cover { padding-bottom: 18pt; }
  a { color: inherit; text-decoration: none; }
  @page { margin: 18mm 16mm; }
}