/* ============================================================================
   kaixa - VARIANT B - "WARM MARKET"
   ----------------------------------------------------------------------------
   The app as a PERSON, not a bank. It should feel like the notebook behind the
   counter: warm, handled, forgiving. A merchant who has never used a till app
   should not feel audited by it.

   Four rules the whole system obeys:
     1. WARM PAPER, NEVER WHITE. #fdf6ee, the colour of a receipt pad. Pure
        white with grey borders is what makes software feel like a form.
     2. COLOUR FROM CAPULANA, NOT FROM A FLAG. Indigo ground, terracotta and
        papaya accents, a leaf green reserved for money in. Colour carries
        MEANING here - category, state, money - never decoration alone.
     3. SOFT AND PHYSICAL. Radii 18-28px, one warm-tinted shadow layer, and
        springy motion. Things you touch move; things you read do not.
     4. HANDLED, NOT PRISTINE. A faint capulana geometry sits behind the day
        card. It is drawn with gradients - no image, no request, no weight.

   The counterpart to variant A: where A narrows a number to keep it whole, B
   gives it a room of its own.
   ========================================================================= */

/* -------------------------------------------------------------- typeface */
/* Baloo 2 variable (Ek Type, OFL). Rounded terminals, generous x-height,
   400-800 in one file. Subset to Latin + PT diacritics. */
@font-face {
  font-family: "Baloo 2";
  src: url("./fonts/baloo2.woff2") format("woff2-variations");
  font-weight: 400 800;
  font-style: normal;
  font-display: block; /* preloaded in index.html */
}

:root {
  color-scheme: light;

  --paper: #fdf6ee;
  --paper-raised: #fffcf8;
  --paper-sunk: #f6ece0;

  --indigo: #16324f;
  --indigo-2: #3d5871;
  --indigo-3: #5d7089; /* 4.73:1 on --paper, measured. #6e8299 read 3.69 */
  --indigo-wash: #e8eef4;

  /* Deepened from #c8552c, which measured 4.09:1 in BOTH of its roles -
     as a button ground under paper-coloured text, and as link text on
     paper. One token, both roles: this reads 5.07:1 either way. */
  --terracotta: #b34820;
  --terracotta-wash: #fbe9e1;
  --papaya: #eda13a;
  --papaya-wash: #fdf0da;
  --leaf: #2e7d5b;
  --leaf-bright: #3fa87a;
  --leaf-wash: #e4f2ec;
  --plum: #7a3b64;

  --alert: #b3341f;
  --alert-wash: #fbe7e2;

  /* One warm shadow, used sparingly. Cool grey shadows on warm paper are the
     fastest way to make this look like a template. */
  --lift: 0 2px 0 rgba(22, 50, 79, 0.06), 0 10px 24px -12px rgba(22, 50, 79, 0.34);
  --lift-strong: 0 3px 0 rgba(22, 50, 79, 0.08), 0 18px 34px -16px rgba(22, 50, 79, 0.44);

  --header-height: 58px;
  --nav-height: 74px;
  --gutter: 16px;
  --r-lg: 26px;
  --r-md: 18px;
  --r-sm: 12px;

  --spring: 260ms cubic-bezier(0.34, 1.4, 0.5, 1);
  --tap: 130ms ease;

  --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.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: "Baloo 2", "Trebuchet MS", 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.01em;
}

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

html,
body {
  width: 100%;
  min-width: 320px;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--paper);
  color: var(--indigo);
  -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: 3px solid var(--papaya);
  outline-offset: 2px;
  border-radius: 4px;
}
*::-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(--paper);
}

.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(--paper);
}
.wordmark {
  display: flex;
  align-items: center;
  gap: 9px;
}
.brand-mark {
  display: block;
  width: 28px;
  height: 28px;
  border-radius: 9px;
}
.wordmark-text {
  font-size: 1.16rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.business-switcher {
  display: flex;
  align-items: center;
  gap: 5px;
  max-width: 56%;
  padding: 7px 13px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--indigo-2);
  background: var(--paper-sunk);
  border-radius: 999px;
  transition: transform var(--tap), background var(--tap);
}
.business-switcher:active {
  transform: scale(0.96);
  background: var(--indigo-wash);
}
.business-switcher > span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis; /* a name, never a number */
}
.business-switcher svg {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.install-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex: 0 0 auto;
  margin: 0 var(--gutter) 4px;
  padding: 10px 12px;
  background: var(--papaya-wash);
  border-radius: var(--r-md);
}
.install-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.install-brand .brand-mark {
  width: 24px;
  height: 24px;
  border-radius: 8px;
}
.install-brand strong {
  font-size: 0.86rem;
  font-weight: 700;
}
.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.86rem;
  font-weight: 800;
  color: var(--terracotta);
  border-radius: 999px;
}
.text-button:active {
  background: var(--terracotta-wash);
}
.icon-button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: var(--indigo-2);
  border-radius: 999px;
}
.icon-button svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
}
.icon-button:active {
  background: rgba(22, 50, 79, 0.1);
}

