/* ==========================================================================
   MAIN.CSS — desktop, chrome, windows. Colors/fonts come from tokens.css;
   prefer editing tokens over editing values here.
   ========================================================================== */

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  overflow: hidden;
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--text);
  background: var(--ink);
}

/* ---------- DESKTOP ---------- */

#desktop {
  position: fixed;
  inset: 0;
  background: var(--wallpaper);
  transition: background var(--t-med);
}

/* --------------------------------------------------------------------------
   WALLPAPER TEXTURE — the Fujifilm treatment.
   Layer 1+2: film grain (coarse clumps + fine speck) ≈ GRAIN EFFECT
              ROUGHNESS: STRONG / SIZE: LARGE.
   Layer 3:   large-scale tonal mottle ≈ Color Chrome — deepens patches of
              the wallpaper tone like weathered Jiufen plaster.
   Layer 4:   soft vignette for depth.
   GRAIN DIAL (Nick): overall strength = the `opacity` below.
   .28 = obvious-but-classy · .38 = gallery print · .18 = subtle
   Sits ABOVE the artwork (z-index) — grain covers the whole "photo".
   -------------------------------------------------------------------------- */
#desktop::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background-image:
    radial-gradient(ellipse 120% 100% at 50% 38%, transparent 55%, rgba(46, 36, 28, .55) 135%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.32' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23c)' opacity='0.8'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23f)' opacity='0.7'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.006 0.011' numOctaves='4' stitchTiles='stitch'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.9'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='900' height='900' filter='url(%23m)' opacity='0.85'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
  opacity: .60;
}

/* the artwork — pinned bottom-right with clearance for the right icon
   column, PostHog style (grain layers sit over it) */
#desktop::after {
  content: '';
  position: absolute;
  right: 140px;
  bottom: 0;
  z-index: 1;
  width: min(64vw, 720px);
  height: min(64vw, 720px);
  background: url('../assets/desktop-art.webp') bottom right / contain no-repeat;
  pointer-events: none;
}

/* ---------- MENU BAR ---------- */

.menubar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--menubar-h);
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 14px;
  background: var(--os-chrome);
  backdrop-filter: blur(18px) saturate(1.4);
  border-bottom: 1px solid var(--os-chrome-edge);
  color: var(--os-text);
  font-size: var(--fs-sm);
  z-index: 9000;
  user-select: none;
}

.menu-logo {
  font-size: 17px;
  border: 0;
  background: none;
  cursor: pointer;
  padding: 3px 7px;
  border-radius: 6px;
}

.menu-logo:hover {
  background: color-mix(in oklab, var(--espresso) 10%, transparent);
}

.menu-name {
  font-weight: 800;
  margin-right: 6px;
}

.menu-link {
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  color: var(--os-text);
  opacity: .82;
  padding: 5px 10px;
  border-radius: 7px;
  text-decoration: none;
}

.menu-link:hover {
  opacity: 1;
  background: color-mix(in oklab, var(--espresso) 9%, transparent);
}

.menu-clock {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  opacity: .75;
}

.menu-cta {
  margin-left: 14px;
  padding: 6px 14px;
  background: var(--primary-600);
  color: #fff;
  border: 1px solid var(--primary-700);
  border-radius: 8px;
  font-weight: 700;
  font-size: var(--fs-sm);
  text-decoration: none;
  box-shadow: inset 0 1px 0 color-mix(in oklab, white 30%, transparent), 0 1px 3px rgba(46, 36, 28, .25);
}

.menu-cta:hover {
  background: var(--primary-700);
}

.menu-dropdown {
  display: none;
  position: fixed;
  top: calc(var(--menubar-h) + 4px);
  left: 34px;
  min-width: 210px;
  padding: 6px;
  background: var(--os-chrome);
  backdrop-filter: blur(24px) saturate(1.4);
  border: 1px solid var(--os-chrome-edge);
  border-radius: 10px;
  box-shadow: var(--shadow-menu);
  z-index: 9100;
}

.menu-dropdown.open {
  display: block;
}

.menu-dropdown button,
.menu-dropdown a {
  display: block;
  width: 100%;
  text-align: left;
  padding: 7px 10px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--os-text);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}

.menu-dropdown button:hover,
.menu-dropdown a:hover {
  background: var(--primary-600);
  color: #fff;
}

.menu-sep {
  height: 1px;
  margin: 5px 8px;
  background: var(--os-chrome-edge);
}

/* ---------- DESKTOP ICONS ---------- */

.icon-col {
  position: absolute;
  top: calc(var(--menubar-h) + 22px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 10;
}

.icon-col.left {
  left: 18px;
}

.icon-col.right {
  right: 18px;
  align-items: flex-end;
}

.trash-slot {
  position: absolute;
  right: 18px;
  bottom: 20px;
  z-index: 10;
}

.desk-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 118px;
  padding: 8px 4px 6px;
  background: none;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  font-family: var(--font-body);
}

