/*
 * Tokens: the shadcn/ui "neutral" theme (ui.shadcn.com/docs/theming), copied by
 * value. Only the roles these pages use are kept. Type and spacing follow the
 * Tailwind scale shadcn is built on.
 */
:root {
  color-scheme: light dark;

  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --border: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --radius: 0.625rem;

  --font-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-xl: 1.25rem;
  --leading-sm: 1.25rem;
  --leading-base: 1.5rem;
  --leading-xl: 1.75rem;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-4: 1rem;
  --space-8: 2rem;
  --space-12: 3rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: oklch(0.145 0 0);
    --foreground: oklch(0.985 0 0);
    --muted: oklch(0.269 0 0);
    --muted-foreground: oklch(0.708 0 0);
    --border: oklch(1 0 0 / 10%);
    --ring: oklch(0.556 0 0);
  }
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-base);
  max-width: 42rem;
  margin: 0 auto;
  padding: var(--space-12) var(--space-4);
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

/* A site's disclaimer: one small, dim line above everything else on the page. */
.disclaimer {
  margin: 0 0 var(--space-8);
  color: var(--muted-foreground);
  font-size: 0.75rem;
  line-height: 1rem;
  opacity: 0.8;
}

h1 {
  font-size: var(--text-xl);
  line-height: var(--leading-xl);
  font-weight: 600;
  letter-spacing: -0.025em;
  margin: 0 0 var(--space-2);
}

h2 {
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  font-weight: 500;
  color: var(--muted-foreground);
  margin: var(--space-12) 0 var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border);
}

p {
  margin: 0 0 var(--space-2);
}

header p,
footer {
  color: var(--muted-foreground);
}

/* Links keep the browser's own colours and underline. */

a:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
  border-radius: calc(var(--radius) - 6px);
}

/* Entries are cards: one column on a phone, two when there is room. */
ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

li {
  --pad-y: 0.75rem;
  --pad-x: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--pad-y) var(--pad-x);
  min-width: 0;
}

/*
 * The entry a link points at: the card itself (/#atlanter), or its details anchor
 * inside (/#atlanter-details), which also opens it.
 */
li:target,
li:has(.status:target) {
  border-color: var(--ring);
  background: var(--muted);
}

/* Following a details anchor scrolls to the line under the card's face; keep the face in view. */
.status {
  scroll-margin-top: 10rem;
}

@media (min-width: 40rem) {
  ul {
    grid-template-columns: 1fr 1fr;
  }

  /* An opened card takes the full width, so its videos, tracks and text have room. */
  li:has(> details[open]) {
    grid-column: 1 / -1;
  }
}

/* First row of a card: the name, with the status badge at the top right. */
.head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}

.name {
  font-weight: 600;
}

.summary,
.meta {
  display: block;
  color: var(--muted-foreground);
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  margin-top: var(--space-1);
}

.meta {
  font-size: 0.75rem;
}

/* First line inside an opened card: the status badge and the years. */
details .status {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-4) 0 var(--space-2);
}

/* A small label over each group inside an opened card: Releases, Videos, Links. */
h3 {
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  margin: var(--space-4) 0 var(--space-2);
}

/* An entry's own badges, at the top right of its card's header. */
/*
 * Stacked in the header's top right corner, out of the text's flow, so two
 * badges do not push the summary down. The text beside them keeps clear.
 */
.badges {
  position: absolute;
  top: var(--pad-y);
  right: var(--pad-x);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-1);
}

summary:has(.badges) > .head,
summary:has(.badges) > .summary,
summary:has(.badges) > .meta {
  padding-right: 3.5rem;
}

/* The line under a section heading that says how to read its cards. */
.note {
  color: var(--muted-foreground);
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  margin: 0 0 var(--space-4);
}

/* Status and badges, after the shadcn outline badge: one look for all. */
.badge {
  flex: none;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 4px);
  padding: 0 0.375rem;
  color: var(--muted-foreground);
  font-size: 0.75rem;
  line-height: 1.125rem;
  font-weight: 500;
  white-space: nowrap;
}

/* A card that opens: the whole face is the control, so it covers the card's padding. */
summary {
  position: relative;
  cursor: pointer;
  list-style: none;
  margin: calc(-1 * var(--pad-y)) calc(-1 * var(--pad-x));
  padding: var(--pad-y) var(--pad-x);
  border-radius: var(--radius);
}

summary::-webkit-details-marker {
  display: none;
}

/* An opened card: the face becomes a tinted header, ruled off from the details under it. */
details[open] > summary {
  margin-bottom: 0;
  background: var(--muted);
  border-bottom: 1px solid var(--border);
  border-radius: var(--radius) var(--radius) 0 0;
}

details[open] .more {
  background: var(--background);
}

/* The marker that says a card opens, and what is inside: "More", or "2 videos · 1 track". */
.more {
  display: inline-block;
  margin-top: var(--space-2);
  border-radius: calc(var(--radius) - 4px);
  padding: 0.125rem var(--space-2);
  background: var(--muted);
  font-size: 0.75rem;
  line-height: 1.125rem;
  font-weight: 500;
}

