/* Orion portal — on top of the CNIB tokens/chrome. Palette: yellow / black / white; yellow is chrome and fill, never body text on white. */
.page { max-width: var(--measure); margin: 0 auto; padding: 1.5rem 1rem 3rem; }
.button, .button-secondary, button { min-height: var(--target); min-width: var(--target); padding: 0.6rem 1.2rem; font: inherit; font-weight: 700; border-radius: var(--radius); border: 2px solid var(--border); cursor: pointer; }
.button, button[type="submit"] { background: var(--cnib-yellow); color: var(--cnib-black); text-decoration: none; display: inline-block; }
.button-secondary, .feedback-decide { background: var(--bg); color: var(--fg); }
.page-feedback { margin-bottom: 1rem; } .page-feedback summary { cursor: pointer; font-weight: 700; } .page-feedback textarea { width: 100%; max-width: 40rem; }
button:focus-visible, .button:focus-visible, a:focus-visible, textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; background-color: var(--focus-fill); }
.notice { border: 2px solid var(--border); border-left: var(--header-rule) solid var(--cnib-yellow); padding: 0.75rem 1rem; }
.chat-layout { display: grid; grid-template-columns: minmax(14rem, 18rem) 1fr; gap: 2rem; }
@media (max-width: 48rem) { .chat-layout { grid-template-columns: 1fr; } }
.conv-list { list-style: none; padding: 0; margin: 0.5rem 0 0; }
.conv-list li button { width: 100%; text-align: left; background: var(--bg); color: var(--fg); border-width: 1px; margin-bottom: 0.4rem; }
.conv-list li button[aria-current="true"] { border-left: var(--header-rule) solid var(--cnib-yellow); }
.messages { list-style: none; padding: 0; margin: 0 0 1rem; }
.messages li { border: 1px solid var(--border); border-radius: var(--radius); padding: 0.75rem 1rem; margin-bottom: 0.75rem; max-width: 60ch; white-space: pre-wrap; }
.messages li.user { border-left: var(--header-rule) solid var(--cnib-black); }
.messages li.assistant { border-left: var(--header-rule) solid var(--cnib-yellow); }
.messages li.withheld { border: 2px dashed var(--border); }
.messages .role { display: block; font-size: 0.875rem; color: var(--cnib-muted); margin: 0 0 0.25rem; font-weight: 700; line-height: inherit; }   /* a heading (h3) since 2026-09-28: no heading margins or size */
.ask label { display: block; font-weight: 700; margin-bottom: 0.25rem; }
.ask textarea { width: 100%; font: inherit; line-height: var(--line); padding: 0.6rem; border: 2px solid var(--border); border-radius: var(--radius); }
.help, .status, .method-note { color: var(--cnib-muted); }
.status:empty { display: none; }
.table-wrap { overflow-x: auto; } table { border-collapse: collapse; width: 100%; } th, td { border: 1px solid var(--border); padding: 0.5rem; text-align: left; }

/* Data tables follow the standard (table.data); feed lists are prose, so cells align left. */
.table-wrap table.data th, .table-wrap table.data td { text-align: left; }

/* High contrast: buttons stay BLACK text on YELLOW (owner 2026-09-11). chrome.css turns every link white in high contrast,
   which reached <a class="button">; the CNIB attention pairing is yellow fill + black text in both modes. */
html.cnib-high-contrast .button, html.cnib-high-contrast button[type="submit"], html.cnib-high-contrast .button:hover, html.cnib-high-contrast button[type="submit"]:hover { background: var(--cnib-yellow); color: var(--cnib-black); }
html.cnib-high-contrast .button-secondary, html.cnib-high-contrast .feedback-decide, html.cnib-high-contrast .conv-list li button { background: var(--cnib-black); color: var(--cnib-white); border-color: var(--cnib-white); }
html.cnib-high-contrast .button:focus-visible, html.cnib-high-contrast button:focus-visible { outline-color: var(--cnib-white); background: var(--cnib-yellow); color: var(--cnib-black); }
/* The checkbox mark is drawn INSIDE its box. forms.css positions the tick absolutely against the label (left: 1.35rem; top: 50%): a label that wraps in a
   narrow column (the idea brief at 256px, the docked panel's settings) put the tick well below and outside the box (owner 2026-10-07). */
.checkbox-label input[type="checkbox"]:checked + span::before { content: "\2713"; color: var(--cnib-black); font-weight: 700; font-size: 16px; line-height: 20px; text-align: center; }
.checkbox-label input[type="checkbox"]:checked + span::after { content: none; }
html.cnib-high-contrast .checkbox-label input[type="checkbox"]:checked + span::before { color: var(--cnib-black); background: var(--cnib-yellow); }
/* chrome.css turns every link white in high contrast; the skip link and a link inside an eyebrow sit on the yellow fill and keep black type (the
   contrast scan behind F-ROOM-BUNDLE-HC-TWO-SWITCHES, 2026-10-06, read them at 1.17:1) */
html.cnib-high-contrast .skip-link, html.cnib-high-contrast .skip-link:focus, html.cnib-high-contrast .eyebrow a { color: var(--cnib-black); }

