/* =====================================================================
   WJDXB — UI KIT
   Card · Button · Badge · Switch · Tabs · Avatar · Input · Separator

   Naming: .block, .block--variant, .block__part
   Variants never fight each other on specificity — every rule here is a
   single class, so adding a modifier is always predictable.
   ===================================================================== */

:root{
  --paper:#EEF4EF; --paper-deep:#E2ECE4; --card:#FFF;
  --ink:#14302A; --ink-soft:#52706A; --ink-faint:#8AA39C;
  --line:#D6E3DA; --line-strong:#BFD3C7;
  --accent:#1E6B58; --accent-dk:#14503F; --accent-bg:#E4F0EA;
  --gold:#A9803D; --gold-bg:#FAF0DE;
  --rose:#A8453E; --rose-bg:#FBEDEC;

  --r-sm:6px; --r-md:10px; --r-lg:16px; --r-pill:999px;
  --shadow:0 1px 2px rgba(20,48,42,.05), 0 8px 24px rgba(20,48,42,.07);
  --shadow-sm:0 1px 2px rgba(20,48,42,.06);

  --font-display:'Newsreader',Georgia,serif;
  --font-ui:'IBM Plex Sans',system-ui,-apple-system,sans-serif;
  --font-data:'IBM Plex Mono',ui-monospace,monospace;

  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
  --sp-5:22px; --sp-6:32px; --sp-7:48px;
}

*{box-sizing:border-box}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

/* ============ SEPARATOR ============ */
.sep{border:0; border-top:1px solid var(--line); margin:var(--sp-5) 0}
.sep--tear{border-top-style:dashed}
.sep--tight{margin:var(--sp-3) 0}
.sep--label{
  display:flex; align-items:center; gap:var(--sp-3);
  border:0; margin:var(--sp-5) 0;
  font-family:var(--font-data); font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-faint);
}
.sep--label::before,.sep--label::after{
  content:''; flex:1; border-top:1px solid var(--line);
}

/* ============ CARD ============ */
.card{
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-md); padding:var(--sp-5);
}
.card--flat{background:var(--paper); border-color:transparent}
.card--pad-lg{padding:var(--sp-6)}
.card--quiet{border-style:dashed}

/* The torn stub. Reserved for things that ARE receipts — using it
   everywhere is what made it stop meaning anything last time. */
.card--stub{
  position:relative; border:0; border-radius:var(--r-sm);
  box-shadow:var(--shadow); padding:28px 24px 22px;
}
.card--stub::before,.card--stub::after{
  content:''; position:absolute; left:0; right:0; height:7px;
  background-image:radial-gradient(circle at 6px 0,transparent 0 6px,var(--card) 6.5px);
  background-size:14px 7px; background-repeat:repeat-x;
}
.card--stub::before{top:-6px; transform:rotate(180deg)}
.card--stub::after{bottom:-6px}

.card__head{margin-bottom:var(--sp-4)}
.card__title{
  font-family:var(--font-display); font-size:19px; font-weight:500;
  margin:0; letter-spacing:-.01em;
}
.card__sub{color:var(--ink-soft); font-size:13.5px; margin:var(--sp-1) 0 0}
.card__foot{
  font-family:var(--font-data); font-size:10.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-faint);
  display:flex; justify-content:space-between; gap:var(--sp-3);
}

/* ============ BUTTON ============ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  font-family:var(--font-ui); font-size:15px; font-weight:400; line-height:1.2;
  padding:12px 18px; min-height:44px;
  border:1px solid transparent; border-radius:var(--r-sm);
  cursor:pointer; text-decoration:none; white-space:nowrap;
  transition:background .12s ease, border-color .12s ease, color .12s ease;
}
.btn:disabled{opacity:.42; cursor:default}
@media (prefers-reduced-motion:reduce){.btn{transition:none}}

.btn--primary{background:var(--accent); color:#fff; font-weight:500}
.btn--primary:not(:disabled):hover{background:var(--accent-dk)}

.btn--secondary{background:var(--card); color:var(--ink); border-color:var(--line-strong)}
.btn--secondary:not(:disabled):hover{border-color:var(--accent); color:var(--accent)}

.btn--ghost{background:transparent; color:var(--ink-soft)}
.btn--ghost:not(:disabled):hover{background:var(--paper-deep); color:var(--ink)}

.btn--danger{background:var(--card); color:var(--rose); border-color:#EED6D4}
.btn--danger:not(:disabled):hover{background:var(--rose-bg)}

.btn--sm{font-size:13.5px; padding:8px 13px; min-height:36px}
.btn--block{display:flex; width:100%}

/* Segmented choice — two or more mutually exclusive buttons. */
.btn-group{display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:var(--sp-2)}
.btn-group .btn{width:100%}
.btn-group .btn[aria-pressed="true"]{
  background:var(--accent); border-color:var(--accent); color:#fff; font-weight:500;
}

.spin{
  display:inline-block; width:13px; height:13px; flex:none;
  border:2px solid currentColor; border-top-color:transparent;
  border-radius:50%; opacity:.75; animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin{animation:none}}

/* ============ BADGE ============ */
.badge{
  display:inline-flex; align-items:center; gap:5px;
  font-family:var(--font-data); font-size:10.5px; letter-spacing:.05em;
  text-transform:uppercase; padding:4px 9px; border-radius:var(--r-pill);
  background:var(--paper-deep); color:var(--ink-soft); border:1px solid transparent;
}
.badge--accent{background:var(--accent); color:#fff}
.badge--accent-soft{background:var(--accent-bg); color:var(--accent-dk)}
.badge--gold{background:var(--gold-bg); color:var(--gold)}
.badge--rose{background:var(--rose-bg); color:var(--rose)}
.badge--outline{background:transparent; border-color:var(--line-strong); color:var(--ink-soft)}
.badge__dot{width:5px; height:5px; border-radius:50%; background:currentColor}

/* ============ AVATAR ============ */
.avatar{
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:38px; height:38px; border-radius:50%;
  background:var(--accent-bg); color:var(--accent-dk);
  font-family:var(--font-ui); font-size:13px; font-weight:500;
  letter-spacing:.02em; text-transform:uppercase; user-select:none;
}
.avatar--sm{width:28px; height:28px; font-size:11px}
.avatar--lg{width:52px; height:52px; font-size:17px}
.avatar--invert{background:rgba(255,255,255,.14); color:#fff}
.avatar-row{display:flex; align-items:center; gap:var(--sp-3)}
.avatar-row__name{font-size:14.5px; line-height:1.3}
.avatar-row__meta{
  font-family:var(--font-data); font-size:10.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-faint); margin-top:2px;
}

/* ============ INPUT ============ */
.field{display:flex; flex-direction:column; gap:6px}
.field__label{font-size:12.5px; font-weight:500; color:var(--ink-soft)}
.field__label .req{color:var(--ink-faint); font-weight:400}
.field__hint{font-size:12.5px; color:var(--ink-faint)}
.field__error{font-size:12.5px; color:var(--rose); display:none}
.field__error.is-shown{display:block}

.input{
  width:100%; padding:11px 13px; min-height:44px;
  font-family:var(--font-ui); font-size:16px; color:var(--ink);
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r-sm); outline:none;
}
.input::placeholder{color:var(--ink-faint)}
.input:hover:not(:focus){border-color:var(--line-strong)}
.input:focus{border-color:var(--accent); box-shadow:0 0 0 3px rgba(30,107,88,.12)}
.input:disabled{opacity:.55; cursor:default}
.input--data{font-family:var(--font-data); letter-spacing:.04em}
.input--lg{font-size:22px; letter-spacing:.18em; text-align:center; padding:14px}
.input--invalid{border-color:var(--rose)}
.input--invalid:focus{box-shadow:0 0 0 3px rgba(168,69,62,.12)}

/* ============ SWITCH ============ */
.switch{
  display:inline-flex; align-items:flex-start; gap:var(--sp-3);
  cursor:pointer; user-select:none;
}
.switch__input{position:absolute; opacity:0; width:0; height:0}
.switch__track{
  position:relative; flex:none; width:44px; height:26px; margin-top:1px;
  background:var(--line-strong); border-radius:var(--r-pill);
  transition:background .16s ease;
}
.switch__track::after{
  content:''; position:absolute; top:3px; left:3px;
  width:20px; height:20px; border-radius:50%;
  background:#fff; box-shadow:var(--shadow-sm);
  transition:transform .16s ease;
}
.switch__input:checked + .switch__track{background:var(--accent)}
.switch__input:checked + .switch__track::after{transform:translateX(18px)}
.switch__input:focus-visible + .switch__track{outline:2px solid var(--accent); outline-offset:2px}
.switch__input:disabled + .switch__track{opacity:.45}
.switch__text{line-height:1.4}
.switch__label{font-size:14.5px}
.switch__desc{font-size:12.5px; color:var(--ink-soft); margin-top:2px}
@media (prefers-reduced-motion:reduce){
  .switch__track,.switch__track::after{transition:none}
}

/* ============ TABS ============ */
.tabs__list{
  display:flex; gap:var(--sp-1); border-bottom:1px solid var(--line);
  margin-bottom:var(--sp-5); overflow-x:auto; scrollbar-width:none;
}
.tabs__list::-webkit-scrollbar{display:none}
.tabs__tab{
  background:none; border:0; border-bottom:2px solid transparent;
  font-family:var(--font-ui); font-size:14.5px; color:var(--ink-soft);
  padding:10px 14px; margin-bottom:-1px; cursor:pointer; white-space:nowrap;
}
.tabs__tab:hover{color:var(--ink)}
.tabs__tab[aria-selected="true"]{color:var(--accent); border-bottom-color:var(--accent); font-weight:500}
.tabs__panel[hidden]{display:none}

/* ============ SMALL SHARED PIECES ============ */
.stack{display:flex; flex-direction:column; gap:var(--sp-4)}
.stack--tight{gap:var(--sp-2)}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4)}
@media (max-width:520px){.row2{grid-template-columns:1fr}}
.tags{display:flex; flex-wrap:wrap; gap:6px}

