/* Updates page · css/updates.css
   --------------------------------------------------------------------------
   Shared base — tokens, reset, layout primitives, brand components — in
   /brand.css. The hero is the shared .doc-hero. Page-specific styles below.

   Section structure:
     §1 Hero        .doc-hero.updates-hero   brand.css, no page rules
     §2 Updates     .updates                 a month label, then one
                                             <details> per update, all
                                             collapsed
   -------------------------------------------------------------------------- */


/* ============================================================ */
/* §2 · UPDATES — a month label and a list of disclosures        */
/*       The summary is the scan line: the title, then the      */
/*       areas beside it. The body is one reading: the change,  */
/*       the reason and the next step as run-in labels, then a  */
/*       links row.                                              */
/* ============================================================ */
.updates {
  padding-block: var(--space-section-tight) var(--space-section-generous);
}

.updates-month {
  color: var(--color-navy);
  margin-block-end: var(--space-12);
}
.updates-month + .update { border-block-start: 0; }
.update + .updates-month { margin-block-start: var(--space-48); }

.update {
  border-block-start: 1px solid var(--color-stone-20);
  scroll-margin-top: var(--space-96);
}
.update:last-of-type { border-block-end: 1px solid var(--color-stone-20); }

/* The summary row is one wrapping line, at every width: the title first,
   then Action needed and the tags, which sit at the right of the title's
   line when they fit and drop to the next line when they do not. The caret
   is pinned at the right edge. No width is named anywhere. */
.update summary {
  position: relative;
  list-style: none;
  cursor: pointer;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8) var(--space-16);
  padding: var(--space-24) var(--space-48) var(--space-24) 0;
}
.update summary::-webkit-details-marker { display: none; }
.update summary:focus-visible {
  outline: 2px solid var(--color-royal);
  outline-offset: 4px;
  border-radius: var(--radius-xs);
}

/* An entry that asks something of you: the words "Action needed" before the
   tags, with a Royal dot in front of them and a soft halo that leaves the
   dot every 2.4 seconds and never comes back in. */
.update-live {
  position: relative;
  display: inline-block;
  margin-inline-end: var(--space-8);
  inline-size: 10px;
  block-size: 10px;
  border-radius: 50%;
  background: var(--color-royal);
}
.update-live::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  inline-size: 10px;
  block-size: 10px;
  border-radius: 50%;
  background: var(--color-royal);
  opacity: 0;
  transform: translate(-50%, -50%);
  animation: update-halo 2.4s ease-out infinite;
}
@keyframes update-halo {
  0%        { transform: translate(-50%, -50%) scale(1); opacity: 0.45; }
  75%, 100% { transform: translate(-50%, -50%) scale(3); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .update-live::after { animation: none; }
}

.update-title {
  flex: 1 1 auto;
  min-inline-size: 0;
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--type-title-s);
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--color-midnight);
  transition: color var(--duration-instant) var(--ease-standard);
}
.update summary:hover .update-title { color: var(--color-royal); }

.update-note {
  display: inline-flex;
  align-items: center;
  margin-inline-start: auto;
  font-size: var(--type-label-m);
  font-weight: 600;
  color: var(--color-royal);
  white-space: nowrap;
}
.update-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-8);
}
.update-title + .update-tags { margin-inline-start: auto; }

/* One hue per area, from the brand's own families, so a reader can find
   every Pricing or every API entry by colour alone. */
.update-tag {
  --tag-ink: var(--color-navy);
  --tag-fill: var(--color-mist);
  display: inline-block;
  padding-block: 2px;
  padding-inline: var(--space-12);
  border: 1px solid color-mix(in srgb, var(--tag-ink) 22%, transparent);
  border-radius: var(--radius-pill);
  font-size: var(--type-label-m);
  font-weight: 500;
  line-height: var(--lh-label);
  color: var(--tag-ink);
  background: var(--tag-fill);
}
.update-tag.is-pricing    { --tag-ink: var(--color-navy);        --tag-fill: var(--color-mist); }
.update-tag.is-web-app    { --tag-ink: var(--color-paper);       --tag-fill: var(--color-midnight); border-color: var(--color-midnight); }
.update-tag.is-api        { --tag-ink: var(--color-paper);       --tag-fill: var(--color-navy); border-color: var(--color-navy); }
.update-tag.is-docs       { --tag-ink: var(--color-stone-60);    --tag-fill: var(--color-stone-05); }
.update-tag.is-agreements { --tag-ink: var(--color-stone-60);    --tag-fill: var(--color-stone-05); }

.update-caret {
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: 50%;
  translate: 0 -50%;
  inline-size: 22px;
  block-size: 22px;
  color: var(--color-stone-40);
  transition: transform var(--duration-short) var(--ease-standard);
}
.update[open] .update-caret { transform: rotate(180deg); }

