@font-face { font-family:"Plex Mono"; src:url("assets/plex-mono.ttf") format("truetype"); font-display:swap; }
/* Flexoki Dark, matching the local Omarchy theme. */
:root { color-scheme:dark; --bg:#100f0f; --surface:#1c1b1a; --text:#cecdc3; --muted:#a09e96; --line:#343331; --accent:#6b9ec6; --positive:#a0af54; --evening:#d0a215; --morning:#3aa99f; --hover:#282726; --selected:#404040; --moon-dark:#100f0f; --moon-light:#e6dcc1; --moon-outline:#575653; --font:"iA Writer Mono S","Plex Mono",ui-monospace,monospace; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:12px/1.6 var(--font); -webkit-font-smoothing:antialiased; }
button,input,select { font:inherit; color:inherit; }
button { cursor:pointer; background:transparent; border:1px solid var(--line); }
button:hover { background:var(--hover); }
button:disabled { opacity:.4; cursor:default; }
a { color:inherit; text-decoration:none; }
a:hover { color:var(--accent); }
button,a,input,select,summary { -webkit-tap-highlight-color:transparent; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
[hidden] { display:none !important; }
.page { max-width:1180px; padding:0 40px; margin:0 auto; }
.header { display:flex; align-items:center; gap:20px; min-height:100px; }
.brand { display:flex; align-items:center; font-size:19px; letter-spacing:-1px; }
.brand svg { fill:var(--accent); width:22px; height:22px; margin-right:11px; }
.brand-dot { color:var(--accent); }
.header-note { color:var(--muted); font-size:9px; letter-spacing:1px; }
.about-link { margin-left:auto; color:var(--muted); font-size:10px; }
.toolbar { display:flex; align-items:center; gap:28px; margin:18px 0 10px; padding:0; }
.toolbar label,.small-label { display:block; font-size:10px; color:var(--muted); margin:0 0 8px; }
.location-control { display:flex; flex:1; align-items:center; gap:18px; min-width:0; }
.location-control>div { flex:1; min-width:0; }
select { width:100%; max-width:100%; background:transparent; border:0; border-bottom:1px solid var(--line); padding:5px 0 8px; font-size:13px; cursor:pointer; }
select option,select optgroup { background:var(--bg); color:var(--text); }
.city-search { display:block; border:0; background:transparent; padding:7px 0 0; width:100%; font-size:10px; min-width:0; }
input::placeholder { color:var(--muted); opacity:.8; }
.city-search-status { font-size:9px; color:var(--accent); margin:5px 0 0; }
.text-button { border:0; padding:5px 0; color:var(--accent); font-size:10px; white-space:nowrap; }
.date-control { padding:0 0 17px 24px; }
.date-control input { width:150px; background:transparent; border:0; border-bottom:1px solid var(--line); padding:5px 0 8px; font-size:12px; }
input::-webkit-calendar-picker-indicator { opacity:.8; cursor:pointer; }
.outline-button { font-size:11px; padding:10px 13px; white-space:nowrap; margin-bottom:13px; border:0; }
.site-info { color:var(--muted); font-size:9px; margin:12px 0 48px; line-height:1.8; }
.site-info span { padding:0 7px; opacity:.65; }
.planning-layout { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(0,1fr); gap:48px; align-items:start; }
.calendar-section { min-width:0; }
.calendar-heading { display:flex; align-items:center; justify-content:space-between; gap:15px; min-height:42px; }
.calendar-heading h1 { font-size:18px; font-weight:400; margin:0; letter-spacing:-.5px; }
.month-nav { display:flex; align-items:center; gap:11px; }
.month-nav>span { font-size:11px; text-align:center; min-width:122px; }
.icon-button { width:32px; height:32px; border:0; padding:0; display:grid; place-items:center; font-size:16px; }
.calendar-key { margin:10px 0 28px; font-size:10px; color:var(--muted); }
.calendar-indicators { display:flex; gap:15px; }
.calendar-indicators>span { display:inline-flex; align-items:center; gap:5px; }
.period-indicator { font-style:normal; line-height:1; }
.period-indicator.evening { color:var(--evening); }
.period-indicator.morning { color:var(--morning); }
.period-indicator.full-night { color:var(--positive); }
.dot { display:inline-block; width:4px; height:4px; background:var(--positive); vertical-align:middle; margin-right:5px; }
.weekdays { display:grid; grid-template-columns:repeat(7,1fr); text-align:left; padding:0 9px; font-size:9px; color:var(--muted); margin-bottom:12px; }
.calendar { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:3px; }
.calendar-day { min-width:0; min-height:78px; padding:10px 8px; border:0; display:flex; flex-direction:column; gap:12px; text-align:left; position:relative; border-radius:3px; }
.calendar-day.selected { background:var(--selected); color:var(--text); }
.calendar-day:focus-visible { z-index:1; outline-offset:-3px; }
.calendar-day.outside { opacity:.45; }
.day-top { display:flex; align-items:center; justify-content:space-between; gap:3px; }
.day-number { font-size:11px; line-height:1.1; }
.calendar-day.today .day-number { color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
.mini-moon { display:block; width:16px; height:16px; flex-shrink:0; }
.mini-moon svg { width:100%; height:100%; }

.day-hours { font-size:10px; color:var(--muted); line-height:1.2; white-space:nowrap; }
.good .day-hours { color:var(--positive); }
.day-illumination { font-size:7px; color:var(--muted); line-height:1.2; }
.day-periods { display:flex; flex-direction:column; gap:2px; min-height:24px; justify-content:center; }
.day-period { display:flex; gap:3px; align-items:center; font-size:9px; line-height:1.2; white-space:nowrap; font-variant-numeric:tabular-nums; }
.day-period.evening { color:var(--evening); }
.day-period.morning { color:var(--morning); }
.day-period.full-night { color:var(--positive); }
.calendar-day.selected .day-number { color:var(--accent); }
.calendar-day.selected .day-hours { color:var(--text); }
.calendar-day.selected.good .day-hours { color:var(--positive); }
.good-dot { position:absolute; right:6px; bottom:6px; width:3px; height:3px; background:var(--positive); }
.calendar-day.selected .good-dot { background:var(--positive); }
.calendar-footnote { color:var(--muted); font-size:9px; margin:13px 0 0; }
.night-card { padding:6px 0 0 30px; border-left:1px solid var(--line); min-width:0; }
.night-top { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.eyebrow { color:var(--muted); font-size:10px; margin:0; }
.badge { color:var(--positive); font-size:8px; white-space:nowrap; padding:3px 6px; border:1px solid var(--line); }
.badge.quiet { color:var(--muted); }
.night-card h2 { margin:10px 0 24px; font-size:21px; font-weight:400; letter-spacing:-.6px; line-height:1.4; }
.phase-summary { display:flex; gap:12px; align-items:center; padding-bottom:6px; }
.moon-graphic { width:38px; height:38px; flex-shrink:0; }
.moon-graphic svg { width:100%; height:100%; }
.phase-summary h3 { font-size:11px; font-weight:400; margin:0; }
.muted { font-size:9px; color:var(--muted); line-height:1.8; margin:4px 0 0; }
.window-summary { padding:28px 0; }
.small-label { font-size:10px; }
.big-duration { font-size:36px; letter-spacing:-1.6px; line-height:1.2; margin:10px 0 20px; color:var(--positive); font-weight:400; font-variant-numeric:tabular-nums; }
.big-duration small { font-size:18px; margin-right:5px; letter-spacing:0; }
.window-times { display:flex; gap:15px 23px; flex-wrap:wrap; min-height:38px; font-size:11px; font-variant-numeric:tabular-nums; }
.observing-window { display:flex; flex-direction:column; gap:5px; }
.window-period { display:flex; align-items:center; gap:4px; font-size:9px; }
.window-duration { margin-left:4px; color:var(--positive); }
.window-summary>.muted { margin-top:11px; font-size:8px; }
.day-offset { vertical-align:middle; font-size:7px; margin-left:2px; color:var(--muted); }
.event-period { padding-top:16px; margin:0; font-size:9px; color:var(--muted); }
.event-period span { letter-spacing:0; }
.event-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px 10px; padding:13px 0; }
.event-label { display:block; font-size:8px; color:var(--muted); margin-bottom:4px; }
.event-icon { color:var(--accent); margin-right:4px; }
.moon-event .event-icon { color:var(--morning); }
.event-value { font-size:16px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.no-event { font-size:10px; color:var(--muted); }
.sunset-comparison { font-size:8px; color:var(--muted); margin:12px 0 14px; line-height:1.7; }
summary { cursor:pointer; font-size:10px; }
summary::marker { color:var(--accent); font-size:8px; }
.night-timeline { border-top:1px solid var(--line); margin:0; padding:16px 0 0; }
.night-timeline summary>span { display:block; margin:4px 0 0 12px; color:var(--muted); font-size:8px; }
.timeline-panel { padding-top:15px; }
.timeline { display:grid; grid-template-columns:29px 1fr; gap:6px 8px; }
.track-label { font-size:8px; color:var(--muted); }
.track { height:10px; position:relative; overflow:hidden; background:var(--bg); }
.sun-track { background:#575653; }
.segment { position:absolute; height:100%; min-width:.25px; }
.segment.dark { background:var(--bg); }
.segment.sunlight,.swatch.sunlight { background:#cecdc3; }
.swatch.twilight { background:#575653; }
.segment.moonlight,.swatch.moonlight { background:var(--accent); }
.segment.clear,.swatch.clear { background:var(--positive); }
.timeline-ticks { position:relative; height:16px; }
.timeline-tick { position:absolute; color:var(--muted); font-size:7px; transform:translateX(-50%); white-space:nowrap; }
.timeline-tick:first-child { transform:none; }
.timeline-tick:last-child { transform:translateX(-100%); }
.legend { display:flex; gap:6px 10px; flex-wrap:wrap; margin-top:9px; }
.legend>span { font-size:7px; color:var(--muted); display:inline-flex; align-items:center; gap:4px; }
.swatch { display:inline-block; width:5px; height:5px; }
.method { border-top:1px solid var(--line); margin-top:48px; padding:18px 0; }
.method summary { color:var(--muted); }
.method-details { max-width:800px; padding:8px 0 0; font-size:10px; color:var(--muted); }
.method-details p { margin:12px 0 0; line-height:1.8; }
.method-details a { text-decoration:underline; text-underline-offset:3px; }
footer { display:flex; justify-content:space-between; gap:15px; padding:8px 0 28px; color:var(--muted); font-size:9px; }
dialog { width:430px; max-width:calc(100vw - 30px); max-height:calc(100dvh - 30px); background:var(--surface); color:var(--text); border:1px solid var(--accent); padding:24px; }
dialog::backdrop { background:#100f0fe6; }
.dialog-heading { display:flex; justify-content:space-between; align-items:center; gap:15px; margin-bottom:20px; }
.dialog-heading h2 { margin:0; font-size:17px; font-weight:400; }
dialog label { display:block; color:var(--muted); font-size:10px; margin:13px 0 5px; }
dialog input { width:100%; border:1px solid var(--line); padding:8px 10px; background:var(--bg); font-size:12px; }
.coordinate-fields { display:grid; grid-template-columns:1fr 1fr; gap:13px; }
.input-hint { font-size:9px; color:var(--muted); line-height:1.8; }
.primary-button { width:100%; background:var(--accent); color:#100f0f; border:0; padding:11px; margin-top:15px; font-size:11px; }
.primary-button:hover { background:#8fb1d0; }
.error,.noscript { padding:10px; border:1px solid #d14d41; color:#e99b93; font-size:11px; }
.noscript { position:fixed; left:15px; right:15px; bottom:15px; background:var(--bg); }

.night-events { border-top:1px solid var(--line); padding:14px 0; }
summary { font-size:11px; color:var(--muted); }
@media (max-width:950px) {
  .page { padding:0 24px; }
  .planning-layout { gap:28px; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); }
  .calendar-heading { align-items:flex-start; flex-direction:column; gap:12px; }
  .month-nav { width:100%; justify-content:space-between; }
  .night-card { padding-left:24px; }
  .day-hours { font-size:9px; }
}
@media (max-width:700px) {
  .page { max-width:560px; padding:0 20px; }
  .header { min-height:80px; }
  .toolbar { display:grid; grid-template-columns:1fr auto; gap:20px; margin-top:10px; }
  .location-control { grid-column:1/-1; }
  .date-control { padding:0; }
  .outline-button { margin:0; align-self:end; }
  .site-info { margin:15px 0 32px; }
  .planning-layout { grid-template-columns:1fr; gap:36px; }
  .calendar-heading { flex-direction:row; align-items:center; flex-wrap:wrap; }
  .month-nav { width:auto; }
  .calendar-key { margin-bottom:24px; }
  .calendar-day { padding:8px 5px; min-height:72px; }
  .day-top { gap:2px; }
  .mini-moon { width:14px; height:14px; }
  .night-card { border:0; border-top:1px solid var(--line); padding:24px 0 0; }
  .night-card h2 { font-size:22px; }
  .method { margin-top:30px; }
}
@media (max-width:380px) {
  .page { padding:0 14px; }
  .calendar-day { padding:8px 4px; }
  .day-hours { font-size:8px; }
  .mini-moon { width:12px; height:12px; }
}
::selection { background:#403e3c; color:var(--text); }

/* The calendar and selected night share one viewport. */
.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; }
.page { height:100dvh; max-width:1200px; padding:32px; }
main { height:100%; display:flex; flex-direction:column; }
.toolbar { flex:none; margin:0 0 28px; gap:18px; }
.location-trigger { margin-right:auto; overflow:hidden; text-overflow:ellipsis; font-size:12px; text-align:left; }
.date-control { padding:0; }
.date-control input { border:0; padding:5px 0; }
.outline-button { margin:0; padding:8px; }
.planning-layout { flex:0 1 420px; height:420px; min-height:0; align-items:start; width:100%; max-width:980px; margin:0 auto; }
.calendar-section { display:flex; flex-direction:column; min-height:0; height:100%; max-height:480px; width:100%; }
.calendar-heading { flex:none; margin-bottom:24px; }
.calendar { flex:1; grid-auto-rows:1fr; min-height:0; }
.calendar-day { min-height:0; justify-content:center; gap:6px; }
.night-card { align-self:start; }
.night-card h2 { font-size:19px; margin:0 0 24px; }
.window-summary>.muted { display:none; }
.month-nav .icon-button { color:var(--accent); }
.observing-window.evening .window-period { color:var(--evening); }
.observing-window.morning .window-period { color:var(--morning); }
.observing-window.full-night .window-period { color:var(--positive); }
dialog .site-info { margin:12px 0; }
dialog .method { margin-top:16px; }
@media (max-width:950px) {
 .calendar-heading { flex-direction:column; align-items:stretch; }
}
@media (max-width:700px) {
 .page { padding:16px; max-width:560px; }
 .toolbar { display:flex; gap:8px; margin:0 0 18px; }
 .location-trigger { font-size:10px; min-width:0; }
 .date-control input { width:117px; font-size:10px; }
 .outline-button { font-size:10px; padding:6px 0; }
 .planning-layout { display:flex; flex:0 1 550px; height:550px; flex-direction:column; gap:18px; justify-content:flex-start; }
 .calendar-section { flex:0 1 390px; height:auto; max-height:390px; }
 .calendar-heading { flex-direction:row; align-items:center; gap:8px; margin-bottom:14px; }
 .calendar-heading h1 { font-size:15px; }
 .month-nav { gap:2px; }
 .month-nav>span { min-width:100px; font-size:10px; }
 .icon-button { width:26px; height:28px; }
 .weekdays { margin-bottom:5px; font-size:8px; }
 .calendar-day { padding:4px; gap:4px; }
 .day-period { font-size:8px; gap:2px; }
 .day-periods { min-height:22px; }
 .night-card { align-self:stretch; flex:none; height:200px; padding:10px 0 0; display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-rows:28px 34px 28px minmax(0,1fr); gap:6px 12px; }
 .night-card h2 { grid-column:1; grid-row:1; font-size:12px; line-height:1.4; margin:0; }
 .phase-summary { grid-column:1/-1; grid-row:2; gap:8px; padding:0; }
 .moon-graphic { width:26px; height:26px; }
 .phase-summary h3 { font-size:10px; }
 .phase-summary .muted { font-size:8px; }
 .window-summary { display:contents; }
 .window-summary .small-label { display:none; }
 .big-duration { grid-column:2; grid-row:1; font-size:20px; margin:0; white-space:nowrap; align-self:center; }
 .big-duration small { font-size:10px; }
 .window-times { grid-column:1/-1; grid-row:3; min-height:0; font-size:9px; gap:6px 12px; }
 .window-period { font-size:8px; }
 .observing-window { gap:1px; }
}
@media (max-width:380px) {
 .calendar-heading { min-height:0; margin-bottom:8px; gap:4px; }
 .calendar-day { padding:2px; gap:2px; }
 .day-period { font-size:7px; }
 .day-periods { min-height:19px; }
}
@media (max-height:600px) and (min-width:701px) {
 .page { padding:16px 24px; }
 .toolbar { margin-bottom:12px; }
 .night-card h2 { margin-bottom:12px; }
 .window-summary { padding:14px 0; }
 .big-duration { margin:6px 0 12px; font-size:28px; }
}


#location-dialog { width:470px; padding:20px; border-color:var(--line); background:var(--bg); }
#location-dialog .dialog-heading { margin-bottom:12px; }
#location-dialog .city-search { padding:10px 12px; font-size:12px; background:var(--surface); border:1px solid var(--line); }
.city-picker { position:relative; margin-bottom:12px; }
.city-results { position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:1100; display:flex; flex-direction:column; gap:2px; padding:4px; border:1px solid var(--line); background:var(--bg); }
.city-result { display:flex; justify-content:space-between; gap:12px; width:100%; padding:10px; border:0; border-radius:3px; text-align:left; font-size:11px; }
.city-result[aria-pressed="true"] { color:var(--accent); }
.city-empty { margin:12px 10px; color:var(--muted); font-size:11px; }
#location-dialog .coordinate-fields { gap:12px; }
#location-dialog .coordinate-fields>div { min-width:0; }
#location-dialog input { min-width:0; }
#location-dialog label { margin:10px 0 4px; }
#location-dialog .timezone-label { display:flex; align-items:center; justify-content:space-between; }
#auto-timezone { padding:0; font-size:10px; }
.location-map { height:170px; border:1px solid var(--line); background:var(--surface); }
.location-map.leaflet-container { font:11px/1.5 var(--font); }
.location-map .leaflet-control-attribution { background:#100f0fe6; color:var(--muted); font-size:9px; }
.location-map .leaflet-control-attribution a { color:var(--text); }
.location-map .leaflet-bar { border:1px solid var(--line); box-shadow:none; }
.location-map .leaflet-bar a { background:var(--bg); color:var(--text); border-color:var(--line); width:26px; height:26px; line-height:26px; }
.location-map .leaflet-bar a:hover { background:var(--hover); }
.location-pin { background:var(--accent); border:2px solid var(--bg); border-radius:50%; box-shadow:0 0 0 2px var(--text); }
.location-options { margin-top:12px; }
.location-options summary { font-size:10px; }
.location-options summary span { color:var(--muted); opacity:.7; }
#location-dialog .location-options input { width:110px; margin-top:8px; }
@media (max-height:650px) {
 #location-dialog { padding:16px; }
 .location-map { height:130px; }
 #location-dialog .dialog-heading { margin-bottom:10px; }
}

.timeline-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.timeline-heading h3 { font-size:11px; font-weight:400; margin:0; }
#timeline-period { color:var(--muted); font-size:8px; text-align:right; }
.legend a { font-size:7px; color:var(--muted); }
.legend>.project-links { margin-left:auto; gap:10px; }
.track { height:12px; }
.method-page { height:auto; display:block; max-width:720px; margin:0 auto; padding:32px 24px; }
.method-page h1 { font-size:20px; font-weight:400; margin:24px 0; }
.method-page .method-details { font-size:12px; }
@media (max-width:700px) {
 .night-timeline { grid-column:1/-1; grid-row:4; padding:8px 0 0; margin-top:2px; }
 .timeline-heading { margin-bottom:5px; }
 .timeline-heading h3 { font-size:9px; }
 #timeline-period { font-size:7px; }
 .timeline { grid-template-columns:24px 1fr; gap:3px 6px; }
 .track { height:6px; }
 .track-label { font-size:7px; line-height:1; }
 .timeline-ticks { height:10px; }
 .timeline-tick { font-size:6px; }
 .legend { margin-top:4px; gap:3px 8px; }
 .legend>span,.legend a { font-size:6px; line-height:1.2; }
 .legend>span { gap:3px; }
 .legend>.project-links { gap:8px; }
 .swatch { width:4px; height:4px; }
}