/* foundation/components.css — Button, Input, Card, Table, Chip, Toast, Modal→BottomSheet.
   Class names match the reference (.btn, .btn--primary/soft/ghost/danger/accent, .input, .card,
   .tbl, .chip, .toast) so agents pixel-match the reference HTML. Load after tokens.css. */

/* ─────────── Button ─────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font:inherit; font-weight:700; font-size:14px; line-height:1; cursor:pointer;
  padding:11px 18px; border-radius:var(--r-sm); border:1px solid var(--border);
  background:var(--surface); color:var(--text); transition:.14s ease; white-space:nowrap;
}
.btn:hover:not(:disabled){ background:var(--slate-50); border-color:var(--border-strong); }
.btn:active:not(:disabled){ transform:translateY(1px); }
.btn:disabled{ opacity:.5; cursor:not-allowed; }
.btn svg{ width:18px; height:18px; }
.btn--primary{ background:var(--primary); border-color:var(--primary); color:#fff; box-shadow:var(--sh-indigo); }
.btn--primary:hover:not(:disabled){ background:var(--primary-strong); border-color:var(--primary-strong); }
.btn--accent{ background:var(--accent); border-color:var(--accent); color:#062a30; }
.btn--soft{ background:var(--indigo-50); border-color:var(--indigo-100); color:var(--primary-strong); }
.btn--soft:hover:not(:disabled){ background:var(--indigo-100); }
.btn--ghost{ background:transparent; border-color:transparent; color:var(--text-soft); }
.btn--ghost:hover:not(:disabled){ background:var(--slate-100); color:var(--text); }
.btn--danger{ background:var(--danger); border-color:var(--danger); color:#fff; }
.btn--sm{ padding:7px 12px; font-size:13px; border-radius:var(--r-xs); }
.btn--lg{ padding:14px 24px; font-size:16px; border-radius:var(--r-md); }
.btn--block{ display:flex; width:100%; }

/* ─────────── Input ─────────── */
.input{
  width:100%; font:inherit; font-size:14px; color:var(--text); background:var(--surface);
  padding:11px 14px; border:1px solid var(--border); border-radius:var(--r-sm); transition:.14s;
}
.input::placeholder{ color:var(--text-faint); }
.input:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--indigo-100); }
.input:disabled{ background:var(--slate-100); color:var(--text-soft); }
.input--error{ border-color:var(--danger); box-shadow:0 0 0 3px var(--danger-bg); }
.input-icon{ position:relative; }
.input-icon .input{ padding-inline-start:40px; }
.input-icon > svg{ position:absolute; inset-inline-start:12px; top:50%; transform:translateY(-50%);
  width:18px; height:18px; color:var(--text-faint); pointer-events:none; }
.field{ display:flex; flex-direction:column; gap:6px; }
.field > label{ font-size:13px; font-weight:700; color:var(--text-soft); }
.field .hint{ font-size:12px; color:var(--text-faint); }
.field .err{ font-size:12px; color:var(--danger); font-weight:600; }

