/* ============================================================================
   RoI² — main.css · Design system foundation (Signal System v1.1)
   Faza 0 UI V2. Tokens reconciliate cu brandbook-ul (autoritar):
   radius 12/8px · shadow:none (ierarhie din suprafețe) · space-unit 4px · surface-2.
   Scară tipo 1.25 · un singur accent verde · contraste WCAG 2.2 AA calculate.
   Preview: fonturi CDN. Producție: self-hosted WOFF2 + preload.
   ============================================================================ */

:root {
  /* ── Culori (dark-first, default) ── */
  --roi-bg:        #0A0E14;  /* carbon — fundal */
  --roi-surface:   #141A23;  /* panel — carduri */
  --roi-surface-2: #1E2630;  /* panel-2 — borduri, gridlines */
  --roi-accent:    #3DE8A0;  /* verde-semnal — mediană/pozitiv/acțiune/² (12.2:1 AAA) */
  --roi-text:      #F2F5F7;  /* alb-rece (17.7:1 AAA) */
  --roi-text-muted:#8A93A6;  /* neutru — secundar/serie (6.3:1 AA) */
  --roi-negative:  #FF5C5C;  /* roșu — risc/negativ (6.4:1, niciodată singur) */
  --roi-estimated: #E0B14C;  /* auriu — estimat/neoficial/fallback (9.7:1 AAA) */
  --roi-on-accent: var(--roi-bg); /* text pe buton accent = carbon (12.2:1) */

  /* ── Tipografie — scară modulară 1.25, bază 16px ── */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;
  --fs-caption: 0.8rem;     /* 12.8px */
  --fs-body:    1rem;       /* 16px */
  --fs-lead:    1.25rem;    /* 20px */
  --fs-h3:      1.5625rem;  /* 25px */
  --fs-h2:      1.953rem;   /* 31px */
  --fs-h1:      2.441rem;   /* 39px */
  --fs-display: clamp(2.441rem, 5vw + 1rem, 3.815rem);
  --lh-body: 1.6;
  --lh-tight: 1.15;

  /* ── Spațiu — unit 4px, scară 8-16-24-32-48-64 ── */
  --space-unit: 4px;
  --space-1: 8px;  --space-2: 16px; --space-3: 24px;
  --space-4: 32px; --space-5: 48px; --space-6: 64px;

  /* ── Radius (brandbook) — fără umbre ── */
  --radius-card: 12px;
  --radius-control: 8px;
  --radius-pill: 999px;
  --border-subtle: 1px solid var(--roi-surface-2);

  /* ── Motion (set discret) ── */
  --transition-fast: 120ms ease-out;
  --transition-base: 200ms ease-out;
  --reveal: 600ms cubic-bezier(.22, 1, .36, 1);

  /* ── Layout ── */
  --measure: 66ch;
  --margin-inline: clamp(1rem, 6vw, 6rem);
  /* SURSĂ UNICĂ de lățime a shell-ului: header-inner + foot-inner + .page o folosesc
     toate → imposibil să diverge (lecția „3 lățimi diferite"). `.page--wide` o override-ază
     local pentru pagini care chiar cer mai mult. Schimbi AICI = se schimbă peste tot. */
  --page-max: 1100px;
  /* Coloană de LECTURĂ (feed M1, console admin M9): ~66ch Inter body. Plafon pe CONȚINUT,
     NU pe container → conținutul rămâne flush-left pe spina shell-ului (aliniat cu logo/footer/
     paginile late), nu centrat. Unifică fostele 720 (m1) / 760 (m9) — 40px irelevanți. */
  --col-read: 720px;
}

/* Signal System e DARK-FIRST (brandbook v1.1): produsul `app.roi2.ro` e Carbon,
 * NEcondiționat de tema OS. NU adaptăm la `prefers-color-scheme` — identitatea e dark.
 * (Tema light, cu accentul închis #169A66, e rezervată domeniului EDITORIAL
 * returnonintelligence.ro / Fraunces, scoped acolo — nu un override global pe OS.) */
:root { --roi-accent-text: var(--roi-accent); } /* accentul e ok ca text pe dark */

