/* --------------------------------------------------------------------- */
/* O tema da interface, escuro e sóbrio.                                   */
/*                                                                         */
/* Toda cor da tela é declarada aqui, e em nenhum outro lugar: as regras   */
/* abaixo só citam variáveis. Trocar um tom é editar uma linha deste bloco */
/* — e é assim que se confere que a tela inteira fala de uma paleta só.    */
/*                                                                         */
/* Sóbrio, aqui, quer dizer o que uma sala de aula pede de uma tela que    */
/* fica horas aberta: um fundo quase preto de matiz fria, cartões que se   */
/* separam do fundo por um traço e não por um brilho, e um acento único,   */
/* dessaturado, reservado ao que é clicável, ao que está em foco e ao que  */
/* precisa ser lido antes do resto. Nada de halos, nada de gradientes.     */
/* --------------------------------------------------------------------- */

:root {
  color-scheme: dark;
  accent-color: var(--accent);

  /* As superfícies, do fundo da página para a frente. */
  --canvas: #0d1014;
  --sunken: #10141a;
  --surface: #151a21;
  --raised: #1e242c;

  /* Os traços que separam uma superfície da seguinte. */
  --line: #262d36;
  --line-strong: #39424e;

  /* O texto, em três alturas: o que se lê, o que se rotula, o que apoia. */
  --ink: #e5e9ee;
  --ink-soft: #c6ced9;
  --muted: #8e9aa9;
  --on-accent: #f2f4fb;

  /* O acento, um só: claro quando é texto, cheio quando é botão. */
  --accent: #97a5f0;
  --accent-strong: #4a539f;
  --accent-hover: #565fb0;
  --accent-soft: #1a2033;
  --accent-line: #333e5e;

  /* Os três estados de uma execução. */
  --success: #7cc59b;
  --success-soft: #12211a;
  --success-line: #274b38;
  --danger: #e78f8f;
  --danger-quiet: #c98787;
  --danger-strong: #a13434;
  --danger-soft: #241416;
  --danger-tint: #1a1216;
  --danger-line: #4d2529;
  --warning: #d9b56d;
  --warning-soft: #221a10;
  --warning-line: #46381d;

  /* O risco de uma caixa marcada, desenhado aqui porque é cor como as outras. */
  --check-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23f2f4fb' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.4l3.1 3.1 5.9-6'/%3E%3C/svg%3E");

  /* Os gráficos saem do matplotlib desenhados sobre branco. A placa clara
     atrás da imagem é o que impede que uma figura opaca vire uma ilha
     recortada no meio de um cartão escuro. */
  --plate: #e9edf2;

  /* Profundidade é sombra preta e traço, nunca cor derramada. */
  --shadow-card: 0 .75rem 2rem rgb(0 0 0 / 35%);
  --shadow-soft: 0 .15rem .5rem rgb(0 0 0 / 30%);
  --shadow-dialog: 0 1.5rem 4rem rgb(0 0 0 / 60%);
  --focus-ring: 0 0 0 3px rgb(151 165 240 / 20%);
  --backdrop: rgb(5 7 10 / 72%);
  --topbar: rgb(13 16 20 / 88%);

  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--canvas);
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: var(--canvas); }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .55; }
a { color: inherit; }

.topbar { height: 4.5rem; padding: 0 max(1.25rem, calc((100vw - 70rem) / 2)); display: flex; align-items: center; justify-content: space-between; background: var(--topbar); border-bottom: 1px solid var(--line); backdrop-filter: blur(12px); }
.brand { display: flex; align-items: center; gap: .8rem; text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: .75rem; border: 1px solid var(--accent-line); background: var(--accent-soft); color: var(--accent); font-weight: 800; }
.brand strong, .brand small { display: block; }
.brand small { color: var(--muted); font-size: .72rem; margin-top: .05rem; }
.session-actions { display: flex; align-items: center; gap: .8rem; color: var(--muted); font-size: .9rem; }

