/* ════════════════════════════════════════════════════════════════════════
   Tranquil · Meridian for people — thin skin over the shared system
   ────────────────────────────────────────────────────────────────────────
   The REAL Meridian files (assets/meridian → /meridian/meridian.css) are
   loaded first: bundled Outfit fonts, tokens, light/dark themes and the
   mer-* component grammar — the exact bytes the Studio embeds. This file
   only overrides what makes Tranquil, Tranquil:

     1. Brand palette — Navy #26316B action, Lime #C2DB6F celebration,
        Night #101420 chrome (mapped into the same semantic slots).
     2. SOFT GEOMETRY — radius tokens go rounded (operator consoles are
        square; people-products round). One rule un-squares .mer-btn.
     3. Public-layout extensions — the LinkedIn grammar (52px global nav,
        1128px container, 225/555/300 rails, feed, posts) that no operator
        console needs. All rules compose var(--mer-*) tokens only.
   ═══════════════════════════════════════════════════════════════════════ */

:root[data-theme="light"] {
  /* ── Tranquil brand ramp (slotted into Meridian's brand vars) ── */
  --mer-c-brand-950: #101420;   /* Night — deepest ink / chrome base       */
  --mer-c-brand-900: #1C2450;   /* navy-deep                                */
  --mer-c-brand-800: #26316B;   /* Tranquil Navy — brand primary            */
  --mer-c-brand-700: #33418C;   /* hover lift                               */
  --mer-c-brand-300: #8E97C4;   /* muted on chrome                          */
  --mer-c-brand-100: #E2E5F4;   /* selected container                       */
  --mer-c-brand-50:  #EEF0F8;   /* brand tint                               */
  --mer-c-lime-brand: #C2DB6F;  /* the Tranquil mark — celebrate            */
  --mer-c-lime-300:   #D3E693;
  --mer-c-lime-100:   #EDF4D4;
  --mer-c-lime-ink:   #37410F;
  --mer-c-lime-deep:  #55631F;

  /* Action — Tranquil navy replaces console azure */
  --mer-primary:        var(--mer-c-brand-800);
  --mer-primary-hover:  var(--mer-c-brand-900);
  --mer-primary-active: var(--mer-c-brand-950);
  --mer-on-primary:     #FFFFFF;
  --mer-primary-tint:   rgba(38, 49, 107, 0.07);
  --mer-selected:       var(--mer-c-brand-100);
  --mer-on-selected:    var(--mer-c-brand-900);

  /* Chrome — night navy (covers, hero bands) replaces indigo */
  --mer-chrome:          var(--mer-c-brand-950);
  --mer-chrome-2:        var(--mer-c-brand-800);
  --mer-chrome-hover:    var(--mer-c-brand-700);
  --mer-on-chrome:       #FFFFFF;
  --mer-on-chrome-muted: var(--mer-c-brand-300);
  --mer-brand-ink:       var(--mer-c-brand-800);

  /* Execute/celebrate — lime replaces amber for the brand moments */
  --mer-execute:              var(--mer-c-lime-brand);
  --mer-execute-hover:        var(--mer-c-lime-300);
  --mer-on-execute:           var(--mer-c-lime-ink);
  --mer-execute-container:    var(--mer-c-lime-100);
  --mer-on-execute-container: var(--mer-c-lime-deep);

}

:root {
  /* Strict light mode: native controls, scrollbars and UA colours stay
     light even on devices set to dark — the platform default is light. */
  color-scheme: light;
  /* ── Radius — the Tranquil deviation: soft, human geometry.
        Meridian components read these tokens, so overriding them rounds
        every input, card, menu and modal in one move. ── */
  --mer-radius-xs:   8px;
  --mer-radius-sm:   10px;   /* controls: buttons, inputs, chips           */
  --mer-radius-md:   12px;   /* grouped controls, menus, popovers          */
  --mer-radius-lg:   14px;   /* cards, panels                              */
  --mer-radius-xl:   18px;   /* modals, sheets, hero containers            */
  --mer-radius-pill: 999px;

  /* Aliases over the real Meridian tokens (loaded before this file) */
  --mer-motion-fast: var(--mer-dur-fast, 120ms) var(--mer-ease-out, ease);

  /* ── Tranquil legacy aliases (existing component rules) ── */
  --navy: var(--mer-primary);
  --navy-deep: var(--mer-primary-hover);
  --lime: var(--mer-c-lime-brand);
  --lime-ink: var(--mer-c-lime-deep);
  /* The one active colour — the verified-badge lime. Likes, reposts,
     links, active menu items and active tabs all light up with it. */
  --tq-active: var(--mer-c-lime-brand);
  --night: var(--mer-c-brand-950);
  --ink: var(--mer-text);
  --ink-2: var(--mer-text-muted);
  --ink-3: var(--mer-text-faint);
  --canvas: var(--mer-bg);
  --card: var(--mer-surface);
  --line: var(--mer-border);
  --line-strong: var(--mer-border-strong);
  --hover: var(--mer-primary-tint);
  --danger: var(--mer-danger);
  --ok: var(--mer-success);
  --radius: var(--mer-radius-lg);
  --shadow: var(--mer-shadow-1);
  --font: var(--mer-font-ui, "Outfit", -apple-system, "Segoe UI", Roboto, sans-serif);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.45;
  color: var(--mer-text);
  background: var(--mer-bg);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--tq-active, var(--mer-c-lime-deep)); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: inherit; }
input, textarea, select { font-family: inherit; font-size: 16px; color: var(--mer-text); }
:focus-visible { outline: 2px solid var(--mer-primary); outline-offset: 2px; }

/* Meridian components go soft here — .mer-btn is the one component that
   hardcodes square corners; every other mer-* rule reads the radius tokens. */
.mer-btn { border-radius: var(--mer-radius-sm); }

/* ─── Global nav (52px, sticky, white) ────────────────────────────────── */

.gnav {
  position: sticky; top: 0; z-index: 60;
  background: var(--mer-surface);
  border-bottom: 1px solid var(--mer-border);
}
.gnav-inner {
  max-width: 1128px; margin: 0 auto; padding: 0 16px;
  height: 52px; display: flex; align-items: center; gap: 8px;
}
.brand { display: flex; align-items: center; gap: 8px; margin-right: 4px; text-decoration: none; }


/* ── The Tranquil brand ────────────────────────────────────────────────
   The REAL wordmark artwork (transparent PNG at /assets/brand/) — height
   set inline by TQ_LOGO(px); the round mark for square spots. */
.tq-logo { display: inline-block; width: auto; user-select: none; }
.tq-mark { display: inline-block; border-radius: 50%; user-select: none; }

.gsearch { position: relative; flex: 0 1 280px; }
.gsearch input {
  width: 100%; height: 34px; border: 1px solid transparent; border-radius: var(--mer-radius-sm);
  background: var(--mer-surface-2); padding: 0 12px 0 34px; outline: none;
  transition: background var(--mer-motion-fast), box-shadow var(--mer-motion-fast);
}
.gsearch input:focus { background: var(--mer-surface); box-shadow: 0 0 0 1.5px var(--mer-primary) inset; }
.gsearch .icon { position: absolute; left: 10px; top: 8px; width: 18px; height: 18px; color: var(--mer-text-faint); }

.gnav-items { display: flex; align-items: center; margin-left: auto; }
.gnav-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; min-width: 76px; height: 52px; cursor: pointer; position: relative;
  color: var(--mer-text-muted); background: none; border: none; padding: 0 6px;
}
.gnav-item .icon { width: 22px; height: 22px; }
.gnav-item .lbl { font-size: 11px; line-height: 1; }
.gnav-item:hover { color: var(--mer-text); }
.gnav-item.active { color: var(--tq-active); }
.gnav-item.active::after {
  content: ""; position: absolute; left: 8px; right: 8px; bottom: 0;
  height: 2.5px; background: var(--tq-active); border-radius: var(--mer-radius-pill);
}
.gnav-item .avatar { width: 24px; height: 24px; font-size: 11px; }
.gnav-sep { width: 1px; height: 30px; background: var(--mer-border); margin: 0 8px; }

/* ─── Page scaffold: 3 columns ────────────────────────────────────────── */

.page { max-width: 1224px; margin: 0 auto; padding: 24px 20px 48px; }
.page.wide { max-width: 1300px; }
/* Mobile overflow armour — nothing inside a column may force the page
   wider than the viewport (the pan-and-collapse failure on phones). */
html, body { overflow-x: clip; }
#page, .page { overflow-x: clip; }
.cols > *, .card, .card-pad { min-width: 0; }
.card img, .card video, .card canvas { max-width: 100%; }
.cols { display: grid; grid-template-columns: 222px minmax(0, 1fr) 296px; gap: 28px; align-items: start; }
.cols.two { grid-template-columns: 225px minmax(0, 1fr); align-items: start; }
.cols.tworight { grid-template-columns: minmax(0, 1fr) 312px; align-items: start; }
.cols.one { grid-template-columns: minmax(0, 1fr); }
/* The feed is the only thing that scrolls — rails hold still (sticky under
   the 52px global nav) while the posts column runs as long as it likes. */
.rail-left, .rail-right { position: sticky; top: 68px; max-height: calc(100vh - 84px); overflow-y: auto;
  overscroll-behavior: contain; scrollbar-width: none; }
.rail-left::-webkit-scrollbar, .rail-right::-webkit-scrollbar { display: none; }
@media (max-width: 1024px) { .cols, .cols.two { grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; } .rail-left { display: none; } }
@media (max-width: 768px) { .cols, .cols.two { grid-template-columns: minmax(0, 1fr); } .rail-right { display: none; } }

/* Full sections (discover · communities · corner · library …): one broad
   surface, no rails — with a quiet way back to the feed. */
.page-back { margin-bottom: 14px; }
.page-back-btn { display: inline-flex; align-items: center; gap: 7px; border: none; background: none;
  cursor: pointer; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--mer-text-muted);
  padding: 7px 12px 7px 8px; border-radius: var(--mer-radius-pill); }
.page-back-btn:hover { background: var(--mer-primary-tint); color: var(--mer-text); }
.page-back-btn svg { width: 17px; height: 17px; }

/* ─── Cards ───────────────────────────────────────────────────────────── */

.card {
  background: var(--mer-surface); border-radius: var(--mer-radius-lg);
  box-shadow: var(--mer-shadow-1); margin-bottom: 16px; overflow: hidden;
}
.card-pad { padding: 16px; }
.card h3 { margin: 0 0 4px; font-size: 15px; font-weight: 600; }
.card .sub { color: var(--mer-text-muted); font-size: 12px; }
.hairline { border: none; border-top: 1px solid var(--mer-border); margin: 0; }

/* Profile card (left rail) */
.pcard-cover { height: 58px; background: linear-gradient(100deg, var(--mer-chrome-2) 0%, var(--mer-c-brand-900) 60%, var(--mer-c-brand-700) 100%); position: relative; }
.pcard-cover::after {
  content: ""; position: absolute; right: -18px; top: -30px; width: 110px; height: 110px;
  border-radius: 50%; background: var(--lime); opacity: 0.28;
}
.pcard-avatar { margin: -34px auto 0; position: relative; z-index: 1; }
.pcard-body { padding: 8px 16px 12px; text-align: center; }
.pcard-name { font-weight: 600; font-size: 16px; }
.pcard-name:hover { text-decoration: underline; cursor: pointer; }
.pcard-headline { color: var(--mer-text-muted); font-size: 12px; margin-top: 2px; }
.pcard-stats { padding: 8px 12px; }
.pstat { display: flex; justify-content: space-between; padding: 4px 6px; font-size: 12px; border-radius: var(--mer-radius-sm); }
.pstat:hover { background: var(--mer-primary-tint); }
.pstat .k { color: var(--mer-text-muted); }
.pstat .v { color: var(--mer-primary); font-weight: 600; }

/* Avatars — deterministic hue from the name */
.avatar {
  width: 48px; height: 48px; border-radius: 50%; flex: none;
  display: grid; place-items: center; color: #fff; font-weight: 600;
  font-size: 18px; background: var(--mer-primary); border: 2px solid var(--mer-surface);
  user-select: none;
}
.avatar.sm { width: 32px; height: 32px; font-size: 13px; border-width: 1px; }
.avatar.lg { width: 68px; height: 68px; font-size: 26px; border-width: 3px; }
.avatar.square { border-radius: var(--mer-radius-sm); }

/* ─── Buttons — Meridian grammar, soft geometry ───────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 34px; padding: 0 16px; border-radius: var(--mer-radius-sm);
  border: 1px solid transparent; font-weight: 600; font-size: 14px;
  cursor: pointer; background: none; white-space: nowrap;
  transition: background var(--mer-motion-fast), border-color var(--mer-motion-fast), color var(--mer-motion-fast);
}
.btn-primary { background: var(--mer-primary); color: var(--mer-on-primary); border-color: var(--mer-primary); }
.btn-primary:hover { background: var(--mer-primary-hover); border-color: var(--mer-primary-hover); }
.btn-primary:active { background: var(--mer-primary-active); }
.btn-accent { background: var(--mer-execute); color: var(--mer-on-execute); border-color: var(--mer-execute); }
.btn-accent:hover { background: var(--mer-execute-hover); border-color: var(--mer-execute-hover); }
.btn-outline { border-color: var(--mer-primary); color: var(--mer-primary); }
.btn-outline:hover { background: var(--mer-primary-tint); box-shadow: 0 0 0 1px var(--mer-primary) inset; }
.btn-ghost { color: var(--mer-text-muted); }
.btn-ghost:hover { background: var(--mer-primary-tint); color: var(--mer-text); }
.btn-danger { background: var(--mer-danger); color: #fff; border-color: var(--mer-danger); }
.btn-sm { height: 27px; padding: 0 12px; font-size: 12px; border-radius: 8px; }
.btn[disabled] { opacity: 0.45; cursor: default; pointer-events: none; }
.btn-block { width: 100%; }
.btn-pill { border-radius: var(--mer-radius-pill); }

/* ─── Composer ────────────────────────────────────────────────────────── */

.composer { display: flex; gap: 10px; padding: 12px 16px 8px; }
.composer .start {
  flex: 1; text-align: left; border: 1px solid var(--mer-border-strong); border-radius: var(--mer-radius-pill);
  height: 44px; padding: 0 16px; background: none; color: var(--mer-text-muted);
  font-weight: 600; cursor: pointer; font-size: 14px;
  transition: background var(--mer-motion-fast);
}
.composer .start:hover { background: var(--mer-primary-tint); }
.composer-form { padding: 4px 16px 12px; display: none; }
.composer-form.open { display: block; }
/* Every writing surface in the composer, not just the textarea.
   Poll options, report titles, periods and indicator cells are all
   plain inputs; styling only the textarea left them as raw browser
   defaults sitting directly beneath a styled one, which is why the
   poll and report composers read as unfinished. */
.composer-form textarea,
.composer-form input[type="text"],
.composer-form input[type="number"],
.composer-form input[type="datetime-local"],
.composer-form input:not([type]),
.composer-form select {
  width: 100%; border: 1px solid var(--mer-border-strong); border-radius: var(--mer-radius-md);
  padding: 10px 12px; outline: none; font: inherit; color: inherit;
  background: var(--mer-surface, #fff);
  transition: border-color var(--mer-motion-fast), box-shadow var(--mer-motion-fast);
}
.composer-form textarea { min-height: 88px; resize: vertical; }
.composer-form input[type="text"],
.composer-form input[type="datetime-local"],
.composer-form input:not([type]),
.composer-form select { padding: 9px 12px; }
.composer-form textarea:focus,
.composer-form input:focus,
.composer-form select:focus { border-color: var(--mer-primary); box-shadow: 0 0 0 1px var(--mer-primary); }

/* A removable row — poll option, report indicator. The remove control
   is held at a fixed width so the inputs above and below stay aligned
   whether or not a row can be removed (the first two poll options
   cannot: a poll needs a choice to be a poll). */
.crow { display: flex; gap: 6px; align-items: center; }
.crow > input { flex: 1; min-width: 0; }
.crow-x { flex: 0 0 32px; width: 32px; height: 32px; display: grid; place-items: center;
  border: 0; background: transparent; border-radius: 8px; cursor: pointer;
  color: var(--mer-text-faint); }
.crow-x:hover { background: var(--mer-surface-2, #eef1f6); color: var(--mer-text); }
.crow-x[hidden] { visibility: hidden; display: grid; }
.composer-hint { color: var(--mer-text-faint); font-size: 11.5px; margin-top: 6px; }
.composer-actions { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.composer-note { color: var(--mer-text-faint); font-size: 11px; margin-right: auto; }

/* ─── Post cards ──────────────────────────────────────────────────────── */

/* The mobile feed grammar: posts are flat — no box, no shadow — with a
   hairline separator between them, exactly like the Android/iOS feed. */
.post-flat {
  border: 0; border-radius: 0; box-shadow: none; margin: 0;
  border-bottom: 1px solid var(--mer-border, #e3e6ee);
  background: transparent;
}
.post-flat:first-child { border-top-left-radius: 12px; border-top-right-radius: 12px; }
.post-flat .post-actions { padding: 2px 14px 8px; }
.post-flat .pact { flex: 0 1 auto; }

.post-head { display: flex; gap: 10px; padding: 11px 15px 0; }
.post-head .avatar { width: 44px; height: 44px; font-size: 16px; }
.post-who { min-width: 0; }
.post-name { font-weight: 600; font-size: 14px; }
.post-name:hover { color: var(--mer-primary); text-decoration: underline; cursor: pointer; }
.post-meta { color: var(--mer-text-muted); font-size: 12px; }
.post-meta .dot::before { content: " · "; }
.post-community { color: var(--mer-primary); font-weight: 600; cursor: pointer; }
.post-community:hover { text-decoration: underline; }
.post-body { padding: 6px 15px 4px; white-space: pre-wrap; word-wrap: break-word; font-size: 14px; }
.post-title-line { cursor: pointer; }
.post-title-line:hover { text-decoration: underline; text-underline-offset: 3px; }
/* Long posts clamp in the feed and open fully on the detail page. */
.post-body.clamp { max-height: 216px; overflow: hidden; position: relative; }
.post-body.clamp::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 56px;
  background: linear-gradient(180deg, transparent, var(--mer-surface)); }
.read-more { display: block; border: none; background: none; cursor: pointer; font: inherit;
  font-weight: 700; font-size: 13px; color: var(--mer-primary); padding: 2px 15px 6px; text-align: left; }
.read-more:hover { text-decoration: underline; }
/* The detail page: a reading column — the full body, room to breathe. */
.post-detail-col { max-width: 780px; margin: 0 auto; }
.post-detail .post-body { font-size: 16px; line-height: 1.65; }
.post-detail .post-body.clamp { max-height: none; }
.post-detail .comments { display: block; }
.post-counts { display: flex; align-items: center; gap: 8px; color: var(--mer-text-muted); font-size: 12px; padding: 6px 15px; }
.post-counts .spacer { margin-left: auto; }
.post-counts [data-rsum] { display: inline-flex; align-items: center; }
.post-counts [data-csum]:empty { display: none; }

/* Colored reaction summary bubbles (overlapping, LinkedIn-grammar). */
.rsum-chips { display: inline-flex; align-items: center; }
.rchip { width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  color: #fff; border: 1.5px solid var(--mer-surface); margin-left: -6px; }
.rchip:first-child { margin-left: 0; }
.rchip svg { width: 12px; height: 12px; }
.rchip--uplift { background: var(--mer-primary); }
.rchip--celebrate { background: #d99a1f; }
.rchip--support { background: #e0457a; }
.rchip--insight { background: #7c5cd6; }
.rsum-n { margin-left: 6px; font-weight: 600; }

/* Post actions — X's spacing grammar.

   The row used to stretch each action to `flex:1` with a full-width pill
   hover, which pushed the glyphs to the far edges of the card and made
   the hover target look like a button bar rather than a set of icons.
   Here the actions keep their intrinsic width and the row spreads them,
   so the icon sits next to its own count instead of floating in the
   middle of a stretched cell. Hover tints a circle behind the GLYPH
   only — the count is a label, not part of the target. */
.post-actions {
  display: flex; align-items: center;
  justify-content: space-between;
  gap: 0; padding: 2px 14px 8px;
  max-width: 460px;
}
.pact {
  flex: 0 1 auto; display: inline-flex; align-items: center; justify-content: flex-start;
  gap: 3px; min-width: 0;
  height: 34px; padding: 0; border: none; background: none;
  color: var(--mer-text-muted);
  font-weight: 400; font-size: 13px; cursor: pointer; position: relative;
  white-space: nowrap;
  transition: color var(--mer-motion-fast);
}
/* The tinted circle rides the glyph, sized larger than the icon so the
   target stays comfortable (34px) without widening the row. */
.pact-ic {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 32px; height: 32px; margin: 0 -6px 0 -7px; border-radius: 50%;
  transition: background var(--mer-motion-fast), color var(--mer-motion-fast);
}
.pact:hover { background: none; }
.pact:hover .pact-ic { background: var(--mer-primary-tint); }
.pact.reacted { color: var(--tq-active); }
.pact-ic svg { width: 18.5px; height: 18.5px; }
.pact-lb {
  overflow: hidden; text-overflow: ellipsis; min-width: 0;
  font-variant-numeric: tabular-nums; line-height: 1;
}
/* An action with no count keeps no empty label box, so share and the
   others align on the same optical rhythm as the counted ones. */
.pact-lb:empty { display: none; }
.react-btn.r-uplift { color: var(--tq-active); }
.react-btn.r-celebrate { color: #c98a10; }
.react-btn.r-support { color: #d63a70; }
.react-btn.r-insight { color: #6f4fd0; }

/* Reaction picker — a clean popover of labelled, colored icons. */
.rpick {
  position: absolute; bottom: 46px; left: 0; background: var(--mer-surface);
  border: 1px solid var(--mer-border); border-radius: var(--mer-radius-pill); box-shadow: var(--mer-shadow-2);
  padding: 6px 8px; display: none; gap: 2px; z-index: 10;
}
.pact:hover .rpick, .rpick:hover, .react-btn.show .rpick { display: flex; animation: rpick-in .14s ease; }
@keyframes rpick-in { from { opacity: 0; transform: translateY(6px) scale(.96); } to { opacity: 1; transform: none; } }
.rpick-btn { display: flex; flex-direction: column; align-items: center; gap: 2px;
  border: none; background: none; cursor: pointer; padding: 5px 7px; border-radius: var(--mer-radius-sm); }
.rpick-btn:hover { background: var(--mer-surface-2); }
.rpick-ic { display: inline-flex; transition: transform 0.1s ease; }
.rpick-ic svg { width: 24px; height: 24px; }
.rpick-btn:hover .rpick-ic { transform: scale(1.18) translateY(-2px); }
.rpick-lb { font-size: 10.5px; font-weight: 600; color: var(--mer-text-muted); }
.rpick-btn:hover .rpick-lb { color: var(--mer-text); }
.rpick-btn.r-uplift .rpick-ic { color: var(--mer-primary); }
.rpick-btn.r-celebrate .rpick-ic { color: #d99a1f; }
.rpick-btn.r-support .rpick-ic { color: #e0457a; }
.rpick-btn.r-insight .rpick-ic { color: #7c5cd6; }

/* Impressions (X-style view counter). */
.post-views { display: inline-flex; align-items: center; gap: 4px; color: var(--mer-text-faint); font-variant-numeric: tabular-nums; }
.post-views svg { width: 15px; height: 15px; }

/* Post header actions: Follow + a ··· overflow menu (copy link / report). */
.post-head-acts { margin-left: auto; display: flex; align-items: center; gap: 6px; position: relative; flex: none; }
.post-x { border: none; background: none; cursor: pointer; color: var(--mer-text-muted); width: 30px; height: 30px;
  border-radius: 50%; display: inline-grid; place-items: center; }
.post-x:hover { background: var(--mer-primary-tint); color: var(--mer-text); }
.post-x svg { width: 20px; height: 20px; }
.post-menu { position: absolute; top: 34px; right: 0; z-index: 20; min-width: 172px; background: var(--mer-surface);
  border: 1px solid var(--mer-border); border-radius: var(--mer-radius-md); box-shadow: var(--mer-shadow-2); padding: 5px; }
.post-menu[hidden] { display: none; }
.post-menu-i { display: flex; align-items: center; gap: 9px; width: 100%; border: none; background: none; cursor: pointer;
  font: inherit; font-size: 13.5px; color: var(--mer-text); padding: 8px 10px; border-radius: var(--mer-radius-sm); text-align: left; }
.post-menu-i:hover { background: var(--mer-primary-tint); }
.post-menu-i svg { width: 16px; height: 16px; flex: none; color: var(--mer-text-muted); }
.post-menu-i.danger, .post-menu-i.danger svg { color: var(--mer-danger); }
/* Divides "what I can do with this post" from "less of this, please" —
   the two halves of the menu are different in kind. */
.post-menu-sep { height: 1px; margin: 5px 0; background: var(--mer-border, #e3e6ee); }

/* Right rail: trending posts + events. */
.trend-item, .event-item { align-items: flex-start; }
.trend-rank { flex: 0 0 22px; height: 22px; margin-top: 1px; border-radius: 50%;
  background: var(--mer-primary-tint); color: var(--mer-primary);
  font-size: 11.5px; font-weight: 800; display: grid; place-items: center; font-variant-numeric: tabular-nums; }
.trend-item:hover .trend-rank { background: var(--mer-primary); color: #fff; }
.trend-item .t { line-height: 1.35; }
.event-ic { flex: 0 0 34px; height: 34px; border-radius: var(--mer-radius-sm); background: var(--mer-primary-tint);
  color: var(--mer-primary); display: grid; place-items: center; }
.event-ic svg { width: 18px; height: 18px; }
.event-ic.live { background: var(--mer-execute-container); color: var(--mer-on-execute-container); }

/* Announcements banner — a branded promo card in the right rail: square
   geometry, generous height, band on top. */
.announce { overflow: hidden; border-radius: 0; }
.announce-band { display: flex; align-items: center; gap: 8px; padding: 12px 16px; color: #fff;
  background: linear-gradient(135deg, var(--mer-primary), #3c4ea0);
  font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.announce-band svg { width: 16px; height: 16px; }
.announce-ic { display: inline-flex; }
.announce-body { padding: 18px 16px 20px; }
.announce-title { font-weight: 700; font-size: 16.5px; line-height: 1.4; margin-bottom: 7px; }
.announce-text { color: var(--mer-text-muted); font-size: 13.5px; line-height: 1.6; margin-bottom: 16px; }

/* Comments — threaded: avatars on every row, replies nested one level. */
.comments { padding: 4px 16px 12px; }
.comment { display: flex; gap: 8px; margin-top: 10px; }
.comment-bubble { background: var(--mer-surface-2); border-radius: 4px 14px 14px 14px; padding: 7px 12px; min-width: 0; display: inline-block; max-width: 100%; }
.comment-bubble .who { font-weight: 600; font-size: 12px; }
.comment-bubble .txt { font-size: 13px; word-wrap: break-word; }
.comment-acts { display: flex; align-items: center; gap: 12px; padding: 3px 4px 0; color: var(--mer-text-faint); font-size: 11.5px; }
/* "Author" beside a commenter's name — they wrote the post being
   discussed. Quiet by design: it is a fact about the thread, not a
   status, so it must not compete with the name it qualifies. */
.comment-op { margin-left: 6px; padding: 1px 6px; border-radius: 999px;
  background: var(--mer-surface-2, #eef1f6); color: var(--mer-text-faint);
  font-size: 10.5px; font-weight: 600; letter-spacing: .01em; vertical-align: 1px; }
.comment-edit { margin-top: 4px; }
.comment-edit textarea { width: 100%; resize: vertical; font: inherit; }
.comment-edit-acts { display: flex; gap: 6px; margin-top: 6px; }
.comment-reply { border: none; background: none; cursor: pointer; font: inherit; font-size: 11.5px;
  font-weight: 700; color: var(--mer-text-muted); padding: 0; }
.comment-reply:hover { color: var(--mer-primary); text-decoration: underline; }
.comment-kids { border-left: 2px solid var(--mer-border); margin: 2px 0 0 14px; padding-left: 10px; }
.comment-kids:empty { display: none; }
.comment-kids .comment .avatar { width: 26px; height: 26px; font-size: 11px; }
.reply-tag { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--mer-text-muted);
  padding: 0 2px 6px; }
.reply-tag button { border: none; background: none; cursor: pointer; color: var(--mer-text-faint); display: inline-grid; place-items: center; }
.reply-tag button svg { width: 13px; height: 13px; }
.reply-tag button:hover { color: var(--mer-danger); }
.comment-form { display: block; margin-top: 10px; }
.comment-form-row { display: flex; gap: 8px; }
.comment-form input {
  flex: 1; height: 34px; border: 1px solid var(--mer-border-strong); border-radius: var(--mer-radius-pill);
  padding: 0 14px; outline: none;
  transition: border-color var(--mer-motion-fast), box-shadow var(--mer-motion-fast);
}
.comment-form input:focus { border-color: var(--mer-primary); box-shadow: 0 0 0 1px var(--mer-primary); }

/* ─── Rail lists ──────────────────────────────────────────────────────── */

.rail-item { display: flex; align-items: center; gap: 10px; padding: 8px 16px; }
button.rail-item { width: 100%; border: 0; background: none; font: inherit; color: inherit; text-align: left; }
.rail-item:hover { background: var(--mer-primary-tint); cursor: pointer; }
.rail-item .t { font-weight: 600; font-size: 13px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-item .s { color: var(--mer-text-muted); font-size: 11.5px; }
.rail-more { display: block; text-align: center; padding: 10px; color: var(--mer-text-muted); font-weight: 600; font-size: 13px; border-top: 1px solid var(--mer-border); cursor: pointer; }
.rail-more:hover { background: var(--mer-primary-tint); text-decoration: none; }
.foot { color: var(--mer-text-faint); font-size: 11px; text-align: left; padding: 16px 6px 8px; line-height: 1.8; }
.foot a { color: var(--mer-text-faint); margin: 0 10px 0 0; }
.foot a:hover { color: var(--mer-text-muted); text-decoration: underline; }

/* ─── Directory grid (communities) ────────────────────────────────────── */

.dir-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.dir-card { text-align: center; padding: 0 0 16px; }
.dir-cover { height: 54px; background: linear-gradient(100deg, var(--mer-chrome-2), var(--mer-c-brand-700)); }
.dir-card .avatar { margin: -26px auto 6px; }
.dir-name { font-weight: 600; font-size: 15px; padding: 0 12px; }
.dir-type { color: var(--mer-text-muted); font-size: 12px; margin: 2px 0 4px; }
.dir-purpose { color: var(--mer-text-muted); font-size: 12px; padding: 0 16px; min-height: 32px;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dir-card .btn { margin-top: 10px; }

/* Badges — Meridian chip grammar, pill silhouette */
.badge {
  display: inline-block; font-size: 11px; font-weight: 600; border-radius: var(--mer-radius-pill);
  padding: 2px 10px; background: var(--mer-surface-3); color: var(--mer-text-muted);
}
.badge.lime { background: var(--mer-execute-container); color: var(--mer-on-execute-container); }
.badge.navy { background: var(--mer-selected); color: var(--mer-on-selected); }
.badge.warn { background: var(--mer-warning-bg); color: var(--mer-warning-text); }
.badge.ok   { background: var(--mer-success-bg); color: var(--mer-c-success-strong); }
.badge.err  { background: var(--mer-danger-bg); color: var(--mer-c-danger-strong); }
.badge svg { width: 13px; height: 13px; vertical-align: -2px; margin-right: 3px; }

/* ─── Tables (business shell) ─────────────────────────────────────────── */

.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th { text-align: left; color: var(--mer-text-muted); font-weight: 600; font-size: 12px; padding: 10px 16px; border-bottom: 1px solid var(--mer-border); }
.tbl td { padding: 10px 16px; border-bottom: 1px solid var(--mer-border); }
.tbl tr:last-child td { border-bottom: none; }
.tbl tr:hover td { background: var(--mer-primary-tint); }

/* Stat tiles (business overview) */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; margin-bottom: 16px; }
.tile { background: var(--mer-surface); border-radius: var(--mer-radius-lg); box-shadow: var(--mer-shadow-1); padding: 14px 16px; }
.tile .k { color: var(--mer-text-muted); font-size: 12px; }
.tile .v { font-size: 24px; font-weight: 700; color: var(--mer-primary); margin-top: 2px; }
.tile .v small { font-size: 12px; color: var(--mer-text-muted); font-weight: 500; }

/* Module grid */
.mods { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; padding: 16px; }
.mod { border: 1px solid var(--mer-border); border-radius: var(--mer-radius-md); padding: 12px; }
.mod .name { font-weight: 600; font-size: 13px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.mod .desc { color: var(--mer-text-muted); font-size: 12px; margin: 4px 0 8px; }

/* ─── Empty states, alerts, modal ─────────────────────────────────────── */

.empty { text-align: center; padding: 36px 20px; color: var(--mer-text-muted); }
.empty .big { margin-bottom: 10px; line-height: 0; color: var(--mer-text-faint); }
.empty .big svg { width: 46px; height: 46px; stroke-width: 1.5; }
.alert { border-radius: var(--mer-radius-sm); padding: 10px 14px; font-size: 13px; margin: 8px 0; }
.alert.err { background: var(--mer-danger-bg); color: var(--mer-c-danger-strong); }
.alert.ok { background: var(--mer-success-bg); color: var(--mer-c-success-strong); }
.alert.info { background: var(--mer-info-bg); color: var(--mer-info); }

.modal-back {
  position: fixed; inset: 0; background: var(--mer-overlay); z-index: 100;
  display: grid; place-items: center; padding: 16px;
}
.modal {
  background: var(--mer-surface); border-radius: var(--mer-radius-xl); width: 100%; max-width: 560px;
  max-height: 90vh; overflow: auto; box-shadow: var(--mer-shadow-3);
}
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid var(--mer-border); }
.modal-head h2 { margin: 0; font-size: 17px; }
.modal-x { border: none; background: none; cursor: pointer; color: var(--mer-text-muted); border-radius: 50%; width: 32px; height: 32px; display: inline-grid; place-items: center; }
.modal-x svg { width: 20px; height: 20px; }
.modal-x:hover { background: var(--mer-primary-tint); }
.modal-body { padding: 16px 20px; }
.modal-foot { padding: 12px 20px 16px; display: flex; justify-content: flex-end; gap: 8px; }

.field { margin-bottom: 12px; }
.field label { display: block; font-size: 12px; font-weight: 600; color: var(--mer-text-muted); margin-bottom: 4px; }
.field input, .field select, .field textarea {
  width: 100%; height: 40px; border: 1px solid var(--mer-border-strong); border-radius: var(--mer-radius-sm);
  padding: 0 12px; outline: none; background: var(--mer-surface);
  transition: border-color var(--mer-motion-fast), box-shadow var(--mer-motion-fast);
}
.field textarea { height: auto; min-height: 70px; padding: 9px 12px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--mer-primary); box-shadow: 0 0 0 1px var(--mer-primary); }
.field .hint { font-size: 11px; color: var(--mer-text-faint); margin-top: 3px; }
.field.check { display: flex; align-items: center; gap: 8px; }
.field.check input { width: auto; height: auto; }
.field.check label { margin: 0; }

/* ═══ Sign-in — the Meridian platform login, adopted whole ═════════════
   Same multi-step grammar as the Syneratix Studio door (email → password
   | otp | forgot | signup, inline errors, options card, footer) — soft
   Tranquil geometry instead of the operator console's square controls. */

.login-viewport {
  min-height: 100vh; width: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--mer-space-4); padding: var(--mer-space-8) var(--mer-space-6);
  background: var(--mer-bg); /* flat platform canvas — no gradients */
}
.login-card {
  background: var(--mer-surface);
  border: 1px solid var(--mer-border);
  border-radius: var(--mer-radius-xl);
  box-shadow: var(--mer-shadow-3);
  overflow: hidden; width: 100%; max-width: 440px;
}
.login-card-body { padding: 40px 40px 36px; }

.login-brand-row {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-bottom: 28px;
}
.login-brand-row .brand-mark { width: 40px; height: 40px; border-radius: 11px; }
.login-brand-row .brand-mark span { font-size: 22px; }
.login-brand-row .brand-name { font-size: 24px; }

.login-title {
  font-size: 24px; font-weight: 600; color: var(--mer-text);
  letter-spacing: -0.01em; margin: 0 0 8px; line-height: 1.25;
}
.login-subtitle { font-size: 14px; color: var(--mer-text-muted); margin: 0 0 20px; line-height: 1.45; }

.login-field { margin-bottom: 14px; }
.login-input {
  width: 100%; height: 47px; padding: 0 14px; font-size: 16px;
  background: var(--mer-surface); color: var(--mer-text);
  border: 1px solid var(--mer-border-strong);
  border-bottom: 2px solid var(--mer-text);
  border-radius: var(--mer-radius-sm);
  transition: border-color var(--mer-motion-fast), box-shadow var(--mer-motion-fast);
}
.login-input:hover { border-color: var(--mer-text-muted); }
.login-input:focus {
  outline: none;
  border-color: var(--mer-primary);
  border-bottom-color: var(--mer-primary);
  box-shadow: 0 0 0 1px var(--mer-primary);
}
.login-input::placeholder { color: var(--mer-text-faint); }

/* OTP code input */
.login-otp {
  font-family: var(--mer-font-mono); font-size: 25px; font-weight: 600;
  letter-spacing: 0.5em; text-align: center; height: 61px;
}

.login-error { color: var(--mer-danger); font-size: 12px; min-height: 16px; margin: 0 0 10px; }
.login-note  { color: var(--mer-c-success-strong); font-size: 12px; min-height: 16px; margin: 0 0 10px; }

.login-help-link { margin-bottom: 20px; }
.login-help-link a { font-size: 13px; color: var(--mer-primary); font-weight: 500; cursor: pointer; }
.login-help-link.secondary { margin-top: -12px; }

.login-btn-next {
  width: 100%; height: 47px; font-size: 16px; font-weight: 600;
  border-radius: var(--mer-radius-sm);
  background: var(--mer-primary); color: var(--mer-on-primary);
  border: 1px solid var(--mer-primary); cursor: pointer;
  transition: background var(--mer-motion-fast);
}
.login-btn-next:hover { background: var(--mer-primary-hover); border-color: var(--mer-primary-hover); }
.login-btn-next[disabled] { opacity: 0.55; cursor: default; }

.login-back-row { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.login-back-btn {
  background: transparent; color: var(--mer-text-muted);
  width: 28px; height: 28px; border: 0; border-radius: var(--mer-radius-sm); cursor: pointer;
  display: grid; place-items: center;
}
.login-back-btn:hover { background: var(--mer-surface-3); color: var(--mer-text); }
.login-user-chip {
  background: var(--mer-surface-3); border: 1px solid var(--mer-border);
  padding: 4px 12px; border-radius: var(--mer-radius-pill);
  font-size: 12px; color: var(--mer-text); max-width: 280px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Password field with visibility eye */
.login-pw-wrap { position: relative; }
.login-pw-wrap .login-input { padding-right: 44px; }
.login-pw-eye {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  border: none; background: none; cursor: pointer; color: var(--mer-text-faint);
  width: 32px; height: 32px; border-radius: var(--mer-radius-sm);
  display: grid; place-items: center;
}
.login-pw-eye:hover { color: var(--mer-text); background: var(--mer-surface-3); }

/* Options card (passkey / email OTP) — the detached Meridian card */
.login-options-card {
  background: var(--mer-surface); border: 1px solid var(--mer-border);
  border-radius: var(--mer-radius-lg); box-shadow: var(--mer-shadow-1);
  width: 100%; max-width: 440px; overflow: hidden;
}
.login-option-row {
  background: transparent; color: var(--mer-text);
  padding: 14px 18px; gap: 14px; border: 0; width: 100%;
  display: flex; align-items: center; cursor: pointer; text-align: left;
  transition: background var(--mer-motion-fast);
}
.login-option-row:hover { background: var(--mer-surface-3); }
.login-option-icon { color: var(--mer-text-muted); flex-shrink: 0; width: 20px; height: 20px; }
.login-option-text { display: flex; flex-direction: column; gap: 1px; }
.login-option-label { color: var(--mer-text); font-weight: 500; font-size: 13px; }
.login-option-desc  { color: var(--mer-text-muted); font-size: 12px; }
.login-options-divider { background: var(--mer-border); height: 1px; }

.login-signup-row { margin-top: 18px; font-size: 13px; color: var(--mer-text-muted); }
.login-signup-row a { font-weight: 600; margin-left: 6px; cursor: pointer; }

.login-footer { margin-top: 8px; font-size: 12px; color: var(--mer-text-faint); text-align: center; }
.login-shellnote { display: flex; gap: 8px; justify-content: center; }

@media (max-width: 520px) {
  .login-card-body { padding: 28px 22px 26px; }
}

/* Section headings inside center column */
.sect-head { display: flex; align-items: center; justify-content: space-between; margin: 4px 2px 12px;
  flex-wrap: wrap; gap: 2px 12px; min-width: 0; }
.sect-head h2 { margin: 0; font-size: 18px; }
.sect-head .sub { color: var(--mer-text-muted); font-size: 12px; min-width: 0; }

/* Workspace picker (business shell) */
.wpick { display: flex; align-items: center; gap: 8px; margin-left: 10px; }
.wpick select {
  height: 34px; border: 1px solid var(--mer-border-strong); border-radius: var(--mer-radius-sm);
  background: var(--mer-surface); padding: 0 8px; max-width: 220px; font-weight: 600;
}

/* Feed skeleton shimmer */
@keyframes shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }
.skel { height: 120px; border-radius: var(--mer-radius-lg); margin-bottom: 16px;
  background: linear-gradient(90deg, var(--mer-surface-3) 25%, var(--mer-surface-2) 37%, var(--mer-surface-3) 63%);
  background-size: 800px 100%; animation: shimmer 1.3s infinite linear; }

/* Compact list-row skeleton: avatar circle + two shimmer lines. Used by
   rail cards and any small list while it loads. */
.skel-row { display: flex; align-items: center; gap: 10px; padding: 8px 14px; }
.skel-av, .skel-ln { background: linear-gradient(90deg, var(--mer-surface-3) 25%, var(--mer-surface-2) 37%, var(--mer-surface-3) 63%);
  background-size: 800px 100%; animation: shimmer 1.3s infinite linear; }
.skel-av { width: 34px; height: 34px; border-radius: 50%; flex: none; }
.skel-row > div { flex: 1; min-width: 0; }
.skel-ln { height: 10px; border-radius: 5px; margin: 4px 0; }
.skel-ln.w60 { width: 60%; }
.skel-ln.w85 { width: 85%; }

/* Branded spinner — a calm conic ring in the accent colour. */
@keyframes tqspin { to { transform: rotate(360deg); } }
.tq-spin { width: 26px; height: 26px; border-radius: 50%; flex: none;
  border: 3px solid var(--mer-surface-3); border-top-color: var(--accent, #1c4e46);
  animation: tqspin .7s linear infinite; margin: 14px auto; display: block; }

.icon { display: inline-block; vertical-align: middle; width: 18px; height: 18px; flex: none; }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-sm svg, .btn-ghost.btn-sm svg { width: 16px; height: 16px; }
.mt8 { margin-top: 8px; } .mt16 { margin-top: 16px; }

/* ═══ Phase 0 — command centre · menus · tabs · chips (masterplan §3) ═══ */

/* Left rail: the platform command centre (profile lives under Me). */
.cmd-nav { padding: 6px; }
.cmdn-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px;
  border: 0; background: none; font: inherit; font-size: 13.5px; font-weight: 600;
  color: var(--mer-text-muted); border-radius: var(--mer-radius-sm); cursor: pointer; text-align: left; }
.cmdn-item .icon { width: 18px; height: 18px; flex: none; }
.cmdn-item:hover { background: var(--mer-primary-tint); color: var(--mer-text); }
.cmdn-item.active { color: var(--tq-active); background: var(--mer-selected); }
.cmdn-group { padding: 10px 12px 4px; font-size: 10.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--mer-text-faint, #8a93a6); }
.cmdn-sub { padding-left: 26px; font-size: 12.5px; }
.cmdn-hash { width: 14px; flex: none; text-align: center; opacity: .55; font-weight: 700; }

/* Header dropdowns — Create + Me. */
.gmenu { position: fixed; top: 54px; right: 18px; z-index: 120; min-width: 224px;
  background: var(--mer-surface, #fff); border: 1px solid var(--mer-border);
  border-radius: var(--mer-radius-lg); box-shadow: 0 12px 32px rgba(16, 20, 32, .16); padding: 6px; }
.gmenu-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px;
  border: 0; background: none; font: inherit; font-size: 13px; font-weight: 500;
  border-radius: var(--mer-radius-sm); cursor: pointer; color: var(--mer-text); text-align: left; }
.gmenu-item .icon { width: 16px; height: 16px; color: var(--mer-text-muted); }
.gmenu-item:hover { background: var(--mer-primary-tint); }

/* Tab strips — feed lenses and community sections. Scroll on overflow. */
.tq-tabs { display: flex; gap: 2px; padding: 6px; overflow-x: auto; margin-bottom: 16px; scrollbar-width: none; }
.tq-tabs::-webkit-scrollbar { display: none; }
.tq-tabs--flush { margin-bottom: 0; border-top: 1px solid var(--mer-border);
  border-radius: 0 0 var(--mer-radius-lg) var(--mer-radius-lg); }
.tq-tab { border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600;
  color: var(--mer-text-muted); padding: 8px 13px; border-radius: var(--mer-radius-sm);
  cursor: pointer; white-space: nowrap; }
.tq-tab:hover { color: var(--mer-text); }
/* Active tab: a clean straight underline — no radius, so the line never curves. */
.tq-tab.on { color: var(--mer-c-brand-950); border-radius: 0;
  box-shadow: inset 0 -2.5px 0 var(--tq-active, #C2DB6F); }

/* ─── Work hub · split-pane (list 40% · detail 60%) ───────────────── */
.work-split { display: grid; grid-template-columns: 2fr 3fr; gap: 12px; align-items: start; }
.work-list { display: flex; flex-direction: column; gap: 8px; max-height: calc(100vh - 250px); overflow-y: auto; }
.work-row { background: var(--mer-surface, #fff); border: 1px solid var(--mer-border, #e3e6ee);
  border-radius: 12px; padding: 12px 14px; cursor: pointer; }
.work-row:hover { border-color: var(--mer-primary, #26316B); }
.work-row.on { border-color: var(--mer-primary, #26316B); box-shadow: inset 3px 0 0 var(--mer-primary, #26316B); }
.work-detail { position: sticky; top: 70px; max-height: calc(100vh - 90px); overflow-y: auto; }
@media (max-width: 959px) {
  .work-split { grid-template-columns: 1fr; }
  .work-detail { display: none; }
}

/* Sticky bottom action bar · detail screens on mobile: the primary
   action stays in thumb reach. Hidden on desktop. */
.sticky-cta { display: none; }
@media (max-width: 767px) {
  .sticky-cta { display: flex; gap: 8px; position: fixed; left: 0; right: 0;
    bottom: calc(56px + env(safe-area-inset-bottom, 0px)); z-index: 60;
    padding: 10px 14px; background: var(--mer-surface, #fff);
    border-top: 1px solid var(--mer-border, #e3e6ee); }
  .sticky-cta .btn { flex: 1; }
}

/* Composer content-type chips — borderless, quiet; only the active one fills. */
.chips { display: flex; flex-wrap: wrap; gap: 2px; padding: 0 12px 10px; }
.chip { border: 0; background: none; font: inherit; font-size: 12.5px;
  font-weight: 600; color: var(--mer-text-muted); padding: 6px 12px; border-radius: var(--mer-radius-sm); cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; }
.chip .icon { width: 15px; height: 15px; }
.chip:hover { background: var(--mer-primary-tint); color: var(--mer-text); }
.chip-on { color: var(--mer-primary); background: var(--mer-primary-tint); }

/* Right-rail attention rows (Today on Tranquil · Community health). */
.today-item { width: 100%; border: 0; background: none; font: inherit; text-align: left; }
.today-item .icon { width: 16px; height: 16px; flex: none; color: var(--mer-text-muted); }
.today-item .t { font-weight: 600; font-size: 12.5px; white-space: normal; }

/* Community header action cluster. */
.chead-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; align-items: center; }

/* ═══ IA redesign — identity pages · workspace · creation flow ═════════ */

/* Identity headers (community / person / organisation). */
.id-cover { min-height: 96px; position: relative;
  background: linear-gradient(100deg, var(--mer-chrome-2) 0%, var(--mer-c-brand-900) 55%, var(--mer-c-brand-700) 100%); }
.id-cover:not(.has-img) { height: 148px; }
/* When a header image is set, the box takes the exact 4:1 crop aspect so
   what the user selected in the cropper is what displays — no re-crop. */
.id-cover.has-img { aspect-ratio: 4 / 1; height: auto; }
.id-cover::after { content: ""; position: absolute; inset: auto 0 0 0; height: 44px;
  background: linear-gradient(to top, rgba(16,20,32,.28), transparent); }
.id-head { display: flex; gap: 16px; align-items: flex-start; padding: 0 20px 4px; }
.id-head .avatar.xl { width: 92px; height: 92px; font-size: 36px; border-width: 4px; margin-top: -46px; position: relative; z-index: 1; }
.id-name { font-size: 21px; font-weight: 700; line-height: 1.2; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.id-tagline { color: var(--mer-text-muted); font-size: 13.5px; margin-top: 2px; }
.id-facts { color: var(--mer-text-muted); font-size: 12.5px; margin-top: 6px; display: flex; gap: 4px 14px; flex-wrap: wrap; }
.id-facts .fact { display: inline-flex; align-items: center; gap: 5px; }
.id-facts .icon { width: 14px; height: 14px; }

/* Quick-stats strip on identity pages. */
.stat-strip { display: flex; border-top: 1px solid var(--mer-border); margin-top: 12px; }
.stat-strip .stat { flex: 1; text-align: center; padding: 10px 4px; cursor: pointer; border-radius: 0;
  border: 0; background: none; font: inherit; color: inherit; appearance: none; }
.stat-strip .stat:hover { background: none; }
.stat-strip .v { font-size: 17px; font-weight: 700; color: var(--mer-c-brand-950); }
.stat-strip .k { font-size: 11px; color: var(--mer-text-muted); font-weight: 600; }

/* Profile "about" — lives above the tabs, quiet body text. */
.id-about { padding: 12px 18px 14px; border-top: 1px solid var(--mer-border);
  font-size: 13.5px; line-height: 1.55; color: var(--mer-text); white-space: pre-wrap; }

/* Acting-as context bar (workspace + composer clarity). */
.ctx-bar { display: flex; align-items: center; gap: 10px; padding: 9px 14px; margin-bottom: 16px;
  background: var(--mer-selected); color: var(--mer-on-selected);
  border-radius: var(--mer-radius-lg); font-size: 12.5px; font-weight: 600; }
.ctx-bar .icon { width: 15px; height: 15px; flex: none; }
.ctx-bar .dim { opacity: .75; font-weight: 500; }
.ctx-bar .spacer { margin-left: auto; }

/* Quick actions row (workspace dashboard). */
.qa-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.qa { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px;
  background: var(--mer-surface); border: 1px solid var(--mer-border); border-radius: var(--mer-radius-pill);
  font: inherit; font-size: 12.5px; font-weight: 600; color: var(--mer-text); cursor: pointer; }
.qa:hover { border-color: var(--mer-primary); color: var(--mer-primary); background: var(--mer-primary-tint); }
.qa .icon { width: 15px; height: 15px; }

/* Multi-step creation flow. */
.steps { display: flex; align-items: center; gap: 0; padding: 18px 20px 6px; overflow-x: auto; scrollbar-width: none; }
.steps::-webkit-scrollbar { display: none; }
.step { display: flex; align-items: center; gap: 8px; color: var(--mer-text-faint); font-size: 12px; font-weight: 600; white-space: nowrap; }
.step .dot { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: var(--mer-surface-3); color: var(--mer-text-muted); font-size: 11.5px; font-weight: 700; }
.step.on { color: var(--mer-c-brand-950); }
.step.on .dot { background: var(--mer-primary); color: var(--mer-on-primary); }
.step.done { color: var(--mer-text-muted); }
.step.done .dot { background: var(--mer-execute-container); color: var(--mer-on-execute-container); }
.step-line { flex: 0 0 26px; height: 1.5px; background: var(--mer-border); margin: 0 8px; }

/* Creation hub (Create menu) — sectioned. */
.gmenu-sect { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--mer-text-faint); padding: 8px 10px 3px; }
.gmenu hr { border: 0; border-top: 1px solid var(--mer-border); margin: 5px 0; }

/* Checklist (post-creation setup). */
.checklist .rail-item { padding: 9px 16px; }
.checklist .icon { width: 16px; height: 16px; color: var(--mer-text-faint); }

/* Reaction picker refinement — press-and-hold feel, no boxes. */
.pact .rpick { pointer-events: none; opacity: 0; transform: translateY(4px); display: flex;
  transition: opacity .12s ease, transform .12s ease; }
.pact:hover .rpick, .rpick:hover, .react-btn.show .rpick { pointer-events: auto; opacity: 1; transform: translateY(0); }

/* ═══════════════════════════════════════════════════════════════════════
   Phase 4 — communities deep-build: chat, invites, governance, moderation
   ═══════════════════════════════════════════════════════════════════════ */

/* ── shared modal fields (the Phase-4 modals use .fld / .chk) ── */
.modal-sm { max-width: 420px; }
.modal-head h3 { margin: 0; font-size: 16px; }
.fld { display: block; margin-bottom: 12px; }
.fld > span { display: block; font-size: 12px; font-weight: 600; color: var(--mer-text-muted); margin-bottom: 4px; }
.fld input, .fld select, .fld textarea {
  width: 100%; height: 40px; border: 1px solid var(--mer-border-strong); border-radius: var(--mer-radius-sm);
  padding: 0 12px; outline: none; background: var(--mer-surface); color: var(--mer-text); font-size: 14px;
}
.fld textarea { height: auto; min-height: 64px; padding: 9px 12px; resize: vertical; }
.fld input:focus, .fld select:focus, .fld textarea:focus { border-color: var(--mer-primary); box-shadow: 0 0 0 1px var(--mer-primary); }
.fld-row { display: flex; gap: 12px; }
.fld-row .fld { flex: 1; }
.chk { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--mer-text-muted); margin: 4px 0 12px; }
.chk input { width: auto; }

/* ── role & reason chips (roles modal + report modal) ── */
.role-chips, .report-reasons { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 4px; }
.role-chip {
  border: 1px solid var(--mer-border-strong); background: var(--mer-surface); color: var(--mer-text);
  border-radius: var(--mer-radius-pill); padding: 5px 12px; font-size: 12.5px; font-weight: 600;
  cursor: pointer; text-transform: capitalize; transition: background var(--mer-motion-fast), border-color var(--mer-motion-fast);
}
.role-chip:hover { background: var(--mer-primary-tint); }
.role-chip.on { background: var(--mer-execute-container); color: var(--mer-on-execute-container); border-color: transparent; }
.report-reasons .role-chip { text-transform: none; }

/* ── chat: rail + thread ── */
.chat { display: flex; min-height: 460px; border: 1px solid var(--mer-border); border-radius: var(--mer-radius-lg); overflow: hidden; background: var(--mer-surface); }
.chat-rail { flex: 0 0 208px; border-right: 1px solid var(--mer-border); background: var(--mer-surface-2); display: flex; flex-direction: column; }
.chat-rail-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px 8px; font-weight: 700; font-size: 13px; color: var(--mer-text-muted); }
.chat-chan { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; border: none; background: none;
  padding: 8px 14px; cursor: pointer; color: var(--mer-text); font-size: 13.5px; }
.chat-chan:hover { background: var(--mer-primary-tint); }
.chat-chan.on { background: var(--mer-selected); color: var(--mer-on-selected); font-weight: 600; }
.chat-chan-g { width: 18px; display: inline-flex; align-items: center; justify-content: center; color: var(--mer-text-faint); }
.chat-chan-g svg { width: 15px; height: 15px; }
.chat-chan-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.chat-thread { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 8px; max-height: 520px; }
.chat-pinned { background: var(--mer-warning-bg); color: var(--mer-warning-text); border-radius: var(--mer-radius-sm); padding: 7px 12px; font-size: 12.5px; }
.chat-empty { text-align: center; color: var(--mer-text-muted); padding: 42px 16px; margin: auto; }
.chat-empty .big { margin-bottom: 10px; line-height: 0; color: #b3a677; }
.chat-empty .big svg { width: 46px; height: 46px; }
.chat-empty strong { display: block; font-size: 15px; color: #4a4335; margin-bottom: 2px; }
.chat-empty .chat-empty-sub { font-size: 13px; color: #94896c; }
.chat-composer { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--mer-border); }
.chat-input { flex: 1; height: 40px; border: 1px solid var(--mer-border-strong); border-radius: var(--mer-radius-pill); padding: 0 16px; outline: none; background: var(--mer-surface); color: var(--mer-text); }
.chat-input:focus { border-color: var(--mer-primary); }
.chat-send { width: 44px; padding: 0; border-radius: 50%; }

/* messages */
.msg { display: flex; gap: 8px; align-items: flex-end; max-width: 82%; }
.msg.mine { margin-left: auto; flex-direction: row-reverse; }
.msg-col { min-width: 0; }
.msg-author { font-size: 11.5px; font-weight: 700; color: var(--mer-text-muted); margin: 0 0 2px 10px; }
.msg-bubble { position: relative; background: var(--mer-surface-2); border-radius: 4px 14px 14px 14px; padding: 7px 12px 5px; }
.msg.mine .msg-bubble { background: var(--mer-selected); color: var(--mer-on-selected); border-radius: 14px 4px 14px 14px; }
.msg-body { font-size: 13.5px; line-height: 1.4; white-space: pre-wrap; word-break: break-word; }
.msg-gone { color: var(--mer-text-faint); font-style: italic; }
.msg-att { margin-top: 4px; font-size: 12px; color: var(--mer-text-muted); display: flex; align-items: center; gap: 6px; }
.msg-reply { border-left: 2px solid var(--mer-primary); padding: 2px 8px; margin-bottom: 4px; font-size: 12px; color: var(--mer-text-muted); border-radius: 0 6px 6px 0; background: var(--mer-primary-tint); }
.msg-reply .who { font-weight: 700; display: block; }
.msg-foot { display: flex; align-items: center; gap: 6px; font-size: 10.5px; color: var(--mer-text-faint); margin-top: 3px; }
.msg.mine .msg-foot { color: rgba(255,255,255,.7); }
.msg-more { border: none; background: none; cursor: pointer; color: inherit; opacity: 0; line-height: 1; padding: 0 2px; display: inline-flex; align-items: center; }
.msg-more svg { width: 16px; height: 16px; }
.msg-bubble:hover .msg-more { opacity: .8; }
.msg-picker { position: absolute; top: -34px; right: 0; background: var(--mer-surface); border: 1px solid var(--mer-border); border-radius: var(--mer-radius-pill);
  box-shadow: var(--mer-shadow-2); padding: 3px 6px; display: none; gap: 3px; z-index: 5; }
.msg-picker.open { display: flex; }
.msg-picker button { border: none; background: none; cursor: pointer; padding: 3px; border-radius: 50%; display: inline-flex; }
.msg-picker button svg { width: 20px; height: 20px; }
.msg-picker button:hover { background: var(--mer-primary-tint); transform: scale(1.2); }
.msg-reacts { display: flex; gap: 4px; margin: 3px 0 0 8px; }
.msg-react { font-size: 11px; background: var(--mer-surface-2); border: 1px solid var(--mer-border); border-radius: var(--mer-radius-pill);
  padding: 1px 7px; cursor: pointer; color: var(--mer-text-muted); display: inline-flex; align-items: center; gap: 3px; }
.msg-react svg { width: 13px; height: 13px; }
.msg-react.on { background: var(--mer-execute-container); color: var(--mer-on-execute-container); border-color: transparent; }

/* ── governance: resolutions ── */
.gov-card { margin-bottom: 12px; }
.gov-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.gov-ref { font-size: 12px; font-weight: 600; color: var(--mer-text-muted); margin-right: 6px; }
.gov-title { margin: 6px 0 4px; font-size: 16px; }
.gov-text { font-size: 13.5px; margin: 0 0 10px; }
.gov-tally { display: flex; flex-direction: column; gap: 6px; margin: 6px 0; }
.gov-bar { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.gov-bar-k { flex: 0 0 58px; color: var(--mer-text-muted); }
.gov-bar-t { flex: 1; height: 8px; background: var(--mer-surface-2); border-radius: 5px; overflow: hidden; }
.gov-bar-f { display: block; height: 100%; border-radius: 5px; transition: width .3s ease; }
.gov-bar-f.for { background: var(--mer-execute); }
.gov-bar-f.against { background: var(--mer-danger); }
.gov-bar-f.abstain { background: var(--mer-text-faint); }
.gov-bar-v { flex: 0 0 24px; text-align: right; font-variant-numeric: tabular-nums; color: var(--mer-text-muted); }
.gov-meta { margin: 8px 0 10px; }
.gov-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── moderation queue ── */
.mod-card { margin-bottom: 12px; }
.mod-post { border-left: 3px solid var(--mer-warning-text); padding: 2px 0 2px 12px; margin-bottom: 12px; }
.mod-post-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; }
.mod-post-title { font-weight: 700; font-size: 14px; }
.mod-post-snip { font-size: 13px; color: var(--mer-text-muted); }
.mod-flags-h { font-size: 12px; font-weight: 700; color: var(--mer-text-muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
.mod-flag { display: flex; align-items: center; gap: 8px; padding: 5px 0; }
.mod-flag-r { font-size: 13px; }
.mod-actions { display: flex; gap: 8px; margin-top: 12px; }

/* ── DM inbox ── */
.dm-wrap { display: flex; min-height: 480px; overflow: hidden; }
.dm-rail { flex: 0 0 260px; border-right: 1px solid var(--mer-border); overflow-y: auto; }
.dm-lane { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: none; background: none;
  padding: 10px 14px; cursor: pointer; border-bottom: 1px solid var(--mer-border); }
.dm-lane:hover { background: var(--mer-primary-tint); }
.dm-lane.on { background: var(--mer-selected); }
.dm-lane.on .t, .dm-lane.on .s, .dm-lane.on .dm-lane-t { color: var(--mer-on-selected); }
.dm-lane-txt { min-width: 0; flex: 1; }
.dm-lane-txt .t { font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* One fixed-height preview line — the message NEVER grows the lane.
   Long text ellipsizes; media messages wear an icon + type label. */
.dm-lane-txt .s { font-size: 12px; color: var(--mer-text-muted); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; max-width: 100%; height: 17px; line-height: 17px; }
.dm-lane-txt .s .lane-mkind { display: inline-flex; align-items: center; gap: 4px; }
.dm-lane-txt .s .lane-mkind svg { width: 12px; height: 12px; vertical-align: -2px; }
.dm-lane-t { font-size: 10.5px; color: var(--mer-text-faint); align-self: flex-start; }
.dm-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.dm-main .chat-thread { max-height: none; }

/* ── Tranquil Inbox — chats · channels · calls · actions ── */
.ib-wrap { display: flex; min-height: 540px; overflow: hidden; }
.ib-rail { flex: 0 0 288px; border-right: 1px solid var(--mer-border); display: flex; flex-direction: column; min-height: 0; }
.ib-tabs { display: flex; gap: 2px; padding: 8px 8px 6px; border-bottom: 1px solid var(--mer-border); flex-wrap: wrap; }
.ib-tab { border: none; background: none; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--mer-text-muted);
  padding: 6px 10px; border-radius: 999px; cursor: pointer; }
.ib-tab:hover { background: var(--mer-primary-tint); }
.ib-tab.on { background: var(--mer-selected); color: var(--mer-on-selected); }
.ib-list { flex: 1; overflow-y: auto; min-height: 0; }
.ib-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.ib-main .chat-thread { max-height: none; }
.ib-side { flex: 0 0 240px; border-left: 1px solid var(--mer-border); overflow-y: auto; padding: 16px 14px; }
.ib-ctx { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.ib-ctx-head { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.ib-group { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--mer-text-faint); padding: 12px 14px 4px; }
.ib-chan-sig { opacity: .55; font-weight: 700; margin-right: 2px; }
.ib-call-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--mer-text-faint); flex: none; }
.ib-call-dot.live { background: var(--mer-danger, #dc2626); box-shadow: 0 0 0 3px rgba(220,38,38,.18); }
@media (max-width: 1100px) { .ib-side { display: none; } }
@media (max-width: 720px) {
  .ib-wrap { flex-direction: column; min-height: 0; }
  .ib-rail { flex: none; border-right: 0; border-bottom: 1px solid var(--mer-border); max-height: 46vh; }
  .ib-main { min-height: 44vh; }
}
.chat-composer { position: relative; }
.chat-plus-menu { position: absolute; bottom: calc(100% + 6px); left: 8px; background: var(--mer-surface, #fff);
  border: 1px solid var(--mer-border); border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.14);
  display: flex; flex-direction: column; min-width: 190px; padding: 6px; z-index: 60; }
.chat-plus-menu button { display: flex; align-items: center; gap: 10px; border: none; background: none; font: inherit;
  font-size: 13.5px; padding: 9px 10px; border-radius: 8px; cursor: pointer; text-align: left; }
.chat-plus-menu button:hover { background: var(--mer-primary-tint); }
.msg-att { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--mer-border);
  background: var(--mer-primary-tint); border-radius: 8px; padding: 6px 10px; margin-top: 6px;
  font: inherit; font-size: 12.5px; cursor: pointer; }

/* ── join landing ── */
.join-card { text-align: center; }

/* ── report action tint ── */
.pact-report:hover { color: var(--mer-danger); }

/* ══════════════════════════════════════════════════════════════════════
   Media tools — avatar/header editing + the canvas cropper & video trim
   ══════════════════════════════════════════════════════════════════════ */

/* stored-image identity surfaces — always proportional (cover + center),
   matching the mobile apps' centerCrop; never stretch (100% 100%). */
.avatar.has-img { background-size: cover; background-position: center; color: transparent; }
.id-cover.has-img { background-size: cover; background-position: center; }

/* avatar wrapper so a camera badge can overlay the photo */
.id-avatar-wrap { position: relative; width: 92px; height: 92px; margin-top: -46px; z-index: 1; flex: none; }
.id-avatar-wrap .avatar.xl { margin-top: 0; }

/* camera affordances (LinkedIn/X-style) */
.med-cam {
  position: absolute; border: none; cursor: pointer; color: #fff;
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(16, 20, 32, .58); border-radius: 999px;
  font-size: 12px; font-weight: 600; line-height: 1;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  transition: opacity var(--mer-motion-fast), background var(--mer-motion-fast);
}
.med-cam:hover { background: rgba(16, 20, 32, .78); }
.med-cam svg { display: block; }
.cover-cam { top: 12px; right: 12px; padding: 7px 12px; opacity: .92; }
.avatar-cam {
  right: -2px; bottom: -2px; width: 30px; height: 30px; padding: 0;
  justify-content: center; border: 2px solid var(--mer-surface); opacity: .96;
}

/* ── the editor modal ── */
.med { max-width: 540px; }
.med-body { padding: 14px 16px 4px; }
.med-alert:empty { display: none; }
.med-stage {
  position: relative; width: 100%; border-radius: var(--mer-radius-lg);
  overflow: hidden; background:
    linear-gradient(45deg, #1a1f2b 25%, transparent 25%) -8px 0/16px 16px,
    linear-gradient(-45deg, #1a1f2b 25%, transparent 25%) -8px 0/16px 16px,
    linear-gradient(45deg, transparent 75%, #1a1f2b 75%) 0 0/16px 16px,
    linear-gradient(-45deg, transparent 75%, #1a1f2b 75%) 0 0/16px 16px,
    #12151d;
  display: grid; place-items: center; touch-action: none; user-select: none;
}
.med-canvas { display: block; cursor: grab; }
.med-canvas:active { cursor: grabbing; }
.med-frame {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  pointer-events: none; border: 1.5px solid rgba(255, 255, 255, .9);
  box-shadow: 0 0 0 2000px rgba(13, 16, 23, .56); border-radius: 3px;
}
.med-frame.is-round { border-radius: 50%; }
.med-hint {
  position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
  background: rgba(16, 20, 32, .62); color: #fff; font-size: 11.5px;
  padding: 4px 10px; border-radius: 999px; pointer-events: none; white-space: nowrap;
}
.med-aspects { display: flex; gap: 6px; margin: 12px 0 2px; flex-wrap: wrap; }
.med-controls {
  display: flex; align-items: center; gap: 10px; margin: 12px 2px 4px;
}
.med-controls--wrap { flex-wrap: wrap; }
.med-zoom { flex: 1; accent-color: var(--mer-primary); }
.ico-btn {
  width: 34px; height: 34px; flex: none; border: 1px solid var(--mer-border-strong);
  background: var(--mer-surface); border-radius: 50%; cursor: pointer;
  font-size: 16px; line-height: 1; color: var(--mer-text);
  display: grid; place-items: center;
  transition: background var(--mer-motion-fast), border-color var(--mer-motion-fast);
}
.ico-btn:hover { background: var(--mer-primary-tint); border-color: var(--mer-primary); }
.ico-btn svg { width: 18px; height: 18px; }

/* ── video formatter ── */
.med-stage--video { background: #0d1017; min-height: 200px; }
.med-video { width: 100%; max-height: 46vh; display: block; }
.med-scrub { margin: 10px 2px 0; }
.med-range { width: 100%; accent-color: var(--mer-primary); }
.med-trim {
  display: grid; grid-template-columns: auto 1fr; gap: 6px 10px;
  align-items: center; margin: 8px 2px 0;
}
.med-trimlab { font-size: 12px; color: var(--mer-text-muted); white-space: nowrap; }
.med-mute { font-size: 12.5px; color: var(--mer-text-muted); display: inline-flex; align-items: center; gap: 5px; }

/* ── composer thumbnails (crop / format per item) ── */
.composer-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.composer-thumbs:empty { display: none; }
.cthumb {
  position: relative; width: 86px; height: 86px; border-radius: var(--mer-radius-sm);
  overflow: hidden; border: 1px solid var(--mer-border-strong); background: #0d1017;
}
.cthumb-img { width: 100%; height: 100%; background-size: cover; background-position: center; }
.cthumb-img video { width: 100%; height: 100%; object-fit: cover; }
.cthumb-edit {
  position: absolute; left: 0; right: 0; bottom: 0; border: none; cursor: pointer;
  background: rgba(16, 20, 32, .66); color: #fff; font-size: 11px; font-weight: 600;
  padding: 4px 0; text-align: center;
}
.cthumb-edit:hover { background: rgba(16, 20, 32, .84); }

/* ── Composer dropzone (design-system file picker) ─────────────────────── */
.dropzone {
  display: flex; align-items: center; gap: 12px; margin-top: 8px;
  padding: 14px 16px; border: 1.5px dashed var(--mer-border-strong);
  border-radius: var(--mer-radius-md); background: var(--mer-surface-2);
  color: var(--mer-text-muted); cursor: pointer;
  transition: border-color var(--mer-motion-fast), background var(--mer-motion-fast), color var(--mer-motion-fast);
}
.dropzone:hover, .dropzone.dz-over { border-color: var(--mer-primary); background: var(--mer-primary-tint); color: var(--mer-primary); }
.dropzone .icon { width: 26px; height: 26px; flex: none; color: var(--mer-primary); }
.dz-text { display: flex; flex-direction: column; gap: 1px; line-height: 1.3; min-width: 0; }
.dz-text b { color: var(--mer-text); font-size: 15px; }
.dz-text span { font-size: 13px; }

/* ═══ Reading scale — platform typography ≈+20% ════════════════════════════
   People-products read better a touch larger. Only type grows here; the
   fixed-px rails/containers are untouched, so nothing reflows out of place.
   This block is last in source order, so it wins over the base rules. */

/* Body copy */
.post-body, .post-name, .composer .start { font-size: 15px; }
.post-body { line-height: 1.5; }

/* Primary UI text */
.comment-bubble .txt, .rail-item .t, .rail-more, .tbl,
.mod .name, .chip, .msg-body, .mod-flag-r { font-size: 15px; }
.pact { font-size: 13px; }

/* Secondary / meta text */
.post-meta, .post-counts, .card .sub, .comment-bubble .who, .dir-type,
.dir-purpose, .mod .desc, .tile .k, .field label, .tbl th, .id-facts,
.sect-head .sub, .mod-flags-h, .msg-reply { font-size: 14px; }

/* Small chrome */
.rail-item .s, .msg-author, .badge, .composer-note, .field .hint,
.gnav-item .lbl, .foot, .stat-strip .k { font-size: 13px; }

/* Buttons */
.btn { font-size: 16px; }
.btn-sm { font-size: 13px; }

/* Headings & figures */
.card h3, .dir-name, .sect-head h2 { font-size: 18px; }
.modal-head h2, .stat-strip .v { font-size: 20px; }
.id-name { font-size: 25px; }
.tile .v { font-size: 28px; }

/* ══════════════════════════════════════════════════════════════════════
   Calls, meetings & sessions — DM voice/video, community sessions, the
   full-screen call stage and the incoming-call ring. WebRTC media runs
   peer-to-peer; this is only the chrome around it.
   ══════════════════════════════════════════════════════════════════════ */

/* A small round icon button (DM call header, tile controls). */
.icon-btn { width: 36px; height: 36px; border-radius: var(--mer-radius-pill);
  border: 1px solid var(--mer-border); background: var(--mer-surface); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; color: var(--mer-text);
  transition: background .12s, color .12s, border-color .12s; }
.icon-btn:hover { background: var(--mer-primary-tint); color: var(--mer-primary); border-color: var(--mer-primary); }
.icon-btn .icon { width: 18px; height: 18px; }

/* DM thread: a call header over the message thread. */
.dm-head { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 14px; border-bottom: 1px solid var(--mer-border); background: var(--mer-surface); }
.dm-head-who { display: flex; align-items: center; gap: 9px; font-weight: 650; min-width: 0; }
.dm-head-who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-head-acts { display: flex; gap: 8px; flex: 0 0 auto; }
.dm-thread-box { flex: 1; display: flex; flex-direction: column; min-height: 0; }

/* ── community session rows ── */
.s-row { display: flex; align-items: center; gap: 13px; padding: 13px 16px; }
.s-emoji { flex: 0 0 auto; display: grid; place-items: center; width: 42px; height: 42px; border-radius: var(--mer-radius-md); background: var(--mer-primary-tint); color: var(--mer-primary); }
.s-emoji svg { width: 22px; height: 22px; }
.s-body { flex: 1; min-width: 0; }
.s-title { font-weight: 700; font-size: 15px; }
.s-meta { margin-top: 5px; }
.s-acts { display: flex; flex-direction: column; gap: 6px; flex: 0 0 auto; }

/* ── session kind picker (create modal) ── */
.s-kind-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.s-kind { display: flex; align-items: center; gap: 7px; padding: 9px 11px; cursor: pointer;
  border: 1px solid var(--mer-border); border-radius: var(--mer-radius-md); background: var(--mer-surface);
  font-size: 13.5px; font-weight: 550; color: var(--mer-text); text-align: left; }
.s-kind:hover { border-color: var(--mer-primary); background: var(--mer-primary-tint); }
.s-kind.on { border-color: var(--mer-primary); background: var(--mer-selected); color: var(--mer-on-selected); box-shadow: 0 0 0 1px var(--mer-primary) inset; }
.s-kind-e { display: inline-flex; color: var(--mer-primary); }
.s-kind-e svg { width: 19px; height: 19px; }

/* ── the call stage ── */
.call-overlay { position: fixed; inset: 0; z-index: 300; background: #0d1017;
  display: flex; flex-direction: column; color: #eef1f7; }
.call-head { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 20px; background: linear-gradient(#171c27, rgba(23,28,39,0)); }
.call-title { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 16px; }
.call-kind { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
  color: #aeb7cc; background: rgba(255,255,255,.08); padding: 2px 8px; border-radius: var(--mer-radius-pill); }
.call-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--mer-c-lime-brand);
  box-shadow: 0 0 0 0 rgba(194,219,111,.6); animation: callpulse 1.8s infinite; }
@keyframes callpulse { 0% { box-shadow: 0 0 0 0 rgba(194,219,111,.55); } 70% { box-shadow: 0 0 0 8px rgba(194,219,111,0); } 100% { box-shadow: 0 0 0 0 rgba(194,219,111,0); } }
.call-net { font-size: 12.5px; color: #9aa4bb; }
.call-logo { height: 20px; width: auto; margin-right: 10px; display: block; }
.call-hud { display: flex; align-items: center; gap: 12px; }
.call-timer { font-size: 12.5px; color: #cdd4e3; font-variant-numeric: tabular-nums;
  font-family: ui-monospace, monospace; }
.call-live { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; color: #fff;
  background: #d33; border-radius: 4px; padding: 2px 7px; }
.call-recdot { font-size: 11.5px; font-weight: 700; color: #ff5d5d; animation: call-blink 1.4s infinite; }
@keyframes call-blink { 50% { opacity: .35; } }
.call-btn .call-rec-ic { color: #ff5d5d; font-size: 17px; line-height: 1; }
.call-btn.on .call-rec-ic { animation: call-blink 1.4s infinite; }
.call-chat { width: 340px; flex: none; margin: 0 16px 8px 0;
  background: rgba(16, 20, 28, .96); border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 14px; display: flex; flex-direction: column; min-height: 0; }
.call-chat[hidden] { display: none; }
/* ── the meeting body: stage + docked panel, SIDE BY SIDE ──────────────
   The panel is not a popup floating over people's faces — opening it
   shrinks the stage; the grid re-flows. */
.call-body { flex: 1; display: flex; min-height: 0; align-items: stretch; }
.call-stage { flex: 1; min-width: 0; display: flex; flex-direction: column; position: relative; }
.call-panel-head { display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px 8px; font-size: 14px; color: #e7ebf4; }
.call-panel-x { background: none; border: 0; color: #8d97ad; cursor: pointer;
  padding: 4px; border-radius: 8px; }
.call-panel-x:hover { color: #e7ebf4; background: rgba(255,255,255,.1); }
.call-panel-x svg { width: 15px; height: 15px; }
/* ── the waiting stage: alone in the room ──────────────────────────────
   "Calling Amina… waiting for them to answer" — a person, not a void. */
.call-wait { position: absolute; inset: 0; z-index: 4; display: flex;
  flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  background: #0d1017; }
.call-wait[hidden] { display: none; }
.call-wait .avatar { width: 96px; height: 96px; font-size: 34px; }
.call-wait strong { font-size: 18px; color: #eef1f7; }
.call-wait-sub { font-size: 13px; color: #9aa4bb; }
.call-wait-pulse { display: inline-flex; gap: 6px; margin-top: 6px; }
.call-wait-pulse i { width: 8px; height: 8px; border-radius: 50%;
  background: var(--mer-c-lime-brand, #b9df4b); animation: call-waitdot 1.2s infinite; }
.call-wait-pulse i:nth-child(2) { animation-delay: .2s; }
.call-wait-pulse i:nth-child(3) { animation-delay: .4s; }
@keyframes call-waitdot { 0%, 80%, 100% { opacity: .25; transform: scale(.8); } 40% { opacity: 1; transform: scale(1.1); } }
/* Tile avatars — hidden under video normally; the face of the tile in
   voice calls and camera-off moments. */
.call-tile-avatar { position: absolute; inset: 0; display: none;
  align-items: center; justify-content: center; }
/* ── 1:1 voice: a PHONE CALL, not a meeting ────────────────────────────
   The other person is a large centered avatar; me, a tiny corner chip
   exactly like a guest avatar — no dead black rectangles. */
.call-overlay.is-voice .call-grid.voice { display: block; position: relative; }
.call-grid.voice .call-tile { background: transparent; aspect-ratio: auto; min-height: 0; }
.call-grid.voice .call-tile video { position: absolute; width: 1px; height: 1px; opacity: 0; }
.call-grid.voice .call-tile-avatar { display: flex; }
.call-grid.voice .call-tile:not(.mine) { position: absolute; inset: 0; }
.call-grid.voice .call-tile:not(.mine) .call-tile-avatar .avatar {
  width: 132px; height: 132px; font-size: 44px; box-shadow: 0 0 0 10px rgba(255,255,255,.05); }
.call-grid.voice .call-tile:not(.mine) .call-name { left: 50%; transform: translateX(-50%);
  bottom: 28%; background: none; font-size: 17px; backdrop-filter: none; }
.call-grid.voice .call-tile.mine { position: absolute; right: 26px; bottom: 20px;
  width: 64px; height: 64px; outline: none; z-index: 5; }
.call-grid.voice .call-tile.mine .call-tile-avatar .avatar { width: 52px; height: 52px; }
.call-grid.voice .call-tile.mine .call-name { display: none; }
.call-chat-head { padding: 12px 14px; font-size: 13px; font-weight: 700; color: #e7ebf4;
  border-bottom: 1px solid rgba(255, 255, 255, .07); }
.call-chat-log { flex: 1; overflow-y: auto; padding: 10px 14px; display: flex;
  flex-direction: column; gap: 8px; }
.call-chat-msg { font-size: 13px; color: #dbe1ee; position: relative; padding-right: 24px; }
.call-chat-msg .who { display: flex; align-items: center; gap: 5px; font-size: 11px;
  color: #8d97ad; margin-bottom: 2px; }
.call-chat-msg.mine .who { color: #9fd3a8; }
/* A private line wears its own edge and tint — it can never be mistaken
   for something the room can read. */
.call-chat-msg.is-direct { border-left: 2px solid #c9922f; padding-left: 8px;
  background: rgba(201, 146, 47, .07); border-radius: 0 8px 8px 0; }
.call-chip { font-style: normal; font-size: 9.5px; font-weight: 700; letter-spacing: .3px;
  text-transform: uppercase; padding: 1px 5px; border-radius: 5px;
  background: rgba(255, 255, 255, .1); color: #b9c2d4; }
.call-chip.is-direct { background: rgba(201, 146, 47, .22); color: #e5c37c; }
.call-at { font-style: normal; margin-left: auto; font-size: 10px; color: #6f7a90; }
/* The quoted parent of a reply — the inbox's quote grammar, dark-mode. */
.call-quote { display: block; font-size: 11.5px; color: #a7b0c2; border-left: 2px solid rgba(255, 255, 255, .2);
  padding: 2px 0 2px 7px; margin-bottom: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.call-att { display: inline-flex; align-items: center; gap: 7px; background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .12); border-radius: 9px; padding: 6px 9px; margin: 2px 0;
  color: #e7ebf4; font: inherit; font-size: 12.5px; cursor: pointer; max-width: 100%; }
.call-att:hover { background: rgba(255, 255, 255, .12); }
.call-att span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.call-msg-reply { position: absolute; top: 0; right: 0; opacity: 0; background: none; border: 0;
  color: #8d97ad; cursor: pointer; padding: 2px; border-radius: 6px; transition: opacity .12s; }
.call-msg-reply svg { width: 14px; height: 14px; }
.call-chat-msg:hover .call-msg-reply { opacity: 1; }
.call-msg-reply:hover { color: #e7ebf4; background: rgba(255, 255, 255, .1); }
/* Reply + attachment strips sit above the input, exactly as in the inbox. */
.call-reply, .call-attach { display: flex; align-items: center; gap: 8px; padding: 7px 12px;
  font-size: 12px; color: #c3cbdb; border-top: 1px solid rgba(255, 255, 255, .07);
  background: rgba(255, 255, 255, .04); }
.call-reply[hidden], .call-attach[hidden] { display: none; }
.call-reply-ic svg, .call-reply-x svg { width: 14px; height: 14px; }
.call-reply-txt { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.call-reply-x { background: none; border: 0; color: #8d97ad; cursor: pointer; padding: 2px; }
.call-reply-x:hover { color: #e7ebf4; }
.call-chat-form { display: flex; gap: 6px; padding: 10px; align-items: center;
  border-top: 1px solid rgba(255, 255, 255, .07); }
.call-chat-form input { flex: 1; min-width: 0; background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 9px; color: #eef1f8; padding: 8px 10px; font-size: 13px; }
/* "To:" is a first-class control — the member sees the audience before
   they type, and a direct line turns amber to say so. */
.call-to { background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12);
  color: #c3cbdb; font: inherit; font-size: 11.5px; font-weight: 600; border-radius: 999px;
  padding: 6px 10px; cursor: pointer; max-width: 108px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; flex: none; }
.call-to.is-direct { background: rgba(201, 146, 47, .22); border-color: rgba(229, 195, 124, .5); color: #e5c37c; }
.call-clip { background: none; border: 0; color: #8d97ad; cursor: pointer; padding: 4px; flex: none; }
.call-clip:hover { color: #e7ebf4; }
.call-clip svg { width: 17px; height: 17px; }
.call-chat-form button[type="submit"] svg { width: 15px; height: 15px; }
.call-topop { position: absolute; bottom: 44px; left: 8px; transform: none; flex-direction: column;
  max-height: 250px; overflow-y: auto; align-items: stretch; }
.call-topop button { font-size: 13px; justify-content: flex-start; }
.call-topop button svg { width: 15px; height: 15px; flex: none; }
.call-chat-badge { position: absolute; top: 4px; right: 4px; background: #d33; color: #fff;
  font-size: 10px; font-weight: 700; border-radius: 8px; min-width: 15px; padding: 1px 4px; }
.call-btn { position: relative; }
.call-tabs { display: flex; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.call-tabs button { flex: 1; background: none; border: 0; color: #8d97ad; font-size: 12.5px;
  font-weight: 700; padding: 11px 4px; cursor: pointer; border-bottom: 2px solid transparent; }
.call-tabs button.on { color: #e7ebf4; border-bottom-color: var(--brand, #1c4e46); }
.call-pane { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.call-pane[hidden] { display: none; }
.call-pop { position: absolute; bottom: 56px; left: 50%; transform: translateX(-50%);
  background: rgba(24, 28, 38, .98); border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 12px; padding: 6px; display: flex; gap: 2px; z-index: 30; white-space: nowrap; }
.call-pop button { background: none; border: 0; color: #e7ebf4; font-size: 16px;
  padding: 8px 10px; border-radius: 8px; cursor: pointer; display: flex; align-items: center; gap: 6px; }
.call-pop button:hover { background: rgba(255, 255, 255, .1); }
.call-react { position: absolute; bottom: 12%; font-size: 30px; z-index: 8; pointer-events: none;
  animation: call-fly 2.3s ease-out forwards; }
@keyframes call-fly { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(-260px); opacity: 0; } }
.call-share-banner { position: absolute; top: 60px; left: 50%; transform: translateX(-50%);
  background: rgba(24, 28, 38, .95); border: 1px solid rgba(255, 255, 255, .12); color: #dbe1ee;
  border-radius: 10px; padding: 9px 16px; font-size: 13px; z-index: 6; }
.call-share-banner a { color: #9fd3a8; font-weight: 700; }
.call-poll { border-bottom: 1px solid rgba(255, 255, 255, .07); padding: 10px 0; }
.call-poll .q { font-size: 13px; font-weight: 700; color: #e7ebf4; margin-bottom: 7px; }
.call-poll .opt { display: flex; justify-content: space-between; width: 100%; background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .1); color: #dbe1ee; border-radius: 8px; padding: 7px 10px;
  font-size: 13px; margin-bottom: 5px; cursor: pointer; }
.call-poll .opt.mine { border-color: var(--brand, #1c4e46); background: rgba(70, 140, 120, .25); }
.call-poll .opt.right { border-color: #46a758; background: rgba(70, 167, 88, .25); }
.call-poll .opt .n { color: #8d97ad; font-variant-numeric: tabular-nums; }
.call-qa { border-bottom: 1px solid rgba(255, 255, 255, .07); padding: 9px 0; }
.call-qa .who { font-size: 11px; color: #8d97ad; }
.call-qa .txt { font-size: 13px; color: #e7ebf4; margin: 2px 0; }
.call-qa .ans { font-size: 12.5px; color: #9fd3a8; margin: 3px 0; }
.call-qa a, .call-poll a { color: #9fd3a8; text-decoration: none; }
.call-grid { flex: 1; display: grid; gap: 10px; padding: 0 20px 8px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-content: center; overflow: auto; }
.call-tile { position: relative; background: #1b212e; border-radius: var(--mer-radius-lg);
  overflow: hidden; aspect-ratio: 16 / 10; min-height: 180px; }
.call-tile video { width: 100%; height: 100%; object-fit: cover; background: #10141f; }
.call-tile.mine { outline: 2px solid var(--mer-c-lime-brand); outline-offset: -2px; }
/* ── Presentation stage ─────────────────────────────────────────────
   While anyone shares a screen the grid becomes a stage: the shared
   surface fills the room LETTERBOXED (object-fit: contain — a slide
   must never be cropped) and the people shrink to a filmstrip below. */
.call-grid.stage { display: grid; grid-template-rows: 1fr 120px;
  grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 192px;
  align-content: stretch; }
.call-grid.stage .call-tile.presenting { grid-row: 1; grid-column: 1 / -1;
  aspect-ratio: auto; min-height: 0; }
.call-grid.stage .call-tile.presenting video { object-fit: contain; background: #000; }
.call-grid.stage .call-tile:not(.presenting) { grid-row: 2; aspect-ratio: auto;
  min-height: 0; }
.call-btn[disabled] { opacity: .38; cursor: not-allowed; }
/* Bar buttons that carry a caption (People, Q&A) grow into labelled
   pills — the room's tools read at a glance instead of hiding behind
   one anonymous icon. */
.call-btn:has(.call-btn-lb) { width: auto; border-radius: 27px; padding: 0 16px;
  flex-direction: column; gap: 1px; }
.call-btn-lb { font-size: 9.5px; font-weight: 700; letter-spacing: .04em; line-height: 1; }
.call-btn:has(.call-btn-lb) svg { width: 19px; height: 19px; }
.call-morepop { flex-direction: column; align-items: stretch; }
.call-morepop button { font-size: 13.5px; justify-content: flex-start; }
.call-morepop button svg { width: 15px; height: 15px; }
/* New-meeting modal */
.ib-meet-when { display: flex; gap: 8px; margin-bottom: 14px; }
.ib-meet-when .btn.on { background: var(--mer-c-navy); color: #fff; }
.ib-meet-found { border: 1px solid var(--mer-c-line); border-radius: var(--mer-radius); margin-top: 4px;
  max-height: 180px; overflow: auto; background: var(--mer-c-surface); }
.ib-meet-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ib-meet-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600;
  background: var(--mer-c-wash); border-radius: var(--mer-radius-pill); padding: 4px 6px 4px 12px; }
.ib-meet-chip button { border: none; background: none; cursor: pointer; font-size: 15px; line-height: 1; opacity: .6; }
.ib-meet-chip button:hover { opacity: 1; }
.ib-meet-code { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.ib-meet-over { max-width: 780px; margin: 0 auto; padding: 32px 20px; }
.ib-meet-hero { text-align: center; padding: 26px 0 10px; }
.ib-meet-hero .big { color: var(--muted); margin-bottom: 8px; }
.ib-meet-hero .big svg { width: 34px; height: 34px; }
.ib-meet-hero strong { display: block; font-size: 16px; margin-bottom: 3px; }
.ib-meet-cta { display: flex; gap: 10px; justify-content: center; margin-top: 16px; }
.ib-meet-table { margin-top: 30px; }
.ib-meet-tbl-head { font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--muted); margin-bottom: 8px; }
.ib-tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ib-tbl th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.ib-tbl td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.ib-tbl a { color: var(--brand); font-weight: 600; text-decoration: none; }
.ib-tbl-act { text-align: right; }
.ib-meet-code code { font-size: 22px; font-weight: 700; letter-spacing: 2px; padding: 8px 14px;
  background: var(--mer-c-wash); border-radius: var(--mer-radius); }
.call-name { position: absolute; left: 10px; bottom: 9px; display: flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 600; color: #fff; background: rgba(13,16,23,.55);
  padding: 4px 10px 4px 6px; border-radius: var(--mer-radius-pill); backdrop-filter: blur(4px); }
.call-bar { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 16px; }
/* Semantic control groups — MEDIA | PARTICIPATION | SESSION. */
.call-bar-group { display: inline-flex; align-items: center; gap: 12px; }
.call-bar-sep { width: 1px; height: 30px; background: rgba(255,255,255,.14); border-radius: 1px; }
.call-btn { width: 54px; height: 54px; border-radius: 50%; border: none; cursor: pointer;
  font-size: 21px; background: rgba(255,255,255,.12); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; transition: background .12s, transform .08s; }
.call-btn:hover { background: rgba(255,255,255,.22); }
.call-btn:active { transform: scale(.94); }
.call-btn svg { width: 23px; height: 23px; }
/* State semantics: OFF (muted/camera-stopped) is amber-tinted — never
   confusable with plain selection; destructive stays red. */
.call-btn.off { background: rgba(255, 176, 76, .22); color: #ffcf8f;
  box-shadow: inset 0 0 0 1.5px rgba(255, 190, 110, .55); }
.call-btn.on { box-shadow: inset 0 0 0 1.5px var(--mer-c-lime-brand, #b9df4b); }
.call-hang { background: var(--mer-danger); }
.call-hang:hover { background: #d5342a; }

/* ── PiP layout: in a 1:1, the remote person IS the stage; self-view
   floats small in the corner instead of splitting the room. ── */
.call-grid.pip { display: block; position: relative; padding: 0 20px 8px; }
.call-grid.pip .call-tile:not(.mine) { width: 100%; height: 100%; aspect-ratio: auto; }
.call-grid.pip .call-tile.mine { position: absolute; right: 34px; bottom: 22px;
  width: clamp(140px, 18vw, 240px); aspect-ratio: 16/10; min-height: 0; z-index: 4;
  box-shadow: 0 8px 30px rgba(0,0,0,.45); border-radius: 12px; }
.call-grid.pip .call-tile.mine .call-name { font-size: 11px; padding: 2px 8px 2px 4px; }

/* ── Notes & Actions panes ── */
.call-pane-empty { font-size: 12.5px; color: #8d97ad; padding: 18px 6px; line-height: 1.55; }
.call-note { display: flex; align-items: flex-start; gap: 8px; padding: 7px 2px;
  border-bottom: 1px solid rgba(255,255,255,.06); font-size: 13px; color: #dbe1ee; }
.call-note-at { font-size: 10.5px; color: #8d97ad; font-variant-numeric: tabular-nums;
  flex: none; margin-top: 2px; }
.call-note-txt { flex: 1; min-width: 0; line-height: 1.45; }
.call-note-kind { display: block; font-style: normal; font-size: 10px; font-weight: 700;
  letter-spacing: .05em; color: #8d97ad; margin-top: 2px; }
.call-note-task { background: none; border: 1px solid rgba(255,255,255,.18); color: #9fd3a8;
  border-radius: 7px; padding: 2px 6px; cursor: pointer; flex: none; }
.call-note-task:hover { background: rgba(159,211,168,.14); }
.call-note-task svg { width: 13px; height: 13px; }
.call-action-new { display: flex; gap: 6px; padding: 10px; flex-wrap: wrap;
  border-top: 1px solid rgba(255,255,255,.07); }

/* ── engineering HUD (Ctrl+Shift+D) ── */
.call-hud-panel { position: absolute; left: 16px; bottom: 96px; z-index: 40;
  margin: 0; max-width: 380px; max-height: 46vh; overflow: auto;
  background: rgba(8, 11, 18, .92); border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px; padding: 10px 14px; font-size: 11px; line-height: 1.6;
  color: #9fe8b0; font-family: ui-monospace, monospace; white-space: pre-wrap; }

/* ── post-meeting summary ── */
.pm-rows { display: flex; flex-direction: column; gap: 8px; }
.pm-row { display: flex; justify-content: space-between; gap: 14px; font-size: 13.5px;
  padding: 7px 0; border-bottom: 1px solid var(--mer-border, #eceef2); }
.pm-row .sub { flex: none; }

/* ── incoming-call ring ── */
.call-ring { position: fixed; inset: 0; z-index: 320; background: rgba(13,16,23,.5);
  display: flex; align-items: center; justify-content: center; backdrop-filter: blur(3px); }
.call-ring-card { background: var(--mer-surface); border-radius: var(--mer-radius-xl);
  box-shadow: var(--mer-shadow-2, 0 20px 60px rgba(16,20,32,.4)); padding: 28px 30px; text-align: center;
  width: min(340px, calc(100% - 32px)); animation: ringpop .18s ease-out; }
@keyframes ringpop { from { transform: scale(.92); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.call-ring-card .avatar { margin: 0 auto 12px; animation: ringwob 1.4s ease-in-out infinite; }
@keyframes ringwob { 0%,100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
.call-ring-who { font-size: 19px; font-weight: 750; }
.call-ring-sub { font-size: 13px; color: var(--mer-text-muted); margin-top: 3px; }
.call-ring-acts { display: flex; gap: 8px; justify-content: center; margin-top: 20px; }
.call-answer-audio { padding: 0 14px; }

/* ── new-message compose (people-picker) ── */
.dmc-search { display: flex; align-items: center; gap: 8px; padding: 9px 12px; margin-bottom: 10px;
  border: 1px solid var(--mer-border); border-radius: var(--mer-radius-sm); background: var(--mer-surface-2); }
.dmc-search .icon { width: 18px; height: 18px; color: var(--mer-text-faint); flex: 0 0 auto; }
.dmc-search input { flex: 1; border: 0; outline: 0; background: transparent; font: inherit; }
.dmc-results { max-height: 320px; overflow-y: auto; }
.dmc-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: none;
  background: none; padding: 9px 8px; cursor: pointer; border-radius: var(--mer-radius-sm); }
.dmc-row:hover { background: var(--mer-primary-tint); }
.dmc-who { flex: 1; min-width: 0; }
.dmc-who .t { font-weight: 600; font-size: 14px; }
.dmc-who .s { font-size: 12.5px; color: var(--mer-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dmc-row .icon { width: 17px; height: 17px; color: var(--mer-text-faint); flex: 0 0 auto; }
.dmc-row:hover .icon { color: var(--mer-primary); }

/* ══════════════════════════════════════════════════════════════════════
   Mobile app shell — a fixed bottom navigation + compact topbar, and a
   full responsive pass so every surface reflows to one column and clears
   the bottom bar. Grammar mirrors the Syneratix admin bottom nav
   (.bottomnav / __item / __ic / __lb).
   ══════════════════════════════════════════════════════════════════════ */

.bottomnav { display: none; }
/* "More" sheet — actions beyond the first four bottom-nav slots. */
.bn-more { display: none; }

@media (max-width: 768px) {
  /* Topbar → compact: brand + search + create. Routes & Me live below. */
  .gnav-inner { padding: 0 12px; gap: 8px; }
  .gnav-item[data-route], #gme, #to-social, .gnav-sep { display: none; }
  .gsearch { display: block; flex: 1 1 auto; min-width: 0; }
  .gnav-items { margin-left: auto; }
  .gnav-item .lbl { display: none; }

  /* Fixed bottom navigation (icons + labels, active = brand). */
  .bottomnav {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    height: 58px; background: var(--mer-surface);
    border-top: 1px solid var(--mer-border);
    box-shadow: 0 -6px 18px rgba(16, 20, 32, .07);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .bottomnav__item {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; padding: 6px 2px; border: none; background: none; cursor: pointer;
    color: var(--mer-text-muted); position: relative; min-width: 0;
  }
  .bottomnav__item.active { color: var(--tq-active); }
  .bottomnav__ic { display: inline-flex; }
  .bottomnav__ic svg { width: 22px; height: 22px; }
  .bottomnav__ic .avatar { width: 24px; height: 24px; font-size: 10px; }
  .bottomnav__lb {
    font-size: 10.5px; font-weight: 600; line-height: 1; max-width: 100%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .bottomnav__item.active::before {
    content: ""; position: absolute; top: 0; left: 24%; right: 24%; height: 2.5px;
    background: var(--mer-primary); border-radius: var(--mer-radius-pill);
  }

  /* Bottom sheet for the "More" actions — sits just above the bar. */
  .bn-more:not([hidden]) {
    display: flex; flex-direction: column; position: fixed; z-index: 95;
    left: 8px; right: 8px; bottom: calc(66px + env(safe-area-inset-bottom, 0));
    background: var(--mer-surface); border: 1px solid var(--mer-border);
    border-radius: 14px; box-shadow: 0 -8px 28px rgba(16, 20, 32, .16);
    padding: 6px; max-height: 60vh; overflow: auto;
  }
  .bn-more__item {
    display: flex; align-items: center; gap: 12px; padding: 12px 14px;
    border: none; background: none; cursor: pointer; border-radius: 10px;
    font: inherit; font-size: 14.5px; font-weight: 600; color: var(--mer-text);
    text-align: left;
  }
  .bn-more__item:hover, .bn-more__item:active { background: var(--mer-primary-tint); }
  .bn-more__item svg { width: 20px; height: 20px; color: var(--mer-text-muted); flex: none; }

  /* Clear the fixed bar on every scrollable page. */
  .page { padding: 16px 12px calc(74px + env(safe-area-inset-bottom, 0)); }
  .page.wide { padding: 16px 12px calc(74px + env(safe-area-inset-bottom, 0)); }

  /* Header menus become bottom sheets sitting above the bar. */
  .gmenu {
    top: auto; bottom: calc(66px + env(safe-area-inset-bottom, 0));
    left: 8px; right: 8px; min-width: 0; max-height: 60vh; overflow: auto;
  }

  /* Identity headers (profile / community / business) shrink. */
  .id-cover:not(.has-img) { height: 108px; }
  .id-head { padding: 0 14px 4px; gap: 12px; }
  .id-head .avatar.xl, .id-avatar-wrap { width: 74px; height: 74px; }
  .id-head .avatar.xl { margin-top: -38px; font-size: 28px; }
  .id-avatar-wrap { margin-top: -38px; }
  .id-avatar-wrap .avatar.xl { margin-top: 0; }
  .id-name { font-size: 20px; }
  .stat-strip .stat { min-width: 0; padding: 9px 2px; }

  /* Chat + DM stack the rail above the thread. */
  .chat { flex-direction: column; min-height: 68vh; }
  .chat-rail {
    flex: 0 0 auto; width: 100%; max-height: 126px; overflow-y: auto;
    border-right: none; border-bottom: 1px solid var(--mer-border);
  }
  .chat-thread { max-height: none; }
  .dm-wrap { flex-direction: column; min-height: 0; }
  .dm-rail {
    flex: 0 0 auto; width: 100%; max-height: 38vh;
    border-right: none; border-bottom: 1px solid var(--mer-border);
  }

  /* Call stage → single-column tiles, tighter bar. */
  .call-grid { grid-template-columns: 1fr; }
  .call-tile { min-height: 150px; }
  .call-head { padding: 12px 14px; }
  .call-bar { gap: 12px; padding: 14px; }
  .call-btn { width: 50px; height: 50px; }

  /* Modals hug the viewport. */
  .modal-back { padding: 10px; }
  .modal { max-height: 90vh; }

  /* Session rows + kind grid. */
  .s-row { gap: 10px; padding: 12px 14px; }
  .s-kind-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
  .bottomnav__lb { font-size: 9.5px; }
  .bottomnav__ic svg { width: 21px; height: 21px; }
  .id-name { font-size: 18px; }
  .s-kind-grid { grid-template-columns: 1fr; }
  .modal-head { padding: 12px 14px; }
  .modal-body { padding: 14px; }
}

/* ── Identity pages (profile · community · business) on phones ────────
   The header card reflows: cover shrinks, avatar recentres, the action
   cluster drops to a full-width row, stats stay in one strip and the
   tabs scroll horizontally. The image editor hugs the viewport. */
@media (max-width: 640px) {
  .id-cover:not(.has-img) { height: 110px; }
  .cover-cam span { display: none; }        /* icon-only edit chips */
  .id-head { flex-wrap: wrap; gap: 10px; padding: 0 14px 4px; }
  .id-head .avatar.xl { width: 74px; height: 74px; font-size: 28px; margin-top: -37px; border-width: 3px; }
  .id-avatar-wrap { width: 74px; height: 74px; margin-top: -37px; }
  .chead-actions {
    flex: 1 1 100%; justify-content: flex-start; padding-top: 2px !important;
    flex-wrap: nowrap; gap: 8px;
  }
  .chead-actions .btn { white-space: nowrap; }
  /* App grammar: the primary action (Edit profile / Follow / Message)
     fills the row; the ⋯ menu stays a compact square. */
  .chead-actions .btn-outline, .chead-actions .btn-primary { flex: 1 1 auto; justify-content: center; }
  .chead-actions .btn-ghost { flex: none; }
  .id-tagline { font-size: 13px; }
  .id-facts { flex-wrap: wrap; }
  .stat-strip .v { font-size: 16px; }
  .stat-strip .stat { padding: 8px 2px; }
  .tq-tabs--flush { overflow-x: auto; }
  .tq-tabs--flush .tq-tab { flex: none; white-space: nowrap; }
  .id-name, .id-tagline { overflow-wrap: anywhere; }
  .act-slider { grid-auto-columns: 86%; }

  /* Image editor: full-width stage, touch-sized controls */
  .med { width: 100%; max-width: none; }
  .med-body { padding: 10px 10px 4px; }
  .med-controls { gap: 8px; }
  .ico-btn { width: 40px; height: 40px; }
  .med-hint { display: none; }
}




/* ═══════════════════════════════════════════════════════════════════════
   OPPORTUNITY DESK — CGIAR-grammar hero band, tabbed body, meta rail,
   and the universal Easy Apply. One visual language for jobs,
   scholarships, grants and events.
   ═══════════════════════════════════════════════════════════════════════ */
.opp-hero { background: linear-gradient(135deg, var(--mer-c-brand-900), var(--mer-c-brand-800) 55%, #3c4ea0); color: #fff; border-radius: var(--mer-r-lg, 14px); padding: 28px 26px 26px; margin-bottom: 18px; box-shadow: var(--mer-shadow-2, 0 8px 24px rgba(16,20,32,.18)); }
.opp-hero-inner { max-width: 980px; }
.opp-hero-kicker { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--mer-c-lime-brand, #c6f432); margin-bottom: 10px; }
.opp-hero-kicker svg { width: 15px; height: 15px; }
.opp-hero h1 { margin: 0 0 6px; font-size: 26px; line-height: 1.2; letter-spacing: -.02em; color: #fff; }
.opp-hero .sub { color: var(--mer-c-brand-300); font-size: 13.5px; max-width: 640px; }
.opp-hero-split { display: flex; gap: 20px; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; }
.opp-hero-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.opp-hero-badges .badge { background: rgba(255,255,255,.13); color: #fff; border: 1px solid rgba(255,255,255,.22); }
.opp-hero-badges .badge.lime { background: var(--mer-c-lime-brand); color: var(--mer-c-brand-950); border-color: transparent; }
.opp-hero-badges .badge.warn { background: #ffb54d; color: #4a2f00; border-color: transparent; }
.opp-hero-act { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.opp-hero-act .sub { font-size: 12px; }

.easy-apply { display: inline-flex; align-items: center; gap: 8px; background: var(--mer-execute); color: var(--mer-c-brand-950); border: 0; border-radius: 999px; padding: 11px 22px; font-size: 14px; font-weight: 800; cursor: pointer; box-shadow: 0 4px 14px rgba(198,244,50,.35); transition: transform .12s ease, box-shadow .12s ease; }
.easy-apply svg { width: 16px; height: 16px; }
.easy-apply:hover { background: var(--mer-execute-hover); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(198,244,50,.45); }
.easy-apply--ink { background: var(--mer-primary); color: #fff; box-shadow: none; }
.easy-apply--ink:hover { background: var(--mer-primary-hover); box-shadow: none; }

.opp-body { max-width: 1080px; }
.opp-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; }
.opp-meta { position: sticky; top: 68px; }
.opp-meta-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--mer-line, #e7e9f0); font-size: 13px; }
.opp-meta-row:last-of-type { border-bottom: 0; }
.opp-meta-row .k { color: var(--mer-text-faint); font-weight: 600; white-space: nowrap; }
.opp-meta-row .v { text-align: right; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.opp-desc { font-size: 14px; line-height: 1.65; white-space: pre-wrap; }
.opp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.opp-list li { display: flex; gap: 9px; align-items: flex-start; font-size: 13.5px; line-height: 1.5; }
.opp-list li svg { width: 15px; height: 15px; flex: none; margin-top: 2px; color: var(--mer-primary); }

.opp-form { max-width: 760px; }
.opp-form-h { display: flex; align-items: center; gap: 9px; margin: 0 0 12px; font-size: 15px; font-weight: 800; }
.opp-form-h svg { width: 17px; height: 17px; color: var(--mer-primary); }
.opp-form-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 0 4px; }

.ea-card { display: flex; align-items: center; gap: 11px; padding: 11px 13px; border: 1px solid var(--mer-line, #e7e9f0); border-radius: 12px; background: var(--mer-surface-2, #f7f8fb); margin-bottom: 12px; }
.ea-card .bg-title { font-size: 14px; }

/* ═══════════════════════════════════════════════════════════════════════
   PROFESSIONAL BACKGROUND — LinkedIn-grammar rows + Behance-grammar
   portfolio grid. Shared by profile tabs and the Easy Apply preview.
   ═══════════════════════════════════════════════════════════════════════ */
.bg-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.bg-head h3 { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.bg-head h3 svg { width: 16px; height: 16px; color: var(--mer-primary); }
.bg-row { display: flex; gap: 12px; align-items: flex-start; padding: 11px 0; border-bottom: 1px solid var(--mer-line, #e7e9f0); }
.bg-row:last-child { border-bottom: 0; }
.bg-dot { width: 38px; height: 38px; flex: none; border-radius: 10px; display: grid; place-items: center; color: #fff; }
.bg-dot svg { width: 17px; height: 17px; }
.bg-main { min-width: 0; flex: 1; }
.bg-title { font-weight: 700; font-size: 14px; line-height: 1.3; }
.bg-sub { font-size: 12.5px; color: var(--mer-text-muted); margin-top: 1px; }
.bg-note { font-size: 13px; color: var(--mer-text-muted); margin-top: 5px; line-height: 1.5; }
.bg-acts { display: inline-flex; gap: 2px; flex: none; }
.bg-empty { font-size: 13px; color: var(--mer-text-faint); padding: 6px 0; }
.bg-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }

.badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.badge-tile { display: flex; gap: 10px; align-items: center; padding: 11px 12px; border: 1px solid var(--mer-line, #e7e9f0); border-radius: 12px; background: var(--mer-surface-2, #f7f8fb); }
.badge-medal { width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--mer-execute-container, #f2fbd8); color: var(--mer-c-brand-800); }
.badge-medal svg { width: 17px; height: 17px; }

.skill-row { display: flex; flex-wrap: wrap; gap: 7px; }
.skill-chip { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 999px; background: var(--mer-c-brand-50, #eef0f8); color: var(--mer-c-brand-800); font-size: 12.5px; font-weight: 600; border: 1px solid var(--mer-c-brand-100, #e2e5f4); }

.folio-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.folio-card { background: var(--mer-surface, #fff); border: 1px solid var(--mer-line, #e7e9f0); border-radius: 14px; overflow: hidden; transition: transform .14s ease, box-shadow .14s ease; }
.folio-card:hover { transform: translateY(-2px); box-shadow: var(--mer-shadow-2, 0 8px 24px rgba(16,20,32,.12)); }
.folio-cover { aspect-ratio: 4 / 3; display: grid; place-items: center; overflow: hidden; }
.folio-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.folio-mono { font-size: 42px; font-weight: 800; color: rgba(255,255,255,.85); font-family: var(--mer-font-display, inherit); }
.folio-body { padding: 12px 13px 11px; }
.folio-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.folio-tags span { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--mer-c-brand-50, #eef0f8); color: var(--mer-c-brand-700); }
.folio-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 9px; }
.folio-pick { display: flex; align-items: center; gap: 10px; }
.folio-pick-prev { width: 84px; height: 63px; border-radius: 8px; border: 1px solid var(--mer-line, #e7e9f0); background: var(--mer-surface-2, #f7f8fb); display: grid; place-items: center; font-size: 11px; color: var(--mer-text-faint); overflow: hidden; }
.folio-pick-prev img { width: 100%; height: 100%; object-fit: cover; }

/* Portfolio — masonry wall (CSS columns; cards keep natural height). */
.folio-masonry { columns: 2 240px; column-gap: 14px; }
.folio-masonry .folio-card--m { break-inside: avoid; margin-bottom: 14px; display: block; }
.folio-cover--m { aspect-ratio: auto; min-height: 90px; position: relative; }
.folio-cover--m img { width: 100%; height: auto; display: block; }
.folio-cover--m .folio-mono { padding: 34px 0; }

/* Portfolio detail page (Behance grammar). */
.folio-page { overflow: hidden; }
.folio-hero { position: relative; min-height: 160px; max-height: 420px; overflow: hidden; display: grid; }
.folio-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.folio-back { position: absolute; left: 12px; top: 12px; background: rgba(255,255,255,.92); }
.folio-title { font-size: 24px; font-weight: 800; margin: 4px 0 6px; font-family: var(--mer-font-display, inherit); }
.folio-byline { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600;
  color: var(--mer-text-muted); cursor: pointer; }
.folio-sect { margin-top: 22px; }
.folio-sect h3 { font-size: 14px; margin-bottom: 6px; }
.folio-sect p { font-size: 13.5px; line-height: 1.6; color: var(--mer-text); }
.folio-metrics { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.folio-metric { border: 1px solid var(--mer-line, #e7e9f0); border-radius: 12px; padding: 12px; text-align: center; }
.folio-metric .v { font-size: 20px; font-weight: 800; color: var(--mer-c-brand-950); }
.folio-metric .k { font-size: 11px; font-weight: 600; color: var(--mer-text-muted); margin-top: 2px; }
.folio-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.folio-table th, .folio-table td { border: 1px solid var(--mer-line, #e7e9f0); padding: 7px 10px; text-align: left; }
.folio-table th { background: var(--mer-surface-2, #f7f8fb); font-weight: 700; }
.folio-gal--masonry { columns: 2 220px; column-gap: 10px; }
.folio-gal--masonry img { width: 100%; height: auto; border-radius: 10px; margin-bottom: 10px; display: block; }
.folio-gal--grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.folio-gal--grid img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; display: block; }
.folio-gal--list img { width: 100%; height: auto; border-radius: 10px; margin-bottom: 10px; display: block; }
.folio-gal-strip { display: flex; flex-wrap: wrap; gap: 8px; }
.folio-gal-chip { position: relative; width: 64px; height: 64px; border-radius: 8px; overflow: hidden;
  border: 1px solid var(--mer-line, #e7e9f0); }
.folio-gal-chip img { width: 100%; height: 100%; object-fit: cover; }
.folio-gal-chip button { position: absolute; right: 2px; top: 2px; width: 18px; height: 18px; border: 0;
  border-radius: 50%; background: rgba(16,20,32,.7); color: #fff; font-size: 11px; cursor: pointer; line-height: 1; }
.folio-doc-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; margin-bottom: 6px;
  border: 1px solid var(--mer-line, #e7e9f0); border-radius: 10px; font-size: 13px; font-weight: 600;
  background: none; width: 100%; cursor: pointer; text-align: left; color: inherit; font-family: inherit; }
.folio-collabs { display: flex; flex-wrap: wrap; gap: 6px; }

@media (max-width: 900px) {
  .opp-grid { grid-template-columns: 1fr; }
  .opp-meta { position: static; }
  .opp-hero { padding: 22px 18px; }
  .opp-hero h1 { font-size: 21px; }
  .opp-hero-act { align-items: flex-start; }
}
@media (max-width: 560px) {
  .bg-2col { grid-template-columns: 1fr; }
  .folio-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}

/* ─── Events — deliberately spare cards ──────────────────────────────── */

.ev-list { display: flex; flex-direction: column; gap: 10px; }
.ev-card {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px;
  cursor: pointer; transition: box-shadow .15s ease;
}
.ev-card:hover { box-shadow: var(--mer-shadow-2); }
.ev-cancelled { opacity: .62; }
.ev-date {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 52px; height: 56px; border-radius: var(--mer-radius-lg);
  background: var(--mer-primary-tint); color: var(--mer-primary); flex: none;
}
.ev-date-m { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.ev-date-d { font-size: 20px; font-weight: 700; line-height: 1.1; }
.ev-body { flex: 1; min-width: 0; }
.ev-title { font-weight: 600; font-size: 14.5px; margin-bottom: 2px; }
.ev-meta { color: var(--mer-text-muted); font-size: 12.5px; display: flex; gap: 5px; flex-wrap: wrap; }
.ev-foot { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.ev-act { display: flex; flex-direction: column; gap: 6px; flex: none; }
.ev-page-head { display: flex; justify-content: space-between; gap: 12px; }
.ev-facts { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; font-size: 13.5px; }
.ev-facts > div { display: flex; align-items: center; gap: 8px; }
.ev-facts svg { width: 16px; height: 16px; color: var(--mer-text-muted); flex: none; }
.ev-page-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }
@media (max-width: 560px) {
  .ev-card { flex-wrap: wrap; }
  .ev-act { flex-direction: row; width: 100%; }
  .ev-act .btn { flex: 1; }
}

/* ══════════════════════════════════════════════════════════════════════
   Landing page — .ld grammar (public tranquil.africa front door)
   Mission hero · interactive real globe · enable cards · video · ESG
   Tokens: navy #0B1D3C · navy-soft #182B56 · lemon #C6E23A · bg #F4F5F3
   ══════════════════════════════════════════════════════════════════════ */

.ld {
  --ld-navy: #0B1D3C; --ld-navy-soft: #182B56; --ld-lemon: #C6E23A;
  --ld-bg: #F4F5F3; --ld-ink: #10203d; --ld-muted: #5a6577;
  --ld-r-lg: 28px; --ld-r-md: 20px; --ld-r-sm: 14px;
  --ld-shadow: 0 18px 44px rgba(11, 29, 60, .10);
  background: var(--ld-bg); color: var(--ld-ink); min-height: 100vh;
  color-scheme: light;
  font-family: "Poppins", var(--mer-font-display, var(--font, system-ui)), sans-serif;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
.ld a { text-decoration: none; color: inherit; }
.ld h1, .ld h2, .ld h3 { margin: 0; font-weight: 700; letter-spacing: -.015em; }

/* Motion */
@keyframes ldFadeDrop { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes ldBounce { 0%, 100% { transform: translateY(0); opacity: .9; } 50% { transform: translateY(9px); opacity: .4; } }
.ld .fade-drop { animation: ldFadeDrop .7s cubic-bezier(.22,.7,.3,1) both; }
.ld-reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.22,.7,.3,1); }
.ld-reveal.ld-in { opacity: 1; transform: none; }
/* Section entrances — clear, one-shot, GPU-cheap (opacity + transform only) */
.ld-anim { opacity: 0; transition: opacity .8s ease, transform .8s cubic-bezier(.22,.7,.3,1); will-change: opacity, transform; }
.ld-anim-rise { transform: translateY(46px); }
.ld-anim-pop { transform: translateY(30px) scale(.94); }
.ld-anim.ld-in { opacity: 1; transform: none; will-change: auto; }
@media (prefers-reduced-motion: reduce) {
  .ld .fade-drop, .ld-scroll-cue svg { animation: none !important; }
  .ld-reveal, .ld-anim { opacity: 1; transform: none; transition: none; }
}

/* Nav — logo + one lemon button, nothing else */
.ld-nav {
  position: sticky; top: 0; z-index: 40; display: flex; align-items: center;
  justify-content: space-between; padding: 14px clamp(18px, 5vw, 56px);
  background: rgba(244,245,243,.86); backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(11,29,60,.07);
}
.ld-brand { display: flex; align-items: center; }

/* Buttons */
.ld-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 24px; border-radius: 10px; font-weight: 700; font-size: 14.5px;
  transition: transform .18s ease, filter .18s ease;
}
.ld-btn:hover { transform: translateY(-2px); filter: brightness(1.04); }
.ld-btn-lg { padding: 14px 32px; font-size: 16px; }
.ld-btn-lemon { background: #C6E23A; color: var(--ld-navy); }

/* 1 · Mission hero — full-screen video, pure bold white copy */
.ld-hero-v {
  position: relative; overflow: hidden; display: grid; place-items: center;
  align-content: center; text-align: center;
  min-height: calc(100vh - 61px);
  min-height: calc(100svh - 61px);   /* the sticky nav; next section peeks in on scroll */
  padding: clamp(40px, 8vw, 90px) clamp(20px, 5vw, 56px);
}
.ld-hero-v video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;
}
/* Near-black wash so the white mission copy reads over any footage */
.ld-hero-shade { position: absolute; inset: 0; z-index: 0; background: rgba(4, 8, 18, .62); }
.ld-hero-v h1 {
  position: relative; z-index: 1;
  font-size: clamp(32px, 4.8vw, 62px); line-height: 1.14; color: #fff; font-weight: 800;
  max-width: 22ch; margin: 0 auto;
}
.ld-scroll-cue {
  position: relative; z-index: 1;
  display: inline-flex; flex-direction: column; gap: 0; margin-top: 48px;
  color: #fff; animation-delay: 260ms;
}
.ld-scroll-cue svg { width: 30px; height: 30px; stroke: #fff; animation: ldBounce 1.8s ease-in-out infinite; }
.ld-scroll-cue svg:last-child { margin-top: -14px; animation-delay: .22s; opacity: .55; }

/* 2 · Global connection map — expanded, centered globe + feature card */
.ld-globe-sect { max-width: 1400px; margin: 0 auto; padding: clamp(34px, 5vw, 76px) clamp(16px, 4vw, 48px); text-align: center; }
.ld-globe-sect h2 { font-size: clamp(20px, 2.4vw, 30px); color: var(--ld-navy); max-width: 34ch; margin: 0 auto 34px; }
.ld-globe-stage { position: relative; display: grid; place-items: center; }
.ld-globe-wrap { position: relative; width: min(840px, 96vw); aspect-ratio: 1; }
.ld-globe { width: 100%; height: 100%; display: block; cursor: grab; }
.ld-globe:active { cursor: grabbing; }

/* Compact map markers — avatar + title */
.ld-node-marker {
  position: absolute; top: 0; left: 0; z-index: 3; display: flex; align-items: center; gap: 7px;
  padding: 3px 10px 3px 3px; border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(11,29,60,.72); backdrop-filter: blur(6px); color: #fff;
  font-family: inherit; transition: opacity .25s ease, box-shadow .25s ease;
  box-shadow: 0 0 0 0 rgba(198,226,58,.0);
  will-change: transform;
}
.ld-node-marker img {
  width: 34px; height: 34px; border-radius: 50%; object-fit: cover;
  border: 2px solid #C6E23A; display: block; background: var(--ld-navy-soft);
}
.ld-node-t { display: grid; text-align: left; line-height: 1.15; }
.ld-node-t strong { font-size: 11px; font-weight: 700; white-space: nowrap; }
.ld-node-marker:hover, .ld-node-on {
  box-shadow: 0 0 0 5px rgba(198,226,58,.25), 0 10px 26px rgba(11,29,60,.4);
  z-index: 4;
}

/* Active feature cards — three at once: active on top, neighbours flanking */
.ld-feature {
  position: absolute; z-index: 5; width: 280px;
  border-radius: var(--ld-r-md); overflow: hidden; background: #fff;
  box-shadow: var(--ld-shadow); text-align: left;
  opacity: 0; transform: translateY(14px);
}
.ld-feature-top { top: -2%; right: 2%; }
.ld-feature-left { left: 0; bottom: 6%; }
.ld-feature-right { right: 0; bottom: -4%; }
.ld-feature-dim { width: 240px; opacity: 0; }
.ld-feature-dim.ld-feature-in { opacity: .82; transform: scale(.96); }
.ld-feature-dim img { height: 110px; }
.ld-feature-dim .ld-feature-body p { display: none; }
.ld-feature-in { opacity: 1; transform: none; transition: opacity .5s ease, transform .5s cubic-bezier(.22,.7,.3,1); }
.ld-feature img { width: 100%; height: 160px; object-fit: cover; display: block; }
.ld-feature-body { padding: 16px 18px 18px; display: grid; gap: 7px; }
.ld-feature-body h3 { font-size: 17px; line-height: 1.3; color: var(--ld-navy); }
.ld-feature-body p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--ld-muted); }
@media (max-width: 900px) {
  .ld-feature-top { position: static; width: min(420px, 100%); margin: 22px auto 0; transform: none; }
  .ld-feature-left, .ld-feature-right { display: none; }
}

/* 3 · Mission + enables */
.ld-sect { max-width: 1180px; margin: 0 auto; padding: clamp(44px, 6vw, 96px) clamp(20px, 5vw, 56px); text-align: center; }
.ld-sect h2 { font-size: clamp(26px, 3.2vw, 42px); color: var(--ld-navy); line-height: 1.15; }
.ld-sect-lede { font-size: clamp(15px, 1.4vw, 18px); line-height: 1.65; color: var(--ld-muted); max-width: 62ch; margin: 18px auto 0; }
/* Masonry — one large tile (People), a vertical rectangle (Communities),
   a square (Businesses) and a horizontal rectangle (Institutions) */
.ld-enable {
  display: grid; gap: 18px; margin-top: 44px; text-align: left;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: 220px 220px 260px;
  grid-template-areas:
    "people people community"
    "people people community"
    "business institution institution";
}
.ld-en-people { grid-area: people; }
.ld-en-community { grid-area: community; }
.ld-en-business { grid-area: business; }
.ld-en-institution { grid-area: institution; }
.ld-enable-card {
  position: relative; border-radius: var(--ld-r-md); overflow: hidden;
  display: flex; align-items: flex-end; color: #fff; box-shadow: var(--ld-shadow);
}
.ld-enable-card:hover .ld-card-video { transform: scale(1.04); }
.ld-card-video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  z-index: 0; transition: transform .5s ease;
}
.ld-enable-card::before { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(6,12,26,.05) 30%, rgba(6,12,26,.72)); }
.ld-enable-card::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(120% 90% at 80% 0%, rgba(198,226,58,.14), transparent 55%);
}
.ld-enable-copy { position: relative; z-index: 2; padding: 24px 22px; transition: opacity .35s ease; }
.ld-enable-copy h3 { font-size: 22px; color: #fff; }
/* Hover: the title yields to a centered, bold description of what Tranquil
   is to each audience */
.ld-enable-info {
  position: absolute; inset: 0; z-index: 2; display: grid; place-items: center;
  padding: clamp(18px, 4vw, 40px); text-align: center;
  background: rgba(6, 12, 26, .68);
  opacity: 0; transition: opacity .35s ease;
}
.ld-enable-info p {
  margin: 0; color: #fff; font-weight: 700; font-size: clamp(14px, 1.35vw, 17.5px);
  line-height: 1.6; max-width: 46ch;
}
.ld-enable-card:hover .ld-enable-info,
.ld-enable-card:focus-visible .ld-enable-info { opacity: 1; }
.ld-enable-card:hover .ld-enable-copy,
.ld-enable-card:focus-visible .ld-enable-copy { opacity: 0; }

/* 4 · ESG card — the image, clear and sharp; pure white copy, no shadows */
.ld-esg-sect { max-width: 1180px; margin: 0 auto; padding: clamp(44px, 6vw, 80px) clamp(18px, 5vw, 56px); }
.ld-esg {
  position: relative;
  border-radius: var(--ld-r-lg); overflow: hidden; min-height: clamp(360px, 44vw, 520px);
  background-size: cover; background-position: center; box-shadow: var(--ld-shadow);
  display: flex; flex-direction: column; justify-content: space-between;
}
/* The 5Ps — a white marquee gliding across the top of the section */
@keyframes ldMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ld-marquee { overflow: hidden; padding: clamp(16px, 2.5vw, 26px) 0 0; }
.ld-marquee-track {
  display: inline-flex; gap: clamp(34px, 5vw, 72px); white-space: nowrap;
  padding-right: clamp(34px, 5vw, 72px);
  animation: ldMarquee 22s linear infinite; will-change: transform;
}
.ld-marquee-item {
  display: inline-flex; align-items: center; gap: 10px;
  color: #fff; font-weight: 800; font-size: clamp(15px, 1.6vw, 20px);
  letter-spacing: .02em;
}
.ld-marquee-item svg { width: 22px; height: 22px; stroke: #fff; flex: none; }
@media (prefers-reduced-motion: reduce) { .ld-marquee-track { animation: none; } }
.ld-esg-copy { padding: clamp(24px, 4vw, 46px); max-width: 640px; }
.ld-esg-copy p {
  margin: 0 0 22px; color: #fff; font-size: clamp(17px, 1.9vw, 23px); font-weight: 800;
  line-height: 1.45;
}

/* Footer — logo + legal only */
.ld-foot {
  max-width: 1180px; margin: 0 auto; padding: 8px clamp(18px, 5vw, 56px) 38px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px; justify-content: space-between;
}
.ld-foot-legal { font-size: 12.5px; color: var(--ld-muted); }
.ld-foot-legal a { color: var(--ld-navy); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* Responsive */
@media (max-width: 760px) {
  .ld-enable {
    grid-template-columns: 1fr;
    grid-template-rows: none; grid-auto-rows: 220px;
    grid-template-areas: "people" "community" "business" "institution";
  }
  .ld-en-people { min-height: 300px; }
}
@media (max-width: 620px) {
  .ld-btn { padding: 9px 18px; font-size: 13.5px; }
  .ld-btn-lg { padding: 13px 26px; font-size: 15px; }
}

/* ═══ media-social v2: video player · stories · reels · documents ═══ */

/* — custom video player — */
.tqvp { position: relative; border-radius: 10px; overflow: hidden; background: #0b0e14; }
.tqvp video { display: block; width: 100%; max-height: 560px; background: #0b0e14; }
.tqvp--fill, .tqvp--fill video { width: 100%; height: 100%; max-height: none; object-fit: cover; }
.tqvp-spin { position: absolute; inset: 0; display: none; place-items: center; pointer-events: none; }
.tqvp-spin.on { display: grid; }
.tqvp-ring { width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(255,255,255,.25); border-top-color: var(--lime, #a3e635); animation: tqvp-rot .8s linear infinite; }
@keyframes tqvp-rot { to { transform: rotate(360deg); } }
.tqvp-big { position: absolute; inset: 0; margin: auto; width: 58px; height: 58px; border-radius: 50%; border: 0; background: rgba(10,12,18,.55); color: #fff; display: grid; place-items: center; cursor: pointer; backdrop-filter: blur(4px); }
.tqvp-big .icon { width: 26px; height: 26px; }
.tqvp-bar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: linear-gradient(transparent, rgba(8,10,16,.75)); opacity: 0; transition: opacity .18s; }
.tqvp:hover .tqvp-bar, .tqvp.playing:hover .tqvp-bar, .tqvp:not(.playing) .tqvp-bar { opacity: 1; }
.tqvp-b { border: 0; background: none; color: #fff; cursor: pointer; display: grid; place-items: center; padding: 2px; }
.tqvp-b .icon { width: 18px; height: 18px; }
.tqvp-t { font-size: 11.5px; color: rgba(255,255,255,.85); font-variant-numeric: tabular-nums; }
.tqvp-seek { position: relative; flex: 1; height: 4px; border-radius: 2px; background: rgba(255,255,255,.25); cursor: pointer; }
.tqvp-buf { position: absolute; inset: 0 auto 0 0; border-radius: 2px; background: rgba(255,255,255,.35); width: 0; }
.tqvp-pos { position: absolute; inset: 0 auto 0 0; border-radius: 2px; background: var(--lime, #a3e635); width: 0; }

/* — story tray — */
.story-card { padding: 10px 12px; }
.story-strip { display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; }
.story-strip::-webkit-scrollbar { display: none; }
.story-bub { border: 0; background: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 62px; }
.story-ring { position: relative; display: grid; place-items: center; border-radius: 50%; padding: 3px; background: conic-gradient(var(--lime,#a3e635), var(--navy,#1e3a8a), var(--lime,#a3e635)); }
.story-bub.seen .story-ring { background: var(--line, #e3e6ee); }
.story-ring .avatar { border: 2px solid #fff; }
.story-plus { position: absolute; right: -2px; bottom: -2px; width: 20px; height: 20px; border-radius: 50%; background: var(--navy, #1e3a8a); color: #fff; display: grid; place-items: center; border: 2px solid #fff; }
.story-plus .icon { width: 12px; height: 12px; }
.story-lbl { font-size: 11.5px; color: var(--sub, #5c6470); max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* avatar ring on profile / community pages */
.has-story { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--lime, #a3e635); }
.has-story.story-seen { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--line, #e3e6ee); }

/* — story viewer — */
.story-view { position: fixed; inset: 0; z-index: 1200; background: #0b0e14; display: flex; flex-direction: column; align-items: center; }
.story-progress { position: absolute; top: 10px; left: 12px; right: 12px; display: flex; gap: 4px; z-index: 3; }
.story-seg { flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,.3); overflow: hidden; }
.story-seg.done { background: #fff; }
.story-fill { display: block; height: 100%; width: 100%; background: #fff; transform: translateX(-100%); transition: transform linear; }
.story-fill.run { transform: translateX(0); }
.story-top { position: absolute; top: 22px; left: 12px; right: 12px; display: flex; align-items: center; gap: 8px; z-index: 3; color: #fff; }
.story-who { display: flex; flex-direction: column; line-height: 1.2; font-size: 13px; }
.story-who span { font-size: 11px; opacity: .75; }
.story-del { margin-left: auto; margin-right: 40px; border: 0; background: none; color: #fff; cursor: pointer; }
.story-x { position: absolute; top: 18px; right: 12px; z-index: 4; border: 0; background: none; color: #fff; cursor: pointer; }
.story-stage { flex: 1; width: min(480px, 100vw); display: grid; place-items: center; position: relative; }
.story-media { position: relative; width: 100%; height: 100%; display: grid; place-items: center; }
.story-img, .story-vid { max-width: 100%; max-height: calc(100vh - 130px); border-radius: 12px; object-fit: contain; }
.story-cap { position: absolute; left: 16px; right: 16px; bottom: 18px; color: #fff; font-size: 14.5px; text-shadow: 0 1px 8px rgba(0,0,0,.6); text-align: center; }
.story-foot { position: absolute; bottom: 22px; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; z-index: 3; }
.story-cta { border-radius: 999px; padding: 9px 22px; }
.story-music { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: rgba(12,14,20,.6); color: #fff; font-size: 12.5px; text-decoration: none; backdrop-filter: blur(4px); max-width: 85%; }
.story-music .icon { width: 14px; height: 14px; }
.story-music span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.post-music { background: var(--bg-soft, #f2f4f8); color: var(--ink, #101420); }
.story-navz { position: absolute; top: 0; bottom: 0; width: 30%; border: 0; background: none; cursor: pointer; z-index: 2; }
.story-prev { left: 0; } .story-next { right: 0; width: 45%; }

/* template treatments — caption chrome per template family */
.st-tpl--img_announcement .story-cap, .st-tpl--vid_announcement .story-cap { background: var(--navy,#1e3a8a); border-radius: 10px; padding: 10px 14px; font-weight: 700; }
.st-tpl--img_sale .story-cap, .st-tpl--vid_sale .story-cap { background: #d93025; border-radius: 10px; padding: 10px 14px; font-weight: 800; letter-spacing: .3px; }
.st-tpl--img_product .story-cap, .st-tpl--vid_product .story-cap { background: rgba(255,255,255,.94); color: var(--ink,#101420); border-radius: 10px; padding: 10px 14px; font-weight: 600; text-shadow: none; }
.st-tpl--img_event .story-cap, .st-tpl--vid_event .story-cap { border-left: 4px solid var(--lime,#a3e635); background: rgba(10,12,18,.72); border-radius: 8px; padding: 10px 14px; text-align: left; }
.st-tpl--img_milestone .story-cap, .st-tpl--vid_milestone .story-cap { font-size: 18px; font-weight: 800; }
.st-tpl--img_quote .story-cap { font-size: 19px; font-style: italic; font-weight: 600; }
.st-tpl--img_job .story-cap, .st-tpl--vid_job .story-cap { background: var(--lime,#a3e635); color: var(--ink,#101420); border-radius: 10px; padding: 10px 14px; font-weight: 800; text-shadow: none; }
.st-tpl--img_grant .story-cap, .st-tpl--vid_grant .story-cap { background: rgba(30,58,138,.92); border-radius: 10px; padding: 10px 14px; font-weight: 700; }
.st-tpl--img_portrait .story-img { border-radius: 24px; box-shadow: 0 0 60px rgba(163,230,53,.25); }
.st-tpl--vid_testimonial .story-cap { background: rgba(10,12,18,.72); border-radius: 10px; padding: 10px 14px; font-size: 16px; }
.st-tpl--vid_behind .story-cap { text-align: left; left: 16px; right: auto; max-width: 75%; }

/* — platform verification badge — */
.vbadge { vertical-align: -2px; margin-left: 4px; flex: none; }
/* Play: the platform badge scales with its context — hero titles get a
   bigger stamp, rail cards the standard 15px. */
.tp-vbadge-wrap .vbadge { width: .5em; height: .5em; vertical-align: .08em; margin-left: 6px; }
.tp-pub-name .vbadge { vertical-align: -2px; }

/* — recent-activity slider (profile overview) — horizontal snap scroll,
   cards clamped so the strip stays one row tall on every viewport. */
.act-slider { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 46%); gap: 12px;
  overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 2px 12px; scrollbar-width: thin; }
.act-slider > * { scroll-snap-align: start; min-width: 0; margin: 0 !important;
  align-self: start; max-height: 420px; overflow: hidden; }
.act-slider > .card { display: flex; flex-direction: column; }

/* — video studio extras — */
.med-clips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 2px; }
.med-clips:empty { display: none; }
.med-aspects { display: inline-flex; gap: 6px; flex-wrap: wrap; }

/* — story composer (preview-first) — */
.story-compose { max-width: 460px; }
.st-drop { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 32px 16px; border: 2px dashed var(--line, #e3e6ee); border-radius: 12px; cursor: pointer; color: var(--sub, #5c6470); }
.st-drop .icon { width: 26px; height: 26px; }
.st-stage { margin-bottom: 12px; }
.st-preview { position: relative; display: grid; place-items: center; background: #0b0e14; border-radius: 14px; overflow: hidden; aspect-ratio: 9 / 14; max-height: 380px; margin: 0 auto; width: 100%; }
.st-preview img, .st-preview video { width: 100%; height: 100%; object-fit: cover; }
/* Sits over the preview so the media can be swapped without closing and
   reopening the composer, which previously meant losing the caption. */
.st-replace { position: absolute; top: 10px; right: 10px; z-index: 2;
  border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(0,0,0,.55); color: #fff; font-size: 12px; font-weight: 600;
  padding: 5px 12px; backdrop-filter: blur(4px); }
.st-replace:hover { background: rgba(0,0,0,.75); }
.st-preview-cap { position: absolute; left: 12px; right: 12px; bottom: 48px; color: #fff; font-size: 14px; line-height: 1.35; text-shadow: 0 1px 4px rgba(0,0,0,.6); word-break: break-word; }
.st-preview-cta { position: absolute; left: 50%; transform: translateX(-50%); bottom: 12px; background: #fff; color: #111; font-size: 13px; font-weight: 600; padding: 6px 16px; border-radius: 999px; pointer-events: none; }
.st-fields { display: flex; flex-direction: column; gap: 8px; }
.st-extras { display: flex; gap: 8px; }
.st-extras .fld--half { flex: 1; min-width: 0; }
.st-target { width: 100%; }
.st-row { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
.st-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.st-musicmeta { display: flex; gap: 6px; }
.st-musicmeta input { flex: 1; }

/* — documents (LinkedIn-grade card + viewer) — */
.doc-card { display: flex; gap: 12px; border: 1px solid var(--line, #e3e6ee); border-radius: 12px; overflow: hidden; }
.doc-thumb { position: relative; width: 108px; min-height: 108px; background: color-mix(in srgb, var(--doc-c, #5c6470) 10%, #fff); display: grid; place-items: center; color: var(--doc-c, #5c6470); }
.doc-thumb .icon { width: 34px; height: 34px; }
.doc-tag { position: absolute; top: 8px; left: 8px; font-size: 10.5px; font-weight: 800; letter-spacing: .5px; color: #fff; background: var(--doc-c, #5c6470); border-radius: 4px; padding: 2px 6px; }
.doc-meta { flex: 1; min-width: 0; padding: 12px 12px 12px 0; display: flex; flex-direction: column; gap: 4px; }
.doc-name { font-weight: 700; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-sub { font-size: 12px; color: var(--sub, #5c6470); }
.doc-acts { display: flex; gap: 8px; margin-top: auto; flex-wrap: wrap; }
.doc-view-back { z-index: 1300; }
.doc-view { width: min(920px, 94vw); height: 88vh; display: flex; flex-direction: column; }
.doc-view-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 80%; }
.doc-frame { flex: 1; border: 0; width: 100%; border-radius: 0 0 12px 12px; background: #40444d; }

/* — feed extras — */
.feed-tools { display: flex; gap: 8px; margin: -4px 0 8px; }
.new-posts-pill { position: sticky; top: 68px; z-index: 40; margin: 0 auto 10px; display: flex; align-items: center; gap: 6px; border: 0; border-radius: 999px; padding: 8px 18px; background: var(--navy, #1e3a8a); color: #fff; font-weight: 700; font-size: 13px; cursor: pointer; box-shadow: 0 6px 18px rgba(16,20,32,.25); }
.new-posts-pill[hidden] { display: none; }
.new-posts-pill .icon { width: 15px; height: 15px; }
/* Stacked faces: who posted, at a glance. Overlapped so five people fit
   in the width of about three, and ringed in the pill's own colour so
   the overlap reads as depth rather than as smudge. */
.np-faces { display: inline-flex; align-items: center; }
.np-faces[hidden] { display: none; }
.np-face { display: inline-flex; margin-right: -7px; }
.np-face:last-child { margin-right: 4px; }
.np-face .avatar { border: 2px solid var(--navy, #1e3a8a); box-shadow: none; }
/* Posts that arrived while you were reading announce themselves once,
   then settle — a card that appears with no motion at all reads as a
   glitch, and one that keeps moving is an irritation. */
.np-arrived { animation: np-in .34s ease-out both; }
@keyframes np-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
/* A reply landing in an open conversation rises into place, so it is
   clear something new was said rather than that the wall redrew. */
.msg-arrived { animation: msg-in .26s ease-out both; }
@keyframes msg-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .np-arrived, .msg-arrived { animation: none; } }
.media-extras { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.media-extras .chk { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }

/* — reels — */
.reels-wrap { position: fixed; inset: 0; z-index: 1100; background: #0b0e14; }
.reels-back { position: absolute; top: 14px; left: 14px; z-index: 5; display: flex; align-items: center; gap: 6px; border: 0; border-radius: 999px; padding: 8px 14px; background: rgba(255,255,255,.12); color: #fff; cursor: pointer; backdrop-filter: blur(6px); }
.reels-scroll { height: 100%; overflow-y: auto; scroll-snap-type: y mandatory; scrollbar-width: none; }
.reels-scroll::-webkit-scrollbar { display: none; }
.reel-cell { position: relative; height: 100%; scroll-snap-align: start; display: grid; place-items: center; }
.reel-video { width: min(480px, 100vw); height: 100%; }
.reel-meta { position: absolute; left: 16px; right: 76px; bottom: 22px; color: #fff; display: flex; flex-direction: column; gap: 8px; z-index: 3; }
.reel-who { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.reel-cap { font-size: 13.5px; text-shadow: 0 1px 8px rgba(0,0,0,.6); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.reel-rail { position: absolute; right: 14px; bottom: 30px; display: flex; flex-direction: column; gap: 16px; z-index: 3; }
.reel-act { border: 0; background: none; color: #fff; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 12px; }
.reel-act .icon { width: 26px; height: 26px; }
.reel-act.on { color: var(--lime, #a3e635); }
.reel-act.on svg { fill: currentColor; }

/* ── Like animation — the heart pops when a like lands (posts, reels,
      stories). The reacted heart fills with the celebration lime. ── */
@keyframes tq-like-pop {
  0% { transform: scale(1); }
  35% { transform: scale(1.45); }
  60% { transform: scale(.9); }
  100% { transform: scale(1); }
}
.like-pop { animation: tq-like-pop .45s cubic-bezier(.2, .9, .3, 1.4); display: inline-flex; }
.pact.react-btn.reacted { color: var(--lime, #a3e635); }
.pact.react-btn.reacted .pact-ic svg { fill: currentColor; stroke: currentColor; }
.story-like.on svg { fill: #ff4d6d; stroke: #ff4d6d; }
.reels-empty { height: 100%; display: grid; place-items: center; color: #fff; text-align: center; }

/* — reel comment sheet — slides over the reel; same thread as the post */
.reel-sheet { position: absolute; right: 0; bottom: 0; top: 0; z-index: 6;
  width: min(400px, 100vw); display: flex; flex-direction: column;
  background: var(--card, #fff); color: var(--ink, #101420);
  box-shadow: -8px 0 28px rgba(0,0,0,.35); animation: sheet-in .18s ease-out; }
@keyframes sheet-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.reel-sheet-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--line, #e3e6ee); }
.reel-sheet-head .btn { margin-left: auto; }
.reel-sheet-list { flex: 1; overflow-y: auto; padding: 10px 14px; }
.reel-sheet-form { display: flex; gap: 8px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0)); border-top: 1px solid var(--line, #e3e6ee); }
.reel-sheet-form input { flex: 1; min-width: 0; }
@media (max-width: 620px) {
  .reel-sheet { top: auto; width: 100vw; height: 62vh; border-radius: 16px 16px 0 0; animation: sheet-up .18s ease-out; }
  @keyframes sheet-up { from { transform: translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }
}
@media (max-width: 620px) {
  .doc-thumb { width: 84px; min-height: 84px; }
  .story-stage { width: 100vw; }
}

/* ─── Legal pages (/legal, /legal/<slug>) ──────────────────────────── */
.legal-page {
  max-width: 780px; margin: 0 auto; padding: 32px 20px 64px;
  color: var(--mer-text, #101420);
}
.legal-nav { display: flex; flex-direction: column; gap: 14px; margin-bottom: 28px; }
.legal-links { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 13px; }
.legal-links a { color: var(--mer-text-secondary, #5C6470); }
.legal-links a.on { color: var(--mer-primary); font-weight: 600; }
.legal-page h1 { font-size: 28px; line-height: 1.2; margin: 0 0 6px; }
.legal-sub { color: var(--mer-text-secondary, #5C6470); font-size: 14px; margin: 0 0 24px; }
.legal-body h2 { font-size: 17px; margin: 26px 0 8px; }
.legal-body p { font-size: 15px; line-height: 1.65; margin: 0 0 12px; }
.legal-body a { color: var(--mer-primary); }
.legal-index { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.legal-index a { font-size: 16px; color: var(--mer-primary); }
.legal-foot {
  margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--mer-border, #E3E6EE);
  font-size: 13px; color: var(--mer-text-secondary, #5C6470);
}
.ld-foot-links { display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center; font-size: 13px; }
.ld-foot-links a { color: inherit; opacity: .85; }
.ld-foot-links a:hover { opacity: 1; text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════════════════
   DARK MODE BRAND — the real dark wordmark (white type, lime dot and
   wave) from /assets/logos in the platform repo, cut to transparency.
   The logo swaps automatically wherever TQ_LOGO renders.
   ═══════════════════════════════════════════════════════════════════════ */
:root[data-theme="dark"] .tq-logo,
.on-chrome .tq-logo,
.gnav .tq-logo.dark {
  content: url("/assets/brand/tranquil-logo-dark.png");
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tq-logo {
    content: url("/assets/brand/tranquil-logo-dark.png");
  }
  :root:not([data-theme="light"]) .ws-logo .tq-logo {
    content: url("/assets/brand/tranquil-logo.png");
  }
}

/* ── Identity pages on phones: app grammar — the details content
      stretches the full viewport, cards go edge to edge. ── */
@media (max-width: 640px) {
  .page { padding: 10px 0 64px; }
  .page > .card, .cols .card, .cols > div > .card {
    border-radius: 0; border-left: 0; border-right: 0;
    width: 100%; max-width: none;
  }
  .card-pad { padding: 14px; }
  .cols, .cols.two { gap: 10px; }
  .stat-strip { width: 100%; }
  .bg-row, .skill-row, .field { width: 100%; min-width: 0; }

  /* Discover / directory: two tight columns, never 250px minimums that
     overflow a 360px viewport. */
  .dir-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 0 10px; }
  .dir-name { font-size: 13.5px; }
  .dir-purpose { padding: 0 8px; }

  /* Headings stack: title above the subtitle, both full width. */
  .sect-head { flex-direction: column; align-items: flex-start; margin: 8px 12px 10px; }

  /* Filter bars scroll sideways instead of wrapping into a tower. */
  [data-filterbar] { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; }
  [data-filterbar] > * { flex: none; }

  /* Tab strips scroll, never squeeze. */
  .tq-tabs { overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; }

  /* Profile identity header: stats wrap into two rows if needed.
     The cover KEEPS the 4:1 frame the editor exports (1600×400) —
     a different mobile ratio would re-crop what the member positioned. */
  .stat-strip { flex-wrap: wrap; }
  .stat-strip .stat { flex: 1 1 33%; min-width: 90px; }

  /* Any data table inside a card scrolls within itself. */
  .card table { display: block; overflow-x: auto; }
}

/* ══════════════════════════════════════════════════════════════════
   Workspace shell (.ws-*) — the full-viewport business console.
   Dark icon rail on the left, slim top bar, scrolling work canvas.
   ══════════════════════════════════════════════════════════════════ */

body.ws-mode { overflow: hidden; }
body.ws-mode .gnav, body.ws-mode .bottomnav { display: none; }
body.ws-mode #page, body.ws-mode .page { max-width: none; padding: 0; margin: 0; }

.ws { display: flex; flex-direction: column; height: 100vh; height: 100dvh;
  background: var(--mer-bg); }
.ws-row { flex: 1; display: flex; min-height: 0; }

/* Icon rail — primary navy, starts under the top bar */
.ws-nav { width: 72px; flex: none; display: flex; flex-direction: column;
  align-items: center; padding: 10px 0 12px; gap: 4px;
  background: var(--mer-c-brand-800); color: #fff; }
.ws-logo { display: flex; align-items: center; flex: none; }
.ws-nav-items { display: flex; flex-direction: column; gap: 2px; flex: 1;
  width: 100%; align-items: center; overflow-y: auto; scrollbar-width: none; }
.ws-nav-item { display: flex; flex-direction: column; align-items: center; gap: 3px;
  width: 60px; padding: 9px 0 7px; border: 0; border-radius: 12px; cursor: pointer;
  background: none; color: rgba(255,255,255,.62); font: inherit; }
.ws-nav-item .ic svg { width: 20px; height: 20px; }
.ws-nav-item .lb { font-size: 9.5px; font-weight: 600; letter-spacing: .02em; }
.ws-nav-item:hover { color: #fff; background: rgba(255,255,255,.07); }
.ws-nav-item.active { color: var(--tq-active); background: rgba(255,255,255,.09); }
.ws-exit { margin-top: 8px; color: rgba(255,255,255,.55); }
.ws-exit:hover { color: #fff; background: rgba(255,255,255,.1); }

/* Top bar — full width, white, logo at left */
.ws-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ws-top { flex: none; display: flex; align-items: center; gap: 14px;
  padding: 9px 18px; background: var(--mer-surface, #fff);
  border-bottom: 1px solid var(--mer-border); }
.ws-pick { min-width: 0; flex: none; }
.ws-sel { border: 1px solid var(--mer-border); border-radius: var(--mer-radius-pill, 999px);
  padding: 7px 12px; font: inherit; font-weight: 600; font-size: 13.5px;
  background: var(--mer-bg); max-width: 240px; }
.ws-search-wrap { flex: 1; display: flex; justify-content: center; min-width: 0; }
.ws-search { display: flex; align-items: center; gap: 8px;
  width: min(460px, 100%); border: 1px solid var(--mer-border);
  border-radius: var(--mer-radius-pill, 999px); padding: 8px 16px;
  background: var(--mer-bg); color: var(--mer-text-2, #667); cursor: text; }
.ws-search svg { width: 16px; height: 16px; flex: none; }
.ws-search input { flex: 1; min-width: 0; border: 0; background: none;
  font: inherit; font-size: 13.5px; color: var(--mer-text); outline: none; }
.ws-top-right { margin-left: auto; display: flex; align-items: center; gap: 6px; flex: none; }
.ws-top-btn { position: relative; border: 0; background: none; cursor: pointer;
  color: var(--mer-text-2, #667); padding: 7px; border-radius: 50%; }
.ws-top-btn:hover { background: var(--mer-bg); }
.ws-top-btn svg { width: 20px; height: 20px; }
.ws-badge { position: absolute; top: 1px; right: 0; min-width: 15px; height: 15px;
  border-radius: 8px; background: #D64545; color: #fff; font-size: 9.5px;
  font-weight: 700; display: flex; align-items: center; justify-content: center;
  padding: 0 3px; }
.ws-top-ava img, .ws-top-ava .ava { width: 30px; height: 30px; border-radius: 50%; }
.ws-top-ava { border: 0; background: none; cursor: pointer; padding: 0; }

/* Body canvas */
.ws-body { flex: 1; overflow-y: auto; padding: 20px 24px 40px;
  -webkit-overflow-scrolling: touch; }
.ws-body > * { max-width: 1080px; margin-left: auto; margin-right: auto; }

/* Section head */
.ws-head { display: flex; align-items: flex-start; gap: 12px; margin: 2px 0 16px; }
.ws-head h1, .ws-head h2 { margin: 0; font-size: 21px; }
.ws-head .sub { margin: 3px 0 0; }
.ws-head-actions { margin-left: auto; display: flex; gap: 8px; flex: none; }

/* Home: quick-action circles — centered, colour-coded */
.ws-quick { display: flex; gap: 18px; flex-wrap: wrap; margin: 4px 0 20px;
  justify-content: center; }
.ws-qa { display: flex; flex-direction: column; align-items: center; gap: 7px;
  border: 0; background: none; cursor: pointer; font: inherit; font-size: 12px;
  font-weight: 600; color: var(--mer-text); width: 68px; }
.ws-qa-ic { width: 52px; height: 52px; border-radius: 50%; display: flex;
  align-items: center; justify-content: center;
  border: 1px solid transparent; color: var(--mer-c-brand-800);
  box-shadow: var(--mer-shadow-1, 0 1px 2px rgba(16,20,32,.06)); }
.ws-qa:hover .ws-qa-ic { transform: translateY(-2px); transition: transform .12s; }
.ws-qa-ic svg { width: 22px; height: 22px; }
.qa-c0 { background: #E8ECFB; color: #26316B; }
.qa-c1 { background: #EDF5D4; color: #5A6B1D; }
.qa-c2 { background: #FCE8E8; color: #A33; }
.qa-c3 { background: #E4F3F0; color: #1F6B5C; }
.qa-c4 { background: #FDF1DC; color: #8A5A16; }
.qa-c5 { background: #F0E8FB; color: #5B3E9E; }
.qa-c6 { background: #E6F0FA; color: #1D5C8A; }
.qa-c7 { background: #FBE8F3; color: #963268; }

/* Home grid: queue + clock */
.ws-home-grid { display: grid; grid-template-columns: 1fr 320px; gap: 16px;
  align-items: start; }
.ws-queue-head { display: flex; align-items: center; gap: 8px; font-weight: 700;
  padding: 14px 16px 6px; }
.ws-queue-head svg { width: 18px; height: 18px; }
.ws-queue-all { margin-left: auto; border: 0; background: var(--mer-bg);
  border-radius: 50%; width: 26px; height: 26px; cursor: pointer;
  font-size: 15px; line-height: 1; color: var(--mer-text-2, #667); }
.ws-queue-empty { display: flex; flex-direction: column; align-items: center;
  gap: 6px; text-align: center; padding: 26px 24px 30px; }
.ws-queue-empty .ok-ic { width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--tq-active); color: var(--mer-c-brand-950); }
.ws-queue-empty .ok-ic svg { width: 20px; height: 20px; }
.ws-queue-row { display: flex; align-items: center; gap: 12px; width: 100%;
  border: 0; border-top: 1px solid var(--mer-border); background: none;
  cursor: pointer; font: inherit; text-align: left; padding: 12px 16px;
  color: var(--mer-text); }
.ws-queue-row:hover { background: var(--mer-bg); }
.ws-queue-row svg { width: 18px; height: 18px; flex: none; color: var(--mer-c-brand-800); }
.ws-queue-row .t { flex: 1; min-width: 0; font-weight: 600; font-size: 14px; }
.ws-queue-row .s { font-weight: 400; font-size: 12px; color: var(--mer-text-2, #667); }

/* Clock card */
.ws-clock { overflow: hidden; padding: 0; }
.ws-clock-band { background: linear-gradient(120deg, var(--mer-c-brand-800) 0%, var(--mer-c-brand-700) 100%);
  color: #fff; padding: 22px 18px; }
.ws-clock-time { font-size: 34px; font-weight: 700; letter-spacing: .01em; }
.ws-clock-date { font-size: 13px; opacity: .8; margin-top: 2px; }
.ws-clock-today { padding: 12px 16px 16px; }
.ws-clock-today-head { display: flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .06em;
  color: var(--mer-text-2, #667); }
.ws-clock-today-head svg { width: 15px; height: 15px; }

/* Explore accordions */
.ws-explore { margin-top: 18px; }
.ws-explore-label { font-size: 11.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--mer-text-2, #667); margin-bottom: 8px; }
.ws-acc { background: var(--mer-surface, #fff); border: 1px solid var(--mer-border);
  border-radius: var(--mer-radius-lg, 14px); margin-bottom: 8px; overflow: hidden; }
.ws-acc-head { display: flex; align-items: center; justify-content: space-between;
  width: 100%; border: 0; background: none; cursor: pointer; font: inherit;
  font-weight: 700; font-size: 14px; padding: 13px 16px; color: var(--mer-text); }
.ws-acc .chev { transition: transform .15s; color: var(--mer-text-2, #667); }
.ws-acc.open .chev { transform: rotate(180deg); }
.ws-acc-body { border-top: 1px solid var(--mer-border); padding: 4px 0; }
.ws-acc-item { display: flex; align-items: center; gap: 11px; width: 100%;
  border: 0; background: none; cursor: pointer; font: inherit; font-size: 13.5px;
  font-weight: 500; text-align: left; padding: 10px 16px; color: var(--mer-text); }
.ws-acc-item:hover { background: var(--mer-bg); }
.ws-acc-item svg { width: 17px; height: 17px; color: var(--mer-c-brand-800); }

/* "More" bottom sheet (mobile) — desktop hides the trigger */
.ws-more { display: none; }
.ws-sheet-back { position: fixed; inset: 0; background: rgba(16,20,32,.45);
  z-index: 90; display: flex; align-items: flex-end; }
.ws-sheet { background: var(--mer-surface, #fff); width: 100%;
  border-radius: 18px 18px 0 0; padding: 8px 14px 22px;
  max-height: 70vh; overflow-y: auto; }
.ws-sheet-grab { width: 38px; height: 4px; border-radius: 2px;
  background: var(--mer-border); margin: 6px auto 10px; }
.ws-sheet-item { display: flex; align-items: center; gap: 12px; width: 100%;
  border: 0; background: none; cursor: pointer; font: inherit; font-size: 15px;
  font-weight: 600; text-align: left; padding: 13px 8px; color: var(--mer-text);
  border-radius: 10px; }
.ws-sheet-item:hover { background: var(--mer-bg); }
.ws-sheet-item svg { width: 20px; height: 20px; color: var(--mer-c-brand-800); }
.ws-sheet-exit { color: #A33; }
.ws-sheet-exit svg { color: #A33; }

/* Finance editor */
.ws-fin-modal { max-width: 560px; }
.ws-fin-modal label { display: flex; flex-direction: column; gap: 4px;
  font-size: 12.5px; font-weight: 600; margin-bottom: 8px; }
.ws-fin-modal input, .ws-fin-modal textarea { border: 1px solid var(--mer-border);
  border-radius: 9px; padding: 8px 10px; font: inherit; font-size: 13.5px; width: 100%; }
.ws-fin-row { display: flex; gap: 10px; }
.ws-fin-row label { flex: 1; }
.ws-fin-line { display: grid; grid-template-columns: 1fr 64px 92px 30px;
  gap: 6px; margin-bottom: 6px; align-items: center; }
.ws-fin-line button { border: 0; background: none; cursor: pointer;
  font-size: 17px; color: var(--mer-text-2, #667); }

/* Form primitives — .form-row/.input were used by builders (mypage,
   collaborators, domains) but never styled. Defined once, globally. */
.form-row { margin-bottom: 14px; }
.form-row > label.sub, .form-row > .sub:first-child { display: block;
  font-size: 12px; font-weight: 700; letter-spacing: .03em;
  margin-bottom: 5px; color: var(--mer-text-2, #667); }
.input { width: 100%; max-width: 480px; border: 1px solid var(--mer-border);
  border-radius: 10px; padding: 9px 12px; font: inherit; font-size: 14px;
  background: var(--mer-surface, #fff); color: var(--mer-text); }
.input:focus { outline: 2px solid var(--tq-active, #C2DB6F); outline-offset: 0; }
textarea.input { min-height: 74px; resize: vertical; }
select.input { width: auto; }

/* ── SynSpatial — the full-screen geospatial operating environment ──
   The map is the workspace: rail hidden, body pinned, canvas owns the
   viewport below the 56px top bar. Panels float. */
body.ws-map-full .ws-nav { display: none; }
body.ws-map-full .ws-body { padding: 0; max-width: none; overflow: hidden; }
body.ws-map-full .ws-body > * { max-width: none; margin: 0; }
body.ws-map-full .ws-row { height: calc(100vh - 56px); }
.sp-os { position: relative; width: 100%; height: calc(100vh - 56px); overflow: hidden;
  background: #cfe9f1; }
.sp-canvas { position: absolute; inset: 0; }
.sp-back { position: absolute; top: 12px; left: 12px; z-index: 8;
  background: var(--mer-c-brand-800, #26316B); color: #fff; border: 0; cursor: pointer;
  font: 600 12.5px Outfit, ui-sans-serif; padding: 8px 14px; border-radius: 999px;
  box-shadow: 0 4px 14px rgba(10, 16, 30, .3); }
.sp-panel { position: absolute; top: 54px; left: 12px; z-index: 7;
  width: min(380px, calc(100vw - 24px));
  background: rgba(255, 255, 255, .97); border: 1px solid var(--mer-border);
  border-radius: 14px; box-shadow: 0 10px 32px rgba(10, 16, 30, .22);
  display: flex; flex-direction: column; max-height: calc(100% - 150px); }
.sp-modes { display: flex; gap: 2px; padding: 8px 8px 0; border-bottom: 1px solid var(--mer-border); }
.sp-mode { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  border: 0; background: transparent; cursor: pointer; font: 600 10.5px Outfit, ui-sans-serif;
  color: var(--mer-text-2, #667); padding: 6px 2px 8px; border-radius: 8px 8px 0 0;
  border-bottom: 2.5px solid transparent; }
.sp-mode svg { width: 17px; height: 17px; }
.sp-mode.on { color: var(--mer-c-brand-800, #26316B); border-bottom-color: var(--tq-active, #C2DB6F); }
.sp-panel-body { padding: 10px 12px; overflow: auto; }
.sp-search { width: 100%; max-width: none; margin-bottom: 8px; }
.sp-basemaps { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 8px; }
.sp-list { display: flex; flex-direction: column; gap: 4px; }
.sp-chiprow { display: flex; gap: 5px; flex-wrap: wrap; margin: 4px 0 8px; }
.sp-act { width: 100%; justify-content: flex-start; margin-bottom: 6px; }
.sp-inspector { position: absolute; top: 54px; right: 12px; z-index: 7;
  width: min(340px, calc(100vw - 24px));
  background: rgba(255, 255, 255, .97); border: 1px solid var(--mer-border);
  border-radius: 14px; box-shadow: 0 10px 32px rgba(10, 16, 30, .22);
  padding: 12px 14px; max-height: calc(100% - 150px); overflow: auto; }
.sp-ins-head { display: flex; align-items: center; justify-content: space-between; }
.sp-toolbar { position: absolute; left: 50%; transform: translateX(-50%); bottom: 34px;
  z-index: 7; display: flex; gap: 2px; background: rgba(16, 20, 32, .92);
  border-radius: 14px; padding: 5px 6px; box-shadow: 0 8px 24px rgba(10, 16, 30, .35);
  max-width: calc(100vw - 24px); overflow-x: auto; scrollbar-width: none; }
.sp-tool { display: flex; flex-direction: column; align-items: center; gap: 1px;
  min-width: 52px; border: 0; background: transparent; cursor: pointer;
  color: rgba(255, 255, 255, .82); padding: 5px 6px; border-radius: 9px;
  font: 500 9.5px Outfit, ui-sans-serif; }
.sp-tool i { font-style: normal; font-size: 16px; line-height: 1.1; }
.sp-tool:hover { background: rgba(255, 255, 255, .1); }
.sp-tool.on { background: var(--tq-active, #C2DB6F); color: #1a2408; }
.sp-status { position: absolute; left: 0; right: 0; bottom: 0; z-index: 6;
  display: flex; gap: 14px; align-items: center; padding: 4px 14px;
  background: rgba(16, 20, 32, .85); color: rgba(255, 255, 255, .85);
  font: 500 11px ui-monospace, monospace; }
@media (max-width: 760px) {
  body.ws-map-full .ws-row { height: calc(100vh - 56px); }
  .sp-panel { top: auto; bottom: 88px; left: 8px; right: 8px; width: auto;
    max-height: 52vh; }
  .sp-inspector { top: auto; bottom: 88px; left: 8px; right: 8px; width: auto;
    max-height: 52vh; }
  .sp-toolbar { bottom: 30px; border-radius: 12px; }
  .sp-back { top: 8px; left: 8px; }
}

/* Community creation — purpose & subtype pickers */
.cc-purposes { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px; }
.cc-p { display: flex; align-items: center; gap: 8px; border: 1px solid var(--mer-border);
  border-radius: 11px; background: var(--mer-surface, #fff); cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 600; padding: 10px 11px;
  text-align: left; color: var(--mer-text); }
.cc-p svg { width: 17px; height: 17px; flex: none; color: var(--mer-c-brand-800); }
.cc-p.on { border-color: var(--mer-c-brand-800); background: #E8ECFB;
  box-shadow: inset 0 0 0 1px var(--mer-c-brand-800); }
.cc-subtypes { display: flex; flex-wrap: wrap; gap: 6px; max-height: 220px;
  overflow-y: auto; padding: 2px; }
.cc-s { display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--mer-border); border-radius: var(--mer-radius-pill, 999px);
  background: var(--mer-surface, #fff); cursor: pointer; font: inherit;
  font-size: 12.5px; font-weight: 600; padding: 7px 12px; color: var(--mer-text); }
.cc-s .f { font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
  color: var(--mer-text-2, #667); text-transform: uppercase; }
.cc-s.on { border-color: var(--mer-c-brand-800); background: var(--mer-c-brand-800);
  color: #fff; }
.cc-s.on .f { color: var(--tq-active, #C2DB6F); }
@media (max-width: 640px) {
  .cc-purposes { grid-template-columns: repeat(2, 1fr); }
  .cc-subtypes { max-height: 260px; }
}

/* Section building blocks */
.ws-tiles { margin-bottom: 16px; }
.ws-table-card, .ws-chart-card { margin-top: 14px; }
.ws-home-side .card:first-child { margin-top: 0; }
.ws-home-main .ws-queue { margin-top: 0; }
.ws-dt { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ws-dt th { text-align: left; font-size: 11px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: var(--mer-text-2, #667);
  padding: 6px 16px; border-bottom: 1px solid var(--mer-border); }
.ws-dt td { padding: 9px 16px; border-bottom: 1px solid var(--mer-border); }
.ws-dt tr:last-child td { border-bottom: 0; }
.ws-dt tr.rowlink { cursor: pointer; }
.ws-dt tr.rowlink:hover td { background: var(--mer-bg); }
.ws-dt-p { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.ws-donut { display: flex; align-items: center; gap: 14px; }
.ws-legend { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.ws-leg { display: flex; align-items: center; gap: 7px; font-size: 12.5px;
  color: var(--mer-text-2, #667); }
.ws-leg b { color: var(--mer-text); margin-left: auto; }

/* ── programmes (D-CEMLI) + impact configuration ── */
.ws-chip { display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .03em;
  background: var(--mer-bg); color: var(--mer-text-2, #667);
  border: 1px solid var(--mer-border); white-space: nowrap; }
.ws-chip.ok { background: #eef6da; color: #55701b; border-color: #d6e8a8; }
.ws-chip.warn { background: #fdf3dc; color: #8a6410; border-color: #f2dfae; }
.ws-chip.err { background: #fbe9e7; color: #a13c2f; border-color: #f2cfc9; }
.ws-prog { margin-top: 12px; }
.ws-prog-top { display: flex; justify-content: space-between; gap: 12px;
  align-items: flex-start; }
.ws-prog-foot { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.ws-ready { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.ws-ready-bar { flex: 0 0 120px; height: 6px; border-radius: 999px;
  background: var(--mer-bg); overflow: hidden; }
.ws-ready-bar i { display: block; height: 100%; border-radius: 999px;
  background: var(--tq-active, #C2DB6F); }
.ws-inline { border: 1px solid transparent; background: transparent;
  font: inherit; color: inherit; padding: 4px 6px; border-radius: 6px;
  width: 100%; min-width: 140px; }
.ws-inline:focus { border-color: var(--mer-border); background: var(--mer-surface, #fff);
  outline: none; }
.ws-dt tr.off td { opacity: .45; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.ws-ep-nudge { display: flex; align-items: center; justify-content: space-between;
  gap: 14px; margin-bottom: 14px; border-left: 4px solid var(--tq-active, #C2DB6F); }
.ws-leg .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.ws-meet-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; }
.ws-meet-row .t { flex: 1; min-width: 0; font-weight: 600; font-size: 13.5px; }
.ws-meet-row .s { font-weight: 400; font-size: 12px; color: var(--mer-text-2, #667); }
.ws-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--mer-border);
  margin-bottom: 14px; }
.ws-task { display: flex; align-items: center; gap: 12px; padding: 13px 16px;
  margin-bottom: 8px; }
.ws-task-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ws-task-actions { display: flex; gap: 8px; flex: none; }
.ws-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px; }
.ws-mod { display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  padding: 16px; border: 1px solid var(--mer-border); cursor: pointer; font: inherit;
  text-align: left; color: var(--mer-text); }
.ws-mod:hover { border-color: var(--tq-active); }
.ws-mod .ws-mod-ic { width: 38px; height: 38px; border-radius: 11px; display: flex;
  align-items: center; justify-content: center; background: var(--mer-bg);
  color: var(--mer-c-brand-800); }
.ws-mod .ws-mod-ic svg { width: 19px; height: 19px; }
.ws-mod b { font-size: 14.5px; }
.ws-mod .sub { font-size: 12.5px; }

/* Responsive: rail drops labels, home stacks, top bar tightens */
@media (max-width: 900px) {
  .ws-home-grid { grid-template-columns: 1fr; }
  .ws-home-side { order: -1; }
  .ws-home-grid > * { min-width: 0; }
}
@media (max-width: 640px) {
  .ws-row { flex-direction: column-reverse; }
  .ws-nav { width: 100%; height: 60px; flex-direction: row; padding: 0 4px;
    justify-content: space-around; }
  .ws-nav-items { flex-direction: row; justify-content: space-around;
    overflow: visible; }
  .ws-nav-item { display: none; }
  .ws-nav-item.m-keep { display: flex; width: auto; min-width: 56px; padding: 8px 6px; }
  .ws-more { display: none; }
  .ws-more.m-keep { display: flex; }
  .ws-exit { display: none; }
  .ws-top { padding: 8px 12px; gap: 8px; }
  .ws-search-wrap { display: none; }
  .ws-body { padding: 14px 12px 24px; overflow-x: clip; }
  .ws-body > *, .ws-grid > * { min-width: 0; }
  .ws-quick { gap: 8px; }
  .ws-qa { width: 64px; font-size: 11px; }
  .ws-qa-ic { width: 46px; height: 46px; }
  .ws-head { flex-direction: column; gap: 8px; }
  .ws-head-actions { margin-left: 0; flex-wrap: wrap; }
  .ws-tiles { grid-template-columns: repeat(2, 1fr); }
  .ws-dt th:nth-child(n+3), .ws-dt td:nth-child(n+3) { display: none; }
  .ws-dt th:last-child, .ws-dt td:last-child { display: table-cell; }
  .ws-fin-line { grid-template-columns: 1fr 52px 76px 26px; }
}

/* ── SynDrive (media.tranquil) — the storage shell ────────────────────── */
.drv-brand { font-size: 15px; letter-spacing: .2px; margin-right: 6px; white-space: nowrap; }
.drv-rail { width: 232px; flex: none; display: flex; flex-direction: column;
  border-right: 1px solid var(--line, #e5e7eb); background: var(--panel, #fff); overflow: hidden; }
.drv-rail-scroll { flex: 1; overflow-y: auto; padding: 12px 10px; }
.drv-sec { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  opacity: .55; margin: 14px 6px 6px; }
.drv-sec:first-child { margin-top: 2px; }
.drv-item { display: flex; align-items: center; gap: 9px; width: 100%; border: 0;
  background: none; padding: 8px 10px; border-radius: 9px; cursor: pointer;
  font: inherit; font-size: 13.5px; text-align: left; color: inherit; }
.drv-item svg { width: 16px; height: 16px; flex: none; opacity: .75; }
.drv-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drv-item:hover { background: rgba(0,0,0,.05); }
.drv-item.active { background: rgba(20,60,120,.1); font-weight: 600; }
.drv-none { padding: 4px 10px; font-size: 12.5px; }
.drv-usage { border-top: 1px solid var(--line, #e5e7eb); padding: 12px 14px; }
.drv-usage .sub { margin: 6px 0 8px; font-size: 12px; }
.drv-meter { display: block; height: 6px; border-radius: 4px; background: rgba(0,0,0,.09); overflow: hidden; }
.drv-meter-fill { display: block; height: 100%; border-radius: 4px; background: #2563eb; }
.drv-meter-fill.hot { background: #dc2626; }
.drv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.drv-folder-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.drv-folder-head svg { width: 26px; height: 26px; opacity: .8; }
.drv-folder-head .sub { margin: 1px 0 0; font-size: 12.5px; }
.drv-items { display: flex; flex-direction: column; }
.drv-row { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; border: 0; background: none; padding: 7px 8px; border-radius: 8px;
  cursor: pointer; font: inherit; font-size: 13px; text-align: left; color: inherit; }
.drv-row:hover { background: rgba(0,0,0,.05); }
.drv-row-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drv-admin { display: flex; flex-direction: column; }
.drv-admin-row { display: grid; grid-template-columns: minmax(140px, 1fr) minmax(90px, 180px) auto auto; align-items: center; }
/* Storage billing — the settlement queue and the buy-storage plan grid. */
.drv-bill { display: flex; flex-direction: column; gap: 6px; }
.drv-bill-row { display: flex; align-items: center; gap: 10px; padding: 7px 8px;
  border-radius: 8px; font-size: 13px; }
.drv-bill-row:hover { background: rgba(0,0,0,.04); }
.drv-bill-row input { border: 1px solid var(--line, #e5e7eb); border-radius: 8px;
  padding: 5px 9px; font: inherit; font-size: 12.5px; background: var(--surface, #fff); }
.drv2-plans { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px; margin-bottom: 10px; }
.drv2-plan { display: flex; flex-direction: column; gap: 4px; align-items: flex-start;
  padding: 14px; cursor: pointer; border: 1px solid var(--line, #e5e7eb);
  font: inherit; text-align: left; }
.drv2-plan:hover { border-color: var(--brand, #26316b); }
@media (max-width: 760px) {
  .drv-rail { position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: 100%;
    height: auto; flex-direction: row; align-items: center; border-top: 1px solid var(--line, #e5e7eb); z-index: 40; }
  .drv-rail-scroll { display: flex; padding: 6px 8px; gap: 4px; }
  .drv-sec, .drv-none { display: none; }
  .drv-item { width: auto; }
  .drv-usage { border-top: 0; border-left: 1px solid var(--line, #e5e7eb); min-width: 150px; }
  .drv .ws-body { padding-bottom: 120px; }
  .drv-admin-row { grid-template-columns: 1fr; gap: 4px; }
}

/* ═══ Learn marketplace ════════════════════════════════════════════════
   Tranquil Learn — marketplace home, catalog, course pages, player,
   certificates, articles reader. Reuses Meridian tokens throughout. */

.lm-dim { color: var(--mer-text-muted); }
.lm-free { color: var(--mer-c-success-strong); font-weight: 700; }
.lm-price strong { font-size: 14px; }
.lm-stars { color: #eab308; letter-spacing: 1px; font-size: 13px; }

/* cards */
.lm-card { cursor: pointer; overflow: hidden; display: flex; flex-direction: column; transition: box-shadow var(--mer-motion-fast); }
.lm-card:hover { box-shadow: var(--mer-shadow-2); }
.lm-cover { height: 120px; background: var(--mer-primary-tint) center/cover no-repeat; border-radius: var(--mer-radius-md) var(--mer-radius-md) 0 0; flex: none; }
.lm-cover-init { display: grid; place-items: center; font-size: 28px; font-weight: 800; color: var(--mer-text-muted); letter-spacing: 2px; }
.lm-card-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.lm-title { font-weight: 700; font-size: 14px; line-height: 1.3; }
.lm-inst { color: var(--mer-text-muted); font-size: 12px; }
.lm-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12.5px; }
.lm-meta .lm-price { margin-left: auto; }
.lm-clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* progress */
.lm-progress { height: 6px; border-radius: 999px; background: var(--mer-primary-tint); overflow: hidden; margin-top: 4px; }
.lm-progress-bar { height: 100%; border-radius: 999px; background: var(--mer-primary); transition: width var(--mer-motion-fast); }

/* hero + chips + rails */
.lm-hero { padding: 28px 24px; }
.lm-hero h1 { margin: 0 0 6px; font-size: 26px; }
.lm-hero p { margin: 0 0 14px; color: var(--mer-text-muted); }
.lm-hero-search { display: flex; gap: 8px; max-width: 560px; }
.lm-hero-search .input { flex: 1; max-width: none; }
.lm-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.lm-chip { border: 1px solid var(--mer-border); border-radius: 999px; padding: 5px 12px; background: var(--mer-surface); cursor: pointer; }
.lm-chip.active { background: var(--mer-selected); color: var(--mer-on-selected); border-color: transparent; }
.lm-rail { margin-top: 20px; }
.lm-rail-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 260px); gap: 14px; overflow-x: auto; padding-bottom: 6px; }
.lm-rail-row.lm-rail-col { display: block; }

/* catalog */
.lm-catalog { display: grid; grid-template-columns: 240px 1fr; gap: 16px; align-items: start; }
.lm-filters { padding: 16px; position: sticky; top: 70px; }
.lm-pager { display: flex; gap: 6px; margin-top: 16px; flex-wrap: wrap; }
@media (max-width: 860px) { .lm-catalog { grid-template-columns: 1fr; } .lm-filters { position: static; } }

/* course page */
.lm-course-hero { padding: 22px 24px; }
.lm-course-hero h2 { margin: 0 0 4px; }
.lm-course-cta { margin-top: 14px; display: flex; gap: 8px; }
.lm-module { margin-top: 10px; overflow: hidden; }
.lm-module-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; border: 0; background: none; font: inherit; font-weight: 700; padding: 13px 16px; cursor: pointer; text-align: left; }
.lm-module-head:hover { background: var(--mer-primary-tint); }
.lm-module-body { border-top: 1px solid var(--mer-border); padding: 4px 0; }
.lm-star-pick { display: flex; gap: 2px; margin-top: 6px; }
.lm-star-pick button { border: 0; background: none; font-size: 22px; cursor: pointer; color: #eab308; padding: 0 2px; }

/* player */
.lm-player { display: grid; grid-template-columns: 300px 1fr; gap: 16px; align-items: start; }
.lm-player-nav { padding: 14px; position: sticky; top: 70px; max-height: calc(100vh - 90px); overflow: auto; }
.lm-player-course { font-weight: 800; margin-bottom: 8px; }
.lm-player-tabs { display: flex; gap: 6px; margin: 10px 0; }
.lm-player-mod { font-size: 12px; font-weight: 700; color: var(--mer-text-muted); text-transform: uppercase; letter-spacing: .4px; padding: 10px 4px 2px; }
.lm-player-lesson { padding: 8px 6px; border-radius: var(--mer-radius-sm); }
.lm-player-lesson.active { background: var(--mer-primary-tint); }
.lm-player-main { padding: 22px 24px; min-height: 320px; }
.lm-player-actions { display: flex; gap: 10px; align-items: center; margin-top: 18px; }
@media (max-width: 860px) { .lm-player { grid-template-columns: 1fr; } .lm-player-nav { position: static; max-height: none; } }

/* quiz */
.lm-question { margin-top: 14px; }
.lm-option { display: block; margin-top: 6px; padding: 8px 12px; border: 1px solid var(--mer-border); border-radius: var(--mer-radius-sm); cursor: pointer; }
.lm-option:hover { background: var(--mer-primary-tint); }

/* certificates */
.lm-cert { padding: 16px 18px; border: 1px solid var(--mer-border-strong); position: relative; }
.lm-cert-ribbon { font-size: 26px; }
.lm-cert-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; letter-spacing: 1px; background: var(--mer-primary-tint); border-radius: var(--mer-radius-sm); padding: 6px 10px; margin-top: 8px; display: inline-block; }

/* reader + markdown */
.lm-reader { padding: 26px 28px; max-width: 780px; margin: 0 auto; }
.lm-reader h1 { margin: 8px 0 6px; font-size: 26px; }
.lm-reader-summary { color: var(--mer-text-muted); font-size: 15px; }
.lm-md { line-height: 1.65; font-size: 14.5px; }
.lm-md h2, .lm-md h3, .lm-md h4, .lm-md h5 { margin: 18px 0 6px; }
.lm-md p { margin: 8px 0; }
.lm-md ul { margin: 8px 0; padding-left: 22px; }
.lm-md pre { background: var(--mer-primary-tint); border-radius: var(--mer-radius-sm); padding: 12px 14px; overflow-x: auto; }
.lm-md code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.lm-md a { color: var(--mer-primary); }

/* ── SynDrive v2 — enterprise storage console ─────────────────────── */
.drv2 { display: flex; min-height: 100vh; background: #f6f7f9; }
.drv2-embed { min-height: auto; border: 1px solid rgba(0,0,0,.08); border-radius: 12px; overflow: hidden; }
.drv2-rail { width: 232px; flex: none; background: #fff; border-right: 1px solid rgba(0,0,0,.08);
  display: flex; flex-direction: column; padding: 14px 12px; gap: 4px; }
.drv2-brand { display: flex; align-items: center; gap: 10px; padding: 4px 6px 12px; cursor: pointer; }
.drv2-brand-logo { display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 10px; background: #101a3c; color: #fff; }
.drv2-brand-txt { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.drv2-brand-txt strong { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drv2-brand-txt em { font-style: normal; font-size: 11px; color: #6b7280; }
.drv2-new { display: flex; align-items: center; justify-content: center; gap: 8px;
  background: #101a3c; color: #fff; border: 0; border-radius: 10px; padding: 10px 14px;
  font-weight: 700; font-size: 14px; cursor: pointer; margin-bottom: 10px; }
.drv2-new:hover { background: #1c2a5e; }
.drv2-new svg { width: 16px; height: 16px; }
.drv2-nav { display: flex; flex-direction: column; gap: 2px; }
.drv2-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  border: 0; background: none; border-radius: 8px; padding: 8px 10px; font-size: 13.5px;
  color: #374151; cursor: pointer; }
.drv2-item svg { width: 17px; height: 17px; flex: none; }
.drv2-item span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drv2-item b { font-size: 11px; color: #9ca3af; font-weight: 600; }
.drv2-item:hover { background: rgba(0,0,0,.05); }
.drv2-item.active { background: #e8edfb; color: #101a3c; font-weight: 700; }
.drv2-sec { font-size: 10.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: #9ca3af; padding: 14px 10px 4px; }
.drv2-spaces { flex: 1; overflow-y: auto; }
.drv2-usage { border-top: 1px solid rgba(0,0,0,.08); padding-top: 10px; display: flex;
  flex-direction: column; gap: 6px; }
.drv2-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.drv2-top { display: flex; align-items: center; gap: 10px; padding: 12px 18px;
  background: #fff; border-bottom: 1px solid rgba(0,0,0,.08); position: sticky; top: 0; z-index: 5; }
.drv2-crumbs { font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drv2-search { flex: 1; max-width: 440px; margin-left: auto; }
.drv2-sel { border: 1px solid rgba(0,0,0,.14); border-radius: 8px; padding: 7px 10px;
  font-size: 13px; background: #fff; }
.drv2-toggle { display: flex; border: 1px solid rgba(0,0,0,.14); border-radius: 8px; overflow: hidden; }
.drv2-toggle button { border: 0; background: #fff; padding: 7px 9px; cursor: pointer; color: #6b7280; display: flex; }
.drv2-toggle button.on { background: #e8edfb; color: #101a3c; }
.drv2-toggle svg, .drv2-icon-btn svg { width: 16px; height: 16px; }
.drv2-icon-btn { border: 1px solid rgba(0,0,0,.14); background: #fff; border-radius: 8px;
  padding: 7px 9px; cursor: pointer; color: #6b7280; display: flex; }
.drv2-icon-btn:hover { color: #101a3c; }
.drv2-body { flex: 1; padding: 18px; overflow-y: auto; }
.drv2-body.drv2-drop { outline: 2px dashed #2563eb; outline-offset: -8px; background: #eef3fe; }

/* ── SynDrive: the platform library (Play · Store · Feed · Chat) ──
   Surfaces live in the rail; inside, an enterprise folder grid —
   organized sub-folders with covers, counts and sizes, plus a
   breadcrumb bar to walk back out. */
.drv2-crumbbar { align-items: center; }
.drv2-crumb-link { display: inline-flex; align-items: center; gap: 8px; border: 0;
  background: none; padding: 4px 6px; border-radius: 8px; cursor: pointer;
  font: inherit; color: inherit; }
.drv2-crumb-link:hover { background: #f1f4fb; }
.drv2-crumb-link svg { width: 16px; height: 16px; color: #2563eb; }
.drv2-crumb-sep { color: #9aa3b5; font-weight: 600; }
.drv2-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px; margin: 4px 0 18px; }
.drv2-cat { position: relative; display: flex; align-items: center; gap: 12px;
  padding: 14px; border: 1px solid var(--line, #e6e8f0); border-radius: 16px;
  background: #fff; cursor: pointer; text-align: left; font: inherit;
  transition: box-shadow .16s ease, transform .16s ease, border-color .16s ease; }
.drv2-cat:hover { box-shadow: 0 10px 26px rgba(20, 30, 70, .1);
  transform: translateY(-1px); border-color: #c7d4f4; }
.drv2-cat-cover { display: inline-flex; width: 52px; height: 52px; border-radius: 12px;
  align-items: center; justify-content: center; background: #eef3fe; color: #2563eb;
  flex: none; background-size: cover; background-position: center; overflow: hidden; }
.drv2-cat-cover.has-img svg { display: none; }
.drv2-cat-cover svg { width: 22px; height: 22px; }
.drv2-cat-txt { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.drv2-cat-txt strong { font-size: 13.5px; }
.drv2-cat-txt em { font-style: normal; font-size: 11.5px; color: #6b7280; }
.drv2-cat-go { margin-left: auto; color: #9aa3b5; font-size: 18px; font-weight: 600; }
.drv2-e2e-note { display: flex; align-items: center; gap: 8px; max-width: 560px;
  padding: 10px 12px; border: 1px solid #dbe4f8; border-radius: 12px;
  background: #f6f9ff; font-size: 12px; }
.drv2-e2e-note svg { width: 14px; height: 14px; flex: none; color: #2563eb; }
.drv2-album.drv2-dropin { outline: 2px dashed #2563eb; outline-offset: 2px; }

/* ── Upload modal ── */
.drv2-upmodal { max-width: 560px; }
.drv2-dropzone { display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 34px 18px; border: 2px dashed #c9d2ea; border-radius: 14px; cursor: pointer;
  text-align: center; color: #40507e; background: #fafbff; transition: border-color .15s ease; }
.drv2-dropzone.on, .drv2-dropzone:hover { border-color: #2563eb; background: #eef3fe; }
.drv2-dropzone svg { width: 26px; height: 26px; }
.drv2-dropzone .sub { font-size: 11.5px; max-width: 40ch; }
.drv2-uplist { display: flex; flex-direction: column; gap: 4px; margin-top: 10px;
  max-height: 200px; overflow-y: auto; }
.drv2-uprow { display: flex; align-items: center; gap: 8px; padding: 6px 8px;
  border: 1px solid var(--line, #e6e8f0); border-radius: 10px; font-size: 12.5px; }
.drv2-uprow .drv2-lname-txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drv2-uprow-opts { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.drv2-uprow-opts label { font-size: 12px; color: #40507e; display: flex; gap: 8px; align-items: center; }
.drv2-folder-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px; margin-bottom: 12px; }
.drv2-folder-opt { display: flex; align-items: center; gap: 8px; padding: 10px 12px;
  border: 1px solid var(--line, #e6e8f0); border-radius: 10px; background: #fff;
  cursor: pointer; font: inherit; font-size: 12.5px; text-align: left; }
.drv2-folder-opt:hover { border-color: #2563eb; }
.drv2-folder-opt.on { border-color: #2563eb; background: #eef3fe; }
.drv2-folder-opt svg { width: 15px; height: 15px; color: #2563eb; flex: none; }

/* ── The upload queue — one panel, every file, live meters ── */
.upq { position: fixed; z-index: 1200; right: 18px; bottom: 18px; width: min(380px, calc(100vw - 24px));
  background: #fff; border: 1px solid var(--line, #e2e6f0); border-radius: 14px;
  box-shadow: 0 18px 48px rgba(15, 25, 60, .22); overflow: hidden; font-size: 12.5px; }
.upq-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px;
  background: #0d1b3e; color: #fff; }
.upq-head strong { flex: 1; font-size: 13px; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.upq-elapsed { font-variant-numeric: tabular-nums; font-size: 11.5px; opacity: .8; }
.upq-btn { border: 0; background: none; color: inherit; cursor: pointer; padding: 2px 6px;
  border-radius: 6px; font-size: 14px; line-height: 1; display: inline-flex; align-items: center; }
.upq-btn:hover { background: rgba(255, 255, 255, .15); }
.upq-btn svg { width: 13px; height: 13px; }
.upq-total { height: 3px; background: #e8ecf6; }
.upq-total span { display: block; height: 100%; width: 0; background: #2563eb; transition: width .3s ease; }
.upq-rows { max-height: 240px; overflow-y: auto; padding: 6px 10px 10px; }
.upq.upq-min .upq-rows { display: none; }
.upq-row { display: flex; align-items: center; gap: 8px; padding: 6px 0;
  border-bottom: 1px solid #f0f2f8; color: #1f2b50; }
.upq-row:last-child { border-bottom: 0; }
.upq-row .upq-btn { color: #6b7280; }
.upq-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upq-size { color: #8a93ab; font-size: 11px; flex: none; }
.upq-bar { flex: none; width: 74px; height: 5px; border-radius: 999px; background: #e8ecf6; overflow: hidden; }
.upq-bar span { display: block; height: 100%; width: 0; background: #2563eb; transition: width .25s ease; }
.upq-pct { flex: none; width: 34px; text-align: right; font-variant-numeric: tabular-nums;
  font-size: 11px; color: #40507e; }
.upq-row.ok .upq-pct { color: #1a9b64; font-weight: 700; }
.upq-row.ok .upq-bar span { background: #1a9b64; width: 100% !important; }
.upq-row.err .upq-pct { color: #e5484d; font-weight: 700; }
.upq-row.err .upq-bar span { background: #e5484d; }
.upq-row.off { opacity: .55; }
@media (max-width: 640px) { .upq { right: 8px; bottom: 76px; } }
.drv2-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 14px; }
.drv2-card { position: relative; background: #fff; border: 1px solid rgba(0,0,0,.09);
  border-radius: 12px; overflow: hidden; cursor: pointer; transition: box-shadow .12s; }
.drv2-card:hover { box-shadow: 0 4px 14px rgba(16,26,60,.10); }
.drv2-thumb { height: 108px; display: flex; align-items: center; justify-content: center;
  background: #fdecec; color: #d33; background-size: cover; background-position: center; }
.drv2-thumb.has-img { color: transparent; }
.drv2-thumb.has-img svg { display: none; }
.drv2-thumb svg { width: 26px; height: 26px; }
.drv2-card-meta { padding: 9px 34px 10px 11px; display: flex; flex-direction: column; gap: 2px; }
.drv2-card-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; display: flex; align-items: center; gap: 4px; }
.drv2-star svg { width: 12px; height: 12px; color: #eab308; fill: #eab308; }
.drv2-dots { position: absolute; right: 6px; bottom: 8px; border: 0; background: none;
  color: #9ca3af; cursor: pointer; padding: 4px; border-radius: 6px; display: flex; }
.drv2-dots:hover { background: rgba(0,0,0,.06); color: #101a3c; }
.drv2-dots svg { width: 16px; height: 16px; }
.drv2-list { background: #fff; border: 1px solid rgba(0,0,0,.09); border-radius: 12px; overflow: hidden; }
.drv2-lrow { display: grid; grid-template-columns: minmax(0,1fr) 110px 90px 110px 40px;
  align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid rgba(0,0,0,.05);
  cursor: pointer; position: relative; font-size: 13.5px; }
.drv2-lrow:last-child { border-bottom: 0; }
.drv2-lrow:hover { background: rgba(0,0,0,.03); }
.drv2-lhead { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: #9ca3af; cursor: default; }
.drv2-lhead:hover { background: none; }
.drv2-lname { display: flex; align-items: center; gap: 8px; min-width: 0; font-weight: 600; }
.drv2-lname > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drv2-lname svg { width: 16px; height: 16px; flex: none; color: #6b7280; }
.drv2-lrow .drv2-dots { position: static; }
.drv2-empty { display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 70px 20px; color: #6b7280; text-align: center; }
.drv2-empty .big svg { width: 40px; height: 40px; opacity: .45; }
.drv2-menu { position: fixed; z-index: 300; background: #fff; border: 1px solid rgba(0,0,0,.1);
  border-radius: 10px; box-shadow: 0 10px 28px rgba(16,26,60,.18); padding: 6px; min-width: 190px; }
.drv2-menu button { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  border: 0; background: none; border-radius: 7px; padding: 8px 10px; font-size: 13px; cursor: pointer; }
.drv2-menu button:hover { background: rgba(0,0,0,.05); }
.drv2-menu svg { width: 15px; height: 15px; color: #6b7280; }
@media (max-width: 760px) {
  .drv2 { flex-direction: column; }
  .drv2-rail { width: auto; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .drv2-spaces { flex: none; max-height: 120px; }
  .drv2-search { max-width: none; }
  .drv2-lrow { grid-template-columns: minmax(0,1fr) 80px 40px; }
  .drv2-lrow span:nth-child(2), .drv2-lrow span:nth-child(4),
  .drv2-lhead span:nth-child(2), .drv2-lhead span:nth-child(4) { display: none; }
}

/* SynDrive v2 — preview overlay + analytics */
.drv2-preview { position: fixed; inset: 0; z-index: 400; background: rgba(10,14,26,.92);
  display: flex; flex-direction: column; }
.drv2-preview-top { display: flex; align-items: center; gap: 12px; padding: 12px 18px;
  color: #fff; font-size: 14px; }
.drv2-preview-top .sub { color: rgba(255,255,255,.6); }
.drv2-preview-top .drv2-icon-btn { background: rgba(255,255,255,.1); border-color: transparent; color: #fff; }
.drv2-preview-body { flex: 1; display: flex; align-items: center; justify-content: center;
  padding: 0 24px 24px; min-height: 0; }
.drv2-preview-body img, .drv2-preview-body video { max-width: 100%; max-height: 100%;
  border-radius: 10px; box-shadow: 0 18px 60px rgba(0,0,0,.5); }
.drv2-preview-body audio { width: min(520px, 90%); }
.drv2-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px; margin-bottom: 16px; }
.drv2-stat { background: #fff; border: 1px solid rgba(0,0,0,.09); border-radius: 12px;
  padding: 14px; display: flex; flex-direction: column; gap: 3px; position: relative; }
.drv2-stat strong { font-size: 20px; }
.drv2-stat-ic { position: absolute; top: 12px; right: 12px; color: #9ca3af; }
.drv2-stat-ic svg { width: 16px; height: 16px; }
.drv2-ana-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.drv2-ana-card { padding: 16px; }
.drv2-ana-card h3 { display: flex; align-items: center; gap: 8px; font-size: 14px; margin: 0 0 12px; }
.drv2-ana-card h3 svg { width: 16px; height: 16px; color: #6b7280; }
.drv2-ana-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(80px, 140px) auto;
  align-items: center; gap: 10px; padding: 7px 0; font-size: 13px; }
.drv2-ana-row[role="button"] { grid-template-columns: minmax(0,1fr) auto; cursor: pointer; border-radius: 8px; }
.drv2-ana-row[role="button"]:hover { background: rgba(0,0,0,.04); }
.drv2-ana-label { display: flex; align-items: center; gap: 8px; min-width: 0; font-weight: 600; }
.drv2-ana-label > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drv2-ana-label svg { width: 15px; height: 15px; flex: none; color: #6b7280; }

/* ── SynDrive share links ─────────────────────────────────────────── */
.drv2-modal-wrap { align-items: center; justify-content: center; display: flex; }
.drv2-modal { width: min(620px, 94vw); background: var(--card, #fff); color: var(--ink, #0a0e1a);
  border-radius: 16px; box-shadow: 0 24px 70px rgba(0,0,0,.45); overflow: hidden; }
.drv2-modal-top { display: flex; align-items: center; gap: 10px; padding: 14px 16px;
  border-bottom: 1px solid var(--line, #e6e9f0); }
.drv2-modal-body { padding: 16px; display: grid; gap: 14px; }
.drv2-share-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.drv2-share-form label { display: grid; gap: 4px; font-size: 12px; color: var(--muted, #667); }
.drv2-share-form select, .drv2-share-form input { padding: 8px 10px; border-radius: 9px;
  border: 1px solid var(--line, #e6e9f0); background: transparent; color: inherit; min-width: 150px; }
.drv2-share-out { display: flex; gap: 8px; align-items: center; padding: 10px 12px;
  background: var(--tint, rgba(0,0,0,.04)); border-radius: 10px; }
.drv2-share-out code, .drv2-share-row code { font-size: 12px; word-break: break-all; flex: 1; }
.drv2-share-head { font-size: 12px; font-weight: 700; color: var(--muted, #667);
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
.drv2-share-row { display: flex; align-items: center; gap: 8px; padding: 8px 0;
  border-top: 1px solid var(--line, #e6e9f0); }
.drv2-share-row .sub { font-size: 11px; white-space: nowrap; }
.drv2-icon-btn.danger { color: #d9534f; }

/* ── Public share landing (/s/<token>) ────────────────────────────── */
.share-page { display: flex; justify-content: center; padding: 40px 16px; }
.share-wrap { width: min(860px, 100%); display: grid; gap: 16px; }
.share-brand { display: flex; align-items: center; gap: 10px; font-weight: 800; }
.share-card { background: var(--card, #fff); border: 1px solid var(--line, #e6e9f0);
  border-radius: 16px; padding: 18px; display: grid; gap: 16px; }
.share-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.share-title { display: grid; gap: 2px; flex: 1; min-width: 200px; }
.share-body { display: grid; gap: 10px; justify-items: center; }
.share-body img, .share-body video { max-width: 100%; max-height: 62vh; border-radius: 12px; }
.share-body audio { width: 100%; }
.share-empty { text-align: center; display: grid; gap: 8px; justify-items: center; padding: 24px 0; }
.share-foot { text-align: center; }

/* ── SynDrive: enterprise storage keys ────────────────────────────── */
.drv2-keys { display: grid; gap: 16px; padding: 16px; }
.drv2-conn { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.drv2-conn > div { display: grid; gap: 3px; padding: 9px 11px; border-radius: 10px;
  background: var(--tint, rgba(0,0,0,.04)); }
.drv2-conn code { font-size: 12px; word-break: break-all; }
.drv2-key-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end;
  padding-top: 4px; border-top: 1px solid var(--line, #e6e9f0); }
.drv2-key-form label { display: grid; gap: 4px; font-size: 12px; color: var(--muted, #667); }
.drv2-key-form input, .drv2-key-form select { padding: 8px 10px; border-radius: 9px;
  border: 1px solid var(--line, #e6e9f0); background: transparent; color: inherit; min-width: 160px; }
.drv2-key-list { display: grid; }
.drv2-key-row { display: flex; align-items: center; gap: 10px; padding: 10px 0;
  border-top: 1px solid var(--line, #e6e9f0); }
.drv2-key-label { display: grid; gap: 2px; flex: 1; min-width: 0; }
.drv2-key-label code { font-size: 11px; color: var(--muted, #667); }
.drv2-key-row .pill { font-size: 11px; padding: 2px 9px; border-radius: 999px;
  background: var(--tint, rgba(0,0,0,.06)); white-space: nowrap; }
.drv2-key-row .pill.warn { background: rgba(217,131,36,.16); color: #9a5b06; }

/* ── Community pulse: active poll + top contributors ──────────────── */
.pulse-card { display: grid; }
.pulse-q { font-weight: 600; margin: 6px 0 10px; }
.pulse-opts { display: grid; gap: 7px; }
.pulse-opt { display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line, #e6e9f0);
  background: transparent; color: inherit; text-align: left; font: inherit; }
.pulse-opt.vote { cursor: pointer; }
.pulse-opt.vote:hover { background: var(--tint, rgba(0,0,0,.04)); }
.pulse-opt.mine { border-color: var(--accent, #2f6f4f); }
.pulse-opt-l { flex: 1; min-width: 0; font-size: 13px; }
.pulse-opt .drv-meter { flex: 1.2; }
.pulse-row { display: flex; align-items: center; gap: 9px; width: 100%; }
.pulse-rank { width: 18px; text-align: center; font-weight: 700; color: var(--muted, #667); }
.pulse-who { display: grid; gap: 1px; min-width: 0; text-align: left; }
.pulse-who .sub { font-size: 11px; }

/* ── SynDrive masonry + moments (Google-Photos texture) ───────────── */
.drv2-moment { font-size: 15px; font-weight: 800; margin: 18px 2px 10px;
  letter-spacing: -.01em; }
.drv2-moment:first-child { margin-top: 2px; }
.drv2-masonry { columns: 5 190px; column-gap: 14px; }
.drv2-masonry .drv2-tile { break-inside: avoid; margin: 0 0 14px; width: 100%;
  animation: drv2-in .38s cubic-bezier(.2,.7,.3,1) both; }
@keyframes drv2-in { from { opacity: 0; transform: translateY(10px) scale(.985); }
  to { opacity: 1; transform: none; } }
.drv2-tile.is-media .drv2-thumb { height: 150px; }
.drv2-tile.is-media.tall .drv2-thumb { height: 230px; }
.drv2-tile.is-doc .drv2-thumb { height: 92px; }
.drv2-tile { transition: transform .18s ease, box-shadow .18s ease; overflow: hidden; }
.drv2-tile:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(10,14,26,.14); }
.drv2-thumb { position: relative; overflow: hidden; }
.drv2-hoverplay { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; animation: drv2-fade .25s ease both; }
@keyframes drv2-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .drv2-masonry .drv2-tile, .drv2-hoverplay { animation: none; }
  .drv2-tile { transition: none; }
}

/* ── SynDrive on phones: an app, not a squeezed desktop ───────────── */
.drv2-tabs { display: none; }
@media (max-width: 760px) {
  .drv2 { display: block; }
  .drv2-rail { display: none; }               /* the tabs carry navigation */
  .drv2-main { padding-bottom: 76px; }        /* room for the tab bar */
  .drv2-top { flex-wrap: wrap; gap: 8px; position: sticky; top: 0; z-index: 30;
    background: var(--bg, #f6f7fb); padding: 10px 12px; }
  .drv2-search { order: 5; flex: 1 1 100%; }
  .drv2-body { padding: 10px 12px; }
  .drv2-masonry { columns: 2; column-gap: 10px; }
  .drv2-masonry .drv2-tile { margin-bottom: 10px; }
  .drv2-tile.is-media .drv2-thumb { height: 128px; }
  .drv2-tile.is-media.tall .drv2-thumb { height: 190px; }
  .drv2-conn { grid-template-columns: 1fr; }
  .drv2-tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    display: flex; justify-content: space-around; align-items: flex-end;
    padding: 6px 4px calc(8px + env(safe-area-inset-bottom));
    background: rgba(255,255,255,.94); backdrop-filter: blur(14px);
    border-top: 1px solid var(--line, #e6e9f0); }
  .drv2-tab { display: grid; justify-items: center; gap: 3px; flex: 1;
    padding: 6px 0; border: 0; background: none; color: var(--muted, #667);
    font: inherit; font-size: 10.5px; font-weight: 600; }
  .drv2-tab svg { width: 22px; height: 22px; }
  .drv2-tab.on { color: var(--accent, #12203a); }
  .drv2-tab-new { position: relative; top: -14px; flex: 0 0 64px; }
  .drv2-tab-new svg { width: 30px; height: 30px; padding: 12px; border-radius: 50%;
    background: var(--accent, #12203a); color: #fff; box-sizing: content-box;
    box-shadow: 0 8px 20px rgba(10,14,26,.3); }
  .drv2-tab-new span { display: none; }
}

/* Bottom sheet for the mobile "More" tab. */
.drv2-sheet-back { position: fixed; inset: 0; z-index: 80; background: rgba(10,14,26,.42);
  display: flex; align-items: flex-end; animation: drv2-fade .18s ease both; }
.drv2-sheet { width: 100%; background: var(--card, #fff); border-radius: 18px 18px 0 0;
  padding: 8px 10px calc(14px + env(safe-area-inset-bottom));
  max-height: 70vh; overflow-y: auto;
  animation: drv2-sheet-up .26s cubic-bezier(.2,.7,.3,1) both; }
@keyframes drv2-sheet-up { from { transform: translateY(40%); } to { transform: none; } }
.drv2-sheet-grip { width: 38px; height: 4px; border-radius: 3px; margin: 4px auto 10px;
  background: var(--line, #dde1ea); }
.drv2-sheet button { display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 13px 10px; border: 0; background: none; color: inherit; font: inherit;
  font-size: 15px; border-radius: 10px; text-align: left; }
.drv2-sheet button:active { background: var(--tint, rgba(0,0,0,.05)); }
.drv2-sheet svg { width: 20px; height: 20px; color: var(--muted, #667); }

/* ── SynDrive v1.1.60 → lively pass ──────────────────────────────────────
   Scrollable main pane, bigger masonry, albums, settings, charts,
   the Tranquil player, OTP share entry, list thumbnails. */

/* The flex column must be height-bounded for the body pane to scroll. */
.drv2 { height: 100vh; min-height: 0; }
.drv2-main { min-height: 0; }
.drv2-body { min-height: 0; }

/* Masonry ~30% bigger — real files, readable names. */
.drv2-masonry { columns: 4 260px; column-gap: 16px; }
.drv2-tile .drv2-thumb { min-height: 150px; }
.drv2-tile.tall .drv2-thumb { min-height: 240px; }
.drv2-tile.is-doc .drv2-thumb { min-height: 120px; display: flex; align-items: center; justify-content: center; }
.tq-filebadge { display: block; }

/* Albums & galleries — cover photo with a white veil under the name. */
.drv2-albums { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.drv2-album { position: relative; width: 190px; height: 130px; border-radius: 14px;
  overflow: hidden; border: 1px solid #e2e5ea; background: #eef0f4; cursor: pointer;
  padding: 0; text-align: left; transition: transform .18s ease, box-shadow .18s ease; }
.drv2-album:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(20,30,50,.12); }
.drv2-album-cover { position: absolute; inset: 0; background-size: cover; background-position: center;
  display: flex; align-items: center; justify-content: center; color: #98a1ad; }
.drv2-album-cover.has-img svg { display: none; }
.drv2-album-veil { position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(255,255,255,.92) 0%, rgba(255,255,255,.55) 34%, rgba(255,255,255,0) 62%); }
.drv2-album-name { position: absolute; left: 12px; right: 12px; bottom: 8px;
  font-weight: 700; font-size: 14px; color: #1c2330; display: flex; flex-direction: column; }
.drv2-album-name em { font-style: normal; font-weight: 500; font-size: 12px; color: #5c6675; }
.drv2-album-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }

/* New menu (rail button + FAB). */
.drv2-newmenu { min-width: 220px; }
.drv2-newmenu-center { position: fixed; left: 50%; bottom: 96px; top: auto;
  transform: translateX(-50%); z-index: 60; }

/* List view — real thumbnails and type badges. */
.drv2-lthumb { width: 34px; height: 34px; border-radius: 8px; background: #eef0f4 center/cover;
  display: inline-flex; align-items: center; justify-content: center; color: #98a1ad; flex: none; }
.drv2-lthumb.has-img svg { display: none; }
.drv2-lthumb.is-badge { background: transparent; }
.drv2-lname { display: flex; align-items: center; gap: 10px; min-width: 0; }
.drv2-lname-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Settings lane. */
.drv2-set-card { margin-bottom: 14px; padding: 18px; }
.drv2-set-card h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 15px; }
.drv2-set-card label { display: block; margin: 10px 0; font-size: 13.5px; }
.drv2-set-card select { margin-left: 8px; }
.drv2-set-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.drv2-check { display: flex !important; align-items: center; gap: 8px; cursor: pointer; }
.drv2-switch { position: relative; display: inline-block; width: 44px; height: 24px; flex: none; }
.drv2-switch input { opacity: 0; width: 0; height: 0; }
.drv2-switch i { position: absolute; inset: 0; border-radius: 24px; background: #cdd3dc;
  transition: background .18s ease; cursor: pointer; }
.drv2-switch i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
  border-radius: 50%; background: #fff; transition: transform .18s ease; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.drv2-switch input:checked + i { background: #2563eb; }
.drv2-switch input:checked + i::after { transform: translateX(20px); }

/* Charts — sharp colours, honest proportions. */
.drv2-pie { display: flex; align-items: center; gap: 18px; margin: 8px 0 14px; }
.drv2-pie-svg { width: 130px; height: 130px; flex: none; transform: rotate(-90deg); border-radius: 50%; }
.drv2-pie-legend { display: flex; flex-direction: column; gap: 6px; min-width: 0; font-size: 13px; }
.drv2-pie-legend div { display: flex; align-items: center; gap: 8px; }
.drv2-pie-legend i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.drv2-pie-legend b { margin-left: auto; font-weight: 600; }
.drv2-bars { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.drv2-bar-row { display: grid; grid-template-columns: 44px 1fr 64px; align-items: center; gap: 10px; }
.drv2-bar-label { font-size: 12.5px; color: #5c6675; }
.drv2-bar-track { height: 14px; border-radius: 7px; background: #eef0f4; overflow: hidden; }
.drv2-bar-fill { display: block; height: 100%; border-radius: 7px; transition: width .5s ease; }
.drv2-ana-sub { font-weight: 700; font-size: 13px; margin: 10px 0 6px; color: #3a4353; }

/* Share dialog — recipient mode. */
.drv2-share-tabs { display: flex; gap: 8px; margin-bottom: 10px; }
.drv2-share-tabs button { display: flex; align-items: center; gap: 6px; padding: 7px 12px;
  border-radius: 999px; border: 1px solid #dfe3e9; background: #fff; cursor: pointer; font-size: 13px; }
.drv2-share-tabs button.on { background: #10131a; color: #fff; border-color: #10131a; }
.drv2-share-user { margin: 10px 0; }
.drv2-share-results { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
.drv2-share-person { display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border: 0; background: transparent; border-radius: 10px; cursor: pointer; text-align: left; width: 100%; }
.drv2-share-person:hover { background: #f1f3f7; }
.drv2-share-person em { display: block; font-style: normal; }
.drv2-share-picked { margin: 8px 0; padding: 8px 12px; background: #eef3fe; border-radius: 10px;
  display: flex; align-items: center; gap: 8px; font-size: 13.5px; }

/* Share landing — OTP entry. */
.share-otp { text-align: center; padding: 26px 8px; }
.share-otp-row { display: flex; gap: 10px; justify-content: center; margin: 16px 0 8px; }
.share-otp-row input { width: 140px; text-align: center; font-size: 22px; letter-spacing: 6px;
  padding: 10px; border-radius: 12px; border: 1px solid #dfe3e9; font-variant-numeric: tabular-nums; }

/* ── Tranquil player ─────────────────────────────────────────────────── */
.tqp { position: relative; width: 100%; max-width: 960px; background: #000; border-radius: 14px;
  overflow: hidden; outline: none; }
.tqp-video { display: block; width: 100%; max-height: 74vh; background: #000; }
.tqp-big { position: absolute; inset: 0; margin: auto; width: 74px; height: 74px; border-radius: 50%;
  border: 0; background: rgba(16,19,26,.72); color: #fff; display: flex; align-items: center;
  justify-content: center; cursor: pointer; backdrop-filter: blur(4px); }
.tqp-big svg { width: 30px; height: 30px; }
.tqp-bar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; background: linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,0));
  opacity: 0; transition: opacity .18s ease; }
.tqp:hover .tqp-bar, .tqp:focus-within .tqp-bar { opacity: 1; }
.tqp-btn { border: 0; background: transparent; color: #fff; cursor: pointer; padding: 4px;
  display: flex; align-items: center; }
.tqp-btn svg { width: 18px; height: 18px; }
.tqp-speed { font-size: 12.5px; font-weight: 700; min-width: 34px; }
.tqp-time { color: #e6e9ef; font-size: 12px; font-variant-numeric: tabular-nums; }
.tqp-seek { position: relative; flex: 1; height: 6px; border-radius: 3px; background: rgba(255,255,255,.25);
  cursor: pointer; }
.tqp-seek-buf { position: absolute; inset: 0 auto 0 0; border-radius: 3px; background: rgba(255,255,255,.35); width: 0; }
.tqp-seek-fill { position: absolute; inset: 0 auto 0 0; border-radius: 3px; background: #2f6fed; width: 0; }
.tqp-vol { width: 70px; accent-color: #2f6fed; }

/* Mobile refinements. */
@media (max-width: 760px) {
  .drv2 { height: auto; min-height: 100vh; }
  .drv2-body { overflow: visible; }
  .drv2-masonry { columns: 2 150px; }
  .drv2-lrow { grid-template-columns: minmax(0,1fr) 72px 40px; }
  .drv2-lrow .drv2-lcol { display: none; }
  .drv2-lhead span:nth-child(2), .drv2-lhead span:nth-child(4) { display: none; }
  .drv2-album { width: calc(50% - 7px); height: 116px; }
  .drv2-pie { flex-direction: column; }
  .drv2-set-row { flex-direction: column; }
}

/* ── SynDrive fixes: scroll everywhere, mobile names, settings fields ── */

/* Scrolling: the drive scrolls as a document. ws-mode locks body overflow
   for map consoles; a standalone drive page unlocks it (:has) and pins
   the rail instead, so every lane, including Settings, scrolls naturally. */
body.ws-mode:has(.drv2:not(.drv2-embed)) { overflow: auto; }
.drv2 { height: auto; min-height: 100vh; }
.drv2-body { overflow: visible; }
.drv2-rail { position: sticky; top: 0; align-self: flex-start; height: 100vh; overflow-y: auto; }
.drv2-top { position: sticky; top: 0; z-index: 5; background: #f6f7f9; }

/* Mobile: the old nth-child hide rule also caught the name text inside
   .drv2-lname (a descendant span). Scope it to direct children only. */
@media (max-width: 760px) {
  .drv2-rail { position: static; height: auto; overflow: visible; }
  .drv2-lrow span:nth-child(2), .drv2-lrow span:nth-child(4) { display: revert; }
  .drv2-lrow > span:nth-child(2), .drv2-lrow > span:nth-child(4),
  .drv2-lhead > span:nth-child(2), .drv2-lhead > span:nth-child(4) { display: none; }
  .drv2-lname-txt { display: inline-block !important; }
}

/* Album cards: share affordance in the corner. */
.drv2-album-share { position: absolute; top: 8px; right: 8px; z-index: 2;
  width: 30px; height: 30px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255,255,255,.88); color: #1c2330; display: flex;
  align-items: center; justify-content: center; opacity: 0; transition: opacity .15s ease; }
.drv2-album:hover .drv2-album-share { opacity: 1; }
@media (max-width: 760px) { .drv2-album-share { opacity: 1; } }
.drv2-album-share svg { width: 14px; height: 14px; }
.drv2-album-bar .btn { margin-left: auto; }

/* Settings: meridian-style fields, compact rows. */
.drv2-set-field { display: flex !important; align-items: center; justify-content: space-between;
  gap: 12px; max-width: 420px; }
.drv2-set-field .drv2-sel { margin: 0; }
.drv2-sel { appearance: none; -webkit-appearance: none; padding: 8px 34px 8px 12px;
  border: 1px solid #dfe3e9; border-radius: 10px; background: #fff
  url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.4'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")
  no-repeat right 12px center; font: inherit; font-size: 13.5px; color: #1c2330; cursor: pointer; }
.drv2-sel:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.14); }
.drv2-spaces-box { margin-bottom: 16px; }
.drv2-spaces-box h4 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; }
.drv2-spaces-box .drv2-set-row { align-items: center; margin-bottom: 8px; }

/* Trash multi-select: checkboxes on tiles and rows, plus the bulk bar. */
.drv2-selbar { display: flex; align-items: center; gap: 12px; }
.drv2-selbar .drv2-check { margin: 0; }
.drv2-selbar .btn.danger { background: #e5484d; border-color: #e5484d; color: #fff; }
.drv2-pick { width: 18px; height: 18px; accent-color: #2563eb; cursor: pointer; flex: 0 0 auto; }
.drv2-tile .drv2-pick { position: absolute; top: 10px; left: 10px; z-index: 3;
  background: rgba(255,255,255,.92); border-radius: 4px; }
.drv2-lname .drv2-pick { margin-right: 8px; }

/* Share dialog: multiple recipients render as removable chips. */
.drv2-share-picked .pill { display: inline-flex; align-items: center; gap: 4px; margin: 2px 4px 2px 0; }
.drv2-share-picked .pill .drv2-icon-btn { width: 18px; height: 18px; padding: 0; }
.drv2-share-picked .pill .drv2-icon-btn svg { width: 11px; height: 11px; }

/* ══════════════════════════════════════════════════════════════════════
   Lingua: right-to-left foundation. `initI18n()` sets dir="rtl" on
   <html> for Arabic-script locales (ar · he · fa · ur, plus custom RTL
   registrations). Layout mostly mirrors itself through flexbox; these
   rules fix the parts that anchor to a physical side.
   ══════════════════════════════════════════════════════════════════════ */
[dir="rtl"] body { direction: rtl; }
[dir="rtl"] .drv2-rail { border-right: 0; border-left: 1px solid #e8edf3; }
[dir="rtl"] .drv2-dots, [dir="rtl"] .drv2-album-share { right: auto; left: 8px; }
[dir="rtl"] .drv2-tile .drv2-pick { left: auto; right: 10px; }
[dir="rtl"] .drv2-star { margin-right: 0; margin-left: 4px; }
[dir="rtl"] .ws-search svg { margin-right: 0; margin-left: 6px; }
[dir="rtl"] .drv2-sel {
  padding: 8px 12px 8px 34px;
  background-position: left 12px center;
}
[dir="rtl"] .toast-container { right: auto; left: 16px; }
[dir="rtl"] input, [dir="rtl"] textarea { text-align: right; }
[dir="rtl"] input[type="email"], [dir="rtl"] input[type="url"],
[dir="rtl"] code, [dir="rtl"] pre { direction: ltr; unicode-bidi: embed; }

/* ── Tranquil Inbox: unified search + smart composer ─────────────────── */
.ib-strap { margin-right: auto; margin-left: 10px; }
.ib-search { display: flex; align-items: center; gap: 8px; margin: 10px 10px 4px;
  padding: 7px 10px; border: 1px solid var(--mer-border); border-radius: 999px;
  background: var(--mer-surface-2, rgba(0,0,0,.03)); color: var(--mer-muted); }
.ib-search svg { width: 15px; height: 15px; flex: none; }
.ib-search input { border: 0; outline: 0; background: none; flex: 1; min-width: 0;
  font: inherit; color: var(--mer-ink, inherit); }
.ib-search-out { margin: 0 10px; border: 1px solid var(--mer-border); border-radius: 10px;
  background: var(--mer-surface, #fff); box-shadow: 0 8px 24px rgba(0,0,0,.10);
  overflow: hidden; max-height: 300px; overflow-y: auto; }
.ib-sr { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 12px;
  border: 0; background: none; cursor: pointer; text-align: left; font: inherit; }
.ib-sr:hover { background: rgba(0,0,0,.05); }
.ib-sr span { display: flex; flex-direction: column; min-width: 0; }
.ib-sr em { font-style: normal; font-size: 12px; }
.ib-cmd { position: fixed; z-index: 240; min-width: 240px; padding: 6px;
  border: 1px solid var(--mer-border); border-radius: 12px; background: var(--mer-surface, #fff);
  box-shadow: 0 12px 32px rgba(0,0,0,.16); }
.ib-cmd-head { padding: 6px 10px 8px; font-size: 12px; font-weight: 700; color: var(--mer-muted); }
.ib-cmd button { display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 10px; border: 0; border-radius: 8px; background: none; cursor: pointer;
  text-align: left; font: inherit; }
.ib-cmd button:hover { background: rgba(0,0,0,.06); }
.ib-cmd button svg { width: 16px; height: 16px; opacity: .7; flex: none; }

/* ── Inbox full-workspace mode: the shell IS the messenger ───────────── */
.ib-head { margin-bottom: 8px; }
.ib-wrap.ib-full { border: 1px solid var(--mer-border); border-radius: 14px;
  background: var(--mer-surface, #fff);
  height: calc(100dvh - 148px); min-height: 480px; }
.ib-wrap.ib-full .ib-rail, .ib-wrap.ib-full .ib-main, .ib-wrap.ib-full .ib-side {
  min-height: 0; }
@media (max-width: 720px) {
  .ib-wrap.ib-full { height: calc(100dvh - 176px); min-height: 0; border-radius: 10px; }
  .ib-wrap.ib-full .ib-rail { max-height: none; flex: 1; }
  .ib-wrap.ib-full .ib-rail:has(~ .ib-main .chat-thread) { display: none; }
  .ib-wrap.ib-full .ib-main { flex: 1; min-height: 0; }
}

/* ── Boot splash: Tranquil green pulse, no chrome flash ──────────────── */
#tq-splash { position: fixed; inset: 0; z-index: 999; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px;
  background: var(--mer-surface, #fff); transition: opacity .25s ease; }
#tq-splash.out { opacity: 0; pointer-events: none; }
.tq-splash-mark { display: flex; gap: 7px; }
.tq-splash-mark span { width: 11px; height: 11px; border-radius: 50%;
  background: var(--tq-green, #1a8a5a); animation: tqPulse 1.1s ease-in-out infinite; }
.tq-splash-mark span:nth-child(2) { animation-delay: .18s; background: var(--tq-ink, #1d2b4f); }
.tq-splash-mark span:nth-child(3) { animation-delay: .36s; }
@keyframes tqPulse { 0%, 100% { transform: scale(.6); opacity: .4; } 50% { transform: scale(1.15); opacity: 1; } }
.tq-splash-word { font-weight: 800; letter-spacing: .4px; color: var(--tq-ink, #1d2b4f); }

/* ── Inbox 3.0: full-viewport coordination interface ─────────────────── */
body.ib-mode #page { padding: 0; max-width: none; }
body.ib-mode .bottomnav { z-index: 60; }
.ib3 { display: flex; align-items: stretch; height: calc(100dvh - 56px);
  min-height: 0; background: var(--mer-surface, #fff);
  border-top: 1px solid var(--mer-border); }
.ib3-side { flex: 0 0 218px; border-right: 1px solid var(--mer-border);
  display: flex; flex-direction: column; min-height: 0;
  background: var(--mer-surface-2, rgba(0,0,0,.02)); }
.ib3-side-head { display: flex; align-items: center; justify-content: space-between;
  padding: 12px 12px 8px; }
.ib3-side-scroll { flex: 1; overflow-y: auto; padding: 4px 8px 16px; }
.ib3-nav { display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 7px 10px; border: 0; border-radius: 8px; background: none; cursor: pointer;
  font: inherit; font-size: 13px; text-align: left; color: inherit; }
.ib3-nav:hover { background: rgba(0,0,0,.06); }
.ib3-nav.on { background: rgba(26,138,90,.10); color: var(--tq-green, #1a8a5a); font-weight: 700; }
.ib3-nav svg { width: 15px; height: 15px; opacity: .7; flex: none; }
.ib3-nav span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ib3-nav em { font-style: normal; font-size: 11px; font-weight: 700; color: #d93025; }
.ib3-nav-sect { padding: 12px 10px 4px; font-size: 11px; font-weight: 800;
  letter-spacing: .6px; text-transform: uppercase; color: var(--mer-muted); }
.ib3-list { flex: 0 0 300px; border-right: 1px solid var(--mer-border);
  display: flex; flex-direction: column; min-height: 0; }
.ib3-list .ib-list { flex: 1; overflow-y: auto; }
.ib3-main { flex: 1 1 auto; min-width: 0; min-height: 0;
  display: flex; flex-direction: column; }
.ib3-main .dm-thread-box { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.ib3-main .chat-thread { height: 100%; flex: 1; }
.ib3-ctx { flex: 0 0 340px; border-left: 1px solid var(--mer-border);
  overflow-y: auto; padding: 16px 14px; }
.ib3-ai { position: relative; flex: none; display: flex; align-items: stretch; }
.ib3-ai-tab { position: absolute; right: 10px; bottom: 14px; width: 42px; height: 42px;
  border-radius: 50%; border: 1px solid var(--mer-border); cursor: pointer;
  background: var(--tq-green, #1a8a5a); color: #fff; display: flex;
  align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.ib3-ai-tab svg { width: 18px; height: 18px; }
.ib3-ai[data-open="1"] .ib3-ai-tab { display: none; }
.ib3-ai-body { width: 232px; border-left: 1px solid var(--mer-border);
  display: flex; flex-direction: column; min-height: 0;
  background: var(--mer-surface-2, rgba(0,0,0,.02)); }
.ib3-ai-head { display: flex; align-items: center; justify-content: space-between;
  padding: 12px 12px 8px; font-size: 14px; }
.ib3-ai-acts { flex: 1; overflow-y: auto; padding: 4px 8px 16px; }
.ib3-ai-out { margin: 6px 4px; padding: 10px; border: 1px solid var(--mer-border);
  border-radius: 10px; background: var(--mer-surface, #fff); font-size: 12.5px; }
@media (max-width: 1280px) { .ib3-ctx { display: none; } }
@media (max-width: 1060px) { .ib3-side { display: none; } }
@media (max-width: 768px) {
  .ib3 { height: calc(100dvh - 110px); flex-direction: row; }
  .ib3-list { flex: 1; border-right: 0; }
  .ib3-list:has(~ .ib3-main .dm-thread-box) { display: none; }
  .ib3-main { flex: 1; }
  .ib3-ai { display: none; }
}

/* ── Inbox 4.0: six-region enterprise workspace ───────────────────────
   header / rail / inbox-nav+list / conversation workspace / context.  */
body.ib-mode .gnav { display: none; }
body.ib-mode #page { padding: 0; }
.ib3 { height: 100dvh; border-top: 0; display: flex; flex-direction: column; }
.ib3-top { flex: 0 0 56px; display: flex; align-items: center; gap: 16px;
  padding: 0 16px; border-bottom: 1px solid var(--mer-border);
  background: var(--mer-surface, #fff); position: relative; z-index: 30; }
.ib3-brand { display: flex; align-items: center; text-decoration: none;
  color: inherit; flex: none; }
.ib3-brand .tq-logo { display: block; }
.ib3-gsearch { flex: 1; max-width: 520px; }
.ib3-gsearch-out { position: absolute; top: 52px; left: 180px; right: auto;
  width: min(520px, 80vw); z-index: 60; }
.ib3-top-acts { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.ib3-me { border: 0; background: none; padding: 2px; cursor: pointer;
  border-radius: 50%; box-shadow: 0 0 0 2px #34a853; }
.ib3-me.st-busy { box-shadow: 0 0 0 2px #d93025; }
.ib3-me.st-away { box-shadow: 0 0 0 2px #f6a609; }
.ib3-me.st-invisible { box-shadow: 0 0 0 2px var(--mer-border); }
.ib3-body { flex: 1; display: flex; min-height: 0; }
.ib3-rail { flex: 0 0 72px; display: flex; flex-direction: column; align-items: center;
  gap: 4px; padding: 10px 0; border-right: 1px solid var(--mer-border);
  background: var(--mer-c-brand-800, #26316B); }
.ib3-rail-items { flex: 1; display: flex; flex-direction: column; gap: 2px; width: 100%;
  align-items: center; overflow-y: auto; }
.ib3-rail-btn { display: flex; flex-direction: column; align-items: center; gap: 3px;
  width: 62px; padding: 9px 0 7px; border: 0; border-radius: 10px; background: none;
  cursor: pointer; font: inherit; font-size: 10px; color: var(--mer-c-brand-300, #8E97C4); }
.ib3-rail-btn:hover { background: rgba(255,255,255,.10); color: #fff; }
.ib3-rail-btn.on { color: var(--mer-c-lime-brand, #C2DB6F);
  background: rgba(255,255,255,.12); font-weight: 700; }
.ib3-rail-btn svg { width: 19px; height: 19px; }
.ib3-rail-foot { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.ib3-panel { flex: 0 0 240px; border-right: 1px solid var(--mer-border);
  display: flex; flex-direction: column; min-height: 0;
  background: var(--mer-surface-2, rgba(0,0,0,.02)); }
.ib3-convs { flex: 0 0 320px; border-right: 1px solid var(--mer-border);
  display: flex; flex-direction: column; min-height: 0; }
.ib3-lsearch { margin: 10px 10px 6px; }
.ib3-convs .ib-list { flex: 1; overflow-y: auto; }
.ib3-sections { display: flex; flex-direction: column; gap: 1px;
  padding: 6px 8px 8px; overflow-y: auto; flex: 1; }
.ib3-navg { padding: 8px 8px 3px; font-size: 10.5px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--mer-muted); }
.ib3-sec { display: flex; align-items: center; gap: 10px; text-align: left;
  padding: 6px 10px; border: 0; border-radius: 8px; background: none; cursor: pointer;
  font: inherit; font-size: 13px; color: var(--mer-muted); }
.ib3-sec:hover { background: rgba(0,0,0,.06); }
.ib3-sec.on { color: var(--tq-green, #1a8a5a); background: rgba(26,138,90,.10); font-weight: 700; }
.ib3-sec svg { width: 16px; height: 16px; flex: none; }
.ib3-views { display: flex; gap: 4px; padding: 8px 10px 4px; flex-wrap: wrap; }
.ib3-view { border: 1px solid var(--mer-border); border-radius: 999px; background: none;
  padding: 3px 11px; font: inherit; font-size: 12px; color: var(--mer-muted); cursor: pointer; }
.ib3-view.on { color: var(--tq-green, #1a8a5a); border-color: var(--tq-green, #1a8a5a);
  background: rgba(26,138,90,.08); font-weight: 700; }
/* header popovers */
.ib3-pop { position: fixed; z-index: 260; min-width: 260px; max-width: 340px;
  background: var(--mer-surface, #fff); border: 1px solid var(--mer-border);
  border-radius: 14px; box-shadow: 0 12px 34px rgba(0,0,0,.14); padding: 8px; }
.ib3-pop-head { padding: 4px 10px 8px; font-weight: 700; font-size: 13px; }
.ib3-pop-row { display: flex; gap: 10px; align-items: flex-start; padding: 7px 10px;
  border-radius: 8px; font-size: 13px; }
.ib3-pop-row svg { width: 15px; height: 15px; flex: none; margin-top: 2px; opacity: .6; }
.ib3-pop-row span { display: flex; flex-direction: column; min-width: 0; }
.ib3-pop-row em { font-style: normal; }
.ib3-pop-foot { display: flex; gap: 6px; padding: 8px 8px 2px; }
.ib3-pop-sep { height: 1px; background: var(--mer-border); margin: 6px 4px; }
.ib3-pop-item { display: flex; align-items: center; gap: 10px; width: 100%;
  border: 0; background: none; padding: 8px 10px; border-radius: 8px; cursor: pointer;
  font: inherit; font-size: 13px; text-align: left; }
.ib3-pop-item:hover { background: rgba(0,0,0,.06); }
.ib3-pop-item svg { width: 15px; height: 15px; opacity: .65; }
.ib3-pop-status { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 0 4px; }
.ib3-pop-status button { display: flex; align-items: center; gap: 8px; border: 1px solid var(--mer-border);
  border-radius: 8px; background: none; padding: 6px 9px; font: inherit; font-size: 12px; cursor: pointer; }
.ib3-pop-status button.on { border-color: var(--tq-green, #1a8a5a); font-weight: 700; }
.st-dot { width: 8px; height: 8px; border-radius: 50%; background: #34a853; }
.st-dot.st-busy { background: #d93025; }
.st-dot.st-away { background: #f6a609; }
.st-dot.st-invisible { background: var(--mer-border); }
/* conversation workspace + context */
.ib3-chead .dm-head-who > span { display: flex; flex-direction: column; line-height: 1.25; gap: 2px; min-width: 0; justify-content: center; }
.ib3-chead { min-height: 64px; align-items: center; }
.ib3-chead .dm-head-who { gap: 11px; }
.ib3-chead [data-presence] { font-size: 11.5px; line-height: 16px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.lane-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--tq-green, #1a8a5a); margin-right: 6px; vertical-align: 1px; }
.lane-pin svg { width: 11px; height: 11px; opacity: .55; margin-left: 5px; }
.ib-ctx-cover { height: 76px; margin: -16px -14px 0; border-radius: 0;
  background: linear-gradient(120deg, var(--mer-c-brand-800, #26316B), var(--mer-c-brand-700, #33418C) 60%, var(--mer-c-lime-brand, #C2DB6F)); }
.ib-ctx-head-over { margin-top: -26px; position: relative; }
.ib-ctx-head-over .avatar { box-shadow: 0 0 0 3px var(--mer-surface, #fff); }
/* context drawer: segmented tabs (Files · Work · Activity) + rows —
   the pane carries what you actually share, never duplicate buttons. */
.ib-ctx { min-height: 100%; }
.ib-ctx-tabs { display: flex; gap: 4px; width: 100%; margin: 10px 0 4px;
  border-bottom: 1px solid var(--mer-border); }
.ib-ctx-tabs button { flex: 1; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 600; color: var(--mer-muted);
  padding: 7px 4px 8px; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.ib-ctx-tabs button.on { color: var(--tq-green, #1a8a5a);
  border-bottom-color: var(--tq-green, #1a8a5a); }
.ib-ctx-body { display: flex; flex-direction: column; gap: 2px; width: 100%;
  flex: 1; overflow-y: auto; min-height: 120px; padding: 4px 0 12px; }
.ib-ctx-row { display: flex; align-items: flex-start; gap: 9px; width: 100%;
  border: 0; background: none; cursor: pointer; font: inherit; text-align: left;
  padding: 7px 6px; border-radius: 8px; }
.ib-ctx-row:hover { background: rgba(0,0,0,.05); }
.ib-ctx-row svg { width: 15px; height: 15px; flex: none; margin-top: 2px; opacity: .6; }
.ib-ctx-row span { display: flex; flex-direction: column; min-width: 0; font-size: 12.5px; }
.ib-ctx-row strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ib-ctx-row em { font-style: normal; font-size: 11px; }
.ib-ctx-dot { width: 7px; height: 7px; border-radius: 50%; flex: none;
  margin-top: 6px; background: var(--tq-green, #1a8a5a); opacity: .55; }
/* automation hub */
.auto-wall { max-width: 760px; margin: 0 auto; padding: 32px 24px; overflow-y: auto; }
.auto-wall h2 { margin: 0 0 4px; }
.auto-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.auto-card { display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  text-align: left; border: 1px solid var(--mer-border); border-radius: 14px;
  background: var(--mer-surface, #fff); padding: 18px 16px; font: inherit; cursor: pointer;
  transition: border-color .12s, box-shadow .12s; }
.auto-card:hover { border-color: var(--tq-green, #1a8a5a); box-shadow: 0 6px 18px rgba(26,138,90,.10); }
.auto-card svg { width: 20px; height: 20px; color: var(--tq-green, #1a8a5a); }
.auto-card strong { font-size: 14px; }
.auto-card .sub { font-size: 12px; line-height: 1.4; }
@media (max-width: 1360px) { .ib3-ctx { display: none; } }
/* Mobile back affordance — only in the drilled-in thread view. */
.ib3-back { display: none; }
@media (max-width: 768px) {
  /* The workspace fills the viewport above the app bottom bar. */
  .ib3 { height: calc(100dvh - 58px - env(safe-area-inset-bottom, 0)); }
  .ib3-top { flex: 0 0 52px; padding: 0 10px; gap: 8px; }
  .ib3-hide-s { display: none; }
  .ib3-gsearch { max-width: none; min-width: 0; }
  .ib3-gsearch-out { left: 8px; right: 8px; width: auto; }
  /* Stack: rail becomes a horizontal lane strip under the header. */
  .ib3-body { flex-direction: column; overflow-x: clip; }
  .ib3-rail { flex: 0 0 54px; flex-direction: row; align-items: center;
    width: 100%; padding: 0 6px; gap: 2px;
    border-right: 0; border-bottom: 1px solid var(--mer-border); }
  .ib3-rail-items { flex-direction: row; align-items: center; gap: 2px;
    overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
  .ib3-rail-btn { width: auto; min-width: 54px; flex: none; padding: 5px 8px 4px; }
  .ib3-rail-btn svg { width: 17px; height: 17px; }
  .ib3-rail-foot { flex-direction: row; gap: 2px; }
  /* One column: the conversation list owns the screen; the section
     panel and context pane wait for wider viewports. */
  .ib3-panel, .ib3-ctx, .ib3-ai { display: none; }
  .ib3-convs { flex: 1 1 auto; width: 100%; border-right: 0; min-width: 0; }
  .ib3-main { display: none; min-width: 0; }
  /* Drill-in: an open thread takes the full screen; the back button
     in the thread header returns to the list. */
  .ib3-body:has(.ib3-main .dm-thread-box) .ib3-convs,
  .ib3-body:has(.ib3-main .dm-thread-box) .ib3-rail { display: none; }
  .ib3-body:has(.ib3-main .dm-thread-box) .ib3-main { display: flex; flex: 1; }
  .ib3-back { display: inline-flex; flex: none; }
  .ib3-chead { min-height: 56px; gap: 6px; padding: 0 8px; }
  .ib3-chead .dm-head-who { min-width: 0; flex: 1; }
}

/* ── Message component 3.0: soft palette, tight runs, quiet chrome ── */
/* Readability first: bubbles cap at ~460px so line lengths stay sane on
   wide screens instead of stretching 60% of the viewport. */
.msg { max-width: min(74%, 460px); margin: 2px 0; }
/* Consecutive runs sit tight — 2px inside a run, 10px between runs. */
.msg.grp-cont, .msg:not(.grp-head) { margin-top: 2px; }
.msg.grp-head { margin-top: 10px; }
.msg-ava { width: 26px; flex: none; align-self: flex-end; }
.msg-ava .tq-avatar, .msg-ava [class*="avatar"] { width: 26px; height: 26px; font-size: 11px; }
.msg-bubble { background: var(--mer-surface-2, #f1f3f4); border-radius: 16px;
  padding: 8px 12px 6px; box-shadow: 0 1px 1px rgba(16,20,32,.05); color: var(--mer-text, #1a1d26); }
.msg:not(.mine).grp-tail .msg-bubble { border-bottom-left-radius: 5px; }
.msg.mine .msg-bubble { background: var(--tq-bubble-mine, #DCF3E4); color: var(--mer-text, #17251c); }
.msg.mine.grp-tail .msg-bubble { border-bottom-right-radius: 5px; }
.msg-author { font-size: 11.5px; font-weight: 700; color: var(--mer-c-brand-700, #33418C);
  margin: 0 0 2px 10px; }
.msg-body { font-size: 14px; line-height: 1.45; word-break: break-word; }
.msg-foot { display: flex; align-items: center; justify-content: flex-end; gap: 5px;
  margin-top: 3px; min-height: 14px; }
/* Time whispers: visible on the tail of a run, hover elsewhere. */
.msg:not(.grp-tail) .msg-foot { opacity: 0; transition: opacity .15s; min-height: 0; margin-top: 0; }
.msg:not(.grp-tail):hover .msg-foot { opacity: 1; min-height: 14px; margin-top: 3px; }
.msg-time { font-size: 10.5px; font-variant-numeric: tabular-nums;
  color: var(--mer-muted, #6b7280); letter-spacing: .01em; }
.msg.mine .msg-time { color: rgba(0,0,0,.45); }
.msg-ticks { display: inline-flex; }
.msg-ticks svg { width: 14px; height: 14px; color: rgba(0,0,0,.35); }
/* Read = the WhatsApp blue — unambiguous at any size, either theme. */
.msg-ticks.seen svg { color: #34a8eb; }
:root:not([data-theme="light"]) .msg-ticks svg { color: rgba(255,255,255,.4); }
:root:not([data-theme="light"]) .msg-ticks.seen svg { color: #53bdeb; }
.msg:not(.mine) .msg-ticks svg { color: var(--mer-muted); }

/* ── The chat wallpaper ──────────────────────────────────────────────────
   A conversation should be the loudest thing on the screen. The wallpaper
   that used to sit here was a botanical field — leaves, hills, dotted
   clusters — drawn in an olive that belongs to no part of the brand, and
   it competed with the messages it was supposed to sit behind.

   What replaced it is derived from the two Tranquil colours and nothing
   else: Navy #26316B and Lime #C2DB6F. Three very wide radial washes, each
   at a few percent alpha, over a near-white base. There is no pattern and
   no repeat, so nothing tiles, nothing draws the eye, and there is no
   texture to read as noise on a small screen.

   Alphas are deliberately in the 2–6% range. On a phone in daylight it
   reads as plain paper with a faint tint; on a large display the washes
   are just visible enough that the surface is not flat. */
.chat-wall {
  background-color: #fbfcfa;
  background-image:
    /* lime, high left — the brand's warm accent, barely there */
    radial-gradient(120% 90% at 12% 0%, rgba(194, 219, 111, .16) 0%, rgba(194, 219, 111, 0) 58%),
    /* navy, low right — grounds the bottom of a long thread */
    radial-gradient(110% 85% at 92% 100%, rgba(38, 49, 107, .09) 0%, rgba(38, 49, 107, 0) 62%),
    /* a cool centre wash so the middle of the field is never flat white */
    linear-gradient(168deg, #ffffff 0%, #f7faf4 46%, #f1f4ef 100%);
  background-size: 100% 100%;
  background-position: 0 0;
  background-repeat: no-repeat;
  /* The washes are anchored to the viewport rather than the scroll
     content: a gradient that scrolls with a thousand messages turns into
     visible banding as it repeats. */
  background-attachment: local, local, local;
}

/* Dark mode is the same idea at the other end of the scale: the same two
   brand colours, lifted off a near-black rather than laid on white, and
   kept dark enough that a bright bubble still carries the contrast. */
:root:not([data-theme="light"]) .chat-wall {
  background-color: #0e1116;
  background-image:
    radial-gradient(120% 90% at 12% 0%, rgba(194, 219, 111, .07) 0%, rgba(194, 219, 111, 0) 58%),
    radial-gradient(110% 85% at 92% 100%, rgba(38, 49, 107, .30) 0%, rgba(38, 49, 107, 0) 62%),
    linear-gradient(168deg, #131822 0%, #10141b 52%, #0d1015 100%);
  background-size: 100% 100%;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-attachment: local, local, local;
}

/* Phones show a much taller, narrower slice of the same field, which
   stretches the washes until the tint pools at the edges. Pulling them
   towards the corners keeps the middle — where the messages are — clean. */
@media (max-width: 640px) {
  .chat-wall,
  :root:not([data-theme="light"]) .chat-wall {
    background-image:
      radial-gradient(150% 40% at 0% 0%, rgba(194, 219, 111, .13) 0%, rgba(194, 219, 111, 0) 60%),
      radial-gradient(150% 40% at 100% 100%, rgba(38, 49, 107, .08) 0%, rgba(38, 49, 107, 0) 60%),
      linear-gradient(180deg, #ffffff 0%, #f6f9f3 100%);
  }
  :root:not([data-theme="light"]) .chat-wall {
    background-image:
      radial-gradient(150% 40% at 0% 0%, rgba(194, 219, 111, .06) 0%, rgba(194, 219, 111, 0) 60%),
      radial-gradient(150% 40% at 100% 100%, rgba(38, 49, 107, .26) 0%, rgba(38, 49, 107, 0) 60%),
      linear-gradient(180deg, #12161e 0%, #0d1015 100%);
  }
}

.msg-foot .msg-more { margin-left: 2px; }
.msg-att { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px;
  padding: 6px 10px 6px 7px; border: 1px solid rgba(0,0,0,.10); border-radius: 10px;
  background: rgba(255,255,255,.65); color: inherit; font: inherit; font-size: 12.5px;
  font-weight: 600; cursor: pointer; max-width: 100%; }
.msg.mine .msg-att { background: rgba(255,255,255,.55); border-color: rgba(0,0,0,.08); color: inherit; }
.msg-att span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-att .tq-filebadge { flex: none; }

/* Native-emoji reactions: the picker and the tally chips. */
.msg-picker button { font-size: 18px; line-height: 1; }
.msg-react { font-size: 12px; }

/* The ⋯ message-actions menu: react strip on top, verbs below. */
.msg-acts-menu { position: absolute; z-index: 25; top: calc(100% + 4px); right: 0;
  min-width: 150px; background: var(--mer-surface, #fff); border: 1px solid var(--mer-border);
  border-radius: 12px; box-shadow: 0 10px 28px rgba(16,20,32,.16); padding: 6px; }
.msg.mine .msg-acts-menu { right: 0; } .msg:not(.mine) .msg-acts-menu { left: 0; right: auto; }
.msg-acts-reacts { display: flex; gap: 2px; padding: 2px 2px 6px; border-bottom: 1px solid var(--mer-border); margin-bottom: 4px; }
.msg-acts-reacts button { border: none; background: none; font-size: 18px; padding: 3px; border-radius: 8px; cursor: pointer; }
.msg-acts-reacts button:hover { background: var(--mer-surface-2); transform: scale(1.2); }
.msg-acts-menu > button { display: block; width: 100%; text-align: left; border: none;
  background: none; font: inherit; font-size: 13px; padding: 7px 9px; border-radius: 8px; cursor: pointer; }
.msg-acts-menu > button:hover { background: var(--mer-surface-2); }
.msg-acts-menu > button.danger { color: #c62828; }

/* Date dividers — floating, centred, quiet. */
.chat-day { display: flex; justify-content: center; margin: 14px 0 6px; }
.chat-day span { font-size: 11px; font-weight: 600; color: var(--mer-muted, #6b7280);
  background: var(--mer-surface, #fff); border: 1px solid var(--mer-border, #e5e7eb);
  border-radius: 999px; padding: 3px 12px; box-shadow: 0 1px 2px rgba(16,20,32,.05); }

/* The privacy contract, up top where trust starts — a rounded pale
   beige banner with the lock leading the sentence. */
.chat-e2e-note { display: flex; align-items: flex-start; gap: 8px;
  margin: 12px auto 6px; max-width: 460px; text-align: left;
  font-size: 11.5px; line-height: 1.55; color: #6d5f33;
  background: rgba(250, 243, 219, .92); border: 1px solid rgba(226, 210, 158, .8);
  border-radius: 14px; padding: 9px 16px;
  box-shadow: 0 1px 3px rgba(93, 78, 27, .07);
  backdrop-filter: blur(2px); }

/* Voice notes — the bubble … */
.msg-voice { display: flex; align-items: center; gap: 8px; min-width: 190px; padding: 2px 0; }
.msg-voice-play { width: 30px; height: 30px; flex: none; border-radius: 50%; border: none;
  background: var(--mer-c-brand-700, #33418C); color: #fff; font-size: 12px; cursor: pointer; }
.msg-voice-bars { display: flex; align-items: center; gap: 2px; flex: 1; height: 22px; }
.msg-voice-bars i { width: 3px; border-radius: 2px; background: rgba(0,0,0,.30); }
.msg-voice-bars i:nth-child(3n) { height: 60%; } .msg-voice-bars i:nth-child(3n+1) { height: 35%; }
.msg-voice-bars i:nth-child(3n+2) { height: 85%; }
.msg-voice.playing .msg-voice-bars i { background: var(--mer-c-brand-700, #33418C); }
.msg-voice-dur { font-size: 11px; color: var(--mer-muted); font-variant-numeric: tabular-nums; }
/* … and the recorder bar. */
.chat-voicebar { position: absolute; inset: 0; display: flex; align-items: center; gap: 10px;
  background: var(--mer-surface, #fff); border-radius: inherit; padding: 0 12px; z-index: 3; }
.chat-voicebar-dot { width: 10px; height: 10px; border-radius: 50%; background: #e5484d;
  animation: tq-pulse 1.1s ease-in-out infinite; }
@keyframes tq-pulse { 50% { opacity: .25; } }
.chat-voicebar-time { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 13px; }
.chat-voicebar [data-vsend] { margin-left: auto; }

/* Composer additions: reply strip + emoji strip. */
.chat-composer { position: relative; flex-direction: column; align-items: stretch; }
.chat-composer-row { display: flex; align-items: center; gap: 8px; width: 100%; }
.chat-replying { display: flex; align-items: center; gap: 8px; padding: 5px 10px;
  margin-bottom: 6px; border-left: 3px solid var(--mer-c-brand-700, #33418C);
  background: var(--mer-surface-2, #f1f3f4); border-radius: 8px; font-size: 12px; }
/* The [hidden] attribute must win over display:flex — without this the
   empty quote strip haunts the composer and × appears to do nothing. */
.chat-replying[hidden] { display: none; }
.chat-replying-txt { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--mer-muted); }
.chat-replying-x { border: none; background: none; cursor: pointer; font-size: 15px; color: var(--mer-muted); }
.chat-emoji-pop { position: absolute; bottom: calc(100% + 8px); right: 0; z-index: 30;
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; padding: 8px;
  background: var(--mer-surface, #fff); border: 1px solid var(--mer-border);
  border-radius: 14px; box-shadow: 0 10px 28px rgba(16,20,32,.16); }
.chat-emoji-pop button { border: none; background: none; font-size: 20px; line-height: 1;
  padding: 5px; border-radius: 8px; cursor: pointer; }
.chat-emoji-pop button:hover { background: var(--mer-surface-2); transform: scale(1.15); }

/* Business identity — header badge, lane pill, storefront drawer. */
.biz-badge { display: inline-flex; align-items: center; gap: 3px; margin-left: 7px;
  font-size: 10.5px; font-weight: 700; color: #245a38; background: #E3F4E9;
  border: 1px solid #bfe3cc; border-radius: 999px; padding: 1px 8px; vertical-align: 1px; }
.biz-pill { font-size: 11px; margin-left: 4px; }

/* Identity mark system — Name → business mark (16px) → verified (14px).
   One shared name-row keeps all three on a single baseline everywhere. */
.dm-name-row { display: inline-flex; align-items: center; gap: 4px; min-width: 0;
  height: 21px; }
.dm-name-row strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 15px; font-weight: 650; line-height: 20px; }
.chat-business-mark { display: inline-flex; flex: 0 0 auto; width: 16px; height: 16px; }
.chat-business-mark svg { width: 100%; height: 100%; display: block; }
.dm-name-row .vbadge { width: 14px; height: 14px; flex: 0 0 auto; vertical-align: 0; }
/* Smaller marks in the conversation list. */
.dm-lane-txt .dm-name-row { height: 18px; gap: 3px; }
.dm-lane-txt .chat-business-mark { width: 13px; height: 13px; }
.dm-lane-txt .dm-name-row .vbadge { width: 12px; height: 12px; }
.biz-sec { padding: 10px 2px; border-bottom: 1px solid var(--mer-border, #eceef2); }
.biz-sec:last-child { border-bottom: none; }
.biz-sec h4 { margin: 0 0 7px; font-size: 11px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--mer-muted); }
.biz-hrow { display: flex; justify-content: space-between; font-size: 12.5px; padding: 2px 0; }
.biz-promo { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; margin-bottom: 6px;
  background: #FDF6DD; border: 1px solid #F1E4AC; border-radius: 10px; font-size: 12.5px; }
.biz-code { align-self: flex-start; background: rgba(0,0,0,.06); border-radius: 6px;
  padding: 1px 7px; font-size: 11.5px; font-weight: 700; }
.biz-slider { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px;
  scroll-snap-type: x mandatory; }
.biz-item { flex: 0 0 132px; scroll-snap-align: start; display: flex; flex-direction: column;
  gap: 3px; border: 1px solid var(--mer-border); border-radius: 12px; padding: 8px;
  font-size: 12px; background: var(--mer-surface, #fff); }
.biz-item-img { height: 74px; border-radius: 8px; background-size: cover; background-position: center;
  background-color: var(--mer-surface-2); margin: -2px -2px 3px; }
.biz-price { font-weight: 800; color: var(--mer-c-brand-700, #33418C); }
.biz-loc { display: flex; align-items: center; gap: 6px; font-size: 12.5px; }
/* Rich interactive cards in the stream: approvals, tasks, meetings and
   polls render as widgets with primary CTAs, not plain text bubbles. */
.msg-embed { min-width: 220px; }
.msg-work { margin-top: 4px; padding: 8px 10px; border-radius: 10px;
  background: rgba(255,255,255,.72); border: 1px solid rgba(0,0,0,.08); }
.msg.mine .msg-work { background: rgba(255,255,255,.6); border-color: rgba(0,0,0,.08); }
.msg-work-meta { display: flex; align-items: center; justify-content: space-between;
  gap: 8px; font-size: 11.5px; }
.msg-work-meta em { font-style: normal; color: var(--mer-muted); }
.msg.mine .msg-work-meta em { color: var(--mer-muted); }
.msg-work-acts { display: flex; gap: 6px; margin-top: 8px; }
.msg-work-acts:empty { display: none; }

/* ── SynDrive picker: attach-from-drive modal ────────────────────────── */
.modal.drvpick { max-width: 640px; }
.drvpick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  gap: 10px; max-height: 380px; overflow-y: auto; padding: 2px; }
.drvpick-card { display: flex; flex-direction: column; align-items: stretch; gap: 5px;
  border: 1px solid var(--mer-border); border-radius: 12px; background: var(--mer-surface, #fff);
  padding: 0 0 8px; font: inherit; cursor: pointer; text-align: left; overflow: hidden;
  transition: border-color .12s, box-shadow .12s; }
.drvpick-card:hover { border-color: var(--mer-c-brand-700, #33418C);
  box-shadow: 0 6px 16px rgba(38,49,107,.12); }
.drvpick-thumb { height: 78px; display: flex; align-items: center; justify-content: center;
  background: var(--mer-surface-2, #f1f2f6) center/cover no-repeat; }
.drvpick-thumb.has-img .tq-filebadge { display: none; }
.drvpick-name { font-size: 12px; font-weight: 600; padding: 0 9px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drvpick-sub { font-size: 10.5px; padding: 0 9px; }

/* ── Campaigns: rich inmails ─────────────────────────────────────────── */
.cmp-read { max-width: 640px; margin: 0 auto; padding: 28px 22px; overflow-y: auto; }
.cmp-h { margin: 18px 0 6px; font-size: 19px; }
.cmp-p { margin: 8px 0; line-height: 1.55; white-space: pre-wrap; }
.cmp-img { max-width: 100%; border-radius: 12px; margin: 10px 0; }
.cmp-cta { display: inline-flex; margin: 10px 0; }
.cmp-blk { display: flex; gap: 6px; align-items: flex-start; margin: 6px 0; }
.cmp-blk-k { flex: none; width: 70px; padding-top: 8px; font-size: 11px;
  font-weight: 700; text-transform: uppercase; color: var(--mer-muted); }
.cmp-blk input, .cmp-blk textarea { flex: 1; min-width: 0; }

/* ── Inbox unread badge + Platform & API (CPaaS settings) ────────────── */
.ib3-badge { font-style: normal; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 8px; background: #d93025; color: #fff; font-size: 10px;
  font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.ib3-rail-btn { position: relative; }
.ib3-rail-btn .ib3-badge { position: absolute; top: 4px; right: 8px; }
.ib3-sec .ib3-badge { margin-left: auto; }
.plat-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px; margin-top: 10px; }
.plat-plan { border: 1px solid var(--mer-border); border-radius: 14px; padding: 16px;
  display: flex; flex-direction: column; gap: 4px; }
.plat-plan.hot { border-color: var(--mer-c-brand-800, #26316B);
  box-shadow: 0 6px 20px rgba(38,49,107,.10); }
.plat-price { font-size: 22px; font-weight: 800; margin: 2px 0 6px; }
.plat-plan ul { margin: 0 0 12px; padding-left: 18px; font-size: 12.5px;
  line-height: 1.7; color: var(--mer-muted); flex: 1; }
.plat-plan li b { color: inherit; }
.plat-code { background: var(--mer-c-brand-950, #101420); color: #d7dbe8;
  border-radius: 10px; padding: 12px 14px; font-size: 12px; line-height: 1.55;
  overflow-x: auto; margin: 6px 0 0; }

/* ── Chat settings modal ── */
.chatset-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 2px; border-bottom: 1px solid var(--tq-line, #eceff1); cursor: pointer; }
.chatset-row .sub { display: block; font-size: 12px; font-style: normal; }
.chatset-row input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--tq-green, #1a7f4b); flex: none; }
.chatset-sec { padding: 12px 2px 4px; }
.chatset-tpl { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px dashed var(--tq-line, #eceff1); }
.chatset-tpl .sub { display: block; font-size: 12px; font-style: normal; }

/* ── In-chat media: viewable images, playable video, lightbox ── */
.msg-media { margin-top: 6px; border-radius: 12px; overflow: hidden; max-width: 320px; min-width: 180px; min-height: 90px; background: rgba(0,0,0,.06); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.msg-media img { display: block; width: 100%; max-height: 340px; object-fit: cover; }
.msg-media-wait { color: var(--mer-text-muted, #7a8a86); font-size: 22px; padding: 26px 0; }
.msg-media-vid .msg-media-wait { width: 52px; height: 52px; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; display: flex; align-items: center; justify-content: center; padding: 0; font-size: 18px; }
.msg-media .tqp { width: 100%; max-width: 320px; }
.msg-media .tqp video { max-height: 340px; }
.msg-att em.sub { font-style: normal; font-size: 10.5px; color: var(--mer-primary, #1c4e46); margin-left: 2px; }
.msg-lightbox { position: fixed; inset: 0; z-index: 320; background: rgba(6,12,10,.88); display: flex; align-items: center; justify-content: center; cursor: zoom-out; }
.msg-lightbox img { max-width: 94vw; max-height: 92vh; border-radius: 8px; box-shadow: 0 12px 60px rgba(0,0,0,.5); }
.msg-lightbox-x { position: absolute; top: 14px; right: 18px; font-size: 30px; color: #fff; background: none; border: 0; cursor: pointer; }

/* E2E note carries the Tranquil-blue lock icon, not an emoji. */
.chat-e2e-note svg { width: 14px; height: 14px; flex: none; margin-top: 2px; color: #8a7a3e; stroke: #8a7a3e; }

/* ── Inbox settings canvas ── */
.ibset-page { height: 100%; overflow-y: auto; }
.ibset-inner { max-width: 720px; margin: 0 auto; padding: 26px 22px 60px; }
.ibset-h { font-size: 19px; margin: 0 0 6px; }

/* ── Lane meta: honest unread counts + live presence ring ── */
.dm-lane-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; align-self: flex-start; }
.lane-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px;
  padding: 0 5px; border-radius: 9px; background: var(--tq-green, #1a7f4b); color: #fff;
  font-size: 10.5px; font-weight: 700; font-style: normal; }
.dm-lane-ava { position: relative; flex: none; display: inline-flex; }
.dm-lane-ava.live::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px;
  border-radius: 50%; background: #2ecc71; box-shadow: 0 0 0 2px var(--mer-surface, #fff); }
[data-presence].is-online { color: #1e9e5a; font-weight: 600; }
/* The presence line under the thread-header name — quiet metadata,
   never competing with the name above it. */
.ib3-chead [data-presence], .dm-head [data-presence] {
  font-style: normal; font-size: 11px; font-weight: 400;
  color: var(--mer-text-muted); line-height: 1.3; }
.ib3-chead [data-presence].is-online, .dm-head [data-presence].is-online {
  color: #1e9e5a; font-weight: 600; }

/* ── Rich editor (InMail / newsletter) ── */
.rm-modal { max-width: 640px; }
.rm-editor { border: 1px solid var(--mer-border, #dde3e0); border-radius: 10px; overflow: hidden; background: var(--mer-surface, #fff); }
.rm-toolbar { display: flex; align-items: center; gap: 2px; padding: 6px 8px; border-bottom: 1px solid var(--mer-border, #dde3e0); background: var(--mer-surface-2, #f6f8f7); flex-wrap: wrap; }
.rm-toolbar button { border: 0; background: none; border-radius: 6px; min-width: 28px; height: 28px; cursor: pointer; font-size: 13px; color: var(--mer-text, #22312c); display: inline-flex; align-items: center; justify-content: center; }
.rm-toolbar button:hover { background: rgba(0,0,0,.07); }
.rm-toolbar button svg { width: 15px; height: 15px; }
.rm-sep { width: 1px; height: 18px; background: var(--mer-border, #dde3e0); margin: 0 4px; }
.rm-body { min-height: 180px; max-height: 46vh; overflow-y: auto; padding: 12px 14px; font-size: 14.5px; line-height: 1.55; outline: none; }
.rm-body h2 { font-size: 17px; margin: 12px 0 6px; }
.rm-body blockquote { border-left: 3px solid var(--tq-green, #1a7f4b); margin: 8px 0; padding: 2px 12px; color: var(--mer-text-muted); }
.rm-btn, .msg-inmail-body .rm-btn, .cmp-rich .rm-btn { display: inline-block; background: var(--tq-green, #1a7f4b); color: #fff !important; padding: 8px 18px; border-radius: 8px; text-decoration: none; font-weight: 600; font-size: 13.5px; }
.rm-img, .msg-inmail-body img, .cmp-rich img { max-width: 100%; border-radius: 10px; display: block; margin: 8px 0; }
.rm-toresults { border: 1px solid var(--mer-border, #dde3e0); border-radius: 10px; margin-top: 4px; overflow: hidden; }
.rm-torow { display: flex; gap: 8px; align-items: baseline; width: 100%; text-align: left; border: 0; background: none; padding: 9px 12px; cursor: pointer; }
.rm-torow:hover { background: var(--mer-surface-2, #f6f8f7); }

/* ── InMail bubble: the rich card in the thread ── */
.msg-inmail { min-width: 220px; max-width: 420px; }

/* Meeting invitation card — the "meeting" message kind the gateway
   fans out on session.create. A compact, join-able calendar card. */
.msg-meeting { min-width: 240px; max-width: 380px; border: 1.5px solid var(--line, #e3e6ee); border-radius: 12px; padding: 12px 14px; background: var(--card, #fff); }
.msg-meeting-head { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--tq-green, #1a7f4b); margin-bottom: 6px; }
.msg-meeting-head svg { width: 14px; height: 14px; }
.msg-meeting-subj { font-weight: 700; font-size: 15px; margin-bottom: 6px; }
.msg-meeting-meta { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; color: var(--sub, #5c6470); margin-bottom: 10px; text-align: left; }
.msg-meeting .btn { width: 100%; justify-content: center; }
.msg-inmail-subj { font-weight: 700; font-size: 14.5px; padding-bottom: 6px; margin-bottom: 8px; border-bottom: 1px solid rgba(0,0,0,.1); }
.msg-inmail-body { font-size: 13.5px; line-height: 1.55; }
.msg-inmail-body h2, .msg-inmail-body h3 { font-size: 15px; margin: 10px 0 4px; }
.msg-inmail-body blockquote { border-left: 3px solid var(--tq-green, #1a7f4b); margin: 6px 0; padding: 2px 10px; opacity: .85; }
.msg-inmail-body hr { border: 0; border-top: 1px solid rgba(0,0,0,.12); margin: 10px 0; }

/* ── Rich block inside campaign reader ── */
.cmp-rich { font-size: 14.5px; line-height: 1.6; margin: 10px 0; }
.cmp-blk-rich { align-items: flex-start; }

/* [hidden] must always win — flex/inline-flex display rules were
   resurrecting the empty red badge and the chat filters on every lane. */
.ib3-badge[hidden], .ib3-views[hidden] { display: none !important; }

/* InMail recipient chips */
.rm-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.rm-chips:empty { display: none; }
.rm-chip { display: inline-flex; align-items: center; gap: 5px; background: var(--mer-surface-2, #eef3f0);
  border: 1px solid var(--mer-border, #dde3e0); border-radius: 14px; padding: 3px 8px 3px 10px; font-size: 12.5px; }
.rm-chip button { border: 0; background: none; cursor: pointer; font-size: 14px; line-height: 1; color: var(--mer-text-muted); padding: 0; }

/* ── Composer attachment preview — a real thumbnail card, not a placeholder ── */
.chat-attach { padding: 0 0 8px; }
.chat-attach-card { display: flex; align-items: center; gap: 10px; background: var(--mer-surface-2, #eef3f0);
  border: 1px solid var(--mer-border, #dde3e0); border-radius: 12px; padding: 8px 10px; }
.chat-attach-thumb { width: 56px; height: 56px; flex: none; border-radius: 8px; background: #d8dde2 center/cover no-repeat;
  display: flex; align-items: center; justify-content: center; font-size: 18px; color: #fff; overflow: hidden; }
.chat-attach-thumb-vid { background-color: #1a1e28; }
.chat-attach-badge { flex: none; display: flex; align-items: center; }
.chat-attach-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.chat-attach-meta strong { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-attach-meta em { font-style: normal; font-size: 11.5px; }
.chat-attach-x { flex: none; }

/* ── Extended composer: formatted-message mode ── */
.chat-fmt.on { background: var(--mer-primary, #26316b); color: #fff; border-radius: 8px; }
.chat-rich { border: 1px solid var(--mer-border, #dde3e0); border-radius: 12px; margin-bottom: 8px; overflow: hidden; background: var(--mer-surface, #fff); }
.chat-rich-bar { display: flex; align-items: center; gap: 2px; padding: 6px 8px; border-bottom: 1px solid var(--mer-border, #dde3e0);
  background: var(--mer-surface-2, #f5f7f6); flex-wrap: wrap; }
.chat-rich-bar button { border: 0; background: none; cursor: pointer; font: inherit; font-size: 13px;
  width: 28px; height: 26px; border-radius: 6px; display: flex; align-items: center; justify-content: center; color: var(--mer-text, #222); }
.chat-rich-bar button:hover { background: rgba(0, 0, 0, .07); }
.chat-rich-sep { width: 1px; height: 16px; background: var(--mer-border, #dde3e0); margin: 0 4px; }
.chat-rich-body { min-height: 72px; max-height: 220px; overflow: auto; padding: 10px 12px; font-size: 14px; line-height: 1.45; outline: none; }
.chat-rich-body:empty::before { content: "Write a formatted message — bold, lists, alignment…"; color: var(--mer-text-faint, #98a1a8); }
.chat-rich-body ul, .chat-rich-body ol { padding-left: 22px; margin: 4px 0; }
.chat-rich-hint { padding: 4px 12px 8px; font-size: 11px; }

/* ── Global search: realtime typeahead dropdown ── */
.gsearch-out { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 210;
  background: var(--mer-surface, #fff); border: 1px solid var(--mer-border, #dde3e0);
  border-radius: 12px; box-shadow: 0 12px 34px rgba(0, 0, 0, .16); overflow: hidden; max-height: 60vh; overflow-y: auto; }
.gsearch-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 12px;
  border: 0; background: none; cursor: pointer; font: inherit; text-align: left; }
.gsearch-row:hover { background: rgba(0, 0, 0, .05); }
.gsearch-row-txt { display: flex; flex-direction: column; min-width: 0; }
.gsearch-row-txt strong { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gsearch-row-txt em { font-style: normal; font-size: 12px; }
.gsearch-row-all { border-top: 1px solid var(--mer-border, #dde3e0); }
.gsearch-row-all svg, .gsearch-row-all .icon { width: 18px; height: 18px; flex: none; color: var(--mer-text-muted); }

/* ── Inbox context switcher: Personal · Business/Community ── */
.ib3-ctxsw { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--mer-border, #dde3e0);
  background: var(--mer-surface, #fff); border-radius: 16px; padding: 5px 12px; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 700; color: var(--mer-text, #222); flex: none; max-width: 200px; }
.ib3-ctxsw:hover { background: var(--mer-surface-2, #f2f5f3); }
.ib3-ctxsw.biz { background: var(--mer-primary, #26316b); color: #fff; border-color: var(--mer-primary, #26316b); }
.ib3-ctxsw-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ib3-pop-item.on { font-weight: 800; background: var(--mer-surface-2, #f2f5f3); }

/* ── Link unfurl card inside a message bubble ── */
.msg-link { color: inherit; text-decoration: underline; word-break: break-all; }
.msg-linkcard { display: flex; flex-direction: column; margin-top: 6px; border: 1px solid var(--mer-border, #dde3e0);
  border-radius: 10px; overflow: hidden; cursor: pointer; background: var(--mer-surface, #fff); max-width: 340px; }
.msg-linkcard:hover { box-shadow: 0 3px 12px rgba(0, 0, 0, .1); }
.msg-linkcard-img { height: 150px; background: #e8ebef center/cover no-repeat; }
.msg-linkcard-txt { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; }
.msg-linkcard-txt em { font-style: normal; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--mer-text-muted, #6b7480); }
.msg-linkcard-txt strong { font-size: 13px; line-height: 1.3; }
.msg-linkcard-txt span { font-size: 12px; color: var(--mer-text-muted, #6b7480); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ── Message request banner (DM first contact) — a rounded pale cream
   bar with a soft border, pinned above the composer. */
.chat-request { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  margin: 0 14px 10px; padding: 11px 16px; border-radius: 14px; font-size: 13px; line-height: 1.5;
  background: rgba(253, 249, 238, .95); border: 1px solid #ecdfc2; color: #5f5230;
  box-shadow: 0 1px 3px rgba(93, 78, 27, .06); }
.chat-request strong { color: #4a4028; }
.chat-request-acts { display: flex; gap: 6px; flex: none; }

/* ── Typing indicator above the composer ── */
.chat-typing { display: flex; align-items: center; gap: 7px; padding: 2px 4px 6px; font-size: 12.5px;
  color: var(--mer-text-muted, #6b7480); }
.chat-typing-dots { display: inline-flex; gap: 3px; align-items: center; }
.chat-typing-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--mer-text-muted, #9aa3ad);
  animation: tq-typing 1.2s infinite ease-in-out; }
.chat-typing-dots i:nth-child(2) { animation-delay: .15s; }
.chat-typing-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes tq-typing { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-3px); opacity: 1; } }

/* ── No-reply marker + rich-bar toggle state ── */
.msg-noreply { font-size: 11px; opacity: .6; }
.msg-noreply svg, .att svg { width: 12px; height: 12px; vertical-align: -2px; }
.chat-rich-bar button svg { width: 15px; height: 15px; vertical-align: -3px; }
.chat-rich-bar button.on { background: var(--mer-primary, #26316b); color: #fff; }

/* ── Live typing: lane snippet + thread header status line ── */
.lane-typing { color: var(--mer-primary-2, #16a34a); font-style: italic; font-weight: 600; }
.dm-head .sub.is-typing { color: var(--mer-primary-2, #16a34a); font-style: italic; }
.dm-head-who .vbadge, .dm-lane-txt .vbadge { vertical-align: -2px; }

/* ── The pre-join green room — the Webex-grammar door every meeting
   join passes through: preview left, name-and-join right. ── */
.prejoin { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center;
  justify-content: center; gap: 48px; padding: 32px; flex-wrap: wrap;
  background: radial-gradient(120% 140% at 8% 0%, #3a2434 0%, #1d1a2e 38%, #101322 72%, #0b0e1a 100%); }
.prejoin-host { position: fixed; inset: 0; overflow: auto; }
.prejoin.prejoin-inline { position: static; min-height: 100vh; }
.prejoin-stage { display: flex; flex-direction: column; gap: 14px; width: min(620px, 92vw); }
.prejoin-meta h1 { color: #fff; font-size: 22px; font-weight: 700; margin: 0 0 2px; }
.prejoin-meta .prejoin-when { color: rgba(255,255,255,.55); font-size: 13px; }
.prejoin-meta .meet-guest-mark { color: #9ee6c9; font-weight: 800; letter-spacing: .3px; margin-bottom: 10px; }
.prejoin-preview { position: relative; aspect-ratio: 16/9; border-radius: 14px; overflow: hidden;
  background: rgba(255,255,255,.06); }
.prejoin-preview video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.prejoin-initials { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.prejoin-initials:not(:empty) { font-size: 42px; font-weight: 700; color: #e8e8ee; }
.prejoin-initials::before { content: ""; position: absolute; width: 118px; height: 118px; border-radius: 50%;
  background: rgba(255,255,255,.12); z-index: -1; }
.prejoin-initials[hidden] { display: none; }
.prejoin-quality { position: absolute; right: 10px; bottom: 10px; font-size: 10.5px; font-weight: 700;
  letter-spacing: .04em; color: #dfe6dc; background: rgba(8,12,20,.55); border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px; padding: 3px 10px; backdrop-filter: blur(4px); font-variant-numeric: tabular-nums; }
.prejoin-quality.low { color: #ffd9a8; border-color: rgba(255,190,120,.5); }
.prejoin-identity { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px;
  border-radius: 12px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); }
.prejoin-identity .sub { font-size: 11px; color: rgba(255,255,255,.55); }
.prejoin-identity strong { color: #fff; font-size: 15px; }
/* Device readiness — the questions people actually have at the door. */
.prejoin-checks { display: flex; flex-direction: column; gap: 7px; padding: 12px 14px;
  border-radius: 12px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); }
.prejoin-check { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: rgba(255,255,255,.8); }
.prejoin-check i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.25); flex: none; }
.prejoin-check.ok i { background: #6fd08e; box-shadow: 0 0 6px rgba(111,208,142,.6); }
.prejoin-check em { margin-left: auto; font-style: normal; font-size: 11.5px; color: rgba(255,255,255,.5);
  max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prejoin-check.ok em { color: #9ee6b8; }
.prejoin-miclevel { height: 5px; border-radius: 3px; background: rgba(255,255,255,.12); overflow: hidden; }
.prejoin-miclevel b { display: block; height: 100%; width: 0; border-radius: 3px;
  background: linear-gradient(90deg, #6fd08e, #b9df4b); transition: width 80ms linear; }
.prejoin-testspk { align-self: flex-start; background: none; border: 1px solid rgba(255,255,255,.25);
  color: rgba(255,255,255,.85); font: inherit; font-size: 12px; font-weight: 600;
  border-radius: 999px; padding: 5px 13px; cursor: pointer; }
.prejoin-testspk:hover { background: rgba(255,255,255,.1); }
.prejoin-qsel { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: rgba(255,255,255,.6); }
.prejoin-qsel select { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2);
  color: #f0f2f7; border-radius: 9px; padding: 8px 10px; font: inherit; font-size: 13px; }
.prejoin-devices { display: flex; gap: 12px; }
.prejoin-pill { display: inline-flex; align-items: stretch; border-radius: 999px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.06); }
.prejoin-pill button { border: none; background: none; color: #f3f3f6; font: inherit; font-size: 13.5px;
  padding: 9px 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; }
.prejoin-pill button em { font-style: normal; font-weight: 600; }
.prejoin-pill button svg { width: 16px; height: 16px; }
.prejoin-pill .prejoin-caret { border-left: 1px solid rgba(255,255,255,.22); padding: 9px 11px; }
.prejoin-pill.on { background: rgba(46, 160, 100, .25); border-color: rgba(120, 220, 170, .5); }
.prejoin-menu { position: fixed; z-index: 320; background: #23273a; border: 1px solid rgba(255,255,255,.15);
  border-radius: 10px; padding: 4px; box-shadow: 0 12px 40px rgba(0,0,0,.5); max-width: 320px; }
.prejoin-menu button { display: block; width: 100%; text-align: left; border: none; background: none;
  color: #eceded; font: inherit; font-size: 13px; padding: 8px 12px; border-radius: 7px; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prejoin-menu button:hover { background: rgba(255,255,255,.1); }
.prejoin-side { display: flex; flex-direction: column; gap: 12px; width: min(300px, 92vw); }
.prejoin-side h2 { color: #fff; font-size: 18px; font-weight: 700; margin: 0 0 4px; }
.prejoin-side label { color: rgba(255,255,255,.75); font-size: 12.5px; font-weight: 600; display: block; }
.prejoin-side input { display: block; width: 100%; box-sizing: border-box; margin-top: 5px;
  padding: 10px 12px; border-radius: 9px; border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.08); color: #fff; font-size: 14.5px; }
.prejoin-side input::placeholder { color: rgba(255,255,255,.4); }
.prejoin-side [data-code] { text-transform: uppercase; letter-spacing: 1.5px; font-family: ui-monospace, monospace; }
.prejoin-go { width: 100%; padding: 12px; font-size: 15px; font-weight: 700; border-radius: 999px;
  background: #2ea064; border-color: #2ea064; }
.prejoin-go:hover { background: #268a55; }
.prejoin-back { color: rgba(255,255,255,.6); }
.prejoin .meet-guest-err { background: #fdecec; color: #a03030; border-radius: 8px; padding: 9px 12px; font-size: 13px; }
.prejoin .meet-guest-foot { font-size: 12.5px; color: rgba(255,255,255,.55); text-align: center; margin: 4px 0 0; }
.prejoin .meet-guest-foot a { color: #9ee6c9; }
.ib3-pop-item svg { width: 14px; height: 14px; }

/* ── Rich (inmail) message layout: aligned, no phantom padding ── */
.msg-inmail-body { text-align: left; }
.msg-inmail-body p { margin: 0 0 6px; }
.msg-inmail-body p:last-child { margin-bottom: 0; }
.msg-inmail-body ul, .msg-inmail-body ol { margin: 4px 0; padding-left: 20px; text-align: left; }
.msg-inmail-body li { margin: 2px 0; }
.msg-inmail-subj { font-weight: 800; margin-bottom: 4px; }

/* ── Lane unread badge: crisp pill, vertically centred ── */
.lane-count { flex: none; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--mer-success, #0e9f6e); color: #fff; font-size: 11px; font-weight: 800; font-style: normal;
  display: inline-flex; align-items: center; justify-content: center; line-height: 1; margin-top: 4px; }
.dm-lane-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: none; }

/* ══════════════════════════════════════════════════════════════════════
   Tranquil Play design system (tp-*): cinematic, media-first, dark.
   Deep Tranquil blues, lime accents, restrained glass. Media dominates
   the screen; the white dashboard grammar stops at the Play border.
   ══════════════════════════════════════════════════════════════════════ */
:root {
  --tp-bg-1000: #020a20; --tp-bg-950: #03102f; --tp-bg-900: #071943;
  --tp-bg-850: #0a2158; --tp-bg-800: #102b69; --tp-bg-700: #17377d;
  --tp-surface-glass: rgba(8, 25, 67, 0.58);
  --tp-brand-navy: #24336f; --tp-brand-lime: #b9df4b; --tp-brand-lime-strong: #a4cf34;
  --tp-text-primary: #ffffff; --tp-text-secondary: #c8d3ea;
  --tp-text-muted: #8fa0c4; --tp-text-disabled: #65759a;
  --tp-border-soft: rgba(255,255,255,.10); --tp-border-medium: rgba(255,255,255,.18);
  --tp-danger: #ff5d6c; --tp-success: #63d28b;
  --tp-radius-sm: 8px; --tp-radius-md: 12px; --tp-radius-lg: 16px; --tp-radius-pill: 999px;
  --tp-shadow-card: 0 16px 48px rgba(0,0,0,.28);
  --tp-shadow-focus: 0 0 0 3px rgba(185,223,75,.95), 0 0 0 7px rgba(185,223,75,.22);
  --tp-motion-fast: 120ms; --tp-motion-standard: 220ms; --tp-motion-hero: 700ms;
  --tp-ease-standard: cubic-bezier(.2,0,0,1); --tp-ease-emphasised: cubic-bezier(.2,.8,.2,1);
  /* Local readability environment — shade lives behind the text only;
     ≥70% of the artwork stays untouched. Never darken the whole frame. */
  --tp-gradient-hero-text: radial-gradient(ellipse 42% 78% at 7% 54%,
    rgba(3,16,47,.97) 0%, rgba(3,16,47,.86) 30%, rgba(3,16,47,.50) 54%,
    rgba(3,16,47,.16) 76%, transparent 100%);
  --tp-gradient-hero-bottom: linear-gradient(180deg, transparent 0%,
    rgba(3,16,47,.32) 52%, var(--tp-bg-950) 100%);
  --tp-gradient-card: linear-gradient(180deg, transparent 35%, rgba(3,16,47,.92) 100%);
}

/* ── tp-mode: Play owns the DOCUMENT. No white canvas anywhere. ── */
body.tp-mode { background: var(--tp-bg-950); color-scheme: dark; }
body.tp-mode .gnav, body.tp-mode .bottomnav { display: none; }
body.tp-mode #page, body.tp-mode .page { max-width: none; padding: 0; margin: 0; }

.tp-app { position: relative; min-height: 100svh; color: var(--tp-text-primary);
  background:
    radial-gradient(circle at 75% 0%, rgba(32,69,143,.26), transparent 34rem),
    linear-gradient(180deg, var(--tp-bg-950), var(--tp-bg-1000)); }
.tp-app .sub { color: var(--tp-text-muted); }
.tp-app h1, .tp-app h2, .tp-app h3 { color: var(--tp-text-primary); }
.tp-app .card { background: var(--tp-surface-glass); border: 1px solid var(--tp-border-soft);
  color: var(--tp-text-secondary); box-shadow: none; }
.tp-app .input { background: rgba(255,255,255,.07); border-color: var(--tp-border-medium);
  color: var(--tp-text-primary); }
.tp-app .input::placeholder { color: var(--tp-text-muted); }
.tp-app .alert.err { background: rgba(255,93,108,.12); color: #ffb3bb; border-color: rgba(255,93,108,.4); }

/* ── Overlay header: transparent over the hero → blurred surface ── */
.tp-header { position: fixed; z-index: 100; inset-block-start: 0; inset-inline: 0;
  min-height: 68px; padding-inline: clamp(1rem, 3.5vw, 4rem);
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: clamp(1rem, 3vw, 3rem); color: #fff;
  background: linear-gradient(180deg, rgba(3,16,47,.94), rgba(3,16,47,.55) 58%, transparent);
  transition: background-color var(--tp-motion-standard) var(--tp-ease-standard); }
.tp-header[data-scrolled="true"] { background: rgba(3,16,47,.90);
  border-bottom: 1px solid var(--tp-border-soft); backdrop-filter: blur(18px); }
.tp-header-brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  color: #fff; font-weight: 800; justify-self: start; }
/* The dark surface takes the light (white) logo — no wordmark. */
.tp-header .tq-logo { content: url("/assets/brand/tranquil-logo-dark.png"); height: 30px; width: auto; }
.tp-header-nav { display: flex; align-items: center; gap: clamp(.7rem, 1.4vw, 1.5rem);
  min-width: 0; overflow-x: auto; scrollbar-width: none; justify-self: center; }
.tp-header-nav a { position: relative; padding-block: .8rem; color: var(--tp-text-secondary);
  font-size: .86rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.tp-header-nav a:hover, .tp-header-nav a:focus-visible,
.tp-header-nav a[aria-current="page"] { color: #fff; }
.tp-header-nav a[aria-current="page"]::after { content: ""; position: absolute;
  inset-inline: 0; inset-block-end: .3rem; height: 3px; border-radius: 999px;
  background: var(--tp-brand-lime); }
.tp-header-actions { display: flex; align-items: center; gap: .45rem; justify-self: end; }
.tp-icon-btn { display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border: 0; border-radius: 50%; cursor: pointer;
  color: #fff; background: rgba(255,255,255,.10); }
.tp-icon-btn:hover { background: rgba(255,255,255,.18); }
.tp-icon-btn:focus-visible { outline: none; box-shadow: var(--tp-shadow-focus); }
.tp-icon-btn svg { width: 17px; height: 17px; }
/* The signed-in avatar is the door to My Library. */
.tp-header-me { width: 40px; height: 40px; padding: 0; border: 1px solid var(--tp-border-medium);
  border-radius: 50%; overflow: hidden; cursor: pointer; background: none; flex: none; }
.tp-header-me .avatar { width: 100%; height: 100%; border-radius: 50%; font-size: 14px; }
.tp-header-me:hover { border-color: rgba(255,255,255,.5); }
.tp-header-me:focus-visible { outline: none; box-shadow: var(--tp-shadow-focus); }

/* ── Route content: full-bleed; padded variant for utility pages ── */
.tp-main { min-height: 100svh; padding-bottom: clamp(7rem, 12vh, 11rem); }
.tp-main.pad { padding: calc(68px + 1.6rem) clamp(1rem, 4vw, 4.5rem) clamp(7rem, 12vh, 11rem); }
.tp-gutter { padding-inline: clamp(1rem, 4vw, 4.5rem); }
.tp-section-masthead { padding: calc(68px + 3.5rem) clamp(1rem, 4vw, 4.5rem) 1rem; }
.tp-section-masthead h1 { margin: 0; font-size: clamp(1.8rem, 4vw, 3rem); letter-spacing: -.02em; }

/* ── Sticky context nav (anchors into a section's rails) ── */
.tp-context-nav { position: sticky; z-index: 30; inset-block-start: 68px;
  display: flex; gap: .55rem; padding: .8rem clamp(1rem, 4vw, 4.5rem);
  overflow-x: auto; scrollbar-width: none;
  background: rgba(3,16,47,.82); border-bottom: 1px solid var(--tp-border-soft);
  backdrop-filter: blur(18px); }
.tp-context-nav a, .tp-context-nav button { flex: 0 0 auto; padding: .55rem 1rem; border: 1px solid var(--tp-border-soft);
  border-radius: var(--tp-radius-pill); color: var(--tp-text-secondary); background: none; cursor: pointer;
  font-size: 12.5px; font-weight: 600; text-decoration: none; font-family: inherit; }
.tp-context-nav a[aria-current="page"], .tp-context-nav button.on { color: var(--tp-bg-950);
  background: var(--tp-brand-lime); border-color: var(--tp-brand-lime); }
.tp-context-nav a:focus-visible, .tp-context-nav button:focus-visible { outline: none; box-shadow: var(--tp-shadow-focus); }
.tp-context-nav .tp-gutter { display: flex; gap: .55rem; padding: 0; }

/* ── Section-level empty notice: quiet, actionable, never a wall ── */
.tp-empty-rail { max-width: 560px; padding: 2.5rem 0 1rem; }
.tp-empty-rail h3 { margin: 0 0 .5rem; font-size: 19px; }
.tp-empty-rail p { margin: 0 0 1.1rem; color: var(--tp-text-secondary); font-size: 13.5px; line-height: 1.6; }
.tp-empty-acts { display: flex; gap: 10px; flex-wrap: wrap; }

/* ── Mobile bottom navigation ── */
.tp-bottom-nav { display: none; }

/* Layout utilities */
.tp-stack { display: flex; flex-direction: column; gap: var(--tp-stack-gap, 1rem); }
.tp-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.tp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 14px; }
.tp-lazy-section { content-visibility: auto; contain-intrinsic-size: 420px; }

/* ── Cinematic hero: a contained banner — the artwork is the star.
   The image is never globally dimmed; a local radial shade sits behind
   the text block and a shallow (≤14%) fade grounds the bottom edge. ── */
.tp-hero { position: relative; overflow: hidden; isolation: isolate;
  width: calc(100% - clamp(24px, 4vw, 72px)); max-width: 1880px;
  margin-inline: auto; margin-bottom: 10px; border-radius: 18px;
  min-height: clamp(500px, 58svh, 720px); display: flex; align-items: flex-end;
  background: var(--tp-bg-900); }
.tp-hero-art { position: absolute; inset: 0; background-size: cover;
  background-position: var(--hero-focus-x, 60%) var(--hero-focus-y, 35%);
  transition: opacity var(--tp-motion-hero) var(--tp-ease-standard); }
.tp-hero-art.leaving { opacity: 0; }
.tp-hero::before { content: ""; position: absolute; inset: 0; z-index: 1;
  background: var(--tp-gradient-hero-text); pointer-events: none; }
.tp-hero::after { content: ""; position: absolute; z-index: 1;
  inset-inline: 0; bottom: 0; height: 13%;
  background: var(--tp-gradient-hero-bottom); pointer-events: none; }
.tp-hero-body { position: relative; z-index: 2; max-width: min(520px, 34vw);
  padding: calc(68px + clamp(3rem, 9vh, 6rem)) clamp(1rem, 4vw, 4.5rem) clamp(2.6rem, 7vh, 4.5rem);
  text-shadow: 0 2px 16px rgba(3,16,47,.34); }
.tp-hero-kicker { font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tp-brand-lime); margin-bottom: 8px; display: flex; gap: 8px; align-items: center; }
.tp-hero-labels { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 10px; }
.tp-hero-label { display: inline-flex; align-items: center; gap: 6px;
  background: var(--tp-brand-lime); color: #0b1020; font-size: 11.5px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase; padding: 5px 12px;
  border-radius: var(--tp-radius-pill, 999px); }
.tp-hero-label.live { background: #e5484d; color: #fff; }
.tp-hero-label.live::before { content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: #fff; animation: tp-pulse 1.4s ease infinite; }
.tp-hero-title { font-size: clamp(2.5rem, 4.2vw, 5.1rem); font-weight: 800; line-height: .98;
  letter-spacing: -.035em; margin: 0 0 10px; max-width: 10ch; color: #fff;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tp-hero-meta { font-size: 13px; color: rgba(255,255,255,.74); margin-bottom: 10px; }
.tp-hero-desc { font-size: clamp(.92rem, 1.15vw, 1.05rem); line-height: 1.6; color: rgba(255,255,255,.82);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  margin: 0 0 18px; max-width: 46ch; }
.tp-hero-acts { display: flex; gap: 10px; flex-wrap: wrap; }
.tp-btn { border: 0; cursor: pointer; border-radius: var(--tp-radius-pill); font-weight: 700;
  font-size: 14px; padding: 10px 22px; transition: transform var(--tp-motion-fast) var(--tp-ease-standard); }
.tp-btn:active { transform: scale(.97); }
.tp-btn:focus-visible { outline: none; box-shadow: var(--tp-shadow-focus); }
.tp-btn-play { background: var(--tp-brand-lime); color: var(--tp-bg-950); }
.tp-btn-play:hover { background: var(--tp-brand-lime-strong); }
.tp-btn-ghost { background: rgba(255,255,255,.14); color: #fff; backdrop-filter: blur(6px); }
.tp-btn-ghost:hover { background: rgba(255,255,255,.22); }
.tp-hero-dots { position: absolute; z-index: 2; right: 18px; bottom: 16px; display: flex; gap: 6px; }
.tp-hero-dots button { width: 8px; height: 8px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255,255,255,.35); padding: 0; }
.tp-hero-dots button.on { background: var(--tp-brand-lime); }
.tp-hero-arrow { position: absolute; z-index: 3; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(3,16,47,.55); color: #fff; font-size: 26px; line-height: 1;
  backdrop-filter: blur(6px); opacity: 0; transition: opacity var(--tp-motion-standard) var(--tp-ease-standard); }
.tp-hero:hover .tp-hero-arrow, .tp-hero-arrow:focus-visible { opacity: 1; }
.tp-hero-arrow:focus-visible { outline: none; box-shadow: var(--tp-shadow-focus); }
.tp-hero-arrow.prev { left: 14px; } .tp-hero-arrow.next { right: 14px; }

/* ── Publisher / identity hero ── */
.tp-profile-hero::before { background: radial-gradient(ellipse 46% 84% at 8% 56%,
  rgba(3,16,47,.97) 0%, rgba(3,16,47,.86) 30%, rgba(3,16,47,.50) 54%,
  rgba(3,16,47,.16) 76%, transparent 100%); }
.tp-profile-hero .tp-hero-body { max-width: min(620px, 38vw); }
.tp-profile-id { display: flex; align-items: center; gap: 18px; margin-bottom: 14px; }
.tp-profile-id .tp-hero-title { font-size: clamp(1.8rem, 4vw, 3.2rem); margin: 2px 0 6px; }
.tp-profile-logo { flex: none; width: clamp(72px, 9vw, 118px); height: clamp(72px, 9vw, 118px);
  border-radius: 50%; overflow: hidden; position: relative; display: flex; align-items: center;
  justify-content: center; color: #fff; font-size: 34px; font-weight: 800;
  border: 2px solid var(--tp-border-medium); box-shadow: 0 12px 32px rgba(0,0,0,.45); }
.tp-profile-logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ── Branded channel tile (TV · radio) ── */
.tp-channel-card { flex: none; width: 200px; cursor: pointer; background: none; border: 0;
  padding: 0; text-align: left; color: inherit; font: inherit; }
.tp-channel-logo { aspect-ratio: 16 / 9; border-radius: var(--tp-radius-lg, 14px); overflow: hidden;
  position: relative; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 30px; font-weight: 800; border: 1px solid var(--tp-border-soft);
  transition: transform var(--tp-motion-standard) var(--tp-ease-emphasised); }
.tp-channel-logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 14%; }
.tp-channel-card:hover .tp-channel-logo { transform: scale(1.04); }
.tp-channel-card:focus-visible { outline: none; }
.tp-channel-card:focus-visible .tp-channel-logo { box-shadow: var(--tp-shadow-focus); }
.tp-channel-card .tp-pub-name, .tp-channel-card .tp-pub-kind { text-align: left; }
.tp-channel-card .tp-pub-name { margin-top: 8px; }

/* Quiet section note — a whisper, never a wall */
.tp-quiet-note { color: var(--tp-text-muted); font-size: 13px; padding: 1.4rem 0; margin: 0; }

/* ── Rails ── */
.tp-rail { margin: 14px 0 22px; scroll-margin-top: calc(68px + 64px); }
.tp-rail-head { display: flex; align-items: baseline; gap: 12px; margin: 0 0 10px; }
.tp-rail-head h3 { margin: 0; font-size: clamp(15px, 1.7vw, 19px); font-weight: 800; }
.tp-rail-head a { font-size: 12px; color: var(--tp-brand-lime); cursor: pointer; font-weight: 700; }
.tp-rail-strip { display: flex; gap: 12px; overflow-x: auto; padding: 4px 2px 10px;
  scroll-snap-type: x proximity; scrollbar-width: thin; }
.tp-rail-strip > * { scroll-snap-align: start; }

/* ── Media cards ── */
.tp-media-card { flex: none; width: 200px; cursor: pointer; background: none; border: 0;
  padding: 0; text-align: left; color: inherit; font: inherit;
  transition: transform var(--tp-motion-standard) var(--tp-ease-emphasised); }
.tp-media-card.wide { width: 280px; }
.tp-media-card.sq { width: 170px; }
.tp-media-card.sq .tp-media-art { aspect-ratio: 1; }
.tp-media-card:focus-visible { outline: none; }
.tp-media-card:focus-visible .tp-media-art { box-shadow: var(--tp-shadow-focus); }
@media (hover: hover) and (pointer: fine) {
  .tp-media-card:hover { transform: translateY(-5px) scale(1.03); z-index: 4; }
  .tp-media-card:hover .tp-media-art { box-shadow: var(--tp-shadow-card); }
}
.tp-media-art { position: relative; aspect-ratio: 16 / 9; border-radius: var(--tp-radius-md);
  overflow: hidden; background: var(--tp-bg-800); }
.tp-media-art::after { content: ""; position: absolute; inset: 0; background: var(--tp-gradient-card); pointer-events: none; }
.tp-media-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tp-media-title { font-weight: 700; font-size: 13px; line-height: 1.3; margin-top: 7px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tp-text-primary); }
.tp-media-sub { font-size: 11.5px; color: var(--tp-text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-live-badge { position: absolute; top: 8px; left: 8px; z-index: 1; background: var(--tp-danger);
  color: #fff; font-size: 10px; font-weight: 800; padding: 2px 8px; border-radius: var(--tp-radius-pill);
  letter-spacing: .5px; display: inline-flex; align-items: center; gap: 5px; }
.tp-live-badge i { width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: tp-pulse 1.4s infinite; }
@keyframes tp-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.tp-dur { position: absolute; bottom: 8px; right: 8px; z-index: 1; background: rgba(0,0,0,.7);
  color: #fff; font-size: 10.5px; padding: 1px 7px; border-radius: 6px; }
.tp-progress { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; height: 3px; background: rgba(255,255,255,.25); }
.tp-progress i { display: block; height: 100%; background: var(--tp-brand-lime); }

/* ── Publisher (circular) cards ── */
.tp-pub-card { flex: none; width: 150px; cursor: pointer; text-align: center; background: none;
  border: 0; padding: 0; color: inherit; font: inherit;
  transition: transform var(--tp-motion-standard) var(--tp-ease-emphasised); }
@media (hover: hover) and (pointer: fine) { .tp-pub-card:hover { transform: translateY(-4px); } }
.tp-pub-ava { position: relative; width: 110px; height: 110px; margin: 0 auto; border-radius: 50%;
  overflow: hidden; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 34px; font-weight: 800; border: 2px solid var(--tp-border-soft); }
.tp-pub-ava img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tp-pub-name { padding-top: 8px; font-weight: 700; font-size: 13px; color: var(--tp-text-primary); }
.tp-pub-kind { font-size: 11px; color: var(--tp-text-muted); }

/* Reduced motion: everything settles instantly. */
@media (prefers-reduced-motion: reduce) {
  .tp-hero-art, .tp-media-card, .tp-pub-card, .tp-btn { transition: none !important; animation: none !important; }
  .tp-live-badge i { animation: none; }
}
@media (max-width: 900px) {
  .tp-header-nav { display: none; }
  .tp-header { grid-template-columns: auto 1fr; }
  .tp-header-actions { grid-column: 2; }
}
@media (max-width: 640px) {
  .tp-main.pad, .tp-gutter { padding-inline: 14px; }
  .tp-media-card { width: 160px; } .tp-media-card.wide { width: 230px; }
  .tp-media-card.sq { width: 140px; }
  .tp-hero { width: 100%; min-height: 72svh; border-radius: 0 0 18px 18px; }
  .tp-hero-body { max-width: none; padding-inline: 18px; }
  .tp-hero-title { font-size: clamp(2.25rem, 11vw, 3.8rem); max-width: 12ch; }
  /* Text moves to the bottom — the shade follows it; no side shade. */
  .tp-hero::before { background: linear-gradient(180deg, transparent 0%,
    rgba(3,16,47,.32) 42%, rgba(3,16,47,.78) 68%, rgba(3,16,47,.96) 100%); }
  .tp-hero::after { display: none; }
  .tp-hero-arrow { display: none; }
  .tp-main { padding-bottom: 9.5rem; }
  /* Bottom navigation replaces the primary top nav. */
  .tp-bottom-nav { display: flex; position: fixed; z-index: 110; inset-inline: 0; inset-block-end: 0;
    background: rgba(3,16,47,.94); border-top: 1px solid var(--tp-border-soft);
    backdrop-filter: blur(18px); padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px)); }
  .tp-bottom-nav a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 6px 2px; color: var(--tp-text-muted); text-decoration: none; font-size: 10px;
    font-weight: 600; border-radius: 10px; min-height: 44px; justify-content: center; }
  .tp-bottom-nav a svg { width: 20px; height: 20px; }
  .tp-bottom-nav a[aria-current="page"] { color: var(--tp-brand-lime); }
  /* The runtime mini-player rides above the bottom nav. */
  body.tp-mode #tq-miniplayer { bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   Tranquil Global Dock — the persistent communication & media layer.

   One shell, four states (Messages · Player · Calls · Activity) and four
   sizes (collapsed · compact · expanded · picture-in-picture / full).
   It overlays content in compact mode and can reserve space when
   expanded, so it never covers the thing the member came to read.
   ══════════════════════════════════════════════════════════════════════ */
.gd { position: fixed; right: 18px; bottom: 14px; z-index: 9300;
  width: 340px; display: flex; flex-direction: column; align-items: stretch;
  font-family: inherit; }
.gd[data-display="compact"] { width: 380px; }
.gd[data-display="expanded"] { width: 480px; }

/* ── the collapsed bar: avatar · now playing · unread · expand ── */
.gd-bar { display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 11px 14px; border: 1px solid var(--mer-border); border-radius: 14px;
  background: var(--mer-surface, #fff); box-shadow: 0 -4px 20px rgba(20,26,60,.12);
  cursor: pointer; font: inherit; font-weight: 700; font-size: 13.5px;
  text-align: left; color: inherit; }
.gd[data-display]:not([data-display="collapsed"]) .gd-bar {
  border-radius: 0 0 14px 14px; border-top: 0; box-shadow: none; }
.gd-bar-ic { flex: none; display: flex; }
.gd-bar-ic svg { width: 17px; height: 17px; }
.gd-bar-txt { flex: 1; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.gd-bar-caret { color: var(--mer-muted); font-weight: 400; }
.gd-count, .gd-dot { min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; background: #d93025; color: #fff; font-size: 11px;
  font-weight: 700; display: inline-flex; align-items: center;
  justify-content: center; flex: none; }
.gd-live { display: inline-block; padding: 1px 6px; border-radius: 5px;
  background: #d93025; color: #fff; font-size: 9.5px; font-weight: 800;
  letter-spacing: .06em; vertical-align: 1px; }

/* ── the shell body ── */
.gd-shell { display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--mer-border); border-radius: 14px 14px 0 0;
  background: var(--mer-surface, #fff); box-shadow: 0 10px 34px rgba(20,26,60,.16);
  height: 470px; }
.gd[data-display="expanded"] .gd-shell { height: 76vh; max-height: 780px; }
.gd-tabs { display: flex; gap: 2px; padding: 6px 6px 0;
  border-bottom: 1px solid var(--mer-border); }
.gd-tab { flex: 1; display: flex; flex-direction: column; align-items: center;
  gap: 2px; padding: 7px 4px 8px; border: 0; border-bottom: 2px solid transparent;
  background: none; cursor: pointer; font: inherit; font-size: 10.5px;
  color: var(--mer-muted); position: relative; }
.gd-tab svg { width: 17px; height: 17px; }
.gd-tab.on { color: var(--mer-text, #12151f); border-bottom-color: #b9df4b;
  font-weight: 700; }
.gd-tab .gd-dot { position: absolute; top: 2px; right: 22%; }
.gd-pane { flex: 1; min-height: 0; display: flex; flex-direction: column;
  overflow-y: auto; }
.gd-foot { display: flex; align-items: center; gap: 6px; padding: 7px 10px;
  border-top: 1px solid var(--mer-border); }
.gd-foot-sp { flex: 1; }

.gd-head { display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--mer-border);
  font-size: 13.5px; }
.gd-head-actions { display: flex; gap: 2px; }
.gd-icon { display: inline-flex; align-items: center; justify-content: center;
  min-width: 28px; height: 28px; padding: 0 6px; border: 0; border-radius: 8px;
  background: none; cursor: pointer; font: inherit; font-size: 13px;
  color: inherit; text-decoration: none; opacity: .78; }
.gd-icon:hover { background: rgba(0,0,0,.06); opacity: 1; }
.gd-icon svg { width: 16px; height: 16px; }
.gd-chip { padding: 5px 10px; border: 1px solid var(--mer-border);
  border-radius: 999px; background: none; cursor: pointer; font: inherit;
  font-size: 11.5px; font-weight: 600; color: inherit; text-decoration: none;
  white-space: nowrap; }
.gd-chip.on { background: #b9df4b; border-color: #b9df4b; color: #12151f; }
.gd-ellipsis { min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.gd-empty { padding: 26px 18px; text-align: center; color: var(--mer-muted);
  font-size: 13px; line-height: 1.5; }
.gd-empty.sm { padding: 14px; font-size: 12px; }

/* ── Messages ── */
.gd-search { padding: 8px 10px; border-bottom: 1px solid var(--mer-border); }
.gd-search input { width: 100%; padding: 7px 10px; border: 1px solid var(--mer-border);
  border-radius: 10px; background: rgba(0,0,0,.02); font: inherit; font-size: 12.5px; }
.gd-lanes, .gd-calls, .gd-acts, .gd-queue { display: flex; flex-direction: column; }
.gd-lane, .gd-qrow { display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 9px 12px; border: 0; background: none; cursor: pointer;
  font: inherit; text-align: left; color: inherit; }
.gd-lane:hover, .gd-qrow:hover { background: rgba(0,0,0,.05); }
.gd-lane-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.gd-lane-txt strong { font-size: 13px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.gd-lane-txt em { font-style: normal; font-size: 11.5px; color: var(--mer-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gd-lane-t { font-size: 11px; color: var(--mer-muted); flex: none; }
.gd-thread-head { display: flex; align-items: center; gap: 6px; padding: 7px 8px;
  border-bottom: 1px solid var(--mer-border); }
.gd-thread { flex: 1; min-height: 0; display: flex; flex-direction: column;
  overflow: hidden; }
.gd-thread .chat-thread { height: 100%; }

/* ── Player ── */
.gd-nowcard { display: flex; align-items: center; gap: 12px; padding: 14px 12px; }
.gd-cover { flex: none; width: 58px; height: 58px; border-radius: 12px;
  overflow: hidden; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(120deg, #26316B, #1f6b3a); color: #fff; font-size: 22px; }
.gd-cover img { width: 100%; height: 100%; object-fit: cover; }
.gd-nowmeta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.gd-transport { display: flex; align-items: center; gap: 8px; padding: 0 12px 10px; }
.gd-transport-2 { padding-bottom: 12px; border-bottom: 1px solid var(--mer-border); }
.gd-play { width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: #26316B; color: #fff; cursor: pointer; font-size: 14px; flex: none; }
.gd-time { font-size: 10.5px; color: var(--mer-muted);
  font-variant-numeric: tabular-nums; flex: none; }
.gd-rail { flex: 1; height: 5px; border-radius: 99px; background: rgba(0,0,0,.08);
  cursor: pointer; position: relative; }
.gd-fill { height: 100%; width: 0; border-radius: 99px; background: #26316B; }
.gd-vol { flex: 1; accent-color: #26316B; }
.gd-queue-head { padding: 10px 12px 4px; font-size: 11px; font-weight: 800;
  letter-spacing: .06em; color: var(--mer-muted); }
.gd-qdot { flex: none; width: 30px; height: 30px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(120deg, #26316B, #1f6b3a); color: #fff; font-size: 12px; }
.gd-guide { border-bottom: 1px solid var(--mer-border); padding: 4px 0; }
.gd-slot, .gd-device { display: flex; align-items: center; gap: 10px; padding: 7px 12px; }
.gd-slot-l { flex: none; width: 44px; font-size: 9.5px; font-weight: 800;
  letter-spacing: .06em; color: var(--mer-muted); }

/* ── Activity: the P0–P5 ladder is visible, not implied ── */
.gd-act { display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  border-bottom: 1px solid rgba(0,0,0,.05); }
.gd-pri { flex: none; font-size: 9.5px; font-weight: 800; letter-spacing: .04em;
  padding: 2px 5px; border-radius: 5px; background: rgba(0,0,0,.06);
  color: var(--mer-muted); }
.gd-act.gd-P0 .gd-pri, .gd-act.gd-P1 .gd-pri { background: #d93025; color: #fff; }
.gd-act.gd-P2 .gd-pri { background: #f5a623; color: #12151f; }
.gd-act.gd-P3 .gd-pri { background: #26316B; color: #fff; }

/* ── quick-chat pills: one active window, the rest minimised ── */
.gd-pills { display: flex; gap: 6px; justify-content: flex-end;
  margin-bottom: 8px; flex-wrap: wrap; }
.gd-pill { display: flex; align-items: center; gap: 6px; max-width: 160px;
  padding: 6px 10px; border: 1px solid var(--mer-border); border-radius: 999px;
  background: var(--mer-surface, #fff); box-shadow: 0 4px 14px rgba(20,26,60,.12);
  cursor: pointer; font: inherit; font-size: 12px; font-weight: 600; }
.gd-pill-more { cursor: default; color: var(--mer-muted); }

/* ── toasts: quiet for P3, persistent for P1/P2, silent for P5 ── */
.gd-toast { position: fixed; right: 18px; bottom: 92px; z-index: 9500;
  width: min(340px, calc(100vw - 36px)); display: flex; align-items: flex-start;
  gap: 10px; padding: 12px 14px; border: 1px solid var(--mer-border);
  border-radius: 14px; background: var(--mer-surface, #fff);
  box-shadow: 0 14px 40px rgba(20,26,60,.2); animation: gd-rise .18s ease-out; }
.gd-toast-hold { border-left: 3px solid #d93025; }
.gd-toast-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px;
  font-size: 12.5px; }
.gd-toast-body span { color: var(--mer-muted); overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.gd-toast-acts { display: flex; align-items: center; gap: 4px; flex: none; }
@keyframes gd-rise { from { transform: translateY(8px); opacity: 0; } }

/* ── the cross-device handoff card ── */
.gd-handoff { position: fixed; left: 50%; transform: translateX(-50%);
  bottom: 96px; z-index: 9500; display: flex; align-items: center; gap: 10px;
  width: min(440px, calc(100vw - 32px)); padding: 12px 14px;
  border: 1px solid var(--mer-border); border-radius: 14px;
  background: var(--mer-surface, #fff); box-shadow: 0 14px 40px rgba(20,26,60,.22); }

/* ── video: mini · theatre · full, switched without a restart ── */
.gd-vid { position: fixed; right: 16px; bottom: 96px; z-index: 9450;
  background: #000; border-radius: 14px; overflow: hidden;
  box-shadow: 0 14px 44px rgba(0,0,0,.42); touch-action: none; }
.gd-vid[data-mode="mini"] { width: 320px; aspect-ratio: 16/9; }
.gd-vid[data-mode="theatre"] { width: min(640px, 82vw); aspect-ratio: 16/9;
  right: 16px; bottom: 96px; }
.gd-vid[data-mode="full"] { inset: 0; width: 100vw; height: 100vh;
  border-radius: 0; aspect-ratio: auto; }
.gd-vid-slot { position: absolute; inset: 0; }
.gd-vid video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.gd-vid-bar { position: absolute; left: 0; right: 0; top: 0; display: flex;
  align-items: center; gap: 2px; padding: 6px 8px; cursor: grab;
  background: linear-gradient(rgba(0,0,0,.6), transparent); }
.gd-vid-bar .gd-icon { color: #fff; opacity: .9; }
.gd-vid-bar .gd-icon:hover { background: rgba(255,255,255,.18); }
.gd-vid-title { flex: 1; color: #fff; font-size: 11.5px; font-weight: 600; }

/* ── mobile: the dock becomes a bottom sheet that never eats the nav ── */
@media (max-width: 768px) {
  .gd { left: 0; right: 0; bottom: 0; width: auto; }
  .gd-bar { border-radius: 0; border-left: 0; border-right: 0; }
  .gd-shell { border-radius: 16px 16px 0 0; border-left: 0; border-right: 0;
    height: 52vh; }
  .gd[data-display="expanded"] .gd-shell { height: 92vh; }
  .gd-pills { padding: 0 10px; }
  .gd-toast { left: 12px; right: 12px; width: auto; bottom: 88px; }
  .gd-vid[data-mode="mini"] { width: 200px; right: 10px; bottom: 140px; }
  .gd-vid[data-mode="theatre"] { width: calc(100vw - 20px); right: 10px; }
}

/* ── expanded mode may reserve page space instead of overlaying ── */
body.gd-reserve { padding-right: 500px; }
@media (max-width: 1180px) { body.gd-reserve { padding-right: 0; } }

/* ══════════════════════════════════════════════════════════════════════
   Enterprise datatable — components/datatable.js
   ──────────────────────────────────────────────────────────────────────
   One table grammar for every workspace, console and report surface,
   replacing the three that grew separately (.tbl, .ws-dt, and the inline
   styles in the form sheet). Built on --mer-* tokens only, so it inherits
   the brand and the soft geometry without knowing about either.
   ══════════════════════════════════════════════════════════════════════ */

.dt { display: flex; flex-direction: column; gap: 10px; }

/* ── Toolbar ── */
.dt-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dt-search { position: relative; display: flex; align-items: center;
  flex: 0 1 260px; min-width: 170px; }
.dt-search svg { position: absolute; left: 10px; width: 15px; height: 15px;
  color: var(--mer-text-faint); pointer-events: none; }
.dt-search input { width: 100%; height: 32px; padding: 0 10px 0 31px;
  font: inherit; font-size: 13px; border-radius: var(--mer-radius-sm);
  border: 1px solid var(--mer-border); background: var(--mer-surface); color: var(--mer-text); }
.dt-search input:focus { outline: none; border-color: var(--mer-primary);
  box-shadow: 0 0 0 1px var(--mer-primary); }
.dt-search input::-webkit-search-cancel-button { cursor: pointer; }

.dt-filter { display: flex; align-items: center; gap: 6px; font-size: 12px;
  color: var(--mer-text-muted); }
.dt-filter select { height: 32px; padding: 0 26px 0 10px; font: inherit; font-size: 13px;
  border-radius: var(--mer-radius-sm); border: 1px solid var(--mer-border);
  background: var(--mer-surface); color: var(--mer-text); }
.dt-filter select:focus { outline: none; border-color: var(--mer-primary);
  box-shadow: 0 0 0 1px var(--mer-primary); }

/* ── Active-narrowing chips: every filter visible, each one clearable ── */
.dt-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dt-chips[hidden] { display: none; }
.dt-chip { display: inline-flex; align-items: center; gap: 6px; border: 0;
  font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
  padding: 4px 10px; border-radius: var(--mer-radius-pill);
  background: var(--mer-primary-tint); color: var(--mer-primary); }
.dt-chip:hover { background: var(--mer-selected); }
.dt-chip span { opacity: .55; font-size: 10px; }
.dt-chip-plain { background: none; color: var(--mer-text-muted); text-decoration: underline; }

/* ── Bulk-action bar: only present when something is selected ── */
.dt-bulk { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 12px; border-radius: var(--mer-radius-md);
  background: var(--mer-selected); color: var(--mer-on-selected); }
.dt-bulk[hidden] { display: none; }
.dt-bulk-n { font-size: 12.5px; font-weight: 700; margin-right: 2px; }

/* ── The table ── */
.dt-frame { border: 1px solid var(--mer-border); border-radius: var(--mer-radius-lg);
  background: var(--mer-surface); overflow: auto; max-height: 72vh; }
.dt-pad { padding: 16px; }
.dt-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }

.dt-table th { position: sticky; top: 0; z-index: 1; text-align: left;
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--mer-text-muted); background: var(--mer-surface);
  padding: 10px 14px; border-bottom: 1px solid var(--mer-border); white-space: nowrap; }
.dt-table th.dt-sortable { cursor: pointer; user-select: none; }
.dt-table th.dt-sortable:hover { color: var(--mer-primary); }
.dt-arrow { display: inline-block; width: 12px; color: var(--mer-primary); font-size: 11px; }

.dt-table td { padding: 10px 14px; border-bottom: 1px solid var(--mer-border);
  vertical-align: middle; }
.dt-table tbody tr:last-child td { border-bottom: 0; }
.dt-table tbody tr:hover td { background: var(--mer-primary-tint); }
.dt-nowrap { white-space: nowrap; max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
.dt-r { text-align: right; }
.dt-c { text-align: center; }
/* Money and counts line up only if their digits do. */
.dt-table td.dt-r { font-variant-numeric: tabular-nums; }

.dt-table tr.dt-link { cursor: pointer; }
.dt-table tr.dt-link:focus-visible { outline: 2px solid var(--mer-primary); outline-offset: -2px; }
.dt-table tr.dt-muted td { opacity: .5; }

.dt-pick { width: 36px; padding-right: 0 !important; }
.dt-pick input { width: 15px; height: 15px; cursor: pointer; accent-color: var(--mer-primary); }

.dt-compact .dt-table { font-size: 12.5px; }
.dt-compact .dt-table td { padding: 6px 12px; }
.dt-compact .dt-table th { padding: 7px 12px; }

/* ── Status pills — tone is stated by the caller, never guessed ── */
.dt-pill { display: inline-block; padding: 2px 9px; border-radius: var(--mer-radius-pill);
  font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.dt-pill-neutral { background: var(--mer-bg); color: var(--mer-text-muted); }
.dt-pill-good    { background: #ECFDF5; color: #047857; }
.dt-pill-warn    { background: #FFFBEB; color: #B45309; }
.dt-pill-bad     { background: #FEF2F2; color: #B91C1C; }
.dt-pill-info    { background: var(--mer-primary-tint); color: var(--mer-primary); }
.dt-pill-brand   { background: var(--mer-execute-container); color: var(--mer-on-execute-container); }

/* ── Footer ── */
.dt-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 12.5px; }
.dt-pg { min-width: 92px; text-align: center; }

/* ── Narrow screens: shed low-priority columns rather than scroll sideways.
      A table you must drag to read is a table nobody reads. ── */
@media (max-width: 900px) { .dt-table .dt-lo { display: none; } }
@media (max-width: 640px) {
  .dt-table .dt-mid { display: none; }
  .dt-search { flex: 1 1 100%; }
  .dt-table th, .dt-table td { padding: 9px 10px; }
  .dt-nowrap { max-width: 160px; }
}

/* ══════════════════════════════════════════════════════════════════════
   Guided form — components/guidedform.js
   ──────────────────────────────────────────────────────────────────────
   Few questions at a time, help where the question is asked, and an
   answer sheet before anything is sent.
   ══════════════════════════════════════════════════════════════════════ */

.gf { display: flex; flex-direction: column; gap: 16px; }

/* ── Progress rail ── */
.gf-rail { display: flex; align-items: center; gap: 4px; list-style: none;
  margin: 0; padding: 0; flex-wrap: wrap; }
.gf-rail[hidden] { display: none; }
.gf-step { display: flex; align-items: center; gap: 7px; padding: 5px 11px 5px 5px;
  border-radius: var(--mer-radius-pill); font-size: 12.5px; font-weight: 600;
  color: var(--mer-text-faint); }
.gf-step.done { color: var(--mer-text-muted); cursor: pointer; }
.gf-step.done:hover { background: var(--mer-primary-tint); }
.gf-step.on { background: var(--mer-selected); color: var(--mer-on-selected); }

/* Step entry — the Google-Maps add-a-place glide. Forward slides in
   from the right, back from the left; honours reduced-motion. */
@keyframes gfEnterFwd { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } }
@keyframes gfEnterBack { from { opacity: 0; transform: translateX(-26px); } to { opacity: 1; transform: none; } }
.gf-enter-fwd { animation: gfEnterFwd .28s cubic-bezier(.2,.7,.3,1); }
.gf-enter-back { animation: gfEnterBack .28s cubic-bezier(.2,.7,.3,1); }
@media (prefers-reduced-motion: reduce) {
  .gf-enter-fwd, .gf-enter-back { animation: none; }
}
.gf-dot { display: grid; place-items: center; width: 22px; height: 22px; flex: none;
  border-radius: 50%; font-size: 11px; font-weight: 700;
  background: var(--mer-bg); color: var(--mer-text-muted); }
.gf-step.on .gf-dot { background: var(--mer-primary); color: var(--mer-on-primary); }
.gf-step.done .gf-dot { background: var(--mer-execute); color: var(--mer-on-execute); }

/* ── Step head ── */
.gf-head h3 { margin: 0 0 3px; font-size: 17px; font-weight: 700; }
.gf-head { margin-bottom: 4px; }
.gf-head .sub { margin: 0; font-size: 13px; color: var(--mer-text-muted); line-height: 1.5; }

/* ── Fields ── */
.gf-field { margin-bottom: 14px; }
.gf-req { color: var(--mer-danger); font-weight: 700; }
.gf-opt { font-weight: 500; color: var(--mer-text-faint); text-transform: none;
  letter-spacing: 0; font-size: 11px; }
.gf-bad input, .gf-bad select, .gf-bad textarea { border-color: var(--mer-danger); }
.gf-bad input:focus, .gf-bad select:focus, .gf-bad textarea:focus {
  box-shadow: 0 0 0 1px var(--mer-danger); border-color: var(--mer-danger); }
.gf-err { display: flex; align-items: flex-start; gap: 5px; margin-top: 5px;
  font-size: 12px; font-weight: 600; color: var(--mer-danger); }
.gf-err::before { content: "!"; display: grid; place-items: center; flex: none;
  width: 14px; height: 14px; margin-top: 1px; border-radius: 50%;
  background: var(--mer-danger); color: #fff; font-size: 10px; }

/* Choice cards — the whole card is the target, not a 14px dot. */
.gf-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.gf-opt-card { display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 10px 14px; min-width: 120px; text-align: left; cursor: pointer;
  font: inherit; border-radius: var(--mer-radius-md);
  border: 1px solid var(--mer-border); background: var(--mer-surface); color: var(--mer-text); }
.gf-opt-card:hover { border-color: var(--mer-primary); background: var(--mer-primary-tint); }
.gf-opt-card.on { border-color: var(--mer-primary); background: var(--mer-selected);
  box-shadow: 0 0 0 1px var(--mer-primary) inset; }
.gf-opt-t { font-size: 13.5px; font-weight: 600; }
.gf-opt-h { font-size: 11.5px; color: var(--mer-text-muted); }

.gf-money { display: flex; align-items: center; gap: 0; }
.gf-money .gf-cur { display: grid; place-items: center; height: 34px; padding: 0 11px;
  font-size: 12.5px; font-weight: 700; color: var(--mer-text-muted);
  background: var(--mer-bg); border: 1px solid var(--mer-border); border-right: 0;
  border-radius: var(--mer-radius-sm) 0 0 var(--mer-radius-sm); }
.gf-money input { border-radius: 0 var(--mer-radius-sm) var(--mer-radius-sm) 0 !important; }

/* ── Review sheet ── */
.gf-review { border: 1px solid var(--mer-border); border-radius: var(--mer-radius-lg);
  overflow: hidden; background: var(--mer-surface); }
.gf-review-h { padding: 9px 14px; font-size: 11px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--mer-text-muted);
  background: var(--mer-bg); border-bottom: 1px solid var(--mer-border); }
.gf-review-r { display: flex; align-items: baseline; gap: 12px; padding: 10px 14px;
  border-bottom: 1px solid var(--mer-border); font-size: 13.5px; }
.gf-review-r:last-child { border-bottom: 0; }
.gf-review-k { flex: 0 0 38%; color: var(--mer-text-muted); font-size: 12.5px; }
.gf-review-v { flex: 1; font-weight: 600; word-break: break-word; }
.gf-review-e { border: 0; background: none; font: inherit; font-size: 12.5px;
  font-weight: 600; color: var(--mer-primary); cursor: pointer; padding: 0; }
.gf-review-e:hover { text-decoration: underline; }

/* ── Footer ── */
.gf-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding-top: 12px; border-top: 1px solid var(--mer-border); }
.gf-saved { font-size: 11.5px; color: var(--mer-text-faint); }

@media (max-width: 640px) {
  .gf-lbl { display: none; }              /* the rail keeps its dots */
  .gf-step { padding: 5px; }
  .gf-review-r { flex-direction: column; gap: 2px; }
  .gf-review-k { flex: none; }
  .gf-opt-card { flex: 1 1 100%; }
}

/* ══════════════════════════════════════════════════════════════════════
   Finance — views/finance.js
   ──────────────────────────────────────────────────────────────────────
   The workspace book. Money figures use tabular numerals throughout: a
   column of amounts that doesn't line up is a column nobody scans.
   ══════════════════════════════════════════════════════════════════════ */

.fin-tabs { display: flex; gap: 2px; overflow-x: auto; margin: 0 0 16px;
  border-bottom: 1px solid var(--mer-border); scrollbar-width: none; }
.fin-tabs::-webkit-scrollbar { display: none; }
.fin-tab { border: 0; background: none; font: inherit; font-size: 13.5px;
  font-weight: 600; color: var(--mer-text-muted); cursor: pointer;
  padding: 9px 14px; white-space: nowrap; border-bottom: 2px solid transparent;
  margin-bottom: -1px; }
.fin-tab:hover { color: var(--mer-text); }
.fin-tab.on { color: var(--mer-primary); border-bottom-color: var(--mer-primary); }

.fin-body { display: flex; flex-direction: column; gap: 14px; }

/* Figures line up only if their digits are the same width. */
.fin-fig { font-variant-numeric: tabular-nums; font-size: 19px; font-weight: 700; }
.fin-pos { color: #047857; }
.fin-neg { color: var(--mer-danger); }
.fin-late { color: var(--mer-danger); font-size: 11.5px; font-weight: 700; }

/* ── "Needs you" rows ── */
.fin-attn { display: flex; align-items: center; gap: 12px; width: 100%;
  border: 0; background: none; font: inherit; text-align: left; cursor: pointer;
  padding: 11px 16px; border-bottom: 1px solid var(--mer-border); }
.fin-attn:last-child { border-bottom: 0; }
.fin-attn:hover { background: var(--mer-primary-tint); }
.fin-attn > div { flex: 1; min-width: 0; }
.fin-attn b { font-size: 13.5px; }
.fin-attn .sub { font-size: 12px; }

/* ── Month bars ── */
.fin-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 9px;
  font-size: 13px; }
.fin-bar:last-child { margin-bottom: 0; }
.fin-bar-k { flex: 0 0 74px; color: var(--mer-text-muted); font-size: 12.5px; }
.fin-bar-t { flex: 1; height: 9px; border-radius: var(--mer-radius-pill);
  background: var(--mer-bg); overflow: hidden; }
.fin-bar-t i { display: block; height: 100%; border-radius: var(--mer-radius-pill);
  transition: width var(--mer-motion-fast); }
.fin-bar b { flex: 0 0 auto; font-variant-numeric: tabular-nums; font-size: 13px; }

/* ── Modal sheet: invoices, expenses, contacts ── */
.fin-modal { position: fixed; inset: 0; z-index: 900; display: flex;
  align-items: flex-start; justify-content: center; padding: 5vh 16px;
  background: rgba(16, 20, 32, .45); overflow-y: auto; }
.fin-sheet { width: 100%; max-width: 780px; background: var(--mer-surface);
  border-radius: var(--mer-radius-xl); box-shadow: 0 24px 48px rgba(0,0,0,.24);
  overflow: hidden; }
.fin-sheet-sm { max-width: 520px; }
.fin-sheet-h { display: flex; align-items: center; gap: 12px; padding: 16px 20px;
  border-bottom: 1px solid var(--mer-border); }
.fin-sheet-h h3 { margin: 0; flex: 1; font-size: 16px; font-weight: 700; }
.fin-x { border: 0; background: none; font-size: 16px; line-height: 1;
  color: var(--mer-text-muted); cursor: pointer; padding: 4px; }
.fin-x:hover { color: var(--mer-text); }
.fin-sheet-b { padding: 20px; }

/* ── Invoice line editor ── */
.fin-lines { border: 1px solid var(--mer-border); border-radius: var(--mer-radius-md);
  overflow: hidden; }
.fin-lines-t { width: 100%; border-collapse: collapse; font-size: 13px; }
.fin-lines-t th { text-align: left; font-size: 11px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--mer-text-muted);
  padding: 8px 10px; background: var(--mer-bg); border-bottom: 1px solid var(--mer-border); }
.fin-lines-t td { padding: 5px 6px; border-bottom: 1px solid var(--mer-border);
  vertical-align: middle; }
.fin-lines-t tr:last-child td { border-bottom: 0; }
.fin-lines-t input, .fin-lines-t select { width: 100%; height: 30px; font: inherit;
  font-size: 12.5px; padding: 0 8px; border-radius: var(--mer-radius-xs);
  border: 1px solid transparent; background: transparent; color: var(--mer-text); }
.fin-lines-t input:hover, .fin-lines-t select:hover { border-color: var(--mer-border); }
.fin-lines-t input:focus, .fin-lines-t select:focus { outline: none;
  border-color: var(--mer-primary); box-shadow: 0 0 0 1px var(--mer-primary);
  background: var(--mer-surface); }
.fin-lines-t input[type="number"] { text-align: right; font-variant-numeric: tabular-nums; }
.fin-amt { font-variant-numeric: tabular-nums; font-weight: 600; padding-right: 10px !important; }
.fin-rm { border: 0; background: none; color: var(--mer-text-faint); cursor: pointer;
  font-size: 13px; padding: 4px 6px; }
.fin-rm:hover { color: var(--mer-danger); }
.fin-lines-f { display: flex; align-items: flex-end; gap: 12px; padding: 10px;
  background: var(--mer-bg); border-top: 1px solid var(--mer-border); }
.fin-tot { text-align: right; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.fin-tot > div { display: flex; gap: 14px; justify-content: flex-end; }
.fin-tot-g { margin-top: 3px; padding-top: 3px; border-top: 1px solid var(--mer-border);
  font-size: 14px; font-weight: 700; }

/* ── Issued-document record ── */
.fin-rec-h { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap;
  padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--mer-border); }
.fin-rec-h > div:first-child { flex: 1; }
.fin-rec-t { border: 1px solid var(--mer-border); border-radius: var(--mer-radius-md); }
.fin-rec-t td { padding: 8px 10px; }
.fin-rec-a { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px;
  padding-top: 14px; border-top: 1px solid var(--mer-border); }

/* ── Report picker ── */
.fin-rep-pick { display: flex; gap: 8px; flex-wrap: wrap; }
.fin-rep { flex: 1 1 200px; display: flex; flex-direction: column; gap: 2px;
  text-align: left; cursor: pointer; font: inherit; padding: 11px 14px;
  border-radius: var(--mer-radius-md); border: 1px solid var(--mer-border);
  background: var(--mer-surface); color: var(--mer-text); }
.fin-rep:hover { border-color: var(--mer-primary); background: var(--mer-primary-tint); }
.fin-rep.on { border-color: var(--mer-primary); background: var(--mer-selected);
  box-shadow: 0 0 0 1px var(--mer-primary) inset; }
.fin-rep b { font-size: 13.5px; }
.fin-rep .sub { font-size: 11.5px; line-height: 1.4; }

@media (max-width: 640px) {
  .fin-modal { padding: 0; }
  .fin-sheet { max-width: none; min-height: 100vh; border-radius: 0; }
  /* The line editor stops being a table on a phone; horizontal scroll on
     a form you are typing into is unusable. */
  .fin-lines { overflow-x: auto; }
  .fin-lines-t { min-width: 560px; }
  .fin-rep { flex: 1 1 100%; }
}

/* ══════════════════════════════════════════════════════════════════════
   Capital desk
   ══════════════════════════════════════════════════════════════════════ */

.cap-h { margin: 0 0 10px; font-size: 15px; font-weight: 650; }
.cap-h-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cap-note { margin: 8px 0 12px; font-size: 12.5px; line-height: 1.5; }
.cap-note-box { margin: 0 0 14px; }

.cap-grid {
  display: grid; gap: 14px; margin-top: 14px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.cap-pair {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; padding: 7px 0;
  border-bottom: 1px solid var(--mer-border-subtle, rgba(0,0,0,.06));
}
.cap-pair:last-of-type { border-bottom: 0; }
.cap-pair span { color: var(--mer-text-muted); font-size: 13px; }
.cap-pair b { font-variant-numeric: tabular-nums; font-weight: 600; }

/* ── Runway ────────────────────────────────────────────────────────────
   The band colours the whole card rather than a badge inside it: under
   three months of money is not a detail on a card, it is the card. */
.cap-runway {
  display: flex; gap: 24px; flex-wrap: wrap; align-items: center;
  justify-content: space-between; margin-bottom: 14px;
  border-left: 4px solid var(--mer-border, rgba(0,0,0,.12));
}
.cap-runway.good { border-left-color: var(--mer-success, #1a7f4b); }
.cap-runway.warn { border-left-color: var(--mer-warning, #b06b00); }
.cap-runway.bad  { border-left-color: var(--mer-danger, #b3261e); }
.cap-runway-l { min-width: 220px; }
.cap-runway-l .k { color: var(--mer-text-muted); font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em; }
.cap-runway-v { font-size: 34px; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; }
.cap-runway-v span { font-size: 16px; font-weight: 500; color: var(--mer-text-muted); }
.cap-runway-band { margin: 2px 0 0; font-size: 13.5px; font-weight: 600; }
.cap-runway.good .cap-runway-band { color: var(--mer-success, #1a7f4b); }
.cap-runway.warn .cap-runway-band { color: var(--mer-warning, #b06b00); }
.cap-runway.bad  .cap-runway-band { color: var(--mer-danger, #b3261e); }
.cap-runway-r { min-width: 240px; flex: 1; max-width: 340px; }

/* ── Progress bars ─────────────────────────────────────────────────── */
.cap-bar {
  height: 8px; border-radius: 999px; overflow: hidden; margin: 10px 0;
  background: var(--mer-surface-sunken, rgba(0,0,0,.06));
}
.cap-bar i {
  display: block; height: 100%; border-radius: 999px;
  background: var(--mer-brand, #2f6feb); transition: width .3s ease;
}
.cap-bar.sm { height: 5px; margin: 0 0 3px; min-width: 60px; }

.cap-raise { margin-bottom: 14px; }
.cap-raise-h { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; }
.cap-raise-nums {
  display: grid; gap: 10px 18px; margin-top: 12px;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}
.cap-raise-nums span { display: block; color: var(--mer-text-muted); font-size: 12px; }
.cap-raise-nums b { font-size: 15px; font-variant-numeric: tabular-nums; }

/* A flag is a quiet warning, not an alarm — "needs a licensed partner"
   and "nothing planned" are both things to notice, not to panic about. */
.cap-flag {
  display: inline-block; padding: 1px 7px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600;
  color: var(--mer-warning-text, #7a4a00);
  background: var(--mer-warning-bg, rgba(176,107,0,.12));
}

/* ── Investor pipeline strip ───────────────────────────────────────── */
.cap-stages {
  display: grid; gap: 8px; margin-bottom: 14px;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
}
.cap-stage {
  padding: 10px 8px; text-align: center; border-radius: 10px;
  background: var(--mer-surface-raised, #fff);
  border: 1px solid var(--mer-border-subtle, rgba(0,0,0,.08));
}
.cap-stage .n { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cap-stage .l { font-size: 11.5px; color: var(--mer-text-muted); margin-top: 2px; }
.cap-stage.empty { opacity: .5; }

/* ── Readiness ─────────────────────────────────────────────────────── */
.cap-score { text-align: center; margin-bottom: 14px; }
.cap-score-v { font-size: 44px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.cap-score-v span { font-size: 18px; font-weight: 500; color: var(--mer-text-muted); }
.cap-score-b { font-size: 14px; font-weight: 600; margin-top: 2px; }
.cap-score.good .cap-score-b { color: var(--mer-success, #1a7f4b); }
.cap-score.warn .cap-score-b { color: var(--mer-warning, #b06b00); }
.cap-score.bad  .cap-score-b { color: var(--mer-danger, #b3261e); }

.cap-gaps { list-style: none; margin: 0; padding: 0; }
.cap-gaps li {
  display: flex; gap: 12px; align-items: baseline; padding: 7px 0;
  border-bottom: 1px solid var(--mer-border-subtle, rgba(0,0,0,.06));
}
.cap-gaps li:last-child { border-bottom: 0; }
.cap-gaps b {
  min-width: 26px; text-align: center; font-variant-numeric: tabular-nums;
  font-size: 12px; padding: 1px 0; border-radius: 6px;
  color: var(--mer-text-muted); background: var(--mer-surface-sunken, rgba(0,0,0,.06));
}

/* ── Cap table ─────────────────────────────────────────────────────── */
.cap-asat { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.cap-asat label { display: flex; gap: 8px; align-items: center; font-size: 13px; font-weight: 600; }
.cap-asat input { padding: 6px 8px; border-radius: 8px; border: 1px solid var(--mer-border, rgba(0,0,0,.14)); }
.cap-asat .sub { font-size: 12.5px; }

.cap-up { color: var(--mer-success, #1a7f4b); font-weight: 600; }
.cap-down { color: var(--mer-danger, #b3261e); font-weight: 600; }

/* ── Deal rooms ────────────────────────────────────────────────────── */
.cap-sections { display: flex; flex-direction: column; }
.cap-section {
  display: flex; gap: 12px; align-items: center; padding: 9px 0;
  border-bottom: 1px solid var(--mer-border-subtle, rgba(0,0,0,.06));
}
.cap-section:last-child { border-bottom: 0; }
.cap-section .l { flex: 1; font-weight: 550; font-size: 13.5px; }
.cap-section .m { display: flex; gap: 8px; align-items: center; color: var(--mer-text-muted); font-size: 12.5px; }
.cap-clear { margin: 10px 0 0; font-size: 13.5px; font-weight: 600; color: var(--mer-success, #1a7f4b); }

.cap-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.cap-none .empty .btn { margin: 0 4px; }

@media (max-width: 640px) {
  .cap-runway { gap: 14px; }
  .cap-runway-v { font-size: 28px; }
  .cap-section { flex-wrap: wrap; }
}

/* ══════════════════════════════════════════════════════════════════════
   Reports — statements, period picker, packs
   ══════════════════════════════════════════════════════════════════════ */

/* ── The period ────────────────────────────────────────────────────── */
.fin-period {
  display: flex; gap: 16px; align-items: center; justify-content: space-between;
  flex-wrap: wrap; margin-bottom: 14px;
}
.fin-period label { display: flex; gap: 8px; align-items: center; font-size: 13px; font-weight: 600; }
.fin-period input {
  padding: 6px 8px; border-radius: 8px;
  border: 1px solid var(--mer-border, rgba(0,0,0,.14));
  font: inherit; font-size: 13px;
}
.fin-period .sub { font-size: 12.5px; }
.fin-period-presets { display: flex; gap: 6px; flex-wrap: wrap; }
.fin-period-dates { display: flex; gap: 14px; flex-wrap: wrap; }
.fin-preset {
  padding: 5px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 550;
  cursor: pointer; border: 1px solid var(--mer-border, rgba(0,0,0,.14));
  background: transparent; color: var(--mer-text-muted);
}
.fin-preset:hover { background: var(--mer-surface-sunken, rgba(0,0,0,.04)); }
.fin-preset.on {
  background: var(--mer-brand, #2f6feb); border-color: var(--mer-brand, #2f6feb); color: #fff;
}

/* The statement's own heading — what you are reading, and over what
   dates. A report printed without its period is not evidence of
   anything, and this is the line that gets screenshotted. */
.fin-cover {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  margin: 0 0 12px; padding: 0 2px;
}
.fin-cover > span:first-child { font-size: 17px; font-weight: 650; }
.fin-cover .sub { font-size: 13px; }

/* ── Statement sections ────────────────────────────────────────────── */
.fin-stmt {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
.fin-stmt.three { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

.fin-sec {
  border-radius: 12px; overflow: hidden;
  background: var(--mer-surface-raised, #fff);
  border: 1px solid var(--mer-border-subtle, rgba(0,0,0,.08));
}
.fin-sec-h {
  padding: 10px 14px; font-weight: 650; font-size: 13.5px;
  background: var(--mer-surface-sunken, rgba(0,0,0,.04));
  border-bottom: 1px solid var(--mer-border-subtle, rgba(0,0,0,.08));
}
.fin-sec.good .fin-sec-h { color: var(--mer-success, #1a7f4b); }
.fin-sec.warn .fin-sec-h { color: var(--mer-warning, #b06b00); }
.fin-sec-rows { padding: 4px 0; }
.fin-sec-row {
  display: grid; grid-template-columns: 62px 1fr auto;
  gap: 10px; align-items: baseline; padding: 6px 14px; font-size: 13px;
}
.fin-sec-row .c { color: var(--mer-text-muted); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.fin-sec-row .n { min-width: 0; overflow-wrap: anywhere; }
.fin-sec-row b { font-variant-numeric: tabular-nums; font-weight: 600; }
/* A figure the ledger implies rather than stores — shown so the section
   visibly adds up, marked so it is not mistaken for an account. */
.fin-sec-row.derived .n { font-style: italic; color: var(--mer-text-muted); }
.fin-sec-none { padding: 10px 14px; font-size: 12.5px; color: var(--mer-text-muted); }
.fin-sec-t {
  display: flex; justify-content: space-between; gap: 12px; align-items: baseline;
  padding: 9px 14px; font-size: 13px; font-weight: 650;
  border-top: 2px solid var(--mer-border, rgba(0,0,0,.14));
}
.fin-sec-t b { font-variant-numeric: tabular-nums; }

/* The line a reader checks: the statement's own bottom line. */
.fin-bottom {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 14px; flex-wrap: wrap; margin-top: 14px;
  font-size: 15px; font-weight: 650;
}
.fin-bottom span { font-size: 13px; font-weight: 500; color: var(--mer-text-muted); }
.fin-bottom b { font-size: 19px; font-variant-numeric: tabular-nums; }
.fin-bottom.ok { border-left: 4px solid var(--mer-success, #1a7f4b); }

.fin-strong { font-weight: 700; }
.fin-pos { color: var(--mer-success, #1a7f4b); }
.fin-export { display: flex; justify-content: flex-end; margin-top: 12px; }

/* ── Pack modules ──────────────────────────────────────────────────── */
.fin-mods { display: flex; gap: 6px; flex-wrap: wrap; }
.fin-mod {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 550;
  background: var(--mer-surface-sunken, rgba(0,0,0,.05));
  color: var(--mer-text, #111);
  border: 1px solid var(--mer-border-subtle, rgba(0,0,0,.07));
}

@media (max-width: 640px) {
  .fin-period { gap: 10px; }
  .fin-sec-row { grid-template-columns: 52px 1fr auto; }
}

/* ── Network: perks, partner desk, savings ─────────────────────────── */
.net-cats{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 12px}
.net-cat{border:1px solid var(--mer-border,#dde3ea);background:var(--mer-surface,#fff);
  border-radius:999px;padding:5px 12px;font:inherit;font-size:12.5px;cursor:pointer;color:inherit}
.net-cat.on{background:var(--mer-ink,#0c2340);color:#fff;border-color:var(--mer-ink,#0c2340)}
.net-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:12px}
.net-perk{padding:14px 16px;display:flex;flex-direction:column;gap:6px}
.net-dim{opacity:.82}
.net-perk-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.net-cat-tag{font-size:11px;text-transform:uppercase;letter-spacing:.4px;
  color:var(--mer-muted,#5b6b7c);border:1px solid var(--mer-border,#dde3ea);
  border-radius:4px;padding:2px 6px}
.net-worth{font-size:14px}
.net-title{margin:2px 0 0;font-size:15px;line-height:1.3}
.net-partner{margin-top:-2px}
.net-desc{margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.net-perk-foot{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:auto;padding-top:8px}
.net-reason{font-size:12.5px;color:var(--mer-muted,#5b6b7c);font-style:italic}
.net-code{font-family:ui-monospace,Menlo,monospace;font-size:22px;letter-spacing:2px;
  text-align:center;padding:16px;border:2px dashed var(--mer-border,#dde3ea);border-radius:10px;
  user-select:all}
.net-claim{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:8px 0;border-bottom:1px solid var(--mer-border,#eef1f5)}
.net-claim:last-child{border-bottom:0}
.net-claim em.sub{display:block;font-style:normal}
.net-waiting{color:var(--mer-warn,#b26a00)}
.net-sv-fig{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums;margin:2px 0 6px}

/* ═══ Coordination engine — meetings, work, calendar, appointments ═══ */
.coord-steps { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 14px; }
.coord-dot { font-size: 10.5px; padding: 3px 9px; border-radius: 999px;
  background: var(--mer-surface-2, #f2f4f7); color: var(--mer-muted); }
.coord-dot.on { background: var(--brand-primary, #1e3a8a); color: #fff; font-weight: 650; }
.coord-dot.done { background: #e3f4e9; color: #245a38; }
.coord-nav { display: flex; justify-content: space-between; margin-top: 16px; }
.coord-step .sub { display: block; margin-bottom: 10px; }

.coord-scope-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px; margin-bottom: 12px; }
.coord-card { display: flex; flex-direction: column; gap: 3px; text-align: left;
  padding: 10px 12px; border: 1.5px solid var(--mer-border, #e5e7eb); border-radius: 10px;
  background: var(--mer-surface, #fff); cursor: pointer; transition: border-color 120ms ease; }
.coord-card:hover { border-color: var(--brand-primary, #1e3a8a); }
.coord-card.on { border-color: var(--brand-primary, #1e3a8a);
  background: color-mix(in srgb, var(--brand-primary, #1e3a8a) 6%, #fff); }
.coord-card strong { font-size: 13px; }
.coord-card .sub { font-size: 11px; line-height: 1.3; }
.coord-kind-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }

.coord-people input[data-q], .coord-polstage input[data-appq] { width: 100%; }
.coord-found { border: 1px solid var(--mer-border, #e5e7eb); border-radius: 8px;
  margin-top: 4px; max-height: 200px; overflow: auto; background: var(--mer-surface, #fff); }
.coord-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.coord-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px;
  padding: 3px 6px 3px 10px; border-radius: 999px; background: var(--mer-surface-2, #f2f4f7); }
.coord-chip select { font-size: 10.5px; border: none; background: transparent; color: var(--mer-muted); }
.coord-chip button { border: none; background: none; cursor: pointer; font-size: 13px; opacity: .6; }
.coord-chip button:hover { opacity: 1; }

.coord-agrow { display: flex; gap: 6px; margin-bottom: 6px; align-items: center; }
.coord-agrow input { flex: 1; }
.coord-check { display: flex; align-items: center; gap: 8px; padding: 3px 0;
  font-size: 12.5px; cursor: pointer; }
.coord-check input { width: auto; }
.coord-adv summary { cursor: pointer; font-size: 12.5px; color: var(--mer-muted); padding: 6px 0; }

.coord-review { border: 1px solid var(--mer-border, #e5e7eb); border-radius: 10px; padding: 4px 14px; }
.coord-rev-row { display: flex; justify-content: space-between; gap: 14px; padding: 8px 0;
  border-bottom: 1px solid var(--mer-border, #eceef2); font-size: 13px; }
.coord-rev-row:last-child { border-bottom: none; }
.coord-rev-row strong { text-align: right; max-width: 65%; }

/* policy builder */
.coord-polkind { border: 1px solid var(--mer-border, #e5e7eb); border-radius: 10px;
  padding: 10px 12px; margin-bottom: 10px; }
.coord-polkind-head { display: flex; gap: 6px; }
.coord-polkind-head input { flex: 1; font-weight: 650; }
.coord-polstage { border-left: 3px solid var(--brand-primary, #1e3a8a); border-radius: 4px;
  background: var(--mer-surface-2, #f8f9fb); padding: 8px 10px; margin: 8px 0; }
.coord-polstage-head { display: flex; align-items: center; gap: 6px; font-size: 12px;
  flex-wrap: wrap; margin-bottom: 4px; }

/* calendar projection */
.coord-cal { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
.coord-cal-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px 8px; }
.coord-cal-tabs { display: flex; gap: 4px; padding: 0 18px 10px; flex-wrap: wrap;
  border-bottom: 1px solid var(--mer-border, #eceef2); }
.coord-cal-tabs button, .coord-meetws-tabs button { font-size: 12px; padding: 4px 11px;
  border-radius: 999px; border: 1px solid var(--mer-border, #e5e7eb);
  background: var(--mer-surface, #fff); cursor: pointer; }
.coord-cal-tabs button.on, .coord-meetws-tabs button.on {
  background: var(--brand-primary, #1e3a8a); border-color: var(--brand-primary, #1e3a8a);
  color: #fff; font-weight: 600; }
.coord-cal-body { flex: 1; overflow: auto; padding: 6px 18px 24px; }
.coord-cal-day { font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--mer-muted); margin: 16px 0 6px; }
.coord-cal-item { display: flex; gap: 12px; width: 100%; text-align: left; padding: 9px 12px;
  border: 1px solid var(--mer-border, #eceef2); border-radius: 10px; margin-bottom: 6px;
  background: var(--mer-surface, #fff); cursor: pointer; align-items: center; }
.coord-cal-item:hover { border-color: var(--brand-primary, #1e3a8a); }
.coord-cal-time { font-size: 12px; font-weight: 650; color: var(--mer-muted);
  flex: 0 0 48px; }
.coord-cal-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.coord-cal-main strong { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.coord-cal-kind { font-size: 10px; font-weight: 700; letter-spacing: .05em;
  color: var(--mer-muted); font-style: normal; }
.coord-t-meeting .coord-cal-kind { color: #1e3a8a; }
.coord-t-approval .coord-cal-kind, .coord-t-ticket .coord-cal-kind { color: #b45309; }
.coord-t-appointment .coord-cal-kind { color: #15803d; }
.coord-t-schedule .coord-cal-kind { color: #7c3aed; }

/* scheduling engine composer */
.coord-kinds { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 6px; margin-bottom: 12px; }
.coord-kind { font-size: 12px; padding: 8px 10px; border-radius: 9px; text-align: left;
  border: 1.5px solid var(--mer-border, #e5e7eb); background: var(--mer-surface, #fff);
  cursor: pointer; transition: border-color 120ms ease; }
.coord-kind:hover { border-color: var(--brand-primary, #1e3a8a); }
.coord-kind.on { border-color: var(--brand-primary, #1e3a8a); font-weight: 650;
  background: color-mix(in srgb, var(--brand-primary, #1e3a8a) 6%, #fff); }
.coord-chip input[type="checkbox"] { margin: 0; }
.coord-newmenu { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* meeting workspace */
.coord-meetws { padding: 18px; overflow: auto; height: 100%; }
.coord-meetws-head { display: flex; justify-content: space-between; align-items: flex-start;
  gap: 14px; margin-bottom: 14px; }
.coord-meetws-tabs { display: flex; gap: 4px; margin-bottom: 14px; flex-wrap: wrap; }
.coord-agenda-list { margin: 0; padding-left: 20px; font-size: 13.5px; line-height: 1.8; }

/* appointments */
.coord-days { display: flex; flex-direction: column; gap: 4px; }
.coord-dayrow { display: flex; align-items: center; gap: 8px; }
.coord-dayrow .coord-check { flex: 0 0 68px; }
.coord-dayrow input[type="time"] { width: 96px; }

/* ─── Share sheet ───────────────────────────────────────────────────
   A bottom sheet on phones, a centred card on desktop. This only ever
   renders when `navigator.share` is missing — where the OS sheet exists
   it is strictly better, because it reaches the apps the person has
   actually installed and we cannot enumerate those from a web page. */
.tq-sheet-back {
  position: fixed; inset: 0; z-index: 400;
  background: rgba(10, 12, 8, .45);
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; transition: opacity .2s ease;
}
.tq-sheet-back.on { opacity: 1; }
.tq-sheet {
  width: 100%; max-width: 460px;
  background: var(--mer-surface, #fff);
  border-radius: 18px 18px 0 0;
  box-shadow: var(--mer-shadow-2, 0 -6px 30px rgba(0, 0, 0, .18));
  padding: 8px 18px calc(18px + env(safe-area-inset-bottom));
  transform: translateY(14px); transition: transform .22s cubic-bezier(.2, .8, .3, 1);
}
.tq-sheet-back.on .tq-sheet { transform: translateY(0); }
.tq-sheet-grip {
  width: 38px; height: 4px; border-radius: 2px; margin: 2px auto 10px;
  background: var(--mer-border, #e3e6ee);
}
.tq-sheet-h { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.tq-sheet-h strong { font-size: 15px; flex: 1; }

.tq-share-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
  gap: 6px; margin-bottom: 14px;
}
.tq-share-t {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  border: none; background: none; cursor: pointer; font: inherit;
  font-size: 12px; color: var(--mer-text, #1b2029);
  padding: 10px 4px; border-radius: 12px;
  transition: background var(--mer-motion-fast);
}
.tq-share-t:hover { background: var(--mer-surface-2, #f4f6fa); }
.tq-share-ic { display: inline-flex; }
.tq-share-ic svg { width: 34px; height: 34px; }

.tq-share-link { display: flex; gap: 8px; align-items: center; }
.tq-share-link input {
  flex: 1; min-width: 0; font: inherit; font-size: 13px;
  padding: 8px 12px; border-radius: 999px;
  border: 1px solid var(--mer-border, #e3e6ee);
  background: var(--mer-surface-2, #f4f6fa);
  color: var(--mer-text-muted, #5c6470);
}

@media (min-width: 640px) {
  .tq-sheet-back { align-items: center; }
  .tq-sheet { border-radius: 16px; padding-bottom: 18px; }
  .tq-sheet-grip { display: none; }
}

/* ---- Document page strip -------------------------------------------------
   A PDF in the feed reads as a horizontal run of pages: the current one
   fills the frame, the next peeks in at the right edge. The peek is the
   affordance — it says "there is more this way" without a caption, and the
   gesture to reach it is the one the reader already knows. Scrolling is
   native (scroll-snap), so momentum, rubber-banding and trackpad gestures
   behave exactly as they do everywhere else on the device. */
.doc-view { position: relative; background: #e9ebf1; }
.doc-strip {
  display: flex; align-items: center; gap: 10px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-left: 12px;
  padding: 12px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.doc-strip::-webkit-scrollbar { display: none; }
.doc-slide {
  /* 86% of the frame, so 14% of the next page is always visible. Sizing
     by width rather than height is what makes the peek unconditional —
     a height-driven page happens to fill the frame exactly on some
     screens and the hint disappears at precisely the wrong moment. */
  position: relative; flex: 0 0 86%; scroll-snap-align: start;
  aspect-ratio: 17 / 22; max-height: min(72vh, 820px); background: #fff;
  border-radius: 6px; box-shadow: 0 2px 10px rgba(16, 22, 40, .16);
  display: flex; align-items: center; justify-content: center;
  /* Un-rendered pages sit at rest until they are close enough to matter,
     so a 300-page report costs one page of work, not three hundred. */
  transition: opacity .25s ease;
}
.doc-slide canvas { width: 100%; height: 100%; display: block; border-radius: 6px; object-fit: contain; }
.doc-slide-n { color: #b3b9c8; font-size: 13px; font-weight: 600; }
.doc-slide.ready .doc-slide-n { display: none; }
.doc-load {
  position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; color: #7a8194; font-size: 13px;
}
.doc-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; border-radius: 50%; border: none;
  background: rgba(255, 255, 255, .95); box-shadow: 0 3px 10px rgba(0, 0, 0, .22);
  cursor: pointer; font-size: 19px; line-height: 1; z-index: 3;
  display: flex; align-items: center; justify-content: center;
}
.doc-nav:disabled { opacity: .3; cursor: default; }
/* On a phone one page is all that fits; the peek shrinks to a sliver so the
   page itself is never cropped to make room for a hint. */
@media (max-width: 560px) {
  .doc-strip { gap: 8px; padding: 10px; }
  .doc-slide { flex-basis: 88%; max-height: min(64vh, 600px); }
}

/* ---- Trending rail rows --------------------------------------------------
   A trending list of bare headlines asks the reader to take it on faith.
   A face says who is speaking and a thumbnail says what it looks like —
   the two cheapest pieces of evidence available, and the kernel already
   carries both on the card. */
.avatar.xs { width: 20px; height: 20px; font-size: 10px; border-width: 1px; }
.trend-item { align-items: flex-start; }
.trend-main { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.trend-by { display: flex; align-items: center; gap: 6px; min-width: 0; }
.trend-by .s { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trend-vf { display: inline-flex; color: var(--mer-primary); }
.trend-vf svg { width: 12px; height: 12px; }
.trend-thumb {
  flex: 0 0 56px; width: 56px; height: 56px; border-radius: 8px;
  background: var(--mer-surface-alt, #eef0f5) center / cover no-repeat;
  position: relative; overflow: hidden;
}
.trend-play {
  position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; background: rgba(0, 0, 0, .3); color: #fff;
}
.trend-play svg { width: 18px; height: 18px; }

/* Discover · Posts lens filter rows. Two rows, not one: HOW the list is
   ordered and WHAT is in it are separate questions, and merging them
   into a single chip strip makes people believe picking "Photos" also
   picked an ordering. */
.disc-orders { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.disc-kinds {
  display: flex; gap: 6px; margin-bottom: 12px;
  overflow-x: auto; scrollbar-width: none; padding-bottom: 2px;
}
.disc-kinds::-webkit-scrollbar { display: none; }
.disc-kinds .chip { white-space: nowrap; }

/* ══════════════════════════════════════════════════════════════════════
   Tranquil Documents — documents.tranquil.africa

   The member-facing SynWrite shell. Deliberately plain: a launcher, a
   list, and a page that gets out of the way once you start typing.
   ══════════════════════════════════════════════════════════════════════ */

/* Workspace switcher — your drive, your organisation, your communities. */
.doc-spaces { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.doc-spaces .sub { opacity: .65; font-size: 11.5px; }

/* The launcher: five surfaces, one row on a desktop, two on a phone. */
.doc-new {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.doc-tile {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  padding: 14px; border: 1px solid var(--line, #e5e7eb); border-radius: 12px;
  background: var(--surface, #fff); cursor: pointer; font: inherit;
  text-align: left; color: inherit; transition: border-color .12s, transform .12s;
}
.doc-tile:hover { border-color: var(--brand, #2563eb); transform: translateY(-1px); }
.doc-tile strong { font-size: 13.5px; }
.doc-tile .sub { font-size: 11.5px; opacity: .7; line-height: 1.35; }
.doc-tile-icon { display: inline-flex; opacity: .8; }
.doc-tile-icon svg { width: 20px; height: 20px; }

/* The list. Index-served, so it stays fast at any size. */
.doc-items { display: flex; flex-direction: column; }
.doc-row {
  display: grid; grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center; gap: 10px; width: 100%;
  border: 0; background: none; padding: 9px 8px; border-radius: 8px;
  cursor: pointer; font: inherit; font-size: 13px; text-align: left; color: inherit;
}
.doc-row:hover { background: rgba(0,0,0,.05); }
.doc-row-icon { display: inline-flex; opacity: .7; }
.doc-row-icon svg { width: 16px; height: 16px; }
.doc-row-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-row .sub { font-size: 11.5px; opacity: .65; white-space: nowrap; }

/* ── Editor ───────────────────────────────────────────────────────── */

.doc-bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding-bottom: 10px; margin-bottom: 14px;
  border-bottom: 1px solid var(--line, #e5e7eb);
}
.doc-title {
  border: 0; background: none; font: inherit; font-size: 17px; font-weight: 600;
  padding: 4px 6px; border-radius: 8px; min-width: 160px; max-width: 380px;
  color: inherit;
}
.doc-title:hover { background: rgba(0,0,0,.04); }
.doc-title:focus { outline: 2px solid var(--brand, #2563eb); outline-offset: 0; background: none; }
.doc-bar .sub { font-size: 11.5px; opacity: .65; min-width: 54px; }
.doc-bar select { padding: 4px 8px; }

/* Writing surface. A page, not a form field. */
.doc-flow {
  width: 100%; min-height: 62vh; resize: vertical;
  border: 1px solid var(--line, #e5e7eb); border-radius: 12px;
  background: var(--surface, #fff); color: inherit;
  padding: 26px 28px; font: inherit; font-size: 15px; line-height: 1.7;
}
.doc-flow:focus { outline: none; border-color: var(--brand, #2563eb); }

/* Sheet grid. Scrolls in both directions with the headers pinned. */
.doc-sheet {
  overflow: auto; max-height: 70vh;
  border: 1px solid var(--line, #e5e7eb); border-radius: 12px;
  background: var(--surface, #fff);
}
.doc-sheet table { border-collapse: collapse; font-size: 12.5px; }
.doc-sheet th {
  position: sticky; top: 0; z-index: 2;
  background: var(--surface-2, #f8fafc); font-weight: 600; opacity: .75;
  border: 1px solid var(--line, #e5e7eb); padding: 3px 8px; min-width: 34px;
}
.doc-sheet tbody th { position: sticky; left: 0; z-index: 1; text-align: right; }
.doc-sheet td { border: 1px solid var(--line, #e5e7eb); padding: 0; }
.doc-sheet td input {
  border: 0; background: none; font: inherit; font-size: 12.5px; color: inherit;
  padding: 4px 8px; width: 108px; min-width: 108px;
}
.doc-sheet td input:focus {
  outline: 2px solid var(--brand, #2563eb); outline-offset: -2px; background: var(--surface, #fff);
}

/* Rendered preview — slides and fixed pages, as the engine draws them. */
.doc-preview {
  border: 1px solid var(--line, #e5e7eb); border-radius: 12px;
  background: var(--surface, #fff); padding: 26px 28px;
  line-height: 1.65; overflow-x: auto;
}
.doc-preview img, .doc-preview table { max-width: 100%; }
.doc-preview table { border-collapse: collapse; }
.doc-preview td, .doc-preview th { border: 1px solid var(--line, #e5e7eb); padding: 5px 9px; }

@media (max-width: 640px) {
  .doc-flow { padding: 18px 16px; min-height: 56vh; }
  .doc-title { max-width: 100%; flex: 1 1 100%; order: -1; }
}

/* ══════════════════════════════════════════════════════════════════
   The document editor proper — block surface, deck stage, dialogs.
   ══════════════════════════════════════════════════════════════════ */

/* Dialogs. Small, centred, dismissible; used by templates, history,
   page setup and find-and-replace alike. */
.tq-modal {
  position: fixed; inset: 0; z-index: 300; display: grid; place-items: center;
  background: rgba(15, 23, 42, .45); padding: 20px; overflow: auto;
}
.tq-modal-card {
  background: var(--surface, #fff); color: inherit;
  border-radius: 16px; width: min(560px, 100%);
  box-shadow: 0 24px 60px rgba(0,0,0,.28); overflow: hidden;
}
.tq-modal-card > header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--line, #e5e7eb);
}
.tq-modal-card > [data-inner] { padding: 16px 18px; }
.tq-modal-card.doc-tpl { width: min(760px, 100%); }

.doc-tpl-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px; padding: 16px 18px; max-height: 66vh; overflow: auto;
}
.doc-tpl-card {
  display: flex; flex-direction: column; gap: 4px; text-align: left;
  padding: 14px; border: 1px solid var(--line, #e5e7eb); border-radius: 12px;
  background: var(--surface, #fff); color: inherit; cursor: pointer;
}
.doc-tpl-card:hover { border-color: var(--brand, #2563eb); background: var(--surface-2, #f8fafc); }
.doc-tpl-card .sub { font-size: 12px; line-height: 1.45; }
.doc-tpl-icon svg { width: 20px; height: 20px; opacity: .7; }

.doc-history { max-height: 60vh; overflow: auto; }
.doc-hrow {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 2px; border-bottom: 1px solid var(--line, #e5e7eb);
}
.doc-hrow:last-child { border-bottom: 0; }

.doc-pagesetup, .doc-find { display: grid; gap: 10px; }
.doc-pagesetup label, .doc-find label { display: grid; gap: 4px; font-size: 13px; }
.doc-pagesetup select, .doc-pagesetup input, .doc-find input {
  padding: 7px 9px; border: 1px solid var(--line, #e5e7eb); border-radius: 8px;
  background: var(--surface, #fff); color: inherit; font: inherit; font-size: 14px;
}
.doc-find .row-check { display: flex; align-items: center; gap: 6px; }
.doc-pagesetup .row, .doc-find .row { display: flex; align-items: center; gap: 10px; }

/* ── The block editor ─────────────────────────────────────────────── */

.flowed { display: grid; gap: 10px; }
.flowed-bar {
  position: sticky; top: 0; z-index: 5;
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
  padding: 6px; border: 1px solid var(--line, #e5e7eb); border-radius: 12px;
  background: var(--surface, #fff);
}
.fbtn {
  min-width: 30px; height: 28px; padding: 0 8px; cursor: pointer;
  border: 1px solid transparent; border-radius: 7px;
  background: none; color: inherit; font: inherit; font-size: 13.5px;
}
.fbtn:hover { background: var(--surface-2, #f1f5f9); border-color: var(--line, #e5e7eb); }
.fsel {
  height: 28px; padding: 0 6px; border-radius: 7px; font-size: 13px;
  border: 1px solid var(--line, #e5e7eb); background: var(--surface, #fff); color: inherit;
}
.fsep { width: 1px; height: 18px; margin: 0 4px; background: var(--line, #e5e7eb); }

/* The page. Its width is the paper the member chose in Page setup. */
.flowed-page {
  width: min(100%, var(--doc-page-w, 210mm));
  margin: 0 auto; padding: var(--doc-page-pad, 20mm);
  border: 1px solid var(--line, #e5e7eb); border-radius: 12px;
  background: var(--surface, #fff);
  font-size: 15px; line-height: 1.65;
}
.flowed-foot { text-align: right; font-size: 12px; opacity: .6; }

.dblk { position: relative; display: flex; align-items: flex-start; gap: 4px; }
.dblk-body { flex: 1; min-width: 0; }
.dblk-grip {
  position: absolute; left: -34px; top: 2px; display: none; flex-direction: column; gap: 1px;
}
.dblk:hover .dblk-grip, .dblk:focus-within .dblk-grip { display: flex; }
.gbtn {
  width: 18px; height: 16px; padding: 0; cursor: pointer; line-height: 1;
  border: 0; border-radius: 4px; background: none; color: inherit; opacity: .35; font-size: 11px;
}
.gbtn:hover { opacity: 1; background: var(--surface-2, #f1f5f9); }

.fed { outline: none; }
.fed:empty::before {
  content: attr(data-placeholder); opacity: .35; pointer-events: none;
}
.flowed-page h1 { font-size: 30px; margin: 18px 0 8px; line-height: 1.25; }
.flowed-page h2 { font-size: 23px; margin: 16px 0 6px; }
.flowed-page h3 { font-size: 19px; margin: 14px 0 5px; }
.flowed-page h4, .flowed-page h5, .flowed-page h6 { font-size: 16px; margin: 12px 0 4px; }
.flowed-page p { margin: 0 0 10px; }
.flowed-page blockquote {
  margin: 10px 0; padding: 4px 0 4px 14px;
  border-left: 3px solid var(--brand, #2563eb); opacity: .9; font-style: italic;
}
.flowed-page ul, .flowed-page ol { margin: 0 0 10px; padding-left: 24px; }
.flowed-page li { margin: 2px 0; }

.fcode { display: grid; gap: 4px; margin: 10px 0; }
.fcode-lang {
  width: 140px; font-size: 12px; padding: 3px 7px;
  border: 1px solid var(--line, #e5e7eb); border-radius: 6px;
  background: var(--surface-2, #f8fafc); color: inherit;
}
.fcode-src {
  width: 100%; min-height: 96px; resize: vertical; padding: 10px 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px;
  border: 1px solid var(--line, #e5e7eb); border-radius: 8px;
  background: var(--surface-2, #f8fafc); color: inherit;
}

.fimg { margin: 12px 0; display: grid; gap: 5px; }
.fimg-frame {
  display: grid; place-items: center; min-height: 90px; padding: 8px;
  border: 1px dashed var(--line, #cbd5e1); border-radius: 10px;
}
.fimg-frame img { max-width: 100%; border-radius: 6px; }
.fimg input {
  font-size: 12.5px; padding: 5px 8px; border: 1px solid var(--line, #e5e7eb);
  border-radius: 6px; background: var(--surface, #fff); color: inherit;
}

.ftable { margin: 12px 0; }
.ftable-tools { display: flex; gap: 4px; margin-bottom: 5px; }
.ftable table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ftable th, .ftable td { border: 1px solid var(--line, #e5e7eb); padding: 4px 7px; vertical-align: top; }
.ftable th { background: var(--surface-2, #f8fafc); }
.fth { width: 100%; border: 0; background: none; font: inherit; font-weight: 600; color: inherit; }
.fth-align { border: 0; background: none; font-size: 10.5px; opacity: .55; color: inherit; }
.fcell { min-height: 20px; outline: none; }
.ftable-cap {
  width: 100%; margin-top: 5px; font-size: 12.5px; padding: 4px 7px;
  border: 1px solid var(--line, #e5e7eb); border-radius: 6px;
  background: var(--surface, #fff); color: inherit;
}

.frule hr { border: 0; border-top: 1px solid var(--line, #d1d5db); margin: 14px 0; }
.fpagebreak {
  margin: 16px 0; text-align: center; font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; opacity: .5;
  border-top: 2px dashed var(--line, #cbd5e1); padding-top: 6px;
}
.fopaque {
  display: grid; gap: 2px; margin: 12px 0; padding: 12px 14px;
  border: 1px dashed var(--line, #cbd5e1); border-radius: 10px;
  background: var(--surface-2, #f8fafc);
}

/* A PDF is a page that has to hold still; give it the paper edge. */
.doc-flowhost.fixed-page .flowed-page {
  box-shadow: 0 2px 14px rgba(0,0,0,.09);
}

/* ── The deck editor ──────────────────────────────────────────────── */

.deckd { display: grid; grid-template-columns: 150px 1fr; gap: 12px; }
.deckd-strip {
  display: grid; gap: 6px; align-content: start; max-height: 74vh; overflow: auto;
  padding-right: 4px;
}
.deckd-thumb {
  display: flex; gap: 7px; align-items: flex-start; text-align: left; cursor: pointer;
  padding: 8px 9px; border: 1px solid var(--line, #e5e7eb); border-radius: 9px;
  background: var(--surface, #fff); color: inherit; font-size: 12px; line-height: 1.35;
}
.deckd-thumb.on { border-color: var(--brand, #2563eb); box-shadow: 0 0 0 1px var(--brand, #2563eb) inset; }
.deckd-thumb .n { opacity: .5; font-variant-numeric: tabular-nums; }
.deckd-thumb .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deckd-thumb.add { justify-content: center; opacity: .7; }

.deckd-main { display: grid; gap: 10px; min-width: 0; }
.deckd-tools {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
  padding: 6px; border: 1px solid var(--line, #e5e7eb); border-radius: 12px;
  background: var(--surface, #fff);
}
.deckd-stage {
  display: grid; place-items: center; padding: 12px;
  border: 1px solid var(--line, #e5e7eb); border-radius: 12px;
  background: var(--surface-2, #f1f5f9);
}
.deckd-canvas { position: relative; background: #fff; box-shadow: 0 4px 20px rgba(0,0,0,.14); }
.dlayer {
  position: absolute; padding: 6px; overflow: hidden;
  border: 1px solid transparent; border-radius: 4px;
}
.dlayer:hover { border-color: rgba(37, 99, 235, .35); }
.dlayer.on { border-color: var(--brand, #2563eb); }
.dlayer-text {
  width: 100%; height: 100%; outline: none; color: #111;
  white-space: pre-wrap; overflow: hidden; cursor: text;
}
.dlayer-title .dlayer-text { font-weight: 700; }
.dlayer-kpi .dlayer-text { font-weight: 700; text-align: center; }
.dlayer-subtitle .dlayer-text { opacity: .75; }
.dlayer-grab {
  position: absolute; right: -3px; bottom: -3px; width: 12px; height: 12px;
  cursor: nwse-resize; background: var(--brand, #2563eb); border-radius: 3px;
  opacity: 0;
}
.dlayer.on .dlayer-grab { opacity: 1; }
.deckd-notes { display: grid; gap: 4px; }
.deckd-notes textarea {
  width: 100%; min-height: 76px; resize: vertical; padding: 9px 11px;
  border: 1px solid var(--line, #e5e7eb); border-radius: 10px;
  background: var(--surface, #fff); color: inherit; font: inherit; font-size: 13.5px;
}

@media (max-width: 860px) {
  .deckd { grid-template-columns: 1fr; }
  .deckd-strip { grid-auto-flow: column; grid-auto-columns: 140px; overflow-x: auto; max-height: none; }
  .flowed-page { padding: 18px 16px; }
  .dblk-grip { position: static; flex-direction: row; display: flex; }
}


/* ── Interactive lesson blocks ───────────────────────────────────────────
   Slides, checkpointed video, hotspot images, map extracts, formulas, an
   algebra checker and a code playground all sit in one vertical stack so a
   lesson reads top to bottom whatever it is made of. Geometry inside a
   slide or over an image is expressed in percentages, so a diagram lands in
   the same place on a phone as on a projector. */
.lb-stack { display: grid; gap: 18px; margin: 16px 0; }
.lb-block { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); overflow: hidden; }
.lb-head { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 14px; border-bottom: 1px solid var(--line); font-weight: 600; font-size: 14px; }
.lb-prompt { padding: 12px 14px 0; font-weight: 600; }
.lb-hint, .lb-cap { padding: 8px 14px 12px; font-size: 13px; color: var(--muted); }
.lb-broken { padding: 14px; color: var(--muted); font-size: 14px; }
.lb-text .lb-prose { padding: 4px 2px; white-space: pre-wrap; line-height: 1.6; }

/* Slides — a fixed 1280×720 authoring frame scaled by width, matching the
   geometry the deck writer produces, so nothing shifts on export. */
.lb-slides .lb-stage { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #0d0f13; }
.lb-canvas { position: absolute; inset: 0; }
.lb-layer { position: absolute; color: #fff; overflow: hidden; line-height: 1.3; }
.lb-layer--title { font-weight: 700; }
.lb-layer img { width: 100%; height: 100%; object-fit: contain; }
.lb-slidebar { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-top: 1px solid var(--line); font-size: 13px; }

/* Video with checkpoints. The ticks show where the video will stop, so a
   pause is expected rather than felt like a stall. */
.lb-videowrap { position: relative; background: #000; }
.lb-videowrap video { width: 100%; display: block; }
.lb-ticks { position: relative; height: 6px; background: var(--line); }
.lb-tick { position: absolute; top: 0; width: 3px; height: 6px; background: var(--brand); border-radius: 2px; transform: translateX(-1px); }
.lb-cpcard { padding: 14px; border-top: 1px solid var(--line); background: var(--surface-2, var(--surface)); }
.lb-cpq { font-weight: 600; margin-bottom: 10px; }
.lb-cpopts { display: grid; gap: 8px; }
.lb-cpopt { text-align: left; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px;
  background: transparent; color: inherit; cursor: pointer; font: inherit; }
.lb-cpopt:hover:not(:disabled) { border-color: var(--brand); }
.lb-cpopt:disabled { opacity: .75; cursor: default; }
.lb-cpfoot { margin-top: 10px; font-size: 13px; }

/* Hotspot images — a percentage-positioned button per region. Buttons, not
   bare divs, so they are reachable by keyboard and announced. */
.lb-imgwrap { position: relative; }
.lb-imgwrap img { width: 100%; display: block; }
.lb-spot { position: absolute; transform: translate(-50%, -50%); min-width: 28px; min-height: 28px;
  border-radius: 999px; border: 2px solid #fff; background: rgba(0, 0, 0, .55); color: #fff;
  font: 600 13px/1 inherit; cursor: pointer; box-shadow: 0 1px 6px rgba(0, 0, 0, .45); }
.lb-spot:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.lb-spot.ok { background: rgba(22, 140, 90, .9); }
.lb-spot.bad { background: rgba(180, 40, 40, .9); }
.lb-askfor { padding: 10px 14px; font-weight: 600; }
.lb-imgfoot { padding: 0 14px 12px; font-size: 13px; color: var(--muted); }

/* Map extracts load only when scrolled to; a lesson with six maps should
   not open six map engines before the learner has read the first line. */
.lb-maphost { height: 320px; }
.lb-mapskel { height: 320px; display: grid; place-items: center; color: var(--muted); font-size: 13px; }
.lb-fallback { padding: 14px; font-size: 14px; color: var(--muted); }

/* Formulas and the algebra checker. MathML is native, so an equation stays
   selectable, scalable and readable by a screen reader. */
.lb-math { padding: 14px; overflow-x: auto; font-size: 20px; }
.lb-algrow, .lb-coderow { display: flex; gap: 8px; align-items: center; padding: 0 14px 12px; flex-wrap: wrap; }
.lb-algebra { flex: 1 1 220px; min-width: 0; padding: 9px 11px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--surface); color: inherit; font: 15px/1.3 ui-monospace, Menlo, Consolas, monospace; }
.lb-preview { padding: 0 14px 12px; min-height: 28px; font-size: 18px; color: var(--muted); }
.lb-verdict { padding: 0 14px 12px; font-size: 14px; font-weight: 600; }
.lb-verdict.ok { color: var(--ok, #17915d); }
.lb-verdict.bad { color: var(--err, #c23b3b); }

/* Code playground. Output is a plain text box: whatever a program prints is
   shown as text, never parsed as markup. */
.lb-editor { width: 100%; min-height: 180px; resize: vertical; border: 0; border-top: 1px solid var(--line);
  padding: 12px 14px; background: #0d0f13; color: #e6e9ef; tab-size: 2;
  font: 13px/1.55 ui-monospace, Menlo, Consolas, monospace; }
.lb-editor:focus { outline: 2px solid var(--brand); outline-offset: -2px; }
.lb-out { margin: 0; padding: 12px 14px; border-top: 1px solid var(--line); white-space: pre-wrap;
  word-break: break-word; max-height: 260px; overflow: auto;
  font: 13px/1.5 ui-monospace, Menlo, Consolas, monospace; color: var(--muted); }
.lb-out.bad { color: var(--err, #c23b3b); }

@media (max-width: 640px) {
  .lb-maphost, .lb-mapskel { height: 240px; }
  .lb-math { font-size: 17px; }
}

/* ── Placing hotspots and checkpoints by hand ────────────────────────────
   Authors used to type "42 ; 55" and hope. You cannot see where that lands
   until a learner does, so the picture itself is now the input: click it,
   and the pin appears where you clicked. Positions are percentages, which
   is what the player reads, so the pin an author places is the pin a
   learner sees on any screen size. */
.bp-place { border: 1px solid var(--mer-border); border-radius: 10px; overflow: hidden; }
.bp-wrap { position: relative; cursor: crosshair; line-height: 0; }
.bp-wrap img { width: 100%; display: block; }
.bp-pin {
  position: absolute; transform: translate(-50%, -50%);
  min-width: 24px; height: 24px; padding: 0 6px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--mer-c-brand-800, #26316B); color: #fff; cursor: default;
  font: 700 12px/1 inherit; border: 2px solid #fff;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .4);
}
.bp-list { margin-top: 8px; }
.bp-list:empty { display: none; }