/* catalog.css — Surface 1 + Surface 2 styles for the EMET prototype.
   Built on tokens.css. Phone-first; mobile breakpoint ≈ 412px.
   Sections:
     1. Phone frame
     2. Catalog browser (Surface 1)
     3. Create-entity surface (Surface 2)
     4. Static walk-through frames
     5. Desktop adaptation
*/

/* ============================================================
   1. Phone frame
   ============================================================ */
.phone {
  width: 390px;
  height: 760px;
  background: var(--surface);
  border-radius: 38px;
  border: 10px solid #1a1a1a;
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.35), 0 0 0 1px rgba(0,0,0,.15);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  --phone-w: 370px;
}
.phone--tall { height: 820px; }
.phone__statusbar {
  height: 36px;
  padding: 0 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-text);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  flex-shrink: 0;
}
.phone__statusbar .bars {
  display: flex; gap: 2px; align-items: flex-end;
}
.phone__statusbar .bars i { width: 3px; background: var(--ink); border-radius: 1px; display: block; }
.phone__notch {
  position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
  width: 110px; height: 22px; background: #1a1a1a; border-radius: 0 0 14px 14px;
  z-index: 5;
}
.phone__body { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; }

/* ============================================================
   2. Catalog browser
   ============================================================ */
.cb-shell {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
  position: relative; background: var(--surface);
  font-family: var(--font-text);
}

/* Top bar */
.cb-topbar {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3); height: 44px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  flex-shrink: 0;
}
.cb-back, .cb-search-btn {
  width: 32px; height: 32px; border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; color: var(--ink); cursor: pointer;
}
.cb-back:disabled { color: var(--ink-subtle); cursor: default; }
.cb-back:hover:not(:disabled), .cb-search-btn:hover { background: var(--surface-sunk); }
.cb-crumbs {
  flex: 1; min-width: 0; display: flex; align-items: center;
  gap: 4px; overflow: hidden;
  font-size: var(--text-xs); color: var(--ink-muted);
}
.cb-crumb {
  display: inline-flex; align-items: center; gap: 4px;
  white-space: nowrap; max-width: 110px; overflow: hidden; text-overflow: ellipsis;
}
.cb-crumb--current { color: var(--ink); font-weight: 600; }
.cb-crumb-sep { color: var(--ink-subtle); padding: 0 2px; }

/* Stage */
.cb-stage {
  flex: 1; min-height: 0; position: relative;
  display: flex; align-items: center; justify-content: center;
  touch-action: none; user-select: none;
  -webkit-user-select: none;
  background:
    radial-gradient(circle at 50% 50%, var(--surface) 60%, var(--surface-sunk) 100%);
}

/* Focus card */
.cb-focus {
  position: relative; width: 290px;
  background: var(--surface-raised);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-2);
  padding: var(--space-4) var(--space-4) var(--space-3);
  display: flex; flex-direction: column; gap: var(--space-3);
  cursor: grab;
}
.cb-focus:active { cursor: grabbing; }
.cb-focus-rail {
  position: absolute; top: 0; left: 0; bottom: 0; width: 2px;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  opacity: .65;
}
.cb-focus-head { display: flex; align-items: center; justify-content: space-between; }
.cb-layer-stamp {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  text-transform: uppercase; letter-spacing: var(--tracking-caps);
  color: var(--ink-muted); padding: 2px 6px;
  border: 1px solid var(--line); border-radius: var(--radius-xs);
  background: var(--surface);
}
.cb-icon-btn {
  width: 28px; height: 28px; border: 0; background: transparent;
  border-radius: var(--radius-sm); cursor: pointer; color: var(--ink-muted);
  display: inline-flex; align-items: center; justify-content: center;
}
.cb-icon-btn:hover { background: var(--surface-sunk); color: var(--ink); }

.cb-focus-image {
  position: relative; align-self: center;
  margin: var(--space-1) 0;
}
.cb-thumb {
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md);
  position: relative; overflow: hidden;
  box-shadow: 0 6px 14px -10px rgba(0,0,0,.35), inset 0 0 0 1px rgba(0,0,0,.08);
  --frame-w: 3px;
}
/* ── Ownership treatment (v9.2): frame, not fade ───────────────
   Owned  = solid inset ring, --positive
   Partial = dashed inset ring (::after for the dash pattern), --warn
   Missing = clean baseline, no frame, no badge
   Reskins via semantic tokens; survives at every scale by --frame-w. */
