/* THE STUDIO — THE CHROME LAW (CEO 2026-11-01): the EDITOR chrome is Wix-exact —
   icon toolbar, light panels, Wix blue, cards with subtle shadows, layer rows
   with icons — from study/wix/ + study/blender-proper/ (the doctrine:
   docs/studio-ui-study.md). The COMPOSED SITES keep their own design: this
   skin styles the editor only, never the preview bytes.
   Proportions stay Blender's: the canvas is king, panels are thin edges. */
:root {
  color-scheme: light;
  --bg: #eef1f6;             /* the canvas backdrop — Wix's cool gray stage */
  --panel: #ffffff;          /* the chrome panels — Wix white */
  --panel-2: #f5f6f8;        /* inputs, quiet fills */
  --ink: #1f2430;            /* near-black text */
  --soft: #5f6673;
  --faint: #98a0ac;
  --line: rgba(16,24,40,.08);
  --line-2: rgba(16,24,40,.14);
  --accent: #116dff;         /* Wix blue */
  --accent-soft: rgba(17,109,255,.1);
  --red: #e03e52;
  --green: #2ba45e;
  --shadow-1: 0 1px 2px rgba(16,24,40,.06), 0 2px 8px rgba(16,24,40,.08);   /* Wix card */
  --shadow-2: 0 4px 12px rgba(16,24,40,.1), 0 2px 4px rgba(16,24,40,.06);   /* hover/popover */
  --shadow-3: 0 12px 40px rgba(16,24,40,.16), 0 2px 8px rgba(16,24,40,.08); /* the floating page */
  --paper: #fbfaf8;          /* the page sheet's paper (light as designed) */
}


