:root {
  --color-bg: #ffffff;
  --color-bg-alt: #f2f5fb;
  --color-text: #101c2e;
  --color-muted: #5b6b84;
  --color-border: #dde4f0;
  --color-accent: #2451b3;
  --color-accent-dark: #163172;
  --color-accent-soft: #e8eefc;
  --font-serif: "Lora", Georgia, "Times New Roman", serif;
  --max-width: 760px;
  --max-width-wide: 1480px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding-bottom: 64px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.25rem;
}

a {
  color: var(--color-accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* Header / pill nav */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-accent-dark);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.pillnav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  position: relative;
}

.brand {
  font-weight: 700;
  font-size: 1.1rem;
  color: #fff;
}

.brand:hover {
  text-decoration: none;
}

.pillnav {
  display: flex;
  gap: 0.4rem;
}

.pill {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 1rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.75);
  white-space: nowrap;
}

.pill:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  text-decoration: none;
}

.pill svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.pill.active {
  background: var(--color-accent);
  color: #fff;
}

.pill.active:hover {
  background: var(--color-accent);
  color: #fff;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
}

.nav-toggle span {
  width: 22px;
  height: 2px;
  background: #fff;
}

/* Hero */

.hero {
  padding: 3.5rem 1.25rem 2.5rem;
}

.hero h1 {
  font-size: 2.25rem;
  margin: 0 0 0.5rem;
}

.tagline {
  color: var(--color-muted);
  font-size: 1.05rem;
  margin: 0;
}

/* Sections */

.section {
  padding: 2rem 1.25rem;
  border-top: 1px solid var(--color-border);
}

.section h2 {
  font-size: 1.4rem;
  margin-top: 0;
}

.placeholder {
  color: var(--color-muted);
  font-style: italic;
}

.container-wide {
  max-width: var(--max-width-wide);
}

/* Footer */

.site-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: var(--color-accent-dark);
  color: #fff;
  padding: 1rem 0;
  font-size: 0.9rem;
}

.footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
}

.footer-connect {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.footer-label {
  font-weight: 700;
}

.footer-connect a,
.footer-copyright {
  color: #fff;
  margin: 0;
}

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

/* Responsive pill nav */

@media (max-width: 640px) {
  .nav-toggle {
    display: flex;
  }

  .pillnav {
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0.25rem;
    background: var(--color-accent-dark);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    padding: 0.5rem 1.25rem 1rem;
    display: none;
  }

  .pillnav.open {
    display: flex;
  }

  .pill {
    width: 100%;
  }

  .footer-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
  }

  /* The footer is fixed, so body padding is what keeps the last element
     clear of it. At this width the footer stacks to three rows and
     measures 127px, so 96px left the final link partly covered on every
     page. Measured, not guessed — see the archive page's bottom link. */
  body {
    padding-bottom: 136px;
  }
}

/* =========================================================
   "Today's News" — Daybreak template
   ========================================================= */

.daybreak {
  background: var(--color-bg-alt);
}

.db-masthead {
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}

.db-masthead-row {
  max-width: var(--max-width-wide);
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0.9rem 1.25rem;
  flex-wrap: wrap;
}

.db-logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  font-size: 0.9rem;
  white-space: nowrap;
}

.db-logo-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--color-accent);
  color: var(--color-accent);
  border-radius: 4px;
  font-size: 0.8rem;
}

.db-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem;
  flex: 1;
}

.db-categories a {
  color: var(--color-muted);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.db-categories a:hover {
  color: var(--color-accent);
  text-decoration: none;
}

.db-edition {
  font-size: 0.78rem;
  color: var(--color-muted);
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.db-hero {
  background: var(--color-bg-alt);
  border-bottom: 1px solid var(--color-border);
  padding: 2.5rem 0;
}

.db-hero .container {
  max-width: var(--max-width-wide);
}

.db-kicker {
  color: var(--color-accent);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin: 0 0 0.6rem;
}

.db-hero h1 {
  font-family: var(--font-serif);
  font-size: 2.4rem;
  line-height: 1.25;
  margin: 0;
  color: var(--color-accent-dark);
}

.db-stats {
  max-width: var(--max-width-wide);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--color-border);
}

.db-stat {
  padding: 1.1rem 1.25rem;
  border-right: 1px solid var(--color-border);
}

.db-stat:last-child {
  border-right: none;
}

.db-stat-label {
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-muted);
  font-weight: 600;
}

.db-stat-value {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--color-accent-dark);
}

.db-stat-note {
  font-size: 0.75rem;
  color: var(--color-muted);
}

#db-sections {
  max-width: var(--max-width-wide);
  padding-top: 2rem;
  padding-bottom: 3rem;
}

.db-section {
  padding: 1.75rem 0;
  border-top: 1px solid var(--color-border);
}

.db-section:first-child {
  border-top: none;
}

.db-section-kicker {
  color: var(--color-accent);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin: 0 0 0.2rem;
}

.db-section-title {
  font-family: var(--font-serif);
  font-size: 1.9rem;
  margin: 0 0 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--color-text);
  color: var(--color-text);
}

