/* v0.5.12 SPHINKS shell for the v0.5 app.
   Loaded last: tokens.css + sphinks.css + the v0.4 style.css give the SPHINKS look; this file only
   maps the v0.5-only classes (ui.css) onto the same tokens, in light and dark. */
:root,[data-theme]{--danger:var(--app-bad)}

/* Header: the account chip and the logout button sit at the end of the tab row */
.sx-nav .sx-logout{min-height:var(--sx-touch);margin-left:4px}
@media(max-width:680px){
  .sx-nav__menu .sx-nav__user{justify-content:flex-start;width:100%;max-width:none;min-height:48px;margin:0;padding:0 12px;border-radius:10px}
  .sx-nav__menu .sx-logout{justify-content:center;width:100%;min-height:48px;margin:0;border-radius:10px}
}

/* v0.5 buttons (.button / .button.ghost) = SPHINKS pills */
.button{min-height:44px;padding:0 20px;border:var(--sx-border) solid var(--sx-edge);border-radius:var(--sx-radius-pill);background:var(--sx-primary);color:var(--sx-text-on-color);font-family:inherit;font-weight:700;box-shadow:var(--sx-offset-btn) var(--sx-offset-btn) 0 var(--sx-shadow);transition:transform .08s ease,box-shadow .08s ease}
.button:hover{opacity:1;transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--sx-shadow)}
.button:active{transform:translate(var(--sx-offset-btn),var(--sx-offset-btn));box-shadow:0 0 0 var(--sx-shadow)}
.button.ghost{background:var(--sx-card);color:var(--sx-ink);border-color:var(--sx-edge);box-shadow:none}
.button.ghost:hover{background:var(--sx-soft);transform:none;box-shadow:none}
.button:focus-visible{outline:3px solid var(--sx-sapphire);outline-offset:2px}

/* .page-heading (Admin, Profil, Sync) = the same SPHINKS hero as .page-head */
.page-heading{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:32px}
.page-heading>div:first-child{display:flex;flex-direction:column;gap:10px;max-width:760px;min-width:0}
.page-heading .eyebrow{font-size:13px;letter-spacing:.32em}
.page-heading .eyebrow::before{content:"·";padding-right:.45em}
.page-heading .eyebrow::after{content:"·";padding-left:.2em}
.page-heading h1{position:relative;align-self:flex-start;margin:0 60px 0 0}
.page-heading h1::after{content:"";position:absolute;right:-30px;top:2px;width:12px;height:12px;border-radius:50%;background:var(--sx-ruby);
  box-shadow:-16px 24px 0 -2.5px var(--sx-sapphire),8px 42px 0 -1.5px var(--sx-amber),-24px 56px 0 -3.5px var(--sx-emerald);pointer-events:none}
.page-heading p.muted{margin:0;font-size:var(--sx-fs-lead);line-height:1.5;max-width:720px}
.page>.panel+.panel{margin-top:var(--sx-gap)}
.panel .table-wrap,.panel table{max-width:100%}
.panel:has(> table){overflow-x:auto}

/* Cards, notices, forms */
.deck-card,.login-card{background:var(--sx-card);border:var(--sx-border) solid var(--sx-edge);border-radius:var(--sx-radius-card);box-shadow:var(--sx-offset) var(--sx-offset) 0 var(--sx-shadow)}
.deck-card:hover{border-color:var(--sx-amber);opacity:1}
.deck-card small,.brand small{color:var(--sx-muted)}
.deck-icon{color:var(--sx-amethyst)}
.notice{background:color-mix(in srgb,var(--sx-amber) 18%,var(--sx-card));border:var(--sx-border) solid var(--sx-amber);border-radius:var(--sx-radius-box);color:var(--sx-ink)}
.form-status{color:var(--sx-ink)}
.form-status.error{color:var(--app-bad)}
.back-link{color:var(--sx-ink);font-weight:600;text-decoration:underline;text-underline-offset:4px}
label{color:var(--sx-ink)}
input,select,textarea{background:var(--sx-card);color:var(--sx-ink)}
.card-preview-trigger{color:var(--sx-ink)}
.card-preview-close{background:var(--sx-card);color:var(--sx-ink)}
.toast{background:var(--sx-card);color:var(--sx-ink)}

/* v0.5.25: a checkbox in a v0.5 form (e.g. Duels-Sync "Verbindung aktiviert") sits left of its text; the shared
   rules (.stack-form label = grid, input = full width) put a lone centred box above the text */
.stack-form label:has(> input[type=checkbox]){display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;cursor:pointer}
.stack-form label > input[type=checkbox]{flex:0 0 auto;width:18px;height:18px;min-height:0;margin:0;padding:0}

/* v0.5.28 Matchup Matrix: team cells (no link) laid out like the linked ones; archetype headers on two lines */
.mx-cell .mx-cell-static{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;border-radius:8px}
.mx-col-label--two{display:inline-grid;justify-items:center;gap:1px;max-width:96px;white-space:normal;overflow-wrap:anywhere;text-align:center;line-height:1.15;font-size:12px}
.mx-col-label--two small{font-size:10px;font-weight:500;color:var(--sx-muted)}

