/* FairwayFinda Caddy — Score mode layout.
   Only what is specific to this screen: the stage, its floating chrome and the compact bar.
   Components come from ff-components.css and every value from ff-tokens.css; nothing here
   holds a raw colour, size, radius, weight or duration. State is ARIA or data attributes.

   Anatomy
     .ff-score-mode                 the screen: stage above, bar below
       __stage                      the full-bleed hole map and everything floating on it
         __base                     the hole illustration (holecard miniHole)
         __overlay                  SVG in stage pixels: legs, penalty links, stems, glyphs
         __labels / __handles       leg labels; one 44px button per marker and the pin badge
         __top > __header           close · hole · round score
         __strip                    club, lie and penalty options beside the selected marker
         __stack                    caddie caption (with the tray of unplaced shots) · dock (nav, advance)
         __loupe                    magnifier that rides above a dragged marker
       __bar                        result chips, then putt balls

   The bar is 132px plus the safe area at every size, so on a 667px-tall phone the map keeps 80%
   of the screen. The putt balls are therefore 44px here, not the 56px of the standalone row.
   Nothing on the map is lime; every glyph has an ink halo. */

.ff-score-mode__flag { pointer-events:visiblePainted; }
.ff-score-mode {
  position: absolute;
  inset: 0;
  z-index: var(--ff-z-score-map);
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  overflow: hidden;
  background: var(--ff-ink);
  color: var(--ff-paper);
  font: var(--ff-weight-ui) var(--ff-size-16) / var(--ff-leading-tight) var(--ff-font-ui);
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* An author display value must not defeat the hidden attribute. */
.ff-score-mode [hidden] { display: none; }


/* ---- Stage --------------------------------------------------------------- */

.ff-score-mode__stage {
  position: relative;
  min-height: 0;
  overflow: hidden;
  touch-action: none;
}

.ff-score-mode__base,
.ff-score-mode__overlay,
.ff-score-mode__labels,
.ff-score-mode__handles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.ff-score-mode__base svg {
  display: block;
  width: 100%;
  height: 100%;
}

.ff-score-mode__overlay,
.ff-score-mode__labels,
.ff-score-mode__handles { pointer-events: none; }

.ff-score-mode__overlay { overflow: visible; }

.ff-score-mode__empty {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  padding: var(--ff-space-24);
  background: var(--ff-ink);
}

.ff-score-mode__empty-title {
  font-size: var(--ff-size-24);
  line-height: var(--ff-leading-tight);
  letter-spacing: var(--ff-tracking-heading);
}


/* ---- Glyphs (SVG, stage pixels) ------------------------------------------
   <g class="ff-score-mode__glyph" data-kind="shot|green|drop|tee" style="transform: translate(…)">
     <g class="ff-score-mode__pop"><g class="ff-marker" …>…</g></g>
   </g>
   The shared .ff-marker carries state; this screen adds the lift while dragging,
   the settle-in when a result is chosen, the tee glyph, stems and penalty links. */

.ff-score-mode__pop {
  transform-origin: 0 0;
  transition:
    scale var(--ff-dur-state) var(--ff-ease-enter),
    opacity var(--ff-dur-state) var(--ff-ease-state);
}

.ff-score-mode__pop[data-enter="true"] {
  animation: ff-score-mode-settle var(--ff-dur-enter) var(--ff-ease-enter) both;
  animation-delay: calc(var(--ff-score-mode-order, 0) * var(--ff-dur-press) / 2);
}

.ff-score-mode__glyph[data-lifted="true"] { --ff-score-mode-lift: var(--ff-marker-selected-scale); }
.ff-score-mode__glyph[data-invalid="true"] { --ff-score-mode-fade: var(--ff-marker-unlocated-opacity); }

.ff-score-mode__glyph .ff-score-mode__pop {
  scale: var(--ff-score-mode-lift, 1);
  opacity: var(--ff-score-mode-fade, 1);
}

.ff-score-mode__leg[data-enter="true"],
.ff-score-mode__link[data-enter="true"],
.ff-score-mode__leg-label[data-enter="true"],
.ff-score-mode__pin[data-enter="true"] {
  animation: ff-score-mode-fade var(--ff-dur-enter) var(--ff-ease-state) both;
}

.ff-score-mode__tee {
  --ff-score-mode-tee-fill: var(--ff-swatch, var(--ff-text-3));
  --ff-score-mode-tee-dash: none;
}

.ff-score-mode__tee[data-state="approximate"] {
  --ff-score-mode-tee-fill: var(--ff-marker-hollow);
  --ff-score-mode-tee-dash: var(--ff-marker-dash);
}

.ff-score-mode__tee-halo {
  fill: var(--ff-marker-ink);
  stroke: none;
}

.ff-score-mode__tee-swatch {
  fill: var(--ff-score-mode-tee-fill);
  stroke: var(--ff-marker-fill);
  stroke-width: var(--ff-marker-ring);
  stroke-dasharray: var(--ff-score-mode-tee-dash);
}

.ff-score-mode__stem-casing,
.ff-score-mode__link-casing {
  fill: none;
  stroke: var(--ff-marker-ink);
  stroke-width: var(--ff-connector-casing-width);
  stroke-linecap: round;
}

.ff-score-mode__stem-line {
  fill: none;
  stroke: var(--ff-marker-fill);
  stroke-width: var(--ff-connector-width);
  stroke-linecap: round;
}

.ff-score-mode__stem-dot {
  fill: var(--ff-marker-fill);
  stroke: var(--ff-marker-ink);
  stroke-width: var(--ff-marker-ring);
}

/* A penalty link is dotted: no ball flew along it. */
.ff-score-mode__link-line {
  fill: none;
  stroke: var(--ff-marker-fill);
  stroke-width: var(--ff-connector-width);
  stroke-dasharray: var(--ff-marker-dot);
  stroke-linecap: round;
}


/* ---- Leg labels, marker handles, pin badge (HTML over the map) ------------ */

.ff-score-mode__leg-label {
  position: absolute;
  top: 0;
  left: 0;
  translate: -50% -50%;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  height: var(--ff-space-24);
  padding: 0 var(--ff-space-8);
  border: var(--ff-border) solid var(--ff-line-control);
  border-radius: var(--ff-radius-8);
  background: var(--ff-scrim);
  color: var(--ff-paper);
  font: var(--ff-weight-strong) var(--ff-size-14) / var(--ff-leading-display) var(--ff-font-ui);
  font-variant-numeric: var(--ff-numeric);
  white-space: nowrap;
}

.ff-score-mode__leg-label[data-state="estimated"] { border-style: dashed; }

.ff-score-mode__handle,
.ff-score-mode__pin {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  top: 0;
  left: 0;
  translate: -50% -50%;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--ff-radius-pill);
  background: transparent;
  color: var(--ff-paper);
  cursor: pointer;
  pointer-events: auto;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}

