/* components.css — copied verbatim from DS/reference.html.
   Deviations from reference marked with [DEVIATION a–d]. */

/* ---------- 1. Button ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  min-height:var(--tap-min);padding:var(--sp-4) var(--sp-5);border:var(--bw) solid transparent;
  border-radius:var(--r-md);background:none;cursor:pointer;white-space:nowrap;
  font:var(--fw-semibold) var(--fs-control)/1 var(--font-sans);
  transition:background var(--dur-base),border-color var(--dur-fast),color var(--dur-fast),transform var(--dur-fast)}
/* [DEVIATION c] reference: height:38px;min-height:var(--tap-min);padding:0 var(--sp-5)
   → removed fixed height, kept min-height, added vertical padding so labels can wrap */
.btn--primary{background:var(--ink);color:var(--ink-inverse)}
.btn--primary:hover,.btn--primary.is-hover{background:var(--ink-hover)}
/* [DEVIATION a] reference: background:#2A251D → var(--ink-hover) */
.btn--ghost{background:var(--surface);border-color:var(--border-strong);color:var(--ink-secondary)}
.btn--ghost:hover,.btn--ghost.is-hover{background:var(--surface-hover);border-color:var(--ink-muted)}
.btn--danger{background:var(--surface);border-color:var(--over-budget);color:var(--over-budget)}
.btn--danger:hover,.btn--danger.is-hover{background:var(--over-budget-tint)}
.btn--icon{width:38px;padding:0}
.btn--small{min-height:32px;padding:var(--sp-1) var(--sp-4);font-size:var(--fs-micro)}
/* [DEVIATION c] reference: height:32px;padding:0 var(--sp-4) → min-height:32px, padding-based */
.btn--small+.btn--small{margin-top:var(--sp-5)}
/* [DEVIATION d] spacing between stacked small buttons — clears WCAG 2.2 AA */
.btn--block{width:100%;min-height:48px}
/* [DEVIATION c] reference: height:48px → min-height:48px */
.btn:active,.btn.is-active{transform:scale(.98)}
.btn.is-focus{box-shadow:var(--focus-ring)}
.btn[disabled],.btn.is-disabled{opacity:.45;pointer-events:none}
.btn[aria-busy="true"] .btn__label{visibility:hidden}
.btn[aria-busy="true"]{position:relative;min-width:110px}
.spinner{width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;
  border-radius:var(--r-full);animation:spin 700ms linear infinite}
.btn[aria-busy="true"] .spinner{position:absolute;left:50%;top:50%;margin:-7px 0 0 -7px}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- 2. KPI card ---------- */
.kpi{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-card);padding:var(--sp-6)}
.kpi--hero{border-radius:var(--r-xl)}
.kpi__label{margin:0 0 var(--sp-1);font:var(--fw-semibold) var(--fs-label)/1 var(--font-sans);
  letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink-muted)}
.kpi__value{display:flex;align-items:baseline;gap:var(--sp-2)}
.kpi__amount{font:var(--fw-semibold) var(--fs-title)/var(--lh-title) var(--font-sans);letter-spacing:var(--ls-tight)}
.kpi--hero .kpi__amount{font-size:var(--fs-hero);line-height:var(--lh-hero);letter-spacing:var(--ls-hero)}
.kpi__unit{font:var(--fw-medium) var(--fs-caption)/1 var(--font-sans);color:var(--ink-muted)}
.kpi__foot{display:flex;align-items:center;gap:var(--sp-2);margin-top:var(--sp-2)}
.kpi__note{font:var(--fw-regular) var(--fs-caption)/var(--lh-caption) var(--font-sans);color:var(--ink-muted)}
.kpi .progress{margin-top:var(--sp-4)}

/* ---------- 3. Pill / status ---------- */
.pill{display:inline-flex;align-items:center;height:20px;padding:0 var(--sp-2);border-radius:var(--r-xs);
  font:var(--fw-semibold) var(--fs-micro)/1 var(--font-sans);white-space:nowrap}