.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: 18px;
}

/* -------------------------------------------------------------- floating nav
   A raised pill rather than a bar welded to the bottom edge - the app sits ON
   the paper instead of being framed by chrome. */
.bottom-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  flex: 0 0 auto;
  margin: 0 var(--gutter) calc(10px + env(safe-area-inset-bottom));
  padding: 5px;
  background: var(--indigo);
  border-radius: 999px;
  box-shadow: var(--lift-strong);
}
.nav-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 54px;
  color: rgba(253, 246, 238, 0.62);
  font-size: 0.94rem;
  font-weight: 700;
  border-radius: 999px;
  transition: color var(--tap), background var(--tap), transform var(--tap);
}
.nav-item svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.nav-item:active {
  transform: scale(0.96);
}
.nav-item.is-active {
  color: var(--indigo);
  background: var(--papaya);
}

/* --------------------------------------------------------- caixa: the day */
.caixa-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding: 4px var(--gutter) 9px;
}
.caixa-heading h1 {
  margin: 0;
  font-size: 1.34rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.eyebrow {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--indigo-3);
}
.caixa-products-link {
  padding: 8px 13px;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--terracotta);
  background: var(--terracotta-wash);
  border-radius: 999px;
  white-space: nowrap;
  transition: transform var(--tap);
}
.caixa-products-link:active {
  transform: scale(0.95);
}

/* THE DAY CARD. Indigo, softly rounded, with a capulana geometry behind the
   figures - drawn entirely with gradients, so it costs nothing to send. */
.caixa-control-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "total close"
    "mode  mode";
  gap: 12px;
  margin: 0 var(--gutter);
  padding: 16px 18px 12px;
  overflow: hidden;
  color: var(--paper);
  background: var(--indigo);
  border-radius: var(--r-lg);
  box-shadow: var(--lift);
}
.caixa-control-row::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    repeating-linear-gradient(45deg, rgba(237, 161, 58, 0.16) 0 2px, transparent 2px 13px),
    repeating-linear-gradient(-45deg, rgba(179, 72, 32, 0.16) 0 2px, transparent 2px 13px);
  -webkit-mask-image: linear-gradient(105deg, transparent 42%, #000 100%);
  mask-image: linear-gradient(105deg, transparent 42%, #000 100%);
}
.caixa-control-row > * {
  position: relative;
}
.caixa-running-total {
  grid-area: total;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
  color: inherit;
  text-align: left;
}
.total-label {
  font-size: 0.86rem;
  font-weight: 600;
  color: rgba(253, 246, 238, 0.72);
}
.caixa-running-total strong {
  display: block;
  max-width: 100%;
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 1.04;
  color: var(--paper);
}
.caixa-running-total small {
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(253, 246, 238, 0.6);
}
.caixa-close-control {
  grid-area: close;
  align-self: start;
  padding: 9px 14px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--paper);
  background: rgba(253, 246, 238, 0.19);
  border-radius: 999px;
  white-space: nowrap;
  transition: transform var(--tap), background var(--tap);
}
.caixa-close-control:active {
  transform: scale(0.95);
  background: rgba(253, 246, 238, 0.24);
}
.caixa-close-control.is-closed {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--indigo);
  background: var(--leaf-bright);
}

.caixa-mode {
  grid-area: mode;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  background: rgba(11, 26, 42, 0.42);
  border-radius: 999px;
}
.caixa-mode button {
  padding: 9px 8px;
  font-size: 0.9rem;
  font-weight: 700;
  color: rgba(253, 246, 238, 0.74);
  border-radius: 999px;
  transition: background var(--tap), color var(--tap);
}
.caixa-mode button.is-active {
  color: var(--indigo);
  background: var(--paper);
}

/* ------------------------------------------------- caixa: find and filter */
.product-search {
  position: relative;
  display: flex;
  align-items: center;
  margin: 12px var(--gutter) 0;
  padding: 0 14px;
  background: var(--paper-raised);
  border-radius: 999px;
  box-shadow: inset 0 0 0 1.5px rgba(22, 50, 79, 0.13);
  transition: box-shadow var(--tap);
}
.product-search::before {
  content: "";
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  margin-right: 9px;
  background: var(--indigo-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: 11px 0;
  font-size: 0.98rem;
  font-weight: 600;
  background: none;
  border: 0;
  appearance: none;
}
.product-search input::placeholder {
  color: var(--indigo-3);
  font-weight: 500;
}
.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 2px var(--papaya);
}
.product-search button {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  font-size: 1.1rem;
  color: var(--indigo-2);
  border-radius: 999px;
}

