/* Pagella Site sets the reading; each face names only the code points its file holds. */
@font-face {
  font-family: "Pagella Site";
  src: url("/assets/pagella-site-2609-r3-regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0-0137, U+0139-0148, U+014A-0165, U+0168-017F, U+2013-2014,
    U+2018-201A, U+201C-201E, U+2022, U+2026, U+2192, U+2197, U+2212, U+25B6, U+2660-2667, U+266A;
}

@font-face {
  font-family: "Pagella Site";
  src: url("/assets/pagella-site-2609-r3-italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0-0137, U+0139-0148, U+014A-0165, U+0168-017F, U+2013-2014,
    U+2018-201A, U+201C-201E, U+2022, U+2026, U+2192, U+2197, U+2212, U+25B6, U+2660-2667, U+266A;
}

@font-face {
  font-family: "Pagella Site";
  src: url("/assets/pagella-site-2609-r3-bold.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0-0137, U+0139-0148, U+014A-0165, U+0168-017F, U+2013-2014,
    U+2018-201A, U+201C-201E, U+2022, U+2026, U+2192, U+2197, U+2212, U+25B6, U+2660-2667, U+266A;
}

@font-face {
  font-family: "Pagella Site";
  src: url("/assets/pagella-site-2609-r3-bolditalic.woff2") format("woff2");
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0-0137, U+0139-0148, U+014A-0165, U+0168-017F, U+2013-2014,
    U+2018-201A, U+201C-201E, U+2022, U+2026, U+2192, U+2197, U+2212, U+25B6, U+2660-2667, U+266A;
}

/* Site Sans sets the controls: upright, from 400 to 600. */
@font-face {
  font-family: "Site Sans";
  src: url("/assets/site-sans-3052-r2.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0-017F, U+2013-2014, U+2018-201E, U+2022, U+2026, U+20BA, U+2192,
    U+2197, U+2212, U+25B6, U+25B8, U+2660, U+2663, U+2665-2666, U+266A;
}

/* Dark for every reader; light when the reader chooses it. */
:root {
  color-scheme: dark;
  /* The type scale, 13, 15, 17, 19, 24, 32 and 44 px, and 64 for "Merhaba,": every size is one. */
  --size-1: 0.8125rem;
  --size-2: 0.9375rem;
  --size-3: 1.0625rem;
  --size-4: 1.1875rem;
  --size-5: 1.5rem;
  --size-6: 2rem;
  --size-7: 2.75rem;
  --size-8: 4rem;
  /* Site Sans sets the controls, the labels, the counts and the dates; Pagella everything read. */
  --sans: "Site Sans", system-ui, sans-serif;
  /* The phone's bottom bar, and the room the page keeps for it. */
  --bar-height: 64px;
  --bg: #16110d;
  --surface: #1f1812;
  --fg: #f3e9dc;
  --muted: #b9a58e;
  --nav: #d8c8b4;
  --accent: #f0b65a;
  --link-visited: #e0c49a;
  --suit-red: #ef7a72;
  /* A right answer's mark. */
  --good: #8fcf94;
  --rule: #3a2c20;
  --new: #7e9cd8;
  /* What floats above the page, as the bottom bar does. */
  --shadow: 0 0.25rem 1rem rgb(0 0 0 / 0.35);
  /* The felt and the card faces look the same in both modes. */
  --felt: #0f3d2e;
  --felt-edge: #2d5e4b;
  --card-face: #f3e9dc;
  /* The red suits on a card face, which is light in both modes. */
  --card-red: #a8221c;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #fcf4ec;
  --surface: #f6e1cc;
  --fg: #24160e;
  --muted: #6b4c37;
  --nav: #40261a;
  --accent: #a2440a;
  --link-visited: #7a3410;
  --suit-red: #a01a22;
  --good: #2f6b3a;
  --rule: #e8cdb3;
  --new: #33569a;
  --shadow: 0 0.25rem 1rem rgb(0 0 0 / 0.15);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: "Pagella Site", "Palatino Linotype", Palatino, "Book Antiqua", serif;
  font-size: var(--size-4);
  /* The fonts draw their own small caps and bold; the browser never makes them up. */
  font-synthesis: none;
  line-height: 1.6;
  overflow-wrap: break-word;
  text-rendering: optimizeLegibility;
}

body > header,
main,
body > footer {
  max-width: 70rem;
  margin-inline: auto;
  padding-inline: 1.5rem;
}

main :is(p, li, blockquote) {
  max-width: 68ch;
  text-wrap: pretty;
}

img,
video {
  max-width: 100%;
}

body > header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  padding-block: 1.75rem 0;
}

body > header > a,
body > header > a:visited {
  color: var(--fg);
  font-size: var(--size-5);
  font-weight: 700;
  text-decoration: none;
}

body > header ul,
body > footer ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* State: the page shown among the others, in the text's colour and weight over a 2px bar. */
body > header nav a,
body > header nav a:visited {
  color: var(--muted);
  text-decoration: none;
}

body > header nav a[aria-current="page"] {
  padding-block-end: 0.15em;
  border-block-end: 2px solid var(--accent);
  color: var(--fg);
  font-weight: 600;
}

body > footer {
  margin-block-start: 3rem;
  padding-block: 1rem 2rem;
  border-block-start: 1px solid var(--rule);
}

body > footer a,
body > footer a:visited {
  color: var(--muted);
}

body > header form {
  color: var(--nav);
}

body > header button {
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--nav);
  cursor: pointer;
}

body > header form button span {
  position: relative;
}

/* The active mode's mark: one box under the word for both, so the wave and the earth strip line up. */
body > header form button span::after {
  --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='6' viewBox='0 0 12 6'%3E%3Cpath d='M0 3Q3 0.8 6 3T12 3' fill='none' stroke='%237e9cd8' stroke-width='1.6'/%3E%3C/svg%3E") left center / 12px 6px repeat-x;
  --earth: linear-gradient(#c8641c 0 2px, #8a5d32 2px 6px);
  content: "";
  position: absolute;
  inset-inline: 0;
  top: calc(100% + 0.3em);
  height: 6px;
}

/* The pressed button, the page's mode, is marked. */
body > header form button[aria-pressed="true"] {
  color: var(--fg);
}

body > header .dark[aria-pressed="true"] span::after {
  background: var(--wave);
}

body > header .light[aria-pressed="true"] span::after {
  background: var(--earth);
}

body > header button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* The header's last row: the player, then the header's rule across the rest of the width. */
body > header .rule {
  display: flex;
  flex: 1 0 100%;
  min-width: 0;
  max-width: 100%;
  align-items: center;
  gap: 0.75rem;
  margin-block-start: 0.5rem;
}

body > header .rule::after {
  content: "";
  flex: 1;
  border-block-start: 1px solid var(--rule);
}

/* The newest note, at the row's right end after the rule, set like the "Dinle" pill: the label like
   its action, then the title. Only the title is cut short, so the label always shows. */
body > header .new {
  display: inline-flex;
  flex: 0 1 auto;
  order: 1;
  align-items: baseline;
  gap: 0.5rem;
  min-width: 0;
  max-width: 60%;
  color: var(--new);
  white-space: nowrap;
  text-decoration: none;
}

/* The label in the font's small caps, about as tall as capitals of 11.5px. */
/* The header's eyebrow label, as the others below: Site Sans capitals at 600. */
body > header .new .label {
  flex: none;
  font-family: var(--sans);
  font-size: var(--size-1);
  font-weight: 600;
  line-height: 1.2;
  text-transform: uppercase;
}

body > header .new .title {
  min-width: 0;
  font-size: var(--size-2);
  font-style: normal;
  overflow: hidden;
  text-overflow: ellipsis;
}

body > header .new:visited {
  color: var(--new);
}

body > header .new:is(:hover, :focus-visible) .title {
  text-decoration: underline;
}

/* The player: without JavaScript a link to the clip's song; with it the "Dinle" pill. */
music-player {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  max-width: 100%;
}

music-player ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

music-player a,
music-player a:visited {
  color: var(--nav);
  text-decoration: none;
}

/* The closed player: a pill at least 44px tall, "DİNLE" or "ÇALIYOR" in Site Sans capitals, the title
   in Pagella with the artist after it, muted, and while it plays the time. */
music-player .listen {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px 0 0;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--bg);
  color: var(--fg);
}

music-player .listen:is(:hover, :focus-within) {
  border-color: var(--accent);
}

music-player .listen.playing {
  border-color: var(--accent);
}

/* The pill's two buttons: ▶/❚❚ plays and pauses, the rest opens the programme. Neither draws a box
   of its own. */
music-player .listen button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

/* The ▶/❚❚: a 44×44 target at every width, inside the pill's own height. */
music-player .listen .play-pause {
  flex: none;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-inline-end: -6px;
  border-radius: 50%;
}

music-player .icon,
music-player .bars {
  color: var(--accent);
}

music-player .icon {
  font-size: var(--size-1);
}

/* The action word in Site Sans capitals ("DİNLE", "ÇALIYOR" with the page's Turkish). */
music-player .status {
  flex: none;
  font-family: var(--sans);
  font-size: var(--size-1);
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  color: var(--fg);
}

/* The title in Pagella's italic, cut with "…" when it is long. */
music-player .title {
  overflow: hidden;
  min-width: 0;
  font-size: var(--size-3);
  font-style: italic;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--nav);
}

/* The artist after the title, at its size and quieter; on a narrow screen it gives way first. */
music-player .artist {
  overflow: hidden;
  flex-shrink: 2;
  min-width: 0;
  font-size: var(--size-3);
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--muted);
}

music-player .artist::before {
  content: "· ";
}

