/* Newguard Builder — daylight glass
   Ground: light grey with soft periwinkle aurora glows (all CSS, no assets).
   Material: frosted glass panels — translucent white, backdrop blur,
   1px navy hairlines, soft offset shadows.
   Accent: periwinkle #4C63E6; the primary action is a periwinkle gradient
   pill with white text and a blue bloom.
   Red stays reserved for destructive actions.
   Brand: the .ngw wordmark (cursor + NG at rest; NEWGUARD on hover, the
   tail sliding out of the G) — hovering anywhere on .brand plays it.
   Interaction contract: every control presses. Hover lifts on a slow
   ease-out with a glow bloom; :active compresses instantly (.06s); release
   springs back on an overshoot curve. That fast-in / springy-out asymmetry
   is what makes clicks feel physical — keep it when editing. */
:root {
  --ground-0: #E7E9F0;
  --ground-1: #EEF0F5;
  --glass: rgba(255, 255, 255, .62);
  --glass-2: rgba(255, 255, 255, .78);
  --raised: rgba(76, 99, 230, .08);
  --line: rgba(24, 33, 66, .14);
  --line-soft: rgba(24, 33, 66, .08);
  --ink: #182142;
  --muted: #545F82;
  --accent: #4C63E6;
  --accent-deep: #3B50C9;
  --accent-soft: rgba(76, 99, 230, .12);
  --cta-grad: linear-gradient(180deg, #445CE0 0%, #5F7BF0 100%);
  --on-cta: #FFFFFF;
  --user-grad: linear-gradient(135deg, #3D4FD0 0%, #5A75EE 100%);
  --danger: #C03A31;
  --danger-ink: #A32B23;
  --danger-line: rgba(192, 58, 49, .4);
  --danger-bg: rgba(220, 70, 60, .08);
  --ok: #0E8A5F;
  --warn: #9A6A12;
  --shadow-rest: 0 2px 10px rgba(24, 33, 66, .1);
  --shadow-lift: 0 6px 18px rgba(24, 33, 66, .14), 0 2px 30px rgba(76, 99, 230, .12);
  --bloom: 0 4px 18px rgba(76, 99, 230, .35), 0 10px 40px rgba(76, 99, 230, .22);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .5, 1);
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --display: var(--sans);
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; color: var(--ink); font-family: var(--sans); font-size: 14px; line-height: 1.5;
  background-color: var(--ground-0);
}
/* daylight ground on a fixed layer (background-attachment:fixed is broken on iOS) */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    radial-gradient(900px 620px at 88% -12%, rgba(96, 122, 255, .14), transparent 65%),
    radial-gradient(760px 540px at -8% 108%, rgba(63, 88, 230, .1), transparent 65%),
    radial-gradient(640px 420px at 55% 118%, rgba(129, 104, 255, .08), transparent 65%),
    linear-gradient(180deg, var(--ground-1) 0%, var(--ground-0) 55%, #E2E5EF 100%);
}
.view { min-height: 100vh; display: flex; flex-direction: column; animation: view-in .34s var(--ease-out); }
@keyframes view-in { from { opacity: 0; transform: translateY(5px); } }
[hidden] { display: none !important; }
h1 { font-family: var(--display); font-weight: 800; font-size: clamp(30px, 4vw, 38px); margin: 0 0 6px; letter-spacing: -.02em; color: #1B2650; }
.sub { color: var(--muted); margin: 0 0 26px; }
.mono { font-family: var(--mono); font-size: 12px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
::selection { background: rgba(76, 99, 230, .25); }

/* thin scrollbars */
* { scrollbar-width: thin; scrollbar-color: rgba(24, 33, 66, .25) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: rgba(24, 33, 66, .22); border-radius: 8px; border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background-color: rgba(24, 33, 66, .38); }
*::-webkit-scrollbar-track { background: transparent; }

/* ---- brand: Newguard wordmark ----
   Rest: cursor + NG. Hover: the G-U-A-R-D group slides right while a cover
   riding inside it uncovers E and W exactly at the G's edge, and a second
   cover wipes U-A-R-D clear just behind it — the mark resolves to NEWGUARD.
   Colour = currentColor; the covers are *painted*, so --ngw-bg must match
   the colour sitting behind the mark (the glass header over the ground).
   The box is sized for the full word, so expanding never shifts layout. */
.ngw {
  --ngw-travel: 340ms;
  --ngw-wipe: 400ms;
  --ngw-ease: cubic-bezier(.34, 1.06, .4, 1);    /* travel: slight overshoot */
  --ngw-wipe-ease: cubic-bezier(.62, 0, .3, 1);  /* wipe: never passes its anchor */
  --ngw-bg: #F8F9FB;
  display: block; color: var(--ink); width: 232px;
}
.ngw svg { display: block; width: 100%; height: auto; }
.ngw .cov { fill: var(--ngw-bg); }
.ngw-tail {
  transform: translate(-260px, 0);
  transition: transform var(--ngw-travel) var(--ngw-ease);
}
.cov-ta {
  transform: translate(1032px, 0) scaleX(1) translate(-1032px, 0);
  transition: transform var(--ngw-wipe) var(--ngw-wipe-ease);
}
.brand:hover .ngw-tail, .ngw:hover .ngw-tail, .ngw.is-open .ngw-tail { transform: translate(0, 0); }
.brand:hover .cov-ta, .ngw:hover .cov-ta, .ngw.is-open .cov-ta { transform: translate(1032px, 0) scaleX(0) translate(-1032px, 0); }
/* glyph library holder — present, measurable by <use>, out of flow */
.glyphs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---- banner ---- */
.app-banner {
  background: rgba(76, 99, 230, .1); color: var(--ink);
  backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border-bottom: 1px solid var(--line);
  padding: 10px 20px; font-size: 13.5px; line-height: 1.5; white-space: pre-wrap;
}
.app-banner.error { background: rgba(220, 70, 60, .1); color: #7E211A; border-bottom-color: var(--danger-line); }
.app-banner code { font-family: var(--mono); background: rgba(24, 33, 66, .08); padding: 1px 6px; border-radius: 6px; }

/* ---- buttons: the press system ---- */
.btn {
  font: 600 13px var(--sans); color: var(--ink);
  background: var(--glass-2); border: 1px solid var(--line); border-radius: 999px;
  padding: 7px 15px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
  box-shadow: var(--shadow-rest);
  transition:
    transform .32s var(--ease-spring),
    box-shadow .32s var(--ease-out),
    background .16s var(--ease-out),
    border-color .16s var(--ease-out),
    color .16s var(--ease-out);
}
.btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.btn:hover { border-color: rgba(76, 99, 230, .45); background: #FFFFFF; transform: translateY(-1px); box-shadow: var(--shadow-lift); }
.btn:active { transform: translateY(1px) scale(.96); box-shadow: 0 1px 4px rgba(24, 33, 66, .18); transition-duration: .06s; }
.btn.primary { background: var(--cta-grad); border-color: transparent; color: var(--on-cta); box-shadow: var(--bloom); }
.btn.primary:hover { box-shadow: 0 6px 24px rgba(76, 99, 230, .45), 0 14px 52px rgba(76, 99, 230, .3); transform: translateY(-1px); }
.btn.primary:active { box-shadow: 0 2px 10px rgba(76, 99, 230, .35); transform: translateY(1px) scale(.96); }
.btn.danger { color: var(--danger-ink); border-color: var(--danger-line); background: var(--danger-bg); }
.btn.danger:hover { border-color: var(--danger); background: rgba(220, 70, 60, .14); box-shadow: 0 6px 18px rgba(24, 33, 66, .12), 0 2px 24px rgba(220, 70, 60, .18); }
.btn.big { padding: 12px 28px; font-size: 15px; }
.btn.wide { width: 100%; justify-content: center; margin-top: 14px; }
.btn.icon { padding: 7px 11px; }
.btn.ghost { background: transparent; border-color: transparent; color: var(--muted); box-shadow: none; }
.btn.ghost:hover { color: var(--ink); border-color: var(--line); background: rgba(255, 255, 255, .8); }
.btn.mode.active, .btn.vp.active, .btn.crunch.active { background: var(--accent-soft); border-color: rgba(76, 99, 230, .45); color: var(--accent-deep); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 0 14px rgba(76, 99, 230, .14); }
.btn:disabled { opacity: .45; cursor: default; }
/* A button that is working. Kept visible and legible rather than vanishing —
   a control that disappears on click reads as "nothing happened". */
.btn.loading { opacity: 1; cursor: progress; }
.btn.loading::before {
  content: ''; width: 12px; height: 12px; flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  opacity: .85;
  animation: stage-spin .7s linear infinite;
}
.btn.primary.loading { opacity: .92; }
@media (prefers-reduced-motion: reduce) {
  .btn.loading::before { animation-duration: 2.4s; }
}
.btn:disabled:hover, .btn:disabled:active { border-color: var(--line); background: var(--glass-2); transform: none; box-shadow: var(--shadow-rest); }

/* ---- home ---- */
.home-head {
  display: flex; align-items: center; justify-content: space-between; padding: 12px 28px;
  border-bottom: 1px solid var(--line-soft);
  background: rgba(255, 255, 255, .6);
  backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4);
  position: sticky; top: 0; z-index: 5;
}
.brand { display: flex; align-items: center; gap: 11px; }
.head-actions { display: flex; align-items: center; gap: 8px; }
.home-main { padding: 38px 28px; max-width: 1100px; width: 100%; margin: 0 auto; }
.project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; margin-top: 20px; }
.pcard {
  position: relative; background: var(--glass); border: 1px solid var(--line); border-radius: 18px;
  cursor: pointer; overflow: hidden;
  backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: var(--shadow-rest), inset 0 1px 0 rgba(255, 255, 255, .7);
  transition: transform .32s var(--ease-spring), box-shadow .32s var(--ease-out), border-color .16s var(--ease-out), background .16s var(--ease-out);
}
.pcard:hover {
  border-color: rgba(76, 99, 230, .4); background: var(--glass-2);
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(24, 33, 66, .14), 0 4px 40px rgba(76, 99, 230, .12), inset 0 1px 0 rgba(255, 255, 255, .9);
}
.pcard:active { transform: translateY(0) scale(.985); box-shadow: var(--shadow-rest); transition-duration: .06s; }
.pcard-body { padding: 16px 18px 18px; position: relative; }
.pcard h3 { margin: 0 0 4px; font: 700 16px var(--display); word-break: break-word; }
.pcard .meta { color: var(--muted); font-size: 12.5px; }
.pcard-actions { display: flex; gap: 2px; margin-top: 14px; }
.pcard-actions .btn { padding: 6px 12px; font-size: 11.5px; }

/* ---- live site thumbnail ----
   The iframe renders the real page at desktop width and is shrunk by
   --pscale (set from the card's width in app.js), so the card shows the
   site's actual desktop layout instead of its phone breakpoint. */
.pthumb {
  --pscale: .2;
  position: relative; aspect-ratio: 16 / 10; overflow: hidden;
  background: linear-gradient(180deg, #FFFFFF 0%, #F3F4F9 100%);
  border-bottom: 1px solid var(--line-soft);
}
.pthumb iframe {
  position: absolute; top: 0; left: 0; border: 0;
  transform: scale(var(--pscale)); transform-origin: 0 0;
  pointer-events: none;                 /* the whole card is the button */
  opacity: 0; transition: opacity .4s var(--ease-out);
}
.pthumb.is-loaded iframe { opacity: 1; }
/* Top-down fade so the thumbnail hands off to the card body instead of
   ending on an arbitrary slice of the page. */
.pthumb::after {
  content: ''; position: absolute; inset: auto 0 0 0; height: 34%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .82) 100%);
  pointer-events: none;
}
.pthumb.empty-thumb { display: grid; place-items: center; }
.pthumb.empty-thumb span {
  font: 600 12px var(--sans); color: var(--muted); letter-spacing: .02em;
  padding: 0 18px; text-align: center;
}
.pthumb.empty-thumb::before {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(-45deg, rgba(24, 33, 66, .035) 0 8px, transparent 8px 16px);
}
.empty { color: var(--muted); margin-top: 26px; max-width: 46ch; }
.empty b { color: var(--ink); }

/* ---- filing: category sections, the archive, the right-click menu ----
   The home grid is one page of sections — a category is a heading you can drag
   past its neighbours, holding a grid of the same cards. "Unsorted" is the last
   section and the one that is there when no categories exist, so a builder who
   never files anything sees exactly the page they always had. */
.cat-sections { display: flex; flex-direction: column; }
.cat { position: relative; padding-top: 26px; transition: padding-top .3s var(--ease-out); }
.cat.is-empty { padding-top: 20px; }
.cat-sections > .cat:first-child { padding-top: 12px; }
.cat-unsorted { padding-top: 26px; }
.cat-unsorted.bare { padding-top: 0; }
.cat .project-grid { margin-top: 12px; }
.cat-unsorted.bare .project-grid { margin-top: 20px; }

.cat-head {
  position: relative; display: flex; align-items: center; gap: 9px;
  margin: 0 0 0 -10px; padding: 6px 12px 6px 9px; border-radius: 12px;
  width: fit-content; max-width: 100%;
  border: 1px solid transparent; cursor: grab;
  transition: background .18s var(--ease-out), border-color .18s var(--ease-out),
    box-shadow .18s var(--ease-out), opacity .3s var(--ease-out), max-height .3s var(--ease-out);
}
.cat-head:hover { background: var(--glass); border-color: var(--line-soft); box-shadow: var(--shadow-rest); }
.cat-head:active { cursor: grabbing; }
.cat-unsorted .cat-head { cursor: default; }
.cat-unsorted .cat-head:hover { background: transparent; border-color: transparent; box-shadow: none; }
/* No categories yet → no heading over the only list on the page. */
.cat-unsorted.bare .cat-head { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; overflow: hidden; pointer-events: none; }
.cat-grip {
  position: absolute; left: -14px; top: 50%; transform: translateY(-50%);
  display: inline-flex; width: 16px; height: 16px; color: var(--muted);
  opacity: 0; transition: opacity .18s var(--ease-out);
}
.cat-grip svg { width: 16px; height: 16px; }
.cat-head:hover .cat-grip { opacity: .6; }
.cat-unsorted .cat-grip { display: none; }
.cat-name { margin: 0; font: 700 19px var(--display); letter-spacing: -.01em; }
.cat-count {
  font: 700 11px var(--sans); color: var(--muted); letter-spacing: .04em;
  min-width: 21px; padding: 2px 7px; border-radius: 999px; text-align: center;
  background: rgba(255, 255, 255, .6); border: 1px solid var(--line-soft);
}

/* the empty-section hint doubles as the drop target for a dragged card */
.cat-hint {
  max-height: 0; opacity: 0; overflow: hidden; margin-top: 0;
  transition: max-height .32s var(--ease-out), opacity .32s var(--ease-out), margin-top .32s var(--ease-out);
}
.cat.is-empty .cat-hint { max-height: 70px; opacity: 1; margin-top: 8px; }
.cat-hint span {
  display: block; padding: 10px 14px; border-radius: 12px;
  border: 1px dashed var(--line); color: var(--muted); font-size: 12.25px;
  background: rgba(255, 255, 255, .3);
}

/* ---- dragging ----
   A card lifts out of the grid; the section it is over lights up. A heading
   being dragged shows a periwinkle rule on the edge it would land against. */
.pcard.dragging { opacity: .35; }
.cat.dragging { opacity: .45; }
.cat.dragging .cat-head { cursor: grabbing; }
.cat.is-over::before {
  content: ''; position: absolute; inset: 14px -12px -6px; border-radius: 20px;
  border: 2px dashed rgba(76, 99, 230, .45); background: rgba(76, 99, 230, .07);
  pointer-events: none; animation: cat-over-in .2s var(--ease-out);
}
.cat-unsorted.is-over::before { inset: 14px -12px -6px; }
@keyframes cat-over-in { from { opacity: 0; transform: scale(.99); } }
.cat.drop-before::after, .cat.drop-after::after {
  content: ''; position: absolute; left: -8px; right: -8px; height: 3px; border-radius: 3px;
  background: var(--accent); box-shadow: 0 0 12px rgba(76, 99, 230, .6);
  pointer-events: none; animation: cat-rule-in .18s var(--ease-out);
}
.cat.drop-before::after { top: 10px; }
.cat.drop-after::after { bottom: -12px; }
@keyframes cat-rule-in { from { opacity: 0; transform: scaleX(.9); } }

/* the ⋯ on a card — padding 0, glyph centred, the row's own height */
.pcard-actions .btn.more { padding: 0; width: 28px; align-self: stretch; justify-content: center; margin-left: auto; }
.pcard-actions .btn.more svg { width: 16px; height: 16px; }

/* the header's archive toggle, lit while you are looking at the archive */
.btn.on { background: var(--accent-soft); border-color: rgba(76, 99, 230, .45); color: var(--accent-deep); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 0 14px rgba(76, 99, 230, .14); }
.head-actions .cat-count {
  background: rgba(76, 99, 230, .14); border-color: rgba(76, 99, 230, .3); color: var(--accent-deep);
  font-size: 10.5px; line-height: 15px; padding: 0 6px; min-width: 19px;
}

/* the home page's toast dock — the editor's, moved to the window corner */
.home-dock { position: fixed; right: 22px; bottom: 22px; z-index: 40; }

/* ---- the right-click menu ---- */
.ctx-menu {
  position: fixed; z-index: 60; min-width: 218px; max-width: 290px; padding: 7px;
  border-radius: 16px; border: 1px solid var(--line);
  background: rgba(255, 255, 255, .9);
  backdrop-filter: blur(24px) saturate(1.5); -webkit-backdrop-filter: blur(24px) saturate(1.5);
  box-shadow: 0 18px 48px rgba(24, 33, 66, .22), 0 2px 10px rgba(24, 33, 66, .1), inset 0 1px 0 rgba(255, 255, 255, .9);
  animation: ctx-in .17s var(--ease-out) both;
}
.ctx-menu.closing { animation: ctx-out .14s var(--ease-out) both; }
@keyframes ctx-in { from { opacity: 0; transform: translateY(-6px) scale(.97); } }
@keyframes ctx-out { to { opacity: 0; transform: translateY(-4px) scale(.98); } }
.ctx-title {
  font: 700 12.5px var(--display); padding: 6px 10px 7px; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ctx-lab {
  font: 700 10px var(--sans); letter-spacing: .11em; text-transform: uppercase;
  color: var(--muted); padding: 7px 10px 5px;
}
.ctx-none { font-size: 12.5px; color: var(--muted); padding: 3px 10px 6px; }
.ctx-sep { height: 1px; background: var(--line-soft); margin: 5px 7px; }
.ctx-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 7px 10px; border: 0; border-radius: 10px; background: transparent;
  font: 500 13px var(--sans); color: var(--ink); text-align: left; cursor: pointer;
  transition: background .16s var(--ease-out), color .16s var(--ease-out), transform .28s var(--ease-spring);
}
.ctx-item > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctx-item:hover { background: var(--accent-soft); color: var(--accent-deep); }
.ctx-item:active { transform: scale(.975); transition-duration: .06s; }
.ctx-item.is-on { color: var(--accent-deep); font-weight: 700; }
.ctx-item.danger { color: var(--danger-ink); }
.ctx-item.danger:hover { background: var(--danger-bg); }
.ctx-tick {
  width: 14px; height: 14px; flex-shrink: 0; color: var(--accent);
  opacity: 0; transition: opacity .16s var(--ease-out);
}
.ctx-item.is-on .ctx-tick { opacity: 1; }

/* status chips — dot + caps */
.pill {
  font: 700 10.5px var(--sans); letter-spacing: .09em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted);
  white-space: nowrap; display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255, 255, 255, .55);
}
.pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.pill.ready { color: var(--ok); border-color: rgba(14, 138, 95, .4); }
.pill.ready::before { box-shadow: 0 0 8px rgba(14, 138, 95, .5); }
.pill.error { color: var(--danger-ink); border-color: var(--danger-line); }
.pill.building, .pill.busy { color: var(--accent-deep); border-color: rgba(76, 99, 230, .45); animation: pulse 1.4s ease-in-out infinite; }
.pill.building::before, .pill.busy::before { background: var(--accent); box-shadow: 0 0 10px rgba(76, 99, 230, .7); }
.pcard .pill {
  position: absolute; top: -14px; right: 14px;
  background: rgba(255, 255, 255, .86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 2px 8px rgba(24, 33, 66, .12);
}

/* ---- brief ---- */
.brief-main { padding: 38px 40px 80px; max-width: 1280px; width: 100%; margin: 0 auto; }
/* on a desktop-sized window the first group's two fields sit side by side */
@media (min-width: 1100px) {
  .field-group.two-up { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; grid-auto-flow: column; column-gap: 18px; row-gap: 8px; }
}
.field-group {
  background: var(--glass); border: 1px solid var(--line); border-radius: 18px; padding: 20px;
  margin-bottom: 14px; display: flex; flex-direction: column; gap: 10px;
  backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: var(--shadow-rest), inset 0 1px 0 rgba(255, 255, 255, .7);
}
.lab { font: 700 11px var(--sans); letter-spacing: .11em; text-transform: uppercase; color: var(--muted); }
input, textarea, select {
  font: 400 14px var(--sans); color: var(--ink); background: rgba(255, 255, 255, .75);
  border: 1px solid var(--line); border-radius: 12px; padding: 9px 13px; width: 100%;
  transition: border-color .16s var(--ease-out), box-shadow .25s var(--ease-out), background .16s var(--ease-out);
}
input::placeholder, textarea::placeholder { color: rgba(84, 95, 130, .8); }
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--accent); background: #FFFFFF;
  box-shadow: 0 0 0 3px rgba(76, 99, 230, .14), 0 0 18px rgba(76, 99, 230, .1);
}
input, select { accent-color: var(--accent); }
select { cursor: pointer; }
select:hover { border-color: rgba(76, 99, 230, .45); background: #FFFFFF; }
.pick-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(172px, 1fr)); gap: 10px; }
.pick { position: relative; }
.pick input { position: absolute; opacity: 0; }
.pick span {
  display: flex; flex-direction: column; gap: 2px; padding: 11px 13px;
  border: 1px solid var(--line); border-radius: 14px; cursor: pointer;
  font-size: 12px; color: var(--muted); height: 100%;
  background: rgba(255, 255, 255, .45);
  transition: transform .32s var(--ease-spring), border-color .16s var(--ease-out), background .16s var(--ease-out), box-shadow .32s var(--ease-out), color .16s var(--ease-out);
}
.pick span b { color: var(--ink); font-size: 13px; }
.pick span:hover { border-color: rgba(76, 99, 230, .4); background: #FFFFFF; transform: translateY(-1px); }
.pick span:active { transform: scale(.97); transition-duration: .06s; }
.pick input:checked + span {
  border-color: rgba(76, 99, 230, .55); color: var(--accent-deep);
  background: linear-gradient(180deg, rgba(76, 99, 230, .14), rgba(76, 99, 230, .05));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 0 18px rgba(76, 99, 230, .12);
}
.pick input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- option previews (brief picks) ----
   Every option card opens with a small screen showing what it means. Scroll
   types and page transitions are short looping motion studies drawn in CSS
   — a page of blocks scrolling, snapping, fading, sliding — because the
   behaviour is the point. Templates and tones are still pictures. All
   sizes are in cqw so the same drawing scales with the card. */
.pv {
  position: relative; display: block; width: 100%; aspect-ratio: 16 / 10; margin: 0 0 9px;
  container-type: inline-size; overflow: hidden; border-radius: 9px;
  background: #FFFFFF; border: 1px solid var(--line-soft);
  font-style: normal; color: var(--ink); isolation: isolate;
  --pv-ink: rgba(24, 33, 66, .62); --pv-line: rgba(24, 33, 66, .15); --pv-acc: #4C63E6;
  --pv-hero: linear-gradient(135deg, rgba(76, 99, 230, .34), rgba(95, 123, 240, .13));
  --pv-hero-b: linear-gradient(135deg, rgba(24, 33, 66, .32), rgba(84, 95, 130, .14));
  --pv-s1: #F3F4FA; --pv-s2: #E7EAF7; --pv-s3: #D9DEF4;
  transition: border-color .16s var(--ease-out), box-shadow .32s var(--ease-out);
}
.pick input:checked + span .pv { border-color: rgba(76, 99, 230, .35); box-shadow: 0 0 0 1px rgba(76, 99, 230, .1); }
.pv i { display: block; font-style: normal; flex: 0 0 auto; }
/* a page: a column of blocks with the pv's margins */
.pv .pg { position: absolute; left: 0; right: 0; top: 0; display: flex; flex-direction: column; gap: 4cqw; padding: 5cqw 6cqw; }
.pv .pa, .pv .pb { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 4cqw; padding: 5cqw 6cqw; background: #FFFFFF; }
/* blocks */
.pv .nav { position: relative; height: 6cqw; border-radius: 2cqw; }
.pv .nav::before { content: ''; position: absolute; left: 0; top: 1cqw; width: 4cqw; height: 4cqw; border-radius: 1.2cqw; background: var(--pv-acc); }
.pv .nav::after {
  content: ''; position: absolute; right: 0; top: 2cqw; height: 2cqw; width: 30cqw; border-radius: 1cqw;
  background: repeating-linear-gradient(90deg, var(--pv-line) 0 7cqw, transparent 7cqw 10cqw);
}
.pv .nav.dots::after { width: 16cqw; background: radial-gradient(circle, var(--pv-line) 0 1cqw, transparent 1.15cqw) 0 0 / 5cqw 2cqw repeat-x; }
.pv .hero { height: 22cqw; border-radius: 3cqw; background: var(--pv-hero); position: relative; }
.pv .hero.b { background: var(--pv-hero-b); }
.pv .hero::before { content: ''; position: absolute; left: 5cqw; top: 6cqw; width: 34cqw; height: 4cqw; border-radius: 1cqw; background: rgba(255, 255, 255, .85); }
.pv .hero::after { content: ''; position: absolute; left: 5cqw; top: 13cqw; width: 14cqw; height: 4.4cqw; border-radius: 999px; background: var(--pv-acc); }
.pv .hero.b::after { background: rgba(24, 33, 66, .7); }
.pv .txt { height: 9cqw; width: 84%; background: repeating-linear-gradient(180deg, var(--pv-line) 0 2cqw, transparent 2cqw 5cqw); }
.pv .txt.s { width: 60%; }
.pv .cards { height: 16cqw; background: linear-gradient(90deg, var(--pv-s2) 0 31%, transparent 31% 34.5%, var(--pv-s2) 34.5% 65.5%, transparent 65.5% 69%, var(--pv-s2) 69% 100%); border-radius: 2cqw; }
.pv .cards.b { background: linear-gradient(90deg, var(--pv-s1) 0 48%, transparent 48% 52%, var(--pv-s1) 52% 100%); }
/* full-height sections for the one-pager / snap studies */
.pv .sec { position: absolute; left: 0; right: 0; height: 62.5cqw; display: flex; flex-direction: column; gap: 4cqw; padding: 14cqw 6cqw 5cqw; }
.pv .sec.s1 { top: 0; background: #FFFFFF; }
.pv .sec.s2 { top: 62.5cqw; background: var(--pv-s1); }
.pv .sec.s3 { top: 125cqw; background: var(--pv-s2); }
.pv .sec .h { height: 5cqw; width: 42cqw; border-radius: 1.2cqw; background: var(--pv-ink); }
/* a fixed nav over the top of the scroll studies */
.pv .fix { position: absolute; left: 0; right: 0; top: 0; height: 12cqw; padding: 3cqw 6cqw; background: rgba(255, 255, 255, .86); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); border-bottom: 1px solid var(--pv-line); z-index: 2; }
.pv .fix .nav { height: 6cqw; }
.pv .fix .ind { position: absolute; right: 16.5cqw; top: 5cqw; width: 2cqw; height: 2cqw; border-radius: 50%; background: var(--pv-acc); }
/* the scrollbar thumb on the right edge */
.pv .sb { position: absolute; right: 1.2cqw; top: 2cqw; width: 1.4cqw; height: 16cqw; border-radius: 999px; background: rgba(24, 33, 66, .22); z-index: 3; }

/* — scroll: standard — the page rolls down and back, the thumb follows */
.pv-scroll-standard .pg { animation: pv-roll 6s ease-in-out infinite alternate; }
.pv-scroll-standard .sb { animation: pv-thumb 6s ease-in-out infinite alternate; }
@keyframes pv-roll { to { transform: translateY(-72cqw); } }
@keyframes pv-thumb { to { transform: translateY(42cqw); } }

/* — scroll: smooth one-pager — anchor clicks glide the page section to section */
.pv-scroll-smooth .sec { animation: pv-anchor 7.5s var(--ease-out) infinite alternate; }
.pv-scroll-smooth .ind { animation: pv-anchor-dot 7.5s var(--ease-out) infinite alternate; }
@keyframes pv-anchor { 0%, 22% { transform: none; } 36%, 62% { transform: translateY(-62.5cqw); } 76%, 100% { transform: translateY(-125cqw); } }
@keyframes pv-anchor-dot { 0%, 22% { transform: none; } 36%, 62% { transform: translateX(5cqw); } 76%, 100% { transform: translateX(10cqw); } }

/* — scroll: section snap — a short flick, then the page locks on the next screen */
.pv-scroll-snap .sec { animation: pv-snap 6s cubic-bezier(.2, .9, .2, 1) infinite alternate; }
.pv-scroll-snap .sb { animation: pv-snap-thumb 6s cubic-bezier(.2, .9, .2, 1) infinite alternate; }
@keyframes pv-snap { 0%, 30% { transform: none; } 37%, 63% { transform: translateY(-62.5cqw); } 70%, 100% { transform: translateY(-125cqw); } }
@keyframes pv-snap-thumb { 0%, 30% { transform: none; } 37%, 63% { transform: translateY(21cqw); } 70%, 100% { transform: translateY(42cqw); } }

/* — scroll: parallax hero — the backdrop hangs back while the content rides over it */
.pv-scroll-parallax .bg {
  position: absolute; left: 0; right: 0; top: 0; height: 46cqw;
  background: radial-gradient(circle at 74% 34%, rgba(255, 255, 255, .9) 0 5cqw, transparent 5.4cqw), linear-gradient(160deg, #5F7BF0, #3B50C9);
  animation: pv-para-bg 6s ease-in-out infinite alternate;
}
.pv-scroll-parallax .bg::after { content: ''; position: absolute; left: 6cqw; top: 22cqw; width: 34cqw; height: 4cqw; border-radius: 1cqw; background: rgba(255, 255, 255, .85); }
.pv-scroll-parallax .pg { top: 40cqw; background: #FFFFFF; border-radius: 3cqw 3cqw 0 0; padding-top: 6cqw; min-height: 90cqw; animation: pv-para-pg 6s ease-in-out infinite alternate; }
@keyframes pv-para-bg { to { transform: translateY(-9cqw); } }
@keyframes pv-para-pg { to { transform: translateY(-58cqw); } }

/* — transitions: fade — the pages cross-fade, the new content settles up into place */
.pv-tr-fade .pa { animation: pv-fade-a 5s ease-in-out infinite; }
.pv-tr-fade .pb { animation: pv-fade-b 5s ease-in-out infinite; }
@keyframes pv-fade-a { 0%, 36% { opacity: 1; } 50%, 86% { opacity: 0; } 100% { opacity: 1; } }
@keyframes pv-fade-b { 0%, 36% { opacity: 0; transform: translateY(4cqw); } 50%, 86% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(4cqw); } }

/* — transitions: scroll reveal — blocks rise in as the page reaches them */
.pv-tr-reveal .pg { animation: pv-rv-roll 6.5s ease-in-out infinite; }
.pv-tr-reveal .r { animation: pv-rise 6.5s ease-out infinite; }
.pv-tr-reveal .r2 { animation-name: pv-rise-2; }
.pv-tr-reveal .r3 { animation-name: pv-rise-3; }
.pv-tr-reveal .r4 { animation-name: pv-rise-4; }
@keyframes pv-rv-roll { 0%, 8% { transform: none; opacity: 1; } 78%, 92% { transform: translateY(-68cqw); opacity: 1; } 96%, 100% { transform: translateY(-68cqw); opacity: 0; } }
@keyframes pv-rise   { 0%, 16% { opacity: 0; transform: translateY(6cqw); } 30%, 100% { opacity: 1; transform: none; } }
@keyframes pv-rise-2 { 0%, 30% { opacity: 0; transform: translateY(6cqw); } 44%, 100% { opacity: 1; transform: none; } }
@keyframes pv-rise-3 { 0%, 46% { opacity: 0; transform: translateY(6cqw); } 60%, 100% { opacity: 1; transform: none; } }
@keyframes pv-rise-4 { 0%, 62% { opacity: 0; transform: translateY(6cqw); } 76%, 100% { opacity: 1; transform: none; } }

/* — transitions: slide — the next page pushes in from the right */
.pv-tr-slide .pa { animation: pv-slide-a 5.5s cubic-bezier(.22, 1, .36, 1) infinite; }
.pv-tr-slide .pb { animation: pv-slide-b 5.5s cubic-bezier(.22, 1, .36, 1) infinite; box-shadow: -4cqw 0 8cqw rgba(24, 33, 66, .12); }
@keyframes pv-slide-a { 0%, 34% { transform: none; opacity: 1; } 52%, 88% { transform: translateX(-28%); opacity: .6; } 94%, 100% { transform: translateX(-28%); opacity: 0; } }
@keyframes pv-slide-b { 0%, 34% { transform: translateX(104%); } 52%, 88% { transform: none; } 94%, 100% { transform: none; opacity: 0; } }

/* — transitions: curtain wipe — a brand panel sweeps across; the page changes behind it */
.pv-tr-curtain .cur { position: absolute; inset: 0; background: linear-gradient(180deg, #445CE0, #5F7BF0); z-index: 3; transform: translateX(-102%); animation: pv-cur 6.5s cubic-bezier(.65, 0, .35, 1) infinite; }
.pv-tr-curtain .pa { animation: pv-cur-a 6.5s linear infinite; }
.pv-tr-curtain .pb { animation: pv-cur-b 6.5s linear infinite; }
@keyframes pv-cur { 0%, 18% { transform: translateX(-102%); } 30%, 35% { transform: none; } 47%, 68% { transform: translateX(102%); } 80%, 85% { transform: none; } 97%, 100% { transform: translateX(-102%); } }
@keyframes pv-cur-a { 0%, 32% { opacity: 1; } 32.5%, 82% { opacity: 0; } 82.5%, 100% { opacity: 1; } }
@keyframes pv-cur-b { 0%, 32% { opacity: 0; } 32.5%, 82% { opacity: 1; } 82.5%, 100% { opacity: 0; } }

/* — transitions: none — the next page is simply there */
.pv-tr-none .pb { animation: pv-none 3.2s steps(1, end) infinite; }
@keyframes pv-none { 0%, 50% { opacity: 0; } 50.01%, 100% { opacity: 1; } }

/* — phone & tablet picks — a phone (or a tablet) stands in the card, and is
   a container of its own, so the drawing inside is sized to the device rather
   than to the card. Menus open and close; the rest are still pictures. */
.lab-sub { font: 600 12px var(--sans); color: var(--ink); margin-top: 6px; }
.phone-picks .pick-row { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.pv-ph .ph, .pv-tb .tb {
  position: absolute; top: 3cqw; bottom: 3cqw; left: 50%; transform: translateX(-50%);
  container-type: inline-size; overflow: hidden; background: #FFFFFF;
  border: 1px solid rgba(24, 33, 66, .3);
  box-shadow: 0 0 0 .9cqw rgba(24, 33, 66, .08), 0 1.5cqw 3cqw rgba(24, 33, 66, .12);
  display: flex; flex-direction: column; gap: 6cqw; padding-bottom: 8cqw;
}
.pv-ph .ph { width: 33cqw; border-radius: 4.5cqw; }
.pv-tb .tb { width: 42cqw; border-radius: 3cqw; }
:is(.ph, .tb) .bar { display: flex; align-items: center; justify-content: space-between; height: 14cqw; padding: 0 8cqw; border-bottom: 1px solid var(--pv-line); margin-bottom: 2cqw; }
.tb .bar { height: 11cqw; }
:is(.ph, .tb) .brand { width: 8cqw; height: 8cqw; border-radius: 2.4cqw; background: var(--pv-acc); }
:is(.ph, .tb) .burger { width: 11cqw; height: 7.5cqw; background: repeating-linear-gradient(180deg, var(--pv-ink) 0 1.6cqw, transparent 1.6cqw 3cqw); }
.tb .links { width: 40cqw; height: 3cqw; background: radial-gradient(circle, var(--pv-line) 0 1.2cqw, transparent 1.45cqw) 0 0 / 8cqw 3cqw repeat-x; }
:is(.ph, .tb) .h { height: 5cqw; width: 70%; margin: 0 8cqw; border-radius: 1.6cqw; background: var(--pv-ink); }
:is(.ph, .tb) .h.s { width: 48%; height: 4cqw; opacity: .5; }
:is(.ph, .tb) .t { height: 10cqw; margin: 0 8cqw; background: repeating-linear-gradient(180deg, var(--pv-line) 0 2cqw, transparent 2cqw 5cqw); }
:is(.ph, .tb) .t.s { width: 58%; }
:is(.ph, .tb) .cta { width: 42%; height: 9cqw; margin: 0 8cqw; border-radius: 999px; background: var(--pv-acc); }
:is(.ph, .tb) .img { height: 38cqw; margin: 0 8cqw; border-radius: 4cqw; background: var(--pv-hero); }
.ph .blk { height: 22cqw; margin: 0 8cqw; border-radius: 3cqw; background: var(--pv-s1); }
.ph .blk:nth-child(odd) { background: var(--pv-s2); }
.ph .pills { display: flex; flex-wrap: wrap; gap: 3cqw; margin: 0 8cqw; }
.ph .pills i { height: 7cqw; width: 24cqw; border-radius: 999px; background: var(--pv-s2); }
.ph .pills i:first-child { background: var(--pv-acc); }
/* menus */
.ph .drawer {
  position: absolute; top: 0; right: 0; bottom: 0; width: 68%; background: #FFFFFF; border-left: 1px solid var(--pv-line);
  box-shadow: -3cqw 0 9cqw rgba(24, 33, 66, .18); padding: 20cqw 8cqw 10cqw; display: flex; flex-direction: column; gap: 7cqw;
  transform: translateX(104%); animation: pv-drawer 5.5s cubic-bezier(.22, 1, .36, 1) infinite;
}
.ph .drawer .ln { height: 4cqw; width: 70%; border-radius: 1.5cqw; background: var(--pv-ink); opacity: .7; }
.ph .drawer .cta { margin: auto 0 0; width: 100%; }
@keyframes pv-drawer { 0%, 18% { transform: translateX(104%); } 30%, 70% { transform: none; } 82%, 100% { transform: translateX(104%); } }
.ph .overlay {
  position: absolute; inset: 0; background: linear-gradient(180deg, #445CE0, #5F7BF0);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8cqw; padding: 0;
  opacity: 0; animation: pv-overlay 5.5s ease-in-out infinite;
}
.ph .overlay .ln { width: 52%; height: 5cqw; border-radius: 2cqw; background: rgba(255, 255, 255, .92); }
.ph .overlay .cta { background: #FFFFFF; margin: 4cqw 0 0; }
@keyframes pv-overlay { 0%, 18% { opacity: 0; } 30%, 70% { opacity: 1; } 82%, 100% { opacity: 0; } }
.ph .tabs { position: absolute; left: 0; right: 0; bottom: 0; height: 17cqw; border-top: 1px solid var(--pv-line); background: #FFFFFF; display: flex; justify-content: space-around; align-items: center; padding: 0 4cqw; }
.ph .tabs i { width: 8cqw; height: 8cqw; border-radius: 2.5cqw; background: var(--pv-line); }
.ph .tabs i:first-child { background: var(--pv-acc); }
/* heroes */
.ph .photo {
  position: absolute; left: 0; right: 0; top: 16cqw; bottom: 0; padding: 8cqw; display: flex; flex-direction: column; justify-content: flex-end; gap: 5cqw;
  background: linear-gradient(180deg, rgba(24, 33, 66, 0) 30%, rgba(24, 33, 66, .72)), linear-gradient(135deg, #5F7BF0, #3B50C9);
}
.ph .photo .h { margin: 0; background: rgba(255, 255, 255, .94); }
.ph .photo .cta { margin: 3cqw 0 0; background: #FFFFFF; }
/* density */
.ph.dens-c { gap: 3.5cqw; } .ph.dens-c .blk { height: 15cqw; }
.ph.dens-b { gap: 6cqw; }
.ph.dens-a { gap: 11cqw; } .ph.dens-a .blk { height: 26cqw; }
/* sticky actions */
.ph .fab { position: absolute; right: 7cqw; bottom: 7cqw; width: 17cqw; height: 17cqw; border-radius: 50%; background: var(--pv-acc); box-shadow: 0 2cqw 6cqw rgba(76, 99, 230, .45); animation: pv-fab 2.6s ease-in-out infinite; }
.ph .fab::after { content: ''; position: absolute; inset: 30%; border: 1.6cqw solid #FFFFFF; border-radius: 40% 40% 40% 40% / 60% 60% 40% 40%; transform: rotate(-30deg); }
@keyframes pv-fab { 50% { transform: scale(1.1); } }
.ph .cbar { position: absolute; left: 0; right: 0; bottom: 0; height: 16cqw; display: flex; }
.ph .cbar i { flex: 1; }
.ph .cbar i:first-child { background: rgba(24, 33, 66, .9); }
.ph .cbar i:last-child { background: var(--pv-acc); }
/* tablet */
.tb .two { display: grid; grid-template-columns: 1fr 1fr; gap: 4cqw; margin: 0 6cqw; }
.tb .two > i { height: 26cqw; border-radius: 3cqw; background: var(--pv-hero); }
.tb .two > i:first-child {
  border-radius: 0;
  background: linear-gradient(var(--pv-ink), var(--pv-ink)) 0 30% / 82% 4cqw no-repeat,
    linear-gradient(var(--pv-line), var(--pv-line)) 0 48% / 60% 3cqw no-repeat,
    linear-gradient(var(--pv-acc), var(--pv-acc)) 0 72% / 36% 6cqw no-repeat;
}
.tb .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4cqw; margin: 0 6cqw; }
.tb .grid i { height: 14cqw; border-radius: 2.5cqw; background: var(--pv-s2); }
.tb .grid i:nth-child(3) { background: var(--pv-s1); }
.tb .col { display: flex; flex-direction: column; gap: 5cqw; margin: 0 16cqw; }
.tb .col > i { margin-left: 0; margin-right: 0; }

/* — templates (still pictures) — */
.pv-tp-multipage .pg2 { position: absolute; left: 10cqw; top: 7cqw; right: 0; bottom: 0; background: var(--pv-s1); border-radius: 3cqw 0 0 0; border: 1px solid var(--pv-line); }
.pv-tp-multipage .pg2::before { content: ''; position: absolute; left: 6cqw; top: 5cqw; width: 4cqw; height: 4cqw; border-radius: 1.2cqw; background: var(--pv-acc); opacity: .55; }
.pv-tp-multipage .pg { background: #FFFFFF; top: 0; left: 0; right: 10cqw; bottom: 0; border-radius: 0 3cqw 0 0; box-shadow: 4cqw 0 10cqw rgba(24, 33, 66, .12); }
.pv-tp-multipage .pg .nav::after { width: 38cqw; }
.pv-tp-onepager .pg { gap: 2.5cqw; }
.pv-tp-onepager .strip { height: 9cqw; border-radius: 2cqw; background: var(--pv-s1); }
.pv-tp-onepager .strip.b { background: var(--pv-s2); }
.pv-tp-onepager .strip.c { background: var(--pv-s3); }
.pv-tp-onepager .sb { height: 6cqw; }
.pv-tp-portfolio .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3cqw; }
.pv-tp-portfolio .grid i { aspect-ratio: 4 / 3; border-radius: 2cqw; background: var(--pv-s2); }
.pv-tp-portfolio .grid i:nth-child(2) { background: linear-gradient(135deg, #5F7BF0, #3B50C9); }
.pv-tp-portfolio .grid i:nth-child(3) { background: var(--pv-s3); }
.pv-tp-portfolio .grid i:nth-child(4) { background: var(--pv-s1); }
.pv-tp-portfolio .grid i:nth-child(6) { background: linear-gradient(135deg, rgba(24, 33, 66, .5), rgba(24, 33, 66, .25)); }
.pv-tp-service .pg { gap: 3cqw; padding: 4cqw 6cqw; }
.pv-tp-service .hero { height: 17cqw; }
.pv-tp-service .cards { height: 11cqw; }
.pv-tp-service .trust { height: 4cqw; background: radial-gradient(circle, rgba(24, 33, 66, .28) 0 1.8cqw, transparent 2cqw) 0 0 / 9cqw 5cqw repeat-x; width: 45cqw; }
.pv-tp-service .form { height: 7cqw; border-radius: 2cqw; background: linear-gradient(90deg, var(--pv-s1) 0 34%, transparent 34% 37%, var(--pv-s1) 37% 71%, transparent 71% 74%, var(--pv-acc) 74% 100%); }

/* — writing tones (still pictures): the words carry the tone — */
.pv-tone .pg { padding: 9cqw 8cqw; gap: 4cqw; }
.pv-tone .h { font: 700 6.6cqw/1.15 var(--display); letter-spacing: -.02em; color: #1B2650; }
.pv-tone .cta { width: 18cqw; height: 5.5cqw; border-radius: 1.4cqw; background: #1B2650; margin-top: 1cqw; }
.pv-tone-professional .txt { width: 92%; }
.pv-tone-friendly .h { color: #3B50C9; }
.pv-tone-friendly .txt { background: repeating-linear-gradient(180deg, rgba(76, 99, 230, .22) 0 2.2cqw, transparent 2.2cqw 5.4cqw); width: 70%; }
.pv-tone-friendly .cta { border-radius: 999px; background: linear-gradient(180deg, #445CE0, #5F7BF0); width: 22cqw; }
.pv-tone-friendly .ava { position: absolute; right: 8cqw; top: 9cqw; width: 12cqw; height: 12cqw; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #FFFFFF, rgba(76, 99, 230, .35)); border: 1px solid rgba(76, 99, 230, .3); }
.pv-tone-bold .h { font-size: 10.5cqw; font-weight: 900; letter-spacing: -.04em; text-transform: uppercase; line-height: 1; color: #121A3A; }
.pv-tone-bold .h u { text-decoration: none; color: var(--pv-acc); }
.pv-tone-bold .cta { width: 26cqw; height: 6.5cqw; border-radius: 0; background: var(--pv-acc); }
.pv-tone-minimal .pg { padding: 16cqw 12cqw; gap: 6cqw; }
.pv-tone-minimal .h { font-weight: 300; font-size: 7cqw; letter-spacing: 0; color: #182142; }
.pv-tone-minimal .txt { width: 34%; height: 2cqw; }
.check-row, .color-row { display: flex; flex-wrap: wrap; gap: 10px; }
.chk {
  display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 999px;
  padding: 8px 14px; cursor: pointer; font-size: 13px;
  background: rgba(255, 255, 255, .45);
  transition: transform .32s var(--ease-spring), border-color .16s var(--ease-out), background .16s var(--ease-out), box-shadow .32s var(--ease-out);
}
.chk:hover { border-color: rgba(76, 99, 230, .4); background: #FFFFFF; transform: translateY(-1px); }
.chk:active { transform: scale(.96); transition-duration: .06s; }
.chk input { width: auto; }
.chk input[type=color] { padding: 0; width: 34px; height: 24px; border: none; background: none; cursor: pointer; border-radius: 6px; }
.chk:has(input:checked) { border-color: rgba(76, 99, 230, .55); background: var(--accent-soft); box-shadow: 0 0 14px rgba(76, 99, 230, .1); }
/* Dynamically-rendered rows (page presets) glide in like the skill/inspiration lists. */
#bf-pages .chk { animation: chk-row-in .3s var(--ease-out); }
#bf-pages .chk.settled { animation: none; }
@keyframes chk-row-in { from { opacity: 0; transform: translateY(-4px); } }

/* ---- the files panel (brief form) ----
   A tab on the brief's right edge. Pressed, BRIEF.md and CLAUDE.md slide in as
   a second column — the aside widens from nothing, the panel inside it wipes
   into view anchored to the right, and the form glides left as its free space
   shrinks. Pressed again, the same tab tucks it away. The aside is sticky
   under the header, so the files stay put while the long form scrolls. */
#view-brief { --bf-head-h: 61px; }
.brief-split { display: flex; align-items: flex-start; width: 100%; flex: 1; }
.brief-main { flex: 1 1 auto; min-width: 0; }
.brief-files {
  --bf-files-w: min(520px, 46vw);
  position: sticky; top: var(--bf-head-h); height: calc(100vh - var(--bf-head-h));
  flex: 0 0 auto; width: 0; z-index: 4;
  transition: width .46s var(--ease-out);
}
.brief-files.open { width: var(--bf-files-w); }
.bf-files-clip { position: absolute; inset: 0; overflow: hidden; }
.bf-files-in {
  position: absolute; top: 0; bottom: 0; right: 0; width: var(--bf-files-w);
  display: flex; flex-direction: column;
  background: rgba(255, 255, 255, .58); border-left: 1px solid var(--line);
  backdrop-filter: blur(22px) saturate(1.4); -webkit-backdrop-filter: blur(22px) saturate(1.4);
  box-shadow: -8px 0 30px rgba(24, 33, 66, .06);
  opacity: 0; transform: translateX(18px);
  transition: opacity .3s var(--ease-out), transform .46s var(--ease-out);
}
.brief-files.open .bf-files-in { opacity: 1; transform: none; }
/* the tab rides the aside's left edge, so it travels with the panel */
.bf-files-tab {
  position: absolute; right: 100%; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 13px 7px 12px; margin: 0; cursor: pointer;
  border: 1px solid var(--line); border-right: none; border-radius: 13px 0 0 13px;
  background: var(--glass-2); color: var(--muted);
  backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: var(--shadow-rest), inset 0 1px 0 rgba(255, 255, 255, .7);
  transition: transform .32s var(--ease-spring), box-shadow .32s var(--ease-out),
    color .16s var(--ease-out), border-color .16s var(--ease-out), background .16s var(--ease-out);
}
.bf-files-tab:hover { color: var(--accent-deep); border-color: rgba(76, 99, 230, .45); background: #FFFFFF; transform: translate(-2px, -50%); box-shadow: var(--shadow-lift); }
.bf-files-tab:active { transform: translateY(-50%) scale(.95); transition-duration: .06s; }
.bf-files-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.brief-files.open .bf-files-tab { color: var(--accent-deep); border-color: rgba(76, 99, 230, .45); box-shadow: var(--shadow-rest), 0 0 18px rgba(76, 99, 230, .14); }
.bf-files-tab-lab { writing-mode: vertical-rl; transform: rotate(180deg); font: 700 11px var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.bf-files-chev { width: 14px; height: 14px; transition: transform .42s var(--ease-spring); }
.brief-files.open .bf-files-chev { transform: rotate(180deg); }

.bf-files-head { padding: 16px 22px 12px; border-bottom: 1px solid var(--line-soft); flex: 0 0 auto; }
.bf-files-tabs {
  position: relative; display: inline-flex; gap: 2px; padding: 3px;
  border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, .55);
}
.bf-files-ind {
  position: absolute; top: 3px; bottom: 3px; left: 0; width: 0; border-radius: 999px;
  background: linear-gradient(180deg, rgba(76, 99, 230, .16), rgba(76, 99, 230, .07));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 0 14px rgba(76, 99, 230, .12);
  opacity: 0; transition: transform .38s var(--ease-spring), width .3s var(--ease-out), opacity .2s var(--ease-out);
}
.bf-files-tabs.placed .bf-files-ind { opacity: 1; }
.bf-files-t {
  position: relative; z-index: 1; border: none; background: none; cursor: pointer; margin: 0;
  padding: 6px 13px; border-radius: 999px; font: 600 12px var(--mono); color: var(--muted);
  transition: color .2s var(--ease-out), transform .32s var(--ease-spring);
}
.bf-files-t:hover { color: var(--ink); }
.bf-files-t:active { transform: scale(.94); transition-duration: .06s; }
.bf-files-t.on { color: var(--accent-deep); }
.bf-files-t:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.bf-files-hint { margin: 10px 0 0; font-size: 12px; color: var(--muted); min-height: 1.5em; transition: opacity .12s var(--ease-out); }
.bf-files-hint.fading { opacity: 0; }

.bf-files-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 6px 22px 48px; }
.bf-files-doc { font-size: 13px; line-height: 1.6; color: var(--ink); word-break: break-word; }
.bf-files-doc.out { opacity: 0; transform: translateY(4px); transition: opacity .13s var(--ease-out), transform .13s var(--ease-out); }
.bf-files-doc.in { animation: bf-doc-in .3s var(--ease-out); }
@keyframes bf-doc-in { from { opacity: 0; transform: translateY(6px); } }
.bf-files-doc:empty::before { content: 'Reading the form…'; display: block; padding-top: 14px; color: var(--muted); font-style: italic; }
.bf-files-doc h3 { font: 800 19px var(--display); letter-spacing: -.015em; color: #1B2650; margin: 16px 0 10px; }
.bf-files-doc h4 { font: 700 11px var(--sans); letter-spacing: .11em; text-transform: uppercase; color: var(--muted); margin: 22px 0 8px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.bf-files-doc h5 { font: 700 13.5px var(--sans); margin: 14px 0 4px; }
.bf-files-doc p { margin: 0 0 10px; }
.bf-files-doc ul, .bf-files-doc ol { margin: 0 0 10px; padding-left: 20px; }
.bf-files-doc li { margin: 3px 0; }
.bf-files-doc li > ul { margin: 2px 0 0; }
.bf-files-doc code { font: 500 12px var(--mono); background: var(--raised); border: 1px solid var(--line-soft); border-radius: 5px; padding: 1px 5px; }
.bf-files-doc pre { margin: 0 0 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, .7); overflow: auto; }
.bf-files-doc pre code { background: none; border: none; padding: 0; }
.bf-files-doc blockquote { margin: 0 0 10px; padding: 2px 0 2px 12px; border-left: 3px solid rgba(76, 99, 230, .4); color: var(--muted); }
.bf-files-doc hr { border: none; border-top: 1px solid var(--line-soft); margin: 14px 0; }
.bf-files-doc a { color: var(--accent-deep); }

/* on a narrow window the panel floats over the form instead of squeezing it */
@media (max-width: 900px) {
  .brief-files { --bf-files-w: min(440px, 92vw); position: fixed; right: 0; }
  .brief-files .bf-files-in { box-shadow: -14px 0 40px rgba(24, 33, 66, .14); }
}
@media (prefers-reduced-motion: reduce) {
  .brief-files, .bf-files-in, .bf-files-chev, .bf-files-ind, .bf-files-doc.out { transition-duration: .01s; }
  .bf-files-doc.in { animation-duration: .01s; }
}

/* ---- "save as preset" chip for a custom page name (brief form) ---- */
.preset-add-row { display: flex; flex-wrap: wrap; gap: 8px; }
.preset-add-row:empty { display: none; }
.preset-add-chip {
  font: 600 11.5px var(--sans); color: var(--accent-deep);
  background: var(--accent-soft); border: 1px solid rgba(76, 99, 230, .3); border-radius: 999px;
  padding: 5px 12px; cursor: pointer;
  transition: border-color .16s var(--ease-out), background .16s var(--ease-out), transform .32s var(--ease-spring), opacity .2s var(--ease-out);
  animation: chk-row-in .3s var(--ease-out);
}
.preset-add-chip:hover { border-color: rgba(76, 99, 230, .55); background: #FFFFFF; transform: translateY(-1px); }
.preset-add-chip:active { transform: scale(.95); transition-duration: .06s; }
.preset-add-chip:disabled { opacity: .5; cursor: default; transform: none; }

/* ---- palette picker (brief form) ---- */
#bf-colors { transition: opacity .28s var(--ease-out), filter .28s var(--ease-out); }
#bf-colors.is-off { opacity: .38; filter: saturate(.25); pointer-events: none; }
.chk.opt input[type=color] { transition: opacity .2s var(--ease-out), transform .32s var(--ease-spring); }
.chk.opt:not(:has(input[type=checkbox]:checked)) input[type=color] { opacity: .35; }
.chk.opt:has(input[type=checkbox]:checked) input[type=color] { opacity: 1; }

/* ---- "keep the current website's colours" (brief form) ----
   The URL row glides open under its button with the grid-rows trick; read
   colours land on the swatches with a short settle rather than a blink. */
.color-tools { align-items: center; }
.color-tools .btn.on { background: var(--accent-soft); border-color: rgba(76, 99, 230, .45); color: var(--accent-deep); }
.match-site { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--ease-out); }
.match-site.open { grid-template-rows: 1fr; }
.match-site-in {
  overflow: hidden; min-height: 0; display: flex; flex-direction: column; gap: 10px;
  opacity: 0; transform: translateY(-4px);
  transition: opacity .25s var(--ease-out), transform .3s var(--ease-out);
}
.match-site.open .match-site-in { opacity: 1; transform: none; padding-top: 4px; }
.match-row { display: flex; gap: 8px; align-items: center; }
.match-row input { flex: 1; min-width: 0; }
.match-row .btn { white-space: nowrap; }
.match-hint { margin: 0; min-height: 1.5em; transition: opacity .12s var(--ease-out), color .2s var(--ease-out); }
.match-hint.fading { opacity: 0; }
.match-hint.bad { color: var(--danger-ink); }
/* the site's most-used colours, as a strip to glance at */
.match-swatches { display: flex; gap: 6px; height: 0; opacity: 0; transition: height .3s var(--ease-out), opacity .25s var(--ease-out); }
.match-swatches.show { height: 18px; opacity: 1; }
.match-swatches i {
  flex: 1; border-radius: 6px; border: 1px solid rgba(24, 33, 66, .12);
  transform: scaleX(.6); opacity: 0; animation: swatch-in .4s var(--ease-spring) forwards;
}
@keyframes swatch-in { to { transform: none; opacity: 1; } }
/* a chip that just took a colour off the site settles with a small pulse */
.chk.matched { animation: chk-matched .6s var(--ease-out); }
@keyframes chk-matched {
  0% { box-shadow: 0 0 0 0 rgba(76, 99, 230, .45); }
  100% { box-shadow: 0 0 0 10px rgba(76, 99, 230, 0); }
}
@media (max-width: 560px) { .match-row { flex-wrap: wrap; } .match-row .btn { flex: 1; justify-content: center; } }

/* ---- the build bar (brief form) ----
   Model + effort pickers above "Start the build". Each picker is one row of
   options with a single pill that slides to the checked one — the highlight
   travels, it never blinks from option to option. */
.build-bar { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; margin-top: 6px; }
.build-picks { display: flex; flex-wrap: wrap; gap: 12px 22px; }
.seg-group {
  display: flex; flex-direction: column; gap: 6px;
  transition: opacity .28s var(--ease-out), filter .28s var(--ease-out), transform .32s var(--ease-spring);
}
.seg-group.off { opacity: .42; filter: saturate(.3); pointer-events: none; }
.seg-lab { font: 600 11px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding-left: 2px; }
.seg {
  position: relative; display: inline-flex; gap: 2px; padding: 3px;
  border: 1px solid var(--line); border-radius: 999px;
  background: rgba(255, 255, 255, .45);
  transition: border-color .16s var(--ease-out), background .16s var(--ease-out), box-shadow .32s var(--ease-out);
}
.seg:hover { border-color: rgba(76, 99, 230, .4); background: #FFFFFF; }
.seg:focus-within { border-color: rgba(76, 99, 230, .55); box-shadow: 0 0 14px rgba(76, 99, 230, .12); }
.seg-ind {
  position: absolute; top: 3px; left: 0; bottom: 3px; width: 0; opacity: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(76, 99, 230, .18), rgba(76, 99, 230, .09));
  border: 1px solid rgba(76, 99, 230, .5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 0 14px rgba(76, 99, 230, .14);
  box-sizing: border-box; pointer-events: none;
  transition: transform .38s var(--ease-spring), width .3s var(--ease-out), opacity .2s var(--ease-out);
}
.seg.placed .seg-ind { opacity: 1; }
.seg-opt { position: relative; }
.seg-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.seg-opt span {
  display: inline-flex; align-items: center; padding: 6px 13px; border-radius: 999px;
  font: 600 12.5px var(--sans); color: var(--muted); cursor: pointer; white-space: nowrap;
  transition: color .2s var(--ease-out), transform .32s var(--ease-spring);
}
.seg-opt span:hover { color: var(--ink); }
.seg-opt span:active { transform: scale(.94); transition-duration: .06s; }
.seg-opt input:checked + span { color: var(--accent-deep); }
.seg-opt input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 1px; }
/* Fable's option warms toward the deeper violet its badge uses. */
.seg-opt input[value=fable]:checked + span { color: #4B2E9E; }
.build-hint {
  margin: -2px 0 0 2px; font-size: 12px; color: var(--muted); min-height: 1.5em; max-width: 620px;
  transition: opacity .12s var(--ease-out);
}
.build-hint.fading { opacity: 0; }

/* ---- goal & build loop (brief form) ----
   The options only mean anything once the loop is on, so they glide open with
   the grid-rows trick rather than appearing under the toggle. */
.chk.loop-toggle { align-self: flex-start; }
.loop-opts {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .35s var(--ease-out);
}
.loop-opts.open { grid-template-rows: 1fr; }
.loop-opts-in {
  overflow: hidden; min-height: 0;
  display: flex; flex-direction: column; gap: 10px;
  opacity: 0; transition: opacity .25s var(--ease-out);
}
.loop-opts.open .loop-opts-in { opacity: 1; padding-top: 10px; }
.loop-nums { display: flex; flex-wrap: wrap; gap: 10px; }
.loop-num {
  display: inline-flex; align-items: center; gap: 9px;
  border: 1px solid var(--line); border-radius: 999px; padding: 6px 8px 6px 14px;
  font-size: 13px; background: rgba(255, 255, 255, .45);
  transition: border-color .16s var(--ease-out), background .16s var(--ease-out);
}
.loop-num:focus-within { border-color: rgba(76, 99, 230, .55); background: #FFFFFF; }
.loop-num input {
  width: 62px; flex: none; text-align: center; padding: 5px 6px;
  font-variant-numeric: tabular-nums;
}

/* ---- inspiration library (brief form) ---- */
.lab-hint { font-size: 12px; color: var(--muted); margin: -4px 0 0; }
.inspo-list { display: flex; flex-direction: column; gap: 8px; }
.inspo-list:empty { display: none; }
.inspo-empty { font-size: 12.5px; color: var(--muted); margin: 0; }
.inspo-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 14px;
  background: rgba(255, 255, 255, .45);
  transition: border-color .16s var(--ease-out), background .16s var(--ease-out), box-shadow .32s var(--ease-out);
  animation: inspo-row-in .3s var(--ease-out);
}
.inspo-item.settled { animation: none; }
@keyframes inspo-row-in { from { opacity: 0; transform: translateY(-4px); } }
.inspo-item:hover { border-color: rgba(76, 99, 230, .4); background: #FFFFFF; }
.inspo-item.on { border-color: rgba(76, 99, 230, .55); background: var(--accent-soft); box-shadow: 0 0 14px rgba(76, 99, 230, .1); }
.inspo-item input[type=checkbox] { width: auto; flex: none; cursor: pointer; }
.inspo-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.inspo-body b { display: flex; align-items: baseline; gap: 7px; font-size: 13px; color: var(--ink); min-width: 0; }
.inspo-body b > :first-child, .inspo-body > b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inspo-headline {
  flex: none; font: 400 11px var(--sans); font-style: normal; color: var(--muted);
  max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---- the thumbnail: a still, a poster frame, or a letter ---- */
.inspo-thumb {
  position: relative; flex: none; width: 76px; height: 50px; padding: 0; overflow: hidden;
  border: 1px solid var(--line); border-radius: 10px; cursor: zoom-in;
  background: linear-gradient(160deg, rgba(255, 255, 255, .9), rgba(76, 99, 230, .07));
  display: grid; place-items: center;
  transition: border-color .16s var(--ease-out), transform .32s var(--ease-spring), box-shadow .32s var(--ease-out);
}
.inspo-thumb:hover { border-color: rgba(76, 99, 230, .5); transform: translateY(-1px) scale(1.03); box-shadow: var(--shadow-lift); }
.inspo-thumb img, .inspo-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.inspo-thumb.is-plain img.inspo-favicon { width: 22px; height: 22px; object-fit: contain; }
.inspo-letter { font: 700 18px var(--display); color: var(--accent-deep); opacity: .7; }
.inspo-kind {
  position: absolute; left: 4px; bottom: 4px;
  font: 600 8.5px var(--sans); letter-spacing: .07em; text-transform: uppercase;
  color: #FFFFFF; background: rgba(24, 33, 66, .62); border-radius: 999px; padding: 1.5px 6px;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  opacity: 0; transition: opacity .2s var(--ease-out);
}
.inspo-item:hover .inspo-kind, .inspo-thumb.is-video .inspo-kind { opacity: 1; }

/* ---- the editable "what to take from it" note ---- */
.inspo-note-wrap { display: flex; min-width: 0; }
.inspo-note {
  font: 400 12px var(--sans); color: var(--muted); text-align: left;
  background: none; border: 0; border-radius: 6px; padding: 0; cursor: text;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: color .16s var(--ease-out);
}
.inspo-note:hover { color: var(--accent-deep); }
.inspo-note.empty { opacity: .58; font-style: italic; }
.inspo-note-edit {
  font: 400 12px var(--sans); width: 100%; padding: 2px 7px; border-radius: 7px;
  border: 1px solid rgba(76, 99, 230, .45); background: #FFFFFF; color: var(--ink);
  animation: inspo-note-edit-in .22s var(--ease-out);
}
@keyframes inspo-note-edit-in { from { opacity: 0; border-color: transparent; background: transparent; } }
.inspo-retry {
  align-self: flex-start; margin-top: 3px;
  font: 600 10.5px var(--sans); color: var(--warn);
  background: none; border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; cursor: pointer;
  transition: border-color .16s var(--ease-out), background .16s var(--ease-out);
}
.inspo-retry:hover { border-color: rgba(154, 106, 18, .45); background: #FFFFFF; }
.inspo-retry:disabled { opacity: .55; cursor: default; }

.inspo-controls { flex: none; display: flex; align-items: center; gap: 2px; }
.inspo-open, .inspo-del {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 999px; border: 1px solid transparent;
  background: none; color: var(--muted); font: 400 15px var(--sans); cursor: pointer; text-decoration: none;
  transition: color .16s var(--ease-out), border-color .16s var(--ease-out), background .16s var(--ease-out);
}
.inspo-open:hover { color: var(--accent-deep); border-color: rgba(76, 99, 230, .4); background: #FFFFFF; }
.inspo-del { font-size: 17px; line-height: 1; }
.inspo-del:hover { color: #B3261E; border-color: rgba(179, 38, 30, .35); background: #FFFFFF; }

/* ---- a row that is still uploading ---- */
.inspo-item.uploading { cursor: default; }
.inspo-item.uploading .inspo-thumb { cursor: default; }
.inspo-item.uploading .inspo-thumb:hover { transform: none; box-shadow: none; border-color: var(--line); }
.inspo-item.uploading img { opacity: .55; }
.inspo-item.failed { border-color: var(--danger-line); background: var(--danger-bg); }
.inspo-item.failed .inspo-note { color: var(--danger-ink); white-space: normal; }
.inspo-bar {
  display: block; height: 3px; margin-top: 5px; border-radius: 999px;
  background: rgba(24, 33, 66, .12); overflow: hidden;
}
.inspo-bar > span {
  display: block; height: 100%; border-radius: 999px; background: var(--cta-grad);
  transition: width .2s var(--ease-out);
}

/* ---- adding: the link row, the upload button, the drop target ---- */
.inspo-drop {
  display: flex; flex-direction: column; gap: 9px; padding: 10px; margin: 0 -10px -10px;
  border: 1px dashed transparent; border-radius: 16px;
  transition: border-color .2s var(--ease-out), background .2s var(--ease-out);
}
.inspo-drop.dropping { border-color: rgba(76, 99, 230, .55); background: var(--accent-soft); }
.inspo-drop.dropping .inspo-upload-hint { color: var(--accent-deep); }
.inspo-add { display: flex; gap: 8px; flex-wrap: wrap; }
.inspo-add input[type=url] { flex: 1 1 200px; }
.inspo-add input:not([type=url]) { flex: 2 1 240px; }
.inspo-add .btn { flex: none; }
.inspo-upload-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.inspo-upload-row .btn svg { width: 15px; height: 15px; }
.inspo-upload-hint { font-size: 12px; color: var(--muted); transition: color .2s var(--ease-out); }

/* ---- the preview lightbox ---- */
.modal.inspo-modal {
  max-width: min(1100px, 94vw); display: flex; flex-direction: column; gap: 12px;
  max-height: 92vh; padding: 18px 20px 20px;
}
.inspo-modal-head { display: flex; align-items: center; gap: 10px; }
.inspo-modal-title { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.inspo-modal-title b { font: 700 15px var(--display); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inspo-modal-title span { font-size: 11.5px; color: var(--muted); }
.inspo-modal-head .btn { flex: none; }
.inspo-modal-head .btn svg { width: 14px; height: 14px; }
.inspo-stage {
  flex: 1; min-height: 0; display: grid; place-items: center; gap: 10px;
  border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  background: repeating-conic-gradient(rgba(24, 33, 66, .045) 0% 25%, transparent 0% 50%) 50% / 18px 18px;
  animation: inspo-stage-in .32s var(--ease-out);
}
@keyframes inspo-stage-in { from { opacity: 0; transform: scale(.985); } }
.inspo-stage img, .inspo-stage video { max-width: 100%; max-height: 74vh; display: block; object-fit: contain; }
.inspo-stage.is-frame { display: block; background: #FFFFFF; }
.inspo-stage iframe { width: 100%; height: min(74vh, 720px); border: 0; display: block; }
.inspo-stage-desc, .inspo-stage-empty {
  margin: 0; padding: 0 22px 16px; font-size: 12.5px; line-height: 1.6; color: var(--muted); text-align: center; max-width: 60ch;
}
.inspo-stage-empty { padding: 40px 22px; }
.inspo-modal-note {
  margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--muted);
  border-left: 2px solid var(--accent); padding-left: 10px;
}

@media (max-width: 640px) {
  .inspo-thumb { width: 58px; height: 40px; }
  .inspo-headline { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .inspo-item, .inspo-stage, .inspo-note-edit { animation: none; }
  .inspo-thumb:hover { transform: none; }
}

/* ---- skills library (brief form) ---- */
.skill-list { display: flex; flex-direction: column; gap: 8px; }
.skill-list:empty { display: none; }
.skill-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 14px;
  background: rgba(255, 255, 255, .45);
  transition: border-color .16s var(--ease-out), background .16s var(--ease-out), box-shadow .32s var(--ease-out);
  animation: skill-row-in .3s var(--ease-out);
}
.skill-item.settled { animation: none; }
@keyframes skill-row-in { from { opacity: 0; transform: translateY(-4px); } }
.skill-item:hover { border-color: rgba(76, 99, 230, .4); background: #FFFFFF; }
.skill-item.on { border-color: rgba(76, 99, 230, .55); background: var(--accent-soft); box-shadow: 0 0 14px rgba(76, 99, 230, .1); }
/* Rows grow when expanded, so pin the controls to the top and optically centre
   them against the collapsed two-line body instead of flex-centring. */
.skill-item { align-items: flex-start; }
.skill-item input[type=checkbox] { width: auto; flex: none; margin-top: 10px; cursor: pointer; }
.skill-body {
  display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1;
  background: none; border: 0; padding: 0; text-align: left; cursor: pointer; font: inherit; color: inherit;
}
.skill-body b { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink); }
.skill-tag {
  font: 600 9.5px var(--sans); letter-spacing: .08em; text-transform: uppercase; font-style: normal;
  color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 1.5px 7px;
}
.skill-desc { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Click the name → the one-liner glides shut while the full text glides open
   (grid-rows trick, per the no-snap rule). */
.skill-desc-wrap { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .3s var(--ease-out); }
.skill-desc-wrap .skill-desc { min-height: 0; transition: opacity .2s var(--ease-out); }
.skill-item.open .skill-desc-wrap { grid-template-rows: 0fr; }
.skill-item.open .skill-desc-wrap .skill-desc { opacity: 0; }
.skill-full-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s var(--ease-out); }
.skill-item.open .skill-full-wrap { grid-template-rows: 1fr; }
.skill-full {
  overflow: hidden; min-height: 0; display: flex; flex-direction: column;
  align-items: flex-start; gap: 7px; opacity: 0; transition: opacity .25s var(--ease-out);
}
.skill-item.open .skill-full { opacity: 1; }
.skill-full-text {
  font-size: 12px; line-height: 1.55; color: var(--muted); white-space: pre-wrap;
  margin-top: 3px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden;
}
.skill-more {
  margin-bottom: 2px; font: 600 11px var(--sans); color: var(--accent-deep);
  background: none; border: 1px solid var(--line); border-radius: 999px; padding: 3px 11px; cursor: pointer;
  transition: border-color .16s var(--ease-out), background .16s var(--ease-out), transform .32s var(--ease-spring);
}
.skill-more:hover { border-color: rgba(76, 99, 230, .4); background: #FFFFFF; transform: translateY(-1px); }
.skill-more:active { transform: scale(.95); transition-duration: .06s; }
#skill-modal-text { min-height: 220px; resize: vertical; font-size: 13px; line-height: 1.55; }
.skill-star, .skill-del {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  margin-top: 4px; width: 26px; height: 26px; border-radius: 999px; border: 1px solid transparent;
  background: none; color: var(--muted); font: 400 15px var(--sans); cursor: pointer;
  transition: color .16s var(--ease-out), border-color .16s var(--ease-out), background .16s var(--ease-out), transform .32s var(--ease-spring);
}
.skill-star svg { width: 15px; height: 15px; fill: none; transition: fill .16s var(--ease-out); }
.skill-star:hover { color: var(--accent-deep); border-color: rgba(76, 99, 230, .4); background: #FFFFFF; transform: scale(1.08); }
.skill-star:active { transform: scale(.9); transition-duration: .06s; }
.skill-star.is-default { color: var(--accent-deep); }
.skill-star.is-default svg { fill: currentColor; }
.skill-del { font-size: 17px; line-height: 1; }
.skill-del:hover { color: #B3261E; border-color: rgba(179, 38, 30, .35); background: #FFFFFF; }
.skill-add { display: flex; gap: 8px; flex-wrap: wrap; }
.skill-add input { flex: 1 1 200px; }
.skill-add textarea { flex: 1 1 100%; resize: vertical; min-height: 40px; }
.skill-add .btn { flex: none; }
.skill-add #bf-skill-upload { margin-left: auto; }

/* ---- editor cockpit ---- */
.topbar {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  background: rgba(255, 255, 255, .6); border-bottom: 1px solid var(--line-soft); flex-wrap: wrap;
  backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4);
  position: relative; z-index: 5;
}
.ed-name { font: 700 15px var(--display); }
.page-select { width: auto; padding: 6px 11px; font-size: 13px; border-radius: 999px; }
.mode-group {
  display: flex; gap: 4px; background: rgba(24, 33, 66, .06); padding: 3px; border-radius: 999px;
  border: 1px solid var(--line-soft); box-shadow: inset 0 2px 6px rgba(24, 33, 66, .08);
}
.mode-group .btn { border: 1px solid transparent; background: transparent; box-shadow: none; }
.mode-group .btn:hover { background: rgba(255, 255, 255, .85); border-color: transparent; transform: none; }
.mode-group .btn:active { transform: scale(.94); }
.mode-group .btn.active:hover { background: var(--accent-soft); }
.spacer { flex: 1; }

/* ---- refresh: the small round one beside Open ----
   Half a pill wide, so it reads as a utility next to Open and Launch rather
   than a fourth thing to decide about. `padding: 0` is set explicitly — the
   browser's default button padding would push the arrow off-centre — and the
   glyph turns once on a press, so a canvas that comes back looking identical
   still says it was redrawn. */
.btn.icon.ed-refresh { width: 29px; height: 29px; padding: 0; display: grid; place-items: center; }
.ed-refresh svg { width: 15px; height: 15px; }
.ed-refresh.is-spinning svg { animation: ed-refresh-turn .62s var(--ease-out); }
@keyframes ed-refresh-turn { from { transform: rotate(0turn); } to { transform: rotate(1turn); } }
@media (prefers-reduced-motion: reduce) {
  .ed-refresh.is-spinning svg { animation: none; }
}

/* ---- text settings — the Text tool's own strip ----
   Sits between the mode bubble and the SEO/AEO chip and glides open while
   Text mode is on; closed it folds to zero width (and gives back its share
   of the topbar gap) so the bar reads exactly as it did before. */
.text-settings, .draw-settings {
  display: flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px;
  border: 1px solid var(--line-soft); background: rgba(24, 33, 66, .06);
  box-shadow: inset 0 2px 6px rgba(24, 33, 66, .08);
  max-width: 440px; overflow: hidden; white-space: nowrap; flex: none;
  transition: max-width .4s var(--ease-out), opacity .26s var(--ease-out) .08s,
    margin-left .4s var(--ease-out), padding .4s var(--ease-out),
    border-color .26s var(--ease-out), box-shadow .26s var(--ease-out), visibility 0s;
}
.text-settings:not(.open), .draw-settings:not(.open) {
  max-width: 0; margin-left: -10px; padding-left: 0; padding-right: 0;
  opacity: 0; border-color: transparent; background: transparent; box-shadow: none;
  pointer-events: none; visibility: hidden;
  transition: max-width .4s var(--ease-out), opacity .18s var(--ease-out),
    margin-left .4s var(--ease-out), padding .4s var(--ease-out),
    border-color .18s var(--ease-out), box-shadow .18s var(--ease-out), visibility 0s .4s;
}
.text-settings .btn, .draw-settings .btn { border: 1px solid transparent; background: transparent; box-shadow: none; }
.text-settings .btn:hover, .draw-settings .btn:hover { background: rgba(255, 255, 255, .85); border-color: transparent; transform: none; box-shadow: none; }
.text-settings .btn:active, .draw-settings .btn:active { transform: scale(.94); }
.text-settings .btn:disabled, .text-settings .btn:disabled:hover, .draw-settings .btn:disabled, .draw-settings .btn:disabled:hover { background: transparent; border-color: transparent; box-shadow: none; transform: none; }
.text-settings .ts-toggle { width: 30px; justify-content: center; padding: 6px 0; font-size: 13px; }
.ts-b { font-weight: 800; }
.ts-i { font-style: italic; font-family: Georgia, serif; font-weight: 500; }
.ts-u { text-decoration: underline; text-underline-offset: 2px; font-weight: 500; }
.text-settings .ts-toggle.active,
.text-settings .ts-toggle.active:hover { background: var(--accent-soft); border-color: rgba(76, 99, 230, .45); color: var(--accent-deep); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 0 14px rgba(76, 99, 230, .14); }
.ts-div { width: 1px; height: 16px; background: var(--line); margin: 0 4px; flex: none; }
.ts-font {
  width: auto; max-width: 128px; padding: 5px 9px; font: 600 12.5px var(--sans);
  border-radius: 999px; border-color: transparent; background: transparent;
}
.ts-font:hover:not(:disabled) { background: rgba(255, 255, 255, .85); border-color: transparent; }
.ts-font:disabled { opacity: .45; cursor: default; }
.text-settings .ts-step { width: 26px; justify-content: center; padding: 6px 0; font-size: 14px; }
.ts-size { font: 500 12px var(--mono); color: var(--ink); min-width: 24px; text-align: center; flex: none; }

/* ---- draw — the Draw tool's strip ----
   Shares the text strip's fold-out. Four tools, four inks, undo / clear, the
   count, and the send. The inks are the marks' own colours — chosen to read
   over any client site, not the app's palette — so they are literals here. */
.draw-settings { max-width: 520px; gap: 3px; }
.draw-settings .ds-tool { width: 30px; height: 30px; justify-content: center; padding: 0; }
.draw-settings .ds-tool svg { width: 16px; height: 16px; }
.draw-settings .ds-tool.active,
.draw-settings .ds-tool.active:hover { background: var(--accent-soft); border-color: rgba(76, 99, 230, .45); color: var(--accent-deep); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 0 14px rgba(76, 99, 230, .14); }
.ds-inks { display: flex; align-items: center; gap: 6px; padding: 0 5px; flex: none; }
.ds-ink {
  width: 15px; height: 15px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 2px solid #fff; background: var(--ink-c); box-shadow: 0 0 0 1px rgba(24, 33, 66, .18);
  transition: transform .2s var(--ease-spring), box-shadow .18s var(--ease-out);
}
.ds-ink:hover { transform: scale(1.18); }
.ds-ink:active { transform: scale(.94); }
.ds-ink.active { box-shadow: 0 0 0 2px var(--ink-c); transform: scale(1.1); }
.ds-count {
  font: 500 11.5px var(--sans); color: var(--muted); padding: 0 6px; white-space: nowrap;
  min-width: 66px; text-align: center; flex: none; transition: color .22s var(--ease-out);
}
.draw-settings.paused .ds-count { color: var(--accent-deep); font-weight: 600; }
.draw-settings.paused .ds-tool.active { opacity: .5; transition: opacity .2s var(--ease-out); }
.draw-settings .btn.ds-send {
  padding: 5px 12px; font-size: 12px; margin-left: 2px; flex: none;
  background: var(--cta-grad); border-color: transparent; color: var(--on-cta); box-shadow: var(--bloom);
  transition: box-shadow .2s var(--ease-out), transform .2s var(--ease-spring), opacity .2s var(--ease-out);
}
.draw-settings .btn.ds-send:hover { background: var(--cta-grad); box-shadow: 0 6px 24px rgba(76, 99, 230, .45), 0 14px 52px rgba(76, 99, 230, .3); transform: translateY(-1px); }
.draw-settings .btn.ds-send:active { transform: translateY(1px) scale(.96); }
.draw-settings .btn.ds-send:disabled, .draw-settings .btn.ds-send:disabled:hover {
  background: var(--cta-grad); color: var(--on-cta); border-color: transparent; opacity: .45; box-shadow: none; transform: none;
}

/* A viewport-bound cockpit: the minmax(0,1fr) row keeps the chat and inspector
   scrolling inside their panels instead of growing the page (and the stage
   stays exactly one screen tall for the MacBook fit).
   height:100% rather than 100vh on purpose — 100vh ignores a horizontal
   scrollbar, so on any page that grows one, the last ~15px of the shell hides
   underneath it. The floor of the chat panel is the usage band, so that is
   exactly what would get eaten. Percentage height resolves against <body>,
   which is the viewport minus its scrollbars.
   The shared .view entry animation is swapped for a fade here for the same
   reason: translating a full-height shell down by 5px pushes 5px of its bottom
   edge off screen for as long as the animation is on it. */
#view-editor { height: 100%; min-height: 0; animation-name: view-fade; }
@keyframes view-fade { from { opacity: 0; } }
/* Nothing in the cockpit wants the *page* to scroll — every panel scrolls
   itself — and letting it scroll is what puts the panel floor below the fold. */
body.editing { overflow: hidden; }
.cockpit {
  flex: 1; display: grid; min-height: 0; position: relative;
  grid-template-columns: var(--chat-w, 320px) minmax(0, 1fr) var(--insp-w, 300px);
  grid-template-rows: minmax(0, 1fr);
}
.chat, .inspector {
  background: rgba(255, 255, 255, .55); display: flex; flex-direction: column; min-height: 0; overflow: hidden;
  backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4);
}
.chat { border-right: 1px solid var(--line-soft); }
.inspector { border-left: 1px solid var(--line-soft); overflow-y: auto; }
.panel-title { font: 700 11px var(--sans); letter-spacing: .11em; text-transform: uppercase; color: var(--muted); padding: 13px 14px 8px; display: flex; gap: 10px; align-items: center; }
.panel-title .spacer { flex: 1; }
.working { color: var(--accent-deep); animation: pulse 1.2s ease-in-out infinite; text-transform: none; letter-spacing: 0; font-weight: 500; }
@keyframes pulse { 50% { opacity: .4; } }
.btn.tiny { padding: 3px 10px; font-size: 11px; letter-spacing: 0; text-transform: none; }

/* chat rows — one per running/parked chat, stacked at the top of the panel */
.chat-tabs {
  display: flex; flex-direction: column; gap: 4px;
  padding: 0 10px 8px; max-height: 168px; overflow-y: auto; flex-shrink: 0;
}
/* the strip above the rows: folds them away with a glide and keeps the count */
.chat-tabs-wrap { flex-shrink: 0; border-bottom: 1px solid var(--line-soft); }
.ctabs-head {
  display: flex; align-items: center; gap: 7px; width: 100%; text-align: left; cursor: pointer;
  padding: 2px 14px 6px 12px; background: none; border: none; min-height: 24px;
  font: 700 10.5px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  transition: color .16s var(--ease-out);
}
.ctabs-head:hover { color: var(--ink); }
.ctabs-head .spacer { flex: 1; }
.ctabs-chev { display: grid; place-items: center; width: 14px; height: 14px; flex-shrink: 0; transition: transform .28s var(--ease-out); }
.ctabs-chev svg { width: 13px; height: 13px; }
.chat-tabs-wrap:not(.open) .ctabs-chev { transform: rotate(-90deg); }
.ctabs-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; transition: opacity .12s var(--ease-out); }
.ctabs-label.fading { opacity: 0; }
.chat-tabs-wrap:not(.open) .ctabs-label { text-transform: none; letter-spacing: 0; font-size: 11.5px; color: var(--ink); }
.ctabs-busy { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; color: var(--accent-deep); text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 10.5px; }
.ctabs-busy i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 7px rgba(76, 99, 230, .7); animation: pulse 1.2s ease-in-out infinite; }
.ctabs-unread { color: var(--accent); font-size: 9px; flex-shrink: 0; }
.ctabs-glide { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .3s var(--ease-out); }
.chat-tabs-wrap:not(.open) .ctabs-glide { grid-template-rows: 0fr; }
.ctabs-glide-in { overflow: hidden; min-height: 0; }
.chat-tab {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 6px 8px; border-radius: 11px; border: 1px solid transparent;
  transition: background .16s var(--ease-out), border-color .16s var(--ease-out);
}
.chat-tab:hover { background: rgba(255, 255, 255, .75); border-color: var(--line-soft); }
.chat-tab.active { background: var(--accent-soft); border-color: rgba(76, 99, 230, .4); }
.ctab-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line); flex-shrink: 0; }
.chat-tab.busy .ctab-dot { background: var(--accent); box-shadow: 0 0 8px rgba(76, 99, 230, .7); animation: pulse 1.2s ease-in-out infinite; }
.ctab-main { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.ctab-main b { font-size: 12px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctab-task { font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-tab.busy .ctab-task { color: var(--accent-deep); }
.ctab-model {
  font: 500 9.5px var(--mono); text-transform: uppercase; letter-spacing: .06em;
  padding: 2px 7px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); flex-shrink: 0;
}
.ctab-loop {
  font: 600 9.5px var(--sans); letter-spacing: .04em; font-variant-numeric: tabular-nums;
  border: 1px solid var(--line); border-radius: 999px; padding: 2px 7px; white-space: nowrap;
  color: var(--muted); background: rgba(255, 255, 255, .5);
  transition: color .2s var(--ease-out), border-color .2s var(--ease-out), background .2s var(--ease-out);
}
.ctab-loop.is-active { color: var(--accent-deep); border-color: rgba(76, 99, 230, .4); background: var(--accent-soft); }
.ctab-loop.is-reached { color: var(--ok); border-color: rgba(14, 138, 95, .4); background: rgba(14, 138, 95, .07); }
.ctab-loop.is-short { color: var(--warn); border-color: rgba(154, 106, 18, .4); background: rgba(154, 106, 18, .07); }
.ctab-model.m-haiku { color: var(--ok); border-color: rgba(14, 138, 95, .4); background: rgba(14, 138, 95, .07); }
.ctab-model.m-sonnet { color: var(--accent-deep); border-color: rgba(76, 99, 230, .4); background: var(--accent-soft); }
.ctab-model.m-opus { color: #6D3FC0; border-color: rgba(109, 63, 192, .4); background: rgba(109, 63, 192, .08); }
.ctab-model.m-fable { color: #4B2E9E; border-color: rgba(75, 46, 158, .45); background: linear-gradient(135deg, rgba(75, 46, 158, .12), rgba(76, 99, 230, .1)); }
.ctab-unread { color: var(--accent); font-size: 9px; flex-shrink: 0; }
.ctab-x {
  background: none; border: none; color: var(--muted); font-size: 11px; cursor: pointer;
  border-radius: 6px; width: 18px; height: 18px; flex-shrink: 0; opacity: 0;
  transition: opacity .14s var(--ease-out), color .14s var(--ease-out);
}
.chat-tab:hover .ctab-x { opacity: .8; }
.ctab-x:hover { color: var(--danger); opacity: 1; }
/* by-person view — one row per person, then that person's chats with a back
   row on top. A view change slides the rows in from the side it came from;
   rows already on screen in the same view stay put (.settled). */
.chat-tab, .ctab-back { animation: ctab-in .26s var(--ease-out) both; }
.chat-tabs.slide-fwd :is(.chat-tab, .ctab-back) { animation-name: ctab-in-fwd; }
.chat-tabs.slide-back :is(.chat-tab, .ctab-back) { animation-name: ctab-in-back; }
.chat-tabs :is(.chat-tab, .ctab-back).settled { animation: none; }
@keyframes ctab-in { from { opacity: 0; transform: translateY(-4px); } }
@keyframes ctab-in-fwd { from { opacity: 0; transform: translateX(10px); } }
@keyframes ctab-in-back { from { opacity: 0; transform: translateX(-10px); } }
.chat-tab.person .ctab-dot { background: var(--who, var(--line)); width: 9px; height: 9px; }
.chat-tab.person.busy .ctab-dot { background: var(--who, var(--accent)); box-shadow: 0 0 8px var(--who, var(--accent)); }
.ctab-count {
  font: 600 10px var(--sans); font-variant-numeric: tabular-nums; color: var(--muted);
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: grid; place-items: center;
  background: rgba(24, 33, 66, .07); flex-shrink: 0;
}
.chat-tab.person.active .ctab-count { color: var(--accent-deep); background: rgba(76, 99, 230, .14); }
.ctab-chev { font-size: 15px; line-height: 1; color: var(--muted); flex-shrink: 0; transition: transform .16s var(--ease-out); }
.chat-tab.person:hover .ctab-chev { transform: translateX(2px); }
.ctab-back {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; cursor: pointer;
  padding: 5px 8px; margin-bottom: 2px; border-radius: 11px; border: 1px solid transparent; background: none;
  font: 600 11px var(--sans); color: var(--muted); letter-spacing: .02em;
  transition: background .16s var(--ease-out), border-color .16s var(--ease-out), color .16s var(--ease-out);
}
.ctab-back:hover { background: rgba(255, 255, 255, .75); border-color: var(--line-soft); color: var(--ink); }
.ctab-back:hover .ctab-chev { transform: translateX(-2px); }
.ctab-back .ctab-dot { background: var(--who, var(--line)); width: 8px; height: 8px; }
.ctab-back b { font-size: 11px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctab-who {
  display: inline-block; margin-right: 5px; padding: 0 5px; border-radius: 999px;
  font: 600 9px var(--sans); letter-spacing: .04em; text-transform: uppercase; line-height: 14px;
  color: var(--who, var(--muted)); background: color-mix(in srgb, var(--who, var(--muted)) 13%, transparent);
}
#chat-people.active { background: var(--accent-soft); border-color: rgba(76, 99, 230, .45); color: var(--accent-deep); }
#chat-people svg { width: 15px; height: 15px; display: block; }
.chat-hint { flex: 1; font-size: 10.5px; color: var(--muted); align-self: center; line-height: 1.3; }
.msg.model { font: 500 11px var(--mono); color: var(--muted); padding: 1px 4px; animation: none; }
.msg.model b { color: var(--accent-deep); font-weight: 500; text-transform: uppercase; letter-spacing: .05em; }

/* chat feed */
.chat-feed { flex: 1; overflow-y: auto; padding: 4px 14px 12px; display: flex; flex-direction: column; gap: 8px; }
.msg { border-radius: 14px; padding: 9px 13px; font-size: 13.5px; white-space: pre-wrap; word-break: break-word; animation: msg-in .28s var(--ease-out); }
@keyframes msg-in { from { opacity: 0; transform: translateY(6px); } }
.msg.user { background: var(--user-grad); color: #F4F7FF; align-self: flex-end; max-width: 92%; border-bottom-right-radius: 5px; box-shadow: 0 4px 14px rgba(61, 79, 208, .3); }
.msg.claude { background: rgba(255, 255, 255, .8); border: 1px solid var(--line-soft); border-bottom-left-radius: 5px; }
.msg.err { background: rgba(220, 70, 60, .09); border: 1px solid var(--danger-line); color: #7E211A; }
.msg.done { font: 500 11px var(--mono); color: var(--ok); letter-spacing: .06em; text-transform: uppercase; padding: 2px 4px; }
/* A goal-loop line is the app talking, not Claude — same width as a reply so
   the thread still reads top to bottom, but clearly not part of it. */
.msg.loop {
  font: 500 12px var(--sans); color: var(--accent-deep); font-variant-numeric: tabular-nums;
  background: var(--accent-soft); border: 1px dashed rgba(76, 99, 230, .4);
  border-radius: 12px; padding: 8px 12px;
}
.msg.sep { font: 700 10.5px var(--sans); color: var(--muted); letter-spacing: .12em; text-transform: uppercase; text-align: center;
  padding: 6px 0 2px; border-top: 1px solid var(--line-soft); margin-top: 4px; animation: none; }
.chat-form { border-top: 1px solid var(--line-soft); padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.chat-form textarea { resize: none; font-size: 13.5px; }
.chat-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* stage */
.stage { background: rgba(24, 33, 66, .05); display: flex; min-width: 0; position: relative; }
/* The device card. The iframe inside is laid out at the device's true size
   (1440×900, 820×1180, 390×664 — app.js) so the site sees a real screen, and
   is scaled from its top-left corner to fit; the card takes the scaled size,
   clips the corners, and sits centred — or scrolls, once zoomed past the
   stage. Auto margins centre it without clipping the way justify-content
   would. */
.stage-inner { flex: 1; display: flex; padding: 16px; min-width: 0; min-height: 0; overflow: auto; }
.device {
  flex: 0 0 auto; margin: auto; position: relative; overflow: hidden; box-sizing: content-box;
  border: 1px solid var(--line); border-radius: 14px; background: #fff;
  box-shadow: 0 16px 48px rgba(24, 33, 66, .16), 0 2px 40px rgba(76, 99, 230, .08);
  transition: width .3s var(--ease-out), height .3s var(--ease-out);
}
#site-frame {
  display: block; border: 0; background: #fff; width: 100%; height: 100%;
  transform-origin: top left;
  transition: transform .3s var(--ease-out);
}
.stage-tools { position: absolute; top: 24px; right: 26px; z-index: 6; display: flex; align-items: center; gap: 8px; }
/* Crunch — the site resized like a browser window. The card lets its grips
   show past its edges (the frame keeps the rounded corners), the grips are a
   pill on either side that brightens under the pointer, and while a drag is
   on, the width changes with no easing so the edge stays under the finger. */
.crunch-grip {
  display: none; position: absolute; top: 0; bottom: 0; width: 16px; padding: 0; border: 0;
  background: transparent; cursor: ew-resize; z-index: 5; touch-action: none;
}
.crunch-grip.left { left: -18px; }
.crunch-grip.right { right: -18px; }
.crunch-grip::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: 6px; height: 64px; border-radius: 999px;
  transform: translate(-50%, -50%); background: rgba(24, 33, 66, .3);
  transition: background .16s var(--ease-out), height .22s var(--ease-out), width .16s var(--ease-out);
}
.crunch-grip:hover::before, .crunch-grip:focus-visible::before, body.crunch-drag .crunch-grip::before { background: var(--accent); height: 110px; width: 7px; }
.crunch-grip:focus-visible { outline: none; }
body.crunching .crunch-grip { display: block; }
body.crunching .device { overflow: visible; }
body.crunching #site-frame { border-radius: 13px; }
/* the readout sits over the site once the frame fills the stage — give it a floor */
body.crunching .device-dims {
  color: var(--accent-deep); background: rgba(255, 255, 255, .9); padding: 5px 11px; border-radius: 999px;
  box-shadow: 0 1px 6px rgba(24, 33, 66, .14); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
body.crunch-drag .device, body.crunch-drag #site-frame { transition: none; }
body.crunch-drag { cursor: ew-resize; user-select: none; -webkit-user-select: none; }
/* which screen this layout is drawn for — "Phone · 390 × 664" */
.device-dims { font-size: 11.5px; font-weight: 600; letter-spacing: .01em; color: var(--ink-3, #6B7599); white-space: nowrap; }

/* waiting canvas — nothing to preview yet.
   While Claude writes the first pages the stage holds the spark in the middle
   of the canvas, turning; the preview's own 404 is blank so nothing shows in
   the corner. Idle with no pages, the mark rests instead of spinning. */
.stage-wait {
  position: absolute; inset: 0; z-index: 5; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px;
  animation: view-in .4s var(--ease-out);
}
.stage-wait[hidden] { display: none; }
.stage-wait-mark {
  width: 78px; height: 78px; color: #D97757; fill: currentColor;
  transform-origin: 50% 50%;
  animation: stage-spin 3.4s linear infinite;
  filter: drop-shadow(0 8px 22px rgba(217, 119, 87, .28));
}
.stage-wait-note { font-size: 13px; color: var(--muted); letter-spacing: .01em; }
.stage-wait.is-idle .stage-wait-mark { animation: none; opacity: .45; filter: none; }
@keyframes stage-spin { to { transform: rotate(360deg); } }

/* ---- change log ----
   The canvas narrates itself: every change that lands on it — a hand edit or
   a finished Claude turn — slides in at the bottom right and fades out again,
   so the last few steps are always readable without asking. The clock button
   keeps the full timeline; ⌘Z / ⇧⌘Z drive the same stack. */
.hist-dock {
  position: absolute; right: 20px; bottom: 18px; z-index: 7;
  /* never wider than the canvas it belongs to, however narrow that gets */
  max-width: calc(100% - 40px);
  display: flex; flex-direction: column; align-items: flex-end; gap: 9px;
  pointer-events: none;
}
.hist-dock > * { pointer-events: auto; }

.hist-toasts { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; pointer-events: none; }
.hist-toasts .hist-toast.has-act { pointer-events: auto; }
.hist-toast {
  display: flex; align-items: center; gap: 8px; max-width: min(320px, 100%);
  font-size: 12.5px; color: var(--ink);
  background: var(--glass-2); backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid var(--line); border-radius: 999px; padding: 5px 14px 5px 11px;
  box-shadow: var(--shadow-rest);
  animation: hist-toast-in .3s var(--ease-spring) both, hist-toast-out .7s var(--ease-out) var(--toast-out, 3.4s) both;
}
.hist-toast .hist-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* a two-line toast (the Draw tool's first-time hint) keeps its whole sentence */
/* the toasts float over the canvas: only one with something to press takes the pointer */
.hist-toast.wrap { border-radius: 16px; padding-top: 7px; padding-bottom: 7px; }
.hist-toast.wrap .hist-text { white-space: normal; line-height: 1.4; }
/* a toast carrying an action (Undo on a delete) — the button sits flush right */
.hist-toast.has-act { padding-right: 5px; }
.hist-act {
  flex: none; font: 700 11.5px var(--sans); color: var(--accent-deep); background: var(--accent-soft);
  border: 0; border-radius: 999px; padding: 4px 11px; cursor: pointer;
  transition: background .16s var(--ease-out), transform .32s var(--ease-spring);
}
.hist-act:hover { background: rgba(76, 99, 230, .22); }
.hist-act:active { transform: scale(.94); transition-duration: .06s; }
.hist-mark { flex-shrink: 0; font-size: 10px; line-height: 1; color: var(--accent); }
.hist-toast.undo .hist-mark, .hist-toast.redo .hist-mark { font-size: 13px; color: var(--muted); }
.hist-toast.err { border-color: var(--danger-line); background: rgba(220, 70, 60, .12); color: #7E211A; }
.hist-toast.err .hist-mark { color: var(--danger); font-weight: 800; }
@keyframes hist-toast-in { from { opacity: 0; transform: translateY(8px) scale(.96); } }
@keyframes hist-toast-out { to { opacity: 0; transform: translateY(-4px); } }

.hist-btn {
  position: relative; display: grid; place-items: center; width: 34px; height: 34px; padding: 0;
  border: 1px solid var(--line); border-radius: 50%; color: var(--muted); cursor: pointer;
  background: var(--glass-2); backdrop-filter: blur(14px) saturate(140%);
  box-shadow: var(--shadow-rest);
  transition: transform .3s var(--ease-spring), box-shadow .3s var(--ease-out), color .2s var(--ease-out);
}
.hist-btn:hover { color: var(--accent-deep); transform: translateY(-1px); box-shadow: var(--shadow-lift); }
.hist-btn:active { transform: translateY(1px) scale(.94); transition-duration: .06s; }
.hist-btn[aria-expanded=true] { color: var(--accent-deep); border-color: rgba(76, 99, 230, .45); background: #FFFFFF; }
.hist-btn svg { width: 16px; height: 16px; }
.hist-count {
  position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px; padding: 0 4px;
  display: grid; place-items: center; border-radius: 999px;
  font: 600 10px var(--mono); color: var(--on-cta); background: var(--cta-grad);
  box-shadow: 0 1px 6px rgba(76, 99, 230, .45);
}

.hist-panel {
  width: 292px; max-width: 100%; max-height: min(50vh, 360px); display: flex; flex-direction: column; overflow: hidden;
  background: var(--glass-2); backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lift);
  animation: hist-panel-in .28s var(--ease-spring) both;
}
@keyframes hist-panel-in { from { opacity: 0; transform: translateY(10px) scale(.97); } }
.hist-head { display: flex; align-items: center; gap: 6px; padding: 9px 9px 9px 13px; border-bottom: 1px solid var(--line-soft); }
.hist-title { font: 700 10.5px var(--sans); letter-spacing: .11em; text-transform: uppercase; color: var(--muted); }
.hist-x {
  display: grid; place-items: center; width: 22px; height: 22px; padding: 0; flex-shrink: 0;
  border: none; border-radius: 50%; background: none; color: var(--muted); cursor: pointer;
  transition: background .18s var(--ease-out), color .18s var(--ease-out);
}
.hist-x:hover { background: var(--raised); color: var(--ink); }
.hist-x svg { width: 12px; height: 12px; }
.hist-list { flex: 1; min-height: 0; overflow-y: auto; padding: 5px 0; }
.hist-row {
  display: flex; align-items: baseline; gap: 8px; width: 100%; text-align: left;
  font: inherit; color: var(--ink); background: none; border: none;
  padding: 6px 13px; cursor: pointer; transition: background .16s var(--ease-out);
}
.hist-row:hover { background: var(--raised); }
.hist-row .hist-what { flex: 1; min-width: 0; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hist-row .hist-when { flex-shrink: 0; font: 400 10.5px var(--mono); color: var(--muted); }
.hist-row.current { background: var(--accent-soft); }
.hist-row.current .hist-what { font-weight: 600; }
.hist-row.undone { opacity: .5; }
.hist-row.undone .hist-what { text-decoration: line-through; text-decoration-color: var(--line); }
.hist-row.undone .hist-mark { color: var(--muted); }
.hist-none { margin: 0; padding: 10px 14px; font-size: 12px; line-height: 1.6; color: var(--muted); }
.hist-foot { padding: 8px 13px; border-top: 1px solid var(--line-soft); font-size: 11px; color: var(--muted); }

/* inspector */
.insp-empty { color: var(--muted); font-size: 12.5px; padding: 6px 14px; line-height: 1.7; }
.insp-empty b { color: var(--ink); }
.insp-target { display: flex; align-items: center; gap: 8px; padding: 2px 14px 10px; }
.tag-chip {
  font: 700 11px var(--sans); letter-spacing: .01em; background: var(--cta-grad); color: var(--on-cta);
  border-radius: 6px; padding: 2px 8px; white-space: nowrap;
  box-shadow: 0 1px 8px rgba(76, 99, 230, .3);
}
#insp-id { color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.tag-chip.kind {
  background: var(--accent-soft); color: var(--accent-deep);
  box-shadow: inset 0 0 0 1px rgba(76, 99, 230, .3);
  animation: insp-reveal-in .28s var(--ease-out);
}
/* per-type sections glide in when a selection brings them along */
.insp-reveal { animation: insp-reveal-in .28s var(--ease-out); }
@keyframes insp-reveal-in { from { opacity: 0; transform: translateY(5px); } }
#insp-contents { flex: 1; min-width: 0; max-width: 100%; }
#insp-kind-controls .ctl-row:last-child { margin-bottom: 0; }
.insp-sec { border-top: 1px solid var(--line-soft); padding: 11px 14px 12px; }
.insp-lab { font: 700 10.5px var(--sans); letter-spacing: .11em; text-transform: uppercase; color: var(--muted); margin-bottom: 9px; }
.ctl-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.ctl-row label { font-size: 12px; color: var(--muted); width: 58px; flex-shrink: 0; }
.ctl-row select { flex: 1; min-width: 0; }
.ctl-row input[type=range] { flex: 1; min-width: 0; padding: 0; border: none; background: none; box-shadow: none; }
.ctl-row input[type=color] { padding: 2px; width: 40px; height: 26px; flex-shrink: 0; border-radius: 8px; cursor: pointer; }
.ctl-row select { width: auto; padding: 5px 10px; font-size: 12.5px; border-radius: 10px; }
.ctl-row input:not([type=color]):not([type=range]) { padding: 6px 10px; font-size: 12.5px; }
.mini {
  background: none; border: 1px solid var(--line); color: var(--muted); border-radius: 8px;
  width: 22px; height: 22px; cursor: pointer; flex-shrink: 0;
  transition: transform .32s var(--ease-spring), border-color .16s var(--ease-out), color .16s var(--ease-out);
}
.mini:hover { border-color: var(--danger); color: var(--danger); }
.mini:active { transform: scale(.88); transition-duration: .06s; }
/* an additive mini (the src-row upload +) invites rather than warns */
.mini.plus { font: 600 14px var(--sans); line-height: 1; }
#attr-src-row { flex-wrap: nowrap; }
#attr-src-row input { flex: 1; min-width: 0; }
.mini.plus:hover { border-color: var(--accent); color: var(--accent-deep); }
/* image adjustments — the upload button lives inside the section's own padding,
   and the reset mini needs room for its label */
#insp-image-sec .btn.wide, #insp-body #insp-image-sec .btn.wide { width: 100%; margin: 0 0 10px; }
#img-reset { width: auto; height: 24px; padding: 0 10px; font: 600 11px var(--sans); }
#insp-body { padding-bottom: 4px; }
/* the Text field grows with its words, up to a few lines, then scrolls */
.insp-text {
  display: block; width: 100%; min-height: 34px; max-height: 220px; resize: none; overflow-y: auto;
  padding: 7px 10px; font-size: 12.5px; line-height: 1.45; border-radius: 10px;
}
.insp-hint { margin-top: 6px; font-size: 11px; line-height: 1.45; color: var(--muted); }
#insp-body .btn.wide { width: calc(100% - 28px); margin: 10px 14px 14px; }
/* ---- element menus: the controls a library element declares for itself ----
   Drawn from the element's data-ng-menu manifest (elements/README.md). The
   section sits first in the element view and is lit like the kind chip, so
   the element's own settings read as one thing above the generic tools. */
.em-sec { background: linear-gradient(180deg, rgba(76, 99, 230, .06), rgba(76, 99, 230, 0)); }
.em-sec .insp-lab { color: var(--accent-deep); }
.em-grp { font: 600 10.5px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); opacity: .8; margin: 10px 0 6px; }
.em-grp:first-child { margin-top: 0; }
#insp-menu-controls .ctl-row:last-child { margin-bottom: 0; }
.em-row label { width: 88px; line-height: 1.25; }
.em-row label.em-switch { width: 100%; }
.em-row .mono { min-width: 38px; text-align: right; color: var(--muted); }
.em-row input.em-text, .em-row textarea.em-text { flex: 1; min-width: 0; font: 12.5px var(--sans); resize: vertical; }
.em-seg {
  display: inline-flex; gap: 2px; padding: 3px; flex: 1; min-width: 0;
  border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, .45);
  transition: border-color .16s var(--ease-out), background .16s var(--ease-out);
}
.em-seg:hover { border-color: rgba(76, 99, 230, .4); background: #fff; }
.em-seg button {
  flex: 1; min-width: 0; padding: 5px 9px; border: 1px solid transparent; border-radius: 999px; background: none;
  font: 600 12px var(--sans); color: var(--muted); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color .2s var(--ease-out), background .2s var(--ease-out), transform .32s var(--ease-spring);
}
.em-seg button:hover { color: var(--ink); }
.em-seg button:active { transform: scale(.94); transition-duration: .06s; }
.em-seg button.on {
  color: var(--accent-deep); border-color: rgba(76, 99, 230, .5);
  background: linear-gradient(180deg, rgba(76, 99, 230, .18), rgba(76, 99, 230, .09));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 0 14px rgba(76, 99, 230, .14);
}
.em-seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.em-row-switch { margin-bottom: 6px; }
.em-switch { display: flex; align-items: center; gap: 9px; cursor: pointer; user-select: none; width: 100%; position: relative; }
.em-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.em-switch .sw {
  position: relative; flex: none; width: 30px; height: 18px; border-radius: 999px;
  background: rgba(24, 33, 66, .18); box-shadow: inset 0 1px 3px rgba(24, 33, 66, .18);
  transition: background .22s var(--ease-out), box-shadow .22s var(--ease-out);
}
.em-switch .sw-knob {
  position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(24, 33, 66, .3);
  transition: transform .38s var(--ease-spring), width .2s var(--ease-out);
}
.em-switch:active .sw-knob { width: 18px; }
.em-switch input:checked + .sw { background: var(--cta-grad); box-shadow: 0 0 0 3px rgba(76, 99, 230, .14), inset 0 1px 0 rgba(255, 255, 255, .35); }
.em-switch input:checked + .sw .sw-knob { transform: translateX(12px); }
.em-switch input:checked:active + .sw .sw-knob { transform: translateX(8px); }
.em-switch input:focus-visible + .sw { outline: 2px solid var(--accent); outline-offset: 2px; }
.em-switch-txt { font-size: 12.5px; color: var(--ink); min-width: 0; }
/* ---- Add mode: the inspector becomes the element menu ----------------------
   Built-in elements (menus, heroes, forms, galleries, animations, footers…) or
   a team library, drawn as cards with a live thumbnail of the real markup. The
   head — library picker, search, category rail, hint — stays put while the
   menu scrolls under it. */
/* (which of the menu's views shows is app.js's — see "the menu" at the end of this file) */
/* flex: none — as a shrinking flex item the menu would be only as tall as the
   panel, and the sticky head would stop sticking once that box scrolled past */
#add-palette { display: flex; flex-direction: column; flex: none; padding-top: 0; border-top: 0; }
#add-palette[hidden] { display: none; }
.pal-head {
  position: sticky; top: 0; z-index: 3;
  margin: 0 -14px 12px; padding: 11px 14px 10px;
  background: var(--glass-2); border-bottom: 1px solid var(--line-soft);
  backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3);
}
.pal-head .insp-lab { margin-bottom: 8px; }
.lib-row { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.lib-row .lib-select { flex: 1; min-width: 0; width: auto; padding: 5px 10px; font-size: 12.5px; border-radius: 10px; }
.lib-row .btn.icon { padding: 5px 8px; flex-shrink: 0; }
.lib-row .btn.icon svg { width: 14px; height: 14px; display: block; }
.pal-search { width: 100%; padding: 7px 12px; font-size: 12.5px; border-radius: 10px; margin-bottom: 8px; }
.cat-rail {
  display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
  margin: 0 -14px; padding: 2px 14px 4px; scroll-snap-type: x proximity;
  mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent);
}
.cat-rail::-webkit-scrollbar { display: none; }
.cat-rail .btn { flex: none; padding: 4px 11px; font-size: 11.5px; box-shadow: none; scroll-snap-align: start; }
.cat-rail .btn.active { background: var(--cta-grad); color: var(--on-cta); border-color: transparent; }
.pal-head .add-hint { margin: 8px 0 2px; }
.lib-empty, .pal-none { margin-top: 0; font-size: 12px; }
.lib-empty b, .lib-empty i { color: var(--ink); font-style: normal; }
.lib-remove {
  margin-top: 14px; padding: 0; border: 0; background: none; cursor: pointer; align-self: start;
  font: inherit; font-size: 11.5px; color: var(--muted);
  text-decoration: underline; text-underline-offset: 3px;
  transition: color .18s var(--ease-out);
}
.lib-remove:hover { color: var(--danger); }

.palette { display: grid; gap: 16px; transition: opacity .18s var(--ease-out); }
.palette.swap { opacity: 0; }
.pal-cat[hidden] { display: none; }
.palette-grp { margin: 0 1px 8px; font: 700 9.5px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.pal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
/* one element card: the markup rendered at 480px and scaled to the card, and its name */
.blk {
  position: relative; display: grid; padding: 0; overflow: hidden; cursor: pointer; text-align: left;
  border: 1px solid var(--line); border-radius: 12px; background: var(--glass-2);
  box-shadow: var(--shadow-rest); font: 600 11.5px var(--sans); color: var(--ink);
  transition: transform .32s var(--ease-spring), box-shadow .32s var(--ease-out), border-color .16s var(--ease-out);
}
.blk:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.blk:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.blk.armed { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft), var(--shadow-lift); }
.blk.armed .blk-lab { background: var(--cta-grad); color: var(--on-cta); }
.blk[hidden] { display: none; }
.blk-prev { position: relative; aspect-ratio: 16 / 10; background: #fff; overflow: hidden; border-bottom: 1px solid var(--line-soft); }
.blk-prev iframe {
  position: absolute; left: 0; top: 0; width: 480px; height: 300px; border: 0; pointer-events: none;
  transform-origin: 0 0; transform: scale(var(--s, .26)); background: #fff;
}
.blk-lab { padding: 6px 9px 7px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background .16s var(--ease-out), color .16s var(--ease-out); }
.add-hint { font-size: 12px; color: var(--accent-deep); }
.settings { margin-top: auto; }

/* ---- SEO/AEO audit meter + dashboard ---- */
.audit-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font: 700 11px var(--sans); letter-spacing: .07em; color: var(--muted);
  background: rgba(24, 33, 66, .06); border: 1px solid var(--line-soft); border-radius: 999px;
  padding: 3px 12px 3px 5px; cursor: pointer;
  box-shadow: inset 0 2px 6px rgba(24, 33, 66, .08);
  transition: transform .32s var(--ease-spring), border-color .16s var(--ease-out), background .16s var(--ease-out), box-shadow .32s var(--ease-out);
}
.audit-chip:hover { border-color: rgba(76, 99, 230, .45); background: rgba(255, 255, 255, .85); transform: translateY(-1px); box-shadow: var(--shadow-lift); }
.audit-chip:active { transform: translateY(1px) scale(.96); transition-duration: .06s; }
.audit-chip .g-lab { margin-right: 5px; }
.audit-chip.scanning .g-arc { animation: pulse 1.2s ease-in-out infinite; }

.gauge { position: relative; width: 30px; height: 30px; display: inline-grid; place-items: center; flex-shrink: 0; }
.gauge svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.gauge circle { fill: none; stroke-width: 3.4; }
.gauge .g-track { stroke: rgba(24, 33, 66, .12); }
.gauge .g-arc {
  stroke: var(--muted); stroke-linecap: round;
  stroke-dasharray: 97.4; stroke-dashoffset: 97.4;
  transition: stroke-dashoffset .8s var(--ease-out), stroke .3s var(--ease-out);
}
.gauge .g-num { font: 700 10px var(--mono); color: var(--ink); letter-spacing: 0; }
.gauge.big { width: 64px; height: 64px; }
.gauge.big circle { stroke-width: 3; }
.gauge.big .g-num { font-size: 17px; }
.g-arc.good { stroke: var(--ok); filter: drop-shadow(0 0 4px rgba(14, 138, 95, .4)); }
.g-arc.mid { stroke: var(--warn); filter: drop-shadow(0 0 4px rgba(154, 106, 18, .35)); }
.g-arc.poor { stroke: var(--danger); filter: drop-shadow(0 0 4px rgba(192, 58, 49, .4)); }

.modal.audit-modal { max-width: min(1280px, 94vw); display: flex; flex-direction: column; max-height: 92vh; padding: 26px 30px; }
.audit-head { display: flex; align-items: flex-start; gap: 10px; }
.audit-head > div:first-child { flex: 1; }
.audit-head h2 { margin-bottom: 2px; }
.audit-head p { margin: 0; }
.audit-scores { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0 14px; }
.score-card {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px;
  background: rgba(255, 255, 255, .6); border: 1px solid var(--line-soft); border-radius: 16px;
}
.score-card b { display: block; font: 700 14px var(--display); letter-spacing: .02em; }
.score-card span:not(.gauge):not(.g-num) { color: var(--muted); font-size: 12px; line-height: 1.45; display: block; margin-top: 2px; }
.audit-filter { align-self: flex-start; margin-bottom: 12px; }
.audit-list { overflow-y: auto; min-height: 0; display: flex; flex-direction: column; gap: 8px; padding-right: 2px; }
.audit-empty { color: var(--muted); font-size: 13px; }

.acheck {
  border: 1px solid var(--line-soft); border-radius: 14px; background: rgba(255, 255, 255, .5);
  transition: border-color .16s var(--ease-out), background .16s var(--ease-out);
}
.acheck[open], .acheck:hover { border-color: var(--line); background: rgba(255, 255, 255, .85); }
.acheck summary {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; list-style: none;
  font-size: 13px;
}
.acheck summary::-webkit-details-marker { display: none; }
.acheck .dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.acheck .dot.pass { background: var(--ok); box-shadow: 0 0 8px rgba(14, 138, 95, .5); }
.acheck .dot.warn { background: var(--warn); box-shadow: 0 0 8px rgba(154, 106, 18, .45); }
.acheck .dot.fail { background: var(--danger); box-shadow: 0 0 8px rgba(192, 58, 49, .5); }
.acheck .dot.na { background: rgba(24, 33, 66, .25); }
.acheck .a-label { font-weight: 600; }
.acheck .a-detail { color: var(--muted); font-size: 12.5px; flex: 1; text-align: right; }
.acheck .a-cat {
  font: 700 9.5px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  border: 1px solid var(--line-soft); border-radius: 999px; padding: 2px 8px; flex-shrink: 0;
}
.acheck .a-weight { font: 500 10.5px var(--mono); color: var(--muted); flex-shrink: 0; }
.acheck .a-body { padding: 2px 14px 12px 33px; font-size: 12.5px; color: var(--muted); line-height: 1.6; }
.acheck .a-body p { margin: 0 0 8px; }
.acheck .a-body .a-why b { color: var(--ink); font-weight: 600; }
.acheck .a-items { margin: 0 0 10px; padding: 0; list-style: none; }
.acheck .a-items li {
  font-family: var(--mono); font-size: 11.5px; padding: 4px 10px; border-left: 1px solid var(--line);
  margin-bottom: 3px; background: rgba(24, 33, 66, .05); border-radius: 0 8px 8px 0;
  color: var(--accent-deep); word-break: break-word;
}
.acheck .a-items li .a-page { color: var(--muted); margin-right: 8px; }
.acheck .btn.fix { font-size: 11.5px; padding: 5px 12px; }
.audit-group-title {
  font: 700 10.5px var(--sans); letter-spacing: .11em; text-transform: uppercase; color: var(--muted);
  margin: 10px 2px 2px;
}
.audit-group-title:first-child { margin-top: 0; }

@media (max-width: 720px) {
  .audit-scores { grid-template-columns: 1fr; }
  .acheck .a-detail { display: none; }
}

/* ---- "will this move anything?" line inside a check ---- */
.a-change {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 0 0 10px; padding: 8px 11px;
  border: 1px solid var(--line-soft); border-left: 2px solid rgba(24, 33, 66, .22);
  border-radius: 0 10px 10px 0; background: rgba(255, 255, 255, .5);
  line-height: 1.55;
}
.a-change.visible { border-left-color: var(--accent); background: var(--accent-soft); }
.a-change .a-change-glyph {
  flex-shrink: 0; width: 15px; height: 15px; margin-top: 1px;
  border-radius: 4px; border: 1px dashed rgba(24, 33, 66, .3);
}
.a-change.visible .a-change-glyph { border: 1px dashed var(--accent); background: rgba(76, 99, 230, .16); }
.a-change b { color: var(--ink); font-weight: 600; }
.acheck .fix-row .btn.see { font-size: 11.5px; padding: 5px 12px; }

/* ---- change preview: the real page with the change ghosted in ---- */
.chg-back {
  position: fixed; inset: 0; background: rgba(24, 32, 70, .42);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  display: grid; place-items: center; z-index: 60; padding: 18px;
  animation: back-in .22s var(--ease-out);
}
.chg-back.closing { animation: back-out .2s var(--ease-out) forwards; pointer-events: none; }
.chg-back.closing .chg { animation: modal-out .2s var(--ease-out) forwards; }
.chg {
  display: grid; grid-template-rows: auto 1fr auto;
  width: 100%; max-width: min(1240px, 96vw); height: min(92vh, 900px);
  background: rgba(255, 255, 255, .9); border: 1px solid var(--line); border-radius: 20px;
  backdrop-filter: blur(24px) saturate(1.4); -webkit-backdrop-filter: blur(24px) saturate(1.4);
  box-shadow: 0 24px 70px rgba(24, 33, 66, .3), inset 0 1px 0 rgba(255, 255, 255, .9);
  animation: modal-in .3s var(--ease-out);
  overflow: hidden;
}

.chg-head { display: flex; align-items: flex-start; gap: 12px; padding: 20px 22px 14px; }
.chg-head-text { flex: 1; min-width: 0; }
.chg-kicker {
  display: block; font: 700 10.5px var(--sans); letter-spacing: .11em;
  text-transform: uppercase; color: var(--accent-deep); margin-bottom: 3px;
}
.chg-head h2 { font: 800 20px var(--display); letter-spacing: -.02em; margin: 0 0 3px; color: var(--ink); }
.chg-head p { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.chg-pages { flex-shrink: 0; max-width: 46%; overflow-x: auto; }
.chg-pages:empty { display: none; }
.chg-pages .btn { font-family: var(--mono); font-size: 11px; }

.chg-body { display: grid; grid-template-columns: 292px 1fr; gap: 14px; min-height: 0; padding: 0 22px; }
.chg-spots {
  display: flex; flex-direction: column; gap: 7px; overflow-y: auto; min-height: 0;
  padding: 2px 4px 2px 2px;
}
.spot {
  display: grid; grid-template-columns: 22px 1fr; gap: 9px; align-items: start;
  width: 100%; text-align: left; cursor: pointer;
  padding: 10px 12px; border-radius: 13px;
  border: 1px solid var(--line-soft); background: rgba(255, 255, 255, .55);
  font: 400 12px var(--sans); color: var(--muted); line-height: 1.5;
  transition: transform .22s var(--ease-spring), border-color .16s var(--ease-out),
              background .16s var(--ease-out), box-shadow .3s var(--ease-out);
  animation: spot-in .34s var(--ease-out) both;
}
@keyframes spot-in { from { opacity: 0; transform: translateX(-8px); } }
.spot:hover { background: #FFFFFF; border-color: rgba(76, 99, 230, .45); transform: translateY(-1px); box-shadow: var(--shadow-lift); }
.spot:active { transform: translateY(1px) scale(.99); transition-duration: .06s; }
.spot.active { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent) inset; }
.spot-n {
  grid-row: span 2; width: 22px; height: 22px; border-radius: 7px;
  display: grid; place-items: center;
  font: 700 11px var(--mono); color: var(--on-cta); background: var(--cta-grad);
}
.spot.is-edit .spot-n { background: rgba(76, 99, 230, .22); color: var(--accent-deep); }
.spot.is-mark .spot-n { background: rgba(24, 33, 66, .12); color: var(--muted); }
.spot-head { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.spot-head b { font-weight: 600; color: var(--ink); font-size: 12.5px; }
.spot-head i { font: 400 10.5px var(--mono); font-style: normal; color: var(--muted); }
.spot-note { grid-column: 2; }
.spot-miss { grid-column: 2; color: var(--danger-ink); font-size: 11.5px; }

/* The Subject Rule: the user's page is the thing being looked at, so it sits
   on the shaded stage under the system's deepest shadow. */
.chg-stage { position: relative; min-height: 0; display: flex; }
.chg-paper {
  flex: 1; min-height: 0; border-radius: 14px; overflow: hidden;
  background: #FFFFFF; border: 1px solid var(--line);
  box-shadow: 0 18px 50px rgba(24, 33, 66, .22), 0 2px 10px rgba(24, 33, 66, .1);
}
#chg-frame { width: 100%; height: 100%; border: 0; display: block; background: #FFFFFF; }
.chg-veil {
  position: absolute; inset: 0; border-radius: 14px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: rgba(255, 255, 255, .92); color: var(--muted); font-size: 12.5px;
  transition: opacity .3s var(--ease-out); pointer-events: none;
}
.chg-veil.gone { opacity: 0; }
.chg-spin {
  width: 13px; height: 13px; border-radius: 50%;
  border: 2px solid var(--accent-soft); border-top-color: var(--accent);
  animation: stage-spin .8s linear infinite;
}

.chg-foot {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px 22px 18px; margin-top: 14px; border-top: 1px solid var(--line-soft);
}
.chg-key { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted); }
.chg-key i { width: 13px; height: 13px; border-radius: 4px; }
.chg-key i.k-add { border: 1px dashed var(--accent); background: rgba(76, 99, 230, .16); }
.chg-key i.k-edit { border: 1px solid var(--accent); background: rgba(76, 99, 230, .08); }
.chg-key i.k-mark { border: 1px dashed rgba(24, 33, 66, .35); }
.chg-foot-note { margin-left: auto; font-size: 11.5px; color: var(--muted); }

@media (max-width: 900px) {
  .chg-body { grid-template-columns: 1fr; grid-template-rows: minmax(96px, 30%) 1fr; }
  .chg-spots { flex-direction: row; overflow-x: auto; }
  .spot { min-width: 230px; }
  .chg-pages { max-width: 100%; }
  .chg-foot-note { display: none; }
}

/* ---- modal ---- */
.modal-back {
  position: fixed; inset: 0; background: rgba(24, 32, 70, .35);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  display: grid; place-items: center; z-index: 50; padding: 20px;
  animation: back-in .22s var(--ease-out);
}
@keyframes back-in { from { opacity: 0; } }
.modal {
  background: rgba(255, 255, 255, .88); border: 1px solid var(--line); border-radius: 20px; padding: 22px;
  width: 100%; max-width: 400px;
  backdrop-filter: blur(24px) saturate(1.4); -webkit-backdrop-filter: blur(24px) saturate(1.4);
  box-shadow: 0 24px 70px rgba(24, 33, 66, .28), inset 0 1px 0 rgba(255, 255, 255, .9);
  animation: modal-in .3s var(--ease-out);
}
@keyframes modal-in { from { opacity: 0; transform: translateY(10px) scale(.96); } }
/* Closing plays the entrance in reverse — .closing is removed once hidden. */
.modal-back.closing { animation: back-out .22s var(--ease-out) forwards; pointer-events: none; }
.modal-back.closing .modal { animation: modal-out .22s var(--ease-out) forwards; }
@keyframes back-out { to { opacity: 0; } }
@keyframes modal-out { to { opacity: 0; transform: translateY(8px) scale(.97); } }
.modal.settings-modal { max-width: 520px; }
.settings-body { min-height: 120px; display: grid; gap: 18px; }
.set-sec { border-top: 1px solid var(--line-soft); padding-top: 14px; }
.set-sec h3 { font: 700 13.5px var(--display); margin: 0 0 4px; }
.set-sec > p { color: var(--muted); font-size: 12.5px; margin: 0 0 10px; line-height: 1.55; }
.set-row { display: flex; gap: 8px; align-items: center; }
.set-row input { flex: 1; min-width: 0; }
.set-hint { color: var(--muted); font-size: 12px; margin: 8px 0 0; line-height: 1.55; }
.set-hint b { color: var(--ink); }
.set-steps { margin: 8px 0 10px; padding-left: 20px; color: var(--muted); font-size: 12.5px; line-height: 1.7; }
.set-steps b { color: var(--ink); font-weight: 600; }
.set-code {
  font: 500 11px var(--mono); color: var(--accent-deep); background: rgba(24, 33, 66, .06);
  border-radius: 6px; padding: 2px 6px; user-select: all; word-break: break-all;
}
.set-status { font-size: 13px; margin: 0 0 10px; }
.nf-toggle {
  display: flex; align-items: center; gap: 12px; width: 100%; cursor: pointer;
  background: rgba(255, 255, 255, .55); border: 1px solid var(--line-soft); border-radius: 12px;
  padding: 10px 12px; font: inherit; color: inherit; text-align: left;
  transition: background .15s, border-color .15s;
}
.nf-toggle:hover { background: rgba(5, 189, 186, .07); border-color: rgba(5, 189, 186, .35); }
.nf-logo { height: 20px; width: auto; display: block; flex-shrink: 0; }
.nf-summary {
  margin-left: auto; display: flex; align-items: center; gap: 7px;
  color: var(--muted); font-size: 12px; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nf-summary::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: #c3c9da; flex-shrink: 0;
}
.nf-toggle.is-connected .nf-summary::before { background: #2fbf71; }
.nf-chev { width: 15px; height: 15px; color: var(--muted); flex-shrink: 0; transition: transform .3s var(--ease-out); }
.nf-toggle[aria-expanded="true"] .nf-chev { transform: rotate(180deg); }

/* The drawer glides open: grid rows ease 0fr → 1fr, so it animates to its
   natural height with no fixed max-height guesswork. */
.nf-drawer {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .35s var(--ease-out);
}
.nf-drawer.open { grid-template-rows: 1fr; }
.nf-drawer-in {
  overflow: hidden; min-height: 0; padding: 0 4px;
  visibility: hidden; opacity: 0; transform: translateY(-4px);
  transition: visibility 0s .35s, opacity .3s, transform .3s var(--ease-out);
}
.nf-drawer.open .nf-drawer-in {
  visibility: visible; opacity: 1; transform: none;
  transition: visibility 0s, opacity .3s .08s, transform .35s var(--ease-out);
}
.nf-drawer-in > .set-hint:first-child { margin: 12px 0 10px; }

/* Claude row — same drawer skeleton as Netlify, dressed in Claude's own look:
   the coral spark, the serif wordmark, and a coral hover tint. */
.cl-toggle:hover { background: rgba(217, 119, 87, .07); border-color: rgba(217, 119, 87, .4); }
.cl-logo { width: 20px; height: 20px; color: #D97757; flex-shrink: 0; display: block; }
.cl-word {
  font: 500 15.5px/1 ui-serif, Georgia, "Times New Roman", serif;
  letter-spacing: .01em; color: #3D3929;
}
.set-empty { color: var(--muted); font-size: 12.5px; margin: 0 0 10px; }
.users-list { list-style: none; margin: 0 0 10px; padding: 0; }
.users-list:empty { margin: 0; }
.users-list li {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 7px 10px; border: 1px solid var(--line-soft); border-radius: 10px; margin-bottom: 6px;
  background: rgba(255, 255, 255, .55);
  animation: user-row-in .3s var(--ease-out);
}
@keyframes user-row-in { from { opacity: 0; transform: translateY(-4px); } }
.users-list li.settled { animation: none; }
.users-list .u-email { font: 500 12.5px var(--mono); color: var(--ink); word-break: break-all; }
.users-list .u-remove { flex-shrink: 0; }
.modal h2 { font: 700 17px var(--display); margin: 0 0 6px; }
.modal p { color: var(--muted); font-size: 13px; margin: 0 0 14px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }

@media (max-width: 1100px) { .cockpit { --chat-w: 260px; --insp-w: 250px; } }

/* phone widths get the mobile cockpit — see the "mobile cockpit" section at
   the end of this file. The desktop grid never stacks any more. */

@media (max-width: 640px) {
  .home-head { padding: 10px 16px; }
  /* five controls and a wordmark do not fit a phone at full size — the mark
     gives up its width and the row tightens its gaps */
  .ngw { width: 132px; }
  .head-actions { gap: 6px; }
  .home-main, .brief-main { padding-left: 16px; padding-right: 16px; }
  .field-group { padding: 16px; }
  /* the archive is an icon at this width — the header already carried four
     controls, so the label and the wordmark's tail are what give way */
  #archive-btn .hl { display: none; }
  #archive-btn { padding: 7px 11px; gap: 5px; }
  #archive-btn .cat-count { min-width: 0; padding: 1px 5px; font-size: 10px; }
  /* and the drag grip has nowhere to sit outside the page's 16px gutter */
  .cat-grip { display: none; }
}

/* ---- full-screen preview (Esc) — liquid glass cockpit ----
   Esc lifts the site to the whole window and the chrome gets out of its way:
   the topbar, chat and inspector sit there as nothing but the outlines of
   their controls, and only fill in as smoked glass — blur, specular edge,
   pale iridescent ink (text via background-clip, icons via the #mb-iri-grad
   SVG gradient) — under the cursor. Entry/exit morphs through the View
   Transitions API; the named groups below glide each panel out of its dock. */
.stage { view-transition-name: mb-stage; }
.topbar { view-transition-name: mb-topbar; }
.chat { view-transition-name: mb-chat; }
.inspector { view-transition-name: mb-inspector; }
::view-transition-group(mb-stage), ::view-transition-group(mb-topbar),
::view-transition-group(mb-chat), ::view-transition-group(mb-inspector) {
  animation-duration: .55s;
  animation-timing-function: cubic-bezier(.3, .9, .25, 1);
}

body.mb-full { overflow: hidden; }
body.mb-full .stage { position: fixed; inset: 0; z-index: 10; background: #0D1126; }
body.mb-full .stage-inner { padding: 0; }
body.mb-full .device { border: none; border-radius: 0; box-shadow: none; }
body.mb-full .stage-wait-note { color: #A9BEFF; }
body.mb-full .topbar {
  position: fixed; z-index: 20; top: 14px; left: 50%; transform: translateX(-50%);
  width: max-content; max-width: calc(100vw - 28px);
  border-radius: 24px; padding: 8px 14px;
}
body.mb-full .chat {
  position: fixed; z-index: 15; left: 14px; top: 84px; bottom: 14px;
  width: clamp(250px, 23vw, 330px); border-radius: 24px;
}
body.mb-full .inspector {
  position: fixed; z-index: 15; right: 14px; top: 84px; bottom: 14px;
  width: clamp(240px, 22vw, 310px); border-radius: 24px;
}
/* the MacBook chip ducks out from under the floating topbar */
body.mb-full .stage-tools { top: auto; bottom: 20px; right: 50%; transform: translateX(50%); }

/* the change log lives on the dark stage in full screen, so it takes the
   liquid-glass treatment with the rest of the chrome */
body.mb-full :is(.hist-btn, .hist-toast, .hist-panel) {
  background: rgba(11, 15, 34, .58); border-color: rgba(255, 255, 255, .22); color: #E9EFFF;
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 10px 34px rgba(0, 0, 0, .38);
}
body.mb-full .hist-btn:hover, body.mb-full .hist-btn[aria-expanded=true] { background: rgba(21, 27, 56, .72); color: #FFFFFF; }
body.mb-full .hist-btn svg { stroke: url(#mb-iri-grad); }
body.mb-full .hist-head { border-bottom-color: rgba(255, 255, 255, .14); }
body.mb-full .hist-foot { border-top-color: rgba(255, 255, 255, .14); }
body.mb-full :is(.hist-title, .hist-when, .hist-foot, .hist-none, .hist-x) { color: rgba(211, 222, 252, .66); }
body.mb-full .hist-row { color: #E9EFFF; }
body.mb-full :is(.hist-row:hover, .hist-x:hover) { background: rgba(255, 255, 255, .12); }
body.mb-full .hist-row.current { background: rgba(255, 255, 255, .16); }
body.mb-full .hist-toast.err { background: rgba(220, 70, 60, .22); border-color: rgba(255, 154, 147, .45); color: #FFC9C4; }

/* ---- resting state: the panels dissolve ----
   Esc is for looking at the site, so at rest the chrome hands the screen
   back: no plate, no blur, no drifting sheen — only the hairline outlines of
   the controls stay behind. Hover a panel (or focus it, or leave Claude
   mid-answer) and the smoked glass fades in under the cursor. --mb-ghost
   drives the pure content, --mb-chrome the controls that survive at rest. */
body.mb-full :is(.topbar, .chat, .inspector) {
  --mb-ghost: 0; --mb-chrome: .92;
  border: 1px solid transparent;
  background: transparent;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: none;
  color: #EFF3FF;
  transition: background .32s var(--ease-out), border-color .32s var(--ease-out),
              box-shadow .32s var(--ease-out), backdrop-filter .32s var(--ease-out);
}
/* the glass, only under the cursor: smoked base, specular edge, no sheen */
body.mb-full :is(.topbar, .chat, .inspector):is(:hover, :focus-within),
body.mb-full .chat:has(#chat-busy:not([hidden])) {
  --mb-ghost: 1; --mb-chrome: 1;
  border-color: rgba(255, 255, 255, .26);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .015) 45%, rgba(255, 255, 255, .045)),
    rgba(11, 15, 34, .74);
  backdrop-filter: blur(26px) saturate(1.3); -webkit-backdrop-filter: blur(26px) saturate(1.3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 22px 60px rgba(4, 8, 28, .45);
}

/* pure content — gone at rest, back with the glass */
body.mb-full :is(.chat, .inspector) :is(.chat-tabs, .chat-feed, .chat-hint, .cl-star, .working, .usage, .insp-empty, #insp-body, .insp-sec),
body.mb-full .topbar .ed-name {
  opacity: var(--mb-ghost);
  transition: opacity .32s var(--ease-out);
}
body.mb-full :is(.chat, .inspector) .panel-title {
  color: rgba(226, 234, 255, calc(var(--mb-ghost) * .62));
  transition: color .32s var(--ease-out);
}
/* controls stay as outlines — the only chrome left over the site at rest */
body.mb-full :is(.topbar, .chat, .inspector) :is(.btn:not(.mode-group *):not(.text-settings *):not(.draw-settings *), .mode-group, .text-settings, .draw-settings, .audit-chip, .page-select) {
  opacity: var(--mb-chrome);
  transition: opacity .32s var(--ease-out), border-color .18s var(--ease-out), box-shadow .18s var(--ease-out);
}
body.mb-full :is(.topbar, .chat, .inspector) .btn:disabled { opacity: calc(var(--mb-chrome) * .5); }
/* stage chrome fades the same way, so nothing sits on the site uninvited */
body.mb-full :is(.stage-tools, .hist-btn) { opacity: .5; transition: opacity .32s var(--ease-out); }
body.mb-full :is(.stage-tools:hover, .hist-btn:hover, .hist-btn[aria-expanded=true]) { opacity: 1; }

/* ink — a whisper of iridescence instead of a rainbow: a pale cool wash with
   the faintest warm turn through the middle, and no drift animation. Only
   bare labels take it; a button needs a solid colour so its chip can carry a
   scrim behind the text (a clipped background can't sit over one). */
body.mb-full :is(.topbar, .chat, .inspector) :is(.insp-lab, .g-lab, .g-num, .ed-name) {
  background-image: linear-gradient(100deg, #EDF2FF, #F5E9EE 38%, #E6F2F3 68%, #EAEFFF);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #E7EDFF;
}
/* icons take the same muted ink (CSS stroke beats the stroke="currentColor"
   attribute); #mb-iri-grad is now a pale static wash, not a rainbow */
body.mb-full :is(.topbar, .chat, .inspector) .btn:not(.danger) svg,
body.mb-full .fit-mac svg { stroke: url(#mb-iri-grad); }

/* buttons: a hairline chip over a faint smoked backing, so the outline reads
   over a white site as well as a dark one. The chip thins out once the panel
   fills in behind it — it only has to carry itself while it stands alone. */
body.mb-full :is(.topbar, .chat, .inspector) .btn:not(.danger),
body.mb-full .fit-mac {
  background: rgba(8, 12, 30, calc(.56 - var(--mb-ghost) * .46));
  color: #EDF2FF; -webkit-text-fill-color: currentColor;
  border-color: rgba(255, 255, 255, calc(.44 - var(--mb-ghost) * .04));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: background .32s var(--ease-out), border-color .18s var(--ease-out), box-shadow .18s var(--ease-out);
}
body.mb-full :is(.topbar, .chat, .inspector) .btn:not(.danger):hover,
body.mb-full .fit-mac:hover {
  background: rgba(46, 58, 104, .55); color: #FFFFFF;
  border-color: rgba(255, 255, 255, .58);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38), 0 6px 20px rgba(4, 8, 28, .35);
}
body.mb-full :is(.btn.mode.active, .btn.vp.active, .btn.crunch.active, .fit-mac.active, .text-settings .ts-toggle.active, .draw-settings .ds-tool.active) {
  background: rgba(72, 88, 150, .62); color: #FFFFFF;
  border-color: rgba(255, 255, 255, .62);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .42);
}
body.mb-full :is(.topbar, .chat, .inspector) .btn.danger {
  color: #FF9A93; border-color: rgba(255, 130, 120, .5); background: rgba(120, 34, 30, .34);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
}
body.mb-full .mode-group, body.mb-full .text-settings.open, body.mb-full .draw-settings.open { background: transparent; border-color: rgba(255, 255, 255, .16); box-shadow: none; }
body.mb-full .ts-div { background: rgba(255, 255, 255, .2); }
body.mb-full .ts-size, body.mb-full .ds-count { color: #EDF2FF; }
body.mb-full .ds-ink { border-color: rgba(8, 12, 30, .7); }
body.mb-full .audit-chip {
  background: rgba(8, 12, 30, calc(.56 - var(--mb-ghost) * .5)); border-color: rgba(255, 255, 255, .26);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
body.mb-full .gauge .g-track { stroke: rgba(255, 255, 255, .2); }

/* fields read as smoked wells rather than white washes — the same chip
   backing as the buttons, so they hold up with the panel gone */
body.mb-full :is(.topbar, .chat, .inspector) :is(input:not([type=range]):not([type=color]), textarea, select) {
  background: rgba(9, 13, 32, calc(var(--mb-ghost) * .34));
  border-color: rgba(255, 255, 255, calc(.16 + var(--mb-ghost) * .1));
  color: rgba(239, 243, 255, calc(.12 + var(--mb-ghost) * .88));
  transition: background .32s var(--ease-out), border-color .32s var(--ease-out), color .32s var(--ease-out);
}
body.mb-full :is(.topbar, .chat, .inspector) :is(input, textarea)::placeholder { color: rgba(211, 222, 252, calc(var(--mb-ghost) * .55)); }
body.mb-full :is(.topbar, .chat, .inspector) :is(input:not([type=range]):not([type=color]), textarea, select):focus {
  border-color: rgba(255, 255, 255, .55); background: rgba(9, 13, 32, .5);
  box-shadow: 0 0 0 3px rgba(158, 210, 255, .18);
}
body.mb-full :is(.topbar, .chat, .inspector) select:hover { border-color: rgba(255, 255, 255, .48); background: rgba(9, 13, 32, .44); }

/* status pills brightened for the dark glass */
body.mb-full .pill { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .24); color: #D6E0FF; }
body.mb-full .pill.ready { color: #63E6B0; border-color: rgba(99, 230, 176, .5); }
body.mb-full .pill.building, body.mb-full .pill.busy { color: #A9BEFF; border-color: rgba(169, 190, 255, .55); }
body.mb-full .pill.error { color: #FF9A93; border-color: rgba(255, 154, 147, .5); }

/* panel interiors */
body.mb-full .chat-form { border-top-color: rgba(255, 255, 255, .14); }
body.mb-full .insp-sec { border-top-color: rgba(255, 255, 255, .12); }
body.mb-full .insp-empty { color: rgba(211, 222, 252, .62); }
body.mb-full .insp-empty b { color: #EFF3FF; }
body.mb-full .ctl-row label { color: rgba(211, 222, 252, .66); }
body.mb-full .working, body.mb-full .add-hint { color: #AFC6FF; }
body.mb-full :is(.lib-empty, .pal-none, .lib-remove, .palette-grp) { color: rgba(211, 222, 252, .66); }
body.mb-full .blk { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .16); color: #E7EDFF; }
body.mb-full .pal-head { background: rgba(20, 26, 52, .78); border-color: rgba(255, 255, 255, .1); }
body.mb-full .lib-empty :is(b, i) { color: #E7EDFF; }
body.mb-full .mini { border-color: rgba(255, 255, 255, .25); color: rgba(211, 222, 252, .7); }
body.mb-full .msg.claude { background: rgba(255, 255, 255, .09); border-color: rgba(255, 255, 255, .15); color: #ECF1FF; }
body.mb-full .msg.err { background: rgba(220, 70, 60, .16); border-color: rgba(255, 140, 130, .35); color: #FFC9C4; }
body.mb-full .msg.done { color: #63E6B0; }
body.mb-full .msg.loop { background: rgba(122, 148, 255, .14); border-color: rgba(150, 175, 255, .4); color: #C6D5FF; }
body.mb-full .msg.sep { border-top-color: rgba(255, 255, 255, .14); color: rgba(207, 224, 255, .6); }
body.mb-full :is(.chat, .inspector), body.mb-full :is(.chat, .inspector) * { scrollbar-color: rgba(255, 255, 255, .3) transparent; }

/* browsers without view transitions still get a soft entrance */
@supports not (view-transition-name: none) {
  body.mb-full .chat, body.mb-full .inspector { animation: mb-glass-in .45s var(--ease-out); }
  body.mb-full .topbar { animation: mb-bar-in .45s var(--ease-out); }
  body.mb-full .stage { animation: mb-stage-in .4s var(--ease-out); }
}
@keyframes mb-glass-in { from { opacity: 0; transform: translateY(14px) scale(.97); } }
@keyframes mb-bar-in { from { opacity: 0; transform: translateX(-50%) translateY(-14px); } }
@keyframes mb-stage-in { from { opacity: .4; transform: scale(.985); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .btn:hover, .btn:active, .pcard:hover, .pcard:active, .pick span:hover, .pick span:active,
  .chk:hover, .chk:active, .mini:active, .mode-group .btn:active, .audit-chip:hover, .audit-chip:active,
  .ctx-item:active { transform: none; }
}

/* ---- first-run setup wizard ---- */
.setup-modal { max-width: 480px; }
.setup-step {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 0; border-top: 1px solid var(--line);
}
.setup-step:first-of-type { border-top: 0; }
.step-dot {
  width: 12px; height: 12px; border-radius: 50%; margin-top: 4px; flex-shrink: 0;
  background: rgba(24, 33, 66, .15); box-shadow: inset 0 0 0 1px rgba(24, 33, 66, .2);
}
.step-dot.ok { background: var(--ok, #0E8A5F); box-shadow: 0 0 10px rgba(14, 138, 95, .45); }
.step-dot.busy { background: var(--accent, #4C63E6); box-shadow: 0 0 10px rgba(76, 99, 230, .6); animation: pulse 1.4s ease-in-out infinite; }
.step-dot.err { background: #C43A30; box-shadow: 0 0 10px rgba(196, 58, 48, .45); }
.step-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.step-body b { font-size: 14px; }
.step-note { color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.step-note.err { color: #7E211A; }
.step-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.step-actions:empty { display: none; }
.setup-log {
  margin: 4px 0 0; padding: 8px 10px; max-height: 96px; overflow: auto;
  background: rgba(24, 33, 66, .06); border: 1px solid var(--line); border-radius: 10px;
  font-size: 11px; line-height: 1.5; white-space: pre-wrap; word-break: break-word;
}
.setup-code { display: flex; flex-direction: column; gap: 6px; margin-top: 2px; }
.code-row { display: flex; gap: 8px; }
.code-row input {
  flex: 1; min-width: 0; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px;
  background: rgba(255, 255, 255, .8); font-size: 12.5px;
}
.code-row input:focus { outline: 2px solid rgba(76, 99, 230, .4); outline-offset: 1px; }


/* ---- the Claude panel wears Claude's own skin ----
   Everything else in the cockpit stays daylight-glass periwinkle; the chat
   column matches the ask-Claude popovers on the canvas (mb-editor.js): warm
   paper, near-black ink, clay #D97757 accent, pill controls, hairline rules.
   Scoped to .chat so no other panel picks it up. */
.chat {
  --clay: #D97757;
  --clay-soft: #FBE9E2;
  --cl-ink: #141413;
  --cl-muted: #7C7A72;
  --cl-paper: #FAF9F5;
  --cl-sand: #F0EEE6;
  --cl-line: rgba(20, 20, 19, .11);
  background: var(--cl-paper);
  border-right: 1px solid var(--cl-line);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  color: var(--cl-ink);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* header */
.chat .panel-title { color: var(--cl-muted); letter-spacing: .1em; padding: 12px 13px 9px; }
.chat .cl-star { width: 13px; height: 13px; color: var(--clay); margin-right: -3px; flex-shrink: 0; }
.chat .working { color: var(--clay); }
.chat .btn.tiny {
  background: var(--cl-sand); border-color: var(--cl-line); color: var(--cl-ink);
  box-shadow: none; border-radius: 999px; font-weight: 600;
}
.chat .btn.tiny:hover { background: var(--clay-soft); border-color: var(--clay); transform: none; box-shadow: none; }
.chat .btn.tiny:active { transform: scale(.95); }

/* chat rows */
.chat .chat-tabs { border-bottom: 1px solid var(--cl-line); }
.chat .chat-tab:hover { background: var(--cl-sand); border-color: transparent; }
.chat .chat-tab.active { background: var(--clay-soft); border-color: rgba(217, 119, 87, .45); }
.chat .ctab-dot { background: rgba(20, 20, 19, .2); }
.chat .chat-tab.busy .ctab-dot { background: var(--clay); box-shadow: 0 0 8px rgba(217, 119, 87, .65); }
.chat .ctab-main b { color: var(--cl-ink); }
.chat .ctab-task { color: var(--cl-muted); }
.chat .chat-tab.busy .ctab-task { color: var(--clay); }
.chat .ctab-model { border-color: var(--cl-line); color: var(--cl-muted); background: #fff; }
.chat .ctab-loop { border-color: var(--cl-line); color: var(--cl-muted); background: #fff; }
.chat .ctab-loop.is-active { color: #A64B28; border-color: rgba(217, 119, 87, .45); background: var(--clay-soft); }
.chat .ctab-loop.is-reached { color: #4A7C59; border-color: rgba(74, 124, 89, .35); background: rgba(74, 124, 89, .08); }
.chat .ctab-loop.is-short { color: #8A6A1E; border-color: rgba(138, 106, 30, .35); background: rgba(138, 106, 30, .08); }
.chat .ctab-back:hover { background: var(--cl-sand); border-color: transparent; color: var(--cl-ink); }
.chat .ctab-back b { color: var(--cl-ink); }
.chat .ctab-count { background: rgba(20, 20, 19, .07); color: var(--cl-muted); }
.chat .chat-tab.person.active .ctab-count { color: #A64B28; background: var(--clay-soft); }
.chat #chat-people.active { background: var(--clay-soft); border-color: rgba(217, 119, 87, .45); color: #A64B28; box-shadow: none; }
.chat .ctab-model.m-haiku { color: #4A7C59; border-color: rgba(74, 124, 89, .35); background: rgba(74, 124, 89, .08); }
.chat .ctab-model.m-sonnet { color: #A64B28; border-color: rgba(217, 119, 87, .45); background: var(--clay-soft); }
.chat .ctab-model.m-opus { color: #6B4E8F; border-color: rgba(107, 78, 143, .35); background: rgba(107, 78, 143, .08); }
.chat .ctab-model.m-fable { color: #4A3B8A; border-color: rgba(74, 59, 138, .4); background: rgba(74, 59, 138, .1); }
.chat .ctab-unread { color: var(--clay); }
.chat .ctab-x { color: var(--cl-muted); }

/* the transcript — you speak in a sand bubble, Claude answers on the page */
.chat .chat-feed { padding: 8px 14px 14px; gap: 10px; }
.chat .msg { font-size: 13.5px; line-height: 1.55; }
.chat .msg.user {
  background: var(--cl-sand); color: var(--cl-ink); border: 1px solid var(--cl-line);
  border-radius: 16px; border-bottom-right-radius: 6px; padding: 8px 13px;
  box-shadow: none; max-width: 90%;
}
.chat .msg.claude {
  background: transparent; border: none; border-radius: 0;
  padding: 2px 2px 4px; color: var(--cl-ink);
}
.chat .msg.loop { background: var(--clay-soft); border-color: rgba(217, 119, 87, .45); color: #A64B28; }
.chat .msg.model { font: 500 11px var(--mono); color: var(--cl-muted); }
.chat .msg.model b { color: var(--clay); }
.chat .msg.done { color: #4A7C59; }
.chat .msg.err { background: rgba(192, 58, 49, .07); border-color: rgba(192, 58, 49, .3); color: #8C2D24; border-radius: 12px; }
.chat .msg.sep { color: var(--cl-muted); border-top-color: var(--cl-line); }

/* composer — textarea and buttons share one rounded card, like Claude's */
.chat .chat-form {
  border-top: none; background: var(--cl-paper); margin: 0 11px 12px; padding: 8px 8px 8px;
  border: 1px solid rgba(20, 20, 19, .16); border-radius: 20px; gap: 4px;
  transition: border-color .14s var(--ease-out), box-shadow .14s var(--ease-out);
}
.chat .chat-form:focus-within { border-color: var(--clay); box-shadow: 0 0 0 2.5px rgba(217, 119, 87, .16); }
.chat .chat-form textarea {
  background: transparent; border: none; border-radius: 0;
  color: var(--cl-ink); font-family: inherit; padding: 4px 6px 0; box-shadow: none;
}
.chat .chat-form textarea::placeholder { color: var(--cl-muted); }
.chat .chat-form textarea:focus { border: none; box-shadow: none; }
.chat .chat-actions { align-items: center; padding: 0 2px 1px; }
.chat .chat-hint { color: var(--cl-muted); }
.chat .chat-actions .btn.primary {
  background: var(--clay); border-color: transparent; color: #fff; border-radius: 999px;
  box-shadow: 0 2px 10px rgba(217, 119, 87, .3);
}
.chat .chat-actions .btn.primary:hover { background: #C86643; box-shadow: 0 4px 16px rgba(217, 119, 87, .4); }
.chat .chat-actions .btn.primary:active { box-shadow: 0 1px 6px rgba(217, 119, 87, .3); }
.chat .chat-actions .btn.danger {
  background: #fff; border-color: rgba(192, 58, 49, .35); color: #8C2D24; box-shadow: none; border-radius: 999px;
}
.chat .chat-actions .btn.danger:hover { background: rgba(192, 58, 49, .08); border-color: rgba(192, 58, 49, .55); box-shadow: none; }
.chat, .chat * { scrollbar-color: rgba(20, 20, 19, .22) transparent; }

/* ---- the transcript, as a chat ----------------------------------------------
   The panel used to print one flat line per event: raw markdown from Claude,
   a row per tool call, and nothing to say what the app had actually asked for.
   This is the same feed read the way Claude's own is — prose as prose, tool
   work folded into one step counter, and the prompt behind a disclosure. */

/* The feed is a column flex box, so anything in it with its own `overflow`
   can be squashed to nothing once the transcript is taller than the panel: the
   automatic minimum size of an overflow:hidden box is zero, not its content.
   That is what flattened the prompt disclosure to a 2px hairline. A message
   scrolls out of view; it never shrinks. */
.chat-feed > * { flex-shrink: 0; }

/* Claude's answers: no bubble at all, just well-set text on the paper. */
.chat .msg.claude { white-space: normal; }
.chat .msg.claude .md > :first-child { margin-top: 0; }
.chat .msg.claude .md > :last-child { margin-bottom: 0; }
.chat .md { line-height: 1.62; }
.chat .md p { margin: 0 0 9px; }
.chat .md :is(h4, h5, h6) {
  margin: 15px 0 6px; font-size: 13.5px; font-weight: 650; letter-spacing: -.01em; color: var(--cl-ink);
}
.chat .md :is(ul, ol) { margin: 0 0 9px; padding-left: 19px; }
.chat .md li { margin: 3px 0; }
.chat .md li::marker { color: var(--cl-muted); }
.chat .md :is(b, strong) { font-weight: 650; }
.chat .md a { color: var(--clay); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.chat .md a:hover { text-decoration-thickness: 2px; }
.chat .md code {
  font: 500 11.8px/1.4 var(--mono); background: var(--cl-sand);
  border: 1px solid var(--cl-line); border-radius: 5px; padding: .5px 4px;
  word-break: break-word;
}
.chat .md pre {
  position: relative; margin: 0 0 10px; padding: 9px 11px;
  background: var(--cl-sand); border: 1px solid var(--cl-line); border-radius: 11px;
  overflow-x: auto;
}
.chat .md pre code { background: none; border: none; padding: 0; font-size: 11.6px; line-height: 1.55; white-space: pre; }
.chat .md blockquote {
  margin: 0 0 9px; padding: 2px 0 2px 11px;
  border-left: 2px solid rgba(217, 119, 87, .5); color: var(--cl-muted);
}
.chat .md hr { border: none; border-top: 1px solid var(--cl-line); margin: 13px 0; }

/* Copy, on the message and on every code block. Only shows on approach, so a
   quiet transcript stays quiet. */
.chat .msg { position: relative; }
.msg-copy {
  position: absolute; top: 4px; right: 4px;
  font: 600 10px var(--sans); letter-spacing: .04em; text-transform: uppercase;
  color: var(--cl-muted); background: var(--cl-paper);
  border: 1px solid var(--cl-line); border-radius: 999px; padding: 3px 8px;
  cursor: pointer; opacity: 0; pointer-events: none;
  transition: opacity .16s var(--ease-out), color .16s var(--ease-out), border-color .16s var(--ease-out);
}
.chat .msg.claude > .msg-copy { top: 2px; right: 0; }
.chat .msg:hover .msg-copy, .msg-copy:focus-visible { opacity: 1; pointer-events: auto; }
.msg-copy:hover { color: var(--clay); border-color: var(--clay); }
.msg-copy.done { opacity: 1; pointer-events: auto; color: #4A7C59; border-color: rgba(74, 124, 89, .45); }
.chat .md pre .msg-copy { top: 6px; right: 6px; background: var(--cl-paper); }

/* ---- tool work, folded ----
   A build fires dozens of calls. Collapsed, the block says what step it is on;
   opened, it is the whole list. */
.chat .msg.tools {
  padding: 0; background: none; border: none; white-space: normal;
  border-left: 2px solid var(--cl-line); border-radius: 0; margin-left: 1px;
  transition: border-color .2s var(--ease-out);
}
.chat .msg.tools:hover { border-left-color: rgba(217, 119, 87, .45); }
.tools-head {
  display: flex; align-items: center; gap: 7px; width: 100%;
  background: none; border: none; padding: 3px 4px 3px 9px; cursor: pointer;
  font: 400 11.5px var(--mono); color: var(--cl-muted); text-align: left;
}
.tools-spark {
  width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0;
  background: rgba(20, 20, 19, .22);
  transition: background .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.chat .msg.tools:last-child .tools-spark,
.chat .msg.tools:nth-last-child(2):has(~ .msg.thinking) .tools-spark {
  background: var(--clay); box-shadow: 0 0 7px rgba(217, 119, 87, .6);
  animation: pulse 1.4s ease-in-out infinite;
}
.tools-last {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tools-n { flex-shrink: 0; font-size: 10.5px; opacity: .75; }
.tools-head .disc {
  width: 12px; height: 12px; flex-shrink: 0; opacity: .55;
  transition: transform .24s var(--ease-out);
}
.chat .msg.tools.open .tools-head .disc { transform: rotate(90deg); }
/* the grid-rows glide — nothing in this panel is allowed to snap */
.tools-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .26s var(--ease-out); }
.chat .msg.tools.open .tools-body { grid-template-rows: 1fr; }
.tools-rows { overflow: hidden; min-height: 0; }
.tool-row {
  display: flex; gap: 6px; padding: 2px 4px 2px 9px;
  font: 400 11.3px var(--mono); color: var(--cl-muted);
}
.tool-row b { color: var(--clay); font-weight: 500; flex-shrink: 0; }
.tool-row span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* collapsed, the head already says where it is — don't say it twice */
.chat .msg.tools.open .tools-last { opacity: .45; }

/* ---- the prompt the app sent ----
   The answer to "what was Claude actually told?" — folded, because a build
   prompt is two pages long. */
.chat .msg.promptbox {
  padding: 0; white-space: normal; background: var(--cl-sand);
  border: 1px solid var(--cl-line); border-radius: 13px; overflow: hidden;
  transition: border-color .18s var(--ease-out);
}
.chat .msg.promptbox:hover { border-color: rgba(217, 119, 87, .4); }
.pb-head {
  display: flex; align-items: center; gap: 8px; width: 100%;
  background: none; border: none; padding: 8px 11px; cursor: pointer; text-align: left;
  font: 500 11.5px var(--sans); color: var(--cl-ink);
}
.pb-icon { width: 13px; height: 13px; flex-shrink: 0; color: var(--clay); }
.pb-head b { font-weight: 650; }
.pb-n { flex: 1; font: 400 10.5px var(--mono); color: var(--cl-muted); }
.pb-head .disc { width: 12px; height: 12px; flex-shrink: 0; opacity: .5; transition: transform .24s var(--ease-out); }
.chat .msg.promptbox.open .pb-head .disc { transform: rotate(90deg); }
.pb-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s var(--ease-out); }
.chat .msg.promptbox.open .pb-body { grid-template-rows: 1fr; }
.pb-inner { overflow: hidden; min-height: 0; position: relative; }
.pb-text {
  margin: 0; padding: 0 11px 11px; max-height: 340px; overflow: auto;
  font: 400 11.4px/1.6 var(--mono); color: var(--cl-ink);
  white-space: pre-wrap; word-break: break-word;
  border-top: 1px solid var(--cl-line); padding-top: 9px;
}
/* Reveals on approach like every other copy button — forced visible it sat on
   top of the prompt's own first line. */
.pb-inner .msg-copy { top: 9px; right: 11px; background: var(--cl-paper); }

/* ---- what rode along with a message ---- */
.msg-attach { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.att-chip {
  display: inline-flex; align-items: center; gap: 5px; max-width: 100%;
  padding: 3px 8px 3px 4px; border-radius: 999px; text-decoration: none;
  background: var(--cl-paper); border: 1px solid var(--cl-line);
  font: 500 11px var(--sans); color: var(--cl-ink);
  transition: border-color .16s var(--ease-out), transform .16s var(--ease-out);
}
a.att-chip:hover { border-color: var(--clay); transform: translateY(-1px); }
.att-chip img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.att-ico { width: 20px; text-align: center; font-size: 10px; color: var(--cl-muted); flex-shrink: 0; }
.att-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 150px; }
.att-chip.is-skill { padding: 3px 9px; color: var(--clay); border-color: rgba(217, 119, 87, .4); font-weight: 600; }
/* the marked-up screenshot Claude was shown gets a real thumbnail, not a dot */
.att-chip.is-shot { padding: 3px 9px 3px 3px; border-radius: 10px; }
.att-chip.is-shot img { width: 58px; height: 36px; border-radius: 7px; }
.att-chip.is-markup { color: var(--clay); border-color: rgba(217, 119, 87, .4); font-weight: 600; padding-left: 7px; }
.att-chip.is-markup svg { width: 12px; height: 12px; flex: none; }

/* ---- "working…" ----
   The gap between a tool call and the next sentence is where a long build
   looked stalled. */
.chat .msg.thinking {
  display: flex; align-items: center; gap: 8px; padding: 3px 4px;
  background: none; border: none; white-space: normal;
  font: 500 11px var(--sans); letter-spacing: .05em; text-transform: uppercase;
  color: var(--cl-muted);
  transition: opacity .2s var(--ease-out), transform .2s var(--ease-out);
}
.chat .msg.thinking.going { opacity: 0; transform: translateY(4px); }
.think-dots { display: inline-flex; gap: 3px; }
.think-dots i {
  width: 4px; height: 4px; border-radius: 50%; background: var(--clay);
  animation: think-bob 1.1s ease-in-out infinite;
}
.think-dots i:nth-child(2) { animation-delay: .14s; }
.think-dots i:nth-child(3) { animation-delay: .28s; }
@keyframes chip-turn { to { transform: rotate(360deg); } }
@keyframes think-bob { 0%, 100% { opacity: .3; transform: translateY(0); } 45% { opacity: 1; transform: translateY(-2.5px); } }
.think-word { opacity: .8; }

.chat .msg.model { display: flex; align-items: center; gap: 6px; }
.mdl-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--clay); opacity: .7; flex-shrink: 0; }

/* ---- the composer ----------------------------------------------------------
   One rounded card: chips for what is attached, the growing textarea, then a
   row of quiet icon buttons with the round send on the right. */
.chat .chat-form { position: relative; }
.chat .chat-form textarea {
  /* No height transition here on purpose: the composer measures its own
     content to grow, and an in-flight height animation feeds a stale, larger
     box back into that measurement — which ratchets the textarea open a line
     at a time until it hits the cap. One line appearing as you type it is not
     a state change that needs easing. */
  min-height: 26px; max-height: 260px; overflow-y: auto; line-height: 1.5;
}
.chat .chat-actions { gap: 4px; }
.comp-gap { flex: 1; }
/* The hint gets the full width of the composer rather than a slot between the
   buttons: in a 280px column "sending now starts a parallel chat" wrapped to
   three lines and dragged the button row down with it. Empty, it takes no
   space at all. */
.chat .chat-hint {
  flex: none; align-self: stretch; margin: 0; padding: 3px 6px 0;
  font-size: 10.5px; line-height: 1.35;
}
.chat .chat-hint:empty { display: none; }
.comp-btn {
  display: grid; place-items: center; width: 29px; height: 29px; flex-shrink: 0;
  background: none; border: 1px solid transparent; border-radius: 50%;
  color: var(--cl-muted); cursor: pointer;
  transition: background .16s var(--ease-out), color .16s var(--ease-out),
              border-color .16s var(--ease-out), transform .16s var(--ease-out);
}
.comp-btn svg { width: 16px; height: 16px; }
.comp-btn:hover { background: var(--cl-sand); color: var(--cl-ink); }
.comp-btn:active { transform: scale(.92); }
.comp-btn[aria-expanded="true"] { background: var(--clay-soft); color: var(--clay); border-color: rgba(217, 119, 87, .4); }
.comp-send {
  display: grid; place-items: center; width: 29px; height: 29px; flex-shrink: 0;
  background: var(--clay); border: none; border-radius: 50%; color: #fff; cursor: pointer;
  box-shadow: 0 2px 9px rgba(217, 119, 87, .32);
  transition: background .16s var(--ease-out), box-shadow .2s var(--ease-out), transform .16s var(--ease-out);
}
.comp-send svg { width: 16px; height: 16px; }
.comp-send:hover { background: #C86643; box-shadow: 0 4px 14px rgba(217, 119, 87, .42); }
.comp-send:active { transform: scale(.92); box-shadow: 0 1px 5px rgba(217, 119, 87, .3); }
.comp-send.is-stop { background: var(--cl-ink); box-shadow: 0 2px 9px rgba(20, 20, 19, .22); }
.comp-send.is-stop:hover { background: #2C2B28; box-shadow: 0 4px 14px rgba(20, 20, 19, .3); }
.comp-send.is-stop svg { width: 14px; height: 14px; }

/* Send is a pill in two parts: the arrow, and a chevron that opens the send
   menu. With no chat open there is nothing to offer, so the chevron folds
   away and the arrow rounds back into the plain button. */
.send-split {
  display: inline-flex; align-items: stretch; flex-shrink: 0; border-radius: 999px;
  box-shadow: 0 2px 9px rgba(217, 119, 87, .32);
  transition: box-shadow .2s var(--ease-out);
}
.send-split:hover { box-shadow: 0 4px 14px rgba(217, 119, 87, .42); }
.send-split .comp-send { box-shadow: none; padding: 0; }   /* the UA's 1px 6px would push each icon off its segment's centre */
.send-split .comp-send:hover { box-shadow: none; }
.send-split .comp-send:active { transform: none; box-shadow: none; }
.send-split .comp-send svg { transition: transform .16s var(--ease-out); }
.send-split .comp-send:active svg { transform: scale(.85); }
/* Segments: 32px for the arrow (a 29px circle plus the straight run into the
   divider), 22px for the chevron. Each icon is centred in its own segment
   with a 1px optical nudge toward the round cap, where the eye reads the
   segment's middle. */
.send-split #chat-send { width: 32px; border-radius: 999px 0 0 999px; padding-left: 1px; transition: background .16s var(--ease-out), border-radius .24s var(--ease-out), padding .24s var(--ease-out), width .24s var(--ease-out); }
.comp-send-more {
  width: 22px; border-radius: 0 999px 999px 0; overflow: hidden;
  border-left: 1px solid rgba(255, 255, 255, .3);
  transition: width .24s var(--ease-out), opacity .2s var(--ease-out), background .16s var(--ease-out), border-color .24s var(--ease-out);
}
.comp-send-more svg { width: 11px; height: 11px; stroke-width: 3; transition: transform .38s var(--ease-spring); }
.comp-send-more[aria-expanded="true"] { background: #C86643; }
.comp-send-more[aria-expanded="true"] svg { transform: rotate(180deg); }
.send-split.solo #chat-send { width: 29px; border-radius: 999px; padding-left: 0; }
.send-split.solo .comp-send-more { width: 0; padding: 0; opacity: 0; border-left-color: transparent; pointer-events: none; }

/* The send menu bursts out of the chevron that opened it: a point at the
   button, swelling past full size and settling back with one small bounce,
   while the rows come up behind the front of the blast. openSendMenu() puts
   the transform origin on the chevron in pixels, so the burst starts at the
   button wherever the composer has grown to. Closing is the same trip at
   half the length and no bounce — it just gets sucked back in.
   It out-specifies .model-menu because that rule comes later and carries a
   resting transform of its own: shut, this menu has to sit untransformed, or
   the rect openSendMenu() measures is a scaled one and the burst starts off
   the button. */
.model-menu.send-menu {
  left: auto; right: 0;          /* the model menu's width, hung from the other edge */
  transform: none; transform-origin: bottom right; opacity: 0;
  will-change: transform, opacity;
}
.send-menu.open { opacity: 1; animation: send-burst .42s var(--ease-out) both; }
.send-menu.closing { animation: send-suck .16s var(--ease-out) both; }
@keyframes send-burst {
  0%   { opacity: 0; transform: scale(.16); }
  40%  { opacity: 1; transform: scale(1.055); }
  62%  { transform: scale(.978); }
  80%  { transform: scale(1.014); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes send-suck {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(.2); }
}
/* the rows ride out a beat behind the shell, each one after the last */
.send-menu.open :is(.mm-title, .mm-row) { animation: send-row-in .3s var(--ease-out) both; }
.send-menu.open .mm-title { animation-delay: .05s; }
.send-menu.open .mm-row:nth-child(1) { animation-delay: .09s; }
.send-menu.open .mm-row:nth-child(2) { animation-delay: .13s; }
.send-menu.open .mm-row:nth-child(3) { animation-delay: .17s; }
@keyframes send-row-in {
  from { opacity: 0; transform: translateY(7px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
.mm-ico {
  width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0; display: grid; place-items: center;
  background: var(--cl-sand); color: var(--cl-ink);
}
.mm-ico svg { width: 14px; height: 14px; }
.mm-key { font: 500 10px var(--mono); color: var(--cl-muted); flex-shrink: 0; opacity: .8; }

/* ---- messages waiting their turn ----
   Under the thread (and under the "working" pulse): the line of messages
   that will go next, each a hollow version of a sent bubble. */
.chat-queue { display: flex; flex-direction: column; gap: 8px; align-self: stretch; }
.cq-head {
  display: flex; align-items: center; gap: 8px; padding: 8px 0 0; margin-top: 2px;
  border-top: 1px dashed var(--line);
  font: 700 10.5px var(--sans); color: var(--muted); letter-spacing: .12em; text-transform: uppercase;
  animation: msg-in .28s var(--ease-out);
}
.cq-head .spacer { flex: 1; }
.cq-title { transition: opacity .12s var(--ease-out); }
.cq-title.fading { opacity: 0; }
.cq-btn {
  font: 600 10.5px var(--sans); letter-spacing: .02em; text-transform: none; cursor: pointer;
  padding: 2px 10px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, .7); color: var(--ink);
  transition: background .16s var(--ease-out), border-color .16s var(--ease-out), color .16s var(--ease-out), transform .16s var(--ease-out);
}
.cq-btn:hover { background: #fff; border-color: var(--line-soft); }
.cq-btn:active { transform: scale(.95); }
.cq-btn.cq-run { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 2px 8px rgba(76, 99, 230, .3); }
.cq-btn.cq-run:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
.msg.user.queued {
  position: relative; padding-right: 32px;
  background: rgba(255, 255, 255, .55); color: var(--ink);
  border: 1.5px dashed rgba(76, 99, 230, .5); box-shadow: none;
}
.msg.user.queued .msg-text { opacity: .88; }
.msg.user.pending { opacity: .7; transition: opacity .25s var(--ease-out); }
.cq-meta {
  display: block; margin-top: 6px;
  font: 500 10px var(--mono); color: var(--accent-deep); letter-spacing: .06em; text-transform: uppercase;
}
.cq-x {
  position: absolute; top: 7px; right: 7px; width: 20px; height: 20px; border-radius: 50%;
  border: none; background: none; color: var(--muted); font-size: 11px; cursor: pointer; opacity: .55;
  transition: opacity .14s var(--ease-out), color .14s var(--ease-out), background .14s var(--ease-out);
}
.msg.user.queued:hover .cq-x { opacity: 1; }
.cq-x:hover { color: var(--danger); background: rgba(220, 70, 60, .08); }
.msg.user.going, .chat-queue.going { animation: msg-out .22s var(--ease-out) forwards; pointer-events: none; }
@keyframes msg-out { to { opacity: 0; transform: translateY(4px) scale(.98); } }

/* ---- suggested messages ----
   Somebody else's chat takes suggestions, not messages: their thread, their
   context, their plan paying for the turn. The strip above the composer says
   so before a word is typed, the bubbles wait under the thread in clay rather
   than periwinkle, and the decision — Send or Dismiss — rides on each one. */
.sug-bar { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .32s var(--ease-out); }
.sug-bar.open { grid-template-rows: 1fr; }
.sug-bar-in { overflow: hidden; min-height: 0; display: flex; align-items: flex-start; gap: 7px; }
.sug-bar.open .sug-bar-in { padding: 4px 4px 6px; }
.sug-mark {
  width: 7px; height: 7px; margin-top: 4px; border-radius: 50%; flex: none;
  background: var(--who, var(--clay)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--who, var(--clay)) 20%, transparent);
}
.sug-bar-text { font: 500 11.5px var(--sans); line-height: 1.4; color: var(--cl-muted); }
.sug-bar-text b { font-weight: 700; color: var(--cl-ink); }
/* the send button admits what it is about to do */
.chat-form.suggesting .comp-send[type=submit] { background: var(--clay); border-color: var(--clay); }
.chat-form.suggesting .comp-send[type=submit]:hover { background: #C4613F; border-color: #C4613F; }

.chat-sugs .cq-head { border-top-style: solid; border-top-color: rgba(217, 119, 87, .35); color: var(--clay); }
.msg.user.sug {
  border-color: rgba(217, 119, 87, .55); background: rgba(251, 233, 226, .5);
}
.msg.user.sug .cq-meta { color: #A64B28; }
.msg.user.sug.flash { animation: sug-flash 1.5s var(--ease-out); }
@keyframes sug-flash {
  0%, 100% { box-shadow: none; }
  18% { box-shadow: 0 0 0 4px rgba(217, 119, 87, .3); }
  60% { box-shadow: 0 0 0 4px rgba(217, 119, 87, .14); }
}
.sug-acts { display: flex; justify-content: flex-end; gap: 6px; margin-top: 8px; }
.sug-acts .cq-btn { padding: 3px 12px; }
.sug-acts .cq-btn.cq-run { background: var(--clay); border-color: var(--clay); box-shadow: 0 2px 8px rgba(217, 119, 87, .3); }
.sug-acts .cq-btn.cq-run:hover { background: #C4613F; border-color: #C4613F; }
.sug-acts .cq-btn:disabled { opacity: .5; cursor: default; }
/* a message that went out as somebody's suggestion keeps their name on it */
.msg-from {
  display: block; margin-top: 5px;
  font: 500 10px var(--mono); letter-spacing: .06em; text-transform: uppercase; opacity: .72;
}
/* the count on a chat row: a decision on mine, a plain tally on theirs */
.ctab-sug {
  font: 600 9.5px var(--sans); letter-spacing: .04em; white-space: nowrap; flex-shrink: 0;
  padding: 2px 7px; border-radius: 999px;
  border: 1px solid var(--cl-line); color: var(--cl-muted); background: #fff;
}
.ctab-sug.mine { color: #A64B28; border-color: rgba(217, 119, 87, .5); background: var(--clay-soft); }
body.mb-full .chat .sug-bar-text { color: rgba(230, 225, 218, .72); }
body.mb-full .chat .sug-bar-text b { color: #F6EFE9; }
body.mb-full .chat .msg.user.sug { background: rgba(217, 119, 87, .16); border-color: rgba(233, 160, 130, .55); }
body.mb-full .chat .msg.user.sug .cq-meta { color: #F3AE93; }
body.mb-full .chat .ctab-sug { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .18); color: #E6E1DA; }
body.mb-full .chat .ctab-sug.mine { background: rgba(217, 119, 87, .22); border-color: rgba(233, 160, 130, .5); color: #F3AE93; }

/* chips: what the next message is carrying */
.chat-chips { display: flex; flex-wrap: wrap; gap: 5px; padding: 3px 4px 1px; }
.chat .chip {
  display: inline-flex; align-items: center; gap: 5px; max-width: 210px;
  padding: 3px 4px 3px 4px; border-radius: 999px;
  background: var(--cl-sand); border: 1px solid var(--cl-line);
  font: 500 11px var(--sans); color: var(--cl-ink);
  animation: msg-in .22s var(--ease-out);
  transition: border-color .16s var(--ease-out), opacity .18s var(--ease-out);
}
.chat .chip img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.chip-ico { width: 20px; text-align: center; font-size: 10px; color: var(--cl-muted); flex-shrink: 0; }
.chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat .chip.is-skill { padding-left: 9px; color: var(--clay); border-color: rgba(217, 119, 87, .4); background: var(--clay-soft); }
/* marks drawn on the canvas, waiting to go with the next message — click to
   go back to drawing, × to clear them */
.chat .chip.is-markup { padding-left: 8px; color: var(--clay); border-color: rgba(217, 119, 87, .4); background: var(--clay-soft); cursor: pointer; font-weight: 600; }
.chat .chip.is-markup svg { width: 13px; height: 13px; flex: none; }
.chat .chip.is-markup:hover { border-color: var(--clay); }
.chip-slash { font: 700 11px var(--mono); opacity: .8; }
.chat .chip.uploading { opacity: .7; }
.chat .chip.failed { border-color: rgba(192, 58, 49, .45); color: #8C2D24; }
.chip-spin {
  width: 10px; height: 10px; flex-shrink: 0; border-radius: 50%;
  border: 1.6px solid rgba(217, 119, 87, .28); border-top-color: var(--clay);
  animation: chip-turn .7s linear infinite;
}
.chip-x {
  width: 17px; height: 17px; flex-shrink: 0; display: grid; place-items: center;
  background: none; border: none; border-radius: 50%; cursor: pointer;
  font-size: 9px; color: var(--cl-muted);
  transition: background .14s var(--ease-out), color .14s var(--ease-out);
}
.chip-x:hover { background: rgba(20, 20, 19, .09); color: var(--cl-ink); }

/* the panel is one big drop target */
.chat.dropping { background: var(--clay-soft); }
.chat.dropping .chat-form { border-color: var(--clay); box-shadow: 0 0 0 3px rgba(217, 119, 87, .18); }

/* ---- the slash menu ----
   Skills from the library and the panel's own commands, over the composer. */
.slash-menu {
  position: absolute; left: 0; right: 0; bottom: calc(100% + 7px);
  background: var(--cl-paper); border: 1px solid var(--cl-line); border-radius: 15px;
  box-shadow: 0 12px 34px rgba(20, 20, 19, .16), 0 2px 6px rgba(20, 20, 19, .06);
  padding: 5px; z-index: 40; overflow: hidden;
  opacity: 0; transform: translateY(7px) scale(.985); transform-origin: bottom center;
  transition: opacity .18s var(--ease-out), transform .22s var(--ease-out);
}
.slash-menu.open { opacity: 1; transform: none; }
.slash-list { max-height: 254px; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; }
.slash-row {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  background: none; border: none; border-radius: 10px; padding: 6px 9px; cursor: pointer;
  transition: background .14s var(--ease-out);
}
.slash-row.on { background: var(--cl-sand); }
.slash-row.picked { background: var(--clay-soft); }
.slash-group {
  font: 600 9.5px var(--sans); letter-spacing: .12em; text-transform: uppercase;
  color: var(--cl-muted); padding: 8px 9px 4px; opacity: .8;
}
.slash-list > .slash-group:first-child { padding-top: 3px; }
.sr-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sr-main b { font: 600 12.5px var(--sans); color: var(--cl-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-hint { display: flex; gap: 6px; min-width: 0; font: 400 10.5px var(--sans); color: var(--cl-muted); }
.sr-key { font: 500 10.5px var(--mono); color: var(--clay); flex-shrink: 0; }
.sr-what { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-tick { flex-shrink: 0; font-size: 11px; color: var(--clay); opacity: 0; transition: opacity .16s var(--ease-out); }
.slash-row.picked .sr-tick { opacity: 1; }
.slash-none { padding: 8px 10px 10px; font: 400 11.5px var(--sans); color: var(--cl-muted); }

/* ---- the model menu ----
   Auto routes each message by weight; a pinned model sticks until you switch
   back. The button is a small pill in the composer's row, tinted like the
   chat-tab badges so the same colour means the same model everywhere. */
.comp-btn.comp-model {
  width: auto; padding: 0 10px 0 8px; display: inline-flex; align-items: center; gap: 6px;
  border-radius: 999px; border-color: var(--cl-line);
  font: 600 11px var(--sans); letter-spacing: .01em; color: var(--cl-muted);
}
.comp-btn.comp-model:hover { color: var(--cl-ink); }
.comp-btn.comp-model[aria-expanded="true"] { box-shadow: 0 0 0 3px rgba(20, 20, 19, .06); }
.cm-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: currentColor;
  transition: background .2s var(--ease-out);
}
.comp-model[data-model="auto"] .cm-dot { background: linear-gradient(135deg, #4A7C59, var(--clay) 50%, #6B4E8F); }
.comp-btn.comp-model[data-model="haiku"] { color: #4A7C59; border-color: rgba(74, 124, 89, .35); background: rgba(74, 124, 89, .08); }
.comp-btn.comp-model[data-model="sonnet"] { color: #A64B28; border-color: rgba(217, 119, 87, .45); background: var(--clay-soft); }
.comp-btn.comp-model[data-model="opus"] { color: #6B4E8F; border-color: rgba(107, 78, 143, .35); background: rgba(107, 78, 143, .08); }
.cm-label { transition: opacity .12s var(--ease-out); }
.cm-label.fading { opacity: 0; }

.model-menu {
  position: absolute; left: 0; bottom: calc(100% + 7px); width: min(276px, 100%);
  background: var(--cl-paper); border: 1px solid var(--cl-line); border-radius: 15px;
  box-shadow: 0 12px 34px rgba(20, 20, 19, .16), 0 2px 6px rgba(20, 20, 19, .06);
  padding: 5px; z-index: 40; overflow: hidden;
  opacity: 0; transform: translateY(7px) scale(.985); transform-origin: bottom left;
  transition: opacity .18s var(--ease-out), transform .22s var(--ease-out);
}
.model-menu.open { opacity: 1; transform: none; }
.mm-title {
  font: 600 9.5px var(--sans); letter-spacing: .12em; text-transform: uppercase;
  color: var(--cl-muted); padding: 3px 9px 4px; opacity: .8;
}
.mm-list { display: flex; flex-direction: column; gap: 1px; }
.mm-row {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  background: none; border: none; border-radius: 10px; padding: 6px 9px; cursor: pointer;
  transition: background .14s var(--ease-out);
}
.mm-row:hover, .mm-row:focus-visible { background: var(--cl-sand); outline: none; }
.mm-row.picked { background: var(--clay-soft); }
.mm-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.mm-dot.m-auto { background: linear-gradient(135deg, #4A7C59, var(--clay) 50%, #6B4E8F); }
.mm-dot.m-haiku { background: #4A7C59; }
.mm-dot.m-sonnet { background: var(--clay); }
.mm-dot.m-opus { background: #6B4E8F; }
.mm-dot.m-fable { background: linear-gradient(135deg, #4A3B8A, #6B4E8F); }
.mm-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mm-main b { font: 600 12.5px var(--sans); color: var(--cl-ink); }
.mm-hint { font: 400 10.5px var(--sans); color: var(--cl-muted); line-height: 1.35; }
.mm-tick { flex-shrink: 0; font-size: 11px; color: var(--clay); opacity: 0; transition: opacity .16s var(--ease-out); }
.mm-row.picked .mm-tick { opacity: 1; }

/* ---- full-screen preview: the same panel, smoked ---- */
body.mb-full .chat .md code,
body.mb-full .chat .md pre { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .16); }
body.mb-full .chat .md a { color: #F3AE93; }
body.mb-full .chat .msg.tools { border-left-color: rgba(255, 255, 255, .16); }
body.mb-full .chat .msg.promptbox { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .16); }
body.mb-full .chat .pb-head { color: #ECF1FF; }
body.mb-full .chat .pb-text { color: #E2E9FF; border-top-color: rgba(255, 255, 255, .14); }
body.mb-full .chat :is(.msg-copy, .att-chip, .chip) {
  background: rgba(255, 255, 255, .09); border-color: rgba(255, 255, 255, .18); color: #ECF1FF;
}
body.mb-full .chat .slash-menu { background: #1B1F33; border-color: rgba(255, 255, 255, .16); }
body.mb-full .chat .slash-row.on { background: rgba(255, 255, 255, .09); }
body.mb-full .chat .slash-row.picked { background: rgba(217, 119, 87, .22); }
body.mb-full .chat .model-menu { background: #1B1F33; border-color: rgba(255, 255, 255, .16); }
body.mb-full .chat .mm-row:hover, body.mb-full .chat .mm-row:focus-visible { background: rgba(255, 255, 255, .09); }
body.mb-full .chat .mm-row.picked { background: rgba(217, 119, 87, .22); }
body.mb-full .chat .mm-main b { color: #ECF1FF; }
body.mb-full .chat :is(.mm-hint, .mm-title) { color: rgba(226, 234, 255, .62); }
body.mb-full .chat .comp-btn.comp-model { border-color: rgba(255, 255, 255, .2); }
body.mb-full .chat .comp-btn.comp-model[data-model="haiku"] { color: #9CD3A8; background: rgba(156, 211, 168, .14); border-color: rgba(156, 211, 168, .4); }
body.mb-full .chat .comp-btn.comp-model[data-model="sonnet"] { color: #F3AE93; background: rgba(217, 119, 87, .26); border-color: rgba(243, 174, 147, .4); }
body.mb-full .chat .comp-btn.comp-model[data-model="opus"] { color: #C9B3EA; background: rgba(201, 179, 234, .16); border-color: rgba(201, 179, 234, .4); }
body.mb-full .chat .sr-main b { color: #ECF1FF; }
/* The composer's icon buttons are not .btn, so the full-screen chrome rules
   above do not reach them — they get the same treatment here: legible over any
   site, and fading with the rest of the chrome. */
body.mb-full .chat :is(.comp-btn, .comp-send) { opacity: var(--mb-chrome); }
body.mb-full .chat .comp-btn { color: rgba(226, 234, 255, .82); }
body.mb-full .chat .comp-btn:hover { background: rgba(255, 255, 255, .12); color: #ECF1FF; }
body.mb-full .chat .comp-btn[aria-expanded="true"] {
  background: rgba(217, 119, 87, .26); color: #F3AE93; border-color: rgba(243, 174, 147, .4);
}
/* near-black on a full-screen site is no button at all */
body.mb-full .chat .comp-send.is-stop {
  background: rgba(9, 13, 32, .6); color: #FFC9C4;
  border: 1px solid rgba(255, 140, 130, .45); box-shadow: none;
}
body.mb-full .chat .comp-send.is-stop:hover { background: rgba(192, 58, 49, .4); }
/* chips are content, so they ghost out with the transcript */
body.mb-full .chat .chat-chips { opacity: var(--mb-ghost); transition: opacity .32s var(--ease-out); }

@media (prefers-reduced-motion: reduce) {
  .think-dots i, .chip-spin, .tools-spark { animation: none; }
  .tools-body, .pb-body, .slash-menu, .model-menu, .cm-label, .msg-copy, .chat .chip { transition-duration: .01ms; }
  .send-menu.open, .send-menu.closing, .send-menu.open :is(.mm-title, .mm-row) { animation-duration: .01ms; }
  .comp-send-more svg { transition-duration: .01ms; }
}

/* ---- the plan's 5-hour window, on the floor of the panel ----
   Claude subscriptions meter work in a rolling 5-hour window, so the one number
   worth having permanently in view is how much of it is gone. It gets a band
   across the bottom edge of the panel — full bleed, no radius, so it reads as
   the floor rather than as another control — filled orange from the left as the
   window burns down, with the caption riding on top of the fill.
   The three fills deepen clay → orange → red-orange, and all three are light
   enough that the near-black caption stays legible whether a given word happens
   to sit over the filled part or the empty track. */
.usage { flex-shrink: 0; user-select: none; cursor: default; position: relative; }
.usage-band {
  position: relative; display: flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 13px; overflow: hidden;
  background: rgba(20, 20, 19, .055);
  font: 500 10px var(--sans); letter-spacing: .04em; color: var(--cl-ink);
}
.usage-fill {
  position: absolute; inset: 0 auto 0 0; width: 0%;
  background: var(--clay);
  transition: width .55s var(--ease-out), background-color .3s var(--ease-out);
}
/* everything but the fill rides above it */
.usage-band > :not(.usage-fill) { position: relative; }
.usage-gap { flex: 1; }
.usage-label { text-transform: uppercase; letter-spacing: .09em; opacity: .68; }
.usage-pct { font-weight: 700; font-variant-numeric: tabular-nums; }
.usage-reset { font-variant-numeric: tabular-nums; opacity: .68; }
.usage.warn .usage-fill { background: #E2650F; }
.usage.hot .usage-fill { background: #DD4B14; }
/* on borrowed usage the bar is a teammate's window, and says so in the share's
   own colour (--tone, set from the swatch the share was given) — whatever level
   it sits at, so the colour reads as "not mine" rather than "nearly out".
   Deepens as their window runs down. */
.usage.borrowed .usage-fill { background: var(--tone, #F2C94C); }
.usage.borrowed.warn .usage-fill { filter: saturate(1.15) brightness(.94); }
.usage.borrowed.hot .usage-fill { filter: saturate(1.3) brightness(.86); }
.usage.borrowed .usage-label { opacity: .85; }
/* the hover card — the band enlarged, opening above it after a quarter-second's
   rest. Same glass as the builder's other pop-ups (the context menu, the ask
   cards). It takes the pointer, so the cursor may travel onto it and read; a
   bridge under it covers the gap to the band, so band + card hover as one box
   and leaving both is what closes it. */
.usage-pop {
  position: absolute; left: 8px; right: 8px; bottom: calc(100% + 8px); z-index: 30;
  padding: 12px 14px 11px;
  border-radius: 16px; border: 1px solid var(--line);
  background: rgba(255, 255, 255, .9); color: var(--ink);
  backdrop-filter: blur(24px) saturate(1.5); -webkit-backdrop-filter: blur(24px) saturate(1.5);
  box-shadow: 0 18px 48px rgba(24, 33, 66, .22), 0 2px 10px rgba(24, 33, 66, .1), inset 0 1px 0 rgba(255, 255, 255, .9);
  font: 500 12px var(--sans); letter-spacing: 0; line-height: 1.35;
  opacity: 0; transform: translateY(8px) scale(.97); transform-origin: 50% 100%;
  transition: opacity .18s var(--ease-out), transform .26s var(--ease-out);
  will-change: opacity, transform;
}
.usage-pop.show { opacity: 1; transform: none; }
.usage-pop::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 10px; }   /* the bridge */
.upop-head { display: flex; align-items: baseline; gap: 8px; }
.upop-title { font: 700 12.5px var(--display); color: var(--ink); }
.upop-pct { margin-left: auto; font: 700 22px var(--display); font-variant-numeric: tabular-nums; letter-spacing: -.02em; line-height: 1; }
.upop-sub { color: var(--muted); font-size: 11px; margin-top: 1px; }
.upop-bar { position: relative; height: 12px; margin: 10px 0 11px; border-radius: 6px; overflow: hidden; background: rgba(24, 33, 66, .08); }
.upop-fill, .upop-seg { position: absolute; inset: 0 auto 0 0; display: block; }
.upop-fill { background: var(--clay, #D97757); }
.usage.warn .upop-fill { background: #E2650F; }
.usage.hot .upop-fill { background: #DD4B14; }
.upop-tick { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(24, 33, 66, .12); }
.upop-rows { display: grid; gap: 5px; margin-bottom: 10px; }
.upop-row { display: flex; align-items: baseline; gap: 7px; min-width: 0; }
.upop-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; align-self: center; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .85); }
.upop-name { font-weight: 600; color: var(--ink); }
.upop-val { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ink); }
.upop-note { color: var(--muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upop-foot { display: flex; flex-wrap: wrap; gap: 4px 12px; color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; border-top: 1px solid var(--line-soft); padding-top: 8px; }
body.mb-full .usage-pop { background: rgba(28, 30, 40, .88); color: #EAF0FF; border-color: rgba(255, 255, 255, .14); box-shadow: 0 18px 48px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .08); }
body.mb-full :is(.upop-title, .upop-pct, .upop-name, .upop-val) { color: #EAF0FF; }
body.mb-full :is(.upop-sub, .upop-note, .upop-foot) { color: #B9C2E0; }
body.mb-full .upop-bar { background: rgba(255, 255, 255, .14); }
body.mb-full .upop-tick { background: rgba(255, 255, 255, .18); }
body.mb-full .upop-foot { border-top-color: rgba(255, 255, 255, .14); }
@media (prefers-reduced-motion: reduce) { .usage-pop { transition: none; } }
/* lending: the borrowers' segments sit inside the fill, one colour each */
.usage-band > .usage-seg { position: absolute; inset: 0 auto 0 0; transition: left .55s var(--ease-out), width .55s var(--ease-out); }
.usage-who { display: flex; align-items: center; gap: 7px; min-width: 0; overflow: hidden; white-space: nowrap; margin-left: 4px; }
.usage-chip { display: inline-flex; align-items: center; gap: 3px; opacity: .9; }
.usage-chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--tone); box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .7); flex: none; }
.usage-chip b { font-weight: 700; font-variant-numeric: tabular-nums; }

/* full-screen preview keeps the smoked-glass treatment; only the clay accents
   carry through so the panel still reads as Claude's. */
body.mb-full .chat { color: #E7EDFF; font-family: var(--sans); }
body.mb-full .chat .cl-star { color: #F0B39B; }
body.mb-full .chat .msg.user { background: var(--user-grad); border: none; color: #F4F7FF; }
body.mb-full .chat .msg.user.queued { background: rgba(255, 255, 255, .06); border: 1.5px dashed rgba(190, 200, 255, .55); color: #E7EDFF; }
body.mb-full .chat .cq-meta, body.mb-full .chat .cq-head, body.mb-full .chat .ctabs-head { color: #C9D2FF; }
body.mb-full .chat .cq-head { border-top-color: rgba(255, 255, 255, .18); }
body.mb-full .chat .cq-btn:not(.cq-run) { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .22); color: #E7EDFF; }
body.mb-full .chat .msg.claude { background: rgba(255, 255, 255, .08); padding: 9px 13px; border-radius: 14px; color: #ECF1FF; }
/* over the smoked glass the caption goes light, so the fill drops to a tint
   that the light text still reads over. */
body.mb-full .usage-band { background: rgba(255, 255, 255, .10); color: #EAF0FF; }
body.mb-full .usage-fill { background: rgba(217, 119, 87, .6); }
body.mb-full .usage.warn .usage-fill { background: rgba(226, 101, 15, .68); }
body.mb-full .usage.hot .usage-fill { background: rgba(221, 75, 20, .74); }
body.mb-full .usage.borrowed .usage-fill { background: color-mix(in srgb, var(--tone, #F2C94C) 64%, transparent); }
body.mb-full .usage-band > .usage-seg { opacity: .68; }
body.mb-full .usage-chip i { box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .35); }

body.mb-full .chat .chat-form { background: transparent; border-color: rgba(255, 255, 255, calc(.14 + var(--mb-ghost) * .14)); }
body.mb-full .chat .chat-form textarea {
  background: rgba(9, 13, 32, calc(var(--mb-ghost) * .34));
  border-color: rgba(255, 255, 255, calc(.16 + var(--mb-ghost) * .12));
  color: rgba(234, 240, 255, calc(.12 + var(--mb-ghost) * .88));
}

/* ---- resizable / hideable cockpit columns + the zoom pill ----
   The two side panels are grid columns sized by --chat-w / --insp-w. A grip
   sits on each seam (drag to resize, double-click to reset); the ‹ › button in
   each panel header collapses that column to nothing and leaves a rail on the
   edge to bring it back. Widths and hidden state persist per browser. */
.col-grip {
  position: absolute; top: 0; bottom: 0; width: 9px; z-index: 7; cursor: col-resize;
  left: calc(var(--chat-w, 320px) - 4px);
}
.col-grip.is-right { left: auto; right: calc(var(--insp-w, 300px) - 4px); }
.col-grip::after {
  content: ''; position: absolute; inset: 0 3px; border-radius: 2px;
  background: transparent; transition: background .16s var(--ease-out);
}
.col-grip:hover::after, .col-grip.dragging::after { background: rgba(76, 99, 230, .55); }
body.col-dragging { cursor: col-resize; user-select: none; }
body.col-dragging iframe { pointer-events: none; }

/* rails — the way back once a panel is hidden */
.col-rail {
  position: absolute; top: 50%; z-index: 8; display: flex; align-items: center; gap: 6px;
  transform: translateY(-50%); cursor: pointer;
  font: 700 10.5px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  background: var(--glass-2); border: 1px solid var(--line-soft); border-left: none;
  border-radius: 0 12px 12px 0; padding: 12px 8px 12px 6px;
  writing-mode: vertical-rl; box-shadow: var(--shadow-rest);
  backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4);
  transition: color .16s var(--ease-out), border-color .16s var(--ease-out), background .16s var(--ease-out);
}
.col-rail.is-left { left: 0; }
.col-rail.is-right { right: 0; border-left: 1px solid var(--line-soft); border-right: none; border-radius: 12px 0 0 12px; }
.col-rail svg { width: 13px; height: 13px; rotate: 90deg; }
.col-rail:hover { color: var(--accent-deep); border-color: rgba(76, 99, 230, .4); background: #FFFFFF; }

/* collapsed columns */
.cockpit.no-chat { --chat-w: 0px; }
.cockpit.no-insp { --insp-w: 0px; }
/* a collapsed panel keeps its (zero-width) column so the stage never jumps
   into the wrong grid track — it just goes invisible and untabbable */
.cockpit.no-chat > .chat, .cockpit.no-insp > .inspector { visibility: hidden; }
.cockpit.no-chat #grip-chat, .cockpit.no-insp #grip-insp { display: none; }
body.mb-full .col-grip { display: none; }
body.mb-full .col-rail { background: rgba(14, 18, 40, .5); border-color: rgba(255, 255, 255, .28); color: #D6E2FF; }

/* phone widths hide the grips and rails outright — the mobile cockpit at the
   end of this file replaces panel-collapsing with bottom sheets. */

/* zoom pill — one control: − , the live percentage, + */
.zoom-pill {
  display: flex; align-items: center; gap: 2px; padding: 3px;
  background: var(--glass-2); border: 1px solid var(--line); border-radius: 999px;
  box-shadow: var(--shadow-rest);
  backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4);
}
.zoom-btn, .zoom-num {
  border: none; background: transparent; color: var(--ink); cursor: pointer;
  border-radius: 999px; transition: background .14s var(--ease-out), color .14s var(--ease-out);
}
.zoom-btn { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; }
.zoom-btn svg { width: 13px; height: 13px; }
.zoom-num { font: 600 11.5px var(--mono); padding: 4px 7px; min-width: 46px; letter-spacing: -.01em; }
.zoom-btn:hover, .zoom-num:hover { background: var(--accent-soft); color: var(--accent-deep); }
.zoom-btn:active, .zoom-num:active { transform: scale(.92); transition-duration: .06s; }
.zoom-btn:disabled { opacity: .35; cursor: default; background: transparent; color: var(--ink); }

/* zoomed previews scroll inside the stage */
body.mb-full .zoom-pill { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .28); }
body.mb-full :is(.zoom-btn, .zoom-num) { color: #E7EDFF; }
body.mb-full :is(.zoom-btn, .zoom-num):hover { background: rgba(255, 255, 255, .14); color: #FFFFFF; }
body.mb-full .zoom-btn svg { stroke: #E7EDFF; }

/* ==================== launch checklist ==================== */
.launch-main { padding: 38px 28px 90px; max-width: 880px; width: 100%; margin: 0 auto; }

.launch-hero {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 18px 22px; margin-bottom: 22px;
  background: var(--glass); border: 1px solid var(--line-soft); border-radius: 16px;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow-rest);
}
.launch-badge {
  width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  background: rgba(24, 33, 66, .08); color: var(--muted);
  transition: background .2s var(--ease-out), color .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.launch-badge svg { width: 22px; height: 22px; }
.launch-badge.ok { background: rgba(14, 138, 95, .12); color: var(--ok); box-shadow: 0 0 18px rgba(14, 138, 95, .25); }
.launch-badge.warn { background: rgba(154, 106, 18, .12); color: var(--warn); box-shadow: 0 0 18px rgba(154, 106, 18, .2); }
.launch-badge.err { background: var(--danger-bg); color: var(--danger); box-shadow: 0 0 18px rgba(192, 58, 49, .2); }
.launch-badge.busy { background: var(--accent-soft); color: var(--accent-deep); animation: pulse 1.4s ease-in-out infinite; }
.launch-verdict { flex: 1; min-width: 230px; }
.launch-verdict b { display: block; font: 700 17px var(--display); }
.launch-verdict span { color: var(--muted); font-size: 12.5px; line-height: 1.5; display: block; margin-top: 2px; }
.launch-scores { display: flex; align-items: center; gap: 8px; }
.launch-scores .g-lab { font: 700 10.5px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-right: 10px; }

.launch-list { display: flex; flex-direction: column; gap: 8px; }
.launch-list .audit-group-title:first-child { margin-top: 0; }

/* an item Claude is actively fixing */
.acheck .dot.busy { background: var(--accent); box-shadow: 0 0 10px rgba(76, 99, 230, .6); animation: pulse 1.4s ease-in-out infinite; }
.fix-row { display: flex; align-items: center; gap: 10px; margin-top: 2px; }
.fix-note { color: var(--muted); font-size: 11.5px; }

.launch-dl {
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  padding: 20px 22px; margin-top: 26px;
  background: var(--glass); border: 1px solid var(--line-soft); border-radius: 16px;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow-rest);
  transition: border-color .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.launch-dl b { display: block; font: 700 15px var(--display); }
.launch-dl span { color: var(--muted); font-size: 12.5px; line-height: 1.5; display: block; margin-top: 2px; max-width: 52ch; }
.launch-dl.ready { border-color: rgba(14, 138, 95, .4); box-shadow: 0 0 26px rgba(14, 138, 95, .14), var(--shadow-rest); }

/* the publish-to-Netlify card sits above the zip download */
.launch-pub { margin-top: 26px; }
.launch-pub + .launch-dl { margin-top: 12px; }
.launch-pub.ready { border-color: rgba(14, 138, 95, .4); box-shadow: 0 0 26px rgba(14, 138, 95, .14), var(--shadow-rest); }
.pub-url {
  display: inline-block; margin-top: 6px;
  font: 600 13px var(--sans); color: var(--accent-deep); text-decoration: none;
  border-bottom: 1px solid currentColor; word-break: break-all;
}
.pub-url:hover { color: var(--accent); }
.pub-account { color: var(--muted); font-size: 11.5px; display: block; margin-top: 8px; }
.pub-account b { font-weight: 600; }
.linkish {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--muted); font: inherit; text-decoration: underline;
}
.linkish:hover { color: var(--danger); }
.pub-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.pub-connect { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.pub-connect input {
  width: 300px; max-width: 100%;
  padding: 9px 12px; font: 500 12.5px var(--mono, monospace);
  background: var(--field, #fff); color: inherit;
  border: 1px solid var(--line-soft); border-radius: 10px;
}
.pub-connect input:focus { outline: none; border-color: var(--accent); }
.pub-hint { color: var(--muted); font-size: 11px; line-height: 1.5; text-align: right; width: 100%; }
.pub-hint a { color: var(--accent-deep); }
#launch-deploy.working { opacity: .75; animation: pulse 1.4s ease-in-out infinite; }

@media (max-width: 640px) {
  .launch-scores { width: 100%; }
  .launch-dl { flex-direction: column; align-items: stretch; }
  .launch-dl .btn { justify-content: center; }
  .pub-side { align-items: stretch; }
  .pub-connect { justify-content: stretch; }
  .pub-connect input { width: 100%; }
  .pub-hint { text-align: left; }
}

/* ---- live collaboration ----
   Presence chips in the editor topbar (one per teammate in the project) and
   the author tint on change-log rows. The cursors themselves are drawn inside
   the preview iframe by mb-editor.js, in each person's colour (--pc here).
   House rule applies: chips glide in on the spring curve and fade out —
   nothing pops or snaps. */
.presence { display: flex; align-items: center; padding-left: 5px; }
.presence:empty { display: none; }
.pcur {
  width: 25px; height: 25px; margin-left: -7px; border-radius: 50%;
  display: grid; place-items: center; flex-shrink: 0;
  font: 700 10.5px var(--sans); color: #fff; background: var(--pc, var(--accent));
  border: 2px solid rgba(255, 255, 255, .92);
  box-shadow: 0 1px 5px rgba(24, 33, 66, .22);
  animation: pcur-in .32s var(--ease-spring);
  transition: transform .2s var(--ease-out), opacity .25s ease;
  cursor: default; user-select: none;
}
.pcur:first-child { margin-left: 0; }
.pcur:hover { transform: translateY(-1px) scale(1.08); z-index: 1; }
.pcur.leaving { opacity: 0; transform: scale(.4); }
@keyframes pcur-in { from { opacity: 0; transform: scale(.4); } }

/* who made each step — sits between the label and the timestamp */
.hist-row .hist-by {
  flex-shrink: 0; max-width: 90px; overflow: hidden; text-overflow: ellipsis;
  font: 600 10px var(--sans); color: var(--accent-deep);
  background: var(--accent-soft); border-radius: 999px; padding: 1px 7px;
}
.hist-row .hist-by:empty { display: none; }
body.mb-full .hist-row .hist-by { color: #C7D4FB; background: rgba(122, 148, 255, .18); }

/* ---- backups (Settings) ---- */
.bk-status {
  font-size: 12.5px; line-height: 1.55; color: var(--ink);
  background: var(--accent-soft); border: 1px solid var(--line-soft);
  border-radius: 12px; padding: 10px 13px; margin-bottom: 10px;
  transition: background .3s ease;
}
.bk-status b { font-weight: 700; }
.bk-status span { color: var(--muted); }
.bk-row .set-hint { margin: 0; flex: 1; }
#bk-run.loading { opacity: .7; animation: pulse 1.4s ease-in-out infinite; }

/* ==================== mobile cockpit ====================
   On a phone the client's site IS the screen — the Subject Rule taken to its
   limit. The desktop cockpit dissolves and the builder lives in three
   liquid-glass satellites floating over the page: a back chip (top-left),
   the Claude orb (bottom-left, coral spark) and the tools orb (bottom-right).
   The orbs wear the same smoked-navy glass as the desktop full-screen chrome
   (a dark plate with a white specular edge reads over any site), and they
   ghost out of the way while the page scrolls down under them. Each orb
   raises a daylight-glass bottom sheet over one shared scrim. */

/* never seen by the desktop cockpit */
.m-scrim, .m-sheet, .m-fab, .m-chip, .m-grab-row { display: none; }

@media (max-width: 768px), (pointer: coarse) and (max-width: 1024px) {

  /* ---- the site takes the whole screen ---- */
  #view-editor { height: 100vh; height: 100dvh; }
  #view-editor .topbar, #view-editor .inspector,
  .col-grip, .col-rail, .stage-tools { display: none; }
  .cockpit { display: block; }
  .stage { position: fixed; inset: 0; z-index: 10; background: var(--ground-0); }
  .stage-inner { padding: 0; overflow: hidden; }
  .device {
    width: 100% !important; height: 100% !important; margin: 0 !important;
    border: none; border-radius: 0; box-shadow: none;
  }
  #site-frame { width: 100% !important; height: 100% !important; transform: none !important; }

  /* ---- the liquid-glass satellites ---- */
  .m-fab, .m-chip {
    position: fixed; z-index: 30; padding: 0; cursor: pointer;
    display: grid; place-items: center;
    color: #EDF2FF;
    border: 1px solid rgba(255, 255, 255, .34); border-radius: 50%;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .02) 46%, rgba(255, 255, 255, .06)),
      rgba(11, 15, 34, .46);
    backdrop-filter: blur(16px) saturate(1.35); -webkit-backdrop-filter: blur(16px) saturate(1.35);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), 0 12px 34px rgba(4, 8, 28, .35);
    -webkit-tap-highlight-color: transparent;
    transition: transform .32s var(--ease-spring), opacity .38s var(--ease-out),
                box-shadow .32s var(--ease-out), background .2s var(--ease-out);
  }
  .m-fab:active, .m-chip:active { transform: scale(.9); transition-duration: .06s; }

  .m-fab { width: 58px; height: 58px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
  .m-fab svg { width: 25px; height: 25px; }
  .m-fab-claude { left: calc(18px + env(safe-area-inset-left, 0px)); }
  .m-fab-claude .m-spark { color: #E9906B; filter: drop-shadow(0 0 10px rgba(217, 119, 87, .45)); }
  .m-fab-tools { right: calc(18px + env(safe-area-inset-right, 0px)); }
  .m-fab-tools svg { stroke: url(#mb-iri-grad); }

  .m-chip {
    width: 44px; height: 44px;
    top: calc(14px + env(safe-area-inset-top, 0px));
    left: calc(14px + env(safe-area-inset-left, 0px));
  }
  .m-chip svg { width: 18px; height: 18px; stroke: url(#mb-iri-grad); }

  /* Claude is working — the spark turns and a coral ring breathes out */
  .m-fab-claude.busy .m-spark { animation: stage-spin 3.4s linear infinite; }
  .m-fab-claude.busy::after {
    content: ''; position: absolute; inset: -4px; border-radius: 50%;
    border: 1.5px solid rgba(233, 144, 107, .8); pointer-events: none;
    animation: m-ring 1.7s var(--ease-out) infinite;
  }
  @keyframes m-ring { from { transform: scale(.82); opacity: .9; } to { transform: scale(1.24); opacity: 0; } }
  /* a parked chat has news for you */
  .m-fab-claude.unread::before {
    content: ''; position: absolute; top: 2px; right: 2px; width: 12px; height: 12px;
    border-radius: 50%; background: var(--cta-grad);
    box-shadow: 0 0 10px rgba(95, 123, 240, .8), inset 0 1px 0 rgba(255, 255, 255, .4);
  }

  /* scrolling down = reading the site — the chrome steps back until the
     scroll turns around or rests (relayed by the editor script in the frame) */
  body.m-scrolling:not(.m-sheet-open) :is(.m-fab, .m-chip) {
    opacity: .3; transform: scale(.88);
  }

  /* ---- one scrim under both sheets ---- */
  .m-scrim {
    display: block; position: fixed; inset: 0; z-index: 35;
    background: rgba(24, 32, 70, .35);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    opacity: 0; pointer-events: none;
    transition: opacity .4s var(--ease-out);
  }
  body.m-sheet-open .m-scrim { opacity: 1; pointer-events: auto; }

  /* ---- bottom sheets: daylight glass, same material as the modals ---- */
  .m-grab-row {
    display: block; flex-shrink: 0; width: 100%; padding: 9px 0 3px;
    background: none; border: none; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .m-grab {
    display: block; width: 44px; height: 5px; margin: 0 auto;
    border-radius: 999px; background: rgba(24, 33, 66, .2);
  }

  .chat, .m-sheet {
    position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; top: auto;
    border: 1px solid var(--line); border-bottom: none;
    border-radius: 22px 22px 0 0;
    background: rgba(255, 255, 255, .9);
    backdrop-filter: blur(26px) saturate(1.45); -webkit-backdrop-filter: blur(26px) saturate(1.45);
    box-shadow: 0 -18px 60px rgba(24, 33, 66, .3), inset 0 1px 0 rgba(255, 255, 255, .9);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    transform: translateY(103%);
    visibility: hidden;
    transition: transform .46s var(--ease-out), visibility 0s .46s;
  }
  body.m-chat-open .chat,
  body.m-tools-open .m-sheet {
    transform: none; visibility: visible;
    transition: transform .46s var(--ease-out);
  }

  /* the Claude panel becomes the chat sheet */
  .chat { height: min(78vh, 640px); height: min(78dvh, 640px); border-right: none; }
  #chat-hide { display: none; }
  .chat textarea, .chat input { font-size: 16px; }  /* 16px stops iOS zooming the page on focus */
  .chat .panel-title { padding-top: 2px; }

  /* the tools sheet */
  .m-sheet { display: flex; flex-direction: column; max-height: 86vh; max-height: 86dvh; overflow-y: auto; }
  .m-sheet-title {
    display: flex; align-items: center; gap: 10px; padding: 2px 18px 10px;
    font: 700 11px var(--sans); letter-spacing: .11em; text-transform: uppercase; color: var(--muted);
  }
  .m-sec { padding: 13px 18px 15px; border-top: 1px solid var(--line-soft); }
  .m-sec .insp-lab { margin-bottom: 10px; }
  .m-sheet .nf-drawer .m-sec:first-child { border-top: none; padding-top: 0; }
  .m-row { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
  #m-launch { flex: 1 1 100%; justify-content: center; margin-top: 3px; }
  .m-sheet .btn { padding: 12px 17px; font-size: 14px; }
  .m-sheet .blk { font-size: 13px; }
  .m-sheet .pal-head { position: static; margin: 0 0 14px; padding: 0; background: none; border: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .m-modes { display: flex; width: 100%; }
  .m-modes .btn { flex: 1; justify-content: center; padding: 12px 4px; font-size: 12.5px; }
  .m-mode-hint { margin: 10px 2px 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
  #m-page { font-size: 16px; padding: 11px 14px; }

  /* ---- change-log toasts float above the orbs; the clock stays desktop ---- */
  .hist-dock {
    left: 50%; right: auto; transform: translateX(-50%);
    bottom: calc(92px + env(safe-area-inset-bottom, 0px));
    align-items: center;
  }
  .hist-toasts { align-items: center; }
  .hist-btn, .hist-panel { display: none; }
}

/* ============ HOUSE DROPDOWNS ============
   Rule for the whole app: no macOS select menus. The native <select> stays —
   it keeps the value, the change events and the markup — but it draws our
   chevron, and app.js opens a Newguard-styled .dd-menu instead of the OS
   list. The chevron props carry !important because several rules (hover,
   focus, mb-full) legitimately reset `background:` as a shorthand, which
   would silently erase the arrow. */
:root { --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23545F82' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E"); }
body.mb-full { --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EDF2FF' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'%3E%3C/path%3E%3C/svg%3E"); }
select:not([multiple]) {
  appearance: none; -webkit-appearance: none;
  background-image: var(--chev) !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  background-size: 12px !important;
  padding-right: 30px;
}
.ts-font { padding-right: 26px; background-position: right 8px center !important; }

/* the floating menu itself — glass panel, house hover, gentle in/out */
.dd-menu {
  position: fixed; z-index: 90; min-width: 130px; max-width: 320px;
  max-height: min(340px, calc(100vh - 20px)); overflow-y: auto;
  background: rgba(255, 255, 255, .93); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 18px 50px rgba(24, 33, 66, .18), 0 4px 14px rgba(24, 33, 66, .1);
  backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4);
  padding: 5px;
  animation: dd-in .22s var(--ease-out);
}
.dd-menu.closing { animation: dd-out .16s var(--ease-out) forwards; pointer-events: none; }
@keyframes dd-in { from { opacity: 0; transform: translateY(-5px) scale(.98); } }
@keyframes dd-out { to { opacity: 0; transform: translateY(-3px) scale(.99); } }
.dd-group { font: 700 10px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: 9px 10px 4px; }
.dd-item {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  border: none; background: none; cursor: pointer; border-radius: 9px;
  font: 500 13px var(--sans); color: var(--ink); padding: 7px 10px;
  transition: background .14s var(--ease-out), color .14s var(--ease-out);
}
.dd-item:hover, .dd-item.focused { background: var(--accent-soft); color: var(--accent-deep); }
.dd-item.selected { color: var(--accent-deep); font-weight: 600; }
.dd-check { margin-left: auto; width: 14px; height: 14px; flex: none; opacity: 0; }
.dd-item.selected .dd-check { opacity: 1; }
/* the picker's own "+ Add a font…" row — set off from the real options with
   a hairline and the accent color, so it reads as an action, not a choice */
.dd-item.dd-add {
  margin-top: 4px; padding-top: 9px; border-top: 1px solid var(--line-soft);
  color: var(--accent-deep); font-weight: 600;
}
.dd-item.dd-add:hover { background: var(--accent-soft); }
.dd-plus { width: 14px; height: 14px; flex: none; }
body.mb-full .dd-item.dd-add { border-top-color: rgba(255, 255, 255, .18); color: #C9D4FF; }
body.mb-full .dd-menu {
  background: rgba(11, 15, 34, .88); border-color: rgba(255, 255, 255, .24);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 22px 60px rgba(4, 8, 28, .5);
}
body.mb-full .dd-item { color: #E9EFFF; }
body.mb-full .dd-item:hover, body.mb-full .dd-item.focused { background: rgba(255, 255, 255, .14); color: #FFFFFF; }
body.mb-full .dd-item.selected { color: #FFFFFF; }
body.mb-full .dd-group { color: rgba(211, 222, 252, .6); }

/* ---- the text strip's spacing & indent popover ---- */
.ts-pop {
  position: fixed; z-index: 89; width: 236px; padding: 12px 14px;
  background: rgba(255, 255, 255, .93); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 18px 50px rgba(24, 33, 66, .18), 0 4px 14px rgba(24, 33, 66, .1);
  backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4);
  display: none; flex-direction: column;
}
.ts-pop.open { display: flex; animation: dd-in .22s var(--ease-out); }
.ts-pop.closing { display: flex; animation: dd-out .16s var(--ease-out) forwards; pointer-events: none; }
.ts-pop .ctl-row { flex-wrap: nowrap; }
.ts-pop .ctl-row:last-child { margin-bottom: 0; }
.ts-pop .ctl-row label { width: auto; flex: 1; }
.ts-pop .btn.ts-step { width: 26px; justify-content: center; padding: 5px 0; font-size: 14px; border: 1px solid transparent; background: transparent; box-shadow: none; }
.ts-pop .btn.ts-step:hover { background: var(--accent-soft); border-color: transparent; transform: none; box-shadow: none; }
.ts-pop .btn.ts-step svg { width: 15px; height: 15px; }
.ts-pop .ts-size { min-width: 30px; }
.ts-space svg { width: 15px; height: 15px; }
body.mb-full .ts-pop {
  background: rgba(11, 15, 34, .88); border-color: rgba(255, 255, 255, .24);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 22px 60px rgba(4, 8, 28, .5);
}
body.mb-full .ts-pop .ctl-row label { color: rgba(211, 222, 252, .66); }
body.mb-full .ts-pop .ts-size { color: #EDF2FF; }
body.mb-full .ts-pop .btn.ts-step:hover { background: rgba(255, 255, 255, .14); }

/* ---- design — the Design button's popover ----
   Same glass as the spacing popover, wide enough for a swatch, a name and its
   use count per row; the list scrolls inside so a long palette never grows
   past the canvas. Two levels — the main menu, then colours or text — slide
   the way the right-hand menu does, and the glass grows to the new level's
   height rather than snapping to it. */
.design-pop {
  position: fixed; z-index: 89; width: 316px; max-height: min(70vh, 560px); padding: 12px 14px 10px;
  background: rgba(255, 255, 255, .93); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 18px 50px rgba(24, 33, 66, .18), 0 4px 14px rgba(24, 33, 66, .1);
  backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4);
  display: none; flex-direction: column; min-height: 0;
}
.design-pop.open { display: flex; animation: dd-in .22s var(--ease-out); }
.design-pop.closing { display: flex; animation: dd-out .16s var(--ease-out) forwards; pointer-events: none; }
/* while the glass is growing or shrinking between levels nothing may spill out
   of the rounded box — the height is driven from app.js, measured either side */
.design-pop.morph { overflow: hidden; transition: height .34s var(--ease-out); }
.design-head { display: flex; flex-direction: column; gap: 2px; padding-bottom: 10px; border-bottom: 1px solid var(--line-soft); margin-bottom: 6px; flex: none; }
.design-head-top { display: flex; align-items: center; gap: 5px; min-height: 22px; }
.design-head .menu-back { height: 22px; margin-right: -5px; }
.design-head .menu-back.show { width: 22px; margin-right: 0; }
.design-head .menu-back svg { width: 13px; height: 13px; }
/* one level of the popover; they swap the way the right-hand menu's views do */
.design-view { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.design-view.menu-in { animation: menu-in .34s var(--ease-out) both; }
.design-rows { padding: 4px 0 2px; gap: 7px; }
/* the way across to the other level — set off from the list above it */
.design-cross { flex: none; padding-top: 8px; margin-top: 6px; border-top: 1px solid var(--line-soft); }
.design-cross .menu-row { animation: none; }
.design-head b { font: 700 10.5px var(--sans); letter-spacing: .11em; text-transform: uppercase; color: var(--muted); }
.design-head span { font-size: 11px; line-height: 1.45; color: var(--muted); }
.design-list { overflow-y: auto; min-height: 0; margin: 0 -6px; padding: 0 6px; }
.dtok { border-radius: 10px; transition: background .16s var(--ease-out); }
.dtok-main { display: flex; align-items: center; gap: 9px; padding: 5px 4px; }
.dtok:hover, .dtok.uses-open { background: rgba(76, 99, 230, .06); }
/* the tokens the selected element is drawn with */
.dtok.worn { background: var(--accent-soft); box-shadow: inset 0 0 0 1px rgba(76, 99, 230, .35); }
.dtok.worn:hover { background: rgba(76, 99, 230, .16); }
.dtok-worn {
  display: none; flex: none; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 700 9px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--accent-deep);
  background: rgba(255, 255, 255, .85); border: 1px solid rgba(76, 99, 230, .3); border-radius: 999px; padding: 2px 7px;
}
.dtok.worn .dtok-worn { display: inline-block; animation: dd-in .22s var(--ease-out); }
.design-sel { color: var(--accent-deep) !important; margin-top: 3px; animation: dd-in .22s var(--ease-out); }
#ed-design.has-worn::after {
  content: ''; width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: var(--accent); box-shadow: 0 0 8px rgba(76, 99, 230, .7); animation: dd-in .22s var(--ease-out);
}
/* the use count is a button; open, it reads as the heading of its list */
.dtok-uses {
  font: 500 11px var(--sans); color: var(--muted); flex: none; cursor: pointer;
  background: none; border: 1px solid transparent; border-radius: 999px; padding: 3px 8px;
  transition: background .16s var(--ease-out), color .16s var(--ease-out), border-color .16s var(--ease-out);
}
.dtok-uses:hover:not(:disabled) { background: rgba(255, 255, 255, .85); border-color: var(--line-soft); color: var(--ink); }
.dtok-uses[aria-expanded="true"] { background: var(--accent-soft); border-color: rgba(76, 99, 230, .45); color: var(--accent-deep); }
.dtok-uses:disabled { cursor: default; }
/* the list glides open under its row — grid-rows, so nothing snaps */
.dtok-list { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .34s var(--ease-out); }
.dtok.uses-open .dtok-list { grid-template-rows: 1fr; }
.dtok-list-in { min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 2px; padding: 0 4px; opacity: 0; transition: opacity .2s var(--ease-out); }
.dtok.uses-open .dtok-list-in { padding-bottom: 8px; opacity: 1; transition: opacity .26s var(--ease-out) .1s; }
.dtok-use {
  display: flex; flex-direction: column; gap: 1px; text-align: left; width: 100%;
  background: rgba(255, 255, 255, .7); border: 1px solid var(--line-soft); border-radius: 9px; padding: 6px 9px;
  cursor: pointer; transition: border-color .16s var(--ease-out), background .16s var(--ease-out), transform .16s var(--ease-out);
}
.dtok-use:hover:not(:disabled) { border-color: rgba(76, 99, 230, .45); background: #fff; transform: translateX(2px); }
.dtok-use b { font: 500 11px var(--mono); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dtok-use span { font-size: 10.5px; color: var(--muted); }
.dtok-use.off, .dtok-use.off:hover { cursor: default; background: transparent; }
.dtok-use.off b { color: var(--muted); }
.dtok-use.muted { border-color: transparent; background: transparent; cursor: default; font-size: 11px; line-height: 1.45; color: var(--muted); }
.dtok input[type=color] { padding: 2px; width: 40px; height: 26px; flex-shrink: 0; border-radius: 8px; cursor: pointer; }
.dtok-name { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.dtok-title { display: flex; align-items: center; gap: 6px; min-width: 0; }
.dtok-name b { font: 600 12.5px var(--sans); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: capitalize; }
.dtok-val { font: 500 10.5px var(--mono); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dtok-uses { font-size: 11px; color: var(--muted); flex: none; }
.dtok .mini { transition: transform .32s var(--ease-spring), border-color .16s var(--ease-out), color .16s var(--ease-out), opacity .16s var(--ease-out); }
.dtok .mini:disabled { opacity: 0; pointer-events: none; }
.design-empty { font-size: 12px; line-height: 1.5; color: var(--muted); padding: 6px 2px 4px; }
/* ---- the text level ----
   A font row is a colour row with the swatch swapped for the face itself:
   "Ag" set in the font the token names, and the picker under it. */
.dfont .dtok-main { align-items: center; padding-bottom: 2px; }
.dfont-prev {
  display: grid; place-items: center; width: 40px; height: 34px; flex: none;
  border: 1px solid var(--line-soft); border-radius: 8px; background: var(--glass-2);
  font-size: 16px; line-height: 1; color: var(--ink); overflow: hidden;
  transition: border-color .16s var(--ease-out), background .16s var(--ease-out);
}
.dfont:hover .dfont-prev { border-color: rgba(76, 99, 230, .35); background: #fff; }
.dfont-pick { padding: 0 4px 7px; }
.dfont-pick select { width: 100%; font-size: 12px; }
/* ---- the levels that measure things ----
   A labelled control per line: the label is a fixed column so every slider in
   a level starts at the same x, and the readout sits at the end in the unit
   the thing is actually measured in. */
.dtok-body { display: flex; flex-direction: column; gap: 2px; padding: 0 4px 7px; }
.dctl { display: flex; align-items: center; gap: 8px; min-height: 26px; }
.dctl > label { flex: none; width: 78px; font-size: 11px; color: var(--muted); }
.dctl > select { flex: 1; min-width: 0; font-size: 12px; }
.dctl > input[type=color] { padding: 2px; width: 34px; height: 24px; flex: none; border-radius: 7px; cursor: pointer; }
.dctl-range { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; }
.dctl-range input[type=range] { flex: 1; min-width: 0; }
.dctl-out { flex: none; min-width: 54px; text-align: right; font: 500 10.5px var(--mono); color: var(--muted); }
.dctl .mini { flex: none; }
.dctl .mini:disabled { opacity: 0; pointer-events: none; }
/* a shadow shows itself: a small card wearing it, on the page's own paper */
.dshade-prev {
  width: 40px; height: 28px; flex: none; border-radius: 8px; background: #fff;
  border: 1px solid var(--line-soft); transition: box-shadow .2s var(--ease-out);
}
/* a curve shows itself too — the dot runs the easing it names, on a loop */
.dmotion-track { position: relative; width: 40px; height: 28px; flex: none; border-radius: 8px; background: var(--glass-2); border: 1px solid var(--line-soft); overflow: hidden; }
.dmotion-track i { position: absolute; top: 50%; left: 5px; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--accent); animation: dmotion-run 1.9s var(--ease-now, ease) infinite alternate; }
@keyframes dmotion-run { from { transform: translateX(0); } to { transform: translateX(21px); } }
@media (prefers-reduced-motion: reduce) { .dmotion-track i { animation: none; } }
/* ---- the pieces the site repeats ----
   The chip is the real thing, small: the group's own background, corner,
   border and face, on the group's own words. */
.dpart-chip {
  display: grid; place-items: center; flex: none; max-width: 74px; min-width: 44px; height: 30px; padding: 0 8px;
  font-size: 10.5px; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border-style: solid; border-width: 0; background: #fff; color: var(--ink);
  box-shadow: inset 0 0 0 1px rgba(24, 33, 66, .08);
  transition: background .16s var(--ease-out), color .16s var(--ease-out), border-radius .2s var(--ease-out);
}
.dpart-chip.bare { box-shadow: inset 0 0 0 1px rgba(24, 33, 66, .12); background: var(--glass-2); }
/* a group is named by its own words — the site's capitals, not the panel's */
.dpart .dtok-name b { text-transform: none; }
.dpart .dtok-val { font: 500 10.5px var(--mono); }
.dpart .dtok-list-in { gap: 0; }
#ed-design[aria-expanded="true"] { background: var(--accent-soft); border-color: rgba(76, 99, 230, .45); color: var(--accent-deep); }
body.mb-full .design-pop {
  background: rgba(11, 15, 34, .88); border-color: rgba(255, 255, 255, .24);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 22px 60px rgba(4, 8, 28, .5);
}
body.mb-full .design-pop .dtok-name b { color: #EDF2FF; }
body.mb-full .design-pop .dtok-val, body.mb-full .design-pop .dtok-uses,
body.mb-full .design-pop .design-head span, body.mb-full .design-empty { color: rgba(211, 222, 252, .66); }
body.mb-full .design-pop .dtok:hover, body.mb-full .design-pop .dtok.uses-open { background: rgba(255, 255, 255, .08); }
body.mb-full .design-pop .dtok-use { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .14); }
body.mb-full .design-pop .dtok-use:hover:not(:disabled) { background: rgba(255, 255, 255, .16); }
body.mb-full .design-pop .dtok-use b { color: #EDF2FF; }
body.mb-full .design-pop .dtok-use.off b, body.mb-full .design-pop .dtok-uses { color: rgba(211, 222, 252, .66); }
body.mb-full .design-pop .dtok.worn { background: rgba(120, 140, 255, .22); box-shadow: inset 0 0 0 1px rgba(160, 175, 255, .5); }
body.mb-full .design-pop .dtok-worn { background: rgba(11, 15, 34, .6); color: #C9D4FF; border-color: rgba(160, 175, 255, .5); }
body.mb-full .design-pop .design-sel { color: #C9D4FF !important; }
body.mb-full .design-pop .design-head, body.mb-full .design-pop .design-cross { border-color: rgba(255, 255, 255, .16); }
body.mb-full .design-pop .menu-row { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .16); box-shadow: none; }
body.mb-full .design-pop .menu-row:hover { background: rgba(255, 255, 255, .16); border-color: rgba(160, 175, 255, .5); }
body.mb-full .design-pop .menu-row .mr-txt b { color: #EDF2FF; }
body.mb-full .design-pop .menu-row .mr-txt span, body.mb-full .design-pop .menu-row .mr-chev { color: rgba(211, 222, 252, .66); }
body.mb-full .design-pop .menu-row .mr-ic { background: rgba(120, 140, 255, .22); color: #C9D4FF; }
body.mb-full .design-pop .menu-row .mr-n { background: rgba(120, 140, 255, .22); color: #C9D4FF; }
body.mb-full .design-pop .dfont-prev { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .16); color: #EDF2FF; }
body.mb-full .design-pop .dfont:hover .dfont-prev { background: rgba(255, 255, 255, .16); border-color: rgba(160, 175, 255, .5); }
body.mb-full .design-pop .dctl > label, body.mb-full .design-pop .dctl-out { color: rgba(211, 222, 252, .66); }
body.mb-full .design-pop .dmotion-track { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .16); }
body.mb-full .design-pop .dmotion-track i { background: #C9D4FF; }
body.mb-full .design-pop .menu-grp { color: rgba(211, 222, 252, .6); }

/* ---- upload an existing project ----
   The drop target is the hero of the modal; the summary, progress bar and
   error all glide open with the grid-rows trick so nothing snaps in. */
.modal.import-modal { max-width: 560px; display: flex; flex-direction: column; gap: 10px; max-height: 92vh; overflow-y: auto; }
.modal.import-modal > p { margin-bottom: 6px; }
.modal.import-modal .lab { margin-top: 4px; }
.import-drop {
  display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center;
  padding: 26px 20px 20px; border: 1.5px dashed rgba(76, 99, 230, .35); border-radius: 18px;
  background: linear-gradient(180deg, rgba(76, 99, 230, .06), rgba(76, 99, 230, .02));
  cursor: pointer; outline: none;
  transition: border-color .22s var(--ease-out), background .22s var(--ease-out), transform .32s var(--ease-spring), box-shadow .32s var(--ease-out);
}
.import-drop:hover, .import-drop:focus-visible { border-color: rgba(76, 99, 230, .6); background: var(--accent-soft); }
.import-drop:focus-visible { box-shadow: 0 0 0 3px rgba(76, 99, 230, .14); }
.import-drop.dropping {
  border-color: var(--accent); border-style: solid; background: var(--accent-soft);
  transform: scale(1.012); box-shadow: 0 0 0 4px rgba(76, 99, 230, .12), 0 0 28px rgba(76, 99, 230, .18);
}
.import-drop.has-files { border-style: solid; border-color: rgba(14, 138, 95, .45); background: rgba(14, 138, 95, .06); }
.import-drop > svg { width: 34px; height: 34px; color: var(--accent); transition: transform .32s var(--ease-spring), color .2s var(--ease-out); }
.import-drop.dropping > svg { transform: translateY(-3px) scale(1.08); }
.import-drop.has-files > svg { color: var(--ok); }
.import-drop-text { display: flex; flex-direction: column; gap: 3px; }
.import-drop-text b { font: 700 14.5px var(--display); color: var(--ink); }
.import-drop-text span { font-size: 12.5px; color: var(--muted); }
.import-pickers { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.import-pickers .btn { background: rgba(255, 255, 255, .8); }

/* collapsible blocks: 0fr ↔ 1fr, like .nf-drawer */
.import-summary, .import-progress {
  display: grid; grid-template-rows: 0fr; opacity: 0;
  transition: grid-template-rows .34s var(--ease-out), opacity .26s var(--ease-out);
}
.import-summary.open, .import-progress.open { grid-template-rows: 1fr; opacity: 1; }
.import-summary-in, .import-progress-in { overflow: hidden; min-height: 0; }
.import-stats { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--muted); padding: 2px 2px 0; }
.import-stats b { color: var(--ink); font-weight: 600; }
.import-pages { list-style: none; margin: 8px 0 2px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.import-pages li {
  font-size: 12px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line);
  background: rgba(255, 255, 255, .6); color: var(--ink);
  animation: chk-row-in .3s var(--ease-out);
}
.import-pages li.more { color: var(--muted); border-style: dashed; }
.import-progress-in { display: flex; flex-direction: column; gap: 6px; padding-top: 4px; }
.import-bar { display: block; height: 4px; border-radius: 999px; background: rgba(24, 33, 66, .12); overflow: hidden; }
.import-bar > span { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--cta-grad); transition: width .3s var(--ease-out); }
.import-progress-text { font-size: 12px; color: var(--muted); }
.modal .import-error {
  margin: 0 !important; font-size: 12.5px; color: var(--danger-ink);
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .3s var(--ease-out), opacity .22s var(--ease-out);
}
.modal .import-error.show { max-height: 80px; opacity: 1; }
.import-modal.busy .import-drop { pointer-events: none; opacity: .7; }
@media (max-width: 520px) {
  .import-pickers { flex-direction: column; width: 100%; }
  .import-pickers .btn { justify-content: center; }
}

/* ---- build from a URL ----
   The third picker turns the drop target into an address field: the panel
   glides open under it (same 0fr ↔ 1fr trick), with the two ways to build —
   an exact copy, or the copy plus the brief — and the page limit. */
#import-pick-url.on { background: var(--accent-soft); border-color: rgba(76, 99, 230, .45); color: var(--accent-deep); }
#import-pick-url svg { width: 14px; height: 14px; margin-right: 5px; vertical-align: -2px; }
.import-drop.url-mode { border-color: rgba(76, 99, 230, .5); background: var(--accent-soft); }
.import-url {
  display: grid; grid-template-rows: 0fr; opacity: 0;
  transition: grid-template-rows .34s var(--ease-out), opacity .26s var(--ease-out);
}
.import-url.open { grid-template-rows: 1fr; opacity: 1; }
.import-url-in { overflow: hidden; min-height: 0; display: flex; flex-direction: column; gap: 10px; padding: 2px; }
.import-url-in input[type=url] { font-family: var(--mono); font-size: 13px; }
.import-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.import-mode { display: block; cursor: pointer; }
.import-mode input { position: absolute; opacity: 0; pointer-events: none; }
.im-card {
  display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 11px 13px;
  border: 1px solid var(--line-soft); border-radius: 14px; background: rgba(255, 255, 255, .55);
  transition: border-color .16s var(--ease-out), background .16s var(--ease-out), box-shadow .3s var(--ease-out), transform .3s var(--ease-spring);
}
.im-card b { font: 700 13.5px var(--display); color: var(--ink); }
.im-card span { font-size: 12px; line-height: 1.45; color: var(--muted); }
.import-mode:hover .im-card { border-color: var(--line); background: rgba(255, 255, 255, .8); }
.import-mode input:checked + .im-card {
  border-color: var(--accent); background: var(--accent-soft);
  box-shadow: 0 0 0 3px rgba(76, 99, 230, .12);
}
.import-mode input:focus-visible + .im-card { box-shadow: 0 0 0 3px rgba(76, 99, 230, .28); }
.import-url-opts { display: flex; align-items: flex-start; gap: 12px; }
.import-cap { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink); white-space: nowrap; }
.import-cap input { width: 58px; padding: 5px 8px; text-align: center; font-family: var(--mono); font-size: 12.5px; }
.import-url-opts .lab-hint { margin: 0; flex: 1; }
.import-stats .import-issues b { color: var(--warn); }
@media (max-width: 520px) {
  .import-modes { grid-template-columns: 1fr; }
  .import-url-opts { flex-direction: column; gap: 6px; }
}

/* ---- the URL button (a copied site only) + its report ----
   Sits between Design and the SEO/AEO chip. The badge counts what did not
   come across; while Claude is checking the copy the icon breathes. */
.url-btn { position: relative; }
.url-btn svg { width: 14px; height: 14px; }
.url-btn.checking svg { animation: pulse 1.2s ease-in-out infinite; color: var(--accent); }
.url-badge {
  position: absolute; top: -6px; right: -6px; min-width: 17px; height: 17px; padding: 0 5px;
  display: inline-grid; place-items: center; border-radius: 999px;
  font: 700 10px var(--mono); color: #fff; background: var(--warn); border: 2px solid var(--ground-high, #EEF0F5);
  animation: chk-row-in .3s var(--ease-out);
}
.copy-modal .audit-head h2 a { color: inherit; text-decoration: none; border-bottom: 2px solid rgba(76, 99, 230, .35); transition: border-color .16s var(--ease-out); }
.copy-modal .audit-head h2 a:hover { border-color: var(--accent); }
.copy-modal .score-card.copy-stats > div { flex: 1; }
.copy-modal .score-card.copy-stats span b { display: inline; font: 700 13px var(--mono); color: var(--ink); letter-spacing: 0; }
.copy-modal .acheck .a-file { font-family: var(--mono); text-transform: none; letter-spacing: 0; font-size: 10.5px; }
.copy-modal .acheck .a-why { color: var(--muted); }
@media (max-width: 720px) { .copy-modal .acheck .a-file { display: none; } }

/* ---- the brief's upgrade strip (a copy is staged behind this brief) ---- */
.bf-upgrade {
  display: flex; align-items: center; gap: 12px; margin: 0 0 14px; padding: 12px 14px;
  border: 1px solid rgba(76, 99, 230, .35); border-radius: 16px; background: var(--accent-soft);
  animation: chk-row-in .35s var(--ease-out);
}
.bf-upgrade-ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: rgba(255, 255, 255, .7); color: var(--accent); flex-shrink: 0; }
.bf-upgrade-ic svg { width: 18px; height: 18px; }
.bf-upgrade-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bf-upgrade-txt b { font: 700 13.5px var(--display); color: var(--ink); }
.bf-upgrade-txt span { font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.bf-upgrade .btn { white-space: nowrap; }
@media (max-width: 560px) { .bf-upgrade { flex-wrap: wrap; } .bf-upgrade .btn { flex: 1; justify-content: center; } }

/* ---- brief drafts ----
   The status by the brief's header buttons (saving → saved → aged), the
   Drafts shelf that glides open under the sites, and its dashed cards. */
.draft-status {
  display: inline-flex; align-items: center; gap: 7px; margin-right: 4px;
  font-size: 12px; color: var(--muted); white-space: nowrap;
  opacity: 0; transform: translateX(4px); pointer-events: none;
  transition: opacity .28s var(--ease-out), transform .32s var(--ease-out), color .2s var(--ease-out);
}
.draft-status.show { opacity: 1; transform: none; }
.draft-status i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--muted); flex-shrink: 0;
  transition: background .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.draft-status.saving i { background: var(--accent); box-shadow: 0 0 8px rgba(76, 99, 230, .6); animation: pulse 1.2s ease-in-out infinite; }
.draft-status.saved i { background: var(--ok); box-shadow: 0 0 8px rgba(14, 138, 95, .45); }
.draft-status.bad { color: var(--danger-ink); }
.draft-status.bad i { background: var(--danger); }
.draft-status.note i { background: var(--warn); }
.draft-status .hl { transition: opacity .12s var(--ease-out); }
.draft-status .hl.fading { opacity: 0; }

.home-drafts {
  display: grid; grid-template-rows: 0fr; opacity: 0; margin-top: 0;
  transition: grid-template-rows .45s var(--ease-out), opacity .3s var(--ease-out), margin-top .45s var(--ease-out);
}
.home-drafts.open { grid-template-rows: 1fr; opacity: 1; margin-top: 44px; }
.home-drafts-in { min-height: 0; overflow: hidden; padding-top: 12px; }
.home-drafts h2 { font: 700 20px var(--display); margin: 0 0 4px; }
.sub.small { font-size: 13px; margin-bottom: 18px; }
.draft-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; padding: 2px 0 6px; }
.dcard {
  position: relative; padding: 20px 18px 14px; cursor: pointer;
  border: 1px dashed rgba(76, 99, 230, .45); border-radius: 16px;
  background: rgba(255, 255, 255, .42);
  animation: dcard-in .32s var(--ease-out);
  transition: transform .32s var(--ease-spring), box-shadow .32s var(--ease-out), border-color .16s var(--ease-out), background .16s var(--ease-out);
}
.dcard.settled { animation: none; }
.dcard:hover { border-color: rgba(76, 99, 230, .75); background: var(--glass-2); transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.dcard:active { transform: scale(.985); box-shadow: none; transition-duration: .06s; }
.dcard:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dcard .pill.draft {
  position: absolute; top: -11px; left: 14px;
  color: var(--warn); border-color: rgba(154, 106, 18, .4); background: rgba(255, 255, 255, .92);
}
.dcard h3 { margin: 0 0 4px; font: 700 15px var(--display); word-break: break-word; }
.dcard .purpose {
  margin: 0 0 8px; font-size: 13px; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.dcard .purpose.faint { color: var(--muted); font-style: italic; }
.dcard .meta { color: var(--muted); font-size: 12.5px; }
.dcard .pcard-actions { margin-top: 10px; }
.dcard.leaving { animation: dcard-out .3s var(--ease-out) forwards; pointer-events: none; }
@keyframes dcard-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes dcard-out { to { opacity: 0; transform: scale(.96); } }

/* ---- borrowed usage ----
   Asking a teammate for a slice of their Claude plan. Three surfaces: the
   Request-usage button on the home header (its label follows the ask), the
   bottom-right dock where an ask lands for the lender, and the strip at the top
   of the Claude panel saying whose plan the turns are running on. */
#usage-ask-btn { position: relative; }
#usage-ask-btn .hl { transition: opacity .18s var(--ease-out); }
#usage-ask-btn.hot { border-color: rgba(226, 101, 15, .5); color: #9A4A0A; background: rgba(226, 101, 15, .08); }
#usage-ask-btn.live { border-color: color-mix(in srgb, var(--tone, #F2C94C) 70%, #6B5A20); color: color-mix(in srgb, var(--tone, #F2C94C) 45%, #2A2410); background: color-mix(in srgb, var(--tone, #F2C94C) 22%, transparent); }
#usage-ask-btn.live .ask-dot { background: var(--tone, #F2C94C); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tone, #F2C94C) 32%, transparent); }
.ask-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none;
  box-shadow: 0 0 0 3px var(--accent-soft);
  animation: ask-pulse 1.7s ease-in-out infinite;
}
#usage-ask-btn.waiting .ask-dot { background: var(--warn); box-shadow: 0 0 0 3px rgba(154, 106, 18, .16); }
@keyframes ask-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.72); opacity: .55; } }

/* the dock: persistent ask cards on top, transient notes beneath */
.ask-dock {
  position: fixed; right: 20px; bottom: 20px; z-index: 60;
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
  width: min(360px, calc(100vw - 32px)); pointer-events: none;
}
.ask-dock > * { pointer-events: auto; }
.ask-card {
  width: 100%;
  background: var(--glass-2); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid var(--line); border-radius: 16px; padding: 13px 14px 12px;
  box-shadow: var(--shadow-lift), inset 0 1px 0 rgba(255, 255, 255, .9);
  animation: ask-card-in .38s var(--ease-spring) both;
}
.ask-card.out { animation: ask-card-out .28s var(--ease-out) forwards; pointer-events: none; }
@keyframes ask-card-in { from { opacity: 0; transform: translateY(14px) scale(.96); } }
@keyframes ask-card-out { to { opacity: 0; transform: translateX(18px) scale(.97); } }
.ask-line { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--ink); }
.ask-line b { font-weight: 700; }
.ask-note-text { margin: 5px 0 0; font-size: 12.5px; color: var(--muted); font-style: italic; }
.ask-when { margin: 5px 0 0; font-size: 11.5px; color: var(--muted); }
.ask-actions { display: flex; justify-content: flex-end; gap: 6px; margin-top: 10px; }
.ask-actions .btn { padding: 5px 13px; font-size: 12.5px; }
/* a suggested message waiting on me — the ask card, with three ways out */
/* the clay is Claude's, not the cockpit's — spelled out, since the dock sits
   outside the chat panel where those variables live */
.sug-card { border-left: 3px solid #D97757; }
.sug-card .ask-actions .btn.primary { background: #D97757; border-color: #D97757; box-shadow: 0 2px 10px rgba(217, 119, 87, .32); }
.sug-card .ask-actions .btn.primary:hover { background: #C4613F; border-color: #C4613F; }
.ask-dock .hist-toast { max-width: 100%; border-radius: 14px; align-items: flex-start; padding-top: 7px; padding-bottom: 7px; }
.ask-dock .hist-toast .hist-mark { margin-top: 5px; }
.ask-dock .hist-toast .hist-text { white-space: normal; line-height: 1.4; }

/* the strip in the Claude panel: glides open when a share applies to me */
.share-strip { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .32s var(--ease-out); }
.share-strip.open { grid-template-rows: 1fr; }
.share-strip-in { overflow: hidden; min-height: 0; }
.share-row {
  display: flex; align-items: center; gap: 8px; padding: 7px 12px 7px 13px;
  font-size: 12px; line-height: 1.35; color: var(--cl-ink);
  background: var(--clay-soft); border-bottom: 1px solid var(--cl-line);
  animation: share-row-in .3s var(--ease-out) both;
}
/* both kinds of row wear the share's colour: a tint behind, the dot and the meter in it */
.share-row.borrow, .share-row.lend { background: color-mix(in srgb, var(--tone, #F2C94C) 20%, transparent); }
.share-row.borrow .share-mark, .share-row.lend .share-mark { background: var(--tone, #F2C94C); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tone, #F2C94C) 30%, transparent); }
@keyframes share-row-in { from { opacity: 0; transform: translateY(-4px); } }
.share-mark { width: 7px; height: 7px; border-radius: 50%; background: var(--clay); flex: none; box-shadow: 0 0 0 3px rgba(217, 119, 87, .18); }
.share-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.share-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.share-text b { font-weight: 700; }
.share-meter-row { display: flex; align-items: center; gap: 7px; }
.share-sub { color: var(--cl-muted); font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.share-meter { width: 44px; height: 4px; border-radius: 2px; background: rgba(20, 20, 19, .12); overflow: hidden; flex: none; }
.share-meter i { display: block; height: 100%; width: 0; background: var(--clay); transition: width .55s var(--ease-out); }
.share-row.borrow .share-meter i, .share-row.lend .share-meter i { background: var(--tone, #F2C94C); }
.share-row .btn.tiny { flex: none; align-self: center; }
body.mb-full .share-row { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .12); color: #EAF0FF; }
body.mb-full .share-row .share-sub { color: rgba(234, 240, 255, .7); }
body.mb-full .share-meter { background: rgba(255, 255, 255, .18); }

/* the request modal */
.modal.ask-modal { max-width: 440px; }
.ask-mine {
  font-size: 12.5px; color: var(--muted); margin: -6px 0 14px; padding: 8px 12px;
  border: 1px solid var(--line-soft); border-radius: 10px; background: var(--raised);
}
.ask-sec { transition: opacity .2s var(--ease-out); }
.ask-sec.dim { opacity: 0; }
.ask-team { display: grid; gap: 6px; max-height: 210px; overflow: auto; margin-bottom: 14px; }
.ask-person {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; width: 100%;
  font: inherit; color: var(--ink); text-align: left; cursor: pointer;
  background: var(--glass-2); border: 1px solid var(--line); border-radius: 12px;
  transition: border-color .16s var(--ease-out), background .16s var(--ease-out), transform .32s var(--ease-spring);
}
.ask-person:hover { border-color: rgba(76, 99, 230, .45); background: #FFFFFF; }
.ask-person:active { transform: scale(.985); transition-duration: .06s; }
.ask-person[aria-selected="true"] { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent) inset; }
.ask-on { width: 8px; height: 8px; border-radius: 50%; background: rgba(24, 33, 66, .22); flex: none; }
.ask-on.is-on { background: var(--ok); box-shadow: 0 0 0 3px rgba(14, 138, 95, .16); }
.ask-pname { font-weight: 600; }
.ask-pmail { margin-left: auto; font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ask-empty { font-size: 12.5px; color: var(--muted); margin: 0 0 6px; }
.ask-pcts { display: flex; gap: 6px; margin-bottom: 8px; }
.ask-pct {
  font: 600 12px var(--sans); color: var(--ink); background: var(--glass-2); border: 1px solid var(--line);
  border-radius: 999px; padding: 4px 12px; cursor: pointer;
  transition: background .16s var(--ease-out), border-color .16s var(--ease-out), color .16s var(--ease-out), transform .32s var(--ease-spring);
}
.ask-pct:hover { border-color: rgba(76, 99, 230, .45); background: #FFFFFF; }
.ask-pct:active { transform: scale(.94); transition-duration: .06s; }
.ask-pct.on { background: var(--cta-grad); color: var(--on-cta); border-color: transparent; box-shadow: 0 2px 10px rgba(76, 99, 230, .3); }
.ask-range-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.ask-range-row input[type="range"] {
  flex: 1; -webkit-appearance: none; appearance: none; height: 6px; border-radius: 3px; margin: 0; cursor: pointer;
  background: linear-gradient(90deg, var(--accent) var(--p, 10%), rgba(24, 33, 66, .14) var(--p, 10%));
}
.ask-range-row input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 18px; height: 18px; margin-top: -6px; border-radius: 50%; background: #FFFFFF;
  border: 1px solid var(--line); box-shadow: var(--shadow-rest); transition: transform .32s var(--ease-spring);
}
.ask-range-row input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.12); }
.ask-range-val { font-variant-numeric: tabular-nums; min-width: 40px; text-align: right; font-size: 14px; }
.ask-note {
  width: 100%; font: inherit; color: var(--ink); padding: 8px 12px;
  background: rgba(255, 255, 255, .7); border: 1px solid var(--line); border-radius: 10px;
  transition: border-color .16s var(--ease-out), box-shadow .16s var(--ease-out);
}
.ask-note:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.ask-err {
  margin: 8px 0 0; font-size: 12.5px; color: var(--danger-ink);
  max-height: 0; opacity: 0; overflow: hidden; transition: max-height .25s var(--ease-out), opacity .2s var(--ease-out);
}
.ask-err.show { max-height: 60px; opacity: 1; }
.ask-status { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--glass-2); }
.ask-status .share-mark { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.ask-status.waiting .share-mark { background: var(--warn); box-shadow: 0 0 0 3px rgba(154, 106, 18, .16); animation: ask-pulse 1.7s ease-in-out infinite; }
.ask-status-body { flex: 1; min-width: 0; font-size: 13px; line-height: 1.45; }
.ask-status-body b { font-weight: 700; }
.ask-status-body small { display: block; color: var(--muted); font-size: 12px; }
.ask-status .share-meter { width: 100%; height: 5px; margin-top: 7px; background: rgba(24, 33, 66, .12); }
.ask-status .share-meter i { background: var(--accent); }

@media (max-width: 640px) {
  .ask-dock { right: 12px; left: 12px; bottom: 12px; width: auto; align-items: stretch; }
  #usage-ask-btn .hl { display: none; }
  #usage-ask-btn { padding: 7px 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .ask-dot, .ask-status.waiting .share-mark { animation: none; }
  .ask-card, .ask-card.out, .share-row { animation-duration: .01s; }
  .share-strip, .sug-bar, .share-meter i, .ask-sec, .ask-err, .ctabs-glide, .ctabs-chev, .comp-send-more { transition-duration: .01s; }
  .msg.user.sug.flash { animation: none; }
  .ctabs-busy i { animation: none; }
}
#usage-ask-btn .hl.fading { opacity: 0; }

/* ==================== client review (launch page) ====================
   A second pane on the launch page: the client share card, the shares
   themselves, and every comment a client has left — each one a step away from
   Claude. The notification badge rides on the Launch button in the topbar and
   on the pane's tab; it scales in rather than appearing. */
.nbadge {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 2px;
  border-radius: 999px; font: 700 10.5px var(--sans); letter-spacing: 0;
  background: var(--accent); color: #fff; box-shadow: 0 0 0 2px rgba(255, 255, 255, .9), 0 2px 10px rgba(76, 99, 230, .45);
  transform: scale(0); opacity: 0; width: 0; min-width: 0; padding: 0; margin-left: -4px; overflow: hidden;
  transition: transform .35s var(--ease-spring), opacity .2s var(--ease-out), min-width .3s var(--ease-out), padding .3s var(--ease-out), margin-left .3s var(--ease-out);
}
.nbadge.show { transform: none; opacity: 1; min-width: 18px; width: auto; padding: 0 5px; margin-left: 2px; }
.nbadge.show.fresh { animation: nbadge-pop .6s var(--ease-spring); }
@keyframes nbadge-pop { 40% { transform: scale(1.25); } }
.btn.primary .nbadge { background: #fff; color: var(--accent-deep); box-shadow: 0 0 0 2px rgba(76, 99, 230, .5); }
.launch-tabs { display: inline-flex; margin-bottom: 20px; }
.launch-tabs .btn { padding: 6px 14px; }
.launch-pane { animation: view-in .34s var(--ease-out); }

/* the share card and its create form */
.share-card { margin-top: 0; }
.share-card em { font-style: normal; color: var(--ink); font-weight: 600; }
.share-card b + span b { font-weight: 600; color: var(--ink); }
.share-new { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; margin: 0; }
.share-new input {
  width: 250px; max-width: 100%; padding: 10px 14px; font: 500 13px var(--sans);
  background: rgba(255, 255, 255, .8); color: inherit; border: 1px solid var(--line-soft); border-radius: 999px;
  transition: border-color .16s var(--ease-out), box-shadow .16s var(--ease-out);
}
.share-new input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
#share-create.working { opacity: .75; animation: pulse 1.4s ease-in-out infinite; }

/* one share: the link, its version, its counts, and everything the client said */
.share-list { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.share-row {
  background: var(--glass); border: 1px solid var(--line-soft); border-radius: 16px;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: var(--shadow-rest);
  padding: 16px 20px 18px; animation: view-in .34s var(--ease-out);
  transition: border-color .25s var(--ease-out), box-shadow .25s var(--ease-out), opacity .3s var(--ease-out), transform .3s var(--ease-out);
}
.share-row.settled { animation: none; }
.share-row.leaving { opacity: 0; transform: translateY(6px) scale(.985); pointer-events: none; }
.share-row.has-new { border-color: rgba(76, 99, 230, .4); box-shadow: 0 0 26px rgba(76, 99, 230, .14), var(--shadow-rest); }
.share-head { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.share-head > div:first-child { flex: 1; min-width: 240px; }
.share-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.share-title b { font: 700 15px var(--display); }
.share-meta { color: var(--muted); font-size: 12px; margin-top: 3px; line-height: 1.5; }
.share-meta code { font: 500 11px var(--mono); background: rgba(24, 33, 66, .07); padding: 1px 6px; border-radius: 6px; }
.share-link {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; max-width: 100%;
  font: 500 12px var(--mono); color: var(--accent-deep); background: rgba(255, 255, 255, .7);
  border: 1px solid var(--line-soft); border-radius: 999px; padding: 5px 6px 5px 12px;
}
.share-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46ch; }
.share-link .btn { padding: 4px 10px; font-size: 11px; }
.share-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.share-actions .btn { font-size: 12px; padding: 6px 13px; }
.share-counts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.share-counts .pill { text-transform: none; letter-spacing: 0; }

/* the comments, grouped by the round they were submitted in */
.review-groups { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.review-group-title {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 8px 2px 2px;
  font: 700 10.5px var(--sans); letter-spacing: .11em; text-transform: uppercase; color: var(--muted);
}
.review-group-title .pill { font-size: 9.5px; padding: 1px 8px; }
.review-group-title .btn { margin-left: auto; font-size: 11.5px; padding: 4px 12px; letter-spacing: 0; text-transform: none; }
.review-group-title.drafts { opacity: .8; }
.rcomment {
  display: grid; grid-template-columns: 26px 1fr; gap: 4px 12px; align-items: start;
  padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line-soft); background: rgba(255, 255, 255, .55);
  animation: view-in .3s var(--ease-out);
  transition: border-color .16s var(--ease-out), background .16s var(--ease-out), opacity .3s var(--ease-out);
}
.rcomment.settled { animation: none; }
.rcomment > :not(.rc-num) { grid-column: 2; min-width: 0; }
.rcomment .btn { white-space: nowrap; }
.share-row { display: block; }
.share-card strong { font-weight: 600; color: var(--ink); }
.rcomment:hover { border-color: var(--line); background: rgba(255, 255, 255, .85); }
.rcomment.is-done { opacity: .62; }
.rcomment.is-done:hover { opacity: 1; }
.rcomment.is-draft { border-style: dashed; }
.rc-num {
  grid-row: 1 / span 3; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ink, var(--accent)); color: #fff; font: 700 11.5px var(--sans); margin-top: 1px;
}
.rcomment.is-done .rc-num { background: var(--ok); }
.rcomment.is-fixing .rc-num { animation: pulse 1.4s ease-in-out infinite; box-shadow: 0 0 12px rgba(76, 99, 230, .55); }
.rc-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; }
.rc-head b { font-weight: 600; }
.rc-head time { color: var(--muted); font-size: 11.5px; }
.rc-where { color: var(--muted); font-size: 11.5px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rc-where .a-page { font-family: var(--mono); font-size: 11px; background: rgba(24, 33, 66, .07); padding: 1px 7px; border-radius: 6px; color: var(--accent-deep); }
.rc-where svg { width: 12px; height: 12px; }
.rc-text { margin: 4px 0 0; font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.rc-text.muted { color: var(--muted); font-style: italic; }
.rc-replies { display: flex; flex-direction: column; gap: 5px; margin-top: 8px; }
.rc-reply { font-size: 12.5px; line-height: 1.45; padding: 6px 10px; border-radius: 10px; background: rgba(24, 33, 66, .05); white-space: pre-wrap; word-break: break-word; }
.rc-reply.team { background: var(--accent-soft); }
.rc-reply.team b { color: var(--accent-deep); }
.rc-reply b { font-weight: 600; font-size: 12px; }
.rc-reply .rc-when { color: var(--muted); font-size: 11px; margin-left: 6px; }
.rc-status { margin-left: auto; font: 700 9.5px var(--sans); letter-spacing: .1em; text-transform: uppercase; border: 1px solid var(--line-soft); border-radius: 999px; padding: 2px 8px; color: var(--muted); white-space: nowrap; }
.rc-status.done { color: var(--ok); border-color: rgba(14, 138, 95, .4); background: rgba(14, 138, 95, .07); }
.rc-status.fixing { color: var(--accent-deep); border-color: rgba(76, 99, 230, .45); background: var(--accent-soft); animation: pulse 1.4s ease-in-out infinite; }
.rc-status.fixed { color: var(--accent-deep); border-color: rgba(76, 99, 230, .45); background: var(--accent-soft); }
.rc-status.draft { color: var(--warn); border-color: rgba(154, 106, 18, .4); background: rgba(154, 106, 18, .07); }
.rc-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.rc-actions .btn { font-size: 11.5px; padding: 5px 12px; }
.rc-actions .fix-note { flex-basis: 100%; }
.rc-reply-form { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s var(--ease-out); }
.rc-reply-form.open { grid-template-rows: 1fr; }
.rc-reply-form > div { overflow: hidden; display: flex; gap: 6px; align-items: flex-start; }
.rc-reply-form textarea {
  flex: 1; margin-top: 8px; min-height: 36px; resize: none; font: 13px/1.45 var(--sans); color: var(--ink);
  background: rgba(255, 255, 255, .85); border: 1px solid var(--line-soft); border-radius: 10px; padding: 7px 10px;
}
.rc-reply-form textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.rc-reply-form .btn { margin-top: 8px; }
@media (max-width: 640px) {
  .share-new { justify-content: stretch; }
  .share-new input { width: 100%; }
  .share-link span { max-width: 26ch; }
}

/* ---- the create form: what the client gets, which pages, then the label ---- */
.share-card { flex-direction: column; align-items: stretch; }
.share-form { display: flex; flex-direction: column; gap: 14px; margin: 0; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.share-row-opts { display: flex; flex-direction: column; gap: 8px; }
.share-row-opts .lab { display: flex; align-items: center; gap: 6px; }
.share-row-opts .lab .linkish { font: 600 11px var(--sans); letter-spacing: 0; text-transform: none; color: var(--accent-deep); }
.share-row-opts .lab .linkish:hover { color: var(--accent); }
.share-mode { align-self: flex-start; }
.share-mode label { cursor: pointer; }
.share-mode input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.share-mode-hint { color: var(--muted); font-size: 12.5px; line-height: 1.5; max-width: 62ch; }
.share-mode-hint strong { font-weight: 600; color: var(--ink); }
.share-pages { display: flex; flex-wrap: wrap; gap: 6px; }
.share-page {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer; user-select: none;
  font: 500 12.5px var(--mono); color: var(--accent-deep);
  background: rgba(255, 255, 255, .75); border: 1px solid var(--line-soft); border-radius: 999px; padding: 4px 11px 4px 8px;
  transition: border-color .16s var(--ease-out), background .16s var(--ease-out), color .16s var(--ease-out), opacity .2s var(--ease-out), transform .3s var(--ease-spring);
}
.share-page:hover { border-color: rgba(76, 99, 230, .45); background: #fff; }
.share-page:active { transform: scale(.97); transition-duration: .06s; }
.share-page input { accent-color: var(--accent); width: 14px; height: 14px; margin: 0; cursor: pointer; }
.share-page.off { color: var(--muted); background: transparent; opacity: .75; text-decoration: line-through; text-decoration-color: rgba(24, 33, 66, .35); }
.share-go { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.share-go input {
  flex: 1; min-width: 220px; padding: 10px 14px; font: 500 13px var(--sans);
  background: rgba(255, 255, 255, .8); color: inherit; border: 1px solid var(--line-soft); border-radius: 999px;
  transition: border-color .16s var(--ease-out), box-shadow .16s var(--ease-out);
}
.share-go input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.share-foot { text-align: left; }
.share-title .pill.mode-view { color: var(--muted); }
.share-title .pill.mode-review { color: var(--accent-deep); border-color: rgba(76, 99, 230, .4); }

/* ---- the Section Library — the topbar's Sections button ----
   A rail of whole sections (the carousel first) and, beside it, the chosen
   one's builder: pictures dropped in, the crop tool, motion and size, and a
   live preview of the real markup that is dragged onto the page. Same glass
   as the other popovers, opened on the spring so it lands rather than appears;
   every state change in here glides or bounces — nothing snaps. */
.sec-btn svg { width: 14px; height: 14px; }
.sec-btn.on { background: var(--accent-soft); border-color: rgba(76, 99, 230, .45); color: var(--accent-deep); }
/* on a laptop the bar is full: the button keeps its icon and gives up its
   word, a square the height of its neighbours with the icon dead centre */
@media (max-width: 1600px) {
  .sec-btn { padding: 0; width: 33px; height: 33px; justify-content: center; }
  .sec-btn svg { width: 15px; height: 15px; }
  .sec-btn .sec-lab { display: none; }
  /* …and Open, the other secondary, does the same so the bar stays one row on a 1440 screen */
  #ed-open { padding: 0; width: 33px; height: 33px; justify-content: center; font-size: 0; }
  #ed-open svg { width: 15px; height: 15px; }
}
.sec-pop {
  position: fixed; z-index: 89; width: min(640px, calc(100vw - 24px)); max-height: min(78vh, 720px);
  display: none; grid-template-columns: 148px minmax(0, 1fr);
  background: rgba(255, 255, 255, .93); border: 1px solid var(--line); border-radius: 18px; overflow: hidden;
  box-shadow: 0 18px 50px rgba(24, 33, 66, .18), 0 4px 14px rgba(24, 33, 66, .1);
  backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4);
  transform-origin: top left;
  transition: opacity .22s var(--ease-out), transform .3s var(--ease-spring);
}
.sec-pop.open { display: grid; animation: sec-in .42s var(--ease-spring); }
.sec-pop.closing { display: grid; animation: sec-out .18s var(--ease-out) forwards; pointer-events: none; }
@keyframes sec-in { from { opacity: 0; transform: translateY(-10px) scale(.94); } }
@keyframes sec-out { to { opacity: 0; transform: translateY(-6px) scale(.97); } }
/* while its preview is being dragged the popover steps back so the page is the subject */
.sec-pop.dragging { opacity: .28; transform: scale(.975); pointer-events: none; }

.sec-rail { display: flex; flex-direction: column; gap: 3px; padding: 14px 10px; border-right: 1px solid var(--line-soft); background: rgba(24, 33, 66, .03); }
.sec-rail-lab { font: 700 10.5px var(--sans); letter-spacing: .11em; text-transform: uppercase; color: var(--muted); margin: 0 6px 10px; }
.sec-item {
  display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 10px; border-radius: 11px; cursor: pointer; text-align: left;
  font: 600 13px var(--sans); color: var(--ink); background: transparent; border: 1px solid transparent;
  transition: background .16s var(--ease-out), color .16s var(--ease-out), transform .32s var(--ease-spring), box-shadow .32s var(--ease-out);
}
.sec-item svg { width: 16px; height: 16px; flex: none; color: var(--muted); transition: color .16s var(--ease-out), transform .32s var(--ease-spring); }
.sec-item:hover { background: rgba(255, 255, 255, .85); transform: translateX(2px); box-shadow: var(--shadow-rest); }
.sec-item:hover svg { transform: scale(1.08); }
.sec-item:active { transform: scale(.96); transition-duration: .06s; }
.sec-item.active, .sec-item.active:hover { background: var(--accent-soft); border-color: rgba(76, 99, 230, .35); color: var(--accent-deep); transform: none; box-shadow: none; }
.sec-item.active svg { color: var(--accent-deep); }

.sec-pane { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px 14px; min-width: 0; min-height: 0; overflow-y: auto; }
.sec-head { display: flex; flex-direction: column; gap: 3px; padding-bottom: 10px; border-bottom: 1px solid var(--line-soft); }
.sec-head b { font: 700 10.5px var(--sans); letter-spacing: .11em; text-transform: uppercase; color: var(--muted); }
.sec-head span { font-size: 12px; line-height: 1.45; color: var(--muted); }

/* the drop zone — the dashes tighten and the whole thing lifts when files are held over it */
.sec-drop {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 13px 14px; cursor: pointer; outline: none;
  border: 1.5px dashed rgba(24, 33, 66, .22); border-radius: 14px; background: rgba(255, 255, 255, .55);
  transition: border-color .2s var(--ease-out), background .2s var(--ease-out), transform .38s var(--ease-spring), box-shadow .3s var(--ease-out);
}
.sec-drop:hover, .sec-drop:focus-visible { border-color: rgba(76, 99, 230, .5); background: rgba(255, 255, 255, .85); transform: translateY(-1px); box-shadow: var(--shadow-rest); }
.sec-drop:active { transform: scale(.985); transition-duration: .06s; }
.sec-drop.over { border-color: var(--accent); border-style: solid; background: var(--accent-soft); transform: scale(1.02); box-shadow: 0 0 0 4px rgba(76, 99, 230, .12), var(--shadow-lift); }
.sec-drop-ic {
  display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 11px;
  background: var(--accent-soft); color: var(--accent-deep);
  transition: transform .4s var(--ease-spring), background .2s var(--ease-out);
}
.sec-drop-ic svg { width: 20px; height: 20px; }
.sec-drop:hover .sec-drop-ic { transform: rotate(-4deg) scale(1.06); }
.sec-drop.over .sec-drop-ic { animation: sec-bob .7s var(--ease-spring) infinite alternate; background: var(--cta-grad); color: var(--on-cta); }
@keyframes sec-bob { to { transform: translateY(-4px) scale(1.08); } }
.sec-drop-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sec-drop-txt b { font: 700 13px var(--sans); color: var(--ink); }
.sec-drop-txt span { font-size: 12px; color: var(--muted); }
.sec-drop-txt u { text-decoration-color: rgba(76, 99, 230, .5); text-underline-offset: 2px; color: var(--accent-deep); }
.sec-drop.busy { pointer-events: none; }

/* options row: the crop tool switch, then motion and size segments */
.sec-opts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sec-switch { display: flex; align-items: center; gap: 9px; cursor: pointer; flex: 1; min-width: 200px; user-select: none; }
.sec-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
/* ---- Change: swapping what is already there ----
   The row at the top of a library when something is selected. On, a card
   replaces the selection rather than landing beside it — so it says which
   thing it would change, and glides in and out rather than appearing. */
.pal-change {
  display: flex; align-items: center; gap: 10px; width: 100%; margin-bottom: 8px; padding: 8px 10px 8px 8px;
  text-align: left; cursor: pointer; border: 1px solid var(--line-soft); border-radius: 12px;
  background: var(--glass-2); color: var(--ink); box-shadow: var(--shadow-rest);
  animation: menu-row-in .4s var(--ease-spring) both;
  transition: transform .32s var(--ease-spring), box-shadow .32s var(--ease-out), border-color .16s var(--ease-out), background .16s var(--ease-out);
}
.pal-change:hover { transform: translateY(-1px); box-shadow: var(--shadow-lift); border-color: rgba(76, 99, 230, .35); background: #fff; }
.pal-change:active { transform: scale(.985); transition-duration: .06s; }
.pal-change[aria-pressed="true"] { border-color: rgba(76, 99, 230, .45); background: var(--accent-soft); }
.pal-change .pc-ic { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 9px; background: var(--accent-soft); color: var(--accent-deep); transition: transform .34s var(--ease-spring), background .16s var(--ease-out), color .16s var(--ease-out); }
.pal-change .pc-ic svg { width: 15px; height: 15px; }
.pal-change[aria-pressed="true"] .pc-ic { background: var(--cta-grad); color: var(--on-cta); transform: rotate(180deg); }
.pal-change .pc-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pal-change .pc-txt b { font: 700 12.5px var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pal-change .pc-txt span { font-size: 11px; line-height: 1.35; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pal-change .sw {
  position: relative; flex: none; width: 34px; height: 20px; border-radius: 999px;
  background: rgba(24, 33, 66, .18); box-shadow: inset 0 1px 3px rgba(24, 33, 66, .18);
  transition: background .22s var(--ease-out), box-shadow .22s var(--ease-out);
}
.pal-change .sw-knob {
  position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(24, 33, 66, .3); transition: transform .28s var(--ease-spring);
}
.pal-change[aria-pressed="true"] .sw { background: var(--cta-grad); box-shadow: 0 0 0 3px rgba(76, 99, 230, .14), inset 0 1px 0 rgba(255, 255, 255, .35); }
.pal-change[aria-pressed="true"] .sw-knob { transform: translateX(14px); }
/* while Change is on the cards are the thing that swaps, not the thing you drag */
.inspector.changing #add-palette .blk { cursor: pointer; }
.inspector.changing #add-palette .blk.armed { box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .pal-change { animation: none; } }

.sec-switch .sw {
  position: relative; flex: none; width: 34px; height: 20px; border-radius: 999px;
  background: rgba(24, 33, 66, .18); box-shadow: inset 0 1px 3px rgba(24, 33, 66, .18);
  transition: background .22s var(--ease-out), box-shadow .22s var(--ease-out);
}
.sec-switch .sw-knob {
  position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(24, 33, 66, .3);
  transition: transform .38s var(--ease-spring), width .2s var(--ease-out);
}
.sec-switch:active .sw-knob { width: 20px; }
.sec-switch input:checked + .sw { background: var(--cta-grad); box-shadow: 0 0 0 3px rgba(76, 99, 230, .14), inset 0 1px 0 rgba(255, 255, 255, .35); }
.sec-switch input:checked + .sw .sw-knob { transform: translateX(14px); }
.sec-switch input:checked:active + .sw .sw-knob { transform: translateX(10px); }
.sec-switch input:focus-visible + .sw { outline: 2px solid var(--accent); outline-offset: 2px; }
.sec-switch-txt { display: flex; flex-direction: column; min-width: 0; }
.sec-switch-txt b { font: 700 12.5px var(--sans); color: var(--ink); }
.sec-switch-txt span { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sec-seg {
  display: flex; gap: 2px; padding: 3px; border-radius: 999px; flex: none;
  background: rgba(24, 33, 66, .06); border: 1px solid var(--line-soft); box-shadow: inset 0 2px 6px rgba(24, 33, 66, .08);
}
.sec-seg button {
  padding: 4px 11px; border: 1px solid transparent; border-radius: 999px; cursor: pointer;
  font: 600 12px var(--sans); color: var(--ink); background: transparent; min-width: 30px;
  transition: background .16s var(--ease-out), color .16s var(--ease-out), transform .32s var(--ease-spring), box-shadow .32s var(--ease-out);
}
.sec-seg button:hover { background: rgba(255, 255, 255, .85); }
.sec-seg button:active { transform: scale(.92); transition-duration: .06s; }
.sec-seg button.active { background: var(--accent-soft); border-color: rgba(76, 99, 230, .45); color: var(--accent-deep); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 0 14px rgba(76, 99, 230, .14); }
.sec-title { width: 100%; padding: 8px 12px; font-size: 12.5px; border-radius: 10px; }

/* the pictures: each lands on the spring, shimmers while the crop tool works,
   and folds away when removed */
.sec-thumbs { display: flex; flex-wrap: wrap; gap: 8px; min-height: 0; }
.sec-thumbs:empty { display: none; }
.sec-thumb {
  position: relative; width: 66px; height: 66px; border-radius: 12px; overflow: hidden; flex: none;
  border: 1px solid var(--line); box-shadow: var(--shadow-rest);
  background:
    linear-gradient(45deg, rgba(24, 33, 66, .07) 25%, transparent 25%, transparent 75%, rgba(24, 33, 66, .07) 75%) 0 0 / 12px 12px,
    linear-gradient(45deg, rgba(24, 33, 66, .07) 25%, transparent 25%, transparent 75%, rgba(24, 33, 66, .07) 75%) 6px 6px / 12px 12px, #fff;
  animation: sec-thumb-in .55s var(--ease-spring) both;
  transition: transform .32s var(--ease-spring), box-shadow .32s var(--ease-out), opacity .22s var(--ease-out), width .3s var(--ease-out), margin .3s var(--ease-out), border-color .2s var(--ease-out);
}
@keyframes sec-thumb-in { from { opacity: 0; transform: scale(.6) translateY(8px); } }
.sec-thumb:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); z-index: 1; }
.sec-thumb.out { opacity: 0; transform: scale(.6); width: 0; margin-right: -8px; border-color: transparent; pointer-events: none; }
.sec-thumb img { display: block; width: 100%; height: 100%; object-fit: contain; padding: 6px; box-sizing: border-box; transition: opacity .3s var(--ease-out), transform .4s var(--ease-spring); }
.sec-thumb.processing img { opacity: .35; transform: scale(.94); }
.sec-thumb.processing::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .75) 50%, transparent 70%) -66px 0 / 200% 100% no-repeat;
  animation: sec-shimmer 1.1s var(--ease-out) infinite;
}
@keyframes sec-shimmer { to { background-position: 66px 0; } }
.sec-thumb.error { border-color: var(--danger-line); }
.sec-thumb .sec-x, .sec-thumb .sec-fix {
  position: absolute; display: grid; place-items: center; padding: 0; border: 0; cursor: pointer;
  opacity: 0; transform: scale(.6);
  transition: opacity .16s var(--ease-out), transform .32s var(--ease-spring), background .16s var(--ease-out);
}
.sec-thumb .sec-x {
  top: 3px; right: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: rgba(24, 33, 66, .78); color: #fff;
}
.sec-thumb .sec-x svg { width: 9px; height: 9px; }
.sec-thumb .sec-fix {
  left: 3px; right: 3px; bottom: 3px; height: 18px; border-radius: 999px;
  font: 700 9.5px var(--sans); letter-spacing: .02em; white-space: nowrap;
  background: rgba(255, 255, 255, .92); color: var(--accent-deep); box-shadow: 0 1px 4px rgba(24, 33, 66, .18);
}
.sec-thumb:hover .sec-x, .sec-thumb:hover .sec-fix, .sec-thumb:focus-within .sec-x, .sec-thumb:focus-within .sec-fix { opacity: 1; transform: none; }
.sec-thumb .sec-x:hover { background: var(--danger); }
.sec-thumb .sec-fix:hover { background: var(--accent-soft); }
.sec-thumb .sec-x:active, .sec-thumb .sec-fix:active { transform: scale(.9); transition-duration: .06s; }
.sec-thumb.processing .sec-fix { display: none; }
.sec-badge {
  position: absolute; left: 4px; top: 4px; padding: 1px 6px; border-radius: 999px; pointer-events: none;
  font: 700 8.5px var(--sans); letter-spacing: .06em; text-transform: uppercase;
  background: rgba(255, 255, 255, .92); color: var(--muted); box-shadow: 0 1px 3px rgba(24, 33, 66, .14);
  animation: sec-badge-in .5s var(--ease-spring) both;
}
.sec-badge.cleaned { color: var(--ok); }
@keyframes sec-badge-in { from { opacity: 0; transform: scale(.5); } }

/* the preview: the real section, rendered at 1100px and scaled to the card.
   It is the thing you pick up — the grip label says so, the cursor agrees. */
.sec-prev {
  position: relative; height: 150px; border-radius: 14px; overflow: hidden; cursor: grab; user-select: none; -webkit-user-select: none; touch-action: none;
  border: 1px solid var(--line); background: #fff; box-shadow: var(--shadow-rest);
  transition: transform .34s var(--ease-spring), box-shadow .32s var(--ease-out), border-color .2s var(--ease-out), opacity .2s var(--ease-out);
}
.sec-prev.has { border-color: rgba(76, 99, 230, .35); }
.sec-prev.has:hover { transform: translateY(-2px) scale(1.008); box-shadow: var(--shadow-lift); }
.sec-prev.has:active, .sec-prev.lifted { cursor: grabbing; transform: scale(.985); box-shadow: var(--shadow-rest); transition-duration: .08s; }
.sec-prev.lifted { opacity: .45; }
.sec-prev iframe {
  position: absolute; left: 0; top: 0; width: 1100px; height: 300px; border: 0; pointer-events: none; background: #fff;
  transform-origin: 0 0; transform: scale(var(--s, .4)); opacity: 0; transition: opacity .3s var(--ease-out);
}
.sec-prev.has iframe { opacity: 1; }
.sec-prev-empty {
  position: absolute; inset: 0; display: grid; place-items: center; padding: 20px; text-align: center;
  font-size: 12px; color: var(--muted); transition: opacity .2s var(--ease-out);
}
.sec-prev.has .sec-prev-empty { opacity: 0; pointer-events: none; }
.sec-grab {
  position: absolute; left: 50%; bottom: 8px; transform: translate(-50%, 6px); opacity: 0;
  display: flex; align-items: center; gap: 4px; padding: 3px 9px 3px 5px; border-radius: 999px; pointer-events: none;
  font: 700 10.5px var(--sans); letter-spacing: .03em; color: var(--accent-deep);
  background: rgba(255, 255, 255, .92); border: 1px solid rgba(76, 99, 230, .3); box-shadow: 0 2px 8px rgba(24, 33, 66, .14);
  transition: opacity .2s var(--ease-out), transform .38s var(--ease-spring);
}
.sec-grab svg { width: 12px; height: 12px; }
.sec-prev.has:hover .sec-grab { opacity: 1; transform: translate(-50%, 0); }
.sec-foot { display: flex; align-items: center; gap: 10px; padding-top: 2px; }
.sec-hint { flex: 1; font-size: 11.5px; line-height: 1.4; color: var(--muted); transition: color .2s var(--ease-out); }
.sec-hint.err { color: var(--danger-ink); }
#sec-add { flex: none; }

/* what rides under the pointer: a small card of the section, tilting a touch
   with the hand's speed. It lands (shrinks into the seam) or springs back. */
.sec-ghost {
  position: fixed; left: 0; top: 0; z-index: 200; width: 270px; height: 74px; pointer-events: none;
  border-radius: 12px; overflow: hidden; background: #fff; border: 1px solid rgba(76, 99, 230, .45);
  box-shadow: 0 18px 44px rgba(24, 33, 66, .26), 0 0 0 4px rgba(76, 99, 230, .14);
  transform-origin: center; will-change: transform;
  transition: transform .09s linear, opacity .18s var(--ease-out);
  animation: sec-ghost-in .3s var(--ease-spring);
}
@keyframes sec-ghost-in { from { opacity: 0; scale: .7; } }
.sec-ghost[hidden] { display: none; }
.sec-ghost iframe { position: absolute; left: 0; top: 0; width: 1100px; height: 300px; border: 0; pointer-events: none; transform-origin: 0 0; transform: scale(.2455); background: #fff; }
.sec-ghost.over { border-color: var(--accent); box-shadow: 0 22px 50px rgba(24, 33, 66, .3), 0 0 0 5px rgba(76, 99, 230, .22); }
.sec-ghost.land { transition: transform .26s var(--ease-out), opacity .22s var(--ease-out); opacity: 0; }
.sec-ghost.back { transition: transform .5s var(--ease-spring), opacity .25s var(--ease-out) .25s; opacity: 0; }
/* the page is the drop target: its card glows while a section is in the air */
body.sec-dragging { cursor: grabbing; }
body.sec-dragging .device { box-shadow: 0 0 0 3px rgba(76, 99, 230, .28), var(--bloom), 0 16px 48px rgba(24, 33, 66, .16); }
body.sec-dragging .device.sec-over { box-shadow: 0 0 0 4px rgba(76, 99, 230, .5), var(--bloom), 0 16px 48px rgba(24, 33, 66, .16); }
.device { transition: width .3s var(--ease-out), height .3s var(--ease-out), box-shadow .32s var(--ease-out); }
body.mb-full .sec-pop {
  background: rgba(11, 15, 34, .9); border-color: rgba(255, 255, 255, .24); color: #EDF2FF;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 22px 60px rgba(4, 8, 28, .5);
}
body.mb-full .sec-pop .sec-rail { background: rgba(255, 255, 255, .04); }
body.mb-full .sec-item, body.mb-full .sec-drop-txt b, body.mb-full .sec-switch-txt b, body.mb-full .sec-seg button { color: #EDF2FF; }
body.mb-full .sec-drop { background: rgba(255, 255, 255, .06); }
@media (prefers-reduced-motion: reduce) {
  .sec-pop.open, .sec-thumb, .sec-badge, .sec-ghost, .sec-drop.over .sec-drop-ic { animation: none; }
  .sec-thumb.processing::after { animation: none; background: rgba(255, 255, 255, .5); }
}

/* ---- the menu — the right-hand panel's two levels ----
   Level one is a list of doors: what is selected, the section library, each
   element library, page settings. Level two is what you chose. Views slide in
   from the side they came from; the Back button grows into the title row when
   there is somewhere to go back to. */
.menu-back { padding: 0 !important; width: 0; height: 30px; opacity: 0; margin-right: -10px; overflow: hidden; flex: none; justify-content: center;
  transform: translateX(-6px); transition: width .26s var(--ease-out), opacity .2s var(--ease-out), margin .26s var(--ease-out), transform .34s var(--ease-spring); }
.menu-back.show { width: 30px; opacity: 1; margin-right: 0; transform: none; }
.menu-back svg { width: 15px; height: 15px; }
#menu-title { transition: opacity .16s var(--ease-out); }
#menu-title.swap { opacity: 0; }
.menu-view.menu-in { animation: menu-in .34s var(--ease-out) both; }
@keyframes menu-in { from { opacity: 0; transform: translateX(var(--menu-dx, 14px)); } }
.menu-rows { display: flex; flex-direction: column; gap: 6px; padding: 2px 10px 10px; }
.menu-grp { font: 700 10px var(--sans); letter-spacing: .11em; text-transform: uppercase; color: var(--muted); padding: 10px 4px 2px; }
.menu-grp:first-child { padding-top: 2px; }
.menu-row {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 9px 8px 8px; text-align: left; cursor: pointer;
  border: 1px solid var(--line-soft); border-radius: 12px; background: var(--glass-2); color: var(--ink);
  box-shadow: var(--shadow-rest); font: 500 13px var(--sans);
  animation: menu-row-in .46s var(--ease-spring) both; animation-delay: calc(var(--i, 0) * 22ms);
  transition: transform .32s var(--ease-spring), box-shadow .32s var(--ease-out), border-color .16s var(--ease-out), background .16s var(--ease-out);
}
@keyframes menu-row-in { from { opacity: 0; transform: translateY(6px) scale(.98); } }
.menu-row:hover { transform: translateY(-1px); box-shadow: var(--shadow-lift); border-color: rgba(76, 99, 230, .35); background: #fff; }
.menu-row:active { transform: scale(.985); transition-duration: .06s; box-shadow: var(--shadow-rest); }
.menu-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.menu-row.sel { border-color: rgba(76, 99, 230, .45); background: var(--accent-soft); }
.menu-row .mr-ic { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 9px; background: var(--accent-soft); color: var(--accent-deep); transition: transform .34s var(--ease-spring), background .16s var(--ease-out), color .16s var(--ease-out); }
.menu-row .mr-ic svg { width: 15px; height: 15px; }
.menu-row:hover .mr-ic { transform: scale(1.06) rotate(-3deg); }
.menu-row.sel .mr-ic { background: var(--cta-grad); color: var(--on-cta); }
.menu-row .mr-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.menu-row .mr-txt b { font: 700 13px var(--sans); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-row .mr-txt span { font-size: 11px; line-height: 1.35; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-row .mr-n { flex: none; font: 700 10.5px var(--mono); color: var(--muted); background: rgba(24, 33, 66, .06); border-radius: 999px; padding: 2px 7px; }
.menu-row .mr-chev { flex: none; display: grid; place-items: center; color: var(--muted); transition: transform .32s var(--ease-spring), color .16s var(--ease-out); }
.menu-row .mr-chev svg { width: 13px; height: 13px; }
.menu-row:hover .mr-chev { transform: translateX(2px); color: var(--accent-deep); }
.menu-tips-btn[aria-expanded="true"] .mr-chev { transform: rotate(90deg); }
.menu-tips { margin: -4px 0 6px; }
.menu-tips .insp-empty { padding-top: 0; }
/* the library view: the library picker row only matters for a library of your own */
.inspector:not(.lib-user) #add-palette .lib-row { display: none; }
/* a card is picked up, like the section preview */
#add-palette .blk { cursor: grab; touch-action: pan-y; }
#add-palette .blk:active { cursor: grabbing; }
#add-palette .blk.lifted { opacity: .45; transform: scale(.96); }
@media (prefers-reduced-motion: reduce) { .menu-row, .menu-view.menu-in, .design-view.menu-in { animation: none; } .design-pop.morph { transition: none; } }
/* one group of the built-in catalog: the title row already names it */
.inspector.lib-group #add-palette .pal-head .insp-lab, .inspector.lib-group #add-palette .palette-grp { display: none; }

/* ---- Developer — the tools page, and the Element builder's lab panel ----
   The page is the sites page's grid with tools in the cards: one live tool and
   four open slots. The lab panel is the menu's home while the Element builder
   is open — the brief for a new element, then every element built so far with
   its checks and its way into the menu. */
.dev-main { width: 100%; max-width: 1240px; margin: 0 auto; padding: 26px 32px 60px; box-sizing: border-box; }
.dev-main h1 { font: 800 clamp(30px, 4vw, 38px)/1.1 var(--display); letter-spacing: -.02em; margin: 6px 0 4px; }
.dev-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 18px; margin-top: 22px; }
.pcard.tool .pthumb { display: grid; place-items: center; background: linear-gradient(180deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .35)); }
.pcard.tool .tool-ic { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; background: var(--cta-grad); color: var(--on-cta); box-shadow: var(--bloom); transition: transform .4s var(--ease-spring); }
.pcard.tool .tool-ic svg { width: 30px; height: 30px; }
.pcard.tool:hover .tool-ic { transform: translateY(-3px) rotate(-3deg) scale(1.05); }
.pcard.tool .pcard-body p { margin: 4px 0 0; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.pcard.tool .pthumb.live { padding: 0; }
.pcard.tool .pthumb.live iframe { pointer-events: none; }
/* an open slot: the same card, dashed, waiting for its tool */
.pcard.slot { cursor: default; border-style: dashed; background: rgba(255, 255, 255, .3); box-shadow: none; }
.pcard.slot:hover { transform: none; border-color: var(--line); background: rgba(255, 255, 255, .42); box-shadow: none; }
.pcard.slot .pthumb { display: grid; place-items: center; background: transparent; }
.pcard.slot .slot-n { font: 800 44px var(--display); color: rgba(24, 33, 66, .12); letter-spacing: -.04em; }
.pcard.slot h3 { color: var(--muted); }
.pcard.slot .pcard-body p { margin: 4px 0 0; color: var(--muted); font-size: 12.5px; }
/* the site's own top bar, retitled for the lab */
body.dev-lab #ed-launch, body.dev-lab #ed-design, body.dev-lab #ed-audit, body.dev-lab #ed-sections, body.dev-lab #ed-page, body.dev-lab #presence { display: none !important; }
body.dev-lab .ed-name::before { content: 'Developer · '; color: var(--muted); font-weight: 600; }
/* the lab panel */
.lab-form { display: flex; flex-direction: column; gap: 8px; padding: 2px 14px 12px; }
.lab-form select, .lab-form input, .lab-form textarea { width: 100%; }
.lab-form textarea { min-height: 88px; resize: vertical; font: inherit; line-height: 1.45; }
.lab-form .lab-agent-blurb { font-size: 11.5px; color: var(--muted); line-height: 1.45; min-height: 1.4em; margin: -2px 0 2px; transition: opacity .18s var(--ease-out); }
.lab-form .lab-agent-blurb.swap { opacity: 0; }
.lab-form .btn.primary { align-self: flex-start; }
/* references: what the element is built from */
.lab-refs { display: flex; flex-direction: column; gap: 6px; }
.lab-refs-drop {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; cursor: pointer; text-align: left;
  border: 1px dashed var(--line); border-radius: 12px; background: rgba(255, 255, 255, .45);
  transition: border-color .16s var(--ease-out), background .16s var(--ease-out), transform .32s var(--ease-spring);
}
.lab-refs-drop:hover, .lab-refs-drop:focus-visible { border-color: rgba(76, 99, 230, .45); background: #fff; outline: none; }
.lab-refs-drop.dropping { border-color: var(--accent); background: var(--accent-soft); transform: scale(1.01); }
.lab-refs-ic { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: var(--accent-soft); color: var(--accent-deep); }
.lab-refs-ic svg { width: 16px; height: 16px; }
.lab-refs-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.lab-refs-txt b { font: 700 12px var(--sans); color: var(--ink); }
.lab-refs-txt span { font-size: 11px; line-height: 1.4; color: var(--muted); }
.lab-refs-list { display: flex; flex-wrap: wrap; gap: 6px; }
.lab-refs-list:empty { display: none; }
.lab-ref {
  position: relative; width: 64px; height: 48px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line-soft); background: #fff;
  animation: menu-row-in .36s var(--ease-spring) both;
}
.lab-ref img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lab-ref.is-video { display: grid; place-items: center; background: var(--ink); color: #fff; }
.lab-ref.is-video svg { width: 18px; height: 18px; }
.lab-ref .lab-ref-n { position: absolute; left: 4px; bottom: 3px; font: 700 9px var(--mono); color: #fff; background: rgba(24, 33, 66, .7); border-radius: 4px; padding: 1px 4px; }
.lab-ref.uploading { opacity: .55; }
.lab-ref .chip-x { position: absolute; top: 2px; right: 2px; width: 16px; height: 16px; font-size: 9px; padding: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--ink); border: 0; line-height: 16px; cursor: pointer; opacity: 0; transition: opacity .15s var(--ease-out); }
.lab-ref:hover .chip-x, .lab-ref .chip-x:focus-visible { opacity: 1; }
.lab-ref-frames { font: 600 10.5px var(--sans); color: var(--muted); align-self: center; padding: 0 2px; }
/* the menu window over the stage */
.lab-menu-win {
  position: fixed; right: calc(var(--insp-w, 300px) + 16px); bottom: 16px; z-index: 60; width: 320px; max-height: min(70vh, 640px);
  display: flex; flex-direction: column; border-radius: 16px; overflow: hidden;
  background: var(--glass-2); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid var(--line); box-shadow: var(--shadow-lift);
  animation: lab-win-in .34s var(--ease-spring) both;
}
.lab-menu-win[hidden] { display: none; }
@keyframes lab-win-in { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.lab-menu-win-head { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 12px; border-bottom: 1px solid var(--line-soft); }
.lab-menu-win-head b { font: 700 13px var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lab-menu-win-ic { flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 7px; background: var(--accent-soft); color: var(--accent-deep); }
.lab-menu-win-ic svg { width: 14px; height: 14px; }
.lab-menu-win-sub { padding: 8px 12px 0; font-size: 11px; line-height: 1.45; color: var(--muted); }
.lab-menu-win-sub:empty { display: none; }
.lab-menu-win-body { overflow-y: auto; padding: 10px 14px 14px; border-top: 0; }
.lab-menu-win-body .em-grp:first-child { margin-top: 0; }
.lab-menu-win-empty { font-size: 12px; color: var(--muted); line-height: 1.5; }
body.dev-lab .lab-menu-win { --insp-w: 300px; }
@media (max-width: 1100px) { .lab-menu-win { right: 266px; } }
@media (max-width: 900px) { .lab-menu-win { right: 12px; left: 12px; width: auto; bottom: 84px; } }
.lab-hint { font-size: 11.5px; color: var(--muted); line-height: 1.45; padding: 0 14px 8px; }
.lab-list { display: flex; flex-direction: column; gap: 8px; padding: 2px 10px 12px; }
.lab-el {
  border: 1px solid var(--line-soft); border-radius: 14px; background: var(--glass-2); box-shadow: var(--shadow-rest); overflow: hidden;
  animation: menu-row-in .46s var(--ease-spring) both; animation-delay: calc(var(--i, 0) * 24ms);
  transition: transform .32s var(--ease-spring), box-shadow .32s var(--ease-out), border-color .16s var(--ease-out);
}
.lab-el:hover { border-color: rgba(76, 99, 230, .3); box-shadow: var(--shadow-lift); }
.lab-el.out { opacity: 0; transform: scale(.97); transition: opacity .22s var(--ease-out), transform .22s var(--ease-out); }
.lab-el-head { display: flex; align-items: center; gap: 8px; padding: 9px 10px 4px 12px; cursor: pointer; }
.lab-el-head b { flex: 1; min-width: 0; font: 700 13px var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lab-el-meta { display: flex; align-items: center; gap: 6px; padding: 0 12px 9px; font-size: 11px; color: var(--muted); }
.lab-el-meta .tag-chip { font-size: 9.5px; padding: 1px 7px; }
.lab-el-meta .lab-file { font: 400 10.5px var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lab-status { flex: none; display: inline-flex; align-items: center; gap: 5px; font: 700 10px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 2px 8px; border-radius: 999px; background: rgba(24, 33, 66, .06); transition: background .2s var(--ease-out), color .2s var(--ease-out); }
.lab-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.lab-status.pass { color: var(--ok); background: rgba(14, 138, 95, .1); }
.lab-status.fail { color: var(--danger-ink); background: var(--danger-bg); }
.lab-status.busy { color: var(--accent-deep); background: var(--accent-soft); }
.lab-status.busy::before { animation: lab-pulse 1s var(--ease-out) infinite alternate; }
@keyframes lab-pulse { to { transform: scale(1.6); opacity: .4; } }
.lab-status.pub { color: var(--accent-deep); background: var(--accent-soft); }
.lab-shot { position: relative; height: 96px; background: #fff; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); overflow: hidden; }
.lab-shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; transition: opacity .3s var(--ease-out); }
.lab-shot .lab-shot-phone { position: absolute; right: 8px; bottom: -1px; width: 34px; height: 60px; border: 1px solid var(--line); border-bottom: 0; border-radius: 6px 6px 0 0; overflow: hidden; background: #fff; box-shadow: 0 -2px 10px rgba(24, 33, 66, .12); }
.lab-shot .lab-shot-phone img { object-position: top; }
.lab-checks { padding: 8px 12px 2px; display: none; }
.lab-el.open .lab-checks { display: block; }
.lab-check { display: flex; align-items: flex-start; gap: 8px; padding: 4px 0; font-size: 12px; line-height: 1.4; animation: chk-row-in .3s var(--ease-out) both; }
.lab-check .lab-check-ic { flex: none; width: 14px; height: 14px; margin-top: 2px; border-radius: 50%; display: grid; place-items: center; color: #fff; font: 800 9px var(--sans); }
.lab-check.pass .lab-check-ic { background: var(--ok); }
.lab-check.fail .lab-check-ic { background: var(--danger); }
.lab-check.warn .lab-check-ic { background: var(--warn); }
.lab-check span { color: var(--muted); }
.lab-check b { font-weight: 600; color: var(--ink); }
.lab-el-acts { display: flex; align-items: center; gap: 4px; padding: 8px; }
.lab-el-acts .btn { padding: 5px 9px; font-size: 11.5px; box-shadow: none; white-space: nowrap; }
.lab-el-acts .btn.icon { padding: 0; width: 26px; height: 26px; justify-content: center; }
.lab-el-acts .btn.icon svg { width: 13px; height: 13px; }
.lab-el-acts .lab-gap { flex: 1; }
.lab-empty { padding: 4px 14px 12px; font-size: 12px; color: var(--muted); line-height: 1.5; }
/* the publish drawer is an nf-drawer — it must keep that display:grid, so its
   own layout lives on the row inside it */
.lab-pub .nf-drawer-in { padding: 0; }
.lab-pub .lab-pub-row { display: flex; gap: 6px; padding: 0 8px 10px; align-items: center; flex-wrap: wrap; }
.lab-pub select, .lab-pub input { flex: 1; min-width: 110px; padding: 5px 10px; font-size: 12px; border-radius: 10px; }
.lab-pub .btn { flex: none; padding: 5px 11px; font-size: 11.5px; }