/* KiwiKode: base: reset, page frame, typography. Shared by every application.
   Palette lives in tokens.css; application chrome lives in each app's own app.css. */

* { margin: 0; padding: 0; box-sizing: border-box; }

/* Always reserve the scrollbar gutter. Short pages have no scrollbar while
   long ones do, and without this the centred column shifts sideways by the
   scrollbar width every time you navigate between them.

   Deliberately NOT `overflow: hidden` here, though that is what this rule used
   to say. Locking the document works for the viewer, which scrolls inside
   .main instead -- but it silently makes every page WITHOUT an inner scroller
   unscrollable, and those are exactly the plain pages this base file exists to
   serve: sign-in, 404, access-denied, privacy. The viewer re-imposes the lock
   itself in app.css, where it belongs. */
html { height: 100%; scrollbar-gutter: stable; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--bg); }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.65;
  min-height: 100vh;
  /* Fluid gutter: tight on a phone, generous on a very wide monitor. */
  padding: 0 clamp(1rem, 3vw, 4rem) 4rem;
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: 0.5;
  mask-image: radial-gradient(ellipse 85% 55% at 50% 0%, #000 20%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 85% 55% at 50% 0%, #000 20%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}

.wrap { position: relative; z-index: 1; width: 100%; margin: 0 auto; }

/* Wordmark, matching the home page */
.home {
  display: inline-block;
  margin: 2.75rem 0 2.25rem;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  color: var(--mark);
  text-decoration: none;
  text-shadow: 0 0 18px var(--mark-glow);
}
.home:hover { text-decoration: underline; text-underline-offset: 0.4em; }

h1 {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: clamp(1.25rem, 3.4vw, 1.7rem);
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.25;
  color: var(--ink);
  margin-bottom: 0.4rem;
  text-wrap: balance;
}

.meta {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-dim);
  margin-bottom: 2rem;
}

.intro { max-width: 68ch; display: flex; flex-direction: column; gap: 0.9rem; }
.intro p { color: var(--prose); }

h2, h4 {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--accent);
  margin: 2.5rem 0 0.9rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--line);
}

a { color: var(--mark); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 0.25em; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

/* Link lists */
.links { list-style: none; display: grid; gap: 0.15rem; margin: 0.5rem 0 0; }
.links a {
  display: block;
  padding: 0.42rem 0.7rem;
  border-radius: 3px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.8rem;
}
.links a:hover { background: var(--panel); text-decoration: none; color: var(--mark-hi); }

/* Compact grid, for many short links */
.grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6.2rem, 1fr));
  gap: 0.2rem;
  margin: 0.5rem 0 0;
}
.grid a {
  display: block;
  text-align: center;
  padding: 0.4rem 0.3rem;
  border: 1px solid var(--line);
  border-radius: 3px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.78rem;
}
.grid a:hover { background: var(--panel); border-color: var(--accent-dim); text-decoration: none; }

/* ---------- theme toggle ----------
   Shared furniture rather than application chrome: every page has one,
   including the sign-in, sign-out and error screens that load no app.css.
   Applications with a side panel restate the geometry to fit it. */
.theme-toggle {
  display: inline-grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  font-size: 0.85rem;
  line-height: 1;
  color: var(--muted);
  background: none;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
}
.theme-toggle:hover { color: var(--ink); border-color: var(--line); }
.theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }