/* Creatr — edit-bay UI. Warm near-black, record-light red from the creatr logo,
   mono for machine states, hyperlegible body for reading drafts. */

:root {
  --bg:        #141210;
  --panel:     #1e1b17;
  --panel-2:   #26221d;
  --line:      #322d26;
  --text:      #ede7dd;
  --muted:     #9c948a;
  --accent:    #e31218;   /* creatr logo red */
  --accent-hi: #ff5a52;
  --ok:        #7fa65a;
  --warn:      #d9a03f;
  --danger:    #c25a5a;
  --font-body: "Atkinson Hyperlegible", system-ui, sans-serif;
  --font-disp: "Rubik", var(--font-body);
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --ctl-h: 38px;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font: 16px/1.55 var(--font-body);
}
.hidden { display: none !important; }
h1, h2, h3 { font-family: var(--font-disp); line-height: 1.15; margin: 0 0 .4em; }
h1 { font-size: 1.7rem; }
h2 { font-size: 1.15rem; }
a { color: var(--accent-hi); text-decoration: none; }
a:hover { text-decoration: underline; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 5px; border-radius: 7px; border: 1px solid transparent; background: transparent; color: var(--muted); cursor: pointer; }
.icon-btn:hover { color: var(--text); border-color: var(--line); text-decoration: none; }
.icon-btn.icon-danger:hover { color: var(--danger); border-color: var(--danger); }
.icon-btn.icon-ok, .icon-btn.icon-ok:hover { color: var(--ok); border-color: transparent; cursor: default; }
.icon-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.icon-row { display: flex; gap: 4px; margin-top: 6px; }
.icon-btn.working svg { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .icon-btn.working svg { animation: none; opacity: .5; } }
.thumb.zoomable { cursor: zoom-in; }
.lightbox { max-width: 900px; }
.lightbox-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.lightbox-side { margin: 0; display: grid; gap: 6px; }
.lightbox-side img { width: 100%; max-height: 62vh; object-fit: contain; border-radius: 10px; background: #fff; border: 1px solid var(--line); }
/* Confirm dialog */
.confirm-box { max-width: 420px; }
.confirm-msg { line-height: 1.5; }

/* Amazon clipper */
.clipper-tip { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 10px; font-size: .82rem; }
.clipper-tip .btn { flex: none; cursor: grab; }
.clip-form { display: grid; gap: 10px; }
.clip-preview { width: 120px; height: 120px; object-fit: contain; border-radius: 10px; background: #fff; border: 1px solid var(--line); justify-self: start; }
.clip-field { display: grid; gap: 4px; }
.clip-field span { font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; }
.clip-field input, .clip-field select { width: 100%; }

/* Transparent cutouts get a checkerboard so removed background is visibly removed. */
.lightbox-side img.alpha-check {
  background:
    repeating-conic-gradient(#d7d7d7 0% 25%, #f2f2f2 0% 50%) 0 0 / 20px 20px;
}
.lightbox-side figcaption { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; }
.mono { font-family: var(--font-mono); font-size: .82em; }

/* ── Controls: every single-line control shares one height ── */
button, input, select, textarea { font: inherit; color: inherit; }
input, select {
  height: var(--ctl-h);
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 8px; padding: 0 10px; color: var(--text); width: 100%;
}
textarea {
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 8px; padding: 10px; color: var(--text); width: 100%;
  min-height: 220px; resize: vertical; font-family: var(--font-body);
}
input:focus, select:focus, textarea:focus, button:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px;
}
.btn {
  height: var(--ctl-h); padding: 0 14px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--panel-2);
  cursor: pointer; white-space: nowrap;
  /* Anchors wear this class too: same color and centering as real buttons. */
  color: var(--text); text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center;
}
.btn:hover { border-color: var(--accent); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; }
.btn-primary:hover { background: var(--accent-hi); border-color: var(--accent-hi); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn-ghost:hover { color: var(--text); border-color: var(--line); }
.btn-sm { height: 28px; padding: 0 9px; font-size: .85rem; }
.btn-danger { color: var(--danger); }
/* Filled variant for confirm dialogs; ghost buttons keep the text-only look. */
.btn-danger:not(.btn-ghost) { background: var(--danger); border-color: var(--danger); color: #fff; font-weight: 700; }
.btn-danger:not(.btn-ghost):hover { filter: brightness(1.12); border-color: var(--danger); }
.btn[disabled] { opacity: .45; cursor: wait; }

/* ── Login ── */
.login { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.login-card { width: 320px; display: grid; gap: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 28px; }
.login-logo { width: 72px; height: 72px; }
.login-sub { color: var(--muted); margin: -6px 0 6px; font-size: .9rem; }
.wordmark { font-family: var(--font-disp); font-weight: 700; font-size: 1.3rem; letter-spacing: .01em; }
.wordmark::after { content: "."; color: var(--accent); }
.side-lockup { display: block; height: 30px; width: auto; }
.login-lockup { display: block; height: 54px; width: auto; margin: 0 auto 6px; }

/* ── Shell ── */
.app { display: grid; grid-template-columns: 290px 1fr; min-height: 100vh; }
.sidebar { border-right: 1px solid var(--line); background: var(--panel); display: flex; flex-direction: column; height: 100vh; position: sticky; top: 0; }
.side-scroll { flex: 1; overflow-y: auto; padding: 16px 12px 8px; }
.side-head { display: flex; justify-content: space-between; align-items: center; padding: 2px 8px 14px; }
.wordmark-btn { background: none; border: 0; padding: 0; cursor: pointer; color: inherit; }
.side-nav { display: grid; gap: 2px; }
.side-item.nav-item { display: flex; align-items: center; gap: 9px; margin-bottom: 0; font-weight: 700; }
.side-item.nav-item svg { width: 18px; height: 18px; fill: none; stroke: var(--accent-hi); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.side-item.nav-item .t { display: inline; }
.btn-block { width: 100%; height: 44px; display: flex; align-items: center; justify-content: center; gap: 9px; margin-bottom: 18px; font-weight: 700; line-height: 1; }
.backlog-add { display: flex; gap: 8px; max-width: 620px; margin: 14px 0 6px; }
.backlog-list { max-width: 760px; }
.backlog-row { padding: 10px 0; border-bottom: 1px solid var(--line); }
.backlog-main { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.backlog-note { display: grid; gap: 4px; justify-items: end; margin: 8px 0 2px 34px; }
.backlog-note-ta { width: 100%; min-height: 72px; resize: vertical; }
.backlog-note-preview { font-size: .76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.backlog-note-preview:hover { color: var(--text); }
.icon-btn.has-note svg { stroke: var(--accent-hi); }
.backlog-row:last-child { border-bottom: 0; }
.backlog-grip { flex: none; cursor: grab; }
.backlog-grip:active { cursor: grabbing; }
.backlog-grip svg circle { fill: currentColor; stroke: none; }
.backlog-row.dragging { opacity: .45; }
.backlog-row .backlog-text { flex: 1; }
.backlog-text { display: grid; line-height: 1.4; }
.backlog-date { font-size: .72rem; }
.btn-block svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.profile { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-top: 1px solid var(--line); background: var(--panel); }
.profile .avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid var(--line); }
/* min-width:0 lets the grid child actually shrink, so the name truncates
   instead of wrapping once the settings gear takes its share of the row. */
.profile .who { flex: 1; min-width: 0; display: grid; line-height: 1.25; }
.profile .name, .profile .sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.profile .icon-btn { flex: none; }
.profile .name { font-weight: 700; font-size: .95rem; }
.profile .sub { color: var(--muted); font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; }
.side-section { margin: 16px 0 8px; padding-top: 14px; border-top: 1px solid var(--line); }
.side-label { color: var(--muted); font-family: var(--font-mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; padding: 0 8px 6px; }
.side-label-row { display: flex; align-items: center; justify-content: space-between; padding-right: 4px; }
.side-item { display: block; width: 100%; text-align: left; background: none; border: 0; border-radius: 8px; padding: 8px; cursor: pointer; color: var(--text); }
.side-item:hover { background: var(--panel-2); }
.side-item.active { background: var(--panel-2); }
.side-item .t { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-item .s { display: block; color: var(--muted); font-family: var(--font-mono); font-size: .72rem; margin-top: 2px; }
.filter-chips { display: flex; flex-wrap: wrap; gap: 5px; padding: 0 8px 10px; }
.chip { border: 1px solid var(--line); background: transparent; color: var(--muted); border-radius: 20px; height: 23px; padding: 0 9px; font-size: .72rem; cursor: pointer; }
.chip:hover { color: var(--text); }
.chip.active { border-color: var(--accent); color: var(--text); background: var(--panel-2); }
.main { padding: 24px 28px 60px; max-width: 980px; overflow-x: hidden; }
.main.wide { max-width: none; }
.back { margin-bottom: 8px; }

/* ── Projects index ── */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.page-head h1 { margin: 0; }
.projects-chips { padding: 12px 0 16px; }
.projects-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.project-card {
  text-align: left; background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; padding: 16px; cursor: pointer; color: var(--text);
  display: grid; gap: 8px; align-content: start; font: inherit;
  min-width: 0; overflow: hidden;
}
.project-card:hover { border-color: var(--accent); }
.project-card-thumb {
  width: calc(100% + 32px); margin: -16px -16px 4px; height: 160px;
  object-fit: cover; display: block; border-radius: 11px 11px 0 0;
  border-bottom: 1px solid var(--line); background: var(--panel-2);
}
.project-card-thumb-empty { display: grid; place-items: center; }
.project-card-thumb-empty svg {
  width: 34px; height: 34px; fill: none; stroke: var(--line);
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.chat-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  width: 100%; text-align: left; background: none; border: 0; font: inherit;
  color: var(--text); padding: 12px 0; border-bottom: 1px solid var(--line); cursor: pointer;
}
.chat-row:last-child { border-bottom: 0; }
.chat-row:hover .backlog-text > span:first-child { color: var(--accent-hi); }
.project-card-title { margin: 0; font-size: 1rem; line-height: 1.3; }
.project-card-stage { display: flex; align-items: center; gap: 8px; font-size: .74rem; }
.project-card-meta { font-size: .8rem; }
.project-card-date { font-size: .68rem; }

/* ── The image modal: rail of controls, image on a stage ── */
.picker.img-modal {
  max-width: none; width: min(1340px, 96vw);
  height: 92vh; max-height: 92vh; padding: 0; gap: 0; overflow: hidden;
  display: grid; grid-template-columns: 300px minmax(0, 1fr);
}
.imgm-rail {
  border-right: 1px solid var(--line); overflow-y: auto;
  padding: 14px 16px; display: grid; gap: 12px; align-content: start;
}
.imgm-head { display: flex; align-items: flex-start; gap: 10px; }
.imgm-title { margin: 0; font-size: .95rem; line-height: 1.3; flex: 1; }
.imgm-meta { display: grid; gap: 4px; }
.imgm-label { font-size: .82rem; font-weight: 600; }
.imgm-actions { display: grid; gap: 12px; }
.imgm-sec { display: grid; gap: 6px; }
.imgm-sec .btn { width: 100%; }
.imgm-sources { border-top: 1px solid var(--line); padding-top: 12px; }
.imgm-stage {
  position: relative; background: #16130f; overflow: auto;
  display: flex; min-width: 0; min-height: 0;
}
/* flex: none — the stage must NEVER squeeze the fig below its content:
   a shrunken fig clips the image and the crop handles at its edge, which
   reads as "the crop didn't land where my handles were". */
.imgm-fig { margin: auto; padding: 70px; position: relative; flex: none; }
.imgm-fig img { display: block; box-shadow: 0 10px 44px rgba(0,0,0,.55); border-radius: 4px; }
/* Fit sizing is computed in JS from the real stage box. */
.imgm-fig.cropping { padding: 70px; }
.imgm-zoom {
  position: sticky; left: 0; right: 0; bottom: 14px; align-self: flex-end;
  margin: 0 auto; display: flex; gap: 6px; align-items: center;
  background: var(--panel); border: 1px solid var(--line); border-radius: 999px;
  padding: 5px 10px; width: fit-content; z-index: 4;
}
.imgm-zoom-pct { min-width: 38px; text-align: center; font-size: .7rem; }
.imgm-empty { margin: auto; }
@media (max-width: 800px) {
  /* The rail's `auto` row sized itself to the FULL height of its buttons and
     took the whole modal, collapsing the image row to 0 and leaving the
     capped rail's leftover as dead space. Both rows are explicit now: the
     picture gets a real share, the tools get the rest and scroll. */
  .picker.img-modal {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(150px, 40%) minmax(0, 1fr);
  }
  .imgm-stage { order: 1; }
  .imgm-rail {
    order: 2; border-right: 0; border-top: 1px solid var(--line);
    max-height: none; overflow-y: auto;
  }
  /* 70px of breathing room around a photo is a desktop luxury. */
  .imgm-fig, .imgm-fig.cropping { padding: 14px; }
}

/* ── Studio setup wizard + toggle badges + bg swatch ── */
.picker.thumb-studio { position: relative; }
.studio-wizard {
  position: absolute; inset: 0; z-index: 6; background: rgba(12, 10, 9, .72);
  display: grid; place-items: center; padding: 24px;
}
.wiz-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  width: min(680px, 92%); max-height: 84%; overflow-y: auto;
  padding: 22px; display: grid; gap: 12px;
}
.wiz-step { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; }
.wiz-card h2 { margin: 0; }
.wiz-grid { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); max-height: 300px; overflow-y: auto; }
.wiz-grid .thumb-cell { height: 76px; }
.wiz-bg-preview { width: 100%; max-height: 200px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); }
.wiz-title { font-size: 1.05rem; }
.wiz-nav { margin-top: 4px; }
.wiz-skip { margin-left: auto; color: var(--muted); }
/* Toggle grids show a literal check, so add/remove reads differently from pick-one */
.toggle-grid .thumb-cell { position: relative; }
.toggle-grid .thumb-cell.current::after {
  content: "✓"; position: absolute; top: 2px; right: 2px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent); color: #fff; font-size: 12px; font-weight: 700;
  display: grid; place-items: center;
}
/* Current background: one swatch + Change, not a second grid wall */
.bg-current { display: flex; align-items: center; gap: 10px; }
.bg-swatch { width: 64px; height: 40px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); }
/* Inventory items matching the product search but lacking a cutout */
.prod-needs { display: flex; align-items: center; gap: 8px; padding: 6px 0; min-width: 0; }
.prod-needs img { width: 34px; height: 34px; object-fit: contain; background: #fff; border-radius: 6px; border: 1px solid var(--line); flex: none; }
.prod-needs-name { flex: 1; min-width: 0; font-size: .76rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Crop tool (lightbox) ── */
.lightbox-side { position: relative; }
.lightbox-side.cropping { overflow: hidden; padding: 13%; }
.crop-aspects { padding: 4px 0 0; }
.lightbox-side.cropping img { user-select: none; -webkit-user-drag: none; }
.crop-box {
  position: absolute; border: 2px solid #fff; cursor: move; touch-action: none;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, .78);   /* outside-the-box must read as GONE */
}
.crop-h {
  position: absolute; width: 14px; height: 14px;
  background: #fff; border: 2px solid #14110F; border-radius: 3px;
}
.crop-nw { left: -8px; top: -8px; cursor: nwse-resize; }
.crop-ne { right: -8px; top: -8px; cursor: nesw-resize; }
.crop-sw { left: -8px; bottom: -8px; cursor: nesw-resize; }
.crop-se { right: -8px; bottom: -8px; cursor: nwse-resize; }
.gear-lib-pick { margin-top: 4px; }
/* Add From Inventory picker */
.inv-pick { max-width: 640px; }
.inv-pick-list { max-height: 50vh; overflow-y: auto; display: grid; }
.inv-pick-row {
  display: flex; align-items: center; gap: 12px; padding: 8px 2px;
  border-bottom: 1px solid var(--line);
}
.inv-pick-row:last-child { border-bottom: 0; }
.inv-pick-row img {
  width: 44px; height: 44px; object-fit: contain; background: #fff;
  border-radius: 8px; border: 1px solid var(--line); flex: none;
}
.inv-pick-text { flex: 1; min-width: 0; display: grid; line-height: 1.3; }
.inv-pick-text span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv-pick-text .mono { font-size: .68rem; }
.inv-pick-in { flex: none; font-size: .66rem; }
/* Photo Tools: two slots, actions under their image */
.photo-tools { max-width: 720px; }
.tools-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tools-slot { display: grid; gap: 8px; align-content: start; min-width: 0; }
.tools-fig { margin: 0; }
.tools-fig img {
  width: 100%; height: 230px; object-fit: contain; background: #fff;
  border-radius: 10px; border: 1px solid var(--line); display: block; cursor: zoom-in;
}
.tools-empty {
  height: 230px; display: grid; place-items: center;
  border: 1px dashed var(--line); border-radius: 10px;
}
.tools-acts { min-height: 0; }
.tools-acts .btn { font-size: .82rem; }
@media (max-width: 620px) { .tools-pair { grid-template-columns: 1fr; } }

/* ── Profile settings ── */
.profile-edit { display: flex; gap: 20px; align-items: flex-start; }
.avatar-edit { display: grid; gap: 8px; justify-items: center; }
.avatar-lg { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; border: 2px solid var(--line); }
.profile-fields { flex: 1; display: grid; gap: 10px; max-width: 420px; }
@media (max-width: 640px) {
  .profile-edit { flex-direction: column; }
}

/* ── Status rail: the pipeline, as structure ── */
.rail { display: flex; align-items: center; gap: 0; margin: 6px 0 4px; }
.rail .stage { display: flex; align-items: center; gap: 6px; }
.rail .tick { width: 12px; height: 12px; border-radius: 3px; border: 1.5px solid var(--line); background: var(--panel-2); }
.rail .stage.done .tick { background: var(--accent); border-color: var(--accent); }
.rail .stage.current .tick { border-color: var(--accent-hi); box-shadow: 0 0 0 3px rgba(227,18,24,.25); background: var(--accent); }
.rail .lbl { font-family: var(--font-mono); font-size: .7rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.rail .stage.current .lbl { color: var(--accent-hi); }
.rail .join { width: 26px; height: 1.5px; background: var(--line); margin: 0 8px; }
.rail .stage.done + .join { background: var(--accent); }
.rail-mini { display: inline-flex; gap: 3px; vertical-align: middle; }
.rail-mini i { width: 8px; height: 8px; border-radius: 2px; background: var(--panel-2); border: 1px solid var(--line); }
.rail-mini i.on { background: var(--accent); border-color: var(--accent); }

/* ── Cards / sections ── */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 18px; margin: 16px 0; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.card-head h2 { margin: 0; }
.row-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.muted { color: var(--muted); }
.error { color: var(--danger); }

/* ── Products table ── */
.ptable { width: 100%; border-collapse: collapse; font-size: .92rem; }
.ptable th { text-align: left; color: var(--muted); font-family: var(--font-mono); font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.ptable td { padding: 8px 6px; border-bottom: 1px solid var(--line); vertical-align: top; }
.inv-actions { white-space: nowrap; }
.inv-actions .icon-btn + .icon-btn { margin-left: 12px; }
.ptable .icon-cell { white-space: nowrap; }
/* Even rhythm across the whole icon run: the 12px inside a cell matches
   the 6px+6px the two cells' padding puts between the groups. */
.ptable .icon-cell .icon-btn { vertical-align: middle; }
.ptable .icon-cell .icon-btn + .icon-btn { margin-left: 12px; }
.row-flash td { animation: row-flash-fade 2.4s ease-out; }
@keyframes row-flash-fade {
  0%, 30% { background: rgba(227, 18, 24, .18); }
  100% { background: transparent; }
}
.ptable input, .ptable select { height: 32px; font-size: .9rem; }
/* Thumb width = the two icon buttons below it (30 + 4 gap + 30). */
.ptable .thumb { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); background: #fff; }
.badge { display: inline-block; font-family: var(--font-mono); font-size: .68rem; padding: 2px 7px; border-radius: 20px; border: 1px solid var(--line); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.badge.review { color: var(--warn); border-color: var(--warn); }
.badge.ok { color: var(--ok); border-color: var(--ok); }
.badge.draft { color: var(--warn); border-color: var(--warn); }
.draft-status { display: flex; align-items: center; gap: 8px; }
.format-gate { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--line); margin-top: 14px; padding-top: 14px; }
.table-wrap { overflow-x: auto; }

/* ── Content drafts ── */
.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.tab { border: 1px solid var(--line); background: var(--panel-2); border-radius: 20px; height: 30px; padding: 0 13px; cursor: pointer; font-size: .86rem; color: var(--muted); }
.tab.active { border-color: var(--accent); color: var(--text); }
.tab .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--line); margin-left: 6px; }
.tab .dot.approved { background: var(--ok); }
.tab .dot.draft { background: var(--warn); }
.tab .dot:not(.approved):not(.draft) { background: transparent; border: 1px solid var(--muted); opacity: .6; }
.draft-surface { position: relative; }
/* Toast UI parks its Markdown/WYSIWYG switch along the bottom edge. */
.draft-copy.above-switch { bottom: 48px; }
.draft-copy { position: absolute; right: 10px; bottom: 10px; z-index: 3;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px;
  width: 30px; height: 30px; opacity: .75; }
.draft-copy:hover { opacity: 1; border-color: var(--muted); }
.draft-copy.ok { border-color: #7bbf7b; color: #7bbf7b; opacity: 1; }
.draft-count { font-size: .8rem; margin-top: 6px; }
.draft-count.near { color: #DE841B; }
.draft-count.ok-note { color: #7bbf7b; }
.draft-count.over { color: var(--danger); font-weight: 600; }
.draft-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 10px; }

/* ── Transcript ── */
details.transcript summary { cursor: pointer; color: var(--muted); font-family: var(--font-mono); font-size: .8rem; }
details.transcript pre { white-space: pre-wrap; font-family: var(--font-body); color: var(--muted); max-height: 380px; overflow-y: auto; margin: 10px 0 0; }

/* ── Chat ── */
.chat { display: flex; flex-direction: column; gap: 12px; min-height: 60vh; }
.chat-log { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.msg { max-width: 85%; padding: 10px 14px; border-radius: 12px; white-space: pre-wrap; overflow-wrap: break-word; }
.msg.user { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 4px; }
.msg.assistant { align-self: flex-start; background: var(--panel); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.msg.pending { color: var(--muted); font-family: var(--font-mono); font-size: .85rem; background: none; border: none; }
.chat-input { display: flex; gap: 8px; position: sticky; bottom: 12px; }
.chat-input textarea { min-height: var(--ctl-h); height: var(--ctl-h); max-height: 160px; }

.guide-done .guide-cmd { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; overflow-x: auto; font-size: .85rem; margin: 4px 0 14px; }
.step-check { flex: none; width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .7rem; font-family: var(--font-mono); }
.step-text { display: grid; line-height: 1.35; }
.step-title { font-weight: 700; font-size: .92rem; }
.step-sub { font-size: .8rem; font-family: var(--font-mono); }
/* ── Stage sections: one numbered section per pipeline stage ── */
/* Each stage wears a banded header in its state colour. Seven sections down
   a long page is a scanning problem, and a hairline border on the left edge
   was doing all the work of answering "where am I and what is left". */
.section {
  border-left: 6px solid var(--line);
  padding: 0; overflow: hidden;          /* let the band reach the card edges */
}
.section.current { border-left-color: var(--accent); }
.section.done { border-left-color: var(--ok); }
.section.todo { opacity: .8; }
.section-head {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 13px 18px;
  background: var(--panel-2);
  border-bottom: 1px solid var(--line);
}
/* Tinted from the state colour, mixed into the panel so it stays a band and
   never becomes a second accent competing with the buttons. */
.section.current > .section-head { background: color-mix(in srgb, var(--accent) 24%, var(--panel-2)); }
.section.done    > .section-head { background: color-mix(in srgb, var(--ok) 20%, var(--panel-2)); }
.section-head h2 { margin: 0; font-size: 1.08rem; }
.section-head .step-check { margin-top: 2px; }
.step-check.done { background: var(--ok); color: #10130c; font-weight: 700; }
.step-check.current { border: 1.5px solid var(--accent); color: var(--accent-hi); font-weight: 700; }
.step-check.todo { border: 1px solid var(--line); color: var(--muted); }
.section-actions { margin-left: auto; }
.section-head .section-actions { align-self: center; }
.section-body { margin-top: 0; padding: 16px 18px 18px; }
.section-hint { margin: 0 0 10px; max-width: 70ch; }
.subhead { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; }
.subhead h3 { margin: 0; font-size: .95rem; }
.draft-count { align-self: center; }

/* ── Photo picker ── */
.picker-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 40; display: grid; place-items: center; padding: 20px; }
.picker { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 22px; max-width: 560px; width: 100%; max-height: 80vh; overflow-y: auto; display: grid; gap: 12px; }
/* Top-right close on every modal. Sticky, so it stays put while tall modals
   (Photos) scroll; negative bottom margin keeps the title on the same row. */
.modal-x {
  /* Its own row: the old negative bottom margin pulled the title up beside
     it, and in control-dense modals the X sat on top of the first field.
     Solid background so content scrolling beneath the sticky button reads
     as passing under a control, not colliding with it. */
  position: sticky; top: 0; justify-self: end; z-index: 5;
  width: 30px; height: 30px; margin: -6px -6px 0 0; padding: 0;
  border: 1px solid var(--line); border-radius: 8px; background: var(--panel);
  color: var(--muted); font-size: 22px; line-height: 1; cursor: pointer;
}
.modal-x:hover { color: var(--text); background: var(--panel-2); }
.picker form { display: grid; gap: 12px; }
.photo-url-form { display: flex; gap: 8px; border-top: 1px solid var(--line); padding-top: 14px; }
.photo-url-form .btn { flex: none; }
.picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.picker-cell { padding: 0; border: 2px solid var(--line); border-radius: 10px; overflow: hidden; cursor: pointer; background: #fff; height: auto; }
.picker-cell:hover { border-color: var(--accent); }
.picker-cell.current { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(227,18,24,.25); }
.picker-cell img { width: 100%; height: 120px; object-fit: cover; display: block; }
.norm-modal { max-width: 760px; }
.norm-row { display: flex; align-items: center; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.norm-row:last-of-type { border-bottom: 0; }
.norm-thumbs { display: flex; gap: 8px; flex: none; }
.norm-thumb-wrap { margin: 0; display: grid; gap: 2px; justify-items: center; }
.norm-thumb-wrap figcaption { font-size: .62rem; text-transform: uppercase; letter-spacing: .08em; }
.norm-thumb { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); background: #fff; flex: none; }
.norm-thumb.zoomable { cursor: zoom-in; }
.norm-info { flex: 1; display: grid; gap: 5px; justify-items: start; }
.norm-choices { display: flex; gap: 5px; flex: none; }
.norm-choices .chip[disabled] { opacity: .5; cursor: default; }
.norm-status { flex: none; min-width: 90px; text-align: right; font-size: .72rem; }
.norm-url { display: flex; gap: 6px; width: 100%; }
.norm-url input { height: 30px; font-size: .85rem; }
.norm-url .btn-sm { flex: none; }
.norm-actions { justify-content: flex-end; margin-top: 6px; }

/* ── Toast ── */
.toast { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 16px; z-index: 60; max-width: 90vw; }
.toast.err { border-color: var(--danger); color: var(--danger); }

/* ── Mobile ── */
/* ── Inventory on a phone ───────────────────────────────────────────────
   Nine columns cannot survive 393px: the category was clipped mid-word and
   the photo column left a dead gutter. Each row becomes a card and each cell
   prints its own header from data-label. */
@media (max-width: 768px) {
  .ptable thead { display: none; }
  .ptable, .ptable tbody, .ptable tr, .ptable td { display: block; width: 100%; }
  .ptable tr {
    border: 1px solid var(--line); border-radius: 12px;
    padding: 12px; margin-bottom: 10px; background: var(--panel-2);
  }
  .ptable td {
    border: none; padding: 3px 0;
    display: grid; grid-template-columns: 4.2rem minmax(0, 1fr);
    gap: 10px; align-items: center;
  }
  /* A cell with more than one child (the weight input plus its gram
     conversion) would wrap the extra into the label column. Pin every real
     child to the value column so they stack under each other instead. */
  .ptable td > * { grid-column: 2; }
  .ptable td::before {
    content: attr(data-label);
    color: var(--muted); font-family: var(--font-mono);
    font-size: .64rem; text-transform: uppercase; letter-spacing: .08em;
  }
  /* The photo leads the card, and the action row closes it: neither wants a
     label or a second column. */
  .ptable td[data-label="Photo"],
  .ptable td:not([data-label]),
  .ptable td[data-label=""] { grid-template-columns: 1fr; }
  .ptable td[data-label="Photo"]::before,
  .ptable td:not([data-label])::before,
  .ptable td[data-label=""]::before { content: none; }
  .ptable td[data-label="Photo"] { padding-bottom: 10px; }
  .ptable .thumb { width: 72px; height: 72px; }
  /* Page intros are onboarding copy; on a phone they cost half a screen
     every single visit. */
  .main > #view > p.muted:first-of-type,
  #view > .page-head + p.muted { font-size: .88rem; line-height: 1.45; }
  .ptable input, .ptable select { height: 34px; width: 100%; }
  .ptable .icon-cell { display: flex; gap: 18px; padding-top: 10px; }
  .ptable .icon-cell .icon-btn + .icon-btn { margin-left: 0; }
}

/* ── Phone layout ───────────────────────────────────────────────────────
   The sidebar is a desktop affordance. On a phone it is replaced outright by
   a bottom tab bar, so there is no sidebar/detail swap and no hamburger:
   content is always on screen and navigation is always reachable by thumb. */
@media (max-width: 768px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .main { display: block; }
  /* Clear the bar plus the home indicator on a notched phone. */
  .main { padding: 16px 14px calc(72px + env(safe-area-inset-bottom, 0px)); }
  .back { display: inline-flex; }
  .rail .lbl { display: none; }
  .rail .stage.current .lbl { display: inline; }
  .rail .join { width: 14px; margin: 0 5px; }
  /* The Ask button has to sit above the bar, not behind it. */
  .ask-float { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
}
@media (min-width: 769px) { .back { display: none !important; } }
.mobile-menu-btn { display: none !important; }

.tabbar { display: none; }
@media (max-width: 768px) {
  .tabbar {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    background: color-mix(in srgb, var(--panel) 92%, transparent);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .tab-item {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; padding: 8px 2px 9px; min-height: 56px;
    background: none; border: none; cursor: pointer;
    color: var(--muted); font: inherit; font-size: .66rem;
    letter-spacing: .03em; text-transform: uppercase;
    -webkit-tap-highlight-color: transparent;
  }
  .tab-item svg {
    width: 22px; height: 22px; fill: none;
    stroke: currentColor; stroke-width: 1.8;
    stroke-linecap: round; stroke-linejoin: round;
  }
  /* The dots in More read as dots, not rings. */
  .tab-item[data-nav="more"] svg circle { fill: currentColor; stroke: none; }
  .tab-item.active { color: var(--accent); }
  .tab-item:active { background: var(--panel-2); }
}

/* More: the destinations that do not earn a tab, plus the account row that
   lived at the bottom of the sidebar. */
.sheet-overlay {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(0,0,0,.5);
  display: flex; align-items: flex-end;
}
.sheet {
  width: 100%; background: var(--panel);
  border-top-left-radius: 16px; border-top-right-radius: 16px;
  border-top: 1px solid var(--line);
  padding: 10px 12px calc(14px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; gap: 2px;
}
.sheet-grip {
  width: 38px; height: 4px; border-radius: 2px;
  background: var(--line); margin: 2px auto 10px;
}
.sheet-item {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 12px; border-radius: 10px;
  background: none; border: none; width: 100%;
  color: var(--text); font: inherit; text-align: left; cursor: pointer;
}
.sheet-item svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.sheet-item:active { background: var(--panel-2); }
.sheet-item.danger { color: var(--danger); }

@media (prefers-reduced-motion: no-preference) {
  .side-item, .btn, .tab { transition: background .12s, border-color .12s, color .12s; }
}

/* ── Thumbnail Studio ──
   An editor shell, not a form: header bar (size tabs · undo · save state),
   canvas stage on a dark surface, contextual inspector on the right. */
.thumb-studio {
  max-width: none; width: min(1500px, 96vw);
  height: 94vh; max-height: 94vh;
  padding: 0; gap: 0; overflow: hidden;
  display: grid; grid-template-rows: auto minmax(0, 1fr);
}
.studio-header {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; border-bottom: 1px solid var(--line);
}
.studio-header h2 { margin: 0; font-size: 1rem; }
.studio-spacer { flex: 1; }
.studio-tabs { display: flex; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.studio-tab {
  padding: 7px 14px; background: transparent; border: 0; cursor: pointer;
  border-right: 1px solid var(--line); color: var(--muted);
  font: inherit; font-size: .78rem; white-space: nowrap;
}
.studio-tab:last-child { border-right: 0; }
.studio-tab:hover { color: var(--text); }
.studio-tab.current { background: var(--panel-2); color: var(--text); font-weight: 600; }
.studio-hist { display: flex; gap: 6px; }
.studio-hist .btn:disabled { opacity: .35; cursor: default; }
.studio-chip {
  font-size: .66rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); border: 1px solid var(--line);
  padding: 5px 10px; border-radius: 999px; min-width: 74px; text-align: center;
}
.studio-chip.busy { color: var(--text); }
.studio-chip.warn { color: var(--accent); border-color: var(--accent); }
.studio-x { position: static; margin: 0; flex: none; }
.studio-body { display: grid; grid-template-columns: minmax(0, 1fr) 340px; min-height: 0; }
.studio-stage {
  display: grid; grid-template-rows: minmax(0, 1fr) auto;
  justify-items: center; align-items: center; gap: 8px;
  padding: 16px 18px; background: #16130f; min-width: 0; min-height: 0;
}
.studio-canvas-wrap {
  min-height: 0; min-width: 0; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
}
.thumb-canvas {
  max-width: 100%; max-height: 100%; width: auto; height: auto; display: block;
  border-radius: 6px; background: #000; box-shadow: 0 10px 44px rgba(0,0,0,.55);
  touch-action: none;
}
.studio-hint { margin: 0; font-size: .72rem; text-align: center; }
.studio-inspector {
  border-left: 1px solid var(--line); overflow-y: auto; overflow-x: hidden;
  padding: 14px 16px; display: grid; gap: 14px; align-content: start;
  min-width: 0;
}
/* Grid items' automatic minimum size = content min-width: one long product
   name in a pending row was widening the whole rail into a sideways
   scroller. Every layer opts out. */
.studio-inspector > * , .studio-section, .studio-context { min-width: 0; }
.studio-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.studio-chip-btn.current {
  border-color: var(--accent); color: var(--accent);
  box-shadow: 0 0 0 2px rgba(227,18,24,.18);
}
.studio-context {
  border: 1px solid var(--line); border-radius: 10px; padding: 12px;
  display: grid; gap: 10px; background: var(--panel-2);
}
.studio-section { display: grid; gap: 8px; border-top: 1px solid var(--line); padding-top: 12px; }
.studio-sec-title {
  margin: 0; font-size: .66rem; text-transform: uppercase;
  letter-spacing: .12em; color: var(--muted);
}
.studio-actions {
  position: sticky; bottom: -14px; margin: 0 -16px -14px; padding: 12px 16px 14px;
  background: var(--panel); border-top: 1px solid var(--line); display: grid; gap: 8px;
}
.studio-startover { justify-self: start; color: var(--muted); }
.thumb-field { display: grid; gap: 4px; }
.thumb-field > span, .thumb-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; }
.thumb-field input, .thumb-field select { width: 100%; }
.thumb-field input[type=color] { height: var(--ctl-h); padding: 3px; cursor: pointer; }
.thumb-desc { margin: -4px 0 0; font-size: .76rem; line-height: 1.4; }
.thumb-suggestions { display: flex; flex-wrap: wrap; gap: 6px; }
.thumb-sug { font-size: .72rem; }
.thumb-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; }
.thumb-cell {
  padding: 0; height: 56px; border: 2px solid var(--line); border-radius: 8px;
  overflow: hidden; cursor: pointer; background: #fff;
}
.thumb-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb-cell-none { background: var(--panel-2); display: grid; place-items: center; }
.thumb-cell:hover { border-color: var(--accent); }
.thumb-cell.current { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(227,18,24,.25); }
@media (max-width: 900px) {
  .thumb-studio { height: 96vh; max-height: 96vh; width: 98vw; }
  .studio-body { grid-template-columns: 1fr; grid-template-rows: minmax(280px, 45%) minmax(0, 1fr); }
  .studio-inspector { border-left: 0; border-top: 1px solid var(--line); }
  .studio-header { flex-wrap: wrap; }
}

/* ── Thumbnail drop zones ── */
.thumbs-title { margin: 22px 0 8px; }
.thumbs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.thumbs-col { display: grid; gap: 8px; align-content: start; }
.thumbs-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.thumbs-head .mono { font-size: .7rem; }
.dropzone {
  display: grid; place-items: center; min-height: 88px; padding: 12px;
  border: 1px dashed var(--line); border-radius: 10px; background: var(--panel-2);
  cursor: pointer; text-align: center; font-size: .82rem; transition: border-color .12s, background .12s;
}
.dropzone:hover, .dropzone.over { border-color: var(--accent); background: var(--panel); }
.dropzone.over { border-style: solid; }
.dropzone.busy { opacity: .55; cursor: wait; }
.thumbs-cell { margin: 0; display: grid; gap: 4px; }
.thumbs-cell img { width: 100%; border-radius: 8px; border: 1px solid var(--line); display: block; background: #000; }
.thumbs-cell figcaption { display: flex; align-items: center; justify-content: space-between; font-size: .7rem; }

/* Autosave status: quiet until it matters. */
.autosave-status { font-size: .72rem; color: var(--muted); }
.autosave-status.pending { color: var(--warn); }
.autosave-status.ok { color: var(--ok); }
.autosave-status.err { color: var(--danger); }
.draft-status { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ── Settings ── */
.settings-card { max-width: 820px; margin-bottom: 14px; }
.settings-card h2 { margin-bottom: 4px; }
.settings-card p { margin-top: 0; }
.settings-voice { min-height: 190px; font-family: var(--font-body); line-height: 1.5; }
.settings-actions { max-width: 820px; align-items: center; gap: 10px; margin-bottom: 18px; }
.settings-fidelity {
  white-space: pre-wrap; margin: 0; padding: 12px; border-radius: 8px;
  background: var(--panel-2); border: 1px solid var(--line);
  color: var(--muted); font-size: .78rem; line-height: 1.5;
}
.settings-intro { min-height: 110px; }
.add-link { border: 1px solid var(--line); border-radius: 10px; padding: 12px; background: var(--panel-2); }
.add-link p { margin: 0 0 10px; font-size: .82rem; }
.add-link .row-actions { display: flex; gap: 8px; }
.add-link input { flex: 1; }
.add-or { margin: 12px 0 0; font-size: .82rem; }
/* An action that is available but not yet set up reads as a to-do, not a control. */
.icon-btn.icon-todo { color: var(--warn); }
.icon-btn.icon-todo:hover { color: var(--warn); border-color: var(--warn); }
.weight-grams { font-size: .68rem; margin-top: 3px; min-height: 1em; }

/* ── Compare before updating from a link ── */
.compare-box { max-width: 720px; }
.compare { width: 100%; border-collapse: collapse; margin: 4px 0 2px; }
.compare th { text-align: left; font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); padding: 0 8px 6px 0; font-weight: 400; }
.compare td { padding: 8px 8px 8px 0; border-top: 1px solid var(--line); vertical-align: middle; font-size: .88rem; }
.compare td:first-child { width: 28px; }
.compare input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
.compare-label { color: var(--muted); white-space: nowrap; }
.compare-now { color: var(--muted); }
.compare-next { color: var(--text); font-weight: 600; }
.compare-thumb { width: 48px; height: 48px; object-fit: contain; border-radius: 6px; background: #fff; border: 1px solid var(--line); display: block; }
.compare-note { font-size: .76rem; margin: 6px 0 0; }

/* 10 C's coverage */
.cs-btn { height: auto; min-height: 30px; padding: 4px 8px; display: flex; flex-wrap: wrap; gap: 4px; max-width: 160px; }
.c-chip { font-size: .64rem; text-transform: uppercase; letter-spacing: .06em; padding: 1px 5px; border-radius: 5px; background: var(--panel); border: 1px solid var(--line); color: var(--text); white-space: nowrap; }
.cs-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.cs-opt { display: flex; align-items: center; gap: 8px; font-size: .88rem; cursor: pointer; }
.cs-opt input { width: 16px; height: 16px; accent-color: var(--accent); }

/* ── Project chat drawer ── */
.title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.title-row h1 { flex: 1; }
.ask-btn { flex: none; margin-top: 4px; }
.drawer-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 45; display: flex; justify-content: flex-end; }
.drawer {
  width: min(520px, 100vw); background: var(--panel); border-left: 1px solid var(--line);
  display: flex; flex-direction: column; height: 100vh; box-shadow: -20px 0 50px rgba(0,0,0,.4);
}
.drawer-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.drawer-title { flex: 1; display: grid; line-height: 1.2; }
.drawer-title .mono { font-size: .7rem; }
.drawer-log { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.drawer-input { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line); align-items: flex-end; }
.drawer-input textarea { min-height: 56px; flex: 1; }
.drawer-input .btn { flex: none; }
@media (max-width: 560px) { .drawer { width: 100vw; } }
/* Reachable from any scroll position on a long project page. */
.ask-float {
  position: fixed; right: 26px; bottom: 26px; z-index: 30;
  height: 46px; padding: 0 20px; border-radius: 23px;
  box-shadow: 0 10px 28px rgba(0,0,0,.45);
}
@media (max-width: 640px) { .ask-float { right: 14px; bottom: 14px; } }
/* Drop an image straight onto a row thumbnail. */
.thumb { transition: box-shadow .12s, border-color .12s, opacity .12s; }
.thumb.drop-over { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(227,18,24,.35); }
.thumb.drop-busy { opacity: .45; cursor: wait; }
.thumb-field input[type=range] { height: var(--ctl-h); padding: 0; accent-color: var(--accent); background: transparent; border: 0; }
.thumb-gen { display: flex; gap: 6px; }
.thumb-gen input { flex: 1; }
.thumb-gen .btn { flex: none; }

/* ── Media library ── */
.media-drop { margin: 14px 0 18px; }
/* Media detail modal */
.media-modal { max-width: 860px; gap: 10px; position: relative; }
.media-modal .modal-x { position: absolute; top: 10px; right: 10px; margin: 0; }
.media-modal-img { width: 100%; max-height: 60vh; object-fit: contain; border-radius: 10px; border: 1px solid var(--line); background: #000; display: block; }
.media-modal-img.on-light { background: #f2efe8; }
.media-modal-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.media-modal-meta .media-label { flex: 1; min-width: 160px; }
.media-modal-sub { font-size: .72rem; }
.media-versions { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); }
.media-versions .thumb-cell { height: 60px; }
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
@media (max-width: 768px) {
  /* Two up. One 190px column per row turned a browsing grid into a feed. */
  .media-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .media-grid figcaption, .media-card .muted { font-size: .76rem; }
  .dropzone { padding: 14px; min-height: 0; font-size: .85rem; }
}
/* min-width:0 + overflow:hidden: a grid item's automatic minimum size is
   its content's min-content, and a 1500px product JPEG was blowing cells
   across the page in Safari. With these, a cell CANNOT outgrow its track —
   same guard .thumb-cell has always had. Fixed height instead of
   aspect-ratio for the same reason: engine-proof. */
.media-cell { margin: 0; display: grid; gap: 6px; min-width: 0; overflow: hidden; align-content: start; }
.media-cell img { width: 100%; height: 150px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); display: block; background: #000; }
.media-cell figcaption { display: flex; align-items: center; gap: 6px; }
.media-label { height: 28px; font-size: .8rem; flex: 1; }
.media-cell .mono { font-size: .64rem; flex: none; }
.media-bar { display: flex; align-items: center; gap: 12px; justify-content: space-between; flex-wrap: wrap; margin-bottom: 4px; }
.media-bar .filter-chips { padding: 0; }
.media-search { width: 200px; }
.media-name { flex: 1; font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-sub { font-size: .64rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Transparent cutouts need a light surface to read at all on a dark page. */
.media-cell img.media-img-cutout { object-fit: contain; background: #f2efe8; padding: 8px; box-sizing: border-box; }
.media-cell .icon-btn { flex: none; }
.media-controls { display: flex; gap: 6px; align-items: center; margin-left: auto; }
.media-ctl { width: auto; font-size: .82rem; }
.media-ctl-search { width: 180px; }
.media-cell-click { cursor: pointer; }
.remote-picker { max-width: 860px; }
.remote-preview {
  width: 100%; max-height: 46vh; object-fit: contain; display: block;
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
}
.remote-meta { align-items: center; }
.compare-more { display: block; margin-top: 6px; }
.loading-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.spinner {
  width: 20px; height: 20px; flex: none; border-radius: 50%;
  border: 3px solid var(--line); border-top-color: var(--accent);
  animation: spinner-turn .8s linear infinite;
}
@keyframes spinner-turn { to { transform: rotate(360deg); } }
.remote-grid { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); max-height: 150px; overflow-y: auto; }
.remote-grid .thumb-cell { height: 72px; }
.media-cell-click:hover img { border-color: var(--accent); }
/* Standard media picker (mediaPicker in app.js) */
.mpicker { display: grid; gap: 8px; }
.mpicker-bar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mpicker-bar .filter-chips { padding: 0; }
.mpicker-search { flex: 1; min-width: 100px; height: 30px; font-size: .8rem; }
.mpicker-sort { height: 30px; width: auto; font-size: .8rem; padding: 0 8px; }
.mpicker-grid { max-height: 250px; overflow-y: auto; }
.slug-row { display: flex; align-items: center; gap: 4px; }
.slug-row .icon-btn { width: 24px; height: 24px; }
.slug-row .icon-btn svg { width: 13px; height: 13px; }
.thumbs-auto { margin-bottom: 12px; }

/* Secondary action: visibly a button without shouting. Raised a tone above
   the inputs it sits between, bolder label, pressable feel. */
.btn-secondary {
  background: #353028; border-color: #4d463b; font-weight: 700;
  box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 2px 6px rgba(0,0,0,.35);
}
.btn-secondary:hover { border-color: var(--accent); background: #3c362d; }
.btn-secondary:active { transform: translateY(1px); box-shadow: 0 1px 3px rgba(0,0,0,.35); }

/* ── Thumbnail reference photos (Settings) ── */
.self-grid { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 4px; }
.self-cell { position: relative; width: 92px; height: 92px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); }
.self-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.self-del { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: rgba(0,0,0,.65); color: #fff; cursor: pointer; line-height: 1; }
.self-del:hover { background: var(--accent); }

/* ── Media grid ratio chip: square = goal state ── */
.media-cell { position: relative; }
.ratio-chip { position: absolute; top: 6px; right: 6px; font-size: .62rem; letter-spacing: .04em; padding: 2px 7px; border-radius: 12px; background: rgba(0,0,0,.62); color: var(--warn); pointer-events: none; }
.ratio-chip.sq { color: var(--ok); }

/* Transparency must be VISIBLE in the image modal: real cutouts sit on a
   checkerboard; a white-baked impostor shows flat white and gives itself away. */
.imgm-fig img.alpha-check {
  background: repeating-conic-gradient(#3a352e 0% 25%, #2b2724 0% 50%) 0 0 / 22px 22px;
}

.media-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.media-head h1 { margin: 0; }

/* Product Info fields in the item modal */
.imgm-fieldwrap { display: flex; flex-direction: column; gap: 3px; margin-bottom: 8px; }
.imgm-fieldwrap > span { font-size: .62rem; text-transform: uppercase; letter-spacing: .1em; }
.imgm-fieldhead { display: flex; align-items: center; justify-content: space-between; }
.imgm-fieldhead span { font-size: .62rem; text-transform: uppercase; letter-spacing: .1em; }
.imgm-fieldhead .icon-btn { width: 24px; height: 24px; }
.imgm-fieldhead .icon-btn.spin svg { animation: spin 1s linear infinite; }
.btn.attn { border-color: #DE841B; }
.plan-ta { min-height: 440px; }
/* Toast UI Editor: dark theme ships with the vendor CSS; these are fit
   adjustments so it reads as part of the app rather than a widget. */
.plan-editor { margin-bottom: 10px; }
.toastui-editor-defaultUI { border-radius: 8px; }
.toastui-editor-dark .toastui-editor-defaultUI { border-color: var(--line); }
.toastui-editor-dark .toastui-editor-defaultUI-toolbar { background: var(--panel); border-radius: 8px 8px 0 0; }
.toastui-editor-dark .toastui-editor-main .toastui-editor-ww-container { background: var(--panel-2); }
.toastui-editor-dark .toastui-editor-md-container { background: var(--panel-2); }
.toastui-editor-contents { font-family: var(--font-body); font-size: 1rem; }
.toastui-editor-dark .toastui-editor-contents p,
.toastui-editor-dark .toastui-editor-contents li { color: var(--text); }
.toastui-editor-dark .toastui-editor-contents h1,
.toastui-editor-dark .toastui-editor-contents h2,
.toastui-editor-dark .toastui-editor-contents h3,
.toastui-editor-dark .toastui-editor-contents h4 { color: var(--text); border: 0; }
.toastui-editor-dark .toastui-editor-contents a { color: #DE841B; }
.toastui-editor-mode-switch { border-radius: 0 0 8px 8px; }
.transcript-drop { border: 1px dashed var(--line); border-radius: 10px; padding: 12px; }
.transcript-drop.over { border-color: var(--accent, #DE841B); background: rgba(222,132,27,.06); }
.transcript-paste { min-height: 120px; }
.worker-alt { margin-top: 14px; }
.worker-alt summary { cursor: pointer; color: var(--muted); font-size: .9rem; }
.published-paste input { min-width: 320px; }
.why-list { display: flex; flex-direction: column; gap: 14px; max-width: 860px; }
.why-row { display: flex; gap: 14px; align-items: flex-start; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.why-row .thumb { width: 72px; height: 72px; flex: none; }
.why-body { flex: 1; min-width: 0; }
.why-name { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.why-name strong { flex: 1; min-width: 0; }
.why-name .icon-btn { width: 26px; height: 26px; }
.why-name .icon-btn.spin svg { animation: spin 1s linear infinite; }
.why-ta { width: 100%; }
.sync-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #DE841B; margin-left: 8px; box-shadow: 0 0 6px rgba(222, 132, 27, .8); vertical-align: middle; }
.imgm-field { width: 100%; box-sizing: border-box; font-size: .85rem; }

.imgm-delete-item { color: var(--danger); border-color: var(--danger); margin-top: 10px; }
.imgm-delete-item:hover { background: var(--danger); color: #fff; }

/* Edge handles: Photoshop-style single-side resize */
.crop-n { left: calc(50% - 7px); top: -8px; cursor: ns-resize; }
.crop-s { left: calc(50% - 7px); bottom: -8px; cursor: ns-resize; }
.crop-e { right: -8px; top: calc(50% - 7px); cursor: ew-resize; }
.crop-w { left: -8px; top: calc(50% - 7px); cursor: ew-resize; }

.crop-preview { max-width: 560px; }
.crop-preview-img { display: block; max-width: 100%; max-height: 55vh; margin: 10px auto; border-radius: 6px; background: repeating-conic-gradient(#3a352e 0% 25%, #2b2724 0% 50%) 0 0 / 18px 18px; }

.imgm-cs { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px; }
.imgm-cs .cs-opt { display: flex; gap: 6px; align-items: center; font-size: .8rem; }

.clip-gallery { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0 4px; }
.clip-thumb { width: 52px; height: 52px; object-fit: contain; background: #f2efe8; border-radius: 6px; border: 2px solid transparent; cursor: pointer; }
.clip-thumb.current { border-color: var(--accent); }

.imgm-name { resize: vertical; min-height: 58px; line-height: 1.35; font-family: var(--font-body); }

/* Inventory deep-filter panel: slides open under the bar */
.inv-filter-panel { display: flex; gap: 18px; overflow: hidden; max-height: 0; transition: max-height .2s ease, margin .2s ease; margin: 0; }
.inv-filter-panel.open { max-height: 90px; margin: 10px 0 4px; }
.inv-filter-field { display: flex; flex-direction: column; gap: 3px; }
.inv-filter-field > span { font-size: .62rem; text-transform: uppercase; letter-spacing: .1em; }

.inv-filt-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); color: var(--text); cursor: pointer; height: 38px; box-sizing: border-box; }
.inv-filt-btn svg { width: 15px; height: 15px; }
.inv-filt-btn.filt-active { border-color: var(--accent); color: var(--accent); }

.inv-vocab-row { display: flex; gap: 6px; }
.inv-vocab-btn { height: 38px; box-sizing: border-box; display: inline-flex; align-items: center; }
.inv-filter-field select { height: 38px; box-sizing: border-box; }

.cs-group-title { font-size: .62rem; text-transform: uppercase; letter-spacing: .12em; margin: 10px 0 4px; display: block; grid-column: 1 / -1; }

.inv-name { resize: vertical; min-height: 52px; line-height: 1.3; font-family: var(--font-body); font-size: .88rem; }

/* Blog tag entry sits in the publish row: wide enough to read a real tag
   list, and it wraps to its own line before it squeezes the buttons. */
.blog-tags { flex: 1 1 260px; min-width: 200px; }
.blog-tags input { width: 100%; }

/* Status picker rides in the project title row: sized to its content so a
   long stage name does not stretch it across the header. */
.status-picker { flex: none; width: auto; margin-top: 4px; }

/* ── Dashboard ─────────────────────────────────────────────────────────── */
/* Needs You: a work queue, so every row reads as one actionable line with
   its verb on the right. Urgent rows get the accent edge, nothing else.
   NAMED dash-queue, not todo: `todo` is already a stage STATE class on
   .card.section, and a bare `.todo` rule here turned every not-yet-reached
   stage into a flex row, which only became visible once the page went wide. */
.dash-queue { display: flex; flex-direction: column; gap: 2px; }
.dash-queue-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 11px 12px; border-radius: 8px; border: 1px solid transparent;
  border-left: 3px solid var(--line); background: var(--panel-2);
}
.dash-queue-row.urgent { border-left-color: var(--accent); }
.dash-queue-txt { min-width: 0; }
.dash-queue-label { font-weight: 600; }
.dash-queue-note { font-size: .84rem; margin-top: 2px; }
.dash-queue-row .btn { flex: none; }

/* Pipeline census: equal cells so the shape of the funnel is readable at a
   glance rather than needing to be counted. */
.stat-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.stat {
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px;
  padding: 12px 8px; text-align: center; cursor: pointer; color: var(--text);
}
.stat:hover { border-color: var(--accent); }
.stat.empty { opacity: .45; }
.stat-n { font-size: 1.5rem; font-weight: 700; line-height: 1.1; }
.stat-l { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-top: 4px; }

.dash-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.dash-cols .card { margin: 0; }

.link-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
  padding: 9px 0; background: none; border: none; border-bottom: 1px solid var(--line);
  color: var(--text); cursor: pointer; text-align: left; font: inherit;
}
.link-row:last-child { border-bottom: none; }
.link-row:hover { color: var(--accent); }

.mini-table { width: 100%; border-collapse: collapse; }
.mini-table td { padding: 7px 0; border-bottom: 1px solid var(--line); }
.mini-table tr:last-child td { border-bottom: none; }
.mini-table td:last-child { text-align: right; width: 4rem; }

@media (max-width: 900px) {
  .stat-row { grid-template-columns: repeat(4, 1fr); }
  .dash-cols { grid-template-columns: 1fr; }
}

/* ── What this project becomes ────────────────────────────────────────────
   The choice that drives the rest of the pipeline, so it leads the Ideate
   stage rather than hiding in settings. */
.outputs-pick { margin-bottom: 18px; }
.outputs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px; margin-top: 10px; }
.output-opt {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--panel-2); cursor: pointer;
}
.output-opt.on { border-color: var(--accent); }
.output-opt input { width: auto; height: auto; margin-top: 2px; flex: none; }
.output-txt { min-width: 0; }
.output-label { font-weight: 600; font-size: .92rem; }
.output-blurb { font-size: .8rem; line-height: 1.35; margin-top: 2px; }

/* ── Ideate: conversation first ─────────────────────────────────────────── */
.ideate-talk { margin-bottom: 20px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.plan-prop {
  margin: 14px 0 4px; padding: 12px 14px; border-radius: 10px;
  background: var(--panel-2); border-left: 3px solid var(--accent);
}
.plan-prop-head { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.plan-prop-list { font-weight: 600; margin-top: 4px; }
.plan-prop-why { font-size: .88rem; margin-top: 6px; line-height: 1.45; }

/* ── Dictation ─────────────────────────────────────────────────────────── */
.mic-btn { flex: none; gap: 7px; padding: 0 12px; }
.mic-btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.mic-btn.rec { background: var(--accent); border-color: var(--accent); color: #fff; }
.mic-btn.rec svg { fill: currentColor; stroke: none; }
.mic-btn.busy { opacity: .75; }
.mic-label { font-family: var(--font-mono); font-size: .72rem; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: no-preference) {
  .mic-btn.rec { animation: mic-pulse 1.6s ease-in-out infinite; }
  @keyframes mic-pulse { 50% { opacity: .72; } }
}

/* On-canvas headline editing: the overlay stands in for the drawn type, so
   it carries no chrome of its own beyond a caret and a faint edit outline. */
.head-edit {
  z-index: 70;
  margin: 0; padding: 0;
  background: rgba(0, 0, 0, .28);
  border: 1px dashed rgba(234, 228, 204, .55);
  border-radius: 3px;
  outline: none; resize: none; overflow: hidden;
  text-transform: uppercase;
  caret-color: #EAE4CC;
  text-shadow: 0 3px 14px rgba(0, 0, 0, .8);
  min-height: 0;
}

/* ── Filming view ────────────────────────────────────────────────────────
   An iPad propped next to the camera. Near-black because the screen is a
   light source pointed at the subject, and type sized to be read at arm's
   length rather than a desk's. */
body.filming .sidebar,
body.filming .tabbar,
body.filming .ask-float,
body.filming #back { display: none !important; }
/* Collapse the grid to one column. Hiding the sidebar takes it OUT of the
   grid, which drops .main into the sidebar's narrow first column: 290px of
   an 1152px iPad, with the outline wrapping four words at a time. */
body.filming .app { grid-template-columns: 1fr; }
/* .main is overflow:auto, which makes it a scroll CONTAINER without ever
   scrolling (the body does), so sticky inside it never sticks and the bar
   scrolled away mid-take. Hand scrolling back to the document. */
body.filming .main { padding: 0; max-width: none; overflow: visible; }
body.filming { background: #07070a; overscroll-behavior: none; }

.film {
  --film-scale: 1;
  min-height: 100dvh;
  background: #07070a;
  color: #f2efe8;
  display: flex; flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.film-bar {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 12px;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 10px;
  background: rgba(7,7,10,.94); border-bottom: 1px solid #1b1b22;
}
.film-title { flex: 1; min-width: 0; font-weight: 600; color: #8d8a95;
  font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.film-x, .film-btn {
  flex: none; background: #16161d; color: #f2efe8;
  border: 1px solid #2a2a34; border-radius: 10px;
  padding: 10px 16px; font: inherit; font-size: .9rem; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.film-size { display: flex; gap: 6px; flex: none; }
.film-awake {
  flex: none; font-size: .68rem; text-transform: uppercase; letter-spacing: .1em;
  color: #4fb783; display: inline-flex; align-items: center; gap: 6px;
}
.film-awake::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.film-awake.cold { color: #c9a227; }

.film-body {
  flex: 1; width: 100%;
  padding: clamp(14px, 3vw, 36px) clamp(16px, 4vw, 56px);
  /* Half a screen of air top and bottom so the FIRST and LAST beat can still
     sit dead centre rather than pinned to an edge. */
  padding-top: 45vh; padding-bottom: 45vh;
}
.film-head {
  font-size: calc(0.95rem * var(--film-scale));
  text-transform: uppercase; letter-spacing: .14em; color: #55525e;
  margin: 26px 0 10px;
}
.film-aside {
  font-size: calc(1.1rem * var(--film-scale));
  color: #55525e; margin: 0 0 14px; max-width: 26em;
}

/* One beat is live; its neighbours are context. Distance drives both size
   and fade, so the next line is readable and the one after is a shape. */
.film-step {
  display: flex; gap: clamp(10px, 2vw, 20px); align-items: baseline;
  width: 100%; text-align: left; background: none; border: none;
  color: #f2efe8; font: inherit;
  font-size: calc(1.2rem * var(--film-scale)); line-height: 1.32;
  padding: clamp(10px, 1.4vw, 18px) 0;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  opacity: calc(1 - var(--d, 0) * 0.2);
  transition: opacity .18s ease, font-size .18s ease, color .18s ease;
}
@media (prefers-reduced-motion: reduce) { .film-step { transition: none; } }
.film-step.is-past { color: #57545f; }
/* The live beat is the only thing being read; everything else is peripheral
   context. Roughly 2.7x the neighbours, not 1.8x, so it lands from across a
   room and the rest stays clearly subordinate. */
.film-step.is-cur {
  /* --fit is set per beat by fitCurrent(): a long beat shrinks to fit the
     screen instead of running under the bars. */
  font-size: calc(3.2rem * var(--film-scale) * var(--fit, 1));
  line-height: 1.2; color: #fffdf7; opacity: 1;
  padding: clamp(16px, 2vw, 26px) 0;
}
.film-step.opener .film-text {
  border-left: 4px solid var(--accent);
  padding-left: clamp(12px, 2vw, 22px);
}
.film-num {
  flex: none; font-family: var(--font-mono);
  font-size: .55em; color: #4e4b58;
  min-width: 1.8em; font-variant-numeric: tabular-nums;
}
.film-step.is-cur .film-num { color: var(--accent); }
.film-text { min-width: 0; max-width: 24em; }
/* The say line is the cue; the riff is what to talk around once it is said.
   Both scale off .film-step's font-size, so fitCurrent()'s --fit shrinks the
   pair together and the ratio between them holds at every size. */
.film-say { display: block; }
.film-riff {
  display: block; margin-top: .5em; white-space: pre-line;   /* joined lines */
  font-size: .62em; line-height: 1.4; color: #a8a4b0;
}
.film-step.is-past .film-riff { color: #4a4854; }
.film-empty { color: #8d8a95; font-size: 1.1rem; padding: 40px 0; }

.film-foot {
  /* Above the body: the 45vh of breathing room under the last beat otherwise
     lies on top of the footer and swallows taps on Next. */
  position: sticky; bottom: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background: rgba(7,7,10,.94); border-top: 1px solid #1b1b22;
}
.film-prog { font-family: var(--font-mono); font-size: .85rem; color: #6f6c78; font-variant-numeric: tabular-nums; }
.film-next { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
/* Thumb-sized, because it is pressed without looking. */
.film-foot .film-btn { padding: 14px 26px; }

/* Auto-advance. The coverage bar is the point: something that turns the page
   by itself has to show its reasoning, or it reads as haunted. */
.film-auto.on { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.film-step.is-cur { position: relative; }
.film-step.is-cur::after {
  content: "";
  position: absolute; left: 0; bottom: 4px; height: 3px; border-radius: 2px;
  width: calc(var(--cover, 0) * 100%);
  background: var(--accent); opacity: .8;
  transition: width .25s ease;
}
@media (prefers-reduced-motion: reduce) { .film-step.is-cur::after { transition: none; } }

/* Talk It Through leads the Ideate stage, with its conversations folded in
   underneath rather than under a second heading with a duplicate button. */
.ideate-talk { margin-bottom: 22px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.talk-list { display: flex; flex-direction: column; gap: 2px; margin-top: 12px; }
.talk-item {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 9px 12px; border-radius: 8px; border: 1px solid transparent;
  background: var(--panel-2); color: var(--text); font: inherit; cursor: pointer;
}
.talk-item:hover { border-color: var(--accent); }
.talk-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.talk-item::before {
  content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%;
  background: var(--muted);
}
.outputs-pick { margin-bottom: 22px; }

/* Say what each button does, right under them. */
.talk-legend { margin: 8px 0 0; padding-left: 1.1rem; color: var(--muted); font-size: .88rem; }
.talk-legend li { margin: 3px 0; }
.talk-list-head {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--muted); margin-bottom: 6px;
}
/* space-between spread the dot, the text and Open to three corners. The
   text takes the slack instead, so the dot stays beside what it marks. */
.talk-item { justify-content: flex-start; padding: 11px 12px; }
.talk-txt { min-width: 0; flex: 1; }
.talk-meta { font-size: .76rem; font-family: var(--font-mono); margin-top: 2px; }
.talk-open { flex: none; font-size: .8rem; color: var(--muted); }
.talk-item:hover .talk-open { color: var(--accent); }

/* The band's colour is reinforcement; this is the actual answer to "what
   does the colour mean". Small, so it labels without competing with the
   stage name. */
.step-state {
  margin-left: 10px;
  font-family: var(--font-mono);
  font-size: .6rem; font-weight: 400;
  text-transform: uppercase; letter-spacing: .1em;
  padding: 3px 8px; border-radius: 100px;
  vertical-align: middle; white-space: nowrap;
}
.step-state.done    { color: var(--ok);     background: color-mix(in srgb, var(--ok) 18%, transparent); }
.step-state.current { color: var(--accent-hi); background: color-mix(in srgb, var(--accent) 26%, transparent); }
.step-state.todo    { color: var(--muted);  background: var(--panel); }

/* The settle beat before an auto-advance. The bar completes and holds for a
   moment, so moving on reads as deliberate rather than as a lag. */
.film-step.is-cur.arming::after { width: 100%; }
@media (prefers-reduced-motion: no-preference) {
  .film-step.is-cur.arming::after { animation: arming 1.2s ease-out forwards; }
  @keyframes arming { from { opacity: .8; } to { opacity: .25; } }
}

/* ── Outline print card ───────────────────────────────────────────────────
   Half a letter sheet at the top of the page, cut along the dashed line. The
   card is a FIXED 8.5x5.5in box with overflow hidden: printOutlineCard()
   shrinks the type until the content fits, because a print box does not
   scroll - it just cuts. Off-screen (not display:none) so it can be measured
   before the print dialog opens. */
.print-sheet { position: absolute; left: -10000px; top: 0; }
.print-card {
  width: 8.5in; height: 5.5in; box-sizing: border-box;
  /* @page margin stays 0 so the browser has no margin box to print its own
     header and footer into. That makes this padding the ONLY breathing room
     on the sheet, so the top gets more than the sides. */
  padding: 0.6in 0.5in 0.45in;
  background: #fff; color: #000; overflow: hidden;
  border-bottom: 1px dashed #999;
  font-family: -apple-system, "Segoe UI", system-ui, sans-serif;
  font-size: calc(11pt * var(--pscale, 1));
  line-height: 1.28;
}
.print-head {
  font-size: .72em; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: #888; margin: .7em 0 .2em;
}
.print-head:first-of-type { margin-top: 0; }
.print-line { font-size: .92em; margin: 0 0 .45em; }
.print-beat { display: flex; gap: .5em; margin: 0 0 .85em; align-items: baseline; }
.print-num {
  flex: none; min-width: 1.1em; font-size: .78em; font-weight: 700;
  color: #999; text-align: right;
}
.print-inner { height: 100%; overflow: hidden; }
.print-stack { min-width: 0; }
.print-say { display: block; font-weight: 700; }
.print-close { font-weight: 700; }
.print-riff { display: block; font-size: .82em; color: #555; margin-top: .1em; white-space: pre-line; }

@media print {
  @page { size: letter portrait; margin: 0; }
  body > *:not(.print-sheet) { display: none !important; }
  .print-sheet { position: static; left: auto; }
  .print-card { border-bottom: 1px dashed #bbb; }
}

/* ── Outline bullets: spacing is a DISPLAY rule ───────────────────────────
   Toast UI rewrites the markdown on every change: "- " normalizes to "*",
   and a loose list collapses to a tight one. So blank lines between bullets
   cannot survive a round trip through the editor and must not be what the
   spacing depends on. One-line beats scan by the gap between them, so the
   gap is set here instead of stored in the document. */
.plan-editor .toastui-editor-contents ul > li,
.plan-editor .toastui-editor-contents ol > li { margin-bottom: .75em; }
.plan-editor .toastui-editor-contents ul > li:last-child,
.plan-editor .toastui-editor-contents ol > li:last-child { margin-bottom: 0; }

/* The word-for-word block on the print card. Smaller than the beats on
   purpose: the hook and intro are read deliberately at the start of a take,
   the beats are glanced at from behind the camera. */
.print-verbatim {
  border-bottom: 1pt solid #ccc;
  padding-bottom: .5em; margin-bottom: .7em;
}
.print-vlabel {
  font-size: .58em; font-weight: 700; text-transform: uppercase;
  letter-spacing: .09em; color: #999; margin-bottom: .25em;
}
.print-vline { font-size: .72em; line-height: 1.35; margin-bottom: .3em; }
.print-vline:last-child { margin-bottom: 0; }