/* ====================================================================
   The TK Home Infrastructure Handbook — homelab.aidalee.com
   Design system: warm-paper light, warm-charcoal dark, serif headings.
   ==================================================================== */

:root {
  --bg: #faf8f5;
  --bg-card: #ffffff;
  --bg-sidebar: #f3efe7;
  --bg-code: #f3f0e9;
  --bg-callout: #ede9f5;
  --ink: #1f2024;
  --ink-soft: #5a5a60;
  --ink-faint: #8a8a90;
  --accent: #6b5b95;
  --accent-deep: #4a3f6b;
  --blue: #4a78b5;
  --blue-soft: #e6eef8;
  --green: #5d8a4a;
  --green-soft: #e9f1e2;
  --orange: #c4741f;
  --orange-soft: #fbeed4;
  --red: #b54a4a;
  --red-soft: #f7e2e2;
  --border: #e8e4dc;
  --shadow: 0 1px 4px rgba(40, 30, 20, 0.06);
  --shadow-lg: 0 8px 24px rgba(40, 30, 20, 0.10);
  --radius: 8px;
  --radius-lg: 12px;
  --serif: 'Georgia', 'Iowan Old Style', 'Charter', serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --mono: 'SF Mono', 'JetBrains Mono', 'Menlo', 'Consolas', monospace;
  --max-w: 1200px;
  --content-w: 760px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1a1a1d;
    --bg-card: #25252a;
    --bg-sidebar: #202024;
    --bg-code: #2a2a2e;
    --bg-callout: #2e2740;
    --ink: #ececec;
    --ink-soft: #b0b0b5;
    --ink-faint: #7a7a80;
    --accent: #b09cd9;
    --accent-deep: #d4c4f0;
    --blue: #8ab4e8;
    --blue-soft: #1f2d3e;
    --green: #9cc587;
    --green-soft: #1f2e1c;
    --orange: #e3a763;
    --orange-soft: #3a2c1a;
    --red: #e08080;
    --red-soft: #3a1f1f;
    --border: #353539;
    --shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4);
  }
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- Typography ---------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--ink);
}
h1 { font-size: 2.4rem; margin: 0 0 0.5rem; }
h2 {
  font-size: 1.6rem; margin: 2.4rem 0 0.8rem;
  padding-bottom: 0.4rem; border-bottom: 1px solid var(--border);
}
h3 { font-size: 1.2rem; margin: 1.8rem 0 0.6rem; }
h4 { font-size: 1.05rem; margin: 1.4rem 0 0.5rem; }
p { margin: 0.8rem 0; }
a {
  color: var(--accent); text-decoration: none;
  border-bottom: 1px dotted var(--accent);
}
a:hover { border-bottom-style: solid; }
hr {
  border: 0; border-top: 1px solid var(--border);
  margin: 2rem 0;
}
code {
  font-family: var(--mono);
  font-size: 0.88em;
  background: var(--bg-code);
  padding: 0.12em 0.4em;
  border-radius: 3px;
  border: 1px solid var(--border);
}
pre {
  background: var(--bg-code);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.2rem;
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 0.86rem;
  line-height: 1.5;
  margin: 1rem 0;
}
pre code {
  background: none; border: 0; padding: 0;
  font-size: inherit;
}
blockquote {
  border-left: 3px solid var(--accent);
  background: var(--bg-callout);
  margin: 1rem 0;
  padding: 0.6rem 1rem;
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--ink);
}
blockquote p:first-child { margin-top: 0; }
blockquote p:last-child { margin-bottom: 0; }
ul, ol { padding-left: 1.5rem; }
li { margin: 0.3rem 0; }
table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
  font-size: 0.95rem;
}
th, td {
  border: 1px solid var(--border);
  padding: 0.5rem 0.7rem;
  text-align: left;
}
th { background: var(--bg-card); font-weight: 600; }
img { max-width: 100%; height: auto; border-radius: var(--radius); }

