/* Plan & Billing owns one bounded workspace inside Account. All selectors are
   module-scoped so the comparison cards and invoice rows cannot change Apps,
   Requests, or any other `.arow` consumer. */

#settingsMount > #planCard.billing-superseded {
  display: none !important;
}

#billingSettingsPanel.billing-workspace {
  width: 100%;
  min-width: 0;
  padding: clamp(18px, 2.3vw, 28px);
  overflow: hidden;
}

.billing-workspace-head {
  max-width: 760px;
  margin-bottom: 20px;
}

.billing-eyebrow {
  margin: 0 0 5px;
  color: var(--glow);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.billing-title {
  margin: 0;
  color: var(--cloud);
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1.15;
  letter-spacing: -.025em;
}

.billing-intro {
  max-width: 68ch;
  margin: 8px 0 0;
  font-size: 13px;
}

.billing-summary-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(250px, .75fr);
  gap: 14px;
}

.billing-lifecycle,
.billing-payment,
.billing-section {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--dusk2);
}

.billing-lifecycle,
.billing-payment {
  padding: 18px;
}

.billing-current-top,
.billing-capacity-top,
.billing-tier-head,
.billing-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

/* F7.19(a) — the one transferable piece of her PaymentModal: a tinted,
   radius-14 plan summary strip. `--surface-raised` is the handoff's own
   neutral surface (#F1F3F6 light) and it already flips; in dark it lands on
   the card's own colour, so the hairline is what carries the strip there and
   is removed again in light, where she draws none. */
.billing-current-top {
  align-items: center;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-raised);
}

:root[data-theme="light"] .billing-current-top {
  border-color: transparent;
}

.billing-current-text {
  min-width: 0;
}

