/* The global club's home (dist/home/global-home.js, docs/GLOBAL-CLUB-DESIGN.md): the table
   counter on the landing, the picker and Today at the club on the signed-in home, the header's
   More menu and the phone's bottom bar. Everything here is scoped to elements that module makes,
   so with GLOBAL_HOME off none of it applies. */

/* One colour a style, used only for the glyph's tile and a card's rule. */
[data-style='singapore'] {
  --style-accent: var(--club-teal);
}
[data-style='hongkong'] {
  --style-accent: var(--club-lattice);
}
[data-style='riichi'] {
  --style-accent: #3b4a8a;
}
[data-style='mcr'] {
  --style-accent: #b58a1e;
}
[data-style='classical'] {
  --style-accent: #7a4a10;
}
[data-style='american'] {
  --style-accent: #2c6f9b;
}
[data-style='easy'] {
  --style-accent: var(--club-teal);
}

.table-counter .style-glyph,
.table-card .style-glyph,
.continue-card .style-glyph {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 53px;
  border-radius: 4px;
  background: var(--style-accent, var(--club-teal));
  color: var(--club-paper);
  border: 1px solid var(--club-line);
  border-bottom: 4px solid var(--club-mustard);
  font:
    700 26px 'Noto Sans SC',
    serif;
}
.home-tag {
  display: inline-block;
  font-style: normal;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--club-tai-text);
  background: var(--club-tai);
  border-radius: 999px;
  padding: 2px 8px;
  margin-inline-start: 6px;
  vertical-align: middle;
  white-space: nowrap;
}

/* The landing's counter: six rows, each one link. */
.table-counter {
  margin: 4px 0 20px;
  max-width: 640px;
}
.table-counter .counter-title {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--club-muted);
  margin: 0 0 8px;
}
.table-counter ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.counter-row {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 68px;
  padding: 8px 14px 8px 10px;
  background: var(--club-paper);
  color: var(--club-ink);
  border: 1px solid var(--club-line);
  border-inline-start: 5px solid var(--style-accent, var(--club-teal));
  border-radius: 6px;
  text-decoration: none;
}
.counter-row:hover,
.counter-row:focus-visible {
  background: var(--club-selection);
  border-color: var(--club-teal);
  border-inline-start-color: var(--style-accent, var(--club-teal));
}
.counter-name {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  gap: 2px;
}
.counter-name strong {
  font-size: 18px;
  line-height: 1.2;
}
.counter-meta {
  color: var(--club-muted);
  font-size: 13px;
}
.counter-facts {
  color: var(--club-help);
  font-size: 12px;
}
.counter-go {
  flex: none;
  font-weight: 800;
  color: var(--club-teal);
}
#welcome-copy .welcome-pitch {
  margin-bottom: 16px;
}
@media (max-width: 600px) {
  .counter-facts {
    display: none;
  }
  .counter-name strong {
    font-size: 17px;
  }
  .counter-row {
    min-height: 60px;
  }
}

/* The signed-in picker: cards, three across. */
.club-picker {
  margin: 8px 0 28px;
}
.table-picker {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.table-card {
  display: grid;
  grid-template-columns: 40px 1fr;
  grid-template-rows: auto 1fr auto;
  column-gap: 14px;
  row-gap: 10px;
  padding: 18px;
  background: var(--club-paper);
  border: 1px solid var(--club-line);
  border-top: 5px solid var(--style-accent, var(--club-teal));
  border-radius: 6px;
}
.table-card .style-glyph {
  grid-row: 1;
}
.table-card-text {
  grid-column: 2;
  grid-row: 1 / span 2;
  min-width: 0;
}
.table-card h3 {
  font: var(--club-section-heading);
  font-size: 21px;
  margin: 0;
}
.table-card h3 [lang] {
  display: block;
  font: 400 13px/1.4 var(--club-body-font);
  color: var(--club-muted);
}
.table-card .home-tag {
  margin: 6px 0 0;
}
.table-card p {
  color: var(--club-help);
  font-size: 13px;
  line-height: 1.5;
  margin: 10px 0 0;
}
.table-card .style-facts {
  font-size: 12px;
  color: var(--club-muted);
}
.table-card-actions {
  grid-column: 1 / -1;
  grid-row: 3;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.table-card-actions .entry-primary,
.table-card-actions .entry-secondary {
  min-height: 44px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 800;
}
.table-card-actions .entry-secondary {
  background: var(--club-paper);
}
@media (max-width: 950px) {
  .table-picker {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 600px) {
  .table-picker {
    grid-template-columns: 1fr;
  }
  .table-card {
    padding: 14px;
  }
}

/* Continue and Today at the club, above and below the picker. */
#play-menu .club-continue,
#play-menu .club-today {
  margin: 0 0 28px;
}
#play-menu .club-continue h2,
#play-menu .club-today h2,
#play-menu .club-more-title {
  font: var(--club-section-heading);
  margin: 0 0 12px;
}
#play-menu .club-more-title {
  margin-top: 8px;
}
.continue-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}
.continue-card {
  display: grid;
  grid-template-columns: 40px 1fr;
  column-gap: 14px;
  align-content: center;
  min-height: 84px;
  padding: 14px 18px;
  background: var(--club-selection);
  color: var(--club-ink);
  border: 1px solid var(--club-line);
  border-inline-start: 5px solid var(--style-accent, var(--club-teal));
  border-radius: 6px;
  text-decoration: none;
}
.continue-card .style-glyph {
  grid-row: span 2;
  align-self: center;
}
.continue-card strong {
  font-size: 17px;
}
.continue-card > span:last-child {
  color: var(--club-help);
  font-size: 13px;
}
.club-days {
  margin: -4px 0 12px;
  font-weight: 800;
  color: var(--club-teal);
}
#play-menu .club-today .today-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
#play-menu .club-today .play-choice {
  display: grid;
  grid-template-columns: 40px 1fr;
  column-gap: 14px;
  align-content: center;
  text-align: left;
  min-height: 112px;
  padding: 18px;
  background: var(--club-paper);
  color: var(--club-ink);
  border: 1px solid var(--club-line);
  border-radius: 6px;
  text-decoration: none;
}
#play-menu .club-today .play-choice::before {
  content: attr(data-choice-glyph);
  grid-row: span 2;
  align-self: center;
  display: grid;
  place-items: center;
  width: 40px;
  height: 53px;
  background: var(--style-accent, var(--club-selection));
  color: var(--club-paper);
  border: 1px solid var(--club-line);
  border-bottom: 4px solid var(--club-mustard);
  border-radius: 4px;
  font:
    700 26px 'Noto Sans SC',
    serif;
}
#play-menu .club-today .play-choice:not([data-style])::before {
  background: var(--club-selection);
  color: var(--club-teal);
  border-bottom-color: var(--club-lattice);
}
#play-menu .club-today .play-choice strong {
  font-size: 18px;
}
#play-menu .club-today .play-choice > span {
  color: var(--club-help);
  font-size: 13px;
}
#play-menu .club-today .play-choice:hover {
  background: var(--club-selection);
  border-color: var(--club-teal);
}
@media (max-width: 600px) {
  #play-menu .club-today .today-list {
    grid-template-columns: 1fr;
  }
}