.desk-icon .glyph {
  display: grid;
  place-items: center;
  width: 94px;
  height: 94px;
  font-size: 46px;
  background: color-mix(in srgb, #FBF9F5 72%, transparent);
  border: 1px solid color-mix(in oklab, var(--espresso) 24%, transparent);
  border-radius: var(--radius-icon);
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 6px rgba(46, 36, 28, .18), inset 0 1px 0 rgba(255, 255, 255, .6);
  transition: transform var(--t-fast) var(--ease-out);
}

/* illustrated icons: no tile box — the artwork IS the icon */
.desk-icon .glyph:has(img) {
  background: none;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
}

.desk-icon .glyph img {
  width: 94px;
  height: 94px;
  object-fit: contain;
  filter: drop-shadow(0 3px 5px rgba(46, 36, 28, .35));
}

.desk-icon:hover .glyph {
  transform: scale(1.08);
}

.desk-icon:active .glyph {
  transform: scale(.97);
}

.desk-icon .label {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 2px rgba(46, 36, 28, .85), 0 0 6px rgba(46, 36, 28, .45);
  padding: 2px 7px;
  border-radius: 6px;
  line-height: 1.25;
}

/* ---------- WINDOWS ---------- */

.window {
  position: absolute;
  display: flex;
  flex-direction: column;
  min-width: 320px;
  min-height: 200px;
  background: var(--win-surface);
  border-radius: var(--radius-window);
  border: 1px solid color-mix(in oklab, white 20%, transparent);
  box-shadow: var(--shadow-window);
  overflow: hidden;
}

.window.focused {
  box-shadow: var(--shadow-window-focus);
}

.window.dragging {
  opacity: .92;
}

.window.zoomed {
  left: 2vw !important;
  top: calc(var(--menubar-h) + 10px) !important;
  width: 96vw !important;
  height: calc(96vh - var(--menubar-h)) !important;
}

.window.minimizing {
  transition: transform 200ms ease-in, opacity 200ms ease-in;
  transform: scale(.85) translateY(30px);
  opacity: 0;
}

/* windows are resizable from the bottom-right corner (native handle) */
.window {
  resize: both;
  max-width: 98vw;
  max-height: calc(98vh - var(--menubar-h));
}

.window.zoomed {
  resize: none;
}

.window::-webkit-resizer {
  background: transparent;
}

/* ---------- WINDOW TOOLBAR (faux browser chrome) ---------- */

.win-toolbar {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: none;
  padding: 6px 10px;
  background: var(--win-surface-2);
  border-bottom: 1px solid var(--primary-100);
}

.tb-btn {
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--text-soft);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.tb-btn:hover {
  background: var(--primary-100);
}

.tb-addr {
  flex: 1;
  padding: 5px 12px;
  background: var(--win-surface);
  border: 1px solid var(--primary-100);
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- TOAST ---------- */

.toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translate(-50%, 16px);
  opacity: 0;
  padding: 10px 18px;
  background: var(--os-chrome);
  color: var(--os-text);
  border: 1px solid var(--os-chrome-edge);
  border-radius: 10px;
  backdrop-filter: blur(16px);
  font-size: var(--fs-sm);
  box-shadow: var(--shadow-menu);
  transition: transform 250ms var(--ease-out), opacity 250ms;
  z-index: 9500;
  pointer-events: none;
}

.toast.show {
  transform: translate(-50%, 0);
  opacity: 1;
}

/* ---------- MENU EXTRAS: wallpaper swatches, labels ---------- */

.menu-label {
  padding: 6px 10px 4px;
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: color-mix(in oklab, var(--os-text) 55%, transparent);
}

.swatch-row {
  display: flex;
  gap: 8px;
  padding: 2px 10px 8px;
}

.swatch {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  cursor: pointer;
  border: 2px solid var(--os-chrome-edge);
  padding: 0;
}

.swatch:hover {
  transform: scale(1.1);
}

.swatch.active {
  border-color: var(--accent);
}

.menu-chicken {
  font-weight: 600;
}

/* ---------- CHICKEN MODE ---------- */

.chicken {
  position: fixed;
  bottom: 4px;
  left: 0;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  z-index: 9400;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .35));
}

.chicken img {
  width: 74px;
  height: auto;
  object-fit: contain;
  display: block;
}

.chicken.walking {
  animation: waddle .38s ease-in-out infinite alternate;
}

/* the hedgehog. no comment. */
.hedgehog {
  position: fixed;
  bottom: 2px;
  z-index: 9390;
  pointer-events: none;
  animation: scurry .22s ease-in-out infinite alternate;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .3));
}

.hedgehog img {
  width: 52px;
  height: auto;
  display: block;
}

.hedgehog.flip img {
  transform: scaleX(-1);
}

@keyframes scurry {
  from {
    translate: 0 0;
  }

  to {
    translate: 0 -2px;
  }
}

@keyframes waddle {
  from {
    rotate: -4deg;
    translate: 0 0;
  }

  to {
    rotate: 4deg;
    translate: 0 -3px;
  }
}

.cluck {
  position: absolute;
  top: -30px;
  left: 50%;
  translate: -50% 0;
  padding: 4px 10px;
  white-space: nowrap;
  background: #fff;
  color: var(--ink);
  border-radius: 10px;
  border: 1px solid var(--primary-200);
  font-size: var(--fs-xs);
  font-weight: 700;
  font-family: var(--font-body);
  box-shadow: 0 3px 10px rgba(0, 0, 0, .25);
  animation: cluck-pop 1.4s var(--ease-out) forwards;
}

@keyframes cluck-pop {
  0% {
    opacity: 0;
    translate: -50% 6px;
  }

  12%,
  80% {
    opacity: 1;
    translate: -50% 0;
  }

  100% {
    opacity: 0;
    translate: -50% -8px;
  }
}

.win-bar {
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 12px;
  background: linear-gradient(var(--win-bar-hi), var(--win-bar-lo));
  border-bottom: 1px solid color-mix(in oklab, var(--espresso) 28%, transparent);
  color: var(--win-bar-text);
  cursor: grab;
  user-select: none;
  flex: none;
}

.win-bar:active {
  cursor: grabbing;
}

.win-title {
  flex: 1;
  margin: 0;
  text-align: center;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: .01em;
}

.lights {
  display: flex;
  gap: 7px;
  width: 62px;
}

.win-bar-spacer {
  width: 62px;
}

