/* Bezel — app surface.
 *
 * Dark technical ground with one electric signal colour, matching the house
 * language. The colour in this room comes from the work being previewed, so the
 * chrome stays achromatic and the accent is reserved for state.
 *
 * Every colour and font below references a token. An inline hex anywhere else
 * is a bug.
 */

:root {
  /* Ground */
  --bg:      oklch(14.5% 0.014 265);
  --bg-2:    oklch(17.5% 0.016 265);
  --bg-3:    oklch(21%   0.018 265);
  --lift:    oklch(25%   0.020 265);

  /* Text */
  --text:    oklch(96%   0.006 265);
  --text-2:  oklch(78%   0.010 265);
  --muted:   oklch(60%   0.012 265);

  /* Lines */
  --rule:    oklch(29%   0.016 265);
  --rule-2:  oklch(23%   0.014 265);

  /* Signal */
  --accent:      oklch(88% 0.19 122);
  --accent-dim:  oklch(72% 0.16 122);
  --accent-ink:  oklch(18% 0.05 122);
  --accent-wash: oklch(88% 0.19 122 / 0.12);

  --ok:     oklch(78% 0.15 155);
  --warn:   oklch(82% 0.15 85);
  --danger: oklch(70% 0.17 25);

  --font-display: 'Bricolage Grotesque', 'Helvetica Neue', sans-serif;
  --font-body:    'Manrope', ui-sans-serif, system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

  --rail: 268px;
  --gap: 18px;
  --dur: 180ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0ms; }
  * { animation: none !important; }
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  overflow-x: clip; /* clip, not hidden — sticky descendants survive */
}

body {
  /* The app fills the viewport exactly and each pane scrolls inside itself, so
     the preview is always visible without scrolling the whole page. dvh keeps
     it honest when mobile browser chrome collapses. */
  height: 100dvh;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  -webkit-font-smoothing: antialiased;
}

.sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

:where(button, input, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ── Masthead ──────────────────────────────────────────────────────────── */

.masthead {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--gap) 28px;
  padding: 14px 22px;
  border-bottom: 1px solid var(--rule);
  background: var(--bg-2);
}

.brand { display: flex; align-items: baseline; gap: 12px; min-width: 0; }

.brand-word {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: -0.02em;
  line-height: 1;
}
/* The mark: a rule under the word, in the signal colour. One gesture. */
.brand-word::after {
  content: '';
  display: block;
  height: 3px;
  margin-top: 5px;
  background: var(--accent);
}

.brand-meta {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--muted);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.source { display: flex; align-items: center; gap: 10px; min-width: 0; }

.seg {
  display: flex;
  border: 1px solid var(--rule);
  border-radius: 7px;
  overflow: hidden;
  flex: none;
}
.seg-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 8px 11px;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.seg-btn + .seg-btn { border-left: 1px solid var(--rule); }
.seg-btn:hover { background: var(--bg-3); color: var(--text); }
.seg-btn.is-on { background: var(--accent); color: var(--accent-ink); }

/* [hidden] must beat the display rule below, or a hidden field still shows. */
[hidden] { display: none !important; }

.field { display: block; flex: 1 1 auto; min-width: 0; }
.field input[type='url'] {
  width: 100%;
  padding: 9px 12px;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 7px;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
}
.field input[type='url']::placeholder { color: var(--muted); }
.field input[type='url']:focus { border-color: var(--accent-dim); outline: none; }
.field.file input { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-2); }

button.primary, button.ghost {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 9px 16px;
  border-radius: 7px;
  cursor: pointer;
  flex: none;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
button.primary {
  background: var(--accent);
  color: var(--accent-ink);
  border: 1px solid var(--accent);
  font-weight: 500;
}
button.primary:hover { background: var(--accent-dim); }
button.ghost {
  background: transparent;
  color: var(--text-2);
  border: 1px solid var(--rule);
}
button.ghost:hover { border-color: var(--lift); color: var(--text); }
button[disabled] { opacity: 0.45; cursor: not-allowed; }

.status {
  display: flex; align-items: center; gap: 8px;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--muted);
  white-space: nowrap;
}
.dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--muted);
  flex: none;
}
.status[data-state='busy'] .dot { background: var(--warn); animation: pulse 1s infinite; }
.status[data-state='ok']   .dot { background: var(--ok); }
.status[data-state='err']  .dot { background: var(--danger); }
.status[data-state='err']  { color: var(--danger); }
@keyframes pulse { 50% { opacity: 0.25; } }

