:root{
  --sea-0:#07121b; --sea-1:#0d1f2d; --sea-2:#14293b;
  --rule:#1e3d57; --paper:#e7eef4; --muted:#89a3b8;
  --brass:#d8a53c; --fix:#ff7a59; --dr:#58c8ea; --bad:#e2604a;
  --tile-filter:saturate(.7) contrast(1.02);
  --font:ui-sans-serif,system-ui,"Segoe UI",Roboto,"Noto Sans",sans-serif;
  --mono:ui-monospace,"SFMono-Regular","JetBrains Mono","DejaVu Sans Mono",monospace;
  --r:10px;
}
body[data-tiles="dark"]{
  --tile-filter:invert(1) hue-rotate(180deg) brightness(.9) contrast(.88) saturate(.5);
}
body[data-mode="night"]{
  --sea-0:#0a0304; --sea-1:#170708; --sea-2:#210a0b;
  --rule:#4a1512; --paper:#ff8f7d; --muted:#b8564a;
  --brass:#ff5a3c; --fix:#ff9d7a; --dr:#e0644a; --bad:#ff5a3c;
  --tile-filter:invert(1) grayscale(1) sepia(1) saturate(5) hue-rotate(-28deg) brightness(.5) contrast(1.15);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--sea-0);color:var(--paper);font-family:var(--font);
  font-size:15px;line-height:1.45;-webkit-text-size-adjust:100%;
  transition:background .25s,color .25s;
}
h2{font:600 11px/1 var(--font);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0}
button,input,select{font:inherit;color:inherit}

/* ---------- top bar ---------- */
.bar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:calc(env(safe-area-inset-top) + 10px) 14px 10px;
  background:var(--sea-1);border-bottom:1px solid var(--rule);
}
.brand{display:flex;align-items:center;gap:10px}
.mark{color:var(--brass);display:flex}
.brand-text{display:flex;flex-direction:column;line-height:1.1}
.brand-text b{font-size:15px;letter-spacing:.28em}
.brand-text small{font-size:10px;color:var(--muted);letter-spacing:.06em}

/* ---------- layout ---------- */
#layout{display:flex;flex-direction:column;height:calc(100% - 58px)}
#mapwrap{position:relative;flex:0 0 45vh;min-height:240px}
#map{position:absolute;inset:0;background:var(--sea-2)}
.leaflet-tile-pane{filter:var(--tile-filter)}
#panel{flex:1;overflow-y:auto;padding:12px 12px calc(env(safe-area-inset-bottom) + 28px);
  display:flex;flex-direction:column;gap:10px;-webkit-overflow-scrolling:touch}
@media (min-width:900px){
  #layout{flex-direction:row-reverse}
  #mapwrap{flex:1;height:100%}
  #panel{flex:0 0 400px;height:100%;border-right:1px solid var(--rule)}
}

/* ---------- cards ---------- */
.card{background:var(--sea-1);border:1px solid var(--rule);border-radius:var(--r);padding:12px}
.card-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:10px}
.hint,.note{color:var(--muted);font-size:11.5px}
.note{margin:6px 0 0}
label{display:flex;flex-direction:column;gap:4px;font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted)}
input,select{
  background:var(--sea-2);border:1px solid var(--rule);border-radius:8px;padding:9px 10px;
  font-family:var(--mono);font-size:15px;font-variant-numeric:tabular-nums;
  text-transform:none;letter-spacing:0;width:100%;
}
input:focus-visible,select:focus-visible,button:focus-visible,summary:focus-visible{
  outline:2px solid var(--brass);outline-offset:2px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1.1fr;gap:8px;margin-top:8px}
#hsRow.no-limb{grid-template-columns:1fr 1fr}
#hsRow.no-limb #limbWrap{display:none}
.full{margin-bottom:8px}
.row{display:flex;align-items:center;margin-top:10px}
.gap{gap:8px;flex-wrap:wrap}

button{cursor:pointer;border-radius:8px;border:1px solid var(--rule);
  background:var(--sea-2);padding:9px 14px;transition:background .15s,border-color .15s}
button:hover{border-color:var(--brass)}
.primary{background:var(--brass);color:#12202c;border-color:var(--brass);font-weight:600;
  margin-left:auto;letter-spacing:.04em}