/* While it plays, the time in Site Sans, its figures in columns. */
music-player .time {
  flex: none;
  font-family: var(--sans);
  font-size: var(--size-1);
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

/* The pill holds one line. */
music-player .listen,
music-player .listen .opener {
  min-width: 0;
  max-width: 100%;
}

/* A small chevron after the title, pointing up while the programme is open. */
music-player .chevron {
  flex: none;
  width: 6px;
  height: 6px;
  margin-inline-start: 2px;
  border-block-start: 1.5px solid var(--muted);
  border-inline-start: 1.5px solid var(--muted);
  transform: translateY(-2px) rotate(225deg);
}

music-player .opener[aria-expanded="true"] .chevron {
  transform: translateY(2px) rotate(45deg);
}

/* The programme the pill opens: on a phone a sheet from the bottom of the screen over a dimmed page;
   from 600px a box that stands off the page, under the pill. It shows and steers the sound. */
music-player .backdrop {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: rgb(0 0 0 / 0.45);
}

music-player .panel {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 21;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: 85vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  box-sizing: border-box;
  padding: 20px 20px 28px;
  border-block-start: 1px solid var(--rule);
  border-radius: 16px 16px 0 0;
  background: var(--surface);
  color: var(--fg);
  animation: sheet 0.2s ease-out;
}

@keyframes sheet {
  from {
    transform: translateY(100%);
  }

  to {
    transform: none;
  }
}

/* The head, the programme's focal point: a small poster, the title large with its Turkish name under
   it in the accent's italic, as on a song's page, then the artist. */
music-player .panel .head {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

music-player .panel .poster {
  display: block;
  flex: none;
  width: auto;
  height: 96px;
  max-height: 96px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 4px;
}

/* On a phone the poster is smaller still, so that the title keeps its line; the pill shows the title
   only, without " · artist", so that it is not cut twice. */
@media (max-width: 599px) {
  music-player .panel .poster {
    height: 72px;
  }

  music-player .listen .artist {
    display: none;
  }
}

music-player .panel .names {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

music-player .panel .original,
music-player .panel .original:visited {
  font-size: var(--size-5);
  line-height: 1.2;
  color: var(--fg);
  text-decoration: none;
}

music-player .panel .original:is(:hover, :focus-visible) {
  text-decoration: underline;
  text-decoration-color: var(--rule);
}

music-player .panel .head .turkish {
  font-size: var(--size-3);
  font-style: italic;
  color: var(--accent);
}

music-player .panel .by {
  font-size: var(--size-2);
  color: var(--muted);
}

music-player .panel button {
  display: grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--fg);
  font: inherit;
  cursor: pointer;
}

music-player .panel .close {
  flex: none;
  margin: -10px -10px 0 auto;
  color: var(--muted);
}

music-player .panel svg path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linejoin: round;
}

music-player .panel svg path.filled {
  fill: currentColor;
}

/* The time bar; its times only once the sound's length is known. */
music-player .panel .position {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

music-player .panel input[type="range"] {
  width: 100%;
  min-height: 24px;
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
}

music-player .panel .times {
  display: flex;
  justify-content: space-between;
  min-height: 1.2em;
  font-size: var(--size-1);
  color: var(--muted);
}

/* ⏮ ⏯ ⏭, each a 44×44 target at least. */
music-player .panel .controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 24px;
}

music-player .panel :is(.previous, .next) {
  width: 48px;
  height: 48px;
}

music-player .panel .toggle {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--bg);
}

music-player .panel .toggle path {
  stroke-width: 3;
}

music-player .panel .toggle path.filled {
  stroke-width: 1;
}

/* The clip's whole song, beside ⏭: a link, not a fourth round button. */
music-player .whole-song {
  min-height: 44px;
  font-size: var(--size-2);
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

music-player .panel .whole-song {
  display: inline-flex;
  color: var(--accent);
}

/* The two lists as a segmented control, drawn as state: the open one a filled segment in the text's
   colour and weight, the other muted. */
music-player .panel [role="tablist"] {
  display: flex;
  align-self: flex-start;
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--rule);
  border-radius: 9px;
}

music-player .panel [role="tab"] {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  min-height: 44px;
  padding-inline: 0.75rem;
  border-radius: 6px;
  font-size: var(--size-2);
  color: var(--muted);
}

music-player .panel [role="tab"][aria-selected="true"] {
  background: var(--bg);
  box-shadow: inset 0 0 0 1px var(--rule);
  color: var(--fg);
  font-weight: 600;
}

music-player .panel .clips-note {
  margin: 0 0 4px;
  font-size: var(--size-2);
  color: var(--muted);
}

/* The lists at their natural height: the whole programme scrolls, so that on a phone the last song
   can still be reached. */
