/* Rack Glass layer: ground, frosted header / cards / tab bar, pill controls. Colours, radii and blur come from tokens.css. */
body{background:var(--ground-base)}
body::before{content:"";position:fixed;inset:0;z-index:-1;background:var(--ground-mesh);pointer-events:none}

header{background:var(--glass);border-color:var(--edge);border-radius:var(--r-xl);box-shadow:var(--shadow-window);backdrop-filter:blur(var(--blur)) saturate(1.4);-webkit-backdrop-filter:blur(var(--blur)) saturate(1.4)}
.card{background:var(--card);border-color:var(--edge);border-radius:var(--r-lg);box-shadow:var(--shadow-card);backdrop-filter:blur(var(--blur)) saturate(1.4);-webkit-backdrop-filter:blur(var(--blur)) saturate(1.4)}
.card.us{border-color:color-mix(in srgb,var(--accent) 55%,var(--edge))}

/* floating tab bar */
nav{background:var(--float);border-color:var(--hair);border-radius:var(--r-lg);box-shadow:var(--shadow-float);backdrop-filter:blur(var(--blur)) saturate(1.4);-webkit-backdrop-filter:blur(var(--blur)) saturate(1.4);padding:var(--s-1) var(--s-2)}
nav button{border-radius:var(--r-md)}

/* controls are pills; the one main action uses the accent gradient */
button{border-radius:var(--r-btn);border-color:var(--hair)}
button.d,button.link{border-radius:var(--r-sm)}
button.p,.composer.has button{background:var(--accent-fill);border-color:transparent;box-shadow:var(--glow)}
button.p:hover,button.p:active,.composer.has button:hover,.composer.has button:active{background:var(--accent-fill);filter:brightness(1.07)}
.chip{border-radius:var(--r-sm);border-color:var(--hair)}
.chip.gn{border-color:var(--success)}.chip.rd{border-color:var(--danger)}.chip.me,.chip.on{border-color:var(--accent)}
.seg{border-radius:var(--r-md);background:var(--field)}
.seg button{border-radius:var(--r-sm)}
input,select,textarea{border-radius:var(--r-sm)}
input,select,textarea{background:var(--field)}

/* sheets, menus and dialogs are never see-through */
#modal>div{background:var(--solid);border:1px solid var(--edge);border-radius:var(--r-xl);box-shadow:var(--shadow-pop)}
#menu{background:var(--solid);border:1px solid var(--edge);border-radius:var(--r-md);box-shadow:var(--shadow-pop)}
#dlg .dbox{background:var(--solid);border:1px solid var(--edge);border-radius:var(--r-xl);box-shadow:var(--shadow-pop)}

/* ================= Redesign: Home, lists, match cards, nav ================= */
h1{font:600 28px/1.1 var(--font);letter-spacing:-.025em;margin:0}
.home{display:grid;gap:var(--s-3);margin:var(--s-2) 0 var(--s-4)}
.greet{padding:var(--s-3) var(--s-2) 0}.greet p{margin:0 0 2px}

/* hero: tinted glass with one big number, not a solid colour block */
.homehero{position:relative;overflow:hidden;border-radius:var(--r-xl);padding:var(--s-6);border:1px solid var(--edge);
  background: var(--card);box-shadow:var(--shadow-window)}
.hl{font-size:13px;font-weight:600;color:var(--ink-muted)}
.hbig{font:300 68px/1 var(--font);letter-spacing:-.045em;font-variant-numeric:tabular-nums;margin:var(--s-2) 0 var(--s-4)}
.hbig small{font-size:20px;color:var(--ink-muted);font-weight:400;margin-left:8px;letter-spacing:0}
.hrow{display:flex;gap:var(--s-2);flex-wrap:wrap}
.hchip{padding:7px 14px;border-radius:var(--r-sm);background:var(--field);border:1px solid var(--hair);font:600 13px var(--font);font-variant-numeric:tabular-nums}
.hnote{margin:0;color:var(--ink-muted)}
.hrecent{display:flex;align-items:center;gap:6px;margin-top:var(--s-4)}.hrecent>span:first-child{font-size:12.5px;color:var(--ink-muted);font-weight:600;margin-right:4px}

