/* Gillish Canvas — editor-only block chrome.
 *
 * Loaded inside the Composer iframe (and on the standard post
 * editor when CC is in play). Gives every Canvas block a faint
 * outline + a corner label so authors can see their layout
 * structure even when blocks are empty. None of these styles
 * reach the frontend — the rules are scoped to the
 * `.editor-styles-wrapper` body class that wp-block-editor sets
 * on its iframe body. (The `.block-editor` class lives on the
 * outer wp-admin chrome; inside the iframe the editor body uses
 * `.editor-styles-wrapper editor-iframe__body`.)
 *
 * Pairs with `gc-blocks-frontend.css` (which ships the actual
 * visual layout). Editor styles sit on top.
 */

/* ─── Outline + label for Container ────────────────────── */
.editor-styles-wrapper .gc-container,
body.editor-styles-wrapper .gc-container {
    position: relative;
    outline: 1px dashed #c3c4c7;
    outline-offset: -1px;
    min-height: 120px;
}
.editor-styles-wrapper .gc-container::before,
body.editor-styles-wrapper .gc-container::before {
    content: "Container";
    position: absolute;
    top: 4px;
    right: 8px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #50575e;
    background: rgba( 255, 255, 255, 0.85 );
    padding: 2px 6px;
    border-radius: 3px;
    pointer-events: none;
    z-index: 1;
}

/* ─── Outline + label for Columns + Column ─────────────── */
.editor-styles-wrapper .gc-columns,
body.editor-styles-wrapper .gc-columns {
    position: relative;
    outline: 1px dashed #2271b1;
    outline-offset: -1px;
    min-height: 80px;
    width: 100%;
    /* Force the row to span the available canvas width — without
     * an explicit width, empty flex columns collapse to 0px and
     * the whole block looks like a thumbnail. */
}
.editor-styles-wrapper .gc-columns--placeholder,
body.editor-styles-wrapper .gc-columns--placeholder {
    /* The variation-picker state needs breathing room so the
     * thumbnail grid + Skip link don't crash against the dashed
     * outline. Outline gets dropped here — the BlockVariationPicker
     * has its own visual chrome. */
    outline: none;
    padding: 8px 0;
    min-height: 0;
}
.editor-styles-wrapper .gc-columns::before,
body.editor-styles-wrapper .gc-columns::before {
    content: "Columns";
    position: absolute;
    top: -10px;
    right: 8px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #2271b1;
    background: #fff;
    padding: 2px 6px;
    border-radius: 3px;
    pointer-events: none;
    z-index: 2;
}
.editor-styles-wrapper .gc-columns--placeholder::before,
body.editor-styles-wrapper .gc-columns--placeholder::before {
    /* Hide the corner label in the picker state — the picker's
     * own heading carries the "Columns" identity. */
    content: none;
}
.editor-styles-wrapper .gc-column,
body.editor-styles-wrapper .gc-column {
    outline: 1px dashed #c3c4c7;
    outline-offset: -1px;
    padding: 12px;
    min-height: 120px;
    /* Each column needs a working width; without min-width the
     * flex `1 1 0` allocation gets clamped to content size, which
     * is 0 for empty columns. */
    min-width: 60px;
}

/* ─── Drag handle between columns (editor only) ───────── */
/* Custom pointer-driven handle on the right edge of every
 * non-final column. Hit area is intentionally wider than the
 * visible chevron — 16px wide, with a 4px visible strip — so
 * the cursor snaps reliably without designers having to thread
 * a tiny target. Visible by default at low opacity; the
 * selected state amplifies the contrast. */