.billing-summary-label,
.billing-capacity-label {
  display: block;
  color: var(--haze);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.billing-plan-name {
  display: block;
  margin-top: 3px;
  color: var(--cloud);
  font-size: 21px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.billing-lifecycle-copy {
  margin: 10px 0 0;
  color: var(--cloud);
  font-size: 13px;
}

.billing-safety-note {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-left: 3px solid var(--glow);
  border-radius: 8px;
  background: color-mix(in srgb, var(--glow) 9%, var(--dusk));
  color: var(--cloud);
  font-size: 12px;
  line-height: 1.45;
}

.billing-capacity-head {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.billing-capacity-head > .help,
.billing-section-title > .help,
.billing-payment > .help,
.billing-history-help {
  margin: 4px 0 0;
}

.billing-subtitle {
  margin: 0;
  color: var(--cloud);
  font-size: 15px;
  line-height: 1.3;
}

.billing-capacity-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.billing-capacity-card {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--dusk);
}

.billing-capacity-top {
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.billing-capacity-value {
  display: block;
  margin-top: 6px;
  color: var(--cloud);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.billing-capacity-meter {
  display: block;
  width: 100%;
  height: 7px;
  margin-top: 10px;
  overflow: hidden;
  border: 0;
  border-radius: 99px;
  background: var(--track);
  accent-color: var(--glow);
}

.billing-capacity-meter::-webkit-progress-bar {
  border-radius: 99px;
  background: var(--track);
}

.billing-capacity-meter::-webkit-progress-value {
  border-radius: 99px;
  background: var(--glow);
}

.billing-capacity-meter::-moz-progress-bar {
  border-radius: 99px;
  background: var(--glow);
}

.billing-capacity-card[data-capacity-state] .billing-capacity-meter {
  accent-color: var(--amber);
}

.billing-capacity-card[data-capacity-state] .billing-capacity-meter::-webkit-progress-value {
  background: var(--amber);
}

.billing-capacity-card[data-capacity-state] .billing-capacity-meter::-moz-progress-bar {
  background: var(--amber);
}

.billing-payment {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* F7.19(b) — her lock + reassurance row. */
.billing-secure-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.billing-lock-glyph {
  flex: 0 0 14px;
  margin-top: 2px;
}

/* F7.19(c) — her footer shape around the aside's one real action.
   `--border-subtle` is app.css's already-declared rgba(22,35,63,.08), which is
   the exact hairline she rules her modal footers with. */
.billing-payment-footer {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--border-subtle, rgba(22, 35, 63, .08));
}

.billing-payment .billing-manage {
  margin-top: 0;
}

.billing-gift-redeem {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.billing-gift-redeem-title {
  margin: 0 0 4px;
}

.billing-gift-redeem-row {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.billing-gift-redeem-input {
  flex: 1 1 auto;
  min-width: 0;
}

.billing-authority-note,
.billing-inline-error,
.billing-empty {
  margin: 14px 0 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--dusk);
  color: var(--haze);
  font-size: 12px;
}

/* The return trip from Stripe's hosted Checkout — js/billing.js's
   RETURN_NOTICE. Sits above the summary grid, ABOVE the header's margin so it
   reads as the first thing on the page, same "top of screen, not buried"
   placement UI-DIRECTION-2026-08-22 rule 1 asks for any pending-vs-applied
   state. `.confirming` uses --amber (attention/waiting, rule 4's own mapping
   for "not yet settled") rather than --mint: it is deliberately NOT styled as
   a success until the entitlement read actually says so. */
.billing-return-notice {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Her PaymentSuccess card is a centred 540px panel, not a full-bleed strip. */
  max-width: 540px;
  margin: 0 auto 16px;
  padding: 28px 40px;
  border-radius: 20px;
  text-align: center;
}

/* Her 64x64 status disc. The INNER mark is what states the case, so it is
   driven by the same class the copy is, and the confirming one is a ring that
   turns -- a wait, never a tick. */
.billing-return-disc {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: 18px;
  border-radius: 50%;
}

.billing-return-disc::before {
  content: "";
  display: block;
  width: 26px;
  height: 26px;
  border: 3px solid currentColor;
  border-radius: 50%;
}

.billing-return-copy {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.01em;
}

.billing-return-notice.confirming {
  border: 1px solid rgba(255, 196, 75, .45);
  background: rgba(255, 196, 75, .12);
  color: var(--waiting-text);
}

.billing-return-notice.confirming .billing-return-disc {
  background: var(--waiting-tint, rgba(255, 196, 75, .22));
  color: var(--waiting-accent, var(--amber));
}

/* The wait is shown as a wait: an open arc, turning. It stops turning for
   anyone who asked the OS for less motion, and the disc still reads as amber
   attention without it. */
.billing-return-notice.confirming .billing-return-disc::before {
  border-top-color: transparent;
  animation: billing-return-spin 1.1s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .billing-return-notice.confirming .billing-return-disc::before {
    animation: none;
  }
}

@keyframes billing-return-spin {
  to { transform: rotate(360deg); }
}

.billing-return-notice.canceled {
  border: 1px solid var(--line);
  background: var(--dusk);
  color: var(--haze);
}

.billing-return-notice.canceled .billing-return-disc {
  background: var(--surface-raised);
  color: var(--haze);
}

.billing-return-notice.canceled .billing-return-copy {
  font-size: 17px;
  font-weight: 650;
}

.billing-action-status,
.billing-plans-status {
  padding-bottom: 0;
  text-align: left;
}

/* W1.4 / F7.3 — her PaymentError band, on the sink that sits beside the
   buttons that can produce the error. Only `.is-error` paints it, so the
   "Opening secure checkout…" line on the same node stays an ordinary status
   line; nothing here touches display or visibility, and `.muted:empty` is
   what keeps the empty sink out of the layout.
   `--danger-tint` (#FCE4E4 light) and `--danger` (#C0342C light) are already
   her literals. In dark `--danger-tint` resolves to the card colour, so the
   hairline is what carries the band there. */
.billing-plans-status.is-error {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 820px;
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--danger) 40%, transparent);
  border-radius: 14px;
  background: var(--danger-tint);
  color: var(--danger-text, var(--danger));
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 20.25px;
  text-align: left;
}

:root[data-theme="light"] .billing-plans-status.is-error {
  border-color: transparent;
  color: #8C2A24;
}

.billing-plans-status.is-error::before {
  content: "!";
  display: flex;
  flex: 0 0 22px;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--danger);
  color: #FFFFFF;
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 800;
  line-height: 18px;
}

.billing-section {
  margin-top: 14px;
  padding: 18px;
}

.billing-section-head {
  align-items: center;
  margin-bottom: 14px;
}

.billing-section-title {
  min-width: 0;
}

#billingSettingsPanel .billingtoggle {
  flex: none;
  margin: 0;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--dusk);
}

#billingSettingsPanel .billingtoggle .ghost {
  min-height: 44px;
  padding: 9px 12px;
  white-space: nowrap;
}

/* THE SCAN ALLOWANCE — see billing.js's scanCreditsSection().
   The card itself reuses `.billing-capacity-card` and
   `.billing-capacity-meter` above, deliberately: "a number out of a limit"
   already has a visual vocabulary on this screen and a second near-identical
   one would be the drift style-vocabulary.test.js exists to stop. Only the
   two things that genuinely differ are declared here — it is one card rather
   than a grid of two, and its meter has to be able to go coral, which no
   capacity meter ever does. */
.billing-scan-card {
  margin-top: 10px;
}

