/* ==========================================================================
   Qity Documentation — built on colors_and_type.css (Qity DS tokens).
   3-column docs layout: sidebar · content · on-this-page.
   ========================================================================== */
@import url("colors_and_type.css");

:root {
  --brand:        #2FB874;
  --brand-bright: #46DD8F;
  --brand-deep:   #0C7A48;
  --brand-tint:   #E6FAF0;
  --brand-tint-2: #F2FCF7;
  --navy:    #091E42;
  --ink:     #172B4D;
  --ink-2:   #42526E;
  --muted:   #5E6C84;
  --muted-2: #6B778C;
  --line:    #DFE1E6;
  --line-2:  #EBECF0;

  --nav-h: 60px;
  --side-w: 290px;
  --toc-w: 232px;
  --maxw: 1480px;

  --r-card: 12px;
  --r-sm: 8px;
  --r-pill: 999px;
  --shadow-card: 0 0 1px rgba(9,30,66,.18), 0 2px 4px rgba(9,30,66,.06), 0 12px 28px -16px rgba(9,30,66,.22);
  --shadow-soft: 0 1px 2px rgba(9,30,66,.06), 0 8px 24px -18px rgba(9,30,66,.30);
  --shadow-pop: 0 4px 8px -2px rgba(9,30,66,.25), 0 0 1px rgba(9,30,66,.31);
  --ease: cubic-bezier(.22,.61,.36,1);
}

