/* legal-theme.css — shared look for the static pages (privacy, terms,
   refund, updates). The theme comes from the same localStorage key as the
   landing page and app ('knoxTheme'), applied by an inline script at the top
   of each page so there's no white flash. Colors are the app's own
   (seasonal.css): the midnight night look and the warm fall look. */

/* Hero + footer use the app sidebar's midnight color in every look. */
.page-hero { background-color:#261E2E; }
footer { background:#1B1622; }

/* ── Dark looks: neutrals ─────────────────────────────────────────────── */
html[data-theme="dark"] {
  --lg-page:#120E17; --lg-card:#261E2E; --lg-hero:#1A1421; --lg-border:#3E3249;
  --lg-text:#F5EEF7; --lg-body:#CFC3D6; --lg-muted:#B6A8BD; --lg-code:#1C1623;
  --lg-glow-warm:rgba(255,154,60,.10); --lg-glow-cool:rgba(142,111,176,.16);
  color-scheme: dark;
}
html.knox-seasonal[data-theme="dark"] {
  --lg-page:#17100B; --lg-card:#2F2219; --lg-hero:#1F160F; --lg-border:#4C3626;
  --lg-text:#FAF0E4; --lg-body:#E3D2C0; --lg-muted:#CDB59D; --lg-code:#261B13;
  --lg-glow-warm:rgba(255,140,40,.12); --lg-glow-cool:rgba(201,90,40,.10);
}
html[data-theme="dark"] body {
  background-color:var(--lg-page); color:var(--lg-text);
  background-image:
    radial-gradient(ellipse at 85% 30%, var(--lg-glow-warm), transparent 40%),
    radial-gradient(ellipse at 5% 80%, var(--lg-glow-cool), transparent 40%);
  background-attachment:fixed;
}

/* Hero: the same soft orange + purple lights as the app's welcome screen. */
html[data-theme="dark"] .page-hero {
  background-color:var(--lg-hero);
  background-image:
    radial-gradient(ellipse at 82% 10%, rgba(255,154,60,.14), transparent 50%),
    radial-gradient(ellipse at 10% 100%, rgba(142,111,176,.20), transparent 50%);
}
html[data-theme="dark"] .page-hero h1 { text-shadow:0 0 34px rgba(255,107,0,.30); }
html[data-theme="dark"] .page-hero .badge { box-shadow:0 0 26px color-mix(in srgb, currentColor 30%, transparent); }

/* Cards */
html[data-theme="dark"] .policy-section,
html[data-theme="dark"] .version-card { background:var(--lg-card); border-color:var(--lg-border); box-shadow:0 4px 0 rgba(0,0,0,.45); }
/* Colored cards keep their ledge and get a soft glow in their own color. */
html[data-theme="dark"] :is(.summary-card, .guarantee-card) { filter:drop-shadow(0 0 22px color-mix(in srgb, var(--lg-glow, #FF8C28) 22%, transparent)); }
html[data-theme="dark"] .version-badge { box-shadow:0 2px 0 #A34700, 0 0 20px rgba(255,107,0,.30); }
html[data-theme="dark"] .section-title,
html[data-theme="dark"] .version-title,
html[data-theme="dark"] .policy-section strong,
html[data-theme="dark"] .change-text strong { color:var(--lg-text); }
html[data-theme="dark"] .policy-section p,
html[data-theme="dark"] .policy-section ul li,
html[data-theme="dark"] .change-text { color:var(--lg-body); }
html[data-theme="dark"] .version-date,
html[data-theme="dark"] .end-note { color:var(--lg-muted); }
html[data-theme="dark"] .change-row { border-top-color:var(--lg-border); }
html[data-theme="dark"] .highlight { background:rgba(255,255,255,0.09); color:var(--lg-text); }
html[data-theme="dark"] .change-text code { background:var(--lg-code); border-color:var(--lg-border); color:var(--lg-text); }
html[data-theme="dark"] .tag-new      { background:rgba(88,204,2,0.16);  color:#7BE33A; }
html[data-theme="dark"] .tag-improved { background:rgba(28,176,246,0.16); color:#5CC8FA; }
html[data-theme="dark"] .tag-fixed    { background:rgba(255,107,0,0.16); color:#FF9A4D; }
html[data-theme="dark"] footer { background:var(--lg-hero); }

/* Shared footer bits (same wording as the landing page). */
footer .footer-links a[aria-current="page"] { color:#aaa; }
footer .ft-made { color:#888; font-weight:700; margin-bottom:6px; }
footer .ft-made + p { color:#555; }

/* Legal pages follow the same light / midnight / warm fall surfaces. */
html:not([data-theme="dark"]) {
 --lg-page:#FFF9F1; --lg-card:#FFFFFF; --lg-hero:#FFF3E3; --lg-border:#E4D8C5;
 --lg-text:#302B25; --lg-body:#514B43; --lg-muted:#756B5F; --lg-code:#F2EBDD;
}
html.knox-seasonal[data-theme="dark"] {
 --lg-page:#FBF3E5; --lg-card:#FFF9EF; --lg-hero:#F4E6CF; --lg-border:#D7BE99;
 --lg-text:#38291F; --lg-body:#594332; --lg-muted:#78604B; --lg-code:#F1E2CB;
 --lg-glow-warm:transparent; --lg-glow-cool:transparent; color-scheme:light;
}
body { background-color:var(--lg-page); color:var(--lg-text); }
.page-hero { background-color:var(--lg-hero); }
.page-hero h1 { color:var(--lg-text); }
.page-hero p { color:var(--lg-muted); }
.policy-section,.version-card { background:var(--lg-card); border-color:var(--lg-border); }
.section-title,.version-title,.policy-section strong { color:var(--lg-text); }
.policy-section p,.policy-section ul li,.change-text { color:var(--lg-body); }
html.knox-seasonal .page-hero { background-image:none; }
html.knox-seasonal .page-hero h1 { text-shadow:none; }
html.knox-seasonal .page-hero .badge { box-shadow:0 3px 0 #D7BE99; background:#FBE4C6; color:#873D28; border-color:#D99857; }
html.knox-seasonal :is(.summary-card,.guarantee-card) { filter:none; }
/* Footer matches the landing page's in every look: dark, Knox brand on top. */
footer,html[data-theme="dark"] footer { background:#1a1a1a; color:#aaa; padding:40px 24px 30px; border-top:none; }
footer .ft-brand { display:inline-flex; align-items:center; gap:10px; margin:0 0 20px; text-decoration:none; }
footer .ft-brand img { width:40px; height:40px; border-radius:50%; border:2px solid rgba(255,255,255,.2); object-fit:cover; }
footer .ft-brand span { font-size:18px; font-weight:900; color:#fff; }
footer .footer-links { display:flex; flex-wrap:wrap; justify-content:center; gap:10px 22px; margin-bottom:0; }
footer .footer-links a { margin:0; font-size:14px; font-weight:700; color:#aaa; transition:color .15s; }
footer .footer-links a:hover { color:#fff; text-decoration:none; }
footer .footer-links a[aria-current="page"] { color:#FF6B00; }
footer .ft-made { color:#888; font-weight:700; max-width:1100px; margin:26px auto 6px; padding-top:22px; border-top:1px solid #333; }
footer .ft-made + p { color:#555; }

/* Key details read like Knox's answers in Ask Knox: bold Knox orange (#FF6B00,
   the same in every look). Labels (.highlight, <b>) are plain bold, no pill. */
.policy-section strong, .review blockquote strong { color:#FF6B00; font-weight:800; }
.policy-section .highlight, html[data-theme="dark"] .policy-section .highlight, html.knox-seasonal .policy-section .highlight {
 background:none; padding:0; border-radius:0; color:inherit; font-weight:800;
}
.policy-section b { font-weight:800; }
html[data-theme="dark"] .policy-section strong, html.knox-seasonal .policy-section strong { color:#FF6B00; }

/* Loading screen — the same one as the landing page, shown for at least a
   second while the page loads (markup + timer at the top of each page's body). */
body.page-loading { overflow:hidden; }
body.page-loading > *:not(#pageLoading):not(script):not(noscript) { visibility:hidden !important; }
#pageLoading { display:none; position:fixed; inset:0; z-index:100000; align-items:center; justify-content:center; padding:24px; text-align:center; background:var(--lg-page); color:var(--lg-text); font-family:'Nunito', system-ui, sans-serif; }
body.page-loading #pageLoading { display:flex; }
.page-loading-content { display:flex; flex-direction:column; align-items:center; gap:13px; padding:28px; border:2px solid var(--lg-border); border-radius:24px; background:var(--lg-card); box-shadow:0 6px 0 var(--lg-border), 0 0 40px rgba(255,107,0,.08); }
.page-loading-logo { width:76px; height:76px; border:4px solid #FF6B00; border-radius:22px; box-shadow:0 5px 0 #CC5500; }
.page-loading-title { font-size:24px; font-weight:900; }
.page-loading-status { margin:0; font-size:14px; font-weight:700; color:var(--lg-muted); }
.page-loading-spinner { width:26px; height:26px; border:3px solid var(--lg-border); border-top-color:#FF6B00; border-radius:50%; animation:pageLoadingSpin .8s linear infinite; }
@keyframes pageLoadingSpin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .page-loading-spinner { animation:none; border-color:#FF6B00; } }

/* Match the LANDING loader exactly, not the legal article's darker palette.
   Explicit site theme only: a dark OS must never recolor a light/fall return. */
#pageLoading { --loader-page:#FFF8F0; --loader-card:#FFFFFF; --loader-border:#E5E5E5; --loader-text:#3C3C3C; --loader-muted:#777; background:var(--loader-page); color:var(--loader-text); }
html[data-theme="dark"] #pageLoading { --loader-page:#101013; --loader-card:#29292E; --loader-border:#34343D; --loader-text:#EDEDED; --loader-muted:#9B9BA3; }
html.knox-seasonal[data-theme="dark"] #pageLoading { --loader-page:#FBF3E5; --loader-card:#FFF9EF; --loader-border:#D7BE99; --loader-text:#38291F; --loader-muted:#78604B; }
#pageLoading .page-loading-content { background:var(--loader-card); border-color:var(--loader-border); box-shadow:0 6px 0 var(--loader-border),0 0 40px rgba(255,107,0,.08); }
#pageLoading .page-loading-status { color:var(--loader-muted); }
#pageLoading .page-loading-spinner { border-color:var(--loader-border); border-top-color:#FF6B00; }
@media (prefers-reduced-motion: reduce) { #pageLoading .page-loading-spinner { border-color:#FF6B00; } }