/* ============================================================
   Journey Mining · Sem Parar — implementação real do mockup
   Claude Design "Journey Mining Sem Parar.dc.html", design system
   Cadence (mesmo usado no portal AE360). Tokens abaixo são a cópia
   fiel de tokens/primitives.css e tokens/semantic.css do bundle — layout
   e componentes (sidebar, funil, donut, árvore, drawer) são
   reimplementação vanilla (sem React) plugada em dado real via API.
   ============================================================ */

/* Webfonts carregados via link no head do index.html. */

/* ---- LAYER 1: primitivos (Cadence) ---- */
:root {
  --c-neutral-0: #ffffff; --c-neutral-25: #fbfbfc; --c-neutral-50: #f5f5f7; --c-neutral-100: #ededf0;
  --c-neutral-150: #e2e2e6; --c-neutral-200: #d3d3d9; --c-neutral-300: #b6b6bf; --c-neutral-400: #8f8f9a;
  --c-neutral-450: #85858f; --c-neutral-500: #6d6d78; --c-neutral-600: #52525b; --c-neutral-700: #3a3a42;
  --c-neutral-800: #26262b; --c-neutral-850: #1c1c20; --c-neutral-900: #141417; --c-neutral-950: #0d0d0f; --c-neutral-1000: #08080a;
  --c-orange-400: #ff6f34; --c-orange-500: #ff5c1a; --c-orange-600: #e84708; --c-orange-700: #bd3806;
  --c-green-400: #35d07f; --c-green-600: #1a7f47;
  --c-amber-400: #f5b544; --c-amber-600: #b45309;
  --c-red-400: #ff6b5e; --c-red-500: #f0483e; --c-red-600: #d92d20;
  --c-blue-400: #5aa2ff; --c-blue-600: #1d6fe0;
  --c-viz-1: #ff5c1a; --c-viz-2: #4a9eff; --c-viz-3: #2dbfa8; --c-viz-4: #a970ff;
  --c-viz-5: #f0a83a; --c-viz-6: #f062a6; --c-viz-7: #64d97b; --c-viz-8: #7d8590;
  --font-display: "Bricolage Grotesque", "Space Grotesk", sans-serif;
  --font-sans: "Hanken Grotesk", -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;
  --radius-2: 5px; --radius-3: 6px; --radius-4: 8px; --radius-5: 10px; --radius-full: 999px;
  --shadow-2: 0 4px 12px rgba(0,0,0,0.24); --shadow-3: 0 12px 32px -4px rgba(0,0,0,0.36);
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
}

/* ---- LAYER 2: semânticos — claro é :root (o dashboard abre em light), escuro via [data-theme=dark] ---- */
:root {
  --bg-canvas: var(--c-neutral-50); --bg-surface: var(--c-neutral-0); --bg-elevated: var(--c-neutral-0);
  --bg-inset: var(--c-neutral-100); --bg-hover: rgba(0,0,0,0.035); --bg-active: rgba(0,0,0,0.06);
  --text-primary: var(--c-neutral-900); --text-secondary: var(--c-neutral-600); --text-muted: var(--c-neutral-500);
  --border-subtle: rgba(0,0,0,0.06); --border-default: rgba(0,0,0,0.10); --border-strong: rgba(0,0,0,0.16);
  --accent-fg: var(--c-orange-700); --brand-primary-hover: var(--c-orange-600);
  --success: var(--c-green-600); --success-soft: rgba(26,127,71,0.10);
  --warning: var(--c-amber-600); --warning-soft: rgba(180,83,9,0.10);
  --critical: var(--c-red-600); --critical-soft: rgba(217,45,32,0.09);
  --info: var(--c-blue-600); --info-soft: rgba(29,111,224,0.10);
  --viz-1: var(--c-viz-1); --viz-2: var(--c-viz-2); --viz-3: var(--c-viz-3); --viz-4: var(--c-viz-4);
  --viz-5: var(--c-viz-5); --viz-6: var(--c-viz-6); --viz-7: var(--c-viz-7); --viz-8: var(--c-viz-8);
  --viz-grid: rgba(0,0,0,0.07); --viz-axis: var(--c-neutral-500); --viz-track: rgba(0,0,0,0.07);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg-canvas: var(--c-neutral-950); --bg-surface: var(--c-neutral-900); --bg-elevated: var(--c-neutral-850);
  --bg-inset: var(--c-neutral-1000); --bg-hover: rgba(255,255,255,0.045); --bg-active: rgba(255,255,255,0.09);
  --text-primary: var(--c-neutral-50); --text-secondary: var(--c-neutral-300); --text-muted: var(--c-neutral-400);
  --border-subtle: rgba(255,255,255,0.06); --border-default: rgba(255,255,255,0.10); --border-strong: rgba(255,255,255,0.17);
  --accent-fg: var(--c-orange-500); --brand-primary-hover: var(--c-orange-400);
  --success: var(--c-green-400); --success-soft: rgba(53,208,127,0.14);
  --warning: var(--c-amber-400); --warning-soft: rgba(245,181,68,0.15);
  --critical: var(--c-red-500); --critical-soft: rgba(240,72,62,0.15);
  --info: var(--c-blue-400); --info-soft: rgba(90,162,255,0.14);
  --viz-grid: rgba(255,255,255,0.07); --viz-axis: var(--c-neutral-400); --viz-track: rgba(255,255,255,0.08);
  color-scheme: dark;
}

