/* Functional Impact Library, page-scoped styles for /dc/functional-impacts.
 *
 * Loaded by that ONE page. Every selector sits under `.functional-impacts` on
 * <main>, so nothing here can reach another page, and every colour reads a
 * main.css token so the site's two dark-mode mechanisms (:root[data-theme] and
 * the prefers-color-scheme mirror) both work without a second palette.
 *
 * The approved treatment is the V2 mockup in
 * untracked_files/CODEX_CLAUDE_SHARE/FUNCTIONAL-IMPACT-MOCKUP-V2-2026-09-11.
 * It shares a design base with the Secondary Conditions Explorer, so the token
 * mapping below is the same one public/css/secondary-explorer.css uses, and
 * the 14 illustrations both pages show are the same files on disk.
 *
 * The artwork mat and the placeholder are the deliberate exceptions to the
 * token rule, fixed in both themes: the illustrations are painted on a warm
 * ivory ground, and flipping the mat to a dark surface cuts a hard edge around
 * every image.
 *
 * THE BUTTON LAW: a condition card carries 2px solid var(--color-accent) plus
 * the cursor-following glow from card-fx (class `cardfx-pop` in markup), a
 * hover lift, and a border shift to --color-primary.
 */

/* ════════════════════════════════════════════════════════════════════════
   PART 1: the public guide chrome, moved out of the page's two inline
   <style> blocks on 2026-09-11 with no rule changed. These are the styles
   the article half of this page has always used: the section frames, the
   jump pills, the tip and warning boxes, the impairment/impact comparison,
   the FAQ disclosures, the methodology block and the related-tool cards.
   They stayed byte-for-byte so the preserved prose renders exactly as it
   did; the only rules NOT carried over are the four that styled the old
   list rows (a.impact-card, .impact-readmore), which nothing renders now.
   ════════════════════════════════════════════════════════════════════════ */
.guide-section { margin-bottom: 2.5rem; }
.guide-section h2 { font-size: 1.25rem; color: var(--color-primary); margin-bottom: 0.75rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--color-border); }
.guide-section h3 { font-size: 1.05rem; color: var(--color-text); margin: 1.25rem 0 0.5rem; }
.guide-section p, .guide-section li { font-size: 0.92rem; line-height: 1.7; color: var(--color-text-muted); }
.guide-section ul, .guide-section ol { padding-left: 1.25rem; margin: 0.5rem 0; }
.guide-section li { margin-bottom: 0.35rem; }
.tip-box { background: rgba(232,181,74,.08); border-left: 4px solid var(--color-accent); border-radius: var(--radius-sm); padding: 1rem 1.25rem; margin: 1rem 0; font-size: 0.9rem; line-height: 1.6; }
.tip-box strong { color: var(--color-primary); }
.warning-box { background: rgba(198,40,40,.06); border-left: 4px solid var(--color-danger); border-radius: var(--radius-sm); padding: 1rem 1.25rem; margin: 0 0 2rem; font-size: 0.92rem; line-height: 1.6; }
.warning-box strong { color: var(--color-primary); display: block; margin-bottom: 0.3rem; }
.guide-nav { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2rem; }
.guide-nav a { font-size: 0.82rem; padding: 0.55rem 1rem; background: rgba(26,58,107,.06); color: var(--color-primary); border-radius: 20px; text-decoration: none; font-weight: 500; }
.guide-nav a:hover { background: rgba(26,58,107,.12); }
.compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem; margin: 0.75rem 0; }
.compare-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 1rem 1.1rem; }
.compare-card h3 { margin: 0 0 0.4rem; font-size: 0.98rem; color: var(--color-primary); }
.compare-card p { margin: 0; font-size: 0.88rem; }
@media (max-width: 640px) { .compare-grid { grid-template-columns: 1fr; } }
.faq-q { border: 1px solid var(--color-border); border-radius: var(--radius-sm); margin-bottom: 0.6rem; background: var(--color-surface); overflow: hidden; }
.faq-q summary { cursor: pointer; padding: 0.85rem 1rem; font-weight: 600; color: var(--color-text); font-size: 0.92rem; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; }
.faq-q summary::-webkit-details-marker { display: none; }
.faq-q summary::after { content: '+'; color: var(--color-primary); font-size: 1.2rem; flex: none; }
.faq-q[open] summary::after { content: '\2212'; }
.faq-q .faq-a { padding: 0 1rem 1rem; font-size: 0.9rem; line-height: 1.65; color: var(--color-text-muted); }
.dr-eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; font-weight: 700; color: var(--color-accent); margin-bottom: .5rem; }
.dr-method { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 1.1rem 1.25rem; margin: 0 0 2rem; }
.dr-method p { font-size: .9rem; line-height: 1.7; color: var(--color-text-muted); margin: 0 0 .6rem; }
.dr-method p:last-child { margin-bottom: 0; }
.dr-method strong { color: var(--color-text); }
.dr-meta { font-size: .82rem; color: var(--color-text-muted); }
.rel-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem; margin-top: 0.6rem; }
.rel-card .rc-t { font-weight: 700; color: var(--color-primary); margin-bottom: 0.25rem; font-size: 0.95rem; }
.rel-card .rc-d { font-size: 0.82rem; color: var(--color-text-muted); line-height: 1.5; }
@media (max-width: 640px) { .rel-cards { grid-template-columns: 1fr; } }

