/* =====================================================================
   BeginRooms -- themed workstation UI  (v=r6)
   ===================================================================== */

/* === Themes === */
:root {
  /* r19 — shared radius + glass scale (used app-wide for a consistent,
     rounded, minimal frosted-glass look) */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-pill: 999px;
  --glass-blur: 16px;

  /* ═══ r92 — GLOBAL DESIGN TOKEN SYSTEM ════════════════════════════════════
     L1 PRIMITIVES are theme-independent (here). L2 SEMANTIC roles live in each
     body[data-theme] block (--bg/--panel/--accent/--text/--line/--warn/…). The
     NEW L2 roles + L3 COMPONENT tokens below default off the ACTIVE theme's own
     L2 vars (via var()/color-mix), so a theme change is a pure REMAP of L2 —
     components resolve through L3→L2 and never change. Light themes override the
     few FIXED new-L2 tokens (--on-accent/--scrim/--shadow-cast/--plan-badge). */

  /* L1 — spacing (14px = the recurring header/dock gutter) */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 14px; --space-5: 20px; --space-6: 24px;
  /* L1 — motion */
  --dur-fast: .3s; --dur-base: .4s; --ease-out: cubic-bezier(.2,.7,.2,1);
  /* L1 — z-index scale */
  --z-canvas: 1; --z-header: 50; --z-pop: 60; --z-modal: 80;
  /* L1 — type stacks (previously inlined as literals app-wide) */
  --font-ui: "Manrope", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;

  /* L2 (new) — FIXED defaults (theme-independent); light themes override these on their body block */
  --on-accent:   #0c1020;          /* ink that sits on an accent fill */
  --scrim:       rgba(2,6,13,0.78); /* r162 — modal / overlay backdrop. Was an unused rgba(0,0,0,.5) token; now the single source for every dim (modal, template gallery, tour, region-export) so they all theme together. Dark-room value preserves the prior look. */
  --shadow-cast: rgba(0,0,0,.55);   /* premium drop-shadow base */
  --plan-badge:  #f5b94a;           /* gold plan accent (fixed across themes) */
}
/* r162 (audit) — soften the overlay dim on the light themes (paper / azure / scarlet desks): a 0.78-alpha blue-black
   veil read as a muddy cold slab over bright chrome. A lighter slate dim keeps the focus pull without the cold cast. */
body.rm-light { --scrim: rgba(20,30,52,0.42); }

/* L2 (new, DERIVED) + L3 COMPONENT tokens — declared on BODY so their var() references resolve
   against the ACTIVE theme's semantic vars (which live on body[data-theme="…"]). THIS is what makes a
   theme change a pure REMAP: switch the theme → every derived + component token re-derives, no rewrite. */
body {
  /* L2 derived */
  --board-surface: var(--panel-strong);
  --board-ink:     var(--text);
  --focus-ring:    color-mix(in srgb, var(--accent) 60%, transparent);
  --selection:     color-mix(in srgb, var(--accent) 22%, transparent);
  /* L3 component (reference ONLY L2 → a theme remap never touches these) */
  --button-primary-bg:  var(--accent-grad, var(--accent));
  --button-primary-ink: var(--on-accent);
  --toolbar-surface:    var(--panel-grad, linear-gradient(var(--panel), var(--panel-glass)));
  --widget-glass:       var(--panel-glass);
  --board-border:       var(--line-strong);
  --cursor-highlight:   var(--accent2, var(--accent));
}
:root,
body[data-theme="midnight"] {            /* r95 — PRUSSIAN: royal Prussian blue (default) */
  --bg:           #0a1733;
  --bg-soft:      #122142;
  --panel:        rgba(16, 30, 62, 0.74);
  --panel-strong: rgba(18, 34, 68, 0.93);
  --panel-glass:  rgba(16, 30, 62, 0.58);
  --line:         rgba(96, 140, 224, 0.22);
  --line-strong:  rgba(96, 140, 224, 0.50);
  --accent:       #5b8cde;
  --accent2:      #7aa2f0;
  --accent-grad:  linear-gradient(120deg, #5b8cde, #7aa2f0);
  --warn:         #f2c14e;
  --danger:       #f07171;
  --up:           #4cc69a;
  --down:         #f07171;
  --text:         #e9f0fc;
  --text-dim:     #a6bce0;
  --text-fade:    #8aa0c8;
  --on-accent:    #0a1733;   /* r218 (audit MED, WCAG AA) — white on the solid #5b8cde accent was 3.36:1 (fail) on the active face-tab/badge/focus button; this deep navy ink is 5.3:1. The primary button uses color:var(--accent) (ghost), so it's unaffected. */
  --hud-shadow:   0 0 22px rgba(91, 140, 222, 0.24), inset 0 0 12px rgba(91, 140, 222, 0.10);
  --hud-shadow-strong: 0 8px 40px rgba(0,0,0,0.62), 0 0 26px rgba(91, 140, 222, 0.32);
}

/* r95 — removed Glass Dark + Mint (consolidated theme set) */
body[data-theme="glasslight"] {          /* r95 — PAPER: black on white (light) */
  --bg: #ffffff; --bg-soft: #f3f4f6;
  --panel: rgba(255, 255, 255, 0.80); --panel-strong: rgba(255, 255, 255, 0.95); --panel-glass: rgba(255, 255, 255, 0.62);
  --line: rgba(0, 0, 0, 0.12); --line-strong: rgba(0, 0, 0, 0.30);
  --accent: #1a1a1a; --accent2: #444444; --accent-grad: linear-gradient(120deg, #222222, #555555);
  --warn: #b45309; --danger: #c0392b; --up: #1a7a4a; --down: #c0392b;
  --text: #15171a; --text-dim: #4a4f57; --text-fade: #6b7178;
  --on-accent: #ffffff;
  --hud-shadow: 0 8px 30px rgba(0,0,0,0.10), inset 0 1px 0 rgba(255,255,255,0.70);
  --hud-shadow-strong: 0 18px 50px rgba(0,0,0,0.16), inset 0 1px 0 rgba(255,255,255,0.80);
}
body[data-theme="sunset"] {              /* r95 — SUNSET: warm */
  --bg: #1c0a14; --bg-soft: #2c1019;
  --panel: rgba(52, 24, 36, 0.74); --panel-strong: rgba(52, 24, 36, 0.93); --panel-glass: rgba(52, 24, 36, 0.58);
  --line: rgba(255, 158, 94, 0.22); --line-strong: rgba(255, 158, 94, 0.48);
  --accent: #ff9e5e; --accent2: #a078ff; --accent-grad: linear-gradient(120deg, #ff9e5e, #a078ff);
  --warn: #f7c66a; --danger: #ff6b6b; --up: #f9b67a; --down: #ff6b6b;
  --text: #fff2e8; --text-dim: #d3ad94; --text-fade: #b89684;
  --on-accent: #2a1208;
  --hud-shadow: 0 0 22px rgba(255, 158, 94, 0.24), inset 0 0 12px rgba(255, 158, 94, 0.10);
  --hud-shadow-strong: 0 8px 40px rgba(0,0,0,0.62), 0 0 26px rgba(255, 158, 94, 0.32);
}
body[data-theme="mono"] {                /* r95 — ONYX: white on black */
  --bg: #000000; --bg-soft: #0a0a0a;
  --panel: rgba(22, 22, 24, 0.82); --panel-strong: rgba(26, 26, 28, 0.96); --panel-glass: rgba(20, 20, 22, 0.62);
  --line: rgba(255, 255, 255, 0.16); --line-strong: rgba(255, 255, 255, 0.40);
  --accent: #ffffff; --accent2: #cfcfcf; --accent-grad: linear-gradient(120deg, #ffffff, #bfbfbf);
  --warn: #e8c46a; --danger: #f08a8a; --up: #b8e6c0; --down: #f0bcbc;
  --text: #f4f4f4; --text-dim: #b4b4b4; --text-fade: #8c8c8c;
  --on-accent: #000000;
  --hud-shadow: 0 0 22px rgba(255, 255, 255, 0.07), inset 0 0 12px rgba(255, 255, 255, 0.05);
  --hud-shadow-strong: 0 8px 40px rgba(0,0,0,0.8), 0 0 22px rgba(255, 255, 255, 0.14);
}

/* r28 — Gradient "futuristic" themes. --panel stays a SOLID colour (it feeds
   color-mix() in many places); the gradient feel comes from --panel-grad (applied
   only as a background), --accent-grad chrome, and the 3D gradient sky. */
body[data-theme="aurora"] {
  --bg: #081726; --bg-soft: rgba(12, 32, 52, 0.6);
  --panel: rgba(11, 30, 50, 0.80); --panel-strong: rgba(12, 34, 56, 0.94); --panel-glass: rgba(14, 38, 60, 0.5);
  --panel-grad: linear-gradient(160deg, rgba(16,46,74,0.82), rgba(8,20,36,0.9));
  --line: rgba(56, 232, 255, 0.20); --line-strong: rgba(56, 232, 255, 0.46);
  --accent: #38e8ff; --accent2: #4af2c0; --accent-grad: linear-gradient(120deg, #38e8ff, #4af2c0);
  --warn: #fbbf24; --danger: #fb7185; --up: #4af2c0; --down: #fb7185;
  --text: #e8fbff; --text-dim: #8fc4d8; --text-fade: #7fb0c4;
  --hud-shadow: 0 8px 32px rgba(0,0,0,0.42), 0 0 22px rgba(56,232,255,0.18);
  --hud-shadow-strong: 0 18px 54px rgba(0,0,0,0.55), 0 0 30px rgba(56,232,255,0.3);
}
body[data-theme="nebula"] {
  --bg: #140a26; --bg-soft: rgba(36, 18, 60, 0.6);
  --panel: rgba(34, 18, 58, 0.82); --panel-strong: rgba(38, 20, 64, 0.95); --panel-glass: rgba(40, 20, 66, 0.5);
  --panel-grad: linear-gradient(160deg, rgba(52,26,86,0.84), rgba(20,12,38,0.92));
  --line: rgba(192, 132, 252, 0.22); --line-strong: rgba(192, 132, 252, 0.48);
  --accent: #c084fc; --accent2: #ff7ad0; --accent-grad: linear-gradient(120deg, #c084fc, #ff7ad0);
  --warn: #fbbf24; --danger: #fb7185; --up: #34d399; --down: #fb7185;
  --text: #f4ecff; --text-dim: #b79fd8; --text-fade: #a48fc8;
  --hud-shadow: 0 8px 32px rgba(0,0,0,0.42), 0 0 22px rgba(192,132,252,0.2);
  --hud-shadow-strong: 0 18px 54px rgba(0,0,0,0.55), 0 0 30px rgba(192,132,252,0.32);
}
body[data-theme="carbon"] {              /* r95 — CRIMSON NOIR: red on black */
  --bg: #0b0607; --bg-soft: #160a0c;
  --panel: rgba(28, 16, 18, 0.84); --panel-strong: rgba(34, 18, 20, 0.96); --panel-glass: rgba(28, 16, 18, 0.58);
  --line: rgba(239, 68, 68, 0.22); --line-strong: rgba(239, 68, 68, 0.50);
  --accent: #ef4444; --accent2: #f87171; --accent-grad: linear-gradient(120deg, #ef4444, #f87171);
  --warn: #f2b04e; --danger: #ff7a7a; --up: #5ec98e; --down: #ff7a7a;
  --text: #f7ecec; --text-dim: #d2a8a8; --text-fade: #b58a8a;
  --on-accent: #2a0608;   /* r216 (audit MED, WCAG AA) — white-on-#ef4444 was 3.76:1 (fail); this deep ink is 4.95:1 / 6.73:1 across the gradient (matches blossom/seafoam dark-on-accent) */
  --hud-shadow: 0 0 22px rgba(239, 68, 68, 0.22), inset 0 0 12px rgba(239, 68, 68, 0.10);
  --hud-shadow-strong: 0 8px 40px rgba(0,0,0,0.74), 0 0 26px rgba(239, 68, 68, 0.30);
}
/* r34 — subtle pastel premium gradients (softer, gentle, high-legibility) */
body[data-theme="blossom"] {             /* r95 — ROSE QUARTZ: pink on charcoal */
  --bg: #18141a; --bg-soft: #241d28;
  --panel: rgba(40, 32, 44, 0.84); --panel-strong: rgba(46, 36, 50, 0.96); --panel-glass: rgba(40, 32, 44, 0.58);
  --line: rgba(246, 166, 207, 0.22); --line-strong: rgba(246, 166, 207, 0.48);
  --accent: #f6a6cf; --accent2: #ec7bb4; --accent-grad: linear-gradient(120deg, #f6a6cf, #ec7bb4);
  --warn: #f2c14e; --danger: #f07a8a; --up: #6ee0b0; --down: #f07a8a;
  --text: #fbeef6; --text-dim: #d6b6cc; --text-fade: #bf9bb5;
  --on-accent: #2a1424;
  --hud-shadow: 0 0 22px rgba(246, 166, 207, 0.22), inset 0 0 12px rgba(246, 166, 207, 0.10);
  --hud-shadow-strong: 0 8px 40px rgba(0,0,0,0.64), 0 0 26px rgba(246, 166, 207, 0.28);
}
body[data-theme="seafoam"] {             /* r95 — SCARLET PAPER: red on white (light) */
  --bg: #ffffff; --bg-soft: #fbf0f0;
  --panel: rgba(255, 255, 255, 0.74); --panel-strong: rgba(255, 255, 255, 0.93); --panel-glass: rgba(255, 255, 255, 0.50);
  --line: rgba(220, 38, 38, 0.16); --line-strong: rgba(220, 38, 38, 0.40);
  --accent: #dc2626; --accent2: #ef4444; --accent-grad: linear-gradient(120deg, #c81e1e, #dc2626);   /* r218 (audit MED, WCAG AA) — the old grad ended at #ef4444 where white = 3.76:1 (fail), and NO single ink clears the original gradient; deepen the scarlet so white passes across the whole CTA (white = 5.7:1 / 4.8:1). Solid --accent #dc2626 (face-tabs) already passes at 4.8:1. */
  --warn: #b45309; --danger: #b91c1c; --up: #15803d; --down: #b91c1c;
  --text: #1f1518; --text-dim: #5a4448; --text-fade: #7a5e62;
  --on-accent: #ffffff;
  --hud-shadow: 0 8px 30px rgba(120,20,20,0.10), inset 0 1px 0 rgba(255,255,255,0.70);
  --hud-shadow-strong: 0 18px 50px rgba(120,20,20,0.16), inset 0 1px 0 rgba(255,255,255,0.80);
}
/* r60 — Natural Light: soft warm daylight, low eye-strain, dark legible ink (gets body.rm-light) */
body[data-theme="daylight"] {            /* r95 — SKY MINIMAL: light blue on white (light) */
  --bg: #ffffff; --bg-soft: #eef3fb;
  --panel: rgba(255, 255, 255, 0.74); --panel-strong: rgba(255, 255, 255, 0.93); --panel-glass: rgba(255, 255, 255, 0.50);
  --line: rgba(37, 99, 235, 0.16); --line-strong: rgba(37, 99, 235, 0.40);
  --accent: #2563eb; --accent2: #3b82f6; --accent-grad: linear-gradient(120deg, #2563eb, #3b82f6);
  --warn: #b45309; --danger: #dc2626; --up: #059669; --down: #dc2626;
  --text: #15233b; --text-dim: #45566f; --text-fade: #66758c;
  --on-accent: #ffffff;
  --hud-shadow: 0 8px 30px rgba(20,40,80,0.10), inset 0 1px 0 rgba(255,255,255,0.70);
  --hud-shadow-strong: 0 18px 50px rgba(20,40,80,0.16), inset 0 1px 0 rgba(255,255,255,0.80);
}
/* r60 — Infinite Void: near-black depth, cool ice edge-illumination */
body[data-theme="void"] {
  --bg: #040406; --bg-soft: #0a0a12;
  --panel: rgba(14, 16, 26, 0.70); --panel-strong: rgba(16, 18, 30, 0.92); --panel-glass: rgba(14, 16, 26, 0.50);
  --line: rgba(122, 162, 255, 0.18); --line-strong: rgba(122, 162, 255, 0.46);
  --accent: #7aa2ff; --accent2: #aec3ff; --warn: #fbbf24; --danger: #fb7185;
  --up: #34d399; --down: #fb7185;
  --text: #eef2ff; --text-dim: #9aa6c8; --text-fade: #8693b5;
  --hud-shadow: 0 0 26px rgba(122,162,255,0.22), inset 0 0 12px rgba(122,162,255,0.08);
  --hud-shadow-strong: 0 10px 44px rgba(0,0,0,0.78), 0 0 30px rgba(122,162,255,0.30);
}
/* r60 — Blueprint: technical engineering studio, luminous grid, deep navy */
body[data-theme="blueprint"] {
  --bg: #0a1a2f; --bg-soft: #0e2440;
  --panel: rgba(13, 38, 64, 0.74); --panel-strong: rgba(15, 44, 74, 0.92); --panel-glass: rgba(13, 38, 64, 0.56);
  --line: rgba(125, 211, 252, 0.26); --line-strong: rgba(125, 211, 252, 0.52);
  --accent: #7dd3fc; --accent2: #38bdf8; --warn: #fcd34d; --danger: #fb7185;
  --up: #5eead4; --down: #fb7185;
  --text: #e3f2ff; --text-dim: #9bc2dd; --text-fade: #86afcb;
  --hud-shadow: 0 0 24px rgba(125,211,252,0.24), inset 0 0 12px rgba(125,211,252,0.10);
  --hud-shadow-strong: 0 8px 40px rgba(0,0,0,0.60), 0 0 28px rgba(125,211,252,0.34);
}
/* r28/r34 — gradient accents on the most-visible chrome (gradient themes only) */
body[data-theme="aurora"] .rm-btn.primary, body[data-theme="nebula"] .rm-btn.primary, body[data-theme="carbon"] .rm-btn.primary,
body[data-theme="blossom"] .rm-btn.primary, body[data-theme="seafoam"] .rm-btn.primary { background: var(--accent-grad); border: none; color: var(--on-accent); }   /* r94 — tokenised button ink */
/* r95 — removed the gradient-panel rule (panels are solid now; --panel-grad is no longer defined,
   so this rule would blank the panel background on the affected themes). */
body[data-theme="aurora"] .rm-brand-name b, body[data-theme="nebula"] .rm-brand-name b, body[data-theme="carbon"] .rm-brand-name b, body[data-theme="blossom"] .rm-brand-name b, body[data-theme="seafoam"] .rm-brand-name b { background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
body[data-theme="aurora"] .rm-dock-btn.active, body[data-theme="nebula"] .rm-dock-btn.active, body[data-theme="carbon"] .rm-dock-btn.active, body[data-theme="blossom"] .rm-dock-btn.active, body[data-theme="seafoam"] .rm-dock-btn.active { background: var(--accent-grad); color: var(--on-accent); }   /* r94 — tokenised */

* { box-sizing: border-box; }
/* r79 — global safety net: the [hidden] attribute must ALWAYS win, even over a
   component class that sets display:flex/grid/block. Without this, any popup hidden
   via `el.hidden = true` but styled with an explicit display stays visible after
   Close (root cause of the AI Hub remaining open — .rm-ai set display:flex with no
   per-component [hidden] override). One rule fixes the whole class + prevents
   recurrence for every future dialog; supersedes the scattered per-component rules. */
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; height: 100%; background: var(--bg); color: var(--text); }
body {
  /* r53 — premium UI typeface: Manrope (geometric, calm, enterprise) over Inter fallback */
  font-family: "Manrope", "Inter", -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
  overflow: hidden;
  background:
    radial-gradient(1100px 700px at 50% 110%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%),
    radial-gradient(900px 600px at 0% 0%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 70%),
    var(--bg);
  transition: background 0.4s ease;
}
button { font-family: inherit; cursor: pointer; }
kbd { font-family: "JetBrains Mono", ui-monospace, Menlo, monospace; font-size: 11px;
      background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent);
      padding: 2px 6px; border-radius: 4px; border: 1px solid var(--line-strong); }

/* === Room canvas === */
#rmCanvasHolder { position: fixed; inset: 0; z-index: 1; }
#rmCanvasHolder canvas { display: block; width: 100%; height: 100%; cursor: grab; }
#rmCanvasHolder canvas:active { cursor: grabbing; }
body.rm-rearranging #rmCanvasHolder canvas { cursor: move; }

/* === Top header === */
.rm-header {
  position: fixed; top: 14px; left: 14px; right: 14px;
  height: 52px;
  z-index: 50;
  display: flex; align-items: center; gap: 8px;
  padding: 0 14px;
  background: linear-gradient(180deg, var(--panel) 0%, var(--panel-glass) 100%);
  border: 1px solid var(--line);
  border-radius: 10px;
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  box-shadow: var(--hud-shadow);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.rm-brand { display: flex; align-items: center; gap: 9px; padding-right: 12px; border-right: 1px solid var(--line); margin-right: 4px; }
/* r223 — official BeginThings "BT→ begin things" lockup (exact brand SVG, two ink variants toggled by theme) + ROOMS wordmark */
.rm-brand-logo { height: 30px; width: auto; display: block; flex: 0 0 auto; }
.rm-brand-logo--blk { display: none; }                 /* dark themes (default) → show the white-ink logo */
body.rm-light .rm-brand-logo--wht { display: none; }   /* light themes → hide white-ink, */
body.rm-light .rm-brand-logo--blk { display: block; }  /*                show black-ink logo */
.rm-brand-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent), 0 0 22px color-mix(in srgb, var(--accent) 50%, transparent);
  animation: rmPulse 2.4s ease-in-out infinite;
}
@keyframes rmPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.55; transform: scale(0.85); } }
.rm-brand-name { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 13px; letter-spacing: 0.18em; color: var(--text); }
/* r31 — premium gradient wordmark on every theme (graceful solid fallback) */
.rm-brand-name b {
  color: var(--accent); font-weight: 700;
  background: var(--accent-grad, linear-gradient(115deg, var(--accent), var(--accent2, var(--accent))));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.rm-plan-badge {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px; letter-spacing: 0.16em;
  padding: 3px 7px; border-radius: 4px;
  border: 1px solid var(--line-strong);
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}
.rm-plan-badge[data-plan="pro"],
.rm-plan-badge[data-plan="trial"] {
  color: var(--warn); border-color: color-mix(in srgb, var(--warn) 55%, transparent);
  background: color-mix(in srgb, var(--warn) 9%, transparent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--warn) 32%, transparent);
}
.rm-plan-badge[data-plan="ended"] {
  color: var(--danger); border-color: color-mix(in srgb, var(--danger) 55%, transparent);
  background: color-mix(in srgb, var(--danger) 9%, transparent);
}
.rm-title {
  font-size: 15px; font-weight: 600;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  outline: none;
  min-width: 100px;
  /* r87 (M-css1) — cap the editable room title so a long name can't bleed past the header's
     rounded edge on wide screens; ellipsis when idle, expand + clip on focus for editing. */
  max-width: clamp(140px, 22vw, 340px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rm-title:focus { border-color: var(--line-strong); background: color-mix(in srgb, var(--text) 8%, transparent); max-width: 60vw; text-overflow: clip; overflow-x: auto; overflow-y: hidden; }   /* r89/r98 — theme-aware focus wash (was hardcoded black, invisible/wrong on light themes) */
.rm-saved { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.12em; color: var(--text-dim); padding: 4px 8px; border-radius: 4px; }
.rm-saved.rm-saved-ok { color: var(--accent); }
.rm-saved.rm-saved-err { color: var(--danger); font-weight: 700; }   /* r23 — surfaced when a save fails (quota) */
.rm-spacer { flex: 1; }
.rm-count { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.10em; color: var(--text-dim); margin-right: 6px; }
.rm-btn, .rm-iconbtn {
  font-family: inherit;
  background: color-mix(in srgb, var(--panel) 60%, transparent);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 13px; font-weight: 500;
  transition: all 0.15s ease;
}
.rm-iconbtn { padding: 7px 10px; font-size: 14px; }
.rm-btn:hover, .rm-iconbtn:hover {
  border-color: var(--accent); color: var(--accent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 30%, transparent);
  transform: translateY(-1px);
}
.rm-iconbtn.active {
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  border-color: var(--accent); color: var(--accent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 40%, transparent);
}
.rm-btn.primary {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 22%, transparent) 0%, color-mix(in srgb, var(--accent) 8%, transparent) 100%);
  border-color: var(--accent); color: var(--accent); font-weight: 600;
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 30%, transparent), inset 0 0 8px color-mix(in srgb, var(--accent) 10%, transparent);
}
.rm-btn.primary:hover {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 32%, transparent) 0%, color-mix(in srgb, var(--accent) 18%, transparent) 100%);
  color: var(--accent); box-shadow: 0 0 24px var(--accent);   /* r98 — was #fff → unreadable white-on-pale on the light themes; match the accent ink like the base/non-primary hover */
}

.rm-hbtn-wrap { position: relative; display: inline-flex; align-items: center; gap: 4px; }

/* === HUD ON/OFF dropdown button === */
.rm-hud-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: color-mix(in srgb, var(--panel) 60%, transparent);
  color: var(--text-dim);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 7px 12px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; letter-spacing: 0.10em;
  transition: all 0.15s ease;
}
.rm-hud-btn b { font-weight: 700; }
.rm-hud-btn.active { color: var(--accent); border-color: var(--accent); box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 30%, transparent); }
.rm-led { width: 8px; height: 8px; border-radius: 50%; background: var(--text-fade); transition: background 0.2s ease, box-shadow 0.2s ease; }
.rm-led.on  { background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.rm-led.off { background: var(--text-fade); box-shadow: none; }

/* Generic popover (theme picker) */
.rm-pop {
  position: absolute;
  top: calc(100% + 8px); right: 0;
  z-index: 60;
  padding: 8px;
  background: var(--panel-strong);
  border: 1px solid var(--accent);
  border-radius: 8px;
  box-shadow: var(--hud-shadow-strong);
  display: flex; flex-direction: column; gap: 4px;
  min-width: 200px;
}
.rm-pop.hidden { display: none; }
.rm-theme-chip {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  background: transparent; border: 1px solid transparent;
  color: var(--text); border-radius: 6px;
  font-family: inherit; font-size: 13px;
  cursor: pointer; text-align: left;
  transition: all 0.12s ease;
}
.rm-theme-chip:hover { border-color: var(--line-strong); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.rm-theme-chip.active { border-color: var(--accent); color: var(--accent); }
.rm-theme-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); }

/* HUD dropdown contents */
.rm-hud-pop { min-width: 260px; padding: 10px; }
.rm-hud-master {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid var(--line-strong);
  color: var(--accent);
  border-radius: 6px;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px; letter-spacing: 0.12em;
  cursor: pointer;
  font-weight: 600;
}
.rm-hud-master:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.rm-hud-master .rm-hud-rowstate { margin-left: auto; font-weight: 700; }
.rm-hud-sep { border-top: 1px solid var(--line); margin: 6px 0; }
.rm-hud-row {
  display: flex; align-items: center; gap: 8px;
  width: 100%; text-align: left;          /* r21 — now a <button>; reset native chrome */
  background: transparent; border: none; font-family: inherit;
  padding: 6px 10px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 12px;
  color: var(--text-dim);
  transition: all 0.12s ease;
  user-select: none;
}
.rm-hud-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.rm-hud-row:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); color: var(--text); }
.rm-hud-row.on  { color: var(--text); }
.rm-hud-row.on .rm-hud-rowlabel { color: var(--text); }
.rm-hud-rowdot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-fade); }
.rm-hud-rowdot.on { background: var(--accent); box-shadow: 0 0 6px var(--accent); }
.rm-hud-rowlabel { flex: 1; }
.rm-hud-rowstate {
  font-family: "JetBrains Mono", monospace;
  font-size: 9px; letter-spacing: 0.18em;
  color: var(--text-fade);
}
.rm-hud-row.on .rm-hud-rowstate { color: var(--accent); }
.rm-hud-reset {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--text-dim);
  border-radius: 5px;
  padding: 7px 10px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px; letter-spacing: 0.12em;
  cursor: pointer;
}
.rm-hud-reset:hover { color: var(--accent); border-color: var(--accent); }

