/* ==========================================================================
   components.css — one implementation per component, reused by every page.
   No inline styles are used anywhere in this pack (CSP: style-src 'self').
   ========================================================================== */

/* --- panel / card ------------------------------------------------------- */
.panel{
  background:var(--c-surface); border:1px solid var(--c-border);
  border-radius:var(--r-lg); padding:var(--sp-5); box-shadow:var(--e-1);
  scroll-margin-top:calc(var(--h-topbar) + var(--sp-4));
}
.panel + .panel{margin-top:var(--sp-5);}
.panel > header{
  border-bottom:1px solid var(--c-border);
  padding-bottom:var(--sp-3); margin-bottom:var(--sp-4);
}
.panel > header p:last-child{margin-bottom:0;}
.panel--flush{padding:var(--sp-3);}
.panel--alt{background:var(--c-surface-alt);}

.card{
  background:var(--c-surface); border:1px solid var(--c-border);
  border-radius:var(--r-md); padding:var(--sp-4); box-shadow:var(--e-1);
}
.card--alt{background:var(--c-surface-alt); box-shadow:none;}
.card--quiet{background:transparent; box-shadow:none; border-style:dashed;}
.card h3,.card h4{margin-bottom:var(--sp-2);}
.card > :last-child{margin-bottom:0;}

.grid{display:grid; gap:var(--sp-4);}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));}
.grid--sidebar{grid-template-columns:minmax(0,2fr) minmax(280px,1fr);}
@media (max-width:900px){.grid--sidebar{grid-template-columns:1fr;}}

/* --- buttons ------------------------------------------------------------ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  min-height:var(--target-min); min-width:var(--target-min);
  padding:var(--sp-2) var(--sp-4);
  border:1px solid var(--c-primary); border-radius:var(--r-sm);
  background:var(--c-primary); color:var(--c-primary-contrast);
  font:inherit; font-size:var(--fs-sm); font-weight:700; text-decoration:none;
  cursor:pointer; transition:background var(--dur-fast) var(--ease-standard);
}
.btn:hover{background:var(--c-primary-hover); color:var(--c-primary-contrast);}
.btn--secondary{background:var(--c-surface); color:var(--c-primary);}
.btn--secondary:hover{background:var(--c-surface-alt); color:var(--c-primary);}
.btn--quiet{background:transparent; border-color:var(--c-border-strong); color:var(--c-text);}
.btn--quiet:hover{background:var(--c-surface-alt); color:var(--c-text);}
.btn--ok{background:var(--c-ok); border-color:var(--c-ok);}
.btn--ok:hover{background:#24462c;}
.btn--halt{background:var(--c-halt); border-color:var(--c-halt);}
.btn--halt:hover{background:#6a251f;}
.btn--block{width:100%;}
.btn--sm{min-height:var(--target-min); padding:var(--sp-1) var(--sp-3); font-size:var(--fs-xs);}
.btn--lg{font-size:var(--fs-md); padding:var(--sp-3) var(--sp-5); min-height:52px;}
.btn[aria-disabled="true"],.btn:disabled{
  background:var(--c-surface-sunk); color:var(--c-text-muted);
  border-color:var(--c-border-strong); border-style:dashed; cursor:not-allowed;
}
.btn-row{display:flex; gap:var(--sp-2); flex-wrap:wrap; align-items:center;}
.btn-row > *{margin-top:0 !important;}

/* --- status pills: colour is never the only signal ---------------------- */
.pill{
  display:inline-flex; align-items:center; gap:var(--sp-1);
  padding:2px var(--sp-2); border-radius:var(--r-pill);
  font-size:var(--fs-xs); font-weight:700; border:1px solid transparent;
  white-space:nowrap;
}
.pill::before{font-size:11px; line-height:1;}
.pill--ok{background:var(--c-ok-bg); color:var(--c-ok); border-color:var(--c-ok);}
.pill--ok::before{content:"\25CF";}
.pill--caution{background:var(--c-caution-bg); color:var(--c-caution); border-color:var(--c-caution);}
.pill--caution::before{content:"\25B2";}
.pill--halt{background:var(--c-halt-bg); color:var(--c-halt); border-color:var(--c-halt);}
.pill--halt::before{content:"\25A0";}
.pill--info{background:var(--c-info-bg); color:var(--c-info); border-color:var(--c-info);}
.pill--info::before{content:"\25C6";}
.pill--muted{background:var(--c-surface-sunk); color:var(--c-text-muted); border-color:var(--c-border-strong);}
.pill--muted::before{content:"\25CB";}