/* ════════════════════════════════════════════════════════════════════════
   PART 2: the illustrated library itself.
   ════════════════════════════════════════════════════════════════════════ */

.functional-impacts {
  --fi-gold:    var(--color-accent);
  --fi-surface: var(--color-surface);
  --fi-raised:  var(--color-bg-alt);
  --fi-line:    var(--color-border);
  --fi-muted:   var(--color-text-muted);
  --fi-link:    var(--color-primary);
  /* Artwork mat. Fixed in both themes on purpose, see the header. */
  --fi-ivory:   #f4f0e7;
  --fi-mat-edge:#c6a45160;
}

/* dc.css narrows every DC page to 900px for reading. The approved comp is a
   four-column catalogue on a 1248px field, so this ONE main opts out. The
   guide prose inside it keeps its own measure below. */
.functional-impacts > .container { max-width: 1248px; }

/* The hero keeps its .dc-hero class because tldr.js finds the page H1 through
   `.dc-hero h1`, and guide-nav.js mounts Quick Summary into `nav.guide-nav`.
   Only the treatment changes: the comp is left-aligned editorial, not the
   centred guide hero. */
.functional-impacts .dc-hero { text-align: left; margin-bottom: 1.1rem; }
.functional-impacts .dc-hero h1 {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4.1vw, 3.15rem);
  font-weight: 600;
  letter-spacing: -1.4px;
  line-height: 1.1;
  color: var(--color-text);
  margin-bottom: .6rem;
}
.functional-impacts .dc-hero > p {
  max-width: 46rem;
  margin: 0 0 .7rem;
  font-size: 1.08rem;
  line-height: 1.55;
}
.functional-impacts .dr-eyebrow { color: var(--fi-gold); }
.functional-impacts .fi-meta {
  display: flex; flex-wrap: wrap; gap: .35rem;
  font-size: .78rem; color: var(--fi-muted); margin: 0;
}
.functional-impacts .fi-meta strong { color: var(--color-text); font-weight: 600; }

/* ── Search ─────────────────────────────────────────────────────────────── */
/* ONE submission path. The form's submit event is the only thing that issues a
   typed search, so Enter and the Search button cannot both fire for the same
   keystroke. Live input is debounced separately and is cancelled by a submit. */
