@layer reset, base, layout, nav, content, search, states, responsive;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  :root { color-scheme: light dark; }
}

@layer base {
  :root {
    --text: #1A1917;
    --text-muted: #6B6860;
    --text-faint: #A8A59F;
    --accent: #5C5FA6;
    --accent-subtle: oklch(60% 0.12 270 / 0.08);
    --border: oklch(0% 0 0 / 0.09);
    --sidebar-w: 16rem;
    --header-h: 3.25rem;
    --font-serif: 'Lora', Georgia, serif;
    --font-sans: -apple-system, 'Helvetica Neue', sans-serif;
  }
  html, body { block-size: 100%; overflow: hidden; }
  :root { --content-scale: 1; }
  body { font-family: var(--font-sans); color: var(--text); font-size: 1rem; line-height: 1.65; }

  @media (prefers-color-scheme: dark) {
    :root {
      --text: #E8E6E1;
      --text-muted: #9C9891;
      --text-faint: #6B6860;
      --accent: #8B8ED4;
      --accent-subtle: oklch(70% 0.12 270 / 0.12);
      --border: oklch(100% 0 0 / 0.10);
    }
    body { background: #1C1B19; }
  }
}

@layer layout {
  .skip-link {
    position: absolute; inset-inline-start: -9999px; inset-block-start: 0;
    padding: 0.5rem 1rem; background: var(--accent); color: #fff;
    font-size: 0.875rem; font-weight: 500; border-radius: 0 0 0.375rem 0;
    z-index: 999; text-decoration: none;
  }
  .skip-link:focus { inset-inline-start: 0; }

  .page-shell {
    max-inline-size: 68.75rem; margin-inline: auto; block-size: 100dvh;
    display: grid;
    grid-template-rows: var(--header-h) 1fr;
    grid-template-columns: var(--sidebar-w) 1fr;
    grid-template-areas: "header header" "sidebar main";
  }

  .site-header {
    grid-area: header;
    display: grid; grid-template-columns: var(--sidebar-w) 1fr;
    align-items: center; border-block-end: 1px solid var(--border);
  }
  .header-start { display: flex; align-items: center; gap: 0.75rem; padding-inline: 1.25rem; }
  .header-end { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding-inline: 1.25rem; }

  .logo { font-family: var(--font-serif); font-size: 1.0625rem; font-weight: 600; color: var(--text); text-decoration: none; letter-spacing: -0.01em; }
  .logo span { color: var(--accent); }
  .header-label { font-size: 0.8125rem; color: var(--text-faint); }

  .menu-toggle { display: none; }

  .back-link { margin-inline-start: auto; font-size: 0.8125rem; color: var(--text-muted); text-decoration: none; display: flex; align-items: center; gap: 0.25rem; white-space: nowrap; }
  .back-link:hover { color: var(--accent); }

  .font-size-widget { display: flex; align-items: center; gap: 0.125rem; }
  .font-size-btn {
    background: none; border: 1px solid var(--border); border-radius: 0.3125rem;
    cursor: pointer; color: var(--text-muted); font-family: var(--font-serif);
    font-weight: 600; line-height: 1; padding: 0.1875rem 0.375rem;
    font-size: 0.6875rem; transition: border-color 0.15s, color 0.15s;
    -webkit-tap-highlight-color: transparent;
  }
  .font-size-btn--large { font-size: 0.9375rem; }
  .font-size-btn:hover { border-color: oklch(0% 0 0 / 0.2); color: var(--text); }
  .font-size-btn:active { background: var(--accent-subtle); }
  .font-size-btn[disabled] { opacity: 0.3; cursor: default; }
  .font-size-btn[disabled]:hover { border-color: var(--border); color: var(--text-muted); }

  @media (prefers-color-scheme: dark) {
    .font-size-btn:hover { border-color: oklch(100% 0 0 / 0.2); }
  }

  .sidebar { grid-area: sidebar; border-inline-end: 1px solid var(--border); overflow-y: auto; padding-block: 1rem 2.5rem; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
  .sidebar-backdrop { display: none; }
  .content-wrap { grid-area: main; overflow-y: auto; }
}

@layer nav {
  .nav-top { display: block; padding: 0.375rem 1.25rem; font-size: 0.875rem; color: var(--text-muted); text-decoration: none; }
  .nav-top:hover { color: var(--text); }
  .nav-top[aria-current="page"] { color: var(--accent); font-weight: 500; }

  .nav-divider { block-size: 1px; background: var(--border); margin: 0.625rem 1.25rem; }

  details.nav-group summary {
    list-style: none; display: flex; align-items: center; gap: 0.4375rem;
    padding: 0.4375rem 1.25rem; cursor: pointer; font-size: 0.75rem; font-weight: 500;
    letter-spacing: 0.045em; text-transform: uppercase; color: var(--text-muted); user-select: none;
  }
  details.nav-group summary::-webkit-details-marker { display: none; }
  details.nav-group summary::before {
    content: ''; display: block; flex-shrink: 0; inline-size: 0.875rem; block-size: 0.875rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M5 3l4 4-4 4' stroke='%239B9890' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-size: contain; transition: transform 0.18s ease;
  }
  details.nav-group summary:hover { color: var(--text); }
  details.nav-group summary:hover::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M5 3l4 4-4 4' stroke='%231A1917' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
  details.nav-group[open] summary::before { transform: rotate(90deg); }

  .nav-links { padding-block-end: 0.25rem; }
  .nav-link { display: block; padding: 0.3125rem 1.25rem 0.3125rem 2.5625rem; font-size: 0.875rem; color: var(--text-muted); text-decoration: none; }
  .nav-link:hover { color: var(--text); }
  .nav-link[aria-current="page"] { color: var(--accent); font-weight: 500; background: var(--accent-subtle); }

  @media (prefers-reduced-motion: reduce) { details.nav-group summary::before { transition: none; } }

  @media (prefers-color-scheme: dark) {
    details.nav-group summary::before {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M5 3l4 4-4 4' stroke='%239C9891' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    }
    details.nav-group summary:hover::before {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M5 3l4 4-4 4' stroke='%23E8E6E1' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    }
  }
}

@layer content {
  .content { padding: clamp(1rem, 3vw, 2.5rem) clamp(1rem, 5vw, 3rem) 5rem; font-size: calc(1rem * var(--content-scale)); }
  .content h1 { font-family: var(--font-serif); font-size: clamp(1.625rem, 3vw, 2rem); font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; margin-block-end: 0.625rem; }
  .content .lead { font-size: calc(clamp(0.9375rem, 1.5vw, 1.0625rem) * var(--content-scale)); line-height: 1.7; color: var(--text-muted); margin-block-end: 2.25rem; padding-block-end: 2rem; border-block-end: 1px solid var(--border); }
  .content h2 { font-family: var(--font-serif); font-size: clamp(1.125rem, 2vw, 1.375rem); font-weight: 600; line-height: 1.3; margin-block: 2.25rem 0.625rem; }
  .content h3 { font-size: 0.9375rem; font-weight: 500; margin-block: 1.5rem 0.375rem; }
  .content p { margin-block-end: 0.875rem; }
  .content ol, .content ul { padding-inline-start: 1.25rem; margin-block-end: 0.875rem; }
  .content li { margin-block-end: 0.3125rem; }
  .content a { color: var(--accent); text-decoration: none; }
  .content a:hover { text-decoration: underline; }
  .content code { font-size: 0.8125rem; background: oklch(0% 0 0 / 0.06); padding: 0.125rem 0.375rem; border-radius: 0.25rem; font-family: monospace; }
  .content strong { font-weight: 500; }

  @media (prefers-color-scheme: dark) {
    .content code { background: oklch(100% 0 0 / 0.08); }
  }

  .callout { border-inline-start: 2px solid var(--accent); padding: 0.75rem 1rem; margin-block: 1.375rem; border-radius: 0 0.375rem 0.375rem 0; background: var(--accent-subtle); }
  .callout p { margin: 0; font-size: 0.875rem; }
  .callout strong { color: var(--accent); }

  .version-badge { display: inline-flex; align-items: center; font-size: 0.75rem; color: var(--text-faint); border: 1px solid var(--border); padding: 0.125rem 0.625rem; border-radius: 1.25rem; margin-block-end: 1.375rem; }

  .page-nav { display: flex; justify-content: space-between; margin-block-start: 3.5rem; padding-block-start: 1.5rem; border-block-start: 1px solid var(--border); }
  .page-nav a { font-size: 0.875rem; color: var(--text-muted); text-decoration: none; display: flex; flex-direction: column; gap: 0.125rem; max-inline-size: 48%; }
  .page-nav a:hover .pn-title { color: var(--accent); }
  .pn-next { text-align: end; margin-inline-start: auto; }
  .pn-label { font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); }
  .pn-title { font-weight: 500; color: var(--text); font-size: 0.875rem; }

  .site-footer { border-block-start: 1px solid var(--border); padding: 1.25rem clamp(1.5rem, 5vw, 4rem); display: flex; align-items: center; justify-content: space-between; }
  .site-footer p { font-size: 0.75rem; color: var(--text-faint); }
  .site-footer a { font-size: 0.75rem; color: var(--text-muted); text-decoration: none; }
  .site-footer a:hover { color: var(--accent); }
}

@layer search {
  .search-trigger { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.375rem 0.875rem; min-inline-size: 16rem; border: 1px solid var(--border); border-radius: 1.5rem; background: transparent; color: var(--text-faint); font-family: var(--font-sans); font-size: 0.8125rem; cursor: pointer; transition: border-color 0.15s, color 0.15s; white-space: nowrap; justify-self: center; }
  .search-trigger:hover { border-color: oklch(0% 0 0 / 0.2); color: var(--text-muted); }
  .search-trigger svg { flex-shrink: 0; opacity: 0.5; }

  .search-overlay { display: none; position: fixed; inset: 0; z-index: 200; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); background: oklch(15% 0 0 / 0.45); align-items: flex-start; justify-content: center; padding-block-start: 12vh; }
  .search-overlay.open { display: flex; }

  .search-box { inline-size: min(38rem, 90vw); border-radius: 0.75rem; overflow: hidden; box-shadow: 0 1.5rem 4rem oklch(0% 0 0 / 0.35); }

  .search-input-wrap { display: flex; align-items: center; gap: 0.625rem; padding: 0.875rem 1.125rem; background: Canvas; border-block-end: 1px solid var(--border); }
  .search-input-wrap svg { flex-shrink: 0; color: var(--text-faint); }
  .search-input { flex: 1; border: none; outline: none; font-family: var(--font-sans); font-size: 1rem; color: var(--text); background: transparent; }
  .search-input::placeholder { color: var(--text-faint); }
  .search-clear { background: none; border: none; cursor: pointer; color: var(--text-faint); font-size: 1.25rem; line-height: 1; padding: 0 0.125rem; display: none; }
  .search-clear.visible { display: block; }
  .search-clear:hover { color: var(--text-muted); }

  .search-results { background: Canvas; max-block-size: 60vh; overflow-y: auto; }

  .search-hint { padding: 1.25rem 1.125rem; font-size: 0.8125rem; color: var(--text-faint); }
  .search-hint ul { list-style: none; padding: 0; margin-block-start: 0.625rem; display: flex; flex-direction: column; gap: 0.125rem; }
  .search-hint li a { color: var(--accent); text-decoration: none; font-size: 0.875rem; display: block; padding: 0.25rem 0; }
  .search-hint li a:hover { text-decoration: underline; }

  .search-result-item { display: block; padding: 0.875rem 1.125rem; text-decoration: none; border-block-end: 1px solid var(--border); transition: background 0.1s; }
  .search-result-item:last-child { border-block-end: none; }
  .search-result-item:hover { background: var(--accent-subtle); }
  .result-section { font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-faint); margin-block-end: 0.1875rem; }
  .result-title { font-size: 0.9375rem; font-weight: 500; color: var(--text); margin-block-end: 0.1875rem; }
  .result-excerpt { font-size: 0.8125rem; color: var(--text-muted); line-height: 1.5; }
  .result-title mark, .result-excerpt mark { background: oklch(85% 0.12 270 / 0.35); color: var(--accent); border-radius: 0.125rem; }
  .search-empty { padding: 2rem 1.125rem; text-align: center; font-size: 0.875rem; color: var(--text-faint); }

  @media (prefers-color-scheme: dark) {
    .search-trigger:hover { border-color: oklch(100% 0 0 / 0.2); }
    .result-title mark, .result-excerpt mark { background: oklch(55% 0.14 270 / 0.40); }
  }

  @media (prefers-reduced-motion: reduce) { .search-trigger, .search-result-item, .font-size-btn { transition: none; } }
}

@layer states {
  :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 0.1875rem; }
  summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
}

