/* Hall of Fame — see familytree/CLAUDE.md.
   renderHead sets FOUR inline custom properties on #view-hall from the hall's
   JSON — --hall-accent-light/-2-light (theme.accent/accent2) and
   --hall-accent-dark/-2-dark (theme.accentDark/accent2Dark, falling back to
   the light value when the JSON omits it). Inline styles always beat a
   stylesheet rule for the SAME property, so a `:root[data-theme="dark"]`
   override of --hall-accent directly would silently lose to renderHead's
   inline value; instead the inline values are only ever the *-light/-dark
   inputs, and it is this stylesheet, below, that resolves --hall-accent /
   --hall-accent-2 from them per theme. --hall-accent / --hall-accent-2 are
   used for borders, seals and rules only — never as a text/background pair —
   so a hall cannot author itself into an unreadable contrast. */
#view-hall {
    --hall-accent-light: var(--accent, #4a76c4);
    --hall-accent-2-light: var(--hall-accent-light);
    --hall-accent-dark: var(--hall-accent-light);
    --hall-accent-2-dark: var(--hall-accent-2-light);
    --hall-accent: var(--hall-accent-light);
    --hall-accent-2: var(--hall-accent-2-light);
    max-width: 1180px;
    margin: 0 auto;
}
:root[data-theme="dark"] #view-hall {
    --hall-accent: var(--hall-accent-dark);
    --hall-accent-2: var(--hall-accent-2-dark);
}

.hall-head { text-align: center; margin-bottom: 1.25rem; }
.hall-title-row { display: flex; align-items: center; justify-content: center; gap: .6rem; }
#view-hall h2 { margin: 0; }
.hall-subtitle { color: var(--text-secondary); margin: .35rem 0 0; }
.hall-blurb {
    max-width: 60ch; margin: .9rem auto 0; color: var(--text-primary);
    line-height: 1.6;
}

.hall-hero {
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--hall-accent);
    background: var(--bg-surface);
    border-radius: 10px;
    padding: .9rem 1.1rem;
    margin: 0 0 1.1rem;
}
.hall-hero-headline { font-weight: 600; }
.hall-hero-sub { color: var(--text-secondary); margin-top: .25rem; }

.hall-controls {
    display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.1rem;
    padding: .7rem .9rem; margin-bottom: 1.1rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-color); border-radius: 10px;
}
.hall-control { display: flex; align-items: center; gap: .4rem; }

/* The sort control was a bare native <select> sitting beside styled checkboxes
   and buttons, so it inherited the OS look and ignored the theme entirely.
   These are the same tokens Browse's filter selects use (browse-filters.css) —
   matching that rather than inventing a third control style. */
.hall-control select {
    background: var(--bg-input);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 5px;
    padding: .3rem .5rem;
    font: inherit;
    cursor: pointer;
    min-width: 0;
}
.hall-control select:focus {
    outline: none;
    border-color: var(--accent);
}
.hall-control select:disabled { opacity: .45; cursor: default; }
/* ---- "Relative to" picker ----
   The dropdown reuses .search-results (relationship.css), which is
   position:absolute with left/right:16px tuned for the Relationship card. It
   needs a positioned ancestor of its own here, and its own edges, or it would
   hang off the controls bar. */
.hall-viewas-box { position: relative; }
.hall-viewas-box input {
    background: var(--bg-input);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 5px;
    padding: .3rem .5rem;
    font: inherit;
    width: 15rem; max-width: 100%;
}
.hall-viewas-box input:focus { outline: none; border-color: var(--accent); }
/* A borrowed viewpoint is a mode, and a mode that looks identical to the
   default is how you forget you are in it. The roster labels name the anchor
   outright, so this only has to catch the eye, not carry the message. */
