/* Mobile first. Everything fits 390 px with no horizontal scroll.
   The handoff token table lives here once: :root is dark (Rink Night),
   [data-theme="light"] is light (Ice Sheet). Every colour below these two
   blocks is a token reference; no other rule declares a custom property. */

:root {
  --bg: #111319;
  --surface: #1a1d26;
  --surface2: #242836;
  --line: #2c3142;
  --text: #f2f3f7;
  --muted: #9aa2b5;
  --ink: #f2f3f7;
  --inkMuted: #9aa2b5;
  --primary: #CF0A2C;
  --blue: #055AD4;
  --blueText: #5b97ff;
  --blueSoft: rgba(5,90,212,.22);
  --redSoft: rgba(207,10,44,.18);
  --radius: 8px;
  --tab: #0d0f14;
  --h1: 30px;
  --case: uppercase;
  --track: .02em;
  --toastBg: #f2f3f7;
  --toastText: #111319;
}

[data-theme="light"] {
  --bg: #f2f4f8;
  --surface: #ffffff;
  --surface2: #e8ecf3;
  --line: #dbe0ea;
  --text: #1a1a1a;
  --muted: #5f6776;
  --ink: #1a1a1a;
  --inkMuted: #5f6776;
  --primary: #055AD4;
  --blue: #055AD4;
  --blueText: #055AD4;
  --blueSoft: rgba(5,90,212,.10);
  --redSoft: rgba(207,10,44,.10);
  --radius: 14px;
  --tab: #ffffff;
  --h1: 30px;
  --case: none;
  --track: 0;
  --toastBg: #1a1a1a;
  --toastText: #f2f3f7;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

[x-cloak] {
  display: none !important;
}

html,
body {
  margin: 0;
  min-width: 0;
  overflow-x: hidden;
}
body {
  font: 400 15px/1.45 "Prompt", sans-serif;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

/* Type scale (handoff) */

h1 {
  margin: 0;
  font: 600 var(--h1)/1.05 "Oswald", sans-serif;
  text-transform: var(--case);
  letter-spacing: var(--track);
  color: var(--text);
  overflow-wrap: anywhere;
}

.kicker {
  margin: 0 0 4px;
  font: 600 13px/1.2 "Oswald", sans-serif;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
}

.meta {
  margin: 0 0 6px;
  font: 500 12px/1.4 "Source Code Pro", monospace;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
}

.lede {
  margin: 8px 0 0;
  color: var(--muted);
}

/* Gate: sign in, sign up, Create Team */

.gate {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: 28px 20px 40px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.wordmark {
  display: flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  font: 600 16px/1 "Oswald", sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text);
}

.wordmark img {
  height: 32px;
  width: auto;
}

.wordmark b {
  font-weight: inherit;
  color: var(--blue);
}

.gate section {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  font: 500 13px/1.2 "Prompt", sans-serif;
  color: var(--muted);
}

input {
  width: 100%;
  min-width: 0;
  height: 50px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font: 400 16px/1 "Prompt", sans-serif;
  outline: none;
}

input:focus {
  border-color: var(--blue);
}

label.named input {
  background: var(--redSoft);
}

.row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

button {
  width: 100%;
  min-height: 44px;
  cursor: pointer;
}

/* The one filled CTA. White lettering on the filled primary in both themes
   (handoff); no token carries white in both, so the keyword is used. */
.primary {
  height: 52px;
  border: 0;
  border-radius: var(--radius);
  background: var(--primary);
  color: white;
  font: 600 16px/1 "Oswald", sans-serif;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.primary:disabled {
  opacity: .6;
  cursor: progress;
}

.alt {
  height: 48px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: transparent;
  color: var(--text);
  font: 500 15px/1 "Prompt", sans-serif;
}

/* The kernel's sentence, shown as it came. */
.denial {
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--radius);
  background: var(--redSoft);
  color: var(--text);
  overflow-wrap: anywhere;
}

.footnote {
  margin: 6px 0 0;
  font: 500 12px/1.4 "Source Code Pro", monospace;
  color: var(--muted);
}

.boot {
  margin: 0;
  color: var(--muted);
}

/* Shell: header, dest region, tab bar (below 900 px) or rail (from 900 px) */

/* The shell fills the viewport and the dest region scrolls inside it, so the
   tab bar sits in flow at the bottom and never covers a control. */
.shell {
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 20px 10px;
  min-height: 52px;
}

.back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: auto;
  height: 36px;
  padding: 0 8px 0 2px;
  border: 0;
  background: transparent;
  color: var(--text);
  font: 500 15px/1 "Prompt", sans-serif;
}

.back i {
  font-size: 22px;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: auto;
  height: 36px;
  padding: 0 10px 0 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  text-align: left;
}

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--primary);
  color: white;
  font: 600 12px/1 "Oswald", sans-serif;
}