.db-story-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 2.5rem;
}

.db-story {
  display: flex;
  gap: 0.9rem;
  padding: 1.1rem 0;
  border-top: 1px solid var(--color-border);
}

.db-story:nth-child(-n+2) {
  border-top: none;
}

.db-story-num {
  font-size: 0.75rem;
  color: var(--color-muted);
  padding-top: 0.2rem;
}

.db-story-category {
  color: var(--color-accent);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin: 0 0 0.3rem;
}

.db-story-headline {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  margin: 0 0 0.4rem;
  color: var(--color-text);
}

.db-story-summary {
  font-size: 0.92rem;
  color: var(--color-muted);
  margin: 0 0 0.6rem;
}

.db-sources {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.db-source {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  color: var(--color-text);
}

.db-source:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  text-decoration: none;
}

@media (max-width: 700px) {
  .db-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .db-stat:nth-child(2n) {
    border-right: none;
  }

  .db-story-grid {
    grid-template-columns: 1fr;
  }

  .db-story:nth-child(-n+2) {
    border-top: 1px solid var(--color-border);
  }

  .db-story:first-child {
    border-top: none;
  }

  .db-hero h1 {
    font-size: 1.8rem;
  }
}

/* =========================================================
   Blog tile grid ("Sayantan Blogs")
   ========================================================= */

/* One post per row. A three-across grid gave every post the same small
   square regardless of what it was, and left no room for more than a
   sentence of the excerpt. */
.blog-grid {
  display: flex;
  flex-direction: column;
  max-width: var(--max-width-wide);
  margin: 0 auto;
  padding: 0 1.25rem 3rem;
}

.blog-tile {
  display: flex;
  align-items: flex-start;
  gap: 1.6rem;
  padding: 1.75rem 0;
  border-top: 1px solid var(--color-border);
  color: var(--color-text);
  background: var(--color-bg);
}

.blog-tile:last-child {
  border-bottom: 1px solid var(--color-border);
}

.blog-tile:hover {
  text-decoration: none;
}

.blog-tile:hover .blog-tile-title {
  color: var(--color-accent);
}

.blog-tile-image {
  flex: 0 0 200px;
  width: 200px;
  height: 200px;
  object-fit: cover;
  display: block;
  background: var(--color-bg-alt);
  border-radius: 6px;
}

/* Deliberately quiet: a placeholder should hold the space without competing
   with the posts that do have a picture. */
.blog-tile-image-empty {
  background: var(--color-bg-alt);
  border: 1px dashed var(--color-border);
}

/* The rule between picture and text, which is what gives the row its shape.
   Every row reserves the picture column whether or not the post has a
   banner (blogs.js emits an empty block otherwise), so the rules and the
   titles line up down the page. */
.blog-tile-body {
  flex: 1;
  min-width: 0;
  padding-left: 1.6rem;
  border-left: 3px solid var(--color-border);
}

.blog-tile-date {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0 0 0.4rem;
}

.blog-tile-title {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  line-height: 1.3;
  margin: 0 0 0.6rem;
  color: var(--color-text);
}

.blog-tile-excerpt {
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--color-muted);
  margin: 0;
}

@media (max-width: 700px) {
  /* Stack rather than shrink: a 200px picture beside text is unreadable on
     a phone, and a squeezed one is worse than one above the words. */
  .blog-tile {
    flex-direction: column;
    gap: 1rem;
  }

  .blog-tile-image {
    flex: none;
    width: 100%;
    height: 200px;
  }

  .blog-tile-body {
    padding-left: 0;
    border-left: none;
  }

  .blog-tile-title {
    font-size: 1.25rem;
  }
}

/* Comments, below the article and clearly separated from it. Hidden
   entirely by comments.js until giscus is configured — an empty "Comments"
   heading on every post is worse than none. */
.post-comments {
  margin-top: 3.5rem;
  padding-top: 2rem;
  border-top: 2px solid var(--color-border);
}

.post-comments-title {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  margin: 0 0 0.4rem;
}

.post-comments-note {
  font-size: 0.82rem;
  color: var(--color-muted);
  margin: 0 0 1.5rem;
}

/* =========================================================
   Individual blog post page
   ========================================================= */

.blog-post {
  max-width: var(--max-width);
  padding: 2.5rem 1.25rem 3rem;
}

.blog-back-link {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
}

.blog-post-date {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0 0 0.5rem;
}

.blog-post-title {
  font-family: var(--font-serif);
  font-size: 2rem;
  line-height: 1.3;
  margin: 0 0 1.75rem;
  color: var(--color-text);
}

.blog-post-body {
  font-size: 1rem;
  line-height: 1.75;
}

.blog-post-body img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  margin: 1rem 0;
}

.blog-post-body a {
  word-break: break-word;
}

.blog-post-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: 0.9rem;
  overflow-x: auto;
  display: block;
}

.blog-post-body th,
.blog-post-body td {
  border: 1px solid var(--color-border);
  padding: 0.5rem 0.7rem;
  text-align: left;
}

