/* ================================================================
   WHIST — app-local component layer (redesign)
   Built on the shared design tokens in lib/theme.css, so every screen
   follows the site-wide Appearance (light / dark). No Tailwind.

   The design handover speaks in its own "Kort og Godt design system"
   token names (--accent, --surface-sunk, --accent-tint, …). We alias
   those to the real theme.css tokens once, here, so the handover's
   values resolve in BOTH appearances without redefining anything.
   ================================================================ */

:root {
    --accent:        var(--coral);
    --accent-hover:  var(--coral-dark);
    --accent-tint:   var(--coral-light);
    --brand:         var(--coral);
    --surface-sunk:  var(--surface2);
    --text-heading:  var(--text);
    --success-text:  var(--green);
    --danger-text:   var(--red);
    --suit-red:      var(--red);
    --suit-dark:     var(--text);
    --shadow-md:     var(--shadow-lg);
    --shadow-sm:     var(--shadow);
    --glass-bg:      var(--glass);
    --radius-md:     9px;
    --radius-lg:     12px;
    --radius-xl:     16px;
    --dur-fast:      0.15s;
}

/* ── Shell ─────────────────────────────────────────────────────── */
.whist-shell { display: flex; align-items: flex-start; }

.whist-sidebar {
    position: sticky;
    top: 56px;                       /* below the app-nav */
    align-self: flex-start;
    height: calc(100dvh - 56px);
    width: 232px;
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 26px 16px;
    border-right: 1px solid var(--border);
    background: var(--surface);
}
.whist-sidebar-brand {
    font-size: 10.5px;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--text-faint);
    padding: 4px 12px 18px;
}

.whist-main { flex: 1; min-width: 0; }
.whist-content {
    max-width: 880px;
    margin: 0 auto;
    padding: 34px 40px 64px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.whist-bottomnav { display: none; }

@media (max-width: 859px) {
    .whist-sidebar { display: none; }
    .whist-content { padding: 20px 16px 96px; gap: 18px; }
    .whist-bottomnav {
        display: flex;
        position: fixed;
        left: 0; right: 0; bottom: 0;
        gap: 4px;
        padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
        background: var(--glass-bg);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border-top: 1px solid var(--border);
        z-index: 900;
    }
}

/* ── Nav items ─────────────────────────────────────────────────── */
.kg-navitem {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    cursor: pointer;
    padding: 11px 14px;
    border-radius: var(--radius-md);
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-family: 'DM Sans', sans-serif;
    font-size: 14.5px;
    font-weight: 500;
    letter-spacing: -0.01em;
    text-align: left;
    transition: background var(--dur-fast), color var(--dur-fast);
}
.kg-navitem:hover { background: var(--surface-sunk); color: var(--text); }
.kg-navitem.is-active { background: var(--accent-tint); color: var(--coral-dark); font-weight: 600; }
.kg-navitem svg { flex: none; }
.whist-bottomnav .kg-navitem {
    flex-direction: column;
    gap: 3px;
    padding: 6px 4px;
    font-size: 11px;
    justify-content: center;
    text-align: center;
}

/* ── Headings & eyebrows ───────────────────────────────────────── */
.kg-eyebrow {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin-bottom: 6px;
}
.kg-eyebrow.accent { color: var(--coral-dark); }

/* Typography follows the Kort og Godt design system: DM Sans headings + Fredoka
   wordmark — overriding theme.css's Instrument-Serif house style (which reads as
   the "old" look here). theme.css sets h1–h6 with !important, so match that. */
.whist-content h1,
.whist-content h2 {
    font-family: 'DM Sans', sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: -0.025em !important;
    color: var(--text-heading) !important;
    margin: 0;
}
.whist-content h1 { font-size: 33px; line-height: 1.05; }
.whist-content h2 { font-size: 27px; }
.kg-cardtitle {
    font-family: 'DM Sans', sans-serif; font-weight: 600;
    font-size: 18px; letter-spacing: -0.02em; color: var(--text-heading); margin: 0;
}
/* Brand wordmark → Fredoka (theme.css renders it Instrument-Serif with an italic "og"). */
.app-nav-logo { font-family: 'Fredoka', 'DM Sans', sans-serif !important; font-weight: 500; letter-spacing: 0; }
.app-nav-logo span { font-style: normal !important; }
/* Wrapping matters: these rows pair a 33px heading with an action button, which together
   overflow a phone. The wrap only ever engages when the row genuinely doesn't fit. */
.kg-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.kg-num {
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--text);
}

