/* seasonal.css — Knox's three looks, shared by the app and the landing page.
   Light: the default. Dark: html[data-theme="dark"] (the night look below).
   Seasonal (fall / Thanksgiving): dark plus html.knox-seasonal — a warm
   harvest palette, falling leaves and a few pumpkins (theme.js adds them).
   The brand accent colors stay the same in every look. */

/* ── Dark: the night look from the old Halloween mode, minus the Halloween
   decorations — midnight-tinted neutrals and soft orange glows. ─────── */
html[data-theme="dark"]:not(.knox-seasonal) {
  --cream:        #120E17;
  --cream-warm:   #1A1421;
  --gray:         #1C1623;
  --surface:      #261E2E;
  --border:       #3E3249;
  --text:         #F5EEF7;
  --text-light:   #B6A8BD;
  --text-body:    #CFC3D6;
  --orange-cream: #2A1D1A;
  --orange-light: #5A3012;
  --purple-light: #3A1C52;
  --shadow:       0 4px 0 rgba(0,0,0,.45);
  color-scheme: dark;
}
html[data-theme="dark"]:not(.knox-seasonal), html[data-theme="dark"]:not(.knox-seasonal) body { background: var(--cream); }
/* App */
html[data-theme="dark"]:not(.knox-seasonal) #welcomeScreen {
  background-color: var(--cream);
  background-image:
    radial-gradient(ellipse at 80% 10%, rgba(255,154,60,.10), transparent 45%),
    radial-gradient(ellipse at 10% 95%, rgba(142,111,176,.16), transparent 45%);
}
html[data-theme="dark"]:not(.knox-seasonal) #welcomeScreen::before, html[data-theme="dark"]:not(.knox-seasonal) #welcomeScreen::after { display: none; }
html[data-theme="dark"]:not(.knox-seasonal) .welcome-badge { background: #2A1D1A; border-color: var(--orange); box-shadow: 0 3px 0 #A34700, 0 0 26px rgba(255,107,0,.22); }
html[data-theme="dark"]:not(.knox-seasonal) .welcome-accent { text-shadow: 0 0 28px rgba(255,107,0,.35); }
html[data-theme="dark"]:not(.knox-seasonal) .suggestion-chip { background: rgba(38,30,46,.97); }
html[data-theme="dark"]:not(.knox-seasonal) .sidebar-top { box-shadow: none; }
html[data-theme="dark"]:not(.knox-seasonal) #inputOuter { box-shadow: 0 -10px 28px rgba(255,107,0,.06); }
html[data-theme="dark"]:not(.knox-seasonal) .app-loading-content {
  padding: 28px; border: 2px solid var(--border); border-radius: 24px;
  background: var(--surface); box-shadow: 0 6px 0 var(--border), 0 0 40px rgba(255,107,0,.08);
}
/* Landing page */
/* !important on both: #home's inline `background:` shorthand would otherwise
   reset the image and hide the glows. */
html[data-theme="dark"]:not(.knox-seasonal) #home {
  background-color: var(--cream) !important;
  background-image:
    radial-gradient(ellipse at 82% 12%, rgba(255,154,60,.10), transparent 45%),
    radial-gradient(ellipse at 8% 95%, rgba(142,111,176,.16), transparent 45%) !important;
}
html[data-theme="dark"]:not(.knox-seasonal) #home > .hero-blob { display: none; }
html[data-theme="dark"]:not(.knox-seasonal) .hero-badge { background: #2A1D1A !important; box-shadow: 0 3px 0 #A34700, 0 0 26px rgba(255,107,0,.22); }
html[data-theme="dark"]:not(.knox-seasonal) .hero-accent { text-shadow: 0 0 34px rgba(255,107,0,.35); }
html[data-theme="dark"]:not(.knox-seasonal) .hero-mascot { filter: drop-shadow(0 0 34px rgba(255,140,40,.45)) !important; }

/* ── Seasonal palette: cozy autumn evening ───────────────────────────── */
html.knox-seasonal[data-theme="dark"] {
  --cream:        #17100B;
  --cream-warm:   #1F160F;
  --gray:         #261B13;
  --surface:      #2F2219;
  --border:       #4C3626;
  --text:         #FAF0E4;
  --text-light:   #CDB59D;
  --text-body:    #E3D2C0;
  --orange-cream: #2F1D0F;
  --orange-light: #6E3A11;
  --green-light:  #3D4A14;
  --purple-light: #4A1D2B;
  --purple-on-tint: #F2A9BE;
  color-scheme: dark;
}
html.knox-seasonal[data-theme="dark"],
html.knox-seasonal[data-theme="dark"] body { background: var(--cream); }

/* Only-in-fall / not-in-fall text swaps (badges). */
.season-only, .fall-sky, .fall-harvest { display: none; }
html.knox-seasonal .season-only { display: inline; }
html.knox-seasonal .season-hide { display: none; }

/* ── Falling leaves (theme.js puts .fall-sky in the welcome/hero area) ── */
html.knox-seasonal .fall-sky {
  display: block; position: absolute; inset: 0; overflow: hidden;
  pointer-events: none; z-index: 0;
}
.fall-leaf {
  position: absolute; top: -60px; left: var(--x);
  width: var(--s, 26px); height: var(--s, 26px);
  animation: fallDrop var(--d, 14s) linear infinite; animation-delay: var(--delay, 0s);
  opacity: .9;
}
.fall-leaf svg { width: 100%; height: 100%; animation: fallSway var(--sway, 4s) ease-in-out infinite alternate; }
@keyframes fallDrop { to { top: 105%; } }
@keyframes fallSway {
  from { transform: translateX(-18px) rotate(-35deg); }
  to   { transform: translateX(18px) rotate(40deg); }
}

/* Pumpkins and acorns in the bottom corners (desktop only) */
html.knox-seasonal .fall-harvest {
  display: block; position: absolute; bottom: 6px; width: 170px; height: auto;
  z-index: 0; pointer-events: none;
}
html.knox-seasonal .fall-harvest.left { left: 16px; }
html.knox-seasonal .fall-harvest.right { right: 16px; transform: scaleX(-1); }
@media (max-width: 768px) {
  html.knox-seasonal .fall-harvest { display: none; }
  html.knox-seasonal .fall-sky .fall-leaf:nth-child(n+7) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .fall-leaf, .fall-leaf svg { animation: none !important; }
  .fall-leaf { top: var(--rest, 20%); }
}

/* ── App touches ─────────────────────────────────────────────────────── */
html.knox-seasonal #welcomeScreen {
  background-color: var(--cream);
  background-image:
    radial-gradient(ellipse at 82% 8%, rgba(255,166,64,.14), transparent 46%),
    radial-gradient(ellipse at 10% 96%, rgba(196,74,36,.16), transparent 46%);
}
html.knox-seasonal #welcomeScreen::before,
html.knox-seasonal #welcomeScreen::after { display: none; }
/* The app gives every welcome-screen child position:relative; keep the
   decorations absolute and behind the content. */
