/* ============================================================================
   Reinventar brand styles — landing page and the few docs overrides.

   Every brand colour is declared once here as a custom property and
   re-declared for dark mode. No colour literal belongs anywhere below the
   :root blocks. The docs accent ramp itself lives in
   assets/docs/scss/_variables.scss and custom/colors/_reinventar.scss.

   Colours come from sirk-orgadmin-frontend/src/config/apps/reinventar.ts.
   #60933a is a fill-only green (3.66:1 on white — buttons and surfaces);
   #47702b is the AA-safe green for text, links and borders. The lime
   #d8d336 belongs to the logo and to accents on dark surfaces only.
   ========================================================================= */

:root {
    /* Brand */
    --ri-green: #47702b;
    --ri-green-fill: #60933a;
    --ri-green-light: #84b245;
    --ri-green-dark: #3a5c23;
    --ri-lime: #d8d336;
    --ri-lime-light: #e4e06b;
    --ri-lime-dark: #6f6b17;
    /* Lime itself is fine on the dark green panel; this pale step carries
       small status text there with margin. */
    --ri-lime-pale: #eeeb9d;

    /* Surfaces and text */
    --ri-surface: #eef4e4;
    --ri-surface-raised: #ffffff;
    --ri-surface-inverse: #3a5c23;
    --ri-ink: #1a1a1a;
    --ri-ink-muted: #444444;
    --ri-ink-inverse: #f4f7ee;
    --ri-ink-inverse-muted: #d5e0c8;
    --ri-border: #e3e8dc;
    --ri-border-strong: #c9d3bd;

    /* Status — meaning only, never decoration */
    --ri-status-open: #b3541e;
    --ri-status-overdue: #b42318;
    --ri-status-closed: #47702b;

    /* Type and rhythm. All Round Gothic ("arg") ships in one weight (400),
       so display text never asks for bold. */
    --ri-display: 'arg', 'All Round Gothic', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --ri-section-y: clamp(3.5rem, 8vw, 6rem);
    --ri-radius: 8px;
}

html[data-dark-mode] {
    --ri-surface: #101610;
    --ri-surface-raised: #172017;
    --ri-surface-inverse: #0b110a;
    --ri-ink: #e8f0e4;
    --ri-ink-muted: #aabda0;
    --ri-ink-inverse: #e8f0e4;
    --ri-ink-inverse-muted: #aabda0;
    --ri-border: #26331f;
    --ri-border-strong: #35452c;

    /* On a near-black surface the brand greens cannot carry text at AA;
       step up the ramp instead (the app's dark palette). */
    --ri-green: #9ccc6a;
    --ri-green-fill: #9ccc6a;
    --ri-green-light: #b9dd90;
    --ri-green-dark: #7aad4a;
    --ri-lime-dark: #d8d336;
    --ri-status-open: #e08a4e;
    --ri-status-overdue: #e06767;
    --ri-status-closed: #9ccc6a;
}

/* --------------------------------------------------------------------------
   Header

   The landing page uses the docs stylesheet (see layouts/partials/head.html),
   which does not carry the theme's non-docs top bar. The header is our own
   markup anyway, so it is styled here in full.
   ----------------------------------------------------------------------- */

.ri-topnav {
    position: relative;
    z-index: 10;
    padding: 0.85rem 0;
    background: var(--ri-surface-raised);
    border-bottom: 1px solid var(--ri-border);
}

.ri-topnav .navigation-menu {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.ri-topnav .navigation-menu li a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0.5rem 0.85rem;
    border-radius: var(--ri-radius);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--ri-ink);
    text-decoration: none;
}

.ri-topnav .navigation-menu li a:hover,
.ri-topnav .navigation-menu li a:focus-visible {
    color: var(--ri-green);
    background: var(--ri-surface);
}

.ri-topnav .navigation-menu .material-icons {
    font-size: 1.1rem;
    margin-right: 0.3rem;
}

.ri-topnav #mode {
    min-width: 44px;
    min-height: 44px;
    color: var(--ri-ink-muted);
}

