/**
 * Subathon builder page — page-scoped styling.
 * The OBS overlay itself (view.php + style.css) is deliberately NOT styled from
 * here; it has to stay self-contained and transparent for the browser source.
 */

/**
 * Sticky preview column. It has to be THIS element (the grid item) rather than
 * the preview inside it: a sticky box is constrained to its parent's height, so
 * sticking the inner preview meant it stopped travelling as soon as the wrapper
 * ended — roughly halfway down the settings.
 */
.subaton-side {
  position: sticky;
  top: calc(var(--header-height) + var(--space-6));
  align-self: start;
}
@media (max-width: 900px) { .subaton-side { position: static; } }

/* Screenshot behind the transparent overlay, so the preview reads as "this is
   what it looks like on top of your gameplay" rather than a black box. */
.subaton-preview {
  aspect-ratio: 16 / 9;
  background-image: url("/pages/stream-settings/games/minecraft.jpg");
  background-size: cover;
  background-position: center;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--glass-border);
}
.subaton-preview iframe { width: 100%; height: 100%; border: 0; display: block; }

.subaton-tip {
  margin-top: var(--space-6);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
}
.subaton-tip h3 { margin: 0 0 var(--space-2); font-size: 0.95rem; }
.subaton-tip h3 i { color: var(--color-primary-500); margin-inline-end: var(--space-2); }
.subaton-tip p { margin: 0; color: var(--color-text-muted); font-size: 0.9rem; line-height: 1.8; }

.control-unit { color: var(--color-text-muted); font-size: 0.85rem; }
.control-group-note { font-weight: 400; color: var(--color-text-muted); font-size: 0.8em; }

/* ---------- Donation platform switch ---------- */
.platform-switch { display: flex; gap: var(--space-2); margin-bottom: var(--space-4); }
.platform-switch input { position: absolute; opacity: 0; pointer-events: none; }
.platform-switch label {
  flex: 1;
  text-align: center;
  padding: 0.5rem 0.9rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}
.platform-switch label:hover { color: var(--color-text); border-color: var(--glass-border-hover); }
.platform-switch input:checked + label {
  color: var(--color-primary-500);
  border-color: var(--color-primary-500);
  background: var(--color-primary-100);
}
.platform-switch input:focus-visible + label { outline: 2px solid var(--color-primary-500); outline-offset: 2px; }

/**
 * Platform-specific copy. The page shows both variants in the markup and hides
 * the irrelevant one, which is how the original did it too — it keeps the two
 * wordings side by side in the source instead of building strings in JS.
 */
#designerLayout[data-platform="sl"] .se { display: none; }
#designerLayout[data-platform="se"] .sl { display: none; }

.subaton-warn {
  padding: var(--space-4);
  margin-bottom: var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-warning);
  background: rgba(217, 119, 6, 0.1);
  font-size: 0.85rem;
  line-height: 1.7;
  color: var(--color-text-muted);
}
.subaton-warn p { margin: 0 0 var(--space-2); }
.subaton-warn p:last-child { margin-bottom: 0; }
.subaton-warn b { color: var(--color-text); }

/* ---------- Inline "how do I find this?" guide ---------- */
.info-btn {
  background: none;
  border: none;
  padding: 0;
  margin-inline-start: var(--space-1);
  color: var(--color-text-faint);
  cursor: pointer;
  font-size: 0.95rem;
  transition: color var(--transition-fast);
}
.info-btn:hover, .info-btn[aria-expanded="true"] { color: var(--color-primary-500); }

.info-panel {
  margin: 0 0 var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--glass-border);
  background: var(--color-bg);
  font-size: 0.85rem;
  line-height: 1.8;
  color: var(--color-text-muted);
}
.info-panel[hidden] { display: none; }
.info-panel strong { color: var(--color-text); display: block; margin-bottom: var(--space-2); }
.info-panel ol { margin: 0; padding-inline-start: 1.2em; }
.info-panel li { margin-bottom: var(--space-3); }
.info-panel li:last-child { margin-bottom: 0; }
.info-panel img {
  display: block;
  width: 100%;
  margin-top: var(--space-2);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
}

/* ---------- "What is this?" explainer ---------- */
.section-lede { max-width: 60ch; margin-inline: auto; color: var(--color-text-muted); line-height: 1.8; }

.explain-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-4); }

.explain-step {
  display: flex;
  align-items: flex-start;
  gap: var(--space-6);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.explain-step:hover { border-color: var(--glass-border-hover); background: var(--glass-bg-raised); }

.explain-num {
  flex: 0 0 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--color-primary-100);
  border: 1px solid var(--color-primary-500);
  color: var(--color-primary-500);
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
}

.explain-body h3 { margin: 0 0 var(--space-2); display: flex; align-items: center; gap: var(--space-3); font-size: 1.1rem; }
.explain-body h3 i { color: var(--color-primary-500); font-size: 0.95em; }
.explain-body p { margin: 0; color: var(--color-text-muted); line-height: 1.85; }

@media (max-width: 560px) {
  .explain-step { flex-direction: column; gap: var(--space-4); }
}

.explain-req {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  margin-top: var(--space-6);
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-warning);
  background: rgba(217, 119, 6, 0.1);
}
.explain-req > i { color: var(--color-warning); font-size: 1.1rem; margin-top: 0.15rem; }
.explain-req p { margin: 0; color: var(--color-text-muted); line-height: 1.8; font-size: 0.92rem; }
.explain-req b { color: var(--color-text); }

/* Visually hidden but still announced by screen readers. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}