/* Condition research inside My Preparation (2026-10-03): the shortcut strip,
   the per-condition research cards and the Find symptoms tool. Colors come
   from the site tokens; the one local token is the teal the reviewed design
   uses for research labels and count bars, with its dark value under both
   dark-mode mechanisms (forced and Auto). */
:root { --cr-teal: #285e5b; --cr-tint: #e9f1ed; }
:root[data-theme="dark"] { --cr-teal: #a1cec2; --cr-tint: #24443f; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --cr-teal: #a1cec2; --cr-tint: #24443f; }
}

/* ---- the shortcut strip: the research tools, findable from every section -- */
.cr-strip { margin: 0 0 1.5rem; padding: 1rem 1.2rem; border: 1px solid var(--color-accent); border-radius: 8px; background: var(--color-surface); }
.cr-strip[hidden] { display: none; }
/* In the workspace shell the strip sits at the top of the content column. */
.cw-shell > .cr-strip { grid-column: 2; min-width: 0; }
.cr-strip-label { margin: 0 0 .7rem; font: 700 .75rem/1.5 Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--cr-teal); }
.cr-strip-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .8rem; }
.cr-strip-link { display: block; min-height: 44px; padding: .55rem .9rem; border: 0; border-left: 2px solid var(--color-accent); border-radius: 0 4px 4px 0; background: var(--color-bg-alt); color: var(--color-text); text-align: left; text-decoration: none; cursor: pointer; font: inherit; }
.cr-strip-link strong { display: block; font: 600 1rem/1.4 Inter, sans-serif; color: var(--color-primary); }
.cr-strip-link span { display: block; margin-top: 2px; font: 400 .8rem/1.5 Inter, sans-serif; color: var(--color-text-muted); }
.cr-strip-link:hover { box-shadow: 0 0 0 1px var(--color-accent); }
.cr-strip-link:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; }
.cr-strip-link[aria-current="true"] { background: var(--color-primary); }
.cr-strip-link[aria-current="true"] strong, .cr-strip-link[aria-current="true"] span { color: var(--color-on-primary); }

/* ---- Conditions section: one research card per condition ---------------- */
.cr-cards { display: grid; gap: var(--space-3); }
.cr-card { padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg); }
/* The heading takes the workspace's own h3 treatment, the same as the
   connection-path cards below it. */
.cr-card-h { margin: 0 0 .2rem; color: var(--color-text); }
.cr-card-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }

/* While a tool is open it is the whole Conditions section; the rest of the
   section is still in the tree, so nothing a veteran was part-way through is
   torn down. */
[data-mp-panel="conditions"][data-cr-open] > :not([data-cr-host]) { display: none; }

/* ---- the tool ------------------------------------------------------------ */
/* scroll-margin: opened from a card far down the page, the tool's first line
   lands below the sticky site header, never under it. */
