/* AdNora V3 product graphics. Rendered by js/gfx.js into <div class="gfx" data-gfx="ID">.
   Each graphic is drawn on a fixed-size stage (px) and scaled to the container width, so a
   cockpit at 360px is a crisp miniature instead of a reflowed mess. The container reserves its
   aspect ratio from --sw/--sh, so there is no layout shift.
   Reads only the page tokens --bg --bg-2 --surface --surface-2 --line --text --muted --accent
   --accent-soft --ok --warn --shadow --font-display --font-body --font-mono, with fallbacks.
   Internal names use the gx- prefix to stay clear of site.css. */

/* ------------------------------------------------------------ Fallback tokens + device materials */
:where(:root), :where([data-theme="light"]) {
  --gx-bg: #E6E7E9; --gx-bg-2: #DEDFE2; --gx-surface: #F3F4F5; --gx-surface-2: #FBFBFB;
  --gx-line: rgba(18,18,20,.10); --gx-text: #121214; --gx-muted: #55585E;
  --gx-accent: #D50620; --gx-accent-soft: rgba(213,6,32,.08); --gx-ok: #2F7A55; --gx-warn: #B26B00;
  --gx-shadow: 0 1px 2px rgba(28,32,42,.06), 0 14px 34px -20px rgba(28,32,42,.32);
  --gx-alu-1: #F1F2F4; --gx-alu-2: #CFD1D5; --gx-alu-3: #9EA1A8;
  --gx-bezel: #0C0C0E; --gx-edge: #A7AAB1; --gx-hi: rgba(255,255,255,.75);
  --gx-dev-shadow: 0 2px 4px rgba(28,32,42,.10), 0 30px 60px -24px rgba(28,32,42,.42), 0 70px 120px -50px rgba(40,44,60,.45);
  --gx-contact: rgba(28,32,42,.34);
}
:where([data-theme="dark"]) {
  --gx-bg: #0E0F11; --gx-bg-2: #131417; --gx-surface: #17181B; --gx-surface-2: #1E1F23;
  --gx-line: rgba(255,255,255,.09); --gx-text: #EEEEF0; --gx-muted: #A2A4AA;
  --gx-accent: #E5283C; --gx-accent-soft: rgba(229,40,60,.14); --gx-ok: #4CB884; --gx-warn: #E3A33B;
  --gx-shadow: 0 1px 2px rgba(0,0,0,.45), 0 18px 40px -20px rgba(0,0,0,.75);
  --gx-alu-1: #6A6C73; --gx-alu-2: #3E4045; --gx-alu-3: #222327;
  --gx-bezel: #050506; --gx-edge: #4B4D54; --gx-hi: rgba(255,255,255,.06);
  --gx-dev-shadow: 0 2px 6px rgba(0,0,0,.5), 0 34px 70px -26px rgba(0,0,0,.85), 0 80px 140px -60px rgba(0,0,0,.8);
  --gx-contact: rgba(0,0,0,.7);
}
@media (prefers-color-scheme: dark) {
  :where(:root:not([data-theme])) {
    --gx-bg: #0E0F11; --gx-bg-2: #131417; --gx-surface: #17181B; --gx-surface-2: #1E1F23;
    --gx-line: rgba(255,255,255,.09); --gx-text: #EEEEF0; --gx-muted: #A2A4AA;
    --gx-accent: #E5283C; --gx-accent-soft: rgba(229,40,60,.14); --gx-ok: #4CB884; --gx-warn: #E3A33B;
    --gx-shadow: 0 1px 2px rgba(0,0,0,.45), 0 18px 40px -20px rgba(0,0,0,.75);
    --gx-alu-1: #6A6C73; --gx-alu-2: #3E4045; --gx-alu-3: #222327;
    --gx-bezel: #050506; --gx-edge: #4B4D54; --gx-hi: rgba(255,255,255,.06);
    --gx-dev-shadow: 0 2px 6px rgba(0,0,0,.5), 0 34px 70px -26px rgba(0,0,0,.85), 0 80px 140px -60px rgba(0,0,0,.8);
    --gx-contact: rgba(0,0,0,.7);
  }
}

/* ------------------------------------------------------------ Container + scaling */
.gfx {
  --g-bg: var(--bg, var(--gx-bg));
  --g-bg-2: var(--bg-2, var(--gx-bg-2));
  --g-surface: var(--surface, var(--gx-surface));
  --g-surface-2: var(--surface-2, var(--gx-surface-2));
  --g-line: var(--line, var(--gx-line));
  --g-text: var(--text, var(--gx-text));
  --g-muted: var(--muted, var(--gx-muted));
  --g-accent: var(--accent, var(--gx-accent));
  --g-accent-soft: var(--accent-soft, var(--gx-accent-soft));
  --g-ok: var(--ok, var(--gx-ok));
  --g-warn: var(--warn, var(--gx-warn));
  --g-shadow: var(--shadow, var(--gx-shadow));
  --g-display: var(--font-display, "Mona Sans", ui-sans-serif, system-ui, sans-serif);
  --g-body: var(--font-body, "Mona Sans", ui-sans-serif, system-ui, sans-serif);
  --g-mono: var(--font-mono, "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace);
  /* derived, AA-safe inks for small text */
  --g-fill: #D50620;
  --g-accent-ink: color-mix(in srgb, var(--g-accent) 68%, var(--g-text));
  --g-warn-ink: color-mix(in srgb, var(--g-warn) 70%, var(--g-text));
  --g-ok-ink: color-mix(in srgb, var(--g-ok) 78%, var(--g-text));
  --g-warn-soft: color-mix(in srgb, var(--g-warn) 15%, transparent);
  --g-ok-soft: color-mix(in srgb, var(--g-ok) 14%, transparent);
  --g-tint: color-mix(in srgb, var(--g-text) 5%, transparent);
  --g-tint-2: color-mix(in srgb, var(--g-text) 9%, transparent);
  --g-line-2: color-mix(in srgb, var(--g-text) 15%, transparent);
  --g-ease: cubic-bezier(.16, 1, .3, 1);
  --g-spring: cubic-bezier(.32, .72, 0, 1);

  --cw: 600; --ch: 400;
  --sw: var(--cw); --sh: var(--ch);
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: var(--sw) / var(--sh);
  container-type: inline-size;
  color: var(--g-text);
  font-family: var(--g-body);
  font-size: 13px;
  font-weight: 400;
  font-stretch: 100%;
  line-height: 1.38;
  letter-spacing: 0;
  text-align: left;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.gfx *, .gfx *::before, .gfx *::after { box-sizing: border-box; }
.gfx svg { display: block; flex: none; overflow: visible; }

/* Content size per graphic (unitless px). */
.gfx[data-gfx="cockpit"]       { --cw: 1240; --ch: 776; }
.gfx[data-gfx="project"]       { --cw: 1200; --ch: 740; }
.gfx[data-gfx="weekplan"]      { --cw: 1200; --ch: 740; }
.gfx[data-gfx="approval"]      { --cw: 1200; --ch: 760; }
.gfx[data-gfx="subcontractor"] { --cw: 1040; --ch: 700; }
.gfx[data-gfx="diary"]         { --cw: 372;  --ch: 790; }
.gfx[data-gfx="next-steps"]    { --cw: 560;  --ch: 450; }
.gfx[data-gfx="assistant"]     { --cw: 600;  --ch: 480; }
.gfx[data-gfx="contract"]      { --cw: 600;  --ch: 680; }
.gfx[data-gfx="reminders"]     { --cw: 540;  --ch: 470; }
.gfx[data-gfx="pipeline"]      { --cw: 600;  --ch: 560; }
.gfx[data-gfx="flow"]          { --cw: 1200; --ch: 640; }
.gfx[data-gfx="security"]      { --cw: 960;  --ch: 640; }
.gfx[data-gfx="timeline"]      { --cw: 620;  --ch: 760; }
.gfx[data-gfx="stats"]         { --cw: 560;  --ch: 560; }

/* Device frame adds to the stage. Defaults per ID apply when data-device is absent. */
.gfx[data-device="browser"],
.gfx:not([data-device]):is([data-gfx="project"], [data-gfx="weekplan"], [data-gfx="approval"]) {
  --sh: calc(var(--ch) + 40);
}
.gfx[data-device="laptop"], .gfx:not([data-device])[data-gfx="cockpit"] {
  --sw: calc(var(--cw) + 156); --sh: calc(var(--ch) + 72);
}
.gfx[data-device="tablet"], .gfx:not([data-device])[data-gfx="subcontractor"] {
  --sw: calc(var(--cw) + 44); --sh: calc(var(--ch) + 44);
}
.gfx[data-device="phone"], .gfx:not([data-device])[data-gfx="diary"] {
  --sw: calc(var(--cw) + 24); --sh: calc(var(--ch) + 24);
}

.gx-stage {
  position: absolute;
  left: 0; top: 0;
  width: calc(var(--sw) * 1px);
  height: calc(var(--sh) * 1px);
  transform-origin: 0 0;
  transform: scale(var(--gk, 1));
}
@supports (width: calc(1px * tan(atan2(1px, 2px)))) {
  .gx-stage { transform: scale(tan(atan2(100cqw, calc(var(--sw) * 1px)))); }
}

/* ------------------------------------------------------------ Device frames */
.gx-dev { position: absolute; inset: 0; }
.gx-screen {
  position: relative;
  width: calc(var(--cw) * 1px);
  height: calc(var(--ch) * 1px);
  overflow: hidden;
  background: var(--g-bg);
  isolation: isolate;
}

/* Browser window */
.gx-browser {
  display: flex; flex-direction: column;
  border-radius: 14px;
  overflow: hidden;
  background: var(--g-surface);
  box-shadow: 0 0 0 1px var(--g-line-2), var(--gx-dev-shadow);
}
.gx-browser::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 1px 0 var(--gx-hi);
}
.gx-bar {
  position: relative; height: 40px; flex: none;
  display: flex; align-items: center; gap: 8px; padding: 0 16px;
  background: color-mix(in srgb, var(--g-surface), var(--g-text) 3%);
  border-bottom: 1px solid var(--g-line);
}
.gx-bar__dot { width: 11px; height: 11px; border-radius: 50%; background: var(--g-tint-2); box-shadow: inset 0 0 0 1px var(--g-line); }
.gx-bar__url {
  position: absolute; left: 50%; top: 7px; width: 440px; margin-left: -220px; height: 26px;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  border-radius: 999px; background: var(--g-bg); box-shadow: inset 0 0 0 1px var(--g-line);
  font: 400 11.5px/1 var(--g-mono); color: var(--g-muted);
}
.gx-bar__url .gx-i { width: 12px; height: 12px; }
.gx-bar__tools { margin-left: auto; display: flex; gap: 12px; color: var(--g-muted); }
.gx-bar__tools .gx-i { width: 15px; height: 15px; }

/* Laptop */
.gx-laptop__lid {
  position: absolute; left: 60px; top: 0;
  width: calc(var(--cw) * 1px + 36px);
  height: calc(var(--ch) * 1px + 44px);
  padding: 22px 18px;
  border-radius: 26px 26px 10px 10px;
  background: var(--gx-bezel);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 0 0 1.5px var(--gx-edge),
    0 0 0 3px color-mix(in srgb, var(--gx-edge) 35%, transparent), var(--gx-dev-shadow);
}
.gx-laptop__lid::before {
  content: ""; position: absolute; left: 50%; top: 8px; width: 6px; height: 6px; margin-left: -3px;
  border-radius: 50%; background: #1E2026; box-shadow: inset 0 0 0 1.5px #2C2F37;
}
.gx-laptop .gx-screen { border-radius: 6px; }
.gx-laptop__base {
  position: absolute; left: 0; right: 0;
  top: calc(var(--ch) * 1px + 42px); height: 30px;
  border-radius: 3px 3px 22px 22px / 3px 3px 14px 14px;
  background: linear-gradient(180deg, var(--gx-alu-1) 0%, var(--gx-alu-2) 38%, var(--gx-alu-3) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -2px 3px rgba(0,0,0,.18);
}
.gx-laptop__base::before {
  content: ""; position: absolute; left: 50%; top: 0; width: 170px; margin-left: -85px; height: 10px;
  border-radius: 0 0 12px 12px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--gx-alu-3), #000 25%), var(--gx-alu-2));
}
.gx-laptop__base::after {
  content: ""; position: absolute; left: 6%; right: 6%; bottom: -26px; height: 40px; z-index: -1;
  background: radial-gradient(50% 50% at 50% 50%, var(--gx-contact), transparent 72%);
}

/* Tablet (landscape) */
.gx-tablet {
  padding: 22px;
  border-radius: 38px;
  background: var(--gx-bezel);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 0 0 2px var(--gx-edge),
    0 0 0 3.5px color-mix(in srgb, var(--gx-edge) 40%, transparent), var(--gx-dev-shadow);
}
.gx-tablet::before {
  content: ""; position: absolute; left: 8px; top: calc(50% - 3px); width: 6px; height: 6px;
  border-radius: 50%; background: #1E2026;
}
.gx-tablet .gx-screen { border-radius: 16px; }

/* Phone */
.gx-phone {
  padding: 12px;
  border-radius: 58px;
  background: var(--gx-bezel);
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.1), 0 0 0 2px var(--gx-edge),
    0 0 0 4px color-mix(in srgb, var(--gx-edge) 40%, transparent), var(--gx-dev-shadow);
}
.gx-phone::before, .gx-phone::after {
  content: ""; position: absolute; width: 4px; border-radius: 2px; background: var(--gx-edge);
}
.gx-phone::before { left: -6px; top: 170px; height: 62px; }
.gx-phone::after { right: -6px; top: 220px; height: 96px; }
.gx-phone .gx-screen { border-radius: 46px; }
.gx-island {
  position: absolute; left: 50%; top: 11px; width: 112px; margin-left: -56px; height: 32px;
  border-radius: 20px; background: #000; z-index: 5;
}

/* Plate: a screen without a device, for data-device="none" on screen graphics */
.gx-plate .gx-screen { border-radius: 18px; box-shadow: 0 0 0 1px var(--g-line-2), var(--gx-dev-shadow); }

/* Glare on device glass */
.gx-glare::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 20;
  background: linear-gradient(118deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 34%);
}

/* Double-bezel card shell for card graphics */
.gx-shell {
  position: absolute; inset: 0;
  padding: 6px;
  border-radius: 28px;
  background: color-mix(in srgb, var(--g-surface), var(--g-text) 4%);
  box-shadow: inset 0 0 0 1px var(--g-line), var(--g-shadow);
}
.gx-core {
  position: relative; height: 100%;
  border-radius: 22px;
  overflow: hidden;
  background: var(--g-surface-2);
  box-shadow: inset 0 1px 0 var(--gx-hi), 0 0 0 1px var(--g-line);
}

/* Sample-data label, drawn inside the stage so it scales with the graphic */
.gx-cap {
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 9px;
  border-radius: 999px;
  font: 500 10.5px/1 var(--g-mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--g-muted);
  background: var(--g-tint);
  box-shadow: inset 0 0 0 1px var(--g-line);
  white-space: nowrap;
}
.gx-cap::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--g-muted); opacity: .7; }
.gx-cap--float { position: absolute; right: 14px; bottom: 12px; z-index: 6; }

/* ------------------------------------------------------------ UI atoms (shared by all mockups) */
.gx-i { width: 16px; height: 16px; fill: currentColor; }
.gx-i--s { width: 13px; height: 13px; }
.gx-i--l { width: 20px; height: 20px; }
.gx-mark { width: 30px; height: auto; color: var(--g-text); }