main { width: min(70rem, calc(100% - 2rem)); margin: 0 auto; padding: 3.5rem 0 5rem; }
.auth-shell { min-height: calc(100vh - 12rem); display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: clamp(2rem, 7vw, 7rem); }
.intro h1, .page-heading h1 { margin: .35rem 0 1rem; font-size: clamp(2.35rem, 5vw, 4.6rem); line-height: 1.02; letter-spacing: -.045em; }
.intro p:not(.eyebrow) { color: var(--muted); font-size: 1.08rem; line-height: 1.75; max-width: 36rem; }
.eyebrow { color: var(--accent); font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 .35rem; }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: 1.25rem; box-shadow: var(--shadow-card); }
.auth-card { padding: 1.25rem; }
.tabs { display: grid; grid-template-columns: 1fr 1fr; gap: .25rem; padding: .25rem; margin-bottom: 1.2rem; border-radius: .8rem; background: var(--sunken); }
.tab { border: 0; padding: .7rem; border-radius: .6rem; background: transparent; color: var(--muted); font-weight: 700; }
.tab.active { background: var(--raised); color: var(--ink); box-shadow: var(--shadow-soft); }
.stack { display: grid; gap: 1rem; }
.stack.compact { max-width: 42rem; }
label { display: grid; gap: .42rem; color: var(--ink-soft); font-size: .86rem; font-weight: 700; }
input, select { width: 100%; border: 1px solid var(--line-strong); border-radius: .72rem; background: var(--sunken); color: var(--ink); padding: .78rem .85rem; outline: none; }
input:focus, select:focus { border-color: var(--accent); box-shadow: var(--focus-ring); }
/* O botão que abre o seletor de arquivos é desenhado pelo navegador, e um
   navegador que ignore 'color-scheme' o desenharia claro no meio do escuro. */
input[type="file"]::file-selector-button { margin-right: .7rem; padding: .35rem .7rem; border: 1px solid var(--line-strong); border-radius: .5rem; background: var(--raised); color: var(--ink-soft); font: inherit; font-size: .84rem; cursor: pointer; }
input[type="file"]::file-selector-button:hover { background: var(--line); }
/* A caixa de marcar também é desenhada aqui, pelo mesmo motivo: são dezenas
   delas na caixa de diálogo do experimento, e uma caixa clara no meio de um
   fieldset escuro é a peça que denuncia um tema aplicado pela metade. */
input[type="checkbox"] { appearance: none; flex: none; width: 1.05rem; height: 1.05rem; padding: 0; border: 1px solid var(--line-strong); border-radius: .3rem; background: var(--sunken); }
input[type="checkbox"]:checked { border-color: var(--accent-strong); background: var(--accent-strong) var(--check-mark) center / .8rem no-repeat; }
input[type="checkbox"]:disabled { opacity: .55; }
.optional { color: var(--muted); font-weight: 500; }
.button { border: 0; border-radius: .72rem; padding: .75rem 1rem; font-weight: 750; transition: transform .15s ease, background .15s ease; }
.button:hover:not(:disabled) { transform: translateY(-1px); }
.button.primary { color: var(--on-accent); background: var(--accent-strong); }
.button.primary:hover:not(:disabled) { background: var(--accent-hover); }
.button.secondary { color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-line); }
.button.ghost { color: var(--ink-soft); background: transparent; border: 1px solid var(--line); }
.button.ghost:hover:not(:disabled) { background: var(--raised); }
.button.danger { color: var(--danger); background: var(--danger-soft); border: 1px solid var(--danger-line); }
.button.danger:hover:not(:disabled) { color: var(--on-accent); background: var(--danger-strong); }
.hint, .muted { color: var(--muted); line-height: 1.55; }
.hint { margin: 0; font-size: .8rem; }

.notice { position: sticky; top: .8rem; z-index: 20; margin: -2.2rem auto 1rem; padding: .85rem 1rem; border: 1px solid var(--accent-line); border-radius: .8rem; color: var(--accent); background: var(--accent-soft); box-shadow: var(--shadow-card); }
.notice.error { color: var(--danger); background: var(--danger-soft); border-color: var(--danger-line); }
.notice.success { color: var(--success); background: var(--success-soft); border-color: var(--success-line); }

.workspace { display: grid; gap: 1.25rem; }
/* Cada aba empilha os seus cartões, e a pilha tem o mesmo vão da área de
   trabalho em volta: dois cartões encostados um no outro se leem como um só,
   e o resultado de uma execução é outro assunto que não o experimento em
   edição logo acima dele. */
