/* =========================
   Layout & Container
   ========================= */
:root {
  /* fallbacks if Pico variables aren't present */
  --primary: #0d6efd;
  --primary-hover: #0b5ed7;
  --primary-inverse: #ffffff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --primary: #69a6ff;
    --primary-hover: #8bb8ff;
    --primary-inverse: #0b0f14;
  }
}

/* Use Pico's container for centering and width */
.container {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  max-width: 980px;            /* comfortable line length */
  margin-inline: auto;
}

/* Section breathing room */
section, article {
  margin-bottom: 2rem;
}

/* =========================
   Expand / Collapse Controls
   ========================= */
.expand-collapse-controls {
  margin: 0.5rem 0 1.25rem;
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.expand-collapse-controls button {
  /* Pico-like primary buttons */
  background-color: var(--primary);
  color: var(--primary-inverse);
  border: none;
  border-radius: 0.42rem;
  padding: 0.45rem 0.9rem;
  font-size: 0.95rem;
  line-height: 1.1;
  cursor: pointer;
  transition: background-color 0.18s ease-in-out, transform 0.05s ease;
}

.expand-collapse-controls button:hover { background-color: var(--primary-hover); }
.expand-collapse-controls button:active { transform: translateY(1px); }

/* If buttons are plain <button> without the wrapper, still give them some space */
p:has(> button) { margin-bottom: 1rem; }

/* =========================
   Details / Summary Styling
   ========================= */
details {
  margin: 0.5rem 0 1.25rem;
  border-left: 2px solid rgba(127, 127, 127, 0.25);
  padding-left: 0.75rem;
}

details summary {
  cursor: pointer;
  font-weight: 600;
  list-style: none;       /* hide default marker in some browsers */
  padding: 0.2rem 0;
  outline: none;
}

/* Add a subtle caret that rotates */
details summary::after {
  content: " ▸";
  display: inline-block;
  transition: transform 0.15s ease-in-out;
  translate: 0 1px; /* optical alignment */
}
details[open] summary::after { transform: rotate(90deg); }

/* Reduce extra margin that some browsers add after summary */
details > summary + * { margin-top: 0.35rem; }

/* =========================
   Typography & Code
   ========================= */
code, pre { font-size: 0.95em; }
pre { overflow-x: auto; }

/* Headings: tiny bottom spacing tweak for compact “engineery” feel */
h1, h2, h3 { margin-bottom: 0.4rem; }

/* =========================
   Tables
   ========================= */
table {
  margin: 0.5rem 0 1rem;
  width: 100%;
  border-collapse: collapse;
}
th, td {
  padding: 0.45rem 0.6rem;
  border-bottom: 1px solid rgba(127, 127, 127, 0.25);
}
thead th { font-weight: 700; }

/* =========================
   Utilities
   ========================= */
/* Subtle horizontal separators if you use --- in Markdown that becomes <hr> */
hr {
  border: 0;
  border-top: 1px solid rgba(127, 127, 127, 0.25);
  margin: 1.25rem 0;
}

/* Make links slightly bolder for scannability */
a { font-weight: 500; }