/* ==========================================================================
   Worlds (core/worlds.js). html[data-world] swaps fonts, colours and art; layout and meaning stay the same.
   ========================================================================== */

/* World picker in Me */
.world-note { margin: calc(var(--s1) * -1) 2px var(--s1); }
.world-row { width: 100%; border: none; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.world-row.is-on { background: color-mix(in srgb, var(--job-new) 8%, var(--surface)); }
.world-swatch { width: 40px; height: 40px; flex: none; border-radius: var(--r-sm); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); }
.w-estate { background: linear-gradient(135deg, #2e4a3b, #a57f3f); }
.w-plain { background: linear-gradient(135deg, #8b5cf6, #14b8a6); }
.w-house { background: linear-gradient(135deg, #1b1033, #e8497a); }
.world-check { color: var(--job-calm); }

/* The world's picture on Today */
.world-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.world-hero { margin: calc(var(--s2) * -1) -6px 0; display: flex; flex-direction: column; align-items: center; }
.world-hero svg { width: 100%; height: auto; display: block; }
.world-hero figcaption { margin-top: -2px; font-style: italic; font-size: 14px; color: var(--muted); text-align: center; }
.w-window { transition: fill 0.8s ease; }

/* The world's big moment when a task is done */
.world-moment {
  position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: var(--s5);
  background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  animation: fade-in 0.25s ease both; cursor: pointer;
}
.world-moment.out { opacity: 0; transition: opacity 0.35s ease; }
.world-moment-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s2); max-width: 340px; }
.w-seal-stage { width: 200px; height: 200px; }
.w-seal-stage svg { width: 100%; height: 100%; display: block; }
.w-seal { transform-origin: 110px 110px; animation: w-stamp 0.75s cubic-bezier(0.2, 1.4, 0.4, 1) 0.1s both; }
.w-inkring { transform-origin: 110px 110px; animation: w-ring 1s ease-out 0.45s both; }
.world-moment-title { margin: 0; font-family: 'IM Fell English SC', 'EB Garamond', Georgia, serif; font-size: 32px; letter-spacing: 0.08em; color: var(--job-hot); animation: w-ink 0.6s ease 0.6s both; }
.world-moment-line { margin: 0; font-style: italic; font-size: 18px; color: var(--text); animation: w-ink 0.8s ease 0.85s both; }
@keyframes fade-in { from { opacity: 0; } }
@keyframes w-stamp { 0% { transform: translateY(-40px) scale(1.9); opacity: 0; } 55% { transform: scale(0.94); opacity: 1; } 75% { transform: scale(1.03); } 100% { transform: scale(1); } }
@keyframes w-ring { from { transform: scale(0.7); opacity: 0.7; } to { transform: scale(1.35); opacity: 0; } }
@keyframes w-ink { from { opacity: 0; transform: translateX(-8px); filter: blur(2px); } to { opacity: 1; transform: none; filter: none; } }
@media (prefers-reduced-motion: reduce) { .w-seal, .w-inkring, .world-moment-title, .world-moment-line { animation: none; } }

/* ---------- The Estate: paper, ink, serif type, wax-seal red and gold; "by lamplight" in dark mode ---------- */
html[data-world="estate"] {
  --bg: #f3ebdb; --surface: #fbf6ec; --surface-2: #eae0cb; --text: #2a231e; --muted: #5e5145;
  --line: rgba(94, 81, 69, 0.2); --primary: #2e4a3b; --on-primary: #f6f0e3;
  --rose: #7c2d25; --amber: #9a7336; --teal: #2e4a3b; --green: #2e4a3b; --violet: #6a3e5c; --sky: #2f4a6b;
  --orange: #a3522f; --pink: #8c3a4a; --lime: #5e7a3a; --indigo: #3c4a6e; --blue: #2f4a6b;
  --shadow-1: 0 1px 0 rgba(60, 40, 20, 0.06), 0 6px 16px rgba(60, 40, 20, 0.08);
  --shadow-2: 0 1px 0 rgba(60, 40, 20, 0.08), 0 14px 34px rgba(60, 40, 20, 0.16);
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --radius: 16px;
  --font: 'EB Garamond', Georgia, 'Times New Roman', serif;
  --w-ink: #2a231e; --w-wash: #dccba8; --w-lit: #e9b85a; --w-glass: #4a443d; --w-wall: #fbf6ec; --w-oxblood: #7c2d25; --w-gold: #a57f3f;
}
@media (prefers-color-scheme: dark) {
  html[data-world="estate"] {
    --bg: #1c1a16; --surface: #27231d; --surface-2: #312c24; --text: #eee5d2; --muted: #bdaf98;
    --line: rgba(238, 229, 210, 0.12); --primary: #d4b06a; --on-primary: #1c1a16;
    --rose: #e0937f; --amber: #d4b06a; --teal: #9bc1a7; --green: #9bc1a7; --violet: #c9a0c0; --sky: #9db7d6;
    --orange: #e09a6c; --pink: #e0a0ad; --lime: #b7cf8e; --indigo: #aab4d6; --blue: #9db7d6;
    --shadow-1: 0 0 0 1px rgba(238, 229, 210, 0.06);
    --shadow-2: 0 0 0 1px rgba(238, 229, 210, 0.08), 0 16px 40px rgba(0, 0, 0, 0.45);
    --w-ink: #eee5d2; --w-wash: #342d22; --w-lit: #f4c76c; --w-glass: #100f0c; --w-wall: #2b2720; --w-oxblood: #e0937f; --w-gold: #d4b06a;
  }
}
html[data-world="estate"] body { font-size: 17px; }
html[data-world="estate"] h1,
html[data-world="estate"] h2,
html[data-world="estate"] .now-title,
html[data-world="estate"] .sec-head h3,
html[data-world="estate"] .section-title { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 700; letter-spacing: -0.005em; }
html[data-world="estate"] h1 { font-size: 32px; }
html[data-world="estate"] .now-title { font-size: 28px; }
html[data-world="estate"] .eyebrow,
html[data-world="estate"] .glance-label,
html[data-world="estate"] .tab > span:nth-child(2) { font-family: 'IM Fell English SC', 'EB Garamond', Georgia, serif; letter-spacing: 0.05em; text-transform: none; font-weight: 400; }
html[data-world="estate"] .eyebrow { font-size: 15px; }
html[data-world="estate"] .tab > span:nth-child(2) { font-size: 13px; }
html[data-world="estate"] .btn { font-family: 'EB Garamond', Georgia, serif; font-weight: 600; letter-spacing: 0.01em; }
html[data-world="estate"] .btn-primary { font-size: 18px; }
html[data-world="estate"] .card,
html[data-world="estate"] .hub-tile,
html[data-world="estate"] .glance-tile,
html[data-world="estate"] .list { border: 1px solid var(--line); }
html[data-world="estate"] .now-card {
  background: var(--surface);
  box-shadow: var(--shadow-2), inset 0 0 0 5px var(--surface), inset 0 0 0 6px color-mix(in srgb, var(--amber) 55%, transparent);
}
html[data-world="estate"] .now-icon { border-radius: 50%; background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
html[data-world="estate"] .now-card .eyebrow { color: var(--rose); }
html[data-world="estate"] .hub-icon { border-radius: 50%; }
html[data-world="estate"] .me-btn {
  background: var(--rose); color: #f6f0e3; font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 22px; font-weight: 700;
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--amber);
}
html[data-world="estate"] .tabbar { border: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 92%, transparent); }
html[data-world="estate"] .tab.is-active { background: color-mix(in srgb, var(--teal) 12%, var(--surface)); color: var(--teal); }
html[data-world="estate"] .glance-top b { font-family: "Cormorant Garamond", Georgia, serif; font-size: 19px; }
html[data-world="estate"] .glance-tile { padding-right: var(--s1); }
html[data-world="estate"] .glance-top { gap: 3px; }
html[data-world="estate"] .quote-line { font-style: italic; }
html[data-world="estate"] .eve-counter { background: radial-gradient(120% 90% at 100% 0%, #43382c 0%, #2a231e 60%, #211b16 100%); box-shadow: var(--shadow-2); }
html[data-world="estate"] .eve-label { font-family: "IM Fell English SC", "EB Garamond", Georgia, serif; letter-spacing: 0.06em; text-transform: none; font-weight: 400; font-size: 14px; }


/* ==========================================================================
   The estate as a place, not a picture: the hour of her day over the house,
   and the things it has gathered (plants, books, the lamp). See core/worlds.js.
   ========================================================================== */
.estate-house .w-sky { fill: transparent; transition: fill 0.6s; }
.estate-house.hour-dawn .w-sky { fill: color-mix(in srgb, var(--w-lit) 16%, transparent); }
.estate-house.hour-day .w-sky { fill: transparent; }
.estate-house.hour-dusk .w-sky { fill: color-mix(in srgb, var(--w-oxblood) 14%, transparent); }
.estate-house.hour-night .w-sky { fill: color-mix(in srgb, var(--w-glass) 22%, transparent); }

.estate-house .w-sun { fill: color-mix(in srgb, var(--w-lit) 70%, var(--w-wall)); stroke: var(--w-ink); stroke-width: 0.8; }
.estate-house .w-sun.is-low { fill: color-mix(in srgb, var(--w-lit) 85%, var(--w-oxblood)); }
.estate-house .w-moon { fill: var(--w-wall); stroke: var(--w-ink); stroke-width: 0.8; }
.estate-house .w-moon-bite { fill: color-mix(in srgb, var(--w-glass) 22%, var(--bg)); stroke: none; }
.estate-house .w-star { fill: var(--w-ink); opacity: 0.45; }
.estate-house .w-smoke { opacity: 0.5; }
.estate-house .w-pot { opacity: 0.95; }

/* The line under the house: what the estate has gathered so far */
.world-grown { font-size: var(--t-caption); letter-spacing: 0.02em; opacity: 0.75; margin-top: 2px; }

/* ==========================================================================
   The library (features/reading/library.js): the bookcase that fills up with
   the books she has finished, and a candle for every quarter hour she has earned.
   ========================================================================== */
:root {
  --lib-case: #c9b490;
  --lib-page: #fbf6ea; --lib-line: #6b5c48; --lib-wax: #efe4cf; --lib-wax-top: #fff8e9; --lib-floor: #b9a480;
}
@media (prefers-color-scheme: dark) {
  :root { --lib-case: #4a3f31; --lib-page: #efe6d4; --lib-line: #8d7d66; --lib-wax: #cdc0a8; --lib-wax-top: #e8dcc4; --lib-floor: #3a3227; }
}
.library { width: 100%; height: auto; max-width: 420px; margin: 0 auto; display: block; }
.lib-case { fill: var(--lib-case); }
.lib-shelf { fill: color-mix(in srgb, var(--lib-case) 72%, #000); }
.lib-floor { fill: var(--lib-floor); }
.lib-flame { animation: lib-flicker 2.6s ease-in-out infinite; transform-origin: center bottom; }
.lib-candle:nth-child(2n) .lib-flame { animation-duration: 3.4s; }
.lib-candle:nth-child(3n) .lib-flame { animation-duration: 2.1s; }
@keyframes lib-flicker { 0%, 100% { transform: scaleY(1); opacity: 1; } 45% { transform: scaleY(0.86) translateX(0.4px); opacity: 0.88; } }
.library-card { display: flex; flex-direction: column; gap: var(--s3); }
.library-figure { margin: 0; display: flex; flex-direction: column; gap: 4px; align-items: center; text-align: center; }
html[data-world='estate'] .lib-case { fill: color-mix(in srgb, var(--w-wash) 70%, var(--w-wall)); }
html[data-world='estate'] .lib-shelf { fill: color-mix(in srgb, var(--w-ink) 45%, var(--w-wash)); }
html[data-world='estate'] .lib-floor { fill: color-mix(in srgb, var(--w-ink) 30%, var(--w-wash)); }
html[data-world='estate'] .lib-page { fill: var(--w-wall); }

/* ==========================================================================
   The House: a glossy show house. Warm lamplight, teal and magenta, a bold
   headline face. Loud where the Estate is quiet, never unkind.
   ========================================================================== */
html[data-world="house"] {
  --bg: #f4f1f7; --surface: #ffffff; --surface-2: #ece7f3; --text: #241d2e; --muted: #6e6480;
  --line: rgba(36, 29, 46, 0.1); --primary: #7a2f6d; --on-primary: #ffffff;
  --rose: #d6336c; --amber: #e8a33d; --teal: #0f9b8e; --green: #17a673; --violet: #7a2f6d; --sky: #2f80c4;
  --orange: #ef6c3d; --pink: #d6336c; --lime: #7ab648; --indigo: #4a4fbf; --blue: #2f80c4;
  --r-sm: 12px; --r-md: 18px; --r-lg: 26px; --radius: 26px;
  --h-sky: #cfe4f3; --h-wall: #ffffff; --h-wall2: #efe9f5; --h-frame: #3a3147; --h-glass1: #9dc4dd; --h-glass2: #6f9ec0;
  --h-lit: #f0b845; --h-shut: #b7aec5; --h-ground: #d9d3e4; --h-lawn: #7ab648;
  --h-hot: #d6336c; --h-gold: #e8a33d; --h-door: #7a2f6d;
}
@media (prefers-color-scheme: dark) {
  html[data-world="house"] {
    --bg: #17131f; --surface: #221c2d; --surface-2: #2c2439; --text: #f3eefa;
    --line: rgba(243, 238, 250, 0.12); --primary: #e08ad0; --on-primary: #17131f; --muted: #aca0bd;
    --h-sky: #1d2a3c; --h-wall: #2a2336; --h-wall2: #342b43; --h-frame: #0f0c15; --h-glass1: #3b5a75; --h-glass2: #24384c;
    --h-shut: #453b57; --h-ground: #241e30; --h-lawn: #3f6b2c;
  }
}
html[data-world="house"] h1,
html[data-world="house"] h2,
html[data-world="house"] .now-title,
html[data-world="house"] .sec-head h3,
html[data-world="house"] .section-title { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-weight: 800; letter-spacing: -0.03em; }
html[data-world="house"] .eyebrow { letter-spacing: 0.1em; }

.show-house { width: 100%; height: auto; display: block; }
.show-house .h-sky { fill: var(--h-sky); }
.show-house.hour-dusk .h-sky { fill: color-mix(in srgb, var(--h-hot) 22%, var(--h-sky)); }
.show-house.hour-night .h-sky { fill: color-mix(in srgb, #0b1020 72%, var(--h-sky)); }
.show-house.hour-dawn .h-sky { fill: color-mix(in srgb, var(--h-gold) 26%, var(--h-sky)); }
.show-house .h-ground { fill: var(--h-ground); }
.show-house .h-lawn { fill: var(--h-lawn); }
.show-house .h-body { fill: var(--h-wall); stroke: var(--h-frame); stroke-width: 2; }
.show-house .h-porch { fill: var(--h-wall2); stroke: var(--h-frame); stroke-width: 1.6; }
.show-house .h-door { fill: var(--h-door); stroke: var(--h-frame); stroke-width: 1.6; }
.show-house .h-knob { fill: var(--h-gold); }
.show-house .h-terrace { fill: var(--h-wall2); opacity: .9; }
.show-house .h-table { fill: var(--h-wall); stroke: var(--h-frame); stroke-width: 1.4; }
.show-house .h-furniture { stroke: var(--h-frame); stroke-width: 1.8; fill: none; stroke-linecap: round; }
.show-house .h-pot { fill: var(--h-hot); }
.show-house .h-leaf { fill: var(--h-lawn); }
.show-house .h-wire { stroke: var(--h-frame); stroke-width: 1.2; }
.show-house .h-pole { stroke: var(--h-frame); stroke-width: 3; }
.show-house .h-cam-body { fill: var(--h-frame); }
.show-house .h-sun { fill: var(--h-gold); }
.show-house .h-moon { fill: #f3eefa; }
.show-house .h-moon-bite { fill: color-mix(in srgb, #0b1020 72%, var(--h-sky)); }
.show-house .h-star { fill: #fff; opacity: 0.8; }
.show-house .h-sign rect { fill: var(--h-hot); }
.show-house .h-sign text { fill: #fff; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 11px; font-weight: 800; letter-spacing: 0.18em; }
.h-stamp-ring { fill: none; stroke: var(--h-hot); stroke-width: 4; }
.h-stamp-inner { fill: none; stroke: rgba(255, 255, 255, 0.7); stroke-width: 2; }
.h-stamp-text { fill: #fff; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; letter-spacing: 0.08em; }
.h-stamp-initial { fill: #fff; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 34px; font-weight: 800; }