/* ============================================
   פנקס הקטן — UI Components
   Source: brand/03_color_type_system.md
   Requires: tokens.css loaded first.

   Naming convention: BEM
   .block             - the component
   .block__element    - a child element
   .block--modifier   - a state/variant
   ============================================ */

/* ============================================
   BASE — body, typography defaults
   These DON'T override existing base.css yet.
   To migrate, add class="brand" to <body>.
   ============================================ */

.bk {
  /* Only typography defaults. Color/background come from context. */
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
}

.bk h1, .bk .h1 {
  font-family: var(--font-headline);
  font-weight: var(--fw-extrabold);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  margin: 0;
}
.bk h2, .bk .h2 {
  font-family: var(--font-headline);
  font-weight: var(--fw-extrabold);
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  margin: 0;
}
.bk h3, .bk .h3 {
  font-family: var(--font-headline);
  font-weight: var(--fw-extrabold);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  margin: 0;
}

/* ============================================
   TEXT UTILITIES
   ============================================ */

.bk .text-tag {
  font-family: var(--font-body);
  font-size: var(--fs-tag);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-muted-500);
}

.bk .text-sub {
  font-family: var(--font-body);
  font-size: var(--fs-sub);
  font-weight: var(--fw-regular);
  color: var(--color-ink-700);
}

.bk .text-small {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  color: var(--color-muted-500);
}

.bk .text-num {
  font-variant-numeric: tabular-nums;
  font-weight: var(--fw-medium);
}
.bk .text-num--win {
  color: var(--color-success-600);
  font-weight: var(--fw-bold);
}
.bk .text-num--loss {
  color: var(--color-danger-700);
  font-weight: var(--fw-bold);
}

.text-muted-on-paper { color: var(--color-muted-500); }
.text-muted-on-felt  { color: var(--color-muted-300); }

/* ============================================
   BUTTON
   .btn — base
   .btn--primary — orange CTA (the brand voice)
   .btn--ghost — outline on light bg
   .btn--ghost-dark — outline on dark bg
   .btn--danger — destructive action
   .btn--sm / .btn--lg — sizes
   ============================================ */

.bk .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--fs-body);
  line-height: 1;
  padding: var(--space-3) var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-ink-900);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
  white-space: nowrap;
}

.bk .btn:focus-visible {
  outline: 2px solid var(--color-accent-600);
  outline-offset: 2px;
}

.bk .btn--primary {
  background: var(--color-accent-cta);
  border-color: var(--color-accent-cta);
  color: var(--color-paper-50);
}
.bk .btn--primary:hover,
.bk .btn--primary:focus {
  background: var(--color-accent-cta-hover);
  border-color: var(--color-accent-cta-hover);
}

.bk .btn--ghost {
  border-color: var(--color-ink-900);
  color: var(--color-ink-900);
}
.bk .btn--ghost:hover {
  background: var(--color-paper-100);
}

.bk .btn--ghost-dark {
  border-color: var(--color-paper-50);
  color: var(--color-paper-50);
}
.bk .btn--ghost-dark:hover {
  background: rgba(251, 246, 233, 0.1);
}

.bk .btn--danger {
  background: var(--color-danger-700);
  border-color: var(--color-danger-700);
  color: var(--color-paper-50);
}
.bk .btn--danger:hover {
  background: var(--color-danger-800);
}

/* Outline variant for destructive actions that are not the confirmation itself */
.bk .btn--danger-outline {
  background: transparent;
  border-color: var(--color-danger-700);
  color: var(--color-danger-700);
}
.bk .btn--danger-outline:hover { background: var(--color-danger-50); }

/* Quiet variant: secondary action on paper */
.bk .btn--quiet {
  background: transparent;
  border-color: var(--color-paper-300);
  color: var(--color-ink-700);
}
.bk .btn--quiet:hover { background: var(--color-paper-100); }

.bk .btn:disabled,
.bk .btn--disabled {
  background: var(--color-muted-300);
  border-color: var(--color-muted-300);
  color: var(--color-muted-500);
  cursor: not-allowed;
  pointer-events: none;
}

.bk .btn--sm {
  font-size: var(--fs-small);
  padding: var(--space-2) var(--space-4);
}
.bk .btn--lg {
  font-size: var(--fs-h3);
  padding: var(--space-4) var(--space-6);
}

/* ============================================
   CARD
   .card — base paper-cream surface
   .card--leader — gold border for "winner" state
   .card--empty — for empty states (centered)
   ============================================ */

.bk .card {
  background: var(--color-paper-50);
  color: var(--color-ink-900);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-card);
}

.bk .card--leader {
  border: 2px solid var(--color-gold-500);
  background: linear-gradient(to bottom, var(--color-paper-50), var(--color-paper-100));
}

.bk .card--empty {
  text-align: center;
  padding: var(--space-6) var(--space-5);
}
.card--empty > * + * { margin-top: var(--space-3); }

.bk .card__title {
  font-family: var(--font-headline);
  font-weight: var(--fw-extrabold);
  font-size: var(--fs-h3);
  margin-bottom: var(--space-2);
}
.bk .card__sub {
  font-size: var(--fs-sub);
  color: var(--color-ink-700);
}

/* ============================================
   KPI BOX
   Used in stats screens.
   .kpi — container
   .kpi__label — small uppercase label
   .kpi__value — large number
   .kpi--win / .kpi--loss / .kpi--gold — color variants
   ============================================ */

.bk .kpi {
  background: var(--color-paper-50);
  color: var(--color-ink-900);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-4);
  box-shadow: var(--shadow-card);
}

.bk .kpi__label {
  font-family: var(--font-body);
  font-size: var(--fs-tag);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-muted-500);
  margin-bottom: var(--space-1);
}

.bk .kpi__value {
  font-family: var(--font-headline);
  font-weight: var(--fw-extrabold);
  font-size: var(--fs-kpi);
  line-height: 1;
  color: var(--color-ink-900);
  font-variant-numeric: tabular-nums;
}

.kpi--win .kpi__value { color: var(--color-success-600); }
.kpi--loss .kpi__value { color: var(--color-danger-700); }
.bk .kpi--gold {
  background: linear-gradient(to bottom, var(--color-paper-50), var(--color-paper-100));
  border: 2px solid var(--color-gold-500);
}
.bk .kpi--gold .kpi__label,
.bk .kpi--gold .kpi__value {
  color: var(--color-gold-500);
}

/* KPI grid helper */
.bk .kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
}
@media (max-width: 700px) {
  .kpi-row { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================
   DATA TABLE
   Sensible defaults for tabular data.
   ============================================ */

.bk .data-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--color-ink-900);
}
.bk .data-table thead {
  border-bottom: var(--border-bold);
}
.bk .data-table th {
  text-align: right;
  font-weight: var(--fw-bold);
  background: var(--color-ink-900);
  color: var(--color-paper-200);
  padding: var(--space-3) var(--space-2);
  font-size: var(--fs-tag);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: none;
}
.bk .data-table td {
  padding: var(--space-3) var(--space-2);
  border-bottom: 1px solid var(--color-paper-200);
}
.bk .data-table tbody tr:nth-child(even) td {
  background: var(--color-paper-100);
}
.bk .data-table tbody tr:hover td {
  background: var(--color-paper-200);
}
.bk .data-table tbody tr:last-child td {
  border-bottom: none;
}

