/* Case questionnaire page only (templates/case-questionnaire.html links it).
   Colours come from tokens.css; the few extra roles are scoped to .cq and
   follow the OS theme the same way tokens.css does. */
.cq {
  --cq-sel: #d6ece8;  --cq-sel-ink: #00493f;
  --cq-note: #6e4300; --cq-note-bg: #fbefd2; --cq-note-rule: #e6c272;
  --cq-warn: #7b2a1c; --cq-warn-bg: #f6e3df;
  --cq-field: #fffdf7;
}
@media (prefers-color-scheme: dark) {
  .cq {
    --cq-sel: #173a36;  --cq-sel-ink: #bfe6e2;
    --cq-note: #f0c674; --cq-note-bg: #2b2412; --cq-note-rule: #5e4a1c;
    --cq-warn: #f1b7a8; --cq-warn-bg: #35201b;
    --cq-field: #201e16;
  }
}
.cq-noscript { padding: 1rem; background: var(--paper-warm); border-radius: 6px; }

/* section bar: the whole set of pills shows at once across the book's
   width, in a rounded panel. Sticky only from 960px, floating just below
   the top edge; a multi-row bar would eat a phone screen, where the bottom
   save bar is the always-in-reach control instead. */
.cq-nav { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius);
  box-shadow: var(--card-shadow); margin-block: 2rem 0; }
.cq-nav-inner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; padding: .7rem .8rem; }
/* Ten pills: an even 5 x 2 across the book, so none is left stretched alone. */
@media (min-width: 960px) { .cq-nav-inner { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.cq-nav a { min-width: 0; justify-content: center; text-align: center; font-size: .85rem;
  text-decoration: none; color: var(--ink-soft);
  border: 1px solid var(--rule); border-radius: 999px; padding: .2rem .7rem;
  display: flex; gap: .35rem; align-items: center; }
.cq-nav a:hover, .cq-nav a:focus-visible { border-color: var(--accent); color: var(--accent); }
.cq-count { font-size: .75rem; font-variant-numeric: tabular-nums; color: var(--accent); font-weight: 700; }
@media (min-width: 960px) { .cq-nav { position: sticky; top: calc(var(--header-h, 0px) + .5rem); z-index: 5; } }

/* The book: leaves hold the sections. Sections lose their own top padding
   (the leaf supplies it) and anchors land below the sticky bar. NAVH is the
   bar's measured height at 1280 (see the brief); update it if the pills change. */
.cq-form { margin-top: var(--space-5); }
.cq-form .cq-leaf > .leaf-body { min-width: 0; }
.cq-opening { margin-top: 0; }
@media (min-width: 960px) {
  .section-cards > .leaf.cq-leaf[id] { scroll-margin-top: 6rem; }
}

/* The side rail (shown above 60rem) is ~4.3rem wide and fixed to the right
   edge. Where the page shell's margin is narrower than that (below ~1260px,
   measured at 1024 and 961) it would cover the right-hand page, so the shell
   keeps its own clear strip. Above 1260px the margin already clears it. */
@media (min-width: 60.01rem) and (max-width: 1260px) and (min-height: 26.01rem) {
  .cq-has-rail .cq-shell { padding-right: 5.25rem; }
}
/* Section panel on the LEFT margin (Archetypal Voices' left layer drawer,
   mirroring the save rail on the right) wherever the screen is wide and tall
   enough; narrower screens keep the panel above the book. Later in source
   than, and equal in specificity to, the sticky and right-padding rules
   above, so it wins in its range. The shell padding clears both rails: the
   content's left edge sits at least 11.5rem from the window, its right edge
   6rem (the shell's own centring margin counts toward both). */
@media (min-width: 75rem) and (min-height: 36rem) {
  .cq-nav { position: fixed; left: 0; top: calc(50% + var(--header-h, 0px) / 2); transform: translateY(-50%); z-index: 9;
    margin: 0; width: 10rem;  /* 11.5rem less 12.5%, Luke 2026-11-06 */ max-height: calc(100vh - var(--header-h, 0px) - 2rem); overflow-y: auto;
    border-left: 0; border-radius: 0 8px 8px 0; box-shadow: 2px 4px 10px rgba(0, 0, 0, .15);
    scrollbar-width: thin; scrollbar-color: var(--frame) transparent; }
  .cq-nav::-webkit-scrollbar { width: 6px; }
  .cq-nav::-webkit-scrollbar-thumb { background: var(--frame); border-radius: 6px; }
  .cq-nav::-webkit-scrollbar-thumb:hover { background: var(--accent); }
  .cq-nav-inner { grid-template-columns: 1fr; gap: .3rem; padding: .6rem .6rem .6rem .5rem; }
  .cq-nav a { justify-content: space-between; text-align: left; }
  /* No pill bar above the book here, so a jump only clears the menu bar
     (html scroll-padding) plus a little air. */
  .cq-section, .section-cards > .leaf.cq-leaf[id] { scroll-margin-top: 1.5rem; }
  .cq-has-rail .cq-shell {
    padding-left: max(1.5rem, calc(11.5rem - (100vw - 72rem) / 2));
    padding-right: max(1.5rem, calc(6rem - (100vw - 72rem) / 2)); }
}
/* The section in view (set by the page's observer). */
.cq-nav a[aria-current="true"] { border-color: var(--accent); color: var(--accent); font-weight: 600; }

/* sections */
.cq-section { display: grid; gap: 1.1rem; padding-block: 0; scroll-margin-top: 6rem; }
.cq-section h2 { margin: 0; }
.cq-section h3 { margin: .6rem 0 0; font-size: 1.15rem; }
.cq-section p { margin: 0; }
.cq-kicker { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 600; }
.cq-discuss { display: flex; gap: .5rem; align-items: flex-start; color: var(--ink-soft); font-size: .95rem; }
.cq-stack { display: grid; gap: .9rem; }
.cq-row2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .9rem; }
.cq-field { display: grid; gap: .35rem; min-width: 0; }
.cq-field > label, .cq-q { font-weight: 600; }
.cq-hint { font-size: .9rem; color: var(--ink-faint); }
.cq input[type="text"], .cq textarea {
  font: inherit; color: var(--ink); background: var(--cq-field);
  border: 1px solid var(--frame); border-radius: 4px; padding: .5rem .6rem;
  width: 100%; min-width: 0; }
.cq textarea { min-height: 4.6rem; resize: vertical; }
.cq input:focus-visible, .cq textarea:focus-visible, .cq button:focus-visible,
.cq-nav a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cq fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.cq legend { padding: 0; font-weight: 600; margin-bottom: .5rem; }
.cq-three { display: grid; gap: .5rem; }

/* pills and segmented buttons */
.cq button { font: inherit; cursor: pointer; }
.cq-pills { display: flex; flex-wrap: wrap; gap: .35rem; }
.cq-pill { font-size: .9rem; border: 1px solid var(--frame); background: var(--cq-field);
  color: var(--ink); border-radius: 999px; padding: .25rem .75rem; line-height: 1.35; }
.cq-pill[aria-pressed="true"] { background: var(--cq-sel); border-color: var(--accent);
  color: var(--cq-sel-ink); font-weight: 600; }
.cq-pill[data-level="2"] { box-shadow: inset 0 0 0 1.5px var(--accent); }
.cq-grid { display: grid; border-top: 1px solid var(--rule); }
.cq-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .35rem .75rem;
  align-items: center; padding: .4rem 0; border-bottom: 1px solid var(--rule); }