/* The body: the change, the reason, your next step, each a paragraph
   with a run-in label, at the spacing of two paragraphs. One reading. */
.update-body {
  display: grid;
  gap: var(--space-16);
  padding-block-end: var(--space-32);
  min-inline-size: 0;
}
.update-body > p,
.update-body > ul,
.update-block { max-inline-size: 72ch; }
.update-body > p + .update-points,
.update-body > p + .update-actions { margin-block-start: calc(var(--space-8) - var(--space-16)); }
.update-block h3 {
  display: block;
  margin-block-end: var(--space-8);
}
.update-body > p,
.update-block p {
  font-size: var(--type-body-m);
  line-height: var(--lh-body-relaxed);
  color: var(--color-stone-90);
}
.update-body strong { font-weight: 600; color: var(--color-midnight); }
.update-body code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  color: var(--color-midnight);
}

.update-points,
.update-actions {
  list-style: none;
  display: grid;
  gap: var(--space-8);
}
.update-points li,
.update-actions li {
  position: relative;
  padding-inline-start: var(--space-24);
  font-size: var(--type-body-m);
  line-height: var(--lh-body-relaxed);
  color: var(--color-stone-90);
}
/* The change: a dot. Your next step: an arrow. */
.update-points li::before {
  content: "";
  position: absolute;
  inset-inline-start: 2px;
  inset-block-start: 0.72em;
  inline-size: 6px;
  block-size: 6px;
  border-radius: var(--radius-pill);
  background: var(--color-royal);
}
.update-actions li::before {
  content: "\2192";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  color: var(--color-royal);
  font-weight: 500;
}

/* The entry's footer: where to go next, as the brand's arrow links.
   No rule above it; the rule between entries is the only line. */
.update-body > .update-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8) var(--space-24);
  margin-block-start: var(--space-4);
}

/* The before-and-now figure. Each month is a panel; every bar sits on a
   day grid, so a cycle that straddles April runs across the gap between
   the panels. One gap, --g, everywhere: bar to bar, bar to panel edge,
   panel to panel, row to row. Both last bars run off the edge and fade.
   Under it, the same two months in dollars, Before and Now as rows. */
.cycle {
  --g: 16px;
  min-inline-size: 0;
  max-inline-size: 45.5rem;
  margin: var(--space-24) 0 var(--space-32);
  font-size: var(--type-body-s);
  line-height: var(--lh-label);
}
.cycle figcaption { color: var(--color-stone-60); margin-block-end: var(--space-16); }
.cycle-scroll { overflow-x: auto; }
.cycle-scroll:focus-visible { outline: 2px solid var(--color-royal); outline-offset: 4px; border-radius: var(--radius-xs); }
.cycle .grid {
  display: grid;
  grid-template-columns:
    4.5rem
    calc(var(--g) / 2 + 1px) repeat(31, minmax(0, 1fr)) calc(var(--g) / 2 + 1px)
    var(--g)
    calc(var(--g) / 2 + 1px) repeat(11, minmax(0, 1fr)) calc(var(--g) / 2 + 1px);
  column-gap: 0;
  row-gap: var(--g);
  min-inline-size: 42rem;
}
.cycle .panel {
  background: #fff;
  border: 1px solid var(--color-stone-20);
  border-radius: var(--radius-default);
  box-shadow: var(--shadow-card);
}
.cycle .foot { block-size: 0; }
.cycle .lbl {
  grid-column: 1;
  align-self: center;
  font-size: var(--type-body-m);
  font-weight: 600;
  color: var(--color-midnight);
}
.cycle .month {
  z-index: 1;
  align-self: end;
  padding: var(--g) 0 0 calc(var(--g) / 2 + 2px);
  font-size: var(--type-label-s);
  font-weight: 600;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--color-navy);
}
.cycle .ax {
  z-index: 1;
  align-self: start;
  margin-block-start: calc(var(--g) / -2);
  padding-inline-start: calc(var(--g) / 2 - 2px);
  font-family: var(--font-mono);
  font-size: var(--type-label-m);
  color: var(--color-stone-60);
  white-space: nowrap;
}
.cycle .bar {
  z-index: 1;
  display: flex;
  align-items: center;
  min-inline-size: 0;
  min-block-size: 44px;
  margin-inline: calc(var(--g) / 2);
  padding: 0 10px;
  border-radius: 8px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
}
.cycle .bar.is-plan { background: var(--color-mist); color: var(--color-navy); }
.cycle .bar.is-extra { background: var(--color-warning-50); color: color-mix(in srgb, var(--color-warning-600) 78%, var(--color-midnight)); }
.cycle .bar.runs-off {
  margin-inline-end: 0;
  border-start-end-radius: 0;
  border-end-end-radius: 0;
  mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
}
.cycle .tick { z-index: 1; justify-self: center; align-self: center; inline-size: 3px; block-size: 3px; border-radius: 50%; background: var(--color-stone-20); }
.cycle .tick.is-month { inline-size: 6px; block-size: 6px; background: var(--color-stone-40); }
.cycle .tick.is-mark { inline-size: 6px; block-size: 6px; background: var(--color-royal); }

