/* ========================================================================== 
   STANDBY INFOGRAPHIC BUILDER — STYLESHEET
   ========================================================================== 
   This file is deliberately organized and heavily commented for easy editing.

   QUICK BRAND CHANGES:
   1. Builder UI colors live in :root below.
   2. The open-source typeface library is declared in the Google Fonts import
      immediately below this comment. Change that one line to alter the library.
   3. Each field's live font, bold, italic, and color choices are applied by
      app.js as inline presentation styles.
   4. Title/subheading/description/countdown/footer sizes are in SECTION 7.
   5. Ratio-specific adjustments are in SECTION 8.
   6. Presentation/fullscreen behavior is in SECTION 9.
   ========================================================================== */

/* --------------------------------------------------------------------------
   OPEN-SOURCE TYPEFACE LIBRARY
   --------------------------------------------------------------------------
   These 12 families are served by Google Fonts and are all open-source.
   Only the font files actually needed by the rendered page are downloaded.
   If the machine is offline, the fallbacks in app.js / this stylesheet are
   used automatically.
   -------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Cabin:ital,wght@0,400;0,700;1,400;1,700&family=Fira+Sans:ital,wght@0,400;0,700;1,400;1,700&family=IBM+Plex+Mono:ital,wght@0,400;0,700;1,400;1,700&family=IBM+Plex+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Inter:ital,wght@0,400;0,700;1,400;1,700&family=Lato:ital,wght@0,400;0,700;1,400;1,700&family=Merriweather:ital,wght@0,400;0,700;1,400;1,700&family=Montserrat:ital,wght@0,400;0,700;1,400;1,700&family=Nunito+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Source+Sans+3:ital,wght@0,400;0,700;1,400;1,700&family=Source+Serif+4:ital,wght@0,400;0,700;1,400;1,700&display=swap');

/* --------------------------------------------------------------------------
   1. GLOBAL VARIABLES / BUILDER THEME
   -------------------------------------------------------------------------- */
:root {
  --ui-bg: #0b0e12;
  --ui-panel: #14191f;
  --ui-panel-2: #1a2027;
  --ui-line: #2a333d;
  --ui-text: #edf2f7;
  --ui-muted: #9aa8b6;
  --ui-accent: #5cc5df;
  --ui-control: #202832;
  --ui-radius: 12px;
  --ui-shadow: 0 18px 50px rgba(0, 0, 0, .28);

  /* The builder preview changes this number in JavaScript. */
  --stage-ratio-value: 1.7777778;

  /* Livestream graphic defaults. These can also be adjusted in the builder. */
  --stage-overlay: .18;
  --stage-logo-width: 18%;
  --stage-content-pad: 6%;
}

/* --------------------------------------------------------------------------
   2. RESET / BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { min-height: 100%; background: var(--ui-bg); }
body {
  min-height: 100vh;
  margin: 0;
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ui-text);
  background: var(--ui-bg);
}
button, input, select, textarea { font: inherit; }
button, select, input[type="file"], input[type="color"], input[type="range"] { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--ui-accent);
  outline-offset: 2px;
}
code {
  padding: .1em .35em;
  border-radius: 4px;
  background: rgba(255,255,255,.07);
}
.is-hidden { display: none !important; }
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* --------------------------------------------------------------------------
   3. APP LAYOUT
   -------------------------------------------------------------------------- */
