/* 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 Robert Lafon, all rights reserved. */
/* The Sea ice page (/seaice; public/seaice.js). Blue is date A, orange date B,
   everywhere: map, numbers, chart. They match COLOURS in public/seaice.js. */
.seaice { --a: #3987e5; --b: #d95926; --med: #ff5fa2; }
.seaice h1 { margin-bottom: 4px; }
.seaice .si-controls { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; margin: 8px 0; font-size: 13px; }
.seaice .si-date input { margin-left: 4px; }
.seaice .si-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; vertical-align: -1px; margin-right: 3px; }
.seaice .si-a .si-swatch, .seaice .si-day.a .si-swatch { background: var(--a); }
.seaice .si-b .si-swatch, .seaice .si-day.b .si-swatch { background: var(--b); }
.seaice .si-quick button { margin: 0 4px; }
.seaice .si-main { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.seaice .si-mapwrap { flex: 1 1 380px; max-width: 620px; }
.seaice #si-map { width: 100%; height: auto; display: block; background: #0b1830; image-rendering: pixelated; border-radius: 4px; cursor: crosshair; }
.seaice .si-side { flex: 1 1 260px; min-width: 240px; font-size: 13px; }
.seaice .si-day { margin-bottom: 10px; }
.seaice .si-day h3 { font-size: 14px; margin: 6px 0 4px; }
.seaice .si-day h3 small { font-weight: normal; color: var(--ink-dim); }
.seaice .si-day dl { display: grid; grid-template-columns: max-content 1fr; gap: 2px 10px; margin: 0; }
.seaice .si-day dt { color: var(--ink-dim); }
.seaice .si-day dd { margin: 0; }
.seaice .si-diff { margin: 8px 0; padding: 6px 8px; background: var(--panel-2); border-radius: 4px; }
.seaice .a { color: #7fb2f0; }
.seaice .b { color: #f0956a; }
.seaice .si-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--ink-dim); margin: 6px 0; }
.seaice .si-legend i { display: inline-block; width: 12px; height: 12px; margin-right: 4px; vertical-align: -2px; border-radius: 2px; }
.seaice .si-legend i.ramp { width: 40px; background: linear-gradient(90deg, rgb(58,90,128), #fff); }
.seaice .si-legend i.line { height: 3px; vertical-align: 3px; }
.seaice .si-readout { font-size: 12px; color: var(--ink); min-height: 2.6em; padding: 4px 6px; background: var(--panel-2); border-radius: 4px; }
.seaice .si-anim { display: flex; align-items: center; gap: 8px; margin: 6px 0; font-size: 12px; flex-wrap: wrap; }
.seaice .si-anim input[type=range] { flex: 1 1 140px; }
.seaice .si-share { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 10px 0; }
.seaice .si-share .button { padding: 3px 8px; border: 1px solid var(--line, #2b3550); border-radius: 3px; text-decoration: none; }
.seaice .si-notes ul { margin: 6px 0; padding-left: 18px; color: var(--ink-dim); font-size: 12px; }
.seaice .si-chart { position: relative; max-width: 780px; }
.seaice .si-chart svg { width: 100%; height: auto; display: block; }
.seaice .si-chart .grid { stroke: #222b3d; stroke-width: 1; }
.seaice .si-chart .tick { fill: var(--ink-faint, #6f7a8f); font-size: 11px; }
.seaice .si-chart .band { fill: rgba(154, 164, 184, 0.16); stroke: none; }
.seaice .si-chart .median { fill: none; stroke: #9aa4b8; stroke-width: 1.5; stroke-dasharray: 4 3; }
.seaice .si-chart .other { fill: none; stroke: #3a4560; stroke-width: 1; opacity: .55; }
.seaice .si-chart .yr { fill: none; stroke-width: 2; stroke-linejoin: round; }
.seaice .si-chart .yr.a { stroke: var(--a); }
.seaice .si-chart .yr.b { stroke: var(--b); }
.seaice .si-chart .dot { stroke: #0e1220; stroke-width: 2; }
.seaice .si-chart .dot.a { fill: var(--a); }
.seaice .si-chart .dot.b { fill: var(--b); }
.seaice .si-chart .lab { font-size: 11px; fill: var(--ink); }
.seaice .si-chart .cross { stroke: #9aa4b8; stroke-width: 1; }
.seaice .si-chart #si-hit { cursor: pointer; }
.seaice .si-tip { position: absolute; top: 0; left: 0; width: 160px; pointer-events: none; font-size: 12px;
  background: rgba(10, 14, 24, 0.94); border: 1px solid #2b3550; border-radius: 4px; padding: 5px 7px; }
.seaice .si-tip i { display: inline-block; width: 10px; height: 2px; margin-right: 5px; vertical-align: 3px; }
.seaice .si-tip i.a { background: var(--a); } .seaice .si-tip i.b { background: var(--b); } .seaice .si-tip i.med { background: #9aa4b8; }
.seaice .si-tip .tipd { color: var(--ink-dim); margin-bottom: 2px; }
.seaice .si-tab { font-size: 12px; border-collapse: collapse; }
.seaice .si-tab td, .seaice .si-tab th { padding: 2px 10px; text-align: right; border-bottom: 1px solid #1f2738; }
.seaice .si-tab td:first-child, .seaice .si-tab th:first-child { text-align: left; }
.seaice .si-about { margin-top: 14px; font-size: 13px; }
.seaice .si-about li { margin-bottom: 4px; }
@media (max-width: 700px) { .seaice .si-side { min-width: 0; } }