.pill-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

#pill-name {
  font: 600 13px/1.15 "Prompt", sans-serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}

#pill-role {
  font: 400 10px/1.15 "Prompt", sans-serif;
  color: var(--inkMuted);
}

.pill i {
  color: var(--inkMuted);
}

.dests {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 4px 20px 24px;
}

.dest-region,
.dest {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
}

.empty,
.loading {
  margin: 0;
  color: var(--inkMuted);
}

/* Settings */

.memberships {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.membership {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  text-align: left;
  font: 600 15px/1.2 "Prompt", sans-serif;
}

.membership.picked {
  background: var(--blueSoft);
}

.membership-text {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

.membership i {
  font-size: 22px;
  color: var(--blueText);
}

.facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 16px;
  margin: 0;
}

.facts dt {
  color: var(--inkMuted);
}

.facts dd {
  margin: 0;
  overflow-wrap: anywhere;
}

/* Connect a chatbot */

/* The link and Copy link share one row; one tap selects the whole link. */
.connect-link {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
}

.connect-link code {
  padding: 10px 12px;
  border-radius: var(--radius);
  background: var(--blueSoft);
  color: var(--ink);
  font: 500 13px/1.4 "Source Code Pro", monospace;
  overflow-wrap: anywhere;
  user-select: all;
}

.connect-link .alt {
  width: auto;
  padding: 0 18px;
}

#connect-hosts {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding-left: 20px;
}

.host b,
.host span {
  display: block;
}

.host span {
  color: var(--inkMuted);
}

/* Secondary: the quiet .alt weight, below the host steps. */
#connect-developer {
  align-self: flex-start;
  color: var(--inkMuted);
}

