/* ==========================================================================
   kumulativ.com — set in the "Maison" design system the apps share:
   neutral linen/ink palette on paper, Google Sans for the interface,
   EB Garamond for display and for anything meant to be read at length,
   Space Mono for the technical layer. One accent, used sparingly.
   Hand-written CSS. No frameworks. Follows the system theme like the apps.
   ========================================================================== */

@font-face { font-family: "Google Sans Variable"; font-style: normal; font-weight: 300 700; font-display: swap; src: url(/static/fonts/google-sans-normal.woff2) format("woff2"); }
@font-face { font-family: "Google Sans Variable"; font-style: italic; font-weight: 300 700; font-display: swap; src: url(/static/fonts/google-sans-italic.woff2) format("woff2"); }
@font-face { font-family: "EB Garamond Variable"; font-style: normal; font-weight: 400 800; font-display: swap; src: url(/static/fonts/eb-garamond-normal.woff2) format("woff2"); }
@font-face { font-family: "EB Garamond Variable"; font-style: italic; font-weight: 400 800; font-display: swap; src: url(/static/fonts/eb-garamond-italic.woff2) format("woff2"); }
@font-face { font-family: "Space Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(/static/fonts/space-mono-400.woff2) format("woff2"); }
@font-face { font-family: "Space Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url(/static/fonts/space-mono-700.woff2) format("woff2"); }

:root {
  color-scheme: light;
  --font-sans: "Google Sans Variable", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: "EB Garamond Variable", ui-serif, Georgia, serif;
  --font-mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;

  --linen-100: #f4f4f5;
  --linen-200: #e4e4e7;
  --linen-300: #c5c5c8;

  --ink-300: #adadb0;
  --ink-400: #88888a;
  --ink-500: #6a6a6c;
  --ink-600: #51514f;
  --ink-700: #38383a;
  --ink-800: #28282a;
  --ink-900: #1a1a1c;

  --paper: #f5f5f6;
  --paper-2: #efeff0;
  --card: #fbfbfc;
  --card-edge: #e2e2e5;

  --accent: #4a4a4c;
  --accent-2: #6a6a6c;
  --sage: #5a6b5d;
  --rust: #a85533;
  --gold: #b8985a;
  --plum: #6b4858;
  --iron: #4a5560;
  --good: #5a7a5d;

  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-float: 0 18px 40px -24px rgba(26, 26, 28, 0.35);

  --shell: 1280px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section: clamp(2.75rem, 5vw, 4.5rem);
}

/* The dark palette is the apps' own; a section can opt into it with .dark. */
.dark, :root[data-theme="dark"] {
  color-scheme: dark;
  --linen-100: #1d1d1f;
  --linen-200: #2b2b2d;
  --linen-300: #38383a;
  --ink-300: #4d4d4f;
  --ink-400: #69696b;
  --ink-500: #858587;
  --ink-600: #a3a3a5;
  --ink-700: #c2c2c4;
  --ink-800: #dcdcde;
  --ink-900: #ededee;
  --paper: #131315;
  --paper-2: #18181a;
  --card: #1e1e20;
  --card-edge: #2a2a2c;
  --accent: #b8b8bb;
  --accent-2: #9a9a9d;
  --sage: #8a9a8d;
  --rust: #c97a55;
  --gold: #d4b67a;
  --plum: #a87f93;
  --iron: #8595a4;
  --good: #8aa68d;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-float: 0 18px 40px -24px rgba(0, 0, 0, 0.7);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --linen-100: #1d1d1f;
    --linen-200: #2b2b2d;
    --linen-300: #38383a;
    --ink-300: #4d4d4f;
    --ink-400: #69696b;
    --ink-500: #858587;
    --ink-600: #a3a3a5;
    --ink-700: #c2c2c4;
    --ink-800: #dcdcde;
    --ink-900: #ededee;
    --paper: #131315;
    --paper-2: #18181a;
    --card: #1e1e20;
    --card-edge: #2a2a2c;
    --accent: #b8b8bb;
    --accent-2: #9a9a9d;
    --sage: #8a9a8d;
    --rust: #c97a55;
    --gold: #d4b67a;
    --plum: #a87f93;
    --iron: #8595a4;
    --good: #8aa68d;
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-float: 0 18px 40px -24px rgba(0, 0, 0, 0.7);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--paper); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-900);
  font-family: var(--font-sans);
  font-size: 14.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
img, svg { display: block; max-width: 100%; }
i { font-style: normal; }
::selection { background: color-mix(in srgb, var(--accent) 22%, transparent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ── primitives ─────────────────────────────────────────── */
.kf-shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }
.kf-serif { font-family: var(--font-serif); }
.kf-mono { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.02em; }
.kf-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-400);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.kf-label .kf-num { color: var(--ink-600); }
.kf-eyebrow { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-400); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.6em; }
.kf-num { font-family: var(--font-mono); color: var(--ink-600); }

