/* File Systems: a Visual Explainer
   Paper aesthetic + dark + terminal/CRT themes. */

:root {
  --bg: #f1ede0;
  --bg-alt: #ece5d0;
  --paper: #faf6e9;
  --paper-deep: #f4ecd2;
  --ink: #1a1a12;
  --ink-soft: #3d3a30;
  --ink-muted: #7a7565;
  --ink-faint: #b0a993;
  --rule: #d9cfae;
  --rule-soft: #e8dfc9;

  /* per-filesystem accents */
  --fat-amber: #b07d1b;       /* FAT32 */
  --fat-amber-wash: rgba(176, 125, 27, 0.10);
  --ext-blue: #1f5f9c;        /* ext4 */
  --ext-blue-wash: rgba(31, 95, 156, 0.10);
  --zfs-green: #1f6b3a;       /* ZFS */
  --zfs-green-wash: rgba(31, 107, 58, 0.10);
  --btr-orange: #b34c0a;      /* Btrfs */
  --btr-orange-wash: rgba(179, 76, 10, 0.10);
  --ntfs-violet: #6b3a8c;     /* NTFS */
  --apfs-rose: #a3275a;       /* APFS */

  --accent: var(--fat-amber);
  --accent-wash: var(--fat-amber-wash);

  --serif: 'Source Serif 4', 'IBM Plex Serif', Georgia, serif;
  --sans: 'Inter', -apple-system, system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;

  --sidenav-w: 280px;
  --measure: 680px;
  --canvas-bg: #fbf7e8;
  --grid-line: rgba(26, 26, 18, 0.08);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
}

html, body { overflow-x: hidden; }

[data-theme="dark"] {
  --bg: #0e120f;
  --bg-alt: #131a14;
  --paper: #181f19;
  --paper-deep: #11171a;
  --ink: #f4eed9;
  --ink-soft: #d9ceab;
  --ink-muted: #8fa37f;
  --ink-faint: #4e6a52;
  --rule: rgba(168, 133, 54, 0.25);
  --rule-soft: rgba(168, 133, 54, 0.12);

  --fat-amber: #e0b35d;
  --fat-amber-wash: rgba(224, 179, 93, 0.12);
  --ext-blue: #6fb0e5;
  --ext-blue-wash: rgba(111, 176, 229, 0.12);
  --zfs-green: #7fc88f;
  --zfs-green-wash: rgba(127, 200, 143, 0.12);
  --btr-orange: #f08a4a;
  --btr-orange-wash: rgba(240, 138, 74, 0.12);
  --ntfs-violet: #c79bf0;
  --apfs-rose: #f08fae;

  --canvas-bg: #11171a;
  --grid-line: rgba(244, 238, 217, 0.08);
}

[data-theme="terminal"] {
  --bg: #061008;
  --bg-alt: #08160c;
  --paper: #0a1c10;
  --paper-deep: #051208;
  --ink: #b6f5b6;
  --ink-soft: #8ad88a;
  --ink-muted: #4a8a4a;
  --ink-faint: #2a522a;
  --rule: rgba(182, 245, 182, 0.20);
  --rule-soft: rgba(182, 245, 182, 0.08);

  --fat-amber: #f5e19a;
  --fat-amber-wash: rgba(245, 225, 154, 0.10);
  --ext-blue: #9ad0f5;
  --ext-blue-wash: rgba(154, 208, 245, 0.10);
  --zfs-green: #b6f5b6;
  --zfs-green-wash: rgba(182, 245, 182, 0.12);
  --btr-orange: #f5b08a;
  --btr-orange-wash: rgba(245, 176, 138, 0.10);
  --ntfs-violet: #d6a8f5;
  --apfs-rose: #f5a8c8;

  --serif: 'IBM Plex Mono', ui-monospace, monospace;
  --canvas-bg: #051208;
  --grid-line: rgba(182, 245, 182, 0.10);
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--serif);
  font-feature-settings: 'kern', 'liga';
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
  text-wrap: pretty;
}

a { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--accent-wash); }
a:hover { border-bottom-color: var(--accent); }

::selection { background: var(--accent-wash); color: var(--ink); }