music-player .panel .lists {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Each artist's name over their songs, in Pagella's small caps, with the count in Site Sans. */
music-player .panel .whole-songs .group {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 14px 8px 2px;
  border-block-end: 1px solid var(--rule);
  color: var(--muted);
  font-size: var(--size-3);
  font-variant-caps: small-caps;
  letter-spacing: 0.04em;
}

music-player .panel .whole-songs .group:first-child {
  padding-block-start: 0;
}

music-player .panel :is(.clips, .whole-songs) {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* A row: its number, its title with the Turkish name under it, ▮▮ while it plays; about 44px apart,
   a long name on two lines. */
music-player .panel :is(.clips, .whole-songs) button {
  display: flex;
  gap: 10px;
  align-items: baseline;
  width: 100%;
  min-height: 44px;
  padding: 6px 8px;
  border-radius: 6px;
  text-align: start;
}

music-player .panel :is(.clips, .whole-songs) button[aria-current] {
  background: var(--bg);
}

music-player .panel :is(.clips, .whole-songs) button[aria-current] em {
  color: var(--accent);
}

music-player .panel :is(.clips, .whole-songs) .number {
  width: 22px;
  flex-shrink: 0;
  font-family: var(--sans);
  font-size: var(--size-1);
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

music-player .panel :is(.clips, .whole-songs) .names {
  flex: 1;
  min-width: 0;
}

music-player .panel :is(.clips, .whole-songs) em {
  font-size: var(--size-3);
  font-style: normal;
}

music-player .panel :is(.clips, .whole-songs) .turkish {
  display: block;
  font-size: var(--size-2);
  font-style: italic;
  color: var(--muted);
}

music-player .panel :is(.clips, .whole-songs) .turkish:empty {
  display: none;
}

music-player .panel .now-mark {
  flex: none;
  font-size: var(--size-1);
  color: var(--accent);
}

@media (min-width: 600px) {
  music-player .backdrop {
    display: none;
  }

  music-player .panel {
    position: absolute;
    inset: calc(100% + 8px) auto auto 0;
    width: 460px;
    max-height: calc(100vh - 160px);
    padding: 20px;
    border: 1px solid var(--rule);
    border-radius: 10px;
    box-shadow: var(--shadow);
    animation: none;
  }

  music-player .panel .controls {
    justify-content: flex-start;
    gap: 6px;
  }

  music-player .panel :is(.previous, .next) {
    width: 44px;
    height: 44px;
  }

  music-player .panel .toggle {
    width: 52px;
    height: 52px;
  }

  music-player .panel .whole-song {
    margin-inline-start: auto;
  }
}

/* The bottom bar's own parts: only a phone's docked bar shows them. As specific as the pill's
   buttons, so that the × is hidden from the pill, the keyboard included. */
music-player .listen :is(.bar-poster, .bar-close, .progress) {
  display: none;
}

/* On a phone, once something has played, the pill leaves the header and docks at the bottom of the
   screen: a small poster, the title, ▶/❚❚ and × on a surface clear of the safe area, a thin line of
   how far it has played along its top. A press on the title opens the programme as a sheet over it.
   The page keeps the bar's height free at its end, so the bar covers nothing, footer included. */
@media (max-width: 599px) {
  music-player .listen.docked {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 19;
    gap: 10px;
    height: calc(var(--bar-height) + env(safe-area-inset-bottom));
    padding: 0 6px 0 12px;
    padding-block-end: env(safe-area-inset-bottom);
    border: 0;
    border-block-start: 1px solid var(--rule);
    border-radius: 0;
    background: var(--surface);
    box-shadow: var(--shadow);
    animation: bar-in 0.2s ease-out;
  }

  music-player .listen.docked .bar-poster {
    display: block;
    flex: none;
    height: 40px;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 3px;
  }

  music-player .listen.docked .opener {
    flex: 1;
    align-self: stretch;
  }

  music-player .listen.docked :is(.status, .artist, .time, .chevron) {
    display: none;
  }

  music-player .listen.docked .bar-close {
    display: grid;
    flex: none;
    place-items: center;
    width: 44px;
    height: 44px;
    color: var(--muted);
  }

  music-player .listen.docked .bar-close path {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
  }

  music-player .listen.docked .progress {
    display: block;
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: var(--rule);
  }

  music-player .listen.docked .progress i {
    display: block;
    height: 100%;
    background: var(--accent);
  }

  body:has(music-player .listen.docked) {
    padding-block-end: calc(var(--bar-height) + env(safe-area-inset-bottom));
  }
}

@keyframes bar-in {
  from {
    transform: translateY(100%);
  }

  to {
    transform: none;
  }
}

/* After the bar's rule, so that it wins: for a reader who asks for less motion the bar appears at
   once. */
@media (prefers-reduced-motion: reduce) {
  music-player .listen.docked {
    animation: none;
  }
}

/* Three small bars that move like an equaliser while the sound plays. */
music-player .bars {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 11px;
}

music-player .bars i {
  width: 2px;
  height: 11px;
  background: currentColor;
  transform-origin: bottom;
  animation: bar 0.9s ease-in-out infinite alternate;
}

music-player .bars i:nth-child(2) {
  animation-delay: -0.3s;
}

music-player .bars i:nth-child(3) {
  animation-delay: -0.6s;
}

@keyframes bar {
  from {
    transform: scaleY(0.3);
  }

  to {
    transform: scaleY(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  music-player .bars i {
    animation: none;
  }

  music-player .panel {
    animation: none;
  }
}

h1,
h2 {
  font-weight: 700;
}

h1 {
  font-size: var(--size-6);
  line-height: 1.15;
}

h2 {
  font-size: var(--size-5);
  line-height: 1.2;
}

/* A link is in the accent; only running text underlines it (below). */
a {
  color: var(--accent);
  text-decoration: none;
}

/* Running text: a link in the content's paragraphs, lists and captions, and in the footer, reads as a
   link, underlined. As specific as a bare link, so that a card's or a control's own rule wins. */
:where(main, body > footer) :where(p, li, dd, td, figcaption, blockquote) a {
  text-decoration-line: underline;
  text-decoration-thickness: from-font;
  text-underline-offset: 0.15em;
}

a:visited {
  color: var(--link-visited);
}

a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* The skip link to the content, out of sight until the keyboard reaches it. */
.skip {
  position: absolute;
  inset-block-start: 0.5rem;
  inset-inline-start: 0.5rem;
  z-index: 1;
  padding: 0.5rem 0.75rem;
  background: var(--bg);
}

/* The content takes the focus from the skip link only so that the next Tab starts there. */
#content:focus {
  outline: none;
}

.skip:not(:focus) {
  clip-path: inset(50%);
  width: 1px;
  height: 1px;
  overflow: hidden;
  white-space: nowrap;
}

.songs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
  gap: 2rem 1.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.songs li {
  max-width: none;
}

.song-card {
  position: relative;
  color: var(--fg);
}

.song-card > span > a:first-child,
.song-card > span > a:first-child:visited {
  color: var(--fg);
  text-decoration: none;
}

/* The title link covers the whole card, so a click anywhere on it opens the song; the ▶ sits above. */
.song-card > span > a:first-child::after {
  content: "";
  position: absolute;
  inset: 0;
}

.song-card img {
  display: block;
  width: 100%;
  height: auto;
  margin-block-end: 0.6rem;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 4px;
  background: var(--surface);
}

.song-card em {
  display: block;
  color: var(--accent);
}

.song-card:hover span {
  text-decoration: underline;
}

.song-card:has(> span > a:first-child:focus-visible) span {
  text-decoration: underline;
}

/* Hovering the ▶ is not hovering the title; without `:has()` the title is underlined as before. */
.song-card:has(.background:hover) span {
  text-decoration: none;
}

/* A note's video or live sample, as wide as the paragraphs around it. */
.text :is(.note-video, .note-sample) {
  display: block;
  width: 100%;
  max-width: 68ch;
  height: auto;
  margin-block: 1.5rem;
}

.text .note-video {
  border-radius: 4px;
  background: var(--surface);
}

/* makinist's live sample in a note: its own page framed at 16:9, one line under it. */
.text .note-sample {
  margin-inline: 0;
}

.note-sample iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 4px;
  background: var(--surface);
  /* makini.st declares none; without this the frame gets an opaque white backdrop in the dark theme. */
  color-scheme: light;
}

/* A frame with two scenes is the card: 16:9 of its width, plus the question box under it. makinist
   gives the box 116px with the suggestions on one line, 163px on two, 27px more for its error line,
   and since v0.0.18 a links row under it, 225px in all; the narrower frames, where they wrap further,
   fit in 520px. */
.note-sample.card {
  container-type: inline-size;
}

.note-sample.card iframe {
  aspect-ratio: auto;
  height: max(520px, calc(100cqi * 9 / 16 + 225px));
}

.note-sample figcaption {
  margin-block-start: 0.4rem;
  color: var(--muted);
  font-size: var(--size-2);
}

/* A song's card in a note, where its block was: as the music page draws it, at a grid card's size. */
.text .song-card {
  max-width: 20rem;
  margin-block: 1.5rem;
}

.song-trail {
  margin-block: 2rem 0;
  color: var(--muted);
}

.song-trail a,
.song-trail a:visited {
  color: var(--muted);
}

/* A song's title is its poster, so it keeps the large size. The heading and its ▶ share one line,
   set here, so the heading names the song alone. */
.song-trail + .song-heading {
  margin-block: 0.5rem 0;
  font-size: var(--size-7);
  font-weight: 700;
  line-height: 1.1;
}

.song-heading h1 {
  display: inline;
  font: inherit;
}

.song-title {
  margin-block: 0.25rem 0.75rem;
  color: var(--accent);
  font-size: var(--size-6);
  font-style: italic;
  line-height: 1.2;
}

.credit {
  color: var(--muted);
}

.song-video {
  display: block;
  width: 100%;
  height: auto;
  margin-block: 1.5rem 2.5rem;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 6px;
  background: var(--surface);
}

/* The ▶ right after a song's name: a drawn triangle in the page's amber, 0.7 of the text, centred on
   the letters. Padding makes a tap area of at least 2.75rem, and matching negative margins keep the
   line from growing; it starts at the gap, so it never covers the name. It sits above a card's
   stretched title link. */
.background {
  --tap: 2.75rem;
  --gap: 0.4em;
  --tap-block: calc((var(--tap) - 0.7em) / 2);
  --tap-end: calc(var(--tap) - 0.6em - var(--gap));
  position: relative;
  z-index: 1;
  display: inline-block;
  padding-block: var(--tap-block);
  padding-inline: var(--gap) var(--tap-end);
  margin-block: calc(-1 * var(--tap-block));
  margin-inline: 0 calc(-1 * var(--tap-end));
  line-height: 0;
  vertical-align: middle;
  transition: color 120ms;
}

/* The halo a hover or the keyboard shows behind the ▶, so the reader sees where a press lands: a
   round centred on the mark, as wide as the tap area allows before it would cover the name. */
.background::before {
  --halo: calc(2 * (var(--gap) + 0.3em));
  position: absolute;
  inset-block-start: calc(50% - 0.11em - var(--halo) / 2);
  inset-inline-start: 0;
  z-index: -1;
  width: var(--halo);
  height: var(--halo);
  border-radius: 50%;
  background: var(--surface);
  content: "";
  opacity: 0;
  transition: opacity 120ms;
}

.background:is(:hover, :focus-visible)::before {
  opacity: 1;
}

.background:is(:hover, :focus-visible) {
  color: var(--fg);
}

.background .triangle {
  display: block;
  width: 0.6em;
  height: 0.7em;
  background: var(--accent);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  /* Level with the name's capitals, as the "Dinle" pill's ▶ is, not with its lowercase letters. */
  translate: 0 -0.11em;
  transition: background-color 120ms;
}

.background:is(:hover, :focus-visible) .triangle {
  background: var(--fg);
}

.background:active .triangle {
  scale: 0.9;
}

/* While its song plays, the ▶ shows the pill's moving bars in the triangle's place and size. */
.background .bars {
  display: none;
}

.background.playing .bars {
  display: inline-flex;
  align-items: flex-end;
  justify-content: space-between;
  width: 0.6em;
  height: 0.7em;
  translate: 0 -0.11em;
}

.background.playing .triangle {
  display: none;
}

.background .bars i {
  width: 0.14em;
  height: 100%;
  background: currentColor;
  transform-origin: bottom;
  animation: bar 0.9s ease-in-out infinite alternate;
}

.background .bars i:nth-child(2) {
  animation-delay: -0.3s;
}

.background .bars i:nth-child(3) {
  animation-delay: -0.6s;
}

/* What a press on a ▶ did, for a moment: one slim bar fixed to the bottom of the screen, centred
   inside the page's gutter and above the safe area. It takes no taps, and while empty it has no box,
   so it never covers or moves anything. */
.background-note {
  position: fixed;
  inset-inline: 16px;
  inset-block-end: calc(16px + env(safe-area-inset-bottom));
  z-index: 2;
  max-width: 28rem;
  margin-inline: auto;
  padding: 0.5rem 1rem;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
  color: var(--fg);
  font-size: var(--size-2);
  line-height: 1.4;
  text-align: center;
  pointer-events: none;
}

.background-note:empty {
  padding: 0;
  border: 0;
  box-shadow: none;
}

.background-note .triangle {
  display: inline-block;
  width: 0.6em;
  height: 0.7em;
  margin-inline-end: 0.5em;
  background: var(--accent);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.background-note:not(:empty) {
  animation: note-in 0.3s ease-out;
}

.background-note.leaving {
  opacity: 0;
  transition: opacity 0.3s;
}

@keyframes note-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* For a reader who asks for less motion the ▶'s bars stand still (the pill's after their own rule), a
   press does not shrink it, and the note appears and goes at once. These come after the rules they
   still, so they win. */
@media (prefers-reduced-motion: reduce) {
  .background .bars i {
    animation: none;
  }

  .background:active .triangle {
    scale: none;
  }

  .background-note:not(:empty) {
    animation: none;
  }

  .background-note.leaving {
    transition: none;
  }
}

/* Beside the large title the ▶ is about 1rem tall. */
.song-heading .background {
  font-size: var(--size-5);
}

/* The title's capitals are larger than the ▶, so it rises further in its own em. */
.song-heading .background .triangle {
  translate: 0 -0.23em;
}

.song-heading .background.playing .bars {
  translate: 0 -0.23em;
}

.song-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
  gap: 2rem 3rem;
}

.lyrics {
  font-size: var(--size-5);
  line-height: 1.7;
}

.lyrics > p:first-child {
  margin-block-start: 0;
}

/* The song files mark the lyrics as emphasis; they read better upright. */
.lyrics em {
  font-style: normal;
}

/* The note under the lyrics: how to send a correction, set apart and small. */
.song-note {
  margin-block-start: 2rem;
  color: var(--muted);
  font-size: var(--size-1);
}

.song-note > p {
  margin: 0;
}

aside h2 {
  margin-block: 0 0.75rem;
  color: var(--muted);
  font-size: var(--size-4);
}

aside ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

aside li + li {
  margin-block-start: 0.6rem;
}

/* The two song columns sit side by side from about this width. */
@media (min-width: 58rem) {
  aside {
    padding-inline-start: 2rem;
    border-inline-start: 1px solid var(--rule);
  }
}

.intro {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
  align-items: end;
  gap: 2rem 3rem;
  margin-block: 2.5rem 3.5rem;
}

.intro-text {
  font-size: var(--size-5);
  line-height: 1.4;
}

/* "Merhaba," is the home page's heading, set as the paragraph it was before. */
.intro-text > h1 {
  margin-block: 0 1em;
  color: var(--accent);
  font-size: var(--size-8);
  font-style: italic;
  font-weight: 400;
  line-height: 1.1;
}

.newest {
  margin: 0;
}

.newest img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 4px;
  background: var(--surface);
}

.newest figcaption {
  margin-block-start: 0.6rem;
  color: var(--muted);
}

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  margin-block-end: 1.25rem;
}

.section-head h2 {
  margin: 0;
}

.sections {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 2rem 1.75rem;
  margin-block-start: 3.5rem;
  padding-block-start: 1.5rem;
  border-block-start: 1px solid var(--rule);
}

.sections h2 {
  margin-block: 0 0.5rem;
}

/* Siyah & Beyaz until its photos arrive: one quiet line after the sections. */
.photos-line {
  margin-block: 2rem 0;
  color: var(--muted);
}

/* Siyah & Beyaz: the photos three across, two on a phone, each in its own shape, never cropped. */
.photos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem 1.5rem;
  align-items: start;
  margin: 0;
  padding: 0;
  list-style: none;
}

.photos a {
  display: grid;
  gap: 0.15rem;
  color: inherit;
  text-decoration: none;
}

.photos img {
  display: block;
  width: 100%;
  height: auto;
  margin-block-end: 0.4rem;
}

.photos .photo-title {
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-underline-offset: 0.2em;
}

.photos a:hover .photo-title {
  text-decoration-color: currentColor;
}

.photos .photo-date,
.photo-date,
.camera {
  color: var(--muted);
  font-size: var(--size-2);
}

.home-photos {
  margin-block: 2.5rem 3rem;
}

/* A photo's own page: as large as the page allows and never taller than the screen. */
.photo-full {
  margin: 1.5rem 0 1.25rem;
}

.photo-full img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 88vh;
  max-height: 88svh;
  margin-inline: auto;
}

.photo-full + h1 {
  margin-block-end: 0.25rem;
}

.photo-date {
  margin-block: 0 1rem;
}

.photo-nav {
  margin-block: 2rem 0;
}

@media (max-width: 40rem) {
  .photos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem 1rem;
  }

  /* The home page shows two on a phone. */
  .home-photos .photos li:nth-child(n + 3) {
    display: none;
  }
}

/* The home page's bridge band under the intro, on the surface of a question card: what the course is,
   the pill to start or go on, the newest lesson and the parts. */
.bric-band {
  display: grid;
  gap: 1rem;
  margin-block: 0 3.5rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--surface);
}

.bric-band .section-head {
  margin: 0;
}

.bric-band .lede {
  max-width: 52ch;
  margin: 0;
}

.bric-band .pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
}

.bric-band .pills p {
  margin: 0;
}

.bric-band .newest-lesson {
  color: var(--muted);
}

.bric-band .newest-label {
  margin-inline-end: 0.4rem;
  color: var(--new);
}

.bric-band .parts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  margin: 0;
  padding: 0;
  color: var(--muted);
  list-style: none;
}

.bric-band .part-letter {
  font-weight: 700;
}