/* === HUD widgets === */
.rm-w {
  background: var(--panel-glass);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  min-width: 180px;   /* r68→r70 — thinner rails (210→194→180); content stays bleed-safe via max-width:100% on children + ellipsis chips */
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: 0 8px 30px rgba(0,0,0,0.42), inset 0 1px 0 color-mix(in srgb, #fff 6%, transparent), 0 0 16px color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--text);
  font-size: 13.5px;   /* r39 — larger, more readable widget body text */
  line-height: 1.45;
  position: relative;
  flex-shrink: 0;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, opacity 0.25s ease;
  animation: rmWidgetIn 0.45s ease-out;
}
.rm-w:hover { border-color: var(--line-strong); }
.rm-w.rm-w-dragging { opacity: 0.7; transform: scale(0.98); box-shadow: 0 16px 40px rgba(0,0,0,0.7), 0 0 24px var(--accent); }
.rm-w.rm-w-resizing { box-shadow: 0 0 0 1px var(--accent), 0 0 18px color-mix(in srgb, var(--accent) 40%, transparent); }
.rm-w.rm-w-off { display: none; }
body.rm-hud-off .rm-w, body.rm-hud-off .rm-dock { display: none; }
body.rm-in-editor .rm-w, body.rm-in-editor .rm-dock, body.rm-in-editor .rm-minimap { display: none; }
@keyframes rmWidgetIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.rm-w-title {
  display: flex; align-items: center; gap: 6px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; letter-spacing: 0.14em;   /* r39 readable headings; r70 0.16→0.14 so labels stay single-line on the thinner rail */
  white-space: nowrap;   /* r70 — widget titles are short labels: never wrap (the loc chip ellipsis + overflow:hidden keep them in bounds) */
  font-weight: 600;
  color: var(--text-dim);
  margin-bottom: 8px;   /* r68 — tighter vertical rhythm (was 10) */
  cursor: move;
  user-select: none;
  touch-action: none;   /* r175 (audit MED) — the header is a setPointerCapture drag handle; without this the dock's vertical scroll claims the touch gesture on coarse-pointer tablets and the drag never starts */
}
.rm-w-draghandle { cursor: move; touch-action: none; }
.rm-w-title > .rm-w-toggle { margin-left: auto; }
.rm-w-toggle {
  background: transparent; border: none; color: var(--text-fade);
  font-size: 12px; padding: 0 4px; cursor: pointer;
}
.rm-w-toggle:hover { color: var(--accent); }
/* r68 — the location/source/state chip must SHRINK (ellipsis) so a long value
   (e.g. a news feed URL) can't push the title's buttons past the rounded edge at
   the tighter widget width. Buttons stay fixed so only this chip gives way. */
.rm-w-loc { color: var(--accent); font-weight: 600; font-size: 10.5px; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rm-w-title > button { flex: 0 0 auto; }

/* Widget resize handle */
.rm-w-resize {
  position: absolute; right: 4px; bottom: 4px;
  width: 16px; height: 16px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-fade);
  font-size: 12px;
  cursor: nwse-resize;
  user-select: none;
  touch-action: none;   /* r175 (audit MED) — same as .rm-w-resize-s: let setPointerCapture own the corner-resize gesture on touch instead of losing it to the dock's vertical scroll */
  border-radius: 3px;
  transition: color 0.15s ease, background 0.15s ease;
}
.rm-w-resize:hover { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }

/* r155 — dedicated LENGTH (height) resize strip along the bottom edge. Sits in the widget's bottom padding, left of the
   corner grip; a faint centre bar appears on hover so it reads as a grabbable affordance. right:24px clears the corner
   grip (which grows to 36px on coarse pointers — see the media rule below). */
.rm-w-resize-s {
  position: absolute; left: 8px; right: 24px; bottom: 0; height: 9px;
  cursor: ns-resize; user-select: none; touch-action: none;
  border-radius: 0 0 6px 6px;
}
.rm-w-resize-s::before {
  content: ""; position: absolute; left: 50%; bottom: 3px; transform: translateX(-50%);
  width: 26px; height: 3px; border-radius: 2px; background: var(--text-fade); opacity: 0; transition: opacity 0.15s ease;
}
.rm-w-resize-s:hover::before { opacity: 0.55; background: var(--accent); }

/* r155 — a widget the user explicitly sized taller becomes a flex column so its primary content area GROWS to fill the
   new length (instead of the inner list clipping at its 150px cap) → "accommodate the complete content". */
.rm-w-usersized { display: flex; flex-direction: column; }
.rm-w-usersized > .rm-w-title { flex: 0 0 auto; }
.rm-w-usersized .rm-w-todo-list,
.rm-w-usersized .rm-w-rem-list,
.rm-w-usersized .rm-w-mail-list,
.rm-w-usersized .rm-cal-events { max-height: none; flex: 1 1 auto; min-height: 48px; }   /* r155 (audit) — calendar's growable region is .rm-cal-events, not a list */
.rm-w-usersized .rm-w-notes,
.rm-w-usersized .rm-w-vision-box,
.rm-w-usersized .rm-w-newscards { flex: 1 1 auto; min-height: 0; }
/* r155 (audit) — list-less widgets (clock/weather/pomodoro/music) have no growable child, so a taller height would leave
   a dead void below top-packed content; centre the content vertically instead so the extra length reads intentional. */
.rm-w-usersized[data-widget="clock"],
.rm-w-usersized[data-widget="weather"],
.rm-w-usersized[data-widget="pomodoro"],
.rm-w-usersized[data-widget="music"] { justify-content: center; }

/* r155 — HOVER-DWELL PEEK (3s): gently enlarge the widget to read it. Dock-aware transform-origin so it grows INWARD
   toward the workspace (never off the screen edge); z-lift so it sits cleanly over its neighbours. Reverts via the same
   transition as everything else. */
/* r173 — POP-OUT: a 3s dwell-hover pops the widget OUT into a larger, INTERACTIVE panel (JS sets position:fixed + width +
   max-height + the dock-edge anchor; a placeholder holds the dock slot). It REVEALS the full content (the inner ~150px
   list clamps are dropped below) and the whole panel scrolls, so the user can read AND use it freely without it collapsing. */
.rm-w.rm-w-popout {
  z-index: 200;
  overflow-y: auto; overflow-x: hidden;
  border-color: var(--accent);
  box-shadow: 0 26px 72px rgba(0,0,0,0.58), 0 0 0 1px var(--accent), 0 0 46px color-mix(in srgb, var(--accent) 28%, transparent);
  transition: width 0.18s ease, max-height 0.18s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.rm-w-popout-ph { pointer-events: none; visibility: hidden; }
/* reveal the FULL content — drop the per-list ~150px caps so the popped panel shows everything (it scrolls as a whole) */
.rm-w.rm-w-popout .rm-w-todo-list,
.rm-w.rm-w-popout .rm-w-rem-list,
.rm-w.rm-w-popout .rm-w-mail-list,
.rm-w.rm-w-popout .rm-cal-events,
.rm-w.rm-w-popout .rm-w-newscards { max-height: none; }
@media (prefers-reduced-motion: reduce) { .rm-w.rm-w-popout { transition: none; } }
/* r155 (audit) — on coarse pointers the corner grip grows to 36px; pull the length strip in so it never hijacks a
   diagonal corner-resize touch. */
@media (pointer: coarse) { .rm-w-resize-s { right: 44px; } }

.rm-w-input {
  background: var(--bg-soft);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 12px;
  outline: none;
  width: 100%;
  font-family: inherit;
}
.rm-w-input:focus { border-color: var(--accent); box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 25%, transparent); }
.rm-w-empty { font-size: 11px; color: var(--text-fade); font-style: italic; padding: 6px 0; }

/* === DOCKS -- two vertical columns, no overlap, no visible scrollbar === */
.rm-dock {
  position: fixed; z-index: 9;
  display: flex; flex-direction: column; gap: 8px;
  width: var(--rm-dock-w, 200px);   /* r47 — user-adjustable dock width (drag the inner edge); r68→r70 — thinner utility rails (248→218→200) so boards dominate */
  top: 74px;        /* r75 — tighter top margin → taller board area */
  bottom: 60px;     /* r75 — nav cheat-sheet merged into the dock, so the rail can extend lower (was 90 to clear it) */
  /* r52/r65 — HUD "wall": fitWalls() caps widgets when that makes the stack fit; when there
     are simply more widgets than the wall can hold it stops capping and the dock scrolls so
     every widget shows in COMPLETE LENGTH. The scrollbar is a slim, theme-coloured bar that
     stays invisible until you hover the dock — clean wall by default, reachable when needed. */
  overflow-y: auto; overflow-x: hidden;
  scrollbar-width: thin; scrollbar-color: transparent transparent;   /* Firefox */
  padding-bottom: 4px;
}
.rm-dock:hover { scrollbar-color: color-mix(in srgb, var(--accent) 38%, transparent) transparent; }   /* Firefox — reveal on hover */
.rm-dock::-webkit-scrollbar { width: 7px; }
.rm-dock::-webkit-scrollbar-track { background: transparent; }
.rm-dock::-webkit-scrollbar-thumb { background: transparent; border-radius: 7px; border: 2px solid transparent; background-clip: padding-box; }
.rm-dock:hover::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--accent) 32%, transparent); background-clip: padding-box; }
.rm-dock:hover::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--accent) 52%, transparent); background-clip: padding-box; }
/* r52/r65 — capped widget: when fitWalls trims a widget in the mid-viewport "capping" branch,
   let the trimmed remainder SCROLL (slim, fades in on hover) instead of clipping it with
   overflow:hidden — so footer controls (e.g. a reminder/todo "add" input) are never unreachable. */
.rm-w.rm-w-fit { overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: transparent transparent; }
.rm-w.rm-w-fit:hover { scrollbar-color: color-mix(in srgb, var(--accent) 36%, transparent) transparent; }
.rm-w.rm-w-fit::-webkit-scrollbar { width: 6px; }
.rm-w.rm-w-fit::-webkit-scrollbar-thumb { background: transparent; border-radius: 6px; }
.rm-w.rm-w-fit:hover::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--accent) 32%, transparent); }
.rm-w.rm-w-fit > .rm-w-body, .rm-w.rm-w-fit .rm-w-todo-list, .rm-w.rm-w-fit .rm-w-rem-list { min-height: 0; }
.rm-dock-left  { left: 14px; }
.rm-dock-right { right: 14px; bottom: 24px; }   /* r26 — nothing sits under the right dock: reclaim full height (minimap removed) */

/* r143 — narrow-width dock clearance. The centered bottom control dock (#rmDock / .rm-dock-sticky, bottom:8px) is a
   2-ROW bar (~80px) until the hint row hides ≤760px. The rails stay VISIBLE until they hide ≤620px, so the dock can
   reach them across the whole 620–1180px band (the dock widens in free-arrange when the grid button appears, tipping a
   razor-thin gap into an outright collision — Frame button over a rail widget). r158 (audit HIGH) — the clearance was
   gated ≤980px, leaving a 981–1180px dead zone where the rails sat INSIDE the dock band. Lift the rails clear across the
   FULL band (matches the rail-width-cap breakpoint at 1180px below); zero effect ≥1181px (dock is centred clear there). */
@media (max-width: 1180px) {
  .rm-dock-left, .rm-dock-right { bottom: 96px; }
}

/* r112 — RESPONSIVE HUD: the side rails auto-resize to screen width instead of staying 200px (which
   crowded the workspace and used to vanish entirely ≤768px). The room layout reserves the LIVE dock
   rect, so a narrower rail automatically grows the 3D board area. Widgets drop their min-width so they
   fit the narrower rail; content stays bleed-safe via the existing max-width:100% on every child. The
   `width: min(var(--rm-dock-w), N)` form respects a user-dragged width up to the cap, then clamps. */
@media (max-width: 1180px) { .rm-dock { width: min(var(--rm-dock-w, 200px), 188px); } }
@media (max-width: 1024px) { .rm-dock { width: min(var(--rm-dock-w, 200px), 174px); } .rm-w { min-width: 0; } }
@media (max-width: 880px)  { .rm-dock { width: 164px; } .rm-w { min-width: 0; padding: 9px 10px; } }
/* floor at 164px — narrower than this the calendar grid / news thumbnail clip, so below 620px the rails
   hide and the 3D room takes the full width (the board framing re-fits on resize). */
@media (max-width: 620px)  { .rm-dock { display: none; } }

/* Clock */
.rm-w-clock { padding: 11px 13px; }   /* r68 — match the tighter global widget padding */
.rm-w-clock-title { margin-bottom: 4px; }
.rm-w-clock-greet { font-size: 11px; letter-spacing: 0.06em; color: var(--text-dim); margin-bottom: 2px; }   /* r26 — time-of-day greeting */

/* r26 — empty-room guidance overlay (pointer-events:none so it never blocks orbit) */
.rm-empty-room { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 8; pointer-events: none; }
.rm-empty-room.hidden { display: none; }
.rm-empty-card { pointer-events: auto; text-align: center; max-width: 420px; padding: 28px 32px; border-radius: var(--r-lg, 16px); background: var(--panel-strong, var(--panel)); border: 1px solid var(--line); box-shadow: var(--hud-shadow, 0 18px 54px rgba(0,0,0,0.45)); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.rm-empty-title { margin: 0 0 8px; font-size: 22px; font-weight: 700; color: var(--text); }
.rm-empty-sub { margin: 0 0 18px; font-size: 14px; line-height: 1.5; color: var(--text-dim); }
.rm-empty-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.rm-w-clock-time {
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
  font-size: 30px;
  letter-spacing: 0.04em;
  color: var(--accent);
  text-shadow: 0 0 14px color-mix(in srgb, var(--accent) 55%, transparent);
  line-height: 1;
}
.rm-w-clock-time .rm-colon { color: var(--text-dim); margin: 0 2px; animation: rmBlink 1.2s steps(2) infinite; }
.rm-w-clock-time .rm-sec   { font-size: 13px; color: var(--text-dim); margin-left: 6px; letter-spacing: 0.04em; }
@keyframes rmBlink { 50% { opacity: 0.2; } }
.rm-w-clock-date {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px; letter-spacing: 0.10em;
  color: var(--text-dim);
  margin-top: 4px;
}

/* Weather + Stock */
.rm-w-bigrow { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.rm-w-icon { font-size: 28px; line-height: 1; color: var(--accent); text-shadow: 0 0 12px var(--accent); }
.rm-w-stats { display: flex; flex-direction: column; }
.rm-w-temp {
  font-family: "JetBrains Mono", monospace;
  font-size: 24px; font-weight: 700;
  color: var(--accent);
  text-shadow: 0 0 10px color-mix(in srgb, var(--accent) 45%, transparent);
  line-height: 1.05;
}
.rm-w-desc { font-size: 12px; color: var(--text-dim); text-transform: capitalize; margin-top: 2px; }
.rm-w-desc[data-dir="up"]   { color: var(--up); }
.rm-w-desc[data-dir="down"] { color: var(--down); }
.rm-w-link {
  background: transparent; border: 1px solid var(--line);
  color: var(--text-dim); padding: 2px 8px;
  font-size: 10px; border-radius: 4px; cursor: pointer; margin-top: 8px;
}
.rm-w-link:hover { color: var(--accent); border-color: var(--accent); }
/* r70 — title-row controls (news ⌖ source-link, reminders ⤓ics) normalised to one
   compact pill so EVERY widget header is the same height → balanced, symmetric rail.
   Scoped to direct children of the title so standalone .rm-w-link uses are unaffected. */
.rm-w-title > .rm-w-link, .rm-w-title > .rm-w-ics {
  margin: 0; height: 17px; padding: 0 6px; font-size: 9.5px; line-height: 1;
  display: inline-flex; align-items: center; gap: 3px;
  border: 1px solid var(--line); border-radius: 4px;
  background: transparent; color: var(--text-dim); cursor: pointer;
  white-space: nowrap; flex: 0 0 auto;
}
.rm-w-title > .rm-w-link:hover, .rm-w-title > .rm-w-ics:hover { color: var(--accent); border-color: var(--accent); }

/* Calendar (compact) */
.rm-cal-month {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; letter-spacing: 0.06em;
  color: var(--text);
  margin-bottom: 4px; text-align: center;
}
.rm-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; font-family: "JetBrains Mono", monospace; }
.rm-cal-dow { font-size: 8px; color: var(--text-fade); text-align: center; padding: 2px 0; letter-spacing: 0.08em; }
.rm-cal-d { text-align: center; padding: 2px 0; font-size: 10px; color: var(--text-dim); border-radius: 3px; }
/* r166 (audit LOW) — adjacent-month dates are real readable numbers, so WCAG 1.4.3 (4.5:1) applies. The old
   text-fade @0.40 computed ~2.1:1 (dark) and the light override ~3.0:1 — both failing AA. Use the dimmer token at a
   higher opacity (~4.6:1 in both themes) so they stay clearly faded vs the current month but clear AA. */
.rm-cal-fade { color: var(--text-dim); opacity: 0.62; }
body.rm-light .rm-cal-fade { color: var(--text-dim); opacity: 0.78; }
.rm-cal-today {
  background: var(--accent); color: var(--bg);
  font-weight: 700;
  box-shadow: 0 0 6px color-mix(in srgb, var(--accent) 70%, transparent);
}
/* r20 — days that hold a Google Calendar event get an under-dot */
.rm-cal-d.rm-cal-hasev { position: relative; }
.rm-cal-d.rm-cal-hasev::after {
  content: ""; position: absolute; left: 50%; bottom: 1px; transform: translateX(-50%);
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 4px var(--accent);
}
.rm-cal-today.rm-cal-hasev::after { background: var(--bg); box-shadow: none; }

/* r20 — Google Calendar: upcoming-events list + connect/sync footer */
.rm-cal-events { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; max-height: 132px; overflow-y: auto; }
.rm-cal-ev-head { font-size: 8px; letter-spacing: 0.18em; color: var(--text-fade); margin: 2px 0 1px; }
.rm-cal-ev {
  display: flex; align-items: flex-start; gap: 7px;
  padding: 4px 5px; border-radius: var(--r-sm, 6px);
  text-decoration: none; color: inherit;
  transition: background 0.15s ease;
}
a.rm-cal-ev:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.rm-cal-ev-dot { flex: none; width: 6px; height: 6px; margin-top: 4px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 6px color-mix(in srgb, var(--accent) 60%, transparent); }
.rm-cal-ev-body { min-width: 0; }
.rm-cal-ev-title { font-size: 11px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-cal-ev-when { font-size: 9px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-cal-foot { margin-top: 8px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.rm-cal-btn {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px; letter-spacing: 0.02em;
  padding: 5px 9px; border-radius: var(--r-sm, 6px);
  border: 1px solid var(--line-strong, var(--line));
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--text); cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.rm-cal-btn:hover { border-color: var(--accent); color: var(--accent); }
.rm-cal-btn-ghost { background: transparent; color: var(--text-dim); }
.rm-cal-btn-ghost:hover { color: var(--danger); border-color: var(--danger); }
.rm-cal-btn-g { background: #fff; color: #1f1f1f; border-color: #dadce0; font-weight: 600; }
.rm-cal-btn-g:hover { background: #f5f5f5; color: #1f1f1f; border-color: #d0d3d6; }
.rm-cal-g {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; border-radius: 50%;
  background: conic-gradient(from -45deg, #ea4335 0deg 90deg, #fbbc05 90deg 180deg, #34a853 180deg 270deg, #4285f4 270deg 360deg);
  color: #fff; font-weight: 800; font-size: 9px; line-height: 1;
}
.rm-cal-hint { font-size: 9px; color: var(--text-fade); letter-spacing: 0.02em; cursor: help; }

/* Todo */
.rm-w-todo-list { max-height: 150px; overflow-y: auto; margin-bottom: 6px; }   /* r26 — shared dock-list cap for balance */
.rm-w-todo-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 4px;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 8%, transparent);
  font-size: 12px;
}
.rm-w-todo-item input { accent-color: var(--accent); }
.rm-w-todo-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.rm-w-todo-item.rm-done .rm-w-todo-text { text-decoration: line-through; color: var(--text-fade); }
.rm-w-todo-del { background: transparent; border: none; color: var(--text-fade); font-size: 16px; padding: 0 4px; cursor: pointer; }
.rm-w-todo-del:hover { color: var(--danger); }
/* r20 — priority pill on todo items + colored left edge */
.rm-w-todo-pri {
  background: transparent; border: 1px solid transparent; border-radius: 4px;
  color: var(--text-fade); font-family: "JetBrains Mono", monospace; font-size: 10px;
  min-width: 20px; padding: 1px 4px; cursor: pointer; line-height: 1.2;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.rm-w-todo-pri:hover { color: var(--accent); border-color: var(--accent); }
.rm-w-todo-item { border-left: 2px solid transparent; padding-left: 4px; }
.rm-w-todo-item.rm-pri-low  { border-left-color: var(--accent); }
.rm-w-todo-item.rm-pri-med  { border-left-color: var(--warn, #fbbf24); }
.rm-w-todo-item.rm-pri-high { border-left-color: var(--danger, #f87171); }
.rm-w-todo-item.rm-pri-med  .rm-w-todo-pri { color: var(--warn, #fbbf24); }
.rm-w-todo-item.rm-pri-high .rm-w-todo-pri { color: var(--danger, #f87171); }

/* r20 — quick-add suggestion / quick-time chips (shared by todo + reminders) */
.rm-w-chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0; }
.rm-w-chip {
  font-family: "JetBrains Mono", monospace; font-size: 9px; letter-spacing: 0.02em;
  padding: 4px 8px; border-radius: 999px;
  border: 1px solid var(--line, rgba(255,255,255,0.12));
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  color: var(--text-dim); cursor: pointer; white-space: nowrap;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.rm-w-chip:hover { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
/* r20 — relative-time tag on a reminder ("in 2h" / "5m ago") */
.rm-w-rem-rel { margin-left: 6px; color: var(--accent); font-size: 9px; opacity: 0.85; }
.rm-w-rem-item.rm-overdue .rm-w-rem-rel { color: var(--warn, #fbbf24); }

/* r68 — Pomodoro: compact HORIZONTAL layout. A thin glowing progress ring on the
   left + a bold time/phase readout on the right + a tight full-width controls row.
   ~30% shorter than the old 118px centred disc — no wasted vertical space. */
.rm-pomo { display: flex; align-items: center; gap: 11px; margin: 1px 0 9px; }
.rm-pomo-disc {
  position: relative; flex: 0 0 54px;
  width: 54px; height: 54px;   /* r70 — slightly smaller so it fits the thinner 180px rail with margin */
  display: flex; align-items: center; justify-content: center;
}
.rm-pomo-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.rm-pomo-ring .rm-pomo-bg   { fill: none; stroke: color-mix(in srgb, var(--accent) 14%, transparent); stroke-width: 6; }
.rm-pomo-ring .rm-pomo-prog { fill: none; stroke: var(--accent); stroke-width: 6; stroke-linecap: round; transition: stroke-dashoffset 1s linear, stroke 0.3s ease; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 70%, transparent)); }
.rm-pomo-disc[data-phase="break"] .rm-pomo-prog { stroke: var(--warn); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--warn) 70%, transparent)); }
.rm-pomo-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); opacity: 0.45; transition: opacity 0.3s ease; }
.rm-pomo-disc[data-phase="break"] .rm-pomo-dot { background: var(--warn); box-shadow: 0 0 8px var(--warn); }
.rm-pomo-disc.rm-pomo-running .rm-pomo-dot { opacity: 1; animation: rmPomoPulse 1.4s ease-in-out infinite; }
@keyframes rmPomoPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(0.5); opacity: 0.4; } }
.rm-pomo-readout { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.rm-pomo-time {
  font-family: "JetBrains Mono", monospace; font-weight: 700;
  font-size: 26px; line-height: 1.04; letter-spacing: 0.01em;
  color: var(--accent); text-shadow: 0 0 12px color-mix(in srgb, var(--accent) 42%, transparent);
}
.rm-pomo-label { font-family: "JetBrains Mono", monospace; font-size: 9px; letter-spacing: 0.22em; color: var(--text-dim); margin-top: 3px; }
.rm-pomo-label[data-phase="break"] { color: var(--warn); }
.rm-pomo-controls { display: flex; gap: 5px; }
.rm-pomo-controls .rm-bd-btn { flex: 1 1 0; min-width: 0; padding: 6px 4px; font-size: 10.5px; }
/* r166 (audit/visual sweep) — at tablet/narrow widths the rail (and thus the Pomodoro widget) is ~151px, where the 26px
   timer + the "50/10" preset overflowed ~6px and the last digit clipped ("50:0" / "50/1"). Shrink the timer + tighten the
   control padding on narrow viewports only (desktop keeps 26px). */
@media (max-width: 820px) {
  .rm-pomo-time { font-size: 22px; }
  .rm-pomo-controls .rm-bd-btn { padding: 6px 2px; font-size: 10px; }
}

/* Notes -- widget flexes vertically so the textarea fills the resized widget */
.rm-w[data-widget="notes"] {
  display: flex; flex-direction: column;
}
.rm-w[data-widget="notes"] .rm-w-notes {
  flex: 1 1 auto;
  min-height: 60px;
  height: auto;
}
.rm-w-notes {
  width: 100%;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px;
  color: var(--text);
  font-family: inherit; font-size: 12px;
  resize: none;     /* widget itself is resizable; no double-handle */
  outline: none;
  display: block;
}
.rm-w-notes:focus { border-color: var(--accent); box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 25%, transparent); }

/* r21 — Vision & Mission ("north star"): the most prominent widget, bold + large */
.rm-w[data-widget="vision"] {
  display: flex; flex-direction: column;   /* r23 — so the box fills a resized-taller widget (no dead gap) */
  border-color: color-mix(in srgb, var(--accent) 38%, var(--line));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 10%, transparent), transparent 60%),
    var(--panel);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 14%, transparent),
              0 8px 26px rgba(0,0,0,0.28);
}
.rm-w[data-widget="vision"] .rm-w-title {
  color: var(--accent);
  letter-spacing: 0.04em;   /* r70 — the longest title ("✦ VISION & MISSION") fits one line on the thinner rail */
  text-shadow: 0 0 10px color-mix(in srgb, var(--accent) 35%, transparent);
}
.rm-w-vision-box {
  width: 100%;
  min-height: 96px;   /* r23 — flex:1 1 auto now fills a resized-taller widget (parent is flex column) */
  height: auto;
  flex: 1 1 auto;
  background: transparent;
  border: none;
  border-left: 3px solid color-mix(in srgb, var(--accent) 65%, transparent);
  border-radius: 0 6px 6px 0;
  padding: 8px 10px 8px 12px;
  margin-top: 2px;
  color: var(--text);
  font-family: inherit;
  font-size: 15px;          /* increased size per request */
  font-weight: 700;          /* bold per request */
  line-height: 1.45;
  letter-spacing: 0.005em;
  resize: none;
  outline: none;
  display: block;
}
.rm-w-vision-box::placeholder { color: var(--text-fade); font-weight: 500; font-size: 13px; line-height: 1.4; }
.rm-w-vision-box:focus { border-left-color: var(--accent); }

/* Reminders */
.rm-w-rem-list { max-height: 150px; overflow-y: auto; margin-bottom: 6px; }   /* r26 — shared dock-list cap for balance */
.rm-w-rem-item {
  display: flex; gap: 8px; align-items: center;
  padding: 6px 4px;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 8%, transparent);
  font-size: 12px;
}
.rm-w-rem-item input { accent-color: var(--accent); }
.rm-w-rem-body { flex: 1; min-width: 0; }
.rm-w-rem-txt { color: var(--text); }
.rm-w-rem-when-label { font-family: "JetBrains Mono", monospace; font-size: 10px; color: var(--text-fade); }
.rm-w-rem-item.rm-overdue .rm-w-rem-when-label { color: var(--warn); }
.rm-w-rem-item.rm-done .rm-w-rem-txt { text-decoration: line-through; color: var(--text-fade); }
/* r21 — "Add to Google Calendar" per reminder (Workspace handoff) */
/* r23 — square, consistent hit areas so the G and × aren't cramped mis-click neighbours */
.rm-w-rem-gcal { background: transparent; border: none; padding: 0; cursor: pointer; min-width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; opacity: 0.85; transition: opacity 0.15s ease, transform 0.15s ease; }
.rm-w-rem-gcal:hover { opacity: 1; transform: scale(1.1); }
.rm-w-rem-del { background: transparent; border: none; color: var(--text-fade); font-size: 16px; cursor: pointer; min-width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; padding: 0; margin-left: 2px; }
.rm-w-rem-del:hover { color: var(--danger); }
/* r21 — datetime-local has a large intrinsic min-width; give it its own full
   row (with min-width:0) so it + the Add button never overflow a narrow widget. */
.rm-w-rem-form { display: grid; grid-template-columns: 1fr auto; gap: 4px; min-width: 0; }
.rm-w-rem-form .rm-w-rem-text { grid-column: 1 / -1; min-width: 0; }
.rm-w-rem-form .rm-w-rem-when { grid-column: 1 / -1; min-width: 0; font-family: "JetBrains Mono", monospace; font-size: 11px; padding: 4px 6px; }
.rm-w-rem-form .rm-w-rem-add { grid-column: 1 / -1; min-width: 0; }
.rm-w-rem-add { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); cursor: pointer; font-weight: 600; padding: 4px 6px; font-size: 11px; }
.rm-w-rem-add:hover { background: color-mix(in srgb, var(--accent) 24%, transparent); }

/* === News (compact vertical card) === */
.rm-w-news { padding: 10px; }
.rm-w-newscards { min-height: 0; position: relative; }
.rm-w-newscard {
  display: flex; flex-direction: column; gap: 6px;
  text-decoration: none;
  color: var(--text);
  border-radius: 8px;
  overflow: hidden;
  animation: rmFade 0.4s ease;
}
@keyframes rmFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.rm-w-newscard-img {
  width: 100%; height: 90px;
  background-size: cover; background-position: center;
  border-radius: 6px;
  border: 1px solid var(--line);
}
.rm-w-newscard-noimg {
  width: 100%; height: 90px;
  display: flex; align-items: center; justify-content: center;
  border: 1px dashed var(--line);
  border-radius: 6px;
  color: var(--text-fade);
  font-size: 28px;
}
.rm-w-newscard-body { display: flex; flex-direction: column; min-width: 0; }
.rm-w-newscard-title {
  font-size: 12px; font-weight: 500; line-height: 1.35;
  color: var(--text);
  overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.rm-w-newscard:hover .rm-w-newscard-title { color: var(--accent); }
.rm-w-newscard-meta {
  font-family: "JetBrains Mono", monospace;
  font-size: 9px; letter-spacing: 0.10em;
  color: var(--text-fade);
  margin-top: 2px;
}
.rm-w-newscard-loading { padding: 40px 4px; color: var(--text-fade); font-size: 11px; text-align: center; }
.rm-w-newsdots { display: flex; gap: 3px; justify-content: center; margin-top: 6px; flex-wrap: wrap; }
.rm-w-newsdot { width: 5px; height: 5px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 25%, transparent); transition: all 0.3s ease; }
.rm-w-newsdot.active { background: var(--accent); box-shadow: 0 0 6px var(--accent); transform: scale(1.3); }

/* === Minimap (small, bottom-centre below nav) === */
.rm-minimap {
  position: fixed; bottom: 14px; left: 50%; transform: translateX(-50%);
  z-index: 9;
  padding: 8px 8px 4px;
  background: var(--panel-glass);
  border: 1px solid var(--line);
  border-radius: 8px;
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  box-shadow: var(--hud-shadow);
}
.rm-minimap canvas { display: block; border-radius: 4px; }
.rm-minimap-label {
  margin-top: 4px; text-align: center;
  font-family: "JetBrains Mono", monospace;
  font-size: 8px; letter-spacing: 0.22em;
  color: var(--text-dim);
}

/* Tooltip + nav hint */
.rm-tip {
  position: fixed; pointer-events: none;
  z-index: 100;
  padding: 6px 10px;
  background: var(--panel-strong);
  border: 1px solid var(--accent);
  border-radius: 6px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; color: var(--text);
  box-shadow: 0 4px 20px rgba(0,0,0,0.5), 0 0 16px color-mix(in srgb, var(--accent) 30%, transparent);
}
.rm-tip.hidden { display: none; }

/* r78 — universal contextual tooltip (control name · shortcut · short explanation).
   Distinct from .rm-tip (the 3D board-hover bubble). Pointer-fine + keyboard only;
   shown on hover-intent or :focus-visible, dismissed on Esc/scroll/pointerdown. */
.rm-ctip {
  position: fixed; left: 0; top: 0; z-index: 120;   /* above popovers(60)/board-tip(100) */
  pointer-events: none; max-width: 280px;
  display: flex; flex-direction: column; gap: 3px;
  padding: 8px 11px;
  background: var(--panel-strong); color: var(--text);
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  border-radius: 9px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.34), 0 0 0 1px color-mix(in srgb, var(--bg) 40%, transparent);
  opacity: 0; transform: translateY(3px);
  transition: opacity .12s ease, transform .12s ease;
  font-family: "Manrope", system-ui, sans-serif;
}
.rm-ctip.rm-ctip-show { opacity: 1; transform: translateY(0); }
.rm-ctip-row { display: flex; align-items: center; gap: 8px; }
.rm-ctip-name { font-size: 12px; font-weight: 600; letter-spacing: .005em; line-height: 1.25; flex: 1 1 auto; }
.rm-ctip-key {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 2px;
  padding: 1px 6px; border-radius: 5px;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  color: color-mix(in srgb, var(--accent) 92%, var(--text));
  font-family: "JetBrains Mono", monospace; font-size: 10.5px; font-weight: 600;
  white-space: nowrap;
}
.rm-ctip-desc { font-size: 11px; line-height: 1.35; color: var(--text-fade); }
@media (prefers-reduced-motion: reduce) { .rm-ctip { transition: opacity .12s ease; transform: none; } .rm-ctip.rm-ctip-show { transform: none; } }
@media (pointer: coarse) { .rm-ctip { display: none !important; } }

.rm-nav {
  position: fixed; bottom: 14px; left: 14px;
  z-index: 8;
  display: flex; gap: 12px; flex-wrap: wrap;
  padding: 6px 12px;
  background: var(--panel-glass);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 11px; color: var(--text-dim);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--hud-shadow);
  transition: opacity 1s ease;
  max-width: 360px;
}
.rm-nav.rm-fade { opacity: 0; pointer-events: none; }
.rm-nav:hover { opacity: 1; }
body.rm-in-editor .rm-nav { display: none; }

/* ============================================================
   BOARD EDITOR (unchanged from r5 except for header tweaks)
   ============================================================ */
.rm-board-editor {
  position: fixed; inset: 0;
  z-index: 200;
  display: flex; flex-direction: column;
  background:
    radial-gradient(1000px 700px at 50% 0%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 70%),
    var(--bg);
  --editor-accent: var(--accent);
  animation: rmEditorIn 0.35s ease-out;
}
@keyframes rmEditorIn { from { opacity: 0; transform: scale(0.99); } to { opacity: 1; transform: scale(1); } }
.rm-board-editor.hidden { display: none; }

.rm-bd-header {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 8px; flex-wrap: nowrap;   /* r74 — SINGLE row (was wrap → 2 rows); recovers ~40px of board height */
  padding: 7px 14px;
  background: linear-gradient(180deg, var(--panel-strong), var(--panel));
  border-bottom: 1px solid var(--line);
  box-shadow: 0 6px 20px rgba(0,0,0,0.5), 0 0 24px color-mix(in srgb, var(--accent) 10%, transparent);
  min-height: 50px;
}
/* r74 — single-row layout: the tool strip takes the slack and scrolls internally;
   the trailing export + board-action controls stay fixed-width on the right. */
.rm-bd-header > .rm-spacer { display: none; }            /* tools flex:1 replaces the pusher */
.rm-bd-header > .rm-bd-btn,
.rm-bd-header > .rm-bd-exports { flex: 0 0 auto; }
.rm-bd-exports .rm-quota { display: none; }              /* drop the quota text from the row (quota still enforced) */
.rm-bd-title {
  font-size: 15px; font-weight: 600;
  color: var(--editor-accent);
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid transparent;
  outline: none;
  margin-right: 8px;
  text-shadow: 0 0 8px var(--editor-accent);
  font-family: "JetBrains Mono", monospace;
  letter-spacing: 0.06em;
  /* r87 (M-css2) — let the title yield space in the nowrap header instead of pushing the trailing
     ⋯ Board / Export controls off-screen on narrow widths; ellipsis when idle, expand on focus. */
  min-width: 0; max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  caret-color: var(--editor-accent);   /* r88 (R3) — visible caret even though the shimmer paints text-fill transparent */
}
/* r88 (R2) — while editing, don't clip the caret (contenteditable + overflow:hidden won't auto-scroll),
   and restore opaque ink + a visible caret (the title shimmer otherwise paints the text/caret transparent). */
.rm-bd-title:focus { border-color: var(--line-strong); background: color-mix(in srgb, var(--text) 8%, transparent); max-width: 48ch; text-overflow: clip; overflow-x: auto; overflow-y: hidden; -webkit-text-fill-color: var(--editor-accent); animation: none; caret-color: var(--editor-accent); }   /* r89/r98 — theme-aware focus wash */

.rm-bd-tools {
  display: flex; align-items: center; gap: 4px;
  padding: 4px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  position: relative;
  flex: 1 1 auto; min-width: 0;     /* r74 — take the row's slack so the header stays one line */
  overflow-x: auto; overflow-y: hidden;   /* tool groups scroll within the strip if they exceed the width */
  /* r26 — on narrow viewports the tool row scrolls; show a thin styled bar
     instead of the chunky default OS scrollbar (matches the widget docks). */
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--accent) 34%, transparent) transparent;
}
.rm-bd-tools::-webkit-scrollbar { height: 6px; }
.rm-bd-tools::-webkit-scrollbar-track { background: transparent; }
.rm-bd-tools::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--accent) 34%, transparent); border-radius: 6px; }
.rm-bd-toolgroup { display: flex; align-items: center; gap: 2px; padding: 0 4px; border-right: 1px solid var(--line); }
.rm-bd-toolgroup:last-of-type { border-right: none; }
.rm-bd-tool {
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  color: var(--text-dim);
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 16px;
  transition: all 0.12s ease;
}
.rm-bd-tool:hover {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border-color: var(--line-strong);
  transform: translateY(-1px);
}
.rm-bd-tool.active {
  color: var(--bg);
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 60%, transparent), inset 0 0 6px rgba(0,0,0,0.3);
}
.rm-bd-tool:disabled { opacity: 0.35; cursor: not-allowed; transform: none; }

