/* VLC product skin — Founder ruling 2026-08-20 (follow-up to the GitHub-dark
   token pass in components.css).

   The ruling, from the VLCode screenshot the founder attached: "包括左边的文件树，
   包括中间的 DAG 视图，都使用 VLC 的风格 … 这个 VLC 的风格更开阔一些，而且设计
   也很精致。聊天窗口也使用类似风格。"

   components.css already re-pointed the --mx-* palette at VLCode's GitHub-dark
   family, so the COLOURS were right and the SHAPE was not: Matrix still painted
   a boxed web app (64px topbar, 1780px content column, 12px-radius cards with
   drop shadows floating in 20px gutters) where VLCode paints an IDE (a 32px
   chrome bar, flush full-bleed panes separated by 1px rules, 4-6px radii, 9-11px
   chrome type). That difference is exactly the "开阔" the founder is asking for —
   the pixels VLC spends on canvas, Matrix was spending on padding.

   This file is the shape layer. It is loaded after views.css so it wins on
   cascade order at equal specificity, and it only ever changes geometry, weight
   and surface treatment — no selector in here invents markup, and every hook an
   automation or test depends on keeps its element and class. Reference values
   are read from VLCode-2.0 public/index.html (:root, header, .file-tree) and
   public/workflow-editor.html (.toolbar, .tb-btn, .node) so the two products
   quote one design system rather than two lookalikes.

   Everything is scoped under .mx-next (redesigned views) or a product-specific
   class. The legacy light-theme surfaces are deliberately untouched. */

/* --- 0. Chrome height ------------------------------------------------------
   VLCode's app header is 32px. Matrix's carries a brand block, a nav, a locale
   switch and an account chip, so it lands at 44 — still 20px of canvas handed
   back on every page. Declared on :root, not .mx-next: the Assistant dock and
   the SPA height math live outside the redesigned subtree and must resolve the
   same number, or the dock overlaps the topbar it is supposed to sit under. */
:root { --mx-topbar-h: 44px; }

/* --- 1. Topbar -------------------------------------------------------------
   VLC header: a flat two-stop gradient, a 1px rule, no blur. The 20px blur +
   saturate Matrix used reads as glass, which is the visual language this pass
   is replacing. */