#authoring-view, #repository-view { display: grid; align-content: start; gap: 1.25rem; }
.page-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: .75rem; }
.page-heading h1 { font-size: clamp(2.2rem, 4vw, 3.7rem); margin-bottom: 0; }
.step-card { display: grid; grid-template-columns: 3rem 1fr; gap: 1.1rem; padding: 1.45rem; }
.step-number { display: grid; place-items: center; align-self: start; width: 2.5rem; height: 2.5rem; border-radius: .8rem; color: var(--accent); background: var(--accent-soft); font-weight: 850; }
.step-content h2, .admin-card h2, .result-card h2, .warning h2 { margin: 0 0 .5rem; font-size: 1.35rem; letter-spacing: -.02em; }
.step-content > .muted { margin-top: .4rem; }

/* Os dois caminhos da primeira tela — enviar arquivos, ou carregar um par da
   biblioteca do servidor — ficam lado a lado, e um sobre o outro no celular. */
.open-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; }
.open-choice { padding: 1rem; border: 1px solid var(--line); border-radius: .9rem; background: var(--sunken); }
.open-choice h3 { margin: 0 0 .35rem; font-size: 1.05rem; letter-spacing: -.01em; }
.open-choice .muted { margin-top: 0; font-size: .9rem; }
.row { display: flex; align-items: center; gap: .75rem; }
.row.wrap { flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.selection { color: var(--muted); font-size: .9rem; }
code { padding: .12rem .3rem; border-radius: .3rem; background: var(--raised); font-size: .9em; }

.badge { display: inline-flex; align-items: center; width: fit-content; padding: .35rem .65rem; border-radius: 99rem; font-size: .75rem; font-weight: 800; background: var(--raised); color: var(--muted); }
.badge.success { background: var(--success-soft); color: var(--success); }
.badge.failure { background: var(--danger-soft); color: var(--danger); }
.badge.neutral { background: var(--accent-soft); color: var(--accent); }
.warning { padding: 1.25rem; border-color: var(--warning-line); background: var(--warning-soft); color: var(--warning); }
.warning p { margin-bottom: 0; }

.progress-panel { margin-top: 1.25rem; padding: 1rem; border-radius: .9rem; background: var(--sunken); border: 1px solid var(--line); }
.progress-track { height: .35rem; margin-bottom: .8rem; border-radius: 1rem; background: var(--raised); overflow: hidden; }
.progress-bar { width: 35%; height: 100%; border-radius: inherit; background: var(--accent); animation: travel 1.5s ease-in-out infinite; }
#heartbeat { color: var(--muted); font-size: .8rem; }
@keyframes travel { 0% { transform: translateX(-110%); } 100% { transform: translateX(310%); } }

.result-card, .admin-card { padding: 1.45rem; }
.admin-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.metric-card { padding: 1.45rem; }
.metric-card h2 { margin: .15rem 0 .5rem; font-size: 1.05rem; }
.metric-card .muted { margin-bottom: 0; }
.metric-value { display: block; margin: .25rem 0 0; font-size: clamp(2.8rem, 7vw, 4.8rem); line-height: 1; letter-spacing: -.055em; color: var(--ink); }
.result-heading { display: flex; justify-content: space-between; align-items: start; gap: 1rem; }
.summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .75rem; margin: 1rem 0; }
.summary-item { padding: .85rem; border: 1px solid var(--line); border-radius: .8rem; background: var(--sunken); }
.summary-item small, .summary-item strong { display: block; }
.summary-item small { color: var(--muted); margin-bottom: .3rem; }
.artifact-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .75rem; margin: 1rem 0; }
.artifact-gallery > .artifact-group { grid-column: 1 / -1; }
.artifact { overflow: hidden; border: 1px solid var(--line); border-radius: .8rem; background: var(--surface); }
.artifact img { display: block; width: 100%; max-height: 16rem; object-fit: contain; background: var(--plate); }
.artifact a { display: block; padding: .7rem .8rem; color: var(--accent); font-size: .82rem; font-weight: 700; overflow-wrap: anywhere; }
.artifact > .button { margin: 0 .8rem .8rem; }
details { border-top: 1px solid var(--line); padding-top: .8rem; }
summary { cursor: pointer; color: var(--muted); font-weight: 700; }
pre { max-height: 28rem; overflow: auto; padding: 1rem; border: 1px solid var(--line); border-radius: .8rem; background: var(--sunken); color: var(--ink); font: .78rem/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; }
.data-list { display: grid; gap: .65rem; margin-top: 1rem; }
.data-row, .request { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem; border: 1px solid var(--line); border-radius: .8rem; }
.data-row strong, .data-row small, .request strong, .request small { display: block; }
.data-row small, .request small { color: var(--muted); margin-top: .15rem; }
.badge.plain { background: var(--sunken); color: var(--muted); }
.account-row { flex-wrap: wrap; }
.account-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-left: auto; }
.drafting-panel { display: flex; flex-direction: column; gap: .5rem; padding: .9rem; border: 1px dashed var(--accent-line); border-radius: .8rem; background: var(--sunken); }
.drafting-panel .hint { margin: 0; }
.drafting-panel textarea { width: 100%; resize: vertical; font: inherit; }
.drafting-unavailable { padding: .8rem; border: 1px dashed var(--line); border-radius: .8rem; }
.llm-bulk { gap: .75rem; padding: .8rem; border: 1px dashed var(--line); border-radius: .8rem; }
.llm-bulk .muted { margin: 0; flex: 1 1 18rem; }
/* Uma linha da biblioteca traz uma frase inteira, e não só um nome. A grade
   mantém a identidade à esquerda, a data e o botão à direita, e a descrição
   longa não empurra o botão para uma segunda linha. */