.pill--on-track{background:var(--on-track-tint);color:var(--on-track)}
.pill--over{background:var(--over-budget-tint);color:var(--over-budget)}
.pill--low{background:var(--low-stock-tint);color:var(--low-stock)}
.pill--out{background:var(--out-of-stock-tint);color:var(--out-of-stock)}
.pill--none,.pill--neutral{background:var(--no-budget-tint);color:var(--no-budget)}
.pill--reached{background:var(--reached-tint);color:var(--reached)}
.pill--scope{background:var(--scope-business-tint);color:var(--scope-business)}
.status{font-weight:var(--fw-semibold)}
.status--on-track{color:var(--on-track)}
.status--over{color:var(--over-budget)}
.status--low{color:var(--low-stock)}
.status--out{color:var(--out-of-stock)}
.status--none{color:var(--no-budget);font-weight:var(--fw-regular)}
.status--reached{color:var(--reached)}

/* ---------- 4. Fields ---------- */
.field{display:block;margin-bottom:var(--sp-5)}
.field__label{display:block;margin-bottom:var(--sp-1);
  font:var(--fw-medium) var(--fs-caption)/1 var(--font-sans);color:var(--ink-muted)}
.input{width:100%;height:44px;padding:0 var(--sp-5);border:var(--bw) solid var(--border-input);
  border-radius:var(--r-md);background:var(--surface-sunken);color:var(--ink);
  font:var(--fw-regular) var(--fs-input)/1 var(--font-sans);transition:border-color var(--dur-fast),background var(--dur-fast)}
/* [DEVIATION b] reference: font-size 16px → var(--fs-input) */
.input:hover{border-color:var(--ink-muted)}
.input:focus-visible,.input.is-focus{background:var(--surface);border-color:var(--ink);box-shadow:var(--focus-ring)}
.input.is-error{border-color:var(--over-budget);background:var(--over-budget-tint)}
.input[disabled]{opacity:.5;background:var(--ground)}
.field__hint{margin-top:var(--sp-1);font:var(--fw-regular) var(--fs-caption)/1.3 var(--font-sans);color:var(--ink-muted)}
.field__error{margin-top:var(--sp-1);font:var(--fw-medium) var(--fs-caption)/1.3 var(--font-sans);color:var(--over-budget)}
.amount-field{position:relative;display:flex;align-items:baseline;justify-content:flex-end;gap:var(--sp-2);
  padding:var(--sp-4) var(--sp-5);border:var(--bw) solid var(--border-input);border-radius:var(--r-md);
  background:var(--surface-sunken)}
.amount-field__input{flex:1;min-width:0;border:0;background:none;text-align:right;
  font:var(--fw-semibold) var(--fs-hero)/var(--lh-hero) var(--font-sans);letter-spacing:var(--ls-hero);color:var(--ink)}
.amount-field__input:focus{outline:none}
.amount-field__unit{font:var(--fw-medium) var(--fs-caption)/1 var(--font-sans);color:var(--ink-muted)}

/* ---------- 5. Chips, tiles, avatars ---------- */
.cat-tile{display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:20px;height:20px;border-radius:var(--r-sm);font:var(--fw-regular) 9px/1 var(--font-sans)}
.cat-tile--sm{width:16px;height:16px;font-size:7.5px}
.cat-tile--maison{background:var(--cat-maison-tint);color:var(--cat-maison)}
.cat-tile--alimentation{background:var(--cat-alimentation-tint);color:var(--cat-alimentation)}
.cat-tile--transport{background:var(--cat-transport-tint);color:var(--cat-transport)}
.cat-tile--enfants{background:var(--cat-enfants-tint);color:var(--cat-enfants)}
.cat-tile--personnel{background:var(--cat-personnel-tint);color:var(--cat-personnel)}
.cat-tile--villa{background:var(--cat-villa-tint);color:var(--cat-villa)}
.scope-chip{display:inline-flex;align-items:center;gap:var(--sp-2);height:28px;padding:0 var(--sp-3);
  border:0;border-radius:var(--r-sm);cursor:pointer;
  font:var(--fw-semibold) var(--fs-micro)/1 var(--font-sans);
  background:var(--no-budget-tint);color:var(--ink-secondary);transition:background var(--dur-fast)}
.scope-chip--business{background:var(--scope-business-tint);color:var(--scope-business)}
.avatar{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;
  border-radius:var(--r-full);font:var(--fw-semibold) var(--fs-micro)/1 var(--font-sans);
  background:var(--cat-transport-tint);color:var(--cat-transport)}