* { box-sizing: border-box; }
html { background: #fff; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: #fff; color: var(--ink);
  font-family: var(--font-sans); font-size: 16px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a { color: var(--brand-deep); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
code, .mono { font-family: var(--font-mono); }

/* inline code */
.ic {
  font-family: var(--font-mono); font-size: .86em;
  background: var(--N20); border: 1px solid var(--line-2);
  border-radius: 5px; padding: 1px 6px; color: var(--ink-2);
}
.dl { color: var(--brand-deep); font-weight: 600; }
.dl:hover { text-decoration: underline; }

/* ==========================================================================
   TOP NAV
   ========================================================================== */
.topnav {
  position: fixed; top: 0; left: 0; right: 0; height: var(--nav-h); z-index: 80;
  display: flex; align-items: center; gap: 20px;
  padding: 0 clamp(16px, 3vw, 28px);
  background: rgba(255,255,255,.86);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.topnav-logo { display: flex; align-items: center; gap: 11px; flex: none; text-decoration: none; }
.topnav-logo:hover { text-decoration: none; }
/* assets/qity-logo-light.png is the full lockup (bracket-Q + "ity" wordmark), 480x244. */
.topnav-logo img { height: 26px; width: auto; display: block; }
.topnav-tag {
  font-size: 12.5px; font-weight: 700; letter-spacing: .02em;
  color: var(--brand-deep); background: var(--brand-tint);
  padding: 3px 9px; border-radius: var(--r-pill); align-self: center;
}
.topnav-spacer { flex: 1; }
.topnav-links { display: flex; align-items: center; gap: 2px; }
.topnav-link {
  font-size: 14.5px; font-weight: 500; color: var(--ink-2);
  padding: 8px 13px; border-radius: var(--r-sm); text-decoration: none;
  transition: background .15s, color .15s;
}
.topnav-link:hover { background: var(--bg-hover); color: var(--navy); text-decoration: none; }
.topnav-cta {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 14px; font-weight: 600; color: var(--navy);
  background: var(--brand-bright); border: 0; border-radius: var(--r-pill);
  padding: 9px 17px; text-decoration: none; transition: filter .15s, transform .15s;
}
.topnav-cta:hover { filter: brightness(1.05); transform: translateY(-1px); text-decoration: none; }
.topnav-cta svg { width: 15px; height: 15px; }
.nav-burger { display: none; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: var(--r-sm); border: 1px solid var(--line);
  background: #fff; color: var(--ink); flex: none; }
.nav-burger svg { width: 20px; height: 20px; }

/* ==========================================================================
   SEARCH
   ========================================================================== */
.search { position: relative; width: clamp(220px, 30vw, 380px); flex: none; }
.search-box {
  display: flex; align-items: center; gap: 9px; height: 40px;
  padding: 0 12px; border-radius: var(--r-sm);
  background: var(--N20); border: 1px solid var(--line);
  color: var(--muted-2); transition: border-color .15s, box-shadow .15s, background .15s;
}
.search-box:focus-within { background: #fff; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(70,221,143,.18); }
.search-box svg { width: 17px; height: 17px; flex: none; }
.search-box input {
  flex: 1; border: 0; background: transparent; outline: none;
  font-family: inherit; font-size: 14px; color: var(--ink); min-width: 0;
}
.search-box input::placeholder { color: var(--muted-2); }
.search-kbd {
  font-size: 11px; font-weight: 600; color: var(--muted-2);
  border: 1px solid var(--line); border-radius: 5px; padding: 2px 6px; background: #fff; flex: none;
  line-height: 1.4; display: inline-flex; align-items: center; justify-content: center;
}
.search-results {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-card);
  box-shadow: var(--shadow-pop); overflow: hidden; max-height: 64vh; overflow-y: auto;
  padding: 6px;
}
.search-empty { padding: 22px 16px; text-align: center; color: var(--muted); font-size: 14px; }
.search-item {
  display: block; width: 100%; text-align: left; border: 0; background: none;
  padding: 10px 12px; border-radius: var(--r-sm); cursor: pointer; transition: background .12s;
}
.search-item:hover, .search-item.active { background: var(--brand-tint-2); }
.search-item .si-top { display: flex; align-items: center; gap: 8px; }
.search-item .si-kind {
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--brand-deep); background: var(--brand-tint); padding: 2px 7px; border-radius: 5px; flex: none;
}
.search-item .si-title { font-size: 14.5px; font-weight: 600; color: var(--navy); }
.search-item .si-sec { font-size: 12px; color: var(--muted-2); margin-left: auto; flex: none; }
.search-item .si-sum { font-size: 12.5px; color: var(--muted); margin-top: 3px; line-height: 1.4;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
.search-hint { padding: 8px 12px 4px; font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted-2); }

/* ==========================================================================
   LAYOUT
   ========================================================================== */
.shell { max-width: var(--maxw); margin: 0 auto; display: grid;
  grid-template-columns: var(--side-w) minmax(0, 1fr) var(--toc-w);
  align-items: start; }
.shell.no-toc { grid-template-columns: var(--side-w) minmax(0, 1fr); }

/* ---------- Sidebar ---------- */
.sidebar {
  position: sticky; top: var(--nav-h); align-self: start;
  height: calc(100vh - var(--nav-h)); overflow-y: auto;
  padding: 26px 14px 60px 22px; border-right: 1px solid var(--line);
  scrollbar-width: thin;
}
.side-section { margin-bottom: 6px; }
.side-prod {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 9px 11px; border: 0; background: none; border-radius: var(--r-sm);
  text-align: left; transition: background .14s;
}
.side-prod:hover { background: var(--bg-hover); }
.side-prod .sp-ico { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; flex: none; }
.side-prod .sp-ico svg { width: 15px; height: 15px; }
/* Supplied app icons (assets/*.png, 96x96) bake in their own tinted rounded square,
   so the .img variant drops the tint-* background and lets the image fill the box. */
.sp-ico.img, .pc-ico.img { background: none; }
.sp-ico.img img, .pc-ico.img img { width: 100%; height: 100%; display: block; }
.side-prod .sp-label { font-size: 14.5px; font-weight: 700; color: var(--navy); flex: 1; }
.side-prod .sp-chev { width: 16px; height: 16px; color: var(--muted-2); transition: transform .25s var(--ease); flex: none; }
.side-section.open .side-prod .sp-chev { transform: rotate(90deg); }
.side-prod .sp-soon {
  font-size: 9.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  color: var(--muted-2); background: var(--N20); border: 1px solid var(--line-2);
  padding: 2px 6px; border-radius: var(--r-pill); flex: none;
}

/* tint chips for product icons */
.tint-P { background: var(--P-surface); color: var(--P-text); }
.tint-B { background: var(--B50); color: #1868DB; }
.tint-R { background: var(--R-surface); color: var(--R-text); }
.tint-T { background: var(--T-surface); color: var(--T-text); }
.tint-G { background: var(--G-surface); color: var(--G-text); }
.tint-Y { background: var(--Y-surface); color: #8a6d00; }
.tint-brand { background: var(--brand-tint); color: var(--brand-deep); }

.side-body { display: none; padding: 2px 0 10px; }
.side-section.open .side-body { display: block; }
.side-group { margin: 8px 0 4px; }
.side-grouplabel {
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted-2); padding: 6px 12px 4px 14px;
}
.side-link {
  position: relative; display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 7px 12px 7px 14px; border: 0; background: none; border-radius: var(--r-sm);
  text-align: left; font-size: 14px; font-weight: 500; color: var(--ink-2);
  text-decoration: none; transition: background .12s, color .12s; line-height: 1.35;
  margin-left: 12px; width: calc(100% - 12px);
}
.side-link:hover { background: var(--bg-hover); color: var(--navy); text-decoration: none; }
.side-link.active { background: #E9F2FE; color: #1868DB; font-weight: 600; }
.side-link.active::before {
  content: ""; position: absolute; left: -1px; top: 6px; bottom: 6px;
  width: 3px; border-radius: 0 3px 3px 0; background: #1868DB;
}
.side-link .sl-kind {
  margin-left: auto; font-size: 10px; font-weight: 700; letter-spacing: .03em;
  color: var(--muted-2); flex: none;
}

/* sidebar standalone (get started) links sit flush */
.side-section.flat .side-link { margin-left: 0; width: 100%; }

/* ==========================================================================
   CONTENT
   ========================================================================== */
/* The top nav is fixed and translucent, so content scrolls under it and every region has to reserve
   its own height. The sidebar and the TOC do it with `position: sticky; top: var(--nav-h)`; this
   column had a plain 38px, which left the breadcrumb sitting behind the nav on every doc page. */
.content { min-width: 0; padding: calc(var(--nav-h) + 28px) clamp(28px, 4vw, 60px) 80px; }
.doc { max-width: 760px; }

.breadcrumb { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--muted-2); margin-bottom: 18px; flex-wrap: wrap; }
.breadcrumb a { color: var(--muted-2); font-weight: 500; }
.breadcrumb a:hover { color: var(--brand-deep); }
.breadcrumb svg { width: 13px; height: 13px; opacity: .7; }
.breadcrumb .bc-current { color: var(--ink-2); font-weight: 600; }

.doc-kind {
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 14px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--brand-deep); background: var(--brand-tint); padding: 4px 10px; border-radius: var(--r-pill);
}
.doc h1 {
  font-size: clamp(30px, 4vw, 40px); font-weight: 700; letter-spacing: -.025em;
  line-height: 1.1; color: var(--navy); margin: 0 0 14px;
}
.doc .lead { font-size: 18px; line-height: 1.6; color: var(--muted); margin: 0 0 12px; text-wrap: pretty; }

.doc h2 {
  font-size: 24px; font-weight: 700; letter-spacing: -.015em; color: var(--navy);
  margin: 42px 0 16px; padding-top: 6px; scroll-margin-top: calc(var(--nav-h) + 18px);
  position: relative;
}
.doc h2 .anchor {
  position: absolute; left: -26px; top: 50%; transform: translateY(-50%);
  opacity: 0; color: var(--brand); transition: opacity .15s; padding: 4px;
}
.doc h2:hover .anchor { opacity: 1; }
.doc h2 .anchor svg { width: 17px; height: 17px; }
.doc h3 { font-size: 18.5px; font-weight: 700; color: var(--navy); margin: 30px 0 10px; }
.doc p { margin: 0 0 16px; color: var(--ink); }
.doc .lead + h2 { margin-top: 34px; }

.doc ul.list, .doc ol.list { margin: 0 0 18px; padding-left: 4px; list-style: none; display: grid; gap: 10px; }
.doc ul.list li { position: relative; padding-left: 26px; color: var(--ink); line-height: 1.55; }
.doc ul.list li::before {
  content: ""; position: absolute; left: 6px; top: 10px; width: 6px; height: 6px;
  border-radius: 50%; background: var(--brand);
}
.doc ol.list { counter-reset: ol; }
.doc ol.list li { position: relative; padding-left: 30px; counter-increment: ol; color: var(--ink); }
.doc ol.list li::before {
  content: counter(ol); position: absolute; left: 0; top: 1px;
  width: 20px; height: 20px; border-radius: 50%; background: var(--brand-tint);
  color: var(--brand-deep); font-size: 11.5px; font-weight: 700; display: grid; place-items: center;
}

/* ---------- Steps ---------- */
.steps { list-style: none; margin: 4px 0 22px; padding: 0; counter-reset: step; }
.step { position: relative; counter-increment: step; padding: 0 0 22px 52px; }
.step:last-child { padding-bottom: 0; }
.step::before {
  content: counter(step); position: absolute; left: 0; top: -2px;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--brand-bright); color: var(--navy);
  font-size: 15px; font-weight: 700; display: grid; place-items: center; z-index: 1;
}
.step::after {
  content: ""; position: absolute; left: 15.5px; top: 32px; bottom: 4px; width: 2px;
  background: var(--line);
}
.step:last-child::after { display: none; }
.step-text { color: var(--ink); line-height: 1.55; padding-top: 4px; }
.step-note {
  margin-top: 10px; display: flex; gap: 9px; align-items: flex-start;
  background: var(--brand-tint-2); border: 1px solid #D6F2E3; border-radius: var(--r-sm);
  padding: 10px 13px; font-size: 13.5px; color: var(--ink-2); line-height: 1.5;
}
.step-note svg { width: 15px; height: 15px; color: var(--brand-deep); flex: none; margin-top: 2px; }
/* A step's own screenshot sits directly under it, left-aligned to the step text
   rather than centred, so the pairing with the step is unambiguous. Two classes
   to outrank the later `.doc-fig { text-align: center }`. */
.doc-fig.step-fig { margin: 12px 0 2px; text-align: left; }
.step:last-child .doc-fig.step-fig:last-child { margin-bottom: 0; }
.doc-fig.step-fig figcaption { margin-top: 8px; font-size: 12.5px; }

/* ---------- Callouts ---------- */
.callout {
  display: flex; gap: 13px; margin: 0 0 22px; padding: 15px 17px;
  border-radius: var(--r-card); border: 1px solid; line-height: 1.55;
}
.callout .co-ico { width: 22px; height: 22px; flex: none; margin-top: 1px; }
.callout .co-ico svg { width: 22px; height: 22px; }
.callout .co-body { min-width: 0; }
.callout .co-title { font-weight: 700; font-size: 14.5px; margin-bottom: 3px; }
.callout p { margin: 0; font-size: 14.5px; }
.callout p + p { margin-top: 8px; }
.co-info  { background: var(--B50); border-color: #B3D4FF; color: var(--ink); }
.co-info .co-ico { color: #1868DB; }
.co-info .co-title { color: #0747A6; }
.co-tip   { background: var(--brand-tint); border-color: #BBEED4; color: var(--ink); }
.co-tip .co-ico { color: var(--brand-deep); }
.co-tip .co-title { color: var(--brand-deep); }
.co-warn  { background: var(--Y-surface); border-color: #FFE380; color: var(--ink); }
.co-warn .co-ico { color: #B27800; }
.co-warn .co-title { color: #7A5300; }
.co-rule  { background: var(--P-surface); border-color: #C0B6F2; color: var(--ink); }
.co-rule .co-ico { color: var(--P-text); }
.co-rule .co-title { color: var(--P-text); }

/* ---------- Tables ---------- */
.doc-table-wrap { margin: 0 0 22px; border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
.doc-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.doc-table th {
  text-align: left; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted-2); background: var(--N10); padding: 11px 16px; border-bottom: 1px solid var(--line);
}
.doc-table td { padding: 12px 16px; border-bottom: 1px solid var(--line-2); color: var(--ink); vertical-align: top; line-height: 1.5; }
.doc-table tr:last-child td { border-bottom: 0; }
.doc-table td:first-child { font-weight: 600; color: var(--ink-2); white-space: nowrap; }

/* ---------- Status list ---------- */
.statlist { margin: 0 0 22px; display: grid; gap: 10px; }
.statrow { display: grid; grid-template-columns: 160px 1fr; gap: 14px; align-items: start; padding: 4px 0; }
.statrow .loz { align-self: start; margin-top: 1px; }
.statrow .st-desc { font-size: 14px; color: var(--muted); line-height: 1.5; }
.loz {
  display: inline-flex; align-items: center; font-size: 11px; font-weight: 700; letter-spacing: .03em;
  text-transform: uppercase; padding: 3px 9px; border-radius: var(--r-pill); line-height: 1.3; white-space: nowrap;
}
.loz-green  { background: var(--G-surface); color: var(--G-text); }
.loz-yellow { background: var(--Y-surface); color: #8a6d00; }
.loz-purple { background: var(--P-surface); color: var(--P-text); }
.loz-red    { background: var(--R-surface); color: var(--R-text); }
.loz-blue   { background: var(--B50); color: #0747A6; }

/* ---------- Key/value ---------- */
.keyval { margin: 0 0 22px; border-left: 2px solid var(--line); }
.kv-row { display: grid; grid-template-columns: 188px 1fr; gap: 16px; padding: 11px 0 11px 18px; }
.kv-row + .kv-row { border-top: 1px solid var(--line-2); }
.kv-k { font-weight: 700; color: var(--navy); font-size: 14.5px; }
.kv-v { color: var(--muted); font-size: 14.5px; line-height: 1.55; }

/* ---------- Concept cards ---------- */
.concept-cards { margin: 0 0 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ccard { border: 1px solid var(--line); border-radius: var(--r-card); padding: 18px; background: #fff; transition: border-color .2s, box-shadow .2s, transform .2s; }
.ccard:hover { border-color: #CFE9DA; box-shadow: var(--shadow-soft); transform: translateY(-2px); }
.ccard .cc-ico { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: var(--brand-tint); color: var(--brand-deep); margin-bottom: 13px; }
.ccard .cc-ico svg { width: 21px; height: 21px; }
.ccard h4 { margin: 0 0 6px; font-size: 16px; font-weight: 700; color: var(--navy); }
.ccard p { margin: 0; font-size: 13.5px; color: var(--muted); line-height: 1.5; }

/* ---------- Figures (screenshots) ---------- */
.doc-fig { margin: 4px 0 26px; text-align: center; }
.doc-fig .fig-frame {
  display: inline-block; max-width: 100%; padding: 8px;
  background: var(--N10); border: 1px solid var(--line); border-radius: var(--r-card);
  box-shadow: var(--shadow-soft); line-height: 0;
}
/* Display size is set per figure by what it depicts, not by its pixel count: the
   Confluence captures are high-DPI, so a status dropdown and a full table can have
   similar widths while needing very different sizes on the page. `width: auto` means a
   capture is never upscaled, so these caps only ever shrink.
     chip   - a button, status, or small menu
     panel  - a dialog, form, or wizard step
     screen - a table, dashboard, page, or wide strip
   Set on the block as v: 'chip' | 'panel' | 'screen'. Tune by hand where the automatic
   choice reads wrong; the class is the authority, not the file's dimensions. */
.doc-fig img { display: block; width: auto; max-width: 100%; height: auto; border-radius: 7px; }
.doc-fig.chip   img { max-width: min(240px, 100%); }
.doc-fig.panel  img { max-width: min(440px, 100%); }
.doc-fig.screen img { max-width: 100%; }
.doc-fig figcaption { margin-top: 11px; font-size: 13px; color: var(--muted-2); line-height: 1.5; }

/* ---------- Changelog timeline ---------- */
/* Release notes are a genuine sequence, newest first, so the spine connecting the entries encodes
   something true about the content and stays. The node dot that used to sit on it did not: it was
   identical on every entry and marked nothing the version tag does not already mark, so it is gone.
   The spine also used to sit at `left: 167px` inside a 168px right-aligned column, which put it hard
   against the version tag and the date; it now runs down the middle of the gutter with clear space
   on both sides. */
.changelog { margin: 8px 0 24px; }
.cl-entry { display: grid; grid-template-columns: 140px 1fr; gap: 28px; padding-bottom: 32px; position: relative; }
.cl-entry::before { content: ""; position: absolute; left: 153px; top: 0; bottom: 0; width: 1px; background: var(--line); }
/* Start the spine level with the middle of the first version tag, so it reads as running from the
   newest release downward rather than being clipped by the top of the block. */
.cl-entry:first-child::before { top: 11px; }
.cl-entry:last-child { padding-bottom: 0; }
/* Terminate at the oldest documented release instead of dangling past it. */
.cl-entry:last-child::before { bottom: auto; height: 26px; }
/* A single release is not a sequence, so it gets no timeline at all. */
.cl-entry:first-child:last-child::before { display: none; }
.cl-meta { text-align: right; padding-top: 2px; }
.cl-version { display: inline-block; font-family: var(--font-mono); font-size: 13px; font-weight: 600;
  color: var(--brand-deep); background: var(--brand-tint); padding: 3px 9px; border-radius: var(--r-pill); }
.cl-date { display: block; font-size: 12.5px; color: var(--muted-2); margin-top: 6px; }
.cl-body { padding-bottom: 2px; }
.cl-title { font-size: 17px; font-weight: 700; color: var(--navy); margin: 0 0 12px; }
/* Fixed tag column, so every change line starts at the same x. With a flex row the wider tags
   (IMPROVED, SECURITY) pushed their text right and the list lost its left edge. */
.cl-change { display: grid; grid-template-columns: 76px 1fr; gap: 12px; align-items: start; padding: 5px 0; }
.cl-tag { font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 3px 0; border-radius: var(--r-pill); margin-top: 2px; text-align: center; }
.tag-new { background: var(--G-surface); color: var(--G-text); }
.tag-improved { background: var(--B50); color: #0747A6; }
.tag-fixed { background: var(--P-surface); color: var(--P-text); }
.tag-security { background: var(--R-surface); color: var(--R-text); }
.cl-text { font-size: 14.5px; color: var(--ink); line-height: 1.55; }

/* ---------- Empty state ---------- */
.doc-empty { text-align: center; padding: 44px 24px; border: 1px dashed var(--line); border-radius: var(--r-card);
  background: var(--brand-tint-2); margin: 8px 0 24px; }
.doc-empty .de-ico { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 14px;
  background: #fff; color: var(--brand-deep); box-shadow: var(--shadow-soft); margin-bottom: 14px; }
.doc-empty .de-ico svg { width: 26px; height: 26px; }
.doc-empty .de-title { font-size: 17px; font-weight: 700; color: var(--navy); }
.doc-empty p { margin: 8px auto 0; font-size: 14px; color: var(--muted); max-width: 44ch; }

/* ---------- FAQ accordion ---------- */
.docfaq { margin: 4px 0 24px; border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
.docfaq-item + .docfaq-item { border-top: 1px solid var(--line); }
.docfaq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 16px 18px; background: none; border: 0; text-align: left; font-size: 15.5px; font-weight: 700;
  color: var(--navy); transition: background .15s; }
.docfaq-q:hover { background: var(--brand-tint-2); }
.docfaq-q svg { width: 18px; height: 18px; color: var(--brand-deep); flex: none; transition: transform .28s var(--ease); }
.docfaq-item.open .docfaq-q svg { transform: rotate(180deg); }
.docfaq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s var(--ease); }
.docfaq-item.open .docfaq-a { grid-template-rows: 1fr; }
.docfaq-a-inner { overflow: hidden; }
.docfaq-a-inner p { margin: 0; padding: 0 18px 17px; font-size: 14.5px; color: var(--muted); line-height: 1.6; }

/* ---------- Related ---------- */
.related { margin: 36px 0 0; padding-top: 26px; border-top: 1px solid var(--line); }
.related-h { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2); margin: 0 0 14px; }
.related-grid { display: grid; gap: 10px; }
.related-card { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--line);
  border-radius: var(--r-card); text-decoration: none; transition: border-color .18s, box-shadow .18s, transform .18s; }
.related-card:hover { border-color: var(--brand); box-shadow: var(--shadow-soft); transform: translateY(-1px); text-decoration: none; }
.related-card .rc-body { flex: 1; min-width: 0; }
.related-card .rc-title { font-size: 14.5px; font-weight: 700; color: var(--navy); }
.related-card .rc-sum { font-size: 13px; color: var(--muted); margin-top: 2px; line-height: 1.4; }
.related-card .rc-arrow { width: 18px; height: 18px; color: var(--brand); flex: none; }

/* ---------- Prev / next ---------- */
.pager { display: flex; gap: 14px; margin-top: 36px; }
.pager a { flex: 1; display: flex; flex-direction: column; gap: 4px; padding: 16px 18px;
  border: 1px solid var(--line); border-radius: var(--r-card); text-decoration: none;
  transition: border-color .18s, box-shadow .18s; }
.pager a:hover { border-color: var(--brand); box-shadow: var(--shadow-soft); text-decoration: none; }
.pager a.next { text-align: right; align-items: flex-end; }
.pager .pg-label { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted-2); display: flex; align-items: center; gap: 6px; }
.pager .pg-label svg { width: 14px; height: 14px; }
.pager .pg-title { font-size: 15px; font-weight: 700; color: var(--navy); }

/* ==========================================================================
   ON THIS PAGE (TOC)
   ========================================================================== */
.toc { position: sticky; top: var(--nav-h); align-self: start; height: calc(100vh - var(--nav-h));
  overflow-y: auto; padding: 44px 22px 60px 8px; }
.toc-h { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2); margin: 0 0 14px; }
.toc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; border-left: 2px solid var(--line-2); }
.toc-link { display: block; padding: 5px 12px; font-size: 13.5px; color: var(--muted); text-decoration: none;
  border-left: 2px solid transparent; margin-left: -2px; transition: color .15s, border-color .15s; line-height: 1.4; }
.toc-link:hover { color: var(--ink); text-decoration: none; }
.toc-link.active { color: var(--brand-deep); font-weight: 600; border-left-color: var(--brand); }
.toc-foot { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line-2); }
.toc-foot a { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--muted-2); }
.toc-foot a:hover { color: var(--brand-deep); text-decoration: none; }
.toc-foot svg { width: 14px; height: 14px; }

/* ==========================================================================
   HOME HUB
   ========================================================================== */
.home { padding: 0 0 80px; }
/* The band stays full width for its gradient and its bottom rule, but the horizontal padding lives on
   the inner box, which carries the same max-width and centring as .home-body. Previously the hero had
   the padding and no max-width while .home-body had both, so at 1400px the headline sat 110px to the
   left of every section heading below it. Any change here has to be mirrored in .home-body. */
.home-hero {
  padding: clamp(48px, 7vw, 88px) 0 clamp(40px, 5vw, 60px);
  background:
    radial-gradient(900px 420px at 88% -20%, rgba(70,221,143,.18), transparent 60%),
    linear-gradient(180deg, var(--brand-tint-2), #fff 78%);
  border-bottom: 1px solid var(--line);
}
.home-hero-in { max-width: 1180px; margin: 0 auto; padding: 0 clamp(28px, 4vw, 60px); }
.home-hero h1 { max-width: 920px; }
/* The lockup replaces the word "Qity" in the headline, so it has to sit on the text baseline rather
   than on the line box. assets/qity-logo-light.png is cropped tight to its ink, meaning the top edge
   is the cap line and the bottom edge is the descender of the y, so the height is set slightly under
   1em and pushed down by roughly the descender depth. Values are measured against the rendered
   baseline, not derived; see the note in docs.css history if the file is ever re-exported. */
.home-hero h1 .hero-mark {
  display: inline-block; height: 1.02em; width: auto; vertical-align: baseline;
  position: relative; top: .29em; margin: 0 .04em;
}
.home-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--brand-deep); margin-bottom: 18px; }
.home-hero h1 { font-size: clamp(34px, 5.4vw, 56px); font-weight: 700; letter-spacing: -.03em;
  line-height: 1.05; color: var(--navy); margin: 0 0 18px; }
.home-hero p { font-size: clamp(17px, 2vw, 20px); color: var(--muted); line-height: 1.55; margin: 0; max-width: 60ch; }
.home-search { margin-top: 30px; max-width: 560px; }
.home-search .search { width: 100%; }
.home-search .search-box { height: 52px; font-size: 16px; border-radius: var(--r-card); box-shadow: var(--shadow-soft); }
.home-search .search-box input { font-size: 16px; }

.home-body { padding: clamp(40px, 5vw, 56px) clamp(28px, 4vw, 60px) 0; max-width: 1180px; margin: 0 auto; }
.home-sec + .home-sec { margin-top: clamp(40px, 5vw, 60px); }
.home-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.home-sec-head h2 { font-size: 22px; font-weight: 700; letter-spacing: -.01em; color: var(--navy); margin: 0; }
.home-sec-head p { font-size: 14.5px; color: var(--muted); margin: 0; }

.prod-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
/* The card is a container, not a link: it holds two actions, and an anchor inside an anchor is
   invalid. .pc-main is the primary link over the icon, title and blurb. */
.prod-card { display: flex; flex-direction: column; padding: 22px; border: 1px solid var(--line);
  border-radius: var(--r-card); background: #fff; position: relative;
  transition: border-color .2s, box-shadow .2s, transform .2s; }
.prod-card:hover { border-color: #CFE9DA; box-shadow: var(--shadow-card); transform: translateY(-3px); }
.prod-card .pc-main { display: flex; flex-direction: column; flex: 1; color: inherit; text-decoration: none; }
.prod-card .pc-main:hover { text-decoration: none; }
/* Matched to .start-card .sc-ico so the two card grids read as one system: same 38px box, same 19px
   glyph in the svg fallback. The supplied PNGs bake the glyph and its tint into one 96x96 square with
   tighter internal padding, so their glyph draws a little larger than 19px inside the same box. The
   .img variant used to take a 30px box to compensate, which matched the glyphs but left the app icons
   visibly smaller than the Get started ones. Box size wins: both grids now read at 38px. */
.prod-card .pc-ico { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; margin-bottom: 16px; }
.prod-card .pc-ico svg { width: 19px; height: 19px; }
.prod-card h3 { font-size: 17px; font-weight: 700; color: var(--navy); margin: 0 0 7px; display: flex; align-items: center; gap: 9px; }
.prod-card p { font-size: 13.5px; color: var(--muted); line-height: 1.5; margin: 0 0 14px; flex: 1; }
/* Stacked so the release notes sit under the docs link. Both are real links now, so the arrow
   animates on the hovered one rather than on every arrow in the card. */
.prod-card .pc-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
.prod-card .pc-foot { display: inline-flex; align-items: center; gap: 6px; font-size: 13px;
  font-weight: 600; color: var(--brand-deep); text-decoration: none; }
.prod-card .pc-foot:hover { text-decoration: none; }
.prod-card .pc-foot svg { width: 15px; height: 15px; transition: transform .2s var(--ease); }
.prod-card .pc-foot:hover svg { transform: translateX(3px); }
/* Secondary action: same shape, quieter colour, so the primary one still leads. Its icon leads the
   label instead of trailing it, so the arrow's hover slide is cancelled: nudging a leading icon to
   the right pushes it into its own text. Colour change carries the hover here. */
.prod-card .pc-foot-alt { color: var(--muted); font-weight: 500; }
.prod-card .pc-foot-alt:hover { color: var(--brand-deep); }
.prod-card .pc-foot-alt:hover svg { transform: none; }
.pc-soon { font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted-2); background: var(--N20); border: 1px solid var(--line-2); padding: 2px 7px; border-radius: var(--r-pill); }
.pc-version { font-size: 11.5px; font-weight: 600; color: var(--muted-2); margin: -3px 0 8px; display: block; }
/* The Soon pill carries both classes, and `.pc-version` is declared later at equal specificity, so
   its `display: block` was winning and stretching the pill across the whole card. Two classes to
   outrank it. It keeps the block-level margins so the card's vertical rhythm matches a version card,
   and shrinks to its own text. */
.pc-version.pc-soon { display: inline-block; align-self: flex-start; }

/* auto-fit rather than a fixed 3, because the card count is however many pages are in the Get started
   group and a hardcoded 3 leaves a fourth card stranded alone on a second row. auto-fit collapses the
   empty track, so three cards still stretch the full width exactly as before. */
.start-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 14px; }
.start-card { display: flex; gap: 14px; align-items: flex-start; padding: 18px; border: 1px solid var(--line);
  border-radius: var(--r-card); background: #fff; text-decoration: none; transition: border-color .2s, box-shadow .2s, transform .2s; }
.start-card:hover { border-color: var(--brand); box-shadow: var(--shadow-soft); transform: translateY(-2px); text-decoration: none; }
/* No background or colour here on purpose. Each card carries a `tint-*` class from the design system,
   and `.start-card .sc-ico` is two classes to `.tint-B`'s one, so declaring them here would outrank
   every tint and silently force all three back to green. */
.start-card .sc-ico { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center;
  flex: none; }
.start-card .sc-ico svg { width: 19px; height: 19px; }
.start-card h4 { margin: 0 0 4px; font-size: 15px; font-weight: 700; color: var(--navy); }
.start-card p { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.45; }


/* The closing band picks up the hero's green tint. It used to be a solid --navy fill, which
   made it the only near-black surface on an otherwise light page, sitting between white cards
   and a white footer: read as a hard break rather than a closing note. Tint plus the same green
   hairline the product cards use on hover keeps it quiet, and the CTA stays the site's standard
   bright-green pill so the primary action still looks like every other primary action. */
.home-help { margin-top: clamp(44px, 5vw, 64px); display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding: 28px 32px; border-radius: var(--r-card); flex-wrap: wrap;
  background: var(--brand-tint); border: 1px solid #CFE9DA; }
/* The text block has to be allowed to shrink, or a long paragraph pushes the CTA onto its own row and
   the banner stops reading as one statement plus one action. `flex: 1 1 420px` lets it give way; the
   CTA never shrinks. Below 920px the media query stacks them on purpose. */
.home-help .hh-text { flex: 1 1 420px; min-width: 0; }
.home-help .hh-cta { flex: none; }
.home-help h3 { margin: 0 0 5px; font-size: 19px; font-weight: 700; color: var(--navy); }
.home-help p { margin: 0; font-size: 14.5px; color: var(--muted); }
.home-help .hh-cta { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 700;
  color: var(--navy); background: var(--brand-bright); border-radius: var(--r-pill); padding: 12px 22px;
  text-decoration: none; transition: filter .15s, transform .15s; }
.home-help .hh-cta:hover { filter: brightness(1.05); transform: translateY(-1px); text-decoration: none; }
.home-help .hh-cta svg { width: 16px; height: 16px; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.docfooter { border-top: 1px solid var(--line); padding: 30px clamp(28px, 4vw, 60px); margin-top: 40px;
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.docfooter .ft-left { display: flex; align-items: center; gap: 12px; font-size: 13.5px; color: var(--muted-2); }
.docfooter .ft-left img { height: 22px; }
.docfooter .ft-links { display: flex; gap: 18px; font-size: 13.5px; }
.docfooter .ft-links a { color: var(--muted-2); font-weight: 500; }
.docfooter .ft-links a:hover { color: var(--brand-deep); }

/* ==========================================================================
   MOBILE
   ========================================================================== */
.scrim { display: none; }
@media (max-width: 1180px) {
  :root { --toc-w: 0px; }
  .shell { grid-template-columns: var(--side-w) minmax(0, 1fr); }
  .toc { display: none; }
}
@media (max-width: 920px) {
  .topnav-links { display: none; }
  .search { width: clamp(160px, 40vw, 320px); }
  .nav-burger { display: inline-flex; }
  .shell { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed; top: var(--nav-h); left: 0; bottom: 0; width: 320px; max-width: 86vw;
    background: #fff; z-index: 70; transform: translateX(-100%); transition: transform .28s var(--ease);
    box-shadow: var(--shadow-pop); height: auto;
  }
  body.nav-open .sidebar { transform: none; }
  .scrim { display: block; position: fixed; inset: var(--nav-h) 0 0; background: rgba(9,30,66,.4);
    z-index: 65; opacity: 0; pointer-events: none; transition: opacity .25s; }
  body.nav-open .scrim { opacity: 1; pointer-events: auto; }
  .concept-cards, .prod-grid, .start-grid { grid-template-columns: 1fr; }
  .kv-row, .statrow { grid-template-columns: 1fr; gap: 6px; }
  /* Single column on mobile, so there is no gutter for the spine to run down. */
  .cl-entry { grid-template-columns: 1fr; gap: 8px; }
  .cl-entry::before { display: none; }
  /* Stack the tag above its line rather than beside it: at this width a fixed tag column costs the
     text about a third of the measure. */
  .cl-change { grid-template-columns: 1fr; gap: 5px; }
  .cl-tag { justify-self: start; width: 76px; }
  .cl-meta { text-align: left; }
  .doc-fig img { max-width: 100%; }
  .search-kbd { display: none; }
}
@media (max-width: 560px) {
  .topnav-cta span { display: none; }
  .pager { flex-direction: column; }
  .home-help { flex-direction: column; align-items: flex-start; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
  .prod-card:hover, .start-card:hover, .ccard:hover, .related-card:hover { transform: none; }
}
html { scroll-behavior: smooth; }