/* ============================================
   BADGE / TAG
   ============================================ */

.bk .badge {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--fs-tag);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--color-paper-200);
  color: var(--color-ink-700);
}
.badge--success { background: var(--color-success-600); color: var(--color-paper-50); }
.badge--danger { background: var(--color-danger-700); color: var(--color-paper-50); }
.badge--gold { background: var(--color-gold-500); color: var(--color-ink-900); }
.badge--accent { background: var(--color-accent-600); color: var(--color-paper-50); }

/* ============================================
   PLAYER CARD (for live game)
   ============================================ */

.bk .player-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--color-paper-50);
  color: var(--color-ink-900);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--color-paper-200);
}

.bk .player-card__avatar {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-felt-700);
  color: var(--color-paper-50);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-headline);
  font-weight: var(--fw-bold);
  font-size: var(--fs-body);
}

.bk .player-card__info {
  flex: 1;
  min-width: 0;
}

.bk .player-card__name {
  font-family: var(--font-headline);
  font-weight: var(--fw-bold);
  font-size: var(--fs-sub);
}

.bk .player-card__chips {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  color: var(--color-muted-500);
  margin-top: 2px;
}

.bk .player-card--leader {
  border: 2px solid var(--color-gold-500);
  background: linear-gradient(to bottom, var(--color-paper-50), var(--color-paper-100));
}
.bk .player-card--leader .player-card__avatar {
  background: var(--color-gold-500);
  color: var(--color-ink-900);
}

/* ============================================
   EMPTY STATE
   ============================================ */

.bk .empty-state {
  text-align: center;
  padding: var(--space-6) var(--space-5);
  background: var(--color-paper-50);
  border-radius: var(--radius-lg);
  color: var(--color-ink-900);
  box-shadow: var(--shadow-card);
}
.bk .empty-state__title {
  font-family: var(--font-headline);
  font-weight: var(--fw-extrabold);
  font-size: var(--fs-h3);
  margin-bottom: var(--space-2);
}
.bk .empty-state__text {
  color: var(--color-ink-700);
  font-size: var(--fs-sub);
  margin-bottom: var(--space-4);
}

/* ============================================
   LAYOUT HELPERS
   ============================================ */

.bk .app-bg-felt {
  background: var(--color-felt-900);
  color: var(--color-paper-50);
}

.bk .app-bg-paper {
  background: var(--color-paper-50);
  color: var(--color-ink-900);
}

.bk .page-section {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-4);
}

.bk .page-header {
  display: flex;
  justify-content: space-between;
  align-items: end;
  padding-bottom: var(--space-4);
  border-bottom: var(--border-bold);
  margin-bottom: var(--space-5);
}

.bk .divider {
  border: none;
  border-top: var(--border-thin);
  margin: var(--space-5) 0;
}

.bk .divider--dashed {
  border-top: var(--border-dash);
}

/* ============================================
   HERO (page top with title + sub + actions)
   ============================================ */

.bk .hero {
  text-align: center;
  padding: var(--space-6) var(--space-4);
}
.bk .hero h1, .bk .hero .h1 {
  margin-bottom: var(--space-2);
}
.bk .hero .hero__sub {
  color: var(--color-muted-300);
  font-size: var(--fs-sub);
  margin-bottom: var(--space-4);
}
.hero--on-paper .hero__sub { color: var(--color-ink-700); }

/* ============================================
   RESPONSIVE TYPE SCALE (mobile)
   ============================================ */

@media (max-width: 700px) {
  .bk h1, .bk .h1 { font-size: 32px; }
  .bk h2, .bk .h2 { font-size: 24px; }
  .bk h3, .bk .h3 { font-size: 18px; }
}

/* ============================================
   FORM FIELDS
   .field — container (replaces old .form-row)
   .field__label — label above input
   .field__input — text/email/password/number input
   .field--error — error state
   ============================================ */

.bk .field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.bk .field__label {
  font-family: var(--font-body);
  font-size: var(--fs-sub);
  font-weight: var(--fw-medium);
  color: var(--color-ink-900);
}

.bk .field__input,
.bk .field input[type="text"],
.bk .field input[type="email"],
.bk .field input[type="password"],
.bk .field input[type="number"],
.bk .field input[type="tel"],
.bk .field textarea,
.bk .field select {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--color-ink-900);
  background: var(--color-paper-50);
  border: 1px solid var(--color-paper-200);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  width: 100%;
  transition: border-color var(--transition-fast);
}

.bk .field__input:focus,
.bk .field input:focus,
.bk .field textarea:focus,
.bk .field select:focus {
  outline: none;
  border-color: var(--color-accent-600);
  box-shadow: 0 0 0 3px rgba(232, 93, 44, 0.15);
}

.bk .field--error .field__input,
.bk .field--error input {
  border-color: var(--color-danger-700);
}

.bk .field__hint {
  font-size: var(--fs-small);
  color: var(--color-muted-500);
}

.bk .field__error {
  font-size: var(--fs-small);
  color: var(--color-danger-700);
  font-weight: var(--fw-medium);
}

/* Full-width button helper */
.bk .btn--block {
  display: flex;
  width: 100%;
}

/* ============================================
   ALERT / FLASH
   ============================================ */

.bk .alert {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--fs-body);
  margin-bottom: var(--space-4);
  border: 1px solid transparent;
}
.bk .alert--error {
  background: var(--color-danger-50);
  border-color: var(--color-danger-700);
  color: var(--color-danger-700);
}
.bk .alert--success {
  background: var(--color-success-50);
  border-color: var(--color-success-600);
  color: var(--color-ink-900);
}
.bk .alert--info {
  background: var(--color-paper-100);
  border-color: var(--color-paper-200);
  color: var(--color-ink-700);
}

/* ============================================
   AUTH PAGE LAYOUT
   Centered card for login/signup/etc.
   ============================================ */

.bk.auth-page {
  max-width: 540px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-4);
  /* Vertical centering on tall viewports */
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100vh - 200px);
  box-sizing: border-box;
  width: 100%;
}

