/*
 * What the app and /search share beyond styles.css (docs/DESIGN.md): the bottom sheets and the toast, the sign-in
 * and account sheets, the bars' account button, and the wall's lock and panel. Only index.html and search.html link
 * it, after styles.css (whose tokens it uses) and, in the app, before app.css (which adds the app's own sheets and
 * overrides these where it must), so the site's guide and blog pages never wait on it.
 */

/* ------------------------------------------------------------ account button */
/* The bars' account button (presentation/account-button.ts), after ES | EN in the app and on /search: hidden until the
   shell knows accounts are on. A guest's is a soft green pill, "Entrar" beside a person, the one thing in the bar to act
   on; a golfer's is their M4 ball, marked with their initial on their colour (R5). */
.account-button {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 30px;
  padding: 0 12px 0 9px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--action-tint);
  color: var(--action-strong);
  font: 700 12px/1 var(--font);
  white-space: nowrap;
  cursor: pointer;
  transition:
    background 0.16s var(--ease),
    transform 0.12s var(--ease);
}
.account-button[hidden] {
  display: none;
}
.account-button:active {
  transform: scale(0.94);
}
.account-button .icon {
  width: 18px;
  height: 18px;
  stroke-width: 2.1;
}
.account-button.signed-in {
  width: 30px;
  padding: 0;
}
/* The golfer's own M4 ball (presentation/avatar/bola-marcada.ts) brings its own ground: no disc behind it. */
.account-button.signed-in {
  background: none;
}
/* A 44 px tap, reaching above and below only, never into ES | EN beside it (as ES | EN's own do). */
.account-button::after {
  content: "";
  position: absolute;
  inset: min(0px, (100% - 44px) / 2) 0;
}
/* With accounts on, ES | EN gives Entrar its room in the app's bar: the two segments become one compact toggle naming
   the other language ("EN" while in Spanish). The chosen language's button is hidden; shell.ts moves the focus to the
   other after a switch. (/search has its own one pill since A+: search.css.) */
.brand-bar:has(.account-button:not([hidden])) .language-switch button[aria-pressed="true"] {
  display: none;
}
/* On a phone the word stands alone, without its person. The app's narrowest phones get the person alone (app.css). */
@media (max-width: 599px) {
  .account-button:not(.signed-in) {
    padding: 0 12px;
  }
  .account-button:not(.signed-in) .icon {
    display: none;
  }
}
@media (hover: hover) and (pointer: fine) {
  .account-button:hover {
    background: var(--action-tint-strong);
  }
}

/* ------------------------------------------------------------ sheets & toasts */
/* Bottom sheets (kit/sheet.ts) and the toast: the app's own sheets add their footers and heroes in app.css. A page
   without a tab bar sets no --tab-bar-height, so the toast rises 16 px above the bottom edge there. */
.icon-button {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--fg);
  cursor: pointer;
  transition:
    background 0.16s var(--ease),
    transform 0.12s var(--ease);
}
.icon-button:active {
  background: var(--bg-3);
  transform: scale(0.94);
}
/* Busy (a refresh under way): aria-disabled rather than disabled where the button must keep the keyboard's focus. */
.icon-button:is([disabled], [aria-disabled="true"]) {
  opacity: 0.45;
  cursor: default;
}
.scrim {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgb(9 20 15 / 0.42);
  opacity: 0;
  transition: opacity 0.24s var(--ease);
}
.scrim.open {
  opacity: 1;
}
.sheet {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 41;
  max-width: 640px;
  max-height: 92dvh;
  margin: 0 auto;
  padding: 6px 20px 0;
  overflow-y: auto;
  border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
  background: var(--bg-1);
  box-shadow: var(--elevation-3);
  overscroll-behavior: contain;
  transform: translateY(100%);
  transition: transform 0.34s var(--ease-out);
}
.sheet.open {
  transform: translateY(0);
}
.sheet-body {
  padding-bottom: calc(22px + var(--safe-bottom));
}
.sheet-top {
  position: relative;
  height: 26px;
}
.grabber {
  width: 40px;
  height: 5px;
  margin: 4px auto 12px;
  border-radius: 3px;
  background: var(--stroke-strong);
}
/* Drawn 36 px; it takes a 44 px tap through a ::after, as the app's other small controls do (app.css). */
.sheet-close {
  position: absolute;
  top: 2px;
  right: -8px;
  width: 36px;
  height: 36px;
  background: var(--bg-2);
  color: var(--fg-2);
}
.sheet-close::after {
  content: "";
  position: absolute;
  inset: min(0px, (100% - 44px) / 2);
}
.sheet-close .icon {
  width: 18px;
  height: 18px;
}
.sheet h2 {
  margin: 2px 0 6px;
  font: 700 24px/30px var(--font-display);
  letter-spacing: -0.01em;
}
/* The title takes focus when no control is in view above the footer (kit/sheet.ts): where reading starts, not a
   control, so it shows no ring, as the screen itself (#view) shows none. */
