/* AdvisorPPC connector runtime — the advisorppc.com design system, ported.
 *
 * This is the ONE stylesheet the app shell loads. It is a port, not a
 * restyle: the tokens are the site's `@theme` block (frontend/src/app/
 * globals.css) with the dark values from advisor-theme.css, the type pairing
 * is the site's (Geist for UI, Fraunces for display), and the shell is the
 * site's AppShell: a 17rem glass sidebar, a 3.5rem workspace header, a
 * scrolling main column, and a mobile drawer. Server-rendered Jinja, no
 * framework, no build step.
 *
 * Theme states, exactly as the site's AdvisorThemeProvider resolves them:
 *   :root                                    -> light
 *   @media (prefers-color-scheme: dark)
 *     :root:not([data-theme="light"])        -> follow the OS when unset
 *   :root[data-theme="dark"]                 -> explicit choice always wins
 * base.html stamps data-theme from localStorage before first paint.
 */

/* =======================================================================
   TOKENS — light (site globals.css @theme)
   ======================================================================= */
:root {
  color-scheme: light;

  --paper: #ffffff;
  --ink: #000000;
  --muted: #706f68;
  --line: #e8e8e1;
  --line-strong: #8d8b83;
  --card: #fbfaf7;
  --elevated: #f4f2ec;
  --pos: #1dbf73;
  --neg: #d1483a;
  --accent: #111111;
  --accent-deep: #000000;
  --accent-wash: #f1f3ef;
  --on-accent: #ffffff;
  --focus-ring: #111111;
  --brand: #111111;

  /* Glass surfaces (site advisor-theme.css). */
  --glass-panel: rgb(255 255 255 / 90%);
  --glass-sidebar: rgb(250 249 245 / 96%);
  --glass-header: rgb(250 249 245 / 92%);
  --glass-control: rgb(244 242 236 / 90%);
  --glass-sheen: rgb(255 255 255 / 35%);

  /* Status washes (site gate-state tokens). Foregrounds are measured against
     their own wash at 4.5:1 or better. */
  --ok: #0f5c3a;
  --ok-soft: #e7f1ec;
  --ok-line: #b9dccb;
  --warn: #7a4e00;
  --warn-soft: #f7efdf;
  --warn-line: #e6d4ad;
  --danger: #9b2c2c;
  --danger-soft: #f8e9e9;
  --danger-line: #e9c5c5;
  --info: #5d5c56;
  --info-soft: #f0efe9;

  /* Legacy aliases: templates and page-scoped <style> blocks still reach for
     these names, so they resolve to the new tokens instead of nothing. */
  --bg: var(--paper);
  --surface: var(--card);
  --sidebar-bg: var(--glass-sidebar);
  --sidebar-active: var(--paper);
  --soft: var(--muted);
  --accent-hover: var(--accent-deep);
  --accent-ink: var(--on-accent);
  --accent-soft: var(--accent-wash);
  --hover-bg: var(--elevated);
  --border: var(--line);
  --text-muted: var(--muted);
  --brand-muted: var(--muted);
  --brand-line: var(--line);

  /* Type. Geist + Fraunces are loaded from Google Fonts in base.html. */
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Fraunces", ui-serif, Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Spacing (4px base). */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;

  /* Radii, from the site's rounded-lg / -xl / -2xl / -[1.125rem]. */
  --radius-sm: 0.5rem;
  --radius: 0.75rem;
  --radius-lg: 1rem;
  --radius-card: 1.125rem;
  --radius-xl: 1.5rem;

  --sidebar-width: 17rem;
  --header-h: 3.5rem;
  --tap: 44px;

  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);

  --shadow-card: 0 1px 2px rgb(0 0 0 / 5%);
  --shadow-pop: 0 12px 32px -16px rgb(0 0 0 / 45%), 0 32px 80px -32px rgb(0 0 0 / 55%);
  --shadow-panel: inset 0 1px 0 rgb(255 255 255 / 8%), 0 24px 80px -48px rgb(0 0 0 / 90%);
}

/* =======================================================================
   TOKENS — dark (site advisor-theme.css .advisor-theme-dark, aluminum accent)
   ======================================================================= */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #090909;
    --ink: #f5f4ef;
    --muted: #a6a6a0;
    --line: #30302c;
    --line-strong: #6a6a64;
    --card: #1b1b19;
    --elevated: #262624;
    --pos: #68bd89;
    --neg: #f2908f;
    --accent: #f7f7f2;
    --accent-deep: #ffffff;
    --accent-wash: rgb(255 255 255 / 8%);
    --on-accent: #171411;
    --focus-ring: #f7f7f2;
    --brand: #f7f7f2;
    --glass-panel: rgb(27 27 25 / 78%);
    --glass-sidebar: rgb(12 12 11 / 88%);
    --glass-header: rgb(9 9 9 / 80%);
    --glass-control: rgb(255 255 255 / 7%);
    --glass-sheen: rgb(255 255 255 / 9%);
    --ok: #6bd99d;
    --ok-soft: #182320;
    --ok-line: #24453a;
    --warn: #e5b567;
    --warn-soft: #241f16;
    --warn-line: #4a3d1c;
    --danger: #f2908f;
    --danger-soft: #261a1a;
    --danger-line: #4d2626;
    --info: #a6a6a0;
    --info-soft: #232321;
    --sidebar-active: var(--paper);
    --shadow-card: 0 1px 2px rgb(0 0 0 / 40%);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #090909;
  --ink: #f5f4ef;
  --muted: #a6a6a0;
  --line: #30302c;
  --line-strong: #6a6a64;
  --card: #1b1b19;
  --elevated: #262624;
  --pos: #68bd89;
  --neg: #f2908f;
  --accent: #f7f7f2;
  --accent-deep: #ffffff;
  --accent-wash: rgb(255 255 255 / 8%);
  --on-accent: #171411;
  --focus-ring: #f7f7f2;
  --brand: #f7f7f2;
  --glass-panel: rgb(27 27 25 / 78%);
  --glass-sidebar: rgb(12 12 11 / 88%);
  --glass-header: rgb(9 9 9 / 80%);
  --glass-control: rgb(255 255 255 / 7%);
  --glass-sheen: rgb(255 255 255 / 9%);
  --ok: #6bd99d;
  --ok-soft: #182320;
  --ok-line: #24453a;
  --warn: #e5b567;
  --warn-soft: #241f16;
  --warn-line: #4a3d1c;
  --danger: #f2908f;
  --danger-soft: #261a1a;
  --danger-line: #4d2626;
  --info: #a6a6a0;
  --info-soft: #232321;
  --sidebar-active: var(--paper);
  --shadow-card: 0 1px 2px rgb(0 0 0 / 40%);
}

/* =======================================================================
   BASE
   ======================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html {
  -webkit-text-size-adjust: 100%;
  /* min-height, not height: the document itself is the scroller, so the
     root box has to be free to grow past one viewport. */
  min-height: 100%;
  /* The workspace headers are sticky, so an in-page anchor would land
     underneath one without this. */
  scroll-padding-top: calc(var(--header-h) + var(--safe-t) + 1rem);
}
body {
  font-family: var(--font-sans);
  background: var(--paper);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100%;
  overflow-x: hidden;
}
img, svg, video, canvas { max-width: 100%; height: auto; }
/* Component display rules below must never out-rank the hidden attribute. */
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* =======================================================================
   SHELL — DesktopSidebar + WorkspaceHeader + MobileNavigation, in CSS
   ======================================================================= */
