:root {
    --ink: #2b3631;
    --paper: #f6f4ef;
    --card: #ffffff;
    --line: #e5e0d6;
    --green: #3d7a5e;
    --red: #b54b4b;
    --muted: #77716a;
    --horse: #8a6230;
    --amber: #b98a32;
    --line-strong: #cfc8bb;
    --green-dark: #2f634b;
    --green-soft: #e7f1ec;
    --r: 10px;
    --r-sm: 7px;
    --shadow: 0 1px 2px rgba(43, 54, 49, 0.05), 0 6px 18px rgba(43, 54, 49, 0.07);
    --shadow-lift: 0 2px 4px rgba(43, 54, 49, 0.06), 0 12px 28px rgba(43, 54, 49, 0.12);
    /* Theme colours beyond the basics (dark versions below). */
    --on-accent: #ffffff;    /* text on green / red / amber fills */
    --tint: #fffaf0;         /* warm panel tint, row hover */
    --hover: #fff6d8;        /* button and tile hover */
    --chip: #efebe3;
    --chip-2: #ece3cf;       /* code, progress-bar track */
    --line-soft: #f1ebe0;
    --ink-2: #3b3630;        /* secondary text */
    --faint: #b9b0a2;        /* empty slots, idle dots */
    --green-soft-2: #cfe8d8;
    --green-line: #bfe0cc;
    --amber-soft: #fbeecb;
    --amber-line: #f0dca0;
    --amber-ink: #5c4210;
    --red-soft: #f5e6e4;
    --red-line: #e6c6c2;
    --red-dark: #7f2222;
}

/* Dark theme: the account's Theme setting (theme.js sets data-theme on <html>). */
:root[data-theme="dark"] {
    color-scheme: dark;
    --ink: #e4e8e3;
    --paper: #151a17;
    --card: #1e2521;
    --line: #313a35;
    --line-strong: #4a554f;
    --green: #6cbf97;
    --green-dark: #93d6b4;
    --green-soft: #1d3529;
    --red: #e58080;
    --muted: #9da59f;
    --horse: #d3a46e;
    --amber: #e2b65c;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 18px rgba(0, 0, 0, 0.25);
    --shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.35), 0 12px 28px rgba(0, 0, 0, 0.4);
    --on-accent: #0f1f17;
    --tint: #1a201d;
    --hover: #2a3229;
    --chip: #29302c;
    --chip-2: #2d3530;
    --line-soft: #29302c;
    --ink-2: #cdd3cc;
    --faint: #5b6660;
    --green-soft-2: #26493a;
    --green-line: #2e5a45;
    --amber-soft: #382f1d;
    --amber-line: #5d4b25;
    --amber-ink: #f0d38e;
    --red-soft: #3a2323;
    --red-line: #5c3232;
    --red-dark: #b84444;
}
@media (prefers-color-scheme: dark) {
    :root[data-theme="auto"] {
        color-scheme: dark;
        --ink: #e4e8e3;
        --paper: #151a17;
        --card: #1e2521;
        --line: #313a35;
        --line-strong: #4a554f;
        --green: #6cbf97;
        --green-dark: #93d6b4;
        --green-soft: #1d3529;
        --red: #e58080;
        --muted: #9da59f;
        --horse: #d3a46e;
        --amber: #e2b65c;
        --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 18px rgba(0, 0, 0, 0.25);
        --shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.35), 0 12px 28px rgba(0, 0, 0, 0.4);
        --on-accent: #0f1f17;
        --tint: #1a201d;
        --hover: #2a3229;
        --chip: #29302c;
        --chip-2: #2d3530;
        --line-soft: #29302c;
        --ink-2: #cdd3cc;
        --faint: #5b6660;
        --green-soft-2: #26493a;
        --green-line: #2e5a45;
        --amber-soft: #382f1d;
        --amber-line: #5d4b25;
        --amber-ink: #f0d38e;
        --red-soft: #3a2323;
        --red-line: #5c3232;
        --red-dark: #b84444;
    }
}

* { box-sizing: border-box; }

/* Elements toggled via the "hidden" attribute (player-card, the finder/elig/
   trend/recent sections, etc.) must actually disappear even when a class
   like .player-card also sets its own `display`, which otherwise silently
   wins over the browser's default [hidden] rule and leaves stale content
   showing (e.g. the player card lingering below the finder after "Back to
   list"). */