/* ───────── Side nav ───────── */
.fs-sidenav {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: var(--sidenav-w);
  padding: 32px 26px;
  display: flex; flex-direction: column;
  border-right: 1px solid var(--rule-soft);
  background: var(--bg);
  z-index: 50;
  overflow-y: auto;
}
.fs-brand {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.2px;
  color: var(--ink-muted);
  margin-bottom: 28px;
  display: flex; align-items: center; gap: 10px;
}
.fs-brand-mark {
  width: 28px; height: 28px; border-radius: 4px;
  background: linear-gradient(135deg, var(--fat-amber) 0%, var(--ext-blue) 35%, var(--zfs-green) 65%, var(--btr-orange) 100%);
  flex-shrink: 0;
}
.fs-nav { display: flex; flex-direction: column; gap: 2px; }
.fs-nav a {
  display: flex; align-items: baseline; gap: 12px;
  padding: 9px 12px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-soft);
  text-decoration: none;
  border-radius: 5px;
  border-bottom: none;
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.fs-nav a:hover { background: var(--accent-wash); color: var(--accent); }
.fs-nav a.is-active { background: var(--accent-wash); color: var(--accent); font-weight: 500; }
.fs-nav-num {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-muted);
  font-weight: 500;
  min-width: 22px;
}
.fs-nav a.is-active .fs-nav-num { color: var(--accent); }
.fs-nav-divider {
  margin: 14px 12px 6px;
  font-family: var(--sans);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  color: var(--ink-faint);
  font-weight: 600;
}

.fs-theme-block {
  margin-top: auto;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
}
.fs-theme-label {
  font-family: var(--sans);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  color: var(--ink-muted);
  font-weight: 600;
  padding: 0 8px 6px;
}
.fs-theme-row { display: flex; gap: 4px; }
.fs-theme-btn {
  flex: 1; border: none; background: transparent; cursor: pointer;
  padding: 7px 8px;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink-muted);
  border-radius: 4px;
  transition: all .15s;
}
.fs-theme-btn:hover { color: var(--ink); background: var(--rule-soft); }
.fs-theme-btn.is-active {
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}

/* ───────── Main column ───────── */
.fs-main {
  margin-left: var(--sidenav-w);
}
.fs-wrap {
  max-width: var(--measure);
  margin: 0 auto;
  padding-left: calc(32px + var(--safe-l));
  padding-right: calc(32px + var(--safe-r));
}

/* ───────── Hero ───────── */
.fs-hero {
  padding: 96px 32px 64px;
  max-width: 920px;
  margin: 0 auto;
}
.fs-kicker {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 22px;
  font-weight: 500;
}
.fs-hero h1 {
  font-family: var(--serif);
  font-size: clamp(42px, 6.5vw, 76px);
  line-height: 0.98;
  letter-spacing: -1.5px;
  margin: 0 0 28px;
  font-weight: 500;
  color: var(--ink);
}
.fs-hero h1 em {
  font-style: italic;
  color: var(--accent);
  font-weight: 400;
}
.fs-hero-p {
  font-size: 19px;
  color: var(--ink-soft);
  line-height: 1.55;
  max-width: 620px;
  margin: 0 0 24px;
}
.fs-hero-byline {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-muted);
  letter-spacing: 0.2px;
}

/* ───────── Sections ───────── */
/* Use padding-block so .fs-wrap's padding-inline is not clobbered by section spacing. */
.fs-section {
  padding-block: 80px 32px;
  scroll-margin-top: 24px;
}
.fs-section + .fs-section { border-top: 1px solid var(--rule-soft); }

.fs-section[data-fs="fat"]   { --accent: var(--fat-amber);   --accent-wash: var(--fat-amber-wash); }
.fs-section[data-fs="ext"]   { --accent: var(--ext-blue);    --accent-wash: var(--ext-blue-wash); }
.fs-section[data-fs="zfs"]   { --accent: var(--zfs-green);   --accent-wash: var(--zfs-green-wash); }
.fs-section[data-fs="btrfs"] { --accent: var(--btr-orange);  --accent-wash: var(--btr-orange-wash); }
.fs-section[data-fs="ntfs"]  { --accent: var(--ntfs-violet); --accent-wash: rgba(107, 58, 140, 0.10); }
.fs-section[data-fs="apfs"]  { --accent: var(--apfs-rose);   --accent-wash: rgba(163, 39, 90, 0.10); }

