/* ============================================================
   MALLA — base.css
   ------------------------------------------------------------
   CSS variables, .lg liquid-glass system, .orb animations,
   topbar, sidebar, hero, leaderboard. Copied verbatim from the
   mockup HTMLs (MALLA.html / MALLA - Iberia.html / MALLA
   Mercado.html / MALLA-print.html) per BINDINGS §5.
   No Tailwind, no UI kit. Plain CSS.
   ============================================================ */

:root{
  --bg:#05070a;
  --bg-2:#0a0d12;
  --ink:#ecebe6;
  --ink-dim:#9a9a92;
  --ink-mute:#84847c; /* tertiary copy on dark glass (was #54544c — illegible) */
  --ink-label:#b2b2aa; /* uppercase .k labels on metric/tier cards */
  --rule:rgba(255,255,255,.07);
  --rule-2:rgba(255,255,255,.12);
  --accent:#ff5c1a;
  --accent-rgb:255,92,26;
  --accent-ink:#0a0a0a;
  --accent-soft:#ffb38a;   /* light tint used as gradient tail on accent bars */
  --pos:#3ddc9a;
  --neg:#ff5470;
  --warn:#d6b864;          /* semantic caution/amber — single source, no more drift */
  --warn-rgb:214,184,100;

  --font-sans:'Space Grotesk', ui-sans-serif, system-ui;
  --font-mono:'JetBrains Mono', ui-monospace, monospace;
  --font-serif:'Instrument Serif', serif;
  --font-brand:'Fraunces', 'Instrument Serif', serif;
  --font-display: var(--font-serif);
  --font-body: var(--font-sans);   /* alias — several templates reference it */

  --glass-blur:40px;
}

/* Panel label keys — shared across metrics, tiers, hero stats, auth meta */
.k{color:var(--ink-label)}

/* Mercado mode swaps the orange ember palette for cobalt-light blue.
   Also swaps the dominant warm radial-gradient + orb.a so the whole
   ambient backdrop reads cool — keeps the purple + teal accents from
   Iberia for visual continuity. */
body[data-mode="mercado"]{
  --accent:#3a8fd1;
  --accent-rgb:58,143,209;
  --accent-ink:#ffffff;
  --accent-soft:#86c1e8;
  --accent-soft:#86c1e8;
  background:
    radial-gradient(1100px 700px at 82% -10%, rgba(58,143,209,.22), transparent 60%),
    radial-gradient(900px 600px at 10% 110%, rgba(90,60,220,.18), transparent 60%),
    radial-gradient(600px 400px at 50% 50%, rgba(20,180,160,.06), transparent 70%),
    linear-gradient(180deg, #05070a 0%, #07090d 100%);
}
body[data-mode="mercado"] .orb.a{ background:#3a8fd1; }

/* ============================================================
   Cross-document fluid bridge — a soft cross-fade between pages.
   Chrome/Edge run it via the native View Transitions API; other
   browsers just navigate. The Iberia<->Mercado mode switch opts
   out of this fade (see the staggered glass-card flip below).
   ============================================================ */
@view-transition { navigation: auto; }
::view-transition-old(root){ animation: vtFade 380ms cubic-bezier(.4,0,.2,1) both; }
::view-transition-new(root){ animation: vtFade 380ms cubic-bezier(.4,0,.2,1) reverse both; animation-delay:60ms; }
::view-transition-group(root){ background:#000; }
@keyframes vtFade{ from{opacity:1} to{opacity:0} }

/* The Iberia <-> Mercado mode-switch transition (staggered glass-card
   flip) lives further down — see "staggered glass-card flip". The old
   water-ripple stage and its SVG turbulence filters were removed. */

/* Incoming page: staggered panel rise */
@keyframes pageReveal{ from{opacity:0;transform:scale(.992)} to{opacity:1;transform:none} }
/* Gated to body.incoming: a normal page load reveals; the mode switch
   does NOT (its card cascade is the reveal). Keeping this off .stage
   unconditionally is what stops it re-firing — a full-screen flash —
   when transitions.js clears the mode-switch classes. */
body.incoming .stage{ animation: pageReveal .9s cubic-bezier(.2,.7,.2,1) both; }
@keyframes panelRise{
  0%   { opacity:0; transform: translateY(18px) scale(.985); }
  60%  { opacity:1; }
  100% { opacity:1; transform: none; }
}
body.incoming .lg{ animation: panelRise 1.3s cubic-bezier(.2,.7,.2,1) both; }
body.incoming .sidebar{ animation-delay: .15s; }
body.incoming .hero{    animation-delay: .30s; }
body.incoming .lb{      animation-delay: .50s; }
body.incoming header.topbar{ animation: panelRise .9s cubic-bezier(.2,.7,.2,1) both; animation-delay:.05s; }

/* Respect reduced-motion users — kill all heavy transitions */
@media (prefers-reduced-motion: reduce) {
  body.incoming .stage, body.incoming .lg, body.incoming header.topbar, .orb,
  body.mode-switch-in .lg, body.mode-switch-play .lg, body.mode-switch-in .orbs,
  body.mode-switch-in .lg::before, body.mode-switch-play .lg::before,
  body.mode-switch-out .lg {
    animation: none !important;
    filter: none !important;
    transition: none !important;
  }
  body.mode-switch-in .lg, body.mode-switch-in .lg::before,
  body.mode-switch-out .lg { opacity: 1 !important; }
}

*{box-sizing:border-box}
/* Themed scrollbars — transparent track + subtle thumb so overflow areas
   (leaderboard, tables, code blocks) stay coherent with the dark theme.
   Windows Chrome's default white track was jarring. */
*{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.22) transparent}
*::-webkit-scrollbar{width:9px;height:9px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:99px;
  border:2px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.3);
  border:2px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-corner{background:transparent}

html,body{margin:0;padding:0;background:#000;color:var(--ink);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

body{
  min-height:100vh;
  background:
    radial-gradient(1100px 700px at 82% -10%, rgba(255,92,26,.22), transparent 60%),
    radial-gradient(900px 600px at 10% 110%, rgba(90,60,220,.18), transparent 60%),
    radial-gradient(600px 400px at 50% 50%, rgba(20,180,160,.06), transparent 70%),
    linear-gradient(180deg, #05070a 0%, #07090d 100%);
  overflow-x:hidden;
}

/* Orbs — drifting refraction targets */
.orbs{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:.5;mix-blend-mode:screen}
.orb.a{width:640px;height:640px;background:#ff5c1a;top:-180px;right:-140px;animation:floatA 28s ease-in-out infinite}
.orb.b{width:520px;height:520px;background:#5a3cdc;bottom:-160px;left:-120px;animation:floatB 32s ease-in-out infinite}
.orb.c{width:360px;height:360px;background:#14b4a0;top:50%;left:55%;opacity:.22;animation:floatC 40s ease-in-out infinite}
@keyframes floatA{0%,100%{transform:translate(0,0)}50%{transform:translate(-40px,60px)}}
@keyframes floatB{0%,100%{transform:translate(0,0)}50%{transform:translate(60px,-40px)}}
@keyframes floatC{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(-30%,-60%)}}

/* iOS 26 liquid glass */
.lg{
  position:relative;border-radius:26px;isolation:isolate;
  background:rgba(255,255,255,.04);
  box-shadow:
    0 1px 0 rgba(255,255,255,.09) inset,
    0 -1px 0 rgba(255,255,255,.03) inset,
    0 30px 80px -30px rgba(0,0,0,.7),
    0 2px 6px rgba(0,0,0,.35);
}
.lg::before{
  content:"";position:absolute;inset:0;border-radius:inherit;z-index:-2;
  /* Refraction toned down: the SVG url(#lg-distort) displacement filter was
     a major Chrome jank source (an SVG filter inside backdrop-filter is
     re-evaluated every frame against the animated orbs behind it) and was
     never even applied on WebKit. Plain blur + a gentler saturate gives a
     consistent, much cheaper glass across browsers. */
  backdrop-filter: blur(6px) saturate(140%);
  -webkit-backdrop-filter: blur(6px) saturate(140%);
}
.lg::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
  background:
    radial-gradient(140% 80% at 50% -10%, rgba(255,255,255,.10), rgba(255,255,255,0) 55%),
    radial-gradient(120% 60% at 50% 110%, rgba(255,255,255,.04), rgba(255,255,255,0) 55%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.008));
  mix-blend-mode:overlay;
}
.lg > .rim{
  position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 0 0 1px rgba(255,255,255,.05),
    inset 0 -1px 0 rgba(0,0,0,.45);
}
.lg > .content{position:relative;z-index:1}

.lg-pill{
  border-radius:999px;background:rgba(255,255,255,.06);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border:1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 8px 24px -10px rgba(0,0,0,.6);
}

/* === LAYOUT === */
.stage{
  position:relative;z-index:2;min-height:100vh;
  padding:24px 32px 80px;max-width:1480px;margin:0 auto;
}

.topbar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:28px}
.topnav{display:flex;gap:22px;align-items:center;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase}
.topnav a{color:var(--ink-dim);text-decoration:none;transition:color .15s ease;white-space:nowrap}
.topnav a:hover{color:var(--accent)}
@media (max-width:820px){.topnav{display:none}}
.brand{display:flex;align-items:center;gap:18px}
.brand .logo{width:60px;height:60px;flex:0 0 auto}
.brand .logo svg{width:100%;height:100%;display:block}
.brand .wordmark{font-family:var(--font-brand);font-weight:500;font-size:40px;letter-spacing:-.02em;line-height:1}
.brand .wordmark .dot{color:var(--accent)}
.brand .sub{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-dim);
  border-left:1px solid var(--rule-2);padding-left:14px;margin-left:4px;display:flex;flex-direction:column;gap:2px;
}
.brand .sub b{color:var(--ink);font-weight:500;letter-spacing:.16em}
.brand .wordmark a{color:inherit;text-decoration:none}

.topbar .user{
  display:flex;align-items:center;gap:12px;padding:8px 8px 8px 18px;
  text-decoration:none;cursor:pointer;
  view-transition-name:none; /* only during pill ↔ /auth — see html.auth-bubble-nav */
  transition: transform .2s ease, box-shadow .2s ease;
}
html.auth-bubble-nav .topbar .user{
  view-transition-name:auth-bubble;
}
.topbar .user:hover{transform:translateY(-1px)}
.topbar .user .who{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;color:var(--ink)}
.topbar .user .role{font-family:var(--font-mono);font-size:10px;color:var(--ink-dim);letter-spacing:.1em}
/* Long names / company labels must never blow out the pill width. */
.topbar .user .who,.topbar .user .role{max-width:180px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar .user .avatar{
  width:34px;height:34px;border-radius:50%;
  background:linear-gradient(135deg,#2a2a27,#111);
  display:grid;place-items:center;font-family:var(--font-mono);font-size:11px;color:var(--ink);
  border:1px solid rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.2);
}
.topbar .user .avatar.avatar-img{padding:0;object-fit:cover}
/* Glass "?" avatar for the logged-out pill — matches the liquid-glass
   vocabulary rather than dropping a Google logo where the user isn't yet. */
.topbar .user .avatar.avatar-unknown{
  background:rgba(255,255,255,.06);
  backdrop-filter:blur(12px) saturate(180%);
  -webkit-backdrop-filter:blur(12px) saturate(180%);
  border:1px solid rgba(255,255,255,.18);
  color:var(--ink);
  font-family:var(--font-display);font-style:italic;font-size:18px;line-height:1;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 4px 16px -6px rgba(0,0,0,.4);
}
.topbar .user-login .who{color:var(--accent)}

/* main columns: sidebar + content.
   minmax(0,1fr): a bare 1fr means minmax(auto,1fr) — any nowrap child (e.g. the
   drop-zone label) can force a track WIDER than the viewport, which is what made
   the sidebar overflow ~100px past the right edge once the layout collapsed. */
.layout{display:grid;grid-template-columns:340px minmax(0,1fr);gap:24px;align-items:start}
.layout > .sidebar, .layout > .main{min-width:0}
/* on the auth page we collapse the grid so the bubble can centre */
body.no-sidebar .layout{display:block}
body.no-sidebar .main{max-width:520px;margin:60px auto 0}

/* === SIDEBAR === */
.sidebar{padding:22px;border-radius:22px;display:flex;flex-direction:column;gap:18px;position:sticky;top:24px;
  max-height:calc(100vh - 48px)}
/* THE scroll fix: scroll the inner .content, NOT the glass box itself.
   The .lg glass fill is painted by absolutely-positioned ::before/::after/.rim
   pinned to the box (inset:0). If the box is the scroll container, those layers
   cover only the initial viewport, so scrolled-in content below slides past
   them and reveals the bare (much darker) page behind — exactly the "scroll =
   dark bottom" bug. Scrolling .content keeps the glass frame fixed + uniform
   while the sections scroll inside it. (44px = the .lg's 22px top+bottom pad.) */
.sidebar > .content{min-height:0;overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:none;max-height:calc(100vh - 48px - 44px)}
.sidebar > .content::-webkit-scrollbar{display:none}
/* Flat, uniform glass fill so there's also no top-bright/bottom-dark radial
   seam within the (now fixed) frame. !important beats the shared .lg rules. */
.lg.sidebar{background:rgba(255,255,255,.055) !important}
.lg.sidebar::after{
  background:rgba(255,255,255,.12) !important;
  mix-blend-mode:overlay;
}
.sidebar h4{margin:0 0 10px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-dim)}
.sidebar .section{padding-bottom:16px;border-bottom:1px solid var(--rule)}
.sidebar .section:last-child{border-bottom:none;padding-bottom:0}

/* mode segmented control — liquid glass thumb that slides */
.modeswitch{
  position:relative;
  display:grid;grid-template-columns:1fr 1fr;gap:0;padding:4px;border-radius:14px;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);
  isolation:isolate;
}
.modeswitch .thumb{
  position:absolute;top:4px;left:4px;
  width:calc(50% - 4px);height:calc(100% - 8px);
  border-radius:10px;
  background:linear-gradient(180deg, color-mix(in oklab, var(--accent) 88%, white 12%), var(--accent));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 8px 22px -8px rgba(var(--accent-rgb),.7), 0 0 0 1px rgba(255,255,255,.08);
  transition: transform .35s cubic-bezier(.4,0,.2,1), background .25s ease;
  z-index:0;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.modeswitch .thumb::before{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background: radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,.35), transparent 55%);
  pointer-events:none;
}
.modeswitch[data-active="iberia"] .thumb{ transform: translateX(100%); }
.modeswitch a{
  text-decoration:none;text-align:center;padding:10px 8px;border-radius:10px;
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim);
  display:inline-flex;align-items:center;justify-content:center;gap:8px;line-height:1;
  position:relative;z-index:1;
  transition: color .35s ease, font-weight .2s ease;
}
.modeswitch a .flag{display:inline-flex;align-items:center;justify-content:center;line-height:1;height:14px}
.modeswitch a .lbl{display:inline-flex;align-items:center;line-height:1;transform:translateY(.5px)}
.modeswitch a[aria-selected="true"]{ color:var(--accent-ink);font-weight:700; }
.modeswitch .flag{font-size:13px}

