/* ============================================================
   Ontario CourtBuddy — Homepage Looks (v1.20.2)
   ------------------------------------------------------------
   One "Homepage look" setting drives BOTH the pre-login landing
   page (#landing + #auth) and the logged-in dashboard (#dashboard).

   Looks are LAYOUT + TYPOGRAPHY only: every colour comes from the
   active theme's CSS variables, so all 14 themes compose with all
   10 looks. The theme system itself is untouched.

   Classic = zero overrides (pixel-faithful to the shipping page).
   ============================================================ */

/* ---------- A. Look picker control (topbar, guests only) ---------- */
.looksel{width:auto!important;margin:0!important;background:var(--btn);color:var(--text);
  border:1px solid var(--line);border-radius:999px;padding:8px 10px;font-size:12px;cursor:pointer}
.looksel:hover{border-color:var(--line2)}
@media(max-width:800px){.looksel{padding:6px;font-size:11px;max-width:104px}}

/* ---------- B. Dashboard look banner (injected by CBHomeLooks) ---------- */
#lookDashBanner{display:none}
#lookDashBanner b{display:block;font-size:22px;letter-spacing:-.01em}
#lookDashBanner span{display:block;color:var(--muted);font-size:13px;margin-top:4px;line-height:1.5}
html[data-homelook="hero"] #lookDashBanner,
html[data-homelook="split"] #lookDashBanner,
html[data-homelook="minimal"] #lookDashBanner,
html[data-homelook="bold"] #lookDashBanner,
html[data-homelook="tech"] #lookDashBanner,
html[data-homelook="professional"] #lookDashBanner,
html[data-homelook="cyber"] #lookDashBanner,
html[data-homelook="terminal"] #lookDashBanner,
html[data-homelook="noir"] #lookDashBanner{
  display:flex;flex-direction:column;gap:2px;margin:6px 0 20px;padding:24px 28px;
  border:1px solid var(--line);border-radius:18px;
  background:linear-gradient(145deg,var(--panel),var(--card2));box-shadow:var(--shadow)}

/* ---------- C. Pre-login: embedded auth gate (all looks except classic) ---------- */
/* When a look embeds the sign-in form inside the landing page, the authgate
   drops its full-viewport gate styling and behaves as an inline panel. */
html[data-homelook="hero"] #auth.authgate,
html[data-homelook="split"] #auth.authgate,
html[data-homelook="minimal"] #auth.authgate,
html[data-homelook="bold"] #auth.authgate,
html[data-homelook="tech"] #auth.authgate,
html[data-homelook="professional"] #auth.authgate,
html[data-homelook="cyber"] #auth.authgate,
html[data-homelook="terminal"] #auth.authgate,
html[data-homelook="noir"] #auth.authgate{
  min-height:0;padding:24px 16px}

/* ================= 2. HERO ================= */
html[data-homelook="hero"] #landing .lp-brandhero{grid-template-columns:1fr;text-align:center;max-width:860px;margin:0 auto}
html[data-homelook="hero"] #landing .lp-brandvideo{display:none}
html[data-homelook="hero"] #landing .lp-hero{max-width:none;padding:84px 0 40px}
html[data-homelook="hero"] #landing .lp-badge{margin-left:auto;margin-right:auto}
html[data-homelook="hero"] #landing h1{font-size:clamp(44px,7.6vw,88px)}
html[data-homelook="hero"] #landing .lp-lede{margin-left:auto;margin-right:auto;text-align:center}
html[data-homelook="hero"] #landing .lp-ctas{justify-content:center}
html[data-homelook="hero"] #landing .lp-trust{justify-content:center}
html[data-homelook="hero"] #landing .lp-trust span{border:1px solid var(--line);background:var(--panel);
  border-radius:999px;padding:8px 16px;color:var(--text-soft)}
html[data-homelook="hero"] #landing .lp-stats{margin-top:34px;background:linear-gradient(145deg,var(--panel),var(--card2));
  border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);padding:28px 22px}
html[data-homelook="hero"] #auth .authcard{box-shadow:0 24px 70px rgba(0,0,0,.28);border-radius:22px}
/* hero dashboard */
html[data-homelook="hero"] #lookDashBanner{
  background:linear-gradient(120deg,color-mix(in srgb,var(--accent) 22%,transparent),
    color-mix(in srgb,var(--accent2) 16%,transparent) 55%,transparent);
  border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
html[data-homelook="hero"] #lookDashBanner b{font-size:26px}
html[data-homelook="hero"] #dashboard .dashhead h2{font-size:30px;letter-spacing:-.02em}

