/* Hallmark · genre: modern-minimal · macrostructure: Long Document · theme: custom "Ordem de Serviço"
 * design-system: design.md · Docs hub (Index-First) + article (single column, sticky "Nesta página")
 * Typography only: rules, lists and tables — no cards, no icon tiles, no tinted blocks.
 * Hallmark · pre-emit critique: P5 H5 E4 S5 R5 V4
 */

/* ---------- Shared helpers ---------- */
.doc-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Status dot — the only color in the docs; meaning comes from the label next to it */
.dot {
  display: inline-block; flex: none;
  width: 0.5625rem; height: 0.5625rem; border-radius: 50%;
  background: var(--color-neutral);
  vertical-align: 0.08em;
}
.dot--blue, .dot--approved   { background: var(--color-accent); }
.dot--green, .dot--done      { background: var(--color-success); }
.dot--orange, .dot--yellow, .dot--progress { background: var(--color-warning); }
.dot--red    { background: var(--color-danger); }
.dot--purple, .dot--quote { background: var(--color-neutral); }

/* ---------- Hub: Index-First ---------- */
.hub { padding-block: var(--space-2xl) var(--space-3xl); }
.hub__head { max-width: var(--measure); }
.hub__head h1 { font-size: var(--text-display-s); }
.hub__head .lede { margin-top: var(--space-sm); }

.hub__filter { margin-top: var(--space-xl); max-width: 32rem; }
.hub__filter label { display: block; margin-bottom: var(--space-2xs); }
.hub__filter input {
  width: 100%; min-height: 2.875rem;
  padding: 0 var(--space-sm);
  font: inherit; font-size: var(--text-base); color: var(--color-ink);
  background: var(--color-card);
  border: 1.5px solid var(--color-rule);
  border-radius: var(--radius-input);
  transition: border-color var(--dur-short) var(--ease-out);
}
.hub__filter input::placeholder { color: var(--color-neutral); }
.hub__filter input:hover { border-color: var(--color-neutral); }
.hub__filter input:focus-visible { border-color: var(--color-focus); outline-offset: 1px; }
.hub__count { margin-top: var(--space-2xs); font-size: var(--text-xs); color: var(--color-neutral); min-height: 1.3em; }

.hub__group { margin-top: var(--space-2xl); }
.hub__group > h2,
.hub__more > h2 {
  font-size: var(--text-lg);
  border-top: var(--rule-strong);
  padding-top: var(--space-sm);
}
.hub__empty { margin-top: var(--space-xl); color: var(--color-muted); max-width: var(--measure); }
.hub__empty a { color: var(--color-accent); }

.hub__more { margin-top: var(--space-3xl); }

/* Ruled index — used by the hub, the help links and in-article profile lists */
.doc-index { list-style: none; margin: var(--space-sm) 0 0; padding: 0; }
.doc-index > li { border-bottom: var(--rule); }
.doc-index__link {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3xs) var(--space-md);
  align-items: baseline;
  padding: var(--space-sm) 0;
  text-decoration: none; color: var(--color-ink);
}
.doc-index__title {
  font-family: var(--font-display); font-weight: 700; font-size: var(--text-md);
  letter-spacing: -0.015em; line-height: 1.25; overflow-wrap: anywhere;
  transition: color var(--dur-short) var(--ease-out);
}
.doc-index__meta { grid-column: 2; grid-row: 1; white-space: nowrap; }
.doc-index__arrow {
  grid-column: 2; grid-row: 1;
  font-family: var(--font-mono); color: var(--color-neutral);
  transition: transform var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}
.doc-index__desc { grid-column: 1; color: var(--color-muted); font-size: var(--text-sm); max-width: var(--measure); }
.doc-index__link:hover .doc-index__title { color: var(--color-accent); }
.doc-index__link:hover .doc-index__arrow { color: var(--color-accent); transform: translateX(3px); }
.doc-index__link:focus-visible { outline-offset: 2px; }
@media (min-width: 48rem) {
  .doc-index__link { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) auto; }
  .doc-index__desc { grid-column: 2; grid-row: 1; }
  .doc-index__arrow, .doc-index__meta { grid-column: 3; }
}