.library-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: start; gap: .75rem; }
.library-row .experiment-description { margin-top: .3rem; }
.account-actions .button { padding: .5rem .8rem; font-size: .82rem; }
#confirm-challenge-field input { text-transform: none; }

/* --------------------------------------------------------------------- */
/* Montagem do experimento: a lista, a caixa de diálogo e os artefatos     */
/* --------------------------------------------------------------------- */

#student-view > .tabs { grid-template-columns: repeat(2, 1fr); max-width: 32rem; margin-bottom: 0; }
#editor-card { display: grid; gap: 1.1rem; padding: 1.45rem; }
#editor-card h2 { margin: 0 0 .35rem; font-size: 1.35rem; letter-spacing: -.02em; }
#editor-source { margin: 0; font-size: .88rem; }
#editor-notes { position: static; margin: 0; }
#editor-errors { margin: 0; padding: 1rem 1.25rem; }
#editor-errors h3 { margin: 0 0 .5rem; font-size: 1rem; }
.error-list { margin: 0; padding-left: 1.1rem; font-size: .84rem; line-height: 1.6; }
.error-list li { overflow-wrap: anywhere; white-space: pre-wrap; }

.experiment-row { display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: start; padding: .95rem 1rem; border: 1px solid var(--line); border-radius: .9rem; }
.experiment-row.ignored { background: var(--sunken); }
.experiment-row h3 { margin: 0 0 .3rem; font-size: 1.02rem; }
.experiment-description { margin: 0; color: var(--muted); font-size: .85rem; line-height: 1.5; }
.experiment-facts { display: flex; flex-wrap: wrap; gap: .4rem .9rem; margin: .35rem 0 0; color: var(--muted); font-size: .8rem; }
.experiment-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.experiment-actions .button { padding: .5rem .8rem; font-size: .82rem; }
.empty-state { margin: 0; padding: 1.5rem; border: 1px dashed var(--line-strong); border-radius: .9rem; color: var(--muted); text-align: center; }

/* O relatório da execução: um cartão por experimento, um bloco por alvo e, no
   alvo que falhou, o erro que o parou. */
