/* SocialPulse — design tokens follow the validated data-viz palette.
   Light and dark are both selected sets, not an automatic inversion. */

:root {
  --plane:        #f9f9f7;
  --surface:      #fcfcfb;
  --surface-2:    #f2f1ed;
  --ink:          #0b0b0b;
  --ink-2:        #52514e;
  --muted:        #898781;
  --grid:         #e1e0d9;
  --axis:         #c3c2b7;
  --border:       rgba(11, 11, 11, .10);
  --shadow:       0 1px 2px rgba(11,11,11,.04), 0 8px 24px rgba(11,11,11,.05);

  /* Brand purple, taken from the MASH mark and validated against the
     data-viz gates (lightness band, chroma, CVD separation, contrast). */
  --brand:    #9d25cd;
  --brand-2:  #c251f1;
  --series-1: #9d25cd;  /* brand purple */
  --series-2: #eb6834;  /* orange       */
  --series-3: #1baf7a;  /* aqua         */
  --series-4: #eda100;  /* yellow       */

  --good:     #0ca30c;
  --warning:  #fab219;
  --serious:  #ec835a;
  --critical: #d03b3b;
  --good-ink: #006300;

  --radius: 12px;
  --radius-sm: 8px;
  --font: system-ui, -apple-system, "Segoe UI", "Noto Kufi Arabic", sans-serif;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --plane:     #0d0d0d;
    --surface:   #1a1a19;
    --surface-2: #242422;
    --ink:       #ffffff;
    --ink-2:     #c3c2b7;
    --muted:     #898781;
    --grid:      #2c2c2a;
    --axis:      #383835;
    --border:    rgba(255, 255, 255, .10);
    --shadow:    none;
    --brand:     #c251f1;
    --brand-2:   #d47bf5;
    --series-1:  #c251f1;
    --series-2:  #d95926;
    --series-3:  #199e70;
    --series-4:  #c98500;
    --good-ink:  #0ca30c;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --plane:     #0d0d0d;
  --surface:   #1a1a19;
  --surface-2: #242422;
  --ink:       #ffffff;
  --ink-2:     #c3c2b7;
  --muted:     #898781;
  --grid:      #2c2c2a;
  --axis:      #383835;
  --border:    rgba(255, 255, 255, .10);
  --shadow:    none;
  --brand:     #c251f1;
  --brand-2:   #d47bf5;
  --series-1:  #c251f1;
  --series-2:  #d95926;
  --series-3:  #199e70;
  --series-4:  #c98500;
  --good-ink:  #0ca30c;
  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--plane);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
.muted { color: var(--muted); }
.secondary { color: var(--ink-2); }
.tabular { font-variant-numeric: tabular-nums; }
.ts { direction: ltr; unicode-bidi: isolate; white-space: nowrap; }

/* ------------------------------------------------------------ top bar */
.topbar {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--border);
}
.topbar__inner {
  max-width: 1240px; margin: 0 auto; padding: 0 20px; height: 60px;
  display: flex; align-items: center; gap: 24px;
}
.brand { font-weight: 700; font-size: 15.5px; display: flex; align-items: center; gap: 9px; letter-spacing: -.01em; }
.brand__logo { width: 26px; height: 26px; flex: none; display: block; }
.brand__text { white-space: nowrap; }
.brand__text small { display: block; font-size: 10.5px; font-weight: 500; color: var(--muted); letter-spacing: .02em; margin-top: -3px; }
.nav { display: flex; gap: 4px; margin-inline-start: auto; }
.nav a {
  padding: 7px 14px; border-radius: var(--radius-sm); color: var(--ink-2);
  font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 6px;
}
.nav a:hover { background: var(--surface-2); color: var(--ink); }
.nav a.is-active { background: var(--surface-2); color: var(--ink); font-weight: 600; }
.topbar__actions { display: flex; align-items: center; gap: 8px; }

.icon-btn {
  width: 34px; height: 34px; border-radius: var(--radius-sm); cursor: pointer;
  border: 1px solid var(--border); background: var(--surface); color: var(--ink-2); font-size: 15px;
}
.icon-btn:hover { background: var(--surface-2); color: var(--ink); }

