/*
Theme Name: TV Display Theme
Theme URI:
Author: Steve Keightley
Author URI: www.linkedin.com/in/steven-keightley
Description: A custom theme to display on a TV
Version: 5.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tv-display-theme
*/

/*
Root styles
*/

:root {
  --primary-color: #d6ae61; /* Default primary color */
  --primary-color-overlay: rgb(214 174 97 / 50%);
  --primary-hover-color: #b88e40;
  --secondary-color: #fff; /* Default secondary color */
  --tertiary-color: #6b6b6b; /* Default tertiary color */
  --background-color: #000; /* Default background color */

  /* Scaling factors */
  --compact-scale: 0.9; /* 90% of original */
  --very-compact-scale: 0.8; /* 80% of original */
  --ultra-compact-scale: 0.7; /* 70% of original */

  /* Base sizes (equivalent to your normal display) */
  --class-font-base: 48px; /* Regular content */
  --class-font-h1: calc(var(--class-font-base) * 2.2); /* Main title */
  --class-font-h2: calc(var(--class-font-base) * 1.25); /* Section headings */
  --class-font-h3: calc(var(--class-font-base) * 1); /* Section headings */
  --class-font-block: calc(
    var(--class-font-base) * 1.1
  ); /* Warmup/format/class blocks */

  --class-font-small: calc(var(--class-font-base) * 0.75);

  /* Semantic display aliases. Keep these synced with pixel-size display rules. */
  --display-font-base: var(--class-font-base);
  --display-font-title: var(--class-font-h1);
  --display-font-section-title: var(--class-font-h2);
  --display-font-body: var(--class-font-block);
  --display-font-small: var(--class-font-small);

  /* Spacing */
  --class-line-height: 1.15;
  --class-space-0: 0px;
  --class-space-1: 4px; /* tiny */
  --class-space-2: 6px; /* small */
  --class-space-3: 8px; /* base */
  --class-space-4: 12px; /* medium */
  --class-space-5: 18px; /* large */
  --class-space-6: 20px; /* x-large */
  --class-space-7: 24px;
  --class-space-8: 32px;

  /* Header and footer height variable */
  --class-header-height: 120px;
  --class-footer-height: 140px;

  /* Compact letter and word spacing for grid layout */
  --class-letter-spacing-tight: -0.5px;
  --class-word-spacing-tight: -2px;

  /* Logo sizing */
  --class-logo-max-width: 200px;
  --class-logo-max-height: 120px;
  --logo-surface-bg: rgb(255 255 255 / 80%);
  --logo-surface-border: rgb(255 255 255 / 12%);
  --logo-surface-shadow: 0 10px 26px rgb(0 0 0 / 28%);
  --logo-surface-radius: 20px;
  --logo-surface-padding: 10px;
  --logo-footer-padding-extra: 2px;

  /* buttons */
  --class-button-padding-y: 30px;
  --class-button-padding-x: 24px;
  --class-button-font-size: 20px;
  --class-button-border-radius: 16px; /* Was 1rem = 16px */
  --class-button-group-margin: 32px; /* 2rem = 32px */
  --class-button-divider-height: 64px; /* 4rem = 64px */
  --class-button-landscape-width: 224px; /* 14rem = 224px */
  --class-button-landscape-height: 96px; /* 6rem = 96px */
  --class-button-portrait-width: 128px; /* 8rem = 128px */
  --class-button-portrait-height: 160px; /* 10rem = 160px */
  --class-button-circle-padding: 10px;
  --class-button-circle-size: 60px;
  --class-button-circle-border: 2px;

  /* promo content */
  --class-promo-qr: 120px;

  /* screen meta */
  --class-screen-meta-padding-y: 6px;
  --class-screen-meta-padding-x: 10px;
  --class-screen-meta-border-radius: 6px;
  --class-screen-meta-gap: 16px; /* 1rem = 16px */
  --class-screen-meta-offset: 10px;
  --class-screen-meta-font-size: 20px;

  /* Manual refresh, QR code and timer */
  --class-manual-refresh-size: 100px;
  --class-manual-refresh-border: 2px;
  --class-manual-refresh-border-radius: 8px;
  --refresh-button-font-size: 20px;
  --class-qr-size: 100px;
  --class-qr-padding: 4px;
  --class-qr-border-radius: 8px;
  --class-qr-label-font-size: 12px; /* 0.75rem = 12px */
  --class-qr-label-margin: 4px; /* 0.25rem = 4px */
  --class-timer-size: 30px;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: Arial, sans-serif;
  color: var(--secondary-color);
}

/* =======================
    Rotated Mode Styles
     ======================= */

