/* forms.css — FORM KIT (helpers/formKit.js, static/js/form-kit.js)
   Loaded by both layouts (main + dashboard) after the base stylesheets.
   Visual spec: docs/design/form-kit-designs.html. Only --fk-* tokens are defined here;
   every colour otherwise comes from the BRAND COLOR CONTROL block in style.css. */

:root{
  --fk-ease:cubic-bezier(.32,.72,0,1);
  --fk-out:cubic-bezier(.16,1,.3,1);
  --fk-line-strong:rgba(148,163,184,.34);
  --fk-input-line:rgba(148,163,184,.2);
  --fk-err-tx:var(--legacy-red-400);
  --fk-accent-tx:var(--brand-primary-light);
  --fk-info:#60a5fa;
  --fk-info-rgb:96,165,250;
  --fk-shadow:0 18px 40px -14px rgba(0,0,0,.55);
  --fk-display:"Oxanium","Space Grotesk",sans-serif;
  --fk-mono:ui-monospace,SFMono-Regular,Consolas,monospace;
}
html[data-theme="light"]{
  --fk-line-strong:rgba(30,41,59,.26);
  --fk-input-line:rgba(30,41,59,.16);
  --fk-err-tx:var(--st-error);
  --fk-accent-tx:var(--brand-primary-dark);
  --fk-info:#1e40af;
  --fk-info-rgb:30,64,175;
  --fk-shadow:0 14px 34px -14px rgba(15,23,42,.25);
}

/* ── Labels, hints, errors ─────────────────────────────── */
.form-req{color:var(--fk-err-tx);margin-left:.2rem}
.fk-label-icon{margin-right:.4rem;color:var(--text-muted);font-size:.85em}
.form-error{display:flex;gap:.4rem;align-items:baseline;margin-top:.35rem;font-size:.78rem;font-weight:600;color:var(--fk-err-tx)}
.form-error[hidden]{display:none}
.form-foot{display:flex;align-items:baseline;gap:.75rem}
.form-foot .form-hint{flex:1;min-width:0}
.form-counter{margin-left:auto;margin-top:.35rem;font-size:.72rem;color:var(--text-muted);font-variant-numeric:tabular-nums;font-family:var(--fk-mono)}
.form-counter.is-near{color:var(--st-warning)}
.form-counter.is-over{color:var(--fk-err-tx)}

/* ── Control states (additive to style.css/components.css) ── */
.form-control{border-color:var(--fk-input-line);transition:border-color .2s var(--fk-out),box-shadow .2s var(--fk-out),background-color .2s var(--fk-out)}
.form-control:hover:not(:disabled):not(:focus){border-color:var(--fk-line-strong)}
.form-control:focus{border-color:var(--brand-primary);box-shadow:0 0 0 3px rgba(var(--brand-primary-rgb),.22)}
.form-control[readonly]{border-style:dashed;color:var(--text-secondary)}
.form-control[aria-invalid="true"]{border-color:var(--st-error);background-color:color-mix(in srgb,var(--form-input-bg) 92%,rgb(var(--st-error-rgb)))}
/* Browser autofill paints its own light-blue fill + dark text, ignoring the theme; repaint with an inset shadow. */
.form-control:-webkit-autofill,.form-control:-webkit-autofill:hover,.form-control:-webkit-autofill:focus{-webkit-text-fill-color:var(--text-primary);caret-color:var(--text-primary);-webkit-box-shadow:0 0 0 1000px var(--form-input-bg) inset;transition:background-color 9999s 0s}
.form-control[aria-invalid="true"]:focus{box-shadow:0 0 0 3px rgba(var(--st-error-rgb),.22)}

/* ── Fieldsets ─────────────────────────────────────────── */
.form-section{border:0;padding:0;margin:0;min-width:0;display:flex;flex-direction:column;gap:.5rem}
.form-section > legend{padding:0;margin-bottom:.15rem}

