/*
 * Design-mode visual extensions over mcw-widgets.css.
 *
 * Keeps the verbatim ground_12 CSS files unmodified — every additive
 * rule that changes the design panel's behaviour relative to the
 * original lives here and is loaded AFTER `mcw-widgets.css` so the
 * cascade lets these rules win on any property we declare.
 *
 * If we ever want to fold a rule back into the mainline CSS, copy it
 * across and delete it here.
 */

/* ── .has-value ────────────────────────────────────────────────────────
 *
 * Cells that hold a custom value but aren't the currently-winning
 * breakpoint at the author's current preview size. The goal is a
 * secondary visual cue so an author can see at a glance which columns
 * have been customised, without losing the single-winner highlight.
 *
 * Rule hierarchy on a `.mcfw-setting`:
 *   no extra class   → white border, transparent fill      (no value)
 *   .has-value       → dashed green border, transparent    (value set, not winner)
 *   .winner          → solid green border, light-green fill (value set + winner)
 *   .winner-default  → solid purple border, light-purple   (value comes from nodeType default)
 *
 * `.winner` + `.has-value` can both appear on a single cell — the
 * later `.winner` rule wins on border/background so the dashed outline
 * never shows on the winning cell.
 */
.mcfw-setting.has-value {
    border: 1px dashed #91af70;
    /* Light neutral gray fill so an empty cell vs a value-set cell is
       visible at a glance even when the column is inactive (the dashed
       border alone tends to disappear against the panel background). */
    background: #f0f0f0;
}

/* Winner darker than ground_12 baseline.
 *
 * ground_12 painted the winner with `border: #91af70 / bg: #eaefe4`
 * (a pale sage). Against the new `.has-value` light-gray fill, that
 * pale green didn't read as "this is the active one" with enough
 * contrast — the dashed-and-grey siblings looked nearly as prominent.
 * Darkened the border ~3 shades and the fill ~1 shade so the winner
 * stands out clearly from its has-value siblings.
 *
 * `.mcfw-setting.winner` (without `.has-value`) is also overridden in
 * case a code path ever sets `.winner` without `.has-value` — keeps
 * the visual contract consistent regardless of which JS path applied
 * the class.
 */
.mcfw-setting.winner,
.mcfw-setting.has-value.winner {
    border: 1px solid #6f9050;
    background: #d4e1c4;
}

.mcfw-setting.winner-default,
.mcfw-setting.has-value.winner-default {
    /* Matched darker-purple sibling so the two winner variants stay
       visually paired — same darkness step as the green. */
    border: 1px solid #6e4a99;
    background: #c7b8da;
}

/* On inactive columns (cells the current viewport is wider than, so
   their media query is not applied) the dashed marker stays but the
   fill mutes a bit further so it harmonises with the existing
   `.mcfw-setting-inactive` dimming. */
.mcfw-setting-inactive .mcfw-setting.has-value {
    border-color: #b8cfa3;
    background: #f6f6f6;
}

/* ── Per-column clear icon — re-anchor to the cell ────────────────────
 *
 * The ground_12 template nests `.mcfw-wdw-clear-value` inside
 * `.mcfw-row.mcfw-relative` next to the label, and the vendor CSS
 * positions it `top:0 right:0` of that row — visually it lands ABOVE
 * the setter's +/input/– buttons, reading as "a floating icon outside
 * the box" rather than "clear this cell".
 *
 * CSS `position: absolute` resolves against the nearest positioned
 * ancestor. The intermediate row has `.mcfw-relative` (from
 * `mc-base.css`), which wins over the cell. To anchor the icon on the
 * cell we have to:
 *   1. Make `.mcfw-setting` itself `position: relative`.
 *   2. Cancel the intermediate row's `position: relative` WITHIN a
 *      setter cell so the icon escapes to the cell level. The row
 *      only holds `[label, clear-icon]` — nothing else depends on
 *      its positioning, so neutralising it here is safe.
 *   3. Re-anchor the icon to the cell's top-right corner; z-index
 *      keeps it clickable over select dropdowns / +/– buttons.
 *
 * Scoped via `.mcfw-setting` so the row-level clear icon inside
 * `.attr-icon-c` keeps its original position unchanged.
 */