.functional-impacts .fi-search { max-width: 830px; margin-bottom: .9rem; }
.functional-impacts .fi-search label {
  display: block; font-weight: 600; font-size: .85rem; margin-bottom: .5rem;
}
.functional-impacts .fi-field {
  display: flex; align-items: center; gap: .1rem;
  background: var(--fi-surface);
  border: 1px solid var(--color-control-border);
  border-radius: 9px; padding: 6px;
}
.functional-impacts .fi-field:focus-within {
  box-shadow: 0 0 0 3px var(--color-primary-light);
}
.functional-impacts .fi-symbol {
  font-family: Georgia, serif; font-size: 2rem; line-height: 1;
  color: var(--fi-muted); margin: 0 .55rem 0 .6rem; transform: rotate(-18deg);
}
.functional-impacts .fi-field input {
  min-width: 0; width: 100%; border: 0; outline: 0; background: transparent;
  color: var(--color-text); padding: .6rem .5rem; font-size: 1rem;
  font-family: var(--font-sans);
}
.functional-impacts .fi-field input:focus-visible { outline: none; }
.functional-impacts .fi-field button[type="submit"] {
  border: 0; border-radius: 5px; background: var(--fi-gold);
  color: var(--color-on-accent); font-weight: 700; font-family: var(--font-sans);
  padding: .75rem 1.5rem; white-space: nowrap; cursor: pointer; min-height: 44px;
}
.functional-impacts .fi-field button[type="submit"]:hover { background: var(--color-accent-light); }
.functional-impacts .fi-field button[type="submit"] span { margin-left: .8rem; }
.functional-impacts .fi-below {
  display: flex; justify-content: space-between; align-items: center;
  gap: .9rem; min-height: 34px;
}
.functional-impacts .fi-help { font-size: .78rem; color: var(--fi-muted); margin: .55rem 0 0; }
.functional-impacts .fi-text-button {
  background: none; border: 0; color: var(--fi-link); padding: .5rem 0;
  font: 600 .82rem var(--font-sans); cursor: pointer; text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Browse controls ────────────────────────────────────────────────────── */
.functional-impacts .fi-browse-controls {
  display: flex; align-items: center; justify-content: space-between;
  gap: .95rem; padding-top: 1.4rem; flex-wrap: wrap;
}
.functional-impacts .fi-tabs {
  display: flex; padding: 4px; background: var(--fi-raised);
  border-radius: 9px; border: 1px solid var(--fi-line);
}
.functional-impacts .fi-tabs button {
  border: 1px solid transparent; background: transparent; cursor: pointer;
  font: 600 .88rem var(--font-sans); color: var(--fi-muted);
  padding: .62rem .95rem; border-radius: 6px; line-height: 1.4; min-height: 44px;
}
.functional-impacts .fi-tabs button[aria-pressed="true"] {
  background: var(--fi-surface); color: var(--color-text); border-color: var(--fi-gold);
}
.functional-impacts .fi-tabs span {
  font-size: .7rem; margin-left: .45rem; background: var(--fi-raised);
  padding: 2px 6px; border-radius: 4px;
}
.functional-impacts .fi-section-heading {
  display: flex; justify-content: space-between; gap: 1.5rem;
  align-items: center; margin: 1.7rem 0 1.45rem;
}
.functional-impacts .fi-section-heading h3 {
  font-family: var(--font-serif); font-size: 1.7rem; font-weight: 600;
  letter-spacing: -.5px; margin: 0 0 .5rem; color: var(--color-text);
}
.functional-impacts .fi-section-heading p {
  font-size: .88rem; color: var(--fi-muted); margin: 0; max-width: 46rem;
}
.functional-impacts .fi-index-label {
  font-size: .63rem; letter-spacing: 1.2px; color: var(--fi-muted); white-space: nowrap;
}

/* ── Condition cards ────────────────────────────────────────────────────── */
.functional-impacts .fi-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px;
}
.functional-impacts .fi-card {
  display: flex; flex-direction: column; position: relative; min-width: 0;
  text-align: left; border: 2px solid var(--color-accent); border-radius: 12px;
  background: var(--fi-surface); padding: 0; overflow: hidden; cursor: pointer;
  color: inherit; font-family: var(--font-sans);
  transition: transform .16s, box-shadow .16s, border-color .16s;
}
.functional-impacts .fi-card:hover,
.functional-impacts .fi-card:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary);
}
.functional-impacts .fi-art {
  height: 178px; background: var(--fi-ivory); overflow: hidden; position: relative;
  border-bottom: 1px solid var(--fi-mat-edge); isolation: isolate;
}
.functional-impacts .fi-art img {
  display: block; width: 100%; height: 100%; object-fit: cover; object-position: center;
}
/* Per-subject framing from the approved package: some illustrations need to be
   pushed off-centre so the card crop lands on the subject rather than on empty
   ground. These are the mockup's own values. */