/* ---- Base ---- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: var(--bg-canvas); color: var(--text-primary); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }
a { color: var(--accent-fg); text-decoration: none; }
a:hover { color: var(--brand-primary-hover); text-decoration: underline; }
code { font-family: var(--font-mono); }
::selection { background: var(--warning-soft); }
:focus-visible { outline: 2px solid var(--accent-fg); outline-offset: 2px; }
button { font: inherit; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---- Shell: sidebar + rail + header + content ---- */
.jm-shell { display: flex; align-items: stretch; min-height: 100vh; background: var(--bg-canvas); }
.jm-side { flex: none; width: 236px; border-right: 1px solid var(--border-subtle); background: var(--bg-surface); position: sticky; top: 0; height: 100vh; overflow: auto; }
.jm-side-head { padding: 16px 16px 12px; border-bottom: 1px solid var(--border-subtle); }
.jm-side-title { font-family: var(--font-display); font-weight: 800; font-size: 15px; letter-spacing: -0.02em; line-height: 1.1; }
.jm-side-sub { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.04em; color: var(--text-muted); margin-top: 5px; }
.jm-side-foot { padding: 14px 16px; border-top: 1px solid var(--border-subtle); font-family: var(--font-mono); font-size: 10px; line-height: 1.7; color: var(--text-muted); }
.jm-nav-section { padding: 12px 10px 4px; }
.jm-nav-section-title { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.08em; color: var(--text-muted); padding: 4px 10px 6px; }
.jm-nav-item { width: 100%; display: flex; align-items: center; gap: 9px; padding: 8px 10px; border: none; background: transparent; color: var(--text-secondary); border-radius: var(--radius-3); cursor: pointer; text-align: left; font-size: 12.5px; margin-bottom: 1px; }
.jm-nav-item:hover { background: var(--bg-hover); color: var(--text-primary); }
.jm-nav-item.active { background: var(--bg-active); color: var(--text-primary); font-weight: 600; }
.jm-nav-item .ic { flex: none; display: flex; opacity: .8; }
.jm-nav-item .lbl { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jm-nav-item .cnt { flex: none; font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); }

.jm-rail { display: none; flex: none; width: 52px; border-right: 1px solid var(--border-subtle); background: var(--bg-surface); position: sticky; top: 0; height: 100vh; flex-direction: column; align-items: center; gap: 4px; padding: 12px 0; overflow: auto; }
.jm-rail button { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border: none; background: transparent; color: var(--text-muted); border-radius: var(--radius-3); cursor: pointer; }
.jm-rail button:hover { background: var(--bg-hover); color: var(--text-primary); }
.jm-rail button.active { color: var(--accent-fg); background: var(--bg-active); }
@media (max-width: 1023px) { .jm-side { display: none; } .jm-rail { display: flex; } }

