/* static/sales/theme.css — PaySquatch counter theme.
   Everything is expressed through tokens so a re-skin is an edit to :root, not to 18 templates.
   Served locally; no remote fonts or images (certified: "no remote assets load"). */
/* Hidden state must win over author component and layout styles. */
[hidden]{display:none !important}
:root{
  --ink:#10201f; --ink-2:#3d514f; --muted:#6b7f7c;
  --paper:#f4f6f5; --card:#ffffff; --rule:#dde4e2;
  --brand:#0f5c57; --brand-ink:#ffffff; --brand-wash:#e6efee;
  --ok:#1f6b4a; --warn:#8a5a06; --stop:#9c3226;
  --r:12px; --gap:14px; --tap:48px;
  --shadow:0 1px 2px rgba(16,32,31,.06),0 1px 8px rgba(16,32,31,.05);

  /* Shared screen typography, spacing and controls. */
  --brand-rule:#cfe0de;
  --stop-wash:#fdecea;
  --stop-rule:#f2c4bd;
  --page-width:56rem;
  --title-size:1.5rem;
  --heading-size:1.05rem;
  --space-heading:.6rem;
  --text-size:1rem;
  --space-copy:.4rem;
  --space-panel:16px;
  --space-paragraph:.35rem;
  --eyebrow-size:.8rem;
  --balance-size:2.3rem;
  --space-figure-top:.15rem;
  --space-half:.5rem;
  --small-size:.9rem;
  --space-sm:8px;
  --space-md:10px;
  --figure-width:9rem;
  --badge-size:.85rem;
  --space-fine:.1rem;
  --tile-width:13.5rem;
  --space-control:12px;
  --icon-box:40px;
  --icon-size:22px;
  --hint-size:.83rem;
  --line:1px;
  --icon-small:18px;
  --cash-size:2rem;
  --summary-size:1.15rem;
  --space-summary:.3rem;
  --space-xs:4px;
  --pill-radius:999px;
  --space-badge:7px;
  --space-nav:6px;
  --radius-control:9px;
  --space-nav-x:13px;
  --nav-size:.92rem;
  --carrier-width:15rem;
  --space-carrier:11px;
  --carrier-icon-box:36px;
  --space-tight:.2rem;
  --carrier-copy-size:.88rem;
  --tracking-heading:-.01em;
  --tracking-eyebrow:.09em;
  --tracking-balance:-.02em;
  --space-none:0; --weight-bold:700; --weight-medium:600;
  --weight-regular:500; --weight-figure:650;
  --focus:#1259b2; --focus-width:3px; --focus-offset:2px;
  --field-height:48px; --field-radius:8px; --table-width:48rem;
  --cell-width:7rem; --form-width:14rem; --textarea-height:7rem;
  --body-size:18px; --body-leading:1.5; --cash-leading:1.2;
  --control-leading:1.35; --body-margin:12px;
  --dialog-width:36rem; --dialog-limit:90%; --dialog-height:90vh;
  --check-size:24px;
}
body{background:var(--paper);color:var(--ink-2);max-width:var(--page-width)}
h1{font-size:var(--title-size);letter-spacing:var(--tracking-heading);color:var(--ink);margin:var(--space-heading) 0 var(--text-size)}
h2{font-size:var(--heading-size);color:var(--ink);margin:0 0 var(--space-copy)}

/* ---- cards ---- */
.card{background:var(--card);border:var(--line) solid var(--rule);border-radius:var(--r);
      padding:var(--space-panel);box-shadow:var(--shadow);margin:0 0 var(--gap)}
.card p{margin:var(--space-paragraph) 0}

/* ---- today ---- */
.figure-row{display:flex;flex-wrap:wrap;gap:var(--gap)}
.figure{flex:1 1 var(--figure-width)}
.figure b{display:block;font-size:var(--title-size);color:var(--ink);font-variant-numeric:tabular-nums;line-height:1.15}
.figure span{display:block;font-size:var(--badge-size);color:var(--muted);margin-top:var(--space-fine)}