.functional-impacts .fi-art.fi-art-tbi img { width: 132%; max-width: none; transform: translateX(-24%); }
.functional-impacts .fi-art.fi-art-fibromyalgia img { width: 122%; max-width: none; transform: translateX(-17%); }
.functional-impacts .fi-art.fi-art-joint-knee img { width: 200%; max-width: none; object-position: left center; }
.functional-impacts .fi-art.fi-art-joint-shoulder img { width: 200%; max-width: none; object-position: right center; transform: translateX(-50%); }
.functional-impacts .fi-art.fi-art-sciatica img,
.functional-impacts .fi-art.fi-art-vertigo img { width: 130%; max-width: none; transform: translateX(-21%); }
.functional-impacts .fi-art.fi-art-back-neck img { object-fit: contain; }

.functional-impacts .fi-art-placeholder {
  display: flex; align-items: center; justify-content: center; flex-direction: column;
  gap: .5rem; color: #756644; background: #f3eee3;
  background-image: radial-gradient(#99805e26 1px, transparent 1px);
  background-size: 12px 12px;
}
.functional-impacts .fi-placeholder-code {
  font: 600 2.3rem var(--font-serif); color: #8f7b56; line-height: 1;
}
.functional-impacts .fi-placeholder-label {
  font-size: .63rem; letter-spacing: 1.1px; text-transform: uppercase;
  border-top: 1px solid #c5b998; padding-top: .5rem; text-align: center;
  padding-left: .75rem; padding-right: .75rem;
}
.functional-impacts .fi-card-body {
  padding: 18px 17px 16px; display: flex; flex-direction: column; flex: 1;
  min-height: 135px;
}
.functional-impacts .fi-card-code {
  font-size: .63rem; letter-spacing: 1.1px; color: var(--fi-muted); margin-bottom: .45rem;
}
.functional-impacts .fi-card-title {
  font-family: var(--font-serif); font-size: 1.44rem; line-height: 1.13;
  letter-spacing: -.25px; font-weight: 600; flex: 1; margin: 0 0 1.05rem;
  color: var(--color-text); overflow-wrap: anywhere; hyphens: auto;
}
.functional-impacts .fi-card-bottom {
  display: flex; align-items: center; justify-content: space-between;
  font-size: .75rem; color: var(--fi-muted); gap: .5rem;
}
.functional-impacts .fi-card-bottom b { color: var(--color-text); font-weight: 600; }
.functional-impacts .fi-card-arrow { color: var(--fi-gold); font-size: 1.4rem; line-height: 1; }

.functional-impacts .fi-more-row { text-align: center; margin: 1.75rem 0 .75rem; }
.functional-impacts .fi-more-row button,
.functional-impacts .fi-more-results button {
  border: 1px solid var(--fi-gold); background: var(--fi-surface); color: var(--color-text);
  padding: .8rem 1.5rem; border-radius: 7px; font: 600 .88rem var(--font-sans);
  cursor: pointer; min-height: 44px;
}
.functional-impacts .fi-more-row button:hover,
.functional-impacts .fi-more-results button:hover { background: var(--fi-raised); }
.functional-impacts .fi-progress { color: var(--fi-muted); font-size: .75rem; margin-bottom: .75rem; }
.functional-impacts .fi-count-note {
  font-size: .72rem; line-height: 1.6; color: var(--fi-muted); margin: 1.25rem 0 0;
}

/* ── Reading view ───────────────────────────────────────────────────────── */
.functional-impacts .fi-reading-nav {
  display: flex; gap: .75rem; align-items: center; justify-content: space-between;
  margin: 1.7rem 0 1.1rem;
}
.functional-impacts .fi-reading-nav button {
  background: none; color: var(--fi-link); border: 0; font: 600 .88rem var(--font-sans);
  padding: .65rem 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.functional-impacts .fi-reading-nav > span { color: var(--fi-muted); font-size: .75rem; }
.functional-impacts .fi-reading-header {
  display: grid; grid-template-columns: minmax(0, 1fr) 225px; min-height: 200px;
  border: 2px solid var(--fi-gold); border-radius: 12px; overflow: hidden;
  background: var(--fi-surface); margin-bottom: 1.5rem;
}
.functional-impacts .fi-reading-header.fi-no-art { grid-template-columns: minmax(0, 1fr); }
.functional-impacts .fi-reading-copy { padding: 1.7rem 1.9rem; }
.functional-impacts .fi-reading-copy h2 {
  font: 600 2.35rem/1.15 var(--font-serif); letter-spacing: -.7px;
  margin: .5rem 0 .6rem; color: var(--color-text); overflow-wrap: anywhere;
  text-align: left;
}
.functional-impacts .fi-reading-copy h2:focus { outline: none; }
.functional-impacts .fi-reading-copy p {
  font-size: .88rem; color: var(--fi-muted); line-height: 1.6; margin: 0; max-width: 46rem;
}
.functional-impacts .fi-reading-copy .fi-reading-total { margin-top: .6rem; }
.functional-impacts .fi-reading-header .fi-art {
  height: 100%; min-height: 200px; border-bottom: 0; border-left: 1px solid var(--fi-mat-edge);
}
/* THE PICTURE FILLS ITS PANEL, exactly as it does on a card. The frame here
   stretches to whatever height the heading column needs, so a CONTAINED 4:3
   illustration left a band of bare mat above and below it, 21px each when the
   heading ran one line and more as it wrapped. That band was invisible while a
   caption sat in it and became a stray empty strip the moment the caption came
   off. Filling the panel is also what the cards do, so the two views now crop
   the same illustration the same way, and the per-subject object-position in
   the artwork map is what keeps the crop on the subject. */
.functional-impacts .fi-reading-header .fi-art img {
  object-fit: cover; width: 100%; height: 100%; transform: none;
}
.functional-impacts .fi-reading-header .fi-art.fi-art-joint-knee img,
.functional-impacts .fi-reading-header .fi-art.fi-art-joint-shoulder img { width: 200%; object-fit: cover; }
.functional-impacts .fi-reading-header .fi-art.fi-art-joint-knee img { transform: none; }

.functional-impacts .fi-reading-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) 225px; gap: 35px;
}
.functional-impacts .fi-reading-toolbar {
  display: flex; justify-content: space-between; align-items: center;
  gap: 1.25rem; margin-bottom: 1.05rem;
}
.functional-impacts .fi-reading-toolbar h3 {
  font: 600 1.6rem var(--font-serif); margin: 0; color: var(--color-text);
}
.functional-impacts .fi-reading-toolbar span { font-size: .75rem; color: var(--fi-muted); }