.editor-styles-wrapper .gc-column,
body.editor-styles-wrapper .gc-column {
    /* Make the handle's absolute positioning anchor to the
     * column instead of bubbling up to some ancestor block-list. */
    position: relative;
}
.editor-styles-wrapper .gc-column__handle--right,
body.editor-styles-wrapper .gc-column__handle--right {
    position: absolute;
    top: 0;
    /* Hit area is 24px wide, centered on the column edge — 12px
     * inside the column and 12px into the gap. Wider than the
     * earlier 16px because real cursor precision plus Gutenberg's
     * between-blocks inserter sitting just past the column edge
     * make a tight target unusable. The visible chevron stays
     * the same small size via the ::before below. */
    right: -12px;
    width: 24px;
    height: 100%;
    cursor: col-resize;
    /* Sit above Gutenberg's between-blocks inserter (z-index ~2)
     * so the handle wins pointer events in the column gap. */
    z-index: 10;
    background: transparent;
    /* Touch behaviour: prevent the browser from interpreting
     * horizontal drags as scroll gestures so the pointer events
     * arrive uninterrupted. */
    touch-action: none;
    user-select: none;
}
.editor-styles-wrapper .gc-column__handle--right::before,
body.editor-styles-wrapper .gc-column__handle--right::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4px;
    height: 32px;
    transform: translate(-50%, -50%);
    border-radius: 2px;
    background: #c3c4c7;
    transition: background 120ms ease-out, height 120ms ease-out;
}
.editor-styles-wrapper .gc-column:hover .gc-column__handle--right::before,
.editor-styles-wrapper .wp-block.is-selected .gc-column__handle--right::before,
.editor-styles-wrapper .wp-block.has-child-selected .gc-column__handle--right::before,
body.editor-styles-wrapper .gc-column:hover .gc-column__handle--right::before,
body.editor-styles-wrapper .wp-block.is-selected .gc-column__handle--right::before {
    background: #2271b1;
    height: 48px;
}

/* ─── Selected-block emphasis ──────────────────────────── */
.editor-styles-wrapper .gc-container.is-selected,
.editor-styles-wrapper .gc-columns.is-selected,
.editor-styles-wrapper .gc-column.is-selected {
    outline-color: #2271b1;
    outline-style: solid;
}

/* Block-editor wraps every block in a `wp-block` wrapper; the
 * is-selected class lands on that. Cover both the inner element
 * (above) and the outer wrap. */
.editor-styles-wrapper .wp-block.is-selected > .gc-container,
.editor-styles-wrapper .wp-block.is-selected > .gc-columns,
.editor-styles-wrapper .wp-block.is-selected > .gc-column {
    outline-color: #2271b1;
    outline-style: solid;
}

/* ─── Dark-mode pairs (iframe body inherits gc-dark-mode) ── */
body.gc-dark-mode .gc-container::before {
    color: #cbd5e1;
    background: rgba( 30, 41, 59, 0.85 );
}
body.gc-dark-mode .gc-columns::before {
    color: #93c5fd;
    background: #1e293b;
}
body.gc-dark-mode .gc-container,
body.gc-dark-mode .gc-column {
    outline-color: #475569;
}
body.gc-dark-mode .gc-columns {
    outline-color: #60a5fa;
}

/* ─── Repeater + RepeaterRow ─────────────────────────────
 *
 * Phase 7 foundation primitive. Editor-only chrome covers four
 * surfaces: the empty-state placeholder, the dashed "Add row"
 * appender, per-row outlining + hover affordances, and the
 * inspector warning / info pills.
 *
 * Color discipline per DESIGN.md: tinted neutrals only at rest,
 * Canvas Ink (oklch(20% 0.04 250)) earns its ≤10% surface budget
 * exclusively on hover / focus / selection moments. Restrained
 * strategy throughout.
 *
 * Drag-handle reveal is context-dependent per Phase 7 shape Q1:
 * always-visible in regular post editor (author manipulates rows),
 * hover-revealed in CPT editor (designer focuses on row-template
 * design). The .gc-repeater--in-cpt-editor modifier comes from
 * editor.js reading window.gcInspectorPanels.isCanvasBlockCpt.
 *
 * Dark-mode pairs are intentionally omitted: WP 7.0+ runs the
 * block editor in an iframe, and body.gc-dark-mode lives on the
 * outer wp-admin body which doesn't propagate to the iframe.
 * Pre-iframe dark-mode rules on Columns above are vestigial. */

/* Wrapper outline — subtle structural mark in editor only. */
.editor-styles-wrapper .gc-repeater {
    outline: 1px dashed oklch(85% 0.01 250);
    outline-offset: 4px;
    padding: 4px;
}

/* Empty-state placeholder. Card-like region with muted tint and
 * the "Add first item" CTA centered. Generous padding so the
 * affordance reads as primary, not an afterthought. No
 * illustration per the shape brief's rejection of illustrated
 * empty states in production-register UIs. */
.editor-styles-wrapper .gc-repeater--empty {
    outline: none;
}
.editor-styles-wrapper .gc-repeater__placeholder {
    background: oklch(98% 0.005 250);
    border: 1.5px dashed oklch(80% 0.015 250);
    border-radius: 6px;
    padding: 32px 24px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}
