/* HabitableZone: this site is based on the original Habitable Zone discussion board created by Robert Shepherd. */
/* HabitableZone was created by Robert Shepherd. This updated code: copyright © 2026 Arrell, all rights reserved. */
/* The geology viewer.
   ------------------
   Self-contained (the page does not need the board's style.css), but it uses
   the board's own colour tokens and the same panel design as the Orrery, so it
   looks like part of the same site. */

:root {
  --void: #070910; --panel: #0e1220; --panel-2: #141a29; --panel-3: #1a2132;
  --ink: #dfe4ee; --ink-dim: #9aa4b8; --ink-faint: #6f7a8f;
  --line: #2a3247; --line-soft: #1d2434;
  --link: #8ab6ff; --hover: #ff9d8b; --accent: #ffce6b;
}
html, body.geobody { height: 100%; margin: 0; overflow: hidden; }
body.geobody {
  background: radial-gradient(ellipse at 60% 40%, #0d1324 0%, #05070d 70%);
  color: var(--ink);
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 12px;
}
a { color: var(--link); }
a:hover { color: var(--hover); }

#geo { position: fixed; inset: 0; touch-action: none; cursor: grab; }
#geo.dragging { cursor: grabbing; }
#geo canvas { display: block; width: 100%; height: 100%; }

/* --- top bar -------------------------------------------------------------- */
#geotop {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; align-items: center; gap: 14px;
  padding: 7px 12px; padding-top: calc(7px + env(safe-area-inset-top, 0px));
  background: linear-gradient(to bottom, rgba(5,7,13,.92), rgba(5,7,13,0));
  font-size: 12px;
}
#geotop .back { font-weight: bold; text-decoration: none; }
#geotop .ttl { color: #fff; font-weight: bold; letter-spacing: .02em; }
#geotop .wip { font-size: 11px; font-style: italic; color: #ffcf4a; margin-left: 4px; }
#geostatus { color: var(--ink-dim); font-size: 11px; }
#geocopyright { margin-left: auto; font-size: 10.5px; color: var(--ink-dim); white-space: nowrap; }
#geopanelbtn { display: none; font: inherit; font-size: 12px; color: var(--link); background: var(--panel-3);
  border: 1px solid var(--line); border-radius: 3px; padding: 3px 9px; cursor: pointer; }

/* --- the panel ------------------------------------------------------------ */
#geopanel {
  position: fixed; top: calc(40px + env(safe-area-inset-top, 0px)); left: max(12px, env(safe-area-inset-left, 0px)); bottom: 12px; width: 270px; z-index: 15;
  overflow-y: auto; display: flex; flex-direction: column; gap: 10px; scrollbar-width: thin;
}
#geopanel .box { background: rgba(14, 20, 33, .88); border: 1px solid var(--line); border-radius: 5px; padding: 10px 12px; }
#geopanel h1 { font-size: 13px; margin: 0 0 6px 0; color: #fff; }
#geopanel h1 .stage { display: block; font-size: 10px; font-weight: normal; color: var(--accent); letter-spacing: .06em; margin-top: 2px; }
#geopanel h2 { font-size: 11px; margin: 0 0 7px 0; color: var(--ink-dim); text-transform: uppercase; letter-spacing: .08em; }
#geopanel .note { font-size: 11px; color: var(--ink-dim); margin: 4px 0 8px 0; line-height: 1.45; }
#geopanel .hint { color: var(--ink-faint); font-size: 10px; }
#geopanel .switch { font-size: 11px; display: block; margin: 4px 0; }
/* the Sunlight switch: over the picture, at its top left (just right of the panel) */
#sunbox { position: fixed; z-index: 14; top: calc(40px + env(safe-area-inset-top, 0px)); left: 296px;
  display: flex; flex-direction: column; gap: 3px; padding: 5px 9px; font-size: 11px; color: var(--ink);
  background: rgba(14, 20, 33, .82); border: 1px solid var(--line); border-radius: 5px; }
