/* ==========================================================================
   skin.css — orange panel skin + New Order screen components.
   Loaded after theme.css / components.css / compat.css.
   Only overrides tokens and adds new blocks; kit files stay untouched.
   ========================================================================== */

/* Palette is the kit default (theme.css) — this file only adds layout blocks.
   --brand is the icon-tile tint; it tracks the accent so there is one colour
   story, and it never sits behind text. */
:root {
  --brand:      var(--accent);
  --brand-soft: var(--accent-soft);
}

/* ---- Top bar controls ----------------------------------------------------
   Every control in the top-right is the same height and the same corner. They
   sit in one row against one border, so any difference between them reads as a
   mistake rather than as a distinction — and they had four of them: the theme
   group 48px/10px, "Admin view" 44px and fully round, the balance chip 63.7px
   and 14px, "Add funds" 48px/10px. Three heights, three radii, and two
   different greys of border.
   ...............
   Measured, not guessed. So the numbers live in two variables that all four
   read, instead of being typed separately into each block where they drifted
   apart in the first place. Change the shape here and the whole row follows.
   The height is --tap, the touch-target size the rest of the panel is built
   on, so the row also stays thumb-sized on a phone. */
:root {
  --ctl-h: var(--tap);      /* 48px — one height for the whole top-right row */
  --ctl-r: var(--r-md);     /* 10px — one corner radius, matching .smm-btn   */
}

.smm-stats { display: flex; gap: var(--s-3); flex-wrap: wrap; align-items: center; }

/* Pinned to the shared size even though these already match it: the point of
   the variables is that nothing in this row can drift away from the others
   again, and a rule that agrees today is exactly the one that stops agreeing
   after somebody edits the kit file it comes from. */
.smm-topbar .smm-themes,
.smm-topbar .smm-btn { height: var(--ctl-h); border-radius: var(--ctl-r); }

/* Balance chip. Was the outlier at 63.7px: --fs-md at the body's 1.6 line
   height is a 30px line on its own, and two of those plus 16px of padding
   cannot fit a 48px control. Height is fixed rather than min-, and the two
   lines are set tight enough to sit inside it — 14.3 + 21.9 = 36px of text in
   38px of content box. The icon tile comes down 36px -> 28px to match. */
.smm-stat {
  display: flex; align-items: center; gap: var(--s-3);
  background: var(--surface); border: var(--border-w) solid var(--border);
  border-radius: var(--ctl-r); padding: var(--s-1) var(--s-3);
  height: var(--ctl-h); text-decoration: none; color: inherit;
}
.smm-stat:hover { background: var(--surface-3); }
.smm-stat__icon {
  display: grid; place-items: center; width: 28px; height: 28px; flex: none;
  border-radius: var(--r-sm); background: var(--brand-soft); color: var(--brand);
}
.smm-stat__label {
  display: block; font-size: var(--fs-xs); line-height: 1.1; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-subtle); font-weight: var(--fw-med);
}
.smm-stat__value {
  display: block; font-size: var(--fs-md); line-height: 1.15; font-weight: var(--fw-bold);
  color: var(--accent-text); font-family: var(--font-num); font-variant-numeric: tabular-nums;
}

/* Sidebar lists carry no bullets. */
.smm-sidebar ul { list-style: none; margin: 0; padding: 0; }
.smm-sidebar li { list-style: none; }

/* Admin <-> client switch. Was the only pill in the row, and the only one at
   44px rather than 48 — a different shape reads as a different kind of thing,
   and this is an ordinary link like the two beside it. Border comes down from
   --border-strong to --border so the three outlined controls are one family;
   nothing here needs to outrank the others. */
.smm-viewswitch {
  display: inline-flex; align-items: center; gap: var(--s-2);
  height: var(--ctl-h); padding: 0 var(--s-4);
  border: var(--border-w) solid var(--border); border-radius: var(--ctl-r);
  background: var(--surface); color: var(--ink);
  font-size: var(--fs-sm); font-weight: var(--fw-med);
  text-decoration: none; white-space: nowrap;
}
.smm-viewswitch:hover { background: var(--surface-3); color: var(--accent-text); }
@media (max-width: 700px) { .smm-viewswitch span { display: none; } }

/* ---- Sidebar: section labels, active pill, user card --------------------- */
.smm-sidebar__label {
  font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-subtle); font-weight: var(--fw-bold);
  padding: var(--s-4) var(--s-4) var(--s-2);
  margin: 0;
}
.smm-sidebar li.active > .smm-nav__link,
.smm-sidebar .smm-nav__link[aria-current="page"] {
  background: var(--accent-soft);
  color: var(--accent-text);
  font-weight: var(--fw-bold);
}
.smm-sidebar li.active > .smm-nav__link .smm-i { color: var(--accent-text); }

.smm-sidecard {
  margin: var(--s-5) var(--s-3) var(--s-4);
  padding: var(--s-3);
  display: flex; align-items: center; gap: var(--s-3);
  background: var(--surface); border: var(--border-w) solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-1);
}
.smm-sidecard__avatar {
  width: 44px; height: 44px; flex: none; border-radius: var(--r-md);
  display: grid; place-items: center; font-weight: var(--fw-bold);
  background: var(--brand-soft); color: var(--accent-text);
}
.smm-sidecard__name { display: block; font-weight: var(--fw-med); color: var(--ink); word-break: break-all; }
.smm-sidecard__meta { display: block; font-size: var(--fs-sm); color: var(--ink-muted); }
.smm-sidecard__out {
  margin-left: auto; flex: none; width: var(--tap-min); height: var(--tap-min);
  display: grid; place-items: center; border-radius: var(--r-md);
  color: var(--ink-muted); border: var(--border-w) solid transparent;
}
.smm-sidecard__out:hover { background: var(--surface-3); color: var(--accent-text); }

/* ---- Platform chooser ---------------------------------------------------- */
.smm-panelcard {
  background: var(--surface); border: var(--border-w) solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-1);
  padding: var(--s-5); margin-bottom: var(--s-5);
}
.smm-panelcard__title {
  display: flex; align-items: center; gap: var(--s-3);
  font-size: var(--fs-lg); font-weight: var(--fw-bold); margin: 0 0 var(--s-4);
}
.smm-panelcard__title .smm-i { color: var(--brand); }

/* Containment chain: a flex/grid item defaults to min-width:auto, so it grows to
   fit its content instead of letting an inner overflow:auto scroll. Every
   ancestor between the shell and the chip rows needs min-width:0, or the rows
   push the whole document sideways. */
.smm-main { min-width: 0; }
.smm-main > .smm-wrap { min-width: 0; }
.smm-panelcard { min-width: 0; }
.smm-order-grid > * { min-width: 0; }

/* Filter block: two boxes side by side. */
.smm-filters { display: grid; gap: var(--s-5); min-width: 0; }
@media (min-width: 900px) { .smm-filters { grid-template-columns: 1fr 1fr; } }
.smm-filter { min-width: 0; max-width: 100%; }
.smm-panelcard__sub { margin: calc(var(--s-4) * -1) 0 var(--s-4); color: var(--ink-muted); font-size: var(--fs-sm); }

/* ---- Multi-select box ---------------------------------------------------- */
.smm-multi { min-width: 0; }
.smm-multi__field { position: relative; }
.smm-multi__search {
  position: absolute; left: var(--s-3); top: 50%; transform: translateY(-50%);
  color: var(--ink-muted); pointer-events: none;
}
/* Two classes deep on purpose: components.css styles `input[type="text"]`,
   and an attribute selector outranks a single class — that is why the search
   icon sat on top of the placeholder. */
.smm-multi .smm-multi__input {
  width: 100%; min-height: var(--tap);
  padding-left: calc(var(--s-4) + 20px);
  padding-right: calc(var(--s-4) + 28px);
  border: var(--border-w) solid var(--border); border-radius: var(--r-md);
  background: var(--surface); color: var(--ink);
  font-family: inherit; font-size: var(--fs-base);
}
.smm-multi__input::placeholder { color: var(--ink-subtle); opacity: 1; }
.smm-multi__input:hover { border-color: var(--ink-muted); }

/* Chevron opens / closes the list. */
.smm-multi__toggle {
  position: absolute; right: var(--s-2); top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; display: grid; place-items: center;
  border: 0; border-radius: var(--ctl-r); background: transparent;
  color: var(--ink-muted); cursor: pointer;
}
.smm-multi__toggle:hover { background: var(--surface-3); color: var(--ink); }
.smm-multi__toggle .smm-i { transition: transform var(--dur-fast) var(--ease); }
.smm-multi.is-open .smm-multi__toggle .smm-i { transform: rotate(180deg); }

/* Collapsed by default; the lists are long and were eating the page. */
.smm-multi__list { display: none; }
.smm-multi.is-open .smm-multi__list { display: block; }

.smm-multi__list {
  list-style: none; margin: var(--s-3) 0 0; padding: var(--s-1);
  max-height: 232px; overflow-y: auto;
  border: var(--border-w) solid var(--border); border-radius: var(--r-md);
  background: var(--surface-2);
  scrollbar-width: thin; scrollbar-color: var(--sb-thumb) transparent;
}
.smm-multi__list::-webkit-scrollbar { width: 12px; }
.smm-multi__list::-webkit-scrollbar-track { background: transparent; }
.smm-multi__list::-webkit-scrollbar-thumb {
  background: var(--sb-thumb); border-radius: var(--r-pill);
  border: 3px solid transparent; background-clip: padding-box;
}
.smm-multi__list::-webkit-scrollbar-thumb:hover { background: var(--sb-thumb-hover); background-clip: padding-box; }
@media (pointer: coarse) { .smm-multi__list::-webkit-scrollbar { width: 14px; } }

