/* Generated by web/scripts/sync_v3_assets.mjs from web/src/styles/v3/. Do not edit. */
/* ---- fonts.css ---- */
/*
 * Bundled fonts (no network at runtime). Built by web/scripts/build_v3_fonts.py
 * from the SIL OFL sources in google/fonts; licences sit next to the files.
 * Roboto Flex keeps its weight / width / optical-size axes.
 */
@font-face {
  font-family: "Roboto Flex";
  src: url("./fonts/RobotoFlex-v3.woff2") format("woff2");
  font-weight: 100 1000;
  font-stretch: 25% 151%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto Mono";
  src: url("./fonts/RobotoMono-v3.woff2") format("woff2");
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Noto Sans SC";
  src: url("./fonts/NotoSansSC-v3.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---- tokens.css ---- */
/*
 * alb v3 design tokens — Material Design 3.
 *
 * Colour roles use the M3 system token names (--md-sys-color-*) so the
 * stylesheet reads like any other M3 surface and can sit next to Material
 * Web components later. Values follow Google's blue baseline (seed #0B57D0).
 * Roles M3 does not define (success / warning, log levels, timeline source
 * tracks) are "extended colours" under --alb-*.
 *
 * Theme: bare :root is light; dark applies with the OS setting unless the
 * app pins data-theme="light", and always with data-theme="dark".
 */

:root {
  /* ---- colour roles (light) ---- */
  --md-sys-color-primary: #0b57d0;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #d3e3fd;
  --md-sys-color-on-primary-container: #041e49;
  --md-sys-color-secondary: #00639b;
  --md-sys-color-on-secondary: #ffffff;
  --md-sys-color-secondary-container: #c2e7ff;
  --md-sys-color-on-secondary-container: #001d35;
  --md-sys-color-tertiary: #146c2e;
  --md-sys-color-on-tertiary: #ffffff;
  --md-sys-color-tertiary-container: #c4eed0;
  --md-sys-color-on-tertiary-container: #072711;
  --md-sys-color-error: #b3261e;
  --md-sys-color-on-error: #ffffff;
  --md-sys-color-error-container: #f9dedc;
  --md-sys-color-on-error-container: #410e0b;
  --md-sys-color-background: #f8fafd;
  --md-sys-color-on-background: #1f1f1f;
  --md-sys-color-surface: #f8fafd;
  --md-sys-color-surface-dim: #d9dde3;
  --md-sys-color-surface-bright: #ffffff;
  --md-sys-color-surface-container-lowest: #ffffff;
  --md-sys-color-surface-container-low: #f8fafd;
  --md-sys-color-surface-container: #f0f4f9;
  --md-sys-color-surface-container-high: #e9eef6;
  --md-sys-color-surface-container-highest: #dde3ea;
  --md-sys-color-on-surface: #1f1f1f;
  --md-sys-color-on-surface-variant: #444746;
  --md-sys-color-outline: #747775;
  --md-sys-color-outline-variant: #c4c7c5;
  --md-sys-color-inverse-surface: #303030;
  --md-sys-color-inverse-on-surface: #f2f2f2;
  --md-sys-color-inverse-primary: #a8c7fa;
  --md-sys-color-scrim: #000000;
  --md-sys-color-shadow: #000000;

  /* ---- extended colours ---- */
  --alb-color-text-muted: #5c5f61;          /* 5.7:1 on surface-container */
  --alb-color-card: #ffffff;                 /* cards on the surface */
  --alb-color-well: #f0f4f9;                 /* tonal areas inside a card */
  --alb-color-divider: #e1e3e1;
  --alb-color-success: #146c2e;
  --alb-color-success-container: #c4eed0;
  --alb-color-on-success-container: #072711;
  --alb-color-warning: #7a4f00;
  --alb-color-warning-container: #ffe7ae;
  --alb-color-on-warning-container: #271900;
  --alb-color-idle: #747775;
  --alb-color-src-uart: #006a6a;
  --alb-color-src-kernel: #6750a4;
  --alb-color-src-logcat: #0b57d0;
  --alb-color-src-job: #8b5000;
  --alb-color-log-v: #5c5f61;
  --alb-color-log-d: #0b57d0;
  --alb-color-log-i: #146c2e;
  --alb-color-log-w: #7a4f00;
  --alb-color-log-e: #b3261e;
  --alb-color-log-f: #7d1d6f;
  --alb-color-terminal-bg: #1e1f20;
  --alb-color-terminal-fg: #e3e3e3;
  --alb-color-terminal-muted: #a9acaa;
  --alb-color-terminal-prompt: #6dd58c;
  --alb-color-terminal-accent: #a8c7fa;
  --alb-color-terminal-warn: #ffba44;
  --alb-color-terminal-error: #f2b8b5;

  /* ---- elevation (M3 levels) ---- */
  --md-sys-elevation-level1: 0 1px 2px rgba(0, 0, 0, .3), 0 1px 3px 1px rgba(0, 0, 0, .15);
  --md-sys-elevation-level2: 0 1px 2px rgba(0, 0, 0, .3), 0 2px 6px 2px rgba(0, 0, 0, .15);
  --md-sys-elevation-level3: 0 1px 3px rgba(0, 0, 0, .3), 0 4px 8px 3px rgba(0, 0, 0, .15);

  /* ---- state layers ---- */
  --md-sys-state-hover-opacity: .08;
  --md-sys-state-focus-opacity: .10;
  --md-sys-state-pressed-opacity: .10;

  /* ---- shape ---- */
  --md-sys-shape-corner-extra-small: 4px;
  --md-sys-shape-corner-small: 8px;
  --md-sys-shape-corner-medium: 12px;
  --md-sys-shape-corner-large: 16px;
  --md-sys-shape-corner-extra-large: 28px;
  --md-sys-shape-corner-full: 9999px;

  /* ---- type ---- */
  --md-ref-typeface-plain: "Roboto Flex", "Roboto", "Noto Sans SC", "Noto Sans CJK SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --md-ref-typeface-brand: var(--md-ref-typeface-plain);
  --md-ref-typeface-mono: "Roboto Mono", "Noto Sans SC", "Noto Sans CJK SC", ui-monospace, Consolas, monospace;
  /* tracking: M3 values for Latin; Chinese sets them to 0 below */
  --alb-tracking-title: .15px;
  --alb-tracking-label: .1px;
  --alb-tracking-body: .25px;
  --alb-tracking-small: .4px;
  --alb-tracking-caps: .5px;
  /* line heights: M3 values for Latin; CJK needs more air */
  --alb-lh-body-large: 24px;
  --alb-lh-body-medium: 20px;
  --alb-lh-body-small: 16px;

  /* ---- layout ---- */
  --alb-topbar-h: 64px;
  --alb-drawer-w: 256px;
  --alb-rail-w: 80px;
  --alb-sheet-w: 400px;
  --alb-gutter: 24px;
  --alb-gap: 16px;

  color-scheme: light;
}

/* Chinese: no letter-spacing (it breaks CJK rhythm), taller lines. */
:root:lang(zh) {
  --alb-tracking-title: 0px;
  --alb-tracking-label: 0px;
  --alb-tracking-body: 0px;
  --alb-tracking-small: 0px;
  --alb-tracking-caps: .5px;
  --alb-lh-body-large: 26px;
  --alb-lh-body-medium: 22px;
  --alb-lh-body-small: 18px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --md-sys-color-primary: #a8c7fa;
    --md-sys-color-on-primary: #062e6f;
    --md-sys-color-primary-container: #0842a0;
    --md-sys-color-on-primary-container: #d3e3fd;
    --md-sys-color-secondary: #7fcfff;
    --md-sys-color-on-secondary: #003355;
    --md-sys-color-secondary-container: #004a77;
    --md-sys-color-on-secondary-container: #c2e7ff;
    --md-sys-color-tertiary: #6dd58c;
    --md-sys-color-on-tertiary: #0a3818;
    --md-sys-color-tertiary-container: #0f5223;
    --md-sys-color-on-tertiary-container: #c4eed0;
    --md-sys-color-error: #f2b8b5;
    --md-sys-color-on-error: #601410;
    --md-sys-color-error-container: #8c1d18;
    --md-sys-color-on-error-container: #f9dedc;
    --md-sys-color-background: #131314;
    --md-sys-color-on-background: #e3e3e3;
    --md-sys-color-surface: #131314;
    --md-sys-color-surface-dim: #131314;
    --md-sys-color-surface-bright: #37393b;
    --md-sys-color-surface-container-lowest: #0e0e0e;
    --md-sys-color-surface-container-low: #1b1b1b;
    --md-sys-color-surface-container: #1e1f20;
    --md-sys-color-surface-container-high: #282a2c;
    --md-sys-color-surface-container-highest: #333537;
    --md-sys-color-on-surface: #e3e3e3;
    --md-sys-color-on-surface-variant: #c4c7c5;
    --md-sys-color-outline: #8e918f;
    --md-sys-color-outline-variant: #444746;
    --md-sys-color-inverse-surface: #e3e3e3;
    --md-sys-color-inverse-on-surface: #303030;
    --md-sys-color-inverse-primary: #0b57d0;
    --alb-color-text-muted: #a9acaa;
    --alb-color-card: #1e1f20;
    --alb-color-well: #282a2c;
    --alb-color-divider: #333537;
    --alb-color-success: #6dd58c;
    --alb-color-success-container: #0f5223;
    --alb-color-on-success-container: #c4eed0;
    --alb-color-warning: #ffba44;
    --alb-color-warning-container: #3d2e00;
    --alb-color-on-warning-container: #ffdf99;
    --alb-color-idle: #8e918f;
    --alb-color-src-uart: #4fd8eb;
    --alb-color-src-kernel: #d0bcff;
    --alb-color-src-logcat: #a8c7fa;
    --alb-color-src-job: #ffb870;
    --alb-color-log-v: #a9acaa;
    --alb-color-log-d: #a8c7fa;
    --alb-color-log-i: #6dd58c;
    --alb-color-log-w: #ffba44;
    --alb-color-log-e: #f2b8b5;
    --alb-color-log-f: #ffadf0;
    --alb-color-terminal-bg: #0e0e0e;
    --md-sys-elevation-level1: 0 1px 2px rgba(0, 0, 0, .3), 0 1px 3px 1px rgba(0, 0, 0, .15);
    --md-sys-elevation-level2: 0 1px 2px rgba(0, 0, 0, .3), 0 2px 6px 2px rgba(0, 0, 0, .15);
    --md-sys-elevation-level3: 0 1px 3px rgba(0, 0, 0, .3), 0 4px 8px 3px rgba(0, 0, 0, .15);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --md-sys-color-primary: #a8c7fa;
  --md-sys-color-on-primary: #062e6f;
  --md-sys-color-primary-container: #0842a0;
  --md-sys-color-on-primary-container: #d3e3fd;
  --md-sys-color-secondary: #7fcfff;
  --md-sys-color-on-secondary: #003355;
  --md-sys-color-secondary-container: #004a77;
  --md-sys-color-on-secondary-container: #c2e7ff;
  --md-sys-color-tertiary: #6dd58c;
  --md-sys-color-on-tertiary: #0a3818;
  --md-sys-color-tertiary-container: #0f5223;
  --md-sys-color-on-tertiary-container: #c4eed0;
  --md-sys-color-error: #f2b8b5;
  --md-sys-color-on-error: #601410;
  --md-sys-color-error-container: #8c1d18;
  --md-sys-color-on-error-container: #f9dedc;
  --md-sys-color-background: #131314;
  --md-sys-color-on-background: #e3e3e3;
  --md-sys-color-surface: #131314;
  --md-sys-color-surface-dim: #131314;
  --md-sys-color-surface-bright: #37393b;
  --md-sys-color-surface-container-lowest: #0e0e0e;
  --md-sys-color-surface-container-low: #1b1b1b;
  --md-sys-color-surface-container: #1e1f20;
  --md-sys-color-surface-container-high: #282a2c;
  --md-sys-color-surface-container-highest: #333537;
  --md-sys-color-on-surface: #e3e3e3;
  --md-sys-color-on-surface-variant: #c4c7c5;
  --md-sys-color-outline: #8e918f;
  --md-sys-color-outline-variant: #444746;
  --md-sys-color-inverse-surface: #e3e3e3;
  --md-sys-color-inverse-on-surface: #303030;
  --md-sys-color-inverse-primary: #0b57d0;
  --alb-color-text-muted: #a9acaa;
  --alb-color-card: #1e1f20;
  --alb-color-well: #282a2c;
  --alb-color-divider: #333537;
  --alb-color-success: #6dd58c;
  --alb-color-success-container: #0f5223;
  --alb-color-on-success-container: #c4eed0;
  --alb-color-warning: #ffba44;
  --alb-color-warning-container: #3d2e00;
  --alb-color-on-warning-container: #ffdf99;
  --alb-color-idle: #8e918f;
  --alb-color-src-uart: #4fd8eb;
  --alb-color-src-kernel: #d0bcff;
  --alb-color-src-logcat: #a8c7fa;
  --alb-color-src-job: #ffb870;
  --alb-color-log-v: #a9acaa;
  --alb-color-log-d: #a8c7fa;
  --alb-color-log-i: #6dd58c;
  --alb-color-log-w: #ffba44;
  --alb-color-log-e: #f2b8b5;
  --alb-color-log-f: #ffadf0;
  --alb-color-terminal-bg: #0e0e0e;
  color-scheme: dark;
}

/* ---- base.css ---- */
/* v3 base: element defaults, type scale helpers, focus, scrollbars. */

*,
*::before,
*::after { box-sizing: border-box; }

[hidden] { display: none !important; }

html,
body,
#root {
  margin: 0;
  min-height: 100%;
}

body {
  background-color: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  font-family: var(--md-ref-typeface-plain);
  font-size: 14px;
  line-height: var(--alb-lh-body-medium);
  letter-spacing: var(--alb-tracking-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

button { cursor: pointer; }
button:disabled { cursor: not-allowed; }

a { color: var(--md-sys-color-primary); }

:focus-visible {
  outline: 2px solid var(--md-sys-color-primary);
  outline-offset: 2px;
}

code,
kbd,
samp,
pre,
.mono {
  font-family: var(--md-ref-typeface-mono);
  font-size: 12.5px;
  letter-spacing: 0;
}

.num { font-variant-numeric: tabular-nums; }

/* M3 type scale as utility classes (used by headings and labels). */
.t-headline-medium { font-size: 28px; line-height: 36px; font-weight: 400; letter-spacing: 0; }
.t-headline-small { font-size: 24px; line-height: 32px; font-weight: 400; letter-spacing: 0; }
.t-title-large { font-size: 22px; line-height: 28px; font-weight: 400; letter-spacing: 0; }
.t-title-medium { font-size: 16px; line-height: 24px; font-weight: 500; letter-spacing: var(--alb-tracking-title); }
.t-title-small { font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: var(--alb-tracking-label); }
.t-body-large { font-size: 16px; line-height: var(--alb-lh-body-large); }
.t-body-small { font-size: 12px; line-height: var(--alb-lh-body-small); letter-spacing: var(--alb-tracking-small); }
.t-label-large { font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: var(--alb-tracking-label); }
.t-label-medium { font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: var(--alb-tracking-caps); }
.t-label-small { font-size: 11px; line-height: 16px; font-weight: 500; letter-spacing: var(--alb-tracking-caps); }
.t-muted { color: var(--alb-color-text-muted); }

h1, h2, h3, h4 { margin: 0; text-wrap: balance; }

/* Icons: Material Symbols-style 24px grid, drawn as stroked SVG. */
svg.ic {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
svg.ic--sm { width: 16px; height: 16px; }
svg.ic--lg { width: 24px; height: 24px; }

/* Scrollbars that follow the theme. */
* { scrollbar-width: thin; scrollbar-color: var(--md-sys-color-outline-variant) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: var(--md-sys-color-outline-variant);
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ---- shell.css ---- */
/*
 * v3 app shell: top app bar, navigation drawer / rail, content, assistant
 * side sheet. Window classes follow M3: >=1200 expanded drawer, 600-1199
 * navigation rail, <600 modal drawer behind the menu button.
 */

body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  height: env(safe-area-inset-top, 0px);
  background: var(--md-sys-color-surface);
  z-index: 40;
}

.app {
  --alb-nav-w: var(--alb-drawer-w);
  display: grid;
  grid-template-columns: var(--alb-nav-w) minmax(0, 1fr);
  grid-template-rows: var(--alb-topbar-h) 1fr;
  min-height: 100vh;
  background: var(--md-sys-color-surface);
}
.app[data-nav="rail"] { --alb-nav-w: var(--alb-rail-w); }

/* ---------- top app bar ---------- */
.topbar {
  grid-column: 1 / -1;
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 8px;
  height: var(--alb-topbar-h);
  padding-left: max(8px, env(safe-area-inset-left, 0px));
  padding-right: max(12px, env(safe-area-inset-right, 0px));
  background: var(--md-sys-color-surface);
  min-width: 0;
}
.topbar__menu { flex: none; }
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px 0 4px;
  color: var(--md-sys-color-on-surface);
  text-decoration: none;
  flex: none;
}
.brand__mark {
  width: 32px;
  height: 32px;
  border-radius: var(--md-sys-shape-corner-small);
  display: grid;
  place-items: center;
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
}
.brand__mark svg { width: 20px; height: 20px; }
.brand__name { font-size: 22px; line-height: 28px; font-weight: 400; letter-spacing: 0; }
.brand__sub { font-size: 12px; color: var(--alb-color-text-muted); }

.board-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 8px 0 10px;
  border: 0;
  border-radius: var(--md-sys-shape-corner-small);
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  font-weight: 500;
  white-space: nowrap;
  flex: none;
}
.board-switch__meta { font-weight: 400; font-size: 12px; opacity: .9; }
.board-switch__meta--warn { font-weight: 600; opacity: 1; }

/* board / device menu: moves with the arrow keys, so focus is drawn
   inside the item (the scroller would clip an outside ring) */
.board-menu { max-height: min(70vh, 560px); overflow-y: auto; }
.board-menu .menu__item:focus-visible { outline-offset: -2px; }
.board-menu .menu__item:focus-visible::after { opacity: var(--md-sys-state-focus-opacity); }
/* rows that explain (loading, why the list is empty) are not actions;
   .menu prefix: components.css loads after this file */
.menu .menu__item--info { cursor: default; }
.menu .menu__item--info:hover::after,
.menu .menu__item--info:active::after { opacity: 0; }
.menu .menu__item--error > svg,
.menu .menu__item--error > span:nth-child(2) { color: var(--md-sys-color-error); }
.menu .menu__item--error > span:nth-child(2) { font-weight: 500; }

.chans {
  display: flex;
  gap: 6px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.chans::-webkit-scrollbar { display: none; }

.topbar__spacer { flex: 1; min-width: 8px; }

.search {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  width: min(360px, 28vw);
  padding: 0 14px 0 16px;
  border: 0;
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface-variant);
  text-align: left;
  flex: none;
}
.search span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search kbd {
  font-family: var(--md-ref-typeface-mono);
  font-size: 11px;
  padding: 1px 6px;
  border-radius: var(--md-sys-shape-corner-extra-small);
  border: 1px solid var(--md-sys-color-outline-variant);
}

/* ---------- navigation drawer / rail ---------- */
.nav {
  position: sticky;
  top: calc(env(safe-area-inset-top, 0px) + var(--alb-topbar-h));
  align-self: start;
  height: calc(100vh - var(--alb-topbar-h) - env(safe-area-inset-top, 0px));
  overflow-y: auto;
  padding: 4px 12px 24px max(12px, env(safe-area-inset-left, 0px));
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nav__label {
  padding: 18px 16px 8px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: var(--md-sys-color-on-surface-variant);
}
.nav__label:first-child { padding-top: 6px; }
.nav__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 48px;
  padding: 0 16px;
  border-radius: var(--md-sys-shape-corner-full);
  color: var(--md-sys-color-on-surface-variant);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: var(--alb-tracking-label);
  white-space: nowrap;
}
.nav__item:hover { background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); }
.nav__item[aria-current="page"] {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  font-weight: 600;
}
.nav__badge {
  margin-left: auto;
  min-width: 20px;
  padding: 0 6px;
  border-radius: var(--md-sys-shape-corner-full);
  font-size: 11px;
  line-height: 18px;
  font-weight: 600;
  text-align: center;
  background: var(--md-sys-color-error);
  color: var(--md-sys-color-on-error);
}
.nav__badge--new {
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
}

/* rail: icon over a short label */
.app[data-nav="rail"] .nav { padding: 4px 0 24px; align-items: center; }
.app[data-nav="rail"] .nav__label { display: none; }
.app[data-nav="rail"] .nav__sep { display: block; }
.app[data-nav="rail"] .nav__item {
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 72px;
  height: 64px;
  padding: 0;
  border-radius: var(--md-sys-shape-corner-large);
  font-size: 11px;
  line-height: 14px;
  font-weight: 500;
  white-space: normal;
  text-align: center;
}
.app[data-nav="rail"] .nav__item[aria-current="page"] { background: transparent; }
.app[data-nav="rail"] .nav__item svg {
  width: 56px;
  height: 32px;
  padding: 6px 18px;
  border-radius: var(--md-sys-shape-corner-full);
}
.app[data-nav="rail"] .nav__item[aria-current="page"] svg {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}
.app[data-nav="rail"] .nav__badge { position: absolute; top: 2px; right: 6px; margin: 0; min-width: 16px; line-height: 16px; }
.nav__sep { display: none; width: 40px; height: 1px; margin: 8px 0; background: var(--md-sys-color-outline-variant); }

/* ---------- content ---------- */
.content {
  min-width: 0;
  padding: 8px var(--alb-gutter) 48px 8px;
  padding-right: max(var(--alb-gutter), env(safe-area-inset-right, 0px));
  container-type: inline-size;
  container-name: content;
}
.app[data-nav="rail"] .content { padding-left: 4px; }

/* ---------- assistant side sheet ---------- */
.sheet {
  position: fixed;
  z-index: 50;
  top: calc(env(safe-area-inset-top, 0px) + var(--alb-topbar-h));
  right: 0;
  bottom: 0;
  width: min(var(--alb-sheet-w), 100vw);
  display: flex;
  flex-direction: column;
  background: var(--md-sys-color-surface-container-low);
  border-radius: var(--md-sys-shape-corner-large) 0 0 0;
  box-shadow: var(--md-sys-elevation-level1);
  padding-right: env(safe-area-inset-right, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (min-width: 1200px) {
  /* docked: the page keeps at least 480 px however wide the sheet was dragged */
  .app[data-sheet="open"] {
    --alb-sheet-docked-w: min(var(--alb-sheet-w), calc(100vw - var(--alb-nav-w) - 480px));
    grid-template-columns: var(--alb-nav-w) minmax(0, 1fr) var(--alb-sheet-docked-w);
  }
  .app[data-sheet="open"] .sheet { box-shadow: none; width: var(--alb-sheet-docked-w); }
}

/* the sheet's left edge: drag to resize (components/v3/Assistant.tsx SheetResizer) */
.sheet__resize {
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  left: -4px;
  width: 9px;
  cursor: col-resize;
  touch-action: none;
}
.sheet__resize::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 3px;
  width: 3px;
  height: 48px;
  transform: translateY(-50%);
  border-radius: 2px;
  background: var(--md-sys-color-outline);
  opacity: 0;
  transition: opacity 0.15s;
}
.sheet__resize:hover::after,
.sheet__resize:focus-visible::after,
.is-resizing .sheet__resize::after { opacity: 1; }
.sheet__resize:focus-visible { outline: 2px solid var(--md-sys-color-primary); outline-offset: -2px; }
/* while dragging: no text selection, the resize cursor everywhere */
.is-resizing { cursor: col-resize; user-select: none; }

.scrim {
  position: fixed;
  inset: 0;
  z-index: 45;
  background: color-mix(in srgb, var(--md-sys-color-scrim) 32%, transparent);
}

/* ---------- window classes ---------- */
/* narrow bars keep each channel as dot + name; the detail moves to its tooltip */
@media (max-width: 1499px) {
  .chans .chip > span:last-child:not(.dot) { display: none; }
}
@media (max-width: 1199px) {
  .search { width: 44px; padding: 0; justify-content: center; }
  .search span,
  .search kbd { display: none; }
  .brand__sub { display: none; }
}
@media (max-width: 599px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .nav {
    position: fixed;
    z-index: 50;
    top: 0;
    left: 0;
    bottom: 0;
    height: auto;
    width: min(300px, 86vw);
    padding-top: calc(env(safe-area-inset-top, 0px) + 16px);
    background: var(--md-sys-color-surface-container-low);
    border-radius: 0 var(--md-sys-shape-corner-large) var(--md-sys-shape-corner-large) 0;
    box-shadow: var(--md-sys-elevation-level1);
    transform: translateX(-105%);
    transition: transform .25s ease;
    align-items: stretch;
  }
  .app[data-nav-open="true"] .nav { transform: none; }
  .app .nav .nav__label { display: block; }
  .app .nav .nav__item {
    flex-direction: row;
    justify-content: flex-start;
    width: auto;
    height: 48px;
    padding: 0 16px;
    gap: 12px;
    font-size: 14px;
    border-radius: var(--md-sys-shape-corner-full);
  }
  .app .nav .nav__item svg { width: 20px; height: 20px; padding: 0; background: none; }
  .app .nav .nav__item[aria-current="page"] { background: var(--md-sys-color-secondary-container); }
  .app .nav .nav__badge { position: static; margin-left: auto; }
  .content { padding: 8px max(16px, env(safe-area-inset-right, 0px)) 40px max(16px, env(safe-area-inset-left, 0px)); }
  .topbar { flex-wrap: wrap; height: auto; min-height: var(--alb-topbar-h); padding-block: 8px; }
  .chans { order: 10; flex-basis: 100%; }
  .board-switch__meta { display: none; }
  .brand__name { font-size: 18px; }
  .sheet { top: 0; border-radius: 0; }
  .sheet__resize { display: none; }
}
@media (min-width: 600px) {
  .topbar__menu { display: none; }
}

/* ---------- page search (⌘K) ---------- */
.palette {
  position: fixed;
  z-index: 70;
  top: calc(env(safe-area-inset-top, 0px) + 72px);
  left: 50%;
  transform: translateX(-50%);
  width: min(560px, calc(100vw - 32px));
  max-height: min(520px, calc(100vh - 120px));
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: var(--md-sys-shape-corner-extra-large);
  background: var(--md-sys-color-surface-container-high);
  box-shadow: var(--md-sys-elevation-level3);
}
.palette__input { height: 48px; background: var(--md-sys-color-surface-container-highest); }
.palette__list { overflow-y: auto; min-height: 0; }
.palette__list .menu__item { width: 100%; border-radius: var(--md-sys-shape-corner-medium); cursor: pointer; }
.palette__list .menu__item[aria-selected="true"] { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.palette__none { margin: 0; padding: 16px; color: var(--alb-color-text-muted); }

/* ---- components.css ---- */
/*
 * v3 components — Material 3 specs, sized for a dense tool.
 * State layers use ::after with currentColor at the M3 opacities.
 */

/* ---------- state layer ---------- */
.btn,
.icon-btn,
.chip,
.seg button,
.tab,
.menu__item,
.list__item--action,
.search,
.board-switch {
  position: relative;
  isolation: isolate;
}
.btn::after,
.icon-btn::after,
.chip::after,
.seg button::after,
.tab::after,
.menu__item::after,
.list__item--action::after,
.search::after,
.board-switch::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: currentColor;
  opacity: 0;
  pointer-events: none;
  z-index: -1;
  transition: opacity .15s;
}
.btn:hover::after,
.icon-btn:hover::after,
.chip:hover::after,
.seg button:hover::after,
.tab:hover::after,
.menu__item:hover::after,
.list__item--action:hover::after,
.search:hover::after,
.board-switch:hover::after { opacity: var(--md-sys-state-hover-opacity); }
.btn:active::after,
.icon-btn:active::after,
.chip:active::after,
.menu__item:active::after { opacity: var(--md-sys-state-pressed-opacity); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 24px;
  border: 0;
  border-radius: var(--md-sys-shape-corner-full);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  letter-spacing: var(--alb-tracking-label);
  white-space: nowrap;
  text-decoration: none;
  background: transparent;
  color: var(--md-sys-color-primary);
}
.btn:has(> svg:first-child) { padding-left: 16px; }
.btn--filled { background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); }
.btn--filled:hover { box-shadow: var(--md-sys-elevation-level1); }
.btn--tonal { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.btn--outlined { border: 1px solid var(--md-sys-color-outline); }
.btn--text { padding: 0 12px; }
.btn--text:has(> svg:first-child) { padding-left: 12px; }
.btn--danger { background: var(--md-sys-color-error); color: var(--md-sys-color-on-error); }
.btn--sm { height: 32px; padding: 0 16px; font-size: 13px; }
.btn--sm:has(> svg:first-child) { padding-left: 12px; }
.btn:disabled,
.btn[aria-disabled="true"] {
  background: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
  color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
  border-color: transparent;
  box-shadow: none;
}
.btn--text:disabled,
.btn--outlined:disabled { background: transparent; }

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: var(--md-sys-shape-corner-full);
  background: transparent;
  color: var(--md-sys-color-on-surface-variant);
  flex: none;
}
.icon-btn--sm { width: 32px; height: 32px; }
.icon-btn--tonal { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.icon-btn[aria-pressed="true"],
.icon-btn[aria-expanded="true"] { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }

/* ---------- chips ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-small);
  background: transparent;
  color: var(--md-sys-color-on-surface-variant);
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  letter-spacing: var(--alb-tracking-label);
  white-space: nowrap;
  flex: none;
}
.chip:has(> svg:first-child),
.chip:has(> .dot:first-child) { padding-left: 8px; }
.chip b { font-weight: 600; color: var(--md-sys-color-on-surface); }
.chip--selected,
.chip[aria-pressed="true"] {
  background: var(--md-sys-color-secondary-container);
  border-color: transparent;
  color: var(--md-sys-color-on-secondary-container);
}
.chip--selected b,
.chip[aria-pressed="true"] b { color: inherit; }
.chip--sm { height: 28px; font-size: 12px; padding: 0 10px; }

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
  background: var(--alb-color-idle);
}
.dot--ok { background: var(--alb-color-success); }
.dot--warn { background: var(--alb-color-warning); }
.dot--bad { background: var(--md-sys-color-error); }
.dot--busy { background: var(--md-sys-color-primary); }
.dot--live { background: var(--alb-color-success); box-shadow: 0 0 0 3px var(--alb-color-success-container); }

/* status pills: state encoded in colour and text */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--md-sys-shape-corner-full);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  white-space: nowrap;
  background: var(--md-sys-color-surface-container-highest);
  color: var(--md-sys-color-on-surface-variant);
}
.pill--ok { background: var(--alb-color-success-container); color: var(--alb-color-on-success-container); }
.pill--warn { background: var(--alb-color-warning-container); color: var(--alb-color-on-warning-container); }
.pill--bad { background: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); }
.pill--info { background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }

.badge {
  display: inline-grid;
  place-items: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-error);
  color: var(--md-sys-color-on-error);
  font-size: 11px;
  font-weight: 600;
  line-height: 16px;
}

/* timeline / log source tags */
.src-tag {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--md-sys-shape-corner-extra-small);
  font-family: var(--md-ref-typeface-mono);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  color: var(--src, var(--alb-color-idle));
  background: color-mix(in srgb, var(--src, var(--alb-color-idle)) 14%, transparent);
}
.src--uart { --src: var(--alb-color-src-uart); }
.src--kernel,
.src--dmesg { --src: var(--alb-color-src-kernel); }
.src--logcat { --src: var(--alb-color-src-logcat); }
.src--job { --src: var(--alb-color-src-job); }

.lvl {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: var(--md-sys-shape-corner-extra-small);
  font-family: var(--md-ref-typeface-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--lvl);
  background: color-mix(in srgb, var(--lvl) 16%, transparent);
}
.lvl--V { --lvl: var(--alb-color-log-v); }
.lvl--D { --lvl: var(--alb-color-log-d); }
.lvl--I { --lvl: var(--alb-color-log-i); }
.lvl--W { --lvl: var(--alb-color-log-w); }
.lvl--E { --lvl: var(--alb-color-log-e); }
.lvl--F { --lvl: var(--alb-color-log-f); }