/* glossy Snow Leopard lights */
.light {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  border: 1px solid rgba(0, 0, 0, .18);
  box-shadow: inset 0 1.5px 1px rgba(255, 255, 255, .6), inset 0 -1.5px 2px rgba(0, 0, 0, .22);
}

.light.close {
  background: var(--light-close);
}

.light.min {
  background: var(--light-min);
}

.light.max {
  background: var(--light-max);
}

.light:hover {
  filter: brightness(1.12);
}

.win-body {
  flex: 1;
  overflow: auto;
}

.win-loading,
.win-error {
  padding: 40px;
  color: var(--text-faint);
  text-align: center;
}

.win-error code {
  color: var(--danger);
}

/* ---------- 'doc' WINDOWS: sidebar nav + content pane ---------- */

.kind-doc .win-body {
  display: flex;
  overflow: hidden;
}

.doc-nav {
  flex: none;
  width: 190px;
  overflow-y: auto;
  padding: 18px 10px;
  background: var(--win-surface-2);
  border-right: 1px solid var(--primary-100);
}

.doc-nav .doc-nav-label {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-faint);
  padding: 0 10px 8px;
}

.doc-nav a {
  display: block;
  padding: 7px 10px;
  border-radius: 7px;
  color: var(--text-soft);
  text-decoration: none;
  font-size: var(--fs-sm);
}

.doc-nav a:hover {
  background: var(--primary-100);
}

.doc-nav a.active {
  background: var(--primary-600);
  color: #fff;
  font-weight: 600;
}

.doc-content {
  flex: 1;
  overflow-y: auto;
  padding: 30px 38px 60px;
  scroll-behavior: smooth;
}

/* ---------- DOCUMENT TYPOGRAPHY ---------- */

.doc-content,
.plain-content {
  line-height: 1.65;
}

.plain-content {
  padding: 30px 36px 48px;
  overflow-y: auto;
}

.win-body h1 {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 0 0 14px;
}

.win-body h2 {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  letter-spacing: -.015em;
  color: var(--primary-800);
  margin: 34px 0 10px;
}

.win-body h3 {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  color: var(--primary-700);
  margin: 26px 0 8px;
}

.win-body p {
  margin: 0 0 14px;
}

.win-body strong {
  color: var(--primary-800);
}

.win-body a {
  color: var(--link);
}

.win-body .meta {
  font-size: var(--fs-sm);
  color: var(--text-faint);
  margin-bottom: 22px;
}

.win-body .stat-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 20px 0;
}

.win-body .stat {
  flex: 1;
  min-width: 130px;
  padding: 14px 16px;
  background: var(--primary-050);
  border: 1px solid var(--primary-100);
  border-radius: var(--radius-card);
}

.win-body .stat b {
  display: block;
  font-size: 24px;
  font-family: var(--font-display);
  color: var(--primary-600);
  letter-spacing: -.02em;
}

.win-body .stat span {
  font-size: var(--fs-xs);
  color: var(--text-soft);
}

.win-body .stat.mint b {
  color: var(--accent-strong);
}

.win-body .callout {
  padding: 14px 18px;
  margin: 18px 0;
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
}

.win-body .honest {
  padding: 14px 18px;
  margin: 18px 0;
  background: var(--primary-050);
  border-left: 3px solid var(--primary-400);
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
  font-size: var(--fs-sm);
  color: var(--text-soft);
}

.win-body .placeholder-interactive {
  display: grid;
  place-items: center;
  min-height: 180px;
  margin: 20px 0;
  border: 2px dashed var(--primary-200);
  border-radius: var(--radius-card);
  color: var(--text-faint);
  font-size: var(--fs-sm);
  text-align: center;
  padding: 20px;
}

/* ---------- INTERACTIVE: publishing-graph (Design Ops) ---------- */

.dsg {
  margin: 20px 0;
  border: 1px solid var(--primary-100);
  border-radius: var(--radius-card);
  background: var(--win-surface);
  overflow: hidden;
}

.dsg-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 14px;
  background: var(--win-surface-2);
  border-bottom: 1px solid var(--primary-100);
}

.dsg-toggle {
  display: inline-flex;
  border: 1px solid var(--primary-200);
  border-radius: 9px;
  overflow: hidden;
}

.dsg-toggle button {
  border: 0;
  background: none;
  padding: 7px 12px;
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-soft);
  cursor: pointer;
}

.dsg-toggle button.on {
  background: var(--primary-600);
  color: #fff;
}

.dsg-counters {
  display: flex;
  gap: 14px;
}

.dsg-count {
  font-size: var(--fs-xs);
  color: var(--text-soft);
}

.dsg-count b {
  font-size: var(--fs-lg);
  font-family: var(--font-display);
  color: var(--primary-600);
  margin-right: 4px;
}

.dsg-stage {
  padding: 6px;
}

.dsg-svg {
  width: 100%;
  height: auto;
  display: block;
}

.dsg-edge {
  fill: none;
  stroke: color-mix(in oklab, var(--espresso) 16%, transparent);
  stroke-width: 1.2;
  transition: stroke 200ms, stroke-width 200ms;
}

.dsg-edge.lit {
  stroke: var(--warning);
  stroke-width: 2;
}

.dsg-pulse {
  fill: var(--warning);
}

.dsg-node rect {
  fill: var(--win-surface);
  stroke: var(--primary-200);
  stroke-width: 1.2;
  transition: fill 250ms, stroke 250ms;
}

.dsg-node.lib {
  cursor: pointer;
}

.dsg-node.lib:hover rect {
  stroke: var(--primary-600);
}

.dsg-node.wf rect {
  fill: var(--win-surface-2);
  stroke: color-mix(in oklab, var(--espresso) 24%, transparent);
  stroke-dasharray: 4 3;
}

