/* The palette, type, and controls every screen shares. The look is ADR 0009's: a black ground, the console colours, a
   condensed display face for headings, labels, codes, and numbers, and the system face for reading. Dark only. To change
   the look, change these variables. */

@font-face {
    font-family: "Antonio";
    src: url("../fonts/Antonio.woff2") format("woff2");
    font-weight: 100 700;
    font-display: swap;
}

:root {
    --ground: #000000;
    --panel: #0c0c12;
    --panel-2: #14141c;
    --line: #23232f;
    --line-2: #32323f;
    --text: #f1ebdf;
    --muted: #9a9388;
    --amber: #ff9900;
    --tan: #ffcc99;
    --salmon: #ff9966;
    --lavender: #cc99cc;
    --peri: #9999ff;
    --sky: #99ccff;
    --rose: #cc6666;
    --magenta: #cc6699;
    --blue: #6688cc;
    --bone: #f1ebdf;
    --sage: #99cc66;
    --bad-text: #ff8a80;
    --display: "Antonio", "Arial Narrow", "Roboto Condensed", sans-serif-condensed, sans-serif;
    --body: system-ui, "Segoe UI", sans-serif;
    --mono: ui-monospace, Consolas, "Cascadia Mono", monospace;
    --rail: 220px;
    --gutter: 14px;
    --bar: 26px;
}

/* One colour per series, by its code, for the rail, the progress bar, the chips, and the next-up card. A series not
   listed here wears the muted grey until it is given one. */
[data-series="ENT"] { --sc: #b9a3e3; }
[data-series="TOS"] { --sc: #ffaa33; }
[data-series="TAS"] { --sc: #99ccff; }
[data-series="TNG"] { --sc: #e0665c; }
[data-series="DS9"] { --sc: #66cccc; }
[data-series="VOY"] { --sc: #ffcc66; }
[data-series="DSC"] { --sc: #5588dd; }
[data-series="ST"] { --sc: #f48fb1; }
[data-series="SNW"] { --sc: #d4e157; }
[data-series="LOW"] { --sc: #ff9966; }
[data-series="PRO"] { --sc: #99cc66; }
[data-series="PIC"] { --sc: #9999ff; }
[data-series="SFA"] { --sc: #8fe0b4; }
[data-series="MOV"] { --sc: #e8e2d6; }

/* One colour per era, by the era's display order, for the timeline bar. An eleventh era wears the muted grey until it
   is given one here. */
.era-1 { --era: var(--lavender); }
.era-2 { --era: var(--sky); }
.era-3 { --era: var(--tan); }
.era-4 { --era: var(--magenta); }
.era-5 { --era: var(--salmon); }
.era-6 { --era: var(--rose); }
.era-7 { --era: var(--blue); }
.era-8 { --era: var(--peri); }
.era-9 { --era: var(--amber); }
.era-10 { --era: var(--bone); }

* {
    box-sizing: border-box;
}

/* The rules below give elements a display of their own, which would undo the browser's default for `hidden`. */
[hidden] {
    display: none !important;
}

html {
    color-scheme: dark;
    background: var(--ground);
}

body {
    margin: 0;
    font: 14px/1.45 var(--body);
    color: var(--text);
    background: var(--ground);
    -webkit-font-smoothing: antialiased;
}

h1,
h2 {
    font-family: var(--display);
    text-transform: uppercase;
    color: var(--tan);
}

h1 {
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 0.03em;
    line-height: 1;
    margin: 0 0 10px;
}

h2 {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.08em;
    margin: 18px 0 6px;
}

p {
    margin: 0 0 8px;
}

a {
    color: var(--sky);
}

time {
    font-variant-numeric: tabular-nums;
}

/* Small labels for the parts of a screen, as the console labels its panels. */
.label-heading,
.card h2,
.next-up h2,
.your-note h2,
article.entry section > h2 {
    margin: 0 0 6px;
    font-family: var(--display);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--muted);
}

/* Every control shows where the keyboard is. The heading takes focus after a navigation for the page's ear, not its eye. */
:focus-visible {
    outline: 3px solid var(--sky);
    outline-offset: 2px;
}

h1:focus {
    outline: none;
}

/* Every control is at least 24 by 24 pixels (WCAG 2.5.8). Links inside running text are exempt and stay inline. */
button,
select,
textarea,
input:not([type="hidden"]) {
    min-height: 24px;
    min-width: 24px;
    font: inherit;
    color: inherit;
}

/* Buttons, the links that act as buttons, and a disclosure's summary: pills, lettered in the display face. */
button,
a.go,
a.clear-all,
a.keep,
a.danger,
summary {
    display: inline-block;
    border: 1px solid var(--line-2);
    border-radius: 999px;
    padding: 5px 14px;
    background: var(--panel-2);
    color: var(--text);
    font-family: var(--display);
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.3;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

button:hover,
a.keep:hover {
    border-color: var(--tan);
    color: var(--tan);
}

button:disabled {
    opacity: 0.5;
    cursor: default;
}

.primary,
a.go,
.note-editor button,
.provider {
    background: var(--amber);
    border-color: var(--amber);
    color: #000000;
}

.primary:hover,
a.go:hover,
.note-editor button:hover,
.provider:hover {
    background: var(--tan);
    border-color: var(--tan);
    color: #000000;
}

.danger,
a.danger,
.confirm button {
    background: var(--rose);
    border-color: var(--rose);
    color: #000000;
}

.danger:hover,
a.danger:hover,
.confirm button:hover {
    background: var(--salmon);
    border-color: var(--salmon);
    color: #000000;
}

.quiet,
a.clear-all,
.note-remove button {
    border-color: transparent;
    color: var(--muted);
    background: transparent;
}

.quiet:hover,
a.clear-all:hover,
.note-remove button:hover {
    border-color: transparent;
    color: var(--rose);
}

.small,
a.go,
a.clear-all,
.catch-up button,
.note-editor button,
.note-remove button {
    padding: 3px 11px;
    font-size: 12px;
}

/* Fields. */
select,
input[type="search"],
input[type="number"],
textarea {
    padding: 5px 10px;
    border: 1px solid var(--line-2);
    border-radius: 8px;
    background: var(--panel);
    color: var(--text);
}

input[type="checkbox"] {
    width: 24px;
    height: 24px;
    margin: 0 4px 0 0;
    accent-color: var(--amber);
    vertical-align: middle;
}

textarea {
    width: 100%;
    min-height: 96px;
    padding: 8px 10px;
    resize: vertical;
}

textarea[aria-invalid="true"] {
    border-color: var(--rose);
}

/* Words for the page's ear alone. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* One-line notices. */
.notice,
.status {
    color: var(--sage);
    font-size: 12.5px;
}

.refused {
    color: var(--bad-text);
    font-size: 12.5px;
}

.banner {
    margin: 0 0 14px;
    padding: 10px 12px;
    border: 1px solid var(--line-2);
    border-left: 6px solid var(--tan);
    background: var(--panel);
    border-radius: 8px;
    font-size: 13px;
}

.hint {
    color: var(--muted);
    font-size: 12px;
    margin: 4px 0 0;
}

.text-danger {
    color: var(--bad-text);
}