/* Paddle V0.1 Harness 0.2.4A.1 — runtime UX and adaptive venue display; V1.2 hardening. */

/* Director hierarchy / collapsed operational sections */
.compact-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    min-height: 44px;
    padding: .62rem .72rem;
    border: 1px solid var(--border);
    border-radius: .85rem;
    background: var(--surface-soft);
    color: var(--muted);
    font-size: .84rem;
}
.compact-summary strong { color: var(--text); }
.panel.runtime-collapsed { padding: .7rem .85rem; }
.panel.runtime-collapsed .section-head,
.panel.runtime-collapsed .runtime-collapsible-body { display: none; }
.panel.runtime-collapsed .compact-summary { display: flex !important; }
.setup-summary-toggle {
    cursor: pointer;
    user-select: none;
}
.setup-summary-toggle:hover {
    border-color: currentColor;
}
.setup-summary-toggle:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}
.setup-summary-action {
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.runtime-primary-panel { box-shadow: 0 12px 32px rgba(6,18,11,.12); border-color: #c9dbce; }
.runtime-ready-summary { gap: .5rem; flex-wrap: wrap; }
.accepted-result-summary {
    margin-top: .7rem;
    padding: .65rem .75rem;
    border: 1px solid #cfe6d5;
    background: var(--surface-green);
    border-radius: .8rem;
    color: var(--green-deep);
    font-weight: 800;
}
.score-entry-hidden { display: none !important; }
.score-issue-block { margin-top: .7rem; }

/* Big Display: deterministic team rows + adaptive court density. */
.display-shell { height: 100vh; overflow: hidden; display: flex; flex-direction: column; }
.display-head { flex: 0 0 auto; }
.display-grid {
    flex: 1 1 auto;
    min-height: 0;
    align-content: stretch;
    grid-auto-rows: minmax(0, 1fr);
}
.display-card {
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.display-card h2 { margin: .18rem 0 .65rem; }
.display-match-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(70px, 8vw, 150px) minmax(0, 1fr);
    gap: clamp(.5rem, 1.2vw, 1.2rem);
    align-items: center;
    min-width: 0;
}
.display-team-stack {
    display: grid;
    gap: .34em;
    min-width: 0;
}
.display-team-stack.right { text-align: right; }
.display-player-name {
    min-width: 0;
    font-weight: 820;
    line-height: 1.08;
    overflow-wrap: anywhere;
}
.display-score-anchor {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 1.2em;
    color: var(--green-dark);
    font-weight: 950;
    font-size: clamp(1.6rem, 3.4vw, 4.2rem);
    letter-spacing: -.05em;
    white-space: nowrap;
}
.display-score-anchor.pending {
    font-size: clamp(.9rem, 1.5vw, 1.5rem);
    letter-spacing: .18em;
    color: #738078;
}

.display-grid.courts-1-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.display-grid.courts-3-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); }
.display-grid.courts-5-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); }
.display-grid.courts-7-8 { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); }
.display-grid.courts-9-plus { grid-template-columns: repeat(4, minmax(0, 1fr)); }

