/* "Instrument" visual system — shared by the /marketer pages and the root "/"
   tool picker (home.html).

   Loaded AFTER style.css and scoped to <html data-design="instrument">, so the
   trading app's own pages (which share style.css) are untouched. It works
   mostly by re-pointing style.css's existing design tokens, so every class
   the pages already use (field-block, cta-button, fact-grid, ...) picks up
   the new look without markup or JS changes; the rules below it only add
   what tokens can't express (fonts, grid background, terminal-window chrome,
   header/hero).

   Dark is the default on these pages (see MirrorNav's default-theme handling);
   an explicit data-theme="light" switches to the light set. The :root
   selector is repeated in each block purely to out-specify style.css's own
   `:root[data-theme="dark"]` / prefers-color-scheme blocks. */

html[data-design="instrument"]:root {
  --bg: #0E1210;
  --card: rgba(255, 255, 255, 0.025);
  --card-border: rgba(255, 255, 255, 0.14);
  --card-border-hover: rgba(45, 212, 166, 0.5);

  --teal: #2DD4A6;
  --teal-dark: #2DD4A6;              /* text/border role — same as fill on dark */
  --teal-tint: rgba(45, 212, 166, 0.10);
  --teal-tint-hover: rgba(45, 212, 166, 0.18);
  --teal-glow: transparent;          /* no glows except the one hero ellipse */
  --purple: #A996FF;
  --purple-tint: rgba(169, 150, 255, 0.12);

  --coral: #FF9A7A;
  --coral-bg: rgba(255, 138, 107, 0.10);
  --coral-bg-hover: rgba(255, 138, 107, 0.16);
  --coral-strong: #B8451F;
  --coral-strong-hover: #D65530;
  --success: #2DD4A6;
  --success-bg: rgba(45, 212, 166, 0.10);
  --warning: #F5B44E;
  --warning-bg: rgba(245, 180, 78, 0.10);
  --warning-strong: #F5B44E;

  --text-primary: #F1F5F2;
  --text-secondary: #A6AFA9;
  /* Spec'd #6E7A72 measured ~4.2:1 on the page bg — nudged a shade lighter so
     small mono labels stay readable (the brief allowed exactly this). */
  --text-muted: #7C887F;
  --text-on-accent: #04241B;         /* dark ink on the bright teal button */

  --overlay-scrim: rgba(0, 0, 0, 0.6);
  --ring-track: rgba(255, 255, 255, 0.14);
  --shadow-card: none;

  --mm-grid: rgba(45, 212, 166, 0.05);
  --mm-glow: rgba(45, 212, 166, 0.16);
  --mm-blur: 8px;
  --mm-bar-bg: rgba(255, 255, 255, 0.03);
  --mm-input-bg: rgba(255, 255, 255, 0.03);
  --mm-menu-bg: #141A17;
  --mm-dot-opacity: 0.85;
  --mm-shadow: none;
  color-scheme: dark;
}

html[data-design="instrument"][data-theme="light"]:root {
  --bg: #FAF8F1;
  --card: rgba(255, 255, 255, 0.65);
  --card-border: rgba(29, 35, 31, 0.12);
  --card-border-hover: rgba(21, 138, 99, 0.5);

  --teal: #158A63;
  --teal-dark: #158A63;
  --teal-tint: rgba(21, 138, 99, 0.09);
  --teal-tint-hover: rgba(21, 138, 99, 0.16);
  --teal-glow: transparent;
  --purple: #7C64D6;
  --purple-tint: rgba(124, 100, 214, 0.10);

  --coral: #A8401F;
  --coral-bg: rgba(168, 64, 31, 0.08);
  --coral-bg-hover: rgba(168, 64, 31, 0.14);
  --coral-strong: #A8401F;
  --coral-strong-hover: #8A3318;
  --success: #158A63;
  --success-bg: rgba(21, 138, 99, 0.09);
  --warning: #8A5A0B;
  --warning-bg: rgba(200, 140, 20, 0.12);
  --warning-strong: #8A5A0B;

  --text-primary: #1D231F;
  --text-secondary: #565F58;
  /* Spec'd #93988F measured 2.77:1 on #FAF8F1 (fails WCAG AA). #6B7168 is 4.72:1
     on the page bg and 4.88-4.97:1 on the card/input/title-bar surfaces. */
  --text-muted: #6B7168;
  --text-on-accent: #FFFFFF;

  --overlay-scrim: rgba(29, 35, 31, 0.4);
  --ring-track: rgba(29, 35, 31, 0.12);
  --shadow-card: 0 2px 10px rgba(30, 40, 35, 0.05);

  --mm-grid: rgba(21, 138, 99, 0.06);
  --mm-glow: rgba(21, 138, 99, 0.10);
  --mm-blur: 6px;
  --mm-bar-bg: rgba(255, 255, 255, 0.5);
  --mm-input-bg: rgba(255, 255, 255, 0.8);
  --mm-menu-bg: #FFFFFF;
  --mm-dot-opacity: 0.9;
  --mm-shadow: 0 2px 10px rgba(30, 40, 35, 0.05);
  color-scheme: light;
}

html[data-design="instrument"] {
  --mm-serif: "Newsreader", Georgia, serif;
  --mm-mono: "Space Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --mm-sans: "Manrope", system-ui, sans-serif;
}

/* ---------- Page canvas: grid + the one hero glow ---------- */
html[data-design="instrument"] body {
  font-family: var(--mm-sans);
  background-color: var(--bg);
  background-image:
    linear-gradient(var(--mm-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--mm-grid) 1px, transparent 1px);
  background-size: 28px 28px;
  position: relative;
  overflow-x: hidden;
}

/* The single glow: one soft teal ellipse above the hero, nowhere else. */
html[data-design="instrument"] body::before {
  content: "";
  position: absolute;
  top: -140px;
  left: 50%;
  width: min(900px, 100vw);
  height: 460px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, var(--mm-glow), transparent 68%);
  pointer-events: none;
  z-index: 0;
}

html[data-design="instrument"] .app {
  position: relative;
  z-index: 1;
  max-width: 760px;
}

html[data-design="instrument"] .content { padding: 8px 20px 28px; gap: 20px; }

/* ---------- Header ---------- */
.mm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px 6px;
}
.mm-header-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mm-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-primary);
  text-decoration: none;
  min-width: 0;
}
.mm-logo {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--teal-tint);
  border: 1px solid rgba(45, 212, 166, 0.3);
  color: var(--teal);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