.functional-impacts .fi-excerpt {
  border: 1px solid var(--fi-line); border-left: 3px solid var(--fi-gold);
  border-radius: 7px; background: var(--fi-surface); padding: 1.45rem 1.55rem;
  margin-bottom: 1.1rem;
}
.functional-impacts .fi-excerpt:focus { outline: 2px solid var(--fi-gold); outline-offset: 3px; }
.functional-impacts .fi-excerpt-top {
  display: flex; gap: .75rem; align-items: flex-start; justify-content: space-between;
}
.functional-impacts .fi-cite {
  font: 500 .75rem/1.5 var(--font-sans); color: var(--fi-muted); margin: 0;
}
.functional-impacts .fi-cite a { font-weight: 600; }
.functional-impacts .fi-badges {
  display: flex; gap: .45rem; flex-wrap: wrap; justify-content: flex-end;
}
.functional-impacts .fi-badges span {
  font-size: .69rem; border: 1px solid var(--fi-line); padding: 3px 7px;
  border-radius: 4px; white-space: nowrap; color: var(--fi-muted);
}
/* The outcome badges read the site's THEME-AWARE status tokens rather than the
   comp's literals. The comp defines its green and blue for a dark page and
   overrides them for light; lifting only one half of that pair puts dark green
   ink on a dark card, which measured 2.19:1 here before this rule. These three
   tokens per status flip with both dark-mode mechanisms at once. */
.functional-impacts .fi-badges .fi-granted {
  border-color: var(--surface-success-border);
  color: var(--surface-success-text);
  background: var(--surface-success);
}
.functional-impacts .fi-badges .fi-increased {
  border-color: var(--surface-info-border);
  color: var(--surface-info-text);
  background: var(--surface-info);
}
.functional-impacts .fi-excerpt-condition {
  font-size: .82rem; font-weight: 500; color: var(--fi-muted); margin: .75rem 0 0;
}
.functional-impacts .fi-excerpt blockquote {
  font: 400 1.25rem/1.65 var(--font-serif); margin: 1.05rem 0 1.15rem;
  padding: 0; border: 0; color: var(--color-text);
}
.functional-impacts .fi-read-decision { font-size: .82rem; font-weight: 600; }