/* The PAGE scrolls, not a box inside it.

   This shell used to be `height: 100dvh; overflow: hidden` with the scroll
   living on `.app-main`. That reads fine in a desktop screenshot and is wrong
   in the hand in four ways, all of them measured in a real browser:

     - Page Down, the space bar, Home and End did nothing on load, because the
       document had nothing to scroll and the inner box was never focused.
     - Back from a sub-page always landed at the top: a browser restores the
       document's scroll position, and it has no way to restore a div's.
     - Mobile browser chrome only retracts for a document scroll, so a phone
       lost the address-bar strip of screen on every workspace page, forever.
     - `overscroll-behavior: contain` on that box killed pull-to-refresh.

   So: the shell is a `min-height` grid, the sidebar and the headers are
   sticky, and the document is the one scroller. Nothing about the layout
   moves: the sidebar and header sit exactly where they did. */
.app-shell {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 100dvh;
  background: var(--paper);
  color: var(--ink);
}
.app-column {
  display: flex;
  min-width: 0;
  flex-direction: column;
}
.app-main {
  flex: 1;
}
.app-main .inner {
  max-width: 72rem;
  margin: 0 auto;
  padding: var(--sp-6) max(var(--sp-4), var(--safe-r)) calc(var(--sp-7) + var(--safe-b)) max(var(--sp-4), var(--safe-l));
}

/* Glass surfaces, as the site's .advisor-glass-* utilities. */
.glass-sidebar,
.glass-header {
  border: 0;
  background: linear-gradient(180deg, var(--glass-sheen), transparent), var(--glass-sidebar);
  -webkit-backdrop-filter: blur(28px) saturate(145%);
  backdrop-filter: blur(28px) saturate(145%);
  box-shadow: var(--shadow-panel);
}
.glass-header { background: linear-gradient(180deg, var(--glass-sheen), transparent), var(--glass-header); }
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .glass-sidebar, .glass-header { background: var(--card); }
}

/* Brand tile: a black square in both themes (site: bg-[#1f1e1d] text-[#f5f4ef]). */
.brand-tile {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-sm);
  background: #1f1e1d;
  color: #f5f4ef;
  flex: 0 0 auto;
}
.brand-tile svg { width: 18px; height: 18px; display: block; }
.brand-tile.lg { width: 2.25rem; height: 2.25rem; border-radius: var(--radius); }
.brand-tile.lg svg { width: 19px; height: 19px; }
.brand-tile.sm { width: 1.5rem; height: 1.5rem; border-radius: 0.375rem; background: var(--card); color: var(--brand); }
.brand-tile.sm svg { width: 14px; height: 14px; }
.brand-name {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.brand-link { display: inline-flex; align-items: center; gap: 0.5rem; min-width: 0; }
.brand-link:hover { text-decoration: none; }

/* Round icon button (site .advisor-icon-button). */
.icon-btn {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--glass-control);
  color: var(--ink);
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 7%);
  transition: background 0.15s;
}
.icon-btn:hover { background: var(--elevated); }
.icon-btn svg { width: 1.125rem; height: 1.125rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn.sm { width: 2rem; height: 2rem; }
.icon-btn.sm svg { width: 1rem; height: 1rem; }

/* ---- Sidebar (desktop column + mobile drawer panel share this) ---------- */
.sidebar {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}
.sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 4rem;
  padding: 0 1rem;
  flex: 0 0 auto;
}
.sidebar-primary { padding: 0 0.75rem; flex: 0 0 auto; }
.sidebar-primary .primary-action {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--glass-control);
  color: var(--ink);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: background 0.15s;
}
.sidebar-primary .primary-action:hover { background: var(--elevated); text-decoration: none; }
.sidebar-primary .primary-action .orb {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 999px;
  background: var(--card);
  flex: 0 0 auto;
}
.sidebar-primary .primary-action .orb svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }

.sidebar-nav { margin-top: 1.25rem; padding: 0 0.75rem; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.sidebar-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.sidebar-nav a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 500;
  transition: background 0.15s, color 0.15s;
}
.sidebar-nav a:hover { background: color-mix(in srgb, var(--paper) 70%, transparent); color: var(--ink); text-decoration: none; }
.sidebar-nav a.active, .sidebar-nav a[aria-current="page"] { background: var(--sidebar-active); color: var(--ink); }
.sidebar-nav a svg { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sidebar-nav .badge {
  margin-left: auto;
  padding: 0 0.5rem;
  border-radius: 999px;
  background: var(--accent-wash);
  color: var(--accent-deep);
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.25rem;
}
.sidebar-section {
  margin: 1.25rem 0 0.5rem;
  padding: 0 0.75rem;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.sidebar-foot { border-top: 1px solid var(--line); padding: 0.75rem; flex: 0 0 auto; }

/* Jump back to advisorppc.com. The two hosts keep separate cookies, so this is a
   plain link rather than a handoff: a live site session lands the user straight in
   the app, and a lapsed one meets the site's own login exactly as a bookmark would.
   (The signed handoff in app/advisor_handoff.py only runs site -> here.) */
.advisor-jump {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.625rem;
  margin-bottom: 0.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--glass-sheen), transparent), var(--glass-control);
  color: var(--ink);
  transition: background 0.15s, border-color 0.15s;
}
.advisor-jump:hover {
  background: linear-gradient(180deg, var(--glass-sheen), transparent),
              color-mix(in srgb, var(--ink) 8%, var(--glass-control));
  border-color: color-mix(in srgb, var(--ink) 18%, var(--line));
  text-decoration: none;
}
.advisor-jump .mark {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  flex: 0 0 auto;
  border-radius: var(--radius-sm);
  background: var(--brand);
  color: var(--on-accent);
  font-size: 0.8125rem;
  font-weight: 600;
}
.advisor-jump .mark svg { width: 15px; height: 15px; display: block; }
.advisor-jump .text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.advisor-jump .title { font-size: 0.8125rem; font-weight: 500; line-height: 1.25; }
.advisor-jump .sub {
  font-size: 0.6875rem;
  color: var(--muted);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.advisor-jump .go {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.advisor-jump:hover .go { stroke: var(--ink); }
.account-chip { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem; border-radius: var(--radius); }
.account-avatar {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: var(--brand);
  color: var(--on-accent);
  font-size: 0.875rem;
  font-weight: 600;
  flex: 0 0 auto;
}
.account-chip .who { min-width: 0; flex: 1; }
.account-chip .who .name { margin: 0; font-size: 0.875rem; font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.account-chip .who .plan { margin: 0; font-size: 0.75rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.account-chip form { margin: 0; }
.account-chip .exit {
  min-height: var(--tap);
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  font-size: 0.75rem;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.account-chip .exit:hover { color: var(--ink); background: transparent; border-color: var(--line); }

/* ---- Workspace header (desktop) ---------------------------------------- */
.workspace-header {
  display: none;
  position: sticky;
  top: 0;
  z-index: 30;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
  padding: 0 1.5rem;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  flex: 0 0 auto;
}
.workspace-header .ws-id { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--muted); min-width: 0; }
.workspace-header .ws-id .ws-name { color: var(--ink); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.workspace-header .ws-tools { display: flex; align-items: center; gap: 0.75rem; }

/* ---- Mobile header ------------------------------------------------------ */
.mobile-header {
  display: flex;
  position: sticky;
  top: 0;
  z-index: 30;
  align-items: center;
  gap: 0.75rem;
  height: calc(var(--header-h) + var(--safe-t));
  padding: var(--safe-t) 0.75rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  flex: 0 0 auto;
}
.mobile-header .brand-link { flex: 1; }
.mobile-header .brand-text { min-width: 0; display: block; }
.mobile-header .brand-text .brand-name { display: block; font-size: 1rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mobile-header .brand-text .brand-page { display: block; font-size: 0.6875rem; line-height: 1.2; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mobile-header .online { display: inline-flex; align-items: center; gap: 0.375rem; padding-right: 0.25rem; font-size: 0.6875rem; color: var(--muted); flex: 0 0 auto; }
.mobile-header .online::before { content: ""; width: 0.375rem; height: 0.375rem; border-radius: 999px; background: var(--pos); }

/* ---- Mobile drawer (site MobileDrawer) ---------------------------------- */
.nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgb(0 0 0 / 55%);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  animation: backdrop-in 160ms ease-out both;
}
.nav-backdrop[hidden] { display: none; }
.nav-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 51;
  width: min(21rem, calc(100vw - 2.5rem));
  height: 100dvh;
  min-height: 0;
  transform: translateX(-100%);
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: 24px 0 80px -24px rgb(0 0 0 / 75%);
  visibility: hidden;
}
body.drawer-open .nav-drawer { transform: translateX(0); visibility: visible; }
/* With the document scrolling, a wheel or a drag over the drawer backdrop
   would run the page underneath. Lock it while the drawer is open. */
body.drawer-open { overflow: hidden; }
.nav-drawer .sidebar-head { height: 4rem; gap: 0.75rem; border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
.nav-drawer .drawer-title { min-width: 0; flex: 1; }
.nav-drawer .drawer-title .brand-name { font-size: 1.125rem; display: block; }
.nav-drawer .drawer-title .sub { display: block; margin-top: 0.25rem; font-size: 0.75rem; color: var(--muted); }
.nav-drawer .sidebar-nav a { min-height: 2.75rem; border-radius: var(--radius); }
.nav-drawer .sidebar-nav a.active { background: var(--elevated); }
.nav-drawer .sidebar-nav a.active svg { color: var(--brand); }
.nav-drawer .sidebar-foot { padding: 1rem 1rem max(1rem, var(--safe-b)); }
.nav-drawer .drawer-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-top: 0.75rem; }
/* Sign out is the only action now (Account is a nav item). */
.nav-drawer .drawer-actions { grid-template-columns: 1fr; }
.nav-drawer .drawer-actions a,
.nav-drawer .drawer-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: var(--tap);
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
}
.nav-drawer .drawer-actions a { border: 1px solid var(--line); background: var(--glass-control); color: var(--ink); }
.nav-drawer .drawer-actions a svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.7; }
.nav-drawer .drawer-actions button { border: 1px solid var(--line); background: transparent; color: var(--muted); padding: 0; }
.nav-drawer .drawer-actions button:hover { background: var(--elevated); color: var(--ink); }
.nav-drawer .drawer-actions form { margin: 0; display: contents; }
.desktop-only { display: none !important; }
@keyframes backdrop-in { from { opacity: 0; } to { opacity: 1; } }

/* =======================================================================
   PAGE HEADER + TYPOGRAPHY (site workspace pages)
   ======================================================================= */
h1, h2, h3, h4 { margin: 0 0 var(--sp-2); color: var(--ink); }
h1 {
  font-family: var(--font-serif);
  font-size: 1.875rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  font-variation-settings: "opsz" 72;
}
h2 { font-size: 1rem; font-weight: 600; letter-spacing: -0.005em; line-height: 1.3; }
h3 { font-size: 0.9375rem; font-weight: 600; }
p { margin: 0 0 var(--sp-3); }
.page-head { margin-bottom: var(--sp-6); }
.page-head h1 { margin: 0.5rem 0 0; }
.page-head .lede, .lede { margin: 0.5rem 0 0; color: var(--muted); max-width: 42rem; line-height: 1.6; }
.lede + * { margin-top: var(--sp-5); }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  color: var(--brand);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
}
.eyebrow svg { width: 1rem; height: 1rem; }
h1 + .lede { margin-top: 0.5rem; margin-bottom: var(--sp-5); }

/* =======================================================================
   CARDS — rounded-[1.125rem] border-line bg-card p-5 shadow-sm
   ======================================================================= */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 1.25rem;
  margin: 0 0 var(--sp-4);
  box-shadow: var(--shadow-card);
}
.card > h2:first-child, .card > .card-title:first-child { margin-top: 0; }
.card.flush { padding: 0; overflow: hidden; }
.card-head {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.card-body { padding: 1rem 1.25rem; }
.card-head h2 { margin: 0; }
.card-head .muted { font-size: 0.875rem; }
.card .muted.small, .card p.muted { color: var(--muted); }

/* Inner row inside a card (site: rounded-xl border-line bg-paper/60 px-4 py-3). */
.box {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  background: color-mix(in srgb, var(--paper) 60%, transparent);
}
.box h3 { margin: 0 0 var(--sp-2); }

/* =======================================================================
   GRID + KPI strip
   ======================================================================= */
.grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); margin: 0 0 var(--sp-5); }
.kpi-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin: 0 0 var(--sp-5); }
.kpi {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 1rem 1.25rem;
  box-shadow: var(--shadow-card);
}
.kpi .label { font-size: 0.6875rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; margin-bottom: var(--sp-2); }
.kpi .value { font-family: var(--font-serif); font-size: 1.75rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; font-variation-settings: "opsz" 48; }
.kpi .delta { font-size: 0.8125rem; color: var(--muted); margin-top: 0.375rem; }
.kpi .delta.up { color: var(--pos); }
.kpi .delta.down { color: var(--neg); }

/* =======================================================================
   TABLES
   ======================================================================= */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: inherit; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.table-wrap table.tbl { min-width: 560px; }
table.tbl th, table.tbl td { padding: 0.75rem 0.875rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
table.tbl th {
  font-size: 0.6875rem;
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  background: transparent;
  white-space: nowrap;
}
table.tbl tr:last-child td { border-bottom: none; }
table.tbl tbody tr:hover td { background: color-mix(in srgb, var(--paper) 60%, transparent); }
table.tbl td.right, table.tbl th.right { text-align: right; }
table.tbl td.tight { white-space: nowrap; }

table.tbl-tree tr.row-manager td:first-child { font-weight: 600; }
table.tbl-tree tr.row-child td:first-child { padding-left: 34px; position: relative; }
table.tbl-tree tr.row-child td:first-child::before { content: ""; position: absolute; left: 14px; top: 0; bottom: 0; border-left: 1px solid var(--line); }
table.tbl-tree tr.row-child + tr.row-direct td:first-child::before { display: none; }
table.tbl-tree .tree-branch { color: var(--muted); font-family: var(--font-mono); font-size: 0.8125rem; margin-right: 4px; }
table.tbl-tree tr.row-direct td:first-child { padding-left: 12px; }

/* =======================================================================
   FORMS
   ======================================================================= */
form label { display: block; margin: var(--sp-3) 0 var(--sp-1); font-size: 0.875rem; font-weight: 500; color: var(--ink); }
input[type=email], input[type=password], input[type=text], input[type=number],
input[type=url], input[type=search], input[type=tel], input[type=date], input[type=time],
textarea, select, .input {
  width: 100%;
  min-height: var(--tap);
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 16px;
  background: var(--paper);
  color: var(--ink);
  font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
  -webkit-appearance: none;
  appearance: none;
}
textarea { min-height: 96px; resize: vertical; }
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23706f68' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 34px;
}
input:focus, textarea:focus, select:focus, .input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-wash);
}
input::placeholder, textarea::placeholder { color: var(--muted); }
input[type=checkbox], input[type=radio] { width: 18px; height: 18px; min-height: 0; accent-color: var(--accent); vertical-align: middle; }
.form-field { margin-bottom: var(--sp-4); }