/* ── Cards ─────────────────────────────────────────────────────── */
.kg-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 22px;
    box-shadow: var(--shadow-md);
}
.kg-card.sm { box-shadow: var(--shadow-sm); }
.kg-sunk {
    background: var(--surface-sunk);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 16px 18px;
}

/* ── Buttons ───────────────────────────────────────────────────── */
.kg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 18px;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.01em;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--dur-fast), border-color var(--dur-fast),
                color var(--dur-fast), transform var(--dur-fast), filter var(--dur-fast);
}
.kg-btn:active { transform: scale(0.98); }
.kg-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.kg-btn.primary, .kg-btn.brand { background: var(--accent); color: var(--on-accent); }
.kg-btn.primary:hover, .kg-btn.brand:hover { filter: brightness(1.05); }
.kg-btn.secondary { background: var(--surface); border-color: var(--border); color: var(--text); }
.kg-btn.secondary:hover { background: var(--surface-sunk); border-color: var(--border-strong); }
.kg-btn.ghost { background: transparent; color: var(--text-muted); height: 34px; padding: 0 10px; }
.kg-btn.ghost:hover { background: var(--surface-sunk); color: var(--text); }
.kg-btn.danger { background: transparent; border-color: var(--border); color: var(--red); }
.kg-btn.danger:hover { background: var(--red-light); border-color: var(--red); }

.kg-btn.lg { height: 48px; font-size: 15px; }
.kg-btn.sm { height: 34px; font-size: 13px; padding: 0 12px; }
.kg-btn.full { width: 100%; }
.kg-btn.flex { flex: 1; }

/* ── Badges ────────────────────────────────────────────────────── */
.kg-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 22px;
    padding: 0 9px;
    border-radius: 100px;
    font-family: 'DM Sans', sans-serif;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.01em;
    border: 1px solid transparent;
}
.kg-badge.accent  { background: var(--accent-tint); color: var(--coral-dark); border-color: var(--coral); }
.kg-badge.success { background: var(--green-light); color: var(--green); border-color: var(--green); }
.kg-badge.neutral { background: var(--surface-sunk); color: var(--text-muted); border-color: var(--border); }
.kg-badge.brand   { background: var(--accent-tint); color: var(--coral-dark); border-color: var(--coral); }
.kg-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ── Inputs (theme.css styles the base; we size and tune) ──────── */
/* theme.css sets no box-sizing, so form controls inherit the content-box default: a
   `width: 100%` input then measures 100% PLUS its padding and border, and hangs ~30px
   outside whatever column it sits in. That is what pushed the Nyt spil name fields over
   the card edge, and it silently widened the regnetabel cells too. */
.whist-content input,
.whist-content textarea,
.whist-content select { box-sizing: border-box; }

.kg-input {
    height: 42px;
    padding: 0 14px;
    font-size: 14.5px;
    width: 100%;
    max-width: 240px;
    min-width: 0;                    /* a flex/grid item must be allowed to shrink */
}
.kg-input.num { max-width: 130px; text-align: center; }
.kg-input.wide { max-width: none; }

/* An input's intrinsic width (~180px) plus a nowrap button overflows a phone, so these
   rows wrap and the field is free to shrink. */