.trail {
  margin-block: 2rem 0;
  color: var(--muted);
}

.trail a,
.trail a:visited {
  color: var(--muted);
}

.trail + h1 {
  margin-block: 0.5rem 1rem;
}

.lessons {
  padding-inline-start: 0;
  list-style: none;
}

.lessons li + li {
  margin-block-start: 0.5rem;
}

/* A returning reader's progress, drawn from the progress the browser keeps. */
.lessons .dots {
  display: inline-flex;
  margin-block: 0;
  margin-inline-start: 0.75rem;
  vertical-align: middle;
}

.lessons .dots li + li {
  margin-block-start: 0;
}

.lessons .done {
  margin-inline-start: 0.5rem;
  color: var(--accent);
}

.resume {
  margin-block: 1rem 1.25rem;
}

/* Practice without JavaScript: every question with its answer, and this line about progress. */
.progress-note {
  color: var(--muted);
}

/* The bridge page's parts: a heading row with the count, a one-line intro, then the lessons. */
.part {
  margin-block: 2rem;
}

.part .section-head {
  margin-block-end: 0.25rem;
}

.part-count {
  color: var(--muted);
}

.part-count .done {
  color: var(--accent);
}

.part-intro {
  color: var(--muted);
}

.part-intro > p {
  margin: 0;
}

/* The bridge page's index: each line a link and what it holds. */
.index-list {
  display: grid;
  gap: 0.6rem;
  padding: 0;
  list-style: none;
}

.index-note {
  color: var(--muted);
}

/* The terms page: each term with its English term, its lesson at the right and its first sentence
   below. */
.terms {
  display: grid;
  gap: 1rem;
  max-width: 44rem;
  margin-block: 1rem 2.5rem;
  padding: 0;
  list-style: none;
}

.terms li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.1rem 1rem;
}

.term-english {
  margin-inline-start: 0.4rem;
  color: var(--muted);
  font-style: italic;
}

.term-lesson {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.terms .term-summary {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
}

/* A term's page: the English term under the heading, and its lessons with their counts. */
/* A term's pills: its lesson and Antrenman on its questions, wrapping on a phone. */
.term-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.in-english {
  margin-block: -0.5rem 1.25rem;
  color: var(--muted);
  font-style: italic;
}

.term-lessons {
  padding: 0;
  list-style: none;
}

.term-lessons li + li {
  margin-block-start: 0.5rem;
}

.term-counts {
  color: var(--muted);
}

.next-part {
  margin-block: 2rem;
  color: var(--muted);
}

/* An action: Site Sans at 600, outlined in the accent, at least 44px tall. */
.pill,
.pill:visited {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.4rem 1.25rem;
  border: 1px solid var(--accent);
  border-radius: 999px;
  color: var(--accent);
  font-family: var(--sans);
  font-size: var(--size-3);
  font-weight: 600;
  text-decoration: none;
}

.pill:is(:hover, :focus-visible) {
  background: var(--surface);
}

/* The view's main action, filled in the accent. */
:is(a, button).pill.main {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--bg);
}

:is(a, button).pill.main:is(:hover, :focus-visible) {
  box-shadow: 0 0 0 3px var(--rule);
}

/* A hidden pill, such as the row's "Geri al" beside a warning box, stays hidden. */
.pill[hidden] {
  display: none;
}

/* The lesson page's question cards, two or three in a row on a wide screen, one on a phone. */
.questions {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  gap: 1.5rem;
  margin-block: 1.5rem 2rem;
}

.questions .question {
  margin-block: 0;
}

/* A question card: its number, the table, the question and the answer behind a disclosure. */
.question {
  margin-block: 2rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--surface);
}

.question-number {
  margin-block: 0 1rem;
  color: var(--muted);
}

/* A whole hand's contract above its table; the suit symbol sits close to the level. */
.contract {
  margin-block: 0 0.5rem;
  color: var(--muted);
}

.contract .sym {
  width: auto;
}

/* The felt in the middle of the table; it may hold one trick, each card on its player's side. */
.felt {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "west north east"
    "west . east"
    "west south east";
  place-items: center;
  width: 190px;
  max-width: 100%;
  aspect-ratio: 1;
  margin-inline: auto;
  padding: 8px;
  border: 1px solid var(--felt-edge);
  border-radius: 10px;
  background: var(--felt);
  box-shadow: inset 0 0 24px rgb(0 0 0 / 45%);
}

.felt .face {
  display: grid;
  place-items: center;
  width: 48px;
  height: 68px;
  border-radius: 4px;
  background: var(--card-face);
  color: #16110d;
  font-size: var(--size-5);
}

.felt .winner {
  outline: 3px solid var(--accent);
}

.felt .north {
  grid-area: north;
}

.felt .west {
  grid-area: west;
}

.felt .east {
  grid-area: east;
}

.felt .south {
  grid-area: south;
}

.score {
  margin-block: 0.5rem 0;
  color: var(--muted);
  font-size: var(--size-2);
  white-space: nowrap;
}

/* The table, compact: North on top, West and East right beside the felt, South below. */
.table {
  display: grid;
  grid-template-columns: auto 190px auto;
  grid-template-areas:
    ". north ."
    "west middle east"
    ". south .";
  align-items: center;
  justify-content: center;
  column-gap: 22px;
  row-gap: 0.75rem;
  max-width: 480px;
  margin-block: 0;
  margin-inline: auto;
  text-align: center;
}

.table .hand.north {
  grid-area: north;
}

.table .hand.west {
  grid-area: west;
  justify-self: end;
}

.table .middle {
  grid-area: middle;
}

.table .hand.east {
  grid-area: east;
  justify-self: start;
}

.table .hand.south {
  grid-area: south;
}

/* On the lesson page the question cards' tables are smaller. */
.table.small {
  grid-template-columns: auto 120px auto;
  margin-block-end: 1rem;
}

.table.small .felt {
  width: 120px;
}

.table.small .cards {
  font-size: var(--size-4);
}

/* A whole hand: each hand a line per suit, spades to clubs, the symbol before the cards. Hearts and
   diamonds are red, but the symbol's shape alone tells the suit. */
.table.whole {
  grid-template-columns: auto 170px auto;
  column-gap: 18px;
  max-width: 620px;
}

.table.whole .felt {
  width: 170px;
}

.holdings {
  display: grid;
  gap: 0.1rem;
  justify-items: start;
  font-size: var(--size-4);
  white-space: nowrap;
}

.table.whole .hand.north .holdings,
.table.whole .hand.south .holdings {
  margin-inline: auto;
}

/* In a question card a whole hand is narrow, as on a phone: West and East side by side under the
   felt. */
.table.whole.small {
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "north north"
    "middle middle"
    "west east"
    "south south";
  column-gap: 12px;
  row-gap: 0.6rem;
}

.table.whole.small .hand.west {
  justify-self: start;
}

.table.whole.small .hand.east {
  justify-self: end;
}

.table.whole.small .felt {
  width: 120px;
}

.suit-row {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
}

.sym {
  display: inline-block;
  width: 1em;
  color: var(--fg);
  text-align: center;
}

.sym.red {
  color: var(--suit-red);
}

/* On a card face the symbol takes the face's dark ink, the red suits their dark red. It takes only its
   own width and stays on the rank's line, so that a 10 fits a phone's narrow face. */
.felt .face > span {
  white-space: nowrap;
}

.felt .face .sym {
  width: auto;
  margin-inline-end: 0.1em;
  color: #16110d;
}

.felt .face .sym.red {
  color: var(--card-red);
}

.hand {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.25rem;
}

.seat {
  color: var(--muted);
  font-size: var(--size-2);
  font-variant-caps: small-caps;
}

.seat.you {
  color: var(--accent);
}

/* The seat that leads: "▸" in Site Sans, which has it, where Pagella has none. */
.seat .marker {
  margin-inline-end: 0.25em;
  color: var(--accent);
  font-family: var(--sans);
}

.cards {
  font-size: var(--size-5);
  white-space: nowrap;
}

/* A points or shape question's hand: the reader's alone, one row per suit; counted, the honours in
   the accent, each suit's points at the right, and the total under a rule; on a shape question each
   suit's length, the longest in the accent, and the shape under the rule. */
.points-hand .hand-points {
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.points-hand th,
.points-hand td {
  padding: 0.15rem 0;
  text-align: left;
  vertical-align: baseline;
}

.points-hand th.sym {
  display: table-cell;
  width: 1.4em;
  font-size: var(--size-5);
  font-weight: normal;
}

.points-hand .ranks {
  padding-inline-end: 1.5rem;
  font-size: var(--size-5);
  white-space: nowrap;
  word-spacing: 0.15em;
}

.points-hand .ranks b {
  color: var(--accent);
}

.points-hand .points {
  color: var(--muted);
  text-align: right;
  white-space: nowrap;
}

.points-hand .points b {
  color: var(--accent);
}

.points-hand .total th,
.points-hand .total td {
  border-top: 1px solid var(--rule);
  padding-top: 0.4rem;
  color: var(--muted);
  font-weight: normal;
}

.points-hand .total .points {
  color: var(--fg);
  font-weight: 700;
}

/* On a length or shortness board: the trumps in a line above the hand; counted, what each suit's
   length or shortness adds, in the text colour, then the honour points under the rule and the total
   right under them. */
.points-hand .trump-line {
  margin-block: 0 0.5rem;
}

.points-hand .extra {
  padding-inline-start: 1rem;
  font-size: var(--size-3);
  color: var(--fg);
  white-space: nowrap;
}

.points-hand .honours th,
.points-hand .honours td {
  border-top: 1px solid var(--rule);
  padding-top: 0.4rem;
  color: var(--muted);
  font-weight: normal;
}

.points-hand .honours + .total th,
.points-hand .honours + .total td {
  border-top: 0;
  padding-top: 0.15rem;
}

/* On a corrected board a long suit that is not good reads muted, and a 4-3-3-3 hand has a row of its
   own between the honour points and the total. */
.points-hand .extra.not-counted {
  color: var(--muted);
}

.points-hand .flat th,
.points-hand .flat td {
  padding-top: 0.15rem;
  color: var(--muted);
  font-weight: normal;
  white-space: nowrap;
}

.points-hand .flat + .total th,
.points-hand .flat + .total td {
  border-top: 0;
  padding-top: 0.15rem;
}

/* On an opening board: the position under the seat, muted; counted, a header over the two columns,
   each suit's points and quick tricks, and under the hand the checks for that position, each with a
   ✓ in the accent or what it falls short of, muted. Their labels wrap on a narrow screen. */
.points-hand .seat-line {
  margin-block: -0.75rem 0.75rem;
  color: var(--muted);
  font-size: var(--size-2);
}

.points-hand .columns th {
  color: var(--muted);
  font-size: var(--size-2);
  font-weight: normal;
  text-align: right;
}

.points-hand .columns th + th {
  padding-inline-start: 1rem;
  text-align: left;
}

.points-hand .checks {
  max-width: 100%;
  margin-block-start: 0.5rem;
  border-collapse: collapse;
  font-size: var(--size-3);
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}

.points-hand .checks th {
  padding-inline-end: 0.75rem;
  color: var(--muted);
  font-weight: normal;
}

.points-hand .checks td {
  padding-inline-end: 0.75rem;
  white-space: nowrap;
}

.points-hand .checks .ok {
  color: var(--accent);
  font-weight: 700;
}

.points-hand .checks .no {
  padding-inline-end: 0;
  color: var(--muted);
}

/* A suit symbol in running text, above the hand or in the contract line, takes only its own width. */
:is(.contract, .trump-line) .sym {
  width: auto;
}

/* A lesson view: the table on the left, the panel on the right; on a phone the panel goes under. */
.lesson {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  align-items: start;
  gap: 2rem 3rem;
  margin-block: 1.5rem;
}

.panel h2 {
  margin-block: 0.25rem 0.75rem;
  font-size: var(--size-5);
}

.panel .question-number {
  margin-block: 0;
}

/* The lesson's steps as state: the current one a filled segment in the text's colour and weight, the
   others muted. */
.steps {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  margin-block: 0 1.5rem;
  padding: 0;
  list-style: none;
}

.steps a,
.steps a:visited {
  display: inline-block;
  padding: 0.1rem 0.6rem;
  border-radius: 6px;
  color: var(--muted);
  text-decoration: none;
}

.steps a[aria-current="step"] {
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--rule);
  color: var(--fg);
  font-weight: 600;
}

