/* Oransys EPM · Analistas digitais.
   Brand manual (PortoBureau 2023): institutional colors "Solidez" #212A30 and "Energia" #FB851D;
   institutional typeface Raleway (titles), system typeface Roboto (interface). Dark first, light available. */
:root {
  --brand-dark: #212a30; --orange: #fb851d; --orange-hover: #ff9a42; --orange-ink: #1a1206; --orange-soft: rgba(251, 133, 29, .14);
  --radius: 12px; --radius-sm: 8px;
  --font-ui: "Roboto", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-title: "Raleway", "Roboto", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  font-family: var(--font-ui); font-size: 14px;
}
:root[data-theme="dark"] {
  /* surfaces derived from Solidez #212A30 */
  --bg: #171d22; --bg-elev: #1c2429; --panel: #212a30; --panel-2: #2a353d; --line: #33404a; --line-strong: #435260;
  --ink: #eef2f5; --muted: #9fabb6; --faint: #6f7d89; --shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 8px 24px rgba(0, 0, 0, .28);
  --high: #ff6161; --medium: #ffb020; --low: #3ddc84; --info: #8fa0b3; --open: #5aa3ff; --known: #b99cff; --monitor: #2fd0e0; --closed: #6f7d89;
  --sidebar: #12181c; --sidebar-line: #26313a; --input: #1a2227;
}
:root[data-theme="light"] {
  --bg: #f3f5f7; --bg-elev: #ffffff; --panel: #ffffff; --panel-2: #f6f8fa; --line: #dfe4e9; --line-strong: #c6cfd7;
  --ink: #212a30; --muted: #5b6771; --faint: #8b969f; --shadow: 0 1px 2px rgba(33, 42, 48, .06), 0 6px 20px rgba(33, 42, 48, .08);
  --high: #d32f2f; --medium: #ef8f00; --low: #2e7d32; --info: #546e7a; --open: #0b5fff; --known: #6a1b9a; --monitor: #00838f; --closed: #78909c;
  --sidebar: #212a30; --sidebar-line: #33404a; --input: #ffffff;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--bg); color: var(--ink); }
body { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; }
button { font: inherit; cursor: pointer; border: 1px solid var(--line-strong); background: var(--panel-2); color: var(--ink); border-radius: var(--radius-sm); padding: 7px 14px; transition: background .15s, border-color .15s, transform .05s; }
button:hover { border-color: var(--orange); }
button:active { transform: translateY(1px); }
button.primary { background: var(--orange); color: var(--orange-ink); border-color: var(--orange); font-weight: 600; }
button.primary:hover { background: var(--orange-hover); border-color: var(--orange-hover); }
button.danger { color: var(--high); }
button.ghost { background: transparent; border-color: transparent; color: #b6bec6; }
button.ghost:hover { color: var(--ink); border-color: var(--sidebar-line); }
button:disabled { opacity: .5; cursor: default; }
input, select, textarea { font: inherit; padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--input); color: var(--ink); width: 100%; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px var(--orange-soft); }
input::placeholder, textarea::placeholder { color: var(--faint); }
label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
label > input, label > select, label > textarea { font-size: 14px; color: var(--ink); }
.muted { color: var(--muted); }

/* ---------------------------------------------------------------- sign-in gate */
/* body[data-auth] is "pending" while the account is being resolved, "gate" when the person must sign in, "ready" after. */
body[data-auth="pending"], body[data-auth="gate"] { grid-template-columns: 1fr; }
body[data-auth="pending"] .sidebar, body[data-auth="pending"] .content, body[data-auth="gate"] .sidebar, body[data-auth="gate"] .content { display: none; }
.gate { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
.gate-card { width: 100%; max-width: 420px; background: var(--brand-dark); color: #e6e9ec; border: 1px solid #33404a; border-radius: 16px; padding: 36px 32px 32px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 10px; position: relative; }
.gate-brand { display: flex; align-items: center; gap: 12px; }
.gate-symbol { width: 40px; height: 40px; object-fit: contain; }
.gate-wordmark { height: 24px; width: auto; object-fit: contain; }
.gate-product { margin: 0; font-family: var(--font-title); font-weight: 600; font-size: 11px; color: #9aa3ad; letter-spacing: .06em; text-transform: uppercase; }
.gate-title { margin: 14px 0 0; font-family: var(--font-title); font-weight: 700; font-size: 24px; color: #fff; }
.gate-text { margin: 0 0 14px; color: #b6bec6; line-height: 1.45; }
.gate-card button.primary { padding: 11px 16px; font-size: 15px; }
.gate-card button.primary:disabled { opacity: .7; }
.gate-msg { margin: 6px 0 0; font-size: 13px; color: #b6bec6; line-height: 1.4; }
.gate-msg.error { color: var(--high); }

/* ---------------------------------------------------------------- sidebar */
.sidebar { background: var(--sidebar); color: #e6e9ec; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; border-right: 1px solid var(--sidebar-line); }
/* Desktop: the product logo alone; phones: the symbol alone (the logo and the symbol swap at the narrow breakpoint). */
.sidebar-brand { position: relative; padding: 18px 20px 16px; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--sidebar-line); }
.brand-logo { width: 100%; max-width: 320px; height: auto; object-fit: contain; }
.brand-symbol, .brand-wordmark, .brand-product { display: none; }
.brand-symbol { width: 34px; height: 34px; object-fit: contain; grid-row: 1 / span 2; }
.brand-wordmark { height: 22px; width: auto; object-fit: contain; justify-self: start; }
.brand-product { font-family: var(--font-title); font-weight: 600; font-size: 11px; color: #9aa3ad; letter-spacing: .06em; text-transform: uppercase; margin-top: 2px; }
.sidenav { display: flex; flex-direction: column; gap: 4px; padding: 14px 12px; }
.navitem { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: transparent; border: 1px solid transparent; color: #b6bec6; padding: 10px 12px; border-radius: 10px; }
.navitem svg { width: 20px; height: 20px; flex: none; }
.navitem:hover { background: rgba(255, 255, 255, .05); border-color: transparent; color: #fff; }
.navitem.active { background: var(--orange-soft); color: var(--orange); border-color: rgba(251, 133, 29, .35); }
.navitem .label { flex: 1; }
.navitem .count { background: var(--orange); color: var(--orange-ink); font-size: 11px; font-weight: 700; border-radius: 999px; padding: 1px 7px; }
.sidebar-foot { margin-top: auto; padding: 14px 16px 16px; border-top: 1px solid var(--sidebar-line); display: flex; flex-direction: column; gap: 10px; }
.sidebar-foot .field span { font-size: 11px; color: #8a94a0; text-transform: uppercase; letter-spacing: .04em; }
.sidebar-foot input, .sidebar-foot select { background: rgba(255, 255, 255, .06); border-color: var(--sidebar-line); color: #e6e9ec; }
/* the person: Entra photo (or initials), name, sign-out; one row, no label */
.user { display: flex; align-items: center; gap: 10px; padding: 4px 0 0; }
.user-avatar { width: 30px; height: 30px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--orange); color: #1a1206; font-family: var(--font-title); font-weight: 700; font-size: 12px; letter-spacing: .02em; overflow: hidden; }
.user-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.user-name { flex: 1; color: #e6e9ec; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user .ghost { display: flex; align-items: center; padding: 6px; }
.user .ghost svg { width: 16px; height: 16px; }
.foot-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.foot-row .ghost { display: flex; align-items: center; gap: 8px; padding: 6px 8px; }
.foot-row .ghost svg { width: 16px; height: 16px; }
.version { font-size: 11px; color: #6c7680; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- content */
.content { padding: 24px 28px 40px; min-width: 0; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.page-head h1 { margin: 0; font-family: var(--font-title); font-size: 24px; font-weight: 700; letter-spacing: -.01em; }
.subtitle { margin: 4px 0 0; color: var(--muted); }
.page-actions { display: flex; gap: 8px; }
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px; }
.kpi { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; box-shadow: var(--shadow); position: relative; overflow: hidden; }
.kpi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--orange); }
.kpi-value { font-family: var(--font-title); font-size: 28px; font-weight: 700; letter-spacing: -.02em; }
.kpi-value.accent { color: var(--orange); }
.kpi-label { font-size: 12px; color: var(--muted); }
.split { display: grid; grid-template-columns: minmax(320px, 5fr) minmax(380px, 7fr); gap: 16px; align-items: start; }
.back-bar { display: none; }
.list-pane, .detail-pane { min-width: 0; }
.detail-pane { position: sticky; top: 24px; max-height: calc(100vh - 48px); overflow: auto; }
.filters { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { border-radius: 999px; padding: 5px 12px; font-size: 12px; background: var(--panel); }
.chip.active { background: var(--orange); color: var(--orange-ink); border-color: var(--orange); font-weight: 600; }

.rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.row { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px 12px 18px; cursor: pointer; box-shadow: var(--shadow); position: relative; transition: border-color .15s, transform .1s; }
.row::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: var(--line-strong); }
.row.sev-High::before { background: var(--high); } .row.sev-Medium::before { background: var(--medium); } .row.sev-Low::before { background: var(--low); } .row.sev-Info::before { background: var(--info); }
.row:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.row.selected { border-color: var(--orange); box-shadow: 0 0 0 3px var(--orange-soft), var(--shadow); }
.row .title { font-family: var(--font-title); font-weight: 600; margin: 4px 0 4px; line-height: 1.35; }
.row .meta { color: var(--muted); font-size: 12px; display: flex; gap: 10px; flex-wrap: wrap; }
.badges { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.badge { font-size: 11px; font-weight: 600; letter-spacing: .02em; padding: 2px 8px; border-radius: 999px; color: #fff; background: var(--info); }
.badge.sev-High { background: var(--high); color: #fff; } .badge.sev-Medium { background: var(--medium); color: #1a1206; } .badge.sev-Low { background: var(--low); color: #06210f; } .badge.sev-Info { background: var(--info); }
.badge.st-Open { background: var(--open); } .badge.st-Acknowledged { background: #2f7bd9; } .badge.st-Known { background: var(--known); } .badge.st-Monitoring { background: var(--monitor); color: #06282c; }
.badge.st-Resolved, .badge.st-Dismissed, .badge.st-Cancelled { background: var(--closed); }
.badge.st-Succeeded { background: var(--low); color: #06210f; } .badge.st-Failed { background: var(--high); } .badge.st-Running, .badge.st-Queued, .badge.st-WaitingForData { background: var(--medium); color: #1a1206; }
.badge.tier-Verified { background: #2e9e5b; } .badge.tier-Confirmed { background: #2f7bd9; } .badge.tier-Hypothesis { background: #9a7b6b; }
.badge.outline { background: transparent; color: var(--muted); border: 1px solid var(--line-strong); }

.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow); margin-bottom: 12px; }
.card h3 { margin: 0 0 8px; font-family: var(--font-title); font-size: 16px; font-weight: 700; line-height: 1.35; }
.card h4 { margin: 14px 0 6px; font-family: var(--font-title); font-weight: 700; font-size: 11px; color: var(--orange); text-transform: uppercase; letter-spacing: .1em; }
.card p { margin: 6px 0; line-height: 1.5; }
.form { display: flex; flex-direction: column; gap: 10px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
/* occurrences of a finding: one card per sighting, newest first, older ones to the right by drag or arrows */
.occurrences { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; gap: 0; margin: 0 -4px 10px; }
.occurrences::-webkit-scrollbar { display: none; }
.occ { flex: 0 0 100%; scroll-snap-align: start; padding: 0 4px; box-sizing: border-box; min-width: 0; }
.occ-when { margin: 4px 0 6px; font-size: 12px; color: var(--muted); }
.occ-when b { color: var(--orange); }
.occ .kv { margin-bottom: 4px; }
.occ-nav { display: flex; align-items: center; gap: 6px; margin: 4px 0 2px; }
.occ-nav .ghost { padding: 2px 10px; font-size: 18px; line-height: 1; }
.occ-hint { margin-left: auto; }
.kv { display: grid; grid-template-columns: 140px 1fr; gap: 6px 12px; font-size: 13px; }
.kv dt { color: var(--muted); } .kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.evidence { display: flex; gap: 6px; flex-wrap: wrap; }
.evidence button { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; padding: 3px 8px; color: var(--orange); }
/* Illustrations: a sparkline on each card, a detailed chart on the open finding. Colors follow the theme tokens. */
.spark { display: flex; align-items: center; gap: 10px; margin-top: 8px; min-height: 0; }
.spark:empty { display: none; }
.spark .ill-svg { width: 150px; height: 34px; flex: none; }
.spark-label { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spark-label b { color: var(--ink); font-weight: 600; }
.ill-svg { display: block; width: 100%; overflow: visible; }
.ill-svg.detailed { height: auto; }
.ill-svg .win-band { fill: var(--orange-soft); }
.ill-svg .base { fill: none; stroke: var(--line-strong); stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.ill-svg .win { fill: none; stroke: var(--orange); stroke-width: 2.4; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.ill-svg .mean { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.ill-svg .target { stroke: var(--low); stroke-width: 1; stroke-dasharray: 2 4; vector-effect: non-scaling-stroke; }
.ill-svg .dot { fill: var(--panel); stroke: var(--line-strong); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.ill-svg .dot.win { fill: var(--orange); stroke: var(--panel); stroke-width: 1.5; }
.ill-svg .axis { font-size: 10.5px; font-weight: 300; letter-spacing: .02em; fill: var(--faint); font-family: var(--font-ui); }
.ill-svg .axis.win { fill: var(--orange); }
.illustration { margin: 12px 0 14px; padding: 12px 14px 10px; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.illustration .empty { margin: 0; }
.ill-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.ill-head h4 { margin: 0; }
.ill-recompute { color: var(--orange); text-decoration: none; border: 1px solid var(--line-strong); border-radius: 999px; padding: 1px 9px; font-size: 11px; white-space: nowrap; }
.ill-recompute:hover { border-color: var(--orange); }
.ill-recompute.busy { color: var(--muted); border-color: var(--line); pointer-events: none; }
.ill-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin: 6px 0 4px; }
.ill-legend .sw { display: inline-block; width: 12px; height: 3px; border-radius: 2px; margin-right: 6px; vertical-align: middle; background: var(--line-strong); }
.ill-legend .sw.win { background: var(--orange); height: 4px; } .ill-legend .sw.base { background: var(--muted); } .ill-legend .sw.target { background: var(--low); }
.ill-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; margin-top: 4px; }
/* ramp-up strips of a setup finding: one column per minute after the setup */
.ramps { margin-top: 12px; } .ramps h4 { margin: 0 0 6px; }
.ramp { margin: 6px 0 10px; }
.ramp-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 12px; margin-bottom: 3px; }
.ill-svg.ramp { height: 64px; }
.ill-svg .rm.running, .ill-legend .sw.rm-running { fill: var(--orange); background: var(--orange); }
.ill-svg .rm.micro, .ill-legend .sw.rm-micro { fill: var(--medium); background: var(--medium); }
.ill-svg .rm.down, .ill-legend .sw.rm-down { fill: var(--high); background: var(--high); }
.ill-svg .rm.planned, .ill-legend .sw.rm-planned { fill: var(--faint); background: var(--faint); }
.ill-svg .rm.none, .ill-legend .sw.rm-none { fill: var(--line); background: var(--line); }
.ill-legend .sw[class*="rm-"] { height: 8px; width: 10px; border-radius: 2px; }
.ill-svg .area { fill: var(--line-strong); opacity: .25; }
.ill-svg .area.win { fill: var(--orange); opacity: .28; }
.ill-grid h4 { margin-top: 10px; }
.bars { display: flex; flex-direction: column; gap: 5px; font-size: 12px; }
.bar-row { display: grid; grid-template-columns: minmax(80px, 38%) 1fr auto; gap: 8px; align-items: center; }
.bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.bar-track { height: 8px; background: var(--line); border-radius: 4px; overflow: hidden; }
.bar-fill { display: block; height: 100%; background: var(--line-strong); border-radius: 4px; }
.bar-row.hl .bar-label { color: var(--ink); font-weight: 600; } .bar-row.hl .bar-fill { background: var(--orange); }
.bar-value { white-space: nowrap; font-variant-numeric: tabular-nums; } .bar-value em { font-style: normal; color: var(--muted); }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(105px, 1fr)); gap: 8px; }
.tile { display: flex; flex-direction: column; gap: 1px; padding: 8px 10px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.tile-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.tile-value { font-family: var(--font-title); font-weight: 700; font-size: 20px; line-height: 1.2; }
.tile-base { font-size: 11px; color: var(--muted); } .tile-base em { font-style: normal; font-weight: 600; } .tile-base em.down { color: var(--high); } .tile-base em.up { color: var(--low); }
.small { font-size: 12px; }
.kv.small { grid-template-columns: 120px 1fr; font-size: 12px; margin-top: 6px; }
.kv code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; color: var(--muted); }
.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li { padding: 6px 0; border-top: 1px solid var(--line); font-size: 13px; }
.timeline .when { color: var(--muted); font-size: 12px; margin-right: 8px; }
.empty { color: var(--muted); padding: 24px 8px; text-align: center; }
.placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 64px 24px; color: var(--muted); text-align: center; border: 1px dashed var(--line-strong); border-radius: var(--radius); }
.placeholder img { width: 44px; opacity: .35; }
.hint { color: var(--muted); font-size: 12px; margin: -4px 0 0; line-height: 1.4; }

.chat { display: flex; flex-direction: column; gap: 8px; }
.messages { display: flex; flex-direction: column; gap: 8px; max-height: 520px; overflow: auto; padding: 4px; }
.msg { padding: 9px 12px; border-radius: 12px; max-width: 92%; line-height: 1.45; }
.msg.user { align-self: flex-end; background: var(--orange-soft); border: 1px solid rgba(251, 133, 29, .3); white-space: pre-wrap; }
.msg.assistant { align-self: stretch; max-width: 100%; background: var(--panel-2); border: 1px solid var(--line); min-width: 0; }
.msg .who { font-size: 11px; color: var(--muted); margin-bottom: 2px; }
.msg .tools { font-size: 11px; color: var(--faint); margin-top: 6px; }
.msg .tools summary { cursor: pointer; }
.msg p { margin: 6px 0; } .msg p:first-of-type { margin-top: 2px; } .msg ul, .msg ol { margin: 6px 0; padding-left: 20px; }
.msg h1, .msg h2, .msg h3 { font-family: var(--font-title); font-size: 14px; margin: 10px 0 4px; }
.msg pre { background: var(--input); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 10px; font-size: 12px; overflow: auto; }
.table-wrap { overflow-x: auto; margin: 8px 0; }
table.md { border-collapse: collapse; width: 100%; font-size: 12px; }
table.md th, table.md td { padding: 4px 6px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
table.md th { font-family: var(--font-title); font-weight: 700; font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; border-bottom: 1px solid var(--line-strong); }
table.md td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.chat-chart { margin: 8px 0; padding: 8px 8px 4px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm); }
#cost-chart .chat-chart { background: var(--panel-2); }
.chat-chart .ill-svg .axis.val { fill: var(--ink); font-weight: 400; }
.chart-caption { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin: 4px 2px 2px; }
.chart-caption .sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.chat-budget { margin: 0; text-align: right; }
.warn { color: var(--medium); font-weight: 600; }
table.md td.warn { color: var(--medium); }
table.md a { color: var(--ink); text-decoration: none; border-bottom: 1px dotted var(--line-strong); }
table.md a:hover { color: var(--orange); }
.chat form { display: flex; gap: 8px; }
.chat form input { flex: 1; }

.report { line-height: 1.55; }
.report h1, .report h2, .report h3 { margin: 12px 0 6px; } .report h1 { font-size: 18px; } .report h2 { font-size: 16px; } .report h3 { font-size: 14px; color: var(--orange); }
.report ul, .report ol { margin: 4px 0 8px 20px; } .report code { background: var(--panel-2); padding: 1px 4px; border-radius: 4px; font-size: 12px; }
.steps { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.steps li { padding: 4px 0; border-top: 1px solid var(--line); }
.steps .err, .err { color: var(--high); }
details summary { cursor: pointer; color: var(--muted); font-size: 13px; margin: 6px 0; }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 10px; box-shadow: var(--shadow); z-index: 20; max-width: 90vw; }
.toast.error { background: var(--high); color: #fff; }
dialog { border: 1px solid var(--line); background: var(--panel); color: var(--ink); border-radius: var(--radius); padding: 0; width: min(900px, 92vw); max-height: 85vh; }
dialog::backdrop { background: rgba(0, 0, 0, .6); }
.modal-body { padding: 16px; display: flex; flex-direction: column; max-height: 85vh; }
.modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.modal-head h3 { margin: 0; font-size: 13px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--orange); }
#modal-content { overflow: auto; background: var(--bg); padding: 12px; border-radius: 8px; font-size: 12px; margin: 0; }
.modal-md { overflow: auto; padding: 4px 8px 12px; font-size: 13px; line-height: 1.55; }
.modal-md h1 { font-family: var(--font-title); font-size: 20px; margin: 4px 0 10px; } .modal-md h2 { font-family: var(--font-title); font-size: 15px; margin: 18px 0 6px; color: var(--orange); }
.modal-md h3 { font-family: var(--font-title); font-size: 13.5px; margin: 14px 0 4px; } .modal-md p { margin: 6px 0; } .modal-md ul, .modal-md ol { margin: 6px 0; padding-left: 22px; }
.modal-md code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; background: var(--input); padding: 1px 5px; border-radius: 4px; }
.modal-md pre { background: var(--input); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 10px; font-size: 12px; overflow: auto; }
.modal-md table.md { font-size: 12.5px; }
a.discreet { color: var(--muted); text-decoration: none; border-bottom: 1px dotted var(--line-strong); font-size: 12px; }
a.discreet:hover { color: var(--orange); border-bottom-color: var(--orange); }

@media (max-width: 1100px) {
  .kpis { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  body { grid-template-columns: 64px 1fr; }
  .sidebar-brand { padding: 16px 12px; justify-content: center; }
  .brand-logo { display: none; }
  .brand-symbol { display: block; width: 34px; height: 34px; object-fit: contain; }
  .brand-wordmark, .brand-product, .navitem .label, .sidebar-foot .field, .sidebar-foot .label, .version { display: none; }
  /* collapsed footer: only the sign-out, theme and tour icons, stacked; the plant selector needs the wide sidebar */
  .sidebar-foot { padding: 10px 8px 12px; gap: 4px; align-items: center; }
  .user { justify-content: center; gap: 4px; padding: 0; flex-direction: column; }
  .user-name { display: none; }
  /* the replica line collapses to its dot; the text lives in the title and in the panel */
  .replica-line { width: 26px; height: 26px; padding: 0; margin: 2px 0; justify-content: center; border-radius: 50%; }
  .replica-line #replica-text { display: none; }
  /* the analyst's tabs scroll on their own instead of widening the page */
  .tabs { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs .tab { flex: none; white-space: nowrap; }
  .foot-row { flex-direction: column; gap: 4px; }
  .foot-row .ghost, .user .ghost { padding: 8px; }
  .navitem { justify-content: center; padding: 10px; }
  .navitem .count { position: absolute; top: 2px; right: 2px; font-size: 10px; line-height: 14px; padding: 0 4px; min-width: 16px; text-align: center; }
  .split { grid-template-columns: 1fr; }
  .detail-pane { position: static; max-height: none; }
  /* a selected item takes the screen; the list, tiles and filters come back with the back bar or the back gesture */
  .view.detail-open .kpis, .view.detail-open .list-pane { display: none; }
  /* with nothing open the list is the screen: the detail column (placeholder or a stale selection) stays out of the way */
  #view-inbox:not(.detail-open) .detail-pane, #view-analyst:not(.detail-open) .detail-pane { display: none; }
  /* a finding opened from an analyst's page takes the screen: the analyst's header and tabs step aside with the list */
  #view-analyst.detail-open .agent-head, #view-analyst.detail-open .tabs, #view-analyst.detail-open .back-link { display: none; }
  .agent-head { padding: 14px; gap: 12px; }
  #view-analyst .agent-facts { grid-template-columns: 1fr; gap: 2px 0; }
  #view-analyst .agent-facts dt { margin-top: 6px; font-size: 12px; }
  /* the analyst editor takes the screen too: the list column shows only the form, the detail column hides */
  .view.form-open .list-pane > :not(#analyst-form), .view.form-open .detail-pane, .view.form-open .kpis { display: none; }
  .back-bar { display: flex; align-items: center; gap: 6px; width: 100%; margin: 0 0 10px; padding: 8px 10px; background: transparent; border: 1px solid var(--line); color: var(--orange); font-weight: 600; text-align: left; }
  .back-bar .chev { font-size: 20px; line-height: 1; }
  .ill-grid { grid-template-columns: 1fr; }
  .grid3 { grid-template-columns: 1fr; }
  .content { padding: 16px; }
}

/* analysts home: one card per analyst, and the analyst page with its tabs */
.agents { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.agent { position: relative; text-align: left; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 16px 14px; box-shadow: var(--shadow); cursor: pointer; display: flex; flex-direction: column; gap: 8px; color: var(--ink); font: inherit; transition: transform .12s, border-color .12s; }
.agent:hover, .agent:focus-visible { border-color: var(--orange); transform: translateY(-2px); outline: none; }
.agent.paused { opacity: .72; }
.agent h3 { margin: 0; font-family: var(--font-title); font-size: 17px; font-weight: 700; line-height: 1.3; }
.agent .objective { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.says { margin: 0; font-size: 13px; line-height: 1.45; font-style: italic; border-left: 3px solid var(--orange); padding-left: 10px; }
.agent .meta { color: var(--muted); font-size: 12px; display: flex; gap: 10px; flex-wrap: wrap; margin-top: auto; }
.agent > .count { position: absolute; top: 12px; right: 12px; min-width: 22px; height: 22px; line-height: 22px; text-align: center; padding: 0 6px; border-radius: 999px; background: var(--orange); color: var(--orange-ink); font-weight: 700; font-size: 12px; }
.agent.add { border-style: dashed; align-items: center; justify-content: center; text-align: center; background: transparent; box-shadow: none; }
.agent.add .plus { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--orange); color: var(--orange); font-size: 28px; line-height: 40px; font-weight: 300; }
.agent.add p { margin: 0; font-size: 12px; }
.avatar { border-radius: 50%; box-shadow: 0 4px 12px rgba(0, 0, 0, .25); flex: none; }
.agent-head { display: flex; gap: 18px; align-items: flex-start; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); margin-bottom: 14px; flex-wrap: wrap; }
.agent-info { flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: 8px; }
.agent-info p { margin: 0; }
.agent-head .actions { margin: 0; align-items: center; }
.agent-facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; font-size: 13px; align-items: baseline; margin: 2px 0; }
.agent-facts dt { color: var(--muted); white-space: nowrap; }
.agent-facts dd { margin: 0; }
.scope-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip.scope { font-size: 11px; padding: 3px 9px; background: var(--panel-2); border: 1px solid var(--line-strong); color: var(--ink); cursor: default; }
.chip.scope.more { cursor: pointer; color: var(--orange); border-color: var(--orange); background: transparent; }
.scope-rest { display: contents; }
#run-detail .card:first-child { margin-top: 0; }
.row .says.small { font-size: 12px; margin: 4px 0; }
.convos { margin-top: 10px; }
.convos .row { padding-left: 14px; }
.convos .row::before { display: none; }
.convos .meta { align-items: center; }
button.tiny { padding: 0 6px; font-size: 14px; line-height: 1.2; margin-left: auto; }
.messages.tall { max-height: calc(100vh - 320px); min-height: 240px; }
#conversation-pane .card.chat { margin-bottom: 0; }
.live-steps { list-style: none; margin: 4px 0 6px; padding: 0; display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--muted); }
.live-steps li::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; vertical-align: middle; background: var(--line-strong); }
.live-steps li.did::before { background: var(--low); }
.live-steps li.doing { color: var(--ink); }
.live-steps li.doing::before { background: var(--orange); animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.live-text:empty { display: none; }
.title-edit { width: 100%; font: inherit; padding: 2px 6px; border: 1px solid var(--orange); border-radius: 6px; background: var(--input); color: var(--ink); }
h3.editable { cursor: text; }
h3.editable:hover { text-decoration: underline dotted var(--muted); }
.live-steps li .elapsed { margin-left: 8px; color: var(--faint); font-variant-numeric: tabular-nums; }
.live-stop { float: right; margin-left: 10px; padding: 0 8px; font-size: 11px; line-height: 18px; border: 1px solid var(--line-strong); border-radius: 9px; background: transparent; color: var(--muted); cursor: pointer; }
.live-stop:hover { color: var(--ink); border-color: var(--orange); }
.live-stop:disabled { opacity: .5; cursor: default; }
.msg-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
button.small { font-size: 12px; padding: 4px 10px; }
.read-actions { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); }
.read-actions button { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; }
.read-actions .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 3px var(--orange-soft); }
label.inline { display: flex; flex-direction: row; align-items: center; gap: 6px; font-size: 12px; }
label.inline input { width: auto; }
.badge.unread { background: var(--orange); color: var(--orange-ink); }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.tab { background: transparent; border: 0; border-bottom: 2px solid transparent; border-radius: 0; padding: 8px 14px; color: var(--muted); font-weight: 600; }
.tab:hover { color: var(--ink); border-color: transparent; border-bottom-color: var(--line-strong); }
.tab.active, .tab.active:hover { color: var(--orange); border-bottom-color: var(--orange); }
.back-link { background: transparent; border: 0; color: var(--muted); padding: 0 0 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.back-link:hover { color: var(--orange); border-color: transparent; }
.back-link .chev { font-size: 20px; line-height: 1; }
.row.unread .title::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); margin-right: 8px; vertical-align: middle; }
.avatar-pick { display: flex; gap: 8px; flex-wrap: wrap; }
.form .avatar-pick label { display: block; position: relative; cursor: pointer; margin: 0; }
.avatar-pick input { position: absolute; opacity: 0; width: 0; height: 0; }
.avatar-pick img { width: 48px; height: 48px; border-radius: 50%; border: 2px solid transparent; display: block; transition: transform .1s; }
.avatar-pick input:checked + img { border-color: var(--orange); box-shadow: 0 0 0 3px var(--orange-soft); transform: scale(1.06); }
.avatar-pick input:focus-visible + img { box-shadow: 0 0 0 3px var(--orange-soft); }

.analyst-chips .chip { display: inline-flex; align-items: center; gap: 6px; padding-left: 6px; }
.analyst-chips .chip img { width: 20px; height: 20px; border-radius: 50%; }
.analyst-chips .chip.active img { box-shadow: 0 0 0 2px var(--orange-ink); }
.row .seen { display: flex; align-items: center; gap: 4px; margin-top: 6px; color: var(--muted); font-size: 12px; }
.row .seen img { width: 20px; height: 20px; border-radius: 50%; margin-right: -6px; border: 2px solid var(--panel); }
.row .seen span { margin-left: 10px; }

/* resource picker: chips for the selection, a menu of matches while typing */
.picker { position: relative; display: flex; flex-direction: column; gap: 6px; }
.picker-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.picker-chips:empty { display: none; }
.chip.picked { display: inline-flex; align-items: center; gap: 6px; background: var(--panel-2); border: 1px solid var(--line-strong); font-weight: 500; }
.chip.picked button { border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 15px; line-height: 1; padding: 0; }
.chip.picked button:hover { color: var(--high); }
.picker-menu { position: absolute; top: 100%; left: 0; right: 0; z-index: 30; margin: 4px 0 0; padding: 4px 0; list-style: none; max-height: 240px; overflow: auto; background: var(--bg-elev); border: 1px solid var(--line-strong); border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, .18); }
.picker-menu li { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 7px 12px; cursor: pointer; font-size: 13px; }
.picker-menu li small { color: var(--muted); font-size: 11px; white-space: nowrap; }
.picker-menu li:hover { background: var(--panel-2); }
.picker-menu li.none { color: var(--muted); cursor: default; }

/* guided tour: a spotlight over the real page and a tip beside it */
.tour-layer { position: fixed; inset: 0; z-index: 1000; pointer-events: none; }
.tour-spot { position: fixed; border-radius: 10px; box-shadow: 0 0 0 9999px rgba(8, 12, 16, .62); outline: 2px solid var(--orange); outline-offset: 2px; transition: left .25s ease, top .25s ease, width .25s ease, height .25s ease; pointer-events: none; }
.tour-spot.none { outline: none; }
.tour-tip { position: fixed; width: 380px; max-width: calc(100vw - 24px); background: var(--bg-elev); color: var(--ink); border: 1px solid var(--line-strong); border-radius: 12px; padding: 12px 16px 12px; box-shadow: 0 14px 36px rgba(0, 0, 0, .4); pointer-events: auto; display: flex; flex-direction: column; gap: 8px; }
.tour-tip.center { left: 50%; top: 50%; transform: translate(-50%, -50%); width: 540px; padding: 20px 24px 16px; }
.tour-head { display: flex; justify-content: space-between; align-items: center; }
.tour-step { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.tour-tip h4 { font-family: var(--font-title); font-size: 17px; margin: 0; }
.tour-tip.center h4 { font-size: 22px; }
.tour-tip p { margin: 0; font-size: 14px; line-height: 1.55; }
.tour-tip.center p { font-size: 15px; }
.tour-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.tour-example { font-weight: 600; background: var(--orange-soft); color: var(--orange); border: 1px solid rgba(251, 133, 29, .4); }
.badge.tour-example { color: var(--orange); }

/* ---------------------------------------------------------------- waiting, without blocking
   A thin bar at the top while any request is in flight; grey skeletons where a list is about to appear; a button that is
   doing its own request is disabled and dimmed. Nothing covers the page: the person can keep navigating. */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; pointer-events: none; background: transparent; }
.progress span { display: block; height: 100%; width: 30%; background: var(--orange); border-radius: 0 2px 2px 0; animation: progress-slide 1.1s ease-in-out infinite; box-shadow: 0 0 8px var(--orange); }
@keyframes progress-slide { 0% { transform: translateX(-100%); width: 30%; } 50% { width: 45%; } 100% { transform: translateX(340%); width: 30%; } }
.skeleton { pointer-events: none; }
.skeleton .bone { display: block; border-radius: 6px; background: linear-gradient(90deg, var(--line) 25%, color-mix(in srgb, var(--line) 55%, var(--panel)) 50%, var(--line) 75%); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.agent.skeleton { cursor: default; min-height: 300px; }
.agent.skeleton .bone.avatar { width: 64px; height: 64px; border-radius: 50%; }
.agent.skeleton .bone.pill { width: 40%; height: 18px; border-radius: 999px; }
.agent.skeleton .bone.title { width: 70%; height: 22px; margin-top: 6px; }
.agent.skeleton .bone.line { width: 100%; height: 12px; }
.agent.skeleton .bone.line.short { width: 60%; }
.row.skeleton { cursor: default; display: flex; flex-direction: column; gap: 8px; }
.row.skeleton .bone.title { width: 65%; height: 16px; }
.row.skeleton .bone.line { width: 90%; height: 11px; }
.row.skeleton .bone.line.short { width: 45%; }
button.busy, button[disabled].busy { opacity: .6; cursor: progress; }

/* ---------------------------------------------------------------- replica line under the plant selector */
.replica-line { display: flex; align-items: center; gap: 8px; width: 100%; margin: 6px 0 0; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: transparent; color: var(--muted); font: inherit; font-size: 12px; text-align: left; cursor: pointer; }
.replica-line:hover { border-color: var(--orange); color: var(--ink); }
.replica-line .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex: none; }
.replica-line.ok .dot { background: #3fb950; }
.replica-line.stale .dot { background: #d29922; }
.replica-line.error .dot { background: #f85149; }
.replica-line.running .dot { background: var(--orange); animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.cycle-head { margin: 12px 0 6px; }
.cycle-bar { position: relative; height: 14px; border-radius: 7px; background: var(--line); overflow: hidden; margin: 6px 0 12px; }
.cycle-bar .fill { height: 100%; background: var(--orange); transition: width 0.6s ease; }
.cycle-bar .fill.live { background-image: linear-gradient(90deg, var(--orange) 0 60%, rgba(255,255,255,0.35) 80%, var(--orange)); background-size: 200% 100%; animation: slide 1.6s linear infinite; }
.cycle-bar .fill.indeterminate { animation: slide 1.2s linear infinite; background-image: linear-gradient(90deg, var(--orange) 0 40%, rgba(255,255,255,0.4) 50%, var(--orange) 60%); background-size: 200% 100%; }
@keyframes slide { from { background-position: 200% 0; } to { background-position: 0 0; } }
.cycle-bar .cycle-pct { position: absolute; right: 8px; top: -1px; font-size: 11px; color: var(--ink); }
.cycle-bar.small { height: 6px; margin: 4px 0 0; width: 220px; }
table.steps { width: 100%; border-collapse: collapse; font-size: 13px; }
table.steps td, table.steps th { padding: 4px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
table.steps .step-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); margin-right: 6px; }
table.steps .step.running .step-dot { background: var(--orange); animation: pulse 1.2s ease-in-out infinite; }
table.steps .step.done .step-dot { background: #3fb950; }
table.steps .step.failed .step-dot { background: #f85149; }
table.steps .step.waiting td { color: var(--muted); }
.replica-error { color: #f85149; }
details.syncs { margin: 14px 0 8px; }
details.syncs summary { cursor: pointer; color: var(--muted); }
details.syncs table { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 8px; }
details.syncs td, details.syncs th { padding: 3px 8px; border-bottom: 1px solid var(--line); text-align: left; }
details.syncs td.num { text-align: right; }
.token-box { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; word-break: break-all; padding: 10px; border: 1px dashed var(--orange); border-radius: 8px; margin: 8px 0; user-select: all; }