/* =========================================================
   whyml — style.css
   Plain CSS, no build step needed.
   
   TABLE OF CONTENTS:
   1. CSS Variables (Light + Dark theme)
   2. Reset & Base
   3. Typography — prose reading styles
   4. Layout — container, nav, footer
   5. Components — post cards, tags, headings
   6. Pages — home, blog list, post, resources, about
   7. Animations
   8. Responsive
   ========================================================= */


/* =========================================================
   1. CSS VARIABLES
   ========================================================= */

:root {
  /* Colors (HSL) */
  --background:     40 33% 97%;
  --foreground:     0 0% 10%;
  --surface:        36 27% 91%;
  --card:           40 33% 97%;
  --primary:        213 42% 31%;
  --primary-fg:     40 33% 97%;
  --muted:          36 27% 91%;
  --muted-fg:       0 0% 38%;
  --border:         36 20% 84%;
  --accent:         213 42% 31%;
  --accent-fg:      40 33% 97%;

  /* Spacing & sizing */
  --radius:         0.375rem;
  --reading-width:  48rem;
  --reading-size:   1.125rem;
  --reading-lh:     1.75;

  /* Nav */
  --nav-height:     56px;

  /* Heatmap palette — light theme (GitHub-light-inspired) */
  --heat-0-bg:      hsl(36 20% 87%);
  --heat-1-bg:      hsl(129 60% 76%);
  --heat-2-bg:      hsl(135 53% 51%);
  --heat-3-bg:      hsl(135 54% 41%);
  --heat-4-bg:      hsl(139 54% 28%);
}

.dark {
  --background:     0 0% 10%;
  --foreground:     36 27% 91%;
  --surface:        0 0% 15%;
  --card:           0 0% 10%;
  --primary:        213 45% 70%;
  --primary-fg:     0 0% 10%;
  --muted:          0 0% 15%;
  --muted-fg:       36 15% 65%;
  --border:         0 0% 20%;
  --accent:         213 45% 70%;
  --accent-fg:      0 0% 10%;

  /* Heatmap palette — dark theme (GitHub-dark-inspired) */
  --heat-0-bg:      hsla(0, 0%, 100%, 0.06);
  --heat-1-bg:      hsl(149 65% 16%);
  --heat-2-bg:      hsl(147 100% 21%);
  --heat-3-bg:      hsl(132 62% 40%);
  --heat-4-bg:      hsl(135 64% 53%);
}


/* =========================================================
   2. RESET & BASE
   ========================================================= */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  /* FIX: prevent any element from causing horizontal scroll */
  overflow-x: hidden;
}

body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: 'Work Sans', ui-sans-serif, system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition: background-color 0.2s ease, color 0.2s ease;
  /* FIX: prevent any element from causing horizontal scroll */
  overflow-x: hidden;
}

main {
  flex: 1;
}

a {
  color: inherit;
  text-decoration: none;
}

img, svg {
  display: block;
  max-width: 100%;
}

button {
  cursor: pointer;
  font-family: inherit;
  background: none;
  border: none;
}

::selection {
  background: hsl(var(--primary) / 0.18);
}

h1, h2, h3, h4, h5, h6 {
  font-weight: inherit;
  font-size: inherit;
}

ul, ol {
  list-style: none;
}

hr {
  border: 0;
  border-top: 1px solid hsl(var(--border));
}


/* =========================================================
   3. TYPOGRAPHY — PROSE READING STYLES
   Used inside .prose-reading containers (post bodies)
   ========================================================= */

.prose-reading {
  font-size: var(--reading-size);
  line-height: var(--reading-lh);
  color: hsl(var(--foreground));
  max-width: var(--reading-width);
}

.prose-reading > * + * {
  margin-top: 1.25em;
}

.prose-reading h1,
.prose-reading h2,
.prose-reading h3,
.prose-reading h4 {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: hsl(var(--foreground));
  margin-top: 2.25em;
  margin-bottom: 0.75em;
  line-height: 1.3;
}

.prose-reading h1 { font-size: 1.875rem; }
.prose-reading h2 { font-size: 1.5rem; }
.prose-reading h3 { font-size: 1.25rem; }
.prose-reading h4 { font-size: 1.075rem; }

.prose-reading p {
  color: hsl(var(--foreground) / 0.92);
}

.prose-reading a {
  color: hsl(var(--primary));
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: hsl(var(--primary) / 0.4);
  transition: text-decoration-color 0.15s ease;
}