.jm-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.jm-hdr { flex: none; height: 52px; display: flex; align-items: center; gap: 12px; padding: 0 24px; border-bottom: 1px solid var(--border-subtle); background: var(--bg-surface); position: sticky; top: 0; z-index: 20; }
.jm-hdr-title { min-width: 0; flex: 1 1 auto; display: flex; align-items: baseline; gap: 10px; }
.jm-hdr-title .t { font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jm-hdr-title .s { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-muted); white-space: nowrap; }
.jm-hdr-right { display: flex; align-items: center; gap: 8px; flex: none; }
.jm-chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px; border: 1px solid var(--border-default); border-radius: var(--radius-3); font-family: var(--font-mono); font-size: 10.5px; color: var(--text-secondary); white-space: nowrap; }
.jm-chip .dot { width: 6px; height: 6px; border-radius: 99px; display: inline-block; }
.jm-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1px solid var(--border-default); background: var(--bg-surface); color: var(--text-secondary); border-radius: var(--radius-3); cursor: pointer; }
.jm-iconbtn:hover { background: var(--bg-hover); color: var(--text-primary); }
@media (max-width: 767px) { .jm-hdr { flex-wrap: wrap; height: auto; padding: 8px 16px; } }

/* ---- Filter bar: período + fluxo, global a toda página ---- */
.jm-filterbar { flex: none; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 9px 24px; border-bottom: 1px solid var(--border-subtle); background: var(--bg-inset); position: sticky; top: 52px; z-index: 19; }
.jm-filterbar-label { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.08em; color: var(--text-muted); flex: none; }
.jm-filter-field { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-muted); }
.jm-filter-input { height: 26px; padding: 0 8px; border: 1px solid var(--border-default); border-radius: var(--radius-2); background: var(--bg-surface); color: var(--text-primary); font-family: var(--font-mono); font-size: 11px; }
.jm-filter-input:focus-visible { outline: 2px solid var(--accent-fg); outline-offset: 1px; }
select.jm-filter-input { max-width: 160px; }
.jm-filter-clear { font-family: var(--font-mono); font-size: 10.5px; color: var(--accent-fg); background: transparent; border: none; cursor: pointer; padding: 4px 2px; }
.jm-filter-clear:hover { text-decoration: underline; }
.jm-filter-hint { font-size: 11px; color: var(--text-muted); margin-left: auto; font-family: var(--font-mono); }
@media (max-width: 767px) { .jm-filterbar { position: static; padding: 8px 16px; } }

.jm-pad { flex: 1 1 auto; padding: 28px 32px 64px; min-width: 0; }
@media (max-width: 767px) { .jm-pad { padding: 16px !important; } }
.jm-page { display: flex; flex-direction: column; gap: 28px; max-width: 1320px; }
.jm-eyebrow { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 8px; }
.jm-h1 { font-family: var(--font-display); font-weight: 800; font-size: 30px; letter-spacing: -0.025em; margin: 0 0 8px; line-height: 1.08; text-wrap: balance; }
.jm-lede { margin: 0; max-width: 74ch; font-size: 13.5px; line-height: 1.6; color: var(--text-secondary); text-wrap: pretty; }
.jm-section-label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 12px; }