.hall-viewas-box input.hall-viewas-borrowed {
    border-color: var(--hall-accent);
    box-shadow: inset 3px 0 0 var(--hall-accent);
}
.hall-viewas-box input.hall-viewas-borrowed::placeholder {
    color: var(--text-primary); opacity: .85; font-weight: 600;
}
.hall-viewas-box .search-results {
    left: 0; right: auto; top: calc(100% + 4px);
    min-width: 100%; width: max-content; max-width: 22rem;
}
.hall-viewas-reset {
    border: 1px solid var(--border-color); background: transparent;
    color: var(--text-secondary); border-radius: 6px;
    padding: .3rem .6rem; font: inherit; cursor: pointer;
}
.hall-viewas-reset:hover { color: var(--text-primary); border-color: var(--accent); }
.hall-viewas-reset.hidden { display: none; }

.hall-check { display: flex; align-items: center; gap: .35rem; cursor: pointer; }
.hall-check input[disabled] + span, .hall-check:has(input[disabled]) { opacity: .45; cursor: default; }
.hall-layout-toggle { margin-left: auto; display: flex; }
.hall-layout-btn {
    border: 1px solid var(--border-color); background: transparent;
    color: var(--text-primary); padding: .3rem .8rem; cursor: pointer;
}
.hall-layout-btn:first-child { border-radius: 6px 0 0 6px; }
.hall-layout-btn:last-child { border-radius: 0 6px 6px 0; border-left: none; }
.hall-layout-btn.active { background: var(--hall-accent); color: #fff; border-color: var(--hall-accent); }

/* ---- Grid ---- */
.hall-roster.grid {
    display: grid; gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
}
.hall-card {
    position: relative; background: var(--bg-surface);
    border: 1px solid var(--border-color); border-top: 3px solid var(--hall-accent);
    border-radius: 10px; padding: 1.15rem 1rem 1rem;
}
.hall-rank {
    position: absolute; top: -14px; left: 1rem;
    width: 28px; height: 28px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: .78rem; font-weight: 700; color: #fff;
    background: var(--hall-accent); border: 2px solid var(--hall-accent-2);
}
.hall-name { margin: .2rem 0 .3rem; font-size: 1.05rem; }
/* The name is a <button> nested in the heading (see nameHtml in hall.js) so
   it's keyboard-reachable; reset it back to reading as plain heading text. */
.hall-name-link {
    background: none; border: none; padding: 0; margin: 0;
    font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.hall-name-link:hover { text-decoration: underline; }
.hall-meta { font-size: .85rem; color: var(--hall-accent); font-weight: 600; }
.hall-life { font-size: .85rem; color: var(--text-secondary); }
.hall-note { margin: .55rem 0 .7rem; font-size: .9rem; line-height: 1.5; }
.hall-foot { border-top: 1px dashed var(--border-color); padding-top: .55rem; }

.hall-kin {
    background: none; border: none; padding: 0; cursor: pointer;
    font: inherit; font-size: .88rem; text-align: left;
    color: var(--hall-accent-2); font-weight: 600;
}
.hall-kin:hover { text-decoration: underline; }
.hall-kin-marriage, .hall-kin-connected { font-weight: 500; font-style: italic; }
/* The self case ("This is you") renders as a <span>, not a <button> — there
   is nothing to navigate to, so it must not look clickable. */
.hall-kin-self { cursor: default; }
.hall-kin-self:hover { text-decoration: none; }
.hall-absent { font-size: .85rem; color: var(--text-secondary); font-style: italic; }

.hall-card-ghost, .hall-row-ghost { opacity: .62; border-style: dashed; }
.hall-card-ghost .hall-rank { background: var(--text-secondary); border-color: var(--text-secondary); }

/* ---- List ---- */
.hall-roster.list { display: flex; flex-direction: column; gap: .6rem; }
.hall-row {
    display: grid; grid-template-columns: minmax(190px, 260px) 1fr; gap: 1.25rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-color); border-left: 3px solid var(--hall-accent);
    border-radius: 10px; padding: .85rem 1rem;
}
.hall-row-left { display: flex; flex-direction: column; gap: .15rem; }
.hall-row .hall-rank { position: static; margin-bottom: .3rem; }
.hall-row .hall-note { margin: .35rem 0 .5rem; }
.hall-row .hall-foot { border-top: none; padding-top: 0; }

.hall-extras { margin-top: 2rem; }
.hall-extras h3 { border-top: 1px solid var(--border-color); padding-top: 1rem; }
.hall-extras-note { color: var(--text-secondary); font-size: .88rem; margin: .2rem 0 1rem; }

.hall-empty { color: var(--text-secondary); padding: 2rem 0; text-align: center; }
.hall-error { color: var(--danger, #c0392b); padding: 2rem 0; text-align: center; }

/* A hall-level union marker (see `dividers` in familytree/CLAUDE.md). Generic
   — any hall can use it — so it lives here, not in the royalty-scoped block
   below, and takes its colour from the per-hall --hall-accent rather than a
   hardcoded tincture. hall.js suppresses it outside reign order / under any
   filter; see the comment on dividersActive() in hall.js for why. */
.hall-divider {
    display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
    margin: 1.1rem 0 .6rem; padding-top: .6rem;
    border-top: 2px solid var(--hall-accent);
}
.hall-roster.grid .hall-divider { grid-column: 1 / -1; }
/* Text must never carry the tincture as its own contrast — the tincture is
   only guaranteed readable as a rule/rail (see the header comment above);
   as body text it can fail contrast in either theme. The rule above this
   label already carries the colour. */
.hall-divider-label { font-weight: 700; color: var(--text-primary); white-space: nowrap; }
.hall-divider-note { font-size: .85rem; color: var(--text-secondary); }
@media (max-width: 620px) {
    .hall-divider { flex-direction: column; gap: .15rem; }
}

@media (max-width: 620px) {
    .hall-row { grid-template-columns: 1fr; gap: .4rem; }
    .hall-layout-toggle { margin-left: 0; }
}

/* Header menu: the per-hall count sits right-aligned in the row. */
#nav-hall-menu .nav-tool-item { display: flex; align-items: center; gap: .5rem; }

/* Home tile: expands in place rather than navigating. Structure is a
   .home-tool wrapper (the card look — border/bg/padding come from the
   shared .home-tool rule in home.css) containing the toggle button and,
   as its SIBLING (not nested inside it — interactive content inside a
   <button> is invalid HTML), the expandable list. */
.home-tool-hall { padding: 0; gap: 0; }
.home-tool-hall:has(#home-hall-tile[aria-expanded="true"]) {
    outline: 2px solid var(--accent, #4a76c4);
}
.home-tool-hall-btn {
    display: flex; flex-direction: column; gap: 4px;
    width: 100%; background: none; border: none;
    padding: 16px 16px 14px; margin: 0;
    font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.home-hall-list {
    display: flex; flex-direction: column; gap: .35rem;
    margin: .6rem 16px 14px;
}
.home-hall-item {
    display: flex; align-items: center; gap: .45rem;
    padding: .35rem .5rem; border-radius: 6px; cursor: pointer;
    border: 1px solid var(--border-color);
    background: none; color: inherit; font: inherit; text-align: left; width: 100%;
}
.home-hall-item:hover { border-color: var(--accent, #4a76c4); }

/* ================================================================
   British Royalty hall — visual identity. Everything below is scoped
   under #view-hall[data-hall="royalty"] and must not affect Presidents.
   See familytree/CLAUDE.md, Hall of Fame section, for the reasoning.

   Signature: the regnal spine. England and Scotland ran as separate
   crowns for seven centuries and merged in 1603; the roster is already
   in reign order, so list view can *show* that instead of stating it —
   a left gutter carries a rail per row (england = left half, gules;
   scotland = right half, azure; union = a centred two-colour rail),
   read down the page as two tracks that braid together at the divider.
   Built with pseudo-elements on the row; no extra DOM, no JS.

   Colour: gules/azure come from the hall JSON's theme.accent/accent2
   (--hall-accent / --hall-accent-2), not invented here — deliberately
   not the reflexive purple-and-gold "royal" palette, which would read
   as decoration rather than information. Used only for rails, the rank
   seal's ring, and rules — never as a text-on-background pair.

   Type: monarch names and the hall title in a serif stack. Georgia
   ships everywhere (no webfont) and sets old-style figures, so a reign
   date like 1066 renders with descending 6s and 9s — reads like a date
   in a book rather than a table cell. Body and meta copy stay in the
   app's sans so the serif remains an accent, not a theme change.
   ================================================================ */

#view-hall[data-hall="royalty"] {
    --royalty-serif: Georgia, 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', serif;
}
#view-hall[data-hall="royalty"] #hall-title,
#view-hall[data-hall="royalty"] .hall-name {
    font-family: var(--royalty-serif);
}

/* Rank seal — Presidents uses a filled disc; royalty reads as a seal:
   same size, open centre, a 2px ring in the realm's tincture, the numeral
   in the serif face. Falls back to --hall-accent (gules) for entries
   carrying no realm (there are none in royalty.json, but an "Also tagged"
   extra never carries one either).
   background is --bg-surface, not transparent: .hall-card has a 3px
   border-top rule (border-top: 3px solid var(--hall-accent)) and the seal
   sits on top of it (top: -14px); a transparent centre lets that rule run
   straight through the numeral in the default grid view. Painting the card
   surface colour behind the seal occludes it while still reading as an
   open ring, not a filled disc.
   Union carries BOTH tinctures. A border-image was tried first but a
   border-image is painted ignoring border-radius in every engine, so it
   turned the one circular seal that is supposed to read as two-tone into a
   visibly square ring — worst on the very entries (67-85, the whole
   post-1603 section) most people look for first. Two-layer background
   instead: a solid --bg-surface disc in the padding-box occludes the
   centre (and the border-top rule, per above), and a conic-gradient split
   exactly in half sits in the border-box beneath it — border-radius clips
   both layers identically, so the ring stays circular in every browser
   with no mask/clip-path needed. */
#view-hall[data-hall="royalty"] .hall-rank {
    background: var(--bg-surface);
    color: var(--text-primary);
    border: 2px solid var(--hall-accent);
    font-family: var(--royalty-serif);
}
#view-hall[data-hall="royalty"] [data-realm="scotland"] .hall-rank {
    border-color: var(--hall-accent-2);
}
#view-hall[data-hall="royalty"] [data-realm="union"] .hall-rank {
    border: 2px solid transparent;
    background:
        linear-gradient(var(--bg-surface), var(--bg-surface)) padding-box,
        conic-gradient(var(--hall-accent) 0deg 180deg, var(--hall-accent-2) 180deg 360deg) border-box;
}
#view-hall[data-hall="royalty"] .hall-card-ghost .hall-rank,
#view-hall[data-hall="royalty"] .hall-row-ghost .hall-rank {
    border: 2px solid var(--text-secondary);
    background: var(--bg-surface);
}

/* Grid is the default layout (state.layout defaults to 'grid'), and the
   spine below only exists in list view — without this, a first-time
   visitor's first look at the hall shows almost none of its identity.
   Override the generic accent border-top per realm so grid carries the
   same England/Scotland distinction; the spine remains the list-view
   signature (the two-track braid needs the row's full width, which grid
   cards don't have). Union isn't overridden here — it keeps the generic
   --hall-accent border-top; the two-tone reading lives in the rank seal
   and, in list view, the rail. */
#view-hall[data-hall="royalty"] .hall-card[data-realm="scotland"] {
    border-top-color: var(--hall-accent-2);
}

