/* components.css — production components. Token-only values: no hardcoded hex,
   px spacing, or font sizes (1–2px structural strokes/offsets excepted). */

/* ---------- BUTTON ---------- */
.btn{
  font:500 var(--t1)/1 var(--font-mono);
  letter-spacing:.08em;
  padding:var(--s2) var(--s4);
  border-radius:var(--r1);
  border:1px solid transparent;
  cursor:pointer;
  display:inline-flex;align-items:center;gap:var(--s2);
  transition:all var(--d1) var(--ease);
}
.btn--primary{background:var(--fg);color:var(--bg)}
.btn--primary:hover{background:var(--accent);border-color:var(--accent);color:var(--n0)}
.btn--primary:active{background:var(--accent-ink);border-color:var(--accent-ink);color:var(--n0)}
.btn--secondary{border-color:var(--line-strong);color:var(--fg);background:none}
.btn--secondary:hover{border-color:var(--accent);color:var(--accent)}
.btn--secondary:active{background:var(--accent-soft);color:var(--accent-ink);border-color:var(--accent)}
.btn--ghost{color:var(--fg-muted);background:none}
.btn--ghost:hover{color:var(--accent)}
.btn--ghost:active{background:var(--bg-inset);color:var(--fg)}
.btn[disabled]{opacity:.35;cursor:not-allowed}
.btn .spin{
  width:var(--s2);height:var(--s2);
  border:1.5px solid currentColor;border-top-color:transparent;border-radius:50%;
  animation:aif-spin .7s linear infinite;
}
@keyframes aif-spin{to{transform:rotate(360deg)}}
@media (max-width:639px){
  .btn{width:100%;justify-content:center;padding-block:var(--s3)} /* 44px hit target */
}

/* ---------- NAV (site header) ---------- */
.site-header{border-bottom:var(--hair);position:sticky;top:0;background:var(--bg);z-index:50}
.site-header__row{
  max-width:1360px;margin:0 auto;padding:0 var(--s6);
  min-height:calc(var(--s12) + var(--s2));
  display:flex;align-items:center;justify-content:space-between;gap:var(--s6);
}
.wordmark{font:500 var(--t1)/1 var(--font-mono);letter-spacing:.08em;color:var(--fg)}
.site-nav{display:flex;gap:var(--s6);font:400 var(--t1)/1 var(--font-mono);letter-spacing:.08em}
.site-nav a{color:var(--fg-muted);padding-block:var(--s2);transition:color var(--d1) var(--ease)}
.site-nav a:hover{color:var(--accent)}
.site-nav a[aria-current="page"]{color:var(--accent)}

/* ---------- FOOTER ---------- */
.site-footer{border-top:var(--hair)}
.site-footer__row{
  max-width:1360px;margin:0 auto;padding:var(--s6);
  display:flex;justify-content:space-between;gap:var(--s6);flex-wrap:wrap;
  font:400 var(--t1)/1.8 var(--font-mono);color:var(--fg-faint);
}
.site-footer a:hover{color:var(--accent)}

/* ---------- INPUT / TEXTAREA ---------- */
.field{display:flex;flex-direction:column;gap:var(--s2);max-width:44ch}
.field__label{font:500 var(--t1)/1 var(--font-mono);letter-spacing:.08em;color:var(--fg-muted);text-transform:uppercase}
.field__hint{font:400 var(--t1)/1.5 var(--font-mono);color:var(--fg-faint)}
.field__error{font:400 var(--t1)/1.5 var(--font-mono);color:var(--accent-ink)}
.input{
  font:400 var(--t2)/1.4 var(--font-ui);
  color:var(--fg);background:var(--bg-raised);
  border:var(--hair);border-radius:var(--r1);
  padding:var(--s2) var(--s3);
  transition:border-color var(--d1) var(--ease);
  width:100%;
}
.input::placeholder{color:var(--fg-faint)}
.input:hover{border-color:var(--fg-muted)}
.input:focus{border-color:var(--fg);outline:none}
.input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.input[aria-invalid="true"]{border-color:var(--accent-ink)}
.input[disabled]{opacity:.35;cursor:not-allowed;background:var(--bg-inset)}
textarea.input{resize:vertical;min-height:calc(var(--s16) + var(--s8))}
@media (max-width:639px){.input{padding-block:var(--s3)}}

/* ---------- SELECT ---------- */
.select{position:relative;display:inline-block;width:100%;max-width:44ch}
.select select{
  appearance:none;-webkit-appearance:none;
  font:400 var(--t2)/1.4 var(--font-ui);
  color:var(--fg);background:var(--bg-raised);
  border:var(--hair);border-radius:var(--r1);
  padding:var(--s2) var(--s8) var(--s2) var(--s3);
  width:100%;cursor:pointer;
  transition:border-color var(--d1) var(--ease);
}
.select select:hover{border-color:var(--fg-muted)}
.select select:focus{border-color:var(--fg);outline:none}
.select select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.select select[disabled]{opacity:.35;cursor:not-allowed;background:var(--bg-inset)}
.select::after{ /* chevron: rotated square border, no image */
  content:"";position:absolute;right:var(--s3);top:50%;
  width:var(--s2);height:var(--s2);
  border-right:1.5px solid var(--fg-muted);border-bottom:1.5px solid var(--fg-muted);
  transform:translateY(-70%) rotate(45deg);pointer-events:none;
}
.select select[disabled] + *::after{opacity:.35}