#sunbox .sunrow { display: flex; align-items: center; gap: 8px; }
#sunbox label { cursor: pointer; white-space: nowrap; }
#sunbox label[hidden] { display: none; }
#sunbox input { vertical-align: -2px; margin: 0 4px 0 0; accent-color: var(--accent); }
#sunbox select { font: inherit; font-size: 11px; color: var(--ink); background: var(--panel-3); border: 1px solid var(--line); border-radius: 3px; padding: 1px 4px; }
#fieldbox .fkey { margin: 4px 0 2px 0; }
#fieldbox select { font: inherit; font-size: 11px; color: var(--ink); background: var(--panel-3); border: 1px solid var(--line); border-radius: 3px; padding: 2px 4px; width: 100%; margin: 3px 0; }
.swtab { width: 100%; border-collapse: collapse; font-size: 10.5px; margin: 6px 0 2px; font-variant-numeric: tabular-nums; }
.swtab th { color: var(--ink-faint); font-weight: normal; text-align: right; padding: 1px 3px; }
.swtab td { text-align: right; padding: 1px 3px; color: var(--ink-dim); border-top: 1px solid var(--line-soft); }
.swtab tr.on td { color: #fff; background: rgba(255, 206, 107, .12); }
.swtab td.bad { color: #ff8a6b; }
#fieldbox .ramp i.div { background: linear-gradient(to right, #2a4f9e, #6f9fd8, #eef0ea, #eea05e, #b8322a); }
#fieldbox .btnrow .go { font-size: 10.5px; padding: 2px 6px; }
#fieldbox .seg .hint { width: 100%; font-size: 10.5px; }
#sunnote { font-size: 10.5px; color: var(--ink-dim); font-variant-numeric: tabular-nums; }
#geopanel input[type=checkbox], #geopanel input[type=radio] { vertical-align: -2px; margin: 0 4px 0 0; accent-color: var(--accent); }
#geopanel .seg { display: flex; flex-wrap: wrap; gap: 3px 10px; font-size: 11px; margin: 2px 0 6px 0; }
#geopanel .slider { display: grid; grid-template-columns: 66px 1fr 86px; align-items: center; gap: 6px; font-size: 11px; color: var(--ink-dim); margin: 3px 0; }
#geopanel .slider output { font-variant-numeric: tabular-nums; color: var(--ink); font-size: 10.5px; }
#geopanel input[type=range] { width: 100%; accent-color: var(--accent); margin: 0; }
#geopanel .go { font: inherit; font-size: 11px; padding: 3px 8px; margin-top: 4px; color: var(--link); background: var(--panel-3);
  border: 1px solid var(--line); border-radius: 3px; cursor: pointer; }
#geopanel .go:hover { color: var(--hover); border-color: var(--ink-faint); }

.pbkey, .layerkey { list-style: none; margin: 4px 0 0 0; padding: 0; font-size: 10.5px; color: #b3bbcc; }
.pbkey { columns: 2; column-gap: 10px; margin-left: 2px; }
.pbkey li { overflow: hidden; text-overflow: ellipsis; }
.pbkey li { white-space: nowrap; line-height: 1.6; }
.pbkey i { display: inline-block; width: 12px; height: 3px; vertical-align: 3px; margin-right: 5px; border-radius: 1px; }
.layerkey li { display: grid; grid-template-columns: 12px 1fr; gap: 2px 7px; margin: 0 0 5px 0; line-height: 1.35; }
.layerkey i { width: 12px; height: 12px; border-radius: 2px; margin-top: 1px; border: 1px solid rgba(255,255,255,.12); }
.layerkey b { color: var(--ink); font-weight: normal; }
.layerkey .q { display: block; color: var(--ink-faint); font-size: 10px; }
.layerkey .q.inf { color: #e8b56a; }

#shells .row { display: grid; grid-template-columns: 1fr 70px; align-items: center; gap: 6px; font-size: 11px; margin: 2px 0; }
#shells .row label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ramp { display: grid; grid-template-columns: auto 1fr auto; gap: 6px; align-items: center; font-size: 10px; color: var(--ink-faint); margin-top: 6px; }
.ramp i { height: 7px; border-radius: 2px; background: linear-gradient(to right, #fde725, #5ec962, #21918c, #3b528b, #440154); }

#readfacts, #quakefacts dl { display: grid; grid-template-columns: max-content 1fr; gap: 3px 10px; margin: 0; font-size: 11px; }
#readfacts dt, #quakefacts dt { color: var(--ink-faint); }
#readfacts dd, #quakefacts dd { margin: 0; color: var(--ink); font-variant-numeric: tabular-nums; }
#quakefacts .big { font-size: 15px; color: #fff; margin: 0 0 6px 0; }
#quakebox { border-color: #8a6a1a; }
.credits p { font-size: 10.5px; color: var(--ink-faint); margin: 0 0 4px 0; line-height: 1.5; }

/* --- things drawn over the picture ---------------------------------------- */
#geolabels { position: fixed; inset: 0; pointer-events: none; z-index: 10; overflow: hidden; }
#geolabels .lab {
  position: absolute; transform: translate(-50%, -50%); white-space: nowrap;
  font-size: 11px; color: #fff; text-shadow: 0 0 3px #000, 0 0 6px #000; letter-spacing: .02em;
}
#geolabels .lab.small { font-size: 10px; opacity: .9; }
#geolabels .lab.quake { color: #ffe36b; font-weight: bold; transform: translate(10px, -50%); }
#geotip {
  position: fixed; z-index: 25; pointer-events: none; max-width: 260px;
  background: rgba(10, 14, 24, .92); border: 1px solid var(--line); border-radius: 4px;
  padding: 5px 8px; font-size: 11px; line-height: 1.45; color: var(--ink);
}
#geotip b { color: #fff; }
/* the card beside a clicked earthquake */
#quakecard {
  position: fixed; z-index: 24; width: 250px; padding: 9px 11px 8px;
  background: rgba(14, 20, 33, .97); border: 1px solid #ffce6b; border-radius: 6px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .55); font-size: 11px; color: var(--ink);
}
#quakecard[hidden] { display: none; }
#quakecard b { color: #ffe36b; font-size: 12.5px; }
#quakecard dl.mini { margin: 6px 0 8px; }
#quakecard .qc-go { display: block; width: 100%; font: inherit; font-size: 12px; font-weight: bold; padding: 6px 8px; cursor: pointer;
  color: #1a1206; background: #ffce6b; border: 0; border-radius: 4px; }
#quakecard .qc-go:hover { background: #ffe08f; }
#quakecard .qc-note, #quakecard .qc-usgs { margin: 6px 0 0; color: var(--ink-faint); font-size: 10.5px; }
#quakecard .qc-usgs:empty { display: none; }
#quakecard .qc-x { position: absolute; top: 3px; right: 5px; background: none; border: 0; color: var(--ink-dim); font-size: 16px; cursor: pointer; line-height: 1; }
#quakecard .qc-x:hover { color: #fff; }
#wvsel { color: #ffe36b; }
/* the volcano card: the same card, wider, scrolling if long */
#quakecard.wide { width: 360px; max-height: calc(100vh - 60px); overflow-y: auto; }
#quakecard .vc-name { color: #ff6a4d; font-size: 14px; display: block; padding-right: 18px; }
#quakecard .vc-alert { display: inline-block; margin: 4px 0 2px; padding: 1px 6px; border-radius: 3px; font-size: 10.5px; font-weight: bold;
  color: #111; background: var(--c); }
#quakecard .vc-h { margin: 8px 0 3px; color: #ffce6b; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; }
#quakecard .vc-rep p { margin: 3px 0; line-height: 1.45; }
#quakecard .vc-list { margin: 0; padding-left: 16px; }
#quakecard .vc-list li { margin: 1px 0; }
#quakecard details { margin-top: 6px; }
#quakecard details summary { cursor: pointer; color: var(--link); }
#quakecard details p { line-height: 1.45; margin: 4px 0; }
#quakecard .vc-links { margin: 2px 0 2px; }
#quakecard .vc-links li { margin: 3px 0; }
#quakecard .vc-links a { color: var(--link); }
#quakecard .dim { color: var(--ink-faint); }
#quakecard .vc-note { font-size: 10px; margin: 4px 0 0; }
#wvsel .go { margin-top: 4px; }
#geotip .dim { color: var(--ink-dim); }
#geoscale {
  position: fixed; bottom: 12px; left: 50%; transform: translateX(-50%); z-index: 12;
  background: rgba(40, 28, 6, .85); border: 1px solid #8a6a1a; color: #ffdf8a;
  border-radius: 4px; padding: 4px 10px; font-size: 11px; white-space: nowrap;
}
.nojs { position: fixed; top: 40%; width: 100%; text-align: center; }

/* --- phones ---------------------------------------------------------------- */
@media (max-width: 700px) {
  #geopanelbtn { display: block; margin-left: auto; }
  #geocopyright { display: none; }
  #geopanel {
    top: auto; left: 0; right: 0; bottom: 0; width: auto; max-height: 62vh;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(10, 14, 24, .96); border-top: 1px solid var(--line);
    transform: translateY(105%); transition: transform .2s ease;
  }
  #geopanel.open { transform: translateY(0); }
  #geopanel .box { background: none; border: none; padding: 0 0 8px 0; }
  #sunbox { left: 8px; top: calc(48px + env(safe-area-inset-top, 0px)); }
  #geoscale { bottom: auto; top: 112px; font-size: 10px; white-space: normal; text-align: center; max-width: 90vw; }
}