.dsg-node text {
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 600;
  fill: var(--text-soft);
  text-anchor: middle;
  pointer-events: none;
}

.dsg-node.lit rect {
  fill: color-mix(in oklab, var(--warning) 22%, white);
  stroke: var(--warning);
}

.dsg-node.hot rect {
  fill: color-mix(in oklab, var(--warning) 45%, white);
}

.dsg-node.lit text {
  fill: var(--ink);
}

.dsg-hint {
  margin: 0;
  padding: 10px 14px 0;
  font-size: var(--fs-sm);
  color: var(--text-soft);
}

.dsg-caption {
  margin: 0;
  padding: 2px 14px 12px;
  font-size: var(--fs-xs);
  color: var(--text-faint);
  font-style: italic;
}

/* ---------- INTERACTIVE: pixel-economy (Design Ops, Change 3) ---------- */

.pxe {
  margin: 20px 0;
  border: 1px solid var(--primary-100);
  border-radius: var(--radius-card);
  background: var(--win-surface);
  overflow: hidden;
}

.pxe-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 14px;
  background: var(--win-surface-2);
  border-bottom: 1px solid var(--primary-100);
}

.pxe-toggle {
  display: inline-flex;
  border: 1px solid var(--primary-200);
  border-radius: 9px;
  overflow: hidden;
}

.pxe-toggle button {
  border: 0;
  background: none;
  padding: 7px 12px;
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-soft);
  cursor: pointer;
}

.pxe-toggle button.on {
  background: var(--primary-600);
  color: #fff;
}

.pxe-count {
  font-size: var(--fs-xs);
  color: var(--text-soft);
}

.pxe-count b {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  color: var(--primary-600);
}

.pxe-stage {
  position: relative;
  min-height: 340px;
  padding: 10px;
}

.pxe-hint {
  margin: 0;
  padding: 10px 14px 0;
  font-size: var(--fs-sm);
  color: var(--text-soft);
}

.pxe-caption {
  margin: 0;
  padding: 2px 14px 12px;
  font-size: var(--fs-xs);
  color: var(--text-faint);
  font-style: italic;
}

/* --- shared wireframe pieces --- */

.pxe-frame {
  background: #fff;
  border: 1.4px solid var(--primary-300);
  border-radius: 7px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 120px;
}

.pxe-chrome {
  border-radius: 3px;
  background: color-mix(in oklab, var(--espresso) 14%, white);
  transition: background 200ms, outline 200ms;
}

.pxe-bar { height: 10px; }
.pxe-stepper { height: 6px; width: 62%; }
.pxe-foot { height: 9px; margin-top: auto; }

.pxe-form {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 0;
}

.pxe-field {
  height: 7px;
  border-radius: 3px;
  background: color-mix(in oklab, var(--primary) 30%, white);
}

/* --- old way: sprawl + arrows --- */

.pxe-old .pxe-spot {
  position: absolute;
  width: 21%;
}

.pxe-old .pxe-frame.mini {
  width: 100%;
  min-height: 96px;
  cursor: help;
}

.pxe-arrows {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.pxe-arrows path {
  fill: none;
  stroke: color-mix(in oklab, var(--danger) 55%, transparent);
  stroke-width: .45;
  stroke-dasharray: 1.6 1.1;
  vector-effect: non-scaling-stroke;
  stroke-width: 1.4px;
}

.pxe-old.show-dup .pxe-chrome {
  background: color-mix(in oklab, var(--danger) 38%, white);
  outline: 1px solid color-mix(in oklab, var(--danger) 55%, transparent);
}

/* --- the matrix --- */

.pxe-matrix {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}

.pxe-ref {
  flex: none;
  width: 180px;
}

.pxe-ref .pxe-frame.ref {
  width: 100%;
  min-height: 250px;
}

.pxe-ref-label,
.pxe-row-label,
.pxe-cell-label {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--text-soft);
}

.pxe-ref-label { margin-bottom: 6px; }

.pxe-grid {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pxe-grid-row {
  display: grid;
  grid-template-columns: 76px repeat(3, 1fr);
  gap: 10px;
  align-items: stretch;
}

.pxe-row-label { align-self: center; }

.pxe-cell {
  border: 1.4px dashed var(--primary-200);
  border-radius: 7px;
  background: var(--primary-050);
  padding: 8px;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-body);
  transition: transform var(--t-fast) var(--ease-out), border-color 200ms, box-shadow 200ms;
}

.pxe-cell:hover {
  border-color: var(--primary-400);
}

.pxe-cell.pop {
  transform: scale(1.06);
  border: 1.4px solid var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 6px 18px rgba(46, 36, 28, .18);
}

.pxe-cell .pxe-field {
  background: color-mix(in oklab, var(--accent) 45%, white);
}

/* clicking a cell: chrome dims, form region flashes on the reference */
.pxe-frame.ref.focus-form .pxe-chrome {
  background: color-mix(in oklab, var(--espresso) 6%, white);
}

.pxe-frame.ref.focus-form .pxe-form {
  animation: pxe-flash 900ms var(--ease-out);
  border-radius: 5px;
}

@keyframes pxe-flash {
  0% { outline: 2px solid var(--accent); outline-offset: 3px; background: var(--accent-soft); }
  100% { outline: 2px solid transparent; outline-offset: 3px; background: transparent; }
}

/* ---------- INTERACTIVE: content-sheet (Design Ops, Change 4) ---------- */

.csh {
  margin: 20px 0;
  border: 1px solid var(--primary-100);
  border-radius: var(--radius-card);
  background: var(--win-surface);
  overflow: hidden;
}