/* The hamburger is desktop-hidden; #navigation is shown inline by the theme's
   toggleMenu(), so the default state has to be display:none below the
   breakpoint and an explicit display on it. */
.ri-topnav .navbar-toggle {
    display: none;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--ri-border-strong);
    border-radius: var(--ri-radius);
}

.ri-topnav .navbar-toggle .lines {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.ri-topnav .navbar-toggle .lines span {
    display: block;
    width: 20px;
    height: 2px;
    border-radius: 2px;
    background: var(--ri-ink);
}

@media (max-width: 991.98px) {
    .ri-topnav .navbar-toggle {
        display: inline-flex;
    }

    .ri-topnav #navigation {
        display: none;
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        padding: 0.5rem 1rem 1rem;
        background: var(--ri-surface-raised);
        border-bottom: 1px solid var(--ri-border);
    }

    .ri-topnav .navigation-menu {
        flex-direction: column;
        align-items: stretch;
        gap: 0.15rem;
    }

    .ri-topnav .navigation-menu li a {
        width: 100%;
    }
}

.ri-topnav .ri-wordmark {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-family: var(--ri-display);
    font-weight: 400;
    font-size: 1.35rem;
    letter-spacing: 0.02em;
    line-height: 1;
    color: var(--ri-green);
    text-decoration: none;
    /* Reserve the wordmark's box so a late font swap cannot shift the header. */
    min-width: 10rem;
}

.ri-topnav .ri-wordmark svg {
    flex: 0 0 auto;
}

.ri-topnav .ri-wordmark:hover,
.ri-topnav .ri-wordmark:focus-visible {
    color: var(--ri-green-dark);
}

html[data-dark-mode] .ri-topnav .ri-wordmark:hover,
html[data-dark-mode] .ri-topnav .ri-wordmark:focus-visible {
    color: var(--ri-lime);
}

/* A visible focus ring everywhere, not only where Bootstrap happens to add one.
   The theme's `.btn` rules clear the outline at a higher specificity, so the
   icon buttons in the header and sidebar are named explicitly. */
a:focus-visible,
button:focus-visible,
.ri-btn:focus-visible,
.ri-topnav #mode:focus-visible,
.ri-topnav .navbar-toggle:focus-visible,
#top-header .btn:focus-visible,
#sidebar .btn:focus-visible,
.docs-content .btn:focus-visible,
div.code-toolbar .toolbar button:focus-visible {
    outline: 3px solid var(--ri-lime);
    outline-offset: 2px;
    border-radius: 3px;
}

/* Hover-only affordances: the theme already reveals the code-block copy button
   on :focus-within as well as :hover, so it is keyboard-reachable. The heading
   permalink is visibility:hidden at rest and marked aria-hidden — decorative,
   duplicating the fragment already reachable from the table of contents — so it
   is deliberately left alone rather than made focusable. */

/* --------------------------------------------------------------------------
   Landing — shared section furniture
   ----------------------------------------------------------------------- */

.ri-section {
    padding: var(--ri-section-y) 0;
    background: var(--ri-surface-raised);
    color: var(--ri-ink);
}

.ri-section--tint {
    background: var(--ri-surface);
}

.ri-section--inverse {
    background: var(--ri-surface-inverse);
    color: var(--ri-ink-inverse);
}

.ri-section--inverse .ri-section-lead,
.ri-section--inverse .ri-card p {
    color: var(--ri-ink-inverse-muted);
}

.ri-section-head {
    max-width: 46rem;
    margin-bottom: 3rem;
}

.ri-section-title {
    font-family: var(--ri-display);
    font-weight: 400;
    letter-spacing: 0.02em;
    font-size: clamp(1.6rem, 3.4vw, 2.3rem);
    line-height: 1.2;
    margin-bottom: 0.9rem;
    color: inherit;
}

.ri-section-lead {
    font-size: 1.075rem;
    line-height: 1.65;
    color: var(--ri-ink-muted);
    margin-bottom: 0;
}