/* ---- THE DARK EDITOR (THEME LAW, CEO 2026-11-04): the studio chrome
   follows the theme — data-theme=dark from the boot script (the brand's
   persisted choice or the system's). The composed page inside the iframe
   keeps its own design — the sheet stays the site's paper; the stage,
   panels and chrome go dark. ---- */
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #14161a;
  --panel: #1b1e24;
  --panel-2: #242830;
  --ink: #e8eaf0;
  --soft: #9aa1ad;
  --faint: #6b7280;
  --line: rgba(255,255,255,.09);
  --line-2: rgba(255,255,255,.16);
  --accent-soft: rgba(17,109,255,.22);
  --shadow-1: 0 1px 2px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.3);
  --shadow-2: 0 4px 14px rgba(0,0,0,.45), 0 2px 4px rgba(0,0,0,.3);
  --shadow-3: 0 12px 44px rgba(0,0,0,.6), 0 2px 8px rgba(0,0,0,.4);
  --paper: #23262c; /* the sheet dims with the editor; the site's own design is inside the iframe */
}
html[data-theme="dark"] *::-webkit-scrollbar-thumb { background: #3a3f4a; }
html[data-theme="dark"] .top button.primary:hover { background: #3d8aff; }

* { box-sizing: border-box; scrollbar-width: thin; scrollbar-color: #c9cdd6 transparent; }
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-thumb { background: #c9cdd6; border-radius: 3px; }
*::-webkit-scrollbar-track { background: transparent; }
/* THE NO-CROP LAW (2026-11-10): the chrome is a full-height flex column —
   the top bar takes its OWN natural height and the editor fills what's
   left. No `calc(100vh - 49px)` anywhere: the old arithmetic hardcoded the
   header at 49px, so a wrapped bar / zoom / different font metrics made the
   page taller than the viewport and cropped it. The browser now does the
   math. */
body { margin: 0; background: var(--bg); color: var(--ink); font: 13px/1.5 system-ui, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
::selection { background: rgba(17,109,255,.18); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
button { background: none; border: none; color: var(--ink); font: inherit; cursor: pointer; padding: 0; text-align: left; }

/* ---- topbar: the slim Wix icon toolbar (three-zone grid — the device
   toggles sit geometrically centered, undo/redo + Save at the right) ---- */
header.top {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  height: 48px; padding: 0 14px;
  background: var(--panel); border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(16,24,40,.04);
}
.top-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.top .brand { font-weight: 700; font-size: 13px; letter-spacing: .01em; color: var(--ink); }
.top .model { color: var(--soft); font-size: 12px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-right { display: flex; align-items: center; gap: 8px; justify-self: end; min-width: 0; }
.top .device { display: flex; gap: 2px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 2px; }
.top .device button {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  padding: 3px 12px; border-radius: 6px; color: var(--faint); text-align: center;
}
.top .device button svg { width: 15px; height: 15px; display: block; }
.top .device .dev-label { font-size: 9px; letter-spacing: .04em; font-weight: 500; }
.top .device button:hover { color: var(--ink); }
.top .device button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); }
.top .ibtn, .top button.ghost {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 7px; color: var(--soft);
  border: 1px solid transparent;
}
.top .ibtn svg, .top button.ghost svg { width: 15px; height: 15px; display: block; }
.top .ibtn:hover, .top button.ghost:hover { background: var(--panel-2); color: var(--ink); border-color: var(--line); }
.top-sep { width: 1px; height: 18px; background: var(--line); margin: 0 2px; }
.top select { background: var(--panel-2); color: var(--ink); border: 1px solid var(--line); border-radius: 7px; padding: 5px 8px; font: inherit; font-size: 12px; }
.top .laws { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--soft); white-space: nowrap; }
.top .laws::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.top .laws.bad { color: var(--red); }
.top .laws.bad::before { background: var(--red); }
.top button.primary { background: var(--accent); color: #fff; font-weight: 600; border-radius: 7px; padding: 6px 16px; font-size: 12.5px; box-shadow: var(--shadow-1); }
.top button.primary:hover { background: #0d5cda; }

/* ---- the frame ---- */
main.studio { display: grid; grid-template-columns: 248px minmax(0, 1fr) 272px; grid-template-rows: minmax(0, 1fr); flex: 1 1 auto; min-height: 0; }
main.studio.no-right { grid-template-columns: 248px minmax(0, 1fr); }
.panel { background: var(--panel); overflow: auto; }
.panel#left { border-right: 1px solid var(--line); display: flex; flex-direction: column; }
.panel#right { border-left: 1px solid var(--line); padding: 14px; }
.panel h3 { font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--soft); margin: 14px 0 8px; }
.panel h3:first-child { margin-top: 0; }

/* left shelf: Wix-style icon tiles over the panel */
.tabs { display: flex; gap: 6px; padding: 10px 10px 4px; }
.tabs button {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 9px 0 7px; border-radius: 9px; text-align: center; color: var(--soft);
  border: 1px solid transparent;
}
.tabs button svg { width: 16px; height: 16px; display: block; }
.tabs button span { font-size: 10px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; }
.tabs button:hover { color: var(--ink); background: var(--panel-2); }
.tabs button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); }
.tab-body { flex: 1; overflow: auto; padding: 10px; }

/* library: the visual grid — Wix cards with subtle shadows */
#lib-search { width: 100%; background: var(--panel-2); color: var(--ink); border: 1px solid var(--line); border-radius: 7px; padding: 6px 9px; font: inherit; font-size: 12.5px; margin-bottom: 10px; }
#lib-search:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.lib-item { margin-bottom: 16px; cursor: grab; }
.lib-item .thumb { aspect-ratio: 16 / 10; border-radius: 9px; overflow: hidden; border: 1px solid var(--line); background: var(--paper); position: relative; transition: border-color .15s, box-shadow .15s, transform .15s; box-shadow: var(--shadow-1); }
.lib-item:hover .thumb { border-color: var(--accent); box-shadow: var(--shadow-2); transform: translateY(-1px); }
.lib-item .thumb iframe { width: 480px; height: 300px; border: none; transform-origin: 0 0; pointer-events: none; position: absolute; inset: 0; }
.cat-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
.cat-tabs button { border: 1px solid var(--line); border-radius: 6px; padding: 3px 9px; font-size: 10.5px; color: var(--soft); background: var(--panel); }
.cat-tabs button:hover { color: var(--ink); border-color: var(--line-2); }
.cat-tabs button[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.lib-cat { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--faint); margin: 14px 0 8px; }
.lib-cat:first-child { margin-top: 0; }
.lib-item .vars { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px; }
.lib-item .vars .vcard { border: 1px solid var(--line); border-radius: 7px; overflow: hidden; background: var(--panel); cursor: pointer; box-shadow: var(--shadow-1); transition: box-shadow .15s, border-color .15s; }
.lib-item .vars .vcard:hover { border-color: var(--accent); box-shadow: var(--shadow-2); }
.lib-item .vars .vcard[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft), var(--shadow-1); }
.lib-item .vars .vthumb { aspect-ratio: 16/10; position: relative; overflow: hidden; background: var(--paper); }
.lib-item .vars .vthumb iframe { width: 480px; height: 300px; border: none; transform-origin: 0 0; pointer-events: none; position: absolute; inset: 0; }
.lib-item .vars .vlabel { font-size: 10px; color: var(--soft); padding: 3px 6px; text-align: center; }
.lib-item .vars .vcard[aria-pressed="true"] .vlabel { color: var(--accent); font-weight: 600; }
.lib-item .cap { display: flex; align-items: baseline; justify-content: space-between; margin-top: 6px; }
.lib-item .cap .kind { font-weight: 600; font-size: 12.5px; }
.lib-item .cap .variants { color: var(--faint); font-size: 10.5px; }
.lib-item.selected .thumb { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft), var(--shadow-1); }
.lib-item.selected .cap .kind { color: var(--accent); }

/* layers: Wix rows with icons — the glyph rides ::before as an SVG mask
   (layers.js builds rows without icon nodes; the chrome dresses them) */
.layer-group { margin-bottom: 16px; }
.layer-group .slot-name { display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--soft); margin-bottom: 6px; }
.layer-group .slot-name::before {
  content: ""; width: 12px; height: 12px; flex: none;
  background-color: var(--faint);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 1.2 11 3.8 6 6.4 1 3.8Z' fill='none' stroke='black' stroke-width='1' stroke-linejoin='round'/%3E%3Cpath d='m1 7.6 5 2.6 5-2.6' fill='none' stroke='black' stroke-width='1' stroke-linejoin='round'/%3E%3Cpath d='m1 10 5 2.6 5-2.6' fill='none' stroke='black' stroke-width='1' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 1.2 11 3.8 6 6.4 1 3.8Z' fill='none' stroke='black' stroke-width='1' stroke-linejoin='round'/%3E%3Cpath d='m1 7.6 5 2.6 5-2.6' fill='none' stroke='black' stroke-width='1' stroke-linejoin='round'/%3E%3Cpath d='m1 10 5 2.6 5-2.6' fill='none' stroke='black' stroke-width='1' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.layer-row { display: flex; align-items: center; gap: 6px; padding: 5px 7px; border-radius: 7px; font-size: 12.5px; }
.layer-row:hover { background: var(--panel-2); }
.layer-row .name { flex: 1; display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.layer-row .name::before {
  content: ""; width: 12px; height: 12px; flex: none;
  background-color: var(--faint);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Crect x='1.5' y='1.5' width='9' height='9' rx='1.6' fill='none' stroke='black' stroke-width='1.1'/%3E%3Cpath d='M3.6 4.4h4.8M3.6 6.9h3' fill='none' stroke='black' stroke-width='1.1' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Crect x='1.5' y='1.5' width='9' height='9' rx='1.6' fill='none' stroke='black' stroke-width='1.1'/%3E%3Cpath d='M3.6 4.4h4.8M3.6 6.9h3' fill='none' stroke='black' stroke-width='1.1' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.layer-row .name:hover::before { background-color: var(--accent); }
.layer-row button { color: var(--faint); font-size: 11px; padding: 2px 4px; border-radius: 4px; }
.layer-row button:hover { color: var(--accent); background: var(--accent-soft); }
.layer-row button:nth-child(3):hover, .layer-row button:last-child:hover { color: var(--red); background: rgba(224,62,82,.08); }
.layer-empty { color: var(--faint); font-size: 11.5px; font-style: italic; padding: 4px 6px; }

/* center: the canvas is king — the page floats on the cool gray stage */
.center { display: flex; flex-direction: column; min-height: 0; overflow: hidden; background: var(--bg); position: relative; } /* NO-CROP LAW: flex column, not grid rows — the domain strip toggles display:none, which under grid-template-rows shifted every row and collapsed the canvas */
.canvas-scroll { overflow: auto; padding: 24px 26px; min-height: 0; flex: 1 1 auto; display: flex; flex-direction: column; } /* PKG-035 canvas: vertical 26→24 — the full-height fill must clear the ≥780 gate on a 900px viewport (781px). NO-CROP LAW: flex column so the frame can fill the row instead of a calc(). */
/* G9 author-facing half: the domain strip — the site's live URL inline
   above the canvas (their pixels: the *.wixstudio.io URL + Connect Domain).
   Typography-only: hairline under, soft ink, one text-button. */
.domain-strip { display: flex; align-items: center; gap: 10px; height: 30px; padding: 0 14px; font-size: 11.5px; color: var(--soft); background: var(--panel); border-bottom: 1px solid var(--line); }
.domain-strip.hidden { display: none; }
.domain-strip .ds-hint { letter-spacing: .05em; text-transform: uppercase; font-size: 10px; }
.domain-strip .ds-url { color: var(--ink); text-decoration: none; }
.domain-strip .ds-url:hover { color: var(--accent); }
.domain-strip .ds-copy { border: 0; background: none; color: var(--accent); font: inherit; cursor: pointer; padding: 0 2px; }
.domain-strip .ds-copy:hover { text-decoration: underline; }
.canvas-frame { max-width: 1160px; margin: 0 auto; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; border-radius: 8px; overflow: hidden; box-shadow: var(--shadow-3); transition: max-width .25s; background: var(--paper); position: relative; padding: 22px 0 0 22px; box-sizing: border-box; } /* PKG-035 canvas: position:relative anchors the blank invitation over the iframe; ISSUE-42: the 22px gutters carry the rulers. NO-CROP LAW: flex column so #preview fills below the 22px ruler gutter. */
.nn-ruler-x { position: absolute; top: 0; left: 22px; right: 0; height: 22px; width: calc(100% - 22px); background: var(--panel); border-bottom: 1px solid var(--line); }
.nn-ruler-y { position: absolute; top: 22px; left: 0; bottom: 0; height: calc(100% - 22px); width: 22px; background: var(--panel); border-right: 1px solid var(--line); }
.nn-ruler-corner { position: absolute; top: 0; left: 0; width: 22px; height: 22px; background: var(--panel); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.nn-ruler-chip { position: absolute; bottom: 8px; left: 30px; z-index: 20; font-size: 10.5px; font-family: var(--label, system-ui); color: var(--soft); background: color-mix(in srgb, var(--panel) 88%, transparent); border: 1px solid var(--line); border-radius: 5px; padding: 2px 7px; pointer-events: none; }
#btn-grid[aria-pressed="true"] { color: var(--accent); background: var(--accent-soft); }
/* G1/G2/G3: the Wix Studio parity set — the floating toolbar, the autosaved word, the bp W/H */
#nn-elem-toolbar { position: absolute; z-index: 300; display: flex; gap: 2px; background: var(--ink, #111); border-radius: 8px; padding: 4px 6px; box-shadow: 0 4px 14px rgba(0,0,0,.25); }
#nn-elem-toolbar button { all: unset; cursor: pointer; color: #fff; font-size: 13px; padding: 3px 7px; border-radius: 5px; line-height: 1.2; }
#nn-elem-toolbar button:hover { background: rgba(255,255,255,.16); }
.autosaved { font-size: 11.5px; color: var(--soft); margin-right: 10px; white-space: nowrap; }
.bp-wh { font-size: 11.5px; color: var(--soft); margin-left: 10px; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* G4: the page switcher in the top bar */
.page-switch { position: relative; margin-left: 12px; }
.page-switch button { all: unset; cursor: pointer; font-size: 12.5px; color: var(--ink); padding: 4px 10px; border-radius: 6px; border: 1px solid var(--line); background: var(--panel); }
.page-switch button:hover { border-color: var(--accent); }
.page-switch-list { position: absolute; top: calc(100% + 4px); left: 0; z-index: 200; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow-3); min-width: 160px; max-height: 260px; overflow: auto; }
.page-switch-row { all: unset; cursor: pointer; display: block; width: 100%; box-sizing: border-box; padding: 7px 12px; font-size: 12.5px; color: var(--ink); }
.page-switch-row:hover { background: var(--accent-soft); }
.view-live { font-size: 11.5px; color: var(--accent); text-decoration: none; margin-left: 12px; white-space: nowrap; }
.view-live.hidden { display: none; }
/* G8-v1: the comments panel */
.comments-list { display: grid; gap: 6px; margin-bottom: 8px; }
.comment-row { position: relative; border: 1px solid var(--line); border-radius: 8px; padding: 8px 22px 8px 10px; background: var(--panel-2); }
.comment-where { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin-bottom: 3px; }
.comment-text { font-size: 12px; color: var(--ink); white-space: pre-wrap; }
.comment-add-row { display: grid; gap: 4px; }
.comment-where-in, .comment-add-text { width: 100%; box-sizing: border-box; background: var(--panel-2); color: var(--ink); border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; font: inherit; font-size: 12px; }
.comment-add-btn { all: unset; cursor: pointer; text-align: center; padding: 6px; border-radius: 6px; border: 1px solid var(--line); color: var(--soft); font-size: 12px; }
.comment-add-btn:hover { border-color: var(--accent); color: var(--ink); }
.comment-row.from-client { border-left: 3px solid var(--accent); }
/* ISSUE-40/G6-interaction: the breakpoint drag ladder */
.bp-drag-handle { position: absolute; top: 22px; bottom: 0; right: -3px; width: 9px; cursor: ew-resize; z-index: 30; background: linear-gradient(90deg, transparent, var(--accent-soft)); border-radius: 0 4px 4px 0; }
.bp-drag-handle:hover { background: var(--accent-soft); }
.bp-drag-label { position: fixed; z-index: 400; top: 60px; right: 30px; font-size: 11px; font-variant-numeric: tabular-nums; color: var(--ink); background: var(--panel); border: 1px solid var(--accent); border-radius: 6px; padding: 3px 8px; pointer-events: none; }
/* G5: the saved assets shelf */
.assets-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.asset-tile { all: unset; cursor: pointer; display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); }
.asset-tile:hover { border-color: var(--accent); }
.asset-kind { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.asset-name { font-size: 12px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asset-lib-name { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--soft); margin: 8px 0 4px; }
/* ISSUE-45: the kiln's shelves + the media library tab */
.kiln-folders { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 6px; }
.kiln-folder { all: unset; cursor: pointer; font-size: 11px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line); color: var(--soft); }
.kiln-folder.on { background: var(--accent); color: #fff; border-color: var(--accent); }
#media-host .kiln-grid { max-height: none; }
/* ISSUE-47: the author's own head/body bytes */
.custom-code { display: grid; gap: 4px; margin-bottom: 8px; }
.custom-label { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--soft); }
.custom-ta { width: 100%; box-sizing: border-box; background: var(--panel-2); color: var(--ink); border: 1px solid var(--line); border-radius: 7px; padding: 6px 8px; font: 11.5px/1.5 ui-monospace, monospace; resize: vertical; }
.coll-record { display: flex; gap: 4px; align-items: center; }
.coll-record input { flex: 1; min-width: 0; background: var(--panel-2); color: var(--ink); border: 1px solid var(--line); border-radius: 6px; padding: 4px 6px; font-size: 11.5px; }
.list-bind { align-items: center; }
.list-bind select { max-width: 200px; }
/* ISSUE-45/crop: the crop editor */
.crop-pop { position: fixed; inset: 0; z-index: 400; background: color-mix(in srgb, #000 55%, transparent); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.crop-title { color: #fff; font: 14px var(--label, system-ui); letter-spacing: .06em; text-transform: uppercase; }
.crop-canvas { background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px; cursor: grab; touch-action: none; max-width: 92vw; }
.crop-aspects { background: var(--panel); padding: 4px; border-radius: 8px; }
.crop-actions { display: flex; gap: 8px; }
.crop-apply { all: unset; cursor: pointer; padding: 8px 18px; border-radius: 8px; background: var(--accent); color: #fff; font-size: 13px; }
.crop-cancel { all: unset; cursor: pointer; padding: 8px 14px; border-radius: 8px; border: 1px solid var(--line); color: var(--soft); font-size: 13px; background: var(--panel); }
.canvas-frame.mobile { max-width: 390px; }
.canvas-frame.tablet { max-width: 768px; }
iframe#preview { border: none; width: 100%; height: auto; flex: 1 1 auto; min-height: 0; display: block; background: var(--paper); } /* NO-CROP LAW: the frame fills its row by flex, not by subtracting the header's height. Width stays free, so the mobile/tablet frames keep working (width changes, height fills) */
.status { display: flex; align-items: center; height: 28px; flex: 0 0 auto; padding: 0 12px; background: var(--panel); border-top: 1px solid var(--line); font-size: 11px; color: var(--soft); }
.status .hint { flex: 1; }
.status .saved { color: var(--green); }

/* inspector: titled Wix panels on white */
#right .sel-name { font-weight: 650; font-size: 15.5px; margin-bottom: 2px; }
#right .sel-kind { color: var(--faint); font-size: 11px; margin-bottom: 14px; }
#right .none { color: var(--soft); font-size: 12.5px; }
.prop { margin-bottom: 11px; position: relative; }
.prop label { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--soft); margin-bottom: 4px; }
.prop input, .prop select { width: 100%; background: var(--panel-2); color: var(--ink); border: 1px solid var(--line); border-radius: 7px; padding: 6px 9px; font: inherit; font-size: 12.5px; }
.prop input:focus, .prop select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.prop label .law-hint { margin-left: 6px; color: var(--faint); font-weight: 400; letter-spacing: 0; text-transform: none; font-size: 10px; }
.prop.tier-advanced label { color: var(--ink); }
.prop.tier-advanced label::after { content: "advanced"; color: var(--faint); text-transform: lowercase; letter-spacing: 0; font-weight: 400; margin-left: 6px; }
.prop.tier-berserk { background: rgba(224,62,82,.06); border: 1px solid rgba(224,62,82,.3); border-radius: 7px; padding: 8px; }
.prop.tier-berserk label { color: var(--red); }
.prop.tier-berserk label::after { content: "⚠ berserk — reconsider"; color: var(--red); text-transform: none; letter-spacing: 0; font-weight: 600; margin-left: 6px; }
.prop.law-broken { border-color: var(--red); }
.tierbox { border: 1px solid var(--line); border-radius: 9px; margin-bottom: 10px; background: var(--panel); box-shadow: var(--shadow-1); }
.tierbox summary { cursor: pointer; padding: 8px 10px; font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--soft); border-radius: 9px; }
.tierbox[open] summary { border-bottom: 1px solid var(--line); }
.tierbox .tier-body { padding: 10px; }
.tierbox[data-broken="true"] { border-color: rgba(224,62,82,.4); }
.tierbox[data-broken="true"] summary { color: var(--red); }
.insp-sec { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--soft); margin: 18px 0 8px; padding-bottom: 5px; border-bottom: 1px solid var(--line); }
.var-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.var-card { border: 1px solid var(--line); border-radius: 7px; overflow: hidden; background: var(--panel); cursor: pointer; box-shadow: var(--shadow-1); transition: box-shadow .15s, border-color .15s; }
.var-card:hover { border-color: var(--accent); box-shadow: var(--shadow-2); }
.var-card[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft), var(--shadow-1); }
.var-card .vthumb { aspect-ratio: 16/10; position: relative; overflow: hidden; background: var(--paper); }
.var-card .vthumb iframe { width: 480px; height: 300px; border: none; transform-origin: 0 0; pointer-events: none; position: absolute; inset: 0; }
.var-card .vlabel { font-size: 10.5px; color: var(--soft); padding: 4px 6px; text-align: center; }
.var-card[aria-pressed="true"] .vlabel { color: var(--accent); font-weight: 600; }
#right button.revert { display: block; width: 100%; text-align: center; background: none; border: 1px solid var(--line); color: var(--soft); border-radius: 7px; padding: 7px 0; cursor: pointer; font-size: 12px; margin-top: 4px; }
#right button.revert:hover { color: var(--ink); border-color: var(--line-2); background: var(--panel-2); }

/* color widget (PKG-017): swatch button → popover (role grid, then hex+apply) */
.color-swatch { display: block; width: 100%; height: 26px; border: 1px solid var(--line-2); border-radius: 7px; cursor: pointer; padding: 0; }
.color-swatch:hover { border-color: var(--accent); }
.color-pop { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30; background: var(--panel); border: 1px solid var(--line-2); border-radius: 9px; padding: 10px; box-shadow: var(--shadow-2); }
.color-pop .role-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding-bottom: 9px; margin-bottom: 9px; border-bottom: 1px solid var(--line); }
.color-pop .role-chip { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 2px 4px; border: 1px solid transparent; border-radius: 7px; cursor: pointer; color: var(--soft); font-size: 9.5px; }
.color-pop .role-chip:hover { border-color: var(--line); color: var(--ink); background: var(--panel-2); }
.color-pop .role-chip i { width: 16px; height: 16px; border-radius: 4px; border: 1px solid var(--line-2); display: block; }
.color-pop .hex-row { display: flex; gap: 6px; }
.color-pop .hex-input { flex: 1; min-width: 0; background: var(--panel-2); color: var(--ink); border: 1px solid var(--line); border-radius: 7px; padding: 5px 9px; font: inherit; font-size: 12px; }
.color-pop .hex-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.color-pop .hex-input.bad { border-color: var(--red); }
.color-pop .hex-apply { background: none; border: 1px solid var(--line); border-radius: 7px; padding: 5px 12px; font-size: 11.5px; color: var(--soft); cursor: pointer; }
.color-pop .hex-apply:hover { color: var(--ink); border-color: var(--accent); }

/* first-run wizard modal — editor chrome, same skin */
#wizard-overlay { position: fixed; inset: 0; background: rgba(31,36,48,.45); display: grid; place-items: center; z-index: 50; }
#wizard-overlay.hidden { display: none; }
#wizard-overlay .sheet { width: 620px; max-height: 86vh; overflow: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 26px 28px; box-shadow: var(--shadow-3); }
#wizard-overlay h1 { font-weight: 650; font-size: 22px; margin: 0 0 6px; }
#wizard-overlay .sub { color: var(--soft); font-size: 13px; margin: 0 0 18px; }
#wizard-overlay .step { margin-bottom: 18px; }
#wizard-overlay .step h3 { font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--soft); margin: 0 0 8px; }
.swatches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.swatch { border: 1px solid var(--line); border-radius: 9px; padding: 10px; cursor: pointer; background: var(--panel); box-shadow: var(--shadow-1); }
.swatch:hover { border-color: var(--line-2); box-shadow: var(--shadow-2); }
.swatch[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.swatch .dot { display: flex; gap: 4px; margin-bottom: 6px; }
.swatch .dot i { width: 14px; height: 14px; border-radius: 50%; display: block; border: 1px solid rgba(16,24,40,.1); }
.swatch .nm { font-size: 12.5px; color: var(--ink); }
.wiz-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; }
.wiz-actions .opt { border: 1px solid var(--line-2); border-radius: 11px; padding: 16px; cursor: pointer; text-align: center; background: var(--panel); box-shadow: var(--shadow-1); }
.wiz-actions .opt:hover { border-color: var(--accent); box-shadow: var(--shadow-2); }
.wiz-actions .opt b { display: block; font-size: 13.5px; margin-bottom: 4px; }
.wiz-actions .opt span { color: var(--soft); font-size: 12px; }
.hidden { display: none !important; }

/* PKG-018 range */
.range-row { display: flex; align-items: center; gap: 8px; }
.range-row input[type="range"] { flex: 1; min-width: 0; width: auto; height: 22px; margin: 0; padding: 0; background: none; border: none; accent-color: var(--accent); cursor: ew-resize; }
.range-row input[type="range"]:focus { outline: none; }
.range-row .range-chip { flex: 0 0 auto; min-width: 62px; text-align: center; background: var(--panel-2); border: 1px solid var(--line); border-radius: 7px; padding: 4px 8px; font-size: 11.5px; font-variant-numeric: tabular-nums; color: var(--ink); cursor: ew-resize; user-select: none; touch-action: none; }
.range-row .range-chip:hover { border-color: var(--accent); }
.range-row .range-edit { flex: 0 0 auto; width: 72px; text-align: center; background: var(--panel-2); color: var(--ink); border: 1px solid var(--accent); border-radius: 7px; padding: 4px 8px; font: inherit; font-size: 12px; font-variant-numeric: tabular-nums; }
.range-row .range-edit:focus { outline: none; }

/* PKG-035 canvas — the blank invitation: studio chrome positioned over the
   preview iframe while model.slots.main is empty (compose.js renders/hides it;
   the composed bytes stay pure — the invitation never crosses into the srcdoc). */
.blank-invite {
  position: absolute; inset: 0; z-index: 5;
  display: grid; place-items: center; text-align: center;
  padding: 0 44px;
  background: var(--paper); /* the world's paper — the same sheet the preview shows */
  font-family: Georgia, "Times New Roman", serif;
  font-size: 17px; line-height: 1.6;
  color: #211f1c;
}

/* ---- PKG-019 list ---- */
.list-ctl { display: flex; flex-direction: column; gap: 6px; }
.list-rows { display: flex; flex-direction: column; }
.list-row { display: flex; align-items: center; gap: 6px; padding: 4px 0; min-width: 0; }
.list-row + .list-row { border-top: 1px solid var(--line); }
.list-row .list-main { flex: 1.3; min-width: 0; width: auto; }
.list-row .list-href { flex: 1; min-width: 0; width: auto; color: var(--soft); }
.list-ops { display: flex; gap: 2px; flex: none; }
.list-ops button { color: var(--faint); font-size: 12px; padding: 2px 4px; line-height: 1; }
.list-ops button:hover { color: var(--ink); }
.list-ops button:disabled { opacity: .3; cursor: default; }
.list-ops .list-del:hover { color: var(--red); }
.list-addbar { margin-top: 2px; }
.list-add { display: block; width: 100%; color: var(--soft); font-size: 12px; padding: 4px 0; }
.list-add:hover { color: var(--ink); }

/* PKG-021 longtext — the growing textarea: same dressing as the text input,
   prose leading, no resize handle (the box grows itself) */
.prop textarea.longtext {
  width: 100%; background: var(--panel-2); color: var(--ink);
  border: 1px solid var(--line); border-radius: 7px; padding: 6px 9px;
  font: inherit; font-size: 12.5px; line-height: 1.55;
  resize: none; overflow: hidden; display: block;
}
.prop textarea.longtext:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }

/* PKG-022 tooltips — the ? affordance on every prop label (hover/focus speaks
   the spec's description) + the per-value ⟲ (WX-014's blue-Reset-per-field law) */
.prop label { padding-right: 30px; }
.prop-help {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 13px; height: 13px; margin-left: 6px; padding: 0; vertical-align: 1px;
  border: 1px solid var(--line); border-radius: 50%; background: var(--panel-2);
  color: var(--faint); font-size: 9px; line-height: 1; cursor: help;
}
.prop-help:hover, .prop-help:focus { border-color: var(--accent); color: var(--accent); outline: none; }
.prop-help .q { display: block; }
.prop-help .tip {
  position: absolute; top: calc(100% + 7px); left: 50%; transform: translateX(-50%);
  width: max-content; max-width: 230px; padding: 6px 9px;
  background: var(--panel); border: 1px solid var(--line-2); border-radius: 7px;
  color: var(--ink); font-size: 11.5px; font-weight: 400; letter-spacing: 0;
  text-transform: none; line-height: 1.5; text-align: left;
  opacity: 0; visibility: hidden; pointer-events: none; z-index: 30;
  box-shadow: var(--shadow-2);
}
.prop-help:hover .tip, .prop-help:focus .tip { opacity: 1; visibility: visible; }
/* ISSUE-64: the tooltip opens INSIDE the panel — anchored to the prop, not
   the icon, so the right panel's boundary never clips it */