/* ---------- Layout: docs with sidebar ---------- */
.docs-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  min-height: 100vh;
}
.sidebar {
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border);
  padding: 1.5rem 1rem 4rem;
  position: sticky; top: 0; align-self: start;
  max-height: 100vh; overflow-y: auto;
  font-size: 0.92rem;
}
.sidebar .brand {
  display: block;
  font-family: var(--serif); font-size: 1.15rem;
  font-weight: 600; color: var(--ink);
  border-bottom: 0;
  margin-bottom: 0.4rem;
  padding: 0 0.2rem;
}
.sidebar .brand .icon { color: var(--accent); margin-right: 0.3rem; }
.sidebar .subtitle { font-size: 0.78rem; color: var(--ink-faint); margin: 0 0.2rem 1.2rem; }
.sidebar h6 {
  font-family: var(--sans);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  margin: 1.2rem 0.2rem 0.4rem;
  font-weight: 700;
}
.sidebar ul { list-style: none; padding-left: 0; margin: 0; }
.sidebar li { margin: 0.1rem 0; }
.sidebar a {
  display: block;
  padding: 0.3rem 0.5rem;
  border-radius: 4px;
  color: var(--ink-soft);
  border-bottom: 0;
  font-size: 0.9rem;
  line-height: 1.35;
}
.sidebar a:hover { background: var(--bg-card); color: var(--ink); }
.sidebar a.active {
  background: var(--accent);
  color: white;
  font-weight: 600;
}
.sidebar a.active:hover { background: var(--accent-deep); }
.sidebar .search-box {
  margin: 0 0.2rem 0.6rem;
  width: calc(100% - 0.4rem);
}
.sidebar .search-box input {
  width: 100%;
  padding: 0.4rem 0.6rem;
  font-size: 0.88rem;
  font-family: var(--sans);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--ink);
}
.sidebar .search-box input:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}

.content { padding: 2.5rem 3rem 5rem; max-width: 880px; }
.content .crumbs {
  font-size: 0.85rem; color: var(--ink-faint);
  margin-bottom: 1rem;
}
.content .crumbs a {
  color: var(--ink-faint); border-bottom: 1px dotted var(--ink-faint);
}
.content .crumbs a:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* ---------- Callouts ---------- */
.callout {
  border-left: 3px solid var(--accent);
  background: var(--bg-callout);
  padding: 0.8rem 1rem;
  border-radius: 0 var(--radius) var(--radius) 0;
  margin: 1.2rem 0;
}
.callout.tip { border-left-color: var(--green); background: var(--green-soft); }
.callout.warn { border-left-color: var(--red); background: var(--red-soft); }
.callout.note { border-left-color: var(--blue); background: var(--blue-soft); }
.callout.idea { border-left-color: var(--orange); background: var(--orange-soft); }
.callout .label {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.3rem;
  color: var(--ink-soft);
}
.callout p:last-child { margin-bottom: 0; }

/* ---------- Topic cards grid ---------- */
.topic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}
.topic-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.2rem 1.3rem;
  box-shadow: var(--shadow);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  display: block;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
}
.topic-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}
.topic-card h3 { margin: 0 0 0.4rem; color: var(--accent); font-size: 1.1rem; }
.topic-card p { margin: 0; font-size: 0.92rem; color: var(--ink-soft); }
.topic-card .count {
  display: inline-block; margin-top: 0.6rem;
  font-size: 0.75rem; color: var(--ink-faint);
  text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600;
}
.topic-card.empty { opacity: 0.5; }
.topic-card.empty:hover { transform: none; box-shadow: var(--shadow); }
.topic-card.wip { border-left: 3px solid var(--orange); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  padding: 0.5rem 1rem;
  background: var(--bg-card);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.9rem;
  font-family: var(--sans);
  cursor: pointer;
  text-decoration: none;
  border-bottom: 1px solid var(--border);
}
.btn:hover { background: var(--bg-code); border-bottom-color: var(--border); }
.btn.primary { background: var(--accent); color: white; border-color: var(--accent); }
.btn.primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: white; }
.btn .icon { margin-right: 0.4rem; }

.toolbar {
  display: flex; gap: 0.5rem; flex-wrap: wrap;
  margin: 0 0 1.5rem;
  align-items: center;
}
.toolbar .grow { flex: 1; }
.toolbar .badge {
  display: inline-block;
  font-size: 0.75rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 0.2rem 0.6rem;
  border-radius: 12px;
  color: var(--ink-soft);
}

/* ---------- Footer / next nav ---------- */
.next-nav {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 3rem; padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  font-size: 0.95rem;
  gap: 1rem;
  flex-wrap: wrap;
}
.next-nav a {
  color: var(--accent); border-bottom: 0;
  padding: 0.5rem 0.9rem; border-radius: var(--radius);
  background: var(--bg-card); border: 1px solid var(--border);
}
.next-nav a:hover { background: var(--bg-callout); border-color: var(--accent); }
.next-nav .next-label { font-size: 0.75rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.06em; display: block; }
.meta { text-align: center; margin-top: 2.5rem; color: var(--ink-faint); font-size: 0.8rem; }

