/* ============================================================
   Cost Estimator — public web surface.
   Built on the codershack-design tokens (static/design/styles.css).
   Scope is .svc-estimator (ice accent). Only project-level
   composition lives here; all colors/type/effects are tokens.
   ============================================================ */

/* ---- Notched panel border that follows the clip-path corners ---- */
.notch {
  position: relative;
  background: var(--fill-card);
  clip-path: var(--clip, var(--clip-card));
}
.notch::before {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: var(--clip, var(--clip-card));
  background: var(--line-2);
  padding: 1px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

/* ---- Layout rail ---- */
.rail { max-width: var(--rail-max); margin: 0 auto; padding: 0 var(--rail-pad); }
main { position: relative; z-index: 1; }

/* ---- Nav ---- */
.nav {
  position: sticky; top: 0; z-index: 30;
  border-bottom: 1px solid var(--line-1);
  background: rgba(6, 7, 11, .72);
  -webkit-backdrop-filter: var(--blur-nav); backdrop-filter: var(--blur-nav);
}
.nav-in { display: flex; align-items: center; justify-content: space-between; height: 60px; }
.lockup { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.lockup img { width: 26px; height: 26px; display: block; }
.lockup b {
  font-family: var(--font-display); font-weight: var(--w-bold);
  text-transform: uppercase; letter-spacing: var(--track-display);
  font-size: 15px; color: var(--ink-1);
}
.lockup span {
  font-family: var(--font-mono); font-size: var(--mono-4xs);
  letter-spacing: var(--track-tag); color: var(--ac); text-transform: uppercase;
}
.nav-links { display: flex; align-items: center; gap: 22px; }
.nav-links a {
  font-family: var(--font-mono); font-size: var(--mono-xs);
  letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--ink-4); text-decoration: none; transition: color var(--dur-fast) var(--ease-out);
}
.nav-links a:hover { color: var(--ink-1); }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  font-family: var(--font-mono); font-size: var(--mono-xs);
  letter-spacing: var(--track-label); text-transform: uppercase;
  padding: 13px 22px; border: 0; --clip: var(--clip-sm);
  transition: filter var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.btn-primary { background: var(--ac); color: #04121e; box-shadow: var(--glow-cta); font-weight: var(--w-semibold); }
.btn-primary:hover { filter: brightness(1.12); }
.btn-ghost { background: transparent; color: var(--ink-2); }
.btn-ghost::before { background: var(--line-3); }
.btn-ghost:hover { color: var(--ink-0); }

/* ---- Eyebrow ---- */
.eyebrow {
  font-family: var(--font-mono); font-size: var(--mono-2xs);
  letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--ac);
}
.eyebrow::before { content: "// "; color: var(--ac); }

/* ---- Hero ---- */
.hero { position: relative; padding: clamp(48px, 8vw, 92px) 0 var(--section-y); overflow: hidden; }
.hero::before {
  content: ""; position: absolute; z-index: 0; top: -10%; left: 50%; transform: translateX(-50%);
  width: 900px; height: 520px; pointer-events: none;
  background: radial-gradient(60% 60% at 50% 0%, var(--ac-soft), transparent 70%);
}
.hero-in { position: relative; z-index: 1; max-width: 760px; }
.hero h1 {
  font-family: var(--font-display); font-size: var(--display-hero);
  line-height: var(--display-leading); letter-spacing: var(--display-tracking);
  margin: 18px 0 0;
}
.hero h1 em { font-style: normal; color: var(--ac); text-shadow: var(--glow-text); }
.lede { color: var(--ink-3); font-size: var(--body-lg); line-height: var(--body-leading); margin: 18px 0 0; max-width: 60ch; }

/* ---- Estimator form ---- */
.estimator { margin-top: 30px; }
.field { --clip: var(--clip-lg); padding: 5px; background: var(--surface-3); }
.field textarea {
  display: block; width: 100%; min-height: 132px; resize: vertical;
  background: transparent; border: 0; outline: 0; color: var(--ink-1);
  font-family: var(--font-sans); font-size: var(--body-md); line-height: var(--body-leading);
  padding: 14px 16px;
}
.field textarea::placeholder { color: var(--ink-5); }
.field input {
  display: block; width: 100%; background: transparent; border: 0; outline: 0;
  color: var(--ink-1); font-family: var(--font-sans); font-size: var(--body-md);
  padding: 14px 16px;
}
.field input::placeholder { color: var(--ink-5); }
.estimator-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; flex-wrap: wrap; }
.estimator-meta { display: flex; align-items: center; gap: 14px; }
.link {
  background: none; border: 0; cursor: pointer; padding: 0;
  font-family: var(--font-mono); font-size: var(--mono-xs); letter-spacing: var(--track-mono);
  color: var(--ink-4); text-decoration: none; text-transform: uppercase;
}
.link:hover { color: var(--ac); }
.usage-chip {
  font-family: var(--font-mono); font-size: var(--mono-2xs); letter-spacing: var(--track-mono);
  text-transform: uppercase; color: var(--ink-5);
}
.usage-chip b { color: var(--ink-2); }

