/* status.wimity.net in wimity.net's own language: the paper and its grain,
   ink, the stamped cards and controls, Courier Prime. The tokens are the
   website's (landingpage/frontend/src/styles/theme.css). */
@font-face {
    font-family: 'Courier Prime';
    font-weight: 400;
    font-display: swap;
    src: url(/assets/courier-prime-latin-400-normal.woff2) format('woff2');
}
@font-face {
    font-family: 'Courier Prime';
    font-weight: 700;
    font-display: swap;
    src: url(/assets/courier-prime-latin-700-normal.woff2) format('woff2');
}

:root {
    color-scheme: light;
    --paper: #f4efe3;
    --card: #fffdf7;
    --ink: #1a1510;
    --ink-dim: #6a6154;
    --ink-faint: #a49a86;
    --line: #1a1510;
    --accent: #ff5c28;
    --pop: #ffc93f;
    --mint: #bfe3cf;
    --tone-ink: #1a1510;
    --stamp: 4px 4px 0 0 var(--line);
    --stamp-lg: 6px 6px 0 0 var(--line);
    /* The levels: the site's mint, pop and accent, a red for down, the
       contact page's cyan for maintenance. */
    --ok: #8fcfaa;
    --slow: var(--pop);
    --partial: var(--accent);
    --major: #d93a26;
    --maint: #83cfd5;
    --empty: #e3dbc9;
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}
:root.dark {
    color-scheme: dark;
    --paper: #15120d;
    --card: #201b14;
    --ink: #f7f2e6;
    --ink-dim: #a49a86;
    --ink-faint: #6a6154;
    --line: #4a4033;
    --accent: #df6a3e;
    --pop: #d6a33f;
    --mint: #6e9f86;
    --ok: #6e9f86;
    --major: #c94a37;
    --maint: #5fa9ae;
    --empty: #342c22;
}
@media (prefers-color-scheme: dark) {
    :root:not(.light) {
        color-scheme: dark;
        --paper: #15120d;
        --card: #201b14;
        --ink: #f7f2e6;
        --ink-dim: #a49a86;
        --ink-faint: #6a6154;
        --line: #4a4033;
        --accent: #df6a3e;
        --pop: #d6a33f;
        --mint: #6e9f86;
        --ok: #6e9f86;
        --major: #c94a37;
        --maint: #5fa9ae;
        --empty: #342c22;
    }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 110px; }
body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font: 15px/1.6 'Courier Prime', ui-monospace, SFMono-Regular, Menlo, monospace;
    -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-underline-offset: 4px; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
