@font-face {
  font-family: "Pagella Site";
  src: url("/assets/pagella-site-2609-regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0-017F, U+2013-2014, U+2018-201E, U+2022, U+2026, U+20BA, U+2660-2667;
}

@font-face {
  font-family: "Pagella Site";
  src: url("/assets/pagella-site-2609-italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0-017F, U+2013-2014, U+2018-201E, U+2022, U+2026, U+20BA, U+2660-2667;
}

@font-face {
  font-family: "Pagella Site";
  src: url("/assets/pagella-site-2609-bold.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0-017F, U+2013-2014, U+2018-201E, U+2022, U+2026, U+20BA, U+2660-2667;
}

/* Dark for every reader; light when the reader chooses it. */
:root {
  color-scheme: dark;
  --bg: #16110d;
  --surface: #1f1812;
  --fg: #f3e9dc;
  --muted: #b9a58e;
  --nav: #d8c8b4;
  --accent: #f0b65a;
  --link-visited: #e0c49a;
  --suit-red: #ef7a72;
  --rule: #3a2c20;
  --new: #7e9cd8;
  /* The felt and the card faces look the same in both modes. */
  --felt: #0f3d2e;
  --felt-edge: #2d5e4b;
  --card-face: #f3e9dc;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f7f1e8;
  --surface: #efe6d8;
  --fg: #1f1812;
  --muted: #6b5a47;
  --nav: #4a3b2d;
  --accent: #7a4a0c;
  --link-visited: #5c3d1e;
  --suit-red: #a8221c;
  --rule: #ddcdb6;
  --new: #2f5a8f;
}

*,
*::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: 1.1875rem;
  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;
}

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: 1.6rem;
  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;
}

body > header nav a,
body > header nav a:visited {
  color: var(--nav);
  text-decoration: none;
}

body > header nav a[aria-current="page"] {
  color: var(--accent);
  text-decoration: underline 2px var(--accent);
  text-underline-offset: 0.3em;
}

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%;
  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;
}

body > header .new .label {
  flex: none;
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

body > header .new .title {
  min-width: 0;
  font-size: 15px;
  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 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

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;
}

music-player .listen {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 32px;
  padding: 5px 15px 5px 12px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--bg);
  font-size: 13px;
  color: var(--fg);
}

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

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

/* The clip's whole song, right after the pill: a small link, not a second pill. Its padding makes a
   44px tap area and the negative margin keeps the row's height. */
music-player .whole-song {
  min-height: 0;
  padding-block: 10px;
  margin-block: -10px;
  font-size: 15px;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

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

music-player .icon {
  font-size: 12px;
}

/* The action word in spaced capitals ("DİNLE", "ÇALIYOR" with the page's Turkish), the title in italic. */
music-player .status {
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg);
}

music-player .title {
  font-size: 15px;
  font-style: italic;
  color: var(--nav);
}

music-player .next {
  min-height: 30px;
  font-size: 13px;
}

/* 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;
  }
}

h1,
h2 {
  font-weight: 700;
}

h1 {
  font-size: 2.25rem;
  line-height: 1.15;
}

h2 {
  font-size: 1.5rem;
  line-height: 1.2;
}

a {
  color: var(--accent);
  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;
}

.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: 3.25rem;
  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: 1.9rem;
  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;
}

.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;
}

/* 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(--rule);
  border-radius: 8px;
  background: var(--surface);
  color: var(--fg);
  font-size: 0.9375rem;
  line-height: 1.4;
  text-align: center;
  pointer-events: none;
}

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

.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 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-note:not(:empty) {
    animation: none;
  }

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

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

/* 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: 1.375rem;
  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: 0.875rem;
}

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

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

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: 1.75rem;
  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: 4rem;
  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;
}

.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;
}

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

.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);
  text-decoration: none;
}

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

/* 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);
}

/* 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: 1.4rem;
}

.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: 0.95rem;
  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: 1.2rem;
}

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

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

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

/* The seat that leads. */
.seat .marker {
  margin-inline-end: 0.25em;
  color: var(--accent);
}

.cards {
  font-size: 1.5rem;
  white-space: nowrap;
}

/* 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: 1.5rem;
}

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

/* The lesson's steps: the current one in the accent, underlined. */
.steps {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin-block: 0 1.5rem;
  padding: 0;
  list-style: none;
}

.steps a,
.steps a:visited {
  padding-block-end: 0.2rem;
  color: var(--muted);
  text-decoration: none;
}

.steps a[aria-current="step"] {
  border-block-end: 2px solid var(--accent);
  color: var(--accent);
}

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

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

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

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

/* 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);
}

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

.counts button,
button.pill {
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: var(--bg);
  color: var(--fg);
  font: inherit;
  cursor: pointer;
}

button.pill {
  padding: 0.4rem 1.25rem;
  color: var(--accent);
}

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

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

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

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

/* 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: 0.95rem;
}

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: 1.25rem;
}

.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);
}

/* 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. */
@media (max-width: 48rem) {
  .lesson {
    grid-template-columns: minmax(0, 1fr);
  }

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

/* 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. */
@media (max-width: 30rem) {
  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: 1.1rem;
  }
}

/* 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;
  }
}