/* ================================================================
   NeoDemos — pages/archief.css  (production)
   Power-user archive browser: query bar · facets · dense results.
   Mobile-first, tokens only, no inline styles. Shares the werkruimte
   shell language; results are intentionally denser than home cards.
   ================================================================ */
html:has(.archief-page) { overflow-x: clip; }
.archief-page {
  background: var(--color-surface); color: var(--color-text);
  font-family: var(--font-body); line-height: var(--line-height-body);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
.archief-page main { padding: 0; }
.archief { container: app / inline-size; max-width: 1080px; margin: 0 auto; padding: var(--space-8) var(--space-5) var(--space-24); }
@media (min-width: 768px) { .archief { padding: var(--space-10) var(--space-8) var(--space-24); } }

/* Header */
.arch-head { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-6); }
.arch-back { font-size: var(--font-size-sm); font-weight: 600; color: var(--color-text-secondary); text-decoration: none; white-space: nowrap; }
.arch-back:hover { color: var(--color-primary); }
.arch-head__titles { flex: 1; min-width: 0; }
.arch-kicker { font-size: var(--font-size-xs); font-weight: 600; letter-spacing: var(--letter-spacing-widest); text-transform: uppercase; color: var(--color-accent-ink); }
.arch-title { font-family: var(--font-heading); font-size: var(--font-size-4xl); font-weight: 400; color: var(--color-primary); letter-spacing: var(--letter-spacing-display); line-height: 1.1; }
@media (min-width: 768px) { .arch-title { font-size: var(--font-size-5xl); } }
.arch-kbd { flex-shrink: 0; font-family: var(--font-mono); font-size: var(--font-size-xs); color: var(--color-text-tertiary); background: var(--color-surface-raised); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 3px 9px; }

/* Query bar */
.arch-search { position: relative; }
.arch-search__input {
  width: 100%; min-height: 56px; padding: var(--space-3) calc(var(--space-8) + var(--space-2)) var(--space-3) calc(var(--space-8) + var(--space-2));
  border: 1px solid var(--color-border); border-radius: var(--radius-full);
  background: var(--color-surface-raised); font-family: var(--font-body); font-size: var(--font-size-lg); color: var(--color-text);
  box-shadow: var(--shadow-xs);
}
.arch-search__input::placeholder { color: var(--color-text-tertiary); }
.arch-search__input:focus-visible { outline: none; border-color: var(--color-accent-ink); box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-accent-ink) 18%, transparent); }
.arch-search__icon { position: absolute; left: var(--space-5); top: 50%; transform: translateY(-50%); color: var(--color-text-tertiary); font-size: var(--font-size-xl); pointer-events: none; }
.arch-search__clear { position: absolute; right: var(--space-4); top: 50%; transform: translateY(-50%); width: 44px; height: 44px; margin-right: -7px; border: none; background: var(--color-surface-sunken); color: var(--color-text-secondary); border-radius: var(--radius-full); cursor: pointer; font-size: var(--font-size-sm); }
.arch-search__clear:hover { background: var(--color-border); color: var(--color-text); }
.arch-form { margin: 0; }
.arch-submit { margin-top: var(--space-3); }

/* Recent searches */
.arch-recents { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-3); }
.arch-recents__label { font-size: var(--font-size-xs); color: var(--color-text-tertiary); margin-right: var(--space-1); }
.arch-recent { font-family: var(--font-body); font-size: var(--font-size-xs); color: var(--color-text-secondary); background: none; border: 1px solid var(--color-border); border-radius: var(--radius-full); padding: 4px 12px; cursor: pointer; transition: border-color .12s, color .12s; }
.arch-recent::before { content: "⌕ "; color: var(--color-text-tertiary); }
.arch-recent:hover { border-color: var(--color-accent); color: var(--color-primary); }

/* Primary scope switch — RD-6: one segmented pill (Alles · Raadsdocumenten ·
   Mijn werk) + one caption; never the three big cards. 44px group height. */