.cost {
  max-inline-size: 45.5rem;
  inline-size: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  margin: 0 0 var(--space-32);
  font-size: var(--type-body-m);
  line-height: var(--lh-label);
  color: var(--color-stone-90);
}
.cost caption { text-align: start; caption-side: top; font-size: var(--type-body-s); color: var(--color-stone-60); padding-block-end: var(--space-16); }
.cost th, .cost td { padding: var(--space-16) var(--space-16) var(--space-16) 0; border-block-end: 1px solid var(--color-stone-20); text-align: start; vertical-align: top; }
.cost th:first-child, .cost td:first-child { inline-size: 4.5rem; padding-inline-end: 0; }
.cost thead th { padding-block: 0 var(--space-12); font-size: var(--type-label-s); font-weight: 600; letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--color-navy); vertical-align: bottom; }
.cost thead th small { display: block; margin-block-start: var(--space-4); font-size: var(--type-body-s); font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--color-stone-60); }
.cost tbody th { font-weight: 600; color: var(--color-midnight); }
.cost td b { display: block; font-size: var(--type-body-l); font-weight: 600; color: var(--color-midnight); font-variant-numeric: tabular-nums; }
.cost td small { display: block; margin-block-start: var(--space-4); font-size: var(--type-label-m); line-height: 1.4; color: var(--color-stone-60); max-inline-size: 30ch; font-variant-numeric: tabular-nums; }
.cost td:last-child b { font-size: var(--type-title-s); }
.cost tr.now td b { color: var(--color-navy); }
.cost td small.less { color: var(--color-success-600); font-weight: 600; }
.cost tbody tr:last-child th, .cost tbody tr:last-child td { border-block-end: 0; }
.visually-hidden { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* One item's checks, as /eligibility-check-result draws them. The rules are
   copied from css/eligibility-result.css so the two never differ. Keep them
   in step. */
.checks {
  max-inline-size: 45.5rem;
  margin: var(--space-8) 0 var(--space-16);
  font-size: var(--type-body-s);
}
.checks figcaption { color: var(--color-stone-60); line-height: var(--lh-label); }
.checks .v-yes { --v: var(--verdict-eligible); }
.checks .v-no  { --v: var(--verdict-not-eligible); }
.checks-count {
  margin: var(--space-12) 0 0;
  font-size: var(--type-label-s);
  font-weight: 700;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--color-stone-60);
}
.check-list {
  list-style: none;
  margin: var(--space-8) 0 0;
  padding: var(--space-12);
  display: grid;
  gap: var(--space-4);
  background: var(--color-paper);
  border: 1px solid var(--color-stone-20);
  border-radius: var(--radius-default);
}
.check-row {
  display: grid;
  grid-template-columns: 20px repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: var(--space-4) var(--space-12);
  align-items: baseline;
  font-size: var(--type-body-s);
  padding: var(--space-8) var(--space-12);
  border-radius: 8px;
}
.check-row.v-no { background: color-mix(in srgb, var(--v) 6%, transparent); box-shadow: inset 2px 0 0 var(--v); }
.check-row .check-mark { grid-row: 1 / span 2; align-self: start; }
.check-row .check-finding { grid-column-end: -1; }   /* takes the rest of the row, or the next row when the name needs the whole width */
.check-mark {
  display: grid;
  place-items: center;
  inline-size: 20px;
  block-size: 20px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--v) 12%, transparent);
  color: var(--v);
  align-self: start;
}
.check-row.v-yes .check-mark { background: none; }
.check-mark svg { inline-size: 14px; block-size: 14px; }
.check-name { font-weight: 600; color: var(--color-midnight); line-height: 1.5; }
.check-finding { color: var(--color-stone-60); line-height: 1.6; }
.check-state { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* One Insights card, as the web app draws it. The rules are copied from the
   app's DistributionCard.razor.css so the two never differ. Keep them in step. */
.reasons {
  max-inline-size: 34rem;
  margin: var(--space-8) 0 var(--space-16);
  font-size: var(--type-body-s);
}
.reasons figcaption { color: var(--color-stone-60); line-height: var(--lh-label); margin-block-end: var(--space-12); }
.dist-card {
  --accent: var(--color-royal);
  background: var(--color-paper);
  border: 1px solid var(--color-stone-20);
  border-radius: var(--radius-default);
  padding: var(--space-24);
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}
.dist-card.accent-not-eligible { --accent: var(--verdict-not-eligible); }
.dist-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-16); padding-bottom: var(--space-12); border-bottom: 1px solid var(--color-mist); }
.dist-title { font-size: var(--type-title-s); font-weight: 600; color: var(--color-midnight); line-height: 1.25; margin: 0; font-family: var(--font-sans); }
.dist-subtitle { margin: var(--space-4) 0 0; font-size: var(--type-body-s); color: var(--color-stone-60); line-height: 1.4; max-inline-size: 34ch; }
.dist-total { text-align: end; flex-shrink: 0; }
.dist-total-num { display: block; font-family: var(--font-mono); font-size: var(--type-title-m); font-variant-numeric: tabular-nums; color: var(--accent); line-height: 1.1; }
.dist-total-unit { display: block; font-size: var(--type-label-s); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-stone-60); margin-block-start: var(--space-4); }
.dist-rows { list-style: none; display: flex; flex-direction: column; gap: var(--space-12); margin: 0; padding: 0; }
.dist-row { display: grid; grid-template-columns: minmax(0, 1fr) 4.5rem 3.25rem; grid-template-areas: "label value share" "track track track"; align-items: center; gap: var(--space-4) var(--space-12); }
.dist-label { grid-area: label; font-size: var(--type-body-s); color: var(--color-midnight); line-height: 1.35; min-inline-size: 0; overflow-wrap: anywhere; }
.dist-code { font-family: var(--font-mono); font-size: var(--type-label-s); color: var(--color-stone-60); margin-inline-start: var(--space-8); white-space: nowrap; }
.dist-track { grid-area: track; display: block; block-size: 6px; border-radius: 3px; background: var(--color-stone-05); overflow: hidden; }
.dist-fill { display: block; block-size: 100%; border-radius: 3px; background: var(--accent); }
.dist-value { grid-area: value; font-family: var(--font-mono); font-size: var(--type-body-s); font-variant-numeric: tabular-nums; color: var(--color-midnight); text-align: end; }
.dist-share { grid-area: share; font-family: var(--font-mono); font-size: var(--type-label-m); font-variant-numeric: tabular-nums; color: var(--color-stone-60); text-align: end; }

