/* ===== COMPONENTS: full state coverage ===== */

/* buttons */
.btn{display:inline-flex;align-items:center;gap:var(--s-2);
  font:600 var(--step-0)/1 var(--font-text);padding:14px 22px;min-height:44px;
  border-radius:var(--radius);border:1px solid transparent;cursor:pointer;
  text-decoration:none;
  transition:background var(--t) var(--ease-out),color var(--t),
    border-color var(--t),transform var(--t-fast),box-shadow var(--t)}
.btn--sm{padding:10px 16px;font-size:var(--step--1)}
.btn--wide{justify-content:center}
.btn--primary{background:var(--color-accent);color:#fff}
.btn--primary:hover{background:var(--color-primary);box-shadow:0 6px 18px -8px var(--ring)}
.btn--primary:active{transform:translateY(1px)}
.btn--ghost{border-color:var(--line);color:var(--text)}
.btn--ghost:hover{border-color:var(--color-accent);color:var(--color-primary)}
.btn--ghost svg{transition:transform var(--t) var(--ease-out)}
.btn--ghost:hover svg{transform:translateX(3px)}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn[aria-busy="true"]{color:transparent;position:relative;pointer-events:none}
.btn[aria-busy="true"]::after{content:"";position:absolute;inset:0;margin:auto;
  width:16px;height:16px;border-radius:50%;
  border:2px solid rgba(255,255,255,.4);border-top-color:#fff;
  animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* theme toggle */
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;padding:0;border:1px solid var(--line);border-radius:50%;
  background:none;color:var(--text-muted);cursor:pointer;
  transition:color var(--t),border-color var(--t),transform var(--t)}
.theme-toggle:hover{color:var(--text);border-color:var(--text-muted);transform:rotate(40deg)}

/* form fields: floating label, blur validation, data never lost */
.field{position:relative;display:grid;gap:var(--s-1)}
.field input,.field textarea{width:100%;font:400 var(--step-0)/1.5 var(--font-text);
  color:var(--text);background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius);
  padding:22px 14px 10px;resize:vertical;min-height:44px;
  transition:border-color var(--t),box-shadow var(--t)}
.field label{position:absolute;left:14px;top:16px;pointer-events:none;
  font-size:var(--step-0);color:var(--text-muted);
  transition:all var(--t-fast) var(--ease-out)}
.field input:focus,.field textarea:focus{border-color:var(--color-accent);
  outline:none;box-shadow:0 0 0 3px var(--ring)}
.field input:focus~label,.field textarea:focus~label,
.field input:not(:placeholder-shown)~label,.field textarea:not(:placeholder-shown)~label{
  top:6px;font-size:var(--step--1);color:var(--color-primary)}
.field label{order:-1}  /* label precedes input in a11y tree via markup order below */
.field input,.field textarea{order:0}
.field-msg{min-height:1.2em;font-size:var(--step--1);margin:0}
.field.is-error input,.field.is-error textarea{border-color:var(--danger)}
.field.is-error .field-msg{color:var(--danger)}
.field.is-ok .field-msg{color:var(--ok)}
.field.is-ok::after{content:"";position:absolute;right:14px;top:20px;width:10px;height:6px;
  border-left:2px solid var(--ok);border-bottom:2px solid var(--ok);transform:rotate(-45deg)}
.form-done{padding:var(--s-4);border-left:2px solid var(--ok);
  color:var(--ok);font-size:var(--step--1);background:color-mix(in srgb,var(--ok) 7%,transparent)}

/* reveal + split-motion helpers (JS adds classes; CSS-only fallback is visible-by-default) */
[data-split] .w{display:inline-block;overflow:clip;vertical-align:top}
[data-split] .wi{display:inline-block;will-change:transform}
.reveal-mask{clip-path:inset(0 0 0 0)}
.js .reveal-mask{clip-path:inset(0 100% 0 0)}
.js .reveal-mask.is-in{clip-path:inset(0 0 0 0);transition:clip-path .9s var(--ease-out)}
.js [data-reveal]{opacity:0;transform:translateY(18px)}
.js [data-reveal].is-in{opacity:1;transform:none;transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
@media (prefers-reduced-motion:reduce){
  .js .reveal-mask{clip-path:inset(0 0 0 0)}
  .js [data-reveal]{opacity:1;transform:none}
}

/* custom scrollbar (tasteful) */
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--gray-300);border-radius:5px;border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:var(--color-accent)}