.ff-score-mode__handle {
  width: var(--ff-touch-min);
  height: var(--ff-touch-min);
  cursor: grab;
}

.ff-score-mode__pin {
  --ff-score-mode-pin-edge: solid;
  --ff-score-mode-pin-ground: var(--ff-paper);
  --ff-score-mode-pin-ink: var(--ff-ink);
  display: inline-grid;
  place-items: center;
  min-width: var(--ff-touch-min);
  min-height: var(--ff-touch-min);
  transition: transform var(--ff-dur-press) var(--ff-ease-state);
}

.ff-score-mode__pin[data-state="estimated"] {
  --ff-score-mode-pin-edge: dashed;
  --ff-score-mode-pin-ground: var(--ff-scrim);
  --ff-score-mode-pin-ink: var(--ff-paper);
}

.ff-score-mode__pin-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--ff-space-4);
  box-sizing: border-box;
  min-height: var(--ff-space-32);
  padding: 0 var(--ff-space-12);
  border: var(--ff-border-strong) var(--ff-score-mode-pin-edge) var(--ff-paper);
  border-radius: var(--ff-radius-pill);
  background: var(--ff-score-mode-pin-ground);
  box-shadow: var(--ff-e1);
  color: var(--ff-score-mode-pin-ink);
  font: var(--ff-weight-heavy) var(--ff-size-14) / var(--ff-leading-display) var(--ff-font-ui);
  font-variant-numeric: var(--ff-numeric);
  white-space: nowrap;
}

