/* Docraft — documentação publicada em /docs/<dono>/<nome> (.okf/design-system/componentes.md, "Manual").
 * Usa apenas os tokens de tokens.css; as cores do cliente (palette do .docraft.yml) sobrescrevem os tokens. */

.manual { min-height: 100vh; background: var(--bg); }
.manual-header {
  position: sticky; top: 0; z-index: 10; background: var(--surface);
  border-bottom: var(--border-width) solid var(--border); padding: calc(var(--space) * 1.5) 16px;
}
.manual-bar { max-width: 72rem; margin: 0 auto; display: flex; align-items: center; gap: calc(var(--space) * 1.5); }
.manual-brand {
  display: flex; align-items: center; gap: var(--space); color: var(--text); text-decoration: none; white-space: nowrap;
  font-family: var(--font-heading); font-weight: var(--heading-weight); letter-spacing: var(--heading-tracking);
}
.manual-brand .icon { color: var(--primary); }
.manual-logo { display: block; height: 32px; width: auto; max-width: 160px; object-fit: contain; }
.manual-search { flex: 1; min-width: 0; position: relative; }
.manual-search .icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-muted); }
.manual-search input {
  width: 100%; font: inherit; font-size: 16px; color: var(--text); background: var(--surface-2);
  border: var(--border-width) solid transparent; border-radius: 999px; padding: 8px 14px 8px 36px; outline: none;
}
.manual-search input:focus { border-color: var(--primary); background: var(--surface); box-shadow: var(--focus); }
.manual-topics-toggle { display: none; }

.manual-layout {
  max-width: 72rem; margin: 0 auto; display: grid; grid-template-columns: 16rem minmax(0, 1fr);
  gap: calc(var(--space) * 5); padding: calc(var(--space) * 3) 16px calc(var(--space) * 8);
}
.manual-nav { position: sticky; top: 5rem; align-self: start; max-height: calc(100dvh - 6.5rem); overflow-y: auto; }
.manual-nav-group h2 {
  font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted);
  margin: calc(var(--space) * 2.5) 0 calc(var(--space) * .5);
}
.manual-nav-group:first-child h2 { margin-top: 0; }
.manual-nav-group ul { list-style: none; margin: 0; padding: 0; }
.manual-nav-group a {
  display: block; padding: 5px 10px; border-radius: var(--radius); color: var(--text); text-decoration: none;
  font-size: .92rem; line-height: 1.35;
}
.manual-nav-group a:hover { background: var(--surface-2); }
.manual-nav-group a[aria-current="page"] { background: var(--primary-soft); color: var(--primary); font-weight: 600; }

.manual-status { color: var(--text-muted); font-size: .9rem; margin: 0 0 calc(var(--space) * 2); min-height: 1.4em; }
.manual-topic { padding-bottom: calc(var(--space) * 4); margin-bottom: calc(var(--space) * 4); border-bottom: var(--border-width) solid var(--border); }
.manual-group { margin: 0; color: var(--primary); font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; }
.manual-topic h1 { font-size: 1.9rem; line-height: 1.2; margin: 4px 0 6px; }
.manual-lead { color: var(--text-muted); margin-top: 0; font-size: 1.05rem; }
.manual-topic h3 { font-size: 1.1rem; margin: calc(var(--space) * 3.5) 0 var(--space); }
.manual-topic code { background: var(--code-bg); padding: 1px 6px; border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: .88em; }
ol.manual-steps { list-style: none; counter-reset: step; padding: 0; }
ol.manual-steps > li { counter-increment: step; position: relative; padding-left: 2.6rem; margin: 0 0 calc(var(--space) * 1.75); }
ol.manual-steps > li::before {
  content: counter(step); position: absolute; left: 0; top: 1px; width: 1.8rem; height: 1.8rem; border-radius: 999px;
  /* Na cor principal; os passos marcados num print, na cor das marcações, como o número no print. */
  background: var(--primary); color: var(--primary-contrast); font-weight: 700; font-size: .9rem; display: grid; place-items: center;
}
ol.manual-steps > li.manual-step-marked::before { background: var(--mark, var(--danger)); color: var(--mark-text, var(--primary-contrast)); }
.manual-topic li > ul, .manual-topic li > ol { margin: 6px 0; }
.manual-empty { padding: calc(var(--space) * 4) 0; color: var(--text-muted); }

