/* ==========================================================================
   Component Styles - Layout Components System
   ========================================================================== */

@layer components {

/* ==========================================================================
   Page Layout Wrapper
   ========================================================================== */

.page-wrapper {
  display: flex;
  flex-direction: row;
  min-height: calc(100vh - 200px);
  max-width: var(--site-width, 1400px);
  margin: 0 auto;
  padding: var(--space-6, 1.5rem) var(--space-8, 2rem) 0;
  width: 100%;
  gap: var(--space-8, 2rem);
}

.main-content {
  flex: 1;
  min-width: 0; /* Prevent flex item overflow */
  max-width: 100%;
}

.page-wrapper--content-only,
.page-wrapper--feed-only {
  display: block;
}

.page-wrapper--content-only > .main-content,
.page-wrapper--feed-only > .main-content {
  width: min(100%, var(--page-width, 1200px));
  max-width: min(100%, var(--page-width, 1200px));
  margin-left: auto;
  margin-right: auto;
}

.page-wrapper--feed-only > .main-content {
  width: min(100%, calc(750px + (var(--space-4, 1rem) * 2)));
  max-width: min(100%, calc(750px + (var(--space-4, 1rem) * 2)));
}

/* ==========================================================================
   Navigation Component
   ========================================================================== */

.site-nav {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.site-header .site-nav {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  flex: 1 1 auto;
  min-width: 0;
  justify-content: center;
  grid-column: 2;
  justify-self: center;
}

/* Horizontal navigation (default, for header) */
.site-nav--header,
.site-nav--horizontal {
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

/* Vertical navigation (for sidebar) */
.site-nav--sidebar,
.site-nav--vertical {
  flex-direction: column;
  align-items: flex-start;
}

.nav-link {
  color: var(--color-text);
  text-decoration: none;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  transition: background-color 0.2s, color 0.2s;
}

.site-nav a {
  color: var(--color-text-muted);
  font-weight: 500;
  text-decoration: none;
}

.nav-link:hover {
  color: var(--color-primary);
  background-color: var(--color-surface);
}

.site-nav a:hover {
  color: var(--color-link, var(--color-primary));
  text-decoration: none;
}

/* ==========================================================================
   Navigation - Mobile Responsive
   ========================================================================== */

@media (max-width: 768px) {
  .site-nav--header,
  .site-nav--horizontal {
    /* Allow horizontal scrolling within nav only, not whole page */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* Prevent nav from causing page overflow */
    max-width: 100%;
    /* Hide scrollbar but keep functionality */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
  }

  .site-nav--header::-webkit-scrollbar,
  .site-nav--horizontal::-webkit-scrollbar {
    display: none; /* Chrome/Safari/Opera */
  }

  .nav-link {
    /* Prevent text wrapping in nav items */
    white-space: nowrap;
    flex-shrink: 0;
  }
}

/* ==========================================================================
   Footer Component
   ========================================================================== */

.site-footer {
  margin-top: auto;
  padding: var(--space-6) var(--space-4);
  background-color: var(--color-surface);
  border-top: 1px solid var(--color-border);
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.site-footer .container {
  max-width: var(--page-width);
  margin: 0 auto;
}

.footer-text {
  margin-bottom: 1rem;
}

.footer-links {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin: var(--space-4) 0;
}

.footer-links a {
  color: var(--color-text-muted);
  text-decoration: none;
}

.footer-links a:hover {
  color: var(--color-link, var(--color-primary));
}

.footer-copyright {
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.footer-copyright a {
  color: var(--color-primary);
  text-decoration: none;
}

.footer-copyright a:hover {
  text-decoration: underline;
}

/* ==========================================================================
   Document Sidebar (Table of Contents)
   ========================================================================== */

.content-wrapper {
  display: block;
}

.content-wrapper--with-sidebar {
  display: grid;
  gap: 2rem;
  max-width: 100%;
}

/* Sidebar on the right (default) */
.content-wrapper--sidebar-right {
  grid-template-columns: 1fr 250px;
}

.content-wrapper--sidebar-right article {
  order: 1;
}

.content-wrapper--sidebar-right .doc-sidebar {
  order: 2;
}

/* Sidebar on the left */
.content-wrapper--sidebar-left {
  grid-template-columns: 250px 1fr;
}

.content-wrapper--sidebar-left article {
  order: 2;
}

.content-wrapper--sidebar-left .doc-sidebar {
  order: 1;
}

.article-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  display: block;
  width: 100%;
  height: var(--article-progress-height, 4px);
  margin: 0;
  background: var(--article-progress-track, color-mix(in srgb, var(--color-text) 15%, var(--color-background) 85%));
  border-radius: 0;
  overflow: hidden;
  pointer-events: none;
  isolation: isolate;
}

.article-progress--hidden {
  opacity: 0;
  transform: translateY(-100%);
}

.article-progress__indicator {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: left center;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--article-progress-start, var(--color-primary)), var(--article-progress-end, var(--color-primary-light, var(--color-primary))));
  box-shadow: 0 0 18px var(--article-progress-glow, color-mix(in srgb, var(--color-primary) 60%, transparent));
  opacity: 1;
  transition: transform 0.24s ease, opacity 0.24s ease;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .article-progress__indicator {
    transition-duration: 0ms;
  }
}

.doc-sidebar {
  position: sticky;
  top: 1rem;
  height: fit-content;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  flex-shrink: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
}

.doc-sidebar--left {
  order: -1;
}

.doc-sidebar--right {
  order: 1;
}

.doc-sidebar::-webkit-scrollbar {
  width: 6px;
}

.doc-sidebar::-webkit-scrollbar-track {
  background: transparent;
}

.doc-sidebar::-webkit-scrollbar-thumb {
  background-color: var(--color-border);
  border-radius: 3px;
}

.doc-sidebar::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-text-muted);
}

.toc {
  margin: var(--space-6) 0;
  padding: 1rem;
  background-color: var(--color-surface);
  border-radius: 8px;
  border: 1px solid var(--color-border);
}

.toc-title {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-primary);
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid color-mix(in srgb, var(--color-primary) 25%, transparent);
}

.toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.toc-list--nested {
  margin-left: 1rem;
  margin-top: 0.25rem;
}

.toc-item {
  margin-bottom: 0.25rem;
}

.toc-item--level-2 {
  /* Top-level items */
}

.toc-item--level-3 {
  font-size: 0.9375rem;
}

.toc-item--level-4 {
  font-size: 0.875rem;
}

.toc-link {
  color: var(--color-text-muted);
  text-decoration: none;
  display: block;
  padding: 0.25rem 0;
  transition: color 0.2s;
}

.toc-link:hover {
  color: var(--color-primary);
}

/* ==========================================================================
   Feed Sidebar (Series Navigation)
   ========================================================================== */

.feed-sidebar {
  width: var(--feed-sidebar-width, 250px);
  position: sticky;
  top: 1rem;
  height: fit-content;
  max-height: calc(100vh - 2rem);
  flex-shrink: 0;

  /* Animate independently during view transitions */
  view-transition-name: feed-sidebar;
}

.feed-sidebar--left {
  order: -1;
}

.feed-sidebar--right {
  order: 1;
}

.feed-nav {
  display: flex;
  flex-direction: column;
  max-height: inherit;
  background-color: var(--color-surface);
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--color-primary) 20%, var(--color-border));
  overflow: hidden;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--color-primary) 5%, transparent),
    0 4px 24px -4px rgba(0, 0, 0, 0.3);
}

/* Chrome: header + format links + hotkeys -- non-scrolling top area */
.feed-nav-chrome {
  flex-shrink: 0;
  padding: 1.25rem 1.25rem 0;
  background-color: var(--color-surface);
}

/* Scrollable post list area */
#feed-nav-collapsible {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 1.25rem 1.25rem;

  /* Themed scrollbar - Firefox */
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
}

#feed-nav-collapsible::-webkit-scrollbar {
  width: 6px;
}

#feed-nav-collapsible::-webkit-scrollbar-track {
  background: transparent;
}

#feed-nav-collapsible::-webkit-scrollbar-thumb {
  background-color: var(--color-border);
  border-radius: 3px;
}

#feed-nav-collapsible::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-text-muted);
}

.feed-nav-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.625rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid color-mix(in srgb, var(--color-primary) 25%, transparent);
}

.feed-nav-heading {
  min-width: 0;
}

.feed-nav-title {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-primary);
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
  overflow-wrap: anywhere;
}

.feed-nav-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.feed-nav-counter {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--color-info, var(--color-text-muted));
  background: color-mix(in srgb, var(--color-info, var(--color-primary)) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-info, var(--color-primary)) 25%, transparent);
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  line-height: 1;
  flex-shrink: 0;
  letter-spacing: 0.05em;
}

.feed-nav-cycle {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
  min-width: 0;
  max-width: 100%;
}

.feed-nav-drawer {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.25s ease, opacity 0.2s ease, margin-bottom 0.25s ease, padding-bottom 0.25s ease;
}

.feed-nav-chrome:hover .feed-nav-drawer,
.feed-nav-chrome:focus-within .feed-nav-drawer,
.feed-sidebar.feed-sidebar--expanded .feed-nav-drawer {
  max-height: 12rem;
  opacity: 1;
}

.feed-nav-picker {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0 0 0.5rem;
}

.feed-nav-picker-input {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.2;
  padding: 0.55rem 0.75rem;
}

.feed-nav-cycle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent);
  border-radius: 4px;
  background: transparent;
  color: var(--color-text-muted);
  font-size: 0.8rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.15s, background-color 0.15s, border-color 0.15s;
}

.feed-nav-cycle-btn:hover {
  color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
}

.feed-nav-title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s;
}

