/* codehub, direction D "Keycap": screens S11-S16 and P1-P5, and the b-*
   components. Built on system.css: its tokens, keycap cards, lists and
   shells. Only what these screens add lives here. Same rules: dark first,
   depth from the key stack, one filled action per view, coral only on the
   store's tile, green only for healthy activity, Geist Mono only for data.

   Tables keep every column on wide screens. On tablets (768-1279px, beside a
   208-232px sidebar) secondary columns fold under the first cell, so no
   track is clipped. On phones each row becomes two or three lines. */

/* ------------------------------------------------------------ page frame */

/* components/b-page-head.html: a line under the title, the action at the end. */
.page-head__text { display: grid; gap: var(--s2); flex: 1 1 32ch; min-width: 0; }
.page-head__text .back { margin-bottom: 0; justify-self: start; }
.page-head__title .status { align-self: center; }
.page-head__line { max-width: 62ch; color: var(--text-2); }

/* A list card's own heading row (P3 payments). */
.list__top { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); padding: var(--s4); border-bottom: 1px solid var(--line-soft); }
.list__foot--center { justify-content: center; }

/* A small label beside a name ("Default"): a graphite badge of words. */
.tag {
  display: inline-flex; align-items: center; flex-shrink: 0;
  min-height: 22px; padding: 2px var(--s2);
  border-radius: var(--r-badge);
  background: var(--raised); color: var(--text-2);
  font-size: var(--t-xs); font-weight: 500; line-height: 1.3;
}

/* The grids below would re-show list headings on phones (they set display: grid
   after system.css hides them); rows carry their own words there. */
@media (max-width: 767.98px) { .list > .list__head { display: none; } }

/* A column of numbers or times, aligned at the end. */
.payrow__end, .srow__end, .mrow__end, .mrow__time { text-align: end; }

/* ------------------------------------------------- b-filter (S11 filters) */

/* A native select drawn as an edged key. */
.filter { position: relative; display: inline-flex; flex-shrink: 0; }
.filter__select {
  appearance: none; -webkit-appearance: none;
  min-height: 40px;
  padding-block: 0; padding-inline: var(--s3) var(--s7); /* the chevron sits at the inline end */
  border: 0; border-radius: var(--r);
  background: var(--surface); color: var(--text);
  box-shadow: var(--key);
  font-size: var(--t-s); font-weight: 500;
  cursor: pointer;
  transition: box-shadow var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out);
}
@media (hover: hover) { .filter__select:hover { box-shadow: var(--key-strong); } }
.filter__select:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.filter > .lucide {
  position: absolute; inset-inline-end: var(--s3); top: 50%;
  width: 16px; height: 16px; margin-top: -8px;
  color: var(--text-2); pointer-events: none;
}
.feed-tools { min-width: 0; gap: var(--s2); }
/* Phones: the filters wrap into a grid instead of a strip that ran off the screen. */
@media (max-width: 767.98px) {
  .feed-tools { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); }
  .feed-tools .filter { display: flex; min-width: 0; }
  .feed-tools .filter__select { width: 100%; min-width: 0; text-overflow: ellipsis; }
}

/* ------------------------------------------------------- S11 activity feed */

/* Each day is a quiet heading over its own lines. */
.feed__day {
  padding: var(--s4) var(--s4) var(--s2);
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--t-s); font-weight: 500; color: var(--text-2);
}
.feed ul + .feed__day { border-top: 1px solid var(--line-soft); padding-top: var(--s5); }
.arow { grid-template-columns: 3.25rem 36px minmax(0, 1fr) auto; gap: var(--s3); min-height: 64px; }
.arow__time { font-size: var(--t-s); color: var(--text-2); }
.arow__icon {
  display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--raised); box-shadow: var(--key);
  color: var(--text-2);
}
.arow__icon .lucide { width: 16px; height: 16px; }
/* The one line that needs you: an inverted key (the words say what). */
.arow__icon.is-wait { background: var(--raised); box-shadow: var(--key-strong); color: var(--text); }
.arow__text { display: grid; gap: 2px; min-width: 0; }
.arow__text > * { overflow-wrap: break-word; }
.arow__title { font-weight: 500; }
/* A feed line that opens nothing (the app's activity has no ids): no chevron column. */
.arow--plain { grid-template-columns: 3.25rem 36px minmax(0, 1fr); }
.arow__time { white-space: nowrap; }
@media (max-width: 767.98px) {
  .arow { grid-template-columns: 2.75rem 32px minmax(0, 1fr) auto; gap: var(--s2) var(--s3); padding-inline: var(--s3); }
  .arow__icon { width: 32px; height: 32px; }
  .feed__day { padding-inline: var(--s3); }
}