/* ── Pagină app: shell canonic + slots (consecvență cross-pagini) ──
   Container unic .page (1100px; heatmap .page--wide 1240px). Bara de context
   (.page-bar: breadcrumb/back-link) deasupra titlului. Header .page-head cu
   eyebrow/title/lede. Banda de disclaimer §6 (.data-disclaimer) DOAR pe paginile
   cu date agregate. Footer-ul global .roi-foot rămâne separat (atribuire CC-BY). */
.page { max-width: var(--page-max, 1100px); margin-inline: auto;
  padding: var(--space-3) var(--space-2) var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-3); }
@media (min-width: 768px) { .page { padding-inline: var(--space-3); gap: var(--space-4); } }
.page--wide { --page-max: 1240px; }
/* Coloană de lectură ALINIATĂ la spină: `.page` rămâne rama shell-ului (1100px, centrată), dar
   copiii direcți se plafonează la `--col-read` și rămân FLUSH-LEFT (fără margin:auto) → marginea
   stângă a conținutului = identică pe toate paginile (late și înguste). `.bleed` = opt-out pt rânduri
   full-frame. Mobile-first: `--col-read` (720px) > orice viewport ≤768 → plafonul mușcă doar pe desktop. */
.page--read > * { max-width: var(--col-read); }
.page--read > .bleed { max-width: none; }
/* Breadcrumb unitar (partial breadcrumb.html): „‹ părinte / curent" */
.page-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-family: var(--font-mono);
  font-size: var(--fs-caption); color: var(--roi-text-muted); margin-bottom: var(--space-3); }