.rm-bd-color {
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
}
.rm-color-dot {
  display: block; width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--c, var(--accent));
  box-shadow: 0 0 8px var(--c, var(--accent));
}
.rm-bd-color:hover { border-color: var(--accent); }

.rm-weight-slider { width: 70px; accent-color: var(--accent); background: transparent; }

.rm-bd-popover {
  position: absolute;
  top: calc(100% + 8px); left: 0;
  z-index: 10;
  padding: 10px;
  background: var(--panel-strong);
  border: 1px solid var(--accent);
  border-radius: 8px;
  box-shadow: var(--hud-shadow-strong);
  display: flex; gap: 6px; flex-wrap: wrap;
  max-width: 240px;
}
.rm-bd-popover.hidden { display: none; }
.rm-color-chip {
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 2px solid transparent;
  background: var(--c);
  box-shadow: 0 0 6px var(--c);
  cursor: pointer;
}
.rm-color-chip:hover { border-color: var(--accent); box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 55%, transparent); }
.rm-color-custom {
  width: 30px; height: 30px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
}

.rm-bd-templatepop { flex-direction: column; }
.rm-bd-tplbtn {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 6px;
  padding: 8px 14px;
  font-family: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  min-width: 160px;
}
.rm-bd-tplbtn:hover { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }

.rm-bd-exports {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 8px 4px 10px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.rm-quota {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px; letter-spacing: 0.12em;
  color: var(--text-dim);
  padding-right: 4px;
}
.rm-bd-btn {
  background: color-mix(in srgb, var(--panel) 65%, transparent);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px 11px;
  font-size: 11px; font-weight: 500;
  font-family: "JetBrains Mono", monospace;
  letter-spacing: 0.06em;
  transition: all 0.12s ease;
}
.rm-bd-btn:hover { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 30%, transparent); }
/* r72 — single Export dropdown styled to match the nav-bar buttons (theme-coloured, with a custom chevron). */
.rm-bd-export-sel {
  background: color-mix(in srgb, var(--panel) 65%, transparent) no-repeat right 7px center / 9px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%23889' stroke-width='1.4' stroke-linecap='round'/></svg>");
  color: var(--text); border: 1px solid var(--line); border-radius: 6px;
  padding: 6px 24px 6px 11px; height: 30px;
  font-size: 11px; font-weight: 500; font-family: "JetBrains Mono", monospace; letter-spacing: 0.04em;
  cursor: pointer; -webkit-appearance: none; appearance: none; outline: none; max-width: 168px;
  transition: border-color 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
}
.rm-bd-export-sel:hover { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 30%, transparent); }
.rm-bd-export-sel:focus-visible { border-color: var(--accent); }
/* r162 (audit) — scope the forced light option palette to light themes; on dark themes let the UA default render so the popup isn't flipped to an alien bright-white list. And on light themes the #889 chevron is faint on near-white, so darken it. */
body.rm-light .rm-bd-export-sel option, body.rm-light .rm-bd-export-sel optgroup { color: #12203a; background: #f4f8ff; }
body.rm-light .rm-bd-export-sel { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%23556' stroke-width='1.4' stroke-linecap='round'/></svg>"); }
.rm-bd-export-rpt { min-width: 30px; padding: 6px 8px; }
/* r74 — "⋯ Board" actions menu (keeps the editor header on one row) */
.rm-bd-more { white-space: nowrap; flex: 0 0 auto; }
.rm-bd-morepop { display: flex; flex-direction: column; gap: 2px; min-width: 210px; padding: 6px; }
.rm-bd-menuitem {
  display: block; width: 100%; text-align: left;
  background: transparent; border: 1px solid transparent; border-radius: 6px;
  color: var(--text); padding: 8px 10px; font-size: 12.5px; line-height: 1.2; cursor: pointer;
  font-family: inherit; transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.rm-bd-menuitem:hover { background: var(--panel-glass); border-color: var(--line); color: var(--accent); }
.rm-bd-menuitem.danger { color: var(--danger); }
.rm-bd-menuitem.danger:hover { color: var(--danger); background: color-mix(in srgb, var(--danger) 22%, transparent); border-color: var(--danger); }   /* r181 (audit MED) — was color:#fff: on the 3 light themes the popover bg is near-opaque white, so the 22% danger fill is pale pink → white "Delete board" label measured ~1.4:1 (illegible). Danger-red ink stays legible on both light + dark (matches the resting state). */
.rm-bd-btn.danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
.rm-bd-btn.danger:hover { color: var(--danger); background: color-mix(in srgb, var(--danger) 22%, transparent); border-color: var(--danger); box-shadow: 0 0 14px color-mix(in srgb, var(--danger) 40%, transparent); }   /* r181 — same legibility fix (this rule is currently unused markup-wise, kept consistent) */

/* Body */
.rm-bd-body { flex: 1; display: flex; min-height: 0; }
.rm-bd-canvas-holder {
  flex: 1; position: relative;
  background: linear-gradient(180deg, var(--bg), var(--bg-soft));
  overflow: hidden;
}
/* r209 — INFINITE WORKSPACE GRID: a single-colour grid layer that fills the ENTIRE editor surface (edge-to-edge),
   sitting BEHIND the content canvas. syncGridBg() drives its background-image/size/position from the board's grid
   style + size and the live pan/zoom of the canvas, so the grid extends past the bounded content into the surrounding
   space and pans/zooms in lockstep — the face reads as an open, infinite plane. pointer-events:none so it never eats
   canvas gestures. The content canvas sits above it (z-index 1); the DOM text overlay above that (z-index 2). */
.rm-bd-grid { position: absolute; inset: 0; z-index: 0; pointer-events: none; background-repeat: repeat; }
.rm-bd-canvas { z-index: 1; }
.rm-bd-textlayer { z-index: 2; }
/* r209 (self-audit fix) — giving the canvas an explicit z-index lifts it above any sibling with z-index:auto, so the
   empty-board drop hint (a later holder child, previously auto) ended up BEHIND the opaque canvas and vanished on empty
   faces. Pin it above the canvas + text layer, but below the drag-drop overlay (::before, z-index 5). */
.rm-bd-drophint { z-index: 3; }
/* r114 — Spatial Cube Engine · six-face switcher: a floating segmented control over the editing surface. */
.rm-bd-facetabs {
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%); z-index: 26;
  display: flex; gap: 2px; padding: 3px;
  background: var(--panel-glass); border: 1px solid var(--line); border-radius: 11px;
  backdrop-filter: blur(12px) saturate(1.2); -webkit-backdrop-filter: blur(12px) saturate(1.2);
  box-shadow: 0 6px 20px rgba(0,0,0,0.34);
  max-width: calc(100% - 32px); overflow-x: auto; scrollbar-width: none;
}
.rm-bd-facetabs::-webkit-scrollbar { display: none; }
.rm-bd-facetab {
  font: 600 11px/1 "Inter", system-ui, sans-serif; letter-spacing: 0.02em;
  padding: 6px 11px; border-radius: 8px; border: 0; cursor: pointer; white-space: nowrap;
  color: var(--text-dim); background: transparent; transition: background .14s, color .14s;
  display: inline-flex; align-items: center; gap: 5px;
}
.rm-bd-facetab:hover { color: var(--text); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.rm-bd-facetab.active { color: var(--on-accent); background: var(--accent); }
.rm-bd-facetab-n {
  font-size: 9px; min-width: 14px; height: 14px; padding: 0 3px; border-radius: 7px;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--text) 16%, transparent); color: var(--text);
}
.rm-bd-facetab.active .rm-bd-facetab-n { background: color-mix(in srgb, var(--on-accent) 22%, transparent); color: var(--on-accent); }

/* r115 — Cube-Expand (exploded view): the six faces laid out flat in a cube-net cross, each a live thumbnail. */
.rm-cube-expand { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; }
.rm-cube-expand.hidden { display: none !important; }
.rm-cx-backdrop { position: absolute; inset: 0; background: color-mix(in srgb, var(--bg) 70%, #000); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); }
.rm-cx-card { position: relative; z-index: 1; width: min(97vw, 1560px); max-height: 95vh; display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid color-mix(in srgb, var(--line) 60%, transparent); border-radius: 16px; padding: 12px 14px 13px; box-shadow: 0 30px 80px rgba(0,0,0,0.52); }   /* r122 — wider (1560px) + lighter frame → faces show larger */
.rm-cx-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 11px; }
.rm-cx-title { font: 600 15px/1 "Space Grotesk", sans-serif; color: var(--text); letter-spacing: 0.02em; }
.rm-cx-close { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line); background: transparent; color: var(--text-dim); cursor: pointer; font-size: 13px; }
.rm-cx-close:hover { color: var(--text); border-color: var(--accent); }
.rm-cx-grid { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: auto auto auto; gap: 22px; overflow: auto; min-height: 0; }   /* r134 — wider gap → a true "exploded" feel + room for the fold connectors */
/* r134 — Exploded View 2.0 fold-edge CONNECTORS: an SVG overlay drawing the seams where the six faces join in
   3D (TOP↔FRONT, LEFT↔FRONT, FRONT↔RIGHT, RIGHT↔BACK, FRONT↔BOTTOM). Sits above the cards, never eats clicks. */
.rm-cx-links { position: absolute; inset: 0; pointer-events: none; z-index: 3; overflow: visible; }
.rm-cx-links line { stroke: color-mix(in srgb, var(--accent) 70%, transparent); stroke-width: 2; stroke-dasharray: 4 4; opacity: 0.8; }
.rm-cx-links circle { fill: var(--accent); opacity: 0.9; }
.rm-cx-face { position: relative; display: flex; flex-direction: column; padding: 0; border: 1px solid var(--line); border-radius: 10px;
  background: var(--bg); cursor: pointer; overflow: hidden; transition: transform .14s ease, border-color .14s, box-shadow .14s; text-align: left; }
.rm-cx-face:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: 0 10px 26px color-mix(in srgb, var(--accent) 26%, transparent); }
.rm-cx-face:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rm-cx-face.front { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.rm-cx-face.empty { opacity: 0.72; }
.rm-cx-face.empty:hover { opacity: 1; }
/* r144 (audit) — thumbs are now SQUARE (paintCardInto, matching the real cube faces). Height-cap + centre so the
   six-face net stays compact instead of growing tall square cells at 4 columns. */
.rm-cx-thumb { display: block; height: clamp(120px, 21vh, 196px); width: auto; max-width: 100%; margin: 0 auto; background: var(--bg); border-radius: 8px; }
.rm-cx-cap { display: flex; align-items: baseline; gap: 6px; padding: 6px 9px; }
.rm-cx-cap b { font: 600 12px/1 "Inter", sans-serif; color: var(--text); }
.rm-cx-key { font: 500 9px/1 "JetBrains Mono", monospace; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.05em; }
.rm-cx-hint { margin-top: 11px; text-align: center; font-size: 11px; color: var(--text-dim); }
.rm-cx-hint kbd { font-family: "JetBrains Mono", monospace; font-size: 10px; padding: 1px 5px; border: 1px solid var(--line); border-radius: 4px; }
@media (max-width: 720px) { .rm-cx-grid { grid-template-columns: repeat(2, 1fr); } .rm-cx-face { grid-column: auto !important; grid-row: auto !important; } }

/* r119 — Cube Focus Mode HUD: a slim control strip shown while orbiting a focused cube. */
.rm-cubefocus-hud {
  position: fixed; left: 50%; bottom: 86px; transform: translateX(-50%); z-index: 40;
  display: flex; align-items: center; gap: 12px; padding: 8px 12px;
  background: var(--panel-glass); border: 1px solid var(--line); border-radius: 12px;
  backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 10px 30px rgba(0,0,0,0.4); max-width: calc(100vw - 32px);
}
.rm-cubefocus-hud.hidden { display: none !important; }
.rm-cf-title { font: 600 13px "Space Grotesk", sans-serif; color: var(--text); white-space: nowrap; max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.rm-cf-faces { display: flex; gap: 3px; }
.rm-cf-facebtn { width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--line); background: transparent; color: var(--text-dim); cursor: pointer; font: 600 12px "JetBrains Mono", monospace; display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
.rm-cf-facebtn .rm-cf-fl { display: none; }   /* r135 — desktop shows the number only; the label appears as a tab on mobile */
.rm-cf-facebtn:hover { color: var(--text); border-color: var(--accent); }
.rm-cf-facebtn.active { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.rm-cf-hint { font-size: 11px; color: var(--text-dim); white-space: nowrap; }
.rm-cf-hint kbd { font-family: "JetBrains Mono", monospace; font-size: 10px; padding: 1px 4px; border: 1px solid var(--line); border-radius: 4px; }
.rm-cf-exit { font-size: 11px; padding: 5px 10px; border-radius: 8px; border: 1px solid var(--line); background: transparent; color: var(--text-dim); cursor: pointer; white-space: nowrap; }
.rm-cf-exit:hover { color: var(--text); border-color: var(--accent); }
/* r144 (audit #25) — keyboard focus ring for the Focus-Mode HUD controls (mirrors .rm-cx-face:focus-visible). The
   outline sits OUTSIDE the border so it stays visible even on the active face button (which has an accent fill). */
.rm-cf-facebtn:focus-visible, .rm-cf-exit:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* r135 — MOBILE HIDDEN-TAB face layout: on touch / narrow screens, 3D orbit is awkward, so the focus-HUD face
   switcher becomes a LABELLED, horizontally-scrollable TAB STRIP — tap a tab to jump straight to that face. */
@media (max-width: 760px) {
  .rm-cf-hint { display: none; }
  .rm-cubefocus-hud { flex-wrap: wrap; max-width: calc(100vw - 16px); bottom: 70px; gap: 8px; }
  .rm-cf-faces { overflow-x: auto; max-width: calc(100vw - 36px); gap: 6px; padding-bottom: 2px; scrollbar-width: none; }
  .rm-cf-faces::-webkit-scrollbar { height: 0; }
  .rm-cf-facebtn { width: auto; min-width: 44px; min-height: 42px; padding: 0 12px; flex: 0 0 auto; font-size: 11px; }
  .rm-cf-facebtn .rm-cf-fl { display: inline; font: 600 11.5px "Space Grotesk", sans-serif; font-style: normal; }
}
/* Canvas + text overlay reserve 88px at the bottom for the editor nav bar */
.rm-bd-canvas {
  position: absolute;
  top: 10px; left: 10px; right: 10px; bottom: 78px;
  width: calc(100% - 20px);
  height: calc(100% - 88px);
  border-radius: 0;      /* r203 — borderless infinite workspace: no boxed frame, the surface bleeds edge-to-edge into the editor (holder bg is JS-synced to match → a seamless, open plane) */
  border: 0;
  box-shadow: none;
  transition: background 0.3s ease;
  /* r88 (N1) — opt the editor canvas out of native touch gestures so one-finger drag / draw / pan /
     rotate / resize aren't hijacked into browser scroll-zoom and cancelled mid-gesture on touch devices. */
  touch-action: none; -webkit-user-select: none; user-select: none;
}
.rm-bd-textlayer {
  position: absolute;
  top: 10px; left: 10px; right: 10px; bottom: 78px;
  pointer-events: none;
}
.rm-bd-textlayer > * { pointer-events: auto; }
.rm-bd-textitem {
  position: absolute; outline: none;
  caret-color: var(--accent);
  overflow: hidden;
  user-select: text; -webkit-user-select: text;
  transition: opacity 0.15s ease;
  /* Default: clicks pass through to canvas so single-click selects the
     sticky. focusText() flips this to 'auto' when entering edit mode. */
  pointer-events: none;
}
.rm-bd-textitem:focus { outline: 1px dashed color-mix(in srgb, var(--accent) 60%, transparent); outline-offset: 4px; pointer-events: auto; }
.rm-bd-videoitem {
  position: absolute;
  border: 1px solid var(--accent);
  border-radius: 4px;
  box-shadow: 0 0 20px color-mix(in srgb, var(--accent) 40%, transparent);
  background: #000;
  /* r27 — default: let pointer events pass to the canvas so the video box can be
     selected, dragged and resized like any other item (it was capturing every
     click, so it couldn't be moved/resized). Double-click toggles interaction. */
  pointer-events: none;
}
.rm-bd-videoitem.rm-interactive { pointer-events: auto; outline: 2px solid var(--accent); }
/* r27 — DOM move/resize grips for overlay items (video + table) that otherwise
   can't be grabbed through their interactive surface. */
.rm-bd-ohandles { position: absolute; pointer-events: none; z-index: 6; }
.rm-bd-ohandles .rm-bd-omove {
  position: absolute; left: 0; top: -20px; height: 18px; min-width: 54px; padding: 0 8px;
  display: flex; align-items: center; gap: 5px; font-size: 10px; letter-spacing: 0.04em;
  color: #fff; background: color-mix(in srgb, var(--accent) 78%, #0a1626); border-radius: 5px 5px 0 0;
  cursor: grab; pointer-events: auto; white-space: nowrap; user-select: none;
}
.rm-bd-ohandles .rm-bd-omove:active { cursor: grabbing; }
.rm-bd-ohandles .rm-bd-oresize {
  position: absolute; right: -7px; bottom: -7px; width: 16px; height: 16px;
  border-radius: 4px; background: var(--accent); border: 2px solid var(--panel-strong, #0a1626);
  cursor: nwse-resize; pointer-events: auto;
}
.rm-bd-drophint {
  position: absolute; left: 50%; bottom: 100px;     /* clear nav bar at bottom 18px + ~70px tall */
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;   /* r26 — room for the template button */
  padding: 12px 16px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px; letter-spacing: 0.08em; text-align: center;
  color: var(--text-fade);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  pointer-events: none;   /* container lets canvas interactions through… */
  opacity: 0.92;
}
.rm-bd-drophint button { pointer-events: auto; }   /* r26 — …but the template button is clickable */
body.rm-dragging .rm-bd-canvas-holder::before {
  content: "DROP TO ADD";
  position: absolute; top: 24px; left: 24px; right: 24px; bottom: 88px;
  display: flex; align-items: center; justify-content: center;
  font-family: "JetBrains Mono", monospace;
  font-size: 24px; letter-spacing: 0.4em;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 2px dashed var(--accent);
  border-radius: 8px;
  pointer-events: none;
  z-index: 5;
  text-shadow: 0 0 20px var(--accent);
}

/* Board settings drawer */
.rm-bd-settings {
  flex: 0 0 0; width: 0;
  overflow: hidden;
  background: var(--panel-strong);
  border-left: 1px solid var(--line);
  transition: flex-basis 0.3s ease, width 0.3s ease;
  padding: 0;
}
.rm-bd-settings.rm-bd-settings-open {
  flex: 0 0 300px; width: 300px;
  padding: 18px 18px;
  overflow-y: auto;
}
.rm-bd-set-header {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px; letter-spacing: 0.22em;
  color: var(--accent);
  margin-bottom: 14px;
  text-shadow: 0 0 6px color-mix(in srgb, var(--accent) 40%, transparent);
}
.rm-bd-set-row {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 10px;
}
.rm-bd-set-row label {
  flex: 0 0 90px;
  font-size: 11px; color: var(--text-dim);
  font-family: "JetBrains Mono", monospace;
  letter-spacing: 0.08em;
}
.rm-bd-set-row select,
.rm-bd-set-row input[type="color"],
.rm-bd-set-row input[type="range"] {
  flex: 1; background: var(--bg-soft); color: var(--text);
  border: 1px solid var(--line); border-radius: 4px;
  padding: 4px 6px; font-family: inherit; font-size: 12px;
  outline: none;
}
.rm-bd-set-row input[type="range"] { accent-color: var(--accent); padding: 0; }
.rm-bd-set-row input[type="color"] { padding: 0; height: 28px; cursor: pointer; }
.rm-bd-set-val {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px; color: var(--accent);
  min-width: 36px; text-align: right;
}
.rm-bd-set-hr { border: none; border-top: 1px solid var(--line); margin: 14px 0; }
.rm-bd-set-hint {
  font-size: 10px; color: var(--text-fade); margin: 6px 0 0;
  font-style: italic; line-height: 1.4;
}
/* r192 — one-click document surface presets */
.rm-bd-set-surfrow { align-items: flex-start; }
.rm-bd-surf-grp { flex: 1; display: flex; flex-wrap: wrap; gap: 5px; }
.rm-bd-surf {
  flex: 0 0 auto; padding: 5px 9px;
  background: var(--bg-soft); color: var(--text-dim);
  border: 1px solid var(--line); border-radius: 999px;
  font-family: inherit; font-size: 11px; cursor: pointer;
  transition: color .12s, border-color .12s, background .12s, box-shadow .12s;
}
.rm-bd-surf:hover { color: var(--accent); border-color: var(--accent); box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 28%, transparent); }
.rm-bd-surf:active { transform: translateY(1px); }
@media (pointer: coarse) { .rm-bd-surf { min-height: 32px; padding: 6px 11px; } }

/* Modal + toast */
.rm-modal {
  position: fixed; inset: 0;
  z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  background: var(--scrim);   /* r162 (audit) — theme-aware dim (softens on light themes) */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.rm-modal.hidden { display: none; }
.rm-modal-card {
  width: min(540px, 92vw);
  background: linear-gradient(180deg, var(--panel-strong), var(--panel));
  border: 1px solid var(--accent);
  border-radius: 12px;
  padding: 22px 24px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.7), 0 0 40px color-mix(in srgb, var(--accent) 40%, transparent);
}
/* r149 — Trash bin panel (rendered into .rm-modal-card) */
.rm-trash-head { display: flex; align-items: center; font: 600 14px "Space Grotesk", sans-serif; color: var(--text); margin-bottom: 12px; }
.rm-trash-list { max-height: 56vh; overflow-y: auto; display: flex; flex-direction: column; gap: 7px; }
.rm-trash-row { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 9px; background: color-mix(in srgb, var(--text) 4%, transparent); }
.rm-trash-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-size: 13px; }
.rm-trash-meta { font: 500 11px "JetBrains Mono", monospace; color: var(--text-dim); flex: 0 0 auto; }
.rm-trash-acts { display: inline-flex; gap: 6px; flex: 0 0 auto; }
.rm-trash-acts .rm-btn { padding: 4px 10px; font-size: 12px; }
.rm-trash-drop { color: var(--danger, #ff6b6b); border-color: color-mix(in srgb, var(--danger, #ff6b6b) 40%, var(--line)); }
.rm-trash-drop:hover { background: color-mix(in srgb, var(--danger, #ff6b6b) 16%, transparent); border-color: var(--danger, #ff6b6b); }
.rm-trash-empty { padding: 22px 10px; text-align: center; color: var(--text-dim); font-size: 13px; }
.rm-trash-foot { display: flex; justify-content: flex-end; margin-top: 14px; }
/* r171 — Today / Agenda overlay (rendered into .rm-modal-card) */
.rm-ag-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font: 600 15px "Space Grotesk", sans-serif; color: var(--text); margin-bottom: 12px; }
.rm-ag-sub { font: 500 11px "JetBrains Mono", monospace; color: var(--text-dim); flex: 0 0 auto; }
.rm-ag-list { max-height: 60vh; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
.rm-ag-group { display: flex; flex-direction: column; gap: 5px; }
.rm-ag-grouphd { font: 600 10.5px "JetBrains Mono", monospace; letter-spacing: 0.10em; text-transform: uppercase; color: var(--accent); padding: 0 2px 2px; }
.rm-ag-count { color: var(--text-dim); }
.rm-ag-row { display: flex; align-items: center; gap: 10px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 9px; background: color-mix(in srgb, var(--text) 4%, transparent); transition: border-color 0.14s ease, background 0.14s ease; }
.rm-ag-row[data-link] { cursor: pointer; }
.rm-ag-row[data-link]:hover, .rm-ag-row[data-link]:focus-visible { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); outline: none; }
.rm-ag-row.rm-ag-overdue { border-color: color-mix(in srgb, var(--danger, #ff6b6b) 45%, var(--line)); }
.rm-ag-row.rm-ag-overdue .rm-ag-meta { color: var(--danger, #ff6b6b); }
.rm-ag-glyph { flex: 0 0 auto; width: 22px; text-align: center; font-size: 14px; }
.rm-ag-check { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--line-strong, var(--line)); background: transparent; color: var(--text-dim); font-size: 13px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all 0.14s ease; }
.rm-ag-check:hover { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.rm-ag-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-size: 13px; }
.rm-ag-meta { flex: 0 0 auto; font: 500 11px "JetBrains Mono", monospace; color: var(--text-dim); }
.rm-ag-empty { padding: 26px 12px; text-align: center; color: var(--text-dim); font-size: 13px; line-height: 1.6; }
.rm-ag-foot { display: flex; justify-content: flex-end; margin-top: 14px; }
/* r152 — Cloud sync account panel (rendered into .rm-modal-card) */
.rm-cloud-head { font: 600 15px "Space Grotesk", sans-serif; color: var(--text); margin-bottom: 10px; }
.rm-cloud-sub { font-size: 12.5px; color: var(--text-dim); line-height: 1.5; margin-bottom: 14px; }
.rm-cloud-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.rm-cloud-who { flex: 1; min-width: 0; font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis; }
.rm-cloud-field { display: flex; flex-direction: column; gap: 5px; font: 600 11px "JetBrains Mono", monospace; letter-spacing: 0.06em; color: var(--text-dim); margin-bottom: 11px; }
.rm-cloud-field input { font: 400 13px Inter, sans-serif; letter-spacing: 0; padding: 9px 11px; border-radius: 8px; border: 1px solid var(--line); background: color-mix(in srgb, var(--text) 4%, transparent); color: var(--text); }
.rm-cloud-field input:focus { outline: none; border-color: var(--accent); }
.rm-cloud-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.rm-cloud-actions { display: flex; gap: 8px; margin-bottom: 6px; }
.rm-cloud-roomshead { font: 600 11px "JetBrains Mono", monospace; letter-spacing: 0.08em; color: var(--text-dim); margin: 14px 0 8px; }
/* r153 — header account button lights up when cloud sync is ON */
#rmAccount.active { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); background: color-mix(in srgb, var(--accent) 12%, transparent); }
/* r154 (audit) — amber dot when the last cloud auto-save failed (e.g. oversized image payload) so a silent sync drop is visible */
#rmAccount.rm-cloud-stale { position: relative; }
#rmAccount.rm-cloud-stale::after { content: ""; position: absolute; top: 3px; right: 3px; width: 7px; height: 7px; border-radius: 50%; background: #f0a832; box-shadow: 0 0 0 2px var(--panel, #0b1626); }
.rm-cloud-rooms { display: flex; flex-direction: column; gap: 6px; max-height: 40vh; overflow-y: auto; }
.rm-cloud-roomrow { display: flex; align-items: center; gap: 10px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 8px; background: color-mix(in srgb, var(--text) 4%, transparent); }
.rm-cloud-roomname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--text); }
.rm-cloud-loading, .rm-cloud-empty { padding: 14px 4px; text-align: center; color: var(--text-dim); font-size: 12.5px; }
/* r153 — draw-a-box region export overlay */
.rm-region-overlay { position: fixed; inset: 0; z-index: 520; cursor: crosshair; background: color-mix(in srgb, var(--scrim) 23%, transparent); }   /* r162 (audit) — theme-aware crosshair dim */
.rm-region-hint { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); padding: 7px 14px; border-radius: 9px; font-size: 12.5px; color: var(--text); background: var(--panel-strong, var(--panel)); border: 1px solid var(--accent); box-shadow: 0 8px 28px rgba(0,0,0,0.5); pointer-events: none; }
.rm-region-hint kbd { font-family: "JetBrains Mono", monospace; font-size: 10px; padding: 1px 5px; border: 1px solid var(--line); border-radius: 4px; }
.rm-region-box { position: absolute; border: 1.5px dashed var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); box-shadow: 0 0 0 9999px color-mix(in srgb, var(--scrim) 36%, transparent); pointer-events: none; }   /* r162 (audit) — theme-aware inverted-mask dim */
.rm-modal-card h3 {
  margin: 0 0 12px;
  font-family: "JetBrains Mono", monospace;
  font-size: 15px; letter-spacing: 0.10em;
  color: var(--accent);
  text-shadow: 0 0 12px var(--accent);
}
.rm-modal-card p { margin: 0 0 10px; line-height: 1.55; color: var(--text); }
.rm-modal-card .rm-warn { color: var(--warn); padding: 8px 10px; background: color-mix(in srgb, var(--warn) 10%, transparent); border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent); border-radius: 6px; }   /* r94 — tokenised */
.rm-modal-card .rm-fine { font-size: 11px; color: var(--text-dim); margin-top: 14px; }
.rm-modal-card .rm-plan-list { list-style: none; padding: 0; margin: 8px 0 16px; font-size: 13px; }
.rm-modal-card .rm-plan-list li {
  padding: 10px 12px;
  margin-bottom: 8px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 6px;
}
.rm-modal-card .rm-plan-list li b { color: var(--accent); }
.rm-modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 14px; }
.rm-help { width: 100%; border-collapse: collapse; margin: 6px 0 14px; font-size: 12px; }
.rm-help td { padding: 6px 8px; border-bottom: 1px solid var(--line); color: var(--text-dim); }
.rm-help td:first-child { color: var(--text); white-space: nowrap; width: 1px; }
.rm-help-title {
  margin: 16px 0 4px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px; letter-spacing: 0.20em;
  color: var(--accent);
}

.rm-toast {
  position: fixed; bottom: 160px; left: 50%; transform: translateX(-50%);
  z-index: 2000;
  padding: 10px 18px;
  background: var(--panel-strong);
  border: 1px solid var(--accent);
  border-radius: 8px;
  color: var(--text);
  font-size: 13px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.6), 0 0 24px color-mix(in srgb, var(--accent) 40%, transparent);
  animation: rmToastIn 0.3s ease-out;
}
.rm-toast.hidden { display: none; }
@keyframes rmToastIn { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* === Responsive === */
/* r14 — in the mid-width band the bottom-left nav hint would overlap the
   centred sticky dock; hide the transient cheatsheet there (dock + tour
   give guidance). Below 769 the dock hides, so the nav returns. */
@media (max-width: 1150px) and (min-width: 769px) {
  .rm-nav { display: none; }
}
/* r47 — dock width is user-controlled (--rm-dock-w) and the JS clamps it to ≤32% of the
   viewport, so the old fixed mid-screen caps are removed — they pinned the width and
   blocked the resize feature on ~1024–1100px laptops. */
@media (max-width: 768px) {
  .rm-header { padding: 8px 10px; gap: 6px; }   /* r144 (audit #9) — dropped dead `flex-wrap:wrap; height:auto` here: the ≤1000px rule (later in source) forces `flex-wrap:nowrap; overflow-x:auto`, so the wrap never applied. Removing it unifies on the single one-row-scrolling strategy + keeps the base 52px header height. */
  .rm-title { font-size: 13px; min-width: 80px; }
  .rm-count, .rm-saved { display: none; }
  .rm-minimap { display: none; }   /* r112 — side docks no longer VANISH at ≤768px; they shrink (responsive scale below) so the HUD stays usable, hiding only at true-mobile ≤540px */
  .rm-nav { font-size: 10px; gap: 8px; padding: 6px 10px; bottom: 10px; max-width: calc(100vw - 28px); }
  .rm-bd-header { padding: 6px 8px; }
  .rm-bd-tools { width: 100%; justify-content: flex-start; overflow-x: auto; }
  .rm-bd-exports { order: 11; }
  .rm-bd-settings.rm-bd-settings-open { flex: 0 0 100%; width: 100%; position: absolute; right: 0; top: 0; bottom: 0; z-index: 30; padding-bottom: 72px; }   /* r87 (L-css5) — reserve space for the fixed bottom quick-nav bar so the last row scrolls clear */
  /* r21 — the scrolling editor toolbar clips its color/template popovers; pin
     them below the toolbar so color + template pickers stay usable on phones. */
  #rmBdColorPop, #rmBdTemplatePop {
    position: fixed; top: 92px; left: 8px; right: 8px;
    max-height: calc(100vh - 110px); overflow-y: auto; z-index: 40;
  }
}


/* ═════════════════════════════════════════════════════════════════════
   r9 -- Editor bottom nav bar + Template gallery
   ═════════════════════════════════════════════════════════════════════ */

/* ─── Editor bottom nav bar (r9) ─── */
.rm-editor-navbar {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  max-width: calc(100vw - 64px);
  overflow-x: auto;
  scrollbar-width: none;
  background: var(--panel-glass, var(--panel));
  border: 1px solid var(--line);
  border-radius: 14px;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow:
    0 6px 28px rgba(0, 0, 0, 0.45),
    0 0 0 1px color-mix(in srgb, var(--accent) 14%, transparent),
    0 0 36px color-mix(in srgb, var(--accent) 12%, transparent);
  font-family: "Inter", -apple-system, system-ui, sans-serif;
  color: var(--text);
  user-select: none;
}
.rm-editor-navbar::-webkit-scrollbar { display: none; }

.rm-editor-navbar .rm-nav-group { display: flex; align-items: center; gap: 4px; }
.rm-editor-navbar .rm-nav-sep {
  width: 1px; height: 22px;
  background: var(--line);
  margin: 0 4px;
  flex: 0 0 auto;
}

.rm-editor-navbar .rm-nav-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-dim, var(--text));
  background: color-mix(in srgb, var(--bg-soft, var(--bg)) 72%, transparent);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease,
              background 120ms ease, box-shadow 120ms ease, transform 120ms ease;
  white-space: nowrap;
}
.rm-editor-navbar .rm-nav-chip:hover {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background: color-mix(in srgb, var(--accent) 8%, var(--bg-soft, var(--bg)));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent),
              0 0 12px color-mix(in srgb, var(--accent) 25%, transparent);
  transform: translateY(-1px);
}
.rm-editor-navbar .rm-nav-chip.active {
  color: var(--bg);
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 55%, transparent);
}
.rm-editor-navbar .rm-nav-chip kbd {
  font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  color: var(--text);
}

