/* Mango Live Check - the stage.
   Authored at real broadcast pixels: 1 pixel here is 1 pixel of the 1080 by
   1920 frame, so the 36 pixel minimum in the brief is enforceable by reading
   this file. Nothing animates. Screens change instantly. */

:root {
  --stage:   #1B130E;
  --tile:    #241A14;
  --text:    #F7EEE5;
  --muted:   #B9A898;
  --divider: #3A2C23;
  --fail:    #FF4F5E;
  --accent:  #FF9B3D;

  /* Overwritten from frame.js so the zone boundaries have one home. */
  --frame-w: 1080px;
  --frame-h: 1920px;
  --band-top: 240px;
  --band-h: 180px;
  --content-top: 420px;
  --content-h: 880px;

  --gutter: 64px;
  --fit: 1;    /* set per screen when a screen would otherwise overflow */
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--stage);
  overflow: hidden;
}

body {
  font-family: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

/* ------------------------------------------------------------- the frame */

.frame {
  position: absolute;
  width: var(--frame-w);
  height: var(--frame-h);
  transform-origin: top left;
  background: var(--stage);
  overflow: hidden;
}

/* --------------------------------------------------- the presenter band */

.band {
  position: absolute;
  top: var(--band-top);
  left: var(--gutter);
  right: var(--gutter);
  height: var(--band-h);
  display: flex;
  align-items: center;
  gap: 40px;
}

.cam {
  width: 160px;
  height: 160px;
  flex: 0 0 160px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--tile);
  border: 3px solid var(--divider);
  position: relative;
}

.cam video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* The presenter sees themselves the way a mirror shows them. */
  transform: scaleX(-1);
}

.cam-off {
  position: absolute;
  inset: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  line-height: 1.05;
  text-align: center;
  color: var(--muted);
}

.cred {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cred li {
  font-size: 40px;
  line-height: 1.32;
  font-weight: 500;
  color: var(--muted);
  font-stretch: 100%;
}

/* ------------------------------------------------------- the content area */

.content {
  position: absolute;
  top: var(--content-top);
  left: 0;
  width: 100%;
  height: var(--content-h);
  padding: 0 var(--gutter);
}

/* Every screen fills the content area and never scrolls.
   The inner box is laid out larger than the screen by exactly 1/--fit and
   then scaled back down by --fit, so a screen with more words than usual
   shrinks as a whole instead of scrolling. The floor is 0.9 and the smallest
   size in this file is 40 pixels, which puts the smallest text that can ever
   reach the broadcast at 36 pixels: the minimum in the brief, exactly. */
.screen {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.screen[hidden] { display: none; }

.screen-inner {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100% / var(--fit));
  height: calc(100% / var(--fit));
  padding: 24px var(--gutter) 56px;
  display: flex;
  flex-direction: column;
  justify-content: safe center;
  transform: scale(var(--fit));
  transform-origin: top left;
}

/* A headline does the job the small grey labels used to do. */
.screen-head {
  margin: 0 0 32px;
  font-size: 64px;
  line-height: 1.1;
  font-weight: 800;
  font-stretch: 78%;
  letter-spacing: -0.5px;
}

.caption {
  margin: 0 0 24px;
  font-size: 40px;
  color: var(--muted);
  font-weight: 500;
}

.source {
  margin: 32px 0 0;
  font-size: 40px;
  color: var(--muted);
  font-weight: 400;
}

/* ------------------------------------------------------------------ idle */

.screen-idle { justify-content: center; }

.idle-line {
  margin: 0;
  font-size: 84px;
  line-height: 1.08;
  font-weight: 800;
  font-stretch: 78%;
}

.idle-line-2 { color: var(--accent); }

.upnext { margin-top: 72px; }

.upnext-label {
  margin: 0 0 16px;
  font-size: 40px;
  color: var(--muted);
  font-weight: 600;
}

.upnext-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 40px;
}

.upnext-list li {
  font-size: 48px;
  font-weight: 700;
  font-stretch: 85%;
}

/* --------------------------------------------------------------- running */

.running-host {
  margin: 0 0 40px;
  font-size: 48px;
  font-weight: 700;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
}

.steps li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 32px;
  padding: 18px 0;
  border-bottom: 1px solid var(--divider);
  font-size: 44px;
  font-weight: 600;
  color: var(--muted);
}