.ri-eyebrow {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ri-lime-dark);
    margin-bottom: 0.85rem;
}

html[data-dark-mode] .ri-eyebrow,
.ri-section--inverse .ri-eyebrow {
    color: var(--ri-lime);
}

/* --------------------------------------------------------------------------
   Buttons
   ----------------------------------------------------------------------- */

.ri-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 44px;
    padding: 0.7rem 1.4rem;
    border-radius: var(--ri-radius);
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.2;
    text-decoration: none;
    border: 2px solid transparent;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.ri-btn-primary {
    background: var(--ri-green-fill);
    color: #ffffff;
    border-color: var(--ri-green-fill);
}

.ri-btn-primary:hover,
.ri-btn-primary:focus-visible {
    background: var(--ri-green-dark);
    border-color: var(--ri-green-dark);
    color: #ffffff;
}

html[data-dark-mode] .ri-btn-primary {
    background: var(--ri-green-fill);
    border-color: var(--ri-green-fill);
    color: #0e1a0b;
}

.ri-btn-secondary {
    background: transparent;
    color: var(--ri-ink);
    border-color: var(--ri-border-strong);
}

.ri-btn-secondary:hover,
.ri-btn-secondary:focus-visible {
    border-color: var(--ri-green);
    color: var(--ri-green);
}

/* The hero is dark in both appearances, so a secondary button inside it always
   needs the inverse treatment — otherwise it is dark-on-dark in light mode. */
.ri-section--inverse .ri-btn-secondary,
.ri-hero .ri-btn-secondary {
    color: var(--ri-ink-inverse);
    border-color: rgba(244, 247, 238, 0.45);
}

.ri-section--inverse .ri-btn-secondary:hover,
.ri-section--inverse .ri-btn-secondary:focus-visible,
.ri-hero .ri-btn-secondary:hover,
.ri-hero .ri-btn-secondary:focus-visible {
    border-color: var(--ri-lime);
    color: var(--ri-lime);
}

/* --------------------------------------------------------------------------
   Hero
   ----------------------------------------------------------------------- */

.ri-hero {
    position: relative;
    isolation: isolate;
    background: var(--ri-surface-inverse);
    color: var(--ri-ink-inverse);
    padding: clamp(4rem, 11vw, 8.5rem) 0 clamp(3.5rem, 9vw, 7rem);
    overflow: hidden;
}

.ri-hero-bg {
    position: absolute;
    inset: 0;
    z-index: -2;
}

.ri-hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 62% 40%;
}

/* The scrim is what makes the hero text pass AA over the photograph. It is
   opaque enough on its own that the text is legible even if the image never
   loads (the surface below it is already dark). */
.ri-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(100deg,
        rgba(13, 20, 8, 0.94) 0%,
        rgba(13, 20, 8, 0.88) 42%,
        rgba(13, 20, 8, 0.62) 72%,
        rgba(13, 20, 8, 0.45) 100%);
}

.ri-hero-title {
    font-family: var(--ri-display);
    font-weight: 400;
    letter-spacing: 0.06em;
    font-size: clamp(2.6rem, 8vw, 4.5rem);
    line-height: 1.05;
    margin: 0 0 1rem;
    color: var(--ri-ink-inverse);
}

.ri-hero-tagline {
    font-size: clamp(1.2rem, 2.6vw, 1.6rem);
    font-weight: 500;
    line-height: 1.35;
    color: var(--ri-ink-inverse);
    margin-bottom: 1rem;
}

.ri-hero-sub {
    font-size: 1.075rem;
    line-height: 1.65;
    color: var(--ri-ink-inverse-muted);
    max-width: 38rem;
    margin-bottom: 2rem;
}

.ri-hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
}

.ri-hero-note {
    margin: 1.75rem 0 0;
    font-size: 0.95rem;
    color: var(--ri-ink-inverse-muted);
    max-width: 34rem;
}

