/* ===========================================================================
   Call Console — a billing desk for tracked phone numbers.
   Palette is drawn from switchboard hardware: aubergine panel, porcelain
   faceplate, copper for money, jade for settled, rose for outstanding.
   =========================================================================== */

:root {
  --ink: #191325;
  --plum: #3e2a5b;
  --plum-soft: #6a4f8f;
  --copper: #b6653a;
  --copper-soft: #f0dfd2;
  --jade: #2c7358;
  --jade-soft: #dcece5;
  --rose: #a52f4c;
  --rose-soft: #f6dee4;
  --porcelain: #f1eff4;
  --card: #ffffff;
  --line: #e0dbe8;
  --line-soft: #efecf4;
  --muted: #6c6383;

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;

  --shadow: 0 1px 2px rgba(25, 19, 37, 0.05), 0 8px 24px -14px rgba(25, 19, 37, 0.28);
  --pad: clamp(16px, 4vw, 28px);

  --font-display: 'Fraunces', Georgia, serif;
  --font-ui: 'Archivo', system-ui, -apple-system, sans-serif;
  /* Numbers and dates used to be in a typewriter face; the same friendly
     face as the rest of the app reads much warmer. tabular-nums (set on
     .mono) keeps the digits aligned. */
  --font-mono: 'Archivo', system-ui, -apple-system, sans-serif;

  --tab-h: 62px;
}

* { box-sizing: border-box; }

html, body, #root { height: 100%; }

body {
  margin: 0;
  background: var(--porcelain);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 600; letter-spacing: -0.015em; }
h1 { font-size: clamp(26px, 6vw, 34px); line-height: 1.1; }
h2 { font-size: 19px; }
h3 { font-size: 16px; }
p { margin: 0 0 10px; }
a { color: var(--plum); }

:focus-visible {
  outline: 2px solid var(--copper);
  outline-offset: 2px;
  border-radius: 3px;
}

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted);
}
.row { display: flex; align-items: center; gap: 10px; }
.row.wrap { flex-wrap: wrap; }
.spread { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.grow { flex: 1; min-width: 0; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stack { display: grid; gap: 14px; }
.center-screen { display: grid; place-items: center; min-height: 100dvh; padding: 24px; }

/* ------------------------------------------------------------------ shell */

.shell { min-height: 100dvh; }

.rail {
  position: fixed; inset: 0 auto 0 0; width: 232px;
  background: var(--ink); color: #efeaf6;
  padding: 26px 16px; display: none; flex-direction: column; gap: 4px; z-index: 20;
}
.rail .brand { padding: 0 10px 22px; }
.rail .brand-mark {
  font-family: var(--font-display); font-size: 21px; font-weight: 700; color: #fff;
  display: flex; align-items: center; gap: 9px;
}
.rail .brand-sub { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: #9a8fb4; margin-top: 3px; }

.nav-link {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; border-radius: var(--r-md);
  color: #c7bcdd; text-decoration: none; font-weight: 500; font-size: 14px;
  border: 0; background: none; width: 100%; cursor: pointer; text-align: left;
  font-family: inherit;
}
.nav-link:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }
.nav-link[aria-current='page'] { background: var(--plum); color: #fff; }
.nav-link .glyph { width: 18px; text-align: center; opacity: 0.9; }

.rail-foot { margin-top: auto; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.1); }

.main { padding: var(--pad) var(--pad) calc(var(--tab-h) + 34px); }
.page-head { margin-bottom: 18px; }
.page-head .sub { color: var(--muted); font-size: 14px; margin-top: 4px; }

.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  height: calc(var(--tab-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--ink); display: flex; align-items: stretch;
}
.tabbar button {
  flex: 1; border: 0; background: none; color: #9c92b6; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font-family: inherit; font-size: 10.5px; font-weight: 600; letter-spacing: 0.02em;
  border-top: 2px solid transparent;
}
.tabbar button .glyph { font-size: 17px; line-height: 1; }
.tabbar button[aria-current='page'] { color: #fff; border-top-color: var(--copper); }

@media (min-width: 900px) {
  .rail { display: flex; }
  .tabbar { display: none; }
  .main { margin-left: 232px; padding-bottom: 60px; max-width: 1240px; }
}

/* ------------------------------------------------------------------ cards */

.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow);
}
.card-pad { padding: 16px; }
.card-head {
  padding: 14px 16px; border-bottom: 1px solid var(--line-soft);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}

.grid { display: grid; gap: 14px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid-4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px) { .grid-4 { grid-template-columns: repeat(4, 1fr); } }

/* Stat: the number leads, in the display face, with a copper hairline under
   the label so a column of stats reads as a ledger rather than a dashboard. */
.stat { padding: 14px 15px; }
.stat .label { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.stat .value {
  font-family: var(--font-display); font-size: clamp(22px, 5vw, 28px);
  font-weight: 600; line-height: 1.1; margin-top: 6px; font-variant-numeric: tabular-nums;
}
.stat .value.money { color: var(--copper); }
.stat .foot { font-size: 12px; color: var(--muted); margin-top: 3px; }

/* ------------------------------------------------------- the duration tape */
/* Signature element: talk time drawn as tape off a reel. The notch marks the
   billing threshold, the ticks are five-minute marks. */

.tape { position: relative; height: 22px; border-radius: 3px; background: var(--line-soft); overflow: hidden; }
.tape .fill { position: absolute; inset: 0 auto 0 0; background: var(--plum); border-radius: 3px; }
.tape .fill.long { background: linear-gradient(90deg, var(--plum) 0%, var(--copper) 100%); }
.tape .tick { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(255,255,255,0.45); }
.tape .notch { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--copper); opacity: 0.75; }
.tape .label {
  position: absolute; inset: 0; display: flex; align-items: center; padding-left: 8px;
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 500;
  color: #fff; mix-blend-mode: normal; text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}
.tape.slim { height: 6px; }
.tape.slim .label { display: none; }

/* ------------------------------------------------------------- call rows */

.calls { display: grid; gap: 10px; }

.call {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 13px 14px; display: grid; gap: 10px; box-shadow: var(--shadow);
  border-left: 3px solid var(--plum-soft);
}
.call.unpriced { border-left-color: var(--rose); }
.call.priced { border-left-color: var(--jade); }
.call.selected { box-shadow: 0 0 0 2px var(--plum); }

.call .top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.call .profile { font-weight: 600; font-size: 15px; }
.call .when { font-size: 12.5px; color: var(--muted); white-space: nowrap; font-family: var(--font-mono); }
.call .meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--muted); }
.call .meta b { font-weight: 500; color: var(--ink); font-family: var(--font-mono); }
.call .actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