/* file upload */
.file-up{
  display:block;
  padding:22px 14px 18px;border-radius:14px;
  text-align:center;background:rgba(255,255,255,.03);cursor:pointer;
  transition:background .15s, transform .15s;
}
.file-up:hover{background:rgba(var(--accent-rgb),.07)}
.file-up:hover .ico{transform:translateY(-2px)}
.file-up .ico{width:56px;height:70px;margin:0 auto 12px;display:block;transition:transform .15s ease}
.file-up .lbl{font-family:var(--font-sans);font-size:13.5px;color:var(--ink);font-weight:500}
.file-up .hint{font-family:var(--font-mono);font-size:10px;color:var(--ink-dim);letter-spacing:.14em;text-transform:uppercase;margin-top:5px}
.file-up .filename{font-family:var(--font-mono);font-size:11px;color:var(--accent);margin-top:6px}

.field{display:flex;flex-direction:column;gap:6px}
.field label{font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim)}
.field input{
  all:unset;font-family:var(--font-mono);font-size:13px;color:var(--ink);
  padding:10px 12px;border-radius:10px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
}
.field input::placeholder{color:var(--ink-mute)}
.field input:focus{border-color:var(--accent);background:rgba(255,255,255,.06)}
.field .help{font-family:var(--font-sans);font-size:11.5px;color:var(--ink-dim);line-height:1.4}

.btn-primary{
  all:unset;cursor:pointer;text-align:center;
  background:var(--accent);color:var(--accent-ink);
  padding:13px 18px;border-radius:12px;
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  box-shadow: 0 10px 30px -10px rgba(var(--accent-rgb),.7), inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .15s ease;
}
.btn-primary:hover{transform:translateY(-1px)}
.btn-primary:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn-ghost{
  all:unset;cursor:pointer;text-align:center;
  padding:11px 16px;border-radius:12px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2);
}

/* toggle (Mercado 1Y backtest) */
.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 12px;border:1px solid rgba(255,255,255,.1);border-radius:11px;background:rgba(255,255,255,.02);cursor:pointer}
.toggle-row .label{display:flex;flex-direction:column;gap:2px}
.toggle-row .label .name{font-family:var(--font-sans);font-size:12.5px;color:var(--ink);font-weight:500}
.toggle-row .label .sub{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim)}
.toggle{width:36px;height:20px;border-radius:999px;background:var(--accent);position:relative;flex-shrink:0;transition:background .2s}
.toggle::before{content:"";position:absolute;top:2px;left:18px;width:16px;height:16px;border-radius:50%;background:#fff;transition:left .2s;box-shadow:0 1px 4px rgba(0,0,0,.4)}
.toggle[data-on="false"]{background:rgba(255,255,255,.1)}
.toggle[data-on="false"]::before{left:2px}

/* watchlist expander */
details.watchlist{border-radius:12px;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.07);overflow:hidden}
details.watchlist summary{
  list-style:none;cursor:pointer;padding:12px 14px;
  display:flex;justify-content:space-between;align-items:center;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim);
}
details.watchlist summary::-webkit-details-marker{display:none}
details.watchlist summary .chev{transition:transform .2s}
details[open].watchlist summary .chev{transform:rotate(90deg)}
details.watchlist .body{padding:0 14px 14px;display:flex;flex-direction:column;gap:8px}
details.watchlist textarea{
  all:unset;width:100%;min-height:60px;
  font-family:var(--font-mono);font-size:12px;color:var(--ink);
  padding:10px;border-radius:10px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  box-sizing:border-box;
}

/* methodology card */
.method{
  padding:14px 16px;border-radius:14px;
  background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.07);
  font-family:var(--font-sans);font-size:12px;color:var(--ink-dim);line-height:1.7;
}
.method b{display:block;color:var(--ink-dim);font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;margin-bottom:6px}
.method ul{margin:0;padding:0;list-style:none}
.method li{padding-left:14px;position:relative}
.method li::before{content:"·";position:absolute;left:4px;color:var(--accent);font-weight:700}

.sig{
  text-align:center;padding-top:12px;border-top:1px solid var(--rule);
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.14em;color:var(--ink-mute);line-height:1.6;
}
.sig b{color:var(--ink-dim)}

/* === MAIN CONTENT === */
.main{display:flex;flex-direction:column;gap:24px}

.hero{padding:32px 36px;border-radius:26px}
.hero .hero-top{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:16px;margin-bottom:22px}
.hero .eyebrow{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-dim);
  margin-bottom:10px;display:inline-flex;align-items:center;gap:10px;
}
.hero .eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 14px var(--accent)}
.hero h1{margin:0;font-family:var(--font-display);font-weight:400;font-size:clamp(36px,4.2vw,56px);line-height:.98;letter-spacing:-.02em}
.hero h1 em{font-style:italic;color:var(--accent)}
.month-pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;border-radius:999px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;color:var(--ink-dim);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.15);
}
.month-pill .m{color:var(--ink);text-transform:uppercase;letter-spacing:.16em}
.month-pill .trend{color:var(--pos);font-weight:600}
.month-pill .dh{color:var(--ink-mute)}

.hero .stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding:18px 0;margin-bottom:22px;
}
.hero .stats.cols-3{grid-template-columns:repeat(3,1fr)}
.hero .stats .c{padding:0 22px;border-right:1px solid var(--rule);position:relative}
.hero .stats .c:first-child{padding-left:0}
.hero .stats .c:last-child{border-right:none;padding-right:0}
.hero .stats .k{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase}
.hero .stats .v{font-family:var(--font-display);font-size:30px;letter-spacing:-.015em;margin-top:6px;line-height:1}
.hero .stats .v small{color:var(--ink-dim);font-size:12px;margin-left:6px;font-family:var(--font-mono);letter-spacing:.05em}
.hero .stats .delta{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;margin-top:6px;color:var(--ink-mute)}
.hero .stats .delta.pos{color:var(--pos)}
.hero .stats .delta.neg{color:var(--neg)}
.hero .stats .spark{margin-top:6px;height:24px}
.hero .stats .spark svg{width:100%;height:100%;display:block}

/* auto-fit lets the three hero cards reflow 3 -> 2 -> 1 columns with the real
   available width (the fixed 1.1fr/1fr/1.1fr crammed badly around ~1280px and
   stretched absurdly once the layout collapses to a single column). */
.hero-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px}
.hg-card{
  padding:16px 16px 14px;border-radius:16px;min-width:0;
  background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.06);
}
.hg-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px;gap:8px}
.hg-head h3{margin:0;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);font-weight:500}
.hg-head .hg-meta{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mute)}
.hg-sub{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-mute);margin:14px 0 8px}

