/* Grata office TV scorecard — on-brand (patient-portal palette).
   Forest green #0B2E16 base, lime accent #DBF262, cream text.
   Conservative CSS: flexbox with -webkit- prefixes, NO flex `gap` (unsupported
   on old webOS), margins instead. */

@font-face {
  font-family: "Circular Std";
  src: url("/fonts/CircularStd-Book.ttf") format("truetype");
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: "Circular Std";
  src: url("/fonts/circular-std-medium-500.ttf") format("truetype");
  font-weight: 500; font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("/fonts/InstrumentSerif-Regular.ttf") format("truetype");
  font-weight: 400; font-display: swap;
}

* { -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; width: 100%; overflow: hidden; }

body {
  background: #0B2E16; /* fallback */
  background: -webkit-radial-gradient(50% 40%, ellipse, #18482B 0%, #0B2E16 70%);
  background: radial-gradient(ellipse at 50% 40%, #18482B 0%, #0B2E16 70%);
  color: #EAF0EA;
  font-family: "Circular Std", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

#root {
  display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-box-orient: vertical; -webkit-flex-direction: column; flex-direction: column;
  height: 100vh; width: 100vw;
  padding: 4vh 4vw 3vh;
  position: relative;
  overflow: hidden;
}

/* ---- header ---- */
.header {
  display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  -webkit-justify-content: space-between; justify-content: space-between;
  height: 6vh; margin-bottom: 3vh;
}
.brand-logo { height: 4.4vh; width: auto; display: block; }
.week {
  font-size: 2.2vh; color: #7E9686; font-weight: 400;
  text-transform: uppercase; letter-spacing: 3px;
}

/* ---- grid: 2 rows ---- */
#tiles {
  -webkit-box-flex: 1; -webkit-flex: 1; flex: 1;
  display: -webkit-flex; display: flex;
  -webkit-box-orient: vertical; -webkit-flex-direction: column; flex-direction: column;
  min-height: 0;  /* allow children to shrink so nothing overflows the viewport */
}
.row {
  display: -webkit-flex; display: flex;
  -webkit-align-items: stretch; align-items: stretch;
  min-height: 0;
}
.row-metrics { -webkit-flex: 0 0 30vh; flex: 0 0 30vh; margin-bottom: 2.4vh; }
.row-charts { -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; min-height: 0; }

/* ---- cards ---- */
.card {
  -webkit-box-flex: 1; -webkit-flex: 1; flex: 1;
  min-width: 0; overflow: hidden;
  margin: 0 1.1vw;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 2.4vh;
  -webkit-box-shadow: 0 8px 34px rgba(0, 0, 0, 0.28);
  box-shadow: 0 8px 34px rgba(0, 0, 0, 0.28);
  display: -webkit-flex; display: flex;
  -webkit-box-orient: vertical; -webkit-flex-direction: column; flex-direction: column;
}
.card:first-child { margin-left: 0; }
.card:last-child { margin-right: 0; }

/* number cards (row 1) */
.num-card {
  -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center;
  -webkit-align-items: center; align-items: center;
  text-align: center;
}
.num {
  font-family: "Instrument Serif", Georgia, "Times New Roman", serif;
  font-size: 13.5vh; line-height: 0.9; color: #F2F6EC; letter-spacing: -1px;
}
.num-label {
  margin-top: 1.8vh;
  font-size: 2.1vh; font-weight: 500; color: #DBF262;
  text-transform: uppercase; letter-spacing: 3px;
}
.num-delta {
  margin-top: 1.6vh;
  font-size: 1.9vh; font-weight: 500; letter-spacing: 0.5px; color: #7E9686;
}
.num-delta--up { color: #C6E84E; }
.num-delta--down { color: #C99A4E; }   /* warm amber — informative, not alarming */
.num-delta--flat { color: #7E9686; }
.num-card.is-stale .num { color: #5C6D5F; }

/* chart cards (row 2) — HTML bars: value label, bar, week tick */
.chart-card {
  padding: 3vh 3vh 2.4vh;
  -webkit-box-orient: vertical; -webkit-flex-direction: column; flex-direction: column;
}
.bars {
  -webkit-box-flex: 1; -webkit-flex: 1; flex: 1;
  display: -webkit-flex; display: flex;
  -webkit-align-items: stretch; align-items: stretch;
  width: 100%; min-height: 0;
}
.bcol {
  -webkit-box-flex: 1; -webkit-flex: 1; flex: 1;
  display: -webkit-flex; display: flex;
  -webkit-box-orient: vertical; -webkit-flex-direction: column; flex-direction: column;
  -webkit-align-items: center; align-items: center;
}
.bval { font-size: 1.9vh; color: #8FA898; margin-bottom: 1.1vh; height: 2.4vh; }
.bval-cur { color: #DBF262; font-weight: 500; }
.btrack {
  -webkit-box-flex: 1; -webkit-flex: 1; flex: 1;
  width: 100%;
  display: -webkit-flex; display: flex;
  -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center;
  -webkit-box-align: end; -webkit-align-items: flex-end; align-items: flex-end;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);  /* grounding baseline */
}
.bar {
  width: 44%; min-height: 2px;
  border-radius: 0.9vh 0.9vh 0 0;
  background: -webkit-linear-gradient(top, #3F6249, #2C4A37);
  background: linear-gradient(180deg, #3F6249, #2C4A37);
}
.bar-cur {
  background: -webkit-linear-gradient(top, #E4F779, #CBEA53);
  background: linear-gradient(180deg, #E4F779, #CBEA53);
  -webkit-box-shadow: 0 0 18px rgba(219, 242, 98, 0.35); box-shadow: 0 0 18px rgba(219, 242, 98, 0.35);
}
.btick { font-size: 1.7vh; color: #6E8473; margin-top: 1.3vh; letter-spacing: 0.5px; }
.btick-cur { color: #DBF262; font-weight: 500; }

/* ---- footer ---- */
.footer {
  display: none;                 /* shown by JS only when NOT healthy */
  position: absolute; right: 4vw; bottom: 2.6vh;
  -webkit-align-items: center; align-items: center;
  font-size: 1.8vh; color: #7E9686; letter-spacing: 0.5px;
}
.status-dot {
  width: 1.2vh; height: 1.2vh; border-radius: 50%;
  margin-right: 1vh; background: #7E9686;
}
.status-dot--ok { background: #DBF262; -webkit-box-shadow: 0 0 12px rgba(219,242,98,0.7); box-shadow: 0 0 12px rgba(219,242,98,0.7); }
.status-dot--pending { background: #C9A227; }
.status-dot--error { background: #C2554D; }

/* ---- full-screen message (errors / no token) ---- */
.message {
  -webkit-box-flex: 1; -webkit-flex: 1; flex: 1;
  display: -webkit-flex; display: flex;
  -webkit-box-orient: vertical; -webkit-flex-direction: column; flex-direction: column;
  -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center;
  -webkit-align-items: center; align-items: center;
  text-align: center; color: #7E9686;
}
.message-title {
  font-family: "Instrument Serif", Georgia, serif;
  font-size: 6vh; color: #EAF0EA; margin-bottom: 2vh;
}
.message-body { font-size: 2.6vh; max-width: 64vw; line-height: 1.5; }