/* Balmve Partners creator app: the one design layer. Linked LAST in every /me page, after the page's own tokens,
 * so this file re-themes the whole app (tokens first, then shared components, then per-page structure).
 *
 * Direction: a calm workspace. Paper tinted toward the brand teal (not beige); cards are white on it with no outline, borders are kept for form fields and inner dividers, near-black teal ink, ONE brand color doing real work (deep teal
 * #0e4854: sidebar, primary buttons, links, progress) and ONE warm color with a job (clay #b4543a: "this needs you").
 * Bright teal #15b6a3 is a detail only (current step, active-nav icon); white text never sits on it (2.5:1).
 * Depth comes from surface contrast and hairlines, not shadows. Shadows exist only for things that float.
 * Radius steps by hierarchy: 8 controls, 10 cards, 12 panels. Labels are sentence case, never tracked caps.
 * Contrast checked: ink on paper 14:1, ink-2 8:1, ink-3 4.7:1 on paper, white on deep teal 10:1, clay on white 4.9:1. */
/* The hidden attribute always wins: shared button rules set display, which would otherwise show hidden buttons (Stay on Profile). */
[hidden] { display: none !important; }
:root {
  color-scheme: light;
  --surface: #ffffff;
  --surface-2: #f6f9f8;
  --surface-3: #e8eeee;
  --sidebar: #0e4854;
  --sidebar-2: #0b3c47;
  --sidebar-ink: #e3efef;
  --sidebar-ink-2: #a4c3c5;
  --ink: #12282b;
  --ink-2: #3d5255;
  --ink-3: #566b6d;
  --border: #dde5e4;
  --border-strong: #c7d3d2;
  --accent: #0e4854;
  --accent-hover: #0a3641;
  --accent-ink: #0e4854;
  --accent-weak: #e3efee;
  --accent-line: #bdd5d7;
  --accent-glow: rgba(14, 72, 84, 0.18);
  --attn: #b4543a;
  --attn-weak: #f8ece6;
  --good: #1d6b46;
  --good-weak: #e5f1ea;
  --warn: #94452a;
  --warn-weak: #f8ece6;
  --danger: #b03a2e;
  --danger-weak: #f9e8e4;
  --sh-sm: 0 0 0 0 rgba(0, 0, 0, 0);
  --sh-md: 0 1px 2px rgba(19, 41, 44, 0.06), 0 8px 20px -8px rgba(19, 41, 44, 0.12);
  --sh-lg: 0 2px 6px rgba(19, 41, 44, 0.08), 0 28px 56px -16px rgba(19, 41, 44, 0.26);
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 12px;
  --font: "Schibsted Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: var(--font);
}

