/*
 * Cyber Fidget - product-space component kit (device rail, storage bar,
 * phone pill, device switcher). Tokens follow the settled Phase-B design
 * language. Loaded ONLY by the product-space pages (/explore/, /create/,
 * /my-fidget/) - marketing pages keep theme.css alone, so everything
 * here is scoped under .cf-kit or a cf- prefix.
 */
/* Self-hosted webfonts (SIL OFL 1.1 - attributions in
   /assets/fonts/OFL-LICENSES.txt). The full Phase-B family set:
   display/ui/body + mono + pixel + CRT. Self-hosted so product-space
   type never depends on a third-party CDN being reachable - the
   mockup's faces must load reliably everywhere.
   terms). */
@font-face { font-family: 'Chakra Petch'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/chakra-petch-400.woff2') format('woff2'); }
@font-face { font-family: 'Chakra Petch'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/chakra-petch-600.woff2') format('woff2'); }
@font-face { font-family: 'Chakra Petch'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/chakra-petch-700.woff2') format('woff2'); }
@font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/space-mono-400.woff2') format('woff2'); }
@font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/space-mono-700.woff2') format('woff2'); }
@font-face { font-family: 'Silkscreen'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/silkscreen-400.woff2') format('woff2'); }
@font-face { font-family: 'Silkscreen'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/silkscreen-700.woff2') format('woff2'); }
@font-face { font-family: 'Press Start 2P'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/press-start-2p-400.woff2') format('woff2'); }
@font-face { font-family: 'VT323'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/vt323-400.woff2') format('woff2'); }
@font-face { font-family: 'Share Tech Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/share-tech-mono-400.woff2') format('woff2'); }

:root {
  /* backgrounds */
  --cf-bg-deep: #08050f;
  --cf-bg-page: #0e0820;
  --cf-bg-card: #15102a;
  --cf-bg-elev: #1f1840;
  --cf-bg-line: rgba(245, 236, 255, .08);
  /* ink */
  --cf-ink: #f5ecff;
  --cf-ink-dim: #a89cc8;
  --cf-ink-mute: #6b5e88;
  --cf-ink-faint: #3a3055;
  /* neons */
  --cf-magenta: #ff2bb8;
  --cf-cyan: #68e1fd;
  --cf-purple: #b16cff;
  --cf-yellow: #ffd84a;
  --cf-green: #4dffaf;
  /* anodized wheel (category accents = the physical case-color kit) */
  --cf-anod-orange: #f08a3a;
  --cf-anod-purple: #c34cbe;
  --cf-anod-cyan: #2eb3c8;
  --cf-anod-yellow: #e6b32a;
  --cf-anod-green: #4dbf4a;
  --cf-anod-magenta: #e6248a;
  --cf-anod-silver: #c8c8d2;
  /* fonts (the full Phase-B ladder: display/ui/body, mono, pixel, CRT) */
  --cf-font-display: 'Chakra Petch', 'Inter', sans-serif;
  --cf-font-mono: 'Space Mono', ui-monospace, monospace;
  --cf-font-pixel: 'Silkscreen', 'Press Start 2P', var(--cf-font-mono);
  --cf-font-crt: 'VT323', 'Share Tech Mono', var(--cf-font-mono);
}

/* Author layout rules must never override recognition's pre-paint gate. */
.cf-space-layout[hidden] { display: none !important; }

/* ── rail shell ─────────────────────────────────────────────────── */

.cf-rail {
  width: 300px;
  background: var(--cf-bg-card);
  border: 1px solid var(--cf-bg-line);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-sizing: border-box;
}

.cf-rail-title {
  font-family: var(--cf-font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--cf-cyan);
  border: 1px solid rgba(104, 225, 253, .35);
  padding: 3px 8px;
  align-self: flex-start;
}

.cf-rail-heading {
  font-family: var(--cf-font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--cf-ink);
  line-height: 1.35;
}

.cf-rail-body {
  font-family: var(--cf-font-mono);
  font-size: 11px;
  line-height: 1.65;
  color: var(--cf-ink-dim);
  margin: 0;
}

.cf-rail-body .cf-warn { color: var(--cf-magenta); }
.cf-rail-body .cf-note { color: var(--cf-yellow); }

.cf-rail-link {
  font-family: var(--cf-font-mono);
  font-size: 10.5px;
  color: var(--cf-cyan);
  text-decoration: none;
}
.cf-rail-link:hover { text-decoration: underline; }

/* device head: status dot + name + sub-line */
.cf-rail-head { display: flex; align-items: center; gap: 10px; }
.cf-rail-head-name {
  font-family: var(--cf-font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--cf-ink);
}
.cf-rail-head-sub {
  font-family: var(--cf-font-mono);
  font-size: 10px;
  color: var(--cf-ink-dim);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.cf-badge {
  padding: 1px 5px;
  font-family: var(--cf-font-mono);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #08050f;
  background: var(--cf-yellow);
}

.cf-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: none;
}
.cf-dot[data-pulse] { animation: cf-dot-pulse 1.1s ease-in-out infinite; }
@keyframes cf-dot-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}

/* buttons - chamfered neon per the kit's shape language */
.cf-btn {
  font-family: var(--cf-font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 8px 14px;
  border: none;
  cursor: pointer;
  clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), inset 0 -3px 0 rgba(0, 0, 0, .3);
  align-self: flex-start;
  text-decoration: none;
  display: inline-block;
  color: #08050f;
}
.cf-btn-primary { background: var(--cf-magenta); }
.cf-btn-cyan { background: var(--cf-cyan); }
.cf-btn-dark { background: var(--cf-bg-elev); color: var(--cf-ink); }
.cf-btn:hover { filter: brightness(1.12); }
.cf-btn.cf-closed-beta {
  position: relative;
  opacity: .78;
  border-style: dashed;
  background: transparent;
  color: var(--cf-ink);
  border-color: rgba(255, 255, 255, .28);
}
.cf-btn.cf-closed-beta::after {
  content: '';
  display: inline-block;
  width: .95em;
  height: .95em;
  margin-left: .45rem;
  vertical-align: -.12em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1a5 5 0 0 0-5 5v4H5a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-9a2 2 0 0 0-2-2h-2V6a5 5 0 0 0-5-5zm0 2a3 3 0 0 1 3 3v4H9V6a3 3 0 0 1 3-3z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1a5 5 0 0 0-5 5v4H5a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-9a2 2 0 0 0-2-2h-2V6a5 5 0 0 0-5-5zm0 2a3 3 0 0 1 3 3v4H9V6a3 3 0 0 1 3-3z'/%3E%3C/svg%3E") center / contain no-repeat;
  pointer-events: none;
}

.cf-toast-container { position: fixed; z-index: 10000; left: 50%; bottom: 24px; transform: translateX(-50%); display: grid; gap: 8px; }
.cf-toast { display: flex; gap: 12px; align-items: center; padding: 12px 14px; background: var(--cf-bg-elev); color: var(--cf-ink); border: 1px solid var(--cf-magenta); opacity: 0; transition: opacity .3s ease; cursor: pointer; }
.cf-toast.visible { opacity: 1; }
.cf-toast-dismiss { border: 0; background: transparent; color: inherit; cursor: pointer; }

.cf-rail-identity-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding-top: 2px;
}
.cf-rail-identity-actions .cf-btn { font-size: 9px; padding: 6px 9px; }
.cf-rail-identity-note {
  flex-basis: 100%;
  margin: 0;
  color: var(--cf-ink-dim);
  font: 9px/1.5 var(--cf-font-mono);
}
.cf-forget-modal {
  position: fixed;
  inset: 0;
  z-index: 11000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(8, 5, 15, .78);
}
.cf-forget-modal[hidden] { display: none; }
.cf-forget-modal-surface {
  width: min(420px, 100%);
  box-sizing: border-box;
  padding: 22px;
  color: var(--cf-ink);
  background: var(--cf-bg-card);
  border: 1px solid var(--cf-bg-line);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
}
.cf-forget-modal-surface h2 { margin: 0 0 12px; font: 700 20px/1.25 var(--cf-font-display); }
.cf-forget-modal-surface p { margin: 7px 0; color: var(--cf-ink-dim); font: 11px/1.6 var(--cf-font-mono); }
.cf-forget-modal-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 18px; }

/* sync progress */
.cf-rail-ticks {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-family: var(--cf-font-mono);
  font-size: 10.5px;
}
.cf-tick-sent { color: var(--cf-green); }
.cf-tick-active { color: var(--cf-cyan); }
.cf-tick-pending { color: var(--cf-ink-mute); }

.cf-rail-progress {
  height: 6px;
  background: rgba(0, 0, 0, .45);
  border: 1px solid var(--cf-bg-line);
}
.cf-rail-progress > div {
  height: 100%;
  background: var(--cf-cyan);
  box-shadow: 0 0 8px var(--cf-cyan);
  transition: width .2s;
}

/* ── storage bar (shared: rail compact / My Fidget full) ────────── */

.cf-storagebar-track {
  display: flex;
  background: rgba(0, 0, 0, .45);
  border: 1px solid var(--cf-bg-line);
  overflow: hidden;
}
.cf-storagebar-track[data-over] { border-color: var(--cf-magenta); }
.cf-storagebar[data-variant="compact"] .cf-storagebar-track { height: 10px; }
.cf-storagebar[data-variant="full"] .cf-storagebar-track { height: 18px; }

.cf-storagebar-seg {
  height: 100%;
  box-sizing: border-box;
  border-right: 1px solid rgba(0, 0, 0, .6);
  opacity: .88;
  transition: transform .1s, opacity .1s;
}
.cf-storagebar-seg[data-staged="remove"] { opacity: .22; }
.cf-storagebar-seg[data-highlight] {
  opacity: 1;
  outline: 1px solid var(--cf-ink);
  outline-offset: -1px;
  transform: scaleY(1.18);
}
.cf-storagebar-overflow {
  flex: 1;
  min-width: 24px;
  background: repeating-linear-gradient(45deg, var(--cf-magenta) 0 4px, rgba(0, 0, 0, .5) 4px 8px);
}

.cf-storagebar-caption {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
  font-family: var(--cf-font-mono);
  letter-spacing: .06em;
  color: var(--cf-ink-dim);
}
.cf-storagebar[data-variant="compact"] .cf-storagebar-caption { font-size: 9.5px; }
.cf-storagebar[data-variant="full"] .cf-storagebar-caption { font-size: 10.5px; }
.cf-storagebar-caption [data-tone="calm"] { color: var(--cf-cyan); }
.cf-storagebar-caption [data-tone="warning"] { color: var(--cf-yellow); }
.cf-storagebar-caption [data-tone="alert"] { color: var(--cf-magenta); }

/* ── phone pill (D3: staged>0 or syncing, never on My Fidget) ───── */

.cf-rail-pill {
  position: fixed;
  left: 12px;
  right: 12px;
  /* sits above the bottom-right feedback button, which would otherwise
     cover the pill's trailing cta at phone width */
  bottom: 68px;
  z-index: 60;
  display: none;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  background: var(--cf-bg-elev);
  border: 1px solid var(--cf-bg-line);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  box-shadow: 0 -4px 24px rgba(0, 0, 0, .5);
  color: inherit;
  text-decoration: none;
}
.cf-rail-pill-text {
  font-family: var(--cf-font-mono);
  font-size: 11px;
  color: var(--cf-ink);
  flex: 1;
}
.cf-rail-pill-cta {
  font-family: var(--cf-font-mono);
  font-size: 10px;
  color: var(--cf-cyan);
  letter-spacing: .08em;
}
/* Phone = the same width where the site nav collapses (theme.css). */
@media (max-width: 880px) {
  .cf-rail-pill[data-show] { display: flex; }
}

/* ── device switcher + send-to picker (D6/D7) ───────────────────── */

.cf-switcher { display: flex; flex-direction: column; gap: 6px; }
.cf-switcher-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  cursor: pointer;
  background: transparent;
  border: 1px solid var(--cf-bg-line);
  text-align: left;
  width: 100%;
  box-sizing: border-box;
}
.cf-switcher-row[data-active] {
  background: var(--cf-bg-elev);
  border-color: var(--cf-cyan);
}
.cf-switcher-case {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: none;
  box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .4), 0 0 6px var(--cf-oled-glow, transparent);
}
.cf-switcher-name {
  font-family: var(--cf-font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--cf-ink-dim);
  display: flex;
  align-items: center;
  gap: 6px;
}
.cf-switcher-row[data-active] .cf-switcher-name { color: var(--cf-ink); }
.cf-switcher-status {
  font-family: var(--cf-font-mono);
  font-size: 9.5px;
  color: var(--cf-ink-mute);
  margin-top: 1px;
}
.cf-managed-chip {
  font-family: var(--cf-font-mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 1px 5px;
  color: var(--cf-cyan);
  border: 1px solid rgba(104, 225, 253, .4);
}

.cf-sendto {
  background: var(--cf-bg-elev);
  border: 1px solid var(--cf-cyan);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
  display: flex;
  flex-direction: column;
}
/* the display:flex above would defeat the hidden attribute's UA default */
.cf-sendto[hidden] { display: none; }
.cf-sendto .cf-switcher-row { border: none; border-bottom: 1px solid var(--cf-bg-line); }
.cf-sendto-both {
  padding: 9px 12px;
  font-family: var(--cf-font-mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  color: var(--cf-cyan);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
}

/* ── page layout: content + rail side-by-side on desktop ────────── */

.cf-space-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: start;
  /* the product spaces speak the kit's display voice - Phase-B uses
     Chakra Petch for display/ui/body, not the marketing shell's Inter */
  font-family: var(--cf-font-display);
}
.cf-space-layout h1,
.cf-space-layout h2,
.cf-space-layout h3 {
  font-family: var(--cf-font-display);
}
@media (max-width: 880px) {
  .cf-space-layout { grid-template-columns: 1fr; }
  /* Phone: the rail collapses to the pill + nav badge (D3) except on
     the My Fidget page, which keeps the full rail as its content. */
  .cf-space-layout > .cf-rail-slot:not([data-keep-on-phone]) { display: none; }
}

/* ── My Fidget: menu tree (D4) ──────────────────────────────────── */

.cf-myfidget-identity {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px 12px;
  min-height: 31px;
  margin: 3px 0 13px;
}
.cf-myfidget-identity[hidden] { display: none; }
.cf-myfidget-identity .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.cf-myfidget-identity-label {
  color: var(--cf-ink-mute);
  font: 9px/1.4 var(--cf-font-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
}
.cf-device-name-edit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 3px 7px;
  color: var(--cf-ink);
  background: transparent;
  border: 1px solid transparent;
  font: 700 15px/1.35 var(--cf-font-display);
  cursor: pointer;
}
.cf-device-name-edit[hidden] { display: none; }
.cf-device-name-edit:hover { color: var(--cf-cyan); border-color: rgba(104, 225, 253, .35); }
.cf-device-name-edit:focus-visible,
.cf-device-name-editor input:focus-visible { outline: 2px solid var(--cf-cyan); outline-offset: 2px; }
.cf-device-name-pencil { color: var(--cf-cyan); font: 12px/1 var(--cf-font-mono); }
.cf-device-name-editor { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.cf-device-name-editor[hidden] { display: none; }
.cf-device-name-editor input {
  width: min(24ch, calc(100vw - 64px));
  box-sizing: border-box;
  padding: 6px 8px;
  color: var(--cf-ink);
  background: var(--cf-bg-card);
  border: 1px solid var(--cf-cyan);
  font: 700 14px/1.35 var(--cf-font-display);
}
.cf-device-name-feedback { color: var(--cf-ink-dim); font: 9px/1.4 var(--cf-font-mono); }

#cf-myfidget-firmware-mount { display: contents; }
.cf-myfidget-firmware {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-left: auto;
  padding: 6px 9px;
  color: var(--cf-cyan);
  border: 1px solid rgba(104, 225, 253, .35);
  text-decoration: none;
}
.cf-myfidget-firmware[hidden] { display: none; }
.cf-myfidget-firmware:hover { border-color: var(--cf-cyan); background: rgba(104, 225, 253, .06); }
.cf-myfidget-firmware:focus-visible { outline: 2px solid var(--cf-cyan); outline-offset: 2px; }
.cf-myfidget-firmware-action { font: 700 11px/1.35 var(--cf-font-display); }
.cf-myfidget-firmware-copy { color: var(--cf-ink-dim); font: 9px/1.45 var(--cf-font-mono); }

@media (max-width: 600px) {
  .cf-myfidget-firmware { width: 100%; margin-left: 0; }
}

.cf-myfidget-kicker {
  font-family: var(--cf-font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cf-cyan);
  margin: 14px 0 8px;
}

#cf-myfidget-bar { margin: 0 0 18px; }

.cf-tree {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.cf-tree-section {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 14px;
  margin-top: 10px;
  background: var(--cf-bg-elev);
  border: 1px solid var(--cf-bg-line);
}
.cf-tree-section:first-child { margin-top: 0; }
.cf-tree-section[data-drop-into] { outline: 1px solid var(--cf-cyan); }
.cf-tree-section-name {
  font-family: var(--cf-font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cf-ink);
}
.cf-tree-section-meta {
  font-family: var(--cf-font-mono);
  font-size: 9.5px;
  color: var(--cf-ink-mute);
  flex: 1;
}

.cf-tree-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  background: var(--cf-bg-card);
  border: 1px solid var(--cf-bg-line);
  border-left: 3px solid var(--cf-row-accent, var(--cf-anod-silver));
  margin-left: 24px;
}
.cf-tree-row[data-staged="remove"] { opacity: .55; }
.cf-tree-row[data-staged="remove"] .cf-tree-name { text-decoration: line-through; }
.cf-tree-row[data-hidden] .cf-tree-name { color: var(--cf-ink-dim); }
.cf-tree-row[data-highlight] {
  background: var(--cf-bg-elev);
  border-color: var(--cf-row-accent, var(--cf-anod-silver));
}
.cf-tree-row[data-dragging] { opacity: .45; }
.cf-tree-row[data-drop-before] { box-shadow: 0 -2px 0 0 var(--cf-cyan); }
.cf-tree-row[data-drop-after] { box-shadow: 0 2px 0 0 var(--cf-cyan); }

.cf-tree-handle {
  font-family: var(--cf-font-mono);
  font-size: 13px;
  color: var(--cf-ink-mute);
  cursor: grab;
  padding: 6px 4px;
  touch-action: none; /* drag starts here; the rest of the row scrolls */
  user-select: none;
  flex: none;
  min-width: 16px;
  text-align: center;
}
.cf-tree-handle-off { cursor: default; }

.cf-tree-index {
  font-family: var(--cf-font-mono);
  font-size: 10px;
  color: var(--cf-ink-mute);
  width: 18px;
  flex: none;
}

.cf-tree-face {
  width: 64px;
  height: 32px;
  object-fit: contain;
  image-rendering: pixelated;
  pointer-events: none;
  flex: none;
}

.cf-tree-main { flex: 1; min-width: 0; }
.cf-tree-name {
  font-family: var(--cf-font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--cf-ink);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.cf-tree-kb {
  font-family: var(--cf-font-mono);
  font-size: 9.5px;
  color: var(--cf-ink-dim);
  margin-top: 2px;
}

.cf-tree-chip {
  font-family: var(--cf-font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 2px 6px;
  white-space: nowrap;
}
.cf-chip-add { color: #08050f; background: var(--cf-yellow); }
.cf-chip-remove { color: var(--cf-ink-mute); border: 1px dashed var(--cf-ink-mute); }
.cf-chip-hidden { color: var(--cf-ink-mute); border: 1px solid var(--cf-bg-line); }

.cf-tree-updown {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: none;
}
.cf-tree-step {
  width: 22px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--cf-font-mono);
  font-size: 10px;
  color: var(--cf-ink-dim);
  background: transparent;
  border: 1px solid var(--cf-bg-line);
  cursor: pointer;
  padding: 0;
}
.cf-tree-step:hover:not(:disabled) { color: var(--cf-cyan); border-color: var(--cf-cyan); }
.cf-tree-step:disabled { opacity: .35; cursor: default; }

.cf-tree-actions { display: flex; gap: 6px; flex: none; }
.cf-tree-act {
  font-family: var(--cf-font-mono);
  font-size: 9.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cf-ink-dim);
  background: transparent;
  border: 1px solid var(--cf-bg-line);
  padding: 4px 8px;
  cursor: pointer;
}
.cf-tree-act-remove { color: var(--cf-magenta); border-color: rgba(255, 43, 184, .4); }
.cf-tree-act-keep { color: var(--cf-cyan); border-color: var(--cf-cyan); }

.cf-tree-empty {
  padding: 22px 18px;
  border: 1px dashed var(--cf-bg-line);
}
.cf-tree-empty-heading {
  font-family: var(--cf-font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--cf-ink);
}
.cf-tree-empty-body {
  font-family: var(--cf-font-mono);
  font-size: 11px;
  line-height: 1.65;
  color: var(--cf-ink-dim);
  margin: 8px 0 12px;
}
.cf-tree-empty-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 12px;
}

/* Phone: thumb-sized move/action targets - the non-drag fallback
   must be comfortably tappable). */
@media (max-width: 880px) {
  .cf-tree-row { margin-left: 12px; gap: 8px; padding: 10px 10px; }
  .cf-tree-step { width: 30px; height: 21px; }
  .cf-tree-act { padding: 8px 8px; }
  .cf-tree-handle { padding: 10px 6px; }
}

@media (max-width: 768px) {
  .cf-tree-face { display: none; }
}

/* -- Returning-owner fast pass -------------------------------------- */

.cf-fast-pass {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 62px;
  box-sizing: border-box;
  padding: 10px clamp(20px, 4vw, 56px);
  background: #0b1218;
  border-bottom: 1px solid rgba(77, 255, 175, .42);
  font-family: var(--cf-font-mono);
}
.cf-fast-pass[hidden] { display: none; }
.cf-fast-pass-summary,
.cf-fast-pass-actions { display: flex; align-items: center; }
.cf-fast-pass-summary { gap: 14px; min-width: 0; }
.cf-fast-pass-actions { gap: 16px; flex: 0 0 auto; }
.cf-fast-pass-dot {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--cf-green);
  box-shadow: 0 0 5px var(--cf-green), 0 0 14px rgba(77, 255, 175, .72);
}
.cf-fast-pass[data-presence="offline"] .cf-fast-pass-dot {
  background: transparent;
  border: 1px solid var(--cf-ink-dim);
  box-shadow: none;
}
.cf-fast-pass-copy { display: flex; gap: 7px; min-width: 0; font-size: 12px; line-height: 1.45; }
.cf-fast-pass-greeting { color: var(--cf-ink); }
.cf-fast-pass-waiting { color: var(--cf-ink-dim); }
.cf-fast-pass-status { color: var(--cf-cyan); }
.cf-fast-pass[data-state="error"] .cf-fast-pass-status { color: #ff8cae; }
.cf-fast-pass[data-state="partial"] .cf-fast-pass-status { color: var(--cf-yellow); }
.cf-fast-pass[data-state="success"] .cf-fast-pass-status { color: var(--cf-green); }
.cf-fast-pass-firmware {
  padding: 8px 12px;
  border: 1px solid rgba(255, 216, 74, .48);
  color: var(--cf-yellow);
  font-size: 10.5px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.cf-fast-pass-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  box-sizing: border-box;
  padding: 9px 20px;
  border: 0;
  background: var(--cf-magenta);
  color: #08050f;
  clip-path: polygon(7px 0, calc(100% - 7px) 0, 100% 7px, 100% calc(100% - 7px), calc(100% - 7px) 100%, 7px 100%, 0 calc(100% - 7px), 0 7px);
  font: 700 11px/1 var(--cf-font-mono);
  letter-spacing: .1em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
}
.cf-fast-pass-primary:disabled { opacity: .7; cursor: wait; }
.cf-fast-pass-manage { color: var(--cf-cyan); font-size: 11px; text-decoration: none; white-space: nowrap; }
.cf-fast-pass a:focus-visible,
.cf-fast-pass button:focus-visible { outline: 2px solid var(--cf-cyan); outline-offset: 3px; }

@media (max-width: 760px) {
  .cf-fast-pass { align-items: stretch; flex-direction: column; gap: 12px; padding: 14px 16px 16px; }
  .cf-fast-pass-summary { align-items: flex-start; }
  .cf-fast-pass-dot { margin-top: 5px; }
  .cf-fast-pass-copy { flex-direction: column; gap: 2px; }
  .cf-fast-pass-actions { display: grid; grid-template-columns: 1fr auto; gap: 10px 14px; }
  .cf-fast-pass-firmware { grid-column: 1 / -1; text-align: center; }
  .cf-fast-pass-primary { min-width: 0; width: 100%; }
}

/* ── My Fidget: staged-changes summary ──────────────────────────── */

.cf-staged-summary {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 300px;
  box-sizing: border-box;
  margin-top: 14px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 216, 74, .4);
  background: rgba(255, 216, 74, .05);
}
/* the display:flex above would defeat the hidden attribute's UA default */
.cf-staged-summary[hidden] { display: none; }

.cf-staged-heading {
  font-family: var(--cf-font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--cf-yellow);
}
.cf-staged-parts {
  font-family: var(--cf-font-mono);
  font-size: 10.5px;
  color: var(--cf-ink);
}
.cf-staged-line {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--cf-font-mono);
  font-size: 10.5px;
  color: var(--cf-ink-dim);
}
.cf-staged-line > span { flex: 1; min-width: 0; }
.cf-staged-add { color: var(--cf-green); }
.cf-staged-remove { color: var(--cf-magenta); }
.cf-staged-undo {
  font-family: var(--cf-font-mono);
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cf-cyan);
  background: transparent;
  border: 1px solid rgba(104, 225, 253, .4);
  padding: 2px 6px;
  cursor: pointer;
  flex: none;
}
.cf-staged-note {
  font-family: var(--cf-font-mono);
  font-size: 9.5px;
  color: var(--cf-ink-mute);
  margin: 4px 0 0;
}
/* Sync finishing report (success / partial / cancelled / dropped) */
.cf-sync-report {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 300px;
  box-sizing: border-box;
  margin-top: 14px;
  padding: 10px 12px;
  border: 1px solid rgba(104, 225, 253, .4);
  background: rgba(104, 225, 253, .05);
}
.cf-sync-report[hidden] { display: none; }
.cf-sync-report[data-tone="success"] {
  border-color: rgba(46, 255, 195, .45);
  background: rgba(46, 255, 195, .06);
}
.cf-sync-report[data-tone="partial"],
.cf-sync-report[data-tone="error"] {
  border-color: rgba(230, 36, 138, .45);
  background: rgba(230, 36, 138, .06);
}
.cf-sync-report-heading {
  font-family: var(--cf-font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--cf-cyan);
}
.cf-sync-report[data-tone="success"] .cf-sync-report-heading { color: var(--cf-green); }
.cf-sync-report[data-tone="partial"] .cf-sync-report-heading,
.cf-sync-report[data-tone="error"] .cf-sync-report-heading { color: var(--cf-magenta); }
.cf-sync-report-body,
.cf-sync-report-landed,
.cf-sync-report-hint {
  font-family: var(--cf-font-mono);
  font-size: 10px;
  line-height: 1.6;
  color: var(--cf-ink-dim);
  margin: 0;
}
.cf-sync-report-hint { color: var(--cf-ink-mute); font-size: 9.5px; }
.cf-sync-report-fails {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cf-sync-report-fail {
  font-family: var(--cf-font-mono);
  font-size: 10px;
  line-height: 1.5;
  color: var(--cf-magenta);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

@media (max-width: 880px) {
  .cf-staged-summary { width: 100%; }
  .cf-sync-report { width: 100%; }
}

/* ── My Fidget: multi-device tabs (D7) ──────────────────────────── */

.cf-device-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--cf-bg-line);
  margin: 10px 0 8px;
}
.cf-device-tabs[hidden] { display: none; }
.cf-device-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
}
.cf-device-tab[data-active] { border-bottom-color: var(--cf-cyan); }
.cf-device-tab-name {
  font-family: var(--cf-font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cf-ink-mute);
}
.cf-device-tab[data-active] .cf-device-tab-name { color: var(--cf-ink); }
/* Phone: the chip crowds the tab label into a wrap, and the rail's
   switcher row right below carries the same managed-by-you chip. */