.page-bar-parent { color: var(--roi-text-muted); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.page-bar-parent:hover { color: var(--roi-accent); }
.page-bar-back { font-size: 1.1em; line-height: 1; }
.page-bar-sep { opacity: .45; }
.page-bar-cur { color: var(--roi-text); }
.page-head { margin-bottom: var(--space-4); }
.page-eyebrow { font-family: var(--font-mono); font-size: var(--fs-caption); letter-spacing: .04em;
  color: var(--roi-accent-text); text-transform: uppercase; margin-bottom: var(--space-1); }
.page-title { font-size: var(--fs-h1); margin-bottom: var(--space-2); }
.page-lede { color: var(--roi-text-muted); max-width: var(--measure); }
.page-lede b { color: var(--roi-text); font-weight: 600; }
/* banda §6 .data-disclaimer scoasă — redundantă cu footer-ul (atribuire + agregate ≥10) */

/* ── Fundal grilă global (V2 Spatial) — montat în base.html pe paginile app.
   Mutat aici din m3.css ca să apară pe toate paginile autentificate. ── */
.depth { position: fixed; inset: 0; z-index: -3; pointer-events: none;
  background:
    radial-gradient(130% 80% at 50% 120%, rgba(61,232,160,.06), transparent 55%),
    radial-gradient(90% 60% at 12% -10%, rgba(224,177,76,.045), transparent 60%),
    radial-gradient(100% 70% at 90% 0%, rgba(61,232,160,.035), transparent 55%); }
.grid-layer { position: fixed; inset: -10%; z-index: -2; pointer-events: none; opacity: .5;
  background-image: linear-gradient(rgba(242,245,247,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(242,245,247,.035) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(80% 80% at 50% 50%, #000 30%, transparent 85%);
          mask-image: radial-gradient(80% 80% at 50% 50%, #000 30%, transparent 85%); }

/* ── Reset + base ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
/* Atributul HTML `hidden` trebuie să învingă orice `display` de componentă
   (altfel un `display:flex` pe clasă suprascrie UA `[hidden]{display:none}` și
   elementul „ascuns" rămâne vizibil). Regulă de fundație. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--roi-bg);
  color: var(--roi-text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-weight: 425;
}
a { color: var(--roi-accent-text); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--roi-accent); outline-offset: 3px; border-radius: 2px; }

/* ── Tipografie ── */
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: var(--lh-tight); }
.fs-h1 { font-size: var(--fs-h1); }
.fs-h2 { font-size: var(--fs-h2); }
.fs-h3 { font-size: var(--fs-h3); }
.fs-lead { font-size: var(--fs-lead); }
.fs-caption { font-size: var(--fs-caption); color: var(--roi-text-muted); }
.measure { max-width: var(--measure); }
/* TOATE cifrele: mono tabular, nu „dansează" la update */
.mono, .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums lining-nums; }

/* ── Butoane ── */
.btn { font-family: var(--font-display); font-weight: 700; font-size: 1rem;
  display: inline-flex; align-items: center; gap: var(--space-1);
  min-height: 48px; padding: 0 var(--space-3); border-radius: var(--radius-control);
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: transform var(--transition-fast), background var(--transition-fast);
  -webkit-tap-highlight-color: transparent; user-select: none; }
.btn:hover { transform: translateY(-1px); }
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.btn--primary { background: var(--roi-accent); color: var(--roi-on-accent); }
.btn--ghost { background: transparent; color: var(--roi-text); border-color: var(--roi-surface-2); }
.btn--ghost:hover { background: var(--roi-surface); }
/* variantă compactă oficială (touch ≥44px păstrat) */
.btn--sm { min-height: 44px; padding: 0 var(--space-2); font-size: var(--fs-caption); }

/* ── Card / panel (ierarhie din suprafață, fără umbră) ── */
.card, .panel {
  background: var(--roi-surface); border: var(--border-subtle);
  border-radius: var(--radius-card); padding: var(--space-3);
}

/* ── Badge ── */
.badge { display: inline-flex; align-items: center; gap: var(--space-1);
  font-size: var(--fs-caption); letter-spacing: .04em;
  padding: 4px 10px; border-radius: var(--radius-pill);
  background: var(--roi-surface); border: var(--border-subtle); color: var(--roi-text-muted); }
.badge--estimated { color: var(--roi-estimated); border-color: var(--roi-estimated); }
.badge--risk { color: var(--roi-negative); border-color: var(--roi-negative); }
.badge--accent { color: var(--roi-accent-text); border-color: var(--roi-accent); }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ── Tabel numeric ── */
.data-table { width: 100%; border-collapse: collapse; }
.data-table th, .data-table td { padding: var(--space-1) var(--space-2); text-align: left;
  border-bottom: var(--border-subtle); }
.data-table th { font-weight: 650; color: var(--roi-text-muted); font-size: var(--fs-caption); }
.data-table td.num, .data-table th.num { text-align: right;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums lining-nums; }

/* ── Verdict line („cifra întâi, verdictul imediat") ── */
.verdict-line { font-family: var(--font-display); font-size: var(--fs-h2); line-height: var(--lh-tight);
  max-width: var(--measure); }
.verdict-line .pct { color: var(--roi-accent-text); }

/* ── Provenance ribbon (trust) ── */
.provenance-ribbon { display: flex; flex-wrap: wrap; gap: var(--space-3);
  font-size: var(--fs-caption); color: var(--roi-text-muted);
  padding: var(--space-2); border-top: var(--border-subtle); }
.provenance-ribbon strong { color: var(--roi-text); font-family: var(--font-mono);
  font-variant-numeric: tabular-nums; font-weight: 500; }

/* ── Qualifier strip (fallback ierarhic — auriu) ── */
.qualifier-strip { border-left: 3px solid var(--roi-estimated);
  background: var(--roi-surface); padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-control); color: var(--roi-text);
  display: flex; gap: var(--space-2); align-items: flex-start; }
.qualifier-strip .icon { color: var(--roi-estimated); flex-shrink: 0; }

/* ── X-Ray dock / dimensiune blocată ── */
.xray-grid { display: grid; gap: var(--space-2); grid-template-columns: 1fr; }
@media (min-width: 1024px) { .xray-grid { grid-template-columns: repeat(3, 1fr); } }
.locked-dim { position: relative; background: var(--roi-surface); border: var(--border-subtle);
  border-radius: var(--radius-card); padding: var(--space-3);
  background-image: repeating-linear-gradient(135deg, transparent 0 8px, rgba(224,177,76,.06) 8px 9px); }
.locked-dim .lock { color: var(--roi-estimated); }

/* ── Year rail ── */
.year-rail { display: inline-flex; gap: 2px; background: var(--roi-surface);
  border: var(--border-subtle); border-radius: var(--radius-control); padding: 3px; }
.year-rail button { min-height: 44px; min-width: 44px; padding: 0 var(--space-2);
  background: transparent; color: var(--roi-text-muted); border: 0; border-radius: 6px;
  font-family: var(--font-mono); font-size: var(--fs-caption); cursor: pointer; }
.year-rail button[aria-current="true"] { background: var(--roi-bg); color: var(--roi-accent-text);
  font-weight: 600; }

/* ── Toast ── */
.toast { background: var(--roi-surface); border: var(--border-subtle); border-left: 3px solid var(--roi-accent);
  border-radius: var(--radius-control); padding: var(--space-2) var(--space-3);
  color: var(--roi-text); font-size: var(--fs-caption); }
.toast--error { border-left-color: var(--roi-negative); }

/* ── sr-only (universal — paginile m2/cauta/xray nu mai redefinesc) ── */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ── Pagină de eroare (404/500/…) — unitară cu landing-ul ── */
.err { min-height: 80vh; display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; gap: var(--space-2);
  padding: var(--space-5) var(--margin-inline);
  background-image: radial-gradient(60% 50% at 50% 18%, rgba(61,232,160,.06), transparent 70%); }
.err-wordmark { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-lead);
  letter-spacing: -.01em; margin-bottom: var(--space-2); }
.err-wordmark { letter-spacing: -.04em; }
.err-wordmark sup { color: var(--roi-accent); font-size: .72em; vertical-align: .34em; margin-left: .04em; }
.err-code { font-family: var(--font-mono); font-size: var(--fs-display); font-weight: 700;
  line-height: 1; color: var(--roi-accent-text); font-variant-numeric: tabular-nums; }
.err-title { font-size: var(--fs-h2); }
.err-msg { color: var(--roi-text-muted); }
.err .btn { margin-top: var(--space-3); }

/* ── Wordmark clickabil = link spre home (fără stilul de link accent/underline) ── */
.err-wordmark, .bp-wordmark {
  color: var(--roi-text); text-decoration: none;
}
.err-wordmark:hover, .bp-wordmark:hover { text-decoration: none; }

/* ============================================================================
   ⭐ NAV CHROME PARTAJAT (header + drawer + footer) — base.html + nav.js.
   Portat fidel din docs/previews/nav-chrome-v1.html. Un singur accent, tokens
   --roi-*, WCAG 2.2 AA. Mobile-first: nav inline ≥768px, hamburger <768px.
   ============================================================================ */

/* skip link (vizibil doar la focus) */
.roi-skip { position: absolute; left: var(--space-2); top: -100px; z-index: 100;
  background: var(--roi-accent); color: var(--roi-on-accent); font-family: var(--font-display);
  font-weight: 700; padding: 10px 16px; border-radius: var(--radius-control);
  transition: top var(--transition-fast); }
.roi-skip:focus { top: var(--space-2); text-decoration: none; }

/* header shell */
.roi-header { position: sticky; top: 0; z-index: 40; background: rgba(10, 14, 20, .86);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: var(--border-subtle); }
/* Header/footer ALINIATE cu `.page` — același container (max-width 1100 + padding orizontal)
   ca logo/nav/footer să se alinieze cu conținutul. `var(--page-max)` nu e setat în scope-ul
   lor → mereu 1100 (heatmap nu mai e excepție). */
.roi-header-inner { max-width: var(--page-max, 1100px); margin: 0 auto; display: flex; align-items: center;
  gap: var(--space-3); min-height: 60px; padding: 0 var(--space-2); }
@media (min-width: 768px) { .roi-header-inner { padding-inline: var(--space-3); } }

/* wordmark */
.roi-wordmark { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-lead);
  letter-spacing: -.01em; color: var(--roi-text); text-decoration: none; flex-shrink: 0;
  display: inline-flex; align-items: center; min-height: 44px; }
.roi-wordmark:hover { text-decoration: none; }
.roi-wordmark { letter-spacing: -.04em; }
.roi-wordmark sup { color: var(--roi-accent); font-size: .72em; font-weight: 700; vertical-align: .34em; margin-left: .04em; }

/* primary nav — desktop inline (≥768px), drawer mobil (<768px) */
.roi-nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.roi-nav-link { font-family: var(--font-body); font-weight: 500; font-size: .95rem;
  color: var(--roi-text-muted); text-decoration: none; padding: 0 14px;
  min-height: 44px; display: inline-flex; align-items: center; border-radius: var(--radius-control);
  position: relative; transition: color var(--transition-fast), background var(--transition-fast);
  white-space: nowrap; }
.roi-nav-link:hover { color: var(--roi-text); background: var(--roi-surface); text-decoration: none; }
.roi-nav-link[aria-current="page"] { color: var(--roi-text); font-weight: 650; }
.roi-nav-link[aria-current="page"]::after { content: ""; position: absolute; left: 14px; right: 14px;
  bottom: 8px; height: 2px; background: var(--roi-accent); border-radius: 2px; }
/* disabled: culoare dedicată (≥3:1 ca text mare), FĂRĂ opacity pe text */
.roi-nav-link[aria-disabled="true"] { color: color-mix(in srgb, var(--roi-text-muted) 75%, var(--roi-bg)); cursor: default; }
.roi-nav-link[aria-disabled="true"]:hover { background: transparent; color: color-mix(in srgb, var(--roi-text-muted) 75%, var(--roi-bg)); }
.roi-nav-soon { margin-left: 8px; font-size: .65rem; padding: 2px 7px; }

/* user menu (dropdown) */
.roi-user { position: relative; flex-shrink: 0; margin-left: var(--space-1); }
.roi-user-trigger { display: inline-flex; align-items: center; gap: var(--space-1);
  min-height: 44px; padding: 0 10px 0 12px; background: transparent; border: var(--border-subtle);
  border-radius: var(--radius-pill); color: var(--roi-text); cursor: pointer;
  font-family: var(--font-body); font-size: .9rem; -webkit-tap-highlight-color: transparent;
  transition: background var(--transition-fast); }
.roi-user-trigger:hover { background: var(--roi-surface); }
.roi-user-avatar { position: relative; width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  background: var(--roi-surface-2); color: var(--roi-accent); display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: .85rem; }
/* punct verde discret = view de admin (semnal fin, persistent pe tot site-ul) */
.roi-admin-dot { position: absolute; top: -1px; right: -1px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--roi-accent); border: 2px solid var(--roi-bg); }
.roi-user-email { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--roi-text-muted); }
.roi-user-caret { width: 14px; height: 14px; flex-shrink: 0; color: var(--roi-text-muted);
  transition: transform var(--transition-fast); }
