/* The gazette list and the pages built of its rows — the list at / with its band, the year, an
   authority's list (F1 WP-3, WP-4, WP-6; D-37; the band and the date navigation of
   visual_design.md V-5, V-6, V-8 and V-10). Loaded per page through {% block extra_css %}.
   Semantic tokens only. Nothing here scrolls sideways: every set of tiles or chips wraps (the
   owner, 2026-10-17). */

/* the page head */
.list-head { margin-bottom: var(--space-3); }
.list-head h1 { margin-bottom: var(--space-2); }
.list-head__controls { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.list-controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-3); }
.summary { margin: 0; color: var(--color-ink-soft); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.summary strong { color: var(--color-ink); font-weight: var(--weight-semibold); }
.summary em { font-style: normal; font-weight: var(--weight-semibold); color: var(--color-ink); }
.also { margin: var(--space-2) 0 0; font-size: var(--text-sm); color: var(--color-ink-muted); }
.also em { font-style: italic; color: var(--color-ink-soft); }

/* the frame: filters beside the results on a wide screen, above them on a narrow one */
.listing { display: grid; gap: var(--space-4); align-items: start; }
@media (min-width: 64rem) {
  .listing { grid-template-columns: 16.5rem minmax(0, 1fr); gap: var(--space-6); }
}
.results { min-width: 0; }

/* the filters */
.facets { border: 1px solid var(--color-line); border-radius: var(--radius-lg); background: var(--color-surface); }
.facets__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  list-style: none;
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
}
.facets__toggle::-webkit-details-marker { display: none; }
.facets__toggle::after { content: "+"; font-size: 1.25rem; line-height: 1; color: var(--color-ink-muted); }
.facets[open] > .facets__toggle::after { content: "\2212"; }
.facets__active { color: var(--color-ink-muted); font-weight: var(--weight-regular); }
.facets__body { padding: 0 var(--space-4) var(--space-2); }
@media (min-width: 64rem) {
  .facets { border: 0; background: none; }
  .facets__toggle { padding: 0 0 var(--space-3); cursor: default; pointer-events: none; }
  .facets__toggle::after { content: none; }
  .facets__body { padding: 0; }
}
.facet { padding-block: var(--space-2); border-top: 1px solid var(--color-line); }
.facet__title { margin: 0 0 var(--space-2); }
.facet__clear { margin: 0 0 var(--space-3); font-size: var(--text-sm); }

