/* ==========================================================================
   editor.css — the lesson block editor.
   Layout follows the magmalabs blog-builder: export + preview pinned to the
   right, the editing column on the left. GDC palette throughout.
   ========================================================================== */

.editor { padding: 34px 32px 70px; }

.editor-noscript {
    font-family: var(--gdc-font-ui);
    color: var(--gdc-ink-muted);
    text-align: center;
    padding: 40px;
}

.ed-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 430px);
    gap: 22px;
    align-items: start;
}

.ed-main { display: flex; flex-direction: column; gap: 22px; min-width: 0; }

/* Export and preview share one sticky column. They must NOT be separate grid
   rows spanned by .ed-main — grid would divide the tall main column's height
   between those rows and strand the preview far down the page. */
.ed-side {
    display: flex;
    flex-direction: column;
    gap: 22px;
    position: sticky;
    top: calc(var(--gdc-nav-h) + 16px);
    max-height: calc(100vh - var(--gdc-nav-h) - 32px);
    overflow-y: auto;
    min-width: 0;
}

.ed-panel { padding: 22px 24px; }

.ed-content-panel {
    background: transparent;
    box-shadow: none;
    padding: 0;
}

/* The form editor is a fallback now that the canvas is the primary surface. */
.ed-fallback-panel > summary {
    cursor: pointer;
    padding: 11px 14px;
    border: 2px solid var(--gdc-border);
    border-radius: var(--gdc-radius);
    background: var(--gdc-surface);
    color: var(--gdc-ink-muted);
    font-family: var(--gdc-font-ui);
    font-size: 13.5px;
    font-weight: 600;
    list-style: none;
    transition: border-color 0.15s, color 0.15s;
}

.ed-fallback-panel > summary::-webkit-details-marker { display: none; }
.ed-fallback-panel > summary::after { content: ' ▾'; }
.ed-fallback-panel[open] > summary::after { content: ' ▴'; }

.ed-fallback-panel > summary:hover {
    border-color: var(--gdc-accent);
    color: var(--gdc-navy);
}

.ed-fallback-panel[open] > summary { margin-bottom: 18px; }

/* ------------------------------------------------------- section headers  */

.ed-section-head { margin-bottom: 16px; }

.ed-kicker {
    font-family: var(--gdc-font-ui);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--gdc-accent);
    margin-bottom: 5px;
}

.ed-section-title {
    font-size: 23px;
    font-weight: 700;
    color: var(--gdc-navy);
    margin: 0 0 5px;
}

.ed-section-note {
    font-family: var(--gdc-font-ui);
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--gdc-ink-muted);
    margin: 0;
}

/* ---------------------------------------------------------------- fields  */

.ed-form { display: flex; flex-direction: column; gap: 15px; }

.ed-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin: 0;
    min-width: 0;
}

/* Only side-by-side fields share the row; in the column-direction form a
   flex-basis would be read as a height and stretch every field. */
.ed-row > .ed-field { flex: 1 1 200px; }

.ed-field-label {
    font-family: var(--gdc-font-ui);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--gdc-ink);
}

.ed-hint {
    font-family: var(--gdc-font-ui);
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--gdc-ink-faint);
}

.ed-row { display: flex; flex-wrap: wrap; gap: 14px; }

.ed-input {
    width: 100%;
    border: 2px solid var(--gdc-border);
    border-radius: 8px;
    background: var(--gdc-surface);
    color: var(--gdc-ink);
    font-family: var(--gdc-font-ui);
    font-size: 14px;
    padding: 9px 12px;
    transition: border-color 0.2s;
}

.ed-input:focus { outline: none; border-color: var(--gdc-accent); }
.ed-input:disabled { background: var(--gdc-surface-sunken); color: var(--gdc-ink-faint); }

.ed-input.mono {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px;
    line-height: 1.6;
}

textarea.ed-input { resize: vertical; }