body:not(.rotated) {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

body.rotated {
  width: 100vw;
  height: 100vh;
  overflow: hidden; /* Prevent scrolling completely */
  display: flex;
  justify-content: center;
  align-items: center;
}

.preview-viewport.rotated .rotated-container {
  position: relative;
  width: 100%;
  height: 100%;
  transform: none;
  top: auto;
  left: auto;
}

.preview-viewport.rotated .main-wrapper,
.preview-viewport.rotated .main-content {
  height: 100%;
  overflow: auto;
}

/* Landscape mode - normal container */
body:not(.rotated) .rotated-container {
  width: 100vw;
  height: 100vh;
  display: grid; /* Instead of flex */
  grid-template-rows: auto 1fr auto; /* header, content, footer */
}

body.rotated .rotated-container {
  display: flex;
  flex-direction: column;
  width: 100vh;
  height: 100vw;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(90deg);
  transform-origin: center center;
  overflow: hidden;
}

body.rotated .main-wrapper {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  overflow: hidden;
  height: 100%; /* key: constrain height to rotated-container */
  box-sizing: border-box;
}

body:not(.rotated) .main-wrapper {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  overflow: hidden;
  height: 100%;
  box-sizing: border-box;
}

.main-content {
  flex: 1 1 auto;
  padding: 1rem;
  box-sizing: border-box;
}

/* Base styles */
body.rotated .main-content {
  flex: 1 1 auto;
  height: 100%;
  display: block;
  overflow: hidden;
  box-sizing: border-box;
  line-height: var(--class-line-height);
}

/* Landscape mode */
body:not(.rotated) .main-content {
  flex: 1 1 auto;
  height: 100%;
  display: block;
  overflow: hidden;
  box-sizing: border-box;
  line-height: var(--class-line-height);
}

body.class-display header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

body.class-display footer {
  height: var(--class-footer-height);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

body.class-display footer .footer-logo,
body.class-display footer h1 {
  transform: translateY(calc(-1 * var(--footer-logo-align-offset, 10px)));
}

body.rotated .main-wrapper,
body.rotated .main-content {
  min-height: 0;
}

body:not(.rotated) .main-wrapper,
body:not(.rotated) .main-content {
  min-height: 0;
}

.footer-logo img {
  max-width: var(--class-logo-max-width);
  max-height: var(--class-logo-max-height);
}

.footer-logo,
.promo-list .big-logo {
  background: var(--logo-surface-bg);
  border: 1px solid var(--logo-surface-border);
  box-shadow: var(--logo-surface-shadow), var(--logo-surface-edge-shadow, none);
  border-radius: var(--logo-surface-radius);
  padding: var(--logo-surface-padding);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.footer-logo {
  padding-bottom: calc(var(--logo-surface-padding) + var(--logo-footer-padding-extra, 6px));
  width: var(--class-manual-refresh-size);
  height: var(--class-manual-refresh-size);
  box-sizing: border-box;
}

.tvd-logo-surface-disabled .footer-logo,
.tvd-logo-surface-disabled .promo-list .big-logo {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

.tvd-logo-assist-outline .footer-logo img,
.tvd-logo-assist-outline .promo-list .big-logo img {
  filter: drop-shadow(0 0 6px rgb(255 255 255 / 75%))
    drop-shadow(0 0 2px rgb(255 255 255 / 60%));
}

.tvd-logo-assist-invert .footer-logo img,
.tvd-logo-assist-invert .promo-list .big-logo img {
  filter: invert(1) brightness(1.1) contrast(1.1);
}

.tvd-logo-assist-invert.tvd-logo-assist-outline .footer-logo img,
.tvd-logo-assist-invert.tvd-logo-assist-outline .promo-list .big-logo img {
  filter: invert(1) brightness(1.1) contrast(1.1)
    drop-shadow(0 0 6px rgb(255 255 255 / 75%))
    drop-shadow(0 0 2px rgb(255 255 255 / 60%));
}

/* =======================
     Preview banner
     ======================= */

.preview-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  padding: 1rem;
  background-color: var(--background-color);
  color: var(--secondary-color);
  text-align: center;
  box-shadow: 0 2px 5px rgb(0 0 0 / 10%);
  transform: none !important; /* in case it inherits any transforms */
  font-size: 1.2rem;
  opacity: 0.5;
}

/* =======================
     Fading Section
     ======================= */

.fade-wrapper {
  opacity: 1;
  transition: opacity 0.4s ease-in-out;
}

.fade-wrapper:not(.loaded) {
  opacity: 0;
}

/* Both rotated (portrait) and landscape modes need flex layout */
body.rotated .fade-wrapper,
body:not(.rotated) .fade-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.fade-wrapper.fading-out {
  opacity: 0;
}

/* Section Headings */
h2 {
  color: var(--primary-color);
  font-size: var(--class-font-h2);
  margin-top: var(--class-space-2);
  margin-bottom: var(--class-space-2);
}

h3 {
  color: var(--secondary-color);
  font-size: var(--class-font-h3);
  margin-top: var(--class-space-2);
  margin-bottom: var(--class-space-2);
}

/* Lists */
ul {
  list-style-position: inside;
  padding-left: var(--class-space-5);
  margin: var(--class-space-2) var(--space-0) var(--class-space-2);
}

ul li {
  margin: var(--class-space-1) var(--space-0);
}

/* =======================
     Promo list of slide section
     ======================= */

/* Wrapper for all promo items */
.promo-list {
  position: relative;
  height: 100%;
  width: 96%;
  max-width: 1080px;
  margin: var(--class-space-4) auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  border: var(--class-space-1) solid var(--primary-color);
  border-radius: var(--class-space-5);
  padding: var(--class-space-7);
  color: var(--secondary-color);
  box-sizing: border-box;
  overflow: hidden;
}

body:not(.rotated) .promo-list {
  position: relative;
  height: 100%;
  width: 96%;
  max-width: none;
  margin: var(--class-space-4) auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  border: var(--class-space-1) solid var(--primary-color);
  border-radius: var(--class-space-5);
  padding: var(--class-space-7);
  color: var(--secondary-color);
  box-sizing: border-box;
  overflow: hidden;
}

.promo-item {
  position: relative;
}

.promo-page {
  display: none;
}

.promo-page.active {
  display: block;
}

.promo-content {
  clear: none; /* Allow wrapping */
}

.promo-heading h2 {
  font-size: var(--class-font-h2);
  margin: 0 0 var(--class-space-2) 0;
  color: var(--primary-color);
}

/* Keep message full width */
.promo-content p,
.promo-content li {
  font-size: var(--class-font-block);
  line-height: var(--class-line-height);
  color: var(--secondary-color);
}

.promo-content ul,
.promo-content ol {
  list-style-position: outside; /* bullets outside text block */
  padding-left: 1.5em; /* enough space for bullet + gap */
  margin: var(--class-space-8) 0;
}

/* Legacy list style - only apply when NOT in a message-slide */
.promo-item .promo-qr {
  align-self: start;
  float: right;
  margin: 0;
  margin-left: var(--class-space-6);
  margin-bottom: var(--class-space-6);
}

.promo-item .promo-qr img {
  display: block;
  width: var(--class-promo-qr); /* Adjust size as needed */
  height: var(--class-promo-qr);
  background: white; /* White background for better scanning */
  padding: var(--class-space-3);
  border-radius: var(--class-space-4);
  box-shadow: 0 var(--class-space-1) var(--class-space-4) rgb(0 0 0 / 30%); /* Subtle shadow */
}

.promo-list .big-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  width: fit-content;
  max-width: 90%;
  margin: 0 auto;
  padding-top: var(--class-space-6);
  padding-bottom: var(--class-space-6);
}

.promo-list .big-logo img {
  max-width: 300px;
  height: auto;
  max-height: 200px;
}

.message-slide {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.message-slide.active {
  display: flex;
  opacity: 1;
}

.slide-content {
  z-index: 1;
  max-width: 90%;
  padding: 2rem;
  text-align: center;
}

.message-slide .image-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; /* Put it behind the text */
}

.message-slide .image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Fills space, crops if needed */
  object-position: center; /* Centers the crop */
}

/* Optional readability overlay driven by CSS variable (set inline) */
.message-slide .image-wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / var(--image-filter-opacity, 0.3));
  z-index: 1;
}