/* The spine itself — list view only; the two-track reading needs the
   row's full width, which is why it collapses to a single rail below
   620px (same breakpoint the row's own grid collapse uses) instead of
   trying to keep two tracks legible in a shrunk gutter. */
#view-hall[data-hall="royalty"] .hall-roster.list .hall-row {
    position: relative;
    border-left: none;   /* replaces the generic single-tint rail */
}
/* Only rows that carry a realm get the spine's gutter — an "Also tagged"
   extra has no `realm` and draws no rail (:not([data-realm]) below), so it
   must not also inherit the indent meant to make room for one. Without
   this guard all 23 extras end up padded for a rail that is never drawn. */
#view-hall[data-hall="royalty"] .hall-roster.list .hall-row[data-realm] {
    padding-left: calc(1rem + 30px);
}
#view-hall[data-hall="royalty"] .hall-roster.list .hall-row::before,
#view-hall[data-hall="royalty"] .hall-roster.list .hall-row::after {
    content: '';
    position: absolute;
    top: .5rem; bottom: .5rem;
    width: 2px;
}
#view-hall[data-hall="royalty"] .hall-roster.list .hall-row:not([data-realm])::before,
#view-hall[data-hall="royalty"] .hall-roster.list .hall-row:not([data-realm])::after {
    content: none;   /* no realm on the entry -> no rail, per the contract */
}
/* England: rail in the left half of the gutter. */
#view-hall[data-hall="royalty"] .hall-roster.list .hall-row[data-realm="england"]::before {
    left: calc(1rem + 7px);
    background: var(--hall-accent);
}
#view-hall[data-hall="royalty"] .hall-roster.list .hall-row[data-realm="england"]::after { content: none; }
/* Scotland: rail in the right half. */
#view-hall[data-hall="royalty"] .hall-roster.list .hall-row[data-realm="scotland"]::before {
    left: calc(1rem + 21px);
    background: var(--hall-accent-2);
}
#view-hall[data-hall="royalty"] .hall-roster.list .hall-row[data-realm="scotland"]::after { content: none; }
/* Union: a centred rail carrying both colours — two 2px bars touching,
   so it reads as one two-colour rail rather than two hairlines. Centred
   between England's rail (7-9px) and Scotland's (21-23px): 13-15px and
   15-17px, contiguous at 15px. */
