@import url("https://fonts.googleapis.com/css2?family=Commissioner:wght@300;400;500;600;700&display=swap");

/* ── Token bridge ────────────────────────────────────────
   tokens.css (generated from tokens.json) holds colours, spacing, radii,
   borders, shadows and --font-core. What it cannot hold lives here, before
   the component rules: the type scale as variables, motion, the focus ring,
   the web breakpoints and the kiosk switch.
   Kiosk: put data-scale="kiosk" on the root of a 1280×1024 screen. It points
   the plain names at their -kiosk tokens, so every component grows with it. */
:root{
--font-numeric:var(--font-core);
--type-amount-size:40px;--type-amount-line:44px;--type-amount-weight:700;
--type-title-size:26px;--type-title-line:32px;--type-title-weight:700;
--type-subtitle-size:17px;--type-subtitle-line:24px;--type-subtitle-weight:400;
--type-section-size:16px;--type-section-line:22px;--type-section-weight:600;
--type-body-size:16px;--type-body-line:24px;--type-body-weight:400;
--type-small-size:14px;--type-small-line:20px;--type-small-weight:400;
--type-button-size:17px;--type-button-line:22px;--type-button-weight:600;
--type-tracking-tight:-0.01em;--type-tracking-normal:0;--type-tracking-wide:0.02em;
--dur-press:90ms;--dur-state:160ms;--dur-screen:220ms;--dur-spin:900ms;
--ease-standard:cubic-bezier(.2,0,.2,1);--ease-out:cubic-bezier(0,0,.2,1);--ease-linear:linear;
--press-scale:0.98;
--focus-ring-width:3px;--focus-ring-offset:2px;
}
/* mycopy.org breakpoints: 360 (base) · 600 (tablet) · 1024 (laptop) */
@media (min-width:600px){:root{--screen-pad:24px;--block-gap:24px;--card-pad:20px}}
@media (min-width:1024px){:root{--screen-pad:32px;--content-max:960px}}
[data-scale="kiosk"]{
--screen-pad:var(--screen-pad-kiosk);--block-gap:var(--block-gap-kiosk);--card-pad:var(--card-pad-kiosk);--stack-gap:var(--stack-gap-kiosk);
--control-h:var(--control-h-kiosk);--control-h-compact:var(--control-h-compact-kiosk);--touch-min:var(--touch-min-kiosk);--icon-size:var(--icon-size-kiosk);
--content-max:var(--content-max-kiosk);--tile-icon:var(--tile-icon-kiosk);--header-h:var(--header-h-kiosk);--logo-h:var(--logo-h-kiosk);--tile-title:var(--tile-title-kiosk);
--radius-sm:var(--radius-sm-kiosk);--radius-md:var(--radius-md-kiosk);--radius-lg:var(--radius-lg-kiosk);--radius-xl:var(--radius-xl-kiosk);
--type-amount-size:72px;--type-amount-line:76px;
--type-title-size:44px;--type-title-line:52px;
--type-subtitle-size:28px;--type-subtitle-line:38px;
--type-section-size:24px;--type-section-line:30px;
--type-body-size:22px;--type-body-line:32px;
--type-small-size:18px;--type-small-line:26px;
--type-button-size:24px;--type-button-line:30px;
}
@media (prefers-reduced-motion:reduce){:root{--dur-press:0ms;--dur-state:0ms;--dur-screen:0ms}}
@keyframes mc-spin{to{transform:rotate(360deg)}}
@keyframes mc-screen-in{from{opacity:0}to{opacity:1}}

:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring);outline-offset:var(--focus-ring-offset)}
[data-scale="kiosk"] :focus-visible{outline:none}