/* Hide nav bar when editor is hidden (parent .hidden) -- implicit via DOM tree. */
@media (max-width: 720px) {
  .rm-editor-navbar { bottom: 10px; padding: 6px 8px; gap: 4px; }
  .rm-editor-navbar .rm-nav-chip { padding: 4px 8px; font-size: 10px; }
  .rm-editor-navbar .rm-nav-chip kbd { font-size: 9px; padding: 0 4px; }
}

/* ─── Template gallery (r9) ─── */
.rm-template-gallery {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  font-family: "Inter", -apple-system, system-ui, sans-serif;
  color: var(--text);
}
.rm-template-gallery.hidden { display: none; }

.rm-tg-backdrop {
  position: absolute; inset: 0;
  background: radial-gradient(1200px 700px at 50% 30%,
              color-mix(in srgb, var(--accent) 8%, transparent) 0%, transparent 60%),
              var(--scrim);   /* r162 (audit) — theme-aware base dim */
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
}
.rm-tg-card {
  position: relative;
  width: min(1180px, 94vw); height: min(760px, 88vh);
  display: flex; flex-direction: column;
  background: var(--panel-strong, var(--panel));
  border: 1px solid var(--line-strong, var(--line));
  border-radius: 16px;
  box-shadow:
    0 30px 80px rgba(0,0,0,0.55),
    0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent),
    0 0 60px color-mix(in srgb, var(--accent) 14%, transparent);
  overflow: hidden;
}

.rm-tg-header {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg,
              color-mix(in srgb, var(--accent) 6%, transparent) 0%,
              transparent 100%);
}
.rm-tg-title { display: flex; align-items: center; gap: 10px; }
.rm-tg-title h2 { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text); }
.rm-tg-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--accent); }
.rm-tg-count { font-size: 11px; color: var(--text-fade, var(--text-dim)); letter-spacing: 0.06em; }

.rm-tg-search {
  flex: 1; max-width: 360px;
  padding: 8px 12px; font-size: 13px;
  background: color-mix(in srgb, var(--bg-soft, var(--bg)) 80%, transparent);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  outline: none;
  transition: border-color 120ms;
}
.rm-tg-search:focus { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent); }
.rm-tg-search::placeholder { color: var(--text-fade, var(--text-dim)); }

.rm-tg-close {
  width: 32px; height: 32px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 8px; color: var(--text-dim);
  cursor: pointer; transition: 120ms;
}
.rm-tg-close:hover { color: var(--accent); border-color: var(--accent); }

.rm-tg-body { flex: 1; display: flex; min-height: 0; }

.rm-tg-sidebar {
  width: 200px;
  padding: 14px 10px;
  border-right: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg-soft, var(--bg)) 50%, transparent);
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 4px;
}
.rm-tg-cat {
  text-align: left;
  padding: 8px 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--text-dim);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  transition: 120ms;
}
.rm-tg-cat:hover { color: var(--text); background: color-mix(in srgb, var(--accent) 6%, transparent); }
.rm-tg-cat.active {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
}

.rm-tg-main { flex: 1; overflow-y: auto; padding: 18px; }
.rm-tg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}
.rm-tg-empty {
  padding: 60px 20px; text-align: center; color: var(--text-fade, var(--text-dim));
  font-size: 14px;
}
.rm-tg-empty.hidden { display: none; }

/* Card */
.rm-tg-card-item {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--panel-glass, var(--panel));
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
  cursor: pointer;
}
.rm-tg-card-item:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow: 0 14px 30px rgba(0,0,0,0.4),
              0 0 24px color-mix(in srgb, var(--accent) 24%, transparent);
}
.rm-tg-card-item.locked { opacity: 0.62; }
.rm-tg-card-item.locked::after {
  content: "★ PRO";
  position: absolute; top: 10px; right: 10px;
  font-size: 10px; letter-spacing: 0.08em; font-weight: 700;
  padding: 3px 8px;
  background: rgba(0,0,0,0.55);
  border: 1px solid color-mix(in srgb, var(--warn, #fbbf24) 60%, transparent);
  color: var(--warn, #fbbf24);
  border-radius: 999px;
}

.rm-tg-thumb {
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg,
              color-mix(in srgb, var(--accent) 10%, var(--bg, #02060d)),
              var(--bg, #02060d));
  border-bottom: 1px solid var(--line);
  display: flex; align-items: stretch; justify-content: stretch;
}
.rm-tg-thumb canvas { width: 100%; height: 100%; display: block; }

.rm-tg-meta {
  padding: 10px 12px 6px;
  display: flex; flex-direction: column; gap: 6px;
}
.rm-tg-name {
  margin: 0; font-size: 13px; font-weight: 600;
  color: var(--text);
}
.rm-tg-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.rm-tg-badge, .rm-tg-diff {
  font-size: 10px; letter-spacing: 0.06em; font-weight: 600;
  padding: 2px 7px; border-radius: 999px;
  border: 1px solid var(--line);
}
.rm-tg-badge.free  { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.rm-tg-badge.pro   { color: var(--warn, #fbbf24); border-color: color-mix(in srgb, var(--warn, #fbbf24) 50%, transparent); }
.rm-tg-diff.easy   { color: var(--up);     border-color: color-mix(in srgb, var(--up) 35%, transparent); }     /* r93 — tokenised */
.rm-tg-diff.med    { color: var(--warn);   border-color: color-mix(in srgb, var(--warn) 35%, transparent); }
.rm-tg-diff.adv    { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 35%, transparent); }

.rm-tg-use {
  margin: 6px 10px 10px;
  padding: 7px;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent);
  color: var(--text);
  border-radius: 8px;
  font-size: 12px; font-weight: 600;
  cursor: pointer;
  transition: 120ms;
}
.rm-tg-use:hover { background: var(--accent); color: var(--bg); }

.rm-tg-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px;
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg-soft, var(--bg)) 50%, transparent);
}
.rm-tg-hint  { font-size: 11px; color: var(--text-fade, var(--text-dim)); letter-spacing: 0.04em; }
.rm-tg-upgrade {
  padding: 6px 14px; font-size: 12px; font-weight: 600;
  background: var(--accent); color: var(--bg);
  border: none; border-radius: 8px; cursor: pointer;
  transition: 120ms;
}
.rm-tg-upgrade:hover { filter: brightness(1.1); box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 45%, transparent); }

@media (max-width: 720px) {
  .rm-tg-card { width: 96vw; height: 92vh; }
  .rm-tg-sidebar { width: 130px; padding: 8px 6px; }
  .rm-tg-cat { font-size: 12px; padding: 6px 8px; }
  .rm-tg-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
  .rm-tg-search { max-width: 160px; }
}


/* ═════════════════════════════════════════════════════════════════════
   r12 — UI polish: depth, micro-interactions, shimmer
   ═════════════════════════════════════════════════════════════════════ */

/* Widget hover-lift with subtle 3D tilt */
.rm-w {
  transform-style: preserve-3d;
  will-change: transform;
}
.rm-w:hover:not(.rm-w-dragging):not(.rm-w-resizing):not(.rm-w-popout) {
  /* r174 (audit LOW) — exclude the open pop-out: it's permanently :hover, so this 3D tilt+lift would persist on the
     floating panel (and a transform on a position:fixed element re-roots its containing block, nudging it off-anchor). */
  transform: translateY(-2px) perspective(900px) rotateX(2deg);
  border-color: var(--accent);
  box-shadow:
    0 16px 36px rgba(0,0,0,0.55),
    0 0 22px color-mix(in srgb, var(--accent) 28%, transparent),
    inset 0 0 12px color-mix(in srgb, var(--accent) 8%, transparent);
}

/* Nav-bar chip — sharper hover pulse */
.rm-editor-navbar .rm-nav-chip {
  position: relative;
  overflow: hidden;
}
.rm-editor-navbar .rm-nav-chip::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: radial-gradient(120% 60% at 50% 100%,
    color-mix(in srgb, var(--accent) 35%, transparent) 0%,
    transparent 70%);
  opacity: 0;
  transition: opacity 200ms ease;
  pointer-events: none;
}
.rm-editor-navbar .rm-nav-chip:hover::after { opacity: 1; }

/* Toolbar tool buttons — subtle press-down on hover */
.rm-bd-tool:not(:disabled):hover {
  transform: translateY(-1px) scale(1.04);
}
.rm-bd-tool:not(:disabled):active {
  transform: translateY(0) scale(0.97);
}

/* Brand dot — accent shimmer ring */
.rm-brand-dot {
  position: relative;
}
.rm-brand-dot::after {
  content: "";
  position: absolute; inset: -4px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  animation: rmRing 2.4s ease-out infinite;
}
@keyframes rmRing {
  0%   { transform: scale(0.6); opacity: 0.9; }
  100% { transform: scale(1.8); opacity: 0; }
}

/* Modal entrance — soft scale + fade with a touch of bounce */
.rm-modal-card,
.rm-tg-card {
  animation: rmCardIn 280ms cubic-bezier(0.32, 1.5, 0.6, 1);
}
@keyframes rmCardIn {
  0%   { opacity: 0; transform: scale(0.94) translateY(8px); }
  100% { opacity: 1; transform: scale(1)    translateY(0); }
}

/* Holographic shimmer on the editor title — slow sweep */
.rm-bd-title {
  background: linear-gradient(
    100deg,
    var(--editor-accent) 0%,
    color-mix(in srgb, var(--editor-accent) 60%, #ffffff) 50%,
    var(--editor-accent) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: rmShimmer 6s linear infinite;
}
@keyframes rmShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Template-card thumbnail — gentle scale-up on hover */
.rm-tg-card-item:hover .rm-tg-thumb canvas {
  transform: scale(1.04);
  transition: transform 300ms ease;
}
.rm-tg-thumb canvas { transition: transform 300ms ease; }


/* ═════════════════════════════════════════════════════════════════════
   r13 — Focus / Expand breadcrumb pill
   ═════════════════════════════════════════════════════════════════════ */
.rm-focusbar {
  position: fixed; top: 78px; left: 50%; transform: translateX(-50%) translateY(-8px);
  z-index: 48;   /* r14 — above content, below header(50)/popover(60)/tooltip(100) */
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px 8px 14px;
  background: var(--panel-strong, var(--panel));
  border: 1px solid var(--accent);
  border-radius: 999px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.5), 0 0 24px color-mix(in srgb, var(--accent) 35%, transparent);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  color: var(--text);
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.rm-focusbar.rm-show { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.rm-focus-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.rm-focus-label { font-size: 9px; letter-spacing: 0.22em; color: var(--accent); }
.rm-focus-title { font-size: 12px; letter-spacing: 0.04em; color: var(--text); max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rm-focus-exit {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 999px;
  padding: 4px 10px;
  font-family: inherit; font-size: 10px; letter-spacing: 0.08em;
  cursor: pointer; transition: all 0.12s ease;
}
.rm-focus-exit:hover { color: var(--accent); border-color: var(--accent); }
body.rm-in-editor #rmFocusBar { display: none; }


/* ═════════════════════════════════════════════════════════════════════
   r13 — Sticky control dock + onboarding tour
   ═════════════════════════════════════════════════════════════════════ */

/* Sticky dock — pinned bottom-center, always visible on the workspace */
.rm-dock-sticky {
  position: fixed; left: 50%; bottom: 8px; transform: translateX(-50%);   /* r75 — pinned to the very bottom for more board area */
  z-index: 46;
  display: flex; flex-direction: column; align-items: stretch; gap: 5px;   /* r150 — ONE bar: hint row (top) + button row (below) stacked in a single container */
  padding: 6px 9px;
  max-width: calc(100vw - 20px);
  background: var(--panel-strong, var(--panel));
  border: 1px solid var(--line);
  border-radius: 13px;
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: 0 10px 34px rgba(0,0,0,0.5), 0 0 26px color-mix(in srgb, var(--accent) 18%, transparent);
}
/* r150 — the controls row (was the whole dock); MUST stay one clean row (r141 — no wrap). */
.rm-dock-btnrow { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: nowrap; }
/* r150 — the navigation HINT strip, now the dock's TOP row (was the separate floating #rmHintBar). Shaded + non-clickable. */
.rm-dock-hintrow {
  display: flex; align-items: center; justify-content: center; gap: 9px; flex-wrap: wrap; row-gap: 2px;
  font-size: 10.5px; color: var(--text-fade); letter-spacing: 0.01em; opacity: 0.72; pointer-events: none; user-select: none;
  padding: 1px 2px 4px; border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
}
.rm-dock-hintrow span { white-space: nowrap; display: inline-flex; align-items: center; }
.rm-dock-hintrow kbd {
  font-family: "JetBrains Mono", monospace; font-size: 9.5px; padding: 1px 5px; border-radius: 4px;
  background: color-mix(in srgb, var(--accent) 10%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
  color: var(--accent); margin-right: 4px;
}
/* r75 — navigation hints merged into the dock: SHADED + non-clickable, pure reference. */
.rm-dock-hints {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  flex: 1 1 100%; flex-wrap: wrap; row-gap: 3px;   /* r77 — full labelled controls on their own centred row */
  padding: 1px 2px 3px;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
  font-size: 10.5px; color: var(--text-fade); letter-spacing: 0.01em;
  opacity: 0.7; pointer-events: none; user-select: none;   /* SHADED + non-clickable — reference only */
}
.rm-dock-hints span { white-space: nowrap; }
.rm-dock-hints kbd {
  font-family: "JetBrains Mono", monospace; font-size: 9.5px;
  padding: 1px 5px; border-radius: 4px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
  color: var(--accent); margin-right: 3px;
}
/* r75 — View / billboard controls as compact dock chips */
.rm-dock-chip {
  height: 38px; padding: 0 11px;   /* r162 (audit) — match .rm-dock-btn (38px) so chips and icon buttons sit on one baseline in the dock row (was 30px → a visible 8px height step) */
  display: inline-flex; align-items: center;
  background: color-mix(in srgb, var(--bg-soft, var(--bg)) 70%, transparent);
  border: 1px solid var(--line); border-radius: 9px;
  color: var(--text); font-size: 11.5px; font-weight: 500;
  font-family: "JetBrains Mono", monospace; letter-spacing: 0.02em;
  cursor: pointer; white-space: nowrap; transition: all 0.14s ease;
}
.rm-dock-chip:hover { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 25%, transparent); }
/* r143 (audit #6) — the three dock VIEW-chips (Default / Adaptive / ◐ Spin) carry BOTH .rm-dock-chip and
   .rm-nav-viewbtn, whose single-class base rules collided and resolved purely by source order (fragile). Pin the
   canonical look here at combined specificity (0,2,0 → beats both regardless of order): the dock-chip geometry
   (height/radius/monospace, consistent with the rest of the dock) + an accent-tinted "toggleable view" treatment.
   .active (e.g. Spin ON) reads as a filled accent chip. */
.rm-dock-chip.rm-nav-viewbtn {
  height: 38px; padding: 0 11px; border-radius: 9px;   /* r162 (audit) — keep the view-chips on the same 38px dock baseline */
  font-family: "JetBrains Mono", monospace; font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
  color: var(--accent);
}
.rm-dock-chip.rm-nav-viewbtn:hover { background: color-mix(in srgb, var(--accent) 20%, transparent); border-color: var(--accent); box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 22%, transparent); }
.rm-dock-chip.rm-nav-viewbtn.active { background: var(--accent); border-color: var(--accent); color: var(--bg); }
/* r77 — hints wrap onto their own row, so they fit any width; only drop them on small mobile */
@media (max-width: 600px) { .rm-dock-hints { display: none; } }

/* r129 — keyboard/mouse cheat-sheet is now an ON-DEMAND popover (opened by the ⌨ dock button) instead of an
   always-on multi-row strip. Positioned by JS above the dock; closes on outside-click / Esc. */
.rm-dock-keys-pop {
  position: fixed; z-index: 60;
  display: flex; flex-wrap: wrap; gap: 7px 10px; max-width: 340px;
  padding: 12px 14px;
  background: var(--panel-strong, var(--panel)); border: 1px solid var(--line); border-radius: 12px;
  backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: 0 12px 34px rgba(0,0,0,0.5), 0 0 22px color-mix(in srgb, var(--accent) 14%, transparent);
  font-size: 11px; color: var(--text-fade); letter-spacing: 0.01em;
}
.rm-dock-keys-pop.hidden { display: none !important; }
.rm-dock-keys-pop span { white-space: nowrap; display: inline-flex; align-items: center; }
.rm-dock-keys-pop kbd {
  font-family: "JetBrains Mono", monospace; font-size: 9.5px;
  padding: 1px 5px; border-radius: 4px; margin-right: 4px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
  color: var(--accent);
}
/* r129 — in Cube Focus mode the room-level VIEW dock is irrelevant (you're inside one cube) and would crowd
   the focus HUD; hide it (and its popovers) so the focus HUD is the sole, clean bottom element (matches the
   rm-presenting pattern). */
body.rm-cube-focus .rm-dock-sticky,
body.rm-cube-focus .rm-dock,
body.rm-cube-focus .rm-dock-resize,
body.rm-cube-focus #rmDockKeysPop,
body.rm-cube-focus #rmDockLearnPop { display: none !important; }   /* r158 (audit MED) — also hide the SIDE rails in Cube Focus (matches the rm-presenting pattern): the focus HUD is the sole bottom element, so the rails can't collide with it ~620–1180px. Rails restore on exit via removing the class (no inline style left). r218 (audit MED) — also hide .rm-dock-resize: the rails were hidden but the z-index:10 resize HANDLES stayed, stranding as orphaned hoverable/draggable accent bars over the focused scene (mirrors the rm-presenting rule). */

/* r150 — the separate .rm-hintbar element is gone; the hint strip is now .rm-dock-hintrow (the dock's top row,
   styled above). The dock-hide-in-focus rule above already hides it (it's inside .rm-dock-sticky). */
/* r144 (audit #8) — the Keys / Learn dock popovers open UPWARD over the dock; hide the hint ROW while either is
   open so they don't cover its reference text (self-correcting via :has). */
body:has(#rmDockKeysPop:not(.hidden)) .rm-dock-hintrow,
body:has(#rmDockLearnPop:not(.hidden)) .rm-dock-hintrow { display: none; }
/* r142/r150 — drop the hint ROW at ≤760px (keep the controls), and let the BUTTON row scroll horizontally on very
   narrow screens rather than clip (the ⌨ Keys popover still gives the full hints). */
@media (max-width: 760px) {
  .rm-dock-hintrow { display: none; }
  .rm-dock-btnrow { overflow-x: auto; scrollbar-width: none; max-width: calc(100vw - 24px); }
  .rm-dock-btnrow::-webkit-scrollbar { height: 0; }
  .rm-dock-btnrow > * { flex: 0 0 auto; }
}

/* r132 — Cube settings panel (live-preview sliders) */
.rm-cubeset { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center;
  background: rgba(2,7,14,0.5); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.rm-cubeset.hidden { display: none !important; }
.rm-cubeset-card { width: min(380px, calc(100vw - 32px)); background: var(--panel-strong, var(--panel));
  border: 1px solid var(--line); border-radius: var(--r-lg, 14px); box-shadow: 0 24px 60px rgba(0,0,0,0.55);
  overflow: hidden; }
.rm-cubeset-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
.rm-cubeset-head h3 { margin: 0; font: 600 14px "Space Grotesk", sans-serif; color: var(--text); letter-spacing: 0.01em; }
.rm-cubeset-x { width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--line); background: transparent;
  color: var(--text-dim); cursor: pointer; font-size: 13px; line-height: 1; transition: all .14s ease; }
.rm-cubeset-x:hover { color: var(--accent); border-color: var(--accent); }
.rm-cubeset-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 14px; }
.rm-cubeset-row { display: flex; flex-direction: column; gap: 6px; }
.rm-cs-lbl { display: flex; align-items: baseline; justify-content: space-between; font: 500 12px "JetBrains Mono", monospace;
  color: var(--text-dim); letter-spacing: 0.02em; }
.rm-cs-lbl em { font-style: normal; font-weight: 600; color: var(--accent); }
.rm-cubeset-row input[type="range"] { width: 100%; height: 4px; -webkit-appearance: none; appearance: none;
  background: color-mix(in srgb, var(--accent) 20%, var(--line)); border-radius: 3px; outline: none; cursor: pointer; }
.rm-cubeset-row input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px;
  border-radius: 50%; background: var(--accent); border: 2px solid var(--panel-strong, var(--panel)); box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 50%, transparent); cursor: pointer; }
.rm-cubeset-row input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--accent); border: 2px solid var(--panel-strong, var(--panel)); cursor: pointer; }
.rm-cubeset-row input[type="range"]:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); }
.rm-cubeset-foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 12px 16px 16px; }
.rm-dock-btn {
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--bg-soft, var(--bg)) 70%, transparent);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text-dim);
  font-size: 17px;
  cursor: pointer;
  transition: all 0.14s ease;
}
.rm-dock-btn:hover {
  color: var(--accent); border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  transform: translateY(-2px);
  box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 35%, transparent);
}
.rm-dock-btn.active {
  color: var(--bg); background: var(--accent); border-color: var(--accent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 55%, transparent);
}
.rm-dock-sep { width: 1px; height: 24px; background: var(--line); margin: 0 4px; }
body.rm-in-editor #rmDock { display: none; }