.cq-name { min-width: 0; }
.cq-row .cq-note-in { grid-column: 1 / -1; font-size: .95rem; padding: .35rem .5rem; }
.cq-seg { display: flex; gap: .25rem; flex-wrap: wrap; justify-content: flex-end; }
.cq-seg button { font-size: .82rem; padding: .15rem .55rem; border: 1px solid var(--frame);
  background: var(--cq-field); color: var(--ink-soft); border-radius: 4px; }
.cq-seg button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent);
  border-color: var(--accent); font-weight: 600; }
.cq-group + .cq-group { margin-top: 1.1rem; }
.cq-group { display: grid; gap: .5rem; }

/* cards, tables, notices */
.cq-card { background: var(--cq-field); border: 1px solid var(--frame); border-radius: 6px;
  padding: 1rem; display: grid; gap: .8rem; }
.cq-card h3 { margin: 0; }
.cq-tablewrap { overflow-x: auto; }
.cq table { border-collapse: collapse; width: 100%; min-width: 34rem; font-size: .95rem; }
.cq caption { text-align: left; caption-side: top; padding-bottom: .4rem; color: var(--ink-faint); font-size: .9rem; }
.cq th, .cq td { border-bottom: 1px solid var(--rule); padding: .35rem .4rem; text-align: left; vertical-align: top; }
.cq th { font-weight: 600; color: var(--ink-soft); font-size: .85rem; }
.cq td input[type="text"] { padding: .3rem .4rem; }
.cq-safety { background: var(--cq-warn-bg); color: var(--cq-warn); border-radius: 6px;
  padding: .9rem 1rem; display: grid; gap: .4rem; font-size: .95rem; }