.gx-h1 { font-family: var(--g-display); font-size: 21px; font-weight: 580; font-stretch: 112%; letter-spacing: -.012em; line-height: 1.15; }
.gx-h2 { font-family: var(--g-display); font-size: 15px; font-weight: 600; font-stretch: 106%; letter-spacing: -.005em; line-height: 1.25; }
.gx-h3 { font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.gx-t { font-size: 13px; }
.gx-s { font-size: 11.5px; color: var(--g-muted); }
.gx-xs { font-size: 10.5px; color: var(--g-muted); }
.gx-mono { font-family: var(--g-mono); font-size: 11px; letter-spacing: .02em; }
.gx-label { font: 500 10px/1 var(--g-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--g-muted); }
.gx-b { font-weight: 600; }
.gx-red { color: var(--g-accent-ink); }
.gx-row { display: flex; align-items: center; gap: 8px; }
.gx-col { display: flex; flex-direction: column; }
.gx-grow { flex: 1 1 auto; min-width: 0; }
.gx-ell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gx-sp { margin-left: auto; }

/* App shell */
.gx-app { display: grid; grid-template-columns: 224px 1fr; height: 100%; background: var(--g-bg); }
.gx-app--rail { grid-template-columns: 64px 1fr; }
.gx-main { display: flex; flex-direction: column; min-width: 0; height: 100%; }
.gx-body { flex: 1 1 auto; min-height: 0; padding: 22px 28px; overflow: hidden; }

/* Sidebar */
.gx-side {
  display: flex; flex-direction: column; gap: 2px;
  padding: 18px 12px 12px;
  background: var(--g-surface);
  border-right: 1px solid var(--g-line);
}
.gx-brand { display: flex; align-items: center; gap: 10px; padding: 0 8px 18px; }
.gx-brand .gx-mark { width: 30px; }
.gx-brand__name { font-family: var(--g-display); font-size: 15px; font-weight: 620; font-stretch: 112%; letter-spacing: -.01em; }
.gx-brand__sub { font-size: 10.5px; color: var(--g-muted); }
.gx-nav {
  display: flex; align-items: center; gap: 10px;
  height: 33px; padding: 0 10px; border-radius: 10px;
  font-size: 13px; color: color-mix(in srgb, var(--g-text) 82%, var(--g-muted));
}
.gx-nav .gx-i { width: 16px; height: 16px; color: var(--g-muted); }
.gx-nav.is-on { background: var(--g-accent-soft); color: var(--g-accent-ink); font-weight: 600; }
.gx-nav.is-on .gx-i { color: var(--g-accent-ink); }
.gx-nav--sub { height: 28px; padding-left: 36px; font-size: 12px; }
.gx-nav__pct { margin-left: auto; font: 400 11px/1 var(--g-mono); color: var(--g-muted); }
.gx-nav__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--g-fill); margin-left: 2px; }
.gx-sec { font: 500 9.5px/1 var(--g-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--g-muted); padding: 16px 10px 8px; }
.gx-user {
  margin-top: auto; display: flex; align-items: center; gap: 10px;
  padding: 10px; border-radius: 14px;
  background: var(--g-surface-2); box-shadow: 0 0 0 1px var(--g-line);
}
.gx-rail { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 0; background: var(--g-surface); border-right: 1px solid var(--g-line); }
.gx-rail .gx-nav { width: 40px; height: 40px; padding: 0; justify-content: center; }
.gx-rail .gx-nav .gx-i { width: 19px; height: 19px; }
.gx-rail .gx-mark { width: 30px; margin-bottom: 14px; }

/* Avatars, badges */
.gx-av {
  flex: none; display: inline-grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%;
  font: 500 10.5px/1 var(--g-mono); letter-spacing: .02em;
  color: var(--g-text); background: var(--g-tint-2); box-shadow: inset 0 0 0 1px var(--g-line);
}
.gx-av--s { width: 24px; height: 24px; font-size: 9px; }
.gx-av--ink { background: var(--g-text); color: var(--g-surface-2); box-shadow: none; }
.gx-av--red { background: var(--g-fill); color: #fff; box-shadow: none; }
.gx-badge {
  display: inline-grid; place-items: center; min-width: 20px; height: 18px; padding: 0 6px;
  border-radius: 999px; background: var(--g-fill); color: #fff;
  font: 600 10.5px/1 var(--g-mono);
}
.gx-badge--soft { background: var(--g-tint-2); color: var(--g-text); }

/* Top bar */
.gx-top {
  flex: none; display: flex; align-items: center; gap: 14px;
  height: 66px; padding: 0 28px;
  border-bottom: 1px solid var(--g-line);
  background: color-mix(in srgb, var(--g-bg), var(--g-surface) 40%);
}
.gx-crumb { font-size: 11px; color: var(--g-muted); margin-bottom: 3px; }
.gx-date { font-size: 12px; color: var(--g-muted); }
.gx-iconbtn {
  position: relative; display: inline-grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--g-surface-2); box-shadow: 0 0 0 1px var(--g-line); color: var(--g-text);
}
.gx-iconbtn .gx-badge { position: absolute; top: -5px; right: -6px; min-width: 17px; height: 16px; font-size: 9.5px; padding: 0 4px; }

/* Tabs */
.gx-tabs { flex: none; display: flex; gap: 26px; padding: 0 28px; height: 46px; align-items: stretch; border-bottom: 1px solid var(--g-line); background: color-mix(in srgb, var(--g-bg), var(--g-surface) 40%); }
.gx-tab { position: relative; display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--g-muted); white-space: nowrap; }
.gx-tab.is-on { color: var(--g-text); font-weight: 600; }
.gx-tab.is-on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px; background: var(--g-fill); }
.gx-tab .gx-badge { height: 16px; min-width: 18px; font-size: 9.5px; }

/* Cards, chips, buttons */
.gx-card {
  position: relative;
  border-radius: 16px;
  background: var(--g-surface-2);
  box-shadow: 0 0 0 1px var(--g-line), 0 1px 2px color-mix(in srgb, var(--g-text) 5%, transparent);
}
.gx-card--top-red { box-shadow: 0 0 0 1px var(--g-line), inset 0 3px 0 var(--g-fill); }
.gx-card--top-warn { box-shadow: 0 0 0 1px var(--g-line), inset 0 3px 0 var(--g-warn); }
.gx-card--top-ink { box-shadow: 0 0 0 1px var(--g-line), inset 0 3px 0 var(--g-line-2); }
.gx-well { border-radius: 12px; background: var(--g-tint); padding: 10px 12px; }
.gx-hr { height: 1px; background: var(--g-line); }

.gx-chip {
  display: inline-flex; align-items: center; gap: 5px;
  height: 22px; padding: 0 9px; border-radius: 999px;
  font-size: 11px; font-weight: 500; white-space: nowrap;
  color: color-mix(in srgb, var(--g-text) 80%, var(--g-muted));
  background: var(--g-tint);
  box-shadow: inset 0 0 0 1px var(--g-line);
}
.gx-chip .gx-i { width: 12px; height: 12px; }
.gx-chip--crit { color: var(--g-accent-ink); background: var(--g-accent-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--g-accent) 22%, transparent); }
.gx-chip--warn { color: var(--g-warn-ink); background: var(--g-warn-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--g-warn) 26%, transparent); }
.gx-chip--ok { color: var(--g-ok-ink); background: var(--g-ok-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--g-ok) 24%, transparent); }
.gx-chip--ink { color: var(--g-surface-2); background: var(--g-text); box-shadow: none; }
.gx-chip--sq { border-radius: 7px; }

.gx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 32px; padding: 0 14px; border-radius: 999px;
  font-size: 12px; font-weight: 600; white-space: nowrap;
  color: var(--g-text); background: var(--g-surface-2);
  box-shadow: inset 0 0 0 1px var(--g-line-2), 0 1px 1px color-mix(in srgb, var(--g-text) 5%, transparent);
}
.gx-btn .gx-i { width: 14px; height: 14px; }
.gx-btn--pri { color: #fff; background: var(--g-fill); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 6px 14px -6px color-mix(in srgb, var(--g-fill) 70%, transparent); }
.gx-btn--ink { color: var(--g-surface-2); background: var(--g-text); box-shadow: none; }
.gx-btn--ghost { background: transparent; box-shadow: none; color: var(--g-muted); }
.gx-btn--s { height: 26px; padding: 0 10px; font-size: 11px; }

.gx-pill-tabs { display: inline-flex; gap: 4px; padding: 3px; border-radius: 999px; background: var(--g-tint); box-shadow: inset 0 0 0 1px var(--g-line); }
.gx-pill-tabs > span { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 12px; border-radius: 999px; font-size: 11.5px; font-weight: 500; color: var(--g-muted); }
.gx-pill-tabs > .is-on { background: var(--g-surface-2); color: var(--g-text); font-weight: 600; box-shadow: 0 0 0 1px var(--g-line), 0 1px 2px color-mix(in srgb, var(--g-text) 8%, transparent); }
.gx-pill-tabs > .is-ink { background: var(--g-text); color: var(--g-surface-2); font-weight: 600; }

.gx-prio {
  flex: none; display: inline-grid; place-items: center;
  width: 20px; height: 20px; border-radius: 6px;
  font: 600 10.5px/1 var(--g-mono);
}
.gx-prio--a { background: var(--g-fill); color: #fff; }
.gx-prio--b { background: var(--g-warn-soft); color: var(--g-warn-ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--g-warn) 30%, transparent); }
.gx-prio--c { background: var(--g-tint-2); color: var(--g-text); }

/* Checkbox */
.gx-cb {
  position: relative; flex: none; display: inline-grid; place-items: center;
  width: 18px; height: 18px; border-radius: 6px;
  background: var(--g-surface-2); box-shadow: inset 0 0 0 1.5px var(--g-line-2);
}
.gx-cb .gx-i { width: 12px; height: 12px; color: #fff; opacity: 0; }
.gx-cb.is-done { background: var(--g-ok); box-shadow: none; }
.gx-cb.is-done .gx-i { opacity: 1; }

/* Progress ring */
.gx-ring { position: relative; flex: none; width: 92px; height: 92px; }
.gx-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.gx-ring__track { fill: none; stroke: var(--g-tint-2); stroke-width: 9; }
.gx-ring__val { fill: none; stroke: var(--g-text); stroke-width: 9; stroke-linecap: round; stroke-dasharray: 263.9 263.9; stroke-dashoffset: calc(263.9 - 2.639 * var(--p, 0)); }
.gx-ring__num { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.gx-ring__num b { font-family: var(--g-display); font-size: 19px; font-weight: 600; font-stretch: 108%; letter-spacing: -.01em; line-height: 1; }
.gx-ring__num > span { font: 400 9px/1 var(--g-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--g-muted); margin-top: 4px; }
.gx-ring__alert {
  position: absolute; top: 2px; right: 0; width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center; background: var(--g-fill); color: #fff;
  box-shadow: 0 0 0 3px var(--g-surface-2);
}
.gx-ring__alert .gx-i { width: 12px; height: 12px; }

/* Linear bars */
.gx-bar-t { position: relative; height: 6px; border-radius: 999px; background: var(--g-tint-2); overflow: hidden; }
.gx-bar-v { position: absolute; inset: 0; border-radius: inherit; background: var(--g-text); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
.gx-bar-v--red { background: var(--g-fill); }
.gx-bar-v--ok { background: var(--g-ok); }
.gx-bar-m { position: absolute; top: -3px; bottom: -3px; width: 2px; border-radius: 1px; background: var(--g-accent); left: calc(var(--m) * 100%); }

/* ------------------------------------------------------------ Motion primitives
   .ga = build-in item (stagger via --i, extra delay via --d). Variants: .ga-l .ga-r .ga-s .ga-f .ga-down.
   Everything is complete and static unless JS arms the graphic and motion is allowed. */
.gfx .ga, .gfx .gx-pop, .gfx .gx-draw { --dl: calc(var(--i, 0) * 70ms + var(--d, 0ms)); }
@media (prefers-reduced-motion: no-preference) {
  .gfx.is-armed .ga { opacity: 0; transform: translate3d(var(--tx, 0px), var(--ty, 14px), 0) scale(var(--ts, 1)); }
  .gfx.is-armed .ga-l { --tx: -18px; --ty: 0px; }
  .gfx.is-armed .ga-r { --tx: 18px; --ty: 0px; }
  .gfx.is-armed .ga-s { --ts: .94; --ty: 8px; }
  .gfx.is-armed .ga-f { --ty: 0px; }
  .gfx.is-armed .ga-down { --ty: -22px; --ts: .97; }
  /* reveals 500ms, strokes 800ms, bars 1200ms (Apple HIG: brief and purposeful) */
  .gfx.is-armed.is-in .ga {
    opacity: 1; transform: none;
    transition: opacity .5s var(--g-ease) var(--dl), transform .5s var(--g-ease) var(--dl);
  }
  /* rings and bars fill */
  .gfx.is-armed .gx-ring__val { stroke-dashoffset: 263.9; }
  .gfx.is-armed.is-in .gx-ring__val { stroke-dashoffset: calc(263.9 - 2.639 * var(--p, 0)); transition: stroke-dashoffset .8s var(--g-ease) var(--dl, .2s); }
  .gfx.is-armed .gx-bar-v { transform: scaleX(0); }
  .gfx.is-armed.is-in .gx-bar-v { transform: scaleX(var(--p, 0)); transition: transform 1.2s var(--g-ease) var(--dl, .2s); }
  /* checks pop */
  .gfx.is-armed .gx-pop { opacity: 0; transform: scale(.3); }
  .gfx.is-armed.is-in .gx-pop { opacity: 1; transform: none; transition: opacity .5s var(--g-ease) var(--dl), transform .5s cubic-bezier(.34,1.56,.64,1) var(--dl); }
  /* svg strokes draw */
  .gfx.is-armed .gx-draw { stroke-dashoffset: 100; }
  .gfx.is-armed.is-in .gx-draw { stroke-dashoffset: 0; transition: stroke-dashoffset .8s var(--g-ease) var(--dl); }
  /* loops pause off-screen, while another graphic holds the loop slot and while the page is paused */
  .gfx.is-off .gl, .gfx.is-off .gl *, .gfx.is-off .gl::before,
  .gfx.is-hold .gl, .gfx.is-hold .gl *, .gfx.is-hold .gl::before,
  .motion-paused .gfx .gl, .motion-paused .gfx .gl *, .motion-paused .gfx .gl::before { animation-play-state: paused !important; }
}
.gx-draw { stroke-dasharray: 100 100; stroke-dashoffset: 0; }
.gx-cb__ck { position: absolute; inset: 0; display: grid; place-items: center; border-radius: inherit; background: var(--g-ok); }
.gx-cb__ck .gx-i { opacity: 1; }
.gx-tile {
  flex: none; display: inline-grid; place-items: center;
  width: 38px; height: 38px; border-radius: 12px;
  color: var(--g-text); background: var(--g-surface);
  box-shadow: inset 0 0 0 1px var(--g-line), inset 0 1px 0 var(--gx-hi);
}
.gx-tile .gx-i { width: 19px; height: 19px; }
.gx-tile--s { width: 32px; height: 32px; border-radius: 10px; }
.gx-tile--s .gx-i { width: 16px; height: 16px; }
.gx-tile--red { color: var(--g-accent-ink); background: var(--g-accent-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--g-accent) 18%, transparent); }
.gx-chead { gap: 12px; padding: 20px 22px 16px; }
.gx-top .gx-cap { margin-left: 4px; }

/* ------------------------------------------------------------ cockpit */
.ck { display: flex; flex-direction: column; gap: 16px; }
.ck-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.ck-kpi { padding: 16px 16px 14px; }
.ck-kpi__l { gap: 7px; font-size: 12px; font-weight: 500; color: color-mix(in srgb, var(--g-text) 80%, var(--g-muted)); }
.ck-kpi__l > .gx-i--s { color: var(--g-muted); }
.ck-kpi__ic { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: var(--g-tint); color: var(--g-muted); }
.ck-kpi__ic .gx-i { width: 13px; height: 13px; }
.ck-kpi__ic--red { background: var(--g-accent-soft); color: var(--g-accent-ink); }
.ck-kpi__ic--warn { background: var(--g-warn-soft); color: var(--g-warn-ink); }
.ck-kpi__n { margin: 10px 0 3px; font-family: var(--g-display); font-size: 30px; font-weight: 560; font-stretch: 112%; letter-spacing: -.02em; line-height: 1; }
.ck-kpi__n--red { color: var(--g-accent-ink); }
.ck-kpi__n--warn { color: var(--g-warn-ink); }
.ck-sub { margin: 4px 0 -6px; }
.ck-projects { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.ck-proj { display: flex; flex-direction: column; gap: 12px; padding: 16px; }
.ck-proj__head { align-items: flex-start; gap: 14px; }
.ck-proj__meta { margin-top: 4px; line-height: 1.45; }
.ck-proj__next { font-size: 12px; line-height: 1.45; }
.ck-proj__m { display: flex; flex-wrap: wrap; gap: 3px 12px; margin-top: 5px; font-size: 11.5px; line-height: 1.35; color: var(--g-muted); }
.ck-proj__m > span { display: inline-flex; align-items: center; gap: 4px; }
.ck-proj__m .gx-i { width: 12px; height: 12px; }
.ck-proj__m .gx-red { color: var(--g-accent-ink); font-weight: 500; }
.ck-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ck-lower { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ck-list { padding: 4px 16px 6px; }
.ck-list__h { height: 46px; border-bottom: 1px solid var(--g-line); }
.ck-item { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--g-line); font-size: 12.5px; }
.ck-item:last-child { border-bottom: 0; }
.ck-bang { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--g-accent-soft); color: var(--g-accent-ink); flex: none; }
.ck-date { flex: none; display: grid; place-items: center; width: 44px; height: 42px; border-radius: 10px; background: var(--g-tint); font: 600 11px/1.1 var(--g-mono); text-align: center; }
.ck-date i { display: block; font-style: normal; font-weight: 400; font-size: 9px; color: var(--g-muted); letter-spacing: .1em; }

/* ------------------------------------------------------------ project */
.pj { display: flex; flex-direction: column; gap: 16px; }
.pj-head { display: flex; align-items: center; gap: 24px; padding: 20px 22px; }
.pj-head .gx-h1 { font-size: 22px; margin-bottom: 4px; }
.pj-facts { display: grid; grid-template-columns: repeat(4, auto); gap: 24px; margin-top: 14px; justify-content: start; font-size: 12.5px; }
.pj-facts .gx-xs { margin-bottom: 3px; }
.pj-minis { display: flex; flex-direction: column; gap: 8px; width: 230px; flex: none; }
.pj-mini { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 36px; padding: 0 12px; border-radius: 10px; background: var(--g-tint); font-size: 12.5px; }
.pj-mini .gx-s { font-size: 11px; }
.pj-est { padding: 0 22px 18px; }
.pj-est__h { height: 52px; gap: 10px; border-bottom: 1px solid var(--g-line); }
.pj-lead { margin: 16px 0 18px; font-size: 13.5px; font-weight: 600; line-height: 1.5; max-width: 100ch; }
.pj-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.pj-colh { display: flex; align-items: center; gap: 6px; padding-bottom: 10px; border-bottom: 1px solid var(--g-line); }
.pj-cols > div:first-child .pj-colh { color: var(--g-accent-ink); }
.pj-item { padding: 12px 0; border-bottom: 1px solid var(--g-line); font-size: 12.5px; }
.pj-item:last-child { border-bottom: 0; }
.pj-item .gx-b { margin-bottom: 4px; line-height: 1.35; }
.pj-item .gx-s { line-height: 1.5; }

/* ------------------------------------------------------------ weekplan */
.wp { display: flex; flex-direction: column; gap: 14px; }
.wp-head { gap: 10px; }
.wp-kw { font-size: 18px; margin-right: 6px; }
.wp-review { gap: 12px; height: 48px; padding: 0 16px; font-size: 12.5px; color: var(--g-text); }
.wp-review > .gx-i { color: var(--g-muted); }
.wp-filter { gap: 10px; }
.wp-search { display: inline-flex; align-items: center; gap: 8px; width: 200px; height: 32px; padding: 0 12px; border-radius: 10px; background: var(--g-surface-2); box-shadow: inset 0 0 0 1px var(--g-line); font-size: 12px; color: var(--g-muted); }
.wp-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: start; }
.wp-col { display: flex; flex-direction: column; gap: 10px; padding: 0 10px 10px; border-radius: 16px; background: color-mix(in srgb, var(--g-surface), transparent 40%); box-shadow: inset 0 0 0 1px var(--g-line); }
.wp-col--a { box-shadow: inset 0 0 0 1px var(--g-line), inset 0 3px 0 var(--g-fill); }
.wp-col--b { box-shadow: inset 0 0 0 1px var(--g-line), inset 0 3px 0 var(--g-warn); }
.wp-col__h { height: 48px; gap: 9px; padding: 0 4px; }
.wp-card { padding: 12px 12px 10px; font-size: 12.5px; }
.wp-card__t { align-items: flex-start; gap: 10px; line-height: 1.35; }
.wp-card.is-done .wp-card__t .gx-b { text-decoration: line-through; text-decoration-color: var(--g-muted); color: var(--g-muted); }
.wp-chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 9px 0 7px 28px; }
.wp-why { display: flex; align-items: center; gap: 4px; margin-left: 28px; font-size: 11px; color: var(--g-muted); }

/* ------------------------------------------------------------ approval */
.ap { display: flex; flex-direction: column; gap: 14px; }
.ap-bar .gx-pill-tabs > span { height: 30px; padding: 0 14px; font-size: 12px; }
.ap-bar .gx-badge { height: 16px; min-width: 18px; font-size: 9.5px; }
.ap-search { display: inline-flex; align-items: center; gap: 8px; width: 300px; height: 34px; padding: 0 12px; border-radius: 10px; background: var(--g-surface-2); box-shadow: inset 0 0 0 1px var(--g-line); font-size: 12px; color: var(--g-muted); }
.ap-filter { gap: 6px; }
.ap-alert {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px;
  background: color-mix(in srgb, var(--g-surface-2), var(--g-accent) 6%);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--g-accent) 35%, transparent), inset 4px 0 0 var(--g-fill), 0 10px 30px -18px color-mix(in srgb, var(--g-fill) 60%, transparent);
}
.ap-alert .gx-row { gap: 10px; margin-bottom: 4px; }
.ap-alert .gx-b { color: var(--g-accent-ink); }
.ap-alert .gx-s { line-height: 1.45; }
.ap-alert__ic { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: var(--g-fill); color: #fff; }
.ap-alert__ic .gx-i { width: 19px; height: 19px; }
.ap-draft { padding: 16px 18px 14px; box-shadow: 0 0 0 1px var(--g-line), inset 4px 0 0 var(--g-warn); }
.ap-draft__h { gap: 12px; }
.ap-tile { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: var(--g-tint); color: var(--g-text); }
.ap-to { gap: 8px; margin: 12px 0; }
.ap-mail { padding: 18px 22px; border-radius: 12px; background: var(--g-bg); box-shadow: inset 0 0 0 1px var(--g-line); font-size: 12.5px; line-height: 1.55; }
.ap-mail__subj { font-family: var(--g-display); font-size: 14.5px; font-weight: 600; font-stretch: 104%; margin-bottom: 8px; }
.ap-mail__meta { padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--g-line); font-size: 11.5px; color: var(--g-muted); }
.ap-mail__meta span { display: inline-block; width: 34px; color: var(--g-muted); font-weight: 600; }
.ap-list { margin: 8px 0 10px; padding: 8px 12px; border-radius: 10px; background: var(--g-surface-2); box-shadow: inset 0 0 0 1px var(--g-line); }
.ap-list b { display: inline-block; width: 18px; font-family: var(--g-mono); font-weight: 500; color: var(--g-muted); }
.ap-actions { margin-top: 14px; gap: 10px; }
.ap-actions .gx-btn { height: 34px; }
.ap-mail { position: relative; height: 268px; overflow: hidden; }
.ap-mail::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 56px; background: linear-gradient(to bottom, transparent, var(--g-bg)); pointer-events: none; }