.kg-inlineform { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.kg-inlineform .kg-input { flex: 1 1 170px; max-width: none; }
.kg-inlineform .kg-btn { flex: none; }

/* ── Segmented control ─────────────────────────────────────────── */
.kg-seg {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
/* `flex: 1 1 auto` — NOT `flex: 1`. With a 0% basis the options never wrap, they just
   squeeze until their nowrap labels (player names, "2× (1–2 kort)") spill out of the
   buttons and out of the card. Sizing from content instead lets a row break onto the
   next line when it doesn't fit, and stretch to fill when it does. */
.kg-seg.fill .kg-seg-opt { flex: 1 1 auto; }
.kg-seg-opt {
    flex: none;
    min-width: 0;
    padding: 9px 12px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-muted);
    font-family: 'DM Sans', sans-serif;
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: -0.01em;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;                /* backstop: one very long name can't escape its box */
    text-overflow: ellipsis;
    text-align: center;
    transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}
/* Antal stik — 14 equal targets rather than a range slider you have to land exactly on. */
.kg-seg.tricks {
    display: grid;
    grid-template-columns: repeat(14, minmax(0, 1fr));
    font-variant-numeric: tabular-nums;
}
/* Seat pickers size on equal fractions, so a long player name can never widen its button
   past the row (wrapping alone still let one long name blow out a line). `minmax(0, 1fr)`
   is what actually permits the shrink; the ellipsis above then does the truncating. */
.kg-seg.seats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kg-seg.seats.solo { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.kg-seg-opt:hover { border-color: var(--border-strong); color: var(--text); background: var(--surface-sunk); }
.kg-seg-opt.is-active {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
    box-shadow: 0 0 0 3px var(--accent-tint);
}
.kg-seg-opt:disabled { opacity: 0.4; pointer-events: none; }

/* ── Ny runde form ─────────────────────────────────────────────── */
.kg-form { display: flex; flex-direction: column; gap: 22px; }
.kg-fieldlabel { font-size: 13px; font-weight: 600; margin-bottom: 10px; }
/* Melding + Trumf share a line on desktop and stack on a phone. */
.kg-fieldpair { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.kg-result { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }

/* ── Avatars & swatches ────────────────────────────────────────── */
.kg-avatar {
    border-radius: 50%;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #1B2616;
    text-transform: uppercase;
}
.kg-swatch {
    width: 30px; height: 30px;
    border-radius: 50%;
    cursor: pointer;
    border: 2.5px solid transparent;
    padding: 0;
    transition: transform var(--dur-fast);
}
.kg-swatch:hover { transform: scale(1.08); }
.kg-swatch.is-active { border-color: var(--text); box-shadow: 0 0 0 2px var(--bg) inset; }

/* ── Suit glyphs ───────────────────────────────────────────────── */
.suit-red  { color: var(--suit-red); }
.suit-dark { color: var(--suit-dark); }

/* ── Score grid (Stillingen) ───────────────────────────────────── */
.kg-scoregrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.kg-scorecell {
    text-align: center;
    padding: 18px 10px;
    border-radius: var(--radius-lg);
    background: var(--surface-sunk);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: border-color var(--dur-fast), background var(--dur-fast);
}
.kg-scorecell.lead { background: var(--accent-tint); border-color: var(--accent); }
.kg-scorecell .seat { font-size: 13px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kg-scorecell .val  { font-size: 40px; margin-top: 6px; }
.kg-scorecell.lead .val { color: var(--coral-dark); }

/* ── Stat tiles (Profile) ──────────────────────────────────────── */
.kg-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.kg-tile {
    background: var(--surface-sunk);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 16px;
}
.kg-tile.hot { background: var(--accent-tint); border-color: var(--accent); }
.kg-tile .tv { font-size: 30px; }
.kg-tile.hot .tv { color: var(--coral-dark); }
.kg-tile .tl { font-size: 12px; color: var(--text-muted); margin-top: 6px; }

/* ── Head-to-head bars ─────────────────────────────────────────── */
.kg-h2h-row { display: flex; align-items: center; gap: 14px; }
.kg-h2h-name { width: 128px; font-size: 14px; color: var(--text); flex: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kg-h2h-track { flex: 1; height: 10px; border-radius: 6px; background: var(--surface-sunk); overflow: hidden; }
.kg-h2h-fill { background: var(--accent); height: 100%; }
.kg-h2h-rec { width: 56px; text-align: right; font-size: 13px; color: var(--text-muted); font-variant-numeric: tabular-nums; flex: none; }

/* ── Point table (regler) ──────────────────────────────────────── */
.kg-ptable { display: flex; flex-direction: column; margin-top: 12px; }
.kg-ptable-head, .kg-ptable-row {
    display: grid;
    grid-template-columns: 1fr 130px;
    gap: 12px;
    align-items: center;
}
.kg-ptable-head { padding: 0 4px 10px; border-bottom: 1px solid var(--border); }
.kg-ptable-row  { padding: 10px 4px; border-bottom: 1px solid var(--border); }
.kg-lvlchip {
    width: 36px; height: 36px;
    border-radius: 9px;
    background: var(--surface-sunk);
    border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 16px;
    color: var(--coral-dark);
    flex: none;
}

/* ── List rows (round history, games, completed) ───────────────── */
.kg-listrow {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    background: var(--surface-sunk);
    border-radius: var(--radius-md);
}
.kg-listrow .del {
    opacity: 0; background: none; border: none; cursor: pointer;
    color: var(--text-faint); padding: 4px; transition: opacity var(--dur-fast), color var(--dur-fast);
    flex: none;
}
.kg-listrow:hover .del { opacity: 1; }
.kg-listrow .del:hover { color: var(--red); }

/* A round row: who bid + what, then the outcome. */
.kg-roundrow-main  { display: flex; align-items: center; gap: 12px; min-width: 0; }
.kg-roundrow-n     { font-variant-numeric: tabular-nums; min-width: 16px; }
.kg-roundrow-aside { display: flex; align-items: center; gap: 10px; }

/* ── Roster cards (Spillere) ───────────────────────────────────── */
.kg-roster { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.kg-rostercard {
    display: flex; align-items: center; gap: 15px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 18px;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    text-align: left;
    width: 100%;
    transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.kg-rostercard:hover { border-color: var(--border-strong); }

/* Owner-only remove control, overlaid top-right so the card stays one clickable button.
   Only a player with no games is removable, and that card omits its win-rate block, so
   the two never share the corner. The reserved padding keeps the name clear of it too. */
.kg-roster-item { position: relative; }
.kg-roster-item.is-removable .kg-rostercard { padding-right: 48px; }
.kg-roster-remove {
    position: absolute; top: 8px; right: 8px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 7px; cursor: pointer;
    color: var(--text-faint); padding: 4px; line-height: 0;
    opacity: 0.55; transition: opacity var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.kg-roster-item:hover .kg-roster-remove { opacity: 1; }
.kg-roster-remove:hover { color: var(--red); border-color: var(--red); }

/* Nyt spil — the four seats, and the roster quick-pick chips */
/* minmax(0, …), not plain 1fr: an <input>'s intrinsic `size` width would otherwise set
   the track's floor and push the pair wider than the card in a narrow Frame. */
.np-seats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.np-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.np-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 12px; font-size: 13.5px;
    background: var(--surface-sunk); border: 1px solid var(--border);
    border-radius: 999px; cursor: pointer; color: var(--text);
    transition: border-color var(--dur-fast), background var(--dur-fast);
}
.np-chip:hover { border-color: var(--border-strong); background: var(--surface); }
.np-chip.is-picked {
    background: var(--accent-tint);
    border-color: var(--accent);
    color: var(--coral-dark);
    font-weight: 600;
}

/* ── Point & regler: full regnetabel editor ────────────────────── */
.pt-level { padding: 16px 16px 12px; }
.pt-summary {
    list-style: none; cursor: pointer;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin-bottom: 8px;
}
.pt-summary::-webkit-details-marker { display: none; }
/* A chevron that points down when the table is open. */
.pt-summary::after {
    content: ''; flex: none;
    width: 8px; height: 8px;
    border-right: 2px solid var(--text-faint);
    border-bottom: 2px solid var(--text-faint);
    transform: rotate(-45deg); margin-right: 4px;
    transition: transform var(--dur-fast);
}
.pt-level[open] > .pt-summary::after { transform: rotate(45deg); }
.pt-hint { font-size: 12.5px; margin: 0 0 14px; }
.pt-scroll { overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }

/* One grid, collapsed borders — the cells are the ruling, so nothing floats in gaps and
   the two sticky label columns can butt straight up against the scrolling numbers. */
.pt-table {
    --pt-lvl-w: 46px;
    border-collapse: separate; border-spacing: 0;
    font-size: 12.5px; font-variant-numeric: tabular-nums;
}
.pt-table th, .pt-table td { text-align: center; padding: 0; border-bottom: 1px solid var(--border); }
.pt-table tbody tr:last-child th, .pt-table tbody tr:last-child td { border-bottom: none; }
.pt-table thead th {
    color: var(--text-faint); font-weight: 600; font-size: 11px;
    min-width: 44px; height: 28px;
}
/* Each melding block opens with a heavier rule, so 28 rows still read as seven groups. */
.pt-groupstart > th, .pt-groupstart > td { border-top: 1px solid var(--border-strong); }

/* Melding + Trumf stay put while the 14 stik columns scroll under them. */
.pt-lvl, .pt-side {
    position: sticky; z-index: 1; background: var(--surface);
    white-space: nowrap;
}
.pt-lvl {
    left: 0; width: var(--pt-lvl-w); min-width: var(--pt-lvl-w);
    font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 15px;
    color: var(--coral-dark); vertical-align: middle;
}
.pt-side {
    left: var(--pt-lvl-w); min-width: 58px;
    text-align: left; color: var(--text-muted); font-weight: 500;
    padding: 0 14px 0 10px;
    box-shadow: 1px 0 0 var(--border);
}
.pt-madecell { background: var(--accent-tint); }

/* Editable numbers, not form fields: no spinner arrows, no box until you reach for one. */
.pt-input {
    width: 100%; min-width: 42px; height: 30px;
    text-align: center; padding: 0 2px;
    font-size: 12.5px; font-variant-numeric: tabular-nums;
    border: 1px solid transparent !important;
    background: transparent !important;
    border-radius: 6px;
    color: var(--text);
}
.pt-input::-webkit-outer-spin-button,
.pt-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pt-input:hover { background: var(--surface-sunk) !important; }
.pt-input:focus {
    background: var(--surface) !important;
    border-color: var(--coral) !important;
    box-shadow: 0 0 0 3px var(--accent-tint);
    outline: none;
}
.pt-madecell .pt-input { color: var(--coral-dark); font-weight: 700; }

/* Specialmeldinger: four bids, one number each, no stik axis at all. */
.pt-sptable { width: 100%; }
.pt-sptable .pt-input { max-width: 90px; }
.pt-spside { position: static; min-width: 0; width: 45%; font-size: 13.5px; color: var(--text); }
.pt-spminus { text-align: right; color: var(--text-faint); font-size: 12px; white-space: nowrap; padding-right: 2px; }

/* ── Phone ─────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .whist-content h1 { font-size: 26px; }

    .kg-roster { grid-template-columns: 1fr; }
    .kg-tiles { grid-template-columns: repeat(2, 1fr); }
    .kg-input, .kg-input.num { max-width: none; }
    .kg-card { padding: 18px 16px; }

    /* Four score cells across a phone leave ~42px of usable width — not enough for a
       three-digit total, which then spilled out of its cell. Two up reads far better. */
    .kg-scoregrid { grid-template-columns: repeat(2, 1fr); }
    .kg-scorecell .val { font-size: 34px; }

    .np-seats { grid-template-columns: 1fr; gap: 13px; }
    .kg-form { gap: 18px; }
    .kg-fieldpair { grid-template-columns: 1fr; gap: 18px; }
    /* Comfortable thumb targets, and 7 stik per row instead of 14 pinched ones. */
    .kg-seg-opt { padding: 11px 12px; font-size: 14px; }
    .kg-seg.tricks { grid-template-columns: repeat(7, minmax(0, 1fr)); }
    /* Two seats per row: four names across a phone leaves ~70px each, which truncates
       every one of them to nothing. */
    .kg-seg.seats, .kg-seg.seats.solo { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* Badges + points + delete and the bid text can't share a line here. */
    .kg-roundrow { flex-direction: column; align-items: stretch; gap: 9px; }
    .kg-roundrow-aside { justify-content: flex-end; }

    /* A fixed 128px name column left the bar itself barely 40px wide here. */
    .kg-h2h-name { width: 92px; font-size: 13.5px; }
    .kg-h2h-rec { width: 46px; }
    .kg-h2h-row { gap: 10px; }

    .pt-table { --pt-lvl-w: 38px; }
    .pt-input { min-width: 38px; }
    .pt-table thead th { min-width: 40px; }
    .pt-side { min-width: 50px; padding: 0 10px 0 8px; }
    .pt-spminus { display: none; }
    .pt-spside { width: 55%; }
}

/* Single-line text that must truncate rather than push its container wider. */
.kg-clip { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* A game's name — the date it was played. */
.kg-gamename {
    font-family: 'DM Sans', sans-serif;
    font-size: 15.5px; font-weight: 600; letter-spacing: -0.015em;
    color: var(--text-heading);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Touch has no hover, so a control revealed only on hover is a control that isn't there. */
@media (hover: none) {
    .kg-listrow .del { opacity: 0.65; }
    .kg-roster-remove { opacity: 1; }
}

/* ── Muted / helper text ───────────────────────────────────────── */
.t-muted { color: var(--text-muted); }
.t-faint { color: var(--text-faint); }
.t-good  { color: var(--success-text); }
.t-bad   { color: var(--danger-text); }
.kg-stack { display: flex; flex-direction: column; gap: 11px; }
.kg-empty { color: var(--text-faint); text-align: center; padding: 28px 0; }