/* RadWorks skin over radtool-saas.css: the look of radworkssoftware.com carried into
   the build interview and every client app stamped from rad-app-skeleton.

   Load order: radtool-saas.css, then this file, then the page's own sheet. This file
   only remaps the shell's tokens and re-paints the handful of rules in radtool-saas.css
   and rad-intake.css that hardcode a white surface. It never changes layout, so a page
   that works on the light shell works here unchanged.

   Every text/background pair below was measured (WCAG): body ink 15:1, muted 8:1,
   dim 6.4:1, amber-as-text 10.6:1, dark text on the amber button 8.7:1. Control edges
   (inputs, buttons, tiles, checkboxes) use --border-mid at 0.36 white, 3.0:1 on a card.
   If you change a colour, re-measure; a "muted" that reads fine to you is not a check. */

@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;600;700&display=swap');

:root {
  --bg:        #090f1a;
  --bg-2:      #0d1527;
  --bg-elev:   #131923;               /* 4% white over --bg, same as the marketing card */
  --bg-input:  #0b1220;
  --ink:       #e8eef7;
  --ink-muted: #9fb0c4;
  --ink-dim:   #8a9db5;
  --border:     rgba(255, 255, 255, 0.08);
  --border-mid: rgba(255, 255, 255, 0.36);
  --danger:  #F87171;
  --success: #34D399;
  --side-bg:   #0d1527;
  --side-ink:  #e8eef7;
  --side-dim:  #9fb0c4;
  --font-body: 'Inter Tight', 'Inter', system-ui, -apple-system, sans-serif;

  --accent-fill: #F59E0B;
  --accent-mid:  #FBBF24;
  --on-accent:   #05141a;
  --accent-ink:  #FBBF24;
  --accent-soft: rgba(245, 158, 11, 0.14);
  --accent-on-dark: #FBBF24;
  --accent-glow: rgba(245, 158, 11, 0.28);
  --pink:   #ec4899;
  --violet: #8b5cf6;

  --r-md: 14px;
  --r-lg: 18px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.35);
  --shadow-md: 0 14px 40px -16px rgba(0,0,0,0.6);
  --shadow-lg: 0 30px 80px -30px rgba(0,0,0,0.7);
}

