:root {
    --gps-50:  #e8f4f8;
    --gps-100: #d1e9f1;
    --gps-500: #2790B0;
    --gps-600: #217B97;
    --gps-700: #1c637b;
    --gps-900: #1c4d5c;
    --gps-hero: linear-gradient(135deg, #1c4d5c 0%, #217B97 50%, #2790B0 100%);

    --ink:       #0f172a;
    --slate-700: #334155;
    --slate-600: #475569;
    --slate-500: #64748b;
    --slate-400: #94a3b8;
    --slate-300: #cbd5e1;
    --slate-200: #e2e8f0;
    --slate-100: #f1f5f9;
    --slate-50:  #f8fafc;

    --mute-bg: #f8fafc;
    --surface: #ffffff;
    --border:  #e2e8f0;

    --shadow-card: 0 1px 3px 0 rgb(0 0 0 / 0.08), 0 1px 2px -1px rgb(0 0 0 / 0.06);

    --notice-bg:     #fff3cd;
    --notice-fg:     #856404;
    --notice-edge:   #ffeeba;
    --notice-accent: #ffc107;

    --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
                 "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
    background: var(--mute-bg);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* === Header strip (the .levbar wrapper) === */
.levbar {
    background: var(--gps-hero);
    color: #ffffff;
    padding: 0.875rem 1.25rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.brand {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    color: #ffffff;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 1.0625rem;
    letter-spacing: -0.015em;
    text-decoration: none;
    border-bottom: none;
    padding: 0.15rem 0;
    flex: 0 0 auto;
    transition: opacity 0.12s ease;
}
.brand:hover {
    color: #ffffff;
    opacity: 0.85;
    text-decoration: none;
    border-bottom: none;
}
.brand .brand-suffix {
    font-weight: 400;
    color: rgba(255, 255, 255, 0.82);
    letter-spacing: 0;
}

.pagetitle {
    color: #ffffff;
    font-size: 0.9375rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    text-align: left;
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.levbarlist {
    list-style: none;
    padding: 0;
    margin: 0;
    background: transparent;
    border: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 1rem;
    font-size: 0.8125rem;
    flex: 0 0 auto;
}
.levbarlist li {
    margin: 0;
    display: inline-flex;
    align-items: center;
}
.levbarlist a {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    padding-bottom: 1px;
    transition: color 0.12s ease, border-color 0.12s ease;
}
.levbarlist a:hover {
    color: #ffffff;
    border-bottom-color: rgba(255, 255, 255, 0.55);
}

/* === Main content card === */
.main {
    max-width: 64rem;
    margin: 1.5rem auto;
    padding: 1.75rem 2rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    box-shadow: var(--shadow-card);
    min-width: 0;
}

@media (max-width: 720px) {
    .levbar {
        padding: 0.75rem 1rem;
        font-size: 0.8125rem;
    }
    .pagetitle { font-size: 0.875rem; }
    .main {
        margin: 0.875rem;
        padding: 1.125rem 1.125rem;
        border-radius: 0.5rem;
    }
}

/* === Typography === */
h1, h2, h3, h4, h5 {
    font-family: var(--font-sans);
    color: var(--ink);
    background: transparent;
    border: none;
    line-height: 1.3;
}
h1 {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 1rem;
    padding: 0;
}
h2 {
    font-size: 1.125rem;
    font-weight: 700;
    margin: 1.75rem 0 0.75rem;
    padding: 0;
}
h3 {
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--slate-500);
    margin: 1.5rem 0 0.625rem;
    padding: 0;
}
h4 { font-size: 1rem; font-weight: 600; margin: 1.25rem 0 0.5rem; }
h5 { font-size: 0.9375rem; font-weight: 600; margin: 1rem 0 0.5rem; }

p { margin: 0.5rem 0; }

/* === Code / pre === */
pre {
    background: var(--slate-50);
    border: 1px solid var(--border);
    border-radius: 0.375rem;
    padding: 0.875rem 1rem;
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    line-height: 1.55;
    overflow-x: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
    margin: 0.75rem 0;
    color: var(--slate-700);
}
code {
    font-family: var(--font-mono);
    font-size: 0.875em;
    background: var(--slate-100);
    border: 1px solid var(--border);
    border-radius: 0.25rem;
    padding: 0.05rem 0.3rem;
    color: var(--slate-700);
}
pre code {
    background: transparent;
    border: none;
    padding: 0;
}

/* === Links === */
a {
    color: var(--gps-600);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
}
a:hover {
    color: var(--gps-700);
    text-decoration-thickness: 2px;
}

.nlink,
.inpage,
.repoview {
    color: var(--gps-600);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 0.12s ease, border-color 0.12s ease;
}
.nlink:hover,
.inpage:hover,
.repoview:hover {
    color: var(--gps-700);
    border-bottom-color: var(--gps-600);
    background: transparent;
}

/* === Letter nav === */
.nav {
    color: var(--slate-500);
    font-size: 0.8125rem;
    text-align: right;
    margin: 0 0 1rem;
}
.nactive {
    color: var(--gps-700);
    border-bottom: 2px solid var(--gps-600);
    font-weight: 600;
    background: transparent;
    font-size: 0.8125rem;
    text-decoration: none;
}
.ninactive {
    color: var(--slate-400);
    font-size: 0.8125rem;
}
.letterlist {
    background: transparent;
}
.letterlist a {
    padding: 0 0.35em;
}

/* === Lists === */
.pkglist {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 1rem;
}
.pkglist li {
    margin: 0;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--slate-100);
    line-height: 1.5;
}
.pkglist li:last-child { border-bottom: none; }

/* Package-name-shaped links (mono): version-stamped strings on Latest packages
   and on the package detail RPM table. Group-name links stay sans by default. */
.pkglist em + a.inpage,
table a.inpage {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
}

/* === Tables === */
table {
    border-collapse: collapse;
    margin: 0.5rem 0 1rem;
    width: 100%;
}
th {
    background: var(--slate-50);
    text-align: left;
    padding: 0.5rem 0.75rem;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--slate-500);
    border-bottom: 1px solid var(--border);
}
td {
    padding: 0.5rem 0.75rem;
    vertical-align: top;
    border-bottom: 1px solid var(--slate-100);
    font-size: 0.875rem;
}

/* === Definition lists === */
dt {
    font-weight: 600;
    margin-top: 0.875rem;
    color: var(--ink);
    font-size: 0.875rem;
}
dd {
    margin-left: 0;
    color: var(--slate-700);
}

/* === Footer note === */
.footernote {
    text-align: right;
    font-size: 0.8125rem;
    color: var(--slate-500);
    background: transparent;
    border-top: 1px solid var(--border);
    padding-top: 0.875rem;
    margin-top: 1.75rem;
}

/* === Notice banner === */
.notice {
    background: var(--notice-bg);
    color: var(--notice-fg);
    border: 1px solid var(--notice-edge);
    border-left: 4px solid var(--notice-accent);
    border-radius: 0.375rem;
    padding: 0.75rem 1rem;
    margin: 1rem 0;
    font-size: 0.875rem;
}

/* === Package metadata strip (license / vendor / homepage) === */
.meta-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin: 0.5rem 0 1rem;
    font-size: 0.8125rem;
    color: var(--slate-600);
}
.meta-strip .chip {
    background: var(--slate-100);
    border: 1px solid var(--border);
    color: var(--slate-700);
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    font-size: 0.75rem;
    white-space: nowrap;
}

