/* ===== OTHARIS SIGNATURE (Task 86241) ==========================================================
   The proprietary OTHARIS design language, layered on top of the existing theme engine (Classic /
   White / Smart token blocks in index.html). It never forks a theme: every rule reads the same
   --color-* / --radius-* / --shadow-* / --ot-motion-* tokens, so all three themes inherit it.

   The motif comes from the mark itself (frontend/assets/brand/logo.svg): a brushed-platinum ring
   cut by a deep-blue facet. Three ownable elements derive from it and are used sparingly:
     1. the FACET RULE   - a 2px platinum -> accent -> deep-blue edge on signature surfaces
     2. the SIGNATURE RING - the same gradient as a conic ring (unseen Insights, avatar focus)
     3. the LOGO ANCHOR  - the mark itself, muted, anchoring empty / loading / error states
   Data colours (gain / loss / warning / chart palette) are deliberately untouched: they carry
   meaning, not brand. Motion uses the existing --ot-motion-* tokens and the global
   prefers-reduced-motion rule (index.html) zeroes all of it. No libraries, no web fonts added. */

:root {
  --ot-brand-navy: 6 21 37;        /* #061525 Midnight Navy */
  --ot-brand-deep: 11 58 115;      /* #0B3A73 Deep Blue */
  --ot-brand-accent: 59 130 246;   /* #3B82F6 Accent Blue */
  --ot-brand-icy: 220 238 255;     /* #DCEEFF Icy Blue */
  --ot-brand-platinum: 229 231 235;/* #E5E7EB Platinum */
  --ot-brand-silver: 152 164 179;  /* #98A4B3 Silver Gray */
  --ot-sig-metal: linear-gradient(115deg, rgb(var(--ot-brand-platinum)) 0%, rgb(var(--ot-brand-silver)) 28%, rgb(var(--color-accent)) 62%, rgb(var(--ot-brand-deep)) 100%);
  --ot-sig-ring: conic-gradient(from 210deg, rgb(var(--ot-brand-platinum)), rgb(var(--ot-brand-silver)) 22%, rgb(var(--color-accent)) 55%, rgb(var(--ot-brand-deep)) 78%, rgb(var(--ot-brand-platinum)));
  --ot-focus: 0 0 0 2px rgb(var(--color-bg)), 0 0 0 4px rgb(var(--color-accent) / 0.85);
  --ot-on-accent: 255 255 255;
}

/* Smart keeps its own typeface, depth and motion personality, but its accent now belongs to the
   OTHARIS blue family (it was violet), so the brand reads as one product across all three themes.
   Its teal positives are data colour and stay. White was already in the brand blue family. */
:root[data-theme="smart"] {
  --color-accent: 96 165 250;
  --color-accent-deep: 37 99 235;
  --ot-glow-rgb-default: 96, 165, 250;
}

/* Premium (plan badges, PRO-gated values, upgrade surfaces): the logo's platinum, not a foreign
   violet. Dark themes read it as brushed metal; White uses a deep slate so it stays AA-legible. */
:root {
  --color-premium-strong: 236 244 255;
  --color-premium-text: 196 216 244;   /* icy platinum: distinct from body text, never violet */
  --color-premium: 168 190 222;
  --color-premium-deep: 120 140 172;
}
:root[data-theme="white"] {
  --color-premium-strong: 15 23 42;
  --color-premium-text: 51 65 85;
  --color-premium: 71 85 105;
  --color-premium-deep: 51 65 85;
}

/* ---------------------------------------------------------------- focus (a11y, global, low specificity) */
:where(button, a, [role="button"], [role="tab"], input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid rgb(var(--color-accent));
  outline-offset: 2px;
}

/* ---------------------------------------------------------------- facet rule */
.ot-facet { position: relative; }
.ot-facet::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; pointer-events: none;
  background: var(--ot-sig-metal); opacity: 0.85; border-radius: inherit; border-bottom-left-radius: 0; border-bottom-right-radius: 0;
}

/* ---------------------------------------------------------------- button system */
.ot-btn {
  --ot-btn-h: 2.5rem;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
  min-height: var(--ot-btn-h); padding: 0 1.05rem; border-radius: var(--radius-pill);
  font: 700 0.8125rem/1 var(--font-sans); letter-spacing: 0.01em; white-space: nowrap;
  border: 1px solid transparent; cursor: pointer; user-select: none; touch-action: manipulation;
  transition: background-color var(--ot-motion-fast) var(--ot-ease-out), color var(--ot-motion-fast) var(--ot-ease-out),
              border-color var(--ot-motion-fast) var(--ot-ease-out), box-shadow var(--ot-motion-fast) var(--ot-ease-out),
              transform var(--ot-motion-instant) var(--ot-ease-out), opacity var(--ot-motion-fast) ease;
}
.ot-btn i, .ot-btn svg { width: 1rem; height: 1rem; flex-shrink: 0; }
.ot-btn:active:not(:disabled) { transform: translateY(1px); }
.ot-btn:focus-visible { outline: none; box-shadow: var(--ot-focus); }
.ot-btn:disabled, .ot-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; }
.ot-btn-sm { --ot-btn-h: 2rem; padding: 0 0.8rem; font-size: 0.75rem; }
.ot-btn-lg { --ot-btn-h: 2.875rem; padding: 0 1.4rem; font-size: 0.875rem; }
.ot-btn-primary {
  color: rgb(var(--ot-on-accent)); background: rgb(var(--color-accent));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.22), 0 6px 18px -8px rgb(var(--color-accent) / 0.75);
}
.ot-btn-primary:hover:not(:disabled) { background: rgb(var(--color-accent) / 0.9); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.28), 0 10px 24px -8px rgb(var(--color-accent) / 0.85); }
.ot-btn-secondary { color: rgb(var(--color-text-primary)); background: rgb(var(--color-surface-2)); border-color: rgb(var(--color-border-accent)); }
.ot-btn-secondary:hover:not(:disabled) { border-color: rgb(var(--color-accent) / 0.6); background: rgb(var(--color-surface-hover)); }
.ot-btn-ghost { color: rgb(var(--color-text-secondary)); background: transparent; }
.ot-btn-ghost:hover:not(:disabled) { color: rgb(var(--color-text-primary)); background: rgb(var(--color-surface-hover)); }
.ot-btn-danger { color: #fff; background: rgb(var(--color-negative)); }
.ot-btn-danger:hover:not(:disabled) { background: rgb(var(--color-negative) / 0.88); }
.ot-btn-icon { width: var(--ot-btn-h); padding: 0; }
.ot-btn-icon.ot-btn-sm { width: 2rem; }
.ot-btn[aria-pressed="true"], .ot-btn.is-on { color: rgb(var(--color-accent)); border-color: rgb(var(--color-accent) / 0.55); background: rgb(var(--color-accent) / 0.1); }
.ot-btn.is-busy { position: relative; color: transparent !important; pointer-events: none; }
.ot-btn.is-busy::after { content: ""; position: absolute; width: 1rem; height: 1rem; border-radius: 50%; border: 2px solid rgb(255 255 255 / 0.35); border-top-color: #fff; animation: ot-spin 0.8s linear infinite; }

/* Existing primary CTAs join the same family without touching their markup. */
.cm-btn-primary { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.2), 0 6px 18px -8px rgb(var(--color-accent) / 0.7); transition: filter var(--ot-motion-fast) ease, opacity var(--ot-motion-fast) ease, box-shadow var(--ot-motion-fast) ease, transform var(--ot-motion-instant) ease; }
.cm-btn-primary:active:not(:disabled) { transform: translateY(1px); }
.cm-btn-primary:focus-visible, .cm-chip:focus-visible, .cm-icon-btn:focus-visible { outline: none; box-shadow: var(--ot-focus); }
.fx-cta { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.16); }
.fx-cta::before { background: linear-gradient(120deg, transparent, rgb(var(--ot-brand-icy) / 0.38), transparent); }
.cm-icon-btn:active { transform: scale(0.96); }