.functional-impacts .fi-sidebar { padding-top: .25rem; }
.functional-impacts .fi-sidebar h3 {
  font: 600 1.45rem var(--font-serif); margin: 0 0 .75rem; color: var(--color-text);
}
.functional-impacts .fi-sidebar p {
  font-size: .82rem; line-height: 1.75; color: var(--fi-muted); margin: 0 0 .5rem;
}
.functional-impacts .fi-sidebar a {
  display: block; padding: .8rem 0; border-bottom: 1px solid var(--fi-line); font-size: .82rem;
}
.functional-impacts .fi-sidebar .fi-sidebar-note { margin-top: 1.5rem; font-size: .75rem; }
.functional-impacts .fi-more-results { text-align: center; margin: 1.6rem 0; }

/* ── State panels ───────────────────────────────────────────────────────── */
/* V2 correction the owner asked for. The inherited panel button was gold-filled
   with dark ink; the comp put a dark surface behind it and kept the dark ink,
   which is the unreadable combination. These read theme tokens in both
   directions instead, with a 44px target and visible focus. */
.functional-impacts .fi-state {
  border: 2px solid var(--fi-gold); border-radius: 12px;
  padding: 2.6rem 1.6rem; background: var(--fi-surface); margin: 1.9rem 0;
}
.functional-impacts .fi-state h3 {
  font: 600 1.75rem var(--font-serif); margin: 0 0 .8rem; color: var(--color-text);
  text-align: left;
}
.functional-impacts .fi-state p {
  font-size: .95rem; color: var(--fi-muted); max-width: 46rem; margin: 0 0 1.25rem;
}
.functional-impacts .fi-state .dr-eyebrow { margin-top: 0; }
.functional-impacts .fi-state button {
  color: var(--color-text); background: var(--fi-surface);
  border: 1px solid var(--fi-gold); border-radius: 5px;
  font: 600 .88rem var(--font-sans); padding: .7rem 1.25rem;
  min-height: 44px; margin: 0 .5rem .6rem 0; cursor: pointer;
}
.functional-impacts .fi-state button:hover { background: var(--fi-raised); color: var(--color-text); }
.functional-impacts .fi-state button:focus-visible {
  outline: 3px solid var(--color-primary); outline-offset: 4px;
}
.functional-impacts .fi-skeleton {
  height: 150px; border: 1px solid var(--fi-line); border-radius: 12px;
  background: linear-gradient(105deg, var(--fi-surface) 30%, var(--fi-raised) 50%, var(--fi-surface) 70%);
  background-size: 250% 100%; animation: fi-shimmer 1.7s infinite;
}
@keyframes fi-shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
  .functional-impacts .fi-skeleton { animation: none; }
  .functional-impacts .fi-card { transition: none; }
}

/* ── About this research ────────────────────────────────────────────────── */
/* This wrapper is a details.guide-details on purpose. guide-nav.js opens every
   ANCESTOR matching that exact selector when a pill or a #hash targets a
   section, so #difference, #how and #faq still reveal their content from
   inside a collapsed About. A plain <details> here would swallow them. */
