/* syspulse playground — styles.
   Google product look (Roboto, Google palette, hairline cards); dark at the end.
   Colours come only from the tokens below. */

:root {
  color-scheme: light;

  /* surfaces (Cariara standard, tools/web/CARIARA_STYLE.md) */
  --canvas: #FFFFFF;
  --tint-blue: #E3F0FD;   /* intro band */
  --subtle: #F8F9FA;      /* table header, code, terminal */
  --hover: #F8F9FA;
  --hairline: #E8EAED;    /* card borders, dividers */
  --hair: #DADCE0;        /* inputs, chips, buttons */
  --hair-strong: #DADCE0;
  --grid: #E8EAED;

  /* text */
  --ink: #212226;
  --title: #5F6368;
  --body: #5F6368;
  --muted: #686D72;
  --disabled: #686D72;

  /* action */
  --action: #0058C2;
  --action-hover: #1558B0;
  --action-press: #1558B0;
  --action-tint: rgba(0,119,255,.12);
  --action-tint-2: rgba(0,119,255,.22);

  /* Google four: fills, text-safe variants, washes */
  --g-blue: #0077FF;   --g-blue-t: #0058C2;   --g-blue-bg: rgba(0,119,255,.12);
  --g-red: #EA4335;    --g-red-t: #C5221F;    --g-red-bg: rgba(234,67,53,.12);
  --g-yellow: #9AD61A; --g-yellow-t: #A85400; --g-yellow-bg: rgba(154,214,26,.22);
  --g-green: #00C896;  --g-green-t: #0D652D;  --g-green-bg: rgba(0,200,150,.14);

  /* legacy names used throughout, mapped onto the palette */
  --bg: var(--canvas);
  --panel: var(--canvas);
  --panel-2: var(--subtle);
  --line: var(--hair);
  --line-2: var(--hair);
  --text: var(--ink);
  --text-dim: var(--body);
  --text-faint: var(--disabled);

  /* ANSI ramp. Presentational only: the fixture check compares the escape
     sequences engine.js emits, not the colours they render as. */
  --a-red: #C5221F;
  --a-green: #0D652D;
  --a-blue: #0058C2;
  --a-cyan: #0058C2;
  --a-magenta: #212226;
  --a-dim: #686D72;
  --a-dimyellow: #A85400;

  --mono: "Roboto Mono", ui-monospace, Menlo, Consolas, monospace;
  --sans: Roboto, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  /* 8pt spacing scale */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px;

  /* Type scale */
  --fs-2xs: 11px; --fs-xs: 12px; --fs-sm: 13px;
  --fs-md: 14px;  --fs-lg: 16px; --fs-xl: 20px;

  --r-btn: 8px; --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-pill: 999px;
  --radius: 8px;

  --sh-hover: 0 1px 3px rgba(60,64,67,.15);
  --sh-dialog: 0 1px 3px rgba(60,64,67,.3), 0 4px 8px 3px rgba(60,64,67,.15);

  /* rotating seams: blue, red, yellow, green */
  --seam: 3px;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 14px; line-height: 20px;
  background: var(--canvas);
  color: var(--title);
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
}

/* The app root sits between the injected Cariara header and footer and takes
   exactly the height left over, so the page itself never scrolls: only the
   panes inside it do. */
.app {
  display: flex; flex-direction: column;
  height: calc(100vh - var(--cariara-chrome, 0px));
  min-height: 0; overflow: hidden;
  background: var(--canvas);
}

button { font-family: inherit; }
code { font-family: var(--mono); }

/* ---- top app bar ---- */
/* ---- sub-header (below the Cariara header) ---- */
.topbar {
  display: flex; align-items: center; gap: var(--s-3); flex-wrap: nowrap;
  height: 52px; padding: 0 var(--s-5);
  border-bottom: 1px solid var(--hairline);
  background: var(--canvas);
  flex: 0 0 auto;
  /* Anchors the mobile menu dropdown above later content. */
  position: relative; z-index: 30;
}
.brand { display: flex; align-items: center; gap: var(--s-2); flex: 0 0 auto; }
.brand-logo { width: 28px; height: 28px; flex: 0 0 auto; display: block; }
.brand-mark {
  font-family: var(--sans); font-weight: 500; font-size: 18px; line-height: 24px;
  color: var(--ink); text-decoration: none;
}
.host-chip {
  display: flex; align-items: center; gap: var(--s-2);
  margin-left: var(--s-2); padding: 0 var(--s-3); height: 32px;
  border: 1px solid var(--hair); border-radius: var(--r-pill);
  background: var(--canvas); font-size: var(--fs-xs); color: var(--body);
  font-family: var(--mono);
  flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden;
}
.host-chip > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.host-chip .host-dot,
.host-chip .host-sep,
.host-chip .sim-pill { flex: 0 0 auto; }
.host-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--g-green); }
.host-sep { color: var(--disabled); }
.host-distro { color: var(--body); }
.sim-pill {
  margin-left: var(--s-1); padding: 0 var(--s-2); border-radius: var(--r-pill);
  background: var(--g-yellow-bg); color: var(--g-yellow-t); box-shadow: inset 0 0 0 1px rgba(154,214,26,.5);
  font-family: var(--sans); font-weight: 500;
  font-size: var(--fs-2xs); line-height: 18px; text-transform: uppercase; letter-spacing: 0.6px;
}
/* A live reading of the operator's own machine is not a sandbox — the
   "simulated" pill flips to "live". */
.sim-pill.is-live { background: var(--g-green-bg); color: var(--g-green-t); box-shadow: inset 0 0 0 1px rgba(0,200,150,.4); }

.top-actions { margin-left: auto; display: flex; gap: var(--s-1); align-items: center; flex: 0 0 auto; }
/* On desktop the menu wrapper is layout-invisible (display: contents) and the
   explicit order below reproduces the button order. On mobile it becomes a
   dropdown behind the menu button. */
.top-menu { display: contents; }
#btn-menu { display: none; order: 8; }
#btn-tui { order: 2; } #btn-tutorial { order: 3; }
#btn-scenario { order: 4; } #btn-reset { order: 5; } #btn-settings { order: 6; } #btn-install { order: 7; }
/* Sub-header action icons take the Google four in turn. */
#btn-tui .ico { color: var(--g-blue); }
#btn-tutorial .ico { color: var(--g-red); }
#btn-scenario .ico { color: var(--g-yellow); }
#btn-reset .ico { color: var(--g-green); }
#btn-settings .ico { color: var(--g-blue); }
#btn-install .ico { color: #FFFFFF; }