/* ---------- TOGGLE ---------- */
.toggle{display:inline-flex;align-items:center;gap:var(--s3);cursor:pointer}
.toggle__label{font:500 var(--t1)/1 var(--font-mono);letter-spacing:.08em;color:var(--fg-muted);text-transform:uppercase}
.toggle input{
  appearance:none;-webkit-appearance:none;margin:0;cursor:pointer;
  width:var(--s8);height:var(--s4);
  border:1px solid var(--line-strong);border-radius:var(--r2);
  background:var(--bg-raised);position:relative;
  transition:background var(--d1) var(--ease),border-color var(--d1) var(--ease);
}
.toggle input::before{ /* knob */
  content:"";position:absolute;top:1px;left:1px;
  width:var(--s3);height:var(--s3);
  background:var(--fg-muted);border-radius:var(--r1);
  transition:transform var(--d1) var(--ease),background var(--d1) var(--ease);
}
.toggle input:checked{background:var(--fg);border-color:var(--fg)}
.toggle input:checked::before{transform:translateX(var(--s4));background:var(--bg)}
.toggle input:hover{border-color:var(--accent)}
.toggle input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.toggle input[disabled]{opacity:.35;cursor:not-allowed}
.toggle input[disabled]+.toggle__label{opacity:.35}

/* ---------- TAG ---------- */
.tag{
  display:inline-flex;align-items:center;gap:var(--s1);
  font:400 var(--t1)/1 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;
  color:var(--fg-muted);background:none;
  border:var(--hair);border-radius:var(--r1);
  padding:var(--s1) var(--s2);
}
a.tag,button.tag{cursor:pointer;transition:all var(--d1) var(--ease)}
a.tag:hover,button.tag:hover{border-color:var(--accent);color:var(--accent)}
.tag--accent{background:var(--accent-soft);color:var(--accent-ink);border-color:var(--accent)}
.tag--solid{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.tag__x{cursor:pointer;background:none;border:none;color:inherit;font:inherit;padding:0 0 0 var(--s1)}
.tag__x:hover{color:var(--accent-ink)}

/* ---------- TABLE ---------- */
.tbl-wrap{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse}
.tbl th{
  font:500 var(--t1)/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;
  color:var(--fg-faint);text-align:left;
  padding:var(--s2) var(--s4) var(--s2) 0;
  border-bottom:1px solid var(--line-strong);
}
.tbl td{
  font:400 var(--t2)/1.5 var(--font-ui);
  padding:var(--s3) var(--s4) var(--s3) 0;
  border-bottom:var(--hair);vertical-align:top;
}
.tbl td.num,.tbl th.num{text-align:right;font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.tbl td.mono{font-family:var(--font-mono);font-size:var(--t1)}
.tbl tbody tr{transition:background var(--d1) var(--ease)}
.tbl tbody tr:hover{background:var(--bg-inset)}
.tbl__empty{font:400 var(--t1)/1.6 var(--font-mono);color:var(--fg-faint);padding:var(--s8) 0;text-align:center}

/* ---------- CARD ---------- */
.card{
  display:block;border:var(--hair);border-radius:var(--r1);
  background:var(--bg-raised);padding:var(--s6);
  transition:border-color var(--d1) var(--ease),background var(--d1) var(--ease);
}
.card__eyebrow{font:400 var(--t1)/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-faint);margin-bottom:var(--s3)}
.card__title{font:600 var(--t3)/1.3 var(--font-ui);color:var(--fg);margin:0 0 var(--s2) 0}
.card__body{font:400 var(--t2)/1.6 var(--font-ui);color:var(--fg-muted);margin:0}
.card__meta{font:400 var(--t1)/1 var(--font-mono);color:var(--fg-faint);margin-top:var(--s4);display:flex;justify-content:space-between;gap:var(--s3)}
a.card:hover{border-color:var(--fg)}
a.card:hover .card__title{color:var(--accent)}

/* ---------- MODAL (native <dialog>) ---------- */
.modal{
  border:1px solid var(--line-strong);border-radius:var(--r2);
  background:var(--bg-raised);color:var(--fg);
  padding:0;max-width:min(90vw, 56ch);
}
.modal::backdrop{background:color-mix(in srgb, var(--n10) 55%, transparent)}
.modal__head{
  display:flex;justify-content:space-between;align-items:center;gap:var(--s4);
  padding:var(--s4) var(--s6);border-bottom:var(--hair);
}
.modal__title{font:500 var(--t1)/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;margin:0}
.modal__body{padding:var(--s6);font:400 var(--t2)/1.6 var(--font-ui);color:var(--fg-muted)}
.modal__foot{display:flex;justify-content:flex-end;gap:var(--s3);padding:var(--s4) var(--s6);border-top:var(--hair)}
@media (max-width:639px){.modal{max-width:100vw;width:100%;margin:auto 0 0 0;border-inline:none;border-bottom:none;border-radius:0}}

/* ---------- TOAST ---------- */
.toast-region{position:fixed;bottom:var(--s6);right:var(--s6);display:flex;flex-direction:column;gap:var(--s3);z-index:100}
.toast{
  display:flex;align-items:center;gap:var(--s3);
  border:1px solid var(--line-strong);border-radius:var(--r1);
  background:var(--bg-raised);color:var(--fg);
  padding:var(--s3) var(--s4);
  font:400 var(--t1)/1.5 var(--font-mono);letter-spacing:.04em;
}
.toast__dot{width:var(--s2);height:var(--s2);border-radius:50%;background:var(--accent);flex:none}
.toast--error .toast__dot{background:var(--accent-ink)}
.toast__x{cursor:pointer;background:none;border:none;color:var(--fg-faint);font:inherit;padding:0 0 0 var(--s2)}
.toast__x:hover{color:var(--accent)}
@media (max-width:639px){.toast-region{left:var(--s4);right:var(--s4);bottom:var(--s4)}}
@media (prefers-reduced-motion: no-preference){
  .toast{animation:toast-in var(--d2) var(--ease)}
  @keyframes toast-in{from{opacity:0;transform:translateY(var(--s2))}to{opacity:1;transform:none}}
}