/*
 * Agentlab Docs — Release Notes page
 *
 * A timeline changelog: version-group sections, per-item change tags,
 * a sticky version sidebar and a seen-state hero chip. Built on the
 * karli.css v2-balanced tokens; interactivity layered by release-notes.js
 * (the markup degrades to headings + tagged bullets without JS).
 */

/* ==========================================================================
   TOKENS — change-tag palette (light + dark)
   ========================================================================== */

[data-md-color-scheme="karli-light"] {
  --rn-new-bg:     #e3f5ea;  --rn-new-fg:     #237a4c;
  --rn-improved-bg:#eef0fd;  --rn-improved-fg:#3b46b8;
  --rn-fixed-bg:   #fdf3e2;  --rn-fixed-fg:   #9a6608;
  --rn-changed-bg: #f1f3f8;  --rn-changed-fg: #5a6379;
  --rn-dot-ring:   #c9cfe6;
  --rn-line:       #e2e5f2;
  --rn-marker-bg:  #ffffff;
}

[data-md-color-scheme="karli-dark"] {
  --rn-new-bg:     rgba(46,158,99,.16);  --rn-new-fg:     #6ecf8a;
  --rn-improved-bg:#2a3050;              --rn-improved-fg:#a8b5d8;
  --rn-fixed-bg:   #2e2518;              --rn-fixed-fg:   #d4a54a;
  --rn-changed-bg: #222634;              --rn-changed-fg: #b0bbd0;
  --rn-dot-ring:   #3a4670;
  --rn-line:       #2a2f3e;
  --rn-marker-bg:  #1b1f2a;
}

:root {
  --rn-icon-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5'/%3E%3Ccircle cx='12' cy='7.6' r='.7' fill='%23000' stroke='none'/%3E%3C/svg%3E");
  --rn-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E");
}

/* ==========================================================================
   HERO — lead paragraph + version chip
   ========================================================================== */

.md-typeset .rn-hero {
  margin: 0 0 1.4rem;
  max-width: 40rem;
}

.md-typeset .rn-hero > p {
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--md-default-fg-color--light);
  margin: 0 0 0.9rem;
}

.rn-hero__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.36rem 0.8rem;
  background: var(--v2-bg-card);
  border: 1px solid var(--v2-border);
  border-radius: var(--v2-r-pill);
  box-shadow: var(--v2-shadow-sm);
  font-size: 0.78rem;
  vertical-align: middle;
}

.rn-hero__ver {
  font-family: "JetBrains Mono", monospace;
  font-weight: 500;
  color: var(--md-primary-fg-color);
}

.rn-hero__sep {
  width: 1px;
  height: 0.85rem;
  background: var(--v2-border);
}

.rn-hero__date { color: var(--md-default-fg-color--lighter); }

/* Pulsing status dot — green + animated when unseen, grey when seen */
.rn-dot {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: var(--v2-r-pill);
  background: #2f9e63;
  flex: none;
}

.rn-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--v2-r-pill);
  background: #2f9e63;
  animation: rn-pulse 2.4s ease-out infinite;
}

.rn-hero__chip[data-seen="1"] .rn-dot { background: var(--rn-dot-ring); }
.rn-hero__chip[data-seen="1"] .rn-dot::after { display: none; }

@keyframes rn-pulse {
  0%   { transform: scale(1);   opacity: 0.5; }
  70%  { transform: scale(2.4); opacity: 0;   }
  100% { transform: scale(2.4); opacity: 0;   }
}

/* ==========================================================================
   EXPLAINER — collapsible "How Agentlab versions work" card
   ========================================================================== */

.md-typeset details.rn-explainer {
  max-width: 40rem;
  margin: 0 0 2.4rem;
  border: 1px solid var(--v2-border);
  border-left-width: 1px;               /* override admonition left accent */
  border-radius: var(--v2-r-card);
  background: var(--v2-bg-card);
  box-shadow: var(--v2-shadow-sm);
  overflow: hidden;
}

.md-typeset details.rn-explainer > summary {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.1rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--md-default-fg-color);
  background: transparent;
  cursor: pointer;
  list-style: none;
}

.md-typeset details.rn-explainer > summary::-webkit-details-marker { display: none; }
.md-typeset details.rn-explainer > summary::before {
  content: "";
  position: static;                     /* override Material's absolute marker */
  top: auto;
  left: auto;
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  background: currentColor;
  color: var(--md-default-fg-color--lighter);
  -webkit-mask: var(--rn-icon-info) center / contain no-repeat;
  mask: var(--rn-icon-info) center / contain no-repeat;
}
.md-typeset details.rn-explainer > summary::after {
  content: "";
  position: static;                     /* override Material's absolute marker */
  top: auto;
  right: auto;
  flex: none;
  width: 1.05rem;
  height: 1.05rem;
  margin-left: auto;
  background: currentColor;
  color: var(--md-default-fg-color--lighter);
  -webkit-mask: var(--rn-icon-chevron) center / contain no-repeat;
  mask: var(--rn-icon-chevron) center / contain no-repeat;
  transition: transform 0.2s;
}
.md-typeset details.rn-explainer[open] > summary::after { transform: rotate(180deg); }