.billing-scans > .help {
  margin: 12px 0 0;
}

/* AMBER FOR "RUNNING LOW", CORAL FOR "NONE LEFT" — UI-DIRECTION §3's rule,
   and the two states are not the same claim. Amber is attention: something
   will need you soon. Coral is the direction that costs somebody something,
   and at zero it already has. */
.billing-scan-card[data-scan-state="low"] .billing-capacity-meter {
  accent-color: var(--amber);
}

.billing-scan-card[data-scan-state="low"] .billing-capacity-meter::-webkit-progress-value {
  background: var(--amber);
}

.billing-scan-card[data-scan-state="low"] .billing-capacity-meter::-moz-progress-bar {
  background: var(--amber);
}

.billing-scan-card[data-scan-state="exhausted"] .billing-capacity-meter {
  accent-color: var(--coral);
}

.billing-scan-card[data-scan-state="exhausted"] .billing-capacity-meter::-webkit-progress-value {
  background: var(--coral);
}

.billing-scan-card[data-scan-state="exhausted"] .billing-capacity-meter::-moz-progress-bar {
  background: var(--coral);
}

/* F7.6 — her ChoosePlanModal stacks the plans as full-width selectable ROWS,
   not as a card grid. `max-width` replaces the old auto-fill track bound and
   keeps doing its job: a one- or two-tier catalog is bounded at her row width
   instead of stretching into slabs across a wide account. */
.billing-tier-grid {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  /* Her rows fill their container; this is the same 820px reading column the
     rest of the re-skin settles on, and it replaces the old auto-fill track
     bound as the thing that stops a one- or two-tier catalog stretching
     across a wide account. */
  max-width: 820px;
}

#billingSettingsPanel .billing-tier.arow {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  min-width: 0;
  margin: 0;
  padding: 16px 18px;
  border-radius: 16px;
  background: var(--dusk);
}

#billingSettingsPanel .billing-tier.is-current {
  border-color: color-mix(in srgb, var(--mint) 56%, var(--line));
  box-shadow: inset 0 3px 0 color-mix(in srgb, var(--mint) 72%, transparent);
}

/* Her recommended row: composed WITH `is-current`, not fighting it -- the
   inset mint bar above still wins on a plan the household already holds,
   because "this is yours" outranks "this is popular". */
#billingSettingsPanel .billing-tier.is-recommended {
  position: relative;
  border-width: 2px;
  border-color: var(--glow);
  padding: 15px 17px;
  background: color-mix(in srgb, var(--glow) 10%, var(--dusk2));
}

.billing-tier-popular {
  position: absolute;
  top: -11px;
  left: 18px;
  padding: 3px 11px;
  border-radius: 999px;
  background: var(--glow);
  color: var(--dusk2);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 800;
  line-height: 16.5px;
}

:root[data-theme="light"] .billing-tier-popular {
  color: #FFFFFF;
}

/* The price and the action are her right-hand column. */
.billing-tier-aside {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  text-align: right;
}

.billing-tier-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.billing-tier-head {
  align-items: center;
  flex-wrap: wrap;
}

/* F7.14 — live had these the wrong way round: the heading face on the plan
   NAME and the body face on the AMOUNT. She uses the heading face for the
   number (it is the thing being compared down the column) and the body face,
   heavier, for the name. */
.billing-tier-name {
  margin: 0;
  color: var(--cloud);
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 800;
  line-height: 21.75px;
}

#billingSettingsPanel .billing-tier-price.asub {
  display: flex;
  align-items: baseline;
  gap: 2px;
  min-height: 1.5em;
  margin-top: 0;
  color: var(--cloud);
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.billing-tier-period {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
  color: var(--text-tertiary);
}

.billing-tier-tagline {
  margin: 5px 0 0;
}

#billingSettingsPanel .tiersaving {
  margin-top: 7px;
  color: var(--done-text);
  font-weight: 650;
}

:root[data-theme="light"] #billingSettingsPanel .tiersaving {
  color: #0A6242;
}

/* F7.15 — plain tertiary text under the plan name, no box at all. KEEPS
   LIVE'S TEXT ("3 children · 9 devices"): her "Up to 3 devices" contradicts
   src/catalog.js's real deviceLimits and would understate what the money
   buys. Tertiary role, so `--text-tertiary` (#6D778A light) -- a pinned
   one-step deviation from her #8A93A3, not an oversight. */
.billing-tier-capacity {
  align-self: flex-start;
  margin-top: 2px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--text-tertiary);
  font-size: 12.5px;
  /* `.an`'s 600 was reaching this the moment it stopped being `.asub`. */
  font-weight: 400;
  line-height: 18.75px;
}

