/* faezor PCB - design system and pages. Dark-first "instrument" look: graphite surfaces, copper for actions,
   solder-mask green for verified states, hairlines, mono type for technical data. Light theme via the OS or the
   toggle (html[data-theme]). No inline styles anywhere (strict CSP). */

@font-face {
  font-family: "Inter";
  src: url("/static/fonts/inter-latin-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  src: url("/static/fonts/inter-latin-ext-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/static/fonts/jetbrains-mono-latin-wght.woff2") format("woff2");
  font-weight: 100 800;
  font-display: swap;
}

/* ---------- tokens */

:root {
  color-scheme: dark;
  --bg-base: #0a0d12;
  --bg-1: #0f131a;
  --bg-2-base: #141922;
  --bg-3-base: #1a202b;
  --line: #222a36;
  --line-2: #2e3847;
  --text: #e8edf4;
  --text-2: #a5b0be;
  --text-3-base: #6f7b8c;
  --copper: #e8894a;
  --copper-2: #f4a468;
  --copper-ink: #1b0f06;
  --copper-soft: rgb(232 137 74 / 0.12);
  --copper-line: rgb(232 137 74 / 0.35);
  /* the products (views/hexrail.ts): their hexagons' fills (--c-*-hex, the same in both themes), and their accent
     for buttons and focus in each theme. CAD is a cerulean (hue ~200) on purpose: the logo's blues are navy and
     periwinkle (#32639e .. #b8ccf7, hue ~215), so CAD never reads as the brand. Simulation is a signal orange, more
     saturated and redder than the brand's copper. */
  --c-pcb: #4fb06a;
  --c-pcb-2: #66c47f;
  --c-pcb-ink: #04140b;
  --c-cad: #3cb8e6;
  --c-cad-2: #62c8ee;
  --c-cad-ink: #04131c;
  --c-fw: #b08cff;
  --c-fw-2: #c3a6ff;
  --c-fw-ink: #170a33;
  --c-sim: #ff7a2b;
  --c-sim-2: #ff9452;
  --c-sim-ink: #1f0b00;
  /* faezorhub: fuchsia (OKLCH hue ~340) - the widest gap on the hue wheel: PCB green 154, CAD cerulean 230, Firmware violet
     295, Simulation orange 40, the brand's copper 50, the logo's blues 255-265, a failure's red 25 (and the amber
     of waiting 77, the laser's green 153) */
  --c-hub: #f06ad0;
  --c-hub-2: #f58bdc;
  --c-hub-ink: #1d0617;
  --c-pcb-hex: #1b6a3f;
  --c-cad-hex: #0b6d97;
  --c-fw-hex: #6a3bc9;
  --c-sim-hex: #c4470d;
  --c-hub-hex: #a82086;
  /* the product wordmarks (views/wordmark.ts): "faezor" in the logo's pale blue-grey (v14's #b8ccf7), the suffix in the
     product's colour above; the light themes darken the same hue so the word keeps 5:1 on the page */
  --wm-faezor: #b8ccf7;
  /* a working product's laser, a product waiting for the user, a failed run */
  --laser: #46ff95;
  --wait: #ffb83d;
  --fail: #ff5c5c;
  /* how far the page background leans towards the open product (light: less) */
  --tint: 9%;
  --mask: #35c48d;
  --mask-soft: rgb(53 196 141 / 0.12);
  --warn: #e7b94a;
  --warn-soft: rgb(231 185 74 / 0.13);
  --err: #f06d6d;
  --err-soft: rgb(240 109 109 / 0.12);
  --info: #79a8ff;
  --info-soft: rgb(121 168 255 / 0.12);
  --grid: rgb(255 255 255 / 0.045);
  --board: #0d2a20;
  --board-edge: #1f5a43;
  --silk: rgb(232 237 244 / 0.55);
  --shadow: 0 1px 0 rgb(255 255 255 / 0.03) inset, 0 18px 40px -18px rgb(0 0 0 / 0.6);
  --shadow-lg: 0 30px 80px -30px rgb(0 0 0 / 0.75);
  --radius-s: 8px;
  --radius: 12px;
  --radius-l: 18px;
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --wrap: 1180px;
  --gutter: 24px;
  --header-h: 64px;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg-base: #f6f4ef;
    --bg-1: #ffffff;
    --bg-2-base: #fbfaf7;
    --bg-3-base: #f0ece4;
    --line: #e5e0d5;
    --line-2: #d6cfc1;
    --text: #13171d;
    --text-2: #4b5461;
    --text-3-base: #7b8491;
    --copper: #b4561f;
    --copper-2: #9c4818;
    --copper-ink: #ffffff;
    --copper-soft: rgb(180 86 31 / 0.09);
    --copper-line: rgb(180 86 31 / 0.35);
    --c-pcb: #1d6b3e;
    --c-pcb-2: #165431;
    --c-pcb-ink: #ffffff;
    --c-cad: #0a74a0;
    --c-cad-2: #085d80;
    --c-cad-ink: #ffffff;
    --c-fw: #7a3fd8;
    --c-fw-2: #6430b8;
    --c-fw-ink: #ffffff;
    --c-sim: #c2410c;
    --c-sim-2: #a3360a;
    --c-sim-ink: #ffffff;
    --c-hub: #b01d8f;
    --c-hub-2: #8f1673;
    --c-hub-ink: #ffffff;
    --wm-faezor: #536897;
    --laser: #14d96a;
    --wait: #e09600;
    --fail: #e03535;
    --tint: 5%;
    --mask: #177a51;
    --mask-soft: rgb(23 122 81 / 0.1);
    --warn: #a86d0f;
    --warn-soft: rgb(168 109 15 / 0.1);
    --err: #c03636;
    --err-soft: rgb(192 54 54 / 0.08);
    --info: #2f62c9;
    --info-soft: rgb(47 98 201 / 0.08);
    --grid: rgb(19 23 29 / 0.06);
    --board: #134a36;
    --board-edge: #0e3a2a;
    --silk: rgb(255 255 255 / 0.75);
    --shadow: 0 1px 2px rgb(30 25 15 / 0.05), 0 12px 32px -16px rgb(30 25 15 / 0.18);
    --shadow-lg: 0 30px 70px -30px rgb(30 25 15 / 0.3);
  }
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg-base: #f6f4ef;
  --bg-1: #ffffff;
  --bg-2-base: #fbfaf7;
  --bg-3-base: #f0ece4;
  --line: #e5e0d5;
  --line-2: #d6cfc1;
  --text: #13171d;
  --text-2: #4b5461;
  --text-3-base: #7b8491;
  --copper: #b4561f;
  --copper-2: #9c4818;
  --copper-ink: #ffffff;
  --copper-soft: rgb(180 86 31 / 0.09);
  --copper-line: rgb(180 86 31 / 0.35);
  --c-pcb: #1d6b3e;
  --c-pcb-2: #165431;
  --c-pcb-ink: #ffffff;
  --c-cad: #0a74a0;
  --c-cad-2: #085d80;
  --c-cad-ink: #ffffff;
  --c-fw: #7a3fd8;
  --c-fw-2: #6430b8;
  --c-fw-ink: #ffffff;
  --c-sim: #c2410c;
  --c-sim-2: #a3360a;
  --c-sim-ink: #ffffff;
  --c-hub: #b01d8f;
  --c-hub-2: #8f1673;
  --c-hub-ink: #ffffff;
  --wm-faezor: #536897;
  --laser: #14d96a;
  --wait: #e09600;
  --fail: #e03535;
  --tint: 5%;
  --mask: #177a51;
  --mask-soft: rgb(23 122 81 / 0.1);
  --warn: #a86d0f;
  --warn-soft: rgb(168 109 15 / 0.1);
  --err: #c03636;
  --err-soft: rgb(192 54 54 / 0.08);
  --info: #2f62c9;
  --info-soft: rgb(47 98 201 / 0.08);
  --grid: rgb(19 23 29 / 0.06);
  --board: #134a36;
  --board-edge: #0e3a2a;
  --silk: rgb(255 255 255 / 0.75);
  --shadow: 0 1px 2px rgb(30 25 15 / 0.05), 0 12px 32px -16px rgb(30 25 15 / 0.18);
  --shadow-lg: 0 30px 70px -30px rgb(30 25 15 / 0.3);
}

@media (max-width: 640px) {
  :root {
    --gutter: 16px;
  }
}

/* ---------- the open hexagon (body[data-hex]; views/hexrail.ts): the page background leans towards the product's
   colour - subtly, about 5 % in light mode and 9 % in dark mode - and buttons, focus rings and other accents take the
   product's colour. Without a product (the website, the faezor hexagon in the middle) the accent is the brand's
   copper. Text keeps its contrast: the faint text moves a little towards the body text on a tinted page. */
:root {
  --bg: var(--bg-base);
  --bg-2: var(--bg-2-base);
  --bg-3: var(--bg-3-base);
  --text-3: var(--text-3-base);
  --accent: var(--copper);
  --accent-2: var(--copper-2);
  --accent-ink: var(--copper-ink);
  --accent-soft: var(--copper-soft);
  --accent-line: var(--copper-line);
  --hex: transparent;
}
body[data-hex="pcb"] {
  --hex: var(--c-pcb-hex);
  --accent: var(--c-pcb);
  --accent-2: var(--c-pcb-2);
  --accent-ink: var(--c-pcb-ink);
}
body[data-hex="cad"] {
  --hex: var(--c-cad-hex);
  --accent: var(--c-cad);
  --accent-2: var(--c-cad-2);
  --accent-ink: var(--c-cad-ink);
}
body[data-hex="firmware"] {
  --hex: var(--c-fw-hex);
  --accent: var(--c-fw);
  --accent-2: var(--c-fw-2);
  --accent-ink: var(--c-fw-ink);
}
body[data-hex="sim"] {
  --hex: var(--c-sim-hex);
  --accent: var(--c-sim);
  --accent-2: var(--c-sim-2);
  --accent-ink: var(--c-sim-ink);
}
body[data-hex="hub"] {
  --hex: var(--c-hub-hex);
  --accent: var(--c-hub);
  --accent-2: var(--c-hub-2);
  --accent-ink: var(--c-hub-ink);
}
body:is([data-hex="pcb"], [data-hex="cad"], [data-hex="firmware"], [data-hex="sim"], [data-hex="hub"]) {
  --bg: color-mix(in oklab, var(--bg-base), var(--hex) var(--tint));
  --bg-2: color-mix(in oklab, var(--bg-2-base), var(--hex) calc(var(--tint) * 0.5));
  --bg-3: color-mix(in oklab, var(--bg-3-base), var(--hex) calc(var(--tint) * 0.6));
  --text-3: color-mix(in oklab, var(--text-3-base), var(--text) 14%);
  --accent-soft: color-mix(in srgb, var(--accent) 13%, transparent);
  --accent-line: color-mix(in srgb, var(--accent) 40%, transparent);
}
/* a short cross-fade between pages (another hexagon is another page; the PCB and Simulation hexagons switch in place) */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
}

/* ---------- base */

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}
body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--bg);
  transition: background-color 0.35s ease;
  background-image: radial-gradient(var(--grid) 1px, transparent 1.2px);
  background-size: 24px 24px;
  color: var(--text);
  font: 400 16px/1.6 var(--sans);
  font-feature-settings: "cv11", "ss01", "ss03";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img,
svg,
canvas,
video {
  display: block;
  max-width: 100%;
}
a {
  color: inherit;
  text-decoration-color: var(--accent-line);
  text-underline-offset: 3px;
}
a:hover {
  color: var(--accent);
}
h1,
h2,
h3,
h4 {
  margin: 0;
  line-height: 1.12;
  letter-spacing: -0.02em;
  font-weight: 650;
}
p {
  margin: 0;
}
code,
kbd,
pre,
.mono {
  font-family: var(--mono);
  font-size: 0.9em;
}
button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}
::selection {
  background: var(--accent);
  color: var(--accent-ink);
}
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  padding: 8px 14px;
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: var(--radius-s);
}
.skip:focus {
  top: 12px;
}
[hidden] {
  display: none !important;
}

.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---------- header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--header-h);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}
.site-header.is-scrolled,
.site-header.app {
  border-bottom-color: var(--line);
}
.site-header .wrap {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 24px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: 17px;
  color: var(--text);
}
.brand:hover {
  color: var(--text);
}
/* the logo (web/deploy/logo-assets.py): a wide mark, about 2.1 : 1 */
.brand-mark {
  width: 46px;
  height: auto;
  aspect-ratio: 96 / 47;
}
.brand-word {
  letter-spacing: -0.01em;
}
/* the product wordmarks (views/wordmark.ts, static/js/hexrail.js, static/js/central.js): one word, a hard colour cut */
.wm {
  white-space: nowrap;
}
.wm-f {
  color: var(--wm-faezor);
}
.wm-s {
  color: var(--wm-c, var(--text));
}
.wm-pcb {
  --wm-c: var(--c-pcb);
}
.wm-cad {
  --wm-c: var(--c-cad);
}
.wm-firmware {
  --wm-c: var(--c-fw);
}
.wm-sim {
  --wm-c: var(--c-sim);
}
.wm-hub {
  --wm-c: var(--c-hub);
}
/* a project's pages are tinted by the open product: the suffix takes the product's second tone (darker in the light
   theme), which keeps 4.5:1 on the tinted page */
body[data-hex] .wm-pcb {
  --wm-c: var(--c-pcb-2);
}
body[data-hex] .wm-cad {
  --wm-c: var(--c-cad-2);
}
body[data-hex] .wm-firmware {
  --wm-c: var(--c-fw-2);
}
body[data-hex] .wm-sim {
  --wm-c: var(--c-sim-2);
}
body[data-hex] .wm-hub {
  --wm-c: var(--c-hub-2);
}
.nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
}
.nav a {
  text-decoration: none;
  color: var(--text-2);
  font-size: 14.5px;
  padding: 8px 12px;
  border-radius: var(--radius-s);
}
.nav a:hover,
.nav a[aria-current="page"] {
  color: var(--text);
  background: var(--bg-3);
}
.header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}
.icon-btn.menu-btn {
  display: none;
}
@media (max-width: 860px) {
  .nav {
    display: none;
  }
  .nav.is-open {
    display: flex;
    position: absolute;
    top: var(--header-h);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    padding: 12px var(--gutter) 20px;
    background: var(--bg-1);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    margin: 0;
  }
  .nav.is-open a {
    padding: 12px;
    font-size: 16px;
  }
  .icon-btn.menu-btn {
    display: inline-flex;
  }
  .header-actions .hide-sm {
    display: none;
  }
}

/* ---------- buttons, inputs */

.btn {
  --b-bg: var(--bg-2);
  --b-fg: var(--text);
  --b-line: var(--line-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border-radius: var(--radius-s);
  border: 1px solid var(--b-line);
  background: var(--b-bg);
  color: var(--b-fg);
  font-weight: 560;
  font-size: 14.5px;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.08s, box-shadow 0.15s;
  user-select: none;
}
.btn:hover {
  --b-bg: var(--bg-3);
  color: var(--b-fg);
}
.btn:active {
  transform: translateY(1px);
}
.btn svg {
  width: 17px;
  height: 17px;
  flex: none;
}
.btn-primary {
  --b-bg: var(--accent);
  --b-fg: var(--accent-ink);
  --b-line: transparent;
  box-shadow: 0 8px 24px -10px var(--accent);
}
.btn-primary:hover {
  --b-bg: var(--accent-2);
}
.btn-ghost {
  --b-bg: transparent;
  --b-line: transparent;
  --b-fg: var(--text-2);
}
.btn-ghost:hover {
  --b-fg: var(--text);
}
.btn-danger {
  --b-fg: var(--err);
  --b-line: color-mix(in srgb, var(--err) 35%, transparent);
  --b-bg: var(--err-soft);
}
.btn-danger:hover {
  --b-bg: color-mix(in srgb, var(--err) 20%, transparent);
}
.btn-lg {
  height: 48px;
  padding: 0 22px;
  font-size: 15.5px;
  border-radius: 10px;
}
.btn-sm {
  height: 32px;
  padding: 0 11px;
  font-size: 13.5px;
}
.btn-block {
  width: 100%;
}
.btn[disabled],
.btn.is-busy {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}
.btn.is-busy::after {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-right-color: transparent;
  animation: spin 0.7s linear infinite;
}
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-s);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
}
.icon-btn:hover {
  background: var(--bg-3);
  color: var(--text);
}
.icon-btn svg {
  width: 19px;
  height: 19px;
}

.field {
  display: grid;
  gap: 6px;
  margin-bottom: 16px;
}
.field label,
.label {
  font-size: 13.5px;
  font-weight: 560;
  color: var(--text-2);
}
.input,
.textarea,
.select {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border-radius: var(--radius-s);
  border: 1px solid var(--line-2);
  background: var(--bg-1);
  color: var(--text);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.textarea {
  height: auto;
  min-height: 110px;
  padding: 12px 14px;
  resize: vertical;
  line-height: 1.55;
}
.input::placeholder,
.textarea::placeholder {
  color: var(--text-3);
}
.input:focus,
.textarea:focus,
.select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.hint {
  font-size: 13px;
  color: var(--text-3);
}
.form-error {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 10px 12px;
  border-radius: var(--radius-s);
  background: var(--err-soft);
  color: var(--err);
  font-size: 14px;
  margin-bottom: 14px;
}
.form-ok {
  padding: 10px 12px;
  border-radius: var(--radius-s);
  background: var(--mask-soft);
  color: var(--mask);
  font-size: 14px;
  margin-bottom: 14px;
}
.checkbox {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  font-size: 14px;
  color: var(--text-2);
  cursor: pointer;
}
.checkbox input {
  accent-color: var(--accent);
  width: 16px;
  height: 16px;
}

/* ---------- the robot check (ALTCHA widget, static/vendor/altcha; its stylesheet loads with it). Its colours come
   from the site's tokens, so it follows the light / dark theme; html:root outranks the widget's own :root values. */

html:root {
  --altcha-color-base: var(--bg-1);
  --altcha-color-base-content: var(--text);
  --altcha-color-neutral: var(--line-2);
  --altcha-color-neutral-content: var(--text-3);
  --altcha-color-primary: var(--accent);
  --altcha-color-primary-content: var(--accent-ink);
  --altcha-color-success: var(--mask);
  --altcha-color-success-content: var(--bg);
  --altcha-color-error: var(--err);
  --altcha-color-error-content: var(--bg);
  --altcha-border-color: var(--line-2);
  --altcha-border-radius: var(--radius-s);
  --altcha-checkbox-border-color: var(--line-2);
  --altcha-checkbox-outline-color: var(--accent);
  --altcha-input-background-color: var(--bg-1);
  --altcha-spinner-color: var(--accent);
  --altcha-max-width: 100%;
  --altcha-shadow: none;
}
altcha-widget.robot-check {
  display: block;
  margin: 0 0 16px;
  font-size: 14px;
  color: var(--text-2);
}
/* the box's height before the widget has loaded: no jump when it appears */
altcha-widget.robot-check:not([display]) {
  min-height: 70px;
}
altcha-widget.robot-check[display="invisible"] {
  margin: 0;
}
.btn.is-cooling {
  font-variant-numeric: tabular-nums;
}

/* ---------- small parts */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 600 12px/1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.eyebrow .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mask);
  box-shadow: 0 0 0 4px var(--mask-soft);
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  font: 600 12px/1 var(--sans);
  background: var(--bg-3);
  color: var(--text-2);
  border: 1px solid var(--line);
  white-space: nowrap;
}
.pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.pill.ok {
  color: var(--mask);
  background: var(--mask-soft);
  border-color: transparent;
}
.pill.run {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: transparent;
}
.pill.run::before {
  animation: pulse 1.4s ease-in-out infinite;
}
.pill.warn {
  color: var(--warn);
  background: var(--warn-soft);
  border-color: transparent;
}
.pill.err {
  color: var(--err);
  background: var(--err-soft);
  border-color: transparent;
}
.pill.plain::before {
  display: none;
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font: 600 10.5px/1 var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 6px;
  border-radius: 5px;
  background: var(--accent-soft);
  color: var(--accent);
}
.badge svg {
  width: 11px;
  height: 11px;
}
.kbd {
  font: 500 12px/1 var(--mono);
  padding: 3px 6px;
  border: 1px solid var(--line-2);
  border-bottom-width: 2px;
  border-radius: 5px;
  color: var(--text-2);
}
.card {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.muted {
  color: var(--text-2);
}
.faint {
  color: var(--text-3);
}
.spinner {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--line-2);
  border-top-color: var(--accent);
  animation: spin 0.8s linear infinite;
  flex: none;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes pulse {
  50% {
    opacity: 0.35;
    transform: scale(0.8);
  }
}
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

/* ---------- landing: hero */

.hero {
  position: relative;
  padding: 64px 0 56px;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: -200px -10% auto;
  height: 700px;
  background:
    radial-gradient(600px 360px at 72% 30%, var(--accent-soft), transparent 70%),
    radial-gradient(500px 300px at 20% 0%, var(--mask-soft), transparent 70%);
  pointer-events: none;
}
.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(0, 0.78fr);
  gap: 40px;
  align-items: center;
}
.hero h1 {
  font-size: clamp(2.3rem, 1.2rem + 3.2vw, 3.65rem);
  line-height: 1.04;
  text-wrap: balance;
  letter-spacing: -0.04em;
  font-weight: 680;
  margin: 18px 0 18px;
}
.hero h1 em {
  font-style: normal;
  background: linear-gradient(100deg, var(--copper), var(--copper-2) 60%, var(--warn));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero .lede {
  font-size: clamp(1.02rem, 0.95rem + 0.35vw, 1.2rem);
  color: var(--text-2);
  max-width: 600px;
  margin-bottom: 28px;
}
.hero-art {
  position: relative;
  aspect-ratio: 560 / 400;
  filter: drop-shadow(0 30px 40px rgb(0 0 0 / 0.3));
}
.hero-grid > div:first-child {
  position: relative;
  z-index: 1;
}
.hero-art svg {
  width: 100%;
  height: auto;
}
.hero-note {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 16px;
  font-size: 13.5px;
  color: var(--text-3);
}
.hero-note span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.hero-note svg {
  width: 15px;
  height: 15px;
  color: var(--mask);
}
@media (max-width: 1000px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .hero-art {
    max-width: 520px;
    width: 100%;
    margin: 0 auto;
  }
  .hero {
    padding-top: 28px;
  }
}

/* board art */
.pcb-board {
  fill: var(--board);
  stroke: var(--board-edge);
  stroke-width: 2;
}
.pcb-trace {
  fill: none;
  stroke: var(--copper);
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pcb-trace.thin {
  stroke-width: 2.2;
}
.pcb-trace.wide {
  stroke-width: 5.5;
}
.pcb-trace.b {
  stroke: color-mix(in srgb, var(--copper) 45%, var(--board));
  stroke-dasharray: none;
}
.pcb-pad {
  fill: var(--copper);
}
.pcb-pad.dim {
  fill: color-mix(in srgb, var(--copper) 80%, #000);
}
.pcb-via {
  fill: var(--board);
  stroke: var(--copper);
  stroke-width: 2.4;
}
.pcb-hole {
  fill: var(--bg);
  stroke: var(--copper);
  stroke-width: 3;
}
.pcb-ic {
  fill: #11161d;
  stroke: #2a3340;
  stroke-width: 1;
}
.pcb-ic-hi {
  fill: #161c25;
}
.pcb-silk {
  fill: none;
  stroke: var(--silk);
  stroke-width: 1.2;
}
.pcb-text {
  fill: var(--silk);
  font: 600 9px var(--mono);
  letter-spacing: 0.04em;
}
.pcb-pour {
  fill: var(--copper);
  opacity: 0.07;
}
.pcb-pulse {
  fill: #fff6e9;
  filter: drop-shadow(0 0 4px var(--copper-2));
}

/* ---------- composer */

.composer {
  position: relative;
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-lg);
  padding: 6px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.composer:focus-within {
  border-color: var(--accent-line);
  box-shadow: var(--shadow-lg), 0 0 0 4px var(--accent-soft);
}
/* called by a "Describe your device" button (static/js/site.js callComposer): a short flash of its frame, so the click
   shows even when the composer was already in view */
.composer.is-called {
  animation: composer-called 1.4s ease-out;
}
@keyframes composer-called {
  0%,
  35% {
    border-color: var(--accent);
    box-shadow: var(--shadow-lg), 0 0 0 8px var(--accent-soft), 0 0 0 2px var(--accent);
  }
}
@media (prefers-reduced-motion: reduce) {
  .composer.is-called {
    animation-duration: 0.01s;
    border-color: var(--accent);
  }
}
.composer textarea {
  display: block;
  width: 100%;
  min-height: 132px;
  max-height: 420px;
  border: 0;
  background: transparent;
  padding: 14px 14px 6px;
  resize: none;
  line-height: 1.55;
  font-size: 15.5px;
}
.composer textarea:focus {
  outline: none;
}
.composer textarea::placeholder {
  color: var(--text-3);
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 10px 10px;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg-2);
  color: var(--text-2);
  font-size: 13px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.chip:hover {
  color: var(--text);
  border-color: var(--accent-line);
  background: var(--accent-soft);
}
.chip svg {
  width: 13px;
  height: 13px;
}
.composer-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}
.composer-bar .spacer {
  flex: 1;
}
.files {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 10px 8px;
}
.file-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 260px;
  height: 28px;
  padding: 0 4px 0 10px;
  border-radius: 7px;
  background: var(--bg-3);
  font-size: 12.5px;
  color: var(--text-2);
}
.file-chip span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.file-chip button {
  border: 0;
  background: none;
  color: var(--text-3);
  cursor: pointer;
  padding: 2px 4px;
  display: inline-flex;
}
.file-chip button:hover {
  color: var(--err);
}
.file-chip svg {
  width: 13px;
  height: 13px;
}
/* the composer's options: a row of switches that wraps (several fit side by side), each a real checkbox with role
   switch, its label and an info button; the help of a switch shows below the bar (views/landing.ts composerSwitch) */
.composer-opts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.opt {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-2);
  transition: border-color 0.15s, background 0.15s;
}
.opt.is-on {
  border-color: var(--accent-line);
  background: var(--accent-soft);
}
.opt-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 4px 0 10px;
  font-size: 13px;
  font-weight: 560;
  color: var(--text-2);
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
}
.opt-switch input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}
.opt-switch > svg {
  width: 15px;
  height: 15px;
  flex: none;
}
.opt.is-on .opt-switch,
.opt-switch:has(input:checked) {
  color: var(--text);
}
.opt-track {
  position: relative;
  flex: none;
  width: 30px;
  height: 18px;
  border-radius: 999px;
  background: var(--line-2);
  transition: background 0.15s;
}
.opt-track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--bg-1);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.3);
  transition: transform 0.15s;
}
.opt-switch input:checked + .opt-track {
  background: var(--accent);
}
.opt-switch input:checked + .opt-track::after {
  transform: translateX(12px);
}
.opt-switch input:focus-visible + .opt-track {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.opt-switch input:disabled + .opt-track {
  opacity: 0.5;
}
.opt-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 38px;
  border: 0;
  border-radius: 0 9px 9px 0;
  background: none;
  color: var(--text-3);
  cursor: pointer;
}
.opt-info:hover,
.opt-info[aria-expanded="true"] {
  color: var(--text);
}
.opt-info:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.opt-info svg {
  width: 15px;
  height: 15px;
}
.composer-help:not(:has(.opt-help:not([hidden]))) {
  display: none;
}
.opt-help {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 0 8px 8px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-2);
}
.opt-help svg {
  width: 16px;
  height: 16px;
  flex: none;
  margin-top: 1px;
  color: var(--info);
}
/* a board's "ASIL D parts": the header's badge (opens the settings), a tag on cards, the share page and the chat */
.ws-meta {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  min-width: 0;
}
/* a phone's header: the badge is its icon (its name stays its accessible name) */
@media (max-width: 560px) {
  .ws-head .safety-badge {
    padding: 0 5px;
  }
  .ws-head .safety-badge > span {
    display: none;
  }
}
.safety-badge,
.safety-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 9px 0 7px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--info) 35%, transparent);
  background: var(--info-soft);
  color: var(--info);
  font: 600 11.5px/1 var(--sans);
  white-space: nowrap;
  flex: none;
}
.safety-badge {
  cursor: pointer;
}
.safety-badge[hidden] {
  display: none;
}
.safety-badge:hover {
  border-color: var(--info);
}
.safety-badge:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.safety-badge svg,
.safety-tag svg {
  width: 14px;
  height: 14px;
  flex: none;
}
.share-safety {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin-top: 14px;
  font-size: 13.5px;
  color: var(--text-2);
}
.tag-safety {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--info);
}
.tag-safety svg {
  width: 12px;
  height: 12px;
}
.notice.setting svg {
  color: var(--info);
}
.setting-safety {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.opt-switch-lg {
  padding: 0;
  min-height: 44px;
  font-size: 15px;
}
.opt-switch-lg > svg {
  color: var(--info);
}
.setting-help,
.setting-effect {
  margin: 6px 0 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-2);
}
.setting-effect {
  color: var(--text-3);
}
@media (max-width: 560px) {
  .composer-bar .btn-primary {
    width: 100%;
    order: 3;
    height: 46px;
  }
  /* touch targets: 44 px */
  .opt-switch,
  .opt-info {
    min-height: 44px;
  }
  .opt-info {
    width: 40px;
  }
  .composer-bar .spacer {
    display: none;
  }
  .chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    mask-image: linear-gradient(90deg, #000 85%, transparent);
  }
  .chips::-webkit-scrollbar {
    display: none;
  }
  .chip {
    flex: none;
  }
  .composer textarea {
    min-height: 120px;
  }
}

/* ---------- sections */

.section {
  padding: 96px 0;
  position: relative;
}
.section-head {
  max-width: 720px;
  margin-bottom: 48px;
}
.section-head h2 {
  font-size: clamp(1.8rem, 1.2rem + 1.9vw, 2.75rem);
  letter-spacing: -0.03em;
  margin: 14px 0 14px;
}
.section-head p {
  color: var(--text-2);
  font-size: 1.07rem;
}
.section.alt {
  background: linear-gradient(180deg, transparent, var(--bg-1) 18%, var(--bg-1) 82%, transparent);
}
@media (max-width: 640px) {
  .section {
    padding: 64px 0;
  }
}

/* steps */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  counter-reset: step;
  position: relative;
}
.step {
  position: relative;
  padding: 22px;
  border-radius: var(--radius);
  background: var(--bg-1);
  border: 1px solid var(--line);
}
.step-num {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font: 600 12px/1 var(--mono);
  color: var(--text-3);
  margin-bottom: 30px;
}
.step-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent);
}
.step-icon svg {
  width: 20px;
  height: 20px;
}
.step h3 {
  font-size: 1.08rem;
  margin-bottom: 8px;
}
.step p {
  color: var(--text-2);
  font-size: 14.5px;
}
@media (max-width: 960px) {
  .steps {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 560px) {
  .steps {
    grid-template-columns: 1fr;
  }
}

/* bento */
.bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}
.tile {
  position: relative;
  overflow: hidden;
  padding: 24px;
  border-radius: var(--radius);
  background: var(--bg-1);
  border: 1px solid var(--line);
  grid-column: span 2;
  min-height: 190px;
  display: flex;
  flex-direction: column;
}
.tile.wide {
  grid-column: span 3;
}
.tile.hero-tile {
  grid-column: span 4;
  grid-row: span 2;
  min-height: 396px;
}
.tile h3 {
  font-size: 1.05rem;
  margin: 14px 0 6px;
}
.tile p {
  color: var(--text-2);
  font-size: 14.5px;
}
.tile .tile-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--bg-3);
  color: var(--text);
  border: 1px solid var(--line);
}
.tile .tile-icon svg {
  width: 19px;
  height: 19px;
}
.tile .tile-foot {
  margin-top: auto;
  padding-top: 16px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.tile-visual {
  margin: 8px -24px -24px;
  flex: 1;
  min-height: 200px;
  display: grid;
  place-items: center;
  background: radial-gradient(70% 70% at 50% 60%, var(--accent-soft), transparent 70%);
}
.tile-visual svg {
  width: min(88%, 460px);
}
@media (max-width: 960px) {
  .bento {
    grid-template-columns: repeat(2, 1fr);
  }
  .tile,
  .tile.wide {
    grid-column: span 1;
  }
  .tile.hero-tile {
    grid-column: span 2;
    grid-row: auto;
    min-height: 320px;
  }
}
@media (max-width: 560px) {
  .bento {
    grid-template-columns: 1fr;
  }
  .tile,
  .tile.wide,
  .tile.hero-tile {
    grid-column: span 1;
  }
}

/* verification terminal */
.verify {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 48px;
  align-items: center;
}
.verify ul {
  list-style: none;
  padding: 0;
  margin: 28px 0 0;
  display: grid;
  gap: 14px;
}
.verify li {
  display: flex;
  gap: 12px;
  color: var(--text-2);
}
.verify li svg {
  width: 20px;
  height: 20px;
  color: var(--mask);
  flex: none;
  margin-top: 2px;
}
.verify li b {
  color: var(--text);
  font-weight: 600;
}
.terminal {
  border-radius: var(--radius);
  background: #07090c;
  border: 1px solid #1c232e;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  color: #d8dee8;
}
.terminal-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 14px;
  border-bottom: 1px solid #161c25;
  font: 500 12px var(--mono);
  color: #6d7889;
}
.terminal-bar i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #252d39;
}
.terminal-bar span {
  margin-left: 8px;
}
.terminal pre {
  margin: 0;
  padding: 18px 20px 22px;
  font: 400 13.2px/1.85 var(--mono);
  overflow-x: auto;
}
.t-dim {
  color: #5f6b7c;
}
.t-ok {
  color: #3ccf95;
  font-weight: 600;
}
.t-cu {
  color: #f0975a;
}
.t-ln {
  display: block;
}
.terminal.is-typing .t-ln {
  opacity: 0;
}
.terminal .t-ln.is-shown {
  opacity: 1;
  animation: rise 0.25s ease-out;
}
@media (max-width: 960px) {
  .verify {
    grid-template-columns: 1fr;
  }
}

/* router stats */
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-1);
  overflow: hidden;
}
.stat {
  padding: 28px;
  border-right: 1px solid var(--line);
}
.stat:last-child {
  border-right: 0;
}
.stat b {
  display: block;
  font: 650 clamp(2rem, 1.4rem + 2vw, 3rem) / 1 var(--sans);
  letter-spacing: -0.04em;
  margin-bottom: 10px;
}
.stat b small {
  font-size: 0.5em;
  color: var(--text-3);
  margin-left: 4px;
}
.stat span {
  color: var(--text-2);
  font-size: 14.5px;
}
.stats-note {
  margin-top: 14px;
  font-size: 13px;
  color: var(--text-3);
}
@media (max-width: 760px) {
  .stats {
    grid-template-columns: 1fr;
  }
  .stat {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .stat:last-child {
    border-bottom: 0;
  }
}
/* pricing */
.plans {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  max-width: 880px;
}
.plan {
  position: relative;
  padding: 28px;
  border-radius: var(--radius-l);
  background: var(--bg-1);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
}
.plan.is-featured {
  border-color: var(--accent-line);
  background: linear-gradient(180deg, var(--accent-soft), var(--bg-1) 40%);
}
.plan h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.15rem;
}
.plan .price {
  margin: 18px 0 6px;
  font: 650 2.6rem/1 var(--sans);
  letter-spacing: -0.04em;
}
.plan .price small {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-3);
  letter-spacing: 0;
  margin-left: 4px;
}
.plan > p {
  color: var(--text-2);
  font-size: 14.5px;
  min-height: 46px;
}
.plan ul {
  list-style: none;
  padding: 0;
  margin: 22px 0 26px;
  display: grid;
  gap: 11px;
  font-size: 14.5px;
}
.plan li {
  display: flex;
  gap: 10px;
  color: var(--text-2);
}
.plan li svg {
  width: 18px;
  height: 18px;
  color: var(--mask);
  flex: none;
  margin-top: 2px;
}
.plan.is-featured li svg {
  color: var(--accent);
}
.plan .btn {
  margin-top: auto;
}
@media (max-width: 720px) {
  .plans {
    grid-template-columns: 1fr;
  }
}

/* faq */
.faq {
  max-width: 820px;
  border-top: 1px solid var(--line);
}
.faq details {
  border-bottom: 1px solid var(--line);
}
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 20px 4px;
  font-weight: 580;
  font-size: 1.02rem;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary svg {
  width: 18px;
  height: 18px;
  color: var(--text-3);
  transition: transform 0.2s;
  flex: none;
}
.faq details[open] summary svg {
  transform: rotate(45deg);
  color: var(--accent);
}
.faq details p {
  padding: 0 4px 22px;
  color: var(--text-2);
  max-width: 700px;
}

/* call to action band */
.cta {
  position: relative;
  overflow: hidden;
  padding: 56px;
  border-radius: 24px;
  border: 1px solid var(--line);
  background:
    radial-gradient(500px 240px at 85% 0%, var(--accent-soft), transparent 70%),
    radial-gradient(400px 200px at 0% 100%, var(--mask-soft), transparent 70%),
    var(--bg-1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
}
.cta h2 {
  font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.4rem);
  letter-spacing: -0.03em;
  margin-bottom: 8px;
}
.cta p {
  color: var(--text-2);
}
@media (max-width: 760px) {
  .cta {
    flex-direction: column;
    align-items: flex-start;
    padding: 32px 24px;
  }
}

/* footer */
.site-footer {
  border-top: 1px solid var(--line);
  margin-top: 96px;
  padding: 40px 0 48px;
  font-size: 14px;
  color: var(--text-3);
}
.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 32px;
  align-items: center;
  justify-content: space-between;
}
.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
}
.site-footer a {
  text-decoration: none;
  color: var(--text-2);
}
.site-footer a:hover {
  color: var(--text);
}
.theme-switch {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--bg-1);
}
.theme-switch button {
  width: 30px;
  height: 28px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  display: grid;
  place-items: center;
}
.theme-switch button svg {
  width: 15px;
  height: 15px;
}
.theme-switch button[aria-pressed="true"] {
  background: var(--bg-3);
  color: var(--text);
}

/* ---------- modal, toast */

.modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgb(5 7 10 / 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: fade 0.15s ease-out;
}
.modal-card {
  position: relative;
  width: 100%;
  max-width: 440px;
  max-height: calc(100vh - 32px);
  overflow: auto;
  padding: 28px;
  border-radius: var(--radius-l);
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  box-shadow: var(--shadow-lg);
  animation: rise 0.2s ease-out;
}
.modal-card h2 {
  font-size: 1.45rem;
  letter-spacing: -0.025em;
  margin: 14px 0 8px;
}
.modal-card > p {
  color: var(--text-2);
  margin-bottom: 20px;
  font-size: 15px;
}
.modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
}
.modal-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  color: var(--accent);
}
.modal-icon svg {
  width: 22px;
  height: 22px;
}
.modal-alt {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--text-2);
  text-align: center;
}
@keyframes fade {
  from {
    opacity: 0;
  }
}
.toasts {
  position: fixed;
  z-index: 90;
  right: 16px;
  bottom: 16px;
  display: grid;
  gap: 8px;
  max-width: min(380px, calc(100vw - 32px));
}
.toast {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  box-shadow: var(--shadow-lg);
  font-size: 14px;
  animation: rise 0.2s ease-out;
}
.toast svg {
  width: 18px;
  height: 18px;
  flex: none;
  margin-top: 1px;
}
.toast.ok svg {
  color: var(--mask);
}
.toast.err svg {
  color: var(--err);
}

/* ---------- auth pages */

.auth {
  min-height: calc(100vh - var(--header-h));
  display: grid;
  place-items: center;
  padding: 48px 16px 64px;
}
.auth-card {
  width: 100%;
  max-width: 420px;
  padding: 32px;
}
.auth-card h1 {
  font-size: 1.65rem;
  letter-spacing: -0.03em;
  margin: 16px 0 8px;
}
.auth-card > p {
  color: var(--text-2);
  margin-bottom: 24px;
}
.auth-links {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
  font-size: 14px;
  color: var(--text-2);
}
.auth-art {
  width: 72px;
  height: auto;
  aspect-ratio: 96 / 47;
}

/* ---------- app shell */

.app-main {
  padding-top: 32px;
  padding-bottom: 64px;
}
.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.page-head h1 {
  font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.1rem);
  letter-spacing: -0.03em;
}
.page-head p {
  color: var(--text-2);
  margin-top: 6px;
}
.grid-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.proj-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  overflow: hidden;
  transition: border-color 0.15s, transform 0.15s;
}
.proj-card:hover {
  border-color: var(--line-2);
  transform: translateY(-2px);
  color: inherit;
}
.proj-thumb {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.proj-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 12px;
}
.proj-thumb svg {
  width: 46%;
  opacity: 0.85;
}
.proj-body {
  padding: 16px 18px 18px;
  display: grid;
  gap: 8px;
}
.proj-body h3 {
  font-size: 1.02rem;
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.proj-body p {
  color: var(--text-2);
  font-size: 14px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.9em;
}
.proj-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12.5px;
  color: var(--text-3);
}
.empty {
  text-align: center;
  padding: 56px 24px;
  border: 1px dashed var(--line-2);
  border-radius: var(--radius-l);
  background: var(--bg-1);
}
.empty svg.empty-art {
  width: 120px;
  margin: 0 auto 18px;
}
.empty h2 {
  font-size: 1.3rem;
  margin-bottom: 8px;
}
.empty p {
  color: var(--text-2);
  max-width: 460px;
  margin: 0 auto 20px;
}
.new-board {
  max-width: 820px;
}

/* ---------- workspace */

.ws {
  display: grid;
  grid-template-columns: minmax(360px, 0.92fr) minmax(0, 1.08fr);
  height: calc(100vh - var(--header-h));
  min-height: 560px;
}
.ws-left {
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-right: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 70%, var(--bg-1));
}
.ws-right {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}
.ws-head {
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
}
.ws-head h1 {
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.ws-head .back {
  flex: none;
}
.ws-head .actions {
  margin-left: auto;
  display: flex;
  gap: 6px;
  flex: none;
  align-items: center;
}
.stepper {
  display: flex;
  gap: 4px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
}
.stepper::-webkit-scrollbar {
  display: none;
}
.stp {
  flex: 1;
  min-width: 84px;
  display: grid;
  gap: 6px;
}
.stp i {
  display: block;
  height: 4px;
  border-radius: 4px;
  background: var(--line-2);
  overflow: hidden;
  position: relative;
}
.stp span {
  font-size: 11.5px;
  font-weight: 560;
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 4px;
}
.stp.done i {
  background: var(--mask);
}
.stp.done span {
  color: var(--text-2);
}
.stp.active i {
  background: var(--accent-soft);
}
.stp.active i::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 40%;
  background: var(--accent);
  border-radius: 4px;
  animation: slide 1.6s ease-in-out infinite;
}
.stp.active span {
  color: var(--accent);
}
@keyframes slide {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(260%);
  }
}

.chat {
  flex: 1;
  overflow-y: auto;
  padding: 20px 20px 8px;
  scroll-behavior: smooth;
}
.msg {
  margin-bottom: 18px;
  animation: rise 0.2s ease-out;
}
.msg-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text-3);
  margin-bottom: 6px;
}
.msg-head b {
  color: var(--text-2);
  font-weight: 600;
}
.avatar {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  font: 700 11px var(--sans);
  background: var(--bg-3);
  color: var(--text-2);
  flex: none;
}
.avatar.agent {
  background: var(--accent-soft);
  color: var(--accent);
}
.avatar.agent svg {
  width: 14px;
  height: 14px;
}
.msg-user .bubble {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.msg-agent .md {
  padding-left: 30px;
}
/* a message sent while the agent works (steering): its delivery under the bubble */
.steer-state {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--text-3);
}
.steer-state svg {
  width: 14px;
  height: 14px;
  flex: none;
}
.steer-state[data-steer="pending"] svg {
  color: var(--accent);
}
.steer-state[data-steer="seen"] {
  color: var(--text-2);
}
.steer-state[data-steer="seen"] svg {
  color: var(--mask);
}
.steer-state[data-steer="dropped"] svg {
  color: var(--err);
}
.md {
  font-size: 15px;
  line-height: 1.65;
  word-wrap: break-word;
}
.md p + p,
.md p + ul,
.md ul + p,
.md p + ol,
.md ol + p,
.md pre,
.md h3,
.md h4,
.md table {
  margin-top: 10px;
}
.md ul,
.md ol {
  padding-left: 20px;
  margin: 6px 0 0;
}
.md li + li {
  margin-top: 3px;
}
.md h3,
.md h4 {
  font-size: 1rem;
}
.md code {
  font-size: 0.86em;
  padding: 1px 5px;
  border-radius: 5px;
  background: var(--bg-3);
}
.md pre {
  padding: 12px;
  border-radius: 8px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  overflow-x: auto;
}
.md pre code {
  background: none;
  padding: 0;
}
.md table {
  border-collapse: collapse;
  font-size: 13.5px;
  display: block;
  overflow-x: auto;
}
.md th,
.md td {
  border: 1px solid var(--line);
  padding: 5px 9px;
  text-align: left;
}
.md a {
  color: var(--accent);
}
.steps-group {
  margin: 0 0 18px 30px;
  border-left: 1px solid var(--line-2);
  padding-left: 12px;
}
.steps-group > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-3);
  padding: 2px 0;
}
.steps-group > summary::-webkit-details-marker {
  display: none;
}
.steps-group > summary svg {
  width: 14px;
  height: 14px;
  transition: transform 0.15s;
}
.steps-group[open] > summary svg {
  transform: rotate(90deg);
}
.tool {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: var(--text-2);
  padding: 4px 0;
  min-width: 0;
}
.tool .ti {
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  flex: none;
}
.tool .ti svg {
  width: 15px;
  height: 15px;
}
.tool.ok .ti {
  color: var(--mask);
}
.tool.err .ti {
  color: var(--err);
}
.tool .tl {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tool details {
  min-width: 0;
  flex: 1;
}
.tool summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  gap: 8px;
  align-items: center;
  min-width: 0;
}
.tool summary::-webkit-details-marker {
  display: none;
}
.tool pre {
  margin: 6px 0 4px;
  padding: 10px;
  max-height: 260px;
  overflow: auto;
  border-radius: 8px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  font: 12px/1.5 var(--mono);
  white-space: pre-wrap;
  word-break: break-all;
  color: var(--text-2);
}
.live-tool {
  margin: 0 0 18px 30px;
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 13.5px;
  color: var(--accent);
}
.notice {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0 0 18px;
  padding: 11px 13px;
  border-radius: 10px;
  font-size: 14px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  color: var(--text-2);
}
.notice svg {
  width: 17px;
  height: 17px;
  flex: none;
  margin-top: 2px;
}
.notice.ok {
  background: var(--mask-soft);
  border-color: transparent;
  color: var(--text);
}
.notice.ok svg {
  color: var(--mask);
}
.notice.err {
  background: var(--err-soft);
  border-color: transparent;
  color: var(--text);
}
.notice.err svg {
  color: var(--err);
}
.notice.run svg {
  color: var(--accent);
}
.notice.progress {
  background: transparent;
  color: var(--text);
}
.notice.progress svg {
  color: var(--accent);
}
.plan-list {
  list-style: none;
  margin: 0 0 18px 30px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-1);
  font-size: 13.5px;
  display: grid;
  gap: 4px;
}
.plan-list li {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  color: var(--text-2);
}
.plan-list li svg {
  width: 15px;
  height: 15px;
  flex: none;
  margin-top: 3px;
  color: var(--text-3);
}
.plan-list li.completed {
  color: var(--text-3);
  text-decoration: line-through;
}
.plan-list li.completed svg {
  color: var(--mask);
}
.plan-list li.in_progress {
  color: var(--text);
}
.plan-list li.in_progress svg {
  color: var(--accent);
}
/* the agent's questions (static/js/questions.js): a card with one fieldset per question */
.pill.ask {
  color: var(--info);
  background: var(--info-soft);
  border-color: transparent;
}
.tag {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  font: 600 11px/1 var(--sans);
  background: var(--bg-3);
  color: var(--text-2);
}
.qcard {
  margin-left: 30px;
  border: 1px solid var(--line-2);
  border-radius: 14px;
  background: var(--bg-1);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.qcard[data-state="open"] {
  border-color: var(--accent-line);
}
.qcard[data-state="skipped"],
.qcard[data-state="replaced"] {
  background: transparent;
  box-shadow: none;
}
.qcard-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
}
.qcard[data-state="skipped"] .qcard-head,
.qcard[data-state="replaced"] .qcard-head {
  background: transparent;
  border-bottom: 0;
}
.qcard-icon {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  flex: none;
  background: var(--accent-soft);
  color: var(--accent);
}
.qcard-icon svg {
  width: 18px;
  height: 18px;
}
.qcard-title {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 1px;
}
.qcard-title h3 {
  margin: 0;
  font-size: 14.5px;
  font-weight: 640;
  color: var(--text);
}
.qcard-title h3:focus {
  outline: none;
}
.qcard-title span {
  font-size: 12.5px;
  color: var(--text-3);
}
.qcard-intro {
  margin: 0;
  padding: 12px 16px 2px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text-2);
}
.qform {
  margin: 0;
}
.qcard.busy .qform {
  opacity: 0.75;
  pointer-events: none;
}
.q {
  min-width: 0;
  margin: 0;
  padding: 13px 16px 14px;
  border: 0;
}
.q + .q {
  border-top: 1px dashed var(--line);
}
/* floated: a legend otherwise sits in the fieldset's top border (the dashed line ran through it) */
.q legend {
  float: left;
  width: 100%;
  padding: 0 0 8px;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--text);
}
.q-num {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-right: 8px;
  border-radius: 6px;
  vertical-align: 1px;
  font: 600 11.5px/1 var(--mono);
  background: var(--bg-3);
  color: var(--text-2);
  transition: background 0.15s, color 0.15s;
}
.q.answered .q-num {
  background: var(--mask-soft);
  color: var(--mask);
}
.q-optional,
.q-hint {
  margin-left: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-3);
}
.q-detail,
.q-opts,
.q-textarea.input {
  clear: both;
}
.q-detail {
  margin: 0 0 0 28px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-3);
}
.q-opts {
  display: grid;
  gap: 6px;
  margin: 10px 0 0 28px;
}
.q-choice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-2);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.q-choice:hover {
  border-color: var(--line-2);
  background: var(--bg-3);
}
.q-choice:has(input:checked) {
  border-color: var(--accent-line);
  background: var(--accent-soft);
}
.q-choice:has(input[type="radio"]:focus-visible, input[type="checkbox"]:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.q-choice input[type="radio"],
.q-choice input[type="checkbox"] {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: var(--accent);
  cursor: pointer;
}
.q-choice input[type="radio"]:focus-visible,
.q-choice input[type="checkbox"]:focus-visible {
  outline: none;
}
.q-body {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 2px;
}
.q-label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  font-size: 14.5px;
  font-weight: 520;
  line-height: 1.4;
  color: var(--text);
}
.q-rec {
  display: inline-flex;
  align-items: center;
  height: 19px;
  padding: 0 7px;
  border-radius: 999px;
  font: 600 11px/1 var(--sans);
  background: var(--mask-soft);
  color: var(--mask);
}
.q-desc {
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-3);
}
.q-other {
  cursor: default;
}
.q-other .q-label {
  cursor: pointer;
}
.q-other-text.input {
  height: 38px;
  margin-top: 6px;
  padding: 0 11px;
  font-size: 14px;
}
.q-textarea.input {
  display: block;
  width: calc(100% - 28px);
  height: 44px;
  min-height: 44px;
  margin: 10px 0 0 28px;
  padding: 10px 12px;
  resize: none;
  font-size: 14.5px;
  line-height: 1.45;
}
.qcard-defaults {
  margin: 2px 16px 0;
  padding: 10px 12px;
  border: 1px dashed var(--line-2);
  border-radius: 10px;
  background: var(--bg-2);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-2);
}
.qcard-defaults p {
  margin: 0;
}
.qcard-defaults b {
  font-weight: 600;
  color: var(--text);
}
.qcard-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  padding: 12px 16px 14px;
}
.qcard-status {
  flex: 1 1 180px;
  min-width: 0;
  font-size: 13px;
  color: var(--text-3);
}
.qcard-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}
.qcard-answers {
  display: grid;
  margin: 0;
  padding: 6px 16px 10px;
}
.qa {
  display: grid;
  gap: 2px;
  padding: 8px 0;
}
.qa + .qa {
  border-top: 1px dashed var(--line);
}
.qa dt {
  font-size: 13px;
  color: var(--text-3);
}
.qa dd {
  margin: 0;
  font-size: 14.5px;
  font-weight: 560;
  color: var(--text);
  white-space: pre-wrap;
  word-wrap: break-word;
}
.qa dd.none {
  font-weight: 400;
  font-style: italic;
  color: var(--text-3);
}
.qcard-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  padding: 10px 16px 12px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-2);
}
.qcard-note svg {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  color: var(--text-3);
}
.qcard-answers + .qcard-note {
  border-top: 1px solid var(--line);
}
.qcard[data-state="skipped"] .qcard-note,
.qcard[data-state="replaced"] .qcard-note {
  padding-top: 0;
}
.qcard-fold {
  padding: 0 16px 12px;
  font-size: 13.5px;
  color: var(--text-3);
}
.qcard-fold summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  list-style: none;
  cursor: pointer;
}
.qcard-fold summary::-webkit-details-marker {
  display: none;
}
.qcard-fold summary svg {
  width: 14px;
  height: 14px;
  transition: transform 0.15s;
}
.qcard-fold[open] summary svg {
  transform: rotate(90deg);
}
.qcard-fold ol {
  display: grid;
  gap: 3px;
  margin: 4px 0 0;
  padding-left: 22px;
  color: var(--text-2);
}
@media (max-width: 560px) {
  .qcard {
    margin-left: 0;
  }
  /* the board's own pill says it already */
  .qcard[data-state="open"] .qcard-head .pill,
  .qcard-when {
    display: none;
  }
  /* while questions are open the reply box keeps to one line until it is used: the form gets the room */
  .ws[data-asking] .reply .composer:not(:focus-within):has(textarea:placeholder-shown):has(.files:empty) textarea {
    height: 46px !important;
    min-height: 46px;
    padding-top: 12px;
    padding-bottom: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .ws[data-asking] .reply .composer:not(:focus-within):has(textarea:placeholder-shown):has(.files:empty) :is(.sketch-hint, .composer-opts) {
    display: none;
  }
  .q {
    padding: 12px 12px 13px;
  }
  .qcard-intro {
    padding: 12px 12px 2px;
  }
  .q-detail,
  .q-opts {
    margin-left: 0;
  }
  .q-textarea.input {
    width: 100%;
    margin-left: 0;
  }
  .qcard-defaults {
    margin: 2px 12px 0;
  }
  .qcard-foot {
    flex-direction: column;
    align-items: stretch;
    padding: 12px 12px 14px;
  }
  .qcard-status {
    flex: none;
  }
  .qcard-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
  .qcard-actions .btn {
    height: 44px;
  }
}

/* the agent's document window (static/js/documents.js): a question card's frame with what it needs, a drop zone, the
   files to upload with the document each is for, and what it found */
.dc-body {
  display: grid;
  gap: 14px;
  padding: 12px 16px 2px;
}
.dc-h {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  font-size: 12.5px;
  font-weight: 640;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-3);
}
.dc-h span {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 18px;
  padding: 0 5px;
  border-radius: 6px;
  font: 600 11px/1 var(--mono);
  letter-spacing: 0;
  background: var(--bg-3);
  color: var(--text-2);
}
.dc-needs,
.dc-found,
.dc-files {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.dc-need {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent-line);
  border-radius: 10px;
  background: var(--bg-2);
}
.dc-need.covered {
  border-left-color: var(--mask);
}
.dc-need-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  font-size: 14.5px;
  line-height: 1.4;
}
.dc-kind {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  font: 600 11px/1 var(--sans);
  background: var(--accent-soft);
  color: var(--accent);
}
.dc-mpn {
  font-family: var(--mono);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  word-break: break-all;
}
.dc-refs {
  font-size: 12.5px;
  color: var(--text-3);
}
.dc-got {
  margin-left: auto;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--mask);
}
.dc-got:empty {
  display: none;
}
.dc-why,
.dc-tried {
  margin: 4px 0 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-2);
}
.dc-tried {
  color: var(--text-3);
}
.dc-tried span {
  font-weight: 600;
}
.dc-drop {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 18px 14px;
  border: 1.5px dashed var(--line-2);
  border-radius: 12px;
  background: var(--bg-2);
  text-align: center;
  transition: border-color 0.15s, background 0.15s;
}
.dc-drop.over {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.dc-drop-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--bg-3);
  color: var(--text-2);
}
.dc-drop-icon svg {
  width: 18px;
  height: 18px;
  transform: rotate(180deg);
}
.dc-drop p {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0;
  font-size: 14.5px;
  color: var(--text-2);
}
.dc-drop b {
  color: var(--text);
  font-weight: 600;
}
.dc-drop small {
  max-width: 46ch;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-3);
}
.dc-files:empty {
  display: none;
}
.dc-file {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  padding: 8px 8px 8px 12px;
  border: 1px solid var(--accent-line);
  border-radius: 10px;
  background: var(--accent-soft);
}
.dc-file-name {
  flex: 1 1 180px;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--text);
}
.dc-file-name svg {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--accent);
}
.dc-file-name span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dc-file-name small {
  flex: none;
  font-size: 12px;
  color: var(--text-3);
}
.dc-assign {
  flex: 1 1 220px;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-3);
}
.dc-assign select.input {
  flex: 1;
  min-width: 0;
  height: 36px;
  padding: 0 8px;
  font-size: 13.5px;
}
.dc-rm {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
}
.dc-rm:hover {
  background: var(--bg-3);
  color: var(--err);
}
.dc-rm svg {
  width: 15px;
  height: 15px;
}
.dc-found-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-1);
}
.dc-found-main {
  flex: 1 1 240px;
  min-width: 0;
  display: grid;
  gap: 3px;
}
.dc-found-title {
  font-size: 14.5px;
  font-weight: 560;
  line-height: 1.4;
  color: var(--text);
  overflow-wrap: anywhere;
}
.dc-found-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  font-size: 12.5px;
  color: var(--text-3);
}
.dc-found-meta > * + *::before {
  content: "·";
  margin-right: 10px;
}
.dc-src {
  color: var(--text-2);
}
.dc-path {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-3);
  overflow-wrap: anywhere;
}
/* touch screens drop no files: the button says it all */
@media (hover: none) {
  .dc-drop-text {
    display: none;
  }
}
.dc-issue {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 2px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--warn);
}
.dc-issue svg,
.dc-missing svg {
  flex: none;
  width: 14px;
  height: 14px;
  margin-top: 2px;
}
.dc-found-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.dc-found-actions .btn svg {
  width: 15px;
  height: 15px;
}
.dc-missing {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-3);
}
.dcard .qcard-answers a {
  color: var(--accent);
  word-break: break-all;
}
.dc-fold .dc-found {
  margin-top: 8px;
}
@media (max-width: 560px) {
  .dc-body {
    padding: 12px 12px 2px;
  }
  .dc-drop {
    padding: 14px 12px;
  }
  .dc-drop p .btn {
    min-height: 44px;
  }
  .dc-assign select.input,
  .dc-rm {
    height: 44px;
  }
  .dc-rm {
    width: 44px;
  }
  .dc-found-actions {
    width: 100%;
  }
  .dc-found-actions .btn {
    flex: 1;
    justify-content: center;
    height: 44px;
  }
}

