/* ============================================================================
   kaixa - VARIANT C - "QUIET FINTECH"
   ----------------------------------------------------------------------------
   The app as a PRIVATE LEDGER. Dark, spacious, unhurried. This is the register
   the owner named for the mark - Revolut, Bitstamp - applied to the whole
   surface rather than to a logo.

   Four rules the whole system obeys:
     1. ELEVATION IS LUMINOSITY, NOT SHADOW. Surfaces get LIGHTER as they come
        forward. On a dark ground a drop shadow is invisible, so anything built
        on shadows collapses into one flat plane - the commonest failure of a
        light design repainted dark.
     2. ONE ACCENT, RATIONED. Mint appears on money in, the active tab and the
        primary action. Nowhere else. The restraint IS the aesthetic.
     3. SPACE INSTEAD OF LINES. Almost no dividers: rows are separated by their
        own surface and by air.
     4. THE BALANCE FOLLOWS YOU. The day's takings sit in a large head that
        COLLAPSES into a slim sticky bar as the merchant scrolls, so the number
        never leaves the screen. This is the direction's signature, and it is
        the move that most reads as a shipped app.

   Honest trade-off, stated rather than hidden: dark is the WEAKEST of the
   three in direct sunlight, which is a real daily condition for this audience.
   It earns its place on register, not on outdoor legibility.
   ========================================================================= */

/* -------------------------------------------------------------- typeface */
/* Plus Jakarta Sans variable (Tokotype, OFL). Geometric, high-waisted, with a
   distinctive single-storey g - premium without being cold. */
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("./fonts/jakarta.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-style: normal;
  font-display: block; /* preloaded in index.html */
}

:root {
  color-scheme: dark;

  /* The luminosity ladder. Every step up is a step forward. */
  --l0: #080b0f; /* app ground */
  --l1: #0f141b; /* screen surface */
  --l2: #161d26; /* card */
  --l3: #1e2733; /* raised card, sheet */
  --l4: #2a3542; /* control, input */

  --text: #f2f6fa;
  --text-2: #a7b4c4;
  --text-3: #8593a8; /* 4.84:1 on --l3, the DARKEST surface it sits on.
                        #75849a cleared --l1 but only reached 3.96 on a card. */

  --hair: rgba(242, 246, 250, 0.09);
  --hair-strong: rgba(242, 246, 250, 0.16);

  --mint: #4ade80;
  --mint-deep: #16351f;
  --alert: #f87171;
  --alert-deep: #3a1a1a;
  --warn: #fbbf24;
  --warn-deep: #38290a;

  --header-height: 56px;
  --nav-height: 72px;
  --gutter: 20px;
  --r-lg: 20px;
  --r-md: 14px;

  --ease: 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
  --tap: 140ms ease;

  --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.6-3.6'/%3E%3C/svg%3E");

  font-family: "Plus Jakarta Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  font-variant-numeric: tabular-nums lining-nums;
  font-synthesis: none;
}

.caixa-running-total strong,
.sale-dock-inner strong,
.product-price,
.hero-number,
.metric-value,
.money-chip,
.report-money,
.running-head strong,
.table-tile strong {
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -0.03em;
}

* {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}

html,
body {
  width: 100%;
  min-width: 320px;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--l0);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

body {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
input,
textarea,
[contenteditable] {
  -webkit-user-select: text;
  user-select: text;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}
/* -webkit-tap-highlight-color is INHERITED, so setting it only on buttons and
   links leaves Android's blue flash on every other tappable thing - and this
   app delegates clicks from rows, tiles and cards. Set it at the root and it
   is gone everywhere. Measured before the fix: rgba(51, 181, 229, 0.4). */
html,
body,
button,
a {
  -webkit-tap-highlight-color: transparent;
}
button {
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
}
a {
  color: inherit;
  text-decoration: none;
}
:focus {
  outline: none;
}
:focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: 2px;
  border-radius: 6px;
}
*::-webkit-scrollbar {
  width: 0;
  height: 0;
}
* {
  scrollbar-width: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.svg-defs {
  position: absolute;
  width: 0;
  height: 0;
}

/* ----------------------------------------------------------------- shell */
.app-shell {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  height: var(--app-height, 100dvh);
  overflow: hidden;
  background: var(--l1);
}

.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 auto;
  height: calc(var(--header-height) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) var(--gutter) 0;
  background: var(--l1);
}
.wordmark {
  display: flex;
  align-items: center;
  gap: 10px;
}
.brand-mark {
  display: block;
  width: 26px;
  height: 26px;
  border-radius: 8px;
}
.wordmark-text {
  font-size: 1.06rem;
  font-weight: 700;
  letter-spacing: -0.03em;
}
.business-switcher {
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 58%;
  padding: 7px 12px;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text-2);
  background: var(--l3);
  border-radius: 999px;
  transition: background var(--tap);
}
.business-switcher:active {
  background: var(--l4);
}
.business-switcher > span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis; /* a name, never a number */
}
.business-switcher svg {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.install-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex: 0 0 auto;
  margin: 0 var(--gutter) 6px;
  padding: 12px 14px;
  background: var(--l2);
  border-radius: var(--r-md);
}
/* Suppressed rather than removed: the element stays in the DOM (and in the
   install flow) but never occupies the selling screen. See
   syncInstallBannerVisibility in app.js. */