.chip{
  display:inline-flex; align-items:center; gap:var(--sp-1);
  padding:2px var(--sp-2); border-radius:var(--r-sm);
  border:1px solid var(--c-border-strong); background:var(--c-surface);
  font-size:var(--fs-xs); font-weight:700; color:var(--c-text-muted); white-space:nowrap;
}
.chip--on{background:var(--c-info-bg); color:var(--c-primary); border-color:var(--c-primary);}
.chip--off{border-style:dashed; text-decoration:line-through;}
.chip-set{display:flex; gap:var(--sp-1); flex-wrap:wrap;}

.role-chip{
  display:inline-flex; align-items:center; gap:var(--sp-1);
  padding:var(--sp-1) var(--sp-3); border-radius:var(--r-pill);
  background:var(--c-primary); color:var(--c-primary-contrast);
  font-size:var(--fs-xs); font-weight:700; letter-spacing:.05em; text-transform:uppercase;
}

/* --- rule callout (explains the governing business rule to reviewers) --- */
.rule{
  border:1px solid var(--c-border-strong); border-left:5px solid var(--c-accent);
  background:var(--c-info-bg); border-radius:0 var(--r-md) var(--r-md) 0;
  padding:var(--sp-3) var(--sp-4); font-size:var(--fs-sm); color:var(--c-text);
}
.rule h4,.rule h3{
  margin:0 0 var(--sp-2); font-size:var(--fs-xs); letter-spacing:.07em;
  text-transform:uppercase; color:var(--c-accent);
}
.rule p,.rule ul{margin-bottom:0; max-width:none;}
.rule + .rule{margin-top:var(--sp-3);}
.rule--halt{border-left-color:var(--c-halt); background:var(--c-halt-bg);}
.rule--halt h4{color:var(--c-halt);}
.rule--ok{border-left-color:var(--c-ok); background:var(--c-ok-bg);}
.rule--ok h4{color:var(--c-ok);}

.disclaimer{
  border:1px dashed var(--c-border-strong); border-radius:var(--r-sm);
  padding:var(--sp-3); font-size:var(--fs-xs); color:var(--c-text-muted);
  background:var(--c-surface); max-width:none;
}

/* --- state switcher ----------------------------------------------------- */
.stateswitch{
  display:flex; gap:var(--sp-2); flex-wrap:wrap; align-items:center;
  padding:var(--sp-2) var(--sp-3);
  background:var(--c-surface-alt); border:1px dashed var(--c-border-strong);
  border-radius:var(--r-md);
}
.stateswitch__label{
  font-size:var(--fs-xs); font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; color:var(--c-text-muted);
}
.stateswitch button{
  min-height:var(--target-min); padding:var(--sp-1) var(--sp-3);
  border:1px solid var(--c-border-strong); border-radius:var(--r-sm);
  background:var(--c-surface); color:var(--c-text);
  font:inherit; font-size:var(--fs-sm); font-weight:600; cursor:pointer;
}
.stateswitch button[aria-pressed="true"]{
  background:var(--c-primary); color:var(--c-primary-contrast); border-color:var(--c-primary);
}

/* --- tabs (ARIA tabs pattern) ------------------------------------------- */
[role="tablist"]{
  display:flex; gap:var(--sp-1); flex-wrap:wrap;
  border-bottom:1px solid var(--c-border); margin-bottom:var(--sp-4);
}
[role="tab"]{
  min-height:var(--target-min); display:inline-flex; align-items:center; gap:var(--sp-2);
  padding:var(--sp-2) var(--sp-3); border:0; background:transparent;
  font:inherit; font-size:var(--fs-sm); font-weight:600; color:var(--c-text-muted);
  cursor:pointer; border-radius:var(--r-sm) var(--r-sm) 0 0;
}
[role="tab"]:hover{background:var(--c-surface-alt); color:var(--c-text);}
[role="tab"][aria-selected="true"]{
  color:var(--c-primary); font-weight:700; box-shadow:inset 0 -3px 0 var(--c-primary);
}
[role="tabpanel"]:focus-visible{outline-offset:4px;}

