/* Force desktop-width layout on all viewports.
   The <meta viewport width=1280> handles real mobile browsers;
   min-width prevents CSS reflow below 1280px as a fallback. */
html, body {
  min-width: 1280px;
}

/* Remove default body margin and padding */
body {
  margin: 0 !important;
  padding: 0 !important;
}

/* Remove top margin/padding from navbar container */
#navbar-container {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Language flag images inside the Fomantic menu */
.ui.menu .lang-flag {
  height: 18px;
  width: auto;
  display: inline-block;
  border-radius: 2px;
  vertical-align: middle;
  opacity: 0.75;
  transition: opacity 0.15s;
}
.ui.menu .lang-dropdown:hover .lang-flag {
  opacity: 1;
}

/* ── Language dropdown trigger ── */
.lang-dropdown.ui.dropdown.item {
  padding: 0.45em 0.6em !important;
  display: flex !important;
  align-items: center !important;
}

/* Dropdown caret arrow */
.lang-dropdown .dropdown.icon {
  margin-left: 0.35em !important;
  font-size: 0.75em;
}

/* ── Dropdown menu panel ── */
.lang-dropdown > .menu {
  min-width: 100px !important;
  right: 0 !important;
  left: auto !important;
  border-radius: 0 0 5px 5px !important;
  background: #fff !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  margin-top: 0 !important;
  padding: 4px 0 !important;
}

/* Individual items inside the dropdown */
.lang-dropdown .menu > .lang-dropdown-item.item {
  display: flex !important;
  align-items: center !important;
  padding: 0.55em 0.9em !important;
  font-size: 0.8em !important;
  color: #333 !important;
  line-height: 1.3 !important;
}
.lang-dropdown .menu > .lang-dropdown-item.item:hover {
  background: rgba(33, 133, 208, 0.09) !important;
  color: #1a1a1a !important;
}
.lang-dropdown .menu > .lang-dropdown-item.item.active {
  background: rgba(33, 133, 208, 0.14) !important;
  font-weight: 700 !important;
}

/* Flags inside dropdown items */
.lang-dropdown .menu .lang-flag {
  height: 16px !important;
  opacity: 1 !important;
}

body :not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
  font-size: 16px !important;
}

/* Plotly tick text must keep the sizes glucose.py reserved paper for.
   The blanket 16px rule otherwise inflates HH:MM labels and they clip
   inside Plotly's overflow:hidden svg-container. Mobile /prediction
   keeps its own 8px override (higher specificity). */
html:not(.mobile-device) .js-plotly-plot .xtick text {
  font-size: 11px !important;
}
html:not(.mobile-device) .js-plotly-plot .ytick text,
html:not(.mobile-device) .js-plotly-plot .legendtext {
  font-size: 12px !important;
}

/* Override the blanket 16px rule for Fomantic UI menus so size classes work */
body .ui.massive.menu .item,
body .ui.massive.menu {
  font-size: 1.71428571rem !important;
}
body .ui.huge.menu .item,
body .ui.huge.menu {
  font-size: 1.42857143rem !important;
}
body .ui.large.menu .item,
body .ui.large.menu {
  font-size: 1.14285714rem !important;
}

/* Tabular inverted menu: active tab stands out, items evenly spaced */
.ui.tabular.inverted.menu .item {
  border-bottom: 3px solid transparent;
}
.ui.tabular.inverted.menu .active.item {
  border-bottom: 3px solid white;
  background: rgba(255, 255, 255, 0.12);
}

/* Custom green color for primary action buttons */
.ui.button.green {
  background-color: #4CBB17 !important;
}

.ui.button.green:hover {
  background-color: #3A9B12 !important;
}

/* Custom blue color for test/secondary buttons */
.ui.button.blue-action {
  background-color: #1976D2 !important;
}

.ui.button.blue-action:hover {
  background-color: #1565C0 !important;
}


/* Make checkboxes outlined in black and larger on the landing page */
#landing-page .form-check-input {
  border-color: black;
  width: 1.4em;
  height: 1.4em;
  margin-top: 0.15em;
  cursor: pointer;
}

#landing-page .form-check-label {
  font-size: 15px;
  padding-left: 0.4em;
  cursor: pointer;
}

/* Ending page foldable "Click here for details" button.
   Must beat `body :not(h1..h6) { font-size: 16px !important }`. */
.ending-fold {
  text-align: center;
}
.ending-fold > summary.ending-fold-button {
  display: inline-block;
  cursor: pointer;
  user-select: none;
  list-style: none;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #fff !important;
  background: #2185d0;
  border: none;
  border-radius: 8px;
  padding: 10px 18px;
  margin: 0 auto;
  line-height: 1.3;
}
.ending-fold > summary.ending-fold-button::-webkit-details-marker {
  display: none;
}
.ending-fold > summary.ending-fold-button::marker {
  content: "";
}
.ending-fold > summary.ending-fold-button:hover {
  background: #1678c2;
}
.ending-fold[open] > summary.ending-fold-button {
  background: #1b6ea8;
  margin-bottom: 4px;
}

/* Final-page leaderboard — two columns as sketched:
   left = your result card (previous look) + format chips; right = others table. */
