/* Status badges for review trackers */
.status-open,
.status-closed,
.status-progress,
.status-planning {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 4px;
  color: #fff;
  font-size: 0.82em;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}

.status-open     { background: #dc3545; }  /* red    */
.status-closed   { background: #28a745; }  /* green  */
.status-progress { background: #6f42c1; }  /* purple */
.status-planning { background: #0d6efd; }  /* blue   */

/* Segmented progress bar */
.progress-track {
  display: flex;
  height: 28px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: #e9ecef;
  margin: 14px 0 8px 0;
}

.progress-seg {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 600;
  font-size: 0.82em;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}

.progress-seg-closed   { background: #28a745; }
.progress-seg-progress { background: #6f42c1; }
.progress-seg-open     { background: #dc3545; }

.progress-label {
  font-size: 0.88em;
  color: var(--md-default-fg-color--light, #555);
  margin: 0 0 18px 0;
}

/* Small legend for a progress bar */
.progress-legend {
  display: flex;
  gap: 14px;
  font-size: 0.85em;
  margin: 6px 0 18px 0;
  flex-wrap: wrap;
}

.progress-legend-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  margin-right: 5px;
  vertical-align: middle;
}

/* Dark-mode friendliness — let Material's slate palette override track color */
[data-md-color-scheme="slate"] .progress-track {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.1);
}

/* ==========================================================================
   Dark-mode mermaid overrides
   The inline %%{init}%% blocks set white-ish fills and dark text for light
   mode. In slate (dark) mode those become illegible. Invert with filter +
   text-colour forcing. Applies only when the user selects dark theme.
   ========================================================================== */
[data-md-color-scheme="slate"] .mermaid {
  /* Lift fills toward visible brightness and keep text readable */
  filter: brightness(0.92) contrast(1.05);
}

[data-md-color-scheme="slate"] .mermaid .nodeLabel,
[data-md-color-scheme="slate"] .mermaid .edgeLabel,
[data-md-color-scheme="slate"] .mermaid .edgeLabel p,
[data-md-color-scheme="slate"] .mermaid .cluster-label,
[data-md-color-scheme="slate"] .mermaid .cluster-label span,
[data-md-color-scheme="slate"] .mermaid text {
  color: #e8eaed !important;
  fill: #e8eaed !important;
}

/* Give edge labels a subtle backing so they read on any fill */
[data-md-color-scheme="slate"] .mermaid .edgeLabel {
  background-color: rgba(30, 30, 30, 0.78) !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
}

/* Default/cluster backgrounds — softer dark fill instead of the pure pastels */
[data-md-color-scheme="slate"] .mermaid .cluster rect {
  fill: rgba(255, 255, 255, 0.04) !important;
  stroke: rgba(255, 255, 255, 0.25) !important;
}

/* Keep arrow/edge strokes visible on slate background */
[data-md-color-scheme="slate"] .mermaid .flowchart-link,
[data-md-color-scheme="slate"] .mermaid .messageLine0,
[data-md-color-scheme="slate"] .mermaid .messageLine1,
[data-md-color-scheme="slate"] .mermaid path.path {
  stroke: #b0bec5 !important;
}

/* Mindmaps — force readable label color */
[data-md-color-scheme="slate"] .mermaid .mindmap-node text,
[data-md-color-scheme="slate"] .mermaid .mindmap-node tspan {
  fill: #e8eaed !important;
}

/* Pie-chart legend text */
[data-md-color-scheme="slate"] .mermaid .legend text,
[data-md-color-scheme="slate"] .mermaid .pieTitleText,
[data-md-color-scheme="slate"] .mermaid .slice {
  fill: #e8eaed !important;
}

/* ==========================================================================
   Countdown card (home page)
   ========================================================================== */
.countdown-card {
  display: block;
  padding: 20px 24px;
  margin: 18px 0 24px 0;
  background: linear-gradient(135deg, #3f51b5 0%, #5c6bc0 100%);
  color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(63, 81, 181, 0.25);
  text-decoration: none !important;
}

.countdown-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(63, 81, 181, 0.35);
  transition: all 0.15s ease;
}

.countdown-number {
  font-size: 3.2em;
  font-weight: 700;
  line-height: 1;
  color: #fff;
}

.countdown-label {
  font-size: 0.95em;
  opacity: 0.9;
  margin-top: 4px;
}

[data-md-color-scheme="slate"] .countdown-card {
  background: linear-gradient(135deg, #303f9f 0%, #3949ab 100%);
}

/* Scroll progress indicator — thin bar fixed at top, fills as page scrolls */
#scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: var(--md-accent-fg-color, #3f51b5);
  z-index: 10000;
  transition: width 0.08s linear;
  pointer-events: none;
}

/* Save-as-PDF button — fixed top-right, triggers window.print() */
#save-pdf-btn {
  position: fixed;
  top: 60px;
  right: 16px;
  z-index: 9000;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1.5px solid var(--md-primary-fg-color, #3f51b5);
  border-radius: 999px;
  background: var(--md-default-bg-color, #fff);
  color: var(--md-primary-fg-color, #3f51b5);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  transition: transform 0.1s ease, background 0.1s ease, box-shadow 0.1s ease;
}

#save-pdf-btn:hover {
  background: var(--md-primary-fg-color, #3f51b5);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
}

#save-pdf-btn:active {
  transform: translateY(0);
}

#save-pdf-btn .pdf-icon {
  font-size: 14px;
  line-height: 1;
}

/* Small screens — shrink to icon-only pill */
@media (max-width: 600px) {
  #save-pdf-btn {
    top: 52px;
    right: 10px;
    padding: 7px 10px;
  }
  #save-pdf-btn .pdf-label {
    display: none;
  }
}

/* Print-to-PDF stylesheet — cleans the layout when the user prints / saves PDF */
@media print {
  /* Hide site chrome */
  .md-header,
  .md-tabs,
  .md-sidebar,
  .md-footer,
  .md-search,
  #scroll-progress,
  #save-pdf-btn,
  .md-top,
  .md-content__button {
    display: none !important;
  }

  /* Expand main content to full width */
  .md-main__inner,
  .md-content,
  .md-content__inner,
  .md-grid {
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .md-content__inner {
    padding: 16px 24px !important;
  }

  /* Avoid breaking tables, figures, mermaid diagrams across pages */
  table, figure, .mermaid, pre {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  /* Readable body */
  body {
    font-size: 11pt;
    line-height: 1.45;
    color: #000;
    background: #fff !important;
  }

  /* Keep link URLs visible after print */
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #555;
    word-break: break-all;
  }
  /* Don't echo internal anchor links */
  a[href^="#"]::after,
  a[href^="mailto:"]::after {
    content: "";
  }

  /* Heading sizes */
  h1 { font-size: 20pt; margin-top: 0; }
  h2 { font-size: 15pt; margin-top: 18pt; }
  h3 { font-size: 13pt; }
}

/* ==================================================================
   References (CSL bibliography) — hanging-indent + hover + jump flash
   ================================================================== */

/* Each .csl-entry is a Quarto/pandoc citeproc reference item. The paragraph
   inside contains a .csl-left-margin span (the [N] label) and a
   .csl-right-inline span (the author/title/journal text). */
.csl-bib-body { counter-reset: ref-index; }

.csl-bib-body .csl-entry {
  padding: 0.6rem 0.6rem 0.6rem 3.2rem;
  text-indent: -3.2rem;
  line-height: 1.55;
  border-bottom: 1px dashed var(--md-default-fg-color--lightest);
  transition: background 0.2s ease-out;
}

.csl-bib-body .csl-entry:last-child {
  border-bottom: none;
}

/* Fixed-width number column on the left */
.csl-left-margin {
  display: inline-block;
  width: 2.6rem;
  padding-right: 0.4rem;
  font-family: var(--md-code-font-family);
  font-size: 0.88em;
  color: var(--md-default-fg-color--light);
  text-align: right;
  vertical-align: baseline;
}

.csl-right-inline {
  font-size: 0.94em;
}

.csl-right-inline em,
.csl-right-inline i {
  color: var(--md-default-fg-color);
}

/* In-text citation links: looser but distinct, no underline until hover */
.md-content a[href^="#ref-"] {
  text-decoration: none;
  font-weight: 500;
  padding: 0 2px;
  border-radius: 2px;
  transition: background-color 0.15s ease-out, color 0.15s ease-out;
}

.md-content a[href^="#ref-"]:hover {
  background: var(--md-accent-fg-color--transparent, rgba(83, 109, 254, 0.12));
  color: var(--md-accent-fg-color, #536dfe);
  text-decoration: none;
}

/* When a reader clicks an in-text citation and lands on its reference,
   flash the target so it's visible against the rest of the list. */
.csl-entry:target {
  background: var(--md-accent-fg-color--transparent, rgba(83, 109, 254, 0.14));
  border-radius: 4px;
  animation: csl-target-flash 2.4s ease-out forwards;
}

@keyframes csl-target-flash {
  0%   { background-color: rgba(83, 109, 254, 0.28); }
  60%  { background-color: rgba(83, 109, 254, 0.18); }
  100% { background-color: transparent; }
}

/* References section heading — give it a clear visual break */
.md-content h1#references,
.md-content h2#references,
.md-content h1#bibliography,
.md-content h2#bibliography {
  margin-top: 3rem;
  padding-top: 1rem;
  border-top: 2px solid var(--md-primary-fg-color);
}

/* ==================================================================
   Gantt legend symbols — visual bars + diamonds that match mermaid
   ================================================================== */
.gantt-legend-bar {
  display: inline-block;
  width: 56px;
  height: 14px;
  border-radius: 2px;
  vertical-align: middle;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
}

.gantt-legend-bar.active    { background: #9ac1e8; }
.gantt-legend-bar.crit      { background: #ff6b6b; }
.gantt-legend-bar.done      { background: #cfd8dc; }
.gantt-legend-bar.default   { background: #7eaed6; }

.gantt-legend-diamond {
  display: inline-block;
  width: 14px;
  height: 14px;
  background: #455a64;
  transform: rotate(45deg);
  vertical-align: middle;
  margin: 0 20px 0 20px;
}

.gantt-legend-diamond.crit { background: #d32f2f; }

/* Dark-mode palette adjustment */
[data-md-color-scheme="slate"] .gantt-legend-bar.active    { background: #4a7fb3; }
[data-md-color-scheme="slate"] .gantt-legend-bar.crit      { background: #c44545; }
[data-md-color-scheme="slate"] .gantt-legend-bar.done      { background: #607d8b; }
[data-md-color-scheme="slate"] .gantt-legend-bar.default   { background: #547fa1; }
[data-md-color-scheme="slate"] .gantt-legend-diamond       { background: #b0bec5; }
[data-md-color-scheme="slate"] .gantt-legend-diamond.crit  { background: #ef5350; }