/* --- disclosure --------------------------------------------------------- */
details.disclosure{
  border:1px solid var(--c-border); border-radius:var(--r-md);
  background:var(--c-surface); padding:0;
}
details.disclosure + details.disclosure{margin-top:var(--sp-2);}
details.disclosure > summary{
  min-height:var(--target-min); display:flex; align-items:center; gap:var(--sp-2);
  padding:var(--sp-3) var(--sp-4); cursor:pointer;
  font-weight:600; font-size:var(--fs-sm); list-style:none;
}
details.disclosure > summary::-webkit-details-marker{display:none;}
details.disclosure > summary::before{content:"\25B8"; color:var(--c-accent); font-size:14px;}
details.disclosure[open] > summary::before{content:"\25BE";}
details.disclosure > :not(summary){
  padding:0 var(--sp-4) var(--sp-4);
  font-size:var(--fs-sm);
}

/* --- forms -------------------------------------------------------------- */
.field{margin-bottom:var(--sp-4);}
.field > label,.fieldset-legend{
  display:block; font-size:var(--fs-sm); font-weight:700; margin-bottom:var(--sp-1);
}
.field .hint{display:block; font-size:var(--fs-xs); color:var(--c-text-muted); margin-bottom:var(--sp-1);}
.req{color:var(--c-halt); font-weight:700;}
input[type="text"],input[type="tel"],input[type="number"],input[type="search"],
input[type="date"],input[type="time"],select,textarea{
  width:100%; min-height:var(--target-min);
  padding:var(--sp-2) var(--sp-3);
  border:1px solid var(--c-border-strong); border-radius:var(--r-sm);
  background:var(--c-surface); color:var(--c-text);
  font:inherit; font-size:var(--fs-md);
}
textarea{min-height:88px; resize:vertical;}
input:disabled,select:disabled,textarea:disabled{
  background:var(--c-surface-sunk); color:var(--c-text-muted); cursor:not-allowed;
}
.input-error{border-color:var(--c-halt); border-width:2px;}
.error-text{
  display:block; color:var(--c-halt); font-size:var(--fs-sm); font-weight:600;
  margin-top:var(--sp-1);
}
.error-text::before{content:"\26A0 "; }
fieldset{
  border:1px solid var(--c-border); border-radius:var(--r-md);
  padding:var(--sp-3) var(--sp-4); margin:0 0 var(--sp-4);
}
legend{font-size:var(--fs-sm); font-weight:700; padding:0 var(--sp-2);}
.check{
  display:flex; gap:var(--sp-2); align-items:flex-start;
  min-height:var(--target-min); padding:var(--sp-2) 0; font-size:var(--fs-sm);
}
.check input{width:22px; height:22px; margin:2px 0 0; flex:0 0 auto;}
.switch-row{
  display:flex; gap:var(--sp-3); align-items:center; justify-content:space-between;
  min-height:var(--target-min); padding:var(--sp-2) 0;
  border-bottom:1px solid var(--c-border); font-size:var(--fs-sm);
}
.switch-row:last-child{border-bottom:0;}
.switch-row .switch-label{font-weight:600;}
.otp-group{display:flex; gap:var(--sp-2); flex-wrap:wrap;}
.otp-group input{width:48px; min-width:48px; height:56px; text-align:center; font-size:var(--fs-xl); font-weight:700;}