/* watchlist mini rows */
.wl-row{display:grid;grid-template-columns:64px 1fr auto auto;gap:10px;align-items:center;padding:7px 0;border-bottom:1px solid var(--rule);font-size:12px}
.wl-row:last-child{border-bottom:none}
a.wl-row{text-decoration:none;color:inherit;transition:background .12s ease}
a.wl-row:hover{background:rgba(255,255,255,.035)}
.wl-row .t{font-family:var(--font-mono);color:var(--ink);font-size:11px;letter-spacing:.05em}
.wl-row .n{font-family:var(--font-display);font-size:14px;color:var(--ink);letter-spacing:-.005em}
.wl-row .sc{font-family:var(--font-mono);color:var(--ink);font-weight:500;font-size:12px;min-width:24px;text-align:right}
.wl-row .rt{font-family:var(--font-mono);font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;padding:2px 7px;border-radius:999px;font-weight:700}
.rt.sb{background:rgba(61,220,154,.15);color:#3ddc9a}
.rt.b{background:rgba(76,175,137,.15);color:#7ad8a8}
.rt.h{background:rgba(var(--warn-rgb),.15);color:var(--warn)}
.rt.w{background:rgba(199,122,58,.15);color:#d99362}
.rt.av{background:rgba(184,64,64,.15);color:#e07878}

/* tier distribution */
.tier-bar{display:flex;height:10px;border-radius:999px;overflow:hidden;background:rgba(255,255,255,.06);margin-bottom:10px}
.tier-bar span{display:block;height:100%}
.tier-bar .t1{background:#3ddc9a}
.tier-bar .t2{background:var(--accent)}
.tier-bar .t3{background:rgba(255,255,255,.18)}
.tier-legend{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;color:var(--ink-dim)}
.tier-legend > div{display:flex;align-items:center;gap:6px;justify-content:center;white-space:nowrap}
.tier-legend .d{width:8px;height:8px;border-radius:50%}
.tier-legend .d.t1{background:#3ddc9a}
.tier-legend .d.t2{background:var(--accent)}
.tier-legend .d.t3{background:rgba(255,255,255,.4)}
.tier-legend b{color:var(--ink);font-weight:500;margin-left:4px}

.sec-row{display:grid;grid-template-columns:74px 1fr 24px;align-items:center;gap:10px;padding:5px 0;font-family:var(--font-mono);font-size:10.5px;color:var(--ink-dim);letter-spacing:.04em}
.sec-row .bar{height:5px;border-radius:3px;background:rgba(255,255,255,.06);overflow:hidden}
.sec-row .bar i{display:block;height:100%;background:var(--accent);box-shadow:0 0 10px var(--accent)}
.sec-row b{color:var(--ink);font-weight:500;text-align:right}

/* activity */
.act-row{display:flex;gap:10px;padding:8px 0;border-bottom:1px solid var(--rule);font-family:var(--font-sans);font-size:12.5px;color:var(--ink);line-height:1.45}
.act-row:last-child{border-bottom:none}
a.act-row{text-decoration:none;color:var(--ink);transition:background .12s ease}
a.act-row:hover{background:rgba(255,255,255,.035)}
.act-row .dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.4);margin-top:6px;flex:0 0 auto}
.act-row .dot.pos{background:var(--pos);box-shadow:0 0 8px var(--pos)}
.act-row .dot.neg{background:var(--neg);box-shadow:0 0 8px var(--neg)}
.act-row b{font-weight:500}
.act-row .ts{font-family:var(--font-mono);font-size:9.5px;color:var(--ink-mute);letter-spacing:.1em;margin-top:2px}

/* (hero-grid reflows via auto-fit above; no fixed collapse needed here) */

/* leaderboard */
.lb{padding:28px 30px;border-radius:26px}
.lb .head{display:flex;justify-content:space-between;align-items:flex-end;padding-bottom:18px;border-bottom:1px solid var(--rule);margin-bottom:14px;flex-wrap:wrap;gap:12px}
.lb .head h2{margin:0;font-family:var(--font-display);font-weight:400;font-size:30px;letter-spacing:-.015em}
.lb .head h2 em{font-style:italic;color:var(--accent)}
.lb .head .desc{margin:6px 0 0;font-family:var(--font-sans);font-size:13px;color:var(--ink-dim);max-width:540px;line-height:1.5}
.lb .head .filters{display:flex;gap:6px;align-items:center}
.lb .head .chip{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  padding:6px 12px;border-radius:999px;color:var(--ink-dim);
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);cursor:pointer;
}
.lb .head .chip.on{color:var(--accent-ink);background:var(--accent);border-color:var(--accent);font-weight:700}

/* Tables cannot shrink below their min-content width, so on narrower screens
   the 9-column leaderboard used to overflow its glass panel and get clipped.
   The wrapper scrolls horizontally instead — nothing is ever cut off. */
.lbtbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;min-width:0}
table.lbtbl{width:100%;border-collapse:collapse;font-family:var(--font-mono);font-size:12.5px}
table.lbtbl th{
  text-align:left;padding:10px 12px;
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-mute);font-weight:400;
  border-bottom:1px solid var(--rule-2);
}
table.lbtbl td{padding:11px 12px;border-bottom:1px solid var(--rule);color:var(--ink-dim);vertical-align:middle}
table.lbtbl td.rank{font-family:var(--font-mono);color:var(--ink-mute);width:42px}
table.lbtbl td.rank .r{display:inline-block;min-width:22px}
table.lbtbl td.rank .r.gold{color:var(--accent)}
table.lbtbl td.name{color:var(--ink);font-family:var(--font-display);font-size:15px;letter-spacing:-.005em;max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
table.lbtbl td .sec{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute);margin-top:2px}
table.lbtbl td.num{color:var(--ink);text-align:right;font-variant-numeric:tabular-nums}
table.lbtbl td.num.pos{color:var(--pos)}
table.lbtbl td.num.neg{color:var(--neg)}
table.lbtbl td.score{text-align:right}
table.lbtbl td a{color:inherit;text-decoration:none}
table.lbtbl td a:hover{color:var(--accent)}

.ticker-link{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.05em;
  color:var(--ink);font-weight:500;text-decoration:none;
  transition:color .15s ease;
}
.ticker-link:hover{color:var(--accent)}

.scorebar{display:inline-flex;align-items:center;gap:8px;justify-content:flex-end;width:100%}
.scorebar .bar{width:80px;height:5px;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden}
.scorebar .fill{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-soft));box-shadow:0 0 12px var(--accent)}
.scorebar .v{font-family:var(--font-mono);font-size:12.5px;color:var(--ink);min-width:42px;text-align:right;font-weight:500}
body[data-mode="mercado"] .scorebar .fill{background:linear-gradient(90deg,var(--accent),#86c1e8)}

/* Leaderboard v11.1 — sortable headers, sector filter, clickable rows, shading */
.lb .head .chip.lb-sector{
  appearance:none;-webkit-appearance:none;text-transform:none;letter-spacing:.02em;
  font-size:10.5px;max-width:180px;padding-right:24px;cursor:pointer;
  background:rgba(255,255,255,.04) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='6' viewBox='0 0 8 6'%3E%3Cpath fill='%239aa3b2' d='M0 0h8L4 6z'/%3E%3C/svg%3E") no-repeat right 10px center;
}
.lb .head .chip.lb-sector option{background:#14181f;color:var(--ink)}
table.lbtbl th.srt{cursor:pointer;user-select:none;white-space:nowrap}
table.lbtbl th.srt:hover{color:var(--ink-dim)}
table.lbtbl th.srt.sorted{color:var(--accent)}
table.lbtbl th.srt.sorted[data-dir="desc"]::after{content:"\00a0\25be"}
table.lbtbl th.srt.sorted[data-dir="asc"]::after{content:"\00a0\25b4"}
table.lbtbl td.sh-hi{background:rgba(61,220,154,.09)}
table.lbtbl td.sh-lo{background:rgba(255,84,112,.08)}
table.lbtbl tr.clickable{cursor:pointer;transition:background .12s ease}
table.lbtbl tr.clickable:hover{background:rgba(255,255,255,.035)}
table.lbtbl .est{font-family:var(--font-mono);font-size:8px;color:var(--ink-mute);margin-left:3px;letter-spacing:.04em;cursor:help}
table.lbtbl td.rank .dot.neg{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--neg);margin-left:5px;vertical-align:middle}
.lb-empty{text-align:center;padding:48px 24px;font-family:var(--font-sans)}
.lb-empty .t{font-family:var(--font-display);font-size:20px;color:var(--ink);margin-bottom:8px;letter-spacing:-.01em}
.lb-empty .s{font-size:13px;color:var(--ink-dim);line-height:1.55;max-width:440px;margin:0 auto 18px}
.lb-empty .btn-primary{display:inline-block;text-decoration:none}

.rating{
  display:inline-block;padding:3px 10px;border-radius:999px;white-space:nowrap;
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
}
/* Compact rating chip inside the dense leaderboard table so multi-word labels
   ("STRONG BUY") stay on one line and don't overflow their cell. */
table.lbtbl td .rating{font-size:8.5px;letter-spacing:.08em;padding:3px 8px}
table.lbtbl td.rating-cell{white-space:nowrap}
.rating.sb{background:rgba(61,220,154,.14);color:var(--pos);border:1px solid rgba(61,220,154,.3)}
.rating.b{background:rgba(184,255,58,.1);color:#b8ff3a;border:1px solid rgba(184,255,58,.25)}
.rating.h{background:rgba(var(--warn-rgb),.12);color:var(--warn);border:1px solid rgba(var(--warn-rgb),.3)}
.rating.w{background:rgba(255,150,90,.1);color:#ffb47a;border:1px solid rgba(255,150,90,.25)}
.rating.a{background:rgba(255,84,112,.1);color:var(--neg);border:1px solid rgba(255,84,112,.25)}

/* status footer */
.status{
  position:fixed;left:50%;bottom:20px;transform:translateX(-50%);
  z-index:50;padding:8px 18px;
  display:flex;align-items:center;gap:14px;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim);
}
.status .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--accent)}
.status .sep{opacity:.4}
/* The pill is wider than small screens and wraps into a stacked blob — it's
   ambient chrome, so drop it rather than shrink it. */
@media (max-width:700px){ .status{display:none} }

/* Feedback FAB (F3) — logged-in only, bottom-right, no glow */
.feedback-widget{position:fixed;right:22px;bottom:22px;z-index:60}
.feedback-fab{
  width:44px;height:44px;border-radius:50%;border:1px solid var(--rule-2);
  background:rgba(255,255,255,.06);color:var(--ink);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:border-color .15s ease, background .15s ease, color .15s ease;
}
.feedback-fab:hover,.feedback-fab[aria-expanded="true"]{
  border-color:var(--accent);background:rgba(var(--accent-rgb),.12);color:var(--accent);
}
.feedback-popover{
  position:absolute;right:0;bottom:calc(100% + 10px);width:min(320px, calc(100vw - 44px));
  padding:16px 16px 14px;border-radius:14px;border:1px solid var(--rule-2);
  background:rgba(18,18,22,.92);backdrop-filter:blur(16px);
  box-shadow:0 12px 40px rgba(0,0,0,.35);
}
.feedback-popover__title{
  margin:0 0 12px;font-family:var(--font-sans);font-size:13px;font-weight:500;color:var(--ink);
}
.feedback-form textarea{
  width:100%;box-sizing:border-box;resize:vertical;min-height:88px;
  font-family:var(--font-sans);font-size:13px;line-height:1.5;color:var(--ink);
  background:rgba(255,255,255,.04);border:1px solid var(--rule-2);border-radius:10px;
  padding:10px 12px;outline:none;transition:border-color .15s ease;
}
.feedback-form textarea::placeholder{color:var(--ink-mute)}
.feedback-form textarea:focus{border-color:var(--accent)}
.feedback-check{
  display:flex;align-items:flex-start;gap:8px;margin:12px 0 14px;
  font-family:var(--font-sans);font-size:12px;line-height:1.45;color:var(--ink-dim);
  cursor:pointer;
}
.feedback-check input{margin-top:2px;accent-color:var(--accent)}
.feedback-submit{
  width:100%;box-sizing:border-box;justify-content:center;
  padding:11px 16px;font-size:11px;border-radius:10px;
}
.feedback-result{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:22px 10px 18px;text-align:center;
}
.feedback-result svg{width:34px;height:34px}
.feedback-result p{
  margin:0;font-family:var(--font-sans);font-size:13px;line-height:1.5;color:var(--ink);
}
.feedback-result--rate_limit p,.feedback-result--error p{color:var(--warn)}
@media (max-width:700px){ .feedback-widget{bottom:16px;right:16px} }

/* Legal footer (Términos · Privacidad · DPA) */
.legal-footer{text-align:center;padding:16px 12px 10px;font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;color:var(--ink-mute)}
.legal-footer a{color:var(--ink-mute);text-decoration:none;transition:color .15s ease}
.legal-footer a:hover{color:var(--accent)}

@media (max-width:1100px){
  .layout{grid-template-columns:minmax(0,1fr)}
  .sidebar{position:static;max-height:none;overflow:visible}
  .hero .stats,.hero .stats.cols-3{grid-template-columns:repeat(2,1fr);gap:14px 0}
  .hero .stats .c:nth-child(2){border-right:none}
}

/* ============================================================
   ANALYSIS REPORT — additions for the Iberia PE + Mercado
   Valuation prototypes. Same liquid-glass vocabulary as the
   landing mockups; nothing imported, nothing redesigned from
   first principles.
   ============================================================ */

.analysis-header{
  display:grid;grid-template-columns:1fr auto;align-items:center;gap:18px;
  padding:24px 28px;border-radius:22px;margin-bottom:18px;
}

/* Tabs nav — pill-glass with sliding active indicator. Replaces the
   Streamlit st.tabs() horizontal strip. Same .lg-pill vocabulary. */
.tabs-nav{
  display:flex;flex-wrap:nowrap;gap:3px;padding:5px;margin-bottom:18px;
  /* flex-start (NOT center): with many tabs the row overflows and scrolls;
     `center` splits the overflow to BOTH sides, clipping the FIRST tab
     ("Análisis PE") off the left edge where it can't be scrolled to — so the
     landing tab became unreachable once you left it. flex-start keeps the
     first tab at the scrollable origin. When the tabs fit, flex:1 on each
     button fills the row regardless, so the look is unchanged. */
  justify-content:flex-start;overflow-x:auto;scrollbar-width:none;
}
.tabs-nav::-webkit-scrollbar{display:none}
.tabs-nav button{
  /* Fill the row: each tab takes an equal share and resizes with the viewport
     (flex:1). min-width:max-content keeps the label intact and lets the bar
     scroll horizontally only when the screen is too narrow for all of them. */
  all:unset;cursor:pointer;flex:1 1 0;min-width:max-content;text-align:center;
  padding:7px 11px;border-radius:999px;
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-dim);white-space:nowrap;
  transition:color .15s ease, background .15s ease;
}
.tabs-nav button:hover{color:var(--ink)}
.tabs-nav button[aria-selected="true"]{
  color:var(--accent-ink);background:var(--accent);font-weight:700;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 6px 18px -8px rgba(var(--accent-rgb),.6);
}
.tab-panel[hidden]{display:none}
.tab-panel{display:flex;flex-direction:column;gap:24px}
/* tab_lbo.html wraps its sections in #lbo-panel (the HTMX swap target),
   so they are no longer direct children of .tab-panel and miss its flex
   gap — give the wrapper the same column spacing every other tab gets. */
#lbo-panel{display:flex;flex-direction:column;gap:24px}

/* News/headline list (sentiment tab) */
.headline-row{
  display:flex;align-items:flex-start;gap:14px;
  padding:11px 14px;margin-bottom:6px;
  background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.06);
  border-left-width:3px;border-radius:8px;
}
.headline-row.pos{border-left-color:var(--pos)}
.headline-row.neg{border-left-color:var(--neg)}
.headline-row.neu{border-left-color:var(--ink-mute)}
.headline-row .sym{
  font-family:var(--font-mono);font-size:11px;font-weight:700;
  min-width:2rem;padding-top:1px;
}
.headline-row.pos .sym{color:var(--pos)}
.headline-row.neg .sym{color:var(--neg)}
.headline-row.neu .sym{color:var(--ink-mute)}
.headline-row .body{flex:1;line-height:1.5}
.headline-row .title{font-family:var(--font-sans);font-size:13.5px;color:var(--ink)}
.headline-row .meta{font-family:var(--font-mono);font-size:10px;color:var(--ink-mute);letter-spacing:.06em;margin-top:3px}
.headline-row .meta b{font-weight:500;letter-spacing:.04em}

/* Insider transactions table */
table.insider{width:100%;border-collapse:collapse;font-family:var(--font-mono);font-size:12px;margin-top:14px}
table.insider th{
  text-align:left;padding:9px 12px;
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-mute);font-weight:400;
  border-bottom:1px solid var(--rule-2);
}
table.insider td{padding:10px 12px;border-bottom:1px solid var(--rule);color:var(--ink-dim)}
table.insider td.t{color:var(--ink);font-family:var(--font-sans)}
table.insider td.txn-buy{color:var(--pos);font-weight:500}
table.insider td.txn-sell{color:var(--neg);font-weight:500}
table.insider td.num{text-align:right;font-variant-numeric:tabular-nums;color:var(--ink)}

/* Thesis cards — strengths / risks side-by-side */
.thesis-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:900px){.thesis-grid{grid-template-columns:1fr}}
.thesis-card{padding:18px 20px;border-radius:16px;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.06)}
.thesis-card h4{margin:0 0 12px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-dim);display:flex;align-items:center;gap:8px}
.thesis-card h4 .dot{width:8px;height:8px;border-radius:50%;display:inline-block}
.thesis-card h4 .dot.pos{background:var(--pos);box-shadow:0 0 8px var(--pos)}
.thesis-card h4 .dot.neg{background:var(--neg);box-shadow:0 0 8px var(--neg)}
.thesis-card ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.thesis-card li{font-family:var(--font-sans);font-size:13px;color:var(--ink);line-height:1.55;padding-left:16px;position:relative}
.thesis-card li::before{content:"›";position:absolute;left:0;color:var(--accent);font-weight:700}
.thesis-prose{font-family:var(--font-display);font-size:18px;line-height:1.55;color:var(--ink);margin:0}
.thesis-prose em{color:var(--accent);font-style:italic}

/* Verdict banner (PE thesis) */
.verdict-banner{
  padding:18px 24px;border-radius:18px;
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);
}
.verdict-banner .verdict{
  font-family:var(--font-display);font-size:30px;letter-spacing:-.015em;line-height:1;
}
.verdict-banner .verdict em{font-style:italic;color:var(--accent)}
.verdict-banner .meta{font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;color:var(--ink-dim);text-transform:uppercase}