.cq-review, .cq-review-toggle { display: none; }
.cq-review-toggle { color: var(--cq-note); font-size: .9rem; font-weight: 600; margin: 1rem 0 0; }
.cq-review-toggle, .cq-notes-on .cq-review { display: block; }
.cq-review { background: var(--cq-note-bg); color: var(--cq-note); border-left: 3px solid var(--cq-note-rule);
  font-size: .85rem; padding: .45rem .7rem; border-radius: 0 4px 4px 0; }
.cq-review b { text-transform: uppercase; letter-spacing: .06em; font-size: .72rem; }

/* finish */
.cq-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.cq-btn { border: 1px solid var(--accent); background: transparent; color: var(--accent);
  border-radius: 4px; padding: .45rem .9rem; font-weight: 600; }
.cq-primary { background: var(--accent); color: var(--on-accent); }
.cq-status { min-height: 1.4em; color: var(--accent); font-size: .95rem; }
.cq-doc { background: var(--cq-field); border: 1px solid var(--frame); border-radius: 6px;
  padding: 1rem 1.1rem; max-height: 30rem; overflow: auto; overflow-wrap: anywhere;
  scrollbar-width: thin; scrollbar-color: var(--frame) transparent; }
.cq-doc h3 { font-size: 1rem; margin: 1rem 0 .3rem; }
.cq-doc h3:first-child { margin-top: 0; }
.cq-doc dl { margin: 0; }
.cq-doc dt { font-weight: 600; margin-top: .5rem; font-size: .92rem; }
.cq-doc dd { margin: 0; white-space: pre-wrap; font-size: .92rem; }

/* save rail: Archetypal Voices' right-hand tool drawer, adapted. Fixed to the
   right margin, vertically centred, rounded on its inner side only. */
.cq-rail { position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 9;
  display: flex; flex-direction: column; gap: .35rem; padding: .5rem .3rem;
  background: var(--paper); border: 1px solid var(--rule); border-right: none;
  border-radius: 8px 0 0 8px; box-shadow: -2px 4px 10px rgba(0, 0, 0, .15); }
.cq-rail-btn { display: grid; justify-items: center; gap: .15rem; min-width: 3.6rem;
  padding: .45rem .3rem; border: 1px solid transparent; border-radius: 6px;
  background: transparent; color: var(--ink-soft); font-size: .75rem; font-weight: 600; line-height: 1.1; }
.cq-rail-btn svg { display: block; }
.cq-rail-btn:hover { color: var(--accent); border-color: var(--rule); }
.cq-rail-save { background: var(--accent); color: var(--on-accent); }
.cq-rail-save:hover { color: var(--on-accent); border-color: var(--accent); filter: brightness(1.08); }
.cq-toast { position: fixed; right: 5.5rem; bottom: 1.5rem; z-index: 10; max-width: min(26rem, calc(100vw - 2rem));
  margin: 0; padding: .65rem .9rem; background: var(--paper); color: var(--ink);
  border: 1px solid var(--accent); border-radius: 6px; box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
  transition: opacity .25s; pointer-events: none; }  /* text only: never blocks a click */
.cq-toast:empty { opacity: 0; }
/* Narrow screens, and windows too short for the side rail, get the bottom bar. */
@media (max-width: 60rem), (max-height: 26rem) {
  .cq-rail { top: auto; bottom: 0; left: 0; transform: none; flex-direction: row; justify-content: center;
    gap: .25rem; padding: .3rem .5rem calc(.3rem + env(safe-area-inset-bottom, 0px));
    border: 0; border-top: 1px solid var(--rule); border-radius: 0; box-shadow: 0 -2px 10px rgba(0, 0, 0, .12); }
  .cq-rail-btn { flex: 1; max-width: 6rem; }
  .cq-has-rail { padding-bottom: 5.5rem; }
  /* The site's back-to-top stack (nav.css .page-actions) rides above the bar;
     the toast stops short of it. */
  .cq-has-rail .page-actions { bottom: calc(5rem + env(safe-area-inset-bottom, 0px)); }
  .cq-toast { left: 1rem; right: 4.5rem; bottom: 5.5rem; max-width: none; }
}

/* Print the answers only, as a plain document. */
@media print {
  .cq-rail, .cq-toast, .cq-opening { display: none !important; }
  .cq-has-rail { padding-bottom: 0; }
  .site-header, .site-footer, .skip-link, .cq-nav, .cq-form > .cq-leaf:not(.cq-last), .leaf-turn,
  .cq-actions, .cq-status, .cq-finish > p, .page-actions { display: none !important; }
  .cq-doc { max-height: none; overflow: visible; border: 0; padding: 0; background: none; }
  .cq-finish h2, .cq-finish .cq-kicker { display: none !important; }
  /* the finish leaf is the one printed page: no card chrome */
  .cq-form > .cq-last { background: none; border: 0; box-shadow: none; padding: 0; }
}