.prop-help { position: static; }
.prop-help .tip { left: 10px; top: 20px; transform: none; }
.prop-reset {
  position: absolute; top: 0; right: 0; padding: 0 2px; line-height: 1.4;
  color: var(--faint); font-size: 12px;
}
.prop-reset:hover { color: var(--accent); }
.prop-reset[hidden] { display: none; }

/* PKG-031/032 — the dirty marker on the status bar: the one accent dot, no
   chrome (the .hidden utility carries the toggle; the draft flash reuses .saved) */
.status .dirty { color: var(--accent); margin-right: 12px; letter-spacing: .04em; }

/* ---- PKG-029 page — the no-selection Mirror edits the page itself ---- */
/* the identity rows reuse .prop dressing; only the hint is new — a door to
   the Shelf, not a dead prompt */
#right .page-hint {
  display: block; width: 100%; text-align: center;
  color: var(--soft); font-size: 12px; line-height: 1.5;
  border: 1px dashed var(--line-2); border-radius: 7px;
  padding: 9px 0; margin-top: 12px; cursor: pointer;
}
#right .page-hint:hover { color: var(--accent); border-color: var(--accent); }

/* ---- PKG-030 roles — the Role editor beneath the Page section ---- */
/* one row per world role: swatch + name, hairline separators; the popover
   reuses the PKG-017 .color-pop dressing (the row is its anchor) */