.reply {
  border-top: 1px solid var(--line);
  padding: 12px 16px 14px;
  background: var(--bg-1);
}
.reply .composer {
  box-shadow: none;
  border-radius: 14px;
}
.reply .composer textarea {
  min-height: 52px;
  font-size: 15px;
  padding: 11px 12px 4px;
}
.reply .composer-bar {
  border-top: 0;
  padding: 4px 6px 6px;
}
.reply-state {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: var(--text-2);
  padding: 2px 4px 10px;
}
/* the tab bar fits the board pane (not the window): tighter, then without icons, then smaller text, and as the
   last resort a second row - never a tab cut off at the pane's edge */
.tabs {
  container-type: inline-size;
  background: var(--bg);
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 10px 16px 0;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
  min-height: 64px;
  align-items: flex-end;
}
.tabs::-webkit-scrollbar {
  display: none;
}
@media (max-width: 400px) {
  .tabs {
    padding-inline: 10px;
  }
}
.tab {
  --pad: 12px;
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 40px;
  padding: 0 var(--pad);
  border: 0;
  background: none;
  color: var(--text-3);
  font-size: 14px;
  font-weight: 560;
  cursor: pointer;
  white-space: nowrap;
}
.tab svg {
  flex: none;
  width: 16px;
  height: 16px;
}
.tab .count:empty {
  display: none;
}
@container (max-width: 560px) {
  .tab {
    --pad: 8px;
    gap: 5px;
  }
}
@container (max-width: 500px) {
  .tab svg {
    display: none;
  }
}
@container (max-width: 400px) {
  .tab {
    --pad: 4px;
    gap: 4px;
    font-size: 13px;
  }
}
.tab:hover {
  color: var(--text);
}
.tab[aria-selected="true"] {
  color: var(--text);
}
.tab[aria-selected="true"]::after {
  content: "";
  position: absolute;
  left: calc(var(--pad) - 4px);
  right: calc(var(--pad) - 4px);
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
}
.tab .count {
  font: 600 11px var(--mono);
  color: var(--text-3);
}
.panel {
  flex: 1;
  min-height: 0;
  overflow: auto;
  position: relative;
}
.panel-pad {
  padding: 20px;
}
.viewer3d {
  position: absolute;
  inset: 0;
  background: radial-gradient(80% 80% at 50% 45%, var(--bg-2), var(--bg) 80%);
}
.viewer3d canvas {
  width: 100% !important;
  height: 100% !important;
  touch-action: none;
}
.viewer-hud {
  position: absolute;
  left: 16px;
  bottom: 16px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.viewer-hud .btn {
  /* solid: a backdrop blur over the WebGL canvas costs a read-back of every frame */
  background: var(--bg-1);
}

.viewer-poster {
  position: absolute;
  inset: 0;
  display: grid;
  justify-items: center;
  align-items: end;
  padding: 16px 16px 20px;
}
.viewer-poster img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  padding: 20px 20px 72px;
}
.viewer-poster .btn {
  position: relative;
}
.viewer-lost {
  z-index: 1;
  background: color-mix(in srgb, var(--bg) 90%, transparent);
}
.viewer-lost .btn {
  margin-top: 4px;
}
.viewer-hint {
  position: absolute;
  right: 16px;
  bottom: 18px;
  font-size: 12px;
  color: var(--text-3);
  pointer-events: none; /* text only: touches and clicks go through to the view */
}
@media (max-width: 640px) {
  /* narrow: the hint goes to the top so it does not run into the view buttons (after the rule above: with it before,
     `bottom` stayed and the hint stretched over the whole view, taking its touches) */
  .viewer-hint {
    top: 12px;
    bottom: auto;
    left: 16px;
    right: 16px;
    text-align: center;
  }
}

/* ---------- 3D view: part markers, part card, legend (static/js/parts3d.js). Solid backgrounds only: a backdrop blur
   over the WebGL canvas costs a read-back of every frame. */
.viewer3d canvas.p3-pointer {
  cursor: pointer;
}
.viewer-hud,
.viewer-hint {
  z-index: 5;
}
.p3-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}
.p3-mk {
  position: absolute;
  left: 0;
  top: 0;
  margin: -11px 0 0 -11px; /* the badge's centre on the anchor */
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  font: 600 11.5px/1.2 var(--sans);
  cursor: pointer;
  pointer-events: auto;
  transform: translate3d(-200px, -200px, 0);
  transition: opacity 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.p3-mk b {
  flex: none;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--mask);
  color: #04150e;
  font: 700 11px/1 var(--mono);
  box-shadow: 0 0 0 2px var(--bg-1), 0 3px 10px rgb(0 0 0 / 0.45);
}
.p3-mk.bottom b {
  background: var(--copper);
  color: var(--copper-ink);
}
.p3-mk-name {
  padding: 3px 7px;
  border: 1px solid var(--line-2);
  border-radius: 6px;
  background: var(--bg-1);
  white-space: nowrap;
  box-shadow: 0 3px 10px rgb(0 0 0 / 0.25);
}
.p3-mk.is-short .p3-mk-name {
  display: none;
}
.p3-mk.is-off {
  opacity: 0;
  pointer-events: none;
}
.p3-mk-what {
  display: none;
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  width: max-content;
  max-width: 260px;
  padding: 8px 10px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-s);
  background: var(--bg-1);
  color: var(--text-2);
  font: 450 12.5px/1.45 var(--sans);
  text-align: left;
  white-space: normal;
  box-shadow: var(--shadow-lg);
}
.p3-mk:hover,
.p3-mk:focus-visible,
.p3-mk.is-hot {
  z-index: 3;
}
.p3-mk:hover .p3-mk-what,
.p3-mk:focus-visible .p3-mk-what {
  display: block;
}
.p3-mk:hover .p3-mk-name,
.p3-mk:focus-visible .p3-mk-name {
  display: block;
}
.p3-mk:focus-visible {
  outline: none;
}
.p3-mk:focus-visible b,
.p3-mk.is-hot b,
.p3-mk.is-sel b {
  box-shadow: 0 0 0 2px var(--bg-1), 0 0 0 4px var(--text), 0 3px 10px rgb(0 0 0 / 0.45);
}
.p3-narrow .p3-mk-what {
  max-width: 200px;
}
.p3-tag {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  padding: 3px 8px;
  border: 1px solid var(--line-2);
  border-radius: 6px;
  background: var(--bg-1);
  color: var(--text);
  font: 600 12px/1.3 var(--mono);
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 3px 10px rgb(0 0 0 / 0.3);
}
.p3-hud-btn[aria-pressed="false"] {
  color: var(--text-3);
}
.p3-hud-btn .p3-count {
  margin-left: 2px;
  font: 600 11px var(--mono);
  color: var(--text-3);
}
.p3-hud-btn[aria-expanded="true"] {
  border-color: var(--accent-line);
}

/* the card of the selected part and the legend: panels over the view (desktop), sheets above the buttons (narrow) */
.p3-card,
.p3-legend {
  position: absolute;
  top: 16px;
  z-index: 4;
  max-height: calc(100% - 84px);
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  background: var(--bg-1);
  box-shadow: var(--shadow-lg);
  font-size: 13px;
}
.p3-card {
  left: 16px;
  width: min(360px, calc(100% - 32px));
  border-top: 3px solid var(--mask);
}
.p3-card.bottom {
  border-top-color: var(--copper);
}
.p3-legend {
  right: 16px;
  width: min(300px, calc(100% - 32px));
}
/* below the live view's "Replay routing" button in the same corner */
.panel:has(.live-replay-corner) .p3-legend {
  top: 60px;
  max-height: calc(100% - 128px);
}
.p3-narrow .p3-card,
.p3-narrow .p3-legend {
  top: auto;
  left: 8px;
  right: 8px;
  bottom: 58px;
  width: auto;
  max-height: min(58%, 420px);
  border-radius: 14px;
}
.p3-head,
.p3-legend-head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 10px 8px 14px;
  background: var(--bg-1);
}
.p3-head h3,
.p3-legend-head h3 {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 15px;
  letter-spacing: -0.01em;
  outline: none;
}
.p3-legend-head h3 {
  font-size: 14px;
}
.p3-src {
  color: var(--text-3);
  font-size: 11.5px;
}
.p3-ref {
  font-family: var(--mono);
  font-weight: 700;
}
.p3-val {
  color: var(--text-2);
  font-weight: 560;
}
.p3-nav {
  display: inline-flex;
  gap: 2px;
}
.p3-icon,
.p3-x {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 7px;
  background: none;
  color: var(--text-2);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.p3-icon:hover:not(:disabled),
.p3-x:hover {
  background: var(--bg-3);
  color: var(--text);
}
.p3-icon:disabled {
  opacity: 0.35;
  cursor: default;
}
.p3-badge {
  flex: none;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--mask);
  color: #04150e;
  font: 700 11px/1 var(--mono);
}
.p3-badge.bottom {
  background: var(--copper);
  color: var(--copper-ink);
}
.p3-body {
  padding: 0 14px 14px;
}
.p3-meta {
  margin: 0 0 10px;
  color: var(--text-3);
  font-size: 12.5px;
}
.p3-dnp {
  color: var(--warn);
}
.p3-what {
  margin: 0 0 8px;
  color: var(--text-2);
  line-height: 1.5;
}
.p3-group {
  display: flex;
  gap: 9px;
  width: 100%;
  margin: 0 0 12px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--bg-2);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.p3-group:hover,
.p3-group.is-hot {
  border-color: var(--line-2);
}
.p3-group b {
  flex: none;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--mask);
  color: #04150e;
  font: 700 10.5px/1 var(--mono);
}
.p3-group.bottom b {
  background: var(--copper);
  color: var(--copper-ink);
}
.p3-group-name {
  display: block;
  font-weight: 600;
}
.p3-group-what {
  display: block;
  margin-top: 2px;
  color: var(--text-2);
  line-height: 1.45;
}
.p3-facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  margin: 0 0 12px;
}
.p3-facts dt {
  color: var(--text-3);
}
.p3-facts dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}
.p3-facts .p3-desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  color: var(--text-2);
}
.p3-explain:empty {
  display: none;
}
.p3-explain {
  margin: 0 0 14px;
}
.p3-ex-text {
  margin: 0;
  padding: 10px 12px;
  border-left: 2px solid var(--accent-line);
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
  background: var(--accent-soft);
  line-height: 1.55;
}
.p3-ex-foot {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin: 6px 0 0;
  color: var(--text-3);
  font-size: 12px;
}
.p3-ex-wait {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--text-2);
}
.p3-ex-wait .spinner {
  width: 14px;
  height: 14px;
}
.p3-ex-err {
  margin: 6px 0 0;
  color: var(--err);
  font-size: 12.5px;
}
.p3-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent-2);
  font: inherit;
  font-weight: 560;
  cursor: pointer;
}
.p3-link:hover {
  text-decoration: underline;
}
.p3-sub {
  margin: 0 0 6px;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.p3-nets {
  margin: 0;
  padding: 0;
  list-style: none;
}
.p3-net-row {
  padding: 7px 0;
  border-top: 1px solid var(--line);
}
.p3-net-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px 8px;
  margin-bottom: 5px;
}
summary.p3-net-head {
  margin-bottom: 0;
  cursor: pointer;
  list-style: none;
}
summary.p3-net-head::-webkit-details-marker {
  display: none;
}
summary.p3-net-head::before {
  content: "▸";
  color: var(--text-3);
  font-size: 11px;
}
details[open] > summary.p3-net-head {
  margin-bottom: 5px;
}
details[open] > summary.p3-net-head::before {
  content: "▾";
}
.p3-net {
  font: 650 12.5px var(--mono);
}
.p3-pins {
  color: var(--text-3);
  font: 11.5px var(--mono);
}
.p3-count {
  color: var(--text-2);
  font-size: 12px;
}
.p3-muted {
  margin: 0;
  color: var(--text-3);
  font-size: 12px;
}
.p3-net.p3-muted {
  font-weight: 500;
}
.p3-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.p3-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 26px;
  padding: 2px 8px 2px 6px;
  border: 1px solid var(--line-2);
  border-radius: 6px;
  background: var(--bg-2);
  color: var(--text);
  font: 12px var(--sans);
  cursor: pointer;
}
.p3-chip::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mask);
}
.p3-chip.bottom::before {
  background: var(--copper);
}
.p3-chip b {
  font: 650 11.5px var(--mono);
}
.p3-chip span {
  color: var(--text-2);
}
.p3-chip:hover {
  border-color: var(--text-3);
  background: var(--bg-3);
}
.p3-list {
  margin: 0;
  padding: 0 6px 8px;
  list-style: none;
}
.p3-item {
  display: flex;
  gap: 9px;
  width: 100%;
  padding: 8px;
  border: 1px solid transparent;
  border-radius: var(--radius-s);
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.p3-item:hover,
.p3-item.is-hot {
  background: var(--bg-2);
  border-color: var(--line);
}
.p3-item b {
  flex: none;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--mask);
  color: #04150e;
  font: 700 10.5px/1 var(--mono);
}
.p3-item.bottom b {
  background: var(--copper);
  color: var(--copper-ink);
}
.p3-item-main {
  min-width: 0;
}
.p3-item-name {
  display: block;
  font-weight: 600;
}
.p3-item-refs {
  display: block;
  color: var(--text-3);
  font: 11px var(--mono);
}
.p3-item-what {
  display: block;
  margin-top: 2px;
  color: var(--text-2);
  font-size: 12.5px;
  line-height: 1.45;
}
@media (pointer: coarse) {
  .p3-icon,
  .p3-x {
    width: 40px;
    height: 40px;
  }
  .p3-chip {
    min-height: 36px;
  }
  .p3-mk b {
    width: 26px;
    height: 26px;
  }
  .p3-mk {
    margin: -13px 0 0 -13px;
  }
}
/* the live view of a placement / routing run (static/js/live.js): a canvas, the status above, the layer chips below */
.live-view {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: radial-gradient(80% 80% at 50% 45%, var(--bg-2), var(--bg) 80%);
}
.live-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: pan-y;
}
.live-hud {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 14px 16px;
  pointer-events: none;
}
.live-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
}
.live-status {
  font-size: 13px;
  line-height: 1.35;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.live-bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
}
.live-layers {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  pointer-events: auto;
}
.live-layer {
  height: 26px;
  padding: 0 9px;
  font-size: 12.5px;
  background: var(--bg-1);
}
.live-layer[aria-pressed="false"] {
  color: var(--text-3);
}
.live-layer[aria-pressed="false"] .live-swatch {
  opacity: 0.25;
}
/* the layer colours of tools/copper_style.json (static/js/live.js STYLE) */
.live-swatch {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: rgb(222 64 52);
}
.live-swatch[data-layer="b"] {
  background: rgb(64 116 232);
}
.live-swatch[data-layer="in1"] {
  background: rgb(214 170 60);
}
.live-swatch[data-layer="in2"] {
  background: rgb(60 190 176);
}
.live-swatch[data-layer="in3"] {
  background: rgb(176 112 224);
}
.live-swatch[data-layer="in4"] {
  background: rgb(232 140 48);
}
.live-swatch[data-layer="in5"] {
  background: rgb(150 204 80);
}
.live-swatch[data-layer="in6"] {
  background: rgb(224 100 164);
}
.live-swatch[data-layer="in7"] {
  background: rgb(90 172 236);
}
.live-swatch[data-layer="in8"] {
  background: rgb(196 176 132);
}
.live-close {
  pointer-events: auto;
  background: var(--bg-1);
}
.live-replay {
  margin-top: 14px;
}
.live-replay-corner {
  position: absolute;
  top: 14px;
  right: 16px;
  z-index: 1;
}
.live-replay-corner .live-replay {
  margin: 0;
  background: var(--bg-1);
}
@media (max-width: 640px) {
  .live-replay-corner {
    top: 40px;
  }
}
/* the 3D tab while a run is shown live and another tab is open */
.tab-live:not([aria-selected="true"])::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  animation: pulse 1.4s ease-in-out infinite;
}
.panel-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 32px;
}
.panel-empty > div {
  max-width: 360px;
}
.panel-empty svg {
  width: 84px;
  margin: 0 auto 16px;
  color: var(--text-3);
}
.panel-empty h3 {
  font-size: 1.05rem;
  margin-bottom: 6px;
}
.panel-empty p {
  color: var(--text-2);
  font-size: 14.5px;
}
.render-img {
  margin: 0 auto;
  max-height: calc(100vh - 220px);
  object-fit: contain;
  border-radius: 10px;
}
.render-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.render-grid figure {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg-1);
}
.render-grid img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: contain;
  background: var(--bg-2);
  cursor: zoom-in;
}
.render-grid figcaption {
  padding: 8px 12px;
  font-size: 13px;
  color: var(--text-2);
  border-top: 1px solid var(--line);
}
.pdf-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.table th {
  text-align: left;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}
.table td {
  padding: 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.table td:first-child:has(.pill) {
  width: 1%;
  white-space: nowrap;
}
.table tr:last-child td {
  border-bottom: 0;
}
.table .mono {
  font-size: 12.5px;
  color: var(--text-2);
}
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-1);
}
.gate-banner {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 16px 18px;
  border-radius: var(--radius);
  margin-bottom: 16px;
  border: 1px solid var(--line);
  background: var(--bg-1);
}
.gate-banner svg {
  width: 26px;
  height: 26px;
  flex: none;
}
.gate-banner.ok {
  background: var(--mask-soft);
  border-color: transparent;
}
.gate-banner.ok svg {
  color: var(--mask);
}
.gate-banner.err {
  background: var(--warn-soft);
  border-color: transparent;
}
.gate-banner.err svg {
  color: var(--warn);
}
.gate-banner b {
  display: block;
}
.gate-banner span {
  font-size: 14px;
  color: var(--text-2);
}
.files-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-1);
  overflow: hidden;
}
.files-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}
.files-list li:last-child {
  border-bottom: 0;
}
.files-list .fi {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: var(--bg-3);
  color: var(--text-2);
  flex: none;
}
.files-list .fi svg {
  width: 17px;
  height: 17px;
}
.files-list .fn {
  min-width: 0;
  flex: 1;
}
.files-list .fn b {
  display: block;
  font-weight: 560;
  font-size: 14.5px;
}
.files-list .fn span {
  font: 12px var(--mono);
  color: var(--text-3);
}
.files-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.mobile-switch {
  display: none;
}
@media (max-width: 980px) {
  .ws {
    grid-template-columns: minmax(0, 1fr);
    height: auto;
    min-height: calc(100vh - var(--header-h));
  }
  .ws-left,
  .ws-right {
    border-right: 0;
    height: calc(100vh - var(--header-h) - 52px);
  }
  .ws[data-pane="board"] .ws-left,
  .ws[data-pane="chat"] .ws-right {
    display: none;
  }
  .mobile-switch {
    display: flex;
    position: sticky;
    top: var(--header-h);
    z-index: 20;
    padding: 8px var(--gutter);
    gap: 6px;
    background: var(--bg-1);
    border-bottom: 1px solid var(--line);
  }
  .mobile-switch button {
    flex: 1;
  }
  .mobile-switch button[aria-pressed="true"] {
    --b-bg: var(--bg-3);
    --b-line: var(--line-2);
  }
}