.blog-post-body th {
  background: var(--color-accent-soft);
  color: var(--color-accent-dark);
  font-weight: 700;
}

.blog-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1.5rem;
}

.blog-tag {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-accent);
  background: var(--color-accent-soft);
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
}

/* The banner, above the post title. Distinct from .blog-hero-image, which
   belongs to the "hero" layout and sits inside the article body. */
.blog-banner {
  width: 100%;
  max-height: 340px;
  object-fit: cover;
  display: block;
  border-radius: 8px;
  margin-bottom: 1.75rem;
  background: var(--color-bg-alt);
}

.blog-hero-image {
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 0.5rem;
}

.blog-image-caption {
  font-size: 0.85rem;
  color: var(--color-muted);
  text-align: center;
  margin: 0 0 1.5rem;
}

.blog-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.9rem;
  margin: 0 0 1.75rem;
}

.blog-gallery-item {
  margin: 0;
}

.blog-gallery-item img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}

.blog-gallery-item figcaption {
  font-size: 0.78rem;
  color: var(--color-muted);
  margin-top: 0.3rem;
}

/* Video embed, sized by ratio rather than a fixed height so it fills the
   column at any width without letterboxing. */
.blog-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 2rem 0;
  border-radius: 8px;
  overflow: hidden;
  background: #000;
}

.blog-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.blog-attachment {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-border);
}

.blog-attachment a {
  display: inline-block;
  font-weight: 600;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--color-border);
  border-radius: 6px;
}

.blog-attachment a:hover {
  border-color: var(--color-accent);
  text-decoration: none;
}

@media (max-width: 640px) {
  .blog-gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* On a wide screen the post used a 760px shell and left most of a 1600px
   window empty.

   The first attempt scaled the column and the type up together to keep the
   line length where it was. That read fine but looked oversized, so the
   type is back at its normal size and the column simply takes the width
   instead: 1000px of a 1180px page. That runs long — about 135 characters
   a line against the ~75 that is usually recommended — which is a
   deliberate trade for a page that fills the screen.

   This block has to sit after the base .blog-post rules. Placed before
   them it loses the cascade to `.blog-post-body { font-size: 1rem }` at
   equal specificity. */
@media (min-width: 1080px) {
  .blog-post {
    max-width: 1180px;
  }

  .blog-post > * {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
  }

  /* An inline-block ignores `margin: auto`, so the back link would sit on
     the container edge instead of lining up with the prose. */
  .blog-post > .blog-back-link {
    margin-left: calc((100% - 1000px) / 2);
  }

  /* Media takes the full page width, wider than the prose. */
  .blog-post > .blog-banner,
  .blog-post > .blog-video,
  .blog-post > .blog-hero-image,
  .blog-post > .blog-gallery {
    max-width: 100%;
  }

  .blog-post > .blog-banner {
    max-height: 460px;
  }
}

/* =========================================================
   About Me page: profile/family photos, journey prose
   ========================================================= */

.about-greeting {
  font-family: Georgia, serif;
  font-size: clamp(2.25rem, 4vw, 3rem);
  font-weight: 800;   
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0 0 1.25rem;
  text-align: left;
}

#about-intro,
#professional-journey,
#personal-journey,
#family-intro {
  font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
  font-size: 1.15rem;
}

#about-intro p,
#professional-journey p,
#personal-journey p,
#family-intro p {
  line-height: 1.75;
  margin: 0 0 1.1rem;
  color: var(--color-text);
}

.split-section {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
}

.text-panel h2 {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--color-border);
}

.text-panel h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.photo-panel {
  flex: 0 0 320px;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

#about .photo-panel {
  position: sticky;
  top: 96px;
}

.photo-panel:empty {
  display: none;
}

.text-panel {
  flex: 1;
  min-width: 0;
}

.photo-panel-item {
  margin: 0;
  position: relative;
}

.photo-panel-item img {
  width: 100%;
  height: 380px;
  object-fit: cover;
  object-position: top;
  border-radius: 10px;
  display: block;
}

.photo-badge {
  position: absolute;
  bottom: 0.5rem;
  right: 0.5rem;
  background: rgba(16, 28, 46, 0.75);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
}

.photo-caption {
  font-size: 0.82rem;
  color: var(--color-muted);
  margin: 0.4rem 0 0;
  text-align: center;
}

@media (max-width: 700px) {
  .split-section {
    flex-direction: column;
  }

  .photo-panel {
    flex: 0 0 auto;
    width: 100%;
  }

  .photo-panel-item img {
    height: 320px;
  }

  #about .photo-panel {
    position: static;
  }
}

/* =========================================================
   Autism retrieval experiment page
   ========================================================= */

.experiment-page {
  padding: 2rem 1.25rem 3rem;
  /* Deliberately wide, to leave little empty space either side. The text
     fills the shell rather than sitting in a narrower column inside it, so
     there is only one width on the page. That runs long — roughly 170
     characters a line at 1400px, against the ~75 usually recommended — and
     is a chosen trade, the same one the blog post page makes. */
  max-width: 1400px;
  --experiment-measure: 100%;
}