/* ---- action tiles: icon + name + hint, the shape a CellPay clerk already reads ---- */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--tile-width),1fr));gap:var(--gap)}
.tiles a,.tiles section{display:flex;align-items:center;gap:var(--space-control);min-height:var(--tap);
  background:var(--card);border:var(--line) solid var(--rule);border-radius:var(--r);
  padding:var(--gap);text-decoration:none;color:var(--ink);box-shadow:var(--shadow)}
.tiles a:hover{border-color:var(--brand);background:var(--brand-wash)}
.tiles section{opacity:.55}
.tile-ico{flex:0 0 var(--icon-box);height:var(--icon-box);display:grid;place-items:center;border-radius:var(--space-md);
          background:var(--brand-wash);color:var(--brand)}
.tile-ico svg{width:var(--icon-size);height:var(--icon-size)}
.tile-name{font-weight:600;display:block}
.tile-hint{display:block;font-size:var(--hint-size);color:var(--muted);margin-top:var(--line)}

/* ---- lists ---- */
.rows a{display:flex;align-items:center;gap:var(--space-md);min-height:var(--tap);padding:var(--space-md) var(--space-control);
        border:var(--line) solid var(--rule);border-radius:var(--space-md);background:var(--card);
        text-decoration:none;color:var(--ink);margin-bottom:var(--space-sm)}
.rows svg{width:var(--icon-small);height:var(--icon-small);color:var(--muted);flex:0 0 var(--icon-small)}
.empty{color:var(--muted);font-size:var(--small-size)}

@media (max-width:420px){ body{margin:var(--space-sm)} }
@media print{ .tiles,.rows{display:none} }

/* Today: these read as sentences a clerk scans, not as split-out figures.
   Emphasise them without breaking the text into separate nodes. */
.today-line{font-size:var(--summary-size);color:var(--ink);font-variant-numeric:tabular-nums;margin:var(--space-summary) 0}

/* ---- app bar / identity strip ----
   The .degraded stop notice stays a direct child of <body> for print hiding. */
.test{border-radius:var(--r);margin-bottom:var(--gap)}
body>header{background:var(--card);border:var(--line) solid var(--rule);border-radius:var(--r);
  padding:var(--space-control) var(--gap);box-shadow:var(--shadow);color:var(--muted);font-size:var(--small-size);margin-bottom:var(--space-md)}
body>header strong{color:var(--ink);font-size:var(--text-size)}
body>.degraded{background:var(--stop-wash);border:var(--line) solid var(--stop-rule);color:var(--stop);
  border-radius:var(--r);padding:var(--space-control) var(--gap);font-weight:500;margin:0 0 var(--gap)}

body>nav{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-nav);margin:0 0 var(--gap);
  background:var(--card);border:var(--line) solid var(--rule);border-radius:var(--r);
  padding:var(--space-sm);box-shadow:var(--shadow)}
body>nav a{padding:var(--radius-control) var(--space-nav-x);border-radius:var(--radius-control);text-decoration:none;color:var(--ink-2);
  font-size:var(--nav-size);font-weight:500;min-height:var(--tap);display:flex;align-items:center}
body>nav a:hover{background:var(--brand-wash);color:var(--brand)}
body>nav form{margin:0 0 0 auto}
body>nav form + form{margin-left:var(--space-nav)}
body>nav button{min-height:var(--tap);padding:var(--space-sm) var(--gap);border-radius:var(--radius-control);border:var(--line) solid var(--rule);
  background:var(--paper);color:var(--ink-2);font-size:var(--small-size);font-weight:500;margin:0}
body>nav button:hover{border-color:var(--brand);color:var(--brand)}

/* ---- carrier grid: icon is decorative, the carrier name is always text ---- */
.carrier-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--carrier-width),1fr));gap:var(--gap)}
.carrier-grid section{background:var(--card);border:var(--line) solid var(--rule);border-radius:var(--r);
  padding:var(--gap);box-shadow:var(--shadow)}