/* ================= 3. SPLIT ================= */
html[data-homelook="split"] #landing .lp-stats,
html[data-homelook="split"] #landing .lp-section,
html[data-homelook="split"] #landing .lp-compare,
html[data-homelook="split"] #landing .lp-final{display:none}
html[data-homelook="split"] #landing{display:grid;grid-template-columns:1.05fr .95fr;align-items:stretch;
  gap:0;min-height:calc(100vh - 220px);margin-top:26px}
html[data-homelook="split"] #landing .lp-hero{
  max-width:none;margin:0;padding:64px 52px;border-radius:22px 0 0 22px;
  background:linear-gradient(140deg,color-mix(in srgb,var(--accent) 20%,transparent),
    color-mix(in srgb,var(--accent2) 18%,transparent) 65%,transparent),
    linear-gradient(145deg,var(--panel),var(--card2));
  border:1px solid var(--line);border-right:0}
html[data-homelook="split"] #landing .lp-brandhero{grid-template-columns:1fr;gap:0;margin:0}
html[data-homelook="split"] #landing .lp-brandvideo{display:none}
html[data-homelook="split"] #landing h1{font-size:clamp(30px,3.6vw,46px)}
html[data-homelook="split"] #landing .lp-ctas{display:none}
html[data-homelook="split"] #landing .lp-trust{flex-direction:column;align-items:flex-start;gap:13px;margin-top:30px}
html[data-homelook="split"] #landing .lp-trust span{font-size:14px;color:var(--text-soft)}
html[data-homelook="split"] #auth.authgate{
  display:flex;align-items:center;justify-content:center;margin:0;padding:48px 40px;
  background:var(--panel);border:1px solid var(--line);border-radius:0 22px 22px 0}
html[data-homelook="split"] #auth .authcard{box-shadow:none;border:0;background:transparent;padding:8px;max-width:400px}
/* v1.20.3: the form is split's right column — closing it strands guests with
   hidden CTAs and no way back in, so the close control is removed here. */
html[data-homelook="split"] #auth .authclose{display:none}
/* split dashboard: pronounced two-zone layout */
html[data-homelook="split"] #lookDashBanner{border-left:4px solid var(--accent);border-radius:0 18px 18px 0}
html[data-homelook="split"] #dashboard .dashgrid{gap:22px}
html[data-homelook="split"] #dashboard aside.sidecard{border-left:3px solid var(--accent)}

/* ================= 4. MINIMAL ================= */
html[data-homelook="minimal"] #landing .lp-brandvideo,
html[data-homelook="minimal"] #landing .lp-stats,
html[data-homelook="minimal"] #landing .lp-section,
html[data-homelook="minimal"] #landing .lp-compare,
html[data-homelook="minimal"] #landing .lp-final{display:none}
html[data-homelook="minimal"] #landing .lp-hero{max-width:600px;margin:0 auto;text-align:center;padding:90px 0 26px}
html[data-homelook="minimal"] #landing .lp-brandhero{grid-template-columns:1fr;gap:0}
html[data-homelook="minimal"] #landing .lp-badge{margin-left:auto;margin-right:auto;background:transparent}
html[data-homelook="minimal"] #landing h1{font-size:clamp(30px,5vw,46px);font-weight:600;letter-spacing:-.015em}
html[data-homelook="minimal"] #landing .lp-lede{margin-left:auto;margin-right:auto;text-align:center;font-size:16px}
html[data-homelook="minimal"] #landing .lp-ctas{justify-content:center}
html[data-homelook="minimal"] #landing .lp-trust{justify-content:center}
html[data-homelook="minimal"] #auth .authcard{box-shadow:none;border:1px solid var(--line);max-width:400px}
/* minimal dashboard: calm and spacious */
html[data-homelook="minimal"] #lookDashBanner{background:var(--panel);box-shadow:none;text-align:center;align-items:center}
html[data-homelook="minimal"] #dashboard .dashgrid,
html[data-homelook="minimal"] #dashboard #dashWidgets{gap:26px}
html[data-homelook="minimal"] #dashboard .dashhead h2{font-weight:600}

/* ================= 5. BOLD ================= */
html[data-homelook="bold"] #landing .lp-brandvideo{display:none}
html[data-homelook="bold"] #landing .lp-brandhero{grid-template-columns:1fr;max-width:900px}
html[data-homelook="bold"] #landing .lp-hero{max-width:none;padding:80px 0 36px}
html[data-homelook="bold"] #landing h1{font-size:clamp(46px,8vw,92px);font-weight:900;letter-spacing:-.03em;line-height:.98}
html[data-homelook="bold"] #landing h1::after{content:"";display:block;width:132px;height:7px;margin-top:22px;
  background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:4px}