.report-list { display: grid; gap: .8rem; margin: 1rem 0 0; }
.report-experiment { display: grid; gap: .6rem; padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: .9rem; background: var(--sunken); }
.report-experiment.failed { border-color: var(--danger-line); background: var(--danger-tint); }
.report-experiment h3 { margin: 0; font-size: 1.05rem; letter-spacing: -.01em; }
.report-experiment > .row > div > small, .report-target > .row > div > small { display: block; color: var(--muted); font-size: .78rem; margin-top: .15rem; }
.report-experiment > .experiment-facts { margin: 0; }
.report-target { display: grid; gap: .45rem; padding: .8rem .9rem; border: 1px solid var(--line); border-radius: .75rem; background: var(--surface); }
.report-target.failed { border-color: var(--danger-line); }
.report-target .experiment-facts { margin: 0; }
.experiment-facts span + span::before { content: "·"; margin-right: .55rem; color: var(--line-strong); }
.report-error { display: grid; gap: .4rem; padding: .7rem .8rem; border: 1px solid var(--danger-line); border-left-width: .25rem; border-radius: .6rem; background: var(--danger-soft); }
.report-error strong { font-size: .9rem; color: var(--danger); }
.report-error-message { margin: 0; font: .82rem/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--danger-quiet); overflow-wrap: anywhere; }
.report-error details { border-top: 0; padding-top: 0; }
.report-error summary { font-size: .8rem; }
.report-error pre { margin-top: .5rem; max-height: 18rem; }
#report-card > .hint, #download-all-hint { margin: 0; }
#download-all-hint { color: var(--muted); font-size: .8rem; }

.artifact-list { display: grid; gap: .5rem; margin-top: .75rem; }
.artifact-group { display: grid; gap: .7rem; padding: .85rem; border: 1px solid var(--line); border-radius: .8rem; background: var(--sunken); }
.artifact-group-heading { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: .3rem 1rem; }
.artifact-group-heading h4 { margin: 0; font-size: .96rem; }
.artifact-group-heading small { color: var(--muted); font-size: .76rem; overflow-wrap: anywhere; }
.artifact-group > .artifact-list, .artifact-group > .artifact-gallery { margin: 0; }
/* Uma linha da lista: o ícone que diz a espécie, o nome com a procedência, e
   as ações — abrir, quando o arquivo abre, e baixar, sempre. O que abre na tela
   é o que se destaca, e o destaque é o traço e a placa do acento, nunca um
   tamanho de letra maior. */
.artifact-line { display: flex; align-items: center; gap: .85rem; padding: .6rem .8rem; border: 1px solid var(--line); border-radius: .7rem; }
.artifact-line.featured { border-color: var(--accent-line); background: var(--accent-soft); }
.artifact-mark { display: grid; place-items: center; flex: none; width: 2.15rem; height: 2.15rem; border: 1px solid var(--line); border-radius: .6rem; background: var(--surface); color: var(--muted); }
.artifact-line.featured .artifact-mark { border-color: var(--accent-line); color: var(--accent); }
.artifact-icon { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
/* Base zero, e não o tamanho do conteúdo: é o que mantém o ícone e o nome na
   mesma linha quando o caminho é longo e a tela é estreita. */
.artifact-identity { flex: 1 1 0; min-width: 0; }
.artifact-identity strong { display: block; font-size: .86rem; overflow-wrap: anywhere; }
.artifact-identity small { display: block; margin-top: .12rem; color: var(--muted); font-size: .74rem; overflow-wrap: anywhere; }
.artifact-actions { display: flex; align-items: center; justify-content: flex-end; gap: .5rem; }
.artifact-actions .button { white-space: nowrap; }
a.button { display: inline-block; text-decoration: none; }
#report-card > h3, #result-card > h3 { margin: 1.2rem 0 .35rem; font-size: 1.05rem; }

.dialog { width: min(46rem, calc(100vw - 2rem)); max-height: calc(100vh - 3rem); padding: 0; border: 1px solid var(--line); border-radius: 1.25rem; background: var(--surface); color: var(--ink); box-shadow: var(--shadow-dialog); }
.dialog.narrow { width: min(28rem, calc(100vw - 2rem)); }
.dialog::backdrop { background: var(--backdrop); }
.dialog > form { max-height: calc(100vh - 3rem); overflow: auto; padding: 1.45rem; }
.dialog h2 { margin: 0; font-size: 1.3rem; letter-spacing: -.02em; }
.dialog fieldset { margin: 0; padding: 1rem; border: 1px solid var(--line); border-radius: .9rem; }
.dialog legend { padding: 0 .4rem; color: var(--accent); font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.dialog fieldset fieldset { margin-top: .8rem; }
.dialog textarea { width: 100%; border: 1px solid var(--line-strong); border-radius: .72rem; padding: .7rem .85rem; font: inherit; background: var(--sunken); color: var(--ink); resize: vertical; }
.dialog textarea:focus { border-color: var(--accent); box-shadow: var(--focus-ring); outline: none; }
.field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .8rem; }
.check-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .35rem .9rem; }
label.inline, .check-grid label { display: flex; align-items: center; gap: .5rem; font-weight: 600; font-size: .86rem; }
label.inline input:not([type="checkbox"]), .check-grid input:not([type="checkbox"]) { width: auto; }
.check-grid .signature { color: var(--muted); font-weight: 400; font-size: .8rem; }
/* A função que o inspetor não conseguiu ler mostra o motivo no lugar da
   assinatura: é uma advertência, e não uma descrição do que ela recebe. A linha
   dela atravessa a grade inteira, porque o motivo é uma frase. */