/* --- tables (collapse to cards under 640px) ----------------------------- */
.table-wrap{overflow-x:auto;}
table.data{width:100%; border-collapse:collapse; font-size:var(--fs-sm);}
table.data caption{
  text-align:left; font-weight:700; color:var(--c-text-muted);
  font-size:var(--fs-sm); padding-bottom:var(--sp-2);
}
table.data th,table.data td{
  text-align:left; padding:var(--sp-2) var(--sp-3);
  border-bottom:1px solid var(--c-border); vertical-align:top;
}
table.data thead th{
  background:var(--c-surface-alt); font-size:var(--fs-xs);
  text-transform:uppercase; letter-spacing:.05em; color:var(--c-text-muted);
}
table.data tbody tr:hover{background:var(--c-info-bg);}
table.data td.num,table.data th.num{text-align:right; font-variant-numeric:tabular-nums;}

@media (max-width:640px){
  table.responsive,table.responsive tbody,table.responsive tr,table.responsive td{display:block; width:100%;}
  table.responsive thead{position:absolute; left:-9999px;}
  table.responsive tr{
    border:1px solid var(--c-border); border-radius:var(--r-md);
    margin-bottom:var(--sp-3); padding:var(--sp-2); background:var(--c-surface);
  }
  table.responsive td{border-bottom:1px dotted var(--c-border); padding:var(--sp-2);}
  table.responsive td:last-child{border-bottom:0;}
  table.responsive td::before{
    content:attr(data-label) " ";
    display:block; font-size:var(--fs-xs); font-weight:700;
    text-transform:uppercase; letter-spacing:.05em; color:var(--c-text-muted);
  }
  table.responsive td.num{text-align:left;}
}

/* --- stat tiles --------------------------------------------------------- */
.stat{
  background:var(--c-surface); border:1px solid var(--c-border);
  border-top:4px solid var(--c-accent); border-radius:var(--r-md);
  padding:var(--sp-3) var(--sp-4);
}
.stat__k{font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.06em; color:var(--c-text-muted); font-weight:700;}
.stat__v{display:block; font-size:var(--fs-2xl); font-weight:700; font-variant-numeric:tabular-nums; margin-top:var(--sp-1);}
.stat__note{font-size:var(--fs-xs); color:var(--c-text-muted);}
.stat--wallet{border-top-color:var(--c-primary);}
.stat--points{border-top-color:var(--c-accent);}
.stat--coupon{border-top-color:var(--c-caution);}
.stat--wellness{border-top-color:var(--c-ok);}

/* --- key/value list ----------------------------------------------------- */
.kv{margin:0; font-size:var(--fs-sm);}
.kv > div{
  display:flex; gap:var(--sp-3); justify-content:space-between;
  padding:var(--sp-2) 0; border-bottom:1px solid var(--c-border);
}
.kv > div:last-child{border-bottom:0;}
.kv dt{color:var(--c-text-muted);}
.kv dd{margin:0; font-weight:600; text-align:right;}

/* --- before/after diff -------------------------------------------------- */
.diff{display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-3);}
@media (max-width:560px){.diff{grid-template-columns:1fr;}}
.diff__col{
  border:1px solid var(--c-border); border-radius:var(--r-md); padding:var(--sp-3);
  font-size:var(--fs-sm); background:var(--c-surface);
}
.diff__col h4{font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.06em; color:var(--c-text-muted);}
.diff__col--before{background:var(--c-surface-alt);}
.diff__col--after{border-color:var(--c-ok); background:var(--c-ok-bg);}
.diff ins{background:var(--c-ok-bg); text-decoration:none; font-weight:700;}
.diff del{color:var(--c-halt);}

/* --- empty state -------------------------------------------------------- */
.empty{
  border:1px dashed var(--c-border-strong); border-radius:var(--r-md);
  padding:var(--sp-6) var(--sp-4); text-align:center; color:var(--c-text-muted);
  background:var(--c-surface-alt);
}
.empty p{margin-inline:auto;}