.prose-reading a:hover {
  text-decoration-color: hsl(var(--primary));
}

.prose-reading strong {
  font-weight: 600;
  color: hsl(var(--foreground));
}

.prose-reading em {
  font-style: italic;
}

.prose-reading blockquote {
  border-left: 2px solid hsl(var(--primary) / 0.5);
  padding-left: 1.25rem;
  color: hsl(var(--muted-fg));
  font-style: italic;
}

.prose-reading code {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.9em;
  background: hsl(var(--surface));
  padding: 0.15em 0.4em;
  border-radius: 0.25rem;
  color: hsl(var(--foreground));
}

.prose-reading pre {
  background: hsl(var(--surface));
  border: 1px solid hsl(var(--border));
  border-radius: 0.5rem;
  padding: 1rem 1.25rem;
  overflow-x: auto;
  font-size: 0.875rem;
  line-height: 1.6;
}

.prose-reading pre code {
  background: transparent;
  padding: 0;
  font-size: inherit;
  border-radius: 0;
}

.prose-reading ul,
.prose-reading ol {
  padding-left: 1.5rem;
}

.prose-reading ul { list-style: disc; }
.prose-reading ol { list-style: decimal; }

.prose-reading li + li {
  margin-top: 0.4em;
}

.prose-reading li::marker {
  color: hsl(var(--muted-fg));
}

.prose-reading hr {
  margin: 2.5em 0;
}

.prose-reading img {
  border-radius: 0.5rem;
  border: 1px solid hsl(var(--border));
}

.prose-reading table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95em;
}

.prose-reading th,
.prose-reading td {
  border: 1px solid hsl(var(--border));
  padding: 0.5rem 0.75rem;
  text-align: left;
}

.prose-reading th {
  background: hsl(var(--surface));
  font-weight: 600;
}


/* =========================================================
   4. LAYOUT
   ========================================================= */

