/* Parcel — Today view (owned by the today view).
   Layout adapts to the width of the content column (container queries), not the viewport, because the
   sidebar takes room on desktop:  < 640px one column · 640–919 two columns (queue beside messages, activity beside
   the test lab) · ≥ 920 a main column (hero, tiles, test lab, chart) beside a side column (queue, messages, activity),
   products full width. Fresh mode (no store) shows the launch hero instead (.today-fresh, at the end). */

.view-today .today { container: today / inline-size; }

/* ---------------------------------------------------------------- grid */
.view-today .today-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "hero" "tiles" "queue" "msgs" "service" "activity" "report" "lab" "chart" "products";
  gap: var(--sp-4);
  padding-top: var(--sp-1);
}
/* Mondays after 7 am the weekly report sits right under the tiles (today/weekly.js toggles .has-report-day). */
.view-today .today-grid.has-report-day {
  grid-template-areas: "hero" "tiles" "report" "queue" "msgs" "service" "activity" "lab" "chart" "products";
}
.view-today .area-hero { grid-area: hero; }
.view-today .area-tiles { grid-area: tiles; }
.view-today .area-queue { grid-area: queue; }
.view-today .area-msgs { grid-area: msgs; }
.view-today .area-activity { grid-area: activity; }
.view-today .area-service { grid-area: service; }
.view-today .area-report { grid-area: report; }
.view-today .area-duo { grid-area: duo; }
/* Desktop only (today.js puts the cards in it at ≥ 920): Customer service, then the quiet weekly report, full width in the
   main column at their natural heights (side by side, Customer service was cramped and the report card hollow, V012). */
.view-today .today-duo { display: flex; flex-direction: column; gap: var(--sp-5); min-width: 0; }
.view-today .today-duo > [hidden] { display: none; }
.view-today .today-duo > * { grid-area: auto; }
.view-today .area-lab { grid-area: lab; }
.view-today .area-chart { grid-area: chart; }
.view-today .area-products { grid-area: products; }

@container today (min-width: 640px) {
  .view-today .today-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: "hero hero" "tiles tiles" "side side" "lab lab" "chart chart" "products products";
    gap: var(--sp-5);
  }
  .view-today .today-grid.has-report-day {
    grid-template-areas: "hero hero" "tiles tiles" "report report" "side side" "lab lab" "chart chart" "products products";
  }
}
/* Below 640 the side wrapper is transparent: the queue, messages and activity cards are grid items of their own. */
.view-today .today-side { display: contents; }
/* 640–919 (iPad portrait): the three side cards flow into two balanced columns at their natural heights (no card is
   stretched to match its neighbour; the shorter column simply ends first, like iPad widgets). */
@container today (min-width: 640px) and (max-width: 919.98px) {
  .view-today .today-side {
    grid-area: side;
    display: block;
    columns: 2; column-gap: var(--sp-5);
    margin-bottom: calc(-1 * var(--sp-5));
  }
  .view-today .today-side > * { break-inside: avoid; margin-bottom: var(--sp-5); }
}
@container today (min-width: 920px) {
  /* Two columns: hero, tiles and chart on the left; the queue and activity stacked in a side column.
     The side column's height changes with the queue, so it spans every row and the chart row absorbs any
     difference (the chart grows to fill it; see trends.js). The hero and tiles keep their natural height. */
  .view-today .today-grid {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    grid-template-areas:
      "hero side"
      "tiles side"
      "lab side"
      "duo side"
      "chart side"
      "products products";
    grid-template-rows: auto auto auto auto minmax(min-content, 1fr) auto;
  }
  .view-today .today-grid.has-report-day {
    grid-template-areas:
      "hero side"
      "tiles side"
      "report side"
      "lab side"
      "duo side"
      "chart side"
      "products products";
    grid-template-rows: auto auto auto auto auto minmax(min-content, 1fr) auto;
  }
  .view-today .today-side {
    grid-area: side;
    display: flex; flex-direction: column; gap: var(--sp-5);
    min-width: 0;
  }
  /* Every card keeps its natural height (V012): when the main column is taller the side column simply ends first, and
     when the side column is taller the chart grows to fill some of the difference, up to a size where a bar chart still
     reads well; past that the page shows, never an empty card. Today's queue shows 3 items (today/cards.js), which keeps
     the two columns close in height. */
  .view-today .today-chart { max-height: 600px; }
}

/* The Test lab and Cash share one grid area: stacked on phones and in the desktop main column, side by side at iPad width. */
.view-today .today-pair { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.view-today .today-pair > [hidden] { display: none; }
@container today (min-width: 640px) { .view-today .today-pair { gap: var(--sp-5); } }
@container today (min-width: 640px) and (max-width: 919.98px) {
  .view-today .today-pair.has-cash { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}

/* Cards on Today share one header rhythm. */
.view-today .card-header { margin-bottom: 10px; }
.view-today .card-heading svg { flex: none; }

/* ---------------------------------------------------------------- hero */
.view-today .today-hero {
  display: flex; align-items: center;
  width: 100%;
  padding: 18px 20px 20px;
  font: inherit; color: inherit; text-align: left;
}
.view-today .hero-inner {
  flex: 1 1 auto; min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "text ring" "goal ring";
  align-items: center;
  column-gap: var(--sp-4);
}
.view-today .hero-text {
  grid-area: text; align-self: end;
  container-type: inline-size;
  min-width: 0;
  display: flex; flex-direction: column; align-items: flex-start;
}
.view-today .hero-ring { grid-area: ring; }
.view-today .hero-head {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--fs-subhead); line-height: var(--lh-subhead); font-weight: var(--w-semibold);
  color: var(--label-2);
}
.view-today .hero-head svg { color: var(--label-3); margin-top: 1px; }
.view-today .hero-amount {
  display: block; max-width: 100%;
  margin: 6px 0 6px -1px;
  font-family: var(--font-rounded);
  font-weight: var(--w-bold);
  /* 48px, shrinking for long amounts so "+$12,345.67" never clips on a small phone. */
  font-size: min(var(--fs-hero), calc(100cqi / (var(--len, 8) * .56)));
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--label);
}
.view-today .hero-amount.is-pos { color: var(--green-text); }
.view-today .hero-amount.is-neg { color: var(--red-text); }
.view-today .hero-delta,
.view-today .hero-goal {
  font-size: var(--fs-subhead); line-height: var(--lh-subhead);
  color: var(--label-2);
}
.view-today .hero-delta-val {
  display: inline-flex; align-items: center; gap: 4px;
  font-weight: var(--w-semibold);
  white-space: nowrap;
  color: var(--label-2);
}
.view-today .hero-delta.is-pos .hero-delta-val { color: var(--green-text); }
.view-today .hero-delta.is-neg .hero-delta-val { color: var(--red-text); }
.view-today .hero-delta-val svg { margin-top: -1px; }
.view-today .hero-delta-suffix { color: var(--label-2); }
/* Narrow text column (phone): the comparison gets its own line instead of breaking mid-phrase. */
@container (max-width: 300px) {
  .view-today .hero-delta-suffix { display: block; }
}
.view-today .hero-goal {
  grid-area: goal; align-self: start;
  display: flex; align-items: center; gap: 7px;
  min-width: 0;
  margin-top: 6px;
}
.view-today .hero-goal-check { display: grid; margin: 0 -2px 0 -3px; color: var(--green); --knockout: var(--bg-2); }
.view-today .hero-goal-dot {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: linear-gradient(135deg, var(--ring-a), var(--ring-b));
}
.view-today .hero-ring { flex: none; display: grid; place-items: center; }

