/* Shared app presentation. Club colours remain owned by applyClubTheme(). */
:root {
  --mirelion-paper: #f7f7f0;
  --mirelion-surface: #fffefa;
  --mirelion-forest: #173d32;
  --mirelion-sage: #edf1e2;
  --mirelion-clay: #934a34;
  --mirelion-clay-soft: #f2eae0;
  --mirelion-display: Georgia, "Times New Roman", serif;
  --ink: #193d33;
  --text: var(--ink);
  --muted: #57665b;
  --line: #d5dbcf;
  --bg: var(--mirelion-paper);
  --soft: #f0f2e7;
  --primary: var(--navy);
  --cb-shadow: 0 2px 8px rgb(23 61 50 / 4%);
  --cb-focus: #426db2;
}

#app {font-size:15px;line-height:1.5;color:var(--ink)}
#app .shell {max-width:1440px;background:var(--bg);box-shadow:none}
#app .page {padding:16px 20px 28px}
#app :is(h1,h2,h3,h4) {color:inherit}
#app h1 {margin:0 0 10px;letter-spacing:-.025em!important}
#app h2 {margin:0 0 8px}
#app :is(p,li) {line-height:1.55}
#app :is(.help,.se-muted,.social-small,.team-review-meta,.team-review-row-status) {font-size:13px;line-height:1.5;color:var(--muted)}
#app :is(.help,.status,.se-notice,.social-notice):empty {display:none}
#app .section-label {font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--muted)}
#app :is(.card,.admin-card,.se-card,.st-panel,.season-stats) {border:1px solid var(--line);border-radius:10px;background:var(--mirelion-surface);padding:12px;box-shadow:var(--cb-shadow)}
#app .card + .card {margin-top:10px}
#app .grid {gap:12px}
#app .page p {margin-top:6px;margin-bottom:8px}
#app .club-preparation {padding:10px 12px;border-radius:10px}
#app .club-preparation-heading {gap:8px;margin-bottom:10px}
#app .club-setup-progress {gap:6px;margin:8px 0}
#app .club-setup-progress button {min-height:44px;padding:8px 10px}
#app .club-home-next {margin-top:10px}
#app :is(.club-round-review,.setup-commercial) {margin-top:10px!important}
#app :is(.notice,.identity-summary,.committee-summary,.handoff-box) {border-radius:10px;font-size:13px;line-height:1.5}

/* Draft recovery belongs to the match section, without a global alert. */
#app .match-draft-list {margin:12px 0;font-size:13px;color:var(--muted)}
#app .match-draft-list>summary {cursor:pointer;min-height:44px;align-content:center}
#app .match-draft-list .btnrow {margin:4px 0}
#app .match-draft-list [role="status"]:empty {display:none}
#app .match-draft-recovery {border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin:10px 0;background:var(--mirelion-surface);font-size:13px}
#app .match-draft-recovery p {margin:4px 0}
#app .match-draft-recovery .btnrow {margin:6px 0 0}
#app .se-team-change {margin:6px 0 10px;font-size:13px;line-height:1.5;color:var(--ink)}

/* Accessible labels should not repeat themselves above every player control. */
.sr-only {position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}

/* A compact club identity, followed by quiet, consistent navigation. */
#app .compact-club-header.hero {background:var(--mirelion-surface);color:var(--ink);border-top:4px solid var(--navy);padding:8px 20px}
#app .compact-club-header .topline {gap:8px}
#app .compact-club-header .club-header-name {font-size:20px;font-weight:700;letter-spacing:-.02em}
#app .compact-club-header .shell-club-logo {width:36px;height:36px;min-width:36px;flex:0 0 36px;padding:0;background:var(--mirelion-surface);border:0;border-radius:0;box-shadow:none}
#app .compact-club-header .header-actions {align-items:center;gap:12px}
#app .compact-club-header .context-switcher {width:210px;flex-basis:210px}
#app .compact-club-header .context-switcher-label {font-size:12px;font-weight:500;color:var(--muted)}
#app .compact-club-header .context-switch {border-color:var(--line);font-size:14px;font-weight:500;color:var(--ink)}
#app .account-controls {flex-direction:row;align-items:center;gap:10px}
#app .platform-admin-link {min-height:44px;font-weight:500;font-size:12px;color:inherit}
#app .account-menu-popover {border-color:var(--line);box-shadow:0 12px 36px rgb(25 42 64 / 14%);padding:8px}
#app .account-menu-action {font-size:14px;font-weight:500;min-height:44px}
#app .account-menu-identity span {font-size:12px}
#app .shell .nav {gap:4px;padding:0 24px;background:var(--mirelion-surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line);box-shadow:0 2px 4px rgb(25 42 64 / 2%)}
#app .shell .nav button {min-height:48px;padding:12px 10px;margin:0;border:0;border-bottom:3px solid transparent;border-radius:0;background:transparent;color:var(--muted);font-size:13px;font-weight:600;white-space:nowrap}
#app .shell .nav button.active {border-bottom-color:var(--navy);background:var(--club-soft);color:var(--ink)}
#app .shell .nav button[data-tab="guide"] {border:0;border-bottom:3px solid transparent;margin-left:auto;font-size:13px}
#app .shell .nav button[data-tab="guide"].active {border-bottom-color:var(--navy)}
#app .shell .nav .nav-group-start::before {display:none}