.card.next{margin:0}.nhead{display:flex;justify-content:space-between;align-items:center;gap:var(--s-2);margin-bottom:var(--s-1)}.nhead h2{margin:0}

/* lists become rows of soft tiles, the team number as a badge */
.card.list{padding:var(--s-2)}
.trow{padding:10px;border-top:0;border-radius:var(--r-md);margin:2px 0}
.trow:hover{background:var(--field)}
.trow .num{min-width:0;width:80px;margin:0;padding:12px 0;text-align:center;border-radius:var(--r-sm);background:var(--a-soft);font:600 15px var(--mono);letter-spacing:-.01em}
.trow.us{box-shadow:none;background:var(--a-soft)}
.trow.us .num{background:var(--accent-fill);color:var(--on-accent)}

/* matches: big mono scores, pill results, rounder alliance blocks */
.card.us{box-shadow:var(--shadow-card)}
.mhead .num{font:600 21px/1 var(--font)}
.score{font:500 18px/1 var(--mono);color:var(--ink)}
.res{border-radius:var(--r-sm);padding:5px 11px}
.vs .side{border-radius:var(--r-md)}
.tile{background:var(--field);border:1px solid var(--edge);border-radius:var(--r-md);padding:var(--s-3) var(--s-4)}
.tile b{font:300 32px/1.1 var(--font);letter-spacing:-.025em}

/* segmented control and tab bar: the selected item is a raised pill */
.seg{padding:4px}
.seg button.on{background:var(--card);color:var(--ink);box-shadow: 0 0 0 1px var(--hair)}
nav button.on{box-shadow:none;background:var(--a-soft);color:var(--accent-text)}
@media(min-width:860px){.home{grid-template-columns:1.1fr 1fr;align-items:start}.greet{grid-column:1/-1}}

/* Matches and Scout use the same hero */
.homehero + .seg { margin-top: var(--s-3); }
.scouthero { margin: var(--s-2) 0 var(--s-3); }
.scouthero .hbig { margin-bottom: var(--s-3); }
.sbar { height: 8px; border-radius: var(--r-xs); background: var(--surface-track); overflow: hidden; }
.sbar > i { display: block; height: 100%; border-radius: var(--r-xs); background: var(--accent-fill); }
.hero-pad { padding: 0; }

/* ================= Recon polish: live status, scouts, event finder, welcome, motion ================= */
:root { --spring: cubic-bezier(0.34, 1.4, 0.64, 1); }