/* One measure for every text block on the page. The lede and the sections
   each carried their own max-width of 46rem, so widening the shell alone
   left three different column widths stacked down the page. */
.experiment-page > .experiment-warning,
.experiment-page > h1,
.experiment-page > .experiment-intro,
.experiment-page > .experiment-lede,
.experiment-page > .experiment-section {
  max-width: var(--experiment-measure);
}

.experiment-warning {
  border-left: 4px solid var(--color-accent);
  background: var(--color-accent-soft);
  color: var(--color-accent-dark);
  padding: 1rem 1.25rem;
  border-radius: 6px;
  margin-bottom: 2rem;
  font-size: 0.95rem;
  line-height: 1.6;
}

.experiment-page h1 {
  font-family: Georgia, serif;
  font-size: clamp(1.9rem, 4vw, 2.5rem);
  margin: 0 0 0.75rem;
}

.experiment-intro {
  color: var(--color-muted);
  line-height: 1.7;
  margin: 0 0 2rem;
}

/* The explanatory sections above and below the two search tools. Prose here
   is read, not scanned, so it keeps the narrower measure even though the page
   itself is container-wide. */
.experiment-lede {
  font-size: 1.22rem;
  line-height: 1.6;
  color: var(--color-muted);
  margin: 0 0 2.5rem;
}

.experiment-section {
  margin: 0 0 2.75rem;
}

.experiment-section h2 {
  font-family: var(--font-serif);
  font-size: 1.45rem;
  margin: 0 0 0.9rem;
}

.experiment-section p {
  line-height: 1.75;
  margin: 0 0 1rem;
}

.section-note {
  font-size: 0.9rem;
  color: var(--color-muted);
}

.source-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.25rem 0;
  font-size: 0.88rem;
}

.source-table th {
  text-align: left;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
  border-bottom: 1px solid var(--color-border);
  padding: 0 0.9rem 0.5rem 0;
}

.source-table td {
  vertical-align: top;
  padding: 0.85rem 0.9rem 0.85rem 0;
  border-bottom: 1px solid var(--color-border);
  line-height: 1.6;
}

.source-table code {
  font-size: 0.85em;
  background: var(--color-accent-soft);
  padding: 0.1em 0.35em;
  border-radius: 4px;
}

/* The owning body, under the source name rather than beside it. */
.source-owner {
  display: block;
  font-size: 0.78rem;
  color: var(--color-muted);
  margin-top: 0.15rem;
}

/* The build notes. Deliberately set apart from the page body: smaller,
   quieter, and behind a rule, so it reads as an appendix for whoever is
   curious rather than as something a parent has to get through before
   reaching the two search tools. */
.tech-section {
  /* Same measure as the rest of the page: it stays set apart by being
     smaller and quieter, not by being a different width. */
  max-width: var(--experiment-measure, 46rem);
  margin: 3.5rem 0 1rem;
  padding-top: 1.5rem;
  border-top: 2px solid var(--color-border);
  font-size: 0.86rem;
  color: var(--color-muted);
}

/* Collapsed by default. It holds the full technical account — sources,
   models, why a Worker exists, what the summariser may and may not do — and
   a parent looking for a paper should not have to scroll past all of it to
   reach the search. Open, it is the longest thing on the page; closed, it is
   one line. */
.tech-summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--font-serif);
  font-size: 1.1rem;
  color: var(--color-text);
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.tech-summary::-webkit-details-marker {
  display: none;
}

.tech-summary::before {
  content: "+";
  font-family: var(--font-sans, inherit);
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-accent);
  width: 1rem;
}

.tech-section[open] .tech-summary::before {
  content: "\2212";
}

.tech-section[open] .tech-summary {
  margin-bottom: 1.25rem;
}

.tech-summary:hover,
.tech-summary:focus-visible {
  color: var(--color-accent);
}

.tech-summary-hint {
  font-family: inherit;
  font-size: 0.78rem;
  color: var(--color-muted);
}

.tech-section h3 {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 1.75rem 0 0.5rem;
}

.tech-section p {
  line-height: 1.7;
  margin: 0 0 0.75rem;
}

.tech-section strong {
  color: var(--color-text);
}

.tech-section code {
  font-size: 0.86em;
  background: var(--color-accent-soft);
  padding: 0.1em 0.35em;
  border-radius: 4px;
  word-break: break-word;
}

.tech-section .source-table {
  font-size: 0.82rem;
}

.tech-section .experiment-provenance {
  margin: 0 0 0.5rem;
  font-size: 0.78rem;
}

/* Shown in place of the ask form until the Worker URL is configured, so the
   section still explains itself rather than silently vanishing. */
.ask-unavailable {
  max-width: 46rem;
  padding: 0.9rem 1.1rem;
  border: 1px dashed var(--color-border);
  border-radius: 8px;
  background: var(--color-bg-alt);
  font-size: 0.9rem;
  color: var(--color-muted);
  margin: 0;
}