/* Lift the minimap + toast so they clear the sticky dock */
.rm-minimap { bottom: 64px !important; }
.rm-toast { bottom: 104px !important; }   /* r26/r150 — sit just above the now ~80px 2-row dock */

/* r143 — was `#rmDock { display:none }` here, which killed ALL bottom view/nav
   controls on tablet/narrow widths (and the hint bar is also hidden ≤760px, so the
   user was left with no bottom controls at all). Keep the dock visible everywhere;
   the ≤760px overflow-x:auto rule (above) lets it scroll horizontally. Constrain its
   footprint so it never collides with the left widget rail / right HUD column. */
@media (max-width: 768px) {
  #rmDock { display: flex; max-width: calc(100vw - 16px); }
}

/* Onboarding tour overlay */
.rm-tour { position: fixed; inset: 0; z-index: 900; display: none; }
.rm-tour::before {
  content: ""; position: absolute; inset: 0;
  background: color-mix(in srgb, var(--scrim) 70%, transparent);   /* r162 (audit) — theme-aware, kept lighter than the modal dim */
  pointer-events: none;
}
.rm-tour-spot {
  position: absolute; display: none;
  border: 2px solid var(--accent);
  border-radius: 12px;
  box-shadow: 0 0 0 9999px color-mix(in srgb, var(--scrim) 80%, transparent), 0 0 24px color-mix(in srgb, var(--accent) 55%, transparent);   /* r162 (audit) — theme-aware spotlight dim */
  pointer-events: none;
  transition: left 0.25s ease, top 0.25s ease, width 0.25s ease, height 0.25s ease;
}
.rm-tour-pop {
  position: absolute;
  width: 340px; max-width: calc(100vw - 24px);
  background: var(--panel-strong, var(--panel));
  border: 1px solid var(--accent);
  border-radius: 14px;
  padding: 16px 18px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 36px color-mix(in srgb, var(--accent) 35%, transparent);
  pointer-events: auto;
  transition: left 0.25s ease, top 0.25s ease;
}
.rm-tour-step {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px; letter-spacing: 0.18em; color: var(--accent); margin-bottom: 6px;
}
.rm-tour-pop h3 { margin: 0 0 8px; font-size: 16px; color: var(--text); }
.rm-tour-pop p { margin: 0 0 14px; font-size: 13px; line-height: 1.55; color: var(--text-dim); }
.rm-tour-actions { display: flex; align-items: center; gap: 10px; }
.rm-tour-skip {
  background: transparent; border: 1px solid var(--line); color: var(--text-fade);
  border-radius: 8px; padding: 6px 10px; font-size: 11px; cursor: pointer;
}
.rm-tour-skip:hover { color: var(--accent); border-color: var(--accent); }
.rm-tour-dots { display: flex; gap: 4px; flex: 1; justify-content: center; }
.rm-tour-dots span { width: 6px; height: 6px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 25%, transparent); }
.rm-tour-dots span.on { background: var(--accent); box-shadow: 0 0 6px var(--accent); }
.rm-tour-nav { display: flex; gap: 6px; }
.rm-tour-back {
  background: transparent; border: 1px solid var(--line); color: var(--text);
  border-radius: 8px; padding: 6px 12px; font-size: 12px; cursor: pointer;
}
.rm-tour-back:hover { border-color: var(--accent); color: var(--accent); }
.rm-tour-next { padding: 6px 16px; font-size: 12px; border-radius: 8px; }


/* ═════════════════════════════════════════════════════════════════════
   r14 — finished-product polish
   ═════════════════════════════════════════════════════════════════════ */

/* Elegant bottom fade on the HUD docks: when widgets overflow a short
   viewport the dock scrolls (hidden scrollbar); the fade signals "more
   below" instead of an abrupt clip. */
.rm-dock {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent);
          mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent);
  scroll-behavior: smooth;
}

/* ══════════════════════════════════════════════════════════════════════
   r16 — Mini-tools utility dock, floating tool window, rich-text toolbar,
   image control bar, and native table item. Minimal, theme-token driven.
   ══════════════════════════════════════════════════════════════════════ */

/* Toggleable left-edge launcher rail */
.rm-tools-dock {
  position: fixed; left: 12px; top: 50%; transform: translateY(-50%);
  z-index: 47;
  display: flex; flex-direction: column; gap: 4px;
  padding: 8px 6px;
  width: 60px;
  background: var(--panel-strong);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--hud-shadow);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  max-height: calc(100vh - 140px);   /* r26 — never clip the 11-button rail on short laptops */
  overflow-y: auto;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 16px), transparent);
          mask-image: linear-gradient(to bottom, #000 calc(100% - 16px), transparent);
}
.rm-tools-dock::-webkit-scrollbar { display: none; }
.rm-tools-dock[hidden] { display: none; }
.rm-tools-dock-head {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 8px; letter-spacing: 0.18em; color: var(--text-fade);
  text-align: center; padding: 2px 0 4px;
}
.rm-tool-launch {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 7px 2px; border-radius: 10px;
  background: transparent; border: 1px solid transparent;
  color: var(--text-dim); cursor: pointer;
  font-size: 17px; line-height: 1;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .1s ease;
}
.rm-tool-launch span {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 8px; letter-spacing: 0.04em; color: var(--text-fade);
}
.rm-tool-launch:hover { background: var(--panel-glass); border-color: var(--line); color: var(--accent); transform: translateY(-1px); }
.rm-tool-launch:hover span { color: var(--text-dim); }
.rm-tool-launch.active { border-color: var(--line-strong); color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
/* r158 (audit) — removed dead `body.rm-tools-on .rm-dock-left { left:84px }`: `rm-tools-on` is now set ONLY inside the
   board editor (rmBdTools), where the HUD rails are already `display:none` (body.rm-in-editor .rm-dock), so the shift
   could never apply to a visible rail — a latent overlap trap with no live effect. The companion handle rule is gone too. */

/* Floating, draggable tool window */
.rm-toolwin {
  position: fixed; top: 110px; left: 96px; z-index: 60;
  width: 312px; max-width: calc(100vw - 32px);
  background: var(--panel-strong);
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  box-shadow: var(--hud-shadow-strong);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  overflow: hidden;
}
.rm-toolwin[hidden] { display: none; }
.rm-toolwin-head {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px;
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  border-bottom: 1px solid var(--line);
  cursor: grab; user-select: none;
}
.rm-toolwin-head:active { cursor: grabbing; }
.rm-toolwin-title {
  flex: 1; font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px; letter-spacing: 0.1em; color: var(--accent); text-transform: uppercase;
}
.rm-toolwin-close {
  background: transparent; border: none; color: var(--text-dim);
  font-size: 14px; cursor: pointer; padding: 2px 6px; border-radius: 6px;
}
.rm-toolwin-close:hover { color: var(--danger); background: rgba(248,113,113,0.12); }
.rm-toolwin-body { padding: 14px; max-height: 70vh; overflow-y: auto; scrollbar-width: thin; }

/* Generic tool form controls */
.rm-tw-row { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; }
.rm-tw-label { font-size: 10px; letter-spacing: 0.06em; color: var(--text-fade); text-transform: uppercase; font-family: "JetBrains Mono", ui-monospace, monospace; }
.rm-tw-input, .rm-tw-area, .rm-tw-select {
  width: 100%; box-sizing: border-box;
  background: var(--bg-soft); color: var(--text);
  border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 10px; font-size: 13px; font-family: inherit;
  outline: none;
}
.rm-tw-input:focus, .rm-tw-area:focus, .rm-tw-select:focus { border-color: var(--accent); }
.rm-tw-area { resize: vertical; min-height: 64px; font-family: ui-monospace, monospace; font-size: 12px; }
.rm-tw-btn {
  background: var(--panel-glass); color: var(--text);
  border: 1px solid var(--line); border-radius: 8px;
  padding: 7px 12px; font-size: 12px; cursor: pointer; font-family: inherit;
  transition: border-color .15s, color .15s, background .15s;
}
.rm-tw-btn:hover { border-color: var(--accent); color: var(--accent); }
.rm-tw-btn.primary { background: color-mix(in srgb, var(--accent) 18%, transparent); border-color: var(--line-strong); color: var(--accent); }
.rm-tw-btn.primary:hover { background: color-mix(in srgb, var(--accent) 28%, transparent); }
.rm-tw-out {
  background: var(--bg-soft); border: 1px dashed var(--line);
  border-radius: 8px; padding: 10px; margin-top: 4px;
  font-family: ui-monospace, monospace; font-size: 13px; color: var(--text);
  word-break: break-word; min-height: 18px;
}
.rm-tw-big { font-size: 22px; font-weight: 600; color: var(--accent); }
.rm-tw-hint { font-size: 10px; color: var(--text-fade); margin-top: 2px; line-height: 1.4; }
.rm-tw-qr { display: flex; justify-content: center; padding: 10px; background: #fff; border-radius: 8px; margin-top: 6px; }
.rm-tw-qr img, .rm-tw-qr canvas { display: block; image-rendering: pixelated; }
.rm-tw-calc-keys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 8px; }
.rm-tw-calc-keys button { padding: 11px 0; font-size: 15px; }
.rm-tw-swatch { width: 100%; height: 40px; border-radius: 8px; border: 1px solid var(--line); margin-top: 4px; }
.rm-tw-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* Floating rich-text formatting toolbar */
.rm-richbar, .rm-imgbar {
  position: fixed; z-index: 58;
  display: flex; align-items: center; gap: 2px;
  padding: 4px 6px;
  background: var(--panel-strong);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  box-shadow: var(--hud-shadow-strong);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.rm-richbar[hidden], .rm-imgbar[hidden] { display: none; }
.rm-rb-btn {
  min-width: 26px; height: 26px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid transparent; border-radius: 6px;
  color: var(--text-dim); cursor: pointer; font-size: 12px; line-height: 1;
}
.rm-rb-btn:hover { color: var(--accent); border-color: var(--line); background: var(--panel-glass); }
.rm-rb-btn.active { color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); border-color: var(--line-strong); }
.rm-rb-sep { width: 1px; height: 18px; background: var(--line); margin: 0 3px; }
/* r67 — native font picker in the text toolbar (theme-coloured, matches buttons) */
.rm-rb-font {
  height: 26px; max-width: 110px; padding: 0 22px 0 8px;
  background: var(--panel-glass) no-repeat right 6px center / 9px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%23889' stroke-width='1.4' stroke-linecap='round'/></svg>");
  border: 1px solid var(--line); border-radius: 6px;
  color: var(--text); font-size: 12px; line-height: 1; cursor: pointer;
  -webkit-appearance: none; appearance: none; outline: none;
}
.rm-rb-font:hover { border-color: var(--line-strong); color: var(--accent); }
.rm-rb-font:focus-visible { border-color: var(--accent); }
/* r162 (audit) — same scoping as the export selector: forced light option palette + darker chevron only on light themes. */
body.rm-light .rm-rb-font option { color: #12203a; background: #f4f8ff; }
body.rm-light .rm-rb-font { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%23556' stroke-width='1.4' stroke-linecap='round'/></svg>"); }
.rm-rb-color {
  position: relative; width: 26px; height: 26px; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-dim); font-size: 12px; cursor: pointer; overflow: hidden;
  border: 1px solid transparent;
}
.rm-rb-color:hover { border-color: var(--line); }
.rm-rb-color input[type="color"] {
  position: absolute; inset: 0; opacity: 0; cursor: pointer; border: none; padding: 0;
}
.rm-imgbar label { display: inline-flex; align-items: center; gap: 4px; color: var(--text-dim); font-size: 12px; padding: 0 4px; }
.rm-imgbar input[type="range"] { width: 70px; accent-color: var(--accent); }

/* r16 — editable table overlay (transparent cells; the canvas/3D texture
   draws the grid + header tint, this layer provides editable text aligned to it) */
.rm-bd-table {
  position: absolute;
  border-collapse: collapse;
  table-layout: fixed;
  color: #eaf4ff;
  font-family: Inter, -apple-system, system-ui, sans-serif;
  background: transparent;
  pointer-events: auto;
}
.rm-bd-table td {
  border: 0;
  padding: 0 8px;
  vertical-align: middle;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  outline: none;
  caret-color: var(--tcol, var(--accent));
}
.rm-bd-table td.rm-bd-th { font-weight: 700; color: var(--tcol, var(--accent)); }
.rm-bd-table td:focus { background: color-mix(in srgb, var(--tcol, var(--accent)) 12%, transparent); }
/* r22/r23 — on any light board theme the near-white table text is invisible; force dark ink (luminance-driven body.rm-light covers future light themes) */
body.rm-light .rm-bd-table,
body.rm-light .rm-bd-table td.rm-bd-th { color: #15233b; }
/* let the contextual table bar's text buttons size to content */
#rmTableBar .rm-rb-btn { min-width: 0; padding: 0 8px; font-size: 11px; font-family: "JetBrains Mono", ui-monospace, monospace; }

/* ══════════════════════════════════════════════════════════════════════
   r17 — fixes: float the r16 toolbars/tools ABOVE the z-index:200 board
   editor (they were rendering behind it → invisible & non-interactive),
   plus cursor + small polish.
   ══════════════════════════════════════════════════════════════════════ */
.rm-richbar, .rm-imgbar { z-index: 240; }
.rm-toolwin { z-index: 240; }
.rm-tools-dock { z-index: 210; }
/* In the editor the left HUD docks are hidden, so the tools rail sits flush;
   nudge it just inside the editor's padded canvas so it never clips content. */
body.rm-in-editor .rm-tools-dock { top: 120px; transform: none; max-height: calc(100vh - 200px); }   /* r144 (audit #7) — cap the rail so its bottom buttons clear the centred editor navbar on short viewports (rail bottom = 120 + (100vh-200) = 100vh-80, ~18px above the navbar top). The rail already has overflow-y:auto, so capped overflow scrolls. */

/* r17 — board editor canvas cursors are set per-hover in JS; ensure the
   grab/grabbing states read cleanly on the holder too. */
.rm-bd-canvas-holder { cursor: default; }

/* ══════════════════════════════════════════════════════════════════════
   r19 — glass finish + a11y/polish (focus states, selection, scrollbars,
   reduced motion). Appended last so it tops earlier rules where needed.
   ══════════════════════════════════════════════════════════════════════ */

/* Frosted-glass treatment on the floating chrome — consistent blur + radius */
.rm-header,
.rm-w,
.rm-pop,
.rm-hud-pop,
.rm-modal-card,
.rm-toolwin,
.rm-tools-dock,
.rm-dock-sticky,
.rm-editor-navbar,
.rm-richbar,
.rm-imgbar,
.rm-focusbar {
  backdrop-filter: blur(var(--glass-blur)) saturate(1.3);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.3);
}
.rm-header { border-radius: var(--r-lg); }
.rm-w, .rm-pop, .rm-hud-pop { border-radius: var(--r-md); }
.rm-modal-card, .rm-toolwin, .rm-dock-sticky, .rm-editor-navbar, .rm-tools-dock { border-radius: var(--r-lg); }
.rm-tg-card { border-radius: var(--r-lg); }

/* Theme-accent text selection (correct in every theme incl. light/glass) */
::selection { background: color-mix(in srgb, var(--accent) 30%, transparent); color: var(--text); }
::-moz-selection { background: color-mix(in srgb, var(--accent) 30%, transparent); color: var(--text); }

/* Visible keyboard focus across all interactive chrome */
.rm-iconbtn:focus-visible, .rm-btn:focus-visible, .rm-dock-btn:focus-visible,
.rm-tool-launch:focus-visible, .rm-bd-tool:focus-visible, .rm-rb-btn:focus-visible,
.rm-tg-cat:focus-visible, .rm-tg-close:focus-visible, .rm-hud-btn:focus-visible,
.rm-bd-btn:focus-visible, .rm-nav-chip:focus-visible, .rm-tw-btn:focus-visible,
.rm-theme-chip:focus-visible, .rm-hud-preset:focus-visible, .rm-nav-viewbtn:focus-visible,
.rm-cal-btn:focus-visible, .rm-rb-font:focus-visible,
.rm-bd-menuitem:focus-visible, .rm-bd-tplbtn:focus-visible, .rm-fp-shape:focus-visible, .rm-fp-conn:focus-visible {   /* r69 — font picker gets the same strong focus ring as its toolbar siblings; r161 (audit a11y) — the Board-actions menu items, template buttons + flow palette were keyboard-focusable but had only the UA default outline (low-contrast on glass themes) */
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent);
}

/* Editable titles announce themselves */
.rm-title, .rm-bd-title { cursor: text; }
.rm-title:hover, .rm-bd-title:hover { background: color-mix(in srgb, var(--text) 8%, transparent); border-radius: 6px; }

/* Themed webkit scrollbars on the scrolling panels */
.rm-toolwin-body::-webkit-scrollbar, .rm-tg-main::-webkit-scrollbar,
.rm-tg-sidebar::-webkit-scrollbar,
.rm-w-todo-list::-webkit-scrollbar, .rm-w-rem-list::-webkit-scrollbar { width: 8px; height: 8px; }
.rm-toolwin-body::-webkit-scrollbar-thumb, .rm-tg-main::-webkit-scrollbar-thumb,
.rm-tg-sidebar::-webkit-scrollbar-thumb, .rm-w-todo-list::-webkit-scrollbar-thumb,
.rm-w-rem-list::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--accent) 28%, transparent); border-radius: 8px; }
.rm-toolwin-body::-webkit-scrollbar-track, .rm-tg-main::-webkit-scrollbar-track,
.rm-tg-sidebar::-webkit-scrollbar-track { background: transparent; }

/* Locked template card — dim only the thumbnail, keep meta + badge crisp */
.rm-tg-card-item.locked { opacity: 1; }
.rm-tg-card-item.locked .rm-tg-thumb { opacity: 0.5; }

/* Lift the gesture cheatsheet above the sticky dock band */
.rm-nav { bottom: 74px; left: 268px; max-width: min(360px, calc(50vw - 300px)); }   /* r26 — clear the left dock (14+240+14) and never reach screen centre on wide monitors */

/* Rich-text colour swatches preview the picked colour */
.rm-rb-color { border-bottom: 2px solid currentColor; }
.rm-rb-btn:active, .rm-tool-launch:active, .rm-tw-btn:active { transform: scale(0.94); }

/* Respect reduced-motion: kill decorative loops, keep the UI usable */
@media (prefers-reduced-motion: reduce) {
  .rm-brand-dot, .rm-brand-dot::after, .rm-bd-title, .rm-led { animation: none !important; }
  /* r21 — also silence the two infinite rmBlink loops (clock colon, present-pill dot) */
  .rm-w-clock-time .rm-colon, body.rm-presenting .rm-focus-dot { animation: none !important; }
  .rm-pomo-disc.rm-pomo-running .rm-pomo-dot { animation: none !important; }   /* r68 — silence the pomodoro pulse */
  .rm-ai-typing i { animation: none !important; opacity: 1; }   /* r214 (audit LOW) — the AI Hub typing dots were the one looping motion left un-gated */
  .rm-bd-title { -webkit-text-fill-color: var(--editor-accent, var(--accent)); }
  .rm-cx-face:hover { transform: none; }   /* r118 — silence the exploded-view face hover-lift (motion) */
  * { scroll-behavior: auto !important; }
}

/* r19 — header cluster dividers (breaks the wall of icon buttons) */
.rm-hdr-sep { width: 1px; align-self: stretch; margin: 6px 0; background: var(--line); opacity: 0.7; }   /* r26 — drop horizontal margin so the flex gap alone spaces clusters evenly */

/* ══════════════════════════════════════════════════════════════════════
   r19 — responsive hardening (phones, tablets, ultrawide, any browser).
   Builds on the earlier breakpoints; appended last so it wins.
   ══════════════════════════════════════════════════════════════════════ */

/* keep the floating editor nav bar within the viewport on small screens */
@media (max-width: 1150px) {
  .rm-editor-navbar { max-width: calc(100vw - 20px); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
  .rm-editor-navbar::-webkit-scrollbar { height: 0; }
}

/* tablet-ish: header stays one row and scrolls horizontally instead of wrapping */
@media (max-width: 1200px) {
  /* r144 (audit) — the scrolling header had a fully-hidden scrollbar and NO affordance, so the controls past
     the right edge (HUD / templates / export / help …) were undiscoverable. A soft right-edge fade hints that
     the bar scrolls. mask-image only fades the render — buttons under it stay fully clickable.
     r154 (audit) — raised 1000→1200px: the r153 #rmAccount button widened the right cluster, so natural overflow
     now begins ~1030–1100px; without this, the rightmost controls bled past the rounded edge with no scroll. */
  .rm-header { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 28px), rgba(0,0,0,0.32) 100%);
            mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 28px), rgba(0,0,0,0.32) 100%); }
  .rm-header::-webkit-scrollbar { height: 0; }
  .rm-header > * { flex: 0 0 auto; }
  .rm-hdr-sep { display: none; }
  /* r154 (audit) — Export/Import are both reachable via ⌘K (and cloud sync covers the backup workflow), so drop them
     from the scroll band to relieve right-cluster density now that #rmAccount is a 9th icon button. */
  #rmExport, #rmImport { display: none; }
  .rm-tools-dock { transform: translateY(-50%) scale(0.9); transform-origin: left center; }
  /* r21 — the scrolling header clips its absolutely-positioned popovers; pin
     them just below the header bar so theme + HUD panels stay fully usable. */
  #rmThemePop, #rmHudPop {
    position: fixed; top: 56px; right: 8px; left: auto;
    max-height: calc(100vh - 72px); overflow-y: auto;
  }
}

/* phones */
@media (max-width: 768px) {
  .rm-tools-dock { left: 6px; }
  .rm-toolwin { left: 8px !important; right: 8px; width: auto; top: 76px; }
  .rm-richbar, .rm-imgbar { max-width: calc(100vw - 16px); flex-wrap: wrap; height: auto; }
  .rm-bd-exports .rm-quota { display: none; }
  /* gallery: stack sidebar over a single-column grid */
  .rm-tg-body { flex-direction: column; }   /* r146 (audit MED) — stack the category sidebar ABOVE the grid on mobile (was an empty rule → the side-by-side row squeezed both columns at ≤768px) */
  .rm-tg-sidebar { width: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; overflow-x: auto; gap: 6px; padding: 8px; }
  .rm-tg-main { padding: 12px; }
  .rm-tg-grid { grid-template-columns: 1fr 1fr; }
  /* modals: full-width with margin */
  .rm-modal-card { width: calc(100vw - 28px); max-width: 460px; }
}