.mc-amount{font:var(--type-amount-weight) var(--type-amount-size)/var(--type-amount-line) var(--font-numeric);font-variant-numeric:tabular-nums;letter-spacing:var(--type-tracking-tight)}
.mc-title{font:var(--type-title-weight) var(--type-title-size)/var(--type-title-line) var(--font-core);letter-spacing:var(--type-tracking-tight)}
.mc-subtitle{font:var(--type-subtitle-weight) var(--type-subtitle-size)/var(--type-subtitle-line) var(--font-core)}
.mc-section{font:var(--type-section-weight) var(--type-section-size)/var(--type-section-line) var(--font-core)}
.mc-body{font:var(--type-body-weight) var(--type-body-size)/var(--type-body-line) var(--font-core)}
.mc-small{font:var(--type-small-weight) var(--type-small-size)/var(--type-small-line) var(--font-core)}
.mc-button{font:var(--type-button-weight) var(--type-button-size)/var(--type-button-line) var(--font-core)}

/* MyCopy component styles. Kiosk-safe: no blur, no blend modes, no text effects,
   at most one shadow per surface. Hover rules are guarded by (hover:hover) so the
   kiosk never inherits mouse-only meaning. */

/* ── Button ───────────────────────────────────────────── */
.mc-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-3);height:var(--control-h);min-width:var(--touch-min);padding:0 var(--space-6);border:var(--border-regular) solid transparent;border-radius:var(--radius-md);font:var(--type-button-weight) var(--type-button-size)/var(--type-button-line) var(--font-core);cursor:pointer;text-align:center;transition:background-color var(--dur-state) var(--ease-standard),color var(--dur-state) var(--ease-standard),border-color var(--dur-state) var(--ease-standard)}
.mc-btn--compact{height:var(--control-h-compact);padding:0 var(--space-4);font-size:var(--type-body-size)}
.mc-btn--block{width:100%}
.mc-btn--primary{background:var(--accent,var(--action-primary));color:var(--on-action-primary)}
.mc-btn--secondary{background:var(--action-secondary);color:var(--on-action-secondary);border-color:var(--line)}
.mc-btn--danger{background:var(--action-danger);color:var(--on-action-danger)}
@media (hover:hover){.mc-btn--primary:hover{filter:brightness(1.08)}.mc-btn--secondary:hover{background:var(--ink-50);border-color:var(--ink-300)}.mc-btn--danger:hover{background:#D63A40}}
.mc-btn--primary:active{background:var(--accent-press,var(--action-primary-press))}
.mc-btn--secondary:active{background:var(--action-secondary-press)}
.mc-btn--danger:active{background:var(--action-danger-press)}
.mc-btn:active{transform:scale(var(--press-scale))}
.mc-btn:disabled,.mc-btn[aria-disabled="true"]{background:var(--action-disabled);color:var(--on-action-disabled);border-color:transparent;cursor:default;transform:none}

/* ── Icon ─────────────────────────────────────────────── */
.mc-icon{display:inline-block;flex:none;object-fit:contain}

/* ── SelectCard ───────────────────────────────────────── */
.mc-selectcard{position:relative;display:flex;background:var(--surface-card);color:var(--on-surface-card);border:var(--border-regular) solid var(--line);border-radius:var(--radius-xl);cursor:pointer;text-align:left;transition:border-color var(--dur-state) var(--ease-standard),background-color var(--dur-state) var(--ease-standard)}
.mc-selectcard__title{font:800 var(--type-section-size)/1.15 var(--font-core);color:var(--accent)}
.mc-selectcard__desc{color:var(--text-secondary);font:var(--type-body-weight) var(--type-body-size)/var(--type-body-line) var(--font-core)}
.mc-selectcard__icon{display:grid;place-items:center;flex:none;border-radius:50%;background:var(--accent)}
.mc-selectcard__arrow{display:grid;place-items:center;flex:none;border-radius:50%;background:var(--accent)}

/* tile — the whole card is the colour */
.mc-selectcard--tile{flex-direction:column;align-items:stretch;text-align:left;gap:var(--space-4);padding:var(--card-pad);background:var(--accent);border-color:transparent;color:var(--white);box-shadow:var(--shadow-card)}
.mc-selectcard--tile .mc-selectcard__icon{align-self:flex-end;width:var(--tile-icon);height:var(--tile-icon);background:transparent;border-radius:0}
.mc-selectcard--tile .mc-selectcard__body{margin-top:auto;display:flex;flex-direction:column;gap:var(--space-2)}
.mc-selectcard--tile .mc-selectcard__title{font-size:var(--tile-title);line-height:1;color:var(--white);text-transform:uppercase;letter-spacing:var(--type-tracking-tight)}
.mc-selectcard--tile .mc-selectcard__desc{color:rgba(255,255,255,.92);font-weight:600}
.mc-selectcard--tile .mc-selectcard__arrow{align-self:flex-end;width:80px;height:80px;background:rgba(255,255,255,.22)}
.mc-selectcard--tile[aria-checked="true"]{border-color:var(--white);border-width:var(--border-selected);background:var(--accent-press);padding:calc(var(--card-pad) - 1px)}
.mc-selectcard--tile[aria-disabled="true"]{background:var(--ink-600);color:rgba(255,255,255,.55)}
.mc-selectcard--tile[aria-disabled="true"] .mc-selectcard__title,.mc-selectcard--tile[aria-disabled="true"] .mc-selectcard__desc{color:rgba(255,255,255,.55)}

/* row — the compact form for settings */
.mc-selectcard--row{align-items:center;gap:var(--space-4);width:100%;padding:var(--card-pad);min-height:var(--touch-min);border-radius:var(--radius-lg)}
.mc-selectcard--row .mc-selectcard__icon{width:calc(var(--icon-size)*1.9);height:calc(var(--icon-size)*1.9)}
.mc-selectcard--row .mc-selectcard__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--space-1)}
.mc-selectcard--row .mc-selectcard__desc{font-size:var(--type-small-size);line-height:var(--type-small-line)}
.mc-selectcard--row[aria-checked="true"]{border-color:var(--accent);border-width:var(--border-selected);background:var(--accent-soft);padding:calc(var(--card-pad) - 1px)}