/* Backtest skeleton (data not in bundle yet) */
.backtest-empty{
  padding:48px 36px;text-align:center;
  font-family:var(--font-sans);color:var(--ink-dim);line-height:1.55;
}
.backtest-empty .ico{font-size:42px;color:var(--ink-mute);display:block;margin-bottom:12px;line-height:1}
.analysis-header .meta{display:flex;flex-direction:column;gap:6px}
.analysis-header .meta .ticker{font-family:var(--font-mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.analysis-header .meta h1{margin:0;font-family:var(--font-display);font-weight:400;font-size:clamp(28px,3.2vw,40px);letter-spacing:-.018em;line-height:1.05}
.analysis-header .meta .sub{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;color:var(--ink-dim)}
.analysis-header .meta .sub span + span::before{content:"·";color:var(--ink-mute);margin:0 8px}

/* "Download PDF report" pill in the analysis header */
.analysis-header .header-actions{display:flex;gap:10px;flex-wrap:wrap}
.lg-pill.report-dl{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);text-decoration:none;transition:transform .22s cubic-bezier(0.34,1.56,0.64,1),color .18s ease,background .18s ease}
.lg-pill.report-dl:hover{color:var(--accent);transform:translateY(-1px)}
.lg-pill.report-dl svg{flex-shrink:0;opacity:.85}
.lg-pill.report-dl:hover svg{opacity:1}

/* Inline tag/badge next to section headings ("RECOMENDADA" etc.) */
.badge{display:inline-block;padding:3px 9px;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;border-radius:999px;vertical-align:middle;line-height:1.4}
.badge-warn{background:rgba(var(--warn-rgb),.16);color:var(--warn);border:1px solid rgba(var(--warn-rgb),.4)}
.badge-pos{background:rgba(61,220,154,.14);color:#7fe1b3;border:1px solid rgba(61,220,154,.36)}
.badge-neg{background:rgba(232,90,98,.14);color:#f59aa0;border:1px solid rgba(232,90,98,.36)}

/* Banner on shared-by-link analyses */
.share-banner{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:10px 16px;margin-bottom:16px;background:linear-gradient(90deg,rgba(255,92,26,.10),rgba(255,92,26,.02));border:1px solid rgba(255,92,26,.28);border-radius:12px;font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;color:var(--ink-dim)}
.share-banner strong{color:var(--ink);font-weight:600;letter-spacing:.06em}

/* Share modal */
.share-modal-backdrop{position:fixed;inset:0;z-index:10000;background:rgba(0,0,0,.55);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;animation:smFadeIn .2s ease-out;padding:20px}
.share-modal{max-width:520px;width:100%;background:rgba(18,20,24,.96);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:24px;box-shadow:0 24px 60px rgba(0,0,0,.6)}
.share-modal h3{margin:0 0 8px;font-family:var(--font-display);font-weight:400;font-size:22px;color:var(--ink);letter-spacing:-.01em}
.share-modal p{margin:0 0 16px;font-family:var(--font-sans);font-size:13px;color:var(--ink-dim);line-height:1.5}
.share-modal .url-row{display:flex;gap:8px;margin-bottom:16px}
.share-modal input.url{flex:1;padding:10px 14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.14);border-radius:8px;color:var(--ink);font-family:var(--font-mono);font-size:12px}
.share-modal button{padding:10px 16px;font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.15);border-radius:8px;cursor:pointer;transition:background .15s ease,color .15s ease}
.share-modal button:hover{background:rgba(255,92,26,.15);color:var(--accent);border-color:rgba(255,92,26,.4)}
.share-modal button.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.share-modal button.primary:hover{filter:brightness(1.1)}
.share-modal .actions{display:flex;gap:8px;justify-content:flex-end;margin-top:8px}
.share-modal .err{color:var(--neg);font-size:12px;margin-top:8px}
@keyframes smFadeIn{from{opacity:0}to{opacity:1}}

/* Welcome demo modal (F4) — institutional overlay, no glow */
.welcome-modal-backdrop{
  position:fixed;inset:0;z-index:10050;
  display:flex;align-items:center;justify-content:center;
  padding:20px;background:rgba(0,0,0,.52);backdrop-filter:blur(10px);
  animation:smFadeIn .2s ease-out;
}
.welcome-modal-backdrop[hidden]{display:none !important}
body.welcome-modal-open{overflow:hidden}
.welcome-modal-card{
  max-width:600px;width:100%;margin:0;
  box-shadow:0 28px 70px rgba(0,0,0,.55);
}
.welcome-modal-card > .content{padding:34px 38px 30px}
.welcome-modal-eyebrow{
  display:flex;align-items:center;gap:12px;margin:0 0 16px;
}
.welcome-modal-eyebrow svg{width:34px;height:34px;flex:0 0 auto}
.welcome-modal-eyebrow span{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.28em;
  text-transform:uppercase;color:var(--ink-dim);
}
.welcome-modal-title{
  margin:0 0 10px;font-family:var(--font-display);font-weight:400;
  font-size:clamp(24px,3vw,31px);letter-spacing:-.02em;color:var(--ink);
}
.welcome-modal-lead{
  margin:0 0 20px;font-family:var(--font-sans);font-size:14.5px;
  line-height:1.6;color:var(--ink-dim);
}
.welcome-modal-list{
  margin:0 0 24px;padding:16px 18px;list-style:none;
  border:1px solid var(--rule);border-radius:12px;
  background:rgba(255,255,255,.025);
  font-family:var(--font-sans);font-size:13px;line-height:1.55;color:var(--ink-dim);
}
.welcome-modal-list li{
  position:relative;padding-left:22px;margin-bottom:10px;
}
.welcome-modal-list li::before{
  content:"";position:absolute;left:2px;top:.52em;width:9px;height:5px;
  border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);
  transform:rotate(-45deg);
}
.welcome-modal-list li:last-child{margin-bottom:0}
.welcome-modal-list li b{color:var(--ink);font-weight:600}
.welcome-modal-actions{display:flex;justify-content:center}
.welcome-modal-start{min-width:220px;justify-content:center}

.score-ring{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:160px}
.score-ring .ringwrap{position:relative;width:124px;height:124px}
.score-ring .ringwrap svg{width:100%;height:100%}
.score-ring .ringval{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
.score-ring .ringval .v{font-family:var(--font-display);font-size:42px;letter-spacing:-.02em;color:var(--ink)}
.score-ring .ringval .o{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.18em;color:var(--ink-mute);margin-top:2px}
.score-ring .rating{margin-top:6px}

.metric-grid{display:grid;gap:14px;grid-template-columns:repeat(4,1fr)}
.metric-grid.cols-4{grid-template-columns:repeat(4,1fr)}
.metric-grid.cols-3{grid-template-columns:repeat(3,1fr)}
.metric-grid.cols-2{grid-template-columns:repeat(2,1fr);align-items:stretch}
@media (max-width:720px){.metric-grid,.metric-grid.cols-4,.metric-grid.cols-3{grid-template-columns:repeat(2,1fr)}}
.metric-grid.cols-2 > .svg-card,
.metric-grid.cols-2 > .tier-card.metric-hero{display:flex;flex-direction:column;min-height:100%}
.metric{
  padding:14px 16px;border-radius:14px;
  background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.06);
}
.metric .k{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase}
.metric .v{font-family:var(--font-display);font-size:26px;letter-spacing:-.015em;color:var(--ink);margin-top:6px;line-height:1}
.metric .v small{font-family:var(--font-mono);font-size:11px;letter-spacing:.05em;color:var(--ink-dim);margin-left:4px}
.metric .d{font-family:var(--font-sans);font-size:11.5px;letter-spacing:.01em;color:var(--ink-dim);margin-top:8px;line-height:1.4}
.metric .d.pos{color:var(--pos)}
.metric .d.neg{color:var(--neg)}

.sect{padding:24px 28px;border-radius:22px}
.sect-head{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:14px;border-bottom:1px solid var(--rule);margin-bottom:18px;gap:12px}
.sect-head h2{margin:0;font-family:var(--font-display);font-weight:400;font-size:24px;letter-spacing:-.015em}
.sect-head h2 em{font-style:italic;color:var(--accent)}
.sect-head .meta{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute)}

.warning{
  padding:12px 16px;border-radius:12px;
  background:rgba(255,84,112,.08);border:1px solid rgba(255,84,112,.3);
  font-family:var(--font-sans);font-size:12.5px;color:#ffb1c0;line-height:1.55;
}
.warning b{color:var(--neg);font-weight:500}

/* Semantic inline notice — mirror of .warning for non-alarming states.
   .notice--pos = favourable (green), .notice--neutral = informational (grey).
   Recipe mirrors .flash-ok / .flash-info so semantics live in the class, not
   in an inline style override on .warning. */
.notice{
  padding:12px 16px;border-radius:12px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);
  font-family:var(--font-sans);font-size:12.5px;color:var(--ink-dim);line-height:1.55;
}
.notice b{color:var(--ink);font-weight:500}
.notice--pos{background:rgba(61,220,154,.07);border-color:rgba(61,220,154,.3);color:#a8e6c3}
.notice--pos b{color:var(--pos)}
.notice--neutral{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.12);color:var(--ink-dim)}
.notice--neutral b{color:var(--ink)}

/* Consistent "N/D" fallback inside .metric / .tier-card value slots — muted +
   reset to inherited size instead of the big 26/34px value. Written as
   `.v.v--nd` (0,0,2) placed after `.metric .v` / `.tier-card .v` so it wins. */
.metric .v.v--nd,.tier-card .v.v--nd{color:var(--ink-mute);font-size:inherit}

/* Iberia PE: tier breakdown bars + score breakdown table */
.tier-card{padding:18px;border-radius:16px;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.06);display:flex;flex-direction:column;gap:10px}
.tier-card .k{font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase}
.tier-card .v{font-family:var(--font-display);font-size:34px;letter-spacing:-.02em;color:var(--ink);line-height:1}
.tier-card .v small{font-family:var(--font-mono);font-size:11px;letter-spacing:.05em;color:var(--ink-dim);margin-left:4px}
.tier-card .w{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.14em;color:var(--ink-label);text-transform:uppercase}
.tier-card .progress{height:4px;border-radius:2px;background:rgba(255,255,255,.06);overflow:hidden}
.tier-card .progress i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-soft));box-shadow:0 0 12px var(--accent)}

/* Iberia PE — hero metric cards (Altman Z, Piotroski) */
.tier-card.metric-hero{
  padding:20px 22px;gap:0;min-height:min(264px,36vh);justify-content:space-between;
}
.tier-card.metric-hero .k{flex-shrink:0}
.metric-hero__main{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:14px;padding:12px 8px 18px;
}
.tier-card.metric-hero .metric-hero__value{
  font-size:clamp(52px,9vw,76px);letter-spacing:-.03em;margin:0;
}
.tier-card.metric-hero .metric-hero__value small{
  font-size:clamp(18px,3vw,24px);vertical-align:baseline;
}
.metric-hero__badge{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  padding:7px 16px;border-radius:999px;border:1px solid transparent;
}
.metric-hero__badge--pos{color:var(--pos);background:rgba(61,220,154,.12);border-color:rgba(61,220,154,.35)}
.metric-hero__badge--warn{color:var(--warn);background:rgba(var(--warn-rgb),.1);border-color:rgba(var(--warn-rgb),.35)}
.metric-hero__badge--neg{color:var(--neg);background:rgba(255,84,112,.1);border-color:rgba(255,84,112,.35)}
.metric-hero__footer{margin-top:auto;display:flex;flex-direction:column;gap:10px;width:100%}
.metric-hero__scale{
  position:relative;height:14px;border-radius:7px;overflow:visible;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);padding:3px;
}
.metric-hero__zones{display:flex;height:100%;border-radius:5px;overflow:hidden;gap:1px}
.metric-hero__zones .zone{display:block;height:100%;min-width:2px}
.metric-hero__zones .zone--distress{background:rgba(255,84,112,.55)}
.metric-hero__zones .zone--grey{background:rgba(var(--warn-rgb),.45)}
.metric-hero__zones .zone--safe{background:rgba(61,220,154,.45)}
.metric-hero__marker{
  position:absolute;top:50%;width:3px;height:22px;border-radius:2px;
  transform:translate(-50%,-50%);box-shadow:0 0 10px currentColor;
}
.metric-hero__marker--pos{background:var(--pos);color:var(--pos)}
.metric-hero__marker--warn{background:var(--warn);color:var(--warn)}
.metric-hero__marker--neg{background:var(--neg);color:var(--neg)}
.metric-hero__scale-labels{
  display:flex;justify-content:space-between;
  font-family:var(--font-mono);font-size:9px;letter-spacing:.06em;color:var(--ink-mute);
}
.metric-hero__pips{display:flex;gap:6px;height:18px;align-items:stretch}
.metric-hero__pips .pip{
  flex:1;border-radius:4px;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);transition:background .2s;
}
.metric-hero__pips .pip.on.pip--pos{background:linear-gradient(180deg,var(--pos),rgba(61,220,154,.5));border-color:rgba(61,220,154,.4);box-shadow:0 0 8px rgba(61,220,154,.35)}
.metric-hero__pips .pip.on.pip--warn{background:linear-gradient(180deg,var(--warn),rgba(var(--warn-rgb),.45));border-color:rgba(var(--warn-rgb),.4)}
.metric-hero__pips .pip.on.pip--neg{background:linear-gradient(180deg,var(--neg),rgba(255,84,112,.45));border-color:rgba(255,84,112,.4)}
.metric-hero__chips{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.metric-hero__chips .chip{
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.04em;color:#7ad8a8;
  background:rgba(61,220,154,.1);border:1px solid rgba(61,220,154,.25);padding:3px 8px;border-radius:999px;
}
.metric-hero--piotroski .metric-hero__main{padding-bottom:10px}
.metric-hero--wide{min-height:auto}
.metric-hero--wide .metric-hero__split{
  display:grid;grid-template-columns:minmax(140px,200px) 1fr;gap:16px 28px;align-items:center;
}
.metric-hero--wide .metric-hero__main{padding:4px 0}
.metric-hero--wide .metric-hero__footer{margin-top:0}
.metric-hero--wide .metric-hero__chips{justify-content:flex-start}
.metric-hero__note{
  margin:8px 0 0;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.06em;color:var(--ink-mute);
}
@media (max-width:720px){
  .metric-hero--wide .metric-hero__split{grid-template-columns:1fr}
}

table.breakdown{width:100%;border-collapse:collapse;font-family:var(--font-sans);font-size:13px}
table.breakdown th{
  text-align:left;padding:9px 12px;
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-mute);font-weight:400;
  border-bottom:1px solid var(--rule-2);
}
table.breakdown td{padding:10px 12px;border-bottom:1px solid var(--rule);color:var(--ink-dim);vertical-align:middle}
table.breakdown td.name{color:var(--ink);font-family:var(--font-sans)}
table.breakdown td.num{text-align:right;font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--ink)}
table.breakdown .dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:8px;vertical-align:middle}
table.breakdown .dot.green{background:var(--pos);box-shadow:0 0 6px var(--pos)}
table.breakdown .dot.yellow{background:var(--warn);box-shadow:0 0 6px var(--warn)}
table.breakdown .dot.red{background:var(--neg);box-shadow:0 0 6px var(--neg)}
table.breakdown .minibar{display:inline-block;width:96px;height:4px;border-radius:2px;background:rgba(255,255,255,.06);vertical-align:middle;margin-right:8px;overflow:hidden}
table.breakdown .minibar i{display:block;height:100%;background:var(--accent)}

