@import url('/fonts/fonts.css');

/* One palette and material, shared by the run site, app and Base frames. */
:root {
  color-scheme: light;
  --ev-paper: #fbfaf7;
  --ev-paper-hi: #fefdfb;
  --ev-surface: #ffffff;
  --ev-ink: #0f1012;
  --ev-ink-2: #16181d;
  --ev-muted: #5b606b;
  --ev-faint: #8a8f99;
  --ev-line: #e3e4e6;
  --ev-field: #d9dbdf;
  --ev-tile: #eff0f2;
  --ev-covered: #1db53a;
  --ev-due: #f5b000;
  --ev-overdue: #e5322f;
  --ev-missing: #8a8f99;
  --ev-spectrum: #c9e6ff, #e6dcff, #ffdcec, #fff0c7, #d8f6e3;
  --ev-font: Onest, Arial, sans-serif;
  --ev-mono: 'JetBrains Mono', monospace;
  --rer-font-body: var(--ev-font);
  --rer-font-heading: var(--ev-font);
  --rer-font-mono: var(--ev-mono);
  --rer-page: var(--ev-paper);
  --rer-surface: var(--ev-surface);
  --rer-text: var(--ev-ink);
  --rer-muted: var(--ev-muted);
  --rer-border: var(--ev-field);
  --rer-focus: var(--ev-ink);
  --rer-link: var(--ev-ink);
  --rer-radius: 16px;
  --rer-accent: var(--ev-ink-2);
  --rer-accent-text: var(--ev-surface);
  --rer-logo: url('/brand/mark.svg');
}
*, *::before, *::after { box-sizing: border-box; }
:focus-visible { outline: 3px solid var(--ev-ink); outline-offset: 3px; }
.slab {
  position: relative;
  min-width: 0;
  padding: 10px;
  border: 1px solid transparent;
  border-radius: 22px;
  background: linear-gradient(180deg, #ffffffcc, #f4f6f8cc) padding-box,
    linear-gradient(125deg, #ffffffb3, var(--ev-spectrum), #ffffffb3) border-box;
  box-shadow: inset 0 1px 0 #fff, 0 1px 1px #10121608, 0 24px 48px -24px #1012162e;
}
.slab > .card {
  min-width: 0;
  height: 100%;
  border: 1px solid var(--ev-line);
  border-radius: 16px;
  background: var(--ev-surface);
}

/* Base's sign-in/setup retain their forms, markup and security policy. */
html.rer-themed body:has(> main > :is(.brand, .rer-brand)) {
  display: grid; align-content: center; justify-items: center; align-items: start; grid-template-rows: auto auto;
  min-height: 100dvh; padding: 64px 16px;
  background: radial-gradient(ellipse at 50% 38%, var(--ev-paper-hi), transparent 55%), var(--ev-paper);
  color: var(--ev-ink); font: 16px/1.5 var(--ev-font);
}
html.rer-themed main:has(> :is(.brand, .rer-brand)) {
  position: relative; align-self: center; width: 100%; max-width: 520px; padding: 40px;
  border: 10px solid transparent; border-radius: 22px;
  background: linear-gradient(var(--ev-surface), var(--ev-surface)) padding-box,
    linear-gradient(125deg, #ffffff, #edf5fc, #f2eff9, #fff3f0, #f3faef, #ffffff) border-box;
  box-shadow: inset 0 0 0 1px var(--ev-line), 0 1px 1px #10121608, 0 24px 48px -24px #1012162e;
}
html.rer-themed main:has(> :is(.brand, .rer-brand)) :is(.brand, .rer-brand) {
  justify-content: center; margin: 0 0 32px; color: var(--ev-ink); font-size: 28px; font-weight: 600;
}
html.rer-themed main:has(> .rer-brand) > .rer-brand { padding-bottom: 28px; border-bottom: 1px solid var(--ev-line); }
html.rer-themed main:has(> :is(.brand, .rer-brand)) h1 { margin: 0 0 24px; font-size: 40px; font-weight: 800; line-height: 1.05; letter-spacing: -.035em; text-align: center; }
html.rer-themed main:has(> :is(.brand, .rer-brand)) label { font-size: 15px; font-weight: 500; }
html.rer-themed main:has(> :is(.brand, .rer-brand)) input:not([type=checkbox]):not([type=hidden]) { min-height: 52px; border: 1px solid var(--ev-field); border-radius: 10px; color: var(--ev-ink); background: var(--ev-surface); }
html.rer-themed main:has(> :is(.brand, .rer-brand)) button { min-height: 48px; border-radius: 12px; font-size: 17px; font-weight: 600; }
html.rer-themed main:has(> :is(.brand, .rer-brand)) button:hover { box-shadow: none; background: var(--ev-ink); }
html.rer-themed main:has(> .rer-brand) dl { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 16px 0; }
html.rer-themed main:has(> .rer-brand) dt { color: var(--ev-ink); font-size: 15px; font-weight: 500; padding: 12px 0 12px 14px; border: 1px solid var(--ev-field); border-right: 0; border-radius: 10px 0 0 10px; }
html.rer-themed main:has(> .rer-brand) dd { margin: 0; padding: 12px 14px 12px 8px; border: 1px solid var(--ev-field); border-left: 0; border-radius: 0 10px 10px 0; }
html.rer-themed main:has(> .rer-brand) label:has(input[type=checkbox]) { font-weight: 400; }
html.rer-themed #rer-dev-badge { position: static; width: fit-content; max-width: 100%; margin: 16px auto; }
@media (max-width: 600px) {
  .slab { padding: 8px; }
  html.rer-themed body:has(> main > :is(.brand, .rer-brand)) { padding: 48px 16px; }
  html.rer-themed main:has(> :is(.brand, .rer-brand)) { padding: 28px 20px; border-width: 8px; }
  html.rer-themed main:has(> :is(.brand, .rer-brand)) :is(.brand, .rer-brand) { font-size: 22px; }
  html.rer-themed main:has(> :is(.brand, .rer-brand)) h1 { font-size: 32px; }
  html.rer-themed main:has(> :is(.brand, .rer-brand)) input:not([type=checkbox]):not([type=hidden]) { min-height: 48px; }
  html.rer-themed main:has(> :is(.brand, .rer-brand)) button { font-size: 16px; }
}
@media (prefers-reduced-transparency: reduce), (forced-colors: active) {
  .slab, html.rer-themed main:has(> :is(.brand, .rer-brand)) { background: var(--ev-surface); border: 1px solid var(--ev-field); box-shadow: none; }
  .slab::before, .slab::after { display: none; }
}