/* Buttons. Primary = bg-ink text-paper; default = border-line text-muted
   hover:border-accent hover:text-accent; accent = border-accent/40
   bg-accent-wash text-accent-deep. */
button, .btn {
  min-height: 2.5rem;
  padding: 0.5rem 0.875rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  font-size: 0.875rem;
  font-weight: 500;
  font-family: inherit;
  line-height: 1.25;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  transition: background 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s;
}
button:hover, .btn:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; background: var(--card); }
button.primary, .btn.primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
button.primary:hover, .btn.primary:hover { opacity: 0.9; background: var(--ink); color: var(--paper); border-color: var(--ink); }
button.accent, .btn.accent { background: var(--accent-wash); color: var(--accent-deep); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
button.accent:hover, .btn.accent:hover { border-color: var(--accent); background: var(--accent-wash); }
button.ghost, .btn.ghost { background: transparent; border-color: transparent; color: var(--muted); }
button.ghost:hover, .btn.ghost:hover { color: var(--ink); background: var(--elevated); border-color: transparent; }
button.link { min-height: 0; background: none; border: none; color: var(--accent-deep); padding: 0.25rem 0.125rem; cursor: pointer; font-size: inherit; display: inline; font-weight: 500; }
button.link:hover { text-decoration: underline; background: none; border: none; }
button.link.danger { color: var(--neg); }
button:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.btn-block { display: flex; width: 100%; }
.inline { display: inline; }
.btn-large { padding: 0.625rem 1.25rem; min-height: 2.75rem; font-size: 0.9375rem; }
.btn.paid-required { background: var(--accent-wash); color: var(--accent-deep); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }

/* =======================================================================
   PILLS + STATUS CHIPS (site StatusBadge: rounded-full px-2.5 py-0.5 text-[11px] font-semibold)
   ======================================================================= */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.125rem 0.625rem;
  border-radius: 999px;
  background: var(--paper);
  color: var(--muted);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.25rem;
  vertical-align: middle;
}
.pill::before { content: ""; width: 0.375rem; height: 0.375rem; border-radius: 999px; background: var(--line); flex: 0 0 auto; }
.pill-active { background: color-mix(in srgb, var(--pos) 10%, transparent); color: var(--pos); }
.pill-active::before { background: var(--pos); }
.pill-paused { background: var(--warn-soft); color: var(--warn); }
.pill-paused::before { background: var(--warn); }
.pill-archived { background: var(--danger-soft); color: var(--danger); }
.pill-archived::before { background: var(--danger); }
.pill-mcc { background: var(--accent-wash); color: var(--accent-deep); margin-right: 6px; }
.pill-mcc::before { background: var(--accent); }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; vertical-align: middle; margin-right: 6px; }
.dot.high { background: var(--neg); }
.dot.medium { background: var(--warn); }
.dot.low { background: var(--pos); }
.dot.info { background: var(--muted); }

/* =======================================================================
   HELPERS
   ======================================================================= */
.muted { color: var(--muted); }
.soft { color: var(--muted); }
.ok { color: var(--pos); }
.pos { color: var(--pos); }
.neg { color: var(--neg); }
.small { font-size: 0.875rem; }
.tiny { font-size: 0.75rem; }
.right { text-align: right; }
.center { text-align: center; }
.row { display: flex; gap: var(--sp-4); flex-wrap: wrap; }
.row > * { flex: 1 1 100%; }
.stack-sm > * + * { margin-top: var(--sp-3); }
.stack-md > * + * { margin-top: var(--sp-4); }
.actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }

code, .mono {
  background: var(--elevated);
  padding: 0.125rem 0.375rem;
  border-radius: 0.375rem;
  font-family: var(--font-mono);
  font-size: 0.85em;
  word-break: break-word;
}
a.link, .link { color: var(--accent-deep); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--ink) 30%, transparent); text-underline-offset: 3px; }
.card a:not(.btn):not(.pill), .flash a:not(.btn), p a:not(.btn), td a:not(.btn) { color: var(--ink); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--ink) 30%, transparent); text-underline-offset: 3px; }
.card a:not(.btn):hover, p a:not(.btn):hover, td a:not(.btn):hover { text-decoration-color: currentColor; }
hr.sep { border: none; border-top: 1px solid var(--line); margin: var(--sp-5) 0 var(--sp-4); }

/* =======================================================================
   NOTICES / FLASH (site: rounded-xl border px-4 py-3 text-sm)
   ======================================================================= */
.flash {
  padding: 0.75rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--muted);
  margin: 0 0 var(--sp-4);
  font-size: 0.875rem;
}
.flash strong { color: var(--ink); }
.flash.ok-flash { background: color-mix(in srgb, var(--pos) 10%, transparent); border-color: color-mix(in srgb, var(--pos) 30%, transparent); color: var(--ok); }
.flash.ok-flash strong { color: var(--ok); }
.flash.warn-flash { background: var(--warn-soft); border-color: var(--warn-line); color: var(--warn); }
.flash.warn-flash strong { color: var(--warn); }
.flash.error, .error { background: var(--danger-soft); color: var(--danger); border: 1px solid var(--danger-line); padding: 0.75rem 1rem; border-radius: var(--radius); margin: 0 0 var(--sp-4); font-size: 0.875rem; }
.flash.error strong, .error strong { color: var(--danger); }
.flash p:last-child { margin-bottom: 0; }
.upgrade-banner { background: var(--accent-wash); border-color: color-mix(in srgb, var(--accent) 30%, transparent); color: var(--accent-deep); }
.upgrade-banner strong { color: var(--accent-deep); }

/* =======================================================================
   CONNECT BUNDLES (connector cards: rounded-2xl border-line bg-card p-5)
   ======================================================================= */
.bundle-row { display: flex; flex-direction: column; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.bundle {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--sp-3);
  padding: 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper);
}
.bundle-complete { border-color: color-mix(in srgb, var(--pos) 35%, transparent); }
.bundle-main { flex: 1; }
.bundle-main h3 { margin: 0 0 2px; }
.bundle-main p { margin: 2px 0; }
.bundle .btn-large { white-space: nowrap; text-align: center; }

h3.sub { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); font-weight: 600; margin: 0 0 var(--sp-2); }
dl.kv { display: grid; grid-template-columns: 1fr; gap: 2px var(--sp-4); margin: var(--sp-3) 0; font-size: 0.875rem; }
dl.kv dt { color: var(--muted); }
dl.kv dd { margin: 0 0 var(--sp-2); }

/* =======================================================================
   EMPTY STATE + SUGGESTIONS
   ======================================================================= */