/* ---------- cards & surfaces ---------- */
.card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px 20px 20px;
  border-radius: var(--md-sys-shape-corner-large);
  background: var(--alb-color-card);
}
.card--outlined { border: 1px solid var(--md-sys-color-outline-variant); }
.card--flush { padding: 0; gap: 0; overflow: hidden; }
.card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  min-height: 32px;
}
.card--flush > .card__head { padding: 14px 20px 10px; }
.card__head h2,
.card__head h3 { font-size: 16px; line-height: 24px; font-weight: 500; letter-spacing: var(--alb-tracking-title); }
.card__sub { font-size: 12px; line-height: var(--alb-lh-body-small); color: var(--alb-color-text-muted); }
.card__actions { margin-left: auto; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.well {
  min-width: 0;
  border-radius: var(--md-sys-shape-corner-medium);
  background: var(--alb-color-well);
}
.divider { height: 1px; background: var(--alb-color-divider); border: 0; margin: 0; }

/* ---------- page header & grid ---------- */
.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 16px;
  margin: 4px 0 20px;
}
.page-head__eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  font-size: 12px;
  line-height: 16px;
  color: var(--alb-color-text-muted);
}
.page-head h1 { font-size: 28px; line-height: 36px; font-weight: 400; letter-spacing: 0; }
.page-head p { margin: 4px 0 0; color: var(--md-sys-color-on-surface-variant); max-width: 72ch; }
.page-head__actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sample-tag {
  padding: 0 8px;
  border-radius: var(--md-sys-shape-corner-full);
  border: 1px dashed var(--md-sys-color-outline);
  font-size: 11px;
  line-height: 18px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--alb-gap);
}
.span-12 { grid-column: span 12; }
.span-9 { grid-column: span 9; }
.span-8 { grid-column: span 8; }
.span-7 { grid-column: span 7; }
.span-6 { grid-column: span 6; }
.span-5 { grid-column: span 5; }
.span-4 { grid-column: span 4; }
.span-3 { grid-column: span 3; }
@container content (max-width: 1080px) {
  .grid > .span-9, .grid > .span-8, .grid > .span-7, .grid > .span-6,
  .grid > .span-5, .grid > .span-4, .grid > .span-3 { grid-column: span 12; }
}
.stack { display: flex; flex-direction: column; gap: var(--alb-gap); min-width: 0; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.row--between { justify-content: space-between; }
.grow { flex: 1; min-width: 0; }

/* ---------- tabs ---------- */
.tabs {
  display: flex;
  gap: 0;
  overflow-x: auto;
  border-bottom: 1px solid var(--alb-color-divider);
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 0 16px;
  border: 0;
  background: transparent;
  color: var(--md-sys-color-on-surface-variant);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: var(--alb-tracking-label);
  white-space: nowrap;
  text-decoration: none;
  flex: none;
}
.tab::before {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: transparent;
}
.tab[aria-selected="true"] { color: var(--md-sys-color-primary); }
.tab[aria-selected="true"]::before { background: var(--md-sys-color-primary); }
.tab::after { border-radius: 0; }
.tab .badge { background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); }