.question-text,
.leader {
  margin-block: 0.5rem;
}

.leader {
  color: var(--muted);
}

.question details {
  margin-block-start: 1rem;
}

.question summary {
  color: var(--accent);
  cursor: pointer;
}

/* A hand of the week in its note: the diagram, the question with its answer closed, then the code
   to put it on another site. */
.weekly-hand {
  margin-block: 1.5rem;
}

.weekly-hand p {
  max-width: none;
}

.weekly-hand .question-text {
  text-align: center;
}

.weekly-hand .answer {
  text-align: center;
}

.weekly-hand .answer summary {
  color: var(--accent);
  cursor: pointer;
}

/* Under a whole-hand example: the code another site pastes to show it, and a link to see it. */
.embed {
  max-width: 480px;
  margin-block-start: 1rem;
  margin-inline: auto;
  font-size: var(--size-2);
}

/* On a song's page the box sits with the lyrics, left-aligned in their column. */
.song-columns .embed {
  margin-inline: 0;
}

.embed summary {
  color: var(--accent);
  cursor: pointer;
}

.embed label {
  display: grid;
  gap: 0.35rem;
  margin-block-start: 0.5rem;
  color: var(--muted);
}

.embed textarea {
  box-sizing: border-box;
  width: 100%;
  padding: 0.5rem;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--surface);
  color: var(--fg);
  font: 0.8rem/1.4 ui-monospace, monospace;
  resize: vertical;
}

.embed p {
  margin-block: 0.5rem 0;
}

/* The Sitene ekle page: each widget's live example, as another site would show it. */
.embed-example {
  margin-block: 1rem;
}

.embed-example iframe {
  display: block;
}

/* Practice: progress dots, then one question with a button per number of tricks. */
.dots {
  display: flex;
  gap: 0.5rem;
  margin-block: 1rem;
  padding: 0;
  list-style: none;
}

.dots li {
  width: 0.75rem;
  height: 0.75rem;
  border: 1px solid var(--muted);
  border-radius: 50%;
}

.dots .answered {
  border-color: var(--accent);
  background: var(--accent);
}

.dots .current {
  border-color: var(--fg);
  background: var(--fg);
}

/* Antrenman's rounds: a dot per question, green when right and red when wrong. */
.dots .right {
  border-color: var(--good);
  background: var(--good);
}

.dots .wrong {
  border-color: var(--suit-red);
  background: var(--suit-red);
}

/* A hand of several questions: its parts' dots in one ring on the progress line. */
.dots li.ring,
.ring {
  display: inline-flex;
  gap: 0.3rem;
  align-items: center;
  width: auto;
  height: auto;
  padding: 0.15rem 0.35rem;
  border: 1px solid var(--accent);
  border-radius: 999px;
  vertical-align: middle;
}

.dots li.ring {
  background: none;
}

.dots i,
.ring i {
  display: block;
  width: 0.75rem;
  height: 0.75rem;
  border: 1px solid var(--muted);
  border-radius: 50%;
}

.ring i.answered {
  border-color: var(--accent);
  background: var(--accent);
}

.ring i.current {
  border-color: var(--fg);
  background: var(--fg);
}

/* A later part: the tricks played since the hand's start, each with its number, its cards and what
   played it. */
.hand-tricks {
  display: grid;
  align-self: stretch;
  gap: 0.15rem;
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--size-2);
  font-variant-numeric: tabular-nums;
}

.hand-tricks li {
  display: grid;
  grid-template-columns: 2em minmax(0, 1fr) auto;
  gap: 0.5rem;
  padding-block: 0.1rem;
  border-block-end: 1px solid var(--rule);
}

.hand-tricks .trick-number,
.hand-tricks .trick-note {
  color: var(--muted);
}

.hand-tricks .trick-note {
  font-style: italic;
}

/* A hand's end: its score, then a line per part. */
.hand-end {
  margin-block: 1.25rem;
}

.hand-score {
  margin-block: 0 0.5rem;
  font-weight: 700;
}

.hand-parts {
  display: grid;
  gap: 0.3rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hand-parts .right::first-letter {
  color: var(--good);
}

.hand-parts .wrong::first-letter {
  color: var(--suit-red);
}

/* Antrenman's start: the parts as chips that wrap, chosen ones filled in the accent. */
.round-start,
.round-end {
  max-width: 40rem;
}

.round-intro {
  max-width: 52ch;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-block: 1rem;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  padding: 0.25rem 0.9rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: none;
  color: var(--fg);
  font: inherit;
}

.chip small {
  color: var(--muted);
  font-size: var(--size-1);
  font-variant-numeric: tabular-nums;
}

button.chip {
  cursor: pointer;
}

button.chip:is(:hover, :focus-visible) {
  border-color: var(--accent);
}

button.chip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.chip.on {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--bg);
}

.chip.on small {
  color: var(--bg);
}

.chip.off {
  border-style: dashed;
  color: var(--muted);
}

.chip.topic {
  border-color: var(--accent);
  color: var(--accent);
}

.chip.topic a {
  padding-inline: 0.4rem;
  color: inherit;
  text-decoration: none;
}

.round-sum,
.round-note {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.round-note {
  font-size: var(--size-2);
}

/* A round's bar above the question: its dots, then where the round is; the count goes under the
   dots when the line is too narrow, and the dots wrap. */
.round-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  margin-block-end: 0.75rem;
  padding-block-end: 0.5rem;
  border-bottom: 1px solid var(--rule);
}

.round-bar .dots {
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0;
}

.round-bar .dots .current {
  border-color: var(--accent);
  background: var(--accent);
}