.ff-score-mode__pin:active .ff-score-mode__pin-pill { background: var(--ff-paper-press); }

.ff-score-mode__cup {
  width: var(--ff-glyph);
  height: var(--ff-glyph);
  flex: none;
}

.ff-score-mode__cup-rim {
  fill: none;
  stroke: currentColor;
  stroke-width: 2px;
  stroke-linecap: round;
}

.ff-score-mode__cup-ball { fill: currentColor; }


/* ---- Top: close · hole · round score -------------------------------------- */

.ff-score-mode__top {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  display: grid;
  padding:
    calc(var(--ff-space-8) + var(--ff-safe-top))
    calc(var(--ff-space-12) + var(--ff-safe-right))
    0
    calc(var(--ff-space-12) + var(--ff-safe-left));
  pointer-events: none;
}

.ff-score-mode__header {
  display: flex;
  align-items: center;
  gap: var(--ff-space-8);
  padding: var(--ff-space-4) var(--ff-space-16) var(--ff-space-4) var(--ff-space-4);
  border-radius: var(--ff-radius-pill);
  pointer-events: auto;
}

.ff-score-mode__heading {
  display: grid;
  gap: var(--ff-space-4);
  flex: 1 1 auto;
  min-width: 0;
}

.ff-score-mode__title {
  display: flex;
  align-items: baseline;
  gap: var(--ff-space-8);
  min-width: 0;
  margin: 0;
  font: var(--ff-weight-display) var(--ff-size-20) / var(--ff-leading-display) var(--ff-font-display);
  letter-spacing: var(--ff-tracking-heading);
  white-space: nowrap;
}

.ff-score-mode__detail {
  min-width: 0;
  overflow: hidden;
  color: var(--ff-text-2);
  font: var(--ff-weight-ui) var(--ff-size-14) / var(--ff-leading-display) var(--ff-font-ui);
  font-variant-numeric: var(--ff-numeric);
  letter-spacing: var(--ff-tracking-normal);
  text-overflow: ellipsis;
}

.ff-score-mode__round {
  display: grid;
  justify-items: end;
  gap: var(--ff-space-4);
  flex: none;
}

.ff-score-mode__round-value {
  font-size: var(--ff-size-20);
  line-height: var(--ff-leading-display);
}

.ff-score-mode__round-value[data-changed="true"] {
  animation: ff-score-mode-bump var(--ff-dur-enter) var(--ff-ease-enter) both;
}


/* ---- Strip beside the selected marker ------------------------------------- */

.ff-score-mode__strip {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  gap: var(--ff-space-8);
  width: max-content;
  max-width: calc(100% - var(--ff-space-16));
  padding: var(--ff-space-8);
  box-shadow: var(--ff-e2);
  touch-action: manipulation;
  animation: ff-score-mode-fade var(--ff-dur-state) var(--ff-ease-state) both;
}

/* Two or three chips to a row: wide enough to read, narrow enough to leave the hole in view. */
.ff-score-mode__strip-actions { max-width: calc(var(--ff-measure) * 0.72); }

.ff-score-mode__club[data-state="estimated"] {
  border-style: dashed;
  border-color: var(--ff-paper);
}

.ff-score-mode__act[data-emphasis="true"] {
  border-width: var(--ff-border-strong);
  border-color: var(--ff-warn);
}