.chips { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 1.75rem;
  max-width: 100%;
  padding: 0.125rem 0.6rem;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-ink);
  font-size: var(--text-sm);
  line-height: 1.25;
  text-decoration: none;
}
a.chip:hover { border-color: var(--color-accent); color: var(--color-accent); text-decoration: none; }
.chip__count { color: var(--color-ink-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.chip.is-active { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.chip.is-active:hover { color: var(--color-accent-ink); background: var(--color-accent-hover); }
.chip.is-active .chip__count { color: var(--color-accent-ink); }
.chip__clear { font-size: 1rem; line-height: 1; margin-left: 0.125rem; }
.chip.is-empty { border-style: dashed; color: var(--color-ink-muted); background: transparent; }
/* Watching pins in the "Issued by" facet (F7 UI-7): the reader's authorities first, on the tint. */
.pins--facet { margin: 0 0 var(--space-2); }
.pins__label { display: block; margin-bottom: var(--space-1); }
.chip--pinned { border-color: var(--color-accent-soft); background: var(--color-accent-tint); }
.facet__more { margin-top: var(--space-3); }
.facet__more > summary { cursor: pointer; font-size: var(--text-sm); color: var(--color-accent); }
.facet__more > summary:hover { text-decoration: underline; }
.facet__more[open] > .chips { margin-top: var(--space-3); }

/* the drill: year → month → day (V-10), under the year chips */
.drill { margin: var(--space-3) 0 0 var(--space-2); padding-left: var(--space-3); border-left: 2px solid var(--color-accent-soft); }
.drill__label { display: block; margin-bottom: var(--space-2); }
.chips--months .chip { min-height: 1.75rem; padding: 0.125rem 0.5rem; }
.cal { border-collapse: collapse; margin-top: var(--space-2); font-size: var(--text-xs); }
.cal th { padding: 0 0 0.25rem; font-weight: var(--weight-semibold); color: var(--color-ink-muted); letter-spacing: 0.05em; text-align: center; }
.cal td { padding: 1px; }
.cal__day, .cal__none { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: var(--radius-sm); font-variant-numeric: tabular-nums; }
.cal__none { color: var(--color-ink-muted); }
.cal__day { background: var(--color-accent-tint); color: var(--color-accent-hover); font-weight: var(--weight-semibold); text-decoration: none; transition: background-color var(--motion) ease; }
.cal__day:hover { background: var(--color-accent-soft); color: var(--color-accent-hover); text-decoration: none; }
.cal__day.is-active { background: var(--color-accent); color: var(--color-accent-ink); }
.jump { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-3); }
.jump input { min-width: 0; max-width: 100%; padding: 0.3rem var(--space-2); border: 1px solid var(--color-line-strong); border-radius: var(--radius); background: var(--color-surface); color: var(--color-ink); font: inherit; font-size: var(--text-sm); }

/* the date rail (V-10): tiles that wrap; ‹ earlier and later › at its ends (below the tiles on a phone) */
.rail { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "days days" "earlier later"; gap: var(--space-2); margin-bottom: var(--space-3); }
.rail__days { grid-area: days; }
.rail__end { display: inline-flex; align-items: center; padding: var(--space-1) var(--space-2); border: 1px dashed var(--color-line-strong); border-radius: var(--radius); color: var(--color-accent); font-size: var(--text-sm); text-decoration: none; white-space: nowrap; transition: border-color var(--motion) ease; }
.rail__end--earlier { grid-area: earlier; justify-self: start; }
.rail__end--later { grid-area: later; justify-self: end; }
a.rail__end:hover { border-color: var(--color-accent); text-decoration: none; }
.rail__end.is-disabled { color: var(--color-ink-muted); border-color: var(--color-line); }
@media (min-width: 48rem) {
  .rail { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "earlier days later"; align-items: stretch; }
}
.rail .tile { min-width: 5.5rem; padding: 0.4rem 0.6rem; }

/* tiles (the strips and the rail): the day in the serif, the count muted */
.tiles { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tile { display: flex; flex-direction: column; min-width: 6.25rem; max-width: 100%; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-line); border-radius: var(--radius); background: var(--color-surface); color: var(--color-ink); text-decoration: none; transition: border-color var(--motion) ease; }
a.tile:hover { border-color: var(--color-accent); color: var(--color-ink); text-decoration: none; }
.tile__k { font-size: var(--text-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-ink-muted); }
.tile__v { font-family: var(--font-serif); font-optical-sizing: auto; font-size: var(--text-lg); font-weight: var(--weight-semibold); line-height: 1.2; font-variant-numeric: tabular-nums lining-nums; }
.tile__n { font-size: var(--text-xs); color: var(--color-ink-muted); font-variant-numeric: tabular-nums; }
.tile.is-today { border-color: var(--color-highlight); }
.tile.is-today .tile__k::after { content: ""; display: inline-block; width: 0.45rem; height: 0.45rem; margin-left: 0.35rem; border-radius: 50%; background: var(--color-highlight); vertical-align: middle; }
.tile.is-active { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); box-shadow: 0 0 0 2px var(--color-paper), 0 0 0 4px var(--color-highlight); }
.tile.is-active .tile__k, .tile.is-active .tile__n { color: var(--color-accent-soft); }

/* the row above and below a list */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-3);
  font-size: var(--text-sm);
}
.perpage { display: flex; align-items: center; gap: var(--space-2); color: var(--color-ink-muted); }
.perpage__list { display: flex; gap: 0.125rem; }
.perpage a, .perpage span[aria-current] {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-sm);
  font-variant-numeric: tabular-nums;
}
.perpage span[aria-current] { background: var(--color-surface-alt); color: var(--color-ink); font-weight: var(--weight-semibold); }

.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-3); }
.pager--compact { margin-top: 0; }
.pager__summary { margin: 0; font-size: var(--text-sm); color: var(--color-ink-soft); font-variant-numeric: tabular-nums; }
.pager__list { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; }
.pager__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}
a.pager__link:hover { border-color: var(--color-accent); color: var(--color-accent); text-decoration: none; }
.pager__link[aria-current="page"] { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.pager__link.is-disabled { color: var(--color-ink-muted); background: transparent; border-style: dashed; }
.pager__gap { padding: 0 0.25rem; color: var(--color-ink-muted); }
.pager__where { padding: 0 var(--space-2); color: var(--color-ink-soft); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
@media (max-width: 40rem) {
  .pager__num, .pager__gap { display: none; }
}
@media (min-width: 40.01rem) {
  .pager--full .pager__where { display: none; }
}

/* day groups and rows: the weekday in small capitals above the date, a hairline in the accent
   above (D-38), the count and the quiet links to the days either side at the right */
.day { margin-bottom: var(--space-4); }
.day__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-1) var(--space-3);
  margin: 0 0 var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-accent);
}
.day__title { margin: 0; font-size: var(--text-lg); }
.day__dow { display: block; font-family: var(--font-sans); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-ink-muted); }
.day__today { display: inline-flex; align-items: center; gap: 0.35rem; margin-left: var(--space-2); padding: 0.1rem 0.55rem; border-radius: var(--radius-pill); background: var(--color-highlight-soft); color: var(--color-highlight-ink); font-family: var(--font-sans); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: 0.05em; text-transform: uppercase; vertical-align: middle; }
.day__today::before { content: ""; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--color-highlight); }
.day__side { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); margin: 0; max-width: none; font-size: var(--text-sm); color: var(--color-ink-muted); font-variant-numeric: tabular-nums; }
.day__step { text-decoration: none; white-space: nowrap; }

.entries { margin: 0; padding: 0; list-style: none; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-lg); }
.entries > li { max-width: none; }
.entries > li + li { border-top: 1px solid var(--color-line); }
.entries > li:first-child .entry { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.entries > li:last-child .entry { border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.entries > li:only-child .entry { border-radius: var(--radius-lg); }

.entry {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "cue actions" "main main";
  gap: var(--space-1) var(--space-3);
  padding: 0.625rem var(--space-4);
  transition: background-color var(--motion) ease;
}
/* The authority group's strip (D-31): inset from the corners, the accent on hover. */
.entry::before { content: ""; position: absolute; left: 0; top: 0.625rem; bottom: 0.625rem; width: 4px; border-radius: 0 2px 2px 0; background: var(--group, transparent); transition: background-color var(--motion) ease; }
.entry:hover { background: var(--color-accent-tint); }
.entry:hover::before { background: var(--color-accent); }
@media (min-width: 40rem) {
  .entry { grid-template-columns: 7.5rem minmax(0, 1fr) auto; grid-template-areas: "cue main actions"; padding: 0.625rem var(--space-4); }
}
.entry__cue { grid-area: cue; align-self: start; padding-top: 0.25rem; }
.entry__main { grid-area: main; min-width: 0; }
.entry__number {
  font-family: var(--font-serif);
  font-optical-sizing: auto;
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  line-height: 1.15;
  color: var(--color-ink);
  font-variant-numeric: tabular-nums lining-nums;
  text-decoration: none;
  letter-spacing: 0.005em;
}
.entry__number::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.entry__number:hover { color: var(--color-accent); text-decoration: none; }
.entry__number:focus-visible { outline: none; }
.entry__number:focus-visible::after { outline: var(--focus-ring); outline-offset: -3px; border-radius: var(--radius); }
/* the three lines (V-9 as D-38 tightened it): the number with who issued it beside it (a link above
   the stretched one), the contents line we composed, the meta */
.entry__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-3); margin: 0; max-width: none; }
.entry__issuer { min-width: 0; color: var(--color-ink); font-weight: var(--weight-medium); }
.entry__issuer a, .entry__more { position: relative; z-index: 1; }
.entry__issuer a { color: inherit; text-decoration: none; }
.entry__issuer a:hover { color: var(--color-accent); text-decoration: underline; }
.entry__contents { margin: 0; font-size: var(--text-sm); color: var(--color-ink-muted); max-width: none; }
/* the sub-title (GZ-14, D-42): the first notice as printed, at reading size, two lines at most */
.entry__title { margin: 0; color: var(--color-ink); max-width: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.entry__also { font-size: var(--text-sm); color: var(--color-ink-muted); }
/* A topic's page (F15 LP-4): the class's word before the notice that earned the row its place. */
.entry__class { margin-right: var(--space-1); color: var(--color-accent); }
.entry__meta { margin: 0; font-size: var(--text-xs); color: var(--color-ink-muted); font-variant-numeric: tabular-nums; max-width: none; }
.entry__more { margin: 0.125rem 0 0; font-size: var(--text-xs); max-width: none; }
.entry__more a { text-decoration: none; }
.entry__actions { grid-area: actions; position: relative; z-index: 1; display: flex; align-items: center; gap: var(--space-1); align-self: start; }
/* the actions as links, never buttons (D-38), 2 rem tap targets; the PDF bold in the accent, filled on hover (D-44) */
.entry__action { display: inline-flex; align-items: center; min-height: 2rem; padding: 0 var(--space-2); border-radius: var(--radius-sm); color: var(--color-ink-muted); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; transition: color var(--motion) ease, background-color var(--motion) ease; }
.entry__action--pdf { color: var(--color-accent); font-weight: var(--weight-bold); }
.entry__action:hover { color: var(--color-accent-ink); background: var(--color-accent); text-decoration: none; }
.entry__passage {
  position: relative;
  z-index: 1;
  margin: var(--space-2) 0 0;
  padding-left: var(--space-3);
  border-left: 2px solid var(--color-line-strong);
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
  max-width: var(--measure);
}
.entry__passage-label { display: block; margin-bottom: 0.125rem; }

.number-hits { margin-bottom: var(--space-4); }
.number-hits h2 { font-size: var(--text-lg); }

/* empty states: the outline beside one sentence and one link (V-6) */
.empty {
  display: flow-root;
  padding: var(--space-4);
  border: 1px dashed var(--color-line-strong);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}
.empty p { margin: 0; font-size: var(--text-base); }
.empty__near { margin-top: var(--space-3); font-size: var(--text-sm); color: var(--color-ink-soft); }

/* the band above the unfiltered list (V-5, V-6, V-8; D-37) */
.band { display: grid; gap: var(--space-3); padding-block: var(--space-2) var(--space-3); }
.band__in { min-width: 0; }
.band__kicker { display: flex; align-items: center; gap: var(--space-1); margin: 0 0 var(--space-2); font-size: var(--text-sm); color: var(--color-ink-soft); max-width: none; }
.band__title { margin-bottom: var(--space-2); font-size: clamp(1.5rem, 1rem + 1.6vw, 2.25rem); color: var(--color-ink-deep); }   /* a third shorter (D-38) */
/* D-44: one line from 36 rem, sized under 1/22 of the width (it is ~19.5 em) so it never overflows */
@media (min-width: 36rem) { .band__title { white-space: nowrap; font-size: min(2.25rem, 1rem + 1.6vw, (100vw - 2rem) / 22); } }
.band__lede { font-size: var(--text-base); line-height: 1.5; color: var(--color-ink-soft); max-width: none; margin-bottom: var(--space-2); }
.band .search { max-width: 40rem; }
.examples { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); margin: var(--space-2) 0 0; max-width: none; font-size: var(--text-sm); color: var(--color-ink-muted); }
.figures { display: flex; flex-wrap: wrap; gap: var(--space-1) 0; margin: var(--space-3) 0 0; font-size: var(--text-sm); color: var(--color-ink-muted); font-variant-numeric: tabular-nums; }
.figures li + li::before { content: "\00b7"; margin: 0 var(--space-3); }
.figures strong { color: var(--color-ink); font-weight: var(--weight-semibold); }