.final-leaderboard {
  margin: 0 auto 20px auto;
  max-width: 1000px;
  width: 100%;
  padding: clamp(14px, 2.4vw, 22px);
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
  box-sizing: border-box;
}
.final-leaderboard-title {
  text-align: center;
  margin: 0 0 16px 0;
  font-size: clamp(20px, 3vw, 26px) !important;
  color: #1e3a5f;
}
.final-leaderboard-split {
  display: flex !important;
  flex-wrap: wrap;
  gap: 22px;
  align-items: flex-start;
  justify-content: center;
}
.final-leaderboard-left {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 0 1 380px;
  min-width: 240px;
  max-width: 420px;
}
.final-leaderboard-right {
  flex: 1 1 320px;
  min-width: 260px;
}
.final-leaderboard-hero {
  text-align: center;
  padding: 14px 12px 16px;
  border-radius: 12px;
  background: linear-gradient(180deg, #eef5ff 0%, #f8fbff 100%);
  border: 1px solid rgba(33, 133, 208, 0.18);
}
.final-leaderboard-hero-label {
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #4a5568;
  margin-bottom: 4px;
}
.final-leaderboard-hero-rank {
  font-size: clamp(28px, 5vw, 40px) !important;
  font-weight: 800 !important;
  color: #1d4ed8;
  line-height: 1.1;
  margin-bottom: 6px;
}
.final-leaderboard-hero-pct {
  display: inline-block;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #0f766e;
  background: rgba(15, 118, 110, 0.1);
  border-radius: 999px;
  padding: 4px 10px;
  margin-bottom: 6px;
}
.final-leaderboard-hero-mae {
  font-size: 14px !important;
  color: #4a5568;
  margin-top: 4px;
}
.final-leaderboard-empty {
  text-align: center;
  color: #64748b;
  font-style: italic;
  margin-bottom: 8px;
}
.final-leaderboard-formats {
  width: 100%;
}
.final-leaderboard-format-label {
  text-align: center;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #475569;
  margin-bottom: 8px;
}
.final-leaderboard-format-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.final-leaderboard-format-chip {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #1e3a5f;
  background: #f1f5f9;
  border: 1px solid rgba(75, 95, 130, 0.18);
  border-radius: 999px;
  padding: 6px 12px;
}
.final-leaderboard-board-title {
  text-align: center;
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #1e3a5f;
  margin: 0 0 10px 0;
}
.final-leaderboard-board {
  min-width: 0;
  width: 100%;
}
.final-leaderboard-row {
  display: grid;
  /* Five tracks that keep header and values on the same columns even
     inside the narrow per-source cards. Every item has minmax(0, …) so
     a long name or "MAE (mg/dL)" cannot blow the row past the card. */
  grid-template-columns:
    minmax(0, 26px)
    minmax(0, 1fr)
    max-content
    minmax(0, 72px)
    minmax(0, 52px);
  gap: 6px;
  align-items: center;
  padding: 8px 4px;
  border-radius: 8px;
  font-size: 14px !important;
  min-width: 0;
  box-sizing: border-box;
}
.final-leaderboard-row.head {
  font-weight: 700 !important;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 12px !important;
  padding-bottom: 4px;
  align-items: end;
}
.final-leaderboard-row.you {
  background: #e8f1fb;
  border: 1px solid rgba(33, 133, 208, 0.28);
  font-weight: 700 !important;
}
.final-leaderboard-row.you .you-label {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: #1d4ed8;
}
.final-leaderboard-cell {
  min-width: 0;
  overflow: hidden;
}
.final-leaderboard-cell.rank {
  font-variant-numeric: tabular-nums;
  font-weight: 800 !important;
  color: #1d4ed8;
  white-space: nowrap;
}
.final-leaderboard-cell.player {
  white-space: nowrap;
  text-overflow: ellipsis;
}
.final-leaderboard-cell.rounds {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: #64748b;
  white-space: nowrap;
}
.final-leaderboard-cell.when {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: #64748b;
  line-height: 1.15;
}
.final-leaderboard-row.head .final-leaderboard-cell {
  white-space: nowrap;
  overflow-wrap: normal;
  line-height: 1.15;
  text-overflow: clip;
}
.final-leaderboard-row.head .final-leaderboard-cell.mae {
  white-space: normal;
  overflow-wrap: break-word;
}
.final-leaderboard-row.head .final-leaderboard-cell.when {
  font-size: 12px !important;
}
.final-leaderboard-cell.when .when-date,
.final-leaderboard-cell.when .when-time {
  display: block;
  font-size: 11px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.final-leaderboard-cell.mae {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: #334155;
  white-space: nowrap;
}
.final-leaderboard-rows {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
@media (max-width: 720px) {
  .final-leaderboard-left,
  .final-leaderboard-right {
    flex: 1 1 100% !important;
    max-width: 100% !important;
  }
}
.final-leaderboard-board-subtitle {
  text-align: center;
  font-size: 12px !important;
  color: #64748b;
  margin: -6px 0 10px 0;
}

/* ---- Highscore page (/highscore) ------------------------------------- */
.highscore-page {
  max-width: 1040px;
}
.highscore-subtitle {
  color: #475569;
  margin-bottom: 14px;
}
.highscore-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}
.highscore-stat {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #1e3a5f;
  background: #f1f5f9;
  border: 1px solid rgba(75, 95, 130, 0.18);
  border-radius: 999px;
  padding: 5px 12px;
}
.highscore-hero-wrap {
  max-width: 420px;
  margin: 0 auto 18px auto;
}
.highscore-card {
  margin: 0 auto 18px auto;
  max-width: 640px;
}
.highscore-section-title {
  text-align: center;
  margin: 6px 0 14px 0;
  font-size: clamp(18px, 2.6vw, 22px) !important;
  color: #1e3a5f;
}
/* The two main class boards (non-diabetic data / diabetic data) sit side by
   side on the 1040px page and stack when the viewport gets narrow. */
.highscore-class-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 18px;
  align-items: start;
}
.highscore-class-grid .highscore-card {
  margin: 0;
  max-width: none;
  padding: 12px 8px;
}
/* The round-floor selector above the boards. */
.highscore-floor-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 16px 0;
}
.highscore-floor-label {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #1e3a5f;
}
.highscore-floor-select {
  min-width: 190px;
  font-size: 13px;
}
.highscore-unranked-note {
  margin-top: 6px;
  font-style: italic;
}
/* Badges after a player's name: hard mode (foreign data) and the medal tiers. */
.board-badge {
  margin-left: 5px;
  font-size: 13px;
  cursor: help;
}
.player-link {
  color: #1d4ed8;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
}
.player-link:hover {
  color: #1e40af;
}
.highscore-legend {
  max-width: 720px;
  margin: 4px auto 0 auto;
  text-align: center;
}
.highscore-legend-line {
  font-size: 12px !important;
  color: #64748b;
  line-height: 1.5;
}
/* ---- Player statistics page (/player/<id>) ---------------------------- */
.player-page-name {
  font-size: clamp(18px, 2.8vw, 24px) !important;
  font-weight: 700 !important;
  color: #1e3a5f;
  margin: 4px 0 12px 0;
}
.player-games-scroll {
  margin: 0 0 18px 0;
}
.player-games-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 560px;
}
.player-games-table th,
.player-games-table td {
  border-bottom: 1px solid rgba(75, 95, 130, 0.18);
  padding: 8px 10px;
  text-align: left;
  white-space: nowrap;
}
.player-games-table th {
  font-size: 12px !important;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
/* `.final-leaderboard-row.head` sets 12px, but the global
   `body :not(h1..h6) { font-size: 16px !important }` rule in this file wins on
   the cell spans themselves (inheritance loses to !important), which pushed the
   `MAE (mg/dL)` header onto a second line in narrow cards.  Scoped to the
   highscore page so `/final` keeps its current look. */
.highscore-page .final-leaderboard-row.head .final-leaderboard-cell {
  font-size: 12px !important;
}
.highscore-empty {
  margin: 24px 0;
}
.highscore-actions {
  text-align: center;
  margin: 22px 0 8px 0;
}
/* What the board stores: optional public nickname + a one-way email hash, never
   the address and nothing from the study record. Small print, still legible. */
.highscore-privacy-note {
  max-width: 620px;
  margin: 18px auto 0 auto;
  text-align: center;
  font-size: 12px !important;
  line-height: 1.5;
  color: #64748b;
}

/* ---- Nickname editor (left column of the /final leaderboard) ---------- */
.final-nickname-editor {
  background: #f8fafc;
  border: 1px solid rgba(75, 95, 130, 0.18);
  border-radius: 10px;
  padding: 12px 14px;
}
.final-nickname-title {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #1e3a5f;
  margin-bottom: 8px;
}
.final-nickname-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.final-nickname-editor .final-nickname-input,
.final-nickname-editor input.dash-input-element {
  flex: 1 1 150px;
  min-width: 0;
  padding: 7px 9px;
  font-size: 14px !important;
  border: 1px solid rgba(75, 95, 130, 0.3);
  border-radius: 6px;
}
.final-nickname-editor .dash-input-container {
  flex: 1 1 150px;
  min-width: 0;
  margin: 0;
}
.final-nickname-hint,
.final-nickname-status {
  font-size: 12px !important;
  line-height: 1.45;
  color: #64748b;
  margin-top: 8px;
}
.final-nickname-status:not(:empty) {
  color: #15803d;
  font-weight: 600 !important;
}

/* Games-played counter: beat `body :not(h1..h6) { font-size: 16px !important }`. */
#landing-page .games-played-title {
  font-size: 38px !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  margin: 12px 0 0 0 !important;
  color: #334155 !important;
}