.cb-thumb[data-inv="owned"] {
  box-shadow: 0 6px 14px -10px rgba(0,0,0,.35),
              inset 0 0 0 var(--frame-w) var(--positive);
}
.cb-thumb[data-inv="partial"]::after {
  content: '';
  position: absolute; inset: 0;
  border: var(--frame-w) dashed var(--warn);
  border-radius: inherit;
  pointer-events: none;
  z-index: 3;
}
.cb-thumb-glyph {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 600;
  color: rgba(255,255,255,.92);
  letter-spacing: var(--tracking-wide);
  position: relative; z-index: 2;
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.cb-thumb-stripes {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    135deg,
    transparent 0, transparent 11px,
    rgba(255,255,255,.08) 11px, rgba(255,255,255,.08) 12px
  );
  pointer-events: none;
}
.cb-invdot {
  position: absolute; bottom: -6px; right: -6px;
  width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 14px; font-weight: 700;
  box-shadow: 0 2px 6px rgba(0,0,0,.2), 0 0 0 3px var(--surface-raised);
}
.cb-focus-text { text-align: center; }
.cb-focus-title {
  font-family: var(--font-display); font-weight: var(--display-weight);
  font-size: 20px; line-height: 1.15; letter-spacing: var(--display-tracking);
  margin: 0; color: var(--ink);
  text-wrap: pretty;
}
.cb-focus-sub {
  margin: 6px 0 0; font-size: var(--text-xs);
  color: var(--ink-muted); line-height: 1.4;
}

.cb-focus-meta {
  display: flex; flex-direction: column; gap: 5px;
  padding: var(--space-2) var(--space-3);
  background: var(--surface-sunk);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono); font-size: 11px;
}
.cb-meta-row { display: flex; justify-content: space-between; gap: var(--space-3); }
.cb-meta-k { color: var(--ink-subtle); text-transform: uppercase; letter-spacing: var(--tracking-wide); font-size: 10px; }
.cb-meta-v { color: var(--ink); }

/* Actions */
.cb-actions { display: flex; flex-direction: column; gap: 6px; margin-top: 2px; }
.cb-action {
  font-family: var(--font-text);
  font-size: var(--text-sm);
  font-weight: var(--caps-weight);
  letter-spacing: var(--tracking-wide);
  min-height: 38px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  border-radius: var(--radius-sm);
  cursor: pointer;
  padding: 0 var(--space-3);
}
.cb-action:hover { background: var(--surface-sunk); }
.cb-action--primary {
  background: var(--accent); color: var(--accent-ink); border-color: var(--accent);
  min-height: 44px; font-size: var(--text-base);
}
.cb-action-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.cb-action-row button { width: 100%; }

