.school-ops .section-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.school-ops .card{padding:20px;margin:12px 0;border:1px solid var(--line,#d9dee6);border-radius:16px;background:var(--surface,#fff)}
.school-ops .card strong{font-size:24px}.school-ops td{vertical-align:top}.school-ops td .btn{margin:3px 0}.school-ops small{color:var(--muted,#626b78)}
.school-ops .table-wrap{max-width:100%;overflow:auto}.school-ops table{width:100%;border-collapse:collapse}.school-ops th,.school-ops td{padding:12px;border-bottom:1px solid var(--line,#dde2e9);text-align:left}
[data-ops-error]{color:#af2424;white-space:pre-line}#school-plan-table{max-height:260px;overflow:auto;margin-top:12px}#school-plan-table table{width:100%}
html[data-theme=dark] .school-ops .card,html[data-theme=dark] .mc-dialog{background:#20242c;color:#f0f3f8}html[data-theme=dark] [data-ops-error],html[data-theme=dark] .mc-error{color:#ffaaaa}
@media(max-width:600px){.school-ops .grid-2{grid-template-columns:1fr}.school-ops .section-head .btn{margin-bottom:8px}}

/* The older school-brand rule paints every .view-scroll .btn black !important.
   Keep secondary actions readable using the existing light/dark product palette. */
html .btn.btn-ghost[data-ac],
#view :is(.mca,.mc-root,.school-ops,.school-mat,.school-com) .btn.btn-ghost,
.mc-dialog button:not(.btn-primary):not(.btn-gold){
  background:var(--mp-soft,var(--surface-2,#f5f5f7))!important;
  background-image:none!important;
  color:var(--mp-ink,var(--text,#1d1d1f))!important;
  border:1px solid var(--mp-line,var(--line,#e3e3e8))!important;
  box-shadow:none!important;
}
html .btn.btn-ghost[data-ac]:hover,
#view :is(.mca,.mc-root,.school-ops,.school-mat,.school-com) .btn.btn-ghost:hover,
.mc-dialog button:not(.btn-primary):not(.btn-gold):hover{
  background:var(--mp-tint,var(--surface-3,#eaf3ff))!important;
  color:var(--mp-ink,var(--text,#1d1d1f))!important;
  border-color:var(--mp-focus,var(--accent,#0071e3))!important;
}
html .btn.btn-ghost[data-ac]:focus-visible,
#view :is(.mca,.mc-root,.school-ops,.school-mat,.school-com) .btn.btn-ghost:focus-visible,
.mc-dialog button:focus-visible{
  outline:2px solid var(--mp-focus,#0071e3);outline-offset:3px;
}

/* School-owned service setup: no credentials are rendered back from the API. */
.school-services fieldset{border:1px solid var(--border,#d2d2d7);border-radius:16px;padding:18px;margin:18px 0;min-width:0}
.school-services legend{font-weight:650;padding:0 8px}
.school-services label{display:grid;gap:6px;margin:12px 0}
.school-secret-field{display:flex;gap:8px;align-items:center}
.school-secret-field input{min-width:0;flex:1}
.school-secret-field button{flex:none}
.school-services [hidden]{display:none!important}
.school-services input[readonly]{font-size:12px}

/* Keep modal titles and close controls above the fixed demo banners on mobile. */
#modal-root > .modal-overlay{z-index:2147483100}

/* Mobile audit 2026-09-21: constrain controls, not the information they contain. */
#view .fully-input input,.fd-input input{min-width:0}
#view .fully-input .btn,.fd-input .btn{flex-shrink:0}
#view .util-card,#view .fully-card{min-width:0;max-width:100%}
#view .seg{max-width:100%;min-width:0;box-sizing:border-box;overflow-x:auto}
#view .seg button{flex-shrink:0}
.school-services fieldset p{overflow-wrap:anywhere}
html[data-theme="dark"] .login-pin .login-card{background:var(--surface,#191c22);color:var(--text,#f4f5f8)}
html[data-theme="dark"] .fd-input input:focus{background:var(--surface,#191c22);color:var(--text,#f4f5f8)}
@media(max-width:820px){
  .login-card input,#app input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),#app textarea,#app select,
  #modal-root input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),#modal-root textarea,#modal-root select,
  .mc-dialog input:not([type="checkbox"]):not([type="radio"]),.mc-dialog textarea,.mc-dialog select{font-size:max(16px,1em)!important}
  #app input[type="date"],#app input[type="time"],#modal-root input[type="date"],#modal-root input[type="time"],
  .mc-dialog input[type="date"],.mc-dialog input[type="time"]{min-width:0;max-width:100%;box-sizing:border-box;-webkit-appearance:none;appearance:none}
  #modal-root .grid-2>label,.mc-fields>label{min-width:0}
}
@media(max-width:560px){
  #view .fully-hero{display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;padding:16px;align-items:start}
  #view .fully-hero>.fully-clear{grid-column:2;margin:0;justify-self:start}
  #view .fully-hero .fully-orb{width:44px;height:44px}
  #view .fully-input{gap:6px;padding:12px}
  #view .fully-input input{width:0;padding:10px;flex:1 1 0}
  #view .fully-input .btn{padding:10px 12px}
  #view .seg.vc-tabs{display:flex;width:100%}
  #modal-root .grid-2{grid-template-columns:minmax(0,1fr)!important}
}
/* Keep the composer and close button reachable above an iOS keyboard. */
#fully-dock .fd-head,#fully-dock .fd-input,#fully-dock .fd-chips,#fully-dock>.fd-head+div{flex-shrink:0}
#fully-dock .fd-log{min-height:0;overscroll-behavior:contain}
#fully-dock.fully-compact .fd-head{padding:5px 10px}
#fully-dock.fully-compact .fd-orb{width:26px;height:26px}
#fully-dock.fully-compact .fd-id span{display:none}
#fully-dock.fully-compact>.fd-head+div{padding:3px 10px!important;font-size:10px!important;line-height:1.25}
#fully-dock.fully-compact .fd-chips{display:none}
#fully-dock.fully-compact .fd-input{padding:5px 10px}
#fully-dock.fully-compact .fd-input input,#fully-dock.fully-compact .fd-input .btn{padding:6px 10px}
#fully-dock.fully-compact .fd-log{padding:0 10px}

/* Keep recovery links readable in the dark login card. */
html[data-theme="dark"] .login-card a{color:#6ee7f2}
html[data-theme="dark"] .login-card a:focus-visible{outline:2px solid currentColor;outline-offset:3px}

/* Portal users keep all five bottom navigation targets unobstructed. */
@media(max-width:820px){
 body:has(#app.ams-portal-user:not([hidden])) #ams-adm-btn{left:14px!important;right:auto!important;bottom:calc(76px + env(safe-area-inset-bottom,0px))!important}
}

/* Shared operational interface. Screen only; no receipt/print, login, game or coach styles. */
@media screen {
#app{--ui-warm-ink:#243b38;--ui-warm-muted:#5b716e;--ui-warm-line:#dce7e2;--ui-warm-accent:#176f67;--ui-warm-soft:#edf5f1;--ui-warm-surface:#fff;--ui-warm-row:#f8fbf9}
html[data-theme=dark] #app{--ui-warm-ink:#edf5f1;--ui-warm-muted:#b0c9c0;--ui-warm-line:#3a514b;--ui-warm-accent:#8fdbcb;--ui-warm-soft:#253d36;--ui-warm-surface:#1c2b27;--ui-warm-row:#223630}
#app #view :is(.section-head,.mc-section-header){align-items:center;gap:18px;margin-bottom:22px}
#app #view :is(.section-head h2,.mc-section-header h2){font-size:clamp(23px,2.4vw,30px)!important;font-weight:700!important;letter-spacing:-.035em!important;text-transform:none!important;color:var(--ui-warm-ink)!important;line-height:1.2;margin:0!important}
#app #view .section-head .sub{font-size:14px;line-height:1.5;color:var(--ui-warm-muted)}
#app #view :is(.section-head .tools,.list-filters,.rep-toolbar,.filter-chips){gap:9px;align-items:center}
#app #view .list-filters{padding:14px 16px;border:1px solid var(--ui-warm-line);background:var(--ui-warm-surface);border-radius:16px;margin:0 0 16px}
#app #view .view-scroll .table-wrap,#app #view .table-wrap{border:1px solid var(--ui-warm-line)!important;border-radius:16px!important;box-shadow:0 3px 16px #173b3010!important;background:var(--ui-warm-surface)!important;max-width:100%;overflow:auto}
#app #view .table-wrap thead th{background:var(--ui-warm-soft)!important;color:var(--ui-warm-ink)!important;font-size:12px!important;font-weight:650!important;letter-spacing:.015em!important;text-transform:none!important;padding:15px 17px!important;border-bottom:1px solid var(--ui-warm-line)!important;white-space:nowrap}
#app #view .table-wrap tbody td{padding:15px 17px!important;line-height:1.5;color:var(--ui-warm-ink);border-bottom-color:var(--ui-warm-line)!important;font-variant-numeric:tabular-nums}
#app #view .table-wrap tbody tr:nth-child(even){background:var(--ui-warm-row)!important}
#app #view .table-wrap tbody tr:hover{background:var(--ui-warm-soft)!important}
#app #view .table-wrap .cell-name{font-weight:650;color:var(--ui-warm-ink)}
#app #view .table-wrap :is(.cell-sub,small){color:var(--ui-warm-muted)}
#app #view .table-wrap .cell-avatar{background:var(--ui-warm-soft)!important;color:var(--ui-warm-accent)!important;border-radius:12px!important}
#app #view :is(.section-head,.list-filters,.rep-toolbar,.mca,.school-ops,.school-com,.school-mat,.mc-root) :is(input[type=date],input[type=time],input[type=search],select){min-height:42px;border:1px solid var(--ui-warm-line)!important;border-radius:11px!important;padding:9px 12px;background:var(--ui-warm-surface)!important;color:var(--ui-warm-ink)!important;font:inherit;box-sizing:border-box;max-width:100%}
#app #view :is(.section-head,.list-filters,.rep-toolbar,.mc-root) :is(input,select,button,summary):focus-visible{outline:3px solid var(--ui-warm-accent)!important;outline-offset:3px}
#app #view :is(.section-head,.list-filters,.rep-toolbar) .btn.btn-ghost{background:var(--ui-warm-surface)!important;color:var(--ui-warm-ink)!important;border-color:var(--ui-warm-line)!important;border-radius:11px!important;min-height:40px}
#app #view .mc-section-header{display:flex;justify-content:space-between;flex-wrap:wrap;padding:0 0 20px;border-bottom:1px solid var(--ui-warm-line)}
#app #view .mc-eyebrow{display:block;color:var(--ui-warm-accent);font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;margin-bottom:8px}
#app #view .mc-section-header p{font-size:14px;line-height:1.5;color:var(--ui-warm-muted);margin:8px 0 0}
#app #view .mc-create-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
#app #view .mc-root .btn{min-height:42px;padding:10px 14px;border-radius:11px!important;font-size:13px;font-weight:600;line-height:1.35;white-space:normal}
#app #view .mc-root .btn.btn-ghost{background:var(--ui-warm-surface)!important;color:var(--ui-warm-ink)!important;border:1px solid var(--ui-warm-line)!important;box-shadow:none!important}
#app #view .mc-root .mc-create-actions>[data-cal-action=new]{background:#176f67!important;color:white!important;border-color:#176f67!important}
#app #view .mc-calendar-controls{display:flex;flex-direction:column;gap:18px;margin:0 0 20px}
#app #view .mc-view-tabs{display:flex;gap:5px;flex-wrap:wrap;background:var(--ui-warm-soft);padding:5px;border:1px solid var(--ui-warm-line);border-radius:14px;align-self:flex-start;max-width:100%}
#app #view .mc-root .mc-view-tabs .btn{border:1px solid transparent!important;background:transparent!important;color:var(--ui-warm-muted)!important;min-height:38px;padding:8px 14px}
#app #view .mc-root .mc-view-tabs .btn[aria-pressed=true]{background:var(--ui-warm-surface)!important;color:var(--ui-warm-accent)!important;border-color:var(--ui-warm-line)!important;box-shadow:0 2px 5px #152d2420!important}
#app #view .mc-dates{display:flex;align-items:end;gap:12px;flex-wrap:wrap;margin:0}
#app #view .mc-dates label{display:grid;gap:6px;font-size:12px;color:var(--ui-warm-muted);font-weight:650;min-width:0}
#app #view .mc-dates input{min-width:160px;font-size:14px;font-weight:500;font-variant-numeric:tabular-nums;min-height:42px}
#app #view .mc-organize{position:relative;color:var(--ui-warm-ink)}
#app #view .mc-organize summary{list-style:none;border:1px solid var(--ui-warm-line);border-radius:11px;background:var(--ui-warm-surface);font-size:13px;font-weight:600;padding:11px 14px;min-height:42px;cursor:pointer;box-sizing:border-box}
#app #view .mc-organize summary::-webkit-details-marker{display:none}#app #view .mc-organize summary:after{content:'⌄';margin-left:14px}
#app #view .mc-organize>div{position:absolute;right:0;top:calc(100% + 7px);z-index:25;background:var(--ui-warm-surface);border:1px solid var(--ui-warm-line);border-radius:14px;padding:7px;min-width:220px;box-shadow:0 12px 30px #183b3426;display:grid;gap:5px}
#app #view .mc-organize>div>.btn{text-align:left}
#app #view .mc-holidays{padding:13px 17px;margin:14px 0;border:1px solid #e9d9ae;border-left:4px solid #c79634;background:#fff9ec;color:#715522;border-radius:12px;font-size:13px;line-height:1.5}
#app #view .mc-holidays ul{padding-left:18px;margin:5px 0 0}#app #view .mc-holidays strong{display:block;margin-top:8px}
html[data-theme=dark] #app #view .mc-holidays{background:#3a3120;color:#ffe1a0;border-color:#7c683e}
#app #view .mc-period-summary{display:flex;gap:7px;align-items:baseline;flex-wrap:wrap;margin:18px 0;color:var(--ui-warm-muted);font-size:13px}
#app #view .mc-period-summary strong{color:var(--ui-warm-ink);font-size:15px}#app #view .mc-period-summary small{margin-left:auto;font-size:12px}
#app #view .mc-week-help{margin:0 0 16px;font-size:12px;color:var(--ui-warm-muted)}#app #view .mc-week-help summary{cursor:pointer;padding:8px 0;min-height:36px}#app #view .mc-week-hint{line-height:1.6;max-width:760px;margin:8px 0}
#app #view .mc-week-title{margin:16px 0 6px;align-items:center;gap:12px}#app #view .mc-week-title strong{font-size:25px;letter-spacing:-.025em;color:var(--ui-warm-ink)}
#app #view .mc-week-scroll{border-radius:16px;border-color:var(--ui-warm-line);background:var(--ui-warm-surface);box-shadow:0 3px 16px #173b3010}
#app #view [data-cal-error]:empty{display:none}
@media(max-width:600px){
 #app #view .mc-section-header{gap:15px;padding-bottom:16px;margin-bottom:16px}#app #view .mc-create-actions{width:100%;gap:7px}#app #view .mc-create-actions>[data-cal-action=new]{flex:1}
 #app #view .mc-view-tabs{display:grid;grid-template-columns:1fr 1fr;width:100%;box-sizing:border-box}#app #view .mc-root .mc-view-tabs .btn{padding:9px 8px;min-height:44px;font-size:12px}
 #app #view .mc-dates{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}#app #view .mc-dates input{min-width:0;width:100%;font-size:16px;min-height:44px}#app #view .mc-dates>button{justify-self:start;grid-column:1/-1}
 #app #view .mc-period-summary small{width:100%;margin-left:0;line-height:1.5}#app #view .mc-root .btn{min-height:44px}#app #view .mc-week-title strong{font-size:22px}
 #app #view .table-wrap tbody td{padding:13px 14px!important}#app #view .list-filters{padding:12px}
}
@media(prefers-reduced-motion:reduce){#app #view :is(.section-head,.table-wrap,.mc-root) *{scroll-behavior:auto!important;transition:none!important}}
}
@media screen {
#app #view :is(.section-head h2,.mc-section-header h2){font-family:var(--mp-font,system-ui)!important}
#app #view .list-filters,#app #view .list-filters label{color:var(--ui-warm-ink)!important}
#app #view .table-wrap :is(th,td){border-left:0!important;border-right:0!important}
}