/*! Murmura — every social account, one calm workspace — © 2026 Hasib (OVERSHOOT). All rights reserved. Licensed to ceo@Liveforeverhealth.com (order INS-532486BD), not sold: see LICENSE.md. */
/* =========================================================================
   MURMURA — shell + shared kit. Page styles live in css/<page>.css and are
   imported by their page module.

   Look: neutral stone under a slow aqua / sand / sky wash; cards are
   frosted panes (translucent fill + a lit top edge — no backdrop-filter on
   cards); a post's colour IS its state (butter = awaiting approval, sea =
   scheduled, pine = published, coral = needs attention). A charcoal dock
   floats on the left; a charcoal pill marks the page.
   ========================================================================= */

/* Palette "coast": neutral stone under a soft aqua / sand / sky wash,
   charcoal for the dock, the active pill and the text, and a state set of
   amber (awaiting approval), ocean blue (scheduled), green (published), red
   (needs attention) and teal (assist). No violet anywhere. Every
   text-on-tone pair is >= 4.5:1 in both themes. */
:root {
  --font: 'Urbanist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* type: 16px body, nothing under 12.5 */
  --fs-2xs: 13px; --fs-xs: 14px; --fs-sm: 15px; --fs-md: 16px; --fs-base: 17px; --fs-lg: 18px; --fs-xl: 20px;

  /* paper + panes */
  --bg: #f1f2ef;
  --mesh-a: #cde9e4; --mesh-b: #f3e3c8; --mesh-c: #d3e6f3;
  --glass: rgba(255, 255, 255, .52);
  --glass-2: rgba(255, 255, 255, .7);
  --glass-3: rgba(255, 255, 255, .86);
  --solid: #f6f7f4;
  /* anything that floats above the page is OPAQUE: legibility must not depend on backdrop-filter */
  --float: #fdfdfb;
  --well: rgba(22, 26, 30, .06);
  --line: rgba(22, 26, 30, .09);
  --line-2: rgba(22, 26, 30, .16);
  --rim: rgba(255, 255, 255, .82);
  --shadow: 0 1px 0 rgba(255, 255, 255, .75) inset, 0 24px 48px -30px rgba(30, 40, 45, .28);
  --shadow-pop: 0 24px 60px -18px rgba(20, 24, 28, .3), 0 2px 6px rgba(20, 24, 28, .08);

  /* text */
  --text: #16191d;
  --muted: #5b6064;
  --faint: #696e72;
  --cream: #f6f7f5;

  /* state tones (a post's colour = its state) */
  --butter: #f2b740;  --on-butter: #16191d;
  --pine: #11745a;    --on-pine: #f6f7f5;
  --coral: #c43c30;   --on-coral: #f6f7f5;
  --sea: #1f68a8;     --on-sea: #f6f7f5;
  --lilac: #0b7a87;   --on-lilac: #f6f7f5;
  --ink: #16191d;     --on-ink: #f6f7f5;
  --plain: rgba(255, 255, 255, .62); --on-plain: #16191d;
  --good: #11745a; --bad: #b8382c; --warn: #855c00;

  /* network marks */
  --n-instagram: #c13584; --n-facebook: #1665d8; --n-x: #16191d; --n-linkedin: #0a66c2;
  --n-tiktok: #16191d; --n-youtube: #d61f1f; --n-pinterest: #d0021b; --n-threads: #16191d;

  --dock: #16191d; --on-dock: #f6f7f5;
  --pill: #16191d; --on-pill: #f6f7f5;

  --r-card: 26px; --r-tile: 22px; --r-ctl: 999px;
  --gap: 16px;
  /* the dock floats at --dock-x; content starts one gutter after it and ends one gutter before the edge */
  --dock-x: 18px; --dock-w: 68px;
  --gutter: clamp(16px, 1.6vw, 28px);
  --ease: cubic-bezier(.2, .8, .2, 1);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #101214;
  --mesh-a: rgba(11, 122, 135, .3); --mesh-b: rgba(242, 183, 64, .12); --mesh-c: rgba(31, 104, 168, .3);
  --glass: rgba(255, 255, 255, .05);
  --glass-2: rgba(255, 255, 255, .085);
  --glass-3: #212428;
  --solid: #191b1f;
  --float: #1f2226;
  --well: rgba(255, 255, 255, .06);
  --line: rgba(255, 255, 255, .08);
  --line-2: rgba(255, 255, 255, .16);
  --rim: rgba(255, 255, 255, .07);
  --shadow: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 24px 48px -30px rgba(0, 0, 0, .7);
  --shadow-pop: 0 24px 60px -18px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .08);
  --text: #eef0ee; --muted: #a6abaa; --faint: #868b8a;
  /* ink inverts to paper so "published" still reads as the boldest */
  --ink: #eef0ee; --on-ink: #16191d;
  --coral: #c8402f; --sea: #2370b3; --lilac: #0a7582; --pine: #117a5d;
  --plain: rgba(255, 255, 255, .07); --on-plain: #eef0ee;
  --good: #5fcfa6; --bad: #ff8f80; --warn: #e9c15a;
  --n-instagram: #e573b3; --n-facebook: #6ea4f5; --n-x: #eef0ee; --n-linkedin: #6fb1f5;
  --n-tiktok: #eef0ee; --n-youtube: #ff6b6b; --n-pinterest: #ff6b7d; --n-threads: #eef0ee;
  --dock: rgba(255, 255, 255, .08); --on-dock: #eef0ee;
  --pill: #eef0ee; --on-pill: #16191d;
  color-scheme: dark;
}