@container today (min-width: 640px) {
  .view-today .today-hero { padding: 26px 32px 28px 28px; }
  .view-today .hero-inner { column-gap: var(--sp-6); }
  .view-today .hero-head { font-size: var(--fs-headline); line-height: var(--lh-headline); }
  .view-today .hero-amount { --fs-hero: 60px; margin: 8px 0 10px -2px; }
  .view-today .hero-delta, .view-today .hero-goal { font-size: var(--fs-callout); line-height: var(--lh-callout); }
  .view-today .hero-goal { margin-top: 5px; }
}

/* ---------------------------------------------------------------- activity ring (today/ring.js) */
.view-today {
  /* Profit ring: deep green → bright yellow-green, like Fitness's Exercise ring. From tokens only. */
  --ring-a: color-mix(in oklab, var(--green) 72%, var(--teal));
  --ring-b: color-mix(in oklab, var(--green) 58%, var(--yellow));
  --ring-track: color-mix(in srgb, var(--green) 17%, transparent);
}
.view-today .aring {
  --size: 108px; --stroke: 18px;
  --r: calc((var(--size) - var(--stroke)) / 2);
  position: relative; display: block; flex: none;
  width: var(--size); height: var(--size);
}
@container today (min-width: 480px) {
  .view-today .aring { --size: 136px; --stroke: 21px; }
}
@container today (min-width: 640px) {
  .view-today .aring { --size: 172px; --stroke: 26px; }
}
.view-today .aring-track,
.view-today .aring-fill {
  position: absolute; inset: 0; border-radius: 50%;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--stroke) - .5px), #000 calc(100% - var(--stroke) + .5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - var(--stroke) - .5px), #000 calc(100% - var(--stroke) + .5px));
}
.view-today .aring-track { background: var(--ring-track); }
.view-today .aring-cap {
  position: absolute; left: 50%; top: 50%;
  width: var(--stroke); height: var(--stroke);
  margin: calc(var(--stroke) / -2) 0 0 calc(var(--stroke) / -2);
  border-radius: 50%;
  transform: translateY(calc(-1 * var(--r)));
}
.view-today .aring-cap-start { background: var(--ring-a); }
.view-today .aring-cap-end { background: var(--ring-b); z-index: 2; }
.view-today .aring-arrow {
  z-index: 1;
  display: grid; place-items: center;
  color: rgba(0, 0, 0, .78);
}
.view-today .aring-arrow svg { width: 72%; height: 72%; }
.view-today .aring.is-empty .aring-cap-start,
.view-today .aring.is-empty .aring-cap-end { display: none; }
.view-today .aring.is-empty .aring-arrow { color: color-mix(in srgb, var(--green) 55%, transparent); }
.view-today .aring.is-lapped .aring-cap-start { display: none; }
.view-today .aring.is-lapped .aring-cap-end { box-shadow: 3px 0 5px -1px rgba(0, 0, 0, .45); }

/* Very small phones (320px): the number gets the full width; a smaller ring sits beside the goal line. */
@container today (max-width: 339px) {
  .view-today .hero-inner { grid-template-areas: "text text" "goal ring"; row-gap: 4px; }
  .view-today .hero-goal { align-self: center; margin-top: 0; }
  .view-today .aring { --size: 58px; --stroke: 10px; }
}

/* ---------------------------------------------------------------- stat tiles */
.view-today .today-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
}
.view-today .today-tiles .tile-k-roas { grid-column: 1 / -1; }
@container today (min-width: 640px) {
  /* ROAS gets the room its explanation needs. */
  .view-today .today-tiles { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--sp-5); }
  .view-today .today-tiles .tile-k-roas { grid-column: auto; }
}
.view-today .today-tile {
  padding: 13px 15px 15px;
  border-radius: var(--r-card);
  min-height: 100%;
}
@container today (min-width: 640px) {
  .view-today .today-tile { padding: 16px 18px 18px; }
}
.view-today .today-tile .stat-label { min-width: 0; }
.view-today .tile-label-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.view-today .tile-label-note { font-weight: var(--w-regular); color: var(--label-2); }
/* A narrow tile moves "sales per $1 of ads" under the label instead of cutting the explanation off. */
.view-today .today-tile { container: tile / inline-size; }
@container tile (max-width: 214px) {
  .view-today .today-tile .stat-label { align-items: flex-start; }
  .view-today .today-tile .stat-label > svg:first-child { margin-top: 1.5px; }
  .view-today .tile-label-text { white-space: normal; }
  .view-today .tile-label-note { display: block; }
  .view-today .tile-label-sep { display: none; }
  .view-today .tile-chevron { margin-top: 3px; }
}
.view-today .tile-chevron { margin-left: auto; color: var(--label-3) !important; flex: none; }
.view-today .today-tile .stat-value { margin-top: 4px; }
.view-today .today-tile .stat-value.has-tone { color: var(--tone-text); }
.view-today .today-tile .stat-sub { overflow-wrap: anywhere; }
.view-today .tile-phrase { white-space: nowrap; }
@container tile (max-width: 170px) { .view-today .tile-phrase { white-space: normal; } }
.view-today .tile-bar { display: block; margin-top: auto; padding-top: 12px; }
.view-today .tile-track {
  position: relative; display: block;
  height: 6px; border-radius: 3px;
  background: var(--fill-3);
}
.view-today .tile-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  min-width: 0;
  border-radius: 3px;
  background: var(--tone, var(--accent));
  transition: width var(--dur-slow) var(--ease);
}
.view-today .tile-fill.is-zero { display: none; }
/* Orders: ads share solid, the organic remainder a tint of the same colour. */
.view-today .tile-bar.is-split .tile-track { background: color-mix(in srgb, var(--blue) 26%, transparent); }
/* Break-even notch on the ROAS gauge. */
.view-today .tile-tick {
  position: absolute; top: -4px; bottom: -4px;
  width: 3px; margin-left: -1.5px;
  border-radius: 2px;
  background: var(--label);
  box-shadow: 0 0 0 2px var(--bg-2);
}

/* ---------------------------------------------------------------- needs your OK
   Same item as the Autopilot page (css/views/autopilot.css .ap-q-*): 32px icon tile · title + time top-right ·
   optional "$50 → $85" chip · detail (subhead) · Approve (tinted) / Decline (gray), 40px capsules with 44pt hit areas. */
