/* The shared PUBLIC SHELL (UX-CLIENT-01 stage 1, 2026-08-19): the split-panel
   skeleton, brand block and the self-owned --lp-* palette that /login and /register
   both render. Extracted from Login.razor's page style block so Register stops
   shipping a stale copy of an old shell on the authenticated theme tokens. These
   pages own their theme independently of the authenticated shell: every color in
   here comes from --lp-* tokens, never from the global --text/--bg custom
   properties. Page-SPECIFIC rules (forms, plan cards, MFA, modals, top controls)
   stay in each page's own style block.
   Static pins: DocumentMakerVisualRegressionTests (login-page grid rows) and
   GraphicalShellRegressionTests (language token values) assert on THIS file. */

 /* CSS Variables for Theming */
 .login-page {
 --lp-bg: #060a14;
 --lp-card-bg: #0c1322;
 --lp-brand-bg: linear-gradient(160deg, #0a1628 0%, #0f1f38 50%, #132845 100%);
 --lp-brand-glow: rgba(201,169,98,0.06);
 --lp-text: #f1f5f9;
 --lp-text-soft: rgba(255,255,255,0.65);
 /* 0.35 measured 3.21:1 on the login card (#0c1322) - below AA for small text, and the
    login page keeps its own always-dark palette so this failed in every theme, not
    just one. 0.50 measures 5.30:1. */
 --lp-text-muted: rgba(255,255,255,0.5);
 --lp-gold: #c9a962;
 --lp-gold-soft: rgba(201,169,98,0.7);
 --lp-gold-faint: rgba(201,169,98,0.04);
 --lp-gold-border: rgba(201,169,98,0.18);
 --lp-gold-border-strong: rgba(201,169,98,0.4);
 --lp-input-autofill: #0e1628;
 --lp-placeholder: rgba(255,255,255,0.2);
 --lp-language-text: #cbd5e1;
 --lp-language-panel: #0c1322;
 --lp-danger-text: #fca5a5;
 --lp-shadow: rgba(0,0,0,0.7);
 --lp-separator: rgba(255,255,255,0.1);
 --lp-scheme: dark;
 }

 .login-page.midnight-theme {
 --lp-bg: #000000;
 --lp-card-bg: #050508;
 --lp-brand-bg: linear-gradient(160deg, #000000 0%, #050810 50%, #080c18 100%);
 --lp-brand-glow: rgba(201,169,98,0.04);
 --lp-text: #e8e4dc;
 --lp-text-soft: rgba(255,255,255,0.6);
 --lp-text-muted: rgba(255,255,255,0.3);
 --lp-gold: #c9a962;
 --lp-gold-soft: rgba(201,169,98,0.65);
 --lp-gold-faint: rgba(201,169,98,0.03);
 --lp-gold-border: rgba(201,169,98,0.12);
 --lp-gold-border-strong: rgba(201,169,98,0.3);
 --lp-input-autofill: #050508;
 --lp-placeholder: rgba(255,255,255,0.15);
 --lp-language-text: #d6d0c5;
 --lp-language-panel: #050508;
 --lp-danger-text: #fca5a5;
 --lp-shadow: rgba(0,0,0,0.9);
 --lp-separator: rgba(255,255,255,0.06);
 --lp-scheme: dark;
 }

 .login-page.light-theme {
 --lp-bg: #f8f5ef;
 --lp-card-bg: #f0ebe0;
 --lp-brand-bg: linear-gradient(160deg, #1a1510 0%, #2c2418 50%, #3d3224 100%);
 --lp-brand-glow: rgba(154,123,46,0.12);
 --lp-text: #1c1710;
 --lp-text-soft: rgba(255,255,255,0.75);
 --lp-text-muted: #7a6e5c;
 --lp-gold: #9a7b2e;
 --lp-gold-soft: #8a7040;
 --lp-gold-faint: rgba(154,123,46,0.05);
 --lp-gold-border: rgba(154,123,46,0.18);
 --lp-gold-border-strong: rgba(154,123,46,0.35);
 --lp-input-autofill: #f5f0e6;
 --lp-placeholder: rgba(0,0,0,0.25);
 --lp-language-text: #4a4030;
 --lp-language-panel: #fffaf2;
 --lp-danger-text: #991b1b;
 --lp-shadow: rgba(26,21,16,0.08);
 --lp-separator: rgba(154,123,46,0.12);
 --lp-scheme: light;
 }

 /* Light theme branding uses dark panel = white text for logo */
 .light-theme .brand-tagline {
 color: #c9a962;
 }

 .light-theme .brand-features li {
 color: rgba(255,255,255,0.7);
 }

 .light-theme .brand-features li::before {
 color: #c9a962;
 }

 .light-theme .login-container {
 backdrop-filter: blur(20px);
 -webkit-backdrop-filter: blur(20px);
 box-shadow: 0 25px 60px -12px rgba(26,21,16,0.12),
 0 0 0 1px rgba(154,123,46,0.15),
 inset 0 1px 0 rgba(255,255,255,0.6);
 }

 .light-theme .login-form-container {
 background: rgba(255,255,255,0.75);
 backdrop-filter: blur(12px);
 }

 /* Layout */
 .login-page {
 min-height: 100vh;
 min-height: 100dvh;
 display: grid;
 grid-template-columns: minmax(0, 1fr);
 grid-template-rows: auto minmax(0, 1fr);
 justify-items: center;
 background: var(--lp-bg);
 padding: 0;
 position: relative;
 transition: background 0.3s ease;
 }

 .login-container {
 grid-row: 2;
 grid-column: 1;
 display: flex;
 width: min(calc(100% - 4rem), 960px);
 max-width: 960px;
 min-height: 560px;
 align-self: center;
 margin: 2rem 0;
 background: var(--lp-card-bg);
 border-radius: 1.25rem;
 overflow: hidden;
 box-shadow: 0 25px 60px -12px var(--lp-shadow),
 0 0 0 1px var(--lp-gold-border);
 transition: background 0.3s, box-shadow 0.3s;
 }

 .login-branding {
 flex: 1;
 display: flex;
 align-items: center;
 justify-content: center;
 padding: 3rem 2.5rem;
 background: var(--lp-brand-bg);
 position: relative;
 overflow: hidden;
 }

 .login-branding::before {
 content: '';
 position: absolute;
 top: -50%;
 left: -50%;
 width: 200%;
 height: 200%;
 background: radial-gradient(circle at 60% 40%, var(--lp-brand-glow) 0%, transparent 50%);
 pointer-events: none;
 }

 .brand-content {
 text-align: center;
 color: var(--lp-text);
 position: relative;
 z-index: 1;
 }

 .brand-logo-img {
 width: min(320px, 100%);
 max-width: 100%;
 height: auto;
 margin-bottom: 1rem;
 }

 .brand-tagline {
 font-size: 0.85rem;
 color: var(--lp-gold);
 letter-spacing: 3px;
 text-transform: uppercase;
 margin-bottom: 2.5rem;
 font-weight: 400;
 width: 100%;
 text-align: center;
 display: block;
 }

 .brand-features {
 list-style: none;
 padding: 0;
 margin: 0 auto;
 text-align: left;
 display: inline-flex;
 flex-direction: column;
 gap: 0.7rem;
 }

 .brand-features li {
 position: relative;
 padding-left: 1.5rem;
 color: var(--lp-text-soft);
 font-size: 0.875rem;
 line-height: 1.4;
 }

 .brand-features li::before {
 content: '\2022';
 position: absolute;
 left: 0;
 color: var(--lp-gold);
 font-size: 1.2rem;
 line-height: 1.2;
 }

 .login-form-container {
 flex: 1;
 display: flex;
 align-items: center;
 justify-content: center;
 padding: 3rem;
 background: var(--lp-card-bg);
 transition: background 0.3s;
 }

 .login-form-card {
 width: 100%;
 max-width: 340px;
 }

@media (max-width: 768px) {
 .login-container {
 flex-direction: column;
 width: calc(100% - 2rem);
 min-height: 0;
 align-self: start;
 margin: 1rem 0;
 }
 .login-branding {
 padding: 1.25rem clamp(1.25rem, 6vw, 2rem);
 }

 .brand-features {
 display: none;
 }

 .brand-tagline {
 margin-bottom: 0;
 }

 .login-form-container {
 width: 100%;
 padding: clamp(1.25rem, 6vw, 2rem);
 }
}