.menu { position: relative; }
.menu summary { list-style: none; cursor: pointer; }
.menu summary::-webkit-details-marker { display: none; }
.avatar {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--brand); color: #fff; font-weight: 700; font-size: 14px;
}
.menu__body {
  position: absolute; inset-inline-start: 0; top: 44px; min-width: 200px; padding: 6px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); display: grid; gap: 2px;
}
.menu__head { padding: 8px 10px 10px; display: grid; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.menu__head span { font-size: 12px; }
.menu__body a, .menu__body button {
  padding: 8px 10px; border-radius: var(--radius-sm); font-size: 14px; text-align: start;
  border: 0; background: none; color: var(--ink); cursor: pointer; font-family: inherit; width: 100%;
}
.menu__body a:hover, .menu__body button:hover { background: var(--surface-2); }

/* ------------------------------------------------------------ layout */
.page { max-width: 1240px; margin: 0 auto; padding: 28px 20px 64px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.page-head h1 { font-size: 24px; margin: 0 0 2px; letter-spacing: -.01em; }
.page-head p { margin: 0; color: var(--muted); font-size: 14px; }

.grid { display: grid; gap: 16px; }
.grid--stats { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }

.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow);
}
.card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.card__head h2, .card__head h3 { margin: 0; font-size: 15px; font-weight: 600; }
.card__sub { font-size: 12.5px; color: var(--muted); margin: -8px 0 14px; }

/* ------------------------------------------------------------ stat tiles */
.stat { display: grid; gap: 4px; }
.stat__label { font-size: 12.5px; color: var(--muted); font-weight: 500; }
.stat__value { font-size: 28px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.stat__meta { font-size: 12.5px; color: var(--ink-2); display: flex; align-items: center; gap: 6px; }
.delta--up { color: var(--good-ink); font-weight: 600; }
.delta--down { color: var(--critical); font-weight: 600; }

/* ------------------------------------------------------------ status */
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
.dot--green { background: var(--good); }
.dot--amber { background: var(--warning); }
.dot--red   { background: var(--critical); }

.pill {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px;
  border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.7;
  background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--border);
}
.pill--good     { background: color-mix(in srgb, var(--good) 14%, transparent);     color: var(--good-ink);  border-color: transparent; }
.pill--warning  { background: color-mix(in srgb, var(--warning) 22%, transparent);  color: #7a5200;          border-color: transparent; }
.pill--serious  { background: color-mix(in srgb, var(--serious) 22%, transparent);  color: #8a3d18;          border-color: transparent; }
.pill--critical { background: color-mix(in srgb, var(--critical) 15%, transparent); color: var(--critical);  border-color: transparent; }
:root[data-theme="dark"] .pill--warning { color: var(--warning); }
:root[data-theme="dark"] .pill--serious { color: var(--serious); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pill--warning { color: var(--warning); }
  :root:not([data-theme="light"]) .pill--serious { color: var(--serious); }
}

/* ------------------------------------------------------------ diagnostics */
.card--alarm { border-color: color-mix(in srgb, var(--critical) 40%, transparent); }
.diag {
  display: flex; gap: 11px; align-items: flex-start; padding: 11px 12px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface);
}
.diag__icon {
  width: 22px; height: 22px; border-radius: 50%; flex: none; display: grid;
  place-items: center; font-size: 12px; font-weight: 700; color: #fff;
}
.diag--ok   .diag__icon { background: var(--good); }
.diag--warn .diag__icon { background: var(--warning); color: #4a3200; }
.diag--fail .diag__icon { background: var(--critical); }
.diag--fail { border-color: color-mix(in srgb, var(--critical) 35%, transparent); }
.diag__body { flex: 1; min-width: 0; }
.diag__title { font-weight: 600; font-size: 14px; margin-bottom: 2px; }
.diag__detail { font-size: 12.8px; color: var(--ink-2); line-height: 1.65; }
.diag__fix { font-size: 12.5px; color: var(--brand); margin-top: 6px; font-weight: 500; }
.diag__env {
  margin: 8px 0 0; padding: 9px 11px; background: var(--surface-2); border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px;
  white-space: pre-wrap; overflow-x: auto; color: var(--ink); line-height: 1.7;
}

/* ------------------------------------------------------------ reach strip */
.reach {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 11px 13px; border-radius: var(--radius-sm); background: var(--surface-2);
  font-size: 13.5px;
}
.reach--warn { background: color-mix(in srgb, var(--critical) 9%, var(--surface-2)); }
.reach__label { color: var(--muted); font-size: 12.5px; }

/* ------------------------------------------------------------ add bar */
.addbar { padding: 16px; border-color: color-mix(in srgb, var(--brand) 28%, var(--border)); }
.addbar__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.addbar__head h2 { margin: 0; font-size: 15px; font-weight: 600; }
.addbar__row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }

/* ------------------------------------------------------------ owner chip */
.owner { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; white-space: nowrap; }
.avatar--sm { width: 24px; height: 24px; font-size: 11px; }

/* ------------------------------------------------------------ dialog */
.sheet {
  border: 1px solid var(--border); border-radius: var(--radius); padding: 22px;
  background: var(--surface); color: var(--ink); max-width: 460px; width: calc(100% - 32px);
  box-shadow: 0 20px 60px rgba(11,11,11,.22);
}
.sheet::backdrop { background: rgba(11,11,11,.42); backdrop-filter: blur(2px); }

/* ------------------------------------------------------------ filter bar */
.filterbar { padding: 14px 16px; margin-bottom: 16px; }
.filterbar__row {
  display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 12px;
}
.filterbar__field { display: grid; gap: 0; min-width: 175px; }
.filterbar__field--grow { flex: 1; min-width: 220px; }
.filterbar__field label { font-size: 12px; color: var(--muted); margin-bottom: 5px; }
.filterbar__platforms {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  padding-top: 12px; border-top: 1px solid var(--border);
}
.filterbar__legend { font-size: 12px; color: var(--muted); margin-inline-end: 4px; }
.filterbar__platforms .chip {
  display: inline-flex; align-items: center; gap: 7px; font-family: inherit;
}
.filterbar__platforms .chip .badge-platform { transition: none; }
.filterbar__platforms .chip.is-active .badge-platform { box-shadow: 0 0 0 1.5px var(--plane); }

/* ------------------------------------------------------------ scroll boxes
   Long lists used to push everything below them off the screen — you had to
   scroll past all 28 pages to reach the next card. Each list now scrolls
   inside its own box, so the page stays the same height no matter how many
   rows are in it. --rows sets how many are visible.

   The height is FIXED, not a maximum: a card with three rows is exactly as tall
   as the same card with thirty. Cards that grow and shrink as data changes make
   the whole page jump around between refreshes. */
.scrollbox {
  --rows: 8;
  --row-h: 49px;
  height: calc(var(--rows) * var(--row-h));
  overflow-y: auto;
  overflow-x: hidden;               /* sideways scrolling is never wanted here */
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--axis) transparent;
}
.scrollbox--list { --row-h: 68px; }
.scrollbox--sm { --rows: 5; }
/* Grid lists must not stretch their rows to fill the fixed height. */
.list.scrollbox { align-content: start; }