.developer-path {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* The name and the Connect control share one row. */
.connect {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
}

.connect .alt {
  width: auto;
  height: 50px;
  padding: 0 18px;
}

.token-shown {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  border-radius: var(--radius);
  background: var(--blueSoft);
}

.token-shown code {
  font: 500 13px/1.4 "Source Code Pro", monospace;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.tokens {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.token {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.token-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  gap: 2px;
  overflow-wrap: anywhere;
}

.token-text small {
  color: var(--inkMuted);
  font: 500 12px/1.4 "Source Code Pro", monospace;
}

.alt.small {
  width: auto;
  height: 40px;
  padding: 0 14px;
}

/* Log out: the destructive exit, on the scarlet tint (no token is scarlet
   text in both themes; --redSoft is the scarlet tint in both). */
.danger {
  height: 48px;
  border: 0;
  border-radius: var(--radius);
  background: var(--redSoft);
  color: var(--text);
  font: 500 15px/1 "Prompt", sans-serif;
}

a {
  color: var(--blueText);
  text-decoration: none;
  font-weight: 500;
}

/* My Team: the Coaches card and the Roster / Spare / Removed groups; a row
   is a 40px jersey tile, name and position, class, and the contact links
   when the payload carries them. */

.groups {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.group-title {
  margin: 0 0 4px;
  font: 600 13px/1.2 "Oswald", sans-serif;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
}

.coach {
  margin: 0;
  padding: 8px 0;
  font: 600 15px/1.2 "Prompt", sans-serif;
}

.entries + .entries {
  border-top: 1px solid var(--line);
}

.entry {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 8px 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
  font: 400 15px/1.3 "Prompt", sans-serif;
}

button.entry {
  cursor: pointer;
}

.entry .restore {
  flex: 1 1 100%;
  width: 100%;
  height: 40px;
  margin-left: 52px;
  padding: 0 14px;
}

/* The Invite lines under a row (Team Manager only): the kernel's label and,
   when it offers one, the one small control. The Player line sits under
   the Guardian line in the same form. */
.invite-line,
.player-invite-line {
  display: flex;
  flex: 1 1 100%;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-left: 52px;
  font-size: 13px;
  color: var(--inkMuted);
}

.invite-line .invite,
.player-invite-line .player-invite {
  flex: none;
  height: 32px;
  padding: 0 12px;
  font-size: 13px;
}

/* The FAB floats over the end of the list; the last row's controls, the
   Player line's among them, scroll clear of it above the tab bar (52px FAB
   + 20px gap). */
#dest-team {
  padding-bottom: 72px;
}

/* A pending Coach Invite sits among the Coaches with its Delivery result. */
.coach-invite-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
}

.coach-invite {
  margin: 0;
  font: 500 15px/1.2 "Prompt", sans-serif;
  color: var(--inkMuted);
  overflow-wrap: anywhere;
}

.coach-invite-row .delivery {
  flex: none;
  color: var(--inkMuted);
  font: 500 12px/1.4 "Source Code Pro", monospace;
}

#invite-coach {
  margin-top: 8px;
}

/* The claim page while signed in, and the unsubscribe page's one exit. */
.claim-as {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* The claim page with no token: a pasted link or code reads as code. */
#claim-paste-input {
  font: 500 13px/1.4 "Source Code Pro", monospace;
}

.link-button {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

/* My Profile: the kid as a roster row, and the guardian contact under it. */
.profile-contact {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.profile-contact .guardian-name {
  margin: 0;
  font-weight: 600;
}

.entry-text {
  flex: 1 1 120px;
}

/* The Add / Edit player sheet: the class as a two-way segmented control. */

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.segmented {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  border-radius: var(--radius);
  background: var(--surface2);
}

.segment {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 42px;
  border-radius: var(--radius);
  color: var(--ink);
  font: 500 15px/1 "Prompt", sans-serif;
  cursor: pointer;
}

.segment:has(input:checked) {
  background: var(--surface);
}

.segment input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--blue);
}

select {
  width: 100%;
  min-width: 0;
  height: 50px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font: 400 16px/1 "Prompt", sans-serif;
  outline: none;
}

.field[data-invalid="true"] .segmented {
  background: var(--redSoft);
}

.jersey {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  background: var(--surface2);
  font: 600 18px/1 "Oswald", sans-serif;
}

.entry-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  gap: 2px;
  overflow-wrap: anywhere;
}

.entry-text .name {
  font-weight: 600;
}

.entry-meta {
  color: var(--inkMuted);
  font-size: 13px;
}

.contact {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  max-width: 45%;
  font-size: 13px;
  overflow-wrap: anywhere;
}

/* Calendar: day groups under a kicker with a rule fading right; each row a
   6px left stripe in the kind's colour, a kind kicker, a title, and one
   `time · place` line. Both themes: every colour is a token. */

.day {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.day-label {
  position: relative;
  margin: 0;
  padding-bottom: 6px;
}

.day-label::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--line), transparent);
}

.occurrence {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 14px 10px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  overflow: hidden;
}

.occurrence::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  background: var(--muted);
}

.occurrence[data-kind="Game"]::before {
  background: var(--primary);
}

.occurrence[data-kind="Practice"]::before {
  background: var(--blue);
}

.occurrence[data-kind="Activity"]::before {
  background: #5f6776;
}

.occurrence .kind,
.occurrence .day-label {
  font: 600 11px/1.2 "Oswald", sans-serif;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
}

.occurrence .day-label {
  padding: 0;
}

.occurrence .day-label::after {
  display: none;
}

.occurrence .title {
  margin: 0;
  font: 600 16px/1.25 "Prompt", sans-serif;
  overflow-wrap: anywhere;
}

.occurrence .meta {
  margin: 0;
  padding-right: 72px;
  text-transform: none;
  letter-spacing: 0;
}