/* ---- How it works / honesty ---- */
.howto { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 26px; }
.howto span {
  font-family: var(--font-mono); font-size: var(--mono-xs); letter-spacing: var(--track-mono);
  color: var(--ink-5);
}
.howto span b { color: var(--ink-3); font-weight: var(--w-regular); }
.note {
  margin-top: 22px; padding: 12px 16px; --clip: var(--clip-md);
  background: var(--ac-soft); color: var(--ink-3);
  font-size: var(--body-sm); line-height: 1.55;
}
.note::before { background: var(--ac-glow); }

/* ============================================================
   Decision card
   ============================================================ */
.result { margin-top: 30px; }
.card { padding: clamp(22px, 3vw, 32px); --clip: var(--clip-xl); }
.card.is-low { opacity: .96; }
.card-corner { position: absolute; width: 14px; height: 14px; z-index: 2; }
.card-corner.tl { top: 9px; left: 9px; border-top: 2px solid var(--ac); border-left: 2px solid var(--ac); }
.card-corner.br { bottom: 9px; right: 9px; border-bottom: 2px solid var(--ac); border-right: 2px solid var(--ac); }

.verdict { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.verdict h2 {
  font-family: var(--font-display); font-size: var(--display-sm); text-transform: uppercase;
  color: var(--ink-0); letter-spacing: -.005em;
}
.badge {
  font-family: var(--font-mono); font-size: var(--mono-2xs); letter-spacing: var(--track-mono);
  text-transform: uppercase; padding: 5px 10px; --clip: var(--clip-xs); white-space: nowrap;
}
.badge .dot { display: inline-block; width: 6px; height: 6px; border-radius: var(--radius-pill); margin-right: 7px; vertical-align: middle; }
.badge-high { background: var(--success-soft); color: var(--success); }
.badge-high .dot { background: var(--success); }
.badge-low { background: var(--warning-soft); color: var(--warning); }
.badge-low .dot { background: var(--warning); }
.badge-none { background: var(--surface-3); color: var(--ink-4); }
.badge-none .dot { background: var(--ink-5); }

.basis { margin-top: 6px; font-family: var(--font-mono); font-size: var(--mono-2xs); letter-spacing: var(--track-mono); color: var(--ink-5); text-transform: uppercase; }

/* metric tiles */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 22px; }
@media (max-width: 620px) { .tiles { grid-template-columns: 1fr; } }
.tile { padding: 16px 18px; --clip: var(--clip-card); background: var(--void-2); }
.tile .k { font-family: var(--font-mono); font-size: var(--mono-2xs); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--ink-5); }
.tile .v { margin-top: 9px; font-family: var(--font-display); font-size: clamp(26px, 3.4vw, 34px); color: var(--ink-0); text-transform: uppercase; line-height: 1; }
.tile .v.muted { color: var(--ink-6); }
.tile.cost .v { color: var(--ac); }
.tile .sub { margin-top: 7px; font-size: var(--body-xs); color: var(--ink-5); }

.rationale { margin-top: 20px; color: var(--ink-3); font-size: var(--body-md); line-height: var(--body-leading); }

details.how { margin-top: 18px; border-top: 1px solid var(--line-1); padding-top: 14px; }
details.how summary {
  cursor: pointer; list-style: none; font-family: var(--font-mono); font-size: var(--mono-xs);
  letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--ink-4);
}
details.how summary::-webkit-details-marker { display: none; }
details.how summary::before { content: "▸ "; color: var(--ac); }
details.how[open] summary::before { content: "▾ "; }
.how-grid { margin-top: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; }
.how-grid div { font-family: var(--font-mono); font-size: var(--mono-2xs); letter-spacing: var(--track-mono); color: var(--ink-5); display: flex; justify-content: space-between; gap: 12px; }
.how-grid div b { color: var(--ink-2); font-weight: var(--w-regular); }