.message-slide .image-wrapper img {
  position: relative;
  z-index: 0;
}

/* Make sure text is above the overlay */
.slide-header,
.slide-body {
  color: white;
  text-shadow: 2px 2px 4px rgb(0 0 0 / 80%);
}

.slide-header h1 {
  font-size: var(--display-font-title);
  color: var(--primary-color);
}

.slide-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

.text-content {
  font-size: var(--display-font-body);
  line-height: var(--class-line-height);
}

.message-slide .qr-wrapper {
  position: absolute;
  bottom: 2rem; /* Distance from bottom */
  left: 50%;
  transform: translateX(-50%); /* Center horizontally */
  z-index: 10; /* Above image and text */
}

.qr-wrapper .qr-code img {
  display: block;
  width: var(--class-promo-qr); /* Adjust size as needed */
  height: var(--class-promo-qr);
  background: white; /* White background for better scanning */
  padding: var(--class-qr-padding);
  border-radius: var(--class-qr-border-radius);
  box-shadow: 0 4px 8px rgb(0 0 0 / 30%); /* Subtle shadow */
}

.message-slide .message-content {
  text-align: center; /* Keep general text centered */
}

.message-slide .message-content ul {
  text-align: left;
  list-style: none;
  margin: 0;
  padding: 0;
}

.message-slide .message-content li {
  position: relative;
  padding-left: 1em;
}

.message-slide .message-content li::before {
  content: "•";
  position: absolute;
  left: 0;
}

/* =======================
     Dividers
     ======================= */

/* Warm-Up Divider */
.warmup-divider {
  width: 90%;
  max-width: 1200px;
  height: 2px;
  background-color: rgb(255 255 255 / 20%);
  margin: var(--class-space-1) auto;
  align-self: center;
}

/* Warm-Up Divider */
.minimal-divider {
  border: none;
  border-top: 1px solid var(--primary-hover-color);
  margin: var(--class-space-6);
  width: 100%;
}

/* =======================
     4️⃣ Class Layout & Blocks
     ======================= */

/* Main Class Container */
.class-payload-background {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  pointer-events: none;
}

.class-payload-background::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / var(--class-background-filter-opacity, 0.5));
}

.class-content {
  width: 100%;
  max-width: 1080px;
  margin-top: auto;
  margin-bottom: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* Layout variable map: layouts override these to keep selectors minimal. */
  /* Row/Block geometry */
  --row-justify: flex-start;
  --block-width: 50%;
  --block-min-width: 40%;
  /* Per-block alignment */
  --block-align: flex-start;
  --block-text-align: left;
  --block-letter-spacing: normal;
  --block-word-spacing: normal;
  /* Section-specific overrides */
  --warmup-align: var(--block-align);
  --warmup-text-align: var(--block-text-align);
  --format-align: var(--block-align);
  --format-text-align: var(--block-text-align);
  --finisher-align: var(--block-align);
  --finisher-text-align: var(--block-text-align);
  /* Row 2 controls (blocks 1-2 row) */
  --row-2-direction: row;
  --row-2-justify: var(--row-justify);
  --row-2-align: stretch;
  --row-2-block-width: var(--block-width);
  --row-2-block-min-width: var(--block-min-width);
  --row-2-block-align: var(--block-align);
  --row-2-block-text-align: var(--block-text-align);
  /* List typography scaling (grid-like layouts tighten lists) */
  --list-font-scale: 1;
  --list-line-scale: 1;
  --list-letter-spacing: normal;
  --list-word-spacing: normal;
  --list-margin-scale: 1;
}

