/* ============================================================
   The content tab as the site builders' working screen (T-1216, T-1217, D-109): the form and the live preview side
   by side, the sections manager and the publish checklist above the form, the automatic-saving status line.
   Loaded after app.css; tokens of tokens.css and the classes of app.css are reused as they are. RTL: logical
   properties only.
   ============================================================ */

/* the two columns need the whole width; only while the editor is on screen (client-content.js adds the class) */
.content.has-editor { max-width: none; }

.editor { display: grid; gap: 12px; }
.editor-top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px 14px; }
.editor-top .card-title { margin-bottom: 4px; }
.editor-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.editor-status { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding-inline: 4px; font-size: var(--fs-sm); font-weight: 600; color: var(--text-muted); }
.editor-status svg { width: 16px; height: 16px; flex: none; }
.editor-status.is-saved { color: var(--success); }
.editor-status.is-pending { color: var(--text-muted); }
.editor-status.is-saving { color: var(--primary); }
.editor-status.is-error { color: var(--danger); }
.editor-status .btn-link { min-height: 32px; padding-inline: 8px; }
.editor-view { display: none; }

.editor-grid { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 14px; }
.editor-form { display: grid; gap: 12px; min-width: 0; }
.editor-preview { min-width: 0; }

@media (min-width: 1100px) {
  .editor-grid { grid-template-columns: minmax(380px, 1fr) minmax(420px, 1fr); }
  .editor-preview { position: sticky; top: 74px; }
  .pv-stage { height: calc(100vh - 160px); min-height: 420px; }
}
@media (max-width: 1099px) {
  .editor-view { display: inline-flex; }
  .editor-grid.view-preview .editor-form { display: none; }
  .editor-grid.view-form .editor-preview { display: none; }
  .pv-stage { height: calc(100vh - 230px); min-height: 460px; }
}