@media (max-width: 600px) {
  .bk.auth-page {
    padding: var(--space-5) var(--space-3);
    min-height: auto;
  }
}
.bk .auth-page .card {
  padding: var(--space-6) var(--space-5);
}
.bk .auth-page__brand {
  text-align: center;
  margin-bottom: var(--space-5);
}
.bk .auth-page__brand img {
  border-radius: 14px;
  box-shadow: var(--shadow-card);
}
.bk .auth-page__brand-name {
  font-family: var(--font-logo);
  font-weight: var(--fw-black);
  font-size: var(--fs-h3);
  color: var(--color-ink-900);
  margin-top: var(--space-2);
}
.bk .auth-page__title {
  text-align: center;
  margin-bottom: var(--space-5);
}
.bk .auth-page__alt {
  text-align: center;
  margin-top: var(--space-4);
  font-size: var(--fs-sub);
}
.bk .auth-page__alt a {
  color: var(--color-ink-900);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: var(--fw-medium);
}
.bk .auth-page__alt a:hover {
  color: var(--color-accent-cta);
}

/* ============================================
   P023-UX — shared form feedback, inline confirm, paper surfaces
   ============================================ */

/* A card placed directly in <main> (welcome, join, intro) gets the same paper surface as .bk .card */
.container > .card,
.container > section.card {
  background: var(--color-paper-50);
  color: var(--color-ink-900);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-card);
  max-width: 540px;
  margin: 0 auto var(--space-4);
  box-sizing: border-box;
  overflow-wrap: anywhere;
}
.container > .card h1,
.container > .card h2 {
  font-family: var(--font-headline);
  font-weight: var(--fw-extrabold);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  margin: 0 0 var(--space-3);
  color: var(--color-ink-900);
  text-wrap: balance;
}
.container > .card p { margin: 0 0 var(--space-3); color: var(--color-ink-700); }
.container > .card a:not(.btn) { color: var(--color-ink-900); text-decoration: underline; text-underline-offset: 3px; }

/* Error summary at the top of a rejected form; each item links to its field */
.err-summary {
  border: 2px solid var(--color-danger-700);
  background: var(--color-paper-50);
  color: var(--color-ink-900);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
}
.err-summary__title {
  font-family: var(--font-headline);
  font-weight: var(--fw-extrabold);
  color: var(--color-danger-700);
  margin: 0 0 var(--space-2);
  font-size: var(--fs-body);
}
.err-summary ul { margin: 0; padding-inline-start: 1.2em; }
.err-summary a { color: var(--color-ink-900); font-weight: var(--fw-bold); text-decoration: underline; }
[aria-invalid="true"] {
  border-color: var(--color-danger-700) !important;
  box-shadow: 0 0 0 1px var(--color-danger-700);
}

/* Inline confirmation used instead of window.confirm() */
.confirm-inline {
  background: var(--color-paper-50);
  color: var(--color-ink-900);
  border: 1px solid var(--color-paper-300);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.confirm-inline[hidden] { display: none; }
.confirm-inline__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* Small secondary text that must stay readable on paper */
.text-muted-strong { color: var(--color-muted-600); }

/* ============================================
   P023-UX — app shell: header, desktop nav, mobile tab bar, menus
   One markup per item set; CSS shows the desktop or the mobile variant.
   ============================================ */

.pk-header {
  position: relative;
  z-index: var(--z-sticky);
  background: linear-gradient(180deg, var(--color-felt-800), var(--color-felt-900));
  border-bottom: 1px solid var(--color-felt-700);
  color: var(--color-paper-50);
  padding-top: env(safe-area-inset-top, 0px);
}
.pk-header__in {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) max(var(--space-4), env(safe-area-inset-right, 0px)) var(--space-2) max(var(--space-4), env(safe-area-inset-left, 0px));
  min-height: 60px;
}
.pk-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-paper-50) !important;
  text-decoration: none !important;
  flex: 0 0 auto;
}
.pk-brand img { width: 40px; height: 40px; border-radius: 10px; box-shadow: var(--shadow-mark); display: block; }
.pk-brand__name {
  font-family: var(--font-logo);
  font-weight: var(--fw-black);
  font-size: var(--fs-logo-topbar);
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.pk-dnav { display: none; }

/* <details> popovers (table switcher, account, new game, admin, mobile sheets) */
.pk-pop { position: relative; }
.pk-pop > summary,
.pk-tabpop > summary { list-style: none; cursor: pointer; }
.pk-pop > summary::-webkit-details-marker,
.pk-tabpop > summary::-webkit-details-marker { display: none; }
.pk-header :is(a, summary, button):focus-visible,
.pk-tabbar :is(a, summary, button):focus-visible {
  outline: 2px solid var(--color-paper-50);
  outline-offset: 2px;
  border-radius: 8px;
}

/* Inside paper menus/sheets the light felt-outline would vanish (1:1). Ink outline instead. */
.pk-menu :is(a, button):focus-visible,
.pk-sheet :is(a, button):focus-visible {
  outline: 2px solid var(--color-ink-900);
  outline-offset: -2px;
  background: var(--color-paper-100);
  border-radius: var(--radius-sm);
}

.pk-table {
  margin-inline-start: auto;
  min-width: 0;
  max-width: 46%;
}
.pk-table > summary,
.pk-table--static {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  max-width: 100%;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-felt-700);
  background: var(--color-felt-glass);
  color: var(--color-paper-50);
  font-size: var(--fs-sm);
  box-sizing: border-box;
}
.pk-table > summary bdi,
.pk-table--static bdi { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pk-table > summary svg { flex: 0 0 auto; opacity: .75; }

.pk-account > summary {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--color-felt-700);
  display: grid;
  place-items: center;
  color: var(--color-paper-50);
}
.pk-table + .pk-account,
.pk-table + .pk-new { margin-inline-start: 0; }
.pk-account { margin-inline-start: auto; }
.pk-table ~ .pk-account { margin-inline-start: 0; }

.pk-new { display: none; }
.pk-btn-accent {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 16px;
  border-radius: var(--radius-pill);
  background: var(--color-accent-cta);
  color: var(--color-paper-50);
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  white-space: nowrap;
}
.pk-btn-accent:hover { background: var(--color-accent-cta-hover); }
.pk-btn-accent svg { width: 16px; height: 16px; }

