/* ===================== Design tokens (themes) =====================
   Every UI colour/shape/font is a token. A theme is just a token override
   applied via html[data-theme="…"]. The default :root is the "Classique" look. */
:root{
  --bg:#05070f; --text:#e8eefc; --muted:#8ea0c4;
  --accent:#5fd0ff; --accent2:#7c5cff; --ink-on-accent:#04101a;
  --good:#5fe0a8; --warn:#ffb45f; --bad:#ff9a9a;
  --panel:rgba(14,18,32,0.86); --panel-solid:#0e1220; --panel-border:rgba(120,150,220,0.18);
  --control-bg:rgba(20,26,44,0.7); --control-bg-hover:rgba(40,52,86,0.85);
  --minibtn-bg:rgba(40,52,86,0.8); --minibtn-bg-hover:rgba(60,76,120,0.9);
  --hairline:rgba(120,150,220,0.10); --hover:rgba(95,208,255,0.16); --scrim:rgba(2,4,10,0.6);
  --bar-from:rgba(6,9,18,0.94); --chip-bg:rgba(6,9,18,0.5); --brand:var(--accent);
  --radius:9px; --radius-lg:14px; --blur:14px;
  --font-ui:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --font-mono:ui-monospace,"SF Mono","Cascadia Code",Menlo,Consolas,monospace;
  --font-display:var(--font-ui);
}
/* 01 · Observatoire — instrument: cool slate, hairlines, sharp corners, mono data */
html[data-theme="observatoire"]{
  --bg:#080b12; --text:#d6dfef; --muted:#6e82a3;
  --accent:#5ad3ff; --accent2:#ffb65c; --ink-on-accent:#04101a;
  --good:#57e0a8; --warn:#ffb65c; --bad:#ff8f8f;
  --panel:rgba(10,16,26,0.9); --panel-solid:#0d131e; --panel-border:#22354f;
  --control-bg:rgba(12,20,32,0.7); --control-bg-hover:rgba(20,34,54,0.9);
  --minibtn-bg:rgba(14,24,38,0.85); --minibtn-bg-hover:rgba(22,38,60,0.95);
  --hairline:rgba(34,53,79,0.6); --hover:rgba(90,211,255,0.14);
  --bar-from:rgba(5,8,14,0.92); --chip-bg:rgba(10,16,26,0.6); --brand:#5ad3ff;
  --radius:4px; --radius-lg:6px; --blur:6px;
}
/* 02 · Céleste — glass & aurora: soft, rounded, premium */
html[data-theme="celeste"]{
  --bg:#06070d; --text:#eef1fb; --muted:#95a2c2;
  --accent:#6e8bff; --accent2:#c77dff; --ink-on-accent:#0a0e1c;
  --good:#7df0c9; --warn:#ffd27d; --bad:#ff9db0;
  --panel:rgba(18,22,38,0.5); --panel-solid:#12162a; --panel-border:rgba(150,170,220,0.16);
  --control-bg:rgba(255,255,255,0.06); --control-bg-hover:rgba(255,255,255,0.12);
  --minibtn-bg:rgba(255,255,255,0.06); --minibtn-bg-hover:rgba(255,255,255,0.13);
  --hairline:rgba(150,170,220,0.12); --hover:rgba(110,139,255,0.16);
  --bar-from:rgba(6,7,13,0.82); --chip-bg:rgba(255,255,255,0.06); --brand:#8fa6ff;
  --radius:12px; --radius-lg:18px; --blur:22px;
  --font-ui:ui-rounded,"SF Pro Rounded",system-ui,-apple-system,sans-serif;
}
/* 03 · Almanach — celestial atlas: ink & brass, serif headings, no blur */
html[data-theme="almanach"]{
  --bg:#0a0f1a; --text:#ece7da; --muted:#9a957f;
  --accent:#e6c67c; --accent2:#c67b7b; --ink-on-accent:#22190a;
  --good:#d8b45a; --warn:#c67b7b; --bad:#c67b7b;
  --panel:#0e1524; --panel-solid:#0e1524; --panel-border:#2a2e3a;
  --control-bg:rgba(20,26,40,0.6); --control-bg-hover:rgba(30,38,56,0.85);
  --minibtn-bg:rgba(20,26,40,0.7); --minibtn-bg-hover:rgba(34,42,62,0.9);
  --hairline:rgba(42,46,58,0.6); --hover:rgba(230,198,124,0.14);
  --bar-from:rgba(10,15,26,0.92); --chip-bg:rgba(10,15,26,0.6); --brand:#e6c67c;
  --radius:3px; --radius-lg:4px; --blur:0px;
  --font-display:"Iowan Old Style","Palatino Linotype","Book Antiqua",Palatino,Georgia,serif;
}
/* Night vision — everything red on black to protect dark adaptation */
html[data-theme="night"]{
  --bg:#000000; --text:#ff5a5a; --muted:#9c3030;
  --accent:#ff3b3b; --accent2:#ff6b6b; --ink-on-accent:#180000;
  --good:#ff6b6b; --warn:#d0552b; --bad:#ff4040;
  --panel:rgba(24,2,2,0.86); --panel-solid:#140000; --panel-border:rgba(255,70,70,0.32);
  --control-bg:rgba(46,0,0,0.62); --control-bg-hover:rgba(78,0,0,0.82);
  --minibtn-bg:rgba(54,0,0,0.7); --minibtn-bg-hover:rgba(92,0,0,0.85);
  --hairline:rgba(255,70,70,0.16); --hover:rgba(255,70,70,0.2);
  --bar-from:rgba(10,0,0,0.94); --chip-bg:rgba(20,0,0,0.6); --brand:#ff5a5a;
  --radius:6px; --radius-lg:10px; --blur:3px;
}