/* Stubs (periphery) */
.cb-stub-zone {
  position: absolute;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.cb-stub-zone--top    { top: 8px; left: 0; right: 0; padding: 0 var(--space-3); }
.cb-stub-zone--bottom { bottom: 8px; left: 0; right: 0; padding: 0 var(--space-3); }
.cb-stub-zone--left   { left: -20px; top: 50%; transform: translateY(-50%); }
.cb-stub-zone--right  { right: -20px; top: 50%; transform: translateY(-50%); }

.cb-stub {
  display: flex; align-items: stretch; gap: 0;
  border: 1px solid var(--line);
  background: var(--surface-raised);
  border-radius: var(--radius-sm);
  box-shadow: 0 2px 6px -3px rgba(0,0,0,.15);
  overflow: hidden;
  font-size: var(--text-xs);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard);
}
.cb-stub:hover { background: var(--surface-sunk); transform: translateY(-1px); }
.cb-stub-rail { width: 3px; flex-shrink: 0; opacity: 0; }
.cb-stub-inner { display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 8px; }
.cb-stub-thumb {
  width: 28px; height: 28px; border-radius: var(--radius-xs);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 9px; color: rgba(255,255,255,.92);
  font-weight: 600; flex-shrink: 0;
  position: relative; overflow: hidden;
  --frame-w: 1.5px;
}
.cb-stub-thumb[data-inv="owned"] {
  box-shadow: inset 0 0 0 var(--frame-w) var(--positive);
}
.cb-stub-thumb[data-inv="partial"]::before {
  content: '';
  position: absolute; inset: 0;
  border: var(--frame-w) dashed var(--warn);
  border-radius: inherit;
  pointer-events: none;
  z-index: 3;
}
.cb-stub-thumb::after {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(135deg, transparent 0, transparent 5px, rgba(255,255,255,.1) 5px, rgba(255,255,255,.1) 6px);
}
.cb-stub-thumb span { position: relative; z-index: 1; }
.cb-stub-body { min-width: 0; }
.cb-stub-eyebrow {
  font-size: 9px; text-transform: uppercase; letter-spacing: var(--tracking-caps);
  color: var(--ink-subtle); font-weight: 600;
}
.cb-stub-name { font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.cb-stub-sub { font-family: var(--font-mono); font-size: 10px; color: var(--ink-subtle); text-transform: lowercase; }

/* Top/bottom stubs take horizontal pill shape */
.cb-stub--top, .cb-stub--bottom { max-width: 280px; }
/* Left/right are vertical "edge" stubs — narrow, peek out */
.cb-stub--left, .cb-stub--right {
  flex-direction: column; width: 56px; padding: 8px 6px; text-align: center;
}
.cb-stub--left .cb-stub-inner, .cb-stub--right .cb-stub-inner {
  flex-direction: column; gap: 4px; padding: 0;
}
.cb-stub--left .cb-stub-name, .cb-stub--right .cb-stub-name {
  font-size: 10px; max-width: 44px; line-height: 1.15;
  white-space: normal; text-align: center;
}
.cb-stub--left .cb-stub-sub, .cb-stub--right .cb-stub-sub { display: none; }
.cb-stub--left .cb-stub-rail, .cb-stub--right .cb-stub-rail {
  width: auto; height: 3px;
}

/* BOM strip (bottom) is different from a single stub */
.cb-bom-strip {
  width: 100%;
  padding: 6px 10px 8px;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: 0 -2px 8px -4px rgba(0,0,0,.15);
}
.cb-bom-thumbs {
  display: flex; gap: 4px; padding-top: 6px;
}
.cb-bom-thumb {
  width: 36px; height: 36px; border-radius: var(--radius-xs);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.92);
  font-family: var(--font-mono); font-size: 9px;
  flex-shrink: 0; position: relative; overflow: hidden;
  --frame-w: 2px;
}
.cb-bom-thumb[data-inv="owned"] {
  box-shadow: inset 0 0 0 var(--frame-w) var(--positive);
}
.cb-bom-thumb[data-inv="partial"]::before {
  content: '';
  position: absolute; inset: 0;
  border: var(--frame-w) dashed var(--warn);
  border-radius: inherit;
  pointer-events: none;
  z-index: 3;
}
.cb-bom-thumb span:first-child { position: relative; z-index: 1; }
.cb-bom-thumb::after {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(135deg, transparent 0, transparent 5px, rgba(255,255,255,.1) 5px, rgba(255,255,255,.1) 6px);
}
.cb-bom-dot {
  position: absolute; top: 3px; right: 3px;
  width: 6px; height: 6px; border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(255,255,255,.6);
  z-index: 2;
}
.cb-bom-more {
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  background: var(--surface-sunk); border-radius: var(--radius-xs);
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-muted);
}

/* Gesture hints (the small "pull down · parent" arrows) */
.cb-gesture-hint {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-mono); font-size: 10px;
  color: var(--ink-subtle); text-transform: uppercase; letter-spacing: var(--tracking-wide);
}
.cb-gesture-hint--top { display: block; text-align: center; margin-top: 4px; }
.cb-gesture-hint--bottom { display: flex; justify-content: space-between; align-items: center; }