/* Remove max-width constraint in landscape */
body:not(.rotated) .class-content {
  max-width: none; /* Let it use full width */
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--space-5);
  align-items: start;
}

body.rotated .class-content {
  height: 100%;
  box-sizing: border-box;
}

/* Hide horizontal divider in landscape */
body:not(.rotated) .warmup-divider {
  display: none;
}

/* Warmup in left column, spans all rows */
body:not(.rotated) .class-row:has(.warmup-block) {
  grid-column: 1;
  grid-row: 1 / 999; /* Span many rows */
}

/* Everything else in right column */
body:not(.rotated) .class-row:has(.format-block),
body:not(.rotated) .class-row:has(.class-block),
body:not(.rotated) .class-row:has(.finisher-block),
body:not(.rotated) .class-row:has(.timer-block) {
  grid-column: 2;
}

/* Individual Class Block */
.warmup-block,
.format-block,
.class-block,
.finisher-block {
  background: inherit;
  padding: var(--class-space-3);
  border-radius: var(--class-space-2);
  border: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;

  /* Reduce margin on smaller screens */
  margin-bottom: var(--class-space-3);
}

/* Ensure text inside blocks aligns consistently */

/* Define a row */
.class-row {
  display: flex;
  gap: var(--class-space-3);
  width: 100%;
  justify-content: var(--row-justify);
}

.class-row--block-row-2 {
  /* Row 2 can be stacked/centered in hybrid layouts. */
  flex-direction: var(--row-2-direction);
  justify-content: var(--row-2-justify);
  align-items: var(--row-2-align);
}

/* Ensure each class block inside a row takes up half */
.class-row .class-block {
  width: var(--block-width);
  min-width: var(--block-min-width);
}

.class-row--block-row-2 .class-block {
  width: var(--row-2-block-width);
  min-width: var(--row-2-block-min-width);
  align-items: var(--row-2-block-align);
  text-align: var(--row-2-block-text-align);
}

.class-row--block-row-2 .class-block h2,
.class-row--block-row-2 .class-block p,
.class-row--block-row-2 .class-block ul {
  text-align: var(--row-2-block-text-align);
}

/* Layout presets via variables (override only what changes per layout). */
.class-content.layout-2-grid,
.class-content.layout-3-grid,
.class-content.layout-4-grid,
.class-content.layout-2-pyramid,
.class-content.layout-3-pyramid,
.class-content.layout-4-pyramid,
.class-content.layout-2-hybrid,
.class-content.layout-3-hybrid,
.class-content.layout-4-hybrid {
  --block-width: 50%;
  --block-min-width: 40%;
  --block-letter-spacing: var(--class-letter-spacing-tight);
  --block-word-spacing: var(--class-word-spacing-tight);
  --list-font-scale: 0.9;
  --list-line-scale: 0.9;
  --list-letter-spacing: var(--class-letter-spacing-tight);
  --list-word-spacing: var(--class-word-spacing-tight);
  --list-margin-scale: 0.8;
}

/* Stacked layout: full-width blocks */
.class-content.layout-2-stacked,
.class-content.layout-3-stacked,
.class-content.layout-4-stacked {
  --block-width: 100%;
  --block-min-width: 100%;
}

/* Pyramid layout: center-aligned rows and text */
.class-content.layout-2-pyramid,
.class-content.layout-3-pyramid,
.class-content.layout-4-pyramid {
  --row-justify: center;
  --block-align: center;
  --block-text-align: center;
  --warmup-align: center;
  --warmup-text-align: center;
  --format-align: center;
  --format-text-align: center;
  --finisher-align: center;
  --finisher-text-align: center;
}

/* Hybrid layout: warmup/format centered, blocks 1-2 stacked/centered */
.class-content.layout-2-hybrid,
.class-content.layout-3-hybrid,
.class-content.layout-4-hybrid {
  --warmup-align: center;
  --warmup-text-align: center;
  --format-align: center;
  --format-text-align: center;
  --finisher-align: center;
  --finisher-text-align: center;
  --row-2-direction: column;
  --row-2-justify: center;
  --row-2-align: center;
  --row-2-block-width: 100%;
  --row-2-block-min-width: 100%;
  --row-2-block-align: center;
  --row-2-block-text-align: center;
}

.class-row .class-block:nth-child(1):last-child,
.class-row .warmup-block:nth-child(1):last-child,
.class-row .format-block:nth-child(1):last-child,
.class-row .finisher-block:nth-child(1):last-child {
  width: 100%;
}

/* Target a specifc layout with two blocks on first row and 1 on second */
.class-content.layout-3-grid .class-row .class-block:nth-child(1):last-child {
  width: 100% !important;
}

.class-content .class-timer {
  display: flex; /* Optional: for alignment */
  align-items: center; /* Optional: vertical centering */
  padding: var(--class-space-3);
}

/* =======================
     6️⃣ Typography (Headings, Lists, and Text)
     ======================= */

