/* A style's page (/play/<style>, tools/style-pages.mjs): the heading with the style's glyph and
   script, the two ways to sit down, the regulars at that table and the links to the others.
   The glyph tiles and the colour a style come from design/global-home.css. */
.style-page .reading-content h1 {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  column-gap: 16px;
  align-items: center;
  margin-bottom: 20px;
}
.style-page .reading-content h1 .style-glyph {
  grid-row: 1 / span 2;
}
.style-page .reading-content h1 .style-script {
  grid-column: 2;
  display: block;
  font: 400 16px/1.4 var(--club-body-font);
  color: var(--club-muted);
}
.style-page .style-lead {
  font-size: 19px;
}
.style-page .reading-content .style-facts {
  color: var(--club-muted);
  font-size: 14px;
  margin-top: -8px;
}
.style-page .style-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 20px 0 10px;
}
.style-page .style-actions .button {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  font-weight: 800;
}
.style-page .style-actions .button-secondary {
  background: var(--club-paper);
  color: var(--club-teal);
  border: 1px solid var(--club-teal);
}
.style-page .reading-content .style-note {
  font-size: 14px;
  color: var(--club-muted);
}
.style-page .style-differs li {
  margin: 8px 0;
}
.style-page .style-regulars {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
}
.style-page .style-regulars li {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  column-gap: 12px;
  margin: 0;
  padding: 14px;
  background: var(--club-paper);
  border: 1px solid var(--club-line);
  border-top: 4px solid var(--style-accent, var(--club-teal));
  border-radius: 6px;
}
.style-page .style-regulars img {
  width: 56px;
  height: 62px;
  object-fit: cover;
  object-position: 50% 18%;
  border-radius: 50%;
  background: #f5ecd8;
}
.style-page .style-regulars b {
  display: block;
  color: var(--club-ink);
}
.style-page .style-regulars small {
  color: var(--club-muted);
}
.style-page .style-regulars p {
  margin: 6px 0 0;
  font-size: 15px;
  font-style: italic;
}
.style-page .style-tables {
  gap: 8px 10px;
  margin: 0 0 24px;
}
.style-page .style-tables a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 6px;
  background: var(--club-paper);
  border: 1px solid var(--club-line);
  border-radius: 999px;
  text-decoration: none;
  font-weight: 650;
}
.style-page .style-tables .style-glyph {
  width: 22px;
  height: 29px;
  font-size: 14px;
  border-bottom-width: 2px;
}
.style-page .reading-content .stake-table td:last-child {
  white-space: nowrap;
}

/* Your line on the page (dist/home/style-note.js), drawn only when this device has played here. */
.style-page .reading-content .style-yours {
  margin: 4px 0 0;
  padding: 8px 12px;
  border-inline-start: 4px solid var(--style-accent, var(--club-teal));
  background: var(--club-paper);
  font-size: 14px;
  color: var(--club-ink);
}