.arch-scopewrap { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin: var(--space-5) 0 var(--space-6); }
.arch-scopeseg { display: inline-flex; gap: 2px; padding: 3px; min-height: 44px; box-sizing: border-box; background: var(--color-surface-sunken); border: 1px solid var(--color-border); border-radius: var(--radius-full); }
.arch-scopeseg__btn { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; font-family: var(--font-body); font-size: var(--font-size-sm); font-weight: 600; color: var(--color-text-secondary); background: none; border: none; border-radius: var(--radius-full); padding: 7px 16px; cursor: pointer; white-space: nowrap; transition: background var(--dur-1), color var(--dur-1), box-shadow var(--dur-1); }
.arch-scopeseg__btn:hover { color: var(--color-text); }
.arch-scopeseg__btn:focus-visible { outline: 2px solid var(--color-accent-ink); outline-offset: 2px; }
.arch-scopeseg__ic { font-size: var(--font-size-base); line-height: 1; opacity: .8; }
.arch-scopeseg__btn.is-on { background: var(--color-primary); color: var(--color-text-on-dark); box-shadow: var(--shadow-xs); }
.arch-scopeseg__btn.is-on .arch-scopeseg__ic { opacity: 1; }
.arch-scopeseg__cap { font-size: var(--font-size-xs); color: var(--color-text-tertiary); }
@container app (max-width: 560px) {
  .arch-scopeseg { width: 100%; justify-content: space-between; }
  .arch-scopeseg__btn { flex: 1; justify-content: center; padding: 8px 6px; }
  .arch-scopeseg__cap { display: none; }
}

/* Facets */
.arch-facets { display: flex; flex-direction: column; gap: var(--space-3); margin: var(--space-6) 0 var(--space-4); padding-bottom: var(--space-4); border-bottom: 1px solid var(--color-border); }
.arch-facet { display: flex; gap: var(--space-1); }
.arch-facet--wrap { flex-wrap: wrap; gap: var(--space-2); }
/* segmented (type) */
.arch-seg { flex: 0 0 auto; font-family: var(--font-body); font-size: var(--font-size-sm); font-weight: 500; color: var(--color-text-secondary); background: none; border: none; border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); cursor: pointer; white-space: nowrap; transition: background .12s, color .12s; }
.arch-seg:hover { background: var(--color-surface-sunken); color: var(--color-text); }
.arch-seg.is-on { background: var(--color-primary); color: var(--color-text-on-dark); font-weight: 600; }
.arch-facet:not(.arch-facet--wrap) { overflow-x: auto; padding-bottom: 2px; }
/* chips (commissie · periode) */
.arch-chip { font-family: var(--font-body); font-size: var(--font-size-xs); font-weight: 600; color: var(--color-text-secondary); background: var(--color-surface-raised); border: 1px solid var(--color-border); border-radius: var(--radius-full); padding: 5px 13px; cursor: pointer; white-space: nowrap; transition: border-color .12s, color .12s, background .12s; }
.arch-chip:hover { border-color: var(--color-border-strong); color: var(--color-text); }
.arch-chip.is-on { background: var(--color-accent-light); border-color: color-mix(in oklab, var(--color-accent) 45%, transparent); color: var(--color-accent-ink); }
.public-search-page .arch-chip { cursor: default; font-variant-numeric: tabular-nums; }
.public-search-page .arch-chip.is-partial { background: var(--color-warning-light); border-color: color-mix(in oklab, var(--color-warning) 42%, var(--color-border)); color: var(--color-warning); }
.public-search-page .arch-chip.is-stale { background: var(--color-error-light); border-color: color-mix(in oklab, var(--color-error) 38%, var(--color-border)); color: var(--color-error); }

/* ── @tag autocomplete + entity-filter chips (WS108 PR3) ─────────── */
/* Dropdown anchored under the search bar (.arch-search is the positioning
   context). */
