/* Veille céleste — thème « verre liquide » teinté vert sur le ciel vivant (js/backdrop.js).
   --glass-a (set by the backdrop) raises the panels' opacity when the sky behind them is bright. */

:root{--glass-a:.42}
body[data-daypart]{--surface:rgba(16,46,35,.36);--surface-high:rgba(8,26,19,.5);--control:rgba(2,12,8,.45);--edge:rgba(165,230,200,.2);--ink-ui:#f1f8f4;--muted-ui:#bfd4c8;color:var(--ink-ui)}

/* Living sky behind the page. */
.backdrop{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:#04090c}
#bdSky,#bdPrecip{position:absolute;inset:0;width:100%;height:100%}
#bdClouds{position:absolute;top:0;left:0;width:200vw;height:100%;animation:bd-drift 360s linear infinite}
@keyframes bd-drift{to{transform:translateX(-100vw)}}
.bd-fog{position:absolute;inset:0;opacity:0;background:linear-gradient(to top,rgba(205,214,218,.75),rgba(205,214,218,.25) 55%,rgba(205,214,218,.08));transition:opacity 1.2s}
.bd-tint{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 0%,transparent 35%,rgba(2,12,8,.35)),linear-gradient(rgba(8,34,24,.16),rgba(8,34,24,.16))}
body::before{display:none}
@media(prefers-reduced-motion:reduce){#bdClouds{animation:none}}

/* Glass panels. */
body[data-daypart] .top,body[data-daypart] .panel{
  border:1px solid rgba(175,240,210,.2);
  background:linear-gradient(150deg,rgba(20,58,44,calc(var(--glass-a) + .08)),rgba(5,20,14,var(--glass-a)) 70%);
  -webkit-backdrop-filter:blur(24px) saturate(150%);backdrop-filter:blur(24px) saturate(150%);
  box-shadow:0 24px 60px rgba(0,8,5,.32),inset 0 1px 0 rgba(255,255,255,.16),inset 0 -1px 0 rgba(255,255,255,.04);
  transition:background .6s ease}
body[data-daypart] .panel::before,body[data-daypart] .top::after{background:linear-gradient(90deg,transparent,rgba(190,255,225,.55),transparent)}
body[data-daypart] .field input,body[data-daypart] .field select,body[data-daypart] .weather-state select{background:var(--control);border-color:var(--edge)}
body[data-daypart] .chip{background:rgba(16,46,35,.4);border-color:var(--edge)}
body[data-daypart] .chip.active{background:linear-gradient(135deg,rgba(105,185,165,.42),rgba(105,185,165,.18));border-color:var(--mint)}
.obj-viewer{border-color:rgba(175,240,210,.2);background:linear-gradient(150deg,rgba(20,58,44,calc(var(--glass-a) + .1)),rgba(5,20,14,calc(var(--glass-a) + .04)) 70%);-webkit-backdrop-filter:blur(24px) saturate(150%);backdrop-filter:blur(24px) saturate(150%);box-shadow:0 24px 60px rgba(0,8,5,.32),inset 0 1px 0 rgba(255,255,255,.16)}
.obj-viewer.is-pinned{border-color:var(--mint)}
@media(max-width:900px){.obj-viewer{background:rgba(5,20,15,.82)}}
.obj-dialog{background:rgba(6,22,16,.72);-webkit-backdrop-filter:blur(24px) saturate(150%);backdrop-filter:blur(24px) saturate(150%);border-color:rgba(175,240,210,.22)}
.sky-stat,.loc-pin{background:rgba(16,46,35,.4)}

/* Time slider (settings bar, right of the place): the track is the colour of the sky over the 24 hours. */
.timebar{flex:1 1 320px;min-width:260px;display:flex;flex-direction:column;gap:5px}
.timebar-top{display:flex;justify-content:space-between;align-items:center;gap:9px;font-size:14px;font-weight:650;color:var(--ink-ui);font-variant-numeric:tabular-nums}
.timebar-track{position:relative;height:22px}
.timebar-range{-webkit-appearance:none;appearance:none;display:block;width:100%;height:22px;margin:0;background:transparent;cursor:grab}
.timebar-range:active{cursor:grabbing}
.timebar-range::-webkit-slider-runnable-track{height:10px;border-radius:999px;background:var(--track,#183028);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),0 2px 12px rgba(0,0,0,.3)}
.timebar-range::-moz-range-track{height:10px;border-radius:999px;background:var(--track,#183028);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),0 2px 12px rgba(0,0,0,.3)}
.timebar-range::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;margin-top:-4px;border:0;border-radius:50%;background:var(--thumb);box-shadow:var(--thumb-glow);transition:box-shadow .3s}
.timebar-range::-moz-range-thumb{width:18px;height:18px;border:0;border-radius:50%;background:var(--thumb);box-shadow:var(--thumb-glow)}
.timebar-range:focus-visible{outline:none}
.timebar-range:focus-visible::-webkit-slider-thumb{outline:2px solid var(--mint);outline-offset:3px}
.timebar-range[data-body="sun"]{--thumb:radial-gradient(circle,#fffdf0 0 38%,#ffd46e 42% 100%);--thumb-glow:0 0 0 2px rgba(255,255,255,.55),0 0 18px 5px rgba(255,196,90,.75)}
.timebar-range[data-body="twilight"]{--thumb:radial-gradient(circle,#ffe2c4 0 30%,#ff9a6a 36% 100%);--thumb-glow:0 0 0 2px rgba(255,255,255,.45),0 0 16px 4px rgba(255,130,110,.6)}
.timebar-range[data-body="moon"]{--thumb:var(--moon-icon,radial-gradient(circle at 72% 30%,#13213a 0 46%,transparent 48%),#f3eedf);--thumb-glow:0 0 0 2px rgba(255,255,255,.35),0 0 16px 4px rgba(170,195,255,.45)}
.timebar-now{position:absolute;top:3px;width:2px;height:16px;margin-left:-1px;border-radius:1px;background:rgba(255,255,255,.9);box-shadow:0 0 6px rgba(255,255,255,.8);pointer-events:none}
.timebar-now[hidden]{display:none}
.timebar-foot{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--muted-ui);font-variant-numeric:tabular-nums}
.timebar-live{padding:2px 10px;border:1px solid var(--edge);border-radius:999px;background:rgba(2,12,8,.4);color:var(--muted-ui);font:inherit;font-size:11px;font-weight:750;cursor:pointer}
.timebar-live:hover{border-color:var(--mint);color:var(--ink-ui)}
.timebar-live.is-live{color:#a6f0cb;border-color:rgba(105,185,165,.6)}

@media(max-width:760px){
  .timebar{flex-basis:100%}
}

/* Light on the glass (js/glint.js): a glint on the edge facing the Sun or Moon, with a faint
   cool/warm refraction fringe, and a soft sheen just inside that edge. */
:root{--glint-core:rgba(220,235,255,.3);--glint-cool:transparent;--glint-warm:transparent;--glint-sheen:transparent}
body[data-daypart] .top::before,body[data-daypart] .panel::before,.obj-viewer::before{
  content:"";position:absolute;inset:0;left:0;right:0;top:0;height:auto;border-radius:inherit;pointer-events:none;
  background:radial-gradient(circle at var(--glint-x,50%) var(--glint-y,0%),var(--glint-sheen),transparent 42%);mix-blend-mode:screen;opacity:1}
body[data-daypart] .top::after,body[data-daypart] .panel::after,.obj-viewer::after{
  content:"";position:absolute;inset:-1px;left:-1px;right:-1px;bottom:-1px;height:auto;padding:1.5px;border-radius:inherit;pointer-events:none;opacity:1;
  background:conic-gradient(from calc(var(--glint-angle,0deg) - 75deg),transparent 0deg,var(--glint-cool) 48deg,var(--glint-core) 75deg,var(--glint-warm) 102deg,transparent 150deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.obj-viewer{isolation:isolate}

/* Visual effects switched off in the settings: still clouds, no glint. */
.no-effects #bdClouds{animation:none}
.no-effects .top::before,.no-effects .top::after,.no-effects .panel::before,.no-effects .panel::after,.no-effects .obj-viewer::before,.no-effects .obj-viewer::after{display:none}

/* Settings menu (top right of the header). */
/* The header holds the settings menu: it sits above the glass panels below it. */
body[data-daypart] .top{z-index:30}
.top-actions{position:relative;margin-left:auto;align-self:flex-start}
.settings-open{display:grid;place-items:center;width:42px;height:42px;padding:0;border:1px solid var(--edge);border-radius:13px;background:rgba(2,12,8,.35);color:var(--muted-ui);cursor:pointer;transition:border-color .15s,color .15s,transform .3s}
.settings-open:hover,.settings-open[aria-expanded="true"]{border-color:var(--mint);color:var(--ink-ui)}
.settings-open[aria-expanded="true"] svg{transform:rotate(60deg)}
.settings-open svg{width:20px;height:20px;transition:transform .3s}
.settings-dialog{width:min(460px,calc(100% - 32px))}
.settings-body{display:grid;gap:14px}
.set-row{display:grid;gap:5px;font-size:13px;color:var(--ink-ui)}
.set-row > span{display:flex;align-items:baseline;gap:6px;font-weight:650}
.set-row > span b{margin-left:auto}
.set-row b{color:var(--mint);font-variant-numeric:tabular-nums}
.set-row small{font-size:12px;font-weight:400;line-height:1.4;color:var(--muted-ui)}
.set-row select{height:36px;padding:0 9px;border:1px solid var(--edge);border-radius:10px;background:var(--control);color:var(--ink-ui);font:inherit;font-size:13px}
.set-range input{width:100%;accent-color:var(--mint)}
.set-switch{grid-template-columns:1fr auto;align-items:center}
.set-switch > span{flex-direction:column;justify-content:flex-start;gap:2px}
.set-switch input{width:20px;height:20px;accent-color:var(--mint)}
.set-danger{padding-top:10px;border-top:1px solid var(--edge)}
.set-danger button{justify-self:start;padding:8px 12px;border:1px solid rgba(255,159,145,.5);border-radius:10px;background:none;color:var(--rose,#ff9f91);font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.set-danger button:hover{background:rgba(255,159,145,.12)}
.set-buttons{display:flex;gap:8px}
.set-buttons button{flex:1;height:34px;border:1px solid var(--edge);border-radius:10px;background:rgba(16,46,35,.4);color:var(--ink-ui);font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.set-buttons button:hover{border-color:var(--mint)}
.set-status{color:var(--rose,#ff9f91)!important}
.set-status:empty{display:none}

/* Night picker and calendar in the time bar. */
.timebar-top{justify-content:flex-start}
.timebar-top #nowText{margin-left:auto;font-variant-numeric:tabular-nums}
.day-picker{position:relative;display:flex;align-items:center;gap:2px}
.day-step,.day-open{height:28px;border:1px solid var(--edge);background:rgba(2,12,8,.4);color:var(--ink-ui);font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.day-step{width:26px;padding:0;border-radius:8px;font-size:16px;line-height:1}
.day-open{display:inline-flex;align-items:center;gap:6px;padding:0 10px;border-radius:9px}
#dayLabel{display:inline-block}
#dayLabel::first-letter{text-transform:uppercase}
.day-open svg{width:14px;height:14px;color:var(--mint)}
.day-step:hover,.day-open:hover,.day-open[aria-expanded="true"]{border-color:var(--mint)}
.day-open.is-other{border-color:#ffd46e;color:#ffe3a3}
.calendar{position:absolute;z-index:50;top:calc(100% + 8px);left:0;width:286px;padding:12px;border:1px solid rgba(175,240,210,.22);border-radius:16px;background:rgba(6,22,16,.94);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:0 20px 50px rgba(0,0,0,.5)}
.calendar[hidden]{display:none}
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;text-transform:capitalize}
.cal-nav{width:28px;height:28px;border:1px solid var(--edge);border-radius:8px;background:none;color:var(--ink-ui);font-size:16px;cursor:pointer}
.cal-nav:hover{border-color:var(--mint)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.cal-dow{text-align:center;font-size:11px;font-weight:700;color:var(--muted-ui);text-transform:uppercase}
.cal-day{display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px 0 5px;border:1px solid transparent;border-radius:9px;background:none;color:var(--ink-ui);font:inherit;font-size:12px;font-weight:650;font-variant-numeric:tabular-nums;cursor:pointer}
.cal-day:hover{border-color:var(--edge);background:rgba(105,185,165,.1)}
.cal-day.is-today{border-color:rgba(105,185,165,.6)}
.cal-day.is-selected{background:rgba(105,185,165,.3);border-color:var(--mint)}
.cal-tonight{width:100%;margin-top:8px;height:32px;border:1px solid var(--edge);border-radius:10px;background:rgba(16,46,35,.4);color:var(--ink-ui);font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.cal-tonight:hover{border-color:var(--mint)}

/* Calendar indications: moonless dark hours (bar), forecast clouds (dot), best nights (star). */
.cal-day{position:relative}
.cal-bar{display:block;width:70%;height:3px;border-radius:2px;background:linear-gradient(90deg,var(--mint) calc(var(--f,0) * 100%),rgba(255,255,255,.1) 0)}
.cal-cloud{position:absolute;top:3px;right:3px;width:6px;height:6px;border-radius:50%}
.cal-cloud.is-clear,.cal-big-clouds.is-clear::before{background:#7fe0a8}
.cal-cloud.is-mixed,.cal-big-clouds.is-mixed::before{background:#ffd46e}
.cal-cloud.is-cloudy,.cal-big-clouds.is-cloudy::before{background:#9aa3b2}
.cal-star{position:absolute;top:1px;left:3px;font-size:9px;color:#ffd46e}
.cal-foot{display:flex;gap:6px}
.cal-foot .cal-tonight{flex:1}

/* Large calendar. */
.cal-big{width:min(1100px,calc(100% - 24px));max-height:calc(100vh - 32px);overflow:auto}
.cal-big .cal-head{margin:4px 0 8px}
.cal-big-legend{margin:0 0 10px;font-size:12px;line-height:1.5;color:var(--muted-ui)}
.cal-big-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.cal-big-grid .cal-dow{padding-bottom:2px}
.cal-big-day{position:relative;display:flex;flex-direction:column;gap:3px;min-height:118px;padding:7px 8px;border:1px solid var(--edge);border-radius:12px;background:rgba(16,46,35,.3);color:var(--ink-ui);font:inherit;text-align:left;cursor:pointer}
.cal-big-day:hover{border-color:var(--mint)}
.cal-big-day.is-today{border-color:rgba(105,185,165,.7)}
.cal-big-day.is-selected{background:rgba(105,185,165,.22);border-color:var(--mint)}
.cal-big-head{display:flex;align-items:center;gap:6px}
.cal-big-head strong{font-size:15px;font-variant-numeric:tabular-nums}
.cal-big-head small{font-size:11px;color:var(--muted-ui)}
.cal-big-moon{display:grid}
.cal-big-head .cal-star{position:static;margin-left:auto;font-size:13px}
.cal-big-line{font-size:11px;line-height:1.35;color:var(--muted-ui);font-variant-numeric:tabular-nums}
.cal-big-moonless{display:grid;gap:2px;color:var(--ink-ui)}
.cal-big-moonless .cal-bar{width:100%}
.cal-big-clouds::before{content:"";display:inline-block;width:7px;height:7px;margin-right:5px;border-radius:50%}
.cal-big-objects{list-style:none;margin:3px 0 0;padding:0;display:grid;gap:2px}
.cal-big-objects li{display:grid;grid-template-columns:minmax(0,1fr) 34% auto;align-items:center;gap:4px;font-size:10.5px;color:var(--muted-ui)}
.cal-big-objects span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cal-big-objects i{height:4px;border-radius:2px;background:linear-gradient(90deg,var(--c) calc(var(--f,0) * 100%),rgba(255,255,255,.08) 0)}
.cal-big-objects small{font-size:10px;font-variant-numeric:tabular-nums}
@media(max-width:760px){.cal-big-grid{grid-template-columns:1fr}.cal-big-grid .cal-dow,.cal-big-grid > span:empty{display:none}.cal-big-day{min-height:0}}

/* Month charts in the large calendar. */
.cal-viz-wrap{display:grid;gap:10px;margin-bottom:12px}
.cal-viz{margin:0;padding:10px;border:1px solid var(--edge);border-radius:14px;background:rgba(2,12,8,.35)}
.cal-viz-svg{display:block;width:100%;height:auto}
.cal-viz figcaption{margin-top:6px;font-size:12px;line-height:1.45;color:var(--muted-ui)}
.cal-viz-col{cursor:pointer}
.cal-viz-col:hover rect:first-child{filter:brightness(1.4)}
.cal-viz-selected{fill:none;stroke:var(--mint);stroke-width:1.5}
.cal-viz-hour{stroke:rgba(255,255,255,.12);stroke-width:.6}
.cal-viz-label,.cal-viz-day,.cal-viz-name{fill:var(--muted-ui);font-size:9px;font-weight:600}
.cal-viz-label,.cal-viz-name{text-anchor:end}
.cal-viz-name{fill:var(--ink-ui);font-size:10px}
.cal-viz-day,.cal-viz-star{text-anchor:middle}
.cal-viz-star{fill:#ffd46e;font-size:9px}

/* The little house in the header (js/hamlet.js). */
.hamlet{flex:1 1 auto;display:flex;justify-content:center;align-self:stretch;min-width:0;margin:-6px 0 -10px;pointer-events:auto}
.hamlet[hidden]{display:none}
.hamlet svg{height:104px;width:auto;max-width:100%;overflow:visible;-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
.hm-road{fill:none;stroke:#0e1d16;stroke-width:5;stroke-linecap:round}
.hm-wall{fill:#e9dcc6}.hm-roof{fill:#a4523f}.hm-chimney{fill:#8a4535}.hm-door{fill:#6b4a35}
.hm-window{fill:#3a4658;transition:fill 1.6s}
.hm-halo{fill:url(#hmGlow);opacity:0;transition:opacity 1.6s}
.lights-on .hm-window{fill:#ffd690}
.lights-on .hm-halo{opacity:1}
.night .hm-wall{fill:#7c7568}.night .hm-roof{fill:#5f3a32}.night .hm-chimney{fill:#55322a}.night .hm-door{fill:#3f2d22}
.hm-house,.hm-hill,.hm-car{transition:fill 1.6s}
.hm-smoke circle,.hm-exhaust circle{fill:rgba(230,236,240,.55);opacity:0}
.smoking .hm-smoke circle{animation:hm-smoke 5.4s ease-out infinite}
.smoking .hm-smoke circle:nth-child(2){animation-delay:1.8s}
.smoking .hm-smoke circle:nth-child(3){animation-delay:3.6s}
@keyframes hm-smoke{0%{opacity:0;transform:translate(0,0) scale(.6)}15%{opacity:.8}100%{opacity:0;transform:translate(9px,-22px) scale(2.4)}}
.hm-car-track{transform:translate(124px,57px)}
.hm-body{fill:#d9584a}.hm-glass{fill:#bfe2f0}.hm-wheel{fill:#1c2126}
.night .hm-body{fill:#8e3a32}.night .hm-glass{fill:#5c7380}
.hm-car{transition:none}
.car-away .hm-car{transform:translate(150px,-6px);opacity:0}
.leaving .hm-car{animation:hm-leave 4s ease-in forwards}
.arriving .hm-car{animation:hm-arrive 4s ease-out forwards}
@keyframes hm-leave{0%{transform:none;opacity:1}85%{opacity:1}100%{transform:translate(150px,-6px);opacity:0}}
@keyframes hm-arrive{0%{transform:translate(150px,-6px);opacity:0}15%{opacity:1}100%{transform:none;opacity:1}}
.leaving:not(.electric) .hm-exhaust circle,.arriving:not(.electric) .hm-exhaust circle{animation:hm-puff .9s ease-out 4}
.hm-exhaust circle:nth-child(2){animation-delay:.3s!important}
.hm-exhaust circle:nth-child(3){animation-delay:.6s!important}
@keyframes hm-puff{0%{opacity:0;transform:translate(0,0) scale(.5)}20%{opacity:.85}100%{opacity:0;transform:translate(-10px,-5px) scale(2)}}
.no-effects .hm-smoke circle,.no-effects .hm-exhaust circle{animation:none!important;opacity:0}
.no-effects .leaving .hm-car,.no-effects .arriving .hm-car{animation:none}
@media(prefers-reduced-motion:reduce){.hm-smoke circle,.hm-exhaust circle{animation:none!important}.leaving .hm-car,.arriving .hm-car{animation:none}}
@media(max-width:640px){.hamlet{display:none}}
.set-hamlet{display:grid;gap:8px}
.set-hamlet > span{font-weight:650}
.set-hamlet .set-switch{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px;font-size:13px;font-weight:400}
.set-hamlet .set-switch > span{display:flex;flex-direction:column;gap:2px}
.set-hamlet input[type=checkbox]{width:20px;height:20px;accent-color:var(--mint)}
.set-days{display:flex;flex-wrap:wrap;gap:4px}
.set-days .chip{padding:5px 9px;font-size:12px;text-transform:capitalize}

.set-hamlet select{height:32px;padding:0 8px;border:1px solid var(--edge);border-radius:9px;background:var(--control);color:var(--ink-ui);font:inherit;font-size:12px}
.cal-big-objects li.is-moonlit span{color:#ff9d8e}
/* Satellite passes (js/satellites.js) in the calendars. */
.cal-iss{position:absolute;bottom:7px;right:2px;font-size:7px;font-weight:800;letter-spacing:.02em;color:#d8e7ff;opacity:.85}
.cal-big-iss{color:#d8e7ff}
/* Red night mode (js/red-mode.js): a red layer turns what is under it grey (so green or blue text keeps
   its brightness) and multiplies it into red, over the page and over open dialogs (which sit above it
   in the top layer). */
.top-actions{display:flex;gap:8px}
.red-toggle[aria-pressed="true"]{border-color:#ff3b30;color:#ff6b60}
.red-layer{display:none;position:fixed;inset:0;z-index:2147483647;pointer-events:none;background:var(--red-level,#b30000);mix-blend-mode:multiply;-webkit-backdrop-filter:grayscale(1);backdrop-filter:grayscale(1)}
.red-mode .red-layer{display:block}
.red-mode dialog[open]::after{content:"";position:fixed;inset:0;z-index:2147483647;pointer-events:none;background:var(--red-level,#b30000);mix-blend-mode:multiply;-webkit-backdrop-filter:grayscale(1);backdrop-filter:grayscale(1)}
.red-mode dialog::backdrop{background:#0a0000e6}
.set-red{display:grid;gap:8px}
.set-red > span{font-weight:650}
.set-red .set-switch{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px;font-size:13px;font-weight:400}
.set-red .set-switch > span{display:flex;flex-direction:column;gap:2px}
.set-red input[type=checkbox]{width:20px;height:20px;accent-color:var(--mint)}
.set-red .set-range{display:grid;gap:5px}
.set-red .set-range > span{display:flex;align-items:baseline;gap:6px}
.set-red .set-range > span b{margin-left:auto}