/* ─────────── Card ─────────── */
.card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--sh-sm); }
.card--pad{ padding:18px; }
.card__head{ display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.card__title{ font-weight:800; font-size:16px; }
.card__sub{ color:var(--text-soft); font-size:12.5px; }

/* Icon-tile (ico-*) */
.ico-tile{ width:40px; height:40px; border-radius:var(--r-md); display:grid; place-items:center; flex:0 0 auto; }
.ico-tile svg{ width:20px; height:20px; }
.ico-indigo{ background:var(--ico-indigo-bg); color:var(--ico-indigo-ink); }
.ico-cyan{ background:var(--ico-cyan-bg); color:var(--ico-cyan-ink); }
.ico-green{ background:var(--ico-green-bg); color:var(--ico-green-ink); }
.ico-amber{ background:var(--ico-amber-bg); color:var(--ico-amber-ink); }
.ico-rose{ background:var(--ico-rose-bg); color:var(--ico-rose-ink); }
.ico-violet{ background:var(--ico-violet-bg); color:var(--ico-violet-ink); }

/* ─────────── Chip ─────────── */
.chip{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700;
  padding:4px 11px; border-radius:var(--r-full); background:var(--slate-100); color:var(--slate-600); }
.chip--dot::before{ content:""; width:7px; height:7px; border-radius:var(--r-full); background:currentColor; }
.chip--indigo{ background:var(--indigo-50); color:var(--primary-strong); }
.chip--success{ background:var(--success-bg); color:var(--success); }
.chip--warn{ background:var(--warn-bg); color:var(--warn); }
.chip--danger{ background:var(--danger-bg); color:var(--danger); }
.chip--info{ background:var(--info-bg); color:var(--info); }

/* ─────────── Table ─────────── */
.tbl-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:var(--r-md); }
.tbl{ width:100%; border-collapse:collapse; font-size:14px; background:var(--surface); }
.tbl th, .tbl td{ padding:12px 14px; text-align:right; border-bottom:1px solid var(--border); }
.tbl thead th{ background:var(--surface-2); color:var(--text-soft); font-weight:700; font-size:12.5px; white-space:nowrap; }
.tbl tbody tr:hover{ background:var(--surface-2); }
.tbl tbody tr:last-child td{ border-bottom:none; }

/* ─────────── Toast ─────────── */
.toast-host{ position:fixed; inset-inline:0; bottom:22px; display:flex; flex-direction:column;
  align-items:center; gap:10px; z-index:1200; pointer-events:none;
  padding-bottom:env(safe-area-inset-bottom); }
.toast{ pointer-events:auto; display:flex; align-items:center; gap:10px; max-width:min(92vw,420px);
  padding:12px 16px; border-radius:var(--r-md); background:var(--slate-900); color:#fff;
  box-shadow:var(--sh-lg); font-size:14px; font-weight:600; animation:toast-in .22s ease; }
.toast svg{ width:18px; height:18px; flex:0 0 auto; }
.toast--success{ background:var(--success); }
.toast--danger{ background:var(--danger); }
.toast--warn{ background:var(--warn); color:#3a2a00; }
@keyframes toast-in{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

/* ─────────── Modal → BottomSheet (mobile) ─────────── */
.modal-scrim{ position:fixed; inset:0; background:rgba(15,23,42,.45); z-index:1100;
  display:grid; place-items:center; padding:20px; animation:fade .18s ease; }
.modal{ width:min(560px,100%); max-height:88vh; overflow:auto; background:var(--surface);
  border-radius:var(--r-xl); box-shadow:var(--sh-lg); animation:pop .2s ease; }
.modal__head{ display:flex; align-items:center; gap:10px; padding:18px 20px 0; }
.modal__title{ font-weight:800; font-size:17px; }
.modal__body{ padding:16px 20px; }
.modal__foot{ display:flex; gap:10px; justify-content:flex-start; padding:0 20px 20px; }
.modal__grip{ display:none; }
@keyframes fade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes pop{ from{ opacity:0; transform:scale(.96); } to{ opacity:1; transform:none; } }
@keyframes sheet-up{ from{ transform:translateY(100%); } to{ transform:none; } }

/* §8 @620: modals become bottom-sheets (handle + slide-up); nothing is removed, layout changes. */
@media (max-width:620px){
  .modal-scrim{ align-items:flex-end; padding:0; }
  .modal{ width:100%; max-height:92vh; border-radius:var(--r-xl) var(--r-xl) 0 0; animation:sheet-up .26s ease; }
  .modal__grip{ display:block; width:44px; height:5px; border-radius:var(--r-full);
    background:var(--slate-300); margin:10px auto 0; }
  .modal__foot .btn{ flex:1; }        /* actions go full-width, side by side */
}