.mx-next .mx-topbar {
  height: var(--mx-topbar-h);
  gap: 14px;
  padding: 0 12px;
  background: linear-gradient(180deg, #151b23 0%, #111720 100%);
  border-bottom: 1px solid var(--mx-line);
  backdrop-filter: none;
}
.mx-next .mx-brand { min-width: 0; gap: 8px; font-size: 12.5px; font-weight: 700; }
.mx-next .mx-brand__mark { width: 22px; height: 22px; border-radius: 6px; font-size: 11px; box-shadow: none; }
.mx-next .mx-brand small { font-size: 8px; letter-spacing: .1em; }
.mx-next .mx-nav { gap: 2px; }
.mx-next .mx-nav a,
.mx-next .mx-nav button { min-width: 62px; padding: 0 12px; font-size: 12px; font-weight: 600; }
.mx-next .mx-version { padding: 1px 6px; border-radius: 5px; font-size: 9px; }
.mx-next .mx-context { font-size: 10.5px; }
.mx-next .mx-icon-btn { width: 26px; height: 26px; border-radius: 6px; }
.mx-next .mx-icon-btn b { min-width: 14px; height: 14px; border-radius: 7px; font-size: 8px; line-height: 14px; }
.mx-next .mx-account-btn { height: 30px; border-radius: 6px; padding: 2px 8px 2px 3px; gap: 6px; }
.mx-next .mx-avatar { width: 22px; height: 22px; border-radius: 5px; font-size: 10px; }
.mx-next .mx-account-btn strong { font-size: 10.5px; }
.mx-next .mx-account-btn small { font-size: 8.5px; }
.mx-next .mx-locale-switch { border-radius: 6px; }
.mx-next .mx-locale-switch button { height: 20px; min-width: 24px; border-radius: 4px; font-size: 8.5px; }

/* --- 2. Controls -----------------------------------------------------------
   VLC's .hdr-btn / .tb-btn: raised surface, 1px line, 6px radius, 10px type,
   and no motion on hover. The translateY lift Matrix used made every toolbar
   twitch; VLC changes colour only, which is what reads as 精致 at this density. */
.mx-next .mx-btn {
  border-radius: 6px;
  padding: 5px 11px;
  font-size: 11px;
  font-weight: 600;
  transition: background .14s, border-color .14s, color .14s;
}
.mx-next .mx-btn:hover { transform: none; border-color: var(--mx-iris); }
.mx-next .mx-btn--small { padding: 3px 9px; font-size: 10px; }
.mx-next .mx-btn--primary { background: var(--mx-iris); border-color: var(--mx-iris); }
.mx-next .mx-btn--primary:hover { background: #4595f0; border-color: #4595f0; }
.mx-next .mx-tag { border-radius: 6px; padding: 1px 6px; font-size: 9.5px; }
.mx-next .mx-tab { border-radius: 6px; padding: 4px 10px; font-size: 10.5px; }
.mx-next .mx-segment { border-radius: 6px; padding: 2px; }
.mx-next .mx-segment button { border-radius: 4px; padding: 4px 9px; font-size: 10.5px; }
.mx-next .mx-input,
.mx-next .mx-select,
.mx-next .mx-textarea { border-radius: 6px; }

/* --- 3. Surfaces -----------------------------------------------------------
   Flat panels, 8px corners, hairline rules, no drop shadow: VLC separates panes
   with 1px lines, not with elevation. */
.mx-next .mx-panel {
  background: var(--mx-panel);
  border-radius: 8px;
  box-shadow: none;
}
.mx-next .mx-panel__head { padding: 10px 12px; }
.mx-next .mx-panel__head h2 { font-size: 12px; }
.mx-next .mx-panel__body { padding: 12px; }
.mx-next .mx-card { border-radius: 6px; padding: 10px; }
.mx-next .mx-stat { border-radius: 6px; padding: 10px 12px; }
.mx-next .mx-stat strong { font-size: 20px; }
.mx-next .mx-page { padding: 18px 16px 56px; }
.mx-next .mx-page-head h1 { font-size: 22px; }

/* --- 4. Task workbench: full-bleed IDE frame -------------------------------
   The Task SPA is the surface the founder pointed at. VLCode gives the whole
   viewport to sidebar | canvas | assistant with 1px rules between them, so the
   page column, the gutters and the panel radii all go.

   Three boxes have to agree for that to actually reach the edges:
     .page      — fixed, offset by the legacy --bar-h (60px) and inset 28px
     .page.mx-next — min-height:100%, i.e. a full viewport BELOW that offset
     .mx-page   — the view's own padding
   Left alone they stack to a 28px gutter and a 104px vertical overflow under a
   44px chrome bar. Each override below is at or above the specificity of the
   rule it replaces (tokens.css / matrix-light-glass.css / §3 here), because at
   equal specificity only cascade order would decide and matrix-light-glass is
   loaded first but tokens/components are not. */
html.mx-next-active .page,
body.mx-next-active .page { top: var(--mx-topbar-h); }
.page.mx-next:has(> .task-page--spa) { min-height: 0; padding-left: 0; padding-bottom: 0; }
.mx-next .mx-page.task-page--spa {
  height: calc(100vh - var(--mx-topbar-h));
  max-width: none;
  padding: 0;
}
.task-layout--spa {
  gap: 0;
  grid-template-columns: minmax(244px, 292px) minmax(0, 1fr);
}

/* Device strip → a 34px VLC toolbar row instead of a 20px page title block. */
.task-page--spa .task-device-bar {
  min-height: 34px;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0 10px;
  border-bottom: 1px solid var(--mx-line);
  background: var(--mx-panel);
}
.task-page--spa .task-page__title { display: flex; align-items: baseline; gap: 7px; }
.task-page--spa .task-page__title > span { font-size: 8px; letter-spacing: .16em; }
.task-page--spa .task-page__title h1 { font-size: 12px; font-weight: 650; letter-spacing: 0; }
.task-page--spa .task-device-tabs [role="tab"] {
  min-height: 22px;
  padding: 2px 9px 2px 7px;
  border-radius: 6px;
  gap: 6px;
}
.task-page--spa .task-device-tab__name { font-size: 10.5px; font-weight: 620; }
.task-page--spa .task-device-tab__state { font-size: 9px; }
.task-page--spa .task-device-bar__note { font-size: 9px; }
.task-page--spa .task-partial { margin: 0; padding: 4px 10px; font-size: 9.5px; }

/* --- 5. Left pane: VLCode's file tree --------------------------------------
   VLC .sidebar: bg2 surface, a right rule, no radius, no shadow. Its header is
   an uppercase 11px/1px-tracked label, its rows are 2px tall with 4px corners,
   its folder labels are accent-coloured, and the one open file is a solid
   accent bar with white ink. Matrix's Workspace → Task Line → Task tree maps
   onto that vocabulary exactly: Workspace and Task Line are folders, the
   selected Task is the open file. */
.task-page--spa .task-workspace-panel {
  border: 0;
  border-right: 1px solid var(--mx-line);
  border-radius: 0;
  background: var(--mx-panel);
  box-shadow: none;
}
.task-page--spa .task-workspace-panel > header {
  min-height: 30px;
  align-items: center;
  gap: 6px;
  padding: 0 6px 0 10px;
}
.task-page--spa .task-workspace-panel h2 {
  font-size: 10px;
  font-weight: 600;
  color: var(--mx-dim);
  letter-spacing: 1px;
  text-transform: uppercase;
}
.task-page--spa .task-workspace-panel > header .mx-btn { padding: 2px 8px; font-size: 9.5px; font-weight: 600; }
.task-page--spa .task-workspace-list { gap: 0; padding: 4px; }

/* Workspace row = folder label. */
.task-page--spa .task-workspace {
  gap: 6px;
  padding: 3px 6px;
  border: 0;
  border-radius: 4px;
}
.task-page--spa .task-workspace:hover { background: var(--mx-panel-2); }
.task-page--spa .task-workspace.is-selected { background: rgba(88, 166, 255, .1); }
.task-page--spa .task-workspace.is-selected .task-workspace__body strong { color: var(--mx-iris); }
.task-page--spa .task-workspace__icon { width: 18px; height: 18px; border-radius: 4px; background: transparent; }
.task-page--spa .task-workspace__icon svg { width: 12px; height: 12px; }
.task-page--spa .task-workspace__body strong { font-size: 11px; font-weight: 600; }
.task-page--spa .task-workspace__body small { font-size: 8.5px; }
.task-page--spa .task-workspace-other > summary { padding: 3px 6px; font-size: 9.5px; }

/* Task Line = the second folder level. VLC draws children under a hairline
   rail; the label itself is accent, not ink. */
.task-page--spa .task-tree__lines {
  gap: 0;
  margin: 1px 0 4px 15px;
  padding-left: 8px;
  border-left: 1px solid rgba(255, 255, 255, .06);
}
.task-page--spa .t2-linehead { padding: 3px 6px 3px 2px; border-radius: 4px; }
.task-page--spa .t2-linehead b { font-size: 10px; font-weight: 600; color: var(--mx-iris); }
.task-page--spa .t2-linehead:hover { background: var(--mx-panel-2); }
.task-page--spa .t2-linehead:hover b { color: var(--mx-iris-soft); }
.task-page--spa .t2-linehead small { font-size: 8.5px; }

/* Task row = the file. Hover tints, selection is the solid accent bar. */
.task-page--spa .t2-taskwrap { gap: 2px; border-radius: 4px; }
.task-page--spa .t2-taskwrap:hover { background: var(--mx-panel-2); }
.task-page--spa .t2-task { padding: 2px 4px 2px 6px; font-size: 11px; gap: 6px; border-radius: 4px; }
.task-page--spa .t2-taskwrap.is-selected {
  border-color: transparent;
  background: var(--mx-iris);
}
.task-page--spa .t2-taskwrap.is-selected .t2-task,
.task-page--spa .t2-taskwrap.is-selected .t2-task span.title { color: #fff; }
/* On the solid bar the row buttons and the type glyph need the white treatment
   VLC gives its active-row controls, or they disappear into the accent. */
.task-page--spa .t2-taskwrap.is-selected .t2-cfg {
  border-color: rgba(255, 255, 255, .38);
  background: rgba(255, 255, 255, .14);
  color: #fff;
}
.task-page--spa .t2-taskwrap.is-selected .t2-cfg--danger { border-color: rgba(255, 255, 255, .38); color: #ffd7d5; }
.task-page--spa .t2-taskwrap.is-selected .task-ticon {
  border-color: rgba(255, 255, 255, .45);
  background: rgba(255, 255, 255, .16);
  color: #fff;
}
.task-page--spa .t2-taskwrap.is-selected .t2-status { background: #fff; }
.task-page--spa .t2-cfg,
.task-page--spa .t2-plus { width: 16px; height: 16px; border-radius: 4px; }
.task-page--spa .task-ticon { width: 14px; height: 14px; border-radius: 4px; }
.task-page--spa .task-ticon svg { width: 10px; height: 10px; }
.task-page--spa .task-tree__addline,
.task-page--spa .task-tree__lines .task-line__add {
  margin: 2px 0 0;
  padding: 3px 6px;
  border-radius: 4px;
  font-size: 9.5px;
}
/* VLC closes its tree with a dim one-line count, not a legend block. */
.task-page--spa .task-tree__legend { gap: 9px; padding: 5px 10px; font-size: 8.5px; }

/* --- 6. Centre pane: VLCode's editor frame ---------------------------------
   The detail pane is the canvas host, so it loses its card entirely: no border,
   no radius, no shadow, and a 34px toolbar header instead of a 12px-padded
   title block. The breadcrumb sits inline with the title the way VLC's DAG
   toolbar prints "MetaSharded-CodeGen  MetaSharded-CodeGen". */
.task-page--spa .task-detail {
  border: 0;
  border-radius: 0;
  background: var(--mx-bg);
  box-shadow: none;
}
.task-page--spa .task-detail__head {
  flex-wrap: nowrap;
  min-height: 34px;
  gap: 8px;
  padding: 4px 10px;
  background: var(--mx-panel);
}
.task-page--spa .task-detail__title { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.task-page--spa .task-detail__title h2 { flex: none; max-width: 44%; font-size: 11.5px; font-weight: 650; }
.task-page--spa .task-detail__title small { margin-top: 0; min-width: 0; font-size: 9px; }
.task-page--spa .task-detail__meta { padding: 5px 10px 6px; border-bottom: 1px solid var(--mx-line); }
.task-page--spa .task-chip { padding: 1px 6px; border-radius: 5px; font-size: 8.5px; }
.task-page--spa .task-detail__body { padding: 0; }
/* The runtime block is the canvas: it must reach the pane's own edges. */
.task-page--spa .task-detail__runtime { border: 0; border-radius: 0; }
.task-page--spa .task-detail__runtime-bar {
  min-height: 30px;
  padding: 0 10px;
  background: var(--mx-panel);
  font-size: 9.5px;
}
.task-page--spa .task-detail__runtime-foot { padding: 6px 10px; }
/* The goal reads as a VLC runbar — a labelled strip flush with the toolbar
   stack above it — rather than a rounded card floating in a 10px inset. */
.task-page--spa .task-detail__goal {
  margin: 0;
  padding: 6px 10px;
  border: 0;
  border-bottom: 1px solid var(--mx-line);
  border-radius: 0;
  background: rgba(88, 166, 255, .06);
}
.task-page--spa .task-detail__goal b { font-size: 9px; }
.task-page--spa .task-detail__goal span { font-size: 11px; }
/* Typed boards keep the padding the canvas gives up — they are content, not a
   viewport, and they were only ever inset by the removed .task-detail__body. */
.task-page--spa .task-detail__board,
.task-page--spa .task-detail__team,
.task-page--spa .task-detail__single { padding-inline: 10px; }
.task-page--spa .task-detail__empty { padding: 20px; }

/* --- 7. Workflow gallery ---------------------------------------------------
   Same grid, VLC card weights: 6px corners, hairline border, tighter type. */
.wf-gallery { padding: 14px 12px; }
.wf-gallery h3 { font-size: 13.5px; }
.wf-gallery__hint { margin-bottom: 11px; font-size: 10.5px; }
.wf-gallery__grid { gap: 8px; }
.wf-card { gap: 3px; padding: 10px 11px; border-radius: 6px; align-self: start; }
.wf-card b { font-size: 11.5px; }
/* A library .vflow description can run to a full screen of prose, and an auto
   grid row is as tall as its tallest cell — one Agent App was stretching every
   card in its row to ~550px. VLC clamps its workflow cards to a summary; the
   full text is the Task's, not the picker's. align-self:start above stops the
   short cards from stretching to the clamped height either. */
.wf-card small {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
  font-size: 9.5px;
}
.wf-card__badge { border-radius: 4px; padding: 2px 5px; }
.wf-scenario-tab { border-radius: 6px; padding: 4px 10px; font-size: 10px; }
.wf-gallery__scenario { margin: 13px 0 6px; font-size: 11px; }

/* --- 7b. Runtime drawer ----------------------------------------------------
   The full-width Runtime drawer hosts the same VLCode editor iframe, but its
   own chrome was authored against a bluer palette (#101620 head, #2b374a
   rules, 58px header, 8.5px mono buttons) than the editor it frames. Re-point
   those literals at the VLC family and give it VLC's 40px toolbar so the frame
   and the canvas stop disagreeing at the seam. The colours here are literals
   for the same reason the block in views.css uses them: this drawer renders
   outside .mx-next, where the --mx-* tokens do not resolve. */
.task-runtime { border-left-color: #30363d; }
.runtime-head {
  min-height: 40px;
  padding: 5px 10px;
  border-bottom-color: #30363d;
  background: #161b22;
}
.runtime-head__title strong { font-size: 11.5px; }
.runtime-head__title small { margin-top: 1px; font-size: 9px; }
.runtime-btn {
  height: 24px;
  padding: 0 9px;
  border-color: #30363d;
  background: #21262d;
  color: #8b949e;
  font: 600 10px -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}
.runtime-btn--primary { border-color: #58a6ff; background: #1f6feb; }
.runtime-status { padding: 4px 8px; border-color: #30363d; border-radius: 6px; }
.runtime-authority,
.runtime-no-actions { border-color: #30363d; }
.runtime-inspector.open { border-left-color: #30363d; }
.runtime-inspector,
.runtime-inspector__card { background: #161b22; }
.runtime-inspector__head,
.runtime-inspector__card { border-color: #30363d; }
.runtime-unavailable__card { border-color: #30363d; border-radius: 8px; background: #161b22; }

/* --- 8. The other pages ----------------------------------------------------
   Pool's four columns and every Settings card are .mx-panel, and their controls
   are .mx-btn / .mx-tag / .mx-tabs / .mx-input, so §2 and §3 already carry them
   into the VLC family. Only the surfaces that carry their own radius token need
   naming here — the LocalBrain bar and its drop zone, the pool wells, and the
   Settings action rows. */
.mx-next .pool-brainbar { border-radius: 8px; }
.mx-next .pool-brainbar__mark { width: 28px; height: 28px; border-radius: 6px; }
.mx-next .pool-brainbar__mark svg { width: 16px; height: 16px; }
.mx-next .pool-local-brain__drop,
.mx-next .pool-well { border-radius: 6px; }
.mx-next .pool-pool__head { padding: 10px 12px 5px; }
.mx-next .pool-pool__head h2 { font-size: 13px; }
.mx-next .pool-pool__body { padding: 2px 10px 10px; }
.mx-next .set-row { padding: 8px 0; }

/* Below the single-screen threshold views.css restores document scrolling; the
   height math has to follow the new chrome or the fallback clips. The dock
   gutter itself lives in assistant-side-dock.css, which loads after this file
   and owns that reservation. */
@media (max-width: 1120px) {
  .mx-next .mx-page.task-page--spa { height: auto; }
  .page.mx-next:has(> .task-page--spa) { min-height: 100%; padding-bottom: 44px; }
}

/* --- 9. 0.103.0: inline runtime toolbar + VLC tree glyphs ------------------
   The runtime chrome now sits inside .mx-next (it used to be a drawer outside
   it), so its toolbar takes the editor-frame numbers directly. Tree type marks
   become VLC's flat coloured glyphs (.file-icon: no box, no border). */
.task-page--spa .task-runtime--inline .runtime-head { background: var(--mx-panel); border-bottom-color: var(--mx-line); }
.task-page--spa .task-runtime--inline .runtime-btn { height: 22px; }
.task-page--spa .task-detail__goal { display: flex; align-items: center; gap: 8px; min-height: 30px; flex-wrap: nowrap; overflow: hidden; }
.task-page--spa .task-detail__goal > span:first-of-type { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-page--spa .task-detail__goal code { font-size: 9px; padding: 0 4px; border-radius: 4px; background: var(--mx-panel-2, #21262d); }
.task-page--spa .task-ticon,
.task-page--spa .task-ticon--big { border: 0; background: transparent; border-radius: 0; }
.task-page--spa .task-ticon--single { color: #7ee787; }
.task-page--spa .task-ticon--team { color: #d29922; }
.task-page--spa .task-ticon--dag { color: #a371f7; }
.task-page--spa .t2-taskwrap.is-selected .task-ticon { color: #fff; border: 0; background: transparent; }
.task-page--spa .t2-task .title { font-size: 11px; }
.task-page--spa .t2-cfg { opacity: 0; transition: opacity .12s; }
.task-page--spa .t2-taskwrap:hover .t2-cfg,
.task-page--spa .t2-taskwrap.is-selected .t2-cfg,
.task-page--spa .t2-cfg:focus-visible { opacity: 1; }