.check-grid label.refused-target { grid-column: 1 / -1; flex-wrap: wrap; }
.check-grid .signature.refused { color: var(--warning); font-weight: 600; }
.check-grid label.refused-target .signature.refused { flex-basis: 100%; margin-left: 1.6rem; }
#draft-observables { display: grid; gap: .8rem; }
#draft-observables:not(:empty) { margin-bottom: .9rem; }
.observable-group > strong { display: block; margin-bottom: .35rem; font-size: .82rem; }
.dialog fieldset > .field-grid + label.inline { margin-top: .8rem; }
.dialog .draft-advanced { margin-top: .9rem; }
.dialog .draft-advanced > .hint { margin: .55rem 0 .8rem; }
.dialog fieldset > label.inline + label.inline { margin-top: .45rem; }
.dialog fieldset > .check-grid + label.inline { margin-top: .9rem; }
.dialog fieldset > label.inline + .hint { margin-top: .3rem; }
/* Uma resposta que ainda não é possível fica visivelmente desligada, e a frase
   ao lado dela diz o que falta para que passe a ser. */
label.inline:has(input:disabled) { color: var(--muted); }
.dialog fieldset > .hint + #draft-observables { margin-top: .9rem; }
.row.end { justify-content: flex-end; }

/* O que a função recebe: uma linha por argumento da chamada. */
.button.small { padding: .4rem .7rem; font-size: .78rem; border-radius: .6rem; }
.argument-block { margin-top: 1rem; }
.argument-title { font-size: .86rem; }
.argument-list { display: grid; gap: .7rem; margin: .6rem 0 .7rem; }
.argument-row { display: grid; gap: .6rem; padding: .85rem; border: 1px solid var(--line); border-radius: .8rem; background: var(--sunken); }
.argument-row .argument-name { color: var(--accent); font-size: .82rem; letter-spacing: -.01em; }
.argument-row > label { font-size: .84rem; }
.argument-row .hint { margin-top: .4rem; }
.argument-row .field-grid { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
.call-preview { display: flex; align-items: baseline; flex-wrap: wrap; gap: .5rem; padding: .7rem .85rem; border: 1px solid var(--accent-line); border-radius: .7rem; background: var(--accent-soft); }
.call-label { color: var(--accent); font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
/* Uma chamada por função escolhida quer uma linha por função: 'pre-wrap' é o
   que preserva as quebras que a tela escreve, sem desistir de quebrar sozinha
   uma linha longa demais para a caixa. */
.call-preview code { color: var(--ink); font-size: .86rem; overflow-wrap: anywhere; white-space: pre-wrap; }
.argument-block > .dialog-error { margin-top: .6rem; }
/* A entrada de cada função analisada, quando elas não recebem a mesma coisa: a
   barra da esquerda é o que separa uma seção da seguinte. */
.per-target-section { display: grid; gap: .7rem; margin-bottom: .9rem; padding-left: .9rem; border-left: 3px solid var(--accent-line); }
.per-target-heading { margin-bottom: .15rem; }
.per-target-heading .argument-title { font-size: .84rem; color: var(--accent); }
/* A entrada que é do experimento, e não daquela função. */
.argument-row .shared-note { color: var(--accent); }
.dialog-error { margin: 0; padding: .75rem .9rem; border: 1px solid var(--danger-line); border-radius: .7rem; color: var(--danger); background: var(--danger-soft); font-size: .85rem; white-space: pre-wrap; }

/* As estruturas de uma inspeção são linhas repetíveis: objeto, plug-in e as
   opções que esse plug-in recebe. */
.structure-list { display: grid; gap: .7rem; margin: .7rem 0; }
.structure-row { display: grid; gap: .7rem; padding: .85rem; border: 1px solid var(--line); border-radius: .8rem; background: var(--sunken); }
.structure-row > label { font-size: .84rem; }
.structure-row textarea { font: .78rem/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; }

/* --------------------------------------------------------------------- */
/* Invariantes                                                            */
/*                                                                        */
/* Uma propriedade satisfeita e uma propriedade violada precisam ser       */
/* distinguíveis de longe, porque é isso que se projeta em uma aula: a     */
/* borda esquerda dá a cor, e a faixa de quadrados mostra, em uma linha,   */
/* em que iteração a propriedade virou.                                    */
/* --------------------------------------------------------------------- */
.invariant-list { display: grid; gap: .8rem; margin-bottom: 1.4rem; }
.invariant-item { display: grid; gap: .6rem; padding: .9rem 1rem; border: 1px solid var(--line); border-left: 4px solid var(--line-strong); border-radius: .8rem; background: var(--sunken); }
.invariant-item.success { border-left-color: var(--success); }
.invariant-item.failure { border-left-color: var(--danger); }
.invariant-expression { display: block; font-size: .95rem; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.invariant-item small { color: var(--muted); font-size: .76rem; }
.invariant-violation { display: grid; gap: .4rem; padding: .7rem .85rem; border: 1px solid var(--danger-line); border-radius: .7rem; background: var(--danger-tint); }
.invariant-violation > strong { color: var(--danger); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }
.invariant-state { display: grid; grid-template-columns: auto 1fr; gap: .2rem .8rem; margin: 0; font-size: .85rem; }
.invariant-state dt { color: var(--muted); font-weight: 600; }
.invariant-state dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.invariant-error { margin: 0; color: var(--warning); font-size: .85rem; }
.invariant-timeline summary, .invariant-sizes summary { cursor: pointer; color: var(--accent); font-size: .84rem; font-weight: 700; }
.invariant-strip { display: flex; flex-wrap: wrap; gap: 2px; margin: .5rem 0; }
.invariant-cell { width: .7rem; height: 1.1rem; border-radius: 2px; background: var(--raised); }
.invariant-cell.true { background: var(--success); }
.invariant-cell.false { background: var(--danger); }
.invariant-cell.error { background: var(--warning); }
.invariant-table { width: 100%; border-collapse: collapse; margin-top: .4rem; font-size: .82rem; }
.invariant-table th { padding: .3rem .5rem; border-bottom: 1px solid var(--line); color: var(--muted); font-weight: 700; text-align: left; }
.invariant-table td { padding: .25rem .5rem; border-bottom: 1px solid var(--line); color: var(--ink-soft); overflow-wrap: anywhere; }
.invariant-table tr.violated td { color: var(--danger); }
.invariant-table tr.errored td { color: var(--warning); }
/* Uma seção de observação que a análise escolhida não lê continua visível — o
   docente precisa ver o que o código declara —, e apagada, porque marcá-la ali
   não valeria nada. */
.observable-group.gated { opacity: .55; }

footer { width: min(70rem, calc(100% - 2rem)); margin: 0 auto; padding: 1.5rem 0 2rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .8rem; text-align: center; }
[hidden] { display: none !important; }

@media (max-width: 760px) {
  main { padding-top: 2rem; }
  .auth-shell { grid-template-columns: 1fr; min-height: auto; }
  .intro h1 { font-size: 2.7rem; }
  .page-heading { align-items: start; flex-direction: column; }
  .step-card { grid-template-columns: 1fr; }
  .open-choices { grid-template-columns: 1fr; }
  .admin-grid { grid-template-columns: 1fr; }
  .request { align-items: start; }
  .experiment-row { grid-template-columns: 1fr; }
  .account-row { align-items: start; }
  .account-actions { margin-left: 0; }
  .library-row { grid-template-columns: 1fr; }
  .artifact-line { align-items: flex-start; flex-wrap: wrap; }
  .artifact-actions { width: 100%; justify-content: flex-start; }
  .dialog > form { padding: 1rem; }
  .session-actions span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .progress-bar { animation-duration: 3s; }
  .button { transition: none; }
}