/* ── Base ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }   /* a scrollbar appearing between pages never shifts the layout sideways */
body {
  margin: 0; min-height: 100dvh; background: var(--bg); color: var(--text);
  font: 500 var(--fs-md)/1.45 var(--font);
  -webkit-font-smoothing: antialiased; overflow: visible; overflow-wrap: break-word;
  -webkit-tap-highlight-color: transparent;
}
img, svg { display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button, a, label, input, select { touch-action: manipulation; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, dl, dd, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
[hidden] { display: none !important; }
.num, b[data-count], .tnum, time { font-variant-numeric: tabular-nums; }
.ico { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.head__title:focus, .drawer__inner:focus { outline: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 12px; background: var(--pill); color: var(--on-pill); }
.skip:focus-visible { top: 12px; }
::selection { background: var(--butter); color: #16191d; }
mark { background: color-mix(in srgb, var(--butter) 70%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }

/* the mesh — three soft fields that drift (transform only, one GSAP tween each) */
.mesh { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.mesh i { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .95; will-change: transform; }
.mesh__a { width: 62vmax; height: 62vmax; left: -18vmax; top: -24vmax; background: radial-gradient(closest-side, var(--mesh-a), transparent); }
.mesh__b { width: 70vmax; height: 70vmax; right: -24vmax; bottom: -30vmax; background: radial-gradient(closest-side, var(--mesh-b), transparent); }
.mesh__c { width: 46vmax; height: 46vmax; right: 8vmax; top: -16vmax; background: radial-gradient(closest-side, var(--mesh-c), transparent); }

/* load gate: the shell is hidden until main.ts plays the entrance */
html.js:not(.failsafe) .app { visibility: hidden; }
html.js.is-ready .app { visibility: visible; }
html.is-signed-out .app { display: none; }

/* ── Shell ────────────────────────────────────────────────────────────── */
.app {
  overflow: visible;
  padding: 22px var(--gutter) 48px calc(var(--dock-x) + var(--dock-w) + var(--gutter));
}
.top { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 20px; margin-bottom: 26px; }
.brand { display: inline-flex; align-items: center; gap: 12px; font-weight: 700; font-size: 26px; letter-spacing: -.02em; }
.brand__mark { width: 48px; height: 48px; border-radius: 15px; background: var(--pill); color: var(--on-pill); display: grid; place-items: center; }
.brand__mark svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }

.tabs { justify-self: center; min-width: 0; max-width: 100%; overflow-x: auto; scrollbar-width: none; border-radius: 999px; }
.tabs::-webkit-scrollbar { display: none; }
.tabs__track { position: relative; display: flex; gap: 2px; padding: 4px; width: max-content; }
.tab { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 7px; padding: 11px 17px; border-radius: 999px; color: var(--text); font-weight: 600; font-size: var(--fs-sm); white-space: nowrap; }
.tab:hover { background: var(--well); }
.tab[aria-current="page"]:hover { background: none; }
.tabs__pill { position: absolute; inset: 0; z-index: 2; background: var(--pill); pointer-events: none; opacity: 0; display: flex; gap: 2px; padding: 4px; }
.tabs__pill > span { display: inline-flex; align-items: center; gap: 7px; padding: 11px 17px; color: var(--on-pill); font-weight: 600; font-size: var(--fs-sm); white-space: nowrap; }
.tab-count { display: inline-grid; place-items: center; min-width: 21px; height: 21px; padding: 0 6px; border-radius: 999px; background: var(--butter); color: #16191d; font-size: 12.5px; font-weight: 700; }
.tab-count:empty { display: none; }

.top__tools { display: flex; align-items: center; gap: 10px; }
.bswitch { display: inline-flex; align-items: center; gap: 9px; height: 46px; padding: 0 14px 0 6px; border-radius: 999px; background: var(--glass-2); border: 1px solid var(--rim); font-weight: 600; font-size: var(--fs-sm); max-width: 240px; }
.bswitch__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.bswitch .ico { width: 16px; height: 16px; color: var(--muted); }
.bswitch__all { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--pill); color: var(--on-pill); }
.bswitch__all .ico { color: inherit; width: 17px; height: 17px; }
.me { display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 2px; border-radius: 999px; background: var(--glass-2); border: 1px solid var(--rim); }
.me .av { width: 42px; height: 42px; }
.me__text { display: none; text-align: left; line-height: 1.15; padding-right: 14px; }
.me__text b { display: block; font-size: var(--fs-xs); font-weight: 700; }
.me__text small { display: block; font-size: 12.5px; color: var(--muted); }
@media (min-width: 1500px) { .me__text { display: block; } }
.dot-badge { position: absolute; top: 9px; right: 10px; width: 9px; height: 9px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 2px var(--bg); }

/* the dock: a dark pill fixed at the left edge, centred with auto margins (never translateY) */
.dock {
  position: fixed; z-index: 30; left: var(--dock-x); top: 0; bottom: 0; margin: auto 0; height: fit-content;
  display: flex; flex-direction: column; gap: 4px; padding: 8px; border-radius: 999px;
  background: var(--dock); color: var(--on-dock); box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .45);
}
:root[data-theme="dark"] .dock { backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid var(--line); }
.dock__btn { position: relative; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; opacity: .74; }
.dock__btn .ico { width: 22px; height: 22px; }
.dock__btn:hover, .dock__btn:focus-visible, .dock__btn[aria-expanded="true"], .dock__btn[aria-current="page"] { opacity: 1; background: rgba(255, 255, 255, .12); }
.dock__btn:focus-visible { outline-color: var(--on-dock); }
.dock__btn[aria-current="page"]::after { content: ''; position: absolute; right: 3px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: var(--butter); }
.dock__btn--new { background: var(--butter); color: #16191d; opacity: 1; }
.dock__btn--new:hover, .dock__btn--new:focus-visible { background: #f5c562; }
.dock__btn.is-locked { opacity: .4; }
.dock__sep { height: 1px; margin: 4px 10px; background: rgba(255, 255, 255, .14); }
.dock__tip {
  position: absolute; left: calc(100% + 14px); top: 0; bottom: 0; margin: auto 0; height: fit-content;
  padding: 7px 11px; border-radius: 10px; background: var(--float); color: var(--text); box-shadow: var(--shadow-pop);
  font-size: var(--fs-2xs); font-weight: 600; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .18s var(--ease);
}
.dock__tip kbd { font: inherit; font-size: 12px; color: var(--muted); margin-left: 4px; border: 0; background: none; padding: 0; }
.dock__btn:hover .dock__tip, .dock__btn:focus-visible .dock__tip { opacity: 1; }
.dock__dot { position: absolute; top: 9px; right: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 2px var(--dock); }
:root[data-theme="dark"] .dock__dot { box-shadow: 0 0 0 2px #2a2b2e; }
.dock__more { display: none; }
.dock__theme .ico--sun { display: none; }
:root[data-theme="dark"] .dock__theme .ico--sun { display: block; }
:root[data-theme="dark"] .dock__theme .ico--moon { display: none; }
@media (hover: none) { .dock__tip { display: none; } }

.main { position: relative; }
.view { position: relative; }

/* ── Page head ────────────────────────────────────────────────────────── */
.head { display: flex; align-items: center; flex-wrap: wrap; gap: 18px clamp(28px, 4vw, 72px); margin-bottom: 24px; }
.head__lead { display: flex; align-items: center; gap: 18px; flex: none; }
.head__title { font-size: clamp(30px, 2.7vw, 40px); line-height: 1.04; font-weight: 600; letter-spacing: -.025em; }
.head__title .word { display: inline-block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; vertical-align: top; }
.head__title .ch { display: inline-block; }
.head__stats { display: flex; flex-wrap: wrap; gap: 14px clamp(24px, 3.2vw, 56px); }
.stat { display: flex; align-items: center; gap: 12px; }
.stat__ico { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--glass-2); border: 1px solid var(--rim); }
.stat__value { display: flex; align-items: center; gap: 10px; font-size: 23px; font-weight: 600; letter-spacing: -.01em; }
.stat__label { color: var(--muted); font-size: var(--fs-2xs); line-height: 1.3; max-width: 170px; }
.head__actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-left: auto; }
.badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; letter-spacing: .01em; white-space: nowrap; }
.badge--butter { background: var(--butter); color: var(--on-butter); }
.badge--pine { background: var(--pine); color: var(--on-pine); }
.badge--coral { background: var(--coral); color: var(--on-coral); }
.badge--sea { background: var(--sea); color: var(--on-sea); }
.badge--lilac { background: var(--lilac); color: var(--on-lilac); }
.badge--ink { background: var(--ink); color: var(--on-ink); }
.badge--plain { background: var(--glass-2); color: var(--text); border: 1px solid var(--line); }
.is-flash { animation: flash .9s var(--ease); }
@keyframes flash { 0% { color: var(--coral); } 100% { color: inherit; } }
.float-up { position: fixed; z-index: 90; pointer-events: none; font-weight: 700; font-size: var(--fs-sm); color: var(--good); }

/* ── Cards ────────────────────────────────────────────────────────────── */
.grid { display: grid; gap: var(--gap); }
.card {
  position: relative; min-width: 0; padding: 20px; border-radius: var(--r-card);
  background: var(--glass); border: 1px solid var(--rim); box-shadow: var(--shadow);
}
.card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; min-height: 42px; }
.card__title { font-size: var(--fs-base); font-weight: 600; letter-spacing: -.005em; }
.card__sub { color: var(--muted); font-size: var(--fs-2xs); }
.card__tools { display: flex; align-items: center; gap: 8px; }
.card.is-focus {
  position: fixed; z-index: 60; top: 8vh; bottom: auto; left: max(4vw, calc((100vw - 1180px) / 2)); right: max(4vw, calc((100vw - 1180px) / 2));
  max-height: 84vh; overflow: auto; background: var(--solid); box-shadow: var(--shadow-pop);
}
.card-ph { border-radius: var(--r-card); border: 1.5px dashed var(--line-2); }
.scrim { position: fixed; inset: 0; z-index: 55; background: rgba(16, 18, 20, .28); opacity: 0; visibility: hidden; }
:root[data-theme="dark"] .scrim { background: rgba(0, 0, 0, .55); }
/* solid colour tiles — the post/state colour blocks */
.tile { border-radius: var(--r-tile); padding: 16px; }
.tone--butter { background: var(--butter); color: var(--on-butter); } .tone--pine { background: var(--pine); color: var(--on-pine); }
.tone--coral { background: var(--coral); color: var(--on-coral); } .tone--sea { background: var(--sea); color: var(--on-sea); }
.tone--lilac { background: var(--lilac); color: var(--on-lilac); } .tone--ink { background: var(--ink); color: var(--on-ink); }
.tone--plain { background: var(--glass-2); color: var(--on-plain); } .tone--muted { background: var(--faint); }

/* ── Controls ─────────────────────────────────────────────────────────── */
.ibtn {
  position: relative; width: 42px; height: 42px; flex: none; border-radius: 50%; display: inline-grid; place-items: center;
  border: 1px solid var(--line-2); color: var(--text); background: transparent;
}
.ibtn:hover { background: var(--glass-2); }
.ibtn--glass { background: var(--glass-2); border-color: var(--rim); width: 46px; height: 46px; }
.ibtn--sm { width: 34px; height: 34px; }
.ibtn--sm .ico { width: 17px; height: 17px; }
.ibtn--lg { width: 50px; height: 50px; background: var(--glass-2); border-color: var(--rim); }
.ibtn--on-dark { border-color: rgba(255, 255, 255, .28); color: inherit; }
.ibtn--on-dark:hover { background: rgba(255, 255, 255, .14); }
.ibtn[aria-pressed="true"] { background: var(--pill); color: var(--on-pill); border-color: transparent; }
.ibtn:disabled { opacity: .4; cursor: not-allowed; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 19px;
  border-radius: 999px; font-weight: 600; font-size: var(--fs-sm); white-space: nowrap; border: 1px solid transparent;
}
.btn .ico { width: 18px; height: 18px; }
.btn--ink { background: var(--pill); color: var(--on-pill); }
.btn--ink:hover { filter: brightness(1.15); }
:root[data-theme="dark"] .btn--ink:hover { filter: brightness(.92); }
.btn--ghost { border-color: var(--line-2); background: var(--glass); }
.btn--ghost:hover { background: var(--glass-2); }
.btn--butter { background: var(--butter); color: var(--on-butter); }
.btn--pine { background: var(--pine); color: var(--on-pine); }
.btn--danger { background: var(--coral); color: var(--on-coral); }
.btn--sm { height: 36px; padding: 0 15px; font-size: var(--fs-2xs); }
.btn--sm .ico { width: 16px; height: 16px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; filter: none; }
.btn[data-locked]::after, .chip[data-locked]::after { content: ''; width: 14px; height: 14px; margin-left: 2px; background: currentColor; -webkit-mask: var(--lock-mask) center / contain no-repeat; mask: var(--lock-mask) center / contain no-repeat; }
:root { --lock-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Crect x='5' y='10.5' width='14' height='10' rx='2.5'/%3E%3Cpath d='M8 10.5V8a4 4 0 0 1 8 0v2.5'/%3E%3C/svg%3E"); }

.seg { position: relative; display: inline-flex; padding: 3px; border-radius: 999px; background: var(--well); }
.seg__pill { position: absolute; inset: 0; background: var(--glass-3); box-shadow: 0 2px 8px rgba(0, 0, 0, .08); opacity: 0; pointer-events: none; }
:root[data-theme="dark"] .seg__pill { background: rgba(255, 255, 255, .14); }
.seg__btn { position: relative; z-index: 1; padding: 8px 15px; border-radius: 999px; font-size: var(--fs-2xs); font-weight: 600; color: var(--muted); white-space: nowrap; }
.seg__btn[aria-pressed="true"] { color: var(--text); }

.input, .search {
  height: 44px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--glass-2); padding: 0 16px; outline: none; min-width: 0;
}
.input:focus, .search:focus-within { border-color: var(--text); }
.search { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); }
.search input { border: 0; background: none; outline: none; height: 100%; width: 100%; min-width: 0; color: var(--text); }
select.input { padding-right: 34px; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23777' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9.5 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; }
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 16px; }
.toolbar__spacer { flex: 1; }

.chip { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px; border-radius: 999px; background: var(--glass-2); border: 1px solid var(--line); font-size: var(--fs-2xs); font-weight: 600; white-space: nowrap; }
.chip .ico { width: 16px; height: 16px; }
.chip[aria-pressed="true"] { background: var(--pill); color: var(--on-pill); border-color: transparent; }
.chip[aria-pressed="true"] .net { color: inherit; }

/* state pill — the dot carries the state colour */
.spill { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px 4px 9px; border-radius: 999px; background: var(--well); font-size: var(--fs-2xs); font-weight: 600; white-space: nowrap; }
.spill i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.spill--butter i { background: var(--butter); box-shadow: 0 0 0 1px rgba(0, 0, 0, .12); } .spill--pine i { background: var(--good); }
.spill--coral { color: var(--bad); } .spill--coral i { background: var(--coral); } .spill--sea i { background: var(--sea); }
.spill--ink i { background: var(--ink); } .spill--lilac i { background: var(--lilac); } .spill--plain i { background: var(--faint); }

/* network marks */
.net { display: inline-grid; place-items: center; flex: none; border-radius: 50%; background: var(--glass-2); border: 1px solid var(--line); color: var(--n-x); }
.net .ico { width: 58%; height: 58%; stroke-width: 1.9; }
.net--xs { width: 22px; height: 22px; } .net--sm { width: 28px; height: 28px; } .net--md { width: 36px; height: 36px; } .net--lg { width: 46px; height: 46px; }
.net--instagram { color: var(--n-instagram); } .net--facebook { color: var(--n-facebook); } .net--x { color: var(--n-x); }
.net--linkedin { color: var(--n-linkedin); } .net--tiktok { color: var(--n-tiktok); } .net--youtube { color: var(--n-youtube); }
.net--pinterest { color: var(--n-pinterest); } .net--threads { color: var(--n-threads); }
.net-stack { display: inline-flex; }
.net-stack .net { background: var(--solid); box-shadow: 0 0 0 2px var(--solid); border-color: transparent; }
.net-stack .net + .net { margin-left: -6px; }

/* brand monogram + chip */
.bmark { display: inline-grid; place-items: center; flex: none; border-radius: 30%; font-weight: 700; letter-spacing: -.02em; }
.bmark--xs { width: 22px; height: 22px; font-size: 11.5px; border-radius: 7px; } .bmark--sm { width: 30px; height: 30px; font-size: 12.5px; border-radius: 9px; }
.bmark--md { width: 38px; height: 38px; font-size: 14px; border-radius: 11px; } .bmark--lg { width: 52px; height: 52px; font-size: 18px; border-radius: 15px; }
.bmark.tone--plain { border: 1px solid var(--line); }
.bchip { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-2xs); font-weight: 600; white-space: nowrap; }

/* role badge */
.rbadge { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.rbadge--ink { background: var(--ink); color: var(--on-ink); } .rbadge--sea { background: var(--sea); color: var(--on-sea); }
.rbadge--pine { background: var(--pine); color: var(--on-pine); } .rbadge--butter { background: var(--butter); color: var(--on-butter); }
.rbadge--lilac { background: var(--lilac); color: var(--on-lilac); } .rbadge--coral { background: var(--coral); color: var(--on-coral); }
.rbadge--plain { background: var(--glass-2); color: var(--text); border: 1px solid var(--line-2); }

/* permission locks */
.locknote { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 16px; background: var(--well); color: var(--muted); font-size: var(--fs-2xs); font-weight: 600; }
.locknote .ico { width: 17px; height: 17px; color: var(--text); }
.noaccess { display: grid; justify-items: center; text-align: center; gap: 10px; padding: clamp(36px, 6vw, 72px) 24px; max-width: 620px; margin: 4vh auto 0; }
.noaccess__ico { width: 44px; height: 44px; padding: 10px; border-radius: 50%; background: var(--pill); color: var(--on-pill); box-sizing: content-box; }
.noaccess__title { font-size: 26px; font-weight: 700; letter-spacing: -.02em; margin-top: 6px; }
.noaccess__text { color: var(--muted); max-width: 420px; }
.noaccess__role { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 8px; font-size: var(--fs-xs); }

/* post thumbnails */
.thumb { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; background: var(--well); }

/* avatars */
.av { flex: none; border-radius: 50%; object-fit: cover; background: var(--well); display: inline-grid; place-items: center; font-weight: 700; color: #16191d; }
.av--xs { width: 22px; height: 22px; font-size: 9.5px; } .av--sm { width: 28px; height: 28px; font-size: 11px; }
.av--md { width: 36px; height: 36px; font-size: 13px; } .av--lg { width: 48px; height: 48px; font-size: 16px; }
.av--xl { width: 112px; height: 112px; font-size: 34px; }
.av--t0 { background: #f4dba8; } .av--t1 { background: #cde8de; } .av--t2 { background: #f3cdbf; } .av--t3 { background: #cfe3f1; }
.av-stack { display: inline-flex; }
.av-stack .av { box-shadow: 0 0 0 2px var(--stack-ring, var(--cream)); }
:root[data-theme="dark"] .av-stack .av { --stack-ring: #1b1e22; }
.av-stack .av + .av { margin-left: -8px; }

/* meters: the fill scales on X from the left (never width) */
.meter { display: block; height: 8px; border-radius: 999px; background: var(--well); overflow: hidden; }
.meter__fill { display: block; height: 100%; width: 100%; border-radius: inherit; background: var(--text); transform-origin: 0 50%; }
.meter__fill--pine { background: var(--pine); } .meter__fill--coral { background: var(--coral); } .meter__fill--butter { background: var(--butter); }
.meter__fill--sea { background: var(--sea); } .meter__fill--lilac { background: var(--lilac); }

/* tables */
.table-wrap { overflow-x: auto; margin: 0 -6px; }
.table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-xs); }
.table th { text-align: left; font-weight: 600; font-size: var(--fs-2xs); color: var(--muted); padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.table th button { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: inherit; }
.table th[aria-sort] button { color: var(--text); }
.table td { padding: 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background-color .15s; }
.table tbody tr:hover { background: var(--well); }
.table .r { text-align: right; }
.cell-person { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cell-person b { display: block; font-weight: 600; }
.cell-person small { display: block; color: var(--muted); font-size: var(--fs-2xs); }

.empty { display: grid; justify-items: center; gap: 6px; padding: 36px 16px; text-align: center; color: var(--muted); }
.empty .ico { width: 30px; height: 30px; opacity: .7; }
.empty__title { color: var(--text); font-weight: 600; }
.empty__text { font-size: var(--fs-xs); max-width: 320px; }
.empty .btn { margin-top: 8px; }

/* checkbox */
.check { appearance: none; width: 22px; height: 22px; flex: none; border-radius: 7px; border: 1.5px solid var(--line-2); display: inline-grid; place-items: center; cursor: pointer; margin: 0; background: var(--glass-2); }
.check:checked { background: var(--pill); border-color: transparent; }
.check:checked::after { content: ''; width: 10px; height: 5px; border-left: 2px solid var(--on-pill); border-bottom: 2px solid var(--on-pill); transform: rotate(-45deg) translate(1px, -1px); }
.check:disabled { opacity: .5; cursor: not-allowed; }

/* switch */
.switch { position: relative; width: 46px; height: 28px; flex: none; border-radius: 999px; background: var(--line-2); }
.switch::after { content: ''; position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: transform .3s var(--ease); }
.switch[aria-checked="true"] { background: var(--pine); }
.switch[aria-checked="true"]::after { transform: translateX(18px); }
.switch:disabled { opacity: .45; cursor: not-allowed; }
/* touch: the switch keeps its look but answers a 44px-tall area (::after is the knob, ::before is free) */
@media (pointer: coarse) { .switch::before { content: ''; position: absolute; inset: -8px -4px; } }

/* ── Charts ───────────────────────────────────────────────────────────── */
.chart { position: relative; outline: none; }
.chart:focus-visible { outline: 2px solid var(--text); outline-offset: 4px; border-radius: 12px; }
.chart__svg { overflow: visible; }
.chart__grid line { stroke: var(--line); stroke-dasharray: 3 4; }
.chart__grid text, .chart__x text { fill: var(--muted); font-size: 12px; font-weight: 500; }
.chart__line { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.chart__line.is-dashed { stroke-dasharray: 5 6; stroke-width: 2; }
.chart__line--ink { stroke: var(--ink); } .chart__line--coral { stroke: var(--coral); } .chart__line--pine { stroke: var(--pine); }
.chart__line--butter { stroke: #d99a1e; } .chart__line--sea { stroke: var(--sea); } .chart__line--lilac { stroke: var(--lilac); } .chart__line--muted { stroke: var(--faint); }
:root[data-theme="dark"] .chart__line--pine { stroke: #5fd0a8; } :root[data-theme="dark"] .chart__line--sea { stroke: #7ab8e8; }
.chart__stop0 { stop-color: var(--area, var(--coral)); stop-opacity: .22; } .chart__stop1 { stop-color: var(--area, var(--coral)); stop-opacity: 0; }
.chart__cross { stroke: var(--line-2); stroke-width: 1; opacity: 0; }
.chart__dot { stroke: var(--bg); stroke-width: 2.5; }
.chart__dot--ink { fill: var(--ink); } .chart__dot--coral { fill: var(--coral); } .chart__dot--pine { fill: var(--pine); }
.chart__dot--butter { fill: #d99a1e; } .chart__dot--sea { fill: var(--sea); } .chart__dot--lilac { fill: var(--lilac); } .chart__dot--muted { fill: var(--faint); }
.chart__tip {
  position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0; padding: 8px 11px; border-radius: 12px;
  background: var(--float); border: 1px solid var(--line); box-shadow: var(--shadow-pop); font-size: var(--fs-2xs); display: grid; gap: 3px; white-space: nowrap;
  transition: opacity .15s;
}
.chart__tip span { display: flex; align-items: center; gap: 6px; color: var(--muted); }
.chart__tip i { width: 8px; height: 8px; border-radius: 50%; }
.chart__tip strong { color: var(--text); margin-left: auto; padding-left: 10px; }

.bars { display: flex; align-items: stretch; gap: 8px; height: 180px; }
.bars__col { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.bars__track { flex: 1; display: flex; align-items: flex-end; border-radius: 12px; background: var(--well); overflow: hidden; }
.bars__bar { display: block; width: 100%; border-radius: 12px; min-height: 4px; }
.bars__bar--ink { background: var(--ink); opacity: .82; } .bars__bar--pine { background: var(--pine); } .bars__bar--sea { background: var(--sea); }
.bars__bar--coral { background: var(--coral); } .bars__bar--butter { background: var(--butter); } .bars__bar--lilac { background: var(--lilac); } .bars__bar--muted { background: var(--faint); }
.bars__col.is-hi .bars__bar { opacity: 1; background: var(--coral); }
.bars__lab { text-align: center; font-size: 12px; color: var(--muted); }

.donut { position: relative; width: 168px; aspect-ratio: 1; flex: none; }
.donut svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.donut__track { fill: none; stroke: var(--well); stroke-width: 16; }
.donut__arc { fill: none; stroke-width: 16; stroke-linecap: butt; }
.tone-stroke--ink { stroke: var(--ink); } .tone-stroke--coral { stroke: var(--coral); } .tone-stroke--pine { stroke: var(--pine); }
.tone-stroke--butter { stroke: var(--butter); } .tone-stroke--sea { stroke: var(--sea); } .tone-stroke--lilac { stroke: var(--lilac); } .tone-stroke--muted { stroke: var(--faint); }
.donut__mid { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.donut__mid b { font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
.donut__mid span { color: var(--muted); font-size: var(--fs-2xs); }
.spark { overflow: visible; }
.legend { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: var(--fs-2xs); color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 9px; height: 9px; border-radius: 50%; }

/* ── Overlays ─────────────────────────────────────────────────────────── */
/* the popover layer and the toast are popover="manual" — reset the UA box */
.pop-layer[popover] { position: fixed; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; background: none; overflow: visible; pointer-events: none; color: var(--text); }
.pop {
  position: fixed; pointer-events: auto; min-width: 210px; max-width: min(380px, calc(100vw - 24px)); max-height: min(72vh, 560px); overflow: auto;
  padding: 6px; border-radius: 18px; background: var(--float); box-shadow: var(--shadow-pop); border: 1px solid var(--line);
}
.pop hr { border: 0; height: 1px; background: var(--line); margin: 4px 6px; }
.menu__item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border-radius: 12px; text-align: left; font-weight: 600; font-size: var(--fs-xs); }
.menu__item .ico { width: 18px; height: 18px; }
.menu__item:hover, .menu__item:focus-visible { background: var(--well); outline: none; }
.menu__item:disabled { opacity: .5; cursor: not-allowed; background: none; }
.menu__item.is-danger { color: var(--bad); }
.menu__check { margin-left: auto; }
.menu__item .bmark, .menu__item .av { margin: -3px 0; }
.pop__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px 6px; }
.pop__title { font-weight: 700; font-size: var(--fs-sm); }
.pop__list { display: grid; gap: 2px; }
.pop__row { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 12px; text-align: left; width: 100%; }
.pop__row:hover, .pop__row:focus-visible { background: var(--well); outline: none; }
.pop__row b { font-weight: 600; font-size: var(--fs-xs); }
.pop__row small { display: block; color: var(--muted); font-size: var(--fs-2xs); }
.pop__row > span:first-child { position: relative; flex: none; }
.pop__row.is-unread > span:first-child::after { content: ''; position: absolute; top: -1px; right: -1px; width: 9px; height: 9px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 2px var(--float); }
.pop--wide { width: 360px; }

dialog { color: var(--text); }
dialog::backdrop { background: rgba(16, 18, 20, .26); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: fade .3s var(--ease); }
:root[data-theme="dark"] dialog::backdrop { background: rgba(0, 0, 0, .6); }
@keyframes fade { from { opacity: 0; } }

.modal { width: min(580px, calc(100vw - 24px)); padding: 0; border: 1px solid var(--rim); border-radius: 26px; background: var(--glass-3); box-shadow: var(--shadow-pop); }
:root:not([data-theme="dark"]) .modal, :root:not([data-theme="dark"]) .drawer, :root:not([data-theme="dark"]) .finder { background: #f6f7f4; }
.mform { padding: 22px; }
.mform__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.mform__title { font-size: 21px; font-weight: 700; letter-spacing: -.015em; }
.mform__sub { color: var(--muted); font-size: var(--fs-xs); margin-top: 4px; }
.mform__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.mform__grid:empty { display: none; }
.mform__extra { grid-column: 1 / -1; }
.mform__err { color: var(--bad); font-size: var(--fs-xs); min-height: 18px; margin-top: 10px; }
.mform__foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }
.field { display: grid; gap: 6px; min-width: 0; align-content: start; }
.field--wide { grid-column: 1 / -1; }
.field__label { font-size: var(--fs-2xs); font-weight: 600; color: var(--muted); }
.field__hint { font-size: var(--fs-2xs); color: var(--faint); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 46px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--glass-2); padding: 10px 14px; outline: none; resize: vertical;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--text); }

.drawer {
  position: fixed; margin: 0 0 0 auto; inset: 12px 12px 12px auto; height: auto; max-height: none; width: min(480px, calc(100vw - 24px));
  padding: 0; border: 1px solid var(--rim); border-radius: 28px; background: var(--glass-3); box-shadow: var(--shadow-pop); overflow: auto; overscroll-behavior: contain;
}
.drawer--wide { width: min(720px, calc(100vw - 24px)); }
.drawer__inner { position: relative; padding: 24px; display: grid; gap: 18px; align-content: start; }
.drawer__close { position: absolute; right: 18px; top: 18px; z-index: 1; }
.drawer h2 { font-size: 23px; font-weight: 700; letter-spacing: -.02em; padding-right: 52px; }

.finder { width: min(640px, calc(100vw - 24px)); margin-top: 12vh; padding: 0; border: 1px solid var(--rim); border-radius: 24px; background: var(--glass-3); box-shadow: var(--shadow-pop); }
.finder__bar { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.finder__bar input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font-size: 18px; }
.finder__bar kbd { font: inherit; font-size: 12px; color: var(--muted); padding: 3px 7px; border: 1px solid var(--line-2); border-radius: 7px; }
@media (pointer: coarse) { .finder__bar kbd { display: none; } }
.finder__list { max-height: 52vh; overflow: auto; padding: 8px; }
.finder__group { padding: 10px 10px 4px; font-size: 12.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.finder__opt { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 14px; cursor: pointer; }
.finder__opt[aria-selected="true"] { background: var(--well); }
.finder__opt b { font-weight: 600; }
.finder__opt small { display: block; color: var(--muted); font-size: var(--fs-2xs); }
.finder__opt .lead { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--well); flex: none; overflow: hidden; }
.finder__opt .lead img { width: 100%; height: 100%; object-fit: cover; }
.finder__opt .go { margin-left: auto; color: var(--muted); }

.toast {
  position: fixed; z-index: 95; inset: auto 0 24px 0; margin: 0 auto; width: fit-content; max-width: calc(100vw - 24px); height: auto; overflow: visible;
  display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 15px; border-radius: 999px; border: 0;
  background: var(--pill); color: var(--on-pill); box-shadow: var(--shadow-pop); visibility: hidden; font-weight: 600; font-size: var(--fs-xs);
}
.toast__ico { display: grid; }
.toast__undo { padding: 7px 13px; border-radius: 999px; background: var(--butter); color: #16191d; font-weight: 700; }

.feed { display: grid; gap: 4px; }
.feed__item { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--line); }
.feed__item p { font-size: var(--fs-xs); }
.feed__item a { text-decoration: underline; text-underline-offset: 2px; }
.feed__item small { display: block; color: var(--muted); font-size: var(--fs-2xs); margin-top: 2px; }
.keys { display: grid; gap: 2px; }
.keys div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.keys dd { display: flex; gap: 6px; }
kbd { font: 600 12.5px var(--font); padding: 3px 8px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--glass-2); }

/* ── Sign in ──────────────────────────────────────────────────────────── */
.signin { position: fixed; inset: 0; z-index: 40; overflow: auto; display: grid; place-items: center; padding: 28px 16px; }
.signin__panel { width: min(980px, 100%); display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 16px; }
.signin__intro { display: grid; align-content: space-between; gap: 28px; padding: 30px; border-radius: 30px; background: var(--ink); color: var(--on-ink); min-height: 520px; position: relative; overflow: hidden; }
.signin__intro .brand { font-size: 26px; }
.signin__fan { position: absolute; right: -26px; top: 18px; width: 210px; height: 200px; pointer-events: none; }
.signin__fan img { position: absolute; width: 118px; height: 148px; object-fit: cover; border-radius: 18px; box-shadow: 0 20px 40px -16px rgba(0, 0, 0, .6); border: 3px solid rgba(255, 255, 255, .9); transform-origin: 50% 100%; }
.signin__fan img:nth-child(1) { left: 0; top: 26px; } .signin__fan img:nth-child(2) { left: 44px; top: 4px; } .signin__fan img:nth-child(3) { left: 88px; top: 34px; }
.signin__intro > :not(.signin__fan) { position: relative; z-index: 1; }
.signin__intro .brand__mark { background: var(--butter); color: #16191d; }
.signin__lede { font-size: clamp(30px, 3.4vw, 44px); font-weight: 600; line-height: 1.04; letter-spacing: -.03em; }
.signin__lede em { font-style: normal; color: var(--butter); }
.signin__nets { display: flex; flex-wrap: wrap; gap: 8px; }
.signin__nets .net { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .12); color: inherit; }
:root[data-theme="dark"] .signin__nets .net { background: rgba(0, 0, 0, .06); border-color: rgba(0, 0, 0, .1); }
.signin__foot { font-size: var(--fs-2xs); opacity: .72; }
.signin__form { display: grid; align-content: start; gap: 16px; }
.signin__form h1 { font-size: 30px; font-weight: 700; letter-spacing: -.025em; }
.signin__form > p { color: var(--muted); }
.signin__fields { display: grid; gap: 12px; }
.signin__err { color: var(--bad); font-size: var(--fs-xs); min-height: 18px; }
.signin__or { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: var(--fs-2xs); font-weight: 600; }
.signin__or::before, .signin__or::after { content: ''; flex: 1; height: 1px; background: var(--line-2); }
.signin__people { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr)); gap: 8px; }
.signin__person { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 18px; background: var(--glass-2); border: 1px solid var(--rim); text-align: left; min-width: 0; }
.signin__person:hover { background: var(--glass-3); }
.signin__person span:last-child { min-width: 0; }
.signin__person b { display: block; font-size: var(--fs-xs); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.signin__person small { display: flex; align-items: center; gap: 6px; margin-top: 3px; font-size: 12.5px; color: var(--muted); }
.signin__person .rbadge { height: 21px; padding: 0 8px; font-size: 11.5px; }

/* Touch screens have no hover: a tapped control must not keep its hover tint */
@media (hover: none) {
  .tab:hover, .ibtn:hover, .btn--ghost:hover, .table tbody tr:hover, .menu__item:hover, .pop__row:hover, .signin__person:hover { background: none; }
  .btn--ghost:hover { background: var(--glass); }
  .signin__person:hover { background: var(--glass-2); }
  .btn--ink:hover { filter: none; }
  .tab:active, .ibtn:active, .pop__row:active, .menu__item:active { background: var(--well); }
}

/* ── Responsive shell ─────────────────────────────────────────────────── */
@media (max-width: 1340px) {
  .top { grid-template-columns: auto 1fr; }
  .tabs { grid-column: 1 / -1; grid-row: 2; justify-self: start; }
  .top__tools { grid-column: 2; grid-row: 1; justify-self: end; }
}
@media (max-height: 820px) and (min-width: 761px) {
  .dock__btn { width: 48px; height: 48px; }
  .dock__btn .ico { width: 21px; height: 21px; }
  :root { --dock-w: 64px; }
}
@media (max-width: 860px) {
  .signin__panel { grid-template-columns: 1fr; }
  .signin__intro { min-height: 0; }
  .signin__fan { display: none; }
}
@media (max-width: 760px) {
  .app { padding: 14px max(14px, env(safe-area-inset-right)) calc(100px + env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); }
  .top { gap: 10px 12px; margin-bottom: 18px; }
  .tabs { margin: 0 -14px; padding: 0 10px; border-radius: 0; width: calc(100% + 28px); max-width: none; }
  .tabs { -webkit-mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent); mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent); }
  .brand { font-size: 23px; gap: 10px; }
  .brand__mark { width: 44px; height: 44px; border-radius: 13px; }
  .brand__mark svg { width: 25px; height: 25px; }
  .bswitch { width: 46px; padding: 0; justify-content: center; }
  .bswitch__name, .bswitch > .ico { display: none; }
  .dock {
    left: 0; right: 0; top: auto; bottom: calc(12px + env(safe-area-inset-bottom)); margin: 0 auto; width: fit-content; height: auto;
    flex-direction: row; padding: 6px;
  }
  .dock__btn { width: 48px; height: 48px; }
  .dock__btn[data-act="today"], .dock__btn[data-route="library"], .dock__btn[data-route="channels"], .dock__btn[data-route="team"], .dock__btn[data-route="settings"], .dock__sep { display: none; } .dock__more { display: grid; }
  .dock__tip { display: none; }
  .dock__btn[aria-current="page"]::after { right: auto; left: 50%; top: auto; bottom: 3px; margin: 0 0 0 -2.5px; }
  .head { gap: 14px; }
  .head__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; width: 100%; }
  .stat { align-items: flex-start; gap: 10px; }
  .stat__value { flex-wrap: wrap; gap: 4px 8px; font-size: 19px; }
  .stat__ico { width: 40px; height: 40px; }
  .mform__grid { grid-template-columns: minmax(0, 1fr); }
  /* phones: the toast drops from the top, clear of the dock and any sticky action bar */
  .toast { inset: calc(12px + env(safe-area-inset-top)) 0 auto 0; }
  .card { padding: 16px; }
  .card.is-focus { top: 10px; left: 10px; right: 10px; max-height: calc(100dvh - 20px); }
  /* forms open as a bottom sheet: the fields scroll, the head and buttons stay put */
  .modal { width: 100%; max-width: none; margin: auto 0 0; max-height: 92dvh; border-radius: 28px 28px 0 0; border-bottom: 0; }
  .mform { display: flex; flex-direction: column; max-height: 92dvh; padding: 0; }
  .mform__head { flex: none; padding: 20px 18px 14px; margin: 0; border-bottom: 1px solid var(--line); }
  .mform__grid { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px 18px 4px; }
  .mform__err { flex: none; padding: 0 18px; margin-top: 6px; }
  .mform__err:empty { min-height: 0; margin: 0; }
  .mform__foot { flex: none; margin: 0; padding: 12px 18px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: inherit; }
  .mform__foot .btn { flex: 1; }
  .drawer__close { position: sticky; top: 14px; justify-self: end; margin: -8px -8px -48px 0; z-index: 2; background: var(--solid); }
  .drawer__inner { padding: 22px 18px calc(22px + env(safe-area-inset-bottom)); }
  .drawer::before, .modal::before { content: ''; position: absolute; left: 0; right: 0; top: 8px; margin: 0 auto; width: 40px; height: 4px; border-radius: 2px; background: var(--line-2); z-index: 3; }
  .drawer, .drawer--wide { inset: auto 0 0 0; width: 100%; max-width: none; margin: 0; max-height: 90dvh; border-radius: 28px 28px 0 0; }
  input, select, textarea, .search input { font-size: 16px; }
  .hfade { -webkit-mask-image: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 22px), transparent); mask-image: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 22px), transparent); }
  .signin { place-items: start center; }
  .signin__intro { padding: 22px; gap: 18px; border-radius: 26px; }
  .signin__lede { font-size: 28px; }
}
/* landscape phones: the side dock must fit the height */
@media (max-height: 560px) and (min-width: 761px) {
  .dock { gap: 0; padding: 5px; }
  .dock__btn { width: 42px; height: 42px; }
  .dock__btn[data-act="today"], .dock__btn[data-route="library"], .dock__btn[data-route="team"], .dock__sep { display: none; } .dock__more { display: grid; }
  :root { --dock-w: 52px; --dock-x: max(12px, env(safe-area-inset-left)); }
  .top { margin-bottom: 14px; row-gap: 8px; }
  .head { margin-bottom: 16px; }
}
@media (max-width: 760px) and (orientation: landscape) and (max-height: 500px) {
  .app { padding: 10px max(14px, env(safe-area-inset-right)) 32px calc(max(10px, env(safe-area-inset-left)) + 48px + 14px); }
  .dock { left: max(10px, env(safe-area-inset-left)); right: auto; top: 0; bottom: 0; margin: auto 0; width: auto; height: fit-content; flex-direction: column; gap: 0; padding: 4px; }
  .dock__btn { width: 42px; height: 42px; }
  .dock__btn[aria-current="page"]::after { left: auto; right: 2px; top: 50%; bottom: auto; margin: -2.5px 0 0; }
  .toast { bottom: calc(14px + env(safe-area-inset-bottom)); }
  .head__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stat__ico { display: none; }
}
@media (max-width: 374px) {
  .dock { gap: 0; padding: 4px; }
  .dock__btn { width: 44px; height: 44px; }
  .brand__name { display: none; }
}
@media (max-width: 480px) {
  .stat__ico { display: none; }
  .head__actions { margin-left: 0; width: 100%; }
  .head__actions > .btn { flex: 1; }
}
@media (pointer: coarse) {
  .ibtn, .ibtn--sm { width: 44px; height: 44px; }
  .seg__btn { min-width: 44px; padding: 13px 14px; }
  .tab, .tabs__pill > span { padding-top: 13px; padding-bottom: 13px; }
  .brand { min-height: 44px; }
  button.chip, a.chip, label.chip { min-height: 44px; min-width: 44px; padding: 0 14px; }
  .table th button { min-height: 44px; }
  .btn--sm { height: 44px; padding: 0 16px; }
  .menu__item, .pop__row { min-height: 46px; }
  .feed__item a, .table td a:not(.cell-person) { display: inline-block; padding: 12px 4px; margin: -12px -4px; }
}

