/* ============================================================
   Football Squad Manager — pitch-side mobile UI
   ============================================================ */

:root {
    /* Type */
    --font-ui: 'Manrope', system-ui, -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

    /* MPB brand palette */
    --mpb-blue:        #0b002b;
    --mpb-blue-50:     #858095;
    --mpb-pink:        #ff18bd;
    --mpb-pink-50:     #ff8bde;
    --mpb-tangerine:   #ff6a00;
    --mpb-tangerine-50:#ffb580;
    --mpb-emerald:     #04a777;
    --mpb-emerald-50:  #81d3bb;
    --mpb-glacier:     #73e6e6;
    --mpb-glacier-50:  #b9f3f2;
    --mpb-lemon:       #ffe419;
    --mpb-lemon-50:    #fff28d;

    /* Base palette — Midnight Blue ground */
    --bg:           var(--mpb-blue);
    --bg-2:         #14063f;
    --surface:      #1c0d4a;
    --surface-2:    #261556;
    --line:         #36206b;
    --line-soft:    #2a1759;

    --text:         #f4f0ff;
    --text-2:       #b8b0d6;
    --text-3:       #6b628f;

    /* Pitch — unchanged green */
    --pitch:        oklch(45% 0.10 150);
    --pitch-deep:   oklch(38% 0.09 150);
    --pitch-line:   oklch(96% 0.005 150 / 0.22);

    /* Accent (Emerald default, for "go" actions) */
    --accent:       var(--mpb-emerald);
    --accent-ink:   #ffffff;

    /* Status — Yellow/Red cards stay broadly the same */
    --warn:         var(--mpb-tangerine);
    --warn-ink:     #1a0a00;
    --danger:       #e74c3c;
    --danger-ink:   #ffffff;
    --inj:          var(--mpb-glacier);
    --inj-ink:      #032626;

    /* Density */
    --pad-x: 16px;
    --gap: 10px;
    --radius: 12px;
    --radius-sm: 8px;
    --tap: 44px;

    /* Layout */
    --max-w: 520px;
}

[data-theme="contrast"] {
    --bg:          #000;
    --bg-2:        #0a0a0a;
    --surface:     #141414;
    --surface-2:   #1c1c1c;
    --line:        #333;
    --line-soft:   #222;
    --text:        #fff;
    --text-2:      #d4d4d4;
    --text-3:      #a3a3a3;
    --pitch:       oklch(50% 0.14 150);
    --pitch-deep:  oklch(42% 0.13 150);
    --pitch-line:  rgba(255,255,255,0.45);
    --accent:      oklch(85% 0.20 145);
}

[data-theme="light"] {
    --bg:          oklch(97% 0.005 150);
    --bg-2:        oklch(94% 0.006 150);
    --surface:     #ffffff;
    --surface-2:   oklch(96% 0.005 150);
    --line:        oklch(86% 0.008 150);
    --line-soft:   oklch(90% 0.006 150);
    --text:        oklch(18% 0.010 150);
    --text-2:      oklch(38% 0.012 150);
    --text-3:      oklch(55% 0.012 150);
    --pitch:       oklch(60% 0.13 150);
    --pitch-deep:  oklch(52% 0.12 150);
    --pitch-line:  rgba(255,255,255,0.55);
    --accent:      oklch(55% 0.15 145);
    --accent-ink:  #fff;
}

[data-accent="amber"]  { --accent: oklch(78% 0.16 75);  --accent-ink: oklch(20% 0.06 75); }
[data-accent="blue"]   { --accent: oklch(72% 0.16 240); --accent-ink: oklch(20% 0.06 240); }
[data-accent="violet"] { --accent: oklch(72% 0.16 295); --accent-ink: oklch(20% 0.06 295); }

[data-density="cozy"] {
    --pad-x: 18px;
    --gap: 14px;
    --tap: 48px;
}

* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color: transparent; }

html, body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-ui);
    font-size: 16px;
    line-height: 1.35;
    -webkit-font-smoothing: antialiased;
    overscroll-behavior-y: contain;
}

body {
    min-height: 100vh;
    padding-bottom: 32px;
}

.app {
    max-width: var(--max-w);
    margin: 0 auto;
    background: var(--bg);
    min-height: 100vh;
    position: relative;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
    color: inherit;
    touch-action: manipulation;
}

/* ============================================================
   TOP BAR — clock, score, half
   ============================================================ */
.topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--bg);
    border-bottom: 1px solid var(--line-soft);
    padding: 10px var(--pad-x) 12px;
    padding-top: calc(10px + env(safe-area-inset-top));
}

.tb-row {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
}

.tb-half {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--line);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-2);
    letter-spacing: 0.04em;
}
.tb-half .dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--text-3);
}
.tb-half.live .dot {
    background: var(--accent);
    box-shadow: 0 0 0 0 var(--accent);
    animation: pulse 1.6s ease-out infinite;
}
@keyframes pulse {
    0%   { box-shadow: 0 0 0 0 color-mix(in oklch, var(--accent) 70%, transparent); }
    100% { box-shadow: 0 0 0 8px color-mix(in oklch, var(--accent) 0%, transparent); }
}

.tb-clock .ms { color: var(--text-3); font-size: 0.55em; }

