/*
  One stylesheet, no framework, no web fonts.

  The palette and typography are lifted from the marketing site's default dark
  theme (cli-site/src/styles/globals.css, [data-theme="dark"]) so signing in does
  not feel like landing on a different product: same near-black ground, same
  crimson accent, same mono-first, uppercase-micro-label voice.

  What is deliberately NOT copied is the font *file*. The site pulls JetBrains Mono
  from Google Fonts; a page showing a customer's spend has no business making
  third-party requests from their browser, and the privacy claims in the CLI's
  README would be awkward to defend if this page did. So the stack below is
  system-mono only. It is the one visible difference from the site, and it is the
  right trade.

  Severity is never signalled by colour alone. Every coloured state also carries
  words, because a red bar means nothing to a user who cannot distinguish it from
  the green one.
*/

:root {
  /* Ground and panels */
  --bg: #060709;
  --bg-soft: #0c0e14;
  --panel: rgba(14, 12, 16, 0.94);
  --panel-raised: rgba(22, 16, 24, 0.95);
  --border: rgba(255, 51, 102, 0.18);
  --border-strong: rgba(255, 51, 102, 0.45);
  --hairline: rgba(255, 255, 255, 0.08);

  /* Type */
  --text: #f8fafc;
  --muted: #94a3b8;
  --dim: #64748b;

  /* Accent and states */
  --accent: #ff3366;
  --accent-soft: rgba(255, 51, 102, 0.12);
  --ok: #10b981;
  --warn: #fbbf24;
  --danger: #ff3366;

  --radius: 12px;
  --radius-sm: 8px;

  --glow: 0 16px 40px rgba(0, 0, 0, 0.85), 0 0 20px rgba(255, 51, 102, 0.10);

  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;
}

/*
  Light mode is kept rather than dropped. The site has a light-studio theme, and a
  user whose OS is set to light should not be handed a near-black page they cannot
  read in daylight. Same accent, same structure, inverted ground.
*/
@media (prefers-color-scheme: light) {
  :root {
    --bg: #f6f7f9;
    --bg-soft: #ffffff;
    --panel: #ffffff;
    --panel-raised: #fffafb;
    --border: rgba(214, 31, 79, 0.22);
    --border-strong: rgba(214, 31, 79, 0.5);
    --hairline: rgba(0, 0, 0, 0.08);

    --text: #14161c;
    --muted: #55606f;
    --dim: #6b7688;

    --accent: #d61f4f;
    --accent-soft: rgba(214, 31, 79, 0.09);
    --ok: #0f7a5a;
    --warn: #8a5a00;
    --danger: #c11338;

    --glow: 0 10px 28px rgba(15, 18, 25, 0.10);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.6 var(--mono);
  -webkit-font-smoothing: antialiased;
}

/*
  Ambient wash behind the content, echoing the site's radial glow. Fixed and
  non-interactive so it never intercepts a click.
*/
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 51, 102, 0.10) 0%, transparent 60%);
}

body > * { position: relative; z-index: 1; }

code, pre { font-family: var(--mono); font-size: 0.94em; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* --- chrome ------------------------------------------------------------- */

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--hairline);
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(12px);
}

@media (prefers-color-scheme: light) {
  .top { background: rgba(255, 255, 255, 0.85); }
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
}
.brand:hover { text-decoration: none; opacity: 0.88; }

/* The `>_` mark from the site's navbar. */
.brand-mark {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--hairline);
  background: rgba(255, 255, 255, 0.07);
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: -0.05em;
}

@media (prefers-color-scheme: light) {
  .brand-mark { background: var(--accent-soft); }
}

.top nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.top nav a, .linklike {
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-size: 12.5px;
  letter-spacing: 0.02em;
}
.top nav a:hover, .linklike:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.07);
  text-decoration: none;
}
@media (prefers-color-scheme: light) {
  .top nav a:hover, .linklike:hover { background: rgba(0, 0, 0, 0.05); }
}

.top nav a.here { color: var(--accent); background: var(--accent-soft); }

