/* Documentation-only styles. Inherits every colour token from styles.css. */

.shell--docs { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); }

.doc { overflow-y: auto; background: var(--bg); }
.doc__body { max-width: 820px; margin: 0 auto; padding: 44px 40px 100px; }

.doc__hero { padding-bottom: 26px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.doc__hero h1 { margin: 0 0 12px; font-size: 34px; font-weight: 680; letter-spacing: -.9px; }
.doc__lede { margin: 0 0 20px; font-size: 16px; line-height: 1.65; color: var(--text-muted); max-width: 66ch; }

.doc__meta { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 12.5px; color: var(--text-faint); }
.doc__meta strong { color: var(--text-muted); font-weight: 600; margin-right: 5px; }

.doc section { padding: 30px 0; scroll-margin-top: calc(var(--topbar-h) + 16px); }

.doc h2 {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 14px; font-size: 22px; font-weight: 660; letter-spacing: -.5px;
}
.doc h3 { margin: 26px 0 10px; font-size: 15px; font-weight: 640; }
.doc p { margin: 0 0 14px; font-size: 14.5px; line-height: 1.72; color: var(--text-muted); max-width: 70ch; }
.doc p strong, .doc li strong { color: var(--text); font-weight: 620; }

.doc a { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--accent-line); }
.doc a:hover { border-bottom-color: var(--accent); }
.sidebar a.nav-item { border-bottom: none; color: var(--text-muted); text-decoration: none; }
.sidebar a.nav-item:hover { color: var(--text); }
.sidebar a.nav-item.is-active { background: var(--accent-soft); color: var(--text); font-weight: 560; box-shadow: inset 2px 0 0 var(--accent); }

.doc code {
  font-family: var(--font-mono); font-size: .88em;
  padding: 1.5px 5px; border-radius: 4px;
  background: var(--bg-active); color: var(--text);
  border: 1px solid var(--line);
}
.doc h2 code { font-size: .7em; }

.code-block {
  margin: 0 0 18px; padding: 15px 17px;
  background: var(--bg-code); border: 1px solid var(--line); border-radius: var(--radius);
  overflow-x: auto;
}
.code-block code {
  font-family: var(--font-mono); font-size: 12.5px; line-height: 1.7;
  background: none; border: none; padding: 0; color: var(--text);
  white-space: pre; display: block;
}

.list { margin: 0 0 16px; padding-left: 20px; }
.list li { font-size: 14.5px; line-height: 1.72; color: var(--text-muted); margin-bottom: 9px; max-width: 68ch; }

.table {
  width: 100%; border-collapse: collapse; margin: 0 0 18px;
  font-size: 13.5px; display: block; overflow-x: auto; white-space: nowrap;
}
.table thead th {
  text-align: left; font-weight: 620; font-size: 11.5px; letter-spacing: .05em;
  text-transform: uppercase; color: var(--text-faint);
  padding: 9px 14px 9px 0; border-bottom: 1px solid var(--line-strong);
}
.table td {
  padding: 11px 14px 11px 0; border-bottom: 1px solid var(--line);
  color: var(--text-muted); vertical-align: top;
}
.table td:first-child { color: var(--text); }

.req {
  font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--red); margin-left: 5px;
}

.callout {
  margin: 18px 0; padding: 14px 16px;
  border-radius: var(--radius); border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  background: var(--bg-raised);
  font-size: 13.5px; line-height: 1.68; color: var(--text-muted);
  max-width: 70ch;
}
.callout strong { display: inline; color: var(--text); }
.callout--warn { border-left-color: var(--red); }

.rule { border: none; border-top: 1px solid var(--line); margin: 12px 0; }

.doc__foot { padding-top: 30px; margin-top: 20px; border-top: 1px solid var(--line); }
.doc__foot p { font-size: 13px; margin-bottom: 6px; }
.doc__fine { color: var(--text-faint); font-size: 12px; }

.doc .verb { font-size: 10px; padding: 3px 7px; }

@media (max-width: 960px) {
  .shell--docs { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 620px) {
  .doc__body { padding: 28px 18px 72px; }
  .doc__hero h1 { font-size: 27px; }
  .doc__lede { font-size: 15px; }
  .doc h2 { font-size: 19px; }
  .doc section { padding: 22px 0; }
  .code-block { padding: 13px 14px; }
  .code-block code { font-size: 11.5px; }
}

/* ---------------------------------------------------------------------------
   Wide tables scroll inside themselves, never the page.
   The 6 GHz availability table lists whole market groups per row and is far
   wider than a phone viewport. Without this it was silently clipped: the body
   reported no overflow while the right-hand column was simply unreachable.
   `display: block` turns the table into its own scroll container; rows and
   cells keep their table layout because their display values are untouched.
   ------------------------------------------------------------------------ */
.table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table thead,
.table tbody { display: table; width: 100%; min-width: 520px; }

/* ---------------------------------------------------------------------------
   Single-column article shell.
   `.shell--docs` inherits Declarant's two-column grid, whose first track is
   reserved for an in-page nav sidebar. Conformant's docs and article pages have
   no such sidebar, so the article was being laid into the 300px nav track and
   rendering at roughly 39 characters per line on a 1280px screen — unreadable,
   and invisible below 960px where the media query already collapsed the grid.
   ------------------------------------------------------------------------ */
.shell--docs { grid-template-columns: minmax(0, 1fr); }

/* The hero shares the body's measure so the h1, lede and prose align on one
   left edge rather than the hero running full-bleed. */
.doc__hero,
.doc__foot { max-width: 820px; margin-left: auto; margin-right: auto; padding-left: 40px; padding-right: 40px; }
.doc__hero { padding-top: 44px; }
.doc__body { padding-top: 26px; }

@media (max-width: 620px) {
  .doc__hero,
  .doc__foot { padding-left: 18px; padding-right: 18px; }
  .doc__hero { padding-top: 28px; }
}

/* ---------------------------------------------------------------------------
   Tables may exceed the prose measure.
   820px is right for reading paragraphs and wrong for a five-column
   availability matrix — at 1440px the key table in the 6 GHz article was
   scrolling horizontally while 300px of page sat empty either side. Editorial
   pattern: prose keeps its measure, tables break out and stay centred, and the
   internal scroll remains as the small-screen fallback.
   ------------------------------------------------------------------------ */
@media (min-width: 1100px) {
  .doc__body .table {
    width: calc(100vw - 96px);
    max-width: 1180px;
    margin-left: calc((820px - min(1180px, 100vw - 96px)) / 2);
  }
}