/* =============================================================
   Psychofarm - DSM-5 criteria search (dsm-criteria.html)
   -------------------------------------------------------------
   Card look is the one-page sheets' look, on screen: one white card
   per diagnosis, a solid header in its family colour, three bullet
   shapes, highlighted counts and durations, a violet specifier strip.
   The criteria markup is written by resources/build-dsm-criteria.mjs
   (ul.dc-l); the page script is assets/js/dsm-criteria.js.
   ============================================================= */

/* ---------- family colours ----------
   On the one-page sheets a chapter's families are teal, blue and navy, slate for catch-alls. On screen every
   chapter has its own hue (--h, from library.css's data-sheet map): the first family is that hue, the second
   a step along the wheel, the third a darker, quieter shade of it. The plain colours stay for a browser
   without OKLCH. */
.tone-teal  { --tone: #0F766E; --tone-ink: #0B5F58; --tone-bg: rgba(15,118,110,0.11); --tone-line: rgba(15,118,110,0.30); }
.tone-cyan  { --tone: #1D5FAE; --tone-ink: #184F92; --tone-bg: rgba(29,95,174,0.11);  --tone-line: rgba(29,95,174,0.30); }
.tone-navy  { --tone: #2A3F5F; --tone-ink: #22344F; --tone-bg: rgba(42,63,95,0.11);   --tone-line: rgba(42,63,95,0.32); }
.tone-slate { --tone: #94A3B8; --tone-ink: #475569; --tone-bg: rgba(100,116,139,0.13); --tone-line: rgba(100,116,139,0.30); }
@supports (color: oklch(0.5 0.1 200)) {
  .tone-teal  { --tone: oklch(0.50 calc(0.13 * var(--k)) var(--h));                 --tone-ink: oklch(0.40 calc(0.11 * var(--k)) var(--h));                 --tone-bg: oklch(0.50 calc(0.13 * var(--k)) var(--h) / 0.11);                 --tone-line: oklch(0.50 calc(0.13 * var(--k)) var(--h) / 0.30); }
  .tone-cyan  { --tone: oklch(0.46 calc(0.13 * var(--k)) calc(var(--h) + 38));      --tone-ink: oklch(0.38 calc(0.11 * var(--k)) calc(var(--h) + 38));      --tone-bg: oklch(0.46 calc(0.13 * var(--k)) calc(var(--h) + 38) / 0.11);      --tone-line: oklch(0.46 calc(0.13 * var(--k)) calc(var(--h) + 38) / 0.30); }
  .tone-navy  { --tone: oklch(0.36 calc(0.07 * var(--k)) var(--h));                 --tone-ink: oklch(0.30 calc(0.06 * var(--k)) var(--h));                 --tone-bg: oklch(0.36 calc(0.07 * var(--k)) var(--h) / 0.11);                 --tone-line: oklch(0.36 calc(0.07 * var(--k)) var(--h) / 0.32); }
}

/* ---------- search bar: the dark band (.lib-band in library.css); the Try row below it sets its own gap ---------- */
.dc-controls { margin-bottom: 0; position: static; }   /* two rows of buttons are too tall to stay stuck to the top */
.dc-search-wrap { position: relative; max-width: 720px; }
.dc-search-wrap > svg { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); color: var(--muted-light); pointer-events: none; }
.dc-search {
  width: 100%; font-family: var(--font-body); font-size: var(--fs-300); color: var(--heading-ink);
  background: var(--white); border: 1px solid var(--line-strong); border-radius: var(--r-pill, 999px);
  padding: 0.85em 5.2em 0.85em 3.2em; box-shadow: 0 1px 2px rgba(15,23,42,0.05);
  transition: border-color 0.18s, box-shadow 0.18s;
  -webkit-appearance: none; appearance: none;
}
.dc-search::placeholder { color: var(--muted-light); }
.dc-search:focus { outline: none; border-color: var(--teal-deep); box-shadow: 0 0 0 4px var(--teal-tint); }
.dc-search::-webkit-search-cancel-button { display: none; }
.dc-search-tools { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 8px; }
.dc-kbd {
  font-family: var(--font-mono); font-size: var(--fs-50); color: var(--muted-light);
  border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 5px; padding: 1px 7px; background: var(--off-white);
}
.dc-search:focus ~ .dc-search-tools .dc-kbd, .dc-search-wrap.has-text .dc-kbd { display: none; }
.dc-clear {
  display: none; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%;
  border: 0; background: var(--paper); color: var(--slate); cursor: pointer;
}
.dc-search-wrap.has-text .dc-clear { display: inline-flex; }
.dc-clear:hover { background: var(--line-strong); }
.dc-clear:focus-visible { outline: 3px solid var(--violet); outline-offset: 2px; }

/* the chapter buttons take the shared filter-chip look from library.css (light on dark in the band). The label hangs in the
   row's left padding (4.75rem = its 4.25rem width + the 0.5rem gap), so a wrapped line starts under the first button */
.dc-try { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin: var(--s-5) 0 0; padding-left: 4.75rem; }
.lib-band .dc-try { margin-top: var(--s-4); }
.dc-try-label { flex: none; width: 4.25rem; margin-left: -4.75rem; font-size: var(--fs-200); font-weight: 500; color: var(--muted-light); }
.dc-chip {
  font-family: var(--font-mono); font-size: var(--fs-100); letter-spacing: 0.02em; color: var(--slate);
  background: var(--white); border: 1px solid var(--line-strong); border-radius: 999px; padding: 4px 12px; cursor: pointer;
  transition: color 0.16s, background 0.16s, border-color 0.16s;
}
.dc-chip:hover { border-color: var(--teal-deep); color: var(--teal-deep); }
.dc-chip:focus-visible { outline: 3px solid var(--violet); outline-offset: 2px; }

/* ---------- the "condensed, not a word-for-word copy" notice ----------
   A calm information note (teal), not an alarm: the lead says what the page is, one sentence says what it is not,
   and the legal detail sits in a fold that opens in place. */
.dc-notice {
  display: flex; gap: var(--s-3); align-items: flex-start;
  margin: var(--s-4) 0 var(--s-2); padding: var(--s-3) var(--s-4);
  background: var(--teal-tint); border: 1px solid rgba(15,118,110,0.24); border-left: 4px solid var(--teal-deep); border-radius: 10px;
  font-size: var(--fs-200); line-height: 1.55; color: var(--slate);
}
.dc-notice > svg { flex: none; color: var(--teal-deep); margin-top: 2px; }
.dc-notice b { color: var(--heading-ink); }
.dc-notice p { margin: 0; }
.dc-notice-body { min-width: 0; }
.dc-notice-more { margin-top: var(--s-2); }
.dc-notice-more summary {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none;
  font-family: var(--font-mono); font-size: var(--fs-100); color: var(--teal-deep);
  text-decoration: underline; text-underline-offset: 3px;
}
.dc-notice-more summary::-webkit-details-marker { display: none; }
.dc-notice-more summary::after { content: ""; width: 6px; height: 6px; border: solid currentColor; border-width: 0 1.6px 1.6px 0; transform: rotate(45deg) translateY(-2px); transition: transform 0.16s; }
.dc-notice-more[open] summary::after { transform: rotate(-135deg) translateY(-1px); }
.dc-notice-more summary:hover { color: var(--heading-ink); }
.dc-notice-more summary:focus-visible { outline: 3px solid var(--violet); outline-offset: 3px; border-radius: 4px; }
.dc-notice-more ul { margin: var(--s-3) 0 0; padding: 0; list-style: none; display: grid; gap: var(--s-2); max-width: 78ch; }
.dc-notice-more li { margin: 0; }
.dc-notice-more a { color: var(--teal-deep); text-underline-offset: 2px; }
.dc-print-note { display: none; }

/* ---------- status line ---------- */
.dc-status { font-size: var(--fs-200); color: var(--muted-light); margin: var(--s-5) 0 var(--s-3); min-height: 1.4em; }
.dc-status b { color: var(--heading-ink); font-weight: 600; }
.dc-crumb {
  display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; cursor: pointer;
  font-family: var(--font-mono); font-size: var(--fs-100); color: var(--teal-deep); padding: 0; margin: 0 0 var(--s-3);
  text-decoration: underline; text-underline-offset: 3px;
}
.dc-crumb:hover { color: var(--heading-ink); }

/* ---------- result groups (one per chapter / sheet) ---------- */
.dc-group { margin: 0 0 var(--s-7); }
.dc-group-head {
  display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap;
  margin: 0 0 var(--s-4); padding-bottom: var(--s-3); border-bottom: 2px solid var(--c-line);
}
.dc-thumb {
  flex: none; width: 84px; border-radius: 6px; overflow: hidden; line-height: 0;
  background: var(--navy); padding: 6px 6px 0; box-shadow: 0 2px 8px rgba(15,23,42,0.18);
  transition: transform 0.2s var(--ease, ease);
}
.dc-thumb:hover { transform: translateY(-2px); }
.dc-thumb img { width: 100%; height: auto; display: block; border-radius: 3px 3px 0 0; }
.dc-group-title { position: relative; flex: 1 1 260px; min-width: 0; padding-left: var(--s-4); }
.dc-group-title::before { content: ""; position: absolute; left: 0; top: 2px; bottom: 2px; width: 6px; border-radius: 3px; background: linear-gradient(180deg, var(--c-dot), var(--c-lift)); }
.dc-group-title h2 { font-size: var(--fs-600); font-weight: 700; line-height: 1.15; color: var(--c-ink); margin: 0; letter-spacing: -0.02em; }
.dc-group-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: 4px 0 0; font-family: var(--font-mono); font-size: var(--fs-100); color: var(--muted-light); }
.dc-key { display: inline-flex; align-items: center; gap: 6px; }
.dc-key::before { content: ""; width: 10px; height: 10px; border-radius: 2px; background: var(--tone); }
.dc-group-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.dc-btn {
  display: inline-flex; align-items: center; gap: 0.5em; cursor: pointer; text-decoration: none;
  font-family: var(--font-mono); font-size: var(--fs-100); font-weight: 500; letter-spacing: 0.03em;
  color: var(--c-ink); background: var(--white); border: 1px solid var(--c-line); border-radius: 999px; padding: 7px 14px;
  transition: color 0.16s, border-color 0.16s, background 0.16s;
}
.dc-btn:hover { border-color: var(--c-dot); background: var(--c-tint); }
.dc-btn:focus-visible { outline: 3px solid var(--violet); outline-offset: 2px; }
.dc-btn--sheet { color: var(--c-ink); }
.dc-btn.is-locked { color: var(--muted-light); }

.dc-sub { font-family: var(--font-mono); font-size: var(--fs-100); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-ink); margin: var(--s-6) 0 var(--s-3); display: flex; align-items: center; gap: var(--s-3); }
.dc-sub::after { content: ""; flex: 1; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--c-line), transparent); }