/* Settings → Darstellung */
.display-card{max-width:640px}
/* v0.5.21: stacked cards on ported pages keep the SPHINKS gap */
.page>.sx-card+.sx-card,.page>.sx-card+section,.page>section+.sx-card{margin-top:var(--sx-gap)}

/* v0.5.33 Match History: games of one BO2/BO3 match under a match header; format badge on every row */
.match-group{border-left:4px solid var(--sx-amber);background:color-mix(in srgb,var(--sx-amber) 5%,transparent)}
.match-group.result-loss{border-left-color:var(--sx-loss-mark)}
.match-group-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:8px 12px;border-bottom:1px solid var(--line)}
.match-group-title{display:inline-flex;align-items:center;gap:6px;flex:1 1 auto;min-width:0;font-size:var(--sx-fs-small)}
.match-group-head .button{padding:4px 10px;min-height:0;font-size:var(--sx-fs-small)}
.match-group-head .form-status{font-size:var(--sx-fs-small)}
/* v0.5.36 Admin → Betrieb */
.ops-panel+.ops-panel{margin-top:var(--sx-gap)}
.ops-state{font-weight:700}
.ops-state.ok{color:var(--good)}
.ops-state.bad{color:var(--bad)}
.ops-actions{display:flex;flex-wrap:wrap;gap:6px}
.ops-actions .button,.ops-panel .head-actions .button{padding:4px 10px;min-height:0;font-size:var(--sx-fs-small)}
.ops-table td small{font-size:12px}

/* v0.5.45 Proxygenerator: card picture next to each search hit */
.proxy-result{align-items:center}
.proxy-thumb{flex:0 0 36px;width:36px;height:50px;object-fit:cover;border-radius:4px;border:1px solid var(--line);background:var(--panel2)}

/* v0.5.47 walkthroughs (tour-v050.js): the ring's wide shadow dims everything around the highlighted element */
.tour-shade{position:fixed;inset:0;z-index:1000;background:transparent}
.tour-shade--dim{background:rgba(0,0,0,.55)}
.tour-ring{position:fixed;z-index:1001;border:3px solid var(--sx-amber);border-radius:12px;box-shadow:0 0 0 9999px rgba(0,0,0,.55);pointer-events:none;transition:top .2s ease,left .2s ease,width .2s ease,height .2s ease}
.tour-card{position:fixed;z-index:1002;top:50%;left:50%;width:min(380px,calc(100vw - 24px));padding:18px 20px;background:var(--sx-card);color:var(--sx-ink);border:var(--sx-border) solid var(--sx-edge);border-radius:var(--sx-radius-card);box-shadow:var(--sx-offset) var(--sx-offset) 0 var(--sx-shadow)}
.tour-card{transform:translate(-50%,-50%)}
.tour-card.tour-card--placed{transform:none}
.tour-count{margin:0 0 4px;font-size:12px;letter-spacing:.12em;color:var(--sx-muted)}
.tour-title{margin:0 0 6px;font-size:20px}
.tour-text{margin:0 0 14px;line-height:1.5}
.tour-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.tour-actions .button{min-height:40px;padding:0 16px}
.tour-actions .tour-skip{margin-right:auto}
.tour-restart{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.tour-restart .button{display:inline-flex;align-items:center;text-decoration:none}
@media(max-width:599px){.tour-card:not(.tour-card--center){top:auto;bottom:12px;left:12px;right:12px;width:auto;transform:none}}

/* v0.5.40 Team Knowledge hub */
.hub-text{white-space:pre-wrap;line-height:1.5}
.hub-up{color:var(--good);font-weight:700}
.hub-down{color:var(--bad);font-weight:700}
.hub-turns{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--sx-gap)}
.hub-turns ul{margin:0;padding-left:18px;display:grid;gap:4px}
.hub-note{padding:12px 0;border-bottom:1px solid var(--line)}
.hub-note h3{margin:0 0 2px}
.hub-matchups .hub-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--text)}
.hub-matchups .hub-row:hover strong{text-decoration:underline}

/* v0.5.38 contrast in light and dark (WCAG AA): dimming whole elements with opacity made their text unreadable –
   only non-text parts are dimmed now (shared v0.4 rules in static/style.css stay untouched) */
.mx-thin{opacity:1;background-image:repeating-linear-gradient(135deg,transparent 0 5px,color-mix(in srgb,var(--text) 10%,transparent) 5px 7px)}
.calendar-day.other-month{opacity:1;background:transparent;border:1px dashed var(--line)}
.calendar-day.other-month .calendar-date{color:var(--muted)}
.calendar-weekday.is-weekend,.calendar-day.weekend .calendar-date,.calendar-day.holiday .calendar-date{color:var(--bad)}
.ink-choice{opacity:1;color:var(--muted)}
.ink-choice:not(.selected) img{opacity:.5}
.ink-choice:hover img,.ink-choice.selected{opacity:1;color:var(--text)}
.replay-zoom-button.active{color:color-mix(in srgb,var(--accent) 75%,var(--text))}
.ltd-ink.ltd-ink{color:var(--sx-text-on-color)}  /* dark text on the bright ink pills, in both themes */
.button.secondary{color:var(--text)}
.match-format-badge{display:inline-block;padding:0 6px;border:1px solid var(--sx-edge);border-radius:var(--sx-radius-pill);font-size:11px;font-weight:700;letter-spacing:.02em}