:root {
  --cc-hover: rgba(28, 47, 80, .04);
  --cc-detail: #F4F6FB;
  --cc-human-bg: #EEF1FF;
  --cc-human-ink: #263898;
  --cc-bot-bg: #FCEFD9;
  --cc-bot-ink: #7A4300;
  --cc-found-bg: #E6F4EA;
  --cc-found-ink: #1E6B3A;
  --cc-live: #1E8E4E;
  --cc-mark: #3D5AFE;
  --cc-scrim: rgba(11, 16, 32, .4);
  --cc-pop-shadow: 0 12px 32px rgba(28, 47, 80, .18);
  --cc-rail: #DDE3EA;
  --cc-fill: #3D5AFE;
  --cc-edge: #949494;
  --cc-cue: rgba(28, 47, 80, .16);
  --cc-gutter: 16px;
  /* The theme tab's column at the right edge (style.css .mode, 45px wide,
     the owner's position) and 8px beside it: on phones the controls stop
     short of it. */
  --cc-tab-room: 53px;
}

:root[data-theme="dark"] {
  --cc-hover: rgba(255, 255, 255, .05);
  --cc-detail: #111110;
  --cc-human-bg: #123336;
  --cc-human-ink: #A8EEEA;
  --cc-bot-bg: #332C1B;
  --cc-bot-ink: #F5DC8C;
  --cc-found-bg: #15301F;
  --cc-found-ink: #8FE0AE;
  --cc-live: #7EE2A8;
  --cc-mark: #7ADAD5;
  --cc-scrim: rgba(0, 0, 0, .55);
  --cc-pop-shadow: 0 12px 32px rgba(0, 0, 0, .45);
  --cc-rail: #313130;
  --cc-fill: #7ADAD5;
  --cc-edge: #979797;
  --cc-cue: rgba(0, 0, 0, .45);
}

/* The Control Center scrolls only when asked to, and at once. A smooth scroll
   rolled the page under a phone's keyboard as a lyrics form opened or saved,
   and a tap made while the page rolled only stopped it. */
html {
  scroll-behavior: auto;
}

@media (min-width: 600px) {
  :root {
    --cc-gutter: 64px;
  }
}

.cc [hidden] {
  display: none !important;
}

.cc-wrap {
  width: 100%;
  padding-inline: var(--cc-gutter);
}

.cc-top {
  padding-top: 32px;
}

.cc-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 24px;
  margin-bottom: 20px;
}

.cc-kicker {
  font: 600 16px/22px var(--head-font);
  color: var(--muted);
}

.cc-title {
  font: 600 var(--fs-h2)/1.25 var(--head-font);
  color: var(--heading);
}

/* Sign out and the way home: the house icon of the music page and 404.html,
   at the end of the title row. */
.cc-acts {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.cc-acts .home-icon {
  margin-left: 0;
}

.cc .btn {
  min-height: 44px;
  padding: 10px 24px;
  font: 500 16px/22px var(--body-font);
}

.cc .btn--line:hover {
  color: var(--btn-bg);
  background: transparent;
}

@media (hover: hover) {
  :where(:root:not([data-touch])) .cc .btn--line:hover:not(:disabled) {
    color: var(--btn-ink);
    background: var(--btn-bg);
  }
}

.cc .btn:disabled {
  cursor: default;
  opacity: .5;
}

.tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--line);
}

.tab {
  position: relative;
  min-width: 44px;
  min-height: 48px;
  padding: 0 20px;
  font: 700 16px/22px var(--body-font);
  color: var(--muted);
  white-space: nowrap;
  background: none;
  border: 0;
  border-radius: 6px 6px 0 0;
  transition: color .2s;
}

.tab::after {
  content: "";
  position: absolute;
  inset: auto 12px -1px;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: transparent;
}

@media (hover: hover) {
  :where(:root:not([data-touch])) .tab:hover {
    color: var(--heading);
  }
}

.tab .lock {
  display: none;
  width: 16px;
  height: 16px;
  margin-right: 6px;
  vertical-align: -2px;
}

.tab[aria-selected="true"] {
  color: var(--heading);
}

.tab[aria-selected="true"]::after {
  background: var(--accent);
}

.tab[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: .6;
}

.tab[aria-disabled="true"] .lock {
  display: inline-block;
}

.tab[aria-disabled="true"]:hover {
  color: var(--muted);
}