/* ------------------------------------------------------------ subcontractor (tablet) */
.sc { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 300px 1fr; }
.sc-list { display: flex; flex-direction: column; gap: 4px; padding: 16px 14px; border-right: 1px solid var(--g-line); background: color-mix(in srgb, var(--g-bg), var(--g-surface) 50%); }
.sc-list__h { height: 36px; margin-bottom: 6px; padding: 0 4px; }
.sc-grp { gap: 10px; padding: 10px; border-radius: 12px; font-size: 12.5px; }
.sc-grp .gx-s { font-size: 11px; margin-top: 2px; }
.sc-grp.is-on { background: var(--g-surface-2); box-shadow: 0 0 0 1px var(--g-line), 0 1px 2px color-mix(in srgb, var(--g-text) 6%, transparent); }
.sc-grp__ic { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--g-tint); color: var(--g-text); }
.sc-grp__ic .gx-i { width: 17px; height: 17px; }
.sc-grp.is-on .sc-grp__ic { background: var(--g-accent-soft); color: var(--g-accent-ink); }
.sc-note { margin-top: auto; display: flex; gap: 8px; padding: 12px; border-radius: 12px; background: var(--g-tint); font-size: 11px; line-height: 1.45; color: var(--g-muted); }
.sc-note .gx-i { margin-top: 1px; }
.sc-chat { display: flex; flex-direction: column; min-width: 0; background: var(--g-bg); }
.sc-chat__h { gap: 12px; height: 62px; padding: 0 20px; border-bottom: 1px solid var(--g-line); background: var(--g-surface-2); font-size: 13px; }
.sc-avs { display: flex; }
.sc-avs .gx-av { margin-left: -6px; box-shadow: 0 0 0 2px var(--g-surface-2); }
.sc-msgs { flex: 1 1 auto; display: flex; flex-direction: column; gap: 14px; padding: 18px 22px; min-height: 0; overflow: hidden; }
.sc-msg { position: relative; display: flex; gap: 10px; align-items: flex-start; max-width: 520px; }
.sc-who { font-weight: 600; color: var(--g-text); margin-right: 4px; }
.sc-bub { margin-top: 4px; padding: 10px 13px; border-radius: 4px 14px 14px 14px; background: var(--g-surface-2); box-shadow: 0 0 0 1px var(--g-line); font-size: 12.5px; line-height: 1.5; }
.sc-msg--focus .sc-bub { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--g-accent) 55%, transparent), 0 8px 20px -12px color-mix(in srgb, var(--g-fill) 50%, transparent); }
.sc-msg--me { align-self: flex-end; }
.sc-bub--me { border-radius: 14px 4px 14px 14px; background: var(--g-text); color: var(--g-surface-2); box-shadow: none; }
.sc-at { padding: 1px 5px; border-radius: 6px; font-weight: 600; color: var(--g-accent-ink); background: var(--g-accent-soft); }
.sc-bub--me .sc-at { color: #fff; background: rgba(213, 6, 32, .9); }
.sc-menu {
  position: absolute; right: -170px; top: -4px; z-index: 2;
  display: flex; flex-direction: column; gap: 2px; width: 164px; padding: 5px;
  border-radius: 12px; background: var(--g-surface-2);
  box-shadow: 0 0 0 1px var(--g-line-2), 0 14px 30px -12px color-mix(in srgb, var(--g-text) 35%, transparent);
}
.sc-menu__it { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 9px; border-radius: 8px; font-size: 12px; color: var(--g-text); }
.sc-menu__it.is-on { background: var(--g-accent-soft); color: var(--g-accent-ink); font-weight: 600; }
.sc-task { margin-left: 40px; max-width: 470px; padding: 12px 14px; box-shadow: 0 0 0 1px var(--g-line), inset 3px 0 0 var(--g-ok), 0 10px 24px -16px color-mix(in srgb, var(--g-text) 40%, transparent); }
.sc-task__h { gap: 8px; }
.sc-task__ok { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--g-ok); color: #fff; }
.sc-task__ok .gx-i { width: 12px; height: 12px; }
.sc-task__t { margin: 8px 0 10px; font-size: 13px; line-height: 1.4; }
.sc-task__meta { flex-wrap: wrap; gap: 8px; font-size: 12px; }
.sc-input { flex: none; gap: 10px; padding: 12px 18px; border-top: 1px solid var(--g-line); background: var(--g-surface-2); }
.sc-input__f { flex: 1 1 auto; display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 14px; border-radius: 12px; background: var(--g-bg); box-shadow: inset 0 0 0 1px var(--g-line); font-size: 12px; color: var(--g-muted); white-space: nowrap; overflow: hidden; }

/* ------------------------------------------------------------ diary (phone) */
.dy { display: flex; flex-direction: column; gap: 12px; height: 100%; padding: 0 16px 18px; background: var(--g-bg); }
.dy-status { flex: none; height: 50px; padding: 0 14px 0 20px; font-size: 14px; }
.dy-sig { display: flex; align-items: flex-end; gap: 2px; height: 11px; margin-right: 6px; }
.dy-sig i { display: block; width: 3px; border-radius: 1px; background: var(--g-text); }
.dy-sig i:nth-child(1) { height: 4px; } .dy-sig i:nth-child(2) { height: 6px; } .dy-sig i:nth-child(3) { height: 8px; } .dy-sig i:nth-child(4) { height: 11px; }
.dy-bat { width: 24px; height: 12px; border-radius: 4px; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--g-text) 45%, transparent); position: relative; }
.dy-bat::after { content: ""; position: absolute; left: 2.5px; top: 2.5px; bottom: 2.5px; width: 13px; border-radius: 2px; background: var(--g-text); }
.dy-head { flex: none; gap: 10px; }
.dy-head .gx-h1 { font-size: 24px; margin-top: 2px; }
.dy-seg { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dy-seg .gx-pill-tabs > span { height: 30px; }
.dy-rec { padding: 14px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--g-accent) 30%, transparent), 0 10px 26px -18px color-mix(in srgb, var(--g-fill) 60%, transparent); }
.dy-rec .gx-row { font-size: 13px; }
.dy-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--g-fill); box-shadow: 0 0 0 4px var(--g-accent-soft); }
.dy-wave { display: flex; align-items: center; justify-content: space-between; height: 56px; margin: 10px 0 8px; }
.dy-wave span { display: block; width: 4px; border-radius: 2px; background: var(--g-text); opacity: .8; transform-origin: 50% 50%; }
.dy-wave span:nth-child(-n+20) { background: var(--g-fill); opacity: 1; }
.dy-tx { font-size: 12px; line-height: 1.5; color: var(--g-muted); }
.dy-phs { flex: none; gap: 8px; }
.dy-ph { position: relative; flex: 1 1 0; height: 84px; border-radius: 14px; overflow: hidden; background: var(--g-tint-2); box-shadow: 0 0 0 1px var(--g-line); }
.dy-ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dy-ph__tag { position: absolute; left: 6px; bottom: 6px; padding: 3px 7px; border-radius: 999px; font-size: 9.5px; font-weight: 600; color: #fff; background: rgba(213, 6, 32, .92); }
.dy-ai { flex: 1 1 auto; padding: 12px 14px 4px; overflow: hidden; }
.dy-ai__h { gap: 8px; padding-bottom: 8px; font-size: 13px; }
.dy-ai__h .gx-chip { margin-left: auto; }
.dy-ai__mark { width: 24px; }
.dy-f { display: grid; grid-template-columns: 96px 1fr; gap: 8px; padding: 8px 0; border-top: 1px solid var(--g-line); font-size: 12px; line-height: 1.45; }
.dy-f .gx-label { padding-top: 3px; font-size: 9px; }
.dy-f__v .gx-chip { margin: 0 0 3px; height: 21px; font-size: 10.5px; }
.dy-actions { flex: none; gap: 12px; padding: 4px 2px 0; font-size: 13px; }
.dy-mic { position: relative; flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--g-fill); color: #fff; box-shadow: 0 8px 18px -8px rgba(213, 6, 32, .7); }
.dy-mic::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(213, 6, 32, .35); opacity: 0; }
.dy-go { height: 40px; padding: 0 16px; }
.sc-msg--focus { max-width: 400px; }

/* ------------------------------------------------------------ next-steps */
.ns { display: flex; flex-direction: column; }
.ns-list { flex: 1 1 auto; padding: 0 22px; }
.ns-it { align-items: flex-start; gap: 12px; padding: 15px 0; border-top: 1px solid var(--g-line); }
.ns-it .gx-cb, .ns-it .gx-prio { margin-top: 1px; }
.ns-t { font-size: 13.5px; line-height: 1.35; }
.ns-it.is-done .ns-t { color: var(--g-muted); text-decoration: line-through; text-decoration-color: var(--g-muted); }
.ns-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 7px; font-size: 11.5px; color: var(--g-muted); }
.ns-meta > span { display: inline-flex; align-items: center; gap: 5px; }
.ns-foot { gap: 10px; padding: 14px 22px 18px; border-top: 1px solid var(--g-line); background: var(--g-tint); }
.ns-link { gap: 5px; font-size: 12px; font-weight: 600; }

/* ------------------------------------------------------------ assistant */
.as { display: flex; flex-direction: column; }
.as-h { gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--g-line); }
.as-mark { width: 40px; }
.as-thread { flex: 1 1 auto; display: flex; flex-direction: column; gap: 14px; padding: 22px; }
.as-q { align-self: flex-end; display: flex; align-items: flex-start; gap: 10px; }
.as-q__b { padding: 11px 15px; border-radius: 16px 4px 16px 16px; background: var(--g-text); color: var(--g-surface-2); font-size: 13.5px; font-weight: 500; }
.as-search { gap: 7px; font: 400 11px/1 var(--g-mono); color: var(--g-muted); padding-left: 44px; }
.as-a { display: flex; gap: 12px; align-items: flex-start; }
.as-a__av { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--g-surface); box-shadow: inset 0 0 0 1px var(--g-line); }
.as-a__av .gx-mark { width: 20px; }
.as-p { font-size: 14px; line-height: 1.6; }
.as-fn { display: inline-block; margin-left: 2px; padding: 0 3px; border-radius: 4px; font: 600 10.5px/1.5 var(--g-mono); color: var(--g-accent-ink); background: var(--g-accent-soft); vertical-align: 2px; }
.as-warn { display: flex; gap: 8px; align-items: flex-start; margin-top: 12px; padding: 10px 12px; border-radius: 12px; font-size: 12.5px; line-height: 1.45; color: var(--g-warn-ink); background: var(--g-warn-soft); }
.as-warn .gx-i { margin-top: 2px; }
.as-src { margin: 16px 0 8px; }
.as-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.as-chip { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px 0 4px; border-radius: 999px; font-size: 12px; font-weight: 500; background: var(--g-surface); box-shadow: inset 0 0 0 1px var(--g-line-2); }
.as-chip b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font: 600 10.5px/1 var(--g-mono); color: #fff; background: var(--g-fill); }
.as-chip .gx-i { color: var(--g-muted); }
.as-in { gap: 12px; margin: 0 16px 16px; padding: 0 6px 0 16px; height: 48px; border-radius: 999px; background: var(--g-bg); box-shadow: inset 0 0 0 1px var(--g-line); color: var(--g-muted); }
.as-send { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--g-fill); color: #fff; }

