/* The site's look on every page: its fonts, its colors in the light and the
   dark theme, and the small button groups for the language and the theme.
   The theme follows the system unless the visitor chose one (data-theme on
   <html>, see src/theme.ts). */

@font-face {
  font-family: "Instrument Serif";
  src: url("/fonts/instrument-serif-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("/fonts/instrument-serif-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("/fonts/ibm-plex-sans-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("/fonts/ibm-plex-sans-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("/fonts/ibm-plex-sans-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/ibm-plex-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/ibm-plex-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

:root {
  color-scheme: light dark;
  --paper: #f3f0e8;
  --paper-2: #e8e3d6;
  --ink: #15171a;
  --ink-2: #555a61;
  --ink-3: #74777b;
  --rule: #cdc5b4;
  --accent: #0b7366;
  --on-accent: #ffffff;
  --redact: #15171a;
  --on-redact: #f3f0e8;
  /* Panels of the web vault and the share page. */
  --surface: #faf8f3;
  --surface-2: #ece8de;
  --surface-3: #e3ddcf;
  --line: #dcd5c6;
  --accent-soft: #d9ebe5;
  --danger: #b3261e;
  --warning: #8f5207;
  --serif: "Instrument Serif", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
:root[data-theme="light"] {
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0f1113;
    --paper-2: #171a1d;
    --ink: #ebe6da;
    --ink-2: #a19f97;
    --ink-3: #7d7c76;
    --rule: #2b2f34;
    --accent: #3fd6c2;
    --on-accent: #062a26;
    --redact: #000000;
    --on-redact: #ebe6da;
    --surface: #16191c;
    --surface-2: #1c1f23;
    --surface-3: #25292e;
    --line: #262a2f;
    --accent-soft: #11302c;
    --danger: #f28b82;
    --warning: #f2c14e;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0f1113;
  --paper-2: #171a1d;
  --ink: #ebe6da;
  --ink-2: #a19f97;
  --ink-3: #7d7c76;
  --rule: #2b2f34;
  --accent: #3fd6c2;
  --on-accent: #062a26;
  --redact: #000000;
  --on-redact: #ebe6da;
  --surface: #16191c;
  --surface-2: #1c1f23;
  --surface-3: #25292e;
  --line: #262a2f;
  --accent-soft: #11302c;
  --danger: #f28b82;
  --warning: #f2c14e;
}

/* ----- language and theme ----------------------------------------------- */

/* One small button in the header (the language's code and the theme's
   icon) and the menu it opens (src/prefs.ts). */
.prefs {
  position: relative;
  flex: none;
}
.prefs-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  padding: 0 9px;
  border: 1px solid var(--rule);
  border-radius: 0;
  background: none;
  color: var(--ink-2);
  font: 500 0.7rem/1 var(--mono);
  letter-spacing: 0.08em;
  cursor: pointer;
}
.prefs-button:hover,
.prefs-button[aria-expanded="true"] {
  border-color: var(--ink-2);
  color: var(--ink);
}
.prefs svg {
  display: block;
  flex: none;
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* The button shows the icon of the theme in use, already on the first paint
   (data-theme is set in <head>). */
.prefs-button svg {
  display: none;
}
:root:not([data-theme]) .prefs-button [data-theme-icon="system"],
:root[data-theme="light"] .prefs-button [data-theme-icon="light"],
:root[data-theme="dark"] .prefs-button [data-theme-icon="dark"] {
  display: block;
}

.prefs-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 20;
  width: max-content;
  min-width: 184px;
  max-width: calc(100vw - 16px);
  padding: 4px 0;
  border: 1px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  box-shadow: 4px 4px 0 var(--rule);
}
.prefs-menu[hidden] {
  display: none;
}
.prefs-group + .prefs-group {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid var(--rule);
}
.prefs-label {
  display: block;
  padding: 8px 14px 4px;
  font: 500 0.66rem/1.2 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.prefs-menu [role="menuitemradio"] {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 36px;
  padding: 6px 14px;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--ink-2);
  font: 400 0.9rem/1.2 var(--sans);
  text-align: left;
  cursor: pointer;
}
.prefs-menu [role="menuitemradio"]:hover,
.prefs-menu [role="menuitemradio"]:focus {
  background: var(--paper-2);
  color: var(--ink);
}
.prefs-menu [role="menuitemradio"][aria-checked="true"] {
  color: var(--ink);
  font-weight: 500;
}
.prefs-mark {
  flex: none;
  width: 7px;
  height: 7px;
  border: 1px solid var(--rule);
  border-radius: 50%;
}
[aria-checked="true"] > .prefs-mark {
  border-color: var(--accent);
  background: var(--accent);
}
.prefs-button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.prefs-menu [role="menuitemradio"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}