.tab:focus-visible {
  outline-offset: -2px;
}

.cc-main {
  display: block;
  flex: 1 0 auto;
  padding-block: 24px 48px;
}

.notice {
  margin-bottom: 20px;
  padding: 12px 16px;
  font: 400 16px/24px var(--body-font);
  color: var(--text);
  background: var(--card);
  border-left: 4px solid var(--accent);
  border-radius: 12px;
  box-shadow: var(--shadow);
}

.notice--bad {
  border-left-color: var(--reach-bad);
}

.tools {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 12px;
  margin-bottom: 20px;
}

.pick {
  position: relative;
}

.day {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 22px 0 18px;
  font: 500 16px/22px var(--body-font);
  color: var(--field-text);
  background: var(--field-bg);
  border: 1px solid var(--cc-edge);
  border-radius: 800px;
  white-space: nowrap;
}

.day .ico,
.find .ico {
  width: 20px;
  height: 20px;
  color: var(--muted);
}

.day[aria-expanded="true"] {
  border-color: var(--accent);
}

@media (hover: hover) {
  :where(:root:not([data-touch])) .day:hover {
    border-color: var(--accent);
  }
}

.find {
  position: relative;
  display: flex;
  flex: 1 1 280px;
  min-width: 0;
}

.find .ico {
  position: absolute;
  top: 50%;
  left: 18px;
  transform: translateY(-50%);
  pointer-events: none;
}

.find input {
  width: 100%;
  min-height: 48px;
  padding: 0 48px;
  font: 400 16px/22px var(--body-font);
  color: var(--field-text);
  background: var(--field-bg);
  border: 1px solid var(--cc-edge);
  border-radius: 800px;
  -webkit-appearance: none;
  appearance: none;
}

.find input:placeholder-shown {
  padding-right: 16px;
}

.find input::placeholder {
  color: var(--placeholder);
  opacity: 1;
}

.find input:focus {
  border-color: var(--accent);
}

.find input::-webkit-search-cancel-button,
.find input::-webkit-search-decoration {
  display: none;
  -webkit-appearance: none;
  appearance: none;
}

.find .clear {
  position: absolute;
  top: 50%;
  right: 2px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: 50%;
  transform: translateY(-50%);
}

.find .clear .ico {
  position: static;
  width: 20px;
  height: 20px;
  transform: none;
}

@media (hover: hover) {
  :where(:root:not([data-touch])) .find .clear:hover {
    color: var(--heading);
  }
}

.seg {
  display: inline-flex;
  border: 1px solid var(--cc-edge);
  border-radius: 800px;
  overflow: hidden;
  background: var(--field-bg);
}

.seg button {
  min-width: 64px;
  min-height: 46px;
  padding: 0 16px;
  font: 500 16px/22px var(--body-font);
  color: var(--field-text);
  background: none;
  border: 0;
}

.seg button + button {
  border-left: 1px solid var(--cc-edge);
}

@media (hover: hover) {
  :where(:root:not([data-touch])) .seg button:hover {
    background: var(--cc-hover);
  }
}

.seg button[aria-pressed="true"] {
  color: var(--btn-ink);
  background: var(--btn-bg);
}

.seg button:focus-visible {
  outline-offset: -4px;
  outline-color: currentColor;
}

.kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 0 0 20px;
}

.kpi {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
  row-gap: 4px;
  padding: 16px 20px;
  background: var(--card);
  border-radius: 20px;
  box-shadow: var(--shadow);
}

/* The one label style above a value: the KPIs, the Profile facts and the
   heading of a visitor's pages. */
.kpi dt,
.facts dt,
.detail-head {
  font: 500 16px/22px var(--body-font);
  color: var(--muted);
}

.kpi dd {
  margin: 0;
  font: 400 28px/1.2 var(--mono-font);
  color: var(--heading);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.sheet {
  position: relative;
  overflow: hidden;
}

.sheet::before,
.sheet::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: var(--pager-h, 0px);
  z-index: 2;
  width: 20px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s;
}

.sheet::before {
  left: 0;
  background: linear-gradient(to right, var(--cc-cue), transparent);
}

.sheet::after {
  right: 0;
  background: linear-gradient(to left, var(--cc-cue), transparent);
}

.sheet[data-more-start]::before,
.sheet[data-more-end]::after {
  opacity: 1;
}

.scroller {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

.scroller:focus-visible {
  outline-offset: -3px;
  border-radius: 20px 20px 0 0;
}

/* A table fills its card, so its rules and row highlights reach the card's
   edge however wide the screen is. */
.tbl {
  width: 100%;
  table-layout: auto;
  border-collapse: separate;
  border-spacing: 0;
  font: 400 16px/22px var(--body-font);
  color: var(--text);
}

.tbl--plays > * > tr > :is(th, td) {
  padding-inline: 12px;
}

.tbl--plays > * > tr > :is(th, td):first-child {
  padding-left: 16px;
}

.tbl th {
  padding: 14px 16px;
  font: 400 14px/20px var(--mono-font);
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}

.tbl td {
  padding: 12px 16px;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
  overflow-wrap: break-word;
}

.tbl tbody tr:last-child td {
  border-bottom: 0;
}

@media (hover: hover) {
  :where(:root:not([data-touch])) .tbl tbody tr.row:hover td {
    background: var(--cc-hover);
  }
}

.tbl .empty td {
  padding: 28px 16px;
  color: var(--muted);
}

.tbl .empty--bad td {
  color: var(--text);
}

.fail-text {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 12px;
  font: 400 16px/24px var(--body-font);
  position: sticky;
  left: 16px;
  max-width: calc(var(--view-w, 100%) - 32px);
}

.fail-text::before,
.cc .status--bad::before {
  content: "!";
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  font: 700 14px/1 var(--body-font);
  color: #FFFFFF;
  background: var(--reach-bad);
  border-radius: 50%;
}

.empty--bad .btn {
  position: sticky;
  left: 16px;
}

.tbl th:last-child,
.tbl td:last-child {
  padding-right: 24px;
}

.c-when,
.c-who,
.c-type,
.c-num,
.c-heard,
.where-line {
  white-space: nowrap;
}

.c-who .who-line {
  flex-wrap: nowrap;
}

/* A title with a long unbroken word breaks inside its cell: break-word alone
   leaves the column as wide as the word, and the Plays table ran past its
   card from 1200px wide, hiding "IP, ISP & device". */
.song-name {
  display: block;
  overflow-wrap: anywhere;
}

.c-heard > .mono {
  white-space: nowrap;
}

.c-ip {
  min-width: 250px;
}

.mono {
  font-family: var(--mono-font);
  font-variant-numeric: tabular-nums;
}

.tbl .ip {
  font: 400 16px/22px var(--mono-font);
  overflow-wrap: normal;
}

.sub {
  display: block;
  font: 400 14px/20px var(--body-font);
  color: var(--muted);
}

.sub.mono {
  font-family: var(--mono-font);
}

.flag {
  margin-right: 6px;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}

.pill {
  display: inline-block;
  padding: 2px 10px;
  font: 700 14px/20px var(--body-font);
  white-space: nowrap;
  border-radius: 999px;
}

.pill--human {
  color: var(--cc-human-ink);
  background: var(--cc-human-bg);
}

.pill--bot {
  color: var(--cc-bot-ink);
  background: var(--cc-bot-bg);
}

.live-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 700 14px/20px var(--body-font);
  color: var(--heading);
  white-space: nowrap;
}

.live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cc-live);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cc-live) 25%, transparent);
}

.who-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
}

.exp {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  margin: -11px 0 -11px -8px;
  padding: 0 10px 0 6px;
  font: 400 16px/22px var(--mono-font);
  color: var(--heading);
  background: none;
  border: 1px solid transparent;
  border-radius: 6px;
}

@media (hover: hover) {
  :where(:root:not([data-touch])) .exp:hover {
    border-color: var(--line);
  }
}

.exp .ico {
  width: 18px;
  height: 18px;
  color: var(--muted);
  transition: transform .2s;
}

.exp[aria-expanded="true"] .ico {
  transform: rotate(90deg);
}

.tbl tr.detail td {
  padding: 0;
  background: var(--cc-detail);
}

.detail-box {
  position: sticky;
  left: 0;
  box-sizing: border-box;
  width: 100%;
  max-width: var(--view-w, 100%);
  padding: 14px 24px 18px 40px;
}

.detail-head {
  margin-bottom: 8px;
}

/* Each page's count right after the longest page, in one column, rather
   than across the width of the table. */
.trail {
  display: grid;
  grid-template-columns: minmax(0, max-content) minmax(max-content, 1fr);
  gap: 4px 24px;
}

.trail li {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  align-items: baseline;
  row-gap: 2px;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
}