.view-today .today-queue { display: flex; flex-direction: column; }
.view-today .today-queue > .card-body { flex: 1 1 auto; display: flex; flex-direction: column; }
.view-today .q-heading { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.view-today .q-count {
  display: inline-grid; place-items: center;
  min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 10px;
  background: var(--orange); color: #000;
  font-size: 13px; line-height: 1; font-weight: var(--w-bold); letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.view-today .q-count:empty { display: none; }
.view-today .q-list { display: flex; flex-direction: column; }
.view-today .q-list[hidden] { display: none; }
.view-today .q-item {
  position: relative;
  display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 12px;
  padding: 14px 0;
}
.view-today .q-item:first-child { padding-top: 4px; }
.view-today .q-item:last-child { padding-bottom: 0; }
/* Only while collapsing (it would clip the buttons' hit areas otherwise). */
.view-today .q-item.is-leaving { overflow: hidden; pointer-events: none; }
.view-today .q-item.is-busy .q-actions .btn { pointer-events: none; }
/* iOS inset separator: starts at the text, not under the icon. */
.view-today .q-item + .q-item::before {
  content: ""; position: absolute; top: 0; left: 44px; right: 0;
  height: var(--hairline); background: var(--sep);
}
.view-today .q-item .icon-tile { margin-top: 1px; }
.view-today .q-main { min-width: 0; }
.view-today .q-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.view-today .q-title {
  min-width: 0;
  text-wrap: pretty;
  font-size: var(--fs-headline); line-height: var(--lh-headline); font-weight: var(--w-semibold);
  letter-spacing: var(--ls-headline);
  color: var(--label);
  overflow-wrap: anywhere;
  border-radius: 4px;
}
.view-today .q-title:active { opacity: .55; }
.view-today .q-time {
  flex: none;
  font-size: var(--fs-footnote); line-height: var(--lh-footnote);
  color: var(--label-2);
  white-space: nowrap;
}
.view-today .q-change { margin-top: 8px; }
.view-today .q-change-vis {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px;
  border-radius: 8px;
  background: var(--fill-4);
  font-size: var(--fs-subhead); line-height: var(--lh-subhead); font-weight: var(--w-semibold);
  font-variant-numeric: tabular-nums;
}
.view-today .q-change-vis svg { color: var(--label-2); }
.view-today .q-from { color: var(--label-2); font-weight: var(--w-medium); }
.view-today .q-detail {
  margin-top: 6px;
  text-wrap: pretty;
  font-size: var(--fs-subhead); line-height: var(--lh-subhead);
  color: var(--label-2);
}
.view-today .q-consequence {
  margin-top: 8px; padding: 8px 12px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--orange) 12%, transparent);
  font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label);
  text-wrap: pretty;
}
.view-today .q-consequence[hidden], .view-today .q-blocked[hidden] { display: none; }
.view-today .q-blocked { margin-top: 8px; font-size: var(--fs-footnote); line-height: var(--lh-footnote); font-weight: var(--w-medium); color: var(--label-2); text-wrap: pretty; }
.view-today .q-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.view-today .q-actions .btn.is-blocked { opacity: .45; cursor: default; }
/* "Show 2 more" / "Show fewer": a row under the first 3 items, its separator inset like the items'. */
.view-today .q-more-wrap { position: relative; margin-bottom: -10px; }
.view-today .q-more-wrap::before {
  content: ""; position: absolute; top: 0; left: 44px; right: 0;
  height: var(--hairline); background: var(--sep);
}
.view-today .today-queue:has(.q-more-wrap:not([hidden])) .q-item:last-child { padding-bottom: 14px; }
.view-today .q-more {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; margin-left: 44px; padding: 0 4px 0 0;
  font: inherit; font-size: var(--fs-subhead); line-height: var(--lh-subhead); color: var(--accent-text);
  background: none; border: 0; border-radius: 6px; cursor: pointer;
}
.view-today .q-more-chev { transition: transform var(--dur-press, 160ms) var(--ease, ease); }
.view-today .q-more.is-open .q-more-chev { transform: rotate(180deg); }
.view-today .q-more:active { opacity: .55; }
@media (hover: hover) and (pointer: fine) { .view-today .q-more:hover .q-more-text { text-decoration: underline; text-underline-offset: 2px; } }
/* Buttons keep their whole label (a long one like "Try it in your draft" wraps the row instead of being cut off). */
.view-today .q-actions .btn { flex: 0 0 auto; min-width: 104px; max-width: 100%; padding-inline: 16px; }
@container today (max-width: 339px) {
  /* 320pt: the tab bar already has Autopilot; the heading keeps the whole row. */
  .view-today .today-queue .card-action { display: none; }
}
.view-today .q-empty {
  flex: 1 1 auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  gap: 4px;
  padding: 18px 12px 12px;
}
.view-today .q-empty[hidden] { display: none; }
.view-today .q-empty-icon { color: var(--green); margin-bottom: 6px; --knockout: var(--bg-2); }
.view-today .q-empty-icon.is-off { color: var(--label-2); }
.view-today .q-empty-action { margin-top: 12px; }
.view-today .q-empty-title {
  font-size: var(--fs-headline); line-height: var(--lh-headline); font-weight: var(--w-semibold);
  text-wrap: balance;
  border-radius: 6px;
}
.view-today .q-empty-title:focus { outline: none; }
.view-today .q-empty-title:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.view-today .q-empty-text { max-width: 300px; font-size: var(--fs-subhead); line-height: var(--lh-subhead); color: var(--label-2); text-wrap: pretty; }

/* ---------------------------------------------------------------- autopilot activity */
.view-today .act-status {
  display: flex; align-items: center; gap: 7px;
  margin: -4px 0 6px;
  font-size: var(--fs-footnote); line-height: var(--lh-footnote);
  color: var(--label-2);
}
.view-today .act-phrase { white-space: nowrap; }
.view-today .act-status .act-dot { align-self: flex-start; margin-top: 5.5px; }
.view-today .act-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--gray); }
.view-today .act-dot.is-on { background: var(--green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 22%, transparent); }
.view-today .act-dot.is-off { background: var(--orange); }
.view-today .act-dot.is-stopped { background: var(--red); box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 20%, transparent); }
.view-today .act-list { display: flex; flex-direction: column; margin: 0 -8px; }
.view-today .act-row {
  display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 12px; align-items: start;
  padding: 10px 8px;
  border-radius: 12px;
  transition: background-color var(--dur-press) linear;
}
.view-today .act-item + .act-item .act-text { position: relative; }
.view-today .act-item + .act-item .act-text::before {
  content: ""; position: absolute; left: 0; right: 0; top: -10px;
  height: var(--hairline); background: var(--sep);
}
.view-today .act-row:active { background: var(--highlight); }
.view-today .act-row:focus-visible { outline-offset: -2px; }
.view-today .act-icon {
  display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: 50%;
  margin-top: 1px;
  color: var(--tone);
  background: color-mix(in srgb, var(--tone) 15%, transparent);
}
.view-today .act-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.view-today .act-msg {
  text-wrap: pretty;
  font-size: var(--fs-subhead); line-height: var(--lh-subhead);
  color: var(--label);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.view-today .act-time { font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-2); }
.view-today .act-item.is-undone .act-msg { color: var(--label-2); }
.view-today .act-none { padding: 8px; font-size: var(--fs-subhead); line-height: var(--lh-subhead); color: var(--label-2); text-wrap: pretty; }

/* ---------------------------------------------------------------- profit chart */
.view-today .today-chart .card-header { margin-bottom: 8px; }
.view-today .ch-seg { width: 116px; }
.view-today .ch-head { margin-bottom: 14px; }
.view-today .ch-total {
  font-family: var(--font-rounded);
  font-size: var(--fs-title2); line-height: var(--lh-title2); font-weight: var(--w-bold);
  letter-spacing: -0.3px;
  font-variant-numeric: tabular-nums;
}
.view-today .ch-total.is-pos { color: var(--green-text); }
.view-today .ch-total.is-neg { color: var(--red-text); }
.view-today .ch-span { font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-2); }
/* The chart fills its slot: the slot takes whatever height the card gets (the desktop chart row can be taller
   than the card's content), and the chart is drawn at that height (absolutely placed, so it never feeds back). */
