/*
windows.css - Draggable window system and website development page UI playground

This file contains:
1. Generic window shell components (.window, .window-header, etc.)
2. UI Micro-Interaction Playground (website dev page demo)
3. Toy panel controls, animations, and interactive elements

This file is loaded only on the website development page.
For modular page blocks, see blocks.css.
*/

/* =========================================================
   WINDOW SHELL (Generic draggable window components)
   ========================================================= */

/* Window shell */
.window {
    position: absolute;
    will-change: transform;
    pointer-events: auto;
}

.window-inner {
    background: var(--color-bg);
    border: 1px solid var(--color-card-border);
}

/* Active window emphasis */
.window.is-active .window-inner {
    box-shadow: 3px 6px 48px var(--color-bg);
}

/* Header (drag handle) */
.window-header,
.window-header * {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.window-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-bottom: 1px solid var(--color-card-border);
    background: var(--color-bg);
    font-size: 10px;
    font-weight: 200;
    letter-spacing: 0.12em;
    cursor: grab;
}

.window.is-dragging .window-header {
    cursor: grabbing;
}

.window-title {
    margin: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--color-text-muted);
    text-transform: uppercase;
}

/* Window body */
.window-body {
    background: var(--color-bg);
}

/* Window resize handle */
.window-resize-handle {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 16px;
    height: 16px;
    cursor: nwse-resize;
    background: linear-gradient(135deg, transparent 50%, var(--color-text-muted) 50%);   /* lint-ok — a hard 50/50 stop draws a TRIANGLE; this is geometry, not a gradient fill */
    opacity: 0.4;
}

.window-resize-handle:hover {
    opacity: 0.8;
}

.window.is-resizing {
    user-select: none;
}

/* =========================================================
   UI MICRO-INTERACTION PLAYGROUND (Website Dev page block)
   ========================================================= */

.ss-ui-playground {
    margin-block: 3.5rem;
}

.ss-ui-playground__grid {
    display: grid;
    gap: 1.75rem;
    align-items: start;
}

@media (min-width: 980px) {
    .ss-ui-playground__grid {
        grid-template-columns: 1fr 1fr;
        gap: 2.25rem;
        align-items: center;
    }
}

.ss-ui-playground__copy {
    padding-inline: clamp(1rem, 1.8vw, 1.5rem);
}

.ss-ui-playground__title {
    font-size: var(--fs-h2);
    line-height: var(--lh-tight);
    margin-bottom: 0.6rem;
}

.ss-ui-playground__lead {
    color: var(--color-text-muted);
    line-height: var(--lh-relaxed);
    margin-bottom: 1rem;
}

/* Demo card */
.ss-ui-playground__demo {
    padding: 0;
    overflow: hidden;
    border-radius: var(--r);
    backdrop-filter: blur(18px);
}

/* Top bar */
.ss-ui-playground__topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;

    padding: 1rem 1.15rem;
    border-bottom: 1px solid var(--color-card-border);
    background: color-mix(in srgb, var(--color-surface-alt) 55%, transparent);
}

.ss-ui-playground__brand {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
}

.ss-ui-playground__dot {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: var(--r-full);
    background: var(--green-gradient);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--lightgreen) 22%, transparent);
}

.ss-ui-playground__label {
    font-size: var(--fs-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text);
}

/* Panel */
.ss-ui-playground__panel {
    padding: 1.25rem 1.15rem 1.35rem;
    background: color-mix(in srgb, var(--color-card-bg) 92%, transparent);
}

/* Switch (reusable) */
.ss-ui-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    user-select: none;
}

.ss-ui-switch__text {
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
}

.ss-ui-switch__input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.ss-ui-switch__track {
    width: 2.6rem;
    height: 1.55rem;
    border-radius: var(--r-full);
    border: 1px solid var(--color-border-subtle);
    background: color-mix(in srgb, var(--color-surface) 80%, transparent);
    position: relative;

    transition: transform var(--t), background var(--t-fast), border-color var(--t-fast);
}

.ss-ui-switch__thumb {
    width: 1.15rem;
    height: 1.15rem;
    border-radius: var(--r-full);
    position: absolute;
    top: 50%;
    left: 0.2rem;
    transform: translateY(-50%);
    background: color-mix(in srgb, var(--color-surface) 100%, var(--color-link));
    box-shadow: 0 10px 18px rgba(0,0,0,0.18);
    transition: transform var(--t), background var(--t-fast);
}

.ss-ui-switch__input:focus-visible + .ss-ui-switch__track {
    outline: 2px solid color-mix(in srgb, var(--green) 70%, transparent);
    outline-offset: 3px;
}

.ss-ui-switch__input:checked + .ss-ui-switch__track {
    background: color-mix(in srgb, var(--lightgreen) 35%, transparent);
    border-color: color-mix(in srgb, var(--green) 60%, transparent);
}

.ss-ui-switch__input:checked + .ss-ui-switch__track .ss-ui-switch__thumb {
    transform: translateY(-50%) translateX(1.05rem);
    background: color-mix(in srgb, var(--color-surface) 80%, var(--color-link));
}

.ss-ui-switch--compact .ss-ui-switch__text {
    color: var(--color-text);
}

@keyframes ss-ui-spin {
    to { transform: translateY(1px) rotate(360deg); }
}

/* Motion kill-switch (component-scoped) */
.ss-ui-playground__demo.is-motion-off *,
.ss-ui-playground__demo.is-motion-off *::before,
.ss-ui-playground__demo.is-motion-off *::after {
    transition-duration: 0.001ms !important;   /* lint-ok — the reduced-motion clamp, this rule's own sanctioned exception */
    animation-duration: 0.001ms !important;   /* lint-ok — the reduced-motion clamp, this rule's own sanctioned exception */
    animation-iteration-count: 1 !important;   /* lint-ok — the reduced-motion clamp, this rule's own sanctioned exception */
    scroll-behavior: auto !important;   /* lint-ok — the reduced-motion clamp, this rule's own sanctioned exception */
}

/* Draggable window easter egg */
.window.ss-ui-playground__demo {
    position: relative;
    transition: backdrop-filter var(--t-fast), background-color var(--t-fast);
}

/* Blur effect when dragging */
.window.ss-ui-playground__demo.is-dragging {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.window.ss-ui-playground__demo.is-dragging .c-card {
    background-color: color-mix(in srgb, var(--color-card-bg) 10%, transparent) !important;   /* lint-ok — the reduced-motion clamp, this rule's own sanctioned exception */
}

.window.ss-ui-playground__demo .window-header {
    /* Reset window-header defaults to preserve playground topbar appearance */
    padding: 1rem 1.15rem;
    border-bottom: none;
    background: transparent;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    text-transform: none;
}

/* Draggable topbar with green hover accent */
.window.ss-ui-playground__demo .ss-ui-playground__topbar {
    cursor: grab;
    transition: background-color var(--t-fast);
}

.window.ss-ui-playground__demo .ss-ui-playground__topbar:hover {
    background-color: color-mix(in srgb, var(--lightgreen) 12%, var(--color-surface-alt) 55%);
}

.window.ss-ui-playground__demo.is-dragging .ss-ui-playground__topbar {
    cursor: grabbing;
    background-color: color-mix(in srgb, var(--lightgreen) 20%, var(--color-surface-alt) 55%);
}

/* =========================================================
   UI PLAYGROUND TOY PANEL (panel contents only)
   ========================================================= */

.ss-ui-playground__panel[data-toy] {
    display: grid;
    gap: 1rem;
}

/* Stage */
.ss-ui-stage {
    position: relative;
    height: 160px;
    border-radius: var(--r);
    border: 1px solid var(--color-border-subtle);
    overflow: hidden;
    background: radial-gradient(1200px 260px at 30% 0%, color-mix(in srgb, var(--lightgreen) 10%, transparent), transparent 60%), radial-gradient(900px 300px at 80% 20%, color-mix(in srgb, var(--color-link) 10%, transparent), transparent 62%), color-mix(in srgb, var(--color-surface-alt) 70%, transparent); /* lint-ok: two ambient glows that fade to transparent — keepers by the rule's own test */
}

/* The Shape (base) */
.ss-ui-square {
    --square-size: 80px;
    --roundness: 12px;
    --glow-intensity: 0;
    --color-1: var(--lightgreen);
    --color-2: var(--green);
    --shape-rotation: 0deg;
    --aspect-width: 1;
    --aspect-height: 1;

    position: absolute;
    left: 50%;
    top: 50%;
    width: calc(var(--square-size) * var(--aspect-width));
    height: calc(var(--square-size) * var(--aspect-height));
    transform: translate(-50%, -50%) rotate(var(--shape-rotation));
    background: var(--color-1);
    border-radius: var(--roundness);   /* lint-ok — driven by the widget's ROUNDNESS slider; this radius is the thing being demonstrated */
    box-shadow: 0 0 calc(var(--glow-intensity) * 1px) calc(var(--glow-intensity) * 0.5px) color-mix(in srgb, var(--color-1) 60%, transparent);
    cursor: pointer;
    transition: border-radius 0.2s ease, box-shadow 0.2s ease, width 0.2s ease, height 0.2s ease;   /* lint-ok — the square's motion is parameterised by the widget's springy/bounce/roundness sliders; it IS the demo */
}

/* Shape: Wide - horizontal rectangle */
.ss-ui-square--wide {
    --aspect-width: 1.6;
    --aspect-height: 1;
}

/* Shape: Tall - vertical rectangle */
.ss-ui-square--tall {
    --aspect-width: 1;
    --aspect-height: 1.6;
}

/* Shape: Diamond - rotated 45deg */
.ss-ui-square--diamond {
    --shape-rotation: 45deg;
}

/* Squish animation for Tap - uses --squish-depth and --overshoot */
@keyframes ss-squish {
    0% { transform: translate(-50%, -50%) rotate(var(--shape-rotation, 0deg)) scaleY(1) scaleX(1); }
    20% { transform: translate(-50%, -50%) rotate(var(--shape-rotation, 0deg)) scaleY(var(--squish-depth, 0.7)) scaleX(calc(2 - var(--squish-depth, 0.7))); }
    50% { transform: translate(-50%, -50%) rotate(var(--shape-rotation, 0deg)) scaleY(var(--overshoot, 1.12)) scaleX(calc(2 - var(--overshoot, 1.12))); }
    70% { transform: translate(-50%, -50%) rotate(var(--shape-rotation, 0deg)) scaleY(calc(1 - (var(--overshoot, 1.12) - 1) * 0.4)) scaleX(calc(1 + (var(--overshoot, 1.12) - 1) * 0.25)); }
    100% { transform: translate(-50%, -50%) rotate(var(--shape-rotation, 0deg)) scaleY(1) scaleX(1); }
}

.ss-ui-square.is-tapped {
    animation: ss-squish var(--anim-duration, 0.4s) cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Slide animation for Nudge - uses --slide-distance and --wobble */
@keyframes ss-slide {
    0% { transform: translate(-50%, -50%) rotate(var(--shape-rotation, 0deg)) translateX(0); }
    25% { transform: translate(-50%, -50%) rotate(calc(var(--shape-rotation, 0deg) + var(--wobble, 8deg))) translateX(var(--slide-distance, 50px)); }
    55% { transform: translate(-50%, -50%) rotate(calc(var(--shape-rotation, 0deg) - calc(var(--wobble, 8deg) * 0.4))) translateX(calc(var(--slide-distance, 50px) * -0.25)); }
    75% { transform: translate(-50%, -50%) rotate(calc(var(--shape-rotation, 0deg) + calc(var(--wobble, 8deg) * 0.15))) translateX(calc(var(--slide-distance, 50px) * 0.1)); }
    100% { transform: translate(-50%, -50%) rotate(var(--shape-rotation, 0deg)) translateX(0); }
}

.ss-ui-square.is-nudged {
    animation: ss-slide var(--anim-duration, 0.5s) cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .ss-ui-square.is-tapped,
    .ss-ui-square.is-nudged {
        animation: none;
    }
}

/* Controls */
.ss-ui-controls {
    display: grid;
    gap: 0.85rem;
    min-width: 0; /* grid item: shrink to the panel so the chipset/sliders don't get clipped on phones */
}

.ss-ui-controlrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
}

.ss-ui-spacer {
    flex: 1 1 auto;
    min-width: 0.5rem;
}

/* Icon buttons (chunky, fun, not docsy) */
.ss-ui-iconbtn {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.6rem 0.75rem;
    border-radius: var(--r);
    border: 1px solid var(--color-border-subtle);
    background: color-mix(in srgb, var(--color-surface) 72%, transparent);
    color: var(--color-text);
    cursor: pointer;

    transition: transform var(--t), border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}

.ss-ui-iconbtn__icon {
    width: 1.65rem;
    height: 1.65rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-sm);
    border: 1px solid var(--color-border-subtle);
    background: color-mix(in srgb, var(--color-surface-alt) 60%, transparent);
}

.ss-ui-iconbtn__label {
    font-size: var(--fs-sm);
    color: var(--color-text);
}

