/**
 * Editor interface styles.
 *
 * The design stance: separate with whitespace and ground colour, not with borders.
 * The previous version wore the old WordPress admin look — 1px hard borders everywhere, square
 * corners, airless — with all the visual noise coming from the dividing lines themselves. Modern
 * design tools (Framer, Figma, Linear) do the opposite: large areas of one colour, extremely
 * faint separations, rounded corners, and filled rather than outlined controls.
 *
 * The brand colour #e8501a is used sparingly — only on primary buttons, selection, focus rings,
 * and "this value was changed", the things that must be caught at a glance. Orange everywhere
 * means no emphasis anywhere.
 */

:root {
  --af-brand: #e8501a;
  --af-brand-hover: #cf440f;
  --af-brand-soft: #fdf1ec;
  --af-brand-ring: rgba(232, 80, 26, .22);

  --af-bg: #f4f4f5;          /* Canvas area background */
  --af-panel: #fff;
  --af-track: #f1f1f3;       /* Segmented-control trough, input fill */
  --af-track-hi: #e8e8ec;

  --af-line: rgba(0, 0, 0, .06);
  --af-line-2: rgba(0, 0, 0, .10);

  --af-t1: #1b1b1d;
  --af-t2: #6c6c73;
  --af-t3: #9b9ba2;

  --af-r-sm: 6px;
  --af-r-md: 8px;
  --af-r-lg: 12px;

  --af-sh-1: 0 1px 2px rgba(0, 0, 0, .05);
  --af-sh-pill: 0 1px 2px rgba(0, 0, 0, .07), 0 0 0 .5px rgba(0, 0, 0, .04);
  --af-sh-pop: 0 16px 40px rgba(0, 0, 0, .16), 0 2px 8px rgba(0, 0, 0, .06);
  --af-sh-art: 0 1px 3px rgba(0, 0, 0, .08), 0 12px 32px rgba(0, 0, 0, .07);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }

body.af-editor {
  font: 13px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", sans-serif;
  -webkit-font-smoothing: antialiased;
  color: var(--af-t1);
  background: var(--af-bg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#af-root { display: flex; flex-direction: column; height: 100%; min-height: 0; }

/* Top bar */

.af-bar {
  display: flex; align-items: center; gap: 8px;
  height: 52px; padding: 0 12px; flex: 0 0 auto;
  background: var(--af-panel);
  border-bottom: 1px solid var(--af-line);
}
.af-back {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; flex: 0 0 28px;
  text-decoration: none; color: var(--af-t2); font-size: 15px;
  border-radius: var(--af-r-sm);
}
.af-back:hover { background: var(--af-track); color: var(--af-t1); }
.af-title { font-weight: 600; font-size: 13.5px; white-space: nowrap; }
.af-sep { width: 1px; height: 18px; background: var(--af-line-2); flex: 0 0 1px; margin: 0 2px; }
.af-status {
  margin-left: auto; color: var(--af-t2); font-size: 12px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 38%;
}
.af-dirty { color: var(--af-brand); font-size: 15px; line-height: 1; margin-left: -2px; }

/* Buttons */

.af-btn {
  border: 0; background: var(--af-track);
  border-radius: var(--af-r-sm); padding: 6px 11px;
  cursor: pointer; font: inherit; font-size: 12px; font-weight: 500;
  color: var(--af-t1); white-space: nowrap;
  transition: background .12s, color .12s;
  text-decoration: none;
}
.af-btn:hover:not(:disabled) { background: var(--af-track-hi); }
.af-btn:disabled,
/*
 * Preview is an <a> (only a real link escapes popup blockers), and an <a> has no :disabled —
 * the state is expressed with aria-disabled and the styles follow it. Screen readers read the
 * same attribute.
 */
.af-btn[aria-disabled="true"] { opacity: .38; cursor: default; pointer-events: none; }
.af-btn-primary { background: var(--af-brand); color: #fff; box-shadow: var(--af-sh-1); }
.af-btn-primary:hover:not(:disabled) { background: var(--af-brand-hover); }

/* The three main columns */

.af-body { flex: 1 1 auto; display: flex; min-height: 0; }
.af-left, .af-right {
  flex: 0 0 258px; background: var(--af-panel);
  display: flex; flex-direction: column; min-height: 0;
}
.af-left { border-right: 1px solid var(--af-line); }
.af-right { border-left: 1px solid var(--af-line); }

.af-panel-head {
  flex: 0 0 auto; padding: 12px 14px 6px;
  font-weight: 600; font-size: 10.5px; letter-spacing: .05em;
  color: var(--af-t3); text-transform: uppercase;
}


/* Layer tree */

.af-tree-wrap { flex: 1 1 auto; overflow: auto; min-height: 0; padding: 2px 8px 12px; position: relative; }

.af-tree-row {
  position: relative; display: flex; align-items: center; gap: 6px;
  padding: 4px 8px; border-radius: var(--af-r-sm);
  cursor: default; white-space: nowrap; user-select: none;
  touch-action: none; font-size: 12px;
}
.af-tree-row.is-hover { background: var(--af-track); }
.af-tree-row.is-multi { background: var(--af-brand-soft); color: var(--af-brand-hover); }
.af-tree-row.is-selected { background: var(--af-brand); color: #fff; }
.af-tree-twisty {
  width: 12px; flex: 0 0 12px; text-align: center;
  color: var(--af-t3); font-size: 9px; cursor: pointer;
}
.af-tree-icon { width: 14px; flex: 0 0 14px; text-align: center; color: var(--af-t3); font-size: 11px; }
.af-tree-row.is-selected .af-tree-twisty,
.af-tree-row.is-selected .af-tree-icon { color: rgba(255, 255, 255, .72); }
.af-tree-label { overflow: hidden; text-overflow: ellipsis; }
/* Inside a condition branch the sample fails: dimmed, with the dashed-circle mark on the right */
.af-tree-row.is-cond-hidden .af-tree-label,
.af-tree-row.is-cond-hidden .af-tree-icon { opacity: .5; }
.af-tree-hidden { margin-left: auto; color: var(--af-t3); font-size: 12px; }
.af-tree-row.is-selected .af-tree-hidden { color: rgba(255, 255, 255, .72); }

/* Dragging: each of the three drop bands looks distinct — a single line alone leaves it to
   guesswork */
.af-tree-row.is-dragging { opacity: .35; }
.af-tree-row.is-drop-inside { box-shadow: inset 0 0 0 2px var(--af-brand); }
.af-tree-row.is-drop-before::after,
.af-tree-row.is-drop-after::after {
  content: ''; position: absolute; left: 6px; right: 6px; height: 2px;
  background: var(--af-brand); border-radius: 1px; pointer-events: none;
}
.af-tree-row.is-drop-before::after { top: -1px; }
.af-tree-row.is-drop-after::after { bottom: -1px; }
.af-drag-ghost {
  position: fixed; z-index: 200; pointer-events: none;
  background: var(--af-brand); color: #fff;
  padding: 3px 9px; border-radius: var(--af-r-sm); font-size: 11.5px; font-weight: 500;
  box-shadow: var(--af-sh-pop);
}

/* Insert panel */

.af-insert-panel { flex: 0 0 auto; padding: 0 12px 14px; }
.af-insert-tabs { margin-bottom: 10px; }
.af-insert-target {
  font-size: 11px; color: var(--af-t3); margin-bottom: 8px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.af-insert-target strong { color: var(--af-t2); font-weight: 500; }
.af-insert-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.af-insert-item {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 2px; border: 0; border-radius: var(--af-r-md);
  background: var(--af-track); cursor: pointer; font: inherit; color: var(--af-t2);
  transition: background .12s, color .12s;
}
.af-insert-item:hover { background: var(--af-brand-soft); color: var(--af-brand-hover); }
.af-insert-icon { font-size: 15px; line-height: 1; }
.af-insert-label { font-size: 10.5px; }
.af-insert-note { margin: 10px 0 0; font-size: 11px; color: var(--af-t3); line-height: 1.55; }

/* Inspector */

.af-inspector { flex: 1 1 auto; overflow: auto; min-height: 0; }
.af-selection { padding: 4px 14px 12px; display: flex; align-items: baseline; gap: 8px; }
.af-selection strong { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.af-selection-type { color: var(--af-t3); font-size: 11px; flex: 0 0 auto; }

.af-tabs { margin: 0 12px 10px; }
.af-bp { padding: 0 14px 12px; }
.af-bp-note { margin: 8px 0 0; font-size: 11px; color: var(--af-t3); line-height: 1.5; }

.af-sec { border-top: 1px solid var(--af-line); }
.af-sec-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 13px 14px 8px;
  font-weight: 600; font-size: 10.5px; letter-spacing: .04em; color: var(--af-t3);
}
.af-sec-meta { font-weight: 400; color: var(--af-t3); font-size: 10.5px; letter-spacing: 0; }
.af-sec-body { padding: 0 14px 14px; }

.af-field { margin-bottom: 11px; }
.af-field:last-child { margin-bottom: 0; }
.af-field-label {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--af-t2); margin-bottom: 5px;
}
.af-field-hint { margin: 6px 0 0; font-size: 11px; color: var(--af-t3); line-height: 1.5; }
.af-field-hint code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--af-track); padding: 1px 4px; border-radius: 4px; font-size: 10.5px;
}

/* The override dot: shows at a glance that this value was changed at the current breakpoint;
   click to clear */
.af-override {
  width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%;
  border: 0; padding: 0; background: var(--af-brand); cursor: pointer;
}
.af-override:hover { box-shadow: 0 0 0 3px var(--af-brand-ring); }

/* Controls */

/* Segmented: a trough with a white active block. A filled active block is too loud in a dense
   panel */
.af-seg { display: flex; background: var(--af-track); border-radius: var(--af-r-md); padding: 2px; gap: 2px; }
.af-seg button {
  flex: 1 1 0; min-width: 0; border: 0; background: none;
  padding: 4px 7px; border-radius: var(--af-r-sm);
  cursor: pointer; font: inherit; font-size: 11.5px; color: var(--af-t2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: background .12s, color .12s;
}
.af-seg button:hover:not(.is-active) { color: var(--af-t1); }
.af-seg button.is-active {
  background: var(--af-panel); color: var(--af-t1);
  font-weight: 500; box-shadow: var(--af-sh-pill);
}
.af-views { flex: 0 0 auto; }
.af-views button { padding: 4px 13px; }

/* Desktop canvas width picker. Sits beside the breakpoint segment, same height, quieter —
   it is a view setting, not a thing you design with. */
.af-desk-w {
  flex: 0 0 auto; appearance: none; cursor: pointer;
  border: 1px solid transparent; background: var(--af-track);
  border-radius: var(--af-r-md); padding: 4px 22px 4px 9px;
  font: inherit; font-size: 12px; color: var(--af-t2);
  background-image: linear-gradient(45deg, transparent 50%, var(--af-t3) 50%),
                    linear-gradient(135deg, var(--af-t3) 50%, transparent 50%);
  background-position: right 9px center, right 5px center;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
}
.af-desk-w:hover { background-color: var(--af-track-hi); color: var(--af-t1); }
.af-desk-w:focus { outline: none; border-color: var(--af-brand); box-shadow: 0 0 0 3px var(--af-brand-ring); }

.af-select, .af-input, .af-num input {
  width: 100%; border: 1px solid transparent; background: var(--af-track);
  border-radius: var(--af-r-sm); padding: 6px 8px;
  font: inherit; font-size: 12px; color: var(--af-t1);
  transition: background .12s, border-color .12s, box-shadow .12s;
}
.af-select {
  appearance: none; padding-right: 24px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--af-t3) 50%),
                    linear-gradient(135deg, var(--af-t3) 50%, transparent 50%);
  background-position: right 11px center, right 7px center;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
}
.af-select:hover, .af-input:hover, .af-num input:hover { background: var(--af-track-hi); }
.af-select:focus, .af-input:focus, .af-num input:focus {
  outline: none; background: var(--af-panel);
  border-color: var(--af-brand); box-shadow: 0 0 0 3px var(--af-brand-ring);
}
.af-input.is-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; }
.af-area { resize: vertical; line-height: 1.55; }

