/* ───── Tokens (from Figma spec) ───── */
:root {
  --bg-grad: linear-gradient(90deg, rgba(238, 0, 246, 0.05) 0%, rgba(49, 215, 216, 0.05) 100%), #000000;
  --black: #000000;
  --white: #FFFFFF;
  --grey: #898989;
  --grey-dim: #5D6478;
  --cyan: #31D7D8;
  --magenta: #EE00F6;
  --yellow: #FCEC4E;
  --orange: #FF7627;
  --green: #1EC244;

  --panel-bg: rgba(255, 255, 255, 0.05);
  --panel-border: rgba(255, 255, 255, 0.2);
  --panel-row-divider: rgba(255, 255, 255, 0.2);
  --btn-bg: rgba(255, 255, 255, 0.1);

  --tag-bkg: linear-gradient(0deg, rgba(238, 0, 246, 0.2), rgba(238, 0, 246, 0.2)),
             linear-gradient(90deg, rgba(49, 215, 216, 0.2) 0%, rgba(255, 239, 104, 0.2) 100%),
             #000000;

  --cyan-2: rgba(49, 215, 216, 0.2);
  --cyan-bar-dim: rgba(49, 215, 216, 0.05);

  /* Per-manager avatar colors */
  --mgr-ah-bg: rgba(49, 215, 216, 0.2);   --mgr-ah-fg: #31D7D8;
  --mgr-jm-bg: rgba(30, 194, 68, 0.2);    --mgr-jm-fg: #1EC244;
  --mgr-ps-bg: rgba(149, 23, 25, 0.2);    --mgr-ps-fg: #951719;
  --mgr-df-bg: rgba(182, 157, 20, 0.2);   --mgr-df-fg: #B69D14;
  --mgr-ar-bg: rgba(81, 57, 200, 0.2);    --mgr-ar-fg: #5139C8;
  --mgr-so-bg: rgba(163, 36, 144, 0.2);   --mgr-so-fg: #A32490;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background: var(--bg-grad);
  background-attachment: fixed;
  color: var(--white);
  font-family: "Mark Pro", "Mark OT", "Helvetica Neue", "Inter", system-ui, -apple-system, sans-serif;
  font-size: 14px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  letter-spacing: 0.05em;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

.app {
  position: relative;
  width: 1440px;
  margin: 0 auto;
  min-height: 1574px;
}

/* ───── Topbar (0,0 — 1440 × 50, black) ───── */
.topbar {
  position: relative;
  width: 1440px;
  height: 50px;
  background: var(--black);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 36px;
  z-index: 10;
}
.topbar .brand { display: flex; align-items: center; gap: 18px; }
.topbar .logo {
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.04em;
  color: var(--white);
}
.topbar .logo span { color: var(--magenta); }
.topbar .vbar {
  display: inline-block;
  width: 0;
  height: 32px;
  border-left: 2.5px solid var(--magenta);
}
.topbar .org {
  font-weight: 500;
  font-size: 16px;
  line-height: 28px;
  text-transform: uppercase;
  color: var(--white);
}
.topbar .user { display: flex; align-items: center; gap: 16px; }
.topbar .user .vbar { border-left: 2.5px solid var(--grey); height: 32px; }
.topbar .user .meta { font-size: 10px; line-height: 13px; text-transform: uppercase; color: var(--grey); }
.topbar .user .name { font-weight: 500; font-size: 16px; text-transform: uppercase; color: var(--white); }
.topbar .user .caret {
  width: 32px; height: 32px; border: 1px solid var(--grey); border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center; color: var(--grey);
}

/* ───── Sidebar (left 0, top 50, 106 × 1524, black) ───── */
.sidebar {
  position: absolute;
  left: 0;
  top: 50px;
  width: 106px;
  height: 1524px;
  background: var(--black);
  border-right: 1px solid var(--grey);
  padding: 30px 36px;
}
.sidebar .nav {
  display: flex;
  flex-direction: column;
  width: 50px;
  border-radius: 5px;
  overflow: hidden;
}
.sidebar .nav button {
  width: 50px;
  height: 50px;
  display: flex; align-items: center; justify-content: center;
  color: var(--grey);
  border-radius: 5px;
}
.sidebar .nav button.active {
  background: var(--cyan-2);
  color: var(--cyan);
}
.sidebar .nav button:hover:not(.active) { color: var(--white); }
.sidebar .nav svg { width: 20px; height: 20px; }

/* ───── Sub-header (106, 50 — 1334 × 60) ───── */
.subhead {
  position: absolute;
  left: 106px;
  top: 50px;
  width: 1334px;
  height: 60px;
  background: var(--panel-bg);
  border-bottom: 1px solid var(--panel-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 36px 0 20px;
}
.subhead .crumb { display: flex; align-items: center; gap: 20px; }
.subhead .crumb .title {
  font-weight: 500; font-size: 16px; line-height: 28px;
  text-transform: uppercase; color: var(--white);
}
.subhead .crumb .breadcrumb {
  font-weight: 500; font-size: 16px; line-height: 28px;
  text-transform: none; color: var(--grey); letter-spacing: 0.02em;
}
.subhead .crumb .sep { color: var(--grey); }
.subhead .crumb .back {
  display: inline-flex; align-items: stretch;
  height: 30px;
  background: var(--btn-bg);
  border: 1px solid var(--panel-border);
  border-radius: 5px;
  overflow: hidden;
}
.subhead .crumb .back .ico {
  width: 30px;
  display: flex; align-items: center; justify-content: center;
  border-right: 1px solid var(--cyan);
}
.subhead .crumb .back .ico svg { color: var(--cyan); width: 14px; height: 10px; }
.subhead .crumb .back .lbl {
  padding: 0 12px;
  display: flex; align-items: center;
  font-size: 14px; color: var(--white); text-transform: uppercase; letter-spacing: 0.05em;
}
.subhead .crumb .back:hover .lbl { color: var(--cyan); }

.time-tabs {
  display: flex;
  width: 384px; height: 30px;
  border: 1px solid var(--panel-border);
  border-radius: 5px;
  overflow: hidden;
}
.time-tabs button {
  background: var(--btn-bg);
  border-right: 1px solid var(--panel-border);
  font-size: 14px; text-transform: uppercase;
  color: var(--grey);
  white-space: nowrap;
  padding: 0 12px;
}
.time-tabs button:nth-child(1) { width: 60px; }
.time-tabs button:nth-child(2) { width: 71px; }
.time-tabs button:nth-child(3) { width: 71px; }
.time-tabs button:nth-child(4) { width: 71px; }
.time-tabs button:nth-child(5) { width: 111px; border-right: none; }
.time-tabs button.active {
  background: var(--cyan-2);
  border-bottom: 2px solid var(--cyan);
  color: var(--white);
}

/* ───── Main canvas (right of sidebar, below sub-header) ───── */
.main {
  position: absolute;
  left: 126px;
  top: 130px;
  width: 1278px;
}

/* ───── Metric strip (126, 130 — 1278 × 120) ───── */
.metric-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 30px;
}
.metric {
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 5px;
  padding: 20px;
  display: flex; flex-direction: column; justify-content: center;
  gap: 10px;
  height: 120px;
}
.metric .label { font-size: 14px; font-weight: 450; line-height: 19px; text-transform: uppercase; color: var(--white); }
.metric .value {
  display: flex; align-items: baseline; gap: 5px;
  font-size: 22px; font-weight: 500; line-height: 19px; text-transform: uppercase;
  color: var(--white);
}
.metric .value .sub { font-size: 14px; font-weight: 450; color: var(--grey); text-transform: uppercase; }
.metric .delta {
  display: flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 500; line-height: 19px; text-transform: uppercase; color: var(--white);
}
.metric .delta .arrow {
  display: inline-block; width: 14px; height: 8px;
  background: var(--magenta);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.metric .delta.warn { color: var(--orange); }
.metric .delta.warn .arrow { background: var(--orange); transform: scaleY(-1); }

/* ───── Search + Categories row (top 280 in spec) ───── */
.search-row {
  display: grid;
  grid-template-columns: 260px 1fr 300px;
  gap: 12px;
  margin-bottom: 20px;
}
.search-input {
  height: 30px;
  background: var(--btn-bg);
  border: 1px solid var(--panel-border);
  border-radius: 5px;
  padding: 5px 10px;
  display: flex; align-items: center; gap: 8px;
  color: var(--grey);
}
.search-input svg { width: 14px; height: 14px; color: #DADADA; }
.search-input input {
  flex: 1; background: transparent; border: 0; outline: 0;
  color: var(--white); font: inherit; letter-spacing: 0.05em;
}
.search-input input::placeholder { color: var(--grey); }

.dropdown {
  height: 30px;
  display: flex; align-items: stretch;
  border: 1px solid var(--panel-border);
  border-radius: 5px;
  overflow: hidden;
}
.dropdown .body {
  flex: 1; padding: 0 10px 0 10px;
  background: var(--btn-bg);
  display: flex; align-items: center; gap: 5px;
}
.dropdown .body .label { font-size: 12px; font-weight: 450; color: var(--grey); }
.dropdown .body .value { font-size: 14px; font-weight: 450; text-transform: uppercase; color: var(--white); }
.dropdown .caret {
  width: 36px;
  background: var(--cyan-2);
  border-left: 1px solid var(--cyan);
  display: flex; align-items: center; justify-content: center;
}
.dropdown .caret svg { width: 12px; height: 8px; color: var(--cyan); }

/* ───── Panel (shared shell) ───── */
.panel {
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 5px;
  overflow: hidden;
}
.panel-head {
  padding: 15px 20px;
  background: var(--panel-bg);
  border-bottom: 1px solid var(--panel-border);
  display: flex; justify-content: space-between; align-items: center;
  gap: 20px;
}
.panel-head .title-block { display: flex; flex-direction: column; gap: 0; }
.panel-head .title {
  font-size: 14px; font-weight: 450; line-height: 19px;
  text-transform: uppercase; color: var(--white);
}
.panel-head .sub {
  font-size: 12px; font-weight: 450; line-height: 19px;
  text-transform: uppercase; color: var(--grey);
}

/* ───── Two-col body layout ───── */
.body-grid {
  display: grid;
  grid-template-columns: 758px 500px;
  gap: 20px;
  align-items: start;
}
.body-grid .col-left,
.body-grid .col-right { display: flex; flex-direction: column; gap: 20px; }

/* ───── Managers table ───── */
.manager-table { padding: 0 20px 0; }
.manager-row {
  display: grid;
  grid-template-columns: 40px 1fr 60px 120px 175px 20px;
  align-items: center;
  gap: 12px;
  padding: 10px 5px 15px 0;
  border-bottom: 1px solid var(--panel-row-divider);
  cursor: pointer;
  transition: background 120ms;
  text-decoration: none;
  color: inherit;
}
.manager-row:last-child { border-bottom: none; }
.manager-row:hover { background: rgba(255, 255, 255, 0.02); }
.manager-row .ini {
  width: 40px; height: 40px; border-radius: 20px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 500; font-size: 14px; text-transform: uppercase;
}
.manager-row .info { display: flex; flex-direction: column; gap: 4px; }
.manager-row .info .name { font-size: 14px; font-weight: 450; color: var(--white); }
.manager-row .info .bar-track {
  position: relative;
  width: 235px; height: 8px;
  background: var(--cyan-bar-dim);
  border-radius: 5px;
}
.manager-row .info .bar-fill {
  position: absolute; left: 0; top: 0; height: 8px;
  background: var(--tag-bkg);
  border-radius: 5px;
}
.manager-row .insights {
  text-align: right;
  font-size: 12px; font-weight: 450; line-height: 15px;
  color: var(--grey);
}
.manager-row .insights.warn { color: var(--orange); }
.manager-row .nums { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.manager-row .nums .top { display: flex; align-items: center; gap: 5px; font-size: 14px; color: var(--white); }
.manager-row .nums .top .divider {
  display: inline-block; width: 0; height: 18px; border-left: 1px solid var(--grey);
}
.manager-row .nums .bot { font-size: 12px; color: var(--grey); }
.manager-row .chev {
  display: flex; align-items: center; justify-content: center; color: var(--cyan);
}
.manager-row .chev svg { width: 10px; height: 10px; }

/* Pitch number column */
.manager-row .pitches { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.manager-row .pitches .v { font-size: 14px; color: var(--white); }
.manager-row .pitches .l { font-size: 12px; color: var(--grey); }

/* ───── Pitch cadence ───── */
.cadence {
  padding: 0 30px 20px 20px;
}
.cadence-grid {
  display: grid;
  grid-template-columns: 60px repeat(7, 1fr);
  grid-template-rows: 24px repeat(4, 45px);
  gap: 4px;
}
.cadence-grid .day-head {
  font-size: 12px; color: var(--grey); text-align: center;
  display: flex; align-items: center; justify-content: center;
}
.cadence-grid .wk-label {
  font-size: 12px; color: var(--grey);
  display: flex; align-items: center;
}
.cadence-cell {
  border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; color: var(--white);
}
.cadence-cell.empty {
  background: rgba(137, 137, 137, 0.2);
  color: var(--grey);
}

/* ───── Category bars ───── */
.cat-list { padding: 0 20px 20px; display: flex; flex-direction: column; gap: 20px; }
.cat-row { display: flex; flex-direction: column; gap: 10px; }
.cat-row .top {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 14px;
}
.cat-row .top .name { color: var(--white); }
.cat-row .top .num { color: var(--grey); font-size: 12px; }
.cat-row .bar-track {
  height: 8px;
  background: var(--cyan-bar-dim);
  border-radius: 5px;
  overflow: hidden;
}
.cat-row .bar-fill {
  height: 8px;
  background: var(--tag-bkg);
  border-radius: 5px;
}

/* ───── Brand table ───── */
.brand-table { padding: 0 20px 0; }
.brand-row {
  display: grid;
  grid-template-columns: 40px 1fr auto 110px;
  align-items: center;
  gap: 10px;
  padding: 10px 5px 15px 0;
  border-bottom: 1px solid var(--panel-row-divider);
}
.brand-row:last-child { border-bottom: none; }
.brand-row .logo {
  width: 40px; height: 40px; background: #D9D9D9; border-radius: 5px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; color: #0A0D14; font-size: 16px;
}
.brand-row .logo img { width: 100%; height: 100%; object-fit: cover; }
.brand-row .meta .name { font-size: 14px; color: var(--white); }
.brand-row .meta .cat { font-size: 12px; color: var(--grey); margin-top: 4px; }
.brand-row .col {
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
  padding-right: 10px;
  border-right: 1px solid var(--panel-row-divider);
  min-width: 98px;
}
.brand-row .col:last-child { border-right: none; padding-right: 0; }
.brand-row .col .v { font-size: 14px; color: var(--white); }
.brand-row .col .l { font-size: 12px; color: var(--grey); display: flex; align-items: center; gap: 5px; }
.brand-row .col .l .arrow {
  display: inline-block; width: 14px; height: 8px;
  background: var(--magenta);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.brand-row .col .l.neg .arrow { background: var(--orange); transform: scaleY(-1); }

/* ───── Cold profiles ───── */
.cold-pill {
  padding: 6px 15px;
  background: rgba(252, 236, 78, 0.2);
  border: 1px solid var(--yellow);
  border-radius: 5px;
  font-size: 14px; font-weight: 500;
  color: var(--yellow);
  text-transform: uppercase;
}
.cold-list { padding: 0 20px 0; display: flex; flex-direction: column; }
.cold-row {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
}
.cold-row .avatar {
  width: 40px; height: 40px; border-radius: 5px; background: #D9D9D9; overflow: hidden;
}
.cold-row .avatar img { width: 100%; height: 100%; object-fit: cover; }
.cold-row .meta .name { font-size: 14px; color: var(--white); }
.cold-row .meta .sub { font-size: 12px; color: var(--grey); margin-top: 2px; }
.cold-row .days .v { font-size: 14px; color: var(--yellow); text-align: right; }
.cold-row .days .l { font-size: 12px; color: var(--grey); text-align: right; }

/* ───── Manager detail page (Figma spec) ───── */
.detail-head {
  /* 1278 × 85, padded 20, single horizontal row */
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 20px;
  height: 85px;
  margin-bottom: 30px;
}
.detail-head .left {
  display: flex; align-items: flex-start; gap: 10px;
}
.detail-head .ini {
  width: 40px; height: 40px; border-radius: 20px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 500; font-size: 14px; text-transform: uppercase;
  flex: none;
}
.detail-head .name-block { display: flex; flex-direction: column; gap: 5px; }
.detail-head .name-block .name-row { display: flex; align-items: center; gap: 10px; }
.detail-head .name-block .name {
  font-size: 16px; font-weight: 450; text-transform: uppercase;
  color: var(--white);
}
.detail-head .name-block .badge {
  font-size: 10px; font-weight: 500;
  background: rgba(238, 0, 246, 0.2);
  color: var(--white);
  border: 1px solid var(--magenta);
  padding: 0 10px;
  border-radius: 5px;
  text-transform: uppercase;
  line-height: 19px;
}
.detail-head .name-block .sub {
  font-size: 14px; color: var(--grey);
  text-transform: uppercase;
}
.detail-head .stats { display: flex; align-items: flex-end; gap: 20px; }
.detail-head .stats .stat {
  display: flex; flex-direction: column; align-items: flex-end; gap: 5px;
  text-align: right;
}
.detail-head .stats .stat .v {
  font-size: 22px; font-weight: 500; line-height: 19px;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--white);
}
.detail-head .stats .stat .v.magenta { color: var(--magenta); }
.detail-head .stats .stat .v.cyan    { color: var(--cyan); }
.detail-head .stats .stat .l {
  font-size: 12px; font-weight: 500; line-height: 19px;
  color: var(--grey); text-transform: uppercase; letter-spacing: 0.05em;
}

/* Roster grid: 5 cols × 3 rows */
.roster-grid {
  padding: 20px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 15px;
}
.roster-card {
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 5px;
  padding: 10px;
  display: flex; flex-direction: column; gap: 10px;
  height: 115px;
  position: relative;
}
.roster-card .head { display: flex; align-items: flex-start; gap: 10px; }
.roster-card .avatar {
  width: 50px; height: 50px; border-radius: 5px; overflow: hidden; background: #D9D9D9;
  flex: none;
}
.roster-card .avatar img { width: 100%; height: 100%; object-fit: cover; }
.roster-card .head-text { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.roster-card .name {
  font-size: 14px; font-weight: 450; color: var(--white);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.roster-card .last {
  font-size: 12px; letter-spacing: 0.05em;
}
.roster-card .last.hot    { color: var(--magenta); }
.roster-card .last.warm   { color: var(--grey); }
.roster-card .last.cold   { color: var(--yellow); }
.roster-card .stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.roster-card .stat-row .col {
  display: flex; flex-direction: column; align-items: flex-start;
}
.roster-card .stat-row .col .v {
  font-size: 16px; font-weight: 500; line-height: 19px;
  color: var(--white); letter-spacing: 0.05em;
}
.roster-card .stat-row .col .v.muted { color: var(--grey); }
.roster-card .stat-row .col .l {
  font-size: 12px; line-height: 15px;
  color: var(--grey); letter-spacing: 0.05em;
}

/* Recent pitches */
.recent-list { padding: 0; }
.recent-row {
  display: grid;
  grid-template-columns: 60px 50px 1fr auto;
  gap: 10px;
  align-items: center;
  height: 75px;
  margin: 0 20px;
  padding: 10px 5px 15px 0;
  border-bottom: 1px solid var(--panel-row-divider);
}
.recent-row:last-child { border-bottom: none; }
.recent-row .date {
  font-size: 12px;
  color: var(--grey);
  letter-spacing: 0.05em;
}
.recent-row .avatar { width: 50px; height: 50px; border-radius: 5px; background: #D9D9D9; overflow: hidden; }
.recent-row .avatar img { width: 100%; height: 100%; object-fit: cover; }
.recent-row .pitch .title { font-size: 14px; color: var(--white); }
.recent-row .pitch .cat { font-size: 14px; color: var(--grey); margin-top: 4px; letter-spacing: 0.05em; }
.recent-row .right {
  display: flex; flex-direction: column; align-items: flex-end; gap: 5px;
}
.recent-row .pill {
  height: 20px;
  padding: 0 10px;
  display: inline-flex; align-items: center; gap: 5px;
  border-radius: 5px;
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.05em; text-transform: uppercase;
  background: rgba(238, 0, 246, 0.2);
  color: var(--white);
  border: 1px solid var(--magenta);
}
.recent-row .pill::before {
  content: "";
  display: inline-block;
  width: 10px; height: 10px;
  background: var(--cyan);
  -webkit-mask: radial-gradient(circle, transparent 2px, black 2.5px);
  border-radius: 50%;
}
.recent-row .pill.off {
  background: var(--panel-bg);
  color: var(--grey);
  border: 1px solid var(--panel-border);
}
.recent-row .pill.off::before { display: none; }
.recent-row .right .brand-line {
  font-size: 12px;
  color: var(--grey);
  letter-spacing: 0.05em;
}

/* ───── Cadence charts (day-of-week + daily) ───── */
.panel-head .title svg.title-icon { width: 18px; height: 18px; vertical-align: -3px; margin-right: 6px; color: var(--white); }
.panel-head .sub.warn {
  display: flex; align-items: center; gap: 6px;
  color: var(--yellow);
}
.panel-head .sub.warn svg { width: 14px; height: 14px; }

.chart-legend { display: flex; align-items: center; gap: 20px; font-size: 12px; color: var(--grey); letter-spacing: 0.05em; }
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; text-transform: none; }
.chart-legend .dot { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.chart-legend .dot.cyan { background: var(--cyan); }
.chart-legend .dot.grey { background: rgba(255, 255, 255, 0.25); }

.dow-chart {
  padding: 20px 20px 0;
  display: flex; flex-direction: column; gap: 12px;
}
.dow-row {
  display: grid;
  grid-template-columns: 40px 1fr 100px;
  align-items: center;
  gap: 14px;
}
.dow-row .day-label { font-size: 13px; color: var(--grey); letter-spacing: 0.05em; }
.dow-row .bar-track {
  height: 18px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 4px;
  overflow: hidden;
}
.dow-row .bar-fill {
  height: 100%;
  background: rgba(238, 0, 246, 0.45);
  border-radius: 4px;
}
.dow-row.peak .bar-fill {
  background: var(--orange);
}
.dow-row .nums {
  font-size: 13px;
  color: var(--white);
  text-align: right;
  letter-spacing: 0.05em;
}
.dow-row .nums .pct { color: var(--grey); }

.dow-callout {
  margin: 20px;
  padding: 14px 16px;
  background: rgba(252, 236, 78, 0.08);
  border: 1px solid rgba(252, 236, 78, 0.5);
  border-radius: 6px;
  color: var(--yellow);
  font-size: 13px;
  line-height: 1.55;
  letter-spacing: 0.02em;
}

.daily-chart {
  padding: 12px 20px 20px;
  height: 280px;
}
.daily-chart svg { width: 100%; height: 100%; display: block; }