/* small phones */
@media (max-width: 560px) {
  .rm-header { padding: 6px 8px; gap: 4px; }
  /* r207 (mobile) — the brand cluster ate ~140px of a ~390px bar (wordmark ~70px + plan badge ~70px), pushing every
     header control off-screen behind the horizontal scroll. Collapse it to just the BT logo so Add board + Theme + HUD
     are visible WITHOUT scrolling; the wordmark is decorative and the plan/trial state stays reachable via the upgrade
     button + ⌘K. The remaining secondary icons still scroll (with the right-edge fade cue) as before. */
  .rm-brand { padding-right: 8px; margin-right: 2px; gap: 6px; }
  .rm-brand-name { display: none; }
  .rm-plan-badge { display: none; }
  /* r207 (mobile) — these three are pure feature LAUNCHERS, each fully reachable from ⌘K (Browse templates / Cloud sync /
     AI Hub). Dropping them from the phone header (mirrors the existing #rmExport/#rmImport hide) declutters the bar and
     brings the interactive essentials — Add board · Theme · HUD · Upgrade · Search (⌘K) · Help — into reach. */
  #rmTemplatesBtn, #rmAccount, #rmAiLaunch { display: none; }
  /* r207 (mobile) — the HUD widgets + their dock are already hidden at <=620px (they'd be unusably cramped on a phone),
     so the 104px "HUD ON ▾" toggle controls nothing visible here. Hiding it reclaims the width that was pushing Search (⌘K)
     + Help off-screen, so the phone header lands on: logo · title · Add board · Theme · Upgrade · Search · Help — all visible. */
  #rmHudToggle, #rmHudPop { display: none; }
  .rm-iconbtn { width: 30px; height: 30px; font-size: 13px; }
  .rm-btn.primary { font-size: 12px; padding: 6px 9px; }
  #rmExport, #rmImport, #rmWalk { display: none; }   /* low-priority on tiny screens */
  .rm-nav { display: none; }
  .rm-dock-sticky { gap: 2px; padding: 5px 7px; }
  .rm-dock-btn { width: 32px; height: 32px; font-size: 15px; }
  .rm-tg-grid { grid-template-columns: 1fr; }
  .rm-bd-tool { width: 30px; height: 30px; }
  .rm-bd-btn { padding: 5px 7px; font-size: 11px; }
  /* r208 (mobile) — the board title has min-width:0, so on a phone the nowrap editor header squeezed it down to a
     single letter ("T."). Pin a small min-width + cap so it shows a readable ellipsised name; the tool strip (flex:1,
     scrolls internally) absorbs the squeeze instead, so the trailing Export / ⋯Board controls never clip. */
  .rm-bd-title { flex: 0 0 auto; min-width: 46px; max-width: 92px; }
  .rm-bd-export-sel { max-width: 86px; }
}
/* r211 (audit LOW) — on very narrow phones (≤360px: iPhone SE-1, Fold cover) the r208 title min-width:46px pinned the
   nowrap editor header wider than the viewport, clipping the Export dropdown off the right edge (the header has no
   overflow-x escape). Let the title shrink to fit there (the max-width cap still stops it hogging space on roomier phones). */
@media (max-width: 360px) { .rm-bd-title { min-width: 0; } }

/* coarse-pointer (touch) niceties */
@media (pointer: coarse) {
  .rm-iconbtn, .rm-dock-btn, .rm-tool-launch, .rm-bd-tool, .rm-rb-btn,
  .rm-color-chip, .rm-color-custom, .rm-fp-conn,
  .rm-w-rem-gcal, .rm-w-rem-del, .rm-w-todo-del { min-width: 36px; min-height: 36px; }   /* r184 (audit MED) — these tappable controls (board-editor colour swatches, flowchart connector-style buttons, reminder/todo row actions) were 22–30px, below the 36px coarse-pointer floor; min-height wins over their fixed small height */
  .rm-rb-font { min-height: 36px; }   /* r69 — match the coarse-pointer touch-target bump its toolbar siblings get */
  .rm-bd-facetab { min-height: 40px; padding: 8px 13px; }   /* r214 (audit MED) — the in-editor face switcher was ~23px (6px pad + 11px line) — below even the 36px floor every sibling editor control gets; it's the SOLE in-editor face-switch control, so size it for confident touch (mirrors the r135 .rm-cf-facebtn 42px treatment) */
  .rm-w-resize { width: 36px; height: 36px; font-size: 16px; }   /* r88 (N11) — widget resize handle to the 36px coarse-pointer minimum (grows up-left from its anchor) */
  .rm-w { padding-bottom: 40px; }   /* r89 (R3) — clear the enlarged 36px handle so it can't cover the widget's bottom-row input on touch */
}
/* r184 (audit LOW) — on touch there's no hover, so widget-header collapse/close buttons (opacity .65, →1 only on .rm-w:hover) stayed permanently dimmed + hard to see; reveal them on hover-less devices (mirrors the .rm-ai-acts precedent). */
@media (hover: none) {
  .rm-w-title > .rm-w-toggle, .rm-w-title > .rm-w-collapse { opacity: 1; }
}

/* r112 — the side HUD docks used to VANISH ≤980px (they "ate too much width"). They now AUTO-RESIZE
   down instead (responsive scale near .rm-dock-right), so the widgets stay visible and usable on small
   laptops/tablets while the narrower rail hands width back to the 3D boards. Only the (removed) minimap
   stays hidden here; the docks hide only at true-mobile ≤540px. */
@media (max-width: 980px) {
  .rm-minimap { display: none !important; }
}

/* ──────────────────────────────────────────────────────────────────────────
   r20 — PRESENTATION / FOCUS MODE (press P)
   Hide every piece of chrome so a single spotlighted board fills the screen.
   Only the canvas + a slim "PRESENTING" pill remain. Built for demos, design
   reviews, and distraction-free deep-focus. Exit with Esc or P.
   ────────────────────────────────────────────────────────────────────────── */
body.rm-presenting .rm-header,
body.rm-presenting .rm-dock,
body.rm-presenting .rm-dock-sticky,
body.rm-presenting .rm-nav,
body.rm-presenting .rm-tools-dock,
body.rm-presenting .rm-toolwin,
body.rm-presenting .rm-minimap,
body.rm-presenting .rm-dock-resize,
body.rm-presenting .rm-w {
  display: none !important;
}
/* Dim the whole viewport edges with a soft vignette so the eye locks onto the
   board — a system-psychology nudge toward single-task focus. */
body.rm-presenting::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 40;
  box-shadow: inset 0 0 220px 40px rgba(0, 0, 0, 0.55);
}
/* The focus pill becomes the only control surface — centre it at the top and
   give it presence. */
