@layer foundation-layout, foundation-weather, foundation-page, foundation-design, foundation-default, components-default, components-design, components-page, components-weather, components-layout;
@layer foundation-default{.page-home{--home-night: #071521;--home-surface: #10263a;--home-surface-deep: #0a1a2a;--home-raised: #152b42;--home-line: #294962;--home-line-strong: #3c6887;--home-dashboard-bg: #0d2032;background: var(--home-night)}
.page-home main.home-shell{width: min(1120px, calc(100% - var(--phone-page-gutter, 40px)));margin: 0 auto;padding: 32px 0 44px;display: block}
.home-hero{max-width: 780px;margin: 0 auto 24px;padding: 4px 16px 16px;text-align: center}
.home-hero > .site-logo-artwork{display: block}
.home-hero h1{margin: 0 0 17px;color: #c8e4f6;font-size: clamp(26px, 3.4vw, 35px);font-weight: 650;letter-spacing: -.03em;line-height: 1.2}
.home-hero p{max-width: 56ch;margin: 0 auto;color: var(--ui-muted);font-size: 16px;line-height: 1.6}
.home-dashboard{box-sizing: border-box;width: min(720px, calc(100% - var(--phone-card-inset, 16px)));margin: 0 auto 30px;padding: 22px;border: 1px solid var(--home-line);border-radius: var(--ui-radius);background: var(--home-dashboard-bg);box-shadow: 0 18px 45px rgb(0 0 0 / .24)}
.home-dashboard-grid{display: grid;grid-template-columns: repeat(2, minmax(0, 1fr));gap: 14px}
.home-stat{--home-stat-accent: var(--ui-accent);display: flex;flex-direction: column;align-items: stretch;min-width: 0;min-height: 0;padding: 17px 18px 16px;overflow: hidden;border: 1px solid var(--home-line);border-radius: 12px;background: var(--home-raised);box-shadow: inset 0 1px 0 rgb(255 255 255 / .04), 0 8px 20px rgb(0 0 0 / .12);text-align: left}
.home-time-stat{--home-stat-accent: #76b9ea}
.home-weather-stat{--home-stat-accent: #6fcbdc}
.home-sunrise-stat{--home-stat-accent: #e8bd72}
.home-sunset-stat{--home-stat-accent: #f0b47d}
.home-stat-primary{display: flex;align-items: center;justify-content: space-between;gap: 10px;min-width: 0;min-height: 34px;width: 100%}
.home-stat-heading{display: flex;flex: 0 0 auto;align-items: center;gap: 9px;margin: 0;color: color-mix(in srgb, var(--ui-text) 78%, var(--ui-muted));font-size: 13px;font-weight: 550;white-space: nowrap}
.home-stat-heading svg{box-sizing: border-box;flex: none;width: 30px;height: 30px;padding: 6px;border: 1px solid color-mix(in srgb, var(--home-stat-accent) 32%, transparent);border-radius: 8px;background: color-mix(in srgb, var(--home-stat-accent) 11%, transparent);color: var(--home-stat-accent)}
.home-stat-primary > strong{display: block;min-width: 0;overflow: hidden;margin: 0;color: var(--home-stat-accent);font-size: clamp(18px, 1.75vw, 22px);font-variant-numeric: tabular-nums;font-weight: 650;letter-spacing: -.025em;line-height: 1.2;text-align: right;text-overflow: ellipsis;white-space: nowrap}
.home-stat-secondary{margin-top: 9px;padding-top: 9px}
.home-stat-primary.home-stat-secondary > strong{color: var(--ui-text);font-size: clamp(15px, 1.5vw, 17px);font-weight: 600}
.home-daylight-link{display: inline-flex;align-items: center;justify-content: center;gap: 6px;width: fit-content;min-height: 32px;margin-top: auto;padding: 6px 11px;border: 1px solid color-mix(in srgb, var(--home-stat-accent, var(--ui-accent)) 48%, var(--ui-border));border-radius: 8px;background: color-mix(in srgb, var(--ui-button-bg) 82%, transparent);color: var(--ui-text);font-size: 12px;font-weight: 650;line-height: 1.2;text-decoration: none;white-space: nowrap;transition: border-color .16s ease, background .16s ease, transform .16s ease}
.home-daylight-link:hover{border-color: var(--home-stat-accent, var(--ui-accent));background: var(--ui-button-hover);color: var(--ui-text);transform: translateY(-1px)}
.home-daylight-link:focus-visible, .home-dashboard-location-row:focus-visible{outline: 3px solid var(--ui-accent);outline-offset: 3px}
.home-daylight-summary{--home-stat-accent: #79bedf;display: grid;grid-template-columns: auto minmax(180px, 1fr) auto auto;align-items: center;gap: 16px;margin-top: 14px;padding: 15px 16px;border: 1px solid color-mix(in srgb, var(--home-stat-accent) 28%, var(--home-line));border-radius: var(--ui-radius-inner);background: var(--home-surface)}
.home-daylight-copy{display: grid;gap: 2px;min-width: 130px}
.home-daylight-copy span{color: var(--ui-muted);font-size: 12px;font-weight: 650;text-transform: uppercase}
.home-daylight-copy strong{color: var(--ui-text);font-size: 15px;font-variant-numeric: tabular-nums;font-weight: 650}
.home-daylight-track{position: relative;height: 8px;overflow: visible;border-radius: 999px;background: var(--ui-border)}
.home-daylight-fill{position: absolute;inset: 0 auto 0 0;width: 0;border-radius: inherit;background: #8bc8ef;transition: width .4s ease}
.home-daylight-marker{position: absolute;left: 0;top: 50%;width: 13px;height: 13px;border: 2px solid var(--ui-surface);border-radius: 50%;background: #f6cc75;box-shadow: 0 0 0 1px var(--ui-button-border);transform: translate(-50%, -50%);transition: left .4s ease}
.home-daylight-summary > p{min-width: 150px;margin: 0;color: var(--ui-muted);font-size: 13px;line-height: 1.35;text-align: right}
.home-daylight-link{margin-top: 0;white-space: nowrap}
.home-dashboard-location-row{box-sizing: border-box;display: flex;flex-direction: column;align-items: center;justify-content: center;gap: 10px;width: min(520px, 100%);max-width: 100%;margin: 14px auto 0;padding: 14px 16px;border: 1px solid var(--home-line);border-radius: 10px;background: var(--home-surface-deep);color: var(--ui-text);text-align: center}
.home-dashboard-location-heading{display: flex;flex-direction: row;align-items: center;gap: 10px;max-width: 100%;color: inherit;text-decoration: none}
.home-dashboard-location-heading:hover .home-dashboard-location-copy > strong{color: var(--ui-accent)}
.home-dashboard-location-heading > svg{flex: none;width: 20px;height: 20px;color: var(--ui-accent)}
.home-dashboard-location-copy{display: grid;min-width: 0;max-width: 100%;gap: 7px;text-align: left}
.home-dashboard-location-copy > span{color: var(--ui-muted);font-size: 12px;font-weight: 650;letter-spacing: .01em;text-transform: none}
.home-dashboard-location-copy > strong{color: var(--ui-text);font-size: 12px;font-weight: 600;line-height: 1.35;overflow-wrap: anywhere;white-space: normal}
.home-location-form{display: grid;grid-template-columns: minmax(0, 1fr) auto;gap: 8px;width: min(410px, 100%);margin: 2px 0 0}
.home-location-form input, .home-location-form button{box-sizing: border-box;min-width: 0;height: 35px;margin: 0;border-radius: 7px;font: inherit;font-size: 13px}
.home-location-form input{width: 100%;padding: 0 10px;border: 1px solid var(--home-line-strong);background: var(--home-surface);color: var(--ui-text);text-align: left}
.home-location-form input::placeholder{color: var(--ui-muted);opacity: 1}
.home-location-form button{padding: 0 13px;border: 1px solid var(--home-line-strong);background: var(--home-raised);color: var(--ui-text);font-weight: 600;cursor: pointer}
.home-location-form button:hover{border-color: var(--ui-accent);background: var(--home-surface)}
.home-location-form button:disabled{opacity: .65;cursor: wait}
.home-location-form input:focus-visible, .home-location-form button:focus-visible, .home-dashboard-location-heading:focus-visible{outline: 3px solid var(--ui-accent);outline-offset: 2px}
.home-location-search-status{margin: 0;color: var(--ui-muted);font-size: 12px;line-height: 1.3}
.home-location-search-status:empty{display: none}
.home-location-search-status.is-error{color: #f2b4a9}
.home-tools{display: grid;grid-template-columns: repeat(3, minmax(0, 1fr));gap: 20px}
.home-tools-title{grid-column: 1 / -1;margin: 0 0 2px;color: var(--ui-heading);font-size: clamp(21px, 2.5vw, 26px);font-weight: 650;line-height: 1.2;text-align: center}
.home-tool{--home-tool-accent: #83c5f4;--home-tool-border: var(--home-line);--home-tool-bg: #12283c;display: flex;flex-direction: column;align-items: center;min-width: 0;padding: 28px 24px;border: 1px solid var(--home-tool-border);border-radius: var(--ui-radius);background: var(--home-tool-bg);box-shadow: inset 0 1px 0 rgb(255 255 255 / .04), 0 12px 26px rgb(0 0 0 / .2);color: #e7f2fb;text-align: center;text-decoration: none;transition: border-color .16s ease, filter .16s ease, transform .16s ease}
#homeTimeCard{--home-tool-accent: #78bdf0;--home-tool-border: #315775}
#homeWeatherCard{--home-tool-accent: #70d0e6;--home-tool-border: #2d6072}
#homeGeographyCard{--home-tool-accent: #72c8c5;--home-tool-border: #2f5f62}
#homeNaturalTimeCard{--home-tool-accent: #9eb8ef;--home-tool-border: #425779}
#homeCalendarsCard{--home-tool-accent: #b0b1f4;--home-tool-border: #4b557d}
#homeWorkTimeCard{--home-tool-accent: #87bada;--home-tool-border: #36576b}
.home-tool:hover{border-color: var(--home-tool-accent);filter: brightness(1.08);transform: translateY(-2px)}
.home-tool:focus-visible{outline: 3px solid var(--ui-accent);outline-offset: 4px}
.home-tool > svg{flex: none;width: 36px;height: 36px;margin-bottom: 16px;color: var(--home-tool-accent)}
.home-tool h2{margin: 0 0 10px;color: #e5f2fc;font-size: 20px;font-weight: 600;line-height: 1.3}
.home-tool p{max-width: 29ch;margin: 0 0 20px;color: #b6c8d9;font-size: 15px;line-height: 1.6}
.home-tool-open{margin-top: auto;color: var(--home-tool-accent);font-size: 13px;font-weight: 650}
.home-tool-open > span{margin-left: 4px}
@media (max-width: 920px){.home-tools{grid-template-columns: repeat(2, minmax(0, 1fr))}}
@media (max-width: 720px){.home-daylight-summary{grid-template-columns: auto minmax(120px, 1fr)}
.home-daylight-summary > p{grid-column: 1 / -1;text-align: left}
.home-daylight-link{grid-column: 1 / -1}}
@media (max-width: 520px){.page-home main.home-shell{width: calc(100% - var(--phone-page-gutter, 32px));padding-top: 24px}
.home-hero{margin-bottom: 20px;padding-inline: 0}
.home-hero h1{font-size: 26px}
.home-dashboard{padding: 18px}
.home-dashboard-grid{grid-template-columns: repeat(2, minmax(0, 1fr));gap: 10px}
.home-stat{min-height: 0;padding: 12px}
.home-stat-primary{gap: 6px}
.home-stat-heading{gap: 7px;font-size: 12px}
.home-stat-heading svg{width: 27px;height: 27px;padding: 5px}
.home-stat-primary > strong{font-size: 18px}
.home-stat-secondary{margin-top: 7px;padding-top: 7px}
.home-stat-primary.home-stat-secondary > strong{font-size: 15px}
.home-daylight-summary{grid-template-columns: minmax(0, 1fr);gap: 12px}
.home-daylight-copy{min-width: 0}
.home-daylight-link{grid-column: auto}
.home-dashboard-location-row{align-items: center}
.home-tools{grid-template-columns: 1fr;gap: 14px}
.home-tool{padding: 24px}}
@media (prefers-reduced-motion: reduce){.home-tool, .home-daylight-fill, .home-daylight-marker{transition: none}}
.home-stat-primary > strong{max-width: 100%}
@media (max-width: 480px){.home-dashboard{width:100%;padding:10px}
.home-dashboard-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.home-stat{min-height:0;padding:10px 9px}
.home-stat-primary{display:grid;grid-template-columns:minmax(0,1fr);align-content:start;gap:4px}
.home-stat-heading{gap:5px;font-size:10px}
.home-stat-heading svg{width:22px;height:22px;padding:4px}
.home-stat-primary>strong{font-size:16px;text-align:left}
.home-stat-primary.home-stat-secondary>strong{font-size:13px}
.home-stat-secondary{margin-top:6px;padding-top:6px}
.home-location-form{grid-template-columns: minmax(0, 1fr);justify-items: center;width: min(100%, 280px);margin-inline: auto}
.home-location-form input{font-size: 16px}
.home-location-form button{width: min(100%, 150px)}}}
#homePhoneGuide > .phone-save-link{margin-top: 18px}
#homePhoneGuide.phone-save-card{margin-top:48px;border-color:#414851;background:#1b1e22;box-shadow:0 12px 28px rgb(0 0 0 / .2)}
#homePhoneGuide > .phone-save-icon{color:#91a9bb}
#homePhoneGuide > h2{color:#e5e9ed}
#homePhoneGuide > p{color:#b8c0c8}
#homePhoneGuide > .phone-save-link{border-color:#59636d;background:#2a3036;color:#eef2f5}
#homePhoneGuide > .phone-save-link:hover{background:#343b43}
@media (max-width:600px){html body.page-home main.home-shell{width:calc(100% - 24px);max-width:calc(100% - 24px);margin-inline:auto}}