/* Star rating for the Iberia PE hero */
.stars{display:inline-flex;gap:2px;font-family:var(--font-sans);font-size:20px;line-height:1}
.stars .s{color:var(--ink-mute)}
.stars .s.on{color:var(--accent);text-shadow:0 0 12px rgba(var(--accent-rgb),.6)}

/* Radar / EV waterfall / multi-year area: SVG containers */
.svg-card{padding:18px;border-radius:16px;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.06)}
.svg-card svg{width:100%;height:auto;display:block}
/* Chart SVG text defaults to the mono face — single source, so per-node
   font-family="JetBrains Mono" attributes on <text> are no longer needed
   (a CSS font-family beats an SVG presentation attribute). */
.svg-card svg text,.sect svg text,.sidebar .file-up svg text{font-family:var(--font-mono)}
/* HTMX in-flight feedback: the live DCF heatmap dims while it re-computes.
   The slider form carries hx-indicator="#dcf-heatmap" so this class lands on
   the swap target itself. */
#dcf-heatmap.htmx-request{opacity:.45;transition:opacity .15s}
.val-summary-card{overflow:visible}
.val-summary-card svg.val-summary-chart{overflow:visible}
.svg-card svg.radar-chart{max-width:min(100%,440px);margin:0 auto;overflow:visible}
.svg-card:has(.radar-chart){overflow:visible}
.svg-card h3{margin:0 0 12px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-label)}

/* Iberia PE — score composition card (pairs with radar in cols-2) */
.score-compose{flex:1}
.score-compose__body{
  flex:1;display:flex;flex-direction:column;gap:20px;min-height:min(420px,52vh);justify-content:space-between;
}
.score-compose__hero{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;padding:8px 0 4px;
}
.score-compose__total{
  font-family:var(--font-display);font-size:clamp(48px,8vw,64px);letter-spacing:-.03em;line-height:1;color:var(--ink);
}
.score-compose__of{font-family:var(--font-mono);font-size:12px;color:var(--ink-dim);letter-spacing:.06em}
.score-compose__sub{
  flex:1 0 100%;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-label);
}
.score-compose__stack{
  height:56px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);
  padding:6px;display:flex;align-items:center;
}
.score-compose__stack-fill{
  display:flex;height:100%;min-width:0;border-radius:6px;overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}
.score-compose__stack-fill .seg{display:block;height:100%;min-width:2px}
.score-compose__stack-fill .seg.t1{background:var(--pos)}
.score-compose__stack-fill .seg.t2{background:var(--accent)}
.score-compose__stack-fill .seg.t3{background:rgba(255,255,255,.35)}
.score-compose__tiers{
  list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px;flex:1;
}
.score-compose__tier{display:flex;flex-direction:column;gap:8px}
.score-compose__tier-head{
  display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:8px 10px;
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.04em;color:var(--ink-dim);
}
.score-compose__tier-head .dot{width:8px;height:8px;border-radius:50%}
.score-compose__tier-head .dot.t1{background:var(--pos);box-shadow:0 0 6px var(--pos)}
.score-compose__tier-head .dot.t2{background:var(--accent);box-shadow:0 0 6px rgba(var(--accent-rgb),.5)}
.score-compose__tier-head .dot.t3{background:rgba(255,255,255,.45)}
.score-compose__tier-head .name{color:var(--ink);font-weight:500}
.score-compose__tier-head .wt{color:var(--ink-label);font-size:9px;letter-spacing:.12em;text-transform:uppercase}
.score-compose__tier-head .pts{color:var(--ink);font-weight:600;text-align:right}
.score-compose__tier-bar{
  height:10px;border-radius:5px;background:rgba(255,255,255,.06);overflow:hidden;
}
.score-compose__tier-bar i{display:block;height:100%;border-radius:5px}
.score-compose__tier-bar i.t1{background:linear-gradient(90deg,var(--pos),#7ee0a8)}
.score-compose__tier-bar i.t2{background:linear-gradient(90deg,var(--accent),var(--accent-soft))}
.score-compose__tier-bar i.t3{background:linear-gradient(90deg,rgba(255,255,255,.35),rgba(255,255,255,.55))}
.score-compose__tier-raw{
  font-family:var(--font-mono);font-size:9px;letter-spacing:.1em;color:var(--ink-mute);text-transform:uppercase;
}

/* Mercado job polling card */
.job-pending{
  display:flex;flex-direction:column;align-items:center;gap:18px;padding:48px 40px;
  font-family:var(--font-sans);color:var(--ink-dim);
}
.job-pending .spinner{
  width:42px;height:42px;border:3px solid rgba(255,255,255,.08);border-top-color:var(--accent);
  border-radius:50%;animation:spin 1s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.job-pending .msg{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim)}
.job-pending .sub{font-family:var(--font-sans);font-size:13px;color:var(--ink-mute);max-width:380px;text-align:center;line-height:1.5}

/* count-up tabular-nums for number transitions after HTMX swaps */
[data-count-up]{font-variant-numeric:tabular-nums}

/* ============================================================
   Iberia <-> Mercado — staggered glass-card flip.
   The mode toggle's slider moves, the outgoing page's cards clear
   away (the topbar, background and orbs stay put — nothing "switches
   off"), then the incoming page reveals itself card by card: each
   .lg liquid-glass panel flips in on its own Y axis, one after the
   next. Each card is its own small GPU layer and the cascade is
   staggered, so only a handful animate at once — light in Chrome.
   transitions.js sets body.mode-switch-in on the incoming page,
   assigns each card a --lg-i index, adds body.mode-switch-play to
   fire the cascade, and clears both once it settles. Nothing here is
   suppressed-then-restored, so there is no end-of-transition flash.
   The cross-document View Transition is suppressed for this
   navigation (selector has NO space — the pseudo-element is on the
   root element itself).
   ============================================================ */
html.mode-switch-nav::view-transition-old(root),
html.mode-switch-nav::view-transition-new(root),
html.mode-switch-nav::view-transition-group(root){
  animation: none !important;
}

/* OUT — only the glass cards of the page being left clear away; the
   topbar, background and orbs stay put, so nothing "switches off". */
body.mode-switch-out .lg{
  animation: none;          /* drop any panelRise fill so the fade wins */
  opacity: 0;
  transform: scale(.97);
  transition: opacity 200ms ease-in, transform 200ms ease-in;
}
body.mode-switch-out .stage{ pointer-events: none; }

/* IN — incoming page. The background is present from the first frame
   (a gentle settle, never dark) — the cards are the whole reveal. */
body.mode-switch-in .orbs{ animation: ms-bg-fade 620ms ease both; }
@keyframes ms-bg-fade{ from{ opacity:.5 } to{ opacity:1 } }

/* Each glass card waits hidden until transitions.js has indexed it and
   added .mode-switch-play — then it flips in on its own Y axis, one
   after the next. */
body.mode-switch-in .lg{ opacity: 0; }
body.mode-switch-in .lg::before{ opacity: 0; }   /* glass off mid-flip */
@keyframes ms-card-flip{
  from{ transform: perspective(1500px) rotateY(-92deg); opacity:0; }
  58% { opacity:1; }
  to  { transform: perspective(1500px) rotateY(0);      opacity:1; }
}
body.mode-switch-play .lg{
  animation: ms-card-flip 600ms cubic-bezier(.2,.74,.28,1) both;
  animation-delay: calc(var(--lg-i, 0) * 85ms);
  transform-origin: 50% 50%;
  backface-visibility: hidden;
}
/* The glass (backdrop-filter on .lg::before) is held invisible via
   opacity while a card is mid-flip — a backdrop-filter under a 3D
   rotation artefacts in Chrome — then faded back per card, timed to
   land just after each card settles. Fading ::before opacity (not
   toggling the filter) means no abrupt full-screen restore at the
   end, so there is no end-of-transition flicker. */
body.mode-switch-play .lg::before{
  opacity: 1;
  transition: opacity 340ms ease;
  transition-delay: calc(var(--lg-i, 0) * 85ms + 470ms);
}

/* ============================================================
   AUTH — bubble morph (pill ↔ card), login/register forms,
   user-info card. Same liquid-glass vocabulary, Apple spring.
   ============================================================ */

/* The shared transition: pill in topbar morphs into the .auth-card
   on /auth. View Transitions API handles the position+size+radius
   interpolation automatically because both elements carry the same
   view-transition-name. The spring curve overshoots slightly to give
   the iOS-style bubble pop. */
/* Group: size + position interpolation with the iOS spring curve. */
::view-transition-group(auth-bubble){
  animation-duration: 700ms;
  animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 2;
}
::view-transition-old(auth-bubble),
::view-transition-new(auth-bubble){
  animation-duration: 700ms;
  animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
  mix-blend-mode: normal;
}

@keyframes authBubbleOut{ from{opacity:1} to{opacity:0} }
@keyframes authBubbleIn{  from{opacity:0} to{opacity:1} }

/* Back nav (auth → main): pill is round, so clip the group to a pill and
   cross-fade fast — keeps translucent snapshots from stacking into a
   brighter square while the size morph runs at the full 700 ms. */
html.auth-bubble-nav-back ::view-transition-group(auth-bubble){
  overflow: hidden;
  border-radius: 999px;
}
html.auth-bubble-nav-back ::view-transition-old(auth-bubble){
  animation: authBubbleOut 220ms ease-out both;
}
html.auth-bubble-nav-back ::view-transition-new(auth-bubble){
  animation: authBubbleIn 260ms 80ms ease-out both;
}
/* Pill ↔ auth card: only the bubble morphs — no full-page root fade or stage pageReveal. */
html.auth-bubble-nav ::view-transition-old(root),
html.auth-bubble-nav ::view-transition-new(root),
html.auth-bubble-nav ::view-transition-group(root){
  animation: none !important;
}
html.auth-bubble-nav .stage{
  animation: none !important;
  opacity: 1 !important;
}
html.auth-bubble-nav header.topbar{
  animation: none !important;
  opacity: 1 !important;
}
/* Safari / Firefox: no cross-doc VT — scale the card in without water. */
@keyframes authCardPop{
  from{opacity:0;transform:scale(.88)}
  to{opacity:1;transform:none}
}
html.auth-bubble-nav body.no-sidebar .auth-card{
  animation: authCardPop 700ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@media (prefers-reduced-motion: reduce){
  ::view-transition-old(auth-bubble),
  ::view-transition-new(auth-bubble),
  ::view-transition-group(auth-bubble){
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    animation-timing-function: linear !important;
  }
  html.auth-bubble-nav body.no-sidebar .auth-card{
    animation: none !important;
  }
}

.auth-card{
  view-transition-name: auth-bubble;
  position:relative;
  width:100%;max-width:480px;margin:0 auto;
  padding:34px 38px;border-radius:26px;
  display:flex;flex-direction:column;
}
.auth-card > .content{display:flex;flex-direction:column;gap:18px;width:100%;min-width:0;box-sizing:border-box}

.auth-header{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;margin-bottom:4px}
.auth-name{
  margin:0;font-family:var(--font-display);font-weight:400;
  font-size:clamp(26px,3.4vw,36px);letter-spacing:-.015em;line-height:1.05;color:var(--ink);
}
.auth-name em{font-style:italic;color:var(--accent)}
.auth-email{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.06em;color:var(--ink-dim)}

.auth-avatar{
  width:72px;height:72px;border-radius:50%;
  display:grid;place-items:center;
  background:linear-gradient(135deg, color-mix(in oklab, var(--accent) 70%, white 30%), var(--accent));
  font-family:var(--font-display);font-size:28px;letter-spacing:-.01em;color:var(--accent-ink);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 12px 30px -10px rgba(var(--accent-rgb),.6);
  margin-bottom:6px;
}
.auth-avatar-img{
  width:72px;height:72px;border-radius:50%;object-fit:cover;
  border:1px solid rgba(255,255,255,.15);
  box-shadow: 0 12px 30px -10px rgba(0,0,0,.6);
  margin-bottom:6px;
}

.auth-meta{
  display:flex;flex-direction:column;gap:0;
  padding:4px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
}
.auth-meta-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:10px 0;border-bottom:1px solid var(--rule);
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.04em;
}
.auth-meta-row:last-child{border-bottom:none}
.auth-meta-row .k{text-transform:uppercase;letter-spacing:.16em;font-size:10px}
.auth-meta-row .v{color:var(--ink);font-weight:500}

.auth-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:6px}

/* Google sign-in button — white pill with the brand colours intact */
.btn-google{
  all:unset;cursor:pointer;text-decoration:none;
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:12px 18px;border-radius:12px;
  background:#fff;color:#1a1a1a;
  font-family:var(--font-sans);font-size:13.5px;font-weight:500;
  box-shadow: 0 6px 20px -8px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.6);
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn-google:hover{transform:translateY(-1px);box-shadow: 0 10px 24px -8px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.7)}
.btn-google svg{flex:0 0 auto}