html[data-homelook="bold"] #landing .lp-kicker{font-size:13px}
html[data-homelook="bold"] #landing .lp-stats{background:color-mix(in srgb,var(--accent) 9%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line));border-radius:20px;padding:30px 22px}
html[data-homelook="bold"] #landing .lp-stats strong{font-size:38px}
html[data-homelook="bold"] #landing .lp-big{font-weight:900}
html[data-homelook="bold"] #auth .authcard{border-radius:24px;box-shadow:0 26px 80px rgba(0,0,0,.3)}
/* bold dashboard */
html[data-homelook="bold"] #lookDashBanner{border:2px solid color-mix(in srgb,var(--accent) 55%,var(--line))}
html[data-homelook="bold"] #lookDashBanner b{font-size:28px;font-weight:900;letter-spacing:-.02em}
html[data-homelook="bold"] #dashboard .dashhead h2{font-size:30px;font-weight:900}

/* ================= 6. TECH (sleek modern startup) ================= */
html[data-homelook="tech"] #landing{position:relative}
html[data-homelook="tech"] #landing::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(640px 420px at 12% 6%,color-mix(in srgb,var(--accent) 13%,transparent),transparent 62%),
    radial-gradient(720px 480px at 88% 14%,color-mix(in srgb,var(--accent2) 11%,transparent),transparent 62%)}
html[data-homelook="tech"] #landing>*{position:relative}
html[data-homelook="tech"] #landing .lp-hero::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(560px 340px at 50% 0,#000 30%,transparent 75%);
  mask-image:radial-gradient(560px 340px at 50% 0,#000 30%,transparent 75%)}
html[data-homelook="tech"] #landing .lp-hero{position:relative}
html[data-homelook="tech"] #landing .lp-kicker{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
html[data-homelook="tech"] #landing .lp-features article,
html[data-homelook="tech"] #landing .lp-steps>div,
html[data-homelook="tech"] #landing .lp-compare{
  background:color-mix(in srgb,var(--panel) 68%,transparent);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
html[data-homelook="tech"] #landing .lp-big{border-radius:999px}
html[data-homelook="tech"] #landing .lp-stats strong{
  background:linear-gradient(120deg,var(--accent),var(--accent2));
  -webkit-background-clip:text;background-clip:text;color:transparent}
@supports not ((background-clip:text) or (-webkit-background-clip:text)){
  html[data-homelook="tech"] #landing .lp-stats strong,
  html[data-homelook="tech"] #lookDashBanner b{background:none;color:var(--accent)}
}
html[data-homelook="tech"] #auth .authcard{
  background:color-mix(in srgb,var(--panel) 78%,transparent);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-radius:22px}
/* tech dashboard: glass widgets */
html[data-homelook="tech"] #lookDashBanner{
  background:color-mix(in srgb,var(--panel) 70%,transparent);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
html[data-homelook="tech"] #lookDashBanner b{
  background:linear-gradient(120deg,var(--accent),var(--accent2));
  -webkit-background-clip:text;background-clip:text;color:transparent}
html[data-homelook="tech"] #dashboard .card,
html[data-homelook="tech"] #dashboard .case,
html[data-homelook="tech"] #dashboard aside.sidecard{
  background:color-mix(in srgb,var(--panel) 72%,transparent);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
html[data-homelook="tech"] #dashboard .toolbar button{border-radius:999px}

/* ================= 7. PROFESSIONAL (conservative law-firm) ================= */
html[data-homelook="professional"] #landing h1,
html[data-homelook="professional"] #landing .lp-section h2,
html[data-homelook="professional"] #landing .lp-compare h2,
html[data-homelook="professional"] #landing .lp-final h2,
html[data-homelook="professional"] #auth .authcard h2{
  font-family:Georgia,'Times New Roman',serif;font-weight:400;letter-spacing:0}