.af-num { display: flex; align-items: center; gap: 5px; }
.af-num input { min-width: 0; }
.af-num input::-webkit-outer-spin-button,
.af-num input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.af-num-suffix { color: var(--af-t3); font-size: 11px; flex: 0 0 auto; }

.af-pair, .af-pins { display: grid; gap: 5px; grid-template-columns: 1fr 1fr; }
.af-box-input { display: grid; grid-template-columns: auto 1fr 1fr; gap: 5px; align-items: center; }
.af-link {
  border: 0; background: var(--af-track); border-radius: var(--af-r-sm);
  width: 26px; height: 30px; cursor: pointer; color: var(--af-t3); font-size: 12px;
  grid-row: span 2;
}
.af-link.is-active { background: var(--af-brand-soft); color: var(--af-brand); }

/* Colour */
.af-color { display: flex; flex-direction: column; gap: 6px; }
.af-color-row { display: flex; align-items: center; gap: 6px; }
.af-color-row .af-select { flex: 1; min-width: 0; }
/* Token swatch: light at top-left, dark at bottom-right, over a checkerboard so translucent
   colours are still readable */
.af-color-chip {
  flex: none; width: 20px; height: 20px; border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, .18);
  background-color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5);
}
.af-color-swatch {
  width: 100%; height: 28px; padding: 0; border: 1px solid var(--af-line-2);
  border-radius: var(--af-r-sm); background: none; cursor: pointer;
}
.af-color-swatch::-webkit-color-swatch-wrapper { padding: 2px; }
.af-color-swatch::-webkit-color-swatch { border: 0; border-radius: 4px; }