.notice{
  display:none; padding:11px 13px; border-radius:var(--r-sm);
  font-size:13.5px; line-height:1.45; border:1px solid transparent;
}
.notice.is-shown{display:block}
.notice--error{background:var(--rose-bg); border-color:#EED6D4; color:var(--rose)}
.notice--warn{background:var(--gold-bg); border-color:#EBD9B4; color:var(--gold)}
.notice--ok{background:var(--accent-bg); border-color:#C6DED3; color:var(--accent-dk)}

.figs{border-top:1px dashed var(--line); margin-top:var(--sp-4); padding-top:var(--sp-3)}
.fig{display:flex; justify-content:space-between; align-items:baseline; gap:var(--sp-4); padding:7px 0}
.fig__k{font-size:13px; color:var(--ink-soft)}
.fig__v{font-family:var(--font-data); font-size:15px; text-align:right}
.fig--lead .fig__v{
  font-family:var(--font-display); font-size:27px; color:var(--accent); font-weight:500;
}

.receipt-no{text-align:center; padding:var(--sp-1) 0 2px}
.receipt-no__lb{
  font-family:var(--font-data); font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-faint);
}
.receipt-no__v{
  font-family:var(--font-display); font-size:33px; margin-top:5px; letter-spacing:-.01em;
}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ============ STAT BOXES ============
   Figures as a scannable grid rather than a stack of rows. Two columns
   on a phone, four on a desktop — the count adapts, the box does not. */
/* Fixed column counts rather than auto-fit: auto-fit packs as many as
   will fit and leaves an orphan on the last row. Two, three or four
   always divides a set of eight cleanly. */
.stats{display:grid; grid-template-columns:repeat(2,1fr); gap:10px}
@media (min-width:600px){ .stats{grid-template-columns:repeat(3,1fr)} }
@media (min-width:980px){ .stats{grid-template-columns:repeat(4,1fr)} }

/* Where the box count is known and divisible by four, lock to two or
   four columns so a row is never left with a single orphan. */
.stats--4{grid-template-columns:repeat(2,1fr)}
@media (min-width:780px){ .stats--4{grid-template-columns:repeat(4,1fr)} }

.stat{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-md);
  padding:14px 15px; display:flex; flex-direction:column; gap:3px;
  min-height:92px; min-width:0; justify-content:flex-start;
}
.stat__k{
  font-family:var(--font-data); font-size:9.5px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--ink-faint);
  line-height:1.35; overflow-wrap:anywhere;
}
/* nowrap stops the currency symbol being orphaned onto its own line,
   which is what a long figure did at the old size. */
.stat__v{
  font-family:var(--font-display); font-size:25px; font-weight:500;
  letter-spacing:-.025em; line-height:1.15; color:var(--ink);
  white-space:nowrap; font-variant-numeric:tabular-nums;
  overflow:hidden; text-overflow:ellipsis;
}
.stat__v--long{font-size:19px; letter-spacing:-.02em}
.stat__v--xlong{font-size:16px; letter-spacing:-.01em}
/* Two-up on a small phone leaves very little width, so everything
   steps down one more notch there. */
@media (max-width:420px){
  .stat__v{font-size:21px}
  .stat__v--long{font-size:17px}
  .stat__v--xlong{font-size:14px}
}
.stat__s{font-size:11.5px; color:var(--ink-soft); margin-top:auto; padding-top:4px;
         line-height:1.35; overflow-wrap:anywhere}
.stat--lead{background:var(--accent); border-color:var(--accent)}
.stat--lead .stat__k{color:rgba(255,255,255,.7)}
.stat--lead .stat__v{color:#fff}
.stat--lead .stat__s{color:rgba(255,255,255,.82)}
.stat--wide{grid-column:1/-1}
.stat--gold .stat__v{color:var(--gold)}
.stat--rose .stat__v{color:var(--rose)}

/* Small figure with a progress track underneath. */
.stat__bar{height:5px; background:var(--paper-deep); border-radius:99px;
           overflow:hidden; margin-top:8px}
.stat__bar > i{display:block; height:100%; background:var(--accent)}
.stat--lead .stat__bar{background:rgba(255,255,255,.24)}
.stat--lead .stat__bar > i{background:#fff}

/* ============ SIMPLE TABLE ============ */
.tbl{width:100%; border-collapse:collapse; font-size:12.5px}
.tbl th{
  text-align:left; padding:7px 12px 7px 0; font-weight:500; color:var(--ink-faint);
  font-family:var(--font-data); font-size:10px; letter-spacing:.08em;
  text-transform:uppercase; border-bottom:1px solid var(--line); white-space:nowrap;
}
.tbl td{padding:8px 12px 8px 0; border-bottom:1px solid var(--paper-deep); vertical-align:top}
.tbl tr:last-child td{border-bottom:0}
.tbl .num{text-align:right; font-variant-numeric:tabular-nums; font-family:var(--font-data)}
.scroll-x{overflow-x:auto; -webkit-overflow-scrolling:touch}