/* ---------- segmented buttons ---------- */
.seg {
  display: inline-flex;
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-full);
  overflow: hidden;
  flex: none;
}
.seg button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 16px;
  border: 0;
  border-left: 1px solid var(--md-sys-color-outline);
  background: transparent;
  color: var(--md-sys-color-on-surface);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}
.seg button:first-child { border-left: 0; }
.seg button[aria-pressed="true"] {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}
.seg--sm button { height: 30px; padding: 0 12px; font-size: 13px; }
/* a segmented group never pushes the page wider; it scrolls inside itself */
.seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.seg::-webkit-scrollbar { display: none; }
.seg button { flex: none; }
/* coloured tags inside a selected segment sit on the card colour so they keep 4.5:1 */
.seg .src-tag { background: var(--alb-color-card); }

/* ---------- fields ---------- */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field__label { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--md-sys-color-on-surface-variant); }
.input,
.select,
.textarea {
  width: 100%;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-extra-small);
  background: transparent;
  color: var(--md-sys-color-on-surface);
  font-size: 14px;
}
.input:focus,
.select:focus,
.textarea:focus { outline: none; border-color: var(--md-sys-color-primary); box-shadow: inset 0 0 0 1px var(--md-sys-color-primary); }
.input::placeholder,
.textarea::placeholder { color: var(--alb-color-text-muted); }
.textarea { resize: vertical; line-height: var(--alb-lh-body-medium); }
.select { appearance: auto; }
.input--search {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 12px;
  border-radius: var(--md-sys-shape-corner-full);
  border: 0;
  background: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface-variant);
  min-width: 0;
}
.input--search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  outline: none;
  color: var(--md-sys-color-on-surface);
}

