/* Native Rails controls use the prototype components without a second visual theme. */
input.toggle { appearance: none; margin: 0; cursor: pointer; }
/* A native text field cannot use the display tile's flex layout reliably in Safari. */
input.score-tile { appearance: textfield; display: inline-block; font-family: inherit; padding: 0; border: 0; text-align: center; min-width: 0; }
input.score-tile::-webkit-inner-spin-button,
input.score-tile::-webkit-outer-spin-button { appearance: none; margin: 0; }
.choice:focus-within, .chip:focus-within { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.chips > form { display: contents; }
.vote-form { display: contents; }


fieldset.field { border: 0; margin: 0; padding: 0; min-width: 0; }
fieldset.field > legend { padding: 0; margin-bottom: var(--space-2); }
fieldset.field.card { padding: var(--card-pad); }
fieldset.field.card > legend { float: left; width: 100%; margin-bottom: var(--space-3); }
fieldset.field.card > legend + * { clear: both; }
.share-panel__image { display: block; width: 100%; height: auto; }

/* The browser's top-layer positioning wraps the prototype menu itself. */
.menu[popover] { position: fixed; inset: auto; margin: 0; max-width: calc(100vw - 2 * var(--space-2)); }
.chips--wrap .chip { max-width: 100%; min-width: 0; }

/* Submit inputs need the same native reset as button elements, including Safari. */
input.button { appearance: none; font-family: inherit; cursor: pointer; }

input.score-entry__value { appearance: textfield; border: 0; padding: 0; width: 100%; min-width: 0; min-height: var(--control-h-lg); background: transparent; color: var(--text-strong); text-align: center; font-size: var(--fs-num-l); line-height: var(--lh-tight); }
input.score-entry__value::-webkit-inner-spin-button,
input.score-entry__value::-webkit-outer-spin-button { appearance: none; margin: 0; }

/* Leave room for two digits between the full-size score steppers below the desktop breakpoint. */
@media (max-width: 959px) {
  input.score-entry__value { font-size: var(--fs-num-m); }
}

/* The invitation preview is the same branded PNG that is saved and shared. */
.invite-sheet { max-width: var(--layout-medium); padding: var(--space-5); background: var(--surface-page); }
.invite-sheet__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); }
.invite-sheet__head > div { min-width: 0; }
.invite-sheet__head h2 { margin-top: var(--space-2); overflow-wrap: anywhere; }
.invite-sheet__head > :last-child { flex-shrink: 0; }
.invitation-share { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: var(--space-6); }
.invitation-share__preview { overflow: hidden; border: var(--border-width) solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.invitation-share__tools { min-width: 0; display: grid; gap: var(--space-5); }
.invitation-share__actions { display: grid; gap: var(--space-3); }
.invitation-link { display: grid; gap: var(--space-4); }
.invitation-link .copy-field { display: flex; gap: var(--space-2); min-width: 0; }
.invitation-link .input { min-width: 0; }
.invitation-link__code { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); border-top: var(--border-width) solid var(--border-subtle); padding-top: var(--space-4); }
.invitation-link__code strong { display: block; font-size: var(--fs-num-m); font-weight: var(--weight-display); letter-spacing: var(--tracking-label); line-height: var(--lh-snug); color: var(--text-accent); font-family: var(--font-display); }
.invitation-share__status:empty { display: none; }
@media (min-width: 601px) {
  .sheet.invite-sheet[popover] { inset: 0; margin: auto; height: fit-content; width: calc(100% - 2 * var(--gutter)); border-bottom: var(--border-width) solid var(--border-strong); border-radius: var(--radius-xl); }
}
@media (max-width: 600px) {
  .invite-sheet { padding: var(--space-4) var(--space-4) calc(var(--space-5) + env(safe-area-inset-bottom)); }
  .invite-sheet__head { position: sticky; top: 0; z-index: var(--z-sticky); background: var(--surface-page); padding-bottom: var(--space-3); margin-bottom: var(--space-3); }
  .invitation-share { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .invitation-share__preview { width: min(100%, 36dvh, calc(var(--layout-aside) - var(--space-6))); justify-self: center; }
  .invitation-share__tools { gap: var(--space-4); }
  .invitation-share__tools > .stack { display: none; }
  .invitation-share__actions { gap: var(--space-2); }
}

/* Two digits stay whole between the 44px steppers on the narrowest phones. */
@media (max-width: 400px) {
  input.score-entry__value { font-size: var(--fs-num-s); }
}

.field-grid { display: grid; gap: var(--space-4); min-width: 0; }
.team-picker { position: relative; min-width: 0; }
.team-picker__control { display: flex; align-items: center; gap: var(--space-2); padding-inline: var(--space-3); min-height: var(--control-h); border-radius: var(--radius-md); background: var(--surface-sunken); box-shadow: var(--shadow-well); }
.team-picker__control .input { flex: 1; min-width: 0; width: 100%; padding-inline: 0; background: transparent; box-shadow: none; }
.team-picker__control .input:focus-visible { outline: 0; }
.team-picker__control:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.team-picker__crest { display: inline-grid; place-items: center; width: 24px; height: 24px; flex: none; object-fit: contain; font: var(--type-label); font-size: var(--fs-caption); white-space: nowrap; }
.team-picker__clear { display: grid; place-items: center; width: var(--tap-min); height: var(--tap-min); flex: none; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-muted); cursor: pointer; }
.team-picker__clear:hover { color: var(--text-strong); background: var(--surface-raised); }
.team-picker__list { position: absolute; inset-inline: 0; top: 100%; z-index: 20; max-height: min(320px, 40dvh); overflow-y: auto; padding: var(--space-2); margin: 0; list-style: none; border-radius: var(--radius-md); background: var(--surface-raised); box-shadow: var(--shadow-pop); }
.team-picker__list li { display: flex; align-items: center; gap: var(--space-3); min-height: var(--tap-min); padding: var(--space-2); border-radius: var(--radius-sm); overflow-wrap: anywhere; cursor: pointer; }
.team-picker__list li[aria-selected=true], .team-picker__list li:hover { background: var(--surface-sunken); color: var(--text-accent); }
.team-picker > [role=status] { position: absolute; inset-inline-start: 0; top: 100%; }
.team-picker > [role=status]:empty { display: none; }
@media (min-width: 700px) {
  .field-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.share-image { position: relative; aspect-ratio: var(--share-ratio); background: var(--surface-sunken); width: 100%; }
.share-image > .share-panel__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; }
.share-image.is-ready > .share-panel__image { opacity: 1; transition: opacity var(--dur-base); }
.share-image__placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-4); background: linear-gradient(120deg, var(--surface-sunken), var(--surface-raised), var(--surface-sunken)); background-size: 200% 100%; animation: share-loading 2.5s ease-in-out infinite; }
.share-image__placeholder[hidden], .share-image__placeholder button[hidden] { display: none; }
@keyframes share-loading { 0%, 100% { background-position: 0% 0; } 50% { background-position: 100% 0; } }
@media (prefers-reduced-motion: reduce) { .share-image__placeholder { animation: none; } .share-image.is-ready > .share-panel__image { transition: none; } }

@media (max-width: 600px) { .invitation-share__preview.share-image { width: min(100%, 28dvh); justify-self: center; } }

.share-image:not(.is-ready) > .share-panel__image { pointer-events: none; }