/* --------------------------------------------------------- S12 inbox rows */

.mrow-grid { display: grid; grid-template-columns: minmax(0, 1fr) 150px 180px 72px; gap: var(--s4); align-items: center; }
.mrow { padding-block: var(--s4); align-items: start; }
.mrow > .mrow__account, .mrow > .mrow__status, .mrow > .mrow__time { padding-top: 2px; }
.mrow__who { display: flex; align-items: flex-start; gap: var(--s3); min-width: 0; }
.mrow__text { display: grid; gap: 2px; min-width: 0; }
.mrow__from { font-size: var(--t-s); font-weight: 500; overflow-wrap: anywhere; }
.mrow__from .is-code { font-weight: 400; margin-inline-start: var(--s1); }
.mrow__subject { overflow-wrap: anywhere; }
.mrow__account { min-width: 0; overflow-wrap: anywhere; }
.mrow__time { white-space: nowrap; }
/* The app's inbox row: account, kind, time and the Open action, before any contents open. */
.mrow-grid--meta { grid-template-columns: minmax(0, 1fr) minmax(9rem, 14rem) 7.5rem 9rem; }
.mrow__action { position: relative; z-index: 2; display: flex; justify-content: flex-end; }
.mrow__action form { display: contents; }
/* An opened message: escaped plain text in its own part of the card. */
.mail-meta { display: grid; gap: var(--s2); margin: 0; }
.mail-meta > div { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: var(--s3); }
.mail-meta dt { color: var(--text-2); font-size: var(--t-s); }
.mail-meta dd { margin: 0; overflow-wrap: anywhere; }
.mail-body { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; line-height: 1.7; }
/* The mail that needs action, opened in place: an edged key with its next step. */
.mrow__open {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s3) var(--s4);
  margin-inline-start: 48px;
  padding: var(--s3) var(--s3) var(--s3) var(--s4);
  border-radius: var(--r);
  background: var(--surface);
  box-shadow: var(--key-strong);
  font-size: var(--t-s);
}
.mrow__open p { flex: 1 1 30ch; min-width: 0; }
.mrow__open .btn { position: relative; z-index: 2; }
/* Tablets: the account folds under the sender, beside the status. */
@media (min-width: 768px) and (max-width: 1279.98px) {
  .mrow-grid {
    grid-template-columns: minmax(0, 1fr) auto 4.5rem;
    grid-template-areas: "who status time" "acct status time";
    gap: var(--s1) var(--s4);
  }
  .mrow-grid > :nth-child(1) { grid-area: who; }
  .mrow-grid > :nth-child(2) { grid-area: acct; }
  .mrow-grid > :nth-child(3) { grid-area: status; }
  .mrow-grid > :nth-child(4) { grid-area: time; }
  .list__head.mrow-grid > :nth-child(2) { display: none; }
  .mrow > .mrow__account { padding: 0 0 0 48px; color: var(--text-2); }
  [dir="rtl"] .mrow > .mrow__account { padding: 0 48px 0 0; }
  .mrow .row__chev { display: none; }
  .mrow__from .is-code { display: block; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mrow__open { grid-area: auto; grid-row: 3; grid-column: 1 / -1; margin-top: var(--s2); }
}
@media (max-width: 767.98px) {
  .mrow {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "who who" "status time" "open open";
    gap: var(--s2) var(--s3);
  }
  .mrow__who { grid-area: who; }
  .mrow__time { grid-area: time; }
  .mrow__status { grid-area: status; padding-inline-start: 48px; }
  .mrow__account { display: none; }
  .mrow__open { grid-area: open; margin: var(--s1) 0 0; }
  .mrow .row__chev { display: none; }
}

/* The app's inbox rows (.mrow-grid--meta): four columns from 1280px and on tablets
   beside the sidebar from 1024px; below that, two lines like the phone rows. */
.mrow-grid--meta > :nth-child(1) { grid-area: who; }
.mrow-grid--meta > :nth-child(2) { grid-area: status; }
.mrow-grid--meta > :nth-child(3) { grid-area: time; }
.mrow-grid--meta > :nth-child(4) { grid-area: action; }
.mrow-grid--meta { grid-template-areas: "who status time action"; }
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .mrow-grid--meta { grid-template-columns: minmax(0, 1fr) minmax(8rem, 12rem) 7.5rem 9rem; gap: var(--s4); }
  .list__head.mrow-grid--meta > :nth-child(2) { display: block; }
}
@media (max-width: 1023.98px) {
  .list > .list__head.mrow-grid--meta { display: none; }
  .mrow.mrow-grid--meta { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "who who" "status time" "action action"; gap: var(--s2) var(--s3); }
  .mrow-grid--meta > .mrow__status, .mrow-grid--meta > .mrow__action { padding-inline-start: 48px; }
  .mrow-grid--meta > .mrow__action { justify-content: flex-start; }
}