.switch {
  appearance: none;
  position: relative;
  width: 52px;
  height: 32px;
  margin: 0;
  border-radius: var(--md-sys-shape-corner-full);
  border: 2px solid var(--md-sys-color-outline);
  background: var(--md-sys-color-surface-container-highest);
  cursor: pointer;
  flex: none;
}
.switch::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 6px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--md-sys-color-outline);
  transition: all .2s;
}
.switch:checked { background: var(--md-sys-color-primary); border-color: var(--md-sys-color-primary); }
.switch:checked::before { left: 22px; top: 2px; width: 24px; height: 24px; background: var(--md-sys-color-on-primary); }
.check { accent-color: var(--md-sys-color-primary); width: 18px; height: 18px; margin: 0; flex: none; }

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; min-width: 0; }
.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th {
  text-align: left;
  padding: 10px 12px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  color: var(--md-sys-color-on-surface-variant);
  border-bottom: 1px solid var(--alb-color-divider);
  white-space: nowrap;
}
.table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--alb-color-divider);
  vertical-align: middle;
}
.table tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: color-mix(in srgb, var(--md-sys-color-on-surface) 4%, transparent); }
.table .num,
.table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table--dense td { padding: 7px 10px; }
.table--dense th { padding: 8px 10px; }
.table tr[aria-selected="true"] td { background: color-mix(in srgb, var(--md-sys-color-primary) 10%, transparent); }

/* ---------- lists ---------- */
.list { list-style: none; margin: 0; padding: 0; }
.list__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 2px 14px;
  padding: 12px 0;
  border-top: 1px solid var(--alb-color-divider);
}
.list__item:first-child { border-top: 0; }
/* a whole row that acts: a button laid out like a list item */
button.list__item--action {
  width: 100%;
  border: 0;
  border-top: 1px solid var(--alb-color-divider);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: var(--md-sys-shape-corner-small);
}
li:first-child > button.list__item--action { border-top: 0; }
.list__lead { grid-row: span 2; color: var(--md-sys-color-on-surface-variant); }
.list__title { font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
.list__meta { grid-column: 2; font-size: 12px; line-height: var(--alb-lh-body-small); color: var(--alb-color-text-muted); overflow-wrap: anywhere; }
.list__trail { grid-row: span 2; display: flex; align-items: center; gap: 4px; }

/* ---------- key / value facts ---------- */
.kv {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px 20px;
  margin: 0;
}
.kv > div { min-width: 0; }
.kv dt { font-size: 12px; line-height: 16px; color: var(--alb-color-text-muted); }
.kv dd { margin: 2px 0 0; overflow-wrap: anywhere; }
.kv .kv--wide { grid-column: span 2; }

/* ---------- progress ---------- */
.progress {
  position: relative;
  height: 4px;
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-secondary-container);
  overflow: hidden;
}
.progress > span {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: inherit;
  background: var(--md-sys-color-primary);
}
.progress--indeterminate > span { width: 30%; animation: alb-indeterminate 1.4s ease-in-out infinite; }
@keyframes alb-indeterminate {
  from { left: -30%; }
  to { left: 100%; }
}
.spinner {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2.5px solid var(--md-sys-color-secondary-container);
  border-top-color: var(--md-sys-color-primary);
  animation: alb-spin .9s linear infinite;
  flex: none;
}
@keyframes alb-spin { to { transform: rotate(360deg); } }

/* ---------- banners, snackbar, confirm ---------- */
.banner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 14px;
  padding: 12px 16px;
  border-radius: var(--md-sys-shape-corner-medium);
  background: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface);
}
.banner p { margin: 0; }
.banner__actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.banner--warn { background: var(--alb-color-warning-container); color: var(--alb-color-on-warning-container); }
.banner--error { background: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); }
.banner--info { background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }
.banner--ok { background: var(--alb-color-success-container); color: var(--alb-color-on-success-container); }
.banner .btn--text { color: inherit; }
.banner code { background: color-mix(in srgb, currentColor 10%, transparent); padding: 1px 6px; border-radius: 4px; }
@container content (max-width: 640px) {
  .banner { grid-template-columns: auto minmax(0, 1fr); }
  .banner__actions { grid-column: 1 / -1; justify-content: flex-start; }
}

.snackbar {
  position: fixed;
  z-index: 80;
  left: calc(16px + env(safe-area-inset-left, 0px));
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  max-width: min(560px, calc(100vw - 32px));
  padding: 14px 16px;
  border-radius: var(--md-sys-shape-corner-extra-small);
  background: var(--md-sys-color-inverse-surface);
  color: var(--md-sys-color-inverse-on-surface);
  box-shadow: var(--md-sys-elevation-level3);
  font-size: 14px;
}

/* ---------- menus ---------- */
.menu-anchor { position: relative; display: inline-flex; }
.menu {
  position: absolute;
  z-index: 60;
  top: calc(100% + 4px);
  left: 0;
  min-width: 240px;
  max-width: min(360px, calc(100vw - 32px));
  padding: 8px 0;
  border-radius: var(--md-sys-shape-corner-small);
  background: var(--md-sys-color-surface-container);
  box-shadow: var(--md-sys-elevation-level2);
  display: flex;
  flex-direction: column;
}
.menu--end { left: auto; right: 0; }
.menu__item {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: 2px 12px;
  min-height: 48px;
  padding: 8px 16px 8px 12px;
  border: 0;
  background: transparent;
  color: var(--md-sys-color-on-surface);
  text-align: left;
  font-size: 14px;
}
.menu__item svg { color: var(--md-sys-color-on-surface-variant); }
.menu__desc { grid-column: 2 / -1; font-size: 12px; line-height: var(--alb-lh-body-small); color: var(--alb-color-text-muted); }
.menu__sep { height: 1px; margin: 8px 0; background: var(--alb-color-divider); }

/* ---------- empty / loading ---------- */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 32px 16px;
  text-align: center;
  color: var(--md-sys-color-on-surface-variant);
}
.empty svg { width: 40px; height: 40px; color: var(--md-sys-color-outline); }
.empty h3 { font-size: 16px; font-weight: 500; color: var(--md-sys-color-on-surface); }
.empty p { margin: 0; max-width: 46ch; }
.skeleton {
  border-radius: var(--md-sys-shape-corner-small);
  background: linear-gradient(90deg, var(--alb-color-well) 25%, var(--md-sys-color-surface-container-high) 50%, var(--alb-color-well) 75%);
  background-size: 200% 100%;
  animation: alb-shimmer 1.4s linear infinite;
}
@keyframes alb-shimmer { to { background-position: -200% 0; } }

/* ---------- steps (a real ordered path) ---------- */
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(var(--steps, 5), minmax(0, 1fr));
}
.steps li { position: relative; padding-top: 24px; min-width: 0; font-size: 13px; color: var(--alb-color-text-muted); }
.steps li::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--md-sys-color-outline);
  background: var(--alb-color-card);
  z-index: 1;
}
.steps li::after {
  content: "";
  position: absolute;
  top: 10px;
  left: 16px;
  right: 2px;
  height: 2px;
  background: var(--md-sys-color-outline-variant);
}
.steps li:last-child::after { display: none; }
.steps li.is-done { color: var(--md-sys-color-on-surface-variant); }
.steps li.is-done::before,
.steps li.is-now::before { background: var(--md-sys-color-primary); border-color: var(--md-sys-color-primary); }
.steps li.is-done::after { background: var(--md-sys-color-primary); }
.steps li.is-now { color: var(--md-sys-color-on-surface); font-weight: 600; }
.steps li.is-now::before { box-shadow: 0 0 0 4px var(--md-sys-color-primary-container); }
.steps li.is-bad::before { background: var(--md-sys-color-error); border-color: var(--md-sys-color-error); }
.steps b { display: block; font-weight: inherit; }
.steps span { display: block; font-family: var(--md-ref-typeface-mono); font-size: 11.5px; font-weight: 400; }
@container content (max-width: 560px) {
  .steps span { display: none; }
}

/* ---------- sparklines & metrics ---------- */
.spark { display: block; width: 100%; height: 44px; color: var(--md-sys-color-primary); }
.spark--sm { width: 88px; height: 24px; }
.spark--warn { color: var(--alb-color-warning); }
.spark .grid-line { stroke: var(--alb-color-divider); stroke-width: 1; }
.spark .line2 { stroke: var(--md-sys-color-outline); }

