/* GENERATED FILE — do not edit directly.
 * Edit the modular sources under web/static/css/{base,layouts,components}/
 * and regenerate with `task css` (scripts/build-css.sh). */
/* ─── Tokens ─────────────────────────────────────────────────────────────── */
/* CSS variables defining our dark mode terminal/brutalist theme colors */
:root {
  /* Swiss Terminal palette: near-black background, warm white text, muted gray, single terminal-green accent */
  --bg:          #0b0b0b; /* Near-black page background */
  --surface:     #141414; /* Slightly raised near-black surface for inputs/buttons */
  --surface-hi:  #1e1e1e; /* Higher-contrast surface for hover states */
  --border:      #2b2b2b; /* Standard 1px structural border */
  --border-hi:   #3a3a3a; /* Higher contrast border for emphasis */
  --text:        #f5f5f0; /* Primary warm white text */
  --text-muted:  #a8a8a8; /* Secondary muted gray text */
  --text-dim:    #6e6e6e; /* Lowest-contrast gray for decorative/structural labels */

  /* Category accents kept for functional content categorization (books/games/movies/shows), not decoration.
     cat-0 doubles as the single sanctioned terminal-green accent (#00ff66) used sparingly for status/active state. */
  --cat-0: #00ff66; /* Terminal green accent - status/active/verified state */
  --cat-1: #ffb800; /* Category accent 1 */
  --cat-2: #00b8ff; /* Category accent 2 */
  --cat-3: #ff4141; /* Category accent 3 */

  --accent-error: #e06c75; /* Accenting color for forms error text */
}
/* Custom hidden utility using Alpine's cloak pattern to prevent raw content flashes before Alpine loads */
[x-cloak] { display: none !important; }

/* ─── Base ───────────────────────────────────────────────────────────────── */
/* Reset padding/margin and force border-box sizing across all elements */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Set default HTML characteristics */
html {
  background: var(--bg) !important;       /* Fix solid background color */
  color-scheme: dark;                     /* Signal dark color preference to browser widgets */
  scroll-behavior: smooth;                /* Enable smooth animated scroll behavior */
  scrollbar-gutter: stable;               /* Maintain vertical layout space when scrollbar toggles */
  scrollbar-color: var(--border) var(--bg); /* Style browser scrollbar colors */
}

/* Main body styling rule - Swiss body copy: Inter sans-serif for readability, terminal mono reserved for headlines/data */
body {
  background: var(--bg);                               /* Match body background to dark token */
  color: var(--text);                                 /* Use default bright text color */
  font-family: 'Inter', system-ui, sans-serif;         /* Swiss neutral sans for narrative/body copy */
  display: flex;                                       /* Flex container helper */
  flex-direction: column;                              /* Stack children vertically */
  line-height: 1.6;                                    /* Comfortable multi-line text height */
  font-size: 1.0rem;                                /* Standard readable 15px text height */
}

/* Headlines keep the terminal-mono identity per the typography pairing (mono headlines, sans body) */
h1, h2, h3, h4, h5, h6 {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 700;
}
.home-hero {
  margin-bottom: 6rem; /* generous section gap - space signals context switch, not a rule */
}
.home-hero-id {
	display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: clamp(1.5rem, 4vw, 2.1rem);
  font-weight: 700;
  color: var(--text);
  line-height: 1.4;
	text-decoration: none;
}
.home-hero-id:hover,
.home-hero-id:focus-visible {
	color: var(--text);
}
.home-hero-id .dim { color: var(--text-dim); }   /* the "$ " prompt + separators recede */
.home-hero-id .accent { color: var(--cat-0); }   /* single sparing accent: active role */
.location-berlin {
  background: linear-gradient(
    45deg,
    hsl(0 100% 93%),
    hsl(60 100% 94%),
    hsl(120 100% 93%),
    hsl(180 100% 94%),
    hsl(270 100% 93%),
    hsl(340 100% 94%)
  );
  background-size: 300% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: subtle-shift 5s linear infinite;
}
@keyframes subtle-shift {
  to { background-position: 200% center; }
}
@media (prefers-reduced-motion: reduce) {
  .location-berlin { animation: none; }
}
.home-hero-nav {
  display: flex;
  gap: 1.5rem;
  margin-top: 1.25rem;
}
.home-hero-nav a {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8125rem;
  color: var(--text-muted);
  text-decoration: none;
  transition: color 150ms;
}
.home-hero-nav a:hover { color: var(--cat-0); }
.home-narrative {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 68ch;
}
.home-section {
  margin-bottom: 6rem; /* Amplified vertical rhythm between distinct narrative sections */
}
.home-section:last-child { margin-bottom: 0; }
.home-section-heading {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 1.5rem; /* tight gap to the list it introduces, per titles-vs-description rule */
}
.home-section-heading a {
  color: inherit;
  text-decoration: none;
  transition: color 150ms;
}
.home-section-heading a:hover { color: var(--cat-0); }