/* cards flow in columns, top to bottom: tall and short cards pack without gaps */
.dc-cards { columns: 2 460px; column-gap: var(--s-5); }
.dc-cards--one { columns: 1; max-width: 760px; }
.dc-card {
  break-inside: avoid; display: block; margin: 0 0 var(--s-5);
  background: var(--white); border: 1px solid var(--tone-line); border-radius: 12px; overflow: hidden;
  box-shadow: 0 1px 3px rgba(15,23,42,0.07); scroll-margin-top: calc(var(--header-h) + 150px);
}
.dc-card.is-target { box-shadow: 0 0 0 3px var(--cyan), 0 6px 18px rgba(15,23,42,0.12); }
.dc-h {
  display: flex; align-items: flex-start; gap: var(--s-3); padding: 10px 10px 10px 16px;
  background: var(--tone); color: var(--white);
}
.dc-h h3 { flex: 1; margin: 0; padding-top: 1px; font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; line-height: 1.3; color: inherit; letter-spacing: 0.005em; }
.dc-h mark { background: rgba(255,255,255,0.30); color: inherit; border-radius: 3px; padding: 0 2px; }
.dc-acts { display: flex; gap: 2px; flex: none; margin-top: -2px; }
.dc-act {
  display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 7px; border: 0;
  background: transparent; color: inherit; opacity: 0.8; cursor: pointer;
}
.dc-act:hover { opacity: 1; background: rgba(255,255,255,0.18); }
.dc-act:focus-visible { outline: 3px solid var(--white); outline-offset: -3px; }
.dc-act svg { pointer-events: none; }
.dc-act.did { opacity: 1; background: rgba(255,255,255,0.28); }

