/* ITZA Tab - THE PREMIUM FACE (owner, 2026-09-21).
 *
 * A second whole appearance beside Classic, chosen in Settings > Look.
 * The owner's constraints, kept literally:
 *
 *   - no floating rounded cards, no floating nav pills
 *   - a flat single-colour canvas; list rows sit DIRECTLY on it,
 *     separated only by 1px rules spanning the width
 *   - sharp geometric sans for names and totals; the system's own
 *     monospace for metadata - dates, times, line items
 *   - a flat, full-width bottom bar pinned to the absolute edge of the
 *     viewport, with backdrop blur so content scrolls behind it
 *   - no raw thumbnails in lists: a monochrome category mark instead;
 *     the photograph appears only after a tap
 *
 * THE SAFETY LAW OF THIS FILE: every selector is scoped under
 * html[data-face='premium']. Classic is the ABSENCE of that attribute,
 * so with it off not one rule here can apply - "nothing breaks" is
 * structural. The gate parses this sheet and refuses any selector that
 * escapes the scope.
 *
 * It deliberately restyles through the SAME custom properties the four
 * theme rooms set in tab.css, so premium works in deep, paper, dark and
 * hc without knowing their colours.
 */

/* ---- the canvas: flat, and every soft corner in the app sharpened.
   The radius variables are how the house rounds; zeroing them here
   squares buttons, sheets, inputs and chips in one move. ---- */
html[data-face='premium'] {
  --r-sm: 0;
  --r-md: 0;
  --r-lg: 0;
  --shadow-card: none;
  --shadow-float: none;
  /* No Courier family in this stack: Android maps that name to a
     typewriter face (owner's phone, 2026-09-23). The generic monospace
     is clean there. */
  --mono: ui-monospace, 'SFMono-Regular', 'Cascadia Mono', Consolas,
    'Roboto Mono', monospace;
}

/* ---- cards stop being cards: containers go transparent and flat,
   their children become rows on the canvas ---- */
html[data-face='premium'] .content,
html[data-face='premium'] .sh-card,
html[data-face='premium'] .rc-row {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* ---- rows directly on the canvas, parted by full-width hairlines.
   The negative margins bleed the rule across the pane's own padding so
   the line spans the screen on a phone. ---- */
html[data-face='premium'] .rc-row,
html[data-face='premium'] .sh-item,
html[data-face='premium'] .rm-item {
  margin-left: -16px;
  margin-right: -16px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--rule);
}
html[data-face='premium'] .content { padding: 0; }
html[data-face='premium'] .rc-row + .rc-row { margin-top: 0; }

/* ---- typography: names and totals in the sharp sans, metadata in the
   system's own monospace ---- */