body.display-courts-1-2 .display-card { padding: clamp(1rem, 1.45vw, 1.55rem); }
body.display-courts-1-2 .display-player-name { font-size: clamp(1.05rem, 1.55vw, 1.9rem); }
body.display-courts-3-4 .display-head h1 { font-size: clamp(2rem, 3.4vw, 3.8rem); }
body.display-courts-3-4 .display-card { padding: clamp(.75rem, 1vw, 1.1rem); }
body.display-courts-3-4 .display-player-name { font-size: clamp(.95rem, 1.25vw, 1.45rem); }
body.display-courts-5-6 .display-head,
body.display-courts-7-8 .display-head { padding-bottom: .7rem; }
body.display-courts-5-6 .display-head h1,
body.display-courts-7-8 .display-head h1 { font-size: clamp(1.65rem, 2.7vw, 3rem); }
body.display-courts-5-6 .display-grid,
body.display-courts-7-8 .display-grid { gap: clamp(.45rem, .8vw, .8rem); margin-top: clamp(.45rem, .8vw, .8rem); }
body.display-courts-5-6 .display-card,
body.display-courts-7-8 .display-card { padding: clamp(.55rem, .75vw, .8rem); border-radius: .9rem; }
body.display-courts-5-6 .display-card h2,
body.display-courts-7-8 .display-card h2 { margin-bottom: .38rem; font-size: clamp(.72rem, .9vw, 1rem); }
body.display-courts-5-6 .display-card .eyebrow,
body.display-courts-7-8 .display-card .eyebrow { font-size: clamp(.58rem, .65vw, .75rem); }
body.display-courts-5-6 .display-match-layout { grid-template-columns: minmax(0,1fr) clamp(52px, 5.2vw, 90px) minmax(0,1fr); gap: .45rem; }
body.display-courts-7-8 .display-match-layout { grid-template-columns: minmax(0,1fr) clamp(45px, 4.5vw, 74px) minmax(0,1fr); gap: .35rem; }
body.display-courts-5-6 .display-player-name { font-size: clamp(.72rem, .9vw, 1.02rem); }
body.display-courts-7-8 .display-player-name { font-size: clamp(.62rem, .76vw, .9rem); }
body.display-courts-5-6 .display-score-anchor { font-size: clamp(1.15rem, 2vw, 2.2rem); }
body.display-courts-7-8 .display-score-anchor { font-size: clamp(1rem, 1.6vw, 1.8rem); }
body.display-courts-5-6 footer,
body.display-courts-7-8 footer { margin-top: .45rem; font-size: .7rem; }

/* 0.2.4A.1 human visual refinement:
   keep 1–2 court boards substantial without stretching white cards through the entire TV. */
.display-grid.courts-1-2 {
    align-content: start;
    grid-auto-rows: clamp(230px, 34vh, 340px);
}

/* One active court is a valid runtime condition. It should use the available
   venue width without pretending a missing second court exists. */
.display-grid.courts-1-2 > .display-card:only-child {
    grid-column: 1 / -1;
    width: min(100%, 980px);
    justify-self: center;
}

body.display-courts-1-2 .display-card {
    min-height: 0;
}

/* Player is a phone-first surface: score first, then the two teams side-by-side. */
.player-body #playerMatch .teams {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
        "score score"
        "team-a team-b";
    align-items: start;
    gap: .55rem .65rem;
    margin: .7rem 0 .85rem;
}
.player-body #playerMatch .teams > .score {
    grid-area: score;
    justify-self: center;
    text-align: center;
    font-size: clamp(2rem, 11vw, 2.8rem);
    line-height: 1;
}
.player-body #playerMatch .teams > .team:first-child {
    grid-area: team-a;
    text-align: left;
}
.player-body #playerMatch .teams > .team:last-child {
    grid-area: team-b;
    text-align: right;
}
.player-body #playerMatch .teams > .team {
    min-width: 0;
    padding: .58rem .62rem;
    border: 1px solid var(--border);
    border-radius: .72rem;
    background: var(--surface-soft);
    font-size: .84rem;
    line-height: 1.18;
    overflow-wrap: anywhere;
}

@media (max-width: 980px) {
    .display-grid.courts-1-2,
    .display-grid.courts-3-4,
    .display-grid.courts-5-6,
    .display-grid.courts-7-8,
    .display-grid.courts-9-plus { grid-template-columns: 1fr; grid-template-rows: none; }
    .display-shell { height: auto; min-height: 100vh; overflow: visible; }
}

/* Americano pre-pilot tightening: venue sound control stays in header geometry. */
.display-head-controls {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    gap: .7rem;
    flex-wrap: wrap;
    min-width: 0;
}
.display-audio-control {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .2rem;
}
.display-audio-control button {
    min-height: 38px;
    padding: .42rem .7rem;
    border-radius: .7rem;
    border: 1px solid rgba(255,255,255,.28);
    background: rgba(255,255,255,.08);
    color: #fff;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}
.display-audio-control button.sound-enabled {
    border-color: rgba(117,220,151,.72);
    background: rgba(58,137,83,.24);
}
.display-audio-control small {
    color: rgba(238,243,239,.72);
    font-size: .68rem;
}
@media (max-width: 980px) {
    .display-head-controls { align-items: flex-start; justify-content: flex-start; }
    .display-audio-control { align-items: flex-start; }
}