.category-strip {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  padding: 2px var(--gutter);
  overflow-x: auto;
  scroll-snap-type: x proximity;
}
.category-chip {
  flex: 0 0 auto;
  padding: 8px 15px;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--indigo-2);
  background: var(--paper-sunk);
  border-radius: 999px;
  scroll-snap-align: start;
  transition: transform var(--tap), background var(--tap), color var(--tap);
}
.category-chip:active {
  transform: scale(0.95);
}
.category-chip.is-active {
  color: var(--paper);
  background: var(--indigo);
}

/* ------------------------------------------------------- caixa: the goods
   Two up and COMPACT. The previous build gave each product a 290px tile and
   showed four; these are ~132px and show eight, without losing the warmth
   that makes a tile nicer to hit than a row. */
.product-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 10px var(--gutter) 0;
}
.product-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--paper-raised);
  border-radius: var(--r-md);
  box-shadow: var(--lift);
  transition: transform var(--spring), box-shadow var(--tap);
}
.product-tile:active {
  transform: scale(0.97);
}
/* The art sits ABOVE the name rather than beside it. Side-by-side leaves the
   name ~120px at 390px, so "Castle Lite 440ml" wrapped to three lines and the
   tile grew to the height the previous build already had. Stacked, the name
   gets the full tile width and the tile holds ~150px. */
.product-add {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  width: 100%;
  padding: 12px;
  text-align: left;
}

/* Emoji stay in this direction - they are warm, instantly readable, and the
   merchant recognises the product before reading a word. Every product gets
   the SAME tinted disc, whether its art is an emoji or a drawn bottle, so the
   grid reads as one system with some richer illustrations in it. */
.product-emoji {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  font-size: 1.2rem;
  line-height: 1;
  background: var(--papaya-wash);
  border-radius: 999px;
}
.product-emoji.is-art svg {
  width: 23px;
  height: 27px;
}
.product-name {
  font-size: 0.93rem;
  font-weight: 700;
  line-height: 1.22;
}
.product-meta {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin-top: auto;
}
.product-price {
  font-size: 1rem;
  font-weight: 800;
  color: var(--leaf);
  white-space: nowrap;
}
.product-stock {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--indigo-3);
  white-space: nowrap;
}
.product-stock.is-danger {
  color: var(--alert);
}
.product-action {
  display: none;
}

.product-tile.is-selected {
  background: var(--leaf-wash);
  box-shadow: inset 0 0 0 2px var(--leaf-bright), var(--lift);
}
.product-tile.has-warning .product-emoji {
  box-shadow: inset 0 0 0 2px var(--alert);
}

.quantity-badge {
  position: absolute;
  top: -7px;
  right: -5px;
  z-index: 2;
  display: grid;
  place-items: center;
  min-width: 26px;
  height: 26px;
  padding: 0 7px;
  font-size: 0.84rem;
  font-weight: 800;
  color: var(--paper);
  background: var(--terracotta);
  border-radius: 999px;
  box-shadow: 0 2px 8px -2px rgba(22, 50, 79, 0.5);
  animation: pop 260ms cubic-bezier(0.34, 1.5, 0.5, 1);
}
@keyframes pop {
  from {
    transform: scale(0.4);
    opacity: 0;
  }
}

.tile-stepper {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  margin: 0 9px 9px;
  background: var(--paper-sunk);
  border-radius: 999px;
}
.tile-stepper button {
  display: grid;
  place-items: center;
  height: 40px;
  font-size: 1.3rem;
  font-weight: 700;
  border-radius: 999px;
  transition: background var(--tap), transform var(--tap);
}
.tile-stepper button:active {
  transform: scale(0.9);
  background: rgba(22, 50, 79, 0.12);
}
.tile-stepper span {
  font-size: 1rem;
  font-weight: 800;
  text-align: center;
}

/* --------------------------------------------------------- caixa: the till
   The dock is a wallet: it rises, it holds the money, and its button is the
   warmest thing on the screen. */
.sale-dock {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 6;
  padding: 0 var(--gutter) 8px;
  animation: dock-rise var(--spring);
}
@keyframes dock-rise {
  from {
    transform: translateY(120%);
  }
}
.sale-dock-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 11px 11px 20px;
  color: var(--paper);
  background: var(--indigo);
  border-radius: 999px;
  box-shadow: var(--lift-strong);
}
.sale-dock-inner > div {
  min-width: 0;
}
.sale-dock-inner strong {
  display: block;
  font-size: 1.42rem;
  font-weight: 800;
  line-height: 1.1;
}
.sale-dock-inner small {
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(253, 246, 238, 0.66);
}
.sale-dock .primary-button {
  flex: 0 0 auto;
  min-width: 124px;
  min-height: 52px;
  padding: 0 22px;
  color: var(--indigo);
  background: var(--papaya);
  border-radius: 999px;
}
.view.has-sale-dock {
  padding-bottom: 92px;
}