#class-header .class-title {
  height: var(--class-header-height);
  color: var(--primary-color);

  /* Better responsive scaling for titles */
  font-size: calc(var(--class-font-h1) * 0.75 * var(--class-title-scale, 1));
  line-height: 1.1;
  margin: 0;
  padding: 0;
  text-align: center;
  max-height: 120px;
  overflow: hidden;
  display: block;
}

#class-header .class-title.single-line {
  font-size: calc(var(--class-font-h1) * var(--class-title-scale, 1));
}

/* Headings inside Blocks */
[class$="-block"] h2 {
  font-size: var(--class-font-h2);
  line-height: var(--class-line-height);
  font-weight: bold;
  text-align: left;
  width: 100%;
  margin-top: var(--class-space-2);
  margin-bottom: var(--class-space-2);
}

/* Shared typography for all blocks */
[class$="-block"] p {
  font-size: var(--class-font-block);
  line-height: var(--class-line-height);
  text-align: left;
  width: 95%;
  min-width: 60%;
  margin: 0;
  padding: 0;
}

[class$="-block"] p br {
  display: block;
  content: "";
  margin-bottom: var(--class-space-1);
}

/* List styles matching paragraph typography */
[class$="-block"] ul {
  font-size: var(--class-font-block);
  line-height: var(--class-line-height);
  text-align: left;
  width: 95%;
  min-width: 60%;
  margin: 0;
  padding: 0;
  list-style: none;
}

[class$="-block"] ul li {
  font-size: calc(var(--class-font-block) * var(--list-font-scale));
  line-height: calc(var(--class-line-height) * var(--list-line-scale));
  letter-spacing: var(--list-letter-spacing);
  word-spacing: var(--list-word-spacing);
  margin-bottom: calc(var(--class-space-1) * var(--list-margin-scale));
  padding: 0;
}

.class-block {
  align-items: var(--block-align);
  text-align: var(--block-text-align);
  letter-spacing: var(--block-letter-spacing);
  word-spacing: var(--block-word-spacing);
}

.class-block h2,
.class-block p,
.class-block ul {
  text-align: var(--block-text-align);
}

.warmup-block {
  align-items: var(--warmup-align);
  text-align: var(--warmup-text-align);
}

.warmup-block h2,
.warmup-block p,
.warmup-block ul {
  text-align: var(--warmup-text-align);
}

.format-block {
  align-items: var(--format-align);
  text-align: var(--format-text-align);
}

.format-block h2,
.format-block p,
.format-block ul {
  text-align: var(--format-text-align);
}

.finisher-block {
  align-items: var(--finisher-align);
  text-align: var(--finisher-text-align);
}

.finisher-block h2,
.finisher-block p,
.finisher-block ul {
  text-align: var(--finisher-text-align);
}

.class-timer p {
  margin: 0;
  font-size: var(--class-font-small);
}

/* =======================
     Select display styling
     Used on the index page
     ======================= */

.display-heading {
  text-align: center;
  font-size: 5vh;
  margin: 1rem 0;
}

/* =======================
     Next class styling
     ======================= */

.no-class-message {
  color: var(--tertiary-color);
  text-align: center;
}

.next-class-block {
  text-align: center;
}

.next-class-title {
  color: var(--primary-color);
  font-size: 3rem; /* Bigger title */
  font-weight: bold;
  margin: var(--class-space-3); /* Adds spacing between title and time */
}

.class-start-time {
  font-size: 2rem; /* Bigger "Next up" and "Starting at" text */
  color: var(--secondary-color);
  font-weight: 600; /* Make it a bit bolder */
  margin: var(--class-space-3) 0; /* Adjust spacing */
}

/* =======================
     Class assignment
     ======================= */

.class-assignment {
  width: 90%; /* Stretch to container */
  margin: 0 auto;
  padding: var(--class-space-2);
  box-sizing: border-box; /* Ensure padding doesn’t overflow */
  display: flex;
  flex-direction: column;
  height: 100%;
}

.class-list {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr;
  gap: var(--class-space-4);
  overflow-y: hidden;
  padding: var(--space-0);
  margin: var(--space-0);
  list-style: none;
  min-height: 0;
}

.assignable-class {
  display: flex;
  flex-direction: column;
  border: var(--class-space-1) solid;
  border-color: var(--tertiary-color);
  background: rgb(0 0 0 / 70%);
  padding: var(--class-space-4);
  margin-bottom: var(--class-space-4);
  cursor: pointer;
  border-radius: var(--class-space-3);
  transition: border-color 0.2s, background-color 0.2s;
  min-height: 0;
  overflow: hidden;
  justify-content: center; /* Vertical centering */
  align-items: center; /* Horizontal centering */
}

.assignable-class:hover {
  background-color: rgb(0 0 0 / 85%);
  border-color: var(--tertiary-color);
}

.assignable-class.focused {
  border-color: var(--primary-hover-color);
  background-color: rgb(0 0 0 / 85%);
  box-shadow: 0 0 0 2px var(--primary-hover-color);
}

.class-assignment .class-title {
  color: inherit;
  font-size: var(--class-font-block);
  line-height: var(--class-line-height);
  margin: var(--space-0);
  padding: var(--space-0);
  max-height: none;
  overflow: visible;
  display: block;
}

.class-assignment .class-title h3 {
  font-size: calc(var(--class-font-block) * 0.82);
  font-weight: bold;
  line-height: var(--class-line-height);
  margin: 0;
  padding: 0;
}