.tb-controls {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.tb-btn {
    flex: 1;
    height: var(--tap);
    border-radius: var(--radius-sm);
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--text);
    font-weight: 600;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: transform 0.05s ease, background 0.15s ease;
}
.tb-btn:active { transform: scale(0.97); }
.tb-btn.primary.tone-go    { background: var(--accent); color: var(--accent-ink); }
.tb-btn.primary.tone-pause { background: var(--warn);   color: var(--warn-ink); }
.tb-btn.primary.tone-stop  { background: var(--danger); color: var(--danger-ink); }
.tb-btn.ft-badge {
    background: var(--surface-2);
    color: var(--text-2);
    font-weight: 800;
    letter-spacing: 0.16em;
    pointer-events: none;
    flex: 1.6;
}

/* Phase chip variants */
.tb-half.pre  { color: var(--text-3); }
.tb-half.ht   { background: var(--warn);  color: var(--warn-ink);  border-color: transparent; }
.tb-half.ft   { background: var(--surface-2); color: var(--text-2); border-color: var(--line); }
.tb-half.ht .dot, .tb-half.ft .dot { background: currentColor; opacity: 0.6; }

.tb-btn.primary {
    flex: 1.6;
    background: var(--accent);
    color: var(--accent-ink);
    border-color: transparent;
}

.score-num {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 24px;
    line-height: 1;
    min-width: 26px;
    text-align: center;
    padding: 6px 6px;
    border-radius: 6px;
    color: var(--text);
}
.score-num:active { background: var(--surface); }

/* goal badge next to player name */
.goal-badge {
    display: inline-block;
    margin-left: 4px;
    font-size: 0.85em;
    vertical-align: baseline;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.3));
}
.bench-name .goal-badge { font-size: 14px; }

/* sheet section caption */
.sheet-section-label {
    font-size: 11px;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 6px 4px 8px;
    font-weight: 700;
}
.tb-btn .ic { width: 14px; height: 14px; display: inline-block; }

/* Score row */
.score-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: stretch;
    gap: 8px;
    margin-top: 12px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
}
.team {
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.team.us .crest { background: var(--accent); color: var(--accent-ink); }
.team.them .crest { background: var(--surface-2); color: var(--text); }
.team.them { justify-content: flex-end; flex-direction: row-reverse; }
.crest {
    width: 28px; height: 28px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 12px;
    border: 1px solid var(--line);
    flex-shrink: 0;
}
.crest-img {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    padding: 0;
}
.crest-img img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.crest-img span {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%;
}
.team-name {
    font-weight: 600; font-size: 13px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    flex: 1;
    min-width: 0;
}
.team.us .team-name {
    color: var(--mpb-pink);
    font-weight: 800;
    letter-spacing: 0.01em;
}
.team.them .team-name { text-align: right; }
.score-box {
    display: flex; align-items: center;
    background: var(--bg);
    padding: 4px 6px;
    gap: 4px;
}
.score-sep { color: var(--text-3); font-weight: 600; }

/* ============================================================
   STATS RAIL
   ============================================================ */
.stats {
    display: flex;
    gap: 0;
    margin: 10px var(--pad-x) 0;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
}
.stat {
    flex: 1;
    padding: 8px 4px;
    text-align: center;
    border-right: 1px solid var(--line-soft);
}
.stat:last-child { border-right: none; }
.stat .v {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 16px;
    line-height: 1.1;
    color: var(--text);
}
.stat .v.accent { color: var(--accent); }
.stat .l {
    font-size: 10px;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 2px;
}

/* ============================================================
   SECTION / FORMATION
   ============================================================ */
.section {
    margin: 18px var(--pad-x) 0;
}
.section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 10px;
}
.section-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.12em;
}
.section-meta {
    font-size: 12px;
    color: var(--text-2);
    font-weight: 500;
}

.formation-strip {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 4px;
    margin: 0 calc(-1 * var(--pad-x)) 10px;
    padding-left: var(--pad-x);
    padding-right: var(--pad-x);
    scrollbar-width: none;
}
.formation-strip::-webkit-scrollbar { display: none; }
.form-chip {
    flex-shrink: 0;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--text-2);
    font-size: 13px;
    font-weight: 600;
    font-family: var(--font-mono);
    letter-spacing: 0.02em;
}
.form-chip.active {
    background: var(--accent);
    color: var(--accent-ink);
    border-color: transparent;
}

/* ============================================================
   PITCH
   ============================================================ */
.pitch {
    position: relative;
    background:
        radial-gradient(ellipse at 50% -10%, color-mix(in oklch, var(--pitch) 90%, white 5%) 0%, var(--pitch) 50%, var(--pitch-deep) 100%);
    border: 1.5px solid var(--pitch-line);
    border-radius: var(--radius);
    padding: 18px 8px;
    min-height: 480px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    gap: 6px;
    overflow: hidden;
    /* faint stripes */
    background-image:
        repeating-linear-gradient(0deg,
            transparent 0,
            transparent 40px,
            color-mix(in oklch, var(--pitch) 92%, black 8%) 40px,
            color-mix(in oklch, var(--pitch) 92%, black 8%) 80px),
        radial-gradient(ellipse at 50% -10%, color-mix(in oklch, var(--pitch) 90%, white 5%) 0%, var(--pitch) 50%, var(--pitch-deep) 100%);
}

