/* ITZA Tab - THE RECEIPT FACE (owner, 2026-10-06).
 *
 * A third whole appearance beside Classic and Premium, chosen in
 * Settings > Look. The app dressed as what it keeps: warm till paper,
 * torn edges where paper really ends, line items printed with dotted
 * leaders, the till's monospace for figures and labels, dashed rules,
 * square-cut controls, and the scan button as a small receipt slip
 * standing across the torn foot of the bottom strip.
 *
 * Sentences stay in the body sans: a face that turns prose into
 * typewriter text stops being readable, which is not a style.
 *
 * THE SAFETY LAW OF THIS FILE (the same one premium.css obeys): every
 * selector is scoped under html[data-face='receipt']. Classic is the
 * absence of the attribute and Premium is another value of it, so with
 * this face off not one rule here can apply. The gate parses this sheet
 * and refuses any selector that escapes the scope.
 *
 * Colours come through the theme rooms' own custom properties, re-set
 * here per theme, so the face works in paper, deep, dark and hc.
 */

/* ---- the paper, per theme ---- */
html[data-face='receipt'] {
  --paper: #f4eee0;
  --surface: #fbf7ee;
  --rule: rgba(52, 46, 36, 0.22);
  --frost: rgba(244, 238, 224, 0.94);
  --r-sm: 0;
  --r-md: 0;
  --r-lg: 0;
  --shadow-card: none;
  --shadow-float: 0 3px 10px rgba(40, 32, 18, 0.16);
  --till: ui-monospace, 'SFMono-Regular', Menlo, Consolas, 'Roboto Mono', monospace;
  --tear: 7px;
  --strip: #efe7d5;
  --strip-ink: #34322e;
  --strip-muted: #6c675d;
  --strip-edge: rgba(40, 32, 18, 0.18);
  --slip: #ffffff;
  --slip-ink: #1c3a5e;
  --slip-rule: rgba(28, 58, 94, 0.28);
  --slip-edge: rgba(40, 32, 18, 0.35);
}
html[data-face='receipt'][data-theme='deep'],
html[data-face='receipt'][data-theme='dark'] {
  --paper: #1d1b18;
  --surface: #26231e;
  --rule: rgba(230, 223, 207, 0.17);
  --frost: rgba(29, 27, 24, 0.94);
  --shadow-float: 0 3px 12px rgba(0, 0, 0, 0.5);
  --strip: #2b2823;
  --strip-ink: #e6dfcf;
  --strip-muted: #a8a193;
  --strip-edge: rgba(0, 0, 0, 0.55);
  --slip: #f4efe3;
  --slip-edge: rgba(0, 0, 0, 0.6);
}
html[data-face='receipt'][data-theme='hc'] {
  --paper: #ffffff;
  --surface: #ffffff;
  --rule: #000000;
  --frost: #ffffff;
  --strip: #ffffff;
  --strip-ink: #000000;
  --strip-muted: #000000;
  --strip-edge: #000000;
  --slip: #ffffff;
  --slip-ink: #000000;
  --slip-rule: #000000;
  --slip-edge: #000000;
}
html[data-face='receipt'] body { background: var(--paper); }

/* ---- the top bar: the store's header - solid paper, a dashed rule,
   the title printed in the till's capitals ---- */
