/**
 * PSDM Properties Panel — LAYOUT / RESPONSIVE / COLLAPSIBLES + color-picker popover.
 *
 * Loaded AFTER psdm-properties-panel.css (which owns the shell + control primitives).
 * This file owns the spatial re-composition that gives the panel pro-editor density:
 *   • label-INLINE-LEFT groups (the big one) — every .psdm-pp-group becomes a 2-col
 *     grid [label | control], collapsing a one-control group to a single 32px row.
 *   • container-query responsive (the sidebar is resizable 360-700px): Size|Style and
 *     Rotate|Flip pair onto one row, X/Y/W/H go 4-up, anchors go 9-up, etc.
 *   • collapsible advanced groups (chevron) for Curved text / Shadow / Clipping mask.
 *   • the per-section dense grids (filters, masks, anchors, path colors).
 *   • the floating color-picker popover (#psdm-colorpicker).
 *
 * The panel scopes responsiveness to its OWN width via container queries
 * (container-type: inline-size on #psdm-props, set in the base file) so it adapts to
 * the sidebar width, not the viewport.
 */

/* ============================================================================
   THE BIG ONE — label-inline-left groups via grid re-composition
   ============================================================================ */
#psdm-props .psdm-pp-group {
    display: grid;
    grid-template-columns: var(--pp-label-w) minmax(0, 1fr);
    column-gap: 8px;
    row-gap: 6px;
    align-items: start;
    margin: 0 0 10px;
}
#psdm-props .psdm-pp-group:last-child { margin-bottom: 0; }
/* label sits in col 1, a 32px line-box so it centers against the first control row */
#psdm-props .psdm-pp-group > .psdm-pp-label {
    grid-column: 1;
    height: var(--pp-row-h);
    display: flex;
    align-items: center;
}
/* everything else flows into col 2, stacking rows */
#psdm-props .psdm-pp-group > :not(.psdm-pp-label) { grid-column: 2; min-width: 0; }

/* ---- dense micro grids (X/Y/W/H, shadow, stroke detail, masks, anchors) ---- */
#psdm-props .psdm-pp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#psdm-props .psdm-pp-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
#psdm-props .psdm-pp-grid5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
#psdm-props .psdm-anchor,
#psdm-props .psdm-galign { font-size: 12px; font-weight: 600; }

/* STANDALONE chip buttons (anchors, mask presets, align/distribute) — the .psdm-pp-btn
   NOT fused inside a .psdm-pp-seg get their own bordered chip look (the base .psdm-pp-btn
   is transparent/borderless for the segmented case). */
#psdm-props .psdm-pp-grid .psdm-pp-btn,
#psdm-props .psdm-pp-grid3 .psdm-pp-btn,
#psdm-props .psdm-pp-grid5 .psdm-pp-btn {
    border: 1px solid var(--pp-border-soft); background: #fff;
    border-radius: var(--pp-r); height: var(--pp-row-h);
}
#psdm-props .psdm-pp-grid .psdm-pp-btn:hover,
#psdm-props .psdm-pp-grid3 .psdm-pp-btn:hover,
#psdm-props .psdm-pp-grid5 .psdm-pp-btn:hover { background: var(--pp-field); border-color: var(--pp-border); }
#psdm-props .psdm-pp-grid .psdm-pp-btn.psdm-on,
#psdm-props .psdm-pp-grid3 .psdm-pp-btn.psdm-on,
#psdm-props .psdm-pp-grid5 .psdm-pp-btn.psdm-on { background: var(--pp-tint); border-color: var(--pp-accent); color: var(--pp-accent); }
#psdm-props .psdm-pp-grid5 .psdm-pp-btn { height: 28px; font-size: 11px; }

/* stacked seg rows + the "set as background" / clear quiet rows */
#psdm-props .psdm-pp-seg + .psdm-pp-seg { margin-top: 4px; }
/* color button inside a row shares space with a trailing step (e.g. bg clear) */
#psdm-props .psdm-pp-row .psdm-pp-colorbtn { width: auto; flex: 1; }
#psdm-props .psdm-pp-row .psdm-pp-step {
    flex: 0 0 auto; width: 32px; height: var(--pp-row-h);
    border: 1px solid var(--pp-border); border-radius: var(--pp-r); background: #fff;
}
#psdm-props .psdm-pp-row .psdm-pp-step:hover { background: var(--pp-field); }