.container {
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

/* --- Navigation --- */

.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: hsl(var(--background) / 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid hsl(var(--border) / 0.6);
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.nav-inner {
  height: var(--nav-height);
  display: flex;
  align-items: center;
  gap: 2rem;
}

.nav-logo {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 700;
  font-size: 1rem;
  color: hsl(var(--foreground));
  letter-spacing: -0.02em;
  flex-shrink: 0;
  transition: color 0.15s ease;
}

.nav-logo:hover {
  color: hsl(var(--primary));
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex: 1;
}

.nav-link {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.8rem;
  color: hsl(var(--muted-fg));
  letter-spacing: 0.02em;
  transition: color 0.15s ease;
}

.nav-link:hover,
.nav-link.active {
  color: hsl(var(--foreground));
}

/* --- Nav social icons (desktop) --- */
.nav-social {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

.nav-social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  color: hsl(var(--muted-fg));
  transition: color 0.15s ease;
}

.nav-social-link:hover {
  color: hsl(var(--foreground));
}

.theme-toggle {
  margin-left: auto;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  color: hsl(var(--muted-fg));
  transition: color 0.15s ease, background-color 0.15s ease;
  flex-shrink: 0;
}

.theme-toggle:hover {
  color: hsl(var(--foreground));
  background: hsl(var(--surface));
}

.icon-sun { display: block; }
.icon-moon { display: none; }
.dark .icon-sun { display: none; }
.dark .icon-moon { display: block; }

.nav-mobile-toggle {
  display: none;
  width: 2rem;
  height: 2rem;
  align-items: center;
  justify-content: center;
  color: hsl(var(--foreground));
  border-radius: var(--radius);
  flex-shrink: 0;
}

.mobile-menu {
  display: none;
  flex-direction: column;
  border-top: 1px solid hsl(var(--border) / 0.6);
  padding: 0.5rem 0;
}

.mobile-menu.open {
  display: flex;
}

.mobile-link {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.875rem;
  color: hsl(var(--muted-fg));
  padding: 0.75rem 1.5rem;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.mobile-link:hover {
  color: hsl(var(--foreground));
  background: hsl(var(--surface));
}

/* --- Mobile social row (inside hamburger menu) --- */
.mobile-social-row {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 0.75rem 1.5rem;
  border-top: 1px solid hsl(var(--border) / 0.4);
  margin-top: 0.25rem;
}

.mobile-social-link {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.8rem;
  color: hsl(var(--muted-fg));
  transition: color 0.15s ease;
}

.mobile-social-link:hover {
  color: hsl(var(--foreground));
}

/* --- Footer --- */

.site-footer {
  border-top: 1px solid hsl(var(--border) / 0.6);
  margin-top: 6rem;
  transition: border-color 0.2s ease;
}

.footer-inner {
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer-brand {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 700;
  font-size: 0.875rem;
  color: hsl(var(--foreground));
}

/* --- Footer social icons --- */
.footer-social {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.footer-social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  color: hsl(var(--muted-fg));
  transition: color 0.15s ease;
}

.footer-social-link:hover {
  color: hsl(var(--foreground));
}

.footer-copy {
  font-size: 0.8rem;
  color: hsl(var(--muted-fg));
}


/* =========================================================
   5. COMPONENTS
   ========================================================= */

/* --- Post Card --- */

.post-card {
  display: block;
  padding: 1.25rem 0;
  border-bottom: 1px solid hsl(var(--border) / 0.6);
  animation: fade-in 0.4s ease-out both;
  transition: none;
}

.post-card:first-child {
  border-top: 1px solid hsl(var(--border) / 0.6);
}

.post-card-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.75rem;
  color: hsl(var(--muted-fg));
  margin-bottom: 0.35rem;
}

.post-card-kind {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.65rem;
  color: hsl(var(--primary));
}

.post-card-dot {
  width: 3px;
  height: 3px;
  border-radius: 9999px;
  background: hsl(var(--border));
  display: inline-block;
}

.post-card-title {
  font-size: 1rem;
  font-weight: 600;
  color: hsl(var(--foreground));
  line-height: 1.35;
  transition: color 0.15s ease;
}

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

.post-card-excerpt {
  margin-top: 0.35rem;
  font-size: 0.9rem;
  color: hsl(var(--foreground) / 0.7);
  max-width: var(--reading-width);
}

.post-card-tags {
  margin-top: 0.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.tag {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: hsl(var(--muted-fg));
}

.tag::before { content: '#'; }


/* --- Section label --- */

.section-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: hsl(var(--muted-fg));
}


/* --- Back link --- */

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.8rem;
  color: hsl(var(--muted-fg));
  transition: color 0.15s ease;
  margin-bottom: 2.5rem;
}

.back-link:hover {
  color: hsl(var(--foreground));
}


/* --- Resource card --- */

.resource-section {
  margin-top: 3rem;
  animation: fade-in 0.4s ease-out both;
}

.resource-section-heading {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1rem;
  font-weight: 600;
  color: hsl(var(--foreground));
  margin-bottom: 0.4rem;
}

.resource-section-blurb {
  font-size: 0.9rem;
  color: hsl(var(--muted-fg));
  max-width: 38rem;
  margin-bottom: 1.25rem;
}

.resource-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.resource-item {
  display: block;
  padding: 1rem 1.25rem;
  background: hsl(var(--surface));
  border: 1px solid hsl(var(--border) / 0.6);
  border-radius: var(--radius);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.resource-item:hover {
  border-color: hsl(var(--primary) / 0.4);
  background: hsl(var(--surface));
}

.resource-item-title {
  font-weight: 600;
  font-size: 0.95rem;
  color: hsl(var(--foreground));
  transition: color 0.15s ease;
}

.resource-item:hover .resource-item-title {
  color: hsl(var(--primary));
}

.resource-item-author {
  font-size: 0.8rem;
  color: hsl(var(--muted-fg));
  margin-top: 0.15rem;
}

.resource-item-note {
  font-size: 0.85rem;
  color: hsl(var(--muted-fg));
  margin-top: 0.4rem;
}


/* =========================================================
   6. PAGES
   ========================================================= */

/* --- Home --- */

.page-home {
  padding: 4rem 0 6rem;
}

@media (min-width: 640px) {
  .page-home { padding: 6rem 0 8rem; }
}

.home-headline {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.25;
  color: hsl(var(--foreground));
}

@media (min-width: 640px) {
  .home-headline { font-size: 2.5rem; }
}

.home-intro {
  margin-top: 1.5rem;
  font-size: 1.1rem;
  line-height: 1.75;
  color: hsl(var(--foreground) / 0.85);
  max-width: var(--reading-width);
}

.home-actions {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  font-size: 0.9rem;
}

.btn-primary {
  color: hsl(var(--primary));
  text-underline-offset: 4px;
  transition: text-decoration-color 0.15s ease, opacity 0.15s ease;
  text-decoration: underline;
  text-decoration-color: hsl(var(--primary) / 0.3);
}

.btn-primary:hover {
  text-decoration-color: hsl(var(--primary));
}

.btn-muted {
  color: hsl(var(--muted-fg));
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: transparent;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.btn-muted:hover {
  color: hsl(var(--foreground));
  text-decoration-color: hsl(var(--foreground) / 0.3);
}

.home-recent {
  margin-top: 5rem;
}


/* --- Post list page --- */

.page-list {
  padding: 3rem 0 4rem;
  animation: fade-in 0.35s ease-out;
}

.page-list-header {
  margin-bottom: 2.5rem;
}

.page-title {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: hsl(var(--foreground));
}

@media (min-width: 640px) {
  .page-title { font-size: 2rem; }
}

.page-subtitle {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  color: hsl(var(--muted-fg));
  max-width: 36rem;
}


/* --- Single post page --- */

.page-post {
  padding: 3rem 0 5rem;
  animation: fade-in 0.35s ease-out;
}

.post-header {
  max-width: var(--reading-width);
  margin-bottom: 3rem;
}

.post-title {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: hsl(var(--foreground));
}

@media (min-width: 640px) {
  .post-title { font-size: 2rem; }
}

.post-meta {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.8rem;
  color: hsl(var(--muted-fg));
}

.post-meta-divider {
  width: 3px;
  height: 3px;
  background: hsl(var(--border));
  border-radius: 9999px;
  display: inline-block;
}

.post-tags {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}


/* --- About page --- */

.page-about {
  padding: 3rem 0 5rem;
  animation: fade-in 0.35s ease-out;
}

.about-header {
  max-width: var(--reading-width);
  margin-bottom: 2.5rem;
}


/* --- Resources page --- */

.page-resources {
  padding: 3rem 0 5rem;
  animation: fade-in 0.35s ease-out;
}

.resources-header {
  max-width: var(--reading-width);
  margin-bottom: 1rem;
}


/* --- 404 --- */

.page-404 {
  padding: 6rem 0;
  text-align: center;
  animation: fade-in 0.35s ease-out;
}

.page-404 h1 {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 4rem;
  font-weight: 700;
  color: hsl(var(--muted-fg));
  opacity: 0.4;
}

.page-404 p {
  margin-top: 1rem;
  color: hsl(var(--muted-fg));
}

.page-404 a {
  color: hsl(var(--primary));
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* =========================================================
   7. ANIMATIONS
   ========================================================= */

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.post-card:nth-child(1)  { animation-delay: 0.00s; }
.post-card:nth-child(2)  { animation-delay: 0.05s; }
.post-card:nth-child(3)  { animation-delay: 0.10s; }
.post-card:nth-child(4)  { animation-delay: 0.15s; }
.post-card:nth-child(5)  { animation-delay: 0.20s; }
.post-card:nth-child(6)  { animation-delay: 0.25s; }
.post-card:nth-child(7)  { animation-delay: 0.30s; }
.post-card:nth-child(8)  { animation-delay: 0.35s; }

.resource-section:nth-child(1) { animation-delay: 0.00s; }
.resource-section:nth-child(2) { animation-delay: 0.06s; }
.resource-section:nth-child(3) { animation-delay: 0.12s; }
.resource-section:nth-child(4) { animation-delay: 0.18s; }
.resource-section:nth-child(5) { animation-delay: 0.24s; }


/* =========================================================
   8. RESPONSIVE
   ========================================================= */

/* Fluid type — scales smoothly, no sudden jumps */
.home-headline {
  font-size: clamp(1.75rem, 5vw, 2.5rem);
}

.page-title {
  font-size: clamp(1.5rem, 3.5vw, 2rem);
}

.post-title {
  font-size: clamp(1.4rem, 3.5vw, 2rem);
}

.prose-reading {
  font-size: clamp(1rem, 1.2vw, 1.125rem);
}

/* Tablet / small laptops */
@media (max-width: 900px) {
  .container {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .page-home {
    padding-top: 3rem;
    padding-bottom: 4rem;
  }

  .home-recent {
    margin-top: 3rem;
  }

  .page-list,
  .page-post,
  .page-about,
  .page-resources {
    padding-top: 2.5rem;
    padding-bottom: 4rem;
  }

  .post-header,
  .page-list-header,
  .about-header,
  .resources-header {
    margin-bottom: 2rem;
  }

  .site-footer {
    margin-top: 4rem;
  }
}

/* Phones — THE KEY FIX: collapse nav links into hamburger */
@media (max-width: 640px) {

  /* Hide desktop nav items */
  .nav-links,
  .nav-social {
    display: none;
  }

  /* Show the hamburger button */
  .nav-mobile-toggle {
    display: flex;
  }

  /* theme toggle has auto margin-left which pushes it far right on desktop —
     reset it so it sits neatly next to the hamburger */
  .theme-toggle {
    margin-left: auto;
  }

  /* Tighten nav gap on small screens */
  .nav-inner {
    gap: 0.75rem;
  }

  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .page-home {
    padding-top: 2rem;
    padding-bottom: 3rem;
  }

  .home-recent {
    margin-top: 2.5rem;
  }

  .page-list,
  .page-post,
  .page-about,
  .page-resources {
    padding-top: 2rem;
    padding-bottom: 3rem;
  }

  .post-header,
  .page-list-header,
  .about-header,
  .resources-header {
    margin-bottom: 1.5rem;
  }

  .site-footer {
    margin-top: 3rem;
  }

  .post-card {
    padding: 1rem 0;
  }

  .resource-section {
    margin-top: 2.25rem;
  }
}

/* ============================================================
   CLOCKIFY HEATMAP  —  theme-aware, mobile-friendly, animated
   ============================================================ */

/* Visually hidden utility (for screen readers) */
.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;
}

/* ── Section wrapper ─────────────────────────────────────── */
.clockify-section {
  position: relative;
  padding: 2.5rem 0 1.5rem;
  font-family: inherit;
}

/* ── Header ──────────────────────────────────────────────── */
.heatmap-header {
  margin-bottom: 0.75rem;
}

.heatmap-title-row {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.heatmap-title {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.95rem;
  font-weight: 600;
  color: hsl(var(--foreground));
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0;
}

.heatmap-total {
  font-size: 0.78rem;
  color: hsl(var(--muted-fg));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}

/* ── Status badge ────────────────────────────────────────── */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 1rem;
  font-size: 1rem;
  font-weight: 500;
}

.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: hsl(var(--border));
  flex-shrink: 0;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

.status-dot.active {
  background: var(--heat-4-bg);
  box-shadow: 0 0 8px hsl(135 64% 53% / 0.55);
  animation: status-pulse 1.8s ease-in-out infinite;
}

@keyframes status-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}

.status-text {
  color: hsl(var(--muted-fg));
}

.status-text.active {
  color: hsl(var(--foreground));
}

/* ── Stats row (current + longest streak) ────────────────── */
.heatmap-stats {
  display: flex;
  gap: 2rem;
  margin: 0 0 1.25rem;
  animation: fade-in 0.4s ease-out both;
}

.heatmap-stat {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.heatmap-stat-value {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.35rem;
  font-weight: 600;
  color: hsl(var(--foreground));
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.heatmap-stat-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.65rem;
  color: hsl(var(--muted-fg));
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ── Scrollable wrap (months + grid scroll together on mobile) ── */
.heatmap-grid-wrap {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: hsl(var(--border)) transparent;
  /* Avoid horizontal scrollbar flash on desktop where content fits exactly */
  padding-bottom: 2px;
}

.heatmap-grid-wrap::-webkit-scrollbar { height: 6px; }
.heatmap-grid-wrap::-webkit-scrollbar-track { background: transparent; }
.heatmap-grid-wrap::-webkit-scrollbar-thumb {
  background: hsl(var(--border));
  border-radius: 3px;
}

/* ── Month labels ────────────────────────────────────────── */
.heatmap-months {
  display: flex;
  gap: 0;
  padding-left: 22px;
  margin-bottom: 3px;
  min-height: 16px;
  width: max-content;
}

.heatmap-month-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.68rem;
  color: hsl(var(--muted-fg));
  flex-shrink: 0;
  white-space: nowrap;
}

/* ── Grid ────────────────────────────────────────────────── */
.heatmap-grid {
  display: flex;
  gap: 3px;
  width: max-content;
  min-height: 120px;
  padding-bottom: 4px;
}

/* Day-of-week labels column — sticky-left so it stays put on mobile scroll */
.heatmap-days-col {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex-shrink: 0;
  margin-right: 3px;
  position: sticky;
  left: 0;
  z-index: 2;
  background: hsl(var(--background));
  padding-right: 3px;
}

.heatmap-day-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.62rem;
  color: hsl(var(--muted-fg));
  width: 16px;
  text-align: right;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  /* height + line-height set inline by JS so labels match cellSize exactly */
}

/* Week columns */
.heatmap-week {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex-shrink: 0;
}

/* Individual cells */
.heatmap-cell {
  border-radius: 2px;
  cursor: default;
  transition: transform 0.12s ease, opacity 0.12s ease, outline-color 0.12s ease;
  outline: 1px solid transparent;
  animation: heatmap-cell-in 0.35s ease-out both;
  animation-delay: var(--col-delay, 0s);
}

@keyframes heatmap-cell-in {
  from { opacity: 0; transform: scale(0.72); }
  to   { opacity: 1; transform: scale(1); }
}

.heatmap-cell:hover,
.heatmap-cell:focus-visible {
  transform: scale(1.4);
  opacity: 1 !important;
  outline-color: hsl(var(--foreground) / 0.5);
  z-index: 1;
}

/* Theme-aware cell levels */
.heatmap-cell[data-level="0"] { background: var(--heat-0-bg); }
.heatmap-cell[data-level="1"] { background: var(--heat-1-bg); }
.heatmap-cell[data-level="2"] { background: var(--heat-2-bg); }
.heatmap-cell[data-level="3"] { background: var(--heat-3-bg); }
.heatmap-cell[data-level="4"] { background: var(--heat-4-bg); }

/* Empty filler cells (pre-start padding) */
.heatmap-cell.empty {
  background: transparent !important;
  cursor: default;
  pointer-events: none;
  animation: none;
}

/* ── Loading skeleton ───────────────────────────────────── */
.heatmap-grid.is-loading {
  display: block;            /* override flex while skeleton fills the space */
  width: 100%;
  height: 120px;
  padding: 0;
}

.heatmap-skeleton {
  width: 100%;
  height: 120px;
  border-radius: 4px;
  background: linear-gradient(
    90deg,
    hsl(var(--surface)) 0%,
    hsl(var(--muted) / 0.6) 50%,
    hsl(var(--surface)) 100%
  );
  background-size: 200% 100%;
  animation: heatmap-shimmer 1.4s ease-in-out infinite;
}

@keyframes heatmap-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Error state ────────────────────────────────────────── */
.heatmap-grid.is-error {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-height: 120px;
  padding: 0;
}

.heatmap-error {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
}

.heatmap-error-text {
  font-size: 0.85rem;
  color: hsl(var(--muted-fg));
}

.heatmap-retry {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.75rem;
  padding: 0.35rem 0.75rem;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  background: hsl(var(--surface));
  color: hsl(var(--foreground));
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.heatmap-retry:hover,
.heatmap-retry:focus-visible {
  border-color: hsl(var(--primary) / 0.5);
  color: hsl(var(--primary));
  outline: none;
}

/* ── Tooltip ────────────────────────────────────────────── */
.heatmap-tooltip {
  position: fixed;
  top: 0;
  left: 0;
  background: hsl(var(--foreground));
  color: hsl(var(--background));
  border-radius: 6px;
  padding: 0.4rem 0.7rem;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.72rem;
  font-weight: 500;
  pointer-events: none;
  white-space: nowrap;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.12s ease;
  box-shadow: 0 6px 20px hsl(var(--foreground) / 0.18);
}

.heatmap-tooltip.visible { opacity: 1; }

/* ── Scale legend ───────────────────────────────────────── */
.heatmap-scale {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-top: 0.6rem;
  justify-content: flex-end;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.68rem;
  color: hsl(var(--muted-fg));
}

.scale-box {
  width: 11px;
  height: 11px;
  border-radius: 2px;
}

.scale-box[data-level="0"] { background: var(--heat-0-bg); }
.scale-box[data-level="1"] { background: var(--heat-1-bg); }
.scale-box[data-level="2"] { background: var(--heat-2-bg); }
.scale-box[data-level="3"] { background: var(--heat-3-bg); }
.scale-box[data-level="4"] { background: var(--heat-4-bg); }

/* ── Mobile ─────────────────────────────────────────────── */
@media (max-width: 640px) {
  .status-badge       { font-size: 0.9rem; }
  .heatmap-stats      { gap: 1.5rem; margin-bottom: 1rem; }
  .heatmap-stat-value { font-size: 1.15rem; }
  /* Scale legend looks cramped under a scrolled grid — left-align */
  .heatmap-scale      { justify-content: flex-start; }
}

/* ── Reduced motion ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .heatmap-cell,
  .heatmap-stats,
  .heatmap-skeleton {
    animation: none !important;
  }
  .status-dot.active {
    animation: none !important;
  }
  .heatmap-cell { transition: none; }
}