/* Bruno Onboarding — shared shell + step styles.
   Token-driven (Bruno tokens.css). No hardcoded colours.
   Pattern: Pinned-CTA Wizard. Mobile frame 402px. */

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

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--typography-font-family-sans), system-ui, sans-serif;
  color: var(--fg-primary);
  background: var(--bg-secondary);
  min-block-size: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

/* ---- Device frame ------------------------------------------------------- */
.screen {
  position: relative;
  inline-size: 402px;
  min-block-size: 874px;
  block-size: 100vh;
  max-block-size: 920px;
  background: var(--bg-page);
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
}

@media (min-width: 460px) {
  body { padding: var(--spacing-6) 0; align-items: center; }
  .screen {
    block-size: 874px;
    border-radius: var(--radius-4xl);
    box-shadow: 0 24px 60px -20px rgb(0 0 0 / 0.45);
  }
}

/* ---- Header: progress + skip ------------------------------------------- */
.ob-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-4); /* 16 */
  padding: var(--spacing-6) var(--spacing-6) var(--spacing-2); /* 24 24 8 */
}

.ob-progress {
  display: flex;
  gap: var(--spacing-2); /* 8 */
  flex: 1;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ob-progress li {
  block-size: var(--spacing-1);
  flex: 1;
  border-radius: var(--radius-full);
  background: var(--bg-tertiary);
  transition: background 0.25s ease;
}

.ob-progress li[data-state="done"],
.ob-progress li[data-state="current"] {
  background: var(--bg-accent-green);
}

.ob-skip {
  flex: 0 0 auto;
}

/* ---- Body --------------------------------------------------------------- */
.ob-body {
  overflow-y: auto;
  padding: var(--spacing-4) var(--spacing-6) var(--spacing-6); /* 16 24 24 */
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4); /* 16 */
}

/* Short steps (Markets, Bookmakers): center the content stack so it reads as
   a deliberate composition instead of floating above a void before the footer.
   `safe` keeps the top reachable if the content ever grows past the viewport. */
.ob-body--center {
  justify-content: safe center;
}

.ob-title {
  font-size: var(--text-style-heading-lg-font-size);
  line-height: var(--text-style-heading-lg-line-height);
  font-weight: var(--text-style-heading-lg-font-weight);
  font-family: var(--text-style-heading-lg-font-family), inherit;
  letter-spacing: var(--text-style-heading-lg-letter-spacing);
  color: var(--fg-primary);
  margin: 0;
  text-wrap: balance; /* even line lengths on 2-line questions */
}

/* Sub-question / card heading: same family, one step down the type scale. */
.ob-title--md {
  font-size: var(--text-style-heading-md-font-size);
  line-height: var(--text-style-heading-md-line-height);
}

.ob-subtitle {
  font-size: var(--text-style-body-md-font-size);
  line-height: var(--text-style-body-md-line-height);
  font-weight: var(--text-style-body-md-font-weight);
  color: var(--fg-secondary);
  margin: 0;
}

.ob-hint {
  font-size: var(--text-style-body-sm-font-size);
  color: var(--fg-tertiary);
  margin: 0;
}

/* ---- Footer: docked CTA ------------------------------------------------- */
.ob-footer {
  padding: var(--spacing-4) var(--spacing-6) var(--spacing-6); /* 16 24 24 */
  border-block-start: 1px solid var(--bg-tertiary);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  background: var(--bg-page);
}

/* ---- Search field (gap component — prototype only) --------------------- */
.ob-search {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: 0 var(--spacing-4); /* 16 */
  min-block-size: 44px; /* touch-target floor */
  background: var(--bg-secondary);
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.ob-search:focus-within {
  border-color: var(--bg-accent-green);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bg-accent-green) 22%, transparent);
}

.ob-search svg {
  inline-size: var(--icon-size-md);
  block-size: var(--icon-size-md);
  flex: 0 0 auto;
  color: var(--fg-tertiary);
}

.ob-search input {
  flex: 1;
  min-inline-size: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: var(--text-style-body-md-font-size);
  color: var(--fg-primary);
}

.ob-search input::placeholder {
  color: var(--fg-tertiary);
}

.ob-search .ob-mic {
  cursor: pointer;
  background: none;
  border: none;
  padding: var(--spacing-1);
  margin-inline-end: calc(-1 * var(--spacing-1));
  border-radius: var(--radius-full);
  color: var(--fg-secondary);
  display: inline-flex;
  transition: color 0.15s ease, background 0.15s ease;
}
.ob-search .ob-mic:hover { color: var(--fg-primary); }
.ob-search .ob-mic:active { background: var(--bg-tertiary); }
.ob-search .ob-mic:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bg-accent-green) 30%, transparent);
}

.ob-searchrow {
  display: flex;
  align-items: center;
  gap: var(--spacing-4); /* 16 */
}
.ob-searchrow .ob-search { flex: 1; }