/* Home status line and the name with Change beside it */
.live { margin: 0 0 4px; display: flex; align-items: center; gap: 8px; font: 600 13px var(--font); color: var(--ink-muted); }
.live.now { color: var(--success); }
.livedot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 0 color-mix(in oklch, var(--success) 60%, transparent); animation: livePulse 1.8s ease-out infinite; flex: none; }
@keyframes livePulse { 0% { box-shadow: 0 0 0 0 color-mix(in oklch, var(--success) 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 9px transparent; } }
.greet h1 { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.greet h1 .namechg { font-size: 14px; font-weight: 600; letter-spacing: 0; }

/* team scouts you can remove */
.scouts { margin: var(--s-1) 0 var(--s-3); }
.srow { display: flex; align-items: center; gap: var(--s-3); padding: 9px 0; border-top: 1px solid var(--hair); }
.srow:first-child { border-top: 0; }
.srow .avatar { width: 32px; height: 32px; border-radius: var(--r-md); display: grid; place-items: center; background: var(--a-soft); font-weight: 700; flex: none; }
.srow .grow { min-width: 0; overflow-wrap: anywhere; }

/* event finder: spinner, skeleton rows, filters */
.ebmsg.busy::before { content: ""; display: inline-block; width: 14px; height: 14px; margin-right: 8px; vertical-align: -2px; border-radius: 50%; border: 2px solid var(--hair); border-top-color: var(--a); animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.skel .sk { height: 12px; border-radius: var(--r-xs); background: linear-gradient(90deg, var(--hair) 25%, color-mix(in oklch, var(--ink) 14%, transparent) 50%, var(--hair) 75%); background-size: 200% 100%; animation: shimmer 1.2s linear infinite; }
.skel .sk1 { width: 70%; height: 15px; margin-bottom: 9px; } .skel .sk2 { width: 45%; }
@keyframes shimmer { to { background-position: -200% 0; } }
.ebfilters { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; margin: var(--s-2) 0; }
.ebfilters .sel { width: auto; flex: 1 1 130px; min-width: 120px; }
.ebfilters .chip { margin: 0; }

/* welcome screen: no duplicate brand bar, a glowing icon, the card in glass */
body.out header { background: transparent; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 0; margin: var(--s-3) var(--s-3) 0; justify-content: flex-end; max-width: none; overflow: visible; }
body.out header::after, body.out header .brand { display: none; }
@media (min-width: 860px) { body.out header { width: auto; margin-inline: auto; max-width: 836px; } }
.welcome .hero { padding-top: var(--s-5); }
.welcome .hero .heroicon { width: 84px; height: 84px; border-radius: 22px;  animation: iconIn .7s var(--spring) both; }
.welcome .hero h1 { animation: vUp .5s .08s var(--ease) both; }
.welcome .hero p { animation: vUp .5s .16s var(--ease) both; }
.welcome > .seg, .welcome > .card { animation: vUp .5s .24s var(--ease) both; }
@keyframes iconIn { from { opacity: 0; transform: scale(.6) rotate(-8deg); } to { opacity: 1; transform: none; } }
.card.login { border-radius: var(--r-xl); padding: var(--s-5); }

/* motion: a page slides the way you are going, rows arrive one after another, cards you can tap react to the tap */
@keyframes vFwd { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: none; } }
@keyframes vBack { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: none; } }
@keyframes vUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes rowIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
#app.enter-fwd { animation: vFwd .34s var(--ease) both; }
#app.enter-back { animation: vBack .34s var(--ease) both; }
#app.enter-up { animation: vUp .26s var(--ease) both; }
#app.enter-fwd .trow, #app.enter-back .trow, #app.enter .trow { animation: rowIn .38s var(--ease) both; animation-delay: calc(var(--i, 0) * 32ms); }
.trow:nth-child(1) { --i: 1; } .trow:nth-child(2) { --i: 2; } .trow:nth-child(3) { --i: 3; } .trow:nth-child(4) { --i: 4; } .trow:nth-child(5) { --i: 5; }
.trow:nth-child(6) { --i: 6; } .trow:nth-child(7) { --i: 7; } .trow:nth-child(8) { --i: 8; } .trow:nth-child(n+9) { --i: 9; }
#app.enter-fwd .homehero, #app.enter-back .homehero, #app.enter .homehero { animation: vUp .5s var(--ease) both; }
.tap { cursor: pointer; transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s; }
.tap:hover { box-shadow: var(--shadow-window); }
.tap:active { transform: scale(.985); transition-duration: .08s; }
.tap:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button:active { transform: scale(.96); }
.flash { animation: flashRing 1.3s ease-out; }
@keyframes flashRing { 0% { box-shadow: 0 0 0 0 color-mix(in oklch, var(--a) 70%, transparent); background-color: var(--a-soft); } 100% { box-shadow: 0 0 0 16px transparent; } }
/* the tab bar's selected pill glides to the new tab */
nav { overflow: visible; }
nav button { position: relative; z-index: 1; }
nav button.on { background: transparent; box-shadow: none; }
.navpill { position: absolute; left: 0; top: var(--s-1); height: calc(100% - var(--s-1) * 2); width: 0; opacity: 0; border-radius: var(--r-md); background: var(--a-soft); pointer-events: none; z-index: 0; transition: transform .42s var(--spring), width .42s var(--spring), opacity .2s; }
nav button.on svg { transform: translateY(-2px) scale(1.08); }
/* the team sheet springs up */
@keyframes sheetSpring { from { opacity: 0; transform: translateY(56px) scale(.97); } to { opacity: 1; transform: none; } }
#modal.opening > div { animation: sheetSpring .46s var(--spring) both; }
/* header: wordmark and team on top, the event picker underneath, so a long event name can never run into the logo */
header { flex-wrap: wrap; row-gap: var(--s-3); }
.brand { flex: 1 1 0; }
#evname { display: block; margin-top: 2px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; -webkit-line-clamp: unset; line-clamp: unset; overflow-wrap: normal; }
.evbar { flex: 1 0 100%; min-width: 0; }
.evbar:empty { display: none; }
.evpick { display: flex; align-items: center; gap: var(--s-2); min-width: 0; }
.evpick .sel { flex: 1 1 0; min-width: 0; width: auto; margin: 0; font-weight: 600; }
.ib { flex: none; display: grid; place-items: center; width: var(--control-h); height: var(--control-h); padding: 0; border-radius: var(--r-btn); background: var(--field); border: 1px solid var(--hair); color: var(--ink); text-decoration: none; }
.ib svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ib:hover { background: var(--card); }
.evmsg { margin: var(--s-2) 0 0; font-size: 13px; } .evmsg:empty { display: none; }
body.out .evbar { display: none; }

/* segmented controls: one raised highlight that glides between the items */
.seg { position: relative; }
.seg button { position: relative; z-index: 1; }
.segpill { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: var(--r-sm); background: var(--card); box-shadow: 0 0 0 1px var(--hair); pointer-events: none; }
.seg.pilled button.on { background: transparent; box-shadow: none; }
.welcome.swap .hero *, .welcome.swap > .seg, .welcome.swap > .card { animation: none !important; }

/* picklist: the other rows slide aside while you drag */
.pk.shift { transition: transform .26s var(--spring); }
.pk.drag { transition: none; will-change: transform; background: var(--solid); border-radius: var(--r-md); box-shadow: var(--shadow-window); }
.pk.drag.settle { transition: transform .2s var(--ease), box-shadow .2s; }
@media (prefers-reduced-motion: reduce) {
  .pk.shift, .pk.drag.settle { transition: none; }
  #app.enter-fwd, #app.enter-back, #app.enter-up, #app.enter-fwd .trow, #app.enter-back .trow, #app.enter .trow, #app.enter .homehero, .welcome .hero *, .welcome > * { animation: none !important; }
  .navpill, .tap { transition: none; } .tap:hover { transform: none; }
  .livedot, .ebmsg.busy::before, .skel .sk { animation: none; }
}

/* ================= Flat: quiet chrome, one accent, no glass, glows or colour washes (unslop method) ================= */
:root { --spring: cubic-bezier(0.2, 0.7, 0.2, 1); } /* one easing curve: nothing overshoots */
header:after { display: none; }
.tap:hover { border-color: var(--border-ctl); }
.seg.pilled button.on, .seg button.on { box-shadow: none; }
nav button.on svg { transform: none; }
.flash { animation: flashFade 1.1s ease-out; }
@keyframes flashFade { 0% { background-color: var(--a-soft); } 100% { background-color: transparent; } }
/* signature: the viewfinder corners of the Recon mark, on the rank card only */
.homehero::before, .homehero::after { content: ""; position: absolute; width: 14px; height: 14px; border: 2px solid var(--a); opacity: .75; pointer-events: none; }
.homehero::before { top: 14px; right: 14px; border-width: 2px 2px 0 0; border-radius: 0 4px 0 0; }
.homehero::after { bottom: 14px; left: 14px; border-width: 0 0 2px 2px; border-radius: 0 0 0 4px; }
.trow .num { background: var(--field); }

/* ===== Flatkey-style: near-black ground, one big panel with nested stat cards, light type, dot-matrix charts, pill controls ===== */
body { font-feature-settings: "tnum" 1, "cv11" 1; }
h1 { font-weight: 300; letter-spacing: -0.02em; }
.card h2, .phead h2 { font-weight: 400; font-size: 19px; letter-spacing: -0.01em; }

/* header: no box, a status pill and a round icon button, like the reference */
header { background: transparent; border: 0; box-shadow: none; border-radius: 0; padding: var(--s-2) var(--s-1) var(--s-3); overflow: visible; }
#sync { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border-radius: 999px; background: var(--sunken); border: 1px solid var(--hair); box-shadow: inset 0 1px 3px oklch(0 0 0 / .28); font: 500 14px var(--font); color: var(--ink); }
#sync::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--good); flex: none; }
#sync.off { color: var(--ink); font-weight: 500; } #sync.off::before { background: var(--bad); } #sync.busy { color: var(--ink); } #sync.busy::before { background: var(--a); }
#theme { width: 44px; height: 44px; border-radius: 50%; background: var(--sunken); border: 1px solid var(--hair); }
.evpick .sel { background: var(--sunken); border-color: var(--hair); border-radius: var(--r-btn); }

/* surfaces: a soft sheen from top to bottom and a lit top edge */
.card, .stat, .next { background: linear-gradient(180deg, color-mix(in oklch, var(--ink) 4%, var(--card)), var(--card)); border: 1px solid var(--hair); box-shadow: var(--shadow-card); }
.panel { display: grid; gap: 10px; padding: 10px; border-radius: var(--r-xl); border: 1px solid var(--hair); background: linear-gradient(180deg, color-mix(in oklch, var(--ink) 3%, var(--glass)), var(--glass)); box-shadow: var(--shadow-window); }
.phead { padding: 12px 12px 4px; } .phead h2 { margin: 0; font-size: 26px; font-weight: 300; letter-spacing: -0.02em; }
.panel .stat { border-radius: calc(var(--r-xl) - 8px); }
.home { gap: var(--s-4); }

/* stat card */
.stat { display: grid; gap: 22px; padding: 18px 20px 20px; border-radius: var(--r-lg); }
.shead { display: flex; align-items: center; gap: 10px; color: var(--ink-muted); font: 400 15px var(--font); }
.shead svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.sbody { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.sl { min-width: 0; }
.sbig { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font: 300 50px/1 var(--font); letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.sbig small { font-size: 50px; font-weight: 300; color: var(--ink-muted); margin-left: -2px; letter-spacing: -0.035em; }
.scap { margin-top: 10px; color: var(--ink-muted); font: 400 14px/1.35 var(--font); }
.delta { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px 3px 7px; border-radius: 999px; font: 500 13px/1.3 var(--font); letter-spacing: 0; background: color-mix(in oklch, var(--good) 17%, transparent); color: var(--good-ink); align-self: center; }
.delta.dn { background: color-mix(in oklch, var(--bad) 17%, transparent); color: var(--bad-ink); }
.delta svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* dot-matrix chart: unlit dots dim, lit dots coloured */
.dm { display: flex; gap: 4px; flex: none; }
.dc { display: flex; flex-direction: column; gap: 4px; }
.dc i { width: 6px; height: 6px; border-radius: 50%; background: color-mix(in oklch, var(--ink) 12%, transparent); }
.dc i.on { background: color-mix(in oklch, var(--a) 46%, var(--card)); }
.dc.me i.on { background: var(--a); }
.dc.w i.on { background: var(--good); } .dc.l i.on { background: var(--bad); } .dc.t i.on { background: var(--warn); }
#app.enter-fwd .dc i.on, #app.enter-back .dc i.on, #app.enter .dc i.on { animation: dotIn .45s var(--ease) both; animation-delay: calc(var(--c) * 40ms); }
@keyframes dotIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (max-width: 340px) { .dm .dc:nth-child(n+9) { display: none; } }
@media (prefers-reduced-motion: reduce) { #app.enter-fwd .dc i.on, #app.enter-back .dc i.on, #app.enter .dc i.on { animation: none !important; } }

/* controls: pill tracks, the chosen item a lighter pill */
.seg { border-radius: 999px; background: var(--sunken); border: 1px solid var(--hair); box-shadow: inset 0 1px 3px oklch(0 0 0 / .28); }
.seg button, .segpill { border-radius: 999px; }
.segpill, .seg button.on { background: var(--field); box-shadow: inset 0 1px 0 oklch(1 0 0 / .07), 0 1px 3px oklch(0 0 0 / .35); }
.seg.pilled button.on { background: transparent; box-shadow: none; }
.chip, .hchip { border-radius: 999px; }

/* floating pill tab bar: selected is simply brighter */
nav { border-radius: 999px; padding: 10px 14px; background: linear-gradient(180deg, color-mix(in oklch, var(--ink) 5%, var(--float)), var(--float)); border: 1px solid var(--hair); box-shadow: inset 0 1px 0 oklch(1 0 0 / .06), 0 14px 34px -14px var(--shadow-c); }
nav button { color: var(--ink-muted); border-radius: 999px; }
nav button.on { color: var(--ink); } nav button.on svg { stroke: currentColor; }
.navpill { background: color-mix(in oklch, var(--ink) 6%, transparent); box-shadow: none; border-radius: 999px; }

/* team rows: a tile on the left, a dot and the number on the right */
.trow { padding: 12px 10px; border-radius: var(--r-md); }
.trow .num { width: 56px; min-width: 56px; height: 56px; padding: 0; display: grid; place-items: center; border-radius: 14px; background: var(--field); font: 500 13px var(--mono); }
.trow.us .num { background: var(--a); color: var(--on-accent); }
.trow .rv { display: inline-flex; align-items: center; gap: 8px; font: 400 17px var(--font); font-variant-numeric: tabular-nums; margin-right: 6px; }
.rdot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-muted); } .rdot.g { background: var(--good); } .rdot.y { background: var(--warn); } .rdot.r { background: var(--bad); }
input, select, textarea { border-radius: var(--r-md); }
@media (min-width: 860px) { .home { grid-template-columns: 1fr; } .panel { grid-template-columns: 1fr 1fr; } .phead { grid-column: 1 / -1; } }

/* ===== Logo: bare viewfinder glyph + clean wordmark ===== */
.brand { gap: var(--s-3); }
.glyph { width: 34px; height: 34px; flex: none; color: var(--a); }
.wordmark { font: 600 24px/1.1 var(--font); letter-spacing: -0.035em; color: var(--ink); }
#evname { margin-top: 3px; }

/* ===== No outlines: shapes are told apart by surface steps, not by lines (focus rings stay) ===== */
.card, .card.us, .panel, .stat, .next, .homehero, nav, .seg, #sync, #theme, header, .trow, .tile, .vs .side, details.card, #modal > div, #menu { border-color: transparent; }
button, input, select, textarea, .sel, .evpick .sel, .composer { border-color: transparent; }
input, select, textarea, .sel, .evpick .sel { background: var(--sunken); }
button { background: var(--field); }
button.p, .composer.has button { background: var(--accent-fill); }
.seg button, nav button, button.link, button.d, .ib { background: transparent; }
.ib { background: var(--field); }
.card.us { background: linear-gradient(180deg, color-mix(in oklab, var(--ink) 8%, var(--card)), color-mix(in oklab, var(--ink) 3%, var(--card))); }
.chip, .chip.gn, .chip.rd, .chip.me, .chip.on { border-color: transparent; background: var(--field); }
.chip.gn { background: var(--success-soft); color: var(--success); } .chip.rd { background: var(--danger-soft); color: var(--danger); }
.chip.me { background: var(--a); color: var(--on-accent); } .chip.on { background: var(--a-soft); color: var(--accent-text); }
.hchip, .res, .mtag { border-color: transparent; }
.vs .side { background: color-mix(in oklab, var(--ink) 4%, var(--card)); }
.vs .side.r { background: color-mix(in oklab, var(--alliance-red, var(--red)) 20%, var(--card)); } .vs .side.b { background: color-mix(in oklab, var(--alliance-blue, var(--blue)) 20%, var(--card)); }
.vs .side.mine { border-color: transparent; }
.vs .side.r.mine { box-shadow: inset 0 4px 0 var(--alliance-red); } .vs .side.b.mine { box-shadow: inset 0 4px 0 var(--alliance-blue); }
.vs .side.r.mine { background: color-mix(in oklab, var(--alliance-red, var(--red)) 36%, var(--card)); } .vs .side.b.mine { background: color-mix(in oklab, var(--alliance-blue, var(--blue)) 36%, var(--card)); }

/* ================= Glass controls ================= */
button:where(:not(.link):not(.d):not(.p):not(.chip):not(.sel):not(.mi)), .ib, #theme, .segpill { background: var(--g-fill), var(--field); box-shadow: var(--g-edge), var(--g-drop); -webkit-backdrop-filter: blur(var(--blur-ctl)) saturate(1.5); backdrop-filter: blur(var(--blur-ctl)) saturate(1.5); }
button:where(:not(.link):not(.d):not(.p):not(.chip):not(.sel):not(.mi)):hover, .ib:hover, #theme:hover, .segpill:hover { background: var(--g-fill), var(--field) !important; filter: brightness(1.14); }
button.p, .composer.has button { background: linear-gradient(160deg, color-mix(in oklch, var(--a) 100%, white 16%), color-mix(in oklch, var(--a) 100%, black 14%)); box-shadow: inset 0 1px 0 oklch(1 0 0 / .38), inset 0 -1px 0 oklch(0 0 0 / .14), 0 8px 18px -10px color-mix(in oklch, var(--a) 70%, black); }
.seg button, nav button, .composer.has button.p-off, .seg.pilled button.on { background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; filter: none; }
nav { background: var(--g-fill), var(--g-bar); box-shadow: var(--g-edge), 0 14px 34px -14px var(--shadow-c); -webkit-backdrop-filter: blur(var(--blur-ctl)) saturate(1.5); backdrop-filter: blur(var(--blur-ctl)) saturate(1.5); }
.navpill { background: var(--g-fill); box-shadow: var(--g-edge); }
#sync { background: var(--sunken); }

.wordmark { line-height: 0; }

/* ===== A real slide: the old content leaves as a ghost while the new content travels in ===== */
.ghost { position: fixed; z-index: 4; pointer-events: none; overflow-x: clip; }
.gin { will-change: transform; }
#app.enter-fwd, #app.enter-back { animation: none; }
#app.enter-fwd .trow, #app.enter-back .trow, #app.enter-fwd .homehero, #app.enter-back .homehero { animation: none; }

/* the hovered tab or switch item must not draw its own pill under the gliding one */
nav button:hover, .seg button:hover { background: transparent !important; filter: none !important; }
nav button:hover { color: var(--ink); }
html, body, #app { overflow-anchor: none; }
html, body { overflow-x: clip; }

/* the app column clips the sliding pages, so on a wide screen nothing travels across the side margins */
#appclip { max-width: 860px; margin: 0 auto; overflow-x: clip; }
#appclip > main { max-width: none; margin: 0; }
@media (min-width: 860px) { .panel > .stat:only-child { grid-column: 1 / -1; } }