.ri-badge {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--ri-lime-light);
    border: 1px solid rgba(216, 211, 54, 0.45);
    border-radius: 999px;
    padding: 0.35rem 0.85rem;
    margin-bottom: 1.5rem;
}

/* --------------------------------------------------------------------------
   Cards — feature grid, compliance, platform split
   ----------------------------------------------------------------------- */

.ri-card {
    height: 100%;
    padding: 1.6rem;
    background: var(--ri-surface-raised);
    border: 1px solid var(--ri-border);
    border-radius: var(--ri-radius);
}

.ri-section--tint .ri-card {
    background: var(--ri-surface-raised);
}

.ri-section--inverse .ri-card {
    background: rgba(244, 247, 238, 0.06);
    border-color: rgba(244, 247, 238, 0.18);
}

.ri-card h3 {
    font-size: 1.12rem;
    font-weight: 700;
    margin: 0.9rem 0 0.5rem;
    color: inherit;
}

.ri-card p {
    font-size: 0.98rem;
    line-height: 1.6;
    color: var(--ri-ink-muted);
    margin-bottom: 0;
}

.ri-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--ri-radius);
    background: var(--ri-green-fill);
    color: #ffffff;
}

.ri-section--inverse .ri-card-icon {
    background: var(--ri-lime);
    color: #14140a;
}

html[data-dark-mode] .ri-card-icon {
    color: #0e1a0b;
}

.ri-card-icon .material-icons {
    font-size: 24px;
}

/* Compliance list */
.ri-check-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ri-check-list li {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    padding: 0.5rem 0;
    line-height: 1.55;
    color: var(--ri-ink-muted);
}

.ri-check-list .material-icons {
    font-size: 20px;
    color: var(--ri-green);
    flex: 0 0 auto;
    margin-top: 0.15rem;
}

.ri-section--inverse .ri-check-list li {
    color: var(--ri-ink-inverse-muted);
}

.ri-section--inverse .ri-check-list .material-icons {
    color: var(--ri-lime);
}

/* --------------------------------------------------------------------------
   Platform split — API and AI, equal weight
   ----------------------------------------------------------------------- */

.ri-split-col {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 2rem;
    border: 1px solid rgba(244, 247, 238, 0.18);
    border-radius: var(--ri-radius);
    background: rgba(244, 247, 238, 0.06);
}

.ri-split-col h3 {
    font-family: var(--ri-display);
    font-weight: 400;
    letter-spacing: 0.03em;
    font-size: 1.4rem;
    margin: 1rem 0 0.75rem;
}

.ri-split-col p {
    color: var(--ri-ink-inverse-muted);
    line-height: 1.65;
}

.ri-split-col .ri-btn {
    align-self: flex-start;
    margin-top: auto;
}

.ri-split-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
}

.ri-split-list li {
    padding: 0.35rem 0 0.35rem 1.2rem;
    position: relative;
    color: var(--ri-ink-inverse-muted);
    line-height: 1.55;
}

.ri-split-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.85rem;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ri-lime);
}

/* --------------------------------------------------------------------------
   Status marker — "not generally available yet"
   ----------------------------------------------------------------------- */

.ri-status {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    background: rgba(179, 84, 30, 0.14);
    color: var(--ri-status-open);
    border: 1px solid currentColor;
}

.ri-status .material-icons {
    font-size: 16px;
}

/* On the inverse (pine) surface the burnt-orange status colour cannot carry
   text at AA — lift it to the brass accent, which still reads as "attention"
   without competing with the avvik status colours used in the product. */
.ri-section--inverse .ri-status {
    background: rgba(216, 211, 54, 0.16);
    color: var(--ri-lime-pale);
}

/* Block-level variant used at the top of a documentation page. */
.ri-status-note {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 1rem 1.15rem;
    margin: 0 0 1.75rem;
    border-radius: var(--ri-radius);
    border: 1px solid var(--ri-status-open);
    background: rgba(179, 84, 30, 0.08);
    color: var(--ri-ink);
    line-height: 1.6;
}