.more::after {
  content: ' ▾';
}

details[open] .more::after {
  content: ' ▴';
}

summary:hover .more,
details[open] > summary:hover .more {
  background: var(--border);
}

details p {
  color: var(--muted-foreground);
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  margin: 0 0 var(--space-2);
}

/* Videos and tracks inside an expanded entry. */
.media {
  display: grid;
  /* Two side by side on a phone, more as the column widens. */
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: var(--space-4) var(--space-2);
  margin: 0 0 var(--space-2);
}

figure {
  margin: 0;
}

/*
 * Record covers inside an expanded entry. The columns share the card's width,
 * which gives three across on a phone and more as the card widens.
 */
.releases {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5.25rem, 1fr));
  gap: var(--space-4) var(--space-2);
  margin: 0 0 var(--space-2);
}

/* A cover that links to its release, like its title. */
.releases .cover {
  display: block;
}

.releases .cover:hover img {
  opacity: 0.85;
}

.releases img,
.nocover {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border-radius: calc(var(--radius) - 4px);
  background: var(--muted);
  object-fit: cover;
}

/*
 * A video or track: a link to it on its own service, opening in a new tab.
 * YouTube shows its thumbnail; NRK and Spotify show the service's name. A play
 * mark sits in the middle of every one.
 */
.poster {
  position: relative;
  display: flex;
  align-items: flex-end;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: calc(var(--radius) - 4px);
  background: var(--muted);
  color: var(--muted-foreground);
  text-decoration: none;
}

.poster img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.service {
  padding: var(--space-2);
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
}

/* The play mark: a dark disc with a white triangle, drawn without an image. */
.poster::before,
.poster::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
}

.poster::before {
  width: 2.5rem;
  height: 2.5rem;
  margin: -1.25rem 0 0 -1.25rem;
  border-radius: 50%;
  background: oklch(0 0 0 / 60%);
}

.poster::after {
  margin: -0.5rem 0 0 -0.3rem;
  border-style: solid;
  border-width: 0.5rem 0 0.5rem 0.8rem;
  border-color: transparent transparent transparent white;
}

.poster:hover::before {
  background: oklch(0 0 0 / 80%);
}

.poster:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

/* Under a cover, a video or a track: the title in the full colour, the year below it in the muted one. */
figcaption {
  font-size: 0.75rem;
  line-height: 1rem;
  margin-top: var(--space-1);
}

.year {
  display: block;
  color: var(--muted-foreground);
}

/* The button that opens an entry's list of shows; it looks like the "more" marker. */
.open-shows {
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 4px);
  padding: 0.125rem var(--space-2);
  background: var(--background);
  color: var(--foreground);
  font: inherit;
  font-size: 0.75rem;
  line-height: 1.125rem;
  font-weight: 500;
  cursor: pointer;
}

.open-shows:hover {
  background: var(--muted);
}

/* A count on the shows page: text that opens the list of what it counts. */
.count {
  border: 0;
  padding: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline dotted;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.count:hover {
  color: var(--foreground);
}

/* The list a count opens: one name per line with its number of shows. */
.tally {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
}

.tally li {
  border: 0;
  border-top: 1px solid var(--border);
  border-radius: 0;
  padding: var(--space-1) 0;
}

/* The list of shows: a popover in the middle of the screen that scrolls when long. */
.shows {
  width: min(34rem, calc(100vw - 2 * var(--space-4)));
  max-height: 80vh;
  box-sizing: border-box;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-4);
  background: var(--background);
  color: var(--foreground);
}

.shows::backdrop {
  background: oklch(0 0 0 / 50%);
}

.shows h3 {
  margin-top: 0;
}

/* A card's list of shows: its heading on the left, the link to all shows on the right. */
.popover-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-2);
}

.popover-head h3 {
  margin: 0;
}

.popover-head a {
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  white-space: nowrap;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
}

th {
  padding: 0 var(--space-2) var(--space-1) 0;
  color: var(--muted-foreground);
  font-size: 0.75rem;
  font-weight: 500;
  text-align: left;
}

td {
  padding: var(--space-1) var(--space-2) var(--space-1) 0;
  border-top: 1px solid var(--border);
  vertical-align: top;
}

/* The date column: every date is eight characters, set in figures of one width. */
th:first-child,
td:first-child {
  width: 4.5rem;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

td:first-child {
  color: var(--muted-foreground);
}

/* A show's country code; its name shows on hover and is read out in full. */
abbr {
  text-decoration: none;
  cursor: help;
}

/* The shows page: its one table sits under the header. */
main > table {
  margin-top: var(--space-8);
}

td:last-child {
  padding-right: 0;
  color: var(--muted-foreground);
}

/*
 * On the shows page, a stand-in or one-off: dimmed, so the cards' own shows stand out.
 * The muted colour alone: with any opacity on top it falls below 4.5:1 contrast.
 */
tr.one-off td {
  color: var(--muted-foreground);
}

footer {
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  margin-top: var(--space-12);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}

footer img {
  vertical-align: middle;
}