/* encyclopedia.ux.css (ux-pass, 2026-10-15). Loaded after encyclopedia.css.
   --enc-chrome-h is the sticky chrome above the page (the banner, plus the TOC
   strip where it's showing), measured by encyclopedia.ux.js. It replaces the
   guessed scroll margins. */

.enc-article > section { scroll-margin-top: calc(var(--enc-chrome-h, 45px) + 1rem); }
.enc-side { top: calc(var(--enc-chrome-h, 45px) + 1.5rem); }

/* ---------- Index: title and featured trio share the first row ---------- */
@media (min-width: 64rem) {
  main.enc:has(> .enc-index-hero) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    column-gap: 1.25rem;
    align-items: stretch;
  }
  main.enc:has(> .enc-index-hero) > * { grid-column: 1 / -1; }
  main.enc > .enc-index-hero {
    grid-column: 1;
    text-align: left;
    /* Same bottom margin as .enc-featured beside it: the hero's cell is
       the whole row, so without it the dek ran straight into "Every
       entry" (seen at 1280px, 2026-10-15). */
    padding: 0.5rem 0;
    margin-bottom: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }
  main.enc > .enc-index-hero .enc-emblem { display: none; }
  main.enc > .enc-index-hero h1 { font-size: clamp(2.8rem, 1.6rem + 2.4vw, 3.8rem); }
  main.enc > .enc-index-hero .enc-dek { margin: 0; }
  main.enc > .enc-featured { grid-column: 2; margin: 0 0 2rem; grid-template-columns: 1.2fr 1fr; }
  main.enc > .enc-featured .enc-feature { min-height: 15rem; }
  main.enc > .enc-featured .enc-feature-stack .enc-feature p { display: none; }
  main.enc > .enc-featured .enc-feature h2 { font-size: clamp(1.3rem, 1rem + 1vw, 1.9rem); }
}

/* Search and filters stay in reach while filtering a long list. Not on
   phones: there the search box and the wrapped filter row measured 123px
   at 375px, which with the banner held a fifth of the screen, and the
   point of the ux-pass was one sticky bar on a phone. */
@media (min-width: 34.01rem) {
  .enc-toolbar {
    position: sticky;
    top: var(--enc-chrome-h, 45px);
    z-index: 10;
    padding: 0.75rem 0;
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border-subtle);
  }
}

/* Phone: featured cards swipe; entries become a dense list. */
@media (max-width: 48rem) {
  .enc-index-hero { text-align: left; padding: 0.5rem 0 1rem; }
  .enc-index-hero .enc-emblem { display: none; }
  .enc-index-hero .enc-dek { margin: 0; font-size: 1.05rem; }
  .enc-featured {
    display: flex;
    gap: 0.6rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin: 0 calc(-1 * clamp(1rem, 3vw, 2rem)) 1.5rem;
    padding: 0 clamp(1rem, 3vw, 2rem);
    scrollbar-width: none;
  }
  .enc-featured::-webkit-scrollbar { display: none; }
  .enc-feature-stack { display: contents; }
  .enc-featured .enc-feature { flex: 0 0 min(15rem, 78vw); min-height: 9rem; padding: 1rem; scroll-snap-align: start; }
  .enc-featured .enc-feature p:not(.enc-kicker) { display: none; }
  .enc-featured .enc-feature-art { display: none; }
  .enc-featured .enc-feature h2 { font-size: 1.3rem; }
}
@media (max-width: 34rem) {
  .enc-grid { grid-template-columns: 1fr; gap: 0; }
  .enc-grid .enc-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.15rem 0.75rem;
    padding: 0.85rem 0;
    background: none;
    border: 0;
    border-top: 1px solid var(--border-subtle);
    border-radius: 0;
    transform: none !important;
  }
  .enc-grid .enc-card-disc,
  .enc-grid .enc-card > p:not(.enc-card-place) { display: none; }
  .enc-grid .enc-card h3 { grid-column: 1; grid-row: 1; font-size: 1.2rem; padding: 0; }
  .enc-grid .enc-card .enc-card-years { grid-column: 2; grid-row: 1; align-self: center; }
  .enc-grid .enc-card .enc-card-kind { grid-column: 1; grid-row: 2; }
  .enc-grid .enc-card .enc-card-place { grid-column: 1 / -1; padding: 0; margin: 0; }
}

/* ---------- Entry pages ---------- */
/* TOC chips: built by encyclopedia.ux.js; phones and tablets only.
   "screen and": a printed page is narrower than 60rem too, and on paper
   the chips mean nothing and a closed <details> would print the infobox
   as a single summary line. Print keeps encyclopedia.css's own layout. */
.enc-chipnav { display: none; }
.enc-glance { display: none; }
@media screen and (max-width: 60rem) {
  .enc-chipnav {
    display: flex;
    gap: 0.4rem;
    position: sticky;
    top: var(--enc-banner-h, 45px);
    z-index: 15;
    margin: 0 calc(-1 * clamp(1rem, 3vw, 2rem)) 1.25rem;
    padding: 0.5rem clamp(1rem, 3vw, 2rem);
    overflow-x: auto;
    scrollbar-width: none;
    background: color-mix(in srgb, var(--bg) 94%, transparent);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border-subtle);
  }
  .enc-chipnav::-webkit-scrollbar { display: none; }
  .enc-chipnav a {
    flex: none;
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    padding: 0 0.75rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    color: var(--enc-ink-2);
    font: 600 0.8rem var(--enc-sans);
    text-decoration: none;
    white-space: nowrap;
  }
  .enc-chipnav a.is-current { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

  /* The infobox becomes one collapsed row; the article starts on screen one. */
  .enc-side .enc-infobox { display: none; }
  .enc-side { order: 0; }
  .enc-glance {
    display: block;
    background: var(--card-bg);
    border: 1px solid var(--border-subtle);
    border-radius: var(--enc-radius);
    margin: 0 0 1.5rem;
    font-family: var(--enc-sans);
  }
  .enc-glance > summary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 48px;
    padding: 0 1rem;
    cursor: pointer;
    list-style: none;
  }
  .enc-glance > summary::-webkit-details-marker { display: none; }
  .enc-glance > summary b { font: 700 0.7rem var(--enc-sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
  .enc-glance > summary span { color: var(--muted); font-size: 0.9rem; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .enc-glance > summary::after { content: "▾"; color: var(--muted); }
  .enc-glance[open] > summary::after { content: "▴"; }
  .enc-glance > .enc-infobox { display: block; border: 0; border-top: 1px solid var(--border-subtle); border-radius: 0; background: none; }
  .enc-glance > .enc-infobox > h2 { display: none; }
}
@media (max-width: 40rem) {
  .enc-hero { grid-template-columns: minmax(0, 1fr) 4.5rem; gap: 0 1rem; }
  .enc-hero > .enc-emblem { order: 0; width: 4.5rem; align-self: start; }
  .enc-hero .enc-meta { display: none; }
}