@media (hover:hover){.mc-selectcard:hover{border-color:var(--accent)}}
.mc-selectcard:active{transform:scale(var(--press-scale))}
.mc-selectcard[aria-disabled="true"]{background:var(--surface-disabled);color:var(--on-surface-disabled);border-color:transparent;box-shadow:none;cursor:default;transform:none}
.mc-selectcard[aria-disabled="true"] .mc-selectcard__icon{background:var(--ink-300)}
.mc-selectcard[aria-disabled="true"] .mc-selectcard__title,.mc-selectcard[aria-disabled="true"] .mc-selectcard__desc{color:var(--on-surface-disabled)}

/* ── FileRow ──────────────────────────────────────────── */
.mc-filerow{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-3) var(--card-pad);min-height:var(--touch-min);background:var(--surface-card);border:var(--border-regular) solid var(--line);border-radius:var(--radius-md)}
.mc-filerow[data-selected="true"]{border-color:var(--accent);background:var(--cat-print-soft)}
.mc-filerow__body{flex:1;min-width:0}
.mc-filerow__name{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:var(--type-body-weight) var(--type-body-size)/var(--type-body-line) var(--font-core)}
.mc-filerow__meta{color:var(--text-secondary);font:var(--type-small-weight) var(--type-small-size)/var(--type-small-line) var(--font-core)}
.mc-filerow__check{display:grid;place-items:center;width:var(--touch-min);height:var(--touch-min);flex:none;border:var(--border-regular) solid var(--line);border-radius:var(--radius-sm);background:var(--surface-card);color:transparent;cursor:pointer}
.mc-filerow[data-selected="true"] .mc-filerow__check{background:var(--accent);border-color:var(--accent);color:var(--white)}
.mc-iconbtn{display:grid;place-items:center;width:var(--touch-min);height:var(--touch-min);flex:none;border:var(--border-regular) solid transparent;border-radius:var(--radius-md);background:rgba(255,255,255,.10);color:var(--white);cursor:pointer;transition:background-color var(--dur-state) var(--ease-standard),color var(--dur-state) var(--ease-standard)}
@media (hover:hover){.mc-iconbtn:hover{background:var(--ink-50);color:var(--ink-900)}}
.mc-iconbtn:active{background:var(--ink-100)}
.mc-iconbtn--danger{color:var(--red-600)}
@media (hover:hover){.mc-iconbtn--danger:hover{background:var(--red-50);color:var(--red-700)}}