/* ---------------------------------------------------------- caixa: tables */
.tables-intro {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding: 18px var(--gutter) 10px;
}
.tables-intro h2 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 800;
}
.tables-intro p {
  margin: 2px 0 0;
  font-size: 0.86rem;
  color: var(--indigo-3);
}
.tables-intro > span {
  flex: 0 0 auto;
  padding: 6px 12px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--indigo-2);
  background: var(--paper-sunk);
  border-radius: 999px;
}
.tables-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 0 var(--gutter);
}
.table-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 16px;
  text-align: left;
  background: var(--paper-raised);
  border-radius: var(--r-md);
  box-shadow: var(--lift);
  transition: transform var(--spring);
}
.table-tile:active {
  transform: scale(0.97);
}
.table-number {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--indigo-3);
}
.table-tile strong {
  font-size: 1.24rem;
  font-weight: 800;
}
.table-tile small {
  font-size: 0.8rem;
  color: var(--indigo-3);
}
.table-tile.is-open {
  color: var(--paper);
  background: var(--plum);
}
.table-tile.is-open .table-number,
.table-tile.is-open small {
  color: rgba(253, 246, 238, 0.72);
}

.running-bill {
  margin: 14px var(--gutter) 0;
  overflow: hidden;
  background: var(--paper-raised);
  border-radius: var(--r-lg);
  box-shadow: var(--lift);
}
.running-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  color: var(--paper);
  background: var(--indigo);
}
.running-head p {
  margin: 0;
  font-size: 0.8rem;
  color: rgba(253, 246, 238, 0.68);
}
.running-head h2 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 800;
}
.running-head strong {
  font-size: 1.5rem;
  font-weight: 800;
}
.bill-lines {
  margin: 0;
  padding: 0;
  list-style: none;
}
.bill-lines li + li {
  border-top: 1px solid var(--paper-sunk);
}
.bill-lines button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 13px 18px;
  text-align: left;
}
.bill-lines button:active {
  background: var(--paper-sunk);
}
.bill-lines span {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.bill-lines strong {
  font-size: 0.96rem;
  font-weight: 700;
}
.bill-lines small {
  font-size: 0.78rem;
  color: var(--indigo-3);
}
.bill-empty {
  margin: 0;
  padding: 22px 18px;
  font-size: 0.92rem;
  color: var(--indigo-3);
  text-align: center;
}
.table-actions {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  padding: 12px 14px 14px;
}

/* ------------------------------------------------------------- primitives */
.primary-button {
  display: inline-grid;
  place-items: center;
  min-height: 54px;
  padding: 0 22px;
  font-size: 1.02rem;
  font-weight: 800;
  color: var(--paper);
  background: var(--terracotta);
  border-radius: 999px;
  transition: transform var(--spring), filter var(--tap);
}
.primary-button:active {
  transform: scale(0.96);
  filter: brightness(0.94);
}
.primary-button[disabled] {
  color: var(--indigo-3);
  background: var(--paper-sunk);
  cursor: default;
  transform: none;
}
.wide-button {
  width: 100%;
}
.secondary-button,
.quiet-button {
  display: inline-grid;
  place-items: center;
  min-height: 54px;
  padding: 0 20px;
  font-size: 0.96rem;
  font-weight: 700;
  color: var(--indigo);
  background: var(--paper-sunk);
  border-radius: 999px;
  transition: transform var(--spring);
}
.secondary-button:active,
.quiet-button:active {
  transform: scale(0.96);
}
.danger-button {
  display: inline-grid;
  place-items: center;
  min-height: 54px;
  padding: 0 20px;
  font-weight: 800;
  color: var(--paper);
  background: var(--alert);
  border-radius: 999px;
}
.link-button {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--terracotta);
}
.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.88rem;
  font-weight: 700;
  color: var(--indigo-2);
}

.empty-state {
  margin: 20px var(--gutter);
  padding: 30px 20px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--indigo-3);
  text-align: center;
  background: var(--paper-sunk);
  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(22, 50, 79, 0.42);
  animation: fade-in 160ms 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(--paper);
  border-radius: 28px 28px 0 0;
  animation: sheet-up 300ms cubic-bezier(0.32, 1.28, 0.5, 1);
}
@keyframes sheet-up {
  from {
    transform: translateY(30%);
  }
}
.sheet-handle {
  width: 46px;
  height: 5px;
  margin: 8px auto 14px;
  background: var(--paper-sunk);
  border-radius: 999px;
}
.sheet-header {
  margin-bottom: 14px;
}
.sheet-header h2 {
  margin: 0;
  font-size: 1.34rem;
  font-weight: 800;
  letter-spacing: -0.015em;
}
.sheet-header p,
.sheet-note {
  margin: 6px 0 0;
  font-size: 0.92rem;
  color: var(--indigo-2);
}

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--nav-height) + 26px + env(safe-area-inset-bottom));
  z-index: 60;
  transform: translateX(-50%);
  max-width: calc(100% - 32px);
  padding: 14px 20px;
  font-size: 0.94rem;
  font-weight: 700;
  color: var(--paper);
  background: var(--indigo);
  border-radius: 999px;
  box-shadow: var(--lift-strong);
  animation: toast-in 300ms cubic-bezier(0.32, 1.3, 0.5, 1);
}
@keyframes toast-in {
  from {
    opacity: 0;
    transform: translate(-50%, 16px) scale(0.94);
  }
}