.view-today .today-chart { display: flex; flex-direction: column; }
.view-today .today-chart > .card-body { flex: 1 1 auto; display: flex; flex-direction: column; }
.view-today .ch-slot { position: relative; flex: 1 1 auto; min-height: 168px; }
@container today (min-width: 640px) { .view-today .ch-slot { min-height: 196px; } }
.view-today .ch-slot > .bar-chart { position: absolute; top: 0; left: 0; right: 0; }
.view-today .ch-slot .bar-chart { animation: today-fade 260ms var(--ease) both; }
.view-today .ch-slot .bar-chart.is-quiet { animation: none; }
@keyframes today-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------------------------------------------------------------- top products */
.view-today .today-products .card-header { margin-bottom: 2px; }
.view-today .today-products .card-subtitle { margin: 0 0 6px; font-size: var(--fs-footnote); line-height: var(--lh-footnote); }
.view-today .tp-list { margin: 0 -16px -8px; }
@container today (min-width: 640px) {
  .view-today .tp-list { margin: 0 -20px -10px; }
  .view-today .tp-head { padding: 0; }
}
.view-today .tp-row {
  display: flex; align-items: center; gap: 12px;
  min-height: 68px;
  padding: 10px 16px;
  transition: background-color var(--dur-press) linear;
}
@container today (min-width: 640px) { .view-today .tp-row { padding: 10px 20px; gap: 16px; } }
.view-today .tp-row:active { background: var(--highlight); }
.view-today .tp-row:focus-visible { outline-offset: -3px; border-radius: 12px; }
.view-today .tp-item + .tp-item .tp-text { position: relative; }
.view-today .tp-item + .tp-item .tp-row { position: relative; }
.view-today .tp-item + .tp-item .tp-row::before {
  content: ""; position: absolute; top: 0; right: 0;
  left: calc(16px + 48px + 12px);
  height: var(--hairline); background: var(--sep);
}
@container today (min-width: 640px) {
  .view-today .tp-item + .tp-item .tp-row::before { left: calc(20px + 48px + 16px); }
}
.view-today .tp-thumb {
  width: 48px; height: 48px; flex: none;
  border-radius: 11px; overflow: hidden;
  background: var(--bg-3);
  box-shadow: inset 0 0 0 var(--hairline) var(--sep);
}
.view-today .tp-thumb svg { width: 100%; height: 100%; display: block; }
.view-today .tp-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.view-today .tp-title {
  font-size: var(--fs-body); line-height: var(--lh-body); letter-spacing: var(--ls-body);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.view-today .tp-sub {
  font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.view-today .tp-right { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
/* Phones: names and their facts wrap (two lines at most for the name) instead of being cut off. */
@container today (max-width: 479.98px) {
  .view-today .tp-title { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; text-wrap: pretty; }
  .view-today .tp-sub { white-space: normal; text-wrap: pretty; }
}
.view-today .tp-profit {
  font-size: var(--fs-body); line-height: var(--lh-body); font-weight: var(--w-semibold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.view-today .tp-profit.is-pos { color: var(--green-text); }
.view-today .tp-profit.is-neg { color: var(--red-text); }
.view-today .tp-spark { display: block; }

/* Mid widths (two-column grid, iPad landscape): products keep the simple rows, trend beside the profit. */
@container today (min-width: 640px) {
  .view-today .tp-list:not(.is-wide) .tp-right { flex-direction: row-reverse; align-items: center; gap: 20px; }
  .view-today .tp-list:not(.is-wide) .tp-profit { min-width: 96px; text-align: right; }
}

/* Desktop table: Product · Status · Orders · ROAS · Daily profit · Profit */
.view-today .tp-head,
.view-today .tp-list.is-wide .tp-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 104px 64px 64px 96px 104px;
  column-gap: 16px;
  align-items: center;
}
.view-today .tp-head {
  margin: 8px 0 2px;
  font-size: var(--fs-caption); line-height: var(--lh-caption); font-weight: var(--w-medium);
  color: var(--label-2);
}
.view-today .tp-head .tp-h-product { grid-column: 1 / 3; }
.view-today .tp-head .tp-h-num { text-align: right; }
.view-today .tp-status { display: flex; }
.view-today .tp-num {
  text-align: right;
  font-size: var(--fs-body); line-height: var(--lh-body);
  font-variant-numeric: tabular-nums;
  color: var(--label);
}
/* A product whose ads are all still learning: no verdict yet, so its ROAS cell is quiet grey words (DECISIONS §1). */
.view-today .tp-num.is-learning { color: var(--label-2); font-size: var(--fs-subhead); line-height: var(--lh-subhead); white-space: nowrap; }
.view-today .tp-list.is-wide .tp-profit { text-align: right; }
.view-today .tp-list.is-wide .tp-spark { justify-self: start; }

/* ---------------------------------------------------------------- brand header (under the date) */
.view-today .today-brand {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: var(--hit); margin: -14px 0 6px; padding: 0 8px 0 0;
  border-radius: 10px;
  color: var(--label-3);
  -webkit-tap-highlight-color: transparent;
  transition: opacity var(--dur-press) linear;
}
.view-today .today-brand[hidden] { display: none; }
.view-today .today-brand:active { opacity: .55; }
.view-today .today-brand:focus-visible { outline-offset: 2px; }
.view-today .today-brand-logo { display: flex; }
.view-today .today-brand-logo .brand-logo { height: 26px; width: auto; max-width: min(64vw, 260px); }
.view-today .today-brand-chev { flex: none; margin-top: 1px; }

/* ---------------------------------------------------------------- test lab (today/status.js) */
.view-today .lab-body { display: flex; flex-direction: column; }
.view-today .lab-thumb {
  display: block; flex: none; overflow: hidden;
  width: 36px; height: 36px; border-radius: 9px;
  background: var(--bg-3);
  box-shadow: inset 0 0 0 var(--hairline) var(--sep);
}
.view-today .lab-thumb.is-large { width: 56px; height: 56px; border-radius: 13px; }
.view-today .lab-thumb svg { display: block; width: 100%; height: 100%; }
.view-today .lab-now {
  display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 14px; align-items: start;
  margin: 0 -8px; padding: 6px 8px 12px;
  border-radius: 14px;
  transition: background-color var(--dur-press) linear;
}
.view-today .lab-now:active, .view-today .lab-up:active, .view-today .msg-row:active, .view-today .msg-more:active { background: var(--highlight); }
.view-today .lab-now:focus-visible, .view-today .lab-up:focus-visible, .view-today .msg-row:focus-visible, .view-today .msg-more:focus-visible { outline-offset: -2px; }
.view-today .lab-main { display: flex; flex-direction: column; min-width: 0; }
.view-today .lab-eyebrow { font-size: var(--fs-footnote); line-height: var(--lh-footnote); font-weight: var(--w-semibold); color: var(--label-2); }
.view-today .lab-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
.view-today .lab-title {
  min-width: 0; overflow-wrap: anywhere;
  font-size: var(--fs-headline); line-height: var(--lh-headline); font-weight: var(--w-semibold); letter-spacing: var(--ls-headline);
}
.view-today .lab-pill { flex: none; }
.view-today .lab-meta { margin-top: 1px; font-size: var(--fs-subhead); line-height: var(--lh-subhead); color: var(--label-2); font-variant-numeric: tabular-nums; }
.view-today .lab-phrase { white-space: nowrap; }
.view-today .lab-bar { position: relative; display: block; height: 6px; margin: 9px 0 10px; border-radius: 3px; background: var(--fill-3); overflow: hidden; }
.view-today .lab-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: var(--purple); transition: width var(--dur-slow) var(--ease); }
.view-today .lab-fill.is-paused { background: var(--gray); }
.view-today .lab-fill.is-zero { display: none; }
.view-today .lab-text { font-size: var(--fs-subhead); line-height: var(--lh-subhead); color: var(--label); text-wrap: pretty; }
.view-today .lab-next-line { margin-top: 3px; font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-2); text-wrap: pretty; }
.view-today .lab-up {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  min-height: 56px; margin: 0 -8px; padding: 10px 8px;
  border-radius: 14px;
  transition: background-color var(--dur-press) linear;
}
.view-today .lab-up::before { content: ""; position: absolute; top: 0; left: 8px; right: 8px; height: var(--hairline); background: var(--sep); }
.view-today .lab-up-label { flex: none; width: 56px; font-size: var(--fs-footnote); line-height: var(--lh-footnote); font-weight: var(--w-semibold); color: var(--label-2); }
.view-today .lab-up-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.view-today .lab-up-title { font-size: var(--fs-subhead); line-height: var(--lh-subhead); font-weight: var(--w-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.view-today .lab-up-sub { font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-2); }
.view-today .lab-chev { flex: none; color: var(--label-3); }
.view-today .lab-now.is-compact { grid-template-columns: 36px minmax(0, 1fr); column-gap: 12px; padding-top: 10px; position: relative; }
.view-today .lab-now.is-compact::before { content: ""; position: absolute; top: 0; left: 56px; right: 8px; height: var(--hairline); background: var(--sep); }
.view-today .lab-now.is-compact .lab-title { font-size: var(--fs-subhead); line-height: var(--lh-subhead); }
.view-today .lab-now.is-compact .lab-bar { margin-bottom: 2px; }
.view-today .lab-empty { padding: 4px 0 12px; font-size: var(--fs-subhead); line-height: var(--lh-subhead); color: var(--label-2); text-wrap: pretty; }

/* ---------------------------------------------------------------- messages needing you (today/status.js) */
.view-today .msg-body { display: flex; flex-direction: column; }
.view-today .msg-row {
  display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 12px; align-items: start;
  margin: 0 -8px; padding: 6px 8px 12px;
  border-radius: 14px;
  transition: background-color var(--dur-press) linear;
}
.view-today .msg-avatar {
  display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: 50%;
  font-family: var(--font-rounded); font-size: 16px; font-weight: var(--w-bold);
  color: var(--tone-text); background: color-mix(in srgb, var(--tone) 18%, transparent);
}
.view-today .msg-main { display: flex; flex-direction: column; min-width: 0; }
.view-today .msg-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.view-today .msg-who { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-2); }
.view-today .msg-time { flex: none; font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-2); white-space: nowrap; }
.view-today .msg-subject { margin-top: 1px; font-size: var(--fs-headline); line-height: var(--lh-headline); font-weight: var(--w-semibold); letter-spacing: var(--ls-headline); overflow-wrap: anywhere; }
.view-today .msg-preview {
  margin-top: 2px;
  font-size: var(--fs-subhead); line-height: var(--lh-subhead); color: var(--label-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.view-today .msg-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 8px; }
/* The reason keeps all its words (a safety reason cut off with "…" hides why it matters): it wraps inside the pill. */
.view-today .msg-reason { max-width: 100%; height: auto; min-height: 18px; padding-block: 2px; align-items: flex-start; }
.view-today .msg-reason > svg { flex: none; margin-top: 1px; }
.view-today .msg-reason > span { white-space: normal; text-wrap: pretty; line-height: 14px; }
.view-today .msg-due { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-footnote); line-height: var(--lh-footnote); font-weight: var(--w-semibold); color: var(--red-text); }
.view-today .msg-draft { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-2); white-space: nowrap; }
.view-today .msg-more {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  min-height: var(--hit); margin: 0 -8px; padding: 10px 8px 0;
  border-radius: 12px;
  font-size: var(--fs-subhead); line-height: var(--lh-subhead); color: var(--accent-text);
  transition: background-color var(--dur-press) linear;
}
.view-today .msg-more::before { content: ""; position: absolute; top: 0; left: 56px; right: 8px; height: var(--hairline); background: var(--sep); }
.view-today .msg-more span { padding-left: 48px; }
.view-today .msg-calm { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 12px; align-items: start; padding: 2px 0 6px; }
.view-today .msg-calm-icon { display: grid; place-items: center; width: 28px; height: 28px; color: var(--green); --knockout: var(--bg-2); }
.view-today .msg-calm-icon.is-empty { color: var(--label-3); }
.view-today .msg-calm-title { font-size: var(--fs-subhead); line-height: var(--lh-subhead); font-weight: var(--w-semibold); }
.view-today .msg-calm-text { margin-top: 2px; font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-2); text-wrap: pretty; }