#landing-page .games-played-count {
  font-size: 70px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  margin: 0 !important;
  color: #1565c0 !important;
  font-variant-numeric: tabular-nums;
}

#landing-page .games-played-completed {
  font-size: 22px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  margin: 0 0 8px 0 !important;
  color: #334155 !important;
}

#landing-page .games-played-punchline {
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  margin: 10px 0 0 0 !important;
  color: #1565c0 !important;
}

#landing-page .games-played-slots {
  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  margin: 14px 0 0 0 !important;
  color: #475569 !important;
}

#landing-page .how-it-works-teaser {
  font-size: 38px !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  margin: 0 0 14px 0 !important;
  color: #334155 !important;
}

#landing-page .how-it-works-steps {
  margin: 0 !important;
  padding: 0 !important;
  color: #334155 !important;
  font-size: 38px !important;
}

#landing-page .how-it-works-step {
  font-size: 0.5em !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  margin: 0 0 10px 0 !important;
  color: #334155 !important;
}

/* Stats card + game preview share one row and the same top/bottom edge. */
#landing-page .landing-hero-pair {
  align-items: stretch;
}
#landing-page .landing-hero-pair > [class*="col"] {
  display: flex;
}
#landing-page .landing-hero-pair .games-played-counter {
  margin-bottom: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#landing-page .landing-hero-shot-wrap {
  flex: 1 1 auto;
  width: 100%;
  position: relative;
  min-height: 0;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.10);
  background: rgba(255, 255, 255, 0.75);
}
#landing-page .landing-hero-shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
@media (max-width: 767.98px) {
  #landing-page .landing-hero-shot-wrap {
    min-height: 240px;
    aspect-ratio: 4 / 3;
  }
}
#landing-page .landing-hero-shot-fallback {
  height: 100%;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Info page styling (About, Contact, Demo pages) */