.feed-nav-title a:hover {
  color: var(--color-primary);
}

.feed-nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  margin-bottom: 0.5rem;
  margin-top: 0.25rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
}

.feed-nav-format-link {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--color-text-muted);
  text-decoration: none;
  padding: 0.125rem 0.375rem;
  border: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent);
  border-radius: 3px;
  background: transparent;
  transition: color 0.15s, background-color 0.15s, border-color 0.15s;
  line-height: 1.2;
  letter-spacing: 0.03em;
}

.feed-nav-format-link:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
}

/* Hidden state for feed format links (toggled by feed-cycling.js) */
.feed-nav-links--hidden {
  display: none;
}

/* Hidden state for post nav (toggled by feed-cycling.js when feed has no prev/next) */
.post-nav--hidden {
  display: none;
}

.feed-nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.feed-nav-item {
  margin-bottom: 0.25rem;
}

.feed-nav-item--active .feed-nav-link {
  color: var(--color-text);
  font-weight: 600;
  background-color: color-mix(in srgb, var(--color-primary) 12%, transparent);
  border-radius: 0 4px 4px 0;
  border-left: 3px solid var(--color-primary);
  padding-left: calc(0.5rem - 3px);
  box-shadow: inset 0 0 12px -4px color-mix(in srgb, var(--color-primary) 15%, transparent);
}

.feed-nav-link {
  color: var(--color-text-muted);
  text-decoration: none;
  display: block;
  padding: 0.3rem 0.5rem;
  font-size: 0.8125rem;
  line-height: 1.35;
  transition: color 0.15s, background-color 0.15s, border-color 0.15s, transform 0.15s;
  border-left: 3px solid transparent;
  border-radius: 0 4px 4px 0;
}

.feed-nav-link:hover {
  color: var(--color-text);
  background-color: color-mix(in srgb, var(--color-text) 6%, transparent);
  border-left-color: color-mix(in srgb, var(--color-primary) 40%, transparent);
  transform: translateX(2px);
}

.feed-nav-empty {
  color: var(--color-text-muted);
  font-style: italic;
  font-size: 0.875rem;
}

.feed-nav-hotkeys {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
}

.feed-nav-hotkey-group {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

/* [/] prev/next hints: fade in on hover */
.feed-nav-hotkey-group--nav {
  opacity: 0;
  transition: opacity 0.2s ease;
}

.feed-nav:hover .feed-nav-hotkey-group--nav,
.feed-nav:focus-within .feed-nav-hotkey-group--nav,
.feed-sidebar.feed-sidebar--expanded .feed-nav-hotkey-group--nav {
  opacity: 1;
}

/* {/} feed cycling hint: always visible (discoverability) */
.feed-nav-hotkey-group--cycle {
  margin-left: auto;
}

.feed-nav-hotkey {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.feed-nav-hotkey kbd {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 600;
  padding: 0.125rem 0.35rem;
  color: var(--color-text-muted);
  background: color-mix(in srgb, var(--color-surface) 80%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent);
  border-bottom-width: 2px;
  border-bottom-color: color-mix(in srgb, var(--color-text) 18%, transparent);
  border-radius: 4px;
  line-height: 1;
  min-width: 1.2em;
  text-align: center;
  display: inline-block;
}

/* ==========================================================================
   Content Sidebar (renders a post slug as an aside widget)
   ========================================================================== */

.content-sidebar {
  position: sticky;
  top: 1rem;
  width: 380px;
  height: fit-content;
  flex-shrink: 0;
}

.content-sidebar--left {
  order: -1;
}

.content-sidebar--right {
  order: 1;
}

.content-sidebar-inner {
  font-size: 0.875rem;
}

/* Slash pages grid (rendered by render_slashes() in content sidebar) */
.home-slashes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 150px));
  gap: var(--space-2);
}

.home-slash-link {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  color: var(--color-text);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 500;
  transition: border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.home-slash-link:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--color-bg, #000) 8%, transparent);
}

/* ==========================================================================
   Responsive: Sidebars on smaller screens
   ========================================================================== */

/* Narrow content sidebar on medium screens */
@media (max-width: 1400px) {
  .content-sidebar {
    width: 280px;
  }
}

/* Stack content sidebar below content on tablet-ish screens */
@media (max-width: 1200px) {
  .page-wrapper {
    flex-direction: column;
    gap: 0;
  }

  .content-wrapper--with-sidebar {
    display: block;
  }

  .doc-sidebar {
    display: none;
  }

  .content-sidebar {
    position: static;
    width: 600px;
    max-width: calc(100% - 2rem);
    margin-top: var(--space-8, 2rem);
    align-self: center;
    order: 99;
  }

  .content-sidebar-inner {
    text-align: center;
  }

  .content-sidebar-inner .feed,
  .content-sidebar-inner .card {
    text-align: left;
  }

  .content-sidebar--left,
  .content-sidebar--right {
    margin-left: 0;
    margin-right: 0;
  }

  /* Feed sidebar: collapsed bar on tablet/mobile */
  .feed-sidebar {
    position: relative;
    top: 0;
    width: 100%;
    max-height: none;
    overflow: visible;
    margin: 0;
    order: -1;
  }

  .feed-sidebar .feed-nav {
    padding: 0;
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-top: none;
    overflow: visible;
    max-height: none;
  }

  /* Hide the collapsible wrapper by default (matches aria-controls target) */
  .feed-sidebar #feed-nav-collapsible {
    display: none;
    overflow: visible;
    padding: 0;
  }

  /* Hide format links and hotkeys in chrome when sidebar collapsed */
  .feed-sidebar .feed-nav-links,
  .feed-sidebar .feed-nav-hotkeys {
    display: none;
  }

  /* Reset chrome on mobile -- sidebar doesn't scroll internally */
  .feed-sidebar .feed-nav-chrome {
    padding: 0;
  }

  /* Header becomes the toggle bar */
  .feed-sidebar .feed-nav-header {
    cursor: pointer;
    padding: var(--space-2) var(--space-3);
    margin-bottom: 0;
    border-bottom: none;
    align-items: center;
    user-select: none;
    -webkit-user-select: none;
    transition: background-color 0.15s ease;
  }

  .feed-sidebar .feed-nav-header:hover {
    background-color: color-mix(in srgb, var(--color-border) 30%, transparent);
  }

  .feed-sidebar .feed-nav-header:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
    background-color: color-mix(in srgb, var(--color-border) 30%, transparent);
  }

  .feed-sidebar .feed-nav-header::after {
    content: '\25BC'; /* down arrow */
    font-size: 0.7em;
    margin-left: auto;
    flex-shrink: 0;
    align-self: center;
    opacity: 0.5;
    transition: transform 0.2s ease, opacity 0.15s ease;
  }

  .feed-sidebar .feed-nav-header:hover::after {
    opacity: 0.8;
  }

  /* When expanded: show the collapsible wrapper */
  .feed-sidebar.feed-sidebar--expanded #feed-nav-collapsible {
    display: block;
  }

  .feed-sidebar.feed-sidebar--expanded .feed-nav-links {
    display: flex;
  }

  .feed-sidebar.feed-sidebar--expanded .feed-nav-hotkeys {
    display: flex;
  }

  .feed-sidebar.feed-sidebar--expanded .feed-nav-list {
    max-height: clamp(200px, 50vh, 60vh);
    overflow-y: auto;
  }

  .feed-sidebar.feed-sidebar--expanded .feed-nav-header {
    margin-bottom: 0.75rem;
    border-bottom: 1px solid color-mix(in srgb, var(--color-text) 15%, var(--color-surface));
  }

  .feed-sidebar.feed-sidebar--expanded .feed-nav-header::after {
    transform: rotate(180deg);
  }

  .feed-sidebar.feed-sidebar--expanded .feed-nav {
    padding-bottom: var(--space-3);
  }

  .feed-sidebar.feed-sidebar--expanded .feed-nav-links,
  .feed-sidebar.feed-sidebar--expanded .feed-nav-hotkeys {
    padding: 0 var(--space-3);
  }

  .feed-sidebar.feed-sidebar--expanded .feed-nav-list {
    padding: 0 var(--space-3);
  }

  /* Reduced motion: disable arrow rotation transition */
  @media (prefers-reduced-motion: reduce) {
    .feed-sidebar .feed-nav-header::after {
      transition: none;
    }
    .feed-sidebar .feed-nav-header {
      transition: none;
    }
  }
}

/* Mobile: ensure page-wrapper doesn't overflow */
@media (max-width: 768px) {
  .page-wrapper {
    padding: 0;
    gap: 0;
    max-width: 100%;
    overflow-x: hidden;
  }

  .feed-sidebar .feed-nav-header {
    padding: var(--space-2);
  }
}

@media (max-width: 480px) {
  .home-slashes {
    grid-template-columns: repeat(auto-fill, minmax(80px, 130px));
  }
}

@media (max-width: 375px) {
  /* inherits padding: 0 from 768px breakpoint */
}

/* Remove old contradictory tablet override -- now handled above */

/* ==========================================================================
   Markdown-Driven Component Slots
   ========================================================================== */

/* ── Top Banner ── */
.slot-top-banner {
  padding: var(--space-2, 0.5rem) var(--space-4, 1rem);
  text-align: center;
  font-size: var(--text-sm, 0.875rem);
  color: var(--color-text-muted);
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 50%, transparent);
}

.slot-top-banner .top-banner-inner {
  max-width: var(--page-width, 1200px);
  margin: 0 auto;
}

.slot-top-banner a {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 500;
}

.slot-top-banner a:hover {
  text-decoration: underline;
}

/* ── Hero ── */
.slot-hero {
  max-width: var(--site-width, 1400px);
  margin: 0 auto;
  padding: var(--space-6, 1.5rem) var(--space-4, 1rem);
  text-align: center;
}

.slot-hero .hero-inner {
  max-width: var(--page-width, 1200px);
  margin: 0 auto;
}

/* Rendered markdown paragraph becomes the tagline */
.slot-hero .hero-inner p {
  font-size: var(--text-lg, 1.125rem);
  color: var(--color-text-muted);
  margin: 0;
  font-style: italic;
}

/* ── Nav Content (replaces config-driven nav) ── */
.slot-nav-content {
  flex: 1 1 auto;
  min-width: 0;
  grid-column: 2;
  justify-self: center;
}

.slot-nav-content .nav-inner {
  display: flex;
  gap: var(--space-4, 1rem);
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

/* Rendered markdown wraps links in <p> tags -- flatten them */
.slot-nav-content .nav-inner p {
  margin: 0;
  display: contents;
}

.slot-nav-content .nav-inner a {
  color: var(--color-text-muted);
  font-weight: 500;
  text-decoration: none;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  transition: background-color 0.2s, color 0.2s;
}

.slot-nav-content .nav-inner a:hover {
  color: var(--color-link, var(--color-primary));
  background-color: var(--color-surface);
}

/* ── Left Sidebar (TOC or custom content) ── */
.slot-left-sidebar {
  flex-shrink: 0;
  order: -1;
  position: sticky;
  top: var(--space-4, 1rem);
  height: fit-content;
  padding: var(--space-4, 1rem);
  font-size: var(--text-sm, 0.875rem);
}

.slot-left-sidebar .left-sidebar-inner h3 {
  font-size: var(--text-sm, 0.875rem);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-3, 0.75rem) 0;
}

.slot-left-sidebar .left-sidebar-inner ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.slot-left-sidebar .left-sidebar-inner li {
  margin-bottom: var(--space-2, 0.5rem);
}

.slot-left-sidebar .left-sidebar-inner a {
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color 0.2s;
}

.slot-left-sidebar .left-sidebar-inner a:hover {
  color: var(--color-link, var(--color-primary));
}

/* Nested TOC levels */
.slot-left-sidebar .left-sidebar-inner ul ul {
  padding-left: var(--space-4, 1rem);
}