h1, h2, h3 { margin: 0; line-height: 1.15; }
p, ol, ul { margin: 0; }
::selection { background: var(--accent); color: #15120d; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 60; background: var(--card); padding: 8px 12px; border: 2px solid var(--line); border-radius: 12px; }
.skip:focus { left: 16px; }

/* The paper grain, over everything but the header (surfaces.css). */
.grain {
    position: fixed; inset: 0; z-index: 40; pointer-events: none; opacity: 0.5; mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
}
:root.dark .grain { opacity: 0.3; mix-blend-mode: overlay; }
@media (prefers-color-scheme: dark) { :root:not(.light) .grain { opacity: 0.3; mix-blend-mode: overlay; } }

/* A real surface: a drawn edge and a solid offset shadow, never a blur. */
.card { background: var(--card); border: 2px solid var(--line); box-shadow: var(--stamp); border-radius: 16px; }
.tap { transition: transform 140ms var(--ease-out), box-shadow 140ms var(--ease-out), background-color 160ms ease; }
.tap:active { transform: translate(1px, 1px); }

/* The brand: the W mark and the wordmark, painted in the theme's ink. */
.logo { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.logo-mark { display: block; height: 28px; width: 39px; }
.logo-word {
    display: block; height: 22px; width: 66px; background: var(--ink);
    -webkit-mask: url(/assets/wimity-wordmark.png) center / contain no-repeat; mask: url(/assets/wimity-wordmark.png) center / contain no-repeat;
}
.logo-lg .logo-mark { height: 30px; width: 42px; }
.logo-lg .logo-word { height: 24px; width: 72px; }

/* The header: the website's floating bar. */
.top { position: sticky; top: 20px; z-index: 50; padding: 0 16px; }
.top-bar { max-width: 48rem; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; position: relative; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.top-links { position: absolute; left: 50%; transform: translateX(-50%); display: flex; gap: 4px; }
.top-links a { font-size: 13px; color: var(--ink-dim); text-decoration: none; padding: 4px 10px; border-radius: 8px; }
.top-links a:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); }
.tools { display: flex; gap: 8px; }
.tool {
    display: grid; place-items: center; width: 36px; height: 36px; border: 2px solid var(--line); border-radius: 12px;
    background: var(--card); color: var(--ink); font: inherit; font-size: 14px; font-weight: 700; text-decoration: none; cursor: pointer; padding: 0;
}
.tool-theme { background: var(--pop); color: var(--tone-ink); }
.tool-theme .moon, :root.dark .tool-theme .sun { display: none; }
:root.dark .tool-theme .moon { display: block; }
@media (prefers-color-scheme: dark) {
    :root:not(.light) .tool-theme .sun { display: none; }
    :root:not(.light) .tool-theme .moon { display: block; }
}
@media (max-width: 760px) { .top-links { display: none; } }

main { max-width: 48rem; margin: 0 auto; padding: 56px 16px 72px; display: grid; gap: 44px; }

/* The headline, like every page of the site: a tag, then big type. */
.hero { display: grid; gap: 16px; justify-items: start; }
.chip {
    display: inline-block; font-size: 12px; font-weight: 700; line-height: 1.3; padding: 3px 10px;
    border: 2px solid var(--line); border-radius: 10px; background: var(--card); box-shadow: 2px 2px 0 0 var(--line);
}
.chip-small { font-size: 11.5px; padding: 1px 8px; border-radius: 8px; box-shadow: none; vertical-align: 1px; }
.headline { font-size: clamp(34px, 7vw, 52px); font-weight: 700; letter-spacing: -0.02em; display: flex; align-items: center; gap: 18px; }
.headline-small { font-size: clamp(28px, 5.5vw, 40px); }
.headline-text { background-image: linear-gradient(var(--underline, var(--accent)), var(--underline, var(--accent))); background-size: 100% 6px; background-repeat: no-repeat; background-position: 0 94%; padding-bottom: 6px; }
.headline-text.level-operational { --underline: var(--ok); }
.headline-text.level-degraded { --underline: var(--slow); }
.headline-text.level-partial { --underline: var(--partial); }
.headline-text.level-major { --underline: var(--major); }
.headline-text.level-maintenance { --underline: var(--maint); }
.headline-dot { flex: none; width: 0.55em; height: 0.55em; border-radius: 50%; border: 3px solid var(--tone-ink); background: var(--ok); box-shadow: 3px 3px 0 0 var(--line); }
.headline-dot.level-degraded { background: var(--slow); }
.headline-dot.level-partial { background: var(--partial); }
.headline-dot.level-major { background: var(--major); }
.headline-dot.level-maintenance { background: var(--maint); }
.lede { color: var(--ink-dim); max-width: 44ch; }

.block { display: grid; gap: 14px; }
.block > h2 { font-size: 20px; }
.meta, .quiet { color: var(--ink-dim); font-size: 13px; }
.more { font-weight: 700; font-size: 14px; }

/* Incidents and maintenance. */
.incident { padding: 18px 20px; display: grid; gap: 8px; }
.incident h3 { font-size: 18px; }
.incident-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.impact-minor .chip-impact { background: var(--pop); color: var(--tone-ink); }
.impact-major .chip-impact, .impact-critical .chip-impact { background: var(--accent); color: #15120d; }
.impact-maintenance .chip-impact { background: var(--maint); color: var(--tone-ink); }

/* The parts and their 90 days. */
.components { padding: 0; overflow: visible; }
.component { padding: 18px 20px; display: grid; gap: 12px; }
.component + .component { border-top: 2px dashed color-mix(in srgb, var(--ink) 22%, transparent); }
.component-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.component-head h3 { font-size: 17px; }
.component-about { color: var(--ink-dim); font-size: 13px; }
.level {
    flex: none; font-size: 12.5px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px;
    padding: 2px 10px 2px 6px; border: 2px solid var(--line); border-radius: 999px; background: var(--card);
}
.level::before { content: ''; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--tone-ink); background: var(--ok); }
.level.level-degraded::before { background: var(--slow); }
.level.level-partial::before { background: var(--partial); }
.level.level-major::before { background: var(--major); }
.level.level-maintenance::before { background: var(--maint); }

.bars { list-style: none; padding: 0; display: flex; gap: 2px; height: 36px; }
.bar { flex: 1 1 0; min-width: 0; background: var(--ok); border-radius: 3px; position: relative; }
.bar.level-none { background: var(--empty); }
.bar.level-degraded { background: var(--slow); }
.bar.level-partial { background: var(--partial); }
.bar.level-major { background: var(--major); }
.bar.level-maintenance { background: var(--maint); }
.bar:hover, .bar:focus-visible { box-shadow: 0 0 0 2px var(--ink); outline: none; }
.tip {
    display: none; position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%);
    width: max-content; max-width: 220px; background: var(--card); color: var(--ink); border: 2px solid var(--line);
    border-radius: 12px; box-shadow: var(--stamp); padding: 8px 11px; font-size: 12.5px; line-height: 1.45; z-index: 5; pointer-events: none;
}
.tip strong { display: block; }
.bar:hover .tip, .bar:focus .tip { display: block; }
.bar:nth-child(-n+12) .tip { left: 0; transform: none; }
.bar:nth-last-child(-n+12) .tip { left: auto; right: 0; transform: none; }
.bars-legend { display: flex; align-items: center; gap: 10px; color: var(--ink-dim); font-size: 12px; white-space: nowrap; }
.bars-legend .rule { flex: 1; border-top: 1px solid color-mix(in srgb, var(--ink) 22%, transparent); }
.bars-legend .uptime { color: var(--ink); font-weight: 700; }
.legend { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--ink-dim); font-size: 12.5px; }
.legend li { display: inline-flex; align-items: center; gap: 6px; }
.swatch { width: 12px; height: 12px; border-radius: 3px; background: var(--ok); border: 1.5px solid var(--line); }
.swatch.level-degraded { background: var(--slow); }
.swatch.level-partial { background: var(--partial); }
.swatch.level-major { background: var(--major); }
.swatch.level-maintenance { background: var(--maint); }
.swatch.level-none { background: var(--empty); }