main { max-width: 900px; margin: 0 auto; padding: 28px 20px 56px; }

footer {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 20px 36px;
  color: var(--dim);
  font-size: 12px;
  letter-spacing: 0.04em;
}

/* --- cards -------------------------------------------------------------- */

.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  margin-bottom: 18px;
  box-shadow: var(--glow);
}

.card.narrow { max-width: 470px; margin-left: auto; margin-right: auto; }

/*
  Command echo above a heading, the way the site titles its sections. Decorative,
  so it is aria-hidden in the markup rather than read out as if it were content.
*/
.eyebrow {
  margin: 0 0 10px;
  color: var(--dim);
  font-size: 11.5px;
  letter-spacing: 0.08em;
}
.eyebrow::before { content: "> "; color: var(--accent); }

h1 {
  font-size: 19px;
  margin: 0 0 6px;
  letter-spacing: 0.01em;
  font-weight: 700;
}
h2 {
  font-size: 15px;
  margin: 0 0 6px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 700;
}

/* --- forms -------------------------------------------------------------- */

label {
  display: block;
  margin: 16px 0 6px;
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}

input[type="text"], input[type="email"], input[type="password"] {
  width: 100%;
  padding: 10px 12px;
  background: var(--bg-soft);
  color: var(--text);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  font: inherit;
}
input::placeholder { color: var(--dim); }
input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus {
  border-color: var(--border-strong);
}

input:focus-visible, button:focus-visible, a:focus-visible, summary:focus-visible {
  /* Never removed: keyboard users need to see where they are. */
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

button, .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
  padding: 10px 16px;
  min-height: 40px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease, transform 150ms ease;
}
@media (prefers-color-scheme: light) {
  button, .button { background: rgba(0, 0, 0, 0.03); }
}

button:hover, .button:hover {
  border-color: var(--border-strong);
  transform: translateY(-1px);
  text-decoration: none;
}

button.primary, .button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 700;
}
button.primary:hover, .button.primary:hover { filter: brightness(1.08); }

@media (prefers-color-scheme: light) {
  button.primary, .button.primary { color: #fff; }
}

button.danger { border-color: var(--danger); color: var(--danger); background: transparent; }
button.danger:hover { background: var(--danger); color: #fff; }

button.small { padding: 6px 11px; min-height: 0; margin-top: 0; font-size: 12px; }

/* Caret on primary actions, matching the site's CTA buttons. */
.caret { color: currentColor; opacity: 0.7; font-weight: 700; }

.linklike {
  margin: 0;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
  min-height: 0;
}

form.inline { display: inline; margin: 0; }
.row { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.row input[type="text"] { flex: 1 1 220px; }
.row button { margin-top: 0; }

/* --- messages ----------------------------------------------------------- */

.muted { color: var(--muted); }
.hint { color: var(--dim); font-size: 12.5px; }

.error, .warn, .note {
  padding: 11px 13px;
  border-radius: var(--radius-sm);
  border: 1px solid;
  margin: 14px 0;
  font-size: 13px;
}
.error { border-color: var(--danger); color: var(--danger); background: var(--accent-soft); }
.warn { border-color: var(--warn); color: var(--warn); background: rgba(251, 191, 36, 0.08); }
.note { border-color: var(--hairline); color: var(--muted); background: rgba(255, 255, 255, 0.03); }
@media (prefers-color-scheme: light) {
  .note { background: rgba(0, 0, 0, 0.03); }
}

/* --- headline figures --------------------------------------------------- */

/*
  The two numbers a user comes here for: what is left, and when it resets. Given
  their own row above the meter so they are legible at a glance rather than buried
  in a definition list.
*/
.headline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 14px;
  margin: 18px 0 20px;
}

.headline-cell {
  padding: 14px 16px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.03);
}
@media (prefers-color-scheme: light) {
  .headline-cell { background: rgba(0, 0, 0, 0.02); }
}

.headline-label {
  display: block;
  color: var(--dim);
  font-size: 10.5px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.headline-value {
  display: block;
  margin-top: 5px;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}
.headline-sub { display: block; margin-top: 2px; color: var(--dim); font-size: 11.5px; }

/* --- plan line and the usage meter -------------------------------------- */

.plan-line {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin: 14px 0 10px;
}

.pill {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.pill.neutral { border-color: var(--hairline); background: transparent; color: var(--muted); }

.meter {
  height: 10px;
  background: var(--bg-soft);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  overflow: hidden;
}
.meter-fill {
  height: 100%;
  background: var(--ok);
  transition: width 0.2s ease;
}
.meter-warn .meter-fill { background: var(--warn); }
.meter-critical .meter-fill { background: var(--danger); }

.meter-caption { margin: 9px 0 0; font-size: 13px; }

/* --- fact lists --------------------------------------------------------- */

.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px 20px;
  margin: 18px 0 0;
}
.facts div { min-width: 0; }
.facts dt {
  color: var(--dim);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.facts dd { margin: 3px 0 0; overflow-wrap: anywhere; font-weight: 600; }

.detail { margin-top: 18px; }
.detail summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 12.5px;
  letter-spacing: 0.04em;
}
.detail summary:hover { color: var(--text); }

/* --- keys table --------------------------------------------------------- */

.table-scroll { overflow-x: auto; }

.keys { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 13px; }
.keys th {
  text-align: left;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--dim);
  border-bottom: 1px solid var(--hairline);
  padding: 0 12px 9px 0;
  white-space: nowrap;
}
.keys td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--hairline); }
.keys tr.revoked { color: var(--dim); }
.keys tr.revoked code { text-decoration: line-through; }