.assignment-preview {
  background: #222;
  color: #fff;
  padding: 2rem;
  border-radius: 1rem;
  text-align: center;
}

.assignment-preview h2 {
  color: #fc0;
}

.class-time {
  font-size: var(--class-font-base);
  margin-top: var(--class-space-4);
  margin-bottom: var(--class-space-4);
  color: var(--secondary-color);
}

.class-time strong {
  color: var(--secondary-color);
  margin-right: var(--class-space-2);
}

/* =======================
     Compact Section
     ======================= */

/* === Class content headings === */

.main-content.compact-display h2 {
  font-size: calc(var(--class-font-h2) * var(--compact-scale));
  margin-top: calc(var(--class-space-2) * var(--compact-scale));
  margin-bottom: calc(var(--class-space-2) * var(--compact-scale));
}

.main-content.very-compact-display h2 {
  font-size: calc(var(--class-font-h2) * var(--very-compact-scale));
  margin-top: calc(var(--class-space-2) * var(--very-compact-scale));
  margin-bottom: calc(var(--class-space-2) * var(--very-compact-scale));
}

.main-content.ultra-compact-display h2 {
  font-size: calc(var(--class-font-h2) * var(--ultra-compact-scale));
  margin-top: calc(var(--class-space-2) * var(--ultra-compact-scale));
  margin-bottom: calc(var(--class-space-2) * var(--ultra-compact-scale));
}

/* === Class content Paragraphs and List Items === */

.main-content.compact-display [class$="-block"] p,
.main-content.compact-display [class$="-block"] ul,
.main-content.compact-display [class$="-block"] li {
  font-size: calc(var(--class-font-block) * var(--compact-scale));
  line-height: calc(var(--class-line-height) * var(--compact-scale));
}

/* Very compact display scaling */
.main-content.very-compact-display [class$="-block"] p,
.main-content.very-compact-display [class$="-block"] ul,
.main-content.very-compact-display [class$="-block"] li {
  font-size: calc(var(--class-font-block) * var(--very-compact-scale));
  line-height: calc(var(--class-line-height) * var(--very-compact-scale));
}

.main-content.ultra-compact-display [class$="-block"] p,
.main-content.ultra-compact-display [class$="-block"] ul,
.main-content.ultra-compact-display [class$="-block"] li {
  font-size: calc(var(--class-font-block) * var(--ultra-compact-scale));
  line-height: calc(var(--class-line-height) * var(--ultra-compact-scale));
}

/* === Promo Block === */
.main-content.compact-display .promo-heading h2 {
  font-size: calc(var(--class-font-h2) * var(--compact-scale));
  margin-top: calc(var(--class-space-2) * var(--compact-scale));
  margin-bottom: calc(var(--class-space-2) * var(--compact-scale));
}

.main-content.very-compact-display .promo-heading h2 {
  font-size: calc(var(--class-font-h2) * var(--very-compact-scale));
  margin-top: calc(var(--class-space-2) * var(--very-compact-scale));
  margin-bottom: calc(var(--class-space-2) * var(--very-compact-scale));
}

.main-content.ultra-compact-display .promo-heading h2 {
  font-size: calc(var(--class-font-h2) * var(--ultra-compact-scale));
  margin-top: calc(var(--class-space-2) * var(--ultra-compact-scale));
  margin-bottom: calc(var(--class-space-2) * var(--ultra-compact-scale));
}

/* Promo content paragraphs and list items */
.main-content.compact-display .promo-content p,
.main-content.compact-display .promo-content li {
  font-size: calc(var(--class-font-block) * var(--compact-scale));
  line-height: calc(var(--class-line-height) * var(--compact-scale));
}

.main-content.very-compact-display .promo-content p,
.main-content.very-compact-display .promo-content li {
  font-size: calc(var(--class-font-block) * var(--very-compact-scale));
  line-height: calc(var(--class-line-height) * var(--very-compact-scale));
}

.main-content.ultra-compact-display .promo-content p,
.main-content.ultra-compact-display .promo-content li {
  font-size: calc(var(--class-font-block) * var(--ultra-compact-scale));
  line-height: calc(var(--class-line-height) * var(--ultra-compact-scale));
}

/* Assignment titles need to participate in compact scaling as well. */
/* =======================
     Work out what this is for
     ======================= */

#tv-screen {
  height: 100vh;
  opacity: 0;
  transition: opacity 150ms ease;
  will-change: opacity;
}

#tv-screen.has-content:not(.rendering) {
  opacity: 1;
}

#tv-screen.rendering {
  opacity: 0;
}

#tv-screen > h2 {
  font-size: var(--class-font-h2);
  margin: var(--space-0) var(--space-0) var(--class-space-2);
  color: var(--primary-color);
}

#tv-screen > p {
  font-size: var(--class-font-base);
  line-height: var(--class-line-height);
  margin: var(--space-0) var(--space-0) var(--class-space-2);
  color: var(--secondary-color);
}

/* =======================
     Buttons Section
     ======================= */

/* Button Group (Align Buttons Horizontally) */
.button-group {
  display: flex;
  gap: var(--class-space-6); /* Already a variable ✓ */
  justify-content: center;
  margin: var(--class-button-group-margin) 0;
}

.button-group-divider {
  height: var(--class-button-divider-height);
}

