/* Custom styles for skim documentation */

/* Side-by-side comparison of option variants in the configuration docs.
   Used in pages like configuration/config-file.md to show before/after
   visuals for a single configuration option. */
.option-comparison {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 1.5rem;
    margin: 1.5rem 0;
}

.option-comparison figure {
    margin: 0;
    text-align: center;
    flex: 0 0 auto;
}

.option-comparison figcaption {
    margin-bottom: 0.4rem;
    font-size: 0.8rem;
}


/* Hero image styling with consistent vertical spacing */
.keymap-hero {
    margin-top: 24px;
    margin-bottom: 24px;
    text-align: center;
}

.keymap-hero img {
    max-width: 100%;
    height: auto;
}

/* Section nav (prev/next within the current top-level tab) */
.md-section-nav {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 0.75rem;
    margin: 1.5rem 0;
}

.md-section-nav--top {
    margin-top: 0;
}

.md-section-nav--bottom {
    margin-bottom: 0;
    border-top: 1px solid var(--md-default-fg-color--lightest);
    padding-top: 1.25rem;
}

.md-section-nav__link {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    max-width: 48%;
    color: var(--md-default-fg-color);
    text-decoration: none;
    transition: color 125ms;
}

.md-section-nav__link:hover {
    color: var(--md-accent-fg-color);
}

.md-section-nav__link--prev {
    align-items: flex-start;
    text-align: left;
}

.md-section-nav__link--next {
    align-items: flex-end;
    text-align: right;
    margin-left: auto;
}

.md-section-nav__direction {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--md-default-fg-color--light);
    margin-bottom: 0.15rem;
}

.md-section-nav__link:hover .md-section-nav__direction {
    color: inherit;
}

.md-section-nav__title {
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.3;
}

.md-section-nav__spacer {
    flex: 1 1 0;
}


/* Table column wrapping policy.
   Most reference tables in this project follow the same pattern:
   one or more short columns (Type / Default / Field / Form / Token /
   Section / Allowed values / Base) followed by a single description
   column that holds the long-form explanation. The browser's
   default table layout often wraps the short columns instead of the
   description column, leaving the description column wide and the
   short columns chopped into multiple lines.

   Force every column except the last to ``nowrap`` so the
   description column absorbs the wrapping; the short columns stay
   on a single line and the table reads cleanly. */
.md-typeset table:not([class]) td:not(:last-child),
.md-typeset table:not([class]) th:not(:last-child) {
    white-space: nowrap;
}