/* =============================================================================
 * Tweak these variables in :root to rebrand.
 * ========================================================================== */
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("fonts/schibsted.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

/* Castle 11 Labs palette — dark only, matching the main site
   (globals.css tokens). */
:root {
  --bg: #141414;
  --surface: #1a1a1a;
  --surface-2: #1f1f1f;
  --border: #2a2a2a;
  --text: #f5f1e8;
  --muted: #8a857b;
  /* --muted on --surface-2 computes to ~4.5:1 and fails AA at body sizes.
     Use this instead for muted text sitting on a raised surface. */
  --muted-raised: #9a958a;
  --accent: #ddd0b3;
  --accent-hover: #e8dcc0;
  --accent-soft: rgba(221, 208, 179, .1);
  --accent-line: rgba(221, 208, 179, .22);
  /* Download buttons use the brand accent (like the site's primary button):
     warm tan with near-black text. */
  --btn-bg: #ddd0b3;
  --btn-bg-hover: #e8dcc0;
  --btn-text: #161310;
  /* The ONLY thing marking a ghost button as a control, so it has to clear the
     3:1 that WCAG 1.4.11 asks of UI boundaries. #3a3833 was 1.49:1 and did not. */
  --btn-ghost-border: #6c6964;
  --btn-ghost-border-hover: #8a867f;
  --radius: 12px;
  --radius-sm: 8px;
  --radius-xs: 4px;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3);
  /* Height of the rail's "Products" label block: its own line box (12px at
     line-height 1) plus the 16px gap under it. The detail card has no label of
     its own, so it drops by exactly this much to line its top edge up with the
     first product tile. Keep in sync with .sidebar-title's font-size/margin. */
  --rail-label-block: 28px;
  --maxw: 1080px;
  --measure: 68ch;
  --font: "Schibsted Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

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

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
.muted { color: var(--muted); }

/* Available to screen readers, absent from the page. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* Uppercase micro-label used for every section heading and column header. */
.section-label,
.sidebar-title {
  font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); margin: 0;
}

/* ---- Header ----------------------------------------------------------- */
.site-header {
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  position: -webkit-sticky; position: sticky; top: 0; z-index: 10;
}
.site-header .wrap { display: flex; align-items: center; height: 64px; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand-wordmark { height: 20px; width: auto; display: block; }
.brand-page {
  color: var(--muted); font-weight: 500; font-size: 14px;
  padding-left: 12px; border-left: 1px solid var(--border);
}

/* ---- Layout ----------------------------------------------------------- */
.layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 32px;
  padding-top: 40px;
  padding-bottom: 96px;
  align-items: start;
}
@media (max-width: 760px) {
  .layout { grid-template-columns: 1fr; gap: 24px; padding-top: 24px; padding-bottom: 64px; }
  /* Stacked: the card sits under the list, so there is no label to align to. */
  .detail { margin-top: 0; }
  .site-header .wrap { height: 56px; }
}

/* ---- Product list ----------------------------------------------------- */
.sidebar-title { margin: 0 0 16px 16px; line-height: 1; }
.product-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.product-list .loading { padding: 8px 16px; }

/* Only the SELECTED product is boxed. Outlining every tile turns a six-product
   list into a ladder of near-identical boxes that drowns out the active one. */
.product-item {
  width: 100%; text-align: left; cursor: pointer;
  display: flex; flex-direction: column; gap: 4px;
  background: none; border: 1px solid transparent;
  border-radius: var(--radius-sm); padding: 16px;
  font: inherit; color: var(--text);
  transition: border-color .12s, background .12s;
}
.product-item:hover { background: var(--surface); }
.product-item.active { border-color: var(--accent); background: var(--accent-soft); }
.product-item-name { font-weight: 600; font-size: 15px; }
.product-item-tag { font-size: 13px; line-height: 1.4; }

/* Divider between snap-to-top / un-pinned / snap-to-bottom groups. */
.product-divider { list-style: none; margin: 12px 16px; }
.product-divider hr { border: none; border-top: 1px solid var(--border); margin: 0; }