/* Addable and removable layers */
.af-list { display: flex; flex-direction: column; gap: 8px; }
.af-list-item {
  position: relative; padding: 10px; border-radius: var(--af-r-md);
  display: flex; flex-direction: column; gap: 6px; background: var(--af-track);
}
.af-list-del {
  position: absolute; top: 4px; right: 5px; border: 0; background: none;
  cursor: pointer; color: var(--af-t3); font-size: 15px; line-height: 1;
  padding: 2px 4px; border-radius: 4px;
}
.af-list-del:hover { color: var(--af-brand); background: var(--af-brand-soft); }
.af-list-add { align-self: flex-start; }

/* Collapsed secondary settings */
.af-advanced { border-top: 1px solid var(--af-line); }
.af-advanced > summary {
  padding: 11px 14px; cursor: pointer; color: var(--af-t3);
  font-size: 10.5px; font-weight: 600; letter-spacing: .04em; user-select: none;
}
.af-advanced-note { margin: 0; padding: 0 14px 8px; color: var(--af-t3); font-size: 11px; line-height: 1.5; }

.af-empty { padding: 28px 18px; color: var(--af-t3); font-size: 12px; text-align: center; line-height: 1.6; }

/* States (variants) and motion */

.af-states { padding: 0 14px 12px; }
.af-states .af-seg button.has-value::after {
  content: ''; display: inline-block; width: 4px; height: 4px; border-radius: 50%;
  background: var(--af-brand); margin-left: 5px; vertical-align: middle;
}
.af-state-note {
  display: flex; align-items: center; gap: 8px; margin-top: 8px;
  padding: 8px 10px; background: var(--af-brand-soft); border-radius: var(--af-r-md);
  font-size: 11px; color: var(--af-brand-hover); line-height: 1.5;
}
.af-state-note span { flex: 1 1 auto; }
.af-state-note .af-btn { background: rgba(232, 80, 26, .12); color: var(--af-brand-hover); }