body[data-mode="night"] .primary{color:#160404}
.ghost{background:transparent}
.small{padding:6px 10px;font-size:13px}
.danger{color:var(--bad);border-color:transparent}
.chip{background:rgba(13,31,45,.86);backdrop-filter:blur(4px);font-size:12px;padding:6px 10px}
.chip[aria-pressed="true"]{border-color:var(--brass);color:var(--brass)}

details summary{cursor:pointer;color:var(--muted);font-size:12px;letter-spacing:.06em;
  padding:4px 0;text-transform:uppercase}
details[open] summary{margin-bottom:8px;color:var(--paper)}

/* ---------- fix readout ---------- */
.result{border-color:var(--rule);background:
  linear-gradient(180deg,var(--sea-2),var(--sea-1))}
.fix-coords{font-family:var(--mono);font-size:21px;font-variant-numeric:tabular-nums;
  letter-spacing:.02em;color:var(--fix);line-height:1.35;word-spacing:.05em}
.fix-coords.empty{font-size:13px;color:var(--muted);font-family:var(--font)}
.fix-meta{margin-top:6px;font-size:11.5px;color:var(--muted);font-family:var(--mono)}
.tag{font-family:var(--mono);font-size:11px;color:var(--muted);
  border:1px solid var(--rule);border-radius:99px;padding:2px 8px}

/* ---------- sight worksheet ---------- */
.sights{display:flex;flex-direction:column;gap:8px}
.sight{border:1px solid var(--rule);border-radius:8px;overflow:hidden;background:var(--sea-2)}
.sight-head{display:flex;align-items:center;gap:8px;padding:8px 10px;cursor:pointer}
.sight-body{font-weight:600;letter-spacing:.02em;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;max-width:42%}
.sight-time{font-family:var(--mono);font-size:11.5px;color:var(--muted);margin-left:auto;
  white-space:nowrap}
.sight-int{font-family:var(--mono);font-size:14px;color:var(--brass);min-width:74px;text-align:right}
.sight-int.suspect{color:var(--bad)}
.ws-warn{color:var(--bad);font-size:11.5px;margin:6px 0 0}
.sight-zn{font-family:var(--mono);font-size:11.5px;color:var(--muted);width:52px;text-align:right}
.worksheet{border-top:1px dashed var(--rule);padding:8px 10px 10px;display:none}
.sight.open .worksheet{display:block}
.ws-row{display:flex;justify-content:space-between;font-family:var(--mono);font-size:12.5px;
  padding:1.5px 0;color:var(--muted)}
.ws-row b{color:var(--paper);font-weight:500}
.ws-row.total{border-top:1px solid var(--rule);margin-top:4px;padding-top:4px;color:var(--paper)}
.ws-actions{display:flex;gap:8px;margin-top:8px}
.empty-note{color:var(--muted);font-size:13px}

/* ---------- planner ---------- */
.planner{display:flex;flex-direction:column;gap:2px;max-height:250px;overflow:auto}
.plan-row{display:flex;gap:8px;align-items:center;font-family:var(--mono);font-size:12.5px;
  padding:4px 6px;border-radius:6px;cursor:pointer}
.plan-row:hover{background:var(--sea-2)}
.plan-row .nm{font-family:var(--font);flex:1;font-size:13px}
.plan-row .mag{color:var(--muted);width:38px;text-align:right}
.plan-row .alt{color:var(--brass);width:52px;text-align:right}
.plan-row .az{color:var(--muted);width:56px;text-align:right}

/* ---------- map furniture ---------- */
.map-legend{position:absolute;left:8px;bottom:8px;z-index:500;display:flex;gap:10px;
  background:rgba(7,18,27,.82);border:1px solid var(--rule);border-radius:8px;
  padding:5px 8px;font-size:11px;color:var(--muted)}
.map-legend i.sw{display:inline-block;width:14px;height:3px;border-radius:2px;margin-right:5px;
  vertical-align:middle}
.sw.dr{background:var(--dr)} .sw.lop{background:var(--brass)} .sw.fix{background:var(--fix)}
.map-tools{position:absolute;right:8px;top:8px;z-index:500;display:flex;flex-direction:column;
  gap:6px;align-items:flex-end}
.leaflet-container{background:var(--sea-2);font-family:var(--font)}
.leaflet-control-attribution{background:rgba(7,18,27,.75)!important;color:var(--muted)!important}
.leaflet-control-attribution a{color:var(--muted)!important}
.leaflet-container .leaflet-bar a{background:var(--sea-1);color:var(--paper);
  border-bottom-color:var(--rule)}
.leaflet-container .leaflet-bar a:hover{background:var(--sea-2);color:var(--brass)}
.leaflet-container .leaflet-tooltip{background:rgba(7,18,27,.9);border:1px solid var(--rule);
  color:var(--paper);box-shadow:none;font-size:12px;padding:3px 7px;border-radius:6px}
.leaflet-container .leaflet-tooltip-top:before{border-top-color:var(--rule)}
.leaflet-container .leaflet-tooltip.gp-label{background:transparent;border:0;padding:0;
  color:var(--brass);font-family:var(--mono);font-size:10px;
  text-shadow:0 0 5px var(--sea-0),0 0 5px var(--sea-0)}
.leaflet-container .leaflet-tooltip.gp-label:before{display:none}
.gp-label{font-family:var(--mono);font-size:10px;color:var(--brass);white-space:nowrap;
  text-shadow:0 0 4px var(--sea-0)}

.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);opacity:0;
  background:var(--sea-2);border:1px solid var(--brass);color:var(--paper);
  padding:9px 14px;border-radius:99px;font-size:13px;pointer-events:none;z-index:900;
  transition:opacity .2s,transform .2s}
.toast.on{opacity:1;transform:translate(-50%,0)}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

.plan-head{display:flex;gap:8px;font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);padding:0 6px 4px;border-bottom:1px solid var(--rule);margin-bottom:4px}
.plan-head .nm{flex:1}
.plan-head span+span{text-align:right}
.plan-head .mag{width:38px} .plan-head .alt{width:52px} .plan-head .az{width:56px}
.daylight{color:var(--brass);font-size:11.5px;margin:0 0 6px}

@media (max-width:520px){
  #mapwrap{flex-basis:40vh}
  .map-legend{display:none}
  .chip{font-size:11px;padding:5px 8px}
  .fix-coords{font-size:19px}
  .bar{padding-top:calc(env(safe-area-inset-top) + 8px)}
}