/* Biscoitando — estilos dos componentes. Cores, espaços, raios, tipos e fontes vêm de tokens.css (--bc-*, .bc-display, .bc-title…).
   Aqui ficam só o que tokens.json não declara: movimento, aliases de família e o desenho dos componentes. */
:root {
  color-scheme: dark;
  --bc-font-ui: var(--font-ui);
  --bc-font-display: var(--font-display);
  --bc-duration-touch: 100ms;
  --bc-duration-vote: 180ms;
  --bc-duration-match: 420ms;
  --bc-ease-out: cubic-bezier(.16, 1, .3, 1);
}
html, body { background: var(--bc-bg); }
body { margin: 0; color: var(--bc-text); font: 400 16px/24px var(--font-ui); -webkit-font-smoothing: antialiased; }

/* Estrutura (kit: .bc-app, .bc-content) */
.bc-app { min-height: 100dvh; margin: 0; background: var(--bc-bg); color: var(--bc-text); font: 400 1rem/1.5 var(--font-ui); }
.bc-app *, .bc-app *::before, .bc-app *::after { box-sizing: border-box; }
.bc-content {
  display: flex; flex-direction: column;
  min-height: 100dvh;
  width: min(100%, var(--bc-content-max));
  margin-inline: auto;
  padding: max(var(--bc-space-6), env(safe-area-inset-top)) var(--bc-gutter) max(var(--bc-space-6), env(safe-area-inset-bottom));
}

/* Tipo: cor dos estilos que a pedem; margens zeradas */
.bc-display, .bc-display-italic, .bc-title, .bc-body, .bc-support, .bc-meta, .bc-label { margin: 0; }
.bc-meta { color: var(--bc-text-secondary); }
.bc-meta__dot { margin-inline: var(--bc-space-2); }

/* Ícone */
.bc-icon { display: inline-block; flex: 0 0 auto; vertical-align: middle; }
.bc-logo { display: block; flex: 0 0 auto; }

/* Foco visível: âmbar 2 px, afastado 3 px */
.bc-app :focus-visible,
.bc-control:focus-visible, .bc-icon-btn:focus-visible, .bc-mode__opt:focus-visible, .bc-toast__action:focus-visible, .bc-poster-vote:focus-visible {
  outline: var(--bc-focus-width) solid var(--bc-focus);
  outline-offset: var(--bc-focus-offset);
}

/* Botão (kit: .bc-control) */
.bc-control {
  box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--bc-space-2);
  min-height: var(--bc-touch-target); min-width: var(--bc-touch-target);
  padding: 14px 20px;
  border: 1px solid var(--bc-border);
  border-radius: var(--bc-radius-control);
  background: var(--bc-surface);
  color: var(--bc-text);
  font: 700 .875rem/1.4286 var(--font-ui);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--bc-duration-touch) ease;
}
.bc-control:active { background: var(--bc-surface-raised); }
.bc-control--primary { background: var(--bc-accent); border-color: transparent; color: var(--bc-on-accent); }
.bc-control--primary:active { background: var(--bc-accent-pressed); }
.bc-control--quiet { background: transparent; border-color: transparent; }
.bc-control--quiet:active { background: var(--bc-surface); }
.bc-control--block { display: flex; width: 100%; }
.bc-control:disabled, .bc-control.is-pending {
  background: var(--bc-surface);
  border-color: var(--bc-divider);
  color: var(--bc-text-secondary);
  cursor: default;
}
.bc-control.is-pending { cursor: progress; }

/* Botão de ícone: alvo 48 × 48, face menor */
.bc-icon-btn {
  box-sizing: border-box;
  display: inline-grid; place-items: center;
  width: var(--bc-touch-target); height: var(--bc-touch-target);
  padding: 0; border: 0; border-radius: var(--bc-radius-pill);
  background: transparent; color: var(--bc-text);
  cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.bc-icon-btn__face { display: grid; place-items: center; border-radius: var(--bc-radius-pill); transition: background-color var(--bc-duration-touch) ease; }
.bc-icon-btn--plain:active .bc-icon-btn__face { background: var(--bc-surface-raised); }
.bc-icon-btn--overlay .bc-icon-btn__face { width: 40px; height: 40px; background: var(--bc-bg); }
.bc-icon-btn--overlay-compact .bc-icon-btn__face { width: 24px; height: 24px; background: var(--bc-bg); }
.bc-icon-btn--overlay:focus-visible, .bc-icon-btn--overlay-compact:focus-visible { outline-offset: 0; }

/* Seletor Deck | Grade */
.bc-mode {
  box-sizing: border-box;
  display: grid; grid-template-columns: 1fr 1fr;
  border: 1px solid var(--bc-border);
  border-radius: var(--bc-radius-control);
  background: var(--bc-surface);
}
.bc-mode__opt {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--bc-space-2);
  min-height: var(--bc-touch-target);
  padding: 0 var(--bc-space-4);
  border: 0; background: transparent;
  color: var(--bc-text-secondary);
  font: 700 .875rem/1.4286 var(--font-ui);
  cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.bc-mode__opt::before { content: ""; position: absolute; inset: 4px; border-radius: 10px; background: transparent; transition: background-color var(--bc-duration-touch) ease; }
.bc-mode__opt > * { position: relative; }
.bc-mode__opt.is-on { color: var(--bc-text); }
.bc-mode__opt.is-on::before { background: var(--bc-surface-raised); }
.bc-mode__opt.is-on .bc-icon { color: var(--bc-accent); }

/* Cabeçalho */
.bc-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--bc-space-4); }
.bc-header__brand { display: grid; gap: var(--bc-space-2); padding-top: var(--bc-space-2); }
.bc-header__sub { color: var(--bc-text-secondary); }
.bc-header__info { margin: -4px -12px 0 0; }

