/* ============================================================
   common.css — the informational / error page layout.

   Shared chrome (fonts, tokens, reset, footer, cookie banner, message box,
   .page-* shell, .cookie-box, utilities) lives in /themeV0.01.css, which is
   loaded first. What is left here is the container + nav + section layout
   these pages use.

   The rules below reproduce the *effective* cascade of the previous file,
   which declared several of them twice with drifting values (the second
   declaration won).
============================================================ */

body {
    padding: 20px;
    font-optical-sizing: auto;
    font-variation-settings:
        "wght" 400,
        "GRAD" 0;
}

/* ------------------------------------------------------------
   Layout
------------------------------------------------------------ */

.container {
    max-width: 900px;
    margin: auto;
}

.section {
    margin-bottom: 20px;
    padding: 18px;
    background: var(--panel);
    border-radius: 12px;
    border: 1px solid var(--border);
}

/* ------------------------------------------------------------
   Nav strip
------------------------------------------------------------ */

.nav {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
}

.nav a {
    display: block;
    padding: 8px 16px;
    margin-bottom: 8px;
    background: var(--panel);
    color: var(--text-dim);
    text-decoration: none;
    border-radius: 8px;
    border: 1px solid var(--border);
    font-size: 14px;
    transition: .15s;
}

.nav a:hover {
    color: var(--text);
    background: var(--panel-hover);
}

.nav a.active {
    background: var(--accent);
    color: var(--on-accent);
    border-color: var(--accent);
}

/* ------------------------------------------------------------
   Typography
------------------------------------------------------------ */

h1, h2, h3 {
    margin-top: 0;
    color: var(--text-strong);
}

p {
    color: var(--text-dim);
    line-height: 1.6;
}