.app-shell {
  display: grid;
  grid-template-columns: minmax(300px, 380px) minmax(0, 1fr);
  min-height: 100vh;
}
.control-panel {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--ui-panel);
  border-right: 1px solid var(--ui-line);
  z-index: 5;
}
.control-panel__header {
  padding: 22px 24px 18px;
  border-bottom: 1px solid var(--ui-line);
}
.control-panel__header h1 {
  margin: 3px 0 8px;
  font-size: 1.35rem;
  line-height: 1.15;
}
.control-panel__header p { margin: 0; color: var(--ui-muted); line-height: 1.45; font-size: .92rem; }
.eyebrow { text-transform: uppercase; letter-spacing: .13em; font-size: .7rem !important; font-weight: 700; color: var(--ui-accent) !important; }
.control-scroll { overflow-y: auto; padding: 18px; }
.control-group {
  padding: 16px;
  margin: 0 0 14px;
  background: var(--ui-panel-2);
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius);
}
.control-group h2 { margin: 0 0 14px; font-size: .95rem; }
.group-heading-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.field-label { display: block; margin: 11px 0 6px; font-size: .79rem; font-weight: 650; color: #cdd6df; }
.field-help { margin: 7px 0 0; color: var(--ui-muted); font-size: .72rem; line-height: 1.45; }
.field-help--intro { margin: -4px 0 12px; }
.save-status { min-height: 1.1em; margin: 8px 0 0; color: var(--ui-muted); font-size: .7rem; line-height: 1.35; }
.text-field-editor {
  padding: 12px 0 14px;
  border-top: 1px solid var(--ui-line);
}
.text-field-editor:first-of-type { border-top: 0; padding-top: 0; }
.text-field-editor--first { border-top: 0; padding-top: 0; }
.text-field-editor--timer { padding-bottom: 4px; }
.type-controls {
  display: grid;
  grid-template-columns: minmax(128px, 1fr) auto auto 60px;
  gap: 7px;
  align-items: end;
  margin-top: 8px;
}
.type-control { min-width: 0; }
.type-control > span,
.type-toggle > span {
  display: block;
  margin-bottom: 4px;
  color: var(--ui-muted);
  font-size: .66rem;
  line-height: 1.1;
}
.type-control select { padding: 7px 8px; font-size: .75rem; }
.type-control--color input[type="color"] { min-height: 33px; }
.type-toggle {
  min-width: 42px;
  display: grid;
  justify-items: center;
  align-content: end;
  color: var(--ui-muted);
  font-size: .68rem;
}
.type-toggle input {
  width: 18px;
  height: 18px;
  margin: 3px 0 7px;
  accent-color: var(--ui-accent);
}
input[type="text"], input[type="number"], select, textarea {
  width: 100%;
  color: var(--ui-text);
  background: var(--ui-control);
  border: 1px solid #394552;
  border-radius: 8px;
  padding: 9px 10px;
}
textarea { resize: vertical; min-height: 82px; }
input[type="file"] { width: 100%; color: var(--ui-muted); font-size: .8rem; }
input[type="range"] { width: 100%; accent-color: var(--ui-accent); }
input[type="color"] { width: 100%; min-height: 38px; border: 1px solid #394552; border-radius: 8px; background: var(--ui-control); padding: 3px; }
.inline-field { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; }
.color-grid, .time-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.time-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 8px; }
.time-grid label span { display: block; color: var(--ui-muted); font-size: .7rem; margin-bottom: 4px; }
.switch-label { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--ui-muted); }
.switch-label input { accent-color: var(--ui-accent); }

