/* GLASS FX 3.0 — THE NEW FRONT OF HOUSE.
   ══════════════════════════════════════════════════════════════════════
   Everything Phase 1 added to the chrome, in one file so it can be read
   (and reverted) as one piece: the page tabs and the quick bar, undo and
   redo, the toolbar down the left of the picture, the storyboard strip
   along the bottom, and the home screen.

   Same tokens as app.css — no colour is spelled by hand below the rule
   that says so there.
   ══════════════════════════════════════════════════════════════════════ */

/* ── THE BAR ──────────────────────────────────────────────────────── */
.bar-mark { background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; }
.bar-mark:hover { color: var(--acc); }

/* the page tabs and the quick bar share row two */
.bar-tabs { align-items: stretch; min-width: 0; }
.bar-tab { display: inline-flex; align-items: center; gap: 7px; }
.bar-tab b { font-weight: 500; font-size: 9px; color: var(--ink-4); letter-spacing: 0; }
.bar-tab.is-on b { color: var(--acc); }

.bar-quick {
  display: flex; align-items: center; gap: 2px;
  margin-left: 22px; padding-left: 14px; border-left: 1px solid var(--ink-5);
  min-width: 0; overflow: hidden; flex: 1 1 auto; align-self: center;
}
.bar-quick button {
  background: none; border: 0; padding: 3px 9px; border-radius: var(--r-ctl);
  color: var(--ink-3); font-size: 11.5px; white-space: nowrap; cursor: default;
}
.bar-quick button:hover:not(:disabled) { background: var(--ink-5); color: var(--ink-1); }
.bar-quick button:disabled { color: var(--ink-4); }
.bar-quick button kbd {
  font: 10px var(--mono); color: var(--ink-4); margin-left: 5px;
  border: 1px solid var(--ink-5); border-radius: 3px; padding: 0 3px;
}
.bar-quick .sep { width: 1px; height: 16px; background: var(--ink-5); margin: 0 6px; flex: none; }
.bar-quick .say { margin-left: auto; padding-left: 12px; color: var(--ink-4); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.bar-ico {
  background: none; border: 1px solid var(--ink-5); border-radius: var(--r-ctl);
  color: var(--ink-2); width: 30px; height: 26px; font-size: 15px; line-height: 1; cursor: default;
}
.bar-ico:hover:not(:disabled) { background: var(--ink-5); color: var(--ink-1); }
.bar-ico:disabled { color: var(--ink-4); }
.bar-right { display: flex; align-items: center; gap: 6px; }

/* ── THE TOOLBAR ──────────────────────────────────────────────────── */
.v3-tools {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%); z-index: 20;
  display: flex; flex-direction: column; gap: 2px; padding: 5px;
  background: var(--glass); backdrop-filter: blur(14px);
  border: 1px solid var(--ink-5); border-radius: 11px;
}
.v3-tools:empty { display: none; }
.v3-tools button {
  width: 34px; height: 34px; border: 0; border-radius: 8px; background: none;
  color: var(--ink-2); display: grid; place-items: center; cursor: default; position: relative;
}
.v3-tools button:hover { background: var(--ink-5); color: var(--ink-1); }
.v3-tools button.is-on { background: var(--acc-2); color: var(--ink-1); }
.v3-tools button svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.v3-tools button kbd {
  position: absolute; right: 2px; bottom: 1px; font: 8.5px var(--mono); color: var(--ink-4);
}
.v3-tools .rule { height: 1px; background: var(--ink-5); margin: 3px 4px; }
body[data-stage="present"] .v3-tools { display: none; }

/* ── THE STORYBOARD ───────────────────────────────────────────────── */
body[data-tab="story"][data-stage="compose"] { --strip-h: 122px; }
#stage { bottom: var(--strip-h, 0px); }
.v3-strip {
  position: absolute; bottom: 0; z-index: 2; height: var(--strip-h, 0px);
  left: calc(var(--rail-l) + var(--grip-l, 0px)); right: calc(var(--rail-r) + var(--grip-r, 0px));
  display: flex; align-items: stretch; gap: 0;
  background: var(--pit); border-top: 1px solid var(--ink-5);
  transition: left .12s ease, right .12s ease;
}
.v3-strip[hidden] { display: none; }
body[data-stage="present"] .v3-strip { display: none; }