*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--text);
  font-family:var(--font-ui);overscroll-behavior:none;}
/* iOS/iPadOS: freeze the page so rubber-band scrolling can't drag the fixed bars off-screen */
body{position:fixed;inset:0;width:100%;touch-action:none;-webkit-user-select:none;user-select:none;}
input,select,textarea{-webkit-user-select:text;user-select:text;touch-action:auto;}
.panel,.citylist,.elist,.dropdown{touch-action:pan-y;-webkit-overflow-scrolling:touch;}
#sky{position:fixed;inset:0;width:100vw;height:100vh;display:block;cursor:grab;touch-action:none;}
#sky.grabbing{cursor:grabbing;}

/* Night-vision sky tint: a red multiply layer over the sky only (UI sits above it) */
#nightFilter{position:fixed;inset:0;z-index:5;pointer-events:none;display:none;
  mix-blend-mode:multiply;background:#ff1e1e;}
html[data-theme="night"] #nightFilter{display:block;}

/* Loading */
#loading{position:fixed;inset:0;background:var(--bg);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:18px;z-index:100;color:var(--muted);}
#loading.hidden{display:none;}
.spinner{width:48px;height:48px;border:3px solid var(--panel-border);border-top-color:var(--accent);
  border-radius:50%;animation:spin 0.9s linear infinite;}
@keyframes spin{to{transform:rotate(360deg)}}

/* Top bar */
#topbar{position:fixed;top:0;left:0;right:0;min-height:48px;display:flex;align-items:center;gap:8px;
  padding:max(4px,env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) 4px calc(12px + env(safe-area-inset-left));
  z-index:20;background:linear-gradient(180deg,var(--bar-from),transparent);pointer-events:none;}
#topbar > *{pointer-events:auto;}
.brand{font-weight:700;letter-spacing:0.5px;color:var(--brand);font-size:15px;font-family:var(--font-display);}
.spacer{flex:1;}
.iconbtn{background:var(--control-bg);border:1px solid var(--panel-border);color:var(--text);
  border-radius:var(--radius);padding:6px 10px;font-size:13px;cursor:pointer;display:inline-flex;
  align-items:center;gap:6px;backdrop-filter:blur(var(--blur));transition:.15s;white-space:nowrap;}
.iconbtn:hover{background:var(--control-bg-hover);border-color:var(--accent);}
.iconbtn.toggle.active{background:var(--accent);color:var(--ink-on-accent);border-color:var(--accent);}
#locLabel,#dateLabel{color:var(--muted);font-size:12px;max-width:150px;overflow:hidden;text-overflow:ellipsis;}

.searchwrap{position:relative;width:min(360px,34vw);}
#search{width:100%;background:var(--control-bg);border:1px solid var(--panel-border);color:var(--text);
  border-radius:var(--radius);padding:7px 12px;font-size:13px;backdrop-filter:blur(var(--blur));}