/* ---------------------------------------------------------------- go-live card (today/golive.js; also on launch Done) */
.view-today .today-golive { margin-bottom: var(--sp-4); }
@container today (min-width: 640px) { .view-today .today-golive { margin-bottom: var(--sp-5); } }
.view-today .golive-card[hidden] { display: none; }
.view-today .golive-card {
  padding: 18px 18px 16px;
  border-radius: var(--r-card);
  background-color: var(--bg-2);
  background-image: linear-gradient(160deg, color-mix(in srgb, var(--indigo) 9%, transparent), transparent 55%);
  box-shadow: var(--shadow-card);
}
@container today (min-width: 640px) { .view-today .golive-card { padding: 22px 24px 20px; } }
.view-today .golive-head { display: flex; align-items: center; gap: 12px; }
.view-today .golive-head-text { min-width: 0; }
.view-today .golive-eyebrow { font-size: var(--fs-footnote); line-height: var(--lh-footnote); font-weight: var(--w-semibold); color: var(--indigo-text); }
.view-today .golive-title { font-size: var(--fs-headline); line-height: var(--lh-headline); font-weight: var(--w-semibold); letter-spacing: var(--ls-headline); text-wrap: balance; }
.view-today .golive-text { margin-top: 10px; font-size: var(--fs-subhead); line-height: var(--lh-subhead); color: var(--label); text-wrap: pretty; }
.view-today .golive-meter { margin-top: 14px; }
.view-today .golive-list { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; }
.view-today .golive-item { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-2); white-space: nowrap; }
.view-today .golive-item-icon { flex: none; color: var(--label-3); }
.view-today .golive-item.is-done { color: var(--label); }
.view-today .golive-item.is-done .golive-item-icon { color: var(--green); --knockout: var(--bg-2); }
.view-today .golive-timing { margin-top: 12px; font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-2); text-wrap: pretty; }
.view-today .golive-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 14px; }
.view-today .golive-actions:empty { display: none; }
.view-today .golive-next {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: var(--fs-subhead); line-height: var(--lh-subhead); font-weight: var(--w-medium); color: var(--accent-text);
  border-radius: 6px;
}
.view-today .golive-next:active { opacity: .45; }
@media (hover: hover) and (pointer: fine) { .view-today .golive-next:hover { text-decoration: underline; text-underline-offset: 2px; } }

