/*
 * Split from a single app.css for readability - loaded together via
 * multiple <link> tags in app/views/status-page.php, in this order:
 * base, layout, status, wizard, responsive. No build step (no npm/Node
 * toolchain, core principle 6) - plain files, browser-native.
 *
 * Adapted from templates/style/reference/pure-tech-help-mockup.html - same
 * visual language (buttons, panels, wizard "journey" screens, result
 * bands), trimmed to what this ops tool actually needs: no login/account
 * mock-up (real SSO handles that server-side), no fake incident timeline
 * (see js/status.js - the outcome screen uses real incident.io data
 * instead), no request history (no storage for it - see spec
 * "Out of scope").
 *
 * This file: resets, typography, buttons, toast - the primitives every
 * other file in css/ builds on.
 */

:root {
    color-scheme: light;
    --status-up: var(--pure-olive-dark);
    --status-down: var(--pure-berry-dark);
    --status-unknown: var(--pure-yellow-dark);
    /* Contrast fixes (WCAG AA, 4.5:1 for normal text), 2026-09-30:
       paused grey darkened from #8c959f (3.0:1 on white); a darker
       shade of the brand orange for the "Monitoring" hero, since cream
       on --pure-yellow-dark is only 4.0:1. */
    --status-paused: #646a70;
    --alert-orange: #b83904;
    /* Responsive side margin, matching the reference mock-up's --pad -
       grows with viewport width rather than a flat value. Defined here
       (not layout.css) so login.php, which skips layout.css, still has
       it. */
    --pad: clamp(20px, 4vw, 56px);
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
}

/* Always show the page scrollbar (greyed out when there's nothing to
   scroll), so content never shifts sideways when a screen grows taller
   than the window, e.g. moving between wizard steps. */
html {
    overflow-y: scroll;
}

body {
    font-family: var(--pure-font-body);
    letter-spacing: var(--pure-tracking-body);
    font-size: 17px;
    line-height: 1.5;
    color: var(--pure-ink);
    background: var(--pure-cream);
    min-height: 100vh;
}

h1, h2, h3 {
    font-family: var(--pure-font-headline);
    font-weight: 700;
    letter-spacing: var(--pure-tracking-headline);
    line-height: 1.05;
    margin: 0;
    color: var(--pure-plum);
}

p {
    margin: 0;
}

/* Script-font accent for a single word within a heading - see
   templates/style/typography.md. Sparingly: one-off welcoming moments
   (the login headline), not repeated operational UI. */
.script {
    font-family: var(--pure-font-script);
    font-weight: 400;
    letter-spacing: 0;
    font-size: 1.06em;
    line-height: .8;
    display: inline-block;
    transform: rotate(-4deg) translateY(.04em);
    padding: 0 .06em;
}

button {
    font: inherit;
    color: inherit;
}

:focus-visible {
    outline: 3px solid var(--pure-plum);
    outline-offset: 3px;
}

.on-dark :focus-visible {
    outline-color: var(--pure-cream);
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 0;
    border-radius: 999px;
    padding: 17px 28px;
    font-weight: 700;
    font-size: 17px;
    letter-spacing: -0.01em;
    cursor: pointer;
    text-decoration: none;
    transition: transform .15s ease, background-color .15s ease;
}

.btn:hover:not(:disabled) {
    transform: translateY(-2px);
}

.btn:active:not(:disabled) {
    transform: translateY(0);
}

.btn:disabled {
    opacity: .6;
    cursor: default;
}

.btn-plum {
    background: var(--pure-plum);
    color: var(--pure-cream);
}

.btn-cream {
    background: var(--pure-cream);
    color: var(--pure-plum);
}

.btn-cream.rasp {
    color: var(--pure-berry-dark);
}

.btn-cream.navy {
    color: var(--pure-blue-dark);
}

.btn-cream.green {
    color: var(--pure-olive-dark);
}

.btn-ghost {
    background: transparent;
    color: inherit;
    box-shadow: inset 0 0 0 2px currentColor;
}

.link {
    background: none;
    border: 0;
    padding: 0;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    color: inherit;
}

.btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

/* Preview-mode banner - shared chrome, used on both the login page and
   the main page, not status-specific, so it lives here rather than in
   status.css. */
.dev-banner {
    margin: 0;
    padding: 8px 20px;
    background: var(--pure-yellow-light);
    color: var(--pure-brown-dark);
    font-size: 14px;
    text-align: center;
}

/* Toast */
.toast {
    position: fixed;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: fit-content;
    bottom: 24px;
    background: var(--pure-plum);
    color: var(--pure-cream);
    padding: 13px 20px;
    border-radius: 999px;
    font-weight: 600;
    z-index: 60;
    max-width: calc(100% - 32px);
    text-align: center;
}