.fs-h2 {
  font-family: var(--serif);
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.7px;
  margin: 0 0 16px;
  font-weight: 500;
  color: var(--ink);
}
.fs-h2 em { font-style: italic; color: var(--accent); font-weight: 400; }
.fs-section-num {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--accent);
  letter-spacing: 1.5px;
  margin-bottom: 12px;
}
.fs-lede {
  font-size: 18px;
  color: var(--ink-soft);
  line-height: 1.6;
  margin: 0 0 28px;
  max-width: 620px;
}

.fs-section p {
  font-size: 17px;
  color: var(--ink);
  margin: 0 0 18px;
  max-width: var(--measure);
}
.fs-section h3 {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  color: var(--ink);
  margin: 36px 0 12px;
  letter-spacing: -0.2px;
}
.fs-section ul {
  font-size: 17px;
  color: var(--ink);
  padding-left: 1.3em;
  margin: 0 0 18px;
}
.fs-section li { margin-bottom: 6px; }
.fs-section strong { font-weight: 600; }
.fs-section em { font-style: italic; }
.fs-section code, .fs-section .mono {
  font-family: var(--mono);
  font-size: 0.92em;
  background: var(--accent-wash);
  padding: 1px 5px;
  border-radius: 3px;
  color: var(--ink);
}

/* color-coded named entities, like Ciechanowski */
.fs-section .c-fat,   .c-fat   { color: var(--fat-amber);   font-weight: 600; }
.fs-section .c-ext,   .c-ext   { color: var(--ext-blue);    font-weight: 600; }
.fs-section .c-zfs,   .c-zfs   { color: var(--zfs-green);   font-weight: 600; }
.fs-section .c-btr,   .c-btr   { color: var(--btr-orange);  font-weight: 600; }
.fs-section .c-red,   .c-red   { color: #c83a2e; font-weight: 600; }
.fs-section .c-blue,  .c-blue  { color: var(--ext-blue); font-weight: 600; }
.fs-section .c-green, .c-green { color: var(--zfs-green); font-weight: 600; }
.fs-section .c-amber, .c-amber { color: var(--fat-amber); font-weight: 600; }
.fs-section .c-violet,.c-violet{ color: var(--ntfs-violet); font-weight: 600; }
.fs-section .c-rose, .c-rose   { color: var(--apfs-rose); font-weight: 600; }
.fs-section .c-muted { color: var(--ink-muted); font-weight: 500; }

/* aside / callout */
.fs-aside {
  border-left: 3px solid var(--accent);
  background: var(--accent-wash);
  padding: 14px 18px;
  margin: 22px 0;
  font-size: 16px;
  color: var(--ink-soft);
  border-radius: 0 4px 4px 0;
}
.fs-aside strong { color: var(--accent); }

/* ───────── Demo widget ───────── */
.fs-demo {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 18px 18px 14px;
  margin: 28px 0 30px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.fs-demo-title {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 600;
  margin-bottom: 12px;
  display: flex; justify-content: space-between; align-items: center;
}
.fs-demo-title .fs-demo-tag { color: var(--accent); }
.fs-demo-canvas-wrap {
  position: relative;
  width: 100%;
  display: flex; justify-content: center; align-items: center;
  background: var(--canvas-bg);
  border-radius: 4px;
  overflow: hidden;
}
.fs-demo-canvas-wrap canvas {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}

/* Controls */
.fs-controls {
  display: flex; flex-direction: column; gap: 12px;
  margin-top: 14px;
}
.fs-control-row {
  display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap;
}
.fs-control-label {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink-muted);
  letter-spacing: 0.4px;
  min-width: 96px;
  font-weight: 500;
  flex-shrink: 0;
}
.fs-slider {
  -webkit-appearance: none; appearance: none;
  flex: 1; min-width: 100px;
  height: 28px;                 /* tall hit area for fingers */
  background: transparent;
  outline: none;
  cursor: pointer;
  touch-action: pan-y;          /* let vertical scroll pass, claim horizontal drag */
  margin: 0;
  padding: 0;
}
/* the visible track is a pseudo background drawn within the input element */
.fs-slider::-webkit-slider-runnable-track {
  height: 4px;
  background: var(--rule);
  border-radius: 2px;
}
.fs-slider::-moz-range-track {
  height: 4px;
  background: var(--rule);
  border-radius: 2px;
}
.fs-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  border: 3px solid var(--paper);
  box-shadow: 0 0 0 1px var(--accent), 0 1px 3px rgba(0,0,0,0.15);
  margin-top: -9px;             /* re-centers thumb on the 4px track */
}
.fs-slider::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  border: 3px solid var(--paper);
  box-shadow: 0 0 0 1px var(--accent), 0 1px 3px rgba(0,0,0,0.15);
}
.fs-slider:active::-webkit-slider-thumb,
.fs-slider:focus::-webkit-slider-thumb { transform: scale(1.08); }