/* The header: Play, Learn, Friends and More. */
.club-page-header nav .nav-more {
  position: relative;
  display: inline-block;
}
.club-page-header nav .nav-more summary {
  list-style: none;
  cursor: pointer;
  font-weight: 800;
  color: var(--club-teal);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.club-page-header nav .nav-more summary::-webkit-details-marker {
  display: none;
}
.club-page-header nav .nav-more summary::after {
  content: ' ▾';
  font-size: 11px;
}
.club-page-header nav .nav-more-list {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + 8px);
  z-index: 5;
  display: grid;
  gap: 4px;
  min-width: 180px;
  padding: 10px 14px;
  background: var(--club-paper);
  border: 1px solid var(--club-line);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgb(43 36 28 / 0.12);
}
.club-page-header nav .nav-more-list a {
  display: block;
  padding: 6px 0;
}

/* The phone's bottom bar, on the home only; it leaves when a table is up. */
.club-tabbar {
  display: none;
}
@media (max-width: 750px) {
  .club-tabbar {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 6;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: var(--club-paper);
    border-top: 1px solid var(--club-line);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .club-tabbar a {
    display: grid;
    justify-items: center;
    gap: 2px;
    padding: 8px 4px 10px;
    font-size: 12px;
    font-weight: 800;
    color: var(--club-help);
    text-decoration: none;
  }
  .club-tabbar a[aria-current] {
    color: var(--club-teal);
  }
  .club-tabbar a span {
    font:
      700 20px 'Noto Sans SC',
      serif;
  }
  body:has(.club-tabbar):not(.playing) {
    padding-bottom: 72px;
  }
  body.playing .club-tabbar {
    display: none;
  }
}

/* Phase B: the links to each table's page, from the counter and the picker cards. */
.table-counter .counter-about {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--club-muted);
}
.table-card-actions .table-card-about {
  align-self: center;
  margin-inline-start: auto;
  font-size: 13px;
  font-weight: 800;
}
/* Your usual table: the last table finished with friends, under Continue. */
.usual-table {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  column-gap: 14px;
  align-items: center;
  margin-top: 12px;
  padding: 14px 18px;
  background: var(--club-paper);
  border: 1px solid var(--club-line);
  border-inline-start: 5px solid var(--style-accent, var(--club-teal));
  border-radius: 6px;
}
.usual-table .style-glyph {
  display: grid;
  place-items: center;
  width: 40px;
  height: 53px;
  border-radius: 4px;
  background: var(--style-accent, var(--club-teal));
  color: var(--club-paper);
  border: 1px solid var(--club-line);
  border-bottom: 4px solid var(--club-mustard);
  font:
    700 26px 'Noto Sans SC',
    serif;
}
.usual-table .usual-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.usual-table strong {
  font-size: 17px;
}
.usual-table .usual-text > span {
  color: var(--club-help);
  font-size: 13px;
}
.usual-table .open-usual {
  min-height: 44px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 800;
  background: var(--club-paper);
}
@media (max-width: 600px) {
  .usual-table {
    grid-template-columns: 40px minmax(0, 1fr);
  }
  .usual-table .open-usual {
    grid-column: 1 / -1;
  }
}
/* The home's footer names the six tables' pages (static, dist/online.html). */
#entry-footer .footer-tables {
  display: block;
  margin-top: 8px;
}

/* Phase E polish: the header's four links fit a phone's width on one line, and Continue's cards
   become a rail when there is more than one. */
@media (max-width: 600px) {
  /* The home's header (dist/interface.css sizes it by id): under the brand, the four links take
     the whole row on one line. */
  #entry-header nav {
    flex: 1 1 100%;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 18px;
  }
  #entry-header nav a,
  #entry-header nav .nav-more summary {
    font-size: 14px;
    white-space: nowrap;
  }
  .continue-list {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(240px, 80%);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 6px;
    margin-inline: -16px;
    padding-inline: 16px;
  }
  .continue-list > li {
    scroll-snap-align: start;
  }
}

/* The More menu stands in the header row like the links beside it (dist/interface.css gives
   them 44px of height), on every width. */
.club-page-header nav .nav-more,
.club-page-header nav .nav-more summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: 0;
}