/* Application styles on the design tokens (tokens.css): header and one main column, the release
   tables, the disclosure of older versions, the alert and the no-access view. Logical properties
   throughout; responsive through one container query on body. */

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    min-block-size: 100dvh;
    container-type: inline-size;
    display: grid;
    grid-template-rows: auto 1fr;
    grid-template-areas: "header" "main";
    font-family: var(--font-family-base);
    font-size: var(--font-size-body-m);
    line-height: var(--line-height-body-m);
    font-weight: var(--font-weight-normal);
    color: var(--color-text-body-default);
    background: var(--color-background-layout-main);
}

/* ---------- typography, focus, skip link ---------- */
h1, h2, h3 { margin: 0; color: var(--color-text-heading-default); font-weight: var(--font-weight-heading); }
h1 { font-size: var(--font-size-heading-m); line-height: var(--line-height-heading-m); letter-spacing: var(--letter-spacing-heading-m); }
h2 { font-size: var(--font-size-heading-xl); line-height: var(--line-height-heading-xl); letter-spacing: var(--letter-spacing-heading-xl); }
h3 { font-size: var(--font-size-heading-l); line-height: var(--line-height-heading-l); letter-spacing: var(--letter-spacing-heading-l); }
p { margin: 0; }

:focus-visible { outline: var(--border-width-focus-ring) solid var(--color-border-item-focused); outline-offset: var(--border-width-focus-ring); border-radius: var(--border-radius-control-focus-ring); }

.b-skip-link {
    position: absolute; inset-block-start: var(--space-xs); inset-inline-start: var(--space-xs); z-index: 1;
    padding-block: var(--space-xs); padding-inline: var(--space-m);
    border-radius: var(--border-radius-button);
    background: var(--color-background-container-content); color: var(--color-text-link-default);
    transform: translateY(-200%);
    transition: transform var(--motion-duration-responsive);
}
.b-skip-link:focus-visible { transform: none; }

.b-visually-hidden { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- header ---------- */
header {
    grid-area: header;
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-s) var(--space-m);
    min-block-size: var(--size-top-navigation);
    padding-block: var(--space-xs); padding-inline: var(--space-layout-content-horizontal);
    border-block-end: var(--border-width-divider) solid var(--color-border-divider-default);
    background: var(--color-background-container-content);
}
header img { block-size: var(--size-logo); inline-size: auto; }
b-auth-user-menu { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-s); margin-inline-start: auto; }

/* ---------- main column ---------- */
main {
    grid-area: main;
    inline-size: min(100%, var(--size-content-max));
    margin-inline: auto;
    padding-block: var(--space-xl) var(--space-xxxl);
    padding-inline: var(--space-layout-content-horizontal);
}
b-releases, b-auth-noaccess, b-auth-signin-failed { display: grid; gap: var(--space-l); align-content: start; }
b-auth-noaccess, b-auth-signin-failed { max-inline-size: var(--size-measure-text); }
b-releases section { display: grid; gap: var(--space-xs); scroll-margin-block-start: var(--space-m); }
b-releases section > p { color: var(--color-text-body-secondary); }

/* ---------- buttons ---------- */
button {
    display: inline-flex; align-items: center; justify-content: center;
    min-block-size: var(--size-vertical-input);
    padding-block: var(--space-xxs); padding-inline: var(--space-button-horizontal);
    border: var(--border-width-button) solid var(--color-border-button-normal-default);
    border-radius: var(--border-radius-button);
    background: var(--color-background-button-normal-default);
    color: var(--color-text-button-normal-default);
    font: inherit; font-weight: var(--font-weight-button);
    white-space: nowrap;
    transition: background-color var(--motion-duration-responsive), color var(--motion-duration-responsive), border-color var(--motion-duration-responsive);
}
button:hover { background: var(--color-background-button-normal-hover); color: var(--color-text-button-normal-hover); border-color: var(--color-border-button-normal-hover); }
button:active { background: var(--color-background-button-normal-active); }

/* ---------- release table ---------- */
table { inline-size: 100%; border-collapse: collapse; }
th, td { padding-block: var(--space-xs); padding-inline: var(--space-s); border-block-end: var(--border-width-divider) solid var(--color-border-divider-secondary); text-align: start; vertical-align: middle; }
th:first-child, td:first-child { padding-inline-start: 0; }
thead th { color: var(--color-text-column-header); font-weight: var(--font-weight-heading); border-block-end-color: var(--color-border-divider-default); white-space: nowrap; }
tbody th { font-weight: var(--font-weight-normal); overflow-wrap: anywhere; }
.b-size, .b-date { white-space: nowrap; }
.b-action { text-align: end; padding-inline-end: 0; }
tbody tr:hover { background: var(--color-background-item-hover); }

/* ---------- older versions ---------- */
details { padding-block: var(--space-s); padding-inline: var(--space-l); border: var(--border-width-divider) solid var(--color-border-divider-default); border-radius: var(--border-radius-container); }
summary { font-weight: var(--font-weight-heading); color: var(--color-text-link-default); }
summary:hover { color: var(--color-text-link-hover); }
details section { margin-block-start: var(--space-m); padding-block-start: var(--space-m); border-block-start: var(--border-width-divider) solid var(--color-border-divider-secondary); }

/* ---------- alert ---------- */
[role="alert"] {
    padding-block: var(--space-xs); padding-inline: var(--space-m);
    border: var(--border-width-alert) solid var(--color-border-status-error);
    border-radius: var(--border-radius-alert);
    background: var(--color-background-status-error); color: var(--color-text-status-error);
}

/* ---------- narrow containers: tighter gutters, the date column folds into the release date above the table ---------- */
@container (max-width: 40rem) {
    header, main { padding-inline: var(--space-m); }
    th, td { padding-inline: var(--space-xs); }
    .b-date { display: none; }
    details { padding-inline: var(--space-s); }
}