/* pitch markings — drawn with pseudo-elements */
.pitch::before,
.pitch::after { content: ''; position: absolute; pointer-events: none; }
.pitch::before {
    /* halfway line */
    left: 4%; right: 4%; top: 50%;
    border-top: 1.5px solid var(--pitch-line);
}
.pitch::after {
    /* center circle */
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: 90px; height: 90px;
    border-radius: 50%;
    border: 1.5px solid var(--pitch-line);
}
.pitch-box-top, .pitch-box-bot {
    position: absolute; left: 50%; transform: translateX(-50%);
    width: 60%; max-width: 240px; height: 60px;
    border: 1.5px solid var(--pitch-line);
    pointer-events: none;
}
.pitch-box-top { top: 0; border-top: none; border-radius: 0 0 8px 8px; }
.pitch-box-bot { bottom: 0; border-bottom: none; border-radius: 8px 8px 0 0; }

.pitch-row {
    position: relative;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    gap: 4px;
    z-index: 2;
}

/* Player chip on pitch */
.slot {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.slot-tap {
    width: 100%;
    max-width: 84px;
    min-height: 68px;
    padding: 6px 4px 7px;
    border-radius: 10px;
    background: color-mix(in oklch, var(--bg) 70%, transparent);
    backdrop-filter: blur(8px);
    border: 1px solid color-mix(in oklch, var(--text) 12%, transparent);
    text-align: center;
    transition: transform 0.08s ease;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
}
.slot-tap:active { transform: scale(0.95); }
.slot-tap.empty {
    background: color-mix(in oklch, var(--text) 8%, transparent);
    border: 1.5px dashed color-mix(in oklch, var(--text) 28%, transparent);
}
.slot-tap.empty .slot-name {
    color: rgba(255,255,255,0.7);
    font-style: normal;
}
.slot-tap.locked {
    background: color-mix(in oklch, var(--danger) 22%, var(--bg) 60%);
    border: 1.5px dashed color-mix(in oklch, var(--danger) 60%, transparent);
}
.slot-tap.locked .slot-name { color: rgba(255,255,255,0.92); }
.slot-tap.locked .slot-pos { color: rgba(255,255,255,0.7); }

.slot-pos {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: rgba(255,255,255,0.65);
    text-transform: uppercase;
}
.slot-num {
    font-family: var(--font-mono);
    font-size: 10px;
    color: rgba(255,255,255,0.5);
    line-height: 1;
    margin-top: 1px;
}
.slot-name {
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.slot-time {
    font-family: var(--font-mono);
    font-size: 10px;
    line-height: 1;
    margin-top: 3px;
    color: rgba(255,255,255,0.8);
    font-variant-numeric: tabular-nums;
}
.slot-time.warn   { color: var(--warn); }
.slot-time.danger { color: var(--danger); }

.slot-flags {
    display: flex; gap: 2px; justify-content: center;
    margin-top: 3px;
}

/* ============================================================
   BENCH
   ============================================================ */
.bench-filters {
    display: flex;
    gap: 6px;
    margin-bottom: 10px;
}
.filter-chip {
    flex: 1;
    padding: 6px 8px;
    border-radius: 8px;
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--text-2);
    font-size: 12px;
    font-weight: 600;
}
.filter-chip.active {
    background: var(--surface-2);
    color: var(--text);
    border-color: var(--line);
}

.bench-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.bench-card {
    display: grid;
    grid-template-columns: 36px 1fr auto auto;
    align-items: center;
    gap: 10px;
    padding: 8px 10px 8px 8px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    border-left: 3px solid transparent;
    min-height: 52px;
    transition: transform 0.08s ease;
}
.bench-card:active { transform: scale(0.99); }
.bench-card.injured { opacity: 0.55; border-left-color: var(--inj); }
.bench-card.red-out { opacity: 0.5; border-left-color: var(--danger); }
.bench-card.yellow  { border-left-color: var(--warn); }
.bench-card.least   { border-left-color: var(--accent); }

.bench-num {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--bg-2);
    color: var(--text);
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 13px;
    border: 1px solid var(--line);
}
.bench-info {
    min-width: 0;
}
.bench-name {
    font-weight: 600;
    font-size: 14px;
    line-height: 1.2;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bench-meta {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-top: 2px;
}
.pos-tag {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    color: var(--text-3);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.bench-time {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 14px;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    text-align: right;
    min-width: 42px;
}
.bench-time.zero { color: var(--accent); }
.bench-time.low { color: var(--accent); }

.bench-sub-btn {
    height: 36px;
    padding: 0 12px;
    border-radius: 8px;
    background: var(--accent);
    color: var(--accent-ink);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.04em;
}
.bench-sub-btn:disabled,
.bench-card.injured .bench-sub-btn,
.bench-card.red-out .bench-sub-btn {
    background: var(--surface-2);
    color: var(--text-3);
    cursor: not-allowed;
}

/* status flag */
.flag {
    display: inline-flex;
    align-items: center; justify-content: center;
    height: 16px; min-width: 16px; padding: 0 4px;
    border-radius: 3px;
    font-size: 9px; font-weight: 800;
    letter-spacing: 0.05em;
    line-height: 1;
}
.flag.yc  { background: var(--warn); color: var(--warn-ink); }
.flag.rc  { background: var(--danger); color: var(--danger-ink); }
.flag.inj { background: var(--inj); color: var(--inj-ink); }
.flag.goal { background: var(--accent); color: var(--accent-ink); }

/* ============================================================
   POSITION POOL
   ============================================================ */
.pool {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 12px 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.pool-row {
    display: flex;
    gap: 6px;
}
.pool-col {
    flex: 1; min-width: 0;
}
.pool-pos {
    font-size: 9px;
    font-weight: 700;
    color: var(--text-3);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 4px;
}
.pool-name {
    font-size: 10px;
    color: var(--text-2);
    background: var(--bg-2);
    border-radius: 4px;
    padding: 3px 5px;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}
.pool-name.on { color: var(--accent); background: color-mix(in oklch, var(--accent) 20%, transparent); font-weight: 700; }
.pool-name.injured, .pool-name.out { opacity: 0.35; text-decoration: line-through; }

/* ============================================================
   SUB HISTORY
   ============================================================ */
.history {
    display: flex; flex-direction: column; gap: 4px;
}
.history-empty {
    color: var(--text-3);
    font-size: 13px;
    text-align: center;
    padding: 16px;
}
.hist-item {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 10px;
    padding: 8px 10px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    font-size: 13px;
}
.hist-time {
    font-family: var(--font-mono);
    font-weight: 700;
    color: var(--accent);
    font-size: 12px;
}
.hist-text { color: var(--text-2); line-height: 1.3; }
.hist-text b { color: var(--text); font-weight: 600; }
.hist-arrow.on  { color: var(--accent); }
.hist-arrow.off { color: var(--danger); }

/* ============================================================
   BOTTOM SHEET
   ============================================================ */
.sheet-back {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 90;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}
.sheet-back.open {
    opacity: 1;
    pointer-events: auto;
}

.sheet {
    position: fixed;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 100%);
    width: 100%;
    max-width: var(--max-w);
    background: var(--bg-2);
    border-top: 1px solid var(--line);
    border-radius: 18px 18px 0 0;
    z-index: 100;
    transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    padding-bottom: env(safe-area-inset-bottom);
}
.sheet.open {
    transform: translate(-50%, 0%);
}
.sheet-grip {
    width: 38px;
    height: 4px;
    background: var(--line);
    border-radius: 999px;
    margin: 8px auto 4px;
    flex-shrink: 0;
}
.sheet-head {
    padding: 8px 16px 12px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    border-bottom: 1px solid var(--line-soft);
    flex-shrink: 0;
}
.sheet-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--text);
}
.sheet-sub {
    font-size: 12px;
    color: var(--text-3);
}
.sheet-close {
    color: var(--text-2);
    font-size: 14px;
    font-weight: 600;
    padding: 6px 8px;
}