.fs-readout {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink);
  min-width: 60px;
  max-width: 160px;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fs-btn {
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--ink-soft);
  font-family: var(--sans);
  font-size: 13px;
  padding: 8px 14px;
  min-height: 36px;             /* finger-friendly */
  border-radius: 4px;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
  touch-action: manipulation;   /* skip the iOS 300ms tap delay */
  -webkit-tap-highlight-color: transparent;
  outline: none;
}
.fs-btn:focus-visible { box-shadow: 0 0 0 2px var(--accent-wash); }
.fs-btn:hover { background: var(--accent-wash); color: var(--accent); border-color: var(--accent); }
.fs-btn.is-active { background: var(--accent); color: var(--paper); border-color: var(--accent); }
.fs-btn-group { display: flex; gap: 4px; }

.fs-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-soft);
  cursor: pointer;
  user-select: none;
}
.fs-toggle input { display: none; }
.fs-toggle-track {
  width: 32px; height: 18px;
  background: var(--rule);
  border-radius: 999px;
  position: relative;
  transition: background .15s;
}
.fs-toggle-track::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--paper);
  transition: transform .15s;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.fs-toggle input:checked + .fs-toggle-track { background: var(--accent); }
.fs-toggle input:checked + .fs-toggle-track::after { transform: translateX(14px); }

.fs-caption {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-muted);
  margin-top: 8px;
  font-style: italic;
}

/* legend */
.fs-legend {
  display: flex; flex-wrap: wrap; gap: 14px;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink-muted);
  margin-top: 10px;
}
.fs-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.fs-legend-swatch {
  width: 12px; height: 12px;
  border-radius: 2px;
  border: 1px solid var(--rule);
}

/* ───────── Footer ───────── */
.fs-foot {
  padding: 60px 32px 80px;
  border-top: 1px solid var(--rule);
  margin-top: 60px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-muted);
  text-align: center;
}
.fs-foot p { margin: 4px 0; }

/* ───────── Mobile ───────── */
.fs-mobile-bar { display: none; }

@media (max-width: 920px) {
  :root { --sidenav-w: 0px; }
  .fs-sidenav {
    position: static; width: 100%; height: auto;
    border-right: none; border-bottom: 1px solid var(--rule);
    padding: 16px max(20px, var(--safe-l)) 16px max(20px, var(--safe-r));
    overflow: visible;
  }
  .fs-brand { margin-bottom: 14px; }
  .fs-nav {
    flex-direction: row;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 2px;
    padding-bottom: 4px;
    scrollbar-width: thin;
  }
  .fs-nav a { white-space: nowrap; flex-shrink: 0; }
  .fs-nav-divider { display: none; }
  .fs-theme-block { margin-top: 14px; padding-top: 14px; }
  .fs-theme-row { flex-wrap: wrap; }
  .fs-main { margin-left: 0; }
  .fs-hero {
    padding: 56px max(20px, calc(20px + var(--safe-r))) 40px max(20px, calc(20px + var(--safe-l)));
  }
  .fs-wrap {
    padding-left: max(18px, calc(18px + var(--safe-l)));
    padding-right: max(18px, calc(18px + var(--safe-r)));
  }
  .fs-section { padding-block: 56px 24px; }
  /* Stack control rows on narrow screens so long readouts never overflow. */
  .fs-control-row {
    align-items: stretch;
    gap: 8px;
  }
  .fs-control-label {
    min-width: 0;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
  }
  .fs-readout {
    font-size: 12px;
    text-align: left;
    color: var(--accent);
    font-weight: 500;
    flex-basis: 100%;
    min-width: 0;
    max-width: none;
    order: 99;                  /* push readout below the slider on narrow screens */
    white-space: normal;
  }
  .fs-slider { flex-basis: 100%; min-width: 0; }
  .fs-demo { padding: 16px 14px 14px; }
}

/* Even narrower phones: shrink demo padding further. */
@media (max-width: 480px) {
  .fs-demo { padding: 14px 10px 12px; }
  .fs-section h3 { font-size: 20px; }
  .fs-hero h1 { letter-spacing: -1px; }
}