/* ---- Cards / grids ---- */
.jm-card { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-4); padding: 18px 20px 20px; min-width: 0; }
.jm-card-title { font-weight: 600; font-size: 13px; margin-bottom: 2px; }
.jm-card-hint { font-size: 11.5px; color: var(--text-muted); margin-bottom: 16px; }
.jm-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; align-items: start; }
.jm-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(206px, 1fr)); gap: 1px; background: var(--border-subtle); border: 1px solid var(--border-subtle); border-radius: var(--radius-4); overflow: hidden; }
.jm-kpi { background: var(--bg-surface); padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.jm-kpi-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.07em; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jm-kpi-value { display: flex; align-items: baseline; gap: 6px; }
.jm-kpi-value b { font-family: var(--font-mono); font-weight: 600; font-size: 27px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1; }
.jm-kpi-value span { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }
.jm-kpi-bar { height: 3px; border-radius: 99px; background: var(--viz-track); overflow: hidden; }
.jm-kpi-bar i { display: block; height: 3px; border-radius: 99px; }
.jm-kpi-caption { font-size: 11.5px; line-height: 1.45; color: var(--text-muted); text-wrap: pretty; }

/* ---- Badge AMOSTRA ---- */
.jm-badge-amostra { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.06em; padding: 2px 6px; border-radius: var(--radius-2); background: var(--warning-soft); color: var(--warning); white-space: nowrap; }
.jm-badge-real { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.06em; padding: 2px 6px; border-radius: var(--radius-2); background: var(--success-soft); color: var(--success); white-space: nowrap; }

/* ---- Alert ---- */
.jm-alert { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--radius-4); border: 1px solid; }
.jm-alert .ic { flex: none; margin-top: 1px; }
.jm-alert .body { min-width: 0; }
.jm-alert .ttl { font-weight: 600; font-size: 13px; margin-bottom: 3px; }
.jm-alert .txt { font-size: 12.5px; line-height: 1.55; color: var(--text-secondary); text-wrap: pretty; }
.jm-alert.warning { background: var(--warning-soft); border-color: color-mix(in srgb, var(--warning) 35%, transparent); }
.jm-alert.warning .ttl { color: var(--warning); }
.jm-alert.critical { background: var(--critical-soft); border-color: color-mix(in srgb, var(--critical) 35%, transparent); }
.jm-alert.critical .ttl { color: var(--critical); }
.jm-alert.info { background: var(--info-soft); border-color: color-mix(in srgb, var(--info) 35%, transparent); }
.jm-alert.info .ttl { color: var(--info); }

/* ---- Alerts list ---- */
.jm-list { display: flex; flex-direction: column; gap: 1px; background: var(--border-subtle); border: 1px solid var(--border-subtle); border-radius: var(--radius-3); overflow: hidden; }
.jm-list-row { background: var(--bg-surface); display: flex; align-items: flex-start; gap: 10px; padding: 11px 13px; }
.jm-list-row .dot { flex: none; margin-top: 4px; width: 7px; height: 7px; border-radius: 99px; }
.jm-list-row .ttl { font-size: 12.5px; font-weight: 500; line-height: 1.4; }
.jm-list-row .rule { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-muted); margin-top: 3px; }
.jm-list-row .val { flex: none; font-family: var(--font-mono); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; margin-left: auto; }

/* ---- Trend line chart (SVG) ---- */
.jm-linechart { width: 100%; display: block; overflow: visible; }
.jm-linechart .grid { stroke: var(--viz-grid); stroke-width: 1; }
.jm-linechart .axis { fill: var(--viz-axis); font-family: var(--font-mono); font-size: 9.5px; }
.jm-linechart .line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.jm-linechart .dot-end { stroke: var(--bg-surface); stroke-width: 2; }
.jm-legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 11.5px; color: var(--text-secondary); margin-top: 12px; }
.jm-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.jm-swatch { width: 9px; height: 9px; border-radius: 2px; flex: none; }

/* ---- Bar chart (grouped, SVG) ---- */
.jm-barchart { width: 100%; display: block; overflow: visible; }
.jm-barchart .grid { stroke: var(--viz-grid); stroke-width: 1; }
.jm-barchart .axis { fill: var(--viz-axis); font-family: var(--font-mono); font-size: 9.5px; }
.jm-barchart rect { transition: opacity .1s; }
.jm-barchart rect:hover { opacity: .78; }
.jm-barchart .val { fill: var(--text-secondary); font-family: var(--font-mono); font-size: 9px; font-variant-numeric: tabular-nums; }

/* ---- Donut ---- */
.jm-donut-wrap { display: flex; align-items: center; gap: 20px; }
.jm-donut { flex: none; }
.jm-donut-center-label { font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); }
.jm-donut-center-value { font-family: var(--font-mono); font-weight: 700; font-size: 20px; }