.cr-tool { max-width: 1040px; scroll-margin-top: calc(var(--nav-height, 64px) + 1rem); }
.cr-back { min-height: 44px; margin: 0 0 .6rem; padding: .35rem .15rem; border: 0; background: transparent; color: var(--color-primary); font: 600 .9rem/1.5 Inter, sans-serif; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.cr-back:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 3px; }
.cr-eyebrow { margin: 0 0 .5rem; font: 700 .75rem/1.5 Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--cr-teal); }
.cr-title { margin: 0 0 .5rem; font: 600 clamp(1.5rem, 2.6vw, 2.1rem)/1.15 'Source Serif 4', serif; color: var(--color-text-strong, var(--color-text)); }
.cr-lead { margin: 0 0 1.1rem; max-width: 46rem; font-size: 1rem; line-height: 1.6; color: var(--color-text); }
.cr-pick { display: grid; gap: 4px; max-width: 30rem; margin: 0 0 1.2rem; font: 600 var(--text-sm)/1.4 Inter, sans-serif; }
.cr-pick select, .cr-search input, .cr-choose select { min-height: 44px; width: 100%; font-size: 16px; padding: var(--space-2); border: 1px solid var(--color-control-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); }
.cr-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(250px, 1fr); gap: 1.5rem; align-items: start; }
.cr-main { min-width: 0; display: grid; gap: 1.5rem; }
.cr-side { display: grid; gap: 1rem; }
.cr-box { padding: 1.4rem; border: 1px solid var(--color-border); border-radius: 9px; background: var(--color-surface); }
.cr-box-gold { border-color: var(--color-accent-light); }
.cw-shell .cr-box h3 { margin: 0 0 .5rem; font: 600 1.45rem/1.2 'Source Serif 4', serif; color: var(--color-text-strong, var(--color-text)); }
.cr-box h4 { margin: 0 0 .3rem; font: 600 1.05rem/1.35 Inter, sans-serif; color: var(--color-text); }
.cr-muted { margin: 0 0 .8rem; font-size: .9rem; line-height: 1.55; color: var(--color-text-muted); }
.cr-foot { margin: 1rem 0 0; font-size: .82rem; line-height: 1.6; color: var(--color-text-muted); }
.cr-foot strong { color: var(--color-text); }
.cr-notice { margin: .8rem 0; padding: .6rem .9rem; border-left: 3px solid var(--color-accent); background: var(--color-bg-alt); font-size: .9rem; line-height: 1.55; color: var(--color-text); }
.cr-status { margin: 0 0 .8rem; min-height: 1.2em; font-size: .9rem; color: var(--color-text); }
.cr-status.is-error { color: var(--color-danger); font-weight: 600; }

.cr-search { margin: 0; padding: 1rem; border-radius: 6px; background: var(--color-bg-alt); }
.cr-search label { display: block; margin: 0 0 .35rem; font: 600 .9rem/1.4 Inter, sans-serif; }
.cr-search-row { display: flex; gap: .6rem; }
.cr-search-row input { flex: 1; min-width: 0; }
.cr-search p { margin: .6rem 0 0; font-size: .85rem; color: var(--color-text-muted); }

/* Counted rows: the bar is decisions, the percentage is context beside it. */
.cr-rows { margin: 1rem 0 0; padding: 0; list-style: none; }
.cr-row { padding: .75rem 0; border-bottom: 1px solid var(--color-border); }
.cr-row:last-child { border-bottom: 0; }
.cr-row[hidden] { display: none; }
.cr-row-top { display: flex; justify-content: space-between; gap: .8rem; font: 600 1rem/1.4 Inter, sans-serif; color: var(--color-text); }
.cr-row-top span { white-space: nowrap; font-variant-numeric: tabular-nums; }
.cr-bar { height: 9px; margin-top: .5rem; border-radius: 1px; background: var(--color-bg-alt); }
.cr-bar-fill { display: block; height: 9px; min-width: 2px; border-radius: 1px; background: var(--cr-teal); print-color-adjust: exact; -webkit-print-color-adjust: exact; }
.cr-row-pct { margin: .4rem 0 0; font-size: .82rem; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }

/* The veteran's own mark beside a symptom: a full-size control, never a chip. */
.cr-row-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem .8rem; }
.cr-row-bottom .cr-row-pct { margin: .4rem 0 0; }
select.cr-mark { min-height: 44px; min-width: 12.5rem; max-width: 100%; font-size: 16px; padding: var(--space-2); border: 1px solid var(--color-control-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); }
.cr-list-head { margin: .8rem 0 0; font: 700 .95rem/1.4 Inter, sans-serif; color: var(--color-text); }
.cr-marks { margin: .2rem 0 0; padding: 0; list-style: none; }
.cr-mark-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem .8rem; padding: .45rem 0; border-bottom: 1px solid var(--color-border); }
.cr-mark-row:last-child { border-bottom: 0; }
.cr-mark-row > span { flex: 1 1 14rem; }
.cr-own-marks { margin: .8rem 0 0; }
.cr-mark-status { min-height: 1.2em; margin: .4rem 0 0; font: 600 .9rem/1.4 Inter, sans-serif; color: var(--color-text); }
.cr-mark-status.is-error { color: var(--color-danger); }
@media (max-width: 480px) { select.cr-mark { width: 100%; } }