.role-list { display: flex; flex-direction: column; }
.role-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; position: relative; }
.role-row + .role-row { border-top: 1px solid var(--line); }
.role-row .role-swatch { width: 22px; height: 22px; flex: none; border: 1px solid var(--line-2); border-radius: 6px; cursor: pointer; padding: 0; }
.role-row .role-swatch:hover { border-color: var(--accent); }
.role-row .role-name { font-size: 12.5px; color: var(--ink); }
#right button.palette-reset {
  display: block; width: 100%; text-align: center;
  background: none; border: 1px dashed var(--line-2); color: var(--soft);
  border-radius: 7px; padding: 6px 0; cursor: pointer; font-size: 12px;
  margin-top: 8px;
}
#right button.palette-reset:hover { color: var(--ink); border-color: var(--line-2); }

/* ---- MEERA kiln (issues #4-#7) — append-only below this line ---- */
/* the entry law's marker: a required prop names itself in red beside its label */
.prop label .req { color: var(--red); font-size: 10px; letter-spacing: .04em; margin-left: 4px; }
/* the media control (issue #5): path input + preview chip + the Manage media door */
.media-ctl { display: flex; align-items: center; gap: 6px; position: relative; flex-wrap: wrap; }
.media-ctl .media-note { flex-basis: 100%; font-size: 11.5px; line-height: 1.45; margin-top: 2px; }
.media-ctl .media-path { flex: 1; min-width: 0; background: var(--panel-2); color: var(--ink); border: 1px solid var(--line); border-radius: 7px; padding: 5px 9px; font: inherit; font-size: 12px; }
.media-ctl .media-path:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.media-ctl .media-thumb { width: 26px; height: 26px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line-2); flex: none; background: var(--panel-2); }
.media-ctl .media-manage { flex: none; border: 1px solid var(--line); border-radius: 7px; padding: 5px 9px; font-size: 11.5px; color: var(--soft); background: var(--panel); }
.media-ctl .media-manage:hover { color: var(--ink); border-color: var(--accent); }
/* the Kiln panel — the PKG-017 popover dressing, wider for the grid */
.kiln-pop { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30; background: var(--panel); border: 1px solid var(--line-2); border-radius: 9px; padding: 10px; box-shadow: var(--shadow-2); }
.kiln-tabs { display: flex; align-items: center; gap: 2px; margin-bottom: 8px; border-bottom: 1px solid var(--line); padding-bottom: 6px; }
.kiln-tabs .kiln-tab { font-size: 11.5px; color: var(--soft); padding: 3px 8px; border-radius: 6px; }
.kiln-tabs .kiln-tab.on { color: var(--accent); background: var(--accent-soft); }
.kiln-tabs .kiln-close { margin-inline-start: auto; color: var(--faint); font-size: 12px; padding: 2px 6px; }
.kiln-tabs .kiln-close:hover { color: var(--ink); }
.kiln-upload { display: flex; margin-bottom: 8px; }
.kiln-upbtn { flex: 1; text-align: center; border: 1px dashed var(--line-2); border-radius: 7px; padding: 6px 0; color: var(--soft); font-size: 12px; }
.kiln-upbtn:hover { color: var(--ink); border-color: var(--accent); }
.kiln-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; max-height: 240px; overflow: auto; }
.kiln-tile { display: flex; flex-direction: column; gap: 3px; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; background: var(--panel); box-shadow: var(--shadow-1); }
.kiln-tile:hover { border-color: var(--accent); }
.kiln-tile img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; }
.kiln-tile .kiln-name { font-size: 9.5px; color: var(--soft); padding: 0 5px 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kiln-empty { grid-column: 1 / -1; color: var(--faint); font-size: 11.5px; line-height: 1.5; padding: 8px 2px; }
.kiln-err { color: var(--red); font-size: 11px; margin-bottom: 6px; }
/* the Instagram tab (issue #6): profile head + the harvest grid */
.kiln-ig-head { display: flex; align-items: center; gap: 8px; padding: 2px 0 8px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.kiln-ig-head img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; border: 1px solid var(--line-2); }
.kiln-ig-head .kiln-ig-id { display: flex; flex-direction: column; min-width: 0; }
.kiln-ig-head strong { font-size: 12px; font-weight: 600; }
.kiln-ig-head .kiln-ig-id span { font-size: 10.5px; color: var(--soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kiln-tile.is-reel { opacity: .45; cursor: not-allowed; }
.kiln-tile.is-reel img::after { content: ""; }
.kiln-reel-glyph { flex: 1; display: flex; align-items: center; justify-content: center; aspect-ratio: 1/1; color: var(--faint); font-size: 18px; background: var(--bg); }

/* RHEA hover — the .nn-hover outline lives INSIDE the preview's injected style
   (public/studio/js/compose.js, NN_PREVIEW_STYLE): the preview is a srcdoc
   iframe and studio.css cannot reach into it. The studio chrome carries no
   hover state of its own. */
/* RHEA inplace — the status strip's in-place-edit hint (compose.js posts the
   session open/close); accent ink like the unsaved mark, quiet enough to ignore. */
#status-edit-hint { color: var(--accent); margin-right: 12px; letter-spacing: .04em; }

/* ISSUE-9: the layers row drag */
.layer-insert{height:2px;background:var(--accent,#116dff);margin:1px 0;pointer-events:none}
.layer-row.nn-drag-src{opacity:.35}

/* ISSUE-10: the layers context menu */
.layer-menu{position:fixed;z-index:9999;background:var(--panel);border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow-2,0 4px 14px rgba(0,0,0,.12));padding:4px;display:flex;flex-direction:column;min-width:150px}
.layer-menu button{all:unset;cursor:pointer;font:inherit;font-size:12.5px;color:var(--ink);padding:7px 10px;border-radius:6px;text-align:left}
.layer-menu button:hover{background:#f2f6ff;color:var(--accent,#116dff)}

/* ISSUE-8: hidden rows gray out; the eye/lock toggles */
.layer-row.nn-hidden-row .name{opacity:.4;text-decoration:line-through}
.layer-row .row-eye,.layer-row .row-lock{all:unset;cursor:pointer;font-size:11px;color:var(--soft,#8a8a8a);padding:0 2px}
.layer-row .row-eye:hover,.layer-row .row-lock:hover{color:var(--accent,#116dff)}

/* ISSUE-7: the gallery card — layout thumbs (three across, choose-by-eye) and
   the carousel's playback toggles on the card itself */
.lib-item .gally{margin-top:6px}
.lib-item .gally .gally-thumbs{grid-template-columns:repeat(3,1fr)}
.lib-item .gplay{display:flex;gap:6px;margin-top:6px}
.lib-item .gplay .gtoggle{all:unset;flex:1;display:inline-flex;align-items:center;justify-content:center;gap:5px;font:inherit;font-size:10px;color:var(--soft,#8a8a8a);background:var(--panel,#fff);border:1px solid var(--line,rgba(0,0,0,.12));border-radius:7px;padding:4px 6px;cursor:pointer;box-shadow:var(--shadow-1,0 1px 2px rgba(0,0,0,.05));transition:box-shadow .15s,border-color .15s,color .15s}
.lib-item .gplay .gtoggle:hover{border-color:var(--accent,#116dff)}
.lib-item .gplay .gtoggle[aria-pressed="true"]{border-color:var(--accent,#116dff);color:var(--accent,#116dff);font-weight:600;box-shadow:0 0 0 2px var(--accent-soft,rgba(17,109,255,.15)),var(--shadow-1,0 1px 2px rgba(0,0,0,.05))}
.lib-item .gplay .gtoggle .dot{width:6px;height:6px;border-radius:50%;background:var(--line,rgba(0,0,0,.12));transition:background .15s}
.lib-item .gplay .gtoggle[aria-pressed="true"] .dot{background:var(--accent,#116dff)}

/* ISSUE-6: the Instagram picker */
.ig-profiles{display:grid;grid-template-columns:1fr;gap:6px}
.ig-profile{all:unset;cursor:pointer;display:flex;flex-direction:column;gap:2px;padding:8px 10px;border:1px solid var(--line);border-radius:9px;background:var(--panel);box-shadow:var(--shadow-1);transition:border-color .15s, box-shadow .15s}
.ig-profile:hover{border-color:var(--accent,#116dff);box-shadow:var(--shadow-2)}
.ig-profile .ig-handle{font-weight:600;font-size:12px;color:var(--ink)}
.ig-profile .ig-meta{font-size:11px;color:var(--soft,#666)}
.ig-profile .ig-count{font-size:10.5px;color:var(--accent,#116dff)}

/* ISSUE-24 — the wizard spine: the 4-dot progress spine, the accordion step
   panels (Back/Next per step, answers preserved in state), the chips dressed
   once, and the live draft showing blurred behind the sheet. The backdrop is
   the real preview (compose.js's one writer feeds it); the overlay only
   dims + blurs — the composed bytes are never touched. UI law: hairlines,
   one accent, no new boxes. */
#wizard-overlay{background:rgba(31,36,48,.5);backdrop-filter:blur(7px) saturate(.9);-webkit-backdrop-filter:blur(7px) saturate(.9)}
.wiz-spine{display:flex;align-items:flex-start;margin:4px 0 18px}
.wiz-dot{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;padding:0;color:var(--faint);position:relative;cursor:pointer}
.wiz-dot .wiz-pin{width:10px;height:10px;border-radius:50%;border:2px solid var(--line-2);background:var(--panel);transition:border-color .15s,background .15s,box-shadow .15s}
.wiz-dot .wiz-lab{font-size:9.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.wiz-dot:not(:first-child)::before{content:"";position:absolute;top:5px;right:calc(50% + 14px);left:calc(-50% + 14px);height:1px;background:var(--line-2)}
.wiz-dot:hover{color:var(--ink)}
.wiz-dot:hover .wiz-pin{border-color:var(--soft)}
.wiz-dot.wiz-done{color:var(--soft)}
.wiz-dot.wiz-done .wiz-pin{background:var(--accent);border-color:var(--accent)}
.wiz-dot[aria-current="step"]{color:var(--accent)}
.wiz-dot[aria-current="step"] .wiz-pin{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.wiz-panel + .wiz-panel{border-top:1px solid var(--line)}
.wiz-head{display:flex;align-items:baseline;gap:8px;width:100%;padding:12px 2px}
.wiz-panel:first-of-type .wiz-head{padding-top:0}
.wiz-head h3{margin:0}
.wiz-head:hover .wiz-sum{color:var(--soft)}
.wiz-sum{margin-left:auto;color:var(--faint);font-size:11.5px;transition:color .15s}
.wiz-body.wiz-fold{display:none}
.wiz-body{padding-bottom:14px}
.wiz-panel:last-of-type .wiz-body{padding-bottom:0}
.wiz-chips{display:flex;flex-wrap:wrap;gap:8px}
.wiz-chip{border:1px solid var(--line);border-radius:6px;padding:5px 10px;font-size:12.5px;color:var(--ink);background:var(--panel-2);transition:border-color .15s,color .15s,background .15s}
.wiz-chip:hover{border-color:var(--line-2);color:var(--ink)}
.wiz-chip[aria-pressed="true"]{color:var(--accent);border-color:var(--accent);background:var(--accent-soft);font-weight:600}
.wiz-nav{display:flex;align-items:center;justify-content:space-between;margin-top:14px}
.wiz-back,.wiz-next{border:1px solid var(--line);border-radius:7px;padding:6px 14px;font-size:12.5px;color:var(--soft);background:var(--panel);transition:border-color .15s,color .15s}
.wiz-back:hover{color:var(--ink);border-color:var(--line-2)}
.wiz-next{color:var(--accent);border-color:var(--accent);font-weight:600}
.wiz-next:hover{background:var(--accent-soft)}

/* ISSUE-25: the welcome gallery */
.welcome-gallery{position:fixed;inset:0;z-index:9000;background:rgba(12,14,16,.55);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:24px}
.welcome-gallery>button.wg-close{position:absolute;top:14px;right:18px;all:unset;cursor:pointer;color:#fff;font-size:18px}
.welcome-gallery{flex-direction:column}
.wg-head{display:flex;align-items:center;justify-content:space-between;width:min(720px,92vw);margin-bottom:10px}
.wg-title{font-size:17px;font-weight:600;color:#fff}
.wg-cat{width:min(720px,92vw);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--soft,#cfd6dd);margin:10px 0 6px}
.wg-grid{width:min(720px,92vw);display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.wg-made,.wg-recent{all:unset;cursor:pointer;background:var(--panel);border-radius:10px;box-shadow:var(--shadow-2,0 6px 18px rgba(0,0,0,.18));padding:10px 12px;display:flex;flex-direction:column;gap:3px;border:1px solid transparent;transition:border-color .15s}
.wg-made:hover,.wg-recent:hover{border-color:var(--accent,#116dff)}
.wg-name{font-weight:600;font-size:12.5px;color:var(--ink)}
.wg-status{font-size:10.5px;color:var(--accent,#116dff)}
.wg-recents{width:min(720px,92vw);display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.wg-empty{width:min(720px,92vw);font-size:12px;color:var(--soft,#cfd6dd);padding:8px 2px}

/* ISSUE-30: the ⌘K command palette */
.cmdk{position:fixed;inset:0;z-index:9500;background:rgba(12,14,16,.45);display:flex;align-items:flex-start;justify-content:center;padding-top:12vh}
.cmdk-box{width:min(560px,92vw);background:var(--panel);border-radius:12px;box-shadow:var(--shadow-2,0 12px 40px rgba(0,0,0,.28));overflow:hidden}
.cmdk-input{all:unset;display:block;width:100%;box-sizing:border-box;padding:14px 16px;font:inherit;font-size:14px;color:var(--ink);border-bottom:1px solid var(--line,#e8e6e2)}
.cmdk-list{max-height:46vh;overflow:auto;padding:6px}
.cmdk-item{all:unset;display:block;width:100%;box-sizing:border-box;cursor:pointer;font-size:13px;color:var(--ink);padding:9px 12px;border-radius:8px}
.cmdk-item[aria-selected="true"]{background:#f2f6ff;color:var(--accent,#116dff)}

/* ISSUE-48: the DESIGN group */
.design-group{display:flex;flex-direction:column;gap:6px}
.style-row{display:flex;align-items:center;gap:6px}
.style-label{font-size:10px;font-weight:600;letter-spacing:.1em;color:var(--soft,#8a8a8a);width:86px;flex:none}
.style-row input{all:unset;width:74px;background:var(--panel-2,#fff);border:1px solid var(--line,#e8e6e2);border-radius:6px;padding:4px 6px;font:inherit;font-size:12px;color:inherit}
.style-row input.bp-inherited{color:var(--faint,#999);font-style:italic} /* inherited from desktop — the truth, dimmed */
/* ISSUE-41: the design tokens — the site's named styles and swatches */
.token-row .role-row{cursor:pointer}
.token-dot{width:26px;height:26px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;font-size:11px;color:var(--soft);flex:none}
.token-sum{margin-left:auto;color:var(--faint);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:120px}
.token-form{display:grid;gap:4px;padding:6px;border-top:1px solid var(--line)}
.token-form .style-row input{width:100%}
/* ISSUE-43: the box-model visual — margin outside, padding inside, to scale */
.box-vis{margin:4px 0 8px;cursor:pointer}
.box-vis-band.box-vis-margin{background:color-mix(in srgb,var(--accent,#116dff) 8%,transparent);border:1px dashed var(--line,#e8e6e2);border-radius:6px}
.box-vis-border{border:1px solid var(--accent,#116dff);border-radius:4px;background:var(--panel-2,#fff)}
.box-vis-pad{background:color-mix(in srgb,var(--green,#2ba45e) 10%,transparent);border-radius:3px;transition:padding .15s}
.box-vis-core{background:var(--accent-soft,#eef4ff);border-radius:3px;text-align:center;font-size:10px;color:var(--soft);padding:6px 0;letter-spacing:.08em;text-transform:uppercase}
.box-sides{gap:4px}
.box-sides input{width:42px!important;padding:4px 3px!important;text-align:center}
.style-unit{font-size:10px;color:var(--soft,#8a8a8a)}
.style-seg{display:flex;gap:3px;flex-wrap:wrap;min-width:0}
.style-row{flex-wrap:wrap} /* a three-button seg breathes instead of clipping */
.style-seg button{all:unset;cursor:pointer;font-size:11px;padding:4px 9px;border-radius:6px;border:1px solid var(--line,#e8e6e2);color:inherit}
.style-seg button[aria-pressed="true"]{background:var(--accent,#116dff);color:#fff;border-color:var(--accent,#116dff)}

/* ISSUE-39: the pages list */
.pages-list{display:flex;flex-direction:column;gap:4px}
.page-row{all:unset;cursor:pointer;display:flex;align-items:center;justify-content:space-between;background:var(--panel);border:1px solid var(--line,#e8e6e2);border-radius:8px;padding:7px 10px}
.page-row:hover{border-color:var(--accent,#116dff)}
.page-del{cursor:pointer;color:var(--soft,#8a8a8a);padding:0 4px}
.page-del:hover{color:#d33}
.page-add{all:unset;cursor:pointer;font-size:11.5px;color:var(--accent,#116dff);padding:4px 2px}

/* ISSUE-40: the breakpoint context chip */
.bp-chip{font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:var(--accent,#116dff);border-radius:4px;padding:3px 7px;margin-left:8px}


/* ---- SHELL v2 — the Wix rail skeleton (ISSUE-48 premium pass) ---- */
main.studio { grid-template-columns: 48px 232px minmax(0, 1fr) 276px; }
main.studio.no-right { grid-template-columns: 48px 232px minmax(0, 1fr); }
nav.rail {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 10px 0; background: var(--panel); border-right: 1px solid var(--line);
}
nav.rail button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 9px; color: var(--faint);
  border: 1px solid transparent; transition: color .12s, background .12s;
}
nav.rail button svg { width: 18px; height: 18px; display: block; }
nav.rail button:hover { color: var(--ink); background: var(--panel-2); }
nav.rail button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); }
.panel#left { padding: 10px; }
.top .device button { padding: 5px 10px; }
.top .device button svg { width: 16px; height: 16px; }
.top button.primary { border-radius: 15px; padding: 6px 20px; }


/* ---- SHELL v3 — the shelf density: element tiles 2-across, quiet IG rows ---- */
#lib-host { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 8px; align-content: start; }
#lib-host .lib-cat { grid-column: 1 / -1; margin: 6px 0 2px; }
#lib-host .lib-item { margin: 0; }
#lib-host .lib-item .thumb { aspect-ratio: 1 / 1; border-radius: 7px; }
#lib-host .lib-item .thumb iframe { width: 300px; height: 300px; }
#lib-host .lib-item .cap { margin-top: 4px; }
#lib-host .lib-item .cap .kind { font-size: 11px; }
#lib-host .lib-item .gally,
#lib-host .lib-item .vars { grid-column: 1 / -1; } /* wide controls span both tiles */
.lib-item .gally .gally-thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.lib-item .gally .gally-thumbs .vcard { border: 1px solid var(--line); border-radius: 7px; overflow: hidden; background: var(--panel); cursor: pointer; }
.lib-item .gally .gally-thumbs .vcard[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
/* the IG picker: quiet rows under the elements */
.ig-profiles { display: flex; flex-direction: column; gap: 5px; }
.ig-profile { padding: 6px 8px; border-radius: 7px; display: grid; grid-template-columns: 1fr auto; gap: 0 8px; align-items: baseline; }
.ig-profile .ig-handle { font-size: 10.5px; font-weight: 600; }
.ig-profile .ig-meta { font-size: 9.5px; color: var(--soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ig-profile .ig-count { font-size: 9px; text-align: right; }
/* the tiles grid leaves the add-flow full width where needed */


/* ---- SHELL v3b: the uniform tile law (ISSUE-64 UUI fixes) ----
   Every shelf tile: the same width, the same thumb box, the same label.
   No clipped picker thumbs, no giant orphans. */
#lib-host .lib-item .thumb { aspect-ratio: 4 / 3; height: auto; }
#lib-host .lib-item .cap { justify-content: center; }
#lib-host .lib-item .cap .kind { font-size: 11.5px; }
#lib-host .lib-item .thumb svg { max-height: 100%; }
/* the gallery tile shows its current layout's thumb, uniform like the rest */
/* the inspector's LAYOUT thumbs for the placed gallery */
#inspector .gally { margin-top: 8px; }
#inspector .gally-thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
#inspector .gally-thumbs .vcard { border: 1px solid var(--line); border-radius: 7px; overflow: hidden; background: var(--panel); cursor: pointer; box-shadow: var(--shadow-1); }
#inspector .gally-thumbs .vcard:hover { border-color: var(--accent); box-shadow: var(--shadow-2); }
#inspector .gally-thumbs .vcard[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft), var(--shadow-1); }
#inspector .gally-thumbs .vthumb { aspect-ratio: 4/3; position: relative; overflow: hidden; background: var(--paper); }
#inspector .gally-thumbs .vthumb iframe { width: 480px; height: 360px; border: none; transform-origin: 0 0; pointer-events: none; position: absolute; inset: 0; }
#inspector .gally-thumbs .vlabel { font-size: 10px; color: var(--soft); padding: 3px 5px; text-align: center; }
#inspector .gplay { display: flex; gap: 6px; margin-top: 8px; }
#inspector .gplay .gtoggle { all: unset; flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px; font-size: 10.5px; color: var(--soft); background: var(--panel-2); border: 1px solid var(--line); border-radius: 7px; padding: 5px 6px; cursor: pointer; }
#inspector .gplay .gtoggle[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); font-weight: 600; }


/* ISSUE-64: the smart link rows (nav items) */
.list-linkwrap { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.link-kind { display: flex; gap: 2px; }
.link-kind-chip { all: unset; cursor: pointer; font-size: 9px; font-weight: 600; letter-spacing: .06em; padding: 2px 6px; border-radius: 4px; color: var(--faint, #98a0ac); border: 1px solid transparent; }
.link-kind-chip:hover { color: var(--ink); }
.link-kind-chip[aria-pressed="true"] { color: var(--accent, #116dff); background: var(--accent-soft, rgba(17,109,255,.1)); }
.list-linkwrap .list-href { width: 100%; font-size: 11px; color: var(--soft); }


/* ISSUE-64: the DESIGN group's sub-sections — Wix's grouping grammar */
.style-sub-head { font-size: 9.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--soft, #8a8a8a); margin: 12px 0 6px; padding-bottom: 4px; border-bottom: 1px solid var(--line, rgba(0,0,0,.08)); }
.design-group .style-row:first-of-type { margin-top: 0; }
.style-sub-head + .style-row { margin-top: 0; }


/* ═══ THE CHROME PASS v2 — the Product-Design-Lead composition (2026-11-10) ═══
   The top bar recomposed to the Wix grammar: ONE row, three zones —
   [ logo · page ⌄ · Autosaved · site ]   [ device toggles ]   [ undo redo ⋯ · Publish ].
   The noisy site settings (palette · slug · status · reset) fold into the "⋯"
   overflow; the eye lands on the one blue primary. Later rules win the cascade. */
header.top {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 14px; height: 48px; flex: 0 0 auto; padding: 0 12px;
  background: var(--panel); border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(16,24,40,.04);
}
.top-left { display: flex; align-items: center; gap: 8px; min-width: 0; }
.top .logo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 7px; flex: none;
  background: var(--accent); color: #fff;
}
.top .logo svg { width: 15px; height: 15px; display: block; }
.top .model { color: var(--faint); font-size: 12px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.autosaved { font-size: 12px; color: var(--faint); white-space: nowrap; margin: 0; }
.top-right { display: flex; align-items: center; justify-content: flex-end; gap: 6px; min-width: 0; }
.top .device { display: flex; gap: 2px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 9px; padding: 3px; justify-self: center; }
.top .device button { display: inline-flex; align-items: center; justify-content: center; padding: 5px 13px; border-radius: 6px; color: var(--faint); }
.top .device button svg { width: 15px; height: 15px; display: block; }
.top .device button:hover { color: var(--ink); }
.top .device button[aria-pressed="true"] { background: var(--panel); color: var(--ink); box-shadow: 0 1px 2px rgba(16,24,40,.12); }
.top .ibtn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; color: var(--soft); border: 1px solid transparent; }
.top .ibtn svg { width: 16px; height: 16px; display: block; }
.top .ibtn:hover { background: var(--panel-2); color: var(--ink); }
.top button.primary { background: var(--accent); color: #fff; font-weight: 600; border-radius: 8px; padding: 8px 20px; font-size: 13px; box-shadow: var(--shadow-1); }
.top button.primary:hover { background: #0d5cda; }
.top .bp-wh { font-size: 11.5px; color: var(--faint); white-space: nowrap; font-variant-numeric: tabular-nums; margin: 0 4px 0 2px; }

/* the page switcher — Wix's in-bar page menu */
.page-switch { position: relative; margin-left: 2px; }
.page-switch button { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 3px; font-size: 13px; font-weight: 500; color: var(--ink); padding: 5px 9px; border-radius: 7px; }
.page-switch button:hover { background: var(--panel-2); }
.page-switch .chev { width: 13px; height: 13px; color: var(--faint); }
.page-switch-list { position: absolute; top: calc(100% + 6px); left: 0; z-index: 200; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-3); min-width: 180px; max-height: 300px; overflow: auto; padding: 4px; }
.page-switch-row { all: unset; cursor: pointer; display: block; width: 100%; box-sizing: border-box; padding: 8px 12px; border-radius: 7px; font-size: 13px; color: var(--ink); }
.page-switch-row:hover { background: var(--accent-soft); }

/* the "⋯" overflow — palette · slug · status · reset, the quiet shelf */
.top-more { position: relative; }
.top-more > summary { list-style: none; cursor: pointer; }
.top-more > summary::-webkit-details-marker { display: none; }
.top-more[open] > summary { background: var(--panel-2); color: var(--ink); }
.top-more-panel { position: absolute; top: calc(100% + 8px); right: 0; z-index: 220; width: 252px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-3); padding: 12px; display: grid; gap: 11px; }
.top-more-panel .tm-field { display: grid; gap: 4px; }
.top-more-panel .tm-field > span { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.top-more-panel .tm-field select, .top-more-panel .tm-field input { width: 100%; box-sizing: border-box; background: var(--panel-2); color: var(--ink); border: 1px solid var(--line); border-radius: 7px; padding: 7px 9px; font: inherit; font-size: 12.5px; }
.top-more-panel .tm-field select:focus, .top-more-panel .tm-field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.top-more-panel .tm-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.top-more-panel .ghost { font-size: 12px; color: var(--soft); border: 1px solid var(--line); border-radius: 7px; padding: 5px 10px; }
.top-more-panel .ghost:hover { color: var(--ink); border-color: var(--line-2); }
.top-more-panel .view-live { font-size: 12px; color: var(--accent); text-decoration: none; justify-self: start; }
.top-more-panel .view-live.hidden { display: none; }
/* the W/H readout rides WITH the device toggles (Wix's breakpoint bar) */
header.top .device .bp-wh { padding: 0 6px 0 11px; margin-left: 5px; border-left: 1px solid var(--line); font-size: 11.5px; color: var(--faint); white-space: nowrap; font-variant-numeric: tabular-nums; align-self: center; }