.roi-user-trigger[aria-expanded="true"] .roi-user-caret { transform: rotate(180deg); }
/* Panou flotant: fără umbră (brandbook „ierarhia din suprafață") — separare prin
   suprafață mai deschisă (surface-2) + bordură pronunțată (mix neutru, ≥3:1 pe carbon). */
.roi-user-panel { position: absolute; right: 0; top: calc(100% + 8px); min-width: 240px;
  background: var(--roi-surface-2);
  border: 1px solid color-mix(in srgb, var(--roi-text-muted) 70%, var(--roi-surface-2));
  border-radius: var(--radius-card); padding: var(--space-1); }
.roi-user-head { padding: 10px 12px 12px; border-bottom: var(--border-subtle); margin-bottom: 6px; }
.roi-user-head .name { font-family: var(--font-display); font-weight: 700; font-size: .95rem; }
.roi-user-head .mail { color: var(--roi-text-muted); font-size: var(--fs-caption);
  font-family: var(--font-mono); overflow: hidden; text-overflow: ellipsis; }
.roi-user-item { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px;
  border-radius: var(--radius-control); color: var(--roi-text); text-decoration: none;
  font-size: .92rem; transition: background var(--transition-fast); }
.roi-user-item:hover { background: var(--roi-surface-2); text-decoration: none; }
.roi-user-item svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--roi-text-muted); }
.roi-user-item.is-danger { color: var(--roi-negative); }
.roi-user-item.is-danger svg { color: var(--roi-negative); }
.roi-user-item .role-pill { margin-left: auto; font-size: var(--fs-caption);
  font-family: var(--font-mono); color: var(--roi-accent-text); }

