/* =============================================================================
   Browse page styles: the search engine UI + catalog view, re-tokenized onto
   the Stanford web-standards palette defined in hub.css. Loads AFTER hub.css.

   Rules of the system (mirrors hub.css — the approved AI Catalyst mockup):
     • Teal #b1040e is the single interactive accent; forest #2e2d29 for dark
       fills (active filter pills, buttons on hover); paper/white grounds.
     • Catalog-rail selected state = mint tint + bold ink + teal check +
       3px teal left edge; results filter strip = forest-filled active pill.
     • Roboto Mono for kickers/labels/meta; Source Serif 4 for display headings.
   ========================================================================== */

/* Aliases so the ported search rules keep their names */
:root {
  --cardinal-red: var(--teal);
  --ink-muted: var(--grey);
  --surface-soft: var(--fog);
  --highlight: #f8e9e7;
  --err: #991b1b;
}

/* ---------------------------------------------------------------------------
   Search bar (hero + sticky) — same DOM as renderSearchBar
   ------------------------------------------------------------------------ */
.search-form { width: min(880px, 100%); margin: 0; }
.search-shell {
  display: grid; grid-template-columns: auto 1fr auto; align-items: stretch; min-height: 52px;
  background: var(--white); border: 1px solid rgba(46, 45, 41, .12); border-radius: 4px;
  box-shadow: var(--shadow-1);
  overflow: visible;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.search-shell:focus-within { border-color: var(--teal); }
.search-form-compact .search-shell { min-height: 48px; }
.search-form-no-scope .search-shell { grid-template-columns: minmax(0, 1fr) auto; }
.search-form-no-scope .search-shell input { min-width: 0; border-radius: 5px 0 0 5px; }
.source-filter { position: relative; min-width: 0; }
.source-trigger {
  height: 100%; min-height: 46px; display: inline-flex; align-items: center; gap: .45rem;
  border: 0; border-right: 1px solid var(--border); background: #fff; color: var(--ink);
  padding: 0 1rem; border-radius: 5px 0 0 5px; white-space: nowrap; cursor: pointer;
  font-weight: 600; font-size: .9rem;
}
.source-trigger:hover { color: var(--ink); background: var(--fog); }
.search-shell input { min-width: 220px; border: 0; padding: 0 1rem; color: var(--ink); background: #fff; font-size: 1rem; }
.search-shell input::placeholder { color: var(--grey); }
.search-shell input:focus { outline: none; }
.search-button {
  min-width: 116px; border: 0; background: var(--red); color: #fff; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: 0 1.2rem; border-radius: 0 5px 5px 0; font-weight: 700; font-size: .98rem;
}
.search-button:hover:not(:disabled) { background: var(--red-dark); }
.search-button:disabled { opacity: .72; }
.spin { animation: hub-spin 1s linear infinite; }
@keyframes hub-spin { to { transform: rotate(360deg); } }

/* Source-filter popover */
.source-popover {
  position: fixed; width: min(360px, 92vw); background: #fff; border: 1px solid var(--border);
  border-radius: 10px; box-shadow: var(--shadow-3); padding: .75rem; z-index: 999; text-align: left;
}
.source-popover > input { width: 100%; min-width: 0; height: 42px; border: 1px solid var(--border); border-radius: 6px; padding: 0 .75rem; font-size: .9rem; }
.source-popover > input:focus { outline: none; border-color: var(--teal); }
.domain-list { max-height: 320px; overflow: hidden auto; padding: .5rem 0; display: grid; gap: .15rem; }
.domain-option { display: grid; grid-template-columns: 20px 1fr; gap: .6rem; align-items: center; padding: .5rem .55rem; border-radius: 6px; cursor: pointer; }
.domain-option:hover { background: var(--fog); }
.domain-option input { width: 18px; height: 18px; accent-color: var(--red); margin: 0; pointer-events: none; }
.domain-option strong { font-weight: 500; color: var(--ink); font-size: .9rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.popover-actions { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--border); padding-top: .65rem; }
.popover-actions button { border: 0; background: transparent; color: var(--red-dark); font-weight: 700; border-radius: 6px; padding: .55rem .75rem; cursor: pointer; }
.popover-actions button:last-child { background: var(--red); color: #fff; }
.popover-actions button:last-child:hover { background: var(--red-dark); }

/* Sticky search on results view */
.sticky-search {
  position: sticky; top: 82px; z-index: 30; background: rgba(255, 255, 255, .92);
  border-bottom: 1px solid var(--border); padding: .9rem 0; backdrop-filter: blur(12px);
}
.search-mode-toggle { display: flex; justify-content: flex-end; padding: .5rem .25rem 0; }
.search-mode-toggle .mode-pill {
  display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .9rem; border-radius: 999px;
  font-size: .85rem; font-weight: 600; cursor: pointer;
  background: var(--fog); color: var(--ink-soft); border: 1px solid var(--border);
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.search-mode-toggle .mode-pill svg { width: 14px; height: 14px; flex-shrink: 0; }
.search-mode-toggle .mode-pill:hover { border-color: var(--grey); color: var(--ink); background: #fff; }

/* ---------------------------------------------------------------------------
   Results stream
   ------------------------------------------------------------------------ */
/* minmax(0,1fr) matters: a grid's implicit `auto` column sizes to the item's
   max-content, so the answer layout ballooned past the 1200px shell and gave
   the whole results page a horizontal scrollbar (owner report 2026-08-29). */
.results-shell { padding: 2rem 0 4.5rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.2rem; }
.content-shell { width: min(1200px, calc(100% - 3rem)); margin: 0 auto; }

/* Answer card (Ivory layout) */
.ivory-answer {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, 300px);
  gap: clamp(1.2rem, 2.5vw, 2rem); background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: clamp(1.5rem, 2.8vw, 2.2rem);
}
.ivory-answer-main { min-width: 0; }
.ivory-sources { min-width: 0; border-left: 1px solid var(--border); padding-left: clamp(1rem, 2vw, 1.5rem); }
.ivory-sources .eyebrow { margin-bottom: .6rem; }
.ivory-sources .source-chips { flex-direction: column; }
.ivory-sources .source-chip { max-width: none; width: 100%; }
.ivory-sources .source-chip-text strong { max-width: none; }
.ivory-results { display: grid; gap: 1rem; }
.eyebrow { margin: 0 0 .75rem; color: var(--teal); text-transform: uppercase; letter-spacing: .12em; font: 500 13px var(--mono); }

.summary-header { display: flex; justify-content: space-between; gap: 1rem; align-items: center; border-bottom: 1px solid var(--border); padding-bottom: 1rem; margin-bottom: 1.1rem; }
.summary-header > span {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--serif); color: var(--ink);
  text-transform: none; letter-spacing: -.02em; font-size: 1.6rem; font-weight: 600;
}
.summary-header > span svg { color: var(--grey); }
.summary-header button { display: inline-flex; align-items: center; gap: .35rem; min-height: 36px; border: 1px solid var(--border); background: #fff; color: var(--ink-soft); border-radius: 6px; padding: .45rem .75rem; cursor: pointer; font-size: .88rem; }
.summary-header button:hover { color: var(--ink); background: var(--fog); }
.summary-body { font-size: 1rem; }
.summary-body h2 { font-family: var(--serif); font-size: 1.4rem; font-weight: 600; margin: 0 0 .65rem; }
.summary-body h3 { font-size: 1.1rem; }
.summary-body p, .summary-body li { color: var(--ink-soft); line-height: 1.65; }
.summary-body ul { list-style: disc; padding-left: 1.2rem; margin: .4rem 0; }
.summary-body ol { list-style: decimal; padding-left: 1.5rem; margin: .4rem 0; }
.summary-body li { margin: .3rem 0; }
.summary-body li::marker { color: var(--grey); font-weight: 700; }
.summary-body a:not(.citation-chip) { color: var(--red); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.summary-body a:not(.citation-chip):hover { color: var(--red-dark); }
.summary-body, .summary-body p, .summary-body li, .summary-body h2, .summary-body h3, .summary-body h4 { overflow-wrap: anywhere; word-break: break-word; }
.summary-body code { background: var(--fog); border-radius: 4px; padding: .05rem .3rem; font-size: .88em; }

.citation-chip {
  display: inline-flex; position: relative; align-items: center; justify-content: center;
  min-width: 26px; height: 21px; padding: 0 .35rem; margin: 0 .1rem; border-radius: 999px;
  background: var(--fog); border: 1px solid var(--border); color: var(--red-dark);
  text-decoration: none; font-weight: 700; font-size: .78rem; vertical-align: middle;
}
.citation-chip:hover { border-color: var(--grey); color: var(--red-dark); }
.cite-tip {
  position: fixed; display: none; width: min(300px, 90vw); max-height: 240px; overflow: hidden;
  background: #fff; color: var(--ink); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: var(--shadow-3); padding: .75rem; z-index: 1000; pointer-events: none;
}
.cite-tip strong { display: block; color: var(--ink); margin-bottom: .35rem; font-family: Consolas, ui-monospace, monospace; font-size: .8rem; }
.cite-tip em { color: var(--ink-soft); font-weight: 500; font-style: normal; font-size: .9rem; }

.source-chips { display: flex; flex-wrap: wrap; gap: .55rem; }
.source-chip {
  display: inline-flex; align-items: center; gap: .55rem; max-width: 340px;
  border: 1px solid var(--border); border-radius: 8px; padding: .5rem .7rem;
  background: #fff; text-decoration: none; color: var(--ink);
}
.source-chip:hover { border-color: var(--grey); background: var(--fog); color: var(--ink); }
.source-chip-num {
  display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--fog); color: var(--ink); border: 1px solid var(--border);
  font-size: .78rem; font-weight: 700; flex-shrink: 0;
}
.source-chip-text { display: flex; flex-direction: column; min-width: 0; }
.source-chip-text strong { font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 230px; }
.source-chip-text small { font-size: .78rem; color: var(--grey); }
.source-chip-ext { width: 14px; height: 14px; opacity: .6; flex-shrink: 0; color: var(--grey); }
.source-chip-ext svg { width: 100%; height: 100%; }

/* Feedback + related */
.feedback-strip { display: flex; align-items: center; gap: .5rem; border-top: 1px solid var(--border); margin-top: 1.1rem; padding-top: 1rem; color: var(--grey); font-size: .92rem; }
.feedback-strip button { min-width: 40px; min-height: 32px; border: 1px solid var(--border); background: #fff; border-radius: 999px; cursor: pointer; }
.feedback-strip button:hover:first-of-type { border-color: var(--green); background: rgba(177, 4, 14, .05); }
.feedback-strip button:hover:last-of-type { border-color: var(--err); background: rgba(153, 27, 27, .06); }
.feedback-strip button:disabled { opacity: .5; cursor: default; }
.comment-box { margin-top: .8rem; display: grid; gap: .45rem; }
/* display:grid above beats the `hidden` attribute's UA display:none, so the
   "What was wrong?" box showed permanently instead of only after a
   thumbs-down (owner report 2026-08-29). [hidden] must always win. */
.comment-box[hidden] { display: none; }
.comment-box label { color: var(--grey); font-size: .9rem; }
.comment-box textarea { height: 80px; resize: vertical; border: 1px solid var(--border); border-radius: 6px; padding: .75rem; }
.comment-box button { justify-self: start; background: var(--red); color: #fff; border: 0; border-radius: 6px; padding: .6rem 1rem; font-weight: 700; cursor: pointer; }
.comment-box button:hover { background: var(--red-dark); }
.comment-box button.feedback-cancel { background: transparent; color: var(--grey); font-weight: 600; padding: .55rem .8rem; }
.comment-box button.feedback-cancel:hover { color: var(--ink); background: transparent; }
.ask-next-under-summary { margin-top: clamp(.95rem, 1.8vw, 1.35rem); padding-top: clamp(.85rem, 1.5vw, 1rem); border-top: 1px solid var(--border-soft); }
.ask-next-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: .85rem; }
.ask-next-heading .eyebrow { margin-bottom: 0; }
.ask-next-under-summary .related-mini-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.related-mini-list { display: grid; gap: .75rem; }
.related-mini-list button {
  min-height: 2.8rem; display: inline-flex; align-items: flex-start; justify-content: flex-start; gap: .45rem;
  border: 1px solid var(--border); background: var(--fog); color: var(--ink); text-align: left;
  border-radius: 999px; padding: .68rem 1rem; cursor: pointer;
  transition: border-color .18s ease, background .18s ease;
}
.related-mini-list button span { white-space: normal; font-size: .92rem; line-height: 1.35; }
.related-mini-list button:hover, .related-mini-list button:focus-visible {
  border-color: var(--grey); background: #fff; color: var(--ink);
}

/* Facet rail (result-list chips) — selection is NEVER a red fill: fog ground,
   bold black text, small digital-red check. */
.facet-rail { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: .35rem 0; }
.facet-chip {
  display: inline-flex; align-items: center; gap: .3rem; border: 1px solid var(--border); background: #fff;
  color: var(--ink-soft); padding: .32rem .8rem; border-radius: 999px; font-size: .85rem; font-weight: 600;
  cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.facet-chip em { font-style: normal; font-size: .78rem; color: var(--grey); }
.facet-chip:hover:not(.is-active) { background: var(--mint-soft); border-color: var(--teal); }
.facet-chip.is-active { background: var(--mint-soft); color: var(--ink); border-color: var(--teal); font-weight: 700; }
.facet-chip.is-active::before {
  content: "check"; font-family: "Material Symbols Outlined"; font-size: 15px;
  color: var(--red); line-height: 1;
}
.facet-chip.is-active em { color: var(--grey); }
.facet-sep { width: 1px; height: 18px; background: var(--border); margin: 0 .25rem; }

/* Type badges + tags in result kicker — quiet grey, no red fills */
.type-badge {
  display: inline-flex; align-items: center; gap: .3rem; background: transparent;
  color: var(--teal); border: 0; border-radius: 0;
  padding: 0; font: 500 13px var(--mono); text-transform: uppercase; letter-spacing: .1em;
}
.type-badge .material-symbols-outlined { font-size: 15px; color: var(--grey); }
.svc-tag { background: var(--fog); border: 1px solid var(--border); border-radius: 4px; padding: .1rem .5rem; color: var(--ink-soft); font-weight: 600; }
.svc-tag.lvl { text-transform: capitalize; }

/* Result cards — larger titles, more padding, quiet freshness text */
.result-card, .no-results { background: var(--white); border: 1px solid var(--border); }
.result-card { border-radius: var(--radius); padding: 1.4rem 1.5rem; transition: border-color .18s ease, box-shadow .18s ease; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.1rem; }
.result-card:hover { border-color: var(--grey); box-shadow: var(--shadow-2); }
.result-card.result-card-media { grid-template-columns: auto minmax(0, 1fr) 168px; }
.result-rank { display: grid; place-items: start center; padding-top: .1rem; }
.result-rank span {
  width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%;
  background: var(--fog); border: 1px solid var(--border); color: var(--ink);
  font-size: .8rem; font-weight: 700;
}
.result-main-copy { min-width: 0; overflow-wrap: anywhere; }
.result-kicker { display: flex; gap: .55rem; flex-wrap: wrap; margin-bottom: .5rem; font-size: .8rem; color: var(--grey); align-items: center; }
.result-card h3 { font: 600 1.45rem/1.15 var(--serif); letter-spacing: -.015em; margin: 0 0 .45rem; }
.result-card h3 a { color: var(--ink); text-decoration: none; }
.result-card h3 a:hover { color: var(--red-dark); text-decoration: underline; text-underline-offset: 3px; }
.result-title-icon { display: inline; margin-left: .38rem; color: var(--grey); vertical-align: -.15em; }
.breadcrumbs { color: var(--grey); margin: .25rem 0; font-size: .8rem; }
.context-note { color: var(--grey); font-size: .88rem; font-style: italic; border-left: 2px solid var(--border); padding-left: .6rem; margin: .75rem 0; }
.snippet { font-size: .98rem; color: var(--ink-soft); line-height: 1.62; }
mark { background: var(--highlight); color: var(--ink); border-radius: 3px; padding: 0 .12rem; }
.result-thumb {
  position: relative; border: 1px solid var(--border); border-radius: 6px; overflow: hidden;
  padding: 0; background: #000; cursor: pointer; align-self: start; width: 168px; height: 96px;
}
.result-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .92; }
.result-thumb:hover img { opacity: 1; }
.thumb-play { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 40px; text-shadow: 0 2px 8px rgba(0, 0, 0, .5); }
.result-ctas { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .65rem; }
.result-cta {
  display: inline-flex; align-items: center; gap: .3rem; border: 1px solid var(--border);
  background: #fff; color: var(--red-dark); border-radius: 6px; padding: .32rem .75rem;
  font-size: .85rem; font-weight: 700; cursor: pointer; text-decoration: none;
}
.result-cta:hover { background: var(--fog); color: var(--red-dark); }
.result-cta-ghost { color: var(--ink-soft); }
.result-cta-ghost:hover { color: var(--ink); }
.results-count-strip {
  min-height: 32px; display: flex; align-items: center; color: var(--grey);
  background: transparent; border: 0; border-radius: 0;
  padding: .2rem 0; font-size: .92rem; justify-self: start;
}

/* Quick Look overlay */
.ql-overlay { position: fixed; inset: 0; background: rgba(46, 45, 41, .55); z-index: 300; display: grid; place-items: center; padding: 1rem; }
.ql-panel { width: min(760px, 100%); max-height: 90vh; overflow: auto; background: #fff; border-radius: var(--radius-lg); box-shadow: 0 30px 80px rgba(0, 0, 0, .35); }
.ql-head { display: flex; align-items: center; gap: .7rem; padding: 1rem 1.2rem; border-bottom: 1px solid var(--border); }
.ql-head h3 { margin: 0; font-size: 1.1rem; flex: 1; min-width: 0; }
.ql-close { border: 0; background: transparent; color: var(--grey); cursor: pointer; min-width: 36px; min-height: 36px; border-radius: 6px; }
.ql-close:hover { background: var(--fog); color: var(--ink); }
.ql-body { padding: 1rem 1.2rem; }
.ql-video { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 8px; background: #000; display: block; }
.ql-slide { width: 100%; border: 1px solid var(--border); border-radius: 8px; display: block; margin-bottom: .7rem; }
.ql-text { color: var(--ink-soft); line-height: 1.6; font-size: .95rem; white-space: pre-line; }
.ql-note { color: var(--grey); font-size: .85rem; margin: .5rem 0 0; }
.ql-foot { display: flex; align-items: center; gap: .7rem; padding: .85rem 1.2rem; border-top: 1px solid var(--border); }
.ql-meta { color: var(--grey); font-size: .85rem; text-transform: capitalize; }
.ql-cta { margin-left: auto; background: var(--red); color: #fff; border-radius: 6px; padding: .45rem .95rem; font-weight: 700; text-decoration: none; font-size: .9rem; }
.ql-cta:hover { background: var(--red-dark); color: #fff; }

/* Pagination */
.pagination { display: flex; justify-content: center; align-items: center; gap: .4rem; margin-top: 1.2rem; }
.pagination button { width: 38px; height: 38px; border: 1px solid var(--border); background: #fff; color: var(--ink); border-radius: 6px; display: grid; place-items: center; cursor: pointer; font-size: .92rem; }
.pagination button:hover:not(:disabled):not(.active-page) { background: var(--fog); }
.pagination button.active-page { background: var(--fog); color: var(--ink); border-color: var(--ink); font-weight: 700; }
.pagination button:disabled { opacity: .45; cursor: not-allowed; }

/* Loading + no-results */
.loading-stack { display: grid; gap: 1rem; }
.search-stages { display: grid; gap: .85rem; padding: 1.1rem 1.3rem 1.2rem; background: #fff; border: 1px solid var(--border); border-radius: 10px; }
.search-stages-title { display: flex; align-items: center; color: var(--grey); }
.search-stages-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.search-stage { display: grid; grid-template-columns: 22px 1fr; align-items: center; gap: .65rem; color: var(--grey); font-size: .95rem; opacity: .45; }
.search-stage .stage-icon { display: inline-block; width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; box-sizing: border-box; position: relative; }
.search-stage.stage-1 { animation: stageRun 8s ease-out 0s 1 forwards; }
.search-stage.stage-2 { animation: stageRun 8s ease-out 1.8s 1 forwards; }
.search-stage.stage-3 { animation: stageRunFinal 8s ease-out 4s 1 forwards; }
.search-stage.stage-1 .stage-icon { animation: stageIcon 8s ease-out 0s 1 forwards; }
.search-stage.stage-2 .stage-icon { animation: stageIcon 8s ease-out 1.8s 1 forwards; }
.search-stage.stage-3 .stage-icon { animation: stageIconFinal 1.2s linear 4s infinite; }
@keyframes stageRun {
  0% { opacity: 1; color: var(--ink); }
  35% { opacity: 1; color: var(--ink); }
  45% { opacity: 1; color: var(--green); }
  100% { opacity: 1; color: var(--green); }
}
@keyframes stageRunFinal { 0%, 100% { opacity: 1; color: var(--ink); } }
@keyframes stageIcon {
  0% { transform: rotate(0deg); border-color: transparent var(--ink) var(--ink) var(--ink); }
  35% { transform: rotate(900deg); border-color: transparent var(--ink) var(--ink) var(--ink); }
  45% { transform: rotate(0deg); border-color: var(--green); background: var(--green); }
  100% { transform: rotate(0deg); border-color: var(--green); background: var(--green); }
}
@keyframes stageIconFinal {
  0% { transform: rotate(0deg); border-color: transparent var(--ink) var(--ink) var(--ink); }
  100% { transform: rotate(360deg); border-color: transparent var(--ink) var(--ink) var(--ink); }
}
.search-stage.stage-1 .stage-icon::after,
.search-stage.stage-2 .stage-icon::after {
  content: ''; position: absolute; left: 3.5px; top: 0; width: 4px; height: 8px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); opacity: 0;
}
.search-stage.stage-1 .stage-icon::after { animation: checkFade 8s ease-out 0s 1 forwards; }
.search-stage.stage-2 .stage-icon::after { animation: checkFade 8s ease-out 1.8s 1 forwards; }
@keyframes checkFade { 0%, 44% { opacity: 0; } 46%, 100% { opacity: 1; } }
.shimmer { border-radius: 10px; background: linear-gradient(90deg, var(--fog) 0%, #fff 50%, var(--fog) 100%); background-size: 220% 100%; animation: hub-shimmer 1.4s infinite; border: 1px solid var(--border-soft); }
.summary-placeholder { height: 320px; }
.result-placeholder { height: 150px; }
.no-results { border-radius: var(--radius-lg); padding: 2.5rem 2rem; text-align: center; color: var(--ink-soft); }
.no-results svg { color: var(--grey); margin: 0 auto .75rem; }
.no-results h2 { margin: 0 0 .5rem; }
.no-results p { font-size: 1rem; }
.no-results div { display: flex; justify-content: center; flex-wrap: wrap; gap: .6rem; margin-top: 1.2rem; }
.no-results button, .no-results a { min-height: 44px; border: 1px solid var(--border); border-radius: 6px; background: #fff; color: var(--red-dark); padding: .6rem 1rem; text-decoration: none; font-weight: 700; cursor: pointer; font-size: .95rem; }
.no-results button:hover, .no-results a:hover { background: var(--fog); }
.reveal { animation: reveal .42s ease both; }
@keyframes reveal { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* Markdown tables in snippets / summary */
.md-table-wrap { overflow-x: auto; margin: .55rem 0; border: 1px solid var(--border); border-radius: 6px; background: #fff; }
.md-table { width: 100%; border-collapse: collapse; font-size: .9rem; line-height: 1.45; }
.md-table th, .md-table td { padding: .5rem .7rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); }
.md-table th { background: var(--fog); color: var(--ink); font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; }
.md-table tr:last-child td { border-bottom: 0; }
.md-table tr:nth-child(even) td { background: rgba(244, 244, 244, .5); }

/* Conversational follow-up chain + caption — neutral fog strip */
.conversation-chain { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .65rem; padding: .7rem 1rem; margin-bottom: 1rem; background: var(--fog); border: 1px solid var(--border-soft); border-radius: 8px; }
.conversation-chain .chain-label { color: var(--grey); font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.conversation-chain .chain-chips { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; flex: 1 1 auto; min-width: 0; }
.conversation-chain .chain-arrow { color: var(--grey); font-size: .9rem; padding: 0 .15rem; }
.conversation-chain .chain-chip { border: 1px solid var(--border); background: #fff; color: var(--red-dark); padding: .3rem .7rem; border-radius: 999px; font-size: .85rem; font-weight: 600; cursor: pointer; max-width: 28ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conversation-chain .chain-chip:hover:not([disabled]) { border-color: var(--grey); }
.conversation-chain .chain-chip--current { background: #fff; border-color: var(--ink); color: var(--ink); font-weight: 700; cursor: default; }
.conversation-chain .chain-reset { border: 0; background: transparent; color: var(--red-dark); font-size: .85rem; font-weight: 700; padding: .3rem .55rem; border-radius: 6px; cursor: pointer; }
.conversation-chain .chain-reset:hover { text-decoration: underline; text-underline-offset: 3px; }
.rewrite-caption { margin: 0 0 .8rem; font-size: .85rem; color: var(--grey); }
.rewrite-caption em { color: var(--ink-soft); font-style: normal; font-weight: 600; }

/* ---------------------------------------------------------------------------
   Catalog view (no query) — editorial page header + left filter rail + grid
   ------------------------------------------------------------------------ */
.browse-intro { padding: 3.4rem 0 2.8rem; background: transparent; border-bottom: 1px solid var(--border); }
.browse-intro h1 { margin-bottom: .5rem; font-size: clamp(40px, 5vw, 64px); }
.browse-intro p { color: var(--ink-soft); margin: 0 0 1.6rem; max-width: 66ch; font-size: 1.05rem; }
.browse-intro .try-line { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; color: var(--grey); font-size: .9rem; margin: .9rem 0 0; }

.browse-layout { display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: 2.2rem; padding: 2.2rem 0 4.5rem; align-items: start; }

/* Filter rail — group headers in small-caps grey; selected options get fog
   ground + bold black + digital-red check + 3px digital-red left edge. */
.browse-rail { display: flex; flex-direction: column; gap: 1.1rem; position: sticky; top: 96px; }
.rail-group { background: transparent; border: 0; border-radius: 0; box-shadow: none; overflow: hidden; border-bottom: 1px solid var(--border-soft); padding-bottom: .6rem; }
.rail-group summary {
  display: flex; align-items: center; gap: .5rem; cursor: pointer; list-style: none;
  padding: .45rem .2rem; font: 600 1.05rem/1.2 var(--serif); color: var(--ink);
  letter-spacing: -.01em; user-select: none;
}
.rail-group summary::-webkit-details-marker { display: none; }
.rail-group summary .material-symbols-outlined { display: none; }
.rail-group summary .g-count { margin-left: auto; font-size: .78rem; font-weight: 700; color: var(--ink); background: var(--fog); border: 1px solid var(--border); border-radius: 999px; padding: .05rem .5rem; text-transform: none; letter-spacing: 0; }
.rail-group summary .chev { margin-left: .1rem; color: var(--grey); font-size: 18px; transition: transform .18s ease; }
.rail-group summary .g-count + .chev { margin-left: .35rem; }
.rail-group[open] summary .chev { transform: rotate(180deg); }
.rail-group summary:hover { color: var(--ink); background: transparent; }
.rail-options { display: flex; flex-direction: column; padding: .25rem 0 .2rem; }
.rail-opt {
  display: flex; align-items: center; gap: .5rem; width: 100%; text-align: left;
  border: 0; border-left: 3px solid transparent;
  background: transparent; color: var(--ink-soft); cursor: pointer;
  font-size: 1rem; font-weight: 500; padding: .5rem .55rem; border-radius: 0 4px 4px 0;
  transition: background .12s ease, color .12s ease;
}
.rail-opt:hover { background: var(--mint-soft); color: var(--ink); }
.rail-opt .material-symbols-outlined { font-size: 17px; color: var(--grey); }
.rail-opt em { font-style: normal; margin-left: auto; font-size: .82rem; color: var(--grey); }
.rail-opt .rail-check { display: none; font-size: 16px; color: var(--red); }
.rail-opt[aria-pressed="true"] {
  background: var(--mint-soft); color: var(--ink); font-weight: 700;
  border-left-color: var(--teal);
}
.rail-opt[aria-pressed="true"] .rail-check { display: inline-block; }
.rail-opt[aria-pressed="true"] .material-symbols-outlined:not(.rail-check) { color: var(--ink); }
.rail-opt[aria-pressed="true"] em { color: var(--grey); }
.rail-clear { margin: .3rem 0 0; border: 0; background: transparent; color: var(--red-dark); border-radius: 4px; padding: .4rem .2rem; font-size: .88rem; font-weight: 600; cursor: pointer; text-align: left; }
.rail-clear:hover { text-decoration: underline; text-underline-offset: 3px; }

.browse-main { min-width: 0; }
/* Applied-filter summary, pinned above the toolbar/results — every active
   filter as a removable chip, plus one Clear all. */
.active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: 1rem; }
.active-filter-chip {
  display: inline-flex; align-items: center; gap: .35rem; border: 1px solid var(--teal); background: var(--mint-soft);
  color: var(--ink); border-radius: 999px; padding: .32rem .55rem .32rem .85rem; font-size: .85rem; font-weight: 600; cursor: pointer;
}
.active-filter-chip .material-symbols-outlined { font-size: 16px; color: var(--ink-soft); }
.active-filter-chip:hover { border-color: var(--forest); background: var(--mint); }
.active-filter-chip:hover .material-symbols-outlined { color: var(--forest); }
.active-filters-clear { border: 0; background: transparent; color: var(--red-dark); font-size: .85rem; font-weight: 700; cursor: pointer; padding: .32rem .3rem; }
.active-filters-clear:hover { text-decoration: underline; text-underline-offset: 3px; }
.browse-toolbar { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-bottom: 1.2rem; color: var(--grey); font-size: .92rem; }
.browse-toolbar .count strong { color: var(--ink); }
.browse-toolbar .spacer { flex: 1; }
.browse-toolbar label { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; }
.browse-toolbar select { border: 1px solid var(--border); border-radius: 6px; padding: .4rem .5rem; background: #fff; color: var(--ink); font-size: .9rem; }
.active-filters { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .9rem; }

.catalog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem; }
.catalog-card {
  position: relative; display: flex; flex-direction: column; gap: .55rem;
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1.3rem;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.catalog-card:hover, .catalog-card:focus-within { border-color: var(--grey); box-shadow: var(--shadow-2); }
.catalog-card .card-link { color: inherit; text-decoration: none; }
.catalog-card .card-link::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.catalog-card .card-link:hover { color: var(--link-hover); }
.catalog-card .cat-title { font: 600 1.3rem/1.15 var(--serif); letter-spacing: -.015em; }
.catalog-card .cat-meta { color: var(--grey); font-size: .88rem; line-height: 1.5; }
.catalog-card .cat-updated { display: inline-flex; align-items: center; gap: .3rem; color: var(--grey); font-size: .82rem; margin-top: auto; padding-top: .4rem; }
.catalog-card .cat-updated .material-symbols-outlined { font-size: 14px; }
.browse-more { display: flex; justify-content: center; margin-top: 1.6rem; }

@media (max-width: 900px) {
  .browse-layout { grid-template-columns: 1fr; }
  .browse-rail { position: static; }
  .catalog-grid { grid-template-columns: repeat(2, 1fr); }
  .ivory-answer { grid-template-columns: 1fr; }
  .ivory-sources { border-left: 0; border-top: 1px solid var(--border); padding: 1rem 0 0; }
  .ivory-sources .source-chips { flex-direction: row; flex-wrap: wrap; }
  .ivory-sources .source-chip { width: auto; max-width: 340px; }
  .ask-next-under-summary .related-mini-list { grid-template-columns: 1fr; }
  .sticky-search { top: 0; }
}
@media (max-width: 700px) {
  .catalog-grid { grid-template-columns: 1fr; }
  .result-card.result-card-media { grid-template-columns: auto minmax(0, 1fr); }
  .result-thumb { display: none; }
  .result-card { padding: 1.1rem 1.15rem; }
  .search-shell { grid-template-columns: 1fr; overflow: hidden; }
  .source-trigger { width: 100%; justify-content: space-between; border-right: 0; border-bottom: 1px solid var(--border); border-radius: 5px 5px 0 0; min-height: 48px; }
  .search-shell input { min-width: 0; min-height: 50px; }
  .search-button { min-height: 50px; width: 100%; border-radius: 0 0 5px 5px; }
  .source-popover { position: fixed; inset: auto 1rem 1rem 1rem; top: auto; width: auto; max-height: 70vh; }
  .summary-header { align-items: flex-start; flex-direction: column; }
}

/* ===========================================================================
   Mockup-inherited browse view: browse hero · honest 3-step loader ·
   answer layout with source rail · filter strip · numbered result rows.
   (Appended last so these override the earlier card-based rules.)
   ======================================================================== */

/* Browse hero */
.browse-hero { padding: 68px 0 44px; background: var(--paper); border-bottom: 1px solid var(--line); position: relative; overflow: hidden; }
.browse-hero::after {
  content: ""; position: absolute; width: 270px; height: 270px;
  border: 1px solid rgba(140, 21, 21, .18); border-radius: 50%;
  right: -40px; top: -170px; box-shadow: 0 0 0 35px rgba(140, 21, 21, .035);
}
.browse-title-row { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-bottom: 30px; position: relative; z-index: 1; }
.browse-title-row h1 { font-size: clamp(42px, 5vw, 70px); line-height: .94; margin: 0; }
.browse-title-row > p { max-width: 430px; margin: 0; color: var(--ink-soft); font-size: 15px; }
.browse-hero .search-form { position: relative; z-index: 1; max-width: 980px; }
.browse-hero .try-line { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 7px 18px; margin: 15px 0 0; color: var(--ink-soft); font: 500 13px var(--mono); text-transform: uppercase; letter-spacing: .09em; }

/* Search shells site-wide pick up the mockup proportions */
.search-shell { border-color: rgba(46, 45, 41, .25); border-radius: 0; box-shadow: var(--shadow); }
.search-form-no-scope .search-shell input, .search-form .search-shell input { border-radius: 0; padding: 15px 22px; font-size: 17px; }
.source-trigger { border-radius: 0; font-weight: 700; }
.search-button { border-radius: 0; padding: 0 26px; }
.search-button:hover:not(:disabled) { background: var(--forest); }

/* Honest 3-step loader */
.loading-state { display: grid; grid-template-columns: 340px 1fr; min-height: 470px; border-top: 1px solid var(--line); }
.loading-copy { padding: 38px 45px 38px 0; border-right: 1px solid var(--line); }
.loading-copy h2 { font-size: 39px; margin: 0 0 18px; }
.loading-copy p { color: var(--ink-soft); }
.loading-copy .kicker { font: 500 13px var(--mono); color: var(--teal); letter-spacing: .12em; text-transform: uppercase; margin-bottom: 10px; }
.loading-steps { padding: 46px 0 20px 54px; display: grid; align-content: start; gap: 0; }
.load-step { display: grid; grid-template-columns: 44px 1fr; min-height: 98px; position: relative; color: #6f6c66; }
.load-step:not(:last-child)::before { content: ""; position: absolute; left: 14px; top: 31px; bottom: 0; width: 1px; background: #e4e1db; }
.load-dot {
  width: 29px; height: 29px; border-radius: 50%; border: 1px solid #cfccc6;
  display: grid; place-items: center; font: 500 13px var(--mono);
  background: var(--paper); position: relative; z-index: 1;
}
.load-step.active { color: var(--ink); }
.load-step.active .load-dot { border-color: var(--teal); background: var(--teal); color: #fff; box-shadow: 0 0 0 7px rgba(140, 21, 21, .1); }
.load-step.done .load-dot { background: var(--forest); border-color: var(--forest); color: var(--lime); }
.load-step strong { font: 600 25px var(--serif); display: block; color: inherit; letter-spacing: -.02em; }
.load-step small { font: 400 13px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
/* The animated rule follows the ACTIVE step (each step carries one; only the
   active step's is shown), so progress visibly moves down the timeline. */
.loading-rule { display: none; width: min(530px, 100%); height: 2px; background: #e4e1db; margin-top: 8px; overflow: hidden; }
.load-step.active .loading-rule { display: block; }
.loading-rule::after { content: ""; display: block; width: 40%; height: 100%; background: var(--teal); animation: loadbar 1.25s ease-in-out infinite alternate; }
@keyframes loadbar { from { transform: translateX(-100%); } to { transform: translateX(250%); } }

/* Answer layout + source rail */
.answer-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 56px; border-top: 1px solid var(--line); padding-top: 38px; }
.answer-kicker { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 24px; border: 0; padding-bottom: 0; }
.answer-kicker > span { font: 500 13px var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--teal); }
.icon-action { border: 1px solid var(--line); background: transparent; padding: 9px 12px; cursor: pointer; color: var(--ink-soft); font-size: 13px; border-radius: 0; }
.icon-action:hover { border-color: var(--teal); color: var(--teal); background: transparent; }
.answer-content { min-width: 0; }
.answer-content .summary-body h2 { font: 600 clamp(30px, 3.4vw, 44px)/1.05 var(--serif); letter-spacing: -.03em; margin: 0 0 24px; }
.answer-content .summary-body h3 { font: 600 24px/1.1 var(--serif); }
.answer-content .summary-body { font-size: 16px; }
.answer-content .summary-body p { max-width: 790px; }
.answer-content .summary-body li::marker { color: var(--teal); font-weight: 800; }
.source-rail { border-left: 1px solid var(--line); padding-left: 30px; min-width: 0; }
.source-rail h3 { font: 500 13px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--teal); margin: 0 0 15px; }
.source-item { display: grid; grid-template-columns: 28px 1fr; gap: 10px; padding: 16px 0; border-top: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.source-item:hover strong { color: var(--teal); }
.source-num { width: 23px; height: 23px; border: 1px solid #ddb9b6; border-radius: 50%; display: grid; place-items: center; font: 500 13px var(--mono); color: var(--teal); }
.source-item strong { font-size: 13px; line-height: 1.35; display: block; }
.source-item small { font: 400 13px var(--mono); color: var(--ink-soft); }

/* Citation chips inside the answer → mockup .cite look */
.citation-chip {
  min-width: 0; height: auto; padding: 2px 5px; margin-left: 3px; border-radius: 3px;
  background: transparent; border: 1px solid #ddb9b6; color: var(--teal);
  font: 500 13px var(--mono); vertical-align: super; text-decoration: none !important;
}
.citation-chip:hover { border-color: var(--teal); color: var(--teal-dark); }

/* Ask next + feedback */
.ask-next { margin-top: 37px; padding-top: 26px; border-top: 1px solid var(--line); }
.ask-next h3 { font: 500 13px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--teal); margin: 0 0 15px; }
.prompt-row { display: flex; flex-wrap: wrap; gap: 8px; }
.prompt-row button { border: 1px solid var(--line); background: transparent; padding: 10px 14px; border-radius: 99px; color: var(--ink-soft); cursor: pointer; text-align: left; font-size: 14px; }
.prompt-row button:hover { border-color: var(--teal); color: var(--teal); }
.feedback-line { display: flex; align-items: center; gap: 10px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-soft); }
.feedback-line button[data-vote] { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: transparent; cursor: pointer; }
.feedback-line button[data-vote]:hover { border-color: var(--teal); }
.feedback-line button[data-vote]:disabled { opacity: .5; cursor: default; }

/* Resource zone: filter strip + numbered result rows. Scoped under
   .resource-zone — .facet-chip/.facet-rail are also used by the sidebar
   catalog rail (line ~198) with a different design (mint-soft + red check);
   an earlier unscoped duplicate of this block collided with that one
   (same-specificity cascade fights → inconsistent unstyled/invisible
   chips, e.g. white text stranded on a light bg). Never re-add these
   selectors unscoped. */
.resource-zone { margin-top: 64px; }
/* Wrap, don't scroll — the mockup's nowrap strip put a scrollbar under the
   chips on desktop (owner report 2026-08-29). */
.resource-zone .facet-rail { display: flex; gap: 7px; row-gap: 9px; flex-wrap: wrap; padding-bottom: 12px; margin: 0; }
.resource-zone .facet-chip {
  white-space: nowrap; border: 1px solid var(--line); background: transparent; border-radius: 99px;
  padding: 8px 13px; font: 500 13px var(--mono); text-transform: uppercase; letter-spacing: .05em;
  color: var(--ink); cursor: pointer;
}
.resource-zone .facet-chip em { font-style: normal; font: inherit; color: inherit; opacity: .75; }
.resource-zone .facet-chip:hover, .resource-zone .facet-chip.is-active { background: var(--forest); border-color: var(--forest); color: #fff; }
.resource-zone .facet-chip.is-active::before { content: none; }
.resource-zone .facet-sep { display: none; }
.results-count-strip { font: 400 13px var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); padding: 10px 0 0; }

.ivory-results { display: block; margin-top: 8px; }
.result-card {
  background: transparent; border: 0; border-top: 1px solid var(--line); border-radius: 0;
  padding: 30px 0; box-shadow: none;
  grid-template-columns: 56px minmax(0, 1fr); gap: 22px; align-items: start;
}
.result-card:hover { border-color: var(--line); box-shadow: none; transform: none; }
.result-card.result-card-media { grid-template-columns: 56px minmax(0, 1fr) 168px; }
.result-rank { padding-top: 4px; }
.result-rank span { width: auto; height: auto; background: transparent; border: 0; font: 500 13px var(--mono); color: var(--teal); }
.result-card h3 { font: 600 27px/1.1 var(--serif); letter-spacing: -.02em; margin: 0 0 10px; }
.result-kicker { font: 500 13px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); }
.type-badge { font: 500 13px var(--mono); letter-spacing: .08em; }
.svc-tag { background: transparent; border: 0; padding: 0; color: var(--ink-soft); font: inherit; }
.snippet { font-size: 14px; max-width: 750px; }
.result-cta { border-radius: 0; font: 500 13px var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--teal); }
.result-cta:hover { border-color: var(--teal); background: transparent; }
.result-cta-ghost { color: var(--ink-soft); }
.pagination button { border-radius: 0; }
.pagination button.active-page { background: var(--forest); color: #fff; border-color: var(--forest); }

@media (max-width: 900px) {
  .browse-title-row { display: block; }
  .browse-title-row > p { margin-top: 18px; }
  .answer-layout { grid-template-columns: 1fr; gap: 32px; }
  .source-rail { border-left: 0; border-top: 1px solid var(--line); padding: 28px 0 0; }
  .loading-state { grid-template-columns: 1fr; }
  .loading-copy { border-right: 0; border-bottom: 1px solid var(--line); padding: 30px 0; }
  .loading-steps { padding: 38px 0; }
  .result-card, .result-card.result-card-media { grid-template-columns: 42px minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .browse-hero { padding: 42px 0 30px; }
  .answer-content .summary-body h2 { font-size: 32px; }
  .result-card h3 { font-size: 24px; }
}

/* ==========================================================================
   Result readability - owner 2026-09-02 ("fonts are not readable on search
   results... in first go people will run away"). Body copy up to 17px ink,
   context line upright, highlights as a red underline instead of pink
   blocks, all mono eyebrows/labels up to 12-13px.
   ========================================================================== */
.snippet { font-size: 17px; line-height: 1.6; color: var(--ink); max-width: 720px; }
.context-note { font-style: normal; font-size: 15px; line-height: 1.5; color: var(--ink-soft); border-left: 2px solid var(--cardinal); padding-left: .75rem; margin: .8rem 0 .9rem; }
mark { background: transparent; color: inherit; font-weight: 700; padding: 0; border-radius: 0; text-decoration: underline; text-decoration-color: var(--teal); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.result-kicker, .type-badge { font-size: 12px; }
.result-rank span { font-size: 12px; }
.result-cta { font-size: 12px; padding: .55rem .9rem; }
.results-count-strip { font-size: 12px; }
.result-card h3 { margin-bottom: 8px; }
.breadcrumbs { font-size: 14px; color: var(--ink-soft); }

/* Owner 2026-09-02: search text placement + size. The shell kept a grid
   track for the retired source filter, so the input track collapsed to
   0px and the text sat wherever overflow put it. Flex layout, 18px/500. */
.search-form .search-shell { display: flex; align-items: stretch; }
.search-form .search-shell .source-filter { display: none; }
.search-form .search-shell input { flex: 1 1 auto; min-width: 0; width: auto; height: 60px; padding: 0 22px; font-size: 18px; font-weight: 500; line-height: 60px; }
.search-form .search-shell input::placeholder { color: var(--ink-soft); font-weight: 500; }
.search-form .search-shell .search-button { flex: 0 0 auto; font-size: 17px; font-weight: 700; padding: 0 26px; }
.search-form-compact .search-shell input { height: 52px; line-height: 52px; font-size: 17px; }

/* Owner 2026-09-02: catalog cards - borders were too faint to read as boxes. */
.catalog-card { border: 1px solid #cfcbc3; box-shadow: 0 1px 2px rgba(46, 45, 41, .06), 0 4px 14px rgba(46, 45, 41, .05); background: #fff; }
.catalog-card:hover, .catalog-card:focus-within { border-color: var(--lagunita); box-shadow: 0 2px 4px rgba(46, 45, 41, .08), 0 10px 26px rgba(46, 45, 41, .10); }

/* Owner 2026-09-02: browse rail (Type / Service / Level) more prominent -
   ink labels, teal icons, count pills, a cardinal bar + tint when active. */
.rail-group summary { font: 700 15px var(--sans); color: var(--ink); letter-spacing: .02em; text-transform: uppercase; padding: .6rem 0 .5rem; }
.rail-opt { padding: .55rem .6rem .55rem .7rem; border-left: 3px solid transparent; border-radius: 0; font-size: 15.5px; font-weight: 500; color: var(--ink); gap: .6rem; }
.rail-opt .material-symbols-outlined:not(.rail-check) { font-size: 20px; color: var(--teal); }
.rail-opt em { font: 600 12px var(--mono); color: var(--ink-soft); background: var(--fog); border: 1px solid var(--line); border-radius: 999px; padding: .12rem .5rem; min-width: 2em; text-align: center; }
.rail-opt:hover { background: var(--fog); border-left-color: var(--line); }
.rail-opt[aria-pressed="true"] { background: var(--mint-soft); border-left-color: var(--cardinal); font-weight: 700; }
.rail-opt[aria-pressed="true"] em { background: #fff; border-color: var(--lime); color: var(--teal-dark); }

/* Chip system (see hub.css): FILTER chips on the results page share the
   nav-chip geometry; state is mint tint + teal border instead of ink fill. */
.facet-chip, .active-filters .facet-chip {
  padding: 9px 16px; font-size: 14.5px; font-weight: 600; line-height: 1; color: var(--ink);
  border: 1px solid var(--line); background: #fff; border-radius: 999px;
}
.facet-chip em { font-size: 12px; color: var(--ink-soft); }
.facet-chip:hover:not(.is-active) { border-color: var(--teal); color: var(--teal); background: #fff; }
.facet-chip.is-active { background: var(--mint-soft); border-color: var(--teal); color: var(--ink); font-weight: 700; }
.active-filters-clear { font-size: 14px; }
.breadcrumbs { font: 500 12.5px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); }

/* Results-page scope carries higher specificity than the shared chip spec;
   restate the FILTER chip spec at that scope. */
.resource-zone .facet-chip { padding: 9px 16px; font: 600 14.5px/1 var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink); border: 1px solid var(--line); background: #fff; border-radius: 999px; }
.resource-zone .facet-chip em { font: 500 12px var(--mono); color: var(--ink-soft); }
.resource-zone .facet-chip:hover:not(.is-active) { border-color: var(--teal); color: var(--teal); background: #fff; }
.resource-zone .facet-chip.is-active { background: var(--mint-soft); border-color: var(--teal); color: var(--ink); font-weight: 700; }
.resource-zone .facet-chip.is-active em { color: var(--teal-dark); }

/* Owner 2026-09-02 (clarified): the Browse hero paragraph was the floating
   text - it hung off the heading's baseline at the far right. Stack it
   under the heading as a bold lede. Try chips: pills stay, but regular sans
   weight (they were inheriting the mono uppercase from .try-line). */
.browse-title-row { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 26px; }
.browse-title-row > p { max-width: 720px; font-size: 19px; font-weight: 600; color: var(--ink); line-height: 1.45; }
.browse-hero .try-line .hub-chip { font: 500 14.5px/1 var(--sans); text-transform: none; letter-spacing: 0; }

/* ==========================================================================
   Two corrections, 2026-09-04.

   1. Prose links inside AI answers were still Digital Red. The rule below
      predates the palette work and overrode the site-wide blue, so the very
      place with the most links (grounded answers, citations, actionable
      request forms) was the reddest part of the site. Stanford assigns blue
      to links and red to controls; answer links are links.

   2. Type floor. Twenty elements rendered under 14px and several at 10px:
      source labels, citation chips, meta rows, breadcrumbs. UIT's smallest
      body copy is 15px. Nothing here now renders below 13px except
      screen-reader-only text, which is not displayed at all.
   ========================================================================== */
.summary-body a:not(.citation-chip) { color: var(--link); }
.summary-body a:not(.citation-chip):hover { color: var(--link-hover); }
.answer-content a:not(.citation-chip), .ql-body a:not(.citation-chip) {
  color: var(--link);
}
.answer-content a:not(.citation-chip):hover { color: var(--link-hover); }

/* Type floor: raise everything that was 10-12px to a legible size. */
.citation-chip { font-size: 12px; }
.source-chip, .source-chip-text, .source-chip-num, .fn-host,
.svc-tag, .result-kicker, .type-badge, .ql-meta, .cat-meta,
.results-count-strip, .result-cta, .breadcrumbs, .load-step,
.answer-meta, .icon-action, .feedback-row, .source-item small,
.result-card small, .summary-note {
  font-size: 13.5px;
}
.breadcrumbs { font-size: 14px; }
.result-cta { font-size: 13.5px; padding: .6rem 1rem; }
.snippet { font-size: 17px; }

/* ==========================================================================
   Result meta row - owner 2026-09-04 ("AI & Playground look two things...
   robotic type 28 AUG 2026 IT (DEMO) - hard to get a meaning").

   Every field was set in mono uppercase with only a space between, so two
   things went wrong at once. Adjacent values fused into phantom terms - the
   service tags "AI Playground" and "ChatGPT" read as one product name - and
   ordinary prose that is not a label, a source name and a date, came out
   shouting in a typewriter face.

   Only the type badge is genuinely a label, so it alone keeps the mono
   uppercase treatment. Everything after it is content and is set in the UI
   sans at its natural case, with a middot between fields to make the
   boundaries explicit.
   ========================================================================== */
.result-kicker {
  font: 400 13px/1.45 var(--sans);
  text-transform: none;
  letter-spacing: 0;
  gap: .4rem;
}
.result-kicker, .type-badge { font-size: 13px; }
.type-badge {
  font: 500 13px var(--mono);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-right: .3rem;
}
/* Separator between content fields only - the first field after the badge
   is already set off by the badge's own trailing space. */
.result-kicker > *:not(.type-badge) + *:not(.type-badge)::before {
  content: "·";
  margin-right: .45rem;
  color: var(--grey);
}

/* Result-side share of the secondary-colour split (see hub.css). The ordinal,
   the summary eyebrow and the type badge are labels rather than controls, so
   they take Lagunita; every CTA on the card stays red. */
.result-rank span,
.answer-kicker > span,
.type-badge {
  color: var(--lagunita-dark);
}

/* The loader's running step -- owner 2026-09-04 ("on search these we can make
   lagintua which goes black?"). The step in flight is progress rather than
   something to press, so it takes Lagunita and settles to black when done.
   White on --lagunita-deep is 7.36:1, well clear for the small mono ordinal. */
.load-step.active .load-dot {
  background: var(--lagunita-deep);
  border-color: var(--lagunita-deep);
  color: #fff;
  box-shadow: 0 0 0 7px rgba(0, 124, 146, .12);
}

/* ==========================================================================
   Mobile search bar -- owner 2026-09-05: "Mobile view is completely broken!"

   On a 375px phone the input had collapsed to 44px beside a 325px button, so
   you could not see what you typed. The 700px media block above does stack
   the bar -- but it targets a GRID, and the readability pass later in this
   file (".search-form .search-shell { display: flex }") switches the shell to
   flex, where grid-template-columns means nothing. In that flex row the input
   is flex: 1 1 auto / min-width: 0 and shrinks to nothing, while the button is
   flex: 0 0 auto and takes its intrinsic width.

   This block lives at the END of the file on purpose: same specificity as the
   flex rules, later in source, so it wins by order rather than by a
   specificity arms race. It stacks the flex row instead of fighting it.
   ========================================================================== */
@media (max-width: 700px) {
  .search-form .search-shell { flex-direction: column; overflow: hidden; }
  .search-form .search-shell input {
    width: 100%; flex: 0 0 auto; height: 52px; min-height: 52px;
    padding: 0 16px; font-size: 17px; border-radius: 0;
  }
  .search-form .search-shell .search-button {
    width: 100%; flex: 0 0 auto; min-height: 50px; border-radius: 0;
  }
}