/* Desert Storm Vote — tool styles. Prefix: dsv- */

.dsv-page { max-width: 720px; margin-inline: auto; }

.dsv-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: clamp(1.25rem, 3vw, 2rem);
    box-shadow: var(--shadow-card);
}
.dsv-card + .dsv-card { margin-top: 1.5rem; }
.dsv-card h2 { margin-bottom: 0.75rem; }
.dsv-card-narrow { max-width: 420px; margin-inline: auto; }

.dsv-muted { color: var(--text-secondary); margin-bottom: 1rem; }
.dsv-muted strong { color: var(--text-primary); }
.dsv-error {
    color: #e8736a;
    background: rgba(232, 115, 106, 0.1);
    border: 1px solid rgba(232, 115, 106, 0.4);
    border-radius: var(--radius-md);
    padding: 0.6rem 0.8rem;
    margin-bottom: 1rem;
}
.dsv-success {
    color: #6fbf73;
    background: rgba(111, 191, 115, 0.1);
    border: 1px solid rgba(111, 191, 115, 0.4);
    border-radius: var(--radius-md);
    padding: 0.6rem 0.8rem;
    margin-bottom: 1rem;
}

.dsv-form { display: flex; flex-direction: column; gap: 1.1rem; }
.dsv-field { display: flex; flex-direction: column; gap: 0.35rem; border: 0; padding: 0; min-width: 0; }
.dsv-field > span,
.dsv-field > legend {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.95rem;
}
.dsv-field input[type="text"],
.dsv-field input[type="password"],
.dsv-field input[type="number"] {
    background: var(--bg-base);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    padding: 0.6rem 0.75rem;
    font: inherit;
    width: 100%;
}
.dsv-field input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-dim);
}
.dsv-hint { color: var(--text-muted); font-size: 0.85rem; }

.dsv-choices { gap: 0.5rem; }
.dsv-choices legend { margin-bottom: 0.4rem; }
.dsv-choice {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: var(--bg-base);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 0.6rem 0.8rem;
    cursor: pointer;
    transition: border-color 120ms ease, background 120ms ease;
}
.dsv-choice:hover { background: var(--bg-card-hover); }
.dsv-choice input[type="radio"] { accent-color: var(--accent); }
.dsv-choice input[type="radio"]:checked + span { color: var(--accent); font-weight: 600; }
.dsv-choice:has(input:checked) { border-color: var(--border-accent); background: var(--accent-dim); }