/* Menus (desktop popovers) */
.pk-menu {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + 8px);
  min-width: 220px;
  max-width: min(320px, calc(100vw - 32px));
  background: var(--color-paper-50);
  color: var(--color-ink-900);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-elev);
  padding: 6px;
  display: flex;
  flex-direction: column;
  z-index: 60;
}
.pk-menu a,
.pk-sheet a,
.pk-menu__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 44px;
  padding: 0 10px;
  border-radius: var(--radius-sm);
  color: var(--color-ink-900) !important;
  text-decoration: none !important;
  font-weight: var(--fw-medium);
  font-size: var(--fs-body);
  overflow-wrap: anywhere;
}
.pk-menu a > span:first-of-type,
.pk-sheet a > span:first-of-type { min-width: 0; }
.pk-menu a svg,
.pk-sheet a svg { flex: 0 0 auto; order: -1; }
.pk-menu a:hover,
.pk-sheet a:hover,
.pk-menu__btn:hover { background: var(--color-paper-100); }
.pk-menu a[aria-current],
.pk-sheet a[aria-current],
.pk-menu a.is-active,
.pk-sheet a.is-active { background: var(--color-paper-100); box-shadow: inset 3px 0 0 var(--color-accent-600); }
.pk-menu a small, .pk-sheet a small { font-size: var(--fs-tag); color: var(--color-muted-600); }
.pk-menu__btn {
  width: 100%;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: inherit;
  text-align: start;
}
.pk-menu form, .pk-sheet form { margin: 0; }
.pk-menu__group {
  margin: 10px 10px 2px;
  font-size: var(--fs-tag);
  font-weight: var(--fw-medium);
  letter-spacing: .06em;
  color: var(--color-muted-600);
}
.pk-menu__who {
  margin: 6px 10px 4px;
  font-size: var(--fs-small);
  color: var(--color-ink-700);
  overflow-wrap: anywhere;
}
.pk-count {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--color-accent-cta);
  white-space: nowrap;
}
.pk-badge {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--radius-pill);
  background: var(--color-accent-cta);
  color: var(--color-paper-50);
  font-size: 11px;
  font-weight: var(--fw-bold);
  line-height: 1;
  box-sizing: border-box;
}

/* Logged-out header actions */
.pk-anon { margin-inline-start: auto; display: flex; align-items: center; gap: var(--space-2); }
.pk-anon form { margin: 0; }
.pk-anon__link {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-felt-700);
  background: none;
  color: var(--color-paper-50) !important;
  text-decoration: none !important;
  font: inherit;
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  cursor: pointer;
}
.pk-anon__link--primary { background: var(--color-accent-cta); border-color: var(--color-accent-cta); }

/* Mobile bottom tab bar: five fixed slots */
.pk-tabbar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: var(--z-sticky);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: end;
  background: var(--color-felt-800);
  border-top: 1px solid var(--color-felt-700);
  box-shadow: var(--shadow-dock);
  padding: 6px max(6px, env(safe-area-inset-right, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)) max(6px, env(safe-area-inset-left, 0px));
}
.pk-tab,
.pk-tabpop > summary {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 48px;
  min-width: 0;
  color: var(--color-muted-300) !important;
  text-decoration: none !important;
  font-size: 11.5px;
  font-weight: var(--fw-medium);
  text-align: center;
}
.pk-tabpop { display: block; }
.pk-tab span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.pk-tab[aria-current="page"] { color: var(--color-paper-50) !important; }
.pk-tab[aria-current="page"] svg { color: var(--color-accent-600); }
.pk-tab__ico { position: relative; display: inline-grid; }
.pk-badge--dot { position: absolute; top: -6px; inset-inline-start: -12px; box-shadow: 0 0 0 2px var(--color-felt-800); }
.pk-tab--center > summary { color: var(--color-paper-50) !important; }
.pk-tab__plus {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--color-accent-cta);
  display: grid;
  place-items: center;
  color: var(--color-paper-50);
  margin-top: -22px;
  box-shadow: var(--shadow-fab);
}
.pk-tabpop[open] > summary { color: var(--color-paper-50) !important; }

/* Mobile sheets open above the tab bar */
.pk-sheet {
  position: fixed;
  inset: auto 0 0 0;
  bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  max-height: min(70vh, calc(100vh - 140px));
  overflow-y: auto;
  background: var(--color-paper-50);
  color: var(--color-ink-900);
  border-radius: 18px 18px 0 0;
  box-shadow: var(--shadow-sheet);
  padding: 10px max(16px, env(safe-area-inset-right, 0px)) 14px max(16px, env(safe-area-inset-left, 0px));
  display: flex;
  flex-direction: column;
  text-align: start;
  z-index: 70;
}
.pk-sheet a, .pk-sheet .pk-menu__btn { border-bottom: 1px solid var(--color-paper-200); border-radius: 0; }

body.has-tabbar .container { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }

.pk-demo-banner {
  background: var(--color-accent-cta);
  color: var(--color-paper-50);
  text-align: center;
  padding: 6px var(--space-4);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
}
.pk-demo-banner form { display: inline; margin-inline-start: 12px; }
.pk-demo-banner button { background: none; border: 0; color: inherit; text-decoration: underline; font: inherit; font-weight: var(--fw-regular); cursor: pointer; padding: 0; }

@media (min-width: 1024px) {
  .pk-header { position: sticky; top: 0; }
  .pk-header__in { gap: var(--space-4); }
  .pk-dnav {
    display: flex;
    align-items: stretch;
    gap: 2px;
    min-width: 0;
    height: 44px;
  }
  .pk-dnav > a,
  .pk-dnav > .pk-pop > summary {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 10px;
    color: var(--color-muted-300) !important;
    text-decoration: none !important;
    font-weight: var(--fw-medium);
    font-size: 15px;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    height: 100%;
    box-sizing: border-box;
  }
  .pk-dnav > a:hover,
  .pk-dnav > .pk-pop > summary:hover { color: var(--color-paper-50) !important; }
  .pk-dnav > a[aria-current="page"] { color: var(--color-paper-50) !important; border-bottom-color: var(--color-accent-600); }
  .pk-dnav { flex: 1 1 auto; min-width: 0; }
  .pk-table, .pk-account { margin-inline-start: 0; }
  .pk-table { flex: 0 1 220px; max-width: 220px; }
  .pk-new { display: block; }
  .pk-tabbar { display: none; }
  body.has-tabbar .container { padding-bottom: 28px; }
}
@media (min-width: 1024px) and (max-width: 1180px) {
  .pk-brand__name { display: none; }
  .pk-table { flex-basis: 160px; max-width: 160px; }
  .pk-dnav > a, .pk-dnav > .pk-pop > summary { padding: 0 7px; font-size: 14px; }
}
@media (max-width: 1023px) {
  .pk-header__in { min-height: 56px; }
  .pk-brand__name { font-size: 17px; }
}
@media (max-width: 360px) {
  .pk-brand__name { display: none; }
  .pk-table { max-width: 60%; }
}
@media (prefers-reduced-motion: reduce) {
  .pk-header *, .pk-tabbar * { transition: none !important; }
}
/* Links inside paper surfaces use ink, never the felt-default paper color */
:is(.card, .bk .card, .pk-menu, .pk-sheet, .confirm-inline, .err-summary, table) a:not(.btn):not(.pk-btn-accent) {
  color: var(--color-ink-900);
}
.pk-anon__link--icon { width: 40px; padding: 0; justify-content: center; font-weight: var(--fw-regular); }

/* ============================================
   P023-UX part 2 — auth intro, onboarding, table management, game types
   ============================================ */

/* Auth card: short intro (replaces the separate base.html section), action stack */
.bk .auth-page__intro {
  background: var(--color-paper-100);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin: 0 0 var(--space-5);
  font-size: var(--fs-sub);
  color: var(--color-ink-700);
}
.bk .auth-page__intro p { margin: 0; }
.bk .auth-page__intro p + p { margin-top: var(--space-1); }
.bk .auth-page__intro-title { font-weight: var(--fw-bold); color: var(--color-ink-900); }
.bk .auth-page__lead { text-align: center; color: var(--color-ink-700); margin: 0 0 var(--space-4); }
.bk .auth-page__actions { display: flex; flex-direction: column; gap: var(--space-3); }
.bk.auth-page .card { overflow-wrap: anywhere; }

/* Status pill (onboarding, member role) */
.pk-status {
  display: inline-block;
  padding: 2px var(--space-2);
  border-radius: var(--radius-md); /* not a full pill: long states (expired) wrap to two lines */
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  line-height: 1.5;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.pk-status--pending { background: var(--color-accent-50); color: var(--color-ink-900); }
.pk-status--ok { background: var(--color-success-50); color: var(--color-ink-900); }
.pk-status--off { background: var(--color-paper-200); color: var(--color-ink-700); }

/* Onboarding list */
.bk.pk-onboarding .btn--block { margin-bottom: var(--space-5); }
.bk .pk-onboarding__heading { font-size: var(--fs-h3); margin: 0 0 var(--space-3); }
.pk-onboarding__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.pk-onboarding__item { border: 1px solid var(--color-paper-200); border-radius: var(--radius-md); padding: var(--space-3); display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.pk-onboarding__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.pk-onboarding__name { overflow-wrap: anywhere; }
.pk-onboarding__reason { margin: 0; color: var(--color-ink-700); font-size: var(--fs-sub); }

/* Management pages on felt: headings in cream, help text readable on both surfaces (F1) */
.pk-admin { max-width: 760px; margin: 0 auto; }
.pk-page-head { margin: 0 0 var(--space-5); }
.bk .pk-page-head__title { font-size: var(--fs-h2); color: var(--color-paper-50); overflow-wrap: anywhere; }
.pk-page-head__sub { margin: var(--space-1) 0 0; color: var(--color-muted-300); overflow-wrap: anywhere; }
.pk-section { margin: 0 0 var(--space-6); }
.bk .pk-section__title { font-size: var(--fs-h3); color: var(--color-paper-50); margin: 0 0 var(--space-3); }
.pk-section__help { color: var(--color-muted-300); font-size: var(--fs-sub); margin: var(--space-3) 0 0; }
.pk-section__help a { color: var(--color-paper-50); text-decoration: underline; text-underline-offset: 3px; }
.bk .card .pk-help, .bk .card .field__hint.pk-help { color: var(--color-ink-700); font-size: var(--fs-small); margin: var(--space-2) 0 0; }

.pk-form-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); }
.pk-form-row > .field { flex: 1 1 12rem; min-width: 0; margin: 0; }
.pk-form-row > .pk-form-row__wide { flex-grow: 2; }
.pk-form-row > .btn { flex: 0 0 auto; }
.pk-form-row .field input { width: 100%; box-sizing: border-box; }

/* Rows instead of horizontally scrolling tables */
.pk-rows { list-style: none; margin: 0; padding: 0; }
.pk-form-row + .pk-rows, .pk-inline-status + .pk-rows { margin-top: var(--space-4); }
.pk-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3); padding: var(--space-3) 0; border-top: 1px solid var(--color-paper-200); }
.pk-rows > .pk-row:first-child { border-top: 0; }
.pk-row__main { flex: 1 1 12rem; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-2); }
.pk-row__name { font-weight: var(--fw-bold); overflow-wrap: anywhere; min-width: 0; }
.pk-row__meta { font-size: var(--fs-small); color: var(--color-muted-600); }
.pk-row__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.pk-row__actions form { margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pk-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: var(--fs-small); user-select: all; overflow-wrap: anywhere; word-break: break-all; color: var(--color-ink-900); }
.pk-inline-status { margin: var(--space-3) 0 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--color-danger-50); color: var(--color-danger-700); font-size: var(--fs-sub); overflow-wrap: anywhere; }
.pk-inline-status[hidden] { display: none; }

/* Pending requests as cards (F2): both actions fully visible at 360 */
.pk-requests { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.bk .pk-request { display: grid; grid-template-columns: 1fr; gap: var(--space-3); padding: var(--space-4); }
.pk-request__who { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-2); }
.pk-request__approve, .pk-request__reject { margin: 0; }
.pk-request__reject { display: flex; flex-direction: column; gap: var(--space-2); }
.pk-request__reject .field { margin: 0; }
.pk-request__reject input[name="reason"] { width: 100%; box-sizing: border-box; }
@media (min-width: 700px) {
  .bk .pk-request { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); align-items: start; }
  .pk-request__who { grid-column: 1 / -1; }
}

/* The hidden attribute must win over component display rules (.bk .btn is inline-flex) */
.bk [hidden], .pk-header [hidden], .pk-tabbar [hidden] { display: none !important; }

/* Inline confirm message inside a row */
.confirm-inline__msg { margin: 0; font-weight: var(--fw-bold); color: var(--color-danger-700); }
.pk-row__actions .confirm-inline { flex-basis: 100%; }

/* Game types screen */
.bk .pk-types__title { font-size: var(--fs-h3); margin: 0 0 var(--space-2); }
.pk-types .pk-rows { margin: var(--space-4) 0; }
.pk-types__form { border-top: 1px solid var(--color-paper-200); padding-top: var(--space-4); }
.pk-types__form .field input { width: 100%; max-width: 20rem; box-sizing: border-box; }
.pk-types__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.pk-tag { display: inline-block; padding: 2px var(--space-3); border-radius: var(--radius-pill); font-weight: var(--fw-bold); font-size: var(--fs-sub); overflow-wrap: anywhere; }
.pk-tag--cash { background: var(--color-accent-50); color: var(--color-ink-900); }
.pk-tag--second { background: var(--color-felt-100); color: var(--color-ink-900); }

/* ============================================
   P023-UX part 3 — home (D4), shared list atoms
   ============================================ */
.pk-eyebrow { margin: 0 0 var(--space-1); font-size: var(--fs-small); font-weight: var(--fw-bold); letter-spacing: .04em; color: var(--color-muted-300); }
.pk-home { max-width: 1120px; margin: 0 auto; }
.pk-home__head { margin-bottom: var(--space-4); }
.pk-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pk-tnum { font-variant-numeric: tabular-nums; }
.pk-strong { font-weight: var(--fw-bold); color: var(--color-ink-900); }
.pk-muted { color: var(--color-muted-600); }

/* Numbers: sign + shekel, isolated LTR inside RTL text */
.pk-num { font-variant-numeric: tabular-nums; font-weight: var(--fw-bold); white-space: nowrap; }
.pk-num--win { color: var(--color-success-600); }
.pk-num--loss { color: var(--color-danger-700); }