.carrier-head{display:flex;align-items:center;gap:var(--space-carrier);margin-bottom:var(--space-sm)}
.carrier-head .tile-ico{flex:0 0 var(--carrier-icon-box);height:var(--carrier-icon-box)}
.carrier-head a,.carrier-head h2{font-size:var(--heading-size);font-weight:600;color:var(--ink);
  text-decoration:none;margin:0}
.carrier-head a:hover{color:var(--brand);text-decoration:underline}
.carrier-grid p{margin:var(--space-tight) 0;font-size:var(--carrier-copy-size);color:var(--muted)}


/* Screen components opt in explicitly; receipt markup does not use these. */
.screen{min-width:0;line-height:var(--body-leading)}
.screen h2,.screen h3{margin-top:var(--gap)}
.screen h3{font-size:var(--heading-size);color:var(--ink)}
.screen a{min-height:var(--tap);min-width:var(--tap);max-width:100%;color:var(--brand);
  padding:var(--space-sm);border-radius:var(--field-radius)}
.screen a:hover{background:var(--brand-wash)}
.screen form{min-width:0}
.form-panel{background:var(--paper);border:var(--line) solid var(--rule);
  border-radius:var(--r);padding:var(--gap);margin:var(--gap) var(--space-none)}
.screen label{min-height:var(--tap);font-weight:var(--weight-medium);color:var(--ink);
  padding:var(--space-xs) var(--space-none)}
.screen input,.screen select,.screen textarea{font:inherit;color:var(--ink);
  background:var(--card);border:var(--line) solid var(--rule);
  border-radius:var(--field-radius);padding:var(--space-control);max-width:100%;
  min-height:var(--field-height);margin:var(--space-xs) var(--space-none)}
.screen input[type=checkbox]{min-height:var(--check-size);width:var(--check-size);
  height:var(--check-size);vertical-align:middle;accent-color:var(--brand);
  margin-right:var(--space-sm)}
.screen textarea{min-height:var(--textarea-height);resize:vertical}
.screen .primary-action{display:inline-block;text-decoration:none;text-align:center}
.screen button,.screen .primary-action{min-height:var(--tap);min-width:var(--tap);max-width:100%;font:inherit;
  font-weight:var(--weight-medium);line-height:var(--control-leading);
  white-space:normal;overflow-wrap:anywhere;padding:var(--space-control) var(--gap);
  background:var(--brand);color:var(--brand-ink);border:var(--line) solid var(--brand);
  border-radius:var(--field-radius);margin:var(--space-xs) var(--space-none);cursor:pointer}
.screen button:hover,.screen .primary-action:hover{box-shadow:var(--shadow)}
.signin-toggle:not([hidden]){display:flex;gap:var(--space-xs);margin-bottom:var(--gap)}
.signin-toggle button{flex:1;background:var(--card);color:var(--brand)}
.signin-toggle button[aria-pressed="true"]{background:var(--brand);color:var(--brand-ink)}
.signin-fields{min-width:0;border:0;padding:0;margin:var(--gap) 0}
.signin-fields legend{font-size:var(--heading-size);font-weight:var(--weight-bold);color:var(--ink)}
.screen button:disabled{background:var(--rule);border-color:var(--rule);color:var(--ink-2);cursor:not-allowed}
.screen :focus-visible{outline:var(--focus-width) solid var(--focus);outline-offset:var(--focus-offset)}
.screen [role=alert]:not(:empty),.screen #hold-cash,.screen #ack-stop:not(:empty){
  background:var(--stop-wash);color:var(--stop);border:var(--line) solid var(--stop-rule);
  padding:var(--gap);border-radius:var(--r);font-weight:var(--weight-medium)}
.screen details{border:var(--line) solid var(--rule);border-radius:var(--r);
  padding:var(--space-sm);margin:var(--gap) var(--space-none)}