.mcfw-setting { position: relative; }
.mcfw-setting > .mcfw-row.mcfw-relative { position: static; }
.mcfw-setting > .mcfw-row > .mcfw-wdw-clear-value {
    top: 2px;
    right: 2px;
    z-index: 3;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * Widget-editor popup polish (widget_editor.html)
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * Font stack + defaults scoped to the popup only via `.we-popup-body`.
 *
 * The public site / main design page don't get this — they already
 * have their own typography (`fonts.css`, `mc-fonts.css` — declared
 * faces like `admin-font`, `nunito`, `quicksand`, plus the
 * `linearicons` + `mcw-designer` icon fonts we wired earlier).
 * Overriding the popup avoids touching any of that.
 *
 * The stack matches what GitHub / Linear / Stripe use — native on
 * every OS (San Francisco on macOS, Segoe UI Variable on Windows
 * 11, Inter-ish via `system-ui` fallback on Linux), no webfont
 * load, crisp at small sizes.
 */

.we-popup-body,
.we-popup-body input,
.we-popup-body select,
.we-popup-body button,
.we-popup-body textarea {
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI Variable",
        "Segoe UI",
        "Helvetica Neue",
        Roboto,
        Ubuntu,
        Cantarell,
        "Noto Sans",
        Arial,
        sans-serif;
    font-size: 13px;
    color: #1f2328;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Values that feel like data — numeric inputs + identifier badges —
   use a matched monospace stack so digits line up column-to-column.
   Only applied where the DOM already suggests code-like content. */
.we-popup-body .mcfw-attr-value,
.we-popup-body input[type="number"],
.we-popup-body input[type="text"].mcfw-attr-value {
    font-family:
        ui-monospace,
        "SF Mono",
        "Cascadia Code",
        "JetBrains Mono",
        Menlo,
        Consolas,
        monospace;
    font-variant-numeric: tabular-nums;
}

/* ── Structure + chrome ────────────────────────────────────────────────────
 *
 * ground_12's popup was a collection of .mcfw-column / .mcfw-row divs
 * with zero framing, which is what the screenshot showed: plain labels
 * glued to the left edge, lots of vertical air, the stub
 * "LocalizedtextEditor_M not migrated yet" hanging visible at the top.
 *
 * The markup adds three classes — .we-popup-header, .we-popup-section,
 * .we-popup-section-title — that DON'T touch the migrated JS's DOM
 * selectors. The MCWidgetDesign* files still find their attach
 * points via the original .mcfw-column / .mcfw-row / .attribute_editor_container
 * classes; we layer chrome on top.
 */

/* ── Popup title bar ────────────────────────────────────────────── */

.we-popup-header {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 10px 16px;
    border-bottom: 1px solid #d0d7de;
    background: #f6f8fa;
    position: sticky;
    top: 0;
    z-index: 10;
    /* font-family inherited from `.we-popup-body` above. */
}

.we-popup-header .we-popup-title {
    font-size: 14px;
    font-weight: 600;
    color: #1f2328;
    letter-spacing: 0.2px;
}

.we-popup-header .we-popup-subtitle {
    font-size: 11px;
    color: #57606a;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

/* ── Sections ──────────────────────────────────────────────────── */

/* Subtle separator + breathing room. The existing `.mcfw-column`
   layout keeps working — the extra padding is additive. */
.we-popup-section {
    padding: 10px 14px 14px;
    border-bottom: 1px solid #eaeef2;
}

.we-popup-section-title {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #57606a;
    margin-bottom: 6px;
}

/* Hide empty sections entirely. Used for the localization container
   which stays empty in the current stub build — no "not migrated yet"
   message, no empty heading, no wasted space.
   `:empty` matches containers with no children AND no text nodes,
   which is exactly the stub state. */
.we-popup-section:has(.localization-editor-container:empty) {
    display: none;
}

/* Fallback for browsers without `:has()` support — keep the
   `.localization-container` entirely hidden if its body is empty.
   `:has()` has been in Safari + Chrome since 2023, so this is mostly
   belt-and-braces. If you need to force-show an empty localization
   section during development, swap this to `display: block !important`. */
.localization-container .localization-editor-container:empty {
    /* Hides the container content; combined with the `:has()` rule
       above, the whole section collapses on empty. */
    display: none;
}

/* ── Tighten the attribute rows ────────────────────────────────── */

/* ground_12's widget margin / padding blocks have a lot of vertical
   air between the three rows (`+`, input, `-`). This tightens things
   so more attributes fit on screen without scrolling. Only scoped
   under `.we-popup-section` so the change doesn't affect the same
   widgets on the main design page (outside the popup). */

.we-popup-section .mcfw-attr-row {
    margin-bottom: 2px;
}

.we-popup-section .mcfw-wdw-margin-button {
    /* The inc/dec buttons currently have default button padding;
       trimming to a fixed mini-square keeps the per-row height tight. */
    min-width: 22px;
    min-height: 22px;
    padding: 0;
    font-size: 14px;
    line-height: 1;
}

.we-popup-section .mcfw-attr-value {
    /* The numeric / unit inputs get slightly reduced height to match
       the mini inc/dec buttons; keeps every attribute row at ~28 px
       tall instead of the ~44 px the defaults give. */
    height: 22px;
    padding: 2px 4px;
    font-size: 12px;
}

/* Collapsible section toggles (Padding / Size / Flex options / Font)
   get a thin padded border so they read as "clickable strip" even
   when collapsed. */
.we-popup-section .panel-header,
.we-popup-section .mcfw-minified-label {
    padding: 6px 10px;
    cursor: pointer;
}

.we-popup-section .mcfw-minified-label:hover,
.we-popup-section .panel-header:hover {
    background: #f2f5f9;
}

/* ── Component-tree selected row ───────────────────────────────
 *
 * `.mcdw-component.selected` in the Views tree (see
 * `mcw-widgets.css:1192`) is a full-bleed green bar that hugs the
 * side panel's edges. Rounded corners + a small horizontal inset
 * make it read as "a picked chip in a list" instead of "a ribbon
 * glued to the wall". Same green (`#87bb26`), same text colour —
 * only the shape softens.
 *
 * Inset via margin so the click target stays full-width; padding
 * keeps the text from hugging the rounded edge. */
/* Note on shorthand margins: we intentionally set only left/right here
 * so the compact rule below (`.mcdw-component { margin-top/bottom: 1px }`)
 * keeps the row's vertical size fixed across default → hover → selected.
 * An earlier version used `margin: 2px 6px` which overrode top/bottom and
 * made rows jump +1px on hover. */
.we-popup-body .mcfw-wdw-editable-component-list .mcdw-component.selected {
    border-radius: 6px;
    margin-left: 6px;
    margin-right: 6px;
    padding-left: 8px;
    padding-right: 8px;
}

/* Matching affordance on hover so the transition from hover
   (`#f1d7b9` salmon) to selected (`#87bb26` green) keeps the
   same rounded shape — otherwise the row subtly jumps when the
   class swap fires. */
.we-popup-body .mcfw-wdw-editable-component-list .mcdw-component:hover {
    border-radius: 6px;
    margin-left: 6px;
    margin-right: 6px;
    padding-left: 8px;
    padding-right: 8px;
}

/* ── Compact Views tree ────────────────────────────────────────
 *
 * Upstream `mcw-widgets.css` sets the Views tree items to roughly
 * 38-42px tall (`.mcdw-label` line-height:30px + `.mcdw-icon`
 * line-height:27px + `.mcdw-component` 4px vertical margin).
 * That's fine when the tree is the only thing on the page, but in
 * the popup every vertical pixel competes with the form below, so
 * shrink the row height by ~40% (~22-24px) using a popup-scoped
 * override. Same selectors, same colors, just tighter.
 *
 * Selection/hover margins in the rules above are preserved by
 * leaving their `margin` alone — we only override the row-internal
 * sizes here. */
.we-popup-body .mcfw-wdw-editable-component-list .mcdw-component {
    margin-top: 1px;
    margin-bottom: 1px;
    padding-top: 0;
    padding-bottom: 0;
}
.we-popup-body .mcfw-wdw-editable-component-list .mcdw-label {
    font-size: 12px;
    line-height: 20px;
}
.we-popup-body .mcfw-wdw-editable-component-list .mcdw-icon {
    font-size: 13px;
    line-height: 20px;
    width: 18px;
}
/* The "Views" header above the tree — drop vertical weight too so
 * the label doesn't tower over the (now compact) items. */
.we-popup-body .mcfw-wdw-editable-component-list > .component-list-label {
    font-size: 11px;
    line-height: 18px;
    margin: 4px 6px 2px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #586069;
}

/* ── Breakpoint column headers ─────────────────────────────────── */

/* The column labels (All / phone / tablet / notebook / desktop / large)
   already colour-code themselves (phone=orange, tablet=red, notebook=
   green, desktop=grey, large=grey) via the migrated CSS. Add subtle
   bottom borders to make the row group read as a table header.
   Keeps the existing colours unchanged. */
.we-popup-section .mcfw-setting-active.mcfw-general-setting {
    border-bottom: 1px solid #d0d7de;
    padding-bottom: 3px;
}

/* ── List-widget chrome reduction ──────────────────────────────────────
 * Hide the left info panel for list-type widgets — only the right-side
 * pen icon is needed. Class added by WeListWidgetChrome in we-design-chrome.js. */
.left-info-panel.we-chrome-list-type {
    display: none !important;
}

/* Per-row pens: hidden by default, revealed on row hover.
 * Gated off the row wrapper itself — no JS marker class needed,
 * so it works for every collection widget regardless of whether
 * `WeListWidgetChrome` tagged the panel. */
.entity-list-item > .right-info-panel,
.entity-grid-item > .right-info-panel,
.model-slick-item > .right-info-panel,
.splide__slide    > .right-info-panel,
.glide__slide     > .right-info-panel {
    display: none;
}
.entity-list-item:hover > .right-info-panel,
.entity-grid-item:hover > .right-info-panel,
.model-slick-item:hover > .right-info-panel,
.splide__slide:hover    > .right-info-panel,
.glide__slide:hover     > .right-info-panel {
    display: block;
}

/* ── CSS-anchored design chrome ────────────────────────────────────────
 *
 * Replaces the legacy RAF reposition loop in MCWidgetManager. The
 * left/right info panels are now appended as children of the widget's
 * positioned host (`.layout-item` for top-level widgets,
 * `.entity-list-item` for listitem rows) so the browser handles their
 * placement natively — zero JS layout reads per frame.
 *
 * The legacy code applied `position: fixed` inline via `.css()` calls;
 * that's gone now, and this rule wins on specificity for any nested
 * panel. Top-level placements default to top-corners; listitem rows
 * use `.we-chrome-bottom-right` to anchor at the bottom instead.
 */
/* Per-row wrappers across all collection widgets must be positioned
 * so the pen children land at the row's bottom-right, not the outer
 * widget's. Without this, `closest()` falls back to `.layout-item`
 * and every row's pen stacks at the bottom of the whole grid/list. */
.entity-list-item,
.entity-grid-item,
.model-slick-item,
.splide__slide,
.glide__slide { position: relative; }

/* Use `!important` + descendant selectors (not `>`) so the rule wins
 * over the vendor `.mcfw-widget-design-wrapper .left-info-panel`
 * baseline (same specificity → cascade order matters, and we ship
 * before the vendor stylesheet in `DesignModeAssets`). z-index 1000
 * matches the vendor baseline so the panel sits above widget content. */
.layout-item      .left-info-panel,
.entity-list-item .left-info-panel,
.entity-grid-item .left-info-panel,
.model-slick-item .left-info-panel,
.splide__slide    .left-info-panel,
.glide__slide     .left-info-panel,
.layout-item      .right-info-panel,
.entity-list-item .right-info-panel,
.entity-grid-item .right-info-panel,
.model-slick-item .right-info-panel,
.splide__slide    .right-info-panel,
.glide__slide     .right-info-panel {
    position: absolute !important;
    top: 0 !important;
    z-index: 1000 !important;
}
.layout-item      .left-info-panel,
.entity-list-item .left-info-panel,
.entity-grid-item .left-info-panel,
.model-slick-item .left-info-panel,
.splide__slide    .left-info-panel,
.glide__slide     .left-info-panel { left: 0 !important; right: auto !important; }
.layout-item      .right-info-panel,
.entity-list-item .right-info-panel,
.entity-grid-item .right-info-panel,
.model-slick-item .right-info-panel,
.splide__slide    .right-info-panel,
.glide__slide     .right-info-panel { right: 0 !important; left: auto !important; }

/* Bottom-right anchor for listitem row pens. */
.layout-item      .right-info-panel.we-chrome-bottom-right,
.entity-list-item .right-info-panel.we-chrome-bottom-right,
.entity-grid-item .right-info-panel.we-chrome-bottom-right,
.model-slick-item .right-info-panel.we-chrome-bottom-right,
.splide__slide    .right-info-panel.we-chrome-bottom-right,
.glide__slide     .right-info-panel.we-chrome-bottom-right {
    top: auto !important;
    bottom: 0 !important;
}

/* `.layout-item` ships with `overflow: hidden`; let the pens overflow
 * if they extend slightly past the corner. Same treatment for per-row
 * wrappers so pens at the bottom of a row aren't clipped. The design
 * stylesheet itself is only loaded in design mode (DesignModeAssets),
 * so no extra scoping needed. */
.layout-item,
.entity-list-item,
.entity-grid-item,
.model-slick-item,
.splide__slide,
.glide__slide { overflow: visible; }

/* ── Selected-widget overlay (`.ec-root-selected:before`) ─────────────
 *
 * Vendor baseline draws a faint pink diagonal-stripe overlay above the
 * selected widget. Two issues for collection widgets:
 *   1. The overlay blocks pointer events on listitem rows underneath,
 *      so you can't hover/select children once the parent is selected.
 *   2. The stripes are barely visible (alpha ~0.06) so it's hard to
 *      tell *what* is selected at a glance.
 * Override: pointer-events: none + bump the alpha so the pattern reads
 * clearly without losing its translucent character. */
.ec-root-selected:before {
    pointer-events: none !important;
    border-color: rgba(199, 121, 161, 0.9) !important;
    background: repeating-linear-gradient(
            45deg,
            rgba(199, 121, 161, 0.22),
            rgba(199, 121, 161, 0.22) 10px,
            rgba(199, 121, 161, 0.12) 10px,
            rgba(199, 121, 161, 0.12) 20px
    ) !important;
}

/* ── Static lazy pen (`.we-lazy-pen`) ─────────────────────────────────
 *
 * Rendered by `designModeInit` directly into each widget's positioned
 * host (no MCWidgetDesignWidget construction needed at page load). The
 * `.right-info-panel` class is co-applied so it inherits the absolute
 * positioning rules above — same anchor logic as the legacy chrome.
 *
 * Listitem rows additionally carry `.we-chrome-bottom-right` to flip
 * to the bottom-right corner; show-on-hover is already covered by the
 * `.entity-list-item:hover > .right-info-panel` family of rules. */
.we-lazy-pen {
    cursor: pointer;
}

/* ── Hover highlight on editable targets ──────────────────────────────
 *
 * Outline (not border) so the row's box doesn't shift by 2px on hover —
 * outlines render outside the box model. Bright primary colour with a
 * subtle glow so the hover target reads at a glance even on busy
 * backgrounds. */
.layout-item:hover,
.entity-list-item:hover,
.entity-grid-item:hover,
.model-slick-item:hover,
.splide__slide:hover,
.glide__slide:hover {
    outline: 2px solid #2563eb;
    outline-offset: -2px;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.18);
}