/* =========================================================
   Flamingo TV Dashboard — styles
   Brand tokens lifted from flamingoplumbing.com:
   Anton / Inter Tight display, Source Sans 3 body,
   cut-corner (chamfer) signature shape on every highlight.
   Designed at a fixed 1920×1080 stage, layout-zoomed to the TV's
   native output resolution so type stays crisp on 4K displays.
   ========================================================= */

:root {
  --pink: #ED3A78;
  --pink-deep: #c92c63;
  --pink-mid: #F27DA9;
  --pink-light: #F8B3CF;
  --blue: #1449A0;
  --navy: #012660;
  --navy-deep: #011a42;
  --navy-ink: #010f27;
  --mint: #BAFDE4;
  --beak: #FAB268;
  --paper: #FFFFFF;
  --line: rgba(255, 255, 255, 0.12);
  --line-soft: rgba(255, 255, 255, 0.07);
  --muted: rgba(255, 255, 255, 0.62);
  --display: "Anton", "Inter Tight", system-ui, sans-serif;
  --heading: "Inter Tight", system-ui, sans-serif;
  --body: "Source Sans 3", system-ui, sans-serif;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --cut: 14px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  background: var(--navy-ink);
  overflow: hidden;
  cursor: none; /* it's a TV — hide the pointer */
}

/* ---- fixed-size stage, layout-zoomed by JS to fit the viewport ---- */
#stage {
  width: 1920px;
  height: 1080px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: center center;
  display: flex;
  flex-direction: column;
  font-family: var(--body);
  color: var(--paper);
  background:
    radial-gradient(1400px 700px at 85% -10%, rgba(20, 73, 160, 0.55), transparent 60%),
    radial-gradient(1100px 800px at -10% 110%, rgba(237, 58, 120, 0.16), transparent 55%),
    linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 55%, var(--navy-ink) 100%);
}

/* ============================ top bar ============================ */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 34px 56px 22px;
  border-bottom: 1px solid var(--line);
}

.brand { display: flex; align-items: center; gap: 20px; width: 420px; }
.brand-pinky { height: 88px; }
.brand-name { display: flex; flex-direction: column; line-height: 1; }
.brand-top {
  font-family: var(--display);
  font-size: 42px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--pink);
}
.brand-bottom {
  margin-top: 7px;
  font-family: var(--heading);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--paper);
}

.screen-heading { text-align: center; }
.screen-heading h1 {
  font-family: var(--display);
  font-size: 64px;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1;
}
.screen-sub {
  margin-top: 10px;
  font-family: var(--heading);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--pink-mid);
}

.status { width: 420px; text-align: right; }
.clock {
  font-family: var(--heading);
  font-weight: 800;
  font-size: 44px;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.freshness {
  margin-top: 6px;
  font-size: 22px;
  font-weight: 600;
  color: var(--muted);
}
.freshness.stale {
  display: inline-block;
  color: var(--navy-ink);
  background: var(--beak);
  padding: 4px 14px;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}

/* ============================ board ============================ */
.board {
  flex: 1;
  padding: 26px 56px 12px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  opacity: 1;
  transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out);
}
.board.switching { opacity: 0; transform: translateX(-30px); }

/* column header row */
.board-head {
  display: grid;
  grid-template-columns: 110px 160px 1fr repeat(3, 300px);
  gap: 24px;
  align-items: end;
  padding: 0 36px 6px;
  font-family: var(--heading);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.board-head .m { text-align: right; }
.board-head .m .hint {
  display: block;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: none;
  color: rgba(255, 255, 255, 0.38);
}

/* ---- tech rows ---- */
/* Rows flex-fill the stage so any roster size (5 backflow techs or
   8+ plumbers) always fits the screen without scrolling. */
.row {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 110px 160px 1fr repeat(3, 300px);
  gap: 24px;
  align-items: center;
  padding: 0 36px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--line-soft);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  transition: transform 0.6s var(--ease-out);
}

/* Board shows top 3 only (Josh's call) — rows are tall, so type and
   headshots run big. */
.row .rank {
  font-family: var(--display);
  font-size: 68px;
  color: var(--muted);
  line-height: 1;
}

.row .avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--blue);
  border: 3px solid rgba(255, 255, 255, 0.25);
}
.row .avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Real photos zoom in on the face (headshots have lots of background).
   Each source photo gets its own focal point so the face lands at the
   center of both the compact wall avatar and the large rotating avatar.
   Initials avatars are excluded via the .ph class. */
.avatar img.ph, .wavatar img.ph {
  --avatar-zoom: 1.9;
  --avatar-origin-x: 50%;
  --avatar-origin-y: 22%;
  transform: scale(var(--avatar-zoom));
  transform-origin: var(--avatar-origin-x) var(--avatar-origin-y);
}

