/* ============================================================================
   JUNK BOTTOM SHEET
   Additive UI layer. To remove: delete this entire block and js/junk-sheet.js.
   ============================================================================ */

/* When active, hide the per-cell <details> dropdown and make rows tappable */
body.junk-sheet-active #junkBody .junk-dd { display: none; }
body.junk-sheet-active #junkBody tr { cursor: pointer; }
body.junk-sheet-active #junkBody tr:hover td { background: var(--hi-thin); }
/* Header row visibility — both rows live inside a single <thead>; show/hide
   at the <tr> level so sticky positioning is inherited correctly. */
.junk-table-desktop-header {
  display: table-row;
}

.junk-table-tablet-header {
  display: none;
}

/* Phone/narrow (<1024px): Show simplified "Results" header */
@media (max-width: 1023px) {
  .junk-table-desktop-header {
    display: none;
  }

  .junk-table-tablet-header {
    display: table-row;
  }

  /* Keep only the tablet header cells visible and sticky in narrow layouts.
     Hiding desktop-row cells directly avoids duplicate/ghost sticky headers. */
  #junkTable thead tr.junk-table-desktop-header th {
    display: none;
  }

  #junkTable thead tr.junk-table-tablet-header th {
    display: table-cell;
    position: sticky;
    top: 0;
    z-index: var(--z-sticky-header);
    background: var(--panel-alt);
  }

  #junkTable thead tr.junk-table-tablet-header th:first-child {
    z-index: var(--z-sticky-corner);
    background: var(--panel);
  }
}

/* Junk standings table uses a compact 3-column layout (Player, Dots, vs Field)
   and explicit vertical dividers so borders remain visible on narrow phones. */
.junk-standings-table {
  width: 100%;
  table-layout: fixed;
}

.junk-standings-table col.junk-col-player {
  width: 50%;
}

.junk-standings-table col.junk-col-dots,
.junk-standings-table col.junk-col-net {
  width: 25%;
}

.junk-standings-table .live-results-label {
  position: static;
  left: auto;
  width: auto;
  min-width: 0;
  max-width: none;
  box-shadow: none;
  padding-left: 8px;
  padding-right: 8px;
}

.junk-standings-table tr > :first-child {
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.junk-standings-table tr > :nth-child(2),
.junk-standings-table tr > :nth-child(3) {
  font-variant-numeric: tabular-nums;
}

.junk-standings-table td + td,
.junk-standings-table th + th {
  border-left: 2px solid var(--line);
}

@media (max-width: 640px) {
  .junk-standings-table th,
  .junk-standings-table td {
    white-space: normal;
  }
}

/* Team-mode live results: a light divider/header row grouping teammates
   together, inserted between the two team blocks. Mirrors the
   .live-results-title-row treatment but stays a distinct class/selector so
   it's never picked up by the .live-results-data-row scrape in
   scorecard/game-totals.js. */
.junk-standings-table .junk-team-divider-row td {
  background: var(--panel-alt);
  color: var(--ink);
  font-weight: 600;
  text-align: left;
  border-left: none;
}

/* Collapse cell layout to just the dot + active achievement labels */
body.junk-sheet-active .junk-cell { gap: 2px; }

/* Mobile 2-column layout: Hole | summary of all players' points for that hole.
   Driven by `.junk-mobile-summary-active` (toggled via media query in JS). */
body.junk-mobile-summary-active #junkBody tr > td:not(:first-child):not(.junk-mobile-summary-cell),
body.junk-mobile-summary-active #junkTable tfoot tr > td:not(:first-child) {
  display: none;
}

/* In summary mode, keep only the first sticky header cell visible and render
   the "Results" label there. This avoids colspan/column-width mismatch. */
body.junk-mobile-summary-active #junkTable thead tr th:not(:first-child) {
  display: none;
}
/* Shrink the Hole label column hard so the summary cell gets the rest. */
body.junk-mobile-summary-active #junkTable {
  table-layout: fixed;
  width: 100%;
  min-width: 0;
}
/* The Hole column is just a row label (1–18), so keep it tight. !important
   is required to beat responsive-layout.css's `width: auto !important` on the
   junk first column at ≤768px — without it, `table-layout: fixed` splits this
   2-column summary table 50/50 and the hole label sits in a half-width sea of
   whitespace. Theme-agnostic (applies in light + dark). */