/* One benefit result, as the web app draws it. The rules are copied from the
   app's BenefitResultCard.razor.css so the two never differ. Keep them in step. */
.benefit {
  max-inline-size: 34rem;
  margin: var(--space-8) 0 var(--space-16);
  font-size: var(--type-body-s);
}
.benefit figcaption { color: var(--color-stone-60); line-height: var(--lh-label); margin-block-end: var(--space-12); }
.benefit-result { border: 1px solid var(--color-stone-20); border-radius: var(--radius-default); background: var(--color-paper); padding: var(--space-24); }
.benefit-result-header { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-16); margin-block-end: var(--space-24); }
.benefit-item-badge { font-family: var(--font-mono); font-size: 1.25rem; font-weight: 700; color: var(--color-royal); background: color-mix(in srgb, var(--color-royal) 8%, transparent); border: 1px solid color-mix(in srgb, var(--color-royal) 20%, transparent); border-radius: 8px; padding: 0.15rem 0.75rem; letter-spacing: 0.04em; line-height: 1.4; }
.benefit-amount-block { display: flex; flex-direction: column; gap: var(--space-4); margin-block-end: var(--space-24); }
.benefit-amount-label { font-size: var(--type-label-s); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--color-stone-60); }
.benefit-amount { font-family: var(--font-mono); font-size: var(--type-hero-num); font-weight: 700; line-height: 1.1; color: var(--color-royal); font-variant-numeric: tabular-nums; }
.benefit-amount-note { font-size: var(--type-body-s); color: var(--color-stone-60); font-variant-numeric: tabular-nums; }
.benefit-figures { display: flex; flex-wrap: wrap; margin: 0; border: 1px solid var(--color-stone-20); border-radius: 8px; overflow: hidden; }
.benefit-figure { flex: 1 1 10rem; padding: 0.75rem 1rem; border-inline-end: 1px solid var(--color-stone-20); }
.benefit-figure:last-child { border-inline-end: 0; }
.benefit-figure dt { font-size: var(--type-label-m); font-weight: 600; color: var(--color-stone-60); margin-block-end: 0.15rem; }
.benefit-figure dd { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.4rem; margin: 0; font-family: var(--font-mono); font-size: 1.05rem; font-weight: 600; color: var(--color-midnight); font-variant-numeric: tabular-nums; }
.benefit-figure-unit { font-family: var(--font-sans); font-size: var(--type-label-m); font-weight: 400; color: var(--color-stone-60); }
.benefit-reason { margin: var(--space-16) 0 0; font-size: var(--type-body-s); line-height: 1.6; color: var(--color-stone-60); }

.updates-note {
  margin-block-start: var(--space-32);
  color: var(--color-stone-60);
}
}