.avatar-stack{display:flex}
.avatar-stack .avatar+.avatar{margin-left:-8px;box-shadow:0 0 0 2px var(--surface)}

/* ---------- 6. Progress ---------- */
.progress{height:4px;border-radius:var(--r-full);background:var(--no-budget-tint);overflow:hidden}
.progress--row{height:3px}
.progress__fill{height:100%;border-radius:var(--r-full);background:var(--ink);
  transition:width var(--dur-slow) var(--ease)}
.progress__fill--on-track{background:var(--on-track)}
.progress__fill--over{background:var(--over-budget)}
.progress__fill--low{background:var(--low-stock)}

/* ---------- 7. Table ---------- */
.table-card{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-card);overflow:hidden}
.table-scroll{overflow:auto;max-height:340px}
.table{width:100%;border-collapse:collapse}
.table__th{position:sticky;top:0;z-index:var(--z-sticky-th);background:var(--surface);
  padding:var(--sp-4) var(--sp-5);text-align:left;border-bottom:var(--bw) solid var(--border);
  font:var(--fw-semibold) var(--fs-micro)/1.4 var(--font-sans);letter-spacing:var(--ls-label);
  text-transform:uppercase;color:var(--ink-muted);white-space:nowrap}
.table__th--sticky{left:0;z-index:calc(var(--z-sticky-th) + 1)}
.table__th.is-sorted{color:var(--ink)}
.table__arrow{color:var(--accent);font-size:9px;margin-left:var(--sp-1)}
.table__td{padding:var(--sp-4) var(--sp-5);border-bottom:var(--bw) solid var(--hairline);
  font:var(--fw-regular) var(--fs-dense)/var(--lh-dense) var(--font-sans);white-space:nowrap}
.table__td--sticky{position:sticky;left:0;z-index:var(--z-sticky-col);background:var(--surface)}
.table .is-num{text-align:right}
.table tbody tr:hover .table__td,.table tbody tr.is-hover .table__td{background:var(--surface-hover)}
.table tbody tr:hover .table__td--sticky,.table tbody tr.is-hover .table__td--sticky{background:var(--surface-hover)}
.table__col--month{background:var(--surface-month)}

/* ---------- 8. Editable cell ---------- */
.cell-edit{width:104px;height:42px;padding:0 var(--sp-4);border:var(--bw) solid var(--border-input);
  border-radius:var(--r-md);background:var(--surface-sunken);text-align:right;color:var(--ink);
  font:var(--fw-medium) var(--fs-dense)/1 var(--font-sans);
  transition:border-color var(--dur-fast),background var(--dur-fast)}
.cell-edit:hover{border-color:var(--ink-muted)}
.cell-edit.is-focus{background:var(--surface);border-color:var(--ink);box-shadow:var(--focus-ring)}
.cell-edit.is-saving{border-color:var(--ink-muted);color:var(--ink-muted)}
.cell-edit.is-saved{border-color:var(--on-track);background:var(--on-track-tint)}
.cell-edit.is-failed{border-color:var(--over-budget);background:var(--over-budget-tint)}
.cell-edit.is-month{background:var(--surface-month)}
.cell-edit[disabled]{background:var(--ground);color:var(--ink-muted)}

/* ---------- 9. Listbox ---------- */
.listbox__trigger{display:inline-flex;align-items:center;gap:var(--sp-2);height:38px;padding:0 var(--sp-4);
  border:var(--bw) solid var(--border-strong);border-radius:var(--r-md);background:var(--surface);
  color:var(--ink);cursor:pointer;font:var(--fw-medium) var(--fs-dense)/1 var(--font-sans);
  transition:border-color var(--dur-fast)}
.listbox__trigger:hover{border-color:var(--ink-muted)}
.listbox__trigger.is-set{font-weight:var(--fw-semibold)}
.listbox__trigger[aria-expanded="true"] .listbox__caret{transform:rotate(180deg)}
.listbox__caret{transition:transform var(--dur-fast)}
.listbox__menu{width:190px;padding:var(--sp-1);background:var(--surface);border-radius:var(--r-md);
  box-shadow:var(--shadow-popover);max-height:280px;overflow:auto}
.listbox__option{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  width:100%;height:36px;padding:0 var(--sp-3);border:0;border-radius:var(--r-sm);background:none;
  cursor:pointer;text-align:left;font:var(--fw-regular) var(--fs-dense)/1 var(--font-sans);color:var(--ink)}