/* ── Input group ──────────────────────────────────────── */
.fk-group{display:flex;align-items:stretch}
.fk-group > *{border-radius:0}
.fk-group > .form-control{flex:1;min-width:0}
.fk-group > :first-child{border-top-left-radius:.5rem;border-bottom-left-radius:.5rem}
.fk-group > :last-child{border-top-right-radius:.5rem;border-bottom-right-radius:.5rem}
.fk-group > :not(:first-child){margin-left:-1px}
.fk-group > .esports-btn{clip-path:none}
.fk-affix{display:flex;align-items:center;padding:0 .8rem;white-space:nowrap;background:var(--bg-secondary);border:1px solid var(--fk-input-line);color:var(--text-muted);font-size:.85rem;font-weight:600}

/* ── Password show/hide ───────────────────────────────── */
.fk-pw{position:relative}
.fk-pw .form-control{padding-right:2.75rem}
.fk-pw-toggle{position:absolute;right:.35rem;top:50%;transform:translateY(-50%);background:none;border:0;padding:.4rem .5rem;border-radius:.4rem;color:var(--text-muted);cursor:pointer;line-height:1}
.fk-pw-toggle:hover{color:var(--text-primary);background:var(--border-subtle)}
.fk-pw-toggle:focus-visible{outline:2px solid var(--brand-primary);outline-offset:1px}
.fk-meter{display:flex;gap:4px;margin-top:.4rem}
.fk-meter i{flex:1;height:4px;border-radius:2px;background:var(--border-default)}
.fk-meter[data-s="1"] i:nth-child(-n+1){background:var(--st-error)}
.fk-meter[data-s="2"] i:nth-child(-n+2){background:var(--st-warning)}
.fk-meter[data-s="3"] i:nth-child(-n+3),.fk-meter[data-s="4"] i{background:var(--st-success)}

/* ── Checkbox / radio rows (custom box on a real input) ── */
.fk-options{display:flex;flex-direction:column;gap:.6rem}
.fk-options--inline{flex-direction:row;flex-wrap:wrap;gap:.6rem 1.35rem}
.fk-check{display:flex;align-items:flex-start;gap:.65rem;cursor:pointer;color:var(--text-secondary);font-size:.9rem}
.fk-check-text small{display:block;font-size:.78rem;color:var(--text-muted)}
.fk-check > input[type="checkbox"]:not(.fk-switch),
.fk-check > input[type="radio"]{appearance:none;-webkit-appearance:none;flex:none;width:1.125rem;height:1.125rem;margin:.1rem 0 0;display:grid;place-items:center;cursor:pointer;
  border:1.5px solid var(--fk-line-strong);border-radius:.3rem;background:var(--form-input-bg);transition:background-color .15s var(--fk-out),border-color .15s var(--fk-out)}