html[data-homelook="professional"] #landing .lp-hero{max-width:760px}
html[data-homelook="professional"] #landing .lp-brandhero{grid-template-columns:1fr;gap:26px}
html[data-homelook="professional"] #landing .lp-brandvideo{max-width:560px}
html[data-homelook="professional"] #landing .lp-badge{background:transparent;box-shadow:none}
html[data-homelook="professional"] #landing .lp-features article,
html[data-homelook="professional"] #landing .lp-steps>div,
html[data-homelook="professional"] #landing .lp-compare{background:var(--panel);box-shadow:none}
html[data-homelook="professional"] #landing .lp-section{border-top:1px solid var(--line)}
html[data-homelook="professional"] #landing .lp-kicker{color:var(--text-soft)}
html[data-homelook="professional"] #landing .lp-big{border-radius:6px}
html[data-homelook="professional"] #auth .authcard{border-radius:8px;box-shadow:none;border-top:3px solid var(--accent)}
/* professional dashboard */
html[data-homelook="professional"] #lookDashBanner{border-radius:8px;box-shadow:none;border-top:3px solid var(--accent)}
html[data-homelook="professional"] #lookDashBanner b{font-family:Georgia,'Times New Roman',serif;font-weight:400}
html[data-homelook="professional"] #dashboard .dashhead h2,
html[data-homelook="professional"] #dashboard .card h3,
html[data-homelook="professional"] #dashboard aside.sidecard h3{
  font-family:Georgia,'Times New Roman',serif;font-weight:400}
html[data-homelook="professional"] #dashboard .card,
html[data-homelook="professional"] #dashboard .case,
html[data-homelook="professional"] #dashboard aside.sidecard{border-radius:8px;box-shadow:none}

/* ================= 8. CYBER (neon cyberpunk) ================= */
html[data-homelook="cyber"] #landing .lp-kicker,
html[data-homelook="cyber"] #landing .eyebrow,
html[data-homelook="cyber"] #auth .eyebrow{text-transform:uppercase;letter-spacing:.3em}
html[data-homelook="cyber"] #landing h1{text-transform:uppercase;letter-spacing:.02em;
  text-shadow:0 0 26px color-mix(in srgb,var(--accent) 55%,transparent)}
html[data-homelook="cyber"] #landing .lp-hero{position:relative}
html[data-homelook="cyber"] #landing .lp-hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(0,0,0,.14) 3px 4px)}
html[data-homelook="cyber"] #landing .lp-features article,
html[data-homelook="cyber"] #landing .lp-steps>div,
html[data-homelook="cyber"] #landing .lp-compare{
  border-radius:0;clip-path:polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,20px 100%,0 calc(100% - 20px));
  box-shadow:0 0 24px color-mix(in srgb,var(--accent) 20%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 45%,var(--line))}
html[data-homelook="cyber"] #landing .lp-big{border-radius:0;
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px)}
html[data-homelook="cyber"] #landing .lp-badge{border-radius:0;
  box-shadow:0 0 16px color-mix(in srgb,var(--accent) 35%,transparent)}
html[data-homelook="cyber"] #landing .lp-stats strong{
  text-shadow:0 0 18px color-mix(in srgb,var(--accent) 60%,transparent)}
html[data-homelook="cyber"] #auth .authcard{border-radius:0;
  clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,22px 100%,0 calc(100% - 22px));
  border:1px solid color-mix(in srgb,var(--accent) 55%,var(--line));
  box-shadow:0 0 34px color-mix(in srgb,var(--accent) 28%,transparent)}
/* cyber dashboard */
html[data-homelook="cyber"] #lookDashBanner{border-radius:0;
  clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,22px 100%,0 calc(100% - 22px));
  border:1px solid color-mix(in srgb,var(--accent) 55%,var(--line));
  box-shadow:0 0 30px color-mix(in srgb,var(--accent) 25%,transparent)}
html[data-homelook="cyber"] #lookDashBanner b{text-transform:uppercase;letter-spacing:.06em;
  text-shadow:0 0 20px color-mix(in srgb,var(--accent) 60%,transparent)}
html[data-homelook="cyber"] #dashboard .card,
html[data-homelook="cyber"] #dashboard .case,
html[data-homelook="cyber"] #dashboard aside.sidecard{border-radius:0;
  border-color:color-mix(in srgb,var(--accent) 35%,var(--line))}
html[data-homelook="cyber"] #dashboard .dashhead h2{text-transform:uppercase;letter-spacing:.04em}