/* --------------------------------------------- S13 customer page look */

/* The store's colours are Keycap tokens (--brand and --tile-*, system.css). The pick
   fills only the logo tiles inside this screen, resolved in each tile's own theme (the
   preview phone may wear the other one); the sidebar keeps coral and buttons stay
   neutral. */
.look:has(.swatch--coral input:checked) .badge  { background: var(--brand); }
.look:has(.swatch--blue input:checked) .badge   { background: var(--tile-blue); }
.look:has(.swatch--teal input:checked) .badge   { background: var(--tile-teal); }
.look:has(.swatch--green input:checked) .badge  { background: var(--tile-green); }
.look:has(.swatch--purple input:checked) .badge { background: var(--tile-purple); }
.look:has(.swatch--orange input:checked) .badge { background: var(--tile-orange); }
.look .badge { transition: background-color var(--t-med) var(--ease-out); }

.look { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s6); align-items: start; }
@media (min-width: 1100px) {
  .look { grid-template-columns: minmax(0, 1fr) auto; }
  .look__preview { position: sticky; top: var(--s6); }
}
@media (min-width: 1440px) {
  .look { grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); }
}
.look__hints { display: grid; gap: var(--s5); padding-top: var(--s5); border-top: 1px solid var(--line-soft); }
@media (max-width: 767.98px) {
  .look__form .form-actions { grid-template-columns: minmax(0, 1fr); }
}

.logo-pick { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4); }
.logo-pick__badge { width: 56px; height: 56px; font-size: var(--t-m); }
.logo-pick__upload:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }

/* The colour: real radios drawn as small keys. The picked one gets a 2px
   ring in the text colour and a check. */
.swatches { display: flex; flex-wrap: wrap; gap: var(--s1); margin-top: var(--s1); margin-inline-start: -6px; }
.swatch { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; }
.swatch input { position: absolute; inset: 0; z-index: 1; margin: 0; opacity: 0; cursor: pointer; }
.swatch__face {
  position: relative;
  display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: var(--r);
  box-shadow: var(--key);
  color: var(--on-brand);
  transition: transform var(--t-fast) var(--ease-out);
}
.swatch__face::after {
  content: ""; position: absolute; inset: -4px;
  border: 2px solid transparent; border-radius: calc(var(--r) + 4px);
  transition: border-color var(--t-fast) var(--ease-out);
}
.swatch--coral  .swatch__face { background: var(--brand); }
.swatch--blue   .swatch__face { background: var(--tile-blue); }
.swatch--teal   .swatch__face { background: var(--tile-teal); }
.swatch--green  .swatch__face { background: var(--tile-green); }
.swatch--purple .swatch__face { background: var(--tile-purple); }
.swatch--orange .swatch__face { background: var(--tile-orange); }
.swatch__face .lucide { width: 16px; height: 16px; stroke-width: 2.25; opacity: 0; transition: opacity var(--t-fast) var(--ease-out); }
@media (hover: hover) { .swatch:hover .swatch__face::after { border-color: var(--line); } }
.swatch input:checked + .swatch__face::after { border-color: var(--text); }
.swatch input:checked + .swatch__face .lucide { opacity: 1; }
.swatch input:focus-visible + .swatch__face { outline: 2px solid var(--focus); outline-offset: 6px; }
.swatch:active .swatch__face { transform: translateY(1px); box-shadow: var(--key-pressed); }

/* The preview: the real customer page at 390px, scaled into a phone drawn as
   a key. Only its logo tile takes the pick; its buttons stay neutral. */
.look__preview { display: grid; gap: var(--s4); justify-items: center; min-width: 0; }
.look__label { justify-self: stretch; display: grid; gap: 2px; }
.phone {
  --scale: 0.78;
  padding: var(--s2);
  border-radius: calc(var(--r) * 5);
  background: var(--surface);
  box-shadow: var(--key-strong);
}
.phone__screen {
  width: calc(390px * var(--scale));
  height: calc(844px * var(--scale));
  overflow: hidden;
  border-radius: calc(var(--r) * 4);
  background: var(--canvas);
  box-shadow: inset 0 0 0 1px var(--line-soft);
  user-select: none;
}
.phone__page { width: 390px; zoom: var(--scale); }
.phone .cust { padding-top: 0; }
/* The phone may wear its own theme (data-theme): text re-reads its colour there. */
.phone__screen { color: var(--text); }
.look__sample { padding: var(--s5) var(--s4); }