/* ── CopyStepper ──────────────────────────────────────── */
.mc-stepper{display:inline-flex;align-items:center;border:var(--border-regular) solid var(--line);border-radius:var(--radius-md);background:var(--surface-card);overflow:hidden}
.mc-stepper__btn{display:grid;place-items:center;width:var(--touch-min);height:var(--touch-min);border:0;background:transparent;color:var(--ink-800);cursor:pointer;transition:background-color var(--dur-press) var(--ease-standard)}
.mc-stepper__btn:active{background:var(--ink-100)}
@media (hover:hover){.mc-stepper__btn:hover:not(:disabled){background:var(--ink-50)}}
.mc-stepper__btn:disabled{color:var(--text-disabled);cursor:default}
.mc-stepper__value{min-width:calc(var(--touch-min) + var(--space-2));text-align:center;font:600 var(--type-body-size)/var(--type-body-line) var(--font-core);font-variant-numeric:tabular-nums;border-left:var(--border-hairline) solid var(--line);border-right:var(--border-hairline) solid var(--line);align-self:stretch;display:grid;place-items:center}

/* ── NumericKeypad (kiosk) ────────────────────────────── */
.mc-keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3)}
.mc-key{height:var(--control-h);min-width:var(--touch-min);display:grid;place-items:center;background:var(--surface-card);color:var(--ink-800);border:var(--border-regular) solid var(--line);border-radius:var(--radius-md);font:600 var(--type-title-size)/1 var(--font-core);font-variant-numeric:tabular-nums;cursor:pointer;transition:background-color var(--dur-press) var(--ease-standard)}
.mc-key:active{background:var(--accent);border-color:var(--accent);color:var(--white)}
.mc-key--action{font-size:var(--type-section-size);color:var(--ink-600)}

/* ── CodeCells ────────────────────────────────────────── */
.mc-cells{display:flex;align-items:center;gap:var(--space-2)}
.mc-cells__gap{width:var(--space-3)}
.mc-cell{display:grid;place-items:center;width:calc(var(--control-h) * 0.78);height:var(--control-h);background:var(--surface-card);border:var(--border-regular) solid var(--line);border-radius:var(--radius-md);font:700 var(--type-title-size)/1 var(--font-core);font-variant-numeric:tabular-nums;color:var(--ink-900)}
.mc-cell[data-state="filled"]{border-color:var(--ink-600)}
.mc-cell[data-state="active"]{border-color:var(--accent);border-width:var(--border-selected)}
.mc-cell[data-state="error"]{border-color:var(--line-danger);background:var(--surface-danger);color:var(--red-700)}
.mc-cell--pin[data-state="filled"]{font-size:calc(var(--type-title-size) * 1.2)}

/* ── AmountDisplay ────────────────────────────────────── */
.mc-amountbox{display:inline-flex;flex-direction:column;align-items:flex-end;gap:var(--space-1);padding:var(--space-4) var(--space-6);background:rgba(255,255,255,.08);border-radius:var(--radius-lg)}
.mc-amountbox__label{color:var(--ink-300);font:var(--type-small-weight) var(--type-small-size)/1.2 var(--font-core);letter-spacing:var(--type-tracking-wide);text-transform:uppercase}
.mc-amountbox__value{color:var(--white);font:var(--type-amount-weight) var(--type-amount-size)/var(--type-amount-line) var(--font-numeric);font-variant-numeric:tabular-nums;letter-spacing:var(--type-tracking-tight)}
.mc-amountbox--plain{background:transparent;padding:0;align-items:flex-start}
.mc-amountbox--plain .mc-amountbox__value{color:var(--ink-900)}
.mc-amountbox--plain .mc-amountbox__label{color:var(--text-secondary)}