/* 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.4;
  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: 40px;
  height: 40px;
  font-size: 1.1rem;
  color: var(--terracotta);
  background: var(--terracotta-wash);
  border-radius: 999px;
}
.post-close-check,
.closed-state > span:first-child {
  color: var(--leaf);
  background: var(--leaf-wash);
}
.closed-state {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 var(--gutter);
  padding: 16px;
  background: var(--leaf-wash);
  border-radius: var(--r-lg);
}
.closed-state strong {
  font-weight: 800;
}
.closed-state p {
  margin: 2px 0 0;
  font-size: 0.86rem;
  color: var(--indigo-2);
}

/* --------------------------------------------------- generic screen layer */
.page-intro,
.home-intro,
.subscreen-header,
.session-intro,
.section-heading {
  padding: 10px var(--gutter) 12px;
}
h1 {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -0.02em;
}
h2 {
  font-size: 1.16rem;
  font-weight: 800;
}
p {
  line-height: 1.5;
}
.subtle,
.field-hint,
.section-note {
  color: var(--indigo-3);
  font-size: 0.88rem;
}

.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(--paper-raised);
  border-radius: var(--r-lg);
  box-shadow: var(--lift);
}

.hero-card {
  margin: 0 var(--gutter);
  padding: 20px;
  color: var(--paper);
  background: var(--indigo);
  border-radius: var(--r-lg);
  box-shadow: var(--lift);
}
.hero-label {
  font-size: 0.86rem;
  font-weight: 600;
  color: rgba(253, 246, 238, 0.7);
}
.hero-number {
  display: block;
  font-size: 2.3rem;
  font-weight: 800;
  line-height: 1.08;
}

.field label,
.login-label {
  display: block;
  margin-bottom: 7px;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--indigo-2);
}
.field input,
.field select,
.field textarea,
.login-input {
  width: 100%;
  padding: 15px 16px;
  font-size: 1.02rem;
  font-weight: 600;
  background: var(--paper-sunk);
  border: 0;
  border-radius: var(--r-sm);
  appearance: none;
}
.field input:focus,
.login-input:focus {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--papaya);
}
.code-input {
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: 0.3em;
  text-align: center;
}
.field-error {
  min-height: 1em;
  margin: 6px 0 0;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--alert);
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--indigo);
  background: var(--paper-sunk);
  border-radius: 999px;
}
.status-badge.is-ok {
  color: var(--leaf);
  background: var(--leaf-wash);
}
.status-badge.is-danger {
  color: var(--alert);
  background: var(--alert-wash);
}

.login-view {
  padding: 0;
}
.login-screen {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding-bottom: 30px;
}
.login-brand {
  padding: 44px var(--gutter) 26px;
  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: 64px;
  height: 64px;
  margin-inline: auto;
  border-radius: 20px;
}
.login-wordmark {
  margin: 14px 0 4px;
  font-size: 2.1rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.login-brand > p:last-child {
  margin: 0;
  font-size: 0.96rem;
  color: var(--indigo-3);
}
.login-card {
  margin: 0 var(--gutter);
  padding: 22px 20px 24px;
}
.login-copy {
  margin: 6px 0 18px;
  color: var(--indigo-2);
}
.demo-hint {
  font-size: 0.86rem;
  color: var(--indigo-3);
}
.demo-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 16px;
  padding: 13px 15px;
  font-size: 0.86rem;
  color: var(--indigo-2);
  background: var(--papaya-wash);
  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 7x22 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.15rem;
  line-height: 1;
  color: var(--indigo-3);
  border-radius: 999px;
  transition: transform var(--tap), background var(--tap);
}
.nudge-dismiss:active,
.demo-notice button:active {
  transform: scale(0.9);
  background: rgba(22, 50, 79, 0.1);
}

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

/* 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;
}

/* ==========================================================================
   MANAGEMENT SCREENS - variant B
   --------------------------------------------------------------------------
   Same warmth as Caixa, carried through: soft cards on warm paper, one indigo
   panel per screen for the number that matters, and colour used to MEAN
   something - leaf for money kept, terracotta for what needs doing, papaya
   for the thing you are looking at now.
   ========================================================================== */

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

