:root {
  --panel: rgba(18, 21, 27, 0.78);
  --line: rgba(255, 255, 255, 0.09);
  --text: #e8eaee;
  --dim: #8b919c;
  --accent: #5b9dff;
  --accent2: #ff4f4f;   /* Argus red */
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --title: "Exo 2", "Inter", system-ui, sans-serif;
}
html, body { margin: 0; height: 100%; background: #07080a; color: var(--text);
             font: 13px/1.4 "Inter", system-ui, -apple-system, sans-serif;
             overflow: hidden; }
canvas#view { position: fixed; inset: 0; width: 100%; height: 100%;
              cursor: grab; touch-action: none; }
canvas#overlay { position: fixed; inset: 0; width: 100%; height: 100%;
                 pointer-events: none; z-index: 1; }

#panel { position: fixed; top: 16px; left: 16px; width: 272px;
         background: var(--panel); backdrop-filter: blur(16px);
         -webkit-backdrop-filter: blur(16px);
         border: 1px solid var(--line); border-radius: 14px;
         padding: 14px 16px 12px; z-index: 2;
         box-shadow: 0 12px 40px rgba(0,0,0,.5); user-select: none;
         /* the panel is now tall (timeline … sky map); cap it to the
            viewport and let it scroll rather than run off-screen */
         max-height: calc(100vh - 32px); overflow-y: auto;
         overflow-x: hidden; scrollbar-width: thin; }
/* headers bleed into the panel padding so the whole top strip is a
   drag handle, not just the text */
#panel h1, #events h1 { margin: -14px -16px 2px; padding: 14px 16px 0;
            font-family: var(--title); letter-spacing: .02em;
            display: flex; align-items: baseline;
            justify-content: space-between; }
/* the explorer panel anchors the page; Events reads as a sub-panel */
#panel h1 { font-size: 18px; font-weight: 700; }
.brand { height: 2px; border-radius: 1px; margin: 3px 0 0;
         background: linear-gradient(90deg, var(--accent), var(--accent2));
         opacity: .85; }
#events h1 { font-size: 11px; font-weight: 600; letter-spacing: .14em;
             text-transform: uppercase; color: var(--dim); }
#panel h1 span, #events h1 span { color: var(--dim); font-weight: 500;
                 font-size: 11px; font-family: var(--mono); }
.mini { font-family: var(--title); font-size: 9px; font-weight: 600;
        letter-spacing: .1em; text-transform: uppercase;
        color: var(--dim); margin-bottom: 3px; }
#events { position: fixed; bottom: 14px; right: 16px; width: 252px;
          background: var(--panel); backdrop-filter: blur(16px);
          -webkit-backdrop-filter: blur(16px);
          border: 1px solid var(--line); border-radius: 12px;
          padding: 14px 14px 10px; z-index: 2; user-select: none;
          box-shadow: 0 8px 24px rgba(0,0,0,.4); }
#evList { overflow-y: auto; max-height: 44vh; min-height: 96px; margin: 0 -6px;
          scrollbar-width: thin; }
/* placeholder shown when no events are in the field of view, so the panel
   keeps a stable height instead of collapsing */
#evList .ev-empty { color: var(--dim); font: 10px var(--mono);
          text-align: center; padding: 16px 8px; }
.ev { padding: 5px 8px; border-radius: 8px; cursor: pointer;
      font: 11px var(--mono); display: flex; gap: 7px;
      align-items: center; }
#evList .ev:hover { background: rgba(255,255,255,.08); }
.ev .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.ev.hdr { cursor: default; color: var(--dim); padding-bottom: 2px;
          font-size: 10px; }
.sec { margin-top: 13px; }
.lbl { font-family: var(--title); font-size: 10.5px; font-weight: 600;
       letter-spacing: .14em; color: var(--dim); text-transform: uppercase;
       margin-bottom: 6px; display: flex; justify-content: space-between;
       align-items: center; }
.lbl .val { font-family: var(--mono); font-weight: 400;
            text-transform: none; letter-spacing: 0; color: var(--text); }
.row { display: flex; gap: 8px; align-items: center; }
.row input[type=range] { min-width: 0; }   /* let sliders shrink to fit */
.divider { height: 1px; background: var(--line); margin: 14px -16px 0; }
/* collapsible panel sections */
.acc { border-top: 1px solid var(--line); }
.acc:first-of-type { border-top: none; }
.acc-head { display: flex; align-items: center; width: 100%; gap: 8px;
  background: none; border: none; border-radius: 0; cursor: pointer;
  color: var(--text); font-family: var(--title); font-size: 11px;
  font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  padding: 8px 0 7px; text-align: left; }
