/* Settings > Plan & billing (Free, Pro, Pro Plus), the plan-aware header pill, the API page on
   Free, the admin search cost check and the plan prompt card. Tokens only, from portal.css, so
   the light and dark themes both follow: --surface, --surface-2, --surface-3, --canvas, --ink,
   --ink-2, --ink-3, --line, --line-2, --brand, --brand-soft, --brand-line, --brand-ink,
   --action, --action-ink, --rust, --rust-soft, --rust-line, --amber-ink, --radius-control,
   --radius-card, --shadow-card, --shadow-pop. */

.pb-page { display: grid; gap: 16px; max-width: 960px; }
.pb-page > .panel + .panel { margin-top: 0; }
.pb-panel { display: grid; gap: 16px; padding: 24px; }
.pb-title { font-size: 18px; line-height: 1.35; margin: 0; }
.pb-panel > .inline-status:empty, .pb-funds-form > .inline-status:empty, .pb-auto-form > .inline-status:empty,
.pb-upgrade > .inline-status:empty { display: none; }
.pb-panel .inline-status, .pb-upgrade .inline-status { margin: 0; }

/* What you have. */
.pb-summary-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.pb-summary-titles { display: grid; gap: 4px; min-width: 0; }
.pb-terms { margin: 0; color: var(--ink-3); font-size: 14px; font-variant-numeric: tabular-nums; }
.pb-manage { flex: none; min-height: 44px; }

.pb-usage { display: grid; gap: 8px; }
.pb-usage + .pb-usage { padding-top: 16px; border-top: 1px solid var(--line); }
.pb-usage-line { margin: 0; color: var(--ink); font-size: 16px; }
.pb-big { font-size: 26px; font-weight: 620; letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
.pb-usage-words { color: var(--ink-2); }
.pb-usage-note { margin: 0; color: var(--ink-3); font-size: 13px; font-variant-numeric: tabular-nums; }
.pb-warn { color: var(--amber-ink); }
.pb-meter { position: relative; height: 8px; max-width: 420px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.pb-meter-fill { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: var(--brand); }

.pb-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.pb-figure { display: grid; gap: 4px; align-content: start; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--canvas); }
.pb-figure-label { color: var(--ink-3); font-size: 13px; }
.pb-figure-value { color: var(--ink); font-size: 30px; font-weight: 620; letter-spacing: -.8px; line-height: 1.15; font-variant-numeric: tabular-nums; }
.pb-figure-note { color: var(--ink-3); font-size: 13px; font-variant-numeric: tabular-nums; }

/* Upgrade cards on Free. The popular plan is marked by its outline, not a label. */
.pb-upgrade { display: grid; gap: 12px; }
.pb-section-title { margin: 8px 0 0; font-size: 18px; }
.pb-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.pb-plan {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
.pb-plan-popular { border-color: var(--brand-line); box-shadow: inset 0 0 0 1px var(--brand-line), var(--shadow-card); }
.pb-plan-name { margin: 0; font-size: 16px; }
.pb-plan-price { margin: 0; color: var(--ink-3); font-size: 14px; }
.pb-plan-price strong { color: var(--ink); font-size: 30px; font-weight: 620; letter-spacing: -.8px; font-variant-numeric: tabular-nums; }
.pb-plan-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; color: var(--ink-2); font-size: 14px; font-variant-numeric: tabular-nums; }
.pb-plan-lines li { position: relative; padding-left: 18px; line-height: 1.5; }
.pb-plan-lines li::before { content: ""; position: absolute; left: 2px; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); }
.pb-plan-cta { margin-top: auto; width: 100%; min-height: 44px; justify-content: center; }

/* Pro Plus: the key. */
.pb-key-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pb-rule { margin: 0; color: var(--ink); line-height: 1.6; font-variant-numeric: tabular-nums; }
.pb-key-link { justify-self: start; min-height: 44px; display: inline-flex; align-items: center; }

/* Add funds. */
.pb-funds-form { display: grid; gap: 16px; }
.pb-presets { display: grid; grid-template-columns: repeat(4, minmax(0, 96px)); gap: 8px; }
.pb-preset {
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.pb-preset:hover { background: var(--surface-2); }
.pb-preset:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.pb-preset.active { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-ink); }
.pb-other { display: grid; gap: 6px; max-width: 240px; margin: 0; }
.pb-other-label { color: var(--ink-2); font-size: 13px; font-weight: 500; }
.pb-money {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-control);
  background: var(--surface);
  overflow: hidden;
}
.pb-money:focus-within { outline: 3px solid var(--brand); outline-offset: 2px; }
.pb-money-sign { padding: 0 2px 0 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.pb-money .pb-money-input {
  flex: 1;
  width: 100%;
  min-width: 0;
  min-height: 42px;
  padding: 8px 12px 8px 4px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}
.pb-money .pb-money-input:disabled { color: var(--ink-3); cursor: not-allowed; }
.pb-add-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; }
.pb-add { min-height: 44px; min-width: 140px; justify-content: center; font-variant-numeric: tabular-nums; }
.pb-fine { margin: 0; color: var(--ink-3); font-size: 13px; }