/* ---------- Article: Long Document ---------- */
.doc {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "head" "toc" "body";
  padding-block: var(--space-xl) var(--space-3xl);
}
.doc__head { grid-area: head; max-width: var(--measure); }
.doc__toc  { grid-area: toc; margin-top: var(--space-lg); }
.doc__body { grid-area: body; max-width: 65ch; min-width: 0; }

.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-3xs) var(--space-2xs); }
.crumbs li { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-neutral); }
.crumbs li + li::before { content: "/"; margin-right: var(--space-2xs); color: var(--color-rule); }
.crumbs a { color: var(--color-muted); text-underline-offset: 0.2em; }
.crumbs a:hover { color: var(--color-accent); }
.crumbs [aria-current] { color: var(--color-ink); }

.doc__head h1 { margin-top: var(--space-md); font-size: var(--text-display-s); }
.doc__summary { margin-top: var(--space-sm); font-size: var(--text-md); line-height: 1.5; color: var(--color-muted); }

/* "Nesta página" — collapsible on small screens, sticky column on wide ones */
.toc { border-block: var(--rule); }
.toc summary {
  display: flex; justify-content: space-between; align-items: center;
  min-height: 2.875rem; cursor: pointer; list-style: none;
}
.toc summary::-webkit-details-marker { display: none; }
.toc summary::after {
  content: "+"; font-family: var(--font-mono); font-size: var(--text-md); color: var(--color-neutral);
  transition: transform var(--dur-short) var(--ease-out);
}
.toc[open] summary::after { transform: rotate(45deg); }
.toc ol { list-style: none; margin: 0; padding: 0 0 var(--space-sm); display: grid; }
.toc a {
  display: block; padding: 0.4rem 0 0.4rem var(--space-sm);
  border-left: 2px solid var(--color-rule);
  font-size: var(--text-sm); line-height: 1.35; color: var(--color-muted); text-decoration: none;
  transition: color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out);
}
.toc a:hover { color: var(--color-ink); border-left-color: var(--color-neutral); }
.toc a[aria-current="true"] { color: var(--color-ink); font-weight: 600; border-left-color: var(--color-accent); }

@media (min-width: 64rem) {
  .doc {
    grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
    grid-template-areas: ". head" "toc body";
    column-gap: var(--space-2xl);
    padding-top: var(--space-2xl);
  }
  .doc__toc { margin-top: var(--space-2xl); }
  .toc { position: sticky; top: 5.5rem; border: 0; max-height: calc(100vh - 7rem); overflow-y: auto; }
  .toc summary { pointer-events: none; min-height: auto; margin-bottom: var(--space-xs); }
  .toc summary::after { content: none; }
}

