/* Painel operacional server-rendered: o shell organiza a leitura sem decidir por ela. */
:root {
  --grafite: #17201C;
  --papel: #F7F8F6;
  --branco: #FFFFFF;
  --quadra: #176B4D;
  --ambar: #A66300;
  --saibro: #B43C32;
}

* { box-sizing: border-box; }
body {
  min-width: 0;
  margin: 0;
  background: var(--papel);
  color: var(--grafite);
  font: 16px/1.5 -apple-system, system-ui, sans-serif;
}
a { color: var(--quadra); }
button, input, select, textarea { font: inherit; }

.app-shell { display: grid; grid-template-columns: 16rem minmax(0, 1fr); min-height: 100vh; }
.sidebar {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
  min-width: 0;
  padding: 1rem;
  border-right: 1px solid var(--grafite);
  background: var(--branco);
}
.brand { display: inline-flex; align-items: center; gap: .625rem; min-height: 2.75rem; color: var(--grafite); font-weight: 700; text-decoration: none; }
.brand-mark { display: grid; width: 2.25rem; height: 2.25rem; place-items: center; background: var(--quadra); color: var(--branco); font-size: .8125rem; }
.nav-disclosure { min-width: 0; }
.nav-disclosure > summary { display: none; }
.nav-disclosure:not([open]) > .primary-nav { display: block; }
.primary-nav { min-width: 0; margin-top: 1.5rem; }
.nav-group + .nav-group { margin-top: 1.25rem; }
.nav-group ul { display: grid; gap: .25rem; margin: 0; padding: 0; list-style: none; }
.nav-group a { display: flex; align-items: center; min-height: 2.75rem; padding: .5rem .75rem; border-left: .25rem solid transparent; color: var(--grafite); font-weight: 600; text-decoration: none; }
.nav-group a:hover { background: var(--papel); }
.nav-group a[aria-current="page"] { border-left-color: var(--quadra); background: var(--papel); color: var(--quadra); }
.account-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem; align-items: center; margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--grafite); }
.account-name { min-width: 0; overflow-wrap: anywhere; font-size: .875rem; }

.workspace { min-width: 0; }
main, footer { width: min(100%, 72rem); margin-inline: auto; }
main { padding: 2rem; }
footer { margin-top: 2rem; padding: 1rem 2rem 2rem; border-top: 1px solid var(--grafite); color: color-mix(in srgb, var(--grafite) 72%, var(--papel)); font-size: .875rem; }
.public-shell { display: grid; min-height: 100vh; place-items: center; }
.public-shell .workspace { width: min(100%, 36rem); }
.public-shell main { padding: 2rem; }
.public-brand { display: inline-flex; align-items: center; gap: .625rem; margin: 1.5rem 2rem 0; color: var(--grafite); font-weight: 700; text-decoration: none; }