#search:focus{outline:none;border-color:var(--accent);}
.dropdown{position:absolute;top:40px;left:0;right:0;background:var(--panel);border:1px solid var(--panel-border);
  border-radius:var(--radius-lg);max-height:300px;overflow-y:auto;z-index:30;box-shadow:0 12px 40px rgba(0,0,0,.5);
  backdrop-filter:blur(var(--blur));}
.dropdown.hidden{display:none;}
.dropdown .item{padding:8px 12px;cursor:pointer;font-size:13px;display:flex;justify-content:space-between;gap:10px;}
.dropdown .item:hover,.dropdown .item.active{background:var(--hover);}
.dropdown .item .sub{color:var(--muted);font-size:11px;}

/* Panels */
.panel{position:fixed;top:60px;background:var(--panel);border:1px solid var(--panel-border);
  border-radius:var(--radius-lg);padding:16px;z-index:18;backdrop-filter:blur(var(--blur));
  box-shadow:0 16px 50px rgba(0,0,0,.55);width:300px;max-height:calc(100vh - 140px);overflow-y:auto;}
.panel.hidden{display:none;}
#settings{left:12px;}
#eclipses{left:12px;width:330px;}
#issPanel{left:12px;width:340px;}
#info{right:12px;width:320px;}
.panel h2{margin:0 0 12px;font-size:16px;font-family:var(--font-display);}
.panel h3{margin:14px 0 6px;font-size:13px;color:var(--accent);text-transform:uppercase;letter-spacing:.5px;
  font-family:var(--font-display);}
.chk{display:flex;align-items:center;gap:9px;padding:5px 0;font-size:13px;cursor:pointer;}
.chk input{accent-color:var(--accent);width:16px;height:16px;}
.rng{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--muted);padding:7px 0;}
.rng input{accent-color:var(--accent);}
.rng span{color:var(--accent);font-weight:600;}
.row{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap;}
.minibtn{flex:1;background:var(--minibtn-bg);border:1px solid var(--panel-border);color:var(--text);
  border-radius:var(--radius);padding:8px;font-size:12px;cursor:pointer;transition:.15s;min-width:120px;}
.minibtn:hover{border-color:var(--accent);background:var(--minibtn-bg-hover);}
.minibtn:disabled{opacity:0.38;cursor:not-allowed;}
.minibtn:disabled:hover{border-color:var(--panel-border);background:var(--minibtn-bg);}
.minibtn.primary{background:var(--accent);color:var(--ink-on-accent);}
.hint{color:var(--muted);font-size:11px;margin-top:10px;line-height:1.5;}

/* Info table */
#infoBody{font-size:13px;}
.inforow{display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px solid var(--hairline);gap:10px;}
.inforow .k{color:var(--muted);}
.inforow .v{text-align:right;font-variant-numeric:tabular-nums;}
.badge{display:inline-block;padding:1px 8px;border-radius:6px;font-size:11px;font-weight:600;border:1px solid var(--panel-border);color:var(--muted);}
.badge.up{background:transparent;color:var(--good);border-color:var(--good);}
.badge.down{background:transparent;color:var(--bad);border-color:var(--bad);}
.infohead{display:flex;justify-content:space-between;align-items:center;gap:6px;}
.infohead h2{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;}
/* collapsed (docked) info panel: header only */
#info.collapsed #infoBody,#info.collapsed .row{display:none;}
#info.collapsed{max-height:none;padding-top:8px;padding-bottom:8px;}

/* Modals */
.modal{position:fixed;inset:0;background:var(--scrim);z-index:40;display:flex;align-items:center;
  justify-content:center;backdrop-filter:blur(4px);}
.modal.hidden{display:none;}
.modalbox{background:var(--panel);border:1px solid var(--panel-border);border-radius:var(--radius-lg);padding:20px;
  width:min(440px,92vw);box-shadow:0 20px 60px rgba(0,0,0,.6);backdrop-filter:blur(var(--blur));}
.modalhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;}
.modalbox h2{margin:0;font-size:17px;font-family:var(--font-display);}
.modalbox h3{margin:14px 0 8px;font-size:13px;color:var(--accent);font-family:var(--font-display);}
.modalbox input{width:100%;background:var(--control-bg);border:1px solid var(--panel-border);color:var(--text);
  border-radius:var(--radius);padding:8px 10px;font-size:13px;margin:4px 0;}