.sheet h2[tabindex="-1"]:focus {
  outline: none;
}
/* As wide as its words up to the screen's width less 16 px a side: left at 50%, it would otherwise shrink to half the
   screen and wrap a short message onto three lines. */
#toast {
  position: fixed;
  bottom: calc(var(--tab-bar-height, 0px) + var(--safe-bottom) + 16px);
  left: 50%;
  z-index: 60;
  width: max-content;
  max-width: calc(100vw - 32px);
  padding: 13px 18px;
  border-radius: 16px;
  background: var(--ink);
  box-shadow: var(--elevation-2);
  color: var(--on-ink);
  font-size: 14px;
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(16px) scale(0.98);
  transition:
    opacity 0.2s var(--ease),
    transform 0.28s var(--ease-out);
}
#toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
}
/* The sign-in sheet (components/sign-in-sheet.ts): what an account gives, Google's button, and under it the note on
   the one cookie we keep. */
.sign-in h2 {
  margin-bottom: 16px;
}
.sign-in-benefits {
  display: grid;
  gap: 12px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
  color: var(--fg-2);
  font-size: 15px;
  line-height: 21px;
}
.sign-in-benefits li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
/* A check in a soft green disc, as the empty states mark theirs. */
.sign-in-benefits .icon {
  width: 22px;
  height: 22px;
  padding: 3px;
  border-radius: 50%;
  background: var(--action-tint);
  color: var(--action-strong);
  stroke-width: 2.4;
}
.sign-in-hint {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: -8px 0 16px;
  padding: 10px 12px;
  border-radius: var(--radius-tile);
  background: var(--bg-2);
  color: var(--fg-2);
  font-size: 14px;
  line-height: 20px;
}
.sign-in-hint .icon {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  color: var(--fg-muted);
}
/* Google's own light button, as its sign-in branding asks: a white fill, its grey edge (#747775, Google's own value,
   not one of our tokens), its "G" in colour. The type stays Figtree, as the app's. */
.google-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 50px;
  padding: 0 20px;
  border: 1px solid #747775;
  border-radius: var(--radius-pill);
  background: var(--bg-1);
  color: var(--fg);
  font: 600 16px/1 var(--font);
  cursor: pointer;
  transition:
    background 0.16s var(--ease),
    transform 0.12s var(--ease);
}
.google-button:active {
  background: var(--bg-2);
  transform: scale(0.98);
}
.google-mark {
  width: 20px;
  height: 20px;
  flex: none;
}
/* On its way to Google: a spinner where the "G" was, and a second tap does nothing (aria-disabled keeps the focus). */
.google-button.busy {
  cursor: progress;
}
.google-button.busy .google-mark {
  display: none;
}
/* Offline, Google's button waits (greyed, as a busy button keeps the focus), and a line under it says why. */
.google-button[aria-disabled="true"]:not(.busy) {
  opacity: 0.55;
  cursor: not-allowed;
}
.sign-in-offline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 12px 0 0;
  color: var(--warn);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}
.sign-in-offline .icon {
  width: 18px;
  height: 18px;
}
.sign-in-note {
  margin: 14px 8px 0;
  color: var(--fg-muted);
  font-size: 13px;
  line-height: 19px;
  text-align: center;
}
/* Underlined: its green alone would not set it apart from the grey words around it. */
.sign-in-note a {
  color: var(--action-strong);
  font-weight: 700;
  text-underline-offset: 2px;
}
/* The sign-in tray (A+, R4; the prototype's M3 .tray, its values ported as they are): a light card floating 8 px off
   the screen's edges, the week as nine mini skies, the title, Google's button, and "Solo tu nombre · Detalles". Its
   close button stays for the keyboard and screen readers, drawn only when it has the focus: the prototype closes it
   with Escape or the scrim alone. */