.editor-styles-wrapper .gc-repeater__placeholder-copy {
    margin: 0;
    color: oklch(45% 0.02 250);
    font-size: 14px;
    line-height: 1.4;
}

/* "Add first item" button (empty state) and "Add row" appender
 * (populated state) share the same dashed-border treatment.
 * Gutenberg's ButtonBlockAppender lives at
 * .block-editor-button-block-appender inside .gc-repeater; we
 * restyle it so the affordance keeps shape from 0 rows to N. */
.editor-styles-wrapper .gc-repeater__add-first.components-button,
.editor-styles-wrapper .gc-repeater .block-editor-button-block-appender {
    width: 100%;
    border: 1.5px dashed oklch(75% 0.02 250);
    background: transparent;
    color: oklch(35% 0.025 250);
    padding: 10px 16px;
    border-radius: 6px;
    transition: border-color 200ms cubic-bezier(0.22, 1, 0.36, 1),
                color 200ms cubic-bezier(0.22, 1, 0.36, 1),
                background 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
.editor-styles-wrapper .gc-repeater__add-first.components-button:hover,
.editor-styles-wrapper .gc-repeater .block-editor-button-block-appender:hover {
    border-color: oklch(20% 0.04 250);
    color: oklch(20% 0.04 250);
    background: oklch(96% 0.01 250);
}
.editor-styles-wrapper .gc-repeater__add-first.components-button:focus-visible,
.editor-styles-wrapper .gc-repeater .block-editor-button-block-appender:focus-visible {
    border-color: oklch(20% 0.04 250);
    outline: 2px solid oklch(20% 0.04 250 / 0.4);
    outline-offset: 2px;
}

/* At-max state. The renderAppender ternary in editor.js sets
 * renderAppender to false when innerCount >= maxItems, so the
 * appender is hidden by Gutenberg already. The modifier class
 * here just dims the wrapper outline slightly so the "no more
 * additions" signal lands visually. */
.editor-styles-wrapper .gc-repeater--at-max {
    outline-color: oklch(90% 0.005 250);
}

/* Row chrome. Two reveal modes per Phase 7 shape Q1.
 *
 * Default (regular post editor = author context): subtle but
 * always-visible outline. Communicates "this is a manipulable
 * row" without forcing hover discovery. */
.editor-styles-wrapper .gc-repeater__row {
    outline: 1px solid oklch(92% 0.01 250);
    outline-offset: -1px;
    border-radius: 4px;
    padding: 8px;
    transition: outline-color 150ms cubic-bezier(0.22, 1, 0.36, 1);
}
.editor-styles-wrapper .gc-repeater__row:hover,
.editor-styles-wrapper .gc-repeater__row.is-selected,
.editor-styles-wrapper .gc-repeater__row:has(.is-selected) {
    outline-color: oklch(20% 0.04 250);
}

/* CPT-editor context (designer context): chrome stays out of the
 * way at rest. Hover and selection bring it back. Mirrors the
 * Phase 2 role-based default-open precedent. */
.editor-styles-wrapper .gc-repeater--in-cpt-editor .gc-repeater__row {
    outline-color: transparent;
}
.editor-styles-wrapper .gc-repeater--in-cpt-editor .gc-repeater__row:hover,
.editor-styles-wrapper .gc-repeater--in-cpt-editor .gc-repeater__row.is-selected,
.editor-styles-wrapper .gc-repeater--in-cpt-editor .gc-repeater__row:has(.is-selected) {
    outline-color: oklch(20% 0.04 250);
}

/* Inspector warning + info pills. Surfaced when min/max rules
 * trigger; the inspector PanelBody hosts them via editor.js. */
.gc-repeater__inspector-warning,
.gc-repeater__inspector-info {
    margin: 8px 0 0;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 12px;
    line-height: 1.4;
}
.gc-repeater__inspector-warning {
    background: oklch(96% 0.04 80);
    color: oklch(30% 0.06 60);
}
.gc-repeater__inspector-info {
    background: oklch(96% 0.01 250);
    color: oklch(40% 0.02 250);
}

/* Row-actions cluster in the row's inspector PanelBody. Flex
 * column with consistent spacing so the four buttons (Move up /
 * Move down / Duplicate / Delete) read as a coherent action
 * group, not a stack of disconnected controls. */
.gc-repeater__row-actions {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.gc-repeater__row-actions .components-button {
    justify-content: flex-start;
}