.empty { text-align: center; padding: var(--sp-7) var(--sp-5); color: var(--muted); }
.empty h3 { color: var(--ink); margin: 0 0 var(--sp-2); font-size: 1.0625rem; }
.empty p { margin: 0 0 var(--sp-3); }
.suggestions { display: grid; grid-template-columns: 1fr; gap: var(--sp-2); }
.suggestion {
  padding: 0.75rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  font-size: 0.875rem;
  color: var(--ink);
  transition: border-color 0.15s;
}
.suggestion:hover { border-color: var(--accent); }
.suggestion .ic { color: var(--muted); font-weight: 600; margin-right: 4px; }

/* =======================================================================
   TOP NAV partial (_topnav.html) — pages that opt into a tab strip
   ======================================================================= */
.topbar { background: var(--card); border-bottom: 1px solid var(--line); }
.topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) max(var(--sp-4), var(--safe-l)); }
.topbar-user { display: flex; align-items: center; gap: var(--sp-3); font-size: 0.875rem; color: var(--muted); }
.topbar-email { display: none; }
.topbar .signout { min-height: 0; background: none; border: none; color: var(--muted); cursor: pointer; font-size: 0.875rem; font-family: inherit; padding: 6px 2px; }
.topbar .signout:hover { color: var(--ink); text-decoration: underline; background: none; }
.tabs { display: flex; align-items: center; gap: var(--sp-1); padding: 0 max(var(--sp-3), var(--safe-l)) 0 max(var(--sp-3), var(--safe-r)); overflow-x: auto; -webkit-overflow-scrolling: touch; border-top: 1px solid var(--line); }
.tabs a { flex: 0 0 auto; min-height: var(--tap); display: inline-flex; align-items: center; padding: 0 var(--sp-3); color: var(--muted); text-decoration: none; font-size: 0.875rem; border-bottom: 2px solid transparent; white-space: nowrap; }
.tabs a:hover { color: var(--ink); text-decoration: none; }
.tabs a.active { color: var(--ink); border-bottom-color: var(--accent); font-weight: 500; }
.tabs .spacer { display: none; }

/* =======================================================================
   AUTH PAGES (login / signup): centred card, no shell
   ======================================================================= */
.auth-shell {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-6) max(var(--sp-4), var(--safe-l)) calc(var(--sp-6) + var(--safe-b)) max(var(--sp-4), var(--safe-r));
  background: var(--paper);
}
.auth-card {
  width: 100%;
  max-width: 26rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: var(--sp-6) var(--sp-5);
  box-shadow: var(--shadow-card);
}
.auth-card h1 { font-size: 1.625rem; }
.auth-theme-toggle { display: flex; justify-content: flex-end; margin: calc(var(--sp-3) * -1) calc(var(--sp-2) * -1) calc(var(--sp-3) * -1) 0; }
.auth-brand { display: flex; justify-content: center; margin-bottom: var(--sp-5); }
.auth-brand .brand-link { gap: 0.625rem; }
.auth-brand .brand-name { font-size: 1.5rem; }
/* Google's sign-in button keeps Google's own light styling in every theme
   (brand requirement), so pin it rather than let the tokens repaint it. */
:root[data-theme="dark"] .google-login-btn,
:root:not([data-theme="light"]) .google-login-btn { background: #ffffff; color: #1f1f1f; border-color: #dadce0; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .google-login-btn { background: #ffffff; color: #1f1f1f; border-color: var(--line-strong); }
}

/* =======================================================================
   THEME TOGGLE (_theme_toggle.html)
   ======================================================================= */
.theme-toggle { display: grid; place-items: center; }
.theme-toggle .icon-sun, .theme-toggle .icon-moon { grid-area: 1 / 1; width: 1.125rem; height: 1.125rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .icon-moon { visibility: hidden; }
:root[data-theme="dark"] .theme-toggle .icon-sun { visibility: hidden; }
:root[data-theme="dark"] .theme-toggle .icon-moon { visibility: visible; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { visibility: hidden; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { visibility: visible; }
}

/* =======================================================================
   SUPPORT — the site's SupportWidget + SupportPanel, and the call card
   ======================================================================= */
.support-launcher-wrap {
  position: fixed;
  right: 1rem;
  bottom: calc(1rem + var(--safe-b));
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.75rem;
}
/* The launcher: one round headset button, collapsed by default (owner P0,
   2026-09-24). The pill composer it replaced spanned the bottom of a phone
   screen and covered checkout CTAs; this is 3rem square, above the 44px tap
   minimum, and nothing else of the widget is on screen until it is tapped. */
.support-launcher {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 10%), 0 4px 6px -4px rgb(0 0 0 / 10%);
  transform: translateY(0.5rem);
  opacity: 0;
  transition: transform 300ms, opacity 300ms;
}
.support-launcher.shown { transform: translateY(0); opacity: 1; }
/* Set by the widget script while a collapsed launcher would sit on a CTA. */
.support-launcher.yield { opacity: 0; visibility: hidden; pointer-events: none; }
.support-launcher:hover { background: var(--elevated); }
/* Room at the end of every page the launcher floats over, so the last CTA
   can always be scrolled clear of it (3rem button + 1rem inset + air). The
   id in :has() out-ranks the desktop .app-main .inner padding. */
body:has(#support-widget) .app-main .inner,
body:has(#support-widget) .auth-shell { padding-bottom: calc(6rem + var(--safe-b)); }
body:has(#support-widget) .app-main { scroll-padding-bottom: 6rem; }
body:has(#support-widget) { scroll-padding-bottom: 6rem; }

.support-panel {
  position: fixed;
  inset: 0;
  z-index: 61;
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--paper);
  color: var(--ink);
}
.support-panel[hidden] { display: none; }
.support-panel header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--line);
  background: var(--card);
}
.support-panel header .who { display: flex; align-items: center; gap: 0.5rem; }
.support-panel header .who p { margin: 0; }
.support-panel header .who .t { font-size: 0.875rem; font-weight: 500; color: var(--ink); }
.support-panel header .who .s { font-size: 0.75rem; color: var(--muted); }
.support-panel header .close { min-height: 0; padding: 0.375rem; margin-right: -0.25rem; border: 0; border-radius: 0.375rem; background: transparent; color: var(--muted); }
.support-panel header .close:hover { background: var(--elevated); color: var(--ink); }
.support-panel header .close svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.support-thread { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: 0.75rem; }
.support-msg { display: flex; }
.support-msg.user { justify-content: flex-end; }
.support-msg.user .bubble { max-width: 85%; white-space: pre-wrap; border-radius: 1rem; background: var(--elevated); padding: 0.5rem 0.75rem; font-size: 0.875rem; line-height: 1.6; color: var(--ink); }
.support-msg.assistant .bubble { max-width: 92%; font-size: 0.875rem; line-height: 1.6; color: var(--ink); }
.support-msg.assistant .bubble p { margin: 0 0 0.5rem; }
.support-msg.assistant .bubble p:last-child { margin-bottom: 0; }
.support-msg.assistant .bubble ul, .support-msg.assistant .bubble ol { margin: 0.25rem 0 0.5rem; padding-left: 1.25rem; }
.support-msg.assistant .bubble a { text-decoration: underline; text-underline-offset: 2px; }
.support-msg.assistant .bubble code { font-size: 0.8em; }
.support-thinking { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.875rem; color: var(--muted); }
.support-thinking::before { content: ""; width: 0.375rem; height: 0.375rem; border-radius: 999px; background: var(--muted); animation: pulse 1.2s ease-in-out infinite; }
.support-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0.75rem 1rem 0; border-top: 1px solid var(--line); }
.support-chips:empty { display: none; }
.support-chips button { min-height: 0; padding: 0.375rem 0.75rem; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--muted); font-size: 0.75rem; }
.support-chips button:hover { border-color: var(--pos); color: var(--ink); }
.support-escalate { padding: 0.75rem 1rem 0; border-top: 1px solid var(--line); }
.support-escalate a { display: inline-flex; align-items: center; gap: 0.5rem; border-radius: var(--radius-sm); background: var(--pos); color: #fff; padding: 0.5rem 0.75rem; font-size: 0.75rem; font-weight: 500; text-decoration: none; }
.support-upgrade { padding: 1rem; border-top: 1px solid var(--line); }
.support-upgrade a { display: flex; justify-content: center; border-radius: var(--radius-sm); background: var(--pos); color: #fff; padding: 0.625rem 1rem; font-size: 0.875rem; font-weight: 500; text-decoration: none; }
/* The in-chat sign-in step. Two ways in and only two, matching login.html. */
.support-signin { display: grid; gap: 0.5rem; padding: 0.75rem 1rem; border-top: 1px solid var(--line); }
.support-signin[hidden] { display: none; }
.support-signin .t { margin: 0; font-size: 0.875rem; font-weight: 500; color: var(--ink); }
.support-signin .s { margin: 0 0 0.25rem; font-size: 0.75rem; color: var(--muted); }
.support-signin .support-google-btn,
.support-signin .support-email-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
}
.support-signin .support-google-btn:hover, .support-signin .support-email-btn:hover { background: var(--elevated); }
.support-signin .support-email-btn { color: var(--muted); font-weight: 400; }
.support-signin svg { width: 1rem; height: 1rem; flex-shrink: 0; }

/* Attachments: the rows waiting to be sent, the chips on a sent turn, and the
   download cards a reply can carry. */
.support-files { list-style: none; margin: 0; padding: 0.5rem 0.75rem 0; display: grid; gap: 0.25rem; }
.support-files:empty { display: none; }
.support-files li { display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.5rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); }
.support-files li > span { min-width: 0; flex: 1; display: grid; }
.support-files svg, .support-downloads svg, .support-file-chips svg { width: 0.875rem; height: 0.875rem; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; color: var(--muted); }
.support-files .n, .support-downloads .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.75rem; color: var(--ink); }
.support-files .s, .support-downloads .s { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.6875rem; color: var(--muted); }
.support-files .rm { min-height: 0; flex-shrink: 0; padding: 0.25rem; border: 0; border-radius: 999px; background: transparent; color: var(--muted); }
.support-files .rm:hover { background: var(--elevated); color: var(--ink); }

