/* The round summary screen. Layout particular to this screen only; tiles, marks and buttons are
   shared components from ff-components.css and every value is a token from ff-tokens.css.
   Load after ff-components.css. State is ARIA and data attributes, never a class. */

.ff-summary-screen {
  position: fixed;
  inset: 0;
  z-index: var(--ff-z-card);
  display: flex;
  flex-direction: column;
  background: var(--ff-ink);
  color: var(--ff-paper);
  font: var(--ff-weight-ui) var(--ff-size-16) / var(--ff-leading-body) var(--ff-font-ui);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--ff-dur-exit) var(--ff-ease-exit),
    visibility 0s linear var(--ff-dur-exit);
}

.ff-summary-screen[data-state="open"] {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--ff-dur-enter) var(--ff-ease-enter), visibility 0s;
}

.ff-summary-scroll {
  display: grid;
  align-content: start;
  gap: var(--ff-space-16);
  flex: 1 1 auto;
  box-sizing: border-box;
  width: 100%;
  max-width: var(--ff-measure);
  min-height: 0;
  margin: 0 auto;
  padding:
    calc(var(--ff-space-24) + var(--ff-safe-top))
    calc(var(--ff-space-16) + var(--ff-safe-right))
    var(--ff-space-24)
    calc(var(--ff-space-16) + var(--ff-safe-left));
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.ff-summary-head {
  display: grid;
  gap: var(--ff-space-8);
}

.ff-summary-course {
  margin: 0;
  color: var(--ff-paper);
  font: var(--ff-weight-display) var(--ff-size-32) / var(--ff-leading-display) var(--ff-font-display);
  letter-spacing: var(--ff-tracking-display);
}

.ff-summary-meta {
  margin: 0;
  color: var(--ff-text-2);
  font: var(--ff-weight-ui) var(--ff-size-16) / var(--ff-leading-tight) var(--ff-font-ui);
  font-variant-numeric: var(--ff-numeric);
}

/* The result reads like the stub of a paper card: ink on paper, the strongest pair in sunlight. */
.ff-summary-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--ff-space-16);
  row-gap: var(--ff-space-12);
  padding: var(--ff-space-16);
  border-radius: var(--ff-radius-16);
  background: var(--ff-paper);
  color: var(--ff-ink);
}

.ff-summary-figure {
  display: grid;
  align-content: start;
  gap: var(--ff-space-4);
  min-width: 0;
}

.ff-summary-figure-label {
  color: var(--ff-ink);
  font: var(--ff-weight-heavy) var(--ff-size-12) / var(--ff-leading-tight) var(--ff-font-ui);
  letter-spacing: var(--ff-tracking-eyebrow);
  text-transform: uppercase;
}

.ff-summary-total {
  color: var(--ff-ink);
  font: var(--ff-weight-display) var(--ff-size-44) / var(--ff-leading-display) var(--ff-font-display);
  font-variant-numeric: var(--ff-numeric);
  letter-spacing: var(--ff-tracking-display);
}

.ff-summary-hero-line {
  grid-column: 1 / -1;
  margin: 0;
  padding-top: var(--ff-space-12);
  border-top: var(--ff-border-strong) solid var(--ff-ink);
  color: var(--ff-ink);
  font: var(--ff-weight-strong) var(--ff-size-16) / var(--ff-leading-tight) var(--ff-font-ui);
  font-variant-numeric: var(--ff-numeric);
}

.ff-summary-hero-note {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--ff-ink);
  font: var(--ff-weight-ui) var(--ff-size-14) / var(--ff-leading-tight) var(--ff-font-ui);
  font-variant-numeric: var(--ff-numeric);
}

.ff-summary-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ff-space-8);
}

/* Dashed means estimated, here as everywhere. */
.ff-summary-tile[data-state="estimated"] {
  border-style: dashed;
  border-color: var(--ff-paper);
}

.ff-summary-approx {
  margin-right: var(--ff-space-4);
  color: var(--ff-paper);
  font-weight: var(--ff-weight-ui);
}

.ff-summary-note {
  margin: 0;
  color: var(--ff-text-2);
  font: var(--ff-weight-ui) var(--ff-size-14) / var(--ff-leading-tight) var(--ff-font-ui);
}

.ff-summary-strip-head {
  display: grid;
  gap: var(--ff-space-4);
  margin-top: var(--ff-space-8);
}

.ff-summary-holes {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--ff-space-8);
}

.ff-summary-hole-item {
  display: grid;
  min-width: 0;
}

.ff-summary-hole {
  -webkit-appearance: none;
  appearance: none;
  display: grid;
  grid-template-rows: auto 1fr auto;
  justify-items: center;
  gap: var(--ff-space-4);
  box-sizing: border-box;
  min-width: var(--ff-touch-min);
  min-height: var(--ff-touch-primary);
  margin: 0;
  padding: var(--ff-space-8) 0;
  border: var(--ff-border) solid var(--ff-line-control);
  border-radius: var(--ff-radius-12);
  background: var(--ff-surface);
  color: var(--ff-paper);
  font-family: var(--ff-font-ui);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color var(--ff-dur-press) var(--ff-ease-state),
    transform var(--ff-dur-press) var(--ff-ease-state);
}

.ff-summary-hole:active {
  background: var(--ff-surface-raised);
  transform: scale(var(--ff-press-scale));
}

/* Dotted means unknown: a hole with no result is an empty frame, never a zero. */
.ff-summary-hole[data-state="empty"] {
  border-style: dotted;
  background: transparent;
}

.ff-summary-hole-number {
  color: var(--ff-text-2);
  font: var(--ff-weight-strong) var(--ff-size-14) / var(--ff-leading-display) var(--ff-font-display);
  font-variant-numeric: var(--ff-numeric);
}

.ff-summary-hole-visual {
  display: grid;
  place-items: center;
  width: 100%;
  height: var(--ff-touch-primary);
}

.ff-summary-hole-word {
  max-width: var(--ff-touch-min);
  color: var(--ff-paper);
  font: var(--ff-weight-strong) var(--ff-size-12) / var(--ff-leading-tight) var(--ff-font-ui);
  text-align: center;
}

.ff-summary-hole-foot {
  min-height: var(--ff-size-12);
  color: var(--ff-text-2);
  font: var(--ff-weight-strong) var(--ff-size-12) / var(--ff-leading-display) var(--ff-font-ui);
  font-variant-numeric: var(--ff-numeric);
}

.ff-summary-map {
  display: block;
  width: var(--ff-space-32);
  height: 100%;
  overflow: hidden;
  border: var(--ff-border) solid var(--ff-line-control);
  border-radius: var(--ff-radius-8);
}

.ff-summary-map-art {
  display: block;
  width: 100%;
  height: 100%;
}

.ff-summary-actions {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--ff-touch-gap);
  flex: none;
  box-sizing: border-box;
  width: 100%;
  max-width: var(--ff-measure);
  margin: 0 auto;
  padding:
    var(--ff-space-12)
    calc(var(--ff-space-16) + var(--ff-safe-right))
    calc(var(--ff-space-16) + var(--ff-safe-bottom))
    calc(var(--ff-space-16) + var(--ff-safe-left));
  border-top: var(--ff-border) solid var(--ff-line);
  background: var(--ff-ink);
}

.ff-summary-action {
  min-height: var(--ff-touch-primary);
  padding: 0 var(--ff-space-16);
}