.info-page {
  min-height: 100vh;
  padding: 40px clamp(24px, 5vw, 60px) 60px;
  background: linear-gradient(135deg, #eff6ff 0%, #f8fafc 35%, #fff7ed 100%);
  margin: 0 auto;
  max-width: clamp(320px, 85vw, 1400px);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

/* H1 title styling for info pages */
.info-page h1 {
  font-family: inherit !important;
  font-size: 36px !important;
  font-weight: 800 !important;
  color: #0f172a;
  margin-bottom: 16px;
  margin-top: 0;
  letter-spacing: -0.01em;
}

/* H2 subtitle styling for info pages */
.info-page h2 {
  font-family: inherit !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #1565c0;
  margin-bottom: 8px;
  margin-top: 18px;
}

/* FAQ / info page question headings */
.info-page h3,
.info-page .ui.segment h3 {
  font-family: inherit !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  color: #0f172a !important;
  letter-spacing: 0.01em !important;
  margin-bottom: 6px !important;
  margin-top: 0 !important;
}

/* FAQ / info page body text */
.info-page p,
.info-page .ui.segment p {
  font-family: inherit !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
  color: #374151 !important;
  margin-bottom: 0 !important;
}

.info-page a {
  color: #1565c0;
  text-decoration: underline;
  word-break: break-all;
}
.info-page a:hover {
  color: #0d47a1;
}

.demo-fullscreen-button.ui.button {
  margin-top: 16px;
}

#demo-video-shell:fullscreen,
#demo-video-shell:-webkit-full-screen,
#demo-video-shell.demo-video-immersive {
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  padding-bottom: 0 !important;
  border-radius: 0 !important;
  background: #000 !important;
}

#demo-video-shell:fullscreen iframe,
#demo-video-shell:-webkit-full-screen iframe,
#demo-video-shell.demo-video-immersive iframe {
  width: 100% !important;
  height: 100% !important;
}

/* Study design content styling */
.study-design-content h1,
.study-design-content h2,
.study-design-content h3,
.study-design-content h4 {
  font-family: inherit !important;
}

.study-design-content h1 {
  font-size: 24px !important;
  font-weight: 700;
  color: #0f172a;
  margin-top: 24px;
  margin-bottom: 12px;
  line-height: 1.3;
}

.study-design-content h2 {
  font-size: 20px !important;
  font-weight: 700;
  color: #1565c0;
  margin-top: 20px;
  margin-bottom: 10px;
  line-height: 1.3;
}

.study-design-content h3 {
  font-size: 18px !important;
  font-weight: 600;
  color: #334155;
  margin-top: 16px;
  margin-bottom: 8px;
}

.study-design-content p {
  line-height: 1.7;
  margin-bottom: 10px;
  color: #1e293b;
}

.study-design-content ul,
.study-design-content ol {
  padding-left: 24px;
  margin-bottom: 12px;
}

.study-design-content li {
  margin-bottom: 6px;
  line-height: 1.6;
}

.study-design-content img {
  max-width: 100%;
  width: auto;
  min-width: 300px;
  height: auto;
  display: block;
  margin: 16px auto;
  border-radius: 8px;
  border: 1px solid rgba(15, 23, 42, 0.10);
}

/* Suppress Dash's default "Loading..." text and white flash during callback
   updates to page-content / navbar-container.  Dash inserts a ._dash-loading
   element that replaces the previous children while the new callback response
   is in flight — hiding it keeps the old content visible for a seamless feel. */
._dash-loading {
  display: none !important;
}

/* H3 subtitle styling for consent notice (match required consent title style) */
#consent-notice-scroll h3 {
  font-size: 18px;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 8px;
  margin-top: 18px;
}

/* Prediction chart: slim y-axis unit strip.
   One horizontal row (label + mg/dL + mmol/L) rotated -90° so it reads
   up the axis as a single thin line — not a bulky side panel. */
#prediction-glucose-chart-container {
  position: relative;
}