#view-hall[data-hall="royalty"] .hall-roster.list .hall-row[data-realm="union"]::before {
    left: calc(1rem + 13px);
    background: var(--hall-accent);
}
#view-hall[data-hall="royalty"] .hall-roster.list .hall-row[data-realm="union"]::after {
    left: calc(1rem + 15px);
    background: var(--hall-accent-2);
}

/* Restraint: no animation, no gradients beyond the union rail above, no
   crown glyphs, no parchment textures. The spine is the one bold thing. */

/* Above 620px, England vs Scotland reads from POSITION (left half vs right
   half of the gutter) as well as colour — colour is redundant reinforcement
   of a distinction position already makes. Collapsing both realms to the
   same `left: .3rem` here would leave the distinction resting entirely on
   telling gules from azure apart, which are ~1.1:1 against each other
   (effectively hue-only) and both near-invisible on dark surfaces even
   after the dark-tincture lift above. Position survives where colour
   alone doesn't, so mobile keeps two distinct rail positions rather than
   one shared one. */
@media (max-width: 620px) {
    #view-hall[data-hall="royalty"] .hall-roster.list .hall-row[data-realm] {
        padding-left: calc(1rem + 12px);
    }
    #view-hall[data-hall="royalty"] .hall-roster.list .hall-row[data-realm]::after {
        content: none;
    }
    #view-hall[data-hall="royalty"] .hall-roster.list .hall-row[data-realm="england"]::before {
        left: .3rem;
        width: 3px;
    }
    #view-hall[data-hall="royalty"] .hall-roster.list .hall-row[data-realm="scotland"]::before {
        left: .9rem;
        width: 3px;
    }
    /* Union: centred between the two, spanning both positions with each
       tincture in its own half — still position-distinguishable from
       either single-realm rail, not just colour-distinguishable. */
    #view-hall[data-hall="royalty"] .hall-roster.list .hall-row[data-realm="union"]::before {
        left: .3rem;
        width: 3px;
        background: var(--hall-accent);
    }
    #view-hall[data-hall="royalty"] .hall-roster.list .hall-row[data-realm="union"]::after {
        content: '';
        left: .9rem;
        width: 3px;
        background: var(--hall-accent-2);
    }
}