.round-count {
  margin: 0;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* The end of a round: the score, its dots, then a row per lesson with the lesson's dots. */
.round-score {
  margin-block: 1rem 0;
  font-size: var(--size-5);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.round-end > .dots {
  flex-wrap: wrap;
}

.round-lessons {
  margin-block: 1rem 1.5rem;
  padding: 0;
  list-style: none;
}

.round-lessons li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  padding-block: 0.3rem;
}

.round-lessons a {
  min-width: 0;
}

.round-lessons .dots {
  flex: none;
  flex-wrap: wrap;
  max-width: 60%;
  justify-content: end;
  gap: 0.35rem;
  margin: 0;
}

.round-lessons .dots li {
  padding: 0;
}

/* A count question's answers: one ruler-like strip, the numbers in equal cells split by a rule. A cell
   is a fourteenth of the strip while that is at least 2.25rem, so that "10 11 12 13" read apart, else a
   seventh: two rows of seven. Each cell's top and left rule hides under the box's edge or its
   neighbour, so every line is 1px. A short range is as wide as its cells, on one line. */
.counts {
  display: flex;
  flex-wrap: wrap;
  max-width: 30rem;
  margin-block: 1.25rem;
  border: 1px solid var(--rule);
  border-radius: 6px;
  overflow: hidden;
  font-variant-numeric: tabular-nums;
}

.counts > * {
  flex: 1 0 clamp(100% / 14, (14 * 2.25rem - 100%) * 999, 100% / 7);
  display: grid;
  place-items: center;
  min-height: 44px;
  margin: -1px 0 0 -1px;
  padding: 0;
  border: 0;
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
  background: var(--bg);
  color: var(--muted);
  font: inherit;
  font-family: var(--sans);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  cursor: pointer;
}

.counts.short {
  display: inline-flex;
  flex-wrap: nowrap;
  max-width: 100%;
}

.counts.short > * {
  flex: 0 1 2.75rem;
  width: 2.75rem;
  min-width: 24px;
}

/* A points question's 26 cells: two rows of 13 while a cell is at least 2.25rem, else three rows of
   nine. */
.counts.points > * {
  flex: 1 0 clamp(100% / 13, (13 * 2.25rem - 100%) * 999, 100% / 9);
}

/* A losers question's 13 cells: two rows, of seven and six, at every width, each cell the size of
   the points strip's: seven of thirteen across 30rem, or seven of nine across the column. */
.counts.losers {
  width: min(100% * 7 / 9, 30rem * 7 / 13);
}

.counts.losers > * {
  flex: 0 0 calc(100% / 7);
}

/* A quick tricks question's 17 cells, 0 to 8 in half steps: two rows, of nine and eight, at every
   width, each cell the size of the points strip's: nine of thirteen across 30rem, or nine of nine
   across the column. */
.counts.quick {
  width: min(100%, 30rem * 9 / 13);
}

.counts.quick > * {
  flex: 0 0 calc(100% / 9);
}

/* An opening question's two cells, open and pass, sharing at most 20rem. */
.counts.opening {
  max-width: 20rem;
}

.counts.opening > * {
  flex: 1 0 50%;
}

/* A shape in running text, as "4-4-3-2", never broken at its hyphens. */
.shape-name {
  white-space: nowrap;
}

/* A shape question's answers: the twelve shapes in two labelled groups, each the strip's look, three
   cells a row. */
.shapes {
  max-width: 30rem;
  margin-block: 1.25rem;
}

.shapes .group {
  margin-block: 0.75rem 0.35rem;
  color: var(--muted);
  font-size: var(--size-4);
  line-height: 1.2;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.04em;
}

.shapes .group:first-child {
  margin-block-start: 0;
}

.shapes .counts {
  margin-block: 0;
}

.counts.shape > * {
  flex: 1 0 calc(100% / 3);
}

.counts > :is(:hover, :focus-visible):not(:disabled) {
  background: var(--surface);
  color: var(--fg);
}

.counts > :focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.counts .chosen {
  background: var(--accent);
  color: var(--bg);
  font-weight: 700;
  cursor: default;
}

.counts .right {
  box-shadow: inset 0 -3px 0 var(--accent);
  color: var(--fg);
  font-weight: 700;
  cursor: default;
}

.counts .faded {
  opacity: 0.45;
  cursor: default;
}

button.pill {
  min-width: 44px;
  min-height: 44px;
  padding: 0.4rem 1.25rem;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: var(--bg);
  color: var(--accent);
  font: inherit;
  font-family: var(--sans);
  font-size: var(--size-3);
  font-weight: 600;
  cursor: pointer;
}

button.pill:is(:hover, :focus-visible) {
  background: var(--surface);
}

button.pill:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* On defence the reader's hand reads as a hand diagram, a line per suit; each rank is a button that
   looks like text, each the same width for an even rhythm, in a tap area that does not show. A chosen
   rank becomes a small card face, a right one is underlined, the others fade. */
.rank {
  min-width: 1.6rem;
  min-height: 2.25rem;
  padding: 0 0.12em;
  text-align: center;
  border: 0;
  border-radius: 4px;
  background: none;
  color: var(--fg);
  font: inherit;
  font-size: var(--size-4);
  line-height: 1;
  cursor: pointer;
}

.rank:is(:hover, :focus-visible):not(:disabled) {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
}

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

.rank:disabled {
  cursor: default;
}

.rank.chosen {
  min-height: 0;
  height: 1.6em;
  margin-block: calc((2.25rem - 1.6em) / 2);
  background: var(--card-face);
  color: #16110d;
  box-shadow: 0 2px 6px rgb(0 0 0 / 35%);
}

.rank.chosen.red {
  color: var(--card-red);
}

.rank.right {
  box-shadow: inset 0 -2px 0 var(--accent);
}

.rank.chosen.right {
  box-shadow:
    0 2px 6px rgb(0 0 0 / 35%),
    inset 0 -2px 0 var(--accent);
}

.rank.faded {
  opacity: 0.45;
}

/* Playing the hand ("Eli oyna"): the reader plays declarer's and dummy's cards. The hand on turn's
   legal cards are boxes a tap wide, each with its count under a thin line, shown only with the hints
   on; the box keeps its size without it. Any other card is plain and muted. A defender's hand is a
   dashed box naming its count until "Bütün eller". */
.play-set {
  display: contents;
}

.hand.playing .ranks {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.rank.play-card {
  display: inline-grid;
  grid-template-rows: auto auto;
  align-content: center;
  justify-items: center;
  min-width: 2.2rem;
  min-height: 2.75rem;
  padding: 3px 4px;
  border: 1px solid var(--rule);
  line-height: 1.15;
}


.rank.play-card sub {
  width: 100%;
  margin-block-start: 2px;
  padding-block-start: 2px;
  border-block-start: 1px solid var(--rule);
  color: var(--muted);
  font-size: var(--size-1);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  vertical-align: baseline;
  visibility: hidden;
}

#play-root.hints .rank.play-card sub {
  visibility: visible;
}

.rank.play-card sub.best {
  color: var(--good);
  font-weight: 700;
}

.play-set:disabled .rank.play-card {
  opacity: 0.6;
  cursor: progress;
}

span.rank.off,
span.rank.off:hover {
  display: inline-block;
  min-height: 0;
  background: none;
  color: var(--muted);
  cursor: default;
}

.hidden-hand {
  min-width: 6.5em;
  padding: 0.6rem 0.75rem;
  border: 1px dashed var(--rule);
  border-radius: 6px;
  color: var(--muted);
  font-size: var(--size-2);
  text-align: center;
}

.play-score {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: start;
  gap: 0.15rem 1.4rem;
  font-variant-numeric: tabular-nums;
}

.play-score span {
  color: var(--muted);
  font-size: var(--size-1);
}

.play-score b {
  font-size: var(--size-5);
}

.play-line {
  margin-block: 1rem 0;
}

/* Partner's method under the contract, what partner said with its last card, and the reader's
   right card for partner's ruff. */
.signal-method,
.play-signal,
.play-preference {
  color: var(--muted);
  overflow-wrap: anywhere;
}

.signal-method {
  margin-block: -0.25rem 0.5rem;
}

.play-signal,
.play-preference {
  margin-block: 1rem 0;
}

.play-signal + .play-preference,
:is(.play-signal, .play-preference) + .play-line {
  margin-block-start: 0.25rem;
}

.play-refused {
  margin-block: 0.75rem 0;
  color: var(--suit-red);
}

.play .msg {
  margin-block: 1rem 0;
  padding: 0.75rem 1rem;
  border: 1px solid var(--rule);
  border-inline-start: 3px solid var(--suit-red);
  border-radius: 8px;
  background: var(--surface);
}

.play .msg p {
  margin-block: 0.25rem;
}

.play .msg .buttons {
  margin-block: 0.75rem 0;
}

.pill.quiet,
.pill.quiet:visited {
  border-color: var(--rule);
  color: var(--muted);
}

button.pill.toggle.on {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--bg);
}

/* The end of a hand: the tricks taken against best play and the contract's result, then a row per
   trick, its number, its four cards with the winner's bold, and who took it; a trick that cost
   declarer's side a trick shows the costly card and the cost in red. */
.play-summary {
  margin-block: 0;
  font-size: var(--size-5);
  font-weight: 700;
  text-wrap: balance;
}

.play-result {
  margin-block: 0.5rem 1rem;
}

.play-result .sym {
  width: auto;
}

.play-tricks {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) auto;
  gap: 0.15rem 0.5rem;
  margin: 0;
  padding: 0;
  font-variant-numeric: tabular-nums;
  list-style: none;
}

.play-tricks li {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  padding-block: 0.15rem;
  border-block-end: 1px solid var(--rule);
}

.play-tricks .number,
.play-tricks .outcome {
  color: var(--muted);
}

/* A claim's numbers, "9–13", stay on one line. */
.play-tricks .number {
  min-width: 1.25rem;
  white-space: nowrap;
}

.play-tricks .cost {
  color: var(--suit-red);
}

/* The reader's place on the felt while it is their turn. */
.felt .face.empty {
  border: 1px dashed color-mix(in srgb, var(--card-face) 45%, transparent);
  background: none;
}

/* An opening lead: a small compass beside the contract and the reader's seat, then the hand alone.
   The reader's letter is in the accent, declarer's underlined. */
.lead {
  display: flex;
  gap: 1.1rem;
  align-items: center;
  margin-block-end: 1.25rem;
}

.lead .contract {
  margin: 0;
  color: var(--fg);
  font-size: var(--size-3);
}

.lead-seat {
  margin: 0;
  color: var(--muted);
  font-size: var(--size-2);
}

.compass {
  display: grid;
  flex: none;
  grid-template-columns: 1.3rem 2.6rem 1.3rem;
  grid-template-rows: 1.4rem 2.6rem 1.4rem;
  place-items: center;
  color: var(--muted);
  font-size: var(--size-2);
}

.compass .north {
  grid-area: 1 / 2;
}

.compass .west {
  grid-area: 2 / 1;
}

.compass .felt-mark {
  grid-area: 2 / 2;
  width: 2.4rem;
  height: 2.4rem;
  border: 1px solid var(--felt-edge);
  border-radius: 5px;
  background: var(--felt);
}

.compass .east {
  grid-area: 2 / 3;
}

.compass .south {
  grid-area: 3 / 2;
}

.compass .you {
  color: var(--accent);
  font-weight: 700;
}

.compass .declarer {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.reader-hand {
  margin: 0;
}

.reader-hand .suit-row {
  gap: 0.35rem;
}

.help {
  color: var(--muted);
}

/* A worked example's tricks so far, the current one in the accent. */
.suits {
  margin-block: 0.75rem 1rem;
  padding-inline-start: 0;
  list-style: none;
}

.suits li {
  margin-block: 0.35rem;
  color: var(--muted);
}

.suits .current {
  color: var(--accent);
}

.buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-block: 1.25rem 0;
}

/* Under the end of a lesson's practice: two small links. */
.links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  font-size: var(--size-2);
}

button.link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  text-decoration-line: underline;
  text-underline-offset: 0.15em;
  cursor: pointer;
}

button.link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.next-lesson {
  margin-block: 2rem 0;
}

/* The status box: whether an answer was right, and why. */
.result {
  margin-block: 1.25rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--surface);
}

.result p {
  margin-block: 0.25rem;
}

.result p:first-child {
  font-size: var(--size-4);
}

.notes {
  padding-inline-start: 0;
  list-style: none;
}

.notes li + li {
  margin-block-start: 0.5rem;
}

/* Blue means notes: a note's trail and the dates of the list. */
.notes time {
  color: var(--new);
}

.trail.note,
.trail.note a,
.trail.note a:visited {
  color: var(--new);
}

/* A heading in a note or a page has twice the room above it as below, so that it groups with the
   text it opens. */
.text h2 {
  margin-block: 1.6em 0.8em;
}

/* The markers of lists in a note or a page. */
.text li::marker {
  color: var(--accent);
}

/* Book cards: a small cover, then the title and the author. */
.books {
  display: grid;
  gap: 1rem;
  margin-block: 2rem;
  padding: 0;
  list-style: none;
}

.book,
.book:visited {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--fg);
  text-decoration: none;
}

.book img {
  flex: none;
  width: 64px;
  height: auto;
  border: 1px solid var(--rule);
  border-radius: 3px;
}

.book .book-text {
  display: flex;
  flex-direction: column;
}

.book .author {
  color: var(--muted);
}

a.book:is(:hover, :focus-visible) em {
  text-decoration: underline;
}

/* Below this width the panel goes under the table, and the newest note's line shows only on the home
   page, the one page whose content has the intro. */
/* A widget in another site's frame: the classic hand diagram at every width, small enough for a
   320px frame. North, the felt and South share one left edge; West's lines end at the felt's left
   edge and East's start at its right edge. Under it, a link back. */
main.widget {
  max-width: 480px;
  padding: 0.5rem;
}

/* The song widget: its name, its video, then its translation filling the rest of the frame and
   scrolling inside it, so the frame's height holds for any song. */
main.widget:has(> .translation) {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  height: 100vh;
  margin-inline: auto;
}

main.widget .song-line {
  margin-block: 0 0.4rem;
  text-align: center;
}

main.widget .song-line em {
  display: block;
  color: var(--accent);
}

main.widget video {
  display: block;
  flex: none;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 4px;
  background: var(--surface);
}

/* The translation 8px inside the widget's own 8px, so that no line runs within 16px of the frame. */
main.widget .translation {
  flex: 1;
  min-height: 0;
  padding-inline: 0.5rem;
  margin-block-start: 0.5rem;
  overflow-y: auto;
  text-align: center;
}

main.widget .translation p {
  margin-block: 0 0.8rem;
}

main.widget:has(> .translation) .back {
  flex: none;
  margin-block: 0.4rem 0;
}

/* The player widget: the song playing, its bar and buttons, then the list filling the rest of the frame
   and scrolling inside it, and a footer whose right side is the widget's link back. */