.ff-score-mode__lie {
  display: flex;
  align-items: baseline;
  gap: var(--ff-space-8);
  margin: 0;
  padding: var(--ff-space-4) var(--ff-space-8) 0;
}

.ff-score-mode__lie-title {
  color: var(--ff-text-2);
  font: var(--ff-weight-heavy) var(--ff-size-12) / var(--ff-leading-display) var(--ff-font-ui);
  letter-spacing: var(--ff-tracking-eyebrow);
  text-transform: uppercase;
}

.ff-score-mode__lie-value {
  font: var(--ff-weight-strong) var(--ff-size-16) / var(--ff-leading-display) var(--ff-font-ui);
}


/* ---- Bottom stack: caption (and tray) · dock ------------------------------- */

.ff-score-mode__stack {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  gap: var(--ff-space-8);
  padding:
    0
    calc(var(--ff-space-12) + var(--ff-safe-right))
    var(--ff-space-12)
    calc(var(--ff-space-12) + var(--ff-safe-left));
  pointer-events: none;
}

.ff-score-mode__tray {
  display: flex;
  align-items: center;
  flex: none;
}

.ff-score-mode__tray-tokens { display: flex; }

.ff-score-mode__tray-more {
  padding: 0 var(--ff-space-8) 0 var(--ff-space-4);
  color: var(--ff-text-2);
  font: var(--ff-weight-strong) var(--ff-size-14) / var(--ff-leading-display) var(--ff-font-ui);
  font-variant-numeric: var(--ff-numeric);
}

.ff-score-mode__token {
  -webkit-appearance: none;
  appearance: none;
  width: var(--ff-touch-min);
  height: var(--ff-touch-min);
  flex: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--ff-radius-pill);
  background: transparent;
  cursor: grab;
  touch-action: none;
}

.ff-score-mode__token[data-lifted="true"] { visibility: hidden; }

.ff-score-mode__token-glyph {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* The caddie sentence is a whole thought, so here the caption wraps instead of truncating. */
.ff-score-mode__caption {
  min-height: calc(var(--ff-touch-min) + var(--ff-space-16));
  border-radius: var(--ff-radius-16);
  font: var(--ff-weight-ui) var(--ff-size-14) / var(--ff-leading-tight) var(--ff-font-ui);
  pointer-events: auto;
  touch-action: manipulation;
}

.ff-score-mode__caption[data-state="prompt"] {
  font: var(--ff-weight-strong) var(--ff-size-16) / var(--ff-leading-tight) var(--ff-font-ui);
}

.ff-score-mode__caption-text {
  overflow: visible;
  white-space: normal;
}

.ff-score-mode__caption-tag {
  display: inline-block;
  margin-left: var(--ff-space-4);
  padding: 0 var(--ff-space-8);
  line-height: var(--ff-leading-body);
}

.ff-score-mode__caption-tag[data-state="accepted"] { border-style: solid; }

.ff-score-mode__accept { flex: none; }
.ff-score-mode[data-place-player="true"] .ff-score-mode__accept:not([disabled]) { background:var(--ff-action);border-color:var(--ff-action);color:var(--ff-ink); }

.ff-score-mode__dock {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ff-space-8);
  min-height: var(--ff-touch-primary);
}

.ff-score-mode__nav { pointer-events: auto; }

.ff-score-mode__advance {
  min-width: 0;
  margin-left: auto;
  padding: 0 var(--ff-space-12);
  box-shadow: var(--ff-e1);
  pointer-events: auto;
}


/* ---- Loupe ---------------------------------------------------------------- */

.ff-score-mode__loupe {
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  width: calc(var(--ff-touch-primary) * 2);
  height: calc(var(--ff-touch-primary) * 2);
  overflow: hidden;
  border: var(--ff-border-strong) solid var(--ff-paper);
  border-radius: var(--ff-radius-pill);
  background: var(--ff-ink);
  box-shadow: var(--ff-focus-gap), var(--ff-e2);
  pointer-events: none;
}

.ff-score-mode__loupe[data-invalid="true"] { border-color: var(--ff-danger); }