/* ---- Detail pane ------------------------------------------------------- */
.detail {
  margin-top: var(--rail-label-block);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
/* Sections pad themselves so the dividers between them can run full-bleed. */
.detail-inner { padding: 32px 0; display: flex; flex-direction: column; gap: 32px; }
.detail-inner > * { padding-left: 32px; padding-right: 32px; }
.detail-inner > .section + .section,
.detail-inner > .downloads + .section { border-top: 1px solid var(--border); padding-top: 32px; }
.empty-state { padding: 80px 32px; text-align: center; }
.detail-message { padding: 48px 32px; }
.detail-message.error strong { color: #ff8a80; }

.section { display: flex; flex-direction: column; gap: 16px; }

/* "Out of date" banner (shown when arriving via ?name=…&outdated=1). */
.outdated-banner {
  display: flex; align-items: center; gap: 10px;
  background: rgba(120, 53, 15, .3); color: #f0b35e; border: 1px solid rgba(180, 83, 9, .4);
  border-radius: var(--radius-sm); padding: 11px 15px;
  font-size: 14px; font-weight: 500;
}
.outdated-icon { font-size: 16px; line-height: 1; }

/* ---- Masthead ---------------------------------------------------------- */
.masthead { display: flex; flex-direction: column; gap: 8px; }
.meta-line {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
  font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted);
}
.meta-sep { width: 1px; height: 12px; background: var(--border); }
/* Opt out of the row's uppercasing — this is a version string, not a label,
   and "V0.1.0" is wrong. Tracking goes back to normal for the same reason. */
.meta-version { text-transform: none; letter-spacing: normal; font-variant-numeric: tabular-nums; }
.meta-latest { color: var(--accent); }
.meta-channel { color: #f0b35e; }
/* The one interactive item on an otherwise static meta line, so it carries the
   accent colour to read as a link without breaking the row's rhythm. */
.meta-manual {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--accent); text-decoration: none;
}
.meta-manual:hover { color: var(--accent-hover); text-decoration: underline; }
.meta-manual:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--radius-xs); }
.meta-manual-icon { display: inline-flex; }
.detail-title { font-size: 32px; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; margin: 0; }

.old-notice {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 12px 16px; margin: 0; font-size: 14px;
  color: var(--muted-raised);
}
.linklike {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--accent); font: inherit; font-weight: 600;
}
.linklike:hover { text-decoration: underline; }

/* ---- Download buttons -------------------------------------------------- */
/* No caption lines under these on purpose — the requirements they used to
   repeat are one section below, in the support table. */
.dl-row { display: flex; flex-wrap: wrap; gap: 16px; }
.dl-btn {
  flex: 1 1 240px;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  text-decoration: none; cursor: pointer;
  border-radius: var(--radius-sm); height: 48px; padding: 0 24px;
  transition: background .12s, border-color .12s, transform .04s;
}
.dl-primary { background: var(--btn-bg); color: var(--btn-text); border: 1px solid transparent; }
.dl-primary:hover { background: var(--btn-bg-hover); }
.dl-secondary { background: none; color: var(--text); border: 1px solid var(--btn-ghost-border); }
.dl-secondary:hover { border-color: var(--btn-ghost-border-hover); background: var(--surface-2); }
.dl-btn:active { transform: translateY(1px); }
.dl-icon { display: inline-flex; color: currentColor; }
.dl-label { font-weight: 600; font-size: 16px; }

/* ---- Platform support -------------------------------------------------- */
.support { display: flex; flex-direction: column; }
.support-row {
  display: grid;
  /* Column 1 has to hold the longest platform name AND its status tag on one
     line — "AAX DSP" + PENDING APPROVAL is the widest real case. */
  grid-template-columns: minmax(210px, 1.05fr) minmax(80px, .55fr) minmax(0, 1.4fr);
  gap: 24px; align-items: start;
  padding: 12px 0; border-bottom: 1px solid var(--border);
  font-size: 14px;
}
.support-row:last-child { border-bottom: none; }
.support-head {
  padding-top: 0; padding-bottom: 8px;
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted);
}
.support-cell { color: var(--muted-raised); min-width: 0; }
.support-platform { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--text); font-weight: 600; }
.support-row.is-unavailable .support-platform { color: var(--muted-raised); }
.support-tag {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted-raised); border: 1px solid var(--border); border-radius: var(--radius-xs);
  padding: 2px 8px; white-space: nowrap;
}