.v3-strip-side {
  flex: none; width: 118px; padding: 8px 10px; border-right: 1px solid var(--ink-5);
  display: flex; flex-direction: column; gap: 4px;
}
.v3-strip-side .lbl { font-size: 10px; letter-spacing: .14em; color: var(--ink-3); font-weight: 600; }
.v3-strip-side .lbl em { font-style: normal; color: var(--ink-4); font-weight: 400; letter-spacing: 0; margin-left: 4px; }
.v3-strip-side button {
  background: var(--ink-5); border: 1px solid transparent; border-radius: 6px;
  color: var(--ink-2); font-size: 11px; padding: 4px 7px; text-align: left; cursor: default;
}
.v3-strip-side button:hover:not(:disabled) { color: var(--ink-1); border-color: var(--ink-4); }
.v3-strip-side button:disabled { color: var(--ink-4); }

.v3-strip-run {
  flex: 1 1 auto; min-width: 0; overflow-x: auto; overflow-y: hidden;
  display: flex; align-items: center; gap: 0; padding: 0 12px;
}
.v3-strip-run.is-over { background: rgb(201 162 39 / .08); }
.v3-strip-run .empty { color: var(--ink-3); font-size: 12px; line-height: 1.5; max-width: 560px; }
.v3-strip-run .empty b { color: var(--ink-2); font-weight: 500; }