/* ------------------------------------------------------------ contract */
.ct { display: flex; flex-direction: column; }
.ct-sum { gap: 6px; padding: 0 22px 14px; }
.ct-kd { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 16px; margin: 0 22px; padding: 14px 16px; border-radius: 14px; background: var(--g-tint); font-size: 12.5px; }
.ct-kd .gx-xs { margin-bottom: 2px; }
.ct-rows { flex: 1 1 auto; padding: 6px 22px 0; }
.ct-row { display: flex; gap: 14px; align-items: flex-start; padding: 13px 0; border-bottom: 1px solid var(--g-line); font-size: 13px; }
.ct-row:last-child { border-bottom: 0; }
.ct-light { flex: none; width: 12px; height: 12px; margin-top: 3px; border-radius: 50%; }
.ct-light--red { background: var(--g-fill); box-shadow: 0 0 0 4px var(--g-accent-soft), 0 0 12px rgba(213, 6, 32, .45); }
.ct-light--warn { background: var(--g-warn); box-shadow: 0 0 0 4px var(--g-warn-soft); }
.ct-light--ok { background: var(--g-ok); box-shadow: 0 0 0 4px var(--g-ok-soft); }
.ct-q { margin: 5px 0 7px; padding-left: 10px; border-left: 2px solid var(--g-line-2); font-size: 12px; line-height: 1.5; color: var(--g-muted); }
.ct-ref { display: inline-flex; align-items: center; gap: 5px; font: 400 10.5px/1 var(--g-mono); color: var(--g-muted); }
.ct-foot { gap: 7px; padding: 12px 22px 16px; font-size: 11.5px; color: var(--g-muted); border-top: 1px solid var(--g-line); background: var(--g-tint); }

/* ------------------------------------------------------------ reminders */
.rm { position: relative; display: flex; flex-direction: column; gap: 12px; height: 100%; padding: 6px 10px; }
.rm-t {
  position: relative; z-index: 1;
  padding: 12px 16px 14px; border-radius: 20px;
  background: color-mix(in srgb, var(--g-surface-2), transparent 4%);
  box-shadow: 0 0 0 1px var(--g-line), inset 0 1px 0 var(--gx-hi), 0 18px 40px -22px color-mix(in srgb, var(--g-text) 45%, transparent);
}
.rm-t--crit { box-shadow: 0 0 0 1px color-mix(in srgb, var(--g-accent) 32%, transparent), inset 0 1px 0 var(--gx-hi), 0 18px 40px -22px color-mix(in srgb, var(--g-fill) 55%, transparent); }
.rm-t__h { gap: 7px; margin-bottom: 9px; }
.rm-t__h .gx-chip { height: 20px; font-size: 10.5px; }
.rm-app { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: var(--g-surface); box-shadow: inset 0 0 0 1px var(--g-line); }
.rm-app .gx-mark { width: 15px; }
.rm-t__b { align-items: flex-start; gap: 12px; }
.rm-ic { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: var(--g-tint); color: var(--g-text); }
.rm-t--info .rm-ic { background: var(--g-warn-soft); color: var(--g-warn-ink); }
.rm-t--crit .rm-ic { background: var(--g-fill); color: #fff; }
.rm-title { font-size: 13.5px; line-height: 1.35; margin-bottom: 3px; }
.rm-t--crit .rm-title { color: var(--g-accent-ink); }
.rm-act { gap: 8px; margin: 12px 0 0 46px; }
.rm-later { gap: 6px; margin: 10px 0 0 46px; color: var(--g-muted); }
.rm-opt { padding: 3px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 500; color: var(--g-text); background: var(--g-tint); box-shadow: inset 0 0 0 1px var(--g-line); }
.rm-peek { position: relative; height: 18px; margin-top: -24px; }
.rm-peek span { position: absolute; left: 18px; right: 18px; top: 0; height: 18px; border-radius: 0 0 18px 18px; background: var(--g-surface-2); box-shadow: 0 0 0 1px var(--g-line); }
.rm-peek span + span { left: 34px; right: 34px; top: 7px; opacity: .7; }

/* ------------------------------------------------------------ pipeline */
.pl { display: flex; flex-direction: column; }
.pl-pct { font-family: var(--g-display); font-size: 24px; font-weight: 560; font-stretch: 110%; letter-spacing: -.02em; }
.pl-file { gap: 12px; margin: 0 22px; padding: 10px 12px; border-radius: 14px; background: var(--g-tint); font-size: 12.5px; }
.pl-bar { margin: 14px 22px 4px; height: 5px; }
.pl-steps { position: relative; flex: 1 1 auto; padding: 6px 22px 0; }
.pl-steps::before { content: ""; position: absolute; left: 33px; top: 30px; bottom: 30px; width: 1px; background: var(--g-line-2); }
.pl-step { position: relative; gap: 12px; height: 46px; font-size: 13px; }
.pl-st { position: relative; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--g-surface-2); }
.pl-st > span { position: absolute; inset: 0; display: grid; place-items: center; }
.pl-st .gx-i { width: 22px; height: 22px; }
.pl-pend { color: var(--g-muted); opacity: 0; }
.pl-done { color: var(--g-ok); }
.pl-n { color: var(--g-muted); width: 20px; }
.pl-meta { display: inline-flex; align-items: center; gap: 5px; color: var(--g-muted); }
.pl-l { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-left: 4px; }
.pl-l--red { background: var(--g-fill); } .pl-l--warn { background: var(--g-warn); } .pl-l--ok { background: var(--g-ok); }
.pl-foot { display: flex; align-items: flex-end; gap: 14px; padding: 14px 22px 18px; border-top: 1px solid var(--g-line); background: var(--g-tint); }
.pl-foot .gx-s { line-height: 1.5; }

/* ------------------------------------------------------------ stats */
.stx { display: flex; flex-direction: column; }
.st-hero { gap: 16px; padding: 0 22px; font-size: 13px; }
.st-big { font-family: var(--g-display); font-size: 46px; font-weight: 540; font-stretch: 115%; letter-spacing: -.03em; line-height: 1; }
.st-segs { display: grid; grid-template-columns: repeat(13, 1fr); gap: 4px; margin: 16px 22px 18px; }
.st-seg { height: 22px; border-radius: 5px; background: var(--g-tint-2); }
.st-seg.is-on { background: var(--g-text); }
.st-seg.is-next { background: var(--g-accent-soft); box-shadow: inset 0 0 0 1.5px var(--g-fill); }
.st-lh { padding: 0 22px 8px; }
.st-legend { gap: 6px; }
.st-legend__m { position: static; display: inline-block; width: 2px; height: 11px; }
.st-gs { padding: 0 22px; }
.st-g { display: grid; grid-template-columns: 86px 1fr 46px; align-items: center; gap: 12px; height: 32px; border-bottom: 1px solid var(--g-line); }
.st-g:last-child { border-bottom: 0; }
.st-g__p { text-align: right; }
.st-money { margin: 14px 16px 16px; padding: 12px 14px 4px; border-radius: 16px; background: var(--g-tint); flex: 1 1 auto; }
.st-money__h { margin-bottom: 4px; color: var(--g-text); }
.st-m { padding: 9px 0; border-top: 1px solid var(--g-line); font-size: 12.5px; }
.st-money__h + .st-m { border-top: 0; }
.st-m .gx-row { gap: 12px; margin-bottom: 3px; }
.st-m__eur { font-family: var(--g-mono); }

/* ------------------------------------------------------------ flow (diagram) */
.fl { position: relative; width: 1200px; height: 640px; }
.fl-svg { position: absolute; left: 0; top: 0; }
.fl-p { fill: none; stroke: color-mix(in srgb, var(--g-text) 24%, transparent); stroke-width: 1.5; }
.fl-dot { fill: none; stroke-width: 7; stroke-linecap: round; stroke-dasharray: 0 120; opacity: 0; }
.fl-dot--in { stroke: color-mix(in srgb, var(--g-text) 70%, transparent); }
.fl-dot--out { stroke: var(--g-fill); }
.fl-lbl { position: absolute; top: 14px; }
.fl-n {
  position: absolute; width: 250px; height: 58px;
  display: flex; align-items: center; gap: 12px; padding: 0 14px 0 12px;
  border-radius: 16px; font-size: 14px; line-height: 1.25;
  background: var(--g-surface-2);
  box-shadow: 0 0 0 1px var(--g-line), inset 0 1px 0 var(--gx-hi), 0 12px 28px -20px color-mix(in srgb, var(--g-text) 45%, transparent);
}
.fl-n--out { width: 246px; }
.fl-n .gx-xs { margin-top: 2px; }
.fl-core {
  position: absolute; left: 490px; top: 210px; width: 220px; height: 220px;
  padding: 8px; border-radius: 50%;
  background: color-mix(in srgb, var(--g-surface), var(--g-text) 5%);
  box-shadow: inset 0 0 0 1px var(--g-line), var(--g-shadow), 0 30px 70px -30px rgba(213, 6, 32, .35);
}
.fl-core__in {
  position: relative; height: 100%; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  background: var(--g-surface-2);
  box-shadow: inset 0 1px 0 var(--gx-hi), 0 0 0 1px var(--g-line);
}
.fl-mark { width: 92px; }
.fl-core__name { margin-top: 10px; font-family: var(--g-display); font-size: 20px; font-weight: 600; font-stretch: 116%; letter-spacing: -.01em; }
.fl-pulse { position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 1.5px rgba(213, 6, 32, .5); opacity: 0; pointer-events: none; }

/* ------------------------------------------------------------ security (layered shells) */
.se { position: relative; width: 960px; height: 640px; }
.se-svg { position: absolute; left: 0; top: 0; }
.se-sh { fill: var(--g-text); fill-opacity: .025; stroke: var(--g-line-2); stroke-width: 1.5; }
.se-sh--0 { fill-opacity: .012; }
.se-sh--4 { fill: var(--g-fill); fill-opacity: .035; stroke: var(--g-fill); stroke-opacity: .55; }
.se-l { position: absolute; left: 0; right: 0; display: flex; justify-content: center; }
.se-pill {
  display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 14px;
  border-radius: 999px; font-size: 12.5px; font-weight: 600; white-space: nowrap;
  background: var(--g-surface-2);
  box-shadow: 0 0 0 1px var(--g-line-2), inset 0 1px 0 var(--gx-hi), 0 8px 18px -12px color-mix(in srgb, var(--g-text) 45%, transparent);
}
.se-pill--red { color: #fff; background: var(--g-fill); box-shadow: 0 8px 18px -8px rgba(213, 6, 32, .6); }
.se-note { color: var(--g-muted); }
.se-core {
  position: absolute; left: 330px; top: 278px; width: 300px; height: 84px;
  display: flex; align-items: center; gap: 14px; padding: 0 18px;
  border-radius: 20px; background: var(--g-surface-2);
  box-shadow: 0 0 0 1px var(--g-line-2), inset 0 1px 0 var(--gx-hi), var(--g-shadow);
}

/* ------------------------------------------------------------ timeline */
.tl { position: relative; width: 620px; height: 760px; }
.tl-h { position: absolute; left: 0; right: 0; top: 0; }
.tl-h .gx-label { color: var(--g-accent-ink); margin-bottom: 8px; }
.tl-h .gx-h1 { font-size: 26px; margin-bottom: 4px; }
.tl-rail { position: absolute; left: 82px; top: 122px; height: 520px; width: 2px; border-radius: 2px; background: var(--g-tint-2); overflow: hidden; }
.tl-fill { position: absolute; inset: 0; background: linear-gradient(var(--g-fill), color-mix(in srgb, var(--g-fill) 30%, transparent)); transform-origin: 50% 0; }
.tl-it { position: absolute; left: 0; right: 0; height: 124px; }
.tl-time { position: absolute; left: 0; top: 13px; width: 62px; text-align: right; font-size: 13px; font-weight: 500; color: var(--g-text); }
.tl-dot { position: absolute; left: 76px; top: 15px; width: 14px; height: 14px; border-radius: 50%; background: var(--g-surface-2); box-shadow: 0 0 0 2.5px var(--g-fill), 0 0 0 7px var(--g-accent-soft); }
.tl-card { position: absolute; left: 112px; right: 2px; top: 0; padding: 11px 14px 12px; }
.tl-card .gx-row { gap: 10px; font-size: 13.5px; }
.tl-card .gx-tile--s { width: 28px; height: 28px; border-radius: 9px; }
.tl-card .gx-tile--s .gx-i { width: 15px; height: 15px; }
.tl-txt { margin: 7px 0 8px; line-height: 1.45; }
.tl-x { display: flex; align-items: center; min-height: 22px; }
.tl-wave { display: flex; align-items: center; gap: 3px; height: 22px; }
.tl-wave span { display: block; width: 3px; border-radius: 2px; background: var(--g-fill); }
.tl-bar { width: 220px; }

/* ------------------------------------------------------------ sequences and loops (motion only) */
@media (prefers-reduced-motion: no-preference) {
  /* pipeline: steps resolve one after another, 300 to 350ms each */
  .gfx.is-armed .pl-step { --sd: calc(250ms + var(--s) * 230ms); }
  .gfx.is-armed .pl-pend { opacity: 1; }
  .gfx.is-armed .pl-done { opacity: 0; transform: scale(.4); }
  .gfx.is-armed .pl-lbl, .gfx.is-armed .pl-n { opacity: .45; }
  .gfx.is-armed .pl-meta { opacity: 0; transform: translateX(6px); }
  .gfx.is-armed.is-in .pl-pend { animation: gx-pl-pend .3s var(--g-spring) var(--sd) both; }
  .gfx.is-armed.is-in .pl-done { animation: gx-pl-done .35s cubic-bezier(.34, 1.56, .64, 1) calc(var(--sd) + .2s) both; }
  .gfx.is-armed.is-in .pl-lbl, .gfx.is-armed.is-in .pl-n { animation: gx-dim-in .3s var(--g-ease) var(--sd) both; }
  .gfx.is-armed.is-in .pl-meta { animation: gx-meta-in .35s var(--g-ease) calc(var(--sd) + .2s) both; }
  .gfx.is-armed.is-in .pl-bar .gx-bar-v { transition: transform 1.2s cubic-bezier(.4, .1, .3, 1) .3s; }

  /* timeline rail fills top to bottom */
  .gfx.is-armed .tl-fill { transform: scaleY(0); }
  .gfx.is-armed.is-in .tl-fill { transform: none; transition: transform 1.2s var(--g-ease) .3s; }

  /* Loops run only while js grants the loop slot (.is-loop). Iteration counts are finite: every
     loop ends within about 8 s of visible time in its resting state (dots and rings at opacity 0,
     wave bars at full height, the recording dot fully on). */
  /* flow: dots travel along the paths, the core breathes */
  .gfx.is-loop .fl-dot { animation: gx-travel var(--t, 3s) cubic-bezier(.45, .05, .55, .95) var(--o, 0s) var(--n, 2) backwards; }
  .gfx.is-loop .fl-pulse { animation: gx-pulse 3.2s var(--g-ease) 2; }
  .gfx.is-loop .fl-pulse--2 { animation-delay: 1.6s; }

  /* diary: live recording */
  .gfx.is-loop .dy-wave span { animation: gx-wave 1.1s cubic-bezier(.45, .05, .55, .95) 7 alternate; animation-delay: calc(var(--w, 0) * -.17s); }
  .gfx.is-loop .dy-dot { animation: gx-blink 1.2s cubic-bezier(.45, .05, .55, .95) 6 alternate; }
  .gfx.is-loop .dy-mic::before { animation: gx-ring-out 2.2s var(--g-ease) 3; }
}
@keyframes gx-pl-pend { 0% { opacity: 1; transform: rotate(0deg); } 80% { opacity: 1; transform: rotate(150deg); } 100% { opacity: 0; transform: rotate(190deg); } }
@keyframes gx-pl-done { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
@keyframes gx-dim-in { from { opacity: .45; } to { opacity: 1; } }
@keyframes gx-meta-in { from { opacity: 0; transform: translateX(6px); } to { opacity: 1; transform: none; } }
@keyframes gx-travel {
  0% { stroke-dashoffset: 0; opacity: 0; }
  8% { opacity: 1; }
  76% { opacity: 1; }
  83% { opacity: 0; }
  100% { stroke-dashoffset: -120; opacity: 0; }
}
@keyframes gx-pulse { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.32); } }
@keyframes gx-wave { from { transform: scaleY(.35); } to { transform: scaleY(1); } }
@keyframes gx-blink { from { opacity: 1; } to { opacity: .35; } }
@keyframes gx-ring-out { 0% { opacity: .9; transform: scale(.92); } 100% { opacity: 0; transform: scale(1.35); } }

@media print {
  .gfx .ga, .gfx .gx-pop { opacity: 1 !important; transform: none !important; }
}
.st-g .gx-bar-t { overflow: visible; }
.st-g .gx-bar-m { margin-left: -1px; }

/* ============================================================ Feature-page graphics: delay-chain, before-after, defect, request */
.gfx[data-gfx="delay-chain"]  { --cw: 1040; --ch: 540; }
.gfx[data-gfx="before-after"] { --cw: 1200; --ch: 700; }
.gfx[data-gfx="defect"]       { --cw: 372;  --ch: 790; }
.gfx[data-gfx="request"]      { --cw: 600;  --ch: 600; }
.gfx:not([data-device])[data-gfx="defect"] { --sw: calc(var(--cw) + 24); --sh: calc(var(--ch) + 24); }

/* ------------------------------------------------------------ interactive controls
   Real controls sit outside the aria-hidden stage (see js/gfx.js). They are not scaled, so
   touch targets keep their size at every container width. */