.trail li:last-child {
  border-bottom: 0;
}

.trail-path {
  min-width: 0;
  font: 400 16px/22px var(--mono-font);
  overflow-wrap: anywhere;
}

.trail-other {
  font-family: var(--body-font);
}

.trail-when {
  font: 400 14px/22px var(--body-font);
  color: var(--muted);
  white-space: nowrap;
}

/* The visit count and the time listened name themselves only in the list
   layout below, where the table's head does not show. */
.unit {
  display: none;
}

/* Below 1200px the visitors and the plays are a list, not a table, since
   their columns do not fit beside each other there: each row is a grid
   with who or what was played first and the time at the end of its line,
   and the place and the network beside them (from 600px) or under them
   (on phones). The table's head stays for screen readers. */
@media (max-width: 1199.98px) {
  .tbl--visitors,
  .tbl--plays,
  .tbl--visitors > tbody,
  .tbl--plays > tbody,
  .tbl tr.detail,
  .tbl tr.empty,
  .tbl tr.row > td,
  .tbl tr.detail > td,
  .tbl tr.empty > td {
    display: block;
  }

  .tbl--visitors > thead,
  .tbl--plays > thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* 16px above and below, so the first row's visitor button keeps its
     44px reach and its focus ring inside the list. */
  .tbl tr.row {
    display: grid;
    align-items: start;
    gap: 6px 24px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--line);
  }

  .tbl tr.detail {
    border-bottom: 1px solid var(--line);
  }

  .tbl tbody > tr:last-child {
    border-bottom: 0;
  }

  .tbl tr.row > td {
    padding: 0;
    border: 0;
  }

  .tbl tr.detail > td {
    border: 0;
  }

  /* The time's column has one width in every row, so the columns before
     it line up from row to row. */
  .tbl--visitors tr.row {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.4fr) minmax(0, 1.6fr) 7rem;
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "who where ip when"
      "type where ip num";
  }

  .tbl--plays tr.row {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.1fr) minmax(0, 1.3fr) 7rem;
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
      "song where ip when"
      "heard where ip ."
      "who where ip .";
  }

  .tbl .c-when {
    grid-area: when;
  }

  .tbl .c-who {
    grid-area: who;
  }

  .tbl .c-type {
    grid-area: type;
  }

  .tbl .c-num {
    grid-area: num;
  }

  .tbl .c-song {
    grid-area: song;
  }

  .tbl .c-heard {
    grid-area: heard;
  }

  .tbl .c-where {
    grid-area: where;
  }

  .tbl .c-ip {
    grid-area: ip;
    min-width: 0;
  }

  .tbl .c-when,
  .tbl .c-num {
    text-align: right;
  }

  .tbl--plays .c-who,
  .tbl--plays .c-heard,
  .tbl .where-line {
    white-space: normal;
  }

  .tbl--plays .c-who .who-line {
    flex-wrap: wrap;
  }

  .unit {
    display: inline;
    font-family: var(--body-font);
    color: var(--muted);
  }

  @media (hover: hover) {
    :where(:root:not([data-touch])) .tbl tbody tr.row:hover {
      background: var(--cc-hover);
    }

    :where(:root:not([data-touch])) .tbl tbody tr.row:hover td {
      background: none;
    }
  }
}

.pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  padding: 14px 20px;
  border-top: 1px solid var(--line);
}

.shown {
  font: 400 16px/24px var(--body-font);
  color: var(--muted);
}

.pager--none {
  padding: 0;
  border-top: 0;
}

.pager--none .pager-btns,
.pager--one .pager-btns {
  display: none;
}

.pager--none .shown {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.pager-btns {
  display: flex;
  gap: 12px;
}

.pager-btns .btn {
  min-width: 112px;
}

.live {
  margin-bottom: 24px;
  padding: 20px 24px;
}

.live-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin-bottom: 12px;
}

.live-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 600 20px/1.4 var(--head-font);
  color: var(--heading);
}

.pulse {
  position: relative;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--cc-live);
}

.pulse::after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 2px solid var(--cc-live);
  border-radius: 50%;
  opacity: 0;
  animation: cc-pulse 2s ease-out infinite;
}

.live[data-count="0"] .pulse {
  background: var(--muted);
}

.live[data-count="0"] .pulse::after {
  animation: none;
}