[hidden] { display: none !important; }
/* Filters / platforms a member switched off on their settings page. */
.member-off { display: none !important; }

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: "Source Sans 3", system-ui, sans-serif;
}

a { color: var(--green); }

.top {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    align-items: flex-end;
    padding: 1.4rem 1.4rem 0.8rem;
    border-bottom: 1px solid var(--line);
}

h1 {
    font-family: "Outfit", system-ui, sans-serif;
    font-size: clamp(1.7rem, 3.6vw, 2.6rem);
    margin: 0;
    letter-spacing: -0.005em;
}

.kicker {
    margin: 0;
    font-family: "DM Mono", ui-monospace, monospace;
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--green-dark);
}
.kicker a { color: var(--green-dark); font-weight: 600; text-underline-offset: 0.2em; }

.lede {
    max-width: 40rem;
    margin: 0.5rem 0 0;
    color: var(--muted);
    font-size: 0.95rem;
}

.tools { flex-shrink: 0; }

.search-wrap { position: relative; width: 20rem; max-width: 100%; }

.search-wrap input {
    width: 100%;
    border: 1px solid var(--line-strong);
    background: var(--card);
    padding: 0.6rem 0.8rem;
    font: inherit;
    font-size: 1rem;
    border-radius: var(--r-sm);
}

.search-wrap input:focus { outline: 2px solid var(--green); outline-offset: 1px; }

.suggestions {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    background: var(--card);
    border: 1px solid var(--line-strong);
    max-height: 18rem;
    overflow-y: auto;
    z-index: 20;
    border-radius: var(--r);
}

.suggestions button {
    display: flex;
    justify-content: space-between;
    gap: 0.6rem;
    width: 100%;
    text-align: left;
    padding: 0.5rem 0.8rem;
    border: none;
    border-bottom: 1px solid var(--line);
    background: none;
    font: inherit;
    cursor: pointer;
    color: var(--ink);
}

.suggestions button:last-child { border-bottom: none; }
.suggestions button:hover, .suggestions button.active { background: var(--hover); }
.suggestions .s-name { font-weight: 600; }
.suggestions .s-meta { color: var(--muted); font-family: "DM Mono", ui-monospace, monospace; font-size: 0.78rem; }

main { padding: 1.2rem 1.4rem 3rem; max-width: 62rem; margin: 0 auto; }

.status {
    font-family: "DM Mono", ui-monospace, monospace;
    font-size: 0.85rem;
    color: var(--muted);
    min-height: 1.4rem;
}

.status.err { color: var(--red); }

.player-card {
    display: flex;
    gap: 1.1rem;
    align-items: center;
    background: var(--card);
    border: 1px solid var(--line);
    padding: 1rem 1.2rem;
    margin: 0.6rem 0 1.2rem;
    border-radius: var(--r);
}

.player-card img {
    width: 4.6rem;
    height: 4.6rem;
    object-fit: cover;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 50%;
    flex-shrink: 0;
}

.player-card h2 {
    font-family: "Outfit", system-ui, sans-serif;
    letter-spacing: -0.005em;
    margin: 0 0 0.2rem;
    font-size: 1.5rem;
}

.player-meta {
    font-family: "DM Mono", ui-monospace, monospace;
    font-size: 0.82rem;
    color: var(--muted);
}

.card-stat-bar {
    margin-left: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.35rem;
}

.card-stat-window-tabs button {
    padding: 0.15rem 0.45rem;
    font-size: 0.66rem;
}

.card-stat-line {
    display: flex;
    gap: 0.9rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.card-stat-line.empty {
    font-family: "DM Mono", ui-monospace, monospace;
    font-size: 0.78rem;
    color: var(--muted);
}

.card-stat { text-align: center; }

.card-stat-val {
    display: block;
    font-family: "DM Mono", ui-monospace, monospace;
    font-weight: 600;
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
}

.card-stat-label {
    display: block;
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
}

.panel {
    background: var(--card);
    border: 1px solid var(--line);
    padding: 1rem 1.2rem 1.2rem;
    margin: 0 0 1.2rem;
    border-radius: var(--r);
}

.section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    flex-wrap: wrap;
    margin-bottom: 0.7rem;
}