/* ── Live preview pane (admin/js/editor/preview-pane.js) ── */
.pv { display: grid; gap: 8px; }
.pv-bar { display: flex; align-items: center; gap: 8px; }
.pv-gap { flex: 1 1 auto; }
.pv-note { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-block: 8px; padding-inline: 12px; border-radius: var(--radius-sm); background: var(--warning-soft); color: var(--warning); font-size: var(--fs-sm); font-weight: 600; }
.pv-stage { position: relative; display: flex; justify-content: center; align-items: stretch; overflow: hidden; padding: 10px; background: var(--dark-2); border-radius: var(--radius); }
.pv-stage.desktop { display: block; padding: 0; }
.pv-stage iframe { display: block; border: 0; background: #fff; border-radius: 10px; }
.pv-stage.phone iframe { width: 390px; max-width: 100%; height: 100%; }
.pv-stage.desktop iframe { width: 1280px; height: 100%; transform-origin: top right; border-radius: 0; }
.pv-empty { align-self: center; margin: 0; color: #fff; opacity: .7; }
/* a thin moving bar while the frame loads */
.pv-stage.is-loading::before { content: ""; position: absolute; inset-block-start: 0; inset-inline-start: 0; z-index: 2; height: 3px; width: 40%; background: var(--primary); animation: pv-load 1s ease-in-out infinite alternate; }
@keyframes pv-load { from { transform: translateX(0); } to { transform: translateX(-150%); } }
[dir="ltr"] .pv-stage.is-loading::before { animation-name: pv-load-ltr; }
@keyframes pv-load-ltr { from { transform: translateX(0); } to { transform: translateX(150%); } }
@media (prefers-reduced-motion: reduce) { .pv-stage.is-loading::before { animation: none; width: 100%; opacity: .6; } }

/* ── Sections manager (sec-mgr-*, admin/js/editor/sections.js) ── */
.sec-mgr { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.sec-mgr-box > summary { list-style: none; display: flex; align-items: center; gap: 10px; min-height: 48px; padding-block: 6px; padding-inline: 16px; cursor: pointer; user-select: none; border-radius: var(--radius-lg); }
.sec-mgr-box > summary::-webkit-details-marker { display: none; }
.sec-mgr-box[open] > summary { border-block-end: 1px solid var(--line-soft); border-end-start-radius: 0; border-end-end-radius: 0; }
.sec-mgr-icon { width: 20px; height: 20px; color: var(--primary); flex: none; }
.sec-mgr-title { flex: none; font-weight: 700; }
.sec-mgr-counts { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sec-mgr-chev { width: 18px; height: 18px; color: var(--ink-dim); flex: none; transition: transform var(--dur); }
.sec-mgr-box[open] > summary .sec-mgr-chev { transform: rotate(180deg); }
.sec-mgr-help { padding-block: 8px 0; padding-inline: 16px; }

.sec-mgr-list { list-style: none; margin: 0; padding-block: 8px; padding-inline: 10px; display: grid; gap: 4px; }
.sec-mgr-row { display: flex; align-items: center; gap: 4px; min-height: 44px; padding-block: 1px; padding-inline: 2px; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); background: var(--field); }
.sec-mgr-row.is-fixed { background: var(--surface); }
.sec-mgr-row.is-hidden { border-style: dashed; background: transparent; }
.sec-mgr-row.sec-mgr-dragging { opacity: .45; }
/* where the dragged row will land: a line in the gap above or below the row */
.sec-mgr-row.sec-mgr-drop-before { box-shadow: 0 -3px 0 0 var(--primary); }
.sec-mgr-row.sec-mgr-drop-after { box-shadow: 0 3px 0 0 var(--primary); }

.sec-mgr-grip { flex: none; display: grid; place-items: center; inline-size: 24px; block-size: 40px; border-radius: 6px; color: var(--ink-dim); cursor: grab; }
.sec-mgr-grip:hover { background: var(--line-soft); color: var(--text); }
.sec-mgr-grip:active { cursor: grabbing; }
.sec-mgr-grip svg { width: 16px; height: 16px; }
.sec-mgr-grip.is-fixed { cursor: default; opacity: .6; }
.sec-mgr-grip.is-fixed:hover { background: none; color: var(--ink-dim); }

/* the name opens the section in the form; the state sits under it, so a row stays one line high */
.sec-mgr-name { flex: 1 1 auto; min-width: 0; display: grid; align-content: center; min-height: 40px; padding-block: 2px; padding-inline: 6px; border: 0; border-radius: 8px; background: transparent; color: var(--text); text-align: start; cursor: pointer; }
.sec-mgr-name:hover { background: color-mix(in srgb, var(--primary) 8%, transparent); }
.sec-mgr-label { font-size: var(--fs-sm); font-weight: 700; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sec-mgr-state { font-size: .75rem; font-weight: 600; line-height: 1.25; color: var(--success); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sec-mgr-row.is-hidden .sec-mgr-state { color: var(--text-muted); }
.sec-mgr-row.is-empty .sec-mgr-state { color: var(--warning); }
.sec-mgr-row.is-hidden .sec-mgr-label, .sec-mgr-row.is-empty .sec-mgr-label { color: var(--text-muted); }

.sec-mgr-variant.form-input { flex: none; inline-size: 9.5rem; max-inline-size: 38%; min-height: 40px; padding-block: 4px; padding-inline: 10px 6px; background: var(--surface); text-overflow: ellipsis; }
@media (pointer: fine) { .sec-mgr-variant.form-input { font-size: var(--fs-sm); } } /* touch keeps 16px: iOS zooms on a smaller field */

.sec-mgr-tools { flex: none; display: flex; gap: 2px; }
.sec-mgr-tools .btn-icon { background: transparent; border-color: transparent; }
.sec-mgr-tools .btn-icon:hover:not(:disabled) { background: var(--surface); border-color: var(--line-soft); }
.sec-mgr-eye.is-off { color: var(--text-muted); }
.sec-mgr-fixed { flex: none; inline-size: 124px; text-align: center; } /* the width of the three buttons, so the columns line up */

.sec-mgr-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding-block: 0 10px; padding-inline: 10px; }
.sec-mgr-add > summary.btn { min-height: 40px; padding-block: 6px; padding-inline: 12px; }
.sec-mgr-add > summary svg { width: 18px; height: 18px; }
.sec-mgr-add .menu-body { inset-inline-start: 0; inset-inline-end: auto; }
.sec-mgr-add-text { display: grid; min-width: 0; text-align: start; }
.sec-mgr-reset { display: inline-flex; align-items: center; gap: 6px; padding-inline: 10px; border: 0; border-radius: var(--radius-sm); font-size: var(--fs-sm); cursor: pointer; }
.sec-mgr-reset svg { width: 16px; height: 16px; }

@media (hover: none) and (pointer: coarse) {
  .sec-mgr-grip { display: none; } /* no HTML5 drag on touch screens: the arrows move the rows */
}
@media (max-width: 480px) {
  .sec-mgr-box > summary { padding-inline: 12px; }
  .sec-mgr-help { padding-inline: 12px; }
  .sec-mgr-list { padding-inline: 6px; }
  .sec-mgr-variant.form-input { inline-size: 6.75rem; }
  .sec-mgr-fixed { inline-size: auto; min-inline-size: 60px; }
}

/* ── Publish checklist (chk-*, admin/js/editor/checklist.js) ── */
.chk { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.chk.is-blocked { border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
.chk-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-height: 48px; padding-block: 4px; padding-inline: 10px 6px; }
.chk-toggle { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-height: 40px; padding-block: 4px; padding-inline: 6px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text); font: inherit; text-align: start; cursor: pointer; }
.chk-toggle:hover { background: var(--field); }
.chk-toggle.is-static { cursor: default; }
.chk-toggle.is-static:hover { background: transparent; }
.chk-icon { width: 20px; height: 20px; flex: none; color: var(--text-muted); transition: opacity var(--dur); }
.chk.is-ok .chk-icon { color: var(--success); }
.chk.is-blocked .chk-icon { color: var(--danger); }
.chk.is-error .chk-icon { color: var(--warning); }
.chk.is-busy .chk-icon { opacity: .45; }
.chk-title { font-weight: 700; }
.chk-status { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.chk-chev { width: 18px; height: 18px; flex: none; margin-inline-start: auto; color: var(--ink-dim); transition: transform var(--dur); }
.chk-toggle[aria-expanded="true"] .chk-chev { transform: rotate(180deg); }
.chk-text { flex: 1 1 auto; min-width: 0; }
.chk-publish, .chk-retry { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding-inline: 10px; border: 0; border-radius: var(--radius-sm); font-size: var(--fs-sm); text-decoration: none; cursor: pointer; }
.chk-publish svg, .chk-retry svg { width: 16px; height: 16px; }
/* a long list scrolls inside the box instead of pushing the form far down */
.chk-body { max-block-size: min(60vh, 560px); overflow: auto; overscroll-behavior: contain; padding-block: 0 12px; padding-inline: 12px; border-block-start: 1px solid var(--line-soft); }
.chk-body > .gate-title:first-child { margin-block-start: 10px; }

@media (prefers-reduced-motion: reduce) { .sec-mgr-chev, .chk-chev, .chk-icon { transition: none; } }

/* ── W1-P E: the client's answer under a field, the AI prompt and paste boxes, the picker's several photos ── */
.field-hint { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin-block-start: 6px; padding-block: 6px; padding-inline: 10px; border-inline-start: 3px solid var(--line-soft); border-radius: var(--radius-sm); background: var(--field); font-size: var(--fs-sm); color: var(--text-muted); min-width: 0; }
.field-hint-label { font-weight: 700; }
.field-hint-text { flex: 1 1 12rem; min-width: 0; white-space: pre-line; overflow-wrap: anywhere; }
.field-hint .btn-link { min-height: 32px; padding-inline: 6px; }
.hours-said { margin-block: 0 10px; }
.ai-box { inline-size: 100%; min-block-size: 12rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; line-height: 1.5; resize: vertical; }
.ai-paste { display: grid; gap: 10px; }
.ai-summary .alert { margin-bottom: 6px; }
.ai-summary p { margin: 4px 0; overflow-wrap: anywhere; }
.copy-from { display: grid; gap: 10px; }
.copy-from-list { display: grid; gap: 2px; max-block-size: min(55vh, 460px); overflow: auto; overscroll-behavior: contain; }
.copy-from-list .menu-item span:first-of-type { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.picker { display: grid; gap: 12px; }
.picker-item.is-picked { border-color: var(--primary); background: var(--primary-soft); }
.picker-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.picker-foot .file-pick .is-busy { opacity: .6; }