/* ============================================================
   GNATdoc API Reference — Modern Style
   ============================================================ */

:root {
  /* Layout */
  --gnatdoc-left-column-width: 22cqi;
  --gnatdoc-right-column-width: 18cqi;

  /* Colour palette */
  --color-bg:            #ffffff;
  --color-surface:       #f8f9fb;
  --color-surface-alt:   #f1f3f6;
  --color-border:        #dde1e9;
  --color-border-strong: #b8bfcc;

  --color-text:          #1a1f2e;
  --color-text-muted:    #5a6278;
  --color-text-subtle:   #8892a6;

  --color-accent:        #1a6bb5;
  --color-accent-hover:  #1257a0;
  --color-accent-light:  #e8f0fb;

  --color-code-bg:       #f6f8fa;
  --color-code-border:   #d0d7e0;
  --color-code-text:     #24292f;

  --color-target-hl:     #fffbe6;

  /* Typography */
  --font-sans: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", "Cascadia Code", "Fira Code", "Consolas", monospace;

  /* Misc */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.08);

  /* Legacy alias kept for generated HTML */
  --gnatdoc-a-color: var(--color-accent);
}

/* ---- Reset ---- */
*, *::before, *::after {
  box-sizing: border-box;
}

/* ---- Root ---- */
html {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-bg);
  width: 100%;
  height: 100%;
  -webkit-font-smoothing: antialiased;
}

body {
  margin: 0;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns:
    fit-content(var(--gnatdoc-left-column-width))
    1fr
    fit-content(var(--gnatdoc-right-column-width));
  overflow: hidden;
}

/* ============================================================
   Generic panel wrapper
   ============================================================ */
.panel {
  display: block;
  overflow: auto;
  width: 100%;
  height: 100%;
  padding: 1.25rem 1.5rem;
}

/* ============================================================
   Left sidebar — navigation / TOC
   ============================================================ */
.side-navigation {
  border-right: 1px solid var(--color-border);
  padding: 0;
  background-color: var(--color-surface);
  display: flex;
}

.side-navigation > .tab-bar {
  display: flex;
  writing-mode: vertical-lr;
  margin: 1.5rem .5rem 0 0;
  gap: .25rem;
}

.side-navigation > .tab-bar > .tab {
  rotate: 180deg;
  padding: .5rem .4rem;
  border-radius: var(--radius-sm);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  transition: background .15s, color .15s;
}

.side-navigation > .tab-bar > .tab:hover {
  background: var(--color-accent-light);
  color: var(--color-accent);
}

.side-navigation > .content-column {
  overflow: auto;
  padding: 1rem .75rem 1rem 1rem;
  flex: 1;
}