/* no hover box (the global button:hover/radius looked sloppy) -- just brighten */
.acc-head:hover { background: none; color: #fff; }
.acc-head:hover .arr { color: var(--text); }
.acc-head .arr { margin-left: auto; color: var(--dim); font-size: 16px;
  line-height: 1; transition: transform .15s ease; }
.acc-head .arr::before { content: "\25B8"; }   /* ▸, rotates to ▾ when open */
.acc.open > .acc-head .arr { transform: rotate(90deg); }
.acc-body { display: none; padding-bottom: 11px; }
.acc.open > .acc-body { display: block; }

input[type=range] { -webkit-appearance: none; appearance: none; flex: 1;
       height: 4px; border-radius: 2px; background: rgba(255,255,255,.14);
       outline: none; margin: 6px 0; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none;
       width: 14px; height: 14px; border-radius: 50%;
       background: var(--accent); border: 2px solid #0d1015;
       box-shadow: 0 1px 4px rgba(0,0,0,.5); cursor: pointer; }
input[type=range]::-moz-range-thumb { width: 12px; height: 12px;
       border-radius: 50%; background: var(--accent);
       border: 2px solid #0d1015; cursor: pointer; }
/* fine scrubber: frame-level window around the main slider position;
   ticked track + orange thumb to set it apart from the coarse slider */
input[type=range].fine { height: 8px; border-radius: 3px;
       background: repeating-linear-gradient(90deg,
           rgba(255,255,255,.28) 0 1px, rgba(255,255,255,.07) 1px 7px); }
input[type=range].fine::-webkit-slider-thumb { background: var(--accent2);
       width: 12px; height: 16px; border-radius: 4px; }
input[type=range].fine::-moz-range-thumb { background: var(--accent2);
       border-radius: 4px; }

input[type=number] { width: 58px; background: rgba(255,255,255,.06);
       color: var(--text); border: 1px solid var(--line); border-radius: 7px;
       padding: 3px 6px; font: 11px var(--mono); outline: none;
       -moz-appearance: textfield; }
input[type=number]::-webkit-inner-spin-button { display: none; }
input[type=number]:focus { border-color: var(--accent); }
/* the "auto" cut button, sized to match the compact number boxes beside it */
#auto { font-size: 11px; padding: 3px 0; }
button { background: rgba(255,255,255,.06); color: var(--text);
       border: 1px solid var(--line); border-radius: 8px; padding: 4px 9px;
       font: 12px inherit; outline: none; cursor: pointer; }
button:hover { background: rgba(255,255,255,.12); }
button:disabled { opacity: .35; cursor: not-allowed; }
button:disabled:hover { background: rgba(255,255,255,.06); }
button.icon { width: 30px; text-align: center; padding: 4px 0;
              font-family: var(--mono); flex: none; }
button.active { background: var(--accent); border-color: var(--accent);
                color: #0b0d10; }

.seg { display: flex; flex: 1; background: rgba(255,255,255,.06);
       border: 1px solid var(--line); border-radius: 9px; padding: 2px;
       gap: 2px; }
.seg.grid2 { display: grid; grid-template-columns: 1fr 1fr; }
/* the 7 FITS cutout-size buttons: compact so the grid toggle fits beside */
.seg.fitsSizes button { font-size: 9px; padding: 3px 0; }
.seg button { flex: 1; border: none; background: transparent;
       border-radius: 7px; padding: 3px 0; font-size: 11px;
       color: var(--dim); }
.seg button:hover { background: rgba(255,255,255,.08); color: var(--text); }
.seg button.on { background: var(--accent); color: #0b0d10;
                 font-weight: 600; }

.switch { position: relative; width: 30px; height: 17px; flex: none; }
.switch input { display: none; }
.switch i { position: absolute; inset: 0; border-radius: 10px;
            background: rgba(255,255,255,.15); transition: .15s; }
.switch i::after { content: ""; position: absolute; top: 2px; left: 2px;
            width: 13px; height: 13px; border-radius: 50%; background: #cfd3da;
            transition: .15s; }
.switch input:checked + i { background: var(--accent); }
.switch input:checked + i::after { left: 15px; background: #0b0d10; }

#hist { width: 100%; height: 64px; display: block; border-radius: 8px;
        background: rgba(255,255,255,.04); border: 1px solid var(--line);
        touch-action: none; }
#cbar { width: 100%; height: 10px; border-radius: 5px; display: block;
        margin-top: 10px; border: 1px solid var(--line); }
#covBar { width: 100%; height: 22px; border-radius: 4px; display: block;
          margin-top: 7px; }
#epochTicks { display: block; width: 100%; height: 20px;
              cursor: pointer; border-radius: 6px;
              border: 1px solid var(--line);
              background: rgba(255,255,255,.05);
              touch-action: none; }