.install-banner.is-suppressed {
  display: none !important;
}
.install-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}
.install-brand .brand-mark {
  width: 22px;
  height: 22px;
  border-radius: 7px;
}
.install-brand strong {
  font-size: 0.85rem;
  font-weight: 600;
}
.install-brand p {
  display: none;
}
.install-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 0 0 auto;
}
.text-button {
  padding: 8px 12px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--mint);
  border-radius: 999px;
}
.text-button:active {
  background: var(--mint-deep);
}
.icon-button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: var(--text-3);
  border-radius: 999px;
}
.icon-button svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
}
.icon-button:active {
  background: var(--l3);
}

.view-stack {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.view {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 20px;
}

/* ------------------------------------------------------------ bottom nav */
.bottom-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  flex: 0 0 auto;
  height: calc(var(--nav-height) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--l1);
  border-top: 1px solid var(--hair);
}
.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: var(--nav-height);
  color: var(--text-3);
  font-size: 0.74rem;
  font-weight: 600;
  transition: color var(--tap);
}
.nav-item svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.nav-item.is-active {
  color: var(--mint);
}
.nav-item:active {
  color: var(--text);
}

/* -------------------------------------------------------- caixa: the head
   Full-bleed and STICKY. As the merchant scrolls the product list the head
   collapses to a slim bar carrying the same figure - the takings never leave
   the screen. Bound in app.js (bindCaixaScrollCollapse). */
.caixa-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 6px var(--gutter) 14px;
}
.caixa-heading h1 {
  margin: 0;
  font-size: 1.34rem;
  font-weight: 700;
  letter-spacing: -0.035em;
}
.eyebrow {
  margin: 0 0 2px;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-3);
}
.caixa-products-link {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text-2);
  white-space: nowrap;
  transition: color var(--tap);
}
.caixa-products-link:active {
  color: var(--text);
}

.caixa-control-row {
  position: sticky;
  top: 0;
  z-index: 5;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "total close"
    "mode  mode";
  gap: 18px 12px;
  padding: 4px var(--gutter) 16px;
  background: var(--l1);
  transition: padding var(--ease), box-shadow var(--ease);
}
.caixa-running-total {
  grid-area: total;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
  color: inherit;
  text-align: left;
}
.total-label {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-3);
  transition: font-size var(--ease);
}
.caixa-running-total strong {
  display: block;
  max-width: 100%;
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1.02;
  color: var(--text);
  transition: font-size var(--ease);
}
.caixa-running-total small {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-3);
  transition: opacity var(--ease);
}
.caixa-close-control {
  grid-area: close;
  align-self: start;
  padding: 9px 15px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-2);
  background: var(--l3);
  border-radius: 999px;
  white-space: nowrap;
  transition: background var(--tap), color var(--tap);
}
.caixa-close-control:active {
  color: var(--text);
  background: var(--l4);
}
.caixa-close-control.is-closed {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--mint);
  background: var(--mint-deep);
}

/* The collapsed state. Only the figure survives, at a size that still reads
   from arm's length; the date and the mode switch step out of the way. */
.caixa-control-row.is-compact {
  padding-top: 2px;
  padding-bottom: 10px;
  box-shadow: 0 1px 0 var(--hair);
}
.caixa-control-row.is-compact .caixa-running-total strong {
  font-size: 1.42rem;
}
.caixa-control-row.is-compact .total-label {
  font-size: 0.74rem;
}
.caixa-control-row.is-compact .caixa-running-total small {
  height: 0;
  overflow: hidden;
  opacity: 0;
}

.caixa-mode {
  grid-area: mode;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  padding: 3px;
  background: var(--l2);
  border-radius: 12px;
}
.caixa-mode button {
  padding: 10px 8px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-2);
  border-radius: 9px;
  transition: background var(--tap), color var(--tap);
}
.caixa-mode button.is-active {
  color: var(--text);
  background: var(--l4);
}

/* ------------------------------------------------- caixa: find and filter */
.product-search {
  position: relative;
  display: flex;
  align-items: center;
  margin: 4px var(--gutter) 0;
  padding: 0 14px;
  background: var(--l2);
  border-radius: var(--r-md);
  transition: box-shadow var(--tap);
}
.product-search::before {
  content: "";
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  margin-right: 10px;
  background: var(--text-3);
  -webkit-mask: var(--icon-search) center / contain no-repeat;
  mask: var(--icon-search) center / contain no-repeat;
}
.product-search input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 13px 0;
  font-size: 0.98rem;
  font-weight: 500;
  background: none;
  border: 0;
  appearance: none;
}
.product-search input::placeholder {
  color: var(--text-3);
}
.product-search input::-webkit-search-cancel-button,
.product-search input::-webkit-search-decoration {
  display: none;
  appearance: none;
}
.product-search:focus-within {
  box-shadow: inset 0 0 0 1.5px var(--hair-strong);
}
.product-search button {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  font-size: 1.05rem;
  color: var(--text-3);
  border-radius: 999px;
}

