:root {
    color-scheme: light;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: #152033;
    background: #f4f7fb;
    line-height: 1.5;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-width: 0; }
body { min-height: 100vh; }
a { color: #174ea6; }
button, input { font: inherit; }
button, .button-link {
    min-height: 44px;
    padding: .65rem 1rem;
    border: 0;
    border-radius: .45rem;
    background: #174ea6;
    color: white;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
:focus-visible { outline: 3px solid #f5a623; outline-offset: 3px; }

.login-page { display: grid; place-items: center; padding: 1rem; }
.login-card {
    width: min(100%, 28rem);
    padding: clamp(1.25rem, 5vw, 2rem);
    background: white;
    border: 1px solid #d8e0ec;
    border-radius: .75rem;
    box-shadow: 0 .5rem 2rem rgb(25 46 80 / 10%);
}
.field { margin-block: 1rem; }
.field label { display: block; font-weight: 650; margin-bottom: .35rem; }
.field input { width: 100%; min-height: 44px; padding: .6rem; border: 1px solid #73809a; border-radius: .35rem; }
.notice { padding: .75rem; background: #e8f0fe; border-left: .25rem solid #174ea6; }
.notice.error { background: #fdeaea; border-color: #a61b1b; }

.site-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 1.25rem;
    padding: .75rem max(1rem, calc((100vw - 72rem) / 2));
    background: #152033;
    color: white;
}
.site-header a { color: white; min-height: 44px; display: inline-flex; align-items: center; }
.brand { font-weight: 750; text-decoration: none; }
.site-header nav { flex: 1; display: flex; flex-wrap: wrap; gap: .25rem 1rem; }
.site-header nav a[aria-current="page"] { text-decoration-thickness: .2rem; text-underline-offset: .3rem; }
.logout-form { margin: 0; }
.logout-form button { background: #e8eef8; color: #152033; }
.page-shell { width: min(100%, 72rem); margin-inline: auto; padding: clamp(1rem, 4vw, 2rem); }
.eyebrow { color: #52617a; font-size: .875rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.status-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.status-card { min-width: 0; padding: 1rem; background: white; border: 1px solid #d8e0ec; border-radius: .6rem; }
.status-card h3 { margin-top: 0; }
.status-card dl div { display: flex; justify-content: space-between; gap: 1rem; }
.status-card dd { margin: 0; font-weight: 700; }
.ready { color: #176b37; font-weight: 750; }
.request-id { overflow-wrap: anywhere; color: #52617a; }
.content-list { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.content-card { min-width: 0; padding: 1rem; background: white; border: 1px solid #d8e0ec; border-radius: .6rem; }
.content-card h2, .content-card h3 { margin-top: 0; }
.content-card dl div, .metadata div { display: grid; grid-template-columns: minmax(7rem, 12rem) minmax(0, 1fr); gap: .75rem; padding-block: .25rem; }
.content-card dt, .metadata dt { font-weight: 700; }
.content-card dd, .metadata dd { margin: 0; overflow-wrap: anywhere; }
.stored-content { white-space: pre-wrap; overflow-wrap: anywhere; padding: 1rem; background: white; border: 1px solid #d8e0ec; border-radius: .45rem; }
.section-nav { display: flex; flex-wrap: wrap; gap: .5rem; margin-block: 1rem; }
.section-nav a { min-height: 44px; display: inline-flex; align-items: center; padding: .5rem .75rem; background: white; border: 1px solid #9cabc1; border-radius: .35rem; }

@media (min-width: 48rem) {
    .status-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .content-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 30rem) {
    .content-card dl div, .metadata div { grid-template-columns: 1fr; gap: 0; }
}