/* Platform additions on top of the prototype design system (base.css) */
main.wrap{padding-block:0 3rem}
main.bare{padding-top:1.5rem}
.tabs{margin-block:1.2rem}
.tabs a{border:1px solid var(--line);background:var(--surface);padding:.55rem .95rem;color:var(--muted);white-space:nowrap;transform:skewX(-10deg);border-radius:6px;text-decoration:none;font-weight:700;font-size:.9rem}
.tabs a>span.t{display:inline-block;transform:skewX(10deg)}
.tabs a[aria-current="page"]{background:var(--fire);color:#fff;border-color:transparent}
.tabs a:hover{border-color:var(--accent)}
a{color:inherit}
a:hover{color:var(--accent)}
.btn,button{text-decoration:none}
.inline{display:inline}
.end{justify-content:flex-end}
.block{display:block}
.tight{gap:.25rem}
.narrow{max-width:440px;margin:2rem auto}
.wide{grid-column:1/-1}
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:.7rem;align-items:end}
.fgrid2{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.prefix{display:flex;align-items:center;border:1px solid var(--line);border-radius:8px;background:var(--sunk);overflow:hidden}
.prefix span{padding-left:.7rem;color:var(--muted);font-size:.85rem;white-space:nowrap}
.prefix input{border:0;background:transparent}
.flash{padding:.75rem 1rem;border-radius:10px;margin-block:1rem;font-weight:600;border:1px solid var(--line);background:var(--surface)}
.flash-ok{border-color:var(--ok);color:var(--ok);background:var(--ok-soft)}
.flash-bad{border-color:var(--bad);color:var(--bad);background:var(--bad-soft)}
.flash-warn{border-color:var(--warn);color:var(--warn);background:var(--warn-soft)}
.chkrow{cursor:pointer}
.chkrow input{width:auto;accent-color:var(--accent)}
.dim{opacity:.55}
.warnbg{background:var(--warn-soft);color:var(--warn)}
.price{font-family:var(--display);font-style:italic;font-weight:800;font-size:2rem}
.price small{font-size:.9rem;color:var(--muted);font-weight:600}
.steps{display:grid;gap:.4rem;padding-left:1.2rem;margin:0}
.sm-select{width:auto;padding:.3rem .4rem;font-size:.78rem}
.logo{width:28px;height:28px;border-radius:6px;object-fit:cover}
.hero{padding-block:2.5rem 1.5rem;display:grid;gap:1rem;max-width:62ch}
.hero h1{font-size:clamp(2.6rem,7vw,4.8rem);line-height:.9}
.hero h1 em{display:block}
.lead{font-size:1.1rem;color:var(--muted)}
.login-hero{display:grid;grid-template-columns:1.1fr 1fr;gap:2rem;padding-block:2rem;align-items:start}
.login-hero h1{font-size:clamp(2.8rem,8vw,5.4rem);line-height:.88}
.login-hero h1 em{display:block}
.login-hero form{display:grid;gap:.9rem}
details.inv{display:block}
details.inv summary{display:flex;justify-content:space-between;gap:.6rem;align-items:center;cursor:pointer;list-style:none;flex-wrap:wrap}
details.inv summary::-webkit-details-marker{display:none}
details.inv[open]{display:grid;gap:.7rem}
.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:.5rem}
.sw-opt{display:grid;gap:.4rem;padding:.6rem;border:1px solid var(--line);border-radius:10px;cursor:pointer;background:var(--raise)}
.sw-opt input{position:absolute;opacity:0}
.sw-opt:has(input:checked){border-color:var(--fg);box-shadow:0 0 0 1px var(--fg)}
.sw-opt:has(input:focus-visible){outline:2px solid var(--accent2);outline-offset:2px}
.g{height:28px;border-radius:6px;display:block}
.g-fire{background:linear-gradient(100deg,#FF2D55,#FF5A2B,#FFB300)} .g-volt{background:linear-gradient(100deg,#2F7BFF,#3AA0FF,#22D3EE)}
.g-grape{background:linear-gradient(100deg,#7C3AED,#C026D3,#F472B6)} .g-jungle{background:linear-gradient(100deg,#059669,#10B981,#A3E635)} .g-gold{background:linear-gradient(100deg,#EA580C,#F59E0B,#FACC15)}
.foot{padding-block:1.5rem 2.5rem;color:var(--muted);font-size:.78rem}
button[disabled]{opacity:.5;cursor:not-allowed}
@media (max-width:860px){.login-hero{grid-template-columns:1fr}}

/* custom theme: text colour that reads on the gym's own colours */
.primary,.tabs a[aria-current="page"],.card-m,.toast,.pr,.dev .ic.on,.chan[aria-pressed="true"] i{color:var(--on-fire,#fff)}
.card-m .lbl{color:inherit;opacity:.8}
.theme-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:.6rem}
.colorf{display:flex;gap:.5rem;align-items:center}
.colorf input[type=color]{width:46px;height:40px;padding:2px;border-radius:8px;cursor:pointer}
.hd-opt{display:grid;gap:.2rem;padding:.7rem;border:1px solid var(--line);border-radius:10px;cursor:pointer;background:var(--raise)}
.hd-opt input{position:absolute;opacity:0}
.hd-opt:has(input:checked){border-color:var(--fg);box-shadow:0 0 0 1px var(--fg)}
.hd-opt b{font-size:1.5rem;line-height:1.1}
.g-custom{background:var(--g-custom,linear-gradient(100deg,#888,#ccc))}
.theme-preview{display:grid;gap:.6rem;padding:1rem;border-radius:12px;border:1px solid var(--line);background:var(--bg)}
.thm-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,170px),1fr))}