.fk-check > input[type="radio"]{border-radius:50%}
.fk-check > input[type="checkbox"]:not(.fk-switch)::after{content:"";width:.55rem;height:.3rem;border:2px solid #fff;border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px) scale(0);transition:transform .15s var(--fk-ease)}
.fk-check > input[type="radio"]::after{content:"";width:.5rem;height:.5rem;border-radius:50%;background:#fff;transform:scale(0);transition:transform .15s var(--fk-ease)}
.fk-check > input:not(.fk-switch):checked{background:var(--brand-primary);border-color:var(--brand-primary)}
.fk-check > input[type="checkbox"]:not(.fk-switch):checked::after{transform:rotate(-45deg) translate(1px,-1px) scale(1)}
.fk-check > input[type="radio"]:checked::after{transform:scale(1)}
.fk-check > input[type="checkbox"]:indeterminate{background:var(--brand-primary);border-color:var(--brand-primary)}
.fk-check > input[type="checkbox"]:indeterminate::after{width:.5rem;height:0;border-left:0;border-bottom:2px solid #fff;transform:none}
.fk-check > input[aria-invalid="true"]{border-color:var(--st-error)}
.fk-check > input:focus-visible{outline:2px solid var(--brand-primary);outline-offset:2px}
.fk-check:has(input:disabled){opacity:.5;cursor:not-allowed}
.fk-file-remove{margin-top:.5rem;font-size:.82rem}

/* ── Switch ───────────────────────────────────────────── */
.fk-switch{appearance:none;-webkit-appearance:none;position:relative;flex:none;margin:.05rem 0 0;width:2.375rem;height:1.375rem;border-radius:999px;cursor:pointer;
  background:var(--bg-elevated);box-shadow:inset 0 0 0 1px var(--fk-line-strong);transition:background-color .2s var(--fk-out)}
.fk-switch::before{content:"";position:absolute;top:3px;left:3px;width:1rem;height:1rem;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.4);transition:transform .35s var(--fk-ease)}
.fk-switch:checked{background:var(--brand-primary);box-shadow:none}
.fk-switch:checked::before{transform:translateX(1rem)}
.fk-switch:focus-visible{outline:2px solid var(--brand-primary);outline-offset:2px}
.fk-switch:disabled{opacity:.5;cursor:not-allowed}
.fk-switch-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.75rem 0;border-bottom:1px solid var(--border-subtle);cursor:pointer}
.fk-switch-row:last-child{border-bottom:0}
.fk-switch-row b{display:block;font-size:.875rem;font-weight:600;color:var(--text-primary)}
.fk-switch-row small{font-size:.75rem;color:var(--text-muted)}

/* ── Segmented radio (JS adds a sliding thumb) ─────────── */
.fk-seg{--n:3;--i:0;position:relative;display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;padding:3px;align-self:flex-start;max-width:100%;
  background:var(--form-input-bg);border:1px solid var(--fk-input-line);border-radius:.7rem;isolation:isolate}
.fk-seg--full{display:grid;align-self:stretch}
.fk-seg-thumb{position:absolute;z-index:0;top:3px;bottom:3px;left:3px;width:calc((100% - 6px)/var(--n));border-radius:.5rem;
  background:linear-gradient(135deg,var(--brand-primary-dark),var(--brand-primary));box-shadow:0 4px 14px -4px rgba(var(--brand-primary-rgb),.7);
  transform:translateX(calc(var(--i)*100%));transition:transform .45s var(--fk-ease)}
.fk-seg-item{position:relative;z-index:1;min-width:0}
.fk-seg-item input{position:absolute;opacity:0;width:1px;height:1px}
.fk-seg-item span{display:flex;align-items:center;justify-content:center;gap:.45rem;padding:.45rem .95rem;border-radius:.5rem;font-size:.82rem;font-weight:600;color:var(--text-muted);cursor:pointer;white-space:nowrap;transition:color .25s var(--fk-out)}
.fk-seg-item span:hover{color:var(--text-primary)}
.fk-seg-item input:checked + span{color:#fff}
.fk-seg:not(.has-thumb) .fk-seg-item input:checked + span{background:var(--brand-primary)}
.fk-seg-item input:focus-visible + span{outline:2px solid var(--text-primary);outline-offset:-2px}
.fk-seg-item input:disabled + span{opacity:.45;cursor:not-allowed}

/* ── Radio cards ───────────────────────────────────────── */
.fk-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(11rem,1fr));gap:.65rem}
.fk-card{position:relative;display:flex;flex-direction:column;gap:.5rem;padding:.9rem;cursor:pointer;background:var(--form-input-bg);border:1px solid var(--fk-input-line);border-radius:.75rem;transition:border-color .2s var(--fk-out),background-color .2s var(--fk-out),transform .35s var(--fk-ease)}
.fk-card:hover{border-color:var(--fk-line-strong)}
.fk-card:active{transform:scale(.98)}
.fk-card input{position:absolute;opacity:0;width:1px;height:1px}
.fk-card-tick{position:absolute;top:.6rem;right:.6rem;width:1.125rem;height:1.125rem;border-radius:50%;border:1.5px solid var(--fk-line-strong);display:grid;place-items:center;font-size:.55rem;color:transparent}
.fk-card-soon{position:absolute;top:.6rem;right:.6rem;font:700 .6rem var(--fk-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);border:1px solid var(--border-default);padding:1px 6px;border-radius:3px}
.fk-card:has(input:checked){border-color:var(--brand-primary);background:rgba(var(--brand-primary-rgb),.07);box-shadow:inset 0 0 0 1px var(--brand-primary)}
.fk-card:has(input:checked) .fk-card-tick{background:var(--brand-primary);border-color:var(--brand-primary);color:#fff}
.fk-card:has(input:focus-visible){outline:2px solid var(--brand-primary);outline-offset:2px}
.fk-card:has(input:disabled){opacity:.45;cursor:not-allowed}
.fk-card-icon{width:2.1rem;height:2.1rem;display:grid;place-items:center;border-radius:.5rem;background:rgba(var(--brand-primary-rgb),.12);color:var(--fk-accent-tx);font-size:.95rem}
.fk-card-body{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.fk-card-title{font-family:var(--fk-display);font-weight:700;font-size:.875rem;letter-spacing:.02em;color:var(--text-primary)}
.fk-card-desc{font-size:.75rem;color:var(--text-muted);line-height:1.45}

/* ── Range + live value ───────────────────────────────── */
.fk-range{display:flex;align-items:center;gap:.9rem}
.fk-range input[type="range"]{flex:1;min-width:0;accent-color:var(--brand-primary)}
.fk-range output{min-width:4.5rem;text-align:center;font:600 .78rem var(--fk-mono);color:var(--text-primary);background:var(--form-input-bg);border:1px solid var(--fk-input-line);border-radius:.4rem;padding:.3rem .5rem}

/* ── Color swatch + hex ───────────────────────────────── */
.fk-color{display:flex;align-items:center;gap:.5rem}
.fk-color input[type="color"]{width:2.6rem;height:2.6rem;padding:.2rem;flex:none;cursor:pointer;background:var(--form-input-bg);border:1px solid var(--fk-input-line);border-radius:.5rem}
.fk-color .form-control{max-width:8rem;font-family:var(--fk-mono);text-transform:uppercase}
.fk-presets{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.5rem}
.fk-presets button{width:1.4rem;height:1.4rem;border-radius:50%;border:2px solid var(--bg-card);box-shadow:0 0 0 1px var(--fk-line-strong);cursor:pointer}
.fk-presets button[aria-pressed="true"]{box-shadow:0 0 0 2px var(--text-primary)}

/* ── File drop area ───────────────────────────────────── */
.fk-file{position:relative;display:flex;align-items:center;gap:.9rem;padding:1rem;background:var(--form-input-bg);border:1.5px dashed var(--fk-line-strong);border-radius:.75rem;transition:border-color .2s var(--fk-out),background-color .2s var(--fk-out)}
.fk-file:hover,.fk-file.is-drag,.fk-file:focus-within{border-color:var(--brand-primary);background:rgba(var(--brand-primary-rgb),.05)}
.fk-file:has(input[aria-invalid="true"]){border-color:var(--st-error);border-style:solid}
.fk-file input[type="file"]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.fk-file-icon{width:2.75rem;height:2.75rem;display:grid;place-items:center;border-radius:.5rem;background:var(--border-subtle);font-size:1.15rem;color:var(--text-muted);flex:none}
.fk-file-preview{width:3.5rem;height:3.5rem;object-fit:cover;border-radius:.5rem;flex:none;background:var(--bg-elevated)}
.fk-file-text{display:flex;flex-direction:column;min-width:0}
.fk-file-text strong{font-size:.875rem;font-weight:600;color:var(--text-primary);overflow-wrap:anywhere}
.fk-file-text strong em{font-style:normal;color:var(--fk-accent-tx)}
.fk-file-text span{font-size:.75rem;color:var(--text-muted)}

/* ── Action bar ───────────────────────────────────────── */
.form-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:.6rem;margin-top:1.25rem;padding-top:1rem;border-top:1px solid var(--border-subtle)}
.form-actions--between{justify-content:space-between}
.form-actions-note{margin-right:auto;font-size:.75rem;color:var(--text-muted);display:flex;gap:.4rem;align-items:center}
.form-actions--sticky{position:sticky;bottom:0;z-index:5;padding:.75rem 0;background:var(--bg-card)}
@media (max-width:480px){.form-actions > .esports-btn{flex:1 1 100%;justify-content:center}.form-actions-note{flex-basis:100%}}

/* ── Section title ────────────────────────────────────── */
.fk-section-title{display:flex;align-items:center;gap:.6rem;font:700 .75rem var(--fk-display);letter-spacing:.14em;text-transform:uppercase;color:var(--text-primary);margin:.25rem 0}
.fk-section-title::before{content:"";width:3px;height:14px;background:var(--brand-primary);transform:skewX(-14deg)}
.fk-section-title small{margin-left:auto;font-weight:500;font-size:.72rem;letter-spacing:0;text-transform:none;color:var(--text-muted)}

/* ── Error summary ────────────────────────────────────── */
.fk-summary{display:flex;gap:.75rem;margin-bottom:1rem;padding:.9rem 1rem;border-radius:.75rem;font-size:.85rem;color:var(--text-primary);background:rgba(var(--st-error-rgb),.08);border:1px solid rgba(var(--st-error-rgb),.4)}
.fk-summary > i{color:var(--fk-err-tx);font-size:1rem;margin-top:.1rem}
.fk-summary strong{display:block}
.fk-summary ul{margin:.35rem 0 0;padding-left:1.1rem;list-style:disc;color:var(--text-secondary)}
.fk-summary a{color:var(--text-primary);text-decoration:underline;text-decoration-color:rgba(var(--st-error-rgb),.6);text-underline-offset:3px}

/* The site forces border-radius:0 !important on button/input/img (style.css, tailwind, ui-layout,
   premium-esports). Controls whose shape carries meaning opt back out here — keep this list short. */
.fk-switch{border-radius:999px!important}
.fk-check > input[type="radio"]{border-radius:50%!important}
.fk-flt .form-control{border-radius:14px!important}
@media (prefers-reduced-motion:reduce){.fk-seg-thumb,.fk-switch::before,.fk-card{transition:none}}
/* ── Toasts (static/js/toast.js) · designs: docs/design/form-kit-designs.html#toasts ── */
.tk-region{position:fixed;z-index:10000;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column-reverse;gap:10px;width:min(380px,calc(100vw - 32px));pointer-events:none}
.tk-region > *{pointer-events:auto;touch-action:pan-y}
.tk{--tk-c:var(--brand-secondary-light);--tk-rgb:var(--brand-secondary-rgb);position:relative;display:flex;align-items:flex-start;gap:12px;padding:12px 10px 12px 14px;border-radius:16px;overflow:hidden;
  background:var(--bg-elevated);color:var(--text-primary);font-size:13px;
  box-shadow:0 18px 40px -14px rgba(0,0,0,.55),inset 0 0 0 1px var(--border-default),inset 3px 0 0 var(--tk-c)}
.tk-success{--tk-c:var(--st-success);--tk-rgb:var(--st-success-rgb)}
.tk-error{--tk-c:var(--legacy-red-400);--tk-rgb:var(--st-error-rgb)}
.tk-warning{--tk-c:var(--st-warning);--tk-rgb:var(--st-warning-rgb)}
html[data-theme="light"] .tk-error{--tk-c:var(--st-error)}
html[data-theme="light"] .tk{box-shadow:0 14px 34px -14px rgba(15,23,42,.25),inset 0 0 0 1px var(--border-default),inset 3px 0 0 var(--tk-c)}
.tk-ic{width:32px;height:32px;flex:none;border-radius:10px;display:grid;place-items:center;font-size:14px;color:var(--tk-c);background:rgba(var(--tk-rgb),.16)}
.tk-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;padding-top:6px}
.tk-title{font-size:13.5px;font-weight:700;color:var(--text-primary)}
.tk-title + .tk-msg{margin-top:0}
.tk-msg{color:var(--text-secondary);line-height:1.45;overflow-wrap:anywhere}
.tk-body:has(.tk-title){padding-top:0}
.tk-action{flex:none;align-self:center;height:30px;padding:0 12px;border:0;border-radius:99px;background:var(--border-default);color:var(--text-primary);font-weight:700;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;display:inline-flex;align-items:center;cursor:pointer}
.tk-action:hover{background:rgba(var(--tk-rgb),.25)}
.tk-x{flex:none;width:28px;height:28px;border:0;border-radius:8px;background:none;color:var(--text-muted);cursor:pointer;font-size:12px}
.tk-x:hover{background:var(--border-default);color:var(--text-primary)}
.tk-x:focus-visible,.tk-action:focus-visible{outline:2px solid var(--brand-primary);outline-offset:1px}
.tk-bar{position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--tk-c);opacity:.7;transform-origin:left;animation:tk-life var(--tk-dur,5s) linear forwards}
.tk-paused .tk-bar{animation-play-state:paused}
@keyframes tk-life{to{transform:scaleX(0)}}
.tk-solid{color:#fff;background:linear-gradient(135deg,rgba(var(--tk-rgb),1),rgba(var(--tk-rgb),.8));box-shadow:0 14px 34px -12px rgba(var(--tk-rgb),.7)}
.tk-solid .tk-ic{background:rgba(255,255,255,.18);color:#fff}
.tk-solid .tk-title,.tk-solid .tk-msg{color:#fff}
.tk-solid .tk-x{color:rgba(255,255,255,.8)}
.tk-solid .tk-bar{background:#fff;opacity:.5}
.tk-pill{align-self:flex-end;display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 16px 0 10px;border-radius:999px;background:#0b0f1a;color:#fff;font-size:13px;font-weight:600;box-shadow:0 12px 30px -10px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.1)}
.tk-pill-ic{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:10px;background:var(--st-success);color:#fff}
.tk-in{animation:tk-enter .5s cubic-bezier(.32,.72,0,1) both}
@keyframes tk-enter{from{opacity:0;transform:translateY(20px) scale(.95)}}
.tk-out{opacity:0!important;transform:translateX(40px) scale(.96)!important;transition:transform .3s cubic-bezier(.16,1,.3,1),opacity .25s ease-out}
@media (max-width:520px){.tk-region{right:8px;left:8px;width:auto}.tk-pill{align-self:center}}
@media (prefers-reduced-motion:reduce){.tk-in{animation:none}.tk-out{transition:none}}
/* Floating label (fk.field({ float: true }); design: form-kit-designs.html "Floating label"). */
.fk-flt{position:relative}
.fk-flt > .form-label{position:absolute;left:15px;top:18px;z-index:1;margin:0;font-size:14px;font-weight:500;color:var(--text-muted);pointer-events:none;transform-origin:left top;transition:transform .45s cubic-bezier(.32,.72,0,1),color .3s cubic-bezier(.16,1,.3,1)}
.fk-flt .form-control{height:56px;padding:22px 14px 6px}
.fk-flt textarea.form-control{height:auto;min-height:110px;padding-top:26px}
.fk-flt:has(.form-control:focus) > .form-label,.fk-flt:has(.form-control:not(:placeholder-shown)) > .form-label{transform:translateY(-10px) scale(.78);color:var(--text-secondary)}
.fk-flt:has(.form-control:focus) > .form-label{color:var(--brand-primary)}
.fk-flt:has(.form-control[aria-invalid="true"]) > .form-label{color:var(--fk-err-tx, var(--st-error))}