.section-head h3 {
    margin: 0;
    font-size: 0.86rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--green);
}

.platform-tabs, .window-tabs {
    display: flex;
    gap: 0.3rem;
    flex-wrap: wrap;
}

.platform-tabs button, .window-tabs button {
    font: inherit;
    font-family: "DM Mono", ui-monospace, monospace;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    padding: 0.35rem 0.6rem;
    border: 1px solid var(--line);
    background: var(--card);
    color: var(--muted);
    cursor: pointer;
    border-radius: var(--r-sm);
}

.platform-tabs button.on, .window-tabs button.on {
    border-color: var(--line-strong);
    background: var(--green);
    color: var(--paper);
}

.elig-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr));
    gap: 0.7rem;
}

.elig-card {
    border: 1px solid var(--line);
    padding: 0.7rem 0.8rem;
    background: var(--card);
    border-radius: var(--r);
}

.elig-card .pos {
    font-family: "Outfit", system-ui, sans-serif;
    font-size: 1.15rem;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.elig-card .pill {
    font-family: "DM Mono", ui-monospace, monospace;
    font-size: 0.66rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 0.12rem 0.4rem;
    border-radius: 999px;
    border: 1px solid transparent;
}

.pill.elig { background: var(--green-soft); color: var(--green); border-color: var(--green-line); }
.pill.close { background: var(--amber-soft); color: var(--amber); border-color: var(--amber-line); }
.pill.far { background: var(--red-soft); color: var(--red); border-color: var(--red-line); }
.pill.dflt { background: var(--chip); color: var(--muted); border-color: var(--line); }

.elig-card .bar-track {
    height: 0.45rem;
    background: var(--paper);
    border: 1px solid var(--line);
    margin: 0.5rem 0 0.4rem;
    overflow: hidden;
    border-radius: var(--r);
}

.elig-card .bar-fill { height: 100%; background: var(--green); }
.elig-card .bar-fill.close { background: var(--amber); }

.elig-card .stat-line {
    font-family: "DM Mono", ui-monospace, monospace;
    font-size: 0.76rem;
    color: var(--muted);
    display: flex;
    justify-content: space-between;
}

.elig-card .prior {
    margin-top: 0.4rem;
    font-size: 0.74rem;
    color: var(--muted);
}

.elig-card .prior b { color: var(--ink); }

.elig-card .stat-line.next-season {
    margin-top: 0.4rem;
    padding-top: 0.4rem;
    border-top: 1px dashed var(--line);
}

.footnote {
    margin: 0.8rem 0 0;
    font-size: 0.78rem;
    color: var(--muted);
}

#trend-body .trend-row {
    display: flex;
    gap: 1rem;
    align-items: center;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--line);
    flex-wrap: wrap;
}

#trend-body .trend-row:last-child { border-bottom: none; }

.trend-pos {
    font-family: "Outfit", system-ui, sans-serif;
    font-size: 1.05rem;
    width: 3.2rem;
    flex-shrink: 0;
}

.trend-detail { flex: 1; min-width: 14rem; }

.trend-detail .headline { font-weight: 600; }
.trend-detail .sub { color: var(--muted); font-size: 0.85rem; font-family: "DM Mono", ui-monospace, monospace; }

.sparkline { flex-shrink: 0; }

.stat-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
    gap: 0.7rem;
    margin-bottom: 0.9rem;
}

.stat-tile {
    border: 1px solid var(--line);
    background: var(--card);
    padding: 0.6rem 0.7rem;
    border-radius: var(--r);
}

.stat-tile .num {
    font-family: "DM Mono", ui-monospace, monospace;
    font-size: 1.5rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.stat-tile .label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
}

.small-sample {
    color: var(--amber);
    font-size: 0.78rem;
    margin-top: -0.4rem;
    margin-bottom: 0.8rem;
}

table.game-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

table.game-table th, table.game-table td {
    text-align: left;
    padding: 0.3rem 0.4rem;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}

table.game-table th {
    font-family: "DM Mono", ui-monospace, monospace;
    font-size: 0.68rem;
    letter-spacing: 0.04em;
    color: var(--muted);
    font-weight: 600;
}

table.game-table td.num, table.game-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table-wrap { overflow-x: auto; }