/* Primary action, supporting action and selected state each have one treatment. */
#app .btn {display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:10px 14px;border:1px solid transparent;border-radius:6px;background:var(--navy);color:var(--navy-contrast);font-size:13px;font-weight:650;line-height:1.35;text-decoration:none;transition:background-color .12s,border-color .12s,box-shadow .12s}
#app .btn:is(.secondary,.ghost) {background:var(--mirelion-surface);color:var(--ink);border-color:var(--line)}
#app .btn.danger {background:#a92c34;color:#fff;border-color:#a92c34}
#app .btnrow {gap:8px}
#app :is(button,a,summary,input,select,textarea):focus-visible {outline:3px solid var(--cb-focus);outline-offset:3px}
#app .btn:active:not(:disabled) {box-shadow:inset 0 0 0 2px rgb(255 255 255 / 35%);filter:brightness(.9)}
#app .btn:disabled {opacity:.5;cursor:default}
#app .btn[aria-busy="true"] {opacity:.8;cursor:progress}
#app .btn:is([aria-pressed="true"],[aria-expanded="true"],[aria-current="step"]) {background:var(--club-soft);color:var(--ink);border-color:var(--navy);box-shadow:inset 0 0 0 1px var(--navy)}
#app :is(.field label,.se-page label,.social-fields label) {font-size:13px;font-weight:600;color:var(--ink);line-height:1.4}
#app :is(input,textarea,select):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="hidden"]) {min-height:44px;border:1px solid #c5cdbf;border-radius:8px;background:var(--mirelion-surface);color:var(--ink);padding:10px 12px;font-size:15px;line-height:1.4;max-width:100%}
#app textarea {line-height:1.55;resize:vertical}
#app input:is([type="checkbox"],[type="radio"]) {accent-color:var(--navy);width:18px;height:18px;flex-shrink:0}
#app :is(input,select,textarea):disabled {background:var(--soft);color:var(--muted);opacity:1}
#app input::placeholder,#app textarea::placeholder {color:#738092;opacity:1}
#app .field {margin:8px 0}
#app .field label {margin-bottom:4px}

/* Section tabs share a visual grammar without turning every button into a tab. */
#app :is(.se-tabs,.social-tabs,.st-steps) {display:flex;gap:4px;margin:8px 0;padding:0;border-bottom:1px solid var(--line)}
#app :is(.se-tabs,.social-tabs,.st-steps) .btn {background:transparent;border-color:transparent;color:var(--muted);box-shadow:none;min-height:44px}
#app :is(.se-tabs,.social-tabs,.st-steps) .btn:is([aria-pressed="true"],[aria-current="step"],.active) {background:var(--club-soft);border-color:transparent;color:var(--ink);box-shadow:inset 0 -2px 0 var(--navy)}