/* ── After Post ── */
.slot-after-post {
  max-width: var(--content-width);
  margin: var(--space-8, 2rem) auto 0;
  padding: var(--space-6, 1.5rem);
  border-top: 1px solid var(--color-border, #333);
}

.slot-after-post .after-post-cta {
  text-align: center;
  color: var(--color-text-muted);
}

/* Rendered markdown links inside the CTA become pills */
.slot-after-post .after-post-cta a {
  display: inline-block;
  padding: 0.375rem 1rem;
  margin: 0.25rem;
  border: 1px solid var(--color-border, #333);
  border-radius: 999px;
  color: var(--color-text);
  text-decoration: none;
  font-size: var(--text-sm, 0.875rem);
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.slot-after-post .after-post-cta a:hover {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-background, #000);
}

/* ── Bottom Banner ── */
.slot-bottom-banner {
  max-width: var(--site-width, 1400px);
  margin: 0 auto;
  padding: var(--space-6, 1.5rem) var(--space-4, 1rem);
  text-align: center;
  border-top: 1px solid var(--color-border, #333);
}

.slot-bottom-banner .bottom-banner-inner {
  max-width: var(--page-width, 1200px);
  margin: 0 auto;
  color: var(--color-text-muted);
}

.slot-bottom-banner a {
  color: var(--color-primary);
  text-decoration: none;
}

.slot-bottom-banner a:hover {
  text-decoration: underline;
}

/* ── Footer Content (replaces config-driven footer) ── */
/* The template adds both .site-footer and .slot-footer-content */
.slot-footer-content .container {
  max-width: var(--page-width, 1200px);
  margin: 0 auto;
}

/* Rendered markdown paragraphs inside footer container */
.slot-footer-content .container p {
  margin: var(--space-3, 0.75rem) 0;
}

/* First paragraph is the nav links row */
.slot-footer-content .container p:first-child {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin: var(--space-4, 1rem) 0;
}

.slot-footer-content .container p:first-child a {
  color: var(--color-text-muted);
  text-decoration: none;
}

.slot-footer-content .container p:first-child a:hover {
  color: var(--color-link, var(--color-primary));
}

/* Last paragraph is the copyright line */
.slot-footer-content .container p:last-child {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin-top: var(--space-4, 1rem);
}

.slot-footer-content .container p:last-child a {
  color: var(--color-primary);
  text-decoration: none;
}

.slot-footer-content .container p:last-child a:hover {
  text-decoration: underline;
}

.slot-footer-content .footer-format-links {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  margin: var(--space-3, 0.75rem) 0;
  font-size: var(--text-sm, 0.875rem);
}

.slot-footer-content .footer-format-links a {
  color: var(--color-text-muted);
  text-decoration: none;
  padding: 0.125rem 0.5rem;
  border: 1px solid var(--color-border, #333);
  border-radius: 4px;
}

.slot-footer-content .footer-format-links a:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

/* ── Slot responsive breakpoints ── */
@media (max-width: 1200px) {
  .slot-left-sidebar {
    position: static;
    width: 100% !important;
    margin: 1rem 0;
    order: 99;
    border-top: 1px solid var(--color-border, #333);
    border-bottom: 1px solid var(--color-border, #333);
    padding: var(--space-3, 0.75rem);
  }
}

@media (max-width: 768px) {
  .slot-top-banner {
    padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
    font-size: 0.8125rem;
  }

  .slot-hero {
    padding: var(--space-4, 1rem) var(--space-3, 0.75rem);
  }

  .slot-hero .hero-inner p {
    font-size: 1rem;
  }

  .slot-after-post {
    padding: var(--space-4, 1rem) var(--space-3, 0.75rem);
  }

  .slot-bottom-banner {
    padding: var(--space-4, 1rem) var(--space-3, 0.75rem);
  }

  .slot-nav-content .nav-inner {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    flex-wrap: nowrap;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .slot-nav-content .nav-inner::-webkit-scrollbar {
    display: none;
  }

  .slot-nav-content .nav-inner a {
    white-space: nowrap;
    font-size: var(--text-sm, 0.875rem);
  }

  .slot-footer-content .container p:first-child {
    gap: 0.5rem;
  }
}

@media (max-width: 480px) {
  .slot-after-post {
    padding: var(--space-3, 0.75rem) var(--space-2, 0.5rem);
  }

  .slot-bottom-banner {
    padding: var(--space-3, 0.75rem) var(--space-2, 0.5rem);
  }

  .slot-footer-content .container p:first-child {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1rem;
  }

  .slot-footer-content .container p:first-child a {
    padding: 0.5rem 0.25rem;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* ==========================================================================
   Search Component (Pagefind)
   ========================================================================== */

.search {
  position: relative;
}

/* Navbar positioning */
.search--navbar {
  display: flex;
  align-items: center;
  margin-left: auto;
}

/* Sidebar positioning */
.search--sidebar {
  margin-bottom: 1.5rem;
}

/* Footer positioning */
.search--footer {
  margin-top: 1.5rem;
}

/* ==========================================================================
   Pagefind Search UI Customizations

   Accessibility: All text meets WCAG AA contrast requirements (4.5:1 minimum)
   - Primary text on white: #374151 (7.5:1 ratio)
   - Secondary text on white: #4b5563 (6.1:1 ratio)
   - Link text on white: #2563eb (4.9:1 ratio)
   ========================================================================== */

/* Pagefind UI CSS custom properties
   These use CSS variables from the palette system (variables.css)
   so Pagefind automatically adapts to the configured theme. */
:root {
  --pagefind-ui-scale: 0.9;
  --pagefind-ui-primary: var(--color-primary);
  --pagefind-ui-text: var(--color-text);
  --pagefind-ui-background: var(--color-background);
  --pagefind-ui-border: var(--color-border);
  --pagefind-ui-tag: var(--color-text-muted);
  --pagefind-ui-border-width: 1px;
  --pagefind-ui-border-radius: 8px;
  --pagefind-ui-font: var(--font-body);
}

/* Compact mode for navbar */
.search--navbar .pagefind-ui__search-input {
  width: 200px;
  transition: width 0.2s ease;
}

.search--navbar .pagefind-ui__search-input:focus {
  width: 300px;
}

/* Navbar dropdown positioning is handled in search.css (pagefind-ui__drawer) */

/* Full-width search for sidebar/footer */
.search--sidebar .pagefind-ui__search-input,
.search--footer .pagefind-ui__search-input {
  width: 100%;
}

/* Hide the clear button until there's input */
.pagefind-ui__search-clear {
  opacity: 0;
  transition: opacity 0.2s;
}

.pagefind-ui__search-input:not(:placeholder-shown) ~ .pagefind-ui__search-clear {
  opacity: 1;
}

/* Search input styling */
.pagefind-ui__search-input {
  background: var(--pagefind-ui-background);
  color: var(--pagefind-ui-text);
  border: 1px solid var(--pagefind-ui-border);
  border-radius: var(--pagefind-ui-border-radius);
}

.pagefind-ui__search-input:focus {
  border-color: var(--pagefind-ui-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 15%, transparent);
  outline: none;
}

/* Result card styling - Visual separation between results */
.pagefind-ui__result {
  padding: 1rem;
  margin: 0.5rem 0;
  background: var(--color-surface);
  border: 1px solid var(--pagefind-ui-border);
  border-radius: 8px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.pagefind-ui__result:hover {
  border-color: var(--pagefind-ui-primary);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--color-text) 10%, transparent);
}

.pagefind-ui__result:first-child {
  margin-top: 0.25rem;
}

.pagefind-ui__result:last-child {
  margin-bottom: 0.25rem;
}

/* Result title/link - WCAG AA compliant contrast */
.pagefind-ui__result-link {
  color: var(--pagefind-ui-primary);
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.4;
  display: block;
  margin-bottom: 0.375rem;
}

.pagefind-ui__result-link:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}

.pagefind-ui__result-link:focus {
  outline: 2px solid var(--pagefind-ui-primary);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Result excerpt - Improved contrast and truncation */
.pagefind-ui__result-excerpt {
  color: var(--pagefind-ui-text);
  font-size: 0.875rem;
  line-height: 1.6;
  margin-top: 0.25rem;
  /* Limit to 3 lines for easy scanning */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Highlighted search terms in results */
.pagefind-ui__result-excerpt mark {
  background-color: var(--color-warning);
  color: var(--color-background);
  padding: 0.125em 0.25em;
  border-radius: 3px;
  font-weight: 500;
}

/* Result image thumbnail */
.pagefind-ui__result-thumb {
  border-radius: 6px;
  border: 1px solid var(--pagefind-ui-border);
}

/* Result tags/metadata */
.pagefind-ui__result-tags {
  margin-top: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

/* Hide Pagefind UI meta pills (e.g., "Excerpt:") to reduce clutter */
.pagefind-ui__result-tag[data-pagefind-ui-meta] {
  display: none;
}

.pagefind-ui__result-tag {
  font-size: 0.75rem;
  padding: 0.125rem 0.5rem;
  background: var(--color-surface);
  color: var(--pagefind-ui-tag);
  border-radius: 9999px;
  border: 1px solid var(--pagefind-ui-border);
}

/* Message when no results found */
.pagefind-ui__message {
  padding: 1.5rem 1rem;
  text-align: center;
  color: var(--pagefind-ui-text);
}

/* Loading indicator */
.pagefind-ui__loading {
  padding: 1.5rem 1rem;
  text-align: center;
  color: var(--pagefind-ui-tag);
}

/* Visually hidden class for screen reader content */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Responsive adjustments for search */
@media (max-width: 768px) {
  .search--navbar {
    display: none;
  }

  /* Show search in header menu on mobile */
  .site-header .search--navbar {
    display: block;
    width: 100%;
    margin: 1rem 0;
  }

  .search--navbar .pagefind-ui__search-input {
    width: 100%;
  }

  .search--navbar .pagefind-ui__search-input:focus {
    width: 100%;
  }

  /* Navbar dropdown positioning is handled in search.css */

  /* Smaller result cards on mobile */
  .pagefind-ui__result {
    padding: 0.75rem;
    margin: 0.375rem 0;
  }

  /* Two-line limit on mobile for excerpts */
  .pagefind-ui__result-excerpt {
    -webkit-line-clamp: 2;
  }
}

/* ==========================================================================
   Format Links Component
   Minimal link-style appearance (not button-like)
   ========================================================================== */

.format-links {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.125rem;
  margin: 0.5rem 0;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.format-links-label {
  color: var(--color-text-muted);
  font-weight: 400;
  margin-right: 0.25rem;
}

.format-link {
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color 0.15s ease;
}

.format-link:hover,
.format-link:focus {
  color: var(--color-primary);
  text-decoration: underline;
}

.format-link:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Separator between links */
.format-link:not(:last-child)::after {
  content: "|";
  margin: 0 0.375rem;
  color: var(--color-border);
  text-decoration: none;
  display: inline-block;
}

/* ==========================================================================
   Post Copy Control
   ========================================================================== */

.post-copy {
  margin-top: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.post-copy__details {
  position: relative;
}

.post-copy__summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.8rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-surface) 88%, white);
  color: var(--color-text-muted);
  font-size: 0.85rem;
  line-height: 1;
  transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.post-copy__summary::-webkit-details-marker {
  display: none;
}

.post-copy__summary-icon {
  width: 0.95rem;
  height: 0.95rem;
  flex: 0 0 auto;
}

.post-copy__summary::after {
  content: "+";
  font-size: 1rem;
  line-height: 1;
}

.post-copy__details[open] .post-copy__summary,
.post-copy__summary:hover,
.post-copy__summary:focus-visible {
  color: var(--color-primary);
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface));
}

.post-copy__details[open] .post-copy__summary::after {
  content: "-";
}

.post-copy__menu {
  position: absolute;
  top: calc(100% + 0.45rem);
  left: 0;
  z-index: 5;
  min-width: 12rem;
  display: grid;
  gap: 0.35rem;
  padding: 0.45rem;
  border: 1px solid var(--color-border);
  border-radius: 1rem;
  background: var(--color-background);
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.12);
}

.post-copy__option {
  appearance: none;
  border: 0;
  border-radius: 0.75rem;
  padding: 0.65rem 0.8rem;
  text-align: left;
  font: inherit;
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.post-copy__option:hover,
.post-copy__option:focus-visible {
  background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface));
  color: var(--color-primary);
  transform: translateX(2px);
}

.post-copy__status {
  min-height: 1.2em;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.post-copy[data-copy-state="copied"] .post-copy__status {
  color: var(--color-primary);
}

.post-copy[data-copy-state="error"] .post-copy__status {
  color: var(--color-accent, #b42318);
}

/* Responsive: wrap naturally on small screens */
@media (max-width: 480px) {
  .format-links {
    font-size: 0.75rem;
  }

  .post-copy {
    width: 100%;
    align-items: stretch;
  }

  .post-copy__details,
  .post-copy__summary {
    width: 100%;
  }

  .post-copy__menu {
    min-width: 100%;
  }
}

/* ==========================================================================
   Breadcrumbs Navigation Component
   ========================================================================== */

.breadcrumbs {
  margin-bottom: 1.5rem;
  padding: 0.75rem 1rem;
  background-color: var(--color-surface);
  border-radius: 8px;
  border: 1px solid var(--color-border);
  font-size: 0.875rem;
}

.breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.breadcrumb-item {
  display: inline-flex;
  align-items: center;
}

.breadcrumb-link {
  color: var(--color-text-muted);
  text-decoration: none;
  padding: 0.125rem 0.25rem;
  border-radius: 4px;
  transition: color 0.15s, background-color 0.15s;
}

.breadcrumb-link:hover {
  color: var(--color-primary);
  background-color: var(--color-background);
}

.breadcrumb-link:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.breadcrumb-current {
  color: var(--color-text);
  font-weight: 500;
  padding: 0.125rem 0.25rem;
}

.breadcrumb-separator {
  color: var(--color-text-muted);
  opacity: 0.6;
  user-select: none;
  padding: 0 0.125rem;
}

.breadcrumb-item--active {
  /* Active item styling */
}

/* Compact variant (no background) */
.breadcrumbs--compact {
  background: none;
  border: none;
  padding: 0;
  margin-bottom: 1rem;
}

/* Centered variant */
.breadcrumbs--centered .breadcrumb-list {
  justify-content: center;
}

/* Responsive: Ellipsis for long breadcrumbs on mobile */
@media (max-width: 640px) {
  .breadcrumb-list {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
  }

  .breadcrumb-list::-webkit-scrollbar {
    display: none; /* Chrome/Safari/Opera */
  }

  .breadcrumb-item {
    white-space: nowrap;
  }

  /* Truncate long labels */
  .breadcrumb-link,
  .breadcrumb-current {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Print styles */
@media print {
  .breadcrumbs {
    background: none;
    border: none;
    padding: 0;
    margin-bottom: 0.5rem;
  }

  .breadcrumb-link {
    color: var(--color-text);
    text-decoration: underline;
  }

  .breadcrumb-separator::after {
    content: " > ";
  }
}

/* ==========================================================================
   Embed Card Component

   Used by the embeds plugin for internal (![[slug]]) and external
   (![embed](url)) content embedding.
   ========================================================================== */

.embed-card {
  margin: 1.5rem 0;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.embed-card:hover {
  border-color: var(--color-primary);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Image-only embeds should look like regular images */
.embed-card-image-only {
  background: transparent;
  border: 0;
  box-shadow: none;
}

.embed-card-image-only:hover {
  border-color: transparent;
  box-shadow: none;
}

.embed-card-image-only .embed-card-link {
  display: inline-block;
}

.embed-card-image-only .embed-card-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
}

.embed-card-link {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}

.embed-card-link:hover {
  text-decoration: none;
}

.embed-gist {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.embed-gist-header {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: space-between;
}

.embed-gist-header a {
  color: inherit;
  text-decoration: none;
}

.embed-gist-header a:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

.embed-gist-language {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
}

.embed-gist .highlight {
  margin: 0;
}

.embed-card-rich .embed-gist pre {
  margin: 0;
}

/* External embed with image - horizontal layout */
.embed-card-external .embed-card-link {
  flex-direction: row;
}

.embed-card-image {
  flex-shrink: 0;
  width: 200px;
  height: 150px;
  max-height: 150px;
  overflow: hidden;
}

.embed-card-image img {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
  transition: transform 0.2s ease;
}

.embed-card:hover .embed-card-image img {
  transform: scale(1.02);
}

.embed-card-content {
  flex: 1;
  padding: 1rem 1.25rem;
  min-width: 0; /* Allow text truncation */
}

.embed-card-title {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-text);
  margin-bottom: 0.5rem;

  /* Truncate long titles */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.embed-card:hover .embed-card-title {
  color: var(--color-primary);
}

.embed-card-description {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-text-muted);
  margin-bottom: 0.75rem;

  /* Truncate long descriptions */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.embed-card-meta {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Internal embed card (no image) - compact layout */
.embed-card:not(.embed-card-external) {
  border-left: 4px solid var(--color-primary);
}

.embed-card:not(.embed-card-external) .embed-card-content {
  padding: 1rem 1.25rem 1rem 1rem;
}

/* Responsive adjustments */
@media (max-width: 640px) {
  .embed-card-external .embed-card-link {
    flex-direction: column;
  }

  .embed-card-image {
    width: 100%;
    max-height: 180px;
  }

  .embed-card-content {
    padding: 1rem;
  }

  .embed-card-title {
    font-size: 1rem;
    -webkit-line-clamp: 2;
  }

  .embed-card-description {
    -webkit-line-clamp: 2;
  }
}

/* Focus states for accessibility */
.embed-card-link:focus {
  outline: none;
}

.embed-card-link:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: inherit;
}

/* Print styles */
@media print {
  .embed-card {
    page-break-inside: avoid;
    border: 1px solid #ccc;
    box-shadow: none;
  }

  .embed-card-image {
    display: none;
  }

  .embed-card-link::after {
    content: " (" attr(href) ")";
    font-size: 0.75rem;
    color: #666;
  }
}

/* ==========================================================================
   Blogroll Page Component

   Displays a list of external blogs/feeds the site author follows,
   organized by category.
   ========================================================================== */

.blogroll-page {
  max-width: var(--content-max-width, 900px);
  margin: 0 auto;
  padding: 2rem 1rem;
}

.blogroll-header {
  margin-bottom: 2rem;
  text-align: center;
}

.blogroll-header h1 {
  margin: 0 0 0.5rem;
  font-size: 2rem;
  color: var(--color-text);
}

.blogroll-subtitle {
  margin: 0 0 0.5rem;
  color: var(--color-text-muted);
  font-size: 1.125rem;
}

.blogroll-count {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.875rem;
}

.blogroll-nav {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 2rem;
}

.blogroll-nav a {
  color: var(--color-primary);
  text-decoration: none;
  padding: 0.5rem 1rem;
  border: 1px solid var(--color-primary);
  border-radius: 6px;
  transition: background-color 0.2s, color 0.2s;
}

.blogroll-nav a:hover {
  background-color: var(--color-primary);
  color: var(--color-background);
}

.blogroll-category {
  margin-bottom: 2.5rem;
}

.blogroll-category h2 {
  font-size: 1.25rem;
  color: var(--color-text);
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 1rem;
}

.blogroll-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}

/* Blogroll card with avatar layout */
.blogroll-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 1rem;
  transition: border-color 0.2s, box-shadow 0.2s;
  display: flex;
  gap: 0.875rem;
  align-items: flex-start;
}

.blogroll-card-avatar {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--color-border);
  border: 2px solid var(--color-border);
}

.blogroll-card-avatar-placeholder {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--color-primary), #8b5cf6);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 600;
  text-transform: uppercase;
  border: 2px solid transparent;
}

.blogroll-card-content {
  flex: 1;
  min-width: 0;
}

.blogroll-card:hover {
  border-color: var(--color-primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.blogroll-card-title {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  font-weight: 600;
}

.blogroll-card-title a {
  color: var(--color-text);
  text-decoration: none;
}

.blogroll-card-title a:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

.blogroll-card-description {
  margin: 0 0 0.75rem;
  font-size: 0.875rem;
  color: var(--color-text-muted);
  line-height: 1.5;
}

.blogroll-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.blogroll-card-count {
  /* Post count styling */
}

.blogroll-card-feed {
  color: var(--color-primary);
  text-decoration: none;
  padding: 0.125rem 0.5rem;
  border: 1px solid var(--color-primary);
  border-radius: 4px;
  font-size: 0.625rem;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.05em;
}

.blogroll-card-feed:hover {
  background-color: var(--color-primary);
  color: var(--color-background);
}

/* Responsive adjustments */
@media (max-width: 640px) {
  .blogroll-page {
    padding: 1.5rem 1rem;
  }

  .blogroll-header h1 {
    font-size: 1.5rem;
  }

  .blogroll-grid {
    grid-template-columns: 1fr;
  }

  .blogroll-card {
    flex-direction: column;
  }

  .blogroll-card-avatar,
  .blogroll-card-avatar-placeholder {
    width: 100%;
    height: 120px;
  }
}

/* ==========================================================================
   Reader Page Component

   Displays an aggregated feed of posts from external blogs (blogroll entries).
   ========================================================================== */

.reader-page {
  max-width: 1180px;
  margin: 0 auto;
  padding: 2rem 1rem 3rem;
}

.reader-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.5rem;
  align-items: end;
  margin-bottom: 1.25rem;
  padding: 1.5rem;
  border: 1px solid color-mix(in srgb, var(--color-border) 85%, transparent);
  border-radius: 1.25rem;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 10%, transparent), transparent 45%),
    color-mix(in srgb, var(--color-surface) 72%, transparent);
}

.reader-header h1 {
  margin: 0;
  font-size: clamp(2.25rem, 4vw, 4rem);
  line-height: 0.95;
  color: var(--color-text);
}

.reader-header-copy {
  display: grid;
  gap: 0.55rem;
}

.reader-kicker {
  margin: 0;
  color: var(--color-primary);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.reader-subtitle {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 1.05rem;
  max-width: 52ch;
}

.reader-header-stats {
  display: grid;
  grid-auto-flow: column;
  gap: 0.75rem;
}

.reader-header-stats > div {
  display: grid;
  gap: 0.1rem;
  min-width: 6.5rem;
  padding: 0.85rem 1rem;
  border: 1px solid color-mix(in srgb, var(--color-border) 85%, transparent);
  border-radius: 1rem;
  background: color-mix(in srgb, var(--color-background) 86%, transparent);
}

.reader-header-stats strong {
  font-size: 1.4rem;
  line-height: 1;
}

.reader-header-stats span {
  color: var(--color-text-muted);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.reader-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.reader-nav a {
  color: var(--color-primary);
  text-decoration: none;
  padding: 0.6rem 1rem;
  border: 1px solid color-mix(in srgb, var(--color-primary) 35%, var(--color-border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-background) 82%, transparent);
  transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.reader-nav a:hover {
  transform: translateY(-1px);
  background-color: var(--color-primary);
  color: var(--color-background);
}

.reader-stream {
  display: grid;
  gap: 2rem;
}

.reader-empty {
  margin: 0;
  padding: 1.25rem 1.5rem;
  border: 1px dashed var(--color-border);
  border-radius: 1rem;
  color: var(--color-text-muted);
}

.reader-day {
  display: grid;
  grid-template-columns: minmax(140px, 180px) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
  padding-top: 1.25rem;
  border-top: 1px solid color-mix(in srgb, var(--color-border) 85%, transparent);
}

.reader-day-rail {
  position: sticky;
  top: 1rem;
  display: grid;
  gap: 0.85rem;
  align-self: start;
}

.reader-day-rail time {
  display: grid;
  gap: 0.2rem;
}

.reader-day-weekday {
  color: var(--color-text-muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.reader-day-title {
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--color-text);
}

.reader-day-year {
  color: var(--color-text-muted);
  font-size: 0.95rem;
  font-weight: 600;
}

.reader-day-count {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.7rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  color: var(--color-primary);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.reader-day-entries {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0.9rem;
}

.reader-day-entries > * {
  min-width: 0;
}

.reader-entry {
  display: grid;
  gap: 0.8rem;
  align-content: start;
  min-width: 0;
  padding: 1rem;
  border: 1px solid color-mix(in srgb, var(--color-border) 82%, transparent);
  border-left: 4px solid color-mix(in srgb, var(--color-primary) 65%, var(--color-border));
  border-radius: 1rem;
  background: color-mix(in srgb, var(--color-background) 88%, transparent);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--color-border) 55%, transparent);
}

.reader-entry-meta-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.5rem 0.75rem;
  min-width: 0;
}

.reader-entry-source-link {
  display: inline-grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0.45rem;
  min-width: 0;
  max-width: 100%;
  color: var(--color-text-muted);
  text-decoration: none;
}

.reader-entry-source-link:hover .reader-entry-source {
  color: var(--color-primary);
}

.reader-entry-source-icon,
.reader-entry-source-icon--fallback {
  flex: none;
  width: 0.95rem;
  height: 0.95rem;
  border-radius: 0.25rem;
}

.reader-entry-source-icon--fallback {
  background: color-mix(in srgb, var(--color-primary) 18%, var(--color-border));
}

.reader-entry-source {
  min-width: 0;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.02em;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.reader-entry-meta-row time {
  display: block;
  flex: none;
  color: var(--color-text-muted);
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  text-align: right;
}

.reader-entry-title {
  margin: 0;
  min-width: 0;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.25;
}

.reader-entry-title a {
  display: block;
  min-width: 0;
  color: var(--color-text);
  text-decoration: none;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.reader-entry-title a:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

.reader-entry-description {
  margin: 0;
  min-width: 0;
  color: var(--color-text-muted);
  font-size: 0.92rem;
  line-height: 1.65;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.reader-entry-image-link {
  display: block;
  min-width: 0;
  max-width: 100%;
}

.reader-entry-image-link--source-image,
.reader-entry-image-link--screenshot,
.reader-entry-image-link--source-tile {
  border-radius: 0.85rem;
  overflow: hidden;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--color-primary) 8%, transparent), transparent 60%),
    color-mix(in srgb, var(--color-surface) 88%, transparent);
}

.reader-entry-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 0.85rem;
  background: var(--color-surface);
}

.reader-entry-image--source-image {
  object-fit: contain;
  padding: 0.85rem;
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--color-primary) 10%, transparent), transparent 45%),
    color-mix(in srgb, var(--color-background) 94%, var(--color-surface));
}

.reader-entry-image--screenshot {
  filter: saturate(0.78) contrast(0.92) brightness(0.98);
  opacity: 0.92;
}

.reader-entry-source-tile {
  display: grid;
  gap: 0.7rem;
  min-height: 10rem;
  padding: 1rem;
  align-content: end;
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--color-primary) 16%, transparent), transparent 48%),
    linear-gradient(180deg, color-mix(in srgb, var(--color-background) 42%, transparent), color-mix(in srgb, var(--color-surface) 92%, transparent));
}

.reader-entry-source-tile-top {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
}

.reader-entry-source-tile-icon,
.reader-entry-source-tile-badge {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 0.35rem;
}

.reader-entry-source-tile-badge {
  display: inline-grid;
  place-items: center;
  background: color-mix(in srgb, var(--color-primary) 85%, var(--color-background));
  color: var(--color-background);
  font-size: 0.75rem;
  font-weight: 800;
}

.reader-entry-source-tile-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-text);
  font-size: 0.96rem;
  font-weight: 700;
}

.reader-entry-source-tile-domain {
  color: var(--color-text-muted);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@media (max-width: 640px) {
  .reader-page {
    padding: 1.5rem 0.75rem 2rem;
  }

  .reader-header {
    grid-template-columns: 1fr;
    padding: 1.1rem;
  }

  .reader-header-stats {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .reader-day {
    grid-template-columns: 1fr;
  }

  .reader-day-rail {
    position: static;
  }

  .reader-day-entries {
    grid-template-columns: 1fr;
  }

  .reader-entry {
    padding: 0.9rem;
  }

  .reader-day-title {
    font-size: clamp(1.75rem, 10vw, 2.5rem);
  }

  .reader-entry-title {
    font-size: 1.05rem;
  }

  .reader-entry-meta-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .reader-entry-meta-row time {
    padding-left: 1.4rem;
  }

  .reader-entry-image {
    aspect-ratio: 3 / 2;
  }
}

/* ==========================================================================
   Mention Hover Cards

   Displays contextual information (avatar, name, bio) when hovering over
   @mention links in content.
   ========================================================================== */

/* ==========================================================================
    Keyboard Navigation Styles

    Styles for keyboard-navigated elements including post highlighting
    and toast notifications.
    ========================================================================== */

/* Highlighted post in feed when using keyboard navigation (j/k) */
.kb-highlighted {
   outline: 2px solid var(--color-primary);
   outline-offset: 2px;
   border-radius: 4px;
   background-color: color-mix(in srgb, var(--color-primary) 10%, transparent);
   transition: outline-color 0.15s ease, background-color 0.15s ease;
}

/* Ensure highlighted cards are visible */
.card.kb-highlighted,
.post-card.kb-highlighted,
article.kb-highlighted {
   outline-offset: 4px;
}

/* Toast notification for keyboard actions (e.g., URL copied) */
.kb-toast {
   position: fixed;
   bottom: 2rem;
   left: 50%;
   transform: translateX(-50%) translateY(1rem);
   padding: 0.75rem 1.5rem;
   background-color: var(--color-surface);
   color: var(--color-text);
   border: 1px solid var(--color-border);
   border-radius: 8px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
   font-size: 0.875rem;
   opacity: 0;
   visibility: hidden;
   transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
   z-index: 10000;
}

.kb-toast--visible {
   opacity: 1;
   visibility: visible;
   transform: translateX(-50%) translateY(0);
}

/* ==========================================================================
    Shortcuts Modal Component

    Complete styling for the keyboard shortcuts help modal including
    container, header, body, sections, tables, and footer.
    ========================================================================== */

/* Modal backdrop - semi-transparent overlay */
.shortcuts-modal {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background-color: rgba(0, 0, 0, 0.5);
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 1rem;
   opacity: 0;
   visibility: hidden;
   z-index: 10001;
   transition: opacity 0.2s ease, visibility 0.2s ease;
}

/* Modal is visible when not aria-hidden or when --open class is added */
.shortcuts-modal:not([aria-hidden="true"]),
.shortcuts-modal.shortcuts-modal--open {
   opacity: 1;
   visibility: visible;
}

/* Modal content container */
.shortcuts-modal-content {
   background-color: var(--color-background);
   border: 1px solid color-mix(in srgb, var(--color-primary) 25%, var(--color-border));
   border-radius: 12px;
   box-shadow:
     0 0 0 1px color-mix(in srgb, var(--color-primary) 8%, transparent),
     0 24px 80px -12px rgba(0, 0, 0, 0.5);
   max-width: 700px;
   width: 100%;
   max-height: 85vh;
   overflow-y: auto;
   display: flex;
   flex-direction: column;
   animation: modal-fade-in 0.2s ease;
}

/* Modal header */
.shortcuts-modal-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 1.5rem;
   border-bottom: 1px solid var(--color-border);
   flex-shrink: 0;
}

.shortcuts-modal-header h2 {
   margin: 0;
   font-family: var(--font-mono);
   font-size: 1.25rem;
   font-weight: 700;
   color: var(--color-text);
   letter-spacing: -0.01em;
}

/* Close button in modal header */
.shortcuts-modal-close {
   background: none;
   border: none;
   font-size: 1.75rem;
   color: var(--color-text-muted);
   cursor: pointer;
   padding: 0.5rem;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 6px;
   transition: color 0.2s, background-color 0.2s;
}

.shortcuts-modal-close:hover {
   color: var(--color-text);
   background-color: var(--color-surface);
}

.shortcuts-modal-close:focus {
   outline: 2px solid var(--color-primary);
   outline-offset: 2px;
}

/* Modal body with scrollable content */
.shortcuts-modal-body {
   flex: 1;
   padding: 1.5rem;
   overflow-y: auto;
   columns: 2;
   column-gap: 2rem;
}

/* Shortcut sections */
.shortcuts-section {
   margin-bottom: 1.5rem;
   break-inside: avoid;
}

.shortcuts-section:last-child {
   margin-bottom: 0;
}

.shortcuts-section-title {
   font-family: var(--font-mono);
   font-size: 0.7rem;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.1em;
   color: var(--color-primary);
   margin: 0 0 0.75rem 0;
   padding-bottom: 0.5rem;
   border-bottom: 2px solid color-mix(in srgb, var(--color-primary) 30%, transparent);
}

/* Shortcuts table */
.shortcuts-table {
   width: 100%;
   border-collapse: collapse;
   margin: 0 0 1rem 0;
}

.shortcuts-table tbody tr {
   border-bottom: 1px solid color-mix(in srgb, var(--color-border) 50%, transparent);
   transition: background-color 0.12s ease;
}

.shortcuts-table tbody tr:hover {
   background-color: color-mix(in srgb, var(--color-primary) 6%, transparent);
}

.shortcuts-table tbody tr:last-child {
   border-bottom: none;
}

.shortcuts-table td {
   padding: 0.5rem 0.75rem;
   text-align: left;
   font-size: 0.875rem;
   color: var(--color-text);
}

/* First column - keyboard shortcut keys */
.shortcuts-table td:first-child {
   width: 160px;
   padding-left: 0;
   font-weight: 500;
   color: var(--color-text);
   white-space: nowrap;
}

/* Second column - description */
.shortcuts-table td:last-child {
   color: var(--color-text-muted);
   padding-right: 0;
}

/* Keyboard key styling within the table */
.shortcuts-table kbd,
kbd.kbd {
   display: inline-block;
   padding: 0.2em 0.45em;
   font-family: var(--font-mono, ui-monospace, monospace);
   font-size: 0.8em;
   font-weight: 600;
   line-height: 1.3;
   color: var(--color-text);
   background: var(--color-surface);
   border: 1px solid color-mix(in srgb, var(--color-text) 15%, transparent);
   border-bottom-width: 2px;
   border-bottom-color: color-mix(in srgb, var(--color-text) 22%, transparent);
   border-radius: 4px;
   white-space: nowrap;
   margin-right: 0.2em;
   min-width: 1.4em;
   text-align: center;
}

/* Special styling for modifier keys */
.shortcuts-table kbd.kbd-mac,
.shortcuts-table kbd.kbd-win {
   font-weight: 600;
   font-size: 0.75em;
}

/* Modal footer */
.shortcuts-modal-footer {
   padding: 1rem 1.5rem;
   border-top: 1px solid var(--color-border);
   display: flex;
   align-items: center;
   justify-content: space-between;
   flex-shrink: 0;
   background-color: var(--color-surface);
   border-bottom-left-radius: 11px;
   border-bottom-right-radius: 11px;
}

.shortcuts-toggle-btn {
   padding: 0.5rem 1rem;
   background-color: var(--color-primary);
   color: var(--color-background);
   border: none;
   border-radius: 6px;
   cursor: pointer;
   font-size: 0.875rem;
   font-weight: 500;
   transition: background-color 0.2s, opacity 0.2s;
}

.shortcuts-toggle-btn:hover {
   opacity: 0.9;
}

.shortcuts-toggle-btn:focus {
   outline: 2px solid var(--color-primary);
   outline-offset: 2px;
}

.shortcuts-toggle-btn[aria-pressed="false"] {
   background-color: var(--color-surface);
   color: var(--color-text);
   border: 1px solid var(--color-border);
}

.shortcuts-hint {
   margin: 0;
   font-size: 0.75rem;
   color: var(--color-text-muted);
   font-style: italic;
}

/* Modal animations */
@keyframes modal-fade-in {
   from {
       opacity: 0;
       transform: scale(0.95);
   }
   to {
       opacity: 1;
       transform: scale(1);
   }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
   .shortcuts-modal-content {
       animation: none;
   }

   .shortcuts-modal {
       transition: none;
   }
}

/* ============================================
   View Transitions API Styles
   ============================================ */

/* Assign transition names to key page elements */
/* Use article.post as the main content container (contains .post-content) */
article.post {
   view-transition-name: main-content;
}

.site-nav--header {
   view-transition-name: site-nav;
}

.site-footer,
[class^="site-footer"] {
   view-transition-name: site-footer;
}

.breadcrumbs {
   view-transition-name: breadcrumbs;
}

.pagination {
   view-transition-name: pagination;
}

/* Feed sidebar stays stable during post-to-post navigation */
.feed-sidebar {
   view-transition-name: feed-sidebar;
}

/* Post navigation (prev/next) */
.post-nav {
   view-transition-name: post-nav;
}

/* Default cross-fade for everything (fixes old+new overlap flash). */
::view-transition-old(root) {
   animation: fade-out 80ms ease both;
}

::view-transition-new(root) {
   animation: fade-in 100ms ease both;
}

/* Root transition container */
::view-transition {
   pointer-events: none;
}

::view-transition-group(*),
::view-transition-old(*),
::view-transition-new(*) {
   overflow: visible;
}

/* Keyframe animations for view transitions */
@keyframes fade-out {
   to {
      opacity: 0;
   }
}

@keyframes fade-in {
   from {
      opacity: 0;
   }
}

@keyframes slide-up {
   from {
      transform: translateY(8px);
   }
}

@keyframes slide-down {
   from {
      transform: translateY(-8px);
   }
}

/* Main content gets a slightly more directional motion. */
::view-transition-old(main-content) {
   animation: fade-out 70ms ease both;
}

::view-transition-new(main-content) {
   animation: fade-in 110ms ease both, slide-up 120ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

/* Keep the broad article snapshot underneath shared title/header morphs. */
::view-transition-group(main-content),
::view-transition-old(main-content),
::view-transition-new(main-content) {
   z-index: 1;
}

/* ==========================================================================
   Share Component
   ========================================================================== */

.share-panel {
   margin: var(--space-8) 0 var(--space-6);
   padding-top: var(--space-4);
   border-top: 1px solid var(--color-border);
   position: relative;
}

.share-panel__header {
   display: flex;
   align-items: baseline;
   gap: 0.5rem;
   margin-bottom: 0.75rem;
}

.share-panel__title {
   font-size: var(--text-sm);
   font-weight: 600;
   margin: 0 0 0.75rem;
}

.share-buttons {
   display: flex;
   flex-wrap: wrap;
   gap: 0.5rem;
   margin-bottom: var(--space-4);
}

.share-panel__grid {
   display: flex;
   flex-wrap: wrap;
   gap: 0.5rem;
}

.share-button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 2.2rem;
   height: 2.2rem;
   padding: 0;
   background: transparent;
   border-radius: 999px;
   border: 1px solid var(--color-border);
   color: var(--color-text-muted);
   cursor: pointer;
   text-decoration: none;
   transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.share-button__icon {
   width: 1.1rem;
   height: 1.1rem;
   display: inline-flex;
   align-items: center;
   justify-content: center;
}

.share-button__icon svg {
   width: 100%;
   height: 100%;
   display: block;
}

.share-button__icon[style*="--share-icon"] {
   -webkit-mask-image: var(--share-icon);
   mask-image: var(--share-icon);
   -webkit-mask-repeat: no-repeat;
   mask-repeat: no-repeat;
   -webkit-mask-position: center;
   mask-position: center;
   -webkit-mask-size: 100% 100%;
   mask-size: 100% 100%;
   background-color: currentColor;
}

.share-button__label,
.share-button__name {
   display: none;
}

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

.share-button:hover,
.share-button:focus-visible {
   color: var(--color-primary);
   border-color: var(--color-primary);
   background: color-mix(in srgb, var(--color-primary) 12%, var(--color-surface));
}

.share-button--copied {
   color: var(--color-primary);
   border-color: var(--color-primary);
   background: color-mix(in srgb, var(--color-primary) 16%, transparent);
}

.share-toast {
   display: none;
}

@media (min-width: 769px) {
   .share-toast {
      display: inline-flex;
      position: absolute;
      right: 0;
      top: 0;
      transform: translateY(-120%);
      padding: 0.35rem 0.7rem;
      background: var(--color-surface);
      color: var(--color-text);
      border: 1px solid var(--color-border);
      border-radius: 999px;
      box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
      font-size: 0.75rem;
      letter-spacing: 0.01em;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
      pointer-events: none;
      white-space: nowrap;
      z-index: 2;
   }

   .share-toast--visible {
      opacity: 1;
      visibility: visible;
      transform: translateY(-150%);
   }
}

@media (max-width: 768px) {
   .share-panel {
      padding-top: var(--space-3);
      margin-bottom: var(--space-5);
   }

   .share-button {
      width: 2rem;
      height: 2rem;
   }
}

/* Keep global chrome stable (no morphing). */
::view-transition-old(site-nav),
::view-transition-new(site-nav),
::view-transition-old(site-footer),
::view-transition-new(site-footer),
::view-transition-old(breadcrumbs),
::view-transition-new(breadcrumbs),
::view-transition-old(pagination),
::view-transition-new(pagination),
::view-transition-old(feed-sidebar),
::view-transition-new(feed-sidebar),
::view-transition-old(post-nav),
::view-transition-new(post-nav) {
   animation: none;
}

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

/* Mobile responsive - stack modal differently on small screens */
@media (max-width: 640px) {
   .shortcuts-modal {
       align-items: flex-end;
   }

   .shortcuts-modal-content {
       border-radius: 12px 12px 0 0;
       max-height: 90vh;
   }

   .shortcuts-modal-header {
       padding: 1rem 1.25rem;
   }

   .shortcuts-modal-header h2 {
       font-size: 1.25rem;
   }

   .shortcuts-modal-body {
       padding: 1rem 1.25rem;
       columns: 1;
   }

   .shortcuts-modal-footer {
       padding: 0.75rem 1.25rem;
       flex-direction: column;
       gap: 0.75rem;
       align-items: stretch;
   }

   .shortcuts-toggle-btn {
       width: 100%;
   }

   .shortcuts-table td {
       padding: 0.375rem 0.5rem;
       font-size: 0.8125rem;
   }

   .shortcuts-table td:first-child {
       width: 140px;
   }

   .shortcuts-hint {
       text-align: center;
   }
}

/* Tablet size adjustments */
@media (max-width: 1024px) and (min-width: 640px) {
   .shortcuts-modal-content {
       max-width: 90%;
   }
}

/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
   .shortcuts-modal {
       background-color: rgba(0, 0, 0, 0.7);
   }

   .shortcuts-modal-content {
       box-shadow:
         0 0 0 1px color-mix(in srgb, var(--color-primary) 8%, transparent),
         0 24px 80px -12px rgba(0, 0, 0, 0.6);
   }

   .shortcuts-table kbd,
   kbd.kbd {
       background: var(--color-surface);
       border-color: color-mix(in srgb, var(--color-text) 15%, transparent);
       border-bottom-color: color-mix(in srgb, var(--color-text) 22%, transparent);
   }
}

/* High contrast mode */
@media (prefers-contrast: more) {
   .shortcuts-modal-header {
       border-bottom-width: 2px;
   }

   .shortcuts-modal-footer {
       border-top-width: 2px;
   }

   .shortcuts-modal-close {
       border: 2px solid transparent;
   }

   .shortcuts-modal-close:focus {
       border-color: var(--color-primary);
   }

   .shortcuts-table tbody tr {
       border-bottom-width: 2px;
   }

   .shortcuts-table kbd,
   kbd.kbd {
       border-width: 2px;
   }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .kb-highlighted {
    transition: none;
  }

  .kb-toast {
    transition: opacity 0.1s ease, visibility 0.1s;
    transform: translateX(-50%);
  }

  .kb-toast--visible {
    transform: translateX(-50%);
  }
}

/* High contrast mode support */
@media (prefers-contrast: more) {
  .kb-highlighted {
    outline-width: 3px;
    outline-color: var(--color-text);
  }

  .kb-toast {
    border-width: 2px;
    border-color: var(--color-text);
  }
}

/* Print styles - hide keyboard-related elements */
@media print {
  .kb-highlighted {
    outline: none;
    background-color: transparent;
  }

  .kb-toast {
    display: none !important;
  }
}

/* ==========================================================================
   End Keyboard Navigation Styles
   ========================================================================== */

/* Base card styling */
.mention-card {
  position: absolute;
  z-index: 9999;
  width: 320px;
  max-width: calc(100vw - 32px);
  background-color: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
  pointer-events: auto;
}

.mention-card--visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mention-card--above {
  transform: translateY(-4px);
}

.mention-card--above.mention-card--visible {
  transform: translateY(0);
}

/* Card header - avatar and name/handle */
.mention-card-header {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 1rem;
}

/* Avatar container */
.mention-card-avatar {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
}

.mention-card-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Fallback initials when no avatar */
.mention-card-initials {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

/* Content area (name, handle) */
.mention-card-content {
  flex: 1;
  min-width: 0;
}

.mention-card-name {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mention-card-handle {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Bio/description */
.mention-card-bio {
  padding: 0 1rem;
  padding-bottom: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-text);

  /* 2-line truncation */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Footer with link */
.mention-card-footer {
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--color-border);
}

.mention-card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-primary);
  text-decoration: none;
  transition: color 0.15s;
}

.mention-card-link:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

.mention-card-link:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Loading state */
.mention-card-loading {
  padding: 1.5rem;
  text-align: center;
}

.mention-card-loading-text {
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

/* Error state */
.mention-card-error {
  padding: 1rem;
  text-align: center;
}

.mention-card-error-text {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  font-style: italic;
}

/* Disable on touch devices */
@media (hover: none), (pointer: coarse) {
  .mention-card {
    display: none !important;
  }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .mention-card {
    transition: opacity 0.1s ease, visibility 0.1s;
    transform: none;
  }

  .mention-card--above,
  .mention-card--visible,
  .mention-card--above.mention-card--visible {
    transform: none;
  }
}

/* High contrast mode support */
@media (prefers-contrast: more) {
  .mention-card {
    border-width: 2px;
    border-color: var(--color-text);
  }

  .mention-card-avatar {
    border-width: 2px;
  }

  .mention-card-footer {
    border-top-width: 2px;
  }
}

/* Print styles - hide hover cards */
@media print {
  .mention-card {
    display: none !important;
  }
}

/* ==========================================================================
   Mark (Highlight) Styles

   Styles for ==highlighted text== syntax rendered as <mark> elements.
   Colors are generated by palette_css.go from the palette's warning color.
   ========================================================================== */

mark {
  background-color: var(--color-mark-bg);
  color: var(--color-mark-text);
  padding: 0.125em 0.25em;
  border-radius: 0.125em;
}

/* User text selection - matches mark highlight for consistency */
::selection {
  background-color: var(--color-selection-bg, var(--color-mark-bg));
  color: var(--color-selection-text, var(--color-mark-text));
}

::-moz-selection {
  background-color: var(--color-selection-bg, var(--color-mark-bg));
  color: var(--color-selection-text, var(--color-mark-text));
}

/* High contrast mode - ensure visibility */
@media (prefers-contrast: more) {
  mark {
    outline: 1px solid currentColor;
  }

  ::selection,
  ::-moz-selection {
    background-color: Highlight;
    color: HighlightText;
  }
}

/* ==========================================================================
   Keyboard Keys Styles

   Styles for ++Key+Key++ syntax rendered as <kbd> elements.
   ========================================================================== */

.keys {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.125em;
}

.key-separator {
  color: var(--color-text-muted);
  font-size: 0.875em;
  margin: 0 0.125em;
}

kbd,
kbd.kbd {
  display: inline-block;
  padding: 0.15em 0.4em;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.875em;
  line-height: 1.4;
  color: var(--color-text);
  background-color: var(--color-surface, #f5f5f5);
  border: 1px solid var(--color-border, #ccc);
  border-radius: 0.25em;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 2px 0 0 var(--color-background, #fff) inset;
  white-space: nowrap;
}

/* Modifier keys get a slightly different style */
kbd.key-ctrl,
kbd.key-alt,
kbd.key-shift,
kbd.key-meta,
kbd.key-win {
  font-weight: 600;
  background-color: var(--color-kbd-modifier-bg, #e8e8e8);
}

/* Function keys */
kbd.key-f1, kbd.key-f2, kbd.key-f3, kbd.key-f4,
kbd.key-f5, kbd.key-f6, kbd.key-f7, kbd.key-f8,
kbd.key-f9, kbd.key-f10, kbd.key-f11, kbd.key-f12 {
  min-width: 2em;
  text-align: center;
}

/* Navigation keys */
kbd.key-up, kbd.key-down, kbd.key-left, kbd.key-right,
kbd.key-home, kbd.key-end, kbd.key-page-up, kbd.key-page-down {
  min-width: 1.5em;
  text-align: center;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  kbd,
  kbd.kbd {
    background-color: var(--color-surface, #2d2d2d);
    border-color: var(--color-border, #555);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 2px 0 0 var(--color-background, #1a1a1a) inset;
  }

  kbd.key-ctrl,
  kbd.key-alt,
  kbd.key-shift,
  kbd.key-meta,
  kbd.key-win {
    background-color: var(--color-kbd-modifier-bg, #3d3d3d);
  }
}

/* High contrast mode */
@media (prefers-contrast: more) {
  kbd,
  kbd.kbd {
    border-width: 2px;
    border-color: var(--color-text);
  }
}

/* ==========================================================================
   Container Styles

   Styles for ::: container syntax rendered as <div> elements.
   ========================================================================== */

/* Generic container - no default styling, just classes */
div[class]:not([class=""]) {
  /* Container divs get their styling from their classes */
}

/* Common container patterns (content only) */
main .container {
  padding: 1rem;
  margin: 1rem 0;
}

/* Warning container */
.warning {
  padding: 1rem;
  margin: 1rem 0;
  background-color: var(--color-warning-bg, #fff3cd);
  border-left: 4px solid var(--color-warning-border, #ffc107);
  border-radius: 0.25rem;
}

/* Info container */
.info {
  padding: 1rem;
  margin: 1rem 0;
  background-color: var(--color-info-bg, #cff4fc);
  border-left: 4px solid var(--color-info-border, #0dcaf0);
  border-radius: 0.25rem;
}

/* Success container */
.success {
  padding: 1rem;
  margin: 1rem 0;
  background-color: var(--color-success-bg, #d1e7dd);
  border-left: 4px solid var(--color-success-border, #198754);
  border-radius: 0.25rem;
}

/* Error/Danger container */
.error,
.danger {
  padding: 1rem;
  margin: 1rem 0;
  background-color: var(--color-danger-bg, #f8d7da);
  border-left: 4px solid var(--color-danger-border, #dc3545);
  border-radius: 0.25rem;
}

/* Note container */
.note {
  padding: 1rem;
  margin: 1rem 0;
  background-color: var(--color-note-bg, #e7e9eb);
  border-left: 4px solid var(--color-note-border, #6c757d);
  border-radius: 0.25rem;
}

/* Dark mode for containers */
@media (prefers-color-scheme: dark) {
  .warning {
    background-color: var(--color-warning-bg, #332d1a);
  }

  .info {
    background-color: var(--color-info-bg, #1a2e33);
  }

  .success {
    background-color: var(--color-success-bg, #1a2e22);
  }

  .error,
  .danger {
    background-color: var(--color-danger-bg, #331a1d);
  }

  .note {
    background-color: var(--color-note-bg, #2d2d2d);
  }
}

/* Columns container - side by side layout */
.columns {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 1rem 0;
}

.columns > * {
  flex: 1;
  min-width: 200px;
}

@media (max-width: 640px) {
  .columns {
    flex-direction: column;
  }

  .columns > * {
    min-width: auto;
  }
}

/* Center container */
.center {
  text-align: center;
}

/* Right-align container */
.right {
  text-align: right;
}

/* Hidden container (for conditional content) */
.hidden {
  display: none;
}

/* ==========================================================================
   Heading Anchor Links (goldmark-anchor)

   Styles for permalink anchors added by goldmark-anchor extension.
   Uses CSS variables to follow the site theme.
   ========================================================================== */

/* Anchor link base - positioned after heading text */
h1 .anchor,
h2 .anchor,
h3 .anchor,
h4 .anchor,
h5 .anchor,
h6 .anchor {
  opacity: 0;
  margin-left: 0.375rem;
  color: var(--color-text-muted);
  text-decoration: none;
  transition: opacity 0.2s ease, color 0.2s ease;
  font-weight: normal;
}

/* Show anchor on heading hover */
h1:hover .anchor,
h2:hover .anchor,
h3:hover .anchor,
h4:hover .anchor,
h5:hover .anchor,
h6:hover .anchor {
  opacity: 1;
}

/* Anchor link hover - use primary theme color */
.anchor:hover {
  color: var(--color-primary) !important;
}

/* Focus visible for accessibility */
.anchor:focus {
  opacity: 1;
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Make anchors visible on touch devices where hover isn't available */
@media (hover: none), (pointer: coarse) {
  h1 .anchor,
  h2 .anchor,
  h3 .anchor,
  h4 .anchor,
  h5 .anchor,
  h6 .anchor {
    opacity: 0.6;
  }
}

/* ==========================================================================
   Figure and Caption (goldmark-figure)

   Styles for <figure> elements with <figcaption> from images with captions.
   ========================================================================== */

figure {
  margin: 1.5rem 0;
  padding: 0;
}

figure img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
}

figcaption {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: var(--color-text-muted);
  text-align: center;
  font-style: italic;
  line-height: 1.5;
}

/* ============================================
   Reader Mode
   ============================================

   Activated by pressing 's' on post pages.
   Hides chrome (sidebar, nav, footer) for distraction-free reading.
   Press 's' again to toggle back.
   ========================================================================== */

body.reader-mode .site-header {
  display: none;
}

body.reader-mode .feed-sidebar {
  display: none;
}

body.reader-mode .content-sidebar {
  display: none;
}

body.reader-mode .site-footer {
  display: none;
}

body.reader-mode .post-nav {
  display: none;
}

body.reader-mode .slot-bottom-banner {
  display: none;
}

body.reader-mode .slot-after-post {
  display: none;
}

body.reader-mode .page-wrapper {
  display: block;
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 2rem 1rem;
  grid-template-columns: none;
}

body.reader-mode article.post {
  max-width: 100%;
}

/* Subtle reader-mode exit hint -- fixed bottom-right */
body.reader-mode::after {
  content: 'reader mode (s)';
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  font-size: 0.75rem;
  font-family: var(--font-mono, monospace);
  color: var(--color-text-muted);
  background: var(--color-surface);
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  border: 1px solid var(--color-border);
  opacity: 0.6;
  z-index: 1000;
  pointer-events: none;
}

/* ============================================
   Optional Styles Moved to Separate Files
   ============================================ */

/* GLightbox styles moved to glightbox.css (conditional load) */
/* Mermaid diagram styles moved to mermaid.css (conditional load) */

/* Print styles */
@media print {
  .no-print,
  .hidden-print {
    display: none !important;
  }
}

}