.kf-title-xl { font-family: var(--font-serif); font-weight: 500; font-size: clamp(2.75rem, 5.6vw, 4.5rem); line-height: 1.04; letter-spacing: -0.015em; text-wrap: balance; }
.kf-title-l  { font-family: var(--font-serif); font-weight: 500; font-size: clamp(2rem, 3.6vw, 2.9rem); line-height: 1.1; letter-spacing: -0.012em; text-wrap: balance; }
.kf-title-m  { font-family: var(--font-serif); font-weight: 500; font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1.15; letter-spacing: -0.01em; text-wrap: balance; }
.kf-title-s  { font-family: var(--font-serif); font-weight: 500; font-size: 1.35rem; line-height: 1.25; }
.kf-dim { color: var(--ink-500); font-style: italic; font-weight: 400; }
.kf-lede { font-size: 15px; line-height: 1.65; color: var(--ink-600); max-width: 34rem; }
.kf-lede em, .kf-prose em { font-style: italic; }

/* Buttons — the app's sr-btn, verbatim in spirit: 32px, 12.5px, hairline. */
.kf-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 32px; padding: 0 12px;
  border-radius: var(--radius-md);
  font-size: 12.5px; font-weight: 500; line-height: 1;
  color: var(--ink-800);
  background: var(--card);
  border: 1px solid var(--card-edge);
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease, border-color 0.15s ease;
}
.kf-btn:hover { background: var(--paper-2); }
.kf-btn:active { transform: scale(0.97); }
.kf-btn-primary { background: var(--accent); border-color: transparent; color: var(--paper); }
.kf-btn-primary:hover { background: var(--accent-2); }
.kf-btn-ghost { background: transparent; border-color: transparent; color: var(--ink-600); }
.kf-btn-ghost:hover { color: var(--ink-900); background: var(--paper-2); }
.kf-btn-lg { height: 38px; padding: 0 16px; font-size: 13.5px; }
.kf-btn svg { width: 14px; height: 14px; }

/* Chips and cards. */
.kf-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 8px; border-radius: var(--radius-md);
  font-size: 11px; font-weight: 500; color: var(--ink-700);
  background: var(--paper-2);
}
.kf-chip-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.kf-chip-good { color: var(--good); background: color-mix(in srgb, var(--good) 12%, transparent); }
.kf-card {
  background: var(--card);
  border: 1px solid var(--card-edge);
  border-radius: var(--radius-lg);
}