/* unit suffix fused into a stepper (e.g. font size in points) — reads as part of
   the field, never intercepts clicks */
#psdm-props .psdm-pp-stepper .psdm-pp-unit {
    display: flex; align-items: center; flex: 0 0 auto;
    padding: 0 7px; font-size: 11px; font-weight: 600;
    color: var(--pp-muted); background: #fff;
    user-select: none; pointer-events: none;
}
/* inline validation note under a control (e.g. below the store's min font size) */
#psdm-props .psdm-pp-warn {
    margin-top: 5px; font-size: 11px; line-height: 1.35;
    color: var(--pp-danger, #d23b3b);
}
#psdm-props .psdm-pp-warn[hidden] { display: none; }

/* matched flip icons (H + V are the same monoline weight; V = H rotated 90°) */
#psdm-props .psdm-pp-flipic {
    width: 17px; height: 17px; display: block; margin: 0 auto;
    fill: none; stroke: currentColor; stroke-width: 1.8;
    stroke-linecap: round; stroke-linejoin: round;
}

/* filter toggle chips: auto-fill so they pack tight at any width */
#psdm-props .psdm-filters {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 4px; margin-bottom: 6px;
}
#psdm-props .psdm-filters .psdm-pp-btn {
    height: 28px; font-size: 10px; text-transform: capitalize;
    border: 1px solid var(--pp-border-soft); background: #fff; border-radius: var(--pp-r);
}
#psdm-props .psdm-filters .psdm-pp-btn.psdm-on { border-color: var(--pp-accent); color: var(--pp-accent); background: var(--pp-tint); }

/* mask preset chips: auto-fill 28px */
#psdm-props .psdm-mask-presets { grid-template-columns: repeat(auto-fill, minmax(32px, 1fr)); }

/* path color swatches: 1-up by default, 2-up when wide enough (container query below) */
#psdm-props .psdm-cpaths .psdm-pp-colorbtn { width: 100%; }

/* opacity readout sits beside the range on one row */
#psdm-props .psdm-g-oopacity .psdm-pp-row { display: flex; align-items: center; gap: 8px; }

/* ============================================================================
   COLLAPSIBLE ADVANCED GROUPS (chevron) — pairs with the group() collapsed flag
   ============================================================================ */
#psdm-props .psdm-pp-group.psdm-pp-collapsible {
    grid-template-columns: 1fr;        /* full-width header; body stacks below */
}
#psdm-props .psdm-pp-group.psdm-pp-collapsible > .psdm-pp-label {
    grid-column: 1;
    width: 100%;
    justify-content: flex-start;
    gap: 6px;
}
#psdm-props .psdm-pp-group.psdm-pp-collapsible > :not(.psdm-pp-label) { grid-column: 1; }
#psdm-props .psdm-pp-group.psdm-pp-collapsible > .psdm-pp-label::after {
    content: '';
    width: 8px; height: 8px;
    margin-left: auto;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform .12s var(--ax-ease-out, ease);
}
#psdm-props .psdm-pp-group.psdm-collapsed > :not(.psdm-pp-label) { display: none; }
#psdm-props .psdm-pp-group.psdm-collapsed > .psdm-pp-label::after { transform: rotate(-45deg); }

/* ============================================================================
   WIDTH-AWARE RE-FLOW (container queries — adapts to the resizable sidebar)
   ============================================================================ */

/* ≥400px — pair Size|Style and Rotate|Flip onto one row.
   NOTE: selectors are #psdm-props-prefixed so they match the specificity of the
   base label-inline-left rules (#psdm-props .psdm-pp-group …) and actually win. */
@container (min-width: 400px) {
    #psdm-props .psdm-sec-text,
    #psdm-props .psdm-sec-object { display: grid; grid-template-columns: minmax(116px, 2fr) 3fr; column-gap: 8px; }
    #psdm-props .psdm-sec-text > .psdm-pp-sectitle,
    #psdm-props .psdm-sec-object > .psdm-pp-sectitle { grid-column: 1 / -1; }
    #psdm-props .psdm-sec-text > .psdm-pp-group,
    #psdm-props .psdm-sec-object > .psdm-pp-group { grid-column: 1 / -1; }
    #psdm-props .psdm-sec-text > .psdm-g-tsize { grid-column: 1; }
    #psdm-props .psdm-sec-text > .psdm-g-tstyle { grid-column: 2; }
    #psdm-props .psdm-sec-object > .psdm-g-orotate { grid-column: 1; }
    #psdm-props .psdm-sec-object > .psdm-g-oflip { grid-column: 2; }
    /* paired groups flip to label-ABOVE-micro so the halves aren't cramped */
    #psdm-props .psdm-g-tsize,
    #psdm-props .psdm-g-tstyle,
    #psdm-props .psdm-g-orotate,
    #psdm-props .psdm-g-oflip { grid-template-columns: 1fr; }
    #psdm-props .psdm-g-tsize > .psdm-pp-label,
    #psdm-props .psdm-g-tstyle > .psdm-pp-label,
    #psdm-props .psdm-g-orotate > .psdm-pp-label,
    #psdm-props .psdm-g-oflip > .psdm-pp-label {
        height: auto; font-size: 10px; text-transform: uppercase; letter-spacing: .02em;
        color: var(--pp-muted); font-weight: 600;
    }
    #psdm-props .psdm-g-tsize > :not(.psdm-pp-label),
    #psdm-props .psdm-g-tstyle > :not(.psdm-pp-label),
    #psdm-props .psdm-g-orotate > :not(.psdm-pp-label),
    #psdm-props .psdm-g-oflip > :not(.psdm-pp-label) { grid-column: 1; }
    /* the paired steppers/segs should fill their half */
    #psdm-props .psdm-g-tsize .psdm-pp-stepper,
    #psdm-props .psdm-g-orotate .psdm-pp-stepper { width: 100%; }
}

/* ≥440px — X/Y/W/H 4-up, shadow 4-up, path colors 2-up */
@container (min-width: 440px) {
    #psdm-props .psdm-g-opos .psdm-pp-grid,
    #psdm-props .psdm-g-eshadow .psdm-pp-grid { grid-template-columns: repeat(4, 1fr); }
    #psdm-props .psdm-cpaths { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
}

/* ≥480px — anchors + align/distribute on one row of compact 28px chips */
@container (min-width: 480px) {
    #psdm-props .psdm-g-oalignc .psdm-pp-grid3 { grid-template-columns: repeat(9, 1fr); }
    #psdm-props .psdm-g-oalignc .psdm-pp-grid3 .psdm-pp-btn { height: 28px; }
    #psdm-props .psdm-g-galign .psdm-pp-grid3 { grid-template-columns: repeat(4, 1fr); }
    #psdm-props .psdm-g-galign .psdm-pp-grid3 .psdm-pp-btn { height: 28px; }
}