.v3-stop {
  flex: none; width: 128px; cursor: default; user-select: none; touch-action: none; position: relative;
}
.v3-stop .card {
  height: 64px; border-radius: 7px; position: relative; overflow: hidden;
  background: linear-gradient(135deg, #2a2723, #161513);
  border: 2px solid transparent; display: grid; place-items: center; color: var(--ink-3);
}
.v3-stop.k-page .card { background: linear-gradient(135deg, #2c2619, #15130f); color: #e8d5b0; }
.v3-stop.k-hotspot .card { background: radial-gradient(circle at 50% 55%, #3a352c, #171614 70%); }
.v3-stop .card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.v3-stop .card svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.4; position: relative; }
.v3-stop .card .kind { position: relative; font-size: 10px; letter-spacing: .12em; }
.v3-stop .n {
  position: absolute; left: 5px; top: 4px; z-index: 1; font-size: 10px; color: var(--ink-1);
  background: rgb(0 0 0 / .6); padding: 0 6px; border-radius: 4px;
}
.v3-stop .dot { position: absolute; right: 6px; top: 6px; z-index: 1; width: 8px; height: 8px; border-radius: 50%; background: #5fcf8a; }
.v3-stop.is-unset .dot { background: var(--acc); }
.v3-stop.is-dead .dot { background: var(--warn); }
.v3-stop .x {
  position: absolute; right: 3px; bottom: 3px; z-index: 1; display: none;
  background: rgb(0 0 0 / .65); border: 0; color: var(--ink-2); border-radius: 4px; width: 18px; height: 18px; font-size: 11px; line-height: 1;
}
.v3-stop:hover .x { display: block; }
.v3-stop .t {
  display: block; margin-top: 5px; font-size: 11.5px; color: var(--ink-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.v3-stop.is-unset .t em, .v3-stop.is-dead .t em { font-style: normal; color: var(--acc); }
.v3-stop.is-on .card { border-color: var(--acc); }
.v3-stop.is-live .card { box-shadow: 0 0 0 1px var(--ink-1) inset; }
.v3-stop.is-dragging { opacity: .45; }
.v3-join { flex: none; width: 26px; text-align: center; color: var(--ink-4); font-size: 13px; }

/* ── THE TIMELINE (MOTION) ─────────────────────────────────────────
   The storyboard's place, on the MOTION page. Every part says what it
   does under the pointer: the ruler and the lanes scrub (↔), a key
   grabs, Shift over the lanes draws a box, Ctrl over a key adds it. */
body[data-tab="motion"][data-stage="compose"] { --strip-h: 196px; }
.v3-tl {
  position: absolute; bottom: 0; z-index: 2; height: var(--strip-h, 0px);
  left: calc(var(--rail-l) + var(--grip-l, 0px)); right: calc(var(--rail-r) + var(--grip-r, 0px));
  display: flex; flex-direction: column; background: var(--pit); border-top: 1px solid var(--ink-5);
  transition: left .12s ease, right .12s ease; user-select: none;
}
.v3-tl[hidden] { display: none; }
body[data-stage="present"] .v3-tl { display: none; }
body.is-show .v3-tl { display: none; }

.tl-bar {
  flex: none; height: 36px; display: flex; align-items: center; gap: 4px; padding: 0 8px;
  border-bottom: 1px solid var(--ink-5); white-space: nowrap; overflow: hidden;
}
.tl-bar button {
  height: 24px; min-width: 26px; padding: 0 7px; border-radius: 6px; cursor: pointer;
  background: var(--ink-5); border: 1px solid transparent; color: var(--ink-2); font-size: 11.5px; line-height: 1;
}
.tl-bar button:hover { color: var(--ink-1); border-color: var(--ink-4); background: rgb(242 238 230 / .14); }
.tl-bar button:active { transform: translateY(1px); }
.tl-bar .tl-play { min-width: 34px; color: var(--ink-1); }
.tl-bar .tl-play.is-on { background: var(--acc-2); }
.tl-bar .tl-keybtn { color: var(--acc); margin-left: 4px; }
.tl-bar .tl-keybtn:hover { border-color: var(--acc); }
.tl-timewrap { display: flex; align-items: center; gap: 3px; margin: 0 4px; color: var(--ink-3); font-size: 11px; cursor: text; }
.tl-timewrap input, .tl-lbl input[type="text"] {
  width: 56px; font: 12px var(--mono); color: var(--ink-1); background: rgb(0 0 0 / .3);
  border: 1px solid var(--ink-5); border-radius: 5px; padding: 3px 5px; cursor: text;
}
.tl-timewrap input:hover, .tl-lbl input[type="text"]:hover { border-color: var(--ink-4); }
.tl-timewrap input:focus, .tl-lbl input[type="text"]:focus { border-color: var(--acc); outline: none; }
.tl-lbl { display: flex; align-items: center; gap: 5px; color: var(--ink-3); font-size: 11px; margin-left: 6px; }
.tl-lbl select {
  background: rgb(0 0 0 / .3); color: var(--ink-1); border: 1px solid var(--ink-5); border-radius: 5px;
  font-size: 11px; padding: 2px 4px; cursor: pointer;
}
.tl-lbl select:hover:not(:disabled) { border-color: var(--ink-4); }
.tl-lbl select:disabled { color: var(--ink-4); cursor: not-allowed; }
.tl-loopl { cursor: pointer; }
.tl-loopl input { cursor: pointer; margin: 0; }
.tl-grow { flex: 1 1 auto; }
.tl-zoom { width: 110px; cursor: ew-resize; accent-color: var(--acc); }

.tl-body { flex: 1 1 auto; min-height: 0; display: flex; overflow-y: auto; overflow-x: hidden; }
.tl-names { flex: none; width: 176px; border-right: 1px solid var(--ink-5); }
.tl-rulerpad {
  height: 22px; border-bottom: 1px solid var(--ink-5); padding: 0 8px;
  font-size: 10px; letter-spacing: .12em; color: var(--ink-4); line-height: 22px; text-transform: uppercase;
}
.tl-name {
  height: 26px; display: flex; flex-direction: column; justify-content: center; padding-right: 6px;
  border-bottom: 1px solid rgb(242 238 230 / .04); cursor: pointer; overflow: hidden;
}
.tl-name b { font-size: 11.5px; font-weight: 500; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.15; }
.tl-name em { font-style: normal; font-size: 9.5px; color: var(--ink-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; }
.tl-name:hover { background: var(--ink-5); }
.tl-name:hover b { color: var(--ink-1); }
.tl-name.is-on { background: rgb(201 162 39 / .12); box-shadow: inset 2px 0 0 var(--acc); }
.tl-name.is-on b { color: var(--ink-1); }
.tl-empty { padding: 10px; font-size: 11.5px; line-height: 1.5; color: var(--ink-3); white-space: normal; }
.tl-empty b { color: var(--ink-2); }

.tl-view { flex: 1 1 auto; min-width: 0; overflow-x: auto; overflow-y: hidden; position: relative; }
.tl-inner { position: relative; min-height: 100%; }
.tl-ruler { position: relative; height: 22px; border-bottom: 1px solid var(--ink-5); cursor: ew-resize; background: rgb(0 0 0 / .18); }
.tl-ruler:hover { background: rgb(242 238 230 / .05); }
.tl-tick { position: absolute; bottom: 0; width: 1px; height: 8px; background: var(--ink-4); pointer-events: none; }
.tl-tick--m { height: 4px; background: rgb(242 238 230 / .12); }
.tl-tlab { position: absolute; top: 3px; transform: translateX(3px); font: 10px var(--mono); color: var(--ink-3); pointer-events: none; }
.tl-lanes { position: relative; min-height: 60px; cursor: ew-resize; }
.tl-row { position: relative; height: 26px; border-bottom: 1px solid rgb(242 238 230 / .04); cursor: ew-resize; }
.tl-row:hover { background: rgb(242 238 230 / .035); }
.tl-row.is-on { background: rgb(201 162 39 / .06); }
body.is-tl-shift .tl-lanes, body.is-tl-shift .tl-row { cursor: crosshair; }

.tl-span { position: absolute; top: 50%; height: 3px; margin-top: -1.5px; background: rgb(201 162 39 / .38); pointer-events: none; }
.tl-span.is-lin { background: rgb(242 238 230 / .26); }
.tl-rep { position: absolute; top: 50%; height: 0; border-top: 1px dashed rgb(242 238 230 / .22); pointer-events: none; }
.tl-rep span { position: absolute; top: -13px; left: 8px; font-size: 9.5px; color: var(--ink-4); white-space: nowrap; }
.tl-proc {
  position: absolute; top: 5px; bottom: 5px; border-radius: 4px; padding-left: 8px; font-style: normal;
  font-size: 10.5px; line-height: 16px; color: var(--ink-3); white-space: nowrap; overflow: hidden;
  background: repeating-linear-gradient(135deg, rgb(95 180 255 / .13) 0 8px, rgb(95 180 255 / .06) 8px 16px);
  border-left: 2px solid rgb(95 180 255 / .6);
}
.tl-k {
  position: absolute; top: 50%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; z-index: 2;
  transform: rotate(45deg); cursor: grab; border: 1px solid rgb(0 0 0 / .55);
  background: var(--acc); transition: transform .08s ease, box-shadow .08s ease;
}
.tl-k--lin { background: #d9d4ca; }
.tl-k--over { background: #5fb4ff; border-radius: 3px; }
.tl-k:hover { transform: rotate(45deg) scale(1.35); box-shadow: 0 0 0 2px rgb(242 238 230 / .25); }
.tl-k.is-sel { box-shadow: 0 0 0 2px #fff, 0 0 8px rgb(255 255 255 / .6); }
body.is-tl-ctrl .tl-k { cursor: copy; }
body.is-tl-grab, body.is-tl-grab * { cursor: grabbing !important; }
body.is-tl-scrub, body.is-tl-scrub * { cursor: ew-resize !important; }

.tl-head { position: absolute; top: 0; bottom: 0; left: 0; width: 0; z-index: 4; pointer-events: none; }
.tl-head::before { content: ""; position: absolute; top: 0; bottom: 0; left: -0.5px; width: 1px; background: #ff5a4e; }
.tl-head i {
  position: absolute; top: 0; left: -6px; width: 12px; height: 14px; background: #ff5a4e;
  clip-path: polygon(0 0, 100% 0, 100% 62%, 50% 100%, 0 62%);
}
.tl-ghost { position: absolute; top: 0; bottom: 0; left: 0; width: 1px; background: rgb(242 238 230 / .22); pointer-events: none; z-index: 3; }
.tl-ghost[hidden] { display: none; }
.tl-ghost b {
  position: absolute; top: 3px; left: 5px; font: 10px var(--mono); color: var(--ink-1); white-space: nowrap;
  background: rgb(0 0 0 / .7); padding: 1px 4px; border-radius: 3px; font-weight: 400;
}
.tl-marq { position: absolute; border: 1px dashed rgb(242 238 230 / .7); background: rgb(242 238 230 / .07); pointer-events: none; z-index: 5; }
.tl-marq[hidden] { display: none; }

/* ── HOME ─────────────────────────────────────────────────────────── */
.v3-home {
  position: fixed; inset: 0; z-index: 900; overflow: auto;
  background: rgb(11 10 9 / .96); backdrop-filter: blur(10px);
}
.v3-home[hidden] { display: none; }
.v3-home .in { max-width: 1120px; margin: 0 auto; padding: 38px 28px 60px; }
.v3-home .top { display: flex; align-items: baseline; gap: 14px; margin-bottom: 26px; }
.v3-home .top .mk { font-weight: 600; letter-spacing: .14em; color: var(--ink-1); }
.v3-home .top .mk i { font-style: normal; color: var(--acc); margin-left: 6px; font-size: 11px; }
.v3-home .top .close { margin-left: auto; }
.v3-home h2 { font-size: 20px; font-weight: 500; color: var(--ink-1); margin: 0 0 4px; }
.v3-home .sub { color: var(--ink-3); margin: 0 0 16px; }
.v3-home .fmts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 34px; }
.v3-fmt {
  text-align: left; border: 1px solid var(--ink-5); border-radius: 11px; background: var(--pit);
  padding: 14px 15px; color: var(--ink-2); cursor: default; min-height: 108px;
}
.v3-fmt:hover:not(:disabled) { border-color: var(--acc); }
.v3-fmt b { display: block; color: var(--ink-1); font-size: 14px; font-weight: 500; margin-bottom: 4px; }
.v3-fmt small { color: var(--ink-3); font-size: 12px; line-height: 1.45; display: block; }
.v3-fmt .tag { display: inline-block; font-size: 9.5px; letter-spacing: .12em; color: var(--ink-3); margin-bottom: 8px; }
.v3-fmt:disabled { opacity: .5; }
.v3-fmt:disabled .tag { color: var(--acc); }
.v3-home .recent { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
/* a tile = its picture over its name (V3 · Home thumbnails) */
.v3-rec {
  text-align: left; border: 1px solid var(--ink-5); border-radius: 9px; background: var(--pit);
  padding: 0; color: var(--ink-2); cursor: default; overflow: hidden;
  display: flex; flex-direction: column;
}
.v3-rec .pic { display: block; aspect-ratio: 16 / 9; background: #0b0b0d; overflow: hidden; border-bottom: 1px solid var(--ink-5); }
.v3-rec .pic img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.v3-rec:hover .pic img { transform: scale(1.03); }
.v3-rec .pic.is-none { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--pit), #121216); }
.v3-rec .pic.is-none i { font-style: normal; font-size: 30px; font-weight: 300; color: var(--ink-4); letter-spacing: .04em; }
.v3-rec .txt { display: block; padding: 10px 13px 11px; }
.v3-rec:hover { border-color: var(--ink-4); color: var(--ink-1); }
.v3-rec b { display: block; color: var(--ink-1); font-weight: 500; }
.v3-rec small { color: var(--ink-3); font-size: 11.5px; }

/* ── THE INSPECTOR'S TABS ─────────────────────────────────────────── */
.gfx-panel[data-id="inspector"] .tp-tbiv_t { font-size: 11px; letter-spacing: .04em; }

/* ── PREVIOUS VERSIONS ────────────────────────────────────────────── */
.v3-vers { display: flex; flex-direction: column; gap: 6px; max-height: 52vh; overflow: auto; margin: 6px 0 4px; }
.v3-ver {
  display: flex; justify-content: space-between; gap: 12px; text-align: left;
  border: 1px solid var(--ink-5); border-radius: 8px; background: none; color: var(--ink-2);
  padding: 9px 12px; cursor: default;
}
.v3-ver:hover { border-color: var(--acc); color: var(--ink-1); }
.v3-ver span:last-child { color: var(--ink-3); font-size: 11.5px; white-space: nowrap; }

/* ── READY CHECK ──────────────────────────────────────────────────── */
.v3-check { display: flex; gap: 9px; align-items: flex-start; padding: 7px 2px; border-bottom: 1px solid var(--ink-5); font-size: 12px; }
.v3-check i { font-style: normal; flex: none; width: 16px; text-align: center; }
.v3-check.ok i { color: #5fcf8a; }
.v3-check.warn i { color: var(--acc); }
.v3-check span { flex: 1; color: var(--ink-2); }
.v3-check button {
  flex: none; background: none; border: 0; color: var(--acc); font-size: 11.5px; cursor: default; padding: 0;
}
.v3-check button:hover { text-decoration: underline; }

/* the two plain buttons on Home keep their own width */
.v3-home .top .close, .v3-home .gfx-btnrow .gfx-btn { width: auto; flex: 0 0 auto; padding-left: 14px; padding-right: 14px; }
.v3-home .top .close { margin-left: auto; }


/* ══ PHASE 2 ═══════════════════════════════════════════════════════ */

.bar-look { background: none; border: 1px solid var(--ink-5); border-radius: var(--r-ctl); color: var(--ink-2); padding: 4px 10px; height: 26px; font-size: 12px; cursor: default; white-space: nowrap; }
.bar-look:hover { background: var(--ink-5); color: var(--ink-1); }

/* a sheet with a grid in it is wider than a dialog */
.sheet-card:has(.lk-wrap), .sheet-card:has(.wz), .sheet-card:has(.bk-two) { width: min(1040px, 94vw); }
.sheet-card .sheet-acts { display: flex; gap: 8px; align-items: center; }
.sheet-card .sheet-acts select { flex: 0 0 auto; }

/* ── the look ── */
.lk-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 6px 0 18px; }
.lk-grid--wiz { grid-template-columns: repeat(4, 1fr); }
.lk-card { text-align: left; background: var(--pit); border: 1px solid var(--ink-5); border-radius: 10px; padding: 0 0 10px; color: var(--ink-2); cursor: default; overflow: hidden; }
.lk-card:hover { border-color: var(--ink-3); }
.lk-card.is-on { border-color: var(--acc); box-shadow: 0 0 0 1px var(--acc) inset; }
.lk-card b { display: block; padding: 9px 11px 2px; color: var(--ink-1); font-weight: 500; font-size: 13px; }
.lk-card small { display: block; padding: 0 11px; color: var(--ink-3); font-size: 11px; line-height: 1.4; }
.lk-card em { display: block; padding: 5px 11px 0; color: var(--ink-4); font-size: 10.5px; font-style: normal; }
.lk-pic { height: 118px; position: relative; background: radial-gradient(120% 100% at 30% 20%, #3a3a3d, #121214 70%); display: grid; place-items: center; padding: 10px; }
.lk-pic::before { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, transparent 55%, color-mix(in srgb, var(--lk-acc, #fff) 22%, transparent)); }
.lk-panel { position: relative; padding: 9px 13px; text-align: center; max-width: 92%; }
.lk-h { font-size: 19px; line-height: 1.1; white-space: nowrap; }
.lk-s { font-size: 10px; opacity: .75; margin-top: 3px; white-space: nowrap; }
.lk-btn { position: absolute; right: 9px; bottom: 8px; font-size: 8.5px; letter-spacing: .14em; padding: 4px 9px; border-radius: 999px; border: 1px solid rgb(255 255 255 / .5); color: #fff; background: rgb(255 255 255 / .08); }
.lk-btn--solid { background: var(--lk-acc, #c9a227); border-color: var(--lk-acc, #c9a227); color: #111; font-weight: 600; letter-spacing: .04em; }
.lk-type h3 { font-size: 12px; letter-spacing: .08em; color: var(--ink-3); font-weight: 600; margin: 0 0 8px; }
.lk-row { display: grid; grid-template-columns: 1.3fr 1.3fr .7fr 1fr .6fr .6fr; gap: 10px; align-items: end; }
.lk-row .sheet-f { margin-bottom: 10px; }
.lk-tick input { width: 18px; height: 18px; margin: 6px 0; }

/* ── the brand ── */
.bk-two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; }
.bk-col { display: flex; gap: 8px; align-items: center; }
.bk-col input[type=color] { width: 36px; height: 30px; padding: 0 2px; flex: none; }
.bk-logo { min-height: 64px; border: 1px dashed var(--ink-4); border-radius: 8px; display: grid; place-items: center; padding: 8px; margin-bottom: 6px; background: repeating-conic-gradient(#1b1b1d 0 25%, #151517 0 50%) 0 0 / 16px 16px; }
.bk-logo img { max-height: 90px; max-width: 100%; }
.bk-logo span { color: var(--ink-4); font-size: 12px; }
.bk-web { margin: 6px 0 14px; padding: 12px 14px; border: 1px solid var(--ink-5); border-radius: 10px; background: var(--panel, #161618); }
.bk-web > label { display: block; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px; }
.bk-web .sheet-row { display: flex; gap: 8px; }
.bk-web .sheet-row input { flex: 1; }
.bk-title { color: var(--ink-1); font-weight: 500; margin: 8px 0 2px; }
.bk-h { font-size: 11px; color: var(--ink-3); margin: 10px 0 5px; }
.bk-swatches { display: flex; gap: 6px; flex-wrap: wrap; }
.bk-sw { width: 30px; height: 30px; border-radius: 7px; border: 1px solid rgb(255 255 255 / .18); cursor: pointer; }
.bk-sw:hover { outline: 2px solid var(--acc); outline-offset: 2px; }
.bk-fonts, .bk-logos { display: flex; gap: 6px; flex-wrap: wrap; }
.bk-font { background: var(--ink-5); border: 1px solid transparent; border-radius: 6px; color: var(--ink-2); padding: 4px 9px; font-size: 12px; cursor: pointer; }
.bk-font:hover { border-color: var(--acc); color: var(--ink-1); }
.bk-font i { color: var(--ink-4); font-size: 10.5px; }
.bk-lg { width: 120px; height: 64px; border: 1px solid var(--ink-5); border-radius: 7px; background: repeating-conic-gradient(#1b1b1d 0 25%, #151517 0 50%) 0 0 / 14px 14px; display: grid; place-items: center; padding: 4px; cursor: pointer; overflow: hidden; }
.bk-lg:hover { border-color: var(--acc); }
.bk-lg img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* ── the wizard ── */
.wz-steps { display: flex; margin: -6px -24px 16px; border-bottom: 1px solid var(--ink-5); }
.wz-steps div { flex: 1; padding: 10px 6px 12px; text-align: center; color: var(--ink-4); font-size: 11.5px; }
.wz-steps div.on { color: var(--ink-1); box-shadow: inset 0 -2px 0 var(--acc); }
.wz-steps div.done { color: #5fcf8a; }
.wz-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 12px; }
.wz-grid .sheet-f { grid-column: span 2; }
.wz-grid .sheet-f.is-short { grid-column: span 1; }
.wz-drop { border: 1.5px dashed var(--ink-4); border-radius: 10px; padding: 26px; text-align: center; color: var(--ink-3); display: flex; flex-direction: column; gap: 8px; align-items: center; margin-bottom: 12px; }
.wz-drop.is-over { border-color: var(--acc); background: rgb(201 162 39 / .06); }
.wz-drop > div { color: var(--ink-2); }
.wz-ticks { columns: 2; margin: 4px 0 12px; }
.wz-tick { display: flex; gap: 10px; align-items: center; padding: 5px 0; color: var(--ink-2); break-inside: avoid; }
.wz-tick input { width: 16px; height: 16px; }
.wz-tick em { margin-left: auto; font-style: normal; font-size: 10px; letter-spacing: .1em; color: var(--ink-4); }

/* ── waiting rooms, and the chips ── */
.gfx-item.is-waiting .nm { color: var(--acc); }
.gfx-item.is-waiting em { color: var(--acc) !important; }
.gfx-item.is-arming { outline: 1px solid var(--acc); outline-offset: -1px; }
.v3-waiting { border: 1px solid var(--acc-2); }
.v3-chips { display: flex; flex-wrap: wrap; gap: 5px; padding: 6px 6px 8px; border-bottom: 1px solid var(--ink-5); margin-bottom: 4px; }
.v3-chip { background: var(--ink-5); border: 1px solid transparent; border-radius: 6px; color: var(--ink-3); font-size: 11px; padding: 4px 8px; cursor: default; }
.v3-chip:hover { color: var(--ink-1); border-color: var(--ink-4); }
.v3-chip.is-on { color: var(--ink-1); border-color: var(--acc); background: rgb(201 162 39 / .12); }
.v3-chips-acts { width: 100%; display: flex; gap: 6px; margin-top: 4px; }
.v3-chips-acts .gfx-btn { flex: 1; font-size: 11px; }

/* ── the station column on the storyboard, and the loop mark ── */
.v3-stop .st { display: block; margin-top: 2px; font-size: 10px; letter-spacing: .04em; color: var(--acc); background: none; border: 0; padding: 0; cursor: default; text-align: left; }
.v3-stop .st.is-pinned { color: var(--ink-3); }
.v3-stop .st:hover { text-decoration: underline; }
.v3-stop .lp { position: absolute; left: 6px; bottom: 4px; z-index: 1; font-size: 11px; color: var(--ink-2); }
.v3-loop { padding: 4px 4px 6px; }
.v3-loop .gfx-btnrow { margin-top: 6px; }

/* ── the ICS between the stations ── */
.v3-zones { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 8px; }
.v3-zone { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--ink-5); border-radius: 8px; background: var(--pit); font-size: 12px; }
.v3-zone-l { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 8px; }
.v3-zone-l b { color: var(--ink-1); font-weight: 500; }
.v3-zone-l em { font-style: normal; color: var(--ink-4); font-family: var(--mono); font-size: 10.5px; }
.v3-zone select { grid-column: 1 / -1; }
.v3-zone label { display: flex; gap: 6px; align-items: center; color: var(--ink-2); }
.v3-zone label input { width: 14px; height: 14px; margin: 0; }

/* ── V3 · SHIP › Send it out — the web presentation folder ── */
.v3-ship { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px 12px; font-size: 12px; color: var(--ink-2); }
.v3-ship h4 { margin: 4px 0 0; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-1); }
.v3-ship .say { margin: 0; line-height: 1.5; color: var(--ink-3); }
.v3-ship .sm { font-size: 11px; color: var(--ink-4); }
.v3-ship .lbl { margin-top: 6px; color: var(--ink-2); }
.v3-ship .lbl em { font-style: normal; color: var(--ink-4); }
.v3-ship__in { width: 100%; box-sizing: border-box; padding: 7px 9px; border-radius: 6px; border: 1px solid var(--ink-5); background: var(--pit); color: var(--ink-1); font: 11.5px var(--mono); }
.v3-ship__in:focus { outline: none; border-color: var(--acc-2); }
.v3-ship .gfx-btnrow { margin: 4px 0; flex-wrap: wrap; }
.v3-ship__out:empty { display: none; }
.v3-ship__out { display: flex; flex-direction: column; gap: 6px; }
.v3-ship__done, .v3-ship__up { padding: 9px 10px; border: 1px solid var(--ink-5); border-radius: 8px; background: var(--pit); line-height: 1.55; }
.v3-ship__done b { color: var(--ink-1); }
.v3-ship__done .path { font-family: var(--mono); word-break: break-all; }
.v3-ship__up div { font-family: var(--mono); font-size: 11px; color: var(--ink-1); }
.v3-ship__up em { font-style: normal; color: var(--ink-4); }
.v3-ship .soon { margin-top: 8px; }
.v3-ship__up span { display: block; margin-top: 4px; }
.gfx-btnrow--top.gfx-waysin.v3-sendrow { grid-template-columns: 1fr 1fr; }
/* ── SHIP › On their website ── */
.v3-web { border-top: 1px solid var(--ink-5); margin-top: 6px; }
.v3-cover { aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: var(--pit); border: 1px solid var(--ink-5); display: flex; align-items: center; justify-content: center; }
.v3-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v3-cover span { color: var(--ink-4); font-size: 11px; }
.v3-code { width: 100%; box-sizing: border-box; resize: vertical; padding: 7px 9px; border-radius: 6px; border: 1px solid var(--ink-5); background: var(--pit); color: var(--ink-2); font: 10.5px/1.45 var(--mono); }
.v3-web__row { display: flex; align-items: center; gap: 8px; color: var(--ink-3); font-size: 11.5px; }
.v3-web__row select { background: var(--pit); color: var(--ink-1); border: 1px solid var(--ink-5); border-radius: 5px; padding: 3px 6px; }

/* ── V3 · NULLS — the square you click in the picture, the list, the ticks ── */
.gfx-null-layer { position: absolute; inset: 0; pointer-events: none; z-index: 9; }
body[data-stage="present"] .gfx-null-layer, body.is-show .gfx-null-layer { display: none; }
.gfx-null-mark { position: absolute; left: 0; top: 0; width: 14px; height: 14px; padding: 0; pointer-events: auto; cursor: pointer;
  border: 1.5px solid #ffd35a; background: rgba(0,0,0,.35); border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.6); }
.gfx-null-mark.is-on { border-color: #fff; background: rgba(255,211,90,.35); width: 16px; height: 16px; margin: -1px 0 0 -1px; }
.gfx-null-mark:hover { background: rgba(255,211,90,.25); }
body.is-picking #stage, body.is-picking #application-canvas { cursor: crosshair; }
.v3-nullrow .i { color: #ffd35a; }
.v3-links { padding: 8px 12px 12px; font-size: 12px; color: var(--ink-2); }
.v3-links__h { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin: 4px 0 6px; }
.v3-link { display: flex; align-items: center; gap: 8px; padding: 4px 2px; cursor: pointer; }
.v3-link input { width: 14px; height: 14px; margin: 0; }
.v3-link span { flex: 1; color: var(--ink-1); }
.v3-link em { font-style: normal; color: var(--ink-4); font-size: 10.5px; }
.v3-links__say, .v3-orbit__say { color: var(--ink-4); font-size: 11px; line-height: 1.5; margin: 8px 0 0; }
.v3-orbit__h { padding: 8px 12px 2px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #ffb840; }
.v3-orbit__say { padding: 0 12px 10px; }

/* ── V3 · WALLS ── */
.v3-walls { padding: 8px 12px 4px; font-size: 12px; color: var(--ink-2); }
.v3-walls .say { margin: 0 0 6px; color: var(--ink-3); line-height: 1.5; }
.v3-walls__acts { grid-template-columns: 1fr 1fr; }
.v3-wall-i { color: #ff6fa0; }
.v3-corners { display: flex; flex-direction: column; gap: 3px; padding: 4px 12px 10px; }
.v3-corner { display: grid; grid-template-columns: 22px 1fr 1fr 24px; gap: 6px; align-items: center; font-size: 11px; color: var(--ink-3); }
.v3-corner input { width: 100%; box-sizing: border-box; background: var(--pit); color: var(--ink-1); border: 1px solid var(--ink-5); border-radius: 5px; padding: 3px 6px; font: 11px var(--mono); }

/* ── V3 · animated nulls: the keyframes list ── */
.v3-keys { padding: 4px 12px 10px; font-size: 12px; }
.v3-key { display: grid; grid-template-columns: 44px 1fr 22px 22px; gap: 6px; align-items: center; padding: 3px 0; border-bottom: 1px solid var(--ink-5); }
.v3-key b { color: #ffd35a; font-weight: 600; font-family: var(--mono); font-size: 11px; }
.v3-key span { color: var(--ink-3); font-family: var(--mono); font-size: 10.5px; }