.arch-tagbox { position: absolute; top: calc(100% + 4px); left: var(--space-4); right: var(--space-4); z-index: var(--z-dropdown); max-height: 320px; overflow-y: auto; overscroll-behavior: contain; padding: var(--space-1); background: var(--color-surface-raised); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.arch-tagbox__group { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: var(--letter-spacing-wide); color: var(--color-text-tertiary); padding: var(--space-2) var(--space-3) var(--space-1); }
.arch-tagbox__item { display: flex; align-items: baseline; gap: var(--space-2); width: 100%; text-align: left; padding: var(--space-2) var(--space-3); border: none; border-radius: var(--radius-sm); background: none; cursor: pointer; font-family: var(--font-body); }
.arch-tagbox__item.is-sel { background: var(--color-accent-light); }
.arch-tagbox__label { font-size: var(--font-size-sm); font-weight: 500; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arch-tagbox__sub { flex-shrink: 0; font-size: var(--font-size-xs); color: var(--color-text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Entity chips — accent pills with a remove ✕, distinct from the neutral
   facet toggles (.arch-chip). */
.arch-echip { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-body); font-size: var(--font-size-xs); font-weight: 600; color: var(--color-accent-ink); background: var(--color-accent-light); border: 1px solid color-mix(in oklab, var(--color-accent) 45%, transparent); border-radius: var(--radius-full); padding: 5px 13px; cursor: pointer; white-space: nowrap; transition: border-color .12s; }
.arch-echip:hover { border-color: var(--color-accent); }
.arch-echip:focus-visible { outline: 2px solid var(--color-accent-ink); outline-offset: 2px; }
.arch-echip__x { color: var(--color-text-tertiary); font-size: 10px; }
.arch-echip:hover .arch-echip__x { color: var(--color-accent-ink); }
.arch-taghint { margin-bottom: var(--space-3); padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); background: var(--color-surface-sunken); color: var(--color-text-secondary); font-size: var(--font-size-xs); }
@media (hover: none) {
  .arch-tagbox__item { min-height: 44px; }
  .arch-echip { min-height: 32px; }
}

/* Toolbar — RD-5: 'Nieuw binnen' toggle pill beside the count; the sort
   select wrapped in a pill with a decorative caret (native keyboard kept). */
.arch-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); flex-wrap: wrap; }
.arch-toolbar__left { display: flex; align-items: center; gap: var(--space-3); }
.arch-count { font-size: var(--font-size-sm); color: var(--color-text-tertiary); font-variant-numeric: tabular-nums; }
.arch-newtoggle { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-body); font-size: var(--font-size-xs); font-weight: 600; color: var(--color-text-secondary); background: var(--color-surface-raised); border: 1px solid var(--color-border); border-radius: var(--radius-full); padding: 4px 12px; cursor: pointer; text-decoration: none; transition: border-color var(--dur-1), color var(--dur-1), background var(--dur-1); }
.arch-newtoggle__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-accent); flex-shrink: 0; }
.arch-newtoggle:hover { border-color: var(--color-border-strong); }
.arch-newtoggle:focus-visible { outline: 2px solid var(--color-accent-ink); outline-offset: 2px; }
.arch-newtoggle.is-on { background: var(--color-accent-light); border-color: color-mix(in oklab, var(--color-accent) 40%, transparent); color: var(--color-accent-ink); }
.arch-sort { font-size: var(--font-size-xs); color: var(--color-text-tertiary); display: inline-flex; align-items: center; gap: var(--space-2); }
.arch-selectwrap { position: relative; display: inline-flex; align-items: center; }
.arch-sort select { appearance: none; -webkit-appearance: none; font-family: var(--font-body); font-size: var(--font-size-sm); font-weight: 600; color: var(--color-text-secondary); background: var(--color-surface-raised); border: 1px solid var(--color-border); border-radius: var(--radius-full); padding: 5px 28px 5px 13px; cursor: pointer; transition: border-color var(--dur-1), color var(--dur-1); }
.arch-sort select:hover { border-color: var(--color-border-strong); color: var(--color-text); }
.arch-sort select:focus-visible { outline: none; border-color: var(--color-accent-ink); box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-accent-ink) 18%, transparent); }
.arch-selectwrap__caret { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--color-text-tertiary); pointer-events: none; display: inline-flex; }