.dsv-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.dsv-btn {
    background: var(--bg-card-hover);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 0.6rem 1.1rem;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease;
}
.dsv-btn:hover { background: var(--bg-card); border-color: var(--border-accent); }
.dsv-btn-primary { background: var(--accent); color: #1a1d23; border-color: var(--accent); }
.dsv-btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #1a1d23; }
.dsv-btn-danger {
    background: rgba(232, 115, 106, 0.15);
    border-color: rgba(232, 115, 106, 0.4);
    color: #e8736a;
}
.dsv-btn-danger:hover { background: rgba(232, 115, 106, 0.25); }
.dsv-btn[disabled] { opacity: 0.55; cursor: not-allowed; }
.dsv-status { color: var(--text-secondary); font-size: 0.9rem; }
.dsv-status.is-error   { color: #e8736a; }
.dsv-status.is-success { color: #6fbf73; }

/* Admin report */
.dsv-counts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem;
    margin: 1rem 0 1.5rem;
}
.dsv-count {
    background: var(--bg-base);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 0.8rem;
    text-align: center;
}
.dsv-count-n { font-size: 1.6rem; font-weight: 700; color: var(--accent); }
.dsv-count-label { color: var(--text-secondary); font-size: 0.85rem; margin-top: 0.2rem; }

.dsv-table-wrap { overflow-x: auto; }
.dsv-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0.5rem;
    font-size: 0.95rem;
}
.dsv-table th,
.dsv-table td {
    padding: 0.55rem 0.7rem;
    text-align: left;
    border-bottom: 1px solid var(--border);
}
.dsv-table th {
    background: var(--bg-surface);
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.dsv-table tr:hover td { background: var(--bg-card-hover); }
.dsv-table .dsv-choice-cell { font-weight: 600; }
.dsv-table .dsv-choice-none { color: var(--text-muted); }
.dsv-table .dsv-choice-novote { color: var(--text-muted); font-style: italic; }

.dsv-toolbar {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 1rem;
}
.dsv-toolbar-grow { flex: 1; min-width: 0; }

/* NOTE: the admin event-switcher (.dsv-sections/.dsv-section) and sub-tab strip
   (.dsv-subtabs/.dsv-subtab) were retired when the tabbed console was split into
   the standalone Desert/Canyon Storm event apps. Those apps use the shared
   .ws-subnav / .ws-view top nav (assets/css/app.css). The .dsv-tab-panel +
   [data-dsv-view] machinery below is kept — the public member voting page
   (index.php / tool.js) still uses it for its My Settings / DS / CS tabs. */

/* Member voting page tabs (My Settings / Desert Storm / Canyon Storm). */
.dsv-tabs {
    display: flex;
    gap: 0.25rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 1.25rem;
}
.dsv-tab {
    background: transparent;
    border: 1px solid transparent;
    border-bottom: none;
    padding: 0.55rem 1.1rem;
    font: inherit;
    font-weight: 600;
    color: var(--text-secondary);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    cursor: pointer;
    margin-bottom: -1px;
}
.dsv-tab:hover { color: var(--text-primary); }
.dsv-tab.is-active {
    color: var(--accent);
    border-color: var(--border);
    background: var(--bg-card);
    border-bottom-color: var(--bg-card);
}
.dsv-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.dsv-claim-code-sm {
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    letter-spacing: 0.08em;
    user-select: all;
}

/* Server-rendered initial-view gate. All panels are hidden by default; the one
   whose data-tab matches [data-dsv-view] (set by the inline script in admin.php)
   is the only one revealed. The sub-tab strip only appears in event views. */
.dsv-tab-panel                                                 { display: none; }
[data-dsv-view="alliance"] .dsv-tab-panel[data-tab="alliance"] { display: block; }
[data-dsv-view="players"]  .dsv-tab-panel[data-tab="players"]  { display: block; }
[data-dsv-view="roster"]   .dsv-tab-panel[data-tab="roster"]   { display: block; }
[data-dsv-view="map"]      .dsv-tab-panel[data-tab="map"]      { display: block; }
[data-dsv-view="settings"] .dsv-tab-panel[data-tab="settings"] { display: block; }
/* Member voting page event panels. */
[data-dsv-view="ds"]       .dsv-tab-panel[data-tab="ds"]       { display: block; }
[data-dsv-view="cs"]       .dsv-tab-panel[data-tab="cs"]       { display: block; }
.dsv-tab-panel[hidden] { display: none !important; }

/* Anonymous sign-in (claim) code — monospace + spaced so it's easy to copy. */
.dsv-claim-code {
    font-family: ui-monospace, "SFMono-Regular", "Cascadia Code", Menlo, Consolas, monospace;
    font-size: 1.3rem;
    letter-spacing: 0.14em;
    user-select: all;
}
.dsv-codebox { margin-top: 1rem; }
.dsv-codebox[hidden] { display: none; }

/* Presence indicator — visible when more than one admin tab is editing.
   Roster changes from other admins auto-apply via a soft page reload; this
   banner just makes concurrent editors aware of each other to avoid stepping
   on each other's drags. */
.dsv-presence {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: rgba(127, 182, 232, 0.10);
    border: 1px solid rgba(127, 182, 232, 0.4);
    color: #7fb6e8;
    border-radius: var(--radius-md);
    padding: 0.5rem 0.85rem;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    font-weight: 600;
}
.dsv-presence[hidden] { display: none; }
.dsv-presence-dot {
    width: 0.55rem;
    height: 0.55rem;
    background: #7fb6e8;
    border-radius: 50%;
    flex-shrink: 0;
    animation: dsv-presence-pulse 1.8s ease-out infinite;
}
@keyframes dsv-presence-pulse {
    0%   { box-shadow: 0 0 0 0    rgba(127, 182, 232, 0.55); }
    70%  { box-shadow: 0 0 0 10px rgba(127, 182, 232, 0);    }
    100% { box-shadow: 0 0 0 0    rgba(127, 182, 232, 0);    }
}

/* Member banners (existing-vote summary + published assignment) */
.dsv-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem 0.6rem;
    background: var(--bg-base);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-md);
    padding: 0.7rem 0.9rem;
    margin-bottom: 0.75rem;
}
.dsv-banner-label { color: var(--text-secondary); font-size: 0.9rem; }
.dsv-banner strong { color: var(--accent); font-size: 1.05rem; }
.dsv-banner small { font-size: 0.85rem; }
.dsv-banner-assignment {
    border-left-color: #6fbf73;
    background: rgba(111, 191, 115, 0.08);
}
.dsv-banner-assignment strong { color: #6fbf73; }
.dsv-banner-voted { border-left-color: var(--accent); }
.dsv-banner-waitlist {
    border-left-color: #f5b651;
    background: rgba(245, 182, 81, 0.08);
}
.dsv-banner-waitlist strong { color: #f5b651; }
.dsv-banner-waitlist .dsv-banner-label { color: var(--text-secondary); }

.dsv-lock {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 1rem;
}
.dsv-lock strong { color: var(--text-primary); }
.dsv-lock-closed {
    color: #e8736a;
    background: rgba(232, 115, 106, 0.1);
    border: 1px solid rgba(232, 115, 106, 0.4);
    border-radius: var(--radius-md);
    padding: 0.6rem 0.8rem;
    font-weight: 600;
}

/* Settings helpers */
.dsv-sep {
    border: 0;
    border-top: 1px solid var(--border);
    margin: 1.5rem 0;
}
.dsv-subhead { margin-bottom: 0.4rem; font-size: 1.05rem; }
.dsv-field-row {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.dsv-field select {
    background: var(--bg-base);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    padding: 0.6rem 0.75rem;
    font: inherit;
    width: 100%;
}
.dsv-field input[type="time"] {
    background: var(--bg-base);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    padding: 0.6rem 0.75rem;
    font: inherit;
    width: 100%;
    color-scheme: dark;
}

/* Roster builder */
.dsv-roster-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}
.dsv-roster-actions { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.dsv-pub-state {
    font-size: 0.85rem;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    color: var(--text-muted);
    background: var(--bg-base);
}
.dsv-pub-state.is-published {
    color: #6fbf73;
    border-color: rgba(111, 191, 115, 0.4);
    background: rgba(111, 191, 115, 0.1);
}

/* Roster builder name filter */
.dsv-builder-filter {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}
.dsv-filter-field {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex: 1 1 240px;
    max-width: 360px;
    padding: 0.35rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg-base);
    transition: border-color 120ms ease;
}
.dsv-filter-field:focus-within { border-color: var(--accent); }
.dsv-filter-icon { font-size: 0.85rem; opacity: 0.7; line-height: 1; }
.dsv-filter-input {
    flex: 1;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 0.9rem;
    outline: none;
    min-width: 0;
}
.dsv-filter-input::placeholder { color: var(--text-muted); }
/* Hide the browser's native search-clear control; we render our own. */
.dsv-filter-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.dsv-filter-clear {
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.85rem;
    line-height: 1;
    padding: 0.1rem 0.25rem;
    border-radius: 999px;
}
.dsv-filter-clear:hover { color: var(--text-primary); }
.dsv-filter-count {
    font-size: 0.82rem;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

/* While filtering: dim non-matches, lift matches so positions pop. */
.dsv-builder.is-filtering .dsv-player-card.is-filter-miss { opacity: 0.28; }
.dsv-builder.is-filtering .dsv-player-card.is-filter-hit {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent);
}

.dsv-builder {
    display: grid;
    grid-template-columns: repeat(5, minmax(190px, 1fr));
    gap: 0.6rem;
    margin-top: 1rem;
    overflow-x: auto;
    padding-bottom: 0.4rem;
}
@media (max-width: 1100px) {
    .dsv-builder { grid-template-columns: repeat(3, minmax(200px, 1fr)); }
}
@media (max-width: 640px) {
    .dsv-builder { grid-template-columns: repeat(2, minmax(160px, 1fr)); }
}

.dsv-builder-stack {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    min-width: 0;
}
.dsv-builder-stack .dsv-builder-col {
    min-height: 120px;
}

.dsv-builder-col {
    background: var(--bg-base);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    min-height: 200px;
    transition: border-color 120ms ease, background 120ms ease;
}
.dsv-builder-col.is-drop-target {
    border-color: var(--accent);
    background: var(--accent-dim);
}
.dsv-col-alt    { background: color-mix(in srgb, var(--bg-base) 92%, var(--accent) 8%); }
.dsv-col-misc   { background: color-mix(in srgb, var(--bg-base) 95%, var(--text-muted) 5%); }

.dsv-builder-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.7rem;
    border-bottom: 1px solid var(--border);
    font-size: 0.9rem;
}
.dsv-builder-title { font-weight: 600; color: var(--text-primary); }
.dsv-builder-count {
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
    font-size: 0.85rem;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    background: var(--bg-card);
}
.dsv-builder-head.is-over { color: #e8736a; }
.dsv-builder-head.is-over .dsv-builder-count {
    color: #e8736a;
    background: rgba(232, 115, 106, 0.15);
}

.dsv-builder-list {
    list-style: none;
    margin: 0;
    padding: 0.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    flex: 1;
}

.dsv-player-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 0.5rem 0.6rem;
    cursor: grab;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    user-select: none;
}
.dsv-player-card:active { cursor: grabbing; }
.dsv-player-card.is-dragging { opacity: 0.5; }
.dsv-player-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.4rem;
}
.dsv-player-name { font-weight: 600; color: var(--text-primary); }
.dsv-player-manual { color: var(--accent); font-size: 0.9rem; }
.dsv-player-conflict { color: #f5b651; font-size: 0.95rem; cursor: help; }
.dsv-player-card.is-conflict {
    border-color: rgba(245, 182, 81, 0.55);
    box-shadow: inset 3px 0 0 #f5b651;
}
.dsv-player-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    font-size: 0.8rem;
    color: var(--text-secondary);
}
.dsv-player-power { font-variant-numeric: tabular-nums; }
.dsv-vote-chip {
    font-size: 0.75rem;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background: var(--bg-base);
    border: 1px solid var(--border);
    color: var(--text-muted);
}
.dsv-vote-a      { color: #7fb6e8; border-color: rgba(127, 182, 232, 0.4); }
.dsv-vote-b      { color: #d59ce8; border-color: rgba(213, 156, 232, 0.4); }
.dsv-vote-either { color: var(--accent); border-color: var(--border-accent); }
.dsv-vote-a_alt  { color: #7fb6e8; border-color: rgba(127, 182, 232, 0.4); opacity: 0.85; }
.dsv-vote-b_alt  { color: #d59ce8; border-color: rgba(213, 156, 232, 0.4); opacity: 0.85; }
.dsv-vote-none   { color: var(--text-muted); }
.dsv-vote-novote { color: var(--text-muted); font-style: italic; }
/* Waiting badge: amber, matches the conflict / waitlist accent. Marks a player
   who wanted a main slot but was benched in a prior week — rotate in first. */
.dsv-vote-wait {
    color: #f5b651;
    border-color: rgba(245, 182, 81, 0.5);
    background: rgba(245, 182, 81, 0.08);
}
/* Previous-week vote: same hue as its choice class, but dimmed + dashed so it
   reads as historical context next to the current "voted:" chip. */
.dsv-vote-prev { border-style: dashed; opacity: 0.7; }

.dsv-player-tools { display: flex; gap: 0.3rem; margin-top: 0.2rem; }
.dsv-mini {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    border-radius: var(--radius-sm, 6px);
    padding: 0.15rem 0.5rem;
    font-size: 0.75rem;
    cursor: pointer;
    font-family: inherit;
}
.dsv-mini:hover { color: var(--text-primary); border-color: var(--border-accent); }
.dsv-mini.dsv-btn-danger {
    color: #e8736a;
    border-color: rgba(232, 115, 106, 0.4);
    background: transparent;
}
.dsv-mini.dsv-btn-danger:hover { background: rgba(232, 115, 106, 0.15); }

/* "Manager" pill next to a player's name in the admin roster table. */
.dsv-manager-badge {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--accent, #e8932a);
    border: 1px solid var(--border-accent, rgba(232, 147, 42, 0.4));
    background: var(--accent-dim, rgba(232, 147, 42, 0.15));
    vertical-align: middle;
}
.dsv-manager-badge[hidden] { display: none; }

/* Group the per-row mini buttons (Regenerate / Drop, Approve / Deny). */
.dsv-row-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; }

/* Player administration: sortable column headers. */
.dsv-sort {
    background: none;
    border: 0;
    margin: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}
.dsv-sort:hover { color: var(--text-primary); }
.dsv-sort-ind { font-size: 0.7rem; }

/* Player administration: right-align the Edit / Regenerate / Drop actions. */
#dsv-players-table th:last-child,
#dsv-players-table td.dsv-row-actions { text-align: right; }
#dsv-players-table .dsv-row-actions { justify-content: flex-end; }

/* Alliance search-and-pick on the public apply form. */
.dsv-alliance-picker { position: relative; }
.dsv-alliance-results {
    list-style: none;
    margin: 0.25rem 0 0;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-card, var(--bg-base));
    max-height: 14rem;
    overflow-y: auto;
    position: absolute;
    left: 0;
    right: 0;
    z-index: 20;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.dsv-alliance-results li {
    padding: 0.55rem 0.75rem;
    cursor: pointer;
    color: var(--text-primary);
}
.dsv-alliance-results li:hover,
.dsv-alliance-results li:focus { background: var(--bg-card-hover); outline: none; }
.dsv-alliance-results li.dsv-no-results {
    color: var(--text-muted);
    cursor: default;
    font-style: italic;
}

/* "You've applied to…" list on the landing page. */
.dsv-app-list { list-style: none; margin: 0.5rem 0 0; padding: 0; }
.dsv-app-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border);
}
.dsv-app-list li:last-child { border-bottom: 0; }

/* Team power statistics (admin roster panel). */
.dsv-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.75rem;
    margin: 1rem 0;
}
.dsv-stat-card {
    background: var(--bg-base);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 0.8rem;
}
.dsv-stat-card.dsv-stat-a_alt,
.dsv-stat-card.dsv-stat-b_alt {
    background: color-mix(in srgb, var(--bg-base) 92%, var(--accent) 8%);
}
.dsv-stat-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
}
.dsv-stat-team { font-weight: 700; color: var(--text-primary); }
.dsv-stat-players { color: var(--text-muted); font-size: 0.85rem; white-space: nowrap; }
.dsv-stat-rows { display: flex; flex-direction: column; gap: 0.35rem; }
.dsv-stat-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
}
.dsv-stat-label { color: var(--text-secondary); font-size: 0.85rem; }
.dsv-stat-value { font-weight: 700; color: var(--accent); }
.dsv-stat-row-sub .dsv-stat-label,
.dsv-stat-value-sub { color: var(--text-muted); font-size: 0.8rem; }

