body:has(.sunset-main) { overflow:hidden; }
body:has(.sunset-main) #app { height:calc(100dvh - var(--navbar-height)); min-height:0; }
#main-content.sunset-main { padding:0; flex:1; min-height:0; display:flex; }
body:has(.sunset-main) .admin-footer { display:none; }
.sunset-page { margin:0; width:100%; height:100%; min-width:0; }
.sunset-map-shell { position:relative; isolation:isolate; border:1px solid #ccc; border-radius:.5rem; overflow:hidden; background:#d8dce0; }
#sunset-map { height:100%; width:100%; cursor:crosshair; }
.sunset-map-shell { height:100%; border:0; border-radius:0; }
.sunset-map-shell { --sun-panel:var(--surface-card); --sun-border:var(--border-subtle-color); --sun-text:var(--text-primary); }
html[data-theme="dark"] .sunset-map-shell { border-color:var(--border-subtle-color); background:var(--surface-card); }
.sunset-panel, .sunset-year { position:absolute; z-index:800; background:var(--sun-panel); color:var(--sun-text); border:1px solid var(--sun-border); border-radius:.5rem; box-shadow:0 3px 16px #0002; }
.sunset-panel { right:12px; top:12px; width:290px; max-width:calc(100% - 72px); padding:.875rem; font-size:.8125rem; overflow-x:hidden; }
.sunset-panel, .sunset-panel *, .sunset-year, .sunset-year * { box-sizing:border-box; }
.sunset-panel header { display:flex; justify-content:space-between; align-items:center; gap:.5rem; margin-bottom:.65rem; }
.sunset-panel h2 { font-size:.9375rem; margin:0; }
.sunset-panel select, .sunset-panel input { font-size:.8125rem; }
.sunset-panel .input, .sunset-panel .sunset-select, .sunset-panel .button { height:2.25rem; font-family:inherit; font-size:inherit; line-height:1.25; border-radius:var(--bulma-radius); }
.sunset-panel .input, .sunset-panel .sunset-select { padding:.4rem .6rem; background:var(--surface-elevated); color:var(--sun-text); border:1px solid var(--sun-border); }
.sunset-panel .sunset-select { padding-right:1.75rem; }
.sunset-panel label { margin-bottom:.25rem; }
.sunset-results { margin:.6rem 0 0; font-size:inherit; }
.sunset-results > div { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.5fr); gap:.4rem; padding:.35rem 0; }
.sunset-results dt, .sunset-results dd { min-width:0; overflow-wrap:anywhere; }
.sunset-results dt { font-weight:400; }
.sunset-results dd { margin:0; text-align:right; font-variant-numeric:tabular-nums; }
.sunset-overview > div { grid-template-columns:max-content minmax(0,1fr); }
.sunset-overview dt, .sunset-overview dd { white-space:nowrap; overflow-wrap:normal; }
.sunset-rise { color:#d58b00; } .sunset-set { color:#ec6438; }
html[data-theme="dark"] .sunset-rise { color:#ffd166; } html[data-theme="dark"] .sunset-set { color:#ff9466; }
.sunset-mode-list { display:flex; flex-direction:column; gap:.25rem; margin-top:.6rem; }
.sunset-mode-list { max-height:300px; overflow-y:auto; }
.sunset-panel { max-height:calc(100% - 175px); overflow-y:auto; }
.sunset-mode-row { border-left:3px solid; padding-left:.35rem; }
.sunset-mode-header { display:flex; align-items:center; gap:.25rem; min-width:0; }
.sunset-mode-details { padding:.15rem .35rem .5rem; font-size:.75rem; }
.sunset-mode-details[hidden] { display:none; }
.sunset-mode-details .sunset-results { margin:0; }
.sunset-mode-details .sunset-results > div { grid-template-columns:minmax(0,1fr) minmax(0,1.4fr); }
.sunset-mode-details dd { overflow-wrap:anywhere; }
.sunset-mode-row button:first-child { flex:1; min-width:0; white-space:normal; overflow-wrap:anywhere; text-align:left; font-size:.75rem; padding:.2rem; color:inherit; }
.sunset-mode-row[aria-current="true"] { background:color-mix(in srgb, var(--bulma-primary) 10%, transparent); }
.sunset-remove { flex-shrink:0; border:0; background:transparent; color:inherit; font-size:1.2rem; line-height:1; cursor:pointer; padding:.4rem; }
.sunset-status { margin:.65rem 0 0; font-size:.75rem; opacity:.8; }
.sunset-year { width:66.6667%; left:50%; bottom:32px; transform:translateX(-50%); padding:.75rem 1rem .6rem; }
.sunset-year-toolbar { display:flex; justify-content:space-between; align-items:center; gap:.5rem; margin-bottom:.35rem; }
.sunset-date { width:145px; font-size:.8125rem; padding:.2rem .4rem; }
.sunset-year-label { font-size:.8125rem; font-weight:600; }
.sunset-months { position:relative; height:1.2rem; margin:0 8px; font-size:.65rem; opacity:.7; }
.sunset-months span { position:absolute; transform:translateX(-50%); }
.sunset-year input[type="range"] { width:100%; display:block; accent-color:#3295ff; }
.sunset-legend { display:flex; justify-content:center; gap:.8rem; font-size:.7rem; margin-top:.4rem; }
.sunset-legend span::before { content:""; display:inline-block; width:19px; border-top:2px solid; margin-right:.3rem; vertical-align:middle; }
.sunset-legend span:last-child::before { border-top-style:dashed; }
.sunset-menu { background:var(--aside-background-color); color:var(--bulma-menu-label-color); min-width:235px; border-radius:var(--bulma-radius); overflow:hidden; font-family:var(--family-sans-serif); font-size:.875rem; font-weight:400; }
.sunset-menu-heading { display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:.4rem .5rem .4rem .75rem; background:var(--aside-tools-background-color); border-bottom:1px solid var(--sun-border); font-size:.8125rem; font-weight:400; }
.sunset-menu-actions { padding:.3rem; }
.sunset-menu-actions button { display:flex; align-items:center; gap:.6rem; width:100%; padding:.5rem .6rem; border:0; border-radius:var(--bulma-radius); background:transparent; color:inherit; text-align:left; font:inherit; font-weight:400; }
.sunset-menu-close { display:flex; align-items:center; justify-content:center; flex-shrink:0; width:1.75rem; height:1.75rem; padding:0; border:0; border-radius:var(--bulma-radius); background:transparent; color:var(--text-secondary); font-size:1.125rem; cursor:pointer; }
.sunset-add-popup .leaflet-popup-content-wrapper { background:var(--aside-background-color); border:var(--light-border); border-radius:var(--bulma-radius); }
.sunset-menu button:hover, .sunset-menu button:focus-visible { background:var(--bulma-menu-item-hover-background-color); color:var(--bulma-menu-item-hover-color); outline:none; }
.sunset-map-shell .leaflet-popup-content-wrapper { background:var(--sun-panel); color:var(--sun-text); padding:0; }
.sunset-map-shell .leaflet-popup-content { margin:0; }
.sunset-map-shell .leaflet-popup-tip { background:var(--sun-panel); }
.sunset-click-marker { background:var(--bulma-primary); border:2px solid white; border-radius:50%; box-shadow:0 1px 5px #0008; }
.sunset-endpoint { display:flex; align-items:center; justify-content:center; background:transparent; border:0; box-shadow:none; }
.sunset-endpoint-symbol { position:relative; display:block; width:22px; height:22px; }
.sunset-endpoint iconify-icon { display:block; font-size:22px; pointer-events:none; }
.sunset-endpoint .sunset-target-center { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:10px; }
.sunset-endpoint.leaflet-marker-draggable { cursor:grab; }
.sunset-endpoint.leaflet-marker-draggable:active { cursor:grabbing; }
.sunset-note { font-size:.75rem; opacity:.65; margin:.6rem 0 0; }
html[data-theme="dark"] .sunset-date { background-color:#333; color:#eee; border-color:#666; color-scheme:dark; }

.sunset-panel summary { cursor:pointer; list-style:none; display:flex; align-items:center; gap:.4rem; }
.sunset-panel summary::-webkit-details-marker { display:none; }
.sunset-panel summary > iconify-icon { margin-left:auto; flex-shrink:0; font-size:1rem; }
.sunset-panel details[open] > summary > iconify-icon { transform:rotate(90deg); }
@media (max-width:767px) {
  .sunset-panel { width:250px; padding:.65rem; right:8px; top:8px; }
  .sunset-year { width:calc(100% - 24px); padding:.6rem .7rem; }
  .sunset-months { font-size:.6rem; }
  .sunset-legend { gap:.5rem; font-size:.6rem; }
  .sunset-year-toolbar { flex-wrap:wrap; }
}

.sunset-select { display:block; width:100%; max-width:100%; min-width:0; padding:.4rem .6rem; border:1px solid var(--sun-border); border-radius:var(--bulma-radius); background:var(--surface-elevated); color:var(--sun-text); }
.sunset-selection-button { display:flex; align-items:center; gap:.25rem; border:0; background:transparent; cursor:pointer; font:inherit; }
.sunset-selection-button > iconify-icon { flex-shrink:0; font-size:1rem; }
.sunset-selection-label { min-width:0; }
.sunset-date-controls { display:flex; align-items:center; gap:.35rem; }
.sunset-panel label { display:inline-block; }
.sunset-year input[type="range"] { accent-color:var(--bulma-primary); }
.sunset-map-shell { border-color:var(--border-subtle-color); border-radius:0; }
.sunset-panel, .sunset-year { border-radius:var(--bulma-radius-large); }
.sunset-location-search { position:relative; display:flex; align-items:stretch; gap:.4rem; min-width:0; }
.sunset-location-search .input { flex:1; width:0; min-width:0; }
#sunset-locate { flex:0 0 2.25rem; width:2.25rem; padding:0; }
.sunset-location-results { position:absolute; top:100%; left:0; right:0; z-index:2; max-height:220px; overflow-y:auto; border:1px solid var(--sun-border); background:var(--surface-elevated); border-radius:var(--bulma-radius); box-shadow:0 4px 12px #0003; }
.sunset-location-results button { display:block; width:100%; padding:.6rem; background:transparent; border:0; color:var(--sun-text); text-align:left; white-space:normal; overflow-wrap:anywhere; font:inherit; cursor:pointer; }
.sunset-location-results button:hover, .sunset-location-results button[aria-selected="true"] { background:var(--surface-card); color:var(--bulma-primary); }
.sunset-location-status { font-size:.75rem; margin:.25rem 0 .5rem; color:var(--text-secondary); }
.sunset-panel .sunset-note { font-size:.65rem; }