/* =========================================================================
   Page styles for the archive, topics, search and the error pages.
   Built from the parts in base.css and article.css (page heads, chips, cards, pager);
   this file only adds the layout and the states those parts do not cover.
   ========================================================================= */
@layer page {

/* ---------------------------------------------------------- shared labels */
.filter-label { font-family: var(--font-ui); font-size: .8125rem; font-weight: 650; color: var(--ink-3); }

/* ------------------------------------------------------------ page heads */
.error-head .wrap { position: relative; }
.error-head h1 { font-size: clamp(2.2rem, 1.3rem + 3.6vw, 3.8rem); max-width: 16ch; }
/* The status code, large, on the right: decoration that repeats the label, so it is hidden from assistive tech. */
.err-code {
  position: absolute; right: 0; bottom: .6rem; font-family: var(--font-display); font-weight: 780; font-size: clamp(7rem, 4rem + 11vw, 13rem);
  line-height: .8; letter-spacing: -.05em; color: var(--fill); font-variant-numeric: lining-nums; pointer-events: none; user-select: none;
}
@media (max-width: 61.99rem) { .err-code { display: none; } }
.error-head .page-dek { max-width: 50ch; }
.err-actions { margin-top: 1.7rem; }

/* The archive's key-signature legend: one ruled line, marks first, the reason after. */
.legend {
  margin-top: 1.25rem; max-width: 60ch; padding-left: .95rem; border-left: 2px solid var(--fill);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .7rem;
  font-family: var(--font-ui); font-size: .92rem; line-height: 1.5; color: var(--ink-2);
}
.legend-marks { font-weight: 650; color: var(--ink); white-space: nowrap; }
.legend-note { font-family: var(--font-text); font-style: italic; font-size: 1rem; color: var(--ink-3); }

/* ------------------------------------------------------- archive filters */
.archive-filters { border-bottom: 1px solid var(--line); }
.filters { display: grid; gap: 1.1rem; }
.filter-row { display: grid; gap: .55rem; }
.filter-row .chips { gap: .5rem; }
.filters .chip { min-height: 2.75rem; padding-block: .3em; }
.chip-all { font-weight: 650; }
.chip-level .level { gap: .35em; }

/* Selected filters: a topic takes its own colour, "All" and the levels take ink. */
/* On a phone each filter row is one scrolling strip that bleeds to the screen edge. */
@media (max-width: 39.99rem) {
  .filter-row .chips {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
    margin-inline: calc(-1 * var(--pad)); margin-block: -.4rem; padding: .4rem var(--pad); scroll-padding-inline: var(--pad);
  }
  .filter-row .chips::-webkit-scrollbar { display: none; }
  .filter-row .chips > li { flex: none; }
}
.filters .chip[aria-current="true"] { background: var(--fill); border-color: var(--fill); color: var(--on-fill); }
.filters .chip[aria-current="true"]::before { background: var(--on-fill); }
.filters .chip-all[aria-current="true"],
.filters .chip-level[aria-current="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.filters .chip-level[aria-current="true"] .lv-sig { color: inherit; }
.filters .chip[aria-current="true"] .chip-count,
.filters .chip-all[aria-current="true"] .chip-count,
.filters .chip-level[aria-current="true"] .chip-count { color: inherit; opacity: .8; }

/* ------------------------------------------------------- archive results */
.archive-results { padding-top: clamp(2.2rem, 4.5vw, 3.4rem); }
.results-bar {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .4rem 1.2rem;
  margin-bottom: clamp(1.3rem, 2.8vw, 1.9rem); font-family: var(--font-ui);
}
.results-count { font-size: 1rem; font-weight: 520; color: var(--ink-2); }
.results-count strong { font-weight: 720; color: var(--ink); font-variant-numeric: tabular-nums; }
.archive-results .grid { gap: clamp(1rem, 2vw, 1.5rem); }

/* ------------------------------------------------------------- topic page */
.topic-intro { max-width: 68ch; }
.topic-intro .lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--ink-2); }
.topic-articles { padding-top: clamp(2.2rem, 4.5vw, 3.4rem); }

/* ---------------------------------------------------------- empty states */
.empty-state {
  display: grid; gap: 1.4rem; max-width: 50rem; padding: clamp(1.4rem, 3vw, 2.2rem);
  border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface);
}
.empty { font-family: var(--font-text); font-size: 1.1rem; line-height: 1.6; color: var(--ink-2); max-width: 58ch; }
.empty strong { color: var(--ink); font-weight: 650; }
.empty a { color: var(--accent); text-decoration-color: color-mix(in oklab, var(--accent) 38%, transparent); }
.lookups { display: grid; gap: .6rem; }

/* ----------------------------------------------------------------- search */
.search-band { padding-top: clamp(2.2rem, 4.5vw, 3.4rem); }
.search-form { display: grid; gap: .75rem; margin-bottom: clamp(2rem, 4.5vw, 3rem); }
@media (min-width: 40rem) { .search-form { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } }
.sf-field { position: relative; display: flex; align-items: center; min-width: 0; }
.sf-field > .ico { position: absolute; left: 1.15rem; width: 1.35rem; height: 1.35rem; color: var(--ink-3); pointer-events: none; }
.search-input {
  width: 100%; min-height: 3.6rem; padding: .6em 1.2rem .6em 3.3rem;
  border: 1.5px solid var(--line-strong); border-radius: var(--radius-pill); background: var(--surface); color: var(--ink);
  font: 540 clamp(1.05rem, 1rem + .3vw, 1.2rem) / 1.2 var(--font-ui);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.search-input::placeholder { color: var(--ink-3); opacity: 1; }
.search-input:hover { border-color: var(--ink-3); }
.search-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in oklab, var(--fill) 24%, transparent); }
.search-form .btn-lg { min-height: 3.6rem; }

.results { list-style: none; padding: 0; display: grid; gap: clamp(1rem, 2vw, 1.4rem); grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr)); }
.result { display: grid; gap: .5rem; align-content: start; min-width: 0; }
.result-note { font-family: var(--font-ui); font-size: .8125rem; font-weight: 580; color: var(--ink-3); padding-inline: .3rem; }

}

/* ---- search results: direct answers and reference hits ------------------- */
.result-group { margin-top: 2.2rem; }
.result-group-title { display: flex; align-items: center; gap: .55rem; font-size: 1rem; font-family: var(--font-ui); font-weight: 650; color: var(--ink-2); margin-bottom: .7rem; }
.result-group-title .ico { width: 1.15em; height: 1.15em; color: var(--accent); }
.hit-list { list-style: none; padding: 0; display: grid; gap: .5rem; }
.hit { display: grid; grid-template-columns: 1fr auto; gap: .1rem 1rem; align-items: center; padding: .85rem 1.1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); text-decoration: none; color: var(--ink); transition: border-color var(--t-fast), background var(--t-fast), translate var(--t-med) var(--spring); }
.hit strong { font-family: var(--font-display); font-weight: 700; font-size: 1.08rem; }
.hit span { grid-column: 1; color: var(--ink-3); font-size: .9rem; }
.hit .ico-arrow { grid-column: 2; grid-row: 1 / span 2; color: var(--ink-3); transition: translate var(--t-med) var(--spring), color var(--t-fast); }
.hit:hover, .hit:focus-visible { border-color: var(--fill); background: var(--tint); }
.hit:hover .ico-arrow, .hit:focus-visible .ico-arrow { translate: .25rem 0; color: var(--fill); }
.hit-lead { padding-block: 1.1rem; border-color: var(--fill); background: var(--tint); }
.hit-lead strong { font-size: 1.3rem; }