@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@400;700&display=swap');

body {
    margin: 0;
    width: 100vw;
    height: 100vh !important;

    background: black;
    color: white;
    font-family: 'Josefin Sans', sans-serif;

    display: grid;
    grid-template-columns: 80vw 1fr;
    grid-template-rows: 40vw calc(100vh - 3rem - 40vw);
    grid-template-areas: "display sources" "predict info";
    gap: 1rem;
}

::-webkit-scrollbar { width: 0.25rem; height: 100%; background-color: transparent; }
::-webkit-scrollbar-thumb { background: gray; }

body[maximised] { grid-template-columns: 100vw; grid-template-rows: 50vw; grid-template-areas: "display"; gap: 0; align-content: center; }
body[maximised] section:not(.display) { display: none; }

.mono { font-family: monospace; }

span.button { padding: 0 0.25em; border-radius: 0.25em; cursor: pointer; font-weight: bold; }
span.button.major { padding: 0.25em 0.5em; outline: 0.125em solid currentColor; text-align: center; }
.action-item { cursor: pointer; text-decoration: underline; text-decoration-style: dotted; }
span.info-corner { position: absolute; bottom: 1rem; right: 1rem; cursor: pointer; }

dialog::backdrop { background: black; opacity: 0.5; }
.dialog-grid { display: grid; grid-template-columns: auto 1fr; gap: 1em; max-width: 50vw; align-content: flex-start; }
.dialog-grid span.divider { grid-column: 1 / span 2; text-align: center; }
.dialog-grid span.title { grid-column: 1 / -1; font-weight: bold; font-size: 1.5em; }

section.sources { margin-right: 1rem; margin-top: 1rem; overflow-y: scroll; }
section.sources .heading { font-size: 2rem; border-bottom: 0.125em solid currentColor; margin-bottom: 1rem; display: flex; justify-content: space-between; }
section.sources .source-item { padding-bottom: 0.5rem; line-height: 1.5; }
section.sources .source-item[open] summary { font-weight: bold; }
section.sources .source-item ul { margin: 0; padding-left: 1em; list-style: none; }

section.info { grid-area: info; display: flex; flex-direction: column; justify-content: center; align-items: center; container: info / size; margin: 1rem; }
section.info span:is(#date, #time) { font-size: 18cqmin; text-align: center; font-family: monospace; }

section.predict { grid-area: predict; display: grid; gap: 1rem 5rem; margin: 1rem; grid-template-columns: auto 1fr; height: 100%; }
section.predict output { height: 100%; overflow-y: scroll; }
section.predict output .results-table { display: grid; grid-template-columns: repeat(7, auto); gap: 0.5rem 1rem; }
section.predict output .results-table span { text-align: center; }
section.predict output .results-table span.header { font-weight: bold; border-bottom: 0.125rem solid currentColor; }
section.predict output .results-table span.divider { grid-column: 1 / -1; height: 1rem; }

section.display { grid-area: display; aspect-ratio: 2 / 1 !important; position: relative; display: grid; }
section.display * { grid-row: 1; grid-column: 1; }
section.display img.bg { width: 100%; height: 100%; }
section.display > div[id$="-wrapper"] { display: grid; }
section.display svg { position: absolute; inset: 0; }
section.display .grid { stroke-width: 6; stroke: white; stroke-opacity: 0.2; }
section.display .grid.meridian { stroke-opacity: 0.5; }
section.display .sat-tag { font-weight: bold; }
section.display .track { stroke-width: 4; }
section.display .ground circle.dot { width: 15px; height: 15px; border-radius: 50%; fill: deepskyblue; }
section.display .ground circle.pulse { content: ''; fill: none; stroke: deepskyblue; border-radius: 100%; animation: pulsate 1s ease-out; animation-iteration-count: infinite; opacity: 0.0; }
section.display .ground text { fill: deepskyblue; }
section.display > #watermark { display: flex; align-items: end; justify-content: space-between; padding: 1rem; opacity: 0.33; }
section.display > #watermark p { margin: 0; line-height: 1.33; }
section.display > #watermark #logo { height: 3em; }
body[hide-grid] section.display .grid { display: none; }
body[hide-tracks] section.display .track { display: none; }
body[hide-grounds] section.display .ground { display: none; }
body[hide-labels] section.display text { display: none; }
@keyframes pulsate {
    0% { transform: scale(0.1, 0.1); opacity: 0.0; }
    50% { opacity: 1.0; }
    100% { transform: scale(1.2, 1.2); opacity: 0.0; }
}