/* ---------------------------------------------------------------- cash (today/cash.js) */
.view-today .today-cash[hidden] { display: none; }
.view-today .cash-alert { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.view-today .cash-alert[hidden] { display: none; }
.view-today .cash-alert-row {
  display: flex; align-items: flex-start; gap: 7px;
  padding: 9px 12px; border-radius: 12px;
  background: color-mix(in srgb, var(--orange) 14%, transparent);
  font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label); text-wrap: pretty;
}
.view-today .cash-alert-row svg { flex: none; margin-top: 1px; color: var(--orange); --knockout: var(--bg-2); }
.view-today .cash-grid {
  display: grid; grid-template-columns: minmax(0, 1fr);
  margin: -6px -10px; padding: 6px 10px; border-radius: 12px;
  color: inherit;
  transition: background-color var(--dur-fast) linear;
}
.view-today .cash-grid:active { background: var(--fill-4); }
@media (hover: hover) and (pointer: fine) { .view-today .cash-grid:hover { background: var(--fill-4); } }
.view-today .cash-metric { display: block; min-width: 0; padding: 10px 0; }
.view-today .cash-label, .view-today .cash-value, .view-today .cash-sub { display: block; }
.view-today .cash-alert-actions { display: flex; margin: 2px 0 2px; }
.view-today .cash-metric + .cash-metric { box-shadow: inset 0 var(--hairline) 0 var(--sep); }
.view-today .cash-metric:first-child { padding-top: 0; }
.view-today .cash-label { font-size: var(--fs-footnote); line-height: var(--lh-footnote); font-weight: var(--w-semibold); color: var(--label-2); }
.view-today .cash-value {
  margin-top: 1px;
  font-family: var(--font-rounded); font-size: 22px; line-height: 28px; font-weight: var(--w-bold); letter-spacing: -0.2px;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.view-today .cash-metric.is-low .cash-value { color: var(--orange-text); }
.view-today .cash-sub { font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-2); text-wrap: pretty; }
@container today (min-width: 920px) {
  /* Desktop main column: the three side by side, like a statement header. */
  .view-today .cash-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 20px; }
  .view-today .cash-metric { padding: 0; }
  .view-today .cash-metric + .cash-metric { box-shadow: inset var(--hairline) 0 0 var(--sep); padding-left: 20px; }
}
.view-today .cash-foot { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 14px; }
.view-today .cash-note { font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-2); text-wrap: pretty; }

/* ---------------------------------------------------------------- customer service (today/service.js) */
.view-today .today-service[hidden] { display: none; }
.view-today .cs-head { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; }
.view-today .cs-title { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-size: var(--fs-headline); line-height: var(--lh-headline); font-weight: var(--w-semibold); }
.view-today .cs-sample { flex: none; }
.view-today .cs-away { flex: none; }
.view-today .cs-who { margin-top: 1px; font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-2); text-wrap: pretty; }
.view-today .cs-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.view-today .cs-stat { min-width: 0; padding: 10px 12px; border-radius: 12px; background: var(--bg-3, var(--fill-4)); }
.view-today .cs-stat-value { font-family: var(--font-rounded); font-size: 22px; line-height: 28px; font-weight: var(--w-bold); font-variant-numeric: tabular-nums; }
.view-today .cs-stat-label { font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-2); text-wrap: pretty; }
.view-today .cs-foot {
  display: flex; align-items: flex-start; gap: 7px; margin-top: 12px;
  font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-2); text-wrap: pretty;
}
.view-today .cs-foot svg { flex: none; margin-top: 2px; color: var(--indigo); }
/* A missed promise is red, as on Support (V096). */
.view-today .cs-foot.is-late, .view-today a.cs-foot.is-late, .view-today .cs-foot.is-late svg { color: var(--red-text); }
.view-today a.cs-foot { color: var(--label-2); }
.view-today a.cs-foot:active { opacity: .55; }
@media (hover: hover) and (pointer: fine) { .view-today a.cs-foot:hover span { text-decoration: underline; text-underline-offset: 2px; } }

/* ---------------------------------------------------------------- weekly report (today/weekly.js) */
.view-today .wr-week { font-size: var(--fs-subhead); line-height: var(--lh-subhead); font-weight: var(--w-semibold); }
.view-today .wr-line { margin-top: 2px; font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-2); text-wrap: pretty; }
.view-today .wr-profit { font-weight: var(--w-semibold); color: var(--label); font-variant-numeric: tabular-nums; }
.view-today .wr-profit.is-pos { color: var(--green-text); }
.view-today .wr-profit.is-neg { color: var(--red-text); }
.view-today .wr-next { margin-top: 6px; font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-2); }
.view-today .today-report.is-quiet .card-header { margin-bottom: 6px; }
.view-today .wr-quiet-top { display: flex; align-items: baseline; gap: 6px; margin-top: 2px; }
.view-today .wr-quiet-amount {
  font-family: var(--font-rounded); font-size: 24px; line-height: 30px; font-weight: var(--w-bold); letter-spacing: -0.4px;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.view-today .wr-quiet-amount.is-pos { color: var(--green-text); }
.view-today .wr-quiet-amount.is-neg { color: var(--red-text); }
.view-today .wr-quiet-label { font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-2); }
.view-today .today-report.is-quiet .wr-next { margin-top: 8px; }
/* Monday: prominent. */
.view-today .today-report.is-monday {
  background: linear-gradient(180deg, color-mix(in srgb, var(--blue) 9%, var(--bg-2)), var(--bg-2) 70%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blue) 18%, transparent);
}
/* "New this morning" drops under the title when both don't fit (320), so the title is never cut off. */
.view-today .today-report.is-monday .card-header { flex-wrap: wrap; row-gap: 6px; }
.view-today .today-report.is-monday .card-heading { flex: 1 0 auto; }
.view-today .today-report.is-monday .wr-week { font-size: var(--fs-title3); line-height: var(--lh-title3); font-weight: var(--w-bold); }
.view-today .wr-top { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 12px; margin-top: 6px; }
.view-today .wr-amount {
  font-family: var(--font-rounded); font-size: 34px; line-height: 40px; font-weight: var(--w-bold); letter-spacing: -0.6px;
  font-variant-numeric: tabular-nums;
}
.view-today .wr-amount.is-pos { color: var(--green-text); }
.view-today .wr-amount.is-neg { color: var(--red-text); }
.view-today .wr-delta { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-subhead); line-height: var(--lh-subhead); color: var(--label-2); }
.view-today .wr-delta.is-up svg { color: var(--green); }
.view-today .wr-delta.is-down svg { color: var(--red); }
.view-today .wr-standout { margin-top: 8px; font-size: var(--fs-callout); line-height: 22px; color: var(--label); text-wrap: pretty; }
.view-today .wr-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin-top: 14px; }
.view-today .wr-time { font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-2); }

/* Small sheets opened from Today (outside the view): a raise's choices and the Meta feedback score. The CJ top-up sheet is
   Money's (js/views/money/sheets.js, styled in money.css). */
.today-options-intro, .today-score-intro { padding: 0 4px; font-size: var(--fs-subhead); line-height: var(--lh-subhead); color: var(--label-2); text-wrap: pretty; }
.today-options-sheet .list-row-title { white-space: normal; text-wrap: pretty; }
.today-score-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 6px 16px; border-radius: var(--r-list); background: var(--bg-2); }
.today-score-label { font-size: var(--fs-body); line-height: var(--lh-body); }
.today-score-link { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; margin: 0 4px; font-size: var(--fs-subhead); line-height: var(--lh-subhead); font-weight: var(--w-medium); color: var(--accent-text); }

/* ---------------------------------------------------------------- pointer hover (Mac, iPad with a trackpad)
   The hero and the tiles get the shared 4% label wash from components.css (.card/.stat.is-interactive);
   their chevrons step up a shade too. Rows use the list-row hover fill. Never on touch. */