/* Filter bar on felt: segmented links, current = paper fill */
.pk-filters { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); align-items: center; margin: 0 0 var(--space-4); }
.pk-seg { display: flex; flex-wrap: wrap; gap: var(--space-1); padding: var(--space-1); border-radius: var(--radius-pill); background: var(--color-felt-glass); border: 1px solid var(--color-felt-700); max-width: 100%; }
.pk-seg__btn { display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--space-3); border-radius: var(--radius-pill); color: var(--color-paper-50); text-decoration: none; font-weight: var(--fw-medium); font-size: var(--fs-sub); white-space: nowrap; }
.pk-seg__btn:hover { background: var(--color-felt-700); }
.pk-seg__btn[aria-current="true"] { background: var(--color-paper-50); color: var(--color-ink-900); font-weight: var(--fw-bold); }
.pk-seg__btn:focus-visible { outline: 2px solid var(--color-paper-50); outline-offset: 2px; }
.pk-seg--years { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }

.pk-home__grid { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); align-items: start; }
.pk-home__col { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.bk.pk-home .card { padding: var(--space-4); min-width: 0; }
.pk-card-head { margin: 0 0 var(--space-3); padding-bottom: var(--space-2); border-bottom: 2px solid var(--color-ink-900); }
.bk .pk-card-head__title { font-size: var(--fs-h3); margin: 0; }
.pk-card-head__sub { margin: 2px 0 0; font-size: var(--fs-small); color: var(--color-muted-600); }

/* Leaderboard */
.pk-tscroll { overflow-x: auto; }
.pk-lbt { width: 100%; border-collapse: collapse; font-size: var(--fs-sub); }
.bk .pk-lbt th, .bk .pk-lbt td { white-space: normal; overflow: visible; text-overflow: clip; max-width: none; }
.bk .pk-lbt th { font-size: var(--fs-small); font-weight: var(--fw-bold); text-align: start; padding: var(--space-2); } /* dark header comes from the global .bk table th rule */
.pk-lbt td { padding: var(--space-2) var(--space-1); border-bottom: 1px solid var(--color-paper-200); vertical-align: middle; }
.pk-lbt tr:last-child td { border-bottom: 0; }
.pk-lbt__rank { width: 2.5rem; }
.pk-lbt__c { text-align: center !important; }
.pk-lbt__e { text-align: end !important; }
.pk-lbt__name { min-width: 0; overflow-wrap: anywhere; }
.pk-lbt__name a { color: var(--color-ink-900); text-decoration: none; font-weight: var(--fw-medium); }
.pk-lbt__name a:hover { text-decoration: underline; }
.pk-rank { display: inline-grid; place-items: center; min-width: 26px; height: 26px; border-radius: 50%; font-weight: var(--fw-bold); font-size: var(--fs-small); font-variant-numeric: tabular-nums; background: var(--color-paper-100); color: var(--color-ink-900); }
.pk-rank--gold { background: var(--color-gold-500); color: var(--color-ink-900); }
.pk-dl { font-size: var(--fs-small); font-weight: var(--fw-bold); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pk-dl--up { color: var(--color-success-600); }
.pk-dl--down { color: var(--color-danger-700); }
.pk-dl--same { color: var(--color-ink-700); }
.pk-dl--na { color: var(--color-muted-600); font-weight: var(--fw-regular); }
.pk-more { display: flex; justify-content: center; align-items: center; min-height: 44px; margin-top: var(--space-2); border-top: 1px solid var(--color-paper-200); color: var(--color-ink-900); font-weight: var(--fw-bold); font-size: var(--fs-sub); text-decoration: underline; text-underline-offset: 3px; }
.pk-note { margin: var(--space-2) 0 0; font-size: var(--fs-small); color: var(--color-muted-600); }

/* Biggest pot */
.bk .pk-pot { display: flex; gap: var(--space-3); align-items: center; text-decoration: none; color: var(--color-ink-900); }
.bk .pk-pot:hover { background: var(--color-paper-100); }
.pk-pot__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pk-pot__k { font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--color-ink-700); }
.pk-pot__v { font-family: var(--font-headline); font-weight: var(--fw-extrabold); font-size: var(--fs-h2); line-height: 1.1; }
.pk-pot__v .pk-num { color: var(--color-ink-900); }
.pk-pot__m { font-size: var(--fs-small); color: var(--color-ink-700); overflow-wrap: anywhere; }

/* Date chip, colored by game type */
.pk-dchip { flex: 0 0 auto; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-md); font-weight: var(--fw-bold); font-size: var(--fs-small); font-variant-numeric: tabular-nums; line-height: 1.1; text-align: center; }
.pk-dchip small { display: block; font-size: 11px; font-weight: var(--fw-medium); }
.pk-dchip--lg { width: 60px; height: 60px; font-size: var(--fs-body); }
.pk-dchip--cash { background: var(--color-accent-cta); color: var(--color-paper-50); }
.pk-dchip--second { background: var(--color-felt-700); color: var(--color-paper-50); }
.pk-tag--sm { font-size: var(--fs-small); padding: 0 var(--space-2); margin-inline-end: var(--space-1); }

/* Recent games */
.pk-glist { list-style: none; margin: 0; padding: 0; }
.pk-grow { display: flex; align-items: center; gap: var(--space-2); border-bottom: 1px solid var(--color-paper-200); }
.pk-grow:last-child { border-bottom: 0; }
.pk-grow__link { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; min-height: 56px; color: var(--color-ink-900); text-decoration: none; }
.pk-grow__link:hover .pk-grow__line { text-decoration: underline; }
.pk-grow__meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-sub); }
.pk-grow__line { overflow-wrap: anywhere; }
.pk-grow__win { font-size: var(--fs-small); color: var(--color-ink-700); overflow-wrap: anywhere; }
.pk-grow__amt { flex: 0 0 auto; font-size: var(--fs-sub); }
.pk-grow__edit { flex: 0 0 44px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--radius-md); border: 1px solid var(--color-paper-300); color: var(--color-ink-900); }
.pk-grow__edit:hover { background: var(--color-paper-100); }

/* Empty states */
.bk .pk-empty { text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.bk .pk-empty__title { font-size: var(--fs-h3); margin: 0; }
.pk-empty-inline { border: 1.5px dashed var(--color-paper-300); border-radius: var(--radius-md); padding: var(--space-4); text-align: center; color: var(--color-ink-700); display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.pk-empty-inline b { color: var(--color-ink-900); font-family: var(--font-headline); }

/* Responsive row limits: 5/4 rows on mobile, 10/8 on desktop (R4) */
.pk-only-d { display: none; }
@media (max-width: 1023px) {
  .pk-lb:not(.is-all) .pk-extra-m, .pk-recent .pk-extra-m { display: none; }
}
@media (min-width: 1024px) {
  .pk-only-m, .pk-only-m-flex { display: none !important; }
  .pk-only-d { display: inline; }
  .pk-lb:not(.is-all) .pk-extra-d { display: none; }
  .pk-home__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
}

/* Games list header; long names in the players table wrap instead of widening it (D3) */
.pk-games { max-width: 720px; }
.pk-games__head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-3); flex-wrap: wrap; }
.pk-games .pk-dchip small { font-size: 10px; }
.bk .players-table td.col-name, .players-table td.col-name { white-space: normal; overflow-wrap: anywhere; text-overflow: clip; overflow: visible; }