/* ---------------------------------------------------------- S14 plans */

.prow-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1.1fr) 170px; gap: var(--s4); align-items: center; }
.prow__name { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); min-width: 0; }
.prow__codes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s3); min-width: 0; font-size: var(--t-s); }
/* The length's words get a fixed column so every row's track starts at the same place;
   wide enough for the app's "Works for 30 days". */
.prow__length { display: grid; grid-template-columns: minmax(0, 1fr) 9.5rem; align-items: center; gap: var(--s3); min-width: 0; }
.prow__length > .num { font-size: var(--t-s); }
.prow__rule { display: grid; gap: 2px; min-width: 0; }
/* Tablets: "Used by" folds under the plan's name. */
@media (min-width: 768px) and (max-width: 1279.98px) {
  .prow-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto;
    grid-template-areas: "name codes length chev" "used codes length chev";
    gap: 2px var(--s4);
  }
  .prow-grid > :nth-child(1) { grid-area: name; }
  .prow-grid > :nth-child(2) { grid-area: codes; }
  .prow-grid > :nth-child(3) { grid-area: length; }
  .prow-grid > :nth-child(4) { grid-area: used; }
  .prow .row__chev { grid-area: chev; }
  .list__head.prow-grid > :nth-child(4) { display: none; }
}
/* Phones: one line each for the name, the codes and their rule, how long the link works
   and who uses it, so the length is never squeezed beside the codes. */
@media (max-width: 767.98px) {
  .prow {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "name chev" "codes chev" "length chev" "used chev";
    gap: var(--s1) var(--s3);
  }
  .prow__name { grid-area: name; }
  .prow__codes { grid-area: codes; }
  .prow__length { grid-area: length; display: block; color: var(--text-2); }
  .prow__length .track { display: none; }
  .prow__used { grid-area: used; }
  .prow .row__chev { grid-area: chev; }
}

/* A list card's page keys (Previous, Next) beside "Showing 1 to 25 of 84". */
.list__pages { display: flex; flex-wrap: wrap; gap: var(--s2); }

/* ----------------------------------------------------------- S15 team */

.trow-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) 100px 190px minmax(0, 1fr); gap: var(--s4); align-items: center; }
.trow__who { display: flex; align-items: center; gap: var(--s3); min-width: 0; }
.trow__name { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; }
.trow__name .small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trow__role { font-size: var(--t-s); }
/* Tablets: role and last active fold under the name (the phone line shows). */
@media (min-width: 768px) and (max-width: 1279.98px) {
  .trow-grid { grid-template-columns: minmax(0, 1fr) auto auto; }
  .trow-grid > :nth-child(2), .trow-grid > :nth-child(4) { display: none; }
  .trow__name .only-narrow { display: block !important; }
}
@media (max-width: 767.98px) {
  .trow {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "who chev" "status chev";
    gap: var(--s1) var(--s3);
  }
  .trow__who { grid-area: who; }
  .trow__status { grid-area: status; padding-inline-start: 48px; }
  .trow__role, .trow__last { display: none; }
  .trow .row__chev { grid-area: chev; }
}

/* b-switch: a real checkbox drawn as a switch. On is a raised key with a full-ink
   thumb at the far end; off is a recessed track on a 1px edge. Never a fill. */
.staff-rules { display: grid; gap: var(--s2); }
.staff-rules__list { display: grid; margin-top: var(--s2); }
.switch-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  min-height: 64px; padding: var(--s3) 0;
  cursor: pointer;
}
.switch-row + .switch-row { border-top: 1px solid var(--line-soft); }
.switch-row__text { display: grid; gap: 2px; min-width: 0; }
.switch {
  appearance: none; -webkit-appearance: none;
  position: relative; flex-shrink: 0;
  width: 44px; height: 26px; margin: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--recessed);
  box-shadow: inset 0 0 0 1px var(--line);
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
.switch::before {
  content: ""; position: absolute; top: 3px; inset-inline-start: 3px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--text-2);
  transition: transform var(--t-med) var(--ease-out), background-color var(--t-fast) var(--ease-out);
}
.switch:checked { background: var(--raised); box-shadow: var(--key-strong), inset 0 0 0 1px var(--text); }
.switch:checked::before { transform: translateX(18px); background: var(--text); }
.switch:checked:dir(rtl)::before { transform: translateX(-18px); }
.switch:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-pill); }
@media (hover: hover) {
  .switch-row:hover .switch:not(:checked) { box-shadow: inset 0 0 0 1px var(--mark); }
  .switch-row:hover .switch:checked { background: var(--recessed); }
}