/* catch-all entries (Unspecified, Other specified): a quiet grey header */
.dc-card.tone-slate { box-shadow: none; }
.dc-card.tone-slate .dc-h { background: #E3E8EF; color: #334155; }
.dc-card.tone-slate .dc-h mark { background: rgba(15,23,42,0.12); }
.dc-card.tone-slate .dc-act:hover { background: rgba(15,23,42,0.08); }
.dc-card.tone-slate .dc-act:focus-visible { outline-color: #334155; }
.dc-card.tone-slate .dc-l li { color: #475569; }

.dc-body { padding: 12px 16px 14px; font-size: var(--fs-200); }
.dc-see { margin: 10px 0 0; font-size: var(--fs-100); color: var(--muted-light); }
.dc-see a { color: var(--teal-deep); text-underline-offset: 3px; }
.dc-card.is-locked .dc-body { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; color: var(--muted-light); }
.dc-card.is-locked .dc-body svg { flex: none; }
.dc-card.is-locked .dc-body a { color: var(--teal-deep); font-weight: 600; text-underline-offset: 3px; }
.dc-loading { color: var(--muted-light); font-family: var(--font-mono); font-size: var(--fs-100); }

.dc-more { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3); margin: 0 0 var(--s-6); }

/* ---------- criteria lists ----------
   A bullet sits in a column left of the text; a child's marker sits under its parent's first letter.
   Three marker shapes only: dot (level 1), ring (level 2), small square (level 3 and deeper). */
.dc-l { list-style: none; margin: 0; padding: 0; --step: 18px; }
.dc-l li {
  position: relative; margin: 0 0 3px; line-height: 22px; color: var(--slate);
  padding-left: calc(var(--d) * var(--step));
}
.dc-l li.d1 { color: #1E293B; }
.dc-l li.lead { color: var(--heading-ink); }
.dc-l li.d1:not(:first-child) { margin-top: 5px; }
.dc-l li b { color: var(--heading-ink); font-weight: 600; }
.dc-l li::before {
  content: ""; position: absolute; box-sizing: border-box;
  left: calc((var(--d) - 1) * var(--step) + 4px); top: 8px; width: 6px; height: 6px;
  background: var(--tone); border-radius: 50%;
}
.dc-l li.d2::before { left: calc((var(--d) - 1) * var(--step) + 3px); top: 7px; width: 8px; height: 8px; background: transparent; border: 1.5px solid var(--tone); }
.dc-l li.d3::before, .dc-l li.d4::before, .dc-l li.d5::before { left: calc((var(--d) - 1) * var(--step) + 5px); top: 9px; width: 4px; height: 4px; border-radius: 0; }

/* counts, thresholds and durations: ">=4", "3 of 6", "6 months" */
.dc-l .k { font-weight: 600; color: var(--heading-ink); background: var(--tone-bg); border-radius: 3px; padding: 0 3px; margin: 0 -1px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* specifiers and coding notes: a violet strip along the bottom of the card; nested ones get an inset panel */
.dc-l li.sp { --tone: var(--violet); color: #6D28D9; }
.dc-l li.sp b { color: #6D28D9; }
.dc-l li.sp .k { color: #5B21B6; background: rgba(124,58,237,0.14); }
.dc-l li.spw {
  margin: 8px 0 6px calc((var(--b) - 1) * var(--step) - 6px); padding: 5px 8px 5px 6px;
  background: var(--violet-tint); border-left: 3px solid var(--violet); border-radius: 0 8px 8px 0;
}
.dc-l li.spw.full {
  margin: 10px -16px 0; padding: 8px 16px 9px; border-left: 0; border-radius: 0;
  border-top: 1px solid rgba(124,58,237,0.20); background: rgba(124,58,237,0.06);
}
.dc-l li.spw.full:not(:last-child) { margin-bottom: 4px; border-bottom: 1px solid rgba(124,58,237,0.20); }
.dc-body > .dc-l > li.spw.full:last-child { margin-bottom: -14px; padding-bottom: 12px; }
.dc-body > .dc-l > li.spw.full:first-child { margin-top: -12px; border-top: 0; }
.dc-l li.spw::before { display: none; }
.dc-l li.spw > .dc-l > li:last-child { margin-bottom: 0; }
.dc-l li.spw > .dc-l > li.d1:not(:first-child) { margin-top: 3px; }

.dc-l .lab {
  font-family: var(--font-mono); font-weight: 600; font-style: normal; font-size: 0.72rem;
  letter-spacing: 0.06em; text-transform: uppercase; color: #6D28D9; margin-right: 2px;
}
.dc-l .lab i { font-style: normal; }
.dc-l li.lab-line { padding-left: calc((var(--d) - 1) * var(--step)); color: #6D28D9; }
.dc-l li.lab-line::before, .dc-l li.fl::before { display: none; }
.dc-l li.fl { padding-left: calc((var(--d) - 1) * var(--step)); color: #6D28D9; }
.dc-l .fi .sep { color: #A78BFA; font-size: 0.85em; margin: 0 2px; }

/* short sibling lists (DIGFAST, SIGECAPS) run several across */
.dc-l li.gw { padding-left: calc((var(--d) - 1) * var(--step)); }
.dc-l li.gw::before { display: none; }
.dc-l ul.g { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 0 10px; }
.dc-l ul.g li { margin-bottom: 0; }
.dc-l ul.g li.d1:not(:first-child) { margin-top: 0; }

/* ---------- browse: chapters and their diagnoses ---------- */
.dc-home-head { margin: var(--s-6) 0 var(--s-4); }
.dc-home-head h2 { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2) var(--s-4); font-size: var(--fs-700); line-height: 1.1; font-weight: 700; color: var(--heading-ink); margin: 0 0 var(--s-2); letter-spacing: -0.02em; }
.dc-home-head p { margin: 0; color: var(--muted-light); font-size: var(--fs-200); }
.dc-chapters { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: var(--s-4); margin-bottom: var(--s-8); }
.dc-chapter {
  display: flex; flex-direction: column; gap: var(--s-4); padding: var(--s-4) var(--s-5) var(--s-5); border-radius: var(--r-lg);
}
.dc-chapter:hover { box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.16), 0 20px 34px -18px var(--c-lift); }
.dc-chapter-top { position: relative; z-index: 1; display: flex; gap: var(--s-3); align-items: flex-start; }
.dc-chapter-top > div { flex: 1; min-width: 0; }
.dc-chapter h3 { font-size: 1.5rem; font-weight: 700; line-height: 1.15; color: #fff; margin: 0; letter-spacing: -0.02em; }
.dc-chapter-count {
  display: inline-block; margin: 0 0 var(--s-3); padding: 4px 10px; border-radius: var(--r-pill);
  font-family: var(--font-mono); font-size: var(--fs-50); letter-spacing: 0.06em; text-transform: uppercase; line-height: 1;
  color: #fff; background: rgb(255 255 255 / 0.14); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.22);
}
.dc-chapter .dc-thumb { width: 64px; padding: 5px 5px 0; box-shadow: 0 0 0 1.5px rgb(255 255 255 / 0.30), 0 6px 16px rgba(0, 0, 0, 0.35); }
.dc-dx { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.dc-dx .dc-chip {
  font-family: var(--font-body); font-size: var(--fs-100); padding: 4px 11px; text-align: left;
  color: #fff; background: rgb(255 255 255 / 0.12); border-color: transparent;
}
.dc-dx .dc-chip:hover { background: #fff; border-color: transparent; color: var(--c-deep); }
.dc-dx .dc-chip--more { color: var(--c-soft); background: transparent; border: 1px dashed rgb(255 255 255 / 0.40); }
.dc-dx .dc-chip--more:hover { color: var(--c-deep); }
.dc-chapter-foot { position: relative; z-index: 1; margin-top: auto; padding-top: var(--s-2); display: flex; flex-wrap: wrap; gap: var(--s-2); }
.dc-chapter .dc-btn { color: #fff; background: rgb(255 255 255 / 0.12); border-color: rgb(255 255 255 / 0.30); }
.dc-chapter .dc-btn:hover { color: var(--c-deep); background: #fff; border-color: #fff; }
.dc-chapter .dc-btn.is-locked { color: var(--c-soft); }

/* ---------- empty state ---------- */
.dc-empty { padding: var(--s-7) 0 var(--s-8); max-width: 640px; }
.dc-empty h2 { font-size: var(--fs-500); margin: 0 0 var(--s-2); color: var(--heading-ink); }
.dc-empty p { color: var(--slate); margin: 0 0 var(--s-4); }
.dc-empty .dc-try { margin-top: 0; }

/* ---------- small screens ---------- */
@media (max-width: 640px) {
  .dc-search { font-size: 1rem; padding-left: 2.9em; }
  .dc-kbd { display: none; }
  .dc-thumb { display: none; }
  .dc-chapter .dc-thumb { display: block; }
  .dc-cards, .dc-cards--one { columns: 1; }
  .dc-chapters { grid-template-columns: 1fr; }
  .dc-home-head h2 { font-size: var(--fs-600); }
  .dc-group-title h2 { font-size: var(--fs-500); }
  .dc-group-actions .dc-btn { flex: 1 1 auto; justify-content: center; }
  .dc-body { padding: 12px 14px 14px; }
  .dc-l li.spw.full { margin-left: -14px; margin-right: -14px; padding-left: 14px; padding-right: 14px; }
  .dc-try { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; padding-left: 0; scrollbar-width: none; }
  .dc-try-label { margin-left: 0; }
  .dc-try::-webkit-scrollbar { display: none; }
  .dc-try .dc-chip { flex: none; }
}
@media (prefers-reduced-motion: reduce) {
  .dc-thumb, .dc-chapter { transition: none; }
}
@media print {
  .dc-controls, .dc-notice, .dc-group-actions, .dc-acts, .dc-more { display: none !important; }
  .dc-card { box-shadow: none; }
  .dc-print-note { display: block; margin: 14pt 0 0; font-size: 8pt; line-height: 1.4; color: #475569; border-top: 1px solid #CBD5E1; padding-top: 6pt; }
}

/* =============================================================
   Full criteria page (one diagnosis, opened from a chip or "Full criteria")
   -------------------------------------------------------------
   A dark panel in the chapter's colour, a row of "at a glance" tiles, a Jump-to bar that follows the reader, then one
   white card per criterion: a lettered tile, the rule in one line, and the symptoms as numbered circles. Warnings (red),
   notes (blue) and memory aids (green) sit beside the symptom they belong to. Specifiers are violet, coding is navy.
   Written by resources/build-dsm-full.mjs into assets/dsm/full/<chapter>.json; drawn by dsm-criteria.js (detailHTML).
   ============================================================= */
.dc-act--full {
  width: auto; padding: 0 11px; margin-right: 4px; opacity: 1; text-decoration: none;
  font-family: var(--font-mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.04em; white-space: nowrap;
  border: 1px solid rgba(255,255,255,0.55); border-radius: 999px; background: rgba(255,255,255,0.12);
}
.dc-card.tone-slate .dc-act--full { border-color: rgba(51,65,85,0.35); background: rgba(255,255,255,0.55); }
.dc-act--full:hover { background: rgba(255,255,255,0.28); }
.dc-card.tone-slate .dc-act--full:hover { background: #fff; }
.fc-wait { padding: var(--s-6) 0; }
.fc-viewbar { margin: 0 0 var(--s-4); }

/* =============================================================
   The diagnosis page (2026-10-25). Greg asked first for "much, much simpler, the basics", then the same night for coloured
   cards, colour used with more impact, one font, and specifiers that are easier to process. Drawn by detailHTML in
   assets/js/dsm-criteria.js.
   One typeface (Inter) and one fixed colour scheme on every diagnosis (Greg: "one template for everyone"); the chapter
   colours stay on the browse and chapter views only. Every colour means the same thing on every page:
     blue   symptoms and key features      amber  timing (every duration is an amber highlight)
     rose   impact                         grey   rule-outs (one card for a run of them), "when to use"
     violet specifiers, course, severity   slate  other notes sections
   ============================================================= */
.fc { max-width: 920px; margin: 0 0 var(--s-8); font-family: var(--font-body); }
.fc h2, .fc h3, .fc h4 { font-family: var(--font-body); }
.fc b { color: #0F172A; font-weight: 650; }

/* the colour of each kind: --x solid, --x-ink text, --x-head the card head, --x-bg the card body, --x-line rules and borders.
   The tints are strong enough to read as colour at full size, not near-white (Greg: "the cards themselves are white") */
.cx--sym  { --x: #2F5BD3; --x-ink: #1A3580; --x-head: #D3E0FC; --x-bg: #E6EEFD; --x-line: #B5C9F4; }
.cx--time { --x: #C2690A; --x-ink: #6E3704; --x-head: #FADDA6; --x-bg: #FDEFD2; --x-line: #EBC77F; }
.cx--imp  { --x: #C23358; --x-ink: #7E1834; --x-head: #F8CFDA; --x-bg: #FCE6EC; --x-line: #EAAFC0; }
.cx--rule { --x: #64748B; --x-ink: #2C3A4D; --x-head: #DEE4EC; --x-bg: #ECF0F4; --x-line: #C9D2DD; }
.fs--spec { --x: #7043D0; --x-ink: #431B8C; --x-head: #E0D4FA; --x-bg: #EEE7FD; --x-line: #D0BEF4; }
.fs--info { --x: #3E5875; --x-ink: #22364D; --x-head: #DCE4EE; --x-bg: #EBF0F5; --x-line: #C8D3DF; }

/* the top card: chapter and name, the same dark navy on every page */
.fc-top { padding: var(--s-4) var(--s-5) var(--s-5); border-radius: 18px; color: #fff; background: linear-gradient(135deg, #0E1A2F 0%, #1A2D4C 100%); }
.fc-eyebrow { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #7DD3E8; }
.fc-eyebrow a { color: inherit; text-decoration: none; }
.fc-eyebrow a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.fc-title { margin: 0.35rem 0 0; font-size: clamp(1.7rem, 1.1rem + 2vw, 2.35rem); font-weight: 750; line-height: 1.12; letter-spacing: -0.025em; color: #fff; }

/* ---------- criterion cards ---------- */
.fc-crit { display: grid; gap: 14px; margin-top: 18px; }
.cx { overflow: hidden; background: var(--x-bg); border: 1px solid var(--x-line); border-left: 6px solid var(--x); border-radius: 16px; }
.cx-h { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: 14px; align-items: start; padding: 16px 20px; background: var(--x-head); }
.cx-l {
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%;
  font-size: 1.15rem; font-weight: 800; line-height: 1; color: #fff; background: var(--x);
}
.cx-k { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 4px; font-size: 0.8125rem; font-weight: 700; color: var(--x-ink); }
.cx-need { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 0.78rem; font-weight: 700; line-height: 1.45; color: #fff; background: var(--x); white-space: nowrap; }
.cx-need-note { font-size: 0.8rem; font-weight: 500; color: #5B6B80; }
.cx-s { margin: 0; font-size: 1.0625rem; line-height: 1.45; font-weight: 650; color: #0F172A; }

/* the list in the card body, lined up with the sentence */
.cx-list { padding: 6px 20px 10px calc(20px + 2.5rem + 14px); }
.fc-it { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); gap: 0 12px; padding: 10px 0; font-size: 1rem; line-height: 1.55; }
.fc-it + .fc-it { border-top: 1px solid var(--x-line, #EDF1F6); }
.fc-tx { color: #334155; }
.fc-n {
  display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%;
  font-size: 0.78rem; font-weight: 700; color: var(--x-ink); background: #fff; box-shadow: inset 0 0 0 1px var(--x-line);
}
.fc-it.is-core .fc-n { color: #fff; background: var(--x); box-shadow: none; }
.fc-b { width: 7px; height: 7px; border-radius: 50%; background: var(--x); margin: 0.68em 0 0 0.45rem; }
.fc-p { margin: 8px 0; font-size: 1rem; line-height: 1.55; color: #334155; }
.fc-kids { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; }
.fc-kids li { position: relative; padding-left: 18px; line-height: 1.5; }
.fc-kids li::before { content: ""; position: absolute; left: 4px; top: 0.62em; width: 5px; height: 5px; border-radius: 50%; background: var(--x); opacity: 0.6; }
.fc-kids li.is-n { padding-left: 2px; }
.fc-kids li.is-n::before { display: none; }
.fc-kids .fc-kids { margin-top: 4px; }
.fc-kn { font-weight: 700; color: var(--x-ink); }

/* the required items, boxed together (MDD 1 and 2, schizophrenia 1 to 3) */
.fc-core { margin: 6px -10px; padding: 0 10px 2px; border-radius: 10px; background: var(--x-head); }
.fc-core-l { margin: 0; padding-top: 8px; font-size: 0.78rem; font-weight: 700; color: var(--x-ink); }

/* a group inside a criterion (ADHD A1, the substance-use clusters), with its own count */
.fc-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 12px 0 2px; padding: 7px 10px; border-radius: 8px; font-size: 0.9rem; font-weight: 700; line-height: 1.3; color: var(--x-ink); background: var(--x-head); }
.cx-list > .fc-sub:first-child { margin-top: 10px; }

/* a must-know rule, a note, a memory aid */
.fc-must { position: relative; margin: 10px 0 2px; padding: 8px 12px 8px 38px; border-radius: 10px; font-size: 0.95rem; line-height: 1.5; font-weight: 500; color: #0F172A; background: rgba(255,255,255,0.75); border: 1px solid var(--x-line); }
.cx-list .fc-must { background: rgba(255,255,255,0.7); }
.fc-must-i { position: absolute; left: 11px; top: 9px; width: 19px; height: 19px; border-radius: 50%; font-size: 0.75rem; font-weight: 800; line-height: 19px; text-align: center; color: #fff; background: var(--x); }
.fc-note { margin: 6px 0 2px; padding-left: 12px; border-left: 2px solid var(--x-line); font-size: 0.9rem; line-height: 1.5; color: #4B5B70; }
.fc-note b { color: #334155; }
.fc-tag { display: inline-block; margin-right: 4px; padding: 0 8px; border-radius: 999px; font-size: 0.8em; font-weight: 700; line-height: 1.65; color: var(--x-ink); background: #fff; box-shadow: inset 0 0 0 1px var(--x-line); }
.fc-aid { margin: 10px 0 8px; padding: 10px 12px; border-radius: 10px; font-size: 0.92rem; line-height: 1.55; color: #334155; background: rgba(255,255,255,0.7); }
.fc-aid b { color: var(--x); font-weight: 800; }
.fc-aid-l { font-weight: 700; color: var(--x-ink); }

/* every duration and age is an amber highlight, on every card */
.fc-time, .fc .k { white-space: nowrap; padding: 0 4px; margin: 0 -1px; border-radius: 4px; font-weight: 650; color: #6B3505; background: #FCE5B4; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.cx--time .fc-time, .cx--time .k { background: #F6C566; }

/* rule-outs: one grey card, a row each */
.cx-k--top { margin: 0; padding: 10px 20px; background: var(--x-head); }
.cx-row { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: 14px; padding: 12px 20px; border-top: 1px solid var(--x-line); }
.cx-k--top + .cx-row { border-top: 0; }
.cx-row .cx-l { width: 2.1rem; height: 2.1rem; margin-left: 0.2rem; font-size: 0.95rem; color: var(--x-ink); background: #fff; box-shadow: inset 0 0 0 1.5px var(--x-line); }
.cx-row .cx-s { padding-top: 0.3rem; font-size: 1rem; font-weight: 550; color: #1E293B; }
.cx-row .fc-it, .cx-row .fc-p { font-size: 0.94rem; padding: 6px 0; }
.cx-row .fc-it + .fc-it { border-top: 0; }

/* a one-sentence criterion is a slim card: the head only */
.cx--bare .cx-h { padding-top: 13px; padding-bottom: 13px; }

/* ---------- the episodes a diagnosis is built from (manic, hypomanic, major depressive): a panel each, the same cards inside.
   The first is open, a second is folded (bipolar II's depressive episode) ---------- */
.ep { margin-top: 22px; padding: 0 14px 14px; border-radius: 20px; background: #EDF1F7; border: 1px solid #D8DFEA; }
.ep:not([open]) { padding-bottom: 0; }
.ep > summary { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; padding: 15px 6px 13px; cursor: pointer; list-style: none; }
.ep > summary::-webkit-details-marker { display: none; }
.ep > summary::after { content: ""; align-self: center; margin-left: auto; width: 8px; height: 8px; border: solid #475569; border-width: 0 2px 2px 0; transform: translateY(-3px) rotate(45deg); transition: transform 0.16s; }
.ep[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.ep > summary:focus-visible { outline: 3px solid var(--violet); outline-offset: 2px; border-radius: 12px; }
.ep-t { font-size: 1.25rem; font-weight: 750; line-height: 1.25; letter-spacing: -0.015em; color: #0F172A; }
.ep-m { font-size: 0.875rem; font-weight: 600; color: #5B6B80; }
.ep > .fc-crit { margin-top: 0; }

/* ---------- the folds after the criteria (specifiers, severity, course and recording, other notes, coding) ----------
   Closed by default, like Coding. The summary names the section and lists what is inside; the reader opens what they need. */
.fd-group { display: grid; gap: 10px; margin-top: 28px; }
.fd { min-width: 0; border-radius: 14px; background: #fff; border: 1px solid var(--x-line); border-left: 5px solid var(--x); }
.fd--spec { --x: #7043D0; --x-ink: #431B8C; --x-head: #E7DDFB; --x-bg: #F4EFFE; --x-line: #DCCDF7; }
.fd--info { --x: #3E5875; --x-ink: #22364D; --x-head: #DCE4EE; --x-bg: #F1F5F9; --x-line: #D3DCE7; }
.fd--code { --x: #64748B; --x-ink: #24384F; --x-head: #E2E8F0; --x-bg: #F4F7FA; --x-line: #DAE2EB; }
.fd > summary { display: grid; grid-template-columns: 1.9rem minmax(0, 1fr); align-items: center; column-gap: 12px; padding: 13px 18px 13px 14px; cursor: pointer; list-style: none; }
.fd > summary::-webkit-details-marker { display: none; }
.fd > summary::before {
  content: "+"; grid-row: 1 / span 2; display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%;
  font-size: 1.15rem; font-weight: 800; line-height: 1; color: var(--x-ink); background: var(--x-head); transition: background 0.16s, color 0.16s;
}
.fd > summary:hover::before { color: #fff; background: var(--x); }
.fd[open] > summary::before { content: "\2212"; color: #fff; background: var(--x); }
.fd > summary:focus-visible { outline: 3px solid var(--violet); outline-offset: 2px; border-radius: 10px; }
.fd-t { font-size: 1.0625rem; font-weight: 700; line-height: 1.3; color: #0F172A; }
.fd-p { grid-column: 2; margin-top: 2px; font-size: 0.875rem; line-height: 1.45; color: #64748B; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.fd[open] > summary { border-bottom: 1px solid var(--x-line); }
.fd[open] .fd-p { display: none; }
.fd-b { padding: 2px 20px 10px; }
.fd .fs-card, .fd .sc { padding: 4px 0; background: none; border: 0; border-radius: 0; }
.fd .sc-r { padding-left: 0; padding-right: 0; }

/* specifiers inside a fold: one row each, the name on the left and what it means on the right */
.fsp-list { display: grid; }
.fsp { display: grid; grid-template-columns: minmax(8rem, 13.5rem) minmax(0, 1fr); gap: 4px 24px; padding: 13px 0; }
.fsp + .fsp, .fsp-h + .fsp, .fsp-note + .fsp, .fsp + .fsp-h { border-top: 1px solid var(--x-line); }
.fsp-n { margin: 0; font-size: 1rem; font-weight: 700; line-height: 1.45; color: var(--x-ink); }
.fsp-x { display: block; margin-top: 1px; font-size: 0.8125rem; font-weight: 500; color: #64748B; }
.fsp-d { font-size: 0.95rem; line-height: 1.55; color: #334155; }
.fsp-d > .fc-kids { margin-top: 6px; }
.fsp--name { grid-template-columns: minmax(0, 1fr); padding: 9px 0; }
.fsp--wide { display: block; }
.fsp--wide .fc-it { padding: 0; }
.fsp-c { padding: 0 5px; border-radius: 5px; font-weight: 700; white-space: nowrap; color: var(--x-ink); background: var(--x-head); }
.fsp-ul { margin: 6px 0 2px; }
.fsp-ul--cols { display: block; columns: 2 12.5rem; column-gap: 28px; }
.fsp-ul--cols li { break-inside: avoid; margin-bottom: 4px; }
.fsp-after { display: block; margin-top: 6px; }
.fsp-ul + .fc-kids { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--x-line); }   /* lines written under a specifier, after its symptom list */
.fsp-h .fc-sub { margin: 12px 0 2px; }
.fsp-note .fc-note, .fsp-note .fc-must, .fsp-note .fc-aid { margin: 8px 0; }

/* sections a page shows open (a page without lettered criteria, or a catch-all's examples) */
.fs { margin-top: 30px; }
.fs-h { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 1.2rem; font-weight: 750; line-height: 1.25; letter-spacing: -0.015em; color: #0F172A; }
.fs-h::before { content: ""; flex: none; width: 12px; height: 12px; border-radius: 4px; background: var(--x); }
.fs .fsp-list { padding: 2px 18px; border-radius: 14px; background: var(--x-bg); border: 1px solid var(--x-line); border-left: 5px solid var(--x); }
/* severity levels: a meter and the level on the left, what it means on the right */
.sc { border-radius: 14px; background: var(--x-bg); border: 1px solid var(--x-line); border-left: 5px solid var(--x); overflow: hidden; }
.sc-r { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 16px; padding: 12px 18px; }
.sc-r + .sc-r { border-top: 1px solid var(--x-line); }
.sc-n { margin: 0; font-size: 1rem; font-weight: 700; color: var(--x-ink); }
.sc-d { font-size: 0.94rem; line-height: 1.55; color: #334155; }
.fs-card { padding: 6px 18px; border-radius: 14px; background: var(--x-bg); border: 1px solid var(--x-line); border-left: 5px solid var(--x); }

.fc-tablewrap { overflow-x: auto; margin: 8px 0; border: 1px solid var(--x-line, #DAE2EB); border-radius: 12px; background: #fff; }
.fc-table { width: 100%; border-collapse: collapse; font-size: 0.94rem; line-height: 1.45; }
.fc-table th { text-align: left; padding: 9px 14px; font-size: 0.8rem; font-weight: 700; white-space: nowrap; color: var(--x-ink, #24384F); background: var(--x-bg, #F4F7FA); }
.fc-table td { padding: 9px 14px; border-top: 1px solid #EDF1F6; vertical-align: top; color: #334155; }
.fc-table td:first-child { font-weight: 650; color: #0F172A; white-space: nowrap; }

/* severity: a step meter, one more bar per level */
.fc-meter { display: inline-flex; align-items: flex-end; gap: 3px; margin-right: 10px; vertical-align: -1px; }
.fc-meter i { width: 6px; border-radius: 2px; background: #E2E8F0; }
.fc-meter i:nth-child(1) { height: 7px; }
.fc-meter i:nth-child(2) { height: 10px; }
.fc-meter i:nth-child(3) { height: 13px; }
.fc-meter i:nth-child(4) { height: 16px; }
.fc-meter i.on { background: var(--x, #7043D0); }
.fc-meter i.half { background: linear-gradient(90deg, var(--x, #7043D0) 50%, #E2E8F0 50%); }

@media (max-width: 640px) {
  .fc-top { padding: var(--s-3) var(--s-4) var(--s-4); border-radius: 16px; }
  .cx { border-radius: 14px; border-left-width: 5px; }
  .cx-h { padding: 14px; }
  .cx--bare .cx-h { padding-top: 12px; padding-bottom: 12px; }
  .cx-k--top, .cx-row { padding-left: 14px; padding-right: 14px; }
  .cx-h, .cx-row { grid-template-columns: 2.1rem minmax(0, 1fr); gap: 10px; }
  .cx-l { width: 2.1rem; height: 2.1rem; font-size: 1rem; }
  .cx-row .cx-l { width: 1.9rem; height: 1.9rem; margin-left: 0.1rem; }
  .cx-s { font-size: 1rem; }
  .cx-list { padding: 4px 14px 8px; }
  .cx-h .cx-ht > .fc-must, .cx-h .cx-ht > .fc-note { margin-left: calc(-2.1rem - 10px); }
  .ep { padding: 0 8px 8px; border-radius: 16px; }
  .ep-t { font-size: 1.125rem; }
  .fd > summary { padding: 12px 14px 12px 12px; column-gap: 10px; }
  .fd-b { padding: 2px 14px 8px; }
  .fsp { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .sc-r { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 12px 14px; }
  .fs-card { padding: 4px 14px; }
  .fs .fsp-list { padding: 2px 14px; }
}
@media print {
  .fc-top { color: #000; background: none; border: 1px solid #94A3B8; }
  .fc-title, .fc-eyebrow { color: #000; }
  .fc, .fc * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .cx, .fsp, .fc-it { break-inside: avoid; }
  .fd > summary::before, .ep > summary::after { display: none; }
  .fd > summary { grid-template-columns: minmax(0, 1fr); }
  .fd-p { display: none; }
}

/* while a diagnosis is open the long notice is one line */
.dc-notice-short { display: none; }
body.is-dx .dc-notice-body > p:not(.dc-notice-short) { display: none; }
body.is-dx .dc-notice-short { display: block; }
body.is-dx .dc-notice { padding-top: var(--s-2); padding-bottom: var(--s-2); }