.metrics {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 2px;
  border-radius: var(--md-sys-shape-corner-medium);
  overflow: hidden;
}
.metric { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 12px 14px 10px; background: var(--alb-color-well); }
.metric__label { display: flex; justify-content: space-between; gap: 6px; font-size: 12px; color: var(--alb-color-text-muted); }
.metric__value { font-size: 24px; line-height: 32px; font-weight: 400; font-variant-numeric: tabular-nums; }
.metric__value small { margin-left: 4px; font-size: 12px; color: var(--alb-color-text-muted); }
.metric__sub { font-size: 12px; line-height: 16px; color: var(--alb-color-text-muted); font-variant-numeric: tabular-nums; }
.metric__range { display: flex; justify-content: space-between; font-family: var(--md-ref-typeface-mono); font-size: 11px; color: var(--alb-color-text-muted); }
.legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--md-sys-color-on-surface-variant); }
.legend > span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--src, var(--md-sys-color-primary)); }
.legend i.line { height: 2px; width: 12px; border-radius: 0; }
@container content (max-width: 1080px) {
  .metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container content (max-width: 520px) {
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- terminal ---------- */
.term {
  min-width: 0;
  margin: 0;
  padding: 12px 16px;
  border-radius: var(--md-sys-shape-corner-medium);
  background: var(--alb-color-terminal-bg);
  color: var(--alb-color-terminal-fg);
  font-family: var(--md-ref-typeface-mono);
  font-size: 13px;
  line-height: 20px;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.term .p { color: var(--alb-color-terminal-prompt); }
.term .a { color: var(--alb-color-terminal-accent); }
.term .d { color: var(--alb-color-terminal-muted); }
.term .w { color: var(--alb-color-terminal-warn); }
.term .e { color: var(--alb-color-terminal-error); }
.term .caret { display: inline-block; width: 8px; height: 16px; vertical-align: text-bottom; background: var(--alb-color-terminal-fg); animation: alb-blink 1s steps(1) infinite; }
@keyframes alb-blink { 50% { opacity: 0; } }

/* ---------- log dialog: a log opened over most of the screen ---------- */
/* Above the sheet (50), scrim (45) and page search (70); below the
   snackbar (80) so "Copied" still shows while the dialog is open. */
.dialog-scrim {
  position: fixed;
  z-index: 75;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px max(24px, env(safe-area-inset-right, 0px)) 24px max(24px, env(safe-area-inset-left, 0px));
  background: color-mix(in srgb, var(--md-sys-color-scrim) 40%, transparent);
}
.dialog {
  display: flex;
  flex-direction: column;
  width: min(1440px, 100%);
  height: 100%;
  max-height: 960px;
  min-height: 0;
  border-radius: var(--md-sys-shape-corner-extra-large);
  background: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface);
  box-shadow: var(--md-sys-elevation-level3);
  overflow: hidden;
}
.dialog__head { display: flex; align-items: center; gap: 4px; padding: 16px 12px 8px 24px; }
.dialog__title { flex: 1; min-width: 0; }
.dialog__title h2 { font-size: 22px; line-height: 28px; font-weight: 400; }
.dialog__title p { margin: 2px 0 0; font-size: 12px; line-height: 16px; color: var(--alb-color-text-muted); overflow-wrap: anywhere; }
.dialog__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0 24px 12px; }
.dialog__body { flex: 1; min-height: 0; display: flex; padding: 0 16px; }
.dialog__body .term { flex: 1; min-height: 0; font-size: 12.5px; line-height: 19px; }
.dialog__foot { display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 10px 24px 16px; font-size: 12px; color: var(--alb-color-text-muted); font-variant-numeric: tabular-nums; }
.dialog .icon-btn[aria-pressed="true"] { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }

/* Numbered log lines: the number column never wraps or gets selected
   with the text, so a copied block is just the log. */
.term--lines { padding-left: 0; }
.term--lines > div { display: grid; grid-template-columns: var(--ln-w, 5ch) minmax(0, 1fr); column-gap: 12px; }
.term--lines > div > i { font-style: normal; text-align: right; color: var(--alb-color-terminal-muted); user-select: none; }
.term--nowrap { white-space: pre; overflow-wrap: normal; }
.term--nowrap > div > span { white-space: pre; }
.term mark { border-radius: 2px; background: var(--alb-color-terminal-warn); color: var(--alb-color-terminal-bg); }

/* Compact windows: M3 full-screen dialog. */
@media (max-width: 599px) {
  .dialog-scrim { padding: 0; }
  .dialog { max-height: none; border-radius: 0; }
  .dialog__head { padding: calc(8px + env(safe-area-inset-top, 0px)) 4px 4px 16px; }
  .dialog__tools { padding: 0 16px 8px; }
  .dialog__body { padding: 0; }
  .dialog__body .term { border-radius: 0; }
  .dialog__foot { padding: 8px 16px calc(12px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- log rows ---------- */
.logs {
  min-width: 0;
  font-family: var(--md-ref-typeface-mono);
  font-size: 12.5px;
  line-height: 20px;
  overflow: auto;
}
.log {
  display: grid;
  grid-template-columns: var(--log-cols, 100px 58px 22px 150px minmax(0, 1fr));
  align-items: start;
  gap: 10px;
  padding: 2px 12px;
  border-left: 3px solid transparent;
}
.log:hover { background: color-mix(in srgb, var(--md-sys-color-on-surface) 5%, transparent); }
/* a log row is a button when it can be picked: keyboard reaches it, Enter toggles it */
button.log {
  width: 100%;
  border: 0;
  border-left: 3px solid transparent;
  background-color: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.log[aria-selected="true"],
.log[aria-pressed="true"],
.log[aria-expanded="true"] { background: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent); border-left-color: var(--md-sys-color-primary); }
.log[aria-selected="true"] .src-tag,
.log[aria-pressed="true"] .src-tag,
.log[aria-expanded="true"] .src-tag,
.log[aria-selected="true"] .lvl,
.log[aria-pressed="true"] .lvl,
.log[aria-expanded="true"] .lvl { background: var(--alb-color-card); }
.log--E,
.log--F { background: color-mix(in srgb, var(--md-sys-color-error) 7%, transparent); }
.log--W { background: color-mix(in srgb, var(--alb-color-warning) 6%, transparent); }
.log__t { color: var(--alb-color-text-muted); white-space: nowrap; }
.log__tag { color: var(--md-sys-color-on-surface-variant); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.log__msg { white-space: pre-wrap; overflow-wrap: anywhere; min-width: 0; }
.log__msg mark { background: var(--alb-color-warning-container); color: var(--alb-color-on-warning-container); border-radius: 2px; }

/* ---------- inline confirmation (destructive actions) ---------- */
.confirm {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 14px;
  padding: 14px 16px;
  border-radius: var(--md-sys-shape-corner-medium);
  background: var(--alb-color-warning-container);
  color: var(--alb-color-on-warning-container);
}
.confirm p { margin: 0; }
.confirm__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.confirm .btn--text { color: inherit; }
@container content (max-width: 640px) {
  .confirm { grid-template-columns: auto minmax(0, 1fr); }
  .confirm__actions { grid-column: 1 / -1; }
}

/* ---- pages.css ---- */
/* v3 page layouts. Shared pieces live in components.css. */

/* ================= data-source notes (design review aid) ================= */
.src-note { display: none; flex-wrap: wrap; gap: 4px; }
body.show-src .src-note { display: flex; }
.src-note code,
.src-note span {
  font-family: var(--md-ref-typeface-mono);
  font-size: 11px;
  line-height: 18px;
  padding: 0 6px;
  border-radius: var(--md-sys-shape-corner-extra-small);
  background: var(--alb-color-well);
  color: var(--md-sys-color-on-surface-variant);
}
.src-note .new { background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); font-family: inherit; }

/* ================= conversation (assistant sheet + chat page) ================= */
.sheet__head { display: flex; align-items: center; gap: 8px; padding: 12px 8px 8px 16px; color: var(--md-sys-color-on-surface); }
.sheet__head > svg { color: var(--md-sys-color-primary); }
.sheet__head h2 { font-size: 16px; line-height: 24px; font-weight: 500; }
.sheet__head .pill { margin-right: auto; }
/* A− / A+ (ChatFontButtons) */
.chat-font { display: inline-flex; align-items: center; gap: 2px; margin: 0; padding: 0; border: 0; min-inline-size: 0; }
.chat-font__btn { width: auto; min-width: 32px; padding: 0 6px; font-size: 12px; font-weight: 600; letter-spacing: -0.02em; }
.chat-font__btn--big { font-size: 15px; }
.chat-font__btn:disabled { opacity: 0.38; cursor: default; }
.sheet__src { margin: 4px 16px 0; align-self: flex-start; }
.sheet__agent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 12px 16px 0;
  padding: 10px 12px;
  border-radius: var(--md-sys-shape-corner-medium);
  background: var(--alb-color-well);
  font-size: 13px;
  cursor: pointer;
}
.sheet__agent b { display: block; font-weight: 500; }
.sheet__agent small { display: block; color: var(--alb-color-text-muted); font-size: 12px; line-height: var(--alb-lh-body-small); }
.sheet__body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; }
.sheet__input { border-top: 1px solid var(--alb-color-divider); padding: 12px 16px 14px; }

.convo { display: flex; flex-direction: column; gap: 12px; }
/* --alb-chat-font: the A− / A+ setting (stores/shell.ts chatFontPx) */
.msg { font-size: var(--alb-chat-font, 14px); line-height: 1.5; overflow-wrap: anywhere; min-width: 0; }
.msg p { margin: 0 0 8px; }
.msg p:last-child { margin-bottom: 0; }
.msg--user {
  align-self: flex-end;
  max-width: 88%;
  padding: 10px 14px;
  border-radius: 20px 20px 4px 20px;
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
}
.msg--ai { align-self: stretch; }
/* what the model said before calling a tool: part of its work, not the answer */
.msg--lead { color: var(--alb-color-text-muted); }
.msg__who { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; font-size: 12px; color: var(--alb-color-text-muted); }
.msg pre { margin: 8px 0; }
/* Markdown in chat text (components/v3/Markdown.tsx) */
.msg .md-h { margin: 12px 0 6px; font-size: 1.08em; font-weight: 600; line-height: 1.4; }
.msg .md-h:first-child { margin-top: 0; }
.msg h5.md-h { font-size: 1em; }
.msg .md-list { margin: 0 0 8px; padding-left: 22px; }
.msg .md-list:last-child { margin-bottom: 0; }
.msg .md-list .md-list { margin: 2px 0 0; }
.msg .md-list li + li { margin-top: 2px; }
.msg :not(pre) > code { font-family: var(--md-ref-typeface-mono); font-size: 0.92em; background: var(--alb-color-well); padding: 1px 5px; border-radius: 4px; }
.msg--user :not(pre) > code { background: transparent; border: 1px solid currentColor; }
.msg .md-quote { margin: 0 0 8px; padding: 2px 0 2px 12px; border-left: 3px solid var(--md-sys-color-outline-variant); color: var(--alb-color-text-muted); }
.msg .md-hr { border: 0; border-top: 1px solid var(--alb-color-divider); margin: 10px 0; }
.msg .md-table { max-width: 100%; overflow-x: auto; margin: 0 0 8px; }
.msg .md-table table { border-collapse: collapse; font-size: 0.93em; }
.msg .md-table th,
.msg .md-table td { border: 1px solid var(--md-sys-color-outline-variant); padding: 4px 8px; text-align: left; vertical-align: top; }
/* .msg breaks anywhere, which lets a table squeeze its columns until
   "transport" splits into "transp/ort". Inside a table, words stay whole;
   a table wider than the chat scrolls in its own box (.md-table). */
.msg .md-table th,
.msg .md-table td { overflow-wrap: normal; word-break: normal; }
.msg .md-table code { white-space: nowrap; }
.msg .md-table th { background: var(--alb-color-well); font-weight: 600; }
.ctx {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-small);
  background: transparent;
  color: var(--md-sys-color-on-surface-variant);
  font-size: 12px;
  white-space: nowrap;
}
.msg--user .ctx { border-color: currentColor; color: inherit; margin-bottom: 6px; }
.ctx--add { cursor: pointer; border-style: dashed; }
.tool {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 2px 8px;
  padding: 8px 12px;
  border-radius: var(--md-sys-shape-corner-medium);
  background: var(--alb-color-well);
  font-size: 12.5px;
}
.tool > svg { color: var(--alb-color-success); }
.tool code { font-family: var(--md-ref-typeface-mono); font-size: calc(var(--alb-chat-font, 14px) - 2px); font-weight: 500; overflow-wrap: anywhere; }
.tool small { grid-column: 2 / -1; font-family: var(--md-ref-typeface-mono); font-size: calc(var(--alb-chat-font, 14px) - 2.5px); color: var(--alb-color-text-muted); overflow-wrap: anywhere; }
.tool details { grid-column: 2 / -1; }
.tool summary { cursor: pointer; font-size: 12px; color: var(--md-sys-color-primary); }
.tool .term { margin-top: 6px; font-size: 12px; max-height: 160px; }
.cites { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; color: var(--alb-color-text-muted); }
.cite {
  font-family: var(--md-ref-typeface-mono);
  font-size: 11.5px;
  padding: 0 6px;
  border-radius: var(--md-sys-shape-corner-extra-small);
  background: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
  color: var(--md-sys-color-primary);
  text-decoration: none;
}
.confirm--inline { grid-template-columns: auto minmax(0, 1fr); font-size: 13px; }
.confirm--inline > code,
.confirm--inline > .confirm__actions { grid-column: 2; }
.composer { display: flex; flex-direction: column; gap: 8px; }
.composer .textarea { resize: none; border-radius: var(--md-sys-shape-corner-medium); }
.ondev { display: flex; flex-direction: column; gap: 12px; }
.ondev h3 { font-size: 16px; line-height: 24px; font-weight: 500; }
.ondev p { margin: 0; color: var(--md-sys-color-on-surface-variant); }

/* ================= overview ================= */
.state { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.state__big { font-size: 24px; line-height: 32px; font-weight: 400; }
.state__meta { flex-basis: 100%; color: var(--alb-color-text-muted); }
.modes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 12px; color: var(--alb-color-text-muted); }
.facts { padding-top: 16px; border-top: 1px solid var(--alb-color-divider); }

.boot { display: flex; flex-direction: column; gap: 6px; }
.boot__row { display: grid; grid-template-columns: 64px minmax(0, 1fr) 56px; align-items: center; gap: 10px; font-size: 12px; color: var(--alb-color-text-muted); }
.boot__row .num { text-align: right; color: var(--md-sys-color-on-surface); }
.boot__track { position: relative; height: 28px; border-radius: var(--md-sys-shape-corner-small); background: var(--alb-color-well); }
.boot__track--prev { height: 10px; }
.seg-bar {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 6px;
  border: 2px solid var(--alb-color-card);
  background: var(--src);
}
.seg-bar span {
  position: absolute;
  inset: 0 6px;
  display: flex;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--alb-color-card);
}
.boot__track--prev .seg-bar { opacity: .45; border-width: 1px; }
.axis { position: relative; height: 16px; margin: 0 66px 0 74px; font-family: var(--md-ref-typeface-mono); font-size: 11px; color: var(--alb-color-text-muted); }
.axis span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.axis span:first-child { transform: none; }
.axis span:last-child { transform: translateX(-100%); }
.delta-up { color: var(--md-sys-color-error); }
.delta-flat { color: var(--alb-color-text-muted); }

