/* Rally material layer: "Liquid Glass" direction (Claude, 24 Oct 2026; proposal for Codex review).
   Presentation only, loaded after polish.css. Principles:
   1. Glass is for the CONTROL layer that floats above content (tab bar, session switcher, sheet backdrop, menus,
      toast). Content sits on solid, quiet surfaces so names, scores and explanations stay legible outdoors.
   2. Hierarchy from type, space and grouping, not outlines: cards lose borders and use soft elevation; lists use
      inset hairline separators; radii nest (card 22 → list 14 → capsule).
   3. Emphasis is spent once per area: one filled primary; secondary actions are tinted capsules; status is a small
      tinted capsule; destructive is red text on a faint red tint.
   Fallbacks: solid surfaces when blur is unsupported, transparency is reduced or contrast is increased; no motion
   when reduced motion is requested. No selectors, fields, bindings, names or copy change. */
:root{
 --g-card:22px;--g-inner:14px;--g-pill:999px;
 --g-sep:rgba(60,60,67,.16);--g-fill:rgba(120,120,128,.12);--g-fill-2:rgba(120,120,128,.18);--g-fill-3:rgba(120,120,128,.08);
 --g-e1:0 0 0 .5px rgba(0,0,0,.05),0 1px 2px rgba(0,0,0,.04),0 8px 24px -12px rgba(0,0,0,.10);
 --g-e2:0 0 0 .5px rgba(0,0,0,.06),0 10px 30px rgba(0,0,0,.14),0 2px 6px rgba(0,0,0,.06);
 --g-e3:0 -1px 0 rgba(255,255,255,.6) inset,0 20px 60px rgba(0,0,0,.22);
 --g-glass:rgba(255,255,255,.66);--g-glass-strong:rgba(255,255,255,.82);--g-blur:saturate(180%) blur(22px);
 --g-spec:inset 0 1px 0 rgba(255,255,255,.75),inset 0 -1px 0 rgba(255,255,255,.18);
 --g-blue:var(--r-blue,#0071e3);--g-link:var(--r-link,#0066cc);--g-red:#d70015;--g-red-tint:rgba(255,59,48,.10)}

/* ── Surfaces: no outlines, soft elevation ─────────────────────────────────────────────────────────────── */
.livecourt,.hostbar,.capacitystrip,.participantlist,.sharecard,.operations-entry,.joincard,.myturn,.emptycard,
.app-shell .panel,.panel{border-color:transparent!important;box-shadow:var(--g-e1);border-radius:var(--g-card)}
.livecourt{padding:20px}
/* Up next is "on deck", not a third court: the card recedes into the page (outline only), its players stay on
   solid white rows so the names keep full contrast. */
.livecourt.nextlive{background:transparent;box-shadow:inset 0 0 0 1px var(--g-sep)}
.app-header{border-bottom:.5px solid var(--g-sep)!important}

/* ── Grouped lists with inset hairlines ─────────────────────────────────────────────────────────────────── */
.livecourt .court-team{border:0;border-radius:var(--g-inner);background:#f2f2f7}
.livecourt.nextlive .court-team{background:#fff;box-shadow:var(--g-e1)}
.livecourt .court-player-change{background:transparent;position:relative}
.livecourt .court-player-change+.court-player-change{box-shadow:none}
.livecourt .court-player-change+.court-player-change::before{content:"";position:absolute;top:0;left:14px;right:0;height:.5px;background:var(--g-sep)}
.livecourt .court-player-change:active{background:var(--g-fill-3)}
.participantlist{background:#fff!important}
/* Inset hairlines start at the name column (background line, so the row grid is untouched). */
.participant{border-bottom:0!important;box-shadow:none;background:linear-gradient(var(--g-sep),var(--g-sep)) no-repeat right bottom/calc(100% - 66px) .5px}
.participant:last-child{background:none}

/* ── Callouts and notes: quiet fills instead of boxes with outlines ─────────────────────────────────────── */
.callout,.capacitystrip .callout,.outlook-facts>div{border-color:transparent!important;background:var(--g-fill-3)!important;border-radius:16px}
.operating-note{border:0;background:var(--g-glass-strong);box-shadow:var(--g-e1);border-radius:var(--g-inner)}
.end-choices .callout{background:#f2f2f7!important}

/* ── Buttons: capsules. One filled primary; tinted secondary; calm destructive. ─────────────────────────── */
.btn,.organizer-menu>summary,.app-header .header-more>summary{border-radius:var(--g-pill);border-color:transparent!important;background:var(--g-fill);color:var(--r-ink,#1d1d1f);font-weight:500;box-shadow:none;transition:background-color .15s ease,transform .12s ease}
.btn:hover,.organizer-menu>summary:hover,.app-header .header-more>summary:hover{background:var(--g-fill-2)}
.btn:active{transform:scale(.98)}
.btn.primary,.livecourt .btn[data-score]{background:var(--g-blue);color:#fff;font-weight:600;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 1px 2px rgba(0,80,170,.22),0 4px 10px -6px rgba(0,113,227,.45)}
.btn.primary:hover,.livecourt .btn[data-score]:hover{background:var(--g-link)!important}
.btn:disabled,.btn.primary:disabled{background:var(--g-fill)!important;color:rgba(60,60,67,.45)!important;box-shadow:none}
.danger-quiet,[data-tone=destructive],.participant .participant-actions>.danger-quiet{background:var(--g-red-tint)!important;color:var(--g-red)!important;border-color:transparent!important;border-radius:var(--g-pill)}
.danger-quiet:hover,[data-tone=destructive]:hover{background:rgba(255,59,48,.16)!important}
/* Repeated per-row destructive actions stay plain red text (no fill), so sixteen rows do not shout. */
.participant .participant-actions>.danger-quiet{background:transparent!important;box-shadow:inset 0 0 0 1px var(--g-sep)}
.participant .participant-actions>.danger-quiet:hover{background:var(--g-red-tint)!important}
.skill-edit{border-radius:var(--g-pill);border-color:transparent;background:rgba(0,113,227,.10)}
.iconbtn{background:var(--g-fill)!important;color:rgba(60,60,67,.7)!important}
.btn:focus-visible,.iconbtn:focus-visible,.organizer-menu>summary:focus-visible,.livetabs button:focus-visible{outline:none;box-shadow:0 0 0 3px #fff,0 0 0 5px var(--g-blue)!important}

/* ── Status capsules ───────────────────────────────────────────────────────────────────────────────────── */
.rolebadge{border:0!important;background:var(--g-fill)!important;color:var(--r-ink,#1d1d1f)}
.sessionmeta>span{border:0!important;background:var(--g-fill-3)!important;color:var(--r-ink-2,#626267)}
.attendance-status{border-radius:var(--g-pill)}

/* ── Session switcher: a segmented control (track + raised thumb) ──────────────────────────────────────── */
.livetabs{padding:4px!important;gap:2px!important;background:var(--g-fill)!important;border-radius:16px!important;border:0!important;box-shadow:none}
.livetabs button{border-radius:12px!important;min-height:44px;color:var(--r-ink,#1d1d1f)!important;background:transparent!important;font-weight:500!important;transition:background-color .15s ease}
.livetabs button.selected{background:#fff!important;color:var(--r-ink,#1d1d1f)!important;font-weight:600!important;box-shadow:0 1px 2px rgba(0,0,0,.08),0 3px 8px rgba(0,0,0,.06)}
.sessiontoolbar{border-bottom:0!important}

/* ── Floating glass tab bar (phone) ─────────────────────────────────────────────────────────────────────── */
.bottom-nav{left:12px!important;right:12px!important;bottom:calc(10px + env(safe-area-inset-bottom,0px))!important;width:auto!important;border-radius:28px;border:0!important;padding:6px!important;
 /* Keep text underneath from competing with tab labels, including without GPU blur. */
 background:#fafafc!important;-webkit-backdrop-filter:none;backdrop-filter:none;
 box-shadow:var(--g-spec),0 0 0 .5px rgba(0,0,0,.08),0 10px 30px rgba(0,0,0,.14)!important}
.bottom-nav a{border-radius:22px;min-height:52px;color:rgba(60,60,67,.85)}
.bottom-nav a[aria-current="page"]{background:rgba(0,113,227,.12);color:var(--g-blue)!important}

/* ── Overlays: sheet backdrop, menus, toast ─────────────────────────────────────────────────────────────── */
#sheet{border:0!important;box-shadow:var(--g-e3)}
#sheet::backdrop{background:rgba(0,0,0,.22);-webkit-backdrop-filter:blur(6px) saturate(120%);backdrop-filter:blur(6px) saturate(120%)}
@media (max-width:700px){#sheet{border-radius:28px 28px 0 0!important}
 #sheet form>.btn.primary[type=submit]{width:100%;min-height:50px;font-size:16px}}
@media (min-width:701px){#sheet{border-radius:28px!important}}
.organizer-menu>div{border:0!important;border-radius:18px!important;background:var(--g-glass-strong)!important;-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);box-shadow:var(--g-spec),var(--g-e2)!important}
#toast{border-radius:var(--g-pill);background:rgba(29,29,31,.8)!important;-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);box-shadow:0 8px 24px rgba(0,0,0,.2);padding:12px 20px!important}

/* ── Form controls ─────────────────────────────────────────────────────────────────────────────────────── */
#sheet input:not([type=checkbox]):not([type=radio]):not([type=file]),#sheet select,#sheet textarea{border:1px solid var(--g-sep)!important;border-radius:12px!important;background-color:#fff;transition:box-shadow .15s ease,border-color .15s ease}
#sheet input:focus,#sheet select:focus,#sheet textarea:focus{outline:none;border-color:var(--g-blue)!important;box-shadow:0 0 0 4px rgba(0,113,227,.18)}
input[type=radio]{accent-color:var(--g-blue)}
.winner-option{border:0!important;border-radius:16px!important;background:#f2f2f7}
.winner-option:has(input:checked){background:rgba(0,113,227,.08);box-shadow:inset 0 0 0 2px var(--g-blue)}
/* On/off choices as switches (still native checkboxes: same name, value, label and keyboard behaviour). */
.livecheckbox{align-items:center}
.livecheckbox input[type=checkbox]{appearance:none;-webkit-appearance:none;position:relative;width:51px!important;height:31px!important;flex:0 0 51px;margin:0;border-radius:var(--g-pill);background:rgba(120,120,128,.16);cursor:pointer;transition:background-color .2s ease}
.livecheckbox input[type=checkbox]::before{content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:#fff;box-shadow:0 3px 8px rgba(0,0,0,.15),0 1px 1px rgba(0,0,0,.16);transition:transform .2s ease}
.livecheckbox input[type=checkbox]:checked{background:var(--g-blue)}
.livecheckbox input[type=checkbox]:checked::before{transform:translateX(20px)}
.livecheckbox input[type=checkbox]:focus-visible{outline:none;box-shadow:0 0 0 3px #fff,0 0 0 5px var(--g-blue)}
.livecheckbox input[type=checkbox]:disabled{opacity:.5}

/* ── Fallbacks ─────────────────────────────────────────────────────────────────────────────────────────── */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
 .bottom-nav,.organizer-menu>div{background:#fff!important}#toast{background:#1d1d1f!important}}
@media (prefers-reduced-transparency:reduce){
 .bottom-nav,.organizer-menu>div,.operating-note{background:#fff!important;-webkit-backdrop-filter:none;backdrop-filter:none}
 #toast{background:#1d1d1f!important;backdrop-filter:none}#sheet::backdrop{backdrop-filter:none;background:rgba(0,0,0,.4)}
 .livecourt.nextlive{background:#fff}}
@media (prefers-contrast:more){
 .livecourt,.hostbar,.capacitystrip,.participantlist,.sharecard,.panel,.btn,.livetabs,.bottom-nav,#sheet{box-shadow:none!important;border:1px solid #6e6e73!important}
 .bottom-nav{background:#fff!important;backdrop-filter:none}
 .livecourt .court-player-change+.court-player-change::before,.participant{background:#6e6e73}}
@media (prefers-reduced-motion:reduce){
 .btn,.livetabs button,.livecheckbox input[type=checkbox],.livecheckbox input[type=checkbox]::before,#sheet input,#sheet select,#sheet textarea{transition:none!important}
 .btn:active{transform:none}}