/* ============================================================================
   juribooks-public-ui.css
   Premium presentation layer for the JuriBooks PUBLIC pages:
   signup.html · reset-password.html · admin.html

   PRESENTATION ONLY. Loaded after each page's own inline <style>, so it wins
   the cascade at equal specificity. It reuses each page's existing token names
   (--navy, --ink, --line, --surface, --credit, --balanced …) and only adds the
   brand-accurate accents and the product mark the standalone pages were missing,
   so signup/reset/admin finally match the app they lead into.

   No page markup is required: the product icon is painted in via CSS on the
   existing .brand element.
   ========================================================================== */

/* ---- Brand tokens (mirrors juribooks-premium-ui.css) ---- */
:root{
  --jb-navy:#233F6B; --jb-navy-deep:#173255;
  --jb-orange:#F47B2A; --jb-orange-strong:#E86A15; --jb-orange-soft:#FCEBDD;
  --jb-green:#16815B; --jb-green-soft:#E4F1EB;
  --jb-paleblue:#EAF0F8; --jb-canvas:#F4F6FA;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --jb-orange:#F98E45; --jb-orange-strong:#F47B2A; --jb-orange-soft:#3a2a1c;
    --jb-green:#3FB489; --jb-green-soft:#16281f;
    --jb-paleblue:#22334d; --jb-canvas:#0f1a2b;
  }
}
[data-theme="dark"]{
  --jb-orange:#F98E45; --jb-orange-strong:#F47B2A; --jb-orange-soft:#3a2a1c;
  --jb-green:#3FB489; --jb-green-soft:#16281f;
  --jb-paleblue:#22334d; --jb-canvas:#0f1a2b;
}

/* ---- Page canvas: a calm branded ground, not flat paper ---- */
body{
  background:
    radial-gradient(1100px 460px at 50% -8%, var(--jb-paleblue), transparent 60%),
    var(--jb-canvas);
  min-height:100vh;
}

/* ---- Product mark: paint the supplied icon above the wordmark ---- */
header .brand, .brand{
  color:var(--jb-navy);
  letter-spacing:-.01em;
}
header .brand::before{
  content:"";
  display:block;
  width:58px; height:58px; margin:0 auto 14px;
  background:url("./icon-192.png") center/contain no-repeat;
  border-radius:15px;
  box-shadow:0 8px 22px rgba(23,50,85,.22);
}
header p, header .sub{ color:var(--mute); }

/* ---- Cards: unified elevation, brand-navy hairline top ---- */
.card{
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:0 1px 2px rgba(23,50,85,.05), 0 10px 30px rgba(23,50,85,.06);
}
.eyebrow{ letter-spacing:.09em; color:var(--mute); }

/* ---- Subscription plan cards ---- */
.plan{
  border-radius:14px;
  transition:border-color .15s, box-shadow .15s, transform .1s;
}
.plan:hover{ border-color:var(--jb-navy); transform:translateY(-1px); box-shadow:0 8px 22px rgba(23,50,85,.10); }
.plan .name{ color:var(--ink); }
.plan .price{ color:var(--jb-navy); }
/* Selected plan: navy authority + an orange confirmation tick. */
.plan.sel{
  border-color:var(--jb-navy);
  box-shadow:0 0 0 3px color-mix(in oklch, var(--jb-navy) 16%, transparent);
}
.plan.sel::after{
  content:"✓";
  position:absolute; top:14px; right:16px;
  width:24px; height:24px; border-radius:50%;
  background:var(--jb-orange); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:800; line-height:1;
  box-shadow:0 2px 6px rgba(232,106,21,.4);
}
.plan{ position:relative; }

/* ---- Forms ---- */
.f input, .f select, input, select, textarea{
  border-radius:9px;
  transition:border-color .14s, box-shadow .14s;
}
.f input:focus, .f select:focus, input:focus, select:focus, textarea:focus{
  outline:none; border-color:var(--jb-navy);
  box-shadow:0 0 0 3px color-mix(in oklch, var(--jb-navy) 20%, transparent);
}
.f label{ color:var(--ink-soft); font-weight:600; }
input:focus-visible, select:focus-visible, textarea:focus-visible,
button:focus-visible, a:focus-visible{
  outline:2px solid var(--jb-orange) !important;
  outline-offset:2px !important;
  box-shadow:none !important;
}

/* ---- Buttons: navy authority (matches the app), orange focus ring ---- */
.btn{ border-radius:9px; letter-spacing:.01em; }
.btn:active:not(:disabled){ transform:translateY(.5px); }

/* ---- Status vocabulary (success / error) ---- */
.err{ color:var(--credit); }
.success .tick{ background:var(--jb-green); box-shadow:0 6px 18px rgba(22,129,91,.35); }
.msg.err, .msg .err{ color:var(--credit); }

/* Links pick up the brand navy, underline on the brand orange. */
a{ color:var(--jb-navy); text-decoration-color:color-mix(in oklch, var(--jb-orange) 60%, transparent); }
a:hover{ color:var(--jb-orange-strong); }

/* ------------------------------------------------------------------ *
 * ADMIN CONSOLE                                                       *
 * ------------------------------------------------------------------ */

/* Login card sits on the same branded ground. */
.login .card, .login{ border-radius:14px; }

/* Dense, legible operations table. */
.tbl-wrap{ overflow-x:auto; border-radius:12px; border:1px solid var(--line); }
.tbl-wrap table{ border-collapse:collapse; width:100%; }
.tbl-wrap th{
  background:var(--surface-2); color:var(--mute);
  font-size:12px; letter-spacing:.05em; text-transform:uppercase; font-weight:700;
  border-bottom:1px solid var(--line-2); position:sticky; top:0;
}
.tbl-wrap td{ border-bottom:1px solid var(--line); }
.tbl-wrap tbody tr:hover{ background:var(--jb-paleblue); }

/* Money columns: monospaced, tabular, right-aligned. */
.money{
  font-family:var(--fmono, 'IBM Plex Mono', ui-monospace, monospace);
  font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap;
}
.who{ color:var(--ink); }

/* Subscription / account status badges — colour always paired with the word. */
.badge, .pill{
  border-radius:999px; padding:2px 10px;
  font-size:12px; font-weight:700; letter-spacing:.02em;
  border:1px solid transparent; display:inline-block; text-transform:capitalize;
}
.badge.active, .pill.active     { background:var(--jb-green-soft); color:var(--jb-green); }
.badge.trialing, .pill.trialing { background:var(--jb-orange-soft); color:var(--jb-orange-strong); }
.badge.past_due, .pill.past_due,
.badge.expired, .pill.expired,
.badge.canceled, .pill.canceled { background:var(--bg-credit); color:var(--credit); }
.badge.none, .pill.none         { background:var(--surface-2); color:var(--mute); border-color:var(--line-2); }
.danger{ color:var(--credit); }

/* ------------------------------------------------------------------ *
 * MOTION                                                              *
 * ------------------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{
    transition-duration:.001ms !important; animation-duration:.001ms !important;
  }
}