/* ── Body ──────────────────────────────────────────────────────────────── */

main {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
}

.rail {
  border-right: 1px solid var(--rule);
  background: var(--bg-2);
  padding: 4px 0 24px;
  overflow-y: auto;
  min-height: 0;
  overscroll-behavior: contain;
}

.grp { padding: 16px 18px; border-bottom: 1px solid var(--rule-2); }
.grp:last-child { border-bottom: 0; }

.lbl {
  margin: 0 0 11px;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Device chips carry a real generated frame as their icon. One device per
   category — the picker behaves like a radio group inside each row. */
.devices { display: flex; flex-direction: column; gap: 12px; }
.devgroup { display: block; }
.devgroup-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rule);
  margin-bottom: 5px;
}
.devices-row { display: flex; flex-wrap: wrap; gap: 6px; }
.dev {
  display: flex; align-items: center; gap: 7px;
  padding: 6px 9px 6px 6px;
  background: var(--bg-3);
  border: 1px solid var(--rule);
  border-radius: 7px;
  color: var(--text-2);
  font-size: 0.75rem;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.dev:hover { border-color: var(--lift); color: var(--text); }
.dev.is-on {
  border-color: var(--accent);
  background: var(--accent-wash);
  color: var(--text);
}
.dev svg { display: block; height: 22px; width: auto; flex: none; }
.dev .n { white-space: nowrap; }
.dev .ord {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  color: var(--accent);
}

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  appearance: none;
  padding: 6px 10px;
  background: var(--bg-3);
  border: 1px solid var(--rule);
  border-radius: 6px;
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.chip:hover { border-color: var(--lift); color: var(--text); }
.chip.is-on { border-color: var(--accent); background: var(--accent-wash); color: var(--text); }

.swatches { display: flex; flex-wrap: wrap; gap: 7px; }
.sw {
  appearance: none;
  width: 34px; height: 34px;
  border-radius: 7px;
  border: 1px solid var(--rule);
  cursor: pointer;
  padding: 0;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.sw:hover { transform: translateY(-1px); border-color: var(--lift); }
.sw.is-on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-wash); }

.custom {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--rule-2);
  display: grid;
  gap: 9px;
}
.cfield { display: grid; gap: 5px; }
.cfield > span {
  display: flex; justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--text-2);
}
.cfield b { color: var(--accent); font-weight: 500; }
.cfield select {
  width: 100%;
  padding: 6px 8px;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--rule);
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
}
.cfield input[type='color'] {
  width: 100%;
  height: 30px;
  padding: 0;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 6px;
  cursor: pointer;
}
/* Without these the native colour well keeps its own padding and border and
   the swatch never fills the control — it reads as an empty white bar. */
.cfield input[type='color']::-webkit-color-swatch-wrapper { padding: 2px; }
.cfield input[type='color']::-webkit-color-swatch { border: 0; border-radius: 4px; }
.cfield input[type='color']::-moz-color-swatch { border: 0; border-radius: 4px; }
.cfield input[type='range'] { width: 100%; accent-color: var(--accent); }

.slider { display: block; margin-bottom: 12px; }
.slider span {
  display: flex; justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--text-2);
  margin-bottom: 6px;
}
.slider b { color: var(--accent); font-weight: 500; }
.slider input[type='range'] { width: 100%; accent-color: var(--accent); }

.check {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.8125rem; color: var(--text-2);
  cursor: pointer;
}
.check input { accent-color: var(--accent); }

.hint {
  margin: 8px 0 0;
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--muted);
}

/* ── Stage ─────────────────────────────────────────────────────────────── */

.stage {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  /* A dot grid so a transparent backdrop still reads as transparent. */
  background-color: var(--bg);
  background-image: radial-gradient(var(--rule-2) 1px, transparent 1px);
  background-size: 22px 22px;
}

.stage-inner {
  display: grid;
  place-items: center;
  padding: 24px;
  min-height: 0;
  overflow: auto;
}

.preview {
  max-width: 100%;
  max-height: 100%;
  line-height: 0;
  box-shadow: 0 24px 70px rgb(0 0 0 / 0.55);
  border-radius: 3px;
  overflow: hidden;
}
.preview { display: flex; min-width: 0; min-height: 0; }
.preview svg { display: block; max-width: 100%; max-height: 100%; height: auto; width: auto; }