.cr-stat { padding: 1.3rem; border-radius: 7px; background: var(--color-bg-alt); }
.cr-stat-n { display: block; font: 400 2.9rem/1 'Source Serif 4', serif; letter-spacing: -.03em; color: var(--cr-teal); font-variant-numeric: tabular-nums; }
.cr-stat-label { display: block; margin-top: .5rem; font-size: .85rem; line-height: 1.5; color: var(--color-text-muted); }

/* Individual Board examples and medical descriptions. */
.cr-item { padding: 1rem 0; border-bottom: 1px solid var(--color-border); }
.cr-item:first-of-type { padding-top: .4rem; }
.cr-item:last-of-type { border-bottom: 0; padding-bottom: 0; }
.cr-item[hidden] { display: none; }
.cr-item-meta { margin: 0 0 .3rem; font: 700 .75rem/1.5 Inter, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--cr-teal); }
.cr-who { margin: 0 0 .5rem; font-size: .88rem; line-height: 1.5; color: var(--color-text-muted); }
.cr-list { margin: .35rem 0 0; font-size: .97rem; line-height: 1.6; color: var(--color-text); }
.cr-list b { font-weight: 600; }
.cr-badge { display: inline-block; margin-left: .5rem; padding: 2px 8px; border-radius: 4px; background: var(--cr-tint); color: var(--cr-teal); font: 700 .75rem/1.5 Inter, sans-serif; letter-spacing: 0; text-transform: none; }
.cr-quote summary, .cr-method summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font: 600 .9rem/1.4 Inter, sans-serif; color: var(--color-primary); }
.cr-quote blockquote { margin: 0 0 .6rem; padding: .7rem .9rem; border-left: 3px solid var(--color-border-strong); background: var(--color-bg); font-size: .92rem; line-height: 1.65; color: var(--color-text); overflow-wrap: anywhere; }
.cr-quote a, .cr-source a, .cr-own a, .cr-method a, .cr-empty a { color: var(--color-primary); text-underline-offset: 3px; overflow-wrap: anywhere; }
.cr-quote a, .cr-source a, .cr-method a, .cr-empty a { text-decoration: underline; font-weight: 600; }
.cr-source { margin: .7rem 0 0; font-size: .85rem; line-height: 1.5; color: var(--color-text-muted); }
.cr-choose { display: grid; gap: 4px; max-width: 28rem; margin: 0 0 .8rem; font: 600 var(--text-sm)/1.4 Inter, sans-serif; }
.cr-own ul { margin: .5rem 0 0; padding: 0; list-style: none; }
.cr-own li { margin: 0; }
.cr-own li a { display: flex; align-items: center; min-height: 44px; font: 600 .95rem/1.4 Inter, sans-serif; }

@media (max-width: 900px) {
  .cr-layout { grid-template-columns: 1fr; }
  .cr-strip-links { gap: .5rem; }
}
@media (max-width: 640px) {
  .cr-strip { padding: .9rem; }
  .cr-strip-links { grid-template-columns: 1fr; }
  .cr-box { padding: 1.1rem; }
  .cr-search-row { flex-wrap: wrap; }
  .cr-stat-n { font-size: 2.6rem; }
}
/* Research is a working view, never part of a printed copy. (The appointment
   sheet prints from its own copy under <body>; see the end of this file.) */
@media print { .cr-strip, [data-cr-host] { display: none !important; } }

/* Review my statement: the question is the thing to read. */
.cr-question { margin: .5rem 0 0; font: 600 1.05rem/1.5 Inter, sans-serif; color: var(--color-text); }

/* Questions to bring to an appointment: on the condition card, and beside
   Find symptoms and Review my statement. */