/* ----------------------------------------- b-once-link (S15, P2) */

/* A link shown once settles in like the customer's code: the one authored arrival. */
/* One shrinkable column: a long email or link wraps inside the card instead of widening it. */
.once { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s5); animation: once-in 420ms var(--ease-out) both; }
@keyframes once-in { from { opacity: 0; transform: translateY(6px); filter: blur(3px); } }
.once__intro { display: grid; gap: var(--s1); }
.once__intro .muted { max-width: 62ch; }
.once__title { font-size: var(--t-xl); font-weight: 500; overflow-wrap: anywhere; }
.once__who {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s4);
  border-radius: var(--r);
  background: var(--recessed);
}
.once__whotext { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; }
.once__name { font-weight: 500; }
.once__whotext .small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.once__tag { display: inline-flex; align-items: center; gap: var(--s1); flex-shrink: 0; color: var(--text-2); }
.once__tag .lucide { width: 16px; height: 16px; }
.once__actions { display: flex; flex-wrap: wrap; gap: var(--s2); }
.once__note { margin-top: calc(var(--s3) * -1); }
.once__more { margin: calc(var(--s2) * -1) 0 0 calc(var(--s3) * -1); }
[dir="rtl"] .once__more { margin: calc(var(--s2) * -1) calc(var(--s3) * -1) 0 0; }
@media (max-width: 767.98px) {
  .once__actions .btn { flex: 1 1 100%; }
  .once__tag { display: none; }
}

/* ------------------------------------------------------ S16 first day */

/* Goal gradient: the meter starts with step one already drawn in, step one
   is a raised key holding the filled action, and steps two and three sit
   quieter on the card, so the way to "done" reads as begun. */
.setup { display: grid; gap: var(--s4); }
.setup__progress {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s4);
  padding-bottom: var(--s4);
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--t-s); color: var(--text-2);
}
.setup__progress .dots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s1); --seg: auto; --seg-h: 4px; }
.setup__progress .dots i { width: auto; position: relative; overflow: hidden; }
/* The ready step: a third of its segment drawn in. */
.setup__progress .dots i:first-child::after {
  content: ""; position: absolute; inset-block: 0; inset-inline-start: 0;
  width: 34%; background: var(--text);
}
.steps { display: grid; gap: var(--s2); }
.step { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--s4); padding: var(--s4); border-radius: var(--r); }
/* A thread from one step's mark to the next. */
.step:not(:last-child)::after {
  content: ""; position: absolute;
  inset-inline-start: calc(var(--s4) + 15px);
  top: calc(var(--s4) + 32px + var(--s2));
  bottom: calc(var(--s4) * -1);
  width: 2px; border-radius: 1px;
  background: var(--line-soft);
}
.step.is-current { background: var(--surface); box-shadow: var(--key-strong); }
.step.is-current::after { background: linear-gradient(var(--text-2), var(--line-soft)); }
.step__mark {
  display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--recessed);
  color: var(--text-2);
  font-size: var(--t-s); font-weight: 500;
}
.step.is-current .step__mark { background: var(--raised); box-shadow: var(--key-strong), inset 0 0 0 1px var(--text); color: var(--text); }
.step:not(.is-current):not(.is-locked) .step__mark { box-shadow: var(--key); }
.step__body { display: grid; gap: var(--s1); padding-top: 4px; min-width: 0; }
.step__title { font-size: var(--t-l); font-weight: 500; }
.step.is-locked .step__title { color: var(--text-2); }
.step__text { color: var(--text-2); font-size: var(--t-s); }
.step__action { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); margin-top: var(--s3); }
.step__wait { display: inline-flex; align-items: center; gap: var(--s1); font-size: var(--t-s); color: var(--text-2); }
.step__wait .lucide { width: 16px; height: 16px; }
@media (max-width: 767.98px) {
  .setup.card { padding: var(--s4); }
  .step { padding: var(--s3); gap: var(--s3); }
  .step:not(:last-child)::after { inset-inline-start: calc(var(--s3) + 15px); top: calc(var(--s3) + 32px + var(--s2)); bottom: calc(var(--s3) * -1); }
}