/* share page */
.share-head {
  padding: 40px 0 24px;
}
.share-head h1 {
  font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.6rem);
  letter-spacing: -0.035em;
  margin: 14px 0 10px;
}
.share-head p {
  color: var(--text-2);
  max-width: 720px;
}
.share-viewer {
  position: relative;
  height: min(70vh, 620px);
  border-radius: var(--radius-l);
  overflow: hidden;
  border: 1px solid var(--line);
}
@media (max-width: 640px) {
  .share-viewer {
    height: min(58vh, 460px);
  }
}
.share-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 24px;
  margin-top: 24px;
}
@media (max-width: 900px) {
  .share-grid {
    grid-template-columns: 1fr;
  }
}
/* share page: the owner's request (plain text), its sketches, the follow-up instructions */
.share-request {
  margin-top: 24px;
  padding: 24px 28px;
  border-radius: var(--radius-l);
}
.req-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-bottom: 16px;
}
.req-head h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
}
.req-icon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  color: var(--accent);
  flex: none;
}
.req-icon svg {
  width: 17px;
  height: 17px;
}
.req-head time,
.req-msg-head time {
  font: 500 12.5px/1.4 var(--mono);
  color: var(--text-3);
}
.req-main {
  display: grid;
  gap: 18px;
}
.req-main.has-sketches {
  grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
  align-items: start;
}
.req-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--text);
}
.req-main .req-text {
  padding-left: 16px;
  border-left: 3px solid var(--accent-line);
  font-size: 16.5px;
  line-height: 1.6;
}
.req-text-wrap.is-clamped {
  max-height: 300px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent);
  mask-image: linear-gradient(to bottom, #000 70%, transparent);
}
.req-more {
  justify-self: start;
  margin: -8px 0 0 6px;
}
.req-sketches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}
.req-main > .req-sketches {
  grid-template-columns: 1fr;
}
.req-main > .req-sketches:has(> :nth-child(2)) {
  grid-template-columns: 1fr 1fr;
}
.req-sketch {
  display: block;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  overflow: hidden;
  /* sketches are dark strokes on white paper, in both themes */
  background: #fff;
  cursor: zoom-in;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.req-sketch:hover,
.req-sketch:focus-visible {
  border-color: var(--accent-line);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.req-sketch img {
  display: block;
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: contain;
}
.req-files {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}
.req-followups {
  margin-top: 20px;
  border-top: 1px solid var(--line);
}
.req-followups > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 0 2px;
  font-weight: 580;
  color: var(--text-2);
}
.req-followups > summary:hover {
  color: var(--text);
}
.req-followups > summary::-webkit-details-marker {
  display: none;
}
.req-followups > summary .count {
  font: 600 12px/1 var(--mono);
  padding: 4px 7px;
  border-radius: 6px;
  background: var(--bg-3);
  color: var(--text-2);
}
.req-followups > summary svg {
  width: 16px;
  height: 16px;
  margin-left: auto;
  color: var(--text-3);
  transition: transform 0.2s;
}
.req-followups[open] > summary svg {
  transform: rotate(180deg);
}
.req-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}
.req-msg {
  position: relative;
  padding: 14px 0 14px 22px;
  border-left: 1px solid var(--line-2);
  margin-left: 6px;
}
.req-msg::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 19px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--bg-1);
  border: 2px solid var(--accent-line);
}
.req-msg:last-child {
  border-left-color: transparent;
}
.req-msg-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-bottom: 6px;
}
.req-tag {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--info-soft);
  color: var(--info);
}
.req-msg .req-text {
  font-size: 15px;
  line-height: 1.55;
}
.req-msg .req-sketches {
  margin-top: 10px;
  max-width: 520px;
}
@media (max-width: 760px) {
  .share-request {
    padding: 20px 18px;
  }
  .req-main.has-sketches {
    grid-template-columns: 1fr;
  }
  .req-main .req-text {
    font-size: 15.5px;
    padding-left: 12px;
  }
}
/* an enlarged sketch */
.modal-card.modal-zoom {
  max-width: min(1100px, calc(100vw - 32px));
  width: auto;
  padding: 16px;
}
.zoom-fig {
  margin: 0;
}
.zoom-fig img {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 140px);
  margin: 28px auto 0;
  background: #fff;
  border-radius: 8px;
  border: 1px solid var(--line);
}
.zoom-fig figcaption {
  margin-top: 10px;
  font-size: 13px;
  color: var(--text-3);
  text-align: center;
}
.zoom-fig figcaption a {
  color: var(--accent);
}
.share-link {
  display: flex;
  gap: 8px;
}
.checkbox.share-opt {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 18px 0 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-2);
}
.share-opt input {
  flex: none;
  margin-top: 3px;
}
.share-opt b {
  display: block;
  color: var(--text);
  font-weight: 580;
}
.share-opt small {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-3);
}
.share-link .input {
  font: 13px var(--mono);
}

/* account / admin */
.stack {
  display: grid;
  gap: 16px;
  max-width: 760px;
}
.panel-card {
  padding: 24px;
}
.panel-card h2 {
  font-size: 1.1rem;
  margin-bottom: 4px;
}
.panel-card > p {
  color: var(--text-2);
  font-size: 14.5px;
  margin-bottom: 18px;
}
.row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.kv {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 8px 16px;
  font-size: 14.5px;
}
.kv dt {
  color: var(--text-3);
}
.kv dd {
  margin: 0;
}
.danger-zone {
  border-color: color-mix(in srgb, var(--err) 30%, var(--line));
}
.admin-section {
  margin-bottom: 32px;
}
.admin-section h2 {
  font-size: 1.15rem;
  margin-bottom: 12px;
}
/* admin: the design agent's model (views/app.ts agentModelSection) */
.model-now {
  display: grid;
  gap: 2px;
  padding: 12px 14px;
  margin-bottom: 16px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--mask);
  border-radius: var(--radius-s);
  background: var(--bg-2);
  font-size: 14.5px;
}
.model-now.is-broken {
  border-color: color-mix(in srgb, var(--err) 35%, var(--line));
  border-left-color: var(--err);
  background: var(--err-soft);
}
.model-now-k {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-3);
}
.model-now.is-broken .model-now-k {
  color: var(--err);
}
.model-now-k svg {
  width: 14px;
  height: 14px;
}
.model-now-v {
  color: var(--text);
  overflow-wrap: anywhere;
}
.model-now-s {
  color: var(--text-3);
  font-size: 13.5px;
}
.model-choices {
  display: grid;
  gap: 8px;
  margin: 0 0 14px;
  padding: 0;
  border: 0;
  min-width: 0;
}
.model-choice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 44px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-2);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.model-choice:hover {
  border-color: var(--line-2);
  background: var(--bg-3);
}
.model-choice:has(input:checked) {
  border-color: var(--accent-line);
  background: var(--accent-soft);
}
.model-choice:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.model-choice.is-off {
  cursor: default;
}
.model-choice.is-off:hover {
  border-color: var(--line);
  background: var(--bg-2);
}
.model-choice input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--accent);
  cursor: inherit;
}
.model-choice input:focus-visible {
  outline: none;
}
.model-body {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 3px;
}
.model-label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  font-size: 14.5px;
  font-weight: 560;
  color: var(--text);
}
.model-choice.is-off .model-label {
  color: var(--text-2);
}
.model-meta {
  font-size: 13.5px;
  color: var(--text-2);
  overflow-wrap: anywhere;
}
.model-why {
  font-size: 13.5px;
  color: var(--err);
  overflow-wrap: anywhere;
}
.model-notes-h {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-3);
}
.model-notes {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 3px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-2);
}
.model-scope {
  margin: 0 0 14px;
  font-size: 13.5px;
  color: var(--text-3);
}
.model-log {
  margin-top: 16px;
  font-size: 13.5px;
  color: var(--text-2);
}
.model-log summary {
  cursor: pointer;
  color: var(--text-2);
  min-height: 32px;
  display: flex;
  align-items: center;
}
.model-log ul {
  margin: 6px 0 0;
  padding-left: 18px;
  display: grid;
  gap: 4px;
  overflow-wrap: anywhere;
}
@media (max-width: 560px) {
  .model-choice {
    padding: 12px;
  }
}

/* legal */
.legal {
  max-width: 760px;
  padding: 48px 0;
}
.legal h1 {
  font-size: 2.1rem;
  letter-spacing: -0.03em;
  margin-bottom: 24px;
}
.legal h2 {
  font-size: 1.2rem;
  margin: 32px 0 10px;
}
.legal p,
.legal li {
  color: var(--text-2);
}
.legal p + p {
  margin-top: 12px;
}
.legal .todo {
  background: var(--warn-soft);
  color: var(--warn);
  padding: 1px 6px;
  border-radius: 5px;
  font-weight: 600;
}

/* connector: documentation page, consent screen */
.legal h3 {
  font-size: 1.02rem;
  margin: 22px 0 8px;
}
.legal ul {
  margin: 8px 0 12px;
  padding-left: 22px;
}
.legal li + li {
  margin-top: 4px;
}
.legal pre {
  margin: 10px 0 14px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-2);
  overflow-x: auto;
  font-size: 13px;
  line-height: 1.5;
}
.legal pre code {
  white-space: pre;
}
/* inline code in running text wraps (a SHA-256 or a setting's name is longer than a phone's width) */
.legal :not(pre) > code {
  overflow-wrap: anywhere;
}
.consent h1 {
  font-size: 1.4rem;
}
.consent-who span,
.consent-foot {
  color: var(--text-2);
  font-size: 13.5px;
}
.consent-h {
  font-size: 14px;
  color: var(--text-2);
  margin: 0 0 10px;
}
.consent-list {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.consent-list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 14px;
}
.consent-list li > svg {
  width: 17px;
  height: 17px;
  flex: none;
  margin-top: 2px;
  color: var(--accent);
}
.consent-list .checkbox {
  align-items: flex-start;
  color: var(--text);
}
.consent-list .checkbox input {
  margin-top: 2px;
  flex: none;
}
.consent-deny {
  margin-top: 10px;
}
.consent-foot {
  margin-top: 18px;
}
.muted-line {
  color: var(--text-2);
  font-size: 14px;
}
/* the download box of /docs/vscode: the button and its version on one line, centred on each other, no extra space above */
.legal .dl-card {
  margin: 20px 0 28px;
  padding: 20px 24px;
}
.legal .dl-card h2 {
  margin: 0 0 14px;
}
.dl-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
}
.legal .dl-card .dl-sha {
  margin: 14px 0 0;
}

/* error page */
.err-page {
  min-height: calc(100vh - var(--header-h) - 160px);
  display: grid;
  place-items: center;
  text-align: center;
  padding: 48px 16px;
}
.err-page svg {
  width: 180px;
  margin: 0 auto 20px;
}
.err-page h1 {
  font-size: 2rem;
  letter-spacing: -0.03em;
  margin-bottom: 10px;
}
.err-page p {
  color: var(--text-2);
  margin-bottom: 24px;
}
.err-code {
  font: 600 13px var(--mono);
  color: var(--accent);
  letter-spacing: 0.1em;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* svg paint utilities (presentation attributes cannot use var()) */
.f-cu {
  fill: var(--copper);
}
.f-bg {
  fill: var(--bg);
}
.f-bg2 {
  fill: var(--bg-2);
}
.f-t3 {
  fill: var(--text-3);
}
.f-board {
  fill: var(--board);
}
.s-cu {
  stroke: var(--copper);
}
.s-ink {
  stroke: var(--copper-ink);
}
.s-line2 {
  stroke: var(--line-2);
}
.s-err {
  stroke: var(--err);
}
.s-board {
  stroke: var(--board-edge);
}
.mt-12 {
  margin-top: 12px;
}
.mt-16 {
  margin-top: 16px;
}
.section-title {
  font-size: clamp(1.8rem, 1.2rem + 1.9vw, 2.75rem);
  letter-spacing: -0.03em;
  margin: 14px 0 0;
}
.preview-pane {
  display: grid;
  gap: 12px;
  justify-items: center;
  text-align: center;
  font-size: 13.5px;
}
.preview-pane img {
  background: #0b0f0d;
  border: 1px solid var(--line);
}
/* a save in the browser editor, in the chat: what changed, Reset / inspect */
.notice.edit {
  border-color: var(--accent);
  color: var(--text);
}
.notice.edit > svg {
  color: var(--accent);
}
.notice.edit.done {
  border-color: var(--line);
  color: var(--text-2);
}
.edit-body {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
}
.edit-body code {
  font-size: 12.5px;
  overflow-wrap: anywhere;
}
.edit-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.edit-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}
.edit-state svg {
  width: 15px;
  height: 15px;
}
/* account: SSH keys */
.key-list {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.key-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.key-list li > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.key-list code {
  font-size: 12px;
  overflow-wrap: anywhere;
}
.key-list span {
  font-size: 12.5px;
  color: var(--text-2);
}
textarea.mono {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12.5px;
}
/* ---------- versions: the header's menu and Clone box, chips in the chat, the board pane's banner, Compare */

/* the popovers hang under the conversation's header, at its right edge (the header is their containing block) */
.ws-head {
  position: relative;
  z-index: 30;
}
.vmenu-btn,
.clone-btn {
  gap: 6px;
  padding: 0 9px;
}
.vmenu-btn svg,
.clone-btn svg {
  width: 15px;
  height: 15px;
}
.vmenu-btn .vmenu-chev {
  width: 13px;
  height: 13px;
  margin-right: -2px;
  color: var(--text-3);
}
.vmenu-label {
  font-variant-numeric: tabular-nums;
}
.vl-x {
  color: var(--text-2);
  font-weight: 500;
}
/* an old version on show: the button says so in the accent colour */
.vmenu-btn.is-old {
  --b-line: var(--accent-line);
  --b-bg: var(--accent-soft);
  color: var(--accent);
}
.vmenu-btn.is-old .vl-x {
  color: inherit;
}
.vmenu-pop,
.clone-pop {
  position: absolute;
  z-index: 60;
  top: calc(100% - 6px);
  right: 12px;
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  animation: rise 0.14s ease-out;
}
.vmenu-pop {
  width: min(400px, calc(100vw - 24px));
  max-height: min(440px, calc(100vh - var(--header-h) - 90px));
  overflow-y: auto;
  padding: 6px;
  outline: none;
}
.vmenu-head {
  padding: 8px 10px 6px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
}
.vmenu-opt {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  padding: 8px 10px;
  border-radius: 9px;
  cursor: pointer;
}
.vmenu-opt:hover,
.vmenu-opt.is-focus {
  background: var(--bg-3);
}
.vmenu-pop:focus-visible .vmenu-opt.is-focus {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.vmenu-opt.is-cur .vmenu-n {
  color: var(--accent);
}
.vmenu-opt.is-cur {
  background: var(--accent-soft);
}
.vmenu-n {
  font: 600 13px/1.5 var(--mono);
  color: var(--text-2);
}
.vmenu-main {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.vmenu-main b {
  font-size: 13.5px;
  font-weight: 560;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vmenu-main span {
  font-size: 12px;
  color: var(--text-2);
}
.vmenu-tag {
  font-style: normal;
  color: var(--mask);
  font-weight: 600;
}
.clone-pop {
  width: min(460px, calc(100vw - 24px));
  padding: 16px 16px 14px;
}
.clone-pop h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
  font-size: 15px;
}
.clone-pop h3 svg {
  width: 17px;
  height: 17px;
  color: var(--accent);
}
.clone-pop p {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--text-2);
}
.clone-k {
  display: block;
  margin: 0 0 4px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
}
.clone-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 10px;
  padding: 4px 4px 4px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg-2);
}
.clone-row code {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: thin;
}
.clone-row .icon-btn {
  flex: none;
  width: 34px;
  height: 34px;
}
.clone-row .icon-btn.is-copied {
  color: var(--mask);
  background: var(--mask-soft);
}
.clone-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

/* a version chip at the end of a run (smaller under a browser edit, a restore or a run that changed nothing); the
   row's height is fixed, so filling it in never moves the chat */
.vchip-row {
  display: flex;
  min-height: 30px;
  margin: -8px 0 18px;
}
.vchip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  height: 30px;
  padding: 0 11px 0 9px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--bg-1);
  color: var(--text-2);
  font-size: 12.5px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.vchip svg {
  width: 14px;
  height: 14px;
  flex: none;
  color: var(--text-3);
}
.vchip:hover {
  border-color: var(--accent-line);
  color: var(--text);
}
.vchip-n {
  font: 600 12.5px/1 var(--mono);
  color: var(--text);
}
.vchip-meta {
  overflow: hidden;
  text-overflow: ellipsis;
}
.vchip-meta + .vchip-meta::before {
  content: "\00b7";
  margin-right: 7px;
  color: var(--text-3);
}
.vchip.small {
  height: 26px;
  font-size: 12px;
  padding: 0 10px 0 8px;
}
.vchip-row.small {
  min-height: 26px;
}
.vchip.is-on {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.vchip.is-on svg,
.vchip.is-on .vchip-n {
  color: var(--accent);
}
.vchip.is-pending {
  cursor: default;
  border-style: dashed;
}
.notice.restore svg {
  color: var(--accent);
}

/* the board pane while an old version is on show */
.vbanner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 14px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--accent-line);
  background: var(--accent-soft);
}
.vb-main {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  min-width: 0;
  flex: 1 1 260px;
}
.vb-main > svg {
  width: 18px;
  height: 18px;
  flex: none;
  margin-top: 2px;
  color: var(--accent);
}
.vb-text {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.45;
  min-width: 0;
}
.vb-text span {
  color: var(--text-2);
  overflow-wrap: anywhere;
}
.vb-new {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 2px;
  color: var(--text) !important;
  font-weight: 560;
}
.vb-new svg {
  width: 14px;
  height: 14px;
  color: var(--info);
}
.vb-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.vb-short {
  display: none;
}
.vb-actions [aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
}
.v3d-aside {
  position: absolute;
  inset: 0;
  overflow: auto;
}
.v3d-aside > .panel-empty {
  height: 100%;
}
.files-ver {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  font-size: 13.5px;
  color: var(--text-2);
}
.files-ver svg {
  width: 16px;
  height: 16px;
  color: var(--accent);
  flex: none;
}
.reply-ver {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.reply-ver svg {
  width: 14px;
  height: 14px;
  flex: none;
  color: var(--accent);
}

/* Compare: a before / after slider over two versions' renders */
.modal-card.modal-compare {
  max-width: min(880px, calc(100vw - 32px));
  padding: 22px 24px 24px;
}
.cmp-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 40px 14px 0 !important;
}
.cmp-title svg {
  width: 22px;
  height: 22px;
  color: var(--accent);
}
.cmp-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.seg-btn {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 11px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 560;
  cursor: pointer;
  white-space: nowrap;
}
.seg-btn[aria-pressed="true"] {
  background: var(--bg-1);
  color: var(--text);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.25);
}
.cmp-legend {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-2);
}
.cmp-legend b {
  color: var(--text);
  font-family: var(--mono);
  font-size: 12.5px;
  margin-right: 4px;
}
.cmp-key {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  margin-right: 6px;
  vertical-align: -1px;
}
.cmp-key.a,
.cmp-tag-a {
  background: var(--info);
}
.cmp-key.b,
.cmp-tag-b {
  background: var(--accent);
}
.cmp-stage {
  position: relative;
  aspect-ratio: 4 / 3;
  max-height: 58vh;
  max-width: 100%;
  margin: 0 auto;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: radial-gradient(80% 80% at 50% 45%, var(--bg-2), var(--bg) 80%);
  overflow: hidden;
  user-select: none;
}
.cmp-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}
.cmp-after {
  position: absolute;
  inset: 0;
  clip-path: inset(0 0 0 50%);
}
.cmp-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  background: var(--accent);
  pointer-events: none;
}
.cmp-handle span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 2px 10px rgb(0 0 0 / 0.35);
}
.cmp-handle span::before,
.cmp-handle span::after {
  content: "";
  position: absolute;
  top: 10px;
  border: 5px solid transparent;
}
.cmp-handle span::before {
  left: 3px;
  border-right-color: var(--accent-ink);
}
.cmp-handle span::after {
  right: 3px;
  border-left-color: var(--accent-ink);
}
.cmp-tag {
  position: absolute;
  top: 10px;
  padding: 3px 8px;
  border-radius: 6px;
  font: 600 12px/1.3 var(--mono);
  color: #fff;
  pointer-events: none;
}
.cmp-tag-a {
  left: 10px;
}
.cmp-tag-b {
  right: 10px;
}
.cmp-single .cmp-tag {
  left: 10px;
  right: auto;
}
/* the slider itself: the whole picture is its track (drag anywhere; arrows, Home / End on the keyboard) */
.cmp-range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  touch-action: pan-y;
}
.cmp-stage:has(.cmp-range:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.cmp-none {
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--text-2);
  font-size: 14px;
}
.cmp-none svg {
  width: 28px;
  height: 28px;
  color: var(--text-3);
}
.cmp-note {
  margin: 8px 0 0;
  font-size: 12.5px;
  color: var(--text-2);
}
.cmp-numbers {
  margin-top: 16px;
}
.cmp-numbers .table td {
  padding: 8px 12px;
}
.cmp-numbers .table th {
  padding: 8px 12px;
}
.cmp-d {
  color: var(--text) !important;
  font-weight: 600;
}
.cmp-files {
  margin-top: 16px;
}
.cmp-files h3 {
  margin: 0 0 8px;
  font-size: 15px;
}
.cmp-group {
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-bottom: 8px;
  background: var(--bg-2);
}
.cmp-group summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  font-size: 13.5px;
  font-weight: 560;
  cursor: pointer;
}
.cmp-group summary .count {
  font: 600 11.5px var(--mono);
  color: var(--text-3);
}
.cmp-group ul {
  list-style: none;
  margin: 0;
  padding: 0 12px 10px;
  max-height: 260px;
  overflow-y: auto;
}
.cmp-group li {
  display: flex;
  gap: 8px;
  align-items: baseline;
  padding: 3px 0;
  font-size: 12px;
}
.cmp-group code {
  overflow-wrap: anywhere;
}
.cmp-s {
  flex: none;
  width: 14px;
  text-align: center;
  font: 700 12px var(--mono);
}
.cmp-s-A {
  color: var(--mask);
}
.cmp-s-M,
.cmp-s-T {
  color: var(--warn);
}
.cmp-s-D {
  color: var(--err);
}
.modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

@media (max-width: 560px) {
  /* the header keeps the title readable: "v6" and an icon for Clone */
  .vl-x,
  .clone-label {
    display: none;
  }
  /* the title gets the width: the status pill goes under it, the actions stay on the right */
  .ws-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "back title actions" "back status actions";
    column-gap: 8px;
    row-gap: 3px;
    padding: 10px 12px;
  }
  .ws-head .back {
    grid-area: back;
  }
  .ws-head h1 {
    grid-area: title;
  }
  .ws-head .ws-meta {
    grid-area: status;
  }
  .ws-head [data-status] {
    display: flex;
  }
  .ws-head .safety-badge {
    height: 20px;
    font-size: 11px;
  }
  .ws-head [data-status] .pill {
    height: 20px;
    font-size: 11px;
  }
  .ws-head .actions {
    grid-area: actions;
    gap: 2px;
  }
  .vmenu-btn > svg:first-child {
    display: none;
  }
  .vmenu-pop,
  .clone-pop {
    left: 10px;
    right: 10px;
    width: auto;
  }
  .vbanner {
    padding: 8px 12px 10px;
    gap: 6px;
  }
  .vb-what,
  .vb-long {
    display: none;
  }
  .vb-short {
    display: inline;
  }
  .vb-actions {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
  }
  .vb-actions .btn {
    height: 44px;
    padding: 0 8px;
  }
  .modal-card.modal-compare {
    padding: 18px 14px 18px;
  }
}

/* ---------- sketch tool: the composer's hint, sketch chips, the editor overlay (static/js/sketch.js) */