#prediction-units-row.chart-yaxis-units {
  position: absolute;
  z-index: 6;
  left: 0;
  top: 50%;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 5px 8px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(75, 95, 130, 0.28);
  border-radius: 999px;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.12);
  pointer-events: auto;
  white-space: nowrap;
  transform: translate(-42%, -50%) rotate(-90deg);
  transform-origin: center center;
}

#prediction-units-row .chart-yaxis-units-label {
  display: inline-block;
  margin: 0;
  padding: 0 2px 0 0;
  writing-mode: horizontal-tb;
  transform: none;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1;
  letter-spacing: 0.02em;
  color: #2c5282;
  white-space: nowrap;
}

#prediction-units-row #glucose-unit-selector.chart-unit-toggle,
#prediction-units-row .chart-unit-toggle {
  display: flex !important;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  margin: 0;
  width: auto;
}

#prediction-units-row .chart-unit-toggle .form-check {
  position: relative;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin: 0 !important;
  padding: 4px 8px;
  min-width: 0;
  box-sizing: border-box;
  border-radius: 999px;
  border: 1px solid rgba(75, 95, 130, 0.22);
  background: #f8fafc;
  cursor: pointer;
}

#prediction-units-row .chart-unit-toggle .form-check:has(input:checked) {
  background: #e8f1fb;
  border-color: #2185d0;
  box-shadow: inset 0 0 0 1px rgba(33, 133, 208, 0.25);
}

#prediction-units-row .chart-unit-toggle .form-check-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
  z-index: 1;
}

#prediction-units-row .chart-unit-toggle .form-check-label {
  position: relative;
  z-index: 0;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #1a365d;
  cursor: pointer;
  white-space: nowrap;
}

html.mobile-device .prediction-meta-row,
html.mobile-device #prediction-submit-row {
  display: contents;
}

/* Compact desktop /prediction chrome: title + How to play on one row,
   round + source immediately under, graph next, actions under the graph. */
html:not(.mobile-device) .prediction-header {
  padding: 6px 12px !important;
  margin-bottom: 0 !important;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-areas: "left title howto";
  align-items: center;
  column-gap: 16px;
  row-gap: 0;
}
html:not(.mobile-device) .prediction-header #header-app-title {
  grid-area: title;
  font-size: 28px !important;
  margin: 0 !important;
  text-align: center !important;
  justify-self: center;
}
html:not(.mobile-device) .prediction-header .header-body-row,
html:not(.mobile-device) .prediction-header .header-copy-column {
  display: contents;
}
html:not(.mobile-device) .prediction-header #header-how-to-play {
  grid-area: howto;
  justify-self: end;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.2 !important;
  position: relative;
}
html:not(.mobile-device) .prediction-header .header-how-to-play-toggle {
  cursor: pointer;
  padding: 6px 12px;
  font-size: 14px !important;
  font-weight: 600;
  color: #2c5282;
  background: #fff;
  border: 1px solid #cbd5e0;
  border-radius: 6px;
  line-height: 1.2;
  white-space: nowrap;
}
html:not(.mobile-device) .prediction-header .header-how-to-play-bubble {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 40;
  width: min(420px, 70vw);
  padding: 12px 28px 12px 12px;
  background: #fff;
  border: 1px solid #cbd5e0;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
  font-size: 14px;
  line-height: 1.45;
  color: #4a5568;
  text-align: left;
}
html:not(.mobile-device) .prediction-header .header-how-to-play-close {
  position: absolute;
  top: 4px;
  right: 6px;
  border: 0;
  background: transparent;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  color: #4a5568;
}
html:not(.mobile-device) .prediction-header #header-description {
  display: none;
}
html:not(.mobile-device) .prediction-header .header-controls-column {
  display: none;
}
html:not(.mobile-device) #prediction-page {
  gap: 8px !important;
  padding-top: 4px !important;
  padding-bottom: 8px !important;
  height: calc(100vh - 56px);
  max-height: calc(100vh - 56px);
  box-sizing: border-box;
}
html:not(.mobile-device) #prediction-chart-submit-wrap {
  flex: 1 1 auto !important;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
html:not(.mobile-device) #prediction-mobile-actions {
  flex-shrink: 0;
}
html:not(.mobile-device) #prediction-glucose-chart-container {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
}
html:not(.mobile-device) #glucose-graph {
  height: 100% !important;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