.button-row { display: flex; gap: 8px; margin-top: 12px; }
.button-row--wrap { flex-wrap: wrap; }
.button {
  appearance: none;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 8px 12px;
  background: var(--ui-accent);
  color: #071217;
  font-weight: 750;
  font-size: .8rem;
}
.button--secondary { background: #27313c; border-color: #3b4856; color: var(--ui-text); }
.button--quiet { background: transparent; border-color: #3b4856; color: var(--ui-muted); }
.button:hover { filter: brightness(1.08); }
.file-button { display: inline-flex; align-items: center; justify-content: center; }

/* --------------------------------------------------------------------------
   4. PREVIEW WORKSPACE
   -------------------------------------------------------------------------- */
.preview-area {
  min-width: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 22px;
  background:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
    #0d1116;
  background-size: 24px 24px;
}
.preview-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.preview-toolbar__label { color: var(--ui-muted); font-size: .82rem; }
.preview-toolbar__actions { display: flex; gap: 8px; }
.ratio-badge { display: inline-block; margin-left: 8px; padding: 3px 7px; background: #222b34; color: #dbe4ec; border-radius: 999px; font-size: .7rem; }
.stage-wrap {
  width: 100%;
  flex: 1;
  display: grid;
  place-items: center;
  min-height: 0;
}
.presentation-hint { margin: 12px 0 0; color: var(--ui-muted); font-size: .75rem; text-align: center; }

/* --------------------------------------------------------------------------
   5. THE LIVESTREAM STAGE / CANVAS
   --------------------------------------------------------------------------
   The stage uses CSS "aspect-ratio" so it always retains the chosen shape.
   It is also a size container, which lets typography scale with the stage
   itself rather than with the browser window. This is ideal for previews and
   browser-source capture at very different resolutions.
   -------------------------------------------------------------------------- */
.stage {
  position: relative;
  isolation: isolate;
  width: min(100%, 1400px);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  container-type: inline-size;
  background: #101820;
  color: #ffffff;
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
  box-shadow: var(--ui-shadow);
}
.stage__background,
.stage__overlay {
  position: absolute;
  inset: 0;
}
.stage__background {
  z-index: -3;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.stage__overlay {
  z-index: -2;
  background: rgba(0, 0, 0, var(--stage-overlay));
}
.stage__content {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: minmax(0, .8fr) auto minmax(0, .8fr);
  padding: var(--stage-content-pad);
}
.stage__header { display: flex; align-items: flex-start; justify-content: center; min-height: 0; }
.client-logo {
  display: block;
  width: var(--stage-logo-width);
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 3px 16px rgba(0,0,0,.24));
}
.stage__main {
  align-self: center;
  width: min(88%, 1180px);
  margin-inline: auto;
  text-align: center;
}
.stage[data-align="left"] .stage__main,
.stage[data-align="left"] .stage__footer { text-align: left; }
.stage[data-align="left"] .stage__main { margin-left: 0; margin-right: auto; }
.stage[data-align="left"] .stage__header { justify-content: flex-start; }
.stage__footer { align-self: end; text-align: center; }

/* --------------------------------------------------------------------------
   6. OPTIONAL ELEMENT BEHAVIOR
   -------------------------------------------------------------------------- */
.countdown { margin-top: 4.2cqw; }
.event-footer:empty,
.event-description:empty,
.event-title:empty,
.event-subheading:empty,
.countdown__label:empty { display: none; }

/* --------------------------------------------------------------------------
   7. LIVESTREAM TYPOGRAPHY
   --------------------------------------------------------------------------
   Fallback sizes are declared first. Container-query units (cqw) then scale
   text proportionally to the stage width in modern Chrome/Edge/Firefox/Safari.
   -------------------------------------------------------------------------- */
.event-subheading {
  margin: 0 0 .65em;
  color: #9bd9ea;
  font-size: 1.15rem;
  font-size: clamp(11px, 2.05cqw, 42px);
  font-weight: 720;
  line-height: 1.2;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.event-title {
  margin: 0;
  font-size: 3rem;
  font-size: clamp(24px, 5.25cqw, 104px);
  font-weight: 780;
  line-height: 1.01;
  letter-spacing: -.035em;
  text-wrap: balance;
  text-shadow: 0 3px 24px rgba(0,0,0,.18);
}
.event-description {
  max-width: 66ch;
  margin: 1.4em auto 0;
  font-size: 1.15rem;
  font-size: clamp(12px, 1.75cqw, 34px);
  line-height: 1.48;
  color: #d8dde2;
  text-wrap: pretty;
}
.stage[data-align="left"] .event-description { margin-left: 0; }
.countdown__label {
  margin: 0 0 .25em;
  color: #c5cbd1;
  font-size: .95rem;
  font-size: clamp(11px, 1.5cqw, 30px);
  font-weight: 650;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.countdown__time {
  margin: 0;
  color: #ffffff;
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
  font-size: 3.5rem;
  font-size: clamp(28px, 6.4cqw, 124px);
  font-weight: 720;
  line-height: 1;
  letter-spacing: -.045em;
  font-variant-numeric: tabular-nums;
}
.countdown__time--message {
  max-width: 18ch;
  margin-inline: auto;
  font-size: 2rem;
  font-size: clamp(20px, 3.7cqw, 72px);
  line-height: 1.08;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.countdown[data-zero-message="true"] .countdown__label { display: none; }
.stage[data-align="left"] .countdown__time--message { margin-left: 0; margin-right: auto; }
.event-footer {
  margin: 0;
  color: #c5cbd1;
  font-size: .92rem;
  font-size: clamp(10px, 1.32cqw, 27px);
  line-height: 1.35;
}

/* --------------------------------------------------------------------------
   8. ASPECT-RATIO-SPECIFIC COMPOSITION
   -------------------------------------------------------------------------- */
.stage[data-ratio="16:9"] { aspect-ratio: 16 / 9; --stage-content-pad: 5.4%; }
.stage[data-ratio="1:1"] { aspect-ratio: 1 / 1; --stage-content-pad: 7%; }
.stage[data-ratio="9:16"] {
  aspect-ratio: 9 / 16;
  --stage-content-pad: 8%;
}
.stage[data-ratio="9:16"] .stage__content { grid-template-rows: minmax(0, .75fr) auto minmax(0, .75fr); }
.stage[data-ratio="9:16"] .stage__main { width: 100%; }
.stage[data-ratio="9:16"] .event-subheading { font-size: clamp(11px, 3.15cqw, 38px); }
.stage[data-ratio="9:16"] .event-title { font-size: clamp(25px, 9.4cqw, 106px); line-height: 1.04; }
.stage[data-ratio="9:16"] .event-description { font-size: clamp(12px, 3.35cqw, 36px); }
.stage[data-ratio="9:16"] .countdown { margin-top: 7cqw; }
.stage[data-ratio="9:16"] .countdown__label { font-size: clamp(11px, 2.7cqw, 30px); }
.stage[data-ratio="9:16"] .countdown__time { font-size: clamp(30px, 11.6cqw, 128px); }
.stage[data-ratio="9:16"] .countdown__time--message { font-size: clamp(22px, 6.8cqw, 70px); }
.stage[data-ratio="9:16"] .event-footer { font-size: clamp(10px, 2.55cqw, 28px); }
.stage[data-ratio="9:16"] .client-logo { width: calc(var(--stage-logo-width) * 1.65); }

.stage[data-ratio="1:1"] .event-title { font-size: clamp(24px, 7.35cqw, 90px); }
.stage[data-ratio="1:1"] .event-description { font-size: clamp(12px, 2.4cqw, 30px); }
.stage[data-ratio="1:1"] .countdown__time { font-size: clamp(30px, 8.5cqw, 105px); }
.stage[data-ratio="1:1"] .countdown__time--message { font-size: clamp(21px, 5.2cqw, 64px); }
.stage[data-ratio="1:1"] .client-logo { width: calc(var(--stage-logo-width) * 1.25); }

/* --------------------------------------------------------------------------
   9. PRESENTATION / FULLSCREEN MODE
   -------------------------------------------------------------------------- */
body.presentation-mode { overflow: hidden; background: #000; }
body.presentation-mode .app-shell { display: block; min-height: 100vh; }
body.presentation-mode .control-panel,
body.presentation-mode .preview-toolbar,
body.presentation-mode .presentation-hint { display: none; }
body.presentation-mode .preview-area {
  width: 100vw;
  height: 100vh;
  min-height: 0;
  padding: 0;
  display: grid;
  place-items: center;
  background: #000;
}
body.presentation-mode .stage-wrap { width: 100vw; height: 100vh; display: grid; place-items: center; }
body.presentation-mode .stage {
  width: min(100vw, calc(100vh * var(--stage-ratio-value)));
  max-width: none;
  max-height: 100vh;
  box-shadow: none;
}
.exit-presentation {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 50;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  background: rgba(0,0,0,.18);
  color: rgba(255,255,255,.45);
  padding: 5px 8px;
  font: 500 10px/1 system-ui, sans-serif;
  letter-spacing: .02em;
  opacity: .11;
  transition: opacity .2s ease, background .2s ease;
}
.exit-presentation:hover, .exit-presentation:focus-visible {
  opacity: .55;
  background: rgba(0,0,0,.35);
}
body.presentation-mode .exit-presentation { display: block !important; }

/* --------------------------------------------------------------------------
   10. RESPONSIVE BUILDER UI
   -------------------------------------------------------------------------- */
@media (max-width: 980px) {
  .app-shell { grid-template-columns: 1fr; }
  .control-panel { position: relative; height: auto; border-right: 0; border-bottom: 1px solid var(--ui-line); }
  .control-scroll { overflow: visible; }
  .preview-area { min-height: 70vh; }
}
@media (max-width: 560px) {
  .preview-area { padding: 12px; }
  .preview-toolbar { align-items: flex-start; flex-direction: column; }
  .preview-toolbar__actions { width: 100%; }
  .preview-toolbar__actions .button { flex: 1; }
  .color-grid { grid-template-columns: 1fr; }
  .time-grid { gap: 6px; }
  .type-controls { grid-template-columns: minmax(120px, 1fr) auto auto 52px; gap: 5px; }
}

/* Respect user/system reduced-motion preference. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}