/* ============================================================================
   Security Hall of Fame rail — iOS "inset grouped" treatment, final.
   A soft canvas (bg-secondary) carries rounded groups (bg-primary) with inset
   hairline dividers. Hierarchy comes from colour and weight (400/500, 600 on
   the title only), never from size: 13px captions, 14px names/values/rank,
   14px title, 12px breakdown caption. Accent appears only as glyph or text
   colour, a 10% tint, the 2px points meter, the 4px severity bar and the panel's
   single filled action (.hof-rail-cta). The breakdown deliberately starts at the
   avatar column (not the text column) so its caption fits a 300px panel.
   Every colour is a main.css token; spacing uses the --space scale.
   ========================================================================= */

/* --- Trigger: quiet edge tab, accent glyph at rest, label on hover/focus --- */
.hof-rail-trigger {
    position: fixed;
    left: 0;
    top: 50%;
    z-index: 999998;
    display: inline-flex;
    align-items: center;
    height: 44px;
    min-height: 44px;
    min-width: 44px;
    max-width: 44px;
    padding: 0;
    overflow: hidden;
    transform: translateY(-50%);
    border: 1px solid var(--border-color);
    border-left: none;
    border-radius: 0 var(--border-radius-lg) var(--border-radius-lg) 0;
    background: var(--bg-primary);
    color: var(--accent-color);
    font: inherit;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: max-width 0.2s ease, box-shadow 0.2s ease, opacity 0.15s ease;
}

.hof-rail-trigger[hidden] {
    display: none;
}

.hof-rail-trigger-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.hof-rail-trigger-label {
    padding-right: 14px;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--text-primary);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.hof-rail-trigger:hover,
.hof-rail-trigger:focus-visible {
    max-width: 240px;
    box-shadow: var(--shadow-md);
}

.hof-rail-trigger:hover .hof-rail-trigger-label,
.hof-rail-trigger:focus-visible .hof-rail-trigger-label {
    opacity: 1;
}

/* Focus rings: outside for free-standing controls, inside for controls that
   sit in a clipped track or card (overflow would eat an outset ring). */
.hof-rail-trigger:focus-visible,
.hof-rail-icon-btn:focus-visible,
.hof-rail-more:focus-visible,
.hof-rail-cta:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

.hof-rail-season:focus-visible,
.hof-rail-row:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: -2px;
}

/* --- Popover shell: flush left, vertically centred, no scrim --------------- */
.hof-rail {
    position: fixed;
    left: 0;
    top: 50%;
    z-index: 999999;
    width: 300px;
    max-width: calc(100vw - 24px);
    transform: translateY(-50%) translateX(-12px);
    opacity: 0;
    transition: transform 0.18s ease, opacity 0.18s ease;
}

.hof-rail[hidden] {
    display: none;
}

.hof-rail.is-open {
    transform: translateY(-50%);
    opacity: 1;
}

/* The canvas. Groups sit on it as bg-primary cards. --hof-inset is where the
   text column starts: row pad (space-3) + rank 20 + gap 10 + avatar 28 + gap 10.
   Computed from the same token as the row padding so hairlines, meter and
   chips stay on the text column at any root font size. */
.hof-rail-panel {
    --hof-inset: calc(var(--space-3) + 20px + 10px + 28px + 10px);
    display: flex;
    flex-direction: column;
    max-height: min(600px, calc(100vh - 220px));
    overflow: hidden;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-left: none;
    border-radius: 0 var(--border-radius-lg) var(--border-radius-lg) 0;
    box-shadow: var(--shadow-lg);
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--text-primary);
}

/* Keyboard/programmatic focus lands on the panel when it opens: a quiet inset ring
   in the brand accent instead of the browser default black. */
.hof-rail-panel:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: -2px;
}

/* --- Header: 44px nav-bar grid, grey glyph, title, two 36px icon buttons --- */
.hof-rail-head {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    padding: 0 6px 0 14px;
    border-bottom: 1px solid var(--border-color);
}