.csh-titlebar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 14px;
  background: var(--win-surface-2);
  border-bottom: 1px solid var(--primary-100);
}

.csh-doctitle {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--primary-800);
}

.csh-hint-inline {
  font-size: var(--fs-xs);
  color: var(--text-faint);
  font-style: italic;
}

.csh-table {
  font-size: var(--fs-sm);
}

.csh-row {
  display: grid;
  grid-template-columns: 92px 130px 1fr 52px 52px 74px;
  gap: 0;
  border-bottom: 1px solid var(--primary-050);
  transition: background 200ms;
}

.csh-row > span {
  padding: 9px 10px;
  border-right: 1px solid var(--primary-050);
}

.csh-row > span:last-child { border-right: 0; }

.csh-headrow {
  background: var(--primary-050);
  font-weight: 700;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-soft);
}

.csh-sec { font-weight: 600; color: var(--text-soft); }
.csh-sub { color: var(--text-soft); }

.csh-copy {
  outline: none;
  cursor: text;
}

.csh-copy:focus {
  background: var(--primary-050);
  box-shadow: inset 0 0 0 1.5px var(--primary-400);
  border-radius: 4px;
}

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

.csh-count { font-weight: 700; color: var(--accent-strong); }

.csh-status {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--accent-strong);
  align-self: center;
}

.csh-row.over { background: color-mix(in oklab, var(--danger) 7%, white); }
.csh-row.over .csh-count,
.csh-row.over .csh-status { color: var(--danger); }
.csh-row.over .csh-copy:focus {
  box-shadow: inset 0 0 0 1.5px var(--danger);
}

.csh-caption {
  margin: 0;
  padding: 10px 14px 12px;
  font-size: var(--fs-xs);
  color: var(--text-faint);
  font-style: italic;
}

/* ---------- INTERACTIVE: funnel-explorer (The What-If) ---------- */

.fnx {
  margin: 20px 0;
  border: 1px solid var(--primary-100);
  border-radius: var(--radius-card);
  background: var(--win-surface);
  overflow: hidden;
}

.fnx-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 14px;
  background: var(--win-surface-2);
  border-bottom: 1px solid var(--primary-100);
}

.fnx-title {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--primary-800);
}

/* counters live in the canvas, next to what they count (proximity) */
.fnx-scores {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  gap: 16px;
}

.fnx-score {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-soft);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  background: var(--win-surface);
  border: 1px solid var(--primary-100);
  border-radius: 11px;
  box-shadow: 0 2px 6px rgba(46, 36, 28, .08);
}

.fnx-score b {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  line-height: 1;
}

.fnx-score.fam b { color: var(--danger); }
.fnx-score.ind b { color: var(--accent-strong); }

.fnx-run {
  border: 1px solid var(--primary-200);
  background: var(--win-surface);
  border-radius: 8px;
  padding: 6px 12px;
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-soft);
  cursor: pointer;
}

.fnx-run:hover { border-color: var(--primary-400); color: var(--primary-600); }

.fnx-stage {
  position: relative;
  height: 380px;
  margin: 12px 12px 0;
}

.fnx-stepline {
  position: absolute;
  top: 70px;
  bottom: 92px;
  width: 1px;
  background: var(--primary-100);
}

.fnx-stepline span {
  position: absolute;
  bottom: -22px;
  left: 50%;
  translate: -50% 0;
  font-size: var(--fs-xs);
  color: var(--text-faint);
  white-space: nowrap;
}

.fnx-lane {
  position: absolute;
  left: 2%;
  right: 2%;
  height: 52px;
  border-radius: 10px;
  background: var(--primary-050);
  border: 1px dashed var(--primary-100);
}

.fnx-lane.fam { top: 100px; }
.fnx-lane.ind { top: 216px; }

.fnx-lane-label {
  position: absolute;
  top: -26px;
  left: 4px;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text-soft);
}

.fnx-wall {
  position: absolute;
  top: 94px;
  height: 64px;
  width: 5px;
  border-radius: 3px;
  background: var(--danger);
  opacity: .25;
  transition: opacity 250ms;
}

.fnx-wall-tip {
  position: absolute;
  top: -24px;
  right: -8px;
  white-space: nowrap;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--danger);
  opacity: 0;
  transition: opacity 250ms;
}

.walled .fnx-wall { opacity: 1; animation: fnx-shake .4s; }
.walled .fnx-wall-tip { opacity: 1; }

@keyframes fnx-shake {
  0%, 100% { translate: 0 0; }
  25% { translate: -2px 0; }
  75% { translate: 2px 0; }
}

.fnx-dot {
  position: absolute;
  font-size: 24px;
  line-height: 1;
  top: 114px;
  margin-top: var(--jitter, 0px);
  transition: left 2000ms cubic-bezier(.4,.1,.6,.9), top 600ms var(--ease-out),
              filter 300ms, opacity 300ms;
  filter: drop-shadow(0 2px 3px rgba(46, 36, 28, .25));
  z-index: 3;
  user-select: none;
}

.fnx-dot.blocked {
  filter: drop-shadow(0 0 6px var(--danger));
  animation: fnx-bounce .5s;
}

@keyframes fnx-bounce {
  0% { translate: 0 0; }
  40% { translate: -12px -8px; }
  100% { translate: 0 0; }
}

.fnx-dot.as-ind {
  top: 230px;
  margin-top: 0;
  transition: left 1700ms cubic-bezier(.4,.1,.6,.9), top 600ms var(--ease-out),
              filter 300ms;
}

.fnx-dot.converted {
  filter: drop-shadow(0 0 7px var(--accent));
}

.fnx-verdict {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  text-align: center;
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--primary-800);
  opacity: 0;
  translate: 0 6px;
  transition: opacity 400ms, translate 400ms var(--ease-out);
}