table.game-table th.sortable { cursor: pointer; user-select: none; }
table.game-table th.sortable:hover { color: var(--ink); }
table.game-table th.sortable[aria-sort="ascending"]::after { content: " ↑"; }
table.game-table th.sortable[aria-sort="descending"]::after { content: " ↓"; }

.section-head + .section-head { margin-top: -0.5rem; }
.section-head .footnote { margin: 0; }

.finder-side {
    min-width: 0;
}

.filter-block {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 0.8rem;
}

.pos-filter {
    border: 1px solid var(--line);
    padding: 0.5rem 0.7rem 0.6rem;
    margin: 0;
    flex: 1 1 16rem;
    border-radius: var(--r);
}

.pos-filter legend {
    font-family: "DM Mono", ui-monospace, monospace;
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    padding: 0 0.3rem;
}

.checkbox-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem 0.9rem;
}

.checkbox-row label {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-family: "DM Mono", ui-monospace, monospace;
    font-size: 0.8rem;
    cursor: pointer;
}

.slider-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr));
    gap: 0.7rem 1.2rem;
    margin-bottom: 0.9rem;
}
.slider-field.row-start { grid-column-start: 1; }

.slider-field { display: flex; flex-direction: column; gap: 0.15rem; }

.slider-label {
    display: flex;
    justify-content: space-between;
    font-family: "DM Mono", ui-monospace, monospace;
    font-size: 0.72rem;
    color: var(--muted);
}

.slider-field input[type="range"] {
    width: 100%;
    accent-color: var(--green);
}

.player-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
    gap: 0.7rem;
}

.player-tile {
    border: 1px solid var(--line);
    background: var(--card);
    padding: 0.7rem 0.6rem;
    text-align: center;
    cursor: pointer;
    border-radius: var(--r);
}

.player-tile:hover { border-color: var(--line-strong); background: var(--hover); }

.player-tile img {
    width: 4rem;
    height: 4rem;
    object-fit: cover;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 50%;
}

.player-tile .p-name {
    font-weight: 700;
    font-size: 0.82rem;
    margin-top: 0.5rem;
    line-height: 1.2;
}

.player-tile .p-team {
    color: var(--muted);
    font-family: "DM Mono", ui-monospace, monospace;
    font-size: 0.66rem;
    margin-top: 0.15rem;
}

.player-tile .pos-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem;
    justify-content: center;
    margin-top: 0.5rem;
}

.player-tile .pos-pills .pill { font-size: 0.6rem; }

.site-foot {
    max-width: 62rem;
    margin: 0 auto;
    padding: 1.2rem 1.4rem 3rem;
    color: var(--muted);
    font-size: 0.8rem;
    line-height: 1.5;
}

.site-foot p { margin: 0.3rem 0; }

@media (max-width: 700px) {
    .top { display: block; }
    .search-wrap { width: 100%; margin-top: 0.8rem; }
    .player-card { flex-wrap: wrap; }
    .card-stat-bar { align-items: flex-start; margin-left: 0; }
    .card-stat-window-tabs, .card-stat-line { justify-content: flex-start; }
}

/* Hitters / Pitchers switch -- the page's main choice, so it's two big
   cards above the finder rather than small tabs inside it. The active card
   goes ink-dark with a green offset shadow; the other lifts on hover. */
.finder-view-bar { margin: 0.6rem 0 1.4rem; }

.view-switch {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.view-switch button {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.3rem;
    border: 1px solid var(--line);
    background: var(--card);
    color: var(--ink);
    text-align: left;
    font: inherit;
    cursor: pointer;
    box-shadow: var(--shadow);
    transition: transform 0.14s ease, box-shadow 0.14s ease, background-color 0.14s ease, color 0.14s ease;
    border-radius: var(--r-sm);
}

@media (hover: hover) {
    .view-switch button:hover:not(.on) {
        transform: translateY(-2px);
        box-shadow: var(--shadow-lift);
        background: var(--hover);
    }
}

.view-switch button.on {
    background: var(--green);
    color: var(--paper);
    box-shadow: var(--shadow-lift);
    transform: translateY(-2px);
    cursor: default;
}

.view-switch button:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }

.vs-icon {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 3.6rem;
    height: 3.6rem;
    border-radius: 50%;
    border: 2px solid currentColor;
    color: var(--green);
    background: var(--card);
    transition: inherit;
}
.vs-icon svg { width: 2.1rem; height: 2.1rem; }
.view-switch button.on .vs-icon { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.55); color: var(--on-accent); }

.vs-text { display: grid; gap: 0.15rem; min-width: 0; }

.vs-title {
    font-family: "Outfit", system-ui, sans-serif;
    font-size: 2rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.005em;
}

.vs-sub {
    font-family: "DM Mono", ui-monospace, monospace;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    color: var(--muted);
}
.view-switch button.on .vs-sub { color: var(--on-accent); opacity: 0.75; }

@media (prefers-reduced-motion: reduce) {
    .view-switch button, .view-switch button:hover:not(.on), .view-switch button.on { transition: none; transform: none; }
}

@media (max-width: 700px) {
    .view-switch { gap: 0.7rem; }
    .view-switch button { flex-direction: column; align-items: center; text-align: center; gap: 0.5rem; padding: 0.9rem 0.5rem; }
    .vs-icon { width: 2.8rem; height: 2.8rem; }
    .vs-icon svg { width: 1.6rem; height: 1.6rem; }
    .vs-title { font-size: 1.45rem; }
    .vs-sub { display: none; }
}

/* Account links under the search box (Log in / Create account, or
   Draft board / Log out once signed in -- see members.js). */