/* ===================================================== platform admin */

/* ------------------------------------------------------------ P1 stores */

.srow-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) 150px minmax(0, 1fr) minmax(0, 1.25fr) 92px 128px; gap: var(--s4); align-items: center; }
.srow__who { display: flex; align-items: center; gap: var(--s3); min-width: 0; }
.srow__name { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; }
.srow__name .row__link, .srow__name .small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.srow__name .srow__fold { white-space: normal; }
/* An email under the name keeps its own direction, sits at the row's start like the name
   and loses its end, not its user name, when it does not fit. */
.srow__name [dir="ltr"] { text-align: end; }
.srow__fold { display: none; }
.srow__plan { display: grid; min-width: 0; font-size: var(--t-s); }
.srow__paid { display: grid; gap: var(--s2); min-width: 0; }
.srow__end { font-size: var(--t-s); }
.srow.is-stopped .mono { background: transparent; box-shadow: inset 0 0 0 1px var(--line); color: var(--text-2); }
.srow.is-stopped .row__link, .srow.is-stopped .srow__paid .small, .srow.is-stopped .srow__codes { color: var(--text-2); }
/* The overdue store sits in a recessed well on a brighter edge; its inverted badge says why. */
.srow.is-due { background: var(--recessed); box-shadow: inset 0 0 0 1px var(--line); }
/* Tablets: last payment folds under paid-until, the two counts under the owner. */
@media (min-width: 768px) and (max-width: 1279.98px) {
  .srow-grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto auto;
    grid-template-areas: "who paid status chev" "who plan status chev";
    gap: var(--s1) var(--s4);
  }
  .srow-grid > :nth-child(1) { grid-area: who; }
  .srow-grid > :nth-child(2) { grid-area: status; }
  .srow-grid > :nth-child(3) { grid-area: plan; }
  .srow-grid > :nth-child(4) { grid-area: paid; }
  .srow-grid > :nth-child(5), .srow-grid > :nth-child(6) { display: none; }
  .list__head.srow-grid > :nth-child(3) { display: none; }
  .srow .row__chev { grid-area: chev; }
  .srow { padding-block: var(--s3); }
  .srow__fold { display: block; }
  .srow__plan { display: flex; flex-wrap: wrap; gap: 0 var(--s1); color: var(--text-2); }
  .srow__plan .small::before { content: "· "; }
}
@media (max-width: 767.98px) {
  .srow {
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas: "who status chev" "paid paid chev";
    gap: var(--s1) var(--s3);
  }
  .srow__who { grid-area: who; }
  .srow__status { grid-area: status; }
  .srow__paid { grid-area: paid; display: block; padding-inline-start: 52px; color: var(--text-2); }
  .srow__paid .track { display: none; }
  .srow__plan, .srow__end { display: none; }
  .srow .row__chev { grid-area: chev; }
}

/* ------------------------------------------------------------- P3 store */

.store-top { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); align-items: start; }
@media (min-width: 1280px) { .store-top { grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); align-items: stretch; } }

.facts__list { display: grid; margin: 0; }
.facts__row { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: var(--s3); align-items: baseline; padding: var(--s3) 0; }
.facts__row:first-child { padding-top: 0; }
.facts__row:last-child { padding-bottom: 0; }
.facts__row + .facts__row { border-top: 1px solid var(--line-soft); }
.facts dt { font-size: var(--t-s); color: var(--text-2); }
.facts dd { display: grid; margin: 0; min-width: 0; }
/* A figure wider than its cell (an amount near the limit on a phone) breaks rather than
   running past the card; a figure that fits never breaks. */
.facts dd > * { min-width: 0; }
.facts dd.num, .facts dd .num { overflow-wrap: anywhere; }
.facts__row--paid { align-items: center; }
.facts__row--paid dd { padding-top: var(--s2); }

/* Codes per day: thin green bars on soft gridlines, quiet labels, today's
   value in the text colour. */