.screen summary{min-height:var(--tap);padding:var(--space-sm);color:var(--brand);cursor:pointer}
.screen dialog{width:var(--dialog-width);max-width:var(--dialog-limit);max-height:var(--dialog-height);
  background:var(--card);color:var(--ink-2);border:var(--focus-width) solid var(--brand);
  border-radius:var(--r);padding:var(--space-panel);overflow:auto}
.screen dialog::backdrop{background:var(--ink);opacity:.6}

/* Cash handling always leads the result.
   The attribute is present ONLY on screen cash instructions, never print receipts. */
.cash-instruction[data-screen]{font-size:var(--cash-size);font-weight:var(--weight-bold);
  line-height:var(--cash-leading);background:var(--brand);color:var(--brand-ink);
  border-radius:var(--r);padding:var(--space-panel);margin:var(--space-none) var(--space-none) var(--gap);
  box-shadow:var(--shadow)}

.table-scroll{overflow-x:auto;max-width:100%;border:var(--line) solid var(--rule);
  border-radius:var(--r);margin:var(--gap) var(--space-none);background:var(--card)}
.table-scroll table{border-collapse:collapse;width:100%;min-width:var(--table-width);font-size:var(--small-size)}
.table-scroll th,.table-scroll td{text-align:left;vertical-align:top;
  padding:var(--space-control);min-width:var(--cell-width);border-bottom:var(--line) solid var(--rule)}
.table-scroll th{background:var(--brand-wash);color:var(--ink);font-weight:var(--weight-medium)}
.table-scroll tbody tr:last-child td{border-bottom:none}
.table-scroll form,.table-scroll details{min-width:var(--form-width)}
.status-chip{display:inline-block;max-width:100%;padding:var(--space-xs) var(--space-sm);
  border-radius:var(--field-radius);background:var(--brand-wash);color:var(--brand);
  font-size:var(--small-size);font-weight:var(--weight-medium);line-height:var(--body-leading)}
.subnav{display:flex;flex-wrap:wrap;gap:var(--space-nav);margin:var(--gap) var(--space-none);
  border-bottom:var(--line) solid var(--rule);padding-bottom:var(--space-sm)}
.evidence{white-space:pre-wrap;overflow-wrap:anywhere;font-size:var(--small-size);
  background:var(--paper);padding:var(--gap);border-radius:var(--r)}
.prose p{margin:var(--gap) var(--space-none)}
.auth-page{box-sizing:border-box;font:var(--body-size) system-ui;
  margin:var(--body-margin);max-width:var(--page-width);overflow-wrap:anywhere}
.auth-page *{box-sizing:inherit}
.auth-page .test{padding:var(--space-md);background:var(--brand-wash);color:var(--brand);font-weight:var(--weight-bold)}
.auth-page a:not([hidden]){display:inline-block}
@media (max-width:420px){
  .screen.card{padding:var(--space-control)}
  .screen button{width:100%}
  .screen dialog{padding:var(--space-control)}
}
@media print{
  .eod-screen nav,.eod-screen form,.eod-screen button,.eod-screen .report-controls{display:none!important}
  .eod-screen article{break-inside:avoid}
  .eod-screen .table-scroll{overflow:visible}
  .eod-screen table{min-width:0}
  .eod-screen{box-shadow:none}
}

/* A40: make field rules and submission state visible. */
.field-help{display:block;font-size:.85em;margin:0 0 .75rem}
button:disabled{background:#ddd;color:#555;border-color:#aaa;cursor:not-allowed;box-shadow:none}
.sale-status{border:2px solid currentColor;padding:1rem;margin:1rem 0}
/* TEST practice entry points are text tiles, never carrier logos. */
.tiles a.test-tile,.carrier-grid section.test-tile{background:#fff1ab;border:3px dashed #725000;color:#211800}
.test-tile-label{display:block;font-size:1.5em;font-weight:900;letter-spacing:.08em;color:#211800}