/* Picker overlay */
.cb-picker {
  position: absolute; inset: 0;
  background: var(--surface-overlay);
  display: flex; align-items: flex-end; justify-content: center;
  z-index: 10;
}
.cb-picker-card {
  width: 100%;
  background: var(--surface-raised);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: var(--space-4);
  box-shadow: 0 -8px 30px -10px rgba(0,0,0,.3);
  animation: cb-sheet-in 280ms cubic-bezier(0.16,1,0.3,1);
}
@keyframes cb-sheet-in { from { transform: translateY(40%); } to { transform: translateY(0); } }
.cb-picker-head { margin-bottom: var(--space-3); }
.cb-picker-name { font-family: var(--font-display); font-weight: 600; font-size: var(--text-md); margin-top: 4px; }
.cb-picker-list { display: flex; flex-direction: column; gap: var(--space-2); }
.cb-picker-row {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3); border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: var(--surface);
  cursor: pointer; text-align: left; min-height: 44px;
}
.cb-picker-row:hover { background: var(--surface-sunk); }
.cb-picker-row--remembered {
  background: var(--positive-soft);
  border-color: var(--positive);
}
.cb-picker-row--remembered:hover {
  background: var(--positive-soft);
  filter: brightness(0.98);
}
.cb-picker-pip {
  display: inline-block;
  margin-left: var(--space-2);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--positive);
  background: var(--surface);
  padding: 1px 5px;
  border-radius: var(--radius-xs);
  vertical-align: middle;
}
.cb-picker-row .cb-stub-thumb { width: 36px; height: 36px; font-size: 10px; }
.cb-picker-row-name { font-weight: 600; }
.cb-picker-row-sub { font-family: var(--font-mono); font-size: 10px; color: var(--ink-subtle); text-transform: lowercase; }

.cb-firsthint {
  position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
  background: var(--surface-inverse); color: var(--ink-inverse);
  font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: var(--tracking-caps);
  padding: 6px 8px 6px 12px; border-radius: var(--radius-pill);
  display: flex; align-items: center; gap: 6px; z-index: 8;
  box-shadow: 0 6px 20px -8px rgba(0,0,0,.4);
  opacity: 0.85;
  pointer-events: auto;
}
.cb-firsthint button { background: transparent; border: 0; color: inherit; font-size: 14px; cursor: pointer; padding: 0 2px; }

/* ============================================================
   3. Create-entity surface (Surface 2)
   ============================================================ */
.cs-shell {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
  background: var(--surface);
}
.cs-topbar {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3); height: 48px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.cs-topbar-title {
  flex: 1; font-family: var(--font-display); font-weight: 600;
  font-size: var(--text-md); letter-spacing: var(--display-tracking);
}
.cs-topbar-eyebrow {
  font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: var(--tracking-caps);
  color: var(--ink-subtle); display: block;
}
.cs-close {
  width: 32px; height: 32px; border: 0; background: transparent;
  border-radius: var(--radius-sm); cursor: pointer; color: var(--ink-muted);
  display: inline-flex; align-items: center; justify-content: center;
}
.cs-close:hover { background: var(--surface-sunk); color: var(--ink); }

.cs-body { flex: 1; min-height: 0; overflow: auto; }

/* The two-sided surface — STACKED on mobile, SIDE-BY-SIDE on desktop adaptation */
.cs-panel {
  padding: var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-3);
}
.cs-panel--catalog {
  background: var(--surface-sunk);
  border-bottom: 1px solid var(--line);
  position: relative;
}
.cs-panel--catalog::before {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    -45deg, transparent 0, transparent 24px,
    rgba(20,20,18,.012) 24px, rgba(20,20,18,.012) 25px
  );
  pointer-events: none;
}
.cs-panel--yours { background: var(--surface-raised); }

.cs-panel-eyebrow {
  font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: var(--tracking-caps);
  font-weight: 600; display: flex; align-items: center; gap: var(--space-2);
}
.cs-panel--catalog .cs-panel-eyebrow { color: var(--ink-muted); }
.cs-panel--catalog .cs-panel-eyebrow::after {
  content: '· read-only · EMET truth';
  font-weight: 400; color: var(--ink-subtle);
}
.cs-panel--yours .cs-panel-eyebrow { color: var(--positive); }
.cs-panel--yours .cs-panel-eyebrow::after {
  content: '· yours to author';
  font-weight: 400; color: var(--ink-subtle);
}