/* General Button Styling */
.button {
  display: inline-block;
  padding: var(--class-button-padding-y) var(--class-button-padding-x);
  font-size: var(--class-button-font-size);
  font-weight: bold;
  text-decoration: none;
  color: var(--secondary-color);
  background-color: var(--primary-color);
  border-radius: var(--class-button-border-radius);
  transition: background 0.3s ease, transform 0.2s ease;
  border: none;
  cursor: pointer;
  text-align: center;
}

.button.landscape {
  width: var(--class-button-landscape-width);
  height: var(--class-button-landscape-height);
}

.button.portrait {
  width: var(--class-button-portrait-width);
  height: var(--class-button-portrait-height);
}

/* Hover Effect */
.button:hover {
  background-color: var(--primary-hover-color);
  transform: scale(1.05);
}

.button:focus {
  outline: var(--class-space-1) solid white;
  outline-offset: var(--class-space-2);
  box-shadow: 0 0 0 var(--class-space-1) rgb(255 255 255 / 50%);
}

.button-group .button {
  overflow: hidden;

  /* white-space: nowrap; */
  text-overflow: ellipsis;
  text-align: center;
}

.display-group-button {
  padding: calc(var(--class-button-padding-y) * 1.4)
    calc(var(--class-button-padding-x) * 1.4);
  font-size: calc(var(--class-button-font-size) * 1.2);
  min-width: calc(var(--class-button-landscape-width) * 0.9);
}

.admin-button-wrapper {
  position: absolute;
  top: var(--class-space-6);
  right: var(--class-space-6);
  z-index: 999;
}

.button.admin-button {
  background-color: #222;
  color: #fff;
  border: 2px solid #fff;
  padding: 0.5em 1em;
  font-weight: bold;
  border-radius: 6px;
  text-transform: uppercase;
  box-shadow: 0 2px 5px rgb(0 0 0 / 20%);
}

.button.admin-button:hover {
  background-color: #fff;
  color: #222;
}

/* Circular Button */
.button--circle {
  border-radius: 50%;
  padding: var(--class-button-circle-padding);
  width: var(--class-button-circle-size);
  height: var(--class-button-circle-size);
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  color: #000;
  border: var(--class-button-circle-border) solid #000;
}

/* Screen meta */
.screen-meta {
  position: fixed;
  z-index: 999;
  font-size: var(--class-screen-meta-font-size);
  color: var(--tertiary-color);
  background-color: rgb(0 0 0 / 60%);
  padding: var(--class-screen-meta-padding-y) var(--class-screen-meta-padding-x);
  border-radius: var(--class-screen-meta-border-radius);
  font-weight: normal;
  display: flex;
  flex-direction: column;
  gap: var(--class-screen-meta-gap);
  transition: opacity 0.3s ease;
}

.screen-meta.bottom-right {
  bottom: var(--class-screen-meta-offset);
  right: var(--class-screen-meta-offset);
}

.screen-meta.top-right {
  top: var(--class-screen-meta-offset);
  right: var(--class-screen-meta-offset);
}

.screen-meta:hover {
  opacity: 1;
}