/* --- the one-time secret ------------------------------------------------ */

.secret {
  margin: 14px 0;
  padding: 13px;
  background: var(--bg-soft);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  /* Wraps rather than scrolls: a key that is half off-screen invites a partial
     copy, which then fails to authenticate for no visible reason. */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  user-select: all;
}

/* --- terminal snippet --------------------------------------------------- */

/*
  A copyable command, styled like the site's install block. Not a form control, so
  it is selectable text rather than an input a user might try to edit.
*/
.snippet {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 0;
  padding: 12px 14px;
  background: var(--bg-soft);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  overflow-x: auto;
}
.snippet-prompt { color: var(--accent); font-weight: 700; flex-shrink: 0; }
.snippet code { white-space: nowrap; user-select: all; }

/* --- plans -------------------------------------------------------------- */

.region-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 16px 0 4px;
  font-size: 12.5px;
}
.region-bar form { margin: 0; }
.region-bar .button, .region-bar button { margin-top: 0; }

.plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin: 20px 0 0;
  align-items: stretch;
}

.plan {
  display: flex;
  flex-direction: column;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
}
.plan.featured {
  border-color: var(--border-strong);
  background: var(--panel-raised);
}
.plan.current { border-color: var(--ok); }

.plan-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.plan-tier {
  color: var(--dim);
  font-size: 10.5px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.plan-name { font-size: 17px; font-weight: 700; margin: 0 0 6px; }

.plan-price { display: flex; align-items: baseline; gap: 6px; margin: 10px 0 4px; }
.plan-amount { font-size: 27px; font-weight: 700; letter-spacing: -0.02em; }
.plan-period { color: var(--dim); font-size: 12px; }

.plan-desc { color: var(--muted); font-size: 12.5px; margin: 8px 0 0; }

.plan-models {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
  /* Long model lists would otherwise stretch the cards to different heights and
     push every CTA out of alignment. */
  max-height: 190px;
  overflow-y: auto;
}
.plan-models li { display: flex; gap: 8px; padding: 2px 0; color: var(--muted); }
.plan-models li::before { content: ">"; color: var(--accent); opacity: 0.65; }

.plan-cta { margin-top: auto; padding-top: 16px; }
.plan-cta button, .plan-cta .button { width: 100%; margin-top: 0; }

.plan-current-note {
  margin-top: auto;
  padding-top: 16px;
  color: var(--ok);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Respect a user's motion preference for the only transitions here. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
  button:hover, .button:hover { transform: none; }
}