/*
 * Configurator pages. These render in a normal browser, not OBS, so modern
 * conveniences are fine here - but they share the widget's look tokens.
 */
:root {
  --cfg-bg: #0e0e10;
  --cfg-panel: #18181b;
  --cfg-line: #2f2f35;
  --cfg-text: #efeff1;
  --cfg-accent: #9147ff;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--cfg-bg);
  color: var(--cfg-text);
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 15px;
}

.cfg-layout {
  display: flex;
  gap: 24px;
  padding: 24px;
  max-width: 1400px;
  margin: 0 auto;
  flex-wrap: wrap;
}

.cfg-side {
  flex: 1 1 360px;
  min-width: 320px;
  max-width: 480px;
}

.cfg-main {
  flex: 2 1 520px;
  min-width: 400px;
}

h1 {
  font-size: 22px;
  margin: 0 0 4px;
}

.cfg-sub {
  opacity: 0.7;
  margin: 0 0 20px;
}

.cfg-group {
  border: 1px solid var(--cfg-line);
  border-radius: 10px;
  margin: 0 0 12px;
  padding: 2px 16px 6px;
}


.cfg-group summary {
  cursor: pointer;
  padding: 10px 0;
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.8;
  user-select: none;
}

.cfg-group summary:hover {
  opacity: 1;
}

.cfg-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
}

.cfg-row span { flex: 1; }

.cfg-row input[type="text"],
.cfg-row input[type="number"],
.cfg-row select {
  background: var(--cfg-panel);
  color: var(--cfg-text);
  border: 1px solid var(--cfg-line);
  border-radius: 6px;
  padding: 6px 8px;
  width: 180px;
}

.cfg-row input[type="color"] {
  width: 48px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--cfg-line);
  border-radius: 6px;
  background: var(--cfg-panel);
}

.preview-frame {
  /* Matches the suggested OBS source size (400x500). The stacked layout
     overrides this below; the games size their preview from its ratio. */
  width: 100%;
  max-width: 480px;
  aspect-ratio: 4 / 5;
  border: 1px solid var(--cfg-line);
  border-radius: 10px;
  background:
    repeating-conic-gradient(#26262c 0% 25%, #1c1c21 0% 50%) 0 0 / 24px 24px;
  overflow: hidden;
}
/*
 * In the stacked layout the preview is the element that absorbs whatever
 * height the rest of the page did not use, so it has no ratio of its own. The
 * floor is where it stops being worth looking at; past that the page scrolls
 * rather than shrinking it into uselessness. Sized so a 1366x768 laptop, the
 * smallest screen worth designing for here, still fits without scrolling.
 */
.cfg-stack .preview-frame {
  max-width: none;
  aspect-ratio: auto;
  flex: 1 1 0;
  min-height: 160px;
}


.preview-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.url-box {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}

/* Tighter only where height is scarce; the games keep the roomier spacing. */
.cfg-stack .url-box { margin-top: 8px; }

.url-box input {
  flex: 1;
  background: var(--cfg-panel);
  color: var(--cfg-text);
  border: 1px solid var(--cfg-line);
  border-radius: 6px;
  padding: 8px 10px;
  font-family: Consolas, monospace;
  font-size: 12px;
}

button {
  background: var(--cfg-accent);
  color: #fff;
  border: 0;
  border-radius: 6px;
  padding: 8px 16px;
  font-weight: 600;
  cursor: pointer;
}

button:hover { filter: brightness(1.1); }

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  filter: none;
}

.cfg-restore {
  margin-bottom: 12px;
  padding: 8px 10px;
  border: 1px solid var(--cfg-line);
  border-radius: 6px;
  font-size: 13px;
}

.cfg-restore button {
  padding: 4px 10px;
  margin-left: 4px;
}

button.secondary {
  background: transparent;
  border: 1px solid var(--cfg-accent);
  color: var(--cfg-accent);
}

.obs-note {
  margin-top: 12px;
  font-size: 13px;
  opacity: 0.75;
  line-height: 1.5;
}

.cfg-stack .obs-note {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.45;
}

/*
 * The instructions are the least urgent thing on the page and the easiest to
 * give back when height is short, so they collapse to a line the streamer can
 * open when they actually need them.
 */
.obs-note-wrap > summary {
  cursor: pointer;
  font-size: 12px;
  opacity: 0.75;
  list-style: none;
}

.obs-note-wrap > summary::-webkit-details-marker { display: none; }
.obs-note-wrap > summary::before { content: "> "; }
.obs-note-wrap[open] > summary::before { content: "v "; }