.gx-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* delay-chain: a 60px control bar above the stage, reserved in the container (no layout shift) */
.gfx[data-gfx="delay-chain"] { box-sizing: content-box; padding-top: 60px; }
.gfx[data-gfx="delay-chain"] > .gx-stage { top: 60px; }
.gx-ctl { position: absolute; left: 0; right: 0; top: 0; height: 60px; display: flex; align-items: flex-start; }
.gx-seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--g-tint); box-shadow: inset 0 0 0 1px var(--g-line); }
.gx-seg__b {
  -webkit-appearance: none; appearance: none; margin: 0; border: 0;
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 18px; border-radius: 999px;
  font: 600 13.5px/1 var(--g-body); letter-spacing: 0; white-space: nowrap;
  color: var(--g-muted); background: transparent; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.gx-seg__b:hover { color: var(--g-text); }
.gx-seg__b[aria-pressed="true"] { color: var(--g-text); background: var(--g-surface-2); box-shadow: 0 0 0 1px var(--g-line), 0 1px 3px color-mix(in srgb, var(--g-text) 10%, transparent); }
.gx-seg__b:focus-visible { outline: 2px solid var(--g-accent); outline-offset: 2px; }
.gx-seg__dot { flex: none; width: 8px; height: 8px; border-radius: 50%; opacity: .4; }
.gx-seg__b[aria-pressed="true"] .gx-seg__dot { opacity: 1; }
.gx-seg__dot--red { background: var(--g-fill); }
.gx-seg__dot--ok { background: var(--g-ok); }
@container (max-width: 330px) { .gx-seg__b { gap: 6px; padding: 0 12px; font-size: 12.5px; } }

/* before-after: the slider overlays the screen area. --ox/--oy locate the screen inside the
   device frame (unitless stage px), so the handle lines up for every data-device. */
.gfx[data-gfx="before-after"] { --ba: 50; --ox: 0; --oy: 0; }
.gfx[data-gfx="before-after"][data-device="browser"] { --oy: 40; }
.gfx[data-gfx="before-after"][data-device="laptop"] { --ox: 78; --oy: 22; }
.gfx[data-gfx="before-after"][data-device="tablet"] { --ox: 22; --oy: 22; }
.gfx[data-gfx="before-after"][data-device="phone"] { --ox: 12; --oy: 12; }
.ba-ctl {
  position: absolute; z-index: 2;
  left: calc(var(--ox) / var(--sw) * 100%); top: calc(var(--oy) / var(--sh) * 100%);
  width: calc(var(--cw) / var(--sw) * 100%); height: calc(var(--ch) / var(--sh) * 100%);
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
}
@media (pointer: fine) { .ba-ctl { cursor: ew-resize; } }
.ba-h { position: absolute; top: 0; bottom: 0; left: calc(var(--ba) * 1%); width: 48px; margin-left: -24px; touch-action: none; cursor: grab; outline: none; }
.ba-h::before {
  content: ""; position: absolute; left: 23px; top: 0; bottom: 0; width: 2px;
  background: var(--g-surface-2);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--g-text) 16%, transparent), 0 0 18px rgba(0, 0, 0, .28);
}
.ba-h__knob {
  position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; color: var(--g-text); background: var(--g-surface-2);
  box-shadow: 0 0 0 1px var(--g-line-2), inset 0 1px 0 var(--gx-hi), 0 10px 24px -8px rgba(0, 0, 0, .5);
}
.ba-h__knob .gx-i { width: 15px; height: 15px; margin: 0 -2px; }
.ba-h__knob .ba-h__l { transform: rotate(180deg); }
.ba-h:focus-visible .ba-h__knob { box-shadow: 0 0 0 1px var(--g-line-2), 0 0 0 4px var(--g-surface-2), 0 0 0 6px var(--g-accent), 0 10px 24px -8px rgba(0, 0, 0, .5); }
.gfx.is-drag .ba-h { cursor: grabbing; }

/* ------------------------------------------------------------ delay-chain (card) */
.dc-x { display: grid; }
.dc-x > span { grid-area: 1 / 1; min-width: 0; }
.dc-on { opacity: 0; }
.gfx.is-with .dc-on { opacity: 1; }
.gfx.is-with .dc-off { opacity: 0; }
.dc-h { align-items: flex-start; gap: 12px; padding: 22px 26px 0; }
.dc-h .gx-label { margin-bottom: 9px; }
.dc-title { font-size: 19px; letter-spacing: -.01em; }
.dc-call { position: absolute; left: 50px; top: 92px; z-index: 2; width: 372px; }
.dc-card { display: flex; align-items: center; gap: 12px; height: 54px; padding: 0 16px 0 9px; border-radius: 16px; background: var(--g-surface-2); }
.dc-card__ic { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; color: #fff; }
.dc-card__ic .gx-i { width: 18px; height: 18px; }
.dc-card__t { display: block; font-size: 13px; line-height: 1.3; }
.dc-card__s { display: block; margin-top: 2px; }
.dc-card--off { background: color-mix(in srgb, var(--g-surface-2), var(--g-accent) 6%); box-shadow: 0 0 0 1px color-mix(in srgb, var(--g-accent) 32%, transparent), 0 12px 26px -16px color-mix(in srgb, var(--g-fill) 55%, transparent); }
.dc-card--off .dc-card__ic { background: var(--g-fill); }
.dc-card--off .dc-card__t { color: var(--g-accent-ink); }
.dc-card--on { background: color-mix(in srgb, var(--g-surface-2), var(--g-ok) 7%); box-shadow: 0 0 0 1px color-mix(in srgb, var(--g-ok) 38%, transparent), 0 12px 26px -16px color-mix(in srgb, var(--g-ok) 55%, transparent); }
.dc-card--on .dc-card__ic { background: var(--g-ok); }
.dc-card--on .dc-card__t { color: var(--g-ok-ink); }
.dc-stem { position: absolute; left: 128px; top: 146px; width: 2px; height: 56px; border-radius: 2px; background: var(--g-fill); }
.gfx.is-with .dc-stem { background: var(--g-ok); }
.dc-ground { position: absolute; left: 30px; right: 30px; top: 427px; height: 2px; border-radius: 2px; background: var(--g-line-2); }
.dc-fuse, .dc-hold { position: absolute; left: 0; top: 0; bottom: 0; border-radius: inherit; transform-origin: 0 50%; }
.dc-fuse { right: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--g-fill) 40%, transparent), var(--g-fill)); }
.dc-hold { width: 184px; background: var(--g-ok); transform: scaleX(0); }
.gfx.is-with .dc-fuse { transform: scaleX(0); }
.gfx.is-with .dc-hold { transform: none; }
.dc-row { position: absolute; left: 50px; top: 196px; display: flex; gap: 52px; }
.dc-slot { position: relative; flex: none; width: 144px; height: 232px; }
.dc-shadow { position: absolute; left: 4px; right: -10px; bottom: -9px; height: 16px; border-radius: 50%; background: radial-gradient(closest-side, var(--gx-contact), transparent); opacity: .5; }
/* A domino: top face with icon, divider with a centre spinner, bottom face with text.
   "Ohne": tiles 1 to 4 lean onto the next one, the last one stands red. "Mit": all upright, green. */
.dc-tile {
  --rot: 12deg; --acc: var(--g-fill); --ib: var(--g-accent-soft); --if: var(--g-accent-ink); --sc: var(--g-muted); --ln: var(--g-line-2);
  position: absolute; inset: 0; display: flex; flex-direction: column;
  border-radius: 16px; background: var(--g-surface-2); color: var(--g-text);
  box-shadow: 0 0 0 1px var(--g-line-2), inset 0 3px 0 var(--acc), 0 0 0 0 transparent, 0 24px 30px -22px rgba(0, 0, 0, .5);
  transform-origin: 100% 100%; transform: rotate(var(--rot));
}
.dc-top { position: relative; flex: none; height: 98px; display: grid; place-items: center; }
.dc-n { position: absolute; left: 13px; top: 13px; font-size: 10.5px; color: var(--sc); }
.dc-ic { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 15px; background: var(--ib); color: var(--if); }
.dc-ic .gx-i { width: 24px; height: 24px; }
.dc-mid { position: relative; flex: none; height: 1px; margin: 0 14px; background: var(--ln); }
.dc-mid::after { content: ""; position: absolute; left: 50%; top: -3.5px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--ln); }
.dc-txt { flex: 1 1 auto; padding: 14px 14px 12px; }
.dc-t { display: block; font-size: 13.5px; line-height: 1.3; }
.dc-s { display: block; margin-top: 6px; font-size: 11.5px; line-height: 1.4; color: var(--sc); }
.dc-slot--end .dc-tile {
  --rot: 0deg; --acc: rgba(255, 255, 255, .28); --ib: rgba(255, 255, 255, .16); --if: #fff; --sc: rgba(255, 255, 255, .84); --ln: rgba(255, 255, 255, .3);
  background: var(--g-fill); color: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .1), inset 0 3px 0 var(--acc), 0 0 0 6px var(--g-accent-soft), 0 24px 34px -18px color-mix(in srgb, var(--g-fill) 70%, transparent);
}
.gfx.is-with .dc-tile {
  --acc: var(--g-ok); --ib: var(--g-ok-soft); --if: var(--g-ok-ink); --sc: var(--g-muted); --ln: var(--g-line-2);
  transform: none; background: var(--g-surface-2); color: var(--g-text);
  box-shadow: 0 0 0 1px var(--g-line-2), inset 0 3px 0 var(--acc), 0 0 0 0 transparent, 0 24px 30px -22px rgba(0, 0, 0, .5);
}
.dc-stop {
  position: absolute; left: 203px; top: 295px; z-index: 2;
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  color: #fff; background: var(--g-ok);
  box-shadow: 0 0 0 5px var(--g-ok-soft), 0 8px 18px -8px color-mix(in srgb, var(--g-ok) 70%, transparent);
  opacity: 0; transform: scale(.4);
}
.dc-stop .gx-i { width: 18px; height: 18px; }
.gfx.is-with .dc-stop { opacity: 1; transform: none; }
.dc-foot { position: absolute; left: 0; right: 0; bottom: 0; height: 64px; display: flex; align-items: center; padding: 0 26px; border-top: 1px solid var(--g-line); background: var(--g-tint); font-size: 12.5px; }
.dc-foot .dc-x > span { display: flex; align-items: center; gap: 9px; }
.dc-foot .dc-off { color: var(--g-accent-ink); }
.dc-foot .dc-on { color: var(--g-ok-ink); }
.dc-foot .dc-x > span > span { color: var(--g-text); }