.billing-tier-features {
  display: grid;
  gap: 7px;
  margin: 13px 0 0;
  padding: 0;
  list-style: none;
  color: var(--haze);
  font-size: 12px;
}

.billing-tier-features li {
  position: relative;
  padding-left: 16px;
}

.billing-tier-features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--done-text);
  font-weight: 800;
}

:root[data-theme="light"] .billing-tier-features li::before {
  color: #0A6242;
}

.billing-fit-warning {
  margin-top: 14px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--amber) 46%, var(--line));
  border-radius: 11px;
  background: color-mix(in srgb, var(--amber) 8%, var(--dusk2));
}

.billing-fit-warning .fineprint {
  margin-top: 6px;
  color: var(--cloud);
}

/* F7.16 — nothing on this screen used to be a primary action. The tier CTA
   now wears the product's `.primary` control (so it inherits whatever the
   shared gradient token resolves to rather than restating it here), at her
   billing-surface size. F7.21 adds her forward arrow as a decorative suffix
   rather than editing three locales' worth of strings. */
#billingSettingsPanel .billing-tier-action {
  width: auto;
  min-height: 48px;
  margin-top: 0;
  padding: 12px 24px;
  border-radius: var(--radius-button, 999px);
  font-family: var(--font-heading);
  font-size: 14.5px;
  font-weight: 700;
  line-height: 21.75px;
  white-space: nowrap;
}

#billingSettingsPanel .billing-tier-action::after {
  content: " \2192" / "";  /* CSS alt text: the empty string keeps this
     decorative arrow OUT of the accessibility tree. Chromium exposes ::after
     content in the a11y name, so every plan button was announcing an
     untranslated "right arrow" after its localized label, in all three
     locales. textContent is unaffected, which is why no test saw it. */
}

/* The does-not-fit / already-yours state keeps her GHOST treatment rather
   than a greyed primary, so "unavailable" and "do this" never read alike.
   js/billing.js sets aria-describedby on the capacity case; this is the
   visual half of the same statement. */
/* `.is-unavailable`, NOT `:disabled`. `:disabled` has THREE producers on this
   button and only two of them mean "you cannot buy this":
     js/billing.js:1474  !fit.fits        -- permanent, ghost is right
     js/billing.js:1474  isCurrentTier    -- permanent, ghost is right
     js/billing.js:988   checkout() guard -- IN FLIGHT, ghost is a lie
   Keying the ghost off :disabled made a checkout in progress look exactly like
   an unavailable tier: same background (none), same colour, same border, same
   empty ::after, same not-allowed cursor -- measured side by side in both
   themes. The in-flight button now keeps its primary treatment and carries
   aria-busy instead. */
#billingSettingsPanel .billing-tier-action.is-unavailable {
  border: 1px solid var(--line);
  background: none;
  box-shadow: none;
  color: var(--text-tertiary);
  opacity: 1;
}

#billingSettingsPanel .billing-tier-action.is-unavailable::after {
  content: "";
}

.billing-invoices > .sect {
  margin-bottom: 0;
}

.billing-invoice-list {
  max-height: 330px;
  margin-top: 12px;
  padding-right: 4px;
  overflow-y: auto;
  overscroll-behavior-block: contain;
  scrollbar-gutter: stable;
}

#billingSettingsPanel .billing-invoice-row.arow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  margin-bottom: 7px;
  background: var(--dusk);
}

#billingSettingsPanel .billing-invoice-row:last-child {
  margin-bottom: 0;
}

.billing-invoice-link {
  min-width: 108px;
  min-height: 44px;
}

.billing-message-title,
.billing-message {
  margin-bottom: 0;
}

@media (max-width: 760px) {
  .billing-summary-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .billing-section-head {
    align-items: stretch;
    flex-direction: column;
  }

  #billingSettingsPanel .billingtoggle {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    width: 100%;
  }

  /* Her row wants a real second column; below this the price and the action
     stack under the name instead of crushing it. */
  #billingSettingsPanel .billing-tier.arow {
    flex-direction: column;
    align-items: stretch;
  }

  .billing-tier-aside {
    align-items: stretch;
    text-align: left;
  }

  #billingSettingsPanel .billing-tier-action {
    width: 100%;
  }
}

@media (max-width: 480px) {
  #billingSettingsPanel.billing-workspace {
    padding: 17px;
  }

  .billing-lifecycle,
  .billing-payment,
  .billing-section {
    padding: 14px;
  }

  .billing-capacity-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  #billingSettingsPanel .billing-invoice-row.arow {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .billing-invoice-link {
    grid-column: 1 / -1;
    width: 100%;
  }
}