/* ---- intro band: one row of context on the blue tint ---- */
.intro {
  position: relative; flex: 0 0 auto;
  display: flex; align-items: center; gap: var(--s-4);
  margin: var(--s-3) var(--s-5) 0; padding: 10px var(--s-5) 13px;
  background: var(--tint-blue); border-radius: 16px; overflow: hidden;
}
.intro-text { margin: 0; font-size: 14px; line-height: 20px; color: var(--body); min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.intro-text b { color: var(--ink); font-weight: 500; }
.intro-rule {
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg,#0077FF 0 25%,#5AA2FF 25% 50%,#9AD61A 50% 75%,#00C896 75%);
}

/* ---- buttons ----
   Base = secondary (white, hairline, blue text). Ghost = text button.
   Accent = primary (filled blue). */
.btn {
  display: inline-flex; align-items: center; gap: var(--s-2); white-space: nowrap;
  height: 36px; padding: 0 var(--s-4);
  border: 1px solid var(--hair); background: var(--canvas); color: var(--ink);
  border-radius: var(--r-btn); font-size: 14px; font-weight: 500; line-height: 20px;
  cursor: pointer; text-decoration: none;
  transition: background .15s, border-color .15s, box-shadow .15s, color .15s;
}
.btn:hover { background: var(--subtle); border-color: var(--hair); box-shadow: var(--sh-hover); }
.btn:active { background: var(--action-tint); }
.btn:focus-visible { outline: 2px solid var(--action); outline-offset: 1px; }
.btn .ico { color: inherit; }
.btn-ghost { background: transparent; border-color: transparent; color: var(--body); padding: 0 var(--s-3); }
.btn-ghost:hover { background: var(--hover); border-color: transparent; color: var(--ink); box-shadow: none; }
.btn-ghost:active { background: var(--grid); }
.btn-icon { gap: 0; width: 40px; height: 40px; padding: 0; justify-content: center; border-radius: 50%; }
.btn-primary,
.btn-accent {
  background: var(--action); border-color: var(--action); color: #FFFFFF;
}
.btn-primary:hover,
.btn-accent:hover { background: var(--action-hover); border-color: var(--action-hover); color: #FFFFFF; box-shadow: var(--sh-hover); }
.btn-primary:active,
.btn-accent:active { background: var(--action-press); border-color: var(--action-press); }
.btn-primary code { color: #FFFFFF; }
/* Active (tutorial running / free play): tonal. */
.btn.active {
  background: var(--action-tint); border-color: transparent; color: var(--g-blue-t);
}
.btn.active::before { content: '●'; font-size: 8px; line-height: 1; }
.btn.active:hover { background: var(--action-tint-2); }
.btn-sm { height: 32px; padding: 0 var(--s-3); font-size: 13px; }
.btn-sm code { font-family: var(--mono); }

/* Flash the next button to steer the visitor's eye. */
.btn.flash { animation: btnflash 1.5s ease-out infinite; }
@keyframes btnflash {
  0% { box-shadow: 0 0 0 0 rgba(0,119,255,.45); }
  70%, 100% { box-shadow: 0 0 0 8px rgba(0,119,255,0); }
}
@media (prefers-reduced-motion: reduce) { .btn.flash { animation: none; box-shadow: 0 0 0 2px rgba(0,119,255,.45); } }

/* ---- layout ----
   The terminal owns the left column; the right column stacks the incident
   tracker, a drag handle, and the process view. */
.layout {
  flex: 1 1 auto; min-height: 0;
  display: grid; gap: var(--s-4); padding: var(--s-3) var(--s-5) var(--s-4);
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  grid-template-rows: 1fr;
  background: var(--canvas);
}
.area-term { min-height: 0; min-width: 0; }
.right-col { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.tutorial-panel { flex: 0 0 var(--incident-h, 54%); }
.view-panel { flex: 1 1 auto; min-height: 120px; }
.vsplit { flex: 0 0 auto; }
.layout.no-incident #tutorial,
.layout.no-incident #vsplit { display: none; }

/* ---- resize handle ---- */
.vsplit {
  height: 16px; margin: 0; cursor: row-resize; display: flex;
  align-items: center; justify-content: center;
}
.vsplit-grip { width: 40px; height: 4px; border-radius: 2px; background: var(--hair); transition: background .15s; }
.vsplit:hover .vsplit-grip, .vsplit.dragging .vsplit-grip { background: var(--action); }

/* ---- cards ---- */
/* White, hairline, 3px Google seam on top: terminal blue, tracker red,
   process view yellow (green is the System cards' fourth). */
.terminal-wrap,
.tutorial-panel,
.view-panel {
  border: 1px solid var(--hairline);
  border-top: var(--seam) solid var(--g-blue);
  border-radius: var(--r-lg);
  background: var(--canvas);
  transition: border-color .15s, box-shadow .15s;
}
.tutorial-panel { border-top-color: var(--g-red); }
.view-panel { border-top-color: var(--g-yellow); }

/* ---- incident / tutorial panel ---- */
.tutorial-panel {
  min-height: 0; overflow-y: auto;
  padding: var(--s-4) var(--s-5); position: relative;
}
.tutorial-panel.hidden { display: none; }
.tut-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s-2); }
.tut-kicker { font-family: var(--sans); font-weight: 500; font-size: var(--fs-xs); letter-spacing: 0.8px; text-transform: uppercase; color: var(--g-red-t); }
.tut-skip { border: none; background: none; color: var(--action); font-size: 13px; font-weight: 500; cursor: pointer; padding: 6px 8px; border-radius: var(--r-btn); }
.tut-skip:hover { background: var(--action-tint); }
.tut-dots { display: flex; gap: 6px; margin-bottom: var(--s-3); flex-wrap: wrap; }
.mdot { width: 20px; height: 4px; border-radius: 2px; border: none; background: var(--hair); cursor: pointer; padding: 0; transition: background .2s; }
.mdot.done { background: var(--g-green); }
.mdot.cur { background: var(--action); }
.tut-title { margin: 2px 0 var(--s-2); font-size: 18px; line-height: 26px; font-weight: 500; color: var(--ink); }
.tut-story { margin: 0 0 var(--s-3); color: var(--title); line-height: 22px; font-size: 14px; }
.tut-story code, .tut-tiny code { font-family: var(--mono); background: var(--subtle); border: 1px solid var(--hairline); padding: 0 5px; border-radius: var(--r-sm); color: var(--ink); font-size: 0.9em; }
.tut-story b { color: var(--ink); font-weight: 500; }
.tut-actions { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-top: var(--s-4); }

/* Finale "syspulse -h" tip. */
.finale-tip { font-size: 13px; color: var(--body); margin: 0 0 var(--s-3); font-family: var(--sans); }
.tip-cmd { border: 1px solid var(--hair); background: var(--canvas); border-radius: var(--r-sm); padding: 1px 7px; cursor: pointer; vertical-align: baseline; }
.tip-cmd:hover { border-color: var(--hair-strong); background: var(--hover); }
.tip-cmd code { font-family: var(--mono); color: var(--g-blue-t); font-size: 12px; }
.tut-tiny { margin: var(--s-3) 0 0; font-size: 12px; color: var(--body); }
.tut-install {
  font-family: var(--mono); font-size: 13px; background: var(--subtle); color: var(--ink);
  border: 1px solid var(--hairline); border-radius: var(--r-sm); padding: 10px 12px; margin: 4px 0 14px;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}

/* ---- terminal ---- */
.terminal-wrap {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column; overflow: hidden;
}
.term-titlebar {
  display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-3);
  background: var(--canvas); border-bottom: 1px solid var(--hairline); flex: 0 0 auto;
}
.tdots { display: flex; gap: 6px; }
.tdots i { width: 10px; height: 10px; border-radius: 50%; background: var(--hair); display: block; }
.tdots i:nth-child(1) { background: var(--g-blue); }
.tdots i:nth-child(2) { background: var(--g-red); }
.tdots i:nth-child(3) { background: var(--g-yellow); }
.term-title { font-family: var(--mono); font-size: var(--fs-xs); color: var(--body); }
.term-flag { margin-left: auto; font-family: var(--mono); font-size: var(--fs-2xs); color: var(--g-green-t); background: var(--g-green-bg); box-shadow: inset 0 0 0 1px rgba(0,200,150,.4); padding: 0 8px; border-radius: var(--r-pill); }

.term {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden;
  padding: 14px 16px; font-family: var(--mono); font-size: 13px; line-height: 1.55;
  color: var(--ink); background: var(--subtle); cursor: text; position: relative;
  /* We manage stick-to-bottom ourselves (see terminal.js). */
  overflow-anchor: none;
}
.term-row { white-space: pre-wrap; overflow-wrap: anywhere; }
.term-block { white-space: pre-wrap; overflow-wrap: anywhere; }
.term-line { white-space: pre-wrap; overflow-wrap: anywhere; }
/* Fixed (viewport-relative) so the browser never scrolls the terminal to keep
   this focused input in view. 1px, invisible. */
.term-hidden-input {
  position: fixed; opacity: 0; pointer-events: none;
  width: 1px; height: 1px; padding: 0; border: 0; left: 0; top: 0;
}
.term-typed { color: var(--ink); }
.term-cursor { background: transparent; color: var(--ink); border-radius: 1px; }
.term-cursor.focused { background: var(--action); color: #FFFFFF; animation: blink 1.05s steps(1) infinite; }
@keyframes blink { 50% { background: transparent; color: var(--ink); } }

.p-user { color: var(--g-green-t); }
.p-sep { color: var(--body); }
.p-dir { color: var(--a-blue); }
.typing-row { white-space: pre-wrap; }

/* ANSI colour classes. */
.a-red { color: var(--a-red); }
.a-green { color: var(--a-green); }
.a-blue { color: var(--a-blue); }
.a-cyan { color: var(--a-cyan); }
.a-magenta { color: var(--a-magenta); font-weight: 500; }
.a-dim { color: var(--a-dim); }
.a-dimyellow { color: var(--a-dimyellow); }

/* welcome + learned blocks */
.welcome { border-left: 3px solid var(--g-blue); padding: 2px 0 8px 14px; margin-bottom: 6px; }
.welcome-logo { font-family: var(--sans); font-size: 18px; font-weight: 500; color: var(--ink); }
.welcome-logo span { color: var(--body); font-size: 13px; font-weight: 400; }
.welcome-sub { color: var(--title); margin-top: 6px; font-family: var(--sans); line-height: 1.5; }
.welcome-hint { color: var(--body); margin-top: 8px; font-family: var(--sans); font-size: 13px; }
.welcome code { color: var(--ink); background: var(--canvas); border: 1px solid var(--hairline); padding: 0 5px; border-radius: var(--r-sm); }
.sim-badge { color: var(--g-yellow-t); }
.learned {
  border-left: 3px solid var(--g-blue); background: var(--action-tint);
  padding: 10px 14px; margin: 6px 0; border-radius: 0 var(--r-md) var(--r-md) 0; font-family: var(--sans);
  color: var(--title); line-height: 1.55; font-size: 13.5px;
}
.learned code { font-family: var(--mono); color: var(--g-blue-t); }
.learned b { color: var(--ink); font-weight: 500; }
.learned-badge { color: var(--g-green-t); font-weight: 500; margin-right: 4px; }
.learned-badge.a-dimyellow { color: var(--g-yellow-t); }
.learned.finale { border-left-color: var(--g-green); background: var(--g-green-bg); }

/* ---- cold open ---- */
.co-line { white-space: pre-wrap; overflow-wrap: anywhere; }
.co-prompt { color: var(--g-green-t); }
.co-sep { color: var(--body); }
.co-dir { color: var(--a-blue); }
.co-note {
  margin: 8px 0; padding: 8px 0 8px 14px; border-left: 3px solid var(--g-blue);
  color: var(--title); font-family: var(--sans); line-height: 1.5;
}
.co-note b { color: var(--ink); font-weight: 500; }
.co-brief {
  margin: 12px 0 4px; padding: 12px 14px; border-radius: var(--r-md); font-family: var(--sans);
  background: var(--g-yellow-bg);
  color: var(--title); line-height: 1.55;
}
.co-brief b { color: var(--ink); font-weight: 500; }
.co-brief-tag { color: var(--g-yellow-t); font-weight: 500; margin-right: 6px; }

/* ---- incident tracker ---- */
.tut-kicker.alert { color: var(--g-yellow-t); }
.tut-kicker.alert::before, .tut-kicker.ok::before { content: ''; }
.tut-kicker.ok { color: var(--g-green-t); }

.health { display: flex; align-items: center; gap: var(--s-3); margin: 6px 0 14px; }
.health-bar { flex: 1 1 auto; height: 4px; border-radius: 2px; background: var(--grid); overflow: hidden; }
.health-bar span { display: block; height: 100%; background: var(--g-green); transition: width .4s ease; }
.health-n { font-family: var(--mono); font-size: 12px; color: var(--body); white-space: nowrap; }

.issues { display: flex; flex-direction: column; gap: var(--s-2); }
.issue {
  border: 1px solid var(--hairline); border-left-width: 3px; border-left-color: var(--g-blue); border-radius: var(--r-md); padding: 10px 12px;
  background: var(--canvas); transition: opacity .3s, border-color .3s;
}
.issue.sev-high { border-left-color: var(--g-red); }
.issue.sev-warn { border-left-color: var(--g-yellow); }
.issue.resolved { border-left-color: var(--g-green); opacity: 0.72; }
.issue-top { display: flex; align-items: center; gap: var(--s-2); }
.issue-ic { font-family: var(--mono); width: 16px; text-align: center; color: var(--disabled); }
.issue.found .issue-ic { color: var(--g-blue-t); }
.issue.resolved .issue-ic { color: var(--g-green-t); }
.issue-title { font-size: 14px; font-weight: 500; color: var(--ink); }
.issue.resolved .issue-title { text-decoration: line-through; text-decoration-color: var(--disabled); }
.issue-blurb { font-size: 13px; color: var(--body); line-height: 1.5; margin: 6px 0 0; font-family: var(--sans); }
.issue-blurb.done { color: var(--disabled); }
.issue-blurb code { font-family: var(--mono); background: var(--subtle); padding: 1px 5px; border-radius: var(--r-sm); color: var(--ink); font-size: 0.92em; }
.issue-blurb b { color: var(--ink); font-weight: 500; }
.issue-act { margin-top: 9px; }
.issue-wait { font-family: var(--mono); font-size: 12px; color: var(--g-yellow-t); }

/* ---- finale ---- */
.finale-card {
  background: var(--g-green-bg);
  border-radius: var(--r-md); padding: 16px 18px; margin: 10px 0; font-family: var(--sans);
}
.finale-badge { color: var(--g-green-t); font-weight: 500; font-size: 13px; letter-spacing: 0.5px; }
.finale-title { margin: 8px 0 4px; font-size: 16px; color: var(--ink); line-height: 1.45; }
.finale-sub { color: var(--title); font-size: 13.5px; }
.finale-quests { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.fq-h { font-size: 12px; font-weight: 500; color: var(--g-green-t); text-transform: uppercase; letter-spacing: 0.8px; }
.sq { display: flex; align-items: center; gap: var(--s-2); text-align: left; border: 1px solid var(--hairline);
  background: var(--canvas); color: var(--title); padding: 7px 10px; border-radius: var(--r-md);
  cursor: pointer; font-size: 13px; font-family: var(--sans); }
.sq:hover { background: var(--subtle); border-color: var(--hair); box-shadow: var(--sh-hover); }
.sq code { font-family: var(--mono); color: var(--g-blue-t); }
.sq-ic { font-family: var(--mono); color: var(--disabled); flex: 0 0 auto; }
.sq.done { opacity: 0.85; }
.sq.done .sq-ic, .sq.done code { color: var(--g-green-t); }

/* ---- toolkit ---- */
.toolkit { margin-top: 14px; border-top: 1px solid var(--grid); padding-top: 12px; }
.tk-head { display: flex; justify-content: space-between; align-items: center; font-size: 12px; font-weight: 500;
  color: var(--g-yellow-t); text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 8px; }
.tk-count { font-family: var(--mono); color: var(--g-blue-t); letter-spacing: 0; }
.tk-list { display: flex; flex-direction: column; gap: 4px; }
.tk-row { display: flex; align-items: center; gap: 9px; text-align: left; border: 1px solid var(--hairline);
  background: var(--canvas); color: var(--title); padding: 6px 10px; border-radius: var(--r-md);
  cursor: pointer; font-family: var(--sans); font-size: 13px; }
.tk-row:hover { background: var(--subtle); border-color: var(--hair); box-shadow: var(--sh-hover); }
.tk-ic { font-family: var(--mono); color: var(--disabled); flex: 0 0 auto; }
.tk-cmd { flex: 0 0 auto; }
.tk-cmd code { font-family: var(--mono); color: var(--g-blue-t); font-size: 12px; }
.tk-label { color: var(--body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-row.done { opacity: 0.9; }
.tk-row.done .tk-ic, .tk-row.done .tk-cmd code { color: var(--g-green-t); }

/* ---- suggested command chips (under the terminal at every width) ---- */
.chips {
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  border-top: 1px solid var(--hairline);
  background: var(--canvas);
  overflow-x: auto; overscroll-behavior-x: contain;
  flex: 0 0 auto;
}
.chips::before {
  content: 'Try';
  flex: 0 0 auto;
  font-family: var(--sans); font-size: 12px; font-weight: 500;
  color: var(--body);
  padding-right: 2px;
}
.chips::-webkit-scrollbar { height: 6px; }
.chips::-webkit-scrollbar-thumb { background: var(--hair); border-radius: var(--r-pill); }
.chip {
  flex: 0 0 auto; display: inline-flex; align-items: center;
  height: 32px; padding: 0 var(--s-3);
  font-family: var(--mono); font-size: 12px; white-space: nowrap;
  border: 1px solid var(--hair); background: var(--canvas); color: var(--title);
  border-radius: var(--r-pill); cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.chip:hover { background: var(--g-blue-bg); color: var(--g-blue-t); border-color: rgba(0,119,255,.4); }
.chip:nth-child(4n+2):hover { background: var(--g-red-bg); color: var(--g-red-t); border-color: rgba(234,67,53,.4); }
.chip:nth-child(4n+3):hover { background: var(--g-yellow-bg); color: var(--g-yellow-t); border-color: rgba(154,214,26,.6); }
.chip:nth-child(4n+4):hover { background: var(--g-green-bg); color: var(--g-green-t); border-color: rgba(0,200,150,.4); }
.chip:active { background: var(--action-tint); color: var(--g-blue-t); border-color: var(--action-tint); }

/* ---- view panel (tree | constellation | system) ---- */
.view-panel {
  display: flex; flex-direction: column; min-height: 0; overflow: hidden;
}
.view-head {
  flex: 0 0 auto; display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-3);
  padding: 0 var(--s-3) 0 var(--s-4); border-bottom: 1px solid var(--hairline); background: var(--canvas);
  min-height: 48px;
}
.view-title { align-self: center; font-family: var(--sans); font-size: 14px; font-weight: 500; color: var(--ink); }
#view-hint { color: var(--body); font-weight: 400; }
.view-toggle { display: inline-flex; flex: 0 0 auto; gap: 0; align-self: stretch; }
.vt {
  border: none; background: transparent; color: var(--body);
  padding: 0 var(--s-3); font-size: 14px; font-weight: 500; cursor: pointer; font-family: var(--sans);
  border-bottom: 2px solid transparent; border-top: 2px solid transparent;
  transition: color .15s, background .15s;
}
.vt:hover { background: var(--subtle); color: var(--ink); }
.vt.active { color: var(--action); border-bottom-color: var(--action); }
/* A view toggle with nothing behind it should look unavailable, not idle. */
.vt.is-disabled { color: var(--disabled); cursor: not-allowed; }
.vt.is-disabled:hover { background: transparent; }

/* tree view (default) */
#tree-view { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 6px 0; font-family: var(--mono); font-size: 12.5px; }
.tree-empty { color: var(--body); padding: 20px; }
.tree-row {
  display: grid; grid-template-columns: 1fr 58px 84px; align-items: center; gap: var(--s-2);
  padding: 2px 12px; cursor: pointer; white-space: nowrap; color: var(--title);
}
.tree-row:hover { background: var(--subtle); }
.tree-row .tr-name { overflow: hidden; text-overflow: ellipsis; }
.tr-guide { color: var(--hair); }
.tr-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 6px; vertical-align: middle; background: var(--g-blue); }
.k-root .tr-dot { background: var(--g-red); }
.k-listener .tr-dot { background: var(--g-green); }
.k-warn .tr-dot { background: var(--g-yellow); }
.k-warn .tr-name { color: var(--g-yellow-t); }
.tr-pid { color: var(--body); text-align: right; }
.tr-user { color: var(--body); overflow: hidden; text-overflow: ellipsis; }
.tr-tag { color: var(--g-yellow-t); }
/* dim everything but the active chain during a query */
#tree-view.has-hl .tree-row { opacity: 0.38; }
#tree-view.has-hl .tree-row.on-chain { opacity: 1; }
.tree-row.on-chain {
  background: var(--action-tint);
  border-left: 3px solid var(--action); padding-left: 9px;
}
.tree-row.on-chain .tr-name { color: var(--g-blue-t); font-weight: 500; }

/* constellation (opt-in) */
.map-wrap {
  flex: 1 1 auto; min-height: 0; position: relative; overflow: hidden; display: none;
  background: var(--canvas);
}
.view-panel.show-map #tree-view { display: none; }
.view-panel.show-map .map-wrap { display: block; }
#map-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.map-labels { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
/* Every node is labelled. Resting labels are small and semi-transparent; hover
   and the active chain bring them forward. */
.map-label {
  position: absolute; top: 0; left: 0; font-family: var(--mono); font-size: 10px;
  color: var(--title); background: rgba(255,255,255,0.92);
  border: 1px solid var(--hairline); padding: 0 5px; border-radius: var(--r-sm); white-space: nowrap;
  transform: translate(-50%, -150%); will-change: transform, opacity;
  opacity: 0.85; transition: opacity .15s;
}
.map-label-hover {
  color: #FFFFFF; background: var(--ink); border-color: var(--ink);
  font-size: 11.5px; z-index: 5; opacity: 1;
}
.map-label-hl { color: #FFFFFF; background: var(--action); border-color: var(--action); font-weight: 500; font-size: 11px; opacity: 1; z-index: 4; }
.map-label-warn { color: var(--g-yellow-t); border-color: var(--g-yellow); }
.map-label-faded { opacity: 0.16; }
.map-legend {
  position: absolute; bottom: 12px; left: 16px; z-index: 3; display: flex; gap: var(--s-2); flex-wrap: wrap;
  font-size: 12px; color: var(--body); pointer-events: none;
}
.map-legend .lg { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.lg-root { background: var(--g-red); } .lg-listener { background: var(--g-green); } .lg-proc { background: var(--g-blue); }
.lg-warn { background: var(--g-yellow); } .lg-hl { background: var(--action); }
/* Legend chips are clickable to light up all nodes of a category. */
.lg-item, .lg-static { font: inherit; color: var(--body); display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: var(--r-pill); }
.lg-item { pointer-events: auto; cursor: pointer; border: 1px solid var(--hair); background: var(--canvas); }
.lg-item:hover { background: var(--hover); color: var(--ink); }
.lg-item.active { border-color: var(--action-tint); color: var(--g-blue-t); background: var(--action-tint); }
.lg-static { background: rgba(255,255,255,0.85); }

/* ---- dialogs ---- */
/* Overlays start below the Cariara header, which stays on top. */
.modal { position: fixed; inset: var(--cariara-header, 0px) 0 0 0; z-index: 40; display: none; align-items: center; justify-content: center;
  background: rgba(33,34,38,0.5); padding: 20px; }
.modal.open { display: flex; }
.modal-card {
  width: min(720px, 100%); background: var(--canvas); border: none; border-top: var(--seam) solid var(--g-blue); border-radius: var(--r-lg);
  padding: var(--s-5); box-shadow: var(--sh-dialog);
}
.modal-card h2 { margin: 0 0 4px; font-size: var(--fs-xl); line-height: 28px; font-weight: 500; color: var(--ink); }
#install-modal .modal-card { border-top-color: var(--g-green); }
#settings-modal .modal-card { border-top-color: var(--g-yellow); }
.modal-sub { margin: 0 0 var(--s-4); color: var(--body); font-size: 14px; }
.scenario-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.scenario-card {
  text-align: left; display: flex; flex-direction: column; gap: 6px; position: relative;
  border: 1px solid var(--hairline); border-top: var(--seam) solid var(--g-blue);
  background: var(--canvas); border-radius: var(--r-md); padding: var(--s-4); cursor: pointer;
  font-family: var(--sans); transition: box-shadow .15s, border-color .15s;
}
.scenario-card:nth-child(4n+2) { border-top-color: var(--g-red); }
.scenario-card:nth-child(4n+3) { border-top-color: var(--g-yellow); }
.scenario-card:nth-child(4n+4) { border-top-color: var(--g-green); }
.scenario-card:hover { border-left-color: var(--hair); border-right-color: var(--hair); border-bottom-color: var(--hair); box-shadow: var(--sh-hover); }
.scenario-card.current { background: var(--action-tint); box-shadow: inset 0 0 0 1px var(--action); }
/* A configured-but-unreachable machine is shown, dimmed. */
.scenario-card.is-unreachable { opacity: .5; cursor: not-allowed; }
.scenario-card.is-unreachable:hover { box-shadow: none; }
.sc-name { font-size: 16px; font-weight: 500; color: var(--ink); }
.sc-host { font-family: var(--mono); font-size: 12px; color: var(--g-blue-t); }
.sc-desc { font-size: 13px; color: var(--body); line-height: 1.5; margin-top: 2px; }
.sc-tag { position: absolute; top: 14px; right: 14px; font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--g-blue-t); background: var(--g-blue-bg); box-shadow: inset 0 0 0 1px rgba(0,119,255,.35); padding: 1px 8px; border-radius: var(--r-pill); }
.sc-tag.is-live { background: var(--g-green-bg); color: var(--g-green-t); box-shadow: inset 0 0 0 1px rgba(0,200,150,.4); }
/* Close = text button */
.modal-close {
  margin-top: var(--s-4); height: 36px; padding: 0 var(--s-3);
  border: none; background: transparent; color: var(--action);
  font-size: 14px; font-weight: 500; border-radius: var(--r-btn); cursor: pointer;
}
.modal-close:hover { background: var(--action-tint); }

/* ---- install dialog ---- */
.install-card { width: min(900px, 100%); }
/* minmax(0,1fr) so a long command ellipsizes instead of stretching its column. */
.install-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); align-items: start; }
.install-os { min-width: 0; border: 1px solid var(--hairline); border-top: var(--seam) solid var(--g-blue); background: var(--canvas); border-radius: var(--r-md); padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-2); }
.io-name { display: flex; align-items: center; gap: var(--s-2); font-size: 14px; font-weight: 500; color: var(--ink); margin-bottom: 4px; }
.install-os:nth-child(4n+2) { border-top-color: var(--g-red); }
.install-os:nth-child(4n+3) { border-top-color: var(--g-yellow); }
.install-os:nth-child(4n+4) { border-top-color: var(--g-green); }
.io-name .ico { color: var(--g-blue); }
.install-os:nth-child(4n+2) .io-name .ico { color: var(--g-red); }
.install-os:nth-child(4n+3) .io-name .ico { color: var(--g-yellow); }
.install-os:nth-child(4n+4) .io-name .ico { color: var(--g-green); }
.io-cmd { display: flex; align-items: center; gap: 10px; text-align: left; width: 100%; min-width: 0;
  border: 1px solid var(--hairline); background: var(--subtle); border-radius: var(--r-md); padding: var(--s-2) var(--s-3); cursor: pointer;
  font-family: var(--sans); transition: border-color .15s, background .15s; }
.io-cmd:hover { border-color: var(--hair); background: var(--canvas); box-shadow: var(--sh-hover); }
.io-cmd.copied { border-color: var(--g-green); background: var(--g-green-bg); }
.io-label { flex: 0 0 auto; font-size: 11px; color: var(--muted); width: 96px; }
.io-cmd code { flex: 1 1 auto; min-width: 0; font-family: var(--mono); font-size: 12px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.io-copyicon { flex: 0 0 auto; width: 15px; height: 15px; color: var(--body); }
.io-cmd:hover .io-copyicon { color: var(--action); }
.io-cmd.copied .io-copyicon { color: var(--g-green-t); }
.install-foot { display: flex; align-items: center; justify-content: flex-end; gap: var(--s-4); margin-top: var(--s-5); }
.install-foot .modal-close { margin-top: 0; }

/* ---- copy button (finale install command) ---- */
.tut-install-row { display: flex; align-items: stretch; gap: var(--s-2); margin: 4px 0 14px; }
.tut-install-row .tut-install { margin: 0; flex: 1 1 auto; }
.tut-copy { flex: 0 0 auto; border: 1px solid var(--hair); background: var(--canvas); color: var(--action);
  border-radius: var(--r-btn); padding: 0 12px; cursor: pointer; font-family: var(--sans); font-size: 13px; font-weight: 500; white-space: nowrap; }
.tut-copy:hover { background: var(--action-tint); }
.tut-copy.copied { border-color: var(--g-green); color: var(--g-green-t); background: var(--g-green-bg); }
.tut-copy .copy-icon { font-family: var(--mono); }

/* ---- TUI overlay ----
   A DOM rendition of syspulse's bubbletea TUI, drawn in the light palette. */
.tui { position: fixed; inset: var(--cariara-header, 0px) 0 0 0; z-index: 50; display: none; align-items: center; justify-content: center;
  background: rgba(33,34,38,0.5); padding: 18px; }
.tui.tui-open { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.tui-disclaimer { flex: 0 0 auto; font-family: var(--sans); font-size: 12px; color: #FFFFFF; text-align: center; max-width: 90%; }
.tui-window {
  --t-fg: #212226; --t-dim: #686D72; --t-accent: #0058C2; --t-border: #E8EAED;
  --t-headerdim: #686D72; --t-conn: #0058C2; --t-target: #0D652D; --t-section: #212226;
  --t-error: #C5221F; --t-amber: #A85400; --t-confirm: #A85400;
  --t-brandfg: #FFFFFF; --t-brandbg: #0058C2; --t-green: #0D652D;
  --t-selfg: #0058C2; --t-selbg: rgba(0,119,255,.12); --t-idle: #F8F9FA;
  --t-surface: #FFFFFF; --t-surface-2: #F8F9FA;
  width: min(1140px, 100%); height: min(650px, calc(100vh - var(--cariara-header, 0px) - 72px)); display: flex; flex-direction: column;
  background: var(--t-surface); border: none; border-top: var(--seam) solid var(--g-blue); border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--sh-dialog); font-family: var(--mono);
  font-size: 12.5px; line-height: 1.5; color: var(--t-fg); padding: 10px 12px;
}
/* header row: brand badge + tabs */
.tui-top { display: flex; align-items: center; gap: 0; flex: 0 0 auto; border-bottom: 1px solid var(--t-border); }
.tui-brand { background: var(--t-brandbg); color: var(--t-brandfg); font-weight: 500; padding: 2px 10px; cursor: pointer; border-radius: var(--r-sm); margin-right: 8px; }
.tui-brand:hover { background: var(--action-hover); }
.tui-pidbadge { background: var(--g-green-bg); color: var(--t-green); font-weight: 500; padding: 2px 10px; border-radius: var(--r-sm); }
.tui-tab { color: var(--t-dim); background: transparent; padding: 4px 10px 2px; cursor: pointer; user-select: none; border-bottom: 2px solid transparent; }
.tui-tab:hover { background: var(--t-idle); color: var(--t-fg); }
.tui-tab.active { color: var(--action); border-bottom-color: var(--action); font-weight: 500; }
.tui-x { margin-left: auto; border: none; background: none; color: var(--t-dim); cursor: pointer; font-size: 15px; line-height: 1; padding: 4px 6px; border-radius: 50%; }
.tui-x:hover { color: var(--t-fg); background: var(--t-idle); }
.tui-spacer { height: 10px; flex: 0 0 auto; }
/* status + input lines */
.tui-status { flex: 0 0 auto; padding-left: 1px; color: var(--t-fg); }
.tui-status.searching { color: var(--t-accent); }
.tui-status.err { color: var(--t-error); font-weight: 500; }
.tui-input { flex: 0 0 auto; padding-left: 1px; margin-bottom: 8px; color: var(--t-fg); min-height: 1.5em; }
.tui-input .tui-prompt { color: var(--t-accent); font-weight: 500; }
.tui-caret { color: var(--t-accent); animation: tblink 1.1s step-end infinite; }
@keyframes tblink { 50% { opacity: 0; } }
/* main split */
.tui-main { flex: 1 1 auto; min-height: 0; display: flex; gap: 0; }
.tui-pane { min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.tui-pane.divider { border-left: 1px solid var(--t-border); padding-left: 12px; margin-left: 10px; }
.tui-pane.divider.focus { border-left-color: var(--t-accent); }
.tui-pane-list { flex: 1 1 auto; }
.tui-pane-side { flex: 0 0 31%; }
.tui-pane-portside { flex: 0 0 47%; }
.tui-pane-detail { flex: 1 1 62%; }
.tui-pane-env { flex: 1 1 38%; }
.tui-hdr { flex: 0 0 auto; color: var(--t-headerdim); font-weight: 500; border-bottom: 1px solid var(--t-border);
  padding: 0 2px 3px; margin-bottom: 4px; white-space: nowrap; }
.tui-hdr.accent { color: var(--t-accent); border-bottom-color: var(--t-accent); }
/* table rows */
.tui-rows { flex: 1 1 auto; overflow-y: auto; overflow-x: auto; }
.tui-r { display: grid; grid-template-columns: 52px 80px 118px 54px 138px 118px minmax(120px, 1fr); gap: 8px;
  padding: 0 2px; white-space: nowrap; cursor: pointer; border-bottom: 1px solid transparent; }
.tui-r:hover { background: var(--t-surface-2); }
.tui-r > span { overflow: hidden; text-overflow: ellipsis; }
.tui-r.head { color: var(--t-headerdim); font-weight: 500; border-bottom: 1px solid var(--t-border); padding-top: 3px; padding-bottom: 3px; margin-bottom: 3px; position: sticky; top: 0; background: var(--t-surface-2); }
.tui-r.head:hover { background: var(--t-surface-2); }
.tui-r.head.dim { color: var(--t-headerdim); }
.tui-r.sel, .tui-r.sel:hover { background: var(--t-selbg); color: var(--t-selfg); }
.tui-r.t-ports { grid-template-columns: 80px 100px 1fr 140px; }
.tui-r.t-attached { grid-template-columns: 72px 110px 96px minmax(120px, 1fr); }
.tui-r.t-containers { grid-template-columns: 112px 168px 78px 200px 150px 150px minmax(150px, 1fr); }
.tui-r.t-locks { grid-template-columns: 66px 150px 90px 84px 1fr; }
.tui-num { text-align: right; }
.tui-empty { color: var(--t-dim); padding: 12px 2px; }
/* side pane (ancestry tree) */
.tui-side-body { flex: 1 1 auto; overflow-y: auto; white-space: pre-wrap; word-break: break-word; }
.tui-sec { color: var(--t-section); font-weight: 500; }
.tui-conn { color: var(--t-conn); }
.tui-target { color: var(--t-target); }
.tui-hl { background: var(--t-selbg); color: var(--t-selfg); }
.tui-muted { color: var(--t-dim); }
/* detail panes */
.tui-body-scroll { flex: 1 1 auto; overflow: auto; padding-right: 6px; }
.tui-body-scroll pre { margin: 0; font: inherit; white-space: pre; }
/* footer */
.tui-foot { flex: 0 0 auto; border-top: 1px solid var(--t-border); margin-top: 8px; padding: 6px 2px 0;
  color: var(--t-dim); display: flex; justify-content: space-between; gap: 12px; white-space: nowrap; overflow: hidden; }
.tui-foot.actions { color: var(--t-amber); font-weight: 500; }
.tui-foot.confirm { color: var(--t-confirm); font-weight: 500; }
.tui-foot.err { color: var(--t-error); font-weight: 500; }
.tui-foot .tui-help { overflow: hidden; text-overflow: ellipsis; }
.tui-foot .tui-ver { flex: 0 0 auto; color: var(--t-dim); }

/* ---- System view: host metrics, logs and hardware ---- */
.system-view { display: none; flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--s-4); }
.view-panel.show-system #tree-view,
.view-panel.show-system .map-wrap { display: none; }
.view-panel.show-system .system-view { display: block; }

.sys-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s-3); }
.sys-card {
  border: 1px solid var(--hairline); border-top: var(--seam) solid var(--g-blue); border-radius: var(--r-md);
  background: var(--canvas);
  padding: var(--s-3) var(--s-4);
  transition: border-color .15s, box-shadow .15s;
}
.sys-card:hover { border-left-color: var(--hair); border-right-color: var(--hair); border-bottom-color: var(--hair); box-shadow: var(--sh-hover); }
.sys-card:nth-child(4n+2) { border-top-color: var(--g-red); }
.sys-card:nth-child(4n+3) { border-top-color: var(--g-yellow); }
.sys-card:nth-child(4n+4) { border-top-color: var(--g-green); }
.sys-card h4 {
  margin: 0 0 6px; font-size: 12px; font-weight: 500;
  color: var(--muted);
}
.sys-stat { font-family: var(--sans); font-size: 22px; line-height: 28px; font-weight: 500; color: var(--g-blue-t); }
.sys-card:nth-child(4n+2) .sys-stat { color: var(--g-red-t); }
.sys-card:nth-child(4n+3) .sys-stat { color: var(--g-yellow-t); }
.sys-card:nth-child(4n+4) .sys-stat { color: var(--g-green-t); }
.sys-sub { font-family: var(--mono); font-size: var(--fs-2xs); color: var(--body); margin-top: 2px; }
/* Usage bar, coloured at the thresholds where a person would start to care. */
.sys-bar { height: 4px; border-radius: 2px; background: var(--grid); margin-top: var(--s-2); overflow: hidden; }
.sys-bar > i { display: block; height: 100%; background: var(--g-blue); border-radius: 2px; }
.sys-bar.warn > i { background: var(--g-yellow); }
.sys-bar.hot > i { background: var(--g-red); }

.sys-section { margin-top: var(--s-5); }
/* Section headings rotate blue, red, yellow, green down the pane. */
.sys-section > h3 {
  margin: 0 0 var(--s-2); font-size: 16px; line-height: 24px; font-weight: 500; color: var(--g-blue-t);
}
.system-view > .sys-section:nth-child(4n+3) > h3 { color: var(--g-red-t); }
.system-view > .sys-section:nth-child(4n+4) > h3 { color: var(--g-yellow-t); }
.system-view > .sys-section:nth-child(4n+1) > h3 { color: var(--g-green-t); }
.sys-table { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: var(--fs-xs);
  border: 1px solid var(--hairline); border-radius: var(--r-md); overflow: hidden; border-style: hidden; box-shadow: 0 0 0 1px var(--hairline); }
.sys-table th { text-align: left; font-family: var(--sans); font-weight: 500; font-size: 12px; color: var(--muted); background: var(--subtle); padding: 6px 12px; border-bottom: 1px solid var(--hairline); }
.sys-table td { padding: 5px 12px; color: var(--title); white-space: nowrap; border-bottom: 1px solid var(--hairline); }
.sys-table td:first-child { color: var(--ink); font-weight: 500; }
.sys-table tr:hover td { background: var(--subtle); }
.sys-table td.num { text-align: right; }

.sys-logs { display: flex; flex-direction: column; gap: 0; font-family: var(--mono); font-size: var(--fs-2xs); border: 1px solid var(--hairline); border-radius: var(--r-md); overflow: hidden; }
.sys-log { display: flex; gap: var(--s-2); padding: 4px 8px; background: var(--canvas); border-bottom: 1px solid var(--grid); }
.sys-log:last-child { border-bottom: none; }
.sys-log:hover { background: var(--subtle); }
.sys-log .t { flex: 0 0 auto; color: var(--body); }
.sys-log .s { flex: 0 0 auto; color: var(--g-red-t); }
.sys-log .m { flex: 1 1 auto; color: var(--title); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sys-note { font-size: var(--fs-xs); color: var(--body); padding: var(--s-2) 0; }
.sys-err { font-size: var(--fs-xs); color: var(--g-yellow-t); padding: 2px 0; font-family: var(--mono); }

/* live markers */
.live-badge {
  padding: 1px 8px; border-radius: var(--r-pill);
  background: var(--g-green-bg); color: var(--g-green-t); font-weight: 500; box-shadow: inset 0 0 0 1px rgba(0,200,150,.4);
}

/* ---- Settings: endpoint registry ---- */
.settings-list { display: flex; flex-direction: column; gap: 0; margin-bottom: var(--s-5); border: 1px solid var(--hairline); border-radius: var(--r-md); overflow: hidden; }
.settings-list:empty { display: none; }
.settings-row {
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-4); border-bottom: 1px solid var(--grid);
  background: var(--canvas);
}
.settings-row:last-child { border-bottom: none; }
.settings-row:hover { background: var(--subtle); }
.settings-row .nm { font-weight: 500; font-size: 14px; color: var(--ink); }
.settings-row .ad { font-family: var(--mono); font-size: var(--fs-xs); color: var(--body); }
.settings-row .sp { flex: 1 1 auto; }
.settings-kind {
  font-size: var(--fs-2xs); font-weight: 500; text-transform: uppercase; letter-spacing: .6px;
  padding: 1px 8px; border-radius: var(--r-pill);
  background: var(--g-blue-bg); color: var(--g-blue-t); box-shadow: inset 0 0 0 1px rgba(0,119,255,.35);
}
.settings-kind.is-live { background: var(--g-green-bg); color: var(--g-green-t); box-shadow: inset 0 0 0 1px rgba(0,200,150,.4); }

.settings-h { margin: 0 0 var(--s-3); font-size: 16px; line-height: 24px; font-weight: 500; color: var(--g-red-t); }
.settings-form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3) var(--s-4); }
.settings-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 500; color: var(--body); }
.settings-form label.wide { grid-column: 1 / -1; }
.settings-form input, .settings-form select {
  font-family: var(--sans); font-size: 14px; font-weight: 400;
  height: 40px; padding: 0 12px; border-radius: var(--r-md);
  border: 1px solid var(--hair); background: var(--canvas); color: var(--ink);
}
.settings-form input::placeholder { color: var(--disabled); }
.settings-form input:hover, .settings-form select:hover { border-color: var(--hair-strong); }
.settings-form input:focus, .settings-form select:focus { outline: none; border-color: var(--action); box-shadow: inset 0 0 0 1px var(--action); }
/* Fields that do not apply to the selected type are hidden rather than
   disabled: an irrelevant input invites filling it in. */