body.junk-mobile-summary-active #junkTable th:first-child,
body.junk-mobile-summary-active #junkTable td:first-child {
  width: 46px !important;
  min-width: 46px !important;
  max-width: 46px !important;
  padding: 4px 4px !important;
  text-align: center;
  font-size: var(--text-sm);
  font-weight: 700;
}

/* Keep the Hole header pinned with the first column in Junk mobile summary mode. */
body.junk-mobile-summary-active #junkTable thead th:first-child,
body.junk-mobile-summary-active #junkTable tbody td:first-child {
  position: sticky;
  left: 0;
}

body.junk-mobile-summary-active #junkTable thead th:first-child {
  top: 0;
  z-index: var(--z-sticky-corner);
  background: var(--panel);
  border-right: 2px solid var(--line);
}
body.junk-mobile-summary-active #junkBody td.junk-mobile-summary-cell {
  display: table-cell;
  width: calc(100% - 46px);
  max-width: none;
}
body.junk-mobile-summary-active #junkTable thead tr th:first-child::after {
  content: 'Results';
  display: inline-block;
  margin-left: 12px;
  font-weight: 700;
  color: var(--muted);
  font-size: var(--text-sm);
}
body.junk-mobile-summary-active #junkTable tfoot { display: none; }

.junk-mobile-summary-cell {
  display: block;
  padding: 6px 8px;
  text-align: left;
  vertical-align: middle;
}
/* One grid for the whole cell so the name column is shared across every
   player row: `fit-content` makes it exactly as wide as the longest name
   (left-justified), capped at 55% so a pathologically long name can't push
   the dots off-screen. The rows use display:contents so their name + dot
   spans drop into this grid's tracks; row dividers move onto the spans
   (no column-gap, so the two border-bottoms read as one continuous line). */
.junk-mini-grid {
  display: grid;
  grid-template-columns: fit-content(55%) auto;
  width: 100%;
  align-items: center;
}
.junk-mini-row {
  display: contents;
}
.junk-mini-row.is-empty { color: var(--muted); }
.junk-mini-name {
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  padding: 3px 14px 3px 4px;
  border-bottom: 1px solid var(--line);
  /* Vertical divider between the name column and the score column. Sits on
     every name cell so it reads as one continuous line down the column.
     1px to match the row dividers' weight. */
  border-right: 1px solid var(--line);
  font-size: calc(12px + var(--font-size-step));
  line-height: 1.3;
}
.junk-mini-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  white-space: nowrap;
  padding: 3px 4px;
  border-bottom: 1px solid var(--line);
  font-size: calc(12px + var(--font-size-step));
  line-height: 1.3;
}
.junk-mini-row:last-child .junk-mini-name,
.junk-mini-row:last-child .junk-mini-right { border-bottom: 0; }
.junk-mini-emojis {
  font-size: calc(11px + var(--font-size-step));
  letter-spacing: 1px;
  line-height: 1;
}
.junk-mini-dot {
  font-weight: 700;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  min-width: 20px;
  text-align: right;
}
.junk-mini-empty {
  color: var(--muted);
  font-style: italic;
  font-size: calc(12px + var(--font-size-step));
}

/* Backdrop */
.junk-sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.002);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
  z-index: 9000;
}
.junk-sheet-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}
/* Sheet panel */
.junk-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: min(90dvh, 90svh);
  display: flex;
  flex-direction: column;
  background: var(--panel);
  color: var(--ink);
  border-top: 2px solid var(--line);
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
  box-shadow: none;
  transform: translateY(100%);
  transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
  z-index: 9001;
}
.junk-sheet.is-open {
  transform: translateY(0);
  box-shadow: 0 -12px 32px rgba(0,0,0,0.4);
}
@media (min-width: 720px) {
  .junk-sheet {
    left: 50%;
    right: auto;
    bottom: 24px;
    transform: translate(-50%, 120%);
    width: min(680px, calc(100vw - 32px));
    border-radius: var(--radius-lg);
    border: 2px solid var(--line);
  }
  .junk-sheet.is-open { transform: translate(-50%, 0); }
}