body { background: var(--surface-3); color: var(--ink); }
/* Tabular figures only where numbers line up; on running text Schibsted Grotesk spaces tabular periods and commas wide. */
.stat .v, .payout-row .amt, .offer-commission .n, .offer-meta b, .nav-tag, .ch-badge { font-variant-numeric: tabular-nums; }
/* Dates, file meta and decimal money carry commas and periods; leave them proportional. */
.ptable .date-cell, .ptable .amount-cell, .payout-row .amt, .q-meta, .f-sub, .up-meta, .msg-file .sz { font-variant-numeric: normal; }
::selection { background: #c4e3df; color: var(--ink); }
input, textarea { caret-color: var(--accent); }
::placeholder { color: var(--ink-3); opacity: 1; }
:focus-visible { outline-color: #0e8f81; }
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }

/* ---------- Page title ---------- */
.topbar h1 { font-size: 26px; font-weight: 600; letter-spacing: -0.022em; line-height: 1.15; }
.topbar .sub { font-size: 14px; color: var(--ink-2); margin-top: 6px; max-width: 62ch; }
.topbar { margin-bottom: 22px; }
.status-badge { background: var(--surface); border: 0; color: var(--ink-2); font-size: 13px; font-weight: 500;
  letter-spacing: 0; text-transform: none; padding: 5px 11px; border-radius: var(--r-sm); }
.status-badge::before { display: none; }

/* ---------- Sidebar: solid deep teal, quiet states ---------- */
aside.side { border-right: 0; }
.side-brand { flex-direction: column; align-items: flex-start; gap: 3px; padding: 4px 10px 18px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.side-brand .wm { font-size: 16px; font-weight: 650; letter-spacing: -0.01em; text-transform: none; color: #ffffff; }
.side-brand .sub { font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--sidebar-ink-2); }
.side-brand .sub::before { display: none; }
.side-brand + .nav-label { display: none; }
.nav-label { font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--sidebar-ink-2); padding: 0 12px; margin: 22px 0 6px; }
nav.menu { gap: 1px; }
nav.menu a { font-size: 14px; font-weight: 500; color: var(--sidebar-ink); padding: 9px 12px; border-radius: var(--r-sm); }
nav.menu a svg { width: 17px; height: 17px; opacity: 0.8; stroke-width: 1.75; }
nav.menu a:hover { background: rgba(255, 255, 255, 0.07); color: #ffffff; }
nav.menu a.on { background: rgba(255, 255, 255, 0.13); color: #ffffff; font-weight: 600; box-shadow: none; }
nav.menu a.on svg { opacity: 1; color: #6fdccf; }
nav.menu a .nav-tag { background: var(--attn); color: #ffffff; font-size: 12px; font-weight: 600; letter-spacing: 0; padding: 1px 7px; }
nav.menu a.on .nav-tag { background: var(--attn); }
aside.side :focus-visible { outline: 2px solid #6fdccf; outline-offset: 2px; }
.side-foot { border-top: 1px solid rgba(255, 255, 255, 0.1); }
.side-user:hover { background: rgba(255, 255, 255, 0.07); }
.side-user .avatar { background: rgba(255, 255, 255, 0.16); color: #ffffff; font-weight: 600; }
.side-user .meta .n { color: #ffffff; }

/* ---------- Surfaces: flat, hairline, no shadow ---------- */
.card, .stat, .wf-card, .link-card, .linkbar, .todo, .offer, .poc, .b-card, .brief-hero, .payout-card, .doc-card, .tier-card {
  box-shadow: none;
}
.card, .wf-card, .link-card, .linkbar, .todo { background: var(--surface); border: 0; border-radius: var(--r-md); }
.card-head { padding: 16px 20px 12px; border-bottom: 1px solid var(--border); }
.card-head h3 { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.card-head a { font-size: 13px; font-weight: 600; color: var(--accent-ink); }
.card-head .h-eyebrow, .h-eyebrow { font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink-3); }
.empty { padding: 36px 24px; }
.empty strong { color: var(--ink); font-weight: 600; }

/* ---------- Labels: sentence case, never tracked caps ---------- */
.stat .l, .link-card .lc-meta .l, .offer-stats .s .k, .hero-divider .cell .lbl, .payout-card .big-pay-lbl, .aside-head .lbl,
.field-label, .slash-form label, .tier-cell .k, .tier-head .lbl, .list-head, .list-toggle, .thread-role, .poc-role, .chat-status-chip,
.link-eyebrow, .b-eyebrow, .ddon-eyebrow, .brief-hero .eyebrow, .payout-row .amt small, .pin-mark, .bcard-grid dt, .cs-sub {
  font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink-3);
}
.ptable thead th { font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink-3); background: var(--surface-2); }
.hero-eyebrow, .offers-hero .eyebrow, .wf-head .lbl, .section-head .label { display: none; }
.payout-row .amt small { font-weight: 500; }
.pin-mark { color: var(--accent-ink); }

/* ---------- Buttons and links ---------- */
.btn-primary, .link-group button, #copyBtn {
  background: var(--accent); color: #ffffff; border: 0; border-radius: var(--r-sm); font-size: 14px; font-weight: 600; padding: 9px 16px;
  transition: background-color 0.15s ease, transform 0.15s ease;
}
.btn-primary:hover, .link-group button:hover, #copyBtn:hover { background: var(--accent-hover); color: #ffffff; }
.btn-primary:active, .link-group button:active { transform: scale(0.98); }
.btn-primary:disabled { background: var(--border-strong); color: var(--ink-3); }
.btn-ghost, .btn-secondary {
  display: inline-flex; align-items: center; gap: 6px; background: var(--accent-weak); color: var(--accent-ink); border: 0;
  border-radius: var(--r-sm); font: 600 14px var(--font); padding: 9px 14px; text-decoration: none; cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.btn-ghost:hover, .btn-secondary:hover { background: #d3e6e4; color: var(--accent-ink); }
.btn-ghost:active, .btn-secondary:active { transform: scale(0.98); }

/* ---------- Tags (not pills) ---------- */
.pill { border: 0; border-radius: 6px; font-size: 13px; font-weight: 600; letter-spacing: 0; padding: 2px 8px; }
.pill.new { background: var(--accent-weak); color: var(--accent-ink); }
.pill.active { background: var(--good-weak); color: var(--good); }
.pill.pending { background: var(--warn-weak); color: var(--warn); }
.pill.done, .pill.neutral { background: var(--surface-3); color: var(--ink-2); }

/* ---------- Home: to-do, link bar, stat strip, steps ---------- */
.todo { margin-bottom: 16px; }
.todo h2 { font-size: 13px; font-weight: 600; color: var(--ink-2); padding: 14px 22px 10px; }
.todo ul { list-style: none; }
.todo li { display: flex; align-items: center; gap: 14px; padding: 14px 22px; border-top: 1px solid var(--border); }
.todo li::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--attn); }
.todo-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.todo-text strong { font-size: 14px; font-weight: 600; color: var(--ink); }
.todo-text span { font-size: 13px; color: var(--ink-2); }

.linkbar { display: flex; align-items: center; justify-content: space-between; gap: 16px 28px; flex-wrap: wrap; padding: 18px 22px; margin-bottom: 16px; }
.linkbar-text h2 { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.linkbar-text p { font-size: 14px; color: var(--ink-2); margin-top: 2px; max-width: 48ch; text-wrap: pretty; }
.link-group { flex: 1 1 340px; max-width: 520px; background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: var(--r-sm); padding: 3px;
  backdrop-filter: none; }
.link-group input { color: var(--ink); font-size: 14px; padding: 8px 10px; }
.link-group button { border-radius: 6px; padding: 8px 14px; }

.stats { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0; background: var(--surface); border: 0;
  border-radius: var(--r-md); margin-bottom: 20px; overflow: hidden; }
.stats .stat { background: transparent; border: 0; border-radius: 0; padding: 18px 22px; }
.stats .stat + .stat { border-left: 1px solid var(--border); }
.stat .v { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; }
.stat .l { margin-bottom: 6px; }
.stat .d { font-size: 13px; margin-top: 4px; }
.stat .d.ok { color: var(--good); font-weight: 500; }
@media (max-width: 760px) {
  .stats { grid-auto-flow: row; grid-auto-columns: auto; }
  .stats .stat + .stat { border-left: 0; border-top: 1px solid var(--border); }
}

.wf-card { padding: 18px 22px 20px; margin: 20px 0 0; }
.wf-head { margin-bottom: 14px; flex-wrap: nowrap; }
.wf-head h2 { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.wf-head .here { background: none; padding: 0; border-radius: 0; font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink-3); }
.wf-steps { list-style: none; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.wf-steps::before { display: none; }
.wf-step { display: flex; flex-direction: column; align-items: stretch; text-align: left; gap: 8px; padding: 0; border: 0; }
.wf-step:first-child { border: 0; }
.wf-step .bar { display: block; height: 4px; border-radius: 2px; background: var(--border); }
.wf-step.past .bar { background: var(--accent); }
.wf-step.active .bar { background: #15b6a3; }
.wf-step .name { font-size: 13px; color: var(--ink-3); }
.wf-step.active .name { color: var(--ink); font-weight: 600; }
.wf-now { margin-top: 14px; font-size: 14px; color: var(--ink-2); max-width: 64ch; text-wrap: pretty; }
.wf-now strong { color: var(--ink); font-weight: 600; }
@media (max-width: 980px) {
  .wf-steps { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
  .wf-step { flex-direction: column; padding: 0; border-top: 0; }
}
@media (max-width: 640px) { .wf-step .name { display: none; } }

.brief-row { padding: 14px 20px; }
.brief-row .title { font-weight: 600; }
.brief-row:hover { background: var(--surface-2); }
.payout-row { padding: 14px 20px; }
.payout-row .amt { font-weight: 600; }
.payout-row .amt small { color: var(--good); margin-top: 2px; }
.payout-row .amt small.pending { color: var(--warn); }

/* ---------- Offers: a list, not a card grid ---------- */
.link-card { padding: 16px 22px; margin-bottom: 8px; }
.link-card .lc-meta .l { margin-bottom: 4px; }
.link-card .lc-meta .v { font-size: 14px; font-weight: 500; }
.section-head { margin: 28px 0 10px; align-items: baseline; }
.section-head .title { font: 600 16px/1.3 var(--font); font-style: normal; letter-spacing: -0.01em; margin: 0; color: var(--ink); }
.section-head .count { font-size: 13px; color: var(--ink-3); }
.offers-grid { display: block; background: var(--surface); border: 0; border-radius: var(--r-md); overflow: hidden; }
.offer { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; grid-template-areas: "head stats comm foot" "hooks hooks hooks hooks";
  align-items: center; column-gap: 28px; row-gap: 10px; background: transparent; border: 0; border-top: 1px solid var(--border); border-radius: 0;
  padding: 18px 22px; transform: none; transition: background-color 0.15s ease; }
.offer:first-child { border-top: 0; }
.offer:hover { transform: none; box-shadow: none; background: var(--surface-2); }
.offer-top { display: contents; }
.offer-art { display: none; }
.offer-head { grid-area: head; min-width: 0; }
.offer-head .name { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.offer-head .tag { font-size: 14px; color: var(--ink-2); margin-top: 2px; text-wrap: pretty; }
.offer-stats { grid-area: stats; display: block; background: none; border: 0; padding: 0; }
.offer-stats .s .k { margin-bottom: 2px; }
.offer-stats .s .v { font-size: 14px; font-weight: 600; }
.offer-commission { grid-area: comm; min-width: 0; text-align: right; }
.offer-commission .n { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; color: var(--accent-ink); }
.offer-commission .u { font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink-3); margin-top: 3px; }
.offer-hooks { grid-area: hooks; border-top: 0; padding-top: 0; }
.offer-hooks summary { color: var(--accent-ink); font-size: 13px; }
.offer-foot { grid-area: foot; }
.offer .btn-primary { background: var(--accent-weak); color: var(--accent-ink); border: 0; }
.offer .btn-primary:hover { background: var(--accent); color: #ffffff; }
@media (max-width: 760px) {
  .offer { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "head comm" "stats foot" "hooks hooks"; column-gap: 16px; padding: 16px; }
  .offer-commission { grid-column: auto; display: block; text-align: right; }
  .offer-stats { grid-template-columns: none; }
}

/* ---------- Payouts, briefs, messages, profile, library ---------- */
.ptable tbody tr:hover { background: var(--surface-2); }
.brief-hero::before { display: none; }
.up-fill { background: var(--accent); }
/* The team's own colour, as on their chat avatars (clay stays for "needs you"). */
.poc .poc-avatar, .chat-head .chat-avatar { background: var(--sidebar); color: #ffffff; }
/* Chat rooms: soft tinted tiles with a deeper glyph of the same hue; the Team line is the one solid anchor.
 * Team = your line to us (deep teal), Community = the brand room, Training = lessons (honey), brief = a job (clay). */
.ch-avatar { box-shadow: inset 0 0 0 1px rgba(14, 72, 84, 0.07); }
.ch-avatar.a-team, .ch-avatar.a-admin { background: var(--sidebar); color: #e3efef; box-shadow: none; }
.ch-avatar.a-community { background: #dcebea; color: #0e4854; }
.ch-avatar.a-training { background: #f4e9d0; color: #7a5512; }
.ch-avatar.a-brief { background: #f7e6dd; color: #a2482f; }
.ch-row.on .ch-avatar { box-shadow: 0 0 0 2px var(--surface); }
/* People: the team in deep teal, creators in one of five soft tints picked from their id, initials in the deep tone. */
.msg-avatar.a-staff { background: var(--sidebar); color: #ffffff; }
.msg-avatar.t0 { background: #dcebea; color: #0e4854; }
.msg-avatar.t1 { background: #f7e6dd; color: #8f3f29; }
.msg-avatar.t2 { background: #f4e9d0; color: #6e4c0e; }
.msg-avatar.t3 { background: #e1ede4; color: #2d5a3d; }
.msg-avatar.t4 { background: #f3e2e6; color: #84394b; }
.user-chip .avatar { background: var(--accent); color: #ffffff; }
.tier-head .h em { font-family: var(--font); font-style: normal; font-weight: inherit; color: var(--accent-ink); }
.drop.over { background: var(--accent-weak); }
dialog.player { background: #0d2227; }

/* ---------- Profile and shared leftovers ---------- */
.attn { background: var(--surface); border: 0; color: var(--ink); padding: 14px 18px; border-radius: var(--r-md); font-size: 14px; gap: 14px; }
.attn::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--attn); }
.attn strong { color: var(--ink); font-weight: 600; }
.attn a { background: var(--accent-weak); color: var(--accent-ink); border: 0; padding: 8px 13px; font-weight: 600; font-size: 14px; transition: background-color 0.15s ease; }
.attn a:hover { background: #d3e6e4; color: var(--accent-ink); }
#signOutBtn { background: var(--accent-weak); color: var(--accent-ink); border: 0; }
#signOutBtn:hover { background: #d3e6e4; }
.btn-danger, .btn-danger-outline { font-size: 14px; font-weight: 600; }
.slash-chip { font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; border-radius: 6px; padding: 2px 8px; }
.slash-form .pwd-wrap button.toggle { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 600; color: var(--accent-ink); }
.ch-badge { background: var(--attn); color: #ffffff; }
.seg .n { background: var(--attn); }  /* the Unread count is the same ping as the sidebar Messages badge */
.ch-badge.mention, nav.menu a .nav-tag.alert, nav.menu a.on .nav-tag.alert, .seg .n.alert { background: #8f3b22; color: #ffffff; }

/* ---------- Briefs board: one calm surface, not a rainbow ---------- */
.bcol { background: transparent; border: 0; border-radius: var(--r-lg); }
.bchip { background: transparent; color: var(--ink); padding: 2px 0; border-radius: 0; font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.bchip svg { color: var(--accent); }
.bcol-n { font-weight: 500; color: var(--ink-3); }
.bcol-empty { border: 0; background: rgba(255, 255, 255, 0.55); color: var(--ink-3); }
.bcard { border: 0; }
.bcard:hover, .bcard:focus-within { box-shadow: 0 0 0 1px var(--ink-3); }
.bcard-product { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 500; }
.bcard-grid dd.late { color: var(--danger); }
.doc-wrap { box-shadow: none; border: 1px solid var(--border); }
.ref-row > div { min-width: 0; }
.ref-row .ref-url, .ref-row .ref-note { overflow-wrap: anywhere; }
.b-card .b-eyebrow { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; text-transform: none; color: var(--ink); margin-bottom: 2px; }
.b-card .b-title { font-size: 14px; font-weight: 400; color: var(--ink-2); letter-spacing: 0; }
.cs-card .b-title { color: var(--ink); font-weight: 600; font-size: 15px; }
.poc-role { text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 500; border-radius: 6px; }
.poc .poc-link { grid-column: 1 / -1; margin-top: 4px; }
.product-grid .p-audience strong { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 500; color: var(--ink-3); }

/* Outer frames dropped on the remaining panels; white sits on the mist page without an outline. Form fields and inner dividers keep theirs. */
.inbox, .files, .state, .sign, .user-chip, .intro-card { border: 0; }
.msg-group.them .msg { background: var(--surface-3); border: 0; }

/* ---------- Phone bottom navigation (mobile-nav.js) ---------- */
.mnav { display: none; }
@media (max-width: 820px) {
  .topbar h1 { font-size: 22px; }
  .side-brand { flex-direction: row; align-items: baseline; gap: 10px; padding: 0; border: 0; margin: 0; }
  .linkbar, .todo li { padding-left: 16px; padding-right: 16px; }
  .link-group { flex-basis: 100%; max-width: none; }
  .mnav { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: var(--surface); border-top: 1px solid var(--border-strong); padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); }
  .mnav-i { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 52px; border: 0; border-radius: var(--r-sm);
    background: transparent; color: var(--ink-2); font: 600 12px/1.1 var(--font); text-decoration: none; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: background-color 0.15s ease, color 0.15s ease; }
  .mnav-i svg { width: 22px; height: 22px; stroke-width: 1.75; }
  .mnav-i:active { background: var(--accent-weak); }
  .mnav-i:focus-visible, .mnav-m:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
  .mnav-i.on { color: var(--accent-ink); }
  .mnav-i.on::before { content: ""; position: absolute; top: 0; left: 30%; right: 30%; height: 3px; border-radius: 0 0 3px 3px; background: var(--accent); }
  .mnav-tag { position: absolute; top: 3px; left: calc(50% + 6px); min-width: 18px; padding: 1px 5px; border-radius: var(--r-pill); background: var(--attn); color: #ffffff; font-size: 12px; font-weight: 700; text-align: center; }
  .mnav-more { position: absolute; right: 8px; bottom: calc(100% + 8px); min-width: 188px; padding: 6px; display: flex; flex-direction: column; background: var(--surface);
    border: 1px solid var(--border-strong); border-radius: var(--r-md); box-shadow: var(--sh-lg); }
  .mnav-more[hidden] { display: none; }
  .mnav-m { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 12px; border-radius: var(--r-sm); color: var(--ink); text-decoration: none; font: 600 14px var(--font); touch-action: manipulation; }
  .mnav-m svg { width: 20px; height: 20px; }
  .mnav-m.on { background: var(--accent-weak); color: var(--accent-ink); }
  main.main { padding-bottom: calc(88px + env(safe-area-inset-bottom)) !important; }
}

/* ---------- Built-in toasts, questions and the account menu (ui.js) ---------- */
.cw-toasts { position: fixed; left: 50%; bottom: 24px; z-index: 1000; display: flex; flex-direction: column; align-items: center; gap: 8px;
  width: min(440px, calc(100vw - 32px)); transform: translateX(-50%); pointer-events: none; }
.cw-toast { --tone: rgba(255, 255, 255, 0.78); pointer-events: auto; display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box;
  padding: 10px 6px 10px 12px; border-radius: var(--r-md); background: var(--ink); color: #ffffff; box-shadow: var(--sh-lg);
  font: 500 14px/1.4 var(--font); animation: cwToastIn 0.18s ease-out both; }
.cw-toast.good { --tone: #8fdcb6; }
.cw-toast.bad { --tone: #ffb3a6; }
.cw-toast.out { animation: cwToastOut 0.16s ease-in both; }
.cw-toast-i { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); color: var(--tone); }
.cw-toast-i svg { width: 16px; height: 16px; }
.cw-toast-t { flex: 1; min-width: 0; overflow-wrap: anywhere; text-wrap: pretty; }
.cw-toast-x { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: var(--r-sm); background: transparent;
  color: rgba(255, 255, 255, 0.6); cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; }
.cw-toast-x:hover { background: rgba(255, 255, 255, 0.1); color: #ffffff; }
.cw-toast-x:focus-visible { outline: 2px solid #ffffff; outline-offset: -2px; }
.cw-toast-x svg { width: 16px; height: 16px; }
@keyframes cwToastIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes cwToastOut { to { opacity: 0; transform: translateY(4px); } }

.cw-dlg-back { position: fixed; inset: 0; z-index: 1100; display: grid; place-items: center; padding: 16px; background: rgba(18, 40, 43, 0.42);
  animation: cwFade 0.16s ease-out both; overscroll-behavior: contain; }
.cw-dlg-back.out { animation: cwFadeOut 0.14s ease-in both; }
.cw-dlg { width: min(400px, 100%); box-sizing: border-box; padding: 22px 22px 18px; border-radius: var(--r-lg); background: var(--surface);
  border: 1px solid var(--border); box-shadow: var(--sh-lg); animation: cwDlgIn 0.18s ease-out both; }
.cw-dlg-t { margin: 0; font: 650 18px/1.3 var(--font); color: var(--ink); letter-spacing: -0.01em; text-wrap: balance; }
.cw-dlg-b { margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.cw-dlg-act { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.cw-dlg-btn { min-height: 40px; padding: 0 16px; border-radius: var(--r-sm); border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink);
  font: 600 14px var(--font); cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease; }
.cw-dlg-btn:hover { background: var(--surface-2); }
.cw-dlg-btn.pri { background: var(--accent); border-color: var(--accent); color: #ffffff; }
.cw-dlg-btn.pri:hover { background: var(--accent-hover); }
.cw-dlg-btn.danger { background: var(--danger); border-color: var(--danger); color: #ffffff; }
.cw-dlg-btn.danger:hover { filter: brightness(0.94); }
.cw-dlg-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@keyframes cwFade { from { opacity: 0; } }
@keyframes cwFadeOut { to { opacity: 0; } }
@keyframes cwDlgIn { from { opacity: 0; transform: translateY(6px) scale(0.98); } }
@media (max-width: 480px) { .cw-dlg-act { flex-direction: column-reverse; } .cw-dlg-btn { width: 100%; } }

.side-foot { position: relative; }
.side-user { cursor: pointer; border-radius: var(--r-md); transition: background-color 0.15s ease; }
.side-user[aria-expanded="true"] { background: rgba(255, 255, 255, 0.1); }
.side-user[aria-expanded="true"] .meta .e { color: var(--sidebar-ink); }
.side-user:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }
.cw-acct { position: absolute; left: 0; right: 0; bottom: calc(100% + 8px); z-index: 70; padding: 6px; border-radius: var(--r-md); background: var(--surface);
  border: 1px solid var(--border-strong); box-shadow: var(--sh-lg); animation: cwDlgIn 0.16s ease-out both; }
.cw-acct-who { display: flex; align-items: center; gap: 10px; padding: 8px 10px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--border); }
.cw-acct-txt { min-width: 0; }
.cw-acct-av { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--accent); color: #ffffff; font: 600 13px var(--font); }
/* Profile photo over the initials (app-shell.js paints it); the letters hide while it loads so they never flash. */
.side-user .avatar, .cw-acct-av { position: relative; overflow: hidden; }
.side-user .avatar.has-photo, .cw-acct-av.has-photo { color: transparent; }
.side-user .avatar img, .cw-acct-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.side-user .avatar img { outline: 1px solid rgba(255, 255, 255, 0.14); outline-offset: -1px; border-radius: 50%; }
.cw-acct-av img { outline: 1px solid rgba(0, 0, 0, 0.08); outline-offset: -1px; border-radius: 50%; }
.cw-acct-n { font: 650 14px/1.3 var(--font); color: var(--ink); }
.cw-acct-e { margin-top: 2px; font-size: 13px; color: var(--ink-3); overflow-wrap: anywhere; }
.cw-acct [role="menuitem"] { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; box-sizing: border-box; padding: 0 10px; border: 0;
  border-radius: var(--r-sm); background: transparent; color: var(--ink); font: 600 14px var(--font); text-decoration: none; text-align: left; cursor: pointer;
  transition: background-color 0.12s ease; }
.cw-acct [role="menuitem"] svg { width: 18px; height: 18px; flex: none; color: var(--ink-3); }
.cw-acct [role="menuitem"]:hover, .cw-acct [role="menuitem"]:focus-visible { background: var(--surface-2); outline: none; }
.cw-acct [role="menuitem"]:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
.cw-acct .cw-acct-out, .cw-acct .cw-acct-out svg { color: var(--danger); }
.cw-acct .cw-acct-out[disabled] { opacity: 0.6; cursor: progress; }
.cw-acct-sep { height: 1px; margin: 4px 6px; background: var(--border); }
@media (max-width: 820px) {
  .cw-toasts { bottom: calc(76px + env(safe-area-inset-bottom)); }
  button.mnav-m { width: 100%; border: 0; background: transparent; cursor: pointer; text-align: left; }
  .mnav-m.out, .mnav-m.out svg { color: var(--danger); }
  .mnav-sep { height: 1px; margin: 4px 6px; background: var(--border); }
}

/* ---------- Calm motion for people who ask for it ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
.linkish { color: var(--accent-ink); }
.tbl:focus-visible { outline: 2px solid #0e8f81; outline-offset: 2px; }

/* ---------- Page changes: the menu stays put, only the content fades (Chrome, Edge, Safari 18.2+) ---------- */
@view-transition { navigation: auto; }
aside.side { view-transition-name: cw-side; }
nav.mnav { view-transition-name: cw-mnav; }
::view-transition-old(cw-side), ::view-transition-old(cw-mnav) { display: none; }
::view-transition-group(cw-side), ::view-transition-group(cw-mnav),
::view-transition-new(cw-side), ::view-transition-new(cw-mnav) { animation: none; }
::view-transition-group(root) { animation-duration: 0.18s; }

/* ---------- Loader: Revive gummies dropping out of the jar (markup in app-shell.js) ----------
 * One 2.6s loop: the jar tips, gives a small shake as each gummy slides out, three gummies fall (straight
 * sideways drift, accelerating drop), squash on landing and pile up, then the pile fades and the jar rights itself.
 * Hidden for the first 0.3s so quick loads never flash it. */
.cw-loader { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-height: min(56vh, 480px); color: var(--ink-3); opacity: 0; animation: cw-loader-in 0.3s ease-out 0.3s forwards; }
.cw-loader .cwj { display: block; width: 104px; height: 104px; overflow: visible; }
.cw-loader-sm { min-height: 0; padding: 16px 12px; }
.cw-loader-sm .cwj { width: 64px; height: 64px; }
.cw-loader-cap { font-size: 13px; color: inherit; }
.cw-loader-dark { color: #c9c8d8; }
.cw-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@keyframes cw-loader-in { to { opacity: 1; } }

.cwj { --sx: 52.6px; --sy: 48.6px; --mx: 70.6px; --my: 61.2px; }
.cwj-floor { fill: var(--ink); opacity: 0.1; }
.cwj-jar { transform-origin: 46px 44px; animation: cwj-tilt 2.6s infinite; }
.cwj-p1 { --lx: 75px; --ly: 98px; --lr: -2deg; --d: 0.26s; animation: cwj-o1 2.6s infinite; }
.cwj-p2 { --lx: 88px; --ly: 98px; --lr: 2deg; --d: 0.62s; animation: cwj-o2 2.6s infinite; }
.cwj-p3 { --lx: 81.5px; --ly: 86.6px; --lr: -4deg; --d: 0.99s; animation: cwj-o3 2.6s infinite; }
.cwj-x { animation: cwj-x 2.6s var(--d) infinite backwards; }
.cwj-y { animation: cwj-y 2.6s var(--d) infinite backwards; }
.cwj-r { animation: cwj-r 2.6s var(--d) infinite backwards; }
.cwj-s { transform-box: fill-box; transform-origin: 50% 100%; animation: cwj-s 2.6s var(--d) infinite backwards; }

@keyframes cwj-tilt {
  0% { transform: rotate(100deg); animation-timing-function: cubic-bezier(0.45, 0, 0.25, 1); }
  10%, 17%, 24%, 31%, 38% { transform: rotate(125deg); }
  13%, 27%, 41% { transform: rotate(128deg); }
  45%, 64% { transform: rotate(125deg); animation-timing-function: cubic-bezier(0.45, 0, 0.25, 1); }
  80%, 100% { transform: rotate(100deg); }
}
/* Each gummy: slide out of the mouth (0-7%), fall (7-23%: x steady, y accelerating), land (23-31%), rest. */
@keyframes cwj-x {
  0% { transform: translateX(var(--sx)); animation-timing-function: cubic-bezier(0.4, 0, 0.7, 1); }
  7% { transform: translateX(var(--mx)); animation-timing-function: linear; }
  23%, 100% { transform: translateX(var(--lx)); }
}
@keyframes cwj-y {
  0% { transform: translateY(var(--sy)); animation-timing-function: cubic-bezier(0.4, 0, 0.7, 1); }
  7% { transform: translateY(var(--my)); animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53); }
  23%, 100% { transform: translateY(var(--ly)); }
}
@keyframes cwj-r {
  0% { transform: rotate(35deg); }
  7% { transform: rotate(35deg); animation-timing-function: cubic-bezier(0.3, 0.1, 0.6, 1); }
  23%, 100% { transform: rotate(var(--lr)); }
}
@keyframes cwj-s {
  0%, 23% { transform: scale(1); }
  25.5% { transform: scale(1.14, 0.82); }
  28.5% { transform: scale(0.97, 1.04); }
  31%, 100% { transform: scale(1); }
}
/* Visible from the moment it starts inside the jar until the pile clears; hidden while it resets. */
@keyframes cwj-o1 { 0%, 9.9% { opacity: 0; } 10%, 84% { opacity: 1; } 92%, 100% { opacity: 0; } }
@keyframes cwj-o2 { 0%, 23.9% { opacity: 0; } 24%, 84% { opacity: 1; } 92%, 100% { opacity: 0; } }
@keyframes cwj-o3 { 0%, 37.9% { opacity: 0; } 38%, 84% { opacity: 1; } 92%, 100% { opacity: 0; } }

/* While the next page loads after a tab click (shown only if it takes a moment). */
main.main:has(> .cw-leaving) { position: relative; }
.cw-leaving { position: absolute; inset: 0; z-index: 30; background: rgba(246, 249, 248, 0.74); animation: cw-loader-in 0.16s ease-out both; opacity: 0; }
.cw-leaving .cw-loader { position: sticky; top: 18vh; min-height: 0; padding-top: 12vh; }

@media (prefers-reduced-motion: reduce) {
  .cw-loader, .cw-loader *, .cw-leaving { animation: none !important; }
  .cw-loader, .cw-leaving { opacity: 1; }
  .cwj-jar { transform: rotate(125deg); }
  .cwj-x { transform: translateX(var(--lx)); }
  .cwj-y { transform: translateY(var(--ly)); }
  .cwj-r { transform: rotate(var(--lr)); }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* View as creator (app-shell.js): a hub admin is looking at this account, read only. Top centre on a computer,
   above the bottom tab bar on a phone. */
.cw-viewas { position: fixed; top: 10px; left: 50%; transform: translateX(-50%); z-index: 200; display: flex; align-items: center; gap: 10px;
  max-width: calc(100vw - 24px); padding: 5px 5px 5px 14px; border-radius: 999px; background: var(--sidebar); color: #ffffff;
  font: 500 13px/1.3 var(--font); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 8px 22px -8px rgba(0, 0, 0, 0.35); }
.cw-viewas-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cw-viewas b { font-weight: 650; }
.cw-viewas-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--attn); flex: none; }
.cw-viewas button { flex: none; min-height: 32px; padding: 0 13px; border: 0; border-radius: 999px; background: #ffffff; color: var(--sidebar);
  font: 650 12.5px var(--font); cursor: pointer; transition: background-color 140ms; }
.cw-viewas button:hover { background: #e3efef; }
.cw-viewas button:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }
/* Phone: full width, and the words wrap to a second line instead of cutting off "Read only". */
@media (max-width: 820px) {
  .cw-viewas { top: auto; bottom: calc(76px + env(safe-area-inset-bottom)); left: 12px; right: 12px; transform: none; max-width: none; border-radius: 16px; }
  .cw-viewas-txt { flex: 1; white-space: normal; text-wrap: pretty; }
}