.done .fnx-verdict { opacity: 1; translate: 0 0; }

.fnx-caption {
  margin: 0;
  padding: 12px 14px 12px;
  font-size: var(--fs-xs);
  color: var(--text-faint);
  font-style: italic;
}

/* ---------- INTERACTIVE: kahoona-trend ---------- */

.ktr {
  position: relative;
  margin: 20px 0;
  border: 1px solid var(--primary-100);
  border-radius: var(--radius-card);
  background: var(--win-surface);
  overflow: hidden;
}

.ktr-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 14px;
  background: var(--win-surface-2);
  border-bottom: 1px solid var(--primary-100);
}

.ktr-title {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--primary-800);
}

.ktr-legend { display: flex; gap: 12px; }

.ktr-key {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-soft);
}

.ktr-key .swab { width: 14px; height: 10px; border-radius: 3px; }
.ktr-key.kahoona .swab { background: var(--primary-600); }
.ktr-key.agency .swab { background: var(--warning); }
.ktr-key.broker .swab { background: var(--olive); }

.ktr-stage { position: relative; padding: 8px 6px 0; }

.ktr-svg { width: 100%; height: auto; display: block; }

.ktr-xlabel {
  font-family: var(--font-body);
  font-size: 10.5px;
  fill: var(--text-faint);
  text-anchor: middle;
}

.ktr-bar {
  transform: scaleY(0);
  transition: transform 700ms var(--ease-out);
  cursor: help;
}

.ktr-bar.grown { transform: scaleY(1); }

.ktr-seg.kahoona { fill: var(--primary-600); }
.ktr-seg.agency { fill: var(--warning); }
.ktr-seg.broker { fill: var(--olive); }

.ktr-bar:hover .ktr-seg.kahoona { fill: var(--primary-500); }

.ktr-pct {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  fill: var(--primary-600);
  text-anchor: middle;
}

.ktr-rollout { cursor: help; }

.ktr-rollline {
  stroke: color-mix(in oklab, var(--accent) 55%, transparent);
  stroke-width: 1.4;
  stroke-dasharray: 4 4;
}

.ktr-rolldot {
  fill: var(--accent-soft);
  stroke: var(--accent-strong);
  stroke-width: 2;
}

.ktr-rollout:hover .ktr-rolldot { fill: var(--accent); }

.ktr-tip {
  position: absolute;
  top: 60px;
  padding: 6px 12px;
  background: var(--os-chrome);
  backdrop-filter: blur(12px);
  border: 1px solid var(--os-chrome-edge);
  border-radius: 8px;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--os-text);
  box-shadow: var(--shadow-menu);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms;
  z-index: 5;
}

.ktr-tip.show { opacity: 1; }

.ktr-caption {
  margin: 0;
  padding: 10px 14px 12px;
  font-size: var(--fs-xs);
  color: var(--text-faint);
  font-style: italic;
}

/* ---------- video figure (case study windows) ---------- */

.doc-video {
  margin: 20px 0;
}

.doc-video video {
  width: 100%;
  border-radius: var(--radius-card);
  border: 1px solid var(--primary-100);
  box-shadow: 0 6px 20px rgba(46, 36, 28, .15);
  display: block;
}

.doc-video figcaption {
  margin-top: 8px;
  font-size: var(--fs-xs);
  color: var(--text-faint);
  font-style: italic;
}

/* ---------- INTERACTIVE: dashboard-mess (Kahoona) ---------- */

.dbm {
  margin: 20px 0;
  border: 1px solid var(--primary-100);
  border-radius: var(--radius-card);
  background: var(--win-surface);
  overflow: hidden;
}

.dbm-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 14px;
  background: var(--win-surface-2);
  border-bottom: 1px solid var(--primary-100);
}

.dbm-toggle {
  display: inline-flex;
  border: 1px solid var(--primary-200);
  border-radius: 9px;
  overflow: hidden;
}

.dbm-toggle button {
  border: 0;
  background: none;
  padding: 7px 12px;
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-soft);
  cursor: pointer;
}

.dbm-toggle button.on { background: var(--primary-600); color: #fff; }

.dbm-note {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--text-soft);
}

.dbm-stage {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 22px;
  padding: 22px 14px 26px;
  min-height: 330px;
}

.dbm-caption {
  margin: 0;
  padding: 0 14px 12px;
  font-size: var(--fs-xs);
  color: var(--text-faint);
  font-style: italic;
}

.dbm-device { text-align: center; }

.dbm-device-label {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--text-soft);
  margin-bottom: 8px;
}

.dbm-frame {
  position: relative;
  background: #fff;
  border: 1.6px solid var(--primary-300);
  border-radius: 10px;
  padding: 8px;
  display: flex;
  gap: 8px;
  text-align: left;
}

.dbm-frame.phone { width: 116px; height: 230px; flex-direction: column; }
.dbm-frame.desktop { width: 280px; height: 200px; }

/* the PH desktop: the mobile UI copy-pasted onto a wide screen.
   Stretched header, stretched bottom bar, narrow body centered between. */
.dbm-frame.desktop.mobileclone {
  flex-direction: column;
  gap: 6px;
}

.dbm-frame.desktop.mobileclone .dbm-chrome {
  position: static;      /* stretched full-width, like on the phone */
  flex: none;
}

.dbm-body {
  position: relative;
  flex: 1;
  display: flex;
  justify-content: center;
  overflow: hidden;
}

/* single source of truth for the PH column width — matches Nick's mock */
.dbm-frame.desktop.mobileclone .dbm-body .dbm-col.narrow {
  margin: 0;
  width: 42%;
  padding: 4px 0;
}