.md-typeset details.rn-explainer > :not(summary) {
  margin: 0 1.1rem;
}
.md-typeset details.rn-explainer > p {
  padding: 0;
  font-size: 0.9rem;
  line-height: 1.62;
  color: var(--md-default-fg-color--light);
}
.md-typeset details.rn-explainer > p:first-of-type { padding-top: 0.2rem; }
.md-typeset details.rn-explainer > p:last-child { padding-bottom: 1rem; margin-bottom: 0; }

/* ==========================================================================
   CHANGE TAGS — fixed-width pill at the start of each item
   ========================================================================== */

.md-typeset .rn-tag {
  display: inline-block;
  flex: none;
  width: 4.9rem;
  padding: 0.2rem 0.3rem;
  border-radius: var(--v2-r-pill);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-align: center;
  line-height: 1.2;
  white-space: nowrap;
}

.rn-tag--new     { background: var(--rn-new-bg);     color: var(--rn-new-fg); }
.rn-tag--improved{ background: var(--rn-improved-bg);color: var(--rn-improved-fg); }
.rn-tag--fixed   { background: var(--rn-fixed-bg);   color: var(--rn-fixed-fg); }
.rn-tag--changed { background: var(--rn-changed-bg); color: var(--rn-changed-fg); }

/* ==========================================================================
   GROUPS — section header with hairline rule + "on Langflow X" badge
   ========================================================================== */

.rn-groups { margin-top: 2rem; }

.rn-group { margin-bottom: 2.2rem; }

.rn-group__head {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  width: 100%;
  padding: 0.4rem 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  color: inherit;
  font: inherit;
}

.rn-group__label {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--md-default-fg-color--lighter);
  white-space: nowrap;
}

.rn-group__rule {
  flex: 1;
  height: 1px;
  background: var(--rn-line);
}

.rn-group__base {
  flex: none;
  font-size: 0.72rem;
  color: var(--md-default-fg-color--lighter);
  background: var(--v2-bg-card);
  border: 1px solid var(--v2-border);
  border-radius: var(--v2-r-pill);
  padding: 0.2rem 0.7rem;
  white-space: nowrap;
}

.rn-group__count {
  flex: none;
  font-size: 0.72rem;
  color: var(--md-default-fg-color--lighter);
  white-space: nowrap;
}

.rn-group__caret {
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  color: var(--md-default-fg-color--lighter);
  transition: transform 0.2s;
}
.rn-group--open .rn-group__caret { transform: rotate(0deg); }
.rn-group:not(.rn-group--open) .rn-group__caret { transform: rotate(-90deg); }

.rn-group:not(.rn-group--open) .rn-group__body { display: none; }
.rn-group--open .rn-group__count { display: none; }

/* ==========================================================================
   TIMELINE — vertical rail with a dot per release
   ========================================================================== */

.rn-timeline {
  position: relative;
  margin-top: 1.6rem;
}

.rn-timeline::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 0.6rem;
  bottom: 1.2rem;
  width: 2px;
  background: var(--rn-line);
}

.rn-release {
  display: flex;
  gap: 1.4rem;
  padding-bottom: 2rem;
  scroll-margin-top: 7.5rem;
}
.rn-release:last-child { padding-bottom: 0; }

.rn-release__marker {
  flex: none;
  width: 18px;
  display: flex;
  justify-content: center;
  padding-top: 0.5rem;
}

.rn-release__marker .rn-mark {
  width: 14px;
  height: 14px;
  border-radius: var(--v2-r-pill);
  background: var(--rn-marker-bg);
  border: 3px solid var(--rn-dot-ring);
}

.rn-release--latest .rn-release__marker .rn-mark {
  width: 18px;
  height: 18px;
  border: 4px solid var(--md-primary-fg-color);
  box-shadow: 0 0 0 5px var(--md-accent-fg-color--transparent);
}

.rn-release__content { flex: 1; min-width: 0; }

.rn-release__head {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin-bottom: 0.9rem;
}

.md-typeset .rn-release__ver {
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
  padding: 0;
  border: none;
}

.rn-release__date {
  font-size: 0.85rem;
  color: var(--md-default-fg-color--lighter);
}

.rn-latest {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: lowercase;
  color: var(--rn-new-fg);
  background: var(--rn-new-bg);
  padding: 0.2rem 0.6rem;
  border-radius: var(--v2-r-pill);
}

/* Items list */
.md-typeset .rn-release__content ul,
.md-typeset ul.rn-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.md-typeset .rn-release__content li {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--md-default-fg-color--light);
}

.md-typeset .rn-release__content li > .rn-tag { margin-top: 0.15rem; }
.md-typeset .rn-item__body { flex: 1; min-width: 0; }
.md-typeset .rn-release__content li strong { color: var(--md-default-fg-color); font-weight: 600; }
.md-typeset .rn-release__content li a { white-space: nowrap; font-weight: 500; }