main.widget:has(> .player-widget) {
  display: grid;
  grid-template-rows: 1fr auto;
  box-sizing: border-box;
  height: 100vh;
  margin-inline: auto;
  padding: 12px 16px;
}

main.widget:has(> .player-widget) .back {
  grid-row: 2;
  grid-column: 1;
  justify-self: end;
  margin: 0;
  font-size: var(--size-1);
  line-height: 1.6;
}

.player-widget {
  display: grid;
  grid-row: 1 / 3;
  grid-column: 1;
  grid-template-rows: auto auto auto auto 1fr auto;
  grid-template-areas:
    "poster"
    "now"
    "position"
    "controls"
    "songs"
    "foot";
  gap: 10px;
  min-height: 0;
}

.player-widget .poster {
  position: relative;
  grid-area: poster;
}

/* The poster keeps 16:9 but never more than a third of the frame, so the list keeps four rows. */
.player-widget .poster img {
  display: block;
  width: 100%;
  max-height: 34vh;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 6px;
  background: var(--surface);
}

.player-widget .poster .meter {
  position: absolute;
  inset: auto auto 10px 10px;
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 14px;
  padding: 6px 8px;
  border-radius: 4px;
  background: var(--bg);
  color: var(--accent);
}

.player-widget .poster .meter[hidden] {
  display: none;
}

.player-widget .poster .meter i {
  width: 3px;
  height: 14px;
  background: currentColor;
  transform-origin: bottom;
  animation: bar 0.9s ease-in-out infinite alternate;
}

.player-widget .poster .meter i:nth-child(2) {
  animation-delay: -0.3s;
}

/* After the meter's rule, so that it wins: for a reader who asks for less motion the bars stand
   still. */
@media (prefers-reduced-motion: reduce) {
  .player-widget .poster .meter i {
    animation: none;
  }
}

.player-widget .poster .meter i:nth-child(3) {
  animation-delay: -0.6s;
}

.player-widget .poster .meter i:nth-child(4) {
  animation-delay: -0.45s;
}

.player-widget .now {
  display: flex;
  grid-area: now;
  gap: 12px;
  align-items: baseline;
  justify-content: space-between;
  min-width: 0;
}

.player-widget .names {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.player-widget .original,
.player-widget .original:visited {
  font-size: var(--size-4);
  font-style: italic;
  color: var(--fg);
}

.player-widget .subtitle {
  overflow: hidden;
  font-size: var(--size-2);
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--muted);
}

.player-widget .lyrics {
  font-size: var(--size-2);
  white-space: nowrap;
}

/* Without script the browser's own controls stand where the bar would be. */
.player-widget audio {
  grid-area: position;
  width: 100%;
}

.player-widget .position {
  display: flex;
  grid-area: position;
  flex-direction: column;
  gap: 2px;
}

.player-widget input[type="range"] {
  width: 100%;
  min-height: 24px;
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
}

.player-widget .times {
  display: flex;
  justify-content: space-between;
  font-size: var(--size-1);
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

/* The times wait for the song's length; `display` above would otherwise show them while hidden. */
.player-widget .times[hidden] {
  display: none;
}

.player-widget .controls {
  display: flex;
  grid-area: controls;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.player-widget .controls button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--fg);
  cursor: pointer;
}

.player-widget .controls .toggle {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--bg);
}

.player-widget .controls path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linejoin: round;
}

.player-widget .controls .toggle path {
  stroke-width: 3;
}

.player-widget .controls .toggle path.play {
  fill: currentColor;
  stroke-width: 1;
}

.player-widget .controls .toggle path.pause,
.player-widget.playing .controls .toggle path.play {
  display: none;
}

.player-widget.playing .controls .toggle path.pause {
  display: inline;
}

/* Positioned, so that a song's offsetTop is its place in the list, which scrolls inside the frame. */
.player-widget .tracks {
  position: relative;
  grid-area: songs;
  min-height: 0;
  margin: 0;
  padding: 8px 0 0;
  overflow-y: auto;
  border-block-start: 1px solid var(--rule);
  list-style: none;
}

.player-widget .tracks a,
.player-widget .tracks a:visited {
  display: flex;
  gap: 10px;
  align-items: center;
  min-height: 36px;
  padding: 0 8px;
  border-radius: 6px;
  color: var(--fg);
  text-decoration: none;
}

.player-widget .tracks [aria-current] a {
  background: var(--surface);
}

.player-widget .tracks [aria-current] em {
  color: var(--accent);
}

.player-widget .tracks .number {
  width: 20px;
  flex-shrink: 0;
  font-size: var(--size-1);
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.player-widget .tracks em {
  font-size: var(--size-2);
  white-space: nowrap;
}

.player-widget .tracks .turkish {
  overflow: hidden;
  font-size: var(--size-1);
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--muted);
}

.player-widget .credit,
.player-widget .lyrics.narrow {
  grid-area: foot;
  justify-self: start;
  margin: 0;
  font-size: var(--size-1);
  line-height: 1.6;
  color: var(--muted);
}

.player-widget .lyrics.narrow {
  display: none;
  color: var(--accent);
}

/* Last, so that it wins over each part's own display: what the script has not shown yet stays hidden,
   and what it hides goes. */
.player-widget [hidden],
.player-widget .lyrics.narrow[hidden] {
  display: none;
}

/* At 360px and below: the small poster beside the titles, the list without Turkish titles, and
   "sözleri →" in the footer. */
@media (max-width: 360px) {
  main.widget:has(> .player-widget) {
    padding: 12px;
  }

  .player-widget {
    grid-template-columns: 96px 1fr;
    grid-template-areas:
      "poster now"
      "position position"
      "controls controls"
      "songs songs"
      "foot foot";
    grid-template-rows: auto auto auto 1fr auto;
    gap: 10px 12px;
  }

  .player-widget .poster {
    width: 96px;
  }

  .player-widget .poster .meter {
    display: none;
  }

  .player-widget .now {
    align-self: center;
  }

  .player-widget .original {
    font-size: var(--size-4);
  }

  .player-widget .now .lyrics {
    display: none;
  }

  .player-widget .tracks .turkish {
    display: none;
  }

  .player-widget .tracks a {
    min-height: 40px;
  }

  .player-widget .credit {
    display: none;
  }

  .player-widget .lyrics.narrow {
    display: inline;
  }
}

main.widget .table.whole {
  grid-template-columns: 1fr 6rem 1fr;
  grid-template-areas:
    ". north north"
    "west middle east"
    ". south south";
  column-gap: 0.3rem;
  row-gap: 0.3rem;
  max-width: none;
  text-align: start;
}

main.widget .table.whole .hand.north,
main.widget .table.whole .hand.south {
  justify-self: start;
}

main.widget .table.whole .hand.north .holdings,
main.widget .table.whole .hand.south .holdings {
  margin-inline: 0;
}

main.widget .table.whole .hand.west {
  justify-self: end;
}

main.widget .table.whole .hand.east {
  justify-self: start;
}

main.widget .table.whole .felt {
  width: 6rem;
  padding: 4px;
}

main.widget .felt .face {
  width: 26px;
  height: 36px;
  border-radius: 3px;
  font-size: var(--size-1);
}

main.widget .hand {
  gap: 0.1rem;
}

main.widget .seat {
  font-size: var(--size-1);
}

main.widget .holdings {
  gap: 0;
  font-size: var(--size-2);
  line-height: 1.2;
}

main.widget .suit-row {
  gap: 0.3rem;
}

/* A narrow frame: a long suit's cards sit a little closer, more in a one-suit table's large cards
   than in a whole hand's ranks, where 10 and 9 must stay apart; then a one-suit table's gaps beside
   the felt are smaller. The widest lesson hand fits 320px without a smaller font. */
main.widget .cards.long {
  word-spacing: -0.1em;
}

main.widget .ranks.long {
  word-spacing: -0.05em;
}

main.widget .table:not(.whole) {
  column-gap: 10px;
}

.widget .contract {
  margin-block-end: 0.4rem;
  text-align: center;
}

.widget .unread {
  margin: 0;
}

/* A question in a frame: the lesson above, the question under the hands, one round link per
   answer; answered, one line for the result and the explanation closed. */
.widget .lesson-line {
  margin: 0 0 0.4rem;
  font-size: var(--size-2);
  text-align: center;
}

