/* designer page: only what castomo-dashkit does not already draw; kit tokens only (no colour literals, no font-family, no pixel font sizes). */

/* The words a screen reader hears when a block moves; present, never seen. */
.designer-live { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Columns of cards: a column shorter than its neighbour keeps its cards their own height instead of stretching the first one. */
[id^="designer-panel"] .split > .stack { align-content: start; }

.designer-purpose { color: var(--ink-2); align-self: end; }

/* Two columns of fields on a wide card, one on a narrow one; a long field takes the full row. */
.designer-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2) var(--gap); }
.designer-fields > * { min-width: 0; }
.designer-wide { grid-column: 1 / -1; }
@media (max-width: 640px) { .designer-fields { grid-template-columns: minmax(0, 1fr); } }

/* ---------- The block list ---------- */
.designer-blocks { list-style: none; display: grid; gap: var(--s1); margin: 0; padding: 0; }
.designer-reorder-hint { margin-block-end: var(--s1); }
.designer-block { border: var(--rule-w) solid var(--rule); border-radius: var(--radius-card); background: var(--paper-2); min-width: 0; }
.designer-block.dragging { opacity: .5; }
/* The drop marker is a rule in the accent on the edge the block will land against. */
.designer-block.drop-before { box-shadow: 0 calc(-1 * var(--s1) / 2) 0 0 var(--accent); }
.designer-block.drop-after { box-shadow: 0 calc(var(--s1) / 2) 0 0 var(--accent); }
.designer-block-bar { display: flex; align-items: center; gap: var(--s1); padding: var(--s1) var(--s2); min-width: 0; }
.designer-grip { cursor: grab; flex: none; }
.designer-grip:active { cursor: grabbing; }
.designer-block-num { flex: none; color: var(--ink-3); font-variant-numeric: tabular-nums; font-size: var(--t-1); }
.designer-block-title { flex: 1 1 12ch; min-width: 0; display: grid; gap: 1px; text-align: start; border: 0; background: none; color: var(--ink); padding: var(--s0) 0; min-height: var(--target); align-content: center; }
.designer-block-title b { font-weight: 650; overflow-wrap: anywhere; }
.designer-block-title small { color: var(--ink-3); font-size: var(--t-1); }
.designer-block-flags { display: flex; flex-wrap: wrap; gap: var(--s0) var(--s1); }
.designer-block-flags:empty { display: none; }
.designer-block-actions { display: flex; flex: none; }
.designer-block-edit { border-block-start: var(--rule-w) solid var(--rule); padding: var(--s2); }
/* On a phone the actions take their own line under the title so nothing is squeezed. */
@media (max-width: 640px) {
  .designer-block-bar { flex-wrap: wrap; }
  .designer-block-actions { flex-basis: 100%; justify-content: flex-end; }
}

.designer-design { display: grid; gap: var(--s2); border-block-start: var(--rule-w) dashed var(--rule); padding-block-start: var(--s2); }
.designer-design h4, .designer-list-editor h4, .designer-outcome h4 { font-size: var(--t0); }
.designer-copy-items { margin: 0; padding-inline-start: var(--s3); display: grid; gap: var(--s0); color: var(--ink-2); font-size: var(--t-1); }
.designer-voice-ok { color: var(--ok); font-size: var(--t-1); font-weight: 600; }
.designer-findings { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s0); font-size: var(--t-1); color: var(--ink-2); }

/* ---------- AI outcome, batch ---------- */
.designer-outcome { gap: var(--s2); }
.designer-rejected { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s1); color: var(--ink-2); font-size: var(--t-1); }
.designer-log { color: var(--ink-2); font-size: var(--t-1); }
.designer-log summary { cursor: pointer; font-weight: 650; min-height: var(--target); display: flex; align-items: center; }
.designer-log ul { margin: 0; padding-inline-start: var(--s3); display: grid; gap: var(--s0); }
.designer-busy { display: flex; align-items: center; gap: var(--s1); color: var(--ink-2); font-size: var(--t-1); margin-block-start: var(--s2); }
.designer-chips { display: flex; flex-wrap: wrap; gap: var(--s1); }

/* ---------- Strategy: a tile inside a card marks itself with a rule, not more padding ---------- */
.designer-tile { display: grid; gap: var(--s1); align-content: start; min-width: 0; border-inline-start: 3px solid var(--rule-strong); padding-inline-start: var(--s2); }
article.designer-tile { border: var(--rule-w) solid var(--rule); border-radius: var(--radius-card); padding: var(--s2); }
.designer-tile-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1); }
.designer-tile-title { font-size: var(--t1); }

/* ---------- Lists the person edits (voice rules, glossary) ---------- */
.designer-list-editor { display: grid; gap: var(--s1); min-width: 0; }
.designer-entries { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s1); }
.designer-entries > li { display: flex; align-items: center; gap: var(--s1); min-width: 0; }
.designer-entries > li > .input { flex: 1; min-width: 0; }
.designer-add-row { display: flex; gap: var(--s1); align-items: center; }
.designer-add-row > .input { flex: 1; min-width: 0; }
.designer-glossary-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: var(--s1); align-items: center; }
.designer-glossary-row > * { min-width: 0; }
@media (max-width: 640px) {
  .designer-glossary-row { grid-template-columns: minmax(0, 1fr); }
  .designer-glossary-row > .icon-btn, .designer-glossary-row > .btn { justify-self: start; }
}

/* ---------- Branding: a sample in the brand's own tokens ---------- */
.designer-direction { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 18rem); gap: var(--gap); align-items: start; }
@media (max-width: 860px) { .designer-direction { grid-template-columns: minmax(0, 1fr); } }
.designer-swatches { display: flex; flex-wrap: wrap; gap: var(--s1); }
.designer-swatch { inline-size: var(--s5); block-size: var(--s5); border-radius: var(--radius-sm); border: var(--rule-w) solid var(--rule-strong); background: var(--sw, var(--field)); }
/* The sample reads its colours from custom properties set by script (validated hex only); each falls back to the dashboard's own. */
.designer-preview { padding: var(--s2); border-radius: var(--pv-radius, var(--radius-card)); border: var(--rule-w) solid var(--pv-border, var(--rule)); background: var(--pv-bg, var(--paper)); color: var(--pv-text, var(--ink)); }
.designer-preview-card { display: grid; gap: var(--s1); padding: var(--s2); border-radius: var(--pv-radius, var(--radius-card)); background: var(--pv-surface, var(--field)); }
.designer-preview-card b { font-size: var(--t1); }
.designer-preview-card p { margin: 0; color: var(--pv-muted, var(--ink-2)); font-size: var(--t-1); }
.designer-preview-button { justify-self: start; padding: var(--s1) var(--s2); border-radius: var(--pv-radius, var(--radius-pill)); background: var(--pv-primary, var(--accent)); color: var(--pv-on-primary, var(--paper)); font-weight: 650; font-size: var(--t-1); border-block-end: 3px solid var(--pv-accent, transparent); }

.designer-colour-row { align-items: start; }
.designer-colour { inline-size: var(--target); block-size: var(--target); flex: none; padding: 0; border: var(--rule-w) solid var(--rule-strong); border-radius: var(--radius-sm); background: none; cursor: pointer; }
.designer-colour-fields { flex: 1; min-width: 0; display: grid; gap: var(--s0); }
.designer-colour-row code { color: var(--ink-3); font-size: var(--t-1); flex: none; }
.designer-bullets { margin: 0; padding-inline-start: var(--s3); display: grid; gap: var(--s0); color: var(--ink-2); }