.sheet.sign-in-tray {
  right: 8px;
  bottom: calc(8px + var(--safe-bottom));
  left: 8px;
  padding: 12px 24px 34px;
  border-radius: 40px;
  background: #f6f6f1;
  box-shadow: 0 -10px 40px rgb(0 0 0 / 0.35);
  color: #10241b;
}
/* A computer's dialog in the window's middle (below): as tall as what it holds, a phone tray's width. */
@media (min-width: 960px) and (min-height: 620px) {
  .sheet.sign-in-tray {
    bottom: auto;
    max-width: 420px;
    border-radius: 40px;
  }
}
.sign-in-tray .sheet-top {
  height: 5px;
}
.sign-in-tray .grabber {
  margin: 0 auto;
  background: rgb(16 36 27 / 0.18);
}
.sign-in-tray .sheet-close:not(:focus-visible) {
  clip-path: inset(50%);
}
.sign-in-tray .sheet-body {
  padding-bottom: 0;
}
.sign-in-tray .sign-in {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding-top: 16px;
  text-align: center;
}
.mskies {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  margin-top: 8px;
}
.ms {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
/* 34 px as drawn; nine of them and their gaps take a phone's tray down to 23 px each at 320 rather than past its edges. */
.ms i {
  display: block;
  width: min(34px, (100vw - 64px) / 9 - 5px);
  height: var(--h);
  border-radius: 9px;
  background: var(--g);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.35),
    0 4px 8px -4px rgb(0 0 0 / 0.45);
  transform-origin: 50% 100%;
}
.sheet.open .ms i {
  animation: ms-in 0.42s var(--spring-bounce) both;
  animation-delay: calc(160ms + var(--i) * 40ms);
}
@keyframes ms-in {
  from {
    opacity: 0;
    transform: scaleY(0.2);
  }
}
.ms span {
  color: #55625a;
  font: 800 11px/1.35 var(--font);
  letter-spacing: 0.04em;
}
.ms.open i {
  background: linear-gradient(180deg, #3bc983, #2aa46a);
}
.sign-in-tray .sign-in h2 {
  margin: 2px 0 0;
  font: 820 32px/1.05 var(--font);
  letter-spacing: -0.035em;
}
.sign-in-tray .sign-in-benefits {
  margin: 0;
  text-align: left;
}
.sign-in-tray .sign-in-hint {
  margin: 0;
  text-align: left;
}
/* Google's button at the tray's size (56 px, 17 px words, a 22 px mark), its edge kept at Google's own #747775. */
.sign-in-tray .google-button {
  gap: 12px;
  min-height: 56px;
  background: #fff;
  color: #1f1f1f;
  font: 700 17px/1 var(--font);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.06);
}
.sign-in-tray .google-mark {
  width: 22px;
  height: 22px;
}
.sign-in-tray .sign-in-offline {
  margin: 0;
}
.sign-in-fine {
  margin: 0;
  color: #55625a;
  font: 550 13px/1.35 var(--font);
}
.sign-in-fine .link {
  min-height: 24px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.sign-in-tray .sign-in-note {
  margin: -6px 0 0;
}
/* While Google answers, a ball circles the cup's lip (lane C), where Google's mark was. */
.lip {
  position: relative;
  display: none;
  width: 26px;
  height: 22px;
  flex: none;
}
.google-button.busy .lip {
  display: inline-block;
}
.lip-cup {
  position: absolute;
  top: 11px;
  right: 3px;
  left: 3px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(ellipse 50% 60% at 50% 70%, #0a1a12 0 60%, #1c3a2c);
  box-shadow: inset 0 1.5px 0 -0.5px #fff;
}
.lip-ball {
  position: absolute;
  top: 5px;
  left: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #d9e0dc 70%, #a9b5af);
  box-shadow: 0 1px 1.5px rgb(0 0 0 / 0.4);
  animation: lipout 0.9s linear infinite;
}
@keyframes lipout {
  0%,
  100% {
    transform: translate(9px, 6px);
  }
  25% {
    transform: translate(0, 3px);
  }
  50% {
    transform: translate(-9px, 6px);
  }
  75% {
    transform: translate(0, 9px);
  }
}

/* News of the golfer's own account (kit/feedback.ts, `mark`): the prototype's .toast, a black capsule at the top with
   their ball, the words and a green tick, growing out of its top edge. */
#toast.news {
  top: calc(var(--safe-top) + 11px);
  bottom: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 316px;
  height: 54px;
  padding: 0 18px 0 9px;
  border-radius: 28px;
  background: #000;
  box-shadow: 0 12px 30px -10px rgb(0 0 0 / 0.6);
  color: #fff;
  transform: translateX(-50%) scale(0.39, 0.67);
  transform-origin: 50% 0;
  transition:
    opacity 0.42s var(--ease),
    transform 0.42s var(--spring-bounce);
}
#toast.news.show {
  transform: translateX(-50%);
}
#toast.news b {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font: 750 16px/1.2 var(--font);
  letter-spacing: -0.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.toast-ball {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #fff 0 55%, #eef1ee 100%);
  box-shadow:
    0 0 0 1.5px #fff,
    0 2px 5px rgb(0 0 0 / 0.28);
  color: #10241b;
  font: 850 15px/1 var(--font);
}
.toast-tick {
  display: grid;
  margin-left: auto;
  color: #3bc983;
}
.toast-tick .icon {
  width: 22px;
  height: 22px;
  stroke-width: 2.4;
}
.account-label {
  display: block;
  color: var(--fg-muted);
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
}
.account-value {
  display: block;
  font-size: 16px;
  font-weight: 600;
  line-height: 22px;
  overflow-wrap: anywhere;
}
/* Who sees the name, under it. */
.account-hint {
  display: block;
  margin-top: 2px;
  color: var(--fg-muted);
  font-size: 13px;
  line-height: 18px;
}
/* Why an action didn't happen, where the golfer acted, rather than a toast over the sheet's buttons. */
.account-notice {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 10px 0 0;
  color: var(--warn);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}