.sheet-body {
    overflow-y: auto;
    padding: 8px 12px 16px;
    -webkit-overflow-scrolling: touch;
}

.sheet-action {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 12px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    margin-bottom: 6px;
    width: 100%;
    text-align: left;
    transition: transform 0.06s ease;
}
.sheet-action:active { transform: scale(0.99); }
.sheet-action.danger { color: var(--danger); }
.sheet-action .ic {
    width: 24px; height: 24px;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700;
}

/* candidate row in sub sheet */
.cand {
    display: grid;
    grid-template-columns: 36px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    margin-bottom: 6px;
    text-align: left;
    width: 100%;
}
.cand.exact { border-color: color-mix(in oklch, var(--accent) 50%, var(--line)); }
.cand:active { transform: scale(0.99); }
.cand-num {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--bg-2);
    border: 1px solid var(--line);
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 13px;
    display: inline-flex; align-items: center; justify-content: center;
}
.cand-info { min-width: 0; }
.cand-name { font-weight: 600; font-size: 14px; color: var(--text); }
.cand-meta { font-size: 11px; color: var(--text-3); margin-top: 2px;
    font-family: var(--font-mono); letter-spacing: 0.04em; }
.cand-time {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 14px;
    color: var(--text);
}
.cand-tag {
    display: inline-block;
    padding: 1px 5px;
    font-size: 9px;
    font-weight: 800;
    border-radius: 3px;
    margin-right: 4px;
    letter-spacing: 0.04em;
}
.cand-tag.exact { background: var(--accent); color: var(--accent-ink); }
.cand-tag.compat { background: var(--surface-2); color: var(--text-2); }
.cand-tag.all { background: var(--bg-2); color: var(--text-3); }
.cand-tag.offpos {
    background: color-mix(in oklch, var(--warn) 75%, var(--bg-2));
    color: var(--warn-ink);
}
.cand.offpos {
    opacity: 0.78;
    border-style: dashed;
}
.cand.offpos:active {
    opacity: 1;
}

/* status toggle buttons inside sheet */
.sheet-status {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin: 12px 0;
}
.status-tile {
    padding: 14px 8px;
    border-radius: var(--radius-sm);
    background: var(--surface);
    border: 1px solid var(--line);
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-2);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.status-tile .badge {
    width: 28px; height: 28px;
    border-radius: 6px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 800;
    background: var(--bg);
}
.status-tile.on.yellow { background: var(--warn); color: var(--warn-ink); border-color: transparent; }
.status-tile.on.yellow .badge { background: rgba(0,0,0,0.18); color: var(--warn-ink); }
.status-tile.on.red    { background: var(--danger); color: var(--danger-ink); border-color: transparent; }
.status-tile.on.red .badge { background: rgba(0,0,0,0.22); color: var(--danger-ink); }
.status-tile.on.inj    { background: var(--inj); color: var(--inj-ink); border-color: transparent; }
.status-tile.on.inj .badge { background: rgba(0,0,0,0.18); color: var(--inj-ink); }