.sketch-hint[hidden] {
  display: none;
}
.sketch-hint {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 8px 8px;
  padding: 5px 5px 5px 11px;
  border: 1px dashed var(--line-2);
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.35;
  color: var(--text-3);
}
.sketch-hint > svg {
  width: 17px;
  height: 17px;
  flex: none;
  color: var(--accent);
}
.sketch-hint > span {
  flex: 1;
  min-width: 0;
}
.sketch-hint-short {
  display: none;
}
.sketch-hint-btn {
  flex: none;
  height: 28px;
  padding: 0 11px;
  border: 0;
  border-radius: 7px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.sketch-hint-btn:hover {
  background: color-mix(in srgb, var(--accent) 20%, transparent);
}
.reply .sketch-hint {
  margin: 0 6px 4px;
  padding-block: 3px;
}
@media (max-width: 560px) {
  .sketch-hint-long {
    display: none;
  }
  .sketch-hint-short {
    display: inline;
  }
  .sketch-hint > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.file-chip.sketch-chip {
  height: 38px;
  padding-left: 4px;
  max-width: 220px;
}
.sketch-chip img {
  flex: none;
  width: 46px;
  height: 30px;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 5px;
}
.file-chip .sketch-open {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 0;
  color: inherit;
  font: inherit;
}
.file-chip .sketch-open:hover {
  color: var(--text);
}
a.file-chip.sketch-chip {
  height: auto;
  padding: 4px 10px 4px 4px;
  text-decoration: none;
}
a.sketch-chip img {
  width: 96px;
  height: 64px;
}
a.file-chip.sketch-chip:hover {
  color: var(--text);
  background: var(--accent-soft);
}

.sk {
  /* the screen's drawing colours; the PNG always has white paper and dark strokes (sketch-core.js) */
  --sk-desk: #0b0e13;
  --sk-paper: #161b24;
  --sk-edge: #2e3847;
  --sk-grid: rgb(232 237 244 / 0.24);
  --sk-sel: var(--accent);
  --sk-board: #35c48d;
  --sk-dim: #8792a2;
  --sk-ink: #e8edf4;
  --sk-red: #ff7d74;
  --sk-blue: #7eadff;
  --sk-green: #4fd29a;
  --sk-orange: #f4a468;
  position: fixed;
  inset: 0;
  z-index: 85;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgb(5 7 10 / 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  overscroll-behavior: contain;
  animation: fade 0.15s ease-out;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .sk {
    --sk-desk: #ebe7de;
    --sk-paper: #ffffff;
    --sk-edge: #d6cfc1;
    --sk-grid: rgb(19 23 29 / 0.25);
    --sk-board: #177a51;
    --sk-dim: #6b7380;
    --sk-ink: #13171d;
    --sk-red: #c62828;
    --sk-blue: #1f5fd1;
    --sk-green: #13804f;
    --sk-orange: #c25e12;
  }
}
:root[data-theme="light"] .sk {
  --sk-desk: #ebe7de;
  --sk-paper: #ffffff;
  --sk-edge: #d6cfc1;
  --sk-grid: rgb(19 23 29 / 0.25);
  --sk-board: #177a51;
  --sk-dim: #6b7380;
  --sk-ink: #13171d;
  --sk-red: #c62828;
  --sk-blue: #1f5fd1;
  --sk-green: #13804f;
  --sk-orange: #c25e12;
}
.sk-card {
  width: min(1240px, calc(100vw - 48px));
  height: min(880px, calc(100vh - 48px));
  height: min(880px, calc(100dvh - 48px));
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  grid-template-areas: "head head" "tools props" "tools stage" "tools status";
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: rise 0.2s ease-out;
}
.sk-head {
  grid-area: head;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 14px 12px 20px;
  border-bottom: 1px solid var(--line);
}
.sk-title {
  flex: 1;
  min-width: 0;
}
.sk-title h2 {
  font-size: 1.12rem;
}
.sk-title p {
  margin-top: 2px;
  font-size: 13px;
  color: var(--text-3);
}
.sk-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}
.sk-actions .btn-primary {
  margin-left: 6px;
}
.sk-actions .icon-btn:disabled {
  opacity: 0.35;
  cursor: default;
  background: none;
}
.sk-x {
  display: none;
}
.sk-tools {
  grid-area: tools;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 8px;
  border-right: 1px solid var(--line);
  background: var(--bg-2);
}
.sk-props {
  grid-area: props;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
}
.sk-group {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--bg-3);
}
.sk-btn {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
}
.sk-btn svg {
  width: 20px;
  height: 20px;
}
.sk-btn:hover {
  background: var(--bg-3);
  color: var(--text);
}
.sk-btn[aria-pressed="true"] {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--accent);
}
.sk-btn:disabled {
  opacity: 0.35;
  cursor: default;
  background: none;
}
.sk-group .sk-btn {
  width: 32px;
  height: 30px;
  border-radius: 7px;
}
.sk-group .sk-btn[aria-pressed="true"] {
  background: var(--bg-1);
  border-color: transparent;
  color: var(--text);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.25);
}
.sk-wide {
  display: inline-flex;
  gap: 6px;
  width: auto;
  height: 34px;
  padding: 0 10px;
  font-size: 13px;
  font-weight: 560;
}
.sk-wide svg {
  width: 17px;
  height: 17px;
}
.sk-sw {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  cursor: pointer;
}
.sk-sw i {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgb(127 127 127 / 0.35);
}
.sk-sw[data-color="ink"] i {
  background: var(--sk-ink);
}
.sk-sw[data-color="red"] i {
  background: var(--sk-red);
}
.sk-sw[data-color="blue"] i {
  background: var(--sk-blue);
}
.sk-sw[data-color="green"] i {
  background: var(--sk-green);
}
.sk-sw[data-color="orange"] i {
  background: var(--sk-orange);
}
.sk-sw[aria-pressed="true"] {
  background: var(--bg-1);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.25);
}
.sk-sw[aria-pressed="true"] i {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.sk-wbtn i {
  display: block;
  width: 18px;
  border-radius: 4px;
  background: currentColor;
}
.sk-w0 {
  height: 2px;
}
.sk-w1 {
  height: 4px;
}
.sk-w2 {
  height: 7px;
}
.sk-tsize {
  font-size: 13px;
  font-weight: 650;
}
.sk-board {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-2);
  white-space: nowrap;
}
.sk-board label {
  font-weight: 560;
}
.sk-board .input {
  width: 62px;
  height: 32px;
  padding: 0 8px;
  font-size: 13.5px;
}
.sk-board .input[aria-invalid="true"] {
  border-color: var(--err);
  box-shadow: 0 0 0 3px var(--err-soft);
}
.sk-sep {
  width: 1px;
  height: 24px;
  background: var(--line-2);
}
.sk-stage {
  grid-area: stage;
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--sk-desk);
}
.sk-stage canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  touch-action: none;
  cursor: crosshair;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.sk[data-tool="select"] .sk-stage canvas {
  cursor: default;
}
.sk[data-tool="text"] .sk-stage canvas {
  cursor: text;
}
.sk-stage canvas:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  border-radius: 0;
}
.sk-edit {
  position: absolute;
  z-index: 2;
  min-width: 1em;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 1px dashed var(--accent);
  outline-offset: 3px;
  background: transparent;
  font-family: var(--sans);
  font-weight: 600;
  line-height: 1.25;
  white-space: pre;
  overflow: hidden;
  resize: none;
}
.sk-status {
  grid-area: status;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 14px;
  border-top: 1px solid var(--line);
  background: var(--bg-2);
  font-size: 12.5px;
  color: var(--text-3);
}
.sk-pos {
  font-family: var(--mono);
  font-size: 12px;
  white-space: pre;
}
@media (max-width: 760px) {
  .sk {
    padding: 0;
  }
  .sk-card {
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 0;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr) auto auto;
    grid-template-areas: "head" "props" "stage" "status" "tools";
  }
  .sk-head {
    gap: 6px;
    padding: max(8px, env(safe-area-inset-top)) 6px 8px 14px;
  }
  .sk-title p,
  .sk-cancel,
  .sk-long {
    display: none;
  }
  .sk-title h2 {
    font-size: 1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .sk-x {
    display: inline-flex;
  }
  .sk-actions .btn-primary {
    margin-left: 2px;
  }
  .sk-tools {
    flex-direction: row;
    justify-content: space-between;
    gap: 2px;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 6px 8px max(6px, env(safe-area-inset-bottom));
    border-right: 0;
    border-top: 1px solid var(--line);
  }
  .sk-props {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 6px 10px;
    /* more to the right: the row scrolls */
    mask-image: linear-gradient(90deg, #000 88%, transparent);
  }
  .sk-tools::-webkit-scrollbar,
  .sk-props::-webkit-scrollbar {
    display: none;
  }
  .sk-props > * {
    flex: none;
  }
  .sk-status {
    padding: 4px 12px;
    font-size: 12px;
  }
  .sk-status [data-hint] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
@media (max-width: 400px) {
  .sk-btn {
    width: 36px;
  }
}

/* ---------- the MCP server: endpoint, copy buttons, the clients carousel (views/mcp.ts; landing #mcp, /docs/mcp,
   Account > Connected apps) */

.mcp-section {
  padding-top: 40px;
}
.mcp-head {
  margin: 0 auto 28px;
  text-align: center;
}
.mcp {
  max-width: 820px;
  margin: 0 auto;
}
.copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: none;
  min-width: 82px;
  height: 32px;
  padding: 0 11px;
  border-radius: var(--radius-s);
  border: 1px solid var(--line-2);
  background: var(--bg-1);
  color: var(--text-2);
  font: 600 13px/1 var(--sans);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.copy-btn:hover {
  background: var(--bg-3);
  color: var(--text);
}
.copy-btn svg {
  width: 15px;
  height: 15px;
}
.copy-btn .ic-done,
.copy-btn.is-copied .ic-copy {
  display: none;
}
.copy-btn.is-copied .ic-done {
  display: block;
}
.copy-btn.is-copied {
  color: var(--mask);
  border-color: color-mix(in srgb, var(--mask) 40%, transparent);
  background: var(--mask-soft);
}
.mcp-endpoint {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 10px 10px 20px;
  border: 1px solid var(--accent-line);
  border-radius: 14px;
  background: var(--bg-1);
  box-shadow: 0 0 0 4px var(--accent-soft), var(--shadow);
}
.mcp-endpoint code {
  flex: 1;
  min-width: 0;
  font: 600 clamp(14px, 0.8rem + 0.6vw, 19px) / 1.35 var(--mono);
  color: var(--text);
  overflow-wrap: break-word;
  user-select: all;
}
.mcp-endpoint .copy-btn {
  height: 40px;
  min-width: 96px;
  border-color: transparent;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 14px;
}
.mcp-endpoint .copy-btn:hover {
  background: var(--accent-2);
}
.mcp-endpoint .copy-btn.is-copied {
  background: var(--mask);
  color: var(--accent-ink);
}
.mcp-proto {
  margin: 12px 0 22px;
  text-align: center;
  font: 500 12.5px/1.5 var(--mono);
  color: var(--text-3);
}

/* the carousel: one tab and one slide per client; without JavaScript the slides stack */
.mcp-clients {
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  background: var(--bg-1);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.mcp-tabs-row {
  display: flex;
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
}
.mcp-clients:not(.is-ready) .mcp-tabs-row {
  display: none;
}
.mcp-tabs {
  position: relative;
  display: flex;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.mcp-tabs::-webkit-scrollbar {
  display: none;
}
.mcp-tabs [role="tab"] {
  position: relative;
  flex: 1 0 auto;
  min-height: 46px;
  padding: 0 16px;
  border: 0;
  border-right: 1px solid var(--line);
  background: transparent;
  color: var(--text-2);
  font: 600 14px/1 var(--sans);
  cursor: pointer;
}
.mcp-tabs [role="tab"]:hover {
  color: var(--text);
}
.mcp-tabs [role="tab"][aria-selected="true"] {
  background: var(--bg-1);
  color: var(--text);
}
.mcp-tabs [role="tab"]:focus-visible {
  outline-offset: -3px;
}
.mcp-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
}
[aria-selected="true"] > .mcp-bar {
  transform: scaleX(1);
}
.mcp-clients.is-playing [aria-selected="true"] > .mcp-bar {
  animation: mcp-progress 6.5s linear forwards;
}
.mcp-clients.is-playing:hover [aria-selected="true"] > .mcp-bar,
.mcp-clients.is-playing:focus-within [aria-selected="true"] > .mcp-bar {
  animation-play-state: paused;
}
@keyframes mcp-progress {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}
.mcp-play {
  flex: none;
  width: 46px;
  border: 0;
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  display: grid;
  place-items: center;
}
.mcp-play:hover {
  color: var(--text);
}
.mcp-play svg {
  width: 16px;
  height: 16px;
}
.mcp-play .ic-play,
.mcp-clients:not(.is-playing) .mcp-play .ic-pause {
  display: none;
}
.mcp-clients:not(.is-playing) .mcp-play .ic-play {
  display: block;
}
.mcp-viewport {
  overflow: hidden;
}
.mcp-clients.is-ready .mcp-track {
  display: flex;
  transition: transform 0.45s cubic-bezier(0.4, 0.1, 0.2, 1);
}
.mcp-clients.is-ready .mcp-slide {
  flex: 0 0 100%;
  min-width: 0;
}
.mcp-clients:not(.is-ready) .mcp-slide + .mcp-slide {
  border-top: 1px solid var(--line);
}
.mcp .mcp-slide {
  padding: 18px 20px 20px;
}
.mcp .mcp-slide h3,
.mcp .mcp-slide h2.mcp-client-h {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin: 0 0 12px;
  font-size: 16px;
}
/* the same heading as an h2 where the block follows a page's h1 (the docs): none of a document's h2 rule */
.mcp .mcp-slide h2.mcp-client-h {
  padding: 0;
  border: 0;
  letter-spacing: 0;
  font-weight: 620;
  line-height: 1.3;
}
.mcp .mcp-slide h3 span,
.mcp .mcp-slide h2.mcp-client-h span {
  font: 500 12.5px/1.3 var(--sans);
  color: var(--text-3);
  letter-spacing: 0;
}
.mcp .mcp-slide p {
  margin: 12px 0 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-2);
}
.mcp .mcp-slide p code {
  padding: 1px 5px;
  border-radius: 5px;
  background: var(--bg-3);
  font-size: 0.92em;
  color: var(--text);
}
.snip {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-2);
  overflow: hidden;
}
.snip + .snip {
  margin-top: 10px;
}
.snip-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 4px 4px 12px;
  border-bottom: 1px solid var(--line);
  font: 500 12px/1.3 var(--mono);
  color: var(--text-3);
}
.snip-bar > span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mcp .snip pre {
  margin: 0;
  padding: 12px 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
  font: 400 13px/1.6 var(--mono);
  color: var(--text);
}
.mcp .snip pre.is-cmd {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.mcp .snip pre.is-file {
  overflow-x: auto;
}
.mcp .snip pre code {
  font-size: inherit;
  white-space: inherit;
}
.mcp-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  margin-top: 16px;
}
.mcp-foot p {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  font-size: 13.5px;
  color: var(--text-2);
}
.mcp-foot p svg {
  width: 16px;
  height: 16px;
  flex: none;
  margin-top: 2px;
  color: var(--accent);
}
.docs .mcp {
  margin: 24px 0 32px;
}
.panel-card .mcp {
  margin-top: 14px;
}
/* a grid item sizes to its content's longest line unless allowed to shrink (the config files scroll instead) */
.stack > .panel-card {
  min-width: 0;
}
.panel-card .mcp-endpoint {
  box-shadow: none;
}
@media (max-width: 640px) {
  .mcp-endpoint {
    padding: 10px 10px 10px 14px;
    gap: 10px;
  }
  .mcp-endpoint .copy-btn {
    min-width: 0;
    height: 44px;
    padding: 0 12px;
  }
  .copy-btn {
    height: 40px;
  }
  .mcp-tabs [role="tab"] {
    padding: 0 12px;
    min-height: 46px;
    font-size: 13.5px;
  }
  /* more tabs to the right: the strip scrolls */
  .mcp-tabs:not(.is-end) {
    mask-image: linear-gradient(90deg, #000 85%, transparent);
  }
  .mcp .mcp-slide {
    padding: 16px 14px 18px;
  }
}
@media (max-width: 400px) {
  /* the endpoint keeps to one line: the button shows its icon only (its label stays for screen readers) */
  .mcp-endpoint .copy-btn [data-clip-label] {
    display: none;
  }
  .mcp-endpoint .copy-btn {
    width: 44px;
    padding: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mcp-clients.is-ready .mcp-track {
    transition: none;
  }
}
.hero-mcp {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding: 9px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg-1) 70%, transparent);
  color: var(--text-2);
  font-size: 13.5px;
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s;
}
.hero-mcp:hover {
  border-color: var(--accent-line);
  color: var(--text);
}
.hero-mcp b {
  color: var(--text);
  font-weight: 600;
}
.hero-mcp svg {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--accent);
}
@media (max-width: 640px) {
  .hero-mcp {
    border-radius: 14px;
    align-items: flex-start;
  }
}

/* ---------- guided edits: the header's "Edit in KiCad" menu, the hand-back card, the parts table, the share
   page's inspector (views/editor.ts, static/js/workspace.js, static/js/values.js) */

.kmenu {
  display: flex;
  align-items: center;
  gap: 6px;
}
.kmenu-btn {
  gap: 6px;
  padding: 0 9px;
}
.kmenu-btn svg {
  width: 15px;
  height: 15px;
}
.kmenu-btn .kmenu-chev {
  width: 13px;
  height: 13px;
  margin-right: -2px;
  color: var(--text-3);
}
.kmenu-pop {
  position: absolute;
  z-index: 60;
  top: calc(100% - 6px);
  right: 12px;
  width: min(380px, calc(100vw - 24px));
  max-height: min(560px, calc(100vh - var(--header-h) - 80px));
  overflow-y: auto;
  padding: 6px;
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  animation: rise 0.14s ease-out;
}
.kmenu-head {
  padding: 8px 10px 6px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
}
.kmenu-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  padding: 9px 10px;
  border-radius: 9px;
  color: var(--text);
  text-decoration: none;
  outline: none;
}
.kmenu-item:hover,
.kmenu-item:focus-visible {
  background: var(--bg-3);
}
.kmenu-item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.kmenu-item .ki {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--accent-soft);
  color: var(--accent);
}
.kmenu-item .ki svg {
  width: 18px;
  height: 18px;
}
.kmenu-item .kt {
  display: grid;
  gap: 1px;
  min-width: 0;
}
.kmenu-item b {
  font-size: 14px;
  font-weight: 600;
}
.kmenu-item .kt span {
  font-size: 12.5px;
  color: var(--text-2);
}
.kmenu-item.is-off {
  cursor: not-allowed;
  opacity: 0.55;
}
.kmenu-item.is-off .ki {
  background: var(--bg-3);
  color: var(--text-3);
}
.kmenu-sep {
  height: 1px;
  margin: 5px 10px;
  background: var(--line);
}
.kmenu-note {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 2px 4px 6px;
  padding: 8px 10px;
  border-radius: 9px;
  background: var(--warn-soft);
  font-size: 12.5px;
  color: var(--text);
}
.kmenu-note svg {
  width: 15px;
  height: 15px;
  flex: none;
  margin-top: 1px;
  color: var(--warn);
}
.kmenu-foot {
  margin: 6px 10px 6px;
  font-size: 11.5px;
  color: var(--text-3);
}
.kmenu-foot a {
  color: var(--text-2);
}
@media (max-width: 1500px) {
  .kmenu-long {
    display: none;
  }
}
/* the Files tab's pointer to the menu */
.files-edit {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--text-2);
}
.files-edit svg {
  width: 15px;
  height: 15px;
  flex: none;
}
.link-btn {
  font: inherit;
  color: var(--accent);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.link-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* the hand-back card: the change in plain words, Apply / Discard */
.edit-title {
  font-weight: 560;
}
.edit-diff {
  margin: 0;
  padding: 0 0 0 18px;
  display: grid;
  gap: 4px;
  font-size: 13.5px;
  color: var(--text);
}
.edit-diff li::marker {
  color: var(--accent);
}
.edit-diff li.is-copper {
  color: var(--text-2);
  list-style-type: "↻  ";
}
.notice.edit.done .edit-diff {
  color: var(--text-2);
}
.edit-hint {
  margin: 0;
  font-size: 12.5px;
  color: var(--text-2);
}
.edit-note {
  display: flex;
  gap: 8px;
  margin: 0;
  font-size: 13px;
  color: var(--text-2);
}
.edit-note.err {
  color: var(--err);
}
.edit-state {
  flex-wrap: wrap;
}
.edit-fixed {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--text);
}
/* the part card's pin: the user placed it */
.p3-fixed {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 2px 0 8px;
  font-size: 12.5px;
  color: var(--accent);
}
.p3-fixed svg {
  width: 14px;
  height: 14px;
  flex: none;
}
/* "Change values" */
.values-page {
  padding-top: 18px;
  padding-bottom: 96px;
}
.values-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-2);
  text-decoration: none;
  font-size: 14px;
}
.values-back svg {
  width: 16px;
  height: 16px;
}
.values-back:hover span {
  text-decoration: underline;
}
.values-head h1 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0 8px;
  font-size: 1.6rem;
  letter-spacing: -0.02em;
}
.values-head h1 svg {
  width: 26px;
  height: 26px;
  color: var(--accent);
}
.values-head p {
  max-width: 760px;
  margin: 0 0 10px;
  color: var(--text-2);
}
.values-scope,
.values-pending {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 13.5px;
  background: var(--info-soft);
  color: var(--text) !important;
}
.values-pending {
  background: var(--accent-soft);
}
.values-scope svg,
.values-pending svg {
  width: 16px;
  height: 16px;
  flex: none;
  margin-top: 2px;
}
.values-tools {
  position: sticky;
  top: var(--header-h);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0 6px;
  padding: 8px 0;
  background: var(--bg);
}
.values-search {
  position: relative;
  flex: 1;
  max-width: 420px;
}
.values-search svg {
  position: absolute;
  left: 11px;
  top: 50%;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  color: var(--text-3);
}
.values-search .input {
  padding-left: 34px;
}
.values-count {
  font-size: 13px;
  color: var(--text-3);
}
.values-group h2 {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 22px 0 6px;
  font-size: 1rem;
}
.values-group h2 .count {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-3);
}
.values-table th[scope="row"] {
  white-space: nowrap;
  font: 600 13px/1.4 var(--mono);
  color: var(--text);
  text-transform: none;
  letter-spacing: 0;
  vertical-align: middle;
}
.values-table td {
  padding: 6px 12px;
  vertical-align: middle;
}
.values-table td:nth-child(2) {
  width: 200px;
}
.values-input {
  height: 34px;
  padding: 0 10px;
  font: 500 13.5px/1 var(--mono);
}
.values-input.is-changed {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.values-input.is-empty {
  border-color: var(--err);
}
.values-side {
  margin-left: 6px;
  font: 400 11px/1 var(--sans);
  color: var(--text-3);
}
.pin-mark {
  display: inline-flex;
  vertical-align: -2px;
  margin-left: 4px;
  color: var(--accent);
}
.pin-mark svg {
  width: 14px;
  height: 14px;
}
.values-desc {
  max-width: 360px;
  font-size: 12.5px;
  color: var(--text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.values-none {
  color: var(--text-2);
}
.values-bar {
  position: fixed;
  left: 50%;
  bottom: 16px;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(760px, calc(100vw - 24px));
  transform: translateX(-50%);
  padding: 10px 12px 10px 16px;
  border-radius: 14px;
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  box-shadow: var(--shadow-lg);
  font-size: 13.5px;
}
.values-bar [data-values-changes] {
  flex: 1;
  min-width: 0;
  color: var(--text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.has-changes .values-bar [data-values-changes] {
  color: var(--text);
}
@media (max-width: 760px) {
  .values-table .hide-sm {
    display: none;
  }
  .values-table td:nth-child(2) {
    width: auto;
  }
  .values-bar {
    flex-wrap: wrap;
  }
  .values-bar [data-values-changes] {
    flex-basis: 100%;
    white-space: normal;
  }
}
/* the share page's "Inspect in KiCad" */
.share-inspect {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin: 16px 0 0;
  padding: 14px 16px;
}
.share-inspect p {
  flex: 1 1 300px;
  margin: 0;
  display: grid;
  gap: 4px;
  font-size: 13.5px;
  color: var(--text-2);
}
.inspect-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--warn);
}
.inspect-note svg {
  width: 15px;
  height: 15px;
}
.share-inspect-credit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-3);
}
.share-inspect-credit a {
  color: inherit;
}
.share-inspect .share-tm {
  flex-basis: 100%;
  font-size: 11.5px;
  color: var(--text-3);
}
.gpl-link a {
  text-underline-offset: 2px;
}
.source-page h2 {
  margin-top: 26px;
}
.source-page code {
  overflow-wrap: anywhere;
}
/* the board header with "Edit in KiCad": below a wide screen the status pill goes under the title and Clone and the
   version menu shorten, so the title stays readable */
@media (max-width: 1700px) {
  .ws-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "back title actions" "back status actions";
    column-gap: 10px;
    row-gap: 2px;
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .ws-head .back {
    grid-area: back;
  }
  .ws-head h1 {
    grid-area: title;
  }
  .ws-head .ws-meta {
    grid-area: status;
  }
  .ws-head [data-status] {
    display: flex;
  }
  .ws-head .safety-badge {
    height: 20px;
    font-size: 11px;
  }
  .ws-head [data-status] .pill {
    height: 20px;
    font-size: 11px;
  }
  .ws-head .actions {
    grid-area: actions;
  }
  .clone-label,
  .ws-head .vl-x {
    display: none;
  }
}
@media (max-width: 560px) {
  .kmenu-label {
    display: none;
  }
  .kmenu-pop {
    left: 10px;
    right: 10px;
    width: auto;
  }
}

/* ---------- the firmware simulator's panel in the World (static/js/simpanel.js): the coverage legend, Run / Stop /
   Debug / Test, firmware, the buttons, the UART, test results and the part card's simulation section */
.sim-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  color: var(--text-2);
}
.sim-legend span:not(.sim-sw) {
  margin-right: 8px;
}
.sim-legend b {
  color: var(--text);
}
.sim-sw {
  display: inline-block;
  flex: none;
  width: 11px;
  height: 11px;
  border-radius: 3px;
}
.sim-sw.green {
  background: #2fbf71;
}
.sim-sw.red {
  background: #e5484d;
}
.sim-sw.grey {
  background: #7d8590;
}
.sim-bar,
.sim-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 8px 0;
}
.sim-upload {
  cursor: pointer;
}
.sim-press small {
  color: var(--text-3);
  font-family: var(--mono);
}
.sim-press.is-down {
  border-color: var(--mask);
  background: var(--mask-soft);
}
.sim-debug {
  margin: 6px 0 8px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--bg-2);
}
.sim-debug p {
  margin: 4px 0;
  color: var(--text-2);
}
.sim-cmd {
  display: block;
  padding: 6px 8px;
  border-radius: 6px;
  background: var(--bg);
  font: 12px/1.4 var(--mono);
  overflow-wrap: anywhere;
  user-select: all;
}
.sim-term-wrap {
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--bg);
  overflow: hidden;
}
.sim-send input {
  width: 100%;
  padding: 7px 10px;
  border: 0;
  border-top: 1px solid var(--line);
  background: var(--bg-2);
  color: var(--text);
  font: 12px var(--mono);
}
.sim-tests ul {
  max-height: 128px;
  margin: 4px 0 0;
  padding: 0;
  overflow: auto;
  list-style: none;
}
.sim-tests li {
  margin: 3px 0;
}
.sim-tests li span {
  color: var(--text-2);
}
.sim-tests-head {
  margin: 8px 0 2px;
  font-weight: 600;
}
.sim-good {
  color: var(--mask);
}
.sim-bad {
  color: var(--err);
}
.sim-card {
  margin: 10px 0 4px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-left: 3px solid #7d8590;
  border-radius: var(--radius-s);
  background: var(--bg-2);
}
.sim-card.green {
  border-left-color: #2fbf71;
}
.sim-card.red {
  border-left-color: #e5484d;
}
.sim-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0 0 4px;
}
.sim-major,
.sim-model {
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--bg-3);
  color: var(--text-2);
  font-size: 11px;
}
.sim-why {
  margin: 0 0 6px;
  color: var(--text-2);
}
.sim-card .btn {
  margin-top: 2px;
}
/* "Build a simulation model": what can be done for a red part, the confirm, its run's state (static/js/simpanel.js) */
.sim-plan {
  margin: 4px 0 6px;
  color: var(--text);
}
.sim-plan-no {
  margin: 4px 0 2px;
  color: var(--text-2);
}
.sim-confirm {
  margin: 6px 0 2px;
  padding: 8px 10px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-s);
  background: var(--bg);
}
.sim-confirm p {
  margin: 0 0 6px;
}
.sim-confirm ul {
  margin: 0 0 8px;
  padding-left: 18px;
  color: var(--text-2);
}
.sim-confirm li {
  margin: 2px 0;
}
.sim-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.sim-actions .btn {
  min-height: 34px;
}
.sim-run {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 6px 0 2px;
  padding: 7px 9px;
  border-radius: var(--radius-s);
  background: var(--bg-3);
}
.sim-run > svg,
.sim-run > .spinner {
  flex: none;
  margin-top: 2px;
}
.sim-run svg {
  width: 16px;
  height: 16px;
}
.sim-run.is-done svg {
  color: var(--mask);
}
.sim-run.is-failed svg {
  color: var(--err);
}
.sim-run.is-wait svg {
  color: var(--info);
}
.sim-run-body {
  min-width: 0;
}
.sim-run-body b {
  display: block;
}
.sim-run-body span {
  color: var(--text-2);
}
.sim-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--info);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.sim-waits {
  margin: 4px 0 0;
  color: var(--info);
}
.sim-test {
  margin: 2px 0 0;
  color: var(--text-2);
  font-size: 12.5px;
}
/* the chat: a model run's request and the simulator's verdict after it */
.tag-sim {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--accent);
}
.tag-sim svg {
  width: 12px;
  height: 12px;
}
.msg.flash .bubble {
  animation: run-flash 1.6s ease-out;
}
@keyframes run-flash {
  0% {
    box-shadow: 0 0 0 3px var(--accent);
  }
  100% {
    box-shadow: 0 0 0 3px transparent;
  }
}
@media (prefers-reduced-motion: reduce) {
  .msg.flash .bubble {
    animation: none;
    outline: 2px solid var(--accent);
  }
}
/* the new-board page's simulation-ready chips */
.sim-chips {
  margin-top: 18px;
  padding: 16px 18px;
}
.sim-chips-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
}
.sim-chips h2 {
  margin: 0;
  font-size: 15px;
}
.sim-badge {
  margin-left: 6px;
  vertical-align: 1px;
}
.sim-choice {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  cursor: pointer;
}
.sim-chips p {
  margin: 8px 0 10px;
}
.sim-chip-list {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sim-chip-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-left: 3px solid #2fbf71;
  border-radius: var(--radius-s);
  background: var(--bg-2);
}
.sim-chip-list span {
  color: var(--text-2);
}
.sim-chip-list small {
  flex-basis: 100%;
  color: var(--text-3);
}

/* ---------- the hexagon rail, a honeycomb (views/hexrail.ts, static/js/hexrail.js): the open hexagon peeks out of the
   screen's left edge at half the viewport's height and never moves. Hover, focus or a tap and the honeycomb unfolds
   from it: faezor's central chat and every product as large hexagons that share their edges with each other and with the
   anchor (the hairline between them is the page's own colour, 3 px), each hinging out of an edge of one that is already
   there, so no hexagon is ever apart from the others. The cells' places are columns (c) and rows (y) of one honeycomb,
   written into the markup (data-c, data-y) - strict CSP, no inline styles. A cell's size is R, the hexagon's radius;
   the anchor is a cell like the others, shown at --s0 of its size while the menu is closed and grown to full size with
   the cells (--s and --grow follow it while it moves). With reduced motion nothing moves: the cells fade in. */