/* Phones are narrow enough that some tables genuinely cannot fit; there,
   sideways scrolling beats squashing the text to nothing. */
@media (max-width: 900px) {
  .table-wrap.scrollbox { overflow-x: auto; }
}
.scrollbox::-webkit-scrollbar { width: 9px; height: 9px; }
.scrollbox::-webkit-scrollbar-track { background: transparent; }
.scrollbox::-webkit-scrollbar-thumb {
  background: var(--grid); border-radius: 999px; border: 2px solid var(--surface);
}
.scrollbox::-webkit-scrollbar-thumb:hover { background: var(--axis); }

/* The header has to stay put, otherwise you scroll and lose which column is which. */
.scrollbox thead th {
  position: sticky; top: 0; z-index: 2; background: var(--surface);
  box-shadow: inset 0 -1px 0 var(--border);
}
.scrollbox table { border-collapse: separate; border-spacing: 0; }
.scrollbox tbody td { border-bottom: 1px solid var(--border); }

/* A quiet hint that there is more below. */
.scrollhint { font-size: 11.5px; color: var(--muted); padding-top: 8px; text-align: center; }

/* ------------------------------------------------------------ tables */
.table-wrap { overflow-x: auto; margin: 0 -18px -18px; padding: 0 4px 4px; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
thead th {
  text-align: start; font-size: 12px; font-weight: 600; color: var(--muted);
  padding: 8px 10px; border-bottom: 1px solid var(--border); white-space: nowrap;
}
tbody td { padding: 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--surface-2); }
td.num, th.num { text-align: start; font-variant-numeric: tabular-nums; }