@media (max-width: 880px) {
  .cf-device-tab { padding: 10px 12px; }
  .cf-device-tab .cf-managed-chip { display: none; }
}


/* ── Explore: grid + item cards + ladder ── */

.cf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 18px;
}
.cf-grid-empty {
  grid-column: 1 / -1;
  font-family: var(--cf-font-mono);
  font-size: 12px;
  color: var(--cf-ink-dim);
  padding: 40px 0;
  text-align: center;
}

.cf-card {
  position: relative;
  background: var(--cf-bg-card);
  border: 1px solid var(--cf-bg-line);
  border-left: 2px solid var(--cf-card-accent, var(--cf-bg-line));
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  cursor: pointer;
}
.cf-card:hover { background: var(--cf-bg-elev); }

.cf-tile {
  position: relative;
  background: #06080a;
  border: 1px solid var(--cf-bg-line);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.cf-tile-capture { max-width: 100%; max-height: 100%; image-rendering: pixelated; }
.cf-tile-name {
  font-family: var(--cf-font-pixel);
  font-size: 15px;
  color: #b8f1ff;
  text-shadow: 0 0 8px rgba(184, 241, 255, .4);
  text-align: center;
  padding: 0 10px;
}
.cf-tile-tag {
  position: absolute;
  right: 6px;
  bottom: 4px;
  font-family: var(--cf-font-mono);
  font-size: 8.5px;
  color: var(--cf-ink-faint);
}
.cf-tile-kind {
  position: absolute;
  left: 6px;
  top: 6px;
  font-family: var(--cf-font-mono);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cf-cyan);
  background: rgba(0, 0, 0, .55);
  padding: 2px 6px;
}
.cf-tile-draft {
  position: absolute;
  right: 6px;
  top: 6px;
  font-family: var(--cf-font-mono);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cf-yellow);
  border: 1px dashed var(--cf-yellow);
  padding: 2px 6px;
}
.cf-tile-scan {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 3px);
  opacity: .5;
}