.junk-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 2px solid var(--line);
  background: var(--panel-alt);
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}
.junk-sheet-nav {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.junk-sheet-title {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: 700;
}

.junk-sheet-navbtn {
  background: transparent;
  border: 2px solid var(--line);
  color: var(--ink);
  width: 36px;
  height: 36px;
  border-radius: 8px;
  font-size: calc(16px + var(--font-size-step));
  line-height: 1;
  cursor: pointer;
}

.junk-sheet-navbtn:disabled {
  opacity: 0.45;
  cursor: default;
}
.junk-sheet-navbtn:hover:not(:disabled) { background: var(--hi-faint); }
.junk-sheet-close {
  background: transparent;
  border: 2px solid var(--line);
  color: var(--ink);
  width: 36px;
  height: 36px;
  border-radius: 8px;
  font-size: calc(16px + var(--font-size-step));
  cursor: pointer;
}.junk-sheet-close:hover { background: var(--hi-faint); }
.junk-sheet-body {
  padding: 12px 16px 4px;
  overflow-y: auto;
  flex: 1 1 auto;
}

.junk-sheet-player {
  padding: 10px 0 14px;
  border-bottom: 2px solid var(--line);
}
.junk-sheet-player:last-child { border-bottom: none; }

.junk-sheet-player-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.junk-sheet-player-name {
  font-weight: 700;
  font-size: var(--text-lg);
}
.junk-sheet-player-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.junk-sheet-chip-meta {
  font-size: var(--text-sm);
  color: var(--muted);
  padding: 2px 8px;
  border: 2px solid var(--line);
  border-radius: 999px;
  background: var(--panel-alt);
}

.junk-sheet-chips {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
}

.junk-sheet-chip {
  appearance: none;
  -webkit-appearance: none;
  background: var(--panel-alt);
  color: var(--ink);
  border: 2px solid var(--line);
  border-radius: var(--radius-md);
  padding: 10px 6px;
  min-height: 76px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-family: inherit;
  font-size: var(--text-sm);
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease, transform 80ms ease;
  text-align: center;
}.junk-sheet-chip:hover:not(:disabled) { border-color: var(--accent); }
.junk-sheet-chip:active:not(:disabled) { transform: scale(0.97); }
.junk-sheet-chip[data-active="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
.junk-sheet-chip[data-active="true"] .junk-sheet-chip-pts { color: rgba(255,255,255,0.85); }
.junk-sheet-chip.is-auto {
  opacity: 0.75;
  cursor: not-allowed;
}
.junk-sheet-chip-emoji { font-size: calc(20px + var(--font-size-step)); line-height: 1; }
.junk-sheet-chip-label { font-weight: 600; font-size: var(--text-sm); line-height: 1.1; }
.junk-sheet-chip-pts { font-size: var(--text-xs); color: var(--muted); line-height: 1; }

.junk-sheet-footer {
  /* Prefer --safe-bottom-inset (Android nav-bar coverage via layout-sync). */
  padding: 10px 16px calc(10px + var(--safe-bottom-inset, env(safe-area-inset-bottom, 0px)));
  border-top: 2px solid var(--line);
  background: var(--panel-alt);
  display: flex;
  justify-content: stretch;
}.junk-sheet-done {
  width: 100%;
  min-width: 0;
  background: rgba(220, 53, 69, 0.85);
  border-color: rgba(220, 53, 69, 0.9);
  color: #fff;
  font-weight: 800;
}
.junk-sheet-done:hover {
  background: rgba(220, 53, 69, 1);
  border-color: rgba(220, 53, 69, 1);
  filter: brightness(1.04);
}
/* Prevent background scroll while sheet is open */
body.junk-sheet-open { overflow: hidden; }

.junk-team-stroke-info {
  font-size: calc(var(--text-sm) + var(--font-descriptive-adjust));
  color: var(--accent);
  font-weight: 600;
  margin-top: 2px;
}

/* =========================
   Junk (Dots) — Table + Dropdown
   Appended from main.css
   ========================= */

/* =========================
   Junk (Dots) — Table + Dropdown
   ========================= */
#junkTable {
  width: 100%;
  table-layout: auto;
}

#junkTable th:first-child,
#junkTable td:first-child {
  width: 40px;
  min-width: 40px;
  padding: 4px;
  position: sticky;
  left: 0;
  background-color: var(--panel);
  z-index: var(--z-sticky-col);
  border-right: 3px solid var(--line);
  transform: translateZ(0);
}