/* ── header — the app's top bar ─────────────────────────── */
.kf-skip { position: absolute; left: 1rem; top: -4rem; z-index: 300; background: var(--ink-900); color: var(--paper); padding: 0.5rem 0.8rem; border-radius: var(--radius-md); font-size: 12.5px; }
.kf-skip:focus { top: 1rem; }
.kf-head {
  position: sticky; top: 0; z-index: 100;
  background: var(--paper);
  border-bottom: 1px solid var(--card-edge);
}
.kf-head-inner {
  display: flex; align-items: center; gap: 1rem;
  padding: 10px var(--gutter);
  max-width: var(--shell); margin-inline: auto;
}
.kf-wordmark {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-serif); font-size: 19px; letter-spacing: 0.02em; color: var(--ink-900);
  flex-shrink: 0; white-space: nowrap; line-height: 1;
}
.kf-wordmark svg { width: 20px; height: 20px; }
.kf-head-nav { display: flex; align-items: center; gap: 4px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.kf-head-nav a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 10px; border-radius: var(--radius-md);
  font-size: 12.5px; color: var(--ink-600); flex-shrink: 0; white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.kf-head-nav a:hover { background: var(--card); color: var(--ink-900); }
.kf-head-nav a[aria-current="page"] { background: var(--card); color: var(--ink-900); box-shadow: var(--shadow-card); }
.kf-head-nav a svg { width: 15px; height: 15px; opacity: 0.85; flex-shrink: 0; }
.kf-head-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.kf-head-status { display: none; align-items: center; gap: 6px; color: var(--ink-400); font-family: var(--font-mono); font-size: 10px; white-space: nowrap; }
.kf-head-status i { width: 6px; height: 6px; border-radius: 50%; background: var(--good); }
@media (min-width: 1100px) { .kf-head-status { display: inline-flex; } }
.kf-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius-md); color: var(--ink-600); transition: background 0.15s ease, color 0.15s ease; }
.kf-icon-btn:hover { background: var(--paper-2); color: var(--ink-900); }
.kf-icon-btn svg { width: 16px; height: 16px; }
.kf-icon-btn .kf-icon-sun { display: none; }
:root[data-theme="dark"] .kf-icon-btn .kf-icon-sun { display: block; }
:root[data-theme="dark"] .kf-icon-btn .kf-icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .kf-icon-btn .kf-icon-sun { display: block; }
  :root:not([data-theme="light"]) .kf-icon-btn .kf-icon-moon { display: none; }
}
@media (max-width: 640px) {
  .kf-head-inner { gap: 8px; padding-inline: 12px; }
  .kf-head-nav a span.kf-nav-label { display: none; }
  .kf-head-right .kf-btn { padding: 0 10px; }
}

/* Secondary bar — the app's TopBar: breadcrumb over a serif title. */
.kf-topbar { border-bottom: 1px solid var(--card-edge); background: var(--paper); }
.kf-topbar-inner { max-width: var(--shell); margin-inline: auto; padding: 12px var(--gutter); display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.kf-crumb { font-size: 11px; color: var(--ink-400); display: flex; gap: 6px; align-items: center; }
.kf-crumb b { font-weight: 400; color: var(--ink-600); }
.kf-topbar-title { font-family: var(--font-serif); font-size: 20px; font-weight: 500; line-height: 1.2; display: flex; align-items: baseline; gap: 10px; }
.kf-topbar-title small { font-family: var(--font-sans); font-size: 12px; color: var(--ink-400); font-weight: 400; }

/* ── footer ─────────────────────────────────────────────── */
.kf-foot { border-top: 1px solid var(--card-edge); background: var(--paper-2); padding: 2.5rem 0 2rem; }
.kf-foot-top { display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; align-items: flex-start; }
.kf-foot-line { font-family: var(--font-serif); font-size: 22px; font-weight: 500; line-height: 1.25; }
.kf-foot-nav { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--ink-600); }
.kf-foot-nav a:hover { color: var(--ink-900); }
.kf-foot-fine { margin-top: 2rem; color: var(--ink-400); font-size: 10.5px; }

/* ── motion: a quiet reveal, nothing more ───────────────── */
/* Hidden only once scripts run, so a page without them is never blank. */
html.kf-js .kf-reveal { opacity: 0; transform: translateY(10px); transition: opacity 0.55s ease, transform 0.55s ease; }
html.kf-js .kf-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { html.kf-js .kf-reveal { opacity: 1; transform: none; transition: none; } }

/* A Markdown divider straight before a heading would double the rule. */
.kf-prose hr + h2 { border-top: 0; padding-top: 0; margin-top: 0; }


/* ═══════════════════════════════════════════════════════════
   cloud.kumulativ.com
   Everything above this line is kumulativ-site's stylesheet,
   unchanged, so the two subdomains are the same room. Below is
   only what a service with accounts needs and a static site
   does not: tables of machines, a code to read off a screen,
   and the owner's list of people.
   ═══════════════════════════════════════════════════════════ */