.auth-divider{
  display:flex;align-items:center;gap:10px;
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-mute);
}
.auth-divider::before,.auth-divider::after{
  content:"";flex:1;height:1px;background:var(--rule);
}

/* Tabs nav inside the auth card (login / register). Constrained so the
   buttons can never escape the rounded container — min-width:0 lets the
   grid items shrink, white-space:nowrap + overflow keep them clipped. */
.auth-tabs{
  display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);border-radius:12px;
  box-sizing:border-box;width:100%;
}
.auth-tab{
  all:unset;cursor:pointer;text-align:center;padding:8px 4px;border-radius:9px;
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-dim);transition:color .15s ease, background .15s ease;
  box-sizing:border-box;min-width:0;width:100%;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.auth-tab[aria-selected="true"]{
  color:var(--accent-ink);background:var(--accent);font-weight:700;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
}

.auth-form{display:flex;flex-direction:column;align-items:stretch;gap:14px;width:100%;min-width:0}
.auth-form[hidden]{display:none}
.auth-form .field{min-width:0;width:100%}
.auth-form .field input{
  display:block;width:100%;min-width:0;box-sizing:border-box;
}
/* Submit sits in .field--submit — same column width as email/password inputs. */
.auth-form .field--submit{gap:0;margin:0}
.auth-form .field--submit .auth-submit{
  all:unset;
  box-sizing:border-box;
  display:block;
  width:100%;
  min-width:0;
  cursor:pointer;
  text-align:center;
  font-family:var(--font-mono);
  font-size:13px;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:700;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid transparent;
  background:var(--accent);
  color:var(--accent-ink);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .15s ease, filter .15s ease;
}
.auth-form .field--submit .auth-submit:hover{
  transform:translateY(-1px);
  filter:brightness(1.05);
}

.flash{
  padding:10px 14px;border-radius:10px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;line-height:1.5;
  border:1px solid;
}
.flash-err{ background:rgba(255,84,112,.08);  color:#ffb1c0;  border-color:rgba(255,84,112,.3) }
.flash-ok{  background:rgba(61,220,154,.08);  color:#a8e6c3;  border-color:rgba(61,220,154,.3) }
.flash-info{ background:rgba(58,143,209,.08); color:#bcdbf2;  border-color:rgba(58,143,209,.3) }

/* PRINT (verbatim from MALLA-print.html) */
@media print {
  @page { size: A4 landscape; margin: 0.5cm; }
  html, body {
    background: #05070a !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .orbs { position: absolute !important; }
  .status, #tweaks { display: none !important; }
  .stage { padding: 16px 20px !important; max-width: 100% !important; }
  .topbar { margin-bottom: 24px !important; }
  .hero { margin-bottom: 28px !important; }
  .hero h1 { font-size: 68px !important; }
  .lg, .lg-pill {
    background: rgba(255,255,255,.06) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  .lg::before { display: none !important; }
}

/* ── P1 PE features (LBO scenarios · DCF tornado · peer dispersion · data-quality) ── */

/* DCF tornado — ranked diverging bars centred on the P50 anchor.
   The bars/labels are authored inline (SVG); this just gives the chart room
   to breathe and lets end-labels sit slightly outside the viewBox. */
.tornado-chart{width:100%;height:auto;display:block;overflow:visible}
.svg-card:has(.tornado-chart){overflow:visible}
.svg-card .tornado-chart + p{margin-top:8px}

/* LBO scenarios — bear / base / bull 3-column comparison */
.scn-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:4px;
}
.scn-col{
  display:flex;flex-direction:column;gap:10px;
  padding:16px 16px 14px;border-radius:16px;
  background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.06);
  border-left:2px solid var(--rule-2);
}
.scn-col--bear{background:rgba(255,84,112,.05);border-left-color:rgba(255,84,112,.5)}
.scn-col--base{background:rgba(var(--accent-rgb),.05);border-left-color:rgba(var(--accent-rgb),.5)}
.scn-col--bull{background:rgba(61,220,154,.05);border-left-color:rgba(61,220,154,.5)}
.scn-col__head{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding-bottom:10px;border-bottom:1px solid var(--rule);
}
.scn-col__name{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-label);
}
.scn-row{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
}
.scn-row--hero{margin:2px 0 4px}
.scn-k{
  font-family:var(--font-mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute);
}
.scn-v{
  font-family:var(--font-display);font-size:34px;line-height:1;letter-spacing:-.02em;color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.scn-v--sm{font-size:16px;letter-spacing:-.005em}

/* Scenario assumption / debt-schedule disclosures */
.scn-note{
  margin:14px 0 0;font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;line-height:1.7;color:var(--ink-mute);
}
.scn-details{
  margin-top:14px;border-top:1px solid var(--rule);padding-top:12px;
}
.scn-details summary{
  cursor:pointer;list-style:none;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim);
  padding:4px 0;transition:color .15s ease;
}
.scn-details summary::-webkit-details-marker{display:none}
.scn-details summary::before{content:"+\00a0\00a0";color:var(--ink-mute)}
.scn-details[open] summary::before{content:"\2212\00a0\00a0"}
.scn-details summary:hover{color:var(--accent)}

/* Compact mono assumption / schedule tables */
table.scn-table{
  width:100%;border-collapse:collapse;margin-top:12px;
  font-family:var(--font-mono);font-size:11.5px;font-variant-numeric:tabular-nums;
}
table.scn-table th{
  text-align:left;padding:8px 6px;
  font-family:var(--font-mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mute);font-weight:400;
  border-bottom:1px solid var(--rule-2);
}
table.scn-table td{padding:7px 6px;border-bottom:1px solid var(--rule);color:var(--ink)}
table.scn-table td.num{text-align:right;font-variant-numeric:tabular-nums}
table.scn-table td.scn-table__name{color:var(--ink-dim);text-align:left;font-family:var(--font-sans)}
table.scn-table--mini{font-size:10.5px}
table.scn-table--mini th,
table.scn-table--mini td{padding:5px 4px}

.scn-sched-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:12px;
}
.scn-sched{
  padding:12px 14px;border-radius:14px;
  background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.06);
}
.scn-sched__title{
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
}

/* LBO mode toggle — segmented two-option control (matches .chip pill aesthetic).
   The buttons carry only the bare `.chip` class, so they're fully styled here. */
.lbo-toggle{
  display:inline-flex;gap:4px;padding:4px;margin-bottom:18px;
  border-radius:999px;background:rgba(255,255,255,.03);border:1px solid var(--rule);
}
.lbo-toggle .chip{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  padding:7px 16px;border-radius:999px;color:var(--ink-dim);
  background:transparent;border:1px solid transparent;cursor:pointer;
  transition:color .15s ease,background .15s ease;
}
.lbo-toggle .chip:hover{color:var(--ink)}
.lbo-toggle .chip.on{
  color:var(--accent-ink);background:var(--accent);border-color:var(--accent);font-weight:700;
  box-shadow:0 0 14px rgba(var(--accent-rgb),.35);
}

/* Data-quality markers — (est.) superscript + footnote legend.
   The existing `.est` rule is scoped to table.lbtbl; this covers the
   standalone <sup class="est"> used across the PE tab + legend. */
sup.est,
.dq-legend .est{
  font-family:var(--font-mono);font-size:8.5px;letter-spacing:.04em;
  color:var(--ink-mute);margin-left:3px;cursor:help;vertical-align:super;
}
.dq-legend{
  margin:18px 0 0;padding-top:12px;border-top:1px solid var(--rule);
  font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;line-height:1.7;color:var(--ink-mute);
}
.dq-legend .est{margin-left:0;cursor:default}

/* Responsive: collapse the 3-col comparison + schedule grids on narrow screens */
@media (max-width:720px){
  .scn-grid,
  .scn-sched-grid{grid-template-columns:1fr}
  .scn-v{font-size:30px}
}

/* ===========================================================================
   Pipeline deal annotations (P2) — tag chips + notes preview + edit row on
   each kanban card, plus the centered HTMX edit modal. Token-based and
   mode-aware (uses --accent/--ink/--rule, no hard-coded surface colours).
   =========================================================================== */
.pl-anno{margin-top:9px;padding-top:9px;border-top:1px solid var(--rule)}
.pl-tags{display:flex;flex-wrap:wrap;gap:5px}
.badge.pl-tag{
  background:rgba(var(--accent-rgb),.14);color:var(--accent);
  border:1px solid rgba(var(--accent-rgb),.34);letter-spacing:.08em;
  text-transform:none;font-size:9px;padding:2px 7px;
}
.pl-note{
  font-family:var(--font-sans);font-size:11px;line-height:1.45;
  color:var(--ink-mute);font-style:italic;margin-top:7px;
}
.pl-edit-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:9px}
.pl-edit{
  font-family:var(--font-mono);font-size:9px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-mute);text-decoration:none;
  transition:color .15s ease;
}
.pl-edit:hover{color:var(--accent)}

/* Edit modal overlay */
.pl-modal-overlay{
  position:fixed;inset:0;z-index:1000;
  background:rgba(0,0,0,.62);backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;padding:24px;
}
.pl-modal-card{width:100%;max-width:520px;max-height:88vh;overflow-y:auto;padding:22px 24px}
.pl-modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px}
.pl-modal-kicker{
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-dim);margin-bottom:5px;
}
.pl-modal-title{
  margin:0;font-family:var(--font-display);font-weight:400;
  font-size:22px;letter-spacing:-.015em;color:var(--ink);line-height:1.15;
}
.pl-modal-x{
  all:unset;cursor:pointer;color:var(--ink-mute);font-size:16px;line-height:1;
  padding:4px 6px;border-radius:6px;flex-shrink:0;transition:color .15s ease;
}
.pl-modal-x:hover{color:var(--neg)}
.pl-modal-form{margin-top:4px}
.pl-modal-form--notes{margin-top:22px;padding-top:18px;border-top:1px solid var(--rule)}
.pl-modal-label{
  display:block;font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-dim);
}
.pl-modal-help{
  font-family:var(--font-mono);font-size:9px;letter-spacing:.06em;
  color:var(--ink-mute);margin:4px 0 8px;
}
.pl-modal-input,.pl-modal-textarea{
  width:100%;box-sizing:border-box;
  font-family:var(--font-mono);font-size:12.5px;color:var(--ink);
  background:rgba(0,0,0,.25);border:1px solid var(--rule-2);border-radius:8px;
  padding:9px 11px;outline:none;transition:border-color .15s ease,background .15s ease;
}
.pl-modal-textarea{resize:vertical;line-height:1.5;min-height:96px}
.pl-modal-input::placeholder,.pl-modal-textarea::placeholder{color:var(--ink-mute)}
.pl-modal-input:focus,.pl-modal-textarea:focus{border-color:var(--accent);background:rgba(255,255,255,.05)}
.pl-modal-actions{display:flex;justify-content:flex-end;margin-top:11px}
.lg-pill.pl-modal-save{
  cursor:pointer;color:var(--accent-ink);background:var(--accent);
  border:1px solid var(--accent);
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;font-weight:700;padding:8px 16px;
  box-shadow:0 8px 24px -12px rgba(var(--accent-rgb),.7),inset 0 1px 0 rgba(255,255,255,.3);
  transition:transform .18s ease;
}
.lg-pill.pl-modal-save:hover{transform:translateY(-1px)}

/* ── Pilot request form (logged-out conversion funnel /pilot) ── */
.pilot-card{max-width:760px;margin:0 auto}
.pilot-lead{font-family:var(--font-sans);font-size:14px;line-height:1.6;color:var(--ink-dim);margin:0 0 20px;max-width:60ch}
.pilot-form{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px}
.pf-field{display:flex;flex-direction:column;gap:6px}
.pf-field--wide{grid-column:1 / -1}
.pf-label{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-label)}
.pf-label i{color:var(--accent);font-style:normal}
.pf-label small{color:var(--ink-mute);letter-spacing:.06em}
.pilot-form input,.pilot-form textarea{font-family:var(--font-sans);font-size:14px;color:var(--ink);background:rgba(255,255,255,.04);border:1px solid var(--rule-2);border-radius:12px;padding:11px 13px;outline:none;transition:border-color .15s ease, background .15s ease}
.pilot-form input::placeholder,.pilot-form textarea::placeholder{color:var(--ink-mute)}
.pilot-form input:focus,.pilot-form textarea:focus{border-color:var(--accent);background:rgba(255,255,255,.06)}
.pilot-form textarea{resize:vertical;min-height:64px;line-height:1.5}
.pilot-actions{display:flex;gap:12px;align-items:center;margin-top:6px}
.pilot-fine{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;color:var(--ink-mute);margin-top:16px}
.pilot-fine a{color:var(--accent);text-decoration:none}
@media (max-width:640px){.pilot-form{grid-template-columns:1fr}}

/* ── Mi Watchlist (real analyses) — sidebar rows + analysis-page toggle ── */
/* Compact list inside the sidebar "Mi Watchlist" expander. Each row links to
   the pinned analysis; a hover-revealed "×" removes it via HTMX. */
