/* ==========================================================================
   Template Editor panels (skia-editor-v3; frozen v3 screen 1 — approved-designs-v3/Main.dc.html)
   The Add Elements panel: elements above, layers below (MP-05, "Direction 3").
   Shared classes (.panel-header, .panel-title, .section-header, .tab-content) are styled only inside the
   Add Elements panel here, so the other screens that use them do not change.
   ========================================================================== */

/* ---- Title row, search, category buttons ---- */
.editor-left-panel .panel-header {
    padding: var(--space-md) var(--space-md) var(--space-sm);
    gap: var(--space-sm);
    border-bottom: none;
}

.editor-left-panel .panel-title {
    font-size: calc(var(--font-base) * 0.9375); /* 15 px, frozen v3 */
    font-weight: var(--font-semibold);
    text-transform: none;
    letter-spacing: normal;
    opacity: 1;
}

.hide-disabled-toggle {
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.hide-disabled-toggle:hover {
    background: var(--color-glass-light);
    color: var(--color-text-primary);
}

.element-search-wrapper {
    position: relative;
    width: 100%;
}

.element-search-label {
    position: absolute;
    left: -9999px;
}

.element-search-input {
    width: 100%;
    height: 32px;
    box-sizing: border-box;
    padding: 0 var(--space-xl) 0 var(--space-sm);
    background: var(--color-glass-light);
    border: 1px solid var(--color-border-medium);
    border-radius: var(--radius-lg);
    color: var(--color-text-primary);
    font-size: var(--font-sm);
}

.element-search-input::placeholder {
    color: var(--color-text-tertiary);
}

.element-search-input:focus {
    outline: none;
    border-color: var(--color-primary);
}

.element-search-icon {
    position: absolute;
    right: var(--space-sm);
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-tertiary);
    pointer-events: none;
}

.element-search-empty {
    padding: var(--space-2xl) var(--space-sm);
    text-align: center;
    color: var(--color-text-tertiary);
    font-size: var(--font-sm);
    font-style: italic;
}

.element-pills {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--space-xs) * 1.5); /* 6 px, frozen v3 */
}

.element-pill {
    height: 28px;
    padding: 0 calc(var(--space-sm) * 1.5); /* 12 px, frozen v3 */
    border-radius: var(--radius-3xl);
    border: 1px solid var(--color-border-light);
    background: var(--color-glass-light);
    color: var(--color-text-primary);
    font-size: var(--font-xs);
    font-weight: var(--font-semibold);
    cursor: pointer;
    white-space: nowrap;
}

.element-pill:hover {
    border-color: var(--color-border-medium);
}

.element-pill.active {
    background: var(--color-primary-light);
    border-color: var(--color-primary);
}

/* ---- The elements, three across, scrolling on their own ---- */
.element-pills-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    border-top: 1px solid var(--color-border-light);
    scrollbar-width: thin;
    scrollbar-color: var(--color-border-medium) transparent;
}

.editor-left-panel .tab-content {
    padding: var(--space-xs) var(--space-md) var(--space-sm);
}

.editor-left-panel .section-header {
    padding: var(--space-sm) 0 var(--space-xs);
    margin-bottom: var(--space-xs);
    border-bottom: none;
    text-transform: none;
    letter-spacing: normal;
    font-size: var(--font-xs);
    font-weight: var(--font-semibold);
    color: var(--color-text-secondary);
    opacity: 1;
}

.elements-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-xs);
    margin-bottom: var(--space-sm);
}

.element-card {
    height: 66px;
    font: inherit; /* a button: the panel's own type and colour */
    color: var(--color-text-primary);
    min-width: 0;
    box-sizing: border-box;
    padding: 0 var(--space-xs);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border-light);
    background: var(--color-glass-light);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    cursor: grab;
}

.element-card span:first-child {
    font-size: var(--font-lg);
    line-height: 1;
}

.element-card span:last-child {
    max-width: 100%;
    font-size: var(--font-xs);
    font-weight: var(--font-medium);
    line-height: 1.15;
    text-align: center;
    color: var(--color-text-secondary);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.element-card:hover {
    border-color: var(--color-primary);
}

.element-card:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.element-card.primary {
    background: rgba(102, 126, 234, var(--opacity-light)); /* the primary colour at 0.1, frozen v3 */
    border-color: var(--color-primary);
}

/* Not in the template's theme: greyed; the hover label says why (clicking is refused in the palette) */
.element-card.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.element-card.disabled span:last-child {
    color: var(--color-text-tertiary);
}

/* ---- The handle and the Layers area (the layers list is MP-06) ---- */
.layers-resize-handle {
    height: 12px;
    flex-shrink: 0;
    padding: 0;
    border: none;
    border-top: 1px solid var(--color-border-light);
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: row-resize;
}

.layers-resize-handle:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}

.layers-resize-grip {
    width: 32px;
    height: 4px;
    border-radius: var(--radius-sm);
    background: var(--color-border-strong);
}

.layers-panel {
    flex-shrink: 0;
    min-height: 0;
    overflow-y: auto;
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border-medium) transparent;
}

/* ---- Footer: Cancel reads white on the dark panel, as frozen v3 shows (the shared .btn-secondary is dark text) ---- */
.editor-left-panel .panel-footer .btn-secondary {
    color: var(--color-text-primary);
    border: 1px solid var(--color-border-medium);
}

/* ---- The Layers list (MP-06; frozen v3 screen 1) ---- */
.layers-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    padding-top: calc(var(--space-xs) * 1.5); /* 6 px */
}

.layers-title {
    padding: 0 var(--space-md) calc(var(--space-xs) * 1.5);
    font-size: calc(var(--font-sm) * 0.9286); /* 13 px */
    font-weight: var(--font-semibold);
    color: var(--color-text-primary);
}

.layers-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0 var(--space-sm) var(--space-sm);
    display: flex;
    flex-direction: column;
    gap: calc(var(--space-xs) / 2); /* 2 px, frozen v3 */
    scrollbar-width: thin;
    scrollbar-color: var(--color-border-medium) transparent;
}

.layer-row {
    height: 30px;
    flex-shrink: 0;
    box-sizing: border-box;
    padding: 0 calc(var(--space-xs) * 1.5) 0 var(--space-sm);
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    color: var(--color-text-primary);
    cursor: grab;
}

.layer-row.depth-1 {
    padding-left: calc(var(--space-sm) + var(--space-md)); /* indented under its group */
}

.layer-row:hover {
    background: var(--color-glass-subtle);
}

.layer-row:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}

.layer-row.selected {
    background: var(--color-primary-light);
    border-color: var(--color-primary);
}

.layer-row.drop-here {
    box-shadow: inset 0 calc(var(--space-xs) / 2) 0 var(--color-primary); /* 2 px drop line, frozen v3 */
}

.layer-row.dragging {
    opacity: 0.5;
}

.layer-thumb {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    box-sizing: border-box;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border-medium);
    background: var(--color-glass-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(var(--font-xs) * 0.6667); /* 8 px */
    font-weight: var(--font-bold);
    color: var(--color-text-primary);
}

.layer-thumb-logo {
    background: var(--color-white);
    color: var(--color-primary);
}

.layer-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: var(--font-xs);
    font-weight: var(--font-medium);
}

.layer-group .layer-name {
    font-weight: var(--font-semibold);
}

.layer-row.is-hidden .layer-name,
.layer-row.is-hidden .layer-eye {
    color: var(--color-text-tertiary);
}

.layer-row.is-hidden .layer-thumb {
    opacity: 0.4;
}

.layer-eye,
.layer-chevron {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    padding: 0;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.layer-chevron {
    width: 14px;
    transform: rotate(-90deg);
}

.layer-chevron.open {
    transform: none;
}

.layer-background {
    margin-top: calc(var(--space-xs) / 2); /* 2 px, frozen v3 */
    border: 1px dashed var(--color-border-medium);
    color: var(--color-text-secondary);
    cursor: default;
}

.layer-lock {
    display: flex;
    color: var(--color-text-secondary);
}

.layer-rename {
    flex: 1;
    min-width: 0;
    height: 22px;
    padding: 0 var(--space-xs);
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-primary);
    background: var(--color-glass-light);
    color: var(--color-text-primary);
    font-size: var(--font-xs);
}

.layer-menu {
    position: absolute;
    z-index: 20;
    min-width: 160px;
    padding: var(--space-xs);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-medium);
    background: var(--color-bg-tertiary);
    box-shadow: 0 var(--space-xs) var(--space-md) var(--color-overlay-medium);
    display: flex;
    flex-direction: column;
}

.layer-menu button {
    height: 28px;
    padding: 0 var(--space-sm);
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text-primary);
    font-size: var(--font-xs);
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

.layer-menu button:hover:not([disabled]),
.layer-menu button:focus-visible {
    background: var(--color-primary-light);
}

.layer-menu button[disabled] {
    color: var(--color-text-tertiary);
    cursor: default;
}

.layer-menu button span {
    color: var(--color-text-tertiary);
}

/* A layer hidden with its eye: kept on the picture's page, not shown (MP-06, accepted approach N2) */
.canvas-element.layer-hidden {
    visibility: hidden;
}

/* ===== Properties column — sections, element card, labels beside fields (skia-editor-v3 MP-07; frozen v3) ===== */

.prop-section {
    border-top: 1px solid var(--color-border-light);
}

.prop-section-toggle {
    width: 100%;
    height: 36px;
    padding: 0 var(--space-md);
    border: 0;
    background: transparent;
    color: var(--color-text-primary);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--font-sm);
    font-weight: var(--font-semibold);
    text-align: left;
    cursor: pointer;
}

.prop-section-toggle:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}

.prop-chevron {
    display: flex;
    color: var(--color-text-secondary);
    transform: rotate(-90deg);
    transition: transform 0.15s ease;
}

.prop-section.is-open .prop-chevron {
    transform: rotate(0deg);
}

.prop-section-title {
    flex-grow: 1;
}

.prop-section-summary {
    max-width: 130px;
    font-size: var(--font-xs);
    font-weight: var(--font-normal);
    color: var(--color-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.prop-section-body {
    padding: calc(var(--space-xs) / 2) var(--space-md) var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.prop-row {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    align-items: center;
    gap: var(--space-sm);
}

.prop-row-value {
    grid-template-columns: 84px minmax(0, 1fr) 44px;
}

.prop-label {
    font-size: var(--font-xs);
    color: var(--color-text-secondary);
}

.prop-section .property-control {
    height: 30px;
    margin: 0;
    padding: 0 var(--space-sm);
    border-radius: var(--radius-md);
    background: var(--color-glass-light);
    border: 1px solid var(--color-border-medium);
    color: var(--color-text-primary);
    font-size: var(--font-xs);
}

.prop-section .slider {
    width: 100%;
}

.prop-section .slider-value {
    font-size: var(--font-xs);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.prop-colour-controls {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.prop-colour-slot:empty {
    display: none;
}

.prop-section .color-picker {
    width: 36px;
    height: 26px;
    margin: 0;
    padding: 0;
    border-radius: var(--radius-sm);
}

.shadow-swatch {
    width: 20px;
    height: 20px;
    padding: 0;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border-medium);
    cursor: pointer;
}

.shadow-swatch:disabled {
    display: none;
}

.align-buttons,
.prop-picture-buttons {
    display: flex;
    gap: var(--space-xs);
}

.prop-seg-btn {
    flex: 1;
    height: 30px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-medium);
    background: var(--color-glass-light);
    color: var(--color-text-primary);
    font-size: var(--font-xs);
    cursor: pointer;
}

.prop-note {
    font-size: var(--font-xs);
    color: var(--color-text-secondary);
}

.sel-card {
    margin: var(--space-sm) var(--space-md);
    padding: var(--space-sm);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-primary);
    background: var(--color-primary-light);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.sel-thumb {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    box-sizing: border-box;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-medium);
    background: var(--color-glass-light);
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-xs);
    font-weight: var(--font-bold);
}

.sel-thumb-logo {
    background: var(--color-white);
    color: var(--color-dark-900);
}

.sel-text {
    flex-grow: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.sel-name {
    font-size: var(--font-sm);
    font-weight: var(--font-semibold);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sel-type {
    font-size: var(--font-xs);
    color: var(--color-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sel-deselect {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.sel-hint {
    margin: var(--space-sm) var(--space-md);
    font-size: var(--font-xs);
    color: var(--color-text-secondary);
}

/* ---- /check 2026-10-02: where the column differed from frozen v3 ---- */
/* Title "Properties": 15 px, as the Add Elements title (frozen v3) */
.editor-right-panel .panel-title {
    font-size: calc(var(--font-base) * 0.9375); /* 15 px, frozen v3 */
    font-weight: var(--font-semibold);
    text-transform: none;
    letter-spacing: normal;
    opacity: 1;
}

/* "Name, Brand, & Theme" stays on one line; a long summary is shortened instead */
.prop-section-title {
    white-space: nowrap;
    flex-shrink: 0;
}

.prop-section-summary {
    min-width: 0;
    margin-left: auto;
}

/* Background: the eight gradients in one row of small swatches */
.prop-section .gradient-presets {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: var(--space-xs);
}

.prop-section .gradient-preset {
    aspect-ratio: auto;
    height: 24px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border-medium);
}

.prop-section .gradient-preset:hover {
    transform: none;
}

.prop-section .gradient-preset.active {
    border: 2px solid var(--color-text-primary);
    box-shadow: none;
}

/* Align: Left / Centre / Right written on the buttons */
.prop-section .align-btn {
    flex: 1;
    min-width: 0;
    width: auto;
    height: 28px;
    padding: 0 var(--space-xs);
    border-radius: var(--radius-sm);
    color: var(--color-text-primary);
    font-size: var(--font-xs);
    font-weight: var(--font-semibold);
    white-space: nowrap;
}

.prop-section .align-buttons {
    flex: 1;
}

/* The colour's value beside the picker */
.prop-colour-value {
    font-size: var(--font-xs);
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}

/* Text: its label above a full-width box (frozen v3 TextShadow) */
.prop-row-stacked {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

/* Picture: the source in use (frozen v3 ImageElement) */
.prop-seg-btn.active {
    background: var(--color-primary-light); /* the primary at 0.2, frozen v3 */
    border-color: var(--color-primary);
}

#pictureCredit {
    margin-top: var(--space-xs);
}