/* Prints: celular ou computador, conforme a escolha do leitor */
.manual-shot { margin: calc(var(--space) * 1.5) 0 calc(var(--space) * 2); }
.manual-shot img {
  display: block; height: auto; max-width: 100%; border-radius: var(--radius-lg);
  border: var(--border-width) solid var(--border); box-shadow: var(--shadow);
}
.manual-shot-mobile img { width: 20rem; }
.manual-shot-desktop img { width: 100%; }
.manual-shot figcaption { margin-top: var(--space); font-size: .9rem; }
.manual-shot figcaption p { margin: 0 0 6px; color: var(--text-muted); }
.manual-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.manual-legend li { display: flex; gap: 8px; align-items: flex-start; }
.manual-badge {
  flex: none; width: 1.4rem; height: 1.4rem; border-radius: 999px; display: grid; place-items: center;
  background: var(--mark, var(--danger)); color: var(--mark-text, var(--primary-contrast)); font-weight: 700; font-size: .78rem;
}
.manual-view-switch { display: inline-flex; gap: 4px; padding: 4px; margin: 4px 0 var(--space); border-radius: 999px; background: var(--surface-2); }
.manual-view-switch button {
  display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer;
  color: var(--text-muted); background: transparent; border: 0; border-radius: 999px; padding: 6px 14px;
}
.manual-view-switch button[aria-pressed="true"] { background: var(--surface); color: var(--primary); box-shadow: var(--shadow-sm); }
.manual-view-switch button:focus-visible { outline: none; box-shadow: var(--focus); }
.manual-only {
  display: inline-flex; align-items: center; gap: 6px; margin: 4px 0 var(--space); padding: 5px 12px; border-radius: 999px;
  background: var(--primary-soft); color: var(--primary); font-size: .88rem; font-weight: 600;
}
.manual[data-view="mobile"] .manual-topic[data-views~="mobile"][data-views~="desktop"] .manual-shot-desktop,
.manual[data-view="desktop"] .manual-topic[data-views~="mobile"][data-views~="desktop"] .manual-shot-mobile { display: none; }

/* Resultados da pesquisa, no lugar do guia */
.manual-results { margin-bottom: calc(var(--space) * 4); }
.manual-result-list { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(var(--space) * 1.5); }
.manual-result-list li {
  padding: 14px 16px; background: var(--surface); border: var(--border-width) solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
}
.manual-result-list h2 { font-size: 1.1rem; margin: 2px 0 4px; }
.manual-result-list a { color: var(--text); text-decoration: none; }
.manual-result-list a:hover { color: var(--primary); text-decoration: underline; }
.manual-result-list .manual-lead { margin: 0; font-size: .95rem; }

/* Anterior e próximo, no fim do guia */
.manual-pager { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--space) * 1.5); margin-top: calc(var(--space) * 5); }
.manual-pager-link {
  display: grid; gap: 2px; padding: 12px 16px; border: var(--border-width) solid var(--border); border-radius: var(--radius-lg);
  background: var(--surface); color: var(--text); text-decoration: none;
}
.manual-pager-link:hover { border-color: var(--primary); }
.manual-pager-link span { font-size: .8rem; color: var(--text-muted); }
.manual-pager-link strong { color: var(--primary); font-weight: 600; }
.manual-pager-next { grid-column: 2; text-align: right; }
.manual-footer { color: var(--text-muted); font-size: .85rem; }

@media (max-width: 860px) {
  .manual-layout { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: calc(var(--space) * 2); }
  .manual-brand span { display: none; }
  .manual-topics-toggle { display: inline-flex; }
  .manual-nav {
    display: none; position: static; max-height: none; margin-bottom: calc(var(--space) * 3);
    padding-bottom: calc(var(--space) * 2); border-bottom: var(--border-width) solid var(--border);
  }
  .manual-nav-open .manual-nav { display: block; }
  .manual-topic h1 { font-size: 1.5rem; }
  .manual-pager { grid-template-columns: minmax(0, 1fr); }
  .manual-shot-mobile img { width: min(20rem, 100%); }
  .manual-pager-next { grid-column: auto; }
}

/* Perfis (.okf/definitions/perfis.md): "Ver como" no topo, "Para:" no guia e o selo nos passos de um perfil. */
.manual-role-filter { display: inline-flex; align-items: center; gap: var(--space); font-size: .85rem; color: var(--text-muted); white-space: nowrap; }
.manual-role-filter .select { width: auto; padding: 6px 10px; font-size: .85rem; }
.manual-roles { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 var(--space); color: var(--text-muted); font-size: .9rem; }
.manual-role { vertical-align: middle; margin-right: 2px; }
@media (max-width: 860px) {
  .manual-role-filter span { display: none; }
}

/* Entrada na documentação privada (.okf/definitions/leitores.md) */
.reader-gate { min-height: 100vh; display: grid; place-items: center; padding: calc(var(--space) * 3) 16px; background: var(--bg); }
.reader-gate-card { width: min(440px, 100%); padding: calc(var(--space) * 3); display: grid; gap: calc(var(--space) * 1.5); }
.reader-gate-card h1 { font-size: 1.4rem; margin: 0; }
.reader-gate-card p { margin: 0; }
.reader-gate-brand { display: flex; align-items: center; gap: 8px; color: var(--primary); font-weight: 600; }
.reader-gate-form { display: grid; gap: calc(var(--space) * 1); }
.reader-gate-form .field { margin: 0; }
.reader-gate-team { display: grid; gap: 8px; justify-items: start; padding-top: calc(var(--space) * 1.5); border-top: var(--border-width) solid var(--border); }
.manual-reader { display: flex; align-items: center; gap: 8px; font-size: .85rem; color: var(--text-muted); }
@media (max-width: 860px) { .manual-reader > span { display: none; } }