/* Five-guide pilot: chapters, opening summary, and the preparation worksheets.
   Uses the existing RateMyVSO tokens only. No new palette, no new type. */

/* ---------- chapters --------------------------------------------------
   Values taken from the approved prototype (Preview/v2/assets), not invented:
   a 1000px chapter column with generous separation, and a gold-ruled title. */
.guide-chapter { max-width: 1000px; margin: 3.5rem auto; }

/* The navbar is fixed, so every jump target on this site clears it by 84px
   (dc.css does this for `.guide-section[id]`). The blocks added by the pilot
   are jump targets too: the chapter pills, "Use the worksheets on this page",
   and the summary's own "Go to this part" links all land on one. Without the
   same offset the heading the veteran jumped to sits UNDER the navbar and the
   page looks like it scrolled to the wrong place. */
.guide-chapter[id],
.start-summary[id],
.guide-worksheets[id] { scroll-margin-top: 84px; }
.guide-chapter-title {
  font-size: 1.45rem;
  color: var(--color-primary);
  margin: 0 0 1.4rem;
  padding-bottom: .6rem;
  border-bottom: 2px solid var(--color-accent);
  letter-spacing: .01em;
}

/* Chapter navigation: where the reader is, and where else they can go. */
.guide-chapter-nav {
  max-width: 1000px;
  margin: 1.5rem auto 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.guide-chapter-nav a {
  font-size: .85rem;
  padding: .55rem 1rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border: 2px solid var(--color-accent);
  border-radius: 22px;
  color: var(--color-primary);
  text-decoration: none;
  transition: border-color .15s, background .15s;
}
.guide-chapter-nav a:hover { border-color: var(--color-primary); background: rgba(26,58,107,.06); }
.guide-chapter-nav a:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }

/* ---------- graphics on a claim page ----------------------------------
   PERMANENT RULE, owner directive 2026-08-31: a claim page NEVER shows a
   full-size graphic. Graphics must not dominate the page or interrupt
   reading. The approved treatment is the compact thumbnail card that already
   ships site-wide (.visual-guide-inline, .vg-mini-preview); a veteran opens
   the readable full graphic separately via the thumbnail or its
   "View full size" link.

   Two rejected attempts, recorded so neither comes back:
     - floating the card at 340px inside a narrow column of serif text;
     - promoting it to a full-width panel.
   Nothing here restyles those cards. The pilot only changes WHERE a card
   sits, never how large it is, so the shared site-wide rules stay in force.

   Research charts follow the same principle: they stay compact, proportionate
   page components. Their card treatment comes from the reviewed package
   (guide-research-cards.css) and is not enlarged here. */

/* ---------- opening summary ------------------------------------------- */
/* THE SYMMETRY LAW: prose shares one centred band via --prose-measure with
   auto side margins. Never `margin: 0` on a capped prose block. */
/* Values copied from the approved prototype: an 820px card, numbered gold
   markers, and a rule between each point. */
.start-summary {
  max-width: 820px;
  margin: 1.5rem auto 2rem;
  padding: 1.4rem 1.7rem;
  background: var(--color-surface, rgba(26,58,107,.04));
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-md, 10px);
}
.start-summary h2 { font-size: 1.3rem; color: var(--color-primary); margin: 0 0 .4rem; }
.start-summary ol { padding: 0; list-style: none; counter-reset: summary; margin: .5rem 0 1.2rem; }
.start-summary li {
  counter-increment: summary;
  position: relative;
  padding: .85rem 0 .85rem 2.35rem;
  border-bottom: 1px solid var(--color-border);
}
.start-summary li:last-child { border-bottom: none; }
.start-summary li:before {
  content: counter(summary);
  position: absolute;
  left: 0;
  top: .85rem;
  font-weight: 800;
  font-size: .8rem;
  line-height: 1.6;
  color: var(--color-accent);
  border: 1px solid var(--color-accent);
  width: 1.55rem;
  height: 1.55rem;
  text-align: center;
  border-radius: 50%;
}
.start-summary li strong { font-size: 1.03rem; color: var(--color-primary); display: block; }
.start-summary li p { margin: .3rem 0 0; font-size: .95rem; line-height: 1.6; }
.start-summary-actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.start-summary-link { font-size: .9rem; color: var(--color-primary); }
.start-summary-note { font-size: .82rem; color: var(--color-text-muted); margin: .9rem 0 0; }