/* ---- Funnel ---- */
.jm-funnel { display: flex; flex-direction: column; gap: 10px; }
.jm-funnel-row { display: grid; grid-template-columns: minmax(140px,1fr) minmax(0,3fr) 88px; gap: 12px; align-items: center; }
.jm-funnel-label { font-size: 12px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jm-funnel-track { height: 26px; border-radius: var(--radius-2); background: var(--viz-track); overflow: hidden; }
.jm-funnel-fill { height: 26px; border-radius: var(--radius-2); display: flex; align-items: center; }
.jm-funnel-n { text-align: right; font-family: var(--font-mono); font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---- Bot cards ---- */
.jm-bot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); gap: 14px; }
.jm-bot-card { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-4); padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.jm-bot-card .hd { display: flex; align-items: center; gap: 8px; }
.jm-bot-card .hd .dot { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.jm-bot-card .hd .nm { font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jm-bot-card .n { display: flex; align-items: baseline; gap: 8px; }
.jm-bot-card .n b { font-family: var(--font-mono); font-weight: 600; font-size: 23px; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.jm-bot-card .n span { font-size: 11.5px; color: var(--text-muted); }
.jm-bot-card .cov-row { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: 5px; }
.jm-bot-card .note { font-size: 11.5px; line-height: 1.5; color: var(--text-muted); text-wrap: pretty; }

/* ---- Table generic ---- */
.jm-table { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-4); overflow: hidden; }
.jm-table .thead { display: grid; background: var(--bg-inset); border-bottom: 1px solid var(--border-subtle); }
.jm-table .thead > div { padding: 10px 16px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.07em; color: var(--text-muted); }
.jm-table .row { display: grid; border-bottom: 1px solid var(--border-subtle); align-items: center; }
.jm-table .row:last-child { border-bottom: none; }
.jm-table .row > div { padding: 12px 16px; min-width: 0; }
.jm-table .row.clickable { cursor: pointer; }
.jm-table .row.clickable:hover { background: var(--bg-hover); }
.right { text-align: right; }

/* ---- Progress bars generic ---- */
.jm-bar-track { height: 8px; border-radius: 99px; background: var(--viz-track); overflow: hidden; }
.jm-bar-fill { height: 8px; border-radius: 99px; }

/* ---- Tree (árvore motivo/submotivo) ---- */
.jm-tree { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-4); overflow: hidden; }
.jm-tree-node { border-bottom: 1px solid var(--border-subtle); }
.jm-tree-node:last-child { border-bottom: none; }
.jm-tree-btn { width: 100%; display: flex; align-items: center; gap: 11px; padding: 13px 18px; background: transparent; border: none; text-align: left; cursor: pointer; color: inherit; font-family: inherit; }
.jm-tree-btn:hover { background: var(--bg-hover); }
.jm-tree-btn .chev { flex: none; color: var(--text-muted); display: inline-flex; transition: transform 120ms var(--ease-standard); }
.jm-tree-btn.open .chev { transform: rotate(90deg); }
.jm-tree-btn .dot { flex: none; width: 8px; height: 8px; border-radius: 2px; }
.jm-tree-btn .lbl { flex: 1 1 auto; min-width: 0; font-size: 13px; font-weight: 500; }
.jm-tree-btn .cnt { flex: none; font-family: var(--font-mono); font-size: 11.5px; font-variant-numeric: tabular-nums; color: var(--text-muted); }
.jm-tree-children { padding: 0 18px 14px 52px; display: flex; flex-direction: column; gap: 1px; }
.jm-tree-child { display: grid; grid-template-columns: minmax(110px,1fr) minmax(90px,1.6fr) 64px; gap: 14px; align-items: center; padding: 8px 0; }
.jm-tree-child .lbl { font-family: var(--font-mono); font-size: 11.5px; }
.jm-tree-child .n { text-align: right; font-family: var(--font-mono); font-size: 11.5px; font-variant-numeric: tabular-nums; color: var(--text-muted); }

/* ---- Case list + drawer ---- */
.jm-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.jm-search { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 10px; border: 1px solid var(--border-default); border-radius: var(--radius-3); background: var(--bg-surface); color: var(--text-secondary); width: 260px; max-width: 100%; }
.jm-search input { border: none; outline: none; background: transparent; color: var(--text-primary); font-size: 12.5px; width: 100%; font-family: var(--font-sans); }
.jm-search svg { flex: none; opacity: .6; }

.jm-drawer-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.42); opacity: 0; pointer-events: none; transition: opacity .18s; z-index: 500; }
.jm-drawer-backdrop.open { opacity: 1; pointer-events: auto; }
.jm-drawer { position: fixed; top: 0; right: 0; height: 100%; width: min(520px, 100%); background: var(--bg-surface); border-left: 1px solid var(--border-default); box-shadow: var(--shadow-3); transform: translateX(100%); transition: transform .22s var(--ease-standard); z-index: 501; display: flex; flex-direction: column; }
.jm-drawer.open { transform: translateX(0); }
.jm-drawer-hd { padding: 18px 22px; border-bottom: 1px solid var(--border-subtle); display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.jm-drawer-hd .ttl { font-weight: 700; font-size: 15px; }
.jm-drawer-hd .desc { font-size: 12px; color: var(--text-muted); margin-top: 3px; font-family: var(--font-mono); }
.jm-drawer-body { padding: 22px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 22px; }
/* Filhos diretos de um flex column com overflow:hidden têm min-height:auto
   resolvido para 0 (regra do spec) e podem colapsar a ~0px em vez de
   rolar — trava isso: nada aqui deve encolher, o scroll é do container. */
.jm-drawer-body > * { flex-shrink: 0; }
.jm-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px,1fr)); gap: 1px; background: var(--border-subtle); border: 1px solid var(--border-subtle); border-radius: var(--radius-3); overflow: hidden; }
.jm-stat { background: var(--bg-surface); padding: 11px 13px; }
.jm-stat .lbl { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 5px; }
.jm-stat .val { font-family: var(--font-mono); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.jm-drawer-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.07em; color: var(--text-muted); margin-bottom: 9px; }
.jm-drawer-body p { margin: 0; font-size: 13px; line-height: 1.6; }
.jm-tags-wrap { display: flex; flex-wrap: wrap; gap: 6px; }
.jm-tag-pill { font-family: var(--font-mono); font-size: 11px; padding: 3px 8px; border-radius: var(--radius-2); background: var(--bg-inset); border: 1px solid var(--border-subtle); color: var(--text-secondary); }
.jm-turns { display: flex; flex-direction: column; gap: 10px; }
.jm-turn { display: flex; gap: 10px; }
.jm-turn .role { flex: none; width: 48px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.04em; padding-top: 3px; }
.jm-turn .content { font-size: 12.5px; line-height: 1.55; color: var(--text-secondary); text-wrap: pretty; }
.jm-turn .ts { font-family: var(--font-mono); font-size: 9.5px; color: var(--text-muted); margin-top: 3px; }