.cs-ref-card {
  display: flex; gap: var(--space-3); align-items: center;
}
.cs-ref-card .cb-thumb { width: 68px; height: 68px; flex-shrink: 0; }
.cs-ref-card .cb-thumb-glyph { font-size: 14px; }
.cs-ref-name { font-family: var(--font-display); font-weight: 600; font-size: var(--text-md); margin: 0; line-height: 1.2; }
.cs-ref-sub { font-size: var(--text-xs); color: var(--ink-muted); margin: 4px 0 0; }
.cs-ref-id { font-family: var(--font-mono); font-size: 10px; color: var(--ink-subtle); margin-top: 4px; }

.cs-catalog-attrs {
  display: grid; grid-template-columns: 110px 1fr; gap: 4px 12px;
  font-family: var(--font-mono); font-size: 11px;
  padding: var(--space-2) 0;
  border-top: 1px solid var(--line);
}
.cs-catalog-attrs dt {
  color: var(--ink-subtle); text-transform: uppercase;
  letter-spacing: var(--tracking-wide); font-size: 10px;
}
.cs-catalog-attrs dd { margin: 0; color: var(--ink); }

.cs-seam {
  display: flex; align-items: center; gap: var(--space-2);
  padding: 10px var(--space-4);
  background: var(--surface);
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--line);
  position: relative;
}
.cs-seam-mark {
  font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: var(--tracking-caps);
  font-weight: 700; color: var(--ink);
}
.cs-seam-divider {
  flex: 1; height: 0; border-top: 1px dashed var(--line-strong);
}
.cs-seam-arrow { color: var(--positive); font-family: var(--font-mono); font-weight: 700; }

/* Field rows */
.cs-field {
  display: flex; flex-direction: column; gap: 6px;
}
.cs-field-label {
  font-size: var(--text-xs); font-weight: 600;
  color: var(--ink); display: flex; justify-content: space-between; align-items: baseline;
}
.cs-field-label small { font-weight: 400; color: var(--ink-subtle); font-family: var(--font-mono); font-size: 10px; }
.cs-input {
  font-family: var(--font-text);
  font-size: var(--text-base);
  min-height: var(--hit-min);
  padding: 0 var(--space-3);
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  width: 100%;
}
.cs-textarea {
  font-family: var(--font-text); font-size: var(--text-base);
  padding: 10px var(--space-3); background: var(--surface);
  color: var(--ink); border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); width: 100%; resize: vertical; min-height: 60px;
}
.cs-segment {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  overflow: hidden; min-height: var(--hit-min);
}
.cs-segment button {
  border: 0; border-right: 1px solid var(--line);
  background: var(--surface); color: var(--ink); cursor: pointer;
  font-family: var(--font-text); font-size: var(--text-sm); font-weight: 600;
  padding: 0 var(--space-2);
}
.cs-segment button:last-child { border-right: 0; }
.cs-segment button[aria-pressed="true"] {
  background: var(--accent); color: var(--accent-ink);
}

.cs-inline-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3);
}

/* BOM checklist inside create-Lot */
.cs-bom-list { display: flex; flex-direction: column; gap: 4px; }
.cs-bom-row {
  display: flex; align-items: center; gap: var(--space-2);
  padding: 8px 10px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: var(--surface);
  cursor: pointer;
}
.cs-bom-check {
  width: 22px; height: 22px; border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-xs); display: inline-flex;
  align-items: center; justify-content: center; flex-shrink: 0;
  background: var(--surface);
  font-family: var(--font-mono); font-size: 14px; color: transparent;
}
.cs-bom-row[data-checked="true"] .cs-bom-check {
  background: var(--positive); border-color: var(--positive); color: white;
}
.cs-bom-row[data-missing="true"] .cs-bom-check {
  background: var(--danger-soft); border-color: var(--danger); color: var(--danger);
}
.cs-bom-row[data-missing="true"] .cs-bom-name {
  text-decoration: line-through; color: var(--ink-subtle);
}
.cs-bom-row[data-missing="true"] .cs-bom-thumb { opacity: 0.45; }
.cs-bom-row { transition: background-color 120ms ease; }
.cs-bom-row:hover { background: var(--surface-sunk); }
.cs-bom-thumb {
  width: 28px; height: 28px; border-radius: var(--radius-xs);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 9px; color: white; font-weight: 600;
  flex-shrink: 0;
}
.cs-bom-name { flex: 1; font-size: var(--text-sm); color: var(--ink); }
.cs-bom-meta { font-family: var(--font-mono); font-size: 10px; color: var(--ink-subtle); }

