/* ─────────────────────────────────────────────────────────────────────────
   Shared index-page shell
   Loaded by series.html and tool_matrix.html (before their own stylesheet).

   Both pages are the same shape: a hero card that introduces the page, a
   sticky toolbar that filters it, and a grid of cards below. Before this file
   each page had its own copy of that shape under a different prefix, and the
   copies had drifted — different sticky offsets, different z-indexes, one
   intro capped at a readable measure and one not. Anything that belongs to
   *both* pages lives here under `.page-*`; anything genuinely specific to one
   of them stays in series.css / tools.css.
   ───────────────────────────────────────────────────────────────────────── */

:root {
    /* Height of the sticky site header (1.25rem padding x2 + 1.75rem title
       line + 1px border). Every sticky element below the header offsets by
       this, so there is one number to change if the header ever resizes. */
    --sticky-top: 76px;
}

/* ── Hero ─────────────────────────────────────────────────────────────── */
.page-hero {
    background: linear-gradient(135deg, rgba(0, 255, 157, 0.07), rgba(0, 0, 0, 0));
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 2rem 2.5rem;
    margin-bottom: 1.5rem;
}
.page-kicker {
    color: var(--accent);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}
.page-hero h1 {
    font-size: 2.6rem;
    font-weight: 800;
    letter-spacing: -1px;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}
.page-subtitle {
    color: var(--accent);
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1rem;
}
.page-intro {
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1.75;
    /* Full width of the hero card, by preference — the intro reads as part of
       the box rather than as a column inset within it. */
    margin-bottom: 1.35rem;
}
.page-intro strong { color: var(--text-primary); }

/* ── Progress + standing facts ────────────────────────────────────────── */
.page-stats { max-width: 640px; margin-bottom: 1.35rem; }
.page-stats-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}
.page-stat-count { flex: 0 0 auto; white-space: nowrap; }
.page-stat-count strong { color: var(--accent); font-size: 1rem; }
.page-stat-pct { flex: 0 0 auto; color: var(--accent); font-weight: 700; }
.page-bar {
    flex: 1 1 auto;
    height: 8px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
}
.page-bar-fill {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--accent-dim), var(--accent));
}
.page-meta-line {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1.1rem;
    margin: 0.7rem 0 0;
    font-size: 0.82rem;
    color: var(--text-muted);
}
.page-meta-line i { color: var(--accent); opacity: 0.8; margin-right: 0.3rem; }
.page-meta-line .is-emphasis { color: var(--text-primary); font-weight: 600; }
/* When the meta line opens the stats block (no progress bar above it) it carries the
   block's own top edge, so it must not add the gap meant to sit under the bar. */
.page-meta-line--lead { margin-top: 0; }

/* Staff-only blocks inside the hero: same layout, marked as not-public. */
.page-stats-private { margin-top: 0.9rem; }
.page-stat-private-tag {
    flex: 0 0 auto;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    opacity: 0.75;
}

/* Small status dot used in meta lines (tools study status, and anything else
   that needs a colour key rather than an icon). */
.page-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 0.35rem;
    vertical-align: baseline;
}