@media (max-width: 640px) {
  /* Three columns of prose is unreadable on a phone; stack each source into
     its own labelled block instead. */
  .source-table thead {
    display: none;
  }

  .source-table tr {
    display: block;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--color-border);
  }

  .source-table td {
    display: block;
    border: none;
    padding: 0.2rem 0;
  }

  .source-table td:first-child {
    font-weight: 700;
  }
}

.experiment-label {
  display: block;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 0.5rem;
}

.experiment-select {
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  font-family: inherit;
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  margin-bottom: 2rem;
}

.experiment-select:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}

/* The ranked sources, set apart from the summary above them. Most readers
   want the summary; the sources are the receipts, and they should look like
   receipts — smaller, on a tinted ground, and foldable away. Open by
   default, because the summary's citations link into these cards and a
   collapsed block would send every one of them into hidden content. */
.sources-block {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 0.5rem 1.1rem 0.25rem;
  margin-bottom: 2rem;
  font-size: 0.84rem;
}

.sources-summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex-wrap: wrap;
  padding: 0.6rem 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.sources-summary::-webkit-details-marker {
  display: none;
}

.sources-summary::before {
  content: "+";
  font-size: 0.95rem;
  width: 0.9rem;
}

.sources-block[open] .sources-summary::before {
  content: "\2212";
}

.sources-summary:hover,
.sources-summary:focus-visible {
  color: var(--color-accent-dark);
}

.sources-hint {
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-muted);
}

/* Inside the block everything steps down a size: these are supporting
   evidence, not the main read. */
.sources-block .result-title {
  font-size: 1rem;
}

.sources-block .result-text {
  font-size: 0.84rem;
  line-height: 1.65;
}

.sources-block .result-score {
  font-size: 0.95rem;
}

.sources-block .result-card {
  border-bottom-color: var(--color-border);
}

.sources-block .result-card:last-child {
  border-bottom: none;
}

.result-card {
  display: flex;
  gap: 1rem;
  padding: 1.25rem 0;
  border-top: 1px solid var(--color-border);
}

.result-rank {
  flex: 0 0 auto;
  font-family: Georgia, serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-muted);
  padding-top: 0.1rem;
}

.result-body {
  flex: 1;
  min-width: 0;
}

.result-meta {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 0.4rem;
}

.result-score {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--color-accent);
}

.result-score-label,
.result-category {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.result-category {
  padding: 0.15rem 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
}

.result-title {
  font-family: Georgia, serif;
  font-size: 1.2rem;
  margin: 0 0 0.5rem;
}

.result-text {
  line-height: 1.7;
  margin: 0 0 0.6rem;
}

/* Abstracts run long enough that one result fills a screen, which defeats
   the point of showing a ranking. Clamp to a few lines; autism.js adds the
   toggle below only to the ones that actually overflow. */
.result-text.is-clamped {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.result-toggle {
  display: inline-block;
  background: none;
  border: none;
  padding: 0;
  margin: 0 0 0.6rem;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-accent);
  cursor: pointer;
}

.result-toggle:hover,
.result-toggle:focus-visible {
  text-decoration: underline;
}

.result-source {
  font-size: 0.8rem;
  font-style: italic;
  color: var(--color-muted);
  margin: 0;
}

/* Result titles link out to the real paper or trial record. */
.result-title a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--color-border);
}

.result-title a:hover,
.result-title a:focus {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

/* Free-text question box. Hidden until autism.js confirms the Worker
   endpoint is configured — without it there is nothing to submit to. */
.ask-form {
  margin-bottom: 2rem;
}

.ask-row {
  display: flex;
  gap: 0.6rem;
}

.ask-input {
  flex: 1;
  min-width: 0;
  padding: 0.7rem 0.9rem;
  font-family: inherit;
  font-size: 1rem;
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 8px;
}

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

.ask-button {
  padding: 0.7rem 1.4rem;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  background: var(--color-accent);
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

.ask-button:hover:not(:disabled) {
  background: var(--color-accent-dark);
}

.ask-button:disabled {
  opacity: 0.55;
  cursor: default;
}

.ask-hint {
  font-size: 0.8rem;
  color: var(--color-muted);
  margin: 0.6rem 0 0;
}

.ask-error {
  padding: 0.8rem 1rem;
  border-left: 3px solid #b3261e;
  background: #fdecea;
  color: #7a1c15;
  font-size: 0.9rem;
  border-radius: 0 6px 6px 0;
  margin-bottom: 1.5rem;
}

/* The generated summary. Styled deliberately unlike the result cards below
   it: everything in a result card is quoted verbatim from a real paper,
   whereas this paragraph was written by a model, and a reader should never
   have to guess which is which. */
.answer-card {
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent);
  border-radius: 0 8px 8px 0;
  padding: 1.1rem 1.3rem;
  margin-bottom: 2rem;
  background: var(--color-bg-alt);
}

.answer-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0 0 0.5rem;
}