.member-bar {
    margin-top: 0.45rem;
    font-size: 0.95rem;
    line-height: 1.6;
    text-align: right;
    color: var(--ink);
}
.member-bar a { margin-left: 0.9rem; color: var(--green-dark); font-weight: 600; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
.member-bar a:hover { text-decoration-thickness: 2px; }
.member-bar .join-link {
    display: inline-block;
    padding: 0.2rem 0.55rem;
    border: 1px solid var(--green);
    background: var(--green);
    color: var(--paper);
    text-decoration: none;
    font-weight: 600;
    border-radius: var(--r-sm);
}
.member-bar .join-link:hover { background: var(--green-dark); border-color: var(--line-strong); }
.member-bar .join-pitch { display: block; margin-top: 0.25rem; font-size: 0.66rem; }
@media (max-width: 700px) { .member-bar { text-align: left; } .member-bar a:first-of-type { margin-left: 0; } }

/* Clear all filters (finder) */
.filter-actions { display: flex; justify-content: flex-end; margin: 0 0 0.5rem; }
.clear-filters {
    font: inherit;
    font-family: "DM Mono", ui-monospace, monospace;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    padding: 0.35rem 0.6rem;
    border: 1px solid var(--line-strong);
    background: var(--card);
    color: var(--ink);
    cursor: pointer;
    border-radius: var(--r);
}
.clear-filters:hover { background: var(--green-dark); color: var(--paper); }

/* ---------- position choices: "All hitters" + CI / MI ---------- */
.checkbox-row label.pos-all { font-weight: 600; }

/* ---------- installable app (pwa.js) ---------- */
.pwa-banner {
    position: fixed;
    left: 50%;
    bottom: calc(0.8rem + env(safe-area-inset-bottom));
    transform: translateX(-50%);
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: min(28rem, calc(100% - 1.6rem));
    padding: 0.6rem 0.6rem 0.6rem 0.9rem;
    background: var(--green);
    color: var(--paper);
    box-shadow: var(--shadow-lift);
    font-size: 0.9rem;
    border-radius: var(--r);
}
.pwa-banner span { flex: 1; }
.pwa-banner button { font: inherit; cursor: pointer; border: none; }
.pwa-go {
    font-family: "DM Mono", ui-monospace, monospace !important;
    font-size: 0.78rem !important;
    font-weight: 600;
    padding: 0.45rem 0.7rem;
    background: var(--green);
    color: var(--paper);
    white-space: nowrap;
    border-radius: var(--r-sm);
}
.pwa-x { background: none; color: var(--paper); font-size: 1.3rem !important; line-height: 1; padding: 0.2rem 0.4rem; opacity: 0.8; }

/* Installed app: respect the notch / home indicator. */
.is-app body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
.is-app .top { padding-top: max(1rem, env(safe-area-inset-top)); }
.is-app .site-foot { padding-bottom: calc(2rem + env(safe-area-inset-bottom)); }

/* ---------- phones ---------- */
@media (max-width: 700px) {
    html { -webkit-text-size-adjust: 100%; }
    .top { padding: 1rem 0.9rem 0.7rem; }
    .lede { font-size: 0.86rem; line-height: 1.4; }
    main { padding: 0.8rem 0.7rem 2.5rem; }
    .panel { padding: 0.8rem 0.75rem 1rem; margin-bottom: 0.9rem; }
    .site-foot { padding: 1rem 0.9rem 2.5rem; }

    /* 16px inputs stop iOS from zooming the page on focus. */
    input[type="search"], input[type="text"], input[type="number"], input[type="email"], input[type="password"], select { font-size: 16px !important; }

    /* Bigger tap targets on tab rows. */
    .platform-tabs button, .window-tabs button { padding: 0.5rem 0.65rem; min-height: 2.2rem; }
    .section-head { gap: 0.5rem; }

    /* Position boxes become tappable chips. */
    .pos-filter { padding: 0.45rem 0.55rem 0.6rem; }
    .checkbox-row { gap: 0.35rem; }
    .checkbox-row label {
        padding: 0.4rem 0.55rem;
        border: 1px solid var(--line);
        background: var(--card);
        min-height: 2.2rem;
        font-size: 0.82rem;
    border-radius: var(--r);
}
    .checkbox-row label:has(input:checked) { border-color: var(--green); background: var(--green-soft); }
    .checkbox-row input { margin: 0; }

    /* Sliders two across instead of a tall single column. */
    .slider-grid { grid-template-columns: 1fr 1fr; gap: 0.7rem 0.9rem; }
    .slider-label { font-size: 0.64rem; gap: 0.3rem; }
    .slider-label span:first-child { min-width: 0; }
    .slider-value { white-space: nowrap; }
    .slider-field.row-start { grid-column-start: auto; }

    .player-grid { grid-template-columns: repeat(auto-fill, minmax(6.6rem, 1fr)); gap: 0.45rem; }
    .player-tile { padding: 0.55rem 0.35rem; }
    .player-tile img { width: 3.2rem; height: 3.2rem; }
    .player-tile .p-name { font-size: 0.78rem; }

    /* Player card: stats in an even grid. */
    .player-card { padding: 0.8rem; gap: 0.7rem; }
    .player-card img { width: 3.6rem; height: 3.6rem; }
    .player-card h2 { font-size: 1.3rem; }
    .card-stat-bar { width: 100%; }
    .card-stat-line { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.55rem 0.3rem; width: 100%; }
    .card-stat-line.empty { display: block; }
    .elig-grid { grid-template-columns: 1fr 1fr; gap: 0.5rem; }
    .elig-card { padding: 0.55rem 0.6rem; }
    .elig-card .pos { font-size: 1rem; flex-wrap: wrap; gap: 0.2rem; }
    .stat-tiles { grid-template-columns: 1fr 1fr; gap: 0.5rem; }
    .stat-tile .num { font-size: 1.3rem; }
    .season-usage { grid-template-columns: 1fr; }
}
@media (max-width: 380px) {
    .elig-grid { grid-template-columns: 1fr; }
    .card-stat-line { grid-template-columns: repeat(4, 1fr); }
}

/* Out-of-season usage: positions + lineup slots side by side. */
.season-usage { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; }

/* "Such-and-such league drafting now" button at the top of the member nav */
.member-bar a.nav-live {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: fit-content;
    max-width: 100%;
    margin: 0 0 0.5rem auto;
    padding: 0.55rem 0.8rem;
    background: var(--red);
    color: var(--on-accent);
    text-decoration: none;
    font-family: "Source Sans 3", system-ui, sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    box-shadow: var(--shadow-lift);
    border-radius: var(--r-sm);
}
.member-bar a.nav-live:hover { background: var(--red-dark); }
.member-bar a.nav-live b { background: var(--on-accent); color: var(--red); padding: 0.1rem 0.5rem; font-size: 0.8rem; letter-spacing: 0.05em; text-transform: uppercase; }
.nav-live-dot { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--on-accent); flex: none; animation: nav-live-pulse 1.4s ease-in-out infinite; }
@keyframes nav-live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .nav-live-dot { animation: none; } }
@media (max-width: 700px) { .member-bar a.nav-live { margin: 0 0 0.5rem; width: 100%; } }