.modalbox label{display:block;font-size:12px;color:var(--muted);margin:6px 0;}
.x{background:none;border:none;color:var(--muted);font-size:18px;cursor:pointer;
  min-width:40px;min-height:40px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--radius);}
.x:hover{color:var(--text);background:var(--hover);}
.headbtns{display:flex;gap:2px;}
.sep{width:1px;height:24px;background:var(--panel-border);margin:0 2px;flex:0 0 auto;}
.citylist,.elist{max-height:240px;overflow-y:auto;margin-top:8px;}
.citylist .item{padding:8px 10px;cursor:pointer;font-size:13px;border-radius:var(--radius);
  display:flex;justify-content:space-between;gap:10px;align-items:center;}
.citylist .item:hover{background:var(--hover);}
.elist .item{padding:8px 10px;font-size:13px;display:flex;justify-content:space-between;gap:10px;align-items:center;cursor:default;}
.elist .item .ebtn{background:var(--accent);color:var(--ink-on-accent);border:none;border-radius:6px;padding:4px 9px;
  font-size:11px;cursor:pointer;font-weight:600;}
.manual{margin-top:14px;border-top:1px solid var(--panel-border);padding-top:10px;}

/* Time bar */
#timebar{position:fixed;bottom:0;left:0;right:0;min-height:52px;display:flex;align-items:center;gap:8px;
  padding:6px calc(12px + env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left));
  z-index:20;background:linear-gradient(0deg,var(--bar-from),transparent);
  pointer-events:none;flex-wrap:wrap;justify-content:center;}
#timebar > *{pointer-events:auto;}
.tlabel{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:5px;}
.tlabel select{background:var(--control-bg);border:1px solid var(--panel-border);color:var(--text);
  border-radius:var(--radius);padding:5px 7px;font-size:12px;}
.langsel{background:var(--control-bg);border:1px solid var(--panel-border);color:var(--text);
  border-radius:var(--radius);padding:6px 8px;font-size:13px;cursor:pointer;backdrop-filter:blur(var(--blur));}
.langsel:hover{border-color:var(--accent);}
.langsel.wide{width:100%;margin-bottom:6px;}
.langsel option,.tlabel select option{background:var(--panel-solid);color:var(--text);}
.simtime{font-variant-numeric:tabular-nums;font-size:13px;color:var(--accent);font-weight:600;
  background:var(--control-bg);padding:6px 12px;border-radius:var(--radius);border:1px solid var(--panel-border);}
#btnPlay.playing{background:var(--accent);color:var(--ink-on-accent);}

#hud{position:fixed;bottom:60px;left:12px;z-index:15;font-size:11px;color:var(--muted);
  background:var(--chip-bg);padding:4px 8px;border-radius:6px;pointer-events:none;}

/* ---- Theme flavour touches ---- */
html[data-theme="observatoire"] .vtable,
html[data-theme="observatoire"] .simtime,
html[data-theme="observatoire"] .inforow .v,
html[data-theme="observatoire"] #hud{font-family:var(--font-mono);}
html[data-theme="celeste"] .iconbtn,html[data-theme="celeste"] #search{border-radius:999px;}
html[data-theme="celeste"] #btnPlay.playing{background:linear-gradient(100deg,#4FE3C1,#6E8BFF 60%,#C77DFF);border-color:transparent;}
html[data-theme="almanach"] .panel h3,html[data-theme="almanach"] .modalbox h3{text-transform:none;letter-spacing:0;font-style:italic;
  border-bottom:1px solid var(--accent);padding-bottom:3px;}
html[data-theme="almanach"] .vtable td .nm,html[data-theme="almanach"] .simtime{font-family:var(--font-display);font-style:italic;}

/* larger hit targets on touch devices */
@media (pointer:coarse){
  .iconbtn{min-height:44px;padding:9px 12px;font-size:14px;}
  .tlabel select,.langsel,#search,.modalbox input{min-height:44px;}
  .minibtn{min-height:46px;font-size:13px;}
  .dropdown .item,.citylist .item,.elist .item{padding:13px 12px;}
  #btnPlay,#btnStepBack,#btnStepFwd,#btnNow2,#btnResetView{min-width:48px;min-height:46px;justify-content:center;}
  /* the time bar wraps to several rows on touch (incl. iPad), so the HUD would overlap it — hide it */
  #hud{display:none;}
}

