/* ============================================================================
   Flaming fleet PAGE KIT (2026-10-19): billing+pricing, account+settings, admin, errors+empty states.
   Reference = FlamingTracker's pages. README.md (next to this file) has the markup and the rules.

   Load it AFTER the site's own CSS (and after admin-kit.css on sites that use the settings/admin shell).
   Prefix: pk-. Every value falls back to the fleet token, so this file also works on a site with no tokens
   (a plain Flask app, a SvelteKit app without the style kit). Dark only.
   CSP-safe: no @import, no url() to other origins, no inline anything needed.
   ============================================================================ */

:root {
  --pk-bg: var(--bg-base, #0d0d0d);
  --pk-surface: var(--bg-surface, rgba(255,255,255,.03));
  --pk-raised: var(--bg-elevated, rgba(255,255,255,.05));
  --pk-hover: var(--bg-hover, rgba(255,255,255,.06));
  --pk-border: var(--border, rgba(255,255,255,.06));
  --pk-border-hover: var(--border-hover, rgba(255,255,255,.12));
  --pk-text: var(--text-primary, #f3f4f6);
  --pk-text-2: var(--text-secondary, #9ca3af);
  --pk-text-3: var(--text-tertiary, #6b7280);
  --pk-accent: var(--accent, #f97316);
  --pk-gradient: var(--accent-gradient, linear-gradient(135deg, #f97316 0%, #ef4444 100%));
  --pk-font: var(--font-primary, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);
  --pk-mono: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
  --pk-r-sm: 8px;    /* buttons, inputs, tiles */
  --pk-r-md: 12px;   /* icon boxes */
  --pk-r-lg: 16px;   /* cards */
  --pk-gutter: 1.5rem;
}
@media (max-width: 640px) { :root { --pk-gutter: 1rem; } }   /* 360 rule 1: 16px side gutter, never less */

[hidden].pk-btn, [hidden].pk-pill { display: none !important; }

/* ---------------------------------------------------------------- 1. Page shell for pages outside the
   settings/admin shell (public pricing, error pages on sites without a base template). Inside the shell the
   shell's main column already gives the width, so don't add .pk-page there. */
.pk-page { max-width: 1280px; margin: 0 auto; padding: 1.5rem var(--pk-gutter) 4rem; box-sizing: border-box; }
.pk-page-narrow { max-width: 56rem; }

/* ---------------------------------------------------------------- 2. Page header (= admin-kit .ak-head) */
.pk-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.pk-crumbs { display: flex; gap: .35rem; align-items: center; font-size: .78rem; color: var(--pk-text-3); margin-bottom: .35rem; }
.pk-crumbs a { color: var(--pk-text-3); text-decoration: none; }
.pk-crumbs a:hover { color: var(--pk-text); }
.pk-title { font-size: 1.5rem; line-height: 2rem; font-weight: 700; color: #fff; margin: 0; letter-spacing: -.01em; }
.pk-sub { font-size: .875rem; color: var(--pk-text-2); margin: .2rem 0 0; }
.pk-head-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.pk-section-title { font-size: 1.125rem; font-weight: 600; color: var(--pk-text); margin: 0 0 1rem; }

/* ---------------------------------------------------------------- 3. Cards */
.pk-card { position: relative; background: var(--pk-surface); border: 1px solid var(--pk-border); border-radius: var(--pk-r-lg);
           padding: 1.5rem; -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); box-sizing: border-box; }
.pk-card + .pk-card { margin-top: 1rem; }
.pk-card-title { font-size: 1rem; font-weight: 600; color: #fff; margin: 0 0 .25rem; }
.pk-card-sub { font-size: .8rem; color: var(--pk-text-2); margin: 0 0 1rem; }
.pk-label-caps { font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--pk-text-3); margin: 0 0 .75rem; }

/* ---------------------------------------------------------------- 4. Buttons (Tracker .btn / .mgmt-btn / .plan-cta) */
.pk-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .625rem 1.25rem; box-sizing: border-box;
          font: 500 .875rem/1.25rem var(--pk-font); color: var(--pk-text); background: var(--pk-hover); border: 1px solid var(--pk-border);
          border-radius: var(--pk-r-sm); cursor: pointer; text-decoration: none; white-space: nowrap; transition: background .15s, border-color .15s, box-shadow .15s; }
.pk-btn:hover { background: rgba(255,255,255,.10); border-color: var(--pk-border-hover); }
.pk-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.pk-btn-primary { color: #fff; background: var(--pk-gradient); border-color: transparent; box-shadow: 0 0 20px rgba(249,115,22,.30); }
.pk-btn-primary:hover { background: var(--pk-gradient); border-color: transparent; box-shadow: 0 0 28px rgba(249,115,22,.45); }
.pk-btn-ghost { background: none; border-color: transparent; color: var(--pk-text-2); }
.pk-btn-ghost:hover { color: var(--pk-text); background: var(--pk-hover); border-color: transparent; }
.pk-btn-subtle { color: var(--pk-text-2); }
.pk-btn-warn:hover { background: rgba(120,53,15,.30); border-color: rgba(133,77,14,.50); color: #facc15; }
.pk-btn-danger:hover { background: rgba(127,29,29,.30); border-color: rgba(153,27,27,.50); color: #f87171; }
.pk-btn-block { display: flex; width: 100%; }
.pk-btn[disabled], .pk-btn.is-disabled { opacity: .5; cursor: not-allowed; }
.pk-btn.is-current { background: transparent; color: var(--pk-text-3); cursor: default; }
.pk-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 0 0 2rem; }

/* ---------------------------------------------------------------- 5. Status pills (= admin-kit .ak-badge tones) */
.pk-pill { display: inline-flex; align-items: center; gap: .3rem; padding: .125rem .625rem; border-radius: 9999px; font-size: .72rem;
           font-weight: 600; line-height: 1.1rem; white-space: nowrap; background: rgba(107,114,128,.2); color: #9ca3af; }
.pk-pill.ok    { background: rgba(34,197,94,.15);  color: #86efac; }
.pk-pill.warn  { background: rgba(234,179,8,.15);  color: #fde047; }
.pk-pill.bad   { background: rgba(239,68,68,.15);  color: #fca5a5; }
.pk-pill.info  { background: rgba(59,130,246,.15); color: #93c5fd; }
.pk-pill.flame { background: rgba(249,115,22,.15); color: #fdba74; }
.pk-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ---------------------------------------------------------------- 6. Billing: current plan card */
.pk-plan-now { margin-bottom: 1.5rem; }
.pk-plan-now > .pk-pill { position: absolute; top: 1rem; right: 1rem; }
.pk-plan-now-head { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.5rem; }
.pk-plan-icon { width: 48px; height: 48px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: var(--pk-r-md);
                background: rgba(249,115,22,.10); border: 1px solid rgba(249,115,22,.25); color: #fb923c; }
.pk-plan-icon svg { width: 24px; height: 24px; }
.pk-plan-now-name { font-size: 1.5rem; line-height: 1.2; font-weight: 700; color: var(--pk-text); margin: 0; }
.pk-plan-now-sub { font-size: .95rem; color: var(--pk-text-2); margin-top: .15rem; }
.pk-plan-now-sub .muted { color: var(--pk-text-3); }
.pk-plan-now-sub .warn { color: #facc15; }
.pk-plan-now-sub .bad { color: #f87171; }

/* plan facts: 2-up on phones, 4-up from 768 */
.pk-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
@media (min-width: 768px) { .pk-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pk-tile { background: rgba(0,0,0,.20); border-radius: var(--pk-r-sm); padding: .75rem; min-width: 0; }
.pk-tile-label { display: flex; align-items: center; gap: .35rem; font-size: .72rem; color: var(--pk-text-3); margin-bottom: .25rem; }
.pk-tile-label svg { width: 12px; height: 12px; }
.pk-tile-value { font-size: 1.125rem; font-weight: 700; color: var(--pk-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-tile-value .unit { font-size: .8rem; font-weight: 400; color: var(--pk-text-3); }

/* usage bars: green < 70% ≤ amber < 90% ≤ red */
.pk-usage-row + .pk-usage-row { margin-top: .75rem; }
.pk-usage-top { display: flex; justify-content: space-between; gap: 1rem; font-size: .72rem; margin-bottom: .25rem; }
.pk-usage-top .k { color: var(--pk-text-2); }
.pk-usage-top .v { color: var(--pk-text-3); font-variant-numeric: tabular-nums; }
.pk-usage-track { height: 8px; background: rgba(255,255,255,.05); border-radius: 9999px; overflow: hidden; }
.pk-usage-fill { height: 100%; width: 0; border-radius: 9999px; background: #22c55e; transition: width .3s ease; }
.pk-usage-fill.warn { background: #eab308; }
.pk-usage-fill.full { background: #ef4444; }

/* banners inside billing (past due, cancelling, no plan) */
.pk-callout { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 1.25rem 1.5rem;
              border-radius: var(--pk-r-lg); border: 1px solid rgba(234,179,8,.25); background: rgba(234,179,8,.06); margin-bottom: 1.5rem; }
.pk-callout.bad { border-color: rgba(239,68,68,.25); background: rgba(239,68,68,.06); }
.pk-callout.info { border-color: rgba(59,130,246,.25); background: rgba(59,130,246,.06); }
.pk-callout b { display: block; color: var(--pk-text); font-weight: 600; margin-bottom: .15rem; }
.pk-callout p { margin: 0; font-size: .875rem; color: var(--pk-text-2); }

/* ---------------------------------------------------------------- 7. Billing: plan cards */
.pk-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; align-items: start; }
.pk-plan { position: relative; background: var(--pk-surface); border: 1px solid var(--pk-border); border-radius: var(--pk-r-lg); padding: 1.25rem;
           transition: border-color .15s; box-sizing: border-box; min-width: 0; }
.pk-plan:hover { border-color: var(--pk-border-hover); }
.pk-plan.is-current { border-color: var(--pk-border-hover); }
.pk-plan-badge { position: absolute; top: -.625rem; left: 50%; transform: translateX(-50%); padding: .1rem .75rem; white-space: nowrap;
                 background: var(--pk-raised); background-color: #1a1a1a; color: var(--pk-text-2); border: 1px solid var(--pk-border-hover);
                 border-radius: 9999px; font-size: .625rem; font-weight: 600; }
.pk-plan-name { display: flex; align-items: center; gap: .5rem; margin: 0 0 .5rem; font-size: 1rem; font-weight: 700; color: var(--pk-text); }
.pk-plan-name svg { width: 18px; height: 18px; color: var(--pk-text-2); flex-shrink: 0; }
.pk-plan-price { font-size: 1.5rem; font-weight: 700; color: var(--pk-text); margin-bottom: .75rem; }
.pk-plan-price .per { font-size: .875rem; font-weight: 400; color: var(--pk-text-3); }
.pk-plan-spec { font-size: .75rem; line-height: 1.5; color: var(--pk-text-2); margin: 0 0 1rem; }
.pk-plan .pk-btn { display: flex; width: 100%; padding: .5rem; min-height: 2.5rem; }   /* §4.10: tap targets ≥ 40px */
.pk-plan form { margin: 0; }
.pk-fine { text-align: center; color: var(--pk-text-3); font-size: .8rem; margin: 1.5rem 0 0; }
.pk-fine a { color: var(--pk-text-2); }

/* ---------------------------------------------------------------- 8. Key/value rows (settings + record pages) */
.pk-kv { display: grid; grid-template-columns: minmax(8rem, max-content) 1fr; gap: .75rem 1.5rem; margin: 0; font-size: .875rem; }
.pk-kv dt { color: var(--pk-text-2); }
.pk-kv dd { margin: 0; color: var(--pk-text); text-align: right; min-width: 0; overflow-wrap: anywhere; }
.pk-kv dd a { color: var(--pk-accent); }

/* ---------------------------------------------------------------- 9. List rows outside a table (settings lists,
   billing history on phones). Tables use admin-kit .ak-table.ak-cards. */
.pk-rows { list-style: none; margin: 0; padding: 0; }
.pk-row { display: flex; align-items: center; gap: .75rem; padding: .875rem 1.25rem; border-top: 1px solid var(--pk-border); min-width: 0; }
.pk-row:first-child { border-top: 0; }
.pk-row-main { flex: 1; min-width: 0; }
.pk-row-main b { display: block; font-weight: 500; color: var(--pk-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-row-main small { display: block; font-size: .78rem; color: var(--pk-text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-row-end { flex-shrink: 0; display: flex; align-items: center; gap: .5rem; font-variant-numeric: tabular-nums; color: var(--pk-text-2); font-size: .85rem; }
.pk-card.pk-flush { padding: 0; overflow: hidden; }

/* ---------------------------------------------------------------- 10. State card: empty / couldn't load / plan gate
   ONE look for "nothing here". Never show an empty table or a bare sentence. */
.pk-state { text-align: center; padding: 4rem 2rem; background: var(--pk-surface); border: 1px solid var(--pk-border); border-radius: var(--pk-r-lg);
            box-sizing: border-box; }
.pk-state-icon { display: inline-flex; align-items: center; justify-content: center; width: 3.5rem; height: 3.5rem; margin-bottom: 1rem;
                 border-radius: 9999px; background: rgba(255,255,255,.04); color: var(--pk-text-3); }
.pk-state-icon svg { width: 1.75rem; height: 1.75rem; }
.pk-state-title { font-size: 1.1rem; font-weight: 600; color: var(--pk-text-2); margin: 0 0 .5rem; }
.pk-state-text { font-size: 1rem; line-height: 1.5; color: var(--pk-text-2); margin: 0 auto 1.5rem; max-width: 36rem; }
.pk-state-text:last-child { margin-bottom: 0; }
.pk-state-actions { display: flex; justify-content: center; gap: .75rem; flex-wrap: wrap; }
.pk-state.is-error { border-color: rgba(239,68,68,.25); }
.pk-state.is-error .pk-state-icon { background: rgba(239,68,68,.10); color: #f87171; }
.pk-state.is-gate .pk-state-icon { background: rgba(249,115,22,.10); color: #fb923c; }
.pk-state-detail { margin: 1rem auto 0; font: .75rem var(--pk-mono); color: var(--pk-text-3); }
.pk-state.is-compact { padding: 2rem 1.25rem; }                   /* inside a card/table: same parts, less air */
.pk-state.is-compact .pk-state-icon { width: 2.5rem; height: 2.5rem; margin-bottom: .75rem; }
.pk-state.is-compact .pk-state-icon svg { width: 1.25rem; height: 1.25rem; }
.pk-state.is-compact .pk-state-title { font-size: .95rem; margin-bottom: .25rem; }
.pk-state.is-compact .pk-state-text { font-size: .85rem; margin-bottom: 1rem; }
.pk-state.is-compact .pk-state-text:last-child { margin-bottom: 0; }
.pk-card > .pk-state, .ak-card > .pk-state { background: none; border: 0; border-radius: 0; }

/* ---------------------------------------------------------------- 11. Error pages (404/403/500/…) */
.pk-error { max-width: 28rem; margin: 4rem auto; padding: 0 var(--pk-gutter); text-align: center; box-sizing: content-box; }
.pk-error-code { font: 700 3rem/1 var(--pk-mono); margin: 0 0 .75rem; background: var(--pk-gradient);
                 -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--pk-accent); }
.pk-error-title { font-size: 1.25rem; font-weight: 600; color: var(--pk-text); margin: 0 0 .5rem; }
.pk-error-msg { font-size: 1rem; line-height: 1.5; color: var(--pk-text-2); margin: 0 0 1.5rem; }
.pk-error-msg b { color: var(--pk-text); font-weight: 500; }
.pk-error-actions { display: flex; justify-content: center; gap: .75rem; flex-wrap: wrap; }
.pk-error-ref { margin: 1.5rem 0 0; font: .72rem var(--pk-mono); color: var(--pk-text-3); }

/* ---------------------------------------------------------------- 12. Stand-alone pages (no site base template):
   plain-Flask error pages and the sign-in problem card. Body classes, so they never touch a site's own pages. */
body.pk-standalone { margin: 0; min-height: 100vh; background: var(--pk-bg); color: var(--pk-text); font-family: var(--pk-font);
                     -webkit-font-smoothing: antialiased; line-height: 1.5; }
body.pk-standalone *, body.pk-standalone *::before, body.pk-standalone *::after { box-sizing: border-box; }
.pk-topbar { display: flex; align-items: center; height: 58px; max-width: 1280px; margin: 0 auto; padding: 0 var(--pk-gutter); }
.pk-brand { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; font: 700 1.125rem/1 'Poppins', var(--pk-font); color: #fff; }
.pk-brand svg { width: 28px; height: 28px; color: var(--pk-accent); }
.pk-brand b { font-weight: 700; color: var(--pk-accent); }
.pk-topbar-line { border-bottom: 1px solid var(--pk-border); }

body.pk-auth { display: flex; align-items: center; justify-content: center; padding: 1rem; }
.pk-auth-wrap { width: 100%; max-width: 28rem; position: relative; z-index: 1; }
.pk-auth-glow { position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 600px; height: 600px; max-width: 100vw;
                background: rgba(249,115,22,.05); border-radius: 9999px; filter: blur(64px); pointer-events: none; }
.pk-auth-logo { display: flex; justify-content: center; margin-bottom: 2rem; }
.pk-auth-logo .pk-brand { font-size: 1.5rem; }
.pk-auth-logo .pk-brand svg { width: 40px; height: 40px; }
.pk-auth-card { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); -webkit-backdrop-filter: blur(40px);
                backdrop-filter: blur(40px); border-radius: 1rem; padding: 2rem; }
.pk-auth-card h1 { font-size: 1.5rem; font-weight: 700; color: #fff; text-align: center; margin: 0 0 .5rem; }
.pk-auth-card .pk-auth-sub { color: var(--pk-text-2); text-align: center; margin: 0 0 1.5rem; font-size: .95rem; }
.pk-auth-card .pk-btn { width: 100%; padding: .75rem 1rem; font-size: 1rem; }
.pk-auth-foot { text-align: center; color: var(--pk-text-3); font-size: .85rem; margin: 1.25rem 0 0; }
.pk-auth-foot a { color: var(--pk-accent); text-decoration: none; }
.pk-alert { display: flex; gap: .5rem; padding: 1rem; margin: 0 0 1rem; border-radius: var(--pk-r-sm); font-size: .875rem;
            background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.2); color: #f87171; }
.pk-alert.ok   { background: rgba(34,197,94,.1);  border-color: rgba(34,197,94,.2);  color: #4ade80; }
.pk-alert.info { background: rgba(59,130,246,.1); border-color: rgba(59,130,246,.2); color: #60a5fa; }
.pk-alert.warn { background: rgba(234,179,8,.1);  border-color: rgba(234,179,8,.2);  color: #facc15; }

/* ---------------------------------------------------------------- 13. The 360 rules (also README §6) */
@media (max-width: 640px) {
  .pk-head { align-items: flex-start; }
  .pk-head-actions { width: 100%; }
  .pk-card { padding: 1.25rem 1rem; }
  .pk-card.pk-flush { padding: 0; }
  .pk-plan-now-head { gap: .75rem; margin-bottom: 1.25rem; }
  .pk-plan-now > .pk-pill { position: static; margin-bottom: .75rem; }
  .pk-plan-icon { width: 40px; height: 40px; }
  .pk-plan-now-name { font-size: 1.25rem; }
  .pk-tiles { gap: .5rem; }
  .pk-plans { grid-template-columns: 1fr; gap: 1.25rem; }              /* one plan per row; the badge needs the gap */
  .pk-actions { display: grid; grid-template-columns: 1fr; gap: .5rem; }        /* stacked, full width: no 3-line labels */
  .pk-actions .pk-btn { width: 100%; }
  .pk-kv { grid-template-columns: 1fr; gap: .1rem; }
  .pk-kv dd { text-align: left; margin-bottom: .6rem; }
  .pk-row { padding: .75rem 1rem; }
  .pk-state { padding: 2.5rem 1.25rem; }
  .pk-state.is-compact { padding: 1.75rem 1rem; }
  .pk-state-text { font-size: .95rem; }
  .pk-callout { padding: 1rem; }
  .pk-callout .pk-btn { width: 100%; }
  .pk-error { margin: 3rem auto; }
  .pk-error-actions .pk-btn { flex: 1 1 100%; }
  .pk-auth-card { padding: 1.5rem 1.25rem; }
}