html:not(.mobile-device) #glucose-graph-graph,
html:not(.mobile-device) #glucose-graph .js-plotly-plot,
html:not(.mobile-device) #glucose-graph .plot-container {
  flex: 1 1 auto;
  height: 100% !important;
  min-height: 0;
}
html:not(.mobile-device) .prediction-meta-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-start;
  gap: 8px 16px;
  margin: 0;
  padding: 0;
}
html:not(.mobile-device) #prediction-round-summary {
  margin: 0;
  flex: 0 0 auto;
}
html:not(.mobile-device) #prediction-round-summary #round-indicator {
  margin: 0 !important;
  font-size: 16px !important;
  text-align: left !important;
}
html:not(.mobile-device) #prediction-source-plaque,
html:not(.mobile-device) #ending-source-info {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 1px;
  margin: 0;
  padding: 2px 10px;
  background: #f7fafc;
  border-radius: 6px;
}
html:not(.mobile-device) #prediction-source-plaque .prediction-source-line,
html:not(.mobile-device) #ending-source-info .prediction-source-line {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
}
html:not(.mobile-device) #prediction-source-plaque .prediction-source-metadata,
html:not(.mobile-device) #ending-source-info .prediction-source-metadata {
  margin: 0;
  color: #2c5282;
  font-size: 16px !important;
  font-weight: 600;
  font-style: normal;
  line-height: 1.2;
}
html:not(.mobile-device) #prediction-source-plaque .prediction-source-metadata:empty,
html:not(.mobile-device) #ending-source-info .prediction-source-metadata:empty {
  display: none;
}
html:not(.mobile-device) #prediction-source-plaque .prediction-source-label,
html:not(.mobile-device) #prediction-source-plaque .prediction-source-name,
html:not(.mobile-device) #prediction-source-plaque .prediction-source-time,
html:not(.mobile-device) #ending-source-info .prediction-source-label,
html:not(.mobile-device) #ending-source-info .prediction-source-name,
html:not(.mobile-device) #ending-source-info .prediction-source-time {
  margin: 0;
  color: #718096;
  font-size: 12px !important;
  font-weight: 400;
  line-height: 1.2;
}
html:not(.mobile-device) #prediction-actions {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin: 8px 0 12px 0;
  flex-shrink: 0;
}
html:not(.mobile-device) #prediction-progress-label {
  width: 100%;
  margin-bottom: 0 !important;
}
html:not(.mobile-device) #prediction-submit-row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: auto;
}
html:not(.mobile-device) #submit-button {
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  line-height: 1.2 !important;
}
.finish-study-exit:not(.finish-study-results) {
  width: 48px !important;
  min-width: 48px !important;
  max-width: 48px !important;
  height: 48px !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 0 !important;
  line-height: 0 !important;
  overflow: hidden;
  border: none !important;
  border-radius: 8px;
  flex: 0 0 48px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  color: transparent !important;
  text-indent: 0 !important;
  background-color: #E81123 !important;
  box-shadow: none !important;
}
.finish-study-exit:not(.finish-study-results):hover,
.finish-study-exit:not(.finish-study-results):focus {
  background-color: #C42B1C !important;
}
.finish-study-exit:not(.finish-study-results)::after {
  content: "×";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px !important;
  font-weight: 400;
  line-height: 1;
  color: #fff;
  text-indent: 0;
}
.finish-confirm-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.55);
}
.finish-confirm-overlay.is-open {
  display: flex !important;
}
.finish-confirm-card {
  width: min(460px, 90vw);
  padding: 30px 34px;
  box-sizing: border-box;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
  text-align: center;
}
.finish-confirm-title {
  margin-bottom: 14px;
  color: #1e3a5f;
  font-size: 24px;
  font-weight: 800;
}
.finish-confirm-message {
  margin-bottom: 24px;
  color: #4a5568;
  font-size: 16px;
  line-height: 1.5;
}
.finish-confirm-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
.finish-confirm-actions .ui.button {
  min-width: 150px;
  margin: 0;
}
#finish-study-button-ending.finish-study-results {
  width: auto !important;
  min-width: 320px !important;
  max-width: none !important;
  height: 80px !important;
  padding: 0 48px !important;
  font-size: 32px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  color: #fff !important;
  background-color: #4CBB17 !important;
  border-radius: 14px !important;
  flex: 0 0 auto !important;
  overflow: visible;
}
#finish-study-button-ending.finish-study-results::after {
  content: none !important;
  display: none !important;
}
#final-journey-title {
  text-align: center;
  font-size: clamp(18px, 2.6vw, 24px);
  font-weight: 800;
  color: #1e3a5f;
  margin: 0 10px 6px 10px;
  line-height: 1.3;
}
/* Plain-language headline on /final: the one number a player wants, in
   glucose units, shown before any metric acronym. */
#final-hero-summary {
  text-align: center;
  font-size: clamp(17px, 2.4vw, 22px);
  font-weight: 700;
  color: #1e3a5f;
  background: #eef4fb;
  border: 1px solid #c8dcf0;
  border-radius: 10px;
  padding: 12px 18px;
  margin: 0 auto 16px auto;
  max-width: 900px;
  line-height: 1.4;
}
/* Labelled Exit on /final — a destructive action must say what it does,
   unlike the icon-only close chips on /prediction and /ending. */
.final-exit-button.ui.button:hover,
.final-exit-button.ui.button:focus {
  background-color: #C42B1C !important;
  color: #fff !important;
}
/* Per-round fold toggle swaps its label when open. */
.ending-fold .fold-label-hide {
  display: none;
}
.ending-fold[open] .fold-label-hide {
  display: inline;
}
.ending-fold[open] .fold-label-show {
  display: none;
}
#final-switch-format-title.final-switch-format-title-visible {
  display: block !important;
  text-align: center;
  font-size: clamp(16px, 2.2vw, 20px);
  font-weight: 700;
  color: #2c5282;
  margin: 0 10px 10px 10px;
}
.cgm-duration-row {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 10px;
  width: 100%;
}
.cgm-duration-row .dash-input-container,
.cgm-duration-row .Select,
.cgm-duration-row .dash-dropdown {
  flex: 1 1 0;
  min-width: 0;
}
#challenge-unknown-wrap,
#paper-mention-wrap {
  padding: 12px 14px;
  background: #f8fafc;
  border: 1px solid #dbe4f0;
  border-radius: 10px;
}
#challenge-unknown-wrap .challenge-unknown-check,
#challenge-unknown-wrap .dash-checklist,
#paper-mention-wrap .paper-mention-check,
#paper-mention-wrap .dash-checklist {
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
}
#challenge-unknown-wrap .dash-checklist label,
#paper-mention-wrap .dash-checklist label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
#challenge-unknown-wrap input[type="checkbox"],
#paper-mention-wrap input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 3px;
  flex: 0 0 auto;
}
.faq-reply {
  margin-top: 10px;
  padding: 8px 10px;
  background: #f8fafc;
  border-left: 3px solid #2185d0;
}
.faq-question {
  margin-bottom: 12px;
}