/* --------------------------------------------------------- the value card */
.metric-banner {
  margin: 0 var(--gutter);
  overflow: hidden;
  color: var(--paper);
  background: var(--indigo);
  border-radius: var(--r-lg);
  box-shadow: var(--lift);
}
.metric-periods,
.metric-tabs,
.report-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin: 10px;
  padding: 4px;
  background: rgba(11, 26, 42, 0.4);
  border-radius: 999px;
}
.metric-tabs {
  margin-top: 0;
}
.metric-periods button,
.metric-tabs button,
.report-tabs button {
  padding: 9px 6px;
  font-size: 0.86rem;
  font-weight: 700;
  color: rgba(253, 246, 238, 0.72);
  border-radius: 999px;
  transition: background var(--tap), color var(--tap);
}
.metric-periods button.is-active,
.metric-tabs button.is-active {
  color: var(--indigo);
  background: var(--papaya);
}
.report-tabs {
  margin: 0 var(--gutter) 14px;
  background: var(--paper-sunk);
}
.report-tabs button {
  color: var(--indigo-2);
}
.report-tabs button.is-active {
  color: var(--paper);
  background: var(--indigo);
}
.metric-value {
  padding: 6px 20px 18px;
}
.metric-value p {
  margin: 0;
  font-size: 0.86rem;
  color: rgba(253, 246, 238, 0.72);
}
.metric-value strong {
  display: block;
  margin: 2px 0 3px;
  font-size: 2.3rem;
  font-weight: 800;
  line-height: 1.06;
}
.metric-value strong.is-negative {
  color: #ffab8f;
}
.metric-value small {
  font-size: 0.82rem;
  color: rgba(253, 246, 238, 0.66);
}
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 20px 18px;
}
.money-chip {
  padding: 6px 12px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--paper);
  background: rgba(253, 246, 238, 0.14);
  border-radius: 999px;
}

/* ---------------------------------------------------------------- the grid */
.management-menu {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0 var(--gutter);
}
.management-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 15px 14px;
  text-align: left;
  background: var(--paper-raised);
  border-radius: var(--r-md);
  box-shadow: var(--lift);
  transition: transform var(--spring);
}
.management-card:active {
  transform: scale(0.97);
}
.management-card strong {
  font-size: 0.93rem;
  font-weight: 700;
  line-height: 1.22;
}

/* ------------------------------------------------------------- list rows */
.paper-card,
.alert-list,
.summary-list,
.stock-list,
.expense-list,
.day-sales-list,
.ranking-list,
.team-list,
.settlement-list,
.person-summary-list,
.product-list,
.report-money {
  margin: 0 var(--gutter);
  padding: 0;
  overflow: hidden;
  list-style: none;
  background: var(--paper-raised);
  border-radius: var(--r-lg);
  box-shadow: var(--lift);
}
.summary-row,
.alert-row,
.expense-row,
.result-line,
.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: 13px 16px;
  border-bottom: 1px solid var(--paper-sunk);
}
.summary-row:last-child,
.alert-row:last-child,
.expense-row:last-child,
.day-sales-list li:last-child,
.person-summary-list li:last-child,
.team-list li:last-child,
.report-money > div:last-child {
  border-bottom: 0;
}
.summary-row span,
.expense-main,
.stock-main,
.day-sale-main,
.team-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.summary-row strong,
.stock-row strong,
.expense-row strong,
.day-sale-main strong {
  font-size: 0.95rem;
  font-weight: 700;
}
.summary-row small,
.expense-main small,
.stock-main small,
.day-sale-main small,
.subtle {
  font-size: 0.8rem;
  color: var(--indigo-3);
}
.money-column {
  flex: 0 0 auto;
  font-size: 1rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
.result-line span:first-child {
  font-size: 0.94rem;
}
.result-line strong,
.report-money strong {
  font-size: 1.02rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.report-money span {
  font-size: 0.94rem;
  color: var(--indigo-2);
}
.report-money .is-total {
  color: var(--paper);
  background: var(--indigo);
}
.report-money .is-total span {
  color: rgba(253, 246, 238, 0.72);
}
.report-money .is-total strong {
  font-size: 1.26rem;
}
.report-money .is-negative,
.metric-value .is-negative {
  color: #ffab8f;
}

/* The day's result, in the same indigo card the takings live in. */
.hero-card {
  display: block;
}
.hero-meta {
  display: block;
  margin-top: 3px;
  font-size: 0.82rem;
  color: rgba(253, 246, 238, 0.68);
}
.result-lines {
  margin: 14px 0 0;
  padding-top: 4px;
  border-top: 1px solid rgba(253, 246, 238, 0.18);
}
.hero-card .result-line {
  padding: 9px 0;
  border-bottom: 1px solid rgba(253, 246, 238, 0.12);
}
.hero-card .result-line:last-child {
  border-bottom: 0;
}
.hero-card .result-line span:first-child {
  color: rgba(253, 246, 238, 0.78);
}

/* ------------------------------------------------------------ prompt cards */
.home-nudges {
  display: flex;
  flex-direction: column;
  gap: 10px;
  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: 6px 12px;
  padding: 14px 12px 14px 14px;
  background: var(--paper-raised);
  border-radius: var(--r-lg);
  box-shadow: var(--lift);
}
.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(--leaf);
  background: var(--leaf-wash);
}
.nudge-card strong {
  display: block;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.28;
}
.nudge-card p {
  margin: 3px 0 0;
  font-size: 0.84rem;
  line-height: 1.4;
  color: var(--indigo-3);
}
.nudge-link {
  grid-area: action;
  justify-self: start;
  padding: 8px 14px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--terracotta);
  background: var(--terracotta-wash);
  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: 12px;
  padding: 16px;
  border-bottom: 1px solid var(--paper-sunk);
}
.settlement-card:last-child {
  border-bottom: 0;
}
.settlement-card strong {
  display: block;
  font-size: 0.94rem;
  line-height: 1.3;
}
.settlement-card p {
  margin: 4px 0 0;
  font-size: 0.83rem;
  line-height: 1.5;
  color: var(--indigo-3);
}

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