.issues { display: flex; flex-direction: column; gap: 8px; }
.issue {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 4px 12px;
  padding: 12px;
  border-radius: var(--md-sys-shape-corner-medium);
  background: var(--alb-color-well);
}
.issue__ic { grid-row: span 3; width: 36px; height: 36px; border-radius: var(--md-sys-shape-corner-small); display: grid; place-items: center; }
.issue--bad .issue__ic { background: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); }
.issue--warn .issue__ic { background: var(--alb-color-warning-container); color: var(--alb-color-on-warning-container); }
.issue__title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-weight: 500; }
.issue__body { font-family: var(--md-ref-typeface-mono); font-size: 12px; line-height: 18px; color: var(--md-sys-color-on-surface-variant); overflow-wrap: anywhere; }
.issue__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 12px; color: var(--alb-color-text-muted); }
.issue__meta .row { margin-left: auto; gap: 0; }

.quick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.qa {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 0 12px;
  padding: 10px 12px;
  border: 0;
  border-radius: var(--md-sys-shape-corner-large);
  background: var(--alb-color-well);
  color: var(--md-sys-color-on-surface);
  text-align: left;
  text-decoration: none;
}
.qa:hover { background: var(--md-sys-color-surface-container-high); }
.qa__ic { grid-row: span 2; width: 40px; height: 40px; border-radius: var(--md-sys-shape-corner-medium); display: grid; place-items: center; background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }
.qa b { font-weight: 500; }
.qa small { font-size: 12px; line-height: 16px; color: var(--alb-color-text-muted); }
@container content (max-width: 520px) { .quick { grid-template-columns: minmax(0, 1fr); } }

/* every device on the bench, one tonal tile each; the selected one takes the secondary container */
.devs { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 8px; }
.dev {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 10px 12px 12px;
  border: 0;
  border-radius: var(--md-sys-shape-corner-medium);
  background: var(--alb-color-well);
  color: var(--md-sys-color-on-surface);
  text-align: left;
  font: inherit;
}
button.dev:hover { background: var(--md-sys-color-surface-container-high); }
button.dev[aria-pressed="true"] { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.dev--gone { background: var(--alb-color-warning-container); color: var(--alb-color-on-warning-container); }
.dev__head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.dev__head b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dev__head .pill { margin-left: auto; }
.dev__sub { font-size: 12px; line-height: 16px; color: var(--alb-color-text-muted); overflow-wrap: anywhere; }
.dev[aria-pressed="true"] .dev__sub,
.dev--gone .dev__sub { color: inherit; }
.dev__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; margin-top: 4px; font-size: 12.5px; }
.dev__facts > span { display: flex; flex-direction: column; min-width: 0; }
.dev__facts small { font-size: 11px; line-height: 14px; color: var(--alb-color-text-muted); }
.dev[aria-pressed="true"] .dev__facts small { color: inherit; opacity: .8; }
/* phones: one row that scrolls sideways, so the strip does not push the board state down */
@container content (max-width: 560px) {
  .devs { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(220px, 78%); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; }
  .dev { scroll-snap-align: start; }
}