/* Selection Board: a clear team sheet, with colour reserved for useful status. */
#app .se-page {max-width:none}
#app .se-top {gap:16px;margin-bottom:6px}
#app .se-top h1 {margin:0}
#app .se-toolbar {align-items:end;gap:8px;margin:10px 0 8px}
#app .se-toolbar>label {min-width:200px}
#app .se-toolbar #sePublish {margin-left:auto}
#app .se-order-help {margin:8px 0;font-size:12px}
#app .se-board-layout>.se-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:10px 0}
#app .se-card[data-se-team] {padding:12px;border-top:3px solid var(--navy);overflow-wrap:anywhere}
#app .se-team-compact-head>div {align-items:flex-start;gap:10px;flex-wrap:wrap}
#app .se-team-compact-head h2 {font-size:19px!important;letter-spacing:-.02em!important;margin:0}
#app .se-team-head {padding-bottom:12px;border-bottom:1px solid var(--line)}
#app .se-team-head p {font-size:13px;line-height:1.5;color:var(--muted);margin-top:7px}
#app .se-team-fixture-head {display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;align-items:start}
#app .se-team-fixture-head>.se-team-title {display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0}
#app .se-team-fixture-head>.se-team-title h2 {margin:0}
#app .se-team-fixture-head>p {grid-column:1/-1;margin:0}
#app .se-fixture-details {padding:8px 10px;text-align:left;align-self:start;white-space:nowrap}
#app .se-fixture-details>span>span {display:block}
#app .se-team-state {display:inline-block;border-radius:5px;padding:3px 7px;font-size:12px;font-weight:500;line-height:1.4;color:#526071;background:var(--soft);text-align:left;max-width:100%}
#app [data-team-state="published"] .se-team-state {background:#edf5f0;color:#32624a}
#app [data-team-state="changed"] .se-team-state {background:#fff3dc;color:#7d5513}
#app [data-team-state="cancelled"] .se-team-state {background:#f9eeee;color:#91363b}
#app .se-counts {gap:5px;margin:12px 0}
#app .se-chip {background:var(--soft);color:var(--muted);font-size:12px;border-radius:5px;padding:4px 6px}
#app .se-chip.se-warn {background:#fff3dc;color:#7d5513}
#app .se-overflow-count {background:#fce8e5;color:#8e241d}
#app .se-fixture-lock {background:var(--soft);padding:8px 10px;margin:12px 0;align-items:center;flex-wrap:wrap}
#app .se-fixture-lock p {font-size:12px;color:var(--muted)}
#app .se-fixture-lock .btn {font-size:12px;padding:8px 10px}
#app .se-fixture-summary .se-top {align-items:flex-start;gap:8px;margin:0;flex-wrap:nowrap}
#app .se-fixture-title {min-width:0}
#app .se-fixture-title h2 {margin:0 0 2px}
#app .se-fixture-summary .se-top>.btn {flex-shrink:0}
#app .se-fixture-heading {line-height:1.4;overflow-wrap:anywhere}
#app .se-fixture-heading h3 {display:inline;margin:0}
#app .se-fixture-heading>span {font-size:12px;color:var(--muted);margin-left:8px}
#app .se-fixture-summary :is(.se-fixture-meta,.se-fixture-meeting) {margin:4px 0 0;overflow-wrap:anywhere}
#app .se-fixture-summary .se-fixture-lock {justify-content:flex-start;gap:4px 12px;background:none;border:0;border-radius:0;padding:0;margin:4px 0 0}
#app .se-fixture-summary .se-fixture-lock p {margin:0}
#app .se-fixture-summary .se-fixture-lock small {font-size:12px;color:var(--muted)}
#app .se-emergency-correction {border:0;background:none;margin:0;padding:0;color:var(--muted);font-size:12px}
#app .se-emergency-correction>summary {width:fit-content;min-height:44px;box-sizing:border-box;padding:12px 0;cursor:pointer;font-size:12px;font-weight:400}
#app .se-emergency-correction .btn {font-size:12px}
#app .se-calendar button[data-se-availability="unavailable"] {background:#fff0ee;border-color:#cb6c6c;color:#8e242b}
#app .se-availability-key {display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12px;color:var(--muted);margin:4px 0 10px}
#app .se-availability-key span:first-child {color:#154e32}
#app .se-availability-key span:nth-child(2) {color:#8e242b}
#app .se-match-roles {gap:10px;margin:12px 0}
#app .se-match-roles select {font-size:13px;min-height:44px!important;padding:8px!important}
#app .se-match-roles label {font-size:12px;font-weight:500;color:var(--muted)}
#app .se-slot {grid-template-columns:22px minmax(0,1fr) 44px;gap:6px;min-height:48px;padding:3px 0;border-bottom:1px solid #e9ecdf}
#app .se-slot-number {font-variant-numeric:tabular-nums;font-size:12px;color:var(--muted)}
#app .se-pick {min-height:44px;font-size:14px;line-height:1.4;color:var(--ink);padding:6px 4px}
#app .se-pick[aria-expanded="true"] {background:var(--club-soft);border-color:var(--navy);box-shadow:inset 0 0 0 1px var(--navy)}
#app .se-order-handle {color:#8190a0}
#app .se-role,#app .se-status,#app .se-day-caption {font-size:12px}
#app .se-card[data-se-team]>.se-actions {gap:6px;margin-top:14px!important}
#app .se-card[data-se-team]>.se-actions .btn {padding:8px 10px;font-size:12px}
#app .se-card>.se-actions:empty {display:none}
#app .se-board-comments {border-color:var(--line);margin-top:12px}
#app .se-board-comments>summary {font-size:13px;font-weight:600}
#app .se-board-chat>summary.btn {display:inline-flex;background:var(--club-soft);color:var(--ink);border-color:transparent;margin-top:0}
#app .se-board-chat[open]>summary.btn {border-color:var(--navy);box-shadow:inset 0 0 0 1px var(--navy);margin-bottom:10px}
#app .se-readonly-sheet>ol {list-style:none;counter-reset:team-position;padding:0;margin:12px 0}
#app .se-readonly-sheet>ol>li {counter-increment:team-position;position:relative;min-height:48px;padding:12px 0 12px 28px;border-bottom:1px solid #e9ecdf;font-size:14px;line-height:1.5}
#app .se-readonly-sheet>ol>li::before {content:counter(team-position);position:absolute;left:0;color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}
#app .se-card[data-se-team].se-team-overfull {border:2px solid #bc453b;background:#fffaf8}
#app .se-team-gap {border:2px solid #b86a00!important}
#app .se-conversation-toggle {font-size:13px;min-height:44px}
#app .se-picker {border-color:#c5cdbf;background:var(--soft);border-radius:10px;padding:10px}
#app .se-candidate {padding:12px 4px;font-size:14px}

/* Match Review: player, decision and score remain easy to scan together. */
#app .team-review-heading {gap:18px;align-items:flex-start}
#app .team-review-heading h1 {margin:0}
#app .team-review-heading .btnrow {margin:0}
#app .team-review-fields {gap:12px}
#app .team-review-table {width:100%;border-collapse:collapse;margin-top:8px}
#app .team-review-table th {padding:12px 10px;background:var(--soft);color:var(--muted);font-size:12px;font-weight:600;text-align:left;border-bottom:1px solid var(--line)}
#app .team-review-table td {padding:10px 8px;border-bottom:1px solid var(--line);vertical-align:top}
#app .team-review-player-link {font-size:15px;font-weight:650;line-height:1.45;color:var(--ink);text-decoration-color:#b4becb;text-underline-offset:4px;min-height:44px}
#app .team-review-meta {font-size:12px;margin-top:5px}
#app .team-review-options {gap:4px}
#app .team-review-option {min-height:44px;border:1px solid #c5cdbf;border-radius:7px;background:var(--mirelion-surface);color:var(--ink);font-size:13px;font-weight:600;line-height:1.3;padding:8px 10px}
#app .team-review-option[aria-pressed="true"] {background:var(--navy);color:var(--navy-contrast);border-color:var(--navy)}
#app .team-review-row-status {font-size:12px;margin:7px 0 0}
#app .team-review-saved {color:#397052}
#app .team-review-actions {gap:6px;margin-top:10px}
#app .team-review-actions .btn {font-size:12px;padding:8px 10px}
#app .match-review-score>strong {font-size:24px;line-height:1.25;font-weight:650;font-variant-numeric:tabular-nums;color:var(--ink)}
#app .match-review-score small {font-size:12px;line-height:1.5;margin-top:5px;color:var(--muted)}
#app .match-review-confirm {font-size:13px;min-height:44px;align-items:center;gap:8px}
#app .match-review-map-row {padding:14px 0;gap:16px;border-bottom:1px solid var(--line)}
#app .match-review-map-row p {margin:0;font-size:14px}
#app .match-review-map-row .btnrow {margin:0}
#app .team-review-footer {border-top:0;margin-top:16px;padding:0;gap:12px;align-items:center}