.ed-toggle {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    font-family: var(--gdc-font-ui);
    font-size: 13.5px;
    color: var(--gdc-ink);
    cursor: pointer;
}

.ed-toggle input { width: 17px; height: 17px; accent-color: var(--gdc-accent); cursor: pointer; }

.ed-checkgroup { display: flex; flex-wrap: wrap; gap: 7px; }

.ed-checkchip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    border: 2px solid var(--gdc-border);
    border-radius: 999px;
    padding: 6px 13px;
    font-family: var(--gdc-font-ui);
    font-size: 13px;
    color: var(--gdc-ink-muted);
    cursor: pointer;
    transition: all 0.15s;
}

.ed-checkchip:hover { border-color: var(--gdc-accent-soft); }

.ed-checkchip:has(input:checked) {
    border-color: var(--gdc-accent);
    background: var(--gdc-accent-tint);
    color: var(--gdc-navy);
    font-weight: 600;
}

.ed-checkchip input { accent-color: var(--gdc-accent); cursor: pointer; }

/* --------------------------------------------------------------- actions  */

.ed-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 14px; }

.ed-stats { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }

.ed-stat {
    flex: 1 1 82px;
    background: var(--gdc-surface-sunken);
    border-radius: 8px;
    padding: 11px 13px;
    text-align: center;
}

.ed-stat-value {
    display: block;
    font-family: var(--gdc-font-body);
    font-size: 22px;
    font-weight: 700;
    color: var(--gdc-navy);
    line-height: 1.1;
}

.ed-stat-label {
    display: block;
    font-family: var(--gdc-font-ui);
    font-size: 11px;
    color: var(--gdc-ink-faint);
    margin-top: 3px;
}

/* -------------------------------------------------------------- export    */

.ed-output {
    margin-top: 12px;
    max-height: 340px;
    background: rgb(23, 32, 54);
    color: rgb(220, 228, 240);
    border-color: rgb(35, 48, 78);
}

.ed-warnings { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }

.ed-warning {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: var(--gdc-amber-tint);
    border-left: 3px solid rgb(214, 152, 32);
    border-radius: 6px;
    padding: 8px 11px;
    margin: 0;
    font-family: var(--gdc-font-ui);
    font-size: 12.5px;
    line-height: 1.5;
    color: rgb(122, 79, 12);
}

.ed-warning i { padding-top: 2px; }

.ed-warning.ok {
    background: rgba(127, 209, 134, 0.16);
    border-left-color: var(--gdc-green);
    color: var(--gdc-green-ink);
}

/* -------------------------------------------------------------- preview   */

.ed-preview-body {
    background: var(--gdc-page);
    border-radius: var(--gdc-radius);
    padding: 18px;
    /* .ed-side owns the scrolling — a nested scroller here traps the wheel. */
}

.gallery-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--gdc-surface-sunken);
    border: 2px dashed var(--gdc-border);
    color: var(--gdc-ink-faint);
    font-family: var(--gdc-font-ui);
    font-size: 13px;
}

.gallery-placeholder i { font-size: 26px; }
.gallery-placeholder p { margin: 0; }

/* Now the primary wide surface (not the 430px sidebar it used to sit in), so
   the header renders near lesson.html's real proportions — just a touch
   tighter, and the split collapses to one column sooner since this panel is
   narrower than the full lesson page. */
.ed-preview-lesson .lesson-title { font-size: 34px; }
.ed-preview-lesson .lesson-split { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 16px; }
.ed-preview-lesson .lesson-article { padding: 0; margin-top: 20px; box-shadow: none; background: transparent; }

/* ── Canvas (in-place editor) ────────────────────────────────────────────
   Scoped under .ed-canvas so none of this reaches the public lesson page,
   which reuses the same .block-*/.lesson-article markup. */

.ed-canvas {
    position: relative;
    background: var(--gdc-surface);
    border-radius: var(--gdc-radius);
    box-shadow: var(--gdc-shadow-card);
    padding: 36px 40px;
}