.ri-status-note .material-icons {
    color: var(--ri-status-open);
    flex: 0 0 auto;
}

.ri-status-note p:last-child {
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Closing CTA
   ----------------------------------------------------------------------- */

.ri-cta {
    text-align: center;
}

.ri-cta .ri-hero-cta {
    justify-content: center;
}

/* --------------------------------------------------------------------------
   Footer — inverse pine surface, mirrors the hero
   ----------------------------------------------------------------------- */

.ri-footer {
    background: var(--ri-surface-inverse);
    color: var(--ri-ink-inverse-muted);
    padding: 3rem 0 2rem;
    /* The docs stylesheet pins `footer { height: 58px }` for its own one-line
       footer. Left alone, the inverse surface stops 58px down and everything
       below it — the column titles included — sits on the page background. */
    height: auto;
}

.ri-footer-title {
    color: var(--ri-ink-inverse);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 0.85rem;
}

.ri-footer-list li {
    font-size: 0.9rem;
    margin-bottom: 0.4rem;
}

.ri-footer-list a {
    color: var(--ri-ink-inverse-muted);
    text-decoration: none;
}

.ri-footer-list a:hover,
.ri-footer-list a:focus {
    color: var(--ri-ink-inverse);
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Documentation overrides
   ----------------------------------------------------------------------- */

/* Outbound link to the canonical Sirktek documentation. */
.ri-ekstern {
    white-space: nowrap;
}

.ri-ekstern .material-icons {
    font-size: 15px;
    vertical-align: -2px;
    margin-left: 0.15em;
    opacity: 0.75;
}

/* Wide tables and code blocks scroll inside their own box, never the page. */
.docs-content table {
    display: block;
    width: 100%;
    overflow-x: auto;
}

.docs-content pre {
    overflow-x: auto;
}

/* Keep the body measure comfortable on wide screens. */
.docs-content > p,
.docs-content > ul,
.docs-content > ol {
    max-width: 46rem;
}

/* --------------------------------------------------------------------------
   404
   ----------------------------------------------------------------------- */

.ri-404 {
    padding: clamp(4rem, 12vw, 8rem) 0;
    text-align: center;
    background: var(--ri-surface);
    color: var(--ri-ink);
}

.ri-404-code {
    font-family: var(--ri-display);
    font-size: clamp(3.5rem, 12vw, 6rem);
    line-height: 1;
    color: var(--ri-green);
    margin-bottom: 1rem;
}

/* --------------------------------------------------------------------------
   Motion
   ----------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* --------------------------------------------------------------------------
   Docs sidebar — section headers are links
   The theme renders section headers as <button> elements whose only job is
   toggling the submenu, which left section landing pages (/docs/api/ …)
   unreachable from the menu. sidebar.html overrides them to real links;
   these rules port the theme's button-only chrome — chevron, hover, active
   colour — over to the link. `.is-page` marks the header whose own page is
   open, so only that state gets the current-page pill.
   ----------------------------------------------------------------------- */

.sidebar-menu .sidebar-dropdown > a.sidebar-section-link::after {
    content: "\e5cc";
    color: var(--sidebar-text-color);
    font-family: 'Material Symbols Outlined';
    font-weight: 500;
    font-size: 22px;
    position: absolute;
    right: 15px;
    top: 7px;
    transition: all 0.3s ease;
}

.sidebar-menu .sidebar-dropdown.no-icon > a.sidebar-section-link::after,
.sidebar-menu .sidebar-dropdown.nested > a.sidebar-section-link::after {
    top: inherit;
}

.sidebar-menu .sidebar-dropdown.active > a.sidebar-section-link::after {
    transform: rotate(90deg);
    right: 17px;
}

.sidebar-menu .sidebar-dropdown.current > a.sidebar-section-link,
.sidebar-menu .sidebar-dropdown.current > a.sidebar-section-link::after {
    color: var(--sidebar-primary);
}

.sidebar-menu li.sidebar-dropdown a.sidebar-section-link:hover {
    background-color: var(--sidebar-dropdown-hover-bg);
    border-radius: 4px 0 0 4px;
}

/* The theme highlights li.current > a as "you are here"; for a section
   header that is only right when the section page itself is open, not when
   the reader is on a page inside it (the child link carries the pill). */
.sidebar-menu li.sidebar-dropdown.current > a.sidebar-section-link:not(.is-page) {
    background-color: transparent;
    border-right: none;
    font-weight: 400;
}

/* --------------------------------------------------------------------------
   API-referanse — the openapi shortcode
   Everything is drawn from the vy tokens, so dark mode follows the normal
   html[data-dark-mode] swap; the one exception is the POST badge, where the
   light-mode brass is too pale on white and the dark-mode brass-dark too
   dark on near-black, so the two modes use different steps of the ramp.
   ----------------------------------------------------------------------- */

.ri-oa-op {
    scroll-margin-top: 90px;
}

.ri-oa-op + .ri-oa-op {
    margin-top: 1.75rem;
}

.ri-oa-ophead {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin: 1.1rem 0 0.4rem;
}

.ri-oa-method {
    display: inline-block;
    min-width: 4.6em;
    text-align: center;
    padding: 0.25em 0.5em;
    border: 1.5px solid currentColor;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    align-self: center;
}

.ri-oa-m-get { color: var(--ri-status-closed); }
.ri-oa-m-post { color: var(--ri-lime-dark); }
html[data-dark-mode] .ri-oa-m-post { color: var(--ri-lime); }
.ri-oa-m-put,
.ri-oa-m-patch { color: var(--ri-status-open); }
.ri-oa-m-delete { color: var(--ri-status-overdue); }
.ri-oa-m-head,
.ri-oa-m-options { color: var(--ri-ink-muted); }

.ri-oa-summary {
    font-weight: 600;
}

.ri-oa-desc {
    color: var(--ri-ink-muted);
}

.ri-oa-label {
    font-weight: 600;
    margin: 0.75rem 0 0.25rem;
}

.ri-oa-req {
    color: var(--ri-status-overdue);
    font-weight: 700;
}

.ri-oa-scroll {
    overflow-x: auto;
}

.ri-oa-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    margin: 0.25rem 0 1rem;
}

.ri-oa-table th,
.ri-oa-table td {
    padding: 0.45rem 0.65rem;
    border: 1px solid var(--ri-border);
    vertical-align: top;
    text-align: left;
}

.ri-oa-table th {
    background: var(--ri-surface);
}

.ri-oa-content {
    margin: 0.25rem 0 1rem;
}

.ri-oa-schema {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 1.75rem 0 0.4rem;
    scroll-margin-top: 90px;
}

/* --------------------------------------------------------------------------
   Draft marker — the whole site is a v0.1 draft. Remove when it ships.
   ----------------------------------------------------------------------- */

.ri-draft-badge {
    display: inline-flex;
    align-items: center;
    align-self: center;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    border: 1px solid var(--ri-status-open);
    color: var(--ri-status-open);
    background: rgba(179, 84, 30, 0.08);
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Docs logo lockup — the inlined SVG wordmark paints with currentColor so
   it stays legible on the dark sidebar and header surfaces.
   ----------------------------------------------------------------------- */

.sidebar-brand a,
#top-header .logo-icon {
    color: var(--ri-ink);
}

/* --------------------------------------------------------------------------
   Docs headings — the brand display face as a signature. Body and prose stay
   on the system stack (see secondary_font in hugo.toml). arg has a single
   weight, so headings never ask for bold.
   ----------------------------------------------------------------------- */

.docs-content h1,
.docs-content h2,
.docs-content h3,
.docs-content h4 {
    font-family: var(--ri-display);
    font-weight: 400;
}

/* The theme bolds the page title at higher specificity; arg has no bold
   weight, so a faux-bold would render. Keep it at the face's real weight. */
.docs-content .content-title {
    font-weight: 400;
}