.cr-card-q { margin-top: .8rem; border-top: 1px solid var(--color-border); }
.cr-card-q > summary { min-height: 44px; display: flex; align-items: center; gap: .35rem; cursor: pointer; font: 600 .95rem/1.4 Inter, sans-serif; color: var(--color-primary); }
.cr-card-q > summary span { color: var(--color-text-muted); font-weight: 400; }
.cr-card-q > summary:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; }
.cr-card-q .cr-questions { padding: .4rem 0 .2rem; }
.cr-questions h4 { margin: 0 0 .5rem; }
.cr-questions h3:focus-visible, .cr-questions h4:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 3px; }
.cr-q-list { margin: .4rem 0 0; padding: 0 0 0 1.3rem; }
.cr-q { padding: .7rem 0; border-bottom: 1px solid var(--color-border); }
.cr-q:last-child { border-bottom: 0; }
.cr-q-text { margin: 0; font: 600 1rem/1.5 Inter, sans-serif; color: var(--color-text); overflow-wrap: anywhere; }
.cr-q .cr-list { font-size: .9rem; overflow-wrap: anywhere; }
.cr-q .cr-who { margin: .3rem 0 0; }
.cr-q-add { display: grid; gap: .4rem; margin: 1rem 0 0; padding-top: .9rem; border-top: 1px solid var(--color-border); }
.cr-q-add .rf-btn { justify-self: start; }
.cr-q-label { font: 600 .9rem/1.4 Inter, sans-serif; color: var(--color-text); }
.cr-questions textarea, .cr-questions select { width: 100%; min-height: 44px; font: 400 16px/1.5 Inter, sans-serif; padding: var(--space-2); border: 1px solid var(--color-control-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); }
.cr-questions textarea { resize: vertical; }
.cr-tool [aria-disabled="true"] { opacity: .65; cursor: default; }

/* ---- the appointment sheet -------------------------------------------------
   The paper is the thing: what is on it is exactly what prints. The chooser
   beside it only ticks things on and off. */
.cr-sheet-actions { margin-top: 0; }
.cr-sheet-paper { padding: 1.6rem; border: 1px solid var(--color-border-strong, var(--color-border)); border-radius: 6px; background: var(--color-surface); color: var(--color-text); overflow-wrap: anywhere; }
.cr-sheet-brand { margin: 0 0 .4rem; font: 700 .72rem/1.5 Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--cr-teal); }
.cw-shell .cr-sheet-paper h3, .cr-sheet-paper h3 { margin: 0 0 .2rem; font: 600 1.5rem/1.2 'Source Serif 4', serif; color: var(--color-text-strong, var(--color-text)); }
.cr-sheet-meta { margin: 0 0 .5rem; font-size: .92rem; color: var(--color-text); }
.cr-sheet-note { margin: 0 0 .4rem; font-size: .85rem; line-height: 1.5; color: var(--color-text-muted); }
.cr-sheet-empty { margin: .6rem 0; font-size: .95rem; color: var(--color-text-muted); }
.cr-sheet-block { margin-top: 1.2rem; padding-top: 1rem; border-top: 2px solid var(--color-border); }
.cr-sheet-paper h4 { margin: 0 0 .3rem; font: 700 1.15rem/1.3 Inter, sans-serif; color: var(--color-text); }
.cr-sheet-paper h5 { margin: 1rem 0 .3rem; font: 700 .8rem/1.5 Inter, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--cr-teal); }
.cr-sheet-paper ol, .cr-sheet-paper ul { margin: .3rem 0 .5rem; padding-left: 1.3rem; }
.cr-sheet-paper li { margin: 0 0 .45rem; font-size: 1rem; line-height: 1.55; }
.cr-sheet-sub { margin: .6rem 0 .2rem; font: 600 .92rem/1.5 Inter, sans-serif; color: var(--color-text); }
.cr-sheet-src { margin: .15rem 0 0; font-size: .88rem; line-height: 1.5; color: var(--color-text-muted); }
.cr-sheet-body { margin: .3rem 0 .6rem; padding: .7rem .9rem; border-left: 3px solid var(--color-border-strong, var(--color-border)); background: var(--color-bg); font-size: 1rem; line-height: 1.65; white-space: pre-wrap; }
.cr-sheet-plain textarea { width: 100%; min-height: 12rem; font: 400 .9rem/1.5 ui-monospace, Menlo, Consolas, monospace; padding: var(--space-2); border: 1px solid var(--color-control-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); }
.cr-sheet-group { margin: 1rem 0 0; padding: .8rem 0 0; border: 0; border-top: 1px solid var(--color-border); min-width: 0; }
.cr-sheet-group legend { padding: 0 .4rem 0 0; font: 700 1rem/1.4 Inter, sans-serif; color: var(--color-text); }
.cr-sheet-kind { margin: .7rem 0 .1rem; font: 700 .75rem/1.5 Inter, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--cr-teal); }
.cr-sheet-pick { display: flex; align-items: flex-start; gap: .6rem; min-height: 44px; padding: .5rem 0; font-size: .95rem; line-height: 1.45; color: var(--color-text); cursor: pointer; }
.cr-sheet-pick input { flex: 0 0 auto; width: 20px; height: 20px; margin: .1rem 0 0; accent-color: var(--color-primary); }
.cr-sheet-pick span { min-width: 0; overflow-wrap: anywhere; }
.cr-sheet-choose .cr-choose { margin: 1rem 0 0; }