/* Dropdown „Admin" în nav (mirror la .roi-user) — colapsează consolele M9 + Rapoarte ca să încapă.
   Trigger-ul poartă ȘI clasa `.roi-nav-link` → moștenește font/hover + underline-ul de „activ"
   (`[aria-current]::after`) când oricare consolă e activă. */
.roi-nav-menu { position: relative; display: inline-flex; }
.roi-nav-menu-trigger { background: transparent; border: 0; cursor: pointer; gap: 4px;
  padding-right: 10px; font-family: var(--font-body); }
.roi-nav-caret { width: 14px; height: 14px; flex-shrink: 0; color: var(--roi-text-muted);
  transition: transform var(--transition-fast); }
.roi-nav-menu-trigger[aria-expanded="true"] .roi-nav-caret { transform: rotate(180deg); }
.roi-nav-menu-panel { position: absolute; left: 0; top: calc(100% + 8px); min-width: 224px; z-index: 40;
  background: var(--roi-surface-2);
  border: 1px solid color-mix(in srgb, var(--roi-text-muted) 70%, var(--roi-surface-2));
  border-radius: var(--radius-card); padding: var(--space-1); }
.roi-nav-menu-panel .roi-user-item:hover { background: color-mix(in srgb, var(--roi-text) 8%, var(--roi-surface-2)); }
/* itemul activ în panel: fundal mai închis + accent, distinct de suprafața panelului (surface-2) */
.roi-nav-menu-panel .roi-user-item[aria-current="page"] { background: var(--roi-surface);
  color: var(--roi-text); font-weight: 650; }