.dsv-stats-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* --- Mobile: member voting interface (My Settings / DS / CS) -------------
   Most players reach this on a phone, so the member-facing surfaces need to
   stay comfortable at ~360px. (The admin roster builder is PC-oriented and
   keeps its own wider-screen layout above.) */
@media (max-width: 640px) {
    /* Tab strip: keep it on a single line and scroll horizontally rather than
       overflow-clip or break the shared underline. */
    .dsv-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .dsv-tabs::-webkit-scrollbar { display: none; }
    .dsv-tab {
        flex: 0 0 auto;
        white-space: nowrap;
        min-height: 44px;             /* comfortable touch target */
        padding: 0.55rem 0.9rem;
    }

    /* Bigger tap targets for the choice rows and primary actions. */
    .dsv-btn { min-height: 44px; }
    .dsv-choice { padding: 0.7rem 0.85rem; }
    .dsv-form > .dsv-actions .dsv-btn-primary { flex: 1 1 100%; }
}
.dsv-stat-pill {
    flex: 1 1 160px;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    background: var(--bg-base);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 0.6rem 0.8rem;
}
.dsv-stat-pill.dsv-stat-gap { border-color: var(--border-accent); }
.dsv-stat-pill .dsv-stat-value { color: var(--text-primary); }
.dsv-stat-pill.dsv-stat-gap .dsv-stat-value { color: var(--accent); }