.category-strip {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  padding: 0 var(--gutter);
  overflow-x: auto;
  scroll-snap-type: x proximity;
}
.category-chip {
  flex: 0 0 auto;
  padding: 8px 15px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text-2);
  background: var(--l2);
  border-radius: 999px;
  scroll-snap-align: start;
  transition: background var(--tap), color var(--tap);
}
.category-chip.is-active {
  color: var(--l0);
  background: var(--mint);
}

/* -------------------------------------------------------- caixa: the list
   Spaced card-rows. No dividers anywhere: separation is surface plus air,
   which is what keeps a dark screen from reading as a spreadsheet. */
.product-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px var(--gutter) 0;
}
.product-tile {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  background: var(--l2);
  border-radius: var(--r-md);
  transition: background var(--tap);
}
.product-tile:active {
  background: var(--l3);
}
.product-add {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  grid-template-areas:
    "art name  price"
    "art stock price";
  align-items: center;
  column-gap: 13px;
  width: 100%;
  min-height: 70px;
  padding: 12px 16px;
  text-align: left;
}

/* Monochrome initial chips. Colour emoji are the one thing that would break
   this palette outright, and the drawn bottle art would be the only colour on
   the screen. One typographic rule for every product instead. */
.product-emoji {
  grid-area: art;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--text-2);
  background: var(--l4);
  border-radius: 12px;
}
.product-emoji.is-art svg {
  width: 22px;
  height: 26px;
}
.product-name {
  grid-area: name;
  align-self: end;
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.product-meta {
  display: contents;
}
.product-price {
  grid-area: price;
  align-self: center;
  padding-left: 12px;
  font-size: 1.04rem;
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}
.product-stock {
  grid-area: stock;
  align-self: start;
  margin-top: 3px;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-3);
}
.product-stock.is-danger {
  color: var(--alert);
}
.product-action {
  display: none;
}

.product-tile.is-selected {
  background: var(--l3);
  box-shadow: inset 0 0 0 1.5px var(--mint);
}
.product-tile.is-selected .product-price {
  color: var(--mint);
}
.product-tile.has-warning .product-emoji {
  color: var(--alert);
  background: var(--alert-deep);
}

.quantity-badge {
  display: none;
}

.tile-stepper {
  display: grid;
  grid-template-columns: 40px 34px 40px;
  align-items: center;
  justify-self: end;
  margin: 0 16px 14px;
  background: var(--l4);
  border-radius: 999px;
}
.tile-stepper button {
  display: grid;
  place-items: center;
  height: 40px;
  font-size: 1.2rem;
  font-weight: 600;
  border-radius: 999px;
  transition: background var(--tap);
}
.tile-stepper button:active {
  background: rgba(242, 246, 250, 0.14);
}
.tile-stepper span {
  font-size: 0.98rem;
  font-weight: 700;
  text-align: center;
}

/* ------------------------------------------------------------ caixa: dock */
.sale-dock {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 6;
  padding: 12px var(--gutter) 14px;
  background: linear-gradient(to top, var(--l1) 74%, rgba(15, 20, 27, 0));
  animation: dock-rise var(--ease);
}
@keyframes dock-rise {
  from {
    transform: translateY(110%);
  }
}
.sale-dock-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 12px 12px 18px;
  background: var(--l3);
  border-radius: 18px;
}
.sale-dock-inner > div {
  min-width: 0;
}
.sale-dock-inner strong {
  display: block;
  font-size: 1.36rem;
  font-weight: 700;
  line-height: 1.1;
}
.sale-dock-inner small {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-3);
}
.sale-dock .primary-button {
  flex: 0 0 auto;
  min-width: 122px;
  min-height: 50px;
  padding: 0 22px;
}
.view.has-sale-dock {
  padding-bottom: 96px;
}

/* ---------------------------------------------------------- caixa: tables */
.tables-intro {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding: 18px var(--gutter) 12px;
}
.tables-intro h2 {
  margin: 0;
  font-size: 1.16rem;
  font-weight: 700;
  letter-spacing: -0.025em;
}
.tables-intro p {
  margin: 3px 0 0;
  font-size: 0.84rem;
  color: var(--text-3);
}
.tables-intro > span {
  flex: 0 0 auto;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-3);
}
.tables-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 0 var(--gutter);
}
.table-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 16px;
  text-align: left;
  background: var(--l2);
  border-radius: var(--r-md);
  transition: background var(--tap);
}
.table-tile:active {
  background: var(--l3);
}
.table-number {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-3);
}
.table-tile strong {
  font-size: 1.22rem;
  font-weight: 700;
}
.table-tile small {
  font-size: 0.78rem;
  color: var(--text-3);
}
.table-tile.is-open {
  background: var(--l3);
  box-shadow: inset 0 0 0 1.5px var(--mint);
}
.table-tile.is-open strong {
  color: var(--mint);
}

