@layer reset, base, layout, components, prose, print;

/* Cross-document view transitions: same-origin navigations crossfade in
   supporting browsers and degrade to instant loads elsewhere. */
@view-transition {
  navigation: auto;
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }
  body { min-height: 100dvh; line-height: 1.55; }
  img, svg { display: block; max-width: 100%; height: auto; }
  [hidden] { display: none !important; }
  a { color: inherit; }
  input, button { font: inherit; }
}

@layer base {
  /* Every color pairs light and dark via light-dark(). The effective theme
     is whatever color-scheme resolves to: the OS preference by default, or
     the explicit data-theme override set by theme.js. */
  :root {
    color-scheme: light dark;
    --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    --bg: light-dark(#f8f7f3, #0f1217);
    --fg: light-dark(#1a1d23, #eef2f7);
    --muted: light-dark(#5b6573, #a2acba);
    --quiet: light-dark(#636c79, #737d8b);
    --surface: light-dark(#ffffff, #161b22);
    --surface-2: light-dark(#efece4, #1f2632);
    --border: light-dark(#ddd8cc, #2c3442);
    --accent: light-dark(#245bd6, #8db2ff);
    --accent-2: light-dark(#0f766e, #70d6c8);

    --wide: 50rem;
    --gutter: clamp(1rem, 4vw, 2.5rem);

    --radius: 6px;
    --radius-pill: 999px;

    /* Spacing scale (0.25rem base step) */
    --space-3xs: 0.25rem;
    --space-2xs: 0.375rem;
    --space-xs: 0.5rem;
    --space-sm: 0.75rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;

    /* Semantic spacing */
    --space-section: clamp(1.75rem, 5vw, 3.5rem);
    --pad-card: var(--space-sm) var(--space-md);
  }

  :root[data-theme="light"] { color-scheme: light; }
  :root[data-theme="dark"] { color-scheme: dark; }

  body {
    display: grid;
    grid-template-rows: auto 1fr auto;
    background-color: var(--bg);
    color: var(--fg);
    font-family: var(--font-sans);
    font-size: clamp(1rem, 0.96rem + 0.18vw, 1.06rem);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
  }

  a { color: var(--accent); text-underline-offset: 0.18em; }
  a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

  code, pre, time, .meta, .eyebrow { font-family: var(--font-mono); }
  code { padding: 0.08rem 0.3rem; border-radius: var(--radius); background: var(--surface-2); color: var(--fg); }
  pre { overflow-x: auto; padding: var(--space-md); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
}

@layer layout {
  .layout, .nav, .site-footer > p {
    width: min(calc(100% - var(--gutter) * 2), var(--wide));
    margin-inline: auto;
  }

  main { padding-block: var(--space-section); }

  .site-header {
    position: sticky;
    top: 0;
    z-index: 5;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
  }

  .nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding-block: var(--space-sm);
  }

  .brand { color: var(--fg); font-weight: 700; text-decoration: none; letter-spacing: -0.03em; }

  .nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 0.82rem;
  }

  .nav-links a { text-decoration: none; }
  .nav-links a:hover { color: var(--fg); }

  .theme-toggle {
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    background: none;
    color: var(--muted);
    cursor: pointer;
  }

  .theme-toggle:hover { color: var(--fg); }
  .theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

  /* The button shows the theme a click switches to: moon in light mode, sun
     in dark. Both icons are stacked in one SVG; light-dark() hides the
     inactive one, so the icon tracks the effective theme with no JS. */
  .theme-toggle .icon-sun { color: light-dark(transparent, currentColor); }
  .theme-toggle .icon-moon { color: light-dark(currentColor, transparent); }

  .site-footer {
    margin-top: clamp(2.5rem, 8vw, 5rem);
    border-top: 1px solid var(--border);
    color: var(--quiet);
  }

  .site-footer > p {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    padding-block: var(--space-lg) var(--space-xl);
    font-family: var(--font-mono);
    font-size: 0.78rem;
  }
}

@layer components {
  .skip {
    position: fixed;
    top: var(--space-sm);
    left: var(--space-sm);
    z-index: 10;
    transform: translateY(-140%);
    padding: var(--space-xs) var(--space-sm);
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
  }

  .skip:focus { transform: translateY(0); }

  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  .eyebrow {
    color: var(--quiet);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .page-header {
    display: grid;
    gap: var(--space-xs);
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--border);
  }

  .page-header h1 { font-size: clamp(1.8rem, 4vw, 3rem); line-height: 1.04; letter-spacing: -0.045em; }
  .page-header p:not(.eyebrow) { color: var(--muted); }

  .meta { display: flex; flex-wrap: wrap; gap: var(--space-xs); color: var(--muted); font-size: 0.82rem; }
  .meta span:not(:first-child)::before { content: "/"; margin-right: var(--space-xs); color: var(--quiet); }

  .page-header p.schedule { font-size: 0.8rem; color: var(--quiet); }
  .schedule time { color: var(--muted); font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }

  .digest-list {
    display: grid;
    gap: var(--space-xs);
    padding: 0;
    list-style: none;
  }

  .digest-list > li {
    display: grid;
    padding: var(--pad-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
  }

  .digest-list time { color: var(--quiet); font-size: 0.82rem; }
  .digest-list h2 { margin: 0; font-size: 1.05rem; letter-spacing: -0.015em; }
  .digest-list h2 a { color: var(--fg); text-decoration: none; }
  .digest-list h2 a:hover { color: var(--accent); }
  .digest-list p { color: var(--muted); }

  .digest-row { gap: var(--space-3xs); }
  .digest-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-xs);
  }
  .digest-meta time a {
    color: var(--fg);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-decoration: none;
  }
  .digest-meta time a:hover { color: var(--accent); }
  .digest-count { color: var(--quiet); font-size: 0.82rem; }
  .digest-count::before { content: "·"; margin-right: var(--space-xs); color: var(--quiet); }
  .digest-lead {
    min-width: 0;
    overflow: hidden;
    color: var(--muted);
    font-size: 0.9rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-decoration: none;
  }
  .digest-lead:hover { color: var(--accent); }

  .digest-list > li.digest-month {
    margin-top: var(--space-md);
    padding: 0 0 var(--space-2xs);
    border: 0;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    background: none;
  }

  .digest-month h2 {
    font-family: var(--font-mono);
    font-size: 0.95rem;
    letter-spacing: -0.01em;
  }

  .pagination {
    display: flex;
    justify-content: space-between;
    gap: var(--space-md);
    margin-top: var(--space-lg);
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 0.82rem;
  }

  /* Home index */
  .filter-bar {
    display: grid;
    gap: var(--space-xs);
    margin-bottom: var(--space-sm);
  }

  .filter-search { width: 100%; }

  .filter-search input {
    width: 100%;
    padding: var(--space-xs) var(--space-sm);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--fg);
  }

  .filter-search input:focus-visible { outline: none; border-color: var(--accent); }

  /* Stays rendered when empty so the aria-live region keeps announcing. */
  .filter-count {
    min-height: 1lh;
    color: var(--quiet);
    font-family: var(--font-mono);
    font-size: 0.82rem;
    white-space: nowrap;
  }

  .story-list {
    display: grid;
    gap: var(--space-xs);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .story-row { margin: 0; }

  .story-link {
    display: grid;
    gap: var(--space-2xs);
    padding: var(--pad-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    text-decoration: none;
    color: var(--fg);
  }

  .story-link:hover { border-color: var(--accent); }

  .story-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-xs);
  }

  .badge {
    padding: 0.1rem 0.5rem;
    border-radius: var(--radius-pill);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    border: 1px solid var(--border);
  }

  .badge-cat { background: var(--surface-2); color: var(--muted); }
  .badge-status { background: transparent; color: var(--quiet); }

  .story-title { font-weight: 650; letter-spacing: -0.01em; }

  .story-summary {
    color: var(--muted);
    font-size: 0.9rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .story-empty { color: var(--muted); padding: var(--space-md) 0; }

  .search-more {
    width: 100%;
    margin-top: var(--space-xs);
    padding: var(--space-xs) var(--space-md);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 0.82rem;
    cursor: pointer;
  }

  .search-more::-moz-focus-inner { border: 0; }
  .search-more:focus { outline: none; }
  .search-more:hover,
  .search-more:focus-visible { border-color: var(--accent); color: var(--fg); }
}

@layer prose {
  .prose { display: grid; gap: var(--space-md); }
  .prose h2 { margin-top: var(--space-md); font-size: 1.4rem; letter-spacing: -0.025em; }
  .prose h3 { margin-top: var(--space-sm); font-size: 1.1rem; }
  .prose p, .prose li { color: color-mix(in oklab, var(--fg) 90%, var(--muted)); }
  .prose ul, .prose ol { padding-left: 1.35rem; }
  .prose li + li { margin-top: var(--space-3xs); }
  .prose blockquote { padding-left: var(--space-md); border-left: 3px solid var(--accent); color: var(--muted); }
  .prose table { width: 100%; border-collapse: collapse; }
  .prose th, .prose td { padding: var(--space-xs); border: 1px solid var(--border); text-align: left; }

  .story-fields > ul {
    padding: var(--space-3xs) var(--space-md) var(--space-xs);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    list-style: none;
  }

  .story-fields > ul > li {
    margin-top: 0;
    padding: var(--space-xs) 0;
    border-top: 1px solid color-mix(in oklab, var(--border) 55%, transparent);
  }

  .story-fields > ul > li:first-child { border-top: 0; }

  .story-fields > ul > li > strong:first-child {
    color: var(--muted);
    font-weight: 600;
  }

  .day-section { margin-top: var(--space-xl); }

  .day-section h2 {
    margin-bottom: var(--space-sm);
    padding-bottom: var(--space-2xs);
    border-bottom: 1px solid var(--border);
    font-size: 1.1rem;
    letter-spacing: -0.02em;
  }

  .run-meta {
    margin-top: var(--space-xl);
    color: var(--muted);
    font-size: 0.85rem;
  }

  .run-meta .meta { margin-top: var(--space-sm); font-size: 0.78rem; }

  .story-page .meta a { text-decoration: none; }
}

@media (max-width: 640px) {
  .nav { gap: var(--space-sm); }
  .nav-links { flex-wrap: nowrap; }
}

@media print {
  .site-header, .site-footer, .skip, .filter-bar { display: none; }
  body { background: white; color: black; }
  a { color: black; }
}