/* Past incidents, a day at a time. */
.days { padding: 4px 20px; }
.day { display: grid; gap: 8px; padding: 14px 0; }
.day + .day { border-top: 2px dashed color-mix(in srgb, var(--ink) 18%, transparent); }
.day h3, .month h2 { font-size: 14px; }
.past-incident { display: grid; gap: 4px; }
.past-incident > a { font-weight: 700; }
.month .days { padding: 14px 20px; display: grid; gap: 14px; }

.detail { padding: 20px; display: grid; gap: 10px; }
.timeline { list-style: none; padding: 0; margin-top: 8px; display: grid; gap: 20px; }
.timeline li { display: grid; gap: 6px; padding-left: 18px; border-left: 2px solid var(--line); }
.timeline h2 { font-size: inherit; }
.timeline p { white-space: pre-line; }

/* Getting updates. */
.subscribe { padding: 22px; display: grid; gap: 12px; }
.subscribe h2 { font-size: 20px; }
.subscribe > p { color: var(--ink-dim); }
.subscribe form { display: grid; gap: 8px; }
.subscribe label { font-weight: 700; font-size: 13px; }
.row { display: flex; gap: 10px; }
input[type=email] {
    flex: 1; min-width: 0; font: inherit; color: var(--ink); background: var(--paper); border: 2px solid var(--line);
    border-radius: 12px; padding: 9px 12px; min-height: 46px;
}
input[type=email]:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
button[type=submit] {
    font: inherit; font-weight: 700; font-size: 14px; color: #15120d; background: var(--accent); border: 2px solid var(--line);
    border-radius: 12px; box-shadow: var(--stamp); padding: 9px 18px; min-height: 46px; cursor: pointer;
    transition: transform 140ms var(--ease-out), box-shadow 140ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { button[type=submit]:hover { transform: translate(-1px, -1px); box-shadow: var(--stamp-lg); } }
button[type=submit]:active { transform: translate(4px, 4px); box-shadow: 0 0 0 0 var(--line); transition-duration: 60ms; }
.small { color: var(--ink-dim); font-size: 12.5px; }
.error { color: var(--major); font-weight: 700; font-size: 13px; }
:root.dark .error { color: #ff8b78; }

.message { padding: 26px; display: grid; gap: 16px; justify-items: start; max-width: 36rem; }
.message h1 { font-size: 28px; }
.message > p { color: var(--ink-dim); }
.pager { display: flex; justify-content: space-between; font-weight: 700; }

/* The footer: the website's. */
.foot { border-top: 2px solid var(--line); background: var(--card); position: relative; z-index: 0; }
.foot-in, .foot-base { max-width: 48rem; margin: 0 auto; padding: 48px 24px; display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.foot-about { max-width: 30ch; display: grid; gap: 16px; }
.foot-about p { font-size: 14px; color: var(--ink-dim); line-height: 1.65; }
.foot-cols { display: flex; gap: 56px; }
.foot-head { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.foot ul { list-style: none; padding: 0; margin-top: 16px; display: grid; gap: 10px; }
.foot ul a { font-size: 13px; color: var(--ink-dim); text-decoration: none; }
.foot ul a:hover { color: var(--ink); text-decoration: underline; }
.foot-base { padding-top: 20px; padding-bottom: 32px; border-top: 2px solid var(--line); align-items: center; max-width: calc(48rem - 48px); padding-left: 0; padding-right: 0; }
.foot-base p { font-size: 12px; color: var(--ink-faint); }

/* A phone shows the last 30 days. */
@media (max-width: 600px) {
    main { padding-top: 40px; gap: 36px; }
    .bar:nth-child(-n+60) { display: none; }
    .bars-legend .ago { display: none; }
    .bar:nth-child(-n+70) .tip { left: 0; transform: none; }
    .row { flex-direction: column; }
    .foot-base { margin: 0 24px; }
    .component-head { flex-direction: column; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) { .tap, button[type=submit] { transition: none; } }