.answer-text {
  line-height: 1.75;
  margin: 0;
  /* The model puts a break before its closing caveat, and HTML would
     collapse it into the preceding sentence. pre-line keeps the newlines it
     wrote while still collapsing runs of spaces. */
  white-space: pre-line;
}

.answer-caveat {
  font-size: 0.78rem;
  color: var(--color-muted);
  margin: 0.9rem 0 0;
}

/* Citation markers link down to the source card they came from. */
.citation {
  font-weight: 700;
  font-size: 0.85em;
  color: var(--color-accent);
  text-decoration: none;
  padding: 0 0.05em;
}

.citation:hover {
  text-decoration: underline;
}

.result-card:target {
  background: #fff8e1;
}

/* Corpus provenance line, filled in by autism.js from the data file. */
.experiment-provenance {
  font-size: 0.8rem;
  color: var(--color-muted);
  margin: 0 0 1.5rem;
}

.experiment-provenance:empty {
  margin: 0;
}

@media (max-width: 640px) {
  .result-card {
    flex-direction: column;
    gap: 0.35rem;
  }
}

/* =========================================================
   Daybreak archive calendar (archive.html)
   ========================================================= */

.archive-page {
  padding: 2.5rem 1.25rem 3rem;
}

.archive-title {
  font-family: var(--font-serif);
  font-size: 1.9rem;
  margin: 0 0 0.75rem;
  color: var(--color-text);
}

.archive-intro {
  color: var(--color-muted);
  margin: 0 0 2rem;
}

/* Keyword search over every past story (archive-search.js). Sits above the
   calendar; results are dated because they are past reporting. */
.archive-search {
  margin: 0 0 2.5rem;
}

.archive-search-label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.4rem;
  color: var(--color-text);
}

.archive-search-input {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-bg);
  color: var(--color-text);
}

.archive-search-input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-soft);
}

.archive-search-status {
  color: var(--color-muted);
  font-size: 0.9rem;
  margin: 0.6rem 0 0;
  min-height: 1.2em;
}

.archive-results {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
}

.archive-result {
  padding: 0.85rem 0;
  border-top: 1px solid var(--color-border);
}

.archive-result-meta {
  margin: 0 0 0.2rem;
  font-size: 0.8rem;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.archive-result-headline {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-accent-dark);
  text-decoration: none;
}

.archive-result-headline:hover,
.archive-result-headline:focus {
  text-decoration: underline;
}

.archive-result-summary {
  margin: 0.3rem 0 0;
  font-size: 0.92rem;
  color: var(--color-text);
  overflow-wrap: anywhere;
}

.archive-result mark {
  background: var(--color-accent-soft);
  color: inherit;
  padding: 0 0.1em;
  border-radius: 2px;
}

/* Square cells across a 760px container would be ~104px each, which reads
   as oversized next to the mobile view. Capping the calendar keeps the day
   cells at a normal size without narrowing the page text. */
.archive-calendar {
  max-width: 560px;
}

.archive-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.archive-month {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  margin: 0;
  color: var(--color-text);
}

.archive-nav {
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-accent);
  border-radius: 6px;
  width: 2.25rem;
  height: 2.25rem;
  font-size: 1rem;
  cursor: pointer;
}

.archive-nav:hover:not(:disabled) {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
}

.archive-nav:disabled {
  opacity: 0.35;
  cursor: default;
}

.archive-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.archive-dayname {
  text-align: center;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-muted);
  padding-bottom: 0.4rem;
}

/* Square cells whatever the column width, so the grid stays a calendar
   rather than stretching into letterboxes on a wide screen. */
.archive-day {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  border-radius: 6px;
  font-size: 0.95rem;
  border: 1px solid transparent;
}

.archive-day.is-blank {
  border-color: transparent;
}

/* A day with no edition is visibly inert: no border, no pointer, muted. */
.archive-day.is-empty {
  color: #aab4c5;
}

.archive-day.is-available {
  background: var(--color-accent-soft);
  border-color: var(--color-border);
  color: var(--color-accent-dark);
  font-weight: 600;
  text-decoration: none;
}

.archive-day.is-available:hover,
.archive-day.is-available:focus-visible {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
  text-decoration: none;
}

.archive-count,
.archive-status {
  color: var(--color-muted);
  font-size: 0.85rem;
  margin: 1.25rem 0 0;
}

.archive-latest {
  margin: 2rem 0 0;
  font-weight: 600;
}

@media (max-width: 640px) {
  .archive-grid { gap: 3px; }
  .archive-day { font-size: 0.85rem; }
}

/* Bare mode: archive.html?chrome=off, opened in a pop-up from a Daybreak
   edition. No site header or footer, since a pop-up has nowhere to
   navigate back to. The class is set by an inline script in <head> so the
   chrome never paints. */
.is-bare .site-header,
.is-bare .site-footer,
.is-bare .archive-chrome-only {
  display: none;
}

/* The mobile media query sets body padding-bottom again further down, so
   this needs the extra specificity rather than relying on source order. */
html.is-bare body {
  padding-bottom: 0;
}

