/* Shared styling for the docs portal (index.php, metricsTable.php) and the
   generated long-form reference pages that inherit its look: the und command
   reference (und/) and the build notes (buildnotes/).
   Matches the Understand Help site (MaterialX theme): charcoal top bar,
   brand-blue wordmark/links, system fonts. Light/dark via prefers-color-scheme. */

:root {
    --brand: #3e9bd6;         /* Understand brand blue */
    --brand-strong: #2f8bc4;  /* readable link blue on white */
    --topbar: #2b2b2b;        /* charcoal header, matches help navbar */
    --ink: rgba(0,0,0,0.87);
    --muted: rgba(0,0,0,0.54);
    --line: rgba(0,0,0,0.10);
    --head-bg: #f6f7f8;
    --row-hover: #f4f9fd;
    --row-stripe: rgba(0,0,0,0.02);
    --page-bg: #ffffff;
}
@media (prefers-color-scheme: dark) {
    :root {
        --brand-strong: #4aa8e0;
        --ink: rgba(255,255,255,0.87);
        --muted: rgba(255,255,255,0.52);
        --line: rgba(255,255,255,0.12);
        --head-bg: #262933;
        --row-hover: rgba(255,255,255,0.04);
        --row-stripe: rgba(255,255,255,0.02);
        --page-bg: #1e2029;
    }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--ink);
    background: var(--page-bg);
}

/* Top bar (and the footer below) — kept visually in sync with the standalone
   portal-chrome.css, which carries the same bar for pages that own their layout
   (the metrics catalog and the Python API manual). Change both together. */
.topbar { background: var(--topbar); }
.topbar__inner {
    max-width: 60rem;
    margin: 0 auto;
    padding: 0.6rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.topbar__brand { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.brand { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; }
.brand__icon { height: 1.6rem; width: auto; display: block; }
.brand__name { color: var(--brand); font-weight: 700; font-size: 1.05rem; }
/* Section suffix: "Understand Documentation - <Section>", the section linking
   to that section's home. */
.brand__sep { color: rgba(255,255,255,0.4); }
.brand__section { color: rgba(255,255,255,0.85); text-decoration: none; font-weight: 500; font-size: 1.05rem; white-space: nowrap; }
.brand__section:hover { color: var(--brand); }
.topbar__link { color: rgba(255,255,255,0.75); text-decoration: none; font-size: 0.85rem; }
.topbar__link:hover { color: var(--brand); }

/* Front-page hero: the site-wide searchbar is the primary way in, so it gets
   the top third of the page. The field itself is styled by search/search.css. */
.hero {
    display: flex;
    align-items: center;
    min-height: 33vh;
    padding: 2.5rem 0;
    border-bottom: 1px solid var(--line);
    background: var(--head-bg);
    text-align: center;
}
.hero__inner { width: 100%; max-width: 60rem; margin: 0 auto; padding: 0 1.25rem; }
.hero__title { margin: 0 0 0.35rem; font-size: 2rem; }
.hero__sub { margin: 0 0 1.5rem; color: var(--muted); font-size: 1.05rem; }
/* Sits under the searchbar, for readers the search didn't help. */
.hero__aside { margin: 0.9rem 0 0; color: var(--muted); font-size: 0.85rem; }

/* Page */
.container { width: 100%; max-width: 60rem; margin: 0 auto; padding: 2.25rem 1.25rem 4rem; flex: 1; }
img { max-width: 100%; height: auto; }
.lede { color: var(--muted); margin: 0 0 2.25rem; font-size: 1.05rem; }
section { margin-bottom: 2.75rem; }
h2 {
    font-size: 1.35rem;
    font-weight: 700;
    margin: 0 0 1rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--line);
}
a { color: var(--brand-strong); text-decoration: none; }
a:hover { color: var(--brand); text-decoration: underline; }
.note { color: var(--muted); font-size: 0.82rem; margin: 0.7rem 0 0; }

/* Doc cards */
.cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: 1rem;
}
.card {
    border: 1px solid var(--line);
    border-radius: 0.4rem;
    padding: 1rem 1.15rem;
    display: flex;
    flex-direction: column;
}
.card:hover { border-color: var(--brand); }
.card h3 { margin: 0 0 0.35rem; font-size: 1rem; }
.card p { margin: 0 0 0.8rem; color: var(--muted); font-size: 0.85rem; line-height: 1.5; flex: 1; }
.card__links { font-size: 0.85rem; }
.card__links .sep { color: var(--muted); padding: 0 0.35rem; }

/* Tables */
.table-wrap {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 0.4rem;
}
/* Variant for tall, narrow tables (metricsTable): no horizontal scroll
   context, so the sticky header can stick to the viewport. */
.table-wrap--sticky { overflow-x: visible; }
.table-wrap--sticky thead th { position: sticky; top: 0; z-index: 1; }