.attendance-meta,
.own-attendance {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font: 600 12px/1.2 "Oswald", sans-serif;
  letter-spacing: .04em;
  color: var(--muted);
}

.own-attendance {
  color: var(--blueText);
}

/* The list half of the Calendar dest keeps the dest's own column rhythm
   while it is folded behind the detail. */
.calendar-days {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* The soft state, printed: a flagged row or card sits at reduced opacity
   with the payload's flag as a kicker in the primary colour. Both themes. */

.occurrence[data-flag],
.occurrence-card[data-flag] {
  opacity: .55;
}

.flag {
  font: 600 11px/1.2 "Oswald", sans-serif;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--primary);
}

/* The Occurrence detail: a Calendar sub-screen — the back control, then one
   card with the kind stripe, the kind kicker, the title at h1 size, the when
   line and the `time · place` line, and the staff footer the payload says. */

#occurrence-detail {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#occurrence-detail .back {
  align-self: flex-start;
}

.occurrence-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 16px 16px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  overflow: hidden;
}

.occurrence-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  background: var(--muted);
}

.occurrence-card[data-kind="Game"]::before {
  background: var(--primary);
}

.occurrence-card[data-kind="Practice"]::before {
  background: var(--blue);
}

.occurrence-card[data-kind="Activity"]::before {
  background: #5f6776;
}

.occurrence-card .kind {
  font: 600 11px/1.2 "Oswald", sans-serif;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
}

.occurrence-card .title {
  font-size: var(--h1);
}

.occurrence-card .when {
  margin: 4px 0 0;
}

.occurrence-card .meta {
  margin: 0;
  text-transform: none;
  letter-spacing: 0;
}

.detail-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.detail-actions .alt,
.detail-actions .danger {
  flex: 1 1 0;
  min-width: 0;
}

/* Cancel: outlined, on the scarlet tint `.danger` already carries. */
.detail-actions .danger {
  border: 1px solid var(--line);
}

/* RSVP controls and Attendance columns (PBI-008). Selected Attending is
   blue; selected Absent is scarlet — styling hooks, not comparisons. */

#occurrence-rsvp,
#occurrence-attendance {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.rsvp-actions {
  display: flex;
  gap: 8px;
}

.rsvp-choice {
  flex: 1 1 0;
  height: 48px;
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface2);
  color: var(--ink);
  font: 600 15px/1 "Prompt", sans-serif;
}

.rsvp-choice[aria-pressed="true"] {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}

.rsvp-choice[data-value="Absent"][aria-pressed="true"] {
  background: #CF0A2C;
  border-color: #CF0A2C;
  color: #fff;
}

#occurrence-attendance {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}

.att-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.att-count {
  margin: 0;
  font: 600 28px/1 "Oswald", sans-serif;
}

.att-col[data-col="attending"] .att-count,
.att-col[data-col="attending"] .att-label {
  color: var(--blueText);
}

.att-col[data-col="absent"] .att-count,
.att-col[data-col="absent"] .att-label {
  color: #CF0A2C;
}

.att-col[data-col="undecided"] .att-count,
.att-col[data-col="undecided"] .att-label {
  color: var(--muted);
}

.att-label,
.att-name {
  margin: 0;
}

.att-label {
  font: 600 11px/1.2 "Oswald", sans-serif;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.att-name {
  font: 400 13px/1.3 "Prompt", sans-serif;
  overflow-wrap: anywhere;
}

/* The Add to Calendar sheet: kind chips, one per kind the payload offers. */

.kind-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.kind-chip {
  width: auto;
  height: 36px;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface2);
  color: var(--ink);
  font: 500 14px/1 "Prompt", sans-serif;
}

.kind-chip[aria-pressed="true"] {
  border-color: var(--blue);
  background: var(--blueSoft);
  color: var(--blueText);
}

.tab-bar {
  flex: none;
  height: 84px;
  display: flex;
  background: var(--tab);
  border-top: 1px solid var(--line);
}

.tab {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 100%;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: 500 11px/1 "Prompt", sans-serif;
}

.tab .bar {
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 3px;
  background: transparent;
}

.tab i {
  font-size: 24px;
}

.tab.active {
  color: var(--text);
}