@media (hover: hover) {
  .home-section-heading--color-0 a:hover { color: var(--cat-0); }
  .home-section-heading--color-1 a:hover { color: var(--cat-1); }
  .home-section-heading--color-2 a:hover { color: var(--cat-2); }
  .home-section-heading--color-3 a:hover { color: var(--cat-3); }
}
/* Target transition element for SPA-like navigation swaps */
.portal-wrapper {
  view-transition-name: none;                            /* Set named view transition root */
  width: 100%;                                                /* Force full width */
}

/* Content fade-in: triggered on every HTMX swap that re-renders the portal */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.portal-wrapper {
  animation: fadeInUp 0.3s ease both;
}

/* ─── View Transitions ───────────────────────────────────────────────────── */
/* Assign view transition name to right-side viewport pane */
#terminal-viewport {
  view-transition-name: none;
}

/* Old viewport content: slide out left and fade out */
::view-transition-old(viewport-content) {
  animation: 180ms cubic-bezier(0.16, 1, 0.3, 1) both vt-slide-out-left,
             180ms cubic-bezier(0.16, 1, 0.3, 1) both vt-fade-out;
}

/* Incoming viewport content: slide in from right and fade in */
::view-transition-new(viewport-content) {
  animation: 180ms cubic-bezier(0.16, 1, 0.3, 1) both vt-slide-in-right,
             180ms cubic-bezier(0.16, 1, 0.3, 1) both vt-fade-in;
}

/* CSS animation frames */
@keyframes vt-slide-out-left {
  from { transform: translateX(0); }
  to   { transform: translateX(-30px); }
}

@keyframes vt-slide-in-right {
  from { transform: translateX(30px); }
  to   { transform: translateX(0); }
}

@keyframes vt-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes vt-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* Root container grid layout */
.terminal-dashboard {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;
}
/* Right/Bottom Column: Content Viewport Pane */
.viewport-pane {
  flex: 1;
  padding: 2rem 1.5rem 6rem;
  min-width: 0; /* Prevent layout overflow */
  background: var(--bg);
}

/* Desktop: remove width cap so layout can use full viewport */
@media (min-width: 768px) {
  .viewport-pane {
    padding: 3rem 2rem 7rem;
  }
}

@media (min-width: 1025px) {
  .viewport-pane {
    width: 55%;
    flex: none;
  }
}
/* Article header: wraps category badge, title, and date on item detail pages. */
.article-header {
  margin-bottom: 2.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
}

/* Flex row of tag badges shown above the title */
.article-header-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