.card-cta { margin-top: 22px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

/* ---- Cap-reached prompt ---- */
.cap { padding: clamp(22px, 3vw, 30px); --clip: var(--clip-xl); }
.cap h2 { font-family: var(--font-display); font-size: var(--display-xs); text-transform: uppercase; color: var(--ink-0); }
.cap p { margin-top: 12px; color: var(--ink-3); font-size: var(--body-md); line-height: var(--body-leading); }
.cap .card-cta { margin-top: 20px; }

/* ============================================================
   Auth + account (slice 4b)
   ============================================================ */
.auth { padding: clamp(48px, 9vw, 110px) 0 var(--section-y); display: flex; justify-content: center; }
.auth-panel { position: relative; width: 100%; max-width: 460px; padding: clamp(26px, 4vw, 38px); --clip: var(--clip-xl); }
.auth-h { font-family: var(--font-display); font-size: var(--display-md); text-transform: uppercase; color: var(--ink-0); margin-top: 14px; letter-spacing: -.005em; }
.auth-p { margin-top: 14px; color: var(--ink-3); font-size: var(--body-md); line-height: var(--body-leading); }
.auth-p b { color: var(--ink-1); font-weight: var(--w-regular); }
.auth-meta { margin-top: 16px; font-family: var(--font-mono); font-size: var(--mono-2xs); letter-spacing: var(--track-mono); color: var(--ink-5); }
.auth-err { margin-top: 14px; padding: 10px 14px; --clip: var(--clip-md); background: var(--danger-soft); color: var(--danger); font-size: var(--body-sm); }
.auth-form { margin-top: 22px; display: flex; flex-direction: column; gap: 14px; }
.auth-form .field { --clip: var(--clip-md); padding: 3px; background: var(--surface-3); }

.account { padding: clamp(40px, 7vw, 80px) 0 var(--section-y); }
.account-head { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; }
.account-head .auth-h { margin-top: 8px; flex: 1; min-width: 0; word-break: break-word; }
.account-grid { margin-top: 30px; display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; }
@media (max-width: 720px) { .account-grid { grid-template-columns: 1fr; } }
.balance { position: relative; padding: clamp(24px, 3.4vw, 34px); --clip: var(--clip-xl); }
.balance .k { font-family: var(--font-mono); font-size: var(--mono-2xs); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--ink-5); }
.balance-v { margin-top: 10px; font-family: var(--font-display); font-size: clamp(54px, 9vw, 84px); line-height: 1; color: var(--ac); text-shadow: var(--glow-text); }
.balance-sub { margin-top: 12px; color: var(--ink-4); font-size: var(--body-sm); line-height: 1.5; max-width: 42ch; }
.account-side { display: flex; flex-direction: column; gap: 14px; }
.side-card { display: block; padding: 18px 20px; --clip: var(--clip-card); text-decoration: none; transition: filter var(--dur-fast) var(--ease-out); }
a.side-card:hover { filter: brightness(1.4); }
.side-card .k { font-family: var(--font-mono); font-size: var(--mono-xs); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--ink-1); }
.side-card .k::first-letter { color: var(--ac); }
.side-card p { margin-top: 8px; color: var(--ink-4); font-size: var(--body-sm); line-height: 1.5; }
.side-card code { color: var(--ink-2); font-size: var(--mono-sm); }
.side-card.is-static { opacity: .85; }

/* ============================================================
   Pricing (slice 4c)
   ============================================================ */
.pricing { padding: clamp(40px, 7vw, 80px) 0 var(--section-y); }
.pricing .auth-h { margin-top: 14px; max-width: 18ch; }
.pricing .lede { margin-top: 16px; }
.pricing .lede b { color: var(--ink-1); font-weight: var(--w-regular); }
.price-grid { margin-top: 34px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }
@media (max-width: 760px) { .price-grid { grid-template-columns: 1fr; } }
.price-card { position: relative; padding: clamp(22px, 3vw, 30px); --clip: var(--clip-xl); display: flex; flex-direction: column; }
.price-card.is-free { background: var(--void-2); }
.price-card .k { font-family: var(--font-mono); font-size: var(--mono-2xs); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--ink-5); }
.price-v { margin-top: 12px; font-family: var(--font-display); font-size: clamp(38px, 5vw, 52px); line-height: 1; color: var(--ink-0); }
.is-free .price-v { color: var(--ac); }
.price-v span { font-size: var(--body-md); color: var(--ink-5); margin-left: 6px; font-family: var(--font-mono); letter-spacing: var(--track-mono); }
.price-sub { margin-top: 12px; color: var(--ink-4); font-size: var(--body-sm); line-height: 1.55; flex: 1; }
.price-sub b { color: var(--ink-1); font-weight: var(--w-regular); }
.price-card form { margin-top: 18px; }
.price-card .btn { width: 100%; justify-content: center; }

.banner { margin-top: 22px; padding: 13px 18px; --clip: var(--clip-md); position: relative; font-family: var(--font-mono); font-size: var(--mono-xs); letter-spacing: var(--track-mono); color: var(--ink-3); }
.banner.ok { background: var(--success-soft); color: var(--success); }
.banner.ok::before { background: var(--success); }

/* ============================================================
   API keys + docs (slice 4d)
   ============================================================ */
.reveal { position: relative; margin-top: 24px; padding: 22px 24px; --clip: var(--clip-lg); background: var(--ac-soft); }
.reveal::before { background: var(--ac-glow); }
.reveal .k { font-family: var(--font-mono); font-size: var(--mono-xs); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--ac); }
.reveal-key { display: block; margin: 12px 0; padding: 12px 14px; --clip: var(--clip-md); background: var(--void-2); color: var(--ink-0); font-family: var(--font-mono); font-size: var(--mono-md); word-break: break-all; clip-path: var(--clip-md); }
.reveal p { color: var(--ink-3); font-size: var(--body-sm); line-height: 1.5; }

.keys-grid { margin-top: 24px; display: grid; grid-template-columns: 1.5fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 760px) { .keys-grid { grid-template-columns: 1fr; } }
.keys-list { position: relative; padding: 8px 22px; }
.key-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line-1); }
.key-row:last-child { border-bottom: 0; }
.key-row.is-revoked { opacity: .5; }
.key-main { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.key-main code { font-family: var(--font-mono); font-size: var(--mono-md); color: var(--ink-1); }
.key-name { font-family: var(--font-mono); font-size: var(--mono-2xs); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--ink-5); }
.key-state { font-family: var(--font-mono); font-size: var(--mono-2xs); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--ink-6); }
.key-revoke { color: var(--danger); }
.key-revoke:hover { color: var(--danger); filter: brightness(1.3); }
.keys-empty { padding: 20px 0; color: var(--ink-4); font-size: var(--body-sm); }
.keys-empty code, .key-row code { font-family: var(--font-mono); }
.new-key { padding: 22px; --clip: var(--clip-lg); display: flex; flex-direction: column; gap: 14px; }
.new-key .k { font-family: var(--font-mono); font-size: var(--mono-xs); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--ink-1); }
.new-key .field { --clip: var(--clip-md); padding: 3px; background: var(--surface-3); }
.new-key .btn { justify-content: center; }
.keys-meta { font-family: var(--font-mono); font-size: var(--mono-2xs); letter-spacing: var(--track-mono); color: var(--ink-5); }

.docs { padding: clamp(40px, 7vw, 80px) 0 var(--section-y); max-width: 820px; }
.docs .auth-h { margin-top: 14px; }
.docs .lede { margin-top: 16px; }
.doc-block { margin-top: 38px; }
.doc-h { font-family: var(--font-display); font-size: var(--display-xs); text-transform: uppercase; color: var(--ink-0); }
.doc-p { margin-top: 12px; color: var(--ink-3); font-size: var(--body-md); line-height: var(--body-leading); }
.doc-p b { color: var(--ink-1); font-weight: var(--w-regular); }
.doc-p code, .docs code { font-family: var(--font-mono); font-size: .92em; color: var(--ac); background: var(--ac-soft); padding: 1px 6px; }
pre.code { margin-top: 16px; padding: 18px 20px; --clip: var(--clip-card); background: var(--void-2); color: var(--ink-2); font-family: var(--font-mono); font-size: var(--mono-sm); line-height: 1.6; overflow-x: auto; white-space: pre; clip-path: var(--clip-card); }
pre.code, .reveal-key { border: 1px solid var(--line-2); }

/* ---- Footer ---- */
.foot { margin-top: var(--section-y-lg); border-top: 1px solid var(--line-1); padding: 26px 0; }
.foot-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.foot span { font-family: var(--font-mono); font-size: var(--mono-3xs); letter-spacing: var(--track-mono); color: var(--ink-6); text-transform: uppercase; }