.ss-ui-iconbtn:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--green) 55%, var(--color-border-subtle));
    background: color-mix(in srgb, var(--lightgreen) 10%, var(--color-surface) 72%);
    box-shadow: 0 18px 40px rgba(0,0,0,0.18);
}

.ss-ui-iconbtn:active {
    transform: translateY(0px);
}

/* Chips */
.ss-ui-chipset {
    display: inline-flex;
    flex-wrap: wrap; /* 4 shape chips wrap to 2 rows on a phone instead of overflowing/clipping */
    justify-content: center;
    gap: 0.5rem;
    padding: 0.35rem;
    border-radius: var(--r-sm);
    border: 1px solid var(--color-border-subtle);
    background: color-mix(in srgb, var(--color-surface-alt) 55%, transparent);
}

.ss-ui-chip {
    border: 1px solid transparent;
    background: transparent;
    color: var(--color-text-muted);
    padding: 0.45rem 0.7rem;
    border-radius: var(--r-sm);
    cursor: pointer;
    font-size: var(--fs-sm);
    transition: background var(--t-fast), color var(--t-fast), transform var(--t), border-color var(--t-fast);
}

.ss-ui-chip:hover {
    transform: translateY(-1px);
    color: var(--color-text);
    background: color-mix(in srgb, var(--color-surface) 55%, transparent);
}

.ss-ui-chip.is-active {
    color: var(--color-text);
    border-color: color-mix(in srgb, var(--green) 55%, transparent);
    background: color-mix(in srgb, var(--lightgreen) 16%, transparent);
}

/* Sliders */
.ss-ui-sliders {
    display: grid;
    gap: 0.65rem;
}

.ss-ui-slider {
    display: grid;
    gap: 0.35rem;
}

.ss-ui-slider__label {
    font-size: var(--fs-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

/* Keep the native range but make it look intentional */
.ss-ui-slider input[type="range"] {
    width: 100%;
    accent-color: var(--green);
}

/* Slider group with label */
.ss-ui-slider-group {
    display: grid;
    gap: 0.4rem;
}

.ss-ui-slider-group__label {
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    padding-bottom: 0.15rem;
    border-bottom: 1px solid var(--color-border-subtle);
    margin-bottom: 0.25rem;
}

/* Row layout for sliders */
.ss-ui-sliders--row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
}

.ss-ui-sliders--row .ss-ui-slider {
    flex: 1 1 auto;
    min-width: 80px;
}

/* Status line */
.ss-ui-statusline {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
}

/* Motion respects your existing kill-switch:
   You already have .ss-ui-playground__demo.is-motion-off * rules.
   We just avoid adding essential meaning via motion. */

/* =========================================================
   UI Window: Reset / Undo Button
   ========================================================= */

.ss-ui-window-reset {
    width: 2.25rem;
    height: 2.25rem;
    display: grid;
    place-items: center;

    border-radius: var(--r);
    border: 1px solid var(--color-border-subtle);
    background: color-mix(in srgb, var(--color-surface) 78%, transparent);
    color: var(--color-text);

    transition: transform var(--t), background var(--t-fast), border-color var(--t-fast);
}

.ss-ui-window-reset:hover {
    transform: translateY(-1px);
    background: color-mix(in srgb, var(--color-surface) 90%, transparent);
    border-color: color-mix(in srgb, var(--green) 35%, var(--color-border-subtle));
}

.ss-ui-window-reset:active {
    transform: translateY(0px) scale(0.98);
}

.ss-ui-window-reset:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--green) 70%, transparent);
    outline-offset: 3px;
}

/* Wiggle hint */
@keyframes ss-ui-window-wiggle {
    0%   { transform: translate3d(0,0,0) rotate(0deg); }
    25%  { transform: translate3d(2px,-1px,0) rotate(0.35deg); }
    50%  { transform: translate3d(-2px,1px,0) rotate(-0.35deg); }
    75%  { transform: translate3d(1px,0px,0) rotate(0.2deg); }
    100% { transform: translate3d(0,0,0) rotate(0deg); }
}

/* Mobile/coarse pointer: hide reset */
@media (pointer: coarse), (max-width: 820px) {
    .ss-ui-window-reset {
        display: none;
    }
}

.window.is-wiggling {
    animation: ss-ui-window-wiggle 280ms ease;
}

/* Controls Panel */
.ss-ui-window-controls {
    display: flex;
    gap: 1rem;
}