/* --- dialog ------------------------------------------------------------- */
dialog{
  border:1px solid var(--c-border-strong); border-radius:var(--r-lg);
  padding:0; background:var(--c-surface); color:var(--c-text);
  box-shadow:var(--e-3); max-width:min(560px,92vw); width:100%;
}
dialog::backdrop{background:rgba(41,37,21,.55);}
dialog .dialog__head{
  padding:var(--sp-4); border-bottom:1px solid var(--c-border);
  display:flex; justify-content:space-between; align-items:center; gap:var(--sp-3);
}
dialog .dialog__head h2{margin:0; font-size:var(--fs-lg);}
dialog .dialog__body{padding:var(--sp-4); max-height:60vh; overflow:auto;}
dialog .dialog__foot{padding:var(--sp-3) var(--sp-4); border-top:1px solid var(--c-border); display:flex; gap:var(--sp-2); justify-content:flex-end; flex-wrap:wrap;}

/* --- toast + live region ------------------------------------------------ */
.toast-region{
  position:fixed; left:50%; bottom:calc(var(--h-tabbar) + var(--sp-4));
  transform:translateX(-50%);
  z-index:120; display:flex; flex-direction:column; gap:var(--sp-2);
  width:min(420px,92vw); pointer-events:none;
}
.toast{
  background:var(--c-dark); color:var(--c-dark-text);
  border:1px solid var(--c-dark-line); border-left:5px solid var(--c-border-strong);
  border-radius:var(--r-md); padding:var(--sp-3) var(--sp-4);
  font-size:var(--fs-sm); box-shadow:var(--e-3);
}

/* --- lists of records --------------------------------------------------- */
.rec{
  display:flex; gap:var(--sp-3); align-items:flex-start; justify-content:space-between;
  padding:var(--sp-3); border:1px solid var(--c-border); border-radius:var(--r-md);
  background:var(--c-surface); flex-wrap:wrap;
}
.rec + .rec{margin-top:var(--sp-2);}
.rec__main{flex:1 1 240px; min-width:0;}
.rec__meta{font-size:var(--fs-xs); color:var(--c-text-muted);}
.rec__amount{font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap;}
.rec--credit .rec__amount{color:var(--c-ok);}
.rec--debit .rec__amount{color:var(--c-halt);}

/* --- inline bar chart (no chart library, no remote script) -------------- */
.bars{list-style:none; margin:0; padding:0; font-size:var(--fs-sm);}
.bars li{display:grid; grid-template-columns:88px 1fr auto; gap:var(--sp-2); align-items:center; margin-bottom:var(--sp-2);}
.bars .track{background:var(--c-surface-sunk); border-radius:var(--r-pill); height:14px; overflow:hidden;}
.bars .fill{display:block; height:100%; background:var(--c-primary); border-radius:var(--r-pill);}
.fill--10{width:10%;} .fill--20{width:20%;} .fill--30{width:30%;} .fill--40{width:40%;}
.fill--50{width:50%;} .fill--60{width:60%;} .fill--65{width:65%;} .fill--70{width:70%;}
.fill--75{width:75%;} .fill--80{width:80%;} .fill--85{width:85%;} .fill--90{width:90%;}
.fill--100{width:100%;}
.fill--gold{background:var(--c-accent);}
.fill--ok{background:var(--c-ok);}

/* --- flow handoff control ----------------------------------------------- */
.handoff{
  display:flex; gap:var(--sp-3); align-items:center; flex-wrap:wrap;
  padding:var(--sp-3) var(--sp-4);
  border:1px solid var(--c-primary); border-radius:var(--r-md);
  background:var(--c-info-bg);
}
.handoff__label{font-size:var(--fs-xs); font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--c-primary);}

/* --- locale switcher ---------------------------------------------------- */
.locale{display:flex; gap:var(--sp-1); align-items:center;}
.locale__label{font-size:var(--fs-xs); font-weight:700; color:var(--c-text-muted); text-transform:uppercase; letter-spacing:.06em;}
.locale button{
  min-height:var(--target-min); min-width:var(--target-min); padding:var(--sp-1) var(--sp-2);
  border:1px solid var(--c-border-strong); border-radius:var(--r-sm);
  background:var(--c-surface); color:var(--c-text); font:inherit; font-size:var(--fs-sm); font-weight:700;
  cursor:pointer;
}
.locale button[aria-pressed="true"]{background:var(--c-primary); color:var(--c-primary-contrast); border-color:var(--c-primary);}