[data-theme="light"] .tab.active {
  color: var(--blue);
}

.tab.active .bar {
  background: var(--primary);
}

/* Primitives: FAB slot, bottom sheet, toast. Shadows only here (handoff). */

.fab {
  position: fixed;
  right: 20px;
  bottom: 104px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: auto;
  height: 52px;
  padding: 0 18px 0 14px;
  border: 0;
  border-radius: var(--radius);
  background: var(--primary);
  color: white;
  font: 600 15px/1 "Oswald", sans-serif;
  text-transform: uppercase;
  letter-spacing: .06em;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
}

.fab i {
  font-size: 20px;
}

.sheet {
  position: fixed;
  inset: 0;
  z-index: 4;
}

.sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
}

@keyframes sheet-in {
  from {
    transform: translateY(40px);
    opacity: 0;
  }

  to {
    transform: none;
    opacity: 1;
  }
}

.sheet-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 180px;
  max-height: 85vh;
  padding: 10px 20px 24px;
  border-radius: 16px 16px 0 0;
  background: var(--surface);
  color: var(--ink);
  animation: sheet-in 250ms ease-out;
}

[data-theme="light"] .sheet-panel {
  border-radius: 24px 24px 0 0;
}

.sheet-handle {
  align-self: center;
  width: 40px;
  height: 4px;
  border-radius: 2px;
  background: var(--line);
}

.sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.sheet-header h2 {
  margin: 0;
  font: 600 24px/1.1 "Oswald", sans-serif;
  text-transform: var(--case);
  letter-spacing: var(--track);
}

.sheet-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface2);
  color: var(--ink);
  font-size: 18px;
}

.sheet-body {
  min-height: 40px;
  overflow-y: auto;
}

.toast {
  position: fixed;
  left: 20px;
  right: 20px;
  bottom: 100px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 14px;
  border-radius: var(--radius);
  background: var(--toastBg);
  color: var(--toastText);
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
}

.toast i {
  font-size: 20px;
  color: var(--blueText);
}

.toast-message {
  flex: 1;
  min-width: 0;
  font: 500 14px/1.3 "Prompt", sans-serif;
}

.toast-undo {
  width: auto;
  min-height: 36px;
  padding: 0 10px;
  border: 0;
  background: transparent;
  color: var(--blueText);
  font: 600 14px/1 "Prompt", sans-serif;
}

.rail {
  display: none;
}

@media (min-width: 900px) {
  .shell {
    display: grid;
    grid-template-columns: 220px 1fr;
    grid-template-rows: auto 1fr;
  }

  .rail {
    display: flex;
    flex-direction: column;
    gap: 4px;
    grid-row: 1 / 3;
    padding: 20px 12px;
    background: var(--tab);
    border-right: 1px solid var(--line);
  }

  .rail .tab {
    flex: none;
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    height: 48px;
    padding: 0 14px;
    border-radius: var(--radius);
    font-size: 14px;
  }

  .rail .tab .bar {
    top: 0;
    bottom: 0;
    right: auto;
    width: 3px;
    height: auto;
  }

  .tab-bar {
    display: none;
  }

  .dests {
    padding-bottom: 40px;
  }

  /* No tab bar under the list here, so the FAB (bottom 104px, 52px tall)
     sits higher over its end: 104 + 52 - 40 + 20 gap. */
  #dest-team {
    padding-bottom: 136px;
  }
}

.scoresheet-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 16px;
  margin-top: 10px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  border-radius: var(--radius);
  text-align: left;
}

.scoresheet-row-title {
  font-weight: 600;
}

#season-record,
#draft-count {
  margin: 4px 0 0;
}

#dest-scoresheet {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#scoresheet-score {
  display: flex;
  gap: 16px;
}

#scoresheet-score .score {
  font-size: 48px;
  line-height: 1;
}

#scoresheet-steppers {
  display: flex;
  gap: 8px;
}

.dressed-row {
  display: flex;
  width: 100%;
  padding: 10px 12px;
  margin-top: 6px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  text-align: left;
}

.dressed-row[aria-pressed="true"] {
  border-color: var(--blue);
}

.history-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 8px 0 0;
}