.running-bill {
  margin: 14px var(--gutter) 0;
  overflow: hidden;
  background: var(--l2);
  border-radius: var(--r-lg);
}
.running-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 17px 18px;
  background: var(--l3);
}
.running-head p {
  margin: 0 0 1px;
  font-size: 0.78rem;
  color: var(--text-3);
}
.running-head h2 {
  margin: 0;
  font-size: 1.14rem;
  font-weight: 700;
  letter-spacing: -0.025em;
}
.running-head strong {
  font-size: 1.44rem;
  font-weight: 700;
  color: var(--mint);
}
.bill-lines {
  margin: 0;
  padding: 0;
  list-style: none;
}
.bill-lines button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 14px 18px;
  text-align: left;
}
.bill-lines button:active {
  background: var(--l3);
}
.bill-lines span {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.bill-lines strong {
  font-size: 0.95rem;
  font-weight: 600;
}
.bill-lines small {
  font-size: 0.78rem;
  color: var(--text-3);
}
.bill-empty {
  margin: 0;
  padding: 24px 18px;
  font-size: 0.9rem;
  color: var(--text-3);
  text-align: center;
}
.table-actions {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  padding: 12px 14px 16px;
}

/* ------------------------------------------------------------- primitives */
.primary-button {
  display: inline-grid;
  place-items: center;
  min-height: 52px;
  padding: 0 22px;
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--l0);
  background: var(--mint);
  border-radius: 14px;
  transition: transform var(--tap), filter var(--tap);
}
.primary-button:active {
  transform: scale(0.98);
  filter: brightness(0.92);
}
.primary-button[disabled] {
  color: var(--text-3);
  background: var(--l3);
  cursor: default;
  transform: none;
}
.wide-button {
  width: 100%;
}
.secondary-button,
.quiet-button {
  display: inline-grid;
  place-items: center;
  min-height: 52px;
  padding: 0 20px;
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--text);
  background: var(--l3);
  border-radius: 14px;
  transition: background var(--tap);
}
.secondary-button:active,
.quiet-button:active {
  background: var(--l4);
}
.danger-button {
  display: inline-grid;
  place-items: center;
  min-height: 52px;
  padding: 0 20px;
  font-weight: 700;
  color: var(--alert);
  background: var(--alert-deep);
  border-radius: 14px;
}
.link-button {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--mint);
}
.button-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.back-button,
.login-back,
.sector-back,
.resumo-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 0;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text-2);
}

.empty-state {
  margin: 20px var(--gutter);
  padding: 32px 20px;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--text-3);
  text-align: center;
  background: var(--l2);
  border-radius: var(--r-lg);
}

/* ---------------------------------------------------------------- sheets */
.sheet-layer {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.sheet-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  background: rgba(4, 6, 9, 0.66);
  animation: fade-in 180ms ease;
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
}
.bottom-sheet {
  position: relative;
  max-height: 90dvh;
  overflow-y: auto;
  padding: 8px var(--gutter) calc(22px + env(safe-area-inset-bottom));
  background: var(--l3);
  border-radius: 22px 22px 0 0;
  animation: sheet-up 280ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
@keyframes sheet-up {
  from {
    transform: translateY(24%);
  }
}
.sheet-handle {
  width: 40px;
  height: 4px;
  margin: 8px auto 16px;
  background: var(--hair-strong);
  border-radius: 999px;
}
.sheet-header {
  margin-bottom: 16px;
}
.sheet-header h2 {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.035em;
}
.sheet-header p,
.sheet-note {
  margin: 7px 0 0;
  font-size: 0.9rem;
  color: var(--text-2);
}

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--nav-height) + 24px + env(safe-area-inset-bottom));
  z-index: 60;
  transform: translateX(-50%);
  max-width: calc(100% - 36px);
  padding: 14px 20px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text);
  background: var(--l4);
  border-radius: 14px;
  animation: toast-in 240ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
@keyframes toast-in {
  from {
    opacity: 0;
    transform: translate(-50%, 12px);
  }
}

/* Inline icons standing in for characters the bundled face does not contain. */
.ui-icon {
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.12em;
}
.management-icon,
.nudge-icon,
.settlement-icon,
.profile-link-icon,
.post-close-check,
.closed-state > span:first-child,
.delivery-symbol {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  font-size: 1.05rem;
  color: var(--text-2);
  background: var(--l4);
  border-radius: 12px;
}
.post-close-check,
.closed-state > span:first-child {
  color: var(--mint);
  background: var(--mint-deep);
}
.closed-state {
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 0 var(--gutter);
  padding: 16px;
  background: var(--l2);
  border-radius: var(--r-lg);
}
.closed-state strong {
  font-weight: 700;
}
.closed-state p {
  margin: 2px 0 0;
  font-size: 0.85rem;
  color: var(--text-3);
}

/* --------------------------------------------------- generic screen layer */
.page-intro,
.home-intro,
.subscreen-header,
.session-intro,
.section-heading {
  padding: 8px var(--gutter) 14px;
}
h1 {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.04em;
}
h2 {
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: -0.025em;
}
p {
  line-height: 1.55;
}
.subtle,
.field-hint,
.section-note {
  color: var(--text-3);
  font-size: 0.87rem;
}

