/* Shared readable interface for portrait touch screens and desktop browsers.
   Tile artwork, rack widths and seating geometry are deliberately untouched.
   Phone landscape keeps its existing layout. */
@media (orientation: portrait), (hover: hover) and (pointer: fine) {
  .topbar > button,
  .topbar :is(.nav, .mobile-header-actions, .landscape-controls) > button,
  .topbar .mobile-header-actions > button.ghost,
  .topbar .mobile-header-actions > button.score-button,
  .board .table-turn-bar .move-actions > button,
  .board .mobile-hand-tools button,
  .board .mobile-view-nav button,
  .table-toolbar .table-actions > button,
  .footer > button {
    min-width: 44px;
    min-height: 44px;
    font-size: 0.875rem;
    line-height: 1.25;
  }
  .board .mobile-hand-tools {
    min-height: 44px;
  }
  .topbar .brand .mobile-round {
    font-size: 0.75rem;
    line-height: 1.2;
  }
  .topbar .brand .table-wordmark > span {
    font-size: max(0.78em, 0.6875rem);
  }
  .board .table-turn-bar .turn-status strong {
    font-size: 0.875rem;
    line-height: 1.3;
  }
  .board .table-turn-bar .turn-status p,
  .board .portrait-focus small,
  .board .focus-caption,
  .board .claim-option {
    font-size: 0.75rem;
    line-height: 1.3;
  }
  .board .portrait-name > strong,
  .board .portrait-name :is(.tai, .tai-count, .tai-count b) {
    font-size: 0.75rem;
  }
  :is(#lobby, #account-panel, .room-head, .lobby-ready, .session-summary) button,
  :is(.dialog-actions, .mobile-menu-grid, .arrange-options, .arrange-move) > button,
  .table-inspection .inspection-close,
  .dialog-head .close-btn,
  .profile-page :is(.button, summary),
  .plans-page :is(.button, summary),
  .site-header ~ main :is(.button, summary),
  .checkout-page :is(.button, summary) {
    min-height: 44px;
    min-width: 44px;
    font-size: 1rem;
    line-height: 1.4;
  }
  .dialog-head .close-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  :is(#lobby, #account-panel, .table-inspection, .lesson-inspection, #modal, .hand-card-dialog)
    :is(p, label),
  .entry-intro {
    font-size: 1rem;
    line-height: 1.5;
  }
  :is(#lobby, #account-panel) :is(.eyebrow, .entry-footnote, .muted),
  :is(.profile-page, .plans-page) :is(.fine-print, .eyebrow) {
    font-size: 0.8125rem;
    line-height: 1.5;
  }
  :is(#lobby, #account-panel, .table-inspection, #modal) summary {
    min-height: 44px;
    padding-block: 10px;
    font-size: 0.9375rem;
    line-height: 1.5;
  }
  :is(#lobby, #account-panel, .profile-page, .plans-page, .table-inspection, #modal)
    :is(input:not([type='checkbox']):not([type='radio']), select, textarea) {
    min-height: 44px;
    font-size: 1rem;
  }
  /* WebKit's native select ignores min-height; an explicit height keeps its tap area usable. */
  :is(#lobby, #account-panel, .profile-page, .plans-page, .table-inspection, #modal) select {
    height: 44px;
  }
  :is(#entry-header, .membership-header, .membership-footer, #entry-footer, .site-header) nav a,
  #entry-footer > a,
  #account-panel .account-primary-actions > a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    min-width: 44px;
    font-size: 0.875rem;
  }
  #entry-header nav {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
  }
  #entry-header {
    flex-wrap: wrap;
  }
  .dialog-head h2,
  .table-inspection h2 {
    font-size: 1.5rem;
    overflow-wrap: anywhere;
  }
}

/* One inspection surface across practice, online tables and lessons. */
/* The hand card's preview (dist/hand-card-share.js) is its own dialog above #modal, dressed alike. */
:is(#modal, .hand-card-dialog, .table-inspection, .lesson-inspection) {
  --club-dialog-inset: clamp(16px, 3vw, 24px);
  width: min(650px, calc(100% - 32px));
  max-height: min(90dvh, calc(100dvh - 32px));
  background: var(--club-page-card);
  color: var(--club-page-text);
  border: 1px solid var(--club-page-line);
  border-radius: var(--club-page-radius);
}
:is(.table-inspection, .lesson-inspection) {
  padding: var(--club-dialog-inset);
}
:is(#modal, .hand-card-dialog, .table-inspection, .lesson-inspection)::backdrop {
  background: #001d18ba;
  backdrop-filter: blur(5px);
}
:is(#modal, .hand-card-dialog, .table-inspection, .lesson-inspection) h2 {
  font: var(--club-section-heading);
  overflow-wrap: anywhere;
}
:is(#modal, .hand-card-dialog) .dialog-head,
:is(#modal, .hand-card-dialog) .dialog-content {
  padding: var(--club-dialog-inset);
}
:is(#modal, .hand-card-dialog) .dialog-head {
  background: var(--club-page-card);
}
:is(#modal, .hand-card-dialog) .dialog-actions {
  padding: 16px var(--club-dialog-inset);
  background: var(--club-page-panel);
}
/* The card as it will be shared: as tall as the dialog leaves room for once its title, note and
   buttons are placed (about 290 px), never wider than the dialog. */
.hand-card-preview canvas {
  display: block;
  width: min(100%, max(160px, calc((min(90dvh, 100dvh - 32px) - 290px) * 0.8)));
  height: auto;
  margin: 0 auto;
  border-radius: 12px;
}
/* A landscape phone is short: the whole card sits beside its title, note and buttons, as tall as
   the dialog itself, rather than under them with its waits and footer below the fold. */
@media (orientation: landscape) and (max-height: 560px) {
  .hand-card-dialog {
    width: min(760px, calc(100% - 32px));
  }
  .hand-card-dialog[open] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr) auto;
  }
  .hand-card-dialog .dialog-content {
    display: contents;
  }
  .hand-card-dialog .dialog-head {
    grid-area: 1 / 2;
    position: static;
  }
  .hand-card-dialog .hand-card-preview {
    grid-area: 1 / 1 / 5 / 2;
    padding: var(--club-dialog-inset) 0 var(--club-dialog-inset) var(--club-dialog-inset);
  }
  .hand-card-dialog :is(.hand-card-note, .hand-card-status) {
    grid-column: 2;
    margin: 0;
    padding: 0 var(--club-dialog-inset);
  }
  .hand-card-dialog .hand-card-status {
    align-self: start;
    padding-top: 8px;
  }
  .hand-card-dialog .dialog-actions {
    grid-area: 4 / 2;
    position: static;
  }
  .hand-card-preview canvas {
    width: auto;
    height: calc(min(90dvh, 100dvh - 32px) - 2 * var(--club-dialog-inset) - 2px);
  }
}
:is(.dialog-actions, .mobile-menu-grid) > button,
.table-inspection .inspection-close,
.lesson-inspection form > button {
  border-radius: var(--club-control-radius);
}
.mobile-menu-grid {
  gap: 10px;
}
.mobile-menu-grid > button {
  margin: 0;
  padding: 10px 14px;
  background: var(--club-page-choice);
  border-color: var(--club-page-line);
}
.table-inspection .inspection-close {
  display: block;
  margin: 16px 0 0 auto;
  background: var(--club-page-accent);
  border-color: var(--club-page-accent);
  color: #163c2d;
  font-weight: 650;
}

@media (max-width: 559px) and (orientation: portrait) {
  /* Chat remains available in Menu; four clear controls fit beside the wordmark. */
  .topbar .mobile-header-actions > [data-command='chat'] {
    display: none;
  }
  .topbar .mobile-header-actions > button {
    padding-inline: 6px;
  }
  .topbar .mobile-header-actions {
    gap: 3px;
  }
  .topbar .brand .mobile-round {
    font-size: 0.6875rem;
  }
  .board .table-turn-bar .move-actions > button {
    /* Keep multiline claim buttons as tall as their illustrated choices require. */
    flex-shrink: 0;
  }
}

/* Preserve the official Apple artwork inside the account panel's generic button styling. */
#account-panel button.apple-signin {
  padding: 0;
  border: 0;
  background: #000;
  min-height: 48px;
}