.steps li[data-state="running"] { color: var(--text); }
.steps li[data-state="done"] { color: var(--text); }
.steps li[data-state="skipped"],
.steps li[data-state="failed"] { color: var(--muted); }

.step-state {
  font-size: 40px;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
}

.steps li[data-state="done"] .step-state { color: var(--accent); }

/* ------------------------------------------------------------ 1. score */

.screen-score { justify-content: center; }

.biz-name {
  margin: 0;
  font-size: 64px;
  line-height: 1.08;
  font-weight: 800;
  font-stretch: 78%;
  overflow-wrap: anywhere;
}

.biz-meta {
  margin: 8px 0 0;
  font-size: 44px;
  font-weight: 500;
  color: var(--muted);
}

.score-row {
  margin: 8px 0 0;
  display: flex;
  align-items: baseline;
  gap: 28px;
}

/* Section 7. The numeral is brand orange at every score. A green number
   tells an invisible business it is fine, which is the one thing the screen
   must never say. The bad news is carried by the status line underneath. */
.score-digit {
  font-size: 420px;
  line-height: 0.82;
  font-weight: 900;
  font-stretch: 62%;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.score-of {
  font-size: 56px;
  font-weight: 600;
  color: var(--muted);
}

.headline {
  margin: 24px 0 0;
  font-size: 60px;
  line-height: 1.16;
  font-weight: 700;
  font-stretch: 88%;
}

.statusline {
  margin: 20px 0 0;
  font-size: 48px;
  font-weight: 700;
  color: var(--fail);
}

/* ------------------------------------ 2. the answer they are missing from */

.ranking {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: rank;
}

.ranking li {
  display: flex;
  align-items: baseline;
  gap: 32px;
  padding: 20px 0;
  border-bottom: 1px solid var(--divider);
  font-size: 52px;
  font-weight: 700;
  font-stretch: 85%;
}

.ranking li:last-child { border-bottom: 0; }

.rank-num {
  flex: 0 0 72px;
  font-size: 52px;
  font-weight: 800;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.rank-name { overflow-wrap: anywhere; }

/* The business itself, dimmed, at the bottom of the list it is missing from. */
.ranking li.is-them { color: var(--muted); }
.ranking li.is-them .rank-num { color: var(--muted); }

.rank-tag {
  margin-left: auto;
  font-size: 44px;
  font-weight: 700;
  color: var(--fail);
  white-space: nowrap;
}

/* ------------------------------------------------ 3. what AI says they do */

.quote {
  margin: 0;
  padding: 0 0 0 32px;
  border-left: 8px solid var(--accent);
  font-size: 48px;
  line-height: 1.3;
  font-weight: 500;
}

/* -------------------------------------------- 4. what is broken right now */

.findings {
  list-style: none;
  margin: 0;
  padding: 0;
}

.findings li {
  display: flex;
  align-items: baseline;
  gap: 32px;
  padding: 18px 0;
  border-bottom: 1px solid var(--divider);
}

.findings li:last-child { border-bottom: 0; }

/* The number is what the eye lands on while the sentence is read aloud, so
   every number starts on the same left edge and every sentence starts on the
   same one after it. A long value such as "1.6 seconds" steps down a size
   rather than pushing its own sentence out of the column. */
.f-value {
  flex: 0 0 300px;
  font-size: 76px;
  line-height: 1;
  font-weight: 900;
  font-stretch: 70%;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.f-value[data-long="true"] { font-size: 56px; }

.f-text {
  margin: 0;
  font-size: 42px;
  line-height: 1.22;
  font-weight: 500;
}

/* ---------------------------------------------------- 5. the five checks */

.checks {
  list-style: none;
  margin: 0;
  padding: 0;
}

.checks li {
  display: flex;
  align-items: baseline;
  gap: 28px;
  padding: 20px 0;
  border-bottom: 1px solid var(--divider);
}

.checks li:last-child { border-bottom: 0; }

/* A pass is quiet. Only a failure draws the eye, because a failure is the
   reason the owner picks up the phone. Passes are never celebrated. */
.checks li[data-pass="true"] {
  color: var(--muted);
  font-size: 48px;
  font-weight: 600;
}

.checks li[data-pass="false"] {
  color: var(--text);
  font-size: 60px;
  font-weight: 800;
  font-stretch: 85%;
}

.c-mark {
  flex: 0 0 56px;
  font-weight: 800;
}

.checks li[data-pass="false"] .c-mark { color: var(--fail); }

.c-label { overflow-wrap: anywhere; }

/* --------------------------------------------------------- 6. three fixes */

.fixes {
  list-style: none;
  margin: 0;
  padding: 0;
}

.fixes li {
  display: flex;
  gap: 32px;
  padding: 20px 0;
  border-bottom: 1px solid var(--divider);
}

.fixes li:last-child { border-bottom: 0; }

.x-num {
  flex: 0 0 90px;
  font-size: 84px;
  line-height: 0.92;
  font-weight: 900;
  font-stretch: 62%;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.x-title {
  margin: 0 0 6px;
  font-size: 52px;
  line-height: 1.1;
  font-weight: 800;
  font-stretch: 82%;
}

.x-body {
  margin: 0;
  font-size: 40px;
  line-height: 1.22;
  font-weight: 500;
  color: var(--muted);
}

/* -------------------------------------------------------- 7. report card */

/* The one screen where a dashboard style is right, because it is looked at
   whole and screenshotted rather than narrated line by line. */
.screen-card { justify-content: center; }

/* Score down the whole left column, the other three stacked on the right.
   Stated explicitly rather than left to auto-placement, which puts the
   fourth tile on a row of its own underneath everything. */
.card-grid {
  display: grid;
  min-height: 0;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 24px;
  height: 100%;
}

.tile-score   { grid-column: 1; grid-row: 1 / -1; }
.tile-models  { grid-column: 2; grid-row: 1; }
.tile-problem { grid-column: 2; grid-row: 2; }
.tile-next    { grid-column: 2; grid-row: 3; }

.tile {
  background: var(--tile);
  border: 1px solid var(--divider);
  border-radius: 28px;
  padding: 32px 36px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}



.tile-label {
  margin: 0 0 12px;
  font-size: 40px;
  font-weight: 600;
  color: var(--muted);
}

.tile-score-row {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 20px;
}

.tile-digit {
  font-size: 250px;
  line-height: 0.84;
  font-weight: 900;
  font-stretch: 62%;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.tile-of {
  font-size: 44px;
  font-weight: 600;
  color: var(--muted);
}

.tile-name {
  margin: auto 0 0;
  font-size: 48px;
  line-height: 1.08;
  font-weight: 800;
  font-stretch: 78%;
  overflow-wrap: anywhere;
}

.model-rows {
  list-style: none;
  margin: 0;
  padding: 0;
}

.model-rows li {
  display: flex;
  align-items: baseline;
  gap: 20px;
  padding: 10px 0;
  font-size: 44px;
  font-weight: 700;
}

.m-mark { font-weight: 900; }
.model-rows li[data-listed="true"] .m-mark { color: var(--accent); }
.model-rows li[data-listed="false"] .m-mark { color: var(--fail); }
.model-rows li[data-listed="null"] { color: var(--muted); }

.tile-number {
  margin: 0;
  font-size: 84px;
  line-height: 1;
  font-weight: 900;
  font-stretch: 66%;
  font-variant-numeric: tabular-nums;
}

.tile-sentence {
  margin: 12px 0 0;
  font-size: 40px;
  line-height: 1.2;
  font-weight: 500;
  color: var(--muted);
}

.tile-cta {
  margin: auto 0 0;
  font-size: 48px;
  line-height: 1.1;
  font-weight: 800;
  font-stretch: 82%;
  color: var(--accent);
}

/* ------------------------------------------------------------ calm state */

.calm-kicker {
  margin: 0 0 20px;
  font-size: 44px;
  font-weight: 600;
  color: var(--muted);
}

.calm-text {
  margin: 0;
  font-size: 64px;
  line-height: 1.14;
  font-weight: 700;
  font-stretch: 85%;
}

/* ------------------------------------------------------------- face mode */

.screen-face .screen-inner { padding: 0; }

.face-slot {
  width: 100%;
  height: 100%;
  border-radius: 40px;
  overflow: hidden;
  background: var(--tile);
}

.face-slot video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scaleX(-1);
}

/* ----------------------------------------------------------- the marks */

/* Which screen is showing. Small, quiet, at the foot of the content area. */
.marks {
  position: absolute;
  left: calc(var(--gutter) * 2);
  bottom: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 14px;
}

.marks li {
  width: 44px;
  height: 8px;
  background: var(--divider);
  border-radius: 4px;
}

.marks li[data-on="true"] { background: var(--accent); }