#junkTable th:not(:first-child),
#junkTable td:not(:first-child) {
  padding: 4px;
  border-right: 2px solid var(--hi-faint);
}

#junkTable tbody td {
  padding: 4px;
  vertical-align: middle;
  height: auto;
}
.junk-cell {
  display: inline-flex;
  flex-direction: column;
  gap: 1px;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  min-height: 0;
}

.junk-ach-labels {
  font-size: calc(9px + var(--font-size-step));
  color: var(--muted);
  text-align: center;
  line-height: 1.1;
  max-width: 90px;
  min-height: 20px;
  word-wrap: break-word;
  margin: 0;
  padding: 0;
}

.junk-text-labels {
  font-size: calc(9px + var(--font-size-step));
  color: var(--muted);
  line-height: 1.2;
}

.junk-ach-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 6px;
  justify-content: center;
  align-items: center;
  margin-top: 1px;
}

.junk-ach-badge {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 2px;
  font-size: calc(9px + var(--font-size-step));
  white-space: nowrap;
}

.junk-ach-emoji {
  font-size: calc(11px + var(--font-size-step));
  line-height: 1;
  flex-shrink: 0;
}

.junk-ach-label-small {
  font-size: calc(8px + var(--font-size-step));
  font-weight: 600;
  color: var(--ink);
}

.junk-dot {
  display: inline-block;
  min-width: 18px;
  text-align: center;
  margin: 0;
  padding: 0;
  line-height: 1;
  font-size: calc(14px + var(--font-size-step));
  font-weight: 600;
}

.junk-dd {
  display: inline-block;
  position: relative;
}

.junk-dd > summary {
  list-style: none;
  cursor: pointer;
  border: 2px solid var(--line);
  background: var(--hi-soft);
  color: var(--ink-strong);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  font-size: calc(11px + var(--font-size-step));
  font-weight: 500;
  line-height: 1;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  -webkit-tap-highlight-color: rgba(104, 211, 145, 0.1);
  margin-top: 2px;
  transition: background 0.15s ease;
}

.junk-dd > summary:hover {
  background: rgba(255, 255, 255, 0.12);
}

.junk-dd[open] > summary {
  filter: brightness(1.08);
}

.junk-dd .menu {
  position: absolute;
  z-index: var(--z-dropdown);
  margin-top: var(--space-xs);
  display: grid;
  gap: var(--space-xs);
  padding: var(--space-sm);
  min-width: 160px;
  border: 2px solid var(--line);
  background: var(--panel-alt);
  border-radius: var(--radius-lg);
  max-height: calc(3 * var(--touch-min) + 2 * var(--space-xs) + 2 * var(--space-sm));
  overflow-y: auto;
  overflow-x: hidden;
}

.junk-dd .menu label {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: var(--text-md) var(--space-lg);
  border-radius: var(--radius-lg);
  cursor: pointer;
  border: 2px solid transparent;
  user-select: none;
  color: var(--ink-strong);
  min-height: var(--touch-min);
  font-size: var(--text-lg);
}