.usage { display: grid; gap: var(--s4); align-content: start; min-width: 0; }
.usage__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s1) var(--s4); }
.bars { --max: 80; margin: 0; }
.bars__plot { position: relative; height: 220px; margin: var(--s6) 0 var(--s7) 2rem; }
[dir="rtl"] .bars__plot { margin: var(--s6) 2rem var(--s7) 0; }
.bars__grid li { position: absolute; inset-inline: 0; bottom: calc(var(--y) / var(--max) * 100%); height: 0; }
.bars__grid li::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 1px; background: var(--line-soft); }
.bars__grid li:last-child::before { background: var(--line); }
.bars__grid span {
  position: absolute; inset-inline-end: calc(100% + var(--s2)); top: -0.65em;
  font-size: var(--t-xs); line-height: 1.2; color: var(--text-2);
}
.bars__cols { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); }
.bars__col { position: relative; display: flex; align-items: flex-end; justify-content: center; height: 100%; }
.bars__bar {
  position: relative;
  width: min(6px, 40%);
  height: calc(var(--v) / var(--max) * 100%);
  border-radius: 2px 2px 0 0;
  background: var(--text-2);
  transition: opacity var(--t-fast) var(--ease-out);
}
.bars__value {
  position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
  padding-bottom: var(--s1);
  font-size: var(--t-s); font-weight: 500; color: var(--text);
  transition: opacity var(--t-fast) var(--ease-out);
}
.bars__day {
  position: absolute; top: calc(100% + var(--s2)); left: 50%; transform: translateX(-50%);
  white-space: nowrap; font-size: var(--t-xs); color: var(--text-2);
  visibility: hidden;
}
.bars__day.is-shown { visibility: visible; }
.bars__col:first-child .bars__day { inset-inline-start: 0; left: auto; transform: none; }
.bars__col:last-child .bars__day { left: auto; inset-inline-end: 0; transform: none; color: var(--text); font-weight: 500; }
.bars__tip {
  position: absolute; z-index: 2;
  bottom: calc(var(--v) / var(--max) * 100% + 8px); left: 50%;
  padding: 3px var(--s2); border-radius: var(--r-badge);
  background: var(--raised); box-shadow: var(--key); color: var(--text);
  font-size: var(--t-xs); font-weight: 500; white-space: nowrap;
  opacity: 0; transform: translate(-50%, 4px);
  pointer-events: none;
  transition: opacity var(--t-fast) var(--ease-out), transform var(--t-med) var(--ease-out);
}
.bars__col:first-child .bars__tip { inset-inline-start: 0; left: auto; transform: translate(0, 4px); }
.bars__col:last-child .bars__tip { left: auto; inset-inline-end: 0; transform: translate(0, 4px); }
@media (hover: hover) {
  .bars__cols:hover .bars__bar { opacity: 0.45; }
  .bars__cols:hover .bars__col:hover .bars__bar { opacity: 1; }
  .bars__col:hover .bars__tip { opacity: 1; transform: translate(-50%, 0); }
  .bars__col:first-child:hover .bars__tip, .bars__col:last-child:hover .bars__tip { transform: none; }
  .bars__col.is-today:hover .bars__value { opacity: 0; }
}

/* ---------------------------------------------------------- P4 payments */

/* The month so far: one line on the canvas above the table, two entries
   split by a soft rule. Not cards. */
.pay-sum { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--s3) var(--s6); }
.pay-sum__item { display: grid; gap: var(--s1); align-content: start; min-width: 0; }
.pay-sum__item + .pay-sum__item { padding-inline-start: var(--s6); border-inline-start: 1px solid var(--line-soft); }
.pay-sum__label { font-size: var(--t-s); font-weight: 400; color: var(--text-2); line-height: 1.4; }
.pay-sum__value { display: flex; flex-wrap: wrap; gap: 0 var(--s4); font-size: var(--t-xl); font-weight: 500; line-height: 1.3; }
@media (max-width: 559.98px) {
  .pay-sum { display: grid; gap: var(--s3); }
  .pay-sum__item + .pay-sum__item { padding: var(--s3) 0 0; border-inline-start: 0; border-top: 1px solid var(--line-soft); }
}

/* The amount column is 140px; a very large amount widens its own row's column rather than
   running into the method (an amount never breaks inside). */