.roi-nav-menu-panel .roi-user-item[aria-current="page"] svg { color: var(--roi-accent); }
.roi-nav-menu-soon { color: color-mix(in srgb, var(--roi-text-muted) 75%, var(--roi-bg)); cursor: default; }
.roi-nav-menu-soon .roi-nav-soon { margin-left: auto; }
.roi-nav-menu-soon:hover { background: transparent; }

/* hamburger — only <768px */
.roi-burger { display: none; align-items: center; justify-content: center; width: 44px; height: 44px;
  margin-left: auto; background: transparent; border: var(--border-subtle);
  border-radius: var(--radius-control); color: var(--roi-text); cursor: pointer;
  -webkit-tap-highlight-color: transparent; flex-shrink: 0; }
.roi-burger svg { width: 22px; height: 22px; }

/* drawer (mobile) */
.roi-drawer-scrim { position: fixed; inset: 0; z-index: 49; background: rgba(0, 0, 0, .55);
  opacity: 0; visibility: hidden; transition: opacity var(--transition-base), visibility var(--transition-base); }
.roi-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 50; width: min(86vw, 340px);
  background: var(--roi-surface); border-left: var(--border-subtle);
  transform: translateX(100%); transition: transform var(--transition-base);
  display: flex; flex-direction: column; overflow-y: auto; }
.roi-drawer-top { display: flex; align-items: center; justify-content: space-between;
  padding: 12px var(--space-2); border-bottom: var(--border-subtle); min-height: 60px; }
.roi-drawer-close { width: 44px; height: 44px; display: grid; place-items: center; background: transparent;
  border: var(--border-subtle); border-radius: var(--radius-control); color: var(--roi-text); cursor: pointer; }
.roi-drawer-close svg { width: 20px; height: 20px; }
.roi-drawer-nav { display: flex; flex-direction: column; padding: var(--space-2) var(--space-1); gap: 2px; flex: 1; }
.roi-drawer-link { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 14px;
  border-radius: var(--radius-control); color: var(--roi-text); text-decoration: none;
  font-family: var(--font-body); font-weight: 500; font-size: 1.05rem;
  transition: background var(--transition-fast); }
