/* =============================================================
   mirrorBill — styles

   Palette from the brand sheet:
     Ink Violet  #251826    Mirror Rose #E0567A
     Brass       #D9A441    Paper       #FAF6F3

   The older variable names are kept, pointing at their
   replacements, so every screen written against --plum and
   --gold follows along without being rewritten.
   ============================================================= */
:root {
  --ink: #251826;
  --ink-2: #4a3b4d;
  --muted: #8a7d8c;
  --line: #e7dfe4;
  --bg: #faf6f3;
  --card: #ffffff;
  --gold: #d9a441;
  --plum: #251826;
  --plum-2: #4a2f4d;
  --rose: #e0567a;
  --paper: #faf6f3;
  --ok: #1f9d63;
  --danger: #d33b4a;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(37, 24, 38, .05), 0 8px 24px rgba(37, 24, 38, .07);
}

* { box-sizing: border-box; }

html, body {
  margin: 0; height: 100%;
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font: inherit; color: inherit; }

/* ---------------- layout ---------------- */
.app { display: flex; height: 100vh; overflow: hidden; }

.sidebar {
  width: 232px; flex: 0 0 232px;
  background: linear-gradient(170deg, #2e1f30 0%, var(--plum) 100%);
  color: #efeaf5;
  display: flex; flex-direction: column;
  padding: 18px 14px;
}

.brand { display: flex; gap: 12px; align-items: center; padding: 4px 6px 20px; }
.brand-slot { display: flex; align-items: center; color: var(--paper, #faf6f3); }
.brand-name {
  margin: 0; font-size: 16px; letter-spacing: .2px; font-weight: 700;
  line-height: 1.25; word-break: break-word;
}
.brand-tag { font-size: 11px; opacity: .62; letter-spacing: 1.4px; }

.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-item {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 12px; border: 0; border-radius: 10px;
  background: transparent; color: #d9d0e6; cursor: pointer;
  font-size: 14.5px; text-align: left; transition: background .12s, color .12s;
}
.nav-item:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.nav-item.active { background: rgba(255, 255, 255, .14); color: #fff; font-weight: 600; }
.nav-icon {
  width: 21px; height: 21px; flex: 0 0 21px;
  display: grid; place-items: center;
}
/* Drawn, not typed. currentColor means an icon is whatever colour its
   row is, so hover and active already work without any icon rules. */
.icon { display: block; }
/* The active row's icon carries the accent while its label stays white —
   enough to find the current screen at a glance without the row
   shouting. */
.nav-item.active .nav-icon { color: var(--rose); }
.nav-item .nav-icon { opacity: .82; transition: opacity .12s, color .12s; }
.nav-item:hover .nav-icon, .nav-item.active .nav-icon { opacity: 1; }

/* A chip that carries an icon needs to lay out as a row rather than as
   a line of text. */
.chip.has-icon { display: inline-flex; align-items: center; gap: 7px; }

.today-chip {
  margin-top: auto; padding: 13px 14px; border-radius: 12px;
  background: rgba(255, 255, 255, .1); display: flex; flex-direction: column; gap: 1px;
}
.today-chip .tc-label { font-size: 11px; text-transform: uppercase; letter-spacing: 1.2px; opacity: .7; }
.today-chip strong { font-size: 21px; color: #fff; }
.today-chip .tc-sub { font-size: 11.5px; opacity: .65; }

.side-foot {
  padding-top: 12px; display: flex; flex-direction: column;
  align-items: flex-start; gap: 8px;
}
.link-btn {
  background: none; border: 0; color: #bcaed0; font-size: 12px;
  cursor: pointer; text-decoration: underline; padding: 2px;
}
.link-btn:hover { color: #fff; }

/* Whose account this is. On a shop handset that three people share it is
   the first thing anybody needs to know, and it is what makes the button
   under it safe to press. */
.who-chip {
  width: 100%; padding: 8px 10px; border-radius: 10px;
  background: rgba(255, 255, 255, .07); line-height: 1.35;
}
.who-role {
  display: block; font-size: 10.5px; letter-spacing: .09em;
  text-transform: uppercase; color: #cbb8dd; font-weight: 600;
}
.who-mail {
  display: block; font-size: 12px; color: #efeaf5;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* A real button, not a footnote. The people who need it most — a stylist
   or a receptionist handing the phone back — are the ones least likely
   to go hunting for underlined grey text. */
.link-btn.sign-out {
  width: 100%; padding: 9px 10px; border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .22);
  color: #efeaf5; font-size: 13px; font-weight: 600;
  text-decoration: none; text-align: center;
}
.link-btn.sign-out:hover { background: rgba(255, 255, 255, .12); color: #fff; }

.main { flex: 1; overflow: auto; }
#screen { padding: 22px 26px 40px; min-height: 100%; }

/* ---------------- generic bits ---------------- */
.screen-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 16px; flex-wrap: wrap; margin-bottom: 16px;
}
.screen-head h1 { margin: 0 0 3px; font-size: 25px; letter-spacing: -.3px; }
.sub { margin: 0; color: var(--muted); font-size: 13.5px; }
.head-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.card {
  background: var(--card); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 16px 18px; margin-bottom: 16px;
}
.card-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 12px; margin-bottom: 12px;
}
.card-head h3 { margin: 0; font-size: 15.5px; }
.card-head p { margin: 3px 0 0; }

.muted { color: var(--muted); }
.small { font-size: 12.5px; }
.mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11px; word-break: break-all; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.strong { font-weight: 700; }
.empty { color: var(--muted); font-size: 13.5px; padding: 14px 2px; margin: 0; }
.empty.big { padding: 40px; text-align: center; font-size: 15px; }
.spacer { flex: 1; }

.badge {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 20px;
  font-size: 10.5px; background: #f2ecfa; color: var(--plum-2);
  text-transform: uppercase; letter-spacing: .6px; font-weight: 700;
}
.badge.grey { background: #eee; color: #888; }
/* Whether an employee's login email has been proved to reach them.
   Amber rather than red: an unconfirmed address is a thing to look at,
   not a fault — the card still works either way. */
.badge.ok { background: #e6f4ec; color: #1c6b46; }
.badge.warn { background: #fdf0e3; color: #9a5b18; }
.trophy { color: var(--gold); font-size: 17px; }

/* ---------------- buttons ---------------- */
.btn {
  border: 1px solid transparent; border-radius: 10px; padding: 9px 15px;
  background: #ece7f4; color: var(--ink-2); cursor: pointer;
  font-size: 14px; font-weight: 600; transition: filter .12s, background .12s;
  white-space: nowrap;
}
.btn:hover { filter: brightness(.96); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: linear-gradient(140deg, var(--plum-2), var(--plum)); color: #fff; }
.btn.ghost { background: #fff; border-color: var(--line); }
.btn.ghost:hover { background: #faf8fd; }
.btn.danger { background: var(--danger); color: #fff; }
.btn.danger-ghost { background: #fff; border-color: #f0d2d5; color: var(--danger); }
.btn.big { padding: 13px 18px; font-size: 15.5px; }
.btn.small { padding: 6px 11px; font-size: 13px; }
.btn.tiny { padding: 4px 9px; font-size: 12px; border-radius: 8px; margin-left: 4px; }
.btn-row { display: flex; gap: 9px; flex-wrap: wrap; }

.icon-btn {
  border: 0; background: transparent; cursor: pointer; font-size: 20px;
  line-height: 1; color: var(--muted); padding: 2px 6px; border-radius: 7px;
}
.icon-btn:hover { background: #f1edf7; color: var(--ink); }
.icon-btn.danger:hover { background: #fdecee; color: var(--danger); }

/* segmented tabs / chips */
.section-tabs {
  display: flex; gap: 7px; flex-wrap: wrap; align-items: center; margin-bottom: 14px;
}
.seg {
  border: 1px solid var(--line); background: #fff; border-radius: 999px;
  padding: 8px 16px; cursor: pointer; font-size: 13.5px; font-weight: 600;
  color: var(--ink-2); transition: all .12s; display: inline-flex; align-items: center; gap: 7px;
}
.seg:hover { border-color: #cfc4e0; }
.seg.active {
  background: var(--plum); border-color: var(--plum); color: #fff;
}
.seg.small { padding: 6px 13px; font-size: 12.5px; }
.seg-count {
  background: rgba(0, 0, 0, .08); border-radius: 20px; padding: 0 7px;
  font-size: 11px; font-weight: 700;
}
.seg.active .seg-count { background: rgba(255, 255, 255, .22); }

.cat-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
/* The service search, on its own line rather than trailing the section
   tabs — see the note in billing.js. */
.search-row { margin-bottom: 12px; }
.search-row .input.search { width: 100%; }
.chip {
  border: 1px solid var(--line); background: #fff; border-radius: 9px;
  padding: 6px 12px; cursor: pointer; font-size: 13px; color: var(--ink-2);
}
.chip:hover { border-color: #cfc4e0; }
.chip.active { background: #f3ecfb; border-color: var(--plum-2); color: var(--plum); font-weight: 700; }
.chip.tiny { padding: 3px 9px; font-size: 11.5px; }
.chip-row { display: flex; flex-wrap: wrap; gap: 7px; margin: 8px 0 12px; }

/* What the message will actually read like, with the blanks filled in.
   Shown because {{name}} tells nobody whether the sentence works. */
.msg-preview {
  margin: 10px 0 0; padding: 10px 12px; background: #f3f9f3;
  border-radius: 10px; font-size: 13px; line-height: 1.6; color: var(--ink);
}

/* ---------------- inputs ---------------- */
.input {
  border: 1px solid var(--line); border-radius: 9px; padding: 9px 11px;
  background: #fff; font-size: 14px; width: 100%; outline: none;
  transition: border-color .12s, box-shadow .12s;
}
.input:focus { border-color: var(--rose); box-shadow: 0 0 0 3px rgba(224, 86, 122, .16); }
.input.tiny { padding: 5px 7px; font-size: 12.5px; border-radius: 7px; }
.input.search { width: 230px; }
.input.date { width: 150px; }
.hidden-file { display: none; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.field { display: flex; flex-direction: column; gap: 5px; }
.field-full { grid-column: 1 / -1; }
.field-label { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.field-hint { font-size: 11.5px; color: var(--muted); line-height: 1.45; }
.field-check { flex-direction: row; align-items: center; gap: 9px; flex-wrap: wrap; }
.field-check input { width: 17px; height: 17px; accent-color: var(--plum-2); }
.field-check .field-hint { flex-basis: 100%; }

/* ---------------- tables ---------------- */
.data-table, .svc-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.data-table th, .svc-table th {
  text-align: left; font-size: 11.5px; text-transform: uppercase;
  letter-spacing: .7px; color: var(--muted); font-weight: 700;
  padding: 7px 9px; border-bottom: 1px solid var(--line);
}
.data-table td, .svc-table td {
  padding: 9px; border-bottom: 1px solid #f2eff7; vertical-align: middle;
}
.data-table tbody tr:hover, .svc-table tbody tr:hover { background: #faf8fd; }
.data-table tr.voided td { opacity: .45; text-decoration: line-through; }
.data-table tr.inactive td { opacity: .55; }
.time { display: block; font-size: 11.5px; color: var(--muted); }
.disc-txt { color: var(--ok); }
.price-input { width: 96px; text-align: right; display: inline-block; }
.svc-title { font-weight: 600; }

.mini-bar {
  background: #efeaf6; border-radius: 20px; height: 8px; min-width: 60px; overflow: hidden;
}
.mini-fill {
  height: 100%; border-radius: 20px;
  background: linear-gradient(90deg, var(--plum-2), var(--rose));
}

/* ---------------- billing screen ---------------- */
.billing-screen {
  display: grid; grid-template-columns: minmax(0, 1fr) 400px;
  gap: 18px; align-items: start; padding: 22px 26px 30px;
}
.panel { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; }
.services-panel { min-height: calc(100vh - 60px); }

.service-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 9px;
}
.svc-btn {
  border: 1px solid var(--line); background: #fff; border-radius: 11px;
  padding: 11px 12px; cursor: pointer; text-align: left;
  display: flex; flex-direction: column; gap: 5px; min-height: 66px;
  justify-content: space-between; transition: all .12s;
}
.svc-btn:hover {
  border-color: var(--plum-2); background: #faf7fe;
  transform: translateY(-1px); box-shadow: 0 4px 12px rgba(75, 46, 99, .1);
}
.svc-btn:active { transform: translateY(0); }
.svc-name { font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.svc-price { font-size: 14px; font-weight: 700; color: var(--plum); }
.svc-price em { font-style: normal; font-size: 11px; font-weight: 500; color: var(--muted); }
.svc-btn.open { border-style: dashed; }

/* cart */
.cart-panel { position: sticky; top: 22px; display: flex; flex-direction: column; gap: 12px; }
.cart-head { display: flex; justify-content: space-between; align-items: center; }
.cart-head h2 { margin: 0; font-size: 17px; letter-spacing: .3px; }

.cust-box { display: flex; flex-direction: column; gap: 8px; }
/* Row actions that stay inside their cell. A table cell with several
   small buttons in it must be allowed to wrap — held on one line they
   push past the card's edge on any narrow screen, which is how the
   customer list's Edit and Delete ended up outside the white. */
/* The way back to any day older than the ten listed. Sits under the
   table rather than in its head, because it is a destination, not a
   filter on what is above it. */
/* Something the salon owes this customer from last time, at the top of
   the counter panel where it cannot be missed. Deliberately not styled
   as a warning — it is good news for her and an ordinary instruction
   for whoever is billing. */
.owed-note {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 11px; margin-bottom: 8px;
  border-radius: 10px; background: var(--chip, rgba(0,0,0,.05));
}
.owed-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: .7px;
  color: var(--muted); font-weight: 700;
}
.owed-note strong { flex: 1; min-width: 0; }

.day-jump {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 12px; border-top: 1px solid var(--line);
}
.day-jump input { max-width: 190px; }

.row-actions {
  display: flex; flex-wrap: wrap; gap: 6px;
  justify-content: flex-end; align-items: center;
}
.row-actions > * { flex: 0 0 auto; }

.cust-row { display: flex; gap: 8px; flex-wrap: wrap; }
.cust-row > * { flex: 1 1 46%; min-width: 0; }
/* Buttons whose labels are whole sentences. Given an equal share of a
   phone held sideways there is not room for the words, so let them take
   the width they need and drop to the next line when they cannot. */
.cust-extras > .btn { flex: 1 1 auto; min-width: 0; }
.cust-extras > .btn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gender-seg { display: flex; gap: 5px; }
.gender-seg .seg { flex: 1; justify-content: center; padding: 7px 4px; }

.cart-lines {
  max-height: 38vh; overflow-y: auto; display: flex; flex-direction: column; gap: 8px;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 10px 2px; margin: 0 -2px;
}
.cart-line { background: #faf8fd; border-radius: 10px; padding: 9px 10px; }
.cl-main { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.cl-name { font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.cl-row { display: flex; gap: 7px; margin-top: 7px; flex-wrap: wrap; align-items: flex-end; }
.mini { display: flex; flex-direction: column; gap: 2px; width: 66px; }
.mini.grow { flex: 1; min-width: 96px; width: auto; }
.mini > span { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.disc-mini { display: flex; gap: 4px; }
.disc-mini select { width: 52px; flex: 0 0 52px; }
.cl-amt { text-align: right; margin-top: 5px; font-size: 14px; }
.cl-amt .was { color: var(--muted); font-size: 12px; margin-right: 6px; }
.cl-amt .calc { color: var(--muted); font-size: 11.5px; margin-right: 7px; }
.extra-field input { border-color: var(--gold); background: #fffdf5; }

.disc-box { display: flex; flex-direction: column; gap: 7px; }
.disc-label { font-size: 12px; font-weight: 700; color: var(--ink-2); text-transform: uppercase; letter-spacing: .6px; }
.disc-controls { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.disc-controls select { width: 130px; flex: 0 0 130px; }
.disc-controls input { width: 90px; flex: 0 0 90px; }
.quick-off { display: flex; gap: 4px; flex-wrap: wrap; }

.totals { display: flex; flex-direction: column; gap: 3px; }
.total-row { display: flex; justify-content: space-between; font-size: 13.5px; color: var(--ink-2); }
.total-row.disc { color: var(--ok); }
.total-row.grand {
  margin-top: 7px; padding-top: 10px; border-top: 2px solid var(--ink);
  font-size: 20px; font-weight: 800; color: var(--ink);
}
.pay-wrap { display: flex; flex-direction: column; gap: 9px; }
.pay-modes { display: flex; gap: 5px; flex-wrap: wrap; }
.pay-modes .seg { flex: 1; justify-content: center; padding: 8px 4px; min-width: 58px; }
.pay-modes .split-seg.active { background: var(--gold); border-color: var(--gold); color: #2c1a3d; }

.split-box { background: #faf8fd; border: 1px solid var(--line); border-radius: 11px; padding: 10px; }
.split-left {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: 8px; font-size: 12.5px; font-weight: 600;
}
.split-left.ok { color: var(--ok); }
.split-left.bad { color: #b8442b; }

.cash-box {
  background: #fffdf5; border: 1px solid #f0e3bd; border-radius: 11px; padding: 10px;
}
.cash-row { display: flex; gap: 11px; align-items: flex-end; }
.change-out { text-align: right; display: flex; flex-direction: column; }
.change-out .lbl {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .7px;
  color: var(--muted); font-weight: 700;
}
.change-amt { font-size: 21px; color: var(--plum); line-height: 1.15; }
.quick-cash { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 8px; }
.cash-warn { margin: 7px 0 0; font-size: 12px; color: #b8442b; font-weight: 600; }
.cart-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.cart-actions .btn.primary { grid-column: 1 / -1; }

/* ---------------- catalog ---------------- */
.cat-card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 16px; margin-bottom: 14px; }
.cat-card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.cat-card-head h3 { margin: 0; font-size: 15.5px; }
.cat-card-head .count { font-size: 11.5px; color: var(--muted); font-weight: 500; margin-left: 8px; }
.row-actions { display: flex; align-items: center; }

/* ---------------- reports ---------------- */
.kpi-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: 12px; margin-bottom: 16px;
}
.kpi {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 14px 16px; display: flex; flex-direction: column; gap: 3px;
}
.kpi.accent { background: linear-gradient(140deg, var(--plum), #2c1a3d); color: #fff; }
.kpi-label { font-size: 11.5px; text-transform: uppercase; letter-spacing: .8px; color: var(--muted); font-weight: 700; }
.kpi.accent .kpi-label, .kpi.accent .kpi-sub { color: rgba(255, 255, 255, .72); }
.kpi-value { font-size: 24px; letter-spacing: -.5px; }
.kpi-sub { font-size: 11.5px; color: var(--muted); }

.chart { display: flex; gap: 4px; align-items: flex-end; height: 170px; padding-top: 8px; }
/* max-width keeps a single day from stretching across the whole card */
.bar-col { flex: 1; min-width: 8px; max-width: 64px; display: flex; flex-direction: column; align-items: center; gap: 5px; height: 100%; }
.bar-track { flex: 1; width: 100%; display: flex; align-items: flex-end; }
.bar {
  width: 100%; border-radius: 5px 5px 0 0;
  background: linear-gradient(180deg, var(--plum-2), var(--plum));
  transition: height .2s;
}
.bar.zero { background: #eee7f2; }
.bar-label { font-size: 10px; color: var(--muted); }

/* ---------- earnings analysis ---------- */

/* This period against the one before it. A number on its own says
   nothing; the arrow is the whole point of the card. */
.compare-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
}
.compare-cell { display: flex; flex-direction: column; gap: 3px; }
.compare-then { display: flex; align-items: baseline; gap: 8px; }
.move { font-size: 12.5px; font-weight: 700; letter-spacing: .2px; }
.move.up { color: #1c7a4a; }
.move.down { color: #b03a3a; }
.move.flat { color: var(--muted); }

/* Where the money comes from: a share bar per category, widest first. */
.share { display: flex; flex-direction: column; gap: 9px; }
.share-row {
  display: grid; grid-template-columns: minmax(84px, 1.1fr) 3fr auto auto;
  gap: 10px; align-items: center; font-size: 13px;
}
.share-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.share-track { background: #f1ebf6; border-radius: 6px; height: 12px; overflow: hidden; }
.share-fill { height: 100%; border-radius: 6px; background: var(--plum-2); }
.share-value { font-variant-numeric: tabular-nums; font-weight: 600; }
.share-pct { min-width: 34px; text-align: right; }
/* Six tones off the same plum, so eleven categories stay readable and
   nothing needs a legend. */
.share-fill.tone-0 { background: var(--plum); }
.share-fill.tone-1 { background: var(--plum-2); }
.share-fill.tone-2 { background: #6b4270; }
.share-fill.tone-3 { background: #8a5a8f; }
.share-fill.tone-4 { background: #a87aad; }
.share-fill.tone-5 { background: #c49cc8; }

@media (max-width: 520px) {
  .share-row { grid-template-columns: minmax(70px, 1fr) 2fr auto; }
  .share-pct { display: none; }
}

.split-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pill-list { display: flex; flex-direction: column; gap: 10px; }
.pill-row { display: grid; grid-template-columns: 90px 1fr auto; gap: 10px; align-items: center; font-size: 13.5px; }

/* ---------------- bookings & advances ---------------- */
.booking-card { padding: 15px 17px; }
.booking-card.done { opacity: .72; }
.bk-head { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
.bk-who h3 { margin: 0 0 3px; font-size: 16px; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.bk-no { font-size: 11px; font-weight: 700; letter-spacing: .8px; color: var(--plum-2);
  background: #f2ecfa; border-radius: 20px; padding: 2px 9px; }
.bk-who p { margin: 0; }
.bk-date { margin-left: 9px; color: var(--plum); font-weight: 600; }
.bk-money { display: flex; gap: 20px; }
.bk-fig { display: flex; flex-direction: column; align-items: flex-end; }
.bk-fig .lbl { font-size: 10.5px; text-transform: uppercase; letter-spacing: .7px; color: var(--muted); font-weight: 700; }
.bk-fig strong { font-size: 16px; }
.bk-fig.ok strong { color: var(--ok); }
.bk-fig.due strong { color: var(--danger); }
.bk-bar { background: #efeaf6; border-radius: 20px; height: 7px; overflow: hidden; margin: 11px 0 9px; }
.bk-fill { height: 100%; border-radius: 20px; background: linear-gradient(90deg, var(--ok), #59d99a); transition: width .25s; }
.bk-status { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.bk-actions { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
.pay-list { margin-top: 11px; border-top: 1px dashed var(--line); padding-top: 9px;
  display: flex; flex-direction: column; gap: 6px; }
.pay-line { display: flex; align-items: center; gap: 10px; font-size: 13px; flex-wrap: wrap; }
.pay-no { color: var(--muted); font-size: 11.5px; width: 24px; }
.pay-date { min-width: 92px; }
.pay-mode { background: #f2ecfa; border-radius: 20px; padding: 1px 9px; font-size: 11.5px; color: var(--plum); }
.pay-note { flex: 1; min-width: 60px; font-size: 12px; }
.pay-amt { color: var(--ok); }

.date-toggle { display: flex; flex-direction: column; gap: 6px; }
.date-seg { display: flex; gap: 5px; }
.date-seg .seg { flex: 1; justify-content: center; }
.date-toggle.back .date-seg .seg.active { background: #b8442b; border-color: #b8442b; }
.date-note {
  font-size: 11.5px; color: #b8442b; font-weight: 600; line-height: 1.4;
  background: #fdf1ee; border: 1px solid #f3d6cd; border-radius: 8px; padding: 6px 9px;
}

.bk-banner {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  background: linear-gradient(135deg, #f3ecfb, #fdf6ec);
  border: 1px solid #e3d5f5; border-radius: 11px; padding: 9px 12px;
}
.bk-banner.suggest { background: #fffaf0; border-color: #f0e0bd; }
.bk-banner strong { display: block; font-size: 13px; }
.bk-banner-sub { font-size: 11.5px; color: var(--muted); }
.note-line { font-size: 12px; color: var(--muted); line-height: 1.55; margin: -6px 0 16px; }
.note-line.warn-line { color: #b8442b; font-weight: 600; }

/* Something the reader has to deal with before carrying on — device
   numbers nobody has claimed, instalments that came and went. Loud
   enough to stop on, quiet enough not to look like a failure. */
.warn-box {
  background: #fff6f2; border: 1px solid #f0c8b8; border-radius: 10px;
  padding: 10px 12px; margin: 10px 0; font-size: 13px; line-height: 1.55;
}
.warn-box strong { display: block; color: #b8442b; margin-bottom: 4px; }
.warn-box p { margin: 0 0 6px; color: var(--muted); }
.warn-box ul { margin: 0; padding-left: 18px; color: var(--muted); }

/* The biometric preview. Deliberately scrollable inside its own box:
   a month's punches is several hundred rows and the modal must not
   grow until its buttons are off the bottom of the screen. */
.punch-preview { max-height: 46vh; overflow-y: auto; margin-top: 12px; }
.punch-preview input[type="file"] { padding: 8px; }

/* Something the salon has to do in order, partly somewhere else. Kept
   as a real ordered list so the numbers survive being read out over the
   phone, which is how most of these get followed. */
.steps { margin: 10px 0 14px; padding-left: 22px; }
.steps li { margin-bottom: 8px; font-size: 13px; line-height: 1.6; color: var(--ink); }

/* ---------------- settings ---------------- */
.settings-screen { max-width: 900px; }
.logo-box { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.logo-preview {
  width: 130px; height: 100px; border: 1px dashed var(--line); border-radius: 12px;
  display: grid; place-items: center; background: #fbfafd; overflow: hidden;
}
.logo-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.logo-actions { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.qr-test { display: flex; gap: 18px; align-items: flex-start; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.qr-test-img { border: 1px solid var(--line); border-radius: 10px; padding: 6px; background: #fff; line-height: 0; }
.qr-test-img svg { width: 130px; height: 130px; }

/* ---------------- modal ---------------- */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(22, 18, 31, .45);
  display: grid; place-items: center; z-index: 60; padding: 20px;
  animation: fade .12s ease-out;
}
@keyframes fade { from { opacity: 0 } }
.modal {
  background: #fff; border-radius: 16px; width: min(520px, 100%);
  max-height: 88vh; display: flex; flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
}
.modal-wide { width: min(860px, 100%); }
.modal-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 15px 18px; border-bottom: 1px solid var(--line);
}
.modal-head h3 { margin: 0; font-size: 16.5px; }
.modal-body { padding: 18px; overflow-y: auto; }
.modal-foot {
  display: flex; justify-content: flex-end; gap: 9px;
  padding: 13px 18px; border-top: 1px solid var(--line);
}
.modal-msg { margin: 0 0 14px; color: var(--ink-2); font-size: 14px; line-height: 1.55; }

.sit-list { display: flex; flex-direction: column; gap: 11px; }
.sit-card { border: 1px solid var(--line); border-radius: 11px; padding: 11px; display: flex; flex-direction: column; gap: 5px; }
.sit-head { display: flex; gap: 8px; align-items: center; }

.preview-wrap { display: flex; flex-direction: column; gap: 11px; }
.paper-switch { display: flex; gap: 6px; flex-wrap: wrap; }
.bill-frame {
  width: 100%; height: 58vh; border: 1px solid var(--line);
  border-radius: 11px; background: #fff;
}

/* ---------------- the bill as a picture ----------------
   For a Bluetooth pocket printer. iPhones cannot reach one from a web
   page at all, so the bill is handed to the printer's own app as an
   image through the share sheet — the same route works on Android. */
/* printer state, sitting on the billing screen where the counter is */
.printer-chip {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  margin-left: auto; padding: 5px 10px; border-radius: 999px;
  border: 1px solid var(--line); background: #fff;
  font-size: 11.5px; font-weight: 600; color: var(--muted);
  max-width: 46%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.printer-chip:hover { border-color: var(--brand, #4b2e63); }
.printer-dot {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: #c9c2d4;
}
.printer-chip.on { color: #1c7a4a; border-color: #b6e2c9; background: #f2fbf6; }
.printer-chip.on .printer-dot { background: #23a05f; }

.bt-panel { display: flex; flex-direction: column; gap: 10px; }
.bt-panel .field-check { margin: 0; }
.bt-field { display: flex; flex-direction: column; gap: 6px; }
.bt-field .field-label { font-size: 12px; font-weight: 600; }

.img-wrap { display: flex; flex-direction: column; gap: 11px; }
.img-bars { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.img-bar { display: flex; align-items: center; gap: 8px; }
.img-bar-label {
  font-size: 11.5px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em;
}
/* the picture is 1-bit black and white — let it stay that way on screen
   instead of being blurred by the browser's smoothing */
.bill-img { image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; }
.img-stage {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  max-height: 58vh; overflow-y: auto; padding: 4px 0;
}
.bill-img {
  width: 100%; max-width: 300px; height: auto; display: block;
  background: #fff; border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
}
.img-hint {
  margin: 0; font-size: 12px; line-height: 1.45;
  color: var(--muted); text-align: center; max-width: 340px;
}

/* ---------------- cloud sync ---------------- */
.cloud-chip {
  margin-top: 9px; padding: 9px 12px; border-radius: 10px; cursor: pointer;
  background: rgba(255, 255, 255, .08); display: flex; align-items: center; gap: 8px;
  font-size: 11.5px; color: #d9d0e6;
}
/* A button that opens a chooser but sits in a row of inputs, so it has to
   look like one rather than like something that submits the bill. */
.picker-btn {
  text-align: left; cursor: pointer; background: #fff;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.picker-btn:hover { border-color: #8b6fb8; }
.picker-btn.set { border-color: #5b3a8e; color: #5b3a8e; font-weight: 600; }

.pick-list { display: flex; flex-direction: column; gap: 2px; }
.pick-row {
  display: flex; align-items: center; gap: 10px; padding: 9px 6px;
  border-radius: 8px; cursor: pointer;
}
.pick-row:hover { background: #f4f0f9; }
.pick-row input { width: 17px; height: 17px; }

.cloud-chip:hover { background: rgba(255, 255, 255, .14); }

/* The subscription, standing in the menu rather than only turning up as a
   banner once something is wrong. */
.sub-chip {
  margin-top: 9px; padding: 10px 12px; border-radius: 10px; cursor: pointer;
  background: rgba(255, 255, 255, .08); display: flex; flex-direction: column; gap: 3px;
  font-size: 11.5px; color: #d9d0e6;
}
.sub-chip:hover { background: rgba(255, 255, 255, .14); }
.sub-chip .sc-label {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 1.1px; opacity: .65;
}
.sub-chip .sc-main { font-size: 13px; color: #fff; line-height: 1.3; }
.sub-chip.warn { background: rgba(240, 180, 60, .18); }
.sub-chip.warn .sc-main { color: #ffd98a; }
.sub-chip.bad { background: rgba(230, 90, 90, .2); }
.sub-chip.bad .sc-main { color: #ffb3b3; }
.sub-chip .btn { margin-top: 5px; }
.cloud-text { line-height: 1.3; }
.dot {
  width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px; background: #999;
}
.dot.green { background: #35c67a; box-shadow: 0 0 0 3px rgba(53, 198, 122, .18); }
.dot.amber { background: #e8a33d; box-shadow: 0 0 0 3px rgba(232, 163, 61, .18); }
.dot.red { background: #e2544f; box-shadow: 0 0 0 3px rgba(226, 84, 79, .18); }
.dot.grey { background: #9d93ae; }
.cloud-status { display: flex; align-items: center; gap: 9px; margin-bottom: 5px; font-size: 14.5px; }
.mono-input { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; }

/* ---------------- sign in ---------------- */
.login-overlay {
  position: fixed; inset: 0; z-index: 90;
  background: linear-gradient(170deg, #2e1f30 0%, var(--plum) 100%);
  display: grid; place-items: center; padding: 22px; overflow-y: auto;
}
.login-card {
  background: #fff; border-radius: 18px; padding: 30px 28px;
  width: min(390px, 100%); box-shadow: 0 24px 70px rgba(0, 0, 0, .35);
  display: flex; flex-direction: column; gap: 13px;
}
.login-logo { width: 82px; height: 82px; object-fit: contain; align-self: center; }
.login-title {
  margin: 0; text-align: center; font-size: 25px; letter-spacing: 4px; font-weight: 800;
}
.login-sub { margin: -6px 0 6px; text-align: center; color: var(--muted); font-size: 13.5px; }
.login-msg { margin: 0; font-size: 13px; min-height: 1px; }
.login-msg.bad { color: var(--danger); }
.login-foot {
  margin: 4px 0 0; text-align: center; font-size: 11.5px; color: var(--muted); line-height: 1.5;
}
.locked-mark { text-align: center; font-size: 34px; line-height: 1; margin: 4px 0; }
.locked-head {
  margin: 0; text-align: center; font-size: 16px; font-weight: 700; color: var(--danger);
}
.locked-body {
  margin: 0; text-align: center; font-size: 13px; color: var(--ink-2); line-height: 1.55;
}
.locked-code {
  display: block; text-align: center; font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 12px; background: #f6f4fa; border: 1px solid var(--line);
  border-radius: 8px; padding: 8px 10px; word-break: break-all; color: var(--plum);
}
.locked-body.muted { color: var(--muted); font-size: 12px; }

/* ---------------- the software's own mark ---------------- */
/* The receipt and its reflection are painted in currentColor and the ruled
   lines are punched through, so setting a colour on the block around it is
   the whole of theming it: ink on paper here, paper on ink in the sidebar. */
.brand-glyph { display: inline-flex; align-items: center; }
.brand-word { letter-spacing: -.3px; font-weight: 400; }
.brand-word b { font-weight: 800; }

.login-brand {
  display: flex; align-items: center; justify-content: center; gap: 11px;
  color: var(--ink);
}
.login-salon {
  margin: -2px 0 10px; text-align: center; font-size: 14px; color: var(--ink-2);
}
.login-salon.muted {
  color: var(--muted); font-size: 10.5px; letter-spacing: 2.6px; text-transform: uppercase;
}

/* ---------------- the software's own mark ---------------- */
/* The body and reflection are painted in currentColor, so setting a colour
   on the surrounding block is what makes the mark work on paper or on ink. */
.brand-mark { display: inline-flex; align-items: center; }
.brand-word { letter-spacing: -.2px; font-weight: 400; }
.brand-word b { font-weight: 800; }

.login-brand {
  display: flex; align-items: center; justify-content: center; gap: 11px;
  color: var(--ink);
}
.login-salon {
  margin: -4px 0 8px; text-align: center; font-size: 13.5px; color: var(--ink-2);
}
.login-salon.muted {
  color: var(--muted); font-size: 11px; letter-spacing: 2.4px; text-transform: uppercase;
}
/* the hairline between "sign in" and "start a salon" */
.login-sep { height: 1px; background: var(--line); margin: 6px 0 2px; }

/* ---------------- signing in with Google ---------------- */
.btn.google {
  background: #fff; border-color: #dadce0; color: #3c4043;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 12px 16px; font-size: 15px; font-weight: 600;
}
.btn.google:hover { background: #f8f9fa; }
.google-g { display: flex; align-items: center; }

/* "or with a password", with a rule running through it */
.login-or {
  display: flex; align-items: center; gap: 10px;
  color: var(--muted); font-size: 11.5px; margin: 2px 0;
}
.login-or::before, .login-or::after {
  content: ''; flex: 1; height: 1px; background: var(--line);
}

/* ---------------- subscription banner ---------------- */
/* Sticky, because it lives at the top of the scrolling pane and a notice
   that the till is about to stop taking new bills is not something to lose
   the moment somebody scrolls down a price list. */
.sub-banner {
  position: sticky; top: 0; z-index: 5;
  padding: 10px 18px; font-size: 13px; line-height: 1.5;
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.sub-banner .btn { flex-shrink: 0; }
.sub-banner.warn { background: #fff6e0; color: #7a5300; }
.sub-banner.bad { background: #fdecec; color: var(--danger); }

/* ---------------- toast ---------------- */
/* Down in the corner, not across the middle.

   Centred, every notification landed on top of the board reception was
   reading — and on a busy Saturday the thing being covered was always
   the thing being announced. The corner is out of the way of the cards
   and still the first place an eye goes when something moves. */
.toast-box {
  position: fixed; bottom: 22px; right: 22px;
  display: flex; flex-direction: column; gap: 8px; z-index: 80;
  align-items: flex-end; max-width: min(380px, calc(100vw - 44px));
}

/* On a phone there is no corner to spare, so they go back to the
   bottom of the screen — but above the thumb, not under it. */
@media (max-width: 700px) {
  .toast-box {
    left: 12px; right: 12px; bottom: 16px;
    align-items: stretch; max-width: none;
  }
}
.toast {
  background: var(--ink); color: #fff; padding: 11px 18px; border-radius: 999px;
  font-size: 13.5px; box-shadow: 0 8px 26px rgba(0, 0, 0, .25);
  animation: rise .18s ease-out; max-width: 90vw;
}
.toast.warn { background: #b8442b; }
.toast.good { background: #1c6b46; }
.toast.out { opacity: 0; transition: opacity .4s; }
/* A toast that asks reception to do something, rather than only telling
   them what happened. Inside the pill so it reads as one thing. */
.toast { display: inline-flex; align-items: center; gap: 12px; }
.toast-do {
  border: 0; background: rgba(255, 255, 255, .18); color: #fff;
  font: inherit; font-weight: 700; padding: 4px 12px;
  border-radius: 999px; cursor: pointer; white-space: nowrap;
}
.toast-do:hover { background: rgba(255, 255, 255, .3); }
@keyframes rise { from { transform: translateY(12px); opacity: 0 } }

/* How many clients are finished and waiting to be billed. On the menu
   item, because reception lives on the billing screen and the board is
   somewhere they are not looking. */
.nav-count { display: none; }
.nav-count.on {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px; margin-left: auto;
  border-radius: 999px; background: #d94f6a; color: #fff;
  font-size: 11.5px; font-weight: 800; line-height: 1;
}

/* ---------------- the phone menu ----------------
   Hidden entirely above 900px — .mobile-topbar and .nav-backdrop only ever
   take a size once the media query below switches them on, so none of this
   costs anything on a desktop screen. */
.mobile-topbar { display: none; }
.nav-backdrop {
  display: none;
  position: fixed; inset: 0; z-index: 49;
  background: rgba(15, 9, 16, .5);
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease;
}
.nav-backdrop.open { opacity: 1; pointer-events: auto; }

/* ---------------- responsive ---------------- */
@media (max-width: 1180px) {
  .billing-screen { grid-template-columns: minmax(0, 1fr) 350px; }
  .split-row { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .app { display: block; height: auto; }

  .mobile-topbar {
    display: flex; align-items: center; gap: 12px;
    position: fixed; top: 0; left: 0; right: 0; z-index: 40;
    height: 54px; padding: 0 14px;
    background: linear-gradient(170deg, #2e1f30 0%, var(--plum) 100%);
    color: #efeaf5;
  }
  .hamburger-btn {
    display: flex; flex-direction: column; justify-content: center; gap: 4px;
    width: 34px; height: 34px; padding: 0; margin: -8px;
    border: 0; background: none; cursor: pointer; flex: 0 0 auto;
  }
  .hamburger-bar { width: 20px; height: 2px; background: #efeaf5; border-radius: 2px; }
  .topbar-brand { display: flex; align-items: center; gap: 8px; color: #efeaf5; min-width: 0; }
  .topbar-word { font-size: 15px; letter-spacing: -.2px; }
  .topbar-dot { margin-left: auto; }
  .topbar-dot.hidden { display: none; }

  .nav-backdrop { display: block; }

  /* the drawer itself: the same sidebar element the desktop uses, standing
     off to the side until opened rather than laid out as a second element */
  .sidebar {
    position: fixed; top: 0; left: 0; z-index: 50;
    width: min(280px, 82vw); height: 100vh; height: 100dvh;
    flex: none; flex-direction: column; align-items: stretch;
    padding: 16px 14px;
    transform: translateX(-100%);
    transition: transform .22s ease;
    box-shadow: 0 0 40px rgba(0, 0, 0, .35);
    overflow-y: auto;
  }
  .sidebar.open { transform: translateX(0); }

  .nav { flex-direction: column; gap: 2px; }
  .nav-label { display: inline; }
  .today-chip { margin-top: auto; }
  .side-foot { display: block; }

  .main { padding-top: 54px; }

  /* ---------------- the phone ----------------

     Most of this software is used standing up, one-handed, between
     customers. Three things were wrong with it there and none of them
     show on a laptop.

     Rows of pills WRAPPED. Six categories came out as a ragged
     two-and-a-half line block of different widths that pushed the
     actual services below the fold, and the salons with the most
     services — the ones being sold to — had the worst of it. A row that
     does not fit should scroll sideways, which is the gesture a phone
     already teaches, not reflow into a wall.

     Cards were ragged too: a one-line service and a two-line service
     sat at different heights, so the grid had holes in it.

     And every tap target was sized for a mouse. */

  /* One line, swiped. Full-bleed so the next chip peeks in and says so,
     with the scrollbar hidden because a phone does not need one.

     pay-modes is deliberately NOT in this list: those chips share the
     width between them rather than running off the side, and a payment
     mode that has to be scrolled to is one that gets missed. */
  .chip-row, .cats, .seg-row, .section-tabs, .cat-chips {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    /* Without this the row does not scroll — it GROWS, and takes the
       panel and the page with it. A flex or grid item's automatic
       minimum size is its content, so "overflow-x: auto" on a row of
       chips is ignored until something says the row is allowed to be
       narrower than what is in it. This is that something. */
    min-width: 0;
    /* No full-bleed negative margins here. Pulling these rows out to the
       screen edge looks better and widens the page to do it: the row
       becomes wider than its parent, nothing clips it, and every screen
       gains a horizontal scrollbar with the right-hand side of every
       card hanging off it. A row that scrolls inside its own padding is
       worth more than one that peeks. */
    -ms-overflow-style: none;
  }
  .chip-row::-webkit-scrollbar,
  .cats::-webkit-scrollbar,
  .seg-row::-webkit-scrollbar,
  .section-tabs::-webkit-scrollbar,
  .cat-chips::-webkit-scrollbar { height: 0; }
  .chip-row > *, .cats > *, .seg-row > *,
  .section-tabs > *, .cat-chips > * { flex: 0 0 auto; scroll-snap-align: start; }

  /* 44px is the smallest thing a thumb hits reliably; these were 30. */
  .chip { padding: 9px 14px; font-size: 13.5px; min-height: 38px; }
  .seg { padding: 10px 16px; min-height: 40px; }
  .btn { min-height: 42px; }
  .btn.tiny { min-height: 34px; }

  /* two service buttons per row instead of one long column */
  .service-grid { grid-template-columns: repeat(auto-fill, minmax(138px, 1fr)); gap: 8px; }
  /* Even rows. The price pinned to the bottom means a one-line name and
     a two-line name still line their prices up across the row, which is
     what makes a grid read as a grid. */
  .svc-btn {
    min-height: 74px; padding: 11px 12px;
    display: flex; flex-direction: column; justify-content: space-between;
  }
  .svc-name { font-size: 12.5px; line-height: 1.35; }
  /* minmax(0, 1fr), not 1fr: a bare 1fr will not shrink below its
     content either, so the column holding the price list inherited the
     same problem one level up. */
  .billing-screen { grid-template-columns: minmax(0, 1fr); padding: 14px; }
  .panel, .cart-panel, .services-panel { min-width: 0; }
  .cart-panel { position: static; }
  .services-panel { min-height: 0; }
  .form-grid { grid-template-columns: 1fr; }
  #screen { padding: 14px; }
  .input.search { width: 100%; }
  .bill-frame { height: 52vh; }
  .img-stage { max-height: 50vh; }
  .modal-body { padding: 13px; }
}

/* the drawer is open: stop the page behind it scrolling too */
body.nav-locked { overflow: hidden; }

/* ---- the sittings a bridal booking is made of ---- */
.bk-sittings {
  margin: 12px 0 4px; padding: 10px 12px; border-radius: 10px;
  background: #f7f4fb; border: 1px solid #e6dff0;
}
.bk-sit-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 10px; flex-wrap: wrap; margin-bottom: 6px;
}
.bk-sit {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 12px; padding: 8px 0; border-top: 1px solid #e9e2f2; flex-wrap: wrap;
}
.bk-sit.done .bk-sit-name { text-decoration: line-through; opacity: .6; }
.bk-sit-main { flex: 1 1 220px; min-width: 0; }
.bk-sit-main p { margin: 3px 0 0; }
.bk-sit-tick { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.bk-sit-tick input { width: 16px; height: 16px; flex-shrink: 0; }
.bk-sit-name { font-weight: 600; }
.bk-sit-side {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex-shrink: 0;
}
.bk-sit-side .input.tiny { width: auto; }
.extra-line { color: #7a5ba8; }

/* ---- which branch is open, for an owner who runs more than one ---- */
.branch-switch {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 12px; padding: 8px 10px; border-radius: 10px;
  background: rgba(255, 255, 255, .08);
}
.branch-label {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 1.1px;
  opacity: .65; color: #d9d0e6; flex-shrink: 0;
}
.branch-select {
  flex: 1; min-width: 0; border: 0; border-radius: 7px; padding: 5px 7px;
  background: rgba(255, 255, 255, .12); color: #fff; font-size: 13px; cursor: pointer;
}
.branch-select option { color: #251826; }

/* ---- the branches an owner runs ---- */
.branch-rows { display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px; }
.branch-row {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; padding: 9px 10px; border-radius: 9px; border: 1px solid var(--line);
}
.branch-row.active { border-color: var(--plum-2); background: #f7f4fb; }

/* ---- building a package ---- */
.pkg-card .pkg-sit-list { display: flex; flex-direction: column; gap: 2px; }
.pkg-sit-line {
  display: grid; grid-template-columns: minmax(110px, auto) 1fr auto;
  gap: 12px; align-items: baseline;
  padding: 7px 0; border-top: 1px solid var(--line);
}
.pkg-sit-amt { font-weight: 700; white-space: nowrap; }

.pkg-build { display: flex; flex-direction: column; gap: 12px; }
.pkg-sit {
  border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px;
  display: flex; flex-direction: column; gap: 9px;
}
.pkg-sit-head { display: flex; gap: 8px; align-items: center; }
.pkg-sit-head .input { flex: 1; }
.pkg-sit-head .input.tiny { flex: 0 0 92px; }
.pkg-items { display: flex; flex-wrap: wrap; gap: 6px; }
.pkg-item {
  display: inline-flex; align-items: center; gap: 3px;
  background: #f3ecfb; border-radius: 8px; padding: 3px 4px 3px 10px;
  font-size: 12.5px; color: var(--plum);
}
.pkg-total { padding-top: 4px; }
.pkg-off { color: var(--danger); font-weight: 600; }

/* ---- what is coming up: every booked-in sitting, soonest first ---- */
.diary-card .diary-row {
  display: grid; grid-template-columns: minmax(120px, auto) 1fr auto;
  gap: 12px; align-items: center;
  padding: 8px 0; border-top: 1px solid var(--line);
}
.diary-row.late { background: #fdf3f4; }
.diary-when, .diary-who { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.diary-who strong, .diary-when strong { line-height: 1.25; }

/* ---- booking the sittings in, all of them at once ---- */
.sched-list { display: flex; flex-direction: column; gap: 2px; margin-top: 12px; }
.sched-row {
  display: flex; justify-content: space-between; align-items: center;
  gap: 14px; flex-wrap: wrap; padding: 10px 0; border-top: 1px solid var(--line);
}
.sched-what { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 180px; }
.sched-when { display: flex; gap: 8px; flex-shrink: 0; }
.sched-when .input.tiny { width: auto; }

/* ---- a member's prepaid wallet, on the bill ---- */
.wallet-row {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 9px 10px; margin: 6px 0; border-radius: 9px;
  background: #f3ecfb; border: 1px solid #e2d6f0;
}
.wallet-row input { width: 16px; height: 16px; flex-shrink: 0; }
.wallet-row strong { font-size: 13.5px; }

/* ---- the appointment book ---- */
.appt-list { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.appt {
  display: flex; gap: 14px; align-items: flex-start;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 14px;
}
.appt-time {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  flex: 0 0 74px; border-right: 1px solid var(--line); padding-right: 12px;
}
.appt-time strong { font-size: 16px; letter-spacing: -.3px; }
.appt-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.appt-name { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.appt-do { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.appt-do .btn { text-decoration: none; }

/* what happened to it, at a glance, without reading a word */
.appt-arrived { border-left: 3px solid var(--plum-2); }
.appt-done { opacity: .62; }
.appt-cancelled, .appt-noshow { opacity: .48; }
.appt-cancelled .appt-time strong, .appt-noshow .appt-time strong {
  text-decoration: line-through;
}

/* ---------------- pictures for the salon's page ---------------- */
.shot-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0 12px;
}
.shot { position: relative; }
.shot img {
  width: 100%; aspect-ratio: 1/1; object-fit: cover;
  border-radius: 10px; display: block; background: var(--line);
}
.shot-x {
  position: absolute; top: 4px; right: 4px;
  width: 24px; height: 24px; border-radius: 50%; border: 0;
  background: rgba(15, 10, 16, .72); color: #fff;
  font-size: 17px; line-height: 1; cursor: pointer;
}
.check { display: flex; align-items: center; gap: 9px; margin: 4px 0 2px; }
.check input { width: 17px; height: 17px; }

/* ---------------- package sittings, on the day they fall ---------------- */
/* A wedding is a diary of its own. These sit in the day's list beside the
   ordinary appointments but read differently on purpose: money is already
   held against them, and billing one settles part of an agreement rather
   than starting a fresh sale. */
.appt-sittings { margin-top: 14px; }
.sit-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.sit {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 11px 13px; border: 1px solid var(--line); border-radius: 12px;
  background: rgba(224, 86, 122, .04);
}
.sit-done { opacity: .62; }
.sit-when { min-width: 52px; }
.sit-who { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.sit-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sit-acts { display: flex; gap: 6px; align-items: center; }
.sit-acts a.btn { text-decoration: none; }

/* ---------------- asked for on the website ---------------- */
/* People waiting on a phone call. Deliberately not styled like a booked
   appointment — nothing here is agreed yet, and a card that looks like
   the diary's own rows invites somebody to treat it as settled. */
.appt-requests { margin-top: 14px; }
.req-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.req {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding: 11px 13px; border: 1px dashed var(--line); border-radius: 12px;
  background: rgba(217, 164, 65, .05);
}
.req-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.req-name { display: flex; align-items: center; gap: 8px; }
.req-acts { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.req-acts a.btn { text-decoration: none; }

.appt-remind { margin-top: 14px; }
.appt-remind-row { display: flex; gap: 7px; flex-wrap: wrap; padding: 4px 2px 2px; }
.appt-remind-row a { text-decoration: none; }
.appt-picker { display: flex; flex-direction: column; gap: 7px; }
.appt-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.appt-warn { grid-column: 1 / -1; color: var(--danger); min-height: 1em; }

@media (max-width: 640px) {
  .appt { flex-wrap: wrap; }
  .appt-time { flex-basis: 100%; border-right: 0; flex-direction: row; align-items: baseline; gap: 8px; }
  .appt-do { width: 100%; }
}

/* ---- GST summary, on the earnings screen ---- */
.card-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: -6px 0 4px; }
.data-table tr.sum-row td { border-top: 1.5px solid var(--line); background: #faf7fb; }

/* ---- stock ---- */
.low-card { margin-top: 14px; border-color: #f0d6b4; background: #fffaf2; }
.data-table tr.low-row td { background: #fffaf2; }
.points-row { background: #fdf4e7; border-color: #f0dcbb; }

/* ---- a small period switch inside a screen header ---- */
.seg-row { display: inline-flex; gap: 4px; align-items: center; }

/* ---- WhatsApp ---- */
.wa-line { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.wa-detail { margin: 10px 0 4px; max-width: 420px; }
.wa-media { display: flex; align-items: flex-start; gap: 10px; margin-top: 10px; }
.wa-media img, .wa-media video { max-width: 220px; max-height: 180px; border-radius: 10px; }
.wa-block { color: var(--danger); font-weight: 600; }
/* The approved template's own wording, shown where the free-text box used
   to sit. Deliberately looks like a quoted message rather than a field —
   it is not editable, and a box that looks like an input invites typing
   into it. */
.wa-template-body {
  margin: 0; padding: 12px 14px;
  background: var(--chip, rgba(0,0,0,.04));
  border-radius: 12px;
  line-height: 1.5;
}
.wa-count { text-align: right; }

/* ---------------- picking a subscription term ----------------
   Four cards side by side. The saving is the argument for the longer
   ones, so it is on the card rather than behind a tap in a dropdown. */
.plan-grid {
  display: grid; gap: 10px; margin: 14px 0 4px;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
}
.plan-card {
  position: relative; text-align: center; cursor: pointer;
  background: #fff; border: 1.5px solid var(--line); border-radius: 14px;
  padding: 18px 12px 16px; font: inherit; color: var(--ink);
  display: flex; flex-direction: column; gap: 3px;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.plan-card:hover { border-color: var(--plum-2); transform: translateY(-1px); }
.plan-card.on {
  border-color: var(--plum); background: #faf6ff;
  box-shadow: 0 0 0 3px rgba(91, 58, 142, .1);
}
.plan-term { font-size: 13px; color: var(--muted); font-weight: 600; }
.plan-price { font-size: 24px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.plan-per { font-size: 12px; color: var(--muted); }
.plan-save {
  position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
  background: #1f7a3d; color: #fff; font-size: 10.5px; font-weight: 700;
  letter-spacing: .02em; padding: 3px 9px; border-radius: 999px; white-space: nowrap;
}

/* ---------------- what payroll costs, right now ----------------
   Not a card among cards. It is the answer to the question the
   Employees screen gets opened with, so it sits above the tabs and
   reads at arm's length. */
.pay-banner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
  background: linear-gradient(140deg, #2e1f30 0%, var(--plum) 100%);
  color: #f4eff8; border-radius: var(--radius);
  padding: 20px 22px; margin-bottom: 16px; box-shadow: var(--shadow);
}
.pb-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pb-label {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: 1.3px;
  opacity: .72; font-weight: 700;
}
.pb-amount { font-size: 34px; color: #fff; line-height: 1.1; letter-spacing: -.5px; }
.pb-sub { font-size: 12.5px; opacity: .72; }
.pay-banner .btn.primary {
  background: #fff; color: var(--plum); border-color: #fff; flex: 0 0 auto;
}
.pay-banner .btn.primary:hover { filter: brightness(.94); }
@media (max-width: 620px) {
  .pay-banner { padding: 16px 16px; }
  .pb-amount { font-size: 28px; }
  .pay-banner .btn.big { width: 100%; }
}

/* A face beside a name. Only the salon's own website uses these; here
   they are so an owner can see at a glance who still has none. */
.who-cell { display: flex; align-items: center; gap: 10px; min-width: 0; }
.who-pic {
  width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto;
  object-fit: cover; background: #f1ecf7;
}
.who-blank {
  display: grid; place-items: center; font-size: 14px; font-weight: 700;
  color: var(--plum-2);
}

/* A badge that is also a button — used where a row wants to say
   "something happened here" and offer the detail in one tap. */
.link-badge {
  border: 0; cursor: pointer; font: inherit; font-size: 10.5px;
  font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
}
.link-badge:hover { filter: brightness(.93); }

/* ---------------- the chair-side board ----------------
   Cards rather than a table. This screen is read at arm's length on a
   phone held in one hand, by somebody whose other hand is busy. */
.tkt-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.tkt {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 15px 16px; display: flex; flex-direction: column; gap: 10px;
  border-left: 4px solid transparent;
}
/* The one you are on. On a busy board it has to be findable without
   reading anything. */
.tkt.mine { border-left-color: var(--rose); }
.tkt-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.tkt-head p { margin: 3px 0 0; }
.tkt-name { font-size: 16.5px; }
.tkt-total { font-size: 18px; white-space: nowrap; }
.tkt-who { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.tkt-who .badge { margin-left: 0; }

/* One client, two people on them. The badges alone read as two separate
   customers; this is the line that says they are not. */
.shared-note { font-style: italic; }

/* "Waiting — nobody on them yet", under a stylist's own chairs. Sits
   between two grids, so it needs the air above it more than below. */
.sub-head {
  margin: 26px 0 10px; font-size: 14px; font-weight: 600;
  letter-spacing: .02em; color: var(--muted, #6e6e73);
}

.tkt-lines {
  display: flex; flex-direction: column; gap: 6px;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 9px 0;
}
.tkt-line { display: flex; align-items: center; gap: 8px; }
.tl-name { flex: 1; min-width: 0; font-size: 14px; }
.tl-who { flex: 0 0 auto; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-price { font-weight: 700; font-size: 14px; white-space: nowrap; }
.tkt-actions { justify-content: flex-start; }

/* who is free, at a glance */
.floor-row { display: flex; flex-wrap: wrap; gap: 8px; }
.floor-chip {
  display: flex; flex-direction: column; gap: 1px;
  padding: 8px 12px; border-radius: 10px; background: #f2f7f2;
  border: 1px solid #d8e8d8; min-width: 108px;
}
.floor-chip.busy { background: #fdf3ef; border-color: #f0d4c6; }
.floor-chip strong { font-size: 13.5px; }
.floor-chip .small { color: var(--muted); font-size: 11.5px; }

/* picking a service at the chair — big targets, one hand */
.svc-pick { display: grid; gap: 7px; margin-top: 10px; max-height: 44vh; overflow-y: auto; }
.svc-pick-btn {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; text-align: left; width: 100%; padding: 12px 14px;
}

/* ---------- sharing one printer across devices ----------
   Sits under the Bluetooth panel, in Settings and behind the printer
   chip on the billing screen. Deliberately plain: it is a switch and
   two lines of honest explanation, not a feature to be sold twice. */
.station-panel { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line, #e6e0ea); }
.station-panel .field { margin: 8px 0; }
.station-panel input[type="text"] {
  padding: 9px 11px; border: 1px solid var(--line, #e6e0ea);
  border-radius: 9px; font: inherit; background: var(--card, #fff); color: inherit;
}

/* The field a person never sees. Off-screen rather than display:none,
   because a script that skips hidden inputs would skip the trap too. */
.login-trap {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  opacity: 0; pointer-events: none;
}

/* What earlier cycles still owe, shown beside the cycle it rides into.
   Loud enough to be seen, quiet enough not to read as an error. */
.carry-chip {
  display: inline-block; margin-left: 7px; padding: 1px 8px;
  border-radius: 9px; font-size: 11px; font-weight: 700;
  background: #eef7ef; color: #1c7a4a;
}
.carry-chip.owes { background: #fbeeee; color: #b03a3a; }

/* A client who is finished and waiting on the counter. */
.tkt.ready { border-color: #1c6b46; box-shadow: 0 0 0 1px #1c6b46 inset; }
.badge.ready-badge { background: #e6f4ec; color: #1c6b46; font-weight: 700; }

/* Setting a counter computer up to print without a dialog. */
.desk-print { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line, #e7dfe4); }
.step-list { margin: 8px 0 0; padding-left: 20px; font-size: 12.5px; color: var(--ink-2, #4a3b4d); line-height: 1.7; }
.step-list li { margin-bottom: 3px; }

/* Who can take the next customer, answerable from across the room. */
.floor-chip.free { background: #eef7ef; border-color: #b7dcc4; }
.floor-chip.free .floor-state { color: #1c7a4a; font-weight: 800; letter-spacing: .4px; }
.floor-chip.busy .floor-state { color: #a2543f; font-weight: 700; }

/* =============================================================
   Counter tablets

   A device propped on a counter, tapped by somebody holding a
   comb in the other hand. Everything here is sized for that:
   big targets, names readable from a step back, and nothing
   that needs a second look to hit.
   ============================================================= */
.name-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
  margin-top: 4px;
}

.name-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 132px;
  padding: 18px 12px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow);
  cursor: pointer;
  text-align: center;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.name-tile:active { transform: scale(.97); }

.name-tile:hover {
  border-color: #f0c9d5;
  box-shadow: 0 2px 4px rgba(37, 24, 38, .06), 0 14px 32px rgba(37, 24, 38, .10);
}

.name-initials {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: linear-gradient(160deg, #fbe6ec, #f6d9e2);
  color: #a8355a;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: .5px;
}

.name-tile.busy .name-initials {
  background: linear-gradient(160deg, #fdf1ea, #f8e2d4);
  color: #a2543f;
}

.name-word {
  font-size: 15.5px;
  line-height: 1.25;
  word-break: break-word;
}

.name-state {
  color: #1c7a4a;
  font-weight: 800;
  letter-spacing: .4px;
  text-transform: uppercase;
  font-size: 11px;
}

.name-tile.busy .name-state { color: #a2543f; }

/* The plain statement of what this device is, and the way back. */
.counter-foot {
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.counter-foot p { margin: 0; max-width: 60ch; }

/* On a counter the heading IS the person, so it carries the weight a
   screen title normally would. */
.counter-screen .screen-head h1 { letter-spacing: -.4px; }

@media (max-width: 900px) {
  .name-grid { grid-template-columns: repeat(auto-fill, minmax(122px, 1fr)); gap: 11px; }
  .name-tile { min-height: 112px; padding: 14px 9px; }
  .name-initials { width: 44px; height: 44px; font-size: 16.5px; }
  .name-word { font-size: 14px; }
}

/* Cutting a list the way a salon thinks about it. The count on each
   chip is half the point — "31 slipping away" is a fact somebody acts
   on without opening anything. */
.cat-chips { margin: 0 0 12px; }
.chip.chip-empty { opacity: .55; }
.chip.chip-empty.active { opacity: 1; }
.cat-hint { margin: -6px 0 14px; max-width: 68ch; }

/* =============================================================
   Two plans, then four terms

   Asked in that order and drawn in that order: what the software is
   going to do, and only then how long to pay for it. Eight prices in
   one row would ask both at once and answer neither.
   ============================================================= */
.tier-row { margin-bottom: 12px; }

.tier-row .seg { display: inline-flex; align-items: baseline; gap: 2px; }

.plan-includes { margin-top: 14px; }

.plan-includes p { margin: 0 0 8px; }

.plan-includes p + p { margin-top: 10px; }

.plan-list {
  list-style: none;
  margin: 0 0 4px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2px 18px;
}

.plan-list li {
  position: relative;
  padding-left: 18px;
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.7;
}

.plan-list li::before {
  content: '';
  position: absolute;
  left: 2px; top: 9px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ok);
  opacity: .65;
}

/* =============================================================
   A busy floor

   Forty clients at once is an ordinary Saturday, and the board has to
   stay readable at that size. Reception's job is a queue with three
   places in it, so the board is drawn as those three.
   ============================================================= */
.stage-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin: 26px 0 10px;
}

.stage-head .sub-head { margin: 0; }

/* Somebody left too long. Not a colour anybody has to learn — it is
   the same red the software uses for everything that is going wrong. */
.waited-long {
  color: var(--danger);
  font-weight: 650;
}

/* A chair asking for something. Loud, because it is one person waiting
   on another person rather than on the software. */
.tkt-call {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin: 10px 0 2px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #fdf3ef;
  border: 1px solid #f0d4c6;
}

.tkt-call .call-what {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #a2543f;
}

.tkt-call .call-what strong { font-size: 14px; }

.tkt-call .btn { margin-left: auto; }

/* Four buttons, no typing — see askForHelp(). */
.call-pick {
  display: grid;
  gap: 10px;
}

.call-pick .btn.big {
  width: 100%;
  justify-content: flex-start;
  text-align: left;
  min-height: 52px;
}

/* One thing at a time, and the count when it happens again. */
.toast-msg { display: block; }