@layer foundation-layout, foundation-weather, foundation-page, foundation-design, foundation-default, components-default, components-design, components-page, components-weather, components-layout;
@layer foundation-default{:root{color-scheme: dark;--page-bg: #102832;--page-bg-deep: #071722;--panel: #142f3d;--panel-deep: #0b2230;--panel-soft: #193a46;--line: rgba(119, 208, 226, 0.34);--line-strong: rgba(119, 221, 238, 0.68);--text: #e8f6fb;--muted: #b6ced7;--blue: #75d7ff;--teal: #63d9cd;--gold: #e5c56d;--danger: #ff9a8f;--shadow: 0 18px 44px rgba(0, 8, 15, 0.3);--radius: 18px;--nav-height: 90px;font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif}
*, *::before, *::after{box-sizing: border-box}
html [hidden]{display: none}
html{min-width: min(300px, 100%);min-height: 100%;scroll-behavior: smooth;scroll-padding-top: calc(var(--nav-height) + 20px)}
body{min-width: min(300px, 100%);min-height: 100vh;margin: 0;padding-top: var(--nav-height);overflow-x: clip;background: radial-gradient(circle at 12% 7%, rgba(57, 150, 164, 0.14), transparent 30rem), radial-gradient(circle at 88% 24%, rgba(62, 104, 156, 0.13), transparent 34rem), linear-gradient(180deg, var(--page-bg), var(--page-bg-deep));color: var(--text);line-height: 1.5}
button, input, select, textarea{font: inherit}
button, select, input[type="checkbox"]{cursor: pointer}
a{color: var(--blue)}
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible{outline: 3px solid rgba(117, 215, 255, 0.72);outline-offset: 3px}
[hidden]{display: none}
.visually-hidden, .site-page-title-sr-only{position: absolute;width: 1px;height: 1px;padding: 0;margin: -1px;overflow: hidden;clip: rect(0 0 0 0);white-space: nowrap;border: 0}
.skip-link{position: fixed;left: 14px;top: 10px;z-index: 20000;padding: 10px 16px;border-radius: 9px;background: #e8f8ff;color: #062032;font-weight: 800;transform: translateY(-150%)}
.skip-link:focus{transform: translateY(0)}
.ambient{position: fixed;z-index: -1;width: 26rem;height: 26rem;border-radius: 50%;filter: blur(90px);opacity: 0.13;pointer-events: none}
.ambient-one{top: 8rem;left: -12rem;background: #3ac7d6}
.ambient-two{right: -13rem;top: 42vh;background: #4f79bd}
main.shell{width: min(1180px, calc(100% - var(--phone-page-gutter, 32px)));margin: 0 auto;padding: 22px 0 38px}
.glass-card{border: 1px solid var(--line);border-radius: var(--radius);background: linear-gradient(145deg, rgba(27, 64, 76, 0.93), rgba(10, 32, 45, 0.96)), var(--panel);box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.045)}
#sharedNavMount{display: contents}
.top-nav[data-shared-nav]{position: fixed;inset: 0 0 auto;z-index: 10000;display: grid;grid-template-columns: 54px minmax(0, 1fr) 58px;grid-template-rows: 38px 36px;gap: 3px 9px;width: 100%;height: var(--nav-height);padding: 4px 14px 6px;border-bottom: 1px solid rgba(73, 127, 157, 0.48);background: radial-gradient(circle at 50% -85%, rgba(61, 108, 139, 0.17), transparent 58%), linear-gradient(180deg, #112f49 0%, #091d31 58%, #061522 100%), #081a2b;box-shadow: 0 10px 24px rgba(0, 6, 15, 0.38);color: var(--text)}
.nav-site-logo{grid-column: 1;grid-row: 1;align-self: center;justify-self: start;display: grid;place-items: center;width: 40px;height: 32px;color: var(--blue);text-decoration: none;transform: translateY(-6px)}
.site-logo-mark{position: relative;display: block;width: 40px;height: 40px;border: 0;border-radius: 50%;background: transparent url("../assets/home/site-logo-cloud-sunset.svg?v=a9577319d510") center / contain no-repeat;box-shadow: none;filter: drop-shadow(0 3px 5px rgba(0, 7, 11, 0.42)) drop-shadow(0 0 6px rgba(93, 190, 214, 0.2))}
.site-logo-hand{display: none}
.site-logo-hour{--hand-rotate: -38deg;height: 10px;background: var(--gold)}
.site-logo-minute{--hand-rotate: 16deg;height: 14px;background: #58e8ef}
.nav-live-summary{position: absolute;left: 50%;top: 2px;display: flex;align-items: center;justify-content: center;gap: 15px;width: min(480px, 43vw);min-width: 350px;max-width: 480px;height: 33px;min-height: 33px;padding: 2px 8px;overflow: hidden;border: 1px solid rgba(117, 174, 193, 0.42);border-radius: 8px;background: linear-gradient(180deg, #173f56 0%, #0b293e 100%);box-shadow: inset 0 1px 0 rgba(220, 247, 252, 0.07), inset 0 -1px 0 rgba(0, 7, 15, 0.4), 0 3px 8px rgba(0, 8, 17, 0.24);color: #aec4d8;font-size: 14px;font-weight: 600;line-height: 18px;white-space: nowrap;transform: translateX(-50%)}
.nav-current-time, .nav-current-date, .nav-weather-summary, .nav-weather-temp, .nav-weather-condition{display: flex;align-items: center;padding: 0;font-size: 14px;font-weight: 600;line-height: 18px}
.nav-current-time{color: #9ee4df}
.nav-current-date{color: #aec4d8}
.nav-weather-summary, .nav-weather-temp, .nav-weather-condition{color: #d2d4a8}
.nav-weather-summary{gap: 5px}
.nav-current-date::before, .nav-weather-summary::before{content: "•";display: block;margin-right: 7px;color: rgba(157, 198, 211, 0.72);font-size: 0.72rem;line-height: 1}
.nav-left-group{grid-column: 1 / 4;grid-row: 2;display: flex;align-items: center;justify-content: center;gap: 7px;min-width: 0}
.nav-section-item, .nav-options-menu{position: relative}
.nav-section-item{--nav-section-top: #223244;--nav-section-bottom: #101c2b;--nav-section-hover: #2c4358;--nav-section-border: rgba(92, 128, 151, 0.72);display: grid;grid-template-columns: minmax(0, 1fr);grid-template-rows: 34px;min-width: 0;width: min(126px, calc((100vw - 92px) / 7));height: 36px;border: 1px solid var(--nav-section-border);border-radius: 8px;background: linear-gradient(115deg, rgba(158, 188, 190, 0.035), transparent 42%), linear-gradient(180deg, var(--nav-section-top), var(--nav-section-bottom));box-shadow: inset 0 1px 0 rgba(229, 245, 246, 0.065), 0 6px 14px rgba(0, 7, 16, 0.24);overflow: visible;transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease}
.nav-section-item[data-nav-section="time"]{--nav-section-top: #193946;--nav-section-bottom: #0b242f;--nav-section-hover: #24505b;--nav-section-border: rgba(75, 132, 139, 0.74)}
.nav-section-item[data-nav-section="weather"]{--nav-section-top: #1c3850;--nav-section-bottom: #0c2233;--nav-section-hover: #294c65;--nav-section-border: rgba(76, 122, 151, 0.74)}
.nav-section-item[data-nav-section="geography"]{--nav-section-top: #233b3b;--nav-section-bottom: #112727;--nav-section-hover: #304e4b;--nav-section-border: rgba(82, 132, 124, 0.72)}
.nav-section-item[data-nav-section="phases"]{--nav-section-top: #273548;--nav-section-bottom: #141f2f;--nav-section-hover: #34495e;--nav-section-border: rgba(91, 124, 148, 0.74)}
.nav-section-item[data-nav-section="calendars"]{--nav-section-top: #16464c;--nav-section-bottom: #0a2b34;--nav-section-hover: #1c5660;--nav-section-border: rgba(79, 169, 177, 0.7)}
.nav-section-item[data-nav-section="work"]{--nav-section-top: #1b3d40;--nav-section-bottom: #0c272b;--nav-section-hover: #285253;--nav-section-border: rgba(75, 133, 130, 0.74)}
.nav-section-item:hover, .nav-section-item:focus-within{border-color: rgba(157, 224, 235, 0.94);background: linear-gradient(115deg, rgba(181, 244, 251, 0.22), rgba(71, 183, 199, 0.18) 48%, rgba(33, 119, 137, 0.1)), linear-gradient(180deg, var(--nav-section-hover), var(--nav-section-top) 54%, var(--nav-section-bottom));box-shadow: inset 0 1px 0 rgba(239, 255, 255, 0.22), inset 0 0 16px rgba(105, 218, 232, 0.16), 0 0 14px rgba(103, 213, 229, 0.3), 0 8px 16px rgba(0, 0, 0, 0.24)}
.nav-section-item:is([data-nav-active-page="true"], :has(> .page-nav-link[aria-current="page"])){border-color: rgba(218, 250, 255, 0.98);background: linear-gradient(180deg, #255f78 0%, #17465f 100%);box-shadow: inset 0 1px 0 rgba(244, 255, 255, 0.2), 0 0 0 1px rgba(124, 223, 245, 0.32), 0 0 15px rgba(91, 205, 232, 0.3), 0 8px 18px rgba(0, 0, 0, 0.24)}
.page-nav-link{display: grid;grid-column: 1 / -1;flex: 1 1 auto;place-items: center;width: 100%;height: 36px;min-width: 0;padding: 0 5px 4px;color: #e5f5f9;font-size: 15px;font-weight: 600;line-height: 18px;text-align: center;text-decoration: none;white-space: nowrap;overflow: hidden;text-overflow: ellipsis}
.page-nav-link[aria-current="page"]{color: #effcff}
.nav-section-toggle{position: absolute;inset: 0 0 0 auto;z-index: 2;width: 18px;height: 100%;padding: 0;border: 0;border-radius: inherit;background: transparent;opacity: 0;cursor: pointer}
.nav-section-dropdown, .page-dropdown-menu{position: absolute;z-index: 10100;display: grid;gap: 6px;padding: 10px;border: 1px solid rgba(125, 212, 231, 0.42);border-radius: 10px;background: #0a1f2c;box-shadow: 0 18px 36px rgba(0, 0, 0, 0.42)}
.nav-section-dropdown[hidden], .page-dropdown-menu[hidden]{display: none}
.nav-section-dropdown{left: 0;top: calc(100% + 7px);width: max-content;min-width: 235px;max-width: 330px;max-height: min(70vh, 520px);overflow-y: auto}
.nav-section-dropdown a{padding: 8px 10px;border-radius: 7px;color: #dceff5;text-decoration: none}
.nav-section-dropdown a:hover, .nav-section-dropdown a:focus-visible{background: #17465a;color: white}
.global-format-controls{grid-column: 3;grid-row: 1;align-self: center;justify-self: end;display: flex;align-items: center;justify-content: flex-end;width: 58px;height: 38px;line-height: 0}
.nav-options-menu{width: 58px;height: 40px;font-size: 0;line-height: 0}
#optionsMenuButton{display: inline-grid;place-items: center;width: 58px;height: 40px;padding: 0;border: 0;background: transparent;color: #9defff;font-size: 0;transform: translateY(-3px)}
#optionsMenuButton .options-gear-icon{display: block;width: 30px;height: 30px;overflow: hidden;background: transparent url("../assets/icons/ui/gear.svg") center / contain no-repeat;color: transparent;font-size: 0;line-height: 0;text-indent: -9999px;filter: drop-shadow(0 0 5px rgba(91, 224, 255, 0.36))}
.options-menu-panel{right: 0;top: calc(100% + 9px);width: min(420px, calc(100vw - 24px));color: var(--text)}
.options-button-row, .options-weather-override-row{display: grid;grid-template-columns: minmax(130px, 1fr) auto;align-items: center;gap: 12px;min-height: 42px;color: var(--muted)}
.options-segmented-control{display: flex;border: 1px solid rgba(116, 210, 228, 0.34);border-radius: 8px;overflow: hidden}
.options-segmented-control button, .options-weather-stepper button, .options-weather-stepper output, .options-menu-panel select, #clearSiteCacheButton{min-height: 34px;padding: 6px 10px;border: 0;background: #143548;color: #dceef5}
.options-segmented-control button.is-active{background: #24758a;color: white}
.options-weather-stepper{display: grid;grid-template-columns: 34px minmax(100px, 1fr) 34px}
.nav-location-search, .nav-time-machine-mini, .floating-site-actions:not(.toolbar-is-toggleable){display: none}
.nav-mobile-menu-state, .nav-mobile-toggle{display: none}
.placeholder-ad-slot{position: relative;display: block;box-sizing: border-box;width: min(calc(100% - 24px), 960px);max-width: 960px;height: 118px;min-height: 118px;max-height: 118px;margin: 0 auto;padding: 0;overflow: hidden;border: 1px solid rgba(139, 165, 190, .25);border-radius: 8px;background: #172638;box-shadow: none;visibility: visible;content-visibility: visible;contain-intrinsic-size: auto}
.api-credits-card{margin-top: 24px;padding: 28px;text-align: center}
.api-credits-card__icon svg{width: 48px;height: 48px;fill: none;stroke: var(--teal);stroke-width: 2}
.api-credits-card h2{margin: 10px 0 8px;color: var(--blue);font: 750 clamp(1.35rem, 3vw, 1.85rem) Georgia, serif}
.api-credits-card p{max-width: 760px;margin: 0 auto;color: var(--muted)}
.api-credits-card__providers{display: grid;grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));gap: 12px;margin-top: 20px;text-align: left}
.api-credits-source{padding: 16px;border: 1px solid rgba(119, 208, 226, 0.24);border-radius: 12px;background: rgba(5, 23, 34, 0.42)}
.site-footer{margin-top: 24px;border-top: 1px solid rgba(119, 208, 226, 0.24);background: #071722;color: var(--muted)}
.site-footer-inner{position: relative;display: grid;grid-template-columns: minmax(210px, 1fr) minmax(360px, 2fr) auto;gap: 18px 26px;align-items: center;width: min(1180px, calc(100% - 32px));min-height: 150px;margin: 0 auto;padding: 28px 0}
.site-footer-brand{display: grid;gap: 4px}
.site-footer-brand strong{color: #e5f6fa;font-size: 1.05rem}
.site-footer-links{display: flex;flex-wrap: wrap;justify-content: center;gap: 8px 15px}
.site-footer a{color: #bfe8ef;text-decoration: none}
.site-footer a:hover{color: white;text-decoration: underline}
.site-footer-meta{justify-self: end}
.site-footer-copy{grid-column: 1 / -1;margin: 0;text-align: center;font-size: 0.84rem}
.site-footer-icon{position: absolute;right: 0;bottom: 22px;color: rgba(117, 215, 255, 0.4);font-size: 1.5rem}
@media (max-width: 900px){:root{--nav-height: 50px}
.top-nav[data-shared-nav]{grid-template-columns: 40px minmax(0, 1fr) 40px;grid-template-rows: 42px;align-items: center;gap: 0 6px;height: var(--nav-height);padding: 3px 6px 5px}
.nav-site-logo{display: none}
.nav-live-summary{position: static;grid-column: 2;grid-row: 1;align-self: center;justify-self: stretch;justify-content: flex-end;gap: 8px;width: 100%;min-width: 0;max-width: 100%;height: 38px;min-height: 38px;margin: 0;padding: 0 9px 0 0;border: 0;border-radius: 0;background: transparent;box-shadow: none;transform: none}
.nav-current-time{font-size: 12.5px;font-weight: 850}
.nav-current-date{font-size: 11.5px;font-weight: 750}
.nav-weather-summary, .nav-weather-temp{font-size: 12.5px;font-weight: 850}
.nav-weather-condition{display: none}
.global-format-controls{grid-column: 3;grid-row: 1;width: 40px;height: 38px}
.nav-options-menu{width: 40px;height: 38px}
#optionsMenuButton{width: 40px;height: 38px;border: 1px solid rgba(126, 206, 232, 0.72);border-radius: 8px;background: linear-gradient(180deg, rgba(29, 71, 91, 0.98), rgba(9, 31, 45, 0.995));box-shadow: inset 0 1px 0 rgba(227, 250, 255, 0.1), 0 5px 13px rgba(0, 0, 0, 0.24);transform: none}
.nav-mobile-menu-state{position: static;z-index: 2;grid-column: 1;grid-row: 1;justify-self: start;align-self: center;display: block;width: 40px;height: 38px;margin: 0;opacity: 0;appearance: none}
.nav-mobile-toggle{position: static;grid-column: 1;grid-row: 1;justify-self: start;align-self: center;display: inline-grid;place-items: center;width: 40px;height: 38px;margin: 0;padding: 0;border: 1px solid rgba(126, 206, 232, 0.72);border-radius: 8px;background: linear-gradient(180deg, rgba(29, 71, 91, 0.98), rgba(9, 31, 45, 0.995));color: #c9f4ff;box-shadow: inset 0 1px 0 rgba(227, 250, 255, 0.1), 0 5px 13px rgba(0, 0, 0, 0.24)}
.nav-mobile-toggle-icon{display: grid;gap: 4px}
.nav-mobile-toggle-icon span{display: block;width: 20px;height: 2px;border-radius: 99px;background: currentColor}
.nav-left-group{position: fixed;z-index: 10003;left: 8px;top: 56px;display: none;grid-template-columns: minmax(0, 1fr);align-items: stretch;gap: 6px;width: clamp(170px, 54vw, 220px);max-width: calc(100vw - 16px);max-height: calc(100dvh - 64px);padding: 8px;overflow-y: auto;border: 1px solid rgba(126, 206, 232, 0.72);border-radius: 12px;background: radial-gradient(circle at 20% 0%, rgba(62, 143, 170, 0.2), transparent 38%), linear-gradient(165deg, rgba(12, 39, 53, 0.995), rgba(5, 20, 30, 0.998));box-shadow: inset 0 1px 0 rgba(221, 249, 255, 0.08), 0 18px 42px rgba(0, 8, 14, 0.58)}
.nav-mobile-menu-state:checked ~ .nav-left-group, .top-nav[data-shared-nav].mobile-menu-open .nav-left-group, .top-nav[data-shared-nav].is-mobile-menu-open .nav-left-group{display: grid}
.nav-section-item{display: block;width: 100%;height: 44px;border: 0;background: transparent;box-shadow: none}
.page-nav-link{display: flex;align-items: center;justify-content: flex-start;width: 100%;height: 44px;padding: 0 14px;border: 1px solid rgba(126, 206, 232, 0.48);border-radius: 8px;background: linear-gradient(180deg, rgba(24, 65, 84, 0.98), rgba(10, 35, 49, 0.99));color: #cceefa;font-size: 14px;font-weight: 750;line-height: 1;text-align: left;box-shadow: inset 0 1px 0 rgba(225, 250, 255, 0.06)}
.page-nav-link[aria-current="page"]{border: 2px solid rgba(190, 248, 255, 0.98);background: linear-gradient(180deg, rgba(38, 89, 108, 0.99), rgba(17, 51, 66, 0.995));color: #f0fcff;box-shadow: inset 0 1px 0 rgba(245, 255, 255, 0.16), 0 0 13px rgba(109, 223, 250, 0.2)}
.nav-section-toggle, .nav-section-dropdown{display: none}
.options-menu-panel{position: fixed;top: 56px;right: 6px;width: min(360px, calc(100vw - 12px));max-height: calc(100dvh - 64px);overflow: auto}
.site-footer-inner{grid-template-columns: 1fr;text-align: center}
.site-footer-links{justify-content: center}
.site-footer-meta{justify-self: center}}
@media (max-width: 560px){main.shell{width: min(100% - var(--phone-page-gutter, 18px), 1180px);padding-top: 14px}
.options-menu-panel{right: 6px;top: 56px}
.options-button-row, .options-weather-override-row{grid-template-columns: 1fr;gap: 5px}
.site-footer-inner{width: calc(100% - 24px)}}
@media (prefers-reduced-motion: reduce){html{scroll-behavior: auto}
*, *::before, *::after{animation-duration: 0.01ms;animation-iteration-count: 1;transition-duration: 0.01ms}}}