.settings-form label[hidden] { display: none; }
.settings-actions { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-2); }
.settings-msg { font-size: var(--fs-xs); color: var(--body); }
.settings-msg.ok { color: var(--g-green-t); }
.settings-msg.err { color: var(--g-red-t); }

/* ---- icons ----
   Inline SVG <symbol>s defined once in index.html and referenced by <use>.
   They inherit the surrounding text colour through currentColor. */
.sprite { display: none; }
.ico {
  width: 18px; height: 18px; flex: 0 0 auto;
  fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}

/* ---- scrollbars: thin and unobtrusive ---- */
* { scrollbar-width: thin; scrollbar-color: var(--hair) transparent; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--hair); border-radius: var(--r-pill); border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--hair-strong); background-clip: content-box; }

/* ---- responsive ---- */
/* Medium and below: single column. Incident on top, terminal below; the process
   view and resize handle hide. */
@media (max-width: 980px) {
  .layout { display: flex; flex-direction: column; }
  .area-term { order: 2; flex: 1 1 auto; min-height: 0; }
  .right-col { order: 1; flex: 0 0 auto; }
  .right-col .view-panel, #vsplit { display: none; }
  .tutorial-panel { flex: 0 0 auto; height: auto; max-height: calc((100vh - var(--cariara-chrome, 0px)) * .46); }
  .intro { margin-left: var(--s-3); margin-right: var(--s-3); }
  .layout { padding-left: var(--s-3); padding-right: var(--s-3); }
}
@media (max-width: 720px) {
  .topbar { height: 48px; padding: 0 var(--s-3); }
  .intro { display: none; }
  .host-chip { display: none; }
  .layout { padding: var(--s-2); gap: var(--s-2); }
  .tutorial-panel { padding: var(--s-4); }
  .tut-title { font-size: 18px; line-height: 24px; }

  /* TUI keeps its desktop layout on small screens — the overlay pans
     horizontally instead of cramming the panes. */
  .tui { overflow-x: auto; }
  .tui.tui-open { align-items: flex-start; }
  .tui-window { min-width: 1000px; flex-shrink: 0; }
  .tui-disclaimer { min-width: 0; position: sticky; left: 0; }

  /* Topbar collapses into a menu; only tutorial stays out. */
  #btn-menu { display: inline-flex; align-items: center; }
  .top-menu {
    display: none; position: absolute; top: calc(100% + 4px); right: 8px; z-index: 60;
    flex-direction: column; gap: 0; min-width: 200px;
    background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--r-md);
    padding: var(--s-2) 0; box-shadow: var(--sh-dialog);
  }
  .top-menu.open { display: flex; }
  .top-menu .btn { width: 100%; justify-content: flex-start; border-radius: 0; height: 40px; padding: 0 var(--s-4); color: var(--title); }
  .top-menu .btn-accent { background: transparent; border-color: transparent; color: var(--action); }
  .top-menu .btn-accent:hover { background: var(--action-tint); box-shadow: none; }

  .scenario-grid { grid-template-columns: 1fr; }
  .install-grid { grid-template-columns: 1fr; }
  .modal-card { max-height: 92%; overflow-y: auto; }
  .install-foot { flex-wrap: wrap; }
  .settings-form { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .term-cursor.focused, .tui-caret { animation: none; }
}

