/*
 * Shared typography tokens.
 *
 * Keep the established 15px body scale and system-font stacks. Components
 * may still use compact or display text where their layout requires it, but
 * those roles now come from one vocabulary instead of unrelated values.
 */
:root {
    --type-size-body: var(--main-font-size, 15px);
    --type-size-navigation: var(--nav-font-size, var(--type-size-body));
    --type-size-page-title: calc(var(--type-size-body) * 1.5);
    --type-size-section-title: calc(var(--type-size-body) * 1.1);
    --type-size-small: calc(var(--type-size-body) * 0.85);
    --type-size-code: var(--code-display-font-size, var(--type-size-small));

    /* Semantic aliases used by every app's primary content header. */
    --type-size-content-title: var(--type-size-page-title);
    --type-size-content-description: var(--type-size-body);

    --type-size-h1: 40px;
    --type-size-h2: 35px;
    --type-size-h3: 30px;
    --type-size-h4: 25px;
    --type-size-h5: 20px;
    --type-size-h6: var(--type-size-body);

    --type-leading-heading: 1.3;
    --type-leading-ui: 1.4;
    --type-leading-reading: 1.5;

    /* Fixed content-boundary spacing and vertical rhythm. */
    --type-space-page: 16px;
    --type-space-content: 12px;
    --type-space-compact: 8px;
    --type-space-tight: 4px;

    /* Semantic reading hierarchy: parent label -> subsection -> list text. */
    --type-indent-subsection: var(--type-space-content);
    --type-indent-list: calc(var(--type-space-page) + var(--type-space-tight));

    /* Compact control padding stays fixed across viewport widths. */
    --type-control-padding-block: 3px;
    --type-control-padding-inline: 6px;
    --type-control-padding-tight: 3px;
    --type-notebook-control-height: 26px;
    --type-instruction-summary-height: 32px;
    --type-sidebar-content-inset: var(--type-space-content);
    --type-sidebar-shell-padding-block: calc(
        var(--type-sidebar-content-inset) - var(--type-control-padding-block)
    );
    --type-sidebar-shell-padding-inline: calc(
        var(--type-sidebar-content-inset) - var(--type-control-padding-inline)
    );

    /* Compact inline keyboard hints, such as the grammar-assist Tab badge. */
    --type-key-hint-gap: 4px;
    --type-key-hint-padding-block: 1px;
    --type-key-hint-padding-inline: 2px;
}

body {
    font-family: var(--body-font);
    font-size: var(--type-size-body);
    line-height: var(--type-leading-reading);
}

main {
    line-height: var(--type-leading-reading);
}

/* Inline text follows its component instead of jumping back to a fixed 15px. */
body :where(a, em, strong, b, mark, del, ins, u, var, q) {
    font-size: inherit;
    line-height: inherit;
}

body :where(h1, h2, h3, h4, h5, h6) {
    line-height: var(--type-leading-heading);
}

body :where(button, input, select, textarea) {
    font-family: var(--body-font);
    line-height: var(--type-leading-ui);
}

/* A panel menu row has one underline owner: its human-readable label. */
.panel-menu-control,
.panel-menu-control:is(:hover, :focus-visible) {
    text-decoration: none;
}

.panel-menu-control:is(:hover, :focus-visible) > .panel-menu-label {
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

/*
 * Shared block rhythm: different adjacent content roles always get 12px.
 * Repeated peers are slightly tighter, while list items remain compact.
 */
#content-window .type-content-flow > :where(h1, h2, h3, h4, h5, h6, p, ul, ol, blockquote, pre, table, figure, hr) {
    margin-block: 0;
}

#content-window .type-content-flow > * + * {
    margin-block-start: var(--type-space-content);
}

#content-window .type-content-flow > :where(p + p, blockquote + blockquote, ul + ul, ol + ol) {
    margin-block-start: var(--type-space-compact);
}

#content-window .type-content-flow li + li {
    margin-block-start: var(--type-space-tight);
}

/* Programming code, code editors and terminal-like output retain the mono stack. */
body :is(code, pre, samp),
body :is(code, pre, samp) *,
body :is(
    .resources-notebook-code-input,
    .resources-code-assist-popup,
    .resources-code-assist-popup *,
    .resources-code-assist-hint,
    .resources-code-assist-hint *
) {
    font-family: var(--code-font) !important;
}

/* Keyboard labels are UI text, not programming source. */
body kbd,
body kbd * {
    font-family: var(--body-font) !important;
}

/*
 * Instruction disclosures share one quiet, full-width summary row. The
 * chevron and state text are decorative because native details/summary
 * already exposes the expanded state to assistive technology.
 */
.instruction-disclosure {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    margin: 0;
    border-bottom: 1px solid var(--theme-divider-standard);
    color: var(--theme-text);
    font-family: var(--body-font);
    font-size: var(--type-size-body);
    line-height: var(--type-leading-reading);
}

.instruction-disclosure__summary {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: var(--type-space-compact);
    width: 100%;
    min-height: var(--type-instruction-summary-height);
    padding: var(--type-space-tight) 0;
    color: var(--theme-text);
    cursor: pointer;
    font: inherit;
    font-weight: 400;
    list-style: none;
    user-select: none;
}

.instruction-disclosure__summary::-webkit-details-marker {
    display: none;
}

.instruction-disclosure__summary::before {
    flex: 0 0 12px;
    width: 12px;
    height: 12px;
    content: "";
    background: url("../images/chevron-right.svg") center / 12px 12px no-repeat;
    transform-origin: center;
}

html[data-theme="dark"] .instruction-disclosure__summary::before {
    filter: invert(1);
}

.instruction-disclosure[open] > .instruction-disclosure__summary::before {
    transform: rotate(90deg);
}

.instruction-disclosure__title {
    font-weight: 600;
}

.instruction-disclosure__state {
    margin-left: auto;
    color: var(--theme-text-secondary);
    font-size: var(--type-size-small);
    font-weight: 400;
}

.instruction-disclosure__state-open {
    display: none;
}

.instruction-disclosure[open] .instruction-disclosure__state-open {
    display: inline;
}

.instruction-disclosure[open] .instruction-disclosure__state-closed {
    display: none;
}

.instruction-disclosure__summary:is(:hover, :focus-visible) .instruction-disclosure__title {
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.instruction-disclosure__summary:focus-visible {
    outline: 2px solid var(--theme-focus-ring);
    outline-offset: 2px;
}

.instruction-disclosure__body {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    padding: var(--type-space-compact) 0 var(--type-space-content) 20px;
}

/* Reservation history keeps the shared disclosure control but its calendar grid stays full width. */
.reservation-past-dates {
    margin-block-end: var(--type-space-content);
}

.reservation-past-dates > .reservation-past-dates__body {
    padding-inline-start: 0;
}

/* The board's back link is navigation text, despite its legacy code wrapper. */
body .board-back-link code {
    font-family: var(--body-font) !important;
}