/* WorldCat Discovery — natural-language results.
   Every value here comes from handoff/LOCKED-SPEC.md or the reference source.
   Don't re-derive them; see handoff/DESIGN-RATIONALE.md for why each is shaped this way. */

/* Inter variable fonts, extracted from the reference prototype so type metrics match it
   exactly. (Google Fonts serves Inter 4, which sets headings about 1% wider.) */
@font-face { font-family: "Inter"; src: url("fonts/Inter-Variable.ttf") format("truetype"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/Inter-Variable-Italic.ttf") format("truetype"); font-weight: 100 900; font-style: italic; font-display: swap; }

:root {
  --blue-700: #086DBA;
  --blue-800: #043C67;
  --blue-200: #EBF6FE;
  --masthead: #2E6295;
  --navy: #21507E;
  --c900: #0D1A2D;
  --c800: #1F303D;
  --c700: #394956;
  --c400: #BDCEDB;
  --c300: #E4ECF1;
  --c200: #F1F6F9;
  --snow: #FAFAFA;
  --linen: #F6F6F6;
  --purple-500: #4933B1;
  --purple-400: #6E54C1;
  --yellow-700: #863B00;
  --green-700: #005811;
  --available: #128128;
  --oa-orange: #f68212;
  --box: #F5F8FB;        /* dialog term box (Figma NLP dialogs) */
  --box-line: #CFD6DE;
  --alt-heading: #4A4F56; /* library's alternate heading, shown in place of a sensitive term */

  --shadow-3dp: 0 3px 5px -1px rgba(0,0,0,0.2), 0 6px 10px 0 rgba(0,0,0,0.14);
  --shadow-6dp: 0 6px 10px rgba(13,26,45,0.14), 0 1px 18px rgba(13,26,45,0.10);
  --shadow-24dp: 0 11px 15px -7px rgba(13,26,45,0.20), 0 24px 38px 3px rgba(13,26,45,0.14);

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --t-hover: background-color 120ms var(--ease), border-color 120ms var(--ease), color 120ms var(--ease);
  --t-move: transform 200ms var(--ease);
}

/* Content-box sizing, as in the reference: fixed widths (panel 280, action column 104,
   hover-card columns) are content widths, with padding and borders added outside. */
body { margin: 0; background: var(--snow); font-family: Inter, sans-serif; }
a { color: var(--blue-700); }
a:hover { color: var(--blue-800); }
button { font-family: Inter, sans-serif; }
svg { display: block; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nw { white-space: nowrap; }

.page {
  width: 100%; max-width: 1440px; margin: 0 auto; background: var(--snow);
  color: var(--c900); -webkit-font-smoothing: antialiased;
}

/* ---------- Masthead ---------- */
.masthead { background: var(--masthead); display: flex; align-items: center; gap: 24px; padding: 0 28px; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; color: #fff; width: 300px; }
.brand__mark { width: 30px; height: 30px; background: #fff; color: var(--masthead); border-radius: 3px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 19px; }
.brand__text { display: flex; flex-direction: column; line-height: 1.05; }
.brand__name { font-size: 20px; font-weight: 700; letter-spacing: 0.4px; }
.brand__sub { font-size: 8.5px; letter-spacing: 1.1px; opacity: 0.85; }
.searchwrap { flex: 1; display: flex; justify-content: center; }
.search { width: 640px; max-width: 100%; height: 40px; background: #fff; border-radius: 4px; display: flex; align-items: center; padding: 0 12px 0 14px; gap: 10px; box-shadow: 0 1px 2px rgba(0,0,0,0.2); }
.search__text { flex: 1; min-width: 0; font-size: 15px; color: var(--c900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.signin { width: 300px; display: flex; justify-content: flex-end; }
.signin a { color: #fff; text-decoration: none; font-size: 15px; }

/* ---------- Nav strip ---------- */
.nav { box-sizing: border-box; background: var(--navy); height: 40px; padding: 0 28px; display: flex; align-items: center; gap: 22px; color: #fff; font-size: 13.5px; }
.nav a { color: #fff; text-decoration: none; display: flex; align-items: center; white-space: nowrap; }
.nav a:hover { color: #fff; text-decoration: underline; }
.nav__resources { gap: 4px; }
.nav__icon { gap: 6px; }
.nav__spacer { flex: 1; }

/* ---------- Utility row ---------- */
/* White band with hairlines above and below, 68px tall on desktop (Figma NLP, node 47:111184) */
.utility { box-sizing: border-box; min-height: 68px; padding: 12px 28px; background: #fff; border-top: 1px solid var(--c300); border-bottom: 1px solid var(--c300); display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; font-size: 14px; line-height: 20px; }
.filters-btn { display: none; align-items: center; gap: 6px; background: #fff; color: var(--blue-700); border: 1px solid var(--c400); border-radius: 6px; height: 32px; padding: 0 12px; font: 600 13px Inter, sans-serif; cursor: pointer; white-space: nowrap; transition: var(--t-hover); }
.filters-btn:hover { background: var(--blue-200); }
.ublock__bar { color: var(--c400); }
.ucount { font-weight: 600; color: var(--c900); white-space: nowrap; }
.utility > a { white-space: nowrap; }
.uspacer { display: none; }
.usave { margin-left: auto; } /* Save Search and Create Alert hold the right edge, even when the row wraps */
.uicon { display: flex; align-items: center; gap: 4px; }
.uicon img { flex: 0 0 20px; }
.ualert { margin-left: -4px; } /* Save Search and Create Alert sit 8px apart */

/* What changed in this search: a 1 × 20 rule before each label + link pair */
.ureport { display: flex; align-items: center; gap: 12px; margin-left: 4px; }
.ureport__rule { width: 1px; height: 20px; background: var(--c400); flex: 0 0 1px; }
.ureport__pair { display: flex; align-items: center; gap: 12px; white-space: nowrap; }
.ureport__label { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--c900); }
.ureport__label img { flex: 0 0 20px; }

/* ---------- Layout row ---------- */
.layout { display: flex; gap: 40px; padding: 16px 28px 48px; align-items: flex-start; }
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.stack-12 { display: flex; flex-direction: column; gap: 12px; }

/* ---------- Facet rail ---------- */
.rail { width: 200px; flex: 0 0 200px; display: flex; flex-direction: column; }
.facet { display: flex; align-items: center; justify-content: space-between; padding: 14px 4px; border-bottom: 1px solid var(--c400); font-size: 14.5px; font-weight: 400; color: var(--c900); }
.facet-group { border-bottom: 1px solid var(--c400); }
.facet-group .facet { box-sizing: border-box; border-bottom: 0; width: 100%; background: none; border-top: 0; border-left: 0; border-right: 0; font-family: inherit; text-align: left; cursor: pointer; }
.chev { transition: var(--t-move); flex: 0 0 auto; }
[aria-expanded="true"] > .chev { transform: rotate(180deg); }
.facet-panel { display: flex; flex-direction: column; gap: 2px; padding: 16px 4px 14px; font-size: 12px; color: var(--c900); line-height: 17px; }
.facet-panel[hidden] { display: none; }
.facet-panel a { color: var(--blue-700); text-decoration: underline; text-underline-offset: 2px; padding: 3px 0; }
.facet-panel a:hover { color: var(--blue-800); }
.facet-panel .facet-more { padding: 6px 0 0; }
.facet-panel label { display: flex; align-items: flex-start; gap: 7px; padding: 3px 0; cursor: pointer; }
.facet-panel label.child { padding-left: 18px; }
.facet-panel input { width: 13px; height: 13px; margin: 1px 0 0; accent-color: var(--blue-700); flex: 0 0 13px; }

/* ---------- Result cards (Option E, chosen in card-options.html) ----------
   Three zones: what the work is (text), what you can do (side column), where it is
   (footer). Details opens directly under its own toggle. Cards respond to the results
   column's width, not the window, so dismissing the panel or opening Filters reflows them. */
.main { container-type: inline-size; }
.card { background: #fff; border: 1px solid var(--c400); border-radius: 6px; position: relative;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 20px;
  /* The side column spans the details row, and the 1fr row soaks up its extra height,
     so an open panel always starts right under its toggle. */
  grid-template-rows: auto 1fr auto;
  grid-template-areas: "cover main side" "cover det side" "foot foot foot"; }
.cover { grid-area: cover; display: block; object-fit: contain; width: 60px; height: 80px; margin: 16px 0 14px 18px; }
.card--top .cover { width: 80px; height: 108px; margin: 20px 0 16px 22px; }

.meta { grid-area: main; min-width: 0; display: flex; flex-direction: column; gap: 6px; margin: 16px 0 14px; }
.card--top .meta { margin: 20px 0 16px; }
.chips { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; }
.chip { box-sizing: border-box; display: inline-flex; align-items: center; gap: 5px; height: 18px; border-radius: 999px; padding: 0 8px; font-size: 11px; font-weight: 600; line-height: 1; white-space: nowrap; border: 1px solid var(--c400); background: #fff; color: var(--c900); }
.chip--best { background: var(--c200); color: var(--c800); }
.title { font-weight: 600; color: var(--blue-700); text-decoration: none; font-size: 15.5px; line-height: 22px; }
.title:hover { text-decoration: underline; text-underline-offset: 3px; }
.card--top .title { font-size: 17px; line-height: 24px; }
.by { display: flex; flex-wrap: wrap; column-gap: 6px; font-size: 13px; line-height: 19px; color: var(--c700); }
.seg { white-space: nowrap; } /* each separator travels with the segment after it */
.scope { font-size: 13px; line-height: 20px; color: var(--c800); }
/* Topic cards get a summary too, capped at two lines so they stay a step lighter than best matches */
.card--cluster .scope { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Author link + hover card */
.author { position: relative; display: inline-flex; align-items: center; }
.author > a { color: var(--c800); text-decoration: underline; text-decoration-color: var(--c400); text-underline-offset: 2px; }
.author > a:hover, .author.is-open > a { color: var(--blue-800); text-decoration-color: currentColor; }
.acard { position: absolute; top: 20px; left: -6px; z-index: 30; display: none; background: #fff; border: 1px solid var(--c400); border-radius: 9px; box-shadow: var(--shadow-6dp); overflow: hidden; cursor: default; }
.author.is-open .acard { display: flex; }
.acard__portrait { width: 152px; flex: 0 0 152px; background: var(--c200); border-right: 1px solid var(--c300); display: flex; align-items: center; justify-content: center; color: #758FA3; font-size: 11px; text-align: center; padding: 12px; }
.acard__body { width: 268px; flex: 0 0 268px; padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; }
.acard__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.acard__x { background: none; border: 0; padding: 0; cursor: pointer; border-radius: 4px; }
.acard__name { font-size: 18px; font-weight: 600; color: var(--c900); line-height: 24px; }
.acard__desc { font-size: 13px; font-style: italic; font-family: Inter, sans-serif; color: var(--c800); line-height: 19px; }
.acard__dates { font-size: 13px; color: var(--c800); }
.acard__uri { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--blue-700); text-decoration: none; align-self: flex-start; }
.acard__uri span { text-decoration: underline; text-underline-offset: 2px; }
.acard__rule { height: 1px; background: var(--c300); margin: 2px 0; }
.acard__link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--blue-700); text-decoration: none; align-self: flex-start; }
.acard__link:hover { text-decoration: underline; }

/* Side column: the original stacked, labelled actions behind a hairline rule */
.actions { grid-area: side; width: 104px; margin: 16px 18px 14px -4px; padding-left: 12px; border-left: 1px solid var(--c300); align-self: stretch; display: flex; flex-direction: column; gap: 3px; }
.card--top .actions { margin: 20px 22px 16px -4px; }
.btn { height: 26px; padding: 0 6px; border: 0; border-radius: 6px; background: none; color: var(--blue-700); font: 600 12px Inter, sans-serif; display: flex; align-items: center; gap: 5px; justify-content: flex-start; cursor: pointer; white-space: nowrap; transition: var(--t-hover); }
.btn:hover { background: var(--blue-200); }
.btn--primary { height: 28px; justify-content: center; padding: 0 8px; background: var(--blue-700); color: #fff; border: 1px solid var(--blue-700); }
.btn--primary:hover { background: var(--blue-800); border-color: var(--blue-800); }
.btn--more { height: 24px; color: var(--c700); gap: 3px; }
.btn--more:hover { background: var(--c200); }
.btn[aria-pressed="true"] { color: var(--blue-800); }
.bic { display: none; }
.more { position: relative; }
.menu { position: absolute; top: calc(100% + 4px); left: 0; width: 170px; background: #fff; border: 1px solid var(--c400); border-radius: 6px; box-shadow: var(--shadow-3dp); z-index: 5; padding: 4px 0; display: flex; flex-direction: column; }
.menu[hidden] { display: none; }
.menu a { padding: 7px 14px; font-size: 12.5px; color: var(--c800); text-decoration: none; transition: var(--t-hover); }
.menu a:hover { background: var(--c200); color: var(--c800); }

/* Details: toggle is the last line of the text; the panel opens directly under it */
.details-toggle { align-self: flex-start; margin: 2px 0 0 -8px; display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 8px; border: 0; border-radius: 6px; background: none; color: var(--blue-700); font: 600 12.5px Inter, sans-serif; cursor: pointer; transition: var(--t-hover); }
.details-toggle:hover { background: var(--blue-200); }
.details-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }
.details { grid-area: det; margin: -4px 0 0; padding: 12px 0 16px; border-top: 1px solid var(--c300); display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 6px 16px; font-size: 13px; line-height: 19px; }
.details[hidden] { display: none; }
.details dt { color: var(--c700); }
.details dd { margin: 0; color: var(--c800); }
.details .callrow { display: none; } /* the call number lives in the footer until phone width */

/* Footer: where the item is */
.foot { grid-area: foot; display: flex; align-items: center; gap: 6px 16px; padding: 9px 18px; border-top: 1px solid var(--c300); background: var(--snow); border-radius: 0 0 6px 6px; }
.card--top .foot { padding-left: 22px; padding-right: 22px; }
.status { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 6px; font-size: 12.5px; line-height: 18px; color: var(--c700); }
.status__ok, .status__annex { display: inline-flex; align-items: center; gap: 4px; vertical-align: top; font-weight: 600; white-space: nowrap; }
.status__ok { color: var(--available); }
.status__annex { color: var(--yellow-700); }
.status__where { color: var(--c800); }

@container (max-width: 560px) {
  .card { column-gap: 14px; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "cover main" "det det" "side side" "foot foot"; }
  .cover, .card--top .cover { width: 48px; height: 64px; margin: 14px 0 12px 14px; }
  .card--top .cover { width: 64px; height: 86px; }
  .meta, .card--top .meta { margin: 14px 14px 12px 0; }
  .card--top .title { font-size: 16px; line-height: 22px; }
  .card--top .scope { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  /* The side column becomes a row under the text: same buttons, same order */
  .actions, .card--top .actions { width: auto; margin: 0 14px; padding: 10px 0; border-left: 0; border-top: 1px solid var(--c300); flex-direction: row; align-items: center; gap: 2px; }
  .btn { height: 40px; padding: 0 10px; }
  .btn--primary { flex: 1; }
  .btn .lbl { display: none; }
  .btn--primary .lbl, .btn--solo .lbl, .btn--more .lbl { display: inline; }
  .bic { display: block; }
  .more { margin-left: auto; }
  .menu { left: auto; right: 0; }
  .menu a { padding: 10px 14px; }
  .details, .card--top .details { margin: -2px 14px 0; padding: 12px 0; grid-template-columns: 1fr; gap: 0; }
  .details dt { margin-top: 8px; font-size: 12px; }
  .details dt:first-child { margin-top: 0; }
  .details .callrow { display: block; }
  .foot, .card--top .foot { padding: 8px 14px; }
  .foot .status__call { display: none; }
}

/* ---------- Section heads ---------- */
.section { border-top: 1px solid var(--c400); padding-top: 20px; }
.section h2 { margin: 0; font-size: 17px; font-weight: 600; color: var(--c900); }

/* ---------- Other users have asked ---------- */
.asked { display: flex; flex-direction: column; gap: 12px; }
.qgrid { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 1fr; gap: 10px; }
/* Follows the results column, not the window, so it also goes single-column beside a docked panel */
@container (max-width: 560px) { .qgrid { grid-template-columns: 1fr; } }
.qcard { position: relative; overflow: hidden; background: #fff; border: 1px solid var(--c400); border-radius: 6px; padding: 13px 16px 13px 52px; font-size: 14.5px; color: var(--c800); text-decoration: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; transition: var(--t-hover); }
.qcard:hover { background: var(--blue-200); border-color: var(--blue-800); color: var(--blue-800); }
/* The glyph is square, so its width tracks its height. Capping it at 64px keeps its right
   edge at 42px or less, clear of the 52px text inset however many lines the question wraps to. */
.qcard__deco { position: absolute; left: -22px; top: 50%; transform: translateY(-50%); height: min(108%, 64px); width: auto; aspect-ratio: 1; fill: var(--purple-400); opacity: 0.25; pointer-events: none; }
.qcard__arrow { flex: 0 0 18px; fill: currentColor; }

/* ---------- Topics inside your question ---------- */
.topics { display: flex; flex-direction: column; gap: 8px; }
.topics__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.topics__blurb { font-size: 13px; color: var(--c900); }
.cluster { margin-top: 26px; display: flex; flex-direction: column; gap: 10px; }
.cluster__head { display: flex; flex-direction: column; gap: 3px; }
.cluster__row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.tchip { box-sizing: border-box; display: inline-flex; align-items: center; height: 22px; border-radius: 999px; padding: 0 11px; font-size: 12px; font-weight: 600; line-height: 1; white-space: nowrap; border: 1px solid currentColor; }
.cluster h3 { margin: 0; font-size: 17.5px; font-weight: 600; color: var(--c900); }
.cluster__count { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; font-size: 13px; color: var(--c700); }
.cluster__count::before { content: ""; width: 1px; height: 16px; background: var(--c400); }
/* Narrow results column: the count drops to its own line instead of wrapping behind a stranded divider */
@container (max-width: 560px) { .cluster__count { flex-basis: 100%; } .cluster__count::before { display: none; } }
.cluster__why { font-size: 13.5px; color: var(--c900); line-height: 20px; }
.cluster__more { display: flex; justify-content: flex-end; }
.cluster__more a { font-size: 14px; font-weight: 600; color: var(--blue-700); display: flex; align-items: center; gap: 7px; text-decoration: none; }
.cluster__more a:hover { text-decoration: underline; color: var(--blue-800); }

/* ---------- Knowledge panel ---------- */
.panel { width: 280px; max-width: 280px; flex: 0 0 280px; background: #fff; border: 1px solid var(--c400); border-radius: 9px; overflow: hidden; }
.panel[hidden] { display: none; }
.panel__head { background: var(--navy); color: #fff; padding: 11px 14px; display: flex; flex-direction: column; }
.panel__headrow { display: flex; align-items: flex-start; gap: 8px; }
.panel__titles { flex: 1; }
.panel__name { margin: 0; font-size: 16px; font-weight: 600; line-height: 21px; }
.panel__desc { font-size: 12px; font-style: italic; opacity: 0.9; margin-top: 2px; }
.panel__x { background: none; border: 0; padding: 0; cursor: pointer; flex: 0 0 20px; border-radius: 4px; }
.panel__chev { box-sizing: border-box; display: none; align-items: center; justify-content: center; cursor: pointer; padding: 2px 0 0; margin-top: 2px; background: none; border: 0; width: 100%; }
.panel__body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 13px; }
.panel__portrait { width: 100%; height: 240px; object-fit: cover; object-position: 50% 12%; border: 1px solid var(--c400); border-radius: 6px; display: block; }
.vitals { display: flex; border: 1px solid var(--c300); border-radius: 6px; background: rgba(33, 80, 126, 0.05); }
.vitals > div { flex: 1; padding: 6px 8px; display: flex; flex-direction: column; gap: 2px; }
.vitals > div + div { border-left: 1px solid var(--c300); }
.vitals__k { font-size: 12.5px; color: var(--c800); }
.vitals__v { font-size: 13px; font-weight: 600; }
.vitals__p { font-size: 12px; color: var(--c700); }
.psec { display: flex; flex-direction: column; gap: 10px; }
.psec__h { margin: 0; font-size: 14px; font-weight: 600; border-bottom: 1px solid var(--c400); padding-bottom: 5px; }
.featured { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.featured > div { display: flex; flex-direction: column; gap: 6px; }
.featured img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 6px; display: block; }
.featured a { font-size: 12px; line-height: 16px; }
.pgrid { display: grid; grid-template-columns: 68px 1fr; gap: 8px 10px; font-size: 13px; }
.pgrid__k { color: var(--c900); font-weight: 600; }
.pgrid__v { display: flex; flex-direction: column; gap: 3px; }
.panel__src { font-size: 12px; font-style: italic; color: var(--c700); }

/* ---------- Query-breakdown dialog ---------- */
.backdrop { position: fixed; inset: 0; z-index: 100; background: rgba(13, 26, 45, 0.5); display: flex; align-items: center; justify-content: center; padding: 40px; }
.backdrop[hidden] { display: none; }
/* DS Dialog (Figma NLP, nodes 47:112561 and 47:112702): 600px, 42px blue header,
   12px content padding, tinted term box, linen footer with 24px buttons */
.dialog { width: 600px; max-width: 100%; max-height: 100%; background: #fff; border-radius: 6px; box-shadow: var(--shadow-24dp); overflow: hidden; display: flex; flex-direction: column; }
.dialog__head { background: var(--blue-700); display: flex; align-items: center; gap: 16px; padding: 8px 12px; }
.dialog__head h2 { flex: 1; min-width: 0; margin: 0; font-size: 14px; font-weight: 600; letter-spacing: 0.07px; color: #fff; line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dialog__x { background: none; border: none; padding: 4px; cursor: pointer; line-height: 0; border-radius: 6px; flex: 0 0 auto; transition: var(--t-hover); }
.dialog__x:hover { background: var(--blue-800); }
.dialog__body { overflow-y: auto; padding: 16px 12px; display: flex; flex-direction: column; gap: 16px; }
.dialog__body p { margin: 0; font-size: 13px; line-height: 20px; color: var(--c900); }
/* Level 1: the query as typed, the anchor for everything below */
.dq { display: flex; flex-direction: column; gap: 2px; }
.dq__label { font-size: 12px; line-height: 16px; color: var(--c700); }
.dq__query { font-size: 15px; line-height: 22px; font-weight: 600; color: var(--c900); }
/* Level 2: one section per change, each behind a hairline: icon heading, what happened, the evidence */
.dsec { display: flex; flex-direction: column; gap: 8px; padding-top: 16px; border-top: 1px solid var(--c300); }
.dsec__head { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--c900); }
.dsec__head img { flex: 0 0 20px; }
.dsec p { color: var(--c800); }
.dsec .dialog__box { margin-top: 4px; }
.dialog__box { background: var(--box); border: 1px solid var(--box-line); border-radius: 6px; padding: 14px 16px; font-size: 13px; line-height: 20px; color: var(--c900); }
.dialog__foot { background: var(--linen); display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px; }
.dialog__close, .dialog__text-btn { height: 24px; padding: 0 12px; border-radius: 6px; font: 600 12px/16px Inter, sans-serif; letter-spacing: 0.06px; cursor: pointer; transition: var(--t-hover); }
.dialog__close { margin-left: auto; background: var(--blue-700); color: #fff; border: 0; }
.dialog__close:hover { background: var(--blue-800); }
.dialog__text-btn { background: none; color: var(--blue-700); border: 0; }
.dialog__text-btn:hover { background: var(--blue-200); }

/* Expanded Search Terms: a bold heading per group, terms indented 20px */
.exp { display: flex; flex-direction: column; gap: 14px; }
.exp__group { display: flex; flex-direction: column; gap: 6px; }
.exp__head { display: flex; align-items: center; gap: 10px; font-weight: 600; line-height: 18px; color: var(--c900); }
.exp__toggle { font-weight: 400; color: var(--blue-700); text-decoration: underline; background: none; border: 0; padding: 0; font: inherit; font-weight: 400; cursor: pointer; }
.exp__toggle:hover { color: var(--blue-800); }
.exp__terms { display: flex; flex-direction: column; gap: 4px; }
.exp__terms[hidden] { display: none; }
.exp__term { padding-left: 20px; line-height: 18px; color: var(--c800); }
.exp__term--alt { font-style: italic; color: var(--alt-heading); }

/* Focus rings for keyboard users only */
:focus-visible { outline: 2px solid var(--blue-700); outline-offset: 2px; }
.masthead :focus-visible, .nav :focus-visible, .panel__head :focus-visible, .dialog__head :focus-visible { outline-color: #fff; }

/* ---------- Responsive ---------- */
@media (max-width: 1200px) {
  .layout { flex-wrap: wrap; }
  .rail { display: none; }
  .rail.is-open { display: flex; width: 100%; flex: 1 1 100%; }
  .filters-btn { display: inline-flex; }
  .utility { flex-wrap: wrap; row-gap: 10px; }
  .brand, .signin { width: auto; }
  .searchwrap { min-width: 0; }
  .search { width: calc(100% - 26px); max-width: 640px; } /* 26px = horizontal padding; content-box */
}
@media (max-width: 1024px) {
  /* Panel moves to the TOP of the column and collapses to its header,
     so it never strands below a long result list. */
  .panel { flex: 1 1 100%; width: 100%; max-width: 100%; order: -1; }
  .rail.is-open { order: -2; } /* the Filters drawer opens right under its button, above the panel */
  .panel__chev { display: flex; }
  .panel:not(.is-expanded) .panel__body { display: none; }
  .layout { gap: 28px; }
  /* Let the nav wrap as whole links instead of squeezing each label onto two lines. */
  .nav { flex-wrap: wrap; height: auto; min-height: 40px; padding-top: 8px; padding-bottom: 8px; row-gap: 6px; }
  /* Keep the locked portrait box and callout width so the head-and-shoulders crop survives. */
  .panel__portrait, .vitals { width: 280px; max-width: 100%; }
}
@media (max-width: 620px) {
  .qgrid { grid-template-columns: 1fr; }
  .layout, .utility { padding-left: 16px; padding-right: 16px; }
  .backdrop { padding: 16px; }
  .masthead { flex-wrap: wrap; height: auto; padding: 12px 16px; gap: 12px; }
  .searchwrap { flex: 1 1 100%; order: 3; }
  .nav { flex-wrap: wrap; height: auto; padding: 8px 16px; gap: 6px 16px; }
  .nav__spacer { display: none; }
  .panel__portrait { height: 200px; }
  .vitals { width: 100%; }
  .acard { max-width: calc(100vw - 48px); }
  .acard__portrait { display: none; }
  .acard__body { width: 100%; flex: 1 1 auto; }
}

/* ---------- Docked-panel mode (?panel=dock), Option G, kept for comparison only ----------
   Tablet widths only: the chip in the utility row brings the right rail back as a 280px
   column beside the results, as on desktop. Phones keep the collapsed panel above results. */
.panel-chip { display: none; position: relative; align-items: center; gap: 8px; height: 32px; padding: 0 12px 0 4px; border: 1px solid var(--c400); border-radius: 6px; background: #fff; color: var(--c800); font: 600 12.5px Inter, sans-serif; cursor: pointer; white-space: nowrap; transition: var(--t-hover); }
.panel-chip:hover { background: var(--blue-200); border-color: var(--blue-800); color: var(--blue-800); }
.panel-chip[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.panel-chip img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; object-position: 50% 12%; }
/* Shown whenever the panel is closed, in every mode: on desktop default it's how the panel comes back */
.panel-hidden .panel-chip { display: inline-flex; }
/* Desktop: the same 1 × 20 rule and spacing as before the search notice (16px, rule, 12px) */
@media (min-width: 1201px) {
  .panel-chip { margin-left: 17px; }
  .panel-chip::before { content: ""; position: absolute; left: -14px; top: 5px; width: 1px; height: 20px; background: var(--c400); pointer-events: none; }
}
@media (min-width: 621px) and (max-width: 1024px) {
  .dock .panel-chip { display: inline-flex; }
  .dock .panel { order: 0; flex: 0 0 280px; width: 280px; max-width: 280px; position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; }
  .dock .panel__chev { display: none; }
  .dock .panel:not(.is-expanded) .panel__body { display: flex; }
  .dock .panel__portrait, .dock .vitals { width: auto; }
}

/* ---------- Knowledge panel, inline mode (the default) — LOCKED ----------
   Do not change without an explicit request. See README "Locked: tablet knowledge panel".
   app.js sets body.kp-inline at 1024px and below (tablet and phone) and, with ?desktop=chip,
   on desktop too. The chip opens the panel above the results: navy header, then the
   portrait beside Born/Died and featured titles, then related people and topics. */
.pp { display: none; }
.kp-inline .panel-chip { display: inline-flex; }
.kp-inline .panel { container-type: inline-size; }
.kp-inline .panel__head { display: flex !important; }
.kp-inline .panel__chev { display: none !important; } /* the chip opens and closes it */
.kp-inline .panel__body { display: none !important; }
.kp-inline .pp__title, .kp-inline .pp__x { display: none; } /* the navy header carries the name and X */
/* Only the arrangement is new. Every component is the panel's standard one: the Born/Died
   callout, 14px/600 section heads with their rule, 68px label/link grids, 12px italic source.
     portrait | name, Born/Died, Featured titles   (portrait height matches this column)
     Related people, then Topics of interest      label/value rows, full width
   In the rows, links run along one line separated by commas, so the stack stays short. */
.kp-inline .pp { display: flex; flex-direction: column; gap: 20px; position: relative; padding: 22px 24px 18px; }
.pp__id { position: relative; display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 20px;
  grid-template-areas: "portrait side"; }
.pp .featured { grid-template-columns: repeat(3, 60px); gap: 16px; }
.pp .featured img { border-radius: 4px; }
.pp__more { display: flex; flex-direction: column; gap: 20px; }
.pp .pgrid__v { display: block; }
.pp .pgrid__v a { white-space: nowrap; } /* rows wrap between names, never inside one */
.pp .pgrid__v a:not(:last-child) { margin-right: 4px; }
/* inline-block keeps the comma out of the link's underline */
.pp .pgrid__v a:not(:last-child)::after { content: ","; display: inline-block; color: var(--c700); }
.pp__portrait { grid-area: portrait; box-sizing: border-box; width: 100%; height: 0; min-height: 100%; /* contributes no height of its own, so the row is sized by the text column */ object-fit: cover; object-position: 50% 12%; border: 1px solid var(--c400); border-radius: 6px; }
.pp__side { grid-area: side; min-width: 0; display: flex; flex-direction: column; gap: 13px; }
.pp__title { padding-right: 32px; }
.pp__name { margin: 0; font-size: 18px; line-height: 24px; font-weight: 600; color: var(--c900); }
.pp__desc { margin: 2px 0 0; font-size: 13px; line-height: 19px; font-style: italic; color: var(--c800); }
.pp .vitals { width: auto; }
.pp__src { margin-top: -4px; }
.pp__x { position: absolute; top: -6px; right: -8px; background: none; border: 0; padding: 6px; border-radius: 6px; color: var(--c700); cursor: pointer; transition: var(--t-hover); }
.pp__x:hover { background: var(--c200); color: var(--c900); }
/* Phone-width panel: the portrait stacks above Born/Died and featured titles, as in the
   Figma phone frame, since two columns don't fit. */
@container (max-width: 520px) {
  .kp-inline .pp { padding: 16px; }
  .pp__id { grid-template-columns: minmax(0, 1fr); grid-template-areas: "portrait" "side"; }
  .pp__portrait { height: 280px; min-height: 0; } /* tall enough to keep head and shoulders in frame */
}

/* ---------- Desktop chip option (?desktop=chip) ----------
   A second desktop behaviour; the default is the right-rail panel with its own X and a
   "Show Abraham Lincoln panel" restore link. Here the panel starts open in the same right
   rail, and the chip in the utility row opens and closes it there. */
@media (min-width: 1025px) {
  .deskchip .panel-chip { display: inline-flex; }
}

/* ---------- Tablet header, utility row, and Filters drawer — LOCKED ----------
   Do not change without an explicit request. See README "Locked: tablet knowledge panel".
   1. Tablet panel has the original navy header with the name and descriptor.
   2. Tablet and phone utility row: Save Search and Create Alert share the first line with Filters.
   3. Retain/Clear Filters live at the top of the Filters drawer, not the utility row. */
.ubreak, .rail-actions { display: none; }
@media (max-width: 1200px) {
  .tablet .rail-actions { display: flex; align-items: center; gap: 14px; padding: 12px 4px; border-bottom: 1px solid var(--c400); font-size: 14px; }
  .tablet .rail-actions label { display: flex; align-items: center; gap: 5px; color: var(--c700); cursor: pointer; }
  .tablet .rail-actions input { width: 14px; height: 14px; margin: 0; accent-color: var(--blue-700); }
  .tablet .filters-btn { order: 1; }
  .tablet .usave { order: 2; margin-left: auto; }
  .tablet .ualert { order: 3; }
  .tablet .ubreak { display: block; order: 4; flex-basis: 100%; height: 0; }
  .tablet .ucount { order: 5; }
  .tablet .ureport { order: 6; flex-wrap: wrap; row-gap: 10px; column-gap: 20px; margin-left: 0; }
  .tablet .ureport__rule { display: none; } /* the pairs wrap here, and a rule would strand at a line end */
  .tablet .panel-chip { order: 8; }
}

/* ---------- Author bottom sheet (1024px and below) ----------
   Tapping an author opens the hover card's content as a sheet from the bottom edge. */
.sheet-scrim { position: fixed; inset: 0; z-index: 110; background: rgba(13, 26, 45, 0.5); display: flex; align-items: flex-end; justify-content: center; }
.sheet-scrim[hidden] { display: none; }
.sheet { box-sizing: border-box; width: 100%; max-width: 560px; max-height: 85vh; overflow-y: auto; background: #fff; border-radius: 16px 16px 0 0; box-shadow: var(--shadow-24dp); padding: 8px 20px calc(24px + env(safe-area-inset-bottom)); }
.sheet__handle { display: block; width: 36px; height: 4px; border-radius: 2px; background: var(--c400); margin: 0 auto 14px; }
.sheet__content { display: flex; gap: 16px; align-items: flex-start; }
.sheet .acard__portrait { display: flex; width: 88px; flex: 0 0 88px; height: 116px; border: 1px solid var(--c300); border-radius: 8px; }
.sheet .acard__body { width: auto; flex: 1 1 auto; min-width: 0; padding: 0; }

/* ---------- Motion — LOCKED: panel slide, and a question card running a new search ----------
   Do not change without an explicit request. Spec: HANDOFF.md section 8. */
.panel.is-sliding { overflow: hidden; }
.panel.is-sliding-x > * { width: 280px; box-sizing: border-box; } /* content keeps its width while the rail slides, so text doesn't reflow */

.search-progress { height: 3px; overflow: hidden; }
.search-progress span { display: block; height: 100%; width: 0; background: var(--blue-700); opacity: 0; }
/* Fills to 92% while searching, then completes and fades when results arrive */
.is-searching .search-progress span { width: 92%; opacity: 1; transition: width 800ms cubic-bezier(0.3, 0.4, 0.4, 1); }
.search-done .search-progress span { width: 100%; opacity: 0; transition: width 180ms ease, opacity 300ms ease 180ms; }
.is-searching .ucount { color: transparent; border-radius: 4px; background: var(--c300); }
.is-searching #results { pointer-events: none; }

.skel { display: block; border-radius: 4px; background: linear-gradient(90deg, #EAEFF3 25%, #F5F8FA 45%, #EAEFF3 65%); background-size: 300% 100%; animation: skel-shimmer 1.1s ease-in-out infinite; }
@keyframes skel-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
.skel-card { display: flex; gap: 20px; padding: 18px 20px; background: #fff; border: 1px solid var(--c300); border-radius: 6px; }
.skel-cover { width: 60px; height: 80px; flex: 0 0 60px; }
.skel-lines { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.skel-section { display: flex; flex-direction: column; gap: 14px; }
.skel-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.skel-q { height: 52px; border-radius: 6px; }
@container (max-width: 560px) { .skel-grid { grid-template-columns: 1fr; } }

/* New results rise into place, one section after another */
.results-enter > * { animation: results-in 420ms cubic-bezier(0.2, 0.7, 0.3, 1) both; }
.results-enter > :nth-child(2) { animation-delay: 70ms; }
.results-enter > :nth-child(3) { animation-delay: 140ms; }
@keyframes results-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- Retain | Clear Filters at the top of the facet rail (desktop) — LOCKED ----------
   Do not change without an explicit request. Spec: HANDOFF.md section 6. They sit directly above the
   facets they act on, so the utility bar carries only the result count, the search notice, the chip,
   and Save Search / Create Alert. At 1200px and below the pair is the first row of the Filters drawer
   (.rail-actions) instead. */
.rail-head { display: none; }
@media (min-width: 1201px) {
  .rail-head { display: flex; flex-direction: column; }
  /* The same Retain | Clear pair as the drawer, at 13px so it fits the 200px rail on one line */
  .rail-head__filters { display: flex; align-items: center; gap: 6px; padding: 0 4px 12px; font-size: 13px; line-height: 20px; white-space: nowrap; border-bottom: 1px solid var(--c400); }
  .rail-head__filters label { display: flex; align-items: center; gap: 5px; color: var(--c700); cursor: pointer; }
  .rail-head__filters input { width: 14px; height: 14px; margin: 0; accent-color: var(--blue-700); }
}