/* ------------------------------------------------------------ before-after (plate) */
.ba { position: relative; width: 1200px; height: 700px; overflow: hidden; }
.ba-layer { position: absolute; inset: 0; overflow: hidden; }
.ba-before { clip-path: inset(0 calc(100% - var(--ba) * 1%) 0 0); }
.ba-edge { position: absolute; top: 0; bottom: 0; left: calc(var(--ba) * 1%); width: 56px; background: linear-gradient(90deg, rgba(0, 0, 0, .16), transparent); pointer-events: none; }
.ba-desk {
  position: absolute; inset: 0;
  background-color: var(--g-bg-2);
  background-image: radial-gradient(color-mix(in srgb, var(--g-text) 12%, transparent) 1px, transparent 1.4px);
  background-size: 22px 22px;
}
.ba-o { position: absolute; }
.ba-rot, .ba-note, .ba-pdf { transform: rotate(var(--r, 0deg)); }
.ba-win { border-radius: 14px; overflow: hidden; background: var(--g-surface-2); box-shadow: 0 0 0 1px var(--g-line-2), 0 26px 50px -26px rgba(0, 0, 0, .5); }
.ba-win__bar { gap: 7px; height: 44px; padding: 0 14px; border-bottom: 1px solid var(--g-line); background: color-mix(in srgb, var(--g-surface), var(--g-text) 3%); font-size: 13px; }
.ba-win__bar .gx-bar__dot { width: 10px; height: 10px; }
.ba-win__bar .gx-b { margin-left: 8px; }
.ba-win__bar .gx-badge { height: 20px; padding: 0 8px; font-size: 10.5px; }
.ba-m { gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--g-line); font-size: 12px; }
.ba-m:last-child { border-bottom: 0; }
.ba-m__dot { flex: none; width: 7px; height: 7px; border-radius: 50%; }
.ba-m.is-u .ba-m__dot { background: var(--g-fill); }
.ba-m__from { font-weight: 500; }
.ba-m.is-u .ba-m__from { font-weight: 700; }
.ba-m .gx-s { margin-top: 2px; }
.ba-pdf { width: 214px; height: 272px; padding: 14px 16px; border-radius: 6px; background: var(--g-surface-2); box-shadow: 0 0 0 1px var(--g-line-2), 0 18px 34px -18px rgba(0, 0, 0, .45); font-size: 11px; }
.ba-pdf__h { gap: 7px; margin-bottom: 16px; font-weight: 600; }
.ba-pdf__tag { flex: none; padding: 3px 6px; border-radius: 4px; font: 700 9.5px/1 var(--g-mono); color: #fff; background: var(--g-fill); }
.ba-lines { display: flex; flex-direction: column; gap: 10px; }
.ba-lines i { display: block; height: 6px; border-radius: 3px; background: var(--g-tint-2); }
.ba-chat { width: 300px; border-radius: 22px; overflow: hidden; background: color-mix(in srgb, var(--g-bg), var(--g-ok) 6%); box-shadow: 0 0 0 1px var(--g-line-2), 0 26px 50px -26px rgba(0, 0, 0, .5); }
.ba-chat__h { gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--g-line); background: var(--g-surface-2); font-size: 12.5px; }
.ba-chat__b { display: flex; flex-direction: column; gap: 8px; padding: 12px; }
.ba-bub { align-self: flex-start; max-width: 236px; padding: 7px 10px 8px; border-radius: 4px 12px 12px 12px; background: var(--g-surface-2); box-shadow: 0 1px 1px color-mix(in srgb, var(--g-text) 8%, transparent); font-size: 12px; line-height: 1.4; }
.ba-bub b { display: block; margin-bottom: 2px; font-size: 10.5px; font-weight: 600; color: var(--g-ok-ink); }
.ba-bub--me { align-self: flex-end; border-radius: 12px 4px 12px 12px; background: color-mix(in srgb, #25D366 24%, var(--g-surface-2)); }
.ba-bub__t { display: block; margin-top: 2px; text-align: right; font: 400 9.5px/1 var(--g-mono); color: var(--g-muted); }
.ba-bub--voice .gx-row { gap: 8px; }
.ba-play { flex: none; width: 0; height: 0; border-left: 9px solid var(--g-muted); border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.ba-wave { display: flex; align-items: center; gap: 2px; height: 18px; }
.ba-wave i { display: block; width: 2px; border-radius: 1px; background: var(--g-muted); }
.ba-call { display: flex; align-items: center; gap: 10px; width: 236px; padding: 10px 14px 10px 10px; border-radius: 16px; background: var(--g-surface-2); box-shadow: 0 0 0 1px var(--g-line-2), 0 18px 34px -18px rgba(0, 0, 0, .45); font-size: 12px; }
.ba-call__ic { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; color: var(--g-accent-ink); background: var(--g-accent-soft); }
.ba-xl { width: 404px; border-radius: 10px; overflow: hidden; background: var(--g-surface-2); box-shadow: 0 0 0 1px var(--g-line-2), 0 26px 50px -26px rgba(0, 0, 0, .5); font-size: 11.5px; }
.ba-xl__bar { gap: 8px; height: 34px; padding: 0 12px; color: #fff; background: #1F6E43; font-weight: 600; }
.ba-xl__ic { flex: none; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 4px; background: rgba(255, 255, 255, .2); font: 700 10px/1 var(--g-mono); }
.ba-xl__fx { gap: 10px; height: 28px; padding: 0 10px; border-bottom: 1px solid var(--g-line); font: 400 10.5px/1 var(--g-mono); color: var(--g-muted); }
.ba-xl__fx span:first-child { font-style: italic; color: var(--g-text); }
.ba-xl__g { display: grid; grid-template-columns: 26px 84px 78px 72px 1fr; }
.ba-xl__c { display: flex; align-items: center; height: 26px; padding: 0 7px; overflow: hidden; white-space: nowrap; border-right: 1px solid var(--g-line); border-bottom: 1px solid var(--g-line); }
.ba-xl__c.is-hd { justify-content: center; padding: 0; color: var(--g-muted); background: var(--g-tint); font-size: 10.5px; }
.ba-xl__c.is-b { font-weight: 600; }
.ba-xl__c.is-red { color: var(--g-accent-ink); font-weight: 600; }
.ba-xl__c.is-sel { box-shadow: inset 0 0 0 2px #1F6E43; }
.ba-note {
  width: 152px; min-height: 112px; padding: 14px 14px 16px;
  border-radius: 3px 3px 14px 3px;
  color: var(--g-text); background: color-mix(in srgb, #F2C94C 46%, var(--g-surface-2));
  box-shadow: 0 1px 1px rgba(0, 0, 0, .08), 0 16px 26px -16px rgba(0, 0, 0, .45);
  font: 600 15px/1.35 "Noteworthy", "Bradley Hand", "Segoe Print", "Ink Free", cursive;
}
.ba-lbl { position: absolute; bottom: 20px; z-index: 5; display: inline-flex; align-items: center; gap: 9px; height: 36px; padding: 0 16px; border-radius: 999px; font: 600 14px/1 var(--g-display); font-stretch: 108%; white-space: nowrap; }
.ba-lbl--l { left: 20px; color: var(--g-text); background: var(--g-surface-2); box-shadow: 0 0 0 1px var(--g-line-2), 0 10px 24px -12px rgba(0, 0, 0, .4); }
.ba-lbl__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--g-warn); }
.ba-lbl--r { right: 20px; color: var(--g-surface-2); background: var(--g-text); box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .5); }
.ba-lbl--r .gx-mark { width: 24px; color: var(--g-surface-2); }
.ba-after .gx-app { height: 100%; }
.ba-cp { display: grid; grid-template-columns: 392px 1fr; gap: 24px; align-items: start; }
.ba-cp__l, .ba-cp__r { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ba-pl { padding: 4px 14px; }
.ba-pl__it { gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--g-line); font-size: 12.5px; }
.ba-pl__it:last-child { border-bottom: 0; }
.ba-pl__it .gx-xs { margin-top: 2px; }
.ba-soon { padding: 14px 14px 4px; }
.ba-soon .gx-label { padding-bottom: 10px; }
.ba-soon__it { gap: 12px; padding: 10px 0; border-top: 1px solid var(--g-line); font-size: 12.5px; }
.ba-next { padding: 18px 20px; }
.ba-next__t { margin: 14px 0 6px; font-size: 22px; }
.ba-next__s { font-size: 12.5px; line-height: 1.5; }
.ba-next__a { gap: 8px; margin-top: 16px; }
.ba-rem { padding: 14px 18px 16px; }
.ba-rem__h { gap: 7px; margin-bottom: 10px; }
.ba-rem__b { align-items: flex-start; gap: 12px; }
.ba-rem__ic { color: var(--g-warn-ink); background: var(--g-warn-soft); }
.ba-rem__t { margin-bottom: 3px; font-size: 14px; }
.ba-rem__a { gap: 8px; margin-top: 12px; }
.ba-calm { gap: 8px; padding: 0 4px; font-size: 12px; color: var(--g-muted); }
.ba-calm .gx-i { color: var(--g-ok); }

/* ------------------------------------------------------------ defect (phone) */
.df { display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 0 14px 16px; background: var(--g-bg); }
.df-head { flex: none; gap: 10px; padding: 0 2px; }
.df-head .gx-h1 { margin-top: 2px; font-size: 22px; }
.df-form__h .gx-chip { height: 20px; font-size: 10.5px; }
.df-back { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--g-surface-2); box-shadow: 0 0 0 1px var(--g-line); }
.df-back .gx-i { transform: rotate(180deg); }
.df-ph { position: relative; flex: none; height: 256px; border-radius: 20px; overflow: hidden; background: var(--g-tint-2); box-shadow: 0 0 0 1px var(--g-line); }
.df-ph img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.df-ph::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 64px; background: linear-gradient(to top, rgba(0, 0, 0, .5), transparent); pointer-events: none; }
.df-mk { position: absolute; left: 0; top: 0; z-index: 1; }
.df-crack { fill: none; stroke: rgba(22, 22, 24, .78); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.df-ring { fill: none; stroke: #E5283C; stroke-width: 2.6; stroke-linecap: round; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .35)); }
.df-pin { position: absolute; left: 189px; top: 114px; z-index: 3; width: 28px; height: 36px; transform-origin: 50% 100%; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .35)); }
.df-pin svg { width: 28px; height: 36px; }
.df-pin path { fill: #D50620; stroke: #fff; stroke-width: 2; }
.df-pin circle { fill: #fff; }
.df-pulse { position: absolute; left: 191px; top: 143px; z-index: 2; width: 24px; height: 10px; border-radius: 50%; background: rgba(213, 6, 32, .55); opacity: 0; }
.df-tag { position: absolute; left: 44px; top: 110px; z-index: 3; padding: 5px 9px; border-radius: 999px; font-size: 10.5px; font-weight: 600; white-space: nowrap; color: #fff; background: rgba(213, 6, 32, .94); box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .5); }
.df-ph__n { position: absolute; left: 12px; top: 12px; z-index: 3; padding: 4px 9px; border-radius: 999px; font-size: 10.5px; font-weight: 600; color: #fff; background: rgba(0, 0, 0, .45); }
.df-ph__ts { position: absolute; left: 14px; bottom: 12px; z-index: 3; font-size: 10px; color: rgba(255, 255, 255, .92); }
.df-form { flex: 1 1 auto; min-height: 0; padding: 4px 14px 6px; overflow: hidden; }
.df-form__h { gap: 8px; height: 38px; font-size: 13px; }
.df-mark { width: 22px; }
.df-f { display: grid; grid-template-columns: 92px 1fr; gap: 8px; padding: 9px 0; border-top: 1px solid var(--g-line); font-size: 12.5px; line-height: 1.4; }
.df-f .gx-label { padding-top: 4px; font-size: 9px; }
.df-f__v { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.df-sel { display: inline-flex; align-self: flex-start; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 8px; font-weight: 600; background: var(--g-tint); box-shadow: inset 0 0 0 1px var(--g-line); }
.df-sel .gx-i { color: var(--g-muted); }
.df-ok { display: inline-flex; align-items: center; gap: 4px; color: var(--g-ok-ink); }
.df-voice { gap: 8px; }
.df-mic { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: #fff; background: var(--g-fill); }
.df-mic .gx-i { width: 12px; height: 12px; }
.df-wave { flex: 1 1 auto; display: flex; align-items: center; justify-content: space-between; height: 20px; }
.df-wave i { display: block; width: 2.5px; border-radius: 2px; background: var(--g-fill); }
.df-wave i:nth-child(n+15) { background: var(--g-line-2); }
.df-tx { margin-top: 4px; font-size: 12px; line-height: 1.45; color: var(--g-muted); }
.df-done {
  flex: none; display: flex; align-items: center; gap: 12px; padding: 13px 14px;
  border-radius: 18px; background: var(--g-surface-2); font-size: 13px;
  box-shadow: 0 0 0 1px var(--g-line), inset 4px 0 0 var(--g-ok), 0 16px 30px -18px color-mix(in srgb, var(--g-text) 45%, transparent);
}
.df-done__ic { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: #fff; background: var(--g-ok); }
.df-done__m { gap: 8px; margin-top: 6px; }
.df-done__m .gx-chip { height: 21px; font-size: 10.5px; }

/* ------------------------------------------------------------ request (card) */
.rq { display: flex; flex-direction: column; }
.rq-route { gap: 12px; margin: 0 22px; padding: 12px 14px; border-radius: 14px; background: var(--g-tint); }
.rq-p { flex: none; display: flex; align-items: center; gap: 10px; font-size: 12.5px; }
.rq-p > span:last-child > span { display: block; }
.rq-p .gx-xs { margin-top: 1px; }
.rq-arrow { position: relative; flex: 1 1 auto; height: 2px; margin: 0 4px; background: repeating-linear-gradient(90deg, var(--g-line-2) 0 6px, transparent 6px 11px); }
.rq-arrow > .gx-i { position: absolute; right: -8px; top: -7px; width: 16px; height: 16px; color: var(--g-muted); }
.rq-plane { position: absolute; left: 0; top: -11px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: #fff; background: var(--g-fill); opacity: 0; }
.rq-plane .gx-i { width: 12px; height: 12px; }
.rq-card { margin: 14px 22px 0; padding: 14px 16px 16px 18px; box-shadow: 0 0 0 1px var(--g-line), inset 4px 0 0 var(--g-warn), 0 12px 28px -20px color-mix(in srgb, var(--g-text) 40%, transparent); }
.rq-title { margin: 10px 0 6px; font-size: 17px; }
.rq-body { font-size: 12.5px; line-height: 1.55; color: color-mix(in srgb, var(--g-text) 84%, var(--g-muted)); }
.rq-att { flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.rq-steps { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); margin: 22px 22px 0; }
.rq-track { position: absolute; left: 16.667%; right: 16.667%; top: 13px; display: flex; height: 2px; border-radius: 2px; background: var(--g-tint-2); }
.rq-seg { flex: 1 1 0; background: var(--g-text); transform-origin: 0 50%; }
.rq-seg + .rq-seg { background: linear-gradient(90deg, var(--g-text), var(--g-ok)); }
.rq-step { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.rq-node { position: relative; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: var(--g-line-2); background: var(--g-surface-2); box-shadow: inset 0 0 0 1.5px var(--g-line-2); }
.rq-node__ck { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; color: var(--g-surface-2); background: var(--g-text); }
.rq-step--end .rq-node__ck { color: #fff; background: var(--g-ok); box-shadow: 0 0 0 5px var(--g-ok-soft); }
.rq-step__l { display: flex; flex-direction: column; align-items: center; }
.rq-name { display: inline-flex; align-items: center; gap: 5px; margin-top: 9px; font-size: 12.5px; font-weight: 600; }
.rq-name .gx-i { color: var(--g-muted); }
.rq-step--end .rq-name, .rq-step--end .rq-name .gx-i { color: var(--g-ok-ink); }
.rq-time { margin-top: 4px; font: 400 10.5px/1 var(--g-mono); color: var(--g-muted); }
.rq-ans { display: flex; align-items: flex-start; gap: 10px; margin: 20px 22px 0; }
.rq-bub { padding: 9px 14px 11px; border-radius: 4px 16px 16px 16px; background: var(--g-surface-2); box-shadow: 0 0 0 1px var(--g-line-2), 0 10px 24px -18px color-mix(in srgb, var(--g-text) 45%, transparent); }
.rq-who { font-weight: 600; color: var(--g-text); }
.rq-bub__t { display: flex; align-items: center; gap: 8px; margin: 6px 0 4px; font-size: 14.5px; font-weight: 600; }
.rq-ok { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; color: #fff; background: var(--g-ok); }
.rq-ok .gx-i { width: 12px; height: 12px; }
.rq-foot { margin-top: auto; gap: 7px; padding: 12px 22px 16px; font-size: 11.5px; color: var(--g-muted); border-top: 1px solid var(--g-line); background: var(--g-tint); }

/* ------------------------------------------------------------ motion for the four graphics */
@media (prefers-reduced-motion: no-preference) {
  /* Direct responses take 200ms ease-out. A whole chain reaction completes within 900ms. */
  .gx-seg__b { transition: color .2s ease-out, background-color .2s ease-out, box-shadow .2s ease-out; }

  /* delay-chain: on first view the dominoes fall one after another; toggling replays it.
     Fall: 4 x 80ms stagger + 360ms, end tile hit at +260ms for 300ms = 880ms.
     Straighten: 4 x 70ms stagger + 400ms = 680ms. */
  .gfx[data-gfx="delay-chain"].is-armed:not(.is-live) { --fb: 650ms; }
  .gfx[data-gfx="delay-chain"] .dc-tile {
    --td: calc(var(--fb, 0ms) + var(--k) * 80ms);
    --tc: calc(var(--td) + 160ms);
    transition: transform .36s cubic-bezier(.55, 0, .7, 1.3) var(--td), background-color .2s ease-out var(--tc), color .2s ease-out var(--tc), box-shadow .2s ease-out var(--tc);
  }
  .gfx[data-gfx="delay-chain"].is-with .dc-tile {
    --tw: calc(var(--kr) * 70ms);
    transition: transform .4s var(--g-spring) var(--tw), background-color .2s ease-out var(--tw), color .2s ease-out var(--tw), box-shadow .2s ease-out var(--tw);
  }
  .gfx.is-armed:not(.is-in) .dc-tile {
    --acc: var(--g-line-2); --ib: var(--g-tint); --if: var(--g-muted); --sc: var(--g-muted); --ln: var(--g-line-2);
    transform: none; background: var(--g-surface-2); color: var(--g-text);
    box-shadow: 0 0 0 1px var(--g-line-2), inset 0 3px 0 var(--acc), 0 0 0 0 transparent, 0 24px 30px -22px rgba(0, 0, 0, .5);
  }
  .gfx.is-in:not(.is-with) .dc-slot--end .dc-tile { animation: gx-dc-hit .3s cubic-bezier(.3, .7, .4, 1) calc(var(--td) + 260ms) both; }
  .gfx[data-gfx="delay-chain"] .dc-x > span { transition: opacity .2s ease-out; }
  .gfx[data-gfx="delay-chain"] .dc-tile .dc-x > span { transition-delay: var(--tc); }
  .gfx[data-gfx="delay-chain"].is-with .dc-tile .dc-x > span { transition-delay: var(--tw); }
  .gfx[data-gfx="delay-chain"] .dc-fuse { transition: transform .6s cubic-bezier(.45, 0, .55, 1) var(--fb, 0ms); }
  .gfx[data-gfx="delay-chain"].is-with .dc-fuse { transition: transform .2s ease-out; }
  .gfx.is-armed:not(.is-in) .dc-fuse { transform: scaleX(0); }
  .gfx[data-gfx="delay-chain"] .dc-hold { transition: transform .2s ease-out; }
  .gfx[data-gfx="delay-chain"].is-with .dc-hold { transition: transform .4s var(--g-ease) .1s; }
  .gfx[data-gfx="delay-chain"] .dc-stop { transition: opacity .2s ease-out, transform .2s ease-out; }
  .gfx[data-gfx="delay-chain"].is-with .dc-stop { transition: opacity .2s ease-out .1s, transform .3s cubic-bezier(.34, 1.56, .64, 1) .1s; }

  /* before-after: handle feedback */
  .ba-h__knob { transition: transform .2s ease-out, box-shadow .2s ease-out; }
  .ba-h:hover .ba-h__knob { transform: scale(1.06); }
  .gfx.is-drag .ba-h__knob { transform: scale(.94); }

  /* defect: the pin pulses three times while it holds the loop slot */
  .gfx.is-loop .df-pulse { animation: gx-pin 2.4s var(--g-ease) 3; }

  /* request: the plane travels once, then the status resolves step by step (350 to 400ms each) */
  .gfx.is-armed.is-in .rq-plane { animation: gx-rq-fly .8s cubic-bezier(.45, 0, .3, 1) .25s both; }
  .gfx.is-armed .rq-node__ck { opacity: 0; transform: scale(.4); }
  .gfx.is-armed.is-in .rq-node__ck { animation: gx-pl-done .35s cubic-bezier(.34, 1.56, .64, 1) var(--sd) both; }
  .gfx.is-armed .rq-step__l { opacity: .45; }
  .gfx.is-armed.is-in .rq-step__l { animation: gx-dim-in .35s var(--g-ease) var(--sd) both; }
  .gfx.is-armed .rq-time { opacity: 0; }
  .gfx.is-armed.is-in .rq-time { animation: gx-rise .35s var(--g-ease) var(--sd) both; }
  .gfx.is-armed .rq-seg { transform: scaleX(0); }
  .gfx.is-armed.is-in .rq-seg { transform: none; transition: transform .4s var(--g-ease) var(--sd); }
}
@keyframes gx-dc-hit { 0% { transform: rotate(0deg); } 30% { transform: rotate(3.5deg); } 62% { transform: rotate(-1.2deg); } 100% { transform: rotate(0deg); } }
@keyframes gx-pin { 0% { opacity: .9; transform: scale(.4); } 100% { opacity: 0; transform: scale(2.6); } }
@keyframes gx-rise { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes gx-rq-fly { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 80% { opacity: 1; } 100% { left: calc(100% - 22px); opacity: 0; } }

/* ============================================================ Screens for the tour laptop
   data-device="bare": a screen without frame or shadow (tour layers). assistant-desk wraps the
   assistant card in the app shell so it can fill a laptop screen. */
.gx-bare .gx-screen { border-radius: 0; }
.gfx[data-gfx="assistant-desk"], .gfx[data-gfx="tour-laptop"] { --cw: 1240; --ch: 776; }
.gfx:not([data-device]):is([data-gfx="assistant-desk"], [data-gfx="tour-laptop"]) { --sw: calc(var(--cw) + 156); --sh: calc(var(--ch) + 72); }
.asd { display: flex; align-items: flex-start; gap: 28px; padding: 28px 32px; }
.asd-card { position: relative; flex: none; width: 600px; height: 500px; }
.asd-side { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 10px; padding-top: 4px; }
.asd-h { margin-bottom: 4px; }
.asd-q { gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--g-surface-2); box-shadow: 0 0 0 1px var(--g-line); font-size: 13px; line-height: 1.35; }
.asd-q .gx-i { color: var(--g-muted); }
.asd-note { margin-top: 8px; padding: 14px 16px; font-size: 13px; }
.asd-note .gx-i { color: var(--g-ok-ink); }
.asd-note .gx-s { margin-top: 6px; line-height: 1.5; }

/* ============================================================ Detail variants
   .gfx.is-detail (js: container below 560px, or data-detail="always") drops the scaled stage and
   shows one card in flow at 1:1, so every text renders at its real size, 11px and up. The
   container then takes the card's height (aspect-ratio: auto). */
.gx-full { position: absolute; inset: 0; }
.gx-detail { display: none; }
.gfx.is-detail { aspect-ratio: auto; }
.gfx.is-detail > .gx-stage { position: relative; width: auto; height: auto; transform: none; }
.gfx.is-detail > .gx-stage > .gx-full { display: none; }
.gfx.is-detail > .gx-stage > .gx-detail { display: block; }
.gx-detail { max-width: 420px; margin: 0 auto; font-size: 14px; line-height: 1.42; }
.gx-detail .gx-s { font-size: 12.5px; }
.gx-detail .gx-xs, .gx-detail .gx-chip, .gx-detail .gx-badge, .gx-detail .gx-cap, .gx-detail .gx-label { font-size: 11px; }
.gx-detail .gx-h1 { font-size: 22px; }
.gx-detail .gx-h2 { font-size: 16px; }
.gx-detail .gx-av--s { width: 26px; height: 26px; font-size: 11px; }
.gx-detail .gx-prio { width: 22px; height: 22px; font-size: 11.5px; }
.gx-detail .gx-ring__num > span { display: none; }
.gx-detail .gx-ring__num b { font-size: 15px; }
.gx-dcap { display: flex; justify-content: flex-end; }

/* phone-sized crop of a device (cockpit, subcontractor): the phone continues below the card,
   its lower edge fades out over the empty screen space only */
.gx-detail--cockpit, .gx-detail--subcontractor {
  padding: 5px 5px 0;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 56px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 56px), transparent);
}
.gx-dphone {
  position: relative; padding: 9px 9px 0;
  border-radius: 50px 50px 0 0;
  background: var(--gx-bezel);
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.1), 0 0 0 2px var(--gx-edge), 0 0 0 4px color-mix(in srgb, var(--gx-edge) 40%, transparent);
}
.gx-dphone::before { content: ""; position: absolute; left: 50%; top: 20px; z-index: 7; width: 96px; height: 28px; margin-left: -48px; border-radius: 16px; background: #000; }
.gx-dphone__scr { position: relative; overflow: hidden; padding-bottom: 64px; border-radius: 41px 41px 0 0; background: var(--g-bg); }
.gx-dstatus { height: 50px; padding: 0 24px 0 32px; font-size: 14px; }

/* clean card for the browser screens */
.gx-dcard { padding: 5px; border-radius: 26px; background: color-mix(in srgb, var(--g-surface), var(--g-text) 4%); box-shadow: inset 0 0 0 1px var(--g-line), var(--g-shadow); }
.gx-dcard__in { padding: 18px 18px 20px; border-radius: 21px; background: var(--g-surface-2); box-shadow: inset 0 1px 0 var(--gx-hi), 0 0 0 1px var(--g-line); }

/* cockpit: KPI row (2 x 2) and one project card */
.gx-dbar { gap: 10px; padding: 2px 16px 14px; }
.gx-dbar .gx-mark { width: 28px; }
.gx-dpad { display: flex; flex-direction: column; gap: 12px; padding: 0 12px; }
.ck-d .ck-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ck-d .ck-kpi { padding: 12px 12px 11px; }
.ck-d .ck-kpi__l { align-items: flex-start; font-size: 12.5px; line-height: 1.3; }
.ck-d .ck-kpi__l .gx-ell { white-space: normal; overflow: visible; }
.ck-d .ck-kpi__l > .gx-i--s { display: none; }
.ck-d .ck-kpi__n { margin: 8px 0 3px; font-size: 28px; }
.ck-d .ck-sub { margin: 4px 0 -2px; }
.ck-d .ck-proj { gap: 11px; padding: 14px; }
.ck-d .ck-proj__head { gap: 12px; }
.ck-d .ck-proj__next { font-size: 13px; }
.ck-d .ck-proj__m { font-size: 12px; }

/* project: the Einschätzung columns stacked */
.pj-d__h { gap: 14px; }
.pj-d__title { margin-top: 6px; font-size: 20px; }
.pj-d__chips { flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.pj-d__lead { margin-top: 14px; font-size: 14.5px; font-weight: 600; line-height: 1.5; }
.pj-d__sec { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--g-line); }
.pj-d__sec .pj-colh { padding-bottom: 8px; border-bottom: 0; }
.pj-d__sec--crit .pj-colh { color: var(--g-accent-ink); }
.pj-d__sec--ok .pj-colh { color: var(--g-ok-ink); }
.pj-d__t { margin-bottom: 4px; font-size: 14.5px; line-height: 1.35; }
.pj-d__sec .gx-s { line-height: 1.5; }

/* weekplan: column A */
.wp-d { padding: 0 12px 12px; background: var(--g-surface); }
.wp-d .wp-col__h { height: 52px; }
.wp-d__kw { gap: 8px; margin: -8px 4px 2px; }
.wp-d .wp-card { padding: 13px 13px 11px; font-size: 14px; }
.wp-d .wp-why { font-size: 12px; }

/* approval: the draft with its approval buttons */
.ap-d { padding: 16px; font-size: 14px; }
.ap-d .ap-draft__h { align-items: flex-start; }
.ap-d__st { flex-wrap: wrap; gap: 6px; margin: 12px 0 10px; }
.ap-d__to { margin-bottom: 12px; font-size: 13px; line-height: 1.7; overflow-wrap: anywhere; }
.ap-d__to .gx-chip { vertical-align: 1px; }
.ap-d .ap-mail { height: auto; padding: 14px 16px; font-size: 13.5px; line-height: 1.55; }
.ap-d .ap-mail::after { display: none; }
.ap-d .ap-mail__subj { font-size: 15px; }
.ap-d .ap-list b { width: 20px; }
.ap-d__who { gap: 6px; margin: 12px 0; font-size: 12.5px; color: var(--g-muted); }
.ap-d__act { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ap-d__act .gx-btn { height: 40px; font-size: 13px; }
.ap-d__act .gx-btn--pri { grid-column: 1 / -1; }

/* subcontractor: the message that becomes a task */
.sc-d__h { gap: 10px; padding: 0 14px 12px; border-bottom: 1px solid var(--g-line); font-size: 14px; }
.sc-d__back { display: grid; place-items: center; width: 22px; color: var(--g-accent-ink); }
.sc-d__back .gx-i { transform: rotate(180deg); }
.sc-d { display: flex; flex-direction: column; gap: 12px; padding: 14px 12px 0; }
.sc-d .gx-dcap { margin-bottom: -4px; }
.sc-d .sc-msg, .sc-d .sc-msg--focus { max-width: none; }
.sc-d .sc-bub { font-size: 14px; }
.sc-d__menu { flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.sc-d__menu .sc-menu__it { height: 32px; padding: 0 12px; border-radius: 999px; font-size: 13px; background: var(--g-surface-2); box-shadow: inset 0 0 0 1px var(--g-line-2); }
.sc-d__menu .sc-menu__it.is-on { background: var(--g-accent-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--g-accent) 30%, transparent); }
.sc-d .sc-task { margin-left: 36px; max-width: none; }
.sc-d .sc-task__t { font-size: 14px; }
.sc-d .sc-task__meta { font-size: 13px; }

/* ============================================================ Hero film (cockpit[data-film])
   States are classes on .gfx (f-ptr, f-aim, f-press, f-panel, f-toast, f-aim2, f-press2,
   f-check). Static styles describe every state, transitions only exist with motion allowed, so
   reduced motion shows the final state (f-panel f-toast f-check) without any movement. */
.fm { position: absolute; inset: 0; z-index: 12; pointer-events: none; }
.fm-scrim { position: absolute; inset: 0; background: color-mix(in srgb, var(--g-text) 7%, transparent); opacity: 0; }
.fm-panel {
  position: absolute; left: var(--px, 252px); top: var(--py, 270px); width: 452px;
  padding: 4px 16px 10px; border-radius: 18px; background: var(--g-surface-2);
  box-shadow: 0 0 0 1px var(--g-line-2), 0 8px 18px -10px rgba(0, 0, 0, .22), 0 30px 60px -26px rgba(0, 0, 0, .45);
  opacity: 0; transform: translateY(-8px) scale(.98); transform-origin: 18% 0;
}
.fm-panel__h { gap: 10px; height: 56px; border-bottom: 1px solid var(--g-line); }
.fm-panel__h .gx-badge { min-width: 26px; height: 22px; font-size: 12px; }
.fm-it { padding: 11px 0; border-bottom: 1px solid var(--g-line); }
.fm-it__h { gap: 10px; font-size: 13px; line-height: 1.3; }
.fm-it__h .ck-bang { width: 24px; height: 24px; }
.fm-it__why { margin: 3px 0 8px 34px; line-height: 1.4; }
.fm-step { gap: 8px; margin-left: 34px; font-size: 12.5px; }
.fm-step__t b { font-weight: 600; }
.fm-more { gap: 6px; padding: 10px 0 2px; font-size: 12px; color: var(--g-muted); }
.fm-more__d { display: none; }
.fm-cb__ck { opacity: 0; transform: scale(.4); }
.fm-n { display: inline-grid; }
.fm-n > span { grid-area: 1 / 1; }
.fm-n__b { opacity: 0; transform: translateY(45%); }
.fm-toast {
  position: absolute; right: 18px; top: 14px; width: 392px;
  padding: 12px 14px 14px; border-radius: 20px;
  background: color-mix(in srgb, var(--g-surface-2), transparent 3%);
  box-shadow: 0 0 0 1px var(--g-line-2), inset 0 1px 0 var(--gx-hi), 0 24px 50px -24px rgba(0, 0, 0, .5);
  opacity: 0; transform: translateX(28px);
}
.fm-toast__h { gap: 7px; margin-bottom: 9px; }
.fm-toast__b { align-items: flex-start; gap: 12px; }
.fm-toast__ic { color: var(--g-warn-ink); background: var(--g-warn-soft); }
.fm-toast__t { margin-bottom: 3px; font-size: 13.5px; line-height: 1.35; }
.fm-toast .gx-s { line-height: 1.45; }
.fm-ptr { position: absolute; left: 0; top: 0; z-index: 3; transform: translate(var(--fx, 0px), var(--fy, 0px)); }
.fm-ptr__i { display: block; position: relative; opacity: 0; }
.fm-arrow { display: block; width: 26px; height: 26px; margin: -3px 0 0 -5px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .3)); }
.fm-arrow path { fill: #fff; stroke: #121214; stroke-width: 1.3; stroke-linejoin: round; }
.fm-touch { display: none; position: absolute; left: -20px; top: -20px; width: 40px; height: 40px; border-radius: 50%; background: rgba(18, 18, 20, .16); box-shadow: 0 0 0 2px rgba(255, 255, 255, .92), 0 4px 12px -4px rgba(0, 0, 0, .35); }
[data-film="kpi"]::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: color-mix(in srgb, var(--g-fill) 5%, transparent); box-shadow: 0 0 0 2px var(--g-fill);
  opacity: 0;
}
/* states */
.gfx.f-ptr .gx-full .fm-ptr__i { opacity: 1; }
.gfx.f-press .fm-ptr__i, .gfx.f-press2 .fm-ptr__i { transform: scale(.86); }
.gfx.f-press [data-film="kpi"]::after { opacity: 1; background: color-mix(in srgb, var(--g-fill) 11%, transparent); }
.gfx.f-panel [data-film="kpi"]::after { opacity: .85; }
.gfx.f-panel .fm-scrim { opacity: 1; }
.gfx.f-panel .fm-panel { opacity: 1; transform: none; }
.gfx.f-toast .fm-toast { opacity: 1; transform: none; }
.gfx.f-check .fm-cb__ck { opacity: 1; transform: none; }
.gfx.f-check .fm-step__t { color: var(--g-muted); text-decoration: line-through; text-decoration-color: var(--g-muted); }
.gfx.f-check .fm-n__a { opacity: 0; transform: translateY(-45%); }
.gfx.f-check .fm-n__b { opacity: 1; transform: none; }
/* detail (phone): the panel spans the screen, the toast is a banner, taps instead of a cursor */
.gx-detail .fm-panel { left: 10px; right: 10px; width: auto; padding: 2px 14px 8px; }
.gx-detail .fm-it + .fm-it + .fm-it { display: none; }
.gx-detail .fm-more__f { display: none; }
.gx-detail .fm-more__d { display: inline; }
.gx-detail .fm-it__h { font-size: 13.5px; }
.gx-detail .fm-it__why, .gx-detail .fm-step { margin-left: 34px; font-size: 12.5px; }
.gx-detail .fm-toast { left: 8px; right: 8px; top: 8px; width: auto; transform: translateY(-14px); }
.gx-detail .fm-arrow { display: none; }
.gx-detail .fm-touch { display: block; }
.gfx.f-tap .gx-detail .fm-ptr__i, .gfx.f-tap2 .gx-detail .fm-ptr__i { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .fm-scrim { transition: opacity .4s ease-out; }
  .fm-panel { transition: opacity .35s var(--g-ease), transform .45s var(--g-ease); }
  .fm-toast { transition: opacity .35s var(--g-ease), transform .5s var(--g-spring); }
  .gx-full .fm-ptr { transition: transform .9s cubic-bezier(.45, 0, .2, 1); }
  .fm-ptr__i { transition: opacity .25s ease-out, transform .2s ease-out; }
  .fm-cb__ck { transition: opacity .2s ease-out, transform .3s cubic-bezier(.34, 1.56, .64, 1); }
  .fm-step__t { transition: color .2s ease-out; }
  .fm-n > span { transition: opacity .3s ease-out, transform .3s var(--g-ease); }
  [data-film="kpi"]::after { transition: opacity .2s ease-out, background-color .2s ease-out; }
}

/* ============================================================ Product tour (.gx-tour)
   Markup: section.gx-tour[data-gx-tour] > .gx-tour__steps > .gx-tour__step[data-tour-gfx].
   js adds .gx-tour__device (desktop) or one .gx-tour__gfx per step (mobile). Reads the page
   tokens --text --muted --line --accent-text --font-display --font-mono, with fallbacks. */
.gx-tour {
  --gt-text: var(--text, var(--gx-text)); --gt-muted: var(--muted, var(--gx-muted));
  --gt-accent: var(--accent-text, var(--accent, var(--gx-accent))); --gt-line: var(--line, var(--gx-line));
  position: relative; color: var(--gt-text);
}
.gx-tour__steps { display: grid; gap: 72px; }
.gx-tour__step { min-width: 0; }
.gx-tour__kicker { margin: 0 0 12px; font: 500 12px/1.2 var(--font-mono, "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace); letter-spacing: .14em; text-transform: uppercase; color: var(--gt-accent); }
.gx-tour__title { margin: 0 0 12px; font-family: var(--font-display, "Mona Sans", ui-sans-serif, system-ui, sans-serif); font-size: clamp(26px, 2.6vw, 36px); font-weight: 560; font-stretch: 112%; line-height: 1.1; letter-spacing: -.018em; text-wrap: balance; }
.gx-tour__text { margin: 0; max-width: 38ch; font-size: 17px; line-height: 1.55; color: var(--gt-muted); }
.gx-tour__gfx { margin-top: 28px; }
.gx-tour__gfx--diary { max-width: 300px; margin-left: auto; margin-right: auto; }
.gx-tour__device { display: none; }
.gx-tour__layers { position: absolute; inset: 0; background: var(--g-bg); }
.gx-tour__layer { position: absolute; inset: 0; opacity: 0; visibility: hidden; }
.gx-tour__layer.is-prev { z-index: 1; opacity: 1; visibility: visible; }
.gx-tour__layer.is-on { z-index: 2; opacity: 1; visibility: visible; }
.gx-tour__layer > .gfx[data-gfx] { --cw: 1240; --ch: 776; }
.gx-tour__laptop { position: relative; z-index: 1; }
.gx-tour__phone { position: absolute; right: 0; bottom: 0; z-index: 2; width: 23%; opacity: 0; visibility: hidden; transform: translateY(8%); }
.gx-tour__phone.is-on { opacity: 1; visibility: visible; transform: none; }
@media (min-width: 1024px) {
  .gx-tour { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(40px, 5vw, 96px); }
  .gx-tour__steps { grid-column: 1; grid-row: 1; gap: 0; }
  .gx-tour__step { display: flex; flex-direction: column; justify-content: center; min-height: 72vh; padding-left: 28px; border-left: 2px solid var(--gt-line); }
  .gx-tour__step .gx-tour__kicker { color: var(--gt-muted); }
  .gx-tour__step.is-active { border-left-color: var(--gt-accent); }
  .gx-tour__step.is-active .gx-tour__kicker { color: var(--gt-accent); }
  .gx-tour__gfx { display: none; }
  .gx-tour__device { display: block; grid-column: 2; grid-row: 1; }
  .gx-tour__stick { position: sticky; top: 0; display: flex; align-items: center; height: 100vh; }
  .gx-tour__rig { position: relative; width: 100%; max-width: 920px; margin-left: auto; padding-bottom: 6%; }
}
@media (prefers-reduced-motion: no-preference) {
  .gx-tour__step, .gx-tour__kicker { transition: border-color .3s ease-out, color .3s ease-out; }
  .gx-tour__layer.is-on { transition: opacity .3s ease-out; }
  .gx-tour__phone { transition: opacity .3s ease-out, transform .4s cubic-bezier(.32, .72, 0, 1), visibility 0s linear .3s; }
  .gx-tour__phone.is-on { transition: opacity .3s ease-out, transform .4s cubic-bezier(.32, .72, 0, 1), visibility 0s; }
}

/* ============================================================ Zoom into detail (.gx-zoom)
   Markup: .gx-zoom[data-gx-zoom][data-zoom-target] > .gx-zoom__stick > (.gx-zoom__view >
   .gx-zoom__cam > .gfx) + p.gx-zoom__cap. js measures --zx --zy --zs (target transform) and
   --capx --capw; CSS drives the camera with the section's view() timeline. */
.gx-zoom {
  --zx: 0px; --zy: 0px; --zs: 1; --zp: 0;
  position: relative; height: 150vh;
  color: var(--text, var(--gx-text));
  view-timeline-name: --gx-zoom; view-timeline-axis: block;
}
.gx-zoom__stick { position: sticky; top: 0; height: 100vh; }
.gx-zoom__view { position: absolute; inset: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.gx-zoom__cam { position: relative; flex: none; width: min(92%, 1180px); transform-origin: 0 0; }
.gx-zoom__cap {
  position: absolute; left: var(--capx, 62%); top: 50%; width: var(--capw, 30%);
  margin: 0; transform: translateY(-50%); opacity: 0;
  font-family: var(--font-display, "Mona Sans", ui-sans-serif, system-ui, sans-serif);
  font-size: clamp(20px, 1.9vw, 28px); font-weight: 560; font-stretch: 110%; line-height: 1.22; letter-spacing: -.012em; text-wrap: balance;
  /* caption sits as its own card over the zoomed screen, so it never collides with cockpit content */
  z-index: 2; padding: 20px 24px; border-radius: 16px;
  background: var(--surface-2, #FBFBFB); color: var(--text, #121214);
  border: 1px solid var(--line, rgba(18, 18, 20, .1));
  box-shadow: var(--shadow-lg, 0 40px 80px -40px rgba(0, 0, 0, .5));
}
.gx-zoom__band { position: absolute; left: 0; width: 1px; visibility: hidden; pointer-events: none; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .gx-zoom.is-sd .gx-zoom__cam {
      animation-name: gx-zoom-cam; animation-duration: 1ms; animation-duration: auto;
      animation-timing-function: cubic-bezier(.45, 0, .55, 1); animation-fill-mode: both;
      animation-timeline: --gx-zoom; animation-range: contain 0% contain 75%;
    }
    .gx-zoom.is-sd .gx-zoom__cap {
      animation-name: gx-zoom-cap; animation-duration: 1ms; animation-duration: auto;
      animation-timing-function: linear; animation-fill-mode: both;
      animation-timeline: --gx-zoom; animation-range: contain 78% contain 96%;
    }
  }
}
@keyframes gx-zoom-cam { from { transform: translate(0px, 0px) scale(1); } to { transform: translate(var(--zx), var(--zy)) scale(var(--zs)); } }
@keyframes gx-zoom-cap { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: no-preference) {
  /* fallback without view(): four steps from an IntersectionObserver, 400ms each */
  .gx-zoom.is-io .gx-zoom__cam {
    transform: translate(calc(var(--zx) * var(--zp)), calc(var(--zy) * var(--zp))) scale(calc(1 + (var(--zs) - 1) * var(--zp)));
    transition: transform .4s cubic-bezier(.45, 0, .55, 1);
  }
  .gx-zoom.is-io .gx-zoom__cap { translate: 0 14px; transition: opacity .4s ease-out, translate .4s ease-out; }
  .gx-zoom.is-io[data-zstep="3"] .gx-zoom__cap { opacity: 1; translate: 0 0; }
}
/* reduced motion and widths below 1024px: the zoomed card, static, caption below */
.gx-zoom.is-static { height: auto; }
.gx-zoom.is-static .gx-zoom__stick { position: relative; height: auto; }
.gx-zoom.is-static .gx-zoom__view { position: relative; display: block; height: var(--zh, auto); border-radius: 22px; }
.gx-zoom.is-static .gx-zoom__cam { position: absolute; left: 0; top: 0; width: 100%; transform: translate(var(--zx), var(--zy)) scale(var(--zs)); }
.gx-zoom.is-static .gx-zoom__cap { position: static; width: auto; max-width: 36ch; margin: 16px auto 0; transform: none; opacity: 1; text-align: center; box-shadow: none; }

/* ============================================================ building (Gebäudeschnitt, illustration, no UI) */
.gfx[data-gfx="building"] { --cw: 960; --ch: 620; }
.bd { position: relative; width: 960px; height: 620px; }
.bd-k { position: absolute; left: 0; top: 0; }
.bd-crane, .bd-over { position: absolute; left: 0; top: 0; }
.bd-crane path { stroke: var(--g-line-2); stroke-width: 1.5; stroke-linecap: round; }
.bd-crane rect { fill: var(--g-line-2); }
.bd-crane .bd-hook { stroke-width: 1; }
.bd-crane .bd-ground { stroke: color-mix(in srgb, var(--g-text) 55%, transparent); stroke-width: 3; }
.bd-fl {
  position: absolute; left: 118px; width: 300px; height: 74px;
  display: flex; align-items: center; justify-content: space-around;
  padding: 12px 14px 4px;
  background: var(--g-surface-2);
  box-shadow: inset 0 0 0 1px var(--g-line-2);
  --ty: 26px;
}
.bd-fl::before {
  content: ""; position: absolute; left: -6px; right: -6px; top: 0; height: 8px; border-radius: 2px;
  background: color-mix(in srgb, var(--g-text) 72%, var(--g-surface-2));
}
.bd-lv { position: absolute; right: calc(100% + 14px); top: 30px; font-size: 11px; color: var(--g-muted); white-space: nowrap; }
.bd-win {
  width: 42px; height: 34px; border-radius: 2px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--g-text) 18%, transparent), color-mix(in srgb, var(--g-text) 6%, transparent));
  box-shadow: inset 0 0 0 1.5px var(--g-line-2);
}
.bd-win--open { background: none; box-shadow: none; outline: 1.5px dashed color-mix(in srgb, var(--g-warn) 75%, transparent); outline-offset: -1.5px; }
.bd-roof {
  position: absolute; left: 110px; top: 178px; width: 316px; height: 24px; border-radius: 3px 3px 0 0;
  background: color-mix(in srgb, var(--g-text) 72%, var(--g-surface-2));
  --ty: 26px;
}
.bd-over path { stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.bd-crack { stroke: var(--g-fill); stroke-width: 2.2 !important; }
.bd-lead { stroke: var(--g-line-2); }
.bd-lead--crit { stroke: color-mix(in srgb, var(--g-fill) 60%, transparent); }
.bd-lead--warn { stroke: color-mix(in srgb, var(--g-warn) 60%, transparent); }
.bd-lead--ok { stroke: color-mix(in srgb, var(--g-ok) 60%, transparent); }
.bd-pin {
  position: absolute; left: 410px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--g-muted); box-shadow: 0 0 0 3px var(--g-surface-2), 0 2px 6px rgba(0,0,0,.25);
}
.bd-pin--crit { background: var(--g-fill); }
.bd-pin--warn { background: var(--g-warn); }
.bd-pin--ok { background: var(--g-ok); }
.bd-pin--ink { background: var(--g-text); }
.bd-ring { position: absolute; inset: -6px; border-radius: 50%; box-shadow: 0 0 0 2px var(--g-fill); opacity: 0; }
.bd-co { position: absolute; left: 520px; width: 440px; height: 70px; padding: 12px 16px; display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.bd-co__t { font-size: 14.5px; line-height: 1.2; }
.bd-co__s { font-size: 12px; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bd-foot { position: absolute; left: 0; top: 594px; }
@media (prefers-reduced-motion: no-preference) {
  .gfx.is-armed.is-in .bd-ring { animation: gx-pulse 1.6s var(--g-ease) 2.4s 4 both; }
  .motion-paused .gfx .bd-ring, .gfx.is-off .bd-ring { animation-play-state: paused; }
}
/* detail: the same notes stacked as storeys */
.bd-d { display: flex; flex-direction: column; gap: 6px; }
.bd-d .bd-k { position: static; margin-bottom: 10px; }
.bd-d__roof { display: block; height: 10px; margin: 0 -4px; border-radius: 3px 3px 0 0; background: color-mix(in srgb, var(--g-text) 72%, var(--g-surface-2)); }
.bd-d__ground { display: block; height: 3px; margin: 2px -12px 0; border-radius: 2px; background: color-mix(in srgb, var(--g-text) 55%, transparent); }
.bd-drow {
  display: flex; gap: 12px; padding: 12px 14px; border-radius: 4px;
  background: var(--g-surface-2); box-shadow: inset 0 0 0 1px var(--g-line-2), inset 3px 0 0 var(--g-muted);
}
.bd-drow--crit { box-shadow: inset 0 0 0 1px var(--g-line-2), inset 3px 0 0 var(--g-fill); }
.bd-drow--warn { box-shadow: inset 0 0 0 1px var(--g-line-2), inset 3px 0 0 var(--g-warn); }
.bd-drow--ok { box-shadow: inset 0 0 0 1px var(--g-line-2), inset 3px 0 0 var(--g-ok); }
.bd-drow--ink { box-shadow: inset 0 0 0 1px var(--g-line-2), inset 3px 0 0 var(--g-text); }
.bd-dfl { flex: none; width: 44px; padding-top: 2px; font-size: 11px; color: var(--g-muted); }
.bd-drow .bd-co__s { white-space: normal; margin-top: 3px; }
.bd-dchip { margin-top: 8px; }
.bd-dfoot { margin-top: 8px; }
.gfx[data-gfx="building"]:not(.is-detail) { max-width: 1040px; margin-top: clamp(8px, 2vw, 24px); }

/* ============================================================ deadlines (Fristen-Zeitstrahl, illustration, no UI) */
.gfx[data-gfx="deadlines"] { --cw: 960; --ch: 540; }
.gfx[data-gfx="deadlines"]:not(.is-detail) { max-width: 1040px; }
.dl { position: relative; width: 960px; height: 540px; }
.dl-k { position: absolute; left: 0; top: 0; }
.dl-svg { position: absolute; left: 0; top: 0; }
.dl-axis { stroke: color-mix(in srgb, var(--g-text) 55%, transparent); stroke-width: 2; }
.dl-ticks { stroke: var(--g-line-2); stroke-width: 1.5; }
.dl-today { stroke: var(--g-fill); stroke-width: 1.5; stroke-dasharray: 4 5; }
.gfx.is-armed .dl-today { stroke-dasharray: 100 100; }
.gfx.is-armed.is-in .dl-today { stroke-dasharray: 4 5; transition: stroke-dashoffset .8s var(--g-ease) var(--dl), stroke-dasharray 0s linear calc(var(--dl) + .8s); }
.dl-stem { stroke: var(--g-line-2); stroke-width: 1.5; }
.dl-guide { stroke: var(--g-line-2); stroke-width: 1; stroke-dasharray: 2 4; }
.dl-bar { stroke: color-mix(in srgb, var(--g-text) 35%, transparent); stroke-width: 3; stroke-linecap: round; }
.dl-bar--now { stroke: var(--g-fill); }
.dl-now { position: absolute; left: 143px; top: 34px; font-size: 11px; color: var(--g-accent-ink); }
.dl-kws { position: absolute; left: 0; top: 264px; width: 960px; height: 14px; }
.dl-kw { position: absolute; width: 60px; text-align: center; font-size: 10.5px; color: var(--g-muted); }
.dl-dia { position: absolute; width: 14px; height: 14px; transform: rotate(45deg); border-radius: 2px; background: var(--g-text); box-shadow: 0 0 0 3px var(--g-surface-2); }
.gfx.is-armed.is-in .dl-dia.gx-pop { transform: rotate(45deg); }
.gfx.is-armed .dl-dia.gx-pop { transform: rotate(45deg) scale(.3); }
.dl-ms { position: absolute; width: 210px; height: 44px; padding: 0 12px; display: flex; align-items: center; gap: 8px; font-size: 13px; white-space: nowrap; }
.dl-date { font-size: 11px; color: var(--g-muted); }
.dl-bell { position: absolute; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: var(--g-text); background: var(--g-surface-2); box-shadow: inset 0 0 0 1.5px var(--g-line-2); }
.dl-bell .gx-i { width: 14px; height: 14px; }
.dl-bell--now { color: #fff; background: var(--g-fill); box-shadow: none; }
.dl-ring { position: absolute; inset: -5px; border-radius: 50%; box-shadow: 0 0 0 2px var(--g-fill); opacity: 0; }
.dl-end { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: color-mix(in srgb, var(--g-text) 55%, transparent); }
.dl-task { position: absolute; font-size: 12.5px; color: var(--g-muted); white-space: nowrap; }
.dl-task .gx-b { color: var(--g-text); }
.dl-foot { position: absolute; left: 0; top: 516px; }
@media (prefers-reduced-motion: no-preference) {
  .gfx.is-armed.is-in .dl-ring { animation: gx-pulse 1.6s var(--g-ease) 2.6s 4 both; }
  .motion-paused .gfx .dl-ring, .gfx.is-off .dl-ring { animation-play-state: paused; }
}
.dl-d { display: flex; flex-direction: column; gap: 10px; }
.dl-dcard { padding: 14px 16px; }
.dl-dcard .gx-row { gap: 10px; font-size: 14px; }
.dl-dia--s { position: relative; width: 10px; height: 10px; margin: 0 2px; box-shadow: none; flex: none; }
.dl-drem { align-items: flex-start; margin-top: 10px; }
.dl-drem .dl-bell { position: relative; flex: none; width: 24px; height: 24px; }
.dl-drem .gx-s { font-size: 12.5px; line-height: 1.4; padding-top: 3px; }
.dl-lead { color: var(--g-text); }
.dl-dcard .dl-date { white-space: nowrap; }

/* ============================================================ release (Freigabe-Schleuse, illustration, no UI) */
.gfx[data-gfx="release"] { --cw: 960; --ch: 570; }
.gfx[data-gfx="release"]:not(.is-detail) { max-width: 1040px; }
.rl { position: relative; width: 960px; height: 570px; }
.rl-k { position: absolute; left: 0; top: 0; }
.rl-col { position: absolute; top: 64px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--g-muted); }
.rl-col--l { left: 0; }
.rl-col--m { left: 380px; width: 200px; text-align: center; }
.rl-col--r { right: 0; width: 270px; }
.rl-gate {
  position: absolute; left: 380px; top: 92px; width: 200px; height: 410px;
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding-top: 16px; text-align: center;
  border-radius: 20px; background: var(--g-tint); box-shadow: inset 0 0 0 1.5px var(--g-line-2);
  font-size: 13px;
}
.rl-gate-ic { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 4px; border-radius: 50%; background: var(--g-surface-2); color: var(--g-text); box-shadow: 0 0 0 1px var(--g-line); }
.rl-gate-ic .gx-i { width: 22px; height: 22px; }
.rl-gate .gx-xs { max-width: 150px; }
.rl-track { position: absolute; left: 135px; width: 690px; height: 0; border-top: 1.5px dashed var(--g-line-2); }
.rl-track--warn { width: 345px; border-top-color: color-mix(in srgb, var(--g-fill) 55%, transparent); }
.rl-item {
  position: absolute; left: 690px; width: 270px; height: 56px; padding: 0 12px;
  display: flex; align-items: center; gap: 10px; z-index: 2;
}
.rl-item .gx-tile--s { flex: none; }
.rl-t { display: block; font-size: 13px; line-height: 1.2; }
.rl-s { display: block; margin-top: 2px; }
.rl-item--warn { left: 345px; box-shadow: 0 0 0 2px var(--g-fill), 0 8px 20px -10px color-mix(in srgb, var(--g-fill) 60%, transparent); }
.rl-pass { position: absolute; left: 467px; z-index: 3; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: #fff; background: var(--g-ok); box-shadow: 0 0 0 3px var(--g-surface-2); }
.rl-pass .gx-i { width: 16px; height: 16px; }
.rl-stop { position: absolute; left: 345px; z-index: 3; width: 270px; display: flex; justify-content: center; }
.rl-foot { position: absolute; left: 0; top: 548px; }
@media (prefers-reduced-motion: no-preference) {
  .gfx.is-armed .rl-item { transform: translateX(-690px); }
  .gfx.is-armed .rl-item--warn { transform: translateX(-345px); }
  .gfx.is-armed.is-in .rl-item { transform: none; transition: transform 1.1s var(--g-ease) calc(var(--i) * 140ms + 400ms); }
}
.rl-d { display: flex; flex-direction: column; gap: 10px; }
.rl-drow { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; }
.rl-drow .rl-t { font-size: 14px; }
.rl-drow--warn { box-shadow: 0 0 0 2px var(--g-fill); }
.rl-dchip { display: block; margin-top: 10px; }