.ed-canvas-empty {
    font-family: var(--gdc-font-ui);
    font-size: 14px;
    color: var(--gdc-ink-faint);
    font-style: italic;
    text-align: center;
    margin: 0;
    padding: 20px 0;
}

/* Mirrors .block-row in lesson.css — two blocks only share a row once each
   is narrow enough to fit (see packRows in data.js / renderCanvas). */
.ed-row {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
    align-items: start;
}

.ed-block {
    position: relative;
    grid-column: span 6;
    min-width: 0;
    border-radius: 8px;
    /* Color-only highlight, no shadow/scale — matches the site-wide rule
       that a hover state changes color, never lifts or gains a shadow. */
    outline: 2px solid transparent;
    outline-offset: 4px;
    transition: outline-color 0.15s;
}

.ed-block:hover,
.ed-block:focus-within {
    outline-color: var(--gdc-accent-soft);
}

.ed-block--broken {
    padding: 14px;
    border: 2px dashed rgb(214, 90, 90);
    background: rgba(214, 90, 90, 0.06);
}

/* The toolbar sits above the block and only appears on hover/focus, so the
   canvas reads as the finished lesson until you interact with it. */
.ed-block-toolbar {
    position: absolute;
    top: -18px;
    right: 4px;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 4px 6px;
    border: 2px solid var(--gdc-border);
    border-radius: 999px;
    background: var(--gdc-surface);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
}

.ed-block:hover > .ed-block-toolbar,
.ed-block:focus-within > .ed-block-toolbar,
.ed-block-toolbar:focus-within {
    opacity: 1;
    pointer-events: auto;
}

.ed-block-handle {
    cursor: grab;
    padding: 0 4px;
    color: var(--gdc-ink-faint);
    line-height: 1;
    user-select: none;
}

.ed-block-handle:active { cursor: grabbing; }

.ed-block-type {
    height: 24px;
    max-width: 118px;
    padding: 0 4px;
    border: 1px solid var(--gdc-border);
    border-radius: 999px;
    background: var(--gdc-surface-sunken);
    color: var(--gdc-ink);
    font-family: var(--gdc-font-ui);
    font-size: 11px;
}

.ed-block-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--gdc-ink-muted);
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
}

.ed-block-btn:hover:not(:disabled),
.ed-block-btn.is-active {
    background: var(--gdc-accent-tint);
    color: var(--gdc-navy);
}

.ed-block-btn:disabled { opacity: 0.35; cursor: default; }

/* ── editable fields ────────────────────────────────────────────────────── */

.ed-editable {
    outline: none;
    border-radius: 4px;
    /* Shift+Enter stores a real newline; show it rather than collapsing it. */
    white-space: pre-wrap;
}

.ed-editable:hover { background: var(--gdc-accent-tint); }

.ed-editable:focus {
    background: var(--gdc-accent-tint);
    box-shadow: 0 0 0 2px var(--gdc-accent-soft);
}

.ed-field-placeholder {
    color: var(--gdc-ink-faint);
    font-style: italic;
    opacity: 0.85;
}

/* An image/video with no source yet: a drop-target-looking tile instead of a
   broken icon. */
.ed-image-empty img {
    min-height: 140px;
    border: 2px dashed var(--gdc-border);
    border-radius: 8px;
    background: var(--gdc-surface-sunken);
}

/* ── figure resize handle ───────────────────────────────────────────────
   Each figure in an image/text/code/video block sits on the shared 6-col
   grid (see lesson.css). Dragging this handle changes how many of the 6
   columns the figure spans. */
.ed-resizable { position: relative; }

.ed-resize-handle {
    position: absolute;
    top: 0;
    right: -8px;
    bottom: 0;
    width: 16px;
    cursor: ew-resize;
    opacity: 0;
    transition: opacity 0.15s;
    z-index: 2;
    touch-action: none;
}

.ed-resize-handle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4px;
    height: 32px;
    transform: translate(-50%, -50%);
    border-radius: 999px;
    background: var(--gdc-accent);
}

.ed-resizable:hover > .ed-resize-handle,
.ed-resizable.is-resizing > .ed-resize-handle {
    opacity: 1;
}

.ed-resizable.is-resizing {
    outline: 2px dashed var(--gdc-accent-soft);
    outline-offset: 3px;
}

/* ── insert rail ────────────────────────────────────────────────────────── */

.ed-inserter {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 14px;
    margin: -7px 0;
    z-index: 2;
}

.ed-inserter-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    border-radius: 2px;
    background: var(--gdc-accent-soft);
    opacity: 0;
    transition: opacity 0.15s;
}

.ed-inserter-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: 1px solid var(--gdc-border);
    border-radius: 999px;
    background: var(--gdc-surface);
    color: var(--gdc-ink-muted);
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s;
}

.ed-inserter:hover .ed-inserter-line,
.ed-inserter:focus-within .ed-inserter-line,
.ed-inserter.is-open .ed-inserter-line,
.ed-inserter.is-drop-target .ed-inserter-line {
    opacity: 1;
}

.ed-inserter:hover .ed-inserter-btn,
.ed-inserter:focus-within .ed-inserter-btn,
.ed-inserter.is-open .ed-inserter-btn {
    opacity: 1;
}

.ed-inserter.is-drop-target .ed-inserter-line {
    background: var(--gdc-navy);
    height: 3px;
}

/* ── block picker ───────────────────────────────────────────────────────── */

.ed-picker {
    position: absolute;
    top: 22px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 6;
    padding: 8px;
    border: 2px solid var(--gdc-border);
    border-radius: var(--gdc-radius);
    background: var(--gdc-surface);
    box-shadow: var(--gdc-shadow-lift);
}

.ed-picker-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(120px, 1fr));
    gap: 4px;
}

.ed-picker-item {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 10px;
    border: 2px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--gdc-ink);
    font-family: var(--gdc-font-ui);
    font-size: 12.5px;
    text-align: left;
    cursor: pointer;
}

.ed-picker-item i { color: var(--gdc-accent); }

.ed-picker-item:hover {
    background: var(--gdc-accent-tint);
    border-color: var(--gdc-accent-soft);
    color: var(--gdc-navy);
}

/* ── structured-field popover ───────────────────────────────────────────── */

.ed-popover {
    position: absolute;
    z-index: 20;
    width: min(440px, calc(100vw - 32px));
    max-height: min(60vh, 560px);
    overflow: auto;
    border: 2px solid var(--gdc-border);
    border-radius: var(--gdc-radius);
    background: var(--gdc-surface);
    box-shadow: var(--gdc-shadow-lift);
}

.ed-popover-header {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 11px 14px;
    border-bottom: 1px solid var(--gdc-border);
    background: var(--gdc-surface);
    font-family: var(--gdc-font-ui);
    color: var(--gdc-navy);
}

.ed-popover-close {
    border: 0;
    background: transparent;
    color: var(--gdc-ink-muted);
    font-size: 14px;
    cursor: pointer;
}

.ed-popover-close:hover { color: var(--gdc-navy); }

.ed-popover-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 14px;
}

/* ── canvas-only overrides of published-page styles ────────────────────── */

/* The whole link card is an <a>; read it as text, not a link, while editing. */
.ed-canvas .link-embed { cursor: text; }

/* Copy button is inert while editing — no JS needed, just don't let it fire. */
.ed-canvas .code-copy { opacity: 0.4; pointer-events: none; }

.ed-canvas .qa-question { cursor: text; }

/* Text selection during a drag would fight the drag itself. */
.ed-dragging .ed-editable { user-select: none; }
.ed-dragging .ed-block { cursor: grabbing; }

/* ------------------------------------------------------------- add tray   */

.ed-add-tray {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    background: var(--gdc-surface);
    border-radius: var(--gdc-radius);
    box-shadow: var(--gdc-shadow-sm);
    padding: 14px;
    margin-bottom: 16px;
}