.payrow-grid { display: grid; grid-template-columns: 64px minmax(0, 1.3fr) minmax(140px, max-content) minmax(0, 1fr) minmax(0, 1fr) 96px minmax(0, 1.1fr); gap: var(--s4); align-items: center; }
.payrow-grid--one { grid-template-columns: 64px minmax(140px, max-content) minmax(0, 1fr) minmax(0, 1fr) 96px minmax(0, 1.2fr); }
.payrow { min-height: 56px; }
.payrow > * { min-width: 0; overflow-wrap: anywhere; }
.payrow__date { color: var(--text-2); font-size: var(--t-s); }
.payrow__amount { font-weight: 500; }
/* An amount and its currency code read as one value, never broken inside. */
.payrow > .payrow__amount { overflow-wrap: normal; white-space: nowrap; }
@media (min-width: 1280px) { .payrow__end { padding-inline-end: var(--s5); } }
.payrow__method, .payrow__covers { font-size: var(--t-s); }
/* Tablets: method, recorded-by and note fold into a second line. */
@media (min-width: 768px) and (max-width: 1279.98px) {
  .payrow-grid {
    grid-template-columns: 4rem minmax(0, 1.2fr) auto minmax(0, 1fr) auto;
    grid-template-areas: "date store amount covers chev" "date method by note chev";
    gap: 2px var(--s4);
  }
  .payrow-grid > :nth-child(1) { grid-area: date; }
  .payrow-grid > :nth-child(2) { grid-area: store; }
  .payrow-grid > :nth-child(3) { grid-area: amount; }
  .payrow-grid > :nth-child(4) { grid-area: method; }
  .payrow-grid > :nth-child(5) { grid-area: covers; }
  .payrow-grid > :nth-child(6) { grid-area: by; }
  .payrow-grid > :nth-child(7) { grid-area: note; }
  .payrow-grid--one {
    grid-template-columns: 4rem auto minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "date amount method covers" "date by note note";
  }
  .payrow-grid--one > :nth-child(2) { grid-area: amount; }
  .payrow-grid--one > :nth-child(3) { grid-area: method; }
  .payrow-grid--one > :nth-child(4) { grid-area: covers; }
  .payrow-grid--one > :nth-child(5) { grid-area: by; }
  .payrow-grid--one > :nth-child(6) { grid-area: note; }
  .list__head.payrow-grid > :nth-child(n+4) { display: none; }
  .list__head.payrow-grid > :nth-child(5) { display: block; }
  .list__head.payrow-grid--one > :nth-child(n+3) { display: block; }
  .list__head.payrow-grid--one > :nth-child(n+5) { display: none; }
  .payrow { padding-block: var(--s3); }
  .payrow .row__chev { grid-area: chev; }
  .payrow-grid:not(.payrow-grid--one) .payrow__method { color: var(--text-2); }
  .payrow__end { text-align: end; }
  .payrow-grid--one .payrow__end { text-align: start; }
}
@media (max-width: 767.98px) {
  .payrow {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    grid-template-areas: "store store amount chev" "date method covers chev";
    gap: var(--s1) var(--s3);
  }
  .payrow-grid--one { grid-template-areas: "date date amount chev" "method method covers chev"; }
  .payrow__store { grid-area: store; }
  .payrow__amount { grid-area: amount; }
  .payrow__date { grid-area: date; }
  .payrow__method { grid-area: method; color: var(--text-2); }
  .payrow-grid--one .payrow__date { color: var(--text); font-size: var(--t-m); }
  .payrow__covers { grid-area: covers; text-align: end; color: var(--text-2); }
  .payrow__by, .payrow__note { display: none; }
  .payrow .row__chev { grid-area: chev; }
}

/* ------------------------------------------------------ P5 record payment */

.pair { display: grid; gap: var(--s4); }
.pair > * { min-width: 0; }
@media (min-width: 560px) {
  .pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pair--amount { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
}
/* What saving does: a recessed well, the new date in the text colour, the old one quiet. */
.pay-result {
  display: flex; align-items: flex-start; gap: var(--s3);
  padding: var(--s3) var(--s4);
  border-radius: var(--r);
  background: var(--recessed);
  font-size: var(--t-s);
}
.pay-result .lucide { width: 16px; height: 16px; margin-top: 2px; color: var(--text-2); }

/* ---------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
  .once { animation: fade 150ms ease-out both; }
  .switch::before, .swatch__face, .swatch__face::after, .swatch__face .lucide, .look .badge { transition: none; }
  .swatch:active .swatch__face { transform: none; }
  .bars__tip { transition: opacity 140ms ease-out; transform: translate(-50%, 0); }
}

/* Today's bar in full ink; the rest stay quiet. Green is reserved for the Working dot. */
.bars__col.is-today .bars__bar { background: var(--text); }

.a-bubble { overflow-wrap: anywhere; }
/* The link inside a message: its own left-to-right box in the mono face, without
   contextual alternates (Inter's calt draws the x in "2x3" as a times sign), so it
   wraps inside itself and a trailing "/" never jumps to the other end of the line. */
.a-bubble__link { display: inline-block; max-inline-size: 100%; font-family: var(--mono); font-size: 0.92em; font-feature-settings: "calt" 0, "liga" 0; overflow-wrap: anywhere; }
.pay-sum__value > span { direction: ltr; unicode-bidi: isolate; }