/* BrainTrust console — the Task tree, Sent to AI and Logs screens. Every value comes from css/tokens.css, so both themes
   carry through. Loaded after console.css and shell.css. */

/* ── Task tree (screens/tasktree.js) — one tint per sub-task kind ─────────────────────────────────────────── */
.tt-small{ font-size: var(--fs-xs); }
.k-tool{ --k: var(--info); --k-soft: var(--info-soft); } .k-plan{ --k: var(--violet); --k-soft: var(--violet-soft); }
.k-answer{ --k: var(--warning); --k-soft: var(--warning-soft); } .k-local{ --k: var(--success); --k-soft: var(--success-soft); }
.k-other{ --k: var(--text-muted); --k-soft: var(--surface-2); }
.tt-legend{ display: flex; gap: var(--sp-4); flex-wrap: wrap; font-size: var(--fs-xs); color: var(--text-muted); margin-bottom: var(--sp-4); }
.tt-legend span{ display: inline-flex; align-items: center; gap: 6px; }
.tt-legend i{ width: 12px; height: 12px; border-radius: 3px; display: inline-block; background: var(--k-soft); border: 1px solid var(--k); }
.tt-tree{ margin-bottom: var(--sp-6); }
.tt-tree[hidden]{ display: none; }
.tt-root{ border-left: 3px solid var(--accent); margin-bottom: 0; }
.tt-root.clickable{ cursor: pointer; } .tt-root.clickable:hover{ box-shadow: var(--shadow-sm); }
.tt-lbl{ font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .06em; font-weight: var(--fw-semibold); color: var(--accent-text); margin: var(--sp-3) 0 4px; }
.tt-ask{ font-size: var(--fs-lg); line-height: 1.35; font-weight: var(--fw-semibold); white-space: pre-wrap; overflow-wrap: anywhere; margin-bottom: var(--sp-2); }
.tt-ask.none{ font-size: var(--fs-sm); font-weight: var(--fw-regular); color: var(--text-muted); font-style: italic; }
.tt-did{ color: var(--text-2); white-space: pre-wrap; overflow-wrap: anywhere; margin-bottom: var(--sp-2); }
.tt-meta{ display: flex; flex-wrap: wrap; gap: 4px var(--sp-4); font-size: var(--fs-xs); color: var(--text-muted); margin-top: 4px; min-width: 0; }
.tt-meta > span{ min-width: 0; overflow-wrap: anywhere; }
.tt-meta b{ color: var(--text-2); font-weight: var(--fw-medium); }
.tt-ids{ margin-top: var(--sp-3); padding-top: var(--sp-2); border-top: 1px dashed var(--border); align-items: center; }
.tt-ids a{ display: inline-flex; align-items: center; gap: 4px; }
.tt-trunk{ width: 2px; height: 18px; background: var(--border-strong); margin-left: 32px; }
.tt-branches{ display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--sp-3); align-items: start; }
.tt-sub{ border: 1px solid color-mix(in srgb, var(--k) 35%, var(--border)); background: var(--k-soft); border-radius: var(--r-lg); padding: var(--sp-3) var(--sp-4); min-width: 0; }
.tt-kind{ font-size: var(--fs-xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .05em; color: var(--k); display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.tt-star{ display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-2xs); padding: 1px 8px; border-radius: var(--r-full); background: var(--surface); border: 1px solid var(--border); color: var(--warning); text-transform: none; letter-spacing: 0; }
.tt-plain{ font-size: var(--fs-sm); color: var(--text); margin: 6px 0 2px; line-height: 1.4; }
.tt-facts{ display: grid; grid-template-columns: auto 1fr; gap: 3px var(--sp-3); font-size: var(--fs-xs); margin: var(--sp-2) 0 0; color: var(--text-2); }
.tt-facts dt{ color: var(--text-muted); } .tt-facts dd{ margin: 0; min-width: 0; overflow-wrap: anywhere; }
.tt-need{ display: inline-block; height: 6px; width: 64px; background: var(--surface); border: 1px solid var(--border); border-radius: 4px; vertical-align: middle; overflow: hidden; margin-right: 6px; }
.tt-need i{ display: block; height: 100%; background: var(--k); opacity: .75; }
.tt-dec{ margin-top: var(--sp-2); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-2) var(--sp-3); font-size: var(--fs-xs); min-width: 0; }
.tt-model{ font-weight: var(--fw-semibold); color: var(--text); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.tt-why > summary{ color: var(--accent-text); font-size: var(--fs-xs); margin-top: 4px; }
.tt-why pre{ margin: 6px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--fs-2xs); }
.tt-lane{ margin-top: var(--sp-4); } .tt-lane h3{ font-size: var(--fs-xs); color: var(--text-muted); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: .05em; margin: 0 0 var(--sp-2); }
.tt-decs{ display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: var(--sp-2); } .tt-decs .tt-dec{ margin-top: 0; }
.tt-turns{ display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: var(--sp-3); }
.tt-turns > .empty-state{ grid-column: 1 / -1; }
.tt-turn{ display: flex; flex-direction: column; gap: 6px; text-align: left; font: inherit; color: var(--text); cursor: pointer; padding: var(--sp-3); border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-xs); min-width: 0; }
.tt-turn:hover{ border-color: var(--accent-ring); } .tt-turn.sel{ border-color: var(--accent); background: var(--accent-soft); }
.tt-turn > *{ min-width: 0; max-width: 100%; }
.tt-askline{ font-weight: var(--fw-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tt-askline.none{ color: var(--text-muted); font-weight: var(--fw-regular); font-style: italic; }
.tt-planline{ font-size: var(--fs-2xs); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--font-mono); }
.tt-flash{ animation: ttflash 1.6s ease-out 1; } @keyframes ttflash{ 0%{ box-shadow: 0 0 0 3px var(--accent-ring); } 100%{ box-shadow: none; } }
.tt-pulse{ animation: blink 1.4s infinite; }
body.tt-ov-open{ overflow: hidden; }
.tt-ov{ position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: var(--sp-6) var(--sp-4); background: var(--scrim); backdrop-filter: blur(4px); }
.tt-ov[hidden]{ display: none; }
.tt-ov-panel{ width: min(94vw, 1320px); max-height: calc(100vh - 48px); display: flex; flex-direction: column; background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); overflow: hidden; }
.tt-ov-head{ display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); background: var(--surface); }
.tt-ov-title{ font-weight: var(--fw-semibold); font-size: var(--fs-md); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.tt-ov-nav{ display: flex; align-items: center; gap: 6px; margin-left: auto; }
.tt-ov-body{ overflow: auto; padding: var(--sp-4); }
@media (max-width: 600px){ .tt-ov{ padding: 0; } .tt-ov-panel{ width: 100vw; max-height: 100vh; height: 100vh; border-radius: 0; } .tt-ov-nav{ margin-left: 0; width: 100%; justify-content: space-between; } }

/* ── Sent to AI (screens/egress.js) ───────────────────────────────────────────────────────────────────────── */
.eg-status.ok-edge{ border-left: 3px solid var(--success-solid); } .eg-status.bad-edge{ border-left: 3px solid var(--danger-solid); }
.eg-ico{ flex: none; width: 36px; height: 36px; border-radius: var(--r-md); display: inline-flex; align-items: center; justify-content: center; }
.eg-ico.ok{ background: var(--success-soft); color: var(--success); } .eg-ico.bad{ background: var(--danger-soft); color: var(--danger); }
.eg-chips{ display: inline-flex; flex-wrap: wrap; gap: 4px; } .eg-chip{ cursor: help; }
.eg-row{ cursor: pointer; } .eg-row:focus-visible td{ background: var(--accent-soft); }
.eg-chev{ display: inline-flex; color: var(--text-muted); margin-right: 4px; vertical-align: -2px; transition: transform var(--dur) var(--ease); }
.eg-row[aria-expanded="true"] .eg-chev{ transform: rotate(90deg); }
.eg-detail > td{ background: var(--surface-sunken) !important; }
.eg-raw{ padding: var(--sp-2) 0; max-width: min(100%, 1100px); white-space: normal; }
.eg-small{ font-size: var(--fs-xs); }
.eg-privline{ display: flex; gap: var(--sp-2); align-items: flex-start; font-size: var(--fs-xs); color: var(--text-2); margin-bottom: var(--sp-2); overflow-wrap: anywhere; }
.eg-privline .ico{ color: var(--success); margin-top: 2px; }
.eg-sec{ margin-top: var(--sp-3); }
.eg-sec-h{ font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--warning); margin-bottom: 4px; }
.eg-pre{ white-space: pre-wrap; overflow-wrap: anywhere; max-height: 360px; margin: 0; font-size: var(--fs-xs); line-height: 1.55; background: var(--surface); }
.eg-ph{ background: var(--success-soft); color: var(--success); border-radius: 4px; padding: 0 3px; font-family: var(--font-mono); font-size: .95em; }
.eg-rs{ background: var(--violet-soft); color: var(--violet); border-radius: 4px; padding: 0 3px; }
.eg-raw-mark{ background: var(--danger-soft); color: var(--danger); border-radius: 4px; padding: 0 3px; }
.eg-pill{ display: inline-flex; align-items: center; gap: 4px; background: var(--success-soft); color: var(--success); border: 1px solid var(--success-border); border-radius: var(--r-full); padding: 0 8px; font-size: var(--fs-2xs); font-weight: var(--fw-semibold); vertical-align: 1px; }
.eg-panes{ display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: var(--sp-3); margin-top: var(--sp-4); }
.eg-pane{ border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-3) var(--sp-4); background: var(--surface-2); min-width: 0; }
.eg-pane.leaving{ border-color: var(--success-border); background: color-mix(in srgb, var(--success-soft) 55%, var(--surface)); }
.eg-pane.exposed{ border-color: var(--danger-border); background: color-mix(in srgb, var(--danger-soft) 55%, var(--surface)); }
.eg-pane-h{ font-weight: var(--fw-semibold); } .eg-pane-sub{ font-size: var(--fs-xs); color: var(--text-muted); margin-bottom: var(--sp-2); }
.eg-pane-body{ white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.7; font-size: var(--fs-sm); }
.eg-ledgerline{ display: flex; gap: var(--sp-2); align-items: flex-start; font-size: var(--fs-xs); margin-top: var(--sp-3); padding-top: var(--sp-2); border-top: 1px dashed var(--border); color: var(--success); }
.eg-ledgerline.muted{ color: var(--text-muted); } .eg-ledgerline.bad{ color: var(--danger); } .eg-ledgerline span{ color: var(--text-2); }
.eg-how{ display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--sp-3); margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--border); }
.eg-how > div{ display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-xs); color: var(--text-2); } .eg-how b{ color: var(--text); font-size: var(--fs-sm); }