.af-conflict {
  display: flex; align-items: flex-start; gap: 9px; margin: 12px 12px 0;
  padding: 10px 11px; background: #fff8e6; border-radius: var(--af-r-md);
  color: #7a5a00; font-size: 11.5px; line-height: 1.55;
}
/* The button wraps to the next line rather than squeezing the text into a column.
   The panel is only 258px and `.af-btn` is nowrap — with slightly longer fix copy, the text
   column gets crushed to four or five characters a line and the hint becomes unreadable. */
.af-conflict { flex-wrap: wrap; }
.af-conflict span { flex: 1 1 140px; }
.af-conflict .af-btn { margin-left: auto; }
.af-conflict .af-btn { flex: 0 0 auto; background: rgba(0, 0, 0, .07); color: #7a5a00; }
.af-motion-play { display: flex; align-items: center; gap: 10px; padding: 12px 14px; }
.af-motion-play .af-field-hint { margin: 0; flex: 1 1 auto; }

/* Data queries */

.af-query { border-radius: var(--af-r-md); padding: 10px 11px; margin-bottom: 10px; background: var(--af-track); }
.af-query-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.af-query-head strong {
  font-size: 11px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--af-t2);
}
.af-query .af-list-del { position: static; }
.af-query .af-select, .af-query .af-input, .af-query .af-num input { background: var(--af-panel); }

/* Media */

.af-media { display: flex; align-items: center; gap: 9px; }
.af-media-btn { flex: 0 0 auto; }
.af-media-thumb {
  width: 34px; height: 34px; object-fit: cover; border-radius: var(--af-r-sm);
  border: 1px solid var(--af-line-2); flex: 0 0 auto;
}
/* The WP media library has to sit above the editor.
   The two must differ, never share one value. In tmpl-media-modal the backdrop is a
   following sibling of .media-modal (wp-includes/media-template.php), so at the same level and
   the same z-index the document order decides — the backdrop covers the modal, and the result is
   "the media library opens, cannot be clicked, and the screen is veiled in black". WP's own gap
   is 160000 / 159900; the same 100 is copied here. */
.media-modal { z-index: 300000 !important; }
.media-modal-backdrop { z-index: 299900 !important; }

/* Screen-reader-only text.
   WP keeps this rule in wp-admin/css/common.css, while we take over the whole page and load
   only media-views.css — so the strings in the media library meant for screen readers alone
   ("Close dialog", "Selected", "Upload files") were all painted on screen, overlapping the real
   labels and making the modal look broken.
   Pulling in all of common.css is not an option: it would restyle the entire editor as wp-admin.
   WP's definition is copied, this one rule only. */