/* Forms (standard visual language): stacked fields, 44px controls, black 2px borders, 8px radius. */
form .field { margin: 0 0 1rem; }
form .field label { display: block; font-weight: 700; margin-bottom: 0.3rem; }
form input[type="text"], form input[type="email"], form input[type="tel"], form input[type="number"], form input[type="date"], form select, form textarea, form input[type="file"] { width: 100%; max-width: 40rem; min-height: var(--target); border: 2px solid var(--border); border-radius: var(--radius); padding: 0.5rem 0.7rem; background: var(--bg); color: var(--fg); font: inherit; }
form textarea { min-height: 5rem; }

.brand-logo { margin: 0 0 1.5rem; }
.brand-logo img { height: 64px; width: auto; }
html.cnib-high-contrast .brand-logo img { background: var(--cnib-white); padding: 0.4rem; border-radius: var(--radius); }

/* Chat messages: rendered answers (S4-h) + conversation controls (S4-k). */
.messages li { margin: 0 0 1rem; padding: 0.75rem 1rem; border: 2px solid var(--border); border-radius: var(--radius); }
.messages li.user { border-left: var(--header-rule) solid var(--cnib-yellow); }
.messages li .role { display: block; font-weight: 700; margin: 0 0 0.35rem; }
.messages .msg-body p, .messages .msg-body ul, .messages .msg-body ol { margin: 0 0 0.75rem; }
.messages .msg-body h3 { font-size: 1.125rem; margin: 0.75rem 0 0.35rem; }
.messages .msg-body blockquote { border-left: 4px solid var(--cnib-yellow); background: var(--cnib-yellow-soft); margin: 0.5rem 0; padding: 0.5rem 0.85rem; }
html.cnib-high-contrast .messages .msg-body blockquote { background: #1a1a00; color: var(--cnib-white); }
.messages .msg-body code { background: var(--cnib-yellow-soft); border: 1px solid var(--border); padding: 0.05em 0.35em; border-radius: 4px; }
.conv-list li { display: grid; grid-template-columns: 1fr auto auto; gap: 0.25rem; align-items: stretch; }
.conv-list li button.conv-act { width: auto; font-size: 0.875rem; padding: 0.4rem 0.6rem; }
/* S4-g feedback on an answer: same yellow/black buttons as the rest of the portal; the status line is announced to screen readers */
.feedback { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.75rem; padding-top: 0.5rem; border-top: 1px solid var(--border); font-size: 0.875rem; }
.feedback .fb-label { font-weight: 700; }
.feedback button.fb-act { width: auto; font-size: 0.875rem; padding: 0.4rem 0.6rem; }
.feedback .fb-done { font-weight: 700; }
/* S6-a scope chips: toggle buttons; pressed = black on yellow (also in high contrast) */
.scope { margin: 0 0 0.75rem; padding: 0.5rem 0.75rem 0.75rem; border: 1px solid var(--border); border-radius: var(--radius); }
.scope legend { font-weight: 700; padding: 0 0.25rem; }
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
button.chip { width: auto; min-height: var(--target); padding: 0.4rem 0.9rem; background: var(--bg); color: var(--fg); border: 2px solid var(--cnib-black); border-radius: 999px; font-size: 0.9375rem; }
button.chip[aria-pressed="true"] { background: var(--cnib-yellow); color: var(--cnib-black); }
html.cnib-high-contrast button.chip { background: var(--cnib-black); color: var(--cnib-yellow); border-color: var(--cnib-yellow); }
html.cnib-high-contrast button.chip[aria-pressed="true"] { background: var(--cnib-yellow); color: var(--cnib-black); }
.drew-from { font-size: 0.875rem; color: var(--cnib-muted); margin: 0.5rem 0 0; }
/* S6-b1 voice: press-to-talk toggle, status line, settings */
.voice { margin-top: 0.75rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.voice #talk[aria-pressed="true"] { background: var(--cnib-yellow); color: var(--cnib-black); }
.voice .help, .voice-prefs { flex-basis: 100%; }
.voice-prefs label { display: block; margin-top: 0.5rem; font-weight: 700; }
.voice-prefs select, .voice-prefs input[type="range"] { display: block; min-height: var(--target); margin-top: 0.25rem; max-width: 24rem; width: 100%; }
.voice-prefs button { margin-top: 0.75rem; }
.messages li.voice .role::after { content: " (spoken)"; font-weight: 400; }
/* S6-b3 compact layout: optional components collapsed; the composer and the talk button stay in view */
.menu, .scope { margin: 0 0 0.75rem; border: 1px solid var(--border); border-radius: var(--radius); padding: 0 0.75rem; }
.menu summary, .scope summary { cursor: pointer; padding: 0.6rem 0; font-weight: 700; min-height: var(--target); display: flex; align-items: center; }
.menu[open], .scope[open] { padding-bottom: 0.75rem; }
.menu section { margin-top: 0.75rem; }
.menu h2 { font-size: 1.125rem; margin: 0 0 0.5rem; }
.ask .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-top: 0.5rem; }
.chat-main { max-width: 72rem; }
/* S6-e "How Orion answered": the chain's steps while the turn runs, measured when it completes */
.messages .steps { list-style: none; border: 1px dashed var(--border); border-radius: var(--radius); padding: 0.5rem 0.75rem; margin: 0 0 1rem; font-size: 0.9375rem; }
.messages .steps summary { cursor: pointer; font-weight: 700; min-height: var(--target); display: flex; align-items: center; }
.messages .steps ol { margin: 0.25rem 0 0; padding-left: 1.5rem; }
.messages .steps li.step { margin: 0.2rem 0; }
.messages .steps li.step.pending { color: var(--cnib-muted); }
.messages .steps li.step.done .step-label::before, .messages .steps li.step.completed .step-label::before { content: "\2713 "; }
.messages .steps li.step.pending .step-label::before { content: "\2026 "; }
.messages .steps .step-detail { color: var(--cnib-muted); }

/* S7-d risk register: filters, sortable headings, one <tbody> per risk with an expandable detail row */
.risk-filters { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; align-items: flex-end; margin: 0 0 1rem; }
.risk-filters .field { margin: 0; min-width: 10rem; }
.risk-filters p { margin: 0; display: flex; align-items: center; gap: 0.75rem; }
#risk-table thead button.sort { background: transparent; color: inherit; border: 0; padding: 0.25rem 0; min-width: 0; font-weight: 700; text-align: left; cursor: pointer; text-decoration: underline dotted; }
#risk-table thead th[aria-sort="ascending"] button.sort::after { content: " \2191"; }
#risk-table thead th[aria-sort="descending"] button.sort::after { content: " \2193"; }
#risk-table td .button { padding: 0.35rem 0.7rem; margin: 0.15rem 0.15rem 0.15rem 0; }
#risk-table tr.risk-detail > td { background: var(--bg-alt, rgba(0, 0, 0, 0.03)); }
.risk-detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1rem 2rem; }
.risk-detail-grid h3 { margin: 0 0 0.35rem; font-size: 1rem; }
.risk-detail-grid ul, .risk-detail-grid ol { margin: 0; padding-left: 1.25rem; }
.risk-detail-grid li { margin: 0.2rem 0; }
.risk-prov { display: grid; grid-template-columns: max-content 1fr; gap: 0.2rem 0.75rem; margin: 0; }
.risk-prov dt { font-weight: 700; } .risk-prov dd { margin: 0; }
.risk-timeline time { color: var(--cnib-muted); margin-right: 0.35rem; }
.risk-comment textarea { width: 100%; max-width: 32rem; }
/* S7-c enumerated choices: tick lists and the live summary of a grant */
#grant-form fieldset, #exposure-form fieldset { border: 1px solid var(--border); border-radius: var(--radius); padding: 0.75rem 1rem; margin: 0 0 1rem; }
#grant-form legend { font-weight: 700; padding: 0 0.35rem; }
.summary-box { border-left: 4px solid var(--cnib-yellow); background: var(--bg-alt, rgba(0, 0, 0, 0.03)); padding: 0.6rem 0.9rem; font-weight: 700; }
/* S7-e reviews */
input.rv-note { max-width: 14rem; margin-right: 0.35rem; }
#roles-table td .button, #audit-table td { vertical-align: top; }
/* S7-f executive brief */
.exec-brief { border: 1px solid var(--border); border-radius: var(--radius); padding: 0.75rem 1rem; margin: 0 0 1.25rem; }
.exec-brief ul { list-style: none; margin: 0.5rem 0 0; padding: 0; }
.exec-brief li { padding: 0.35rem 0 0.35rem 0.9rem; border-left: 4px solid var(--border); margin: 0.25rem 0; }
.exec-brief li.urgent { border-left-color: var(--cnib-yellow); }
.exec-brief li.quiet { color: var(--cnib-muted); }
.summary-box.urgent { border-left-width: 10px; border-left-color: var(--cnib-black); }   /* urgency is in the words; colour never alone (CNIB standard) */
/* S8 U1 classroom: outline · materials · Orion beside the work */
.page-wide { max-width: none; }
/* owner 2026-09-24: the Width setting (Full / Medium / Narrow) did nothing in the classroom; the reading column honours the measure, the outline and the docked Orion keep their columns */
.page-wide .learn-main { max-width: var(--measure); }
.learn-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.learn-head h1 { margin-bottom: 0.25rem; } .learn-tools { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; padding-top: 0.5rem; }
.learn-layout { display: grid; grid-template-columns: 16rem minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.learn-layout.nav-collapsed { grid-template-columns: minmax(0, 1fr); } .learn-layout.nav-collapsed .learn-nav { display: none; }
.learn-layout.ideation-layout { grid-template-columns: minmax(0, 1fr); }   /* I-1 page: one column — the brief takes the width the width setting allows (owner 2026-10-07: at 1025px and up the brief sat in the classroom grid's 16rem first column) */
@media (max-width: 64rem) { .learn-layout { grid-template-columns: 1fr; } }
.learn-nav { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow-y: auto; border-right: 1px solid var(--border, #c8c8c8); padding-right: 0.75rem; }
.learn-nav ol { padding-left: 1rem; } .learn-nav li.current > .module-title { font-weight: 700; } .learn-nav a[aria-current="page"] { font-weight: 700; text-decoration: underline; }
.learn-main { min-width: 0; } .learn-main .material { border: 1px solid var(--border, #c8c8c8); border-radius: var(--radius, 4px); padding: 0.75rem 1rem; margin: 0 0 1rem; }
.learn-main .material h3 { margin-top: 0; } .learn-main pre { overflow-x: auto; background: var(--bg-alt, rgba(0, 0, 0, 0.03)); padding: 0.5rem 0.75rem; }
.learn-main table { width: 100%; border-collapse: collapse; } .learn-main th, .learn-main td { padding: 0.35rem 0.5rem; vertical-align: top; text-align: left; border-bottom: 1px solid var(--border, #c8c8c8); }
/* Orion, docked (the data-room pattern): fixed right on wide screens, a bottom sheet below 64rem; the body is padded so content never sits under it. */
.orion { position: fixed; top: 0; right: 0; bottom: 0; width: 26rem; max-width: 100vw; display: flex; flex-direction: column; background: var(--bg, #fff); color: var(--fg, var(--text, #111)); border-left: 3px solid var(--border, #c8c8c8); z-index: 900; overflow: hidden; }   /* --text: the room standard's name for the body colour (a bundle page) */
.orion[hidden] { display: none; } body.orion-docked { padding-right: 26rem; }
.orion__head { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 0.35rem 0.5rem; padding: 0.6rem 1rem; background: var(--cnib-black, #000); color: var(--cnib-white, #fff); border-bottom: 3px solid var(--cnib-yellow, #ffd200); }
.orion__h { margin: 0; padding-top: 0; font-size: 1.25rem; color: var(--cnib-yellow, #ffd200); } .orion__status { grid-column: 1 / -1; margin: 0; font-size: 0.875rem; color: var(--cnib-white, #fff); }
.orion__close { background: var(--cnib-white, #fff); color: var(--cnib-black, #000); }
.orion__body { flex: 1 1 0; min-height: 4rem; overflow-y: auto; overscroll-behavior: contain; padding: 0.75rem 1rem; } .orion__body .messages { max-height: none; }
@media (max-width: 64rem) { .orion { top: auto; left: 0; right: 0; width: auto; height: 45vh; border-left: 0; border-top: 3px solid var(--border, #c8c8c8); } body.orion-docked { padding-right: 0; padding-bottom: 45vh; } }
@media print { .orion, .learn-tools, .learn-nav { display: none !important; } body.orion-docked { padding: 0; } .learn-layout { grid-template-columns: 1fr; } }
.course-modules > li { margin: 0.5rem 0; }


.badge { display: inline-block; font-weight: 700; padding: 0.15rem 0.5rem; border: 2px solid var(--border, #c8c8c8); border-radius: var(--radius, 4px); margin: 0.25rem 0; } .badge-coming_soon { border-style: dashed; } .badge-open { border-color: var(--cnib-yellow, #ffd200); }

.consent-list { list-style: none; padding: 0; } .consent-list li { margin: 0 0 0.75rem; }

/* S8 U3-a: the checkpoint form + the learner's progress marks */
.checkpoint fieldset{border:0;padding:0;margin:0 0 .75rem}.checkpoint legend{font-weight:600;margin-bottom:.25rem}.checkpoint label{display:block;padding:.15rem 0}
.checkpoint-result{margin-top:.5rem}.checkpoint-result li.ok{color:var(--ok,#1b6b3a)}.checkpoint-result li.miss{color:var(--warn,#8a4b00)}
.badge.done{margin-left:.35rem}

/* S8 U3-b: the teacher's observation + the learner's consents */
.observe-result ul{margin:.5rem 0}.observe-result q{font-style:italic}.consents .consent-list li{margin-bottom:.6rem}.consents .button-secondary{margin-left:.5rem}

/* S8 U6: session replays */
.replay{margin:0 0 1rem}.replay iframe{width:100%;aspect-ratio:16/9;border:0;background:#000}

/* owner 2026-09-14: the welcome page */
.welcome-ask{display:flex;gap:.5rem;flex-wrap:wrap;margin:1rem 0}.welcome-ask input{flex:1 1 20rem;font-size:1.15rem;padding:.6rem .8rem}.welcome-examples{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}.welcome-example{border:1px solid var(--border,#888);background:transparent;color:inherit;border-radius:999px;padding:.35rem .8rem;cursor:pointer}

/* D-ORION-PRESENTATION-STANDARD (2026-09-14): the Orion tool in the accessibility bar, the input modes, the highlight block, Taller on the bottom sheet */
.a11y-bar .a11y-btn--orion { margin-left: auto; font-weight: 700; } .skip-link--orion[hidden] { display: none; }
.orion__modes { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin: 0.5rem 0; }
.orion__mode { border: 2px solid var(--border, #c8c8c8); background: transparent; color: inherit; border-radius: 999px; padding: 0.3rem 0.75rem; cursor: pointer; font: inherit; }
.orion__mode[aria-pressed="true"] { background: var(--cnib-black, #000); color: var(--cnib-yellow, #ffd200); border-color: var(--cnib-black, #000); }
.orion__highlight { border-left: 4px solid var(--cnib-yellow, #ffd200); padding: 0.4rem 0.75rem; margin: 0.5rem 0; background: var(--cnib-yellow-soft, #fff8d6); color: var(--fg, var(--text, #111)); }   /* --fill was never a portal token (a bundle page defines it as the yellow fill: white text on yellow in high contrast) */ .orion__highlight[hidden] { display: none; }
.orion__highlight blockquote { margin: 0.25rem 0; max-height: 8rem; overflow: auto; font-size: 0.9375rem; }
.orion__size { display: none; } #talk[hidden] { display: none; }
@media (max-width: 64rem) { .orion__size { display: inline-block; } .orion.orion--tall { height: 85vh; } body.orion-docked.orion-tall { padding-bottom: 85vh; } }

/* owner 2026-09-14: the profile indicator (always visible), breadcrumbs for depth, the account page */
.site-header .profile { margin-left: auto; align-self: center; padding: 0.35rem 0.8rem; border: 2px solid currentColor; border-radius: 999px; font-weight: 700; text-decoration: none; color: inherit; }
.site-header .profile[aria-current="page"] { background: var(--cnib-yellow, #ffd200); color: var(--cnib-black, #000); border-color: var(--cnib-yellow, #ffd200); }
.crumbs { padding: 0.5rem 1.5rem; border-bottom: 1px solid var(--border, #c8c8c8); font-size: 0.9375rem; }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; }
.crumbs li + li::before { content: "\203A"; margin-right: 0.5rem; opacity: 0.7; } .crumbs li[aria-current="page"] { font-weight: 700; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 1rem; } .kv dt { font-weight: 700; } .kv dd { margin: 0; }
.chips .chip-static { display: inline-block; border: 2px solid var(--border, #c8c8c8); border-radius: 999px; padding: 0.25rem 0.75rem; margin: 0 0.35rem 0.35rem 0; }

/* owner 2026-09-14: width as an accessibility setting (full 100% · medium 72rem · narrow 500px, responsive) */
:root[data-width="full"] { --measure: 100%; } :root[data-width="narrow"] { --measure: min(500px, 100%); }
:root[data-width="full"] .page { padding-left: 1.5rem; padding-right: 1.5rem; }
/* below 64rem (1024px) the primary navigation folds behind Menu, as the docked Orion moves to the bottom at the same width */
#nav-toggle { display: none; } #nav-toggle[hidden] { display: none; }
@media (max-width: 64rem) {
  #nav-toggle:not([hidden]) { display: inline-block; }
  .site-header nav#primary-nav { display: none; }
  .site-header nav#primary-nav.open { display: flex; flex-direction: column; flex-basis: 100%; gap: 0.25rem; padding-top: 0.5rem; }
  .site-header nav#primary-nav.open a { padding: 0.5rem 0; }
}

/* a transcript paragraph Orion brought into view */
#transcript p.tr-current { outline: 3px solid var(--cnib-yellow, #ffd200); outline-offset: 2px; background: var(--cnib-yellow-soft, #fff8d6); }
/* Forms: the CNIB field contract (static/cnib/forms.css, vendored from ux-design.cnib.ai) owns questions, groups, controls, errors and the
   submission panel. The portal adds only what the standard leaves to the page: a refused GROUP (the standard marks inputs), the "same as"
   helper inside a question, the review list, and a secondary button beside the contract's submit. */
.radio-group[aria-invalid="true"], .checkbox-group[aria-invalid="true"] { outline: 3px solid var(--cnib-black, #000); outline-offset: 4px; background: var(--cnib-yellow, #FFF200); }
.question-field .same-as { margin-bottom: 0.5rem; }
.field-contract .review { margin: 0.5rem 0 0.75rem; padding-left: 1.2rem; } .field-contract .review li { margin-bottom: 0.5rem; }
.form-actions .button-secondary { min-height: 44px; } .form-actions [role="status"] { flex-basis: 100%; }
.field-contract h3 { margin-top: 0; }
.link-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }   /* a row of links or buttons that is NOT a form (downloads, back links, open/close) */
html.cnib-high-contrast .radio-group[aria-invalid="true"], html.cnib-high-contrast .checkbox-group[aria-invalid="true"] { outline-color: var(--cnib-white); }
.programme-brief dl.brief { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .5rem 1rem; margin: .5rem 0; } .programme-brief dt { font-weight: 700; } .programme-brief dd { margin: 0; }
/* C-1 Chat shell: sidebar of conversations + the composer at the bottom; single column on narrow screens (the list scrolls, never a dropdown) */
.chat-shell { display: grid; grid-template-columns: minmax(20rem, 26rem) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.conv-side { border: 1px solid var(--border); border-radius: var(--radius); padding: 0.5rem 1rem 0.75rem; max-height: calc(100vh - 12rem); overflow-y: auto; position: sticky; top: 1rem; }
/* C-1b: the list collapses to a sliver (the toggle alone, its label turned); open, the column is wide enough for titles */
.chat-shell--collapsed { grid-template-columns: 3.25rem minmax(0, 1fr); } .chat-shell--collapsed .conv-side { padding: 0.5rem 0.25rem; overflow: hidden; } .chat-shell--collapsed .conv-side__body { display: none; }
.conv-toggle { min-width: 0; padding: 0.4rem 0.6rem; font-size: 0.875rem; } .conv-toggle__closed { display: none; }
.chat-shell--collapsed .conv-toggle { writing-mode: vertical-rl; transform: rotate(180deg); padding: 0.8rem 0.3rem; } .chat-shell--collapsed .conv-toggle__open { display: none; } .chat-shell--collapsed .conv-toggle__closed { display: inline; }
.conv-side__links { margin: 0.25rem 0 0.5rem; font-size: 0.9rem; }
/* C-1b: compact actions below the label; the open conversation's own actions above the messages */
.conv-list li { display: block; } .conv-list li button.conv-open { width: 100%; margin-bottom: 0.15rem; } .conv-when { display: block; font-size: 0.8rem; font-weight: 400; color: var(--cnib-muted, #444); }
.conv-actions { display: flex; gap: 0.35rem; flex-wrap: wrap; margin: 0 0 0.6rem; } .conv-actions .conv-mini { min-height: 1.75rem; min-width: 0; padding: 0.1rem 0.5rem; font-size: 0.8rem; font-weight: 400; border-width: 1px; background: var(--bg); color: var(--fg); }
.conv-current { display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; margin: 0 0 0.75rem; padding-bottom: 0.4rem; border-bottom: 1px solid var(--border); } .conv-current__title { font-weight: 700; } .conv-current .conv-actions { margin: 0; }
/* C-1b: the Full / Medium / Narrow view governs the conversation too: in the shell the column, not a character cap, bounds the messages and the composer */
.chat-main--shell .messages li { max-width: none; } .chat-main--shell .ask textarea { width: 100%; max-width: none; }
:root[data-width="full"] .chat-shell { grid-template-columns: minmax(20rem, 28rem) minmax(0, 1fr); } :root[data-width="full"] .chat-shell--collapsed { grid-template-columns: 3.25rem minmax(0, 1fr); }
:root[data-width="narrow"] .chat-shell { grid-template-columns: 1fr; } :root[data-width="narrow"] .conv-side { position: static; max-height: 40vh; }
.conv-side h2 { font-size: 1.1rem; margin-top: 0; } .conv-side h3 { font-size: 0.95rem; margin: 0.75rem 0 0.25rem; }
.conv-list li.conv-group { display: block; } .conv-list li.conv-group h4 { margin: 0.6rem 0 0.2rem; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted, #444); }
.conv-list--pinned:empty::after { content: "Pin a conversation to keep it here."; font-size: 0.875rem; color: var(--muted, #444); }
.chat-main--shell { display: flex; flex-direction: column; min-height: 60vh; } .chat-main--shell .messages { flex: 1 1 auto; }
.ask--composer { position: sticky; bottom: 0; background: var(--bg); padding-top: 0.5rem; border-top: 1px solid var(--border); }
.tools-menu { display: inline-block; position: relative; } .tools-menu summary { list-style: none; display: inline-block; } .tools-menu summary::-webkit-details-marker { display: none; }
.tools-menu[open] > .tools-list, .tools-menu[open] > .help { display: block; } .tools-list { margin: 0.5rem 0 0; padding-left: 1rem; max-width: 36rem; }
.settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1.5rem; } .settings-grid section { border: 1px solid var(--border); border-radius: var(--radius); padding: 0.75rem 1rem; }
@media (max-width: 48rem) { .chat-shell { grid-template-columns: 1fr; } .conv-side { position: static; max-height: 40vh; } }
@media print { .conv-side, .ask--composer { display: none !important; } }
.pref-prompt { white-space: pre-wrap; border: 1px solid var(--border); border-radius: var(--radius); padding: 0.6rem 0.8rem; font: inherit; max-width: 60ch; } .steps li { margin-bottom: 0.75rem; }
.automation .prompt { white-space: pre-wrap; } .automation-answer { border-left: var(--header-rule) solid var(--cnib-yellow); padding: 0.5rem 1rem; margin-top: 0.5rem; }
.idea-brief dl.brief { display: grid; gap: .5rem 1rem; margin: .5rem 0; } .idea-brief dt { font-weight: 700; } .idea-brief dd { margin: 0 0 .5rem; }
/* R-1: drafts and retired rooms sit apart from the published list, collapsed and visibly different */
.drafts-list { margin: 1.5rem 0; padding: 0.5rem 1rem; border: 2px dashed var(--border); border-radius: var(--radius); } .drafts-list summary { cursor: pointer; font-weight: 700; } .card--draft { border-style: dashed; } .collab-rooms { margin-top: 1.5rem; }
/* the course page as sections (owner 2026-09-21): collapsed by default except the modules; a staff gate that is visibly a different thing */
.on-this-page ul { list-style: none; padding: 0; margin: 0.5rem 0 1rem; display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; } .on-this-page a { font-weight: 700; }
.course-section { border: 1px solid var(--border); border-radius: var(--radius); margin: 0 0 0.75rem; } .course-section summary { cursor: pointer; padding: 0.6rem 1rem; min-height: var(--target); display: flex; align-items: center; }
.course-section summary h2 { margin: 0; font-size: 1.15rem; display: inline; } .course-section__body { padding: 0 1rem 0.75rem; } .course-section__body h3 { margin-top: 1rem; }
.admin-gate { border: 2px dashed var(--border); border-radius: var(--radius); padding: 0.6rem 1rem; margin: 0 0 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.admin-gate__label { font-weight: 700; background: var(--cnib-black); color: var(--cnib-white); padding: 0.15rem 0.5rem; border-radius: var(--radius); }
/* University landing as cards: one tab stop per card; the card shows its focus; meta as a compact list */
.course-cards { list-style: none; padding: 0; margin: 1rem 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); gap: 1rem; }
.course-card__inner { border: 2px solid var(--border); border-radius: var(--radius); padding: 0.9rem 1rem 1rem; height: 100%; display: flex; flex-direction: column; gap: 0.5rem; }
.course-card__inner:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; background-color: var(--focus-fill); }
.course-card__inner h2 { margin: 0; font-size: 1.2rem; } .course-card__inner h2 a:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.course-card__meta { display: grid; grid-template-columns: max-content 1fr; gap: 0.15rem 0.75rem; margin: 0; font-size: 0.95rem; } .course-card__meta div { display: contents; } .course-card__meta dt { font-weight: 700; } .course-card__meta dd { margin: 0; }
.course-card__actions { margin: auto 0 0; display: flex; flex-wrap: wrap; gap: 0.5rem; } .course-card__standing { margin: 0; }
/* F-MAIN-FOCUS-FILL (owner 2026-09-21): in-place navigation and the skip link move focus to main#main[tabindex=-1] (the standard: focus must move, not
   only scroll). The CNIB chrome paints every [tabindex]:focus-visible with the yellow focus fill, so the WHOLE page went yellow until the next click.
   A landmark is not a control: it takes focus silently, with no ring and no fill. The same for the docked Orion aside when it is a focus target. */
#main:focus, #main:focus-visible, aside#orion:focus, aside#orion:focus-visible { outline: none; background-color: transparent; box-shadow: none; }


.conv-scope { margin: 0 0 0.5rem; font-size: 0.9rem; }   /* CS-1: the classroom's conversation list scope toggle */

/* V-4: the transcript is keyboard-browsable (Alt+T, arrows); a message that is still being spoken says so */
.messages li:focus { outline: 3px solid var(--cnib-yellow); outline-offset: 2px; }
.messages:focus { outline: 3px solid var(--cnib-yellow); outline-offset: 2px; }
.messages li.continuing .msg-body::after { content: " (still listening\2026)"; font-style: italic; opacity: 0.85; }
/* D-BUSY-BUTTON (owner 2026-09-24): a pressed button carries the process; inert while it runs, its text the state; focus stays on it */
button[aria-disabled="true"], .btn-submit[aria-disabled="true"] { opacity: 0.7; cursor: progress; }
button[aria-disabled="true"]:focus-visible { outline-offset: 2px; }
/* One intent, one region (owner 2026-09-24; orion_portal/regions.py; 2026-10-06 every admin page adopts it). The rhythm is the standard's
   own (ux-design.cnib.ai chrome.css + components.css): a region is a .component-block — 3rem below, 2rem of air above a 2px dotted rule,
   none after the last; the "On this page" list is the standard's .toc box (3px rule, soft-yellow fill, a small h2 and a numbered list). */
.page-regions > section.component-block, .page-regions > .component-block { margin: 0 0 3rem; padding-bottom: 2rem; border-bottom: 2px dotted var(--border); }
.page-regions > .component-block:last-child { border-bottom: none; }
.page-regions > section > h2 { margin-top: 0; }
.page-regions > section > h3, .page-regions > section > form.field-contract + h3 { margin-top: 2.25rem; padding-top: 1rem; border-top: 1px solid var(--border); }   /* a sub-intent inside a region (a room's boundary, brief, collaborators, material): its own thin rule */
.page-regions section > form.field-contract + form.field-contract, .page-regions section > .field-contract + .field-contract { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--border); }
.page-regions details.publishing { margin: 0.5rem 0; } .page-regions details.publishing > summary { font-weight: 700; cursor: pointer; padding: 0.5rem 0; min-height: 44px; display: flex; align-items: center; }
.page-regions details.publishing > summary:focus-visible { outline: 3px solid var(--focus, #000); outline-offset: 2px; }
nav.toc { border: 3px solid var(--border); border-radius: var(--radius); padding: 1rem 1.25rem; margin: 0 0 2rem; background: var(--cnib-yellow-soft); }
nav.toc h2 { font-size: 1.125rem; margin: 0 0 0.5rem; } nav.toc ol { margin: 0; padding-left: 1.25rem; } nav.toc li { margin: 0.25rem 0; } nav.toc a { font-weight: 700; }
html.cnib-high-contrast nav.toc { background: var(--cnib-black); color: var(--cnib-white); border-color: var(--cnib-yellow); } html.cnib-high-contrast nav.toc a { color: var(--cnib-yellow); }

/* D-QUIZ-NATIVE-CHOICE-KEYS (2026-09-29): a question is a fieldset with a legend (the proven survey standard's grouping); the browser's
   fieldset chrome is reset so the field contract's own classes (forms.css) paint it exactly as before. */
/* D-QUIZ-NATIVE-CHOICE-KEYS renders a question as fieldset + legend for the group name; the CARD is the standard's own (.question-item in forms.css:
   2px rule, 12px radius, 1.25rem padding, 1.5rem below). Owner 2026-10-06 ("the [Q#] title has no margin, the input runs into the next title; it
   looks amateur"): the earlier reset here wiped that card and flattened the header. Only the browser's fieldset chrome is neutralised now: the
   legend is floated out of the border notch and lays out as the standard's flex header; what follows clears it. */
fieldset.question-item { min-width: 0; display: flow-root; }
legend.question-header { float: left; width: 100%; padding: 0; }
legend.question-header + * { clear: both; }

/* Admin experience (owner 2026-10-06, D-ADMIN-SEVEN-AREAS): an area's strip and its register pages carry the data-room standard's own table polish
   (rooms/aatec/chrome/app.css: .filter, .count, .scroll, table.data), fed by the graph page by page rather than by CSS over every row. */
.area-nav { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; padding: 0.5rem 0; margin: 0 0 1.5rem; border-bottom: 3px solid var(--cnib-yellow, #ffd200); }
.area-nav a { text-decoration: none; padding: 0.25rem 0; border-bottom: 3px solid transparent; font-weight: 700; }
.area-nav a[aria-current="page"] { border-bottom-color: currentColor; }
.area-nav a:focus-visible { outline: 3px solid var(--focus, #000); outline-offset: 2px; }
.area-actions { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; margin: 0 0 1rem; }
.register { margin-block: 1rem; }
.register .filters { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; align-items: flex-end; }
.register fieldset.filter { border: 0; margin: 0 0 0.5rem; padding: 0; min-width: 0; }
.register .filter__legend { padding: 0; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; margin-bottom: 0.3rem; }
.register .filter__opts { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.register .filter__opt { display: inline-flex; }
.register .filter input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.register .filter label { display: inline-flex; align-items: center; gap: 0.4rem; min-height: var(--target, 44px); padding: 0.25rem 0.85rem; border: 2px solid var(--border); border-radius: 999px; cursor: pointer; font-weight: 700; }
.register .filter label:hover { background: var(--cnib-yellow-soft); }
.register .filter input:checked + label { background: var(--cnib-yellow); color: var(--cnib-black); box-shadow: inset 0 0 0 1px var(--border); }
.register .filter input:focus-visible + label { outline: 3px solid var(--focus, #000); outline-offset: 2px; }
.register .filter__n { font-variant-numeric: tabular-nums; font-size: 0.8em; padding: 0 0.15rem; }
.register .filters .button-secondary { min-height: var(--target, 44px); }
.register .count { margin: 0.25rem 0 0.75rem; font-size: 0.875rem; font-weight: 700; }
.register .scroll { overflow-x: auto; border: 2px solid var(--border); border-radius: var(--radius); background: var(--bg); }
.register .scroll:focus-visible { outline: 3px solid var(--focus, #000); outline-offset: 2px; }
.register table.data { border-collapse: collapse; width: 100%; font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.register table.data caption { caption-side: top; text-align: left; font-weight: 700; padding: 0.5rem 0.7rem; }
.register table.data th, .register table.data td { text-align: left; vertical-align: top; padding: 0.5rem 0.7rem; border: 1px solid var(--border); }
/* F-REGISTER-HEADER-INVERTED-THE-MASTER (owner 2026-10-14): layout only. The colours are the master's (components.css table.data thead th: black on
   yellow, and its high-contrast rule); this rule once set yellow on black, which inverted the standard and, inside a row's detail, became yellow on
   the master's pale stripe. */
.register table.data thead th { position: sticky; top: 0; z-index: 1; font-weight: 700; font-size: 0.8125rem; white-space: nowrap; }
.register table.data thead th a { color: inherit; text-decoration: none; } .register table.data thead th a::after { content: " \2195"; opacity: 0.6; }
.register table.data thead th[aria-sort="ascending"] a::after { content: " \2191"; opacity: 1; } .register table.data thead th[aria-sort="descending"] a::after { content: " \2193"; opacity: 1; }
.register table.data tbody.row:nth-child(even) > tr:first-child td, .register table.data tbody.row:nth-child(even) > tr:first-child th { background-color: var(--cnib-yellow-soft); }
.register tr.detail td { background: var(--bg); padding: 0.75rem 1rem; }
.register .emptyrow td { text-align: center; font-weight: 700; padding-block: 2rem; }
.pager { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; margin: 0.75rem 0 1.5rem; font-weight: 700; }
.pager a, .pager span[aria-current] { display: inline-flex; align-items: center; min-height: var(--target, 44px); padding: 0.25rem 0.85rem; border: 2px solid var(--border); border-radius: 999px; text-decoration: none; }
.pager span[aria-current] { background: var(--cnib-yellow); color: var(--cnib-black); }
html.cnib-high-contrast .register .filter input:checked + label, html.cnib-high-contrast .pager span[aria-current] { background: var(--cnib-yellow); color: var(--cnib-black); }
html.cnib-high-contrast .register table.data tbody.row:nth-child(even) > tr:first-child td, html.cnib-high-contrast .register table.data tbody.row:nth-child(even) > tr:first-child th { background-color: var(--cnib-black); }