/* Browsing by issuing authority (F1 WP-11; visual_design.md V-11): the index grouped by kind with
   its type-ahead box, and an authority's page — its kind and names, the spellings, the year bar
   drawn in CSS from a value set inline. Loaded per page through {% block extra_css %} (the
   authority's page loads listing.css too, for its list region). Semantic tokens only; nothing
   scrolls sideways. */

/* the index */
.finder { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin: 0 0 var(--space-2); }
.finder input { flex: 1 1 16rem; max-width: 28rem; min-width: 0; 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: var(--text-sm) / 1 var(--font-sans); }
.finder__none { color: var(--color-ink-muted); }
/* The groups flow in a row that wraps: a group of one authority takes a card's width and sits beside the
   next such group (the Presidency with Parliament); a longer group takes the whole line. */
.akinds { display: flex; flex-wrap: wrap; column-gap: var(--space-4); }
.akinds > .akind { flex: 1 1 100%; }
.akinds > .akind:has(.auths > li:only-child) { flex: 1 1 17rem; }
.akind { padding-block: var(--space-2) var(--space-3); border-top: 1px solid var(--color-line); }
.akind__title { display: flex; align-items: baseline; gap: var(--space-2); margin-bottom: var(--space-2); font-size: var(--text-lg); }
.akind[data-group] .akind__title::before { content: ""; flex: none; align-self: center; width: 0.75rem; height: 0.75rem; border-radius: 3px; background: var(--group); }
.akind__n { font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--weight-regular); color: var(--color-ink-muted); font-variant-numeric: tabular-nums; }
.auths { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: var(--space-2); }
.auth__link { display: block; height: 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; }
.auth__link:hover { border-color: var(--color-accent); color: var(--color-ink); text-decoration: none; }
.auth__name { display: block; font-weight: var(--weight-medium); }
.auth__meta { display: block; font-size: var(--text-xs); color: var(--color-ink-muted); font-variant-numeric: tabular-nums; }

/* Watching pins (F7 UI-7): the pin at a card's corner, and the reader's "Watching" group first,
   its cards carrying their group's colour as a strip (the key is the groups below). */
.auth { position: relative; }
.auth .ctl--pin { position: absolute; right: var(--space-1); top: var(--space-1); z-index: 1; }
.auth:has(.ctl--pin:not(:empty)) .auth__link { padding-right: 2.75rem; }
.akind--pinned { border-top: 0; padding-top: 0; }
.akind__pin { width: 0.9rem; height: 0.9rem; margin-right: var(--space-1); color: var(--color-accent); align-self: center; }
.akind--pinned .auth[data-group] .auth__link { border-left: 4px solid var(--group); }
/* how to pin (D-44); "sign in" hides once account.js marks the body */
.pin-hint { margin: 0 0 var(--space-2); font-size: var(--text-sm); color: var(--color-ink-soft); max-width: none; }
.pin-hint strong { color: var(--color-ink); font-weight: var(--weight-semibold); }
.pin-hint .ctl__icon { display: inline-block; width: 1.1em; height: 1.1em; vertical-align: -0.2em; color: var(--color-accent); }
.gf-signed-in .pin-hint__in { display: none; }
.auth:hover .ctl__pin { color: var(--color-accent); }

/* the authority's page */
.authority-head__kind { margin-bottom: var(--space-2); }
.authority-head[data-group] { padding-left: var(--space-4); border-left: 4px solid var(--group); }
.spellings { margin: var(--space-2) 0 0; font-size: var(--text-sm); color: var(--color-ink-muted); max-width: none; }
.spellings code { margin-right: var(--space-2); color: var(--color-ink-soft); }

/* the year bar: one column a year that shares the width (eleven fit a phone: the century hides),
   the count above, the fill's height --h of the track, the year beneath; a link each */
.yearbar { margin: 0 0 var(--space-4); padding: var(--space-2) var(--space-4); border: 1px solid var(--color-line); border-radius: var(--radius-lg); background: var(--color-surface); }
.yearbar__title { margin: 0 0 var(--space-2); }
.bars { display: flex; align-items: flex-end; gap: 0.25rem; }
.bars > li { flex: 1 1 0; min-width: 0; }
.bar { display: flex; flex-direction: column; align-items: center; color: var(--color-ink-muted); font-size: var(--text-xs); text-decoration: none; font-variant-numeric: tabular-nums; }
.bar__n { margin-bottom: 0.2rem; }
.bar__track { display: flex; align-items: flex-end; justify-content: center; width: 100%; height: 3rem; }
.bar__fill { display: block; width: 100%; max-width: 2.5rem; height: var(--h); min-height: 2px; border-radius: var(--radius-sm) var(--radius-sm) 0 0; background: var(--color-accent); transition: background-color var(--motion) ease; }
.bar--none .bar__fill { background: var(--color-line); }
.bar__year { width: 100%; margin-top: 0.3rem; padding-top: 0.3rem; border-top: 1px solid var(--color-line); text-align: center; color: var(--color-ink-soft); }
a.bar:hover { color: var(--color-accent); text-decoration: none; }
a.bar:hover .bar__fill { background: var(--color-accent-hover); }
@media (max-width: 30rem) { .bar__century { display: none; } }