/* Publication date shown below the title */
.article-date {
  font-size: 0.7rem;
  color: var(--text-dim);
  display: block;
  margin-top: 0.4rem;
}
.article-title {
  /* font-family/weight inherited from the global h1-h6 mono-headline reset */
  font-size: clamp(1.5rem, 4vw, 2.25rem); /* Fluid text scale */
  color: var(--text);                     /* Clear white text */
  line-height: 1.15;                      /* Tight title height */
  margin-top: 0.5rem;                     /* Gap separating subtitle badge */
}
.disclosure-item {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  text-decoration: none;
  color: inherit;
  padding: 0.35rem 0;
  cursor: pointer;
  width: fit-content;
  align-self: flex-start;
  border: 0;
  background: transparent;
  font: inherit;
  text-align: left;
}
.disclosure-item:focus-visible {
  outline: 1px solid var(--accent-color, var(--cat-0));
  outline-offset: 0.25rem;
}
.home-portal .disclosure-item {
  font-size: 1.15rem;
  margin-bottom: 0.75rem;
}
.disclosure-item-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.72rem;
  font-family: 'JetBrains Mono', monospace;
  margin-top: 0.15rem;
  text-transform: lowercase;
}
.disclosure-item-tags span {
  color: var(--accent-color, var(--text-dim));
  opacity: 0.5;
}
.title--disclosure {
  color: var(--accent-color, var(--text));
  transition: color 150ms;
}
.title--disclosure::before {
  content: '▶ ';
  color: var(--text-dim);
  transition: color 150ms;
}
.disclosure-item:hover .title--disclosure::before,
.disclosure-item.active .title--disclosure::before {
  color: var(--accent-color, var(--cat-0));
}
.disclosure-item-detail {
  display: block;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  color: var(--text-muted);
  font-size: 0.8125rem;
  margin-left: 1.1rem;
  transition: max-height 200ms ease, opacity 200ms ease, margin-top 200ms ease;
}
@media (hover: hover) {
  .disclosure-item:hover .disclosure-item-detail {
    max-height: 3rem;
    opacity: 1;
    margin-top: 0.25rem;
  }
}
.disclosure-see-all {
  display: inline-block;
  margin-top: 1rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  color: var(--text-dim);
  text-decoration: none;
  transition: color 150ms;
}
.disclosure-see-all:hover { color: var(--cat-0); }
/* Disclosure list: bulletless, no dividers, 3-level progressive reveal */
.disclosure-list {
  display: flex;
  flex-direction: column;
  gap: 0.9rem; /* whitespace does the separating - no border-bottom dividers */
}
/* Layout wrappers displaying empty indices cues */
.empty-state {
  display: flex;                          /* Center layout items vertically and horizontally */
  align-items: center;
  justify-content: center;
  min-height: 30vh;                       /* Take up vertical volume */
  color: var(--text-dim);                 /* soft dim formatting */
  font-size: 0.875rem;
}
.empty-state::before { content: '// '; color: var(--text-dim); } /* Prepend comments coding pattern syntax symbol */
/* ─── Sticky Terminal Window Preview ─── */
.hover-preview-box {
  display: none;
  position: relative;
  box-sizing: border-box;
}

@media (max-width: 1024px) {
  .hover-preview-box {
    display: block;
    width: 100%;
    max-width: 100%;
    min-height: 0;
    padding: 0 1.5rem 3rem;
    background: var(--bg);
    scroll-margin-top: 1rem;
    overflow-x: hidden;
  }

  .terminal-window-header { cursor: default; }

  .terminal-window-body {
    height: auto;
    max-height: none;
    padding: 1.5rem 0;
    overflow: visible;
    overflow-wrap: anywhere;
  }

  .terminal-resize-handle { display: none; }
}

@media (min-width: 1025px) {
  .hover-preview-box {
    display: block;
    position: fixed;
    right: 2rem;
    top: 2rem;
    width: 40%;
    height: calc(100vh - 4rem);
    min-width: 320px;
    min-height: 240px;
    background: rgba(12, 12, 12, 0.75);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.5);
    z-index: 100;
    overflow: hidden;
  }
}

/* Terminal Title Bar */
.terminal-window-header {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 20, 20, 0.95);
  padding: 0.6rem 1rem;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  cursor: move;
  user-select: none;
  -webkit-user-select: none;
}

.terminal-window-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  color: var(--text-dim);
  text-transform: lowercase;
  letter-spacing: 0.05em;
  transition: color 250ms ease;
}

/* Terminal Content Body */
.terminal-window-body {
  height: calc(100% - 36px); /* subtract header height */
  overflow-y: auto;
  padding: 2rem 2.25rem;
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.15) rgba(0, 0, 0, 0.1);
}

/* Custom scrollbar for preview box */
.terminal-window-body::-webkit-scrollbar {
  width: 4px;
}
.terminal-window-body::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
}
.terminal-window-body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 2px;
}

.preview-box-content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Ensure the loaded article inside the box matches default styling but fits the preview box sizing */
.preview-box-content .prose-page {
  font-size: 0.875rem;
  line-height: 1.6;
}

/* Scramble characters styling */
.scramble-char {
  color: var(--cat-0);
  opacity: 0.8;
  font-family: 'JetBrains Mono', monospace;
}