/* Player tools and administration use the same calm surfaces. */
#app .player-home-tile {background:var(--mirelion-surface);border:1px solid var(--line);border-top:3px solid var(--navy);border-radius:10px;padding:12px;box-shadow:var(--cb-shadow);color:var(--ink);min-height:0}
#app .player-home-tile>strong {color:var(--ink);font-weight:650}
#app .player-home-tile span {font-size:14px;line-height:1.5;color:var(--muted)}
#app .player-home-links {gap:10px}
#app :is(.plan-section-tile,.training-tool-tile,.training-disclosure,.innings-prep-section,.innings-reflection-options) {border-color:var(--line);border-radius:12px;box-shadow:none}
#app :is(.plan-section-tile,.training-disclosure,.innings-prep-section,.innings-reflection-options)>summary {min-height:44px;padding:10px 12px;background:var(--soft);color:var(--ink)}
#app .club-help-feature {padding:12px;background:var(--mirelion-surface);border:1px solid var(--line);border-left:3px solid var(--navy);box-shadow:none;gap:10px;margin:10px 0}
#app .club-help-feature p {font-size:14px;color:var(--muted)}
#app .platform-header {background:var(--mirelion-surface);color:var(--ink);border-top:4px solid var(--navy);border-bottom:1px solid var(--line)}
#app .platform-header :is(p,.section-label) {color:var(--muted)}
#app .platform-nav {gap:4px}
#app .platform-nav button {font-size:13px;font-weight:600;min-height:44px}
#app .platform-nav button.active {background:var(--club-soft);color:var(--ink)}
#app .admin-table :is(th,td) {font-size:13px;padding:8px;line-height:1.45}
#app .admin-table td strong {font-size:14px;font-weight:600}
#app .admin-table td small {font-size:12px}
#app .status-pill {font-size:12px;font-weight:600;padding:4px 8px}
#app :is(.active-club-row,.message-row) {padding:10px;border-color:var(--line)}
#app :is(.active-club-row,.message-row) strong {font-size:14px}
#app :is(.active-club-row,.message-row) small {font-size:12px}
#app .active-club-controls label {font-size:12px;text-transform:none;font-weight:500}

/* Social artwork itself is unchanged; the controls around it are simplified. */
#app :is(.social-card,.social-upload,.social-feature) {border-color:var(--line);border-radius:12px;background:var(--mirelion-surface);box-shadow:none}
#app .social-upload {padding:16px}
#app .social-fields {gap:12px}
#app .st-panel {margin:10px 0}
#app .st-review-heading {gap:14px}
#app .st-preview figcaption {font-size:13px;color:var(--muted)}
#app .ss-modes {gap:4px}
#app .ss-modes [aria-pressed="true"] {background:var(--club-soft);color:var(--ink);border-color:var(--navy)}
#app .ss-row {border-color:var(--line)}
#app .ss-row summary {padding:8px 2px;min-height:48px}
#app .ss-compare-row {gap:10px;padding:8px 0}
#app .ss-values strong {font-size:21px;font-weight:650;font-variant-numeric:tabular-nums}
#app .ss-compare-cell span {font-variant-numeric:tabular-nums}