.hof-rail-head-icon {
    flex-shrink: 0;
    width: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    font-size: 14px;
}

.hof-rail-title {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-size: 14px;
    line-height: 1.3;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hof-rail-actions {
    margin-left: auto;
    flex-shrink: 0;
    display: flex;
    gap: var(--space-1);
}

.hof-rail-icon-btn {
    position: relative;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.hof-rail-icon-btn:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.hof-rail-close {
    font-size: 15px;
}

.hof-rail-info-btn.is-active {
    color: var(--accent-color);
    background: color-mix(in srgb, var(--accent-color) 10%, transparent);
}

/* Affordance cue: while the panel is open and the note is still folded, the
   info glyph breathes three times (6px soft ring at 28%), then rests. */
@keyframes hof-pulse {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-color) 28%, transparent); }
    70%  { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent-color) 0%, transparent); }
    100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-color) 0%, transparent); }
}

/* Only until the note has been seen once in this page view (data-seen). */
.hof-rail.is-open .hof-rail-info-btn:not(.is-active):not([data-seen]) {
    color: var(--accent-color);
    animation: hof-pulse 1.6s ease-out 0.6s 3;
}

/* --- Explanation popover: shows on mouse hover / keyboard focus of the info
       glyph, pins on click or tap, floats over the list under the header. Its
       containing block is .hof-rail (the panel is not positioned) so the panel's
       overflow:hidden never clips it; on short viewports it scrolls itself.
       Hoverable, persistent and Escape-dismissible (WCAG 1.4.13). */
.hof-rail-info {
    position: absolute;
    top: calc(44px + 1px + var(--space-2));
    left: var(--space-3);
    right: var(--space-3);
    max-height: calc(100% - 53px - var(--space-2));
    overflow-y: auto;
    scrollbar-width: thin;
    z-index: 3;
    margin: 0;
    padding: 10px var(--space-3);
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    animation: hof-unfold 0.15s ease;
}

.hof-rail-info[hidden] {
    display: none;
}

@keyframes hof-unfold {
    from { opacity: 0; transform: translateY(-3px); }
    to   { opacity: 1; transform: none; }
}

.hof-rail-info-list {
    margin: 0;
    padding-left: var(--space-4);
    font-size: 13px;
    line-height: 1.45;
    font-weight: 400;
    color: var(--text-secondary);
}

.hof-rail-info-list li {
    margin: 0;
}

.hof-rail-info-list li::marker {
    color: var(--text-secondary);
}

.hof-rail-info-list li + li {
    margin-top: var(--space-1);
}

/* Points legend: a five-cell strip (label over value) that never needs
   separators and always fits one row. */
.hof-rail-info-pts {
    margin: var(--space-2) 0 0;
    padding-top: var(--space-2);
    border-top: 1px solid var(--border-color);
}

.hof-rail-info-pts-label {
    display: block;
    margin-bottom: var(--space-1);
    font-size: 12px;
    line-height: 1.4;
    font-weight: 500;
    color: var(--text-secondary);
}

.hof-rail-info-grid {
    display: flex;
    justify-content: space-between;
    gap: var(--space-2);
}