/* Resizers */
.terminal-resize-handle {
  position: absolute;
  background: transparent;
}
.resizer-r {
  top: 0;
  right: 0;
  width: 6px;
  height: 100%;
  cursor: e-resize;
}
.resizer-b {
  bottom: 0;
  left: 0;
  width: 100%;
  height: 6px;
  cursor: s-resize;
}
.resizer-se {
  right: 0;
  bottom: 0;
  width: 12px;
  height: 12px;
  cursor: se-resize;
  z-index: 10;
  background-image: linear-gradient(135deg, transparent 30%, rgba(255, 255, 255, 0.15) 30%, rgba(255, 255, 255, 0.15) 40%, transparent 40%, transparent 60%, rgba(255, 255, 255, 0.15) 60%, rgba(255, 255, 255, 0.15) 70%, transparent 70%);
}
/* --- Parent Relative Containers --- */
.disclosure-item, 
.cv-timeline-node, 
.host-nav-link, 
.disclosure-see-all, 
.path-crumb a {
  position: relative;
}

@keyframes interactive-item-glitch {
  0%   { text-shadow: -2px 0 var(--cat-3), 2px 0 var(--cat-2);   transform: translate(2px, -2px);  }
  25%  { text-shadow: 2px -2px var(--cat-3), -2px 2px var(--cat-2); transform: translate(-2px, 2px); }
  50%  { text-shadow: -2px 2px var(--cat-3), 2px -2px var(--cat-2); transform: translate(1px, -1px); }
  75%  { text-shadow: 2px 0 var(--cat-3), -2px -2px var(--cat-2); transform: translate(-1px, 1px);  }
  100% { text-shadow: none; transform: translate(0, 0); }
}

@media (hover: hover) {
  .disclosure-item:hover,
  .cv-timeline-node:hover,
  .disclosure-see-all:hover,
  .path-crumb a:hover {
    animation: interactive-item-glitch 350ms ease;
  }
  .path-crumb a:hover { 
    color: var(--text); 
  }
}.main-layout-container {
  display: flex;
  flex-direction: row;
  width: 100%;
  min-height: 100vh;
}

@media (max-width: 1024px) {
  .main-layout-container {
    flex-direction: column;
  }
}
/* Text body width boundaries styling to ensure optimal cognitive reader comfort */
.prose-page {
  max-width: 72ch; /* Constrains document line length to ~72 characters */
  color: var(--text-muted);
  line-height: 1.75;
}
.prose-page > * + * { margin-top: 1.25em; }
.prose-page h1, .prose-page h2, .prose-page h3, .prose-page h4 {
  color: var(--text);
  font-weight: 600;
  line-height: 1.3;
  margin-top: 2em;
  margin-bottom: 0.5em;
}
.prose-page h1 { font-size: 1.5em; }
.prose-page h2 { font-size: 1.25em; }
.prose-page h3 { font-size: 1.1em; }
.prose-page p { margin: 1.25em 0; }
.prose-page a { color: var(--cat-0); text-decoration: underline; text-underline-offset: 2px; }
.prose-page strong { color: var(--text); font-weight: 600; }
.prose-page code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.875em;
  background: var(--surface-hi);
  border: 1px solid var(--border);
  border-radius: 0.25rem;
  padding: 0.125em 0.35em;
}
.prose-page pre {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  padding: 1em;
  overflow-x: auto;
}
.prose-page pre code { background: none; border: none; padding: 0; }
.prose-page blockquote {
  border-left: 2px solid var(--border-hi);
  padding-left: 1em;
  color: var(--text-dim);
  font-style: italic;
}
.prose-page ul, .prose-page ol { padding-left: 1.5em; }
.prose-page li + li { margin-top: 0.5em; }
.prose-page img { max-width: 100%; border-radius: 0.5rem; }
.prose-page hr { border: none; border-top: 1px solid var(--border); margin: 2em 0; }

/* ── Mermaid.js Styling ────────────────────────── */
.mermaid {
  background: transparent !important;
  display: flex !important;
  justify-content: center;
  margin: 2rem 0;
}
pre:has(code.language-mermaid) {
  display: none !important;
}
/* ─── Unified Title Typography ─── */

/* 1. Main Page / Article Title */
.title {
  /* font-family/weight inherited from the global h1-h6 mono-headline reset */
  font-size: clamp(1.5rem, 4vw, 2.25rem); /* Fluid text scale */
  color: var(--cat-0);                     /* Accented title color */
  line-height: 1.15;                      /* Tight title height */
  margin-top: 0.5rem;                     /* Gap separating subtitle badge */
  letter-spacing: -0.02em;
  opacity: 1;
}

/* 2. List / Disclosure Item Title */
.title--disclosure {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.9375rem;
  color: var(--text);
}

/* Accessibility Reduced Motion Safeties */
@media (prefers-reduced-motion: reduce) {
  .title {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
  }
}