.account-notice .icon {
  width: 18px;
  height: 18px;
  margin-top: 1px;
}
.account-confirm .account-notice {
  justify-content: center;
  text-align: center;
}
.account-name .button {
  min-height: 44px;
}
.account-name-form {
  display: grid;
  flex: 1;
  gap: 8px;
  padding-right: 8px;
}
/* The hint sits with its label, not a full gap below it. */
.account-name-form .account-hint {
  margin-top: -6px;
}
/* 16 px, so iOS doesn't zoom the page in on focus. */
.account-name-form input {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  border: 1px solid var(--stroke-strong);
  border-radius: var(--radius-tile);
  background: var(--bg-1);
  font-size: 16px;
}
.account-name-form input:focus-visible {
  border-color: var(--action);
  outline: 0;
  box-shadow: 0 0 0 3px var(--action-tint-strong);
}
.account-name-form input[aria-invalid="true"] {
  border-color: var(--danger);
}
.account-field-error {
  margin: 0;
  color: var(--danger);
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
}
.account-name-actions {
  display: flex;
  gap: 8px;
}
/* The handicap's row (M10): the federation's answer, or the licence field with its required tick. */
.account-handicap {
  display: grid;
  gap: 2px;
}
.account-handicap .account-label {
  display: flex;
  align-items: center;
}
.account-handicap .account-label:focus {
  outline: 0;
}
/* Its buttons' words line up with the words above them; their 44 px reach below, so the row ends close under them. */
/* "(opcional)" beside "Añadir hándicap": said, quietly. */
.account-optional {
  color: var(--fg-muted);
  font-weight: 500;
}
.account-handicap.found {
  padding-bottom: 4px;
}
.account-handicap-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 4px 0 0 -14px;
}
.account-handicap-actions .button {
  min-height: 44px;
}
/* Quitar's question: its own buttons start at the row's edge, Quitar outlined, Cancelar beside it. */
.account-handicap-actions.confirm {
  margin-left: 0;
}
.account-handicap-question {
  margin: 10px 0 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 20px;
}
.account-handicap-question:focus {
  outline: 0;
}
.account-handicap-form {
  display: grid;
  gap: 8px;
}
.account-field-label {
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
}
.account-handicap-form .account-field-label {
  margin-top: 2px;
}
/* Where the licence is, close under its label. */
#account-licence-where {
  margin-top: -6px;
}
/* 16 px, so iOS doesn't zoom the page in on focus; capitals, as a licence is written. */
.account-handicap-form input[type="text"] {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  border: 1px solid var(--stroke-strong);
  border-radius: var(--radius-tile);
  background: var(--bg-1);
  font-size: 16px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
/* The app's own ring (styles.css), whole inside the row's padding: a keyboard user sees where they are. */
.account-handicap-form input[type="text"]:focus-visible {
  border-color: var(--action);
}
/* After the focus rule, and as specific: a refused licence stays red while the golfer corrects it (review of M10's UI, m1). */
.account-handicap-form input[type="text"][aria-invalid="true"] {
  border-color: var(--danger);
}

/* The tick and its words make one 44 px target: tapping the words ticks it. */
.account-attest {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin: 0 -6px;
  padding: 0 6px;
  border: 1px solid transparent;
  border-radius: var(--radius-tile);
}
.account-attest.refused {
  border-color: var(--danger);
}
.account-attest input {
  flex: none;
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: var(--action);
}
.account-attest label {
  flex: 1;
  padding: 11px 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
  cursor: pointer;
}
.account-handicap .account-notice {
  margin-top: 4px;
}
.account-note {
  margin: 8px 8px 0;
  color: var(--fg-muted);
  font-size: 13px;
  line-height: 19px;
  text-align: center;
}
.account-note a {
  color: var(--action-strong);
  font-weight: 700;
  text-underline-offset: 2px;
}
.button.danger {
  border-color: var(--danger);
  background: var(--danger);
  color: var(--on-ink);
}
.button[aria-disabled="true"] {
  opacity: 0.55;
  cursor: progress;
}
.account-confirm h2 {
  margin-bottom: 10px;
}
.account-confirm-body {
  margin: 0;
  color: var(--fg-2);
  font-size: 15px;
  line-height: 22px;
}
.account-confirm .account-note {
  margin: 12px 0 0;
  text-align: left;
}
.account-confirm-actions {
  display: grid;
  gap: 10px;
  margin-top: 22px;
}
/* A phone on its side: a sheet nearly as tall as the screen. */
/* The account sheet (A+, R5; components/account-sheet.ts): the prototype's account binder (ux/lanes/final, M5), its
   values ported as they are (.acct, .binder, .b-top, .b-num, .b-side, .slots, .slot, .me-row, .rows, .row, .acct-foot,
   .ghost-btn, .more-btn, .more-pane, .danger). On the tray's paper with 36 px corners, it opens on felt: the golfer's
   collection, then who they are, the rows, and at the foot Salir and "Más", which holds deleting the account. The
   sheet's own grabber lies on the felt; its ✕, which the prototype doesn't draw, is a quiet well in the felt's corner. */
.sheet.account-sheet:has(.binder) {
  --tray: #f6f6f1;
  padding: 0;
  border-radius: 36px 36px 0 0;
  background: var(--tray);
  box-shadow: 0 -10px 40px rgb(0 0 0 / 0.35);
}
@media (min-width: 960px) and (min-height: 620px) {
  .sheet.account-sheet:has(.binder) {
    border-radius: 36px;
  }
}
.account-sheet:has(.binder) .sheet-top {
  position: absolute;
  inset: 0 0 auto;
  z-index: 1;
  height: 0;
}
.account-sheet:has(.binder) .grabber {
  margin: 12px auto 0;
  background: rgb(255 255 255 / 0.25);
}
.sheet.account-sheet:has(.binder) .sheet-close {
  top: 10px;
  right: 12px;
  background: var(--felt-well);
  color: var(--on-felt-2);
}
.account-sheet:has(.binder) .sheet-body {
  padding-bottom: var(--safe-bottom);
}
.acct {
  display: flex;
  flex-direction: column;
  color: var(--paper-ink);
}
/* Felt under a faint grain, lit from the top. */
.binder {
  position: relative;
  padding: 17px 18px 18px;
  border-radius: 36px 36px 0 0;
  background-color: var(--felt);
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.075'/></svg>"),
    radial-gradient(120% 90% at 50% 0%, #14583f, var(--felt) 60%, var(--felt-deep));
  color: var(--on-felt);
}
.b-top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  margin-top: 14px;
}
/* The count's box is what the words beside it leave (they keep their own width, whatever the language), so it is the
   container the count is fitted to: a fixed allowance for the words ran past them once they grew (review of R5). */
.b-num {
  display: flex;
  flex: 1 1 0;
  align-items: baseline;
  min-width: 0;
  container-type: inline-size;
}
/* The count in chrome, the prototype's 104 px where it fits: kit/numeral-fit.ts measures its ems, and its box less
   "/45" (72 px: 34 px figures, their 4 px margin and room to spare) over them is the most it may take. */
.b-num .count {
  display: block;
  margin-left: -0.058em;
  padding-right: 0.07em;
  color: var(--chrome-shade);
  background: var(--chrome-face);
  -webkit-background-clip: text;
  background-clip: text;
  font: 900 min(104px, calc((100cqi - 72px) / var(--numeral-ems, 1.2) * 0.96)) / 0.9 var(--font-display);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.06em;
  white-space: nowrap;
}
.b-num small {
  margin-left: 4px;
  color: rgb(244 247 243 / 0.58);
  font: 850 34px/1 var(--font);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}
.b-side {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  padding-bottom: 10px;
  text-align: right;
}
.b-side .cap {
  color: rgb(244 247 243 / 0.74);
  font: 800 12px/1 var(--font);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
/* Balanced, so "Club pages opened here" never leaves a word alone on its second line. */
.b-side span:last-child {
  max-width: 17ch;
  text-wrap: balance;
  color: rgb(244 247 243 / 0.58);
  font: 600 13px/1.35 var(--font);
}
/* The album: a slot per club, a dimple in the felt until its ball fills it ("vacant": app.css has its own .empty). */
.slots {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 36px));
  justify-content: space-between;
  justify-items: center;
  gap: 8px 6px;
  margin-top: 16px;
}
.slot {
  position: relative;
  align-self: center;
  width: 100%;
  max-width: 36px;
  aspect-ratio: 1;
  border-radius: 50%;
}
.slot.vacant {
  background: radial-gradient(circle at 50% 60%, rgb(0 0 0 / 0.22), rgb(0 0 0 / 0.08) 70%);
  box-shadow:
    inset 0 2px 4px rgb(0 0 0 / 0.35),
    0 1px 0 rgb(255 255 255 / 0.06);
}
/* What is new since the golfer last looked wears gold, once. */
.slot.new::before {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  box-shadow:
    0 0 0 2px var(--accent),
    0 0 16px 2px rgb(242 196 71 / 0.55);
}
/* Laid over its slot, so the badge never sizes the row; the whole badge at 90 % of the ball, as every ball prints it. */
.acct-ball {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: #ffffff;
  box-shadow:
    0 0 0 1.5px var(--course, #cfd6d1),
    0 2px 5px rgb(0 0 0 / 0.28);
}
.acct-ball .club-badge {
  width: 90%;
  height: 90%;
  max-width: none;
  border-radius: 0;
  background: none;
  box-shadow: none;
  object-fit: contain;
}
.acct-ball::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 26%, rgb(255 255 255 / 0.75), rgb(255 255 255 / 0) 38%),
    radial-gradient(circle at 72% 80%, rgb(0 20 10 / 0.2), rgb(0 0 0 / 0) 58%);
}
.acct-ball .ball-dot {
  width: 45%;
  height: 45%;
  border-radius: 50%;
  background: var(--course);
}
/* Who: the golfer's M4 ball, 48 px, their name, and "Cambiar avatar". */
.me-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px 8px;
}
.me-row .account-avatar {
  flex: none;
  cursor: pointer;
}
.me-row .avatar {
  display: block;
}
.account-who {
  min-width: 0;
}
/* A long name wraps, whole, rather than being cut: the sheet is where a golfer reads it (Javier, at 320 px). */
.me-row h2 {
  margin: 0;
  font: 820 22px/1.2 var(--font);
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}
.me-change {
  min-height: 24px;
  margin: 2px 0 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--paper-fg-muted);
  font: 500 14px/1.3 var(--font);
  cursor: pointer;
}
/* The rows: no box, a hairline between two, from the words' edge. */
.account-rows {
  margin: 0;
  padding: 4px 12px 0;
  list-style: none;
}
.account-rows > li {
  position: relative;
}
.account-rows > li + li::before {
  content: "";
  position: absolute;
  top: 0;
  right: 10px;
  left: 48px;
  height: 1px;
  background: rgb(16 36 27 / 0.07);
}
.account-row {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 52px;
  padding: 0 10px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--paper-ink);
  font: 650 16px/1.25 var(--font);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--duration-press) var(--spring-snap);
}
.account-row:active {
  transform: scale(0.96);
}
.account-row:focus-visible {
  outline-offset: -2px;
}
.account-row > span {
  flex: 1;
  min-width: 0;
}
.account-row .icon {
  flex: none;
  width: 22px;
  height: 22px;
  color: var(--paper-fg-2);
}
.account-row .icon:last-child:not(:first-child) {
  width: 16px;
  height: 16px;
  color: var(--paper-fg-muted);
}
/* The name, at the row's end; cut short with an ellipsis rather than pushing the chevron out at 320 px. */
.account-row em {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 55%;
  overflow: hidden;
  color: var(--paper-fg-muted);
  font: 600 15px/1.25 var(--font);
  font-style: normal;
  white-space: nowrap;
}
.account-row em bdi {
  overflow: hidden;
  text-overflow: ellipsis;
}
.account-row[aria-disabled="true"] {
  opacity: 0.55;
  cursor: progress;
}
/* The rows that open in place (the name's field, the handicap's): the words under the row's words. */
.account-name:has(form),
.account-handicap {
  padding: 10px 10px 12px 46px;
}
.account-rows > li > .account-notice {
  margin: 0;
  padding: 0 10px 12px 46px;
}
.account-saved {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--paper-action-strong);
}
.account-saved .icon {
  width: 15px;
  height: 15px;
  stroke-width: 2.6;
}
/* The foot: Salir in a well, "Más" quiet beside it; deleting the account only once Más is open. */
.account-leave {
  display: block;
  margin-top: auto;
}
.acct-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px 30px;
}
.ghost-btn {
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 99px;
  background: #e9ece6;
  color: var(--paper-ink);
  font: 750 15px/1 var(--font);
  cursor: pointer;
  transition: transform var(--duration-press) var(--spring-snap);
}
.ghost-btn:active {
  transform: scale(0.96);
}
.ghost-btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: progress;
}
.more-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  padding: 0 10px;
  border: 0;
  background: none;
  color: var(--paper-fg-muted);
  font: 700 15px/1 var(--font);
  cursor: pointer;
}
.more-btn .icon {
  width: 16px;
  height: 16px;
  transition: transform 0.22s var(--spring-snap);
}
.more-btn[aria-expanded="true"] .icon {
  transform: rotate(180deg);
}
.more-pane {
  display: flex;
  justify-content: flex-end;
  margin-top: -20px;
  padding: 0 20px 20px;
}
.more-pane[hidden] {
  display: none;
}
.account-delete {
  min-height: 44px;
  padding: 0 6px;
  border: 0;
  background: transparent;
  color: var(--paper-danger);
  font: 750 15px/1 var(--font);
  cursor: pointer;
}
.account-leave .account-notice {
  justify-content: center;
  margin: -18px 20px 20px;
  text-align: center;
}

