:root {
  /* Same palette as the ACR Artifact Browser and the PAL Backup Decryption UI, so the internal tools
     look related. */
  --ctc-blue: #2dc6d6;
  --ctc-blue-dark: #24abb9;
  --on-blue: #161615;
  --ink: #1a1d21;
  --ink-soft: #5b636c;
  --ink-faint: #8b9299;
  --bg: #fafafa;
  --surface: #ffffff;
  --surface-soft: #fcfcfd;
  --border: #e4e7eb;
  --border-soft: #eef1f4;
  --danger: #c0362c;
  --danger-bg: #fdecea;
  --success: #1f7a3d;
  --success-bg: #eaf6ee;
  --warning: #8a5a00;
  --warning-bg: #fff6e5;
  --hit: #ffe680;
  --hit-active: #ffb020;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 8px 24px rgba(16, 24, 40, 0.06);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, "Liberation Mono", monospace;
  --header-height: 64px;
}

* { box-sizing: border-box; }

/* The [hidden] attribute must win over element display rules (e.g. .btn-primary sets
   display:inline-flex, which would otherwise keep a hidden button visible). */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ── Header ─────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 28px;
  height: var(--header-height);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.brand { display: flex; align-items: center; gap: 14px; min-width: 0; }

/* The image is 224x95, which on its own would be half again as tall as the 64px header and shove
   everything around it out of place. Constraining the height and letting the width follow keeps the
   aspect ratio; the width/height attributes in the markup reserve the right box before it loads. */
.brand-logo {
  height: 48px;
  width: auto;
  display: block;
}

.brand-title {
  font-weight: 600;
  font-size: 16px;
  padding-left: 14px;
  border-left: 1px solid var(--border);
  white-space: nowrap;
}

.session { display: flex; align-items: center; gap: 16px; font-size: 14px; min-width: 0; }

.badge-internal {
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--success-bg);
  color: var(--success);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.user-name {
  color: var(--ink-soft);
  font-family: var(--mono);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 220px;
}

.signout {
  border: none;
  background: none;
  padding: 0;
  color: var(--ctc-blue-dark);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.signout:hover { text-decoration: underline; }

/* ── Sign in ────────────────────────────────────────────── */
.page {
  max-width: 1080px;
  margin: 0 auto;
  padding: 36px 28px 64px;
}

.page-narrow { max-width: 520px; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 28px;
}

.card h1 { margin: 0 0 10px; font-size: 20px; }

.lead { margin: 0 0 22px; color: var(--ink-soft); font-size: 14px; }

.field { margin-bottom: 16px; }

.field label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
}

.field input {
  width: 100%;
  font: inherit;
  font-size: 14px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
}
.field input:focus-visible { outline: 2px solid var(--ctc-blue); outline-offset: 1px; }

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  background: var(--ctc-blue);
  color: var(--on-blue);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.btn-primary:hover { background: var(--ctc-blue-dark); }
.btn-primary:disabled { opacity: 0.6; cursor: default; }

.spinner {
  display: none;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(22, 22, 21, 0.25);
  border-top-color: var(--on-blue);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
.btn-primary.is-busy .spinner { display: inline-block; }

@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .spinner { animation-duration: 2s; }
  html { scroll-behavior: auto !important; }
}

/* ── Messages ───────────────────────────────────────────── */
.message {
  margin: 0 0 18px;
  padding: 11px 14px;
  border-radius: 8px;
  font-size: 14px;
  border: 1px solid transparent;
}
.message.error { background: var(--danger-bg); color: var(--danger); border-color: #f4c7c2; }
.message.info { background: var(--surface-soft); color: var(--ink-soft); border-color: var(--border); }
.message.warning { background: var(--warning-bg); color: var(--warning); border-color: #f0dcb0; }

.loading { padding: 28px 0; color: var(--ink-soft); font-size: 14px; }

/* ── Portal layout ──────────────────────────────────────── */
/* Two columns: the permanent release index on the left, the stitched document in the middle. The
   sidebar is its own scroll container so a long release history never pushes the index out of reach. */
.portal {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 32px;
  max-width: 1240px;
  margin: 0 auto;
  padding: 28px 28px 64px;
  align-items: start;
}

.sidebar {
  position: sticky;
  top: calc(var(--header-height) + 28px);
  max-height: calc(100vh - var(--header-height) - 56px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
  min-width: 0;
}

.picker { display: flex; flex-direction: column; gap: 12px; }

.picker-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }

.picker-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
}

.picker-field select {
  font: inherit;
  font-size: 14px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  width: 100%;
}
.picker-field select:focus-visible { outline: 2px solid var(--ctc-blue); outline-offset: 1px; }

/* ── Variant toggle ─────────────────────────────────────── */
.variant-toggle {
  display: flex;
  gap: 2px;
  padding: 3px;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: 9px;
}

.variant-toggle button {
  flex: 1;
  border: none;
  background: none;
  border-radius: 6px;
  padding: 6px 8px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
  white-space: nowrap;
}
.variant-toggle button:hover { color: var(--ink); }
.variant-toggle button[aria-pressed="true"] {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08);
}

/* ── Search ─────────────────────────────────────────────── */
.search { display: flex; flex-direction: column; gap: 8px; }

.search input {
  width: 100%;
  font: inherit;
  font-size: 14px;
  padding: 8px 11px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
}
.search input:focus-visible { outline: 2px solid var(--ctc-blue); outline-offset: 1px; }

.search-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  color: var(--ink-soft);
}

.search-nav { display: flex; gap: 4px; }

.search-nav button {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 6px;
  width: 24px;
  height: 22px;
  font: inherit;
  font-size: 12px;
  line-height: 1;
  color: var(--ink-soft);
  cursor: pointer;
}
.search-nav button:hover:not(:disabled) { color: var(--ink); border-color: var(--ink-faint); }
.search-nav button:disabled { opacity: 0.4; cursor: default; }

