/* pd_img_layers.css
 *
 * Layers section inside the Image settings panel. Dedicated namespace
 * `pd-img-lyr-*` — DOM, classes, JS never shared. Visual contract
 * matches sibling sections (margin: 0 -14px to span the panel body).
 *
 * Two visual scopes here:
 *   1. PANEL UI  — the right-rail layer list, Add Layer popup,
 *      per-layer settings card. All `pd-img-lyr-pnl-*`.
 *   2. CANVAS/LIVE OVERLAYS — the wrap `<span>` plus `.pd-img-lyr-ovr-*`
 *      children that render the actual layers over the image in the
 *      canvas iframe AND on the published page. These are CSS that
 *      ships with the saved HTML.
 *
 * Specificity (0,0,1,0); no !important.
 */

/* ════════════════════════════════════════════════════════════════════
   PART 1 · PANEL UI
   ════════════════════════════════════════════════════════════════════ */

.pd-img-lyr-section {
    border-top: 1px solid var(--at-color-border);
    margin: 0 -14px;
}
.pd-img-lyr-section-header {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 16px;
    cursor: pointer;
    user-select: none;
    transition: background 0.12s;
}
.pd-img-lyr-section-header:hover {
    background: var(--at-color-muted);
}
.pd-img-lyr-section-icon {
    color: var(--at-color-primary);
    font-size: 14px;
    width: 16px;
    text-align: center;
}
.pd-img-lyr-section-title {
    flex: 1;
    color: var(--at-color-card-foreground);
    font-weight: 600;
    font-size: 13px;
    line-height: 1;
}
.pd-img-lyr-section-arrow {
    color: var(--at-color-muted-foreground);
    font-size: 11px;
    transition: transform 0.2s ease;
}
.pd-img-lyr-section-open .pd-img-lyr-section-arrow {
    transform: rotate(180deg);
}
.pd-img-lyr-section-body {
    display: none;
    padding: 4px 16px 14px;
    flex-direction: column;
    gap: 11px;
}
.pd-img-lyr-section-open .pd-img-lyr-section-body {
    display: flex;
}

/* ── "Clip layer to image" row (top of section body) ──────────────── */
.pd-img-lyr-clip-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    background: var(--at-color-card);
    border: 1px solid var(--at-color-border);
    border-radius: 6px;
    cursor: pointer;
    user-select: none;
}
.pd-img-lyr-clip-row:hover {
    border-color: var(--at-color-primary);
}
.pd-img-lyr-clip-check {
    width: 16px;
    height: 16px;
    margin: 0;
    cursor: pointer;
    flex: 0 0 auto;
}
.pd-img-lyr-clip-label {
    flex: 1;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--at-color-card-foreground);
    cursor: pointer;
}

/* ── Empty state when no layers exist ─────────────────────────────── */
.pd-img-lyr-empty {
    padding: 14px;
    background: var(--at-color-input);
    border: 1px dashed var(--at-color-border);
    border-radius: 7px;
    color: var(--at-color-muted-foreground);
    font-size: 11.5px;
    text-align: center;
    line-height: 1.5;
}

/* ── Layer list ───────────────────────────────────────────────────── */
.pd-img-lyr-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.pd-img-lyr-item {
    display: grid;
    grid-template-columns: 18px 1fr 22px 22px 22px;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    background: var(--at-color-card);
    border: 1px solid var(--at-color-border);
    border-radius: 6px;
    cursor: pointer;
    transition: border-color 0.12s;
}
.pd-img-lyr-item:hover {
    border-color: var(--at-color-primary);
}
.pd-img-lyr-item-selected {
    border-color: var(--at-color-primary);
    background: color-mix(in srgb, var(--at-color-primary) 8%, var(--at-color-card));
}
.pd-img-lyr-item-icon {
    color: var(--at-color-primary);
    font-size: 13px;
    text-align: center;
}
.pd-img-lyr-item-name {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--at-color-card-foreground);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pd-img-lyr-item-btn {
    width: 22px;
    height: 22px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--at-color-border);
    border-radius: 4px;
    color: var(--at-color-muted-foreground);
    cursor: pointer;
    font-size: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.pd-img-lyr-item-btn:hover {
    color: var(--at-color-primary);
    border-color: var(--at-color-primary);
}
.pd-img-lyr-item-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ── Add Layer button + popover ───────────────────────────────────── */
.pd-img-lyr-add-btn {
    width: 100%;
    padding: 10px;
    background: var(--at-color-primary);
    color: var(--at-color-primary-foreground);
    border: 1px solid var(--at-color-primary);
    border-radius: 6px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s;
}
.pd-img-lyr-add-btn:hover {
    background: color-mix(in srgb, var(--at-color-primary) 88%, var(--at-color-foreground));
}
.pd-img-lyr-add-btn i {
    margin-right: 6px;
}
.pd-img-lyr-typepicker {
    display: none;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding: 10px;
    background: var(--at-color-input);
    border: 1px solid var(--at-color-border);
    border-radius: 7px;
}
.pd-img-lyr-typepicker.open {
    display: grid;
}
.pd-img-lyr-typebtn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 6px;
    background: var(--at-color-card);
    border: 1px solid var(--at-color-border);
    border-radius: 5px;
    color: var(--at-color-card-foreground);
    cursor: pointer;
    transition: all 0.12s;
}
.pd-img-lyr-typebtn:hover {
    border-color: var(--at-color-primary);
    color: var(--at-color-primary);
}
.pd-img-lyr-typebtn i {
    font-size: 18px;
    color: var(--at-color-primary);
}
.pd-img-lyr-typebtn span {
    font-size: 11px;
    font-weight: 600;
}

/* ── Per-layer settings card ──────────────────────────────────────── */
.pd-img-lyr-settings {
    background: var(--at-color-input);
    border: 1px solid var(--at-color-border);
    border-radius: 7px;
    padding: 10px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.pd-img-lyr-settings-header {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--at-color-muted-foreground);
}
.pd-img-lyr-row {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.pd-img-lyr-row-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--at-color-card-foreground);
}
.pd-img-lyr-row-controls {
    display: grid;
    grid-template-columns: 1fr 50px 22px;
    align-items: center;
    gap: 8px;
}
.pd-img-lyr-row-slider {
    width: 100%;
    accent-color: var(--at-color-primary);
    cursor: pointer;
    margin: 0;
}
.pd-img-lyr-row-num {
    width: 100%;
    box-sizing: border-box;
    background: var(--at-color-card);
    color: var(--at-color-card-foreground);
    border: 1px solid var(--at-color-border);
    border-radius: 4px;
    padding: 5px 6px;
    font-size: 11px;
    font-family: inherit;
    text-align: center;
    outline: none;
    -moz-appearance: textfield;
}
.pd-img-lyr-row-num::-webkit-outer-spin-button,
.pd-img-lyr-row-num::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.pd-img-lyr-row-num:focus {
    border-color: var(--at-color-primary);
}
.pd-img-lyr-row-unit {
    font-size: 11px;
    color: var(--at-color-muted-foreground);
}
.pd-img-lyr-row-text,
.pd-img-lyr-row-select {
    width: 100%;
    box-sizing: border-box;
    background: var(--at-color-card);
    color: var(--at-color-card-foreground);
    border: 1px solid var(--at-color-border);
    border-radius: 4px;
    padding: 6px 8px;
    font-size: 12px;
    font-family: inherit;
    outline: none;
}
.pd-img-lyr-row-text:focus,
.pd-img-lyr-row-select:focus {
    border-color: var(--at-color-primary);
}
.pd-img-lyr-row-textarea {
    width: 100%;
    box-sizing: border-box;
    background: var(--at-color-card);
    color: var(--at-color-card-foreground);
    border: 1px solid var(--at-color-border);
    border-radius: 4px;
    padding: 6px 8px;
    font-size: 12px;
    font-family: inherit;
    min-height: 56px;
    resize: vertical;
    outline: none;
}
.pd-img-lyr-row-textarea:focus {
    border-color: var(--at-color-primary);
}
.pd-img-lyr-color-row {
    display: grid;
    grid-template-columns: 1fr 70px;
    align-items: center;
    gap: 8px;
}
.pd-img-lyr-row-color {
    width: 100%;
    height: 30px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--at-color-border);
    border-radius: 4px;
    background: var(--at-color-card);
    cursor: pointer;
    box-sizing: border-box;
}
.pd-img-lyr-row-color::-webkit-color-swatch-wrapper { padding: 2px; }
.pd-img-lyr-row-color::-webkit-color-swatch { border: 1px solid var(--at-color-border); border-radius: 2px; }
.pd-img-lyr-row-color::-moz-color-swatch { border: 1px solid var(--at-color-border); border-radius: 2px; }
.pd-img-lyr-row-hex {
    width: 100%;
    box-sizing: border-box;
    background: var(--at-color-card);
    color: var(--at-color-card-foreground);
    border: 1px solid var(--at-color-border);
    border-radius: 4px;
    padding: 5px 6px;
    font-size: 11px;
    font-family: ui-monospace, Menlo, Consolas, monospace;
    text-align: center;
    outline: none;
    text-transform: uppercase;
}
.pd-img-lyr-row-hex:focus { border-color: var(--at-color-primary); }
.pd-img-lyr-shape-grid,
.pd-img-lyr-icon-grid,
.pd-img-lyr-draw-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
}
.pd-img-lyr-shape-btn,
.pd-img-lyr-icon-btn,
.pd-img-lyr-draw-btn {
    aspect-ratio: 1;
    background: var(--at-color-card);
    border: 1px solid var(--at-color-border);
    border-radius: 5px;
    cursor: pointer;
    color: var(--at-color-card-foreground);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
}
.pd-img-lyr-shape-btn:hover,
.pd-img-lyr-icon-btn:hover,
.pd-img-lyr-draw-btn:hover {
    border-color: var(--at-color-primary);
    color: var(--at-color-primary);
}
.pd-img-lyr-shape-btn-active,
.pd-img-lyr-icon-btn-active,
.pd-img-lyr-draw-btn-active {
    border-color: var(--at-color-primary);
    background: color-mix(in srgb, var(--at-color-primary) 10%, var(--at-color-card));
    color: var(--at-color-primary);
}
.pd-img-lyr-shape-btn svg,
.pd-img-lyr-icon-btn svg,
.pd-img-lyr-draw-btn svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
    stroke: currentColor;
}

/* ── SFX section divider + rows (inside the per-layer settings card) ── */
.pd-img-lyr-sfx-divider {
    height: 1px;
    background: var(--at-color-border);
    margin: 6px -12px 4px;
}
.pd-img-lyr-sfx-row {
    border-top: 1px solid var(--at-color-border);
    padding: 8px 0 4px;
}
.pd-img-lyr-sfx-row:first-of-type {
    border-top: none;
    padding-top: 4px;
}
.pd-img-lyr-sfx-head {
    display: flex;
    align-items: center;
    gap: 8px;
    user-select: none;
    cursor: pointer;
    padding: 2px 0;
    margin: 0;
}
.pd-img-lyr-sfx-check {
    width: 16px;
    height: 16px;
    margin: 0;
    flex: 0 0 auto;
    cursor: pointer;
}
.pd-img-lyr-sfx-name {
    flex: 1;
    font-size: 12px;
    font-weight: 600;
    color: var(--at-color-card-foreground);
    line-height: 1;
}
.pd-img-lyr-sfx-body {
    margin-top: 6px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* ════════════════════════════════════════════════════════════════════
   PART 2 · CANVAS / LIVE-PAGE OVERLAYS
   ════════════════════════════════════════════════════════════════════ */

/* Wrapper placed around the <img> when one or more layers exist.
 * `overflow: hidden` clips overlays to the image area — the global
 * "Clip layers to image" checkbox at the top of the Layers section
 * is on by default. Untick it (which stamps data-pd-img-lyr-noclip="1"
 * on the wrap) to let layers extend past the image edge. Per-layer
 * clip toggling is on the roadmap; for now the toggle is panel-wide. */
.pd-img-lyr-wrap {
    /* display: block (not inline-block) so the wrap takes its parent's
     * full width — same flow behaviour the bare <img> had before being
     * wrapped. With inline-block the wrap was shrink-wrapping to the
     * img's natural size, which made the canvas image visibly narrower
     * the moment the first layer was added. */
    display: block;
    position: relative;
    line-height: 0;
    max-width: 100%;
    overflow: hidden;
}
.pd-img-lyr-wrap[data-pd-img-lyr-noclip="1"] {
    overflow: visible;
}
.pd-img-lyr-wrap > img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Centre the overlay on its X/Y point instead of its top-left corner.
 * User intuition is "50% / 50% = perfectly centred"; without this
 * transform the top-left corner sat at the centre point and the layer
 * visibly skewed down-right. */
.pd-img-lyr-ovr {
    position: absolute;
    box-sizing: border-box;
    pointer-events: auto;
    transform: translate(-50%, -50%);
}
/* Text overlay */
.pd-img-lyr-ovr-text {
    line-height: 1.2;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    font-family: inherit;
    word-wrap: break-word;
    /* Centre glyphs inside the text box. Without this, the box itself
     * sits at X/Y but the text flows from the box's left edge, which
     * read as visually off-centre even when the box was at 50/50. */
    text-align: center;
}
/* SVG-based overlays (shape, icon, draw) */
.pd-img-lyr-ovr-shape,
.pd-img-lyr-ovr-icon,
.pd-img-lyr-ovr-draw {
    overflow: visible;
}