/* The avatar's picker (M4, the owner's pick; avatars2/M4/render/M4-account.png, its values ported): the ball at 96 px
   over the name, then the colour, the pin and the ring, each under a hairline; what isn't earned yet is grey, with
   "Por ganar"; Guardar at the foot. */
.avatar-picker .avatar {
  display: block;
}
.ap-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 8px 0 18px;
}
.ap-head h2 {
  margin: 0;
  font: 700 24px/1.1 var(--font);
  letter-spacing: -0.015em;
  text-align: center;
  overflow-wrap: anywhere;
}
.ap-head p {
  margin: -4px 0 0;
  color: var(--fg-muted);
  font: 500 13px/1.3 var(--font);
}
.ap-sec {
  padding: 14px 0 6px;
  border-top: 1px solid var(--stroke);
}
.ap-sec-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 0 0 10px;
}
.ap-sec-head h3 {
  margin: 0;
  font: 700 15px/1.2 var(--font);
}
.ap-sec-head span {
  color: var(--fg-muted);
  font: 600 12.5px/1 var(--font);
}
.ap-tints {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 4px 0 8px 4px;
}
.ap-tint {
  position: relative;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(var(--top), var(--bottom));
  cursor: pointer;
}
.ap-tint[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--ink);
}
.ap-pins {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding-bottom: 8px;
}
.ap-pin,
.ap-ring {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 60px;
  padding: 9px 10px;
  border: 0;
  border-radius: 14px;
  background: var(--bg-1);
  box-shadow: 0 0 0 1px var(--stroke);
  color: var(--fg);
  text-align: left;
  cursor: pointer;
}
.ap-pin .avatar,
.ap-ring .avatar {
  flex: none;
}
.ap-pin[aria-pressed="true"] {
  box-shadow: 0 0 0 2px var(--ink);
}
.ap-pin.locked,
.ap-ring.locked {
  background: var(--bg-2);
  box-shadow: none;
  cursor: default;
}
.ap-pin.locked .avatar,
.ap-ring.locked .avatar {
  opacity: 0.42;
  filter: grayscale(1);
}
.ap-txt {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}
.ap-txt b {
  font: 700 13.5px/1.2 var(--font);
}
.ap-txt span {
  margin-top: 2px;
  color: var(--fg-muted);
  font: 500 11.5px/1.25 var(--font);
  font-variant-numeric: tabular-nums;
}
.ap-txt em {
  margin-top: 5px;
  padding: 3px 7px;
  border-radius: 99px;
  background: var(--bg-3);
  color: var(--fg-2);
  font: 700 11.5px/1.2 var(--font);
  font-style: normal;
}
.ap-ring {
  margin-bottom: 8px;
  cursor: default;
}
.ap-bar {
  display: block;
  width: 100%;
  max-width: 150px;
  height: 4px;
  margin-top: 5px;
  overflow: hidden;
  border-radius: 2px;
  background: var(--bg-3);
}
.ap-bar > i {
  display: block;
  height: 100%;
  background: var(--accent-strong);
}
/* The ring's switch: a 44 px tap round a 46 × 28 track. */
.ap-switch {
  position: relative;
  flex: none;
  width: 46px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 99px;
  background: var(--bg-3);
  cursor: pointer;
  transition: background var(--duration-quick) var(--ease);
}
.ap-switch::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.25);
  transition: transform var(--duration-press) var(--spring-snap);
}
.ap-switch::after {
  content: "";
  position: absolute;
  inset: -8px 0;
}
.ap-switch[aria-checked="true"] {
  background: var(--action);
}
.ap-switch[aria-checked="true"]::before {
  transform: translateX(18px);
}
.ap-switch[aria-disabled="true"] {
  cursor: default;
}
.ap-kept {
  margin: 10px 0 0;
  color: var(--fg-muted);
  font: 500 12px/1.35 var(--font);
}
.ap-foot {
  position: sticky;
  bottom: 0;
  display: flex;
  gap: 10px;
  margin: 12px -20px 0;
  padding: 12px 20px 0;
  border-top: 1px solid var(--stroke);
  background: var(--bg-1);
}
.ap-foot .button {
  flex: 1;
  width: auto;
  min-height: 48px;
}
.ap-foot .button.ghost {
  flex: 0 0 auto;
  padding: 0 18px;
  border-color: transparent;
  background: var(--bg-3);
  color: var(--fg);
}
@media (prefers-reduced-motion: reduce) {
  .account-row,
  .ghost-btn,
  .more-btn .icon,
  .ap-switch,
  .ap-switch::before {
    transition: none;
  }
}
/* Without transparency effects (the felt's grain and the gold glow are effects, not information): a flat felt, the
   new club's ring kept as a solid line. */