.hof-rail-info-pt {
    display: flex;
    flex-direction: column;
    min-width: 0;
    font-size: 12px;
    line-height: 1.4;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.hof-rail-info-pt strong {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
}

.hof-rail-dot {
    color: var(--text-secondary);
    padding: 0 3px;
}

/* --- Season switcher: segmented control (rendered only with 2+ seasons).
   Weight is constant so toggling never reflows the track. ------------------ */
.hof-rail-seasons {
    flex-shrink: 0;
    display: flex;
    gap: var(--space-1);
    margin: var(--space-2) var(--space-3) 0;
    padding: 2px;
    overflow-x: auto;
    background: var(--bg-tertiary);
    border-radius: 999px;
}

.hof-rail-season {
    flex: 1 0 auto;
    min-height: 36px;
    min-width: 56px;
    padding: 0 var(--space-3);
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.hof-rail-season:hover {
    color: var(--text-primary);
}

.hof-rail-season.is-active {
    background: var(--bg-primary);
    color: var(--text-primary);
    box-shadow: var(--shadow-sm);
}

/* --- Body: the only scrolling region; one lede + one grouped list per season */
.hof-rail-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    padding: var(--space-2) var(--space-3);
}

.hof-rail-season-panel {
    display: block;
}

.hof-rail-season-panel[hidden] {
    display: none;
}

.hof-rail-lede {
    margin: 0 0 6px;
    padding: 0 var(--space-3);
    font-size: 13px;
    line-height: 1.4;
    font-weight: 400;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.hof-rail-lede-year {
    font-weight: 500;
    color: var(--text-primary);
}

.hof-rail-list {
    margin: 0;
    padding: 0;
    list-style: none;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
}

.hof-rail-item {
    position: relative;
}

/* Inset hairline: starts where the text column starts, like iOS separators.
   The row's own fill paints over it on hover/expand, as a selected cell does. */
.hof-rail-item + .hof-rail-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: var(--hof-inset);
    right: 0;
    height: 1px;
    background: var(--border-color);
    pointer-events: none;
}

/* Row = a button that unfolds the severity breakdown. Flat; hover is a soft
   grey fill across the whole cell, the open row keeps a lighter grey. */
.hof-rail-row {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 7px var(--space-3);
    border: none;
    border-radius: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease;
}

.hof-rail-row[aria-expanded="true"] {
    background: var(--bg-secondary);
}

.hof-rail-row:hover {
    background: var(--bg-tertiary);
}

/* Points relative to the leader: a 2px hairline riding the separator under
   the text column. Very quiet at rest; lifts only as interactive feedback.
   The leader's bar is deliberately not boosted: rank colour and avatar tint
   already mark #1, and the number carries the information. */
.hof-rail-bar {
    position: absolute;
    left: var(--hof-inset);
    right: var(--space-3);
    bottom: 0;
    height: 2px;
    width: auto;
    border-radius: 999px;
    transform-origin: left;
    transform: scaleX(calc(var(--hof-w, 0%) / 100%));
    background: var(--accent-color);
    opacity: 0.18;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.hof-rail-row:hover .hof-rail-bar {
    opacity: 0.35;
}

/* While the breakdown is open its 4px bar owns the lane; the 2px meter steps
   aside so the two never stack into one two-tone stripe. */
.hof-rail-row[aria-expanded="true"] .hof-rail-bar {
    opacity: 0;
}

.hof-rail-row.is-static {
    cursor: default;
}

.hof-rail-row.is-static:hover {
    background: transparent;
}

/* Rank: a light numeral at the value size (14/400), grey; the leader's is the
   accent colour at the same weight (colour hierarchy, not size or boldness). */
.hof-rail-rank {
    flex-shrink: 0;
    width: 20px;
    text-align: center;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.3;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.hof-rail-item.is-lead .hof-rail-rank {
    color: var(--accent-color);
}

.hof-rail-av {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.02em;
}

.hof-rail-item.is-lead .hof-rail-av {
    background: color-mix(in srgb, var(--accent-color) 10%, transparent);
    color: var(--accent-color);
}

.hof-rail-who {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

/* Name 14/500 primary over a 13/400 grey caption: the title/subtitle cell. */
.hof-rail-name {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hof-rail-meta {
    font-size: 13px;
    line-height: 1.3;
    font-weight: 400;
    color: var(--text-secondary);
}

/* Trailing value in the primary label colour on every row (Music / App Store
   idiom), the unit demoted to a grey caption. */
.hof-rail-pts {
    flex-shrink: 0;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.hof-rail-pts-unit {
    font-size: 13px;
    font-weight: 400;
    color: var(--text-secondary);
}

/* Disclosure chevron: pure affordance, grey in every state; rotation alone
   signals the open row. 75% keeps it above 3:1 as a UI indicator. */
.hof-rail-chev {
    flex-shrink: 0;
    width: 12px;
    text-align: center;
    font-size: 12px;
    color: var(--text-secondary);
    opacity: 0.75;
    transition: transform 0.18s ease, opacity 0.15s ease;
}

.hof-rail-row:hover .hof-rail-chev {
    opacity: 1;
}

.hof-rail-row[aria-expanded="true"] .hof-rail-chev {
    transform: rotate(180deg);
    opacity: 1;
}

/* Unfolded breakdown: one proportional bar (single hue, opacity steps from
   critical to info) and one quiet caption line — no tags, no boxes. */
.hof-rail-details {
    display: flex;
    flex-direction: column;
    gap: 6px;
    /* Starts at the avatar column (not the name column) so the caption fits one line at 300px. */
    padding: 4px var(--space-3) var(--space-2) calc(var(--space-3) + 20px + 10px);
    background: var(--bg-secondary);
    animation: hof-unfold 0.18s ease;
}

.hof-rail-details[hidden] {
    display: none;
}

.hof-rail-sevbar {
    display: flex;
    gap: 2px;
    height: 4px;
    border-radius: 999px;
    overflow: hidden;
}

.hof-rail-sev {
    display: block;
    flex: 1 1 0;
    min-width: 6px;
    height: 100%;
    background: var(--accent-color);
    border-radius: 999px;
}

.hof-rail-sev--critical { opacity: 1; }
.hof-rail-sev--high     { opacity: 0.72; }
.hof-rail-sev--medium   { opacity: 0.5; }
.hof-rail-sev--low      { opacity: 0.32; }
.hof-rail-sev--info     { opacity: 0.18; }

.hof-rail-sevtext {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 10px;
    font-size: 12px;
    line-height: 1.4;
    font-weight: 400;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.hof-rail-sev-item {
    white-space: nowrap;
}

.hof-rail-sevtext strong {
    font-weight: 500;
    color: var(--text-primary);
}

/* Text link to the full board: accent as text colour only, underline on hover. */
.hof-rail-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px;
    margin: 0;
    padding: 0 var(--space-3);
    border-radius: var(--border-radius);
    color: var(--accent-color);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    text-decoration: none;
    transition: color 0.15s ease;
}

.hof-rail-more:hover {
    color: var(--primary-hover);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* --- Footer: the panel's single filled action ------------------------------ */
.hof-rail-foot {
    flex-shrink: 0;
    padding: var(--space-2) var(--space-3) var(--space-3);
    border-top: 1px solid var(--border-color);
}

.hof-rail-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 40px;
    padding: 0 14px;
    border-radius: var(--border-radius);
    background: var(--accent-color);
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    text-decoration: none;
    transition: background 0.15s ease;
}

.hof-rail-cta:hover {
    background: var(--primary-hover);
    color: #fff;
}

/* --- Dark theme: the only literal colour above is the CTA label. The dark
   accent (#60a5fa) is too light for white text, so the label takes the dark
   surface colour instead (7:1). Everything else flows from tokens. --------- */
[data-theme="dark"] .hof-rail-cta,
[data-theme="dark"] .hof-rail-cta:hover {
    color: var(--bg-primary);
}

/* --- Mobile: same tab, panel spans the width minus a gutter --------------- */
@media (max-width: 480px) {
    .hof-rail {
        width: calc(100vw - 16px);
    }

    .hof-rail-panel {
        max-height: 70vh;
    }
}

/* Percentage-over-percentage division needs typed calc(); where it is not
   supported the meter is dropped rather than rendered at full width. */
@supports not (transform: scaleX(calc(1% / 1%))) {
    .hof-rail-bar {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hof-rail-trigger,
    .hof-rail-trigger-label,
    .hof-rail,
    .hof-rail-icon-btn,
    .hof-rail-season,
    .hof-rail-row,
    .hof-rail-bar,
    .hof-rail-chev,
    .hof-rail-more,
    .hof-rail-cta {
        transition: none;
    }

    .hof-rail.is-open .hof-rail-info-btn:not(.is-active):not([data-seen]),
    .hof-rail-info,
    .hof-rail-details {
        animation: none;
    }
}