/* Results — dense, table-like rows */
.arch-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; background: var(--color-surface-raised); }
.arch-list > li + li .arch-row { border-top: 1px solid var(--color-border-subtle); }
.arch-row { display: grid; grid-template-columns: 60px 30px 1fr auto; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); text-decoration: none; color: var(--color-text); transition: background .12s; }
.arch-row:hover, .arch-row.is-active { background: var(--color-surface-sunken); }
.arch-row.is-active { box-shadow: inset 3px 0 0 var(--color-accent); }
.arch-row__date { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.arch-row__date b { font-size: var(--font-size-sm); font-weight: 600; color: var(--color-text); font-variant-numeric: tabular-nums; }
.arch-row__date span { font-size: 10.5px; color: var(--color-text-tertiary); }
.arch-row__icon { width: 30px; height: 30px; border-radius: var(--radius-sm); background: var(--color-surface-sunken); color: var(--color-primary); display: inline-flex; align-items: center; justify-content: center; font-size: var(--font-size-base); }
.arch-row:hover .arch-row__icon, .arch-row.is-active .arch-row__icon { background: var(--color-surface-raised); }
.arch-row__body { min-width: 0; }
.arch-row__title { display: block; font-size: var(--font-size-sm); font-weight: 600; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arch-row:hover .arch-row__title, .arch-row.is-active .arch-row__title { color: var(--color-primary); }
.arch-row__sub { display: block; font-size: var(--font-size-xs); color: var(--color-text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
/* RD-4: the stripped BB id stays visible as small mono metadata. */
.arch-row__bb { font-family: var(--font-mono); }
.arch-row__snippet { display: -webkit-box; margin-top: 3px; overflow: hidden; color: var(--color-text-secondary); font-size: var(--font-size-xs); line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.arch-row__tags { display: flex; align-items: center; gap: var(--space-2); justify-self: end; }
.arch-tag { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 2px 8px; border-radius: var(--radius-full); white-space: nowrap; }
.arch-tag--vergadering { background: var(--color-primary-light); color: var(--color-secondary); }
.arch-tag--werk { background: var(--color-primary-light); color: var(--color-secondary); }
.arch-tag--instr { background: var(--color-accent-light); color: var(--color-accent-ink); }
.arch-tag--dossier { background: var(--color-accent-light); color: var(--color-accent-ink); }
.arch-tag--document { background: var(--color-surface-sunken); color: var(--color-text-secondary); }
.arch-tag--notitie { background: var(--color-success-light); color: var(--color-success); }
.arch-row__meta { font-size: var(--font-size-xs); color: var(--color-text-tertiary); white-space: nowrap; }

/* mark search matches */
.arch-row mark { background: color-mix(in oklab, var(--color-accent) 28%, transparent); color: inherit; border-radius: 2px; padding: 0 1px; }

.arch-empty { padding: var(--space-12) var(--space-6); text-align: center; color: var(--color-text-tertiary); font-size: var(--font-size-sm); }
.arch-partial, .arch-correction { margin-bottom: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--color-warning-light); color: var(--color-text-secondary); font-size: var(--font-size-sm); }
.arch-correction { background: var(--color-primary-light); }
.arch-loading { padding: var(--space-2) 0; color: var(--color-text-tertiary); font-size: var(--font-size-sm); }
.arch-loadmore { display: block; min-height: 44px; margin: var(--space-5) auto 0; padding: var(--space-2) var(--space-6); border: 1px solid var(--color-border); border-radius: var(--radius-full); background: var(--color-surface-raised); color: var(--color-primary); font: 600 var(--font-size-sm)/1 var(--font-body); cursor: pointer; }
.arch-loadmore:hover { border-color: var(--color-border-strong); background: var(--color-surface-sunken); }

/* Width-driven layout follows the shell's app container (RD-2 pass rule);
   preference/hover capability queries above stay @media. */
@container app (max-width: 600px) {
  .arch-row { grid-template-columns: 52px 1fr; grid-template-areas: "date body" "date tags"; row-gap: var(--space-1); }
  .arch-row__icon { display: none; }
  .arch-row__tags { grid-area: tags; justify-self: start; }
  .arch-row__date { grid-area: date; }
  .arch-row__body { grid-area: body; }
  .arch-row__title { white-space: normal; }
}

/* ── Uitgelicht — nieuw en relevant voor jou (design pass) ───────────────
   RD-2: the heading is a real disclosure button (aria-expanded + caret);
   collapsed shows only kicker + heading. Hidden-by-query hides the whole
   section (syncAux); collapsed-by-user hides only .arch-uitgelicht__body. */
.arch-uitgelicht { margin: var(--space-8) 0 var(--space-6); }
.arch-uitgelicht__kicker { margin: 0 0 var(--space-1); font-size: var(--font-size-xs); font-weight: 600; text-transform: uppercase; letter-spacing: var(--letter-spacing-widest); color: var(--color-accent-ink); }
.arch-uitgelicht__title { margin: 0; font: var(--h3); font-family: var(--font-heading); color: var(--color-primary); letter-spacing: var(--letter-spacing-display); }
.arch-uitgelicht__toggle { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; font: inherit; font-family: inherit; letter-spacing: inherit; color: inherit; background: none; border: none; padding: 0; cursor: pointer; text-align: left; }
.arch-uitgelicht__caret { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: var(--radius-full); color: var(--color-text-tertiary); transition: transform var(--dur-2) var(--ease), background var(--dur-1), color var(--dur-1); }
.arch-uitgelicht__toggle:hover .arch-uitgelicht__caret { background: var(--color-surface-sunken); color: var(--color-text); }
.arch-uitgelicht__toggle:focus-visible { outline: 2px solid var(--color-accent-ink); outline-offset: 2px; }
.arch-uitgelicht__toggle[aria-expanded="true"] .arch-uitgelicht__caret { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
  .arch-uitgelicht__caret { transition: none; }
}
.arch-uitgelicht__intro { margin: var(--space-1) 0 var(--space-4); font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.arch-uitgelicht__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.arch-ucard { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); background: var(--color-surface-raised); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); text-decoration: none; transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease); }
.arch-ucard:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.arch-ucard__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.arch-ucard__tag { font-size: var(--font-size-xs); font-weight: 600; color: var(--color-accent-ink); background: var(--color-accent-light); border-radius: var(--radius-full); padding: 2px var(--space-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arch-ucard__when { font-size: var(--font-size-xs); color: var(--color-text-tertiary); white-space: nowrap; }
.arch-ucard__title { font-size: var(--font-size-sm); font-weight: 600; color: var(--color-text); line-height: 1.4; }
.arch-ucard__meta { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); font-size: var(--font-size-xs); color: var(--color-text-secondary); }
.arch-ucard__cta { margin-top: auto; font-size: var(--font-size-xs); font-weight: 600; color: var(--color-accent-ink); }
.arch-ucard:hover .arch-ucard__cta { color: var(--color-accent-ink-hover); }
@container app (max-width: 900px) {
  .arch-uitgelicht__grid { grid-template-columns: 1fr; }
}

[hidden] { display: none !important; }

/* Public municipality pages reuse the existing palette with its stronger
   text tokens where the sunken surface otherwise falls just below WCAG AA. */
body.has-landing .ld-section--tint .ld-section__kicker {
  color: var(--color-accent-ink-hover);
}
body.has-landing .ft__colh,
body.has-landing .ft__disclaimer,
body.has-landing .ft__version,
body.has-landing .ft__micro,
body.archief-page .ft__colh,
body.archief-page .ft__disclaimer,
body.archief-page .ft__version,
body.archief-page .ft__micro {
  color: var(--color-text-secondary);
}