/* ==========================================================================
   FOOTER NOTE
   ========================================================================== */

.md-typeset .rn-footer-note {
  max-width: 40rem;
  margin: 1rem 0 0;
  padding: 1.1rem 1.3rem;
  background: var(--v2-bg-card);
  border: 1px solid var(--v2-border);
  border-radius: var(--v2-r-card);
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--md-default-fg-color--light);
}
.md-typeset .rn-footer-note p { margin: 0; }

/* ==========================================================================
   VERSION SIDEBAR — injected into the secondary (right) sidebar slot
   ========================================================================== */

.rn-versions { padding: 0.4rem 0.2rem 0; }

.rn-versions__title {
  font-size: 0.688rem;
  font-weight: 700;
  letter-spacing: 0.06rem;
  text-transform: uppercase;
  color: var(--md-default-fg-color--lighter);
  padding: 0 0.4rem 0.6rem;
}

.rn-versions__group { margin-bottom: 0.2rem; }

.rn-versions__grouphead {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  width: 100%;
  padding: 0.35rem 0.4rem;
  background: none;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  color: inherit;
  font: inherit;
  text-align: left;
  transition: background 0.15s;
}
.rn-versions__grouphead:hover { background: var(--v2-bg-tint); }

.rn-versions__grouplabel {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--md-default-fg-color--lighter);
}
.rn-versions__groupbase {
  flex: 1;
  font-size: 0.7rem;
  color: var(--md-default-fg-color--lighter);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rn-versions__caret {
  flex: none;
  width: 0.85rem;
  height: 0.85rem;
  color: var(--md-default-fg-color--lighter);
  transition: transform 0.2s;
}
.rn-versions__group:not(.rn-versions__group--open) .rn-versions__caret { transform: rotate(-90deg); }
.rn-versions__group:not(.rn-versions__group--open) .rn-versions__list { display: none; }

.rn-versions__list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 0.15rem 0 0.3rem;
}

.rn-versions__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.4rem 0.7rem;
  border-radius: 10px;
  text-decoration: none;
  color: var(--md-default-fg-color--light);
  transition: background 0.15s, color 0.15s;
}
.rn-versions__row:hover { background: var(--v2-bg-tint); }

.rn-versions__rowver {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.76rem;
  font-weight: 400;
}
.rn-versions__rowdate {
  font-size: 0.7rem;
  color: var(--md-default-fg-color--lighter);
  white-space: nowrap;
}

.rn-versions__row--active {
  background: var(--v2-primary-soft);
}
.rn-versions__row--active .rn-versions__rowver {
  color: var(--md-primary-fg-color);
  font-weight: 500;
}

/* Release-notes page layout: the version nav takes over the LEFT sidebar
   (replacing the near-empty site nav), and the right-hand TOC column is
   removed so the timeline gets the full content width — matching the design.
   Scoped to the desktop breakpoint where the sidebars are actual columns. */
@media screen and (min-width: 76.25em) {
  .rn-page .md-sidebar--primary .md-nav--primary { display: none; }
  .rn-page .md-sidebar--secondary { display: none; }
}

/* Below that breakpoint the left sidebar is the mobile nav drawer — leave it
   as the site navigation and keep the version panel out of it. */
@media screen and (max-width: 76.2375em) {
  .rn-page .rn-versions { display: none; }
}

/* ==========================================================================
   HEADER CHIP — status dot + version + New/Notes label
   A bordered pill, deliberately distinct from the round icon toggles.
   ========================================================================== */

.v2-header-capsule .v2-relnotes-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 6px 12px;
}

.v2-relnotes-btn__dot {
  position: relative;
  width: 7px;
  height: 7px;
  border-radius: var(--v2-r-pill);
  background: #2f9e63;
  flex: none;
}
.v2-relnotes-btn__dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--v2-r-pill);
  background: #2f9e63;
  animation: rn-pulse 2.4s ease-out infinite;
}
/* Seen state — grey, static dot */
.v2-relnotes-btn:not([data-unseen]) .v2-relnotes-btn__dot { background: var(--rn-dot-ring); }
.v2-relnotes-btn:not([data-unseen]) .v2-relnotes-btn__dot::after { display: none; }

.v2-relnotes-btn__ver {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--md-primary-fg-color);
}
.v2-relnotes-btn__sep {
  width: 1px;
  height: 0.8rem;
  background: var(--v2-border);
  flex: none;
}
.v2-relnotes-btn__label {
  font-size: 0.66rem;
  font-weight: 600;
  color: var(--md-default-fg-color--light);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media screen and (max-width: 44rem) {
  .md-typeset .rn-tag { width: 4.4rem; font-size: 0.64rem; }
  .rn-release { gap: 1rem; }
  .md-typeset .rn-release__ver { font-size: 1.25rem; }
}