.hexrail {
  --R: clamp(64px, 13vh, 140px); /* a hexagon's radius: the cluster is about 56 % of the screen's height with four cells, 68 % with five */
  --H: calc(var(--R) * 1.7320508); /* a hexagon's height */
  --s0: 0.32; /* the collapsed anchor, as a fraction of a cell */
  --s: var(--s0); /* the anchor's scale now (the script moves it while the menu opens and closes) */
  --grow: 1; /* 1 collapsed, 0 open */
  --gap: 3px; /* the hairline between hexagons */
  position: fixed;
  z-index: 38;
  left: 0;
  top: 50vh;
  width: 0;
  height: 0;
  /* the hinges are 3D: the vanishing point is the middle of the cluster (static/js/hexrail.js PERSP) */
  perspective: calc(var(--R) * 30);
  perspective-origin: calc(var(--R) * 1.8) 0;
}
@supports (height: 50dvh) {
  .hexrail {
    --R: clamp(64px, 13dvh, 140px);
    top: 50dvh;
  }
}
.hexrail.is-open {
  --s: 1;
  --grow: 0;
}
/* the anchor's hover zone: a little larger than the half hexagon you see */
.hexrail::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(var(--R) * var(--s0) * -1.7);
  width: calc(var(--R) * var(--s0) * 2);
  height: calc(var(--R) * var(--s0) * 3.4);
}
/* the safe zone: the hull of the cluster (set by the script), transparent, under the cells - a straight line from the
   anchor to any cell stays inside it, so the pointer never leaves the menu on the way */
.hexrail-zone {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;
  overflow: visible;
  pointer-events: none;
}
.hexrail-zone path {
  fill: transparent;
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .hexrail.is-open .hexrail-zone path {
    pointer-events: fill;
  }
}

/* a hexagon: flat-topped, its centre on the rail's origin; a cell is moved to its place by its column and row */
.hx {
  --c: 0;
  --y: 0;
  --hx-fill: var(--bg-1);
  --hx-edge: var(--line-2);
  --hx-ink: var(--text);
  --hx-tile: color-mix(in oklab, var(--bg-1) calc(100% - var(--tint) * 2.4), var(--hx-fill)); /* 12 % of the colour on the light theme, about 22 % on the dark */
  position: absolute;
  left: calc(var(--R) * -1);
  top: calc(var(--H) / -2);
  width: calc(var(--R) * 2);
  height: var(--H);
  display: grid;
  place-items: center;
  color: var(--hx-ink);
  text-decoration: none;
  backface-visibility: hidden;
  transform: translate(calc(var(--c) * 1.5 * var(--R)), calc(var(--y) * 0.8660254 * var(--R)));
  /* the hexagon's shape takes the pointer (.hx-fill), not its square box */
  pointer-events: none;
}
.hx:hover {
  color: var(--hx-ink);
}
.hx[data-c="1"] {
  --c: 1;
}
.hx[data-c="2"] {
  --c: 2;
}
.hx[data-c="3"] {
  --c: 3;
}
.hx[data-c="4"] {
  --c: 4;
}
.hx[data-y="-4"] {
  --y: -4;
}
.hx[data-y="-3"] {
  --y: -3;
}
.hx[data-y="-2"] {
  --y: -2;
}
.hx[data-y="-1"] {
  --y: -1;
}
.hx[data-y="1"] {
  --y: 1;
}
.hx[data-y="2"] {
  --y: 2;
}
.hx[data-y="3"] {
  --y: 3;
}
.hx[data-y="4"] {
  --y: 4;
}
/* collapsed: only the open hexagon shows (the anchor, small); the cells are hidden (and out of the tab order) */
.hx:not([aria-current="page"]) {
  opacity: 0;
  visibility: hidden;
}
.hexrail.is-open .hx:not([aria-current="page"]) {
  opacity: 1;
  visibility: visible;
}
/* the anchor: the open hexagon, solid in its colour, at the origin (half of it is off screen) */
.hx[aria-current="page"] {
  --hx-tile: var(--hx-fill);
  --hx-ink: #ffffff;
  transform: scale(var(--s0));
}
.hexrail.is-open .hx[aria-current="page"] {
  transform: none;
}
.hx-faezor {
  --hx-fill: var(--bg-1);
  --hx-edge: color-mix(in srgb, #6f95dc 70%, var(--line-2));
  --hx-tile: var(--bg-1);
}
.hx-faezor[aria-current="page"] {
  --hx-ink: var(--text);
}
.hx-pcb {
  --hx-fill: var(--c-pcb-hex);
  --hx-edge: color-mix(in srgb, var(--c-pcb-hex), #ffffff 28%);
  --hx-ink: var(--c-pcb-2);
}
.hx-cad {
  --hx-fill: var(--c-cad-hex);
  --hx-edge: color-mix(in srgb, var(--c-cad-hex), #ffffff 28%);
  --hx-ink: var(--c-cad-2);
}
.hx-firmware {
  --hx-fill: var(--c-fw-hex);
  --hx-edge: color-mix(in srgb, var(--c-fw-hex), #ffffff 28%);
  --hx-ink: var(--c-fw-2);
}
.hx-sim {
  --hx-fill: var(--c-sim-hex);
  --hx-edge: color-mix(in srgb, var(--c-sim-hex), #ffffff 28%);
  --hx-ink: var(--c-sim-2);
}
.hx[aria-current="page"]:not(.hx-faezor) {
  --hx-ink: #ffffff;
}
.hx-hub {
  --hx-fill: var(--c-hub-hex);
  --hx-edge: color-mix(in srgb, var(--c-hub-hex), #ffffff 28%);
  --hx-ink: var(--c-hub-2);
}
/* a product that does not exist yet: its colour, faint, a dashed edge */
.hx[data-state="unavailable"] {
  --hx-tile: color-mix(in oklab, var(--bg-1) 94%, var(--hx-fill));
}
.hx[data-state="unavailable"] .hx-body {
  opacity: 0.62;
}
.hx-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.hx-fill {
  fill: var(--hx-tile);
  pointer-events: visiblePainted;
  cursor: pointer;
  transition: fill 0.15s;
}
.hx:hover .hx-fill {
  fill: color-mix(in oklab, var(--hx-tile), var(--text) 8%);
}
.hx[aria-current="page"]:hover .hx-fill {
  fill: color-mix(in oklab, var(--hx-tile), #ffffff 10%);
}
.hx-rim {
  fill: none;
  stroke: var(--hx-edge);
  stroke-width: 1.5px;
  vector-effect: non-scaling-stroke;
}
.hx[data-state="unavailable"] .hx-rim {
  stroke-dasharray: 5 4;
}
.hx[aria-current="page"] .hx-rim {
  stroke: color-mix(in srgb, #ffffff 55%, transparent);
  stroke-width: calc(2px / var(--s));
}
.hx-faezor[aria-current="page"] .hx-rim {
  stroke: color-mix(in srgb, var(--text) 45%, transparent);
}
/* the hairline between hexagons: the page's own colour, drawn on each cell's edge and clipped to the cell, so half of it
   (--gap / 2) is inside each of two neighbours and nothing is outside the cluster */
.hx-grout {
  fill: none;
  stroke: var(--bg);
  stroke-width: var(--gap);
  vector-effect: non-scaling-stroke;
  clip-path: polygon(100% 50%, 75% 100%, 25% 100%, 0 50%, 25% 0, 75% 0);
  pointer-events: none;
}
/* a cell that is tilted while it hinges is a little darker */
.hx-shade {
  fill: #000000;
  opacity: var(--shade, 0);
  pointer-events: none;
}
.hx:focus-visible {
  outline: none;
}
.hexrail .hx:focus-visible .hx-rim {
  stroke: var(--text);
  stroke-opacity: 1;
  stroke-width: 4px;
  animation: none;
}
/* what a cell says: its product's icon, its wordmark, its state - sizes follow the hexagon */
.hx-body {
  position: relative;
  display: grid;
  justify-items: center;
  gap: calc(var(--R) * 0.045);
  padding: 0 calc(var(--R) * 0.16);
  text-align: center;
  pointer-events: none;
}
.hx-ico {
  display: grid;
  place-items: center;
}
.hx-icon {
  width: clamp(24px, calc(var(--R) * 0.36), 48px);
  height: clamp(24px, calc(var(--R) * 0.36), 48px);
  color: var(--hx-ink);
}
.hx-logo {
  width: clamp(44px, calc(var(--R) * 0.62), 88px);
  height: auto;
}
.hx-wm {
  font: 650 clamp(11px, calc(var(--R) * 0.165), 20px) / 1.1 var(--sans);
  letter-spacing: -0.012em;
  margin-top: calc(var(--R) * 0.03);
}
.hx-what {
  font: 500 clamp(10px, calc(var(--R) * 0.115), 14px) / 1.2 var(--sans);
  color: var(--text-2);
  max-width: calc(var(--R) * 1.3);
  text-wrap: balance;
}
.hx-what:empty {
  display: none;
}
/* the anchor shows its icon in the half that is on screen, larger while it is small; the page's header has its wordmark */
.hx[aria-current="page"] .hx-body {
  transform: translateX(calc(var(--R) * 0.5));
  padding: 0;
}
.hx[aria-current="page"] .hx-ico {
  transform: scale(calc(1 + var(--grow) * 1.05));
}
.hx-faezor[aria-current="page"] .hx-logo {
  width: calc(var(--R) * 0.42);
}
.hx[aria-current="page"] .hx-wm,
.hx[aria-current="page"] .hx-what {
  display: none;
}
/* the laser: a bright segment running around a working product's hexagon (queued: dashed and slower) */
.hx-laser {
  fill: none;
  stroke: var(--laser);
  stroke-width: calc(1.7px * (1 + var(--grow) * 1.2));
  stroke-linecap: round;
  stroke-dasharray: 17 83;
  opacity: 0;
  filter: drop-shadow(0 0 2.5px var(--laser));
}
.hx[data-state="working"] .hx-laser {
  opacity: 1;
  animation: hx-laser 1.7s linear infinite;
}
.hx[data-state="queued"] .hx-laser {
  opacity: 0.85;
  stroke-dasharray: 2.6 2.4 2.6 2.4 2.6 2.4 2.6 82.4;
  animation: hx-laser 4.2s linear infinite;
}
@keyframes hx-laser {
  to {
    stroke-dashoffset: -100;
  }
}
/* waiting for the user: an amber pulse and a "?" */
.hx[data-state="waiting"] .hx-rim {
  stroke: var(--wait);
  stroke-width: 3px;
  animation: hx-pulse 1.8s ease-in-out infinite;
}
@keyframes hx-pulse {
  50% {
    stroke-opacity: 0.25;
  }
}
.hx-badge {
  position: absolute;
  top: 10%;
  right: 17%;
  width: clamp(18px, calc(var(--R) * 0.2), 27px);
  height: clamp(18px, calc(var(--R) * 0.2), 27px);
  border-radius: 50%;
  display: none;
  place-items: center;
  background: var(--wait);
  color: #1f1300;
  font: 800 clamp(12px, calc(var(--R) * 0.14), 18px) / 1 var(--sans);
  box-shadow: 0 0 0 2px var(--bg);
  pointer-events: none;
}
.hx[data-state="waiting"] .hx-badge {
  display: grid;
}
.hx[aria-current="page"] .hx-badge {
  transform: scale(calc(1 + var(--grow) * 1.1));
  transform-origin: 100% 0;
}
/* failed: a red notch on the top edge; the reason is the tooltip (title) and the screen reader's words */
.hx-notch {
  fill: none;
  stroke: var(--fail);
  stroke-width: 3.2;
  stroke-linecap: round;
  opacity: 0;
}
.hx[data-state="failed"] .hx-notch {
  opacity: 1;
}
.hx[data-state="failed"] .hx-rim {
  stroke: color-mix(in srgb, var(--fail) 80%, var(--hx-edge));
}
/* other products at work while the menu is closed: a dot each beside the peek, in the product's colour, ringed by the
   laser (working), amber (waiting) or red (failed) */
.hexrail-dots {
  position: absolute;
  left: calc(var(--R) * var(--s0) + 9px);
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  transform: translateY(-50%);
  transition: opacity 0.14s linear;
  pointer-events: none;
}
.hexrail.is-open .hexrail-dots,
.hexrail[data-phase="opening"] .hexrail-dots,
.hexrail[data-phase="closing"] .hexrail-dots {
  opacity: 0;
}
.hexrail-dot {
  --ring: var(--laser);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--dot, var(--text-3));
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.6px var(--ring), 0 0 6px 2px color-mix(in srgb, var(--ring) 55%,
    transparent);
}
.hexrail-dot[data-state="working"] {
  animation: hx-dot 1.4s ease-in-out infinite;
}
.hexrail-dot[data-state="queued"] {
  animation: hx-dot 3s ease-in-out infinite;
}
.hexrail-dot[data-state="waiting"] {
  --ring: var(--wait);
}
.hexrail-dot[data-state="failed"] {
  --ring: var(--fail);
}
.hexrail-dot[data-p="pcb"] {
  --dot: var(--c-pcb-hex);
}
.hexrail-dot[data-p="cad"] {
  --dot: var(--c-cad-hex);
}
.hexrail-dot[data-p="firmware"] {
  --dot: var(--c-fw-hex);
}
.hexrail-dot[data-p="sim"] {
  --dot: var(--c-sim-hex);
}
.hexrail-dot[data-p="hub"] {
  --dot: var(--c-hub-hex);
}
@keyframes hx-dot {
  50% {
    box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.6px var(--ring), 0 0 10px 4px color-mix(in srgb, var(--ring) 70%,
      transparent);
  }
}
/* without the script: hover and keyboard focus open it (static/js/hexrail.js takes over with .is-open) */
.hexrail:not([data-js]):is(:hover, :focus-within) {
  --s: 1;
  --grow: 0;
}
.hexrail:not([data-js]):is(:hover, :focus-within) .hx[aria-current="page"] {
  transform: none;
}
.hexrail:not([data-js]):is(:hover, :focus-within) .hx:not([aria-current="page"]) {
  opacity: 1;
  visibility: visible;
}
@media (prefers-reduced-motion: reduce) {
  /* fade, no hinge: the cells are at their places and appear in place; the anchor changes size at once */
  .hx:not([aria-current="page"]) {
    transition: opacity 0.16s linear, visibility 0s linear 0.16s;
  }
  .hexrail.is-open .hx:not([aria-current="page"]) {
    transition: opacity 0.16s linear, visibility 0s;
  }
  .hx[data-state="working"] .hx-laser {
    animation: none;
    stroke-dasharray: none;
    opacity: 0.9;
  }
  .hx[data-state="queued"] .hx-laser {
    animation: none;
    stroke-dasharray: 2.6 2.4;
  }
  .hx[data-state="waiting"] .hx-rim,
  .hexrail-dot {
    animation: none !important;
  }
}
/* phones: smaller hexagons (as wide as the screen allows: the cluster is four radii wide), the anchor a little above the
   screen's middle (42 % of its height) so the cluster stays clear of the reply box and the keyboard below it */
@media (max-width: 980px) {
  .hexrail {
    --R: clamp(56px, min(22vw, 9.6vh), 90px);
    top: 42vh;
  }
  @supports (height: 50dvh) {
    .hexrail {
      --R: clamp(56px, min(22vw, 9.6dvh), 90px);
      top: 42dvh;
    }
  }
}

/* the Simulation's page: the bench runs the latest version, time travel is the PCB's */
.ws[data-product="sim"] [data-vmenu],
.ws[data-product="sim"] [data-vbanner],
.ws[data-product="sim"] .stepper {
  display: none;
}
.tag-faezor {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.tag-faezor svg {
  width: 12px;
  height: 12px;
}
/* phones: the page's panels end above the mobile switch, which is taller to be tapped */
@media (max-width: 980px) {
  .has-rail .ws-left,
  .has-rail .ws-right {
    height: calc(100vh - var(--header-h) - 56px);
  }
  .has-rail .mobile-switch {
    min-height: 56px;
    align-items: center;
  }
}

/* ---------- small hexagons in a product's colour (views/central.ts miniHex; static/js/central.js) */
.mini-hex {
  --mh: var(--line-2);
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 26px;
  color: #ffffff;
}
.mini-hex > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: var(--mh);
}
.mini-hex > svg + svg {
  position: relative;
  inset: auto;
  width: 14px;
  height: 14px;
  fill: none;
}
.mini-pcb {
  --mh: var(--c-pcb-hex);
}
.mini-cad {
  --mh: var(--c-cad-hex);
}
.mini-firmware {
  --mh: var(--c-fw-hex);
}
.mini-sim {
  --mh: var(--c-sim-hex);
}
.mini-hub {
  --mh: var(--c-hub-hex);
}
.mini-faezor {
  --mh: var(--bg-1);
}
.mini-faezor > svg {
  stroke: color-mix(in srgb, #6f95dc 60%, var(--line-2));
  stroke-width: 5;
}
.mini-hex.is-big {
  width: 92px;
  height: 80px;
}
.mini-hex.is-big > svg + svg {
  width: 36px;
  height: 36px;
}

/* ---------- faezor's central chat (views/central.ts, static/js/central.js) */
.hub {
  height: calc(100vh - var(--header-h));
  min-height: 520px;
  display: flex;
  justify-content: center;
}
.hub-col {
  width: 100%;
  max-width: 860px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0 var(--gutter);
}
.hub-head {
  padding: 18px 0 14px;
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}
.hub-title h1 {
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem);
  letter-spacing: -0.02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hub-title p {
  margin-top: 4px;
  color: var(--text-2);
  font-size: 14px;
  max-width: 62ch;
}
.hub-chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.hub-chip {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px 7px 7px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--bg-1);
  text-decoration: none;
  color: var(--text);
  min-width: 0;
  transition: border-color 0.15s, background 0.15s;
}
.hub-chip:hover {
  border-color: var(--line-2);
  color: var(--text);
}
.hub-chip-t {
  display: grid;
  min-width: 0;
  line-height: 1.25;
}
.hub-chip-t b {
  font-size: 13.5px;
  font-weight: 620;
}
.hub-chip-t span {
  font-size: 12px;
  color: var(--text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hub-chip[data-state="unavailable"] {
  border-style: dashed;
}
.hub-chip[data-state="unavailable"] .mini-hex {
  opacity: 0.45;
}
.hub-chip:is([data-state="working"], [data-state="queued"]) {
  border-color: color-mix(in srgb, var(--laser) 55%, var(--line));
}
.hub-chip:is([data-state="working"], [data-state="queued"]) .hub-chip-t span {
  color: var(--text-2);
}
.hub-chip[data-state="waiting"] {
  border-color: color-mix(in srgb, var(--wait) 60%, var(--line));
}
.hub-chip[data-state="failed"] {
  border-color: color-mix(in srgb, var(--fail) 55%, var(--line));
}
.hub-chat {
  flex: 1;
  overflow-y: auto;
  padding: 20px 2px 8px;
  scroll-behavior: smooth;
}
.hub-reply {
  padding: 10px 0 16px;
}
.hub-reply .composer {
  border-radius: 16px;
}
.hub-reply .composer textarea {
  min-height: 60px;
  font-size: 15px;
}
.hub-reply .chips {
  display: none;
}
.hub-avatar {
  position: relative;
  width: 24px;
  height: 22px;
  background: none;
}
.hub-avatar .mini-hex {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hub-avatar img {
  position: relative;
  width: 15px;
  height: auto;
}
.msg-faezor > .hub-text,
.msg-faezor > .hub-dots {
  padding-left: 32px;
  color: var(--text);
}
.msg-faezor.is-error > .hub-text {
  color: var(--err);
}
.hub-dots {
  display: flex;
  gap: 5px;
  height: 20px;
  align-items: center;
}
.hub-dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-3);
  animation: hub-dot 1.2s ease-in-out infinite;
}
.hub-dots i:nth-child(2) {
  animation-delay: 0.15s;
}
.hub-dots i:nth-child(3) {
  animation-delay: 0.3s;
}
@keyframes hub-dot {
  40% {
    opacity: 0.25;
    transform: translateY(-2px);
  }
}
.hub-routes {
  display: grid;
  gap: 8px;
  margin: 10px 0 0 32px;
}
.hub-route,
.hub-card {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 11px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--bg-1);
}
.hub-card {
  margin: 0 0 18px;
}
.hub-route.is-unavailable {
  border-style: dashed;
  background: transparent;
}
.hub-route.is-unavailable .mini-hex {
  opacity: 0.5;
}
.hub-route.is-refused {
  border-color: color-mix(in srgb, var(--err) 40%, var(--line));
}
.hub-route-b,
.hub-card-b {
  display: grid;
  gap: 5px;
  min-width: 0;
  flex: 1;
}
.hub-route-h {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  font-size: 14px;
}
.hub-route-h b {
  font-weight: 640;
}
.hub-route-k {
  color: var(--text-2);
}
.hub-route-s,
.hub-when {
  font-size: 12.5px;
  color: var(--text-3);
}
.hub-route.is-started .hub-route-s,
.hub-route.is-sent .hub-route-s {
  color: var(--mask);
}
.hub-route.is-unavailable .hub-route-s {
  color: var(--text-2);
}
.hub-route-brief,
.hub-req {
  font-size: 14px;
  color: var(--text-2);
  overflow-wrap: anywhere;
}
.hub-route-note {
  font-size: 13.5px;
  color: var(--text-2);
}
.hub-route.is-refused .hub-route-note {
  color: var(--err);
}
.hub-run {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  color: var(--text-2);
}
.hub-run svg {
  width: 15px;
  height: 15px;
  flex: none;
}
.hub-run .spinner {
  width: 13px;
  height: 13px;
}
.hub-run.is-ok svg {
  color: var(--mask);
}
.hub-run.is-err {
  color: var(--err);
}
.hub-run.is-ask svg {
  color: var(--wait);
}
.hub-run.is-warn svg {
  color: var(--warn);
}
.hub-last {
  font-size: 13.5px;
  color: var(--text-2);
}
.hub-last summary {
  cursor: pointer;
  color: var(--text-3);
  width: fit-content;
}
.hub-last p {
  margin-top: 6px;
  padding-left: 10px;
  border-left: 2px solid var(--line-2);
}
.hub-route-a {
  margin-top: 2px;
}
.hub-open {
  gap: 6px;
}
.hub-open svg {
  width: 14px;
  height: 14px;
}
.hub-plan-card {
  margin: 10px 0 0 32px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid var(--accent-line);
  background: var(--accent-soft);
}
.hub-plan-card h3 {
  font-size: 13px;
  font-weight: 640;
  color: var(--text-2);
}
.hub-plan-card .hub-routes {
  margin-left: 0;
}
.hub-plan-acts {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}
.hub-plan-state {
  font-size: 13.5px;
  color: var(--text-2);
}
.hub-plan-card[data-state="dismissed"] {
  border-color: var(--line);
  background: transparent;
  opacity: 0.75;
}
.notice.hub-note {
  align-items: center;
  flex-wrap: wrap;
}
.notice.hub-note > span:not(.mini-hex) {
  flex: 1;
  min-width: 12ch;
}
.notice.hub-note.is-ask {
  border-color: color-mix(in srgb, var(--wait) 55%, var(--line));
}
.notice.hub-note.is-ok {
  background: var(--mask-soft);
  border-color: transparent;
  color: var(--text);
}
.notice.hub-note.is-err {
  background: var(--err-soft);
  border-color: transparent;
  color: var(--text);
}
.notice.hub-empty {
  align-items: center;
}
@media (max-width: 640px) {
  .hub-head {
    padding-top: 12px;
    gap: 10px;
  }
  /* phones: the chat gets the room - no sentence under the title, the products as four small tiles */
  .hub-title p {
    display: none;
  }
  .hub-title h1 {
    line-height: 32px;
  }
  .hub-chips {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
  }
  .hub-chip {
    flex-direction: column;
    gap: 4px;
    padding: 7px 2px 6px;
    text-align: center;
  }
  .hub-chip-t b {
    font-size: 11.5px;
  }
  .hub-chip-t span {
    /* still read out: the state in words */
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .hub-routes,
  .hub-plan-card {
    margin-left: 0;
  }
  .msg-faezor > .hub-text {
    padding-left: 0;
  }
}

/* ---------- a product that is not available yet (views/central.ts productPage) */
.prod-page {
  max-width: 820px;
  padding-top: 40px;
  padding-bottom: 64px;
}
.prod-head {
  display: flex;
  gap: 22px;
  align-items: center;
  margin-bottom: 32px;
}
.prod-head .mini-hex.is-big > svg:first-child {
  fill: color-mix(in srgb, var(--mh) 30%, var(--bg-1));
  stroke: var(--accent);
  stroke-width: 2.5;
  stroke-dasharray: 9 7;
}
.prod-head .mini-hex.is-big {
  color: var(--accent);
}
.prod-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
}
.prod-state svg {
  width: 15px;
  height: 15px;
}
.prod-head h1 {
  font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.5rem);
  letter-spacing: -0.03em;
  margin: 6px 0 8px;
}
.prod-of {
  color: var(--text-3);
  font-size: 14px;
  margin-bottom: 10px;
}
.prod-short {
  color: var(--text-2);
  max-width: 60ch;
}
.prod-sec {
  padding: 24px 0;
  border-top: 1px solid var(--line);
}
.prod-sec h2 {
  font-size: 1.1rem;
  margin-bottom: 14px;
}
.prod-will {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.prod-will li {
  display: flex;
  gap: 10px;
  color: var(--text-2);
}
.prod-will svg {
  width: 18px;
  height: 18px;
  flex: none;
  margin-top: 3px;
  color: var(--accent);
}
.prod-now p {
  color: var(--text-2);
  max-width: 66ch;
}
.prod-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0 14px;
}
.prod-note {
  font-size: 13.5px;
  color: var(--text-3);
}
@media (max-width: 640px) {
  .prod-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
}

/* ---------- the landing page: the honeycomb in the hero, the four products (views/landing.ts) */
.beta-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 11px 5px 9px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: color-mix(in srgb, var(--bg-1) 70%, transparent);
  font-size: 13px;
  font-weight: 560;
  color: var(--text-2);
}
.beta-pill .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mask);
  box-shadow: 0 0 0 3px var(--mask-soft);
}
.hero-comb {
  aspect-ratio: auto;
  filter: none;
  display: grid;
  place-items: center;
}
.honeycomb {
  width: min(100%, 400px);
  height: auto;
  overflow: visible;
}
.hc-fill {
  stroke-width: 2;
  stroke: color-mix(in srgb, var(--hc) 70%, #ffffff);
  fill: var(--hc);
}
.hc-pcb {
  --hc: var(--c-pcb-hex);
}
.hc-cad {
  --hc: var(--c-cad-hex);
}
.hc-firmware {
  --hc: var(--c-fw-hex);
}
.hc-sim {
  --hc: var(--c-sim-hex);
}
.hc-hub {
  --hc: var(--c-hub-hex);
}
.hc-faezor .hc-fill {
  fill: var(--bg-1);
  stroke: color-mix(in srgb, #6f95dc 60%, var(--line-2));
}
.hc.is-off .hc-fill {
  fill: color-mix(in srgb, var(--hc) 20%, var(--bg-1));
  stroke: color-mix(in srgb, var(--hc) 60%, var(--text-3));
  stroke-dasharray: 7 6;
}
.hc-icon {
  fill: none;
  stroke: #ffffff;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hc.is-off .hc-icon {
  stroke: color-mix(in srgb, var(--hc) 55%, var(--text));
}
.hc-name {
  fill: #ffffff;
  font: 650 15px var(--sans);
  text-anchor: middle;
}
.hc-faezor .hc-name {
  fill: var(--text);
}
.hc-state {
  fill: rgb(255 255 255 / 0.78);
  font: 500 9px var(--sans);
  text-anchor: middle;
}
.hc.is-off .hc-name,
.hc.is-off .hc-state {
  fill: color-mix(in srgb, var(--hc) 45%, var(--text));
}
/* each hexagon is a link to its product below (faezor's to how it works) */
.hc-link {
  cursor: pointer;
  outline: none;
}
.hc-link .hc {
  transition: filter 0.18s ease, opacity 0.18s ease;
}
.hc-link .hc-fill {
  transition: stroke-width 0.18s ease, stroke 0.18s ease;
}
.hc-link:hover .hc {
  filter: brightness(1.12) drop-shadow(0 6px 14px rgb(0 0 0 / 0.25));
}
.hc-link:hover .hc-fill,
.hc-link:focus-visible .hc-fill {
  stroke: var(--text);
  stroke-width: 3.5;
}
.hc-link:focus-visible .hc-fill {
  stroke-dasharray: none;
  stroke-width: 4.5;
}
.hc-link:hover .hc-name {
  text-decoration: underline;
}
/* the product block a hexagon led to */
.product:target {
  outline: 2px solid var(--pc);
  outline-offset: 3px;
}
.hc-free {
  fill: none;
  stroke: var(--line-2);
  stroke-width: 1.5;
  stroke-dasharray: 4 6;
}
.hc-laser {
  fill: none;
  stroke: var(--laser);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 16 84;
  filter: drop-shadow(0 0 4px var(--laser));
  animation: hx-laser 2.2s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .hc-laser {
    animation: none;
    stroke-dasharray: none;
    opacity: 0.85;
  }
}
.products {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.product {
  --pc: var(--c-pcb);
  padding: 22px;
  border-radius: var(--radius-l);
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-top: 3px solid var(--pc);
}
.product-cad {
  --pc: var(--c-cad);
}
.product-firmware {
  --pc: var(--c-fw);
}
.product-sim {
  --pc: var(--c-sim);
}
.product-hub {
  --pc: var(--c-hub);
}
.product.is-off {
  background: transparent;
  border-style: dashed;
  border-top-style: dashed;
}
.product header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
.mini-hex.is-mid {
  width: 52px;
  height: 45px;
}
.mini-hex.is-mid > svg + svg {
  width: 22px;
  height: 22px;
}
.product.is-off .mini-hex > svg:first-child {
  fill: color-mix(in srgb, var(--mh) 22%, var(--bg-1));
  stroke: var(--pc);
  stroke-width: 3;
  stroke-dasharray: 8 6;
}
.product.is-off .mini-hex {
  color: var(--pc);
}
.product h3 {
  font-size: 1.25rem;
}
.product-state {
  font-size: 13px;
  font-weight: 600;
  color: var(--mask);
}
.product.is-off .product-state {
  color: var(--text-3);
}
.product-what {
  color: var(--text);
  margin-bottom: 12px;
}
.product-will {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: 6px;
}
.product ul {
  margin: 0;
  padding-left: 18px;
  color: var(--text-2);
  font-size: 14.5px;
  display: grid;
  gap: 6px;
}
.product ul li::marker {
  color: var(--pc);
}
.product-today {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
  color: var(--text-2);
}
.product-today b {
  color: var(--text);
}
@media (max-width: 760px) {
  .products {
    grid-template-columns: 1fr;
  }
}

/* ---------- the CAD and Firmware pages (views/workspace.ts; static/js/cad.js, firmware.js): their own chats beside the
   case in 3D / the code. No stepper (that is the PCB's design stages), no KiCad menu */
.ws[data-product="cad"] .stepper,
.ws[data-product="firmware"] .stepper {
  display: none;
}
.expert-btn svg {
  width: 15px;
  height: 15px;
}
.reply-other {
  display: inline-flex;
  gap: 6px;
  align-items: flex-start;
}
.reply-other svg {
  width: 14px;
  height: 14px;
  flex: none;
  margin-top: 2px;
}
.prod-banner {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin: 12px 14px 0;
  padding: 10px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--bg-1);
  font-size: 13.5px;
}
.prod-banner > svg {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--accent);
}
.prod-banner > div:first-of-type {
  flex: 1 1 260px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.prod-banner span {
  color: var(--text-2);
}
.prod-banner.is-warn {
  background: var(--warn-soft);
  border-color: transparent;
}
.prod-banner.is-warn > svg {
  color: var(--warn);
}
.prod-banner-a {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
/* the banner's Open is a form posted into a new tab (the handoff to the editor's own origin) */
.prod-banner-a form {
  display: contents;
}
.cad-view {
  position: relative;
  height: 100%;
  min-height: 420px;
}
.panel:has(.cad-view) {
  display: flex;
  flex-direction: column;
}
.panel:has(.cad-view) > .cad-view {
  flex: 1;
}
.cad3d {
  position: absolute;
  inset: 0;
}
.cad-hud {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
  padding: 10px 12px;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--bg-1) 88%, transparent);
  border: 1px solid var(--line);
  backdrop-filter: blur(6px);
  font-size: 13px;
}
.cad-explode {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 240px;
}
.cad-explode label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  font-weight: 600;
}
.cad-explode label svg {
  width: 15px;
  height: 15px;
}
.cad-explode input[type="range"] {
  flex: 1;
  min-width: 80px;
  accent-color: var(--accent);
}
.cad-parts {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
}
.cad-part {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  cursor: pointer;
}
.cad-part input {
  accent-color: var(--accent);
}
.cad-part i {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: var(--c, #ccc);
  border: 1px solid var(--line-2);
}
.cad-part i.is-board {
  background: #1d6b3e;
}
.cad-views {
  display: flex;
  gap: 4px;
}
.cad-finds {
  flex-basis: 100%;
  margin: 0;
  color: var(--text-2);
  display: flex;
  align-items: center;
  gap: 6px;
}
.cad-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ff4d4d;
  box-shadow: 0 0 0 3px rgb(255 77 77 / 0.25);
}
.fit-list {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.fit-row {
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--bg-1);
}
.fit-row p {
  margin: 2px 0 0;
  color: var(--text-2);
  font-size: 13px;
}
.fit-ic svg {
  width: 18px;
  height: 18px;
}
.fit-row.is-ok .fit-ic {
  color: var(--mask);
}
.fit-row.is-err .fit-ic {
  color: var(--err);
}
.fit-sides {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.fit-side {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--bg-3);
  display: inline-flex;
  gap: 5px;
  align-items: baseline;
}
.fit-side.is-bad {
  background: var(--warn-soft);
  color: var(--warn);
}
.fit-finds {
  margin: 6px 0 0;
  padding-left: 18px;
  font-size: 13px;
}
.fit-finds li {
  margin: 3px 0;
}
.fit-finds li.is-err {
  color: var(--err);
}
.fit-finds li.is-waived {
  color: var(--text-3);
}
.fit-finds code {
  font-size: 12px;
}
.fit-note,
.fwb-note {
  color: var(--text-3);
  font-size: 12.5px;
  margin: 8px 0 14px;
}
.fwb-note {
  display: flex;
  gap: 8px;
  color: var(--text-2);
}
.fwb-note svg {
  width: 16px;
  height: 16px;
  flex: none;
  margin-top: 1px;
}
.cad-h {
  font-size: 14px;
  margin: 18px 0 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.cad-h svg {
  width: 16px;
  height: 16px;
}
.cad-dl li {
  align-items: center;
}
.cad-dl-a {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.cad-iface {
  font-size: 13px;
}
.fw-src {
  display: grid;
  grid-template-columns: minmax(170px, 240px) 1fr;
  gap: 0;
  height: 100%;
  min-height: 420px;
}
.fw-nav {
  border-right: 1px solid var(--line);
  padding: 10px 8px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.fw-tree,
.fw-tree ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.fw-tree ul {
  padding-left: 12px;
}
.fw-tree summary,
.fw-file {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-height: 30px;
  padding: 3px 6px;
  border-radius: 6px;
  font: inherit;
  font-size: 13px;
  color: var(--text);
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
}
.fw-tree summary {
  list-style: none;
  color: var(--text-2);
}
.fw-tree summary::-webkit-details-marker {
  display: none;
}
.fw-tree svg {
  width: 14px;
  height: 14px;
  flex: none;
}
.fw-file:hover,
.fw-file:focus-visible {
  background: var(--bg-3);
}
.fw-file.is-open {
  background: var(--accent-soft);
  color: var(--accent);
}
.fw-file span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fw-gen {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-3);
}
.fw-view {
  min-width: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
}
.fw-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  position: sticky;
  top: 0;
  background: var(--bg-1);
}
.fw-head .btn {
  margin-left: auto;
}
.fw-code {
  margin: 0;
  padding: 10px 0;
  font-variant-ligatures: none;
  font-family: var(--mono, "JetBrains Mono", monospace);
  font-size: 12.5px;
  line-height: 1.55;
  counter-reset: ln;
  overflow-x: auto;
  flex: 1;
}
.fw-code .ln {
  display: block;
  padding: 0 14px 0 0;
  white-space: pre;
}
.fw-code .ln::before {
  counter-increment: ln;
  content: counter(ln);
  display: inline-block;
  width: 3.4em;
  margin-right: 12px;
  padding-right: 6px;
  text-align: right;
  color: var(--text-3);
  border-right: 1px solid var(--line);
  user-select: none;
}
.fw-bin {
  padding: 14px;
}
/* not built yet: the empty state sits in the flow above the actions (absolute, it covered "Build again") */
.fwb > .panel-empty {
  position: static;
  min-height: 40vh;
}
.fwb-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 12px 0;
}
.fwb-links {
  margin: 6px 0;
  font-size: 13px;
}
.fwb-links a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.fwb-links svg {
  width: 15px;
  height: 15px;
  flex: none;
}
.fwb-debug {
  margin-top: 16px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-1);
}
.fwb-debug p {
  font-size: 13px;
  color: var(--text-2);
  margin: 0 0 8px;
}
.fwb-debug .share-link {
  margin-bottom: 8px;
}
.pins-table td small,
.pin-role {
  display: block;
  color: var(--text-3);
  font-size: 11.5px;
}
@media (max-width: 760px) {
  .fw-src {
    grid-template-columns: 1fr;
  }
  .fw-nav {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    max-height: 220px;
  }
  .cad-view {
    min-height: 360px;
  }
  .cad-hud {
    left: 8px;
    right: 8px;
    bottom: 8px;
    padding: 8px 10px;
  }
  .prod-banner {
    margin: 10px 10px 0;
  }
}

/* ---------- faezorhub (views/hub.ts, static/js/hub.js, hub-device.js): a project's fleet and its devices */
.fh {
  padding-bottom: 64px;
}
.fh-head {
  align-items: flex-start;
}
.fh-head-actions {
  margin-left: auto;
  display: flex;
  gap: 8px;
}
.fh-back {
  margin: 18px 0 0;
  font-size: 14px;
}
.fh-back a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-2);
}
.fh-back svg {
  width: 16px;
  height: 16px;
}
.prod-state.is-ok {
  color: var(--mask);
}
.fh-notice h3 {
  font-size: 0.95rem;
  margin: 18px 0 8px;
}
.fh-tabs {
  display: flex;
  gap: 4px;
  margin: 8px 0 20px;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
}
.fh-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 14px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--text-2);
  font: 560 14px/1 var(--sans);
  cursor: pointer;
  white-space: nowrap;
}
.fh-tab svg {
  width: 17px;
  height: 17px;
}
.fh-tab:hover {
  color: var(--text);
}
.fh-tab[aria-selected="true"] {
  color: var(--text);
  border-bottom-color: var(--accent);
}
.fh-tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  border-radius: 6px;
}
.fh-panel {
  display: grid;
  gap: 16px;
}
.fh-panel[hidden] {
  display: none;
}
.fh-card {
  padding: 20px 22px;
}
.fh-card h2,
.fh-card h3 {
  margin: 0 0 10px;
  font-size: 1.05rem;
}
.fh-h2 {
  font-size: 1.05rem;
  margin: 8px 0 0;
}
.fh-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}
.fh-summary > div {
  display: grid;
  gap: 2px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-1);
}
.fh-summary b {
  font-size: 1.25rem;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}