body { color: var(--ink); background: var(--bg); position: relative; }
/* The two ambient glows from the marketing site. A fixed pseudo-element rather than
   background-attachment: fixed, which iOS Safari ignores and which tears on a long page. */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(900px 520px at 88% -8%, rgba(245,158,11,0.10), transparent 60%),
    radial-gradient(760px 520px at -12% 104%, rgba(139,92,246,0.10), transparent 60%);
}
::selection { background: rgba(245,158,11,0.35); color: #fff; }
a { color: var(--accent-ink); }

/* ---- headings: the marketing site's tight, heavy sans, not the light shell's serif */
.page-title, .card-title, .login-card .word {
  font-family: var(--font-body); font-weight: 800; letter-spacing: -0.025em; }
.page-title { font-size: 34px; line-height: 1.1; }
.page-sub { color: var(--ink-muted); }
.grad {
  background: linear-gradient(100deg, var(--accent-mid) 0%, var(--violet) 55%, var(--pink) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---- surfaces that radtool-saas.css paints white */
.card { background: var(--bg-elev); border-color: var(--border); }
.input, select.input, textarea.input { background: var(--bg-input); color: var(--ink); }
.input::placeholder { color: var(--ink-dim); }
.input:hover { border-color: rgba(255,255,255,0.5); }
select.input option { color: var(--ink); background: var(--bg-2); }
.btn { background: rgba(255,255,255,0.05); color: var(--ink); border-color: var(--border-mid); }
.btn:hover { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.5); }
.btn.primary, form .btn[type="submit"] {
  color: var(--on-accent); border-color: transparent;
  background: linear-gradient(135deg, var(--accent-mid), var(--accent-fill));
  box-shadow: 0 4px 20px var(--accent-glow); }
.btn.primary:hover, form .btn[type="submit"]:hover {
  filter: none; transform: translateY(-1px); box-shadow: 0 8px 30px rgba(245,158,11,0.45); }
.btn.primary:active, form .btn[type="submit"]:active { transform: translateY(1px); }
.btn.danger { color: var(--danger); border-color: rgba(248,113,113,0.5); }
.btn.danger:hover { background: rgba(248,113,113,0.10); }
.btn.primary .spinner { border-color: rgba(5,20,26,0.3); border-top-color: var(--on-accent); }
.spinner { border-color: rgba(255,255,255,0.2); border-top-color: var(--ink); }
.chip { background: rgba(255,255,255,0.05); color: var(--ink); }
.chip.on { background: var(--accent-soft); color: var(--accent-ink); border-color: var(--accent-ink); }
.chip-on { background: rgba(16,185,129,0.15); color: #86EFAC; border-color: rgba(16,185,129,0.5); }  /* 9.9:1 */
.note-banner { background: var(--accent-soft); border-color: rgba(245,158,11,0.5); color: var(--ink); }
.toast { background: #1a2336; color: var(--ink); border: 1px solid var(--border-mid); }
.toast.err { background: #4c1d1d; }
.linklike { color: var(--accent-ink); }

/* ---- sidebar: the marketing nav, stood on its side */
.side { background: var(--side-bg); border-right: 1px solid var(--border); }
.side-brand .eyebrow { color: var(--accent-mid); }
.side-brand .word { font-weight: 800; letter-spacing: -0.02em; padding-left: 18px; position: relative; }
.side-brand .word::before {
  content: ''; position: absolute; left: 0; top: 0.55em; width: 9px; height: 9px;
  border-radius: 50%; background: var(--accent-fill); box-shadow: 0 0 8px var(--accent-fill); }
.side-nav .nav-item.on { background: var(--accent-soft); color: var(--accent-mid);
  box-shadow: inset 3px 0 0 var(--accent-fill); }
.side-foot { border-top-color: var(--border); }
.side-foot .foot-links a:hover, .side-foot .foot-links button:hover { color: var(--accent-mid); }
/* Stacked on a phone the shell keeps every nav item full width, which is a screen of
   buttons before the page. Let them sit in a row as chips instead. */
@media (max-width: 820px) {
  .side { border-right: 0; border-bottom: 1px solid var(--border); }
  .side-nav { gap: 4px; }
  .side-nav .nav-item { width: auto; padding: 8px 14px; border-radius: 100px; border: 1px solid var(--border); }
  .side-nav .nav-item.on { box-shadow: none; border-color: rgba(245,158,11,0.4); }
}

/* ---- sign-in card */
.login-wrap { background: transparent; }
.login-card { background: var(--bg-elev); border-color: rgba(245,158,11,0.28);
  /* A wide black shadow on a near-black page reads as a dark box; keep it tight. */
  box-shadow: 0 30px 80px -30px rgba(0,0,0,0.7), 0 0 120px rgba(245,158,11,0.05); }
.login-card .card-title { font-size: 26px; padding-left: 20px; position: relative; }
.login-card .card-title::before {
  content: ''; position: absolute; left: 0; top: 0.5em; width: 10px; height: 10px;
  border-radius: 50%; background: var(--accent-fill); box-shadow: 0 0 10px var(--accent-fill); }
.login-alt-rule { background: var(--bg-elev); }

/* ---- the guided interview (rad-intake.css hardcodes white tiles) */
.ri-cta { background: var(--accent-soft); border-color: rgba(245,158,11,0.28); }
.ri { background: var(--bg-elev); border-radius: var(--r-lg); padding: 22px 24px; }
.ri-dots i { background: rgba(255,255,255,0.18); }
.ri-dots i.filled { background: var(--accent-fill); }
.ri-dots i.current { background: var(--accent-mid); box-shadow: 0 0 8px var(--accent-mid); }
.ri-q { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
.ri-opt { background: rgba(255,255,255,0.03); border-color: var(--border-mid); border-radius: 12px;
  padding: 13px 15px; transition: border-color 140ms, background 140ms, transform 140ms; }
.ri-opt:hover { border-color: var(--accent-mid); background: rgba(255,255,255,0.06); transform: translateY(-1px); }
.ri-opt .bx { border-color: rgba(255,255,255,0.45); }
.ri-opt.on { background: var(--accent-soft); border-color: var(--accent-fill); }
.ri-opt.on .bx { background: var(--accent-fill); border-color: var(--accent-fill); }
.ri-applied { background: var(--accent-soft); border-left-color: var(--accent-fill); }
.ri-warn { background: rgba(248,113,113,0.12); border-left-color: var(--danger); }