/* 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.

   Palette from the RW icon (2026-10-22): deep indigo surfaces, violet fills, lilac text.
   Every text/background pair below was measured (WCAG): body ink 15:1, muted 8:1,
   dim 6.1:1, lilac-as-text 8.3:1, white on the violet button 6.2:1 or better. 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=Poppins:wght@600;700&family=JetBrains+Mono:wght@400;600;700&display=swap');

:root {
  --bg:        #0d0621;
  --bg-2:      #130a2e;
  --bg-elev:   #170f2b;               /* 4% white over --bg, same as the marketing card */
  --bg-input:  #100827;
  --ink:       #f2edfc;
  --ink-muted: #b8acd6;
  --ink-dim:   #9a8dbf;
  --border:     rgba(255, 255, 255, 0.08);
  --border-mid: rgba(255, 255, 255, 0.36);
  --danger:  #F87171;
  --success: #34D399;
  --side-bg:   #130a2e;
  --side-ink:  #f2edfc;
  --side-dim:  #b8acd6;
  --font-body: 'Inter Tight', 'Inter', system-ui, -apple-system, sans-serif;
  --font-display: 'Poppins', 'Inter Tight', system-ui, sans-serif;

  --accent-fill: #7A1EFA;             /* fills and edges; never text on --bg */
  --accent-deep: #5B12DA;             /* the wordmark's "Works" */
  --accent-mid:  #C4A3FF;             /* lilac: accent AS TEXT on the dark surfaces */
  --on-accent:   #FFFFFF;
  --accent-ink:  #C4A3FF;
  --accent-soft: rgba(139, 61, 255, 0.16);
  --accent-on-dark: #C4A3FF;
  --accent-glow: rgba(139, 61, 255, 0.34);
  --pink:   #A62AFD;
  --violet: #8B3DFF;

  --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(166,42,253,0.14), transparent 60%),
    radial-gradient(760px 520px at -12% 104%, rgba(91,18,218,0.16), transparent 60%);
}
::selection { background: rgba(139,61,255,0.45); color: #fff; }
a { color: var(--accent-ink); }

/* ---- headings: the RadWorks wordmark's geometric sans, not the light shell's serif */
.page-title, .card-title, .login-card .word {
  font-family: var(--font-display); font-weight: 700; letter-spacing: -0.015em; }
.page-title { font-size: 34px; line-height: 1.1; }
.page-sub { color: var(--ink-muted); }
.grad {
  background: linear-gradient(100deg, #DCC6FF 0%, #B47CFF 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, #8B2CFB, var(--accent-deep));
  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(139,61,255,0.5); }
.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(255,255,255,0.35); 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(139,61,255,0.55); color: var(--ink); }
.toast { background: #1f1440; 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-family: var(--font-display); font-weight: 700; letter-spacing: -0.015em; 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(--pink); box-shadow: 0 0 8px var(--pink); }
.side-nav .nav-item.on { background: var(--accent-soft); color: var(--accent-mid);
  box-shadow: inset 3px 0 0 var(--pink); }
.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(166,42,253,0.5); }
}

/* ---- sign-in card */
.login-wrap { background: transparent; }
.login-card { background: var(--bg-elev); border-color: rgba(139,61,255,0.32);
  /* 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(139,61,255,0.08); }
.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(--pink); box-shadow: 0 0 10px var(--pink); }
.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(139,61,255,0.32); }
.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(--violet); }
.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); }