/* Auto top-up: one switch and one sentence. */
.pb-auto-form { display: grid; gap: 14px; }
.pb-switch { justify-content: flex-start; max-width: 420px; }
/* The native checkbox stays the control but is never drawn, even while disabled. */
.pb-switch .switch-input, .pb-switch .switch-input:disabled { opacity: 0; }
.pb-switch .switch-input:disabled + .switch-track { opacity: .5; cursor: not-allowed; }
.pb-money:has(.pb-money-input:disabled) { background: var(--surface-2); }
.pb-sentence { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin: 0; color: var(--ink); font-size: 15px; }
.pb-sentence .pb-money { width: 128px; }
.pb-auto-save { justify-self: start; min-height: 44px; min-width: 96px; justify-content: center; }
.pb-note { margin: 0; color: var(--ink-3); font-size: 13px; }

/* The header pill, plan-aware. The legacy pill's shape comes from portal.css. */
.plan-pill .plan-pill-text { white-space: nowrap; }
.plan-pill.is-low .plan-pill-text { color: var(--amber-ink); }
/* A phone header: the short words ("7 left", "$42.35") so the pill never runs over the wordmark.
   The full sentence stays in the title and the accessible name. Same breakpoints as portal.css's
   phone header. */
@media (max-width: 767px), (pointer: coarse) and (orientation: landscape) and (max-width: 1023px) and (max-height: 500px) {
  .topbar-actions > a.plan-pill { min-width: 0; flex: 0 1 auto; overflow: hidden; }
  /* The words carry it on a phone; the icon's width goes back to the wordmark. */
  .topbar-actions > a.plan-pill .icon { display: none; }
  .plan-pill[data-short] .plan-pill-text { display: none; }
  .plan-pill[data-short]::after {
    content: attr(data-short); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink);
  }
  .plan-pill.is-low[data-short]::after { color: var(--amber-ink); }
}

/* API & MCP on Free. */
.pb-gate { display: grid; gap: 12px; justify-items: start; }
.pb-gate-title { margin: 0; font-size: 18px; }
.pb-gate-text { margin: 0; color: var(--ink-2); }
.pb-gate-action { min-height: 44px; display: inline-flex; align-items: center; }

/* Admin: the search cost check. Red when the average is over the search price. */
.pb-costs { display: grid; gap: 14px; }
.pb-cost-intro { margin: 0; color: var(--ink-3); font-size: 13px; font-variant-numeric: tabular-nums; }
.pb-cost-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pb-cost { display: grid; gap: 4px; align-content: start; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--canvas); }
.pb-cost-label { color: var(--ink-3); font-size: 13px; }
.pb-cost-value { color: var(--ink); font-size: 26px; font-weight: 620; letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
.pb-cost-unit, .pb-cost-note { color: var(--ink-3); font-size: 13px; font-variant-numeric: tabular-nums; }
.pb-cost-flag { justify-self: start; margin-top: 4px; padding: 3px 8px; border-radius: var(--radius-control); background: var(--rust-soft); color: var(--rust); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pb-cost-over { border-color: var(--rust-line); background: var(--rust-soft); }
.pb-cost-over .pb-cost-value { color: var(--rust); }
.pb-cost-funding td { font-variant-numeric: tabular-nums; }

/* The plan prompt: a small card above the page, never a wall. */
.cm-plan-prompt {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 90;
  display: grid;
  gap: 8px;
  width: min(420px, calc(100vw - 32px));
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-pop);
}
.cm-plan-prompt-title { margin: 0; font-size: 16px; line-height: 1.4; }
.cm-plan-prompt-message { margin: 0; color: var(--ink-2); font-size: 14px; line-height: 1.55; font-variant-numeric: tabular-nums; }
.cm-plan-prompt-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.cm-plan-prompt-action, .cm-plan-prompt-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 8px 16px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-control);
  font: inherit;
  font-size: 14px;
  font-weight: 550;
  text-decoration: none;
  cursor: pointer;
}
.cm-plan-prompt-action { background: var(--action); border-color: var(--action); color: var(--action-ink); }
.cm-plan-prompt-action:hover { text-decoration: none; opacity: .92; }
.cm-plan-prompt-close { background: var(--surface); color: var(--ink-2); }
.cm-plan-prompt-close:hover { background: var(--surface-2); }
.cm-plan-prompt-action:focus-visible, .cm-plan-prompt-close:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }

@media (max-width: 1200px) {
  .pb-page { max-width: none; }
}

@media (max-width: 760px) {
  .pb-panel { padding: 18px 16px 20px; }
  .pb-summary-head { flex-direction: column; align-items: stretch; }
  .pb-manage, .pb-key-link, .pb-add, .pb-auto-save, .pb-gate-action { width: 100%; justify-content: center; }
  .pb-figure-value, .pb-plan-price strong { font-size: 26px; }
  .pb-plans, .pb-cost-grid { grid-template-columns: 1fr; }
  .pb-presets { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pb-other { max-width: none; }
  .pb-add-row { flex-direction: column; align-items: stretch; }
  .pb-fine { text-align: center; }
  .pb-sentence .pb-money { width: 112px; }
  .cm-plan-prompt { left: 16px; right: 16px; width: auto; bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
  .cm-plan-prompt-action, .cm-plan-prompt-close { flex: 1 1 auto; }
}