body.rm-presenting .rm-focusbar {
  z-index: 60;
  top: 18px;
  padding: 10px 18px;
  font-size: 13px;
  letter-spacing: 0.06em;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.55),
              0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent);
  animation: rmPresentPill 0.4s ease both;
}
body.rm-presenting .rm-focus-label {
  color: var(--accent);
  text-shadow: 0 0 10px color-mix(in srgb, var(--accent) 55%, transparent);
}
body.rm-presenting .rm-focus-dot { animation: rmBlink 1.4s steps(2) infinite; }
@keyframes rmPresentPill {
  from { opacity: 0; transform: translate(-50%, -10px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
@media print {
  body.rm-presenting::after,
  body.rm-presenting .rm-focusbar { display: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   r24 — Help & Accessibility side panel (toggleable slide-in drawer) + the
   global text-size accessibility control.
   ══════════════════════════════════════════════════════════════════════════ */
.rm-help-panel {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 340px; max-width: 92vw;
  z-index: 950;   /* r146 (audit MED) — was 95: a DOCKED AI Hub (z-index 900) fully occluded the Help drawer (it opened invisible behind the hub). 950 puts Help above the hub, still below modals (1000). */
  display: flex; flex-direction: column;
  background: var(--panel-strong, var(--panel));
  border-left: 1px solid var(--accent);
  box-shadow: -18px 0 54px rgba(0,0,0,0.5);
  backdrop-filter: blur(var(--glass-blur, 14px)) saturate(1.3);
  -webkit-backdrop-filter: blur(var(--glass-blur, 14px)) saturate(1.3);
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  font-family: Inter, -apple-system, system-ui, sans-serif;
  color: var(--text);
}
.rm-help-panel.open { transform: translateX(0); }
/* r25 — the [hidden] attribute must always win over display:flex (defense in
   depth: even if the .open class is ever stranded, a hidden panel stays gone). */
.rm-help-panel[hidden] { display: none !important; }
/* r26 — Connections hub inside the Help panel */
.rm-hp-h { margin: 0 0 8px; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); }
.rm-hp-conn-status { font-size: 12px; font-weight: 600; color: var(--text-dim); margin-bottom: 6px; }
.rm-hp-conn-status.on { color: var(--up); }   /* r93 — tokenised */
.rm-hp-conn-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12.5px; color: var(--text); padding: 3px 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.rm-hp-conn-scope { font-family: "JetBrains Mono", monospace; font-size: 10px; color: var(--text-dim); }
.rm-hp-conn-soon { opacity: 0.55; }
.rm-hp-conn-actions { margin: 10px 0 4px; }
.rm-hp-conn-hint, .rm-hp-priv { font-size: 11px; line-height: 1.5; color: var(--text-dim); }
.rm-hp-priv { margin: 10px 0; }
.rm-hp-conn-hint code { font-family: "JetBrains Mono", monospace; font-size: 10px; }
.rm-hp-head {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 18px; border-bottom: 1px solid var(--line);
}
.rm-hp-title { font-family: "JetBrains Mono", monospace; font-size: 13px; letter-spacing: 0.10em; color: var(--accent); flex: 1; }
.rm-hp-close {
  background: transparent; border: 1px solid var(--line); color: var(--text-dim);
  width: 28px; height: 28px; border-radius: 7px; cursor: pointer; font-size: 13px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.rm-hp-close:hover { border-color: var(--accent); color: var(--accent); }
.rm-hp-body { flex: 1 1 auto; overflow-y: auto; padding: 6px 18px 24px; }
.rm-hp-sec { padding: 14px 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.rm-hp-sec:last-child { border-bottom: none; }
.rm-hp-sec h4 { margin: 0 0 9px; font-size: 11px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--text-dim); font-weight: 700; }
.rm-hp-fontrow { display: flex; gap: 8px; }
.rm-hp-fbtn {
  flex: 1; padding: 9px 0; border-radius: var(--r-sm, 8px);
  border: 1px solid var(--line-strong, var(--line)); background: color-mix(in srgb, var(--accent) 7%, transparent);
  color: var(--text); cursor: pointer; font-family: inherit; transition: all 0.15s ease;
}
.rm-hp-fbtn:nth-child(1) { font-size: 12px; }
.rm-hp-fbtn:nth-child(2) { font-size: 15px; }
.rm-hp-fbtn:nth-child(3) { font-size: 18px; }
.rm-hp-fbtn:hover { border-color: var(--accent); }
.rm-hp-fbtn[aria-pressed="true"] { background: color-mix(in srgb, var(--accent) 22%, transparent); border-color: var(--accent); color: var(--accent); font-weight: 700; }
.rm-hp-note { margin: 8px 0 0; font-size: 11px; color: var(--text-fade); line-height: 1.4; }
.rm-hp-list { margin: 0; padding-left: 18px; font-size: 12.5px; line-height: 1.6; color: var(--text-dim); }
.rm-hp-list li { margin-bottom: 6px; }
.rm-hp-list b { color: var(--text); font-weight: 600; }
/* r85 — Learn menu (dock): reuses the morepop look; fixed + above the dock (z 46) */
.rm-learn-pop { position: fixed; z-index: 260; min-width: 235px; }

/* r84 — searchable shortcut directory (Help → Keyboard & mouse reference) */
.rm-hp-scfilter {
  width: 100%; margin: 2px 0 8px; padding: 7px 9px;
  background: color-mix(in srgb, var(--panel) 70%, transparent);
  border: 1px solid var(--line); border-radius: 7px;
  color: var(--text); font: inherit; font-size: 12px;
}
.rm-hp-scfilter:focus { outline: none; border-color: var(--accent); }
.rm-hp-sccat {
  margin: 10px 0 4px; font-size: 10px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--accent); opacity: 0.85;
}
.rm-hp-sccat:first-child { margin-top: 2px; }
.rm-hp-keys { width: 100%; border-collapse: collapse; font-size: 12px; }
.rm-hp-keys td { padding: 4px 0; vertical-align: top; color: var(--text-dim); }
.rm-hp-keys td:first-child { width: 96px; white-space: nowrap; }
.rm-hp-keys kbd {
  font-family: "JetBrains Mono", monospace; font-size: 10px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; color: var(--text);
}
.rm-hp-tip { margin: 0 0 10px; font-size: 12.5px; line-height: 1.55; color: var(--text); background: color-mix(in srgb, var(--accent) 8%, transparent); border-left: 3px solid var(--accent); border-radius: 0 6px 6px 0; padding: 9px 11px; }
.rm-hp-tipbtn, .rm-hp-tourbtn {
  background: color-mix(in srgb, var(--accent) 10%, transparent); border: 1px solid var(--line-strong, var(--line));
  color: var(--text); border-radius: var(--r-sm, 8px); padding: 8px 12px; cursor: pointer; font-family: inherit; font-size: 12px;
  transition: all 0.15s ease;
}
.rm-hp-tourbtn { width: 100%; }
.rm-hp-tipbtn:hover, .rm-hp-tourbtn:hover { border-color: var(--accent); color: var(--accent); }
@media (max-width: 560px) { .rm-help-panel { width: 100vw; max-width: 100vw; } }

/* r24 — global text-size accessibility scale: bump the key reading surfaces.
   Default (md) leaves sizes unchanged; sm/lg shift the most-read widget text. */
body.rm-text-lg .rm-w-input,
body.rm-text-lg .rm-w-todo-text, body.rm-text-lg .rm-w-todo-item,
body.rm-text-lg .rm-w-rem-txt, body.rm-text-lg .rm-w-rem-when-label,
body.rm-text-lg .rm-w-notes, body.rm-text-lg .rm-w-empty,
body.rm-text-lg .rm-cal-ev-title, body.rm-text-lg .rm-cal-ev-when,
body.rm-text-lg .rm-w-newscard-title,
body.rm-text-lg .rm-hp-list, body.rm-text-lg .rm-hp-keys,
body.rm-text-lg .rm-tw-out, body.rm-text-lg .rm-tw-label { font-size: 15px !important; line-height: 1.5; }
body.rm-text-lg .rm-w-vision-box { font-size: 17px !important; }

body.rm-text-sm .rm-w-input,
body.rm-text-sm .rm-w-todo-text, body.rm-text-sm .rm-w-todo-item,
body.rm-text-sm .rm-w-rem-txt,
body.rm-text-sm .rm-w-notes, body.rm-text-sm .rm-w-empty,
body.rm-text-sm .rm-cal-ev-title,
body.rm-text-sm .rm-w-newscard-title,
body.rm-text-sm .rm-hp-list, body.rm-text-sm .rm-hp-keys { font-size: 10.5px !important; }
/* r25 — mirror the lg list's extra labels so A- scales the same surfaces as A+
   (these default to 9-10px, so use a value below 10.5px to actually shrink). */
body.rm-text-sm .rm-w-rem-when-label,
body.rm-text-sm .rm-cal-ev-when,
body.rm-text-sm .rm-tw-out, body.rm-text-sm .rm-tw-label { font-size: 8.5px !important; }
body.rm-text-sm .rm-w-vision-box { font-size: 13px !important; }

/* r24 — Mail (Gmail) widget */
.rm-w-mail-list { display: flex; flex-direction: column; gap: 2px; max-height: 150px; overflow-y: auto; margin-bottom: 6px; }   /* r26 — match the other dock lists so the right dock stays balanced */

/* r26 — read-only Google Tasks feed in the Todo widget */
.rm-w-gtasks { margin-top: 8px; border-top: 1px solid var(--line); padding-top: 6px; }
.rm-w-gtasks:empty { display: none; }
.rm-w-gt-head { display: flex; align-items: center; justify-content: space-between; font-size: 9.5px; letter-spacing: 0.1em; color: var(--text-dim); margin-bottom: 4px; }
.rm-w-gt-item { display: flex; align-items: center; gap: 6px; padding: 2px 0; }
.rm-w-gt-title { flex: 1; font-size: 11.5px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-w-gt-add { flex: none; width: 18px; height: 18px; border: none; border-radius: 5px; background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--text); cursor: pointer; line-height: 1; }
.rm-w-gt-add:hover { background: color-mix(in srgb, var(--accent) 40%, transparent); }

/* r27 — Focus Radio music panel */
.rm-mu-now { display: flex; align-items: center; gap: 8px; margin: 2px 0 8px; }
.rm-mu-play {
  flex: none; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--text);
  font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s ease, transform 0.1s ease;
}
.rm-mu-play:hover { background: color-mix(in srgb, var(--accent) 32%, transparent); }
.rm-mu-play.on { background: var(--accent); color: var(--on-accent); }   /* r108 — was #06101e (invisible on light-theme accents) */
.rm-mu-eq { flex: none; display: flex; align-items: flex-end; gap: 2px; height: 22px; width: 30px; }
.rm-mu-eq span { flex: 1; background: linear-gradient(to top, var(--accent), color-mix(in srgb, var(--accent) 40%, #fff)); height: 100%; transform: scaleY(0.2); transform-origin: bottom; border-radius: 1px; transition: transform 0.14s ease; opacity: 0.5; }
.rm-mu-eq.on span { opacity: 1; }
.rm-mu-meta { flex: 1; min-width: 0; line-height: 1.2; }
.rm-mu-genre { font-size: 12.5px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-mu-station { font-size: 10px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-mu-genres { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.rm-mu-chip { font-size: 10px; padding: 3px 7px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--text-dim); cursor: pointer; transition: all 0.12s ease; }
.rm-mu-chip:hover { color: var(--text); border-color: var(--accent); }
.rm-mu-chip.on { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--text); border-color: var(--accent); }
.rm-mu-volrow { display: flex; align-items: center; gap: 6px; }
.rm-mu-vico { font-size: 11px; color: var(--text-dim); }
.rm-mu-vol { flex: 1; height: 4px; accent-color: var(--accent); cursor: pointer; }

/* r27 — Flowchart palette popover */
.rm-bd-flowpop { position: fixed; z-index: 250; width: 264px; padding: 10px; border-radius: 12px; background: var(--panel-strong, var(--panel)); border: 1px solid var(--line); box-shadow: var(--hud-shadow, 0 18px 54px rgba(0,0,0,0.5)); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.rm-bd-flowpop.hidden { display: none; }
.rm-fp-sec { font-size: 9.5px; letter-spacing: 0.12em; color: var(--text-dim); margin: 4px 2px 6px; }
.rm-fp-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.rm-fp-shape { flex: 1 1 auto; min-width: 46px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 7px 4px; font-size: 16px; border-radius: 8px; border: 1px solid var(--line); background: transparent; color: var(--text); cursor: pointer; transition: all 0.12s ease; }
.rm-fp-shape span { font-size: 8.5px; letter-spacing: 0.03em; color: var(--text-dim); }
.rm-fp-shape:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.rm-fp-conn { flex: 1 1 auto; min-width: 36px; padding: 6px; font-size: 13px; border-radius: 7px; border: 1px solid var(--line); background: transparent; color: var(--text); cursor: pointer; transition: all 0.12s ease; }
.rm-fp-conn:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.rm-fp-hint { font-size: 10px; line-height: 1.4; color: var(--text-dim); }

/* r27 — flow node overlay: center the label inside the shape */
.rm-bd-textitem.rm-bd-flow { display: flex; align-items: center; justify-content: center; text-align: center; padding: 10px; }

/* r27 — hover-note popup */
.rm-bd-notepop { position: fixed; z-index: 260; max-width: 240px; padding: 8px 11px; border-radius: 8px; font-size: 12px; line-height: 1.45; color: var(--text); background: var(--panel-strong, var(--panel)); border: 1px solid var(--accent); box-shadow: 0 8px 28px rgba(0,0,0,0.45); pointer-events: none; }
.rm-bd-notepop.hidden { display: none; }

/* r27 — first-run consent / permissions overlay */
.rm-consent { position: fixed; inset: 0; z-index: 400; display: flex; align-items: center; justify-content: center; padding: 20px; background: radial-gradient(120% 120% at 50% 0%, rgba(10,22,40,0.86), rgba(2,7,14,0.94)); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.rm-consent.hidden { display: none; }
.rm-consent-card { width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto; padding: 28px 30px; border-radius: 18px; background: linear-gradient(160deg, var(--panel-strong, var(--panel)), color-mix(in srgb, var(--panel) 86%, #000)); border: 1px solid color-mix(in srgb, var(--accent) 36%, var(--line)); box-shadow: 0 28px 80px rgba(0,0,0,0.6); }
.rm-consent-logo { font-family: "JetBrains Mono", monospace; font-size: 13px; letter-spacing: 0.22em; color: var(--accent); margin-bottom: 14px; }
.rm-consent-h { margin: 0 0 8px; font-size: 23px; font-weight: 700; color: var(--text); }
.rm-consent-sub { margin: 0 0 16px; font-size: 14px; line-height: 1.55; color: var(--text-dim); }
.rm-consent-list { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.rm-consent-list li { display: flex; gap: 11px; font-size: 13px; line-height: 1.5; color: var(--text); }
.rm-consent-list li span { flex: none; font-size: 16px; }
.rm-consent-list b { color: var(--text); }
.rm-consent-opt { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-dim); margin-bottom: 18px; cursor: pointer; }
.rm-consent-opt input { accent-color: var(--accent); width: 15px; height: 15px; }
.rm-consent-actions { display: flex; justify-content: flex-end; }
.rm-consent-actions .rm-btn { font-size: 15px; padding: 10px 22px; }
.rm-consent-fine { margin: 14px 0 0; font-size: 11px; line-height: 1.5; color: var(--text-fade, var(--text-dim)); }
.rm-w-mail-item { display: flex; align-items: center; gap: 6px; padding: 6px 5px; border-radius: var(--r-sm, 6px); border-bottom: 1px solid color-mix(in srgb, var(--accent) 8%, transparent); transition: background 0.15s ease; }
.rm-w-mail-item:hover { background: color-mix(in srgb, var(--accent) 9%, transparent); }
.rm-w-mail-main { flex: 1; min-width: 0; cursor: pointer; }
.rm-w-mail-row1 { display: flex; align-items: baseline; gap: 6px; }
.rm-w-mail-from { flex: 1; min-width: 0; font-size: 11px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-w-mail-item.rm-unread .rm-w-mail-from { color: var(--accent); }
.rm-w-mail-time { font-size: 9px; color: var(--text-fade); font-family: "JetBrains Mono", monospace; flex: none; }
.rm-w-mail-subj { font-size: 11px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-w-mail-add { flex: none; min-width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--line); border-radius: 6px; color: var(--text-fade); cursor: pointer; font-size: 14px; transition: all 0.15s ease; }
.rm-w-mail-add:hover { border-color: var(--accent); color: var(--accent); }

/* r24 — Google Drive mini-tool list */
.rm-drv-list { display: flex; flex-direction: column; gap: 2px; max-height: 280px; overflow-y: auto; margin: 8px 0; }
.rm-drv-item { display: flex; align-items: center; gap: 8px; padding: 6px 6px; border-radius: 6px; border-bottom: 1px solid color-mix(in srgb, var(--accent) 8%, transparent); }
.rm-drv-item:hover { background: color-mix(in srgb, var(--accent) 9%, transparent); }
.rm-drv-ic { flex: none; font-size: 15px; }
.rm-drv-name { flex: 1; min-width: 0; font-size: 12px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-drv-open, .rm-drv-ins { flex: none; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; border: 1px solid var(--line); background: transparent; color: var(--text-dim); cursor: pointer; text-decoration: none; font-size: 13px; transition: all 0.15s ease; }
.rm-drv-open:hover, .rm-drv-ins:hover { border-color: var(--accent); color: var(--accent); }

/* r25 — clickable "open link" button on board items carrying a link */
.rm-bd-linkbtn {
  position: absolute; z-index: 6;
  width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px; text-decoration: none;
  font-size: 12px; line-height: 1;
  color: #fff; background: color-mix(in srgb, var(--accent) 78%, #0a1726);
  border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent);
  box-shadow: 0 2px 8px rgba(0,0,0,0.35);
  cursor: pointer; opacity: 0.9;
  transition: transform 0.12s ease, opacity 0.12s ease;
}
.rm-bd-linkbtn:hover { opacity: 1; transform: scale(1.12); }

/* ═══════════════════════════════════════════════════════════════════════
   r29 — inline SVG icon system + audit-driven responsive & a11y polish
   ═══════════════════════════════════════════════════════════════════════ */

/* Crisp, thin-line vector icons replacing the old emoji glyphs. currentColor
   so each inherits the button's themed colour; rounded caps for a soft, modern,
   non-cartoonish feel. */
/* r31 — larger, more readable icons for a crisp premium feel */
.rm-ic { width: 20px; height: 20px; flex: none; display: inline-block; vertical-align: middle; stroke-width: 1.7; pointer-events: none; }
.rm-bd-tool .rm-ic { width: 19px; height: 19px; }
.rm-dock-btn .rm-ic, .rm-iconbtn .rm-ic { width: 20px; height: 20px; }
.rm-tool-launch .rm-ic { width: 22px; height: 22px; }
.rm-fp-shape .rm-ic { width: 24px; height: 20px; }
.rm-fp-conn .rm-ic { width: 23px; height: 18px; }
.rm-bd-btn .rm-ic { width: 16px; height: 16px; margin-right: 5px; }
/* buttons that pair an icon with a text label */
.rm-iconbtn, .rm-bd-btn, .rm-tool-launch, .rm-dock-btn, .rm-bd-tool, .rm-mu-play, .rm-fp-shape, .rm-fp-conn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.rm-tool-launch { flex-direction: column; gap: 3px; }
.rm-fp-shape { flex-direction: column; gap: 2px; }

/* ── Consent overlay: block click-through + keep card/checkbox interactive ── */
.rm-consent { pointer-events: auto; }   /* r146 (audit MED) — was `none`, which INVERTED the intent: it made the dimmed backdrop transparent to hit-testing so first-run clicks fell THROUGH to the live header/dock (modality breach) AND silently killed the backdrop-click-to-dismiss. `auto` makes the backdrop absorb clicks; the card/buttons (line below) keep their own auto. */
.rm-consent-card, .rm-consent-opt, .rm-consent-opt input, .rm-consent .rm-btn, .rm-consent button { pointer-events: auto; }

/* ── Responsive: keep new r27/r28 overlays inside the viewport on phones ── */
@media (max-width: 768px) {
  .rm-bd-flowpop { width: calc(100vw - 40px) !important; max-width: 280px; }
  .rm-bd-notepop { max-width: calc(100vw - 32px) !important; }
  .rm-toolwin   { left: 8px !important; right: 8px; width: auto !important; max-width: calc(100vw - 16px); }
  #rmThemePop, #rmHudPop { position: fixed; top: 56px; right: 8px; left: auto; max-height: calc(100vh - 72px); overflow-y: auto; z-index: 40; }
  .rm-mu-genres { row-gap: 6px; }
  .rm-mu-chip   { min-height: 22px; }
}
/* r87 (M-resp1 — REJECTED as a false positive after live verification, dead rule removed): the old
   769–980px lift was dead (the side rails are display:none ≤980px). The flagged "side docks overlap the
   bottom sticky dock at 981–1150px" does NOT actually occur — the bottom sticky dock is CENTERED and
   narrow (~575px) while the side rails sit at the far edges, so their rectangles never intersect
   (measured live at 981/1024/1150px: zero intersection in both default and lifted states). Adding a lift
   only shortened the rails for no benefit, so no replacement rule is needed. */
/* Short / landscape phones: consent card must not clip its action buttons */
@media (max-height: 600px) {
  .rm-consent-card { padding: 18px 20px; max-height: 95vh; }
}
/* Touch: bigger consent checkbox target */
@media (pointer: coarse) {
  .rm-consent-opt input { width: 20px; height: 20px; }
}
/* r87 (resp dead-rule cleanup) — removed a dead ≤480px .rm-w sizing rule: the side rails are
   display:none below 980px, so it could never match a rendered widget. */

/* ═══════════════════════════════════════════════════════════════════════
   r31 — widget collapse / expand (Phase 5) + premium polish
   ═══════════════════════════════════════════════════════════════════════ */
.rm-w-title > .rm-w-collapse { margin-left: auto; }      /* group collapse + ✕ at the right */
.rm-w-collapse {
  background: transparent; border: none; color: var(--text-fade);
  padding: 0 2px; cursor: pointer; display: inline-flex; align-items: center;
  border-radius: 4px; transition: color 0.14s ease;
}
.rm-w-collapse:hover { color: var(--accent); }
.rm-w-collapse .rm-ic { width: 14px; height: 14px; transition: transform 0.2s ease; }
.rm-w-collapsed .rm-w-collapse .rm-ic { transform: rotate(-90deg); }  /* chevron points right when collapsed */
.rm-w.rm-w-collapsed { height: auto !important; min-height: 0 !important; }
.rm-w.rm-w-collapsed > *:not(.rm-w-title) { display: none !important; }
.rm-w.rm-w-collapsed .rm-w-title { margin-bottom: 0; }

/* ═══════════════════════════════════════════════════════════════════════
   r32 — runtime Google Client-ID connect UI + sharper thin-lined finish
   ═══════════════════════════════════════════════════════════════════════ */
.rm-hp-conn-cid { display: flex; gap: 8px; margin: 10px 0 8px; }
.rm-hp-cid-input {
  flex: 1; min-width: 0; font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px; padding: 8px 10px; color: var(--text);
  background: color-mix(in srgb, var(--panel) 60%, transparent);
  border: 1px solid var(--line); border-radius: 8px; outline: none;
  transition: border-color 0.14s ease, box-shadow 0.14s ease;
}
.rm-hp-cid-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
.rm-hp-cid-input::placeholder { color: var(--text-fade); }
.rm-hp-conn-help { display: inline-block; margin-top: 2px; font-size: 11px; color: var(--accent); text-decoration: none; opacity: 0.9; }
.rm-hp-conn-help:hover { opacity: 1; text-decoration: underline; }

/* Sharper, thinner, more consistent "finished" lines on the core chrome.
   Hairline 1px borders, tightened radii, crisper rendering. */
.rm-dock-btn { border-radius: 9px; }
.rm-iconbtn, .rm-btn { border-radius: 8px; }
.rm-bd-tool { border-radius: 7px; }
.rm-ic, .rm-bd-canvas { shape-rendering: geometricPrecision; }
svg.rm-ic { vector-effect: non-scaling-stroke; }
/* crisper focus ring for keyboard users (accessibility + finished feel) */
.rm-iconbtn:focus-visible, .rm-btn:focus-visible, .rm-bd-tool:focus-visible,
.rm-dock-btn:focus-visible, .rm-tool-launch:focus-visible, .rm-w-collapse:focus-visible {
  outline: none; border-color: var(--accent);   /* r35 — keep the border highlight too */
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent);
}

/* ═══════════════════════════════════════════════════════════════════════
   r34 — visible labels on panel-opening tools + pastel premium themes
   ═══════════════════════════════════════════════════════════════════════ */
/* Icon + text label so users can SEE what Flow / Arrange / Tools do (not just hover) */
.rm-bd-tool-text { width: auto; min-width: 34px; padding: 0 11px; gap: 7px; }
/* r99 — caret cue so the category dropdowns (Insert / Shapes / Flow / Arrange) read as openable menus. The Tools button uses aria-pressed (not haspopup) so it's correctly excluded. */
.rm-bd-tools .rm-bd-tool-text[aria-haspopup="true"]::after { content: "\25BE"; font-size: 9px; line-height: 1; opacity: .55; margin-left: 1px; }
.rm-bd-tool-text span { font-size: 12px; font-weight: 600; letter-spacing: 0.02em; line-height: 1; white-space: nowrap; }

/* r81 — category dropdowns (Insert ▾ / Shapes ▾): vertical labelled menus that
   reuse the flow-palette container; the items ARE the original tool buttons
   (ids/data-tool intact) restyled as full-width rows with a shortcut chip. */
.rm-bd-catpop { display: flex; flex-direction: column; gap: 2px; width: 196px; padding: 6px; }
.rm-bd-catpop .rm-bd-tool { width: 100%; height: 32px; justify-content: flex-start; padding: 0 9px; border-radius: 7px; transform: none; }
.rm-bd-catpop .rm-bd-tool:hover { transform: none; }
.rm-bd-catpop .rm-bd-tool span { font-size: 12.5px; font-weight: 500; }
.rm-bd-catpop .rm-bd-tool kbd {
  margin-left: auto; padding: 1px 5px; border-radius: 4px;
  font: 600 10px "JetBrains Mono", monospace; color: var(--text-fade);
  border: 1px solid var(--line); background: transparent;
}
.rm-bd-catpop .rm-bd-tool.active kbd { color: inherit; border-color: color-mix(in srgb, var(--bg) 40%, transparent); }
.rm-bd-menuitem.active { color: var(--accent); }   /* snap-to-grid ON state inside the ⋯ Board menu */
.rm-fp-wide { width: 100%; justify-content: flex-start; gap: 8px; }
.rm-fp-wide span { font-size: 12px; }
/* r81 — stroke-weight row inside the colour popover (one style control in the strip) */
.rm-color-weightrow { flex-basis: 100%; display: flex; align-items: center; gap: 8px; margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--line); }
.rm-color-weightrow span { font-size: 11px; color: var(--text-dim); }
.rm-color-weightrow .rm-weight-slider { flex: 1; }
/* The mini-tools (QR · link shortener · calculator…) launcher — make it stand out */
.rm-bd-tool-accent { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 42%, transparent); background: color-mix(in srgb, var(--accent) 11%, transparent); }
.rm-bd-tool-accent:hover { background: color-mix(in srgb, var(--accent) 20%, transparent); border-color: var(--accent); }
.rm-bd-tool-accent.active { background: var(--accent); color: var(--bg); }
/* r81 — collapse category/text buttons to icon-only sooner: with the categorised
   strip the labels are a nicety, not load-bearing (menus + r78 tooltips carry the
   names), so shedding them by 1100px keeps the whole strip scroll-free on laptops.
   Items INSIDE the category popovers keep their labels at every width. */
@media (max-width: 1100px) {
  .rm-bd-tools .rm-bd-tool-text span { display: none; }
  .rm-bd-tools .rm-bd-tool-text { width: 34px; min-width: 34px; padding: 0; }
}

/* r34 — board "expand canvas" controls in Board Settings */
.rm-bd-expand-grp { display: inline-flex; align-items: center; gap: 6px; }
.rm-bd-set-btn {
  min-width: 28px; height: 26px; padding: 0 8px;
  background: color-mix(in srgb, var(--panel) 60%, transparent);
  border: 1px solid var(--line); border-radius: 7px;
  color: var(--text); font-size: 12px; font-weight: 600; cursor: pointer;
  transition: border-color 0.14s ease, color 0.14s ease, background 0.14s ease;
}
.rm-bd-set-btn:hover { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }

/* ═══════════════════════════════════════════════════════════════════════
   r36 — collapsible navigation/controls panel + camera-rotation setting
   ═══════════════════════════════════════════════════════════════════════ */
.rm-nav.rm-nav-hidden { display: none !important; }
.rm-nav-grp { display: inline-flex; align-items: center; gap: 5px; }
.rm-nav-x { background: transparent; border: none; color: var(--text-fade); cursor: pointer; padding: 2px 3px; display: inline-flex; align-items: center; border-radius: 5px; margin-left: 2px; transition: color 0.14s ease; }
.rm-nav-x:hover { color: var(--accent); }
.rm-nav-x .rm-ic { width: 13px; height: 13px; }
.rm-nav-view { gap: 6px; }
.rm-nav-viewbtn {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  color: var(--accent); border-radius: 6px; padding: 2px 9px;
  font: inherit; font-size: 11px; font-weight: 600; cursor: pointer;
  transition: background 0.14s ease, border-color 0.14s ease;
}
.rm-nav-viewbtn:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); border-color: var(--accent); }
.rm-nav-reopen {
  position: fixed; bottom: 14px; left: 14px; z-index: 8;
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px;
  background: var(--panel-glass); border: 1px solid var(--line); border-radius: 8px;
  color: var(--text-dim); font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
  cursor: pointer; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: color 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease;
}
.rm-nav-reopen:hover { color: var(--accent); border-color: var(--accent); box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 28%, transparent); }
.rm-nav-reopen .rm-ic { width: 15px; height: 15px; }
.rm-nav-reopen[hidden] { display: none; }
body.rm-in-editor .rm-nav-reopen { display: none !important; }
@media (max-width: 980px) { .rm-nav-reopen { display: none !important; } }

/* ═══════════════════════════════════════════════════════════════════════
   r39 — UI polish sprint: readable widget typography + unified buttons +
   premium widget elevation. Default (medium) scale only; the sm/lg font
   settings still override via their !important rules.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Readable widget sub-labels (were 9–10px) ── */
.rm-cal-d            { font-size: 11px; }
.rm-cal-ev-when      { font-size: 10px; }
.rm-cal-ev-title     { font-size: 12px; }
.rm-cal-hint         { font-size: 10px; }
.rm-w-rem-rel        { font-size: 10px; }
.rm-w-rem-when-label { font-size: 11px; }
.rm-pomo-label       { font-size: 10.5px; }
.rm-w-empty          { font-size: 12px; }
.rm-w-clock-greet    { font-size: 12.5px; }
.rm-w-newscard-title { font-size: 12.5px; line-height: 1.4; }
.rm-w-todo-text, .rm-w-todo-item, .rm-w-rem-txt { font-size: 13px; }
.rm-w-input, .rm-w-notes { font-size: 13px; }
.rm-w-vision-box     { font-size: 14px; line-height: 1.5; }
/* clock time stays prominent */
.rm-w-clock-time     { letter-spacing: 0.01em; }

/* ── Premium widget module: a touch more breathing room + crisper radius ── */
.rm-w { padding: 11px 13px; border-radius: 12px; }
/* r68 — bleed guard: no direct child may exceed the widget's content box (kills the
   "text past the rounded border" clipping the user reported), while the widget keeps
   overflow:visible so its glow/resize-handle/dropdowns still show. */
.rm-w > * { max-width: 100%; box-sizing: border-box; }
.rm-w-title { min-width: 0; overflow: hidden; }
.rm-w:hover { border-color: var(--line-strong); box-shadow: 0 12px 38px rgba(0,0,0,0.5), inset 0 1px 0 color-mix(in srgb, #fff 8%, transparent), 0 0 20px color-mix(in srgb, var(--accent) 14%, transparent); }
.rm-w-title > .rm-w-toggle, .rm-w-title > .rm-w-collapse { opacity: 0.65; transition: opacity 0.14s ease, color 0.14s ease; }
.rm-w:hover .rm-w-title > .rm-w-toggle, .rm-w:hover .rm-w-title > .rm-w-collapse { opacity: 1; }

/* ── Unified button states (tactile press · disabled · busy) ── */
.rm-btn, .rm-iconbtn, .rm-dock-btn, .rm-bd-tool, .rm-bd-btn, .rm-tool-launch, .rm-nav-viewbtn, .rm-cal-btn, .rm-bd-set-btn, .rm-hud-preset {
  -webkit-tap-highlight-color: transparent;
}
/* r41 — keep the hover lift during press so a hovered button presses smoothly
   instead of snapping flat to the baseline */
.rm-btn:active, .rm-iconbtn:active, .rm-dock-btn:active, .rm-bd-tool:active,
.rm-bd-btn:active, .rm-tool-launch:active, .rm-nav-viewbtn:active, .rm-cal-btn:active, .rm-bd-set-btn:active, .rm-hud-preset:active {
  transform: translateY(-1px) scale(0.96);   /* tactile press, preserves hover lift */
}
.rm-btn:disabled, .rm-iconbtn:disabled, .rm-dock-btn:disabled, .rm-bd-tool:disabled,
.rm-bd-btn:disabled, .rm-hud-preset:disabled, .rm-btn[aria-disabled="true"] {
  opacity: 0.42; cursor: not-allowed; filter: grayscale(0.3); pointer-events: none;
}
/* busy / loading affordance: add class rm-busy to any button */
.rm-busy { position: relative; color: transparent !important; pointer-events: none; }
.rm-busy::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 14px; height: 14px;
  border: 2px solid color-mix(in srgb, var(--accent) 40%, transparent); border-top-color: var(--accent);
  border-radius: 50%; animation: rmBtnSpin 0.7s linear infinite;
}
@keyframes rmBtnSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .rm-busy::after { animation: none; } }

/* ═══════════════════════════════════════════════════════════════════════
   r40 — workspace presets in the HUD dropdown (one-click widget layouts)
   ═══════════════════════════════════════════════════════════════════════ */
.rm-hud-presetlabel { font-family: "JetBrains Mono", monospace; font-size: 9px; letter-spacing: 0.18em; color: var(--text-fade); padding: 4px 10px 5px; }
.rm-hud-presets { display: flex; flex-wrap: wrap; gap: 5px; padding: 0 8px 6px; }
.rm-hud-preset {
  font: inherit; font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 7px; cursor: pointer;
  background: color-mix(in srgb, var(--panel) 55%, transparent);
  border: 1px solid var(--line); color: var(--text-dim);
  transition: border-color 0.14s ease, color 0.14s ease, background 0.14s ease, transform 0.1s ease;
}
.rm-hud-preset:hover { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }

/* ═══════════════════════════════════════════════════════════════════════
   r41 — audit-driven consistency: preset container bounds, small-button busy
   spinner, calendar breathing room with the larger r39 type, tablet popovers
   ═══════════════════════════════════════════════════════════════════════ */
.rm-hud-presets { max-width: 248px; }
/* scale the busy spinner down inside the small preset chips so it never clips */
.rm-hud-preset.rm-busy::after { width: 10px; height: 10px; border-width: 1.5px; }
/* the r39 type bump needs a hair more vertical room in the 7-col calendar grid */
.rm-cal-d { min-height: 19px; }
@media (max-width: 560px) {
  .rm-hud-presetlabel { padding: 3px 8px 4px; }
  .rm-hud-presets { padding: 0 8px 5px; gap: 4px; }
  .rm-hud-preset { font-size: 10px; padding: 3px 8px; }
}
/* tablet: give the HUD dropdown (now incl. presets) more vertical room when pinned */
@media (max-width: 1000px) {
  #rmHudPop { max-height: calc(100vh - 96px); }
  .rm-nav-viewbtn { min-height: 32px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   r42 — Cinematic startup "lights-on" sequence + settings controls
   A vignette veil flickers away while the real Three.js lights ramp 0→target
   (synced in JS). Chrome rises into place. Reduced-motion → a plain quick fade.
   ═══════════════════════════════════════════════════════════════════════ */
#rmStartup {
  /* r45 — z-index dropped below the consent modal (400) and dialogs (1000): the veil
     is pointer-events:none and its opacity is now driven from JS in lock-step with the
     light + board dim, so it never needs to sit above interactive UI. */
  position: fixed; inset: 0; z-index: 300; pointer-events: none; opacity: 0;
  background:
    radial-gradient(125% 95% at 50% 40%, transparent 0%, transparent 34%,
      rgba(2,5,12, calc(var(--rm-st-dark, 0.9) * 0.62)) 100%),
    color-mix(in srgb, #04070e calc(var(--rm-st-dark, 0.9) * 100%), transparent);
  will-change: opacity;
}
body.rm-light #rmStartup {
  background:
    radial-gradient(125% 95% at 50% 40%, transparent 0%, transparent 36%,
      rgba(22,24,32, calc(var(--rm-st-dark, 0.9) * 0.40)) 100%),
    color-mix(in srgb, #12151d calc(var(--rm-st-dark, 0.9) * 74%), transparent);
}
#rmStartup.rm-st-run { display: block; }
/* r83 — the old rm-st-flicker / rm-st-fade veil animations were removed: since
   r42 the veil opacity is driven from JS in lock-step with the light ramp, and
   no JS path applied those classes any more (confirmed dead by grep). */

/* r80 — STAGED chrome activation during a full (non-theme) startup: the room +
   boards light first (3D, driven from JS), then the interface initializes in
   architectural order — widget rails → header toolbar → bottom control bar —
   each on its own delay slice of the configured duration. `both` fill keeps
   every group invisible until its slice begins. All slices end ≤0.98×dur so
   the rm-starting class removal (dur+180ms) never cuts an animation mid-rise.
   r45 — exclude user-moved widgets (.rm-w-moved) so the rise transform can't
   fight a dragged widget's inline position. */
body.rm-starting .rm-w:not(.rm-w-moved),
body.rm-starting .rm-dock {
  animation: rmStRise calc(var(--rm-st-dur, 2200ms) * 0.42) cubic-bezier(.2,.7,.2,1) both;
  animation-delay: calc(var(--rm-st-dur, 2200ms) * 0.46);
}
body.rm-starting .rm-header {
  animation: rmStRise calc(var(--rm-st-dur, 2200ms) * 0.34) cubic-bezier(.2,.7,.2,1) both;
  animation-delay: calc(var(--rm-st-dur, 2200ms) * 0.56);
}
body.rm-starting .rm-dock-sticky {
  animation: rmStRise calc(var(--rm-st-dur, 2200ms) * 0.32) cubic-bezier(.2,.7,.2,1) both;
  animation-delay: calc(var(--rm-st-dur, 2200ms) * 0.64);
}
@keyframes rmStRise {
  0%   { opacity: 0; transform: translateY(7px); }
  100% { opacity: 1; transform: translateY(0); }
}
/* r187 (audit LOW) — clamp keyed to the in-app `rm-reduced` class (set by Startup.play() from prefersReduced(), the 3-state Help-panel override), NOT a bare OS media query. The bare @media overrode an explicit in-app "motion: on" choice whenever the OS also requested reduce; now JS is the single source of truth and the user's override always wins. */
body.rm-reduced.rm-starting .rm-w, body.rm-reduced.rm-starting .rm-dock,
body.rm-reduced.rm-starting .rm-dock-sticky, body.rm-reduced.rm-starting .rm-header { animation-duration: 200ms; animation-delay: 0ms; }

/* startup settings controls inside the Help & Accessibility panel */
.rm-hp-toggle { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--text); cursor: pointer; margin-bottom: 9px; }
.rm-hp-toggle input { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; flex: none; }
.rm-hp-field { display: grid; grid-template-columns: 78px 1fr 44px; align-items: center; gap: 8px; margin: 7px 0; font-size: 12px; color: var(--text-dim); }
.rm-hp-field > label { white-space: nowrap; }
.rm-hp-field input[type="range"] { width: 100%; accent-color: var(--accent); cursor: pointer; }
.rm-hp-val { font-family: "JetBrains Mono", monospace; font-size: 11px; color: var(--accent); text-align: right; }
.rm-hp-select { width: 100%; padding: 5px 7px; border-radius: 7px; background: color-mix(in srgb, var(--panel) 70%, transparent); border: 1px solid var(--line); color: var(--text); font: inherit; font-size: 12px; cursor: pointer; }
.rm-hp-strow { margin-top: 9px; }

/* ═══════════════════════════════════════════════════════════════════════
   r43 — Universal AI Hub (floating multi-provider assistant window)
   ═══════════════════════════════════════════════════════════════════════ */
.rm-ai {
  /* r45 — z-index below modals/dialogs (1000) so a confirm/upgrade modal is never
     trapped behind the hub; still above the docks/chrome. */
  position: fixed; z-index: 900; display: flex; flex-direction: column;
  background: color-mix(in srgb, var(--panel) 90%, transparent);
  backdrop-filter: blur(18px) saturate(1.1); -webkit-backdrop-filter: blur(18px) saturate(1.1);
  border: 1px solid var(--line-strong, var(--line)); border-radius: 14px;
  box-shadow: 0 24px 70px rgba(0,0,0,0.55), inset 0 1px 0 color-mix(in srgb, #fff 7%, transparent);
  color: var(--text); overflow: hidden; min-width: 300px; min-height: 240px;
}
.rm-ai.rm-ai-docked { top: 60px; right: 12px; bottom: 14px; width: 372px; height: auto; }
.rm-ai.rm-ai-pinned { z-index: 950; box-shadow: 0 24px 80px rgba(0,0,0,0.6), 0 0 0 1px color-mix(in srgb, var(--accent) 50%, transparent); }   /* r146 (audit) — "Keep on top" was purely cosmetic (shadow only). z-index 950 actually raises it (above tour/HUD 900, still below modals 1000 so a confirm/upgrade is never trapped). */

/* header */
.rm-ai-head { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-bottom: 1px solid var(--line); cursor: grab; user-select: none; }
.rm-ai.rm-ai-docked .rm-ai-head { cursor: default; }
.rm-ai-head:active { cursor: grabbing; }
.rm-ai-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); flex: none; }
.rm-ai-title { font-size: 12.5px; font-weight: 700; letter-spacing: 0.02em; }
.rm-ai-sp { flex: 1; }
.rm-ai-ic { width: 26px; height: 24px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--text-dim); font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .14s, color .14s, border-color .14s; }
.rm-ai-ic:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.rm-ai-ic.on { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 12%, transparent); }

/* bars */
.rm-ai-bar, .rm-ai-ctxrow { display: flex; align-items: center; gap: 6px; padding: 7px 10px; border-bottom: 1px solid var(--line); }
.rm-ai-ctxrow { padding-top: 6px; padding-bottom: 6px; }
.rm-ai-sel { font: inherit; font-size: 11.5px; padding: 4px 6px; border-radius: 7px; background: color-mix(in srgb, var(--panel) 72%, transparent); border: 1px solid var(--line); color: var(--text); cursor: pointer; max-width: 130px; }
.rm-ai-sel[data-sel="thread"] { flex: 1; max-width: none; }
.rm-ai-ctxsel { flex: 1; max-width: none; color: var(--text-dim); }
.rm-ai-mini { width: 24px; height: 24px; border-radius: 7px; border: 1px solid var(--line); background: color-mix(in srgb, var(--panel) 72%, transparent); color: var(--text-dim); cursor: pointer; font-size: 13px; flex: none; }
.rm-ai-mini:hover { color: var(--accent); border-color: var(--accent); }

/* body / messages */
.rm-ai-body { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 12px; }
.rm-ai-msg { display: grid; grid-template-columns: 34px 1fr; gap: 9px; }
.rm-ai-msg-role { font-family: "JetBrains Mono", monospace; font-size: 9px; letter-spacing: .1em; color: var(--text-fade); padding-top: 3px; text-align: right; }
.rm-ai-msg-body { font-size: 13.5px; line-height: 1.5; word-break: break-word; }
.rm-ai-bot .rm-ai-msg-body { background: color-mix(in srgb, var(--accent) 9%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent); border-radius: 10px; padding: 9px 11px; }
.rm-ai-user .rm-ai-msg-body { background: color-mix(in srgb, var(--panel) 60%, transparent); border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; }
.rm-ai-msg-body code { font-family: "JetBrains Mono", monospace; font-size: 12px; background: color-mix(in srgb, var(--text) 10%, transparent); padding: 1px 5px; border-radius: 5px; }
.rm-ai-pre { border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px; overflow-x: auto; font-size: 12px; margin: 6px 0; }   /* r108 — dropped a dead #000 35% bg (always overridden by the theme-aware rule below) */
.rm-ai-pre code { background: none; padding: 0; }
.rm-ai-typing { display: inline-flex; gap: 4px; }
.rm-ai-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); opacity: .5; animation: rmAiBlink 1s infinite; }
.rm-ai-typing i:nth-child(2) { animation-delay: .2s; } .rm-ai-typing i:nth-child(3) { animation-delay: .4s; }
@keyframes rmAiBlink { 0%,100% { opacity: .3; transform: translateY(0);} 50% { opacity: 1; transform: translateY(-2px);} }

/* empty states */
.rm-ai-empty { margin: auto; text-align: center; padding: 18px; max-width: 280px; }
.rm-ai-empty-ic { font-size: 26px; color: var(--accent); margin-bottom: 6px; }
.rm-ai-empty h4 { margin: 4px 0 6px; font-size: 14px; }
.rm-ai-empty p { font-size: 12.5px; color: var(--text-dim); line-height: 1.5; margin: 0 0 12px; }
.rm-ai-cta { font: inherit; font-size: 12.5px; font-weight: 600; padding: 8px 16px; border-radius: 9px; border: 1px solid var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); cursor: pointer; }
.rm-ai-cta:hover { background: color-mix(in srgb, var(--accent) 26%, transparent); }
.rm-ai-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.rm-ai-chip { font: inherit; font-size: 11.5px; padding: 5px 10px; border-radius: 20px; border: 1px solid var(--line); background: color-mix(in srgb, var(--panel) 60%, transparent); color: var(--text-dim); cursor: pointer; }
.rm-ai-chip:hover { border-color: var(--accent); color: var(--accent); }

/* settings */
.rm-ai-settings { flex: 1; overflow-y: auto; padding: 12px; }
.rm-ai-set-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-size: 13px; }
.rm-ai-set-note, .rm-ai-set-foot { font-size: 11px; color: var(--text-dim); line-height: 1.45; margin: 0 0 12px; }
.rm-ai-set-foot { margin-top: 10px; color: var(--text-fade); }
.rm-ai-prov { border: 1px solid var(--line); border-radius: 10px; padding: 9px 10px; margin-bottom: 8px; background: color-mix(in srgb, var(--panel) 45%, transparent); }
.rm-ai-prov-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.rm-ai-prov-name { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.rm-ai-prov-name input { accent-color: var(--accent); }
.rm-ai-prov-status { font-size: 10px; color: var(--text-fade); white-space: nowrap; }
.rm-ai-prov-status.ok { color: var(--accent); }
.rm-ai-prov-row { display: flex; gap: 6px; align-items: center; margin-top: 6px; }
.rm-ai-prov-in { flex: 1; font: inherit; font-size: 12px; padding: 5px 8px; border-radius: 7px; background: color-mix(in srgb, var(--panel) 70%, transparent); border: 1px solid var(--line); color: var(--text); width: 100%; }
.rm-ai-prov-hint { font-size: 11px; color: var(--text-dim); }
.rm-ai-prov-save { font: inherit; font-size: 11.5px; font-weight: 600; padding: 5px 11px; border-radius: 7px; border: 1px solid var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); cursor: pointer; white-space: nowrap; }
.rm-ai-prov-rm { font: inherit; font-size: 11.5px; padding: 5px 9px; border-radius: 7px; border: 1px solid var(--line); background: transparent; color: var(--text-dim); cursor: pointer; white-space: nowrap; }
.rm-ai-prov-rm:hover { border-color: var(--danger); color: var(--danger); }   /* r93 — tokenised */
.rm-ai-prov-link { display: inline-block; margin-top: 7px; font-size: 11px; color: var(--accent); text-decoration: none; opacity: .85; }
.rm-ai-prov-link:hover { text-decoration: underline; }

/* footer */
.rm-ai-foot { display: flex; gap: 8px; align-items: flex-end; padding: 10px; border-top: 1px solid var(--line); }
.rm-ai-input { flex: 1; font: inherit; font-size: 13px; line-height: 1.4; padding: 9px 11px; border-radius: 10px; background: color-mix(in srgb, var(--panel) 70%, transparent); border: 1px solid var(--line); color: var(--text); resize: none; max-height: 120px; }
.rm-ai-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent); }
.rm-ai-send { width: 40px; height: 40px; flex: none; border-radius: 10px; border: 1px solid var(--accent); background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--accent); font-size: 15px; cursor: pointer; transition: background .14s, transform .1s; }
.rm-ai-send:hover { background: color-mix(in srgb, var(--accent) 32%, transparent); }
.rm-ai-send:active { transform: scale(0.94); }

/* resize grip */
.rm-ai-grip { position: absolute; right: 2px; bottom: 2px; width: 16px; height: 16px; cursor: nwse-resize; opacity: .5; background:
  linear-gradient(135deg, transparent 0 50%, var(--text-dim) 50% 60%, transparent 60% 70%, var(--text-dim) 70% 80%, transparent 80%); }
.rm-ai.rm-ai-docked .rm-ai-grip { display: none; }

/* collapsed → just the header */
.rm-ai.rm-ai-collapsed { height: auto !important; bottom: auto; min-height: 0; }
.rm-ai.rm-ai-collapsed .rm-ai-bar, .rm-ai.rm-ai-collapsed .rm-ai-ctxrow,
.rm-ai.rm-ai-collapsed .rm-ai-body, .rm-ai.rm-ai-collapsed .rm-ai-settings,
.rm-ai.rm-ai-collapsed .rm-ai-foot, .rm-ai.rm-ai-collapsed .rm-ai-grip { display: none; }

/* launch buttons get the accent treatment */
.rm-ai-launch[data-ic], .rm-dock-ai[data-ic] { color: var(--accent); }
.rm-ai-launch:hover, .rm-dock-ai:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); }

/* responsive: dock becomes a near-full-width sheet on phones */
@media (max-width: 560px) {
  .rm-ai.rm-ai-docked { left: 8px; right: 8px; width: auto; top: 54px; bottom: 8px; }
  .rm-ai:not(.rm-ai-docked) { left: 8px !important; right: 8px; width: auto !important; max-width: calc(100vw - 16px); }
  .rm-ai-sel { max-width: 104px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   r44 — Account / profile (in Help panel) + admin diagnostics modal (prep)
   ═══════════════════════════════════════════════════════════════════════ */
.rm-acct-row { display: flex; align-items: center; gap: 8px; margin: 7px 0; flex-wrap: wrap; }
.rm-acct-in { flex: 1; min-width: 140px; font: inherit; font-size: 12.5px; padding: 7px 9px; border-radius: 8px; background: color-mix(in srgb, var(--panel) 70%, transparent); border: 1px solid var(--line); color: var(--text); }
.rm-acct-in:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 28%, transparent); }
.rm-acct-badge { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: .1em; padding: 3px 8px; border-radius: 20px; border: 1px solid var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.rm-acct-badge[data-plan="pro"], .rm-acct-badge[data-plan="lifetime"], .rm-acct-badge[data-plan="enterprise"] { border-color: var(--plan-badge); color: var(--plan-badge); background: color-mix(in srgb, var(--plan-badge) 12%, transparent); }   /* r93 — tokenised */
.rm-acct-ok { font-size: 12px; color: var(--accent); }
.rm-acct-mini { padding: 5px 10px !important; font-size: 11.5px !important; }

.rm-admin-overlay { position: fixed; inset: 0; z-index: 6000; display: none; align-items: center; justify-content: center; background: rgba(3,6,12,0.6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); padding: 20px; }
.rm-admin-panel { width: min(680px, 96vw); max-height: 88vh; overflow: hidden; display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line-strong, var(--line)); border-radius: 16px; box-shadow: 0 30px 90px rgba(0,0,0,0.6); color: var(--text); }
.rm-admin-head { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-bottom: 1px solid var(--line); }
.rm-admin-head b { font-size: 14px; }
.rm-admin-tag { font-size: 10.5px; color: var(--text-fade); font-family: "JetBrains Mono", monospace; }
.rm-admin-x { width: 28px; height: 26px; border-radius: 7px; border: 1px solid var(--line); background: transparent; color: var(--text-dim); cursor: pointer; }
.rm-admin-x:hover { border-color: var(--accent); color: var(--accent); }
.rm-admin-body { padding: 16px; overflow-y: auto; }
.rm-admin-note { font-size: 12px; color: var(--text-dim); line-height: 1.5; margin: 0 0 14px; }
.rm-admin-body h5 { margin: 16px 0 8px; font-size: 12px; letter-spacing: .04em; color: var(--text-dim); text-transform: uppercase; }
.rm-admin-stats { display: flex; flex-wrap: wrap; gap: 8px; }
.rm-admin-stat { flex: 1 1 70px; min-width: 64px; text-align: center; padding: 11px 8px; border-radius: 10px; border: 1px solid var(--line); background: color-mix(in srgb, var(--panel) 50%, transparent); }
.rm-admin-stat b { display: block; font-size: 19px; color: var(--accent); }
.rm-admin-stat span { font-size: 10.5px; color: var(--text-dim); text-transform: capitalize; }
.rm-admin-stat-lg b { font-size: 24px; }
.rm-admin-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.rm-admin-table th { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); color: var(--text-dim); font-weight: 600; }
.rm-admin-table td { padding: 6px 8px; border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); vertical-align: top; }
.rm-admin-dim { color: var(--text-fade); }
.rm-admin-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }

/* ═══════════════════════════════════════════════════════════════════════
   r45 — adversarial-audit fixes: a11y focus rings, theme-aware surfaces,
   AI-hub click-through + mobile layout
   ═══════════════════════════════════════════════════════════════════════ */
/* collapsed + docked hub must not block the 3D canvas behind it; header stays clickable */
.rm-ai.rm-ai-docked.rm-ai-collapsed { pointer-events: none; }
.rm-ai.rm-ai-docked.rm-ai-collapsed .rm-ai-head { pointer-events: auto; }

/* keyboard focus rings on the AI Hub + startup + admin controls (WCAG 2.4.7) */
.rm-ai-sel:focus-visible, .rm-ai-prov-in:focus-visible {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 32%, transparent);
}
.rm-hp-select:focus-visible,
.rm-hp-field input[type="range"]:focus-visible,
.rm-acct-in:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.rm-admin-x:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* theme-aware surfaces (were hardcoded dark → broke on light/pastel themes) */
.rm-ai-pre { background: color-mix(in srgb, var(--bg) 42%, var(--panel)); }
.rm-admin-panel { box-shadow: 0 30px 90px color-mix(in srgb, var(--bg) 62%, transparent); }
.rm-admin-overlay { background: color-mix(in srgb, var(--bg) 58%, transparent); }
body.rm-light .rm-acct-badge[data-plan="pro"],
body.rm-light .rm-acct-badge[data-plan="lifetime"],
body.rm-light .rm-acct-badge[data-plan="enterprise"] { border-color: #b9810b; color: #b9810b; background: color-mix(in srgb, #b9810b 10%, transparent); }

/* AI Hub controls bar stacks cleanly on small phones */
@media (max-width: 560px) {
  .rm-ai-bar { flex-wrap: wrap; }
  .rm-ai-bar .rm-ai-sel { max-width: none; flex: 1 1 46%; }
  .rm-ai-sel[data-sel="thread"] { flex: 1 1 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════
   r46 — AI Hub: recognizable SVG icons + post-setup message actions
   ═══════════════════════════════════════════════════════════════════════ */
.rm-ai-ic { padding: 0; }
.rm-ai-ic svg { width: 15px; height: 15px; }
.rm-ai-mini { display: inline-flex; align-items: center; justify-content: center; }
.rm-ai-mini svg { width: 14px; height: 14px; }
.rm-ai-send { display: inline-flex; align-items: center; justify-content: center; }
.rm-ai-send svg { width: 17px; height: 17px; }

/* message body + its hover actions share a column so actions sit just under the bubble */
.rm-ai-msg-wrap { min-width: 0; }
.rm-ai-acts { display: flex; gap: 4px; margin-top: 5px; opacity: 0; transition: opacity 0.14s ease; }
.rm-ai-msg:hover .rm-ai-acts, .rm-ai-acts:focus-within { opacity: 1; }
.rm-ai-act {
  width: 24px; height: 22px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 6px; background: color-mix(in srgb, var(--panel) 55%, transparent);
  color: var(--text-dim); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color .12s, border-color .12s, background .12s;
}
.rm-ai-act:hover { color: var(--accent); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.rm-ai-act:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent); }
.rm-ai-act svg { width: 13px; height: 13px; }
/* touch devices: always show the actions (no hover) */
@media (hover: none) { .rm-ai-acts { opacity: 1; } }

/* ═══════════════════════════════════════════════════════════════════════
   r47 — width-adjustable HUD docks (drag the inner edge; double-click resets)
   ═══════════════════════════════════════════════════════════════════════ */
.rm-dock-resize {
  position: fixed; width: 11px; z-index: 10; cursor: ew-resize;
  display: flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent; touch-action: none;
}
.rm-dock-resize::before {
  content: ""; width: 3px; height: 32px; border-radius: 3px;
  background: color-mix(in srgb, var(--text) 16%, transparent);
  transition: background 0.15s ease, height 0.15s ease;
}
.rm-dock-resize:hover::before, .rm-dock-resize:active::before { background: var(--accent); height: 56px; }
.rm-dock-resize:focus-visible { outline: none; }
.rm-dock-resize:focus-visible::before { background: var(--accent); height: 56px; box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent); }
/* r87 (L-css1) fallback 248px→200px to match the dock's own fallback + the JS DEF; (L-css2) left
   handle bottom 90px→60px to match the left dock's bottom:60px (the right pair already align at 24px). */
.rm-dock-resize.left  { left:  calc(14px + var(--rm-dock-w, 200px)); top: 80px; bottom: 60px; }
.rm-dock-resize.right { right: calc(14px + var(--rm-dock-w, 200px)); top: 80px; bottom: 24px; }
body.rm-dock-resizing { cursor: ew-resize; user-select: none; -webkit-user-select: none; }
body.rm-hud-off .rm-dock-resize { display: none; }
/* r143 (audit #5) — was 768px, but the rail WIDTH is force-capped by the responsive media queries starting at
   1180px (width: min(var(--rm-dock-w), 188/174/164px)) while the resize handle stayed pinned to the RAW
   --rm-dock-w → the accent handle bar detached from the now-narrower rail and floated over the 3D canvas in the
   769–1180px band. The rail isn't user-resizable once capped, so hide the handle across the whole capped range. */
@media (max-width: 1180px) { .rm-dock-resize { display: none; } }   /* resize is a desktop affordance; hidden once the rail width is responsively capped */

/* ═══════════════════════════════════════════════════════════════════════
   r48 — audit fixes: dock-handle + AI-action contrast/focus, send busy state
   ═══════════════════════════════════════════════════════════════════════ */
/* resting dock handle was too faint on light/pastel themes — use a theme-strong line */
.rm-dock-resize::before { background: color-mix(in srgb, var(--text-dim) 42%, transparent); }
.rm-dock-resize:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: 6px; }
/* AI message-action buttons: stronger resting contrast (esp. light themes) */
.rm-ai-act { background: color-mix(in srgb, var(--line-strong, var(--line)) 36%, transparent); }
/* Send button busy/disabled affordance */
.rm-ai-send:disabled { opacity: 0.5; cursor: progress; filter: grayscale(0.3); }
/* compact the per-message actions on very narrow phones */
/* r103 (a11y/responsive) — keep ≥28px so the tap target clears WCAG 2.2 SC 2.5.8 (24px min) on
   coarse pointers; 21x20 was an unhittable target. svg stays small so icons don't crowd. */
@media (max-width: 400px) {
  .rm-ai-acts { gap: 3px; }
  .rm-ai-act { width: 28px; height: 28px; }
  .rm-ai-act svg { width: 13px; height: 13px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   r50 — graphics quality + cinematic vignette (GPU-free depth overlay)
   ═══════════════════════════════════════════════════════════════════════ */
#rmVignette {
  position: fixed; inset: 0; pointer-events: none; z-index: 3; opacity: 0;
  transition: opacity 0.45s ease; will-change: opacity;
  background: radial-gradient(125% 115% at 50% 46%, transparent 56%, rgba(0,5,12,0.34) 100%);
}
body.rm-vignette #rmVignette { opacity: 1; }
body.rm-light.rm-vignette #rmVignette { background: radial-gradient(125% 115% at 50% 46%, transparent 60%, rgba(20,30,50,0.15) 100%); }
/* never veil the flat board editor */
body.rm-in-editor #rmVignette, body.rm-board-view #rmVignette { display: none; }
/* 4-up graphics-quality buttons fit the row */
.rm-hp-gfxrow .rm-hp-fbtn { flex: 1; padding-left: 4px; padding-right: 4px; font-size: 11.5px; }

/* ═══════════════════════════════════════════════════════════════════════
   r51 — user-named layout presets ("My Layouts" in the HUD menu)
   ═══════════════════════════════════════════════════════════════════════ */
.rm-hud-upchip { display: inline-flex; align-items: stretch; border-radius: 7px; overflow: hidden; border: 1px solid var(--line); }
.rm-hud-upchip .rm-hud-upbtn { border: none; border-radius: 0; }
.rm-hud-upchip .rm-hud-updel {
  border: none; border-left: 1px solid var(--line); background: color-mix(in srgb, var(--panel) 50%, transparent);
  color: var(--text-fade); cursor: pointer; font-size: 10px; padding: 0 7px; line-height: 1; display: inline-flex; align-items: center;
  -webkit-tap-highlight-color: transparent; transition: color .12s, background .12s;
}
.rm-hud-upchip .rm-hud-updel:hover { color: var(--danger); background: color-mix(in srgb, var(--danger) 14%, transparent); }   /* r108 — track the theme's --danger (was hard-coded #e0556e) */
/* r108 (visual) — light themes: the dark-theme widget/toast drop-shadows use heavy rgba(0,0,0,.42–.6) black,
   which reads as a muddy grey halo on white boards. Swap to the per-theme --hud-shadow tokens (they carry their
   own inset white highlight) + the accent glow, scoped to body.rm-light so the dark aesthetic is untouched.
   The :hover:not(...) selector is repeated to out-specify the dark hover rule it overrides. */
body.rm-light .rm-w { box-shadow: var(--hud-shadow), 0 0 16px color-mix(in srgb, var(--accent) 8%, transparent); }
body.rm-light .rm-w:hover,
body.rm-light .rm-w:hover:not(.rm-w-dragging):not(.rm-w-resizing) { box-shadow: var(--hud-shadow-strong), 0 0 22px color-mix(in srgb, var(--accent) 28%, transparent); }
body.rm-light .rm-toast { box-shadow: var(--hud-shadow), 0 0 24px color-mix(in srgb, var(--accent) 40%, transparent); }
.rm-hud-upchip:hover { border-color: var(--accent); }
.rm-hud-empty { font-size: 11px; color: var(--text-fade); padding: 2px 10px 6px; line-height: 1.4; }
.rm-hud-saverow { padding: 2px 8px 6px; }
.rm-hud-saveup {
  font: inherit; font-size: 11.5px; font-weight: 600; width: 100%; padding: 7px 10px; border-radius: 8px; cursor: pointer;
  background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); color: var(--accent);
  transition: background .14s, border-color .14s;
}
.rm-hud-saveup:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); border-color: var(--accent); }
.rm-hud-saveup:focus-visible { outline: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 40%, transparent); }
.rm-hud-updel:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* ═══════════════════════════════════════════════════════════════════════
   r53 — ULTRA-PREMIUM POLISH: Space-Grotesk headings · refined glass on
   floating windows · tactile machined buttons. Additive + theme-aware; no
   new GPU passes (CSS only) so it never costs frames.
   ═══════════════════════════════════════════════════════════════════════ */

/* — Headings/titles get a distinct premium geometric face — */
.rm-w-title, .rm-ai-title, .rm-hp-title, .rm-hp-sec h4, .rm-empty-title,
.rm-admin-head b, .rm-tg-title, .rm-modal h2, .rm-modal h3 {
  font-family: "Space Grotesk", "Manrope", sans-serif;
  letter-spacing: 0.005em;
}

/* — Refined glass on FLOATING windows only (per the hybrid directive): a thin
     illuminated top edge + faint inner light (internal reflection) + a deep,
     layered ambient shadow for believable elevation. — */
.rm-ai, .rm-help-panel, .rm-admin-panel, .rm-toolwin, .rm-tg-card, .rm-modal-card {
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 14%, transparent),
    inset 0 0 0 1px color-mix(in srgb, #fff 3%, transparent),
    0 28px 70px -14px color-mix(in srgb, #05080f 78%, transparent),
    0 6px 22px -6px color-mix(in srgb, #05080f 60%, transparent);
  border-color: color-mix(in srgb, var(--accent) 14%, var(--line-strong, var(--line)));
}
/* popovers (theme/HUD menus) — same language, lighter elevation */
.rm-pop {
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 13%, transparent),
    0 18px 46px -12px color-mix(in srgb, #05080f 72%, transparent),
    0 3px 12px -4px color-mix(in srgb, #05080f 55%, transparent);
  border-color: color-mix(in srgb, var(--accent) 13%, var(--line-strong, var(--line)));
}
/* light/pastel themes: soften the deep shadow so panels don't look heavy */
body.rm-light .rm-ai, body.rm-light .rm-help-panel, body.rm-light .rm-admin-panel,
body.rm-light .rm-toolwin, body.rm-light .rm-tg-card, body.rm-light .rm-modal-card,
body.rm-light .rm-pop {
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 60%, transparent),
    0 22px 54px -16px color-mix(in srgb, #1a2740 26%, transparent),
    0 4px 14px -6px color-mix(in srgb, #1a2740 18%, transparent);
}

/* — Tactile machined buttons: a faint top sheen at rest, an accent glow + inner
     ring on hover, crisp press. Layered over existing button backgrounds. — */
.rm-iconbtn, .rm-btn, .rm-dock-btn, .rm-tool-launch, .rm-bd-tool, .rm-bd-btn, .rm-nav-viewbtn {
  background-image: linear-gradient(180deg, color-mix(in srgb, #fff 7%, transparent), transparent 58%);
}
.rm-iconbtn:hover, .rm-dock-btn:hover, .rm-tool-launch:hover, .rm-bd-tool:hover, .rm-bd-btn:hover {
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--accent) 26%, transparent),
    0 5px 16px -5px color-mix(in srgb, var(--accent) 32%, transparent);
}
/* premium primary action (Add board, etc.) — luminous, gradient, floating */
.rm-btn.primary {
  background-image: linear-gradient(180deg, color-mix(in srgb, #fff 16%, transparent), transparent 64%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 26%, transparent),
    0 6px 20px -6px color-mix(in srgb, var(--accent) 50%, transparent);
}
.rm-btn.primary:hover {
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 32%, transparent),
    0 8px 26px -6px color-mix(in srgb, var(--accent) 62%, transparent);
}
.rm-btn.primary:active { transform: translateY(0) scale(0.97); }

/* — Active-element edge illumination (boards-face-you / view chips when on) — */
/* r87 (L-css3) — removed dead .rm-nav-viewbtn[aria-pressed="true"] (the JS never sets that attribute). */
.rm-iconbtn.active, .rm-dock-btn.active {
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--accent) 50%, transparent),
    0 0 18px -4px color-mix(in srgb, var(--accent) 40%, transparent);
}

/* ═══════════════════════════════════════════════════════════════════════
   r54 — DEEP-ROOT AUDIT FIXES (a11y + robustness). CSS-only, additive.
   ═══════════════════════════════════════════════════════════════════════ */

/* Graphics-quality + font-size pills (.rm-hp-fbtn) had no keyboard focus ring —
   keyboard users couldn't see which pill was focused. Match the shared ring. */
.rm-hp-fbtn:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent);
}

/* "My Layouts" apply/delete chips — the delete ✕ had no visible focus ring, and on
   pastel themes the faint default was invisible. Give both a clear accent halo. */
.rm-hud-upbtn:focus-visible, .rm-hud-updel:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 50%, transparent);
}
.rm-hud-updel:focus-visible { color: var(--accent); }

/* High-contrast preference: drop the translucent glow language for solid, legible
   panel edges so floating windows stay readable for low-vision users. */
@media (prefers-contrast: more) {
  .rm-ai, .rm-help-panel, .rm-admin-panel, .rm-toolwin, .rm-tg-card, .rm-modal-card, .rm-pop {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent), 0 22px 54px -18px rgba(0,0,0,0.7);
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   r61 — CONTEXT-AWARE CUSTOM WORKSPACE CURSOR. GPU-composited overlay (single
   transform per frame). Theme-coloured via var(--accent) + a --bg contrast halo
   so it never vanishes into any theme / gradient / 3D background. Native cursor
   hidden only while active; auto-off on touch / when the user toggles it off.
   ═══════════════════════════════════════════════════════════════════════ */
body.rm-cursor-on, body.rm-cursor-on * { cursor: none !important; }
#rmCursor { position: fixed; left: 0; top: 0; z-index: 999999; pointer-events: none; opacity: 0; transition: opacity .2s ease; will-change: transform; }

/* r76 — precision ARROW tip retained (hotspot = host origin = exact pointer); the
   adaptive .rm-cursor-body glow morphs per context behind it. Path tip sits at (1,1),
   so the SVG is offset −1,−1 to land the tip on the pointer. */
.rm-cursor-arrow { position: absolute; left: -1px; top: -1px; filter: drop-shadow(0 1.5px 2px rgba(0,0,0,.42)); transition: opacity .14s ease, transform .14s ease; }
/* r105 — GLASS pointer material. The shape is rounded by a round-joined rim stroke painted behind a
   translucent fill (paint-order:stroke), so corners read as soft bevels; the fill lets the board show
   through (true glass), the frosted top-left core + bright rim + specular sell the refraction. All
   accent-driven → the glass re-tints with every theme; light themes saturate more so it stays legible. */
.rm-cur-glass { stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; paint-order: stroke; }
.rm-cur-s0   { stop-color: color-mix(in srgb, #fff 86%, var(--accent)); stop-opacity: .93; }
.rm-cur-s1   { stop-color: color-mix(in srgb, var(--accent) 46%, #fff);  stop-opacity: .60; }
.rm-cur-s2   { stop-color: var(--accent);                                stop-opacity: .68; }
.rm-cur-rim0 { stop-color: color-mix(in srgb, #fff 70%, var(--accent));  stop-opacity: .98; }
.rm-cur-rim1 { stop-color: color-mix(in srgb, var(--accent) 76%, #000);  stop-opacity: .92; }
.rm-cur-spec { stroke: rgba(255,255,255,.74); stroke-width: 1.1; stroke-linecap: round; fill: none; }
/* light themes: a frosted near-white core washes out on white boards, so lean on the accent tint */
body.rm-light .rm-cursor-arrow { filter: drop-shadow(0 1.5px 2px rgba(0,0,0,.30)); }
body.rm-light .rm-cur-s0 { stop-color: color-mix(in srgb, #fff 52%, var(--accent)); stop-opacity: .92; }
body.rm-light .rm-cur-s1 { stop-color: color-mix(in srgb, var(--accent) 72%, #fff); stop-opacity: .74; }
body.rm-light .rm-cur-s2 { stop-color: color-mix(in srgb, var(--accent) 92%, #000); stop-opacity: .82; }
/* adaptive body glow, offset to sit behind the arrow's visual mass */
.rm-cursor-body {
  position: absolute; left: 7px; top: 9px; width: 13px; height: 13px;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 34%, transparent) 0%, transparent 70%);
  opacity: .42; transition: width .16s cubic-bezier(.22,.61,.36,1), height .16s cubic-bezier(.22,.61,.36,1), opacity .16s, background .16s, transform .1s cubic-bezier(.22,.61,.36,1);
}
/* r90 — click micro-feedback: compress the ORB on pointerdown (a soft depth response), ~100ms then
   spring back via the same transition. The ARROW stays pixel-still so the click hotspot never moves. */
#rmCursor.rm-cursor-press .rm-cursor-body { transform: translate(-50%, -50%) scale(.82); }
/* glyphs (centred on the pointer) for canvas states — hidden until their state activates */
.rm-cursor-ring, .rm-cursor-dot { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); border-radius: 50%; opacity: 0; }
.rm-cursor-ring { width: 22px; height: 22px; border: 1.5px solid var(--accent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--bg, #000) 60%, transparent), 0 0 10px -3px var(--accent); transition: width .16s cubic-bezier(.22,.61,.36,1), height .16s, border-radius .16s, background .16s, border-color .16s, opacity .16s; }
.rm-cursor-dot { width: 4px; height: 4px; background: var(--accent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--bg, #000) 55%, transparent); transition: opacity .16s, width .16s, height .16s, transform .16s; }

/* ── ARROW + body states (UI / empty canvas) ── */
#rmCursor[data-state="hover"]     .rm-cursor-body { width: 20px; height: 20px; opacity: .6; }
#rmCursor[data-state="button"]    .rm-cursor-body { width: 30px; height: 30px; opacity: .85; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 30%, transparent) 0%, transparent 68%); }
#rmCursor[data-state="precision"] .rm-cursor-body { width: 9px;  height: 9px;  opacity: .5; }

/* ── GLYPH states: hide the arrow + body, show the meaningful shape ── */
#rmCursor[data-state="text"] .rm-cursor-arrow, #rmCursor[data-state="grab"] .rm-cursor-arrow,
#rmCursor[data-state="grabbing"] .rm-cursor-arrow, #rmCursor[data-state="crosshair"] .rm-cursor-arrow,
#rmCursor[data-state^="resize"] .rm-cursor-arrow { opacity: 0; }
#rmCursor[data-state="text"] .rm-cursor-body, #rmCursor[data-state="grab"] .rm-cursor-body,
#rmCursor[data-state="grabbing"] .rm-cursor-body, #rmCursor[data-state="crosshair"] .rm-cursor-body,
#rmCursor[data-state="disabled"] .rm-cursor-body, #rmCursor[data-state^="resize"] .rm-cursor-body { opacity: 0; }

#rmCursor[data-state="text"] .rm-cursor-ring { opacity: 1; width: 2px; height: 22px; border-radius: 1px; background: var(--accent); border-color: transparent; box-shadow: 0 0 6px -1px var(--accent), 0 0 0 1px color-mix(in srgb, var(--bg,#000) 45%, transparent); }
#rmCursor[data-state="grab"] .rm-cursor-ring { opacity: 1; width: 26px; height: 26px; border-style: dashed; }
#rmCursor[data-state="grabbing"] .rm-cursor-ring { opacity: 1; width: 18px; height: 18px; background: color-mix(in srgb, var(--accent) 24%, transparent); }
#rmCursor[data-state="crosshair"] .rm-cursor-ring { opacity: 1; width: 10px; height: 10px; }
#rmCursor[data-state="crosshair"] .rm-cursor-dot { opacity: 1; width: 3px; height: 3px; }
#rmCursor[data-state^="resize"] .rm-cursor-dot { opacity: 1; width: 20px; height: 2px; border-radius: 2px; background: var(--accent); box-shadow: 0 0 6px -1px var(--accent), 0 0 0 1px color-mix(in srgb, var(--bg,#000) 45%, transparent); }
#rmCursor[data-state="resize-ns"] .rm-cursor-dot { transform: translate(-50%,-50%) rotate(90deg); }
#rmCursor[data-state="resize-nwse"] .rm-cursor-dot { transform: translate(-50%,-50%) rotate(45deg); }
#rmCursor[data-state="resize-nesw"] .rm-cursor-dot { transform: translate(-50%,-50%) rotate(-45deg); }

/* disabled: the arrow DIMS gracefully (per brief) rather than switching shape */
#rmCursor[data-state="disabled"] .rm-cursor-arrow { opacity: .4; }
#rmCursor[data-state="disabled"] .rm-cursor-arrow path { fill: var(--text-fade); }
/* loading: keep the arrow + a minimal progress ring spinning around it */
#rmCursor[data-state="loading"] .rm-cursor-body { opacity: 0; }
#rmCursor[data-state="loading"] .rm-cursor-ring { opacity: 1; left: 7px; top: 9px; width: 22px; height: 22px; border-color: color-mix(in srgb, var(--accent) 24%, transparent); border-top-color: var(--accent); animation: rmCurSpin .7s linear infinite; }

@keyframes rmCurSpin { to { transform: translate(-50%,-50%) rotate(360deg); } }
body.rm-cursor-reduce .rm-cursor-ring, body.rm-cursor-reduce .rm-cursor-dot, body.rm-cursor-reduce .rm-cursor-body { transition: none !important; animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .rm-cursor-ring, .rm-cursor-dot, .rm-cursor-body { transition: none !important; }
  #rmCursor[data-state="loading"] .rm-cursor-ring { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   r91 — RIGHT-CLICK CONTEXT MENU. Theme-aware glass, keyboard-navigable.
   ═══════════════════════════════════════════════════════════════════════ */
.rm-ctxmenu {
  position: fixed; z-index: 9500; min-width: 196px; max-width: 280px; padding: 5px;
  background: var(--panel-strong, var(--panel)); border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line-strong, var(--line)));
  border-radius: 12px; box-shadow: var(--hud-shadow-strong, 0 18px 50px -12px rgba(0,0,0,.6)), inset 0 1px 0 color-mix(in srgb, #fff 10%, transparent);
  backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); outline: none;
  animation: rmCtxIn .12s cubic-bezier(.22,.61,.36,1);
  max-height: calc(100vh - 16px); overflow-y: auto; scrollbar-width: thin;   /* r98 — tall menus scroll instead of clipping off-screen */
}
@keyframes rmCtxIn { from { opacity: 0; transform: translateY(-4px) scale(.985); } to { opacity: 1; transform: none; } }
.rm-ctxmenu-item {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 7px 11px; border: 0; background: transparent;
  color: var(--text); font: 500 13px "Manrope", Inter, system-ui, sans-serif; text-align: left; border-radius: 8px; cursor: pointer; white-space: nowrap;
}
.rm-ctxmenu-label { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; }
.rm-ctxmenu-kbd { flex: 0 0 auto; color: var(--text-fade); font: 600 10px "Space Grotesk", sans-serif; letter-spacing: .04em; background: color-mix(in srgb, var(--text) 9%, transparent); border-radius: 4px; padding: 1px 5px; }
.rm-ctxmenu-hint { flex: 0 0 auto; color: var(--text-fade); font-size: 10px; font-style: italic; }
.rm-ctxmenu-item.rm-ctxmenu-active { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.rm-ctxmenu-item.rm-ctxmenu-danger { color: var(--danger); }
.rm-ctxmenu-item.rm-ctxmenu-danger.rm-ctxmenu-active { background: color-mix(in srgb, var(--danger) 16%, transparent); }
.rm-ctxmenu-item[aria-disabled="true"] { color: var(--text-fade); opacity: .55; cursor: default; }
.rm-ctxmenu-sep { height: 1px; margin: 4px 6px; background: var(--line); }
@media (prefers-reduced-motion: reduce) { .rm-ctxmenu { animation: none; } }

/* ═══════════════════════════════════════════════════════════════════════
   r64 — COMMAND CENTER (⌘K). One searchable palette for every action, theme,
   view and board. Theme-styled glass panel; keyboard-first.
   ═══════════════════════════════════════════════════════════════════════ */
.rm-cmd-backdrop { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: flex-start; justify-content: center; padding-top: 13vh;
  background: color-mix(in srgb, var(--bg, #000) 52%, transparent); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.rm-cmd-backdrop[hidden] { display: none; }
.rm-cmd { width: min(560px, 92vw); max-height: 62vh; display: flex; flex-direction: column; overflow: hidden;
  background: var(--panel-strong); border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line-strong, var(--line)));
  border-radius: 16px; box-shadow: var(--hud-shadow-strong), inset 0 1px 0 color-mix(in srgb, #fff 12%, transparent); }
.rm-cmd-input { background: transparent; border: 0; border-bottom: 1px solid var(--line); color: var(--text);
  font: 500 16px "Manrope", Inter, system-ui, sans-serif; padding: 16px 18px; outline: none; }
.rm-cmd-input::placeholder { color: var(--text-fade); }
.rm-cmd-list { overflow-y: auto; padding: 6px; scrollbar-width: thin; }
.rm-cmd-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 12px; border-radius: 9px; }
.rm-cmd-item.active { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.rm-cmd-label { color: var(--text); font: 500 14px "Manrope", Inter, system-ui, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-cmd-grp { color: var(--text-fade); font: 600 10px "Space Grotesk", sans-serif; letter-spacing: .08em; text-transform: uppercase; flex: 0 0 auto; }
.rm-cmd-empty { color: var(--text-fade); padding: 20px; text-align: center; font-size: 13px; }
.rm-cmd-foot { border-top: 1px solid var(--line); padding: 8px 14px; color: var(--text-fade); font-size: 11px; }
.rm-cmd-foot kbd { background: color-mix(in srgb, var(--text) 10%, transparent); border-radius: 4px; padding: 1px 5px; font-size: 10px; }