/* ── Phones: bottom tab bar + More sheet ─────────────────────────────── */
.mnav, .top__search { display: none; }
@media (max-width: 760px) {
  :root { --mnav-h: calc(64px + env(safe-area-inset-bottom)); }
  .tabs, .dock { display: none !important; }
  .top__search { display: inline-grid; }
  .app { padding-bottom: calc(var(--mnav-h) + 28px); }
  .mnav {
    position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    height: var(--mnav-h); padding: 0 6px env(safe-area-inset-bottom);
    background: color-mix(in srgb, var(--float) 92%, transparent); border-top: 1px solid var(--line);
    -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%);
  }
  .mnav__item { position: relative; display: grid; justify-items: center; align-content: center; gap: 3px; min-height: 56px; color: var(--muted); font-size: 11.5px; font-weight: 600; }
  .mnav__item .ico { width: 23px; height: 23px; }
  .mnav__item[aria-current="page"], .mnav__more.is-current, .mnav__item[aria-expanded="true"] { color: var(--text); }
  .mnav__item[aria-current="page"]::before, .mnav__more.is-current::before { content: ''; position: absolute; top: 0; left: 0; right: 0; margin: 0 auto; width: 26px; height: 3px; border-radius: 0 0 3px 3px; background: var(--text); }
  .mnav__item.is-locked { opacity: .5; }
  .mnav__plus { width: 44px; height: 32px; border-radius: 12px; display: grid; place-items: center; background: var(--butter); color: #16191d; }
  .mnav__plus .ico { width: 21px; height: 21px; }
  .mnav__new { gap: 2px; }
  .mnav__count { position: absolute; top: 5px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; display: grid; place-items: center; background: var(--coral); color: var(--on-coral); font-size: 11px; font-weight: 700; box-shadow: 0 0 0 2px var(--float); }
  .mnav__count:empty { display: none; }
  .mnav__count--dot { min-width: 10px; width: 10px; height: 10px; padding: 0; top: 8px; left: calc(50% + 8px); }
  html.ib-chat-open .mnav { display: none; }
  .msheet { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .msheet__item { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 12px; border-radius: 18px; background: var(--glass-2); border: 1px solid var(--line); font-weight: 600; font-size: var(--fs-sm); }
  .msheet__item[aria-current="page"] { background: var(--pill); color: var(--on-pill); border-color: transparent; }
  .msheet__item.is-locked { color: var(--muted); }
  .msheet__item .tab-count { margin-left: auto; }
  .msheet__ico { width: 36px; height: 36px; flex: none; border-radius: 12px; display: grid; place-items: center; background: var(--well); }
  .msheet__item[aria-current="page"] .msheet__ico { background: rgba(255, 255, 255, .14); }
  .msheet__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .msheet__row .btn { padding: 0 10px; }
  /* compact page heads: a smaller title, the KPIs as a tight 2-up grid */
  .head { margin-bottom: 18px; gap: 12px; }
  .head__title { font-size: 28px; }
  .head__title br { display: none; }
  .head__title br + .word { margin-left: .26em; }
  .head__stats { gap: 10px 14px; }
  .stat__value { font-size: 18px; }
  .stat__label { font-size: 12.5px; }
}
/* landscape phones keep the side dock (the bottom bar would eat the short height) */
@media (max-width: 760px) and (orientation: landscape) and (max-height: 500px) {
  .mnav { display: none; } .dock { display: flex !important; } .tabs { display: block !important; }
  .app { padding-bottom: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .mesh i { will-change: auto; }
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
}

/* ── Shared: tab locks, post drawer, connect flow ─────────────────────── */
.tab-lock { display: inline-grid; opacity: .55; }
.tab-lock .ico { width: 14px; height: 14px; }
.tab.is-locked { color: var(--muted); }
.pd-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-right: 52px; }
.pd-when { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: var(--fs-xs); margin-top: -8px; }
.pd-when .ico { width: 17px; height: 17px; }
.pd-error { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 16px; background: color-mix(in srgb, var(--coral) 14%, transparent); color: var(--bad); font-weight: 600; font-size: var(--fs-xs); }
.pd-error .ico { width: 18px; height: 18px; margin-top: 1px; }
.pd-nets { overflow-x: auto; scrollbar-width: none; }
.pd-preview { display: grid; justify-items: center; padding: 18px; border-radius: 22px; background: var(--well); }
.pd-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pd-metrics div { padding: 12px; border-radius: 16px; background: var(--glass-2); border: 1px solid var(--line); }
.pd-metrics dt { color: var(--muted); font-size: var(--fs-2xs); }
.pd-metrics dd { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.pd-goes { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: var(--fs-2xs); }
.pd-h3 { font-size: var(--fs-sm); font-weight: 700; margin-bottom: 6px; }
.pd-revs { display: grid; gap: 2px; }
.pd-rev { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; }
.pd-rev p { font-size: var(--fs-xs); }
.pd-rev small { display: block; color: var(--muted); font-size: var(--fs-2xs); }
.pd-rev q { display: block; margin-top: 6px; padding: 9px 12px; border-radius: 14px; background: var(--well); quotes: none; }
.pd-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding-top: 6px; border-top: 1px solid var(--line); padding-top: 16px; }
.cc-nets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.cc-net { position: relative; display: grid; justify-items: center; gap: 6px; padding: 14px 6px 12px; border-radius: 18px; background: var(--glass-2); border: 1.5px solid var(--line); font-size: var(--fs-2xs); font-weight: 600; cursor: pointer; text-align: center; }
.cc-net input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.cc-net:has(input:checked) { border-color: var(--text); background: var(--glass-3); }
.cc-net:has(input:focus-visible) { outline: 2px solid var(--text); outline-offset: 2px; }
.cc-auth { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 10px 0 4px; }
.cc-arrow { color: var(--muted); }
.cc-mark { width: 46px; height: 46px; border-radius: 14px; }
.cc-mark .ico { width: 26px; height: 26px; }
.cc-scopes { display: grid; gap: 8px; margin-top: 14px; }
.cc-scopes li { display: flex; align-items: center; gap: 10px; font-size: var(--fs-xs); }
.cc-scopes .ico { width: 18px; height: 18px; color: var(--good); }
@media (max-width: 480px) { .cc-nets { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pd-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }