/* styles.css — Cover Maker. Two surfaces: light cover stage + dark glass sidebar.
   Tokens and component CSS come from DESIGN.md (the single source of truth). */

:root {
  /* cover (artwork) */
  --cover-bg: #fcfcfd;

  /* sidebar (chrome) */
  --ui-fg: #ffffff;
  --ui-bg: #0b0b0d;
  --ui-accent: #a6e612;
  --ui-on-accent: #0a0d16;
  --ui-secondary: rgba(255, 255, 255, 0.70);
  --ui-control: rgba(255, 255, 255, 0.16);
  --ui-border: rgba(255, 255, 255, 0.16);
  --ui-hover: rgba(255, 255, 255, 0.22);
  --ui-color-fill: rgba(255, 255, 255, 0.10);
  --ui-divider: rgba(255, 255, 255, 0.10);
  --ui-faint: rgba(255, 255, 255, 0.35);
  --ui-placeholder: rgba(255, 255, 255, 0.32);
  --ui-track-faint: rgba(255, 255, 255, 0.05);
  --ui-input-bg: rgba(0, 0, 0, 0.50);
  --ui-panel-bg: rgba(18, 18, 20, 0.80);
  --stage-dot: rgba(255, 255, 255, 0.06);

  --ui-radius: 4px;
  --sidebar-w: 320px;

  --font-cover: "IBM Plex Sans", system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  font-family: var(--font-mono);
  background: var(--ui-bg);
  color: var(--ui-fg);
  overflow: hidden;
}

/* ── App shell ──────────────────────────────────────────────────────────── */
/* Stage fills the viewport; the sidebar floats over it (see #sidebar). */
#app { height: 100vh; }

#stage {
  width: 100%; height: 100vh; position: relative;
  display: flex; align-items: center; justify-content: center;
  padding: 40px;
  background-color: var(--ui-bg);
  background-image: radial-gradient(circle, var(--stage-dot) 1px, transparent 1.5px);
  background-size: 24px 24px;
}

#cover-card {
  border-radius: 32px;
  box-shadow: 0 24px 64px rgba(10, 13, 22, 0.18); /* preview only, not exported */
  overflow: hidden;
  flex-shrink: 0;
  /* sized + scaled by main.js */
}
#cover-card svg { display: block; }

/* ── Sidebar (floating glass shell) ─────────────────────────────────────── */
/* Floats over the stage, docked to the right edge with an inset on all sides. */
#sidebar {
  /* Height hugs its content; capped to the viewport (minus the 20px top/bottom
     insets) so tall content scrolls instead of overflowing off-screen. */
  position: fixed; top: 20px; right: 20px;
  width: var(--sidebar-w);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: var(--ui-panel-bg);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--ui-border);
  border-radius: 6px;
  box-shadow: 0 8px 32px var(--shadow-sidebar, rgba(0, 0, 0, 0.4));
  padding: 16px;
  z-index: 10;
}
#sidebar::-webkit-scrollbar { width: 8px; }
#sidebar::-webkit-scrollbar-track { background: var(--ui-track-faint); }
#sidebar::-webkit-scrollbar-thumb { background: var(--ui-secondary); border-radius: 4px; }
#sidebar::-webkit-scrollbar-thumb:hover { background: var(--ui-fg); }

.app-title {
  font-size: 11px; font-weight: 400; letter-spacing: 0.5px; text-transform: uppercase;
  padding-bottom: 16px; border-bottom: 1px solid var(--ui-divider); margin-bottom: 4px;
}

/* ── Sections + rows ────────────────────────────────────────────────────── */
.section {
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px 0; border-bottom: 1px solid var(--ui-divider);
}
.section:last-of-type { border-bottom: none; padding-bottom: 0; }
.section-header { display: flex; justify-content: space-between; align-items: center; height: 24px; }
.section-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--ui-fg); }

.row { display: flex; align-items: center; gap: 8px; min-height: 28px; }
.row.stack { flex-direction: column; align-items: stretch; gap: 4px; }
.row-label { width: 76px; flex-shrink: 0; font-size: 11px; color: var(--ui-secondary); }
.row-label.wide { width: auto; }

/* ── Text input / textarea ──────────────────────────────────────────────── */
.text-input {
  width: 100%; height: 28px;
  background: var(--ui-control); border: 1px solid transparent; border-radius: var(--ui-radius);
  color: var(--ui-fg); font-family: var(--font-mono); font-size: 11px;
  padding: 0 8px; outline: none; transition: border-color 0.2s ease;
}
textarea.text-input { height: auto; min-height: 56px; padding: 8px; resize: vertical; line-height: 1.5; }
.text-input::placeholder { color: var(--ui-placeholder); }
.text-input:focus { border-color: var(--ui-fg); }

/* ── Slider + numeric badge ─────────────────────────────────────────────── */
.slider-row { display: flex; align-items: center; gap: 8px; flex: 1; }
.num-input {
  width: 44px; height: 28px; flex-shrink: 0;
  background: var(--ui-input-bg); border: 1px solid transparent; border-radius: 6px;
  color: var(--ui-secondary); font-family: var(--font-mono); font-size: 11px;
  text-align: center; padding: 0; outline: none; transition: border-color 0.2s ease, color 0.2s ease;
}
.num-input:focus { border-color: var(--ui-fg); color: var(--ui-fg); }
.num-input::-webkit-inner-spin-button, .num-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.num-input[type="number"] { -moz-appearance: textfield; }

input[type="range"] { flex: 1; min-width: 0; height: 28px; background: transparent; outline: none; -webkit-appearance: none; cursor: pointer; }
input[type="range"]::-webkit-slider-runnable-track {
  height: 12px; background-color: transparent;
  background-image: radial-gradient(circle, var(--ui-border) 1px, transparent 1.5px);
  background-size: 7px 12px; background-repeat: repeat-x; background-position: center;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 12px; height: 12px;
  border-radius: 50%; background: var(--ui-bg); border: 1px solid var(--ui-fg);
  cursor: pointer; transition: transform 0.15s ease;
}
input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.25); }
input[type="range"]::-moz-range-track {
  height: 12px; background-color: transparent;
  background-image: radial-gradient(circle, var(--ui-border) 1px, transparent 1.5px);
  background-size: 7px 12px; background-repeat: repeat-x; background-position: center;
}
input[type="range"]::-moz-range-thumb {
  width: 12px; height: 12px; border-radius: 50%; background: var(--ui-bg); border: 1px solid var(--ui-fg); cursor: pointer;
}

/* ── Color control ──────────────────────────────────────────────────────── */
.color-control {
  flex: 1; height: 32px; display: flex; align-items: center; gap: 8px; padding: 0 4px;
  background: var(--ui-color-fill); border-radius: var(--ui-radius);
}
input[type="color"] {
  width: 24px; height: 24px; flex-shrink: 0; border: 1px solid var(--ui-border);
  border-radius: 50%; cursor: pointer; background: transparent; overflow: hidden; padding: 0; -webkit-appearance: none;
}
input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
input[type="color"]::-webkit-color-swatch { border: none; border-radius: 50%; }
input[type="color"]::-moz-color-swatch { border: none; border-radius: 50%; }
.color-hex {
  flex: 1; min-width: 0; background: transparent; border: none; color: var(--ui-secondary);
  font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; outline: none; padding: 0;
}

.swatch {
  width: 20px; height: 20px; flex-shrink: 0;
  border-radius: 50%; border: 1px solid var(--ui-border);
}

/* ── Custom dropdown (palette) — our own surface, not a native <select> ──── */
.dropdown { position: relative; flex: 1; min-width: 0; }

.dropdown-trigger {
  width: 100%; height: 32px;
  display: flex; align-items: center; gap: 8px; padding: 0 8px 0 4px;
  background: var(--ui-color-fill); border: 1px solid transparent; border-radius: var(--ui-radius);
  color: var(--ui-fg); font-family: var(--font-mono); font-size: 11px;
  cursor: pointer; outline: none; transition: border-color 0.2s ease;
}
.dropdown.open .dropdown-trigger { border-color: var(--ui-border); }
.dropdown-label { flex: 1; min-width: 0; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dropdown-caret {
  width: 10px; height: 6px; flex-shrink: 0; transition: transform 0.2s ease;
  background: no-repeat center / contain url("data:image/svg+xml;charset=UTF-8,%3csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M1 1L5 5L9 1' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
}
.dropdown.open .dropdown-caret { transform: rotate(180deg); }

.dropdown-menu {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 50;
  display: none; flex-direction: column; gap: 2px;
  padding: 4px; max-height: 240px; overflow-y: auto;
  background: #222; border: 1px solid var(--ui-border); border-radius: 6px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}
.dropdown.open .dropdown-menu { display: flex; }
.dropdown-option {
  width: 100%; height: 28px; flex-shrink: 0;
  display: flex; align-items: center; gap: 8px; padding: 0 6px;
  background: transparent; border: none; border-radius: var(--ui-radius);
  color: var(--ui-secondary); font-family: var(--font-mono); font-size: 11px;
  cursor: pointer; text-align: left; transition: background 0.15s ease, color 0.15s ease;
}
.dropdown-option:hover { background: var(--ui-control); color: var(--ui-fg); }
.dropdown-option.selected { color: var(--ui-fg); }

/* ── Toggle ─────────────────────────────────────────────────────────────── */
.toggle {
  position: relative; width: 32px; height: 22px; flex-shrink: 0;
  display: flex; align-items: center; padding: 4px;
  background: var(--ui-input-bg); border: 1px solid var(--ui-border);
  border-radius: 38px; cursor: pointer; transition: border-color 0.2s ease;
}
.toggle:hover { border-color: rgba(255, 255, 255, 0.6); }
.toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle .knob {
  width: 12px; height: 12px; border-radius: 50%; background: var(--ui-bg);
  border: 1px solid var(--ui-border); box-sizing: border-box;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.25s ease;
}
.toggle input:checked + .knob { border-color: var(--ui-fg); transform: translateX(10px); }

/* ── Segmented ──────────────────────────────────────────────────────────── */
.segmented {
  display: flex; align-items: stretch; flex: 1; height: 28px; padding: 1px;
  background: var(--ui-control); border-radius: var(--ui-radius);
}
.segmented button {
  flex: 1; min-width: 0; background: transparent; color: rgba(255, 255, 255, 0.4);
  border: none; border-radius: 3px; font-family: var(--font-mono); font-size: 11px;
  padding: 0 6px; cursor: pointer; transition: color 0.2s ease, background 0.2s ease;
}
.segmented button:hover { color: var(--ui-secondary); }
.segmented button.active { background: var(--ui-input-bg); color: var(--ui-fg); }

/* ── Buttons / export ───────────────────────────────────────────────────── */
.button-row { display: flex; gap: 8px; }
.btn-primary {
  flex: 1; background: var(--ui-accent); color: var(--ui-on-accent);
  border: none; border-radius: 3px; font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  height: 32px; cursor: pointer; transition: opacity 0.2s ease, transform 0.1s ease;
}
.btn-primary:hover { opacity: 0.9; }
.btn-primary:active { transform: scale(0.96); }
.export-note { margin-top: 8px; font-size: 11px; color: var(--ui-faint); text-align: center; }

/* ── Responsive: floating sidebar → floating bottom sheet ──────────────── */
@media (max-width: 860px) {
  #sidebar { top: auto; left: 20px; right: 20px; bottom: 20px; width: auto; max-height: 45vh; }
}