@keyframes cc-pulse {
  0% {
    opacity: .8;
    transform: scale(.6);
  }

  100% {
    opacity: 0;
    transform: scale(1.4);
  }
}

.live-when {
  font: 400 16px/24px var(--body-font);
  color: var(--muted);
}

.live-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-left: auto;
}

.switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.switch-box {
  position: relative;
  width: 34px;
  height: 20px;
  border: 2px solid currentColor;
  border-radius: 999px;
}

.switch-box::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: currentColor;
  transition: transform .2s;
}

.switch[aria-pressed="true"] .switch-box::after {
  transform: translateX(14px);
}

.listeners {
  display: grid;
}

.listener {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1.3fr) minmax(0, 2fr);
  align-items: center;
  gap: 8px 24px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}

.listener--none {
  display: block;
  font: 400 16px/24px var(--body-font);
  color: var(--muted);
}

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

.listener--bad .fail-text {
  margin-bottom: 0;
}

.l-song {
  font: 700 16px/22px var(--body-font);
  color: var(--heading);
  overflow-wrap: break-word;
}

.l-song .sub {
  font-weight: 400;
}

.l-time {
  display: grid;
  gap: 6px;
}

.l-clock {
  font: 400 16px/22px var(--mono-font);
  color: var(--text);
}

.rail {
  display: block;
  height: 6px;
  overflow: hidden;
  background: var(--cc-rail);
  border-radius: 3px;
}

.rail-fill {
  display: block;
  width: 0;
  height: 100%;
  background: var(--cc-fill);
  border-radius: 3px;
}

.l-who {
  display: grid;
  gap: 2px;
  font: 400 16px/22px var(--body-font);
  overflow-wrap: break-word;
}

.lyr-list {
  padding: 0 24px;
}

.lyr-row,
.lyr-none {
  padding: 14px 0;
  border-top: 1px solid var(--line);
}

.lyr-row:first-child,
.lyr-none:first-child {
  border-top: 0;
}

.lyr-none {
  padding-block: 28px;
  font: 400 16px/24px var(--body-font);
  color: var(--muted);
}

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

/* The buttons' column is a lock and an Edit button wide (44 + 8 + 96px) in
   every row, so a row with Edit alone, or with neither (a Soundtracks song),
   keeps its link in line with the rest. */
.lyr-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) 148px;
  align-items: center;
  gap: 8px 24px;
}

.lyr-title {
  display: block;
  font: 700 16px/22px var(--body-font);
  color: var(--heading);
  overflow-wrap: anywhere;
}

