/* A printed chart sheet: paper, ink, one red for marks. Two typefaces only: serif for the title, headings and dates,
   sans for everything else, numbers included. Italics are kept for symbols; links carry a faint underline, nothing else is underlined. */
@font-face { font-family: "CMU Serif"; src: url(fonts/cmu-serif-roman.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "CMU Serif"; src: url(fonts/cmu-serif-italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "CMU Serif"; src: url(fonts/cmu-serif-bold.woff2) format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "PT Sans"; src: url(fonts/pt-sans-regular.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "PT Sans"; src: url(fonts/pt-sans-bold.woff2) format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --paper: #f6f2e8; --ink: #17232c; --soft: #5d666b; --rule: #17232c33; --red: #a3301f; --wash: #ebe4d1;
  --sea: #dde6e4; --land: #efe6cf; --coast: #7b725f;
  --serif: "CMU Serif", "Times New Roman", serif; --sans: "PT Sans", "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { display: grid; grid-template-columns: 332px 1fr; background: var(--paper); color: var(--ink); font: 14.5px/1.4 var(--sans); font-variant-numeric: tabular-nums; }
a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: #17232c55; }
a:hover { color: var(--red); text-decoration-color: currentColor; }

/* ---- the sheet: map inside a double neat line */
#sheet { min-width: 0; padding: 18px 18px 18px 14px; }
#map { height: 100%; background: var(--sea); border: 1px solid var(--ink); outline: 1px solid var(--ink); outline-offset: 4px; }
.ol-control { background: none; padding: 0; border-radius: 0; }
.ol-zoom { top: auto; left: auto; right: 12px; bottom: 12px; border: 1px solid var(--ink); }
.ol-control button { width: 30px; height: 30px; margin: 0; border-radius: 0; background: var(--paper); color: var(--ink); font: 400 22px/1 var(--serif); cursor: pointer; }
.ol-control button + button { border-top: 1px solid var(--ink); }
.ol-control button:hover, .ol-control button:focus { background: var(--wash); color: var(--ink); outline: none; }
.ol-control button:focus-visible { outline: 2px solid var(--red); outline-offset: -2px; }
.ol-scale-line { left: 12px; bottom: 12px; background: var(--paper); border: 1px solid var(--ink); border-radius: 0; padding: 4px 8px 5px; }
.ol-scale-line-inner { color: var(--ink); border: 1px solid var(--ink); border-top: 0; font: 13px/1.5 var(--sans); }
.ol-attribution { display: none; }

/* ---- the margin: title, legend, list */
#margin { height: 100vh; height: 100dvh; overflow-y: auto; padding: 22px 6px 0 22px; scrollbar-width: thin; scrollbar-color: #17232c55 transparent; }
header { padding-right: 16px; }
#now { margin: 0 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--ink); font-size: 13px; color: var(--soft); }
#now b { font-weight: 400; font-size: 14.5px; color: var(--ink); white-space: nowrap; }
.ago { color: var(--soft); }
#status .ago { display: block; font-size: 13px; }
.over { margin: 0 0 6px; font: 700 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--red); }
h1 { margin: 0; font: 700 38px/1.05 var(--serif); letter-spacing: .04em; }
.brand { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.brand svg { display: block; flex: none; width: 136px; height: 111px; margin: 0 -8px 0 0; }
/* the seal waves once when the page opens and blinks, also under the pointer or a finger (class wink, app.js);
   by the contacts it sleeps while the satellite pings and the model takes it for a ridge */
.seal .hi { transform-origin: 48px 42px; animation: wave 1.9s .6s 1; }
.seal .eyes { transform-origin: 32px 25px; animation: blink 5.5s infinite; }
.seal.wink .eyes { animation: wink .36s 1; }
.seal .ping path { opacity: .25; animation: ping 2.4s infinite; }
.seal .ping path:nth-child(2) { animation-delay: .3s; } .seal .ping path:nth-child(3) { animation-delay: .6s; }
.seal text { font-family: var(--sans); } .seal .sym { font-family: var(--serif); font-style: italic; }
.seal .zz path { opacity: 0; animation: doze 3.6s infinite; }
.seal .zz path:nth-child(2) { animation-delay: .6s; } .seal .zz path:nth-child(3) { animation-delay: 1.2s; }
@keyframes wave { 0%, 100% { transform: rotate(0); } 16%, 48%, 80% { transform: rotate(-15deg); } 32%, 64% { transform: rotate(7deg); } }
@keyframes blink { 0%, 50%, 56%, 100% { transform: scaleY(1); } 53% { transform: scaleY(.08); } }
@keyframes wink { 0%, 100% { transform: scaleY(1); } 45% { transform: scaleY(.08); } }
@keyframes ping { 0%, 45%, 100% { opacity: .25; } 15% { opacity: 1; } }
@keyframes doze { 0%, 75%, 100% { opacity: 0; } 15%, 55% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .seal * { animation: none !important; } .seal .zz path, .seal .ping path { opacity: 1; } }
.brand .over { letter-spacing: .09em; white-space: nowrap; }
.brand .name { white-space: nowrap; }
.name { margin: 4px 0 0; font: 400 16px/1.3 var(--serif); }
.name b { font-weight: 700; color: var(--red); }
.lead { margin: 10px 0 0; font: 400 16px/1.32 var(--serif); }
#status { display: block; width: 100%; margin: 12px 0 0; padding: 7px 0 8px; border: 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule); border-radius: 0; background: none; text-align: left; font: 13px/1.4 var(--sans); color: var(--soft); cursor: pointer; }
#status b { display: block; font-weight: 400; font-size: 14.5px; color: var(--ink); }
#status:hover { background: var(--wash); } #status:hover b { color: var(--red); }
#status:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
#status:empty { display: none; }

section { padding: 16px 16px 0 0; }
h2 { margin: 0 0 6px; font: 400 19px/1.2 var(--serif); }
#layers, #scenes { list-style: none; margin: 0; padding: 0; }
#layers li { display: grid; grid-template-columns: 46px 1fr; align-items: center; gap: 12px; padding: 7px 8px 7px 9px; border-top: 1px solid var(--rule); border-left: 3px solid transparent; cursor: pointer; }
#layers li:last-child { border-bottom: 1px solid var(--rule); }
#layers li:hover { background: var(--wash); }
#layers li[aria-checked="true"] { border-left-color: var(--red); background: var(--wash); }
#layers li:focus-visible, #scenes li:focus-visible, #next li:focus-visible { outline: 2px solid var(--red); outline-offset: -2px; }
#layers i { display: block; height: 11px; border: 1px solid var(--ink); }

/* the switches of the shown field lie on the map itself, in its upper left corner */
#sheet { position: relative; }
#onmap { position: absolute; top: 30px; left: 26px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; max-width: calc(100% - 52px); }
#mode, #pol { display: grid; grid-template-columns: 1fr 1fr; background: var(--paper); border: 1px solid var(--ink); }
#pol { grid-template-columns: repeat(3, 1fr); }
#mode[hidden], #pol[hidden], #under[hidden], #bar[hidden], #ticks[hidden] { display: none; }
#mode button, #pol button { padding: 7px 12px; border: 0; border-radius: 0; background: none; color: var(--ink); font: 14.5px/1.2 var(--sans); cursor: pointer; }
#mode button + button, #pol button + button { border-left: 1px solid var(--ink); }
#mode button:hover:not(:disabled), #pol button:hover { background: var(--wash); }
#mode button[aria-checked="true"], #pol button[aria-checked="true"] { background: var(--ink); color: var(--paper); }
#mode button:disabled { color: var(--soft); cursor: default; }
#mode button:focus-visible, #pol button:focus-visible { outline: 2px solid var(--red); outline-offset: -3px; }
#modenote { margin: 6px 0 0; font-size: 13px; line-height: 1.35; color: var(--soft); }
#modenote:empty { display: none; }
#scale { margin: 14px 0 0; }
#bar { height: 15px; border: 1px solid var(--ink); }
#ticks { display: flex; justify-content: space-between; margin: 0 -1px; }
#ticks span { position: relative; width: 0; padding-top: 7px; font-size: 13px; line-height: 1; display: flex; justify-content: center; white-space: nowrap; }
#ticks span::before { content: ""; position: absolute; top: 0; left: 0; height: 5px; border-left: 1px solid var(--ink); }
#ticks span:first-child { justify-content: flex-start; } #ticks span:last-child { justify-content: flex-end; }
#caption { margin: 8px 0 0; font-size: 13px; line-height: 1.35; color: var(--soft); }
#caption i { font: italic 15px/1 var(--serif); } #caption sub { font-size: .72em; }

#under { display: flex; align-items: center; gap: 9px; padding: 6px 12px 6px 9px; background: var(--paper); border: 1px solid var(--ink); font-size: 14.5px; line-height: 1.2; cursor: pointer; }
#under:hover { background: var(--wash); }
#under input { width: 14px; height: 14px; margin: 0; accent-color: var(--ink); }
#ddate { display: block; width: 100%; margin: 4px 0 0; }
#dday { margin: 0; font: 400 17px/1.3 var(--serif); }
#dnote { margin: 7px 0 0; font-size: 13px; line-height: 1.35; color: var(--soft); }
#dends { display: flex; justify-content: space-between; font-size: 13px; line-height: 1; color: var(--soft); }
#opacity { display: flex; align-items: center; gap: 12px; margin-top: 12px; font-size: 14.5px; color: var(--soft); }
#opacity input, #ddate { flex: 1; height: 18px; margin: 0; background: none; -webkit-appearance: none; appearance: none; }
#opacity input::-webkit-slider-runnable-track, #ddate::-webkit-slider-runnable-track { height: 1px; background: var(--ink); }
#opacity input::-moz-range-track, #ddate::-moz-range-track { height: 1px; background: var(--ink); }
#opacity input::-webkit-slider-thumb, #ddate::-webkit-slider-thumb { -webkit-appearance: none; width: 9px; height: 17px; margin-top: -8px; background: var(--ink); border: 0; border-radius: 0; cursor: ew-resize; }
#opacity input::-moz-range-thumb, #ddate::-moz-range-thumb { width: 9px; height: 17px; background: var(--ink); border: 0; border-radius: 0; cursor: ew-resize; }

#fresh { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 13px; color: var(--soft); }
#fresh i { flex: 1; height: 5px; }
#scenes { border-top: 1px solid var(--ink); }
#scenes ul { list-style: none; margin: 0; padding: 0; }
summary { display: grid; grid-template-columns: 18px 1fr 22px auto; align-items: center; column-gap: 10px; padding: 8px 8px 8px 6px; border-bottom: 1px solid var(--rule); cursor: pointer; list-style: none; font: 400 17px/1.2 var(--serif); }
summary::-webkit-details-marker { display: none; }
summary:hover { background: var(--wash); }
summary i { height: 4px; }
summary b { font: 400 13px/1 var(--sans); color: var(--soft); }
details[open] > summary { border-bottom-color: var(--ink); }
summary input, #toggles input { width: 14px; height: 14px; margin: 0; accent-color: var(--ink); }
#scenes li { display: grid; grid-template-columns: 1fr auto; column-gap: 10px; align-items: baseline; padding: 6px 8px 6px 34px; border-bottom: 1px solid var(--rule); cursor: pointer; }
#scenes li:hover { background: var(--wash); }
#scenes li.on { background: var(--wash); box-shadow: inset 3px 0 0 var(--ink); cursor: default; }
#scenes .when { line-height: 1.25; }
#scenes .when small { font-size: 13px; color: var(--soft); }
#scenes .has { grid-column: 1 / -1; font-size: 13px; color: var(--soft); }
#scenes .has:empty, #scenes .cmp:empty { display: none; }
#scenes a { font-size: 13px; line-height: 1; }
.cmp { grid-column: 1 / -1; margin: 8px 0 4px -26px; }
.cmp figure { margin: 0 0 14px; max-width: 380px; }             /* on a wide panel (a phone turned sideways, a narrow window) the plot does not grow with it */
.cmp figcaption { line-height: 1.3; margin-bottom: 4px; }
.cmp figcaption i { font: italic 15px/1 var(--serif); } .cmp sub { font-size: .72em; }
.cmp canvas { display: block; width: 100%; aspect-ratio: 1; }
.cmp p { margin: 4px 0 0; font-size: 13px; line-height: 1.35; color: var(--ink); }
.cmp p.none, .cmp p.key { color: var(--soft); }

#toggles { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
#toggles label { display: grid; grid-template-columns: 14px 34px 1fr auto; align-items: center; column-gap: 10px; padding: 6px 8px 6px 6px; border-bottom: 1px solid var(--rule); cursor: pointer; font-size: 14.5px; line-height: 1.25; }
#toggles label:hover { background: var(--wash); }
#toggles svg { width: 34px; height: 8px; fill: none; }
#toggles b { font: 400 13px/1 var(--sans); color: var(--soft); }
#nextnote { margin: 0 0 6px; font-size: 13px; line-height: 1.35; color: var(--soft); }
#next { list-style: none; margin: 0; padding: 0; }
#next li { display: grid; grid-template-columns: 52px 1fr auto; column-gap: 10px; align-items: baseline; padding: 6px 8px 6px 6px; border-top: 1px solid var(--rule); cursor: pointer; }
#next li:last-child { border-bottom: 1px solid var(--rule); }
#next li:hover { background: var(--wash); }
#next li.on { background: var(--wash); box-shadow: inset 3px 0 0 var(--ink); }
#next .sat, #next .has { font-size: 13px; color: var(--soft); }
#next .has { grid-column: 2 / span 2; }

footer { margin-top: 18px; padding: 12px 16px 16px 0; border-top: 1px solid var(--ink); container-type: inline-size; }
footer p { margin: 0; }
.note { font-size: 13px; line-height: 1.35; color: var(--soft); }
footer .note { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--rule); }
footer h2 { margin: 14px 0 4px; font-size: 17px; }
.src { list-style: none; margin: 0; padding: 0; font-size: 13px; line-height: 1.4; color: var(--soft); }
.src li { padding: 4px 0; border-top: 1px solid var(--rule); }
.contact { line-height: 1.45; }
.contact + .contact { margin-top: 8px; }
/* the picture: under the contacts and as wide as the legend when that is narrow (a phone, the side column);
   in a wide legend to the right of them, rising into the free space beside the heading */
/* the picture: beside the contacts in a wide legend, under them and as wide as the legend in a narrow one */
.reach svg { display: block; width: 100%; max-width: 360px; height: auto; margin-top: 10px; }
.reach svg text { font-size: 5.2px; }                      /* in units of the drawing: about 14 px when the picture is 360 px wide */
@container (min-width: 540px) {
  .reach { display: flex; align-items: flex-start; gap: 14px; }
  .reach > div { flex: 1; }
  .reach svg { flex: none; width: 224px; margin: -30px 0 0; }
  .reach svg text { font-size: 7.4px; }                    /* 13 px at 224 px */
}

/* ---- the readout under the cursor */
#tip { position: fixed; z-index: 10; pointer-events: none; min-width: 236px; padding: 10px 12px 9px; background: var(--paper); border: 1px solid var(--ink); box-shadow: 3px 3px 0 #17232c26; }
#tip .t { font: 700 16px/1.2 var(--serif); }
#tip .s { margin-top: 1px; font-size: 13px; color: var(--soft); }
#tip .t .ago { font: 400 13px/1 var(--sans); white-space: nowrap; }
#tip .c { margin-top: 7px; padding-top: 6px; border-top: 1px solid var(--rule); line-height: 1.3; white-space: nowrap; }
#tip .c.bare { margin: 0; padding: 0; border: 0; }
#tip dl { display: grid; grid-template-columns: 1fr auto auto; gap: 2px 16px; align-items: baseline; margin: 7px 0 0; padding-top: 6px; border-top: 1px solid var(--rule); }
#tip dt i { font: italic 15px/1 var(--serif); } #tip dt sub { font-size: .72em; }
#tip dd { margin: 0; text-align: right; white-space: nowrap; }
#tip dd.none { color: var(--soft); }
#tip dd.h { font-size: 13px; line-height: 1.15; color: var(--soft); padding-bottom: 3px; }
#tip dd.p { min-width: 3ch; }
#tip .b { margin-top: 7px; padding-top: 6px; border-top: 1px solid var(--rule); }
#tip .b b { font-weight: 400; }
#tip .wait { color: var(--soft); }
#tip .fact { max-width: 300px; line-height: 1.35; white-space: normal; }
#tip .c.bare + .b { }
#pin { width: 19px; height: 19px; pointer-events: none; filter: drop-shadow(0 0 1px var(--paper)) drop-shadow(0 0 1px var(--paper));
  background: linear-gradient(var(--red), var(--red)) 50% 50% / 100% 2px no-repeat, linear-gradient(var(--red), var(--red)) 50% 50% / 2px 100% no-repeat; }
#tip .soon { list-style: none; margin: 7px 0 0; padding: 6px 0 0; border-top: 1px solid var(--rule); font-size: 13px; line-height: 1.4; color: var(--soft); }

@media (max-width: 760px) {
  /* the map stays at the top of the screen; only the legend under it scrolls, so the map never has to be scrolled back to */
  body { display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; }
  #sheet { order: -1; flex: none; height: 48vh; height: 48dvh; padding: 10px 10px 8px; }
  #onmap { top: 17px; left: 17px; max-width: calc(100% - 34px); }
  #mode button, #pol button { padding: 6px 9px; font-size: 13.5px; }
  #under { padding: 5px 9px 5px 8px; font-size: 13.5px; }
  #margin { flex: 1; min-height: 0; height: auto; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 14px 14px 0; border-top: 1px solid var(--ink); }
  header, section, footer { padding-right: 0; }
  h1 { font-size: 32px; }
  .brand svg { width: 136px; height: 111px; }
  #tip { min-width: 0; left: 10px !important; right: 10px; top: auto !important; bottom: 10px; }
}