/* Steadybit design tokens — from ui-components-lib/lib/tokens.ts and platform-ui/src/styles.v2/theme.js */
:root {
  --slate: #5B48CA;          /* primary / purple700 */
  --slate-dark: #0F054C;
  --slate-light: #ECE9FF;
  --purple-100: #F5F2FF;     /* purple100 */
  --purple-200: #D9D3FA;     /* platform badge + inline-code chip bg */
  --purple-800: #3B2F83;     /* badge text */
  --purple-900: #1B163D;
  --teal: #21B6AE;           /* secondary / cyan700 */
  --cyan-400: #81E2DD;       /* agent badge */
  --coral: #F94D4C;
  --aqua-700: #419FF6;
  --aqua-300: #A7D9FF;
  --aqua-200: #C6E7FF;       /* extension badge — lighter for better contrast with purple text */
  --neutral-800: #1D2632;    /* primary text */
  --neutral-700: #424E5C;
  --neutral-600: #677586;
  --neutral-500: #8F9DAD;
  --neutral-400: #B0BAC7;    /* placeholder / muted */
  --neutral-300: #D8E1EB;
  --neutral-200: #E8EDF4;
  --neutral-150: #EEF2F8;
  --neutral-100: #F4F7FB;    /* surface/highlight — card bg */
  --neutral-000: #FFFFFF;
  --border-default: #CCD4DD;
  --shadow-small: 0px 1px 3px rgba(56, 73, 97, 0.1);
  --shadow-medium: 0px 1px 2px rgba(21, 31, 45, 0.15), 0px 4px 8px rgba(21, 31, 45, 0.05);
  --shadow-app: 0px 1px 3px rgba(44, 68, 106, 0.15);  /* shadow-application--small */
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Inter", sans-serif;
  font-size: 15px;
  line-height: 1.5;
  background: var(--neutral-000);
  color: var(--neutral-800);
}

.container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Signature Steadybit navigation gradient */
.site-header {
  background: linear-gradient(180deg, var(--slate) 0%, var(--neutral-800) 100%);
  color: var(--neutral-000);
  padding: 2.5rem 0 1.75rem;
}
.site-header .logo { display: block; width: 162px; height: 36px; color: var(--neutral-000); margin-bottom: 1.25rem; }
.site-header .logo svg { width: 100%; height: 100%; }
.site-header h1 { margin: 0 0 .25rem; font-size: 24px; font-weight: 700; line-height: 31px; }
.site-header p { margin: 0; color: var(--neutral-300); }
#subscribe-toggle {
  margin-left: auto; /* pin to the far right of the filter bar */
  background: linear-gradient(180deg, var(--neutral-000) 0%, var(--neutral-100) 100%);
  box-shadow: inset 0 0 0 1px var(--border-default);
  border-radius: 4px;
  color: var(--neutral-700);
  font-weight: 600;
}
/* Secondary button fills to the primary look on hover (slate + white). */
#subscribe-toggle:hover { background: var(--slate); color: var(--neutral-000); box-shadow: var(--shadow-app); }
#subscribe-toggle.active { background: var(--slate); color: var(--neutral-000); box-shadow: none; }
.email-subscribe { position: relative; }
.filters .email-subscribe > button {
  background: var(--slate);
  color: var(--neutral-000);
  border-radius: 4px;
  box-shadow: var(--shadow-app);
  font-weight: 600;
}
.filters .email-subscribe > button:hover { background: var(--slate-dark); }
.filters .ico { width: 16px; height: 16px; flex-shrink: 0; }
.email-subscribe .panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 16rem;
  background: var(--neutral-000);
  border: 1px solid var(--neutral-300);
  border-radius: 4px;
  box-shadow: var(--shadow-medium);
  padding: .75rem .9rem;
  z-index: 3;
  color: var(--neutral-700);
}
.email-subscribe .panel p { margin: 0 0 .5rem; font-size: 13px; }
.email-option {
  display: block;
  margin: .25rem 0 0 !important;
  padding: .35rem .75rem;
  border-radius: 4px;
  background: var(--slate);
  color: var(--neutral-000) !important;
  text-decoration: none !important;
  font-size: 13px;
  font-weight: 500;
  text-align: center;
}
.email-option:hover { background: var(--slate-dark); }
.email-option em { font-weight: 400; opacity: .85; }