/* ── Call-to-action row ───────────────────────────────────────────────── */
.page-cta { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0.5rem; }
.page-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.9rem;
    border-radius: 7px;
    border: 1px solid rgba(0, 255, 157, 0.3);
    background: rgba(0, 255, 157, 0.07);
    color: var(--accent);
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.35;
    text-decoration: none;
    transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.page-btn:hover {
    background: rgba(0, 255, 157, 0.18);
    border-color: var(--accent);
    color: var(--accent);
    transform: translateY(-1px);
}
.page-btn-primary { background: var(--accent); border-color: var(--accent); color: #0d1117; }
.page-btn-primary:hover { background: var(--accent-dim); border-color: var(--accent-dim); color: #0d1117; }
/* Two-line variant: a label over the thing it leads to. Its height sets the height of
   the whole row (the row stretches), so its line-heights are deliberately tight. */
.page-btn-stacked {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    padding: 0.25rem 0.9rem;
    max-width: 22rem;
}
.page-btn-label {
    font-size: 0.58rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.75;
}
.page-btn-sub {
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
/* Visibly secondary to the primary action, without disappearing. */
.page-btn-quiet {
    background: transparent;
    border-color: var(--border);
    color: var(--text-muted);
    font-weight: 500;
}
.page-btn-quiet:hover { background: rgba(255, 255, 255, 0.04); color: var(--text-primary); }
.page-btn-icon { padding: 0.4rem 0.7rem; }

/* ── Disclosure ("what every post contains" / "why this matrix exists") ── */
.page-disclosure {
    margin-top: 1.5rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.02);
}
.page-disclosure > summary {
    cursor: pointer;
    padding: 0.6rem 1rem;
    color: var(--accent);
    font-size: 0.9rem;
    font-weight: 600;
    list-style: none;
    user-select: none;
}
.page-disclosure > summary::-webkit-details-marker { display: none; }
.page-disclosure > summary::before { content: "\25b8 "; }
.page-disclosure[open] > summary::before { content: "\25be "; }
.page-disclosure > summary:hover { color: var(--text-primary); }
.page-disclosure-body {
    padding: 0.25rem 1.25rem 1rem;
    color: var(--text-muted);
    font-size: 0.92rem;
    line-height: 1.6;
}
.page-disclosure-body p { margin: 0 0 0.6rem; }
.page-disclosure-body p:last-child { margin-bottom: 0; }
.page-disclosure-body ol { margin: 0.75rem 0 0.75rem 1.25rem; }
.page-disclosure-body li { margin-bottom: 0.45rem; }
.page-disclosure-body strong { color: var(--text-primary); }
.page-disclosure-note { font-style: italic; margin-top: 0.75rem; }

/* ── Sticky toolbar ───────────────────────────────────────────────────── */
.page-toolbar {
    position: sticky;
    top: var(--sticky-top);
    z-index: 20;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 0.85rem 1rem;
    margin-bottom: 1.25rem;
}
.page-toolbar-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
}
.page-toolbar-row + .page-toolbar-row { margin-top: 0.6rem; }
.page-toolbar input[type="search"],
.page-toolbar select {
    background: var(--bg-primary);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.45rem 0.7rem;
    font-size: 0.85rem;
}
.page-toolbar input[type="search"] { flex: 1 1 16rem; min-width: 0; }
.page-toolbar input[type="search"]:focus,
.page-toolbar select:focus { outline: 1px solid var(--accent); border-color: var(--accent); }
.page-count { color: var(--text-muted); font-size: 0.85rem; white-space: nowrap; margin-left: auto; }
.page-count strong { color: var(--accent); }
.page-reset {
    background: none;
    border: 1px solid var(--border);
    color: var(--text-muted);
    border-radius: 6px;
    padding: 0.4rem 0.8rem;
    font-size: 0.82rem;
    cursor: pointer;
    text-decoration: none;
}
.page-reset:hover { color: var(--text-primary); border-color: var(--accent); }

/* Toggle button (compact / focus): same footprint as .page-reset. */
.page-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: none;
    border: 1px solid var(--border);
    color: var(--text-muted);
    border-radius: 6px;
    padding: 0.4rem 0.7rem;
    font-size: 0.82rem;
    cursor: pointer;
}
.page-toggle-btn:hover { color: var(--text-primary); border-color: var(--accent); }
.page-toggle-btn[aria-pressed="true"] {
    color: var(--accent);
    border-color: rgba(0, 255, 157, 0.45);
    background: rgba(0, 255, 157, 0.08);
}

/* ── Pill navigation (jump to a series / filter by stage) ─────────────── */
.page-pills { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.page-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: var(--bg-primary);
    color: var(--text-muted);
    font-size: 0.78rem;
    text-decoration: none;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.page-pill:hover { color: var(--accent); border-color: rgba(0, 255, 157, 0.45); }
.page-pill.active {
    color: #0d1117;
    background: var(--accent);
    border-color: var(--accent);
    font-weight: 700;
}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 700px) {
    .page-hero { padding: 1.5rem; }
    .page-hero h1 { font-size: 2rem; }
    /* The bar has nowhere to shrink to beside the count, so stack it. */
    .page-stats-head { flex-wrap: wrap; }
    .page-bar { order: 3; flex-basis: 100%; }
    .page-stat-pct { margin-left: auto; }
    .page-cta .page-btn { flex: 1 1 auto; justify-content: center; }
    .page-btn-stacked { max-width: 100%; align-items: flex-start; }
    .page-toolbar { position: static; }
    .page-count { margin-left: 0; }
}