/* ===========================================================================
   IAXOV Task Space — stylesheet
   ---------------------------------------------------------------------------
   Interaction law: the CNIB Orion Accessible Experience Standard (skip link first,
   sticky accessibility tools, real documents, 44px targets, 3px focus ring plus
   fill, no meaning carried by colour alone, rem type, reflow to 400%).
   Visual law: IAXOV. Navy chrome, brand-blue rule, gold as the selected/attention
   fill (the role CNIB yellow plays), body text near-black on white.
   Constraints:
     - body text >= 7:1 (WCAG AAA), UI components and focus indicators >= 3:1
     - no inline style attributes anywhere (the CSP forbids them)
     - type in rem so browser zoom, OS font size and the text-size control stack
   ======================================================================== */

/* --- typeface ----------------------------------------------------------- */
@font-face { font-family: "Atkinson Hyperlegible"; src: url("/assets/fonts/AtkinsonHyperlegible-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("/assets/fonts/AtkinsonHyperlegible-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("/assets/fonts/AtkinsonHyperlegible-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("/assets/fonts/AtkinsonHyperlegible-BoldItalic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; }

/* --- tokens ------------------------------------------------------------- */
:root {
  /* Fixed brand values (chrome stays navy in both modes) */
  --ix-navy: #0A0A0F;
  --ix-navy-2: #14141E;
  --ix-blue: #1B75BC;        /* 4.9:1 on white, 4.1:1 on navy: rules, rings, non-text accents */
  --ix-blue-deep: #0F4C7D;   /* 8.9:1 on white: link text, eyebrow text */
  --ix-blue-tint: #E3F0FA;   /* soft fill; navy text on it is 18:1 */
  --ix-blue-hc: #7CC4F8;     /* 11:1 on black: headings and links in high contrast */
  --ix-gold: #D4AF37;        /* selected / attention fill; navy text on it is 10:1 */
  --ix-white: #FFFFFF;

  /* Theme tokens (light) */
  --bg: #FFFFFF;
  --text: #0A0A0F;
  --heading: #0A0A0F;
  --muted: #3A3A4A;          /* 11:1 on white. Secondary text only. */
  --link: #0F4C7D;
  --soft: #E3F0FA;
  --fill: #D4AF37;
  --on-fill: #0A0A0F;
  --inverse: #0A0A0F;
  --on-inverse: #FFFFFF;
  --accent: #1B75BC;
  --border: #0A0A0F;
  --focus: #1B75BC;
  --focus-fill: #E3F0FA;
  --on-focus-fill: #0A0A0F;
  --btn: #0A0A0F;
  --on-btn: #FFFFFF;
  --btn-hover: #0F4C7D;
  --error-fill: #D4AF37;     /* errors are gold fill + navy text + the word "Error", never red alone */
  --on-error-fill: #0A0A0F;

  --radius: 8px;
  --wrap: 72rem;
  --tap: 2.75rem;            /* 44px */
  --header-rule: 6px;
  --font: "Atkinson Hyperlegible", Arial, Helvetica, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* High contrast: white and light blue on black, gold for the selected fill.
   An explicit choice (data-contrast) wins; otherwise an OS dark scheme maps here. */
@media (prefers-color-scheme: dark) {
  :root:not([data-contrast="normal"]) {
    --bg: #000000; --text: #FFFFFF; --heading: #7CC4F8; --muted: #7CC4F8; --link: #FFFFFF;
    --soft: #0B1A26; --fill: #D4AF37; --on-fill: #000000; --inverse: #000000; --on-inverse: #7CC4F8;
    --accent: #7CC4F8; --border: #FFFFFF; --focus: #D4AF37; --focus-fill: #000000; --on-focus-fill: #FFFFFF;
    --btn: #7CC4F8; --on-btn: #000000; --btn-hover: #D4AF37; --error-fill: #D4AF37; --on-error-fill: #000000;
  }
}
:root[data-contrast="high"] {
  --bg: #000000; --text: #FFFFFF; --heading: #7CC4F8; --muted: #7CC4F8; --link: #FFFFFF;
  --soft: #0B1A26; --fill: #D4AF37; --on-fill: #000000; --inverse: #000000; --on-inverse: #7CC4F8;
  --accent: #7CC4F8; --border: #FFFFFF; --focus: #D4AF37; --focus-fill: #000000; --on-focus-fill: #FFFFFF;
  --btn: #7CC4F8; --on-btn: #000000; --btn-hover: #D4AF37; --error-fill: #D4AF37; --on-error-fill: #000000;
}

/* --- base --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 100%;               /* inherit the reader's browser/OS default */
  scroll-behavior: smooth;
  scroll-padding-top: 4.5rem;    /* anchors land below the sticky tools bar */
  background: var(--bg);
}
html[data-scale="1"] { font-size: 112.5%; }
html[data-scale="2"] { font-size: 125%; }
html[data-scale="3"] { font-size: 150%; }
html[data-scale="4"] { font-size: 175%; }
html[data-scale="5"] { font-size: 200%; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  text-underline-offset: 3px;
}
img { max-width: 100%; height: auto; }
button, input, select, textarea { font-family: inherit; font-size: inherit; line-height: inherit; }

h1, h2, h3, h4 { font-family: var(--font); font-weight: 700; line-height: 1.2; color: var(--heading); margin: 0 0 0.75rem; text-wrap: balance; }
h1 { font-size: clamp(1.75rem, 3vw, 2.5rem); }
h2 { font-size: 1.5rem; padding-top: 0.5rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.0625rem; }
p { margin: 0 0 1rem; }
ul, ol { margin: 0 0 1rem 1.25rem; padding: 0; }
li { margin-bottom: 0.35em; }
dl { margin: 0 0 1rem; }
dt { font-weight: 700; }
dd { margin: 0 0 0.5rem; }
blockquote { margin: 0.75rem 0 1rem; padding: 0.5rem 1rem; border-left: 4px solid var(--accent); background: var(--soft); }
hr { border: 0; border-top: 2px solid var(--border); margin: 2rem 0; }
strong { font-weight: 700; }

a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible,
summary:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  background: var(--focus-fill);
  color: var(--on-focus-fill);
}
/* Main is a programmatic landmark, not a control. */
#main:focus { outline: none; background: transparent; }

code, kbd { font-family: var(--mono); font-size: 0.9em; }
code { background: var(--soft); border: 1px solid var(--border); padding: 0.05em 0.35em; border-radius: 4px; }
kbd { display: inline-block; background: var(--bg); color: var(--text); border: 2px solid var(--border); border-bottom-width: 3px; border-radius: 4px; padding: 0.05rem 0.4rem; line-height: 1.2; }

/* Visually hidden but available to assistive technology. */
.vh, .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* --- skip link (first control on every page) ----------------------------- */
.skip-link {
  position: absolute; top: -100px; left: 0; z-index: 10000;
  background: var(--ix-gold); color: var(--ix-navy);
  padding: 0.75em 1.5em; font-weight: 700; text-decoration: none; min-height: var(--tap);
  border: 3px solid var(--ix-navy);
}
.skip-link:focus { top: 0; outline: 3px solid var(--ix-navy); outline-offset: 2px; background: var(--ix-gold); color: var(--ix-navy); }
.skip-link--guide:focus { left: auto; right: 0; }

/* --- confidentiality banner --------------------------------------------- */
.classification {
  background: var(--ix-gold); color: var(--ix-navy);
  border-bottom: 3px solid var(--ix-navy);
}
.classification__text {
  max-width: var(--wrap); margin: 0 auto; padding: 0.5rem 1rem;
  font-weight: 700; font-size: 0.9375rem; line-height: 1.4;
}

/* --- accessibility tools bar --------------------------------------------- */
.a11y-bar {
  position: sticky; top: 0; z-index: 1000;
  display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center;
  background: var(--ix-navy); color: var(--ix-white);
  padding: 0.5rem 0.75rem; border-bottom: 3px solid var(--ix-blue);
}
.a11y-bar[hidden] { display: none; }
.a11y-btn {
  background: transparent; color: var(--ix-white);
  border: 2px solid var(--ix-white); border-radius: 6px;
  padding: 0.4rem 0.75rem; min-height: var(--tap); min-width: var(--tap);
  font-weight: 700; cursor: pointer; line-height: 1.2;
}
.a11y-btn:hover { background: var(--ix-gold); color: var(--ix-navy); border-color: var(--ix-gold); }
.a11y-btn:focus-visible { outline: 3px solid var(--ix-gold); outline-offset: 2px; background: var(--ix-gold); color: var(--ix-navy); }
.a11y-btn[aria-pressed="true"], .a11y-btn[aria-expanded="true"] { background: var(--ix-gold); color: var(--ix-navy); border-color: var(--ix-gold); }
.a11y-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.a11y-btn:disabled:hover { background: transparent; color: var(--ix-white); border-color: var(--ix-white); }
.a11y-size { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.15rem 0.5rem; border: 2px solid var(--ix-white); border-radius: 6px; }
.a11y-size .a11y-btn { border-color: transparent; }
.a11y-size__label { font-size: 0.875rem; margin-right: 0.25rem; font-weight: 700; }
.a11y-size__val { font-variant-numeric: tabular-nums; min-width: 3.6em; text-align: center; font-weight: 700; }

.a11y-panel { max-width: var(--wrap); margin: 0 auto; padding: 1.25rem 1.5rem; background: var(--bg); color: var(--text); border: 3px solid var(--border); border-top: none; }
.a11y-panel[hidden] { display: none; }
.a11y-panel h2 { font-size: 1.25rem; padding-top: 0; }
.a11y-shortcut-list { display: grid; grid-template-columns: minmax(10rem, max-content) 1fr; gap: 0.5rem 1.25rem; margin: 0.75rem 0 1rem; }
.a11y-shortcut-list dt { font-weight: 700; }
.a11y-shortcut-list dd { margin: 0; }

/* --- site header and primary nav ---------------------------------------- */
.site-header {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.75rem 1.5rem;
  padding: 0.85rem 1.5rem;
  background: var(--ix-navy); color: var(--ix-white);
  border-bottom: var(--header-rule) solid var(--ix-blue);
}
.brand-link { display: inline-flex; align-items: center; gap: 0.75rem; color: var(--ix-white); text-decoration: none; min-height: var(--tap); }
.brand-link:focus-visible { outline: 3px solid var(--ix-gold); outline-offset: 4px; background: transparent; color: var(--ix-white); }
.brand-logo { width: 2.75rem; height: 2.75rem; }
.brand-product { font-weight: 700; font-size: 1.25rem; letter-spacing: 0.02em; }

.site-header nav[aria-label="Primary"] { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.site-header nav[aria-label="Primary"] a {
  color: var(--ix-white); text-decoration: none; padding: 0.5rem 0.7rem; min-height: var(--tap);
  display: inline-flex; align-items: center; font-weight: 700; border-bottom: 3px solid transparent; border-radius: 4px 4px 0 0;
}
.site-header nav[aria-label="Primary"] a:hover,
.site-header nav[aria-label="Primary"] a:focus-visible { background: var(--ix-gold); color: var(--ix-navy); outline: none; }
.site-header nav[aria-label="Primary"] a[aria-current="page"] { background: var(--ix-gold); color: var(--ix-navy); border-bottom-color: var(--ix-white); }

.account { display: flex; align-items: center; gap: 0.75rem; margin: 0; flex-wrap: wrap; }
.account__who { font-size: 0.9375rem; }

/* --- page frame ---------------------------------------------------------- */
.page { max-width: var(--wrap); margin: 0 auto; padding: 2rem 1.5rem 4rem; }
.page-head { margin-bottom: 1.5rem; }
.eyebrow { display: inline-block; background: var(--inverse); color: var(--on-inverse); font-weight: 700; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.25rem 0.75rem; margin: 0 0 0.75rem; }
.lead { font-size: 1.125rem; max-width: 48rem; }
.measure { max-width: 48rem; }

.toc { border: 3px solid var(--border); border-radius: var(--radius); padding: 1rem 1.25rem; margin: 0 0 2rem; background: var(--soft); }
.toc__h { font-size: 1.125rem; padding-top: 0; }
.toc__list { margin-bottom: 0; }

/* --- footer -------------------------------------------------------------- */
.site-footer { max-width: var(--wrap); margin: 0 auto; padding: 1.5rem; border-top: 4px solid var(--ix-blue); color: var(--muted); font-size: 0.9375rem; }
.site-footer p { margin: 0 0 0.5rem; }
.site-footer a { color: var(--link); }
.footer__class { font-weight: 700; color: var(--text); }
.footer__links { list-style: none; margin: 0.25rem 0 0.75rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; }
.footer__links a { display: inline-block; padding: 0.4rem 0; min-height: var(--tap); }

/* --- buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  background: var(--btn); color: var(--on-btn);
  border: 2px solid var(--btn); border-radius: 6px;
  padding: 0.55rem 1.1rem; min-height: var(--tap); min-width: var(--tap);
  font-weight: 700; text-decoration: none; cursor: pointer; line-height: 1.2;
}
.btn:hover { background: var(--btn-hover); border-color: var(--btn-hover); color: var(--on-btn); }
.btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; background: var(--btn); color: var(--on-btn); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn--secondary { background: var(--bg); color: var(--text); border-color: var(--border); }
.btn--secondary:hover { background: var(--soft); color: var(--text); border-color: var(--border); }
.btn--secondary:focus-visible { background: var(--focus-fill); color: var(--on-focus-fill); }
.btn--ghost { background: transparent; color: var(--ix-white); border-color: var(--ix-white); }
.btn--ghost:hover { background: var(--ix-gold); color: var(--ix-navy); border-color: var(--ix-gold); }
.btn--ghost:focus-visible { outline-color: var(--ix-gold); background: var(--ix-gold); color: var(--ix-navy); }
.btn--small { min-height: 2.75rem; padding: 0.35rem 0.8rem; font-size: 0.9375rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin: 1rem 0; }

/* --- forms --------------------------------------------------------------- */
.field { margin: 0 0 1.5rem; max-width: 48rem; }
.field__label, .field legend { display: block; font-weight: 700; margin-bottom: 0.35rem; }
.field__help { display: block; color: var(--muted); font-size: 0.9375rem; margin-bottom: 0.5rem; }
.field__req { font-weight: 700; }
.input, .select, .textarea,
input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], input[type="date"], input[type="search"], select, textarea {
  display: block; width: 100%; max-width: 100%;
  background: var(--bg); color: var(--text);
  border: 2px solid var(--border); border-radius: 6px;
  padding: 0.6rem 0.75rem; min-height: var(--tap);
}
textarea { min-height: 7rem; resize: vertical; }
input[aria-invalid="true"], textarea[aria-invalid="true"], select[aria-invalid="true"] { border-width: 3px; border-color: var(--accent); }
.field-error { display: block; margin-top: 0.4rem; padding: 0.4rem 0.75rem; background: var(--error-fill); color: var(--on-error-fill); border: 2px solid var(--border); border-radius: 4px; font-weight: 700; }
.field-error[hidden] { display: none; }
.field-status { display: inline-block; margin-left: 0.5rem; font-size: 0.9375rem; color: var(--muted); font-weight: 700; }
fieldset { border: 2px solid var(--border); border-radius: var(--radius); padding: 1rem 1.25rem; margin: 0 0 1.5rem; }
legend { padding: 0 0.5rem; }
.choices { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.choice { display: inline-flex; align-items: center; gap: 0.6rem; min-height: var(--tap); padding: 0.4rem 0.9rem 0.4rem 0.6rem; border: 2px solid var(--border); border-radius: 6px; cursor: pointer; background: var(--bg); color: var(--text); }
.choice input { width: 1.5rem; height: 1.5rem; margin: 0; accent-color: var(--ix-blue-deep); }
.choice:has(input:checked) { background: var(--fill); color: var(--on-fill); border-width: 3px; }
.choice:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.form-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin-top: 1.5rem; }
.form-summary { border: 3px solid var(--border); border-left: 10px solid var(--accent); border-radius: var(--radius); padding: 1rem 1.25rem; margin: 0 0 1.5rem; background: var(--soft); }
.form-summary h2 { padding-top: 0; font-size: 1.25rem; }

/* --- tables -------------------------------------------------------------- */
/* position: relative keeps visually-hidden text inside the scrolling box instead of the viewport */
.table-wrap { overflow-x: auto; margin: 0.75rem 0 1.5rem; position: relative; }
table.data { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
table.data caption { text-align: left; font-weight: 700; padding: 0.35rem 0; color: var(--text); }
table.data th, table.data td { border: 1px solid var(--border); padding: 0.5rem 0.7rem; text-align: left; vertical-align: top; }
table.data thead th { background: var(--fill); color: var(--on-fill); font-weight: 700; }
table.data tbody th[scope="row"] { font-weight: 700; }
table.data tbody tr:nth-child(even) td, table.data tbody tr:nth-child(even) th { background: var(--soft); }
table.data td.actions { white-space: nowrap; }

/* --- cards, notes, callouts ---------------------------------------------- */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; margin: 1.5rem 0 2rem; }
.card { border: 3px solid var(--border); border-radius: var(--radius); padding: 1.25rem 1.35rem; background: var(--bg); color: var(--text); }
.card h2, .card h3 { padding-top: 0; margin-top: 0; font-size: 1.25rem; }
.card a { font-weight: 700; }
.note { border-left: 6px solid var(--accent); background: var(--soft); padding: 0.85rem 1.1rem; margin: 0.75rem 0 1.5rem; color: var(--text); }
.note--attention { border-left-color: var(--ix-navy); background: var(--fill); color: var(--on-fill); border: 3px solid var(--ix-navy); border-left-width: 10px; }
.note .kicker, .kicker { display: block; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.75rem; margin-bottom: 0.35rem; }
.note p:last-child { margin-bottom: 0; }
.do-dont { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1rem 0 2rem; }
.do, .dont { border: 3px solid var(--border); border-radius: var(--radius); padding: 1rem 1.15rem; }
.do { background: var(--fill); color: var(--on-fill); }
.dont { background: var(--inverse); color: var(--on-inverse); }
.do h3, .dont h3 { margin-top: 0; padding-top: 0; color: inherit; }
.do ul, .dont ul { margin-bottom: 0; }
.pill { display: inline-block; font-weight: 700; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.15rem 0.55rem; border-radius: 999px; border: 2px solid var(--border); background: var(--bg); color: var(--text); }
.pill--fill { background: var(--fill); color: var(--on-fill); }
.pill--inverse { background: var(--inverse); color: var(--on-inverse); }
details.disclosure { border: 2px solid var(--border); border-radius: var(--radius); padding: 0 1rem; margin: 0 0 1rem; }
details.disclosure summary { cursor: pointer; font-weight: 700; padding: 0.75rem 0; min-height: var(--tap); list-style-position: inside; }
details.disclosure[open] summary { border-bottom: 2px solid var(--border); margin-bottom: 0.75rem; }
.meta { color: var(--muted); font-size: 0.9375rem; }
.status-line { font-weight: 700; }

/* --- comments ------------------------------------------------------------ */
.thread { list-style: none; margin: 0 0 1rem; padding: 0; }
.thread li { border-left: 4px solid var(--accent); padding: 0.5rem 0 0.5rem 1rem; margin: 0 0 0.75rem; }
.thread .thread { margin-left: 1rem; margin-top: 0.75rem; }
.comment__who { font-weight: 700; }
.comment__who--manager { background: var(--fill); color: var(--on-fill); padding: 0 0.4rem; border: 2px solid var(--border); border-radius: 4px; }
.comment__body { white-space: pre-wrap; margin: 0.25rem 0 0.5rem; }

.comment-form textarea { max-width: 48rem; }
.disclosure--inline { display: inline-block; margin: 0; padding: 0 0.75rem; }
.disclosure--inline[open] { display: block; width: 100%; max-width: 48rem; }
.disclosure--inline summary { min-height: var(--tap); min-width: var(--tap); display: inline-flex; align-items: center; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 1rem; }
.facts dt { font-weight: 700; }
.facts dd { margin: 0; }
@media (max-width: 700px) { .facts { grid-template-columns: 1fr; } }

.archived { border: 2px solid var(--border); border-radius: var(--radius); padding: 1rem 1.25rem; margin: 0 0 1.5rem; }
.archived h3 { font-size: 1.125rem; }
textarea.template { font-family: var(--font); min-height: 18rem; }

.readonly-value { white-space: pre-wrap; border-left: 4px solid var(--accent); padding: 0.35rem 0.75rem; background: var(--soft); margin: 0 0 0.5rem; }

/* --- conversations (Guide panel and Jack page) ------------------------------ */
.guide { position: fixed; top: 0; right: 0; bottom: 0; width: 26rem; max-width: 100vw; z-index: 900;
  display: flex; flex-direction: column; background: var(--bg); color: var(--text); border-left: 4px solid var(--ix-blue); box-shadow: -4px 0 16px rgba(0,0,0,0.15); }
.guide[hidden] { display: none; }
body.guide-docked { padding-right: 26rem; }
.guide__head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; padding: 0.75rem 1rem; background: var(--ix-navy); color: var(--ix-white); border-bottom: 3px solid var(--ix-blue); }
.guide__h { margin: 0; font-size: 1.25rem; color: var(--ix-white); flex: 1 1 auto; padding-top: 0; }
.guide__h:focus { outline: 3px solid var(--ix-gold); outline-offset: 2px; background: transparent; color: var(--ix-white); }
.guide__status { margin: 0; font-size: 0.9375rem; flex: 1 1 100%; order: 3; }
.guide__notice { margin: 0; padding: 0.5rem 1rem; font-size: 0.875rem; background: var(--soft); border-bottom: 2px solid var(--border); }
.guide__log, .chat__log { position: relative; flex: 1 1 auto; overflow-y: auto; padding: 0.75rem 1rem; display: flex; flex-direction: column; gap: 0.6rem; }
.guide__log:focus-visible, .chat__log:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; background: transparent; }
.guide__form, .chat__form { display: flex; gap: 0.5rem; padding: 0.75rem 1rem; border-top: 2px solid var(--border); align-items: flex-end; flex-wrap: wrap; }
.guide__input, .chat__input { flex: 1 1 12rem; min-height: var(--tap); }
.chat { border: 3px solid var(--border); border-radius: var(--radius); margin: 0 0 1.5rem; display: flex; flex-direction: column; }
.chat__toolbar { display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; align-items: center; padding: 0.75rem 1rem; border-bottom: 2px solid var(--border); }
.chat__toolbar .field__label { margin: 0; }
.chat__select { min-height: var(--tap); border: 2px solid var(--border); border-radius: 6px; padding: 0.4rem 0.6rem; background: var(--bg); color: var(--text); max-width: 100%; }
.chat__status { margin: 0; padding: 0.4rem 1rem; font-weight: 700; background: var(--soft); }
.chat__log { max-height: 50vh; min-height: 12rem; }
.chat__hint { padding: 0 1rem 0.75rem; margin: 0; }
.chat__turn { max-width: 100%; padding: 0.5rem 0.75rem; border: 2px solid var(--border); border-radius: var(--radius); white-space: pre-wrap; overflow-wrap: anywhere; }
.chat__turn--user { background: var(--soft); align-self: flex-end; border-color: var(--accent); }
.chat__turn--assistant { background: var(--bg); align-self: flex-start; }
.chat__turn--note { background: var(--fill); color: var(--on-fill); align-self: center; font-weight: 700; }
.chat__who { display: block; font-weight: 700; font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 0.15rem; }
@media (max-width: 64rem) {
  .guide { top: auto; height: 60vh; width: 100%; border-left: 0; border-top: 4px solid var(--ix-blue); }
  body.guide-docked { padding-right: 0; padding-bottom: 60vh; }
}

.diff ins { text-decoration: none; background: var(--fill); color: var(--on-fill); border-bottom: 3px solid var(--ix-navy); padding: 0 0.15em; }
.diff del { text-decoration: line-through; background: var(--soft); color: var(--text); border-bottom: 3px dotted var(--border); padding: 0 0.15em; }

/* --- reflow -------------------------------------------------------------- */
@media (max-width: 700px) {
  .site-header { padding: 0.75rem 1rem; }
  .page { padding: 1.5rem 1rem 3rem; }
  .a11y-shortcut-list { grid-template-columns: 1fr; }
  .do-dont { grid-template-columns: 1fr; }
}

/* --- Windows High Contrast / forced colours -------------------------------- */
@media (forced-colors: active) {
  .a11y-btn, .btn, .choice, .skip-link { border: 2px solid ButtonText; forced-color-adjust: none; background: ButtonFace; color: ButtonText; }
  .a11y-btn[aria-pressed="true"], .choice:has(input:checked) { background: Highlight; color: HighlightText; }
  a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid Highlight; }
}