.paper-card,
.management-card,
.profile-card,
.analysis-card,
.settlement-card,
.nudge-card,
.delivery-card,
.phone-card,
.login-card,
.section-block,
.management-block,
.analysis-block {
  padding: 18px;
  background: var(--l2);
  border-radius: var(--r-lg);
}

.hero-card {
  margin: 0 var(--gutter);
  padding: 22px;
  background: var(--l2);
  border-radius: var(--r-lg);
}
.hero-label {
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--text-3);
}
.hero-number {
  display: block;
  font-size: 2.3rem;
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.035em;
}

.field label,
.login-label {
  display: block;
  margin-bottom: 8px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-3);
}
.field input,
.field select,
.field textarea,
.login-input {
  width: 100%;
  padding: 15px 16px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  background: var(--l3);
  border: 0;
  border-radius: var(--r-md);
  appearance: none;
}
.field input:focus,
.login-input:focus {
  outline: none;
  box-shadow: inset 0 0 0 1.5px var(--mint);
}
.code-input {
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-align: center;
}
.field-error {
  min-height: 1em;
  margin: 7px 0 0;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--alert);
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--text-2);
  background: var(--l4);
  border-radius: 999px;
}
.status-badge.is-ok {
  color: var(--mint);
  background: var(--mint-deep);
}
.status-badge.is-danger {
  color: var(--alert);
  background: var(--alert-deep);
}

.login-view {
  padding: 0;
}
.login-screen {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding-bottom: 30px;
  background: var(--l0);
}
.login-brand {
  padding: 52px var(--gutter) 30px;
  text-align: center;
}
.login-mark {
  /* The mark is display:block, so text-align on the parent does not centre it.
     Two auto margins do. */
  width: 60px;
  height: 60px;
  margin-inline: auto;
  border-radius: 18px;
}
.login-wordmark {
  margin: 16px 0 6px;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.045em;
}
.login-brand > p:last-child {
  margin: 0;
  font-size: 0.94rem;
  color: var(--text-3);
}
.login-card {
  margin: 0 var(--gutter);
  padding: 22px 20px 24px;
  background: var(--l2);
}
.login-copy {
  margin: 6px 0 18px;
  color: var(--text-2);
}
.demo-hint {
  font-size: 0.85rem;
  color: var(--text-3);
}
.demo-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 16px;
  padding: 13px 15px;
  font-size: 0.85rem;
  color: var(--warn);
  background: var(--warn-deep);
  border-radius: var(--r-md);
}
.demo-notice p {
  margin: 0;
}

/* Dismiss controls. Both of these render as a bare "x" character, which gives
   the button the width of the glyph - measured at 8x17 before this rule. */
.nudge-dismiss,
.demo-notice button {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  margin: -8px -10px -8px 0;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--text-3);
  border-radius: 999px;
  transition: background var(--tap);
}
.nudge-dismiss:active,
.demo-notice button:active {
  color: var(--text);
  background: var(--l4);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   MANAGEMENT SCREENS - variant C
   --------------------------------------------------------------------------
   The ledger continued. Every surface here is a step on the luminosity ladder
   and nothing carries a shadow, because a shadow on a dark ground is invisible
   and the whole system would flatten into one plane. Mint stays rationed: the
   day's result, the active tab, the primary action - nowhere else.
   ========================================================================== */

.section-block,
.management-block,
.analysis-block {
  margin-top: 24px;
  padding: 0;
  background: none;
  border-radius: 0;
}
.section-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 0 var(--gutter) 12px;
}
.section-heading h2 {
  margin: 0;
}
.section-note {
  flex: 0 0 auto;
  margin: 0;
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--text-3);
}

/* -------------------------------------------------------------- the ledger */
.metric-banner {
  margin: 0 var(--gutter);
  overflow: hidden;
  background: var(--l2);
  border-radius: var(--r-lg);
}
.metric-periods,
.metric-tabs,
.report-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  margin: 12px 12px 0;
  padding: 3px;
  background: var(--l1);
  border-radius: 12px;
}
.metric-tabs {
  margin-top: 8px;
}
.metric-periods button,
.metric-tabs button,
.report-tabs button {
  padding: 9px 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-3);
  border-radius: 9px;
  transition: background var(--tap), color var(--tap);
}
.metric-periods button.is-active,
.metric-tabs button.is-active,
.report-tabs button.is-active {
  color: var(--text);
  background: var(--l4);
}
.report-tabs {
  margin: 0 var(--gutter) 16px;
  background: var(--l2);
}
.metric-value {
  padding: 18px 20px 20px;
}
.metric-value p {
  margin: 0;
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--text-3);
}
.metric-value strong {
  display: block;
  margin: 4px 0;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.035em;
}
.metric-value strong.is-negative,
.report-money .is-negative {
  color: var(--alert);
}
.metric-value small {
  font-size: 0.82rem;
  color: var(--text-3);
}
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 20px 20px;
}
.money-chip {
  padding: 6px 12px;
  font-size: 0.79rem;
  font-weight: 600;
  color: var(--text-2);
  background: var(--l3);
  border-radius: 999px;
}

