/* Hole tab. Tokens from app.css only: three font sizes, no radius, 48px taps. */

.hole-view { display: flex; flex-direction: column; gap: 12px; }

/* Header */
.hole-head { display: flex; flex-direction: column; gap: 4px; }
.hole-nav { display: flex; align-items: center; gap: 8px; }
.hole-nav .navbtn { flex: none; width: var(--tap); height: var(--tap); padding: 0; }
.hole-title { flex: 1 1 auto; min-width: 0; text-align: center; display: flex; flex-direction: column; align-items: center; }
.hole-drink { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 4px; }
.hole-drink .title { min-width: 0; overflow-wrap: anywhere; }
.hole-drink .bold { flex: none; }
.hole-head p { overflow-wrap: anywhere; }

/* Sips */
.hole-sips { display: flex; flex-direction: column; gap: 8px; }
.sips-head { display: flex; align-items: center; gap: 12px; min-height: var(--tap); }
.sips-head .title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clearbtn { flex: none; padding: 4px 16px; }

/* Compact tiles so the grid fits above the fold */
.hole-view .sipgrid { gap: 8px; }
.hole-view .sipgrid .tile { aspect-ratio: auto; height: 56px; min-height: var(--tap); padding: 0; }
.hole-view .sipgrid .tile.more { height: auto; min-height: var(--tap); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chipbtn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--tap);
  padding: 0 14px 0 8px;
  background: var(--ink-2);
  color: var(--butter);
  border: 2px solid var(--line);
  font-weight: 700;
  max-width: 100%;
}
.chipbtn span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chipbtn[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--ink);
}

/* Team line */
.team-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  padding: 12px;
  background: var(--ink-2);
}
.team-line .bold { color: var(--butter); }
.team-line .bold.good { color: var(--mint); }
.team-line .bold.bad { color: var(--pink); }
.team-line .bold.par { color: var(--butter); }
.team-line .muted { min-width: 0; overflow-wrap: anywhere; }

/* Penalties */
.hole-pens { display: flex; flex-direction: column; gap: 12px; }
.pen-faces { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px 8px; }
.face {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
  padding: 0;
  background: none;
  border: 0;
  color: var(--butter);
}
.face:active .face-av { outline: 3px solid var(--pink); }
.face-av { position: relative; display: block; width: 64px; height: 64px; }
.face-name {
  max-width: 100%;
  text-align: center;
  font-weight: 600;
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.badge {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 28px;
  padding: 2px 6px;
  background: var(--pink);
  color: var(--ink);
  font-size: var(--fs-body);
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
}

.pen-list { display: flex; flex-direction: column; gap: 8px; }
.pen-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 8px 8px 12px;
  background: var(--ink-2);
  border-left: 4px solid var(--pink);
}
.pen-row p { min-width: 0; overflow-wrap: anywhere; }
.pen-row .btn { flex: none; padding: 4px 14px; }

/* Penalty sheet */
.pen-sheet { display: flex; flex-direction: column; gap: var(--gap); }
.pen-who { display: flex; align-items: center; gap: var(--gap); min-width: 0; }
.pen-who .title { min-width: 0; overflow-wrap: anywhere; }
.pen-rule { flex-direction: column; gap: 2px; padding-top: 10px; padding-bottom: 10px; }
.pen-rule-sub { opacity: .8; font-weight: 500; }

/* One-shot effects: transform/opacity only, under 300ms. Reduced motion is switched off globally in app.css. */
@keyframes hole-pop {
  0% { transform: scale(.92); }
  55% { transform: scale(1.04); }
  100% { transform: scale(1); }
}
.hole-view .sipgrid .tile.pop { animation: hole-pop 240ms ease-out; }

@keyframes hole-bump {
  0% { transform: scale(1); }
  45% { transform: scale(1.25); }
  100% { transform: scale(1); }
}
.hole-view .team-line .bold.bump,
.hole-view .badge.bump { animation: hole-bump 260ms ease-out; }
.hole-view .team-line .bold { display: inline-block; }

@keyframes hole-slide {
  from { transform: translateX(var(--slide, 12px)); opacity: 0; }
  to { transform: none; opacity: 1; }
}
.hole-view .hole-head.slide { animation: hole-slide 240ms ease-out; }