.gcs-demo-ribbon {
  position: absolute;
  top: var(--class-screen-meta-offset);
  left: var(--class-screen-meta-offset);
  z-index: 10;
  padding: 8px 12px;
  background: linear-gradient(135deg, #ff5f6d, #ffc371);
  color: #0b0b0b;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  border-radius: 999px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28);
  text-transform: uppercase;
  pointer-events: none;
}

body.rotated .gcs-demo-ribbon {
  transform-origin: top left;
}

/* Controls the position of the floating rotate button */
.rotate-toggle-floating {
  position: fixed;
  top: 40px;
  right: 40px;
  z-index: 999;
  display: flex;
  align-items: center;
  gap: 10px;
}

.close-rotate {
  background: rgb(255 255 255 / 10%);
  border: 2px solid var(--tertiary-color, #aaa);
  color: var(--tertiary-color, #fff);
  font-size: var(--class-font-base);
  cursor: pointer;
  padding: 12px;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.close-rotate:hover,
.close-rotate:focus {
  background-color: rgb(255 255 255 / 20%);
  outline: 2px solid var(--primary-color, #d6ae61);
  outline-offset: 2px;
}

.orientation-toggle {
  background: rgb(0 0 0 / 65%);
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 14px;
  padding: 10px 12px;
  box-shadow: 0 6px 18px rgb(0 0 0 / 35%);
  min-width: 220px;
  color: #fff;
}

.orientation-toggle__label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.8;
}

.orientation-toggle__buttons {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.orientation-toggle__button {
  flex: 1;
  text-align: center;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgb(255 255 255 / 12%);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  border: 1px solid rgb(255 255 255 / 16%);
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.orientation-toggle__button:hover,
.orientation-toggle__button:focus {
  background: rgb(255 255 255 / 18%);
  border-color: rgb(255 255 255 / 32%);
  color: #fff;
}

.orientation-toggle__button.is-active {
  background: var(--primary-color, #d6ae61);
  color: #000;
  border-color: transparent;
}

/* Default unrotated position */
.network-error {
  position: fixed;
  top: 20px;
  right: 20px;
  background-color: #d9534f;
  color: #fff;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 14px;
  z-index: 9999;
  box-shadow: 0 2px 8px rgb(0 0 0 / 20%);
  max-width: 80vw;
  text-align: center;
}

/* When body is rotated 90 degrees */
body.rotated .network-error {
  inset: auto 20px 20px auto;
  transform: rotate(90deg) translateY(100%);
  transform-origin: bottom right;
}

/* New container that anchors both controls */
.screen-actions {
  position: fixed;
  bottom: var(
    --class-space-5
  ); /* 1rem = 16px, closest is --class-space-5: 16px */

  left: var(--class-space-5);
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: var(--class-space-5);
  background: transparent;
  padding: var(--class-space-4); /* 0.75rem = 12px = --class-space-4: 12px */
  border-radius: var(--class-space-3); /* 0.5rem = 8px = --class-space-3: 8px */
}

.admin-qr-code {
  position: static;
  background: transparent;
  padding: 0;
  border-radius: var(--class-space-3); /* 0.5rem = 8px */
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--class-space-5); /* 1rem = 16px */
  transition: opacity 0.3s ease;
}

.admin-qr-code.hidden {
  opacity: 0;
  pointer-events: none;
}

/* Button sizing stays the same */
.manual-refresh-button {
  width: var(--class-manual-refresh-size);
  height: var(--class-manual-refresh-size);
  background-color: transparent;
}

.manual-refresh-button button {
  width: 100%;
  height: 100%;
  font-size: var(--refresh-button-font-size);
  font-weight: bold;
  color: var(--tertiary-color);
  background-color: transparent;
  border: var(--class-manual-refresh-border) solid var(--tertiary-color);
  border-radius: var(--class-manual-refresh-border-radius);
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

/* QR styles */
.qr-block {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.qr-block img {
  width: var(--class-qr-size);
  height: var(--class-qr-size);
  background-color: #222;
  padding: var(--class-qr-padding);
  border-radius: var(--class-qr-border-radius);
  filter: brightness(0.9) contrast(0.9);
}

.qr-block .qr-label {
  font-size: var(--class-qr-label-font-size);
  color: var(--tertiary-color);
  margin-top: var(--class-qr-label-margin);
}

.qr-block.hidden {
  display: none;
}

/* Hide only the QR on assignment screens; keep the button visible */
.class-assignment .admin-qr-code,
.class-assignment .admin-qr-code .qr-block {
  display: none;
}

.timer-badge {
  font-size: var(--class-timer-size);
  color: var(--secondary-color);
  padding: calc(var(--class-timer-size) * 0.4)
    calc(var(--class-timer-size) * 0.8);
  border: var(--class-manual-refresh-border) solid var(--tertiary-color);
  border-radius: 999px;
}

.timer-badge .timer-icon {
  width: calc(var(--class-timer-size) * 1.2);
  height: calc(var(--class-timer-size) * 1.2);
}

.preroll-banner {
  position: fixed;
  top: 1rem;
  right: 1rem;
  background-color: rgb(0 0 0 / 80%);
  color: var(--tertiary-color);
  box-shadow: 0 0 10px var(--tertiary-color);
  padding: 0.5rem 1.2rem;
  font-size: 1.6rem;
  font-weight: bold;
  border-radius: 999px; /* pill shape */
  z-index: 1000;
  pointer-events: none;
  text-align: center;
  line-height: var(--class-line-height);
  max-width: 90vw;
  animation: pulseBadge 3s ease-in-out infinite;
}

@keyframes pulseBadge {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.6;
  }
}

.preroll-banner.hidden {
  display: none;
}

/* Pairing overlay styling */

.pairing-overlay {
  position: fixed;
  inset: 0;
  background: black;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  font-size: 2.5vh;
  padding: 4vh;
  z-index: 999;
}

body.rotated .pairing-overlay {
  transform: rotate(90deg) translateY(-100%);
  transform-origin: top left;
  width: 100vh;
  height: 100vw;
  overflow: hidden;
  position: fixed;
  left: 0;
  top: 0;
}

.pairing-wrapper {
  max-width: 90vw;
}

.pairing-code {
  font-size: 8vh;
  font-weight: bold;
  margin: 2vh 0;
  letter-spacing: 1vh;
}

.pairing-qr {
  width: 20vh;
  height: 20vh;
  margin: 3vh 0;
}

.pairing-help {
  font-size: 2vh;
  opacity: 0.6;
}

.hidden {
  display: none !important;
}

#pairing-url {
  display: inline-block;
  padding: 1em 2em;
  background: #333;
  color: white;
  text-decoration: none;
  border-radius: 5px;
}

#pairing-url:hover {
  background: #555;
}

.confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgb(0 0 0 / 80%);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}

.confirm-box {
  background: #fff;
  color: #000;
  padding: 2.5rem;
  border-radius: 0.75rem;
  text-align: center;
  max-width: 95vw;
  width: 480px;
  font-size: 1.4em; /* base size for everything inside */
}

.confirm-box p {
  font-size: 1.6em;
  margin: 1em 0;
}

.confirm-class-name {
  font-size: 2em; /* class name even bigger */
  font-weight: bold;
}

.confirm-box button {
  display: inline-block;
  margin: 0.75em;
  padding: 1em 2em;
  font-size: 1.4em;
  border: none;
  border-radius: 0.5em;
  cursor: pointer;
}

#confirm-yes {
  background: #28a745;
  color: #fff;
}

#confirm-yes:focus {
  outline: 3px solid #155724;
}

#confirm-cancel {
  background: #dc3545;
  color: #fff;
}

#confirm-cancel:focus {
  outline: 3px solid #721c24;
}