.fh-summary span {
  font-size: 12.5px;
  color: var(--text-3);
}
.fh-table td,
.fh-table th {
  white-space: nowrap;
}
.fh-table td:nth-child(3),
.fh-table td:nth-child(4) {
  white-space: normal;
}
.fh-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.fh-inline .input,
.fh-inline .select {
  flex: 1 1 180px;
  min-width: 0;
  width: auto;
}
.fh-add {
  margin-top: 14px;
}
.fh-lines {
  flex: 0 0 90px !important;
}
.fh-follow {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  font-size: 14px;
  color: var(--text-2);
}
.fh-actions {
  margin-top: 14px;
}
.fh-row-actions {
  display: flex;
  gap: 6px;
}
.fh-check {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 12px 0;
}
.fh-err {
  color: var(--err);
  font-size: 14px;
}
.fh-files {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  max-height: 180px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
}
.fh-files li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 12px;
  border-bottom: 1px solid var(--line);
  font-size: 13.5px;
}
.fh-files li:last-child {
  border-bottom: 0;
}
.fh-help {
  margin-top: 14px;
  font-size: 14px;
  color: var(--text-2);
}
.fh-help summary {
  cursor: pointer;
  color: var(--text);
  font-weight: 560;
}
.fh-help code,
.fh-card code {
  font: 500 12.5px/1.4 var(--mono);
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--bg-3);
}
.fh-build {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: var(--radius-s);
  background: var(--bg-2);
  font-size: 14px;
}
.fh-build svg {
  width: 18px;
  height: 18px;
  flex: none;
}
.fh-build.is-ok {
  color: var(--mask);
  background: var(--mask-soft);
}
.fh-build.is-err {
  color: var(--err);
  background: var(--err-soft);
}
.fh-host {
  display: grid;
  gap: 6px;
  margin: 8px 0 14px;
}
.fh-host p {
  margin: 0;
  color: var(--text-2);
  font-size: 14.5px;
}
.fh-steps {
  display: grid;
  gap: 18px;
  padding-left: 20px;
  margin: 0 0 8px;
  color: var(--text-2);
}
.fh-steps b {
  color: var(--text);
}
.fh-mode {
  margin: 10px 0;
  color: var(--text);
  font-size: 14px;
}
.fh-mode label {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}
.fh-danger {
  margin-top: 8px;
}
.fh-log {
  margin: 12px 0 0;
  height: 420px;
  overflow: auto;
  padding: 12px 14px;
  border-radius: var(--radius-s);
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--text);
  font: 12.5px/1.5 var(--mono);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.fh-term {
  margin-top: 12px;
  height: 440px;
  padding: 8px;
  border-radius: var(--radius-s);
  border: 1px solid var(--line);
  background: var(--bg-1);
  overflow: hidden;
}
.fh-term-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: calc(var(--radius-s) - 2px);
  background: var(--bg-1);
}
@media (max-width: 640px) {
  .fh-card {
    padding: 16px;
  }
  .fh-inline .btn {
    flex: 1 1 100%;
  }
  .fh-term {
    height: 320px;
  }
  .fh-log {
    height: 320px;
  }
}
/* suggestions (static/js/suggest.js): one block right above the composer, where the cursor is. In an empty chat a few cards
   - the second line says what will happen, the bar and the hexagon are the product's colour; after a world run a row of
   follow-ups. A click fills the composer. The empty chat above holds one line on what the product does (.chat-intro). */
.suggest {
  --sg: var(--accent);
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 12px;
  animation: suggest-in 0.22s ease-out;
}
@keyframes suggest-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}
.suggest[data-suggest="pcb"] {
  --sg: var(--c-pcb);
}
.suggest[data-suggest="cad"] {
  --sg: var(--c-cad);
}
.suggest[data-suggest="firmware"] {
  --sg: var(--c-fw);
}
.suggest[data-suggest="sim"] {
  --sg: var(--c-sim);
}
.suggest-item[data-to="pcb"] {
  --sg: var(--c-pcb);
}
.suggest-item[data-to="cad"] {
  --sg: var(--c-cad);
}
.suggest-item[data-to="firmware"] {
  --sg: var(--c-fw);
}
.suggest-item[data-to="sim"] {
  --sg: var(--c-sim);
}
.suggest-lead {
  margin: 0;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-3);
}
.suggest-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.suggest-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 10px 14px 10px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-1);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.suggest-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  bottom: 9px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--sg);
}
.suggest-item:hover {
  border-color: color-mix(in srgb, var(--sg) 55%, var(--line));
  background: color-mix(in srgb, var(--sg) 8%, var(--bg-1));
  transform: translateY(-1px);
}
.suggest-item:focus-visible {
  outline: 2px solid var(--sg);
  outline-offset: 2px;
  border-color: var(--sg);
}
.suggest-item .mini-hex {
  width: 34px;
  height: 30px;
}
.suggest-item .mini-hex > svg + svg {
  width: 15px;
  height: 15px;
}
.si-t {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.si-text {
  font-size: 14.5px;
  font-weight: 550;
  line-height: 1.3;
}
.si-sub {
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--text-2);
}
.si-sub .wm {
  font-weight: 600;
}
/* the follow-ups after a run, and the Simulation's line of three: one row of chips */
.suggest-row {
  flex-direction: row;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
}
.suggest-row .suggest-lead {
  flex: none;
}
.suggest-row .suggest-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
  padding: 2px;
}
.suggest-row .suggest-item {
  flex: none;
  padding: 5px 12px 5px 14px;
  border-radius: 999px;
}
.suggest-row .suggest-item::before {
  left: 5px;
  top: 50%;
  bottom: auto;
  width: 5px;
  height: 5px;
  margin-top: -2.5px;
  border-radius: 50%;
}
.suggest-row .si-text {
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  padding-left: 4px;
}
.chat-intro {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  min-height: 100%;
  padding: 0 2px 14px;
  box-sizing: border-box;
}
.chat-intro .mini-hex {
  flex: none;
  width: 52px;
  height: 46px;
}
.chat-intro .mini-hex > svg + svg {
  width: 22px;
  height: 22px;
}
.chat-intro p {
  margin: 0 0 4px;
  max-width: 44ch;
  font-size: 15px;
  line-height: 1.45;
  color: var(--text-2);
}
.chat-intro .wm {
  font-weight: 650;
}
.reply > .suggest {
  margin-bottom: 10px;
}
/* the honeycomb rail's anchor (a fifth of a cell's radius, see .hexrail) sticks into the page's left edge at mid-height: the
   chat column (messages, run cards, suggestions, composer) starts right of it, on every page that has the rail */
.has-rail {
  --rail-g: calc(clamp(64px, 13vh, 140px) * 0.32 + 8px);
}
@supports (height: 50dvh) {
  .has-rail {
    --rail-g: calc(clamp(64px, 13dvh, 140px) * 0.32 + 8px);
  }
}
@media (max-width: 980px) {
  .has-rail {
    --rail-g: calc(clamp(56px, min(22vw, 9.6vh), 90px) * 0.32 + 8px);
  }
}
.has-rail .ws-left > :is(.ws-head, .stepper, .chat) {
  padding-left: max(20px, var(--rail-g));
}
.has-rail .ws-left > .reply {
  padding-left: max(16px, var(--rail-g));
}
.has-rail .hub-col {
  padding-left: max(var(--gutter), var(--rail-g));
}
@media (max-width: 640px) {
  .suggest-list {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 16px;
    scrollbar-width: none;
    margin: 0 -16px;
    padding: 2px 16px;
  }
  .suggest-item {
    flex: none;
    width: min(250px, 72vw);
    scroll-snap-align: start;
    align-items: flex-start;
  }
  .suggest-row {
    margin-bottom: 6px;
  }
  .suggest-row .suggest-lead {
    display: none;
  }
  .suggest-row .suggest-list {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin: 0;
    padding: 2px;
  }
  .suggest-row .suggest-item {
    width: auto;
  }
  .chat-intro {
    padding: 0 2px 8px;
  }
  .chat-intro .mini-hex {
    width: 40px;
    height: 35px;
  }
  .chat-intro p {
    font-size: 14px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .suggest {
    animation: none;
  }
  .suggest-item {
    transition: none;
  }
  .suggest-item:hover {
    transform: none;
  }
}

/* the analytics consent (static/js/consent.js): a small card in a corner - nothing blocked or dimmed, both answers the
   same size */
.consent {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 90;
  width: min(360px, calc(100vw - 32px));
  padding: 14px 16px;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: var(--bg-1);
  color: var(--text);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  font-size: 13.5px;
  line-height: 1.45;
  animation: consent-in 0.3s ease;
}
.consent p {
  margin: 0 0 10px;
}
.consent a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  opacity: 0.8;
}
.consent-act {
  display: flex;
  gap: 8px;
}
.consent-btn {
  flex: 1;
  padding: 7px 10px;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.consent-btn:hover {
  background: color-mix(in srgb, currentColor 8%, transparent);
}
@keyframes consent-in {
  from {
    opacity: 0;
    translate: 0 8px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .consent {
    animation: none;
  }
}

/* with the sign-up offer (consent.js): larger, the offer first - an accent edge, a clear headline and its button; the
   analytics question under a rule, its two answers still the same size */
.consent.has-offer {
  width: min(400px, calc(100vw - 32px));
  padding: 0;
  border-color: var(--copper-line);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35), 0 0 0 1px var(--copper-line);
}
.consent-offer {
  position: relative;
  padding: 18px 20px 16px;
  background: linear-gradient(160deg, var(--copper-soft), transparent 70%);
  border-radius: 12px 12px 0 0;
}
.consent-head {
  margin: 0 28px 6px 0 !important;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
}
.consent-offer p {
  margin: 0 0 14px;
}
.consent-cta {
  display: block;
  padding: 10px 14px;
  border-radius: 9px;
  background: var(--copper);
  color: var(--copper-ink) !important;
  font-weight: 700;
  text-align: center;
  text-decoration: none !important;
  opacity: 1 !important;
}
.consent-cta:hover {
  background: var(--copper-2);
}
.consent-x {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-2);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.consent-x:hover {
  background: color-mix(in srgb, currentColor 10%, transparent);
  color: var(--text);
}
.consent.has-offer .consent-ask {
  padding: 12px 20px 14px;
  border-top: 1px solid var(--line-2);
  font-size: 12.5px;
}

/* the sign-up's optional consents (views/auth.ts) */
.opt-note {
  margin: 14px 0 6px;
  font-size: 13px;
  color: var(--text-2);
}

/* the robot check's line on the forms (views/layout.ts robotCheck, static/js/altcha.js wire): empty until it starts,
   then a small spinner and "Checking you're human…", a tick and "Verified" when done */
.robot-status {
  min-height: 18px;
  margin: 4px 0 10px;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--text-3);
}
.robot-status:empty {
  margin: 0;
  min-height: 0;
}
.robot-status::before {
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
}
.robot-status[data-state="verifying"]::before {
  border: 2px solid var(--line-2);
  border-top-color: var(--text-2);
  animation: robot-spin 0.8s linear infinite;
}
.robot-status[data-state="verified"] {
  color: var(--c-pcb);
}
.robot-status[data-state="verified"]::before {
  background: var(--c-pcb) no-repeat center / 8px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 5.2 4 7.6 8.6 2.6' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.robot-status[data-state="error"] {
  color: var(--err);
}
.robot-status:is([data-state=""], [data-state="unverified"])::before {
  display: none;
}
@keyframes robot-spin {
  to {
    rotate: 1turn;
  }
}

/* the admin page (views/app.ts adminPage): tabs, the overview's numbers, the accounts with their boards, Umami */
.admin-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 0 22px;
  border-bottom: 1px solid var(--line);
}
.admin-tab {
  padding: 9px 14px;
  border-bottom: 2px solid transparent;
  color: var(--text-2);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
}
.admin-tab:hover {
  color: var(--text);
}
.admin-tab.is-on {
  color: var(--text);
  border-bottom-color: var(--copper);
}
.admin-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
.admin-stats > div {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-1);
}
.admin-stats b {
  display: block;
  font-size: 26px;
  line-height: 1.1;
}
.admin-stats span {
  font-size: 13px;
  color: var(--text-2);
}
.admin-users {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.admin-user {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-1);
}
.admin-user > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  gap: 16px;
  align-items: center;
  padding: 11px 14px;
  cursor: pointer;
  list-style: none;
}
.admin-user > summary::-webkit-details-marker {
  display: none;
}
.au-email {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
}
.au-meta {
  font-size: 13px;
  color: var(--text-2);
}
.au-body {
  padding: 4px 14px 14px;
  border-top: 1px solid var(--line);
}
.au-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 8px 16px;
  margin: 12px 0;
}
.au-facts dt {
  font-size: 12px;
  color: var(--text-3);
}
.au-facts dd {
  margin: 2px 0 0;
}
.an-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}
.an-ranges {
  display: inline-flex;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  overflow: hidden;
}
.an-ranges a {
  padding: 6px 12px;
  font-size: 13px;
  color: var(--text-2);
  text-decoration: none;
}
.an-ranges a.is-on {
  background: var(--bg-3-base);
  color: var(--text);
  font-weight: 600;
}
.an-chart-wrap {
  padding: 14px;
  margin-bottom: 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-1);
}
.an-chart {
  display: block;
  width: 100%;
  height: auto;
}
.an-chart .an-pv {
  fill: color-mix(in srgb, var(--copper) 35%, transparent);
}
.an-chart .an-v {
  fill: var(--copper);
}
.an-chart text {
  font-size: 11px;
  fill: var(--text-3);
}
.an-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}
.an-list {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-1);
}
.an-list h3 {
  margin: 0 0 8px;
  font-size: 14px;
}
.an-list ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
.an-list li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 0;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
}
.an-list li span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 700px) {
  .admin-user > summary {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .admin-user > summary .au-meta:nth-of-type(n + 3) {
    display: none;
  }
}

/* the admin's runs: what each was asked (views/app.ts) */
.admin-runs td {
  vertical-align: top;
}
.run-what {
  max-width: 460px;
}
.run-what p,
.run-what details {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--text-2);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.run-what summary {
  cursor: pointer;
}
.run-err {
  color: var(--err) !important;
}

/* ---------- organisations (views/org.ts, src/orgs.ts): people's avatars and the organisation's mark (initials on a
   tint picked from the address or the id: six hues that read in both themes), the org badge on cards and in a board's
   header, the role pills, the projects page's filter and invitations, the organisation's page, the invitation page,
   the read-only state of a board for viewers and the composer's "Create in" */

.p-avatar,
.org-mark {
  --h: #5b8def;
  display: inline-grid;
  place-items: center;
  flex: none;
  background: color-mix(in srgb, var(--h) 22%, var(--bg-1));
  color: color-mix(in srgb, var(--h) 62%, var(--text));
  border: 1px solid color-mix(in srgb, var(--h) 30%, transparent);
  font-weight: 680;
  letter-spacing: 0.02em;
  line-height: 1;
  user-select: none;
}
[data-hue="1"] {
  --h: #2fb38a;
}
[data-hue="2"] {
  --h: #e0883a;
}
[data-hue="3"] {
  --h: #a974ea;
}
[data-hue="4"] {
  --h: #e25f80;
}
[data-hue="5"] {
  --h: #2fb0cc;
}
.p-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-size: 12.5px;
}
.p-avatar-xs {
  width: 20px;
  height: 20px;
  font-size: 8.5px;
  border-width: 0;
}
.p-avatar-ghost {
  background: transparent;
  border: 1px dashed var(--line-2);
  color: var(--text-3);
}
.p-avatar-ghost svg {
  width: 15px;
  height: 15px;
}
.org-mark {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  font-size: 13px;
}
.org-mark-lg {
  width: 56px;
  height: 56px;
  border-radius: 15px;
  font-size: 19px;
}
.org-mark-xs {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  font-size: 8.5px;
  border-width: 0;
}