/* ---- Markdown body ----------------------------------------------------- */
/* Prose gets a comfortable measure; blocks (tables, code, images) get the
   full column so they aren't cramped by it. */
.markdown-body > * { max-width: var(--measure); }
.markdown-body > table,
.markdown-body > pre,
.markdown-body > img,
.markdown-body > blockquote { max-width: 100%; }
.markdown-body > :first-child { margin-top: 0; }
.markdown-body > :last-child { margin-bottom: 0; }
.markdown-body p { margin: 0 0 16px; font-size: 16px; line-height: 1.65; }
.markdown-body h1 { font-size: 20px; font-weight: 600; line-height: 1.3; margin: 40px 0 12px; }
.markdown-body h2 { font-size: 17px; font-weight: 600; line-height: 1.3; margin: 40px 0 12px; }
.markdown-body h3 { font-size: 15px; font-weight: 600; line-height: 1.35; margin: 28px 0 8px; }
.markdown-body ul, .markdown-body ol { padding-left: 20px; margin: 0 0 16px; }
.markdown-body li { margin: 0 0 6px; }
.markdown-body li::marker { color: var(--muted); }
.markdown-body a {
  color: var(--accent); text-underline-offset: 3px;
  text-decoration-thickness: 1px; text-decoration-color: var(--accent-line);
}
.markdown-body a:hover { text-decoration-color: var(--accent); }
.markdown-body code {
  font-family: var(--mono); font-size: 13px; color: var(--text);
  background: var(--surface-2); border: 1px solid var(--border);
  padding: 2px 5px; border-radius: var(--radius-xs);
}
.markdown-body pre {
  background: var(--surface-2); padding: 16px 18px; border-radius: var(--radius-sm);
  overflow-x: auto; border: 1px solid var(--border); font-size: 13px; line-height: 1.6;
}
.markdown-body pre code { background: none; border: none; padding: 0; }
.markdown-body blockquote {
  margin: 24px 0; padding-left: 16px;
  border-left: 3px solid var(--accent-line); color: var(--muted-raised);
}
.markdown-body hr { border: none; border-top: 1px solid var(--border); margin: 32px 0; }
.markdown-body img { display: block; max-width: 100%; border-radius: var(--radius-sm); border: 1px solid var(--border); margin: 24px 0; }
/* An author table keeps rules but loses the box — a fully-bordered grid reads
   heavier than anything else on the page, and an empty header cell becomes a
   visible hole rather than simply nothing. */
.markdown-body table {
  border-collapse: collapse; width: 100%; display: block; overflow-x: auto; margin: 24px 0;
}
.markdown-body th {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); text-align: left;
  padding: 0 16px 8px 0; border-bottom: 1px solid var(--border);
}
.markdown-body td {
  font-size: 14px; line-height: 1.5; vertical-align: top; color: var(--muted-raised);
  padding: 12px 16px 12px 0; border-bottom: 1px solid var(--border);
}
.markdown-body td:first-child { color: var(--text); font-weight: 600; }
.markdown-body tr:last-child td { border-bottom: none; }

/* ---- Version picker ---------------------------------------------------- */
.version-picker { align-items: flex-start; }
.version-select {
  font: inherit; font-size: 14px; padding: 9px 34px 9px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background-color: var(--surface-2); color: var(--text);
  cursor: pointer; max-width: 320px; width: 100%;
  /* Strip the native control (Safari/Firefox show the OS dropdown otherwise)
     and draw our own caret. */
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888888' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
.version-select:focus-visible, .product-item:focus-visible, .dl-btn:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

/* ---- Narrow screens ---------------------------------------------------- */
@media (max-width: 560px) {
  .detail-inner { padding: 24px 0; gap: 24px; }
  .detail-inner > * { padding-left: 20px; padding-right: 20px; }
  .detail-inner > .section + .section,
  .detail-inner > .downloads + .section { padding-top: 24px; }
  .detail-title { font-size: 26px; }
  .dl-btn { flex-basis: 100%; }
  /* The 3-column grid can't hold at this width; each platform becomes a block. */
  .support-row { grid-template-columns: 1fr; gap: 4px; padding: 16px 0; }
  .support-head { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}