/* A hand's part keeps the line to one row: a long lesson name ends in "…", the ring and "2/3" stay. */
.widget .lesson-line:has(.ring) {
  display: flex;
  gap: 0.35rem;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.widget .lesson-line:has(.ring) a {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.widget .lesson-line .ring {
  flex: none;
  padding: 0.1rem 0.3rem;
}

.widget .lesson-line .ring i {
  width: 0.6rem;
  height: 0.6rem;
}

.widget .question-text,
.widget .leader,
.widget .verdict,
.widget .again {
  margin-block: 0.4rem;
  text-align: center;
}

.widget .counts {
  margin: 0.5rem auto;
}

.widget .shapes {
  margin: 0.25rem auto;
}

/* Labels close to their cells, so that an unanswered shape question fits the 560px frame at 320px. */
.widget .shapes .group {
  margin-block: 0.25rem 0.15rem;
  line-height: 1.2;
  text-align: center;
}

/* The reader's hand as wide as its rows, centred like the rest of the widget. */
.widget .points-hand {
  width: fit-content;
  margin-inline: auto;
}

/* An opening hand's position, column header and checks closer and smaller, so that its answered
   view fits the 560px frame at 320px. */
.widget .points-hand .seat-line {
  margin-block-end: 0.25rem;
}

.widget .points-hand .columns th {
  padding-block: 0;
  line-height: 1.1;
}

.widget .points-hand .checks {
  margin-block-start: 0.25rem;
  font-size: var(--size-2);
  line-height: 1.2;
}

.widget .counts > * {
  min-height: 40px;
}

/* A block as wide as its cells, so that its auto margins centre it. */
.widget .counts.short {
  display: flex;
  width: fit-content;
}

.widget .verdict.right {
  color: var(--accent);
  font-weight: 700;
}

/* The answer line close to what is above and below it, its own line height its only space, so that
   an answered declarer question fits the 560px frame at 320px. */
.widget .verdict {
  margin-block: 0;
}

.widget .verdict + .explanation {
  margin-block-start: 0;
}

.widget .explanation {
  margin-block: 0.4rem;
  font-size: var(--size-2);
  text-align: center;
}

.widget .explanation summary {
  color: var(--accent);
  cursor: pointer;
}

.widget .explanation p {
  text-align: start;
}

.widget .again {
  font-size: var(--size-2);
}

.widget .back {
  margin-block: 0.5rem 0;
  font-size: var(--size-2);
  text-align: center;
}

@media (max-width: 48rem) {
  .lesson {
    grid-template-columns: minmax(0, 1fr);
  }

  body > header:not(:has(~ #content .intro)) .new {
    display: none;
  }

  /* On defence the question comes first, then the hand or the table, then the answer. */
  .lesson.defence {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .lesson.defence > :is(.panel, .lesson-table) {
    display: contents;
  }

  .lesson.defence .lesson-table > * {
    order: 1;
  }

  .lesson.defence .panel > :is(.help, .counts, .result, .hand-end, .buttons) {
    order: 2;
  }

  /* At the table the reader's seat, label and hand together, leaves the felt's side for a full-width
     row under South, set apart from it; the empty place on the felt still shows where they sit. */
  .table:has(.hand.reader) {
    grid-template-areas:
      ". north ."
      "west middle east"
      ". south ."
      "reader reader reader";
  }

  .table .hand.reader {
    grid-area: reader;
    align-items: center;
    justify-self: center;
    margin-block-start: 1rem;
  }
}

/* On a phone the rule row wraps: the pill first, its title kept on one line, then the newest note
   on a line of its own, its title cut short. The rule line may drop at this width. The table's felt
   and cards get smaller. A counted hand's extra points may take two lines and its cards' gap
   narrows, so that a long suit's row stays in the screen. */
@media (max-width: 30rem) {
  .points-hand .extra {
    padding-inline-start: 0.75rem;
    white-space: normal;
  }

  .points-hand .hand-points:has(.extra) .ranks {
    padding-inline-end: 0.75rem;
  }

  body > header .rule {
    flex-wrap: wrap;
  }

  music-player .title {
    white-space: nowrap;
  }

  body > header .new {
    flex-basis: 100%;
    max-width: none;
  }

  .table {
    grid-template-columns: auto 132px auto;
  }

  .felt {
    width: 132px;
  }

  .felt .face {
    width: 36px;
    height: 50px;
    font-size: var(--size-3);
  }

  /* The home page's songs are compact rows: a small poster beside the title and the Turkish title. */
  .home-music .songs {
    gap: 1rem;
  }

  .home-music .song-card {
    display: grid;
    grid-template-columns: 6rem minmax(0, 1fr);
    column-gap: 1rem;
    align-items: center;
  }

  .home-music .song-card img {
    grid-row: 1 / 3;
    margin: 0;
  }

  .home-music .song-card > span {
    align-self: end;
  }

  .home-music .song-card em {
    align-self: start;
  }

  /* A whole hand: North, the felt, then West and East side by side, then South. */
  .table.whole {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "north north"
      "middle middle"
      "west east"
      "south south";
    column-gap: 12px;
    row-gap: 0.6rem;
  }

  .table.whole .hand.west {
    justify-self: start;
  }

  .table.whole .hand.east {
    justify-self: end;
  }

  .table.whole .felt {
    width: 150px;
  }

  .table.whole:has(.hand.reader) {
    grid-template-areas:
      "north north"
      "middle middle"
      "west east"
      "south south"
      "reader reader";
  }

  .table.whole .hand.reader {
    justify-self: center;
  }

  .holdings {
    font-size: var(--size-3);
  }
}

/* Playing the hand ("Eli oyna") on the defence, up to 560px: the reader's hand, West or East, takes its
   own full row under the felt, aligned as South's is as declarer, so that a suit wraps only when it
   cannot fit the row; partner's box is centred on the row above it. */
@media (max-width: 35rem) {
  .table.whole:has(.hand.west.playing.you) {
    grid-template-columns: 1fr;
    grid-template-areas:
      "north"
      "middle"
      "east"
      "west"
      "south";
  }

  .table.whole:has(.hand.east.playing.you) {
    grid-template-columns: 1fr;
    grid-template-areas:
      "north"
      "middle"
      "west"
      "east"
      "south";
  }

  .table.whole:has(.hand.playing.you) :is(.hand.west, .hand.east) {
    justify-self: center;
  }

  .table.whole .hand.playing.you .holdings {
    margin-inline: auto;
  }
}

/* On a phone the name sits above the navigation, and grids keep one column. */
@media (max-width: 24rem) {
  body > header {
    flex-direction: column;
  }

  body > header .rule {
    flex: none;
    align-self: stretch;
  }

  .songs,
  .intro,
  .sections,
  .song-columns {
    grid-template-columns: 1fr;
  }
}

/* Music by artist: three tiles on top, chips that choose an artist, then a shelf per artist. */
.tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
  margin-block: 1.25rem 1.5rem;
}

.tile,
.tile:visited {
  display: grid;
  gap: 0.35rem;
  align-content: start;
  padding: 0.9rem 1rem;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--surface);
  color: var(--fg);
  text-decoration: none;
}

/* `.tile` sets a display, so the `hidden` attribute needs its own rule to hide the resume tile. */
.tile[hidden] {
  display: none;
}

.tile:is(:hover, :focus-visible) {
  border-color: var(--accent);
}

.tile-kind {
  color: var(--muted);
}

/* A label whose words are read, as "Sanatçılar", in Pagella's own small caps. */
.small-caps {
  color: var(--muted);
  font-size: var(--size-1);
  font-variant-caps: small-caps;
  letter-spacing: 0.06em;
}

.tile b {
  font-size: var(--size-4);
}

.tile-line {
  color: var(--muted);
  font-size: var(--size-2);
}

.tile-arrow {
  color: var(--accent);
  font-size: var(--size-2);
}

nav.chips .chip,
nav.chips .chip:visited {
  min-height: 0;
  color: var(--muted);
  font-size: var(--size-2);
  text-decoration: none;
}

nav.chips .chip b {
  color: var(--accent);
  font-weight: 400;
}

nav.chips .chip.on {
  border-color: var(--accent);
  background: var(--surface);
  color: var(--accent);
}

h2.small-caps {
  margin-block: 1.5rem 0.5rem;
  font-size: var(--size-3);
  font-weight: 400;
}

.shelf {
  display: grid;
  gap: 0.6rem;
  margin-block-end: 2.25rem;
}

.shelf-head,
.artist-head {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding-block-end: 0.4rem;
  border-block-end: 1px solid var(--rule);
}

.shelf-head :is(h2, h3),
.artist-head h1 {
  margin: 0;
}

.shelf-head h3 {
  font-size: var(--size-4);
}

.shelf-head h3 a,
.shelf-head h3 a:visited {
  color: var(--fg);
  text-decoration: none;
}

.shelf-head .count,
.artist-head .count {
  margin-inline-start: auto;
  color: var(--muted);
  font-size: var(--size-1);
  white-space: nowrap;
}

.artist-site {
  margin: 0;
  font-size: var(--size-2);
}

/* Cards three across; a shelf of square covers, pieces without video, four across. */
.shelf .songs,
.songs.two {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.4rem;
}

.shelf .songs.square {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.songs.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.songs.square img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.all-songs {
  justify-self: start;
  font-size: var(--size-2);
}

/* An artist's page: their cards and "listen to all" beside every song as a numbered row. */
.artist-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
}

.artist-main {
  display: grid;
  gap: 0.75rem;
}

.pill.play {
  justify-self: start;
  gap: 0.6rem;
}

/* While its song plays, the "Dinle" pill shows the player's bars in place of its ▶. */
.pill-bars {
  display: none;
}

.pill.play.playing .pill-bars {
  display: inline-flex;
  align-items: flex-end;
  justify-content: space-between;
  width: 0.6em;
  height: 0.7em;
}

.pill.play.playing .triangle {
  display: none;
}

.pill-bars i {
  width: 0.14em;
  height: 100%;
  background: currentColor;
  transform-origin: bottom;
  animation: bar 0.9s ease-in-out infinite alternate;
}

.pill-bars i:nth-child(2) {
  animation-delay: -0.3s;
}

/* After the bars' rule, so that it wins: for a reader who asks for less motion they stand still. */
@media (prefers-reduced-motion: reduce) {
  .pill-bars i {
    animation: none;
  }
}

.pill-bars i:nth-child(3) {
  animation-delay: -0.6s;
}

.shelf-head h2 a,
.shelf-head h2 a:visited {
  color: inherit;
  text-decoration: none;
}

.pill.play .triangle {
  width: 0;
  height: 0;
  border-block: 6px solid transparent;
  border-inline-start: 9px solid currentColor;
}

.song-rows {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.song-rows a,
.song-rows a:visited {
  display: grid;
  grid-template-columns: 1.8em minmax(0, 1fr) auto auto;
  gap: 0.4rem;
  align-items: baseline;
  padding-block: 0.3rem;
  border-block-start: 1px solid var(--rule);
  color: var(--fg);
  text-decoration: none;
}

.song-rows a:is(:hover, :focus-visible) {
  color: var(--accent);
}

.song-rows .number {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  text-align: end;
}

.song-rows em {
  color: var(--muted);
  font-size: var(--size-2);
}

.song-rows li[aria-current="page"] > a {
  color: var(--accent);
}

/* A song without video: its square cover in the video's place, and its listen pill under it. */
.song-cover {
  display: grid;
  gap: 0.9rem;
  margin-block: 0 2rem;
}

.song-cover .cover {
  display: block;
  width: 100%;
  max-width: 440px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 4px;
}

@media (max-width: 820px) {
  .tiles {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  .shelf .songs,
  .shelf .songs.square,
  .songs.two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
  }

  /* With every artist shown, a phone shows each shelf's two newest. */
  .shelf-songs li:nth-child(n + 3) {
    display: none;
  }

  .artist-columns {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* The link to every song of a shelf of three: only a phone, which shows two, needs it. */
@media (min-width: 761px) {
  .all-songs.phone-only {
    display: none;
  }
}

/* The "where you left off" tile, once the player has kept a song: the frame in the accent and a thin
   bar of how far it has played. Three tiles share the row then, the first wider. */
.tiles:has(> .resume:not([hidden])) {
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
}

.tile.go {
  border-color: var(--accent);
}

.tile .bar {
  height: 6px;
  overflow: hidden;
  border-radius: 3px;
  background: var(--rule);
}

.tile .bar i {
  display: block;
  width: 0;
  height: 100%;
  background: var(--accent);
}

/* The row of the song playing shows ▮▮ at its end. */
.song-rows a.playing {
  color: var(--accent);
}

.song-rows a.playing::after {
  content: "▮▮";
  grid-column: 4;
  font-size: var(--size-1);
}

@media (max-width: 820px) {
  .tiles:has(> .resume:not([hidden])) {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Site Sans with figures in columns: what is labelled, counted, dated or timed. Last, so that it wins
   over each one's own rule. */
:is(
    .tile-kind,
    .bric-band .newest-label,
    .part-count,
    .term-counts,
    .shelf-head .count,
    .artist-head .count,
    .round-count,
    .notes time,
    .photo-date,
    .chip small,
    nav.chips .chip b,
    music-player .panel .count,
    music-player .panel .times,
    .player-widget .times
  ) {
  font-family: var(--sans);
  font-variant-numeric: tabular-nums;
}

/* The eyebrow labels: a word or two over what they name, in Site Sans capitals at 600, as the
   header's. */
:is(.tile-kind, .bric-band .newest-label) {
  font-size: var(--size-1);
  font-weight: 600;
  line-height: 1.2;
  text-transform: uppercase;
}