.org-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  max-width: 220px;
  padding: 0 9px 0 7px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: var(--bg-2);
  color: var(--text-2);
  font: 600 12px/1 var(--sans);
  text-decoration: none;
  white-space: nowrap;
}
.org-badge span {
  overflow: hidden;
  text-overflow: ellipsis;
}
.org-badge svg {
  width: 13px;
  height: 13px;
  flex: none;
}
a.org-badge:hover {
  color: var(--text);
  border-color: var(--accent-line);
}
.org-badge.is-sm {
  height: 20px;
  font-size: 11px;
  padding: 0 7px 0 5px;
}
.org-badge.is-sm svg {
  width: 11px;
  height: 11px;
}
.view-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 9px 0 7px;
  border-radius: 999px;
  background: var(--info-soft);
  color: var(--info);
  font: 600 12px/1 var(--sans);
  white-space: nowrap;
}
.view-pill svg {
  width: 13px;
  height: 13px;
}

.role-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--bg-3);
  color: var(--text-2);
  font: 650 11.5px/1 var(--sans);
  white-space: nowrap;
  vertical-align: middle;
}
.role-pill svg {
  width: 12px;
  height: 12px;
}
.role-pill[data-role="owner"] {
  background: var(--copper-soft);
  color: var(--copper);
}
.role-pill[data-role="admin"] {
  background: var(--info-soft);
  color: var(--info);
}
.role-pill[data-role="member"] {
  background: var(--mask-soft);
  color: var(--mask);
}

/* the projects page: All · Personal · each organisation */
.head-actions {
  gap: 8px;
}
.proj-filter {
  display: flex;
  gap: 6px;
  margin: -8px 0 18px;
  padding: 2px 0 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.proj-filter::-webkit-scrollbar {
  display: none;
}
.pf-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  height: 38px;
  padding: 0 8px 0 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-1);
  color: var(--text-2);
  font-size: 14px;
  font-weight: 560;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.pf-tab:hover {
  color: var(--text);
  border-color: var(--line-2);
}
.pf-tab > svg {
  width: 15px;
  height: 15px;
}
.pf-tab .org-mark-xs {
  margin-left: -4px;
}
.pf-tab.is-on {
  color: var(--text);
  border-color: var(--accent-line);
  background: var(--accent-soft);
}
.pf-name {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tab-n {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--bg-3);
  color: var(--text-3);
  font: 600 11.5px/1 var(--mono);
}
.is-on > .tab-n {
  background: var(--accent);
  color: var(--accent-ink);
}
.admin-tab .tab-n {
  margin-left: 8px;
  vertical-align: 1px;
}
.org-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-1);
}
.os-text {
  display: grid;
  gap: 3px;
  flex: 1;
  min-width: 0;
}
.os-text b {
  font-size: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.os-text span {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-3);
}

/* a board's card: its organisation on the picture, who made it */
.proj-org {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: calc(100% - 20px);
  height: 24px;
  padding: 0 9px 0 7px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg-1) 88%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--text-2);
  font: 600 11.5px/1 var(--sans);
  white-space: nowrap;
}
.proj-org span {
  overflow: hidden;
  text-overflow: ellipsis;
}
.proj-org svg {
  width: 12px;
  height: 12px;
  flex: none;
}
.proj-by {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--text-3);
}
.proj-tags {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.empty-sm {
  padding: 40px 24px;
}
.empty .org-mark-lg {
  margin: 0 auto 16px;
}

/* invitations waiting on the projects page */
.org-invites {
  display: grid;
  gap: 10px;
  margin: 0 0 24px;
}
.org-invite-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--accent-line);
  border-radius: var(--radius);
  background: linear-gradient(90deg, var(--accent-soft), transparent 70%), var(--bg-1);
}
.oi-text {
  display: grid;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
.oi-text b {
  font-size: 15px;
}
.oi-text span {
  font-size: 13px;
  color: var(--text-2);
}
.oi-actions {
  display: flex;
  gap: 8px;
  flex: none;
}
@media (max-width: 640px) {
  .org-invite-card {
    flex-wrap: wrap;
  }
  .oi-text {
    flex-basis: calc(100% - 52px);
  }
  .oi-actions {
    width: 100%;
    justify-content: flex-end;
  }
}

/* the organisation's page */
.org-head {
  align-items: center;
}
.org-title {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}
.org-title h1 {
  overflow-wrap: anywhere;
}
.eyebrow-s {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 6px;
  font: 600 11px/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}
.eyebrow-s svg {
  width: 12px;
  height: 12px;
}
.org-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  font-size: 14px;
}
.org-sub span:not(.role-pill) + span::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  margin-right: 12px;
  border-radius: 50%;
  background: var(--text-3);
  vertical-align: middle;
}
.org-tabs {
  overflow-x: auto;
  flex-wrap: nowrap;
  scrollbar-width: none;
}
.org-tabs .admin-tab {
  white-space: nowrap;
}
.sec-h {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 650;
}
.sec-h .faint {
  font-weight: 500;
}
.org-people {
  margin-bottom: 26px;
  max-width: 900px;
}
.people {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.person {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto 132px auto;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
}
.person:first-child {
  border-top: 0;
}
.person-id {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.person-id b,
.person-id > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.person-id b {
  font-size: 14.5px;
  font-weight: 600;
}
.person-id > span {
  font-size: 13px;
  color: var(--text-3);
}
.person-since {
  font-size: 12.5px;
  white-space: nowrap;
}
.person-role {
  display: flex;
  justify-content: flex-start;
}
.person-actions {
  display: flex;
  justify-content: flex-end;
  gap: 4px;
  min-width: 32px;
}
.person.is-invite[data-state="declined"] .person-id b,
.person.is-invite[data-state="expired"] .person-id b {
  color: var(--text-2);
}
.inv-state {
  font-weight: 600;
}
.inv-state.warn {
  color: var(--warn);
}
.select.role-select {
  height: 34px;
  width: 132px;
  padding: 0 30px 0 10px;
  font-size: 13.5px;
  font-weight: 560;
}
.select.role-select,
#inv-role {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a94a3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 14px;
  cursor: pointer;
}
.select.role-select:disabled {
  opacity: 0.6;
}
.org-invite-form {
  max-width: 900px;
  margin-bottom: 26px;
}
.org-invite-form h2 {
  display: flex;
  align-items: center;
  gap: 10px;
}
.org-invite-form h2 svg {
  width: 20px;
  height: 20px;
  color: var(--accent);
}
.invite-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 160px auto;
  gap: 12px;
  align-items: end;
}
.invite-row .field {
  margin-bottom: 0;
}
.invite-row .btn {
  height: 44px;
}
.invite-row .form-error,
.invite-row .form-ok {
  grid-column: 1 / -1;
  margin: 0;
}
.role-help {
  margin-top: 16px;
  font-size: 13.5px;
}
.role-help summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-2);
  cursor: pointer;
  list-style: none;
}
.role-help summary::-webkit-details-marker {
  display: none;
}
.role-help summary:hover {
  color: var(--text);
}
.role-help summary svg {
  width: 15px;
  height: 15px;
}
.role-help[open] summary {
  margin-bottom: 12px;
}
.role-legend {
  display: grid;
  gap: 10px;
  margin: 0;
}
.role-legend > div {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
}
.role-legend dt {
  margin: 0;
}
.role-legend dd {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-2);
}
.org-rename .input {
  flex: 1 1 260px;
  max-width: 420px;
}
.org-transfer .select {
  flex: 1 1 240px;
  max-width: 380px;
  width: auto;
}
.org-rename .form-error,
.org-rename .form-ok,
.org-transfer .form-error {
  flex-basis: 100%;
  margin: 0;
}
.modal-icon.is-danger {
  background: var(--err-soft);
  color: var(--err);
}
.modal-org .field {
  margin-bottom: 20px;
}
@media (max-width: 720px) {
  .person {
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 6px 12px;
    padding: 12px 14px;
  }
  .person .p-avatar {
    grid-row: span 2;
    align-self: start;
  }
  .person-since {
    display: none;
  }
  .person-role {
    grid-column: 2;
  }
  .person-actions {
    grid-column: 3;
    grid-row: 1 / span 2;
    align-self: center;
  }
  .invite-row {
    grid-template-columns: minmax(0, 1fr);
  }
  .invite-row .btn {
    width: 100%;
  }
  .org-title {
    gap: 12px;
  }
  .org-title .org-mark-lg {
    width: 46px;
    height: 46px;
    font-size: 16px;
    border-radius: 13px;
  }
}
@media (max-width: 480px) {
  .hide-xs {
    display: none;
  }
  .head-actions {
    width: 100%;
  }
  .head-actions > * {
    flex: 1 1 0;
  }
}

/* the invitation's page (an auth card) */
.inv-head {
  margin: 4px 0 14px;
}
.inv-role {
  display: grid;
  gap: 8px;
  justify-items: start;
  margin: 0 0 18px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-2);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-2);
}
.inv-note {
  margin: 0 0 18px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-2);
}
.inv-note.faint {
  margin: 14px 0 0;
  color: var(--text-3);
  text-align: center;
}
.inv-alt {
  margin-top: 10px;
}
.inv-actions {
  display: grid;
  gap: 8px;
}

/* a board for someone who may only look: the note in the composer's place, no Stop, no suggestions */
.viewer-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px dashed var(--line-2);
  border-radius: 14px;
  background: var(--bg-2);
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.45;
}
.viewer-note svg {
  width: 17px;
  height: 17px;
  flex: none;
  margin-top: 1px;
  color: var(--info);
}
.viewer-note a {
  color: var(--text);
  font-weight: 600;
}
.reply.is-viewer .composer,
.hub-reply.is-viewer .composer,
.reply.is-viewer > .suggest,
.reply.is-viewer [data-stop],
.hub-reply.is-viewer .chips {
  display: none !important;
}
.reply.is-viewer .reply-state:not(:empty) {
  margin-top: 8px;
}
.hub-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

/* the composer's "Create in": a select in the composer's bar */
.create-in {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 0 8px 0 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-2);
  color: var(--text-2);
  font-size: 13px;
  font-weight: 560;
  white-space: nowrap;
  cursor: pointer;
}
.create-in:has(select:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.create-in > svg {
  width: 15px;
  height: 15px;
  flex: none;
}
.create-in select {
  appearance: none;
  -webkit-appearance: none;
  max-width: 180px;
  height: 36px;
  padding: 0 20px 0 2px;
  border: 0;
  background: transparent;
  color: var(--text);
  font-weight: 650;
  text-overflow: ellipsis;
  cursor: pointer;
}
.create-in select:focus {
  outline: none;
}
.create-in .ci-chev {
  position: absolute;
  right: 8px;
  width: 13px;
  height: 13px;
  pointer-events: none;
}
@media (max-width: 480px) {
  .create-in .ci-k {
    display: none;
  }
}

/* the Clone box for someone who does not manage the board */
.clone-note {
  display: flex;
  gap: 6px;
  margin: 6px 0 2px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-3);
}
.clone-note svg {
  width: 13px;
  height: 13px;
  flex: none;
  margin-top: 2px;
}
.au-orgs {
  display: inline-flex;
  gap: 4px;
}
.run-for {
  font-size: 12px;
}

/* who wrote a message on an organisation's board (static/js/people.js): their initials on their tint */
.avatar.is-person {
  --h: #5b8def;
  border-radius: 50%;
  font-size: 9px;
  letter-spacing: 0.02em;
  background: color-mix(in srgb, var(--h) 24%, var(--bg-1));
  color: color-mix(in srgb, var(--h) 62%, var(--text));
}

/* a viewer's board: what would change something is not there (the server refuses it anyway) */
.is-viewer [data-vrestore],
.is-viewer .edit-actions .btn,
.is-viewer .edit-hint,
.is-viewer [data-plan-go],
.is-viewer [data-plan-no],
.is-viewer .suggest,
.is-viewer .prod-banner-a,
.is-viewer [data-update],
.is-viewer [data-recheck],
.is-viewer [data-rebuild],
.is-viewer [data-act="run"],
.is-viewer [data-act="stop"],
.is-viewer [data-act="test"],
.is-viewer [data-act="debug-start"],
.is-viewer [data-press],
.is-viewer [data-model],
.is-viewer [data-model-start],
.is-viewer .sim-upload {
  display: none !important;
}
.qcard.is-locked form,
.qcard.is-locked [data-drop] {
  opacity: 0.72;
}
.qcard.is-locked .qcard-actions,
.qcard.is-locked .qcard-defaults,
.qcard.is-locked [data-dsend] {
  display: none;
}
.qcard-lock {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--info-soft);
  color: var(--info);
  font-size: 13.5px;
}
.qcard-lock svg {
  width: 16px;
  height: 16px;
  flex: none;
}

/* the board settings' "Where it lives" and the Move dialog */
.setting-org {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.setting-k {
  display: block;
  margin-bottom: 8px;
  font-size: 13.5px;
  font-weight: 560;
  color: var(--text-2);
}
.setting-org-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.setting-org-row .org-badge {
  height: 30px;
  font-size: 13px;
}
.modal-move {
  max-width: 480px;
}
.move-opts {
  display: grid;
  gap: 8px;
  margin: 0 0 16px;
  padding: 0;
  border: 0;
}
.move-opt {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-2);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.move-opt:hover {
  border-color: var(--line-2);
}
.move-opt:has(input:checked) {
  border-color: var(--accent-line);
  background: var(--accent-soft);
}
.move-opt input {
  accent-color: var(--accent);
  width: 16px;
  height: 16px;
  flex: none;
}
.move-opt .org-mark {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  font-size: 12px;
}
.org-mark.is-personal {
  --h: #8a94a3;
}
.org-mark.is-personal svg {
  width: 16px;
  height: 16px;
}
.move-t {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.move-t b {
  font-size: 14.5px;
}
.move-t span {
  font-size: 13px;
  color: var(--text-2);
}
.move-warn {
  display: flex;
  gap: 8px;
  margin: -4px 0 16px;
  font-size: 13.5px;
  color: var(--warn);
}
.move-warn svg {
  width: 16px;
  height: 16px;
  flex: none;
  margin-top: 2px;
}

/* the account page's organisations */
.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}
.panel-head h2 {
  margin-bottom: 0;
}
.acct-orgs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.acct-orgs a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-2);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s;
}
.acct-orgs a:hover {
  border-color: var(--line-2);
}
.ao-t {
  display: grid;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.ao-t b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ao-t span {
  font-size: 13px;
  color: var(--text-3);
}
.ao-go {
  width: 16px;
  height: 16px;
  color: var(--text-3);
  flex: none;
}
.danger-zone .notice {
  margin-bottom: 14px;
}

/* the organisation's People tab: the people beside what each role may do */
.org-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 24px;
  align-items: start;
}
.org-main > :last-child {
  margin-bottom: 0;
}
.org-aside {
  position: sticky;
  top: calc(var(--header-h) + 16px);
}
.roles-card h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  font-size: 1rem;
}
.roles-card h2 svg {
  width: 18px;
  height: 18px;
  color: var(--accent);
}
.roles-card .role-legend > div {
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
}
.roles-note {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  line-height: 1.5;
}
.person-role {
  width: 132px;
}
#inv-role {
  height: 44px;
  width: 100%;
  font-size: 14.5px;
}
.proj-by svg {
  width: 14px;
  height: 14px;
  margin: 0 3px;
}
@media (max-width: 1100px) {
  .org-cols {
    grid-template-columns: minmax(0, 1fr);
  }
  .org-aside {
    position: static;
  }
}
@media (max-width: 720px) {
  .person-role {
    width: auto;
  }
}
.inv-org {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  color: var(--text);
  font-size: 15px;
}
.inv-org b {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 720px) {
  .person-id > span {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}
.inv-actions .btn,
.auth-card .inv-alt {
  white-space: normal;
  height: auto;
  min-height: 48px;
  text-align: center;
}

/* ---------- boards: the card's selection box and menu, the selection bar (static/js/projects.js) */
.proj-card {
  position: relative;
}
.proj-link {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}
.proj-link:focus-visible {
  outline: 2px solid var(--copper);
  outline-offset: 2px;
}
.proj-check,
.proj-menu-btn {
  position: absolute;
  top: 10px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  border: 1px solid var(--line-2);
  background: color-mix(in srgb, var(--bg-1) 90%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--text-2);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s, border-color 0.15s;
}
.proj-check {
  left: 10px;
}
.proj-menu-btn {
  right: 10px;
}
.proj-check input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}
.proj-check svg {
  width: 16px;
  height: 16px;
  opacity: 0;
}
.proj-menu-btn svg {
  width: 16px;
  height: 16px;
}
.proj-card:hover .proj-check,
.proj-card:hover .proj-menu-btn,
.proj-card:focus-within .proj-check,
.proj-card:focus-within .proj-menu-btn,
.is-selecting .proj-check,
.proj-check:has(input:focus-visible) {
  opacity: 1;
}
.proj-check:has(input:focus-visible),
.proj-menu-btn:focus-visible {
  outline: 2px solid var(--copper);
  outline-offset: 2px;
}
.proj-card.is-selected {
  border-color: var(--copper-line);
  box-shadow: 0 0 0 1px var(--copper-line), var(--shadow);
}
.proj-card.is-selected .proj-check {
  background: var(--copper);
  border-color: var(--copper);
  color: var(--copper-ink);
}
.proj-card.is-selected .proj-check svg {
  opacity: 1;
}
/* the organisation's chip stays clear of the box */
.proj-org {
  left: 48px;
}
@media (hover: none) {
  .proj-check,
  .proj-menu-btn {
    opacity: 1;
  }
}
.proj-by .pb-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.share-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
  margin-left: auto;
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  font: 600 11px/1 var(--sans);
  border: 1px solid var(--line);
  color: var(--text-2);
}
.share-pill svg {
  width: 11px;
  height: 11px;
}
.share-pill.is-edit {
  color: var(--c-pcb);
  border-color: color-mix(in srgb, var(--c-pcb) 40%, transparent);
  background: color-mix(in srgb, var(--c-pcb) 10%, transparent);
}

.card-menu {
  position: absolute;
  z-index: 80;
  min-width: 210px;
  padding: 6px;
  border-radius: 12px;
  border: 1px solid var(--line-2);
  background: var(--bg-1);
  box-shadow: 0 18px 40px rgb(0 0 0 / 0.28);
  display: grid;
}
.card-menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--text);
  font: 500 14px/1.2 var(--sans);
  text-align: left;
  cursor: pointer;
}
.card-menu button svg {
  width: 16px;
  height: 16px;
  color: var(--text-3);
}
.card-menu button:hover,
.card-menu button:focus-visible {
  background: var(--bg-2);
  outline: none;
}
.card-menu .is-danger,
.card-menu .is-danger svg {
  color: var(--err);
}

.sel-bar {
  position: sticky;
  bottom: 16px;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 12px;
  width: fit-content;
  max-width: 100%;
  margin: 18px auto 0;
  padding: 8px 8px 8px 16px;
  border-radius: 14px;
  border: 1px solid var(--line-2);
  background: var(--bg-1);
  box-shadow: 0 16px 40px rgb(0 0 0 / 0.25);
}
.sel-bar[hidden] {
  display: none;
}
.sel-n {
  font: 600 14px/1 var(--sans);
  white-space: nowrap;
}
.sel-actions {
  display: flex;
  gap: 6px;
}
.btn-danger-ghost {
  --b-fg: var(--err);
}
@media (max-width: 560px) {
  .sel-bar {
    gap: 6px;
    padding-left: 12px;
  }
  .sel-actions .btn span {
    display: none;
  }
}

/* ---------- sharing with organisations (static/js/share-dialog.js) */
.modal-card.modal-share {
  max-width: 520px;
}
.oshare,
.share-link-sec {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}
.share-link-sec {
  padding-top: 18px;
  border-top: 1px solid var(--line);
  margin-top: 20px;
}
.oshare-head {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.oshare-head > svg {
  width: 18px;
  height: 18px;
  flex: none;
  margin-top: 2px;
  color: var(--text-2);
}
.oshare-head div {
  display: grid;
  gap: 2px;
}
.oshare-head span {
  color: var(--text-2);
  font-size: 13.5px;
  line-height: 1.45;
}
.oshare-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
.oshare-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
}
.oshare-row + .oshare-row {
  border-top: 1px solid var(--line);
}
.oshare-row.is-busy {
  opacity: 0.6;
}
.oshare-name {
  display: grid;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.oshare-name b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.oshare-name span {
  color: var(--text-3);
  font-size: 12.5px;
}
.oshare-row .select {
  width: auto;
  min-width: 128px;
  height: 36px;
  padding: 0 10px;
  font-size: 14px;
}
.oshare-empty {
  display: grid;
  justify-items: start;
  gap: 10px;
  padding: 14px;
  border: 1px dashed var(--line-2);
  border-radius: 12px;
  color: var(--text-2);
  font-size: 14px;
}
.oshare-empty > svg {
  width: 20px;
  height: 20px;
}
.oshare-foot {
  color: var(--text-3);
  font-size: 12.5px;
  margin: 0;
}
@media (max-width: 480px) {
  .oshare-row {
    flex-wrap: wrap;
  }
  .oshare-row .select {
    width: 100%;
  }
}

/* ---------- the board's git dialog and "Link to GitHub" (static/js/git-dialog.js) */
.modal-card.modal-git {
  max-width: 560px;
}
.git-sec {
  display: grid;
  gap: 8px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.git-sec h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
}
.git-sec h3 svg {
  width: 18px;
  height: 18px;
}
.gh-lead,
.gh-hint {
  margin: 0;
  color: var(--text-2);
  font-size: 13.5px;
  line-height: 1.5;
}
.gh-hint {
  color: var(--text-3);
  font-size: 12.5px;
}
.gh-link {
  display: grid;
  gap: 12px;
}
.gh-link .btn svg,
.gh-repo svg,
.gh-state > svg {
  width: 16px;
  height: 16px;
}
.gh-fields {
  display: grid;
  grid-template-columns: 1fr 130px;
  gap: 10px;
}
@media (max-width: 480px) {
  .gh-fields {
    grid-template-columns: 1fr;
  }
}
.gh-linked {
  display: grid;
  gap: 12px;
}
.gh-repo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  flex-wrap: wrap;
}
.gh-repo a {
  color: var(--text);
}
.gh-br {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  color: var(--text-2);
  font: 500 12px/1.4 var(--mono, ui-monospace, monospace);
}
.gh-br svg {
  width: 12px;
  height: 12px;
}
.gh-state {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--bg-2);
}
.gh-state > svg {
  flex: none;
  margin-top: 2px;
}
.gh-state div {
  display: grid;
  gap: 2px;
}
.gh-state span {
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.45;
}
.gh-state.is-ok > svg {
  color: var(--c-pcb);
}
.gh-state.is-wait > svg {
  color: var(--wait);
}
.gh-state.is-err {
  border-color: color-mix(in srgb, var(--err) 35%, transparent);
}
.gh-state.is-err > svg {
  color: var(--err);
}
.gh-steps {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 8px;
  font-size: 13.5px;
  color: var(--text-2);
}
.gh-steps a {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.gh-steps a svg {
  width: 12px;
  height: 12px;
}
.gh-steps .clone-row {
  margin-top: 6px;
}
.gh-steps .clone-row code {
  word-break: break-all;
  white-space: normal;
  font-size: 11.5px;
}
.gh-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.gh-actions .btn svg {
  width: 15px;
  height: 15px;
}
/* long clone commands wrap inside the dialog instead of widening it */
.modal-git .clone-row {
  min-width: 0;
}
.modal-git .clone-row code {
  white-space: normal;
  word-break: break-all;
  overflow: visible;
  text-overflow: clip;
}
.modal-git .git-sec,
.modal-git .gh-link,
.modal-git .gh-fields > * {
  min-width: 0;
}

/* ---------- the header's GitHub chip (static/js/github-chip.js) */
.gh-chip {
  gap: 7px;
  max-width: 100%;
}
.gh-chip > svg {
  width: 15px;
  height: 15px;
  flex: none;
}
.gh-chip-repo {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 220px;
  font-weight: 600;
}
.gh-chip-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: none;
  background: var(--text-3);
}
.gh-chip-st {
  color: var(--text-2);
  white-space: nowrap;
}
.gh-chip.is-ok .gh-chip-dot {
  background: var(--c-pcb);
}
.gh-chip.is-wait .gh-chip-dot {
  background: var(--wait);
}
.gh-chip.is-sync .gh-chip-dot {
  background: var(--c-cad);
  animation: gh-pulse 1.2s ease-in-out infinite;
}
.gh-chip.is-err {
  border-color: color-mix(in srgb, var(--err) 40%, transparent);
}
.gh-chip.is-err .gh-chip-dot {
  background: var(--err);
}
.gh-chip.is-err .gh-chip-st {
  color: var(--err);
}
.gh-chip.is-off .gh-chip-st {
  color: var(--text-2);
}
@keyframes gh-pulse {
  50% {
    opacity: 0.35;
  }
}
@media (prefers-reduced-motion: reduce) {
  .gh-chip.is-sync .gh-chip-dot {
    animation: none;
  }
}
@media (max-width: 560px) {
  .gh-chip-repo {
    max-width: 120px;
  }
}