.screen-reader-text {
  border: 0;
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

/* Unsaved draft */

.af-recover {
  display: flex; align-items: center; gap: 10px; padding: 10px 16px; flex: 0 0 auto;
  background: #fff8e6; color: #7a5a00; font-size: 12px;
}
.af-recover span { flex: 1 1 auto; }
.af-recover .af-btn { background: rgba(0, 0, 0, .07); color: #7a5a00; }

/* Scope notice */
/*
 * Sits above the bar, in the same slot as the draft-recovery strip. Informational blue rather than the
 * warning yellow: nothing is wrong, the buyer simply needs to know how far this design reaches.
 */
.af-scope {
  display: flex; align-items: center; gap: 10px; padding: 9px 16px; flex: 0 0 auto;
  background: #eef4fd; color: #1c4e80; font-size: 12px; line-height: 1.5;
  border-bottom: 1px solid #d7e4f5;
}
.af-scope span { flex: 1 1 auto; }

/* Popovers */

.af-modal-backdrop {
  position: fixed; inset: 0; background: rgba(20, 20, 22, .34);
  backdrop-filter: blur(2px); z-index: 100;
  display: flex; align-items: center; justify-content: center;
}
.af-modal {
  background: var(--af-panel); border-radius: var(--af-r-lg);
  width: 440px; max-width: 92vw; max-height: 76vh;
  display: flex; flex-direction: column; box-shadow: var(--af-sh-pop); overflow: hidden;
}
.af-modal-wide { width: 520px; }
.af-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; flex: 0 0 auto; font-size: 13.5px;
}
.af-modal-body { flex: 1 1 auto; overflow: auto; min-height: 0; }
.af-modal-foot {
  flex: 0 0 auto; padding: 12px 16px; border-top: 1px solid var(--af-line);
  color: var(--af-t3); font-size: 11px; line-height: 1.5;
}
.af-modal-actions { display: flex; align-items: center; gap: 12px; }
.af-modal-actions span { flex: 1 1 auto; }
.af-modal-error { margin: 0; padding: 14px 16px; color: var(--af-brand); font-size: 12px; }

.af-rev { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-top: 1px solid var(--af-line); }
.af-rev:first-child { border-top: 0; }
.af-rev-main { flex: 1 1 auto; min-width: 0; }
.af-rev-time { font-weight: 500; font-size: 12.5px; }
.af-rev-meta { color: var(--af-t3); font-size: 11px; margin-top: 2px; }

/* Fatal errors */

.af-fatal { padding: 40px; max-width: 720px; margin: 0 auto; }
.af-fatal h2 { font-size: 17px; margin: 0 0 10px; }
.af-fatal p { color: var(--af-t2); font-size: 13px; margin: 0 0 12px; }
.af-fatal pre {
  background: var(--af-track); padding: 14px; border-radius: var(--af-r-md);
  font-size: 11px; line-height: 1.6; overflow: auto; max-height: 320px;
  color: var(--af-t2); white-space: pre-wrap;
}
.af-fatal a { color: var(--af-brand); }

/* Top-bar icon buttons and the overflow menu */

.af-icon-btn {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; flex: 0 0 28px;
  border: 0; background: none; border-radius: var(--af-r-sm);
  cursor: pointer; color: var(--af-t2); font-size: 14px; line-height: 1;
  transition: background .12s, color .12s;
}
.af-icon-btn:hover:not(:disabled) { background: var(--af-track); color: var(--af-t1); }
.af-icon-btn:disabled { opacity: .3; cursor: default; }

.af-menu-wrap { position: relative; display: flex; }
.af-menu-veil { position: fixed; inset: 0; z-index: 90; }
.af-menu {
  position: absolute; top: 34px; right: 0; z-index: 91; min-width: 148px;
  background: var(--af-panel); border-radius: var(--af-r-md);
  box-shadow: var(--af-sh-pop); padding: 4px; display: flex; flex-direction: column;
}
.af-menu button {
  border: 0; background: none; text-align: left; padding: 7px 10px;
  border-radius: var(--af-r-sm); cursor: pointer; font: inherit; font-size: 12px;
  color: var(--af-t1); white-space: nowrap;
}
.af-menu button:hover { background: var(--af-track); }

/* Node context menu — positioned at the pointer, so top/left come from JS and must not be
   hard-coded here */
.af-node-menu { position: fixed; top: auto; right: auto; min-width: 176px; }
.af-node-menu button {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.af-node-menu button:disabled { color: var(--af-t3); cursor: default; background: none; }
.af-node-menu button.is-danger:hover { background: var(--af-brand-soft); color: var(--af-brand-hover); }
.af-menu-hint { color: var(--af-t3); font-size: 11px; flex: 0 0 auto; }
.af-menu-sep { height: 1px; background: var(--af-line); margin: 4px 6px; }

/* Structural actions on the selection — they belong with the layer panel, not crammed into the
   top bar */
.af-sel-actions {
  flex: 0 0 auto; display: flex; gap: 5px; padding: 0 12px 10px; flex-wrap: wrap;
}
.af-sel-actions .af-btn { font-size: 11.5px; padding: 5px 9px; }

/* The page column: a browser window, no artboard
 * The device (iframe) is the breakpoint's width; when the column is narrower it scales down to fit
 * (transform-origin top centre so it stays centred), and its height is derived from the column so it
 * always fills it exactly. See CanvasHost.jsx. */

.af-stage-wrap { flex: 1 1 auto; position: relative; min-width: 0; overflow: hidden; }
.af-stage { position: absolute; inset: 0; overflow: hidden; background: var(--af-track); }
.af-viewport {
  position: absolute; top: 0; left: 50%;
  transform-origin: 50% 0;
  /* the translate keeps it centred at any scale; scale() is appended by the host */
  translate: -50% 0;
  will-change: transform;
}
.af-canvas-mount { width: 100%; background: #fff; }
.af-canvas-mount iframe { display: block; border: 0; width: 100%; }

/* Panel toggles on the column edges */
.af-panel-toggle {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 20;
  width: 18px; height: 44px; border: 0; border-radius: 6px; padding: 0;
  background: var(--af-panel); color: var(--af-t2); cursor: pointer; font: inherit; font-size: 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,.14), 0 0 0 .5px rgba(0,0,0,.06); opacity: .55; transition: opacity .12s;
}
.af-panel-toggle:hover { opacity: 1; }
.af-panel-toggle-left { left: 6px; }
.af-panel-toggle-right { right: 6px; }
.af-left.is-collapsed, .af-right.is-collapsed { display: none; }

/* "Shown at N%" — only while the column is narrower than the device */
.af-fit-note {
  position: absolute; right: 34px; bottom: 14px; z-index: 20;
  padding: 3px 8px; border-radius: 8px; font-size: 11px; font-variant-numeric: tabular-nums;
  background: var(--af-panel); color: var(--af-t3);
  box-shadow: 0 2px 8px rgba(0,0,0,.12), 0 0 0 .5px rgba(0,0,0,.06);
}


/* Drag to insert */
.af-insert-item.is-dragging { opacity: .4; }
.af-insert-ghost { display: flex; align-items: center; gap: 5px; }

.af-insert-arrange {
  font-size: 11px; color: var(--af-t3); margin: -4px 0 8px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.af-insert-arrange strong { color: var(--af-brand); font-weight: 500; }

/* Why it is disabled: a greyed-out button has to explain itself */
.af-sel-why {
  margin: -4px 12px 10px; font-size: 11px; color: var(--af-t3); line-height: 1.5;
}

/* Icon picker — it has to be choosable by eye; with only a name field the user has no idea what
   exists */
.af-icon-grid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px;
}
.af-icon-cell {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1; border: 0; padding: 0; cursor: pointer;
  background: var(--af-track); border-radius: var(--af-r-sm);
  color: var(--af-t2); transition: background .12s, color .12s;
}
.af-icon-cell svg { width: 17px; height: 17px; }
.af-icon-cell:hover { background: var(--af-brand-soft); color: var(--af-brand-hover); }
.af-icon-cell.is-active { background: var(--af-brand); color: #fff; }
.af-icon-grid { margin-bottom: 8px; }
.af-icon-current {
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
  font-size: 11px; color: var(--af-t2);
}
.af-icon-current span { display: inline-flex; color: var(--af-t1); }
.af-icon-current svg { width: 20px; height: 20px; }
.af-icon-current em { color: var(--af-danger, #c0392b); font-style: normal; }
.af-icon-more { display: block; width: 100%; margin-bottom: 10px; }

/* Term chips in the query panel. Dead ones (the term was deleted while the query still
   references it) are struck through but still visible — dropping them silently is worse than
   keeping them */
.af-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.af-chips:not(:empty) { margin-bottom: 6px; }
.af-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 6px 3px 8px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--af-line, rgba(0,0,0,.14));
  background: var(--af-surface, #fff);
  font: 500 11px/1.4 inherit; color: inherit;
}
.af-chip:hover { border-color: #e8501a; color: #e8501a; }
.af-chip.is-stale { text-decoration: line-through; opacity: .6; }
.af-chip-x { font-size: 13px; line-height: 1; opacity: .5; }

.af-insert-alt { opacity: .62; }

.af-part-wire { display: flex; align-items: center; gap: 6px; }
.af-part-wire .af-select { flex: 1; min-width: 0; }
.af-btn-sm { padding: 4px 8px; font-size: 11px; white-space: nowrap; }

/* "Which page is this design" in the top bar
   Title and address are made to look like text that can be clicked into: the top bar has no room
   for a row of bordered form controls, and the buyer needs to see at a glance that these are
   editable. The border only appears on focus. */
.af-linked { display: flex; align-items: center; gap: 8px; min-width: 0; }
.af-linked input {
  font: inherit; color: inherit; background: transparent;
  border: 1px solid transparent; border-radius: 3px;
  padding: 2px 5px; min-width: 0;
}
.af-linked input:hover:not(:disabled) { border-color: rgba(128,128,128,.35); }
.af-linked input:focus {
  outline: none; border-color: var(--af-accent, #2271b1);
  background: rgba(128,128,128,.08);
}
.af-linked input:disabled { opacity: .55; }
.af-linked-title { font-weight: 700; max-width: 22ch; }
.af-linked-slug {
  display: inline-flex; align-items: center;
  font-size: 12px; opacity: .65; white-space: nowrap;
}
.af-linked-slug input { font-size: 12px; max-width: 18ch; }
/* A draft is not live, and deserves the same prominence as "save" given the consequences */
.af-btn-publish { background: #1c7c3f; border-color: #1c7c3f; color: #fff; }
.af-btn-publish:hover:not(:disabled) { background: #176834; }
.af-linked-live {
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: #1c7c3f; border: 1px solid currentColor; border-radius: 2px;
  padding: 1px 6px; white-space: nowrap;
}

/* Component-master mode: a bar over the canvas saying where you are and how to get back */
.af-cmp-bar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 30;
  display: flex; align-items: center; gap: 12px; padding: 6px 10px;
  background: var(--af-brand); color: #fff; font-size: 12px;
}
.af-cmp-bar .af-btn { background: rgba(255,255,255,.16); color: #fff; border-color: transparent; }
.af-cmp-bar .af-btn:hover { background: rgba(255,255,255,.28); }
.af-cmp-bar-label { opacity: .92; }

/* Inline component-name field (replaces window.prompt) */
.af-name-field { display: flex; gap: 6px; padding: 6px 14px; align-items: center; }
.af-name-field input { flex: 1 1 auto; min-width: 0; font: inherit; font-size: 12px; padding: 5px 8px;
  border: 1px solid var(--af-line-2); border-radius: var(--af-r-sm); background: var(--af-field, #fff); color: var(--af-t1); }

/* Live preview toggle */
.af-btn-live { background: var(--af-brand); color: #fff; }
.af-btn-icon { padding-inline: 8px; font-size: 14px; line-height: 1; }
.af-btn-icon.is-on { background: var(--af-brand-soft); color: var(--af-brand-hover); }

/* Two controls side by side inside one field (the query panel's meta filter: compare + value) */
.af-row { display: flex; gap: 6px; margin-top: 6px; }
.af-row > * { flex: 1 1 0; min-width: 0; }

/* Size - unit picker sits beside the number it governs */
.af-size-row { display: flex; gap: 6px; align-items: center; }
.af-size-row > .af-num, .af-size-row > .af-pair { flex: 1 1 auto; min-width: 0; }
.af-size-row > .af-seg { flex: 0 0 auto; }
/* .af-seg buttons share the width (flex 1 1 0); this seg's width comes from its buttons, so they size to their text */
.af-size-row > .af-seg button { flex: 0 0 auto; padding: 4px 6px; }

/* Size on an instance: point at the node inside the component that really decides it */
.af-instance-size {
  margin-bottom: 12px; padding: 9px 10px; border-radius: var(--af-r-sm);
  background: var(--af-track); font-size: 11px; color: var(--af-t2); line-height: 1.5;
}
.af-instance-size p { margin: 0 0 6px; }
.af-instance-size ul { margin: 0 0 8px; padding: 0; list-style: none; }
.af-instance-size li { margin: 2px 0; }
.af-instance-size code { font-size: 11px; color: var(--af-t1); }
.af-instance-size-part {
  border: 0; padding: 0; background: none; cursor: pointer;
  color: var(--af-brand); font: inherit; text-decoration: underline;
}