.price-tag {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px dashed var(--copper); color: var(--copper); background: #fff;
  padding: 7px 12px; border-radius: 999px; font-weight: 600; font-size: 14px;
  cursor: pointer; font-family: var(--font-ui); font-variant-numeric: tabular-nums;
}
.price-tag.set { border-style: solid; background: var(--copper-soft); }
.price-tag:hover { background: var(--copper-soft); }

/* -------------------------------------------------------------- controls */

.btn {
  font-family: inherit; font-size: 14px; font-weight: 600;
  padding: 10px 15px; border-radius: var(--r-md); cursor: pointer;
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.btn:hover { border-color: var(--plum-soft); }
.btn.primary { background: var(--plum); border-color: var(--plum); color: #fff; }
.btn.primary:hover { background: #4b3470; }
.btn.copper { background: var(--copper); border-color: var(--copper); color: #fff; }
.btn.ghost { background: transparent; border-color: transparent; color: var(--plum); }
.btn.danger { color: var(--rose); border-color: var(--rose-soft); }
.btn.sm { padding: 6px 11px; font-size: 13px; }
.btn.block { width: 100%; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.field { display: grid; gap: 6px; }
.field label { font-size: 12px; font-weight: 600; color: var(--muted); letter-spacing: 0.02em; }
.field .hint { font-size: 12px; color: var(--muted); }

input, select, textarea {
  font-family: inherit; font-size: 16px; /* 16px stops iOS zooming on focus */
  padding: 11px 12px; border: 1px solid var(--line); border-radius: var(--r-md);
  background: #fff; color: var(--ink); width: 100%;
}
input:focus, select:focus, textarea:focus { border-color: var(--plum-soft); outline: none; box-shadow: 0 0 0 3px rgba(106,79,143,0.15); }
input.mono { font-family: var(--font-mono); }
textarea { min-height: 74px; resize: vertical; }

.filters { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
.filters .full { grid-column: 1 / -1; }
@media (min-width: 760px) { .filters { grid-template-columns: repeat(4, 1fr); } }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
  background: var(--line-soft); color: var(--muted); white-space: nowrap;
}
.chip.jade { background: var(--jade-soft); color: var(--jade); }
.chip.rose { background: var(--rose-soft); color: var(--rose); }
.chip.copper { background: var(--copper-soft); color: var(--copper); }
.chip.plum { background: #ebe4f5; color: var(--plum); }

.segmented { display: inline-flex; background: var(--line-soft); padding: 3px; border-radius: 999px; gap: 2px; }
.segmented button {
  border: 0; background: none; font-family: inherit; font-size: 13px; font-weight: 600;
  padding: 6px 13px; border-radius: 999px; color: var(--muted); cursor: pointer;
}
.segmented button[aria-pressed='true'] { background: #fff; color: var(--ink); box-shadow: var(--shadow); }

/* ------------------------------------------------------------- calendar */

.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.cal-dow { font-size: 10.5px; text-align: center; color: var(--muted); font-weight: 700; letter-spacing: 0.08em; padding-bottom: 4px; }
.cal-day {
  aspect-ratio: 1 / 1.12; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: #fff; padding: 5px 5px 4px; display: flex; flex-direction: column;
  gap: 3px; cursor: pointer; font-family: inherit; text-align: left; min-width: 0;
}
.cal-day.empty { border-style: dashed; background: transparent; cursor: default; opacity: 0.45; }
.cal-day .num { font-size: 11.5px; font-weight: 700; color: var(--muted); font-family: var(--font-mono); }
.cal-day.today .num { color: var(--copper); }
.cal-day.today { border-color: var(--copper); }
.cal-day.active { box-shadow: 0 0 0 2px var(--plum); border-color: var(--plum); }
.cal-day .amt { font-size: 10.5px; font-weight: 700; color: var(--copper); font-family: var(--font-mono); margin-top: auto; }
.cal-day .cnt { font-size: 10px; color: var(--muted); }
.cal-day .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--rose); }

/* ---------------------------------------------------------------- charts */

.bars { display: grid; gap: 8px; }
.bar-row { display: grid; grid-template-columns: 92px 1fr auto; gap: 10px; align-items: center; font-size: 13px; }
.bar-track { height: 9px; background: var(--line-soft); border-radius: 999px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 999px; background: var(--plum); }
.bar-fill.copper { background: var(--copper); }
.bar-val { font-family: var(--font-mono); font-size: 12.5px; font-variant-numeric: tabular-nums; }

.spark { display: block; width: 100%; height: 46px; }

.hours { display: grid; grid-template-columns: repeat(24, 1fr); gap: 2px; align-items: end; height: 68px; }
.hours .h { background: var(--plum-soft); border-radius: 2px 2px 0 0; min-height: 2px; }
.hours-axis { display: grid; grid-template-columns: repeat(24, 1fr); gap: 2px; font-size: 8.5px; color: var(--muted); text-align: center; margin-top: 4px; font-family: var(--font-mono); }

/* ----------------------------------------------------------------- sheet */

.overlay {
  position: fixed; inset: 0; background: rgba(25, 19, 37, 0.42);
  display: flex; align-items: flex-end; justify-content: center; z-index: 60;
  animation: fade 0.15s ease;
}
.sheet {
  background: var(--card); width: 100%; max-width: 520px;
  border-radius: var(--r-lg) var(--r-lg) 0 0; padding: 18px var(--pad) calc(20px + env(safe-area-inset-bottom));
  max-height: 92dvh; overflow-y: auto; animation: rise 0.2s cubic-bezier(0.2, 0.8, 0.3, 1);
}
.sheet .grabber { width: 38px; height: 4px; border-radius: 999px; background: var(--line); margin: 0 auto 14px; }
@media (min-width: 700px) {
  .overlay { align-items: center; }
  .sheet { border-radius: var(--r-lg); padding-bottom: 20px; }
  .sheet .grabber { display: none; }
}
@keyframes rise { from { transform: translateY(18px); opacity: 0.6; } to { transform: none; opacity: 1; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.keypad { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.keypad button {
  padding: 12px 0; font-family: var(--font-mono); font-size: 15px; font-weight: 600;
  border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; cursor: pointer;
}
.keypad button:hover { background: var(--line-soft); }

/* ----------------------------------------------------------------- misc */

.toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--tab-h) + 18px + env(safe-area-inset-bottom)); z-index: 80;
  background: var(--ink); color: #fff; padding: 11px 16px; border-radius: 999px;
  font-size: 13.5px; font-weight: 500; box-shadow: 0 10px 30px -10px rgba(0,0,0,0.5);
  max-width: 90vw; text-align: center;
}
.toast.bad { background: var(--rose); }
@media (min-width: 900px) { .toast { bottom: 26px; left: calc(50% + 116px); } }
.empty { text-align: center; padding: 42px 20px; color: var(--muted); }
.empty .big { font-family: var(--font-display); font-size: 19px; color: var(--ink); margin-bottom: 6px; }

.banner {
  border: 1px solid var(--copper); background: var(--copper-soft);
  color: #6f3a1c; padding: 11px 14px; border-radius: var(--r-md); font-size: 13.5px;
}
.banner.bad { border-color: var(--rose); background: var(--rose-soft); color: #7c1f36; }

.skeleton { background: linear-gradient(90deg, var(--line-soft), #fff, var(--line-soft)); background-size: 200% 100%; animation: shimmer 1.2s infinite; border-radius: var(--r-md); height: 76px; }
@keyframes shimmer { to { background-position: -200% 0; } }

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
th { text-align: left; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); padding: 9px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
td { padding: 11px 12px; border-bottom: 1px solid var(--line-soft); white-space: nowrap; }
tr:last-child td { border-bottom: 0; }

.login-card { width: 100%; max-width: 380px; }
.login-mark { font-family: var(--font-display); font-size: 30px; font-weight: 700; }
.login-rule { height: 3px; width: 46px; background: var(--copper); border-radius: 2px; margin: 14px 0 18px; }

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

/* Sync button spinner */
.spin { display: inline-block; animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ===================== additions for the PHP build ===================== */

.plain { background: var(--porcelain); }

.setup {
  max-width: 460px; margin: 48px auto; padding: 26px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow);
}
.checklist { list-style: none; padding: 0; margin: 0 0 18px; }
.checklist li { padding: 7px 0 7px 26px; position: relative; font-size: 14px; border-bottom: 1px solid var(--line-soft); }
.checklist li:last-child { border-bottom: 0; }
.checklist li::before { position: absolute; left: 0; font-weight: 700; }
.checklist li.ok::before { content: '\2713'; color: var(--jade); }
.checklist li.warn::before { content: '!'; color: var(--copper); }

a.nav-link, a.btn, a.pill-link, a.cal-day-link { text-decoration: none; }

.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.modal-backdrop {
  position: fixed; inset: 0; background: rgba(25,19,37,0.42);
  display: flex; align-items: flex-end; justify-content: center; z-index: 60;
}
.modal {
  background: var(--card); width: 100%; max-width: 520px;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  padding: 18px var(--pad) calc(20px + env(safe-area-inset-bottom));
  max-height: 92dvh; overflow-y: auto;
}
@media (min-width: 700px) {
  .modal-backdrop { align-items: center; }
  .modal { border-radius: var(--r-lg); padding-bottom: 20px; }
}
.hidden { display: none !important; }

table.data td.num, table.data th.num { text-align: right; font-family: var(--font-mono); }

.pill-link {
  display: inline-block; padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--line); background: #fff;
  font-size: 13px; font-weight: 600; color: var(--ink);
}
.pill-link[aria-current="true"] { background: var(--plum); border-color: var(--plum); color: #fff; }

.cal-day-link { color: inherit; display: block; }

.form-grid { display: grid; gap: 12px; }
@media (min-width: 640px) { .form-grid.two { grid-template-columns: 1fr 1fr; } }

.muted-note { font-size: 12.5px; color: var(--muted); }

.flash {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--tab-h) + 18px + env(safe-area-inset-bottom)); z-index: 80;
  background: var(--ink); color: #fff; padding: 11px 16px; border-radius: 999px;
  font-size: 13.5px; font-weight: 500; box-shadow: 0 10px 30px -10px rgba(0,0,0,0.5);
  max-width: 90vw; text-align: center;
}
.flash.bad { background: var(--rose); }
.flash.good { background: var(--jade); }
@media (min-width: 900px) { .flash { bottom: 26px; left: calc(50% + 116px); } }

/* ======================= Chimney Spot mark ======================= */

.logo { display: inline-flex; align-items: center; gap: 11px; }
.logo-svg { flex: none; overflow: visible; }

.logo-words { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.logo-name {
  font-family: var(--font-display); font-weight: 700;
  letter-spacing: -0.015em; white-space: nowrap;
}
.logo-sub {
  font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); margin-top: 3px; white-space: nowrap;
}
.logo-lg .logo-name { font-size: 25px; }
.logo-sm .logo-name { font-size: 17px; }
.logo-sm .logo-sub  { font-size: 9.5px; letter-spacing: 0.12em; }

/* on the dark rail */
.rail .logo-name { color: #fff; }
.rail .logo-sub  { color: #9a8fb4; }

/* smoke: each puff rises, spreads and fades, then restarts */
.logo-svg .puff { opacity: 0; transform-origin: 32px 24px; }
.logo-svg .puff1 { animation: chimney-smoke 3.6s ease-out infinite; }
.logo-svg .puff2 { animation: chimney-smoke 3.6s ease-out infinite 1.2s; }
.logo-svg .puff3 { animation: chimney-smoke 3.6s ease-out infinite 2.4s; }


@keyframes chimney-smoke {
  0%   { opacity: 0;   transform: translate(0, 2px)      scale(.3); }
  12%  { opacity: .95; }
  40%  { opacity: .8;  transform: translate(-4px, -9px)   scale(.85); }
  70%  { opacity: .5;  transform: translate(2px, -17px)   scale(1.2); }
  100% { opacity: 0;   transform: translate(-6px, -26px)  scale(1.65); }
}

/* the ember breathes */
.logo-svg .ember { animation: chimney-ember 2.4s ease-in-out infinite; }
@keyframes chimney-ember {
  0%, 100% { opacity: 0.55; r: 2; }
  50%      { opacity: 1;    r: 2.6; }
}

@media (prefers-reduced-motion: reduce) {
  .logo-svg .puff { animation: none; opacity: 0.3; }
  .logo-svg .ember { animation: none; opacity: 0.8; }
}

/* login screen gets the big mark */
.login-card .logo { margin-bottom: 2px; }

/* ================= additions for the single-page HTML build ================ */

.view { display: none; }
.view.on { display: block; }

.tabbar a, .tabbar button { text-decoration: none; }
a.nav-link, a.btn, a.pill-link { text-decoration: none; }

.modal-backdrop {
  position: fixed; inset: 0; background: rgba(25,19,37,.42);
  display: flex; align-items: flex-end; justify-content: center; z-index: 60;
}
.modal {
  background: var(--card); width: 100%; max-width: 520px;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  padding: 18px var(--pad) calc(20px + env(safe-area-inset-bottom));
  max-height: 92dvh; overflow-y: auto;
}
@media (min-width: 700px) {
  .modal-backdrop { align-items: center; }
  .modal { border-radius: var(--r-lg); padding-bottom: 20px; }
}
.hidden { display: none !important; }

.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.form-grid { display: grid; gap: 12px; }
@media (min-width: 640px) { .form-grid.two { grid-template-columns: 1fr 1fr; } }

.pill-link {
  display: inline-block; padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--line); background: #fff; cursor: pointer;
  font-size: 13px; font-weight: 600; color: var(--ink); font-family: inherit;
}
.pill-link[aria-pressed="true"] { background: var(--plum); border-color: var(--plum); color: #fff; }

table.data { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.data td.num, table.data th.num { text-align: right; font-family: var(--font-mono); }

.flash {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--tab-h) + 18px + env(safe-area-inset-bottom)); z-index: 90;
  background: var(--ink); color: #fff; padding: 11px 16px; border-radius: 999px;
  font-size: 13.5px; font-weight: 500; box-shadow: 0 10px 30px -10px rgba(0,0,0,.5);
  max-width: 90vw; text-align: center;
}
.flash.bad { background: var(--rose); }
.flash.good { background: var(--jade); }
@media (min-width: 900px) { .flash { bottom: 26px; left: calc(50% + 116px); } }

.spin { display: inline-block; animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .logo-svg .puff { animation: none; opacity: .7; }
  .logo-svg .ember, .spin { animation: none; }
}

.boot { display: grid; place-items: center; min-height: 100dvh; color: var(--muted); }

/* ===================== mobile corrections ===================== */

/* The wordmark was a fixed 25px and set never to wrap, so on a 320-360px
   phone it ran outside its card and sat on top of what was underneath. */
.logo { max-width: 100%; }
.logo-words { min-width: 0; flex: 1; }
.logo-name { white-space: normal; overflow-wrap: anywhere; }
.logo-lg .logo-name { font-size: clamp(17px, 5.6vw, 25px); line-height: 1.05; }
.logo-sm .logo-name { font-size: clamp(15px, 4.4vw, 17px); }
.logo-sub { white-space: normal; }

/* Anything using .spread should stack rather than collide when it runs out
   of room. */
.spread { flex-wrap: wrap; }
.page-head.spread { align-items: flex-start; }
.card-head { flex-wrap: wrap; }

@media (max-width: 560px) {
  .login-card { padding: 20px !important; }
  .page-head .sub { font-size: 13px; }
  .page-head.spread > * { min-width: 0; }
  .page-head.spread .toolbar { width: 100%; }
  .page-head.spread .toolbar .btn { flex: 1; }

  /* four stat cards were cramped two-up; give the numbers room */
  .grid-4 { gap: 8px; }
  .stat { padding: 11px 12px; }
  .stat .label { font-size: 10px; letter-spacing: .08em; }
  .stat .value { font-size: 19px; }

  .call { padding: 12px; }
  .call .top { flex-wrap: wrap; gap: 2px; }
  .call .when { font-size: 11.5px; }
  .call .actions { flex-wrap: wrap; gap: 8px; }
  .price-tag { flex: 1; justify-content: center; }

  .filters { grid-template-columns: 1fr; }
  .toolbar { width: 100%; }

  .cal-day { padding: 4px 3px; }
  .cal-day .num { font-size: 10.5px; }
  .cal-day .cnt { display: none; }
  .cal-day .amt { font-size: 9.5px; }

  .bar-row { grid-template-columns: 78px 1fr auto; font-size: 12px; }
  table.data { font-size: 12.5px; }
  th, td { padding: 8px 9px; }

  .modal { padding-left: 16px; padding-right: 16px; }
  .keypad { grid-template-columns: repeat(4, 1fr); gap: 6px; }
}

/* very narrow phones */
@media (max-width: 360px) {
  .grid-4 { grid-template-columns: 1fr 1fr; }
  .tabbar button, .tabbar a { font-size: 9.5px; }
  .logo-sub { display: none; }
}

/* nothing should ever be able to push the page sideways */
html, body { max-width: 100%; overflow-x: hidden; }
.main { min-width: 0; }
.truncate { max-width: 100%; }

/* A call card sits in a grid; without this the grid column grows to fit the
   longest unbroken line (client name + phone number) and pushes the whole
   page wider than a phone screen. minmax(0,1fr) caps it at screen width. */
.calls { grid-template-columns: minmax(0, 1fr); }
.call { min-width: 0; grid-template-columns: minmax(0, 1fr); }
.call > * { min-width: 0; }
.grid > * { min-width: 0; }

/* ------------------------------- profits ------------------------------- */

/* The tick that records "the owner has handed Spot his share for this job". */
.spot-tick {
  gap: 8px; font-size: 13px; font-weight: 600; color: var(--muted);
  cursor: pointer; user-select: none;
  border: 1px dashed var(--line); border-radius: var(--r-md);
  padding: 8px 12px; background: #fff;
}
.spot-tick input { accent-color: var(--jade); cursor: pointer; margin: 0; }
.spot-tick.on {
  border-style: solid; border-color: var(--jade);
  background: var(--jade-soft); color: var(--jade);
}
#spotDueBar { margin-bottom: 12px; font-size: 14px; }

/* the admin's tappable "marked paid" date on a profit card */
.paid-date-edit {
  font-family: inherit; font-size: 12.5px; color: var(--plum);
  background: none; border: 0; padding: 0; cursor: pointer;
  text-decoration: underline dotted; text-underline-offset: 3px;
}
.paid-date-edit:hover { color: var(--copper); }

/* ---------------- status picker and status colours ---------------- */

/* just two choices now - Paid or Declined - so two generous buttons */
.statuses { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.status-pick { padding: 13px 8px; font-size: 14.5px; }

.status-pick {
  font-family: inherit; font-size: 13.5px; font-weight: 600;
  padding: 11px 8px; border-radius: var(--r-md); cursor: pointer;
  border: 1px solid var(--line); background: #fff; color: var(--muted);
}
.status-pick:hover { border-color: var(--plum-soft); }
.status-pick.on { background: var(--plum); border-color: var(--plum); color: #fff; }

.price-tag.st-offered  { border-color: var(--copper); background: var(--copper-soft); color: var(--copper); }
.price-tag.st-accepted,
.price-tag.st-paid     { border-color: var(--jade); background: var(--jade-soft); color: var(--jade); }
.price-tag.st-declined { border-color: var(--rose); background: var(--rose-soft); color: var(--rose); }

.call.declined { border-left-color: var(--rose); opacity: .82; }

.btn.sm.decline { color: var(--rose); padding: 6px 9px; }
.btn.sm.decline:hover { background: var(--rose-soft); }

@media (max-width: 560px) {
  .call .actions .row { width: 100%; }
  .call .actions .price-tag { flex: 1; }
}

/* jobs-a-day bars */
.daybars { display: flex; align-items: flex-end; gap: 2px; height: 90px; }
.daybars .db {
  flex: 1; min-width: 2px; background: var(--plum-soft);
  border-radius: 2px 2px 0 0; transition: background .15s ease;
}
.daybars .db:hover { background: var(--copper); }

/* command boxes with a copy button */
.cmdbox {
  display: flex; align-items: center; gap: 10px;
  background: var(--porcelain); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 10px 12px;
}
.cmdbox code, .cmdbox a {
  font-family: var(--font-mono); font-size: 12.5px;
  word-break: break-all; flex: 1; min-width: 0; color: var(--ink);
}
.cmdbox a { color: var(--plum); }
.cmdbox .btn { flex: none; }

/* ================= month bar, search and filters ================= */

.monthbar {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 12px; padding: 10px 12px;
}
.monthbar strong {
  font-family: var(--font-display); font-size: 17px;
  white-space: nowrap; min-width: 0;
}
.monthbar .grow { flex: 1; }
.monthbar .btn { flex: none; }

.searchbar { display: flex; gap: 10px; align-items: center; margin: 12px 0; padding: 10px 12px; }
.searchbar input { flex: 1; min-width: 0; }
.searchbar .btn { flex: none; white-space: nowrap; }
#filterPanel { margin-bottom: 12px; }
#bulkBar { margin-bottom: 12px; }

/* ================= bottom bar: make the current tab obvious ================= */

.tabbar {
  background: var(--ink);
  border-top: 1px solid rgba(255,255,255,.08);
}
.tabbar button, .tabbar a {
  flex: 1; border: 0; background: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; font-family: inherit; font-size: 10.5px; font-weight: 600;
  color: #b9b0cd;                     /* was too dim to read */
  border-top: 3px solid transparent;
  padding-top: 2px; text-decoration: none;
}
.tabbar button .glyph, .tabbar a .glyph { font-size: 18px; line-height: 1; }

.tabbar button[aria-current="page"],
.tabbar a[aria-current="page"] {
  color: #fff;
  border-top-color: var(--copper);
  background: linear-gradient(180deg, rgba(182,101,58,.28), rgba(182,101,58,0) 70%);
}
.tabbar button[aria-current="page"] .glyph,
.tabbar a[aria-current="page"] .glyph { color: #F0A55C; }

/* ================= mobile: stop things colliding ================= */

@media (max-width: 560px) {
  /* month arrows + label on one row, the two sync buttons on their own row,
     so the label never runs under the buttons on a narrow screen */
  .monthbar { flex-wrap: wrap; gap: 8px; }
  .monthbar strong { font-size: 15px; flex: 1; text-align: center; min-width: max-content; }
  .monthbar .grow { display: none; }
  .monthbar #quickSync, .monthbar #fullSync { flex: 1 1 40%; }

  .searchbar { flex-wrap: nowrap; }
  .searchbar input { font-size: 16px; }

  .filters { grid-template-columns: 1fr; gap: 8px; }

  #bulkBar .toolbar { gap: 6px; }
  #bulkBar .toolbar > * { flex: 1 1 auto; min-width: 0; }
  #bulkBar .chip { flex: 0 0 auto; }

  .grid-4 { grid-template-columns: 1fr 1fr; gap: 8px; }
  .stat .value { font-size: 20px; }
  .stat .foot { font-size: 11px; }

  .call .top { flex-wrap: wrap; }
  .call .top .when { width: 100%; }
  /* let the client name and number wrap instead of being cut off */
  .call .top .grow.truncate { white-space: normal; overflow-wrap: anywhere; }
  .call .meta { gap: 4px 10px; font-size: 12px; }
  .call .actions { flex-direction: column; align-items: stretch; gap: 8px; }
  .call .actions .row { justify-content: space-between; }
  .call .actions .price-tag { width: 100%; justify-content: center; }

  .page-head h1 { font-size: 26px; }
  .cmdbox { flex-wrap: wrap; }
  .cmdbox .btn { width: 100%; }
}

/* the wordmark is just the name now */
.logo-sub { display: none; }
.logo-name { line-height: 1.1; }

/* ============ the mark, coloured for whatever it sits on ============ */

.logo-lg .logo-svg { width: 54px; height: 54px; }
.logo-sm .logo-svg { width: 42px; height: 42px; }

/* Light background — the login card. Dark stack reads well on pale. */
.logo-svg .stack  { fill: #4a3269; }
.logo-svg .crown  { fill: #B6653A; }
.logo-svg .bricks { stroke: rgba(255,255,255,.20); stroke-width: 1.2; }
.logo-svg .ember  { fill: #F0A55C; }
.logo-svg .puff   { fill: #8B79B4; }

/* Dark sidebar — flip it. A dark stack on a dark panel cannot be seen, which
   is exactly what was happening. */
.rail .logo-svg .stack  { fill: #E4DAF2; }
.rail .logo-svg .crown  { fill: #E8905A; }
.rail .logo-svg .bricks { stroke: rgba(62,42,91,.42); stroke-width: 1.3; }
.rail .logo-svg .ember  { fill: #FFC178; }
.rail .logo-svg .puff   { fill: #F3EEFB; }

/* a touch more presence in the sidebar */
.rail .brand { padding-bottom: 20px; }
.rail .logo { gap: 12px; }
.rail .logo-name { font-size: 18px; color: #fff; }


/* the smoke does the work of making the mark read, so give it some size */
.logo-svg .puff1 { r: 5.4; }
.logo-svg .puff2 { r: 6.4; }
.logo-svg .puff3 { r: 4.8; }

/* ================= brand bar, for phones and tablets ================= */

.topbar {
  display: none;
  position: sticky; top: 0; z-index: 40;
  background: var(--ink);
  padding: 10px var(--pad);
  padding-top: calc(10px + env(safe-area-inset-top));
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.topbar .logo-name { color: #fff; font-size: 19px; }
.topbar .logo-svg  { width: 38px; height: 38px; }
.topbar .logo-svg .stack  { fill: #E4DAF2; }
.topbar .logo-svg .crown  { fill: #E8905A; }
.topbar .logo-svg .bricks { stroke: rgba(62,42,91,.42); stroke-width: 1.3; }
.topbar .logo-svg .ember  { fill: #FFC178; }
.topbar .logo-svg .puff   { fill: #F3EEFB; }

@media (max-width: 899px) {
  .topbar { display: block; }
  .main { padding-top: 16px; }

  /* The brand belongs at the top; the section title belongs with the list it
     titles, not floating above the month and the figures. */
  #v-calls.on { display: flex; flex-direction: column; }
  #v-calls .page-head   { order: 5; margin: 4px 0 8px; }
  #v-calls .monthbar    { order: 1; }
  #v-calls #callStats   { order: 2; }
  #v-calls .searchbar   { order: 3; }
  #v-calls #filterPanel { order: 4; }
  #v-calls #bulkBar     { order: 6; }
  #v-calls #callList    { order: 7; }
  #v-calls #pager       { order: 8; }

  /* the eyebrow was just noise on a small screen */
  #v-calls .page-head .eyebrow { display: none; }
  #v-calls .page-head h1 { font-size: 20px; }

  /* Calendar and Reports read fine in document order, but the big heading
     wastes the top of a phone screen, so shrink it there too. */
  #v-calendar .page-head, #v-reports .page-head,
  #v-profiles .page-head, #v-admin .page-head, #v-account .page-head {
    margin-bottom: 12px;
  }
  #v-calendar .page-head h1, #v-reports .page-head h1,
  #v-profiles .page-head h1, #v-admin .page-head h1, #v-account .page-head h1 {
    font-size: 22px;
  }
  #v-calendar .page-head .sub, #v-reports .page-head .sub { display: none; }
}

/* ---------------- expenses and net income ---------------- */

.expgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.expgrid .explabel {
  display: block; font-size: 11px; font-weight: 600; color: var(--muted);
  margin-bottom: 4px; letter-spacing: .02em;
}

.netline {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline;
  margin-top: 10px; padding: 9px 11px; border-radius: var(--r-md);
  background: var(--porcelain); font-family: var(--font-mono); font-size: 12.5px;
}
.netline .minus { color: var(--rose); }
.netline strong { margin-left: auto; font-size: 14px; color: var(--jade); }
.netline strong.bad { color: var(--rose); }

.moneyline {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline;
  font-family: var(--font-mono); font-size: 12px; color: var(--muted);
  padding-top: 2px;
}
.moneyline .minus { color: var(--rose); }
.moneyline .net { margin-left: auto; font-weight: 700; color: var(--jade); }
.moneyline .net.bad { color: var(--rose); }


/* ---- conversion rate cards, duplicates and spam ---- */
#convStats { margin-top: 14px; }
.stat.conv .value { color: var(--plum); }
.conv-track { height: 6px; border-radius: 3px; background: var(--jade-soft); margin: 8px 0 6px; overflow: hidden; }
.conv-fill  { height: 100%; border-radius: 3px; background: var(--jade); min-width: 2px; }

.call.notjob { border-left-color: var(--line, #d9d3e3); opacity: .6; }
.call.notjob .profile { text-decoration: line-through; text-decoration-thickness: 1px; }
.price-tag.st-spam { border-color: var(--muted); color: var(--muted); background: transparent; }
.btn.sm.notjob-btn { color: var(--muted); padding: 6px 9px; }
.btn.sm.notjob-btn:hover { color: var(--ink); }
#convStats:empty { display: none; }
@media (max-width: 899px) {
  #v-calls #callStats { order: 2; }
  #v-calls #convStats { order: 2; margin-top: 8px; grid-template-columns: 1fr 1fr; gap: 8px; }
}
@media (max-width: 560px) {
  .monthbar #addCall { flex: 1 1 100%; order: 9; }
}

/* the automatic "duplicate" memo */
.chip.dup { background: #fff4d6; color: #7a5600; }
.statuses:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); }


/* =====================================================================
   CALLS DASHBOARD  (v350)
   A dark hero card for the money, two conversion rings, four tiles.
   Everything enters with a short rise; rings and bars grow once .live is
   set by the script. All of it stands still under prefers-reduced-motion.
   ===================================================================== */

.dash { display: grid; gap: 12px; margin-bottom: 4px; grid-template-columns: minmax(0, 1fr); }
.dash:empty { display: none; }
@media (min-width: 1000px) {
  .dash { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 14px; }
  .dash .tiles { grid-column: 1 / -1; }
}
@media (max-width: 899px) { #v-calls #dash { order: 2; } }

@keyframes dash-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.dash > section, .dash .tile { animation: dash-rise .5s cubic-bezier(.2,.7,.2,1) both; }
.dash > section:nth-child(2) { animation-delay: .07s; }
.dash .tile { animation-delay: calc(.12s + var(--i, 0) * .05s); }

/* ---- hero ---- */
.hero {
  position: relative; overflow: hidden; color: #fff;
  border-radius: var(--r-lg); padding: 18px 18px 14px;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(182,101,58,.55) 0%, rgba(182,101,58,0) 55%),
    linear-gradient(150deg, #3e2a5b 0%, #241a38 60%, #191325 100%);
  box-shadow: 0 14px 34px -18px rgba(25,19,37,.75);
}
.hero::after {               /* a slow ember glow, the same one the logo has */
  content: ''; position: absolute; right: -60px; top: -60px; width: 200px; height: 200px;
  border-radius: 50%; background: radial-gradient(circle, rgba(255,193,120,.35), rgba(255,193,120,0) 70%);
  animation: ember-breathe 6s ease-in-out infinite; pointer-events: none;
}
@keyframes ember-breathe { 0%,100% { transform: scale(1); opacity: .7; } 50% { transform: scale(1.18); opacity: 1; } }
.hero > * { position: relative; z-index: 1; }
.herotop { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; }
.hlabel { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.66); }
.hvalue {
  font-family: var(--font-display); font-weight: 600; line-height: 1.05; margin-top: 4px;
  font-size: clamp(34px, 9vw, 46px); letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.hvalue.neg { color: #ffb4c2; }
.hside { display: grid; gap: 4px; text-align: right; font-size: 13px; flex: none; }
.hside .hk { color: rgba(255,255,255,.6); margin-right: 8px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.hside b { font-weight: 600; font-variant-numeric: tabular-nums; }

.keepbar { height: 6px; border-radius: 3px; background: rgba(255,255,255,.16); margin-top: 14px; overflow: hidden; }
.keepbar i { display: block; height: 100%; width: 0; border-radius: 3px;
  background: linear-gradient(90deg, #FFC178, #f0dfd2); transition: width .9s cubic-bezier(.2,.7,.2,1) .15s; }
.dash.live .keepbar i { width: var(--w); }
.keepnote { font-size: 12px; color: rgba(255,255,255,.66); margin-top: 6px; }

.strip { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.12); }
.stripbars { display: flex; align-items: flex-end; gap: 2px; height: 54px; }
.sbar { flex: 1 1 0; min-width: 0; height: 100%; padding: 0; border: 0; background: none; cursor: pointer;
  display: flex; align-items: flex-end; border-radius: 3px; -webkit-tap-highlight-color: transparent; }
.sbar:focus-visible { outline: 2px solid #FFC178; outline-offset: 1px; }
.scol { position: relative; display: flex; align-items: flex-end; width: 100%; height: 0; min-height: 2px;
  border-radius: 3px 3px 0 0; background: rgba(255,255,255,.3); overflow: hidden;
  transition: height .6s cubic-bezier(.2,.7,.2,1) calc(var(--i) * 14ms), background .15s; }
.dash.live .scol { height: max(2px, var(--h)); }
.spaid { display: block; width: 100%; background: #FFC178; border-top: 2px solid #2a1f40; box-sizing: border-box; }
.sbar:hover .scol, .sbar.hot .scol { background: rgba(255,255,255,.55); }
.sbar.today .scol { box-shadow: inset 0 0 0 1px rgba(255,255,255,.85); }
.stripfoot { display: flex; justify-content: space-between; gap: 10px; margin-top: 7px;
  font-size: 11.5px; color: rgba(255,255,255,.7); min-height: 16px; }
.striplegend i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin: 0 4px 0 8px; }
.striplegend .lp { background: #FFC178; } .striplegend .lo { background: rgba(255,255,255,.35); }

/* ---- conversion rings ---- */
.convbox { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow); padding: 14px 16px 16px; }
.convhead { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.convhead strong { font-family: var(--font-display); font-size: 17px; }
.convhead span { font-size: 11.5px; color: var(--muted); cursor: help; }
.rings { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ringcol { display: grid; justify-items: center; gap: 6px; text-align: center; min-width: 0;
  padding: 10px 8px; border-radius: var(--r-md); background: var(--porcelain); }
.ringcol.primary { background: linear-gradient(180deg, #f3eefb, var(--porcelain)); }
.ringhead { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
  display: flex; align-items: center; gap: 6px; }
.livedot { width: 7px; height: 7px; border-radius: 50%; background: var(--jade); position: relative; }
.livedot::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--jade);
  animation: ping 1.8s ease-out infinite; }
@keyframes ping { from { transform: scale(.5); opacity: .8; } to { transform: scale(1.5); opacity: 0; } }
.ring { position: relative; width: min(116px, 30vw); aspect-ratio: 1; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); display: block; }
.ring circle { fill: none; stroke-width: 7; }
.rtrack { stroke: var(--line); }
.rfill { stroke: var(--jade); stroke-linecap: round; stroke-dasharray: var(--c); stroke-dashoffset: var(--c);
  transition: stroke-dashoffset 1.1s cubic-bezier(.2,.7,.2,1) .15s; }
.dash.live .rfill { stroke-dashoffset: var(--to); }
.ringnum { position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 600; font-size: clamp(20px, 5.6vw, 26px);
  color: var(--ink); font-variant-numeric: tabular-nums; }
.ringsub { font-size: 12.5px; color: var(--muted); }
.ringsub b { color: var(--ink); font-weight: 600; }
.segbar { display: flex; gap: 2px; width: 100%; height: 6px; border-radius: 3px; overflow: hidden; }
.segbar i { display: block; height: 100%; width: 0; border-radius: 2px; transition: width .8s cubic-bezier(.2,.7,.2,1) .3s; }
.dash.live .segbar i { width: var(--w); }
.sp { background: var(--jade); } .sd { background: var(--rose); } .so { background: #cbc3da; }
.seglegend { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 10px; font-size: 11.5px; color: var(--muted); }
.seglegend i { display: inline-block; width: 7px; height: 7px; border-radius: 2px; margin-right: 4px; }
.ringnotes { font-size: 11.5px; color: var(--muted); line-height: 1.35; }

/* ---- tiles ---- */
.tiles { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 760px) { .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } }
.tile {
  position: relative; text-align: left; font: inherit; color: var(--ink);
  display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; align-items: start;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 13px 14px; box-shadow: var(--shadow); min-width: 0;
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
button.tile { cursor: pointer; -webkit-tap-highlight-color: transparent; }
button.tile:hover { transform: translateY(-2px); box-shadow: 0 10px 26px -14px rgba(25,19,37,.45); }
button.tile:active { transform: scale(.98); }
button.tile.on { border-color: var(--plum); box-shadow: 0 0 0 2px var(--plum); }
.tico { grid-column: 2; grid-row: 1 / span 2; width: 34px; height: 34px; border-radius: 10px; display: grid;
  place-items: center; font-size: 16px; background: #ebe4f5; color: var(--plum); }
.tile.good .tico { background: var(--jade-soft); color: var(--jade); }
.tile.bad  .tico { background: var(--rose-soft); color: var(--rose); }
.tile.warn .tico { background: var(--copper-soft); color: var(--copper); animation: nudge 2.4s ease-in-out infinite; }
@keyframes nudge { 0%, 86%, 100% { transform: none; } 90% { transform: rotate(-9deg); } 95% { transform: rotate(9deg); } }
.tlabel { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.tvalue { font-family: var(--font-display); font-weight: 600; font-size: 26px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.tfoot { grid-column: 1 / -1; font-size: 12px; color: var(--muted); margin-top: 2px; }

/* ---- call rows ---- */
.calls .call { animation: dash-rise .4s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--i, 0) * 28ms);
  transition: transform .16s, box-shadow .16s; }
@media (hover: hover) { .calls .call:hover { transform: translateY(-1px); box-shadow: 0 12px 28px -16px rgba(25,19,37,.4); } }
.call a.tel { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--muted); }
.price-tag { transition: transform .12s, background .15s; }
.price-tag:active { transform: scale(.96); }
@media (max-width: 560px) {
  .call .actions div.row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .call .actions div.row .price-tag { grid-column: 1 / -1; min-height: 44px; }
  .call .actions div.row .btn { min-height: 40px; border: 1px solid var(--line); }
  .call .actions label.row { justify-content: flex-start; width: auto; }
}

/* =====================================================================
   THE CALL SHEET  - slides up from the bottom on a phone, with the Save
   button pinned so it is always under the thumb.
   ===================================================================== */
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: none; } }
@keyframes pop-in { from { transform: translateY(10px) scale(.97); opacity: 0; } to { transform: none; opacity: 1; } }
.modal-backdrop { animation: fade .2s both; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.modal { animation: sheet-up .32s cubic-bezier(.2,.8,.2,1) both; overscroll-behavior: contain; position: relative; }
@media (max-width: 699px) {
  .modal { max-height: 94dvh; padding-top: 22px; }
  .modal::before { content: ''; position: absolute; top: 8px; left: 50%; width: 40px; height: 4px; margin-left: -20px;
    border-radius: 2px; background: var(--line); }
  .modal input, .modal select, .modal textarea { font-size: 16px; }   /* stops iOS zooming in on focus */
}
@media (min-width: 700px) { .modal { animation-name: pop-in; animation-duration: .22s; } }

.callhead { color: #fff; border-radius: var(--r-md); padding: 14px; margin-bottom: 14px;
  background: radial-gradient(120% 120% at 100% 0%, rgba(182,101,58,.5), rgba(182,101,58,0) 60%),
              linear-gradient(150deg, #3e2a5b, #191325); }
.chtop { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.chtop strong { font-size: 16px; min-width: 0; }
.chwhen { font-size: 12px; color: rgba(255,255,255,.7); white-space: nowrap; }
.chsub { font-size: 12.5px; color: rgba(255,255,255,.7); margin-top: 2px; }
.chline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 8px; font-size: 14px; }
.chpill { font-size: 11.5px; padding: 3px 8px; border-radius: 999px; background: rgba(255,255,255,.14); }
.chfoot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px;
  font-size: 12px; color: rgba(255,255,255,.66); }
.chfoot:empty { display: none; }
.chcall { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px;
  background: #fff; color: var(--plum); font-weight: 600; font-size: 13.5px; text-decoration: none; }
.chcall:active { transform: scale(.97); }

.statuses.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.status-pick { display: grid; justify-items: center; gap: 4px; min-height: 64px; transition: transform .12s, background .15s, border-color .15s, color .15s; }
.status-pick:active { transform: scale(.96); }
.status-pick .spi { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 14px;
  background: var(--porcelain); transition: inherit; }
.status-pick.sp-paid .spi     { color: var(--jade); background: var(--jade-soft); }
.status-pick.sp-declined .spi { color: var(--rose); background: var(--rose-soft); }
.status-pick.sp-paid.on     { background: var(--jade); border-color: var(--jade); }
.status-pick.sp-declined.on { background: var(--rose); border-color: var(--rose); }
.status-pick.sp-spam.on     { background: var(--ink);  border-color: var(--ink); }
.status-pick.on .spi { background: rgba(255,255,255,.22); color: #fff; animation: pop-in .25s both; }
#mStatusHint { min-height: 30px; }

#amountField { transition: opacity .2s; }
#amountField.dim { opacity: .45; }
.stepper { display: grid; grid-template-columns: 52px minmax(0, 1fr) 52px; gap: 8px; }
.stepper input { text-align: center; font-size: 22px !important; font-weight: 600; font-family: var(--font-display); height: 52px; }
.stepbtn { height: 52px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--porcelain);
  font-size: 24px; line-height: 1; color: var(--plum); cursor: pointer; font-family: inherit; transition: transform .1s, background .15s; }
.stepbtn:hover { background: #ebe4f5; } .stepbtn:active { transform: scale(.93); }
.quick { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 4px; margin-top: 2px; scrollbar-width: none;
  -webkit-overflow-scrolling: touch; }
.quick::-webkit-scrollbar { display: none; }
.qchip { flex: none; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--line); background: #fff;
  font: inherit; font-size: 13px; font-weight: 600; color: var(--ink); cursor: pointer; font-variant-numeric: tabular-nums;
  transition: background .15s, color .15s, border-color .15s; }
.qchip.on { background: var(--copper); border-color: var(--copper); color: #fff; }

@keyframes bump { 40% { transform: scale(1.025); } }
.netline.bump { animation: bump .3s; }

.more summary { cursor: pointer; font-size: 13px; color: var(--muted); padding: 6px 0; }

.sheet-foot { position: sticky; bottom: calc(-20px - env(safe-area-inset-bottom)); z-index: 2;
  margin: 14px calc(var(--pad) * -1) calc(-20px - env(safe-area-inset-bottom));
  padding: 12px var(--pad) calc(14px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(255,255,255,0), var(--card) 22%); }
.sheet-foot .btn { min-height: 50px; font-size: 16px; transition: background .2s, border-color .2s; }
.sheet-foot .btn.save-paid     { background: var(--jade); border-color: var(--jade); }
.sheet-foot .btn.save-declined { background: var(--rose); border-color: var(--rose); }
.sheet-foot p { font-size: 11.5px; margin: 8px 0 0; text-align: center; }
@media (max-width: 560px) { .sheet-foot { margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; } }

@media (prefers-reduced-motion: reduce) {
  .dash > section, .dash .tile, .calls .call, .modal, .modal-backdrop, .hero::after,
  .livedot::after, .tile.warn .tico, .status-pick.on .spi, .netline.bump { animation: none !important; }
  .keepbar i, .scol, .rfill, .segbar i { transition: none !important; }
}

/* dashboard polish */
.ringhead { height: 16px; }
.ringcol { align-content: start; }
.hero { display: flex; flex-direction: column; }
.strip { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.stripbars { flex: 1; min-height: 54px; }

/* The selection bar used to sit at the top of the list, out of sight once you
   had scrolled down to the call you were ticking. It now follows the screen. */
#bulkBar { position: sticky; top: 8px; z-index: 30; border-color: var(--plum);
  box-shadow: 0 12px 30px -14px rgba(25,19,37,.55); animation: dash-rise .25s both; }
@media (max-width: 899px) { #bulkBar { top: 6px; } }


/* ---- Profits rows: every figure under its own label ---- */
.pgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0;
  background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: var(--r-md); overflow: hidden; }
@media (min-width: 620px)  { .pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .pgrid { grid-template-columns: 1.1fr 1.2fr 1.3fr 1fr 1fr 1fr; } }
.pgrid > div { background: var(--card); padding: 9px 11px; min-width: 0; }
.pgrid dt { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 3px; }
.pgrid dd { margin: 0; font-size: 14.5px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere; }
.pgrid dd small { display: block; font-size: 11.5px; font-weight: 400; color: var(--muted); }
.pgrid dd.neg { color: var(--rose); } .pgrid dd.muted, .pgrid dd .muted { color: var(--muted); font-weight: 500; }
.pgrid .pnet { background: var(--jade-soft); } .pgrid .pnet dd { color: var(--jade); font-size: 16px; }
.pgrid a.tel { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--muted); }
.pgrid .paid-date-edit { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer;
  border-bottom: 1px dotted var(--muted); text-align: left; }
.pgrid .paid-date-edit span { color: var(--copper); font-weight: 400; }
#profitList .call .top { align-items: center; }