/* ============================================
   P023-UX-UI-GAMES — add game, results view/edit, picker, save bar
   ============================================ */
.pk-gpage { max-width: 760px; margin: 0 auto; padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
.pk-gpage__head { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.pk-gpage__title { flex: 1 1 12rem; min-width: 0; }
.pk-gpage__title .pk-eyebrow { margin: 0; }
.pk-gpage__actions { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.pk-backlink { color: var(--color-paper-50); text-decoration: underline; text-underline-offset: 3px; font-size: var(--fs-sub); }
.pk-gform { display: flex; flex-direction: column; gap: var(--space-4); }
.bk .pk-gsec { padding: var(--space-4); min-width: 0; }
.bk .pk-gsec__title { font-size: var(--fs-h3); margin: 0 0 var(--space-3); }
.pk-raw { color: var(--color-ink-700); font-size: var(--fs-small); }
.pk-meta { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
.pk-meta .field { margin: 0; min-width: 0; }
.pk-meta input { width: 100%; box-sizing: border-box; min-height: 44px; }
.pk-legacy-date { margin: 0 0 var(--space-2); }
@media (min-width: 700px) { .pk-meta { grid-template-columns: 11rem minmax(0, 1fr) auto; align-items: start; } }

/* Game type: two radios as a segmented control */
.pk-typepick { border: 0; padding: 0; margin: 0; min-width: 0; }
.pk-typepick legend { padding: 0; }
.pk-typepick__opts { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.pk-typepick__opt { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: 0 var(--space-3); border: 1px solid var(--color-paper-300); border-radius: var(--radius-pill); cursor: pointer; font-weight: var(--fw-bold); max-width: 100%; overflow-wrap: anywhere; }
.pk-typepick__opt input { accent-color: var(--color-ink-900); width: 18px; height: 18px; margin: 0; }
.pk-typepick__opt:has(input:checked) { background: var(--color-ink-900); color: var(--color-paper-50); border-color: var(--color-ink-900); }
.pk-typepick__opt:has(input:focus-visible) { outline: 2px solid var(--color-accent-600); outline-offset: 2px; }
.pk-typepick[aria-invalid="true"] .pk-typepick__opt { border-color: var(--color-danger-700); }

/* Participant rows: name across, then buy-in / cash-out / result */
.pk-prows { display: flex; flex-direction: column; }
.pk-prow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2) var(--space-3); align-items: end; padding: var(--space-3) 0; border-bottom: 1px solid var(--color-paper-200); }
.pk-prows > .pk-prow:last-of-type, #new-player-rows > .pk-prow:last-child { border-bottom: 0; }
#new-player-rows { display: contents; }
.pk-prow__name { grid-column: 1 / -1; min-width: 0; }
.pk-prow__name > bdi, .participant-name, .np-name, .conf-name { font-weight: var(--fw-bold); font-size: var(--fs-body); overflow-wrap: anywhere; min-width: 0; }
.pk-prow__name:not(.participant-edit) { display: flex; align-items: center; gap: var(--space-2); }
.pk-prow__name:not(.participant-edit) > bdi { flex: 1; }
.pk-prow__amt { min-width: 0; }
.pk-prow__amt label { display: block; font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--color-ink-700); margin-bottom: var(--space-1); }
.pk-prow__amt input { width: 100%; box-sizing: border-box; min-height: 44px; text-align: center; font-size: 16px; font-variant-numeric: tabular-nums; }
.pk-prow__res { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.pk-prow__res > span:first-child { font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--color-ink-700); }
.pk-prow__res > span:last-child { min-height: 44px; display: flex; align-items: center; font-size: var(--fs-body); }
.pk-prow.is-removed .pk-prow__amt, .pk-prow.is-removed .pk-prow__res { opacity: .45; }
.pk-prow.is-removed .participant-name { text-decoration: line-through; text-decoration-thickness: 1.5px; }
.pk-prows__empty { margin: var(--space-2) 0 0; }
.pk-newtag { font-size: var(--fs-small); font-weight: var(--fw-bold); background: var(--color-accent-50); color: var(--color-ink-900); border-radius: var(--radius-md); padding: 0 var(--space-2); flex: 0 0 auto; }
.pk-iconbtn { flex: 0 0 44px; width: 44px; height: 44px; display: inline-grid; place-items: center; border: 1px solid var(--color-paper-300); border-radius: var(--radius-sm); background: var(--color-paper-50); color: var(--color-ink-900); cursor: pointer; font-size: 15px; }
.pk-iconbtn:hover { background: var(--color-paper-100); }
@media (min-width: 700px) {
  .pk-prow { grid-template-columns: minmax(0, 2.2fr) repeat(3, minmax(0, 1fr)); align-items: center; }
  .pk-prow__name { grid-column: auto; }
}

/* Participant panel (edit): one at a time, across the row */
.participant-heading { display: flex; align-items: center; gap: var(--space-2); }
.participant-name { flex: 1; }
.participant-toggle { flex: 0 0 44px; width: 44px; height: 44px; display: inline-grid; place-items: center; border: 1px solid var(--color-paper-300); border-radius: var(--radius-sm); background: var(--color-paper-100); color: var(--color-ink-900); cursor: pointer; }
.participant-toggle[aria-expanded="true"] { background: var(--color-ink-900); color: var(--color-paper-50); border-color: var(--color-ink-900); }
.participant-toggle:focus-visible, .participant-panel :focus-visible { outline: 2px solid var(--color-accent-600); outline-offset: 2px; }
.participant-panel { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-2); padding: var(--space-3); border: 1px solid var(--color-paper-200); border-radius: var(--radius-md); background: var(--color-paper-100); }
.participant-panel label { font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--color-ink-700); }
.participant-panel select { width: 100%; min-width: 0; min-height: 44px; box-sizing: border-box; }
.participant-panel__row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.participant-panel button { min-height: 44px; padding: 0 var(--space-3); border-radius: var(--radius-pill); border: 1px solid var(--color-paper-300); background: var(--color-paper-50); color: var(--color-ink-900); font-weight: var(--fw-bold); cursor: pointer; white-space: normal; }
.participant-panel .participant-remove { border-color: var(--color-danger-700); color: var(--color-danger-700); }
.participant-panel button:disabled { opacity: .45; cursor: default; }
.participant-status { display: block; margin-top: var(--space-1); font-size: var(--fs-small); color: var(--color-ink-900); background: var(--color-accent-50); border-radius: var(--radius-sm); padding: var(--space-1) var(--space-2); overflow-wrap: anywhere; }
.participant-status:empty { display: none; }
.pk-prow.is-removed .participant-status { background: var(--color-danger-50); color: var(--color-danger-700); }