@media (prefers-reduced-transparency: reduce) {
  .binder {
    background-image: none;
  }
  .slot.new::before {
    box-shadow: 0 0 0 2px var(--accent);
  }
}
/* ------------------------------------------------------------ the wall's lock */
/* The wall (ADR-0002, components/locked-day.ts), in the app and on /search: the lock is ink on the grey ground, never
   gold (DESIGN.md keeps gold for what is special to the golfer). */
.lock-mark {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bg-2);
  color: var(--fg-2);
}
.lock-mark .icon {
  width: 20px;
  height: 20px;
}
/* In place of a whole locked week, a locked day, or /search's answer: an empty state's grammar on a white card, the
   lock where its icon would be, and the one green button. The owner's words run long for one line on a phone: two
   balanced lines rather than one word left alone. */
.locked-panel {
  margin-top: 18px;
  padding: 28px 20px 22px;
  border: 1px solid var(--stroke);
  border-radius: var(--radius-card);
  background: var(--bg-1);
  box-shadow: var(--elevation-1);
  color: var(--fg-muted);
  text-align: center;
}
.locked-panel .lock-mark {
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
}
.locked-panel .lock-mark .icon {
  width: 26px;
  height: 26px;
}
.locked-panel h2 {
  margin: 0 auto 6px;
  max-width: 26ch;
  font: 700 21px/26px var(--font-display);
  letter-spacing: -0.01em;
  color: var(--fg);
  text-wrap: balance;
}
.locked-panel .locked-count {
  margin: 0 0 18px;
  font-size: 15px;
  font-weight: 600;
}
.locked-panel .button {
  text-wrap: balance;
}

