/* Primitivas canônicas aprovadas. Carregar depois de tokens.css. */

/* Papéis tipográficos de contexto; não criar uma nova fonte em cada página. */
.af-type-context { font: 600 var(--af-text-sm)/21px var(--af-sans); }
.af-type-caption { font: 400 var(--af-text-sm)/21px var(--af-sans); }

/* Ações */
.af-button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--af-space-2);
  min-height: var(--af-target); padding: var(--af-space-3) var(--af-space-5);
  border: 1px solid transparent; border-radius: var(--af-radius-action);
  background: var(--af-primary); color: var(--af-on-primary);
  font: 700 var(--af-text-sm)/1.3 var(--af-sans); text-align: center; text-decoration: none;
  cursor: pointer; transition: opacity var(--af-motion-fast), background var(--af-motion-fast), color var(--af-motion-fast), border-color var(--af-motion-fast);
}
.af-button:hover:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]) { opacity: .86; }
.af-button:is(:disabled, [aria-disabled="true"]) { opacity: .4; cursor: not-allowed; }
.af-button:is([aria-busy="true"], [data-loading="true"]) { cursor: wait; }
.af-button--secondary { color: var(--af-text); background: var(--af-active); }
.af-button--outline { color: var(--af-text); background: transparent; border-color: var(--af-line); }
.af-button--text {
  padding: 0; border: 0; background: transparent; color: var(--af-muted);
  font-size: var(--af-text-sm); font-weight: 400; line-height: var(--af-line-height); text-decoration: underline; text-underline-offset: 5px;
}
.af-button--text:hover:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]) { color: var(--af-text); opacity: 1; }
.af-button--continue { background: var(--af-continue); color: var(--af-on-primary); }
.af-button--icon { width: var(--af-target); padding: 0; flex: none; }
.af-button--compact { min-width: 104px; padding: 11px 18px; border: 0; font-size: 13px; line-height: 1.35; }
.af-button--compact:hover:not(:disabled):not([aria-busy="true"]) { background: var(--af-primary-hover); opacity: 1; }
.af-button--compact:disabled { cursor: wait; opacity: .6; }
.af-button > svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }

/* Seletores: radio segmentado e tablist são contratos distintos. */
.af-segmented { display: grid; grid-template-columns: 1fr 1fr; padding: var(--af-space-1); gap: var(--af-space-1); border-radius: var(--af-radius-card); background: color-mix(in srgb, var(--af-text) 6%, var(--af-panel)); }
.af-segmented label { position: relative; cursor: pointer; min-width: 0; }
.af-segmented label > span { display: flex; min-height: var(--af-target); align-items: center; justify-content: center; gap: var(--af-space-1); border: 1px solid transparent; border-radius: var(--af-radius-field); color: var(--af-muted); }
.af-segmented svg { visibility: hidden; width: 16px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; }
.af-segmented input:checked + span { background: var(--af-panel); border-color: var(--af-muted); color: var(--af-text); }
.af-segmented input:checked + span svg { visibility: visible; }
.af-segmented input:focus-visible + span { outline: var(--af-focus-width) solid var(--af-link); outline-offset: 2px; }
.af-segmented input:disabled + span { opacity: .4; cursor: not-allowed; }
.af-tabs { display: flex; gap: var(--af-space-1); padding: var(--af-space-1); border: 1px solid var(--af-line); border-radius: var(--af-radius-action); width: fit-content; max-width: 100%; }
.af-tabs button { min-height: var(--af-target); padding: var(--af-space-2) var(--af-space-5); background: transparent; border: 0; border-radius: var(--af-radius-action); color: var(--af-muted); font: 600 var(--af-text-sm) var(--af-sans); cursor: pointer; }
.af-tabs [aria-selected="true"] { background: var(--af-active); color: var(--af-text); }
.af-tabs button:disabled { opacity: .4; cursor: not-allowed; }

/* Superfícies */
.af-card { min-width: 0; border: 1px solid var(--af-line); border-radius: var(--af-radius-card); overflow: hidden; background: var(--af-panel); }
.af-card__art { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; background: var(--af-surface); }
.af-card__body { padding: var(--af-space-5); }
.af-card h3 { margin: 0 0 var(--af-space-2); font-size: var(--af-text-lg); }
.af-card p { color: var(--af-muted); font-size: var(--af-text-sm); }
.af-card--recommended { border: 2px solid var(--af-brand); border-radius: var(--af-radius-choice); }
.af-panel { padding: var(--af-space-6); background: var(--af-panel); border: 1px solid var(--af-line); border-radius: var(--af-radius-choice); }

/* Listas e linhas */
.af-list { display: grid; gap: 10px; }
.af-list-row {
  min-width: 0; display: grid; align-items: center; gap: var(--af-space-4);
  border: 1px solid var(--af-line); border-radius: var(--af-radius-card); background: var(--af-panel);
}
.af-list-row--compact {
  min-height: 68px; grid-template-columns: minmax(0, 1fr) auto;
  padding: var(--af-space-3) 14px var(--af-space-3) 18px; background: var(--af-inset);
}
.af-list-row__title { margin: 0; font-size: var(--af-text-md); line-height: 1.35; }

/* Lista de capítulos aprovada no piloto R4. */
aside.chapter-sidebar.af-chapters ol.af-list--chapters {
  list-style: none; margin: 0; border-radius: var(--af-radius-choice);
  display: grid; gap: var(--af-space-1); padding: var(--af-space-2); border: 0;
  background: color-mix(in srgb, var(--af-text) 2%, var(--af-panel));
}
aside.chapter-sidebar.af-chapters ol.af-list--chapters li + li { border: 0; }
aside.chapter-sidebar.af-chapters ol.af-list--chapters button {
  width: 100%; text-align: left; background: transparent; color: var(--af-muted);
  font-size: var(--af-text-md); font-weight: 400; border-radius: var(--af-radius-card);
  display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--af-space-3);
  align-items: center; padding: var(--af-space-3); min-height: var(--af-target);
  border: 0; line-height: 1.4;
  transition: background var(--af-motion-fast), color var(--af-motion-fast);
}
aside.chapter-sidebar.af-chapters ol.af-list--chapters button:hover { color: var(--af-text); background: color-mix(in srgb, var(--af-text) 4%, var(--af-panel)); }
aside.chapter-sidebar.af-chapters ol.af-list--chapters [aria-current] { color: var(--af-text); border-color: var(--af-line); background: color-mix(in srgb, var(--af-text) 8%, var(--af-panel)); }
.af-chapters .af-chapter-marker { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--af-radius-action); color: var(--af-muted); background: color-mix(in srgb, var(--af-text) 5%, var(--af-panel)); font-size: var(--af-text-md); font-variant-numeric: tabular-nums; }
.af-chapters .af-chapter-marker svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.af-chapters [aria-current] .af-chapter-marker { background: var(--af-text); color: var(--af-panel); }
.af-chapters .af-chapter-label { min-width: 0; }

@media (max-width: 600px) {
  .af-panel { padding: var(--af-space-5); }
  .af-list-row--compact { grid-template-columns: 1fr; }
  .af-list-row--compact .af-button { width: 100%; }
}