.cf-card-fav {
  position: absolute;
  top: 14px;
  right: 16px;
  background: rgba(0, 0, 0, .55);
  border: none;
  color: var(--cf-ink-dim);
  font-size: 13px;
  line-height: 1;
  padding: 4px 6px;
  cursor: pointer;
}
.cf-card-fav.cf-fav-on { color: var(--cf-magenta); }

.cf-card-name {
  margin: 0;
  font-family: var(--cf-font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--cf-ink);
}
.cf-card-meta, .cf-card-rating {
  font-family: var(--cf-font-mono);
  font-size: 10.5px;
  color: var(--cf-ink-dim);
}
.cf-card-rating-none { color: #877aa4; }
.cf-card-based-name { color: var(--cf-cyan); }
.cf-card-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cf-card-kb { font-family: var(--cf-font-mono); font-size: 10.5px; color: var(--cf-ink-dim); }
.cf-hw-chip {
  font-family: var(--cf-font-mono);
  font-size: 8.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #877aa4;
  border: 1px solid var(--cf-bg-line);
  padding: 2px 6px;
}
.cf-card[data-item-kind="screensaver"] .cf-card-cat { color: #c54fbe !important; }

.cf-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  flex-wrap: wrap;
}
.cf-card-state { font-family: var(--cf-font-mono); font-size: 10.5px; display: inline-flex; align-items: center; gap: 8px; }
.cf-card-installed { color: var(--cf-green); }

/* rung buttons ride the NeonButton language */
.cf-rung {
  font-family: var(--cf-font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 8px 14px;
  border: 1px solid transparent;
  cursor: pointer;
  clip-path: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 0 100%);
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  text-decoration: none;
}
.cf-btn-primary { background: var(--cf-magenta); color: #08050f; }
.cf-btn-cyan { background: var(--cf-cyan); color: #08050f; }
.cf-btn-ghost { background: transparent; color: var(--cf-cyan); border-color: rgba(104, 225, 253, .5); }
.cf-btn-outline { background: transparent; color: var(--cf-magenta); border-color: var(--cf-magenta); }
.cf-btn-dark { background: var(--cf-bg-elev); color: var(--cf-ink); }
.cf-rung-sub {
  font-family: var(--cf-font-mono);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  opacity: .75;
}

/* ── Explore: filter chrome ─────────────────────────────────────── */

.cf-explore-tools { display: flex; align-items: center; gap: 14px; margin: 14px 0 10px; flex-wrap: wrap; }
.cf-explore-search {
  flex: 0 1 280px;
  background: rgba(0, 0, 0, .35);
  border: 1px solid var(--cf-bg-line);
  color: var(--cf-ink);
  font-family: var(--cf-font-mono);
  font-size: 12px;
  padding: 9px 12px;
}
.cf-explore-search::placeholder { color: var(--cf-ink-mute); }
.cf-kind-tabs { display: inline-flex; border: 1px solid var(--cf-bg-line); }
.cf-kind-tab {
  padding: 8px 14px;
  font-family: var(--cf-font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cf-ink-dim);
  background: transparent;
  border: none;
  cursor: pointer;
  white-space: nowrap;
}
.cf-kind-tab[data-active] { background: var(--cf-cyan); color: #08050f; }
.cf-cat-pills { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.cf-cat-pill {
  padding: 6px 12px;
  font-family: var(--cf-font-mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cf-ink-dim);
  background: transparent;
  border: 1px solid var(--cf-bg-line);
  cursor: pointer;
  white-space: nowrap;
}
.cf-cat-pill[data-active] { background: var(--cf-ink-dim); color: #08050f; border-color: var(--cf-ink-dim); }
.cf-explore-sort {
  margin-left: auto;
  background: rgba(0, 0, 0, .35);
  border: 1px solid var(--cf-bg-line);
  color: var(--cf-ink-dim);
  font-family: var(--cf-font-mono);
  font-size: 11px;
  padding: 8px 10px;
}

/* ── Explore: item detail - drawer (desktop) / sheet (phone), D2 ── */

.cf-detail-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(2, 1, 6, .55);
  /* above the site header AND the feedback stack (10000-10002) - an
     open detail is modal, nothing may intercept its controls */
  z-index: 10010;
}
.cf-detail-backdrop[hidden] { display: none; }
.cf-detail {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(360px, 96vw); /* sized so the device chassis renders at a readable width */
  background: var(--cf-bg-page);
  border-left: 1px solid rgba(255, 43, 184, .3);
  box-shadow: -24px 0 60px rgba(0, 0, 0, .6);
  padding: 22px 26px;
  overflow-y: auto;
  z-index: 10011;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cf-detail[hidden] { display: none; }
.cf-detail-head { display: flex; justify-content: space-between; align-items: center; }
.cf-detail-stamp {
  font-family: var(--cf-font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cf-magenta);
}
.cf-detail-close {
  background: none;
  border: none;
  font-family: var(--cf-font-mono);
  font-size: 13px;
  color: var(--cf-ink-mute);
  cursor: pointer;
}
.cf-detail-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cf-detail-name { margin: 0; font-family: var(--cf-font-display); font-size: 28px; font-weight: 700; color: var(--cf-ink); }
.cf-kind-chip {
  font-family: var(--cf-font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cf-cyan);
  border: 1px solid rgba(104, 225, 253, .5);
  padding: 2px 8px;
}
.cf-ladder { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.cf-ladder-row { width: 100%; box-sizing: border-box; }
.cf-detail-desc {
  font-family: var(--cf-font-display);
  font-size: 14px;
  line-height: 1.7;
  color: var(--cf-ink-dim);
}

/* the play surface (rung 2 lives HERE, never on cards) */
.cf-play {
  border: 1px solid var(--cf-cyan);
  background: #06080a;
  padding: 16px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  box-shadow: 0 0 18px rgba(104, 225, 253, .25);
}
.cf-play-stage canvas { image-rendering: pixelated; max-width: 100%; }
.cf-play-controls { display: flex; align-items: center; gap: 12px; width: 100%; }
.cf-play-hint { flex: 1; text-align: center; font-family: var(--cf-font-mono); font-size: 10px; color: var(--cf-ink-mute); }
.cf-play-stop { padding: 6px 10px; font-size: 10px; }
.cf-play-mute {
  background: none;
  border: 1px solid var(--cf-bg-line);
  color: var(--cf-ink-dim);
  font-family: var(--cf-font-mono);
  font-size: 10px;
  padding: 5px 8px;
  cursor: pointer;
}
.cf-play-mute[aria-pressed="true"] { color: var(--cf-magenta); border-color: var(--cf-magenta); }
.cf-play-status { font-family: var(--cf-font-mono); font-size: 10.5px; color: var(--cf-ink-dim); margin: 0; }

/* listing edit (archive admins only) - lives inside the detail drawer */
.cf-detail-edit { align-self: flex-start; padding: 6px 12px; font-size: 10.5px; }
.cf-edit-form { display: flex; flex-direction: column; gap: 12px; }
.cf-edit-heading {
  margin: 0;
  font-family: var(--cf-font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--cf-ink);
}
.cf-edit-field { display: flex; flex-direction: column; gap: 4px; }
.cf-edit-label {
  font-family: var(--cf-font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cf-ink-mute);
}
.cf-edit-input {
  background: var(--cf-bg-card);
  border: 1px solid var(--cf-bg-line);
  color: var(--cf-ink);
  font-family: var(--cf-font-display);
  font-size: 14px;
  padding: 8px 10px;
  border-radius: 0;
}
.cf-edit-input:focus {
  outline: none;
  border-color: var(--cf-magenta);
  box-shadow: 0 0 0 1px rgba(255, 43, 184, .35);
}
.cf-edit-textarea { resize: vertical; line-height: 1.6; }
.cf-edit-image-field { gap: 7px; }
.cf-edit-image-preview {
  width: 128px;
  height: 64px;
  border: 1px solid var(--cf-bg-line);
  background: #000; /* the OLED face is pure black */
  object-fit: fill;
  image-rendering: pixelated;
}
.cf-edit-image-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cf-edit-image-pick { position: relative; overflow: hidden; cursor: pointer; padding: 6px 12px; font-size: 10.5px; }
.cf-edit-image-pick:focus-within { outline: 2px solid var(--cf-cyan); outline-offset: 2px; }
.cf-edit-image-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.cf-edit-image-restore { padding: 6px 12px; font-size: 10.5px; }
.cf-edit-image-help { font-family: var(--cf-font-mono); font-size: 10px; color: var(--cf-ink-mute); }
.cf-edit-actions { display: flex; gap: 8px; }
.cf-edit-status {
  margin: 0;
  min-height: 1em;
  font-family: var(--cf-font-mono);
  font-size: 10.5px;
  color: var(--cf-yellow);
}

/* phone: the detail is a full-screen sheet, never a squeezed drawer */
@media (max-width: 880px) {
  .cf-detail {
    inset: 0;
    width: auto;
    border-left: none;
    padding: 16px;
  }
  .cf-detail-name { font-size: 24px; }
}

/* ── Explore terminal mode ───────────────────────────────────────── */

.cf-term-toggle {
  margin-left: 8px;
  background: transparent;
  border: 1px solid rgba(77, 255, 175, .5);
  color: var(--cf-green);
  font-family: var(--cf-font-mono);
  font-size: 10.5px;
  padding: 8px 10px;
  cursor: pointer;
  white-space: nowrap;
}
.cf-term-toggle:hover { background: rgba(77, 255, 175, .12); }

/* terminal mode hides the visual chrome; the rail stays */
#cf-explore-main[data-terminal] .cf-explore-tools > :not(.cf-term-toggle),
#cf-explore-main[data-terminal] .cf-cat-pills,
#cf-explore-main[data-terminal] #cf-explore-grid,
#cf-explore-main[data-terminal] .cf-myfidget-kicker {
  display: none;
}

/* a nowrap status line must never inflate the grid track - grid items
   default to min-width auto, so pin them (the status scrolls inside) */
.cf-space-layout > * { min-width: 0; }
.cf-term {
  display: flex;
  max-width: 100%;
  flex-direction: column;
  background: #020803;
  border: 1px solid rgba(77, 255, 175, .35);
  min-height: 480px;
  max-height: 72vh;
  padding: 12px 14px;
  font-family: var(--cf-font-crt);
  font-size: 17px;
  color: var(--cf-green);
}
.cf-term[hidden] { display: none; }
.cf-term-output {
  flex: 1;
  min-height: 0; /* flex overflow rule: without it the status bar clips off the container edge */
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
}
.cf-term-line { min-height: 1.15em; line-height: 1.3; }
.cf-term-accent { color: #a5ffd9; }
.cf-term-dim { color: rgba(77, 255, 175, .45); }
.cf-term-err { color: #ff6e6e; }
.cf-term-ok { color: #b8f1ff; }
.cf-term-echo { color: rgba(77, 255, 175, .8); }
.cf-term-inputrow {
  display: flex;
  align-items: center;
  gap: 6px;
  border-top: 1px solid rgba(77, 255, 175, .2);
  padding-top: 8px;
  margin-top: 8px;
}
/* the fascia prototype's blink, kept */
.cf-term-prompt { animation: cf-term-blink 1s step-end infinite; }
@keyframes cf-term-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .cf-term-prompt { animation: none; }
}
.cf-term-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--cf-green);
  font-family: var(--cf-font-crt);
  font-size: 17px;
  caret-color: var(--cf-green);
}
.cf-term-status {
  font-size: 14px;
  color: rgba(77, 255, 175, .6);
  border-top: 1px solid rgba(77, 255, 175, .2);
  padding-top: 6px;
  margin-top: 8px;
  white-space: nowrap;
  overflow-x: auto;
}

@media (max-width: 880px) {
  .cf-term { min-height: 60vh; font-size: 16px; }
  /* fascia prototype's phone rule: everything tappable is 44px */
  .cf-term-inputrow { min-height: 44px; }
  .cf-term-toggle { min-height: 44px; }
}

/* ── /create/ shell: My-stuff landing + phone tabs ────────────────── */

.cf-create-landing {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 32px;
  min-height: calc(100vh - 86px);
  padding: 38px 54px 64px;
}
.cf-create-landing[hidden], .cf-create-workspace[hidden], #cf-create-tabs[hidden] { display: none !important; }
.cf-create-launcher-mode { overflow-x: hidden; }
.cf-create-launcher-main { min-width: 0; }
.cf-create-kicker, .cf-create-teaser-kicker {
  color: var(--cf-cyan); font: 700 11px/1.3 var(--cf-font-mono); letter-spacing: .22em;
}
.cf-create-landing h1 { margin: 10px 0 36px; font-size: clamp(34px, 4vw, 52px); }
.cf-create-phone-title { display: none; }
.cf-create-section { margin-bottom: 54px; }
.cf-create-section-head { display: grid; grid-template-columns: 70px 1fr auto; align-items: center; gap: 12px; margin-bottom: 24px; }
.cf-create-section-head > span { color: var(--cf-cyan); font: 700 12px/1 var(--cf-font-mono); letter-spacing: .16em; }
.cf-create-section-head > span:nth-child(2) { color: var(--cf-ink-dim); }
.cf-create-section-head h2 { margin: 0; color: var(--cf-ink); font: 700 27px/1 var(--cf-font-display); }
.cf-create-landing h1 { font-family: var(--cf-font-display); }
/* Sam's artboard verdict: the kicker sits ABOVE the STUDIO title,
   stacked like the reference design - not beside it. */
.cf-create-landing-head { display: block; }
.cf-create-entries {
  display: grid; /* the columns rule was inert without it - cards staggered */
  grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0;
}
.cf-create-entry {
  text-align: left;
  background: var(--cf-bg-card);
  border: 1px solid var(--cf-bg-line);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
  min-height: 158px; padding: 22px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 10px; text-decoration: none;
}
.cf-create-entry-plus { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 2px; color: #07050e; background: var(--cf-magenta); font: 900 18px/1 var(--cf-font-mono); clip-path: polygon(0 0,100% 0,100% 75%,75% 100%,0 100%); }
.cf-create-entry-plus-cyan { background: var(--cf-cyan); }
.cf-create-entry:hover { background: var(--cf-bg-elev); }
.cf-create-entry-name {
  font-family: var(--cf-font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--cf-ink);
}
.cf-create-entry-sub {
  font-family: var(--cf-font-mono);
  font-size: 11px; line-height: 1.65;
  color: var(--cf-ink-dim);
}
/* project cards: the editors' real records */
.cf-create-projects { margin: 0; }
.cf-create-projects[hidden] { display: none; }
.cf-create-projects-title {
  font-family: var(--cf-font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cf-ink-dim);
  margin: 0 0 8px;
}
.cf-create-project-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
}
.cf-create-item-card { position: relative; overflow: hidden; border: 1px solid var(--cf-bg-line); background: var(--cf-bg-card); }
.cf-create-card-face { position: relative; display: grid; place-items: center; height: 144px; background: #020708; overflow: hidden; }
.cf-create-kind-tag, .cf-create-status-draft, .cf-create-status-review, .cf-create-status-published { position: absolute; top: 10px; z-index: 2; padding: 5px 9px; color: #07050e; font: 800 10px/1 var(--cf-font-mono); letter-spacing: .16em; }
.cf-create-kind-tag { left: 10px; background: var(--cf-cyan); }
/* artboard: sprite packs carry the magenta kind tag (Sam's verdict) */
.cf-create-item-card[data-kind="sprite-pack"] .cf-create-kind-tag { background: var(--cf-magenta, #ff2bb8); }
.cf-create-status-draft, .cf-create-status-review, .cf-create-status-published { right: 10px; }
.cf-create-status-draft { color: var(--cf-yellow); border: 1px dashed var(--cf-yellow); background: transparent; }
.cf-create-status-review { color: var(--cf-cyan); border: 1px dashed var(--cf-cyan); background: transparent; }
.cf-create-status-published { background: var(--cf-green); }
/* Captures render at a FIXED integer 2x of native 128x64 - filling the
   face read as "super zoomed" (Sam). Crisp and deterministic at every
   card width. */
.cf-create-card-capture { width: 256px; height: 128px; max-width: 100%; object-fit: contain; image-rendering: pixelated; }
.cf-create-card-empty { color: var(--cf-ink-dim); font: 700 12px/1 var(--cf-font-mono); letter-spacing: .16em; }
.cf-create-capture-label { position: absolute; left: 8px; bottom: 6px; color: var(--cf-ink-dim); font: 9px/1 var(--cf-font-mono); letter-spacing: .12em; }
.cf-create-card-body { padding: 14px 16px 16px; }
.cf-create-card-meta { min-height: 18px; margin: 5px 0 10px; color: var(--cf-ink-dim); font: 11px/1.5 var(--cf-font-mono); }
.cf-create-item-card .cf-card-actions { margin-top: 14px; }
.cf-create-project-more { position: absolute; right: 8px; bottom: 8px; z-index: 3; width: 34px; height: 34px; border: 1px solid var(--cf-bg-line); background: rgba(2,7,8,.9); color: var(--cf-ink); font: 800 18px/1 var(--cf-font-mono); cursor: pointer; }
.cf-create-project-menu { position: absolute; right: 8px; bottom: 46px; z-index: 4; padding: 5px; border: 1px solid var(--cf-bg-line); background: var(--cf-bg-card); box-shadow: 0 8px 24px rgba(0,0,0,.45); }
.cf-create-project-menu[hidden] { display: none; }
.cf-create-project-delete { min-height: 36px; padding: 0 12px; border: 0; background: transparent; color: var(--cf-ink); font: 700 11px/1 var(--cf-font-mono); letter-spacing: .08em; cursor: pointer; }
.cf-create-project-delete:hover, .cf-create-project-delete:focus-visible { color: var(--cf-red, #ff5b68); }
.cf-project-delete-modal { position: fixed; inset: 0; z-index: 1100; display: grid; place-items: center; padding: 20px; background: rgba(0,0,0,.72); }
.cf-project-delete-modal[hidden] { display: none; }
.cf-project-delete-surface { width: min(440px, 100%); padding: 24px; border: 1px solid var(--cf-bg-line); background: var(--cf-bg-card); box-shadow: 0 18px 60px rgba(0,0,0,.6); }
.cf-project-delete-surface h2 { margin: 0 0 12px; font: 700 20px/1.25 var(--cf-font-display); }
.cf-project-delete-surface p { margin: 7px 0; color: var(--cf-ink-dim); font: 11px/1.6 var(--cf-font-mono); }
.cf-project-delete-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.cf-create-device-teaser { align-self: start; margin-top: 0; padding: 24px; background: var(--cf-bg-card); border: 1px solid var(--cf-bg-line); clip-path: polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,0 100%); }
.cf-create-device-teaser h2 { margin: 20px 0; font: 700 17px/1.3 var(--cf-font-display); }
.cf-create-device-teaser > p:not(.cf-create-teaser-kicker) { color: var(--cf-ink-dim); font: 12px/1.7 var(--cf-font-mono); }
.cf-create-device-teaser .cf-btn { display: block; margin: 18px 0; text-align: left; }
.cf-create-setup-link { color: var(--cf-cyan); font: 11px/1.4 var(--cf-font-mono); text-decoration: none; }

@media (max-width: 768px) {
  /* Review fix: the site header STAYS on phone /create/ - hiding it removed
     the nav, hamburger, and account menu. The site-level phone tab bar that
     might replace it is parked for now. */
  .cf-create-landing { display: block; min-height: 100vh; padding: 26px 24px 70px; }
  .cf-create-kicker, .cf-create-desktop-title, .cf-create-section-head { display: none; }
  .cf-create-phone-title { display: inline; }
  .cf-create-landing h1 { margin: 0 0 26px; font-size: 28px; }
  .cf-create-section { margin-bottom: 36px; }
  .cf-create-entries, .cf-create-project-list { grid-template-columns: 1fr; gap: 20px; }
  .cf-create-entry { min-height: 176px; padding: 26px 30px; }
  .cf-create-entry-name { font-size: 20px; }
  .cf-create-entry-sub { font-size: 12px; }
  .cf-create-projects::before { content: 'MY STUFF'; display: block; margin-bottom: 16px; color: var(--cf-cyan); font: 700 12px/1 var(--cf-font-mono); letter-spacing: .22em; }
  .cf-create-device-teaser { display: none; }
}
.cf-create-project-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: var(--cf-bg-card);
  border: 1px solid var(--cf-bg-line);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
  padding: 10px 12px;
}
.cf-create-project-card[data-current] { border-color: var(--cf-cyan); }
.cf-create-project-open {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  text-align: left;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 0;
}
.cf-create-project-name {
  font-family: var(--cf-font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--cf-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cf-create-project-sub {
  font-family: var(--cf-font-mono);
  font-size: 10px;
  color: var(--cf-ink-dim);
}
.cf-create-project-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}
.cf-create-project-rename,
.cf-create-project-account {
  background: transparent;
  border: 1px solid var(--cf-bg-line);
  color: var(--cf-ink-dim);
  font-family: var(--cf-font-mono);
  font-size: 10px;
  padding: 4px 8px;
  min-height: 28px;
  cursor: pointer;
}
.cf-create-project-rename:hover,
.cf-create-project-account:hover { color: var(--cf-cyan); border-color: var(--cf-cyan); }
.cf-create-project-rename-input {
  font-family: var(--cf-font-display);
  font-size: 14px;
  background: var(--cf-bg-elev);
  border: 1px solid var(--cf-cyan);
  color: var(--cf-ink);
  padding: 2px 6px;
  max-width: 100%;
}
@media (pointer: coarse), (max-width: 600px) {
  .cf-create-project-rename,
  .cf-create-project-account { min-height: 44px; }
}

/* phone thumb tabs - hidden above the phone breakpoint */
.cf-create-tabs {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  /* above the legacy mobile toast stack (10002) and the feedback
     button - the thumb tabs must always be reachable */
  z-index: 10005;
  background: var(--cf-bg-page, #0e0820);
  border-top: 1px solid var(--cf-bg-line, rgba(245, 236, 255, .08));
}
.cf-create-tabs button {
  flex: 1;
  min-height: 58px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: transparent;
  border: none;
  color: var(--cf-ink-dim, #a89cc8);
  font-family: var(--cf-font-display, sans-serif);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}
.cf-create-tabs button[data-active] { color: var(--cf-magenta, #ff2bb8); }
.cf-create-tab-glyph {
  display: block;
  width: 16px;
  height: 16px;
  box-sizing: border-box;
  border: 1.5px solid currentColor;
  color: var(--cf-ink-dim, #a89cc8);
}
/* clip-path crops the border away, so the star needs a fill of its own -
   currentColor tracks the dim/active label color */
.cf-create-tab-glyph-generate { clip-path: polygon(50% 0, 61% 35%, 100% 35%, 68% 57%, 80% 100%, 50% 72%, 20% 100%, 32% 57%, 0 35%, 39% 35%); background: currentColor; border: 0; }
.cf-create-tab-glyph-code { border-radius: 2px; }
.cf-create-tab-glyph-code::after { content: '</>'; display: block; margin-top: 1px; font: 700 7px/12px var(--cf-font-mono, monospace); text-align: center; }
.cf-create-tab-glyph-art { border-radius: 50% 50% 50% 2px; transform: rotate(-45deg); }
.cf-create-tab-glyph-test { border-radius: 50%; }
.cf-create-tabs button[data-active] .cf-create-tab-glyph { background: var(--cf-magenta, #ff2bb8); border-color: var(--cf-magenta, #ff2bb8); color: #160410; }
.cf-create-drawer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 59px;
  z-index: 10004;
  background: var(--cf-bg-card, #15102a);
  border-top: 1px solid var(--cf-bg-line, rgba(245, 236, 255, .08));
  display: flex;
  flex-direction: column;
}
.cf-create-drawer[hidden] { display: none; }
/* the peek row is the sole tap target - the drag-bar handle stacked another
   20px on the collapsed drawer, which overlapped workspace content on the
   phone Test/Code tabs */
.cf-create-drawer-handle { display: none; }
.cf-create-drawer-peek {
  min-height: 28px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  background: transparent;
  border: none;
  color: var(--cf-ink-dim, #a89cc8);
  font-family: var(--cf-font-mono, monospace);
  font-size: 11px;
  text-align: left;
  cursor: pointer;
}
.cf-create-drawer-content { display: none; max-height: min(58vh, 460px); overflow: auto; padding: 0 12px 12px; }
.cf-create-drawer[data-expanded] .cf-create-drawer-content { display: block; }
.cf-create-drawer-content .builder-rebuild-box { margin-bottom: 10px; }
.cf-create-drawer-content .builder-auto-rebuild-toggle { margin: 0 0 10px; }
.cf-create-drawer-content .builder-emu-serial-wrap { display: block !important; width: 100%; }
.cf-create-drawer-content .builder-emu-serial-output { height: 180px; }

@media (max-width: 768px) {
  body.cf-create .cf-create-tabs { display: flex; }
  /* one workspace at a time: the activity bar and sidebar leave the
     grid entirely (the tabs + drawer replace them), so the split-pane
     failure mode cannot render at phone width */
  body.cf-create .studio-activity-bar,
  body.cf-create .studio-sidebar { display: none; }
  body.cf-create .studio-status-bar { display: none; }
  body.cf-create #studio-layout { grid-template-columns: 1fr !important; }
  body.cf-create #builder-split-panes { display: block; }
  /* clear the 59px tab bar PLUS the ~29px collapsed console peek so the
     bottom of the workspace (disclosure copy, last code lines) can always
     scroll out from under the fixed drawer */
  body.cf-create { padding-bottom: 100px; }
  /* the legacy desktop-hint toast rides above the tab bar AND the drawer
     peek band - a transient toast must never be click-shadowed by the
     persistent console peek (z 10004) */
  body.cf-create .mobile-build-toast { bottom: 112px; z-index: 10006; }
}

/* ── Quick Draw: the zero-code rung ───────────────────────────────── */

.cf-quickdraw {
  max-width: 720px;
  margin: 18px auto 40px;
  padding: 0 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cf-quickdraw h1 { font-family: var(--cf-font-display); }
.cf-quickdraw-stage {
  background: var(--cf-bg-card);
  border: 1px solid var(--cf-bg-line);
  padding: 12px;
  display: flex;
  justify-content: center;
}
#cf-qd-canvas {
  width: 100%;
  max-width: 640px;
  aspect-ratio: 2 / 1;
  image-rendering: pixelated;
  background: #000;
  border: 1px solid var(--cf-bg-line);
  touch-action: none;
  cursor: crosshair;
}
.cf-quickdraw-tools {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.cf-quickdraw-tools button {
  flex: 1 1 auto;
  min-height: 48px;
  min-width: 72px;
  background: var(--cf-bg-card);
  border: 1px solid var(--cf-bg-line);
  color: var(--cf-ink-dim);
  font-family: var(--cf-font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
}
.cf-quickdraw-tools button[data-active],
.cf-quickdraw-tools button[aria-pressed="true"] {
  color: var(--cf-cyan);
  border-color: var(--cf-cyan);
}
.cf-quickdraw-frames {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.cf-qd-frame-chip {
  min-width: 44px;
  min-height: 44px;
  background: transparent;
  border: 1px solid var(--cf-bg-line);
  color: var(--cf-ink-dim);
  font-family: var(--cf-font-mono);
  font-size: 12px;
  cursor: pointer;
}
.cf-qd-frame-chip[data-active] { color: var(--cf-magenta); border-color: var(--cf-magenta); }
.cf-qd-frame-add { color: var(--cf-green); }
.cf-quickdraw-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}
.cf-quickdraw-send {
  min-height: 48px;
  padding: 0 22px;
  background: var(--cf-magenta);
  border: none;
  color: #14040f;
  font-family: var(--cf-font-display);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
}
.cf-quickdraw-more {
  font-family: var(--cf-font-mono);
  font-size: 12px;
  color: var(--cf-cyan);
  text-decoration: none;
  padding: 12px 0;
}
.cf-quickdraw-nudge {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--cf-font-mono);
  font-size: 11px;
  color: var(--cf-green);
  border: 1px solid rgba(57, 255, 20, .25);
  padding: 10px 12px;
  margin: 0;
}
.cf-quickdraw-nudge[hidden] { display: none; }
.cf-quickdraw-nudge button {
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--cf-bg-line);
  color: var(--cf-ink-dim);
  min-width: 32px;
  min-height: 32px;
  cursor: pointer;
}

/* ── studio shell: top bar + tool-tab rail + status bar ─────────────
   The /create/ studio chrome in the settled product-space language.
   This section owns the SHELL only - workspace pane internals keep
   their studio.css styling. Kit tokens exclusively; no new colors or
   faces. */

:root {
  /* rail column width - studio.css and the sidebar-resize JS read this
     so the grid template stays in one place */
  --cf-studio-rail-w: 56px;
}

body.cf-create {
  background: var(--cf-bg-deep);
}

/* top bar */
.cf-studio-topbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 9px 18px;
  background: rgba(8, 5, 15, .9);
  border-bottom: 1px solid rgba(255, 43, 184, .18);
}
.cf-studio-back {
  background: transparent;
  border: none;
  padding: 6px 0;
  font-family: var(--cf-font-mono);
  font-size: 12px;
  color: var(--cf-cyan);
  cursor: pointer;
  white-space: nowrap;
}
.cf-studio-back:hover { text-decoration: underline; }
.cf-studio-project {
  display: inline-block;
  font-family: var(--cf-font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--cf-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  max-width: 34ch;
}
.cf-studio-project[hidden] { display: none; }
.cf-studio-topbar-spacer { flex: 1; }
.cf-studio-device {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--cf-font-mono);
  font-size: 10.5px;
  color: var(--cf-ink-dim);
  white-space: nowrap;
}
.cf-studio-device[hidden] { display: none; }
.cf-studio-device-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cf-green);
  box-shadow: 0 0 6px var(--cf-green);
  flex: none;
}

/* draft/save readouts */
.cf-studio-draft-badge {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 2px 7px;
  border: 1px dashed var(--cf-yellow);
  border-radius: 4px;
  background: transparent;
  color: var(--cf-yellow);
  font-family: var(--cf-font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1;
}
.cf-studio-draft-badge[hidden] { display: none; }
.cf-studio-save-status {
  font-family: var(--cf-font-mono);
  font-size: 10.5px;
  color: var(--cf-ink-dim);
  white-space: nowrap;
}
.cf-studio-save-status[hidden] { display: none; }
.cf-studio-save {
  min-width: 54px;
  min-height: 28px;
  padding: 5px 11px;
  border: 1px solid rgba(104, 225, 253, .42);
  border-radius: 3px;
  background: rgba(104, 225, 253, .06);
  color: var(--cf-cyan);
  font-family: var(--cf-font-mono);
  font-size: 10.5px;
  font-weight: 700;
  cursor: pointer;
}
.cf-studio-save:hover { background: rgba(104, 225, 253, .13); }
.cf-studio-save:focus-visible { outline: 2px solid var(--cf-cyan); outline-offset: 2px; }
.cf-studio-save.is-saved { border-color: rgba(80, 250, 123, .5); color: var(--cf-green); }

/* primary send action - chamfered neon per the kit's shape language.
   border stays 1px solid transparent so the closed-beta treatment
   (dashed border + lock, studio.css) still lands when gated. */
.cf-studio-topbar .cf-studio-send {
  font-family: var(--cf-font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 8px 16px;
  border: 1px solid transparent;
  border-radius: 0;
  color: #08050f;
  background: var(--cf-magenta);
  clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), inset 0 -3px 0 rgba(0, 0, 0, .3);
  cursor: pointer;
  white-space: nowrap;
}
.cf-studio-topbar .cf-studio-send:hover { filter: brightness(1.12); }
.cf-studio-topbar .cf-studio-send svg.icon { width: 14px; height: 14px; }
.cf-studio-gear { display: none; }

/* project asset tabs - outside the workspace grid, inset to align with
   the workspace span between the rail and persistent emulator column */
.cf-project-asset-strip {
  display: flex;
  align-items: stretch;
  min-height: 38px;
  margin: 0 var(--cf-studio-emulator-w, 421px) 0 var(--cf-studio-rail-w, 56px);
  padding: 0 14px;
  background: var(--cf-bg-page);
  border-bottom: 1px solid var(--cf-bg-line);
  font-family: var(--cf-font-mono);
}
.cf-project-asset-tabs {
  display: flex;
  align-items: stretch;
  min-width: 0;
  overflow-x: auto;
}
.cf-project-asset-tab-shell {
  display: inline-flex;
  flex: none;
  border-left: 1px solid var(--cf-bg-line);
}
.cf-project-asset-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  padding: 0 13px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--cf-ink-dim);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
  white-space: nowrap;
}
.cf-project-asset-tab:hover { color: var(--cf-ink); }
.cf-project-asset-tab.active {
  background: rgba(104, 225, 253, .1);
  color: var(--cf-cyan);
  box-shadow: inset 0 -2px 0 var(--cf-cyan);
}
.cf-project-asset-close {
  width: 24px;
  padding: 0;
  border: 0;
  border-right: 1px solid var(--cf-bg-line);
  border-radius: 0;
  background: transparent;
  color: var(--cf-ink-mute);
  font: 12px var(--cf-font-mono);
  cursor: pointer;
}
.cf-project-asset-close:hover,
.cf-project-asset-close:focus-visible { background: rgba(255, 255, 255, .06); color: var(--cf-ink); }
.cf-project-asset-new {
  padding: 2px 4px;
  background: var(--cf-cyan);
  color: var(--cf-bg-deep);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1;
}
.cf-project-asset-hint {
  align-self: center;
  margin-left: auto;
  padding-left: 18px;
  color: var(--cf-ink-mute);
  font-size: 10px;
  white-space: nowrap;
}

/* tool-tab rail */
.studio-activity-bar {
  background: var(--cf-bg-page);
  border-right: 1px solid var(--cf-bg-line);
  padding: 0;
  gap: 0;
  align-items: stretch;
}
.studio-activity-bar .activity-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 104px;
  padding: 10px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--cf-ink-dim);
  font-family: var(--cf-font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
.studio-activity-bar .activity-button:hover {
  color: var(--cf-ink);
  background: rgba(245, 236, 255, .03);
}
.studio-activity-bar .activity-button.active {
  color: var(--cf-bg-deep, #08050f);
  background: var(--cf-cyan);
}
.studio-activity-bar .activity-button.comfort-dimmed { opacity: .48; }
/* pane chrome onto kit tokens (internals untouched) */
#studio-layout {
  background: var(--cf-bg-deep);
  border-top-color: var(--cf-bg-line);
  border-bottom-color: var(--cf-bg-line);
}
.studio-sidebar {
  background: var(--cf-bg-page);
  border-right: 1px solid var(--cf-bg-line);
}

/* status bar (compile + device state keep their ids and wiring) */
.studio-status-bar {
  background: rgba(8, 5, 15, .92);
  border-top: 1px solid var(--cf-bg-line);
  font-family: var(--cf-font-mono);
  font-size: 11px;
  color: var(--cf-ink-dim);
}
.studio-status-bar .button {
  border-radius: 0;
  font-family: var(--cf-font-mono);
  font-size: 11px;
  background: transparent;
  border: 1px solid var(--cf-bg-line);
  color: var(--cf-ink-dim);
}
.studio-status-bar .button:hover {
  color: var(--cf-cyan);
  border-color: rgba(104, 225, 253, .45);
  background: rgba(104, 225, 253, .05);
}

/* Settings workspace main panel (hosts the re-homed comfort selector) */
.cf-settings-main {
  max-width: 760px;
  padding: 26px 30px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cf-settings-block {
  padding: 16px 0;
  border-bottom: 1px solid var(--cf-bg-line);
}
.cf-settings-block h2 {
  margin: 0 0 6px;
  font-family: var(--cf-font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--cf-ink);
}
.cf-settings-block h3 {
  margin: 0 0 6px;
  font-family: var(--cf-font-display);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cf-ink);
}
.cf-settings-block p {
  margin: 0 0 10px;
  font-family: var(--cf-font-mono);
  font-size: 11.5px;
  line-height: 1.65;
  color: var(--cf-ink-dim);
  max-width: 52ch;
}
.cf-settings-block .comfort-level-selector { align-items: flex-start; }
.cf-settings-block h2 { margin: 0 0 10px; font-family: var(--cf-font-display); font-size: 11px; letter-spacing: .12em; color: var(--cf-ink); }
.cf-settings-name { width: min(100%, 620px); font-family: var(--cf-font-display); font-size: 18px; }
.cf-settings-chips { display: flex; flex-wrap: wrap; gap: 9px; }
.cf-settings-category-chip,
.cf-settings-need-chip { min-height: 30px; padding: 6px 12px; border: 1px solid currentColor; border-radius: 999px; background: transparent; font-family: var(--cf-font-mono); font-size: 10px; letter-spacing: .06em; }
.cf-settings-category-chip { cursor: pointer; }
.cf-settings-category-chip.is-games { color: var(--cf-orange, #ff9c3a); }
.cf-settings-category-chip.is-tools { color: var(--cf-cyan, #68e1fd); }
.cf-settings-category-chip.is-screensavers { color: var(--cf-magenta, #fa4bc8); }
.cf-settings-category-chip.is-games[aria-pressed="true"] { background: var(--cf-orange, #ff9c3a); color: var(--cf-bg-deep, #08050f); }
.cf-settings-category-chip.is-tools[aria-pressed="true"] { background: var(--cf-cyan, #68e1fd); color: var(--cf-bg-deep, #08050f); }
.cf-settings-category-chip.is-screensavers[aria-pressed="true"] { background: var(--cf-magenta, #fa4bc8); color: var(--cf-bg-deep, #08050f); }
.cf-settings-category-chip.is-legacy { color: var(--cf-ink-dim); cursor: default; }
.cf-settings-need-chip { min-height: 0; padding: 4px 9px; color: var(--cf-ink-dim); }
.cf-settings-empty { color: var(--cf-ink-mute); font-family: var(--cf-font-mono); font-size: 11px; }
.cf-settings-secondary-label { display: block; margin-top: 12px; color: var(--cf-ink-mute); font: 10px var(--cf-font-mono); }
.cf-settings-secondary-select { width: min(100%, 280px); margin-top: 5px; }
.cf-settings-device-details { margin-top: 13px; color: var(--cf-ink-dim); font: 11px var(--cf-font-mono); }
.cf-settings-device-grid { display: grid; grid-template-columns: 100px minmax(0, 320px); gap: 8px 12px; align-items: center; padding-top: 10px; }
.cf-settings-publish { border: 0; background: var(--cf-magenta, #fa4bc8); color: var(--cf-bg-deep, #08050f); clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); font-family: var(--cf-font-display); font-weight: 800; }
.cf-settings-publish-note { margin-top: 9px !important; }
.cf-settings-captures { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; }
.cf-settings-capture { position: relative; width: 174px; padding: 8px; border: 1px solid var(--cf-bg-line); background: var(--cf-bg-deep); }
.cf-settings-capture.is-thumbnail { border: 1px dashed var(--cf-yellow, #f1d817); }
.cf-settings-capture img { display: block; width: 160px; height: 80px; object-fit: contain; background: #000; image-rendering: pixelated; }
.cf-settings-capture-tag { position: absolute; top: 12px; left: 12px; padding: 2px 5px; background: var(--cf-yellow, #f1d817); color: #08050f; font: 8px var(--cf-font-display); }
.cf-settings-loop-tag { left: auto; right: 12px; background: var(--cf-ink); }
.cf-settings-capture-remove { position: absolute; top: 9px; right: 9px; min-width: 22px; min-height: 22px; border: 0; background: #08050f; color: var(--cf-ink); cursor: pointer; }
.cf-settings-capture.is-loop .cf-settings-capture-remove { top: 34px; }
.cf-settings-capture-controls { display: flex; justify-content: center; gap: 5px; margin-top: 7px; }
.cf-settings-capture-controls button { border: 0; background: transparent; color: var(--cf-cyan, #68e1fd); font: 8px var(--cf-font-display); cursor: pointer; }
.cf-settings-capture-controls button:disabled { opacity: .3; cursor: default; }
.cf-settings-capture-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 15px; }
.cf-settings-capture-loop { background: var(--cf-bg-elev); color: var(--cf-ink); border: 1px solid var(--cf-bg-line); }
.cf-settings-capture-actions button:disabled { opacity: .42; cursor: not-allowed; }
.cf-settings-capture-hint { margin-top: 9px !important; }
.cf-settings-sharing-row { display: flex; align-items: center; gap: 10px; min-height: 30px; color: var(--cf-ink-dim); font: 11.5px/1.45 var(--cf-font-mono); cursor: pointer; }
.cf-toggle-input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.cf-toggle { position: relative; flex: 0 0 30px; width: 30px; height: 16px; border-radius: 999px; background: var(--cf-bg-elev); border: 1px solid var(--cf-bg-line); transition: background-color .15s ease; }
.cf-toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 10px; height: 10px; border-radius: 50%; background: var(--cf-ink-mute); transition: transform .15s ease, background-color .15s ease; }
.cf-toggle-input:checked + .cf-toggle { background: var(--cf-cyan); border-color: var(--cf-cyan); }
.cf-toggle-input:checked + .cf-toggle::after { transform: translateX(14px); background: var(--cf-bg-deep); }
.cf-toggle-input:focus-visible + .cf-toggle { outline: 2px solid var(--cf-ink); outline-offset: 3px; }
.cf-settings-sharing-hint { margin: 8px 0 0 40px !important; max-width: none !important; }
@media (prefers-reduced-motion: reduce) { .cf-toggle, .cf-toggle::after { transition: none; } }
@media (max-width: 520px) { .cf-settings-captures { display: grid; grid-template-columns: 1fr; } .cf-settings-capture { width: 100%; } .cf-settings-capture img { width: 100%; height: auto; aspect-ratio: 2; } }
@media (max-width: 520px) { .cf-settings-sharing-row { align-items: flex-start; padding: 4px 0; } .cf-settings-sharing-hint { margin-left: 0 !important; } }
@media (max-width: 520px) { .cf-settings-device-grid { grid-template-columns: 1fr; } }

/* phone: compact top bar (the thumb tabs stay the navigation) */
@media (max-width: 768px) {
  .cf-studio-topbar { gap: 8px; padding: 8px 10px; }
  .cf-studio-back { font-size: 0; min-width: 28px; min-height: 28px; padding: 0; }
  .cf-studio-back::after { content: '<'; font-size: 18px; }
  .cf-studio-project { font-size: 13px; max-width: 34vw; }
  .cf-studio-draft-badge { display: none; }
  .cf-studio-save-status,
  .cf-studio-device { display: none; }
  .cf-studio-save { min-width: 48px; min-height: 30px; padding: 5px 8px; }
  .cf-studio-gear { display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 1px solid var(--cf-bg-line); background: transparent; color: var(--cf-ink); font-size: 16px; cursor: pointer; }
  .cf-studio-topbar .cf-studio-send { padding: 7px 9px; font-size: 0; min-height: 30px; }
  .cf-studio-topbar .cf-studio-send svg.icon { width: 14px; height: 14px; margin: 0; }
  .cf-studio-topbar .cf-studio-send::after { content: 'SEND'; font-size: 9.5px; }
  .app-code-phone-note { display: block; margin: auto 12px 10px; color: var(--cf-ink-mute); font-family: var(--cf-font-mono); font-size: 10px; line-height: 1.45; }
  .cf-phone-settings-header { display: flex; align-items: center; gap: 12px; min-height: 50px; padding: 0 14px; border-bottom: 1px solid var(--cf-bg-line); font-family: var(--cf-font-display); font-size: 14px; font-weight: 700; }
  .cf-phone-settings-header button { min-height: 40px; padding: 0; border: 0; background: transparent; color: var(--cf-ink); font: inherit; cursor: pointer; }
  body.cf-phone-settings-sheet #cf-create-tabs { display: none; }
  body.cf-phone-settings-sheet .cf-create-drawer { display: none; }
  body.cf-phone-settings-sheet .main-panel[data-panel="settings"].active { position: fixed; inset: 0; z-index: 10006; display: block; overflow-y: auto; background: var(--cf-bg-deep, #08050f); }
  body.cf-phone-settings-sheet .main-panel[data-panel="settings"] .cf-settings-main { padding: 12px 18px 30px; }
  .cf-phone-settings-controls { margin-top: 12px; }
  .cf-phone-settings-controls .sidebar-panel.active { display: block; }
  .cf-phone-settings-controls details { padding: 12px 0; border-bottom: 1px solid var(--cf-bg-line); }
  .cf-phone-settings-controls summary { cursor: pointer; font-family: var(--cf-font-display); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
  .cf-phone-settings-controls .box { margin-top: 10px; }
}

/* mid widths (769-992px): the rail lays out as a horizontal row - let
   the text tabs size to their labels */
@media (max-width: 992px) {
  .cf-project-asset-strip { display: none; }
  .studio-activity-bar { padding: 0 0.5rem; gap: 0; align-items: center; }
  .studio-activity-bar .activity-button {
    width: auto;
    min-height: 44px;
    padding: 0.5rem 0.75rem;
    writing-mode: horizontal-tb;
    transform: none;
  }
}
/* Failsafe: if boot JS dies before removing the class, reveal anyway. */
@keyframes cf-reconcile-reveal {
  to { visibility: visible; }
}
body.cf-create-reconciling main,
body.cf-create-reconciling #cf-create-tabs,
body.cf-create-reconciling #cf-create-drawer {
  visibility: hidden;
  animation: cf-reconcile-reveal 0s 4s forwards;
}