/* Page styles for /unreal-tournament/obs-replay-buffer.
   Colour tokens come from style.css, which base.html loads first. */

.obs-guide {
    max-width: 80ch;   /* readable measure; the sidebar already narrows the column */
}

/* Tables of OBS settings ---------------------------------------------------- */
.obs-guide .obs-settings {
    --bs-table-bg: var(--mg-panel);
    --bs-table-color: var(--mg-text);
    --bs-table-border-color: var(--mg-hairline);
    max-width: 60rem;
}

.obs-guide .obs-settings th {
    color: var(--mg-text-strong);
    font-weight: 600;
    white-space: nowrap;
}

.obs-guide .obs-settings td code {
    white-space: nowrap;
}

/* Key caps and OBS menu paths ----------------------------------------------- */
.obs-key {
    display: inline-block;
    background: var(--mg-panel);
    border: 1px solid var(--mg-hairline);
    border-bottom-width: 2px;
    border-radius: 4px;
    padding: 0 .4em;
    font-family: var(--bs-font-monospace);
    font-size: .875em;
    color: var(--mg-text-strong);
}

.obs-path {
    color: var(--mg-text-strong);
    font-weight: 600;
    white-space: nowrap;
}

.obs-guide code {
    color: var(--mg-link);
}

.obs-guide pre {
    background: var(--mg-panel);
    border: 1px solid var(--mg-hairline);
    border-radius: 4px;
    padding: .75rem 1rem;
    color: var(--mg-text);
}

/* Callouts ------------------------------------------------------------------ */
.obs-note {
    border-inline-start: 3px solid var(--mg-purple);
    background: var(--mg-panel);
    padding: .75rem 1rem;
    margin-block: 1rem;
}

.obs-note.obs-warn {
    border-inline-start-color: var(--mg-amber);
}

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

/* The numbered walkthrough --------------------------------------------------- */
.obs-steps > li {
    margin-bottom: 1rem;
}

.obs-steps > li::marker {
    color: var(--mg-purple);
    font-weight: 700;
}