.dims {
  margin: 0;
  padding: 9px 22px;
  border-top: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--muted);
  background: var(--bg-2);
}

/* ── Strip ─────────────────────────────────────────────────────────────── */

.strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--gap);
  padding: 12px 22px;
  border-top: 1px solid var(--rule);
  background: var(--bg-2);
}

.shots { display: flex; gap: 10px; overflow-x: auto; min-height: 62px; align-items: center; }
.shots:empty::after {
  content: 'Build the set to fan one capture out across every selected form factor.';
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--muted);
}

.shot {
  position: relative;
  flex: none;
  border: 1px solid var(--rule);
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease);
  line-height: 0;
}
.shot:hover { border-color: var(--accent); }
.shot img { display: block; height: 58px; width: auto; }
.shot .tag {
  position: absolute; inset: auto 0 0 0;
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.04em;
  color: var(--text);
  background: rgb(0 0 0 / 0.66);
  padding: 2px 4px;
  line-height: 1.3;
}

.actions { display: flex; gap: 9px; flex: none; }

/* ── Narrow ────────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  /* Below the two-pane threshold the app becomes a normal scrolling page —
     stacking two internally-scrolling panes in one viewport is unusable. */
  body { height: auto; min-height: 100dvh; overflow: auto; }
  main { grid-template-columns: minmax(0, 1fr); overflow: visible; }
  .masthead { grid-template-columns: minmax(0, 1fr); }
  .status { justify-self: start; }
  .rail {
    border-right: 0;
    border-bottom: 1px solid var(--rule);
    overflow-y: visible;
  }
  .stage { overflow: visible; }
  .stage-inner { overflow: visible; }
  .preview svg { max-height: 60vh; }
}

@media (max-width: 560px) {
  .source { flex-wrap: wrap; }
  .field { flex-basis: 100%; order: 3; }
  .brand-meta { display: none; }
  .strip { grid-template-columns: minmax(0, 1fr); }
  .actions { justify-content: stretch; }
  .actions button { flex: 1; }
}

/* ── Account, auth dialog and projects ─────────────────────────────────── */

.masthead .right { display: flex; align-items: center; gap: 16px; justify-self: end; }

.account { display: flex; align-items: center; }
.who { display: flex; align-items: center; gap: 10px; }
.who .email {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--text-2);
  max-width: 22ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.quota {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  color: var(--muted);
  border: 1px solid var(--rule);
  border-radius: 5px;
  padding: 2px 6px;
  white-space: nowrap;
}
button.linkish {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
button.linkish:hover { color: var(--accent-dim); }

dialog.auth {
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: var(--bg-2);
  color: var(--text);
  padding: 0;
  width: min(94vw, 380px);
}
dialog.auth::backdrop { background: rgb(0 0 0 / 0.62); }
.auth-form { display: grid; gap: 12px; padding: 22px; }
.auth-form h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.auth-blurb { margin: 0; font-size: 0.8125rem; color: var(--muted); line-height: 1.45; }
.auth-form input[type='email'],
.auth-form input[type='password'] {
  width: 100%;
  padding: 9px 11px;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 7px;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
}
.auth-form input:focus { border-color: var(--accent-dim); outline: none; }
.auth-error {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--danger);
  line-height: 1.4;
}
.auth-actions { display: flex; gap: 9px; justify-content: flex-end; margin-top: 4px; }
.auth-switch {
  margin: 0;
  font-size: 0.75rem;
  color: var(--muted);
  display: flex;
  gap: 6px;
  align-items: baseline;
}

.saverow { display: flex; gap: 6px; margin-bottom: 10px; }
.saverow input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 6px 9px;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 6px;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
}
.saverow input:focus { border-color: var(--accent-dim); outline: none; }

.projects { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.projects:empty::after {
  content: 'Nothing saved yet.';
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--muted);
}
.projects li {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--bg-3);
}
.projects .open {
  appearance: none;
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
  background: none;
  border: 0;
  color: var(--text-2);
  font-size: 0.75rem;
  padding: 7px 4px 7px 9px;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.projects li:hover { border-color: var(--lift); }
.projects .open:hover { color: var(--text); }
.projects .del {
  appearance: none;
  background: none;
  border: 0;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1;
  padding: 6px 9px 6px 4px;
  cursor: pointer;
}
.projects .del:hover { color: var(--danger); }

@media (max-width: 900px) {
  .masthead .right { justify-self: start; flex-wrap: wrap; }
}