.dbm-chrome {
  height: 10px;
  border-radius: 3px;
  background: color-mix(in oklab, var(--espresso) 14%, white);
  flex: none;
}

.dbm-frame.desktop .dbm-chrome { position: absolute; left: 8px; right: 8px; top: 8px; }

.dbm-col {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
  overflow: hidden;
}

.dbm-frame.desktop .dbm-col { margin-top: 24px; }

/* content overflows the viewport — the endless-scroll sin, made visible */
.dbm-col.scrolly {
  -webkit-mask-image: linear-gradient(to bottom, black 62%, transparent 96%);
  mask-image: linear-gradient(to bottom, black 62%, transparent 96%);
}

/* huge illustration/number blocks that did little */
.dbm-fluff {
  flex: none;
  display: grid;
  place-items: center;
  height: 44px;
  font-size: 20px;
  border-radius: 4px;
  background: color-mix(in oklab, var(--warning) 14%, white);
  border: 1.4px dashed color-mix(in oklab, var(--warning) 60%, transparent);
}

.dbm-fluff.small { height: 30px; font-size: 13px; }

/* a button that looks like text */
.dbm-fakebtn {
  flex: none;
  font-size: 8.5px;
  font-style: italic;
  color: var(--text-faint);
  padding: 2px 0;
  cursor: pointer;
}

.dbm-fakebtn:hover { text-decoration: underline; }

/* the wide wasteland — fills the body area behind the centered column */
.dbm-void {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 4px;
  background: repeating-linear-gradient(
    -45deg,
    transparent 0 7px,
    color-mix(in oklab, var(--espresso) 5%, transparent) 7px 8px
  );
}

/* the mobile tab bar — stretched across the full desktop width,
   bottom of the frame, allegedly sticky */
.dbm-tabbar.stretch {
  position: static;
  flex: none;
  width: auto;
  height: auto;
  padding: 3px 0;
  font-size: 8.5px;
  font-weight: 700;
  color: var(--danger);
  text-align: center;
}

.dbm-row {
  height: 14px;
  border-radius: 3px;
  background: color-mix(in oklab, var(--primary) 22%, white);
  flex: none;
}

.dbm-row.nav { background: color-mix(in oklab, var(--primary) 40%, white); height: 11px; }

.dbm-tabbar {
  height: 14px;
  border-radius: 4px;
  background: color-mix(in oklab, var(--danger) 45%, white);
  outline: 1.5px solid var(--danger);
  flex: none;
}

.dbm-vs {
  align-self: center;
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 800;
  color: var(--danger);
}

.dbm-vs.same { color: var(--accent-strong); }

.dbm-sins {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
  align-items: center;
}

.dbm-sin-tag {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--danger);
  background: color-mix(in oklab, var(--danger) 8%, white);
  border: 1px solid color-mix(in oklab, var(--danger) 35%, transparent);
  padding: 2px 8px;
  border-radius: 6px;
}

/* --- after: unified --- */

.dbm-frame.unified { border-color: var(--accent-strong); }

.dbm-side {
  width: 52px;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px;
  background: var(--primary-050);
  border-radius: 6px;
}

.dbm-bento {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-rows: 1fr;
  gap: 7px;
}

.dbm-bento .dbm-mod:nth-child(1) { grid-column: span 2; }
.dbm-bento .dbm-mod:nth-child(5) { grid-column: span 2; }

.dbm-stack {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.dbm-stack .dbm-mod { flex: 1; }

.dbm-mod {
  border-radius: 5px;
  background: color-mix(in oklab, var(--accent) 22%, white);
  border: 1px solid color-mix(in oklab, var(--accent) 40%, transparent);
  transition: background 150ms, box-shadow 150ms;
  cursor: pointer;
}

.dbm-mod.twin {
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.dbm-hint-float {
  position: absolute;
  bottom: 4px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--text-faint);
}

/* ---------- EMBEDS: DAM + GotJam? ---------- */

.emb {
  margin: 20px 0;
  border: 1px solid var(--primary-100);
  border-radius: var(--radius-card);
  background: var(--win-surface);
  overflow: hidden;
}

.emb-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  background: var(--win-surface-2);
  border-bottom: 1px solid var(--primary-100);
}

.emb-title {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--primary-800);
}

.emb-open {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--link);
  text-decoration: none;
}

.emb-open:hover { text-decoration: underline; }

.emb-frame {
  display: block;
  width: 100%;
  height: 480px;
  border: 0;
  background: #fff;
}

.emb-frame.tall { height: 620px; }

/* ---------- PHOTOS: single figures + strips ---------- */

.doc-photo {
  margin: 18px 0 22px;
}

.doc-photo img {
  width: 100%;
  border-radius: var(--radius-card);
  display: block;
  box-shadow: 0 5px 16px rgba(46, 36, 28, .15);
}

.doc-photo figcaption,
.photo-fig figcaption {
  margin-top: 7px;
  font-size: var(--fs-xs);
  color: var(--text-faint);
  font-style: italic;
}

.photo-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 16px 0;
}

/* mixed-orientation gallery: landscape spans the row, portraits pair up */
.photo-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 18px 0;
}

.photo-gallery .photo-fig.wide { grid-column: span 2; }

.photo-gallery .photo-fig.wide img {
  aspect-ratio: 3 / 2;
}

.photo-fig {
  margin: 0;
}

.photo-fig img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-card);
  display: block;
  box-shadow: 0 4px 12px rgba(46, 36, 28, .15);
}

/* file not dropped in yet → labeled placeholder so Nick knows what goes where.
   The figcaption below each placeholder shows the exact filename it expects. */
.photo-fig.missing img,
.doc-photo.missing img { display: none; }