/* Picker: combobox + grouped listbox; "more" is a button, not an option */
.pk-picker { position: relative; margin-top: var(--space-3); max-width: 420px; }
.pk-picker__input { width: 100%; min-height: 44px; box-sizing: border-box; }
.pk-picker__pop { margin-top: var(--space-1); background: var(--color-paper-50); border: 1px solid var(--color-paper-300); border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: var(--space-1); }
.pk-picker__list { list-style: none; margin: 0; padding: 0; max-height: 260px; overflow-y: auto; }
.pk-picker__grp { font-size: var(--fs-tag); font-weight: var(--fw-bold); letter-spacing: .04em; color: var(--color-muted-600); padding: var(--space-2) var(--space-2) var(--space-1); }
.pk-picker__opt { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); min-height: 44px; padding: 0 var(--space-2); border-radius: var(--radius-sm); cursor: pointer; color: var(--color-ink-900); }
.pk-picker__opt bdi { min-width: 0; overflow-wrap: anywhere; }
.pk-picker__opt small { color: var(--color-muted-600); font-size: var(--fs-small); white-space: nowrap; }
.pk-picker__opt:hover, .pk-picker__opt[aria-selected="true"] { background: var(--color-paper-100); outline: 2px solid var(--color-ink-900); outline-offset: -2px; }
.pk-picker__none { padding: var(--space-2); color: var(--color-ink-700); font-size: var(--fs-sub); }
.pk-picker__more { width: 100%; min-height: 44px; margin-top: var(--space-1); border: 0; border-top: 1px solid var(--color-paper-200); background: none; color: var(--color-ink-900); font-weight: var(--fw-bold); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.pk-picker__more:focus-visible { outline: 2px solid var(--color-ink-900); outline-offset: -2px; }

/* Totals and balance */
.pk-totals { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--color-paper-200); font-size: var(--fs-sub); color: var(--color-ink-700); }
.pk-totals b { color: var(--color-ink-900); }
.pk-totals b .pk-num { color: var(--color-ink-900); }
.pk-bal { display: inline-flex; align-items: center; gap: var(--space-1); font-weight: var(--fw-bold); border-radius: var(--radius-pill); padding: 2px var(--space-3); font-size: var(--fs-small); }
.pk-bal:empty { display: none; }
.pk-bal--ok { background: var(--color-success-50); color: var(--color-ink-900); }
.pk-bal--bad { background: var(--color-danger-50); color: var(--color-danger-700); }

/* Results view table */
.pk-rtable { width: 100%; border-collapse: collapse; font-size: var(--fs-sub); }
.bk .pk-rtable th, .bk .pk-rtable td { white-space: normal; overflow: visible; text-overflow: clip; max-width: none; padding: var(--space-2); }
.pk-rtable td { border-bottom: 1px solid var(--color-paper-200); }
.pk-rtable tr:last-child td { border-bottom: 0; }
.pk-rtable tbody tr:hover { background: var(--color-paper-100); }
.pk-rtable__n { text-align: end !important; white-space: nowrap; }
.pk-rtable__name { overflow-wrap: anywhere; }
.pk-rtable__name a { color: var(--color-ink-900); font-weight: var(--fw-bold); text-decoration: none; }
.pk-rtable__name a:hover { text-decoration: underline; }

/* Save bar: sticks above the home indicator while the tab bar is hidden (AC7) */
.pk-savebar { position: sticky; bottom: 0; z-index: var(--z-sticky); margin: 0; padding: var(--space-2) var(--space-3) calc(var(--space-2) + env(safe-area-inset-bottom, 0px)); background: var(--color-ink-900); color: var(--color-paper-50); box-shadow: var(--shadow-dock); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.pk-savebar__in { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; max-width: 760px; margin: 0 auto; }
.pk-savebar__cnt { flex: 1 1 8rem; min-width: 0; margin: 0; font-size: var(--fs-small); color: var(--color-muted-300); }
@media (max-width: 520px) {
  .pk-savebar__cnt { flex-basis: 100%; }
  .pk-savebar__in .btn--primary { flex: 1 1 auto; }
}
.bk .pk-savebar .btn--quiet { color: var(--color-paper-50); border-color: var(--color-muted-500); }
.bk .pk-savebar .btn--quiet:hover { background: var(--color-felt-glass); }
.bk .pk-savebar .btn--primary:focus-visible, .bk .pk-savebar .btn--quiet:focus-visible { outline-color: var(--color-paper-50); }
/* With the on-screen keyboard open the viewport is short: let the bar scroll with the page so it never covers the field */
@media (max-height: 480px) { .pk-savebar { position: static; } }

/* Danger zone (delete), separate from the save form */
.pk-danger-zone { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px dashed var(--color-felt-700); }
.pk-danger-zone form { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.pk-danger-zone .btn--danger-outline { color: var(--color-paper-50); border-color: var(--color-paper-50); }
.pk-danger-zone .btn--danger-outline:hover { background: var(--color-felt-glass); }
.pk-danger-zone .confirm-inline { max-width: 420px; }

/* Inputs outside .field get the same look as form fields */
.bk .field input[type="date"], .pk-prow__amt input, .pk-picker__input, .participant-panel select {
  font-family: var(--font-body); color: var(--color-ink-900); background: var(--color-paper-50);
  border: 1px solid var(--color-paper-300); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3);
}
.bk .field input[type="date"] { font-size: var(--fs-body); width: 100%; }
.pk-prow__amt input:focus, .pk-picker__input:focus, .bk .field input[type="date"]:focus { outline: 2px solid var(--color-ink-900); outline-offset: 1px; border-color: var(--color-ink-900); }
/* A row-level error message spans the whole participant row */
.pk-prow > .field__error { grid-column: 1 / -1; margin: 0; }

/* Results view on narrow screens: name on its own line, three amounts under it */
@media (max-width: 600px) {
  .pk-rtable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .pk-rtable, .pk-rtable tbody { display: block; }
  .pk-rtable tbody tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--color-paper-200); padding: var(--space-1) 0; }
  .pk-rtable tbody tr:last-child { border-bottom: 0; }
  .bk .pk-rtable td { border: 0; padding: var(--space-1) var(--space-2); text-align: start !important; }
  .pk-rtable td.pk-rtable__name { grid-column: 1 / -1; }
  .pk-rtable td[data-label]::before { content: attr(data-label); display: block; font-size: var(--fs-tag); font-weight: var(--fw-bold); color: var(--color-ink-700); }
}

/* UI-GAMES R1: an open participant panel spans the whole row on wide screens too */
@media (min-width: 700px) {
  .pk-prow:has(.participant-panel:not([hidden])) > .pk-prow__name { grid-column: 1 / -1; }
}
.participant-panel .pk-picker { margin-top: 0; max-width: none; }