/* Gymora — app layer on the Ownware UI kit (assets/ui/ownware-ui.css). Accent + app-specific rules only; generic rules come from the kit. */
:root{--accent:#7c3aed;--accent-dark:#6d28d9;--accent-soft:#f0e9ff;--on-accent:#ffffff;--accent-ink:var(--on-accent)}
html[data-theme="dark"]{--accent:#c4b5fd;--accent-dark:#ddd6fe;--accent-soft:#2a2150;--on-accent:#12081f;--accent-ink:var(--on-accent)}

/* membership statuses the kit doesn't know */
.pill.active{background:var(--okbg);color:var(--ok)}
.pill.frozen{background:var(--infobg);color:var(--info)}
.pill.expired{background:var(--badbg);color:var(--bad)}
.pill.cancelled,.pill.off{background:var(--chip);color:var(--sub)}

.grid-side{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;align-items:start}
.review-grid{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:20px;align-items:start}
.brandmark{max-height:26px;max-width:120px;object-fit:contain}

/* ── the front desk (the hero) ── */
.desk-search{display:flex;gap:8px;margin-bottom:16px}
.desk-search input{font-size:1.15rem;min-height:54px;padding:12px 16px;border-radius:12px}
.desk-search input:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.desk-search .btn{min-height:54px;padding-left:22px;padding-right:22px}

.deskcard{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px 16px;align-items:center;background:var(--card);border:1px solid var(--line);border-left:4px solid var(--faint);border-radius:var(--radius);padding:14px 18px;margin-bottom:10px;box-shadow:var(--shadow)}
.deskcard.ok{border-left-color:var(--ok)}
.deskcard.no{border-left-color:var(--bad);background:color-mix(in srgb,var(--bad) 3%,var(--card))}
.deskcard.seen{opacity:.72;border-left-color:var(--accent)}
.deskcard .nm{font-size:1.08rem;font-weight:700;display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.deskcard .nm a{color:var(--ink)} .deskcard .nm a:hover{color:var(--accent);text-decoration:none}
.deskcard .meta{color:var(--sub);font-size:.9rem;margin-top:3px}
.deskcard .act{display:flex;gap:8px;align-items:center;flex:0 0 auto}
.deskcard .act .btn.lg{min-height:46px}
.deskcard .why{grid-column:1/-1;font-size:.9rem;color:var(--bad);display:flex;gap:8px;align-items:center;flex-wrap:wrap;border-top:1px dashed var(--line);padding-top:10px}
.deskcard .why a{margin-left:auto;font-weight:600}

/* a .s subtitle nested inside a .t title is a second line, not a run-on (rail lists) */
.list .t .s{display:block;margin-top:1px}

/* ── member record ── */
dl.kv{display:grid;grid-template-columns:120px 1fr;gap:8px 12px;margin:0}
dl.kv dt{font-size:.82rem;font-weight:700;color:var(--sub)}
dl.kv dd{margin:0}
.member-hero{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:center}
.member-hero .av{width:56px;height:56px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:1.3rem;flex:0 0 auto}
.credit-bar{height:8px;border-radius:4px;background:var(--chip);overflow:hidden;margin:8px 0 4px}
.credit-bar i{display:block;height:100%;background:var(--accent);border-radius:4px}
.credit-bar.low i{background:var(--warn)} .credit-bar.none i{background:var(--bad)}

@media(max-width:900px){
  .grid-side,.review-grid{grid-template-columns:minmax(0,1fr)}
  .deskcard{grid-template-columns:minmax(0,1fr)}
  .deskcard .act{justify-content:flex-start}
  .member-hero{grid-template-columns:auto minmax(0,1fr)}
}
@media(max-width:520px){
  .desk-search{flex-wrap:wrap} .desk-search input{min-width:100%}
  .deskcard .act .cls{flex:1}
}

/* ── kiosk (3.1): the member-facing terminal, on the kit's public frame ──────────────
   A tablet bolted to a wall is read from two metres away by somebody still holding a gym bag, so
   the code field and the verdict are deliberately larger than anything else in the product.

   Specificity note, because it is not obvious and it bit this screen once already: the kit's field
   reset is `input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])`,
   which scores (0,4,1) — a plain `.kiosk .code` (0,2,0) loses to it, and `font:inherit` in that
   reset takes the font-size with it. The kiosk's own <style> block did exactly that and the giant
   code field it described never once rendered; only the letter-spacing (which the kit does not
   set) survived. These selectors match the kit's weight and win on order, with no !important. */
.pub.kiosk{max-width:560px;padding-top:6vh}
.pub.kiosk .card{text-align:center}
.pub.kiosk h1{font-size:2rem}
.pub.kiosk .lead{margin-left:auto;margin-right:auto}
.pub.kiosk .card input.code{font-family:var(--mono);font-size:2.2rem;letter-spacing:.3em;text-align:center;text-transform:uppercase;padding:16px 12px;min-height:76px}
.pub.kiosk .verdict{padding:26px 20px;border-radius:14px;margin:0 0 18px;font-size:1.3rem;font-weight:700;line-height:1.3}
.pub.kiosk .verdict.ok{background:var(--okbg);color:var(--ok)}
.pub.kiosk .verdict.no{background:var(--badbg);color:var(--bad)}
.pub.kiosk .verdict .sub{font-size:.95rem;font-weight:400;margin-top:8px;opacity:.9}
.pub.kiosk .trust{justify-content:center;margin-top:20px}
/* Staff exit: present, but never competing with the member's own control. */
.pub.kiosk .kiosk-exit{margin-top:7vh;opacity:.55;transition:opacity .15s}
.pub.kiosk .kiosk-exit:hover,.pub.kiosk .kiosk-exit:focus-within{opacity:1}
.pub.kiosk .kiosk-exit form{display:flex;gap:8px;justify-content:center;align-items:center}
.pub.kiosk .kiosk-exit input[name="pin"]{max-width:150px}

@media(max-width:520px){
  .pub.kiosk{padding-top:3vh}
  .pub.kiosk h1{font-size:1.6rem}
  .pub.kiosk .card input.code{font-size:1.7rem;letter-spacing:.22em;padding:12px 8px;min-height:62px}
  .pub.kiosk .verdict{font-size:1.1rem;padding:20px 14px}
  .pub.kiosk .kiosk-exit{margin-top:4vh}
  .pub.kiosk .kiosk-exit form{flex-wrap:wrap}
}