.listbox__option[aria-selected="true"]{font-weight:var(--fw-semibold)}
.listbox__option.is-active,.listbox__option:hover{background:var(--surface-hover)}

/* ---------- 10. Calendar ---------- */
.calendar{width:252px;padding:var(--sp-4);background:var(--surface);border-radius:var(--r-md);box-shadow:var(--shadow-popover)}
.calendar__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--sp-3)}
.calendar__title{font:var(--fw-semibold) var(--fs-dense)/1 var(--font-sans)}
.calendar__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.calendar__dow{text-align:center;font:var(--fw-semibold) var(--fs-label)/2 var(--font-sans);color:var(--ink-muted)}
.calendar__day{height:32px;border:0;border-radius:var(--r-sm);background:none;cursor:pointer;
  font:var(--fw-regular) var(--fs-caption)/1 var(--font-sans);color:var(--ink)}
.calendar__day:hover{background:var(--surface-hover)}
.calendar__day--out{color:var(--ink-muted)}
.calendar__day--today{box-shadow:inset 0 0 0 1px var(--accent)}
.calendar__day--selected{background:var(--ink);color:var(--ink-inverse);font-weight:var(--fw-semibold);box-shadow:none}

/* ---------- 11. Nav, FAB, filters ---------- */
.filters{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-2) var(--sp-5);
  background:rgba(255,255,255,.94);border-bottom:var(--bw) solid var(--border);
  -webkit-backdrop-filter:saturate(180%) blur(14px);backdrop-filter:saturate(180%) blur(14px)}
.stepper{display:inline-flex;align-items:center;gap:var(--sp-1)}
.stepper__label{min-width:104px;text-align:center;border:0;background:none;cursor:pointer;
  font:var(--fw-semibold) var(--fs-dense)/1 var(--font-sans);color:var(--ink)}
.stepper__arrow{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;
  border:0;border-radius:var(--r-sm);background:none;color:var(--ink-muted);cursor:pointer;
  transition:background var(--dur-fast),color var(--dur-fast)}
.stepper__arrow:hover{background:var(--surface-hover);color:var(--ink)}
.nav{display:flex;gap:2px;padding:var(--sp-3) var(--sp-3) calc(env(safe-area-inset-bottom) + var(--sp-3));
  background:rgba(255,255,255,.94);border-top:var(--bw) solid var(--border);
  -webkit-backdrop-filter:saturate(180%) blur(14px);backdrop-filter:saturate(180%) blur(14px)}
.nav__item{flex:1;display:flex;flex-direction:column;align-items:center;gap:var(--sp-1);
  min-height:var(--tap-min);padding:var(--sp-1) 0;border:0;border-radius:var(--r-sm);background:none;
  cursor:pointer;color:var(--ink-muted);font:var(--fw-medium) var(--fs-label)/1 var(--font-sans)}
.nav__item[aria-current="page"]{color:var(--ink);font-weight:var(--fw-semibold)}
.fab{display:inline-flex;align-items:center;justify-content:center;width:58px;height:58px;
  border:0;border-radius:var(--r-xl);background:var(--ink);color:var(--ink-inverse);cursor:pointer;
  box-shadow:var(--shadow-raised);transition:background var(--dur-base),transform var(--dur-slow) var(--ease)}