#geopanel .go + .go { margin-left: 4px; }
dl.mini { display: grid; grid-template-columns: max-content 1fr; gap: 2px 10px; margin: 0 0 4px 0; font-size: 10.5px; }
dl.mini dt { color: var(--ink-faint); }
dl.mini dd { margin: 0; font-variant-numeric: tabular-nums; }
.hA { color: #ffffff; } .hB { color: #ffd34d; }
#geolabels .lab.handle { font-weight: bold; font-size: 12px; transform: translate(8px, -120%); }
#geolabels .lab.handle.b { color: #ffd34d; }
#geo.overhandle { cursor: move; }

.dramp { margin: 6px 0 2px 0; }
.dramp i { display: block; height: 7px; border-radius: 2px; }
.dramp .ticks { position: relative; height: 13px; font-size: 9.5px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.dramp .ticks span { position: absolute; top: 2px; transform: translateX(-50%); white-space: nowrap; }
.dramp .ticks span:first-child { transform: none; }
.dramp .ticks span:last-child { transform: translateX(-100%); }

.btnrow, .playrow { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin: 4px 0; }
#geopanel .btnrow .go, #geopanel .playrow .go { margin: 0; }
#geopanel .go + .go { margin-left: 0; }
.playrow select, .shead select { font: inherit; font-size: 11px; color: var(--ink); background: var(--panel-3); border: 1px solid var(--line); border-radius: 3px; padding: 2px 4px; }
.wkey { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 10.5px; color: #b3bbcc; margin: 4px 0 6px 0; }
.wkey i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px; vertical-align: -1px; }
#wvfams label { display: block; font-size: 11px; margin: 2px 0; }
#wvfams .ph { color: var(--ink-faint); font-size: 10px; }
#seismo {
  position: fixed; z-index: 16; left: 296px; right: max(12px, env(safe-area-inset-right, 0px)); bottom: 12px; max-height: calc(100vh - 56px); overflow-y: auto;
  background: rgba(14, 20, 33, .95); border: 1px solid var(--line); border-radius: 5px;
  display: flex; flex-direction: column; gap: 4px; padding: 6px 10px 5px 10px;
}
#seismo[hidden] { display: none; }        /* display:flex above would otherwise override the hidden attribute */
#seismo .shead { display: flex; align-items: baseline; gap: 4px 12px; font-size: 11px; }
#seismo h2 { margin: 0; font-size: 12px; color: var(--accent, #ffce6b); white-space: nowrap; }
#sdtitle { color: #fff; font-weight: bold; min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#seismo .go { font: inherit; font-size: 11px; padding: 2px 7px; color: var(--link); background: var(--panel-3); border: 1px solid var(--line); border-radius: 3px; cursor: pointer; }
#seismo .go:hover { color: var(--hover); }
#seismo .go.lit { color: #1a1206; background: #ffce6b; border-color: #ffce6b; }
#seismo select { font: inherit; font-size: 11px; color: var(--ink); background: var(--panel-3); border: 1px solid var(--line); border-radius: 3px; padding: 2px 4px; max-width: 100%; }
#seismo input { accent-color: var(--accent); vertical-align: -2px; margin: 0 3px 0 0; }
/* the five steps, side by side */
.sgroups { display: flex; flex-wrap: wrap; gap: 6px 0; font-size: 11px; color: var(--ink-dim); }
.sg { display: flex; flex-direction: column; gap: 3px; padding: 0 12px; border-left: 1px solid var(--line); min-width: 0; flex: 1 1 150px; max-width: 290px; }
.sg:first-child { border-left: 0; padding-left: 0; }
.sgh { font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-faint); }
.sgv { font-size: 10.5px; line-height: 1.35; }
.sgv.dim { color: var(--ink-faint); }
.sgrow { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 8px; }
.sgrow.seg label, .chip { white-space: nowrap; cursor: pointer; }
.sw { display: inline-block; width: 12px; height: 3px; margin-right: 4px; vertical-align: 3px; border-radius: 1px; }
.sw.real { background: var(--ink, #dfe4ee); }
.sw.syn { background: #ff9f6b; }
.sw.marks { background: repeating-linear-gradient(90deg, #fff1a6 0 3px, transparent 3px 5px, #4fc3ff 5px 8px, transparent 8px 10px); }
#seismo .wkey { margin: 2px 0 0 0; }
/* pop-ups that open over the seismogram */
#seismo #wvglobe .popbody { left: auto; right: 0; }
#seismo details.pop { position: relative; }
#seismo details.pop > summary { list-style: none; display: inline-block; }
#seismo details.pop > summary::-webkit-details-marker { display: none; }
#seismo .popbody { position: absolute; top: calc(100% + 4px); left: 0; z-index: 3; width: 250px; max-width: 70vw; padding: 8px 10px;
  background: rgba(18, 26, 42, .98); border: 1px solid var(--line); border-radius: 5px; box-shadow: 0 6px 20px rgba(0,0,0,.5);
  display: flex; flex-direction: column; gap: 5px; align-items: flex-start; }
#seismo .popbody .note { margin: 0; }
#seismo #wvfams label { display: block; font-size: 11px; margin: 1px 0; }
#scanvas { flex: 0 0 auto; width: 100%; height: 210px; display: block; cursor: ew-resize; border-top: 1px solid var(--line); }   /* a fixed height: the canvas size must not feed back into the layout */
#seismo.tall #scanvas { height: min(54vh, 500px); }
#seismo .sfoot { font-size: 10px; line-height: 1.4; color: var(--ink-faint); max-height: 4.3em; overflow-y: auto; }
#seismo .sfoot b { color: var(--ink-dim); }
#seismo .sfoot b.syn { color: #ff9f6b; }
#seismo .sfoot b.ray { color: #c9a3ff; }
#seismo .sfoot .warn { color: #ffdf8a; }
#wavebox .note.on { color: #ffdf8a; }
#geolabels .lab.station { color: #fff; font-weight: bold; transform: translate(10px, -120%); }
@media (max-width: 700px) {
  #seismo { left: 0; right: 0; bottom: 0; max-height: 72vh; border-radius: 0; }
  .sg { flex: 1 1 45%; max-width: none; padding: 0 6px; }
  #scanvas { height: 170px; }
  #seismo.tall #scanvas { height: 46vh; }
}
#geo.placing { cursor: crosshair; }