/* ---------- Prose inside articles ---------- */
.doc-section { margin-top: var(--space-2xl); }
.doc-section:first-child { margin-top: var(--space-xl); }
.doc-section > h2 {
  font-size: var(--text-xl);
  border-top: var(--rule-strong);
  padding-top: var(--space-sm);
}
.doc-section h3 { font-size: var(--text-md); margin-top: var(--space-lg); }
.doc-section h4 { font-size: var(--text-base); margin-top: var(--space-md); }
.doc-section p { margin-top: var(--space-sm); }
.doc-section > h2 + p, .doc-section h3 + p, .doc-section h4 + p { margin-top: var(--space-xs); }
.doc-subtitle { color: var(--color-muted); font-size: var(--text-md); line-height: 1.5; }
.doc-section ul:not([class]), .doc-section ol:not([class]) { margin: var(--space-xs) 0 0; padding-left: 1.25rem; }
.doc-section li + li { margin-top: var(--space-3xs); }
.doc-section li::marker { color: var(--color-neutral); }
.doc-section code { font-family: var(--font-mono); font-size: 0.9em; background: var(--color-paper-3); padding: 0.05em 0.3em; border-radius: 3px; overflow-wrap: anywhere; }
.doc-section a:not([class]) { color: var(--color-accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.doc-section a:not([class]):hover { text-decoration-thickness: 2px; }

/* Notes — left-ruled callouts, no fills or icons */
.note {
  margin-top: var(--space-md);
  padding: var(--space-3xs) 0 var(--space-3xs) var(--space-md);
  border-left: 2px solid var(--color-accent);
}
.note--warn { border-left: 4px solid var(--color-rule-strong); }
.note .note__title { margin: 0; font-weight: 600; }
.note .note__title + p { margin-top: var(--space-3xs); }
.note p { color: var(--color-muted); }
.note .note__title { color: var(--color-ink); }

/* Steps — ordered list with mono numbers */
.doc-steps { list-style: none; margin: var(--space-sm) 0 0; padding: 0; counter-reset: step; }
.doc-steps > li {
  counter-increment: step;
  display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: var(--space-xs);
  padding-block: var(--space-xs);
  border-top: var(--rule);
}
.doc-steps > li:last-child { border-bottom: var(--rule); }
.doc-steps > li + li { margin-top: 0; }
.doc-steps > li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 500;
  color: var(--color-accent); font-variant-numeric: tabular-nums;
  padding-top: 0.12em;
}

/* Definition rows — features, metrics, option lists */
.doc-dl { margin: var(--space-sm) 0 0; border-top: var(--rule); }
.doc-dl > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3xs) var(--space-md); padding-block: var(--space-xs); border-bottom: var(--rule); }
.doc-dl dt { font-weight: 600; overflow-wrap: anywhere; }
.doc-dl dd { margin: 0; color: var(--color-muted); }
@media (min-width: 40rem) {
  .doc-dl > div { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
}

/* Status list — dot + name + what it means */
.doc-status { list-style: none; margin: var(--space-sm) 0 0; padding: 0; border-top: var(--rule); }
.doc-status > li { display: grid; grid-template-columns: 1rem minmax(0, 1fr); gap: 0 var(--space-xs); padding-block: var(--space-xs); border-bottom: var(--rule); }
.doc-status > li + li { margin-top: 0; }
.doc-status .dot { margin-top: 0.55em; }
.doc-status strong { display: block; }
.doc-status p { margin: 0; color: var(--color-muted); }

/* Status flow — the order of statuses, wraps on small screens */
.doc-flow { list-style: none; margin: var(--space-md) 0 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs) var(--space-xs); }
.doc-flow > li { display: inline-flex; align-items: center; gap: var(--space-2xs); font-family: var(--font-mono); font-size: var(--text-sm); white-space: nowrap; }
.doc-flow > li + li { margin-top: 0; }
.doc-flow > li + li::before { content: "→"; color: var(--color-neutral); margin-right: var(--space-2xs); }
.doc-flow .dot { vertical-align: middle; }

