:root{--bg:#0b0f17;--panel:#131a26;--panel2:#1a2333;--line:#2a3548;--txt:#d8e0ee;--mut:#7d8aa3;--acc:#5aa9ff;--warn:#ffb347;--ok:#5fd38d;--moon:#e8e3c8;--dark:#05070c}
html.night{--bg:#000;--panel:#0d0000;--panel2:#160000;--line:#3a0000;--txt:#d01010;--mut:#7a0a0a;--acc:#ff2020;--warn:#b00000;--ok:#c00000;--moon:#900000;--dark:#000}
/* Filtro rosso per cielo (Aladin) e mappa (Leaflet con tile e controlli). Filtro SVG #night-red (index.html): solo canale rosso, G e B a zero → nessun verde/blu possibile */
html.night #framing{filter:url(#night-red) brightness(.8)}
html.night .leaflet-host{filter:url(#night-red) brightness(.45)} /* tile chiare: più scure del cielo */
/* regole separate: un selettore non supportato invaliderebbe l'intera lista (es. Firefox) */
html.night input::-webkit-calendar-picker-indicator{filter:url(#night-red) brightness(.8)}
html.night input::-webkit-search-cancel-button{filter:url(#night-red) brightness(.8)}
html.night input::-webkit-inner-spin-button{filter:url(#night-red) brightness(.8)}
:root{color-scheme:dark;accent-color:var(--acc)}
html.night{color-scheme:dark;accent-color:#ff2020;scrollbar-color:#3a0000 #000}
:focus-visible{outline:2px solid var(--acc);outline-offset:1px}
::selection{background:#3a0000;color:#ff2020}
.p{scrollbar-color:var(--line) var(--panel)}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--txt);font:13px/1.4 system-ui,Segoe UI,sans-serif;padding:12px}
h1{font-size:18px;margin:0}
a{color:var(--acc)}
.top-actions{display:flex;gap:6px}
.modal-body h3{font-size:12px;color:var(--acc);text-transform:uppercase;letter-spacing:.05em;margin:10px 0 4px}
.topbar{display:flex;gap:12px;align-items:center;justify-content:space-between;margin-bottom:10px}
button{background:var(--panel2);color:var(--txt);border:1px solid var(--line);border-radius:6px;padding:6px 12px;cursor:pointer;font:inherit}
button:disabled{opacity:.45;cursor:default}
button.primary{border-color:var(--acc);color:var(--acc)}
button.danger{border-color:var(--warn);color:var(--warn)}
button.icon{padding:2px 7px;line-height:1.2}
button.linklike{background:none;border:none;padding:2px 0;color:var(--acc);text-align:left;cursor:pointer}
input,select,textarea{background:var(--panel);color:var(--txt);border:1px solid var(--line);border-radius:4px;padding:4px 6px;font:inherit;max-width:100%;min-width:0}
input[type=checkbox],input[type=range]{padding:0}
/* Cursore disegnato con i token (la traccia nativa è chiara anche con color-scheme scuro) */
input[type=range]{-webkit-appearance:none;appearance:none;background:transparent;height:18px;border:none}
input[type=range]::-webkit-slider-runnable-track{height:4px;background:var(--line);border-radius:2px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;margin-top:-5px;border-radius:50%;background:var(--acc);border:none}
input[type=range]::-moz-range-track{height:4px;background:var(--line);border-radius:2px}
input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--acc);border:none}
input[type=range]:disabled{opacity:.45}
/* Controlli Aladin in Night View: fondo nero e testo scuro, così dopo il filtro rosso non restano chiari */
html.night #framing .aladin-location,html.night #framing .aladin-fov,html.night #framing .aladin-input-text{background:var(--bg) !important;color:var(--mut) !important;border-color:var(--line) !important;box-shadow:none !important}
option,optgroup{background:var(--panel);color:var(--txt)}
input::placeholder{color:var(--mut);opacity:1}
input:-webkit-autofill{-webkit-box-shadow:0 0 0 40px var(--panel) inset;-webkit-text-fill-color:var(--txt)}
[aria-invalid]{border-color:var(--warn)}
.mut{color:var(--mut)}
.small{font-size:11.5px}
.err{color:var(--warn);font-size:11.5px}
.err:empty{display:none}
/* La pagina sta in una schermata: header + banner + cockpit; il grafico occupa tutta la larghezza in basso */
body{display:flex;flex-direction:column;height:100vh;box-sizing:border-box}
.cockpit{flex:1;min-height:0;display:grid;gap:8px;grid-template-columns:220px 1fr 280px;grid-template-rows:minmax(300px,1fr) auto}
#setup-panel{grid-column:1;grid-row:1}
#center-panel{grid-column:2;grid-row:1}
#info-panel{grid-column:3;grid-row:1}
#night-chart{grid-column:1/4;grid-row:2;overflow:hidden}
.p{background:var(--panel2);border:1px solid var(--line);border-radius:6px;padding:8px;overflow:auto;min-width:0}
.p b{display:block;color:var(--acc);font-size:11px;text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px}
#left-setup>.btns,#object-panel>.search{margin-bottom:4px}
#left-setup{padding-bottom:4px}
.sky{position:relative;background:radial-gradient(ellipse at 55% 50%,#5a2a3a 0,#2a1a3a 18%,#0a0d18 45%,#04060b 100%);overflow:hidden}

/* Banner */
#banners:empty{display:none}
#banners{display:grid;gap:6px;margin-bottom:8px}
.banner{display:flex;gap:10px;align-items:flex-start;background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--acc);border-radius:6px;padding:6px 10px}
.banner.warn{border-left-color:var(--warn)}
.banner div{flex:1}
.banner ul{margin:4px 0 0;padding-left:18px}

/* Colonna sinistra */
.fld{display:flex;flex-direction:column;gap:2px;margin-bottom:6px;color:var(--mut);font-size:12px}
.fld>input,.fld>select{color:var(--txt);font-size:13px}
.fld[hidden]{display:none}
.fld.check{flex-direction:row;align-items:center;gap:6px;color:var(--txt)}
.fld .hint{color:var(--mut);font-size:11px}
.btns{display:flex;flex-wrap:wrap;gap:4px;margin:4px 0}
.btns button{padding:4px 8px;font-size:12px}
.search{position:relative}
.search input{width:100%}
#object-suggest{position:absolute;z-index:20;left:0;right:0;top:100%;margin:2px 0 0;padding:2px;list-style:none;background:var(--panel);border:1px solid var(--line);border-radius:4px;max-height:260px;overflow:auto}
#object-suggest li{padding:4px 6px;cursor:pointer;border-radius:3px}
#object-suggest li[aria-selected=true],#object-suggest li:hover{background:var(--panel2);color:var(--acc)}
#object-suggest small{color:var(--mut)}
#search-status:empty{display:none}
#search-status{margin:4px 0}
#object-list{list-style:none;margin:6px 0 0;padding:0}
#object-list li{border-bottom:1px dashed var(--line);padding:3px 0}
#object-list .row{display:flex;align-items:center;gap:4px}
#object-list .obj-name{flex:1;background:none;border:none;padding:2px 0;text-align:left;color:var(--txt)}
#object-list li.active .obj-name{color:var(--acc);font-weight:700}
#object-list .obj-x{background:none;border:none;color:var(--mut);padding:2px 6px}
#object-list .size{display:flex;flex-wrap:wrap;align-items:center;gap:4px;font-size:11.5px;color:var(--mut);margin:2px 0}
#object-list .size input{width:58px;padding:2px 4px}

/* Centro */
#center-panel{display:flex;flex-direction:column;gap:6px;padding:6px}
#framing-wrap{position:relative;flex:1;min-height:300px;border-radius:4px;overflow:hidden}
#framing{position:absolute;inset:0}
#framing-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:20px;background:var(--bg);color:var(--mut)}
#framing-empty[hidden]{display:none}
#framing-bar{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
#framing-bar .rot{display:flex;align-items:center;gap:6px;color:var(--mut)}
#framing-bar .rot[hidden]{display:none}
#mosaic-size input{width:46px}
#rot-range{width:140px}
#rot-number{width:64px}
#fill-indicator{margin-left:auto}
#rot-hint[hidden],#horizon-info[hidden]{display:none}
#horizon-info{margin:0}
#fill-indicator.too_big,#fill-indicator.small{color:var(--warn)}
#fill-indicator.ideal{color:var(--ok)}

/* Info */
.kv{display:flex;justify-content:space-between;gap:8px;border-bottom:1px dashed var(--line);padding:2px 0}
.kv span:last-child{text-align:right;color:var(--txt)}
.kv span:first-child{color:var(--mut)}
/* Riquadri informativi collassabili (Strumento, Oggetto, Luna, Notte, Mosaico) */
details.card{border:1px solid var(--line);border-radius:6px;background:var(--panel);margin:0 0 6px;padding:0 8px 4px}
details.card>summary{cursor:pointer;list-style:none;font-size:11px;color:var(--acc);text-transform:uppercase;letter-spacing:.05em;padding:5px 0;display:flex;align-items:center;gap:6px}
details.card>summary::-webkit-details-marker{display:none}
details.card>summary::before{content:'\25B8';color:var(--mut);transition:transform .15s}
details.card[open]>summary::before{transform:rotate(90deg)}
details.card>summary .card-action{font-size:11px;padding:1px 6px;text-transform:none;letter-spacing:0}
details.card ol{margin:2px 0;padding-left:22px;font-size:11.5px}
#object-info{margin-top:8px}
.moon-row{display:flex;align-items:center;gap:10px;padding:4px 0}
.moon-row .mut{font-size:11.5px}

/* Consigli */
.verdict{padding:4px 0}
.verdict.ok{color:var(--ok)}
.verdict.warn{color:var(--warn)}
.verdict.mut{color:var(--mut)}
.adv-list{margin:2px 0 4px;padding-left:16px}
.adv-list li.deferred s{color:var(--mut)}
details.card p{margin:4px 0}
.cal-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:2px}
.cal-cell{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;padding:2px 0;min-height:40px;font-size:10px;line-height:1.15;border-radius:4px;background:color-mix(in srgb,var(--ok) calc(var(--i,0) * 100%),var(--panel2))}
.cal-cell[aria-current=date]{border-color:var(--acc)}
.cal-day{font-weight:700}
.cal-icon{display:inline-flex;line-height:0}
.cal-legend{display:flex;flex-wrap:wrap;gap:2px 10px;margin-top:6px}
.cal-legend span{display:inline-flex;align-items:center;gap:3px}

/* Modali */
dialog.modal{background:var(--panel2);color:var(--txt);border:1px solid var(--line);border-radius:8px;padding:0;width:720px;max-width:calc(100vw - 32px);max-height:calc(100vh - 32px)}
dialog.modal-small{width:420px}
dialog::backdrop{background:rgba(0,0,0,.75)}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--line)}
.modal-head h2{font-size:15px;margin:0;color:var(--acc)}
.modal-x{background:none;border:none;color:var(--mut)}
.modal-body{padding:10px 14px;overflow:auto;max-height:calc(100vh - 160px)}
.modal-foot{display:flex;flex-wrap:wrap;gap:6px;padding:10px 14px;border-top:1px solid var(--line)}
.modal-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:8px}
.modal-row .pick{flex:1}
fieldset{border:1px solid var(--line);border-radius:6px;margin:0 0 10px;padding:6px 10px}
legend{color:var(--acc);font-size:12px;padding:0 4px}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 12px}
.filter-list{display:grid;gap:4px;margin-bottom:6px}
.filter-row{display:grid;grid-template-columns:130px 1fr 90px auto;gap:4px;align-items:center}
.filter-row .err{grid-column:1/-1}
.derived{display:flex;flex-wrap:wrap;gap:4px 14px;padding:6px 8px;background:var(--panel);border:1px solid var(--line);border-radius:6px;margin-bottom:6px}
.form-err{margin:4px 0}
.map{height:260px;border:1px solid var(--line);border-radius:6px;margin-top:6px;background:var(--panel)}
.map.leaflet-container{background:var(--panel);font:inherit}
.results{list-style:none;margin:0 0 6px;padding:0;max-height:140px;overflow:auto}
.results li{border-bottom:1px dashed var(--line)}

@media (max-width:899px){
  body{height:auto}
  .cockpit{grid-template-columns:1fr;grid-template-rows:none}
  #setup-panel,#center-panel,#info-panel,#night-chart{grid-column:1;grid-row:auto}
  #framing-wrap{min-height:300px}
  #night-chart{min-height:140px}
  /* ordine impilato: setup, immagine, grafico, Consigli */
  #setup-panel{order:1}#center-panel{order:2}#night-chart{order:3}#info-panel{order:4}
}
@media (max-width:560px){
  .grid2,.grid3{grid-template-columns:1fr}
  .filter-row{grid-template-columns:1fr 1fr}
  #fill-indicator{margin-left:0}
}
#framing-bar button[aria-pressed="true"]{border-color:var(--acc);color:var(--acc)}