.wl-mini{display:flex;flex-direction:column;gap:2px}
.wl-mini-row{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--rule)}
.wl-mini-row:last-child{border-bottom:none}
.wl-mini-link{display:flex;align-items:center;gap:7px;flex:1 1 auto;min-width:0;text-decoration:none;color:var(--ink)}
.wl-mini-link .nm{font-family:var(--font-display);font-size:13px;letter-spacing:-.005em;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wl-mini-link:hover .nm{color:var(--accent)}
.wl-mini-link .rt{font-family:var(--font-mono);font-size:8px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mute);white-space:nowrap;flex:0 0 auto}
.wl-mini-row .sc{font-family:var(--font-mono);font-size:11.5px;font-weight:500;color:var(--ink-dim);min-width:22px;text-align:right;flex:0 0 auto;font-variant-numeric:tabular-nums}
.wl-mini-row .sc.pos{color:var(--pos)}
.wl-mini-row .sc.neg{color:var(--neg)}
.wl-mini-row .sc.hold{color:var(--ink-dim)}
.wl-mini-x{flex:0 0 auto;border:none;background:transparent;cursor:pointer;color:var(--ink-mute);font-family:var(--font-sans);font-size:15px;line-height:1;padding:0 2px;opacity:.5;transition:color .15s ease,opacity .15s ease}
.wl-mini-x:hover{color:var(--neg);opacity:1}
/* Active state for the analysis-page "Añadir a watchlist" toggle. */
.lg-pill.is-watched{border-color:rgba(var(--accent-rgb),.5);color:var(--accent)}
.lg-pill.is-watched svg{fill:var(--accent);stroke:var(--accent)}

/* ── API company search (bring-your-own-key ingestion) ── */
.api-search h4{margin:0 0 8px}
.api-search__row{display:flex;gap:6px}
.api-search__by{flex:0 0 auto;border-radius:9px;border:1px solid var(--rule-2);background:rgba(0,0,0,.18);color:var(--ink);font-family:var(--font-mono);font-size:11px;padding:0 6px}
.api-search__input{flex:1 1 auto;min-width:0;border-radius:9px;border:1px solid var(--rule-2);background:rgba(0,0,0,.18);color:var(--ink);font-family:var(--font-sans);font-size:13px;padding:9px 11px;outline:none;transition:border-color .15s ease}
.api-search__input:focus{border-color:var(--accent)}
.api-results{margin-top:8px}
.api-hits{display:flex;flex-direction:column;gap:5px}
.api-hit{all:unset;cursor:pointer;display:flex;flex-direction:column;gap:2px;padding:8px 10px;border-radius:10px;border:1px solid var(--rule);background:rgba(255,255,255,.025);transition:border-color .15s ease, background .15s ease}
.api-hit:hover{border-color:rgba(var(--accent-rgb),.5);background:rgba(var(--accent-rgb),.06)}
.api-hit__name{font-family:var(--font-sans);font-size:12.5px;color:var(--ink);line-height:1.25}
.api-hit__meta{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.06em;color:var(--ink-mute)}
.api-demo{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.08em;color:var(--ink-mute);margin-bottom:6px}
.api-demo a,.api-empty a{color:var(--accent);text-decoration:none}
.api-empty{font-family:var(--font-sans);font-size:12px;color:var(--ink-dim);padding:6px 2px}
.api-hint{font-family:var(--font-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute);margin-top:4px}

/* ============================================================
   Accessibility — keyboard focus. The interactive buttons use
   `all:unset`, which also strips the UA focus ring, leaving no
   visible indication for keyboard users. Restore a token-based
   focus-visible outline across every all:unset control.
   ============================================================ */
.btn-primary:focus-visible,
.btn-ghost:focus-visible,
.auth-submit:focus-visible,
.auth-form .field--submit .auth-submit:focus-visible,
.auth-tab:focus-visible,
.tabs-nav button:focus-visible,
.lg-pill.report-dl:focus-visible,
.api-hit:focus-visible,
.pl-card button.del:focus-visible,
.pl-modal-x:focus-visible,
.lg-pill.pl-modal-save:focus-visible,
.btn-google:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;
}
/* Secondary (ghost) CTAs had no hover feedback at all. */
.btn-ghost:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.2)}

/* ============================================================
   VISUAL THEMES — html[data-theme="slate" | "midnight"]
   ------------------------------------------------------------
   Three curated dark terminal palettes. EMBER (the default) is
   :root itself — no attribute, no block, zero regression. A tiny
   pre-paint script in base.html <head> (before this stylesheet)
   sets document.documentElement.dataset.theme from
   localStorage('malla-theme'), so there is never a FOUC.

   COMPOSITION WITH body[data-mode="mercado"] (design decision):
   themes live on <html>; Modo Mercado declares --accent /
   --accent-rgb / --accent-ink / --accent-soft directly on <body>.
   A custom property declared ON an element always beats one
   inherited from its parent, so Mercado keeps its identity cobalt
   accent under every theme with ZERO extra selectors. Only two
   things need explicit html[data-theme] body[data-mode="mercado"]
   combos: the ambient `background` and `.orb.a` — both are plain
   (non-custom-property) declarations where these later theme
   rules would otherwise out-cascade Mercado's, killing its cool
   cobalt backdrop. The combos below re-assert the cobalt radial /
   orb over each theme's base gradient.

   Semantic financial tokens --pos / --neg / --warn are NEVER
   redefined by a theme. Ink ramps are re-tinted per theme and
   kept >= WCAG AA against the darkest background stop.
   ============================================================ */

/* ---------- SLATE — institutional cold monochrome ----------
   Grey-blue near-black field, steel/silver-blue accent
   (#7f9bb8 = 6.8:1 on #070a0e), desaturated orbs. The most
   sober of the three. */