/* ================= 9. TERMINAL (green-on-black console) ================= */
html[data-homelook="terminal"] #landing,
html[data-homelook="terminal"] #auth,
html[data-homelook="terminal"] #lookDashBanner,
html[data-homelook="terminal"] #dashboard{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace}
html[data-homelook="terminal"] #landing h1::before{content:'$ ';color:var(--accent)}
html[data-homelook="terminal"] #landing .lp-section h2::before,
html[data-homelook="terminal"] #landing .lp-compare h2::before,
html[data-homelook="terminal"] #landing .lp-final h2::before{content:'$ ';color:var(--accent);font-size:.72em}
html[data-homelook="terminal"] #landing .lp-features article,
html[data-homelook="terminal"] #landing .lp-steps>div,
html[data-homelook="terminal"] #landing .lp-compare,
html[data-homelook="terminal"] #auth .authcard{border-radius:0!important}
html[data-homelook="terminal"] #landing .lp-big,
html[data-homelook="terminal"] #landing .lp-badge{border-radius:0}
html[data-homelook="terminal"] #landing .lp-badge::after{content:'▊';color:var(--accent);
  animation:cblookblink 1.1s steps(1) infinite}
html[data-homelook="terminal"] #auth .authcard{border:1px solid var(--line2);
  box-shadow:0 0 0 1px var(--line),0 0 26px color-mix(in srgb,var(--accent) 16%,transparent)}
html[data-homelook="terminal"] #landing .lp-stats{border-top:1px dashed var(--line2);border-bottom:1px dashed var(--line2)}
html[data-homelook="terminal"] #landing .lp-num{border-radius:0}
/* terminal dashboard */
html[data-homelook="terminal"] #lookDashBanner{border-radius:0;border:1px solid var(--line2)}
html[data-homelook="terminal"] #lookDashBanner b{font-weight:700}
html[data-homelook="terminal"] #lookDashBanner b::before{content:'$ ';color:var(--accent)}
html[data-homelook="terminal"] #dashboard .dashhead h2::before{content:'$ ';color:var(--accent)}
html[data-homelook="terminal"] #dashboard .card,
html[data-homelook="terminal"] #dashboard .case,
html[data-homelook="terminal"] #dashboard aside.sidecard,
html[data-homelook="terminal"] #dashboard .toolbar button{border-radius:0}
@keyframes cblookblink{50%{opacity:0}}

/* ================= 10. NOIR (elegant monochrome) ================= */
html[data-homelook="noir"] #landing h1,
html[data-homelook="noir"] #landing .lp-section h2,
html[data-homelook="noir"] #landing .lp-compare h2,
html[data-homelook="noir"] #landing .lp-final h2,
html[data-homelook="noir"] #auth .authcard h2,
html[data-homelook="noir"] #lookDashBanner b{
  font-family:Georgia,'Times New Roman',serif;font-weight:400;letter-spacing:.005em}
html[data-homelook="noir"] #landing .lp-kicker,
html[data-homelook="noir"] #auth .eyebrow{letter-spacing:.34em;font-size:10px}
html[data-homelook="noir"] #landing .lp-hero{position:relative}
html[data-homelook="noir"] #landing .lp-hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 30%,transparent 52%,color-mix(in srgb,#000 30%,transparent))}
html[data-homelook="noir"] #landing .lp-section{border-top:3px double var(--line2)}
html[data-homelook="noir"] #landing .lp-features article,
html[data-homelook="noir"] #landing .lp-steps>div{background:var(--panel);box-shadow:none}
html[data-homelook="noir"] #landing .lp-badge{background:transparent}
html[data-homelook="noir"] #landing .lp-stats strong{color:var(--text)}
html[data-homelook="noir"] #auth .authcard{box-shadow:none;border-top:1px solid var(--line2);border-bottom:1px solid var(--line2)}
/* noir dashboard */
html[data-homelook="noir"] #lookDashBanner{box-shadow:none;background:var(--panel)}
html[data-homelook="noir"] #dashboard .dashhead h2{font-family:Georgia,'Times New Roman',serif;font-weight:400}
html[data-homelook="noir"] #dashboard .card,
html[data-homelook="noir"] #dashboard .case,
html[data-homelook="noir"] #dashboard aside.sidecard{box-shadow:none}

/* ================= Mobile: all looks stack cleanly ================= */
@media(max-width:900px){
  html[data-homelook="split"] #landing{grid-template-columns:1fr;min-height:0}
  html[data-homelook="split"] #landing .lp-hero{border-radius:22px 22px 0 0;border-right:1px solid var(--line);border-bottom:0;padding:44px 26px}
  html[data-homelook="split"] #auth.authgate{border-radius:0 0 22px 22px;padding:36px 22px}
  html[data-homelook="hero"] #landing .lp-hero{padding:56px 0 30px}
  html[data-homelook="terminal"] #landing h1,
  html[data-homelook="bold"] #landing h1{overflow-wrap:anywhere}
}
@media (prefers-reduced-motion:reduce){
  html[data-homelook="terminal"] #landing .lp-badge::after{animation:none}
}