/* What the lobby adds for a signed-in player, above the tiles: today's dailies with the streak they
   keep, and under them the games they were last at. A visitor gets only the games this browser remembers. */
.home-player {
  display: grid;
  gap: 1rem;
  margin-top: 2.5rem;
}

.home-player h2 {
  margin: 0;
  font-size: 1.1875rem;
}

/* The heading and how many of the boards are played across the panel, the streak in its corner. */
.home-dailies {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "title streak"
    "list list";
  column-gap: 1.5rem;
  align-items: baseline;
}

.home-dailies__head {
  grid-area: title;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
}

.home-dailies__count {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--ink-soft);
}

/* A row per game, its name in a column of its own so the pills all start at one edge. Each row is one
   line that scrolls sideways at every width, so a game with twenty dailies is as tall as one with one. */
.home-dailies__games {
  grid-area: list;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: 1.25rem;
  margin: 0.875rem 0 0;
  padding: 0;
  list-style: none;
}

.home-dailies__games > li {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
  align-items: baseline;
  padding-block: 0.25rem;
  border-top: 0.0625rem solid var(--panel-edge);
}

.home-dailies__game {
  font-family: var(--display);
  font-size: 0.9375rem;
  font-weight: 600;
}

.home-dailies__row {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  min-width: 0;
}

.home-dailies__games .filters {
  flex: 1;
  flex-wrap: nowrap;
  gap: 0.25rem;
  min-width: 0;
  margin-block-end: -0.375rem;
  margin-inline-end: 0;
  overflow-x: auto;
  list-style: none;
}

/* Both after the row rather than over its ends, so they never cover a pill and every row's pills
   still start at one edge. A row too long for its line says so once filters.js has measured it;
   before that, and on a touch screen, there are none, and an end the row has reached greys its button.
   Positioned, so they are drawn over the row's end: its fade mask lifts the row above anything flat. */
.home-dailies__step {
  display: none;
  position: relative;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 0.0625rem solid var(--panel-edge);
  border-radius: 50%;
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
  transition: background-color var(--duration-hover) ease;
}

.home-dailies__step svg {
  width: 1.125rem;
  height: 1.125rem;
}

.home-dailies__step:hover:not(:disabled) {
  background: color-mix(in srgb, var(--accent) 18%, var(--panel));
}

/* Flat and grey rather than faded: a faded button let the pill under its edge show through. */
.home-dailies__step:disabled {
  border-style: dashed;
  color: var(--ink-soft);
  cursor: default;
}

@media (hover: hover) and (pointer: fine) {
  .home-dailies__row:has(> [data-overflows]) > .home-dailies__step {
    display: flex;
  }
}

.home-dailies__games .filters > li {
  display: flex;
  flex: none;
}

/* A board not yet played is a plain pill, an offer. One that has been played is marked in
   words for a screen reader, and on screen by shape as well as colour: an unfinished board's edge is
   dashed, a won board wears the wash that marks a place and a tick. */
.filters .home-daily {
  padding: 0.125rem 0.625rem;
  font-size: 0.875rem;
  white-space: nowrap;
}

.filters .home-daily:hover {
  background: color-mix(in srgb, var(--accent) 12%, var(--panel));
}

.home-daily[data-state="played"] {
  border-style: dashed;
  border-color: var(--accent-edge);
}

.filters .home-daily[data-state="won"] {
  border-color: var(--accent-edge);
  background: color-mix(in srgb, var(--accent) 28%, var(--panel));
  color: var(--accent-ink);
}

.home-daily[data-state="won"]::before {
  content: "\2713\00a0" / "";
}

/* Label and count on one line, what it asks of today under them, set against the panel's edge. */
.home-streak {
  grid-area: streak;
  display: grid;
  grid-template-columns: auto auto;
  column-gap: 0.5rem;
  align-items: baseline;
  justify-content: end;
  text-align: end;
}

/* No boards could be read, so the streak is the whole panel. */
.home-streak:only-child {
  grid-area: auto / 1 / auto / -1;
  justify-content: start;
  text-align: start;
}

.home-streak h2 {
  font-family: var(--body);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink-soft);
}

.home-streak__reading {
  margin: 0;
  font-family: var(--display);
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.2;
}

.home-streak__note {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 0.875rem;
  color: var(--ink-soft);
}

/* A run still to be kept today is the one thing here with a clock on it, so its note is the ink. */
.home-streak[data-state="at-risk"] .home-streak__note {
  color: var(--ink);
  font-weight: 700;
}

/* The games to go back to, a visitor's or a player's: a few names long, so the heading and its pills
   share one row. */
.home-recent {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  margin-top: 2.5rem;
  padding-block: 1rem;
}

.home-recent[hidden] {
  display: none;
}

.home-player .home-recent {
  margin-top: 0;
}

.home-recent h2 {
  margin: 0;
  font-size: 1.1875rem;
}

.home-recent ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-recent a {
  display: block;
}

.home-recent__variant {
  font-weight: 400;
}

@media (max-width: 40rem) {
  .home-recent {
    margin-top: 1.75rem;
    padding: 1rem 1.25rem;
  }

  .home-player {
    margin-top: 1.75rem;
  }

  .home-player .panel {
    padding: 1.25rem;
  }

  .home-dailies {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "title"
      "streak"
      "list";
  }

  .home-streak {
    justify-content: start;
    margin-top: 0.5rem;
    text-align: start;
  }
}