.roi-drawer-link:hover { background: var(--roi-surface-2); text-decoration: none; }
.roi-drawer-link[aria-current="page"] { background: var(--roi-surface-2); font-weight: 650;
  box-shadow: inset 3px 0 0 var(--roi-accent); }
.roi-drawer-link[aria-disabled="true"] { color: color-mix(in srgb, var(--roi-text-muted) 75%, var(--roi-bg)); cursor: default; }
.roi-drawer-link svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--roi-text-muted); }
.roi-drawer-link.is-danger { color: var(--roi-negative); }
.roi-drawer-link.is-danger svg { color: var(--roi-negative); }
/* Etichetă de grup în drawer („Explorează" / „Administrare") — oglindește gruparea desktop. */
.roi-drawer-group-label { padding: var(--space-2) 14px 4px; font-family: var(--font-mono);
  font-size: var(--fs-caption); letter-spacing: .04em; text-transform: uppercase;
  color: var(--roi-text-muted); }
.roi-drawer-group-label:first-child { padding-top: 4px; }
.roi-drawer-foot { border-top: var(--border-subtle); padding: var(--space-2) var(--space-1); }
.roi-drawer-mail { padding: 4px 14px var(--space-1); color: var(--roi-text-muted);
  font-size: var(--fs-caption); font-family: var(--font-mono); }
/* drawer open state */
body.drawer-open { overflow: hidden; }
.roi-drawer.is-open { transform: translateX(0); }
.roi-drawer-scrim.is-open { opacity: 1; visibility: visible; }

/* Nav inline → drawer la <1024px: 5 unelte + dropdown Admin + user-menu nu încap sub ~1024px
   (calcul designer). Tabletele 768–1023 folosesc hamburger-ul (drawer cu grupuri). */
@media (max-width: 1023px) {
  .roi-nav, .roi-user { display: none; }
  .roi-burger { display: inline-flex; }
}

/* ── Footer partajat — .roi-foot (atribuire CC-BY 4.0 + © RoI²) ── */
.roi-foot { border-top: var(--border-subtle); background: var(--roi-bg); margin-top: var(--space-6); }
.roi-foot-inner { max-width: var(--page-max, 1100px); margin: 0 auto;
  padding: var(--space-4) var(--space-2) var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-3); }
@media (min-width: 768px) { .roi-foot-inner { padding-inline: var(--space-3); } }
.roi-foot-attr { font-size: var(--fs-caption); color: var(--roi-text-muted); max-width: 64ch; line-height: 1.55; }
.roi-foot-attr a { color: var(--roi-accent-text); }
.roi-foot-row { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); align-items: center; }
.roi-foot-row a { color: var(--roi-text-muted); font-size: var(--fs-caption);
  min-height: 44px; display: inline-flex; align-items: center; }
.roi-foot-row a:hover { color: var(--roi-text); }
.roi-foot-sep { color: var(--roi-surface-2); }
.roi-foot-brand { font-size: var(--fs-caption); color: var(--roi-text-muted);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.roi-foot-brand .wm { font-family: var(--font-display); font-weight: 700; color: var(--roi-text); }
.roi-foot-brand .wm { letter-spacing: -.04em; }
.roi-foot-brand .wm sup { color: var(--roi-accent); font-size: .72em; vertical-align: .34em; margin-left: .04em; }

/* Tooltip vanilla unitar (nav.js window.wireTips) — popup stilizat pt orice [data-tip]. */
.u-tip {
  position: fixed; z-index: 60; pointer-events: none; transform: translate(-50%, -100%);
  max-width: 260px; padding: var(--space-1) 11px; border-radius: var(--radius-control);
  background: var(--roi-surface-2); color: var(--roi-text);
  border: 1px solid var(--roi-accent); box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
  font-size: var(--fs-caption); line-height: 1.4; white-space: normal;
  opacity: 0; transition: opacity .12s ease;
}
.u-tip.show { opacity: 1; }