/* tablets & small laptops */
@media (max-width:900px){
  .searchwrap{width:min(280px,30vw);}
  #locLabel,#dateLabel{max-width:90px;}
}

/* phones */
@media (max-width:640px){
  .brand{display:none;}                       /* save width; identity via favicon/title */
  #locLabel,#dateLabel{display:none;}
  /* two-row header: row 1 = location/date/search/settings, row 2 = labelled data panels */
  #topbar{gap:6px;row-gap:6px;flex-wrap:wrap;padding-bottom:6px;}
  .sep{display:none;}
  #btnLocation,#btnDate{order:1;}
  .searchwrap{order:2;flex:1 1 110px;width:auto;min-width:80px;}
  #btnSettings,#btnFullscreen{order:3;}
  /* row 2: the panel toggles keep their labels and split the width evenly */
  #btnEclipses,#btnISS,#btnReport,#btnSolar{order:5;flex:1 1 40%;justify-content:center;white-space:normal;
    text-align:center;line-height:1.15;min-height:46px;}
  #btnEclipses [data-i18n],#btnISS [data-i18n],#btnReport [data-i18n],#btnSolar [data-i18n]{display:inline;}
  .panel{top:calc(156px + env(safe-area-inset-top));width:auto;left:10px;right:10px;
    max-height:calc(100vh - 250px - env(safe-area-inset-top) - env(safe-area-inset-bottom));}
  #settings,#eclipses,#issPanel,#info,#skyReport{left:8px;right:8px;width:auto;}
  /* data panels = bottom sheets: the sky map stays visible above them, tap the map to dismiss */
  #settings,#eclipses,#issPanel,#skyReport{
    top:auto;bottom:calc(56px + env(safe-area-inset-bottom));max-height:60vh;
    border-radius:18px 18px 0 0;padding-top:14px;}
  #settings::before,#eclipses::before,#issPanel::before,#skyReport::before{
    content:"";position:sticky;top:0;z-index:2;display:block;width:38px;height:4px;
    margin:0 auto 10px;border-radius:2px;background:var(--muted);opacity:.5;}
  /* object info = bottom sheet, dockable via ▾ : header stays visible, body scrolls.
     :not(.hidden) so the id selector doesn't override .panel.hidden{display:none} */
  #info:not(.hidden){display:flex;flex-direction:column;overflow:hidden;
    top:auto;bottom:calc(108px + env(safe-area-inset-bottom));
    max-height:46vh;}
  #info #infoBody{flex:1 1 auto;min-height:0;overflow-y:auto;}
  #info .infohead,#info .row{flex:0 0 auto;}
  #info .row{margin-top:8px;}
  #hud{display:none;}
  .simtime{font-size:11px;padding:5px 8px;}
  .tlabel{font-size:10px;}
  #timebar{gap:6px;}
  .modalbox{width:calc(100vw - 24px);}
}

/* very small phones: let the simulated-time chip wrap full width */
@media (max-width:380px){
  .simtime{order:10;flex-basis:100%;text-align:center;}
}

/* ===================== Result grids (visibility, ISS, eclipses) ===================== */
#skyReport{left:12px;width:360px;}
@media (max-width:640px){ #skyReport{left:10px;right:10px;width:auto;} }
.rtable{margin-top:4px;}
.vtable{width:100%;border-collapse:collapse;font-size:12.5px;}
.vtable th{color:var(--muted);font-weight:600;text-align:left;padding:5px 6px;font-size:10.5px;
  text-transform:uppercase;letter-spacing:.3px;border-bottom:1px solid var(--panel-border);}
.vtable td{padding:7px 6px;border-bottom:1px solid var(--hairline);white-space:nowrap;}
.vtable .num,.vtable th.num{text-align:right;font-variant-numeric:tabular-nums;}
.vrow{cursor:pointer;}
.vrow:hover{background:var(--hover);}
.vdot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:7px;vertical-align:middle;}
.vdot.vyes{background:var(--good);}                 /* visible at night */
.vdot.vday{background:var(--warn);}                 /* up only in daylight */
.vdot.vno{background:var(--muted);opacity:.5;}      /* never rises / not visible */
/* magnitude sliders act only as a ceiling while "dynamic magnitude" is on: dim them */
.magrng.capped{opacity:0.55;}