.support-msg .stack { display: grid; gap: 0.25rem; justify-items: end; }
.support-file-chips { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.25rem; }
.support-file-chips span { display: flex; align-items: center; gap: 0.375rem; max-width: 100%; padding: 0.25rem 0.5rem; border: 1px solid var(--line); border-radius: 0.75rem; background: var(--card); font-size: 0.6875rem; color: var(--muted); }
.support-file-chips .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }

.support-downloads { display: grid; gap: 0.375rem; margin-top: 0.5rem; }
.support-downloads:first-child { margin-top: 0; }
.support-downloads a { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--elevated); text-decoration: none; }
.support-downloads a:hover { border-color: var(--pos); }
.support-downloads a > span { min-width: 0; flex: 1; display: grid; }
.support-downloads .dl { color: var(--muted); }

.support-compose { display: flex; align-items: flex-end; gap: 0.5rem; padding: 0.75rem; margin: 0; }
.support-compose .attach { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; min-height: 0; flex-shrink: 0; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--muted); }
.support-compose .attach:hover { background: var(--elevated); color: var(--ink); }
.support-compose .attach svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.support-compose textarea { flex: 1; min-width: 0; min-height: 2.25rem; max-height: 7.5rem; resize: none; border: 0; border-radius: 0; background: transparent; padding: 0.375rem 0.25rem; font-size: 0.875rem; box-shadow: none; }
.support-compose textarea:focus { box-shadow: none; border: 0; }
.support-compose .send { min-height: 0; padding: 0.375rem 0.75rem; border: 0; border-radius: var(--radius-sm); background: var(--pos); color: #fff; font-size: 0.75rem; font-weight: 500; }
.support-compose .send:disabled { opacity: 0.4; }
.support-compose .stop { min-height: 0; padding: 0.375rem 0.75rem; border-radius: var(--radius-sm); font-size: 0.75rem; color: var(--muted); }
.support-foot { margin: 0; padding: 0.5rem 1rem; border-top: 1px solid var(--line); font-size: 0.6875rem; line-height: 1.4; color: var(--muted); }
.support-foot a { text-decoration: underline; text-underline-offset: 2px; }
/* Phone sheet: sized to the VISUAL viewport (owner report, 2026-09-26). iOS
   Safari keeps the layout viewport tall behind the keyboard, so `inset: 0`
   alone left the sheet 844px tall under it; Safari then panned the page to
   show the textarea, which pushed the header and greeting off the top and
   left the keyboard over the composer. The widget script writes --sheet-h /
   --sheet-top from window.visualViewport, the same way the site's
   SupportPanel does (.support-sheet in the site's globals.css). The textarea
   is 16px here because iOS zooms the whole page into any smaller field it
   focuses. */
/* Any touch screen, landscape phones included: 16px, or iOS zooms. */
@media (pointer: coarse) { .support-compose textarea { font-size: 1rem; } }
@media (max-width: 767.98px) {
  .support-panel {
    top: var(--sheet-top, 0px);
    bottom: auto;
    height: var(--sheet-h, 100dvh);
    overscroll-behavior: contain;
  }
  .support-panel header { padding-top: calc(0.75rem + env(safe-area-inset-top, 0px)); }
  .support-panel .support-foot { padding-bottom: calc(0.5rem + var(--safe-b)); }
  .support-thread { overscroll-behavior: contain; }
  body.support-open { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }
}
/* The panel is a full-screen sheet on a phone, so the launcher ducks under
   it; the panel's own close button is the way back. Desktop re-shows it. */
body.support-open .support-launcher { display: none; }
/* The plan gate is a modal with its own pinned full-width CTA at the bottom
   of a phone screen; a launcher over it covers that button. */
body.plan-gate-open .support-launcher-wrap { display: none; }
/* The open drawer owns the screen on a phone; the pill ducks under it. */
body.drawer-open .support-launcher-wrap { z-index: 40; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* Call-support card (paid plans). Hidden until the site reports the phone
   agent is live; the number is filled in from that same response. */
.call-card { display: grid; gap: 1rem; }
.call-card[hidden] { display: none; }
.call-card .call-number { font-family: var(--font-serif); font-size: 1.625rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.1; color: var(--ink); font-variation-settings: "opsz" 48; }
.card .call-card .call-number a { text-decoration: none; color: var(--ink); }
.call-card .call-grid { display: grid; gap: 1rem; }
.call-card form { display: grid; gap: 0.5rem; margin: 0; }
.call-card form label { margin: 0; }
.call-card form .two { display: grid; gap: 0.5rem; }
.support-note { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; }

/* =======================================================================
   NOTICES SLOT — owned by the runtime-parity notices agent; a stable hook
   for it to render into. Empty slot renders nothing.
   ======================================================================= */
.notices-slot:empty { display: none; }

/* =======================================================================
   Reduced motion
   ======================================================================= */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .support-launcher { transform: none; opacity: 1; }
}

/* =======================================================================
   LAYOUT UTILITIES — the classes templates use instead of inline
   `style="display:flex; flex-wrap:wrap"` rows and `display:inline` forms.
   Button rows share the line on a laptop and split into even halves (or a
   single column with .actions-stack) on a phone, so nothing wraps unevenly.
   ======================================================================= */
.inline-form { display: inline-flex; margin: 0; vertical-align: middle; max-width: 100%; }
.actions > form { display: contents; }
.actions > .btn, .actions > button, .actions > form > .btn, .actions > form > button { min-width: 0; }
.m-0 { margin: 0; }
.nowrap { white-space: nowrap; }
.strong { font-weight: 600; }
.list-tight { margin: 0 0 var(--sp-3) 1.125rem; padding: 0; }
.flash > p { margin: 0 0 var(--sp-2); }
.flash > p:last-child, .flash > .actions:last-child, .flash > form:last-child { margin-bottom: 0; }
.flash .actions { margin: 0; }
@media (max-width: 639px) {
  .actions > .btn, .actions > button,
  .actions > form > .btn, .actions > form > button { flex: 1 1 calc(50% - var(--sp-2)); text-align: center; }
  .actions.actions-stack > .btn, .actions.actions-stack > button,
  .actions.actions-stack > form > .btn, .actions.actions-stack > form > button { flex-basis: 100%; }
}

/* =======================================================================
   TRIAL HERO (templates/_trial_hero.html) — the first thing a free tenant
   sees on /dashboard. Same card grammar as the rest of the page; the wash
   and the serif headline mark it as the one place to act.
   ======================================================================= */
.trial-hero {
  display: grid;
  gap: var(--sp-4);
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
  background: linear-gradient(135deg, var(--accent-wash), var(--card) 65%);
}
.trial-hero .eyebrow { color: var(--accent-deep); }
.trial-hero h2 {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.125rem);
  letter-spacing: -0.02em;
  line-height: 1.15;
  text-wrap: balance;
  font-variation-settings: "opsz" 48;
}
.trial-hero .lede { margin: var(--sp-2) 0 0; max-width: 38rem; }
.trial-hero-features { margin: var(--sp-3) 0 0; padding: 0; list-style: none; display: grid; gap: var(--sp-2); }
.trial-hero-features li { display: flex; gap: var(--sp-2); align-items: flex-start; font-size: 0.9375rem; min-width: 0; }
.trial-hero-features li::before { content: "\2713"; color: var(--pos); font-weight: 700; flex: 0 0 auto; line-height: 1.5; }
.trial-hero .actions { margin-top: var(--sp-4); }
.trial-hero-note { margin: var(--sp-3) 0 0; max-width: 42rem; }
.trial-hero-side {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  padding: var(--sp-4);
  align-self: start;
  min-width: 0;
}
.trial-hero-price {
  margin: 0 0 var(--sp-3);
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variation-settings: "opsz" 48;
}
.trial-hero-price small { font-family: var(--font-sans); font-size: 0.8125rem; font-weight: 400; color: var(--muted); letter-spacing: 0; }
.trial-hero-side dl { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--sp-2) var(--sp-3); font-size: 0.875rem; }
.trial-hero-side dt { color: var(--muted); font-weight: 500; }
.trial-hero-side dd { margin: 0; overflow-wrap: anywhere; }
.trial-hero-active { background: linear-gradient(135deg, color-mix(in srgb, var(--pos) 10%, var(--card)), var(--card) 65%); border-color: color-mix(in srgb, var(--pos) 35%, transparent); }
.trial-hero-active .eyebrow { color: var(--ok); }
.trial-progress { height: 6px; border-radius: 999px; background: var(--elevated); overflow: hidden; margin-top: var(--sp-3); max-width: 28rem; }
.trial-progress > span { display: block; height: 100%; background: var(--pos); border-radius: inherit; }