h1 { margin: 0 0 1.5rem; font-size: 1.75rem; }
h2 { margin-top: 2rem; font-size: 1.125rem; }
.status-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .75rem; margin: 1rem 0; }
.status-strip div { min-width: 0; padding: .75rem; border: 1px solid var(--grafite); background: var(--branco); }
.status-strip dt { color: color-mix(in srgb, var(--grafite) 70%, var(--papel)); font-size: .8125rem; font-weight: 600; }
.status-strip dd { margin: .125rem 0 0; font-size: 1.25rem; font-weight: 700; }
.cartao { margin: 1rem 0; padding: 1rem; border: 1px solid var(--grafite); border-radius: .5rem; background: var(--branco); }
.auth-form { display: grid; gap: .75rem; margin: 1rem 0; padding: 1rem; border: 1px solid var(--grafite); border-radius: .5rem; background: var(--branco); }
.auth-form label { margin: 0; }
.auth-form input { max-width: none; }
.auth-form button { width: 100%; }
.auth-links { display: grid; gap: .5rem; margin-top: 1rem; }
.auth-note { color: color-mix(in srgb, var(--grafite) 72%, var(--papel)); }
.success { color: var(--quadra); font-weight: 600; }
.reset-code { margin: 1rem 0 1.5rem; padding: 1rem 0; border-block: 2px solid var(--ambar); }
.reset-code h2 { margin-top: 0; }
.reset-code output { display: block; width: fit-content; max-width: 100%; padding: .5rem; border: 1px solid var(--grafite); background: var(--branco); font: 600 1rem/1.5 ui-monospace, monospace; overflow-wrap: anywhere; }
.cartao.alerta { border-color: var(--saibro); }
.rolagem, .table-scroll { overflow-x: auto; min-width: 0; border-right: .5rem solid var(--grafite); scrollbar-gutter: stable; }
table { width: max-content; min-width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { padding: .5rem; border-bottom: 1px solid var(--grafite); text-align: left; white-space: nowrap; }
tr.revisar td:first-child { color: var(--ambar); font-weight: 700; }
tr.sem-valor, tr.bloqueada { opacity: .65; }
tr.vitoria td:first-child { color: var(--quadra); font-weight: 700; }
tr.derrota td:first-child, tr.bloqueada td:last-child { color: var(--saibro); font-weight: 700; }
.leitura-ausente, .leitura-andando { color: color-mix(in srgb, var(--grafite) 62%, var(--papel)); }
.leitura-andando { font-style: italic; }
.leitura-falhou, .erro, .error { color: var(--saibro); font-weight: 600; }
label { display: block; margin: .5rem 0; }
input, select, textarea { width: 100%; max-width: 24rem; min-height: 2.75rem; padding: .5rem; border: 1px solid var(--grafite); border-radius: .25rem; background: var(--branco); color: var(--grafite); }
textarea { max-width: 100%; resize: vertical; }
button { min-height: 2.75rem; padding: .5rem 1rem; border: 1px solid var(--quadra); border-radius: .25rem; background: var(--quadra); color: var(--branco); cursor: pointer; }
button.secundario { border-color: var(--grafite); background: var(--grafite); }
form.inline { display: inline-flex; gap: .5rem; align-items: flex-end; margin-right: .5rem; }
pre { overflow-x: auto; padding: .5rem; border: 1px solid var(--grafite); background: var(--branco); font-size: .8rem; }
.game-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .75rem; }
.game-meta div, .teaching-controls > *, .analysis-item { min-width: 0; }
.game-meta dt, .analysis-state dt { color: color-mix(in srgb, var(--grafite) 65%, var(--papel)); font-size: .8rem; font-weight: 600; }
.game-meta dd, .analysis-state dd { margin: 0; overflow-wrap: anywhere; }
.teaching-form { max-width: 44rem; }
.teaching-controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .75rem; }
.analysis-list { display: grid; gap: 1rem; }
.analysis-item header { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; }
.analysis-notes { white-space: pre-wrap; overflow-wrap: anywhere; }
.analysis-state { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .25rem .75rem; }
.analysis-state code { overflow-wrap: anywhere; }
.opiniao { color: color-mix(in srgb, var(--grafite) 78%, var(--papel)); }
.analise-revisar, .analise-atencao { color: var(--ambar); font-weight: 700; }
.analise-revisar .opiniao, .analise-atencao .opiniao { color: inherit; }
.analise-sem-valor, .analise-sem-cobertura { opacity: .72; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
:focus-visible { outline: 3px solid var(--ambar); outline-offset: 3px; }

@media (max-width: 760px) {
  .app-shell { display: block; }
  .sidebar { position: static; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .75rem; height: auto; padding: .75rem 1rem; border-right: 0; border-bottom: 1px solid var(--grafite); }
  .nav-disclosure { grid-column: 1 / -1; }
  .nav-disclosure > summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 2.75rem; padding: .5rem .75rem; border: 1px solid var(--grafite); cursor: pointer; }
  .nav-disclosure > summary strong { min-width: 0; overflow-wrap: anywhere; color: var(--quadra); }
  .nav-disclosure:not([open]) > .primary-nav { display: none; }
  .primary-nav { max-height: 60vh; margin: .5rem 0 0; overflow-y: auto; }
  .nav-group { display: block; }
  .nav-group + .nav-group { margin: 0; }
  .nav-group ul { display: grid; gap: .25rem; }
  .nav-group a { border-left: .25rem solid transparent; }
  .nav-group a[aria-current="page"] { border-left-color: var(--quadra); }
  .account-actions { grid-column: 2; grid-row: 1; margin: 0; padding: 0; border: 0; }
  .account-name { display: none; }
  .teaching-controls { grid-template-columns: 1fr; }
  main { padding: 1.5rem 1rem; }
  .public-brand { margin: 1rem 1rem 0; }
  footer { padding: 1rem; }
  form.inline { display: flex; flex-wrap: wrap; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto; transition-duration: 0.01ms; animation-duration: 0.01ms; animation-iteration-count: 1; }
}