/* ---------------------------------------------------------------- the grid */
.management-menu {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0 var(--gutter);
}
.management-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 15px;
  text-align: left;
  background: var(--l2);
  border-radius: var(--r-md);
  transition: background var(--tap);
}
.management-card:active {
  background: var(--l3);
}
.management-card strong {
  font-size: 0.93rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

/* --------------------------------------------------------------- list rows
   No dividers: rows sit on their own surface, separated by air. */
.paper-card,
.alert-list,
.summary-list,
.stock-list,
.expense-list,
.day-sales-list,
.team-list,
.settlement-list,
.person-summary-list,
.product-list,
.report-money {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 var(--gutter);
  padding: 0;
  list-style: none;
  background: none;
}
.summary-row,
.alert-row,
.expense-row,
.day-sales-list li,
.person-summary-list li,
.team-list li,
.report-money > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: var(--l2);
  border-radius: var(--r-md);
}
.summary-row span,
.expense-main,
.stock-main,
.day-sale-main,
.team-main {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.summary-row strong,
.stock-row strong,
.expense-row strong,
.day-sale-main strong {
  font-size: 0.95rem;
  font-weight: 600;
}
.summary-row small,
.expense-main small,
.stock-main small,
.day-sale-main small,
.subtle {
  font-size: 0.8rem;
  color: var(--text-3);
}
.money-column {
  flex: 0 0 auto;
  font-size: 1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
.report-money span {
  font-size: 0.93rem;
  color: var(--text-2);
}
.report-money strong {
  font-size: 1.02rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.report-money .is-total {
  background: var(--l3);
}
.report-money .is-total span {
  color: var(--text-2);
}
.report-money .is-total strong {
  font-size: 1.26rem;
  color: var(--mint);
}

/* The day's result. The one card allowed to spend the accent. */
.hero-card {
  display: block;
}
.hero-number {
  color: var(--mint);
}
.hero-meta {
  display: block;
  margin-top: 4px;
  font-size: 0.82rem;
  color: var(--text-3);
}
.result-lines {
  margin: 16px 0 0;
  padding-top: 4px;
  border-top: 1px solid var(--hair);
}
.result-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--hair);
}
.result-line:last-child {
  border-bottom: 0;
}
.result-line span:first-child {
  font-size: 0.93rem;
  color: var(--text-2);
}
.result-line strong {
  font-size: 1.02rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ------------------------------------------------------------ prompt cards */
.home-nudges {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 var(--gutter);
}
.nudge-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 40px;
  grid-template-areas:
    "icon body   close"
    "icon action action";
  align-items: start;
  gap: 8px 13px;
  padding: 15px 12px 15px 15px;
  background: var(--l2);
  border-radius: var(--r-lg);
}
.nudge-icon {
  grid-area: icon;
}
.nudge-card > div:not(.nudge-actions) {
  grid-area: body;
}
.nudge-dismiss {
  grid-area: close;
  justify-self: end;
  margin: -6px -4px 0 0;
}
.nudge-card.is-week .nudge-icon {
  color: var(--mint);
  background: var(--mint-deep);
}
.nudge-card strong {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.3;
}
.nudge-card p {
  margin: 4px 0 0;
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--text-3);
}
.nudge-link {
  grid-area: action;
  justify-self: start;
  padding: 8px 14px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  background: var(--l4);
  border-radius: 999px;
}
.nudge-actions {
  grid-area: action;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.nudge-actions .nudge-link {
  grid-area: auto;
}

.settlement-card {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 16px;
  background: var(--l2);
  border-radius: var(--r-lg);
}
.settlement-card strong {
  display: block;
  font-size: 0.94rem;
  font-weight: 600;
  line-height: 1.32;
}
.settlement-card p {
  margin: 5px 0 0;
  font-size: 0.83rem;
  line-height: 1.55;
  color: var(--text-3);
}

.alert-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  background: var(--warn);
  border-radius: 999px;
}

.delivery-card {
  margin: 0 var(--gutter);
}
.delivery-head {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 16px;
}
.delivery-head h2 {
  margin: 0;
  font-size: 1.04rem;
}
.delivery-head p {
  margin: 3px 0 0;
  font-size: 0.82rem;
  color: var(--text-3);
}
.delivery-confirmed {
  padding: 13px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--mint);
  text-align: center;
  background: var(--mint-deep);
  border-radius: var(--r-md);
}

/* ------------------------------------------------------------ date stepper */
.date-stepper {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 46px;
  align-items: center;
  margin: 0 var(--gutter) 16px;
  padding: 3px;
  background: var(--l2);
  border-radius: 12px;
}
.date-stepper button {
  display: grid;
  place-items: center;
  height: 42px;
  font-size: 1.25rem;
  font-weight: 600;
  border-radius: 9px;
  transition: background var(--tap);
}
.date-stepper button:active {
  background: var(--l4);
}
.date-stepper button[disabled] {
  color: var(--text-3);
  opacity: 0.45;
  cursor: default;
}
.date-stepper strong {
  font-size: 0.91rem;
  font-weight: 600;
  text-align: center;
}
.report-date strong {
  font-size: 0.89rem;
}