.header-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.25rem;
  font-size: 13px;
  color: var(--neutral-300);
}
.versions { display: inline-flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.versions a {
  color: var(--neutral-000);
  text-decoration: none;
  font-weight: 600;
}
.versions a:hover { text-decoration: underline; }
.versions span { color: var(--neutral-400); }
.status-link {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: var(--neutral-300);
  text-decoration: none;
}
.status-link:hover { color: var(--neutral-000); }
.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--neutral-500);
}
.status-dot.ok { background: #2ECC71; }
.status-dot.warn { background: #F79009; }
.status-dot.down { background: var(--coral); }

.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  padding: 1rem 0;
  position: sticky;
  top: 0;
  background: var(--neutral-000);
  border-bottom: 1px solid var(--neutral-200);
  z-index: 20;
}
/* Filter pills — squared-tag palette; the active/selected one is primary purple. */
.filters button {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  height: 32px;
  padding: 0 1rem;
  border: none;
  border-radius: 999px;
  background: var(--neutral-200);
  color: var(--neutral-700);
  cursor: pointer;
  transition: background .12s, color .12s, box-shadow .12s;
}
.filters button:hover { background: var(--neutral-300); }
.filters button .caret { width: 16px; height: 16px; }
.filters button:focus { outline: none; }
.filters button:focus-visible { outline: 2px solid var(--slate); outline-offset: 2px; }
/* Two states only — grey = unselected, purple = selected. */
.filters button.active,
.filters button.toggle.on { background: var(--slate); color: var(--neutral-000); }
.filters button.active:hover,
.filters button.toggle.on:hover { background: var(--slate-dark); }
/* In the default "All" view the group toggles stay grey — "All" is the selected
   pill; a group only turns purple once you narrow the selection away from All. */
.filters:has(#filter-all.active) button.toggle.on { background: var(--neutral-200); color: var(--neutral-700); }
.filters:has(#filter-all.active) button.toggle.on:hover { background: var(--neutral-300); }

/* Search field — leading icon + input. */
.search-field {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 12rem;
  height: 32px;
}
.search-field .ico {
  position: absolute;
  left: 8px;
  width: 16px;
  height: 16px;
  color: var(--neutral-600);
  pointer-events: none;
}
.search-field input {
  font: inherit;
  font-size: 13px;
  width: 100%;
  height: 100%;
  padding: 0 .6rem 0 30px;
  border: 1px solid var(--border-default);
  border-radius: 2px;
  background: var(--neutral-000);
  color: var(--neutral-800);
}
.search-field input::placeholder { color: var(--neutral-400); }
.search-field input:focus { outline: none; border-color: var(--slate); box-shadow: 0 0 0 3px rgba(91, 72, 202, 0.25); }

.multiselect { position: relative; }
.multiselect .panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 20rem;
  max-height: 22rem;
  overflow-y: auto;
  background: var(--neutral-000);
  border: 1px solid var(--neutral-300);
  border-radius: 4px;
  box-shadow: var(--shadow-medium);
  padding: .6rem;
  z-index: 2;
}
/* Reuse the release-notes search field (icon + placeholder colour) in the panel. */
.multiselect .panel .search-field { max-width: none; width: 100%; margin-bottom: .4rem; }
.option {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .2rem .25rem;
  font-size: 13px;
  color: var(--neutral-700);
  cursor: pointer;
  border-radius: 4px;
}
.option:hover { background: var(--neutral-100); }
.option.master { font-weight: 600; border-bottom: 1px solid var(--neutral-200); margin-bottom: .25rem; padding-bottom: .45rem; }
.option input { accent-color: var(--slate); }

.subscribe-panel {
  border: 1px solid var(--neutral-300);
  border-radius: 4px;
  box-shadow: var(--shadow-small);
  background: var(--neutral-100);
  padding: .9rem 1rem;
  margin-top: 1rem;
  font-size: 13px;
  color: var(--neutral-700);
}
.subscribe-panel p { margin: 0 0 .5rem; }
.subscribe-panel ul { margin: 0 0 .6rem; padding-left: 1.25rem; }
.subscribe-panel li { margin: .15rem 0; font-family: "Fira Code", monospace; font-size: 12px; }
.subscribe-panel a { color: var(--slate); }
.subscribe-panel .option { display: inline-flex; margin-bottom: .6rem; }
.subscribe-panel button {
  display: block;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: .35rem .9rem;
  border: none;
  border-radius: 4px;
  background: var(--slate);
  color: var(--neutral-000);
  cursor: pointer;
}
.subscribe-panel button:hover { background: var(--slate-dark); }

/* --- Release timeline ----------------------------------------------------- */
/* One row per day (see GROUPING in build.mjs): a sticky date chip + connector
   line on the left, the day's release cards on the right. */
#releases { position: relative; padding: .5rem 0 4rem; }
/* Continuous timeline line, sitting behind the date chips and running through
   the horizontal centre of the 84px date column (84 / 2 = 42px). */
#releases::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 42px;
  width: 1px;
  background: var(--neutral-200);
  z-index: 0;
}

.timeline-day {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  column-gap: 40px;
  padding: 1.5rem 0;
}
/* display:grid would otherwise override the [hidden] attribute the filter JS
   sets on days with no matching release — keep hidden days hidden. */
.timeline-day[hidden] { display: none; }
/* Chip centred on the connector line (align-items: center) and vertically
   centred against the 24px header row (top offset = (24-20)/2 = 2px) until it pins. */
.day-marker {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 2px;
}
/* The chip pins 16px below the sticky filter bar (65px tall) while its day's
   cards scroll. */
.day-chip {
  position: sticky;
  top: 81px;
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: 4px;
  background: var(--neutral-200);
  color: var(--neutral-700);
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
}

.day-releases { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 3rem; min-width: 0; }

.release { min-width: 0; scroll-margin-top: 5rem; /* keep anchor targets clear of the sticky filter bar */ }
.release header { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .5rem; }
/* Release caption — Headway-style heading instead of a pill badge. */
.release-title { margin: 0; font-size: 18px; font-weight: 700; line-height: 24px; }
.release-title a { color: var(--neutral-800); text-decoration: none; }
.release-title a:hover { color: var(--slate); }

/* Deep link: copies the release's anchor URL; only revealed on hover. */
.copy-link {
  display: inline-flex;
  align-items: center;
  border: none;
  background: none;
  padding: 2px;
  cursor: pointer;
  color: var(--neutral-500);
  opacity: 0;
  transition: opacity .12s, color .12s;
}
.copy-link svg { width: 14px; height: 14px; }
.release header:hover .copy-link, .copy-link:focus-visible { opacity: 1; }
.copy-link:hover { color: var(--slate); }
.copy-link.copied { opacity: 1; color: var(--slate); }
.copy-link.copied::after { content: "Link copied"; font-size: 11px; font-weight: 500; margin-left: 4px; }

/* In-text category labels — the "### New" sub-headers render as Headway-style
   pastel chips inside the notes (no filtering, purely visual). */
.release .body h3.cat {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: 100px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .02em;
  margin: .6rem 0 .25rem;
}
.cat-new { background: #D8FAE7; color: #007E36; }
.cat-improvement { background: #E8F6FF; color: #1B5E9E; }
.cat-fix { background: #ECE9FF; color: #3B2F83; }
.cat-security { background: #FFD3D2; color: #A80807; }
.cat-breaking { background: #FEF5D9; color: #B54708; }
.cat-dependencies { background: #EEF2F8; color: #424E5C; }
.cat-note { background: #EEF2F8; color: #424E5C; }
.cat-labs { background: #F3E8FF; color: #7C3AED; }

/* Bullets use a custom dot (no fractional list padding, same dot everywhere). */
.release .body ul { list-style: none; margin: 0; padding-left: 0; }
.release .body li { position: relative; margin: .1rem 0; padding-left: 1.1rem; }
.release .body li::before { content: "•"; position: absolute; left: 0; }
.release .body p { margin: 0 0 .3rem; }
.release .body p:last-child { margin-bottom: 0; }
/* Non-category sub-headings inside release notes — match body size. */
.release .body :is(h1, h2, h3, h4, h5, h6):not(.cat) {
  font-size: 15px;
  font-weight: 600;
  margin: .5rem 0 .2rem;
}
/* Emphasis/labels in content are semibold (600), not bold (700). */
.release strong { font-weight: 600; }
/* Hide markdown horizontal rules (`---`) from release notes. */
.release hr { display: none; }

.release .body { font-size: 15px; line-height: 1.5; color: var(--neutral-800); }
/* Blockquote notes/asides — drop the UA 40px indent. The quote line aligns
   with the content's left edge; the text is indented to the right of the line. */
.release blockquote {
  margin: .25rem 0 .5rem;
  padding-left: .75rem;
  border-left: 3px solid var(--purple-200);
}
.release .body a { color: var(--slate); }
.release .body a:hover { color: var(--slate-dark); }
.release .body img, .release .body video { max-width: 100%; border-radius: 4px; box-shadow: var(--shadow-medium); }

/* Inline code chip — matches the hub's light-purple pill (purple100 bg, Fira
   Code), which reads better than purple200 against the white body background. */
.release code {
  font-family: "Fira Code", monospace;
  font-size: .87em;
  background: var(--purple-100);
  color: var(--neutral-800);
  padding: 1px 5px;
  border-radius: 4px;
}
/* Multi-line code blocks stay neutral (not chips). */
.release pre { background: var(--neutral-150); padding: .75rem; border-radius: 4px; overflow-x: auto; }
.release pre code { background: none; color: inherit; padding: 0; font-size: .85em; }

/* Mobile — collapse the two-column timeline: date chip above the day's cards. */
@media (max-width: 640px) {
  #releases::before { display: none; }
  .timeline-day { grid-template-columns: 1fr; row-gap: .75rem; padding: .75rem 0; }
  .day-marker { padding-top: 0; }
  .day-chip { position: static; top: auto; }
}

#releases { padding-bottom: 4rem; }

/* Empty state — shown when no release matches the current filters/search;
   the timeline connector line is hidden so it doesn't dangle in empty space. */
.empty-state { text-align: center; color: var(--neutral-600); font-size: 15px; padding: 5rem 1rem; }
#releases.empty::before { display: none; }

#back-to-top {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: var(--slate);
  color: var(--neutral-000);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--shadow-medium);
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity .2s ease-out, transform .2s ease-out, background .15s;
  z-index: 2;
}
#back-to-top.visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
#back-to-top:hover { background: var(--slate-dark); }