/* Photo slots */
.cs-photos {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
}
.cs-photo-slot {
  aspect-ratio: 1/1;
  background: var(--surface);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 10px; color: var(--ink-subtle);
}
.cs-photo-slot.has { background: var(--surface-sunk); border-style: solid; border-color: var(--line); color: var(--ink-muted); position: relative; overflow: hidden; }
.cs-photo-slot.has::after {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(135deg, transparent 0, transparent 6px, rgba(0,0,0,.04) 6px, rgba(0,0,0,.04) 7px);
}

.cs-footer {
  display: flex; gap: var(--space-2); padding: var(--space-3);
  border-top: 1px solid var(--line);
  background: var(--surface-raised);
  flex-shrink: 0;
}
.cs-footer .cs-btn { flex: 1; }

.cs-btn {
  font-family: var(--font-text); font-weight: var(--caps-weight);
  font-size: var(--text-sm); letter-spacing: var(--tracking-wide);
  min-height: 44px; padding: 0 var(--space-4);
  border: 1px solid var(--line-strong); background: var(--surface);
  color: var(--ink); border-radius: var(--radius-sm); cursor: pointer;
}
.cs-btn--primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

/* ─── EAV-style A/V row (used in Create-one-like-this) ─── */
.cs-av-list {
  display: flex; flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  overflow: hidden;
}
.cs-av {
  display: grid;
  grid-template-columns: 26px 84px 1fr 12px 1fr;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--line);
  min-height: 38px;
  font-family: var(--font-mono); font-size: 11px;
}
.cs-av:last-child { border-bottom: 0; }
.cs-av[data-changed="true"] {
  background: var(--positive-soft);
}
.cs-av-toggle {
  width: 22px; height: 22px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  border-radius: 50%;
  cursor: pointer; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 14px;
  color: var(--ink-subtle);
}
.cs-av[data-changed="true"] .cs-av-toggle {
  background: var(--positive); border-color: var(--positive); color: white;
}
.cs-av-name {
  font-weight: 600;
  text-transform: lowercase;
  color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cs-av-name-input {
  font-family: var(--font-mono); font-size: 11px;
  border: 1px dashed var(--line-strong); background: var(--surface);
  padding: 4px 6px; border-radius: var(--radius-xs);
  min-width: 0; width: 100%;
  font-weight: 600;
}
.cs-av-refv {
  color: var(--ink-subtle);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cs-av-arrow {
  font-family: var(--font-mono); color: var(--ink-subtle);
  text-align: center;
}
.cs-av-newv {
  font-family: var(--font-mono); font-size: 11px;
  border: 1px solid var(--line-strong); background: var(--surface-raised);
  padding: 4px 6px; border-radius: var(--radius-xs);
  min-width: 0; width: 100%;
  color: var(--ink);
}
.cs-av-newv:disabled {
  background: transparent; border-color: var(--line);
  color: var(--ink-subtle);
}
.cs-av[data-changed="true"] .cs-av-newv {
  background: var(--surface); border-color: var(--positive);
  font-weight: 600; color: var(--positive);
}
.cs-av--new .cs-av-toggle {
  background: var(--warn-soft); border-color: var(--warn); color: var(--warn);
}

.cs-add-attr {
  align-self: flex-start;
  min-height: 34px;
  font-size: var(--text-xs);
  padding: 0 var(--space-3);
  border-style: dashed;
}

.cs-disclose {
  font-family: var(--font-text);
  font-size: var(--text-xs); font-weight: 600;
  background: transparent; border: 0; padding: 4px 0;
  color: var(--ink); cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
.cs-disclose small { font-weight: 400; color: var(--ink-subtle); font-family: var(--font-mono); font-size: 10px; }

/* ============================================================
   4. Static walk-through frames
   ============================================================ */
.wt-frame {
  width: 280px; height: 480px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex; flex-direction: column;
  position: relative;
  box-shadow: var(--shadow-1);
  font-family: var(--font-text);
}
.wt-frame .cb-topbar { height: 36px; padding: 4px 10px; }
.wt-frame .cb-focus { width: 200px; padding: 10px; gap: 8px; }
.wt-frame .cb-focus-image .cb-thumb { width: 100px !important; height: 100px !important; }
.wt-frame .cb-focus-title { font-size: 14px; }
.wt-frame .cb-focus-sub { font-size: 10px; }
.wt-frame .cb-focus-meta { font-size: 9px; padding: 4px 6px; }
.wt-frame .cb-meta-k { font-size: 8px; }
.wt-frame .cb-action { min-height: 28px; font-size: 10px; padding: 0 6px; }
.wt-frame .cb-action--primary { min-height: 32px; font-size: 11px; }
.wt-frame .cb-action-row { display: none; }
.wt-frame .cb-stub { font-size: 9px; }
.wt-frame .cb-stub-inner { padding: 3px 6px; gap: 4px; }
.wt-frame .cb-stub-thumb { width: 18px; height: 18px; font-size: 7px; }
.wt-frame .cb-stub-name { font-size: 9px; max-width: 100px; }
.wt-frame .cb-stub-sub, .wt-frame .cb-stub-eyebrow { font-size: 7px; }
.wt-frame .cb-bom-thumbs { gap: 3px; }
.wt-frame .cb-bom-thumb { width: 22px; height: 22px; font-size: 7px; }
.wt-frame .cb-bom-strip { padding: 4px 6px; }
.wt-frame .cb-gesture-hint { font-size: 8px; }
.wt-frame .cb-layer-stamp { font-size: 8px; padding: 1px 4px; }
.wt-frame .cb-invdot { width: 20px; height: 20px; font-size: 10px; bottom: -4px; right: -4px; }

.wt-label {
  position: absolute; top: 8px; left: 8px;
  font-family: var(--font-mono); font-size: 10px;
  font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-caps);
  background: var(--ink); color: var(--ink-inverse);
  padding: 2px 6px; border-radius: var(--radius-xs);
  z-index: 6;
}
.wt-gesture {
  position: absolute; pointer-events: none;
  font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: var(--tracking-caps);
  color: var(--danger); font-weight: 700;
  z-index: 5;
}

/* ============================================================
   Annotation labels (sprinkled around artboards)
   ============================================================ */
.anno {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--ink-muted); line-height: 1.5;
  max-width: 320px;
}
.anno-h {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--text-lg); letter-spacing: var(--display-tracking);
  color: var(--ink); margin: 0 0 var(--space-2);
}
.anno-eyebrow {
  font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: var(--tracking-caps);
  font-weight: 700; color: var(--ink-muted);
  margin: 0 0 var(--space-1);
}
.anno-list { padding-left: 16px; margin: var(--space-2) 0 0; }
.anno-list li { margin: 4px 0; }
.anno-list code { font-family: var(--font-mono); background: var(--surface-sunk); padding: 0 4px; border-radius: 2px; font-size: 10px; }