/* -------------------------------------------------- foot-of-screen actions */
.close-action,
.reopen-action,
.expense-day-link,
.stock-count-action,
.resumo-action,
.view > .wide-button,
.session-actions > * {
  width: calc(100% - 2 * var(--gutter));
  margin: 16px var(--gutter) 0;
}
.session-actions {
  display: flex;
  flex-direction: column;
}
.button-pair {
  margin: 14px var(--gutter) 0;
}

/* ---------------------------------------------------------------- products */
.product-row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 13px;
  width: 100%;
  padding: 14px 16px;
  text-align: left;
  background: var(--l2);
  border-radius: var(--r-md);
  transition: background var(--tap);
}
.product-row:active {
  background: var(--l3);
}
.product-row-emoji {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--text-2);
  background: var(--l4);
  border-radius: 12px;
}
.product-row-main {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.product-row-main strong {
  font-size: 0.95rem;
  font-weight: 600;
}
/* Wraps on purpose - see CONV-144. The cost is the merchant's margin. */
.product-row-main small {
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--text-3);
}
.product-row-stock {
  flex: 0 0 auto;
  font-size: 0.84rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

/* ------------------------------------------------------------------- stock */
.stock-category,
.stock-count-category {
  margin-top: 22px;
}
.stock-category-title {
  margin: 0;
  padding: 0 var(--gutter) 10px;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text-3);
}
.stock-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 13px;
  width: 100%;
  padding: 14px 16px;
  text-align: left;
  background: var(--l2);
  border-radius: var(--r-md);
}
.stock-main {
  align-items: flex-start;
}
.stock-main .status-badge {
  margin-top: 6px;
}
.stock-numbers {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.stock-numbers strong {
  font-size: 1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.stock-numbers small {
  font-size: 0.76rem;
  color: var(--text-3);
  white-space: nowrap;
}
.stock-row.is-low .stock-numbers strong {
  color: var(--alert);
}
.stock-count-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 100px;
  align-items: center;
  gap: 13px;
  padding: 14px 16px;
  background: var(--l2);
  border-radius: var(--r-md);
}
.stock-count-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 var(--gutter);
  padding: 0;
  list-style: none;
}
.stock-count-inputs input {
  width: 100%;
  padding: 11px;
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
  color: var(--text);
  background: var(--l4);
  border: 0;
  border-radius: 10px;
}
.stock-count-progress,
.stock-count-totals {
  margin: 0 var(--gutter);
  padding: 14px 16px;
  font-size: 0.88rem;
  background: var(--l2);
  border-radius: var(--r-md);
}

/* ----------------------------------------------------------------- reports */
.report-close {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 16px var(--gutter) 0;
  padding: 14px 16px;
  font-size: 0.9rem;
  font-weight: 500;
  background: var(--l2);
  border-radius: var(--r-md);
}
.report-close button {
  font-weight: 600;
  color: var(--mint);
}
.report-close.is-closed {
  color: var(--mint);
  background: var(--mint-deep);
}