@media (max-height: 520px) and (orientation: landscape) {
  .sheet {
    max-height: calc(100dvh - 12px);
  }
  .grabber {
    margin-bottom: 4px;
  }
}
/* A wide and tall enough screen: a dialog in the middle, as Playtomic's web opens its own. */
@media (min-width: 960px) and (min-height: 620px) {
  .sheet {
    top: 50%;
    bottom: auto;
    max-width: 560px;
    max-height: min(88vh, 920px);
    border-radius: var(--radius-sheet);
    opacity: 0;
    transform: translateY(calc(-50% + 24px)) scale(0.98);
    transition:
      transform 0.28s var(--ease-out),
      opacity 0.2s var(--ease);
  }
  .sheet.open {
    opacity: 1;
    transform: translateY(-50%);
  }
  .grabber {
    visibility: hidden;
  }
}
@media (hover: hover) and (pointer: fine) {
  .sheet-close:hover {
    background: var(--bg-3);
  }
  .google-button:hover {
    background: var(--bg-2);
  }
  .account-row:hover {
    background: rgb(16 36 27 / 0.04);
  }
  .account-delete:hover {
    background: var(--danger-tint);
  }
  .button.danger:hover {
    background: var(--danger);
    filter: brightness(0.92);
  }
}
@media (prefers-reduced-motion: reduce) {
  .sheet,
  .scrim,
  #toast,
  #toast.news {
    transition: none;
  }
  .lip-ball,
  .sheet.open .ms i {
    animation: none;
  }
}