.topbar{justify-content:space-between}.topbar-title{font-size:13px;color:var(--muted)}
.load-status{padding:48px 32px;display:flex;align-items:center;gap:16px;color:var(--muted)}
body[data-ready=false] .page-body{visibility:hidden}
/* Each navigation item fills the workspace with its own section. */
body[data-mode=main] .settings-grid{grid-template-columns:minmax(0,1fr)}
body[data-mode=main] .settings-grid>.section-stack{display:contents}
@media(min-width:701px){
  #matches th:last-child{width:1%}
  #matchRows .match-actions .row-actions{flex-wrap:nowrap}
  #ruleMoreDialog{width:min(440px,calc(100vw - 40px))}
  body[data-mode=main] .page-body{max-width:1120px}
  body[data-mode=main][data-mobile-section=rules] .page-body{max-width:880px}
  body[data-mode=main][data-mobile-section=branding] .page-body,body[data-mode=main][data-mobile-section=televisions] .page-body{max-width:760px}
}
.saving-status{display:none;position:fixed;z-index:120;top:12px;left:50%;transform:translateX(-50%);background:#292323;border:1px solid var(--line);border-radius:6px;padding:9px 18px}
body[data-saving=true] .saving-status{display:block}body[data-saving=true] .page-body button,body[data-saving=true] dialog button{pointer-events:none;opacity:.65}
.rule-change-note{grid-column:1/-1;color:#d8c5c5;font-size:12px;line-height:1.7}
.dialog-error:empty{display:none}.dialog-error{padding:12px;background:#321a1e;border:1px solid #65363d;border-radius:6px}
#brandingForm .chip-row{display:grid;grid-template-columns:64px minmax(0,1fr) 44px;gap:14px 12px;align-items:center;padding:16px 0}
#brandingForm .chip-preview{grid-column:1;grid-row:1;width:64px;height:64px;border:1px solid #4a4242;background:#171515;color:var(--muted);font-size:11px}
#brandingForm .chip-preview[data-shape=rectangle],#brandingForm .chip-preview[data-shape=rectangle] img{border-radius:4px}
#brandingForm .chip-upload{grid-column:2;grid-row:1;display:flex;flex-direction:column;gap:8px;align-items:flex-start;min-width:0}
#brandingForm .chip-upload strong{font-size:12px;font-weight:500;color:var(--muted)}
#brandingForm .chip-tools{display:flex;flex-wrap:wrap;gap:8px;min-width:0}
#brandingForm .chip-tools .button{min-height:44px}
#brandingForm .chip-value{grid-column:1/-1;grid-row:2;min-width:0}
#brandingForm .chip-value input{max-width:none}
#brandingForm .chip-row>[data-delete-chip]{grid-column:3;grid-row:1;min-width:44px;min-height:44px;padding:0}
#brandingForm #addChip{margin-top:12px}
.tv-device-row{align-items:flex-start;flex-wrap:wrap;gap:12px 18px}
.tv-identity{min-width:0;gap:6px;line-height:1.6}
.tv-identity strong,.tv-identity small{white-space:normal;overflow-wrap:anywhere;word-break:break-word}
.tv-identity strong{font-size:15px;font-weight:600;color:var(--ink)}
.tv-identity .device-code{font-variant-numeric:tabular-nums}
.device-actions{display:flex;gap:8px;flex:0 0 auto;flex-wrap:wrap}
.device-actions .button,#renameTvDialog .button,#renameTvDialog input{min-width:44px;min-height:44px}
#deviceSummary .tv-device-row{padding:18px 0}
#renameTvDialog{width:min(500px,calc(100vw - 40px))}
#renameTvDialog .dialog-head{align-items:flex-start}
#renameTvDialog .dialog-head>div{min-width:0}
#renameTvDialog .dialog-head>[data-close]{flex:0 0 44px;padding:6px;font-size:24px}
#renameTvDialog .dialog-head h2{overflow-wrap:anywhere}
#renameTvDialog .dialog-body{gap:18px}
.rename-tv-identity{padding-bottom:18px;border-bottom:1px solid var(--line)}
#renameTvDialog .field-help{margin-top:-10px}
#renameTvDialog [aria-invalid=true]{border-color:var(--accent)}
.confirm-message{white-space:pre-line;overflow-wrap:anywhere}
@media(max-width:700px){
  .topbar{position:absolute;top:calc(26px + env(safe-area-inset-top,0px));right:8px;left:auto;min-height:44px;padding:0;background:transparent;border:0}
  .topbar-title{display:none}.sidebar{display:grid;grid-template-columns:max-content minmax(0,1fr);align-items:end;align-items:last baseline;column-gap:10px;padding-top:calc(33px + env(safe-area-inset-top,0px));padding-right:110px}.page-body{padding-top:14px}
  .sidebar .brand-lockup{white-space:nowrap}.sidebar .brand-caption{display:block;min-width:0;margin:0;text-wrap:balance}
  .saving-status{top:60px;font-size:13px}
  #renameTvDialog{width:100%;max-width:none}
  #deviceSummary .tv-device-row .tv-identity{flex-basis:100%}
  #deviceSummary .device-actions{width:100%}
  #deviceSummary .device-actions .button{flex:1}
}
@media(min-width:460px) and (max-width:700px){
  #brandingForm .chip-row{grid-template-columns:64px minmax(0,1fr) minmax(100px,1fr) 44px}
  #brandingForm .chip-value{grid-column:3;grid-row:1}
  #brandingForm .chip-row>[data-delete-chip]{grid-column:4}
}

#matchRows .match-multi .toggle{cursor:default}#matchRows .match-multi input[type=checkbox]{cursor:pointer}

/* Account details stay by logout; the match action belongs to its section. */
.topbar-actions{display:flex;align-items:center;gap:12px;min-width:0}
.topbar-download,.topbar-ranking{flex:0 0 auto}
.topbar-download-version{color:var(--muted);font-variant-numeric:tabular-nums}
@media(max-width:700px) and (orientation:portrait){.topbar-download{display:none}}
.topbar-actions #accountStatus{font-size:12px;color:var(--muted);white-space:nowrap}
body[data-mode=main] #matches>.section-heading>div{min-width:0;flex:1}
body[data-mode=main] #newMatch{flex:0 0 auto}
@media(max-width:700px){
  body[data-mode=main] .app-shell{display:grid;grid-template-columns:minmax(0,1fr) max-content;align-content:start}
  body[data-mode=main] .sidebar{grid-column:1;grid-row:1;padding-right:0}
  body[data-mode=main] .workspace{display:contents}
  body[data-mode=main] .topbar{position:static;grid-column:2;grid-row:1;align-self:start;margin:calc(26px + env(safe-area-inset-top,0px)) 8px 0 6px;min-height:44px}
  body[data-mode=main] .topbar-actions{flex-direction:column-reverse;align-items:flex-end;gap:0}
  body[data-mode=main] .topbar-actions #accountStatus{padding-right:7px;font-size:11px}
  body[data-mode=main] #logoutBtn,body[data-mode=main] .topbar-ranking,body[data-mode=main] .topbar-download{padding-left:6px;padding-right:6px;font-size:12px}
  body[data-mode=main] #loadStatus,body[data-mode=main] .page-body{grid-column:1/-1;width:100%}
  body[data-mode=main] .page-heading{flex-direction:row;align-items:center;justify-content:space-between;gap:12px}
  body[data-mode=main] #newMatch{position:static;min-height:44px;padding:9px 12px;font-size:14px}
  body[data-mode=main][data-mobile-section=matches] .page-body{padding-bottom:calc(100px + env(safe-area-inset-bottom))}
  body[data-mode=main] .preview-toast{bottom:calc(80px + env(safe-area-inset-bottom))}
}
@media(max-width:360px){
  body[data-mode=main] .app-shell{grid-template-columns:minmax(0,1fr)}
  body[data-mode=main] .sidebar{padding-right:18px;padding-bottom:0}
  body[data-mode=main] .topbar{grid-column:1;grid-row:2;justify-self:end;margin:0 8px 4px 0}
}

/* Store-wide display options and the approved compact match form. */
body[data-mode=main] #matches>.section-heading>#matchHeaderActions{flex:0 0 auto}
.match-header-actions{display:flex;align-items:center;justify-content:flex-end;gap:12px}
.match-header-actions .button{min-height:44px}
#openDisplaySettings,#openBlindRules{background:transparent}
#openDisplaySettings:hover,#openBlindRules:hover{background:#292525}
#openDisplaySettings svg{flex:0 0 auto}
#displaySettingsDialog{width:min(640px,calc(100vw - 40px))}
#displaySettingsDialog .dialog-head{align-items:flex-start}
#displaySettingsDialog .dialog-head p{margin-top:5px}
#displaySettingsDialog .dialog-head>[data-close]{flex:0 0 40px;min-width:40px;padding:4px;font-size:25px;line-height:1}
#displaySettingsDialog .dialog-body{gap:24px}
#displaySettingsDialog .form-grid{gap:24px}
#displaySettingsDialog .field-help{margin-top:0}
.display-settings-note{font-size:12px;line-height:1.8;color:var(--muted)}
#matchForm .match-rules,#matchForm .match-counts{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:0}
#matchForm .match-stacks{grid-template-columns:repeat(2,minmax(0,1fr)) auto;gap:10px;margin-top:0}
#matchForm #matchSupplementUp{align-self:end;min-width:100px;min-height:43px;white-space:nowrap}
#matchForm #matchSupplementHelp{grid-column:1/-1;margin-top:0}
@media(max-width:700px){
  body[data-mode=main] .page-heading{gap:10px}
  body[data-mode=main] .page-heading>div:first-child{min-width:0}
  body[data-mode=main] .page-heading h1{white-space:nowrap}
  body[data-mode=main][data-mobile-section=matches] .page-heading{flex-wrap:wrap}
  body[data-mode=main][data-mobile-section=matches] .page-heading>div:first-child{flex-basis:100%}
  .match-header-actions{flex:1 1 100%;flex-wrap:wrap;justify-content:flex-start;gap:8px}
  body[data-mode=main] #openDisplaySettings,body[data-mode=main] #openBlindRules,body[data-mode=main] #newMatch{min-height:44px;padding:9px 11px;font-size:13px}
  #displaySettingsDialog{width:100%;max-width:none;height:100vh;height:100dvh;max-height:100vh;max-height:100dvh;overflow:hidden}
  #displaySettingsDialog>form{height:auto;flex:1;overflow:hidden}
  #displaySettingsDialog .dialog-head{padding:20px 18px}
  #displaySettingsDialog .dialog-body{padding:24px 18px;gap:22px;flex:0 1 auto}
  #displaySettingsDialog .form-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
  #displaySettingsDialog .dialog-actions{padding-right:18px;padding-left:18px}
  #matchForm .match-rules,#matchForm .match-counts{gap:18px}
  #matchForm #matchSupplementUp{min-width:76px;min-height:48px;padding:11px 8px;font-size:13px}
}
@media(max-width:380px){
  body[data-mode=main] .page-heading h1{font-size:22px}
  body[data-mode=main] #openDisplaySettings,body[data-mode=main] #openBlindRules,body[data-mode=main] #newMatch{padding-right:9px;padding-left:9px}
  #openDisplaySettings svg{display:none}
}

/* Native checkbox semantics with a short, tactile switch transition. */
.toggle input[type=checkbox]{appearance:none;-webkit-appearance:none;position:relative;width:42px;height:24px;min-height:24px;padding:0;border:1px solid #625555;border-radius:20px;background:#30292b;cursor:pointer;transition:background-color .18s ease,border-color .18s ease;box-shadow:inset 0 1px 3px #0005}
.toggle input[type=checkbox]::before{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#e5dfe0;box-shadow:0 1px 3px #0006;transition:transform .2s cubic-bezier(.2,.8,.2,1),background-color .18s ease}
.toggle input[type=checkbox]:checked{background:#ad293f;border-color:#e25a70}
.toggle input[type=checkbox]:checked::before{transform:translateX(18px);background:#fff}
.toggle input[type=checkbox]:focus-visible{outline:3px solid #ed8e9c;outline-offset:4px}
.toggle input[type=checkbox]:disabled{cursor:wait;opacity:.55}
.button[data-save-state]{min-width:112px;transition:background-color .18s ease,border-color .18s ease}
.button[data-save-state=pending]{cursor:wait;opacity:1}
.button[data-save-state=pending]::before{content:"";display:inline-block;width:12px;height:12px;margin-right:8px;vertical-align:-2px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:settings-save-spin .7s linear infinite}
.button[data-save-state=success]{background:#224d3d;border-color:#4b9672;color:#edfff3}
.button[data-save-state=success]::before{content:"✓";margin-right:7px}
.button[data-save-state=error]{border-color:#ef8394}
@keyframes settings-save-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.toggle input[type=checkbox],.toggle input[type=checkbox]::before,.button[data-save-state]{transition:none}.button[data-save-state=pending]::before{animation:none}}