.photo-fig.missing::before,
.doc-photo.missing::before {
  content: '📷 drop photo here';
  display: grid;
  place-items: center;
  border: 2px dashed var(--primary-200);
  border-radius: var(--radius-card);
  color: var(--text-faint);
  font-size: var(--fs-xs);
}

.photo-fig.missing::before { aspect-ratio: 4 / 5; }
.doc-photo.missing::before { aspect-ratio: 16 / 7; }

/* ---------- NICK.AI CHAT ---------- */

.nickai-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0;
  overflow: hidden;   /* the chat log scrolls, not the window */
}

.nai {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  margin: 0;
  border: 0;
}

.nai-intro {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 12px 16px;
  background: var(--win-surface-2);
  border-bottom: 1px solid var(--primary-100);
  font-size: var(--fs-xs);
  color: var(--text-soft);
}

.nai-avatar { width: 34px; height: 34px; object-fit: contain; flex: none; }

.nai-log {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}

.nai-msg {
  max-width: 82%;
  padding: 9px 13px;
  border-radius: 14px;
  font-size: var(--fs-sm);
  line-height: 1.55;
  white-space: pre-wrap;
}

.nai-msg.user {
  align-self: flex-end;
  background: var(--primary-600);
  color: #fff;
  border-bottom-right-radius: 4px;
}

.nai-msg.assistant {
  align-self: flex-start;
  background: var(--primary-050);
  border: 1px solid var(--primary-100);
  border-bottom-left-radius: 4px;
}

.nai-msg.typing::after { content: '▍'; animation: nai-blink 1s steps(1) infinite; }

@keyframes nai-blink { 50% { opacity: 0; } }

.nai-starters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 16px 10px;
}

.nai-starter {
  border: 1px solid var(--primary-200);
  background: var(--win-surface);
  border-radius: 999px;
  padding: 5px 12px;
  font: inherit;
  font-size: var(--fs-xs);
  color: var(--primary-600);
  cursor: pointer;
}

.nai-starter:hover { background: var(--primary-050); }

.nai-form {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--primary-100);
  background: var(--win-surface-2);
}

.nai-input {
  flex: 1;
  border: 1px solid var(--primary-200);
  border-radius: 9px;
  padding: 9px 12px;
  font: inherit;
  font-size: var(--fs-sm);
  background: var(--win-surface);
}

.nai-input:focus { outline: 2px solid var(--primary-400); outline-offset: -1px; }

.nai-send {
  border: 0;
  border-radius: 9px;
  padding: 9px 16px;
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 700;
  background: var(--primary-600);
  color: #fff;
  cursor: pointer;
}

.nai-send:hover { background: var(--primary-700); }

/* ---------- TRASH: take-home cards + archive list ---------- */

.takehome { margin: 22px 0 30px; }

.takehome h4 {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  color: var(--primary-800);
  margin: 0 0 8px;
}

.th-challenge {
  background: var(--primary-050);
  border-left: 3px solid var(--primary-300);
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
  padding: 12px 16px;
  font-size: var(--fs-sm);
}

.th-approach { color: var(--text-soft); }

.trash-archive {
  margin: 10px 0;
  padding-left: 22px;
  line-height: 2;
}

/* ==========================================================================
   MOBILE SPRINGBOARD — below 760px the desktop becomes a phone home screen:
   icons in a grid, windows open as full-screen apps, doc-nav becomes a
   horizontal pill row. Same content, same router, different chrome.
   ========================================================================== */
@media (max-width: 760px) {

  /* menu bar: logo + name + CTA only */
  .menu-link, .menu-clock { display: none; }
  .menubar { gap: 10px; }
  .menu-cta { margin-left: auto; }

  /* springboard grid */
  #desktop {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    justify-items: center;
    align-content: start;
    gap: 6px 0;
    padding: calc(var(--menubar-h) + 18px) 10px 110px;
    overflow-y: auto;
  }

  .icon-col.left, .icon-col.right, .trash-slot {
    position: static;
    display: contents;
  }

  .desk-icon {
    width: 84px;
    padding: 6px 2px;
    /* stay above the artwork (::after, z-index 1) — display:contents on the
       columns discards their z-index, so the icons carry their own */
    position: relative;
    z-index: 3;
  }
  .desk-icon .glyph, .desk-icon .glyph img { width: 62px; height: 62px; }
  .desk-icon .label { font-size: var(--fs-xs); }

  /* artwork peeks from the bottom, behind the grid */
  #desktop::after {
    width: 90vw;
    height: 90vw;
    right: 0;
    opacity: .85;
  }

  /* windows become full-screen apps */
  .window {
    left: 0 !important;
    top: var(--menubar-h) !important;
    width: 100vw !important;
    height: calc(100vh - var(--menubar-h)) !important;
    border-radius: 0;
    resize: none;
    border-left: 0;
    border-right: 0;
  }

  .window.zoomed { resize: none; }

  /* doc sidebar → horizontal pill row */
  .kind-doc .win-body { flex-direction: column; }

  .doc-nav {
    display: flex;
    width: auto;
    overflow-x: auto;
    gap: 6px;
    padding: 10px 12px;
    border-right: 0;
    border-bottom: 1px solid var(--primary-100);
    -webkit-overflow-scrolling: touch;
  }

  .doc-nav a { white-space: nowrap; flex: none; }
  .doc-nav .doc-nav-label { display: none; }

  .doc-content { padding: 20px 18px 50px; }
  .plain-content { padding: 20px 18px 40px; }

  /* interactives: let wide stages scroll rather than squash */
  .fnx-stage, .pxe-stage, .dbm-stage { overflow-x: auto; }

  .win-body h1 { font-size: 26px; }
}