@media (hover: hover) and (pointer: fine) {
  .view-today .today-hero:not(.is-skeleton):hover .hero-head svg,
  .view-today .today-tile:hover .tile-chevron { color: var(--label-2) !important; }
  .view-today .q-title:hover { color: var(--accent-text); }
  .view-today .act-row:hover,
  .view-today .tp-row:hover,
  .view-today .lab-now:hover, .view-today .lab-up:hover,
  .view-today .msg-row:hover, .view-today .msg-more:hover { background: var(--fill-4); }
  .view-today .today-brand:hover { color: var(--label-2); }
}

/* ---------------------------------------------------------------- skeleton + error */
.view-today .today-hero.is-skeleton { cursor: default; min-height: 150px; }
.view-today .today-hero.is-skeleton .hero-text { gap: 0; }
.view-today .today-error { padding-top: var(--sp-8); }

/* ================================================================= fresh mode: the launch hero (today/fresh.js)
   A store blueprint (an outline phone with dashed placeholders) with the three moments floating around it, then
   the three moments as numbered steps. Tokens only, so it follows light and dark. */
.view-today .today-fresh { container: fresh / inline-size; display: flex; flex-direction: column; gap: var(--sp-7); padding-top: var(--sp-1); }
.view-today .fh-card {
  display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; row-gap: 12px;
  padding: 28px 20px 26px;
  border-radius: 24px;
  background-color: var(--bg-2);
  background-image: radial-gradient(130% 60% at 50% 0%, color-mix(in srgb, var(--accent) 11%, transparent), transparent 70%);
  box-shadow: var(--shadow-card);
  text-align: center;
}
@container fresh (min-width: 640px) {
  .view-today .fh-card {
    grid-template-columns: 240px minmax(0, 1fr); column-gap: 44px; align-items: center; justify-items: start;
    padding: 40px 48px 40px 40px;
    background-image: radial-gradient(60% 120% at 0% 50%, color-mix(in srgb, var(--accent) 11%, transparent), transparent 75%);
    text-align: left;
  }
}
.view-today .fh-art { position: relative; width: 220px; height: 250px; }
.view-today .fh-phone { display: block; width: 140px; height: 250px; margin: 0 auto; overflow: visible; }
.view-today .fh-frame { fill: var(--bg); stroke: color-mix(in srgb, var(--label) 16%, transparent); stroke-width: 2; }
.view-today .fh-island { fill: color-mix(in srgb, var(--label) 80%, transparent); }
.view-today .fh-dash { fill: var(--accent-tint); stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 5 4; stroke-linecap: round; }
.view-today .fh-soft { fill: var(--fill-3); }
.view-today .fh-cta { fill: var(--accent); opacity: .85; }
.view-today .fh-spark { fill: var(--accent); }
.view-today .fh-part { transform-box: fill-box; animation: fh-in 620ms var(--ease) both; animation-delay: calc(var(--i) * 120ms + 120ms); }
@keyframes fh-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.view-today .fh-bubble {
  --b: var(--blue);
  position: absolute;
  display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 50%;
  color: #fff;
  background: linear-gradient(150deg, color-mix(in oklab, var(--b) 62%, #fff), var(--b));
  box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--b) 80%, transparent), 0 0 0 3px var(--bg-2);
  animation: fh-float 5.5s ease-in-out infinite alternate;
}
.view-today .fh-bubble.is-niche { left: 6px; top: 34px; }
.view-today .fh-bubble.is-brand { --b: var(--purple); right: 4px; top: 104px; animation-delay: -1.8s; }
.view-today .fh-bubble.is-product { --b: var(--green); left: 14px; bottom: 30px; animation-delay: -3.4s; }
@keyframes fh-float { from { transform: translateY(-3px); } to { transform: translateY(4px); } }
.view-today .fh-art.is-building .fh-dash { animation: fh-build 1.6s ease-in-out infinite alternate; }
@keyframes fh-build { from { fill-opacity: .35; } to { fill-opacity: 1; } }
.view-today .fh-text { display: flex; flex-direction: column; align-items: inherit; min-width: 0; }
.view-today .fh-card .fh-text { align-items: center; }
@container fresh (min-width: 640px) { .view-today .fh-card .fh-text { align-items: flex-start; } }
.view-today .fh-eyebrow { font-size: var(--fs-footnote); line-height: var(--lh-footnote); font-weight: var(--w-semibold); color: var(--accent-text); }
.view-today .fh-title {
  margin-top: 4px;
  font-size: var(--fs-title1); line-height: var(--lh-title1); letter-spacing: var(--ls-title1); font-weight: var(--w-bold);
  text-wrap: balance;
}
@container fresh (min-width: 640px) { .view-today .fh-title { font-size: var(--fs-large); line-height: var(--lh-large); letter-spacing: var(--ls-large); } }
.view-today .fh-body { margin-top: 8px; max-width: 460px; font-size: var(--fs-callout); line-height: var(--lh-callout); color: var(--label-2); text-wrap: pretty; }
.view-today .fh-actions { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; max-width: 340px; margin-top: 22px; }
.view-today .fh-go { width: 100%; }
@container fresh (min-width: 640px) {
  .view-today .fh-actions { flex-direction: row; align-items: center; gap: 12px; width: auto; max-width: none; }
  .view-today .fh-go { width: auto; min-width: 236px; }
}
.view-today .fh-fine { margin-top: 14px; font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-2); text-wrap: pretty; }
.view-today .fh-steps-title {
  margin: 0 4px 12px;
  font-size: var(--fs-title3); line-height: var(--lh-title3); letter-spacing: var(--ls-title3); font-weight: var(--w-bold);
  text-wrap: balance;
}
.view-today .fh-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
@container fresh (min-width: 640px) { .view-today .fh-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
.view-today .fh-step {
  display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 12px; align-items: start;
  padding: 16px 18px;
  border-radius: var(--r-card); background: var(--bg-2); box-shadow: var(--shadow-card);
}
.view-today .fh-num {
  display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%;
  font-family: var(--font-rounded); font-size: 15px; font-weight: var(--w-bold); font-variant-numeric: tabular-nums;
  color: var(--accent-text); background: var(--accent-tint);
}
.view-today .fh-step.is-done .fh-num { color: #fff; background: var(--green); }
.view-today .fh-step-title { font-size: var(--fs-headline); line-height: var(--lh-headline); font-weight: var(--w-semibold); letter-spacing: var(--ls-headline); }
.view-today .fh-step-text { margin-top: 2px; font-size: var(--fs-subhead); line-height: var(--lh-subhead); color: var(--label-2); text-wrap: pretty; }
.view-today .fh-step.is-done .fh-step-title { color: var(--label-2); }
@media (prefers-reduced-motion: reduce) {
  .view-today .fh-part, .view-today .fh-bubble, .view-today .fh-art.is-building .fh-dash { animation: none; }
}
@media (forced-colors: active) {
  .view-today .fh-card, .view-today .fh-step, .view-today .golive-card, .view-today .cash-alert-row, .view-today .q-consequence { border: 1px solid CanvasText; }
  .view-today .fh-bubble { forced-color-adjust: none; background: Highlight; color: HighlightText; }
}

/* ================================================================= breakdown sheet (overlay, not inside .view-today) */
.today-breakdown .bd { display: flex; flex-direction: column; }
/* Above the statement (its entry animation makes it a layer), so the segments' 44pt hit areas aren't covered. */
.today-breakdown .bd-seg-wrap { position: relative; z-index: 1; padding: 4px 0 0; }
.today-breakdown .bd-summary {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 26px 8px 18px;
}
.today-breakdown .bd-period { font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-2); }
.today-breakdown .bd-total {
  margin: 4px 0 6px;
  font-family: var(--font-rounded);
  font-size: 44px; line-height: 50px; font-weight: var(--w-bold); letter-spacing: -0.8px;
  font-variant-numeric: tabular-nums;
}
.today-breakdown .bd-total.is-pos { color: var(--green-text); }
.today-breakdown .bd-total.is-neg { color: var(--red-text); }
.today-breakdown .bd-verdict { font-size: var(--fs-subhead); line-height: var(--lh-subhead); color: var(--label-2); }

/* Where every dollar went — the Apple Card spending bar. */
.today-breakdown .bd-bar {
  display: flex; gap: 2px;
  height: 14px; margin: 4px 2px 26px;
  border-radius: 7px; overflow: hidden;
}
.today-breakdown .bd-bar.is-empty { background: var(--fill-3); }
.today-breakdown .bd-seg { flex: 1 1 0; min-width: 3px; background: var(--tile-bg, var(--gray)); }
.today-breakdown .bd-seg:first-child { border-radius: 7px 0 0 7px; }
.today-breakdown .bd-seg:last-child { border-radius: 0 7px 7px 0; }
.today-breakdown .bd-seg:only-child { border-radius: 7px; }
.today-breakdown .bd-seg.tile-green { background: var(--green); }

.today-breakdown .bd-group + .bd-group { margin-top: 22px; }
.today-breakdown .bd-group-title {
  padding: 0 16px 7px;
  font-size: 13px; line-height: 18px; color: var(--label-2);
  text-transform: uppercase;
}
.today-breakdown .bd-list { background: var(--bg-2); border-radius: var(--r-list); overflow: hidden; }
.today-breakdown .bd-line {
  display: flex; align-items: center; gap: 14px;
  min-height: 60px;
  padding: 9px 16px;
  position: relative;
}
.today-breakdown .bd-line + .bd-line::before {
  content: ""; position: absolute; top: 0; right: 0; left: calc(16px + 30px + 14px);
  height: var(--hairline); background: var(--sep);
}
.today-breakdown .bd-line-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.today-breakdown .bd-line-title { font-size: var(--fs-body); line-height: var(--lh-body); }
.today-breakdown .bd-line-note {
  font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-2);
  overflow-wrap: anywhere;
}
.today-breakdown .bd-line-amount {
  flex: none;
  font-size: var(--fs-body); line-height: var(--lh-body);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.today-breakdown .bd-line.is-zero .bd-line-amount,
.today-breakdown .bd-line.is-zero .bd-line-title { color: var(--label-2); }
.today-breakdown .bd-line.is-zero .icon-tile { opacity: .5; }
.today-breakdown .bd-line-total { min-height: 52px; }
/* The Profit line is pinned to the sheet's bottom edge until the list scrolls up to it, so the result is
   never below the fold. It covers the sheet body's side padding so rows slide under it cleanly; the body's
   bottom padding moves below the footnote so the pinned line sits flush on the sheet's edge. */
.sheet.today-breakdown .sheet-body { padding-bottom: 0; }
.today-breakdown .bd-group.bd-result {
  position: sticky; bottom: 0; z-index: 2;
  margin: 10px -16px 0;
  padding: 12px 16px;
  background: var(--bg);
  transition: box-shadow 150ms linear;
}
.today-breakdown .bd-result.is-pinned { box-shadow: 0 calc(-1 * var(--hairline)) 0 var(--sep); }
.today-breakdown .bd-result-end { display: block; height: 1px; margin-top: -1px; }
/* The pinned line already says "there's more above"; the generic bottom fade would dim it. */
.sheet.today-breakdown.has-more .sheet-body { -webkit-mask-image: none; mask-image: none; }
.today-breakdown .bd-line-total .bd-line-title,
.today-breakdown .bd-line-total .bd-line-amount { font-weight: var(--w-semibold); }
.today-breakdown .bd-line-amount.is-pos { color: var(--green-text); }
.today-breakdown .bd-line-amount.is-neg { color: var(--red-text); }
.today-breakdown .bd-foot { padding: 0 16px 28px; font-size: 13px; line-height: 18px; color: var(--label-2); text-wrap: pretty; }
.today-breakdown .bd-loading, .today-breakdown .bd-error { margin-bottom: 28px; }
.today-breakdown .bd-loading { display: grid; place-items: center; min-height: 320px; }
.today-breakdown .bd-error { padding: 48px 16px; text-align: center; color: var(--label-2); font-size: var(--fs-subhead); }
.today-breakdown .bd-holder > .bd-statement { animation: today-bd-in 240ms var(--ease) both; }
@keyframes today-bd-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Centred modal (≥ 768): a denser, macOS-like statement so a 1440×900 window shows it whole. */
.sheet.is-modal.today-breakdown .bd-summary { padding: 18px 8px 14px; }
.sheet.is-modal.today-breakdown .bd-total { font-size: 40px; line-height: 46px; }
.sheet.is-modal.today-breakdown .bd-bar { margin-bottom: 20px; }
.sheet.is-modal.today-breakdown .bd-group + .bd-group { margin-top: 18px; }
.sheet.is-modal.today-breakdown .bd-group.bd-result { margin: 8px -24px 0; padding-inline: 24px; }
.sheet.is-modal.today-breakdown .bd-line { min-height: 52px; padding-block: 6px; }
.sheet.is-modal.today-breakdown .bd-line-total { min-height: 48px; }

/* 320pt: "Yesterday" needs a touch more room inside its quarter of the period switch. */
@media (max-width: 359.98px) {
  .today-breakdown .bd-seg-wrap .segmented-item { padding-inline: 3px; font-size: 12px; letter-spacing: -0.1px; }
}

/* Windows High Contrast: the ring, tile gauges and the money bar are drawn with system colours (they'd vanish
   otherwise); every number they show is also in text. */
@media (forced-colors: active) {
  .view-today { --ring-a: Highlight; --ring-b: Highlight; --ring-track: color-mix(in srgb, CanvasText 28%, Canvas); }
  .view-today .aring, .view-today .hero-goal-dot { forced-color-adjust: none; }
  .view-today .hero-goal-dot { background: Highlight; }
  .view-today .aring-arrow { color: HighlightText; }
  .view-today .aring.is-empty .aring-arrow { color: CanvasText; }
  .view-today .aring.is-lapped .aring-cap-end { box-shadow: 0 0 0 2px Canvas; }
  .view-today .tile-track,
  .view-today .tile-bar.is-split .tile-track { forced-color-adjust: none; background: Canvas; box-shadow: inset 0 0 0 1px CanvasText; }
  .view-today .tile-fill { forced-color-adjust: none; background: Highlight; }
  .view-today .tile-tick { forced-color-adjust: none; background: CanvasText; box-shadow: 0 0 0 2px Canvas; }
  .view-today .act-dot { forced-color-adjust: none; background: CanvasText; box-shadow: none; }
  .view-today .q-change-vis { border: 1px solid CanvasText; }
  .today-breakdown .bd-bar { forced-color-adjust: none; background: Canvas; box-shadow: 0 0 0 1px CanvasText; }
  .today-breakdown .bd-seg { forced-color-adjust: none; background: Highlight !important; }
  .today-breakdown .bd-list { border: 1px solid CanvasText; }
  .today-breakdown .bd-result.is-pinned { border-top: 1px solid CanvasText; }
}

@media (prefers-reduced-motion: reduce) {
  .view-today .tile-fill { transition: none; }
  .today-breakdown .bd-result { transition: none; }
  .today-breakdown .bd-holder > .bd-statement,
  .view-today .ch-slot .bar-chart { animation: none; }
}