.side-navigation > .tab-bar a,
.side-navigation > .tab-bar a:visited {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* ---- Table of Contents ---- */
.toc a,
.toc a:visited {
  display: block;
  text-decoration: none;
  color: var(--color-text-muted);
  padding: .15rem .4rem;
  border-radius: var(--radius-sm);
  transition: background .12s, color .12s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.toc a:hover {
  background: var(--color-accent-light);
  color: var(--color-accent);
}

.toc ol {
  padding: 0;
  list-style-type: none;
  margin: 0;
}

.toc li {
  padding: 0 0 0 .85rem;
}

.toc-level-1-item-label {
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
  padding: 1rem 0 .35rem .4rem;
  display: block;
}

.toc-level-2-item-label {
  font-size: .85rem;
  color: var(--color-text-muted);
}

.toc-level-3-item-label {
  font-size: .8rem;
  color: var(--color-text-subtle);
}

.side-navigation > ul {
  padding: 0;
  list-style-type: none;
  margin: 0;
}

.side-navigation > ul > li {
  display: block;
}

.side-navigation > ul > li > a {
  text-decoration: none;
}

/* ============================================================
   Main document area
   ============================================================ */
.document-content {
  overflow: auto;
  width: 100%;
  background: var(--color-bg);
}

.content {
  max-width: 900px;
  margin: 0 auto;
  padding: 2rem 2.5rem;
}

/* ---- Page header ---- */
header {
  border-bottom: 2px solid var(--color-border);
  margin-bottom: 2rem;
  padding-bottom: 1.25rem;
}

header h1 {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -.02em;
}

/* ---- Headings ---- */
h1, h2, h3, h4, h5 {
  font-family: var(--font-sans);
  line-height: 1.3;
  font-weight: 600;
  color: var(--color-text);
}

h2 {
  font-size: 1.35rem;
  margin: 2rem 0 .75rem;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: .4rem;
}

h3 {
  font-size: 1.1rem;
  margin: 1.75rem 0 .5rem;
  color: var(--color-text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: .75rem;
}

h4 {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 1.5rem 0 .4rem;
  padding: .35rem .5rem;
  border-radius: var(--radius-sm);
  background: transparent;
  scroll-margin-top: 1rem;
  font-family: var(--font-mono);
  color: var(--color-accent);
}

h4:target {
  background: var(--color-target-hl);
  transition: background .5s;
}

h5 {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
  margin: 1rem 0 .35rem;
}

/* ---- Links ---- */
a, a:visited {
  color: var(--color-accent);
  text-decoration: none;
}

a:hover {
  color: var(--color-accent-hover);
  text-decoration: underline;
}

/* ---- Code blocks ---- */
.ada-code-snippet {
  border: 1px solid var(--color-code-border);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-md);
  background-color: var(--color-code-bg);
  margin: .5rem 0 1rem;
  padding: .85rem 1rem;
  overflow: auto;
  box-shadow: var(--shadow-sm);
}

.ada-code-snippet code {
  font-family: var(--font-mono);
  font-size: .82rem;
  line-height: 1.65;
  color: var(--color-code-text);
  white-space: pre;
}

/* ---- Parameter & return-value lists ---- */
.parameters-header,
.return-value-header {
  /* styled via h5 above */
}

.parameters-list,
.return-value-list {
  margin: 0 0 1rem;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(min-content, 12rem) 1fr;
  gap: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  font-size: .875rem;
}

.parameters-list dt,
.return-value-list dt {
  font-family: var(--font-mono);
  font-size: .8rem;
  font-weight: 600;
  color: var(--color-accent);
  background: var(--color-surface);
  padding: .45rem .75rem;
  border-bottom: 1px solid var(--color-border);
}

.parameters-list dd,
.return-value-list dd {
  margin: 0;
  color: var(--color-text-muted);
  background: var(--color-bg);
  padding: .45rem .75rem;
  border-bottom: 1px solid var(--color-border);
}

.parameters-list dt:last-of-type,
.parameters-list dd:last-of-type,
.return-value-list dt:last-of-type,
.return-value-list dd:last-of-type {
  border-bottom: none;
}

.parameters-list p,
.return-value-list p {
  margin: 0;
}

/* ---- Prose paragraphs ---- */
p {
  margin: .5rem 0 .75rem;
  color: var(--color-text);
  line-height: 1.7;
}

/* ============================================================
   Right sidebar — overview / page index
   ============================================================ */
.overview {
  border-left: 1px solid var(--color-border);
  padding: 1.25rem 1rem;
  background-color: var(--color-surface);
  overflow: auto;
  font-size: .85rem;
}

.overview h3 {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
  margin: 1.25rem 0 .4rem;
  padding: 0;
  border: none;
}

.overview h3:first-child {
  margin-top: 0;
}

.overview a,
.overview a:visited {
  display: block;
  text-decoration: none;
  color: var(--color-text-muted);
  padding: .15rem .4rem;
  border-radius: var(--radius-sm);
  transition: background .12s, color .12s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.overview a:hover {
  background: var(--color-accent-light);
  color: var(--color-accent);
}

.overview ul {
  padding: 0;
  list-style-type: none;
  margin: 0;
}

.overview li {
  padding: 0 0 0 .5rem;
}

/* ---- Scrollbar polish (Webkit) ---- */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--color-border-strong);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-subtle);
}