@media (hover:hover) {
  #app .btn:hover:not(:disabled) {filter:brightness(.96)}
  #app .btn:is(.secondary,.ghost):hover:not(:disabled) {background:var(--soft);border-color:#a7b69a}
  #app .shell .nav button:hover {background:var(--soft);color:var(--ink)}
  #app .player-home-tile:hover {border-color:#a7b69a;box-shadow:0 5px 16px rgb(25 42 64 / 7%)}
}
@media (min-width:1320px) {
  #app .se-board-layout>.se-grid {grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
}
@media (max-width:1000px) {
  #app .page {padding:14px 16px 24px}
  #app .compact-club-header.hero {padding:8px 16px}
  #app .shell .nav {padding:0 12px}
  #app .team-review-table td {padding:8px}
}
@media (max-width:760px) {
  #app .team-review-table {display:block;margin-top:12px}
  #app .team-review-table tbody {display:block}
  #app .team-review-table tr[data-team-review-row] {display:grid;grid-template-columns:minmax(0,1fr);gap:6px;padding:10px 0;border-top:1px solid var(--line)}
  #app .team-review-table td {padding:0;border:0;min-width:0}
  #app .team-review-table td.match-review-score {background:var(--soft);padding:8px;border-radius:8px}
  #app .team-review-table td.match-review-score small {max-width:none}
  #app .team-review-table .team-review-section {padding:0;border:0}
  #app .team-review-table .team-review-section th {display:block;border:0;border-radius:6px}
  #app .team-review-table thead {display:none}
  #app .team-review-player-link {font-size:17px;text-align:left;padding:0;min-height:28px}
  #app .team-review-options {display:flex;flex-wrap:wrap}
  #app .team-review-option {flex:1 1 auto;min-width:48px;padding:9px 8px}
  #app .team-review-footer {align-items:stretch;flex-direction:column;gap:6px}
  #app .team-review-footer>.btn {width:100%}
  #app .team-review-footer>.help {margin:0}
}
@media (max-width:700px) {
  #app .page {padding:12px 10px 20px}
  #app {--cb-heading-page:25px}
  #app :is(.card,.admin-card,.st-panel,.season-stats) {padding:10px;border-radius:10px}
  #app .compact-club-header.hero {padding:8px 12px}
  #app .compact-club-header .topline {display:grid;grid-template-columns:minmax(0,1fr);gap:6px}
  #app .compact-club-header .shell-brand-lockup {flex:none;min-height:0;gap:8px}
  #app .compact-club-header .club-header-name {font-size:16px}
  #app .compact-club-header .header-actions {gap:8px;align-items:flex-end}
  #app .compact-club-header .context-switcher {flex:1 1 160px;width:auto;max-width:100%}
  #app .compact-club-header .context-switch {font-size:16px}
  #app .compact-club-header .context-switcher-label {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  #app .compact-club-header .context-switcher {gap:0;flex-basis:145px}
  #app .account-controls {margin-left:auto;gap:8px;flex-wrap:wrap}
  #app .shell .nav {flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;padding:0 8px;scroll-padding:8px;scrollbar-width:thin;scrollbar-color:#b9c3cf transparent;overscroll-behavior-x:contain}
  #app .shell .nav button {flex:0 0 auto;max-width:none;white-space:nowrap;padding:12px 10px}
  #app .shell .nav button[data-tab="guide"] {margin-left:0}
  #app :is(input,textarea,select):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="hidden"]) {font-size:16px}
  #app :is(.se-tabs,.social-tabs) {flex-wrap:nowrap;overflow-x:auto;gap:2px;scrollbar-width:thin}
  #app :is(.se-tabs,.social-tabs) .btn {flex:0 0 auto;white-space:nowrap}
  #app .se-top {align-items:flex-start;gap:12px}
  #app .se-top>.se-actions {gap:6px}
  #app .se-top>.se-actions .btn {font-size:12px;padding:8px 10px}
  #app .se-toolbar {gap:6px;margin-top:8px}
  #app .se-toolbar>label {flex-basis:100%}
  #app .se-toolbar #sePublish {margin-left:0}
  #app .se-board-layout>.se-grid {grid-template-columns:minmax(0,1fr);gap:10px}
  #app .se-card[data-se-team] {padding:10px}
  #app .se-match-roles select {font-size:16px}
  #app .se-slot {min-height:50px}
  #app .se-pick {font-size:15px}
  #app .match-review-map-row {grid-template-columns:minmax(0,1fr);gap:12px}
  #app .match-review-map-row .btnrow {gap:8px}
  #app .player-home-tile {padding:12px;min-height:0}
  #app .platform-page {padding:16px 14px 32px}
  #app .platform-header {padding:16px}
  #app .ss-compare-row {gap:8px}
}

/* Read the shared scorecard here; no Match Review subscription is required. */
#app .fr-scores {margin:8px 0}
#app .fr-result {font-weight:600}
#app .fr-team-scores {border-top:1px solid var(--line)}
#app .fr-team-scores>summary {display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:44px;padding:6px 0;cursor:pointer;list-style:none}
#app .fr-team-scores>summary::-webkit-details-marker {display:none}
#app .fr-team-scores>summary strong::before {content:'▸ ';color:var(--muted)}
#app .fr-team-scores[open]>summary strong::before {content:'▾ '}
#app .fr-team-scores>summary span {font-weight:650;font-variant-numeric:tabular-nums;white-space:nowrap}
#app .fr-table-wrap {max-width:100%;overflow-x:auto}
#app .fr-score-table {width:100%;table-layout:fixed;border-collapse:collapse;font-size:13px;font-variant-numeric:tabular-nums}
#app .fr-score-table caption {text-align:left;font-weight:650;padding:6px 0}
#app .fr-score-table :is(th,td) {padding:6px clamp(4px,1vw,12px);text-align:right;border-bottom:1px solid var(--line)}
#app .fr-score-table th:first-child {text-align:left;width:44%;font-weight:500;overflow-wrap:anywhere}
#app .fr-score-table thead th:last-child {width:14%}
#app .fr-score-table :is(th,td):not(:first-child) {white-space:nowrap;overflow-wrap:normal}
#app .fr-score-table thead th {font-size:12px;color:var(--muted);font-weight:600}
#app .fr-score-table small {display:block;font-size:11px;color:var(--muted);font-weight:400;line-height:1.35}
#app .fr-total {font-size:12px;text-align:right;color:var(--muted);margin:4px 0 8px}
@media (max-width:480px) {
  #app .fr-score-table {font-size:12px}
  #app .fr-score-table :is(th,td) {padding:6px 2px}
  #app .fr-score-table th:first-child {width:32%}
  #app .fr-score-table thead th:nth-child(2) {width:14%}
  #app .fr-score-table thead th:last-child {width:20%}
}
#app .completed-club-setup>summary {display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px;cursor:pointer;font-weight:600;list-style:none}
#app .completed-club-setup>summary::after {content:'▾';color:var(--muted)}
#app .completed-club-setup[open]>summary::after {content:'▴'}
@media (prefers-reduced-motion:reduce) {
  #app .btn,#app .player-home-tile {transition:none}
}
@media print {
  #app .shell,#app .page {background:#fff;max-width:none;box-shadow:none}
  #app .page {padding:0}
  #app :is(.se-card,.card) {box-shadow:none;break-inside:avoid}
  #app :is(.se-order-help,.se-toolbar,.se-tabs,.se-top>.se-actions) {display:none}
}