/* ── Logs (screens/logs.js) ───────────────────────────────────────────────────────────────────────────────── */
.lg-lines{ font-family: var(--font-mono); font-size: var(--fs-xs); background: var(--surface-sunken); border: 1px solid var(--border); border-radius: var(--r-md); max-height: min(64vh, 640px); overflow: auto; }
.lg-lines .empty-state{ font-family: var(--font-sans); }
.lg-line{ display: grid; grid-template-columns: auto auto minmax(80px, auto) 1fr; gap: var(--sp-2); align-items: baseline; padding: 6px var(--sp-3); border-bottom: 1px solid var(--border); }
.lg-line:last-child{ border-bottom: 0; }
.lg-t{ color: var(--text-muted); white-space: nowrap; } .lg-tag{ color: var(--accent-text); white-space: nowrap; }
.lg-msg{ color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; min-width: 0; }
.lg-line.lv-error{ background: color-mix(in srgb, var(--danger-soft) 45%, transparent); } .lg-line.lv-warn{ background: color-mix(in srgb, var(--warning-soft) 40%, transparent); }
.lg-fail > summary{ display: inline-flex; gap: 6px; }
@media (max-width: 600px){ .lg-line{ grid-template-columns: auto 1fr; } .lg-line .lg-msg{ grid-column: 1 / -1; } }

/* ── the notices flag on the avatar (app.js) ─────────────────────────────────────────────────────────────── */
.avatar{ position: relative; }
.avatar-flag{ position: absolute; top: -2px; right: -2px; width: 9px; height: 9px; border-radius: 50%; background: var(--warning-solid); border: 2px solid var(--surface); }
/* page-header actions that are a segmented control wrap on a phone */
.page-actions .seg{ flex-wrap: wrap; }
.tablewrap.eg-wrap{ max-height: none; }
.tablewrap table.eg-table{ min-width: 820px; }
.eg-table td:nth-child(2){ min-width: 150px; overflow-wrap: normal; }
.eg-table td:nth-child(4){ min-width: 180px; }