/* Status details — rule per status, can / cannot columns */
.doc-detail { margin-top: var(--space-lg); padding-top: var(--space-sm); border-top: var(--rule); }
.doc-detail h3 { margin-top: 0; display: flex; align-items: baseline; gap: var(--space-2xs); }
.doc-detail .doc-note-small { font-size: var(--text-sm); color: var(--color-muted); }
.doc-cando { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md); margin-top: var(--space-sm); }
.doc-cando h4 { margin-top: 0; font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-neutral); }
@media (min-width: 40rem) { .doc-cando { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Permission list — mono marks: ✓ allowed, ✕ denied, ~ partial */
.perm-list { list-style: none; margin: var(--space-xs) 0 0; padding: 0; border-top: var(--rule); }
.perm-list > li { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: var(--space-2xs); padding-block: 0.45rem; border-bottom: var(--rule); font-size: var(--text-sm); }
.perm-list > li + li { margin-top: 0; }
.perm-list .denied { color: var(--color-muted); }
.mark-yes, .mark-no, .mark-partial { font-family: var(--font-mono); font-size: var(--text-base); font-weight: 500; line-height: 1.3; text-align: center; }
.mark-yes { color: var(--color-success); }
.mark-no { color: var(--color-neutral); }
.mark-partial { color: var(--color-ink); }

/* Tables — hairlines, mono figures, scroll inside the wrapper only */
.doc-table { margin-top: var(--space-md); }
.doc-table h3 { margin-bottom: var(--space-xs); }
.doc-table__scroll { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.doc-table__scroll:focus-visible { outline-offset: 2px; }
.doc-table table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.doc-table th, .doc-table td { text-align: left; vertical-align: top; padding: 0.55rem var(--space-xs) 0.55rem 0; border-bottom: var(--rule); }
.doc-table th:last-child, .doc-table td:last-child { padding-right: 0; }
.doc-table thead th {
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--color-neutral); border-bottom: var(--rule-strong); vertical-align: bottom;
}
.doc-table tbody th { font-weight: 600; }
.doc-table td.is-mark, .doc-table th.is-mark { text-align: center; padding-right: var(--space-xs); }
.doc-table td.is-mark { font-family: var(--font-mono); }
.doc-table__note { margin-top: var(--space-xs); font-size: var(--text-sm); color: var(--color-muted); }

/* FAQ — native disclosure, ruled */
.doc-faq { margin-top: var(--space-sm); border-top: var(--rule); }
.doc-faq details { border-bottom: var(--rule); }
.doc-faq summary {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-sm); align-items: baseline;
  padding-block: var(--space-sm); cursor: pointer; list-style: none;
  font-weight: 600; line-height: 1.4;
}
.doc-faq summary::-webkit-details-marker { display: none; }
.doc-faq summary::after {
  content: "+"; font-family: var(--font-mono); font-weight: 400; font-size: var(--text-md); color: var(--color-neutral);
  transition: transform var(--dur-short) var(--ease-out);
}
.doc-faq details[open] summary::after { transform: rotate(45deg); }
.doc-faq summary:hover { color: var(--color-accent); }
.doc-faq__answer { padding-bottom: var(--space-sm); color: var(--color-muted); }
.doc-faq__answer p { margin: 0; }

/* ---------- End of article: related + help ---------- */
.doc-end { margin-top: var(--space-3xl); }
.doc-end h2 { font-size: var(--text-lg); border-top: var(--rule-strong); padding-top: var(--space-sm); }
.doc-pager { list-style: none; margin: var(--space-sm) 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); border-top: var(--rule); }
.doc-pager > li { border-bottom: var(--rule); }
.doc-pager a { display: block; padding-block: var(--space-sm); text-decoration: none; color: var(--color-ink); }
.doc-pager .label { display: block; margin-bottom: var(--space-3xs); }
.doc-pager__title { font-family: var(--font-display); font-weight: 700; font-size: var(--text-md); letter-spacing: -0.015em; transition: color var(--dur-short) var(--ease-out); }
.doc-pager a:hover .doc-pager__title { color: var(--color-accent); }
@media (min-width: 40rem) {
  .doc-pager { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-md); border-top: 0; }
  .doc-pager > li { border-top: var(--rule); }
  .doc-pager > li.is-next { grid-column: 2; text-align: right; }
}
.doc-help { margin-top: var(--space-lg); color: var(--color-muted); }
.doc-help a { color: var(--color-accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.doc-help a:hover { text-decoration-thickness: 2px; }
.doc-help + .doc-help { margin-top: var(--space-2xs); }
@media (min-width: 48rem) {
  .doc-index--meta .doc-index__link { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr) 9rem; }
  .doc-index--meta .doc-index__meta { text-align: right; white-space: normal; }
}