* { margin: 0; padding: 0; box-sizing: border-box; }

[hidden] { display: none !important; }

:root {
  --text: #f4f4f6;
  --text-dim: #a2a2aa;            /* brighter than flat gray for vibrancy over glass */
  --accent: #0a84ff;
  --radius: 9px;
  --radius-lg: 20px;
  --chip: rgba(255, 255, 255, 0.07);      /* raised control over the glass */
  --chip-hover: rgba(255, 255, 255, 0.13);
  --sunken: rgba(0, 0, 0, 0.24);          /* recessed well (scrubs, segmented tracks) */
  /* one press curve everywhere: fast out, gentle settle */
  --press: cubic-bezier(0.2, 0, 0, 1);
  --spring: cubic-bezier(0.34, 1.4, 0.5, 1);  /* slight overshoot for physical switches */
}

html, body {
  height: 100%;
  overflow: hidden;
  /* system font first: it already ships optical sizing + tracking tables */
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background: #c9c9c9;
  user-select: none;
  -webkit-user-select: none;
}

button { -webkit-tap-highlight-color: transparent; font-family: inherit; }

#stage { position: fixed; inset: 0; }

#composite { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
#composite.dragging { cursor: grabbing; }

/* transparent-mode checkerboard shown behind composite via body class */
body.bg-transparent #stage {
  background:
    conic-gradient(#d4d4d4 0 25%, #f0f0f0 0 50%, #d4d4d4 0 75%, #f0f0f0 0) 0 0 / 24px 24px;
}

/* ---------- Floating canvas chrome (glass) ---------- */
#help-btn {
  position: absolute;
  left: 16px; bottom: 16px;
  width: 28px; height: 28px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  background: rgba(28, 28, 32, 0.6);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  color: #d8d8dc;
  font-size: 14px; font-weight: 600;
  cursor: pointer;
  z-index: 16;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.28);
  transition: transform 90ms var(--press), background 160ms ease, color 160ms ease;
}
#help-btn:hover { background: rgba(48, 48, 54, 0.72); color: #fff; }
#help-btn:active { transform: scale(0.92); }

#canvas-hint {
  position: absolute;
  left: 54px; bottom: 16px;
  background: rgba(28, 28, 32, 0.6);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #e6e6ea;
  font-size: 11px; font-weight: 450; letter-spacing: 0;
  padding: 8px 13px;
  height: 28px;
  display: flex; align-items: center;
  border-radius: 14px;
  z-index: 15;
  pointer-events: none;
  /* materialize: scale + fade together, not a plain opacity fade */
  opacity: 0;
  transform: translateX(-6px) scale(0.96);
  transform-origin: left center;
  transition: opacity 0.3s var(--press), transform 0.3s var(--press);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.28);
}
#canvas-hint.show { opacity: 1; transform: translateX(0) scale(1); }

#toast {
  position: fixed;
  left: 50%; bottom: 24px;
  background: rgba(30, 30, 34, 0.68);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #f4f4f6;
  font-size: 12px; font-weight: 500;
  padding: 10px 16px;
  border-radius: 12px;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 12px) scale(0.96);
  transition: opacity 0.28s var(--press), transform 0.4s var(--press);
  z-index: 60;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}
#toast.show { opacity: 1; transform: translate(-50%, 0) scale(1); }

#drop-hint {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10, 132, 255, 0.12);
  border: 2px dashed var(--accent);
  color: #05336b;
  font-size: 20px; font-weight: 600; letter-spacing: -0.01em;
  pointer-events: none;
  z-index: 20;
}

/* ---------- Aspect guide ---------- */
#guide-overlay {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 10;
  display: flex; align-items: center; justify-content: center;
}
.guide-frame {
  position: relative;
  border: 1.5px dashed rgba(20, 20, 24, 0.55);
  border-radius: 4px;
  box-shadow: 0 0 0 4000px rgba(0, 0, 0, 0.14);
}
.guide-label {
  position: absolute; top: -24px; left: 0;
  font-size: 11px; font-weight: 600;
  color: rgba(20, 20, 24, 0.7);
  letter-spacing: 0.02em;
}

/* ---------- Sidebar: dark translucent material (structural/heavy) ---------- */
#sidebar {
  position: fixed;
  top: 10px; right: 10px; bottom: 10px;
  width: 218px;
  border-radius: var(--radius-lg);
  z-index: 30;
  color: var(--text);
  background: rgba(24, 24, 27, 0.58);
  backdrop-filter: blur(32px) saturate(180%);
  -webkit-backdrop-filter: blur(32px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  /* deep shadow (big surface reads thick) + bright top edge catching light */
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.14);
  overflow: hidden;              /* material clips; inner layer scrolls */
  display: flex;
  flex-direction: column;
}

/* drag handle: only shown when the sidebar is a bottom sheet (mobile) */
#sidebar-handle { display: none; }

#sidebar-scroll {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: none;
  touch-action: pan-y;           /* let the panel scroll on touch */
  padding: 15px 13px 17px;
  /* scroll edge effect: content fades where it meets the panel's edges
     (the fade sits in the empty padding gutters at rest, so nothing ghosts) */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 15px, #000 calc(100% - 16px), transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 15px, #000 calc(100% - 16px), transparent 100%);
}
#sidebar-scroll::-webkit-scrollbar { display: none; }

#sidebar section {
  margin-top: 15px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

#sidebar h3 {
  font-size: 10px;
  font-weight: 590;
  letter-spacing: 0.06em;        /* moderate tracking for tiny uppercase */
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 9px;
}

/* primary CTA — light material, draws attention */
.upload-btn {
  width: 100%;
  padding: 10px 12px;
  border: none; border-radius: 11px;
  background: #fff; color: #0b0b0d;
  font-size: 12.5px; font-weight: 600; letter-spacing: -0.01em;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.24);
  transition: transform 90ms var(--press), background 160ms ease;
}
.upload-btn:hover { background: #ededf0; }
.upload-btn:active { transform: scale(0.97); }

.ghost-btn {
  width: 100%;
  margin-top: 7px;
  padding: 6px;
  border: none; background: none;
  color: var(--text-dim);
  font-size: 11px; font-weight: 500;
  cursor: pointer;
  border-radius: 8px;
  transition: transform 90ms var(--press), color 160ms ease;
}
.ghost-btn:hover { color: var(--text); }
.ghost-btn:active { transform: scale(0.97); }

/* chips — raised controls over the glass */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips button {
  border: none;
  background: var(--chip);
  color: var(--text);
  font-size: 11px; font-weight: 500; letter-spacing: 0;
  padding: 6px 10px;
  border-radius: var(--radius);
  cursor: pointer;
  white-space: nowrap;
  transition: transform 90ms var(--press), background 150ms ease, color 150ms ease;
}
.chips button:hover { background: var(--chip-hover); }
.chips button:active { transform: scale(0.94); }
.chips button.active { background: #ffffff; color: #0b0b0d; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22); }
.chips.seg { margin-top: 8px; }

/* select */
.select-wrap { position: relative; }
.select-wrap::after {
  content: "";
  position: absolute; right: 11px; top: 50%;
  width: 7px; height: 7px;
  border-right: 1.5px solid var(--text-dim);
  border-bottom: 1.5px solid var(--text-dim);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
#model-select {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  background: var(--chip);
  border: none; border-radius: var(--radius);
  color: var(--text);
  font-size: 12px; font-weight: 500; letter-spacing: -0.005em;
  padding: 9px 11px;
  cursor: pointer;
  transition: background 150ms ease;
}
#model-select:hover { background: var(--chip-hover); }

/* scrubbers — recessed wells; drag tracks 1:1 (JS) */
.scrub {
  position: relative;
  height: 28px;
  background: var(--sunken);
  border-radius: 8px;
  margin-bottom: 6px;
  overflow: hidden;
  cursor: ew-resize;
  display: flex; align-items: center;
  touch-action: none;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.28);
  transition: box-shadow 140ms ease;
}
.scrub:active { box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.28), inset 0 0 0 1px rgba(255, 255, 255, 0.12); }
.scrub .fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 40%;
  background: rgba(255, 255, 255, 0.13);
  pointer-events: none;
}
.scrub:active .fill { background: rgba(255, 255, 255, 0.18); }
.scrub .lbl {
  position: relative;
  font-size: 11px; font-weight: 500;
  color: var(--text);
  padding-left: 10px;
  pointer-events: none;
}
.scrub .val {
  position: relative;
  margin-left: auto;
  font-size: 11px;
  color: var(--text-dim);
  padding-right: 10px;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

/* toggles */
.toggle-row {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--chip);
  border-radius: 8px;
  padding: 7px 10px;
  margin-bottom: 6px;
  font-size: 11.5px; font-weight: 500;
}
.toggle {
  width: 32px; height: 19px;
  border-radius: 10px;
  border: none;
  background: rgba(255, 255, 255, 0.16);
  position: relative;
  cursor: pointer;
  transition: background 0.2s ease;
  flex-shrink: 0;
}
.toggle::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  /* springy knob: physical switch gets a little overshoot */
  transition: transform 0.28s var(--spring), width 0.16s ease;
}
.toggle.on { background: var(--accent); }
.toggle.on::after { transform: translateX(13px); }
/* iOS-style knob stretch on press */
.toggle:active::after { width: 18px; }
.toggle.on:active::after { transform: translateX(10px); }

.sub { padding: 2px 0 4px; }

/* tabs — segmented control (sunken track, raised active pill) */
.tabs {
  display: flex;
  background: var(--sunken);
  border-radius: 9px;
  padding: 2px;
  margin-bottom: 9px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.24);
}
.tabs button {
  flex: 1;
  border: none;
  background: none;
  color: var(--text-dim);
  font-size: 11px; font-weight: 500;
  padding: 5px 0;
  border-radius: 7px;
  cursor: pointer;
  transition: transform 90ms var(--press), background 160ms ease, color 160ms ease;
}
.tabs button:active { transform: scale(0.96); }
.tabs button.active {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* wallpapers grid */
.thumb-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.thumb-grid button {
  aspect-ratio: 8 / 5;
  border-radius: 7px;
  border: 2px solid transparent;
  background-size: cover;
  background-position: center;
  cursor: pointer;
  padding: 0;
  transition: transform 90ms var(--press), border-color 150ms ease;
}
.thumb-grid button:hover { transform: scale(1.04); }
.thumb-grid button:active { transform: scale(0.96); }
.thumb-grid button.active { border-color: #fff; }

/* model colorway dots */
.color-dots { display: flex; gap: 7px; margin-top: 9px; }
.color-dots button {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.14);
  cursor: pointer;
  padding: 0;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
  transition: transform 100ms var(--press), border-color 150ms ease;
}
.color-dots button:hover { border-color: rgba(255, 255, 255, 0.5); transform: scale(1.08); }
.color-dots button:active { transform: scale(0.92); }
.color-dots button.active { border-color: #fff; }

/* colors grid */
.swatch-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.swatch-grid button {
  aspect-ratio: 1;
  border-radius: 7px;
  border: 2px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  padding: 0;
  transition: transform 90ms var(--press), border-color 150ms ease;
}
.swatch-grid button:hover { transform: scale(1.08); }
.swatch-grid button:active { transform: scale(0.92); }
.swatch-grid button.active { border-color: #fff; }
.swatch-grid .custom {
  position: relative;
  background: conic-gradient(red, yellow, lime, cyan, blue, magenta, red);
}
.swatch-grid .custom input {
  position: absolute; inset: 0;
  opacity: 0; cursor: pointer; width: 100%; height: 100%;
}

/* ---------- Accessibility (skill §14) ---------- */

/* Reduced motion: keep gentle cross-fades, drop springs/overshoot/large moves */
@media (prefers-reduced-motion: reduce) {
  #toast {
    transform: translate(-50%, 0);
    transition: opacity 160ms ease;
  }
  #toast.show { transform: translate(-50%, 0); }
  #canvas-hint {
    transform: translateX(0) scale(1);
    transition: opacity 180ms ease;
  }
  .toggle::after { transition: transform 0.12s ease, width 0.12s ease; }
  .upload-btn, .ghost-btn, .chips button, .tabs button, .thumb-grid button,
  .color-dots button, .swatch-grid button, #help-btn {
    transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
  }
  .upload-btn:active, .ghost-btn:active, .chips button:active, .tabs button:active,
  .thumb-grid button:active, .color-dots button:active, .swatch-grid button:active,
  #help-btn:active, .thumb-grid button:hover, .color-dots button:hover,
  .swatch-grid button:hover { transform: none; }
}

/* Reduced transparency: frost the glass to solid, drop blur */
@media (prefers-reduced-transparency: reduce) {
  #sidebar { background: #1b1b1e; backdrop-filter: none; -webkit-backdrop-filter: none; }
  #help-btn, #canvas-hint, #toast {
    background: #1e1e22; backdrop-filter: none; -webkit-backdrop-filter: none;
  }
}

/* High contrast: near-solid surfaces + defined borders */
@media (prefers-contrast: more) {
  :root { --text-dim: #ccccd2; --chip: rgba(255, 255, 255, 0.16); }
  #sidebar {
    background: #141416;
    backdrop-filter: none; -webkit-backdrop-filter: none;
    border-color: rgba(255, 255, 255, 0.32);
  }
  .chips button, .toggle-row, #model-select { border: 1px solid rgba(255, 255, 255, 0.22); }
  .scrub { border: 1px solid rgba(255, 255, 255, 0.18); }
}

/* ---------- Mobile: sidebar becomes a draggable bottom sheet ---------- */
@media (max-width: 680px) {
  #sidebar {
    top: auto; left: 0; right: 0; bottom: 0;
    width: auto;
    max-height: 84vh;
    border-radius: 22px 22px 0 0;
    border-bottom: none;
    box-shadow: 0 -12px 48px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.14);
    /* --sheet-y translates the sheet down to reveal only a peek; JS drives it.
       Default (before JS) is the collapsed position. */
    transform: translateY(var(--sheet-y, calc(84vh - 128px)));
    transition: transform 0.45s var(--spring);
  }
  #sidebar.dragging-sheet { transition: none; }

  #sidebar-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 26px;
    flex-shrink: 0;
    cursor: grab;
    touch-action: none;
  }
  #sidebar-handle span {
    width: 40px; height: 5px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.28);
  }
  #sidebar-handle:active { cursor: grabbing; }
  #sidebar-scroll { padding-top: 4px; }

  /* larger touch targets */
  .chips button { padding: 8px 12px; font-size: 12px; }
  .tabs button { padding: 8px 0; }
  .scrub { height: 34px; }
  .toggle { width: 38px; height: 23px; border-radius: 12px; }
  .toggle::after { width: 19px; height: 19px; }
  .toggle.on::after { transform: translateX(15px); }
  .color-dots button { width: 26px; height: 26px; }

  /* keep the help button clear of the collapsed peek; hint is redundant on touch */
  #canvas-hint { display: none; }
  #help-btn { bottom: calc(128px + 14px); left: 14px; }
}

@media (max-width: 680px) and (prefers-reduced-motion: reduce) {
  #sidebar { transition: transform 200ms ease; }
}