html[data-design="instrument"][data-theme="light"] .mm-logo { border-color: rgba(21, 138, 99, 0.3); }
.mm-logo svg { width: 20px; height: 20px; }
.mm-brand-name {
  font-family: var(--mm-serif);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

html[data-design="instrument"] .topbar-actions { display: flex; align-items: center; gap: 8px; }
html[data-design="instrument"] .icon-button {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: transparent;
  border: 1px solid var(--card-border);
  color: var(--text-secondary);
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
html[data-design="instrument"] .icon-button:hover {
  background: var(--teal-tint);
  border-color: var(--card-border-hover);
  color: var(--teal);
}
html[data-design="instrument"] :focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

/* .card.nav-switcher-menu: the menu is also a .card, and the later translucent
   `.card` rule would otherwise win — a see-through dropdown over page content. */
html[data-design="instrument"] .card.nav-switcher-menu {
  background: var(--mm-menu-bg);
  backdrop-filter: none;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
}
html[data-design="instrument"] .nav-switcher-link { font-family: var(--mm-sans); font-weight: 600; }

/* ---------- Hero ---------- */
.mm-hero { padding: 28px 0 4px; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.mm-hero--compact { padding-top: 14px; gap: 12px; }

.mm-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border: 1px solid rgba(45, 212, 166, 0.45);
  border-radius: 999px;
  background: var(--teal-tint);
  color: var(--teal);
  font-family: var(--mm-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
html[data-design="instrument"][data-theme="light"] .mm-badge { border-color: rgba(21, 138, 99, 0.4); }
.mm-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.mm-badge--purple {
  color: var(--purple);
  border-color: rgba(169, 150, 255, 0.45);
  background: var(--purple-tint);
}
html[data-design="instrument"][data-theme="light"] .mm-badge--purple { border-color: rgba(124, 100, 214, 0.4); }

.mm-h1 {
  font-family: var(--mm-serif);
  font-weight: 500;
  font-size: clamp(36px, 9.5vw, 54px);
  line-height: 1.04;
  letter-spacing: -0.025em;
  margin: 0;
  color: var(--text-primary);
}
.mm-hero--compact .mm-h1 { font-size: clamp(30px, 7.5vw, 40px); }
.mm-hero-sub {
  margin: 0;
  max-width: 52ch;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* ---------- Tool catalog strip ---------- */
.mm-catalog { display: flex; flex-wrap: wrap; gap: 8px; }
.mm-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 11px;
  border-radius: 8px;
  border: 1px solid rgba(45, 212, 166, 0.4);
  background: var(--teal-tint);
  color: var(--text-primary);
  font-family: var(--mm-mono);
  font-size: 12px;
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}
html[data-design="instrument"][data-theme="light"] .mm-chip { border-color: rgba(21, 138, 99, 0.4); }
a.mm-chip:hover { border-color: var(--teal); background: var(--teal-tint-hover); }
.mm-chip-idx { color: var(--teal); }
.mm-chip--pending {
  border-style: dashed;
  border-color: var(--card-border);
  background: transparent;
  color: var(--text-muted);
}

/* ---------- Terminal-window card / panel ---------- */
html[data-design="instrument"] .card,
.term {
  background: var(--card);
  -webkit-backdrop-filter: blur(var(--mm-blur));
  backdrop-filter: blur(var(--mm-blur));
  border: 1px solid var(--card-border);
  border-radius: 12px;
  box-shadow: var(--mm-shadow);
}
.term { overflow: hidden; }
.term-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  background: var(--mm-bar-bg);
  border-bottom: 1px solid var(--card-border);
}
.term-dot { width: 9px; height: 9px; border-radius: 50%; opacity: var(--mm-dot-opacity); flex-shrink: 0; }
.term-dot:nth-child(1) { background: #FF5F57; }
.term-dot:nth-child(2) { background: #FEBC2E; }
.term-dot:nth-child(3) { background: var(--teal); }
.term-file {
  margin-left: 8px;
  font-family: var(--mm-mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--text-muted);
}
.term-body { padding: 18px; }
/* style.css spaced these via .content's flex gap; inside a panel they need it explicitly. */
.term-body .field-grid { margin-bottom: 18px; }

/* Lane / tool cards (links) */
a.term-card {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: transform 0.18s ease, border-color 0.18s ease;
}
a.term-card:hover,
a.term-card:focus-visible { transform: translateY(-3px); border-color: var(--card-border-hover); }
.term-card .term-body { display: flex; align-items: flex-start; gap: 14px; padding: 18px; }
.term-card-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--teal-tint);
  border: 1px solid rgba(45, 212, 166, 0.3);
  color: var(--teal);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
html[data-design="instrument"][data-theme="light"] .term-card-icon { border-color: rgba(21, 138, 99, 0.3); }
.term-card-icon.purple { background: var(--purple-tint); border-color: rgba(169, 150, 255, 0.3); color: var(--purple); }
html[data-design="instrument"][data-theme="light"] .term-card-icon.purple { border-color: rgba(124, 100, 214, 0.3); }
.term-card-icon svg { width: 22px; height: 22px; }
.term-card-main { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 0; }
.term-card-title {
  font-family: var(--mm-serif);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  line-height: 1.15;
}
.term-card-desc { font-size: 14px; line-height: 1.55; color: var(--text-secondary); }
.term-card-meta {
  font-family: var(--mm-mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  margin-top: 4px;
}
.term-card-chevron { color: var(--text-muted); align-self: center; flex-shrink: 0; transition: color 0.18s ease, transform 0.18s ease; }
.term-card-chevron svg { width: 18px; height: 18px; display: block; }
a.term-card:hover .term-card-chevron { color: var(--teal); transform: translateX(2px); }
.term-card--purple:hover { border-color: rgba(169, 150, 255, 0.55); }
.term-card--purple:hover .term-card-chevron { color: var(--purple); }

.mm-lanes, .mm-tools { display: flex; flex-direction: column; gap: 16px; }

html[data-design="instrument"] .section-label {
  font-family: var(--mm-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
html[data-design="instrument"] .section-label::before { content: "// "; color: var(--teal); }
html[data-design="instrument"] .term-card-section { margin-top: 4px; }

/* ---------- Tool pages: form panel + results ---------- */
html[data-design="instrument"] .page-lede {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0 0 6px;
}
html[data-design="instrument"] .field-label {
  font-family: var(--mm-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
html[data-design="instrument"] .text-input {
  border: 1px solid var(--card-border);
  border-radius: 10px;
  background: var(--mm-input-bg);
  color: var(--text-primary);
  font-family: var(--mm-sans);
}
html[data-design="instrument"] .text-input::placeholder { color: var(--text-muted); opacity: 1; }
html[data-design="instrument"] .text-input:focus { border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-tint); }

html[data-design="instrument"] .cta-button {
  border-radius: 10px;
  font-family: var(--mm-sans);
  font-weight: 800;
  box-shadow: none;
}
html[data-design="instrument"] .cta-button:hover { background: var(--teal); filter: brightness(1.1); }

html[data-design="instrument"] .segment-btn,
html[data-design="instrument"] .chip {
  border-radius: 10px;
  border: 1px solid var(--card-border);
  background: var(--mm-input-bg);
  color: var(--text-secondary);
  font-family: var(--mm-sans);
  font-weight: 700;
}
html[data-design="instrument"] .chip.chip-static { font-weight: 600; cursor: default; }
/* style.css gives .chip flex-shrink: 0 (right for short filter pills), so a long
   competitor/category entry sat on one line and was clipped by the results
   panel. Static chips hold sentences and category paths: let them shrink and wrap. */
html[data-design="instrument"] .chip.chip-static {
  flex-shrink: 1;
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: left;
  line-height: 1.45;
  border-radius: 10px;
}
html[data-design="instrument"] .segment-btn:hover,
html[data-design="instrument"] .chip:hover { border-color: var(--card-border-hover); }
html[data-design="instrument"] .segment-btn.active,
html[data-design="instrument"] .chip.active {
  background: var(--teal-tint);
  border-color: var(--teal);
  color: var(--teal);
}

html[data-design="instrument"] .error-banner,
html[data-design="instrument"] .warning-banner {
  border-radius: 10px;
  border: 1px solid currentColor;
  font-family: var(--mm-sans);
}
html[data-design="instrument"] .error-banner { border-color: rgba(255, 138, 107, 0.35); }
html[data-design="instrument"] .warning-banner { border-color: rgba(245, 180, 78, 0.35); }

html[data-design="instrument"] .file-drop {
  display: block;  /* it's a <label>; no longer a flex child of .content, so it must be blockified */
  margin-bottom: 14px;
  border: 1.5px dashed var(--card-border);
  background: var(--mm-input-bg);
  border-radius: 10px;
}
html[data-design="instrument"] .file-drop:hover { border-color: var(--teal); }

html[data-design="instrument"] .spinner { border-color: var(--teal-tint); border-top-color: var(--teal); }
html[data-design="instrument"] .loading-state { padding: 48px 24px; }
html[data-design="instrument"] .loading-title { font-family: var(--mm-mono); font-size: 12px; font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-secondary); }

/* Results panels: the existing result containers (#resultCard, #resultsWrap)
   themselves become terminal windows — a .term-bar is their first child. */
html[data-design="instrument"] .fact-grid.term {
  padding: 0 0 18px;
  gap: 16px 12px;
}
.fact-grid.term > .term-bar { grid-column: 1 / -1; }
.fact-grid.term > .fact-item { padding: 0 18px; }
html[data-design="instrument"] .fact-label {
  font-family: var(--mm-mono);
  font-weight: 400;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}
html[data-design="instrument"] .fact-value {
  font-family: var(--mm-serif);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

html[data-design="instrument"] .results-stack.term { padding: 0 0 18px; gap: 20px; }
.results-stack.term > :not(.term-bar) { margin-inline: 18px; }

html[data-design="instrument"] .idea-card {
  border-radius: 10px;
  border: 1px solid var(--card-border);
  background: var(--mm-input-bg);
}
html[data-design="instrument"] .idea-card-number {
  border-radius: 8px;
  font-family: var(--mm-mono);
  font-weight: 700;
  background: var(--teal-tint);
  color: var(--teal);
}
html[data-design="instrument"] .idea-card-title { font-weight: 700; }
html[data-design="instrument"] .idea-card-rationale { color: var(--text-secondary); }

html[data-design="instrument"] .ads-table-wrap { border: none; border-radius: 0; }
html[data-design="instrument"] .ads-table th { font-family: var(--mm-mono); font-weight: 400; letter-spacing: 0.06em; }
html[data-design="instrument"] .ads-table td { color: var(--text-primary); }
/* style.css's `.ads-table td { white-space: nowrap }` out-specifies .ads-row-name's
   own `white-space: normal`, so long campaign names never wrapped and stretched
   the table. Let the name cell wrap within a bounded width. */
html[data-design="instrument"] .ads-table td.ads-row-name { white-space: normal; min-width: 170px; max-width: 240px; overflow-wrap: anywhere; }

/* Root picker (home.html) keeps style.css's `.tool-card`/`.tool-card-badge`
   class names on its cards because its recency script (badge + reorder) queries
   them. Neutralise the old card box (padding/flex) so the terminal chrome owns
   the layout, and restyle the "Continue where you left off" badge. */
html[data-design="instrument"] a.term-card.tool-card { padding: 0; gap: 0; display: block; }
html[data-design="instrument"] .tool-card-badge {
  align-self: flex-start;
  margin: 0 0 4px;
  padding: 3px 9px;
  border: 1px solid rgba(45, 212, 166, 0.45);
  border-radius: 999px;
  background: var(--teal-tint);
  color: var(--teal);
  font-family: var(--mm-mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
html[data-design="instrument"][data-theme="light"] .tool-card-badge { border-color: rgba(21, 138, 99, 0.4); }

/* ---------- Footer ---------- */
.mm-footer {
  padding: 8px 20px 28px;
  text-align: center;
  font-family: var(--mm-mono);
  font-size: 12px;
  color: var(--text-muted);
}

@media (max-width: 480px) {
  .mm-header { padding: 14px 16px 4px; }
  html[data-design="instrument"] .content { padding: 8px 16px 24px; }
  .mm-brand-name { font-size: 18px; }
  .term-card .term-body { padding: 16px; }
  .term-card-title { font-size: 20px; }
  .term-body { padding: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  a.term-card, .term-card-chevron { transition: none; }
  a.term-card:hover { transform: none; }
}

/* =====================================================================
   Trading Mirror dashboard (index.html's home view) — scoped by
   data-surface="trading" where it needs to differ from the marketer pages.
   index.html is one single-page app; app.js's showView() only leaves
   data-design="instrument" on for the dashboard, so none of this reaches the
   log / detail / strategy / manage views.

   Reskin only. Semantics deliberately kept: teal = identity + primary CTA,
   purple = XP/level, coral = off-plan, amber = rule(s) failed.
   ===================================================================== */

/* The marketer palette mutes coral/amber into 10%-alpha tints. On the trade
   list a user has to spot a coral off-plan row instantly, so restore the
   original full-strength coral and amber surfaces. */
html[data-design="instrument"][data-surface="trading"]:root {
  --coral: #FF9269;
  --coral-bg: #3D2317;
  --coral-bg-hover: #4F2C1D;
  --warning: #F5B44E;
  --warning-bg: #3B2C10;
}
html[data-design="instrument"][data-surface="trading"][data-theme="light"]:root {
  --coral: #993C1D;
  --coral-bg: #FAECE7;
  --coral-bg-hover: #F5DCD1;
  --warning: #854F0B;
  --warning-bg: #FBF0DD;
}

/* Dashboard keeps its original phone-first column width. */
html[data-design="instrument"][data-surface="trading"] .app { max-width: 560px; }

/* Header: the logo mark replaces the old dot; every control stays. */
html[data-design="instrument"] .topbar { padding: 18px 20px 8px; gap: 12px; }
html[data-design="instrument"] .brand { gap: 10px; }
html[data-design="instrument"] .brand-name {
  font-family: var(--mm-serif);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.01em;
}
html[data-design="instrument"] .avatar { border: 1px solid var(--card-border); }

/* ---- Ring / XP panel ---- */
html[data-design="instrument"] .hero.term { padding: 0 0 22px; gap: 18px; }
.hero.term > .term-bar { align-self: stretch; }
.hero.term > .ring-wrap { margin-top: 6px; }
.hero.term > .hero-meta { margin-inline: 20px; }
.hero.term > .xp-bar-wrap { width: calc(100% - 40px); }

html[data-design="instrument"] .ring-track { stroke: var(--ring-track); }
html[data-design="instrument"] .ring-progress { stroke: var(--teal); }  /* teal stays the identity colour */
html[data-design="instrument"] .ring-value {
  font-family: var(--mm-serif);
  font-weight: 500;
  font-size: 50px;
  letter-spacing: -0.02em;
}
html[data-design="instrument"] .ring-label {
  font-family: var(--mm-mono);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.1em;
}
html[data-design="instrument"] .level-badge {           /* purple stays XP/level */
  font-family: var(--mm-mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.02em;
}
html[data-design="instrument"] .xp-caption { font-family: var(--mm-mono); font-size: 11px; }

/* ---- Stats row: one terminal window holding both stat cards ---- */
html[data-design="instrument"] .stats-row.term { gap: 0; }
.stats-row.term > .term-bar { grid-column: 1 / -1; }
html[data-design="instrument"] .stats-row.term .stat-card {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  padding: 16px 18px;
}
.stats-row.term .stat-card + .stat-card { border-left: 1px solid var(--card-border); }
html[data-design="instrument"] .stat-label {
  font-family: var(--mm-mono);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
html[data-design="instrument"] .stat-value {
  font-family: var(--mm-serif);
  font-weight: 500;
  font-size: 20px;   /* same size as before the reskin: "+$1305 · +5.4R" has to fit a half-width cell at 390px */
  letter-spacing: -0.01em;
}

/* ---- Filter chips ---- */
html[data-design="instrument"] .chip-manage-btn { border-radius: 10px; }

/* ---- Trade list panel ---- */
.trade-panel-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 10px; }
html[data-design="instrument"] .trade-panel .trade-row {
  background: var(--mm-input-bg);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
html[data-design="instrument"] .trade-panel .trade-row:hover { border-color: var(--card-border-hover); }
html[data-design="instrument"] .trade-panel .trade-row.selected { box-shadow: inset 0 0 0 2px var(--teal); }
html[data-design="instrument"] .trade-panel .empty-state {
  background: transparent;
  border: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html[data-design="instrument"] .trade-icon { border-radius: 10px; }
html[data-design="instrument"] .trade-r-primary { font-family: var(--mm-mono); font-weight: 700; }
html[data-design="instrument"] .trade-r-usd { font-family: var(--mm-mono); }

/* The confirm modal shares .card; it must be opaque, not a see-through panel. */
html[data-design="instrument"] .modal-card {
  background: var(--mm-menu-bg);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* =====================================================================
   Trading Mirror: Log Trade, trade detail, Manage Strategies.
   (app.js's showView() enables the design for exactly these views plus the
   dashboard; the Clerk sign-in and strategy create/edit/detail screens keep
   style.css's original look.) Reskin only: no field, control or copy moves.
   ===================================================================== */

/* Header: same square bordered icon language as the dashboard. The delete
   button must stay coral — the generic .icon-button rule above would
   otherwise wash it out. */
html[data-design="instrument"] .topbar-title {
  font-family: var(--mm-serif);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -0.01em;
}
html[data-design="instrument"] .icon-button.icon-button-danger {
  background: var(--coral-bg);
  color: var(--coral);
  border-color: rgba(255, 146, 105, 0.4);
}
html[data-design="instrument"][data-theme="light"] .icon-button.icon-button-danger { border-color: rgba(153, 60, 29, 0.35); }
html[data-design="instrument"] .icon-button.icon-button-danger:hover { background: var(--coral-bg-hover); }

/* Panels whose children are direct (no .term-body): inset them like the
   results panels, and keep the bar full-bleed. */
.log-form.term, .result-state.term, .detail-edit-section.term, .detail-summary.term { padding-bottom: 18px; }
.log-form.term > :not(.term-bar),
.result-state.term > :not(.term-bar),
.detail-edit-section.term > :not(.term-bar),
.detail-summary.term > :not(.term-bar) { margin-inline: 18px; }
.log-form.term > .term-bar + *,
.detail-edit-section.term > .term-bar + * { margin-top: 18px; }
.result-state.term, .detail-summary.term { display: flex; flex-direction: column; gap: 16px; }
.result-state.term > .term-bar, .detail-summary.term > .term-bar { margin-bottom: 2px; }

/* ---- Log Trade ---- */
html[data-design="instrument"] .dropzone {
  border: 1.5px dashed var(--card-border);
  border-radius: 12px;
  background: var(--mm-input-bg);
}
html[data-design="instrument"] .dropzone:hover { border-color: var(--card-border-hover); }
html[data-design="instrument"] .dropzone.dragging { border-color: var(--teal); background: var(--teal-tint); }
html[data-design="instrument"] .dropzone-icon { border: 1px solid rgba(45, 212, 166, 0.3); }
html[data-design="instrument"][data-theme="light"] .dropzone-icon { border-color: rgba(21, 138, 99, 0.3); }
html[data-design="instrument"] .dropzone-hint { font-family: var(--mm-mono); font-size: 11px; }
html[data-design="instrument"] .screenshot-add-tile { border-radius: 10px; border: 1.5px dashed var(--card-border); }

html[data-design="instrument"] .strategy-option {
  border: 1px solid var(--card-border);
  border-radius: 10px;
  background: var(--mm-input-bg);
}
html[data-design="instrument"] .strategy-option:hover { border-color: var(--card-border-hover); }
html[data-design="instrument"] .strategy-option.active { border-color: var(--teal); background: var(--teal-tint); }
html[data-design="instrument"] .strategy-option.offplan-option.active { border-color: var(--coral); background: var(--coral-bg); }
html[data-design="instrument"] .strategy-option-hint { font-family: var(--mm-mono); font-size: 11px; }
html[data-design="instrument"] .strategy-edit-btn {
  border: 1px solid var(--card-border);
  background: transparent;
  border-radius: 10px;
}
html[data-design="instrument"] .strategy-edit-btn:hover { background: var(--teal-tint); border-color: var(--card-border-hover); }
html[data-design="instrument"] .strategy-add-btn,
html[data-design="instrument"] .add-rule-btn {
  border: 1.5px dashed var(--card-border);
  border-radius: 10px;
  background: transparent;
}
html[data-design="instrument"] .strategy-add-btn:hover { border-color: var(--teal); background: var(--teal-tint); }

/* ---- Verdict / detail read-outs ---- */
html[data-design="instrument"] .result-title { font-family: var(--mm-serif); font-weight: 600; font-size: 22px; letter-spacing: -0.01em; }
html[data-design="instrument"] .result-sub { font-family: var(--mm-mono); font-size: 11px; }
html[data-design="instrument"] .result-r { font-family: var(--mm-serif); font-weight: 500; font-size: 36px; }
html[data-design="instrument"] .result-usd { font-family: var(--mm-mono); }
html[data-design="instrument"] .xp-earned-badge { font-family: var(--mm-mono); font-weight: 700; font-size: 12px; }
html[data-design="instrument"] .coach-note-label {
  font-family: var(--mm-mono);
  font-weight: 400;
  letter-spacing: 0.08em;
}
html[data-design="instrument"] .rule-tile { border-radius: 10px; }
html[data-design="instrument"] .offplan-origin-tag,
html[data-design="instrument"] .direction-badge { font-family: var(--mm-mono); font-weight: 400; background: transparent; }
html[data-design="instrument"] .offplan-banner { border: 1px solid rgba(255, 146, 105, 0.4); border-radius: 10px; }
html[data-design="instrument"][data-theme="light"] .offplan-banner { border-color: rgba(153, 60, 29, 0.3); }
html[data-design="instrument"] .fact-grid { border-radius: 10px; }
html[data-design="instrument"] .readonly-value { background: var(--mm-input-bg); border: 1px solid var(--card-border); border-radius: 10px; font-family: var(--mm-mono); }
html[data-design="instrument"] .save-confirm { font-family: var(--mm-mono); }
html[data-design="instrument"] .secondary-button { border-radius: 10px; font-family: var(--mm-sans); border: 1px solid var(--card-border); background: transparent; }
html[data-design="instrument"] .secondary-button:hover { border-color: var(--card-border-hover); }

/* The select's chevron: the generic .text-input background shorthand above
   would wipe it, and the original one is a fixed dark grey. */
html[data-design="instrument"] select.text-input {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A6AFA9' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  padding-right: 36px;
}
html[data-design="instrument"][data-theme="light"] select.text-input {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23565F58' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
}
html[data-design="instrument"] select.text-input option { background: var(--mm-menu-bg); color: var(--text-primary); }

/* ---- Manage Strategies ---- */
.manage-panel-body { padding: 12px 12px 14px; display: flex; flex-direction: column; gap: 12px; }
.manage-panel-body > .section-hint { margin: 0; }
.manage-panel-body > .error-banner { margin-bottom: 0; }
html[data-design="instrument"] .manage-panel .manage-row {
  background: var(--mm-input-bg);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html[data-design="instrument"] .manage-panel .empty-state {
  background: transparent; border: 0; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
html[data-design="instrument"] .manage-row-hint { font-family: var(--mm-mono); font-size: 11px; }
/* The name (plus its EXAMPLE tag) wraps instead of ellipsis-clipping: inside the
   panel there is less horizontal room, and the tag must never be cut off. */
html[data-design="instrument"] .manage-row-name { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
/* Deactivated rows keep the 0.55 fade from style.css; the switch itself must
   also read as plainly "off" — a clearly visible neutral track, knob left. */
html[data-design="instrument"] .toggle-switch { background: rgba(255, 255, 255, 0.22); border: 1px solid var(--card-border); }
html[data-design="instrument"][data-theme="light"] .toggle-switch { background: rgba(29, 35, 31, 0.22); }
html[data-design="instrument"] .toggle-switch.on { background: var(--teal); border-color: var(--teal); }
html[data-design="instrument"] .toggle-knob { top: 2px; left: 2px; }
html[data-design="instrument"] .toggle-switch.on .toggle-knob { left: 20px; }
html[data-design="instrument"] .example-badge,
html[data-design="instrument"] .example-badge-inline { font-family: var(--mm-mono); }

/* --text-on-accent is dark ink in the Instrument dark theme (right for the
   bright teal/purple fills). These sit on dark or saturated-dark surfaces
   (photo scrim, success/warning-strong, coral-strong), where the original
   white is what stays legible. */
html[data-design="instrument"] .screenshot-thumb-remove,
html[data-design="instrument"] .rule-tile-icon,
html[data-design="instrument"] .danger-button { color: #FFFFFF; }

/* On the dark theme the fail icon sits on bright amber, where white is weak. */
html[data-design="instrument"] .rule-tile.fail .rule-tile-icon { color: #2A1E08; }
html[data-design="instrument"][data-theme="light"] .rule-tile.fail .rule-tile-icon { color: #FFFFFF; }

/* =====================================================================
   Strategy create/edit and strategy-detail screens (the last views to get
   the Instrument look; only the Clerk sign-in keeps the old styling).
   Reskin only: rule editing, field behaviour and the save flow are untouched.
   ===================================================================== */
.strategy-form.term, .strategy-detail-panel.term { padding-bottom: 18px; }
.strategy-form.term > :not(.term-bar),
.strategy-detail-panel.term > :not(.term-bar) { margin-inline: 18px; }
.strategy-form.term > .term-bar + * { margin-top: 18px; }
.strategy-detail-panel.term { display: flex; flex-direction: column; gap: 16px; }
.strategy-detail-panel.term > .term-bar { margin-bottom: 2px; }

html[data-design="instrument"] .rule-examples {
  border: 1px solid rgba(45, 212, 166, 0.3);
  border-radius: 10px;
  font-family: var(--mm-mono);
  font-size: 11px;
}
html[data-design="instrument"][data-theme="light"] .rule-examples { border-color: rgba(21, 138, 99, 0.3); }
html[data-design="instrument"] .rule-remove-btn {
  border: 1px solid rgba(255, 146, 105, 0.4);
  border-radius: 10px;
}
html[data-design="instrument"][data-theme="light"] .rule-remove-btn { border-color: rgba(153, 60, 29, 0.3); }
html[data-design="instrument"] .strategy-detail-name {
  font-family: var(--mm-serif);
  font-weight: 600;
  font-size: 26px;
  letter-spacing: -0.01em;
  margin: 0;
}
html[data-design="instrument"] .danger-link { font-family: var(--mm-sans); }

/* Full-width controls (width: 100% buttons/links) plus the 18px side inset would
   overflow the panel and be clipped by its rounded edge; cap every inset child. */
.log-form.term > :not(.term-bar),
.result-state.term > :not(.term-bar),
.detail-edit-section.term > :not(.term-bar),
.detail-summary.term > :not(.term-bar),
.strategy-form.term > :not(.term-bar),
.strategy-detail-panel.term > :not(.term-bar) { max-width: calc(100% - 36px); }

/* The detail form was spaced by the old layout's flex gap; inside the panel the grid needs its own bottom space. */
.detail-edit-section.term > .field-grid { margin-bottom: 18px; }
.detail-edit-section.term > .error-banner { margin-bottom: 14px; }

/* Inline links inside hint text (e.g. the Ads Analyser's "Download a sample CSV") use the
   accent, not the browser's default blue; the guidance needs room above the button. */
html[data-design="instrument"] .section-hint a { color: var(--teal); font-weight: 600; }
html[data-design="instrument"] .section-hint a:hover { text-decoration: none; }
.term-body > #csvGuidance { margin: 2px 0 16px; line-height: 1.55; }

/* Keyword Research "Likely competitors": real-book cards (linked title) above any pattern fallbacks. */
.comp-books, .comp-patterns { flex: 1 1 100%; }
.comp-patterns { margin-top: 2px; }
html[data-design="instrument"] .idea-card-title a { color: inherit; text-decoration: none; }
html[data-design="instrument"] .idea-card-title a:hover { color: var(--teal); text-decoration: underline; }