/* ============================================================
   VIEW TABS  (inline, replaces floating FAB so host chrome can't block it)
   ============================================================ */
.view-tabs {
    display: flex;
    gap: 4px;
    margin: 12px var(--pad-x) 0;
    padding: 4px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 999px;
}
.view-tab {
    flex: 1;
    height: 38px;
    border-radius: 999px;
    color: var(--text-2);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.02em;
    transition: background 0.15s ease, color 0.15s ease;
}
.view-tab.active {
    background: var(--accent);
    color: var(--accent-ink);
}

/* Reset button armed state — two-tap confirm replaces window.confirm() */
.tb-btn.armed {
    background: var(--danger);
    color: var(--danger-ink);
    border-color: transparent;
    animation: armedPulse 0.9s ease-in-out infinite;
}
@keyframes armedPulse {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklch, var(--danger) 50%, transparent); }
    50%      { box-shadow: 0 0 0 6px color-mix(in oklch, var(--danger) 0%, transparent); }
}

/* ============================================================
   CLOCK BUTTON / CLOCK EDITOR
   ============================================================ */
.tb-help {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--text-2);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.tb-help:active {
    transform: scale(0.94);
    background: var(--surface-2);
}

.tb-mark {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 48px;
    height: 48px;
    border-radius: 12px;
    overflow: hidden;
    line-height: 0;
    pointer-events: none;
    z-index: 1;
}
.tb-mark img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.tb-clock {
    margin-left: auto;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 36px;
    letter-spacing: -0.02em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    background: none;
    color: var(--text);
    padding: 4px 8px;
    border-radius: 8px;
    border: 1px solid transparent;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.tb-clock:active {
    background: var(--surface);
    border-color: var(--line);
}

.clock-edit { padding: 14px 6px 8px; }
.ce-fields {
    display: flex; align-items: center; justify-content: center;
    gap: 8px;
    margin-bottom: 16px;
}
.ce-field {
    display: flex; flex-direction: column; align-items: center;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 8px 14px;
    flex: 0 0 auto;
}
.ce-field input {
    width: 80px;
    background: transparent;
    border: none;
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 36px;
    font-weight: 700;
    text-align: center;
    -moz-appearance: textfield;
}
.ce-field input::-webkit-outer-spin-button,
.ce-field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ce-field input:focus { outline: 2px solid var(--accent); border-radius: 6px; }
.ce-unit {
    font-size: 11px;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-top: 2px;
}
.ce-colon {
    font-family: var(--font-mono);
    font-size: 32px;
    color: var(--text-3);
    font-weight: 700;
    line-height: 1;
}
.ce-quick {
    display: flex; gap: 6px; justify-content: center;
    margin-bottom: 14px;
}

/* ============================================================
   SQUAD EDITOR
   ============================================================ */
.squad-edit-tools {
    display: flex; gap: 6px;
    margin-bottom: 10px;
}
.squad-edit-list {
    display: flex; flex-direction: column; gap: 8px;
}
.player-edit {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 10px 10px 10px;
}
.pe-row {
    display: grid;
    grid-template-columns: 56px 1fr 36px;
    gap: 8px;
    align-items: center;
}
.pe-num {
    width: 56px;
    height: 40px;
    text-align: center;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--text);
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 16px;
    -moz-appearance: textfield;
}
.pe-num::-webkit-outer-spin-button,
.pe-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pe-num:focus { outline: 2px solid var(--accent); }

.pe-name {
    height: 40px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--text);
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 15px;
    padding: 0 12px;
    min-width: 0;
}
.pe-name:focus { outline: 2px solid var(--accent); }

.pe-del {
    width: 36px;
    height: 40px;
    border-radius: 8px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    color: var(--text-2);
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
}
.pe-del.armed {
    background: var(--danger);
    color: var(--danger-ink);
    border-color: transparent;
}

.pe-positions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 10px;
}
.pos-chip {
    height: 28px;
    padding: 0 9px;
    border-radius: 999px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    color: var(--text-3);
    font-size: 11px;
    font-weight: 700;
    font-family: var(--font-mono);
    letter-spacing: 0.03em;
}
.pos-chip.active {
    background: var(--accent);
    color: var(--accent-ink);
    border-color: transparent;
}
.pos-chip.active[data-pos="ALL"],
.pos-chip[data-pos="ALL"].active {
    /* highlight ALL distinctly */
    background: var(--mpb-pink);
    color: #fff;
}

/* Backup & restore */
.backup-grid {
    display: flex; flex-direction: column; gap: 6px;
    margin: 8px 0 12px;
}
.backup-paste {
    width: 100%;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 1.4;
    padding: 10px;
    resize: vertical;
}
.backup-paste:focus { outline: 2px solid var(--accent); }
.backup-actions {
    display: flex; gap: 6px; align-items: stretch;
    margin-top: 8px;
}
.backup-actions .sheet-action[disabled] {
    opacity: 0.4;
    pointer-events: none;
}
.backup-msg {
    margin-top: 10px;
    padding: 8px 10px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    font-size: 12px;
    color: var(--text-2);
    text-align: center;
}

/* ============================================================
   UTIL
   ============================================================ */
.muted { color: var(--text-3); }
.empty {
    text-align: center;
    color: var(--text-3);
    font-size: 13px;
    padding: 20px;
}

/* Sub-banner: just-subbed indicator on bench/pitch */
.subbed-flash {
    animation: flashy 1.1s ease-out;
}
@keyframes flashy {
    0%   { box-shadow: 0 0 0 0 var(--accent); }
    100% { box-shadow: 0 0 0 24px transparent; }
}

/* ============================================================
   TEAM NAME — blank-state placeholder
   ============================================================ */
.team-name:empty::before,
.team-name.placeholder:empty::before {
    content: attr(data-placeholder);
    color: var(--text-3);
    font-weight: 500;
    font-style: italic;
    opacity: 0.7;
}
.team-name:focus { outline: none; }
.team-name:focus:empty::before { opacity: 0.3; }

/* ============================================================
   SQUAD LIBRARY  (named-squad switcher above the editor)
   ============================================================ */
.squad-lib {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 10px 10px 12px;
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.squad-lib-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    align-items: center;
}
.squad-lib-name {
    text-align: left;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    height: 40px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text);
    font-weight: 700;
    font-size: 15px;
    min-width: 0;
}
.squad-lib-name-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.squad-lib-name-pencil {
    color: var(--text-3);
    font-size: 13px;
    flex-shrink: 0;
}
.squad-lib-name-input {
    height: 40px;
    background: var(--bg-2);
    border: 1px solid var(--accent);
    border-radius: var(--radius-sm);
    color: var(--text);
    font: inherit;
    font-weight: 700;
    font-size: 15px;
    padding: 0 10px;
    outline: none;
    min-width: 0;
}
.squad-lib-select {
    appearance: none;
    -webkit-appearance: none;
    height: 40px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    color: var(--text);
    font: inherit;
    font-weight: 600;
    font-size: 13px;
    padding: 0 28px 0 10px;
    max-width: 140px;
    /* CSS chevron — no embedded SVG */
    background-image:
        linear-gradient(45deg, transparent 50%, var(--text-3) 50%),
        linear-gradient(135deg, var(--text-3) 50%, transparent 50%);
    background-position: right 14px center, right 10px center;
    background-size: 4px 4px;
    background-repeat: no-repeat;
}
.squad-lib-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.filter-chip.danger-chip {
    color: var(--danger);
}
.filter-chip.danger-chip[disabled] {
    opacity: 0.3;
    pointer-events: none;
}
.filter-chip.armed {
    background: var(--danger);
    color: var(--danger-ink);
    border-color: transparent;
}

/* ============================================================
   CSV IMPORT SHEET
   ============================================================ */
.csv-mode {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 10px 0 4px;
}
.csv-mode-opt {
    display: grid;
    grid-template-columns: 18px 1fr;
    align-items: start;
    gap: 10px;
    padding: 10px 12px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    cursor: pointer;
}
.csv-mode-opt.active {
    border-color: var(--accent);
    background: color-mix(in oklch, var(--accent) 10%, var(--surface));
}
.csv-mode-opt input[type="radio"] {
    margin-top: 3px;
    accent-color: var(--accent);
}
.csv-mode-title {
    font-weight: 700;
    font-size: 13px;
    color: var(--text);
}
.csv-mode-sub {
    font-size: 11px;
    color: var(--text-3);
    margin-top: 2px;
}
.csv-help {
    margin-top: 14px;
    padding: 10px 12px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}
.csv-help-title {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 6px;
}
.csv-help-pre {
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 8px 10px;
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 1.5;
    color: var(--text-2);
    white-space: pre;
    overflow-x: auto;
}
.csv-help-note {
    margin-top: 8px;
    font-size: 11px;
    color: var(--text-3);
    line-height: 1.5;
}
.csv-help-note code {
    background: var(--bg-2);
    padding: 1px 4px;
    border-radius: 3px;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-2);
}

/* ============================================================
   SYNC BADGE  (cloud-sync status pill in the top bar)
   ============================================================ */