.is-bare .archive-page {
  padding-top: 1.5rem;
}

/* =========================================================
   SenProjectDocumentation (projectdocs.html)
   A backlog view: epics as collapsible groups of stories.
   ========================================================= */

.backlog-page {
  padding: 2rem 1.25rem 3rem;
  max-width: 1400px;
}

.backlog-eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0 0 0.35rem;
}

.backlog-head h1 {
  font-family: var(--font-serif);
  font-size: 2rem;
  margin: 0 0 1rem;
}

.backlog-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--color-border);
}

.backlog-counts {
  font-size: 0.85rem;
  color: var(--color-muted);
}

.backlog-filters {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.backlog-filter {
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-muted);
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}

.backlog-filter:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.backlog-filter.is-active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}

.backlog-h2 {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  margin: 2rem 0 0.5rem;
}

.backlog-overview p {
  margin: 0 0 0.75rem;
  line-height: 1.7;
}

.backlog-vision {
  border-left: 3px solid var(--color-accent);
  padding-left: 0.9rem;
  color: var(--color-text);
}

.backlog-principles {
  margin: 0 0 1rem;
  padding-left: 1.25rem;
  line-height: 1.7;
}

.backlog-principles li {
  margin-bottom: 0.4rem;
}

.backlog-project-name {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  margin: 2.5rem 0 0.75rem;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid var(--color-accent);
}

/* ---- Epic ------------------------------------------------ */

.epic {
  border: 1px solid var(--color-border);
  border-radius: 8px;
  margin: 1rem 0 0;
  background: var(--color-bg);
  overflow: hidden;
}

.epic-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.85rem;
  padding: 0.85rem 1rem;
  background: var(--color-bg-alt);
  cursor: pointer;
  list-style: none;
}

.epic-head::-webkit-details-marker { display: none; }

.epic-head::before {
  content: "▸";
  color: var(--color-muted);
  font-size: 0.8rem;
}

.epic[open] > .epic-head::before { content: "▾"; }

.epic-key {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background: var(--color-accent-dark);
  border-radius: 4px;
  padding: 0.2rem 0.5rem;
  white-space: nowrap;
}

.epic-title {
  font-weight: 700;
  color: var(--color-text);
}

.epic-progress {
  margin-left: auto;
  font-size: 0.78rem;
  color: var(--color-muted);
  white-space: nowrap;
}

.epic-summary {
  margin: 0;
  padding: 0.85rem 1rem 0;
  color: var(--color-muted);
  line-height: 1.7;
}

.epic-stories {
  padding: 0.5rem 1rem 1rem;
}

/* ---- Story ----------------------------------------------- */

.story {
  border-top: 1px solid var(--color-border);
  padding: 1rem 0 0.5rem;
}

.story:first-child { border-top: 0; }

.story-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  margin-bottom: 0.5rem;
}

.story-key {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-accent);
  white-space: nowrap;
}

.story-title {
  font-size: 1rem;
  font-weight: 700;
  margin: 0;
  color: var(--color-text);
}

.story-narrative {
  margin: 0 0 0.75rem;
  line-height: 1.7;
  color: var(--color-text);
}

.story-block {
  margin: 0 0 0.75rem;
}

.story-block ul {
  margin: 0;
  padding-left: 1.2rem;
  line-height: 1.7;
}

.story-block li { margin-bottom: 0.25rem; }

.backlog-sublabel {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin: 0 0 0.3rem;
}

/* Assumptions read as supporting context, not as requirements. */
.story-assumptions,
.story-notes {
  border-left: 2px solid var(--color-border);
  padding-left: 0.8rem;
  color: var(--color-muted);
}

.story-notes p { margin: 0; line-height: 1.7; }

/* ---- Status chips ---------------------------------------- */

.chip {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 4px;
  padding: 0.18rem 0.5rem;
  white-space: nowrap;
}