/* ---- Badges de flags nos casos ---- */
.jm-flag { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.04em; padding: 2px 6px; border-radius: var(--radius-2); white-space: nowrap; display: inline-block; }

/* ---- Method table ---- */
.jm-method-row { border-bottom: 1px solid var(--border-subtle); padding: 15px 20px; display: grid; grid-template-columns: minmax(150px,1fr) minmax(200px,1.6fr); gap: 20px; align-items: baseline; }
.jm-method-row:last-child { border-bottom: none; }
.jm-method-row .lbl { font-size: 12.5px; font-weight: 600; margin-bottom: 4px; }
.jm-method-row .field { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-muted); word-break: break-all; }
.jm-method-row .formula { font-family: var(--font-mono); font-size: 11.5px; line-height: 1.6; color: var(--text-secondary); word-break: break-word; }
.jm-method-row .note { font-size: 11.5px; line-height: 1.5; color: var(--text-muted); margin-top: 6px; text-wrap: pretty; }
.jm-premises { background: var(--bg-inset); border: 1px solid var(--border-subtle); border-radius: var(--radius-4); padding: 20px; }
.jm-premises ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 9px; }
.jm-premises li { font-size: 12.5px; line-height: 1.6; color: var(--text-secondary); text-wrap: pretty; }

/* ---- Loading state ---- */
.jm-skeleton { color: var(--text-muted); font-size: 12.5px; font-family: var(--font-mono); padding: 20px 0; }
.jm-err { color: var(--critical); font-size: 12.5px; font-family: var(--font-mono); padding: 20px 0; }