/* Per-technician face centers, measured from the source portraits. */
img.ph[src$="35331613.jpg"] { --avatar-origin-x: 49.4%; --avatar-origin-y: -6.7%; } /* Jack Brown */
img.ph[src$="4448.jpg"]     { --avatar-origin-x: 57.2%; --avatar-origin-y: 0.6%; }  /* Kyle Roiko */
img.ph[src$="4481.jpg"]     { --avatar-origin-x: 60.1%; --avatar-origin-y: -0.7%; } /* Javonn Taylor */
img.ph[src$="4492.jpg"]     { --avatar-zoom: 2; --avatar-origin-x: 58.2%; --avatar-origin-y: -3.1%; } /* Bob David Torres */
img.ph[src$="4547.jpg"]     { --avatar-origin-x: 61.2%; --avatar-origin-y: -1%; }   /* Cody Sharrah */
img.ph[src$="62908326.jpg"] { --avatar-origin-x: 47.5%; --avatar-origin-y: 9.5%; }  /* Alex Fernandez */
img.ph[src$="63067696.jpg"] { --avatar-origin-x: 54.9%; --avatar-origin-y: -6.1%; } /* Bert Perez */
img.ph[src$="63068184.jpg"] { --avatar-origin-x: 50%; --avatar-origin-y: 4.1%; }    /* Jordan Lorente */
img.ph[src$="78706529.jpg"] { --avatar-zoom: 2.1; --avatar-origin-x: 40.5%; --avatar-origin-y: 13.9%; } /* Dustin Henderson */
img.ph[src$="79050428.jpg"] { --avatar-zoom: 1.7; --avatar-origin-x: 58.5%; --avatar-origin-y: -2.8%; } /* Cole Lappe */
img.ph[src$="82125742.jpg"] { --avatar-zoom: 2; --avatar-origin-x: 38.2%; --avatar-origin-y: 20.9%; }   /* Michael Llanes */
img.ph[src$="89703428.jpg"] { --avatar-zoom: 2; --avatar-origin-x: 36%; --avatar-origin-y: 1.7%; }      /* Chase Addy */
img.ph[src$="91748767.jpg"] { --avatar-zoom: 2.5; --avatar-origin-x: 46.5%; --avatar-origin-y: 14%; }   /* Zay Parkell */
img.ph[src$="91756468.jpg"] { --avatar-origin-x: 63.9%; --avatar-origin-y: 16.8%; } /* Alex Llanes */
img.ph[src$="92725673.jpg"] { --avatar-origin-x: 50.8%; --avatar-origin-y: 6%; }    /* Elliot Skogman */
img.ph[src$="95378410.jpg"] { --avatar-zoom: 3.6; --avatar-origin-x: 52.6%; --avatar-origin-y: 36.3%; } /* Avi Marciano */
img.ph[src$="95841640.jpg"] { --avatar-zoom: 5.1; --avatar-origin-x: 51.2%; --avatar-origin-y: 33.2%; } /* Shane Arnold */

.row .name {
  font-family: var(--heading);
  font-weight: 700;
  font-size: 52px;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.row .val {
  text-align: right;
  font-family: var(--heading);
  font-weight: 800;
  font-size: 54px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}
.row .val .nodata { color: rgba(255, 255, 255, 0.3); font-weight: 600; }

/* per-metric leader chip (👑 column leader) */
.row .val .lead-chip {
  display: inline-block;
  vertical-align: middle;
  margin-right: 12px;
  font-family: var(--heading);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy-ink);
  background: var(--mint);
  padding: 3px 12px 4px;
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
}

/* ---- top-3 emphasis ---- */
.row.top1 {
  flex: 1.3;
  background: linear-gradient(90deg, rgba(237, 58, 120, 0.92), rgba(201, 44, 99, 0.88));
  border-color: transparent;
  box-shadow: 0 18px 60px rgba(237, 58, 120, 0.35);
}
.row.top1 .rank { color: var(--paper); }
.row.top1 .name { font-size: 62px; }
.row.top1 .avatar { width: 150px; height: 150px; border-color: var(--paper); }
.row.top1 .val { font-size: 64px; }
.row.top1 .val .lead-chip { background: var(--paper); color: var(--pink-deep); }

.row.top2, .row.top3 {
  background: rgba(255, 255, 255, 0.085);
  border-color: var(--line);
}
.row.top2 .rank, .row.top3 .rank { color: var(--pink-mid); }

.crown { font-size: 40px; line-height: 1; margin-right: 4px; }