.signin-cancel {
  display: block;
  min-width: 44px;
  min-height: 44px;
  margin: 12px auto;
  padding: 10px 14px;
  border: 1px solid currentColor;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 1rem;
  line-height: 1.4;
}
.signin-cancel[hidden] {
  display: none;
}
/* The reminder stays in the existing turn row without a banner. */
.board .table-turn-bar.your-turn .turn-status strong,
.live-turn.your-turn .live-turn-status strong {
  color: #e1c994;
  font-size: 0.8125rem;
  font-weight: 500;
}
.discard-turn-icon {
  margin-right: 3px;
  font-size: 0.45em;
  vertical-align: middle;
}

/* Present for assistive technology only; announcements must stay in the accessibility tree. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Table menus disclose occasional tools instead of giving every action equal weight. */
.table-menu {
  display: grid;
  gap: 12px;
}
.table-menu .table-menu-quick {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.table-menu-section {
  margin: 0;
  border: 1px solid var(--club-page-line);
  border-radius: var(--club-control-radius);
  padding: 0 12px;
}
.table-menu-section > summary {
  min-height: 44px;
  padding: 12px 0;
  cursor: pointer;
  color: var(--club-page-text);
  font-weight: 600;
}
.table-menu-section > summary:focus-visible {
  outline: 3px solid var(--club-page-accent);
  outline-offset: 2px;
}
.table-menu-section > .mobile-menu-grid {
  margin: 0 0 12px;
}
.table-menu-leave {
  border-top: 1px solid var(--club-page-line);
  padding-top: 12px;
}
.table-menu-leave > button {
  min-height: 44px;
  width: 100%;
  margin: 0;
  border-radius: var(--club-control-radius);
}
.table-menu button {
  overflow-wrap: normal;
}
.table-menu-quick > .sound-toggle {
  grid-column: 1 / -1;
  justify-content: center;
}
.table-menu-quick .sound-label {
  white-space: nowrap;
}