html.knox-seasonal #welcomeScreen > .fall-sky,
html.knox-seasonal #home > .fall-sky { position: absolute; z-index: 0; }
html.knox-seasonal #welcomeScreen > .fall-harvest,
html.knox-seasonal #home > .fall-harvest { position: absolute; z-index: 0; }
html.knox-seasonal .welcome-badge {
  background: #3A2210; border-color: var(--orange);
  box-shadow: 0 3px 0 #A34700, 0 0 26px rgba(255,140,40,.2);
}
html.knox-seasonal .welcome-accent { text-shadow: 0 0 28px rgba(255,140,40,.3); }
html.knox-seasonal .suggestion-chip { background: rgba(47,34,25,.97); }
html.knox-seasonal .sidebar-section-header > span::before { content: ''; display: inline-block; width: 13px; height: 13px; margin-right: 6px; vertical-align: -2px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C2571A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.5 19 2c1 2 2 4.2 2 8 0 5.5-4.8 10-10 10Z'/%3E%3Cpath d='M2 21c0-3 1.9-5.4 5-6'/%3E%3C/svg%3E") center / contain no-repeat; }
html.knox-seasonal #inputOuter { box-shadow: 0 -10px 28px rgba(255,140,40,.06); }

/* ── Landing page touches ────────────────────────────────────────────── */
html.knox-seasonal #home {
  background-color: var(--cream) !important;
  background-image:
    radial-gradient(ellipse at 84% 10%, rgba(255,166,64,.14), transparent 46%),
    radial-gradient(ellipse at 8% 96%, rgba(196,74,36,.16), transparent 46%);
}
html.knox-seasonal #home > .hero-blob { display: none; }
html.knox-seasonal .hero-badge { background: #3A2210 !important; box-shadow: 0 3px 0 #A34700, 0 0 26px rgba(255,140,40,.2); }
html.knox-seasonal .hero-accent { text-shadow: 0 0 34px rgba(255,140,40,.3); }

/* ── Theme picker (app: the Appearance button opens it) ──────────────── */
.knox-theme-menu {
  position: fixed; z-index: 10050; min-width: 210px; padding: 6px;
  background: var(--surface); border: 2px solid var(--border); border-radius: 16px;
  box-shadow: 0 6px 0 var(--border), 0 18px 40px rgba(0,0,0,.25);
  font-family: inherit;
}
.knox-theme-menu[hidden] { display: none; }
.knox-theme-menu .ktm-title { font-size: 11px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: var(--text-light); padding: 6px 10px 4px; }
.knox-theme-menu button {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 10px; border: 0; border-radius: 11px; background: transparent;
  color: var(--text); font: inherit; font-size: 14px; font-weight: 800; text-align: left; cursor: pointer;
}
.knox-theme-menu button:hover, .knox-theme-menu button:focus-visible { background: var(--gray); outline: none; }
.knox-theme-menu .ktm-icon { width: 28px; height: 28px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 16px; background: var(--cream-warm); border: 2px solid var(--border); flex-shrink: 0; }
.knox-theme-menu .ktm-text { flex: 1; display: flex; flex-direction: column; line-height: 1.2; }
.knox-theme-menu .ktm-text small { font-size: 11.5px; font-weight: 700; color: var(--text-light); }
.knox-theme-menu .ktm-check { color: var(--orange); font-weight: 900; visibility: hidden; }
.knox-theme-menu button[aria-checked="true"] .ktm-check { visibility: visible; }
.knox-theme-menu button[aria-checked="true"] .ktm-icon { border-color: var(--orange); }

/* "Fall mode is here" tip on the app's welcome screen (theme.js) */
.fall-tip {
  display: inline-flex; align-items: center; gap: 10px; max-width: 100%;
  margin: 0 auto 18px; padding: 6px 6px 6px 14px;
  background: var(--surface); border: 2px solid var(--orange); border-radius: 999px;
  box-shadow: 0 3px 0 var(--orange-light);
  font-size: 13px; font-weight: 800; color: var(--text); text-align: left;
}
html.knox-seasonal .fall-tip { display: none; }
/* It floats at the top of the welcome screen instead of taking a row, so
   showing or hiding it never moves Ask Knox or Learn's welcome. (Phones and
   short windows have no spare room up there, so it stays in the flow.) */
@media (min-width: 769px) and (min-height: 720px) {
  #welcomeScreen > .fall-tip { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); margin: 0; z-index: 3; width: max-content; }
}
.fall-tip .ft-text { line-height: 1.3; }
.fall-tip .ft-btn {
  background: var(--orange); color: #fff; border: none; border-radius: 999px; padding: 8px 15px;
  font: inherit; font-size: 12.5px; font-weight: 900; box-shadow: 0 3px 0 var(--orange-dark); cursor: pointer; white-space: nowrap;
}
.fall-tip .ft-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--orange-dark); }
.fall-tip .ft-x { width: 26px; height: 26px; flex-shrink: 0; border: none; border-radius: 50%; background: transparent; color: var(--text-light); font-size: 17px; font-weight: 900; line-height: 1; cursor: pointer; }
.fall-tip .ft-x:hover { background: var(--gray); color: var(--text); }
@media (max-width: 520px) { .fall-tip { border-radius: 18px; flex-wrap: wrap; padding: 8px 8px 8px 12px; row-gap: 8px; } .fall-tip .ft-text { flex: 1 1 160px; } }