/* service counts: the performance tiles, four across */
.metrics--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@container content (max-width: 640px) { .metrics--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* live agent session */
.live__idle { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--alb-color-text-muted); }
.live__head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 13px; color: var(--md-sys-color-on-surface-variant); }
.live__head b { color: var(--md-sys-color-on-surface); font-weight: 500; }
.live__prompt { margin: 0; font-size: 15px; line-height: 22px; overflow-wrap: anywhere; }
.live__tools { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.live__tool {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: var(--md-sys-shape-corner-small);
  background: var(--alb-color-well);
  font-size: 12.5px;
}
.live__tool code { font-family: var(--md-ref-typeface-mono); font-size: 12px; overflow-wrap: anywhere; }
.live__tool--done > svg { color: var(--alb-color-success); }
.live__tool--err > svg { color: var(--md-sys-color-error); }
.live__tool--running code { font-weight: 500; }
.live__tps { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; }
.live__meta { font-size: 12px; line-height: 16px; color: var(--alb-color-text-muted); text-align: right; }
@container content (max-width: 520px) {
  .live__tps { grid-template-columns: minmax(0, 1fr) auto; }
  .live__tps .spark { grid-column: 1 / -1; grid-row: 2; }
}

/* ================= timeline ================= */
.tl-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.tl-bar .select { width: auto; min-width: 0; max-width: 100%; }
.tl-bar .input--search { flex: 1 1 220px; }
.tracks { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.track {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  align-items: stretch;
  min-height: 44px;
  border-top: 1px solid var(--alb-color-divider);
}
.track__label { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 6px 12px 6px 0; font-size: 12px; color: var(--alb-color-text-muted); }
.track__label .src-tag { align-self: flex-start; }
.track__lane { position: relative; min-width: 0; }
.track__lane svg { position: absolute; inset: 4px 0; width: 100%; height: calc(100% - 8px); display: block; }
.track--overview { min-height: 36px; border-top: 0; }
.track--axis { min-height: 22px; border-top: 0; }
.tl-axis { position: relative; font-family: var(--md-ref-typeface-mono); font-size: 11px; color: var(--alb-color-text-muted); }
.tl-axis span { position: absolute; top: 4px; transform: translateX(-50%); white-space: nowrap; }
.tl-brush {
  position: absolute;
  top: 2px;
  bottom: 2px;
  border-radius: var(--md-sys-shape-corner-extra-small);
  border: 2px solid var(--md-sys-color-primary);
  background: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
}
.tl-cursor { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--md-sys-color-primary); pointer-events: none; z-index: 2; }
.tl-cursor span {
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  padding: 0 6px;
  border-radius: var(--md-sys-shape-corner-extra-small);
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  font-family: var(--md-ref-typeface-mono);
  font-size: 11px;
  line-height: 18px;
  white-space: nowrap;
}
.tracks__body { position: relative; }
.marker {
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  transform: rotate(45deg);
  border-radius: 3px;
  border: 2px solid var(--alb-color-card);
  background: var(--mk, var(--md-sys-color-primary));
  cursor: pointer;
}
.marker--panic,
.marker--crash { --mk: var(--md-sys-color-error); }
.marker--anr,
.marker--avc { --mk: var(--alb-color-warning); }
.marker--boot { --mk: var(--alb-color-success); }
.marker--job { --mk: var(--alb-color-src-job); }
.tl-split .logs { max-height: 460px; }
.detail-kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; margin: 0; font-size: 13px; }
.detail-kv dt { color: var(--alb-color-text-muted); }
.detail-kv dd { margin: 0; overflow-wrap: anywhere; }
@container content (max-width: 640px) {
  .track { grid-template-columns: 84px minmax(0, 1fr); }
  .track__label small { display: none; }
}

/* ================= logs ================= */
.log-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.log-tools .input--search { flex: 1 1 240px; }
.histo { display: block; width: 100%; height: 56px; }
.log-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 16px;
  padding: 8px 16px;
  border-top: 1px solid var(--alb-color-divider);
  font-size: 12px;
  color: var(--alb-color-text-muted);
}
.log-pane { height: 520px; padding: 6px 0; }
.log-detail {
  margin: 2px 12px 8px 115px;
  padding: 10px 12px;
  border-radius: var(--md-sys-shape-corner-small);
  background: var(--alb-color-well);
  font-size: 12px;
  white-space: pre-wrap;
}
.log-detail .row { margin-top: 8px; font-family: var(--md-ref-typeface-plain); }
@container content (max-width: 760px) {
  .logs { --log-cols: 76px 20px minmax(0, 1fr); }
  .log__pid,
  .log__tag { display: none; }
  .log-detail { margin-left: 12px; }
}

/* ================= flash ================= */
.ident { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
.ident__board { display: flex; align-items: center; gap: 12px; }
.ident__board .qa__ic { width: 48px; height: 48px; }
.ident__board b { display: block; font-size: 22px; line-height: 28px; font-weight: 400; }
.ident .kv { flex: 1; min-width: 260px; }
.manifests .list__item { padding: 12px 4px; }
.manifests input { margin-right: 4px; }
.plan-sum { display: flex; flex-wrap: wrap; gap: 8px; }
.plan .table td:first-child,
.plan .table th:first-child { width: 36px; }
.plan tr.is-skip td { color: var(--alb-color-text-muted); }
.plan tr.is-skip td:nth-child(n+3) { text-decoration: line-through; text-decoration-color: var(--md-sys-color-outline-variant); }
.plan tr.is-problem td { background: color-mix(in srgb, var(--md-sys-color-error) 8%, transparent); }
.run-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; align-items: center; }
.run-head .progress { grid-column: 1 / -1; height: 6px; }
.rowstate { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.rowstate--ok { color: var(--alb-color-success); }
.rowstate--run { color: var(--md-sys-color-primary); }
.rowstate--fail { color: var(--md-sys-color-error); }
.rowstate--wait { color: var(--alb-color-text-muted); }
.dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 20px;
  border: 1.5px dashed var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-medium);
  color: var(--md-sys-color-on-surface-variant);
  text-align: center;
}
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
@container content (max-width: 640px) { .form-grid { grid-template-columns: minmax(0, 1fr); } }

/* ================= bench ================= */
.usb { display: flex; flex-direction: column; gap: 8px; }
.usb__row {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 12px;
  padding: 10px 12px;
  border-radius: var(--md-sys-shape-corner-medium);
  background: var(--alb-color-well);
}
.usb__mode { font-weight: 500; }
.usb__id { font-family: var(--md-ref-typeface-mono); font-size: 12px; color: var(--md-sys-color-on-surface-variant); overflow-wrap: anywhere; }
.usb__hint { grid-column: 1 / -1; font-size: 12.5px; }
.usb__row--bad { background: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); }
.usb__row--bad .usb__id { color: inherit; }
@container content (max-width: 560px) {
  .usb__row { grid-template-columns: minmax(0, 1fr) auto; }
  .usb__id { grid-column: 1 / -1; }
}

/* ================= console ================= */
.console { display: flex; flex-direction: column; min-height: 560px; }
.console .tabs { padding: 0 8px; }
.console__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 10px 16px; font-size: 12.5px; color: var(--md-sys-color-on-surface-variant); }
.console__bar .row { margin-left: auto; gap: 0; }
.console .term { flex: 1; margin: 0 12px 12px; min-height: 440px; }
.snips .list__item { padding: 10px 0; }
.snips code { font-size: 12px; overflow-wrap: anywhere; }

/* ================= chat page ================= */
.chat {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr) 300px;
  gap: var(--alb-gap);
  align-items: start;
}
.chat__list .list__item { padding: 10px 12px; border-top: 0; border-radius: var(--md-sys-shape-corner-medium); }
.chat__list .list__item[aria-current="true"] { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.chat__list .list__item[aria-current="true"] .list__meta { color: inherit; }
.chat__day { padding: 12px 12px 4px; font-size: 12px; font-weight: 500; color: var(--alb-color-text-muted); }
/* the thread scrolls inside itself; the composer stays under it */
.chat__thread { height: calc(100vh - var(--alb-topbar-h) - 150px); min-height: 520px; }
.chat__thread .convo { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 4px 12px; }
.chat__composer { padding: 12px; border-radius: var(--md-sys-shape-corner-large); background: var(--alb-color-well); }
.tools-list .list__item { padding: 8px 0; }
.compare { font-size: 12.5px; }
@container content (max-width: 1120px) {
  .chat { grid-template-columns: 220px minmax(0, 1fr); }
  .chat__side { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}
@container content (max-width: 760px) {
  .chat { grid-template-columns: minmax(0, 1fr); }
  .chat__thread { height: auto; min-height: 0; }
}