.functional-impacts .fi-about {
  margin: 2.5rem 0 1.25rem;
  border-top: 1px solid var(--fi-line); border-bottom: 1px solid var(--fi-line);
}
.functional-impacts .fi-about > summary {
  padding: 1.25rem 0; display: flex; justify-content: space-between;
  align-items: center; gap: 1.25rem; cursor: pointer; list-style: none;
}
.functional-impacts .fi-about > summary::-webkit-details-marker { display: none; }
.functional-impacts .fi-about > summary h2 {
  display: inline; font-size: 1.1rem; font-weight: 600; color: var(--color-text);
  border: 0; padding: 0; margin: 0; text-align: left;
}
.functional-impacts .fi-expand {
  font-size: .78rem; font-weight: 400; color: var(--fi-muted); white-space: nowrap;
}
.functional-impacts .fi-expand b { font-size: 1.4rem; font-weight: 400; color: var(--fi-link); margin-left: .75rem; }
.functional-impacts .fi-about > .details-body { padding: .3rem 0 1.5rem; }
/* Single column inside About, per the accepted design. */
.functional-impacts .fi-about .compare-grid { grid-template-columns: 1fr; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .functional-impacts .fi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
  .functional-impacts .fi-card-title { font-size: 1.38rem; }
  .functional-impacts .fi-reading-header { grid-template-columns: minmax(0, 1fr) 210px; }
  .functional-impacts .fi-reading-layout { grid-template-columns: minmax(0, 1fr) 200px; gap: 23px; }
}
@media (max-width: 760px) {
  .functional-impacts .fi-reading-layout { grid-template-columns: 1fr; }
  .functional-impacts .fi-sidebar { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
  .functional-impacts .fi-sidebar h3,
  .functional-impacts .fi-sidebar p { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .functional-impacts .fi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }
  .functional-impacts .dc-hero h1 { letter-spacing: -1px; }
  .functional-impacts .dc-hero > p { font-size: .95rem; }
  .functional-impacts .fi-meta { font-size: .68rem; }
  .functional-impacts .fi-symbol { font-size: 1.8rem; margin-left: .25rem; margin-right: .15rem; }
  .functional-impacts .fi-field button[type="submit"] { padding: .75rem .8rem; font-size: .82rem; }
  .functional-impacts .fi-field button[type="submit"] span { display: none; }
  .functional-impacts .fi-below { align-items: flex-start; }
  .functional-impacts .fi-tabs { width: 100%; }
  .functional-impacts .fi-tabs button { flex: 1; font-size: .78rem; padding: .7rem .45rem; }
  .functional-impacts .fi-index-label { display: none; }
  .functional-impacts .fi-art { height: 135px; }
  .functional-impacts .fi-card-body { padding: 13px 12px 12px; min-height: 124px; }
  .functional-impacts .fi-card-title { font-size: 1.25rem; line-height: 1.17; margin-bottom: .9rem; }
  .functional-impacts .fi-card-bottom { font-size: .63rem; }
  .functional-impacts .fi-section-heading { margin: 1.4rem 0 1.1rem; gap: .6rem; }
  .functional-impacts .fi-section-heading h3 { font-size: 1.5rem; }
  .functional-impacts .fi-reading-header { grid-template-columns: 1fr; min-height: 0; }
  /* Stacked, the art is a 135px banner across the top, so it goes back to
     filling its frame and cropping, with the caption on the picture again. */
  .functional-impacts .fi-reading-header .fi-art {
    grid-row: 1; height: 135px; min-height: 0; display: block; padding: 0;
    border-left: 0; border-bottom: 1px solid var(--fi-mat-edge);
  }
  .functional-impacts .fi-reading-header .fi-art img { height: 100%; object-fit: cover; }
  .functional-impacts .fi-reading-copy { padding: 1.3rem; }
  .functional-impacts .fi-reading-copy h2 { font-size: 2rem; line-height: 1.12; letter-spacing: -.5px; }
  .functional-impacts .fi-excerpt { padding: 1.1rem 1.05rem; }
  .functional-impacts .fi-excerpt-top { display: block; }
  .functional-impacts .fi-badges { justify-content: flex-start; margin-top: .55rem; }
  .functional-impacts .fi-excerpt blockquote { font-size: 1.18rem; line-height: 1.6; margin: .9rem 0 1.05rem; }
  .functional-impacts .fi-state { padding: 1.8rem 1.1rem; }
  .functional-impacts .fi-state h3 { font-size: 1.5rem; }
}
@media (max-width: 340px) {
  /* One card per row, laid on its side, so a long condition name still has a
     readable column instead of two 130px slivers. */
  .functional-impacts .fi-grid { grid-template-columns: 1fr; }
  .functional-impacts .fi-card { display: grid; grid-template-columns: 105px minmax(0, 1fr); }
  .functional-impacts .fi-card .fi-art {
    height: 100%; min-height: 149px; border-bottom: 0; border-right: 1px solid var(--fi-mat-edge);
  }
  .functional-impacts .fi-card-body { min-height: 149px; padding: 14px; }
  .functional-impacts .fi-card-title { font-size: 1.35rem; }
  .functional-impacts .fi-symbol { display: none; }
  .functional-impacts .fi-tabs button { font-size: .72rem; }
}