.junk-dd .menu label input {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

.junk-dd .menu label:has(input:checked) {
  background: var(--accent-soft-bg);
  border-color: var(--accent-soft-line);
}

.junk-dd .menu label:has(input:checked)::after {
  content: "✓";
  margin-left: auto;
  font-weight: 700;
}

.junk-ach-auto-badge {
  margin-left: auto;
  padding: 2px 6px;
  border-radius: 999px;
  border: 2px solid var(--line);
  background: var(--panel);
  color: var(--muted);
  font-size: calc(10px + var(--font-size-step));
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* Touch target sizing */
.gamesbar .game-toggle {
  min-height: var(--footer-action-h);
}

/* (Moved) Generic input[type="number"]/[type="text"] sizing now lives in
   forms.css alongside the other form-element base styles.
   Scorecard-specific score/par/hcp input sizing lives in scorecard.css. */

/* (Moved) The .header-addplayer-row, .header-title-row (including the
   .header-round-title rename affordance), and .header-course-control
   rules previously lived here. They now live in header.css (general
   header chrome) and scorecard.css (course control inside the scorecard
   options panel). */

/* .course-picker and its descendants (.course-picker-wrap, .course-source-*,
   .course-dropdown, .course-option, etc.) now live solely in side-menu.css —
   the scorecard-options.html partial this widget belongs to is a side-menu-
   hosted options panel, not a junk-game concern. Duplicate removed here. */

/* (Moved) Header options panel chrome, scorecard options panel chrome,
   #parBadge, and .scorecard-options-controls used to live here. They are
   now in header.css (the header chrome) and scorecard.css (the
   scorecard options panel + par badge). */

/* =========================================================================
   Light theme overrides for Junk-specific styles only. Header/scorecard
   options panel light rules moved out — see header.css and scorecard.css.
   ========================================================================= */

:root[data-theme="light"] body.junk-sheet-active #junkBody tr:hover td { background: rgba(0,0,0,0.03); }

:root[data-theme="light"] .junk-sheet-backdrop {
  background: rgba(255, 255, 255, 0.006);
}

:root[data-theme="light"] .junk-sheet {
  border-top-color: rgba(21, 32, 43, 0.18);
}

:root[data-theme="light"] .junk-sheet.is-open {
  box-shadow: 0 -10px 28px rgba(15, 23, 42, 0.14);
}

:root[data-theme="light"] .junk-sheet-header {
  background: #f8fafc;
}

:root[data-theme="light"] .junk-sheet-navbtn {
  background: #ffffff;
  border-color: var(--shadow-navy);
  color: #0f172a;
}

:root[data-theme="light"] .junk-sheet-navbtn:hover:not(:disabled) { background: rgba(0,0,0,0.05); }

:root[data-theme="light"] .junk-sheet-close {
  background: #ffffff;
  border-color: var(--shadow-navy);
  color: #0f172a;
}

:root[data-theme="light"] .junk-sheet-close:hover { background: rgba(0,0,0,0.05); }

:root[data-theme="light"] .junk-sheet-chip {
  background: #ffffff;
  border-color: var(--shadow-navy);
}

/* Light-theme override: the global `:root[data-theme="light"] button` rule wins
   by specificity, so re-assert the active chip styling here. */
:root[data-theme="light"] .junk-sheet-chip[data-active="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

:root[data-theme="light"] .junk-sheet-chip[data-active="true"]:hover {
  background: var(--accent);
  border-color: var(--accent);
}

:root[data-theme="light"] .junk-sheet-chip[data-active="true"] .junk-sheet-chip-pts {
  color: rgba(255,255,255,0.85);
}

:root[data-theme="light"] .junk-sheet-footer {
  background: rgba(248, 250, 252, 0.94);
}

:root[data-theme="light"] .junk-sheet-done {
  background: rgba(200, 40, 56, 0.9);
  border-color: rgba(190, 35, 50, 0.9);
  color: #fff;
}

/* Light theme Junk table borders */
:root[data-theme="light"] #junkTable th:first-child,
:root[data-theme="light"] #junkTable td:first-child {
  border-right: 3px solid rgba(0, 0, 0, 0.15);
}

:root[data-theme="light"] #junkTable th:not(:first-child),
:root[data-theme="light"] #junkTable td:not(:first-child) {
  border-right: 2px solid rgba(0, 0, 0, 0.05);
}

/* (Moved) Light-theme variants for the header + scorecard options panels
   are now in header.css and scorecard.css alongside their base rules. */

/* Junk dropdown menu (.junk-dd) light styling. (The summary/menu-label ink
   and the checked-row accent fill migrated to the theme-swap tokens
   --ink-strong / --accent-soft-bg / --accent-soft-line on the dark rules
   above — only the literals with no token remain here.) */
:root[data-theme="light"] .junk-dd > summary {
  background: #ffffff;
  border-color: #d3d7dc;
}

:root[data-theme="light"] .junk-dd .menu {
  background: #ffffff;
  border-color: #d3d7dc;
}

/* Junk "Dots" button cell. Kept as a specificity guard: the global
   `:root[data-theme="light"] button` rule in main.css would otherwise win
   over the lower-specificity dark faces. Values point at the dictionary
   tokens (same computed values in light). */
:root[data-theme="light"] .junk-cell summary,
:root[data-theme="light"] .junk-cell button {
  background: var(--btn-bg);
  border: 2px solid var(--btn-line);
  color: var(--ink-strong);
}