/* The page is a column as tall as the window, so on a short page — the door,
   the holding page, an empty machine list — the footer sits at the bottom
   rather than halfway up with dark space under it. `min-height: 60vh` only
   pushed it down; this puts it where it belongs. dvh first so a phone's
   collapsing browser chrome does not leave a gap, vh as the fallback. */
body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
.kc-main { flex: 1 0 auto; padding: 3rem 0 4rem; }
.kf-foot { flex-shrink: 0; }
.kc-head-right { display: flex; align-items: center; gap: 10px; }
.kc-who { font-size: 12px; color: var(--ink-500); }

/* A page's opening line and its explanation. */
.kc-page-head { margin-bottom: 2rem; max-width: 46rem; }
.kc-page-head p { margin-top: 0.6rem; color: var(--ink-600); font-size: 14px; }

/* The opening menu: three apps, one card each. */
.kc-apps { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; }
.kc-app {
  display: flex; flex-direction: column; gap: 0.5rem;
  padding: 1.5rem 1.4rem;
  background: var(--card); border: 1px solid var(--card-edge);
  border-radius: var(--radius-xl);
  transition: border-color 0.15s ease, transform 0.12s ease;
}
.kc-app:hover { border-color: var(--ink-300); transform: translateY(-2px); }
.kc-app h2 { font-family: var(--font-serif); font-size: 1.4rem; font-weight: 500; }
.kc-app p { font-size: 13px; color: var(--ink-600); line-height: 1.5; }
.kc-app-foot { margin-top: auto; padding-top: 0.9rem; font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-400); text-transform: uppercase; letter-spacing: 0.08em; }

/* Rows — machines, and people. One shape for both. */
.kc-rows { display: flex; flex-direction: column; border: 1px solid var(--card-edge); border-radius: var(--radius-lg); overflow: hidden; background: var(--card); }
.kc-row { display: flex; align-items: center; gap: 1rem; padding: 0.95rem 1.1rem; border-bottom: 1px solid var(--card-edge); }
.kc-row:last-child { border-bottom: 0; }
.kc-row-main { min-width: 0; flex: 1; }
.kc-row-title { font-size: 13.5px; font-weight: 500; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kc-row-sub { font-size: 11.5px; color: var(--ink-500); margin-top: 2px; }
.kc-row-actions { display: flex; gap: 6px; flex-shrink: 0; }
.kc-empty { padding: 2.2rem 1.2rem; text-align: center; color: var(--ink-500); font-size: 13px; }

/* Status chips reuse the site's chip; only the colours are new. */
.kf-chip-warn { color: var(--gold); background: color-mix(in srgb, var(--gold) 14%, transparent); }
.kf-chip-bad  { color: var(--rust); background: color-mix(in srgb, var(--rust) 14%, transparent); }

/* The pairing code. It is the one thing on the page somebody has to copy by
   eye onto another machine, so it is set large, in the mono face, and spaced
   the way it is grouped. */
.kc-code-panel { margin-top: 1rem; padding: 1.4rem; border: 1px solid var(--card-edge); border-radius: var(--radius-lg); background: var(--paper-2); }
.kc-code {
  font-family: var(--font-mono); font-weight: 700;
  font-size: clamp(1.9rem, 5vw, 2.6rem);
  letter-spacing: 0.12em;
  color: var(--ink-900);
  user-select: all;
}
.kc-code-note { margin-top: 0.7rem; font-size: 12.5px; color: var(--ink-600); max-width: 40rem; line-height: 1.55; }
.kc-steps { margin-top: 0.9rem; font-size: 12.5px; color: var(--ink-600); line-height: 1.7; }
.kc-steps li { display: flex; gap: 8px; }
.kc-steps b { font-family: var(--font-mono); font-size: 11px; color: var(--ink-400); flex-shrink: 0; width: 1.2rem; }

/* Sign-in. */
.kc-door { max-width: 30rem; margin: 4rem auto; text-align: center; }
.kc-door p { margin-top: 0.9rem; color: var(--ink-600); }
.kc-door .kf-btn { margin-top: 1.8rem; }
.kc-note { margin-top: 2.5rem; font-size: 12px; color: var(--ink-400); line-height: 1.6; }