/* Page frame: screens, header with the wordmark and language codes, «Back», photos and the team mark, cards of the choice screen */

.screen {
  min-block-size: 100dvh;
  padding-block: var(--space-l) var(--space-2xl);
  padding-inline: max(var(--space-ml), env(safe-area-inset-left)) max(var(--space-ml), env(safe-area-inset-right));
}
/* The tip page scrolls above the fixed payment panel and its fade: the panel height is measured into --panel-h,
   so the footer at the end of the page stands whole above the fade. Its top shrinks with the window height (--tip-* tokens) */
#screen-tip {
  padding-block-start: var(--tip-top);
  padding-block-end: calc(var(--panel-h, var(--panel-h-fallback)) + var(--fade) + var(--space-ml));
}

.wordmark { font-family: var(--font-display); font-weight: var(--weight-black); font-size: var(--size-3xl); letter-spacing: var(--tracking-tight); }
.wordmark i { font-style: normal; color: var(--color-accent); }
.wordmark b { color: var(--color-signal); }

/* aria-pressed is the state of a language code (exception to data-state: the attribute is needed for screen readers anyway) */
.langs button {
  min-block-size: var(--control-s);
  min-inline-size: var(--control-s);
  border-radius: var(--radius-xs);
  font-family: var(--font-display);
  font-weight: var(--weight-heavy);
  font-size: var(--size-2xs);
  color: var(--color-text-muted);
}
.langs button[aria-pressed="true"] { color: var(--color-text); background: var(--color-surface); }
#screen-tip .langs button { min-block-size: var(--tip-lang); }

.back {
  align-self: flex-start;
  min-block-size: var(--tip-back);
  font-weight: var(--weight-semibold);
  font-size: var(--size-m);
  color: var(--color-text-muted);
}
.back svg { inline-size: var(--icon-s); block-size: var(--icon-s); }

.title { font-size: var(--size-4xl); }

/* Square photo with an ink frame; grey square until it loads and when it fails */
.photo {
  flex: none;
  inline-size: var(--photo);
  block-size: var(--photo);
  border: var(--border) solid var(--color-border-strong);
  border-radius: var(--radius-xl);
  background: var(--color-skeleton);
  object-fit: cover;
}
.who .photo { inline-size: var(--tip-photo); block-size: var(--tip-photo); }
.photo[data-size="small"] { inline-size: var(--photo-success); block-size: var(--photo-success); }
.pick-card .photo { inline-size: var(--photo-card); block-size: var(--photo-card); border-radius: var(--radius-m); }
/* The whole team instead of a photo: the same square and frame, three people in ink on white (symbol #team-mark of index.html) */
.photo[data-variant="team"] { background: var(--color-surface); color: var(--color-text); }
.photo[data-variant="team"] svg { inline-size: var(--team-mark); block-size: var(--team-mark); fill: currentColor; }
.team-front { stroke: var(--color-surface); }

.pick-card {
  inline-size: 100%;
  padding: var(--space-sm);
  border: var(--border) solid var(--color-border-strong);
  border-radius: var(--radius-l);
  background: var(--color-surface);
  text-align: start;
}
.pick-text { flex: 1; min-inline-size: 0; }
.pick-card .name {
  font-family: var(--font-display);
  font-weight: var(--weight-heavy);
  font-size: var(--size-l);
  letter-spacing: var(--tracking-snug);
  overflow-wrap: anywhere;
}
/* The line under the name (a goal, how the team tip is split): one line, cut with an ellipsis, the card never grows */
.pick-card .line {
  font-size: var(--size-xs);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}