html[data-face='receipt'] .tbar {
  background: var(--paper);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom: 1px dashed var(--rule);
}
html[data-face='receipt'] .tbar-title {
  font-family: var(--till);
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ---- lists print as line items: no cards, a dashed rule between,
   the name on the left, the amount on the right, a dotted leader
   joining them ---- */
html[data-face='receipt'] .rc-row,
html[data-face='receipt'] .sh-card {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
html[data-face='receipt'] .rc-row {
  margin: 0;
  padding: 11px 2px;
  border-bottom: 1px dashed var(--rule);
}
html[data-face='receipt'] .rc-row .rc-left { flex: 0 1 auto; }
html[data-face='receipt'] .rc-row::after {
  content: '';
  order: 1;
  flex: 1 1 12px;
  min-width: 12px;
  align-self: center;
  border-bottom: 2px dotted var(--rule);
}
html[data-face='receipt'] .rc-row .rc-amt { order: 2; }
html[data-face='receipt'] .rc-merchant { font-weight: 600; }
html[data-face='receipt'] .rc-amt,
html[data-face='receipt'] .rc-sub,
html[data-face='receipt'] .rm-when,
html[data-face='receipt'] .sh-price,
html[data-face='receipt'] .sh-where,
html[data-face='receipt'] .sp-per,
html[data-face='receipt'] .sp-price,
html[data-face='receipt'] .sh-total-v,
html[data-face='receipt'] .month-total,
html[data-face='receipt'] .num {
  font-family: var(--till);
  font-variant-numeric: tabular-nums;
}
html[data-face='receipt'] .rc-sub { font-size: 0.74rem; letter-spacing: 0.02em; }
html[data-face='receipt'] .rc-thumb { border-radius: 0; }
html[data-face='receipt'] .sh-item,
html[data-face='receipt'] .rm-item {
  border-bottom: 1px dashed var(--rule);
}

/* ---- the month heading: a centred store header between rules ---- */
html[data-face='receipt'] .month-h {
  background: var(--paper);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-radius: 0;
  border-top: 1px dashed var(--rule);
  border-bottom: 1px dashed var(--rule);
  padding: 6px 2px;
}
html[data-face='receipt'] .month-name {
  font-family: var(--till);
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--ink);
}

/* ---- the home: the month as a till header, the figure as its TOTAL
   under a double rule ---- */
html[data-face='receipt'] .hm-label {
  font-family: var(--till);
  font-size: 0.95rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
html[data-face='receipt'] .hm-spent,
html[data-face='receipt'] .hm-count {
  font-family: var(--till);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
html[data-face='receipt'] .hm-total {
  font-family: var(--till);
  font-variant-numeric: tabular-nums;
  border-top: 3px double var(--ink);
  padding-top: 6px;
  display: inline-block;
}
html[data-face='receipt'] .hm-h {
  font-family: var(--till);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-bottom: 1px dashed var(--rule);
  padding-bottom: 4px;
}

/* ---- the receipt detail is printed like the receipt it holds: lines
   with dotted leaders, a double rule above the total, a torn foot ---- */
html[data-face='receipt'] .rd-photo { border-radius: 0; }
html[data-face='receipt'] .rd-lines {
  position: relative;
  background: var(--surface);
  border-top: 0;
  padding: 14px 14px 22px;
  margin-top: 18px;
  box-shadow: var(--shadow-float);
}
html[data-face='receipt'] .rd-lines::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(-1 * var(--tear) + 1px);
  height: var(--tear);
  background: var(--surface);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='7'><polygon points='0,0 14,0 7,7' fill='black'/></svg>") repeat-x left top / 14px 7px;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='7'><polygon points='0,0 14,0 7,7' fill='black'/></svg>") repeat-x left top / 14px 7px;
}
html[data-face='receipt'] .rcpt-line { font-family: var(--till); font-size: 0.88rem; }
html[data-face='receipt'] .rcpt-label { flex: 0 1 auto; }
html[data-face='receipt'] .rcpt-line::after {
  content: '';
  order: 1;
  flex: 1 1 10px;
  min-width: 10px;
  border-bottom: 2px dotted var(--rule);
  margin-bottom: 0.3em;
}
html[data-face='receipt'] .rcpt-amt { order: 2; }
html[data-face='receipt'] .rcpt-mod { font-family: var(--till); font-size: 0.76rem; }
html[data-face='receipt'] .rcpt-totals {
  border-top: 1px dashed var(--rule);
}
html[data-face='receipt'] .rcpt-totals .rcpt-line:last-child {
  border-top: 3px double var(--ink);
  margin-top: 4px;
  padding-top: 6px;
}
html[data-face='receipt'] .rcpt-totals .rcpt-line:last-child .rcpt-label {
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
html[data-face='receipt'] .fact-label {
  font-family: var(--till);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---- sheets are slips of paper with a torn top edge. A sheet scrolls,
   so a tear hung ABOVE it would be clipped; the teeth are cut into its
   own top edge with a mask instead - the paper below stays whole and
   its contents scroll inside it untouched. ---- */
html[data-face='receipt'] .sheet {
  border-radius: 0;
  background: var(--surface);
  padding-top: calc(8px + var(--tear));
  -webkit-mask:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='7'><polygon points='0,7 7,0 14,7' fill='black'/></svg>") repeat-x left top / 14px 7px,
    linear-gradient(#000, #000) left 7px / 100% calc(100% - 7px) no-repeat;
  mask:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='7'><polygon points='0,7 7,0 14,7' fill='black'/></svg>") repeat-x left top / 14px 7px,
    linear-gradient(#000, #000) left 7px / 100% calc(100% - 7px) no-repeat;
}
html[data-face='receipt'] .sheet-grab {
  border-radius: 0;
  height: 0;
  border-top: 2px dashed var(--rule);
  background: transparent;
}
html[data-face='receipt'] .sheet-row { border-bottom: 1px dashed var(--rule); }
html[data-face='receipt'] .mhead {
  font-family: var(--till);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
html[data-face='receipt'] .sp-offer {
  background: transparent;
  border: 0;
  border-bottom: 1px dashed var(--rule);
  border-radius: 0;
}
html[data-face='receipt'] .sp-shop {
  font-family: var(--till);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---- the toast: a small torn slip ---- */
html[data-face='receipt'] #toast {
  border-radius: 0;
  font-family: var(--till);
  font-size: 0.8rem;
  box-shadow: var(--shadow-float);
}

/* ---- controls: square-cut. The primary prints in solid ink; the
   others are dashed coupon boxes on the paper ---- */
html[data-face='receipt'] .btn {
  border-radius: 0;
  box-shadow: none;
  font-family: var(--till);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
html[data-face='receipt'] .btn.ghost {
  background: transparent;
  border: 1.5px dashed var(--ink);
}
html[data-face='receipt'] .btn.gold { box-shadow: var(--shadow-float); }
html[data-face='receipt'] .chip,
html[data-face='receipt'] .sh-chip,
html[data-face='receipt'] .sh-where,
html[data-face='receipt'] .sh-chip .n,
html[data-face='receipt'] .rv-seg button,
html[data-face='receipt'] .mi-badge,
html[data-face='receipt'] .px-best,
html[data-face='receipt'] .seal-stamp {
  border-radius: 0;
  border-style: dashed;
}
html[data-face='receipt'] .chip,
html[data-face='receipt'] .sh-chip {
  font-family: var(--till);
  letter-spacing: 0.04em;
}
html[data-face='receipt'] .tbtn,
html[data-face='receipt'] .toast-act,
html[data-face='receipt'] .org-kyc,
html[data-face='receipt'] .px-viewtl,
html[data-face='receipt'] .px-viewtl::before,
html[data-face='receipt'] .pweye,
html[data-face='receipt'] .fieldErr,
html[data-face='receipt'] .tickpop,
html[data-face='receipt'] .lightbox-close,
html[data-face='receipt'] .px-cell {
  border-radius: 0;
}
/* inputs are blanks on a form: an underline on the paper */
html[data-face='receipt'] .bk-q,
html[data-face='receipt'] .rv-in,
html[data-face='receipt'] select.rv-in,
html[data-face='receipt'] textarea.rv-in,
html[data-face='receipt'] .sh-addrow input {
  border-radius: 0;
  background: transparent;
  border: 0;
  border-bottom: 1.5px solid var(--ink);
}
html[data-face='receipt'] textarea.rv-in { border: 1px dashed var(--rule); }
html[data-face='receipt'] .sh-tick { border-radius: 0; }
html[data-face='receipt'] .switch i { border-radius: 0; }
html[data-face='receipt'] .switch i::after { border-radius: 0; }
/* bars run flat; their marker dots stay dots */
html[data-face='receipt'] .mi-bar,
html[data-face='receipt'] .bg-bar,
html[data-face='receipt'] .bg-bar i,
html[data-face='receipt'] .rc-bar,
html[data-face='receipt'] .rc-bar i,
html[data-face='receipt'] .px-bar,
html[data-face='receipt'] .px-bar i,
html[data-face='receipt'] .fr-prog span,
html[data-face='receipt'] .up-bar {
  border-radius: 0;
}

/* ---- the welcome and sign-in screens carry their own radius system
   and id-level rules, matched here so the face reaches them ---- */
html[data-face='receipt'] #screen-onboard {
  --ob-r-sm: 0;
  /* The welcome screen carries its own palette (--ob-*), so the paper
     has to be laid down here too or it stays on grey. */
  --ob-bg: #f4eee0;
  --ob-bg2: #fbf7ee;
  --ob-bg3: #f7f1e4;
  --ob-line: rgba(52, 46, 36, 0.22);
  --ob-line2: rgba(52, 46, 36, 0.32);
  --ob-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, 'Roboto Mono', monospace;
}
html[data-face='receipt'][data-theme='deep'] #screen-onboard,
html[data-face='receipt'][data-theme='dark'] #screen-onboard {
  --ob-bg: #1d1b18;
  --ob-bg2: #26231e;
  --ob-bg3: #2b2823;
  --ob-line: rgba(230, 223, 207, 0.17);
  --ob-line2: rgba(230, 223, 207, 0.26);
}
html[data-face='receipt'][data-theme='hc'] #screen-onboard {
  --ob-bg: #ffffff;
  --ob-bg2: #ffffff;
  --ob-bg3: #ffffff;
  --ob-line: #000000;
  --ob-line2: #000000;
}
html[data-face='receipt'] #screen-onboard .btn,
html[data-face='receipt'] #screen-onboard .pill,
html[data-face='receipt'] #screen-onboard #obQrBox,
html[data-face='receipt'] .tsc-btn,
html[data-face='receipt'] .tsc-sample,
html[data-face='receipt'] .obWarnBig .hl {
  border-radius: 0;
}
html[data-face='receipt'] #screen-onboard .obcard {
  border-radius: 0;
  box-shadow: var(--shadow-float);
}

/* =====================================================================
   THE STRIP (owner, 2026-09-24, approved in the phone demo): the dock as
   the torn foot of a receipt, the scan button an upright slip standing
   across the tear. Geometry and surface only - display is never set, so
   the hidden attribute and the route rules keep winning.
   ===================================================================== */
html[data-face='receipt'] .dock {
  left: 0;
  right: 0;
  bottom: 0;
  top: auto;
  transform: none;
  translate: none;
  flex-direction: row;
  width: auto;
  max-width: none;
  height: calc(var(--bar-h) + var(--safe-b));
  padding: 0 8px var(--safe-b);
  gap: 2px;
  justify-content: center;
  border: none;
  border-radius: 0;
  background: var(--strip);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
  /* The shadow follows the teeth: a filter draws what is painted, tear
     included, where a box-shadow would draw a straight line. */
  filter: drop-shadow(0 -1px 0 var(--strip-edge)) drop-shadow(0 -3px 6px rgba(0, 0, 0, 0.07));
}
html[data-face='receipt'] .dock::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: calc(1px - var(--tear));
  height: var(--tear);
  background: var(--strip);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='7'><polygon points='0,7 7,0 14,7' fill='black'/></svg>") repeat-x left bottom / 14px 7px;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='7'><polygon points='0,7 7,0 14,7' fill='black'/></svg>") repeat-x left bottom / 14px 7px;
  pointer-events: none;
}
html[data-face='receipt'] .dock-btn {
  width: 58px;
  border-radius: 0;
  color: var(--strip-muted);
  font-family: var(--till);
  font-size: 0.56rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
html[data-face='receipt'] .dock-btn.on {
  color: var(--strip-ink);
  font-weight: 700;
}
/* The scan slip. The paper is drawn on a pseudo-element so the button
   casts a shadow that follows the torn foot: a mask clips a box-shadow,
   a parent filter does not. */
html[data-face='receipt'] .fab {
  position: relative;
  isolation: isolate;
  width: 50px;
  height: 64px;
  margin: 0 12px;
  border-radius: 0;
  background: transparent;
  color: var(--slip-ink);
  box-shadow: none;
  transform: translateY(-20px);
  filter: drop-shadow(0 0 0.5px var(--slip-edge)) drop-shadow(0 4px 6px rgba(0, 0, 0, 0.22));
}
html[data-face='receipt'] .fab::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 2px 2px 0 0;
  background:
    linear-gradient(var(--slip-rule), var(--slip-rule)) center 8px / 58% 2px no-repeat,
    linear-gradient(var(--slip-rule), var(--slip-rule)) center 13px / 38% 2px no-repeat,
    linear-gradient(var(--slip-rule), var(--slip-rule)) center calc(100% - 13px) / 62% 2px no-repeat,
    var(--slip);
  -webkit-mask:
    linear-gradient(#000, #000) top / 100% calc(100% - 5px) no-repeat,
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='5'><polygon points='0,0 10,0 5,5' fill='black'/></svg>") repeat-x left bottom / 10px 5px;
  mask:
    linear-gradient(#000, #000) top / 100% calc(100% - 5px) no-repeat,
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='5'><polygon points='0,0 10,0 5,5' fill='black'/></svg>") repeat-x left bottom / 10px 5px;
  pointer-events: none;
}
html[data-face='receipt'] .fab svg { width: 24px; height: 24px; margin-top: -2px; }
html[data-face='receipt'] .fab:active { transform: translateY(-20px) scale(0.93); }
html[data-face='receipt'] .dock-tip {
  bottom: calc(var(--bar-h) + var(--safe-b) + var(--tear) + 12px);
  border-radius: 0;
}
html[data-face='receipt'] #toast {
  bottom: calc(var(--bar-h) + var(--safe-b) + var(--tear) + 28px);
}
@media (max-width: 400px) {
  html[data-face='receipt'] .dock-btn { width: 52px; }
  html[data-face='receipt'] .fab { margin: 0 6px; }
}

/* ---- wide screens: the strip stands on the left, its tear on the right
   edge, the slip standing out over it - the classic rail's seat ---- */
@media (min-width: 1024px) {
  html[data-face='receipt'] .dock {
    left: 0;
    right: auto;
    top: 0;
    bottom: 0;
    width: 92px;
    height: auto;
    flex-direction: column;
    justify-content: center;
    padding: 12px 0;
    gap: 6px;
    filter: drop-shadow(1px 0 0 var(--strip-edge)) drop-shadow(3px 0 6px rgba(0, 0, 0, 0.07));
  }
  html[data-face='receipt'] .dock::before {
    left: auto;
    right: calc(1px - var(--tear));
    top: 0;
    bottom: 0;
    width: var(--tear);
    height: auto;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='7' height='14'><polygon points='0,0 7,7 0,14' fill='black'/></svg>") repeat-y left top / 7px 14px;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='7' height='14'><polygon points='0,0 7,7 0,14' fill='black'/></svg>") repeat-y left top / 7px 14px;
  }
  html[data-face='receipt'] .fab {
    margin: 10px 0;
    transform: none;
  }
  html[data-face='receipt'] .fab:active { transform: scale(0.93); }
  html[data-face='receipt'] #toast { bottom: 28px; }
}