.card-frame {
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  box-shadow: var(--shadow-1);
}

/* Anatomy callouts */
.callout {
  position: absolute;
  font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: var(--tracking-caps);
  color: var(--ink-muted);
  pointer-events: none;
  display: flex; align-items: center; gap: 4px;
}
.callout-line { display: block; height: 1px; background: var(--ink-muted); width: 30px; }

/* Desktop sketch */
.desktop-mock {
  width: 920px; height: 600px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: grid;
  grid-template-columns: 220px 1fr 240px;
  font-family: var(--font-text);
}
.desktop-mock--create {
  grid-template-columns: 1fr 1fr;
}
.dm-sidebar { background: var(--surface-sunk); border-right: 1px solid var(--line); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.dm-stage { display: flex; align-items: center; justify-content: center; position: relative; }
.dm-aside { background: var(--surface-sunk); border-left: 1px solid var(--line); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }

.dm-mini-list { display: flex; flex-direction: column; gap: 2px; }
.dm-mini-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--radius-sm); font-size: var(--text-xs); cursor: pointer; }
.dm-mini-row[aria-current="true"] { background: var(--surface-raised); font-weight: 600; }
.dm-mini-thumb { width: 18px; height: 18px; border-radius: var(--radius-xs); flex-shrink: 0; }