/* Pôster (kit: .bc-poster) */
.bc-poster { display: block; width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: var(--bc-radius-poster); background: var(--bc-surface); }

/* Deck */
.bc-deck { display: grid; gap: var(--bc-space-4); }
.bc-deck__poster { position: relative; width: 100%; max-width: 310px; margin-inline: auto; }
.bc-deck__details { position: absolute; top: 6px; right: 6px; }
.bc-deck__info { display: grid; gap: var(--bc-space-1); }
.bc-deck__actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--bc-space-3); margin-top: var(--bc-space-2); }
.bc-deck__note { text-align: center; }

/* Grade (kit: .bc-poster-grid, .bc-poster-vote) */
.bc-poster-grid { display: grid; grid-template-columns: repeat(var(--bc-grid-columns), minmax(0, 1fr)); gap: var(--bc-grid-gap); }
@media (max-width: 359px) { .bc-poster-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bc-tile { position: relative; }
.bc-poster-vote { position: relative; display: block; width: 100%; padding: 0; background: transparent; border: 0; border-radius: var(--bc-radius-poster); color: inherit; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.bc-poster-vote[aria-pressed="true"] { outline: 2px solid var(--bc-accent); outline-offset: 2px; }
.bc-poster-vote[aria-pressed="true"]:focus-visible { outline-width: 4px; outline-offset: 4px; }
.bc-tile__seal {
  position: absolute; right: 6px; bottom: 6px;
  display: grid; place-items: center;
  width: 28px; height: 28px;
  border-radius: var(--bc-radius-pill);
  background: var(--bc-accent); color: var(--bc-on-accent);
  animation: bc-seal var(--bc-duration-vote) var(--bc-ease-out) both;
}
.bc-tile__details { position: absolute; top: -8px; right: -8px; }
@keyframes bc-seal { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: scale(1); } }

/* Toast */
.bc-toast {
  box-sizing: border-box;
  display: flex; align-items: center; gap: var(--bc-space-3);
  min-height: var(--bc-touch-target);
  padding: 0 var(--bc-space-1) 0 var(--bc-space-4);
  border-radius: var(--bc-radius-control);
  background: var(--bc-surface);
}
.bc-toast__icon { display: inline-flex; color: var(--bc-accent); }
.bc-toast__msg { flex: 1; color: var(--bc-text); }
.bc-toast__action {
  min-height: var(--bc-touch-target); padding: 0 var(--bc-space-3);
  border: 0; border-radius: var(--bc-radius-control); background: transparent;
  color: var(--bc-accent); cursor: pointer;
}

/* Aviso */
.bc-notice {
  box-sizing: border-box;
  display: flex; align-items: flex-start; gap: var(--bc-space-3);
  padding: var(--bc-space-4);
  border: 1px solid var(--bc-border);
  border-radius: var(--bc-radius-control);
}
.bc-notice__icon { display: inline-flex; color: var(--bc-text-secondary); }
.bc-notice--info .bc-notice__icon { color: var(--bc-info); }
.bc-notice--success .bc-notice__icon { color: var(--bc-success); }
.bc-notice--error .bc-notice__icon { color: var(--bc-error); }
.bc-notice__text { display: grid; gap: 2px; padding-top: 2px; }
.bc-notice__title { color: var(--bc-text); }
.bc-notice--success .bc-notice__title { color: var(--bc-success); }
.bc-notice--error .bc-notice__title { color: var(--bc-error); }

/* Bloco editorial */
.bc-statement { display: flex; flex-direction: column; flex: 1; min-height: 100%; }
.bc-statement__body { display: flex; flex-direction: column; justify-content: center; gap: var(--bc-space-4); flex: 1; padding-block: var(--bc-space-12); }
.bc-statement--center .bc-statement__body { align-items: center; text-align: center; }
.bc-statement__symbol { margin-bottom: var(--bc-space-6); }
.bc-statement__symbol.is-muted { color: var(--bc-text-secondary); }
.bc-statement__desc { color: var(--bc-text-secondary); max-width: 32ch; }
.bc-statement__actions { display: grid; gap: var(--bc-space-3); }
.bc-statement__footer { text-align: center; margin-top: var(--bc-space-4); }

/* Match */
.bc-match { display: grid; gap: var(--bc-space-6); text-align: center; }
.bc-match__head { display: grid; justify-items: center; gap: var(--bc-space-2); }
.bc-match__symbol { margin-bottom: var(--bc-space-4); }
.bc-match__support { color: var(--bc-text-secondary); }
.bc-match__title { display: grid; justify-items: center; gap: var(--bc-space-1); }
.bc-match__poster { width: 184px; margin-bottom: var(--bc-space-4); }
.bc-match__actions { display: grid; gap: var(--bc-space-2); }

/* Movimento (kit: .bc-match-enter) */
.bc-match-enter { animation: bc-match var(--bc-duration-match) var(--bc-ease-out) both; }
@keyframes bc-match { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .bc-app *, .bc-app *::before, .bc-app *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .bc-match-enter, .bc-tile__seal { animation: none !important; }
  .bc-control, .bc-icon-btn__face, .bc-mode__opt::before { transition: none !important; }
}