table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
thead th {
    text-align: left;
    background: var(--head-bg);
    color: var(--ink);
    font-weight: 700;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.7rem 1rem;
    border-bottom: 2px solid var(--brand);
    white-space: nowrap;
}
tbody td { padding: 0.6rem 1rem; border-top: 1px solid var(--line); vertical-align: middle; }
tbody tr:first-child td { border-top: 0; }
tbody tr:hover { background: var(--row-hover); }
.striped tbody tr:nth-child(2n) { background: var(--row-stripe); }
.striped tbody tr:hover { background: var(--row-hover); }
td.muted { color: var(--muted); }
th.num, td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Long-form doc pages (und reference, build notes) — content that the portal
   index doesn't have but which inherits the same chrome. */
h1 { font-size: 1.8rem; font-weight: 700; margin: 0 0 1.1rem; color: var(--brand-strong); }
h3 { font-size: 1.1rem; font-weight: 700; margin: 1.5rem 0 0.5rem; }
/* python-markdown's toc extension (permalink=True) adds a headerlink anchor
   after every heading it processes; hide it until the heading is hovered,
   matching mkdocs-material's behavior on the rest of the site. */
.headerlink { opacity: 0; margin-left: 0.4rem; font-weight: 400; text-decoration: none; }
h1:hover .headerlink, h2:hover .headerlink, h3:hover .headerlink,
h4:hover .headerlink, h5:hover .headerlink, h6:hover .headerlink { opacity: 1; }
p.brief, .brief { color: var(--muted); font-size: 1.05rem; }
ul, ol { padding-left: 1.4rem; }
li { margin: 0.15rem 0; }
pre {
    background: var(--head-bg);
    border: 1px solid var(--line);
    border-radius: 0.4rem;
    padding: 0.8rem 1rem;
    overflow-x: auto;
    font-size: 0.85rem;
    line-height: 1.5;
}
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9em; }
:not(pre) > code { background: var(--head-bg); border-radius: 4px; padding: 0.1rem 0.3rem; }

/* Build notes: one block per build. */
/* Support home (index.php): rows of plain links - common fixes, and the demoted
   reference list. Chip-styled so they read as actions, not prose. */
.linkrow { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.5rem 0 0; }
.linkrow a {
    display: inline-block;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 0.3rem 0.85rem;
    font-size: 0.92rem;
    text-decoration: none;
    background: var(--head-bg);
}
.linkrow a:hover { border-color: var(--brand); }
.linkrow--muted a { background: transparent; color: var(--muted); }

/* Each build starts with a full-width header band that sticks to the top of the
   viewport while that build's notes scroll past (the next band pushes it out), so
   the reader always knows which build they are in. The band's background must stay
   opaque - content scrolls beneath it. */
.bn-build { margin-top: 1.6rem; }
.bn-build:first-of-type { margin-top: 0; }
.bn-build__head {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    background: var(--head-bg);
    border: 1px solid var(--line);
    border-radius: 0.4rem;
    padding: 0.4rem 0.9rem;
}
.bn-build__head h2 {
    border-bottom: 0;
    margin: 0;
    font-size: 1.15rem;
    display: flex;
    align-items: center;
    gap: 0.55rem;
}
.bn-build__head h2::before {
    content: "";
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: var(--brand);
    flex: none;
}
.bn-build__head .date { margin-left: auto; color: var(--muted); font-weight: 400; font-size: 0.95rem; }

/* Build notes index: latest-build hero + per-version cards. */
.bn-hero {
    border: 1px solid var(--line);
    border-left: 3px solid var(--brand);
    border-radius: 0.4rem;
    padding: 1rem 1.25rem 1.1rem;
    margin: 0 0 2.5rem;
    background: var(--row-stripe);
}
.bn-hero .label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--brand-strong); }
.bn-hero h2 { border-bottom: 0; margin: 0.2rem 0 0.5rem; }
.bn-hero .date { color: var(--muted); font-weight: 400; font-size: 1rem; }
.bn-hero ul { margin: 0.3rem 0 0; }
.card__meta { line-height: 1.5; }
.card__stats { font-size: 0.8rem; color: var(--muted); border-top: 1px solid var(--line); padding-top: 0.5rem; }
.card__stats b { color: var(--ink); font-weight: 600; }

/* Context box: a one-paragraph orientation blurb at the top of generated
   leaf pages (catalog items, und commands), for readers who land there from
   a search engine with no idea what Understand is. Kept visually quiet. */
.context-box {
    margin: 1rem 0 1.5rem;
    padding: 0.6rem 1rem;
    border: 1px solid var(--line);
    border-left: 3px solid var(--brand);
    border-radius: 4px;
    background: var(--head-bg);
    font-size: 0.9375rem;
}
.context-box p { margin: 0.15rem 0; }
.context-box .context-box__links { color: var(--muted); }

/* Footer */
.footer { border-top: 1px solid var(--line); }
.footer__inner {
    max-width: 60rem;
    margin: 0 auto;
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    color: var(--muted);
    font-size: 0.8rem;
}
.footer__inner a { color: var(--muted); }
.footer__inner a:hover { color: var(--brand); }

@media (max-width: 480px) {
    .container { padding: 1.5rem 1rem 3rem; }
    .brand__name { font-size: 0.95rem; }
}