/* =======================================================================
   UPGRADE PROMPTS (templates/_upgrade_prompt.html): banner, inline, pill.
   ======================================================================= */
.upgrade-banner .actions { margin-top: var(--sp-2); }
.upgrade-banner b { color: var(--accent-deep); }
.upgrade-inline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
  align-items: center;
  justify-content: space-between;
  margin: var(--sp-3) 0 0;
  padding: var(--sp-3);
  border: 1px dashed color-mix(in srgb, var(--accent) 35%, transparent);
  border-radius: var(--radius);
  background: var(--accent-wash);
  color: var(--accent-deep);
  font-size: 0.875rem;
}
.upgrade-inline p { margin: 0; flex: 1 1 14rem; min-width: 0; }
.upgrade-inline .btn { flex: 0 0 auto; }
.upgrade-pill {
  display: inline-flex;
  align-items: center;
  margin-left: var(--sp-1);
  padding: 0 0.5rem;
  min-height: 1.25rem;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  text-decoration: none;
  vertical-align: middle;
}
.upgrade-pill:hover { text-decoration: none; opacity: 0.85; }
/* Out-rank the generic `p a:not(.btn)` / `.card a:not(.btn)` link rules. */
p a.upgrade-pill:not(.btn), .card a.upgrade-pill:not(.btn):not(.pill), .flash a.upgrade-pill:not(.btn) { color: var(--paper); text-decoration: none; }

/* =======================================================================
   NEWS & UPDATES — header bell, top right (templates/_notices_bell.html).
   Never a panel on the Connectors main screen. Long titles and bodies wrap
   on a phone; a body clamps to six lines until "Show more".
   ======================================================================= */
.notif { position: relative; }
.notif > summary { list-style: none; position: relative; }
.notif > summary::-webkit-details-marker { display: none; }
.notif-count {
  position: absolute;
  top: -0.25rem;
  right: -0.25rem;
  min-width: 1.125rem;
  height: 1.125rem;
  padding: 0 0.25rem;
  border-radius: 999px;
  background: var(--danger);
  color: var(--paper);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.125rem;
  text-align: center;
}
.notif-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 0.5rem);
  z-index: 60;
  width: min(24rem, calc(100vw - 2rem));
  max-height: min(70vh, 32rem);
  overflow-y: auto;
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow-pop);
}
.notif-title { margin: 0; font-weight: 600; color: var(--ink); }
/* Phone: the bell is not the last header icon, so anchor the panel to the
   screen edges just under the header instead of to the bell. */
.mobile-header .notif-panel {
  position: fixed;
  left: max(var(--sp-4), var(--safe-l));
  right: max(var(--sp-4), var(--safe-r));
  top: calc(var(--header-h) + var(--safe-t) + 0.5rem);
  width: auto;
}
.notif-empty { margin: var(--sp-3) 0 0; }
.notif-panel .notice:first-of-type { border-top: 0; padding-top: 0; }

/* Header plan button: "Upgrade to <rung>" for free, "Update plan" for paid. */
.plan-btn {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding: 0 0.875rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--glass-control);
  color: var(--ink);
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
}
.plan-btn:hover { text-decoration: none; background: var(--elevated); }
.plan-btn.primary { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.plan-btn.primary:hover { background: var(--accent-deep); }
.mobile-header .plan-btn { min-height: 2rem; padding: 0 0.625rem; font-size: 0.75rem; }
.account-chip .who .name a { color: inherit; text-decoration: none; }
.sidebar-nav .ext { color: var(--muted); font-size: 0.75em; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.account-chip .who .name a:hover { text-decoration: underline; }
.notice { border-top: 1px solid var(--line); padding-top: var(--sp-3); margin-top: var(--sp-3); min-width: 0; }
.notice-head { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; margin: 0 0 var(--sp-1); }
.notice-head strong { overflow-wrap: anywhere; min-width: 0; }
.notice-body { overflow-wrap: anywhere; }
.notice-body p:first-child { margin-top: 0; }
.notice-body p:last-child { margin-bottom: 0; }
.notice-body img, .notice-body table { max-width: 100%; }
.notice-body pre { max-width: 100%; overflow-x: auto; }
.notice-body.is-clamped { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; overflow: hidden; }
.notice-more { margin-top: var(--sp-1); }
.notice-dismiss { margin: var(--sp-2) 0 0; }

/* =======================================================================
   DESKTOP (>= 768px, the site's md: breakpoint)
   ======================================================================= */
@media (min-width: 768px) {
  /* `minmax(0, 1fr)` rather than `1fr`: a grid track's implicit minimum is its
     content's min-content size, so one wide child (a long table, a code block,
     an unbroken URL) refuses to shrink and pushes the column past the viewport.
     The explicit zero floor lets it shrink and keeps the navigation list and the
     account footer reachable, including at increased browser zoom.

     The row is deliberately left to grow. The shell is a min-height grid now
     and the document is the page's scroller, so pinning the row to one viewport
     would put the page back inside a box. */
  .app-shell { grid-template-columns: var(--sidebar-width) minmax(0, 1fr); }
  .mobile-header, .nav-backdrop { display: none !important; }
  .desktop-only { display: flex !important; }
  .mobile-only { display: none !important; }
  .workspace-header { display: flex; }

  .nav-drawer {
    /* Sticky rather than static: the shell no longer clips to one viewport,
       so the sidebar keeps itself in view as the document scrolls. */
    position: sticky;
    top: 0;
    align-self: start;
    width: auto;
    height: 100dvh;
    transform: none !important;
    transition: none;
    box-shadow: none;
    visibility: visible;
    border-right: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  }
  .nav-drawer .sidebar-head { border-bottom: 0; }
  .nav-drawer .drawer-title .sub { display: none; }
  .nav-drawer .drawer-close { display: none !important; }
  .nav-drawer .sidebar-nav a { min-height: 0; border-radius: var(--radius-sm); }
  .nav-drawer .sidebar-nav a.active { background: var(--sidebar-active); }
  .nav-drawer .sidebar-nav a.active svg { color: inherit; }
  .nav-drawer .sidebar-foot { padding: 0.75rem; }
  .nav-drawer .drawer-actions { display: none; }

  .app-main .inner { padding: 2.5rem 2rem 4rem; }
  h1 { font-size: 2.25rem; }

  .grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  .kpi-row { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
  .suggestions { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  .row > * { flex: 1 1 280px; }
  .trial-hero { grid-template-columns: minmax(0, 1.5fr) minmax(15rem, 0.75fr); align-items: start; }
  dl.kv { grid-template-columns: auto 1fr; gap: 6px var(--sp-4); }
  dl.kv dd { margin: 0; }
  .bundle { flex-direction: row; align-items: center; justify-content: space-between; gap: 18px; }
  .bundle .btn-large { width: auto; }
  .table-wrap table.tbl { min-width: 0; }
  .topbar-email { display: inline; }
  .tabs .spacer { display: block; flex: 1 1 auto; }
  .call-card .call-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); align-items: start; }
  .call-card form .two { grid-template-columns: 1fr 1fr; }

  /* Desktop: the support panel is a card anchored above the launcher. */
  .support-launcher-wrap { right: 1.5rem; bottom: 1.5rem; }
  .support-panel {
    position: static;
    height: min(37.5rem, calc(100dvh - 7rem));
    width: 23.75rem;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-pop);
  }
  body.support-open .support-launcher { display: grid; }
}

/* ---------------------------------------------------------------------------
   Platform and app marks (templates/_platform_mark.html).

   One neutral tile, one monochrome mark, drawn in currentColor so the same
   markup reads in light and dark without a second set of files. The letter
   tile is the fallback for a live-discovered provider we have no mark for;
   tests/test_platform_marks.py fails for anything we ship a card for.
   --------------------------------------------------------------------------- */
.pmark {
  display: inline-grid;
  place-items: center;
  flex: none;
  border: 1px solid var(--line);
  border-radius: 0.7rem;
  background: var(--card, var(--paper, transparent));
  color: var(--ink);
}
.pmark svg { display: block; }
.pmark-lg { width: 3rem; height: 3rem; border-radius: 0.9rem; }
.pmark-lg svg { width: 1.5rem; height: 1.5rem; }
.pmark-md { width: 2.4rem; height: 2.4rem; }
.pmark-md svg { width: 1.2rem; height: 1.2rem; }
.pmark-sm { width: 1.9rem; height: 1.9rem; border-radius: 0.55rem; }
.pmark-sm svg { width: 1rem; height: 1rem; }
.pmark-letter {
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--muted);
}

/* The support manager's face, on the panel header and on the pill.
   The online dot rides the avatar, so the header says who is answering as
   well as that someone is. */
.support-panel header .who .who-face { position: relative; display: inline-flex; flex: none; }
.support-panel header .who .who-dot {
  position: absolute;
  right: -0.125rem;
  bottom: -0.125rem;
  width: 0.5rem;
  height: 0.5rem;
  border: 1px solid var(--card);
  border-radius: 999px;
  background: var(--pos);
}
/* The same headset on the launcher, as a glyph rather than a tile: the
   launcher is already a bordered surface and a second border inside it reads
   as a second button. */
.support-launcher .pmark { border: 0; background: transparent; }
.support-launcher .pmark svg { width: 1.25rem; height: 1.25rem; fill: currentColor; stroke: none; }

/* Sharing and points use the same dashboard cards and theme tokens. */
.share-card .eyebrow, .points-card .eyebrow {
  color: var(--muted);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.share-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: var(--sp-5) 0 0;
  padding: 0;
  list-style: none;
}
.share-buttons li { flex: 1 1 8rem; }
.share-buttons .btn { display: flex; justify-content: center; min-height: var(--tap); }
.share-details { margin-top: var(--sp-4); }
.points-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
  margin: var(--sp-5) 0;
}
.points-stats > div { min-width: 0; }
.points-stats .points-balance { grid-column: 1 / -1; }
.points-stats dt { color: var(--muted); font-size: .85rem; }
.points-stats dd { margin: var(--sp-1) 0 0; font-size: 1.5rem; font-weight: 650; overflow-wrap: anywhere; }
.points-balance dd { font-size: 2.5rem; }
.points-action button, .points-preference button { min-height: var(--tap); }
.points-action, .points-preference { padding-top: var(--sp-4); border-top: 1px solid var(--line); }
.points-choice { display: flex; align-items: center; gap: var(--sp-3); min-height: var(--tap); }
.top-sharers { margin: var(--sp-4) 0 var(--sp-5); padding-left: var(--sp-5); }
.top-sharers li { padding: var(--sp-2) 0; }
.top-sharers li > span:last-child { margin-inline-start: var(--sp-3); }
@media (min-width: 768px) {
  .points-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .points-action .btn-block, .points-preference .btn-block { width: auto; }
  .share-buttons li { flex: 0 1 auto; }
}