.smm-multi__opt {
  display: flex; align-items: center; gap: var(--s-3);
  min-height: var(--tap-min); padding: var(--s-2) var(--s-3);
  border-radius: var(--r-sm); cursor: pointer; color: var(--ink);
}
.smm-multi__opt:hover { background: var(--surface-3); }
.smm-multi__opt.is-active { outline: var(--ring-w) solid var(--focus); outline-offset: -3px; }
.smm-multi__opt.is-on { background: var(--accent-soft); color: var(--accent-text); font-weight: var(--fw-med); }
.smm-multi__check {
  width: 20px; height: 20px; flex: none; display: grid; place-items: center;
  border: var(--border-w) solid var(--border-strong); border-radius: var(--r-sm);
  background: var(--surface);
}
.smm-multi__opt.is-on .smm-multi__check { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.smm-multi__label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.smm-multi__count { font-family: var(--font-num); font-size: var(--fs-xs); color: var(--ink-muted); }
.smm-multi__opt.is-on .smm-multi__count { color: var(--accent-text); }
.smm-multi__empty { margin: var(--s-3) 0 0; color: var(--ink-muted); font-size: var(--fs-sm); }

.smm-multi__tokens { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }
.smm-multi__none { margin: 0; color: var(--ink-subtle); font-size: var(--fs-sm); }
.smm-token {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: var(--s-1) var(--s-1) var(--s-1) var(--s-3);
  border-radius: var(--ctl-r); background: var(--accent-soft);
  color: var(--accent-text); border: var(--border-w) solid var(--accent-border);
  font-size: var(--fs-sm); font-weight: var(--fw-med);
}
.smm-token__x {
  width: 30px; height: 30px; flex: none; display: grid; place-items: center;
  border: 0; border-radius: 50%; cursor: pointer;
  background: transparent; color: inherit;
}
.smm-token__x:hover { background: var(--accent-border); }

/* ---- Star: bare icon, no chrome. Hit area stays finger-sized. ------------- */
.smm-label-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.smm-star {
  display: inline-grid; place-items: center;
  width: var(--tap-min); height: var(--tap-min); padding: 0;
  border: 0; background: none; cursor: pointer; line-height: 1;
  /* No visible box, but the focus ring follows the radius — so it matches the
     rest of the controls rather than being the one square outline. */
  border-radius: var(--ctl-r);
}
.smm-star__icon { font-size: 20px; line-height: 1; color: var(--border-strong); transition: color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.smm-star:hover .smm-star__icon { color: #C08A00; transform: scale(1.12); }
.smm-star.is-on .smm-star__icon { color: #E0A400; }
[data-theme="dark"] .smm-star__icon { color: var(--border-strong); }
[data-theme="dark"] .smm-star.is-on .smm-star__icon { color: #F5C24C; }

/* ---- Empty states -------------------------------------------------------- */
.smm-blank { padding: var(--s-6) var(--s-5); text-align: center; }
.smm-blank[hidden] { display: none; }
.smm-blank__icon {
  display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto var(--s-3);
  border-radius: 50%; background: var(--surface-2); color: var(--ink-subtle);
  border: var(--border-w) solid var(--border);
}
.smm-blank__icon--star { font-size: 24px; color: var(--border-strong); }
.smm-blank__title { margin: 0 0 var(--s-1); font-weight: var(--fw-bold); color: var(--ink); }
.smm-blank__text { margin: 0 auto; max-width: 34ch; color: var(--ink-muted); font-size: var(--fs-sm); line-height: var(--lh-body); }

/* ---- Cart ---------------------------------------------------------------- */
.smm-cartcard__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-5) var(--s-5) var(--s-4);
}
.smm-cartcard__head h4 { margin: 0; }
.smm-pill {
  padding: var(--s-1) var(--s-3); border-radius: var(--ctl-r);
  background: var(--accent-soft); color: var(--accent-text);
  font-size: var(--fs-sm); font-weight: var(--fw-med);
  font-variant-numeric: tabular-nums;
}
#orders-list .list-group-item.smm-cart__row {
  display: flex; align-items: flex-start; gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
}
.smm-cart__main { flex: 1 1 auto; min-width: 0; }
.smm-cart__name {
  display: block; font-weight: var(--fw-med); color: var(--ink); line-height: var(--lh-tight);
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.smm-cart__sub { display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-2); }
.smm-cart__qty {
  font-size: var(--fs-sm); color: var(--ink-muted);
  font-family: var(--font-num); font-variant-numeric: tabular-nums;
}
.smm-cart__side { display: flex; flex-direction: column; align-items: flex-end; gap: var(--s-2); flex: none; }
.smm-cart__price {
  font-weight: var(--fw-bold); color: var(--ink);
  font-family: var(--font-num); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.smm-cart__tools { display: flex; gap: var(--s-1); }
.smm-iconbtn {
  display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: var(--ctl-r); color: var(--ink-muted); cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.smm-iconbtn:hover { background: var(--surface-3); color: var(--ink); }
.smm-iconbtn--danger:hover { background: var(--canc-bg); color: var(--canc-ink); }

.smm-latest__actions { grid-column: 2; display: flex; gap: var(--s-2); align-items: center; }

/* ---- Favourites: two lines per row, five per page ------------------------ */
.smm-fav { list-style: none; margin: 0; padding: 0; }
/* Grid keeps the mark, name, remove button and the rate/action line on a
   predictable baseline — a flex row let the parts drift out of alignment. */
.smm-fav__item {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 32px;
  grid-template-areas: "icon name x" "icon meta meta";
  align-items: center;
  column-gap: var(--s-3); row-gap: var(--s-1);
  padding: var(--s-3) var(--s-4);
  border-bottom: var(--border-w) solid var(--border);
}
.smm-fav__item:last-child { border-bottom: 0; }
.smm-fav__item[hidden] { display: none; }
.smm-fav__item:hover { background: var(--surface-2); }
.smm-fav__icon {
  grid-area: icon; align-self: center;
  width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: var(--r-md); background: var(--surface-2);
  border: var(--border-w) solid var(--border); color: var(--ink-muted);
  font-size: 19px; line-height: 1; overflow: hidden;
}
.smm-fav__item:hover .smm-fav__icon { background: var(--surface); }
.smm-fav__name {
  grid-area: name; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: 15px; font-weight: var(--fw-med); color: var(--ink); line-height: 1.35;
}
/* Rate and action read as one phrase — a right-floated button left a dead gap. */
.smm-fav__meta {
  grid-area: meta; display: flex; align-items: baseline; gap: var(--s-2);
  min-width: 0; flex-wrap: wrap;
}
.smm-fav__dot { display: none; }
/* Sleek pill: soft accent at rest, solid on hover. */
.smm-fav-use {
  display: inline-flex; align-items: center; gap: var(--s-1);
  text-decoration: none;                     /* it is also used as a link in the price list */
  min-height: 28px; padding: 0 var(--s-3); margin-left: var(--s-2);
  border: var(--border-w) solid transparent; border-radius: var(--ctl-r);
  background: var(--accent-soft); color: var(--accent-text);
  font-family: inherit; font-size: var(--fs-sm); font-weight: var(--fw-med);
  cursor: pointer; white-space: nowrap;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.smm-fav-use:hover { background: var(--accent); color: var(--accent-ink); }
.smm-fav-use:active { background: var(--accent-active); }

/* ---- Saved service, seen while browsing ---------------------------------- */
.smm-combo__opt.is-fav {
  background: linear-gradient(90deg, rgba(224, 164, 0, .10), rgba(224, 164, 0, 0) 55%);
  box-shadow: inset 3px 0 0 #E0A400;
}
.smm-combo__opt.is-fav:hover { background: var(--surface-3); box-shadow: inset 3px 0 0 #E0A400; }
.smm-rowstar { margin-left: var(--s-2); color: #E0A400; font-size: 14px; line-height: 1; flex: none; }
[data-theme="dark"] .smm-combo__opt.is-fav {
  background: linear-gradient(90deg, rgba(245, 194, 76, .14), rgba(245, 194, 76, 0) 55%);
  box-shadow: inset 3px 0 0 #F5C24C;
}
[data-theme="dark"] .smm-rowstar { color: #F5C24C; }

/* ---- Services price list ------------------------------------------------- */
.smm-searchbar { display: flex; gap: var(--s-3); align-items: center; margin-bottom: var(--s-5); flex-wrap: wrap; }
.smm-searchbar__field { position: relative; flex: 1 1 320px; min-width: 0; }
.smm-searchbar__icon {
  position: absolute; left: var(--s-3); top: 50%; transform: translateY(-50%);
  color: var(--ink-muted); pointer-events: none;
}
.smm-wrap .smm-searchbar__field .smm-input {
  width: 100%; min-height: var(--tap); padding-left: calc(var(--s-4) + 20px);
  border: var(--border-w) solid var(--border); border-radius: var(--r-md);
  background: var(--surface); color: var(--ink); font-size: var(--fs-base); font-family: inherit;
}

/* No scroll container. The kit sets overflow:auto AND max-height:70vh here, so
   both have to go: overriding only overflow leaves the table spilling out of a
   70vh box and painting over whatever card follows it. Columns that do not fit
   are dropped at narrow widths instead (.smm-col--opt). */
.smm-table-wrap { overflow: visible; max-height: none; }
.smm-wrap table.smm-table { width: 100%; border-collapse: collapse; }
.smm-wrap .smm-table th {
  background: var(--surface-2); color: var(--ink-muted);
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em;
  padding: var(--s-3) var(--s-4); border-bottom: var(--border-w) solid var(--border);
  text-align: left;
}
.smm-wrap .smm-table td {
  padding: var(--s-3) var(--s-4); border-bottom: var(--border-w) solid var(--border);
  vertical-align: middle;
}
.smm-wrap .smm-table tbody tr:hover { background: var(--surface-2); }
.smm-wrap .smm-table td.u-right, .smm-wrap .smm-table th.u-right { text-align: right; }
.u-money, .u-num { font-family: var(--font-num); font-variant-numeric: tabular-nums; white-space: nowrap; }
.smm-th { color: inherit; text-decoration: none; }
.smm-th:hover { color: var(--accent-text); }

.smm-svcname { display: flex; align-items: flex-start; gap: var(--s-3); min-width: 0; }
.smm-svcname__mark {
  width: 30px; height: 30px; flex: none; display: grid; place-items: center;
  border-radius: var(--r-sm); background: var(--surface-2);
  border: var(--border-w) solid var(--border); color: var(--ink-muted); font-size: 16px;
}
.smm-svcname__text { min-width: 0; }
.smm-svcname__cat {
  display: block; margin-top: 2px; font-size: var(--fs-sm); color: var(--ink-subtle);
}
.smm-tag {
  display: inline-block; margin-left: var(--s-2); padding: 0 6px; border-radius: var(--r-sm);
  background: var(--surface-3); color: var(--ink-muted);
  font-size: 11px; font-weight: var(--fw-med); vertical-align: 1px; white-space: nowrap;
}

.smm-pager__num {
  min-width: 34px; height: 34px; padding: 0 var(--s-2);
  display: inline-grid; place-items: center; border-radius: var(--ctl-r);
  color: var(--ink); text-decoration: none;
  font-family: var(--font-num); font-size: var(--fs-sm);
}
.smm-pager__num:hover { background: var(--surface-3); }
.smm-pager__num.is-current { background: var(--accent); color: var(--accent-ink); font-weight: var(--fw-bold); }
.smm-pager__gap { color: var(--ink-subtle); }
.smm-btn.is-disabled { opacity: .45; pointer-events: none; }

/* Wide tables scroll inside their own card. They used not to: .smm-table-wrap
   was overflow:visible and columns were SHED instead — which never actually
   worked. Measured on /dashboard/orders.php with the real data:

     viewport 1280  ->  document 1930px wide   (1604px table in an 887px card)
     viewport  992  ->  document 1923px wide
     viewport  375  ->  document 1297px wide,  Action column parked at x=1149

   Three columns were being hidden at 375px and it STILL pushed the whole page
   sideways with the one control on the row out of reach. Shedding columns is
   a guess about which figures a customer does not need; a customer checking an
   order wants the charge and what is left to deliver, and those were two of the
   three being dropped.

   So nothing is hidden any more and the table scrolls where it stands. On a
   touch screen the scrollbar is an overlay that is invisible at rest, which is
   the swipe the customer asked for; on a mouse it is a thin bar inside the card.

   Safe here despite the note on .smm-docs: every .smm-table-wrap on this site
   contains a <table> and nothing else, so there is no popup for the new scroll
   container to clip. The one cost is that `.smm-table thead th`'s sticky `top:0`
   now resolves against a container that never scrolls vertically, so the header
   scrolls away with the page. It was sliding under the sticky top bar anyway
   (z-index 2 against 60). */
.smm-wrap .smm-table-wrap {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.smm-wrap .smm-table-wrap::-webkit-scrollbar { height: 8px; }
.smm-wrap .smm-table-wrap::-webkit-scrollbar-track { background: transparent; }
.smm-wrap .smm-table-wrap::-webkit-scrollbar-thumb {
  background: var(--sb-thumb); border-radius: 999px; background-clip: padding-box;
}
@media (pointer: coarse) {
  /* the platform draws its own overlay bar, and only while a finger is moving */
  .smm-wrap .smm-table-wrap { scrollbar-width: none; }
  .smm-wrap .smm-table-wrap::-webkit-scrollbar { display: none; }
}

/* ---- Add funds ----------------------------------------------------------- */
.smm-buy-grid { display: grid; gap: var(--s-5); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1000px) {
  .smm-buy-grid { grid-template-columns: minmax(0, 1fr) 360px; }
  .smm-buy-grid__side { position: sticky; top: calc(var(--topbar-h) + var(--s-4)); }
}

.smm-amount { position: relative; }
.smm-amount__sign {
  position: absolute; left: var(--s-4); top: 50%; transform: translateY(-50%);
  color: var(--ink-muted); font-size: var(--fs-xl); font-weight: var(--fw-bold);
  pointer-events: none;
}
.smm-wrap .smm-amount__input {
  width: 100%; min-height: 64px; padding-left: calc(var(--s-5) + 16px);
  font-size: var(--fs-2xl); font-weight: var(--fw-bold);
  font-family: var(--font-num); font-variant-numeric: tabular-nums;
}

.smm-quick { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }
.smm-quick__btn {
  min-height: var(--tap-min); padding: 0 var(--s-4);
  border: var(--border-w) solid var(--border); border-radius: var(--ctl-r);
  background: var(--surface); color: var(--ink); cursor: pointer;
  font-family: var(--font-num); font-size: var(--fs-sm); font-weight: var(--fw-med);
}
.smm-quick__btn:hover { background: var(--surface-3); }
.smm-quick__btn.is-on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

.smm-gateways { display: grid; gap: var(--s-3); }
.smm-wrap label.smm-gateway { display: block; margin: 0; cursor: pointer; text-transform: none; font-weight: var(--fw-normal); }
.smm-gateway__radio { position: absolute; opacity: 0; pointer-events: none; }
.smm-gateway__body {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-4); border-radius: var(--r-md);
  border: 2px solid var(--border); background: var(--surface);
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.smm-gateway__body:hover { background: var(--surface-2); }
.smm-gateway__radio:checked + .smm-gateway__body { border-color: var(--accent); background: var(--accent-soft); }
.smm-gateway__radio:focus-visible + .smm-gateway__body { outline: var(--ring-w) solid var(--focus); outline-offset: 2px; }
.smm-gateway__icon {
  width: 40px; height: 40px; flex: none; display: grid; place-items: center;
  border-radius: var(--r-md); background: var(--brand-soft); color: var(--brand);
}
.smm-gateway__name { display: block; font-weight: var(--fw-med); color: var(--ink); }
.smm-gateway__hint { display: block; font-size: var(--fs-sm); color: var(--ink-muted); }

.smm-breakdown {
  margin: var(--s-4) 0 var(--s-5); padding: var(--s-4);
  background: var(--surface-2); border: var(--border-w) solid var(--border);
  border-radius: var(--r-md);
}
.smm-breakdown[hidden] { display: none; }
.smm-breakdown .smm-kv:last-child { margin-bottom: 0; }
.smm-breakdown__total {
  padding-top: var(--s-3); margin-top: var(--s-3);
  border-top: var(--border-w) solid var(--border);
  font-size: var(--fs-md); color: var(--ink);
}
.smm-breakdown__total strong { color: var(--accent-text); font-size: var(--fs-lg); }

.smm-bigfig {
  margin: var(--s-1) 0 0; font-size: var(--fs-3xl); font-weight: var(--fw-bold);
  color: var(--accent-text); font-family: var(--font-num); font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.smm-rule { border: 0; border-top: var(--border-w) solid var(--border); margin: var(--s-4) 0; }
.smm-kv { display: flex; justify-content: space-between; gap: var(--s-3); margin: 0 0 var(--s-2); color: var(--ink-muted); }
.smm-kv strong { color: var(--ink); }
.smm-txn { color: var(--ink-muted); font-size: var(--fs-sm); }
.smm-credit { color: var(--done-ink); font-weight: var(--fw-bold); }

/* ---- Campaign wizard ------------------------------------------------------ */
.smm-steps {
  display: flex; gap: var(--s-2); list-style: none;
  margin: 0 0 var(--s-5); padding: 0; flex-wrap: wrap;
}
.smm-steps li {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-4); border-radius: var(--ctl-r);
  background: var(--surface-2); color: var(--ink-muted);
  border: var(--border-w) solid var(--border);
  font-size: var(--fs-sm); font-weight: var(--fw-med);
}
.smm-steps__n {
  display: grid; place-items: center; width: 22px; height: 22px;
  border-radius: 50%; background: var(--surface-3); color: var(--ink-muted);
  font-family: var(--font-num); font-size: var(--fs-xs); font-weight: var(--fw-bold);
}
.smm-steps li.is-on { background: var(--accent-soft); color: var(--accent-text); border-color: var(--accent-border); }
.smm-steps li.is-on .smm-steps__n { background: var(--accent); color: var(--accent-ink); }
.smm-steps li.is-done { color: var(--done-ink); }
.smm-steps li.is-done .smm-steps__n { background: var(--done-bg); color: var(--done-ink); }

/* Mode picker: paste links vs watch a channel. */
.smm-modes { display: grid; gap: var(--s-3); margin-bottom: var(--s-5); }
@media (min-width: 700px) { .smm-modes { grid-template-columns: 1fr 1fr; } }
.smm-wrap label.smm-modecard { display: block; margin: 0; cursor: pointer; text-transform: none; font-weight: var(--fw-normal); }
.smm-modecard input { position: absolute; opacity: 0; pointer-events: none; }
.smm-modecard__body {
  display: block; padding: var(--s-4); border-radius: var(--r-md);
  border: 2px solid var(--border); background: var(--surface);
}
.smm-modecard.is-on .smm-modecard__body { border-color: var(--accent); background: var(--accent-soft); }
.smm-modecard.is-off { opacity: .55; cursor: not-allowed; }
.smm-modecard.is-off .smm-modecard__body { background: var(--surface-2); }
.smm-modecard__title { display: block; font-weight: var(--fw-med); color: var(--ink); }
.smm-modecard__hint { display: block; margin-top: 2px; font-size: var(--fs-sm); color: var(--ink-muted); line-height: var(--lh-body); }

.smm-spec__caption {
  margin: 0 0 var(--s-2); font-size: var(--fs-sm); color: var(--ink-muted);
}
.smm-error {
  margin: var(--s-2) 0 0; color: var(--canc-ink);
  font-size: var(--fs-sm); font-weight: var(--fw-med);
}
.smm-error[hidden] { display: none; }
.smm-wrap .form-control.is-invalid { border-color: var(--canc-ink); }

.smm-wizstep { display: none; }
.smm-wizstep.is-on { display: block; }

.smm-textarea { min-height: 160px; font-size: 16px; line-height: 1.5; }

.smm-notice {
  display: flex; gap: var(--s-3); align-items: flex-start;
  padding: var(--s-4); border-radius: var(--r-md);
  background: var(--prog-bg); color: var(--prog-ink);
  border: var(--border-w) solid var(--prog-bd);
}
.smm-notice p { margin: 0; font-size: var(--fs-sm); line-height: var(--lh-body); }
.smm-notice .smm-i { flex: none; margin-top: 2px; }

/* ---- Review panel -------------------------------------------------------- */
.smm-quote {
  padding: 0; border-radius: var(--r-md); overflow: hidden;
  background: var(--surface); border: var(--border-w) solid var(--border);
}
.smm-quote__loading { margin: 0; padding: var(--s-5); color: var(--ink-muted); }
.smm-quote .smm-kv {
  margin: 0; padding: var(--s-3) var(--s-5);
  border-bottom: var(--border-w) solid var(--border);
  align-items: baseline; gap: var(--s-4);
}
.smm-quote .smm-kv span:first-child { color: var(--ink-muted); }
.smm-quote .smm-kv strong { color: var(--ink); text-align: right; }
.smm-quote .smm-kv strong + strong { min-width: 90px; }
.smm-quote .u-meta { margin: 0; padding: var(--s-3) var(--s-5); border-bottom: var(--border-w) solid var(--border); }

/* ---- List toolbar: search, status chips, exports ------------------------- */
.smm-toolbar {
  display: grid; gap: var(--s-3);
  padding: 0 var(--s-5) var(--s-4);
  border-bottom: var(--border-w) solid var(--border);
}
.smm-toolbar__search { position: relative; }
.smm-wrap .smm-toolbar__search .smm-input {
  width: 100%; min-height: var(--tap); padding-left: calc(var(--s-4) + 20px);
  border: var(--border-w) solid var(--border); border-radius: var(--r-md);
  background: var(--surface); color: var(--ink); font-size: var(--fs-base); font-family: inherit;
}
.smm-chiprow { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.smm-fchip {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: var(--tap-min); padding: 0 var(--s-3);
  border: var(--border-w) solid var(--border); border-radius: var(--ctl-r);
  background: var(--surface); color: var(--ink-muted);
  font-size: var(--fs-sm); font-weight: var(--fw-med); text-decoration: none; white-space: nowrap;
}
.smm-fchip:hover { background: var(--surface-3); color: var(--ink); }
.smm-fchip.is-on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.smm-fchip__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong); flex: none; }
.smm-fchip.is-on .smm-fchip__dot { background: var(--accent-ink); }
.smm-fchip__dot--pending    { background: #B45309; }
.smm-fchip__dot--inprogress { background: #1D6FD0; }
.smm-fchip__dot--processing { background: #7A34D6; }
.smm-fchip__dot--completed  { background: #157347; }
.smm-fchip__dot--partial    { background: #C08A00; }
.smm-fchip__dot--paused     { background: #6B7684; }
.smm-fchip__dot--canceled   { background: #B42318; }

.smm-exports { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.smm-wrap .smm-exports__range {
  width: auto; min-height: var(--tap-min); padding: 0 var(--s-3);
  border: var(--border-w) solid var(--border); border-radius: var(--r-md);
  background: var(--surface); color: var(--ink); font-size: var(--fs-sm); font-family: inherit;
}
.smm-btn--xls { background: #157347; color: #fff; border-color: transparent; }
.smm-btn--xls:hover { filter: brightness(1.08); color: #fff; }
.smm-btn--pdf { background: #B42318; color: #fff; border-color: transparent; }
.smm-btn--pdf:hover { filter: brightness(1.08); color: #fff; }
@media (min-width: 900px) {
  .smm-toolbar { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .smm-toolbar__search { grid-column: 1 / -1; }
  .smm-exports { justify-content: flex-end; }
}

/* ---- Orders table --------------------------------------------------------
   Every cell hangs off the FIRST line of the row: the service cell is two lines
   (name, then link) and the icon, figures, status and action all sit on that
   first baseline. Centring them against a two-line cell is what looked ragged. */
.smm-ordtable td { vertical-align: top; padding-top: var(--s-3); padding-bottom: var(--s-3); }
.smm-ordtable th { vertical-align: bottom; }

.smm-ord__id { display: block; font-weight: var(--fw-med); color: var(--ink); line-height: 1.35; }
.smm-ord__date { display: block; margin-top: 2px; font-size: var(--fs-sm); color: var(--ink-subtle); font-family: var(--font-num); white-space: nowrap; }
.smm-ord__svc {
  display: block; font-weight: var(--fw-med); color: var(--ink); line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 62ch;
}
.smm-ord__link {
  display: block; margin-top: 2px; font-size: var(--fs-sm); color: var(--ink-subtle);
  text-decoration: none; max-width: 62ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.smm-ord__link:hover { color: var(--accent-text); text-decoration: underline; }
/* the tag rides at the end of the name instead of claiming its own line */
.smm-ord__svc .smm-tag { margin-left: var(--s-2); vertical-align: 1px; }
/* icon aligns with the first text line, not the middle of the block */
.smm-ordtable .smm-svcname { align-items: flex-start; }
.smm-ordtable .smm-svcname__mark { margin-top: 1px; }
/* numbers, status and action sit on that same first line */
.smm-ordtable td.u-right, .smm-ordtable td:nth-child(7), .smm-ordtable td:nth-child(8) { padding-top: calc(var(--s-3) + 2px); }
/* Charge, Start and Remains used to be dropped here. They are the three figures
   a customer opens this page to check, and dropping them did not even keep the
   table inside the card — see .smm-table-wrap. The row narrows, nothing goes. */
@media (max-width: 900px) {
  .smm-ord__link { max-width: 26ch; }
}

/* ---- Campaign table ------------------------------------------------------
   Same rule as the orders table: two-line name cell, everything else aligned to
   the first line so the row reads across cleanly.
   No scroll container here — the columns shed themselves as the screen narrows,
   and 10 rows per page is the limit, so there is nothing to scroll through. */
.smm-table-plain { overflow: visible; }
.smm-camptable { table-layout: fixed; width: 100%; }
.smm-camptable th:nth-child(1), .smm-camptable td:nth-child(1) { width: auto; }
.smm-camptable th:nth-child(2), .smm-camptable td:nth-child(2) { width: 150px; }
.smm-camptable th:nth-child(3), .smm-camptable td:nth-child(3) { width: 196px; }
.smm-camptable th:nth-child(4), .smm-camptable td:nth-child(4) { width: 104px; }

.smm-camptable td { vertical-align: top; padding-top: var(--s-3); padding-bottom: var(--s-3); }
.smm-camptable th { vertical-align: bottom; }
.smm-camptable td:not(:first-child) { padding-top: calc(var(--s-3) + 2px); }
.smm-camp__name {
  display: block; font-weight: var(--fw-med); color: var(--ink); line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40ch;
}
.smm-camp__svc {
  display: block; margin-top: 2px; font-size: var(--fs-sm); color: var(--ink-subtle);
  max-width: 46ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.smm-camp__svc .smm-tag { margin-left: var(--s-2); }
/* Why a campaign produced fewer orders than its links suggested. Wraps rather
   than truncating: a clipped explanation is worse than none, and this only
   appears when something needs explaining. */
.smm-camp__note {
  display: block; margin-top: var(--s-2); padding-left: var(--s-2);
  border-left: 2px solid var(--pend-ink);
  font-size: var(--fs-xs); line-height: 1.45; color: var(--ink-muted);
  max-width: 52ch; white-space: normal;
}
.smm-camp__sub { display: block; margin-top: 2px; font-size: var(--fs-sm); color: var(--ink-subtle); font-family: var(--font-num); }
.smm-camptable .smm-acts { justify-content: flex-end; }
.smm-tag--bad { background: var(--canc-bg); color: var(--canc-ink); }

/* Actions read as quiet links until hovered — a row of solid buttons per
   campaign was heavier than the data it sat next to. */
.smm-acts { display: inline-flex; align-items: center; gap: var(--s-3); justify-content: flex-end; flex-wrap: wrap; }
.smm-linkact {
  border: 0; background: none; padding: 0; cursor: pointer; font-family: inherit;
  font-size: var(--fs-sm); font-weight: var(--fw-med); color: var(--ink-muted);
}
.smm-linkact:hover { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
.smm-linkact--bad:hover { color: var(--canc-ink); }
.smm-recall {
  display: block; margin-top: var(--s-1);
  font-size: var(--fs-xs); color: var(--pend-ink); white-space: nowrap;
}
.smm-recall__t { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.smm-recall.is-over { color: var(--ink-subtle); }

.smm-quote__loading { margin: 0; color: var(--ink-muted); }
.smm-quote__error { margin: var(--s-3) 0 0; color: var(--canc-ink); font-weight: var(--fw-med); }
.smm-shortfall {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  flex-wrap: wrap; margin-top: var(--s-3); padding-top: var(--s-3);
  border-top: var(--border-w) solid var(--border);
}
.smm-shortfall .smm-quote__error { margin: 0; }

/* Links the checks refused or flagged, listed on the review step so nothing is
   dropped silently — a link removed without a word reads as one that was paid for. */
.smm-checklist {
  margin-top: var(--s-3); padding-top: var(--s-3);
  border-top: var(--border-w) solid var(--border);
  font-size: var(--fs-sm);
}
.smm-checklist > p { margin: 0 0 var(--s-2); color: var(--ink-muted); }
.smm-checklist ul { margin: 0; padding-left: var(--s-4); }
.smm-checklist li { margin-bottom: var(--s-2); color: var(--ink-muted); line-height: 1.5; }
.smm-checklist code {
  display: inline-block; max-width: 100%; overflow-wrap: anywhere;
  padding: 1px 6px; border-radius: var(--r-sm);
  background: var(--surface-2); color: var(--ink); font-size: var(--fs-xs);
}
.smm-checklist--bad > p strong { color: var(--canc-ink); }

/* "Rounded to 1,200" — an explanation, not an error: the order still stands. */
.smm-hint--round { color: var(--ink); font-weight: var(--fw-med); }
/* The marker beside a quantity that is about to be rounded. Red enough to be
   noticed mid-typing, small enough not to read as an error — nothing is wrong,
   the number is simply going to change and the customer should know before it
   does rather than after. */
.smm-round-flag {
  color: var(--canc-ink, #c0392b); font-weight: var(--fw-bold, 700);
  margin-right: 4px; font-size: var(--fs-sm);
}
.smm-quote__total {
  padding-top: var(--s-3); margin-top: var(--s-3);
  border-top: var(--border-w) solid var(--border);
  font-size: var(--fs-md);
}
.smm-quote__total strong { color: var(--accent-text); font-size: var(--fs-xl); }

.smm-badge {
  display: inline-block; padding: 2px 10px; border-radius: var(--ctl-r);
  font-size: var(--fs-sm); font-weight: var(--fw-med); white-space: nowrap;
}
.smm-badge--prog { background: var(--prog-bg); color: var(--prog-ink); border: var(--border-w) solid var(--prog-bd); }
.smm-badge--done { background: var(--done-bg); color: var(--done-ink); border: var(--border-w) solid var(--done-bd); }
.smm-badge--canc { background: var(--canc-bg); color: var(--canc-ink); border: var(--border-w) solid var(--canc-bd); }
.smm-badge--unk  { background: var(--unk-bg);  color: var(--unk-ink);  border: var(--border-w) solid var(--unk-bd); }
/* Amber, for the seconds in which a campaign can still be stopped. The token
   family already existed and is contrast-checked in both themes. */
.smm-badge--pend { background: var(--pend-bg); color: var(--pend-ink); border: var(--border-w) solid var(--pend-bd); }

.smm-progress {
  display: inline-block; vertical-align: middle; width: 90px; height: 6px;
  margin-left: var(--s-2); border-radius: var(--r-pill);
  background: var(--surface-3); overflow: hidden;
}
.smm-progress__bar { display: block; height: 100%; background: var(--accent); border-radius: var(--r-pill); }
@media (max-width: 700px) { .smm-progress { width: 48px; } }

/* ---- "New" badge --------------------------------------------------------- */
/* Bare letters, no box — each letter lifts in turn. */
.smm-new {
  display: inline-block; margin-left: var(--s-2);
  color: var(--done-ink); font-size: 11px; font-weight: var(--fw-bold);
  letter-spacing: .08em; text-transform: uppercase; vertical-align: 1px;
}
.smm-new i {
  display: inline-block; font-style: normal;
  animation: smm-new-hop 1.5s var(--ease) infinite;
}
@keyframes smm-new-hop {
  0%, 60%, 100% { transform: translateY(0); }
  30%           { transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) { .smm-new i { animation: none; } }
.smm-fav__x { grid-area: x; align-self: center; }
.smm-fav__rate {
  font-family: var(--font-num); font-variant-numeric: tabular-nums;
  font-size: var(--fs-sm); font-weight: var(--fw-med); color: var(--ink-muted);
}
.smm-fav__meta .smm-btn { min-height: 32px; padding: 0 var(--s-3); font-size: var(--fs-sm); }
.smm-fav__x {
  flex: none; width: 32px; height: 32px; display: grid; place-items: center;
  border: 0; border-radius: var(--ctl-r); background: none;
  color: var(--ink-subtle); cursor: pointer;
}
.smm-fav__x:hover { background: var(--canc-bg); color: var(--canc-ink); }

.smm-pager {
  display: flex; align-items: center; justify-content: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-5) var(--s-5);
}
.smm-pager[hidden] { display: none; }
.smm-pager__label {
  font-family: var(--font-num); font-variant-numeric: tabular-nums;
  font-size: var(--fs-sm); color: var(--ink-muted); min-width: 56px; text-align: center;
}
.smm-pager .smm-btn[disabled] { opacity: .45; cursor: not-allowed; }

/* Brand tint for the favourite marks (same map as elsewhere). */
.smm-fav__icon[data-brand="Instagram"] { color: #C13584; }
.smm-fav__icon[data-brand="Facebook"]  { color: #1877F2; }
.smm-fav__icon[data-brand="YouTube"]   { color: #D91F1F; }
.smm-fav__icon[data-brand="TikTok"]    { color: #00A8B5; }
.smm-fav__icon[data-brand="Twitter"]   { color: #14171A; }
.smm-fav__icon[data-brand="Telegram"]  { color: #1F93D2; }
.smm-fav__icon[data-brand="Spotify"]   { color: #148A43; }
.smm-fav__icon[data-brand="Twitch"]    { color: #7A34D6; }
.smm-fav__icon[data-brand="Discord"]   { color: #4954CE; }
.smm-fav__icon[data-brand="LinkedIn"]  { color: #0A66C2; }
[data-theme="dark"] .smm-fav__icon[data-brand="Twitter"] { color: #E7E9EA; }

/* ---- Option card (drip-feed) --------------------------------------------
   Its own block, not a .form-group — the legacy label rules in compat.css
   force block + uppercase, which is what broke the checkbox alignment. */
.smm-optcard {
  border: var(--border-w) solid var(--border); border-radius: var(--r-md);
  background: var(--surface-2); padding: var(--s-4); margin-bottom: var(--s-5);
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.smm-optcard.is-on { border-color: var(--accent-border); background: var(--accent-soft); }
.smm-wrap .smm-optcard label.smm-opt {
  display: flex; align-items: flex-start; gap: var(--s-3);
  margin: 0; cursor: pointer; text-transform: none; font-weight: var(--fw-normal);
}
.smm-opt__box {
  width: 20px; height: 20px; margin: 2px 0 0; flex: none;
  accent-color: var(--accent); cursor: pointer;
}
.smm-opt__text { display: block; min-width: 0; }
.smm-opt__title {
  display: block; font-size: var(--fs-base); font-weight: var(--fw-med);
  color: var(--ink); line-height: 1.35; text-transform: none;
}
.smm-opt__hint {
  display: block; margin-top: 2px;
  font-size: var(--fs-sm); color: var(--ink-muted); line-height: var(--lh-body);
}

/* Runs + interval sit side by side under the toggle. */
.smm-driprow {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4);
  margin-top: var(--s-4); padding-top: var(--s-4);
  border-top: var(--border-w) solid var(--border);
}
.smm-driprow[hidden] { display: none; }
@media (max-width: 520px) { .smm-driprow { grid-template-columns: 1fr; } }
.smm-dripfield { min-width: 0; }
.smm-wrap .smm-dripfield > label.smm-label {
  display: block; margin-bottom: var(--s-2);
  font-size: var(--fs-sm); font-weight: var(--fw-med); color: var(--ink);
  text-transform: none;
}
.smm-hint { margin: var(--s-2) 0 0; font-size: var(--fs-sm); color: var(--ink-muted); }

/* The comment pool is de-duplicated before ordering, so the number that matters
   is the DISTINCT one. Amber rather than red: a repeated line is worth noticing,
   not an error — the order still goes out, with fewer comments than lines. */
.smm-cc--warn { color: var(--warn-ink); }

/* ---- Compact dropdown rows ----------------------------------------------
   Dense single-line list: brand mark + name (+ rate right-aligned). The
   min/max line is dropped from the row — it is already in the spec strip
   once the service is picked — so customers scan instead of scroll. */
.smm-combo__opt {
  min-height: 44px;
  padding: var(--s-2) var(--s-4);
  align-items: center;
  gap: var(--s-3);
}
/* The row must never wrap: main shrinks, rate keeps its width. */
.smm-combo__opt-main { min-width: 0; flex: 1 1 auto; display: flex; align-items: center; gap: var(--s-2); }
.smm-combo__opt-name {
  display: block; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: 16px; line-height: 1.35; font-weight: var(--fw-normal);
}
.smm-combo__opt-meta { display: none; }
/* Provider service ids are never shown to customers. */
.smm-combo__opt-id,
.smm-combo__value-id { display: none; }
.smm-combo__opt-rate {
  margin-left: auto; flex: 0 0 auto; white-space: nowrap;
  font-family: var(--font-num); font-variant-numeric: tabular-nums;
  font-size: var(--fs-sm); font-weight: var(--fw-med); color: var(--ink-muted);
}
.smm-combo__opt.is-active,
.smm-combo__opt:hover { background: var(--surface-3); }
.smm-combo__opt[aria-selected="true"] { background: var(--accent-soft); color: var(--accent-text); font-weight: var(--fw-med); }

/* ---- Bigger, brand-coloured marks ---------------------------------------- */
.smm-multi__mark { width: 26px; height: 26px; flex: none; color: var(--ink-muted); transition: color var(--dur-fast) var(--ease); }
.smm-combo__opt .smm-i { width: 24px; height: 24px; flex: none; }

/* Dropdown rows carry no data-brand (ui.js is a kit file we don't edit), so
   colour them off the sprite reference instead — currentColor resolves from
   the <use> element for the referenced shape. */
.smm-combo__opt use[href$="#p-instagram"] { color: #C13584; }
.smm-combo__opt use[href$="#p-facebook"]  { color: #1877F2; }
.smm-combo__opt use[href$="#p-youtube"]   { color: #D91F1F; }
.smm-combo__opt use[href$="#p-tiktok"]    { color: #00A8B5; }
.smm-combo__opt use[href$="#p-twitter"]   { color: #14171A; }
.smm-combo__opt use[href$="#p-telegram"]  { color: #1F93D2; }
.smm-combo__opt use[href$="#p-spotify"]   { color: #148A43; }
.smm-combo__opt use[href$="#p-twitch"]    { color: #7A34D6; }
.smm-combo__opt use[href$="#p-discord"]   { color: #4954CE; }
.smm-combo__opt use[href$="#p-linkedin"]  { color: #0A66C2; }
[data-theme="dark"] .smm-combo__opt use[href$="#p-twitter"] { color: #E7E9EA; }
.smm-latest__icon .smm-i { width: 24px; height: 24px; }
.smm-chip[data-brand] .smm-i { width: 22px; height: 22px; }
.smm-filter__status {
  margin: var(--s-4) 0 0; font-size: var(--fs-sm); color: var(--ink-muted); min-height: 1.4em;
}
.smm-flag { font-size: 1.15em; line-height: 1; }

.smm-chips { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* One line, scroll horizontally rather than wrapping. */
.smm-chips--line {
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  min-width: 0;
  max-width: 100%;
  padding-bottom: var(--s-2);
  scrollbar-width: thin;
  scrollbar-color: var(--sb-thumb) transparent;
}
.smm-chips--line > .smm-chip { flex: 0 0 auto; }

/* Expanded state: wrap onto several lines instead of one long scroll. */
.smm-chips--wrapped { flex-wrap: wrap; overflow: visible; max-height: 40vh; overflow-y: auto; }
.smm-linkbtn {
  margin-top: var(--s-3); padding: var(--s-2) 0; min-height: var(--tap-min);
  background: none; border: 0; cursor: pointer; font-family: inherit;
  font-size: var(--fs-sm); font-weight: var(--fw-med); color: var(--accent-text);
  text-decoration: underline; text-underline-offset: 3px;
}
.smm-linkbtn:hover { color: var(--accent-hover); }
.smm-chips--line::-webkit-scrollbar { height: 10px; }
.smm-chips--line::-webkit-scrollbar-track { background: transparent; }
.smm-chips--line::-webkit-scrollbar-thumb {
  background: var(--sb-thumb); border-radius: var(--r-pill);
  border: 3px solid transparent; background-clip: padding-box;
}
.smm-chips--line::-webkit-scrollbar-thumb:hover { background: var(--sb-thumb-hover); background-clip: padding-box; }
@media (pointer: coarse) { .smm-chips--line::-webkit-scrollbar { height: 14px; } }
.smm-chip {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: var(--tap); padding: 0 var(--s-4);
  border-radius: var(--r-md); cursor: pointer;
  background: var(--surface-2); color: var(--ink);
  border: var(--border-w) solid var(--border);
  font-size: var(--fs-base); font-weight: var(--fw-med); font-family: inherit;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.smm-chip:hover { background: var(--surface-3); }
.smm-chip .smm-i { color: var(--ink-muted); }
.smm-chip[aria-pressed="true"] {
  background: var(--accent); color: var(--accent-ink); border-color: var(--accent);
}
.smm-chip[aria-pressed="true"] .smm-i { color: var(--accent-ink); }
.smm-chip__count {
  font-size: var(--fs-xs); font-family: var(--font-num);
  opacity: .85; font-variant-numeric: tabular-nums;
}

/* ---- Brand colours ------------------------------------------------------- */
/* Icons inherit currentColor. Any element carrying data-brand lights up on
   hover (platform chips, multi-select rows); list icons are always coloured. */
[data-brand] .smm-i { transition: color var(--dur-fast) var(--ease); }
[data-brand="Instagram"]:hover .smm-i, .smm-latest__icon[data-brand="Instagram"] .smm-i { color: #C13584; }
[data-brand="Facebook"]:hover  .smm-i, .smm-latest__icon[data-brand="Facebook"]  .smm-i { color: #1877F2; }
[data-brand="YouTube"]:hover   .smm-i, .smm-latest__icon[data-brand="YouTube"]   .smm-i { color: #D91F1F; }
[data-brand="TikTok"]:hover    .smm-i, .smm-latest__icon[data-brand="TikTok"]    .smm-i { color: #00A8B5; }
[data-brand="Twitter"]:hover   .smm-i, .smm-latest__icon[data-brand="Twitter"]   .smm-i { color: #14171A; }
[data-brand="Telegram"]:hover  .smm-i, .smm-latest__icon[data-brand="Telegram"]  .smm-i { color: #1F93D2; }
[data-brand="Spotify"]:hover   .smm-i, .smm-latest__icon[data-brand="Spotify"]   .smm-i { color: #148A43; }
[data-brand="Twitch"]:hover    .smm-i, .smm-latest__icon[data-brand="Twitch"]    .smm-i { color: #7A34D6; }
[data-brand="Discord"]:hover   .smm-i, .smm-latest__icon[data-brand="Discord"]   .smm-i { color: #4954CE; }
[data-brand="LinkedIn"]:hover  .smm-i, .smm-latest__icon[data-brand="LinkedIn"]  .smm-i { color: #0A66C2; }
[data-theme="dark"] [data-brand="Twitter"]:hover .smm-i,
[data-theme="dark"] .smm-latest__icon[data-brand="Twitter"] .smm-i { color: #E7E9EA; }
/* A selected row/chip is filled with the accent, so the mark must stay legible. */
.smm-chip[aria-pressed="true"][data-brand]:hover .smm-i,
.smm-multi__opt.is-on[data-brand] .smm-i,
.smm-multi__opt.is-on[data-brand]:hover .smm-i { color: currentColor; }

/* ---- Order screen grid --------------------------------------------------- */
/* Left column takes whatever is left; the right rail is a fixed box. */
.smm-order-grid { display: grid; gap: var(--s-5); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1100px) {
  .smm-order-grid { grid-template-columns: minmax(0, 1fr) var(--rail-w, 480px); }
  .smm-order-grid__side { position: sticky; top: calc(var(--topbar-h) + var(--s-4)); }
}

/* Wider working area: the shell caps content at --content-max by default. */
.smm-main > .smm-wrap { max-width: 95%; width: 95%; }
@media (max-width: 700px) { .smm-main > .smm-wrap { max-width: 100%; width: 100%; } }

/* ---- Service spec strip: one line, divided cells -------------------------- */
.smm-spec {
  display: flex; align-items: stretch; margin-bottom: var(--s-5);
  background: var(--surface-2); border: var(--border-w) solid var(--border);
  border-radius: var(--r-md); overflow: hidden;
}
.smm-spec[hidden] { display: none; }
/* Each cell is at least as wide as its content (so "10,000,000" never clips),
   and the leftover width is shared evenly between them — `space-between` put
   the free space in the gaps instead, which made the dividers look random. */
.smm-spec__cell {
  flex: 1 1 auto; min-width: max-content;
  padding: var(--s-3) var(--s-4); text-align: center;
  border-right: var(--border-w) solid var(--border);
}
.smm-spec__cell:last-child { border-right: 0; }
.smm-spec__label {
  display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-subtle); font-weight: var(--fw-med); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; line-height: 1.2;
}
.smm-spec__value {
  display: block; margin-top: var(--s-1);
  font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--ink);
  font-family: var(--font-num); font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.25;
}
.smm-spec__value--text { font-family: var(--font-sans); font-weight: var(--fw-med); }
/* Below ~760px six cells cannot stay legible on one line — go to three. */
@media (max-width: 760px) {
  .smm-spec { flex-wrap: wrap; }
  .smm-spec__cell { flex: 1 1 33%; border-bottom: var(--border-w) solid var(--border); }
  .smm-spec__cell:nth-child(3n) { border-right: 0; }
  .smm-spec__cell:nth-last-child(-n+3) { border-bottom: 0; }
}
.smm-yes { color: var(--done-ink); font-weight: var(--fw-bold); }
.smm-no  { color: var(--ink-muted); }

/* ---- Charge box ---------------------------------------------------------- */
.smm-charge {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  background: var(--accent-soft); border: var(--border-w) solid var(--accent-border);
  border-radius: var(--r-md); padding: var(--s-4); margin-bottom: var(--s-5);
}
.smm-charge__label { font-weight: var(--fw-med); color: var(--ink); margin: 0; }
.smm-charge__value {
  margin: 0; font-size: var(--fs-xl); font-weight: var(--fw-bold);
  color: var(--accent-text); font-family: var(--font-num); font-variant-numeric: tabular-nums;
}

/* ---- Cart (existing .list-group markup) ---------------------------------- */
#orders-list { list-style: none; margin: 0; padding: 0; max-height: 26rem; overflow: auto; }
#orders-list .list-group-item {
  display: block; width: 100%; text-align: left;
  background: var(--surface); color: var(--ink);
  border: 0; border-bottom: var(--border-w) solid var(--border);
  padding: var(--s-3) var(--s-4); cursor: pointer; font-family: inherit; font-size: var(--fs-base);
}
#orders-list .list-group-item:hover { background: var(--surface-2); }
#orders-list .list-group-item.active { background: var(--accent-soft); }
.order-item-service-name { margin: 0; flex: 1 1 auto; }
.order-item-price { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.order-item-quantity { color: var(--ink-muted); font-size: var(--fs-sm); }
.order-item-action-button { font-size: 1.25rem; padding: var(--s-1); }
.smm-total {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s-4); border-top: var(--border-w) solid var(--border);
  font-size: var(--fs-md);
}
.smm-total__value {
  font-weight: var(--fw-bold); font-family: var(--font-num);
  font-variant-numeric: tabular-nums; color: var(--accent-text); font-size: var(--fs-xl);
}

/* ---- Latest services list ------------------------------------------------ */
.smm-latest { list-style: none; margin: 0; padding: 0; max-height: 34rem; overflow: auto; }
.smm-latest__item {
  display: grid; gap: var(--s-2) var(--s-3);
  grid-template-columns: 40px minmax(0, 1fr);
  padding: var(--s-4); border-bottom: var(--border-w) solid var(--border);
}
.smm-latest__item:last-child { border-bottom: 0; }
.smm-latest__icon {
  grid-row: span 2; width: 40px; height: 40px; border-radius: var(--r-md);
  display: grid; place-items: center; background: var(--brand-soft); color: var(--brand);
}
.smm-latest__name { margin: 0; font-weight: var(--fw-med); line-height: var(--lh-tight); word-break: break-word; }
.smm-latest__id {
  display: inline-block; margin-right: var(--s-2); padding: 0 var(--s-2);
  border-radius: var(--ctl-r); background: var(--accent-soft); color: var(--accent-text);
  font-family: var(--font-num); font-size: var(--fs-xs); font-weight: var(--fw-bold);
}
.smm-latest__meta { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); font-size: var(--fs-sm); }
.smm-latest__rate {
  font-family: var(--font-num); font-variant-numeric: tabular-nums;
  font-weight: var(--fw-bold); color: var(--done-ink);
}
.smm-latest__mm { color: var(--ink-muted); font-family: var(--font-num); }

/* Scrollbars on the two scrolling panes. */
#orders-list, .smm-latest { scrollbar-width: thin; scrollbar-color: var(--sb-thumb) transparent; }
#orders-list::-webkit-scrollbar, .smm-latest::-webkit-scrollbar { width: 12px; }
#orders-list::-webkit-scrollbar-track, .smm-latest::-webkit-scrollbar-track { background: transparent; }
#orders-list::-webkit-scrollbar-thumb, .smm-latest::-webkit-scrollbar-thumb {
  background: var(--sb-thumb); border-radius: var(--r-pill);
  border: 3px solid transparent; background-clip: padding-box;
}
#orders-list::-webkit-scrollbar-thumb:hover, .smm-latest::-webkit-scrollbar-thumb:hover { background: var(--sb-thumb-hover); background-clip: padding-box; }
@media (pointer: coarse) {
  #orders-list::-webkit-scrollbar, .smm-latest::-webkit-scrollbar { width: 14px; }
}

/* ---- Tabs ---------------------------------------------------------------- */
.smm-modes { display: flex; gap: var(--s-3); margin-bottom: var(--s-5); flex-wrap: wrap; }
.smm-modes__btn {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: var(--tap); padding: 0 var(--s-5); border-radius: var(--r-md);
  border: var(--border-w) solid var(--border); background: var(--surface);
  color: var(--ink); font-size: var(--fs-base); font-weight: var(--fw-med);
  font-family: inherit; cursor: pointer;
}
.smm-modes__btn[aria-selected="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.smm-modes__btn[aria-selected="true"] .smm-i { color: var(--accent-ink); }

/* Actions column: one control at a time. Cancel counts down in place, then the
   row swaps it for Again. Tabular figures so the width does not jump 10s -> 9s. */
.smm-cancelwin__t {
  display: inline-block; min-width: 2.2em; text-align: right;
  font-variant-numeric: tabular-nums; font-weight: var(--fw-bold);
}
.smm-acts .smm-cancelwin[hidden],
.smm-acts .smm-againbtn[hidden] { display: none; }

/* "-1.7680 refunded" under an order's cost: the provider did not deliver it and
   the money is already back on the balance. Shown so nobody has to ask. */
.smm-refunded {
  display: block; margin-top: 2px;
  font-size: var(--fs-xs); font-weight: var(--fw-med); color: var(--canc-ink);
  white-space: nowrap;
}

/* Pool advice on the review step — amber, because the campaign can still run;
   it is telling the customer what their comment section will look like. */
.smm-checklist--advice > p strong { color: var(--ink); }
.smm-checklist--advice { border-left: 3px solid var(--warn-ink); padding-left: var(--s-3); }

/* ---- Review step ---------------------------------------------------------
   Was a flat run of key/value paragraphs and four near-identical bullet lists,
   which read as one undifferentiated wall. Now: what it is, the numbers, the
   money, then sections that only appear when they have something to say. */
.smm-rev__head {
  padding: var(--s-4) var(--s-5);
  border-bottom: var(--border-w) solid var(--border);
}
.smm-rev__svc {
  margin: 0; font-weight: var(--fw-bold); font-size: var(--fs-md); color: var(--ink);
  line-height: 1.35;
}
.smm-rev__scope { margin: 2px 0 0; font-size: var(--fs-sm); color: var(--ink-muted); }

/* headline numbers, same strip component as the service details on step 3 */
.smm-rev__stats { margin: var(--s-4) var(--s-5) 0; }

.smm-rev__cost { padding: var(--s-4) var(--s-5) var(--s-2); }
.smm-rev__cost .smm-kv { padding: 0; border: 0; margin-bottom: var(--s-2); }
.smm-rev__total {
  padding-top: var(--s-3) !important;
  margin-top: var(--s-3);
  border-top: var(--border-w) solid var(--border) !important;
}
.smm-rev__total span { color: var(--ink) !important; font-weight: var(--fw-med); }
.smm-rev__total strong { font-size: var(--fs-lg); color: var(--accent-text); }
.smm-rev__bal strong { color: var(--ink-muted) !important; font-weight: var(--fw-med); }
.smm-rev__note {
  margin: var(--s-2) 0 0; font-size: var(--fs-sm); color: var(--ink-muted); line-height: 1.5;
}

/* one section per thing worth saying; none of them render when empty */
.smm-rev__sec {
  padding: var(--s-4) var(--s-5);
  border-top: var(--border-w) solid var(--border);
}
.smm-rev__sech {
  margin: 0 0 var(--s-3); font-size: 11px; font-weight: var(--fw-bold);
  text-transform: uppercase; letter-spacing: .06em; color: var(--ink-muted);
}
.smm-rev__sec--warn .smm-rev__sech { color: var(--warn-ink); }
.smm-rev__sec--bad  .smm-rev__sech { color: var(--canc-ink); }

/* the comment split: ranges in a column so they line up and scan instantly */
.smm-rev__split { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.smm-rev__split td { padding: 5px 0; vertical-align: top; }
.smm-rev__range {
  white-space: nowrap; font-family: var(--font-num); font-variant-numeric: tabular-nums;
  color: var(--ink); font-weight: var(--fw-med);
}
.smm-rev__arrow { width: 2em; text-align: center; color: var(--ink-muted); }
.smm-rev__link { width: 100%; }
.smm-rev__link code {
  padding: 1px 6px; border-radius: var(--r-sm);
  background: var(--surface-2); color: var(--ink-muted);
  font-size: var(--fs-xs); overflow-wrap: anywhere;
}
.smm-rev__tag {
  display: inline-block; margin-left: var(--s-2); padding: 1px 6px;
  border-radius: var(--r-sm); background: var(--surface-2);
  font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-muted);
}

.smm-rev__list { margin: 0; padding: 0; list-style: none; font-size: var(--fs-sm); }
.smm-rev__list li {
  position: relative; padding-left: var(--s-4); margin-bottom: var(--s-2);
  color: var(--ink-muted); line-height: 1.5;
}
.smm-rev__list li:last-child { margin-bottom: 0; }
.smm-rev__list li::before {
  content: ''; position: absolute; left: 0; top: .55em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--border);
}
.smm-rev__sec--warn .smm-rev__list li::before { background: var(--warn-ink); }
.smm-rev__sec--bad  .smm-rev__list li::before { background: var(--canc-ink); }
.smm-rev__list code {
  display: block; margin-bottom: 2px;
  color: var(--ink); font-size: var(--fs-xs); overflow-wrap: anywhere;
}
.smm-rev__list span { display: block; }

@media (max-width: 640px){
  .smm-rev__stats { flex-wrap: wrap; }
  .smm-rev__stats .smm-spec__cell { flex: 1 0 50%; }
  .smm-rev__split td { display: block; padding: 0; }
  .smm-rev__arrow { display: none !important; }
  .smm-rev__range { margin-top: var(--s-2); }
}

/* Amber for advisory copy. theme.css ships done/prog/canc/unk but no warn tone,
   and this is our file, so the token is defined here for both themes rather
   than hard-coding a hex at each use site. */
:root, [data-theme="light"] { --warn-ink: #8A5A00; --warn-bg: #FDF4E0; --warn-bd: #E3C173; }
[data-theme="dark"]         { --warn-ink: #E0B357; --warn-bg: #33280F; --warn-bd: #6B5524; }

/* ---- Affiliate page ------------------------------------------------------
   The referral link is the one thing people come here to copy, so it gets the
   full width and a copy button rather than being bold text in a sentence. */
.smm-afflink { display: flex; gap: var(--s-2); align-items: stretch; }
.smm-afflink .form-control {
  flex: 1 1 auto; min-width: 0;
  font-family: var(--font-num); font-size: var(--fs-sm);
}
.smm-afflink .smm-btn { flex: 0 0 auto; }
.smm-aff__stats { margin-top: var(--s-4); }

/* Progress to the payout threshold. Earnings are genuinely held until this
   fills, so the bar is a statement of fact rather than decoration. */
.smm-aff__payout {
  margin-top: var(--s-4); padding: var(--s-4);
  background: var(--surface-2); border: var(--border-w) solid var(--border);
  border-radius: var(--r-md);
}
.smm-aff__payhead {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--s-3); margin-bottom: var(--s-2);
  font-size: var(--fs-sm); color: var(--ink-muted);
}
.smm-aff__payhead strong { color: var(--ink); }
.smm-aff__bar {
  height: 8px; border-radius: var(--r-pill); overflow: hidden;
  background: var(--border);
}
.smm-aff__bar > span {
  display: block; height: 100%; min-width: 2px;
  border-radius: var(--r-pill); background: var(--accent);
  transition: width .3s ease;
}
.smm-aff__payout .smm-hint { margin: var(--s-2) 0 0; }
.smm-aff__none { color: var(--ink-muted); font-size: var(--fs-sm); }

@media (max-width: 560px){
  .smm-afflink { flex-wrap: wrap; }
  .smm-afflink .smm-btn { width: 100%; }
  .smm-aff__stats { flex-wrap: wrap; }
  .smm-aff__stats .smm-spec__cell { flex: 1 0 50%; }
}

/* ---- FAQ -----------------------------------------------------------------
   Grouped blocks with a live filter. Questions are native <details>, so they
   open without JavaScript, answer to the keyboard and screen readers for free,
   and behave like the browser's own controls on a phone. */
.smm-faq__stats { margin-bottom: var(--s-4); }

.smm-faq__search { position: relative; margin-bottom: var(--s-2); }
.smm-faq__searchicon {
  position: absolute; left: var(--s-3); top: 50%; transform: translateY(-50%);
  color: var(--ink-muted); pointer-events: none;
}
.smm-faq__search .smm-input { width: 100%; padding-left: calc(var(--s-3) * 2 + 16px); }

.smm-faq__block {
  margin-bottom: var(--s-5); padding: var(--s-4) var(--s-5);
  background: var(--surface); border: var(--border-w) solid var(--border);
  border-radius: var(--r-lg);
}
.smm-faq__h {
  display: flex; align-items: center; gap: var(--s-2);
  margin: 0 0 var(--s-3); font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--ink);
}
.smm-faq__h .smm-i { color: var(--accent-text); flex: 0 0 auto; }

.smm-faq__item { border-top: var(--border-w) solid var(--border); }
.smm-faq__item:first-of-type { border-top: 0; }
.smm-faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-3) 0; cursor: pointer; list-style: none;
  font-weight: var(--fw-med); color: var(--ink); line-height: 1.45;
}
.smm-faq__q::-webkit-details-marker { display: none; }
.smm-faq__q:hover { color: var(--accent-text); }
.smm-faq__q:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm); }
.smm-faq__chev { flex: 0 0 auto; color: var(--ink-muted); transition: transform .18s ease; }
.smm-faq__item[open] .smm-faq__chev { transform: rotate(180deg); }

.smm-faq__a { padding: 0 0 var(--s-4); color: var(--ink-muted); line-height: 1.6; font-size: var(--fs-sm); }
.smm-faq__a p { margin: 0 0 var(--s-2); }
.smm-faq__a p:last-child, .smm-faq__a ol:last-child { margin-bottom: 0; }
.smm-faq__a ol { margin: 0 0 var(--s-2); padding-left: var(--s-5); }
.smm-faq__a li { margin-bottom: 4px; }
.smm-faq__a strong { color: var(--ink); }
.smm-faq__a a { color: var(--accent-text); }

.smm-faq__cta {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  flex-wrap: wrap; padding: var(--s-4) var(--s-5);
  background: var(--surface-2); border: var(--border-w) solid var(--border);
  border-radius: var(--r-lg);
}
.smm-faq__ctah { margin: 0; font-weight: var(--fw-bold); color: var(--ink); }
.smm-faq__cta .smm-hint { margin: 2px 0 0; }

@media (max-width: 640px){
  .smm-faq__stats { flex-wrap: wrap; }
  .smm-faq__stats .smm-spec__cell { flex: 1 0 50%; }
  .smm-faq__block { padding: var(--s-3) var(--s-4); }
  .smm-faq__q { padding: var(--s-3) 0; }
  .smm-faq__cta { flex-direction: column; align-items: stretch; text-align: left; }
  .smm-faq__cta .smm-btn { width: 100%; justify-content: center; }
}

/* ---- Support -------------------------------------------------------------
   Form and ticket FAQ side by side, history full width beneath. Under 900px
   they stack, form first, because opening a ticket is why people come here. */
.smm-tk__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4);
  align-items: start; margin-bottom: var(--s-4);
}
.smm-tk__grid > .card { margin-bottom: 0; }
.smm-tk__opt {
  margin-left: var(--s-2); font-weight: 400; font-size: var(--fs-xs);
  color: var(--ink-muted); text-transform: none; letter-spacing: 0;
}
.smm-tk__send { width: 100%; justify-content: center; margin-top: var(--s-2); }
.smm-tk__link { color: var(--accent-text); font-weight: var(--fw-med); }
.smm-tk__link:hover { text-decoration: underline; }

/* thread */
.smm-tk__back {
  display: inline-flex; align-items: center; gap: 4px; margin-bottom: var(--s-2);
  font-size: var(--fs-sm); color: var(--ink-muted);
}
.smm-tk__back:hover { color: var(--accent-text); }
.smm-tk__backi { transform: rotate(90deg); }

.smm-msg {
  padding: var(--s-3) var(--s-4); margin-bottom: var(--s-3);
  border: var(--border-w) solid var(--border); border-radius: var(--r-md);
  background: var(--surface);
}
.smm-msg--staff { background: var(--surface-2); border-color: var(--accent-bd, var(--border)); }
.smm-msg__head {
  display: flex; justify-content: space-between; gap: var(--s-3);
  margin-bottom: var(--s-2); font-size: var(--fs-xs);
}
.smm-msg__who { font-weight: var(--fw-bold); color: var(--ink); }
.smm-msg--staff .smm-msg__who { color: var(--accent-text); }
.smm-msg__when { color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.smm-msg__body { color: var(--ink); line-height: 1.6; font-size: var(--fs-sm); overflow-wrap: anywhere; }
.smm-tk__replybox { margin-top: var(--s-4); }
.smm-tk__replybox .smm-btn { margin-top: var(--s-2); }

@media (max-width: 900px){
  .smm-tk__grid { grid-template-columns: 1fr; }
}

/* ---- Drip-feed -----------------------------------------------------------
   Runs completed is the number people come here for, so it gets a figure and a
   bar in the same cell rather than being one more column of digits. */
.smm-drip__stats { margin-bottom: var(--s-4); }
.smm-drip__of { font-size: var(--fs-xs); color: var(--ink-muted); font-weight: 400; }
.smm-drip__runs { display: flex; flex-direction: column; gap: 4px; min-width: 92px; }
.smm-drip__runs .smm-progress { width: 100%; }
.smm-drip__runs strong { color: var(--ink); }
.smm-fchip__n {
  margin-left: 4px; padding: 0 5px; border-radius: var(--ctl-r);
  background: var(--surface-2); color: var(--ink-muted);
  font-size: 10px; font-variant-numeric: tabular-nums;
}
.smm-fchip.is-on .smm-fchip__n { background: rgba(255,255,255,.25); color: inherit; }
.smm-fchip__dot--all      { background: var(--ink-muted); }
.smm-fchip__dot--active   { background: var(--prog-ink, #1E6FBF); }
.smm-fchip__dot--completed{ background: var(--done-ink, #1B7A45); }
.smm-fchip__dot--canceled { background: var(--canc-ink); }
.smm-blank .smm-btn { margin-top: var(--s-3); }

@media (max-width: 640px){
  .smm-drip__stats { flex-wrap: wrap; }
  .smm-drip__stats .smm-spec__cell { flex: 1 0 50%; }
}
.smm-drip__per { font-size: var(--fs-xs); color: var(--ink-muted); }

/* ---- Pagination ----------------------------------------------------------
   One component for every list. Numbered so a customer can jump rather than
   click Next repeatedly, with the current page always in the middle and the
   first and last always reachable. Arrows at the ends stay in place when
   disabled so the control does not jump width as you page through. */
.smm-pager {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  flex-wrap: wrap; padding: var(--s-4) var(--s-5) var(--s-5);
}
.smm-pager__n,
.smm-pager__arrow {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 34px; padding: 0 var(--s-2);
  border: var(--border-w) solid var(--border); border-radius: var(--ctl-r);
  background: var(--surface); color: var(--ink);
  font-size: var(--fs-sm); font-weight: var(--fw-med);
  font-variant-numeric: tabular-nums; text-decoration: none;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.smm-pager__n:hover,
.smm-pager__arrow:hover {
  background: var(--surface-2); border-color: var(--ink-muted); color: var(--ink);
  text-decoration: none;
}
.smm-pager__n.is-on {
  background: var(--accent); border-color: var(--accent); color: #fff; cursor: default;
}
.smm-pager__n.is-on:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.smm-pager__arrow .smm-i { transform: rotate(90deg); }
.smm-pager__arrow--next .smm-i { transform: rotate(-90deg); }
.smm-pager__arrow.is-off { opacity: .35; cursor: default; pointer-events: none; }
.smm-pager__gap {
  min-width: 20px; text-align: center; color: var(--ink-muted); user-select: none;
}

/* `.smm-col--opt` used to be dropped here, on the reasoning that "a horizontal
   scrollbar inside a card is worse than one fewer column". The measurements in
   .smm-table-wrap disproved the premise: the card had no scrollbar, it had a
   table hanging out of it and taking the page with it. With the table properly
   contained the customer can reach every column by swiping, so nothing is
   dropped. The class stays on the markup — it still names the columns that
   would go first if a table ever needs to shed again. */
@media (max-width: 560px){
  .smm-pager__n, .smm-pager__arrow { min-width: 30px; height: 30px; }
}
/* Sortable column header. The chevron points down for ascending (smallest at
   the top, which is what it looks like) and flips for descending. */
.smm-th {
  display: inline-flex; align-items: center; gap: 3px;
  color: inherit; text-decoration: none; white-space: nowrap;
}
.smm-th:hover { color: var(--accent-text); text-decoration: none; }
.smm-th.is-sorted { color: var(--accent-text); }
.smm-th__dir { opacity: 0; transition: opacity .12s ease, transform .12s ease; }
.smm-th:hover .smm-th__dir { opacity: .45; }
.smm-th.is-sorted .smm-th__dir { opacity: 1; }
.smm-th__dir.is-desc { transform: rotate(180deg); }
.u-right .smm-th { flex-direction: row-reverse; }
/* "due" marks a run count derived from the schedule rather than reported by the
   provider — an estimate must never look like confirmed delivery. */
.smm-drip__est {
  margin-left: 5px; padding: 0 5px; border-radius: var(--ctl-r);
  background: var(--surface-2); color: var(--ink-muted);
  font-size: 10px; text-transform: uppercase; letter-spacing: .04em;
}
.smm-progress__bar--est {
  background-image: repeating-linear-gradient(45deg,
    rgba(255,255,255,.35) 0 4px, transparent 4px 8px);
}

/* ==========================================================================
   API documentation (api_info.php)
   ========================================================================== */
/* Two columns on a wide screen: a sticky contents rail and the reference. The
   page is long by design — a reseller reads it once and then jumps back to one
   section at a time, so the rail matters more than it would on a short page. */
.smm-docs { display: block; }
@media (min-width: 1080px) {
  .smm-docs {
    display: grid; align-items: start; gap: var(--s-5);
    grid-template-columns: 190px minmax(0, 1fr);
  }
  .smm-docs > .smm-page-head { grid-column: 1 / -1; }
  .smm-docs__nav {
    position: sticky; top: calc(var(--topbar-h) + var(--s-4));
    display: flex; flex-direction: column; gap: 1px;
    max-height: calc(100vh - var(--topbar-h) - var(--s-6)); overflow-y: auto;
  }
  .smm-docs > section, .smm-docs > .smm-notice { grid-column: 2; }
}
.smm-docs__nav {
  margin-bottom: var(--s-5);
  display: flex; flex-wrap: wrap; gap: var(--s-1);
}
.smm-docs__nav a {
  padding: var(--s-2) var(--s-3); border-radius: var(--r-sm);
  color: var(--ink-muted); text-decoration: none;
  font-size: var(--fs-sm); font-weight: var(--fw-med); line-height: 1.2;
}
.smm-docs__nav a:hover { background: var(--surface-2); color: var(--ink); }
.smm-docs__nav a.is-here { background: var(--accent-soft); color: var(--accent-text); font-weight: var(--fw-bold); }

.smm-docs section { scroll-margin-top: calc(var(--topbar-h) + var(--s-4)); }
.smm-docs__p { margin: 0 0 var(--s-4); line-height: 1.65; }
.smm-docs__note {
  margin: var(--s-3) 0 var(--s-4); color: var(--ink-muted);
  font-size: var(--fs-sm); line-height: 1.6;
}
.smm-docs__ul, .smm-docs__ol { margin: 0 0 var(--s-4) var(--s-5); padding: 0; line-height: 1.65; }
.smm-docs__ul li, .smm-docs__ol li { margin-bottom: var(--s-2); }
.smm-docs__opts { font-size: var(--fs-sm); color: var(--ink-muted); }
.smm-h3 {
  margin: var(--s-6) 0 var(--s-3); font-size: var(--fs-md); font-weight: var(--fw-bold);
  padding-top: var(--s-4); border-top: var(--border-w) solid var(--border);
}
.smm-panelcard > .smm-h3:first-of-type { border-top: 0; padding-top: 0; }
.smm-td-note { color: var(--ink-muted); font-size: var(--fs-sm); }

/* The action name reads as a label in the heading, not as inline code. */
.smm-act {
  display: inline-block; margin-right: var(--s-2);
  padding: 2px var(--s-2); border-radius: var(--r-sm);
  background: var(--accent); color: var(--accent-ink);
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  font-size: 0.85em; font-weight: var(--fw-bold);
}

/* Key/value strip at the top of the quick start. Named -deflist, not -kv:
   .smm-kv is a plain label/value PAIR (see above, and buy.php), and this grid
   shared the name. Being the later definition it won, so buy.php's pairs were
   rendered as this container — grid, a --border background and no padding,
   because the padding lives on the __row children they do not have. The grey
   boxes with the figures jammed against their edges were that collision. */
.smm-deflist { display: grid; gap: 1px; background: var(--border); border-radius: var(--r-md); overflow: hidden; margin-bottom: var(--s-5); }
.smm-deflist__row { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); padding: var(--s-3) var(--s-4); background: var(--surface); }
.smm-deflist__k { flex: 0 0 110px; color: var(--ink-muted); font-size: var(--fs-sm); font-weight: var(--fw-med); }
.smm-deflist__v { flex: 1 1 260px; min-width: 0; font-size: var(--fs-sm); }

/* Code blocks. Wrapping is deliberate: a horizontal scrollbar hides the end of
   every line, and these are meant to be read as much as copied. */
.smm-docs code, .smm-deflist code, .smm-table code {
  padding: 1px 5px; border-radius: 4px;
  background: var(--surface-2); border: var(--border-w) solid var(--border);
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  font-size: 0.9em; overflow-wrap: anywhere;
}
.smm-codeblock {
  position: relative; margin: 0 0 var(--s-5);
  background: var(--surface-2); border: var(--border-w) solid var(--border);
  border-radius: var(--r-md);
}
.smm-codeblock pre {
  margin: 0; padding: var(--s-4) var(--s-7) var(--s-4) var(--s-4);
  overflow-x: auto; white-space: pre-wrap; overflow-wrap: anywhere;
}
.smm-codeblock code {
  padding: 0; background: none; border: 0; border-radius: 0;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  font-size: 13px; line-height: 1.6; color: var(--ink);
}
.smm-codeblock--out { background: var(--surface); border-style: dashed; }
.smm-codeblock__copy {
  position: absolute; top: var(--s-2); right: var(--s-2);
  padding: 4px var(--s-3); border-radius: var(--ctl-r);
  background: var(--surface); border: var(--border-w) solid var(--border);
  color: var(--ink-muted); font: inherit; font-size: 12px; font-weight: var(--fw-med);
  cursor: pointer; opacity: .75;
}
.smm-codeblock:hover .smm-codeblock__copy { opacity: 1; }
.smm-codeblock__copy:hover { background: var(--surface-3); color: var(--ink); }
.smm-codeblock__copy.is-done { background: var(--done-bg); color: var(--done-ink); border-color: var(--done-bd); opacity: 1; }

/* One order type per accordion: thirteen tables open at once is unreadable. */
.smm-type {
  border: var(--border-w) solid var(--border); border-radius: var(--r-md);
  margin-bottom: var(--s-3); background: var(--surface);
}
.smm-type[open] { background: var(--surface-2); }
.smm-type__head {
  display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
  padding: var(--s-3) var(--s-4); cursor: pointer; list-style: none;
  min-height: var(--tap-min);
}
.smm-type__head::-webkit-details-marker { display: none; }
.smm-type__head::after {
  content: "+"; margin-left: auto; color: var(--ink-muted);
  font-size: var(--fs-lg); line-height: 1; flex: none;
}
.smm-type[open] > .smm-type__head::after { content: "−"; }
.smm-type__name { font-weight: var(--fw-bold); }
.smm-type__fields {
  color: var(--ink-muted); font-size: var(--fs-sm);
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  overflow-wrap: anywhere;
}
.smm-type__body { padding: 0 var(--s-4) var(--s-4); background: var(--surface); }
.smm-tag--drip { background: var(--prog-bg); color: var(--prog-ink); }

/* Amber notice: the two places on this page where getting it wrong costs money
   (errors are HTTP 200, and drip-feed quantity is per run). */
.smm-notice--warn { border-color: var(--warn-bd); background: var(--warn-bg); color: var(--warn-ink); }

@media (max-width: 640px) {
  .smm-codeblock code { font-size: 12px; }
  .smm-deflist__k { flex: 1 1 100%; }
}

/* Wide reference tables scroll inside their own box rather than pushing the page.
   `.smm-table-wrap` is overflow:visible globally (the drip-feed pager needed the
   table to stop clipping its own siblings), which means a table whose min-content
   width beats the column shoves the whole document sideways — the reselling table,
   five nowrap money columns, did exactly that and clipped every paragraph on the
   page by 21px. Scoped to the docs page so the drip-feed fix is untouched. */
.smm-docs .smm-table-wrap { overflow-x: auto; overscroll-behavior-x: contain; }

/* ---- API keys ------------------------------------------------------------ */
.smm-keys { display: grid; gap: var(--s-3); margin-bottom: var(--s-4); }
.smm-key {
  display: grid; gap: var(--s-2);
  padding: var(--s-4);
  background: var(--surface-2); border: var(--border-w) solid var(--border);
  border-radius: var(--r-md);
}
.smm-key.is-dead { opacity: .6; }
/* A key that has just been minted is the one thing on the page worth looking at. */
.smm-key.is-new { border-color: var(--done-bd); background: var(--done-bg); }
.smm-key__head { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.smm-key__label { font-weight: var(--fw-bold); }
.smm-key__val {
  display: block; padding: var(--s-2) var(--s-3);
  background: var(--surface); border: var(--border-w) solid var(--border); border-radius: var(--r-sm);
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  font-size: 14px; overflow-wrap: anywhere; user-select: all;
}
.smm-key__meta { color: var(--ink-muted); font-size: var(--fs-sm); }
.smm-key__acts { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.smm-keynew { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-bottom: var(--s-3); }
.smm-keynew .smm-input { flex: 1 1 280px; }
.smm-keyerr { margin: 0 0 var(--s-4); color: var(--canc-ink); font-size: var(--fs-sm); }

/* ==========================================================================
   Sign in / sign up
   ========================================================================== */
/* A centred card on its own, not a dashboard page with the chrome removed —
   somebody who is not signed in has exactly one thing to do here. */
.smm-auth {
  min-height: 100vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--s-4); padding: var(--s-5) var(--s-4);
}
.smm-auth__card {
  width: 100%; max-width: 420px;
  padding: var(--s-6) var(--s-5) var(--s-5);
  background: var(--surface); border: var(--border-w) solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-2, var(--shadow-1));
}
.smm-auth__brand {
  display: flex; align-items: center; gap: var(--s-3);
  margin-bottom: var(--s-6);
}
.smm-auth__mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: var(--r-md);
  background: var(--accent); color: var(--accent-ink); flex: none;
}
.smm-auth__mark .smm-i { width: 19px; height: 19px; }
.smm-auth__name { font-weight: var(--fw-bold); font-size: var(--fs-md); letter-spacing: -0.01em; }

.smm-auth__title { margin: 0 0 var(--s-2); font-size: var(--fs-xl); font-weight: var(--fw-bold); letter-spacing: -0.02em; }
.smm-auth__sub { margin: 0 0 var(--s-5); color: var(--ink-muted); font-size: var(--fs-sm); }

.smm-auth__msg {
  margin: 0 0 var(--s-4); padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md); font-size: var(--fs-sm); line-height: 1.5;
}
.smm-auth__msg--bad { background: var(--canc-bg); color: var(--canc-ink); border: var(--border-w) solid var(--canc-bd); }
.smm-auth__msg--ok  { background: var(--done-bg); color: var(--done-ink); border: var(--border-w) solid var(--done-bd); }

/* Reveal control sits inside the field rather than beside it, so the input keeps
   the full width and the button cannot be mistaken for the submit. */
.smm-auth__pw { position: relative; }
.smm-auth__pw .smm-input { padding-right: 68px; }
.smm-auth__peek {
  position: absolute; right: var(--s-2); top: 50%; transform: translateY(-50%);
  padding: 4px var(--s-3); border-radius: var(--r-sm);
  background: none; border: 0; color: var(--accent-text);
  font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-med); cursor: pointer;
}
.smm-auth__peek:hover { background: var(--surface-2); }

.smm-auth__check {
  display: flex; align-items: center; gap: var(--s-2);
  margin: var(--s-2) 0 var(--s-5); font-size: var(--fs-sm); color: var(--ink-muted); cursor: pointer;
}
.smm-auth__go { width: 100%; justify-content: center; }
.smm-auth__go[disabled] { opacity: .7; cursor: default; }
.smm-auth__captcha:not(:empty) { margin-bottom: var(--s-4); }
.smm-auth__link { font-size: var(--fs-sm); font-weight: var(--fw-med); color: var(--accent-text); text-decoration: none; }
.smm-auth__link:hover { text-decoration: underline; }
.smm-auth__alt {
  margin: var(--s-5) 0 0; padding-top: var(--s-4);
  border-top: var(--border-w) solid var(--border);
  text-align: center; font-size: var(--fs-sm); color: var(--ink-muted);
}
.smm-auth__alt a { color: var(--accent-text); font-weight: var(--fw-med); }
.smm-auth__foot { margin: 0; color: var(--ink-muted); font-size: var(--fs-sm); }

/* The honeypot. Off-screen rather than display:none, because some bots skip
   fields that are obviously hidden — and never visible to a person, a screen
   reader, or the tab key. */
.smm-hp {
  position: absolute !important; left: -9999px !important; top: auto !important;
  width: 1px !important; height: 1px !important;
  opacity: 0 !important; pointer-events: none !important;
}

/* ---- Campaign wizard: pick several actions ------------------------------- */
.smm-act {
  border: var(--border-w) solid var(--border); border-radius: var(--r-md);
  margin-bottom: var(--s-3); background: var(--surface);
}
.smm-act.is-on { border-color: var(--accent); background: var(--accent-soft); }
.smm-act__head {
  display: flex; align-items: flex-start; gap: var(--s-3);
  padding: var(--s-4); cursor: pointer; min-height: var(--tap-min);
}
.smm-act__tick { margin-top: 3px; flex: none; width: 18px; height: 18px; }
.smm-act__title { font-weight: var(--fw-bold); }
.smm-act__blurb {
  margin: calc(var(--s-3) * -1) 0 0; padding: 0 var(--s-4) var(--s-4) calc(var(--s-4) + 30px);
  color: var(--ink-muted); font-size: var(--fs-sm); line-height: 1.5;
}
.smm-act__body {
  padding: var(--s-4); border-top: var(--border-w) solid var(--border);
  background: var(--surface);
}
/* Radio choices read as rows with room to explain themselves — an action like
   "which comments" is a decision, not a toggle. */
.smm-actopt {
  display: flex; align-items: flex-start; gap: var(--s-3);
  padding: var(--s-3); margin-bottom: var(--s-2);
  border: var(--border-w) solid var(--border); border-radius: var(--r-sm);
  cursor: pointer; font-size: var(--fs-sm); line-height: 1.5;
}
.smm-actopt:hover { background: var(--surface-2); }
.smm-actopt input { margin-top: 3px; flex: none; }
.smm-actopt small { color: var(--ink-muted); }
.smm-actrange { display: flex; align-items: center; gap: var(--s-3); }
.smm-actrange .form-control { max-width: 130px; }
.smm-actrange span { color: var(--ink-muted); font-size: var(--fs-sm); }
.smm-startcard__title { margin: 0 0 var(--s-2); font-size: var(--fs-lg); font-weight: var(--fw-bold); }
.smm-startcard__text { margin: 0 0 var(--s-4); color: var(--ink-muted); line-height: 1.6; max-width: 60ch; }
/* The provider's accepted range, under the quantity inputs. Quieter than the
   "ordering X to Y" line above it — it answers a different question. */
.smm-qty-lim { color: var(--ink-muted); }
.smm-qty-lim strong { color: var(--ink); font-variant-numeric: tabular-nums; }

/* A recommended service in the automation wizard: "Lowest price", "Best value".
   A link, because clicking it selects that service in the list below rather than
   navigating anywhere. */
.smm-pick { color: var(--accent-text); font-weight: var(--fw-med); text-decoration: none; }
.smm-pick:hover, .smm-pick:focus-visible { text-decoration: underline; }

/* Traffic source mix: a share against each source we actually sell. Two columns
   on a wide screen, one on a phone — the share box stays first either way, since
   it is the only part being edited. */
.smm-mixgrid {
  display: grid; gap: var(--s-2);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
.smm-mixrow {
  display: grid; grid-template-columns: 5.5rem 1fr; gap: 0 var(--s-3);
  align-items: center; padding: var(--s-2) var(--s-3);
  border: var(--border-w) solid var(--border); border-radius: var(--r-md);
  background: var(--surface-2);
}
.smm-mixrow:hover { border-color: var(--border-strong); }
.smm-mixrow:has(.smm-mixpct:focus-visible) {
  outline: var(--ring-w) solid var(--focus); outline-offset: var(--ring-offset);
}
.smm-mixpct { grid-row: span 2; text-align: right; font-variant-numeric: tabular-nums; }
.smm-mixrow__name { font-weight: var(--fw-med); }
.smm-mixrow__meta { font-size: var(--fs-sm); color: var(--ink-muted); }

@media (max-width: 520px) {
  .smm-mixrow { grid-template-columns: 4.5rem 1fr; }
}

/* Facet dropdowns for narrowing one action's services. They wrap rather than
   scroll, because a platform can offer three of them and a phone cannot fit
   three side by side. */
.smm-facets { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.smm-facets .smm-facet { flex: 1 1 12rem; min-width: 0; }

/* "You set: Visitor country · Device · Search keyword" — the 32 services that
   accept targeting as real fields rather than encoding it in which SKU you buy. */
.smm-cfg { color: var(--accent-text); }


/* ---- Campaign row: state, progress, amount, and when --------------------
   Four columns, not five. The fifth was Actions, and it held nothing on every
   row except during a 15-second cancel window — a permanently empty column
   paying for itself in width taken from the campaign's own name. The cancel
   countdown now lives in Status, which is the cell that already describes what
   the campaign is doing.

   Alignment: text columns align left with their headers, and only Amount is
   right-aligned, because money reads down a right edge. Progress used to be
   right-aligned with a left-growing bar under a right-set header, which is why
   the header never sat over its own content. */
.smm-camp__cell, .smm-camp__statecell, .smm-camp__progcell { text-align: left; }

/* Status: the badge, then anything that qualifies it — money returned, or the
   one control the row offers. Stacked, so a long refund figure never shoves the
   badge out of shape. */
.smm-camp__statecell > * { display: block; }
.smm-camp__statecell > * + * { margin-top: var(--s-2); }
.smm-camp__statecell .smm-badge { display: inline-block; }
.smm-camp__act { font-size: var(--fs-sm); font-weight: var(--fw-med); color: var(--accent-text); }

/* `.smm-camp__refund` lived here — the money-back figure under the status badge.
   It is gone from the markup: once the Amount column started showing the refund
   in --canc-ink, this printed the same number on the row a second time. The
   badge says what happened, the column says how much. */

.smm-camp__amtcell .u-money { white-space: nowrap; }

/* When it ran. Plain text with the full date on hover for a mouse; on a phone
   it folds behind a dot, because a touch screen has no hover and the tooltip
   that serves desktop is invisible on the device that needs it most. */
.smm-camp__when {
  display: block; margin-top: 2px;
  font-size: var(--fs-xs); color: var(--ink-subtle);
  font-family: var(--font-num); line-height: 1.4;
}
.smm-camp__i {
  display: none; align-items: center; justify-content: center;
  width: 16px; height: 16px; padding: 0; border-radius: 50%;
  border: var(--border-w) solid var(--border); background: none; cursor: pointer;
  font: italic var(--fw-med) 10px/1 inherit; color: var(--ink-muted);
  vertical-align: -3px;
}
.smm-camp__i:hover { color: var(--accent-text); border-color: var(--accent-border); }
.smm-camp__i:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }

/* Only the name gives ground before the stack. Narrowing Progress here put the
   count and its bar on separate lines: 120px is a few pixels under what they
   need side by side, and four columns leave enough room not to try. */
@media (max-width: 900px) {
  .smm-camp__name, .smm-camp__svc { max-width: 30ch; }
}

/* ---- Phone and small tablet: stop pretending to be a table ---------------
   Four fixed columns need 422px before the campaign's own name gets a pixel, so
   below 700px the row stops being a row and becomes a card:

       name .............................. amount
       service
       (i)
       [ badge ] .......................... 4/4 --

   Two grid columns: what the campaign IS on the left, what it COST and how far
   it has GOT on the right, each pair sharing a baseline. Nothing is hidden, so
   nothing has to be dug out, and the two figures a customer actually scans for
   line up down one right edge.

   Cells carry padding and a bottom border from .smm-table at (0,2,1); the
   placement rules below reset both at (0,2,2) so they win outright rather than
   depending on source order. */
@media (max-width: 700px) {
  .smm-camptable, .smm-camptable tbody { display: block; width: auto; }
  .smm-camptable thead { display: none; }

  /* table-layout:fixed column widths would otherwise size the grid items */
  .smm-camptable th:nth-child(1), .smm-camptable td:nth-child(1),
  .smm-camptable th:nth-child(2), .smm-camptable td:nth-child(2),
  .smm-camptable th:nth-child(3), .smm-camptable td:nth-child(3),
  .smm-camptable th:nth-child(4), .smm-camptable td:nth-child(4) { width: auto; }

  .smm-camptable tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    column-gap: var(--s-3);
    row-gap: var(--s-2);
    padding: var(--s-3) 0;
    border-bottom: var(--border-w) solid var(--border);
  }
  .smm-camptable tbody tr:last-child { border-bottom: 0; }

  .smm-camptable tbody td.smm-camp__cell {
    grid-column: 1; grid-row: 1; padding: 0; border-bottom: 0;
  }
  .smm-camptable tbody td.smm-camp__amtcell {
    grid-column: 2; grid-row: 1; padding: 0; border-bottom: 0; text-align: right;
  }
  .smm-camptable tbody td.smm-camp__statecell {
    grid-column: 1; grid-row: 2; padding: 0; border-bottom: 0;
  }
  .smm-camptable tbody td.smm-camp__progcell {
    grid-column: 2; grid-row: 2; padding: 0; border-bottom: 0; text-align: right;
  }

  /* The name identifies the row, so it takes the lines it needs. The service is
     provider boilerplate - letting it wrap spent four lines on "[ Mix Bot
     Accounts - [Max: 1K] ] | 1K per day", so it stays clipped to one, and the
     info dot rides on the end of that line rather than claiming one of its own.
     Opened, it drops to its own line, because the date has nowhere to sit next
     to a service name already using the full width. */
  .smm-camp__name, .smm-camp__svc { max-width: none; }
  .smm-camp__name { white-space: normal; }
  .smm-camp__svc {
    display: inline-block; max-width: calc(100% - 32px); vertical-align: middle;
  }
  .smm-camp__when { display: inline-block; margin: 0 0 0 var(--s-2); vertical-align: middle; }
  .smm-camp__when.is-open { display: block; margin: 2px 0 0; }

  /* Badge, and whatever qualifies it, side by side; they wrap if a refund
     figure and a countdown ever land on the same row. */
  .smm-camp__statecell > * { display: inline-block; }
  .smm-camp__statecell > * + * { margin: 0 0 0 var(--s-2); }

  .smm-camp__amtcell .u-money { font-weight: var(--fw-med); }

  /* No hover on a touch screen, so the date comes out from behind the dot on a
     tap instead of living in a title attribute nobody can reach. */
  .smm-camp__i { display: inline-flex; }
  .smm-camp__t { display: none; }
  .smm-camp__when.is-open .smm-camp__t { display: inline; margin-left: var(--s-2); }
}

/* ==========================================================================
   Phone: the top bar, and the wizard above the fold
   ========================================================================== */

/* The sidebar's preferences drawer is a phone-only mirror of two controls that
   live in the top bar on a desktop. Hidden by default so the desktop sidebar is
   unchanged; the phone rules below reverse both halves at once. */
.smm-sidebar__prefs { display: none; }

@media (max-width: 700px) {
  /* The top bar carried seven controls in a flex-wrap container. At 375px they
     needed three rows and 150px of an 812px screen — sticky, so that height was
     gone from every scroll position on every page. Nothing here may wrap again:
     what does not fit is moved, not folded onto a second line. */
  .smm-topbar, .smm-topbar__right, .smm-stats { flex-wrap: nowrap; }
  .smm-topbar { gap: var(--s-2); }
  .smm-topbar__right, .smm-stats { gap: var(--s-2); min-width: 0; }

  /* The admin shortcut lives in the sidebar drawer on a phone. The colour theme
     does NOT: it is a one-tap preference, and burying it behind the menu made a
     two-step errand of it. */
  .smm-topbar .smm-viewswitch { display: none; }
  .smm-sidebar__prefs { display: block; margin-top: var(--s-5); }
  .smm-sidebar__prefs .smm-themes { display: inline-flex; }

  /* The phone theme switch is the dedicated .smm-themetoggle button, not this
     pair. The pair goes back into the sidebar drawer where it has room for its
     labels; up here it was being reduced to one visible half by hiding whichever
     matched the current theme, and that meant the element under the finger was
     removed by its own handler. A control that can delete its own click target
     mid-gesture is not a control. */
  .smm-topbar .smm-themes { display: none; }
  /* Specificity, not source order: the base .smm-themetoggle rule is appended at
     the END of this file, so a bare .smm-themetoggle here would lose to it and
     the button would never appear. */
  .smm-topbar .smm-themetoggle { display: inline-grid; }

  /* "BALANCE" over "$41.96" is a label for a figure that is already a currency
     amount next to a wallet. The value carries it alone. (The rule that meant
     to do this targeted .smm-balance__label, a class this markup does not use,
     so it had never once applied.) */
  .smm-stat__label { display: none; }
  .smm-stat { gap: var(--s-2); padding: 0 var(--s-3); }
  .smm-stat__value { font-size: var(--fs-md); }

  /* Add funds goes. The balance chip beside it is a link to the same page, so
     the row was carrying two controls for one destination — and the one that
     went is the one whose meaning had to be guessed from a wallet glyph. */
  .smm-topbar .smm-btn--primary { display: none; }

  /* Four named steps need 378px and the card offers 343. The number is the
     wayfinding; the name only matters for the step you are on. */
  .smm-steps { flex-wrap: nowrap; gap: var(--s-2); margin-bottom: var(--s-4); }
  /* 44px is the touch minimum, and a numbered dot at s-2 padding comes out 40.
     They are controls now, so they have to be thumbable, not just visible. */
  .smm-steps li { padding: var(--s-2); min-width: 44px; justify-content: center; }
  .smm-steps li .smm-steps__t { display: none; }
  .smm-steps li.is-on { padding: var(--s-2) var(--s-3); }
  .smm-steps li.is-on .smm-steps__t { display: inline; }

  /* The two chooser cards spent 300px before the customer reached the category
     they came for. The sub-lines repeat what the empty state under each search
     box already says, so on a phone only one of the two speaks. */
  .smm-panelcard { padding: var(--s-4); margin-bottom: var(--s-4); }
  .smm-panelcard__title { font-size: var(--fs-md); margin-bottom: var(--s-3); }
  .smm-panelcard__sub { display: none; }
  .smm-filters { gap: var(--s-4); }
}

@media (max-width: 700px) {
  /* Eight status chips wrapped onto three rows and took 280px above the list
     they filter. One row that scrolls sideways is the phone convention for
     exactly this, and it costs 48px. The fade on the right edge is what says
     there is more — a cut-off chip on its own reads as a layout fault. */
  .smm-chiprow {
    flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    padding-right: var(--s-5);
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  }
  .smm-chiprow::-webkit-scrollbar { display: none; }
  .smm-fchip { flex: none; }

  /* A green and a red block the width of a thumb each, for two reports that a
     phone cannot open anyway. They stay reachable and stop shouting. */
  .smm-exports { gap: var(--s-2); }
  .smm-exports .smm-btn { padding: 0 var(--s-3); font-size: var(--fs-sm); }
  .smm-wrap .smm-exports__range { font-size: var(--fs-sm); padding: 0 var(--s-2); }

  /* "Create a campaign" broke over two lines and shouldered the pill beside it
     out of shape. The pill is a hint, not a control: it goes under the title. */
  .smm-cartcard__head {
    flex-direction: column; align-items: flex-start; gap: var(--s-2);
    padding: var(--s-4) var(--s-4) var(--s-3);
  }
}

@media (max-width: 700px) {
  /* The page's own explanation ran to five lines and 180px before the form it
     explains. Nothing is cut — it is set at the size the rest of the phone
     layout uses, which brings it to three. */
  .smm-page-head { margin-bottom: var(--s-4); }
  .smm-page-head p { font-size: var(--fs-sm); line-height: 1.45; }
}

@media (max-width: 700px) {
  /* One inset for everything inside a card, so nothing reads as breaking out.
     The campaigns list has no .card-body: the table sits straight in the .card
     and the CELLS supplied its inset, via .smm-table td's own 16px. Stacking the
     row zeroed that padding and the names, badges and money went flush to the
     card edge while the toolbar above them stayed at 24px. The row carries the
     inset now, and the head, toolbar and pager come to the same 16px.

     The divider still runs edge to edge: a border on the row's border box spans
     the padding, which is the ordinary phone list — inset content, full-bleed
     rule between. */
  .smm-cartcard__head { padding: var(--s-4) var(--s-4) var(--s-3); }
  .smm-toolbar { padding: 0 var(--s-4) var(--s-4); }
  .smm-pager { padding: var(--s-3) var(--s-4) var(--s-4); }
  .smm-camptable tbody tr { padding: var(--s-3) var(--s-4); }
  .smm-blank { padding: var(--s-6) var(--s-4); }
}

/* The orders table is 1,604px wide and now scrolls, so the column that says
   WHICH order a row is has to stay put — swiping a wide table and losing the
   identity of the row you are reading is the failure mode that makes people
   give up on one. The ID column pins to the left edge.
   `.smm-table` is already border-collapse: separate, which sticky cells need.
   The striping and hover backgrounds have to be restated on the pinned cell,
   or the rows behind it show through as it passes underneath. */
.smm-wrap .smm-ordtable thead th:first-child,
.smm-wrap .smm-ordtable tbody td:first-child {
  position: sticky; left: 0; z-index: 3;
  background: var(--surface);
  box-shadow: 1px 0 0 var(--border);
}
.smm-wrap .smm-ordtable thead th:first-child { z-index: 4; background: var(--surface-2); }
.smm-wrap .smm-ordtable tbody tr:nth-child(even) td:first-child { background: var(--surface-2); }
.smm-wrap .smm-ordtable tbody tr:hover td:first-child { background: var(--surface-3); }

@media (max-width: 700px) {
  /* Pinned at its natural width the ID column took 350px of a 347px viewport —
     which is not a pinned column, it is a wall. The timestamp is what made it
     wide, so it wraps onto two lines and the column is fixed at 140px: about a
     third of the screen, enough for a nine-digit order number on one line.

     Two things had to be undone to get there. `.u-num` carries
     white-space: nowrap for tabular figures and the order id wears it, so
     "Campaign #31" ran straight out over the service column — a cell only
     paints its own width of background, so the neighbour showed through
     underneath ours. And breaking anywhere fixed that by splitting 119063808
     across two lines, which is worse than either: an order number is a single
     token. It wraps at spaces only now, and the cell clips the remainder. */
  .smm-wrap .smm-ordtable thead th:first-child,
  .smm-wrap .smm-ordtable tbody td:first-child {
    width: 140px; min-width: 140px; max-width: 140px;
  }
  .smm-wrap .smm-ordtable tbody td:first-child { overflow: hidden; }
  .smm-wrap .smm-ordtable tbody td:first-child .smm-ord__id {
    white-space: normal; overflow-wrap: normal; word-break: normal;
  }
  .smm-ord__date { white-space: normal; font-size: var(--fs-xs); line-height: 1.3; }
  .smm-ord__id { font-size: var(--fs-sm); }
}

/* A refunded figure in the Amount column, in the same ink as the badge above it,
   so "Refunded · $3.64" reads as one statement rather than as $3.64 charged.
   Everything else in that column is money the customer actually paid and stays
   in the ordinary ink. */
.smm-camp__backamt { color: var(--canc-ink); }

/* ---- Progress: one shape on every row ------------------------------------
   This column has been through three designs and the same failure twice: a
   count sitting next to the bar. "1/2" is three characters, "0/1000" is six and
   "2530/2530" is nine, so the figure decided how wide the column was, which
   decided how much room the campaign name had, which is why no two rows looked
   alike. Reserving space for the worst case fixed the geometry and made every
   row pay for a number almost none of them had.

   So the count is gone. The bar carries the state and a percentage — four
   characters at "100%", the same four for a campaign of sixty units and one of
   six million — and the figures move into a panel that opens on hover, or on tap
   where there is no hover. Everything in it is rendered with the row, from the
   aggregate the list already ran: no request, no query, nothing that gets more
   expensive as the table fills up. */
.smm-prog { position: relative; display: block; }

.smm-prog__btn {
  display: flex; align-items: center; gap: var(--s-2);
  width: 100%; padding: 0; border: 0; background: none;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.smm-prog__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--ctl-r); }

/* The track takes the leftover space and the percentage is pinned to the right,
   so both edges of every bar line up down the column however long the campaign
   ran. 4ch of the numeric font is "100%" exactly. */
.smm-prog__track {
  flex: 1 1 auto; min-width: 0; display: flex; overflow: hidden;
  height: 6px; border-radius: var(--r-pill); background: var(--surface-3);
}
.smm-prog__pct {
  flex: none; width: 4ch; text-align: right;
  font-size: var(--fs-sm); color: var(--ink-muted);
}

/* Delivered is solid. What the provider has accepted but not yet delivered is
   the same colour at a third of the strength — near enough to read as part of
   the same bar, different enough to say "this part has not landed". Opacity
   rather than color-mix, which Safari only learned in 16.2. */
.smm-prog__seg { display: block; height: 100%; }
.smm-prog__seg--done { background: var(--accent); }
.smm-prog__seg--fly  { background: var(--accent); opacity: .3; }

/* ---- The panel ------------------------------------------------------------
   Hidden with visibility rather than `display`, so it is out of the
   accessibility tree and un-clickable while closed but still has a measured
   size — a panel that has never been laid out flickers into place on the first
   hover. Anchored to the cell's right edge, because the bar is the rightmost
   thing in the column and a panel growing further right would leave the card. */
.smm-prog__pop {
  position: absolute; z-index: 40; top: calc(100% + 6px); right: 0;
  display: grid; gap: 2px; min-width: 190px; padding: var(--s-3);
  border: var(--border-w) solid var(--border); border-radius: var(--r-lg);
  background: var(--surface); box-shadow: var(--shadow-3);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .12s ease;
}
.smm-prog__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); }
.smm-prog__k { font-size: var(--fs-xs); color: var(--ink-subtle); white-space: nowrap; }
.smm-prog__v { font-size: var(--fs-xs); color: var(--ink); white-space: nowrap; }
.smm-prog__row--done .smm-prog__v { color: var(--accent-text); }
/* Delayed is the one row in this panel that is bad news, so it is the one row
   that is not ink-coloured. --pend-ink is the same amber the Pending badge uses,
   so "we are chasing this" reads the same wherever it appears. */
.smm-prog__row--stall .smm-prog__k,
.smm-prog__row--stall .smm-prog__v { color: var(--pend-ink); }

/* Hover only where there is a pointer that can hover. On a touch screen the same
   rule leaves the panel stuck open after a tap with nothing to close it.

   :focus-within USED to be on this line and had to come off. It revealed the
   panel for a keyboard user without the JS knowing, so the button still said
   aria-expanded="false" over a panel that was on screen and in the accessibility
   tree, and Escape — which only clears the is-open class — did nothing to it.
   Focus is handled in ui.js now, through the same class as a tap, so the
   attribute and the pixels can never disagree. */
@media (hover: hover) {
  .smm-prog:hover .smm-prog__pop { opacity: 1; visibility: visible; pointer-events: auto; }
}
/* Tap, keyboard, and any browser that lies about hover all land here. */
.smm-prog__pop.is-open { opacity: 1; visibility: visible; pointer-events: auto; }

@media (max-width: 700px) {
  /* The card's right column is sized by its widest child. With the count gone
     that is the bar itself, which is a fixed width, so every card now splits the
     same way regardless of the numbers in it. */
  .smm-camp__progcell .smm-prog__btn { justify-content: flex-end; }
  .smm-camp__progcell .smm-prog__track { flex: none; width: 64px; }
  /* Anchored to the card's edge and allowed to be wider than the column it
     hangs off, because on a phone the column is 100px and the panel is the only
     place these figures exist. */
  .smm-camp__progcell .smm-prog__pop { min-width: 200px; }
}

/* ==========================================================================
   Collapsible sidebar — the icon rail
   ==========================================================================
   Desktop only. Below 992px the sidebar is already an off-canvas drawer, where
   "collapsed" means closed, so a second collapsed state there would be two
   controls for one thing.

   The state is an attribute on <html>, not on .smm-shell, because the inline
   script in <head> restores it before first paint. A sidebar that flashes open
   on the way to every page is worse than not offering the rail at all. */
:root { --sidebar-rail-w: 76px; }

/* The control is the top bar's three lines, not a button in the sidebar's foot.
   A collapse button living inside the thing it collapses has to be hunted for at
   the bottom of a scrolling column, and once collapsed it is a 76px stub with no
   obvious way back. The hamburger is already there, already means "the menu",
   and is in the same place whichever state the sidebar is in — it is only hidden
   above 991px today because the drawer it opened did not exist up there. */
.smm-topbar .smm-sidebar__toggle { display: inline-flex; }

@media (min-width: 992px) {

  :root[data-rail="on"] .smm-sidebar {
    width: var(--sidebar-rail-w);
    padding-left: var(--s-2); padding-right: var(--s-2);
    align-items: stretch;
  }

  /* The label text goes, the grouping does not: each section heading becomes the
     rule that separated it anyway. Visually hidden rather than display:none is
     for the LINKS below — here the heading is decoration, so it can go. */
  :root[data-rail="on"] .smm-sidebar__label {
    height: 0; padding: 0; margin: var(--s-3) var(--s-2) var(--s-2);
    overflow: hidden; border-top: var(--border-w) solid var(--border);
  }
  :root[data-rail="on"] .smm-sidebar__label:first-of-type {
    border-top: 0; margin-top: 0;
  }

  /* One square per item, icon centred. 44px of target inside a 76px rail. */
  :root[data-rail="on"] #main-menu-navigation > li > a,
  :root[data-rail="on"] .smm-nav__link {
    justify-content: center; gap: 0; padding: var(--s-2);
  }
  /* display:none would take the link's only accessible name with it and leave a
     screen reader an unlabelled icon. Hidden from the eye, kept for the reader;
     ui.js mirrors it into a title for the mouse. */
  :root[data-rail="on"] .smm-nav__txt {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  /* Bigger, because the icon is now the whole label. */
  :root[data-rail="on"] .smm-nav__link svg,
  :root[data-rail="on"] #main-menu-navigation > li > a svg { width: 26px; height: 26px; }

}

/* ---- Phone theme toggle --------------------------------------------------
   One button, always present, never moved. Desktop keeps the labelled pair, so
   this is hidden there; the phone rules above turn it on and the pair off.

   Both icons are in the DOM and CSS reveals one — the button itself is never
   the thing being hidden, so it cannot lose a tap the way the swapped pair
   could. If these two rules never load, both icons show at once: ugly, and
   still perfectly clickable, which is the right way round for a fallback. */
.smm-themetoggle {
  display: none; place-items: center; flex: none;
  width: 44px; height: 44px; padding: 0;
  border: var(--border-w) solid var(--border); border-radius: var(--ctl-r);
  background: var(--surface); color: var(--ink);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.smm-themetoggle:hover { background: var(--surface-3); }
.smm-themetoggle:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.smm-themetoggle .smm-i { width: 20px; height: 20px; grid-area: 1 / 1; }
/* Show the mode you would switch TO: a moon on light, a sun on dark. */
.smm-themetoggle__sun { display: none; }
:root[data-theme="dark"] .smm-themetoggle__moon { display: none; }
:root[data-theme="dark"] .smm-themetoggle__sun { display: block; }

/* The step chips are controls: clicking one jumps to that step instead of
   pressing Back three times. They have to look pressable, or a customer walks
   back through the wizard never knowing they could. Focus-visible is not
   optional here — role="button" with tabindex="0" is reachable by keyboard, and
   a control you can reach but cannot see focused is worse than one you cannot
   reach at all. */
.smm-steps li { cursor: pointer; user-select: none; }
.smm-steps li:hover { border-color: var(--border-strong); background: var(--surface-3); }
.smm-steps li.is-on:hover { background: var(--accent-soft); border-color: var(--accent-border); }
.smm-steps li:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---- The cancel window, wearing the status pill --------------------------
   For the first seconds of a campaign the countdown IS the status: "Pending"
   told the customer nothing they could act on, while "Cancel 12s" says the same
   thing and offers the only thing they can still do about it. So it takes the
   badge shape and the real pill is held back until the count reaches zero.

   It is a <button> though, so it has to reset what the pill does not cover, and
   it has to look pressable rather than merely informative. Hovering turns it the
   colour of the outcome it produces. */
.smm-camp__cancelwin {
  font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-med);
  cursor: pointer; font-variant-numeric: tabular-nums;
}
.smm-camp__cancelwin:hover {
  background: var(--canc-bg); color: var(--canc-ink); border-color: var(--canc-bd);
}
.smm-camp__cancelwin:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.smm-camp__cancelwin .smm-cancelwin__t { font-weight: var(--fw-bold); }

/* ---- Orders: the reference, and money that came back ---------------------- */
/* The campaign reference is the drill-down, so it has to look like a link
   without shouting: the row already carries a service name and a URL, and a
   third blue thing would compete with both. */
.smm-ord__ref { color: var(--accent-text); text-decoration: none; }
.smm-ord__ref:hover { text-decoration: underline; text-underline-offset: 3px; }

/* A charge that came back, in the same ink as the badge that says so — the
   column is then readable at a glance instead of needing a second line parsed.
   Everything else in the column is money the customer actually paid. */
.smm-ord__backamt { color: var(--canc-ink); }

/* ---- One shape for the whole toolbar -------------------------------------
   The status chips were pills and the range select, Excel and PDF were 10px
   rectangles, sitting in the same row and reading as two unrelated sets of
   controls. They do the same kind of job — narrow this list — so they share a
   shape and a height.

   The shape is --ctl-r, the token the TOP BAR's controls already use, rather
   than a literal: "the same as the header buttons" is a relationship, and 10px
   written here would be a copy of today's answer that stops being true the
   moment the header changes. A first pass made all of this --r-pill instead,
   which was far too round and matched nothing else on the page. */
.smm-toolbar .smm-btn,
.smm-toolbar .smm-fchip,
.smm-wrap .smm-toolbar .smm-exports__range {
  border-radius: var(--ctl-r);
  min-height: var(--tap-min);
}
.smm-toolbar .smm-btn { display: inline-flex; align-items: center; gap: var(--s-2); }
/* ---- Rules between the figure columns ------------------------------------
   Narrow columns of numbers and pills sit side by side, and with only
   horizontal rules the eye has nothing to stop it drifting one column left or
   right — "-4" under Remains reading as a Qty, and so on. A line down the LEFT
   of each column puts a separator between every adjacent pair.

   Left rather than right so that hiding a column (`.smm-col--opt` at narrow
   widths) removes its own rule and leaves no doubled or orphaned line.

   The leading PROSE columns are excluded. A service name is the widest cell in
   the row and reads as a sentence; boxing it in fights that. `--ruled` assumes
   one such column, which covers most tables here; `--ruled-from3` is for the
   two that lead with a reference AND a name (Orders, Drip-feed), where a rule
   between those two would split one thought in half.

   Written as a modifier rather than per-table selectors because it was three
   near-identical copies before this, and a fourth page would have been a
   fourth. Orders keeps its own behaviour exactly: it was `nth-child(n+3)`,
   which is what `--ruled --ruled-from3` produces.

   `.smm-table` is border-collapse: separate, so these sit flush without
   doubling against the horizontal rules. Orders' pinned first column draws its
   own right edge with a box-shadow and is already separated. */
.smm-wrap .smm-table--ruled thead th:nth-child(n+2),
.smm-wrap .smm-table--ruled tbody td:nth-child(n+2),
.smm-wrap .smm-table--ruled tfoot td:nth-child(n+2) {
  border-left: var(--border-w) solid var(--border);
}
.smm-wrap .smm-table--ruled-from3 thead th:nth-child(2),
.smm-wrap .smm-table--ruled-from3 tbody td:nth-child(2),
.smm-wrap .smm-table--ruled-from3 tfoot td:nth-child(2) {
  border-left: 0;
}

/* Stacked rows have no columns to separate, so a left border there is just a
   stray vertical line down the side of every cell. `.smm-camptable` is the one
   table that stacks (700px); the rest scroll and keep their rules. */
@media (max-width: 700px) {
  .smm-wrap .smm-camptable.smm-table--ruled thead th,
  .smm-wrap .smm-camptable.smm-table--ruled tbody td {
    border-left: 0;
  }
}