/* A widget designed for a light stream background needs a light preview
   backdrop, or the streamer is judging contrast against the wrong colour. */
.preview-frame.light {
  background: repeating-conic-gradient(#e8e8ec 0% 25%, #f6f6f8 0% 50%) 0 0 / 24px 24px;
}

/* A stand-in for gameplay. Transparency over a checkerboard tells you nothing
   about whether an outline survives on stream; what breaks legibility is busy
   mid-tone colour that changes behind the text, so that is what this is. */
.preview-frame.gameplay {
  background:
    radial-gradient(circle at 22% 28%, rgba(255, 214, 120, 0.95), transparent 46%),
    radial-gradient(circle at 78% 22%, rgba(120, 220, 255, 0.9), transparent 44%),
    radial-gradient(circle at 62% 74%, rgba(255, 130, 170, 0.85), transparent 48%),
    radial-gradient(circle at 30% 82%, rgba(150, 255, 170, 0.85), transparent 46%),
    linear-gradient(148deg, #4a5b7a 0%, #7d6a55 38%, #46603f 68%, #6b4a5e 100%);
}

/*
 * A viewport-height column: settings across the top, preview beneath them.
 *
 * The preview takes whatever the rest leaves, so the page cannot overflow
 * however many settings there are - everything else is content-sized and the
 * preview absorbs the slack. Past the point where it would be too small to
 * judge anything, scrolling comes back rather than shrinking it to nothing.
 */
.cfg-stack {
  max-width: 1240px;
  height: 100dvh;
  margin: 0 auto;
  padding: 12px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow: auto;
}

.cfg-stack > h1 { font-size: 19px; margin: 0; }
.cfg-stack > .cfg-sub { margin: 0; font-size: 13px; }
.cfg-stack > .cfg-link { margin: 0; }

/*
 * Two columns of settings above the preview: values on the left, toggles on
 * the right. Every row reads label then control; the label takes the slack, so
 * the controls line up down each column.
 */
.cfg-lead {
  display: flex;
  justify-content: center;
  margin: 0;
}

/* Shrink-to-fit, so the label and the field sit together; .cfg-lead centres
   the pair. */
.cfg-lead .cfg-row {
  gap: 8px;
  padding: 2px 0;
}

.cfg-table {
  display: flex;
  align-items: flex-start;
  gap: 22px;
  margin: 0;
}

/*
 * Each half splits again on a wide screen. Thirteen settings stacked in one
 * column stand taller than the preview they are meant to sit above; in two
 * they are seven rows, which leaves the preview something worth looking at.
 */
.cfg-col {
  flex: 1 1 0;
  min-width: 0;
  column-count: 2;
  column-gap: 18px;
}

.cfg-col .cfg-row {
  /* A fixed row height keeps the columns on one rhythm even though a select
     and a checkbox are different heights. The base padding has to go with it:
     left it in, a select row was 33px and a checkbox row 27px, which is the
     mismatch this rule exists to prevent. */
  padding: 0;
  min-height: 27px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 13px;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
}

/* No justify-content on these rows: the label is flex: 1 1 auto below, so
   there is never any free space for it to distribute. */

/* Inputs in the value column share a width so the labels beside them line up. */
.cfg-col-left .cfg-row select,
.cfg-col-left .cfg-row input {
  flex: 0 0 auto;
  width: 104px;
  font-size: 13px;
  padding: 2px 4px;
}


.cfg-col-left .cfg-row span,
.cfg-col-right .cfg-row span {
  flex: 1 1 auto;
  opacity: 0.92;
}

@media (max-width: 1100px) {
  .cfg-col { column-count: 1; }
}

/* Narrow enough that a fixed height would trap the page; let it scroll. */
@media (max-width: 760px) {
  .cfg-stack { height: auto; }
  .cfg-table { flex-direction: column; gap: 0; }
}

.preview-bg {
  display: flex;
  gap: 6px;
  align-items: center;
  margin: 0;
  font-size: 12px;
  opacity: 0.85;
}

.preview-bg button {
  padding: 4px 10px;
  font-size: 12px;
}

.preview-bg button[aria-pressed="true"] {
  outline: 2px solid var(--cfg-accent, #9147ff);
  outline-offset: 1px;
}

.cfg-link {
  margin: 0 0 14px;
}

.cfg-link .cfg-row {
  align-items: center;
  gap: 10px;
}

.cfg-warn {
  margin: 0 0 8px;
  color: #ff8f8f;
  font-size: 13px;
}


/* Hints are read by assistive tech through aria-describedby and shown as a
   tooltip; they must not take space in a row built to a fixed height. */
.cfg-hint {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}