html[data-face='premium'] .rc-merchant,
html[data-face='premium'] .sh-name {
  font-family: var(--sans);
  font-weight: 650;
  letter-spacing: -0.01em;
}
html[data-face='premium'] .rc-amt,
html[data-face='premium'] .sh-total-v,
html[data-face='premium'] .sp-price {
  font-family: var(--sans);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
html[data-face='premium'] .rc-sub,
html[data-face='premium'] .rm-when,
html[data-face='premium'] .sh-price,
html[data-face='premium'] .sh-where,
html[data-face='premium'] .sp-per,
html[data-face='premium'] .month-total {
  font-family: var(--mono);
  font-size: 0.76rem;
  letter-spacing: 0;
}

/* ---- the month heading becomes a flat section rule, not a floating
   label: small caps sans over its own full-width line ---- */
html[data-face='premium'] .month-h {
  margin-left: -16px;
  margin-right: -16px;
  padding: 18px 16px 6px;
  border-bottom: 1px solid var(--rule);
  /* Classic dresses this as a floating frosted pill (--r-full and a
     blur), which the zeroed radius vars never touched - the one pill
     that survived the first screenshot. Solid paper, not transparent:
     the header is sticky, and rows must not show through it. */
  background: var(--paper);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-radius: 0;
}
html[data-face='premium'] .month-name {
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---- receipt previews: the photograph leaves the list. The category
   mark - already monochrome stroke icons - stands in; the image itself
   appears only in the sheet a tap opens, which is already how the
   detail behaves. ---- */
html[data-face='premium'] .rc-thumb {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}
html[data-face='premium'] .rc-thumb img,
html[data-face='premium'] .rc-thumb canvas {
  display: none;
}
html[data-face='premium'] .rc-cat-ic {
  display: inline-flex;
  color: var(--ink);
  opacity: 0.85;
}

/* ---- the bar: flat, full-width, pinned to the absolute edge, content
   blurring behind it. Geometry and surface only - display is never set
   here, so the hidden-attribute and shared-route rules keep winning. ---- */
html[data-face='premium'] .dock {
  left: 0;
  right: 0;
  bottom: 0;
  /* The desktop media query turns the classic dock into a vertical
     left rail (flex-direction: column, top: 50%, translate) - seen
     live as a mid-screen stack the first time the demo was opened
     wide. Premium is one flat bottom bar at EVERY width, so all three
     of the rail's properties are neutralised, not just the pill's. */
  top: auto;
  transform: none;
  translate: none;
  flex-direction: row;
  /* And the narrow-phone block caps the pill at 100vw - 16px, which
     would hold this bar off the edges it is pinned to. */
  max-width: none;
  width: 100%;
  height: calc(var(--bar-h) + var(--safe-b, 0px));
  padding: 0 4px var(--safe-b, 0px);
  border-radius: 0;
  border-top: 1px solid var(--rule);
  background: color-mix(in srgb, var(--paper) 72%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: none;
  justify-content: space-around;
  gap: 0;
}
html[data-face='premium'] .dock-btn {
  border-radius: 0;
  background: transparent;
}
/* The camera keeps its circle - it is a shutter, not a pill - but sits
   flat on the bar instead of floating over it. */
html[data-face='premium'] .fab {
  box-shadow: none;
}

/* ---- sheets slide up square-shouldered; the picker's offers become
   flat rows on hairlines, the same law as every other list ---- */
html[data-face='premium'] .sheet {
  border-radius: 0;
}
html[data-face='premium'] .sp-offer {
  margin-top: 0;
  padding: 13px 4px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
}
html[data-face='premium'] .sp-group + .sp-group { margin-top: 1.2rem; }
html[data-face='premium'] .sp-shop::after { display: none; }
html[data-face='premium'] .sp-shop {
  font-family: var(--mono);
  letter-spacing: 0.06em;
}

/* ---- THE COLUMN STANDS IN THE MIDDLE (owner, 2026-09-21: "a shift of
   the information to the left with empty spacing on the right"). The
   reading columns cap at var(--measure) but never centred - on a phone
   the cap never binds, so Classic hid this; on a wide window the whole
   app hugged the left. Every measured column centres under premium. ---- */
html[data-face='premium'] .home-body,
html[data-face='premium'] .se-body,
html[data-face='premium'] .bk-tools,
html[data-face='premium'] .bk-pins,
html[data-face='premium'] .pane > .content,
html[data-face='premium'] .month-h + .content {
  margin-left: auto;
  margin-right: auto;
}
html[data-face='premium'] .pane > .content,
html[data-face='premium'] .month-h {
  max-width: var(--measure);
}
html[data-face='premium'] .month-h {
  margin-left: auto;
  margin-right: auto;
}

/* ---- THE SHUTTER SQUARES OFF (owner, 2026-09-21: "might be better to
   make it square with round corners"). Same size, same seat - only the
   silhouette changes, so the thumb finds it where it always was. ---- */
html[data-face='premium'] .fab {
  border-radius: 12px;
}

/* ---- THE LAST CIRCLES (owner, 2026-09-21: "the round tick boxes and
   the rounded search box - needs to be more like the rest"). Both wear
   hardcoded shapes - 50% and --r-full - so the zeroed radius variables
   never reached them. The tick becomes a square checkbox; the search
   field squares to the same 2px the buttons carry. ---- */
html[data-face='premium'] .sh-tick {
  border-radius: 4px;
}
/* The merchant tag on a shopping row ("Costco") and the count badge on
   the shop pills - both hardcoded 999px pills, same family, same fix. */
html[data-face='premium'] .sh-where,
html[data-face='premium'] .sh-chip .n {
  border-radius: 3px;
}
html[data-face='premium'] .bk-q,
html[data-face='premium'] .rv-in,
html[data-face='premium'] select.rv-in,
html[data-face='premium'] textarea.rv-in {
  border-radius: 2px;
}

/* ---- THE WHOLE APP, SHARPENED (owner, 2026-09-21: "the new look is
   right, apply it across the app where it's missing"). Every hardcoded
   pill and rounded control from the full radius inventory of app.css,
   squared - EXCEPT the shapes where circle IS the glyph: spinners,
   status dots, the camera shutter, the help ring and the hero disc keep
   their geometry, because a square spinner is not a style, it is a
   mistake. ---- */

/* pills that are really buttons, tags or fields */
html[data-face='premium'] .chip,
html[data-face='premium'] .rv-seg button,
html[data-face='premium'] .toast-act,
html[data-face='premium'] .mi-badge,
html[data-face='premium'] .org-kyc,
html[data-face='premium'] .seal-stamp,
html[data-face='premium'] .px-best,
html[data-face='premium'] .px-viewtl,
html[data-face='premium'] .px-viewtl::before,
html[data-face='premium'] .sh-addrow input,
html[data-face='premium'] .pweye,
html[data-face='premium'] .fieldErr,
html[data-face='premium'] .tickpop,
html[data-face='premium'] .lightbox-close {
  border-radius: 2px;
}

/* progress bars run flat; their marker DOTS stay dots */
html[data-face='premium'] .mi-bar,
html[data-face='premium'] .bg-bar,
html[data-face='premium'] .bg-bar i,
html[data-face='premium'] .rc-bar,
html[data-face='premium'] .rc-bar i,
html[data-face='premium'] .px-bar,
html[data-face='premium'] .px-bar i,
html[data-face='premium'] .fr-prog span,
html[data-face='premium'] .up-bar {
  border-radius: 0;
}

/* the compare page's cell and the sheet's grab handle */
html[data-face='premium'] .px-cell { border-radius: 2px; }
html[data-face='premium'] .sheet-grab { border-radius: 2px; }

/* the toggle squares gently - track and knob together, or the knob
   pokes out of its own switch */
html[data-face='premium'] .switch i { border-radius: 4px; }
html[data-face='premium'] .switch i::after { border-radius: 3px; }

/* ---- the onboarding and sign-in screens, which carry their own
   radius system and higher-specificity rules - matched by id here so
   premium actually wins ---- */
html[data-face='premium'] #screen-onboard { --ob-r-sm: 2px; }
html[data-face='premium'] #screen-onboard .btn,
html[data-face='premium'] #screen-onboard .pill,
html[data-face='premium'] #screen-onboard #obQrBox,
html[data-face='premium'] .tsc-btn,
html[data-face='premium'] .tsc-sample,
html[data-face='premium'] .obWarnBig .hl {
  border-radius: 2px;
}
/* the welcome card stops floating: flat on the canvas, hairline edge */
html[data-face='premium'] #screen-onboard .obcard {
  border-radius: 0;
  box-shadow: none;
  border: 1px solid var(--rule);
}

/* ---- buttons: sharp. The radius vars above square most of them; the
   pill class rounds by hand, so it is squared by hand. ---- */
html[data-face='premium'] .btn,
html[data-face='premium'] .sh-chip,
html[data-face='premium'] .tbtn {
  border-radius: 2px;
}