/* whole-survey brush: the window rect with edge handles selects what
   the timeline below shows -- drag the handles to zoom, the body to
   pan */
#tlOverview { display: block; width: 100%; height: 12px;
              border-radius: 4px; margin-bottom: 3px;
              background: rgba(255,255,255,.04);
              touch-action: none; }

#status { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%);
          background: var(--panel); backdrop-filter: blur(16px);
          -webkit-backdrop-filter: blur(16px);
          border: 1px solid var(--line); border-radius: 13px;
          padding: 5px 16px 6px; font: 11px var(--mono); color: var(--text);
          z-index: 2; display: flex; flex-direction: column;
          align-items: center; gap: 2px; }
/* bottom line: load / bandwidth / latency (always present, dim) */
.status-load { color: var(--dim); white-space: nowrap; }
.status-main { white-space: nowrap; }
/* boot wait-and-retry pill (main.js bootWait): shown only while the tile
   server is unreachable, e.g. scanning the store during a restart */
#bootWait { position: fixed; left: 50%; top: 44%;
       transform: translate(-50%, -50%);
       background: var(--panel); backdrop-filter: blur(16px);
       -webkit-backdrop-filter: blur(16px);
       border: 1px solid var(--line); border-radius: 13px;
       padding: 10px 22px; font: 600 12px var(--title); color: var(--text);
       letter-spacing: .02em; z-index: 6; pointer-events: none;
       white-space: nowrap; }
#map { display: block; width: 100%; height: auto; border-radius: 8px;
       border: 1px solid var(--line); background: rgba(255,255,255,.04);
       cursor: crosshair; touch-action: none; }
/* low-bandwidth indicator: a small ring over the imagery, top-right, shown
   only when a tile has been in flight for more than a second */
#netSpinner { position: fixed; top: 16px; right: 16px; width: 16px; height: 16px;
       border: 2px solid rgba(255,255,255,.20); border-top-color: var(--accent);
       border-radius: 50%; z-index: 4; opacity: 0; pointer-events: none;
       transition: opacity .25s ease; }
#netSpinner.show { opacity: 1; animation: netspin .8s linear infinite; }
@keyframes netspin { to { transform: rotate(360deg); } }
/* minipix schedule editor (admin) */
#mpxEditor { position: fixed; left: 16px; bottom: 70px; width: 344px;
       display: none; z-index: 5; background: var(--panel);
       backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
       border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px;
       font: 11px var(--mono); color: var(--text); }
#mpxEditor .mpx-row { display: flex; align-items: center; gap: 8px;
       margin: 2px 0 5px; flex-wrap: nowrap; overflow: hidden; }
/* cursor date readout: kept compact and on one line so the title never wraps */
#mpxTitle { flex: 0 0 auto; white-space: nowrap; }
#mpxCursorDate { flex: 1 1 auto; min-width: 0; margin-left: auto;
       text-align: right; white-space: nowrap; overflow: hidden;
       text-overflow: ellipsis; color: #d4dcec; }
#mpxClose { flex: 0 0 auto; cursor: pointer; color: var(--dim);
       font-weight: 400; }
#mpxBar { display: block; width: 100%; height: 40px; border-radius: 6px;
       border: 1px solid var(--line); cursor: crosshair;
       touch-action: none; }
#mpxStatus { margin-top: 3px; }
#mpxEditor input[type=date] { flex: 1; min-width: 0;
       background: rgba(255,255,255,.06);
       border: 1px solid var(--line); color: var(--text); border-radius: 6px;
       padding: 3px 6px; font: 11px var(--mono); }
#tip { position: fixed; display: none; z-index: 3; pointer-events: none;
       background: var(--panel); backdrop-filter: blur(16px);
       -webkit-backdrop-filter: blur(16px); border: 1px solid var(--line);
       border-radius: 10px; padding: 7px 10px; font: 11px var(--mono);
       color: var(--text); line-height: 1.55;
       box-shadow: 0 8px 24px rgba(0,0,0,.45); }