/* === Install command block (dark code surface) === */
.install-block {
    position: relative;
    margin: 0.5rem 0 1.25rem;
}
.install-block pre {
    background: #0f172a;
    color: #f8fafc;
    border: 1px solid #1e293b;
    padding: 1rem 4.5rem 1rem 1rem;
    font-size: 0.8125rem;
    line-height: 1.6;
    white-space: pre;
    overflow-x: auto;
}
.install-block pre .comment {
    color: #94a3b8;
}
.install-block .copy-btn {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: #1e293b;
    color: #cbd5e1;
    border: 1px solid #334155;
    border-radius: 0.25rem;
    padding: 0.15rem 0.55rem;
    font-size: 0.7rem;
    font-family: var(--font-sans);
    cursor: pointer;
    transition: all 0.15s ease;
}
.install-block .copy-btn:hover {
    background: #334155;
    color: #ffffff;
}

/* === Group/letter pill row (index page) === */
.group-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.5rem;
    margin: 0.5rem 0 1.25rem;
}
.group-pills a {
    display: inline-block;
    padding: 0.25rem 0.7rem;
    background: var(--gps-50);
    color: var(--gps-700);
    border: 1px solid var(--gps-100);
    border-radius: 999px;
    font-size: 0.8125rem;
    text-decoration: none;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.group-pills a:hover {
    background: var(--gps-100);
    color: var(--gps-900);
    border-color: var(--gps-500);
}

/* === Consolidated availability table === */
.consolidated-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0.5rem 0 1.25rem;
}
.consolidated-table th {
    background: var(--gps-50);
    color: var(--gps-900);
}
.consolidated-table td {
    text-align: center;
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    color: var(--slate-700);
}
.consolidated-table td:first-child {
    text-align: left;
    font-family: var(--font-sans);
    font-weight: 600;
    color: var(--ink);
}
.consolidated-table .has-arch {
    color: var(--gps-600);
    text-decoration: none;
    font-weight: 600;
}
.consolidated-table .has-arch:hover {
    color: var(--gps-700);
}
.consolidated-table .no-arch {
    color: var(--slate-300);
}

/* === Consolidated letter section heading === */
.letter-section {
    margin: 1.5rem 0 0.5rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--border);
    color: var(--gps-700);
    font-size: 1rem;
    font-weight: 700;
}

/* === Availability badge row (consolidated index) === */
.avail-badges {
    display: inline-flex;
    gap: 0.25rem;
    margin-left: auto;
}
.avail-badges .badge {
    display: inline-block;
    padding: 0.05rem 0.45rem;
    background: var(--gps-50);
    color: var(--gps-700);
    border: 1px solid var(--gps-100);
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 600;
}

/* === Breadcrumb above h1 === */
.breadcrumb {
    color: var(--slate-500);
    font-size: 0.8125rem;
    margin: 0 0 1rem;
}
.breadcrumb a {
    color: var(--gps-600);
    text-decoration: none;
}
.breadcrumb a:hover {
    color: var(--gps-700);
    text-decoration: underline;
}
.breadcrumb .sep {
    color: var(--slate-400);
    margin: 0 0.4rem;
}

/* === Print stylesheet === */
@media print {
    .levbar, .footernote, .install-block .copy-btn {
        display: none !important;
    }
    .main {
        max-width: 100%;
        margin: 0;
        padding: 0;
        box-shadow: none;
        border: none;
    }
    body {
        font-size: 12pt;
        color: #000;
        background: #fff;
    }
    a {
        color: #000;
    }
    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #666;
    }
    pre {
        white-space: pre-wrap;
        border: 1px solid #ccc;
        padding: 0.5em;
    }
}