/* Composer — the Cinema-Studio-style prompt bar, director panels, preview and fire gate.
   Every class is prefixed cp- ; tokens and shared components come from base.css. */

/* ---------- frame ---------- */
.cp {
  position: relative; min-width: 0;
  border-radius: var(--r-xl); border: 1px solid var(--line-2);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(159, 211, 224, .06), transparent 55%),
    linear-gradient(180deg, rgba(13, 31, 50, .9), rgba(4, 11, 19, .94));
  box-shadow: var(--shadow), inset 0 1px 0 rgba(159, 211, 224, .07);
  backdrop-filter: blur(22px) saturate(1.25);
  transition: border-color var(--t), box-shadow var(--t);
}
.cp:focus-within { border-color: rgba(201, 160, 99, .42); box-shadow: var(--shadow), 0 0 0 4px rgba(201, 160, 99, .06), inset 0 1px 0 rgba(159, 211, 224, .07); }
.cp-hero { max-width: 1120px; margin: 0 auto; }
.cp-dock { position: sticky; bottom: 14px; z-index: 20; }
.cp-frame { display: grid; grid-template-columns: 78px minmax(0, 1fr); min-width: 0; }
.cp.collapsed .cp-frame { display: none; }
.cp-main { min-width: 0; padding: 12px 14px 12px 12px; display: flex; flex-direction: column; gap: 8px; container: cp-main / inline-size; }

/* The docked composer never takes more than ~60% of the window: the head, references and settings keep
   their size and the writing area (sections list or free box) and the checker list scroll inside.
   The checker gives up its room first (flex-shrink 4). */
.cp-dock .cp-main { max-height: max(340px, 58vh); }
.cp-dock .cp-main > * { flex: none; }
.cp-dock .cp-editor { flex: 0 1 auto; min-height: 0; display: flex; flex-direction: column; }
.cp-dock .cp-editor > .cp-free { flex: 0 1 auto; min-height: calc(1.62em + 14px); max-height: 32vh; }
.cp-dock .cp-secwrap { flex: 0 1 auto; min-height: 112px; }
.cp-dock .cp-secs-bar { flex: none; }
.cp-dock .cp-secs { flex: 0 1 auto; min-height: 0; max-height: none; }
.cp-dock .cp-lint { flex: 0 4 auto; min-height: 0; }
.cp-dock .cp-lint-head { flex: none; }
.cp-dock .cp-lint-list { flex: 0 1 auto; min-height: 0; max-height: 22vh; overflow-y: auto; overscroll-behavior: contain; }
.cp-flash { animation: cp-flash .7s var(--ease); }
@keyframes cp-flash { 0% { box-shadow: var(--shadow), 0 0 0 0 rgba(116, 173, 155, .5); } 100% { box-shadow: var(--shadow), 0 0 0 14px rgba(116, 173, 155, 0); } }

/* Image / Video rail */
.cp-rail { display: flex; flex-direction: column; gap: 6px; padding: 12px 8px; border-right: 1px solid var(--line); }
.cp-kind {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; height: 62px; width: 100%;
  border-radius: 13px; border: 1px solid transparent; background: transparent; color: var(--muted); cursor: pointer;
  font: 500 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; transition: all var(--t);
}
.cp-kind:hover { color: var(--ink); background: rgba(159, 211, 224, .06); }
.cp-kind.active { color: var(--bronze-hi); border-color: rgba(201, 160, 99, .5); background: linear-gradient(180deg, rgba(201, 160, 99, .2), rgba(201, 160, 99, .07)); box-shadow: inset 0 1px 0 rgba(240, 220, 174, .18), 0 6px 18px rgba(201, 160, 99, .1); }

/* ---------- top row: director cards + tools ----------
   All five cards are always visible: they share the row with the tools only while they get at least
   600 px; otherwise the tools wrap onto their own row. The cards then shrink in steps (container
   queries below) down to icon + label, never scrolling or clipping. */
