/* Vyaas · design tokens v2 "Aurora" (docs/enterprise-shell.html §2), re-based on the customer
   wireframes of 1 Nov 2026. Token names are Glacier's so every stylesheet keeps working. Light is
   the base; dark redefines the same tokens. --accent is injected from Branding by base.html. */
:root {
  --s0: #f7f9fe; --side: #f4f7fe; --s1: #ffffff; --s2: #eef3fe; --s3: #dee6fd;
  --t1: #0b1230; --t2: #5a6680; --t3: #8a94ad;
  --l1: #e3e8f3; --l2: #ccd5ea;
  --accent: #2f6fea; --accent-2: #4f46e5; --accent-soft: #e8eefe; --on-accent: #ffffff; --link: #2f6fea; --focus: #9dbaff;
  --grad: linear-gradient(90deg, #2f6fea 0%, #4f46e5 100%);
  --grad-ai: linear-gradient(90deg, #345cff 0%, #792bee 100%);
  --tint-blue: #eaf1ff; --tint-purple: #f1ecff; --tint-green: #e8f7f0; --tint-orange: #fff3e5;
  --ink-blue: #2f6fea; --ink-purple: #7c3aed; --ink-green: #16a362; --ink-orange: #ea8a1a;
  --ok: #1f9d63; --warn: #b7791f; --bad: #d14343; --ok-soft: #e6f6ee; --warn-soft: #fff6e3; --bad-soft: #fdeeee;
  --code-bg: #f0f4fa; --code-head: #e6edf7;
  --lift: #ffffff;
  --wave: url("../img/brand/wave-light.fbfc9112de7a.png"); /* Vyaas_AI_Light_Background.png, 1 Nov 2026 */
  --wave-filter: none;
  --brand-ink: #10285e; --brand-tag: #52647f;
  --wordmark: linear-gradient(100deg, #10285e 0%, #10285e 100%);
  --byline: linear-gradient(90deg, #52647f 0%, #7c8ba3 100%);
  --glow: 0 0 0 4px rgba(47, 111, 234, .12);
  --shadow: 0 1px 2px rgba(11, 18, 48, .04), 0 18px 48px -24px rgba(47, 111, 234, .35);
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  color-scheme: light;
}
[data-theme="dark"], :root[data-theme="dark"] { color-scheme: dark; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --s0: #070e2a; --side: #0a1230; --s1: #0f1838; --s2: #16214a; --s3: #1e2a5c;
  --t1: #f2f5ff; --t2: #a7b1cf; --t3: #7c87a8;
  --l1: #1e2a52; --l2: #2b3a6e;
  --accent: #7c7bff; --accent-2: #3b82f6; --accent-soft: #1c2a5e; --on-accent: #ffffff; --link: #9fb4ff; --focus: #5b6cff;
  --grad: linear-gradient(90deg, #8b5cf6 0%, #5b6cff 100%);
  --grad-ai: linear-gradient(90deg, #8b9dff 0%, #b07cff 100%);
  --tint-blue: #101f4a; --tint-purple: #1e1650; --tint-green: #0e2e36; --tint-orange: #2e2118;
  --ink-blue: #60a5fa; --ink-purple: #c084fc; --ink-green: #34d399; --ink-orange: #fbbf24;
  --ok: #4ade80; --warn: #f2b84b; --bad: #f87171; --ok-soft: #0f2e22; --warn-soft: #2d2410; --bad-soft: #341717;
  --code-bg: #060b22; --code-head: #0b1230;
  --lift: linear-gradient(180deg, #0f1838 0%, #0a1230 60%, #070e2a 100%);
  --wave: url("../img/brand/wave-dark.3cc493b59c9a.png");
  --wave-filter: saturate(1.25) brightness(1.05);
  --brand-ink: #ffffff; --brand-tag: #9aa6c8;
  --wordmark: linear-gradient(100deg, #ffffff 0%, #ffffff 100%);
  --byline: linear-gradient(90deg, #9aa6c8 0%, #c3cbe6 100%);
  --glow: 0 0 0 1px rgba(139, 92, 246, .55), 0 0 42px rgba(99, 102, 241, .28);
  --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 18px 48px -24px rgba(91, 108, 255, .35);
  color-scheme: dark;
}}
:root[data-theme="dark"] {
  --s0: #070e2a; --side: #0a1230; --s1: #0f1838; --s2: #16214a; --s3: #1e2a5c;
  --t1: #f2f5ff; --t2: #a7b1cf; --t3: #7c87a8;
  --l1: #1e2a52; --l2: #2b3a6e;
  --accent: #7c7bff; --accent-2: #3b82f6; --accent-soft: #1c2a5e; --on-accent: #ffffff; --link: #9fb4ff; --focus: #5b6cff;
  --grad: linear-gradient(90deg, #8b5cf6 0%, #5b6cff 100%);
  --grad-ai: linear-gradient(90deg, #8b9dff 0%, #b07cff 100%);
  --tint-blue: #101f4a; --tint-purple: #1e1650; --tint-green: #0e2e36; --tint-orange: #2e2118;
  --ink-blue: #60a5fa; --ink-purple: #c084fc; --ink-green: #34d399; --ink-orange: #fbbf24;
  --ok: #4ade80; --warn: #f2b84b; --bad: #f87171; --ok-soft: #0f2e22; --warn-soft: #2d2410; --bad-soft: #341717;
  --code-bg: #060b22; --code-head: #0b1230;
  --lift: linear-gradient(180deg, #0f1838 0%, #0a1230 60%, #070e2a 100%);
  --wave: url("../img/brand/wave-dark.3cc493b59c9a.png");
  --wave-filter: saturate(1.25) brightness(1.05);
  --brand-ink: #ffffff; --brand-tag: #9aa6c8;
  --wordmark: linear-gradient(100deg, #ffffff 0%, #ffffff 100%);
  --byline: linear-gradient(90deg, #9aa6c8 0%, #c3cbe6 100%);
  --glow: 0 0 0 1px rgba(139, 92, 246, .55), 0 0 42px rgba(99, 102, 241, .28);
  --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 18px 48px -24px rgba(91, 108, 255, .35);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--s0); color: var(--t1); font: 14px/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
code, pre, .mono { font-family: var(--mono); }

/* Layout */
.page { min-height: 100%; display: flex; flex-direction: column; }
.topbar { display: flex; align-items: center; gap: 12px; padding: 10px 16px; color: var(--t2); font-size: 13px; }
.topbar .spacer { flex: 1; }

/* Wordmark (D27 / D33): the delivered lockup. Ribbon-V mark + "Vyaas AI" in Inter 800 with a
   gradient "AI", "BY MAVIONTECH" ruled beneath. Legacy .wordmark markup keeps rendering. */
.wordmark { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; }
.wordmark .mark { font: 800 28px/1 var(--sans); letter-spacing: -.045em; color: var(--brand-ink); }
.wordmark .mark::after { content: " AI"; background: var(--grad-ai); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.wordmark .byline { font: 550 11px/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--brand-tag); }
.wordmark.small .mark { font-size: 20px; }
.wordmark.small .byline { display: none; }
.wordmark::before { content: ""; width: 1.25em; height: 1.25em; font-size: 28px; background: url("../img/brand/vyaas-mark.6c2ccc4dcd64.svg") center/contain no-repeat; flex: none; }
.wordmark.small::before { font-size: 22px; }

/* Controls */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 12px; border-radius: 6px; border: 1px solid var(--l1); background: var(--s1); color: var(--t2); font: 500 13px var(--sans); cursor: pointer; white-space: nowrap; }
.btn:hover { border-color: var(--l2); color: var(--t1); text-decoration: none; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn.icon { width: 30px; height: 30px; padding: 0; border-radius: 50%; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border: 1px solid var(--l1); border-radius: 6px; background: var(--s1); font-size: 12px; color: var(--t2); }
.chip b { color: var(--t1); font-weight: 500; }
.avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--s3); color: var(--t2); display: inline-grid; place-items: center; font: 600 10px var(--sans); border: 1px solid var(--l1); }

/* Forms (allauth pages) */
.field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--t2); margin-bottom: 10px; }
.field input, .field select, .field textarea { border: 1px solid var(--l2); background: var(--s1); border-radius: 7px; padding: 9px 11px; color: var(--t1); font: 14px var(--sans); width: 100%; }
.field input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); outline: none; }
.errorlist { margin: 0 0 8px; padding: 0; list-style: none; color: var(--bad); font-size: 12.5px; }
.notice { border: 1px solid var(--l1); border-left: 2px solid var(--warn); background: var(--warn-soft); border-radius: 6px; padding: 9px 12px; font-size: 13px; margin: 0 0 12px; }

/* New-conversation page (FR-C13) */
.home { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 20px 16px 80px; background: var(--lift); }
.composer { width: 100%; max-width: 620px; background: var(--s1); border: 1px solid var(--l2); border-radius: 12px; box-shadow: var(--shadow); padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.composer textarea { border: 0; background: transparent; resize: none; font: 15px/1.5 var(--sans); color: var(--t1); width: 100%; min-height: 24px; max-height: 40vh; }
.composer textarea:focus { outline: none; }
.composer .row { display: flex; align-items: center; gap: 8px; }
.composer .row .spacer { flex: 1; }
.hint { font-size: 11.5px; color: var(--t3); }
.sublinks { display: flex; gap: 18px; font-size: 12px; color: var(--t2); }

/* Entrance card (sign in / sign up) */
.entrance { flex: 1; display: grid; grid-template-columns: 1.15fr .85fr; min-height: 100%; }
@media (max-width: 760px) { .entrance { grid-template-columns: 1fr; } .entrance .usp-panel { display: none; } }
.usp-panel { position: relative; overflow: hidden; padding: 34px; background: var(--lift); border-right: 1px solid var(--l1); display: flex; flex-direction: column; gap: 22px; }
.usp-panel h1 { margin: 0; font: 600 28px/1.2 var(--sans); letter-spacing: -.025em; max-width: 18ch; text-wrap: balance; }
.usp-panel .sub { color: var(--t2); max-width: 44ch; }
.usp { display: flex; flex-direction: column; gap: 12px; }
.usp > div { display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: start; }
.usp i { width: 30px; height: 30px; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); background: color-mix(in srgb, var(--accent) 8%, transparent); display: grid; place-items: center; font: 600 11px var(--mono); color: var(--accent); font-style: normal; }
.usp b { display: block; font-weight: 600; }
.usp span { font-size: 12.5px; color: var(--t2); }
.entrance-card { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 34px 24px; }
.entrance-card > div { width: 100%; max-width: 340px; }
.entrance-card h2 { margin: 0 0 2px; font: 600 20px/1.2 var(--sans); letter-spacing: -.02em; }
.entrance-card .sm { font-size: 12.5px; color: var(--t2); margin-bottom: 14px; }
.entrance-card .btn { width: 100%; margin-bottom: 8px; }
.entrance-card .card-mark { display: none; margin-bottom: 18px; }
@media (max-width: 760px) { .entrance-card .card-mark { display: inline-flex; } }
/* Entrance lockup (enterprise shell §2): 64 px ribbon-V mark, "Vyaas AI" with the gradient AI, ruled tagline */
.auth-lockup { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 0 auto 26px; text-align: center; }
.auth-lockup img { width: 64px; height: 64px; filter: drop-shadow(0 10px 24px color-mix(in srgb, var(--accent) 28%, transparent)); }
.auth-lockup .wm { font: 800 30px/1 var(--sans); letter-spacing: -.045em; color: var(--brand-ink); }
.auth-lockup .wm i { font-style: normal; background: var(--grad-ai); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.auth-lockup .tag { display: flex; align-items: center; gap: 12px; font: 550 10.5px/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--brand-tag); }
.auth-lockup .tag::before, .auth-lockup .tag::after { content: ""; width: 28px; height: 2px; border-radius: 2px; background: var(--brand-tag); opacity: .55; }
.usp-panel .brand { align-self: flex-start; }
.usp-panel .usp-trust { margin-top: auto; justify-content: flex-start; font-size: 12.5px; }
.entrance-card .crafted { display: flex; justify-content: center; margin: 16px 0 0; }
@media (max-width: 760px) { .auth-lockup { margin-bottom: 18px; } .auth-lockup img { width: 56px; height: 56px; } }
/* allauth renders plain elements; style them without overriding its templates (Phase 0) */
.entrance-card h1 { margin: 0 0 4px; font: 600 20px/1.2 var(--sans); letter-spacing: -.02em; }
.entrance-card p { font-size: 12.5px; color: var(--t2); margin: 0 0 12px; }
.entrance-card label { display: block; font-size: 12px; color: var(--t2); margin: 10px 0 4px; }
.entrance-card input:not([type=checkbox]):not([type=submit]) { border: 1px solid var(--l2); background: var(--s1); border-radius: 7px; padding: 9px 11px; color: var(--t1); font: 14px var(--sans); width: 100%; }
.entrance-card input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); outline: none; }
.entrance-card label:has(input[type=checkbox]) { display: flex; align-items: center; gap: 8px; }
.entrance-card button, .entrance-card input[type=submit] { display: inline-flex; align-items: center; justify-content: center; width: 100%; margin-top: 14px; padding: 9px 12px; border-radius: 6px; border: 1px solid var(--accent); background: var(--accent); color: var(--on-accent); font: 500 13px var(--sans); cursor: pointer; }
.entrance-card button[type=button], .entrance-card a.button { background: var(--s1); color: var(--t2); border-color: var(--l1); }
.entrance-card ul { padding-left: 18px; font-size: 12.5px; color: var(--t2); }
.entrance-card .helptext { display: block; font-size: 11.5px; color: var(--t3); margin-top: 4px; }
.or { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; font-size: 11px; color: var(--t3); margin: 8px 0 12px; }
.or::before, .or::after { content: ""; height: 1px; background: var(--l1); }
.legal { font-size: 11px; color: var(--t3); text-align: center; margin-top: 10px; line-height: 1.5; }