/* Geist fonts, locally hosted. SIL OFL 1.1: /static/fonts/Geist-OFL.txt */
@font-face {
  font-family: "Geist Mono";
  src: url("/static/fonts/GeistMonoVF.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Geist Pixel Square";
  src: url("/static/fonts/GeistPixel-Square.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-body: var(--font-mono);
  --font-pixel: "Geist Pixel Square", var(--font-mono);

  --theme-color-scheme: light;
  --theme-page: #f7f8fa;
  --theme-standalone: #fff;
  --theme-surface: #fff;
  --theme-text: #252725;
  --theme-brand: #183db7;
  --theme-accent: #244cc9;
  --theme-muted: #757c8d;
  --theme-header-text: #61615e;
  --theme-secondary-text: #626361;
  --theme-copy-text: #5f635f;
  --theme-rule: #183db721;
  --theme-control-rule: #183db722;
  --theme-film-rule: #183db730;
  --theme-content-rule: #ddded7;
  --theme-modal-rule: #e2e3e6;
  --theme-placeholder: #dbe0e8;
  --theme-indicator: #8b9ccf;
  --theme-hint-divider: #b1b6c4;
  --theme-wordmark: #e3e8f3;
  --theme-particles: #dce7f7;
  --theme-on-brand: white;
  --theme-departure: white;
  --theme-skip: #fffefa;
  --theme-close: #f4f5f7;
  --theme-close-hover: #e9ecf2;
  --theme-backdrop: #eef0f680;
  --theme-modal-shadow: #101b4926;
  --theme-card-shadow: #15264d0a;
  --theme-tooltip-text: white;
  --theme-tooltip: var(--theme-brand);
  --theme-hover: rgb(100 120 145 / 10%);
  --theme-folder-focus: #174e98;
  color-scheme: var(--theme-color-scheme);
}

html[data-theme="dark"] {
  --theme-color-scheme: dark;
  --theme-page: #1535e8;
  --theme-standalone: #1535e8;
  --theme-surface: #102bbc;
  --theme-text: #f7f6f2;
  --theme-brand: #f7f6f2;
  --theme-accent: #f7f6f2;
  --theme-muted: #c5cef8;
  --theme-header-text: #c5cef8;
  --theme-secondary-text: #c5cef8;
  --theme-copy-text: #e0e5fc;
  --theme-rule: #f7f6f233;
  --theme-control-rule: #f7f6f24d;
  --theme-film-rule: #f7f6f24d;
  --theme-content-rule: #f7f6f233;
  --theme-modal-rule: #f7f6f233;
  --theme-placeholder: #102bbc;
  --theme-indicator: #f7f6f2;
  --theme-hint-divider: #b1bef5;
  --theme-wordmark: #425eee;
  --theme-particles: #425eee;
  --theme-on-brand: #1535e8;
  --theme-departure: #1535e8;
  --theme-skip: #102bbc;
  --theme-close: #2943c5;
  --theme-close-hover: #3f57cc;
  --theme-backdrop: #08166bb3;
  --theme-modal-shadow: #060f4d66;
  --theme-card-shadow: #060f4d33;
  --theme-tooltip-text: #1535e8;
  --theme-tooltip: #f7f6f2;
  --theme-hover: rgb(247 246 242 / 12%);
  --theme-folder-focus: #f7f6f2;
}

body {
  font-family: var(--font-body);
  font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
}

button, input, select, textarea {
  font: inherit;
}

/* Shared page chrome; page styles retain their visual differences. */
.skip-link { position: fixed; top: -80px; left: 20px; padding: 16px; background: var(--theme-surface); }
.skip-link:focus { top: 16px; }
.back-header { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; font-size: 11px; color: var(--theme-header-text); }
.back-header a { padding: 8px 0; color: inherit; text-decoration: none; }
.back-header a span { margin-right: 9px; }
@media (max-width: 740px) {
  .back-header { font-size: 10px; }
}

/* Shared presentation for email and social hints. */
.hover-hint {
  position: absolute;
  z-index: 1;
  bottom: 100%;
  left: 50%;
  translate: var(--hint-x, -50%) 2px;
  margin-bottom: 4px;
  border-radius: 6px;
  padding: 2px 8px;
  color: var(--theme-tooltip-text);
  background: var(--theme-tooltip);
  font: 12px/1.5 var(--font-body);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 100ms ease-out, translate 100ms ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .hover-hint { transition: none; }
}