.acct { display: flex; align-items: center; gap: 9px; min-width: 120px; }
/* Long page names wrap instead of forcing the table wider than its card. */
.acct__body { min-width: 0; overflow-wrap: anywhere; }
.cell-tight { font-size: 12.5px; line-height: 1.45; }

/* ------------------------------------------------------------ pictures
   The platform badge sits underneath as the fallback: if the picture 404s the
   badge is already there, so nothing collapses or shows a broken-image icon. */
.pic { position: relative; width: 34px; height: 34px; flex: none; }
.pic--sm { width: 26px; height: 26px; }
.pic--lg { width: 46px; height: 46px; }
.pic__img {
  position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 8px;
  object-fit: cover; background: var(--surface-2); display: block;
}
.pic--round .pic__img, .pic--round .badge-platform, .pic--round .avatar { border-radius: 50%; }
.pic .badge-platform, .pic .avatar { width: 100%; height: 100%; font-size: 12px; }
.pic__flag {
  position: absolute; inset-block-end: -3px; inset-inline-end: -3px;
  width: 15px; height: 15px; border-radius: 5px; font-size: 8px;
  display: grid; place-items: center; color: #fff; font-weight: 700;
  box-shadow: 0 0 0 2px var(--surface);
}
/* Picture URL died (token expired, page renamed). Hide the photo AND its corner
   flag together so the badge underneath is all that shows — a lone flag floating
   over the badge looks like a rendering bug. */
.pic.is-broken .pic__img, .pic.is-broken .pic__flag { display: none; }

/* A file input dressed as the picture itself: click the photo to replace it. */
.pic-upload { display: inline-flex; flex: none; margin: 0; cursor: pointer; position: relative; }
.pic-upload::after {
  content: "✎"; position: absolute; inset-block-end: -2px; inset-inline-start: -2px;
  width: 17px; height: 17px; border-radius: 50%; background: var(--brand); color: #fff;
  font-size: 9px; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--surface);
}
.acct__name { font-weight: 600; display: block; line-height: 1.3; }
.acct__meta { font-size: 11.5px; color: var(--muted); }