.ed-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 2px dashed var(--gdc-border);
    border-radius: 8px;
    background: transparent;
    color: var(--gdc-ink-muted);
    padding: 8px 14px;
    font-family: var(--gdc-font-ui);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.ed-add-btn:hover {
    border-color: var(--gdc-accent);
    border-style: solid;
    background: var(--gdc-accent-tint);
    color: var(--gdc-navy);
}

.ed-add-btn i { color: var(--gdc-accent); }

/* ------------------------------------------------------------ card stack  */

.ed-card-stack { display: flex; flex-direction: column; gap: 16px; }

.ed-card { overflow: hidden; }

.ed-card-head {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    background: var(--gdc-navy);
    color: #fff;
    padding: 11px 18px;
}

.ed-card-name {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--gdc-font-ui);
    font-size: 14.5px;
    font-weight: 700;
}

.ed-card-index {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    padding: 1px 7px;
    font-size: 11.5px;
}

.ed-card-tools { display: flex; flex-wrap: wrap; gap: 6px; }

.ed-card-head .gdc-btn.ghost {
    border-color: rgba(255, 255, 255, 0.4);
    color: #fff;
}

.ed-card-head .gdc-btn.ghost:hover { border-color: #fff; }

.ed-card-head .gdc-btn.danger {
    border-color: rgba(255, 170, 170, 0.6);
    color: rgb(255, 198, 198);
}

.ed-card-body { padding: 18px; display: flex; flex-direction: column; gap: 14px; }

/* ---------------------------------------------------------------- figures */

.ed-figures { display: flex; flex-direction: column; gap: 12px; }

.ed-figure {
    border: 2px solid var(--gdc-border);
    border-radius: 8px;
    overflow: hidden;
}

.ed-figure-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: var(--gdc-surface-sunken);
    padding: 8px 13px;
}

.ed-figure-label {
    font-family: var(--gdc-font-ui);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--gdc-ink-faint);
}

.ed-figure-tools { display: flex; gap: 5px; }

.ed-figure-body { padding: 14px; display: flex; flex-direction: column; gap: 12px; }

.ed-empty {
    font-family: var(--gdc-font-ui);
    font-size: 13.5px;
    color: var(--gdc-ink-faint);
    font-style: italic;
    text-align: center;
    padding: 20px;
    margin: 0;
    border: 2px dashed var(--gdc-border);
    border-radius: 8px;
}

/* ---------------------------------------------------------------- toast   */

.toast {
    position: fixed;
    left: 50%;
    bottom: 28px;
    transform: translate(-50%, 20px);
    background: var(--gdc-navy);
    color: #fff;
    border-radius: 999px;
    padding: 12px 24px;
    font-family: var(--gdc-font-ui);
    font-size: 14px;
    font-weight: 600;
    box-shadow: var(--gdc-shadow-lift);
    opacity: 0;
    pointer-events: none;
    transition: all 0.25s ease;
    z-index: 60;
    max-width: min(90vw, 520px);
    text-align: center;
}

.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ------------------------------------------------------------ responsive  */

@media screen and (max-width: 1240px) {
    .ed-shell { grid-template-columns: minmax(0, 1fr); }
    /* The canvas is already the first child of .ed-main, so DOM order alone
       puts it above Export on narrow screens — no reordering needed. */
    .ed-side {
        position: static;
        max-height: none;
        overflow: visible;
    }
}

@media screen and (max-width: 900px) {
    .ed-canvas { padding: 24px 20px; }
    .ed-block-toolbar { top: -14px; }
}

@media screen and (max-width: 700px) {
    .editor { padding: 24px 16px 56px; }
    .ed-panel { padding: 18px 16px; }
    .ed-row { flex-direction: column; gap: 12px; }
    /* Stacked rows are a column flex container again — drop the basis. */
    .ed-row > .ed-field { flex: 0 0 auto; }
    .ed-card-head { flex-direction: column; align-items: flex-start; }
}