.lyr-where {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.lyr-open {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 44px;
  font: 400 16px/22px var(--body-font);
  color: var(--text);
  transition: color .3s;
}

.lyr-open .ico {
  width: 16px;
  height: 16px;
  color: var(--muted);
}

.lyr-url {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.pill--own {
  color: var(--cc-human-ink);
  background: var(--cc-human-bg);
}

.pill--auto {
  color: var(--muted);
  background: var(--cc-detail);
}

/* A link the lyrics finder found on Genius or Musixmatch, apart from one the owner set. */
.pill--found {
  color: var(--cc-found-ink);
  background: var(--cc-found-bg);
}

.lyr-row[data-saved] .lyr-where::after {
  content: "Saved" / "";
  font: 700 14px/20px var(--body-font);
  color: var(--cc-found-ink);
  white-space: nowrap;
}

.lyr-btns {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.lyr-edit {
  min-width: 96px;
}

.cc .lyr-lock {
  width: 44px;
  min-width: 44px;
  padding: 0;
}

.lyr-lock .ico {
  width: 20px;
  height: 20px;
}

.lyr-lock .lock-shut,
.lyr-lock[aria-pressed="true"] .lock-open {
  display: none;
}

.lyr-lock[aria-pressed="true"] .lock-shut {
  display: block;
}

.cc .lyr-lock[aria-pressed="true"] {
  color: var(--btn-ink);
  background: var(--btn-bg);
}

/* A locked row's padlock is a filled button, so under the pointer it takes
   the accent fill as the site's other filled buttons do. */
@media (hover: hover) {
  :where(:root:not([data-touch])) .cc .lyr-lock[aria-pressed="true"]:hover:not(:disabled) {
    color: var(--note-ink);
    background: var(--note);
    border-color: var(--note);
  }
}

.cc .lyr-row > .lyr-note {
  grid-column: 1 / -1;
  margin: 0;
}

.lyr-form {
  grid-column: 1 / -1;
  padding: 18px 20px 20px;
  background: var(--cc-detail);
  border-radius: 12px;
}

.lyr-form .fld {
  margin-bottom: 8px;
}

/* Link, Google search or Instrumental: one line of radios, each 44px tall. */
.lyr-source {
  display: flex;
  flex-wrap: wrap;
  gap: 0 24px;
  margin: 0 0 8px;
  padding: 0;
  border: 0;
}

.lyr-source .code-choice {
  align-items: center;
  min-height: 44px;
  color: var(--text);
}

.lyr-source .code-choice input {
  margin: 0;
}

.lyr-find {
  margin-bottom: 16px;
  font: 400 16px/24px var(--body-font);
  color: var(--muted);
}

.lyr-find a {
  font-weight: 700;
  color: var(--accent);
  transition: color .3s;
}

.lyr-form .pair .btn {
  flex: 0 1 auto;
}

@media (hover: hover) {
  :where(:root:not([data-touch])) a.lyr-open:hover {
    color: var(--accent);
  }

  :where(:root:not([data-touch])) .lyr-find a:hover {
    color: var(--heading);
  }
}

.profile {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  align-items: start;
  gap: 24px;
}

/* Two columns on every wide screen, so the four cards make two rows of two
   rather than three in a row and one alone below them. */
@media (min-width: 992px) {
  .profile {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.profile--must #password-form {
  order: -1;
}

.box {
  padding: 24px 28px 28px;
}

.box-title {
  margin-bottom: 8px;
  font: 600 20px/1.4 var(--head-font);
  color: var(--heading);
}

/* When the sign-in asks for the emailed code (the owner's choice of 2026-10-04):
   three choices, each a radio and a line of plain English. */
.code-choices {
  display: grid;
  gap: 12px;
  margin: 0 0 16px;
  padding: 0;
  border: 0;
}

.code-choice {
  display: flex;
  gap: 12px;
  font: 400 16px/24px var(--body-font);
  color: var(--muted);
  text-wrap: pretty;
  cursor: pointer;
}

.code-choice input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--accent);
}

.code-choice b {
  font-weight: 700;
  color: var(--heading);
}

.box-text {
  margin-bottom: 16px;
  font: 400 16px/25px var(--body-font);
  color: var(--muted);
  text-wrap: pretty;
}

.box-text strong {
  font-weight: 700;
  color: var(--heading);
  overflow-wrap: anywhere;
}

.facts {
  display: grid;
  gap: 16px;
  margin: 8px 0 0;
}

.facts dd {
  margin: 2px 0 0;
  font: 400 16px/24px var(--body-font);
  color: var(--text);
  overflow-wrap: anywhere;
}

.fld--peek input {
  padding-right: 52px;
}

.fld--peek label {
  right: 52px;
}

.peek {
  position: absolute;
  top: 2px;
  right: 0;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  color: var(--muted);
  background: none;
  border: 0;
  border-radius: 6px;
}

@media (hover: hover) {
  :where(:root:not([data-touch])) .peek:hover {
    color: var(--heading);
  }
}

.peek .ico {
  width: 22px;
  height: 22px;
}

.peek .eye-off,
.peek[aria-pressed="true"] .eye-on {
  display: none;
}

.peek[aria-pressed="true"] .eye-off {
  display: block;
}

.hint {
  margin: 4px 0 0 20px;
  font: 400 14px/21px var(--body-font);
  color: var(--muted);
}

.cc .status {
  margin-bottom: 12px;
  font: 400 16px/24px var(--body-font);
  color: var(--text);
}

.cc .status:empty {
  display: none;
}

/* In the code forms the reply to Send a new code sits under the buttons,
   just above the link it answers. */
:is(.btn--block, .pair) + .status {
  margin: 12px 0 0;
}

.cc .status--bad {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--text);
}

.cc .status:focus {
  outline: none;
}

.cc .status:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 4px;
}

.pair {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.pair .btn {
  flex: 1 1 160px;
}

.again {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 4px;
  margin-top: 12px;
  font: 400 16px/26px var(--body-font);
  color: var(--muted);
}

.plain {
  min-height: 44px;
  padding: 0 4px;
  font: 700 16px/26px var(--body-font);
  color: var(--btn-bg);
  background: none;
  border: 0;
  border-radius: 6px;
  transition: color .3s;
}

@media (hover: hover) {
  :where(:root:not([data-touch])) .plain:hover {
    color: var(--accent);
  }
}

.again > .plain:first-child {
  margin-left: -4px;
}

.plain:disabled {
  color: var(--muted);
  cursor: default;
}

.gate {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 48px var(--cc-gutter) 0;
}

.gate::before,
.gate::after {
  content: "";
  flex: 1 1 0;
}

.gate::after {
  flex-basis: 48px;
}

.gate-card {
  width: min(100%, 480px);
  padding: 32px 40px 36px;
}

.gate-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.gate-head .home-icon {
  flex: none;
  margin: -10px -10px 0 0;
}

.gate-title {
  margin-bottom: 16px;
  font: 600 var(--fs-h3)/1.3 var(--head-font);
  color: var(--heading);
}

.gate-card .btn--block {
  margin-top: 8px;
}

.cal {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 1050;
  width: 344px;
  padding: 12px;
  color: var(--text);
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--cc-pop-shadow);
}

.cal-scrim {
  position: fixed;
  inset: 0;
  z-index: 1049;
  display: none;
  background: var(--cc-scrim);
}

.cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.cal-month {
  font: 600 18px/1.4 var(--head-font);
  color: var(--heading);
  text-align: center;
}

.cal-nav {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  color: var(--heading);
  background: none;
  border: 1px solid var(--line);
  border-radius: 10px;
}

@media (hover: hover) {
  :where(:root:not([data-touch])) .cal-nav:hover:not([aria-disabled="true"]) {
    border-color: var(--accent);
  }
}

.cal-nav[aria-disabled="true"] {
  cursor: default;
  opacity: .4;
}

.cal-nav .ico {
  width: 20px;
  height: 20px;
}

.cal-grid {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.cal-grid th {
  height: 32px;
  padding: 0;
  font: 700 14px/20px var(--body-font);
  color: var(--muted);
  text-align: center;
}

.cal-grid td {
  padding: 0;
  text-align: center;
}

.cal-day {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: min(44px, 100%);
  height: 44px;
  padding: 0;
  font: 500 16px/1 var(--body-font);
  color: var(--text);
  background: none;
  border: 1px solid transparent;
  border-radius: 10px;
}

@media (hover: hover) {
  :where(:root:not([data-touch])) .cal-day:hover:not([aria-disabled="true"]) {
    background: var(--cc-hover);
    border-color: var(--line);
  }
}

.cal-day[data-today] {
  border-color: var(--accent);
}

.cal-day[data-marked]::after {
  content: "";
  position: absolute;
  bottom: 6px;
  left: 50%;
  width: 5px;
  height: 5px;
  margin-left: -2.5px;
  border-radius: 50%;
  background: var(--cc-mark);
}

.cal-day[data-picked] {
  color: var(--btn-ink);
  background: var(--btn-bg);
  border-color: var(--btn-bg);
}

.cal-day[data-picked]::after {
  background: var(--btn-ink);
}

.cal-day[aria-disabled="true"] {
  color: var(--muted);
  cursor: default;
}

.cal-day:focus-visible {
  outline-offset: 1px;
}

.cal-foot {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.cal-foot .btn {
  flex: 1 1 0;
  padding-inline: 12px;
}

.cal-key {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font: 400 14px/20px var(--body-font);
  color: var(--muted);
}

.cal-key::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cc-mark);
}

.cc-foot .bottom {
  padding: 16px 0;
}

.cc-foot .cc-wrap {
  padding-inline: var(--cc-gutter);
}

.cc-foot-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 24px;
  text-align: center;
}

.cc-foot .copy {
  flex: 0 1 auto;
}

.idle-scrim {
  position: fixed;
  inset: 0;
  z-index: 1059;
  background: var(--cc-scrim);
}

.idle {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 1060;
  width: min(calc(100vw - 32px), 440px);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  padding: 24px;
  transform: translate(-50%, -50%);
}

.idle .pair .btn {
  flex: 1 1 150px;
}