/* ------------------------------------------------------------------ */
/*  Mobile / narrow viewport                                          */
/* ------------------------------------------------------------------ */
@layer responsive {
  @media (max-width: 48rem) {

    /* Let body scroll naturally */
    html, body { overflow: auto; }

    /* Single-column grid, no sidebar column */
    .page-shell {
      grid-template-columns: 1fr;
      grid-template-areas: "header" "main";
      block-size: auto;
      min-block-size: 100dvh;
    }

    /* Header becomes a simple flex row */
    .site-header {
      grid-template-columns: 1fr;
      padding-inline: 1rem;
      display: flex;
      justify-content: space-between;
      gap: 0.5rem;
    }
    .header-start { padding-inline: 0; }
    .header-end { display: flex; gap: 0.75rem; align-items: center; padding-inline: 0; }

    /* Show the hamburger */
    .menu-toggle {
      display: flex; align-items: center; justify-content: center;
      background: none; border: none; cursor: pointer;
      padding: 0.375rem; color: var(--text-muted);
      -webkit-tap-highlight-color: transparent;
    }
    .menu-toggle:hover { color: var(--text); }
    .menu-toggle svg { display: block; }

    /* Collapse search trigger to icon-only */
    .search-trigger { min-inline-size: 0; padding: 0.375rem 0.625rem; font-size: 0; gap: 0; border: none; }
    .search-trigger svg { opacity: 0.7; }

    /* Hide the bloqloft.com back-link on mobile */
    .back-link { display: none; }

    /* Font size widget stays visible on mobile */
    .font-size-widget { gap: 0.0625rem; }

    /* Sidebar becomes a slide-over drawer */
    .sidebar {
      position: fixed;
      inset-block-start: var(--header-h);
      inset-inline-start: 0;
      inset-block-end: 0;
      inline-size: min(18rem, 85vw);
      background: Canvas;
      z-index: 150;
      transform: translateX(-100%);
      transition: transform 0.25s ease;
      border-inline-end: 1px solid var(--border);
      padding-block-start: 0.75rem;
    }
    .sidebar.open {
      transform: translateX(0);
    }

    /* Backdrop behind the drawer */
    .sidebar-backdrop {
      display: none;
      position: fixed;
      inset: 0;
      inset-block-start: var(--header-h);
      z-index: 140;
      background: oklch(0% 0 0 / 0.3);
      -webkit-tap-highlight-color: transparent;
    }
    .sidebar-backdrop.open { display: block; }

    /* Close nav when a link is tapped (handled via JS) */
    .sidebar .nav-link,
    .sidebar .nav-top {
      padding-block: 0.5rem;
    }

    /* Content area scrolls naturally */
    .content-wrap { overflow: visible; }

    /* Search overlay adjustments */
    .search-overlay { padding-block-start: 6vh; }
    .search-box { inline-size: min(38rem, 95vw); }

    /* Reduce motion */
    @media (prefers-reduced-motion: reduce) {
      .sidebar { transition: none; }
    }
  }
}