/* ---------- worksheets ------------------------------------------------- */
.guide-worksheets {
  max-width: var(--prose-measure);
  margin: 2.5rem auto;
  padding: 1.4rem 1.5rem;
  border: 2px solid var(--color-accent);
  border-radius: var(--radius-md, 10px);
}
.guide-worksheets h2 { font-size: 1.25rem; color: var(--color-primary); margin: 0 0 .6rem; }
.ws-intro, .ws-signed-out { font-size: .9rem; line-height: 1.55; margin: 0 0 1rem; }
.ws-signed-out { padding: .7rem .9rem; border-left: 4px solid var(--color-accent); background: rgba(26,58,107,.05); }

/* THE BUTTON LAW: a clickable card carries a 2px accent border that does not
   fade into the surface, and hover shifts it to the primary colour. */
.ws-group {
  border: 2px solid var(--color-accent);
  border-radius: var(--radius-sm, 8px);
  margin-bottom: 1rem;
  background: var(--color-bg, transparent);
  transition: border-color .15s, box-shadow .15s;
}
.ws-group:hover { border-color: var(--color-primary); box-shadow: 0 2px 10px rgba(0,0,0,.08); }
.ws-group > summary {
  cursor: pointer;
  padding: .85rem 1rem;
  list-style: none;
  min-height: 44px;           /* touch target for an older reader on a phone */
  display: flex;
  align-items: center;
}
.ws-group > summary::-webkit-details-marker { display: none; }
.ws-group > summary::after { content: '+'; margin-left: auto; font-size: 1.2rem; color: var(--color-primary); }
.ws-group[open] > summary::after { content: '\2212'; }
.ws-group > summary h3 { font-size: 1rem; margin: 0; color: var(--color-primary); }
.ws-group > summary:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }

.ws-body { padding: 0 1rem 1rem; }
.ws-field { margin: 0 0 .9rem; }
.ws-field label { display: block; font-size: .88rem; font-weight: 600; margin-bottom: .3rem; color: var(--color-text); }
.ws-field textarea, .ws-field select {
  width: 100%;
  padding: .55rem .7rem;
  font: inherit;
  font-size: .92rem;
  color: var(--color-text);
  background: var(--color-bg, #fff);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm, 6px);
  min-height: 44px;
}
.ws-field textarea:focus, .ws-field select:focus { outline: 3px solid var(--color-accent); outline-offset: 1px; }
.ws-row { padding: .8rem; border: 1px dashed var(--color-border); border-radius: var(--radius-sm, 6px); margin-bottom: .8rem; }
.ws-row-actions, .ws-actions { margin: .4rem 0 0; }

.ws-controls { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1rem 0 0; }
.ws-controls button, .ws-add-row, .ws-remove-row {
  min-height: 44px;
  padding: .5rem 1rem;
  font-size: .88rem;
  border: 2px solid var(--color-accent);
  border-radius: var(--radius-sm, 6px);
  background: transparent;
  color: var(--color-primary);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.ws-controls button:hover, .ws-add-row:hover, .ws-remove-row:hover { border-color: var(--color-primary); background: rgba(26,58,107,.06); }
.ws-controls button:focus-visible, .ws-add-row:focus-visible, .ws-remove-row:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }

/* The save state is announced, not just coloured: colour alone is not a
   message for a screen reader or a reader with low vision. */
.ws-status { margin: .8rem 0 0; font-size: .86rem; min-height: 1.2em; }
.ws-status-ok { color: var(--color-success, #1d6b34); }
.ws-status-warn { color: var(--color-primary); }
.ws-status-error { color: var(--color-danger, #a12626); font-weight: 600; }
.ws-status-busy { color: var(--color-text-muted); }

/* The way out of a signed-out message. It is a link inside a status line, so
   it has to look like the offer it is rather than disappear into the sentence,
   and it needs a real touch target for an older reader on a phone. */
.ws-status-action {
  display: inline-block;
  margin-top: .35rem;
  min-height: 44px;
  line-height: 44px;
  padding: 0 .9rem;
  border: 2px solid var(--color-accent);
  border-radius: var(--radius-sm, 6px);
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;
}
.ws-status-action:hover { border-color: var(--color-primary); background: rgba(26,58,107,.06); }
.ws-status-action:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }

@media print {
  .ws-controls, .ws-add-row, .ws-remove-row, .ws-signed-out, .start-summary-actions { display: none; }
  .ws-group { border-color: #000; }
  .ws-group > summary::after { content: ''; }
  .ws-body { display: block !important; }
}

/* Dark mode, both mechanisms: the explicit attribute and the media mirror. */
:root[data-theme="dark"] .start-summary,
:root[data-theme="dark"] .guide-worksheets { background: rgba(255,255,255,.03); }
:root[data-theme="dark"] .ws-field textarea,
:root[data-theme="dark"] .ws-field select { background: #131c2b; color: #e8edf5; border-color: rgba(255,255,255,.18); }
:root[data-theme="dark"] .ws-signed-out { background: rgba(255,255,255,.05); }
:root[data-theme="dark"] .ws-status-ok { color: #6fd08c; }
:root[data-theme="dark"] .ws-status-error { color: #ff9b9b; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .start-summary,
  :root:not([data-theme="light"]) .guide-worksheets { background: rgba(255,255,255,.03); }
  :root:not([data-theme="light"]) .ws-field textarea,
  :root:not([data-theme="light"]) .ws-field select { background: #131c2b; color: #e8edf5; border-color: rgba(255,255,255,.18); }
  :root:not([data-theme="light"]) .ws-signed-out { background: rgba(255,255,255,.05); }
  :root:not([data-theme="light"]) .ws-status-ok { color: #6fd08c; }
  :root:not([data-theme="light"]) .ws-status-error { color: #ff9b9b; }
}

@media (max-width: 640px) {
  .start-summary, .guide-worksheets { padding: 1.1rem 1rem; }
  .ws-controls button { flex: 1 1 auto; }
}

/* ---------- phone split-bar labels ------------------------------------
   PILOT-SCOPED FIX for a defect that predates this work. The secondary
   template gives every in-bar label `white-space: nowrap` inside a segment
   whose width is the segment's own percentage, so any small segment clips its
   own text. Measured on the knee pairing page in all 12 phone states:
   "Granted 14%" needs 59px and gets 48px, losing 11px, i.e. the percentage.

   The fix lets the label WRAP instead of being cut. Nothing is hidden, no
   figure is restated, no font is shrunk below the phone size the template
   already sets, and the segment widths still come from the data. A 2.1rem bar
   holds two lines at .62rem.

   Scope: this stylesheet is loaded by the pilot pages only, and of those only
   the knee pairing page contains a split bar (verified: the four primary pilot
   guides contain zero `.split-bar` occurrences). The other 45 secondary pages
   never load this file, so their rendering is untouched. The same clipping on
   those pages is recorded for a later audited batch, not fixed here. */
@media (max-width: 640px) {
  .split-bar { height: auto; min-height: 2.1rem; }
  .split-bar span {
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.15;
    text-align: center;
    padding: .15rem .1rem;
  }
}

/* ---------- saved versions (conflict recovery) -------------------------
   A veteran who edited the same worksheet on a phone and a laptop has two
   saved versions. The old message said "reload to choose which to keep",
   which was false: reloading loads the newest one. This is the chooser. */
.ws-versions { margin: 1rem 0 0; }
.ws-versions-hint,
.ws-versions-none,
.ws-versions-loading { font-size: .85rem; color: var(--color-text-muted); margin: .5rem 0 0; }
.ws-versions-title { font-size: .95rem; color: var(--color-primary); margin: .8rem 0 .3rem; }
.ws-versions-note { font-size: .82rem; color: var(--color-text-muted); margin: 0 0 .6rem; }
.ws-versions-list { list-style: none; margin: 0; padding: 0; }
.ws-version {
  border: 2px solid var(--color-accent);
  border-radius: var(--radius-sm, 6px);
  padding: .7rem .85rem;
  margin: 0 0 .6rem;
}
.ws-version strong { display: block; font-size: .9rem; }
.ws-version-preview {
  display: block;
  font-size: .84rem;
  color: var(--color-text-muted);
  margin: .3rem 0 .5rem;
  line-height: 1.5;
}
.ws-versions-open,
.ws-version-use {
  min-height: 44px;
  padding: .45rem .9rem;
  font: inherit;
  font-size: .85rem;
  border: 2px solid var(--color-accent);
  border-radius: var(--radius-sm, 6px);
  background: transparent;
  color: var(--color-primary);
  cursor: pointer;
}
.ws-versions-open:hover,
.ws-version-use:hover { border-color: var(--color-primary); background: rgba(26,58,107,.06); }

/* ---------- My Preparation, print ---------------------------------------
   The printable copy is rendered into the profile page and printed from
   there. A popup window is blocked by default in most browsers and would
   silently do nothing, which is worse than no button at all. */
#my-preparation-print-area { display: none; }

@media print {
  body.printing-preparation > *:not(#main-content) { display: none !important; }
  body.printing-preparation #main-content > *:not(#my-preparation-card) { display: none !important; }
  body.printing-preparation #my-preparation-card > *:not(#my-preparation-print-area) { display: none !important; }
  /* Force paper colours. The profile card carries the site theme, so in dark
     mode the printed copy came out as near-black text on a near-black panel:
     unreadable, and a page of wasted ink. The print sheet is always dark ink
     on white, whatever theme the veteran browses in. */
  body.printing-preparation,
  body.printing-preparation #main-content,
  body.printing-preparation #my-preparation-card,
  body.printing-preparation #my-preparation-print-area,
  body.printing-preparation #my-preparation-print-area * {
    background: #fff !important;
    background-image: none !important;
    color: #111 !important;
    box-shadow: none !important;
  }
  body.printing-preparation #my-preparation-card { border: 0; padding: 0; }
  body.printing-preparation #my-preparation-print-area { display: block; }
  body.printing-preparation #my-preparation-print-area h1,
  body.printing-preparation #my-preparation-print-area h2,
  body.printing-preparation #my-preparation-print-area h3 { color: #1b3a6b !important; }
  body.printing-preparation #my-preparation-print-area h1 { font-size: 16pt; margin: 0 0 .3rem; }
  body.printing-preparation #my-preparation-print-area h2 { font-size: 12pt; margin: 1.1rem 0 .1rem; }
  body.printing-preparation #my-preparation-print-area h3 { font-size: 11pt; margin: 0 0 .2rem; }
  body.printing-preparation #my-preparation-print-area h4 { font-size: 10pt; margin: .6rem 0 .2rem; }
  body.printing-preparation .prep-print-note,
  body.printing-preparation .prep-print-when,
  body.printing-preparation .prep-print-meta { font-size: 8.5pt; color: #444 !important; margin: 0 0 .3rem; }
  body.printing-preparation .prep-print-ws { page-break-inside: avoid; border-top: 1px solid #999; padding-top: .5rem; }
  body.printing-preparation .prep-print-row { page-break-inside: avoid; }
  body.printing-preparation dt { font-weight: 600; font-size: 9.5pt; margin: .4rem 0 0; }
  body.printing-preparation dd {
    margin: 0 0 .2rem; font-size: 10pt; white-space: pre-wrap;
    border-bottom: 1px solid #ddd; min-height: 1.2em;
  }
}