.badge-platform {
  width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center;
  font-size: 11px; font-weight: 700; color: #fff; flex: none;
}
.badge-platform--facebook { background: #1877f2; }
.badge-platform--youtube  { background: #ff0033; }
.badge-platform--tiktok   { background: #010101; border: 1px solid rgba(255,255,255,.25); }

/* ------------------------------------------------------------ forms & buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 16px; border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--surface); color: var(--ink); font: inherit; font-size: 14px;
  font-weight: 500; cursor: pointer; transition: background .12s ease;
}
.btn:hover { background: var(--surface-2); }
.btn--primary { background: var(--brand); border-color: transparent; color: #fff; font-weight: 600; }
.btn--primary:hover { filter: brightness(1.1); background: var(--brand); }
.btn--sm { padding: 6px 12px; font-size: 13px; }
.btn--ghost { background: none; border-color: transparent; color: var(--ink-2); }
.btn--ghost:hover { background: var(--surface-2); }
.btn:disabled { opacity: .55; cursor: not-allowed; }

label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 6px; color: var(--ink-2); }
input, select, textarea {
  width: 100%; padding: 9px 12px; border-radius: var(--radius-sm); font: inherit; font-size: 14px;
  border: 1px solid var(--border); background: var(--surface); color: var(--ink);
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid color-mix(in srgb, var(--brand) 45%, transparent); outline-offset: 1px; border-color: transparent;
}
.field { margin-bottom: 14px; }
.field-row { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.switch { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 14px; }
.switch input { width: auto; }

.filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.chip {
  padding: 6px 14px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface); font-size: 13px; color: var(--ink-2); cursor: pointer;
}
.chip.is-active { background: var(--ink); color: var(--plane); border-color: transparent; font-weight: 600; }

/* ------------------------------------------------------------ bulk selection
   Appears only once something is ticked, docked to the bottom so it is reachable
   without scrolling back up after selecting rows far down a long list. */
.bulkbar {
  position: sticky; inset-block-end: 12px; z-index: 30; margin-top: 12px;
  display: none; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px; border-radius: var(--radius);
  background: var(--ink); color: var(--plane);
  box-shadow: 0 10px 30px rgba(11,11,11,.28);
}
.bulkbar.is-visible { display: flex; }
.bulkbar__count { font-weight: 700; font-size: 14px; white-space: nowrap; }
.bulkbar__spacer { flex: 1; }
.bulkbar select {
  width: auto; min-width: 150px; padding: 6px 10px; font-size: 13px;
  background: color-mix(in srgb, var(--plane) 14%, transparent);
  color: var(--plane); border-color: color-mix(in srgb, var(--plane) 26%, transparent);
}
.bulkbar select option { background: var(--surface); color: var(--ink); }
.bulkbar .btn {
  background: color-mix(in srgb, var(--plane) 14%, transparent);
  border-color: color-mix(in srgb, var(--plane) 26%, transparent); color: var(--plane);
}
.bulkbar .btn:hover { background: color-mix(in srgb, var(--plane) 26%, transparent); }
.bulkbar .btn--danger { background: var(--critical); border-color: transparent; color: #fff; }

td.pick, th.pick { width: 34px; padding-inline-end: 0; }
.pick input { width: 16px; height: 16px; accent-color: var(--brand); cursor: pointer; }
tr.is-picked td { background: color-mix(in srgb, var(--brand) 8%, transparent); }

/* ------------------------------------------------------------ revenue page */
.revenue-foot {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 14px -18px -18px; padding: 13px 18px;
  border-top: 1px solid var(--border); background: var(--surface-2);
  border-end-start-radius: var(--radius); border-end-end-radius: var(--radius);
  font-size: 13px; color: var(--muted);
}
.revenue-foot .money { color: var(--ink); font-weight: 600; margin-inline-end: 14px; }
tr.is-dirty td { background: color-mix(in srgb, var(--warning) 12%, transparent); }
tr.is-dirty [data-save-row]::after { content: " •"; }

/* ------------------------------------------------------------ dues page */
.dirbar { width: 4px; align-self: stretch; border-radius: 99px; flex: none; min-height: 34px; }
.dirbar--in  { background: var(--good); }
.dirbar--out { background: var(--serious); }
.list-item.is-late {
  border-color: color-mix(in srgb, var(--critical) 40%, transparent);
  background: color-mix(in srgb, var(--critical) 5%, var(--surface));
}

/* A message the other side will actually read deserves to be shown as they
   will see it, not as a form field. */
.preview {
  white-space: pre-wrap; background: var(--surface-2); border-radius: var(--radius-sm);
  padding: 14px 16px; font-size: 13px; line-height: 1.9; color: var(--ink);
  min-height: 120px; border: 1px solid var(--border);
}

.seg { display: flex; gap: 8px; }
.seg__btn {
  flex: 1; padding: 9px 8px; border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--surface); color: var(--ink-2); font: inherit; font-size: 13.5px; cursor: pointer;
}
.seg__btn.is-on { background: var(--brand); border-color: transparent; color: #fff; font-weight: 600; }

textarea { resize: vertical; font-family: inherit; }
code { background: var(--surface-2); padding: 1px 5px; border-radius: 4px; direction: ltr;
       unicode-bidi: isolate; }

/* ------------------------------------------------------------ money */
.money { font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }
/* The revenue cell is a button; without a hint nobody discovers it is editable. */
[data-earnings] { border: 1px dashed var(--border) !important; text-align: start; }
[data-earnings]:hover { border-color: var(--brand) !important; }
.money--none { color: var(--muted); }
.money__meta { font-size: 11px; color: var(--muted); display: block; }

/* ------------------------------------------------------------ charts */
.chart { width: 100%; display: block; overflow: visible; }
.chart-legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-2); margin-top: 10px; }
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

.sp-tooltip {
  position: fixed; z-index: 60; pointer-events: none; padding: 8px 11px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: var(--shadow); font-size: 12.5px; color: var(--ink); white-space: nowrap;
  opacity: 0; transition: opacity .1s ease;
}
.sp-tooltip.is-visible { opacity: 1; }
.sp-tooltip b { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ misc */
.empty { text-align: center; padding: 44px 20px; color: var(--muted); }
.empty h3 { color: var(--ink); margin: 0 0 6px; font-size: 16px; }

.list { display: grid; gap: 10px; }
.list-item {
  display: flex; gap: 12px; align-items: flex-start; padding: 12px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface);
}
.list-item__body { flex: 1; min-width: 0; }
.list-item__title { font-weight: 600; font-size: 14px; margin-bottom: 2px; }
.list-item__meta { font-size: 12.5px; color: var(--muted); }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.toast {
  position: fixed; inset-block-end: 24px; inset-inline-start: 50%; transform: translateX(50%) translateY(20px);
  background: var(--ink); color: var(--plane); padding: 11px 20px; border-radius: 999px;
  font-size: 14px; opacity: 0; pointer-events: none; transition: all .18s ease; z-index: 80;
}
.toast.is-visible { opacity: 1; transform: translateX(50%) translateY(0); }

.auth {
  min-height: 100vh; display: grid; place-items: center; padding: 24px;
}
.auth__card { width: 100%; max-width: 400px; }
.auth__brand { text-align: center; margin-bottom: 22px; }
.auth__brand h1 { font-size: 21px; margin: 12px 0 4px; }
.auth__logo { width: 62px; height: 62px; margin: 0 auto; display: block; }
.auth__hint {
  margin-top: 16px; padding: 11px 13px; background: var(--surface-2);
  border-radius: var(--radius-sm); font-size: 12.5px; color: var(--ink-2); line-height: 1.8;
}
.error-msg { color: var(--critical); font-size: 13px; margin-bottom: 12px; min-height: 18px; }

.progress { height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.progress > i { display: block; height: 100%; border-radius: 999px; background: var(--brand); }

/* ------------------------------------------------------------ phones
   The page itself must never slide sideways. Tables are allowed to scroll
   inside their own card, but that scrolling has to stay contained — a table
   wider than the screen used to drag the whole layout with it, which is what
   made the page feel like it was swinging left and right. */
html, body { overflow-x: hidden; max-width: 100%; }

@media (max-width: 900px) {
  .table-wrap.scrollbox {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
}

@media (max-width: 720px) {
  .topbar__inner { gap: 10px; padding: 0 12px; height: 54px; }
  /* Six tabs cannot fit a phone. They scroll sideways instead of wrapping onto
     a second line and pushing the whole page down. */
  .nav {
    gap: 2px; margin-inline-start: auto; flex: 1; overflow-x: auto;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { padding: 6px 10px; font-size: 13px; white-space: nowrap; }
  .brand__text { display: none; }

  .page { padding: 18px 12px 56px; }
  .card { padding: 14px; }
  .card__head { flex-wrap: wrap; gap: 8px; }
  .table-wrap { margin: 0 -14px -14px; }
  .stat__value { font-size: 23px; }
  .grid--2 { grid-template-columns: 1fr; }
  .grid--stats { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }

  /* On a phone a fixed pixel height is the wrong idea: rows wrap to different
     heights, so it either clips a row in half or leaves a dead gap. Cap it
     against the screen instead. */
  .scrollbox {
    height: auto; max-height: 62vh; min-height: 150px; overflow-anchor: none;
  }

  /* Rows with many small controls stack instead of forcing the card wider:
     the text takes a line of its own, the buttons line up under it. */
  .list-item { flex-wrap: wrap; gap: 8px; align-items: center; }
  .list-item__body { flex: 1 1 100%; }
  .list-item .btn { flex: 0 0 auto; }
  .list-item .money { margin-inline-end: auto; }
  .dirbar { min-height: 26px; }

  /* Columns that are useful on a laptop and just noise on a phone. */
  .hide-sm { display: none !important; }

  /* Docked bars behave badly on mobile browsers whose toolbars come and go. */
  .bulkbar { position: static; }

  .filterbar__field, .filterbar__field--grow { min-width: 100%; }
  .addbar__row { gap: 10px; }
  .addbar__row > .btn { width: 100%; }
  .sheet { max-width: 100% !important; width: calc(100% - 20px); padding: 18px; }
  .field-row { grid-template-columns: 1fr; }
  .page-head { gap: 10px; }
  .page-head h1 { font-size: 20px; }
  .revenue-foot { margin: 12px -14px -14px; padding: 12px 14px; }
}