/* Associates: dark green, a tech look (Viktor, 2026-10-22, from a mockup
   of cyan and green, dark and light). kansli's layout and stylesheet, its
   tokens repainted here (DESIGN.md, "Associates"); red still means unread
   and destruction. IBM Plex, served from here like kansli's fonts. */

@font-face { font-family: "IBM Plex Sans"; src: url("fonts/IBMPlexSans-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("fonts/IBMPlexSans-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("fonts/IBMPlexSans-600.woff2") format("woff2"); font-weight: 600 900; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/IBMPlexMono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/IBMPlexMono-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/IBMPlexMono-600.woff2") format("woff2"); font-weight: 600 900; font-display: swap; }

:root {
    color-scheme: dark;

    --paper: #0b0f14;
    --ink: #d7dee6;
    --muted: #8d9aa8;
    --rule: #1f2a36;
    --rule-strong: #2b3a4a;

    /* The accent: green, with dark text on it. */
    --pine: #4ade80;
    --pine-deep: #22c55e;
    --on-pine: #061218;
    --pine-rgb: 74 222 128;

    /* The rail: near black, not the accent. */
    --rail: #0e131a;
    --rail-deep: #151d27;
    --on-rail: #d7dee6;
    --on-pine-rgb: 215 222 230;

    --surface: #121921;
    --on-label: #f2f5f8;
    --zebra: #0e141b;
    --hover: #16202b;
    --picked: #14281c;
    --tint: #132018;
    --thumb: #16202b;
    --quote: #a3afbc;
    --mark: #3d4a17;
    --light: var(--surface);

    --wax: #f87171;
    --wax-deep: #ef4444;
    --wax-ring: #7f1d1d;
    --wax-rgb: 248 113 113;
    --error-bg: #2a1416;
    --error-ink: #fca5a5;
    --ok-dot: #4ade80;
    --shadow: 0 0 0;

    --r: 2px;
    --r-lg: 2px;

    --ui: "IBM Plex Sans", system-ui, sans-serif;
    --letter: "IBM Plex Sans", system-ui, sans-serif;
    --mono: "IBM Plex Mono", ui-monospace, "DejaVu Sans Mono", monospace;
}

/* Monospace for the frame: the rail, headings, times and tags. */
.rail, .wordmark, .wordmark-large, .pane-head h1, .letter h1, h2, h3, time, .count,
.ai-tag, .menu-head, .crumbs, .tagline, .key, .codes, .device-code { font-family: var(--mono); }
.tagline { font-style: normal; }

.rail { border-right: 1px solid var(--rule); }
.wordmark { font-weight: 600; font-size: 1.05rem; letter-spacing: 0; white-space: nowrap; }
.wordmark::after, .wordmark-large::after { content: "_"; color: var(--pine); }

/* Write is the one filled button; folders are rows, not boxes (kansli's
   "rail as buttons"), and the current one is tinted green. */
.write { background: var(--pine); color: var(--on-pine); border-color: var(--pine); font-weight: 600; }
.write:hover { background: var(--pine-deep); }
.rail .folders a, .rail .search-link { border-color: transparent; }
.rail .folders a:hover, .rail .search-link:hover { border-color: transparent; }
.rail .folders a.current, .rail .search-link.current { background: rgb(var(--pine-rgb) / .12); color: var(--pine); border-color: transparent; }
.rail .folders a.current .icon, .rail .search-link.current .icon { color: var(--pine); }

.primary { font-weight: 600; }
.primary:hover { color: var(--on-pine); }

/* On a phone, style.css's top bar: one row of wordmark, Write, Search,
   Library and the account. The buttons keep an outline there (the rows
   above are the desktop rail's), the monospace wordmark is smaller, and
   Write is its icon alone sooner than kansli's, the name being wider. */
@media (max-width: 44rem) {
    .wordmark { font-size: .95rem; }
    .rail .search-link { border-color: #3d4f63; }
    .rail .search-link:hover { border-color: var(--muted); }
    .rail .search-link.current { background: rgb(var(--pine-rgb) / .12); color: var(--pine); border-color: var(--pine); }
    .avatar { box-shadow: inset 0 0 0 1px var(--rule-strong); }
}
@media (max-width: 28rem) {
    .write { padding: 0; min-width: 2.25rem; justify-content: center; }
    .write-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}