/* Printing while the sheet is open prints ONLY the sheet: a copy of the paper
   sits directly under <body> for the length of the print. Black on white
   whatever the theme. The saved-copy packet keeps its own print path and wins
   when it is the one printing (body.printing-packet). */
#cr-print-sheet { display: none; }
@media print {
  body.printing-sheet:not(.printing-packet) { display: block !important; min-height: 0 !important; height: auto !important; background: #fff !important; }
  body.printing-sheet:not(.printing-packet) > *:not(#cr-print-sheet) { display: none !important; }
  body.printing-sheet:not(.printing-packet) > #cr-print-sheet { display: block !important; }
  #cr-print-sheet .cr-sheet-paper { padding: 0; border: 0; border-radius: 0; background: #fff !important; }
  #cr-print-sheet .cr-sheet-paper, #cr-print-sheet .cr-sheet-paper * { color: #111 !important; }
  #cr-print-sheet .cr-sheet-body { background: #fff !important; border-left-color: #777; }
  #cr-print-sheet .cr-sheet-block { border-top-color: #777; }
  #cr-print-sheet h4, #cr-print-sheet h5, #cr-print-sheet .cr-sheet-sub { break-after: avoid; }
  #cr-print-sheet li { break-inside: avoid; }
  /* The research appendix stays in one piece: its heading and its note never
     end a page with the list on the next. */
  #cr-print-sheet .cr-sheet-appendix { break-inside: avoid; }
  #cr-print-sheet .cr-sheet-note { break-after: avoid; }
  #cr-print-sheet .cr-sheet-paper li, #cr-print-sheet .cr-sheet-body { font-size: 11pt; }
}

/* ---- the connected views: conditions overview, brief, record review, standing --- */
.cr-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .25rem .9rem; margin: .5rem 0 0; font-size: .95rem; line-height: 1.5; }
.cr-facts dt { font-weight: 600; color: var(--color-text-muted); }
.cr-facts dd { margin: 0; color: var(--color-text); overflow-wrap: anywhere; }
.cr-cards-note { margin: 0; }
.cr-record { margin: .2rem 0 .5rem; padding: .7rem .9rem; border-left: 3px solid var(--color-border-strong, var(--color-border)); background: var(--color-bg); font-size: 1rem; line-height: 1.6; color: var(--color-text); overflow-wrap: anywhere; white-space: pre-wrap; }
.cr-dash { margin-top: var(--space-4, 1.5rem); }
.cr-dash[hidden] { display: none; }
.cr-dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; margin-top: .6rem; }
.cr-dash-item { padding: 1.1rem; border: 1px solid var(--color-border); border-radius: 9px; background: var(--color-surface); min-width: 0; }
.cw-shell .cr-dash-item h3, .cr-dash-item h3 { margin: 0 0 .4rem; font: 600 1.2rem/1.25 'Source Serif 4', serif; color: var(--color-text-strong, var(--color-text)); }
.cr-dash-list { margin: .3rem 0 .4rem; padding-left: 1.2rem; font-size: .95rem; line-height: 1.5; color: var(--color-text); }
.cr-dash-list li { margin: 0 0 .25rem; overflow-wrap: anywhere; }
.cr-dash-item .cr-source a { text-decoration: underline; font-weight: 600; color: var(--color-primary); }
@media (max-width: 480px) { .cr-facts { grid-template-columns: 1fr; gap: 0; } .cr-facts dd { margin: 0 0 .4rem; } }