/* ── StepBar ──────────────────────────────────────────── */
.mc-stepbar{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4) var(--screen-pad);background:var(--surface-shell);border-top:var(--border-hairline) solid var(--line-shell)}
.mc-stepbar__item{display:flex;align-items:center;gap:var(--space-2);flex:1;min-width:0}
.mc-stepbar__dot{display:grid;place-items:center;width:calc(var(--icon-size) + var(--space-2));height:calc(var(--icon-size) + var(--space-2));flex:none;border-radius:var(--radius-pill);background:rgba(255,255,255,.14);color:var(--white);font:600 var(--type-small-size)/1 var(--font-core)}
.mc-stepbar__item[data-state="done"] .mc-stepbar__dot{background:var(--green-600);color:var(--white)}
.mc-stepbar__item[data-state="current"] .mc-stepbar__dot{background:var(--accent);color:var(--white)}
.mc-stepbar__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--on-surface-screen-secondary);font:var(--type-small-weight) var(--type-small-size)/var(--type-small-line) var(--font-core)}
.mc-stepbar__item[data-state="current"] .mc-stepbar__label{color:var(--white);font-weight:600}
.mc-stepbar__rule{flex:none;width:var(--space-6);height:2px;background:rgba(255,255,255,.20)}

/* ── AppHeader ────────────────────────────────────────── */
.mc-header{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-3) var(--screen-pad);min-height:var(--header-h);background:var(--surface-shell);color:var(--on-surface-shell);border-bottom:var(--border-hairline) solid var(--line-shell)}
.mc-header__logo{height:var(--logo-h);width:auto;display:block}
.mc-header__spacer{flex:1}
.mc-header__lang{display:flex;gap:var(--space-1);align-items:center}
.mc-header__langbtn{min-width:var(--touch-min);height:var(--touch-min);padding:0 var(--space-4);border-radius:var(--radius-md);background:rgba(255,255,255,.10);color:var(--white);font-size:var(--type-section-size);border:var(--border-regular) solid transparent;border-radius:var(--radius-md);background:transparent;color:var(--text-secondary);font:600 var(--type-small-size)/1 var(--font-core);text-transform:uppercase;cursor:pointer}
.mc-header__langbtn[aria-pressed="true"]{background:var(--brand-orange);color:var(--ink-900)}

/* ── ScreenTitle ──────────────────────────────────────── */
.mc-screentitle__title{margin:0;color:var(--on-surface-screen);font:var(--type-title-weight) var(--type-title-size)/var(--type-title-line) var(--font-core);letter-spacing:var(--type-tracking-tight);text-wrap:balance}
.mc-screentitle__sub{margin:var(--space-2) 0 0;color:var(--on-surface-screen-secondary);font:var(--type-subtitle-weight) var(--type-subtitle-size)/var(--type-subtitle-line) var(--font-core);text-wrap:pretty}
.mc-screentitle--single .mc-screentitle__title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── MessageBanner ────────────────────────────────────── */
.mc-banner{display:flex;gap:var(--space-3);align-items:flex-start;padding:var(--card-pad);border-radius:var(--radius-md);border-left:0}
.mc-banner--info{background:var(--surface-info);color:var(--on-surface-info)}
.mc-banner--warning{background:var(--surface-warning);color:var(--on-surface-warning)}
.mc-banner--danger{background:var(--surface-danger);color:var(--on-surface-danger)}
.mc-banner--success{background:var(--surface-success);color:var(--on-surface-success)}
.mc-banner__title{font:600 var(--type-body-size)/var(--type-body-line) var(--font-core)}
.mc-banner__text{margin-top:var(--space-1);color:var(--text-primary);font:var(--type-small-weight) var(--type-small-size)/var(--type-small-line) var(--font-core)}