/* Segmented control (tool properties, toggles). */
.ot-seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: var(--radius-pill); background: rgb(var(--color-bg) / 0.6); border: 1px solid rgb(var(--color-border)); }
.ot-seg > button { min-height: 2rem; padding: 0 0.8rem; border-radius: var(--radius-pill); font: 600 0.75rem/1 var(--font-sans); color: rgb(var(--color-text-muted)); display: inline-flex; align-items: center; gap: 0.35rem; transition: background-color var(--ot-motion-fast) ease, color var(--ot-motion-fast) ease; }
.ot-seg > button:hover { color: rgb(var(--color-text-primary)); }
.ot-seg > button[aria-pressed="true"] { background: rgb(var(--color-accent)); color: #fff; }
.ot-seg > button i { width: 0.9rem; height: 0.9rem; }

/* ---------------------------------------------------------------- card variants */
.ot-card-raised { background: rgb(var(--color-elevated)); border: 1px solid rgb(var(--color-border)); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.ot-card-inset { background: rgb(var(--color-bg) / 0.55); border: 1px solid rgb(var(--color-border) / 0.8); border-radius: var(--radius-md); }
.ot-card-signature { position: relative; overflow: hidden; background: linear-gradient(180deg, rgb(var(--color-accent) / 0.06), transparent 40%), rgb(var(--color-surface)); border: 1px solid rgb(var(--color-border-accent)); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.ot-card-signature::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: var(--ot-sig-metal); }

/* ---------------------------------------------------------------- navigation: one active language */
.nav-tab.bg-terminal-accent\/10:not(.nav-dropdown-item), .nav-group-btn.nav-group-active { box-shadow: inset 0 -2px 0 rgb(var(--color-accent)); }
.nav-dropdown-item.bg-terminal-accent\/10 { box-shadow: inset 2px 0 0 rgb(var(--color-accent)); }
.mobile-bottom-nav-btn::before { background: var(--ot-sig-metal); height: 3px; width: 26px; }

/* ---------------------------------------------------------------- states: empty / loading / error */
.ot-state { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 0.55rem; padding: 2rem 1.25rem; color: rgb(var(--color-text-muted)); }
.ot-state-mark { width: 2rem; height: 2rem; opacity: 0.55; filter: saturate(0.6); }
.ot-state-compact { padding: 1.25rem 1rem; gap: 0.4rem; }
.ot-state-compact .ot-state-mark { width: 1.5rem; height: 1.5rem; }
.ot-state-loading .ot-state-mark { animation: ot-breathe 1.6s var(--ot-ease-out) infinite; }
.ot-state-title { font: 700 0.875rem/1.3 var(--font-sans); color: rgb(var(--color-text-primary)); }
.ot-state-body { font-size: 0.8125rem; line-height: 1.5; max-width: 26rem; }
.ot-state-error .ot-state-title { color: rgb(var(--color-text-primary)); }
.ot-state-error .ot-state-mark { filter: grayscale(1); }
.ot-state-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: center; margin-top: 0.25rem; }
.ot-spinner { width: 1.25rem; height: 1.25rem; border-radius: 50%; border: 2px solid rgb(var(--color-accent) / 0.25); border-top-color: rgb(var(--color-accent)); animation: ot-spin 0.8s linear infinite; }
.ot-progress { width: 100%; height: 3px; border-radius: 3px; background: rgb(255 255 255 / 0.14); overflow: hidden; }
.ot-progress > i { display: block; height: 100%; width: 0; background: var(--ot-sig-metal); transition: width var(--ot-motion-fast) linear; }
@keyframes ot-spin { to { transform: rotate(360deg); } }
@keyframes ot-breathe { 0%, 100% { opacity: 0.35; transform: scale(0.96); } 50% { opacity: 0.75; transform: scale(1); } }
@keyframes ot-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------- central avatar renderer */
.ot-avatar-img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block; }

/* =====================================================================================
   INSIGHT COMPOSITION - the ONE renderer used by Insight Studio's preview and by the viewer,
   so the preview is the published result. A 9:16 frame; type scales with the frame (cqw).
   ===================================================================================== */