/* ≥520px — slightly wider label column for the roomy sidebar */
@container (min-width: 520px) { #psdm-props { --pp-label-w: 96px; } }

/* ============================================================================
   COLOR PICKER POPOVER (floating, appended to <body>)
   ============================================================================ */
#psdm-colorpicker {
    position: fixed; z-index: 99999; width: 256px;
    background: #fff; border: 1px solid var(--ax-gray-300, #d5d9e2); border-radius: 12px;
    box-shadow: var(--ax-shadow-pop, 0 12px 40px rgba(16, 24, 32, 0.22));
    padding: 12px; display: none;
    font: 13px/1.4 var(--ax-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
    color: var(--ax-gray-900, #1f2530);
}
#psdm-colorpicker.psdm-cp-show { display: block; }
#psdm-colorpicker .psdm-cp-sv {
    position: relative; width: 100%; height: 132px; border-radius: 8px;
    margin-bottom: 8px; cursor: crosshair; overflow: hidden;
}
#psdm-colorpicker .psdm-cp-sv-white,
#psdm-colorpicker .psdm-cp-sv-black { position: absolute; inset: 0; border-radius: 8px; }
#psdm-colorpicker .psdm-cp-sv-white { background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0)); }
#psdm-colorpicker .psdm-cp-sv-black { background: linear-gradient(to top, #000, rgba(0, 0, 0, 0)); }
#psdm-colorpicker .psdm-cp-sv-thumb {
    position: absolute; width: 14px; height: 14px; border-radius: 50%;
    border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .4);
    transform: translate(-50%, -50%); pointer-events: none;
}
#psdm-colorpicker .psdm-cp-hue {
    position: relative; width: 100%; height: 14px; border-radius: 7px; margin-bottom: 10px;
    cursor: ew-resize;
    background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
}
#psdm-colorpicker .psdm-cp-hue-thumb {
    position: absolute; top: 50%; width: 16px; height: 16px; border-radius: 50%;
    background: #fff; border: 1px solid rgba(0, 0, 0, .3); box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
    transform: translate(-50%, -50%); pointer-events: none;
}
#psdm-colorpicker .psdm-cp-fields { display: flex; gap: 6px; margin-bottom: 8px; }
#psdm-colorpicker .psdm-cp-hexwrap { flex: 1.2; }
#psdm-colorpicker .psdm-cp-rgb { flex: 2; display: flex; gap: 4px; }
#psdm-colorpicker .psdm-cp-cell { flex: 1; }
#psdm-colorpicker .psdm-cp-cell label,
#psdm-colorpicker .psdm-cp-hexwrap label {
    display: block; font-size: 10px; font-weight: 700; color: var(--ax-gray-500, #8b909e);
    text-align: center; margin-bottom: 2px;
}
#psdm-colorpicker input.psdm-cp-num {
    width: 100%; height: 28px; border: 1px solid var(--ax-gray-300, #d5d9e2); border-radius: 6px;
    text-align: center; font-size: 12px; font-variant-numeric: tabular-nums;
    box-sizing: border-box; color: var(--ax-gray-900, #1f2530);
}
#psdm-colorpicker .psdm-cp-cmyk {
    display: flex; gap: 5px; padding: 7px; background: var(--ax-gray-100, #f1f3f7);
    border-radius: 8px; margin-bottom: 10px;
}
#psdm-colorpicker .psdm-cp-cmyk .psdm-cp-c {
    flex: 1; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums;
}
#psdm-colorpicker .psdm-cp-cmyk .psdm-cp-c b { display: block; font-size: 10px; color: var(--ax-accent, #5258e4); margin-bottom: 2px; }
#psdm-colorpicker .psdm-cp-cmyk input.psdm-cp-num { height: 26px; background: #fff; font-weight: 700; }
#psdm-colorpicker .psdm-cp-cmyk input.psdm-cp-num:disabled { background: #e9edf1; color: var(--ax-gray-500, #8b909e); }
#psdm-colorpicker .psdm-cp-cmyktag {
    font-size: 10px; color: var(--ax-gray-500, #8b909e); text-align: center; margin: -6px 0 10px;
}
#psdm-colorpicker .psdm-cp-cmyktag.psdm-exact { color: #1a7f3c; font-weight: 600; }
#psdm-colorpicker .psdm-cp-swatches { display: grid; grid-template-columns: repeat(8, 1fr); gap: 5px; }
#psdm-colorpicker .psdm-cp-sw {
    width: 100%; padding-bottom: 100%; border-radius: 5px; border: 1px solid rgba(0, 0, 0, .12);
    cursor: pointer; position: relative;
}
#psdm-colorpicker .psdm-cp-sw:hover { transform: scale(1.12); }
#psdm-colorpicker .psdm-cp-swlabel {
    grid-column: 1 / -1; font-size: 10px; font-weight: 700; color: var(--ax-gray-500, #8b909e);
    text-transform: uppercase; margin-top: 4px;
}