/* Admin: "View as user" (nav.js) */
.nav-viewas { position: relative; display: flex; justify-content: flex-end; align-items: center; gap: 0.5rem; margin: 0 0 0.45rem; }
.nav-viewas > button, .nav-viewas.on button {
    font: inherit; font-family: "DM Mono", ui-monospace, monospace; font-size: 0.72rem; font-weight: 600;
    padding: 0.35rem 0.65rem; border: 1px solid var(--line-strong); background: var(--green); color: var(--paper); cursor: pointer;
    border-radius: var(--r-sm);
}
.nav-viewas.on { flex-wrap: wrap; padding: 0.45rem 0.6rem; background: var(--amber-soft); border: 1px solid var(--amber-line); color: var(--amber-ink); font-weight: 600; text-align: left; border-radius: var(--r); }
.nav-viewas.on button { background: var(--amber-ink); border-color: var(--amber-ink); }
.nav-viewas-panel { position: absolute; right: 0; top: calc(100% + 4px); z-index: 50; width: min(22rem, 90vw); background: var(--card); border: 1px solid var(--line-strong); box-shadow: var(--shadow-lift); padding: 0.5rem; text-align: left; border-radius: var(--r); }
.nav-viewas-panel input { width: 100%; font: inherit; font-size: 0.9rem; padding: 0.4rem 0.5rem; border: 1px solid var(--line); margin-bottom: 0.35rem; border-radius: var(--r-sm); }
.nav-viewas-list { display: grid; max-height: 18rem; overflow-y: auto; font-size: 0.8rem; color: var(--muted); }
.nav-viewas-list button { font: inherit; text-align: left; padding: 0.4rem 0.4rem; border: none; border-bottom: 1px solid var(--line); background: none; color: var(--ink); cursor: pointer; }
.nav-viewas-list button:hover { background: var(--hover); }
@media (max-width: 700px) { .nav-viewas { justify-content: flex-start; } .nav-viewas-panel { left: 0; right: auto; } }

/* Embed mode (index.html?embed=1, set by theme.js): just the player profile,
   for the draft board's profile modal. "+ Draft board" is hidden too: the
   board behind the modal would overwrite that change on its next save. */
html.embed header.top,
html.embed #finder-view-bar,
html.embed #finder-section,
html.embed #back-to-list,
html.embed footer.site-foot,
html.embed .card-board-btn { display: none !important; }
html.embed main#app { padding-top: 0.8rem; }

/* Player notes (player-notes.js, members): role, outlooks, every MLB season */
.notes-panel { display: grid; gap: 1rem; }
.notes-panel .section-head { margin-bottom: -0.3rem; }
.notes-role { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 1rem; margin: 0; font-size: 0.92rem; }
.notes-role dt { font-family: "DM Mono", ui-monospace, monospace; font-size: 0.7rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); padding-top: 0.15rem; }
.notes-role dd { margin: 0; }
.notes-moves { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.2rem; }
.notes-date { font-family: "DM Mono", ui-monospace, monospace; font-size: 0.75rem; color: var(--muted); }
.notes-text { display: grid; gap: 0.9rem; }
.notes-quote { border-left: 3px solid var(--green-line); padding-left: 0.8rem; }
.notes-quote p { margin: 0.25rem 0 0.3rem; line-height: 1.5; }
.notes-label { font-family: "DM Mono", ui-monospace, monospace; font-size: 0.7rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--green); font-weight: 600; }
.notes-stale { text-transform: none; letter-spacing: 0; color: var(--muted); font-weight: 400; }
.notes-src { font-size: 0.8rem; color: var(--green); }
.notes-career { display: grid; gap: 0.3rem; }
.notes-table .notes-total td { font-weight: 700; border-top: 2px solid var(--line-strong); }
@media (max-width: 700px) {
    .notes-role { grid-template-columns: 1fr; gap: 0.1rem; }
    .notes-role dd { margin-bottom: 0.4rem; }
}
.notes-split-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; }
.notes-splits { display: grid; gap: 0.4rem; }
.notes-sub { font-size: 0.78rem; font-weight: 600; color: var(--muted); margin-top: 0.2rem; }