/*
 * Immiscible over the shared plain pages: legal, changelog, status, errors,
 * and the few screens still drawn by site.css (single sign-on, OAuth
 * consent, phone sign-in). Loaded after site.css and window.css; the header,
 * footer, colours and type come from window.css, and this file brings the
 * site.css content into the same voice. Scoped so it never touches the
 * homepage, the content pages (.ix), sign-in (.wa-page) or the console.
 */

body.im:not(.ix, .mx, .console, .home, .wa-page) {
  --ink-soft: var(--text-soft); --muted: var(--text-muted);
  --paper-raised: #FFFFFF; --night: var(--ink); --field: var(--cloth);
  --f-display: "Timeless Sans", ui-sans-serif, system-ui, sans-serif;
  --f-body: "Timeless Sans", ui-sans-serif, system-ui, sans-serif;
  --f-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
}
body.im:not(.ix, .mx, .console, .home, .wa-page)::before { display: none; }
.im:not(.ix, .mx, .console, .home, .wa-page) .section.first { padding-top: clamp(56px, 7vw, 104px); }
.im:not(.ix, .mx, .console, .home, .wa-page) .display,
.im:not(.ix, .mx, .console, .home, .wa-page) .prose h1 { font: 300 clamp(36px, 4vw, 54px)/1.06 var(--f-body); letter-spacing: -0.035em; color: var(--ink); text-wrap: balance; }
.im:not(.ix, .mx, .console, .home, .wa-page) .prose h2 { font: 400 clamp(24px, 2.2vw, 30px)/1.2 var(--f-body); letter-spacing: -0.02em; color: var(--ink); }
.im:not(.ix, .mx, .console, .home, .wa-page) .prose h3 { font-family: var(--f-body); font-weight: 500; letter-spacing: -0.01em; }
.im:not(.ix, .mx, .console, .home, .wa-page) .display em { font-family: "Timeless Serif", Georgia, serif; font-weight: 300; font-style: italic; color: inherit; }
.im:not(.ix, .mx, .console, .home, .wa-page) .prose { color: var(--text-soft); font-size: 16.5px; line-height: 1.65; }
.im:not(.ix, .mx, .console, .home, .wa-page) .prose a { color: #1E2F6E; text-underline-offset: 3px; }
.im:not(.ix, .mx, .console, .home, .wa-page) .prose code { font-family: var(--f-mono); font-size: 0.9em; }
.im:not(.ix, .mx, .console, .home, .wa-page) .prose table { font-size: 15px; }
.im:not(.ix, .mx, .console, .home, .wa-page) .label,
.im:not(.ix, .mx, .console, .home, .wa-page) .eyebrow { font: 500 13.5px/1.3 var(--f-body); letter-spacing: 0; text-transform: none; color: var(--text-muted); }
.im:not(.ix, .mx, .console, .home, .wa-page) .eyebrow .rule { background: var(--line); }
.im:not(.ix, .mx, .console, .home, .wa-page) .lede { color: var(--text-muted); font-weight: 300; }
.im:not(.ix, .mx, .console, .home, .wa-page) .fine { color: var(--text-muted); }
.im:not(.ix, .mx, .console, .home, .wa-page) .btn { border-radius: 10px; font: 500 15px/1 var(--f-body); letter-spacing: 0; text-transform: none; }
.im:not(.ix, .mx, .console, .home, .wa-page) .btn-ink { background: #1E2F6E; border-color: #1E2F6E; color: #FFFFFF; }
.im:not(.ix, .mx, .console, .home, .wa-page) .btn-ink:hover { background: #26397E; border-color: #26397E; }
.im:not(.ix, .mx, .console, .home, .wa-page) .btn-ghost { border-color: #AEB8D2; color: var(--ink); background: transparent; }
.im:not(.ix, .mx, .console, .home, .wa-page) .form input,
.im:not(.ix, .mx, .console, .home, .wa-page) .form select,
.im:not(.ix, .mx, .console, .home, .wa-page) .form textarea { border-radius: 10px; background: #FFFFFF; border-color: #AEB8D2; font: 400 16px/1.3 var(--f-body); }
.im:not(.ix, .mx, .console, .home, .wa-page) .form input:focus,
.im:not(.ix, .mx, .console, .home, .wa-page) .form select:focus,
.im:not(.ix, .mx, .console, .home, .wa-page) .form textarea:focus { border-color: #1E2F6E; box-shadow: 0 0 0 3px rgba(30, 47, 110, 0.18); }
.im:not(.ix, .mx, .console, .home, .wa-page) .pill { border-radius: 999px; font: 500 13.5px/1 var(--f-body); letter-spacing: 0; text-transform: none; background: var(--sky-pale); color: var(--text-soft); }
.im:not(.ix, .mx, .console, .home, .wa-page) .pill.ok { background: #1E2F6E; color: #FFFFFF; }
.im:not(.ix, .mx, .console, .home, .wa-page) .pill.bad { background: #F0563A; color: #FFFFFF; }

/* the screens site.css still draws: single sign-on, consent, phone sign-in */
.im.auth-page:not(.wa-page) .auth-art { background: #1E2F6E url("/assets/textile-cobalt.webp") 0 0 / 320px 320px; }
.im.auth-page:not(.wa-page) .auth-art::after { display: none; }
.im.auth-page:not(.wa-page) .logo .word { font: 600 21px/1 var(--f-body); letter-spacing: -0.045em; }
.im.auth-page:not(.wa-page) .auth-form .display.l { font-size: clamp(32px, 3vw, 40px); }