.analysis-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.analysis-card {
  margin: 0 var(--gutter);
  padding: 16px 0 8px;
  background: var(--l2);
  border-radius: var(--r-lg);
}
.analysis-card h3 {
  margin: 0 16px 4px;
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.analysis-hint {
  margin: 0 16px 10px;
  font-size: 0.8rem;
  color: var(--text-3);
}
.analysis-card .empty-state {
  margin: 12px 16px 16px;
}
.ranking-list {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
  background: none;
}
.ranking-list li {
  display: block;
  padding: 11px 16px;
  background: none;
  border-radius: 0;
}
.ranking-list li > div:first-child {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.ranking-list strong {
  font-size: 0.92rem;
  font-weight: 600;
}
.ranking-list span {
  font-size: 0.87rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.bar-track {
  position: relative;
  height: 6px;
  margin-top: 8px;
  overflow: hidden;
  background: var(--l4);
  border-radius: 999px;
}
.bar-track > span {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--mint);
  border-radius: 999px;
}
.category-bars > div {
  padding: 11px 16px;
}
.category-bars p {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  font-size: 0.92rem;
}
.category-bars span {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- profile */
.profile-card,
.profile-link-card {
  display: flex;
  align-items: center;
  gap: 14px;
  width: calc(100% - 2 * var(--gutter));
  margin: 0 var(--gutter) 8px;
  padding: 17px 16px;
  text-align: left;
  background: var(--l2);
  border-radius: var(--r-lg);
}
.profile-avatar,
.team-avatar,
.profile-pick-avatar,
.business-initial {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  background: var(--l4);
  border-radius: 14px;
}
.row-chevron {
  flex: 0 0 auto;
  margin-left: auto;
  color: var(--text-3);
}
.profile-setting,
.setting-switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

/* ------------------------------------------------------------- sheet forms */
.form-stack {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.payment-grid,
.sector-choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.payment-button,
.sector-choice {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 14px;
  font-size: 0.93rem;
  font-weight: 600;
  text-align: left;
  background: var(--l3);
  border-radius: var(--r-md);
  transition: background var(--tap), color var(--tap);
}
.payment-button {
  justify-content: center;
}
.payment-button:active,
.sector-choice:active {
  background: var(--l4);
}
.payment-button.is-active,
.sector-choice.is-active {
  color: var(--l0);
  background: var(--mint);
}
.segmented {
  display: grid;
  grid-auto-flow: column;
  gap: 3px;
  padding: 3px;
  background: var(--l2);
  border-radius: 12px;
}
.segmented button {
  padding: 10px 8px;
  font-size: 0.89rem;
  font-weight: 600;
  border-radius: 9px;
}
.segmented button.is-active {
  color: var(--text);
  background: var(--l4);
}
.emoji-picker {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
}
.emoji-choice {
  display: grid;
  place-items: center;
  padding: 10px 0;
  font-size: 1.2rem;
  background: var(--l3);
  border-radius: 10px;
}
.emoji-choice.is-active {
  box-shadow: inset 0 0 0 1.5px var(--mint);
}
.business-list,
.profile-pick {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.business-row,
.business-choice,
.profile-pick button {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  padding: 13px 14px;
  text-align: left;
  background: var(--l2);
  border-radius: var(--r-md);
}
.profile-pick span:not(.profile-pick-avatar) {
  display: flex;
  flex-direction: column;
}
.profile-pick small {
  font-size: 0.8rem;
  color: var(--text-3);
}
.onboarding-list {
  margin: 18px 0;
  padding: 0;
  list-style: none;
}
.onboarding-list li {
  display: flex;
  gap: 13px;
  padding: 11px 0;
}
.onboarding-list span {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  font-size: 0.83rem;
  font-weight: 700;
  color: var(--l0);
  background: var(--mint);
  border-radius: 999px;
}
.onboarding-list strong {
  font-size: 0.94rem;
  font-weight: 500;
  line-height: 1.45;
}

/* ------------------------------------------------------------ profile, properly
   Five structures the generic layer could not guess: the brand block, the
   phone card, the settings toggle, the link card and the footer. The toggle
   matters most - a native checkbox renders as the OS's own blue control,
   which is one of the loudest "this is a web page" signals on the screen. */
.profile-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 var(--gutter) 16px;
  padding: 14px;
  background: var(--l2);
  border-radius: var(--r-lg);
}
.brand-mark-profile {
  width: 40px;
  height: 40px;
  border-radius: 9px;
}
.profile-wordmark {
  margin: 0;
  font-size: 1.24rem;
  font-weight: 700;
  letter-spacing: -0.03em;
}
.brand-tagline {
  margin: 2px 0 0;
  font-size: 0.8rem;
  color: var(--text-3);
}
.profile-card h2 {
  margin: 0;
  font-size: 1.16rem;
}
.phone-card {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 0 var(--gutter);
}
.phone-card > span {
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--text-3);
}
.phone-card strong {
  font-size: 1.3rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.phone-card small {
  font-size: 0.8rem;
  color: var(--text-3);
}
.profile-setting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 var(--gutter);
  cursor: pointer;
}
.profile-setting > span:first-child {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.profile-setting strong {
  font-size: 0.94rem;
  font-weight: 700;
}
.profile-setting small {
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--text-3);
}
.setting-switch {
  position: relative;
  flex: 0 0 auto;
  width: 54px;
  height: 32px;
}
.setting-switch input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.setting-switch > span {
  position: absolute;
  inset: 0;
  background: var(--l4);
  transition: background var(--tap);
}
.setting-switch > span::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 26px;
  height: 26px;
  background: var(--text);
  transition: transform 140ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.setting-switch input:checked + span {
  background: var(--mint);
}
.setting-switch input:checked + span::after {
  transform: translateX(22px);
}
.profile-link-card {
  display: flex;
  align-items: center;
  gap: 14px;
}
.profile-link-card > span:nth-child(2) {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.profile-link-card strong {
  font-size: 0.96rem;
  font-weight: 700;
}
.profile-link-card small {
  font-size: 0.8rem;
  color: var(--text-3);
}
.business-row,
.business-choice {
  padding: 13px 14px;
}
.business-list {
  margin: 0 var(--gutter);
  background: var(--text);
  background: var(--l2);
  border-radius: var(--r-lg);
}
.business-row > span:nth-child(2),
.business-choice > span:nth-child(2) {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.business-row small,
.business-choice small {
  font-size: 0.78rem;
  color: var(--text-3);
}
.business-row .status-badge {
  margin-left: auto;
}
.profile-footer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  margin: 26px var(--gutter) 0;
  padding-top: 16px;
  border-top: 1px solid var(--hair);
}
.demo-profile-note {
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-3);
}
.link-button.is-danger {
  color: var(--alert);
  border-bottom-color: var(--alert);
}
.team-help,
.session-intro p {
  margin: 0 var(--gutter);
  font-size: 0.86rem;
  color: var(--text-3);
}