.delivery-card {
  margin: 0 var(--gutter);
}
.delivery-head {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 14px;
}
.delivery-head h2 {
  margin: 0;
  font-size: 1.04rem;
}
.delivery-head p {
  margin: 2px 0 0;
  font-size: 0.82rem;
  color: var(--indigo-3);
}
.delivery-confirmed {
  padding: 12px;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--leaf);
  text-align: center;
  background: var(--leaf-wash);
  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) 14px;
  padding: 4px;
  background: var(--paper-sunk);
  border-radius: 999px;
}
.date-stepper button {
  display: grid;
  place-items: center;
  height: 42px;
  font-size: 1.3rem;
  font-weight: 700;
  border-radius: 999px;
  transition: background var(--tap), transform var(--tap);
}
.date-stepper button:active {
  transform: scale(0.9);
  background: rgba(22, 50, 79, 0.12);
}
.date-stepper button[disabled] {
  color: var(--indigo-3);
  opacity: 0.5;
  cursor: default;
}
.date-stepper strong {
  font-size: 0.92rem;
  font-weight: 700;
  text-align: center;
}
.report-date strong {
  font-size: 0.9rem;
}

/* -------------------------------------------------- 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: 14px var(--gutter) 0;
}
.session-actions {
  display: flex;
  flex-direction: column;
}
.button-pair {
  margin: 12px var(--gutter) 0;
}

/* ---------------------------------------------------------------- products */
.product-row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 13px 16px;
  text-align: left;
  border-bottom: 1px solid var(--paper-sunk);
  transition: background var(--tap);
}
.product-row:last-child {
  border-bottom: 0;
}
.product-row:active {
  background: var(--paper-sunk);
}
.product-row-emoji {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  font-size: 1.15rem;
  background: var(--papaya-wash);
  border-radius: 999px;
}
.product-row-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.product-row-main strong {
  font-size: 0.95rem;
  font-weight: 700;
}
/* Wraps on purpose - see CONV-144. The cost is the merchant's margin. */
.product-row-main small {
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--indigo-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: 20px;
}
.stock-category-title {
  margin: 0;
  padding: 0 var(--gutter) 8px;
  font-size: 0.86rem;
  font-weight: 800;
  color: var(--indigo-3);
}
.stock-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 13px 16px;
  text-align: left;
  border-bottom: 1px solid var(--paper-sunk);
}
.stock-list li:last-child .stock-row {
  border-bottom: 0;
}
.stock-main {
  align-items: flex-start;
}
.stock-main .status-badge {
  margin-top: 5px;
}
.stock-numbers {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
}
.stock-numbers strong {
  font-size: 1rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.stock-numbers small {
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--indigo-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: 12px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--paper-sunk);
}
.stock-count-inputs input {
  width: 100%;
  padding: 11px;
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
  background: var(--paper-sunk);
  border: 0;
  border-radius: var(--r-sm);
}
.stock-count-progress,
.stock-count-totals {
  margin: 0 var(--gutter);
  padding: 13px 16px;
  font-size: 0.88rem;
  background: var(--leaf-wash);
  border-radius: var(--r-md);
}

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

