/* =========================================================================
   Four rooms, one house. Same logo, type and controls; each section has its own light.
     Today  – morning: warm sunrise, airy
     Study  – library: Social's clean cool light, in a deeper ink-blue
     Feed   – night: dark and immersive (Read mode stays plain)
     Social – gathering: soft blue, human
   Applied in the Light and Dark themes (Ivory stays as it is).
   ========================================================================= */
html, body { transition: background-color 600ms var(--ease); }

/* ---------- Today · morning ---------- */
:root[data-theme="light"][data-section="today"] {
  --bg: #f1e9dd; --canvas: #fbf6ef; --surface: #fffdf9; --surface-2: #f4ece0;
  --ink: #1c1712; --ink-2: #4a3f33; --muted: #9a8b78; --line: rgba(80, 50, 10, 0.08); --line-2: rgba(80, 50, 10, 0.14);
  --glass: rgba(251, 246, 239, 0.84); --hero: #1d140c; --hero-ink: #fbf3e6;
  --accent: #d07a2a; --accent-grad: linear-gradient(135deg, #f2b46a 0%, #d9802f 45%, #a5541a 100%); --copper-glow: rgba(242, 168, 86, 0.6);
  --wordmark-gray: #b3a08a;
}
:root[data-theme="dark"][data-section="today"] {
  --bg: #0d0906; --canvas: #16100b; --surface: #1e1610; --surface-2: #271d15; --hero: #070503;
  --accent: #e8964a; --copper-glow: rgba(242, 160, 80, 0.55);
}

/* ---------- Study · library (same cool, clean family as Social; deeper ink-blue) ---------- */
:root[data-theme="light"][data-section="study"] {
  --bg: #e6eaf1; --canvas: #f4f6fa; --surface: #ffffff; --surface-2: #e8edf5;
  --ink: #121826; --ink-2: #3a4558; --muted: #7c8799; --faint: #b3bccb; --line: rgba(15, 30, 65, 0.08); --line-2: rgba(15, 30, 65, 0.14);
  --glass: rgba(244, 246, 250, 0.86); --hero: #0d1322; --hero-ink: #eef2fa;
  --accent: #3d55b4; --accent-grad: linear-gradient(135deg, #8a9ef0 0%, #4a62c4 45%, #26387f 100%); --copper-glow: rgba(110, 130, 230, 0.45);
  --wordmark-gray: #95a0b2;
}
:root[data-theme="dark"][data-section="study"] {
  --bg: #06080f; --canvas: #0c111b; --surface: #131a26; --surface-2: #1b2331; --hero: #04060b;
  --accent: #7d92ec; --copper-glow: rgba(125, 146, 236, 0.4); --wordmark-gray: #5f6a7c;
}

/* ---------- Feed · night ---------- */
:root[data-section="feed"] { --bg: #050506; }
:root[data-section="feed"] body.feed-reading {
  --canvas: #101012; --surface: #18181b; --surface-2: #222226; --ink: #ecebe6; --ink-2: #c4c2bc; --muted: #86858a; --line: rgba(255, 255, 255, 0.07); --line-2: rgba(255, 255, 255, 0.13);
  --glass: rgba(20, 20, 23, 0.85); --glass-line: rgba(255, 255, 255, 0.06); --wordmark-gray: #6c6c72; color-scheme: dark;
}

/* ---------- Social · gathering ---------- */
:root[data-theme="light"][data-section="social"] {
  --bg: #e5ebf2; --canvas: #f4f7fb; --surface: #ffffff; --surface-2: #e9eff6;
  --ink: #111823; --ink-2: #39475a; --muted: #7d8a9b; --line: rgba(15, 35, 70, 0.08); --line-2: rgba(15, 35, 70, 0.14);
  --glass: rgba(244, 247, 251, 0.86); --hero: #0c1424; --hero-ink: #eef3fb;
  --accent: #3b78d0; --accent-grad: linear-gradient(135deg, #7fb0f0 0%, #3f7fd6 45%, #234f9a 100%); --copper-glow: rgba(110, 160, 240, 0.5);
  --wordmark-gray: #93a1b3;
}
:root[data-theme="dark"][data-section="social"] {
  --bg: #060910; --canvas: #0d121b; --surface: #141b26; --surface-2: #1c2431; --hero: #04070c;
  --accent: #6aa2ee; --copper-glow: rgba(106, 162, 238, 0.45); --wordmark-gray: #5f6b7c;
}

/* ---------- the room's name beside the logo ---------- */
.sec-label { font-size: 14px; font-weight: 500; letter-spacing: -0.01em; color: var(--accent); padding-left: 10px; margin-left: 2px; border-left: 1px solid var(--line-2); white-space: nowrap; transition: color 600ms var(--ease); }
@media (min-width: 761px) { .sec-label { display: none; } }   /* desktop already shows the section pills */

/* ---------- tab bar & section pills glow in the room's color ---------- */
.tabbar a.active { color: var(--accent) !important; }
.tabbar a.active svg { stroke: var(--accent); }
.sections a.active { background: var(--accent) !important; color: #fff !important; }

/* ---------- step into a room ---------- */
.room-enter #app { animation: roomIn 520ms var(--ease); }
@keyframes roomIn { from { opacity: 0; transform: translateY(10px); } }
[data-motion="reduced"] .room-enter #app { animation: none; }

/* ---------- details that make each room feel like itself ---------- */
:root[data-section="today"] .hero { background: radial-gradient(120% 90% at 85% 0%, rgba(242, 168, 86, 0.38), transparent 55%), var(--hero); }
:root[data-section="study"] .hero::before, :root[data-section="social"] .hero::before { background: radial-gradient(closest-side, var(--copper-glow), rgba(70, 100, 200, 0.12) 45%, transparent 72%); }
:root[data-section="study"] .topic-card.featured .explore-hint { color: #a9b8f5; }
:root[data-section="study"] .t-card, :root[data-section="study"] .chapter-card { border-radius: 26px; }
:root[data-section="social"] .avatar { box-shadow: 0 0 0 3px var(--canvas), 0 0 0 4px var(--line-2); }
:root[data-section="social"] .post, :root[data-section="social"] .t-card { border-radius: 26px; }

/* sign-in card fits narrow phones */
.community-auth { display: block !important; }
.auth-card { width: 100% !important; max-width: 460px; min-width: 0; margin: 20px auto; box-sizing: border-box; }
.email-auth { flex-wrap: wrap; }
.email-auth input { flex: 1 1 200px; }
.email-auth .btn { flex: 1 1 auto; justify-content: center; }