/* ── SectionPanel ─────────────────────────────────────── */
.mc-panel{background:var(--surface-card);border:var(--border-hairline) solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
.mc-panel__head{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--card-pad);border-bottom:var(--border-hairline) solid var(--line)}
.mc-panel__title{flex:1;font:var(--type-section-weight) var(--type-section-size)/var(--type-section-line) var(--font-core)}
.mc-panel__body{padding:var(--card-pad)}

/* ── QrBlock ──────────────────────────────────────────── */
.mc-qr{display:inline-flex;flex-direction:column;align-items:center;gap:var(--space-3);padding:var(--card-pad);background:var(--surface-card);border:var(--border-hairline) solid var(--line);border-radius:var(--radius-lg)}
.mc-qr__img{display:block;background:var(--white)}
.mc-qr__placeholder{display:grid;place-items:center;background:var(--surface-sunken);color:var(--text-secondary);font:var(--type-small-weight) var(--type-small-size)/1.2 var(--font-core);text-align:center;padding:var(--space-2)}
.mc-qr__caption{max-width:26ch;text-align:center;color:var(--text-secondary);font:var(--type-small-weight) var(--type-small-size)/var(--type-small-line) var(--font-core)}

/* ── Spinner ──────────────────────────────────────────── */
.mc-spinner{display:inline-flex;align-items:center;gap:var(--space-3);color:var(--text-secondary);font:var(--type-body-weight) var(--type-body-size)/var(--type-body-line) var(--font-core)}
.mc-spinner__ring{border-radius:50%;border-style:solid;border-color:var(--ink-100);border-top-color:var(--accent);animation:mc-spin var(--dur-spin) var(--ease-linear) infinite}

/* ── TextField (web) ──────────────────────────────────── */
.mc-field{display:flex;flex-direction:column;gap:var(--space-2)}
.mc-field__label{font:600 var(--type-small-size)/var(--type-small-line) var(--font-core);color:var(--text-primary)}
.mc-field__input{height:var(--control-h);padding:0 var(--space-4);background:var(--surface-card);color:var(--text-primary);border:var(--border-regular) solid var(--line);border-radius:var(--radius-md);font:var(--type-body-weight) var(--type-body-size)/var(--type-body-line) var(--font-core);transition:border-color var(--dur-state) var(--ease-standard)}
.mc-field__input::placeholder{color:var(--text-disabled)}
@media (hover:hover){.mc-field__input:hover{border-color:var(--ink-300)}}
.mc-field__input:focus{outline:none;border-color:var(--ink-600)}
.mc-field__input:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring);outline-offset:var(--focus-ring-offset)}
.mc-field--error .mc-field__input{border-color:var(--line-danger);background:var(--surface-danger)}
.mc-field__hint{font:var(--type-small-weight) var(--type-small-size)/var(--type-small-line) var(--font-core);color:var(--text-secondary)}
.mc-field--error .mc-field__hint{color:var(--text-danger)}

/* ── FileDropzone (web) ───────────────────────────────── */
.mc-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-3);padding:var(--space-8) var(--space-6);min-height:180px;text-align:center;background:var(--surface-card);border:var(--border-regular) dashed var(--line-strong);border-radius:var(--radius-lg);color:var(--text-secondary);transition:border-color var(--dur-state) var(--ease-standard),background-color var(--dur-state) var(--ease-standard)}
.mc-drop[data-state="drag"]{border-color:var(--accent);border-style:solid;background:var(--accent-soft);color:var(--text-primary)}
.mc-drop[data-state="done"]{border-style:solid;border-color:var(--green-600);background:var(--surface-success);color:var(--green-700)}
.mc-drop[data-state="error"]{border-style:solid;border-color:var(--red-600);background:var(--surface-danger);color:var(--red-700)}
.mc-drop__title{font:600 var(--type-body-size)/var(--type-body-line) var(--font-core);color:var(--text-primary)}
.mc-drop__bar{width:100%;max-width:280px;height:8px;border-radius:var(--radius-pill);background:var(--ink-100);overflow:hidden}
.mc-drop__fill{height:100%;background:var(--accent);transition:width var(--dur-state) var(--ease-out)}