/* One compact phone scale for every app screen and its dialogs. */
@media(max-width:700px) {
  :is(#app,dialog,[role="dialog"]) {--cb-heading-page:22px;--cb-heading-section:17px;--cb-heading-subsection:15px;--cb-heading-detail:14px}
  #app {font-size:14px;line-height:1.45}
  #app :is(h1,h2,h3,h4) {margin-top:0;margin-bottom:6px}
  #app :is(.page,.platform-page) {padding:6px 10px 20px}
  #app :is(.card,.admin-card,.st-panel,.season-stats) {padding:8px;border-radius:8px}
  #app .card+.card {margin-top:8px}
  #app :is(.grid,.form-grid,.workshop-grid,.se-form-grid,.social-fields) {gap:8px}
  #app :is(.btnrow,.se-actions,.social-actions,.st-actions) {gap:4px}
  #app .btnrow {margin-top:6px}
  #app .btn {min-height:44px;padding:6px 8px;border-radius:6px;font-size:12px;font-weight:600}
  #app .field {margin:6px 0}
  #app :is(.field label,.se-page label,.social-fields label) {font-size:12px;margin-bottom:3px}
  #app :is(.help,.se-muted,.social-small,.team-review-meta,.team-review-row-status) {font-size:12px;line-height:1.4}
  #app .page p {margin-top:4px;margin-bottom:6px}
  #app :is(.notice,.club-preparation,.match-draft-recovery,.active-club-row,.message-row) {padding:8px}
  #app :is(.train-hero,.feedback-hero,.hwb-public-hero,.player-home-hero,.guide-hero,.club-help-feature,.prospect-hero,.call-page-header) {padding:12px!important;gap:8px}
  #app .platform-header {padding:10px}
  #app .player-home-tile {padding:8px;border-top-width:2px;min-height:44px}
  #app .player-home-tile span {font-size:13px;line-height:1.4}
  #app :is(.train-format-accordion>summary,.training-tool-tile,.setup-collapsible>summary,.plan-section-tile>summary,.training-disclosure>summary,.innings-prep-section>summary,.innings-reflection-options>summary) {min-height:44px;padding-top:6px!important;padding-bottom:6px!important}
  #app .team-review-player-link {font-size:15px;min-height:44px}
  #app .team-review-table tr[data-team-review-row] {padding:6px 0;gap:4px}
  #app .match-review-score>strong {font-size:20px}
  #app .ss-values strong {font-size:18px}
  #app .account-menu-action {font-size:13px;padding:6px 8px}
  /* Keep native fields at 16px to avoid focus zoom on iPhone. */
  #app :is(input,textarea,select):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="hidden"]) {font-size:16px;min-height:44px;padding:6px 8px}
}

/* Phone selection workspace: show the teams before the occasional tools. */
#app .club-menu-toggle,#app .se-section-toggle {display:none}
#clubCallControls:empty {display:none}
#app #clubCallControls .sr-call-return {min-height:44px;margin:4px 0 0;padding:6px 10px;font-size:13px}
#app .se-page-header {display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 10px;margin-bottom:6px}
#app .se-page-heading {min-width:0}
#app .se-page-heading h1 {margin:0;font-size:24px}
#app .se-page-header .se-tabs {grid-column:1/-1;margin:0}
#app .se-page-tools {gap:6px;position:relative}
#app .se-more {position:static}
#app .se-more>summary {list-style:none;cursor:pointer;user-select:none}
#app .se-more>summary::-webkit-details-marker {display:none}
#app .se-more>summary::marker {content:''}
#app .se-more-body {position:absolute;z-index:40;right:0;top:calc(100% + 4px);width:min(300px,calc(100vw - 24px));box-sizing:border-box;padding:8px;border:1px solid var(--line);border-radius:8px;background:var(--mirelion-surface);box-shadow:0 8px 24px rgb(25 42 64 / 14%);display:grid;gap:2px;max-height:65vh;overflow-y:auto}
#app .se-board-extras {display:grid;gap:2px}
#app .se-more-body .btn {justify-content:flex-start;text-align:left;width:100%;border-color:transparent;padding:6px 8px;font-size:13px}
#app .se-more-body .se-check {padding:0 8px;margin:0;font-size:13px;font-weight:500;white-space:normal}
#app .se-more-body .cw-tools {display:grid;gap:2px;margin:0}
#app .se-more-body .se-publication-responsibility {margin:0;padding:0;border:0;background:transparent}
#app .se-more-body .se-publication-responsibility .se-actions {width:100%}
#app .se-more-body .se-order-help {font-size:12px;line-height:1.4;margin:4px 8px}
#app .se-board-toolbar {align-items:center;margin:4px 0;gap:6px}
#app .se-board-toolbar>.se-board-date {display:flex;align-items:center;gap:6px;min-width:0;width:auto;flex:0 1 auto;font-size:12px;font-weight:500}
#app .se-board-date #seBoardDate {width:auto;max-width:100%;margin:0;padding:6px 8px}

@media(max-width:700px) {
  #app .compact-club-header.hero {padding:4px 10px;border-top-width:3px}
  #app .compact-club-header .topline {display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:4px 8px}
  #app .compact-club-header .shell-brand-lockup {flex:1 1 0;min-width:0;gap:7px}
  #app .compact-club-header .shell-club-logo {width:26px;height:26px;min-width:26px;flex-basis:26px}
  #app .compact-club-header .club-header-name {font-size:15px;line-height:1.25}
  #app .club-menu-toggle {display:inline-flex;flex:0 0 auto;padding:6px 9px;font-size:13px;border-color:transparent}
  #app .shell:not(.club-menu-open) #clubHeaderActions,#app .shell:not(.club-menu-open) #clubMainNav {display:none}
  #app .club-menu-open #clubHeaderActions {display:flex;flex:1 0 100%;width:100%;gap:6px;padding:4px 0;border-top:1px solid var(--line)}
  #app .club-menu-open #clubMainNav {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible;padding:4px 8px;gap:2px}
  #app .club-menu-open #clubMainNav button {min-height:44px;white-space:normal;text-align:left;padding:6px 8px;font-size:13px}
  #app .club-menu-open #clubMainNav button[data-tab="guide"] {margin:0}
  #app .compact-club-header .header-actions .btn {padding:6px 8px;font-size:12px}
  #app .compact-club-header .account-controls {margin-left:0;gap:6px}
  #app .page {padding:6px 10px 20px}
  #app .se-page-header {grid-template-columns:minmax(0,1fr);gap:2px;margin-bottom:4px}
  #app .se-page-heading h1 {position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%)}
  #app .se-section-toggle {display:inline-flex;justify-content:space-between;gap:10px;max-width:100%;min-height:44px;border:0;background:transparent;padding:4px 0;font-size:18px;font-weight:650}
  #app .se-page-header .se-tabs {display:none;grid-row:2}
  #app .se-page-header .se-tabs.se-sections-open {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;overflow:visible;padding-bottom:4px}
  #app .se-page-header .se-tabs .btn {min-width:0;white-space:normal;text-align:left;justify-content:flex-start;font-size:13px;padding:6px 8px}
  #app .se-page-tools {gap:4px;justify-content:flex-start}
  #app .se-page-tools>.btn {flex:0 1 auto}
  #app .se-page .btn {font-size:12px;font-weight:600;min-height:44px;padding:6px 8px;border-radius:6px}
  #app .se-page .se-section-toggle {font-size:18px;padding:4px 0}
  #app .se-page-tools>.btn,#app .se-page-tools>.se-more>summary {border-color:transparent;background:transparent}
  #app .se-page-tools>#seSeasonStats[aria-expanded="true"] {border-color:var(--navy);background:var(--club-soft)}
  #app .se-board-toolbar {gap:4px 6px}
  #app .se-board-layout>.se-grid {margin:6px 0;gap:8px}
  #app .se-card[data-se-team] {padding:8px;border-top-width:2px}
  #app .se-team-title h2,#app .se-team-compact-head h2 {font-size:17px!important}
  #app .se-team-head {padding-bottom:6px}
  #app .se-team-head p {font-size:12px;line-height:1.4}
  #app .se-counts {margin:6px 0;gap:4px}
  #app .se-chip {padding:2px 5px}
  #app .se-match-roles {margin:6px 0;gap:6px}
  /* Role names should match the team list, with the full tap area retained. */
  #app .se-match-roles select[data-se-match-role] {font-size:14px!important;font-weight:400;min-height:44px!important}
  #app .se-slot {min-height:44px;padding:0;gap:4px}
  #app .se-pick {font-size:14px;padding:4px 2px}
}
@media print {#app .se-page-header,#app #clubCallControls {display:none}}

/* Explicit hidden state takes precedence over every presentation component. */
#app [hidden] {display:none!important}

/* Season setup: group imported teams, then align existing grades; keep fallback compact. */
#app .sg-row,#app .sg-source,#app .sg-match{display:grid;grid-template-columns:minmax(0,1fr) minmax(160px,1fr);align-items:center;gap:6px 12px;border-bottom:1px solid var(--line);padding:7px 0}
#app .sg-row small,#app .sg-source small,#app .sg-match small{display:block;color:var(--muted);font-size:12px;overflow-wrap:anywhere}
#app .sg-row label,#app .sg-source label,#app .sg-names label,#app .sg-add-group label,#app .sg-match label,#app .sg-unmatched label{margin:0;min-width:0}
#app .sg-row input,#app .sg-row select,#app .sg-source select,#app .sg-match input,#app .sg-match select,#app .sg-unmatched input{margin:3px 0 0;width:100%;min-width:0}
#app .sg-source details{grid-column:1/-1;font-size:12px}
#app .sg-source details>summary,#app .sg-fallback>summary{min-height:44px;align-content:center;cursor:pointer}
#app .sg-match>div,#app .sg-source>div{min-width:0;overflow-wrap:anywhere}
#app .sg-match{grid-template-columns:minmax(0,1.2fr) minmax(160px,1fr) minmax(160px,1fr)}
#app .sg-unmatched{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:6px;padding:7px 0}
#app [data-sg-match-group] h4{margin:12px 0 4px}
#app .sg-names{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:6px}
#app .sg-add-group{display:flex;align-items:end;gap:6px;margin:6px 0 12px}
#app .sg-add-group label{flex:1}
#app .sg-link{border:0;background:none;color:var(--navy);text-decoration:underline;min-height:44px;padding:4px 6px;font:inherit;cursor:pointer}
#app [data-sg-other]{margin:10px 0}
#app [data-sg-other]>summary{min-height:44px;align-content:center;font-weight:600;cursor:pointer}
#app .sg-summary p{margin:8px 0}
#app .sg-summary>section>.sg-source{margin-inline-start:18px}
#app .sg-fallback{font-size:12px}
#app .se-board-group{display:flex;align-items:center;gap:6px;font-size:12px;min-width:0}
#app .se-board-group select{margin:0;max-width:100%;min-width:0}
#app [data-shared-grade]{padding:10px;margin-bottom:8px!important}
#app [data-shared-grade] h3{margin:0 0 4px}
#app [data-shared-grade]>details{font-size:12px}
#app [data-shared-grade]>details>summary{cursor:pointer;min-height:44px;align-content:center}
@media(max-width:760px){#app .sg-match{grid-template-columns:minmax(0,1fr)} }
@media(max-width:500px){#app .sg-row,#app .sg-source,#app .sg-match{grid-template-columns:minmax(0,1fr)}#app .sg-add-group{flex-wrap:wrap}#app .se-board-group{flex:1 0 100%;justify-content:space-between}#app .se-board-group select{flex:1;max-width:72%}}

#app .sg-group-names>summary{font-size:13px;min-height:44px;align-content:center;cursor:pointer;overflow-wrap:anywhere}
#app .sg-group-names:has(.sg-names:empty){display:none}

/* Club-owned PlayCricket access. */
#app .pc-connection textarea {width:100%;box-sizing:border-box}
#app .pc-connection .se-form-grid {margin-top:10px}
#app .pc-connection .se-form-grid > :is(h3,p,.se-check,.se-actions) {grid-column:1/-1}
#app .pc-connection .se-actions {margin-block:8px}
#app .pc-connection .se-check {display:flex;align-items:flex-start;gap:8px;min-height:44px}
#app .pc-connection .se-check input {flex-shrink:0;margin-top:4px}

/* Keep group actions and participation on the existing heading row. */
#app .sg-group-heading{display:flex;align-items:center;flex-wrap:nowrap;gap:8px}
#app .sg-group-heading h4{margin:0;min-width:0;flex:1}
#app .sg-group-heading>.se-actions{display:flex;flex-wrap:nowrap;flex-shrink:0;gap:4px}
#app .sg-group-heading .btn{padding-inline:8px}
#app .sg-batting{margin:0;flex-shrink:0;white-space:nowrap}
@media(max-width:600px){#app .sg-group-heading .btn{font-size:11px;padding-inline:5px}#app .sg-group-heading{gap:4px;overflow-x:auto}#app .sg-batting{font-size:11px}#app .sg-group-heading h4{min-width:68px}}

/* Keep Selection Group permissions within compact Settings rows. */
#seGroupPermissions .gp-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
#seGroupPermissions .gp-toolbar h2,#seGroupPermissions .gp-toolbar h3{margin:0;flex:1}
#seGroupPermissions .gp-toolbar>label{margin:0;min-width:0}
#seGroupPermissions .gp-group{flex:1;max-width:55%}
#seGroupPermissions .gp-member{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:3px 0}
#seGroupPermissions .gp-member select{width:auto;max-width:55%}
#seGroupPermissions .gp-actions{margin-top:4px}
#seGroupPermissions .gp-add,#seGroupPermissions .gp-link{flex:1;min-width:120px}
#seGroupPermissions .gp-club,#seGroupPermissions .gp-invitations{margin:4px 0}
#seGroupPermissions .gp-toolbar small{display:block}

/* Mirelion's public-site character, without changing the compact type scale or spacing.
   Brand surfaces are separate from applyClubTheme()'s club-owned action colours. */
html :is(#app,dialog,[role="dialog"]) :is(h1,h2,[aria-level="1"],[aria-level="2"]) {
  font-family:var(--mirelion-display);
  font-weight:400!important;
  letter-spacing:-.025em!important;
}
#app .se-page .se-section-toggle,
#app :is(.player-home-tile>strong,.plan-section-tile>summary>strong,.training-tool-tile>strong) {
  font-family:var(--mirelion-display);
  font-weight:400;
  letter-spacing:-.02em;
}
#app :is(.compact-club-header.hero,.shell .nav,.platform-header,.platform-nav) {background:var(--mirelion-paper)}
#app .platform-shell {background:var(--mirelion-paper)}
#app :is(.login,.account-menu-popover,.coaching-updates-popover) {background:var(--mirelion-surface);border-color:var(--line)}
#app .login {--navy:var(--mirelion-forest);--navy2:#102b23;--navy-contrast:#fff;--club-soft:var(--mirelion-sage);box-shadow:0 8px 28px rgb(23 61 50 / 8%)}
#app .se-card[data-se-team]>.se-team-head {
  margin:-12px -12px 0;
  padding:12px;
  border-radius:7px 7px 0 0;
  background:var(--mirelion-sage);
}
#app .se-card[data-se-team].se-team-overfull>.se-team-head {background:#fff0e9}
#app .player-home-tile {background:var(--mirelion-clay-soft)}
#app .player-home-tile[data-home-area="train"] {background:var(--mirelion-sage)}
#app :is(.plan-section-tile,.training-disclosure,.innings-prep-section,.innings-reflection-options)>summary {background:var(--mirelion-clay-soft)}
#app :is(.se-picker,.se-pair,.se-calendar button,.se-bulk-players) {border-color:var(--line)}
#app .se-calendar button[aria-pressed="true"] {border-color:#27754b}
#app .se-calendar button[data-se-availability="unavailable"] {border-color:#cb6c6c}
#app .se-candidate {color:var(--ink);border-color:var(--line)}
#app .se-candidate:hover {background:var(--mirelion-sage)}
@media (max-width:700px) {
  #app .se-card[data-se-team]>.se-team-head {margin:-8px -8px 0;padding:8px 8px 6px;border-radius:5px 5px 0 0}
}
@media print {
  #app .se-card[data-se-team]>.se-team-head,#app .player-home-tile {background:#fff}
}