/* the year */
.months { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: var(--space-2); margin: 0 0 var(--space-4); padding: 0; list-style: none; }
.months li { max-width: none; }
.month { display: block; height: 100%; padding: var(--space-3); border: 1px solid var(--color-line); border-radius: var(--radius); background: var(--color-surface); color: var(--color-ink); text-decoration: none; }
a.month:hover { border-color: var(--color-accent); color: var(--color-ink); text-decoration: none; }
.month__name { display: block; font-weight: var(--weight-semibold); }
.month__n { display: block; font-family: var(--font-serif); font-size: var(--text-lg); font-variant-numeric: tabular-nums lining-nums; }
.month__range { display: block; font-size: var(--text-xs); color: var(--color-ink-muted); font-variant-numeric: tabular-nums; }
.month.is-empty { background: transparent; border-style: dashed; color: var(--color-ink-muted); }
.kind-counts { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-4); padding: 0; list-style: none; }
.kind-counts li { max-width: none; }
.kind-counts a { display: inline-flex; align-items: center; gap: var(--space-2); text-decoration: none; color: var(--color-ink); }
.kind-counts a:hover .kind-counts__label { text-decoration: underline; }
.year-nav { display: flex; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-4); }

/* The search within a list (D-32): the label names the scope; the box is the header's. */
.within { margin: 0 0 var(--space-3); max-width: 40rem; }
.within__label { display: block; margin-bottom: var(--space-1); font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.within__scope { font-weight: var(--weight-regular); color: var(--color-ink-muted); }
.within__also { margin: var(--space-1) 0 0; font-size: var(--text-xs); max-width: none; }