/* ---- Team list ---------------------------------------------------------- */
.ob-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.ob-team {
  display: flex;
  align-items: center;
  gap: var(--spacing-4); /* 16 */
  padding: var(--spacing-2); /* 8 */
  margin-inline: calc(-1 * var(--spacing-2));
  border-block-end: 1px solid var(--bg-secondary);
  border-radius: var(--radius-lg);
  cursor: pointer; /* whole row is the tap target; the heart stays the a11y control */
  transition: background 0.15s ease;
}
.ob-team:hover { background: var(--bg-secondary); }
.ob-team:active { background: var(--bg-tertiary); }

.ob-team__name {
  flex: 1;
  font-size: var(--text-style-body-md-font-size);
  font-weight: var(--text-style-title-sm-font-weight, 600);
  color: var(--fg-primary);
}

.ob-empty {
  padding: var(--spacing-6) 0;
  text-align: center;
  color: var(--fg-tertiary);
  font-size: var(--text-style-body-md-font-size);
}

/* ---- Selectable lists (markets / bookmakers) --------------------------- */
.ob-grid {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2); /* 8px — tight, even stack of full-width rows */
  list-style: none;
  margin: 0;
  padding: 0;
}

.ob-grid bruno-pill-button {
  inline-size: 100%;
}

/* market / bookmaker glyph sizing inside pills */
.ob-ico {
  inline-size: var(--icon-size-md);
  block-size: var(--icon-size-md);
  display: inline-flex;
}
.ob-ico svg { inline-size: 100%; block-size: 100%; }

/* bookmaker wordmark placeholder (logo asset = content gap) */
.ob-logo {
  font-weight: 800;
  font-size: var(--text-style-body-md-font-size);
  letter-spacing: -0.01em;
}

/* ---- Stake selector ----------------------------------------------------- */
/* Generous separation so the two questions on Screen 4 read as distinct blocks. */
.ob-stake {
  margin-block-start: var(--spacing-8); /* 32 — clear break between the two questions */
}

/* ---- Step group / fieldset --------------------------------------------- */
.ob-group {
  border: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6); /* 24 — between controls; the legend is spaced separately below */
}
/* A <legend> is not a flex item — the browser renders it specially, so flex `gap`
   never separates it from the controls. Space it with an explicit margin instead. */
.ob-group legend {
  padding: 0;
  margin-block-end: var(--spacing-6); /* 24 */
}
/* Tight grouping inside the legend: title and its hint read as one unit. */
.ob-group legend > * + * { margin-block-start: var(--spacing-2); }

/* ---- Welcome (S1) ------------------------------------------------------- */
.ob-welcome {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: var(--spacing-6); /* 24 */
  padding-block: var(--spacing-10, 40px);
}
/* soft brand glow behind the mark — the one "moment" on an otherwise quiet flow */
.ob-welcome::before {
  content: "";
  position: absolute;
  inset-block-start: 28%;
  inline-size: 320px;
  block-size: 320px;
  border-radius: var(--radius-full);
  background: radial-gradient(circle, color-mix(in srgb, var(--bg-accent-green) 18%, transparent) 0%, transparent 70%);
  filter: blur(8px);
  pointer-events: none;
  z-index: 0;
}
.ob-welcome > * { position: relative; z-index: 1; }
.ob-welcome .ob-logo-mark {
  inline-size: 152px;
  block-size: auto;
}
.ob-welcome .ob-title {
  font-size: var(--text-style-heading-xl-font-size);
  margin-block-start: var(--spacing-1);
}
.ob-welcome .ob-subtitle { max-inline-size: 32ch; }

/* ---- Confirm (S5) ------------------------------------------------------- */
.ob-confirm {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--spacing-4);
  padding-block-start: var(--spacing-10, 40px);
}
.ob-confirm__badge {
  inline-size: 72px;
  block-size: 72px;
  border-radius: var(--radius-full);
  background: var(--bg-accent-green);
  color: var(--fg-on-dark, #fff);
  display: grid;
  place-items: center;
}
.ob-confirm__badge svg { inline-size: 40px; block-size: 40px; }

.ob-notify {
  inline-size: 100%;
  margin-block-start: auto;
  background: var(--bg-secondary);
  border-radius: var(--radius-2xl);
  padding: var(--spacing-6); /* 24 */
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  text-align: center;
}
.ob-notify__icon {
  inline-size: var(--icon-size-xl, 28px);
  block-size: var(--icon-size-xl, 28px);
  color: var(--fg-accent-green);
  align-self: center;
}

/* utility */
.ob-stack { display: flex; flex-direction: column; gap: var(--spacing-2); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- Polish: state feedback (conveys state, product-register motion) ---- */
/* Tap feedback on the Bruno host elements — state, not decoration. */
bruno-button,
bruno-pill-button,
bruno-fav-button {
  transition: transform 0.12s ease;
}
bruno-button:active,
bruno-pill-button:active,
bruno-fav-button:active {
  transform: scale(0.97);
}
/* Progress segments fill smoothly as steps advance. */
.ob-progress li { transition: background 0.3s ease; }

/* Notification card lift on the confirm step. */
.ob-notify { transition: box-shadow 0.2s ease; }

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
  bruno-button:active,
  bruno-pill-button:active,
  bruno-fav-button:active { transform: none; }
}