html:not(.mobile-device) #ending-page {
  gap: 8px !important;
  padding-top: 4px !important;
  padding-bottom: 8px !important;
}
#ending-title {
  display: none !important;
}
html:not(.mobile-device) #ending-primary {
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: calc(100vh - 68px);
  max-height: calc(100vh - 68px);
  box-sizing: border-box;
  overflow: hidden;
}
html:not(.mobile-device) #ending-gamification {
  order: 0;
}
html:not(.mobile-device) #ending-source-info {
  order: 1;
}
html:not(.mobile-device) #ending-graph-card {
  order: 2;
}
html:not(.mobile-device) #ending-submit-row {
  order: 3;
}
html:not(.mobile-device) #ending-primary > #switch-format-error,
html:not(.mobile-device) #ending-primary > #switch-data-usage-consent,
html:not(.mobile-device) #ending-primary > #ending-switch-format-title {
  order: 4;
}
html:not(.mobile-device) #ending-gamification {
  padding: 8px 14px 6px 14px !important;
  margin: 0 auto !important;
  background: #f0f7ff !important;
  border: 1px solid #c5d9f0 !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
  flex-shrink: 0;
}
html:not(.mobile-device) #ending-gamification.ending-gamification-complete {
  padding: 12px 16px 10px 16px !important;
  background: #fff8e1 !important;
  border: 1px solid #f0d060 !important;
}
#ending-reaction-line.ending-celebrate,
#ending-reaction-line.ending-celebrate #ending-reaction-text {
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
}
#ending-milestone.ending-celebrate {
  font-size: 22px !important;
  font-weight: 800 !important;
  margin-top: 6px !important;
}
#ending-personal-best.ending-celebrate {
  font-size: 18px !important;
  padding: 4px 12px !important;
}
html:not(.mobile-device) #ending-graph-card {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
}
html:not(.mobile-device) #ending-source-info {
  flex-shrink: 0;
}
html:not(.mobile-device) #ending-glucose-chart-container {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
}
html:not(.mobile-device) #ending-static-graph .xtitle,
html:not(.mobile-device) #ending-static-graph .g-xtitle {
  display: none !important;
  visibility: hidden !important;
  font-size: 0 !important;
}
html:not(.mobile-device) #ending-static-graph,
html:not(.mobile-device) #ending-static-graph .js-plotly-plot,
html:not(.mobile-device) #ending-static-graph .plot-container {
  height: 100% !important;
  min-height: 0;
}
html:not(.mobile-device) #ending-graph-explanation,
html:not(.mobile-device) #ending-round-motivation {
  display: none !important;
}
html:not(.mobile-device) #ending-submit-row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  margin-top: 2px !important;
  flex-shrink: 0;
}
html:not(.mobile-device) #ending-submit-row.ending-submit-row-last {
  flex-wrap: wrap !important;
  margin-top: 10px !important;
  margin-bottom: 4px !important;
}
html:not(.mobile-device) #ending-submit-row.ending-submit-row-last #next-round-button {
  display: none !important;
}
html:not(.mobile-device) #ending-copy-link-row {
  margin-top: 8px !important;
}
#ending-copy-link-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  box-sizing: border-box !important;
  width: auto !important;
  max-width: 100% !important;
  padding: 10px 22px !important;
  line-height: 1.3 !important;
  white-space: nowrap;
}
html:not(.mobile-device) #next-round-button {
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}
#ending-submit-row .ending-switch-format-btn,
#final-action-row .ending-switch-format-btn {
  height: 48px !important;
  min-height: 48px !important;
  padding: 0 14px !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 8px !important;
  background-color: #1d4ed8 !important;
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  white-space: nowrap;
  flex: 1 1 auto;
  max-width: 280px;
}
#final-action-row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  margin: 0 auto 16px auto;
  padding: 0 10px;
  width: 100%;
  box-sizing: border-box;
  flex-shrink: 0;
}
.glucose-chart-shell {
  --plotly-top-margin: 8px;
  --food-bubble-strip-height: 22px;
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
}

.glucose-chart-shell .js-plotly-plot,
.glucose-chart-shell .plot-container,
.glucose-chart-shell .svg-container,
#ending-static-graph .js-plotly-plot,
#ending-static-graph .plot-container,
#ending-static-graph .svg-container {
  width: 100% !important;
  height: 100% !important;
  min-height: 0;
}

