/* Wiki styles on top of the Astrolabe design system (design/): the parts of a
 * generated wiki the design has no component for, using its tokens only.
 * Shared by the bundle's plain HTML pages (written as assets/style.css) and
 * the Astro theme (staged as /theme.css). tokens.css and bundle.css load
 * first; themes are [data-theme="dark|light|hc"] on <html>.
 */

html,
body {
  margin: 0;
  background: var(--bg);
}

/* Graph page: no ToC column, so the main column takes its space. */
@media (min-width: 860px) {
  .al-shell.al-shell-wide {
    grid-template-columns: var(--nav-width) minmax(0, 1fr);
    grid-template-areas: 'header header' 'nav main';
  }
}
.al-shell-wide > main > .al-article {
  max-width: none;
}

/* Second nav block: bundle resources. */
.al-nav .al-nav-resources {
  margin-top: var(--space-6);
}
.al-nav-foot code {
  font: 450 12px/16px var(--font-mono);
}

/* Page header: type, scope, verification. */
.page-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
}
.al-prose .al-badge code {
  margin-left: var(--space-1);
  padding: 0;
  font: 450 11px/18px var(--font-mono);
  background: none;
  border: 0;
  color: inherit;
}

.verify {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font: 500 13px/18px var(--font-sans);
  color: var(--ink-muted);
}
.verify[data-status='passed'] {
  color: var(--success);
}
.verify[data-status='failed'] {
  color: var(--danger);
}

.al-prose .symbol-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  margin: 0 0 var(--space-6);
  padding: 0;
  list-style: none;
}
.al-prose .symbol-chips li {
  margin: 0;
  padding: 1px var(--space-2);
  font: 450 12.5px/18px var(--font-mono);
  color: var(--ink-muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

/* Index page. */
.resources {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
  font: 500 14px/20px var(--font-sans);
}
.al-prose .page-list {
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.al-prose .page-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--border);
}
.al-prose .page-list li:first-child {
  border-top: 0;
}
.al-prose .page-list a.page-link {
  font: 600 15px/22px var(--font-sans);
  color: var(--ink);
  text-decoration: none;
}
.al-prose .page-list a.page-link:hover {
  color: var(--accent-text);
  text-decoration: underline;
}
.page-stats {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
  margin-left: auto;
  font: 400 13px/18px var(--font-sans);
  color: var(--ink-muted);
}

/* Previous / next at the end of a page. */
.prev-next {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-12);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border);
  font: 500 15px/22px var(--font-sans);
}
.al-prose .prev-next a:not(.al-ref) {
  color: var(--accent-text);
  text-decoration: none;
}
.al-prose .prev-next a:not(.al-ref):hover {
  text-decoration: underline;
}
.prev-next .next {
  margin-left: auto;
  text-align: right;
}
.prev-next .dir {
  display: block;
  font: 400 13px/18px var(--font-sans);
  color: var(--ink-muted);
}

/* Search (assets/search.js over the Pagefind index): a header button and a
 * modal dialog. The button is hidden until the index answers. */
.al-search-btn {
  color: var(--ink-subtle);
}
.al-search-btn[hidden] {
  display: none;
}
.al-search-btn kbd,
.al-search-esc {
  font: 500 11px/16px var(--font-mono);
  padding: 0 var(--space-1);
  color: var(--ink-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.al-search {
  width: min(640px, calc(100vw - 2 * var(--space-4)));
  max-height: min(70vh, 640px);
  margin: 12vh auto auto;
  padding: 0;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-raised);
}
.al-search[open] {
  display: flex;
  flex-direction: column;
}
.al-search::backdrop {
  background: #00000066;
}
.al-search-box {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  color: var(--ink-subtle);
}
.al-search-box input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font: 400 16px/24px var(--font-sans);
  color: var(--ink);
}
.al-search-box input::-webkit-search-cancel-button {
  display: none;
}
.al-search-esc {
  cursor: pointer;
}
.al-search-results,
.al-search-subs {
  list-style: none;
  margin: 0;
  padding: 0;
}
.al-search-results {
  overflow-y: auto;
  padding: var(--space-2);
}
.al-search-results:empty {
  display: none;
}
.al-search-hit {
  display: block;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--ink);
  text-decoration: none;
}
.al-search-hit:hover,
.al-search-hit[aria-selected='true'] {
  background: var(--surface-hover);
}
.al-search-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font: 600 14px/20px var(--font-sans);
}
.al-search-excerpt {
  display: block;
  margin-top: 2px;
  font: 400 13px/18px var(--font-sans);
  color: var(--ink-muted);
}
.al-search-excerpt mark {
  color: var(--ink);
  font-weight: 600;
  background: var(--accent-soft);
  border-radius: 2px;
}
.al-search-subs {
  margin-left: var(--space-4);
  border-left: 1px solid var(--border);
}
.al-search-subs .al-search-hit {
  padding: var(--space-1) var(--space-3);
  font: 400 13px/18px var(--font-sans);
  color: var(--ink-muted);
}
.al-search-status {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  font: 400 13px/18px var(--font-sans);
  color: var(--ink-subtle);
}
.al-search-status:empty {
  display: none;
}
@media (max-width: 719px) {
  .al-search-btn span,
  .al-search-btn kbd {
    display: none;
  }
}