html[data-theme="slate"]{
  --bg:#070a0e;
  --bg-2:#0b0f15;
  --ink:#e9edf2;        /* 15.7:1 */
  --ink-dim:#9aa5b1;    /*  7.6:1 */
  --ink-mute:#828d99;   /*  5.6:1 */
  --ink-label:#b3bdc9;  /*  9.8:1 */
  --accent:#7f9bb8;
  --accent-rgb:127,155,184;
  --accent-ink:#0a0e13; /* dark text on the steel accent: 6.6:1 */
  --accent-soft:#b9cde2;
}
html[data-theme="slate"] body{
  background:
    radial-gradient(1100px 700px at 82% -10%, rgba(127,155,184,.16), transparent 60%),
    radial-gradient(900px 600px at 10% 110%, rgba(70,88,120,.18), transparent 60%),
    radial-gradient(600px 400px at 50% 50%, rgba(150,170,190,.04), transparent 70%),
    linear-gradient(180deg, #070a0e 0%, #090d12 100%);
}
html[data-theme="slate"] .orb.a{background:#6d89a6}
html[data-theme="slate"] .orb.b{background:#3d4a6e}
html[data-theme="slate"] .orb.c{background:#51707c}
/* Mercado under Slate: cobalt radial + orb re-asserted (see header note) */
html[data-theme="slate"] body[data-mode="mercado"]{
  background:
    radial-gradient(1100px 700px at 82% -10%, rgba(58,143,209,.20), transparent 60%),
    radial-gradient(900px 600px at 10% 110%, rgba(70,88,120,.18), transparent 60%),
    linear-gradient(180deg, #070a0e 0%, #090d12 100%);
}
html[data-theme="slate"] body[data-mode="mercado"] .orb.a{background:#3a8fd1}

/* ---------- MIDNIGHT — deep navy + sea-teal ----------
   Navy field, teal accent from the existing orb.c family
   (#17c3ad = 9.4:1 on #04070f). Ink ramp cool-green tinted. */
html[data-theme="midnight"]{
  --bg:#04070f;
  --bg-2:#071019;
  --ink:#e8f0ed;        /* 16.3:1 */
  --ink-dim:#96a8a2;    /*  7.5:1 */
  --ink-mute:#7f918b;   /*  5.7:1 */
  --ink-label:#aec1bb;  /*  9.9:1 */
  --accent:#17c3ad;
  --accent-rgb:23,195,173;
  --accent-ink:#04110e; /* dark text on teal: 8.7:1 */
  --accent-soft:#7de3d2;
}
html[data-theme="midnight"] body{
  background:
    radial-gradient(1100px 700px at 82% -10%, rgba(20,180,160,.18), transparent 60%),
    radial-gradient(900px 600px at 10% 110%, rgba(40,80,190,.18), transparent 60%),
    radial-gradient(600px 400px at 50% 50%, rgba(20,120,180,.05), transparent 70%),
    linear-gradient(180deg, #04070f 0%, #06101a 100%);
}
html[data-theme="midnight"] .orb.a{background:#14b4a0}
html[data-theme="midnight"] .orb.b{background:#2a4fc8}
html[data-theme="midnight"] .orb.c{background:#1b7fae}
/* Mercado under Midnight: cobalt radial + orb re-asserted */
html[data-theme="midnight"] body[data-mode="mercado"]{
  background:
    radial-gradient(1100px 700px at 82% -10%, rgba(58,143,209,.22), transparent 60%),
    radial-gradient(900px 600px at 10% 110%, rgba(20,180,160,.12), transparent 60%),
    linear-gradient(180deg, #04070f 0%, #06101a 100%);
}
html[data-theme="midnight"] body[data-mode="mercado"] .orb.a{background:#3a8fd1}

/* ============================================================
   PROFILE DROPDOWN — liquid-glass menu under the topbar user
   pill. Same bubble physics as the auth morph (Apple spring,
   cubic-bezier(.34,1.56,.64,1)); token-only colours.
   ============================================================ */
/* The pill is now a <button> when logged in — neutralise UA styles;
   .lg-pill + .topbar .user provide the visual skin. */
.topbar button.user{
  appearance:none;-webkit-appearance:none;margin:0;text-align:left;
  font:inherit;color:inherit;
}
.topbar .user .caret{
  width:10px;height:6px;flex:0 0 auto;color:var(--ink-dim);margin-right:6px;
  transition:transform .35s cubic-bezier(.34,1.56,.64,1), color .2s ease;
}
.topbar .user[aria-expanded="true"] .caret{transform:rotate(180deg);color:var(--accent)}

/* Topbar must stack above the sticky sidebar + main content so the open
   dropdown is never painted under the glass panels below. */
.topbar{position:relative;z-index:70}
.user-menu{position:relative;flex:0 0 auto}

.user-dropdown{
  position:absolute;top:calc(100% + 12px);right:0;z-index:75;
  min-width:276px;border-radius:22px;
  transform-origin:top right;
  /* Denser glass than the ambient .lg cards — a floating menu needs more
     opacity to stay legible over busy report content. --bg-2 keeps the
     surface tinted per theme (Ember/Slate/Midnight). */
  background:color-mix(in srgb, var(--bg-2) 72%, transparent);
}
.user-dropdown::before{
  backdrop-filter:blur(24px) saturate(150%);
  -webkit-backdrop-filter:blur(24px) saturate(150%);
}
.user-dropdown[hidden]{display:none}
.user-dropdown > .content{padding:10px;display:flex;flex-direction:column;gap:2px}

@keyframes umPop{
  from{opacity:0;transform:translateY(-6px) scale(.88)}
  to{opacity:1;transform:none}
}
@keyframes umClose{
  from{opacity:1;transform:none}
  to{opacity:0;transform:translateY(-4px) scale(.96)}
}
.user-dropdown.um-open{animation:umPop 460ms cubic-bezier(.34,1.56,.64,1) both}
.user-dropdown.um-closing{animation:umClose 160ms cubic-bezier(.4,0,.2,1) both}

.um-item{
  display:flex;align-items:center;gap:11px;width:100%;box-sizing:border-box;
  margin:0;padding:10px 12px;border:0;border-radius:12px;
  background:transparent;text-decoration:none;text-align:left;cursor:pointer;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-dim);
  transition:background .18s ease, color .18s ease,
             transform .25s cubic-bezier(.34,1.56,.64,1);
}
.um-item svg{width:15px;height:15px;flex:0 0 auto;opacity:.8}
.um-item:hover{background:rgba(255,255,255,.07);color:var(--ink)}
.um-item:active{transform:scale(.97)}
.um-item .um-note{
  margin-left:auto;font-size:8.5px;letter-spacing:.08em;text-transform:none;
  color:var(--ink-mute);
}
.um-item:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.um-logout:hover{background:rgba(255,84,112,.09);color:var(--neg)}
.um-logout-form{margin:0;display:flex}
.um-sep{height:1px;background:var(--rule-2);margin:6px 6px}

/* Inline theme picker — same contract as /my/settings (localStorage
   'malla-theme' + html[data-theme]); the dots are hard-coded because each
   swatch must show the theme it represents, not the active one. */
.um-theme{display:flex;flex-direction:column;gap:8px;padding:6px 12px 8px}
.um-theme-lbl{
  font-family:var(--font-mono);font-size:9px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-mute);
}
.um-theme-opts{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.um-theme-opt{
  appearance:none;-webkit-appearance:none;box-sizing:border-box;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  margin:0;padding:9px 4px 7px;border-radius:11px;
  background:rgba(255,255,255,.03);border:1px solid var(--rule-2);
  font-family:var(--font-mono);font-size:8.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-dim);
  transition:border-color .18s ease, color .18s ease, box-shadow .18s ease,
             transform .25s cubic-bezier(.34,1.56,.64,1);
}
.um-theme-opt:hover{transform:translateY(-1px);color:var(--ink);border-color:rgba(255,255,255,.22)}
.um-theme-opt:active{transform:scale(.94)}
.um-theme-opt:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.um-theme-opt[aria-checked="true"]{
  border-color:var(--accent);color:var(--ink);
  box-shadow:0 0 0 1px var(--accent), 0 8px 20px -12px rgba(var(--accent-rgb),.6);
}
.um-dot{width:10px;height:10px;border-radius:50%}
.um-dot--ember{background:#ff5c1a;box-shadow:0 0 8px rgba(255,92,26,.7)}
.um-dot--slate{background:#7f9bb8;box-shadow:0 0 8px rgba(127,155,184,.7)}
.um-dot--midnight{background:#17c3ad;box-shadow:0 0 8px rgba(23,195,173,.7)}

/* Narrow viewports: keep the panel inside the screen — the pill sits at the
   stage's right padding, so cap the width to the visible area. */
@media (max-width:480px){
  .user-dropdown{min-width:min(276px, calc(100vw - 32px))}
}
/* Phones: the brand's min-content (~322px) used to push the user pill clean
   off-screen (pre-existing — the topbar never wrapped). Let it wrap: brand on
   row 1, pill right-aligned on row 2, so login/profile is always reachable. */
@media (max-width:560px){
  .topbar{flex-wrap:wrap}
  .topbar .user-menu,
  .topbar > a.user{margin-left:auto}
}

/* ============================================================
   PAGE-NAV — main-only cross-document View Transition for the
   internal navigation (topnav + sidebar + dropdown links).
   html.page-nav is armed on click (transitions.js) and re-added
   pre-paint on the incoming page (base.html), so both VT
   snapshots name <main>; topbar/sidebar stay static because the
   root snapshots don't animate at all. Browsers without the API
   simply navigate (the class is never armed there).
   ============================================================ */
html.page-nav .main{view-transition-name:main-pane}
@keyframes mainPaneOut{
  from{opacity:1;transform:none}
  to{opacity:0;transform:translateY(-10px) scale(.995)}
}
@keyframes mainPaneIn{
  from{opacity:0;transform:translateY(14px) scale(.992)}
  to{opacity:1;transform:none}
}
::view-transition-group(main-pane){
  animation-duration:420ms;
  animation-timing-function:cubic-bezier(.2,.7,.2,1);
}
html.page-nav ::view-transition-old(main-pane){
  animation:mainPaneOut 240ms cubic-bezier(.4,0,.2,1) both;
}
html.page-nav ::view-transition-new(main-pane){
  animation:mainPaneIn 420ms 80ms cubic-bezier(.16,1,.3,1) both;
}
/* Chrome-static: no root fade, no stage/panel re-reveal. */
html.page-nav ::view-transition-old(root),
html.page-nav ::view-transition-new(root),
html.page-nav ::view-transition-group(root){
  animation:none !important;
}
html.page-nav .stage{animation:none !important;opacity:1 !important}
html.page-nav header.topbar{animation:none !important;opacity:1 !important}

/* ============================================================
   LIQUID MICRO-INTERACTIONS — bubble physics on the key
   interactive controls (spring scale + stronger specular on
   hover). Purely decorative: no layout or data changes.
   ============================================================ */
.btn-primary{
  transition:transform .28s cubic-bezier(.34,1.56,.64,1),
             box-shadow .28s ease;
}
.btn-primary:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 34px -10px rgba(var(--accent-rgb),.8),
             inset 0 1px 0 rgba(255,255,255,.55);
}
.btn-primary:active{transform:translateY(0) scale(.965);transition-duration:.12s}
.btn-primary:disabled{transform:none}
.btn-ghost{
  transition:background .18s ease, border-color .18s ease,
             transform .28s cubic-bezier(.34,1.56,.64,1);
}
.btn-ghost:active{transform:scale(.965);transition-duration:.12s}
.lb .head .chip{
  transition:color .15s ease, background .15s ease, border-color .15s ease,
             transform .25s cubic-bezier(.34,1.56,.64,1);
}
.lb .head .chip:hover{color:var(--ink);transform:translateY(-1px)}
.lb .head .chip.on:hover{color:var(--accent-ink)}
.lb .head .chip:active{transform:scale(.94)}
.lbo-toggle .chip{
  transition:color .15s ease, background .15s ease,
             transform .25s cubic-bezier(.34,1.56,.64,1);
}
.lbo-toggle .chip:active{transform:scale(.94)}
.tabs-nav button{
  transition:color .15s ease, background .15s ease,
             transform .25s cubic-bezier(.34,1.56,.64,1);
}
.tabs-nav button:active{transform:scale(.95)}

/* Reduced motion: every new transition/animation collapses to instant. */
@media (prefers-reduced-motion: reduce){
  .user-dropdown.um-open,
  .user-dropdown.um-closing{animation:none !important}
  .topbar .user .caret{transition:none}
  .um-item,.um-theme-opt,
  .btn-primary,.btn-ghost,
  .lb .head .chip,.lbo-toggle .chip,
  .tabs-nav button{transition:none !important}
  .um-item:active,.um-theme-opt:active,
  .btn-primary:active,.btn-ghost:active,
  .lb .head .chip:active,.lbo-toggle .chip:active,
  .tabs-nav button:active{transform:none !important}
  html.page-nav ::view-transition-old(main-pane),
  html.page-nav ::view-transition-new(main-pane),
  ::view-transition-group(main-pane){
    animation-duration:1ms !important;
    animation-delay:0ms !important;
  }
}

/* ============================================================
   DASHBOARD v2 (WP-C) — logged-in Iberia cockpit.
   Quick actions, actionable KPIs (cols-4), pipeline block,
   watchlist score-delta chips, demoted lower row, plan strip,
   sidebar anchor flash. Token-only; spring easing matches the
   liquid micro-interactions (cubic-bezier(.34,1.56,.64,1)).
   ============================================================ */

/* --- quick actions row (hero) --- */
.qa-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:20px 0 22px}
.qa{
  display:flex;flex-direction:column;gap:7px;min-width:0;
  padding:13px 14px;border-radius:14px;text-decoration:none;
  background:rgba(255,255,255,.035);border:1px solid var(--rule-2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
  transition:transform .28s cubic-bezier(.34,1.56,.64,1),
             background .18s ease, border-color .18s ease;
}
.qa:hover{
  transform:translateY(-2px);background:rgba(255,255,255,.06);
  border-color:rgba(var(--accent-rgb),.45);
}
.qa:active{transform:scale(.97);transition-duration:.12s}
.qa:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.qa svg{width:16px;height:16px;flex:0 0 auto;color:var(--accent)}
.qa .t{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink);font-weight:500;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.qa .s{font-family:var(--font-sans);font-size:11px;color:var(--ink-mute);line-height:1.4}

/* --- KPI strip: cols-4 sits flush at the hero foot --- */
.hero .stats.cols-4{grid-template-columns:repeat(4,1fr)}
.dash-hero .stats{margin-bottom:0}
.dash-hero .stats .v{white-space:nowrap}

/* --- plan / trial strip (only rendered when plan_summary has data) --- */
.plan-strip{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-top:16px;padding-top:14px;border-top:1px solid var(--rule);
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;
  color:var(--ink-dim);
}
.plan-strip b{color:var(--ink);font-weight:500}
.plan-strip b.days{color:var(--warn)}
.plan-strip .ps-dot{width:6px;height:6px;border-radius:50%;flex:0 0 auto}
.plan-strip .ps-dot.warn{background:var(--warn);box-shadow:0 0 10px var(--warn)}
.plan-strip .ps-dot.ok{background:var(--pos);box-shadow:0 0 10px var(--pos)}
.plan-strip a{
  margin-left:auto;color:var(--accent);text-decoration:none;
  font-size:10px;letter-spacing:.12em;text-transform:uppercase;
}
.plan-strip a:hover{text-decoration:underline}

/* --- deals / pipeline block --- */
.deals{padding:26px 30px;border-radius:26px}
.deals .dp-head{
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:12px;flex-wrap:wrap;margin-bottom:16px;
}
.deals h2{margin:0;font-family:var(--font-display);font-weight:400;font-size:26px;letter-spacing:-.015em}
.deals h2 em{font-style:italic;color:var(--accent)}
.deals .desc{margin:6px 0 0;font-family:var(--font-sans);font-size:12.5px;color:var(--ink-dim);line-height:1.5;max-width:540px}
.dp-link{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--accent);text-decoration:none;
}
.dp-link:hover{text-decoration:underline}

.dp-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.dp-chip{
  display:inline-flex;align-items:center;gap:8px;padding:6px 12px;
  border-radius:999px;background:rgba(255,255,255,.04);
  border:1px solid var(--rule-2);text-decoration:none;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-dim);
  transition:transform .25s cubic-bezier(.34,1.56,.64,1), border-color .18s ease;
}
.dp-chip:hover{transform:translateY(-1px);border-color:rgba(var(--accent-rgb),.4)}
.dp-chip b{color:var(--ink);font-weight:500}
.dp-chip .d{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.35);flex:0 0 auto}
.dp-chip.sourced .d{background:var(--ink-mute)}
.dp-chip.reviewing .d{background:var(--accent);box-shadow:0 0 8px var(--accent)}
.dp-chip.ic .d{background:var(--pos);box-shadow:0 0 8px var(--pos)}
.dp-chip.passed .d{background:rgba(255,255,255,.22)}
.dp-chip.zero{opacity:.55}

/* compact deal list — div grid (rows can be anchors, unlike table rows) */
.deals{--dp-grid:minmax(0,1fr) 118px 56px 104px}
.dp-cols{
  display:grid;grid-template-columns:var(--dp-grid);gap:12px;
  padding:8px 0;border-bottom:1px solid var(--rule-2);
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-mute);
}
.dp-cols .sc,.dp-cols .ago{text-align:right}
.dp-row{
  display:grid;grid-template-columns:var(--dp-grid);gap:12px;align-items:center;
  padding:10px 0;border-bottom:1px solid var(--rule);
  text-decoration:none;color:inherit;min-width:0;
}
.dp-row:last-of-type{border-bottom:none}
a.dp-row{transition:background .12s ease}
a.dp-row:hover{background:rgba(255,255,255,.035)}
a.dp-row:hover .nm{color:var(--accent)}
.dp-row .co{min-width:0;display:flex;flex-direction:column;gap:2px}
.dp-row .nm{
  font-family:var(--font-display);font-size:15px;color:var(--ink);
  letter-spacing:-.005em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:color .15s ease;
}
.dp-row .sec{
  font-family:var(--font-mono);font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-mute);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.dp-stage{
  display:inline-block;padding:3px 9px;border-radius:999px;white-space:nowrap;
  font-family:var(--font-mono);font-size:8.5px;letter-spacing:.12em;
  text-transform:uppercase;font-weight:700;
  background:rgba(255,255,255,.05);color:var(--ink-dim);
  border:1px solid var(--rule-2);
}
.dp-stage.reviewing{background:rgba(var(--accent-rgb),.12);color:var(--accent);border-color:rgba(var(--accent-rgb),.35)}
.dp-stage.ic{background:rgba(61,220,154,.12);color:var(--pos);border-color:rgba(61,220,154,.3)}
.dp-stage.passed{opacity:.6}
.dp-row .sc{
  font-family:var(--font-mono);font-size:12.5px;font-weight:500;color:var(--ink);
  text-align:right;font-variant-numeric:tabular-nums;
}
.dp-row .ago{
  font-family:var(--font-mono);font-size:10px;color:var(--ink-mute);
  text-align:right;letter-spacing:.04em;white-space:nowrap;
}
.dp-more{
  font-family:var(--font-mono);font-size:10px;color:var(--ink-mute);
  letter-spacing:.1em;text-align:right;margin-top:8px;
}
.dp-empty{text-align:center;padding:30px 20px;font-family:var(--font-sans)}
.dp-empty .t{font-family:var(--font-display);font-size:19px;color:var(--ink);margin-bottom:8px;letter-spacing:-.01em}
.dp-empty .s{font-size:12.5px;color:var(--ink-dim);line-height:1.55;max-width:460px;margin:0 auto 16px}
.dp-empty .btn-primary{display:inline-block;text-decoration:none}

/* --- demoted lower row (watchlist + activity + distribution) --- */
.dash-lower{padding:22px 26px;border-radius:26px}
.dl-grid{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:18px}

/* watchlist score-delta chip (re-analysis) — 5-column row variant */
.wl-row.has-dlt{grid-template-columns:64px 1fr auto auto auto}
/* long private-company names used to wrap 3-4 lines inside the card; the row
   links to the full analysis, so truncate instead of ballooning the row */
.dash-lower .wl-row .n{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wl-dlt{
  font-family:var(--font-mono);font-size:10px;font-weight:600;
  padding:2px 6px;border-radius:6px;white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.wl-dlt.pos{color:var(--pos);background:rgba(61,220,154,.12)}
.wl-dlt.neg{color:var(--neg);background:rgba(255,84,112,.12)}

/* --- quick-action anchor targets: offset under the sticky chrome +
       temporary spring highlight (class toggled by transitions.js) --- */
#sabi-form,#api-search,#batch-screening{scroll-margin-top:96px}
.anchor-flash{
  border-radius:14px;
  animation:anchorFlash 1.6s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes anchorFlash{
  0%{box-shadow:0 0 0 0 rgba(var(--accent-rgb),0)}
  18%{box-shadow:0 0 0 3px rgba(var(--accent-rgb),.55), 0 0 26px rgba(var(--accent-rgb),.35)}
  100%{box-shadow:0 0 0 0 rgba(var(--accent-rgb),0)}
}

/* --- responsive --- */
@media (max-width:1280px){
  .dl-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:1100px){
  .qa-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero .stats.cols-4{grid-template-columns:repeat(2,1fr);gap:14px 0}
  .hero .stats.cols-4 .c:nth-child(2n){border-right:none;padding-right:0}
  .hero .stats.cols-4 .c:nth-child(2n+1){padding-left:0}
}
@media (max-width:760px){
  .dl-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .deals{--dp-grid:minmax(0,1fr) 100px 44px}
  .dp-cols .ago,.dp-row .ago{display:none}
  .deals{padding:22px 20px}
  .dash-lower{padding:18px 18px}
}
@media (max-width:420px){
  .qa .s{display:none}
  /* full label beats a truncated one on narrow tiles */
  .qa .t{white-space:normal;overflow:visible;line-height:1.35}
}
@media (prefers-reduced-motion: reduce){
  .qa,.dp-chip{transition:none !important}
  .qa:hover,.qa:active,.dp-chip:hover{transform:none !important}
  .anchor-flash{animation:none !important}
}