.ff-score-mode__loupe-map,
.ff-score-mode__loupe-map svg,
.ff-score-mode__loupe-aim {
  display: block;
  width: 100%;
  height: 100%;
}

.ff-score-mode__loupe-aim {
  position: absolute;
  inset: 0;
}

.ff-score-mode__loupe-casing {
  fill: none;
  stroke: var(--ff-marker-ink);
  stroke-width: var(--ff-connector-casing-width);
}

.ff-score-mode__loupe-ring {
  fill: none;
  stroke: var(--ff-marker-fill);
  stroke-width: var(--ff-marker-ring);
}

.ff-score-mode__loupe-dot {
  fill: var(--ff-marker-fill);
  stroke: var(--ff-marker-ink);
  stroke-width: var(--ff-border);
}

.ff-score-mode__loupe-lie {
  position: absolute;
  bottom: var(--ff-space-8);
  left: 50%;
  translate: -50% 0;
  padding: var(--ff-space-4) var(--ff-space-8);
  border-radius: var(--ff-radius-pill);
  background: var(--ff-scrim);
  color: var(--ff-paper);
  font: var(--ff-weight-heavy) var(--ff-size-12) / var(--ff-leading-display) var(--ff-font-ui);
  letter-spacing: var(--ff-tracking-label);
  text-transform: uppercase;
  white-space: nowrap;
}


/* ---- Bar: result chips, then putt balls ----------------------------------- */

.ff-score-mode__bar {
  display: grid;
  min-width: 0;
  padding-bottom: calc(var(--ff-space-8) + var(--ff-safe-bottom));
  background: var(--ff-surface);
  box-shadow: 0 -1px 0 var(--ff-line);
}

/* Five chips fill the row exactly; the rest slide in from either end. The 16px gutters
   show the edge of the next chip, which is the cue that the row moves. */
.ff-score-mode__results {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-columns: minmax(0, 1fr);
  min-width: 0;
  padding:
    var(--ff-space-8)
    calc(var(--ff-space-16) + var(--ff-safe-right))
    var(--ff-space-8)
    calc(var(--ff-space-16) + var(--ff-safe-left));
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-padding-inline: calc(var(--ff-space-16) + var(--ff-safe-left));
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  touch-action: pan-x;
}

.ff-score-mode__results::-webkit-scrollbar { display: none; }
.ff-score-mode__more { min-width: 0; padding-inline: var(--ff-space-4); align-self: stretch; }

.ff-score-mode__chip {
  min-width: 0;
  padding: var(--ff-space-8) 0 var(--ff-space-4);
  scroll-snap-align: start;
}

.ff-score-mode__mark {
  width: var(--ff-space-32);
  height: var(--ff-space-32);
  font-size: var(--ff-size-20);
  letter-spacing: var(--ff-tracking-heading);
}

.ff-score-mode__chip-name {
  max-width: 100%;
  margin-top: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ff-score-mode__putts {
  display: flex;
  align-items: center;
  gap: var(--ff-space-16);
  padding:
    0
    calc(var(--ff-space-16) + var(--ff-safe-right))
    0
    calc(var(--ff-space-16) + var(--ff-safe-left));
}

.ff-score-mode__putt-row { flex: 1 1 auto; }

.ff-score-mode__ball {
  width: var(--ff-touch-min);
  height: var(--ff-touch-min);
  font-size: var(--ff-size-20);
}


/* ---- Motion ---------------------------------------------------------------
   Durations are the shared tokens, which the foundation collapses to zero under
   prefers-reduced-motion for every ff- element, so these all resolve to instant. */

@keyframes ff-score-mode-settle {
  from { opacity: 0; transform: translateY(calc(var(--ff-space-16) * -1)) scale(0.6); }
  to { opacity: 1; transform: none; }
}

@keyframes ff-score-mode-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes ff-score-mode-bump {
  from { transform: scale(1.3); }
  to { transform: none; }
}