/* ---- dark ----
   html[data-scheme="dark"], set on cariara.com/tools by the Cariara theme
   script (tools/web/theme.js). Cariara's app dark palette: slate surfaces,
   colour only in icons, links, dots and thin seams (Google four at tone-80),
   low-chroma tints for pills. The terminal is a code view on #1C2128. The
   process map recolours itself (js/map.js). */
html[data-scheme='dark'] {
  color-scheme: dark;
  --canvas: #22272E;
  --tint-blue: #2D333B;
  --subtle: #1C2128;
  --hover: #373E47;
  --hairline: #373E47;
  --hair: #545D68;
  --hair-strong: #636E7B;
  --grid: #373E47;
  --ink: #E6EDF3;
  --title: #B6C2CF;
  --body: #B6C2CF;
  --muted: #9DA9B6;
  --disabled: #9DA9B6;
  --action: #A6CBFF;
  --action-hover: #D3E3FD;
  --action-press: #D3E3FD;
  --action-tint: rgba(168,199,250,.16);
  --action-tint-2: rgba(168,199,250,.24);
  --g-blue: #A6CBFF;   --g-blue-t: #A6CBFF;   --g-blue-bg: #2B3A52;
  --g-red: #F2B8B5;    --g-red-t: #F2B8B5;    --g-red-bg: #4A2E33;
  --g-yellow: #B6E35A; --g-yellow-t: #B6E35A; --g-yellow-bg: #463D24;
  --g-green: #6DD58C;  --g-green-t: #6DD58C;  --g-green-bg: #253D30;
  --a-red: #F2B8B5;
  --a-green: #6DD58C;
  --a-blue: #A6CBFF;
  --a-cyan: #A6CBFF;
  --a-magenta: #E6EDF3;
  --a-dim: #9DA9B6;
  --a-dimyellow: #B6E35A;
  --sh-hover: 0 1px 3px rgba(0,0,0,.5);
  --sh-dialog: 0 1px 3px rgba(0,0,0,.5), 0 4px 8px 3px rgba(0,0,0,.3);
}
/* Raised surfaces: dialogs, the monitor window, the phone menu. */
html[data-scheme='dark'] .modal-card,
html[data-scheme='dark'] .top-menu { --canvas: #2D333B; }
html[data-scheme='dark'] .modal,
html[data-scheme='dark'] .tui { background: rgba(0,0,0,.6); }
html[data-scheme='dark'] .tui-disclaimer { color: #E6EDF3; }
/* Hovers that borrowed the light code-well grey step up instead. */
html[data-scheme='dark'] .btn:hover,
html[data-scheme='dark'] .sq:hover,
html[data-scheme='dark'] .tk-row:hover,
html[data-scheme='dark'] .vt:hover,
html[data-scheme='dark'] .tree-row:hover { background: var(--hover); }
html[data-scheme='dark'] .btn-ghost:hover { background: var(--hover); }
html[data-scheme='dark'] .btn-primary:hover,
html[data-scheme='dark'] .btn-accent:hover { background: var(--action-hover); }
/* Text on the action fill. */
html[data-scheme='dark'] .btn-primary,
html[data-scheme='dark'] .btn-accent,
html[data-scheme='dark'] .btn-primary:hover,
html[data-scheme='dark'] .btn-accent:hover,
html[data-scheme='dark'] .btn-primary code,
html[data-scheme='dark'] #btn-install .ico,
html[data-scheme='dark'] .term-cursor.focused,
html[data-scheme='dark'] .map-label-hl { color: #062E6F; }
html[data-scheme='dark'] .map-label-hover { color: #22272E; }
html[data-scheme='dark'] .map-label { background: rgba(45,51,59,.92); }
html[data-scheme='dark'] .lg-static { background: rgba(34,39,46,.85); }
html[data-scheme='dark'] .intro-rule {
  background: linear-gradient(90deg,#A6CBFF 0 25%,#7FB2FF 25% 50%,#B6E35A 50% 75%,#6DD58C 75%);
}
html[data-scheme='dark'] .sim-pill { box-shadow: inset 0 0 0 1px rgba(182,227,90,.4); }
html[data-scheme='dark'] .sim-pill.is-live,
html[data-scheme='dark'] .term-flag,
html[data-scheme='dark'] .sc-tag.is-live,
html[data-scheme='dark'] .settings-kind.is-live { box-shadow: inset 0 0 0 1px rgba(109,213,140,.4); }
html[data-scheme='dark'] .sc-tag,
html[data-scheme='dark'] .settings-kind { box-shadow: inset 0 0 0 1px rgba(168,199,250,.35); }
html[data-scheme='dark'] .tui-window {
  --t-fg: #E6EDF3; --t-dim: #9DA9B6; --t-accent: #A6CBFF; --t-border: #373E47;
  --t-headerdim: #9DA9B6; --t-conn: #A6CBFF; --t-target: #6DD58C; --t-section: #E6EDF3;
  --t-error: #F2B8B5; --t-amber: #B6E35A; --t-confirm: #B6E35A;
  --t-brandfg: #062E6F; --t-brandbg: #A6CBFF; --t-green: #6DD58C;
  --t-selfg: #A6CBFF; --t-selbg: #2B3A52; --t-idle: #373E47;
  --t-surface: #2D333B; --t-surface-2: #22272E;
  --canvas: #2D333B;
}
/* Callout wells stay neutral; the tone moves to a thin left seam. */
html[data-scheme='dark'] .co-brief { background: #2D333B; box-shadow: inset 3px 0 0 #B6E35A; }
html[data-scheme='dark'] .finale-card { background: #2D333B; box-shadow: inset 3px 0 0 #6DD58C; }
html[data-scheme='dark'] .learned,
html[data-scheme='dark'] .learned.finale { background: #2D333B; }
@media (max-width: 720px) {
  html[data-scheme='dark'] .top-menu #btn-install .ico { color: var(--action); }
}