/* ── Version index ──────────────────────────────────────── */
/* Every release of the major version, permanently listed. This is the navigation the printed release
   history never had: the list stays put while the document scrolls beside it. */
.version-index {
  display: flex;
  flex-direction: column;
  gap: 1px;
  overflow-y: auto;
  border-top: 1px solid var(--border-soft);
  padding-top: 12px;
  min-height: 0;
}

.version-index a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 9px;
  border-radius: 7px;
  border-left: 2px solid transparent;
  text-decoration: none;
  color: var(--ink-soft);
  font-size: 14px;
}
.version-index a:hover { background: var(--surface-soft); color: var(--ink); }

.version-index a.is-active {
  background: var(--surface-soft);
  border-left-color: var(--ctc-blue);
  color: var(--ink);
  font-weight: 600;
}

.version-index a.is-empty { color: var(--ink-faint); }

/* Releases with no search hit stay listed but recede, so the shape of the history is still visible. */
.version-index a.is-nomatch { opacity: 0.35; }

.index-version { font-family: var(--mono); font-size: 13px; }

.index-meta { font-size: 11px; color: var(--ink-faint); white-space: nowrap; }

.index-hits {
  font-size: 11px;
  font-weight: 700;
  color: var(--warning);
  white-space: nowrap;
}

.index-empty { padding: 8px 9px; font-size: 13px; color: var(--ink-faint); }

/* ── Document ───────────────────────────────────────────── */
.content { min-width: 0; }

.doc-header { margin-bottom: 20px; }

.doc-title { margin: 0; font-size: 22px; font-weight: 700; }

.doc-subtitle { margin: 4px 0 0; font-size: 14px; color: var(--ink-soft); }

.release {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px 26px;
  margin-bottom: 18px;
  /* Clears the sticky site header when an anchor is jumped to, so the release heading is never hidden
     underneath it. */
  scroll-margin-top: calc(var(--header-height) + 20px);
}

.release.is-nomatch { display: none; }

.release-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: 4px;
}

.release-version {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  font-family: var(--mono);
}

.release-meta { font-size: 12px; color: var(--ink-faint); }

.release-permalink {
  margin-left: auto;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-faint);
  text-decoration: none;
}
.release-permalink:hover { color: var(--ctc-blue-dark); }

.release-empty { margin: 14px 0 0; font-size: 14px; color: var(--ink-faint); font-style: italic; }

/* ── Rendered markdown ──────────────────────────────────── */
/* Note headings arrive demoted by one level (the release itself owns the h2), so the note's own
   "Features" is an h3 here. */
.release-body h3 {
  margin: 22px 0 10px;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}

.release-body h4 { margin: 18px 0 8px; font-size: 15px; }
.release-body h5, .release-body h6 { margin: 14px 0 6px; font-size: 14px; }

.release-body p { margin: 8px 0; font-size: 14px; }

.release-body ul, .release-body ol { margin: 8px 0; padding-left: 22px; }

.release-body > ul > li { margin-bottom: 14px; }

.release-body li { font-size: 14px; margin-bottom: 4px; }

.release-body strong { font-weight: 700; }

.release-body code {
  font-family: var(--mono);
  font-size: 12.5px;
  background: var(--surface-soft);
  border: 1px solid var(--border-soft);
  border-radius: 4px;
  padding: 1px 5px;
}

.release-body pre {
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  overflow-x: auto;
  font-size: 12.5px;
}
.release-body pre code { background: none; border: none; padding: 0; }

.release-body a { color: var(--ctc-blue-dark); }

/* A link whose target was stripped for pointing at an unsafe scheme. The text is kept; the fact that it
   is no longer a link is made visible rather than silent. */
.release-body a.release-link-blocked {
  color: var(--ink-soft);
  text-decoration: underline dotted;
  cursor: not-allowed;
}

/* Table wrapper: generated notes rarely contain tables, but one wide enough to overflow must scroll
   inside the card instead of stretching the page. */
.release-body table {
  border-collapse: collapse;
  font-size: 13px;
  margin: 12px 0;
  display: block;
  overflow-x: auto;
  max-width: 100%;
}
.release-body th, .release-body td {
  border: 1px solid var(--border);
  padding: 6px 10px;
  text-align: left;
}
.release-body th { background: var(--surface-soft); font-weight: 700; }

.release-body img { max-width: 100%; height: auto; }

/* A work item that shipped with no description. The reference is kept — it is true that something
   changed — but it is marked so it does not read as a rendering fault. */
.release-body li.release-item-empty { color: var(--ink-faint); }
.release-body li.release-item-empty::after {
  content: " — no description published";
  font-style: italic;
  font-size: 13px;
}

/* ── Search hits ────────────────────────────────────────── */
mark.search-hit {
  background: var(--hit);
  color: inherit;
  border-radius: 2px;
  padding: 0 1px;
}

mark.search-hit.is-current {
  background: var(--hit-active);
  outline: 2px solid var(--hit-active);
  outline-offset: 1px;
  scroll-margin-top: calc(var(--header-height) + 40px);
}

/* ── Footer ─────────────────────────────────────────────── */
.page-footer {
  margin-top: 28px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  color: var(--ink-faint);
  font-size: 12px;
}

/* ── Narrow screens ─────────────────────────────────────── */
/* The index moves above the document and stops being sticky: on a phone there is no room for a column
   beside the text, and a sticky block would eat the viewport. */
@media (max-width: 900px) {
  .portal {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    padding: 20px 16px 48px;
  }

  .sidebar {
    position: static;
    max-height: none;
  }

  .version-index { max-height: 260px; }
}