.cp-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; min-width: 0; }
.cp-cards {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; flex: 1 1 600px; min-width: 0; padding: 1px;
  container: cp-cards / inline-size;
}
.cp-card {
  position: relative; display: flex; align-items: center; gap: 10px; min-width: 0; height: 52px; padding: 0 12px 0 9px;
  border-radius: 13px; border: 1px solid var(--line); background: rgba(2, 5, 9, .42); color: var(--ink); text-align: left; cursor: pointer;
  transition: border-color var(--t), background var(--t), transform var(--t);
}
.cp-card:hover { border-color: var(--line-2); background: rgba(15, 33, 53, .6); }
.cp-card:active { transform: translateY(1px); }
.cp-card-ico { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 10px; background: rgba(159, 211, 224, .07); color: var(--muted); transition: all var(--t); }
.cp-card-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cp-card-text small { font: 500 9.5px/1.1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.cp-card-text b { font: 600 12.5px/1.2 var(--sans); color: var(--muted); }
.cp-card.set { border-color: rgba(201, 160, 99, .38); background: linear-gradient(180deg, rgba(201, 160, 99, .1), rgba(2, 5, 9, .4)); }
.cp-card.set .cp-card-ico { color: var(--bronze-hi); background: rgba(201, 160, 99, .16); }
.cp-card.set .cp-card-text b { color: var(--pearl); }
.cp-card.warn { border-color: rgba(196, 72, 63, .6); }
.cp-card.warn .cp-card-ico { color: #f08a82; background: rgba(196, 72, 63, .15); }
.cp-card-sw { position: absolute; left: 12px; right: 12px; bottom: 5px; height: 3px; display: flex; border-radius: 3px; overflow: hidden; opacity: .9; }
.cp-card-sw i { flex: 1; }

/* Under ~150 px a card: smaller icon, tighter spacing, label may take two lines. */
@container cp-cards (max-width: 760px) {
  .cp-card { gap: 7px; padding: 0 8px 0 6px; }
  .cp-card-ico { width: 26px; height: 26px; border-radius: 8px; }
  .cp-card-text { gap: 2px; }
  .cp-card-text small { font-size: 9px; letter-spacing: .07em; }
  .cp-card-text b { font-size: 12px; }
  .cp-card-sw { left: 8px; right: 8px; }
}
/* Under ~105 px a card: icon above the label; the value moves to the tooltip and the accessible name
   (a set card stays bronze, so its state still shows). */
@container cp-cards (max-width: 560px) {
  .cp-cards .cp-card { flex-direction: column; justify-content: center; gap: 4px; height: auto; min-height: 48px; padding: 5px 4px 6px; text-align: center; }
  .cp-card-ico { width: 22px; height: 22px; border-radius: 7px; }
  .cp-card-ico .icon svg { width: 14px; height: 14px; }
  .cp-card-text { align-items: center; max-width: 100%; }
  .cp-card-text small { font-size: 8.5px; letter-spacing: .05em; line-height: 1.05; }
  .cp-card-text b { display: none; }
  .cp-card-sw { bottom: 3px; height: 2px; }
}
/* Phones: three cards a row, so labels never have to break inside a word. (A container can't query
   itself, so this asks the composer's main column.) */
@container cp-main (max-width: 440px) {
  .cp-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.cp-tools { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 4px; flex: 0 1 auto; min-width: 0; margin-left: auto; }
.cp-modes > button { height: 26px; padding: 0 11px; font-size: 12.5px; }
.cp-count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--bronze-dim); color: var(--bronze-hi); font: 500 10.5px/1 var(--mono); }

/* ---------- reference strip ---------- */
.cp-refs { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cp-refs-label { flex: none; color: var(--faint); }
.cp-refs-over { flex: 0 1 280px; min-width: 150px; display: inline-flex; align-items: flex-start; gap: 6px; color: #ffc2bc; font-size: 12px; line-height: 1.35; }
.cp-refs-over .icon { flex: none; margin-top: 2px; color: #f08a82; }
.cp-refs-list { display: flex; gap: 6px; overflow-x: auto; min-width: 0; padding: 2px 1px 4px; scrollbar-width: thin; }
.cp-ref {
  position: relative; display: flex; align-items: center; gap: 8px; flex: none; height: 46px; max-width: 210px; padding: 4px 10px 4px 4px;
  border-radius: 11px; border: 1px solid var(--line); background: rgba(2, 5, 9, .5); color: var(--ink); text-align: left; cursor: pointer;
  transition: border-color var(--t), background var(--t); animation: rise .25s var(--ease) both;
}
button.cp-ref:hover { border-color: rgba(116, 173, 155, .5); background: rgba(116, 173, 155, .07); }
.cp-ref.upload { cursor: default; padding-right: 28px; }
.cp-ref.over { border-color: rgba(196, 72, 63, .7); box-shadow: inset 0 0 0 1px rgba(196, 72, 63, .3); }
.cp-ref.pending { opacity: .8; }
.cp-ref-thumb { width: 36px; height: 36px; flex: none; border-radius: 8px; display: grid; place-items: center; color: var(--muted); background: #03080e; position: relative; overflow: hidden; }
.cp-ref-thumb img { object-position: 50% 22%; }
.cp-ref:hover .cp-ref-thumb img { transform: scale(1.06); }
.cp-ref-play { position: absolute; right: 2px; bottom: 2px; width: 14px; height: 14px; border-radius: 50%; display: grid; place-items: center; background: rgba(2, 5, 9, .8); color: var(--pearl); }
.cp-ref-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cp-ref-meta b { font: 500 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--bronze-hi); }
.cp-ref-meta small { font: 11.5px/1.2 var(--mono); color: var(--verdigris); max-width: 150px; }
.cp-ref.upload .cp-ref-meta small { color: var(--muted); }
.cp-ref-x { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); width: 18px; height: 18px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(159, 211, 224, .1); color: var(--muted); cursor: pointer; }
.cp-ref-x:hover { background: rgba(196, 72, 63, .3); color: #fff; }

/* ---------- prompt editor (mirror + transparent textarea) ---------- */
.cp-editor { min-width: 0; }
.cp-scroll { overflow-y: auto; overscroll-behavior: contain; }
.cp-free { max-height: 32vh; padding: 2px 4px 2px 2px; }
.cp-hero .cp-free { max-height: 42vh; }
.cp-ed { position: relative; min-width: 0; }
.cp-ed-mirror, .cp-ed-input {
  display: block; width: 100%; margin: 0; border: 0; padding: 6px 4px;
  font: 400 15px/1.62 var(--sans); letter-spacing: 0; word-spacing: 0; text-transform: none; text-indent: 0;
  white-space: pre-wrap; overflow-wrap: break-word; word-break: normal; tab-size: 4;
  font-variant-ligatures: none; font-kerning: normal; text-rendering: optimizeLegibility;
}
.cp-hero .cp-free .cp-ed-mirror, .cp-hero .cp-free .cp-ed-input { font-size: 16.5px; }
.cp-ed-mirror { color: var(--pearl); pointer-events: none; }
.cp-ed.rows-1 .cp-ed-mirror { min-height: calc(1.62em + 12px); }
.cp-ed.rows-2 .cp-ed-mirror { min-height: calc(1.62em * 2 + 12px); }
.cp-ed.rows-3 .cp-ed-mirror { min-height: calc(1.62em * 3 + 12px); }
.cp-ed.rows-4 .cp-ed-mirror { min-height: calc(1.62em * 4 + 12px); }
.cp-ed-input {
  position: absolute; inset: 0; height: 100%; resize: none; overflow: hidden; outline: none; box-shadow: none;
  background: transparent; color: transparent; caret-color: var(--bronze-hi); -webkit-text-fill-color: transparent;
}
.cp-ed-input::placeholder { color: var(--faint); -webkit-text-fill-color: var(--faint); opacity: 1; }
.cp-ed-input::selection { background: rgba(201, 160, 99, .34); }
.cp-ed.readonly .cp-ed-mirror { color: var(--muted); }
.cp-ed.readonly .cp-ed-input { cursor: default; }
.cp-caret { display: inline; }

.cp-hl { border-radius: 4px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.cp-hl-tag { color: #a6dccb; background: rgba(116, 173, 155, .17); box-shadow: 0 0 0 2px rgba(116, 173, 155, .17); }
.cp-hl-bad { color: #ffb0a9; background: rgba(196, 72, 63, .16); box-shadow: 0 0 0 2px rgba(196, 72, 63, .16); text-decoration: underline wavy var(--blood); text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-skip-ink: none; }
.cp-hl-warn { text-decoration: underline wavy rgba(232, 194, 106, .95); text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-skip-ink: none; background: rgba(232, 194, 106, .07); }
.cp-hl-error { text-decoration: underline wavy var(--blood); text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-skip-ink: none; background: rgba(196, 72, 63, .1); }
.cp-hl-info { text-decoration: underline dotted rgba(159, 211, 224, .8); text-underline-offset: 4px; }

/* ---------- sections ---------- */
.cp-secwrap { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--line); border-radius: 14px; background: rgba(2, 5, 9, .32); }
.cp-secs-bar { display: flex; align-items: center; gap: 8px; padding: 7px 10px 7px 14px; border-bottom: 1px solid var(--line); }
.cp-secs-bar .eyebrow { color: var(--bronze); }
.cp-secs-count { color: var(--faint); font-size: 11px; }
.cp-secs { max-height: 40vh; padding: 2px 0; }
.cp-hero .cp-secs { max-height: 54vh; }
.cp-sec { border-bottom: 1px solid rgba(159, 211, 224, .07); padding: 0 10px 0 6px; transition: background var(--t); }
.cp-sec:last-child { border-bottom: 0; }
.cp-sec:focus-within { background: rgba(159, 211, 224, .035); }
.cp-sec-head { display: flex; align-items: center; gap: 6px; min-height: 34px; }
.cp-sec-toggle { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; height: 34px; padding: 0 6px; border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; text-align: left; }
.cp-sec-toggle.static { cursor: default; }
.cp-sec-toggle:not(.static):hover { color: var(--ink); }
.cp-sec-toggle > .icon:first-child { transition: transform var(--t); color: var(--faint); }
.cp-sec.open .cp-sec-toggle:not(.static) > .icon:first-child { transform: rotate(90deg); }
.cp-sec-name { flex: none; font: 500 10.5px/1 var(--mono); letter-spacing: .14em; color: var(--muted); }
.cp-sec.filled .cp-sec-name { color: var(--pearl); }
.cp-sec.filled .cp-sec-name::before { content: ""; display: inline-block; width: 5px; height: 5px; margin: 0 7px 1px 0; border-radius: 50%; background: var(--verdigris); vertical-align: middle; }
.cp-sec-peek { flex: 1 1 auto; color: var(--faint); font-size: 12.5px; }
.cp-sec.open .cp-sec-peek { display: none; }
.cp-sec-len { color: var(--faint); font-size: 10.5px; min-width: 26px; text-align: right; }
.cp-sec-body { display: none; padding: 0 4px 10px 28px; }
.cp-sec.open .cp-sec-body { display: block; }
.cp-sec .cp-ed-mirror, .cp-sec .cp-ed-input { font-size: 14px; padding: 2px 4px; }
.cp-sec .cp-ed.rows-1 .cp-ed-mirror { min-height: calc(1.62em + 4px); }
.cp-lock.on { color: var(--bronze-hi); background: var(--bronze-dim); }
.cp-sec.locked .cp-sec-body { background: repeating-linear-gradient(135deg, transparent 0 8px, rgba(201, 160, 99, .035) 8px 16px); border-radius: 8px; }
.cp-sec.locked .cp-sec-name::after { content: "locked"; margin-left: 8px; color: var(--bronze); font-size: 9.5px; }
.cp-snip { color: var(--faint); }
.cp-snip:hover:not(:disabled) { color: var(--bronze-hi); }

.cp-sec.auto .cp-sec-name { color: var(--shaft); }
.cp-sec.auto .badge { height: 17px; font-size: 9.5px; }
.cp-auto-sw small { color: var(--faint); font: 500 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.cp-auto-line { color: #cfe9f0; font-size: 12px; line-height: 1.5; padding: 2px 0 2px 2px; }
.cp-sec.auto.off .cp-auto-line { color: var(--faint); text-decoration: line-through; text-decoration-color: rgba(93, 116, 128, .6); }
.cp-auto-fields { display: flex; flex-wrap: wrap; gap: 8px 12px; margin-top: 8px; align-items: flex-end; }
.cp-auto-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.cp-auto-field .eyebrow { font-size: 9.5px; color: var(--faint); }
.cp-auto-field .input, .cp-auto-field .select { min-height: 30px; height: 30px; padding: 4px 9px; font-size: 12.5px; }
.cp-auto-field .select { padding-right: 28px; }
.cp-num { width: 72px; }
.cp-times { width: 170px; }
.cp-auto-len { height: 30px; display: inline-flex; align-items: center; color: var(--muted); font-size: 12px; }
.cp-auto-probs { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; }
.cp-auto-probs > span { display: inline-flex; gap: 6px; align-items: center; color: #f3dca4; font-size: 12px; }

/* ---------- checker ---------- */
.cp-lint { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.cp-lint-ok { display: inline-flex; align-items: center; gap: 6px; color: rgba(143, 224, 181, .75); font: 11.5px var(--mono); letter-spacing: .02em; padding: 0 4px; }
.cp-lint-head { display: flex; align-items: center; gap: 6px; }
.cp-lint-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.cp-lint-item { display: flex; align-items: center; gap: 8px; min-width: 0; padding-right: 2px; border-radius: 9px; transition: background var(--t); }
.cp-lint-item:hover { background: rgba(159, 211, 224, .05); }
.cp-lint-msg { display: flex; align-items: flex-start; gap: 8px; flex: 1 1 auto; min-width: 0; padding: 5px 8px; border: 0; background: none; color: var(--muted); text-align: left; font-size: 12.5px; line-height: 1.4; cursor: pointer; border-radius: 9px; }
.cp-lint-msg:disabled { cursor: default; }
.cp-lint-msg .icon { margin-top: 1px; }
.cp-lint-msg small { margin-left: auto; padding-left: 8px; color: var(--faint); }
.cp-lint-item.error .cp-lint-msg { color: #ffc2bc; } .cp-lint-item.error .icon { color: #f08a82; }
.cp-lint-item.warn .cp-lint-msg { color: #f3dca4; } .cp-lint-item.warn .icon { color: var(--warn); }
.cp-lint-item.info .cp-lint-msg { color: #cfe9f0; } .cp-lint-item.info .icon { color: var(--shaft); }
.cp-lint-item .btn { flex: none; }

/* ---------- settings bar ---------- */
.cp-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding-top: 10px; border-top: 1px solid var(--line); min-width: 0; }
.cp-model { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 99px; background: rgba(159, 211, 224, .07); color: var(--pearl); font: 500 12px/1 var(--sans); }
.cp-model .icon { color: var(--bronze); }
.cp-mock { padding: 2px 6px; border-radius: 99px; background: rgba(232, 194, 106, .14); color: var(--warn); font: 500 9.5px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.cp-sel, .cp-toggle, .cp-stepper {
  position: relative; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 99px;
  border: 1px solid var(--line); background: rgba(2, 5, 9, .45); color: var(--muted); font: 500 12.5px/1 var(--sans); transition: border-color var(--t), color var(--t), background var(--t);
}
.cp-sel:hover, .cp-toggle:hover, .cp-stepper:hover { border-color: var(--line-2); color: var(--ink); }
.cp-sel:focus-within { border-color: rgba(201, 160, 99, .6); }
.cp-sel select { appearance: none; border: 0; background: transparent; color: var(--ink); font: inherit; padding: 0 14px 0 0; height: 100%; cursor: pointer; outline: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 5px) 54%, 100% 54%; background-size: 5px 5px; background-repeat: no-repeat; }
.cp-sel select option { background: var(--surface-2); color: var(--ink); }
.cp-ratio-ico { display: inline-block; border: 1.5px solid currentColor; border-radius: 3px; opacity: .8; flex: none; }
.cp-toggle { cursor: pointer; }
.cp-toggle.on { color: var(--bronze-hi); border-color: rgba(201, 160, 99, .5); background: var(--bronze-dim); }
.cp-stepper { padding: 0 3px; gap: 2px; }
.cp-stepper button { width: 24px; height: 24px; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: var(--muted); cursor: pointer; }
.cp-stepper button:hover:not(:disabled) { background: rgba(159, 211, 224, .1); color: var(--ink); }
.cp-stepper button:disabled { opacity: .3; cursor: not-allowed; }
.cp-stepper b { color: var(--ink); font: 600 12.5px/1 var(--mono); min-width: 10px; text-align: center; }
.cp-stepper small { color: var(--faint); font: 11px var(--mono); margin-right: 2px; }
.cp-target { display: inline-flex; align-items: center; gap: 6px; max-width: 240px; height: 30px; padding: 0 6px; color: var(--faint); font: 11.5px var(--mono); }
.cp-target .icon { opacity: .7; flex: none; }
.cp-genwrap { display: inline-flex; }
.cp-generate { --h: 46px; padding: 0 20px 0 16px; border-radius: 14px; gap: 10px; }
.cp-gen-text { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; line-height: 1; }
.cp-gen-text b { font: 600 14px/1 var(--sans); letter-spacing: .01em; }
.cp-gen-text small { font: 500 10px/1 var(--mono); letter-spacing: .04em; opacity: .72; }
.cp-generate:not(:disabled) { animation: cp-glow 3.6s ease-in-out infinite; }
@keyframes cp-glow { 0%, 100% { box-shadow: 0 6px 20px rgba(201, 160, 99, .18), inset 0 1px 0 rgba(255, 255, 255, .35); } 50% { box-shadow: 0 8px 30px rgba(201, 160, 99, .34), inset 0 1px 0 rgba(255, 255, 255, .35); } }

/* ---------- folded dock ---------- */
.cp-mini { display: flex; align-items: center; gap: 10px; height: 50px; padding: 0 10px; min-width: 0; }
.cp-mini-kind { display: inline-flex; align-items: center; gap: 6px; flex: none; color: var(--bronze-hi); font: 500 10.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.cp-mini-text { flex: 1 1 auto; min-width: 0; height: 34px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line); background: rgba(2, 5, 9, .5); color: var(--pearl); text-align: left; cursor: text; font-size: 13.5px; }
.cp-mini-text.empty { color: var(--faint); }
.cp-mini-target { flex: 0 1 200px; color: var(--faint); font-size: 11px; }

/* ---------- drag and drop ---------- */
.cp-drop { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; border-radius: inherit; background: rgba(2, 5, 9, .84); border: 1.5px dashed rgba(201, 160, 99, .7); pointer-events: none; animation: fade .15s ease both; }
.cp-drop-inner { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--muted); text-align: center; }
.cp-drop-inner .icon { color: var(--bronze); }
.cp-drop-inner strong { font: 500 15px var(--display); letter-spacing: .1em; color: var(--pearl); }

/* ---------- floating tooltip (lives on <body>, so scroll boxes never clip it) ---------- */
.cp-tipfloat {
  position: fixed; z-index: 90; max-width: min(340px, calc(100vw - 16px)); padding: 5px 9px; border-radius: 7px;
  background: #11253a; border: 1px solid var(--line-2); color: var(--pearl); box-shadow: var(--shadow-sm);
  font: 500 11.5px/1.35 var(--sans); letter-spacing: 0; text-transform: none; pointer-events: none; animation: fade .12s ease both;
}

/* ---------- @ autocomplete (lives on <body>) ---------- */
.cp-ac { position: fixed; z-index: 70; display: flex; flex-direction: column; gap: 2px; max-height: min(440px, 60vh); overflow: auto; padding: 6px; border-radius: 14px; border: 1px solid var(--line-2); background: linear-gradient(180deg, #0c1d30, #07121f); box-shadow: var(--shadow); animation: rise .14s var(--ease) both; }
.cp-ac-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 8px 6px; }
.cp-ac-head .eyebrow { color: var(--verdigris); }
.cp-ac-head .mono { font-size: 10.5px; }
.cp-ac-item { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; padding: 5px 8px 5px 5px; border: 0; border-radius: 10px; background: none; color: var(--ink); text-align: left; cursor: pointer; }
.cp-ac-item.active { background: rgba(116, 173, 155, .13); box-shadow: inset 0 0 0 1px rgba(116, 173, 155, .28); }
.cp-ac-thumb { width: 40px; height: 40px; border-radius: 9px; display: grid; place-items: center; color: var(--faint); }
.cp-ac-thumb.character img { object-position: 50% 20%; }
.cp-ac-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cp-ac-text b { font-weight: 600; font-size: 13px; }
.cp-ac-text small { color: var(--verdigris); font-size: 11.5px; }
.cp-ac-kind { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; max-width: 120px; font: 500 9.5px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.cp-ac-kind small { font: 10.5px var(--sans); letter-spacing: 0; text-transform: none; max-width: 120px; }
.cp-ac-empty { padding: 10px 10px 12px; color: var(--muted); font-size: 12.5px; }
.cp-ac-foot { display: flex; gap: 12px; padding: 7px 8px 3px; margin-top: 2px; border-top: 1px solid var(--line); color: var(--faint); font-size: 10.5px; }
.cp-ac-foot kbd { height: 17px; min-width: 17px; font-size: 10px; margin-right: 2px; }

/* ---------- director panels ---------- */
.cp-pn-modal .modal-head .cp-pn-headicon { order: -1; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; color: var(--bronze-hi); background: var(--bronze-dim); border: 1px solid rgba(201, 160, 99, .3); }
.cp-pn { display: flex; flex-direction: column; gap: 14px; }
.cp-pn-intro { color: var(--muted); font-size: 17px; line-height: 1.35; max-width: 720px; }
.cp-pn-tabs { align-self: flex-start; flex-wrap: wrap; }
.cp-pn-tabs > button { height: 32px; padding: 0 14px; }
.cp-pn-tabs > button small { font-size: 10.5px; color: var(--bronze); max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-pn-block { display: flex; flex-direction: column; gap: 10px; }
.cp-pn-block-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.cp-pn-block-head h3 { font: 500 13px/1.2 var(--display); letter-spacing: .1em; color: var(--pearl); }
.cp-pn-block-head p { color: var(--faint); font-size: 12.5px; }
.cp-pn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.cp-pn-grid.compact { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.cp-pn-grid.palettes { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.cp-pn-tile {
  position: relative; display: flex; flex-direction: column; gap: 7px; min-height: 96px; padding: 12px 14px; text-align: left; cursor: pointer;
  border-radius: 14px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(15, 33, 53, .5), rgba(4, 11, 19, .6)); color: var(--ink);
  transition: border-color var(--t), background var(--t), transform var(--t), box-shadow var(--t); animation: rise .3s var(--ease) both;
}
.cp-pn-grid.compact .cp-pn-tile { min-height: 82px; padding: 10px 12px; }
.cp-pn-tile:hover { border-color: var(--line-2); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.cp-pn-tile.auto { border-style: dashed; background: transparent; }
.cp-pn-tile.active { border-color: rgba(201, 160, 99, .7); background: linear-gradient(180deg, rgba(201, 160, 99, .17), rgba(201, 160, 99, .04)); box-shadow: 0 0 0 1px rgba(201, 160, 99, .25), 0 10px 28px rgba(201, 160, 99, .1); }
.cp-pn-tile-head { display: flex; align-items: center; gap: 8px; }
.cp-pn-tile-head strong { font: 600 13.5px/1.2 var(--sans); }
.cp-pn-tile.active .cp-pn-tile-head strong { color: var(--bronze-hi); }
.cp-pn-tile-head .badge { height: 17px; font-size: 9px; }
.cp-pn-check { margin-left: auto; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--bronze); color: #1a1206; }
.cp-pn-sentence { font: italic 400 14.5px/1.35 var(--serif); color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cp-pn-grid.compact .cp-pn-sentence { font-size: 13.5px; }
.cp-pn-tile.auto .cp-pn-sentence { color: var(--faint); }
.cp-pn-swatches { display: flex; height: 34px; border-radius: 9px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.cp-pn-swatches i { flex: 1; }
.cp-pn-swatches.lg { height: 38px; width: 180px; flex: none; }
.cp-pn-modal .modal-foot { align-items: center; }
.cp-pn-preview { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; margin-right: 12px; }
.cp-pn-preview .eyebrow { color: var(--bronze); font-size: 9.5px; }
.cp-pn-preview-text { font: italic 14px/1.35 var(--serif); color: var(--muted); }
.cp-pn-new { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 14px; border: 1px dashed var(--line-2); background: rgba(2, 5, 9, .35); }
.cp-pn-newgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 12px; }
.cp-pn-newrow { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cp-pn-colors { display: flex; gap: 6px; }
.cp-pn-color { width: 34px; height: 34px; padding: 0; border: 1px solid var(--line-2); border-radius: 10px; background: none; cursor: pointer; }
.cp-pn-color::-webkit-color-swatch-wrapper { padding: 3px; }
.cp-pn-color::-webkit-color-swatch { border: 0; border-radius: 7px; }
.cp-pn-color::-moz-color-swatch { border: 0; border-radius: 7px; }
.cp-pn-newpreview { flex: 1 1 auto; display: flex; }
.cp-pn-newrow .btn { margin-left: auto; }

/* ---------- preview ---------- */
.cp-pv-text { max-height: 340px; font-size: 12.5px; }
.cp-pv-refs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.cp-pv-ref { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cp-pv-ref .thumb { aspect-ratio: 4 / 3; display: grid; place-items: center; color: var(--faint); border: 1px solid var(--line); }
.cp-pv-ref .thumb img { object-position: 50% 25%; }
.cp-pv-ref figcaption { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 12px; color: var(--muted); }
.cp-pv-ref figcaption b { font: 500 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--bronze-hi); }
.cp-pv-ref figcaption small { font: 11.5px var(--mono); color: var(--verdigris); }
.cp-pv-cost p { margin-top: 4px; color: var(--muted); }
.cp-pv-cost b { color: var(--bronze-hi); font: 600 16px var(--mono); }
.cp-pv-tech summary, .cp-gate details summary { cursor: pointer; color: var(--muted); font-size: 12.5px; padding: 4px 0; }
.cp-pv-tech summary:hover, .cp-gate details summary:hover { color: var(--ink); }
.cp-pv-tech pre { margin-top: 8px; }

/* ---------- fire gate ---------- */
.cp-gate-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 1px; margin: 0; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: var(--line); }
.cp-gate-fact { display: flex; flex-direction: column; gap: 6px; padding: 11px 13px; background: #081525; min-width: 0; }
.cp-gate-fact dt { font-size: 9.5px; color: var(--faint); }
.cp-gate-fact dd { margin: 0; font: 500 14px/1.2 var(--sans); color: var(--pearl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-gate .cp-pv-refs { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.cp-gate .cp-pv-ref figcaption span { display: none; }
.cp-gate-cost { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 16px; row-gap: 4px; align-items: baseline; padding: 14px 16px; border-radius: 14px; border: 1px solid rgba(201, 160, 99, .3); background: linear-gradient(135deg, rgba(201, 160, 99, .12), rgba(201, 160, 99, .02)); }
.cp-gate-cost .eyebrow { grid-column: 1 / -1; color: var(--bronze); }
.cp-gate-cost strong { font: 500 28px/1 var(--mono); color: var(--bronze-hi); }
.cp-gate-cost .muted { font-size: 12.5px; }
.cp-gate-warn summary { display: flex; align-items: center; gap: 7px; color: #f3dca4 !important; }
.cp-gate-warn ul { margin: 6px 0 0; padding-left: 22px; color: #f3dca4; font-size: 12.5px; display: flex; flex-direction: column; gap: 4px; }
.cp-gate-text pre { margin-top: 8px; max-height: 240px; }

/* ---------- versions + diff ---------- */
.cp-vers { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cp-ver { display: grid; grid-template-columns: 22px 44px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(2, 5, 9, .35); transition: border-color var(--t); }
.cp-ver:hover { border-color: var(--line-2); }
.cp-ver.current { border-color: rgba(201, 160, 99, .5); box-shadow: inset 3px 0 0 var(--bronze); }
.cp-ver-n { color: var(--bronze-hi); font-size: 13px; }
.cp-ver-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cp-ver-main b { font-weight: 600; }
.cp-ver-main small { color: var(--faint); font-size: 12px; }
.cp-ver-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; color: var(--muted); font-size: 12px; white-space: nowrap; }
.cp-ver-meta .row { gap: 4px; }
.cp-vers-hint { margin-right: auto; font-size: 12px; }
.cp-diff { font: 12.5px/1.55 var(--mono); border: 1px solid var(--line); border-radius: 12px; overflow: auto; max-height: 64vh; background: rgba(2, 5, 9, .6); padding: 6px 0; }
.cp-diff-line { display: grid; grid-template-columns: 26px 1fr; padding: 0 12px 0 0; white-space: pre-wrap; word-break: break-word; color: #b9c8cf; }
.cp-diff-sign { text-align: center; color: var(--faint); user-select: none; }
.cp-diff-line.add { background: rgba(143, 224, 181, .09); color: #c6f0d8; }
.cp-diff-line.add .cp-diff-sign { color: var(--ok); }
.cp-diff-line.del { background: rgba(196, 72, 63, .11); color: #ffc2bc; }
.cp-diff-line.del .cp-diff-sign { color: #f08a82; }
.cp-diff-line.same { color: var(--muted); }

/* ---------- responsive ----------
   Button labels (.cp-tl) are hidden by the composer's own width, not the window's, and only visually:
   every such button also has an aria-label. */
@container cp-main (max-width: 900px) {
  .cp-bar .cp-tl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .cp-target { max-width: 160px; }
}
@container cp-main (max-width: 560px) {
  .cp-tools .cp-tl, .cp-snip .cp-tl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .cp-refs-over { flex-basis: 200px; min-width: 120px; }
}
@media (max-width: 900px) {
  .cp-frame { grid-template-columns: minmax(0, 1fr); }
  .cp-rail { flex-direction: row; padding: 10px 12px 0; border-right: 0; }
  .cp-kind { flex-direction: row; height: 34px; gap: 7px; }
  .cp-main { padding: 10px 12px 12px; }
  .cp-card { height: 48px; }
  .cp-pn-newgrid { grid-template-columns: 1fr; }
  .cp-ver { grid-template-columns: 22px 40px minmax(0, 1fr); }
  .cp-ver-meta, .cp-ver > .btn { grid-column: 3; justify-self: start; align-items: flex-start; }
}
@media (max-width: 520px) {
  .cp-dock { bottom: 8px; }
  .cp-genwrap { flex: 1 1 100%; }
  .cp-generate { width: 100%; justify-content: center; }
  .cp-target, .cp-mini-target, .cp-model .cp-mock { display: none; }
  .cp-sec-body { padding-left: 8px; }
  .cp-times { width: 130px; }
  .cp-ed-mirror, .cp-ed-input { font-size: 16px; } /* no zoom-on-focus on phones */
  .cp-pn-grid, .cp-pn-grid.compact, .cp-pn-grid.palettes { grid-template-columns: 1fr; }
}