.meal-food-bubble-strip {
  /* Sit on the cartesian top edge (legend/icons are inside the plot now). */
  position: absolute;
  top: var(--plotly-top-margin);
  left: 56px;
  right: 20px;
  height: var(--food-bubble-strip-height);
  margin: 0;
  pointer-events: none;
  z-index: 4;
}

.meal-food-speech-bubble {
  position: absolute;
  top: auto;
  bottom: 1px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: max-content;
  height: 22px;
  padding: 0 6px 0 4px;
  white-space: nowrap;
  border: 2px solid #2e7d32;
  border-radius: 16px 16px 16px 5px;
  background: #ffffff;
  color: #1b5e20;
  box-shadow: 0 2px 5px rgba(46, 125, 50, 0.32);
  pointer-events: auto;
  touch-action: manipulation;
  cursor: pointer;
  z-index: 5;
}

.meal-food-speech-bubble:hover,
.meal-food-speech-bubble:focus-visible {
  background: #e8f5e9;
  box-shadow: 0 3px 8px rgba(46, 125, 50, 0.42);
  transform: translateX(-50%) translateY(-1px);
}

.meal-food-speech-bubble[data-count]::before {
  content: attr(data-count);
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: #2e7d32;
  color: #ffffff;
  font-size: 10px;
  line-height: 16px;
  font-weight: 700;
  text-align: center;
}

.meal-food-speech-bubble::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  background: #ffffff;
  border-right: 1px solid #2e7d32;
  border-bottom: 1px solid #2e7d32;
  transform: rotate(45deg);
}

.meal-food-bubble-apple {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  display: block;
  pointer-events: none;
}

.meal-food-bubble-label {
  font-size: 9px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
  pointer-events: none;
}

.meal-food-bubble-open {
  font-size: 18px;
  line-height: 1;
  font-weight: 800;
  pointer-events: none;
}

.meal-food-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 80;
  align-items: center;
  justify-content: center;
}

.meal-food-lightbox.is-open {
  display: flex;
}

.meal-food-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
}

.meal-food-lightbox-image {
  position: relative;
  z-index: 1;
  max-width: min(90vw, 720px);
  max-height: 85vh;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
  background: #111;
}

.meal-food-lightbox-gallery {
  display: none;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: min(92vw, 920px);
  max-height: 85vh;
  padding: 10px;
  overflow: auto;
  background: #111;
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
  align-items: center;
}

.meal-food-lightbox-tile {
  width: 100%;
  max-height: min(40vh, 280px);
  object-fit: contain;
  background: #000;
  border-radius: 6px;
}

.meal-food-lightbox-tile[src=""],
.meal-food-lightbox-tile:not([src]) {
  display: none;
}

.meal-food-lightbox-note {
  display: none;
  position: relative;
  z-index: 1;
  width: min(92vw, 720px);
  max-height: 85vh;
  overflow: auto;
  padding: 28px 32px 32px 48px;
  box-sizing: border-box;
  background: #fff8dc;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 31px,
    rgba(80, 130, 180, 0.28) 31px,
    rgba(80, 130, 180, 0.28) 32px
  );
  border: 1px solid #d6c48a;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.28), inset 40px 0 0 #f3e2b3;
  color: #1f2937;
  font-family: "Segoe UI", "Georgia", serif;
  font-size: 22px;
  line-height: 32px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.meal-food-lightbox.is-note .meal-food-lightbox-image,
.meal-food-lightbox.is-composite .meal-food-lightbox-image {
  display: none;
}

.meal-food-lightbox.is-note .meal-food-lightbox-note {
  display: block;
}

.meal-food-lightbox.is-composite .meal-food-lightbox-gallery {
  display: grid;
}

/* Results → /final: cover the still-mounted ending page while display_page
   builds the share/leaderboard layout (several seconds). One click, no
   second press on the leftover Results button. */
.results-loading-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.78);
  pointer-events: all;
}
/* Only while /ending is still mounted. :has(#final-title) used to hide it on
   /final, so Exit → landing (no #final-title, class still is-open) painted a
   full-screen white veil over the consent page. */
#page-content:has(#ending-title) + #results-loading-overlay.is-open {
  display: flex;
}
.results-loading-card {
  font-size: 22px;
  font-weight: 700;
  color: #1a365d;
}

/* Deferred /final slots stay collapsed until the follow-up ticks fill them. */
#final-share-panel:empty,
#final-synthesis-card:empty {
  display: none;
}



/* Submit while the hidden hour is unfinished. Fomantic's `.ui.green.button`
   sets its background `!important`, so the callback's inline grey never
   applied: the disabled button rendered as green at 45% opacity, which reads
   as a styling choice, not as "not yet" — a tester's player took the dead
   button for a bug. The gate therefore drops the `green` class instead of
   fighting it, same as the mobile wizard's Next button. */
#submit-button.submit-button-disabled {
  background-color: #9aa0a6 !important;
  color: #ffffff !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
  box-shadow: none !important;
}
#submit-button.submit-button-disabled:hover,
#submit-button.submit-button-disabled:focus,
#submit-button.submit-button-disabled:active {
  background-color: #9aa0a6 !important;
  color: #ffffff !important;
}