.ot-ins-frame { position: relative; container-type: inline-size; aspect-ratio: 9 / 16; width: 100%; max-height: 100%; overflow: hidden; border-radius: 0.9rem; isolation: isolate; color: #fff; background: rgb(var(--ot-brand-navy)); }
.ot-ins-media { position: absolute; max-width: none; user-select: none; -webkit-user-drag: none; }
.ot-ins-media.is-contained { inset: 0; width: 100%; height: 100%; object-fit: contain; }
.ot-ins-bg { position: absolute; inset: 0; z-index: -1; }

.ot-ins-preset-midnight { background: radial-gradient(120% 70% at 20% 0%, rgb(var(--ot-brand-deep) / 0.85), transparent 60%), radial-gradient(90% 60% at 100% 100%, rgb(var(--ot-brand-accent) / 0.22), transparent 60%), rgb(var(--ot-brand-navy)); }
.ot-ins-preset-intelligence { background: linear-gradient(160deg, rgb(var(--ot-brand-deep)) 0%, rgb(var(--ot-brand-navy)) 62%), rgb(var(--ot-brand-navy)); }
.ot-ins-preset-intelligence .ot-ins-bg { background: linear-gradient(115deg, transparent 54%, rgb(var(--ot-brand-icy) / 0.08) 54.2%, transparent 72%), linear-gradient(115deg, transparent 63%, rgb(var(--ot-brand-accent) / 0.16) 63.2%, transparent 80%); }
.ot-ins-preset-market { background: linear-gradient(rgb(255 255 255 / 0.035) 1px, transparent 1px) 0 0 / 100% 8.33cqw, linear-gradient(90deg, rgb(255 255 255 / 0.035) 1px, transparent 1px) 0 0 / 8.33cqw 100%, #070C14; }
.ot-ins-preset-editorial { background: #F3F0E8; color: #0B1B2E; }

.ot-ins-card { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 3.5cqw; padding: 18cqw 9cqw; }
.ot-ins-card.is-center { align-items: center; text-align: center; }
.ot-ins-card.is-left { align-items: flex-start; text-align: left; }
.ot-ins-card p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.ot-ins-mark { font: 600 2.9cqw/1 'JetBrains Mono', monospace; letter-spacing: 0.14em; text-transform: uppercase; color: rgb(var(--ot-brand-icy) / 0.8); display: inline-flex; align-items: center; gap: 2cqw; }
.ot-ins-mark::before { content: ""; width: 7cqw; height: 0.6cqw; border-radius: 1cqw; background: var(--ot-sig-metal); }
.ot-ins-v-statement p { font: 700 7.4cqw/1.22 var(--font-sans); letter-spacing: -0.01em; }
.ot-ins-v-thesis p { font: 600 6.2cqw/1.32 var(--font-sans); padding-left: 4cqw; border-left: 0.9cqw solid rgb(var(--color-accent)); }
.ot-ins-v-thesis.is-center p { padding-left: 0; border-left: 0; }
.ot-ins-v-quote p { font: italic 500 6.6cqw/1.34 Georgia, "Times New Roman", serif; }
.ot-ins-v-quote .ot-ins-quote-glyph { font: 700 22cqw/0.6 Georgia, serif; color: rgb(var(--color-accent)); height: 9cqw; }
.ot-ins-v-note p { font: 500 5.1cqw/1.5 var(--font-sans); }
.ot-ins-v-note { padding: 18cqw 7cqw; }
.ot-ins-v-note .ot-ins-note { background: rgb(255 255 255 / 0.06); border: 1px solid rgb(255 255 255 / 0.12); border-radius: 3cqw; padding: 6cqw; display: flex; flex-direction: column; gap: 3cqw; width: 100%; }
.ot-ins-preset-editorial .ot-ins-mark { color: #31507A; }
.ot-ins-preset-editorial .ot-ins-v-note .ot-ins-note { background: #fff; border-color: #E2DCCD; }
.ot-ins-preset-editorial .ot-ins-v-statement p, .ot-ins-preset-editorial .ot-ins-v-thesis p { font-family: Georgia, "Times New Roman", serif; }

.ot-ins-caption { position: absolute; left: 6cqw; right: 6cqw; margin: 0; padding: 3cqw 4cqw; border-radius: 3cqw; font: 600 4.6cqw/1.38 var(--font-sans); white-space: pre-wrap; overflow-wrap: anywhere; background: rgb(6 21 37 / 0.66); border: 1px solid rgb(var(--ot-brand-icy) / 0.18); box-shadow: 0 6px 20px -8px rgb(0 0 0 / 0.6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; }
.ot-ins-caption.is-top { top: 17cqw; }
.ot-ins-caption.is-bottom { bottom: 15cqw; }
.ot-ins-caption.is-center { text-align: center; }
.ot-ins-preset-editorial .ot-ins-caption { background: rgb(243 240 232 / 0.92); border-color: #D8D1C0; color: #0B1B2E; }

.ot-ins-chips { position: absolute; left: 6cqw; right: 6cqw; bottom: 5cqw; display: flex; flex-wrap: wrap; gap: 2cqw; z-index: 3; }
.ot-ins-chips.is-top-safe { bottom: auto; top: 17cqw; }
.ot-ins-chip { display: inline-flex; align-items: center; gap: 1.6cqw; max-width: 100%; padding: 1.8cqw 3.2cqw; border-radius: 99px; font: 600 3.5cqw/1.1 var(--font-sans); color: #fff; background: rgb(6 21 37 / 0.66); border: 1px solid rgb(var(--ot-brand-icy) / 0.22); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ot-ins-chip b { font: 700 3.4cqw/1 'JetBrains Mono', monospace; color: rgb(var(--ot-brand-icy)); letter-spacing: 0.02em; }
.ot-ins-chip span { overflow: hidden; text-overflow: ellipsis; }
button.ot-ins-chip { cursor: pointer; }
button.ot-ins-chip:hover { border-color: rgb(var(--ot-brand-icy) / 0.55); }
.ot-ins-preset-editorial .ot-ins-chip { background: #fff; color: #0B1B2E; border-color: #D8D1C0; }
.ot-ins-preset-editorial .ot-ins-chip b { color: #0B3A73; }

/* =====================================================================================
   INSIGHT RAIL + VIEWER - restyle only (all hooks/behaviour unchanged)
   ===================================================================================== */
.cm-ir { position: relative; overflow: hidden; }
.cm-ir::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: var(--ot-sig-metal); opacity: 0.7; }
.cm-ir-ring.is-unseen { border-color: transparent; background: linear-gradient(rgb(var(--color-surface)), rgb(var(--color-surface))) padding-box, var(--ot-sig-ring) border-box; box-shadow: 0 0 14px rgb(var(--color-accent) / 0.35); }
.cm-ir-item:hover .cm-ir-ring, .cm-ir-item:focus-visible .cm-ir-ring { transform: translateY(-1px); }
.cm-ir-ring { transition: border-color var(--ot-motion-fast) ease, box-shadow var(--ot-motion-fast) ease, transform var(--ot-motion-fast) var(--ot-ease-out); }
.cm-ir-plus { background: rgb(var(--color-accent)); box-shadow: 0 4px 12px -4px rgb(var(--color-accent) / 0.8); }
.cm-iv-stage { background: radial-gradient(120% 60% at 50% 0%, rgb(var(--ot-brand-deep) / 0.35), transparent 60%), #050d16; }
.cm-iv-body { padding: 0; }
.cm-iv-body > .ot-ins-frame { width: auto; height: 100%; max-width: 100%; border-radius: 0; }
@media (min-width: 640px) { .cm-iv-body > .ot-ins-frame { border-radius: 0; } }
.cm-iv-seg > i { background: var(--ot-sig-metal); }
.cm-iv-state { padding: 0 1.5rem; }
.cm-iv-state .ot-state-mark { width: 2.25rem; height: 2.25rem; opacity: 0.6; }
.cm-iv-head { background: linear-gradient(to bottom, rgb(0 0 0 / 0.55), transparent); padding-bottom: 1.25rem; top: 0.9rem; }

/* =====================================================================================
   INSIGHT STUDIO - full-screen workspace
   ===================================================================================== */
.ot-studio { position: fixed; inset: 0; z-index: 66; display: flex; flex-direction: column; background: rgb(var(--color-bg)); color: rgb(var(--color-text-primary)); }
.ot-studio.hidden { display: none; }
.ot-studio-top { position: relative; display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0.9rem; border-bottom: 1px solid rgb(var(--color-border)); background: rgb(var(--color-surface)); }
.ot-studio-top::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--ot-sig-metal); opacity: 0.55; }
.ot-studio-brand { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.ot-studio-logo { width: 1.35rem; height: 1.35rem; }
.ot-studio-title { font: 700 0.95rem/1.2 var(--font-sans); letter-spacing: var(--tracking-heading); white-space: nowrap; }
.ot-steps { display: flex; align-items: center; gap: 0.25rem; margin: 0 auto; padding: 0; list-style: none; counter-reset: ot-step; }
.ot-steps li { counter-increment: ot-step; display: inline-flex; align-items: center; gap: 0.35rem; font: 600 0.7rem/1 var(--font-sans); color: rgb(var(--color-text-muted)); padding: 0.35rem 0.55rem; border-radius: var(--radius-pill); }
.ot-steps li::before { content: counter(ot-step); width: 1.1rem; height: 1.1rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.625rem; border: 1px solid rgb(var(--color-border-accent)); }
.ot-steps li.is-done { color: rgb(var(--color-text-secondary)); }
.ot-steps li.is-done::before { content: "✓"; background: rgb(var(--color-accent) / 0.18); border-color: rgb(var(--color-accent) / 0.5); color: rgb(var(--color-accent)); }
.ot-steps li.is-current { color: rgb(var(--color-text-primary)); background: rgb(var(--color-accent) / 0.12); }
.ot-steps li.is-current::before { background: rgb(var(--color-accent)); border-color: rgb(var(--color-accent)); color: #fff; }
.ot-studio-limit { font-size: 0.7rem; color: rgb(var(--color-text-muted)); text-align: right; max-width: 15rem; }

.ot-studio-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 22.5rem; }
.ot-studio-stage-col { min-height: 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; padding: 1.25rem; background: radial-gradient(80% 60% at 50% 30%, rgb(var(--color-accent) / 0.07), transparent 70%); }
.ot-studio-stage { position: relative; height: min(100%, 44rem); max-height: calc(100dvh - 12rem); aspect-ratio: 9 / 16; max-width: 100%; display: flex; align-items: center; justify-content: center; }
.ot-studio-canvas { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.ot-studio-canvas.hidden { display: none; }
.ot-studio-canvas > .ot-ins-frame { height: 100%; width: auto; max-width: 100%; box-shadow: 0 30px 70px -30px rgb(0 0 0 / 0.75), 0 0 0 1px rgb(var(--color-border-accent)); }
.ot-studio-stage.is-pannable .ot-ins-frame { cursor: grab; touch-action: none; }
.ot-studio-stage.is-panning .ot-ins-frame { cursor: grabbing; }
.ot-studio-safe { position: absolute; inset: 0; pointer-events: none; z-index: 4; border-radius: inherit; }
.ot-studio-stage.is-pannable .ot-studio-safe { background: linear-gradient(rgb(255 255 255 / 0.18), rgb(255 255 255 / 0.18)) 33.33% 0 / 1px 100% no-repeat, linear-gradient(rgb(255 255 255 / 0.18), rgb(255 255 255 / 0.18)) 66.66% 0 / 1px 100% no-repeat, linear-gradient(90deg, rgb(255 255 255 / 0.18), rgb(255 255 255 / 0.18)) 0 33.33% / 100% 1px no-repeat, linear-gradient(90deg, rgb(255 255 255 / 0.18), rgb(255 255 255 / 0.18)) 0 66.66% / 100% 1px no-repeat; opacity: 0; transition: opacity var(--ot-motion-fast) ease; }
.ot-studio-stage.is-panning .ot-studio-safe { opacity: 1; }

.ot-studio-select { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 0.75rem; padding: 1.25rem; border-radius: 0.9rem; border: 1px dashed rgb(var(--color-border-accent)); background: rgb(var(--color-surface) / 0.6); }
.ot-studio-choice { display: flex; align-items: center; gap: 0.9rem; width: 100%; text-align: left; padding: 0.95rem 1rem; border-radius: var(--radius-lg); border: 1px solid rgb(var(--color-border)); background: rgb(var(--color-surface)); color: rgb(var(--color-text-primary)); transition: border-color var(--ot-motion-fast) ease, transform var(--ot-motion-fast) var(--ot-ease-out), background-color var(--ot-motion-fast) ease; }
.ot-studio-choice:hover { border-color: rgb(var(--color-accent) / 0.6); transform: translateY(-1px); background: rgb(var(--color-surface-hover)); }
.ot-studio-choice > i, .ot-studio-choice > svg { width: 2.5rem; height: 2.5rem; padding: 0.6rem; border-radius: var(--radius-md); background: rgb(var(--color-accent) / 0.12); color: rgb(var(--color-accent)); flex-shrink: 0; }
.ot-studio-choice strong { display: block; font: 700 0.9rem/1.25 var(--font-sans); }
.ot-studio-choice small { display: block; font-size: 0.75rem; line-height: 1.35; color: rgb(var(--color-text-muted)); margin-top: 0.15rem; }
.ot-studio-resume { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; padding: 0.7rem 0.8rem; border-radius: var(--radius-md); background: rgb(var(--color-accent) / 0.1); border: 1px solid rgb(var(--color-accent) / 0.35); font-size: 0.78rem; }
.ot-studio-resume.hidden { display: none; }
.ot-studio-busy { position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; padding: 2rem; border-radius: 0.9rem; background: rgb(6 21 37 / 0.82); color: #fff; font-size: 0.85rem; text-align: center; }
.ot-studio-busy.hidden { display: none; }
.ot-studio-busy .ot-progress { max-width: 12rem; }
.ot-studio-note { max-width: 24rem; font-size: 0.75rem; line-height: 1.45; text-align: center; color: rgb(var(--color-text-secondary)); padding: 0.5rem 0.75rem; border-radius: var(--radius-md); background: rgb(var(--color-warning) / 0.1); border: 1px solid rgb(var(--color-warning) / 0.35); }
.ot-studio-note.hidden { display: none; }

/* trim */
.ot-trim { width: min(100%, 30rem); display: flex; flex-direction: column; gap: 0.4rem; }
.ot-trim.hidden { display: none; }
.ot-trim-head { display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; color: rgb(var(--color-text-secondary)); }
.ot-trim-head i { width: 0.95rem; height: 0.95rem; color: rgb(var(--color-accent)); }
.ot-trim-head output { margin-left: auto; font: 600 0.75rem/1 'JetBrains Mono', monospace; color: rgb(var(--color-text-primary)); }
.ot-trim-track { position: relative; height: 2.75rem; border-radius: var(--radius-md); background: repeating-linear-gradient(90deg, rgb(var(--color-surface-2)) 0 10px, rgb(var(--color-surface-hover)) 10px 11px); border: 1px solid rgb(var(--color-border)); touch-action: none; user-select: none; }
.ot-trim-sel { position: absolute; top: -1px; bottom: -1px; border: 2px solid rgb(var(--color-accent)); border-radius: var(--radius-md); background: rgb(var(--color-accent) / 0.14); cursor: grab; }
.ot-trim-handle { position: absolute; top: -1px; bottom: -1px; width: 1.1rem; margin-left: -0.55rem; border-radius: 0.35rem; background: rgb(var(--color-accent)); display: flex; align-items: center; justify-content: center; cursor: ew-resize; z-index: 2; }
.ot-trim-handle::after { content: ""; width: 2px; height: 40%; border-radius: 2px; background: rgb(255 255 255 / 0.85); }
.ot-trim-handle::before { content: ""; position: absolute; inset: -0.5rem -0.6rem; }
.ot-trim-handle:focus-visible { outline: none; box-shadow: var(--ot-focus); }
.ot-trim-head-mark { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: #fff; border-radius: 2px; pointer-events: none; z-index: 3; box-shadow: 0 0 4px rgb(0 0 0 / 0.6); }
.ot-trim-scale { display: flex; justify-content: space-between; font: 500 0.65rem/1 'JetBrains Mono', monospace; color: rgb(var(--color-text-muted)); }

/* tools */
.ot-studio-tools { min-height: 0; display: flex; flex-direction: column; border-left: 1px solid rgb(var(--color-border)); background: rgb(var(--color-surface)); }
.ot-tool-rail { display: flex; gap: 0.25rem; padding: 0.5rem; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid rgb(var(--color-border)); }
.ot-tool-rail::-webkit-scrollbar { display: none; }
.ot-tool { flex: 1 0 auto; min-width: 3.4rem; display: flex; flex-direction: column; align-items: center; gap: 0.25rem; padding: 0.45rem 0.35rem; border-radius: var(--radius-md); font: 600 0.65rem/1.1 var(--font-sans); color: rgb(var(--color-text-muted)); transition: background-color var(--ot-motion-fast) ease, color var(--ot-motion-fast) ease; }
.ot-tool i, .ot-tool svg { width: 1.1rem; height: 1.1rem; }
.ot-tool:hover { color: rgb(var(--color-text-primary)); background: rgb(var(--color-surface-hover)); }
.ot-tool[aria-selected="true"] { color: rgb(var(--color-accent)); background: rgb(var(--color-accent) / 0.1); box-shadow: inset 0 -2px 0 rgb(var(--color-accent)); }
.ot-tool.hidden { display: none; }
.ot-tool-panel { flex: 1; min-height: 0; overflow-y: auto; padding: 1rem; }
.ot-tool-pane { display: flex; flex-direction: column; gap: 0.9rem; animation: ot-rise var(--ot-motion-base) var(--ot-ease-out); }
.ot-tool-pane.hidden { display: none; }
.ot-field-label { font: 600 0.6875rem/1.2 var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase; color: rgb(var(--color-text-muted)); }
.ot-field-hint { font-size: 0.75rem; line-height: 1.45; color: rgb(var(--color-text-muted)); }
.ot-textarea, .ot-input { width: 100%; border-radius: var(--radius-md); border: 1px solid rgb(var(--color-border)); background: rgb(var(--color-bg) / 0.65); color: rgb(var(--color-text-primary)); font: 400 0.9rem/1.5 var(--font-sans); padding: 0.6rem 0.75rem; transition: border-color var(--ot-motion-fast) ease, box-shadow var(--ot-motion-fast) ease; }
.ot-textarea { resize: none; min-height: 7.5rem; }
.ot-textarea:focus, .ot-input:focus { outline: none; border-color: rgb(var(--color-accent) / 0.7); box-shadow: 0 0 0 3px rgb(var(--color-accent) / 0.16); }
.ot-counter { font: 500 0.7rem/1 'JetBrains Mono', monospace; color: rgb(var(--color-text-muted)); text-align: right; }
.ot-counter.is-near { color: rgb(var(--color-warning)); }
.ot-range { width: 100%; accent-color: rgb(var(--color-accent)); }
.ot-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.ot-presets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
.ot-preset { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; aspect-ratio: 4 / 3; padding: 0.6rem; border-radius: var(--radius-md); border: 1px solid rgb(var(--color-border)); overflow: hidden; color: #fff; text-align: left; transition: border-color var(--ot-motion-fast) ease, transform var(--ot-motion-fast) var(--ot-ease-out); }
.ot-preset strong { font: 700 0.7rem/1 'JetBrains Mono', monospace; letter-spacing: 0.1em; }
.ot-preset small { font-size: 0.65rem; opacity: 0.75; margin-top: 0.2rem; }
.ot-preset[aria-pressed="true"] { border-color: rgb(var(--color-accent)); box-shadow: 0 0 0 2px rgb(var(--color-accent) / 0.45); }
.ot-preset:hover { transform: translateY(-1px); }
.ot-preset.ot-ins-preset-editorial { color: #0B1B2E; }
.ot-picked { display: flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.7rem; border-radius: var(--radius-md); border: 1px solid rgb(var(--color-accent) / 0.45); background: rgb(var(--color-accent) / 0.08); font-size: 0.8rem; }
.ot-picked.hidden { display: none; }
.ot-picked b { font-family: 'JetBrains Mono', monospace; }
.ot-picked span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: rgb(var(--color-text-secondary)); }
.ot-results { display: flex; flex-direction: column; gap: 0.15rem; max-height: 15rem; overflow-y: auto; }
.ot-result { display: flex; align-items: center; gap: 0.6rem; width: 100%; text-align: left; padding: 0.5rem 0.6rem; border-radius: var(--radius-md); font-size: 0.8rem; color: rgb(var(--color-text-secondary)); }
.ot-result:hover, .ot-result:focus-visible { background: rgb(var(--color-surface-hover)); color: rgb(var(--color-text-primary)); }
.ot-result b { font-family: 'JetBrains Mono', monospace; color: rgb(var(--color-text-primary)); min-width: 3.5rem; }
.ot-result span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ot-topic-grid { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.ot-topic-grid .cm-chip[aria-pressed="true"] { background: rgb(var(--color-accent)); color: #fff; border-color: rgb(var(--color-accent)); }

.ot-studio-foot { display: flex; align-items: center; gap: 0.5rem; padding: 0.65rem 0.9rem calc(0.65rem + env(safe-area-inset-bottom, 0px)); border-top: 1px solid rgb(var(--color-border)); background: rgb(var(--color-surface)); }
.ot-studio-foot .ot-spacer { flex: 1; min-width: 0; }
.ot-studio-error { font-size: 0.78rem; color: rgb(var(--color-negative)); line-height: 1.35; }
.ot-studio-error.hidden { display: none; }
.ot-studio-hint { font-size: 0.72rem; color: rgb(var(--color-text-muted)); }
.ot-studio-hint.is-info { color: rgb(var(--color-accent)); font-weight: 600; }
.ot-studio-foot .hidden { display: none; }
.ot-studio[data-step="select"] .ot-studio-tools, .ot-studio[data-step="select"] [data-needs="edit"] { visibility: hidden; }
.ot-studio[data-step="preview"] .ot-studio-tools { pointer-events: none; opacity: 0.45; }

@media (max-width: 1023px) {
  .ot-studio-body { grid-template-columns: minmax(0, 1fr) 19rem; }
  .ot-steps li span { display: none; }
}
@media (max-width: 767px) {
  .ot-studio-top { padding: 0.5rem 0.6rem; gap: 0.4rem; }
  .ot-studio-title { font-size: 0.85rem; }
  .ot-studio-limit { display: none; }
  .ot-steps { margin-right: 0; }
  .ot-steps li { padding: 0.3rem; }
  .ot-studio-body { display: flex; flex-direction: column; }
  .ot-studio-stage-col { flex: 1; padding: 0.6rem 0.75rem 0.4rem; gap: 0.5rem; }
  .ot-studio-stage { height: 100%; max-height: none; min-height: 0; flex: 1; }
  .ot-studio-tools { flex: 0 0 auto; max-height: 42dvh; border-left: 0; border-top: 1px solid rgb(var(--color-border)); }
  .ot-studio[data-step="select"] .ot-studio-tools { display: none; }
  .ot-studio[data-step="preview"] .ot-studio-tools { display: none; }
  .ot-tool-panel { padding: 0.75rem; }
  .ot-textarea { min-height: 5.25rem; }
  .ot-presets { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ot-preset { aspect-ratio: 3 / 4; padding: 0.4rem; }
  .ot-preset small { display: none; }
  .ot-studio-hint:not(.is-info) { display: none; }
  .ot-studio-foot { gap: 0.35rem; padding-left: 0.6rem; padding-right: 0.6rem; }
}

/* =====================================================================================
   AVATAR EDITOR
   ===================================================================================== */
.ot-avatar-editor { position: fixed; inset: 0; z-index: 75; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgb(0 0 0 / 0.72); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.ot-avatar-editor.hidden { display: none; }
.ot-avatar-panel { width: min(100%, 25rem); display: flex; flex-direction: column; gap: 1rem; padding: 1.25rem; animation: ot-rise var(--ot-motion-base) var(--ot-ease-out); }
.ot-avatar-crop { position: relative; width: min(100%, 18rem); aspect-ratio: 1; margin: 0 auto; border-radius: var(--radius-lg); overflow: hidden; background: #000; touch-action: none; cursor: grab; user-select: none; }
.ot-avatar-crop.is-panning { cursor: grabbing; }
.ot-avatar-crop img { position: absolute; max-width: none; pointer-events: none; -webkit-user-drag: none; }
.ot-avatar-crop::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 999px rgb(0 0 0 / 0.55); pointer-events: none; }
.ot-avatar-crop::before { content: ""; position: absolute; inset: -1px; border-radius: 50%; padding: 2px; background: var(--ot-sig-ring); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; z-index: 2; pointer-events: none; }
.ot-avatar-crop:focus-visible { outline: none; box-shadow: var(--ot-focus); }
.ot-avatar-previews { display: flex; align-items: flex-end; justify-content: center; gap: 0.9rem; }
.ot-avatar-previews > div { border-radius: 50%; overflow: hidden; background: rgb(var(--color-accent-deep) / 0.45); border: 1px solid rgb(var(--color-accent) / 0.3); }
.ot-avatar-previews canvas { width: 100%; height: 100%; display: block; }
.ot-avatar-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; }
.ot-avatar-confirm { display: flex; gap: 0.5rem; margin-left: auto; }

/* viewer: chips stay tappable above the tap-to-advance zones; the footer never swallows them */
.cm-iv-foot { pointer-events: none; }
.cm-iv-foot > * { pointer-events: auto; }
.cm-iv-stage.has-chips .cm-iv-foot { padding-bottom: 3.4rem; }
.cm-iv-stage.has-chips .cm-iv-sound { bottom: 6.4rem; }
.ot-ins-unplayable { position: absolute; inset: 0; margin: auto; height: max-content; z-index: 2; }


/* =====================================================================================
   SYSTEM PROPAGATION (Task 41763) - existing markup joins the Signature without a rewrite
   ===================================================================================== */

/* One atmosphere: the ambient glow is the brand blue on every section, and quieter. */
body {
  background-image:
    radial-gradient(ellipse 900px 600px at 10% -10%, rgba(var(--page-accent), 0.20), transparent 65%),
    radial-gradient(ellipse 800px 650px at 92% 6%, rgba(var(--page-accent), 0.12), transparent 65%),
    radial-gradient(ellipse 700px 550px at 50% 105%, rgba(var(--ot-glow-rgb-default, 59, 130, 246), 0.10), transparent 65%),
    linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px);
}
:root[data-theme="white"] body { background-image: radial-gradient(ellipse 900px 600px at 10% -10%, rgba(var(--page-accent), 0.08), transparent 65%), radial-gradient(ellipse 800px 650px at 92% 6%, rgba(var(--page-accent), 0.05), transparent 65%); }

/* Navigation glyphs: one quiet tone; the active section lights up in the accent, nothing else does. */
.nav-icon-badge { --icon-accent: rgb(var(--ot-brand-silver)); background: rgb(var(--color-text-primary) / 0.05); box-shadow: inset 0 0 0 1px rgb(var(--color-border-accent) / 0.8); color: rgb(var(--color-text-secondary)); }
.nav-icon-badge i, .nav-icon-badge svg { color: inherit; }
.nav-tab:hover .nav-icon-badge, .nav-group-btn:hover .nav-icon-badge { transform: none; box-shadow: inset 0 0 0 1px rgb(var(--color-accent) / 0.45); color: rgb(var(--color-text-primary)); }
.nav-tab.bg-terminal-accent\/10 .nav-icon-badge, .nav-group-btn.nav-group-active .nav-icon-badge { background: rgb(var(--color-accent) / 0.16); box-shadow: inset 0 0 0 1px rgb(var(--color-accent) / 0.6); color: rgb(var(--color-accent)); }
.nav-dropdown-item:hover i, .nav-dropdown-item:hover svg, .nav-dropdown-item.bg-terminal-accent\/10 i, .nav-dropdown-item.bg-terminal-accent\/10 svg { color: rgb(var(--color-accent)); }

/* The solid primary used across the app (bg-terminal-accentDeep + dark text) IS the Signature
   primary: accent fill, white sans label, the same highlight and press feedback as .ot-btn. */
html :is(button, a, label).bg-terminal-accentDeep {
  background-color: rgb(var(--color-accent));
  color: rgb(var(--ot-on-accent));
  font-family: var(--font-sans), sans-serif;
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.2), 0 6px 16px -8px rgb(var(--color-accent) / 0.7);
  transition: background-color var(--ot-motion-fast) var(--ot-ease-out), box-shadow var(--ot-motion-fast) var(--ot-ease-out), transform var(--ot-motion-instant) var(--ot-ease-out), opacity var(--ot-motion-fast) ease;
}
html :is(button, a, label).bg-terminal-accentDeep:hover:not(:disabled) { background-color: rgb(var(--color-accent) / 0.9); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.26), 0 10px 22px -8px rgb(var(--color-accent) / 0.8); }
html :is(button, a, label).bg-terminal-accentDeep:active:not(:disabled) { transform: translateY(1px); }
html :is(button, a, label).bg-terminal-accentDeep:disabled { opacity: 0.5; box-shadow: none; cursor: not-allowed; }
html :is(button, a, label).bg-terminal-accentDeep:focus-visible { outline: none; box-shadow: var(--ot-focus); }
/* Tinted (secondary-accent) actions: same family, quieter. */
html button.bg-terminal-accentDeep\/20 { transition: background-color var(--ot-motion-fast) ease, border-color var(--ot-motion-fast) ease, color var(--ot-motion-fast) ease; }
html button.bg-terminal-accentDeep\/20:hover:not(:disabled) { background-color: rgb(var(--color-accent) / 0.22); }

/* Tiles lift in the brand accent (the old hover was the retired sky-blue). */
.fx-tile:hover { border-color: rgb(var(--color-accent) / 0.5) !important; box-shadow: 0 10px 24px -14px rgb(var(--color-accent) / 0.45); }

/* Premium: solid premium actions read as platinum with dark ink; the plan badge carries the
   signature metal edge so "PLUS"/"PRO" is recognisably OTHARIS, not a generic violet pill. */
html :is(button, a).bg-premium-500 { color: rgb(var(--ot-brand-navy)); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.5); }
html :is(button, a).bg-premium-500:hover { background-color: rgb(var(--color-premium-strong)); }
#userPlanBadge { position: relative; border-color: transparent; background: linear-gradient(rgb(var(--color-surface)), rgb(var(--color-surface))) padding-box, var(--ot-sig-metal) border-box; border-width: 1px; border-style: solid; }

/* Dashboard hero, phones: a status line and its action stack instead of being squeezed side by
   side into three-word fragments - the action keeps its own line, aligned with the text.
   The watchlist card row (#homeHeroCardRow) is excluded: it stays ONE horizontal swipe row on
   phones (MOB-WL-001 - the bare `> div` selector had turned it into a vertical stack). */
@media (max-width: 639px) {
  #dashboardResearchRow, #dashboardProfileRow, #dashboardWatchlistSummary > div:not(#homeHeroCardRow) { flex-direction: column; align-items: flex-start; gap: 0.25rem; }
  #dashboardResearchRow > button, #dashboardProfileRow > button, #dashboardWatchlistSummary > div:not(#homeHeroCardRow) > button, #dashboardWatchlistSummary > div:not(#homeHeroCardRow) > a { padding-left: 1.25rem; }
}

/* One headline voice (Task 41763): section titles across every module use the theme's sans
   (Manrope / Space Grotesk), set as a confident uppercase title. Monospace stays where it carries
   meaning - figures, tickers, table headers, timestamps - instead of also being the voice of
   every heading, which made data modules read like a different product from Community. */
:is(h1, h2, h3).font-mono.uppercase { font-family: var(--font-sans), sans-serif; letter-spacing: 0.06em; font-weight: 800; }
:is(h1, h2, h3).font-mono.uppercase .font-mono { font-family: inherit; }

/* Section-heading glyphs are identity, not data: they take the brand accent in every module
   (they were emerald, amber, rose... per section). Status badges and data colours are untouched. */
.tab-view div:has(> :is(h2, h3)) > svg.lucide, .tab-view :is(h2, h3) > svg.lucide:first-child { color: rgb(var(--color-accent)); }

/* Touch targets (Task 41763): on touch screens, compact data controls (pair chips, table actions,
   sort and timeframe buttons) get an invisible hit area 6px beyond their box - the layout and the
   visual density of the data screens stay exactly as designed. Skipped for controls that are
   themselves positioned, already use a pseudo-element, or contain positioned children. */
/* 2026-10-25 fix: elements placed by left:/top: inline (crypto heatmap tiles, ETF bubbles) keep their absolute
   position - made relative here they stacked below the map and only Bitcoin was visible on phones. */
@media (pointer: coarse) {
  .tab-view :is(button, [role="button"]):not(.absolute):not(.fixed):not(.sticky):not([style*="position"]):not([style*="left:"]):not(.ot-btn):not(.fx-cta):not(.cm-ir-plus):not(.ot-trim-handle):not(.chart-reset-btn):not(.chart-expand-btn):not(.chart-tool-caret):not(.cm-iv-nav):not(.cm-iv-sound):not(.cm-new-pill):not(.cm-chip-sm):not(.cm-link):not(.cal-reminder-checkbox):not(.broker-card):not(:has(.absolute)) { position: relative; }
  .tab-view :is(button, [role="button"]):not(.absolute):not(.fixed):not(.sticky):not([style*="position"]):not([style*="left:"]):not(.ot-btn):not(.fx-cta):not(.cm-ir-plus):not(.ot-trim-handle):not(.chart-reset-btn):not(.chart-expand-btn):not(.chart-tool-caret):not(.cm-iv-nav):not(.cm-iv-sound):not(.cm-new-pill):not(.cm-chip-sm):not(.cm-link):not(.cal-reminder-checkbox):not(.broker-card):not(:has(.absolute))::after { content: ""; position: absolute; inset: -6px; }
}

/* Desktop nav at tablet widths: labels never break onto two lines (long Italian labels did);
   the row tightens and, if it still doesn't fit, scrolls horizontally instead of wrapping. */
.nav-tab, .nav-group-btn { white-space: nowrap; }
@media (min-width: 768px) and (max-width: 1100px) {
  nav .nav-tab, nav .nav-group-btn { padding-left: 0.5rem; padding-right: 0.5rem; }
  nav.md\:block > div { overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
  nav.md\:block > div::-webkit-scrollbar { display: none; }
}

/* Insight Studio: publish summary on the preview step */
.ot-studio-summary { max-width: 30rem; text-align: center; font: 600 0.72rem/1.4 'JetBrains Mono', monospace; letter-spacing: 0.02em; color: rgb(var(--color-text-secondary)); }
.ot-studio-summary.hidden { display: none; }
.ot-trim-head .ot-btn-icon { margin-left: -0.4rem; }
/* Studio tool rail, desktop/tablet: an even grid that wraps (7 video tools in Italian no longer
   truncate or hide behind a scroll); phones keep the horizontal thumb rail. */
@media (min-width: 768px) {
  .ot-tool-rail { display: grid; grid-template-columns: repeat(auto-fill, minmax(4.4rem, 1fr)); overflow: visible; }
  .ot-tool { min-width: 0; }
}

/* Insight viewer: the sound toggle lives in the header with Report/Close (it used to float
   bottom-right, on top of bottom captions); top captions clear the header on phones. */
.cm-iv-head .cm-iv-sound { position: static; }
.cm-iv-stage.has-chips .cm-iv-sound { bottom: auto; }
.cm-iv-body .ot-ins-caption.is-top { top: max(17cqw, 5.5rem); }