.analysis-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.analysis-card {
  margin: 0 var(--gutter);
  padding: 16px 0 6px;
  background: var(--paper-raised);
  border-radius: var(--r-lg);
  box-shadow: var(--lift);
}
.analysis-card h3 {
  margin: 0 16px 3px;
  font-size: 0.98rem;
  font-weight: 800;
}
.analysis-hint {
  margin: 0 16px 8px;
  font-size: 0.8rem;
  color: var(--indigo-3);
}
.analysis-card .empty-state {
  margin: 12px 16px 16px;
}
.ranking-list {
  margin: 0;
  box-shadow: none;
  border-radius: 0;
  background: none;
}
.ranking-list li {
  display: block;
  padding: 11px 16px;
  border-bottom: 1px solid var(--paper-sunk);
}
.ranking-list li:last-child {
  border-bottom: 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: 700;
}
.ranking-list span {
  font-size: 0.88rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.bar-track {
  position: relative;
  height: 8px;
  margin-top: 7px;
  overflow: hidden;
  background: var(--paper-sunk);
  border-radius: 999px;
}
.bar-track > span {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--papaya);
  border-radius: 999px;
}
.category-bars > div {
  padding: 11px 16px;
  border-bottom: 1px solid var(--paper-sunk);
}
.category-bars > div:last-child {
  border-bottom: 0;
}
.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) 10px;
  padding: 16px;
  text-align: left;
  background: var(--paper-raised);
  border-radius: var(--r-lg);
  box-shadow: var(--lift);
}
.profile-avatar,
.team-avatar,
.profile-pick-avatar,
.business-initial {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--paper);
  background: var(--indigo);
  border-radius: 999px;
}
.row-chevron {
  flex: 0 0 auto;
  margin-left: auto;
  color: var(--indigo-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: 16px;
}
.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.94rem;
  font-weight: 700;
  text-align: left;
  background: var(--paper-sunk);
  border-radius: var(--r-md);
  transition: transform var(--tap), background var(--tap), color var(--tap);
}
.payment-button {
  justify-content: center;
}
.payment-button:active,
.sector-choice:active {
  transform: scale(0.97);
}
.payment-button.is-active,
.sector-choice.is-active {
  color: var(--paper);
  background: var(--indigo);
}
.segmented {
  display: grid;
  grid-auto-flow: column;
  gap: 4px;
  padding: 4px;
  background: var(--paper-sunk);
  border-radius: 999px;
}
.segmented button {
  padding: 10px 8px;
  font-size: 0.9rem;
  font-weight: 700;
  border-radius: 999px;
}
.segmented button.is-active {
  color: var(--paper);
  background: var(--indigo);
}
.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.25rem;
  background: var(--paper-sunk);
  border-radius: var(--r-sm);
}
.emoji-choice.is-active {
  background: var(--papaya);
}
.business-list,
.profile-pick {
  display: flex;
  flex-direction: column;
}
.business-row,
.business-choice,
.profile-pick button {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 13px 0;
  text-align: left;
  border-bottom: 1px solid var(--paper-sunk);
}
.profile-pick span:not(.profile-pick-avatar) {
  display: flex;
  flex-direction: column;
}
.profile-pick small {
  font-size: 0.8rem;
  color: var(--indigo-3);
}
.onboarding-list {
  margin: 16px 0;
  padding: 0;
  list-style: none;
}
.onboarding-list li {
  display: flex;
  gap: 12px;
  padding: 11px 0;
}
.onboarding-list span {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  font-size: 0.84rem;
  font-weight: 800;
  color: var(--paper);
  background: var(--terracotta);
  border-radius: 999px;
}
.onboarding-list strong {
  font-size: 0.94rem;
  font-weight: 600;
  line-height: 1.4;
}

/* ------------------------------------------------------------ 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;
  border-radius: var(--r-lg);
  box-shadow: var(--lift);
}
.brand-mark-profile {
  width: 40px;
  height: 40px;
  border-radius: 12px;
}
.profile-wordmark {
  margin: 0;
  font-size: 1.24rem;
  font-weight: 800;
  letter-spacing: -0.03em;
}
.brand-tagline {
  margin: 2px 0 0;
  font-size: 0.8rem;
  color: var(--indigo-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(--indigo-3);
}
.phone-card strong {
  font-size: 1.3rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.phone-card small {
  font-size: 0.8rem;
  color: var(--indigo-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(--indigo-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(--paper-sunk);
  transition: background var(--tap);
}
.setting-switch > span::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 26px;
  height: 26px;
  background: var(--paper-raised);
  transition: transform 140ms cubic-bezier(0.34, 1.4, 0.5, 1);
}
.setting-switch input:checked + span {
  background: var(--leaf);
}
.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(--indigo-3);
}
.business-row,
.business-choice {
  padding: 13px 14px;
}
.business-list {
  margin: 0 var(--gutter);
  background: var(--paper-raised);
  border-radius: var(--r-lg);
  box-shadow: var(--lift);
}
.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(--indigo-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(--paper-sunk);
}
.demo-profile-note {
  margin: 0;
  font-size: 0.8rem;
  color: var(--indigo-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(--indigo-3);
}