@media (max-width: 991.98px) {
  .tbl--visitors tr.row,
  .tbl--plays tr.row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 7rem;
    grid-template-rows: none;
  }

  .tbl--visitors tr.row {
    grid-template-areas:
      "who who when"
      "type type num"
      "where ip ip";
  }

  .tbl--plays tr.row {
    grid-template-areas:
      "song song when"
      "heard heard ."
      "who who ."
      "where ip ip";
  }

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

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

  .l-who {
    grid-column: 1 / -1;
  }

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

  .lyr-where {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

@media (max-width: 599.98px) {
  /* The rows with controls at their right end stop short of the theme tab's
     column, so none of their controls lies under the tab at any scroll:
     the search and filter row, the Listening now buttons, the lyrics rows
     and the pagers. The title row sits above the tab, and when it wraps,
     below 375px, its rows keep close enough for the tab bar to stay above
     the tab too. */
  .cc-head {
    align-items: center;
    gap: 4px 12px;
    margin-bottom: 16px;
  }

  .tools,
  .pager,
  .lyr-list {
    padding-inline-end: calc(var(--cc-tab-room) - var(--cc-gutter));
  }

  .cc-head .btn {
    padding-inline: 16px;
  }

  .cc-acts {
    gap: 4px;
  }

  .tabs {
    gap: 0;
  }

  /* Each tab as wide as its label, and the room left shared out, so a
     locked tab's lock and label fit on one line down to 320px. */
  .tab {
    flex: 1 1 auto;
    padding: 0 8px;
  }

  .tab .lock {
    margin-right: 4px;
  }

  .tools > * {
    flex: 1 1 100%;
  }

  .day {
    width: 100%;
  }

  .seg button {
    flex: 1 1 0;
  }

  .kpi {
    padding: 14px 16px;
  }

  .kpi dd {
    font-size: 24px;
  }

  .pager {
    padding-block: 14px;
    padding-left: 16px;
  }

  .tbl tr.row {
    gap: 4px 12px;
    padding-inline: 16px;
  }

  .tbl--visitors tr.row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: none;
    grid-template-areas:
      "who when"
      "type num"
      "where where"
      "ip ip";
  }

  .tbl--plays tr.row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: none;
    grid-template-areas:
      "song when"
      "heard heard"
      "who who"
      "where where"
      "ip ip";
  }

  .pager-btns {
    flex: 1 1 100%;
  }

  .pager-btns .btn {
    flex: 1 1 0;
    min-width: 0;
  }

  .live {
    padding: 18px 16px;
  }

  .trail {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 4px;
  }

  .detail-box {
    padding: 14px 16px 18px;
  }

  .live-btns {
    flex: 1 1 100%;
    margin-left: 0;
    margin-inline-end: calc(var(--cc-tab-room) - 2 * var(--cc-gutter));
  }

  .live-btns .btn {
    flex: 1 1 0;
    padding-inline: 12px;
  }

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

  .lyr-list {
    padding-left: 16px;
  }

  .lyr-form {
    padding: 16px 14px 18px;
  }

  .lyr-form .pair .btn {
    flex: 1 1 auto;
  }

  .box {
    padding: 22px 20px 24px;
  }

  /* The card keeps out of the theme tab's column, so the tab is never over
     its house icon, fields or buttons, wherever it is centred. */
  .gate {
    padding-block: 24px 0;
    padding-inline-end: var(--cc-tab-room);
  }

  .gate::after {
    flex-basis: 24px;
  }

  .gate-card {
    padding: 24px 20px 28px;
  }

  .cal {
    position: fixed;
    top: 50%;
    left: 8px;
    right: 8px;
    width: min(calc(100vw - 16px), 360px);
    max-height: calc(100dvh - 16px);
    margin-inline: auto;
    padding: 12px;
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateY(-50%);
  }

  .cal-open,
  .cal-open body {
    overflow: hidden;
  }

  .cal-scrim {
    display: block;
  }

  /* Here the open day picker is a modal over the page, with a scrim, and
     the theme tab (the page's top layer, style.css) goes under the scrim
     with the rest of the page until it closes: on a phone it sat on the
     picker's Next month button and right-hand days and took their taps. */
  .cal-open .mode {
    z-index: 1048;
  }
}

/* Where Sign out and the way home would drop to a row of their own (below
   375px), they stay together at the end of the title row and the title
   wraps instead, "Control / Center", as the sign-in card's does. */
@media (max-width: 374.98px) {
  .cc-head {
    flex-wrap: nowrap;
  }

  .cc-head > :first-child {
    min-width: 0;
  }

  .cc-acts {
    flex: none;
  }
}

@media (max-width: 379.98px) {
  .cal-nav {
    flex: none;
  }

  .cal-month {
    font-size: 16px;
  }

  .cal {
    padding-inline: 8px;
  }
}