/* ---------- Hero / landing ---------- */
.hero {
  text-align: center;
  padding: 4rem 1.5rem 3rem;
  max-width: 820px;
  margin: 0 auto;
}
.hero .eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 1rem;
}
.hero h1 {
  font-size: 3rem; line-height: 1.1;
  margin: 0 0 0.8rem;
}
.hero .tagline {
  font-size: 1.15rem; color: var(--ink-soft);
  max-width: 640px; margin: 0 auto 2rem;
}
.hero .principles {
  display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center;
  margin: 1.5rem 0;
}
.hero .principles span {
  font-size: 0.8rem; background: var(--bg-card);
  border: 1px solid var(--border); padding: 0.3rem 0.7rem;
  border-radius: 14px; color: var(--ink-soft);
}

/* ---------- Design principles block ---------- */
.principles-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.8rem; margin: 1.5rem 0;
}
.principle {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.9rem 1.1rem;
  font-size: 0.92rem;
}
.principle .num {
  font-family: var(--serif); font-weight: 700;
  color: var(--accent); font-size: 0.9rem;
  text-transform: uppercase; letter-spacing: 0.06em;
  display: block; margin-bottom: 0.3rem;
}

/* ---------- Diagram blocks ---------- */
.diagram {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  margin: 1.2rem 0;
  font-family: var(--mono);
  font-size: 0.88rem;
  line-height: 1.5;
  white-space: pre;
  overflow-x: auto;
}

/* ---------- Mobile ---------- */
@media (max-width: 900px) {
  .docs-layout { grid-template-columns: minmax(0, 1fr); }
  .sidebar {
    position: static; max-height: none; border-right: 0;
    border-bottom: 1px solid var(--border);
    padding: 1rem;
  }
  .content { padding: 1.5rem 1rem 3rem; }
  .hero h1 { font-size: 2.2rem; }
  .hero { padding: 2rem 1rem; }
}


/* ---------- Small phones: nothing may exceed the viewport ---------- */
@media (max-width: 700px) {
  /* Grid/flex children default to min-width:auto, which lets an unbreakable
     child (wide ASCII diagram, long code line, wide table) push the whole
     layout wider than the screen. Reset it so wide children scroll inside
     their own box instead of breaking the page. */
  .docs-layout, .sidebar, .content { min-width: 0; }
  .content { overflow-x: hidden; }
  .content > * { max-width: 100%; }

  /* Tables: tighten so normal 2-4 column tables fit, and let a rare wide
     one scroll inside its own box rather than the page. */
  .content table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; font-size: 0.78rem; }
  .content th, .content td { padding: 0.32rem 0.4rem; }

  /* ASCII diagrams: shrink the type and scroll within the block */
  .diagram, .content pre { font-size: 0.62rem; line-height: 1.45; }
  .diagram { padding: 0.9rem; max-width: 100%; }

  /* Tell the reader a block scrolls sideways rather than looking cut off */
  .diagram, .content pre, .content table {
    background-image: linear-gradient(to right, transparent 88%, rgba(128,128,128,0.18));
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 18px 100%;
  }

  /* Long words / URLs must not create overflow */
  .content p, .content li, .content td, .content h1, .content h2, .content h3 { overflow-wrap: break-word; }

  h1 { font-size: 1.7rem; }
  h2 { font-size: 1.3rem; }
  .toolbar { margin-bottom: 1rem; }
}

/* ---------- Print ---------- */
@media print {
  :root {
    --bg: white; --bg-card: white; --bg-sidebar: white;
    --bg-code: #f3f0e9; --ink: black; --ink-soft: #444;
    --border: #ccc; --shadow: none; --shadow-lg: none;
  }
  .sidebar, .toolbar, .next-nav, .no-print { display: none !important; }
  .docs-layout { grid-template-columns: minmax(0, 1fr); }
  .content { max-width: 100%; padding: 0; }
  body { font-size: 11pt; }
  h1 { font-size: 24pt; page-break-after: avoid; }
  h2, h3, h4 { page-break-after: avoid; }
  pre, blockquote, .callout, .diagram, table { page-break-inside: avoid; }
  a { color: var(--ink); border-bottom: 0; }
  a[href^="http"]::after {
    content: " (" attr(href) ")"; font-size: 0.8em; color: #666;
  }
  a[href^="/"]::after, a[href^="#"]::after { content: ""; }
  .topic-card { box-shadow: none; }
}