.sync-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--text-2);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1;
    max-width: 50%;
    overflow: hidden;
}
.sync-badge .sync-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--text-3);
    flex-shrink: 0;
}
.sync-badge .sync-txt {
    flex-shrink: 0;
}
.sync-badge .sync-email {
    color: var(--text-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 90px;
    border-left: 1px solid var(--line);
    padding-left: 6px;
    margin-left: 2px;
}
.sync-badge.tone-ok .sync-dot   { background: var(--accent); }
.sync-badge.tone-go .sync-dot   { background: var(--mpb-glacier); animation: pulse 1.4s ease-out infinite; }
.sync-badge.tone-warn .sync-dot { background: var(--warn); }
.sync-badge.tone-mute .sync-dot { background: var(--text-3); }
.sync-badge.tone-cta {
    background: color-mix(in oklch, var(--accent) 18%, var(--surface));
    border-color: color-mix(in oklch, var(--accent) 40%, var(--line));
    color: var(--text);
}
.sync-badge.tone-cta .sync-dot  { background: var(--accent); }
.sync-badge.cta:active {
    transform: scale(0.97);
}
.sync-badge.static {
    cursor: default;
}

/* ============================================================
   WELCOME / SIGN-IN SCREEN  (first-visit overlay)
   ============================================================ */
.welcome-screen {
    position: fixed;
    inset: 0;
    z-index: 200;
    background:
        radial-gradient(ellipse at 50% -10%, color-mix(in oklch, var(--mpb-emerald) 30%, var(--bg)) 0%, var(--bg) 50%, var(--bg-2) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    padding-top: calc(20px + env(safe-area-inset-top));
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
    overflow-y: auto;
}
.welcome-card {
    width: 100%;
    max-width: 380px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 32px 24px 24px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    box-shadow: 0 24px 60px rgba(0,0,0,0.4);
}
.welcome-mark {
    align-self: center;
    margin-bottom: 8px;
    line-height: 0;
    border-radius: 18px;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 1152 / 928;
    background: #0b002b;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5),
                0 0 0 1px rgba(255,255,255,0.06);
}
.welcome-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.welcome-title {
    text-align: center;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--text);
    margin: 0;
}
.welcome-sub {
    text-align: center;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-2);
    margin: 0 0 16px;
    text-wrap: pretty;
}

.welcome-btn {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 14px 16px;
    border-radius: 12px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    color: var(--text);
    text-align: left;
    transition: transform 0.06s ease, background 0.12s ease;
}
.welcome-btn:active { transform: scale(0.99); }
.welcome-btn-label {
    font-size: 15px;
    font-weight: 700;
}
.welcome-btn-sub {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-3);
}
.welcome-btn.primary {
    background: var(--accent);
    border-color: transparent;
    color: var(--accent-ink);
}
.welcome-btn.primary .welcome-btn-sub {
    color: color-mix(in oklch, var(--accent-ink) 75%, transparent);
}
.welcome-foot {
    margin-top: 10px;
    text-align: center;
    font-size: 11px;
    line-height: 1.5;
    color: var(--text-3);
}

/* ============================================================
   LINEUPS  (saved formation + slot presets)
   ============================================================ */
.lineups {
    margin: 0 0 12px;
}
.lineups-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
}
.lineups-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    flex-shrink: 0;
}
.lineups-scroll {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    min-width: 0;
    padding: 2px 0;
}
.lineups-scroll::-webkit-scrollbar { display: none; }
.lineups-empty {
    font-size: 11px;
    color: var(--text-3);
    font-style: italic;
    white-space: nowrap;
    padding: 0 4px;
}
.lineup-chip {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--text);
    flex-shrink: 0;
    transition: transform 0.06s ease, background 0.12s ease;
    line-height: 1.1;
}
.lineup-chip:active {
    transform: scale(0.96);
    background: var(--surface-2);
}
.lineup-chip-name {
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lineup-chip-form {
    font-size: 9px;
    font-weight: 600;
    color: var(--text-3);
    font-family: var(--font-mono);
    letter-spacing: 0.04em;
}
.lineup-save-btn,
.lineup-manage-btn {
    flex-shrink: 0;
    height: 32px;
    padding: 0 10px;
    border-radius: 999px;
    background: color-mix(in oklch, var(--accent) 18%, var(--surface));
    border: 1px solid color-mix(in oklch, var(--accent) 40%, var(--line));
    color: var(--text);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.lineup-save-btn:disabled {
    opacity: 0.4;
    background: var(--surface);
    border-color: var(--line);
    color: var(--text-3);
    cursor: not-allowed;
}
.lineup-save-btn:not(:disabled):active,
.lineup-manage-btn:active { transform: scale(0.96); }
.lineup-manage-btn {
    width: 32px;
    padding: 0;
    background: var(--surface);
    border-color: var(--line);
    color: var(--text-2);
    font-size: 16px;
    line-height: 1;
}
.lineup-share-btn {
    flex-shrink: 0;
    width: 36px;
    height: 32px;
    padding: 0;
    border-radius: 999px;
    background: var(--accent);
    color: var(--accent-ink);
    border: none;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
}
.lineup-share-btn:disabled {
    opacity: 0.4;
    background: var(--surface);
    color: var(--text-3);
    cursor: not-allowed;
}
.lineup-share-btn:not(:disabled):active { transform: scale(0.94); }
.lineup-save-form {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.lineup-save-input {
    height: 32px;
    width: 140px;
    padding: 0 10px;
    border-radius: 999px;
    background: var(--bg-2);
    border: 1px solid var(--accent);
    color: var(--text);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    outline: none;
}
.lineup-save-confirm {
    height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    background: var(--accent);
    color: var(--accent-ink);
    font-size: 12px;
    font-weight: 700;
}
.lineup-save-cancel {
    height: 32px;
    width: 32px;
    border-radius: 50%;
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--text-3);
    font-size: 18px;
    line-height: 1;
}

/* Manage sheet rows */
.lineup-manage-row {
    display: grid;
    grid-template-columns: 1fr auto 36px;
    gap: 10px;
    align-items: center;
    padding: 8px 10px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    margin-bottom: 6px;
}
.lineup-manage-name {
    height: 36px;
    padding: 0 10px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--text);
    font: inherit;
    font-weight: 600;
    font-size: 14px;
    min-width: 0;
}
.lineup-manage-name:focus { outline: 2px solid var(--accent); }
.lineup-manage-meta {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-3);
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.lineup-manage-del {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    color: var(--text-2);
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
}
.lineup-manage-del.armed {
    background: var(--danger);
    color: var(--danger-ink);
    border-color: transparent;
}

/* ============================================================
   RESET SHEET ACTIONS
   ============================================================ */
.reset-action {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 12px;
    align-items: start;
    width: 100%;
    text-align: left;
    padding: 14px 14px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    margin-bottom: 8px;
    transition: transform 0.06s ease, background 0.12s ease, border-color 0.12s ease;
}
.reset-action:active { transform: scale(0.99); }
.reset-action.armed {
    background: color-mix(in oklch, var(--warn) 30%, var(--surface));
    border-color: var(--warn);
}
.reset-action.danger.armed {
    background: color-mix(in oklch, var(--danger) 25%, var(--surface));
    border-color: var(--danger);
}
.reset-action-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bg-2);
    color: var(--text);
    font-size: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.reset-action.danger .reset-action-icon { color: var(--danger); }
.reset-action.armed .reset-action-icon  { background: rgba(0,0,0,0.18); color: var(--text); }
.reset-action-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.reset-action-label {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
}
.reset-action-sub {
    font-size: 12px;
    line-height: 1.4;
    color: var(--text-3);
}

/* ============================================================
   HELP SHEET
   ============================================================ */
.help-sections {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.help-section {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.help-section.open {
    border-color: color-mix(in oklch, var(--accent) 40%, var(--line));
}
.help-section-head {
    width: 100%;
    display: grid;
    grid-template-columns: 28px 1fr 24px;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    text-align: left;
    color: var(--text);
}
.help-section-head:active { background: var(--surface-2); }
.help-section-icon {
    font-size: 18px;
    line-height: 1;
}
.help-section-title {
    font-size: 14px;
    font-weight: 700;
}
.help-section-chev {
    font-family: var(--font-mono);
    font-size: 16px;
    color: var(--text-3);
    text-align: center;
}
.help-section-body {
    padding: 0 16px 14px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--text-2);
}
.help-section-body p { margin: 0 0 10px; }
.help-section-body p:last-child { margin-bottom: 0; }
.help-section-body ul,
.help-section-body ol {
    margin: 0 0 10px;
    padding-left: 20px;
}
.help-section-body li { margin: 0 0 4px; }
.help-section-body b { color: var(--text); font-weight: 700; }
.help-section-body code {
    background: var(--bg-2);
    padding: 1px 5px;
    border-radius: 3px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text);
}
.help-section-body pre {
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 10px 12px;
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 1.55;
    color: var(--text-2);
    white-space: pre;
    overflow-x: auto;
    margin: 0 0 10px;
}
.help-tweaks-btn {
    width: 100%;
    margin-top: 4px;
    padding: 12px 14px;
    background: var(--accent);
    color: var(--accent-ink);
    border: none;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
    transition: transform 0.06s ease;
}
.help-tweaks-btn:active { transform: scale(0.99); }

/* ============================================================
   SESSION-EXPIRED BANNER  (when a previously-signed-in user's
   Cloudflare Access session has lapsed)
   ============================================================ */
.session-expired-banner {
    position: sticky;
    top: 0;
    z-index: 30;
    display: grid;
    grid-template-columns: 28px 1fr auto 24px;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    padding-top: calc(10px + env(safe-area-inset-top));
    background: color-mix(in oklch, var(--accent) 18%, var(--bg-2));
    border-bottom: 1px solid color-mix(in oklch, var(--accent) 40%, var(--line));
    color: var(--text);
    font-size: 13px;
}
.seb-icon {
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    background: color-mix(in oklch, var(--accent) 30%, transparent);
    border-radius: 50%;
    font-size: 14px;
}
.seb-body { min-width: 0; }
.seb-title { font-weight: 700; font-size: 13px; line-height: 1.2; }
.seb-sub { font-size: 11px; color: var(--text-2); margin-top: 2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seb-btn {
    height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    background: var(--accent);
    color: var(--accent-ink);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.02em;
}
.seb-btn:active { transform: scale(0.97); }
.seb-close {
    width: 24px; height: 24px;
    border-radius: 6px;
    color: var(--text-3);
    font-size: 18px;
    line-height: 1;
}
.seb-close:active { background: var(--surface); color: var(--text); }

.squad-empty {
    padding: 28px 20px;
    text-align: center;
    background: var(--surface);
    border: 1px dashed var(--line);
    border-radius: var(--radius);
}
.squad-empty-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 6px;
}
.squad-empty-sub {
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-3);
}
.squad-empty-sub b {
    color: var(--text-2);
    font-weight: 600;
}

/* ============================================================
   RESPONSIVE LARGER VIEWPORT (tablet / desktop preview)
   ============================================================ */@media (min-width: 540px) {
    .app {
        margin-top: 16px;
        border: 1px solid var(--line);
        border-radius: 24px;
        overflow: hidden;
        margin-bottom: 16px;
        min-height: 0;
        padding-bottom: 80px;
    }
}