/* error / empty board state */
.board-msg {
  margin: auto;
  text-align: center;
  font-family: var(--heading);
  font-weight: 700;
  font-size: 40px;
  color: var(--muted);
}

/* ==================== goals screen (vertical instruments) ==================== */
.goals {
  flex: 1;
  min-height: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 260px;
}
.goalv { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.goalv-label {
  font-family: var(--heading);
  font-weight: 700;
  font-size: 34px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
}
.goalv-sub {
  margin-top: -8px;
  font-family: var(--heading);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--pink-mid);
}
.goalv-num {
  font-family: var(--heading);
  font-weight: 800;
  font-size: 64px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.goalv-num span { color: var(--muted); font-size: 38px; font-weight: 700; }
.goalv-caption {
  font-family: var(--heading);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pink-mid);
}
.goal-hit .goalv-caption { color: var(--mint); }

/* ---- shared scale styling for both goal instruments ---- */
.thermo-svg { width: 250px; height: 480px; }
.gaugev-svg { width: 385px; height: 480px; }
.goal-scale line { stroke: rgba(255, 255, 255, 0.3); stroke-width: 2; }
.goal-scale text {
  font-family: var(--heading);
  font-weight: 700;
  font-size: 22px;
  font-variant-numeric: tabular-nums;
  fill: var(--muted);
}
.gauge-target-tag {
  font-family: var(--heading);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  fill: rgba(255, 255, 255, 0.85);
}
.gauge-chip-text {
  font-family: var(--heading);
  font-weight: 800;
  font-size: 26px;
  font-variant-numeric: tabular-nums;
  text-anchor: middle;
}

/* ==================== wall layout (all four boards) ==================== */
.wall {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 4px 1fr;
  gap: 0 40px;
}
.wall-col {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.wall-trade {
  font-family: var(--display);
  font-weight: 400;
  font-size: 40px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--pink);
}
/* the "wall" */
.wall-divider {
  background: linear-gradient(180deg, transparent, var(--line) 12%, var(--line) 88%, transparent);
}
.wall-board {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 26px 20px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line-soft);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}
.wall-board-title {
  font-family: var(--heading);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--pink-mid);
}
.whead, .wrow {
  display: grid;
  /* name column gets the slack — full first + last names, no ellipsis */
  grid-template-columns: 46px 52px 1fr repeat(3, 122px);
  gap: 14px;
  align-items: center;
}
.whead {
  /* match .wrow's horizontal padding so titles right-align with values */
  padding: 0 14px;
  font-family: var(--heading);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.whead .wm { text-align: right; }
.wrow {
  flex: 1;
  min-height: 0;
  padding: 0 14px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--line-soft);
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
}
.wrow.top1 {
  background: linear-gradient(90deg, rgba(237, 58, 120, 0.92), rgba(201, 44, 99, 0.88));
  border-color: transparent;
}
.wrank {
  font-family: var(--display);
  font-size: 30px;
  color: var(--muted);
  line-height: 1;
}
.wrow.top1 .wrank { color: var(--paper); font-size: 26px; }
.wavatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--blue);
  border: 2px solid rgba(255, 255, 255, 0.25);
}
.wavatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wname {
  font-family: var(--heading);
  font-weight: 700;
  font-size: 24px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wv {
  text-align: right;
  font-family: var(--heading);
  font-weight: 800;
  font-size: 26px;
  font-variant-numeric: tabular-nums;
}
.wall-empty {
  margin: auto;
  font-family: var(--heading);
  font-weight: 700;
  font-size: 24px;
  color: var(--muted);
}

/* ==================== off-hours (business hours only) ==================== */
.offhours {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  background: var(--navy-ink);
  z-index: 10;
}
.offhours.visible { display: flex; }
.offhours img { height: 180px; opacity: 0.9; }
.offhours-title {
  font-family: var(--display);
  font-size: 72px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.offhours-sub {
  font-family: var(--heading);
  font-weight: 600;
  font-size: 28px;
  color: var(--muted);
}

/* ============================ bottom bar ============================ */
.bottombar {
  padding: 14px 56px 30px;
  display: flex;
  align-items: center;
  gap: 28px;
}
.rotation-dots { display: none; }
.rotation-dots .dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  transition: background 0.3s;
}
.rotation-dots .dot.active { background: var(--pink); }

.rotation-track {
  display: none;
  flex: 1;
  height: 6px;
  background: rgba(255, 255, 255, 0.12);
  clip-path: polygon(3px 0, 100% 0, 100% calc(100% - 3px), calc(100% - 3px) 100%, 0 100%, 0 3px);
  overflow: hidden;
}
.rotation-progress {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--pink), var(--pink-mid));
}