.chip-done { background: #dcf5e4; color: #14602f; }
.chip-in-progress { background: #dbe7ff; color: #1b3f8f; }
.chip-open { background: #eceff4; color: #4b5872; }
.chip-blocked { background: #fde2e1; color: #8a2019; }
.chip-other { background: var(--color-accent-soft); color: var(--color-accent-dark); }

/* ---- Appendix -------------------------------------------- */

.backlog-appendix-block h2 {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  margin: 2rem 0 0.5rem;
}

.backlog-appendix-block ul {
  margin: 0;
  padding-left: 1.25rem;
  line-height: 1.7;
}

.backlog-status {
  color: var(--color-muted);
  padding: 1.5rem 0;
}

@media (max-width: 640px) {
  .epic-progress { margin-left: 0; width: 100%; }
  .backlog-toolbar { align-items: flex-start; }
}

/* ---- Documentation login gate ------------------------------ */

.doc-gate {
  display: flex;
  justify-content: center;
  padding: 4rem 1.25rem;
}

/* [hidden] and .doc-gate{display:flex} are equal specificity, and this
   stylesheet loads after the browser's own UA stylesheet, so without this
   rule setting the hidden *attribute* in JS never actually hid the gate —
   it stayed visible, stacked above the unlocked content, after sign-in. */
.doc-gate[hidden] {
  display: none;
}

.doc-gate-card {
  max-width: 420px;
  text-align: center;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 2.5rem 2rem;
  background: var(--color-bg-alt);
}

.doc-gate-card h1 {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  margin: 0 0 0.75rem;
}

.doc-gate-copy {
  color: var(--color-muted);
  line-height: 1.6;
  margin: 0 0 1.5rem;
}

.doc-gate-button {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: #1b1f24;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 0.75rem 1.5rem;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
}

.doc-gate-button:hover {
  background: #30363d;
}

.doc-gate-status {
  min-height: 1.2em;
  margin: 1rem 0 0;
  font-size: 0.82rem;
  color: var(--color-muted);
}

.doc-session {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.8rem;
  color: var(--color-muted);
  margin-left: auto;
}

.doc-session-signout {
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-muted);
  cursor: pointer;
}

.doc-session-signout:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* ---- Backlog table ------------------------------------------ */

.backlog-table-block {
  margin-top: 2.5rem;
}

.backlog-table-intro {
  color: var(--color-muted);
  margin: 0 0 1rem;
}

.backlog-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.backlog-table th,
.backlog-table td {
  border: 1px solid var(--color-border);
  padding: 0.65rem 0.85rem;
  text-align: left;
  vertical-align: top;
}

.backlog-table th {
  background: var(--color-bg-alt);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.backlog-table-epic {
  font-weight: 600;
  white-space: nowrap;
}

.backlog-table-title {
  margin: 0 0 0.25rem;
  font-weight: 700;
}

.backlog-table-body {
  margin: 0;
  color: var(--color-muted);
  line-height: 1.6;
}

.backlog-table-date {
  white-space: nowrap;
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
}

/* Both are targets of a JS smooth-scroll from the toolbar; without this the
   sticky site header covers the first couple of lines after landing. */
#backlog,
#backlog-table-section {
  scroll-margin-top: 88px;
}

.backlog-filter-jump {
  margin-left: 0.5rem;
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.chip-type-technical-debt { background: #fde8d7; color: #8a4a10; }
.chip-type-feature-enhancement { background: #dbe7ff; color: #1b3f8f; }
.chip-type-feature-development { background: #e3dcff; color: #4b2d99; }

@media (max-width: 700px) {
  .backlog-table { display: block; overflow-x: auto; white-space: nowrap; }
  .backlog-table-body { white-space: normal; }
}

/* ---- Backlog editor (add/edit/delete, signed-in only) -------- */

.backlog-table-note {
  color: var(--color-muted);
  font-size: 0.82rem;
  font-style: italic;
  margin: 0 0 1rem;
}

.backlog-add-button {
  display: inline-block;
  margin-bottom: 1rem;
  border: 1px solid var(--color-accent);
  background: var(--color-bg);
  color: var(--color-accent);
  border-radius: 6px;
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

.backlog-add-button:hover {
  background: var(--color-accent);
  color: #fff;
}

.backlog-table-actions {
  white-space: nowrap;
}

.backlog-row-action {
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  border-radius: 4px;
  padding: 0.3rem 0.6rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-muted);
  cursor: pointer;
  margin-right: 0.4rem;
}

.backlog-row-action:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.backlog-row-danger:hover {
  border-color: #b3261e;
  color: #b3261e;
}

.backlog-editor-overlay {
  position: fixed;
  inset: 0;
  background: rgba(16, 28, 46, 0.55);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 4vh 1.25rem;
  z-index: 100;
  overflow-y: auto;
}

.backlog-editor-panel {
  background: var(--color-bg);
  border-radius: 10px;
  padding: 1.75rem;
  max-width: 480px;
  width: 100%;
  box-shadow: 0 20px 50px rgba(16, 28, 46, 0.35);
}

.backlog-editor-panel h3 {
  font-family: var(--font-serif);
  margin: 0 0 1.25rem;
}

.backlog-editor-field {
  display: block;
  margin-bottom: 1rem;
}

.backlog-editor-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 0.3rem;
}

.backlog-editor-field select,
.backlog-editor-field input,
.backlog-editor-field textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 0.5rem 0.65rem;
  font-size: 0.9rem;
  font-family: inherit;
  color: var(--color-text);
}

.backlog-editor-field textarea {
  resize: vertical;
}

.backlog-editor-actions {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.5rem;
}

.backlog-editor-save {
  background: var(--color-accent);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 0.6rem 1.2rem;
  font-weight: 600;
  cursor: pointer;
}

.backlog-editor-save:disabled {
  opacity: 0.6;
  cursor: default;
}

.backlog-editor-cancel {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 0.6rem 1.2rem;
  font-weight: 600;
  color: var(--color-muted);
  cursor: pointer;
}

.backlog-editor-status {
  min-height: 1.2em;
  margin: 0.75rem 0 0;
  font-size: 0.82rem;
  color: #b3261e;
}