.fab:hover{background:#2A251D}
.fab:active,.fab.is-active{transform:scale(.96)}

/* ---------- 12. Drawer ---------- */
.drawer-demo{position:relative;height:300px;border-radius:var(--r-lg);overflow:hidden;background:var(--ground)}
.drawer-scrim{position:absolute;inset:0;background:rgba(22,19,14,.32)}
.drawer{position:absolute;left:0;right:0;bottom:0;background:var(--surface);
  border-radius:var(--r-xl) var(--r-xl) 0 0;box-shadow:var(--shadow-drawer);padding-bottom:var(--sp-5)}
.drawer__grabber{width:36px;height:4px;margin:var(--sp-3) auto;border-radius:var(--r-full);background:var(--border-strong)}
.drawer__head{display:flex;align-items:center;justify-content:space-between;padding:0 var(--sp-6) var(--sp-4)}
.drawer__title{margin:0;font:var(--fw-semibold) var(--fs-title)/var(--lh-title) var(--font-sans);letter-spacing:var(--ls-tight)}
.drawer__body{padding:0 var(--sp-6)}
.drawer__foot{display:flex;gap:var(--sp-3);padding:var(--sp-5) var(--sp-6) 0}

/* ---------- 13. Toast, banner, empty, skeleton ---------- */
.toast{display:flex;align-items:center;gap:var(--sp-3);max-width:420px;padding:var(--sp-4) var(--sp-5);
  background:var(--surface);border-radius:var(--r-md);box-shadow:var(--shadow-popover);
  font:var(--fw-medium) var(--fs-dense)/1.3 var(--font-sans)}
.toast__icon{flex:none}
.toast--ok .toast__icon{color:var(--on-track)}
.toast--error .toast__icon{color:var(--over-budget)}
.toast--info .toast__icon{color:var(--ink-muted)}
.toast__message{flex:1;min-width:0}
.toast__action{border:0;background:none;cursor:pointer;color:var(--ink);text-decoration:underline;
  font:var(--fw-semibold) var(--fs-dense)/1 var(--font-sans)}
.toast__close{display:inline-flex;border:0;background:none;cursor:pointer;color:var(--ink-muted)}
.error-banner{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-4) var(--sp-5);
  background:var(--over-budget-tint);border-radius:var(--r-md);color:var(--over-budget);
  font:var(--fw-medium) var(--fs-dense)/1.35 var(--font-sans)}
.error-banner__message{flex:1}
.offline-bar{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-5);
  background:var(--no-budget-tint);color:var(--ink-secondary);border-radius:var(--r-md);
  font:var(--fw-medium) var(--fs-caption)/1 var(--font-sans)}
.empty-state{padding:var(--sp-8) var(--sp-6);text-align:center}
.empty-state__glyph{display:inline-flex;color:var(--ink-muted);margin-bottom:var(--sp-4)}
.empty-state__title{margin:0 0 var(--sp-1);font:var(--fw-semibold) var(--fs-body)/1.3 var(--font-sans)}
.empty-state__body{margin:0 auto var(--sp-5);max-width:34ch;
  font:var(--fw-regular) var(--fs-caption)/var(--lh-caption) var(--font-sans);color:var(--ink-muted);text-wrap:pretty}
.skeleton{background:var(--no-budget-tint);border-radius:var(--r-sm);
  background-image:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);
  background-size:200% 100%;background-repeat:no-repeat;animation:shimmer 1.4s linear infinite}
@keyframes shimmer{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.skeleton{animation:none;background-image:none}.spinner{animation-duration:2s}}

/* ---------- 14. Row card (phone list) ---------- */
.row-card{display:flex;align-items:center;gap:var(--sp-4);min-height:56px;padding:var(--sp-4) var(--sp-5);
  background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-card);width:100%;
  border:0;cursor:pointer;text-align:left}
.row-card__main{flex:1;min-width:0}
.row-card__title{font:var(--fw-medium) var(--fs-body)/1.25 var(--font-sans);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row-card__meta{margin-top:2px;font:var(--fw-regular) var(--fs-caption)/1.2 var(--font-sans);color:var(--ink-muted)}
.row-card__amount{font:var(--fw-semibold) var(--fs-body)/1 var(--font-sans);font-variant-numeric:tabular-nums}

/* ---------- 15. Chart ---------- */
.chart{display:flex;flex-direction:column;gap:var(--sp-2)}
.chart__bars{display:flex;align-items:flex-end;gap:var(--sp-1);height:88px}
.chart__bar{flex:1;min-height:2px;border-radius:var(--r-sm) var(--r-sm) 0 0;background:rgba(22,19,14,.12)}
.chart__bar--current{background:var(--ink)}
.chart__bar--over{background:var(--over-budget)}
.chart__axis{display:flex;gap:var(--sp-1)}
.chart__axis span{flex:1;text-align:center;font:var(--fw-regular) var(--fs-label)/1 var(--font-sans);color:var(--ink-muted)}
.chart--spark .chart__bars{height:18px;gap:2px}

/* ---------- [DEVIATION d] iOS input zoom prevention ---------- */
@media (max-width:700px){
  input,select,textarea,.input,.field input,.field select,.field textarea{font-size:var(--fs-input)}
}