/* ==========================================================================
   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; }
/* `height: auto` is load-bearing now that every img carries width/height attributes from
   docs-figsizes.js. Those attributes are presentational hints, so they win over an initial value:
   an img whose CSS sets only one dimension gets the raw attribute for the other and stretches.
   Defaulting height to auto means the attributes act as an aspect-ratio and reserve the right box.
   Any rule below that sets an explicit height MUST also set `width: auto`, for the same reason. */
img { max-width: 100%; height: auto; 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; }
/* flex: none matters. Every other nav child sets it, so before this the CTA was the only item that could
   shrink and it absorbed the entire width deficit on its own: it wrapped to 61px inside a 60px nav from
   561 to 660px, and below 426px its left edge sat past the viewport. Its sibling .home-help .hh-cta
   already had flex: none; the nav copy had missed it. */
.topnav-cta {
  display: inline-flex; align-items: center; gap: 7px; flex: none; white-space: nowrap;
  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; }
/* 44x44, matching .topnav-search-btn beside it. It was 38x38, which both missed the touch-target
   minimum and made it the odd one out next to two 44px neighbours. */
.nav-burger { display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--r-sm); border: 1px solid var(--line);
  background: #fff; color: var(--ink); flex: none; }
.nav-burger svg { width: 20px; height: 20px; }
/* Narrow-viewport stand-in for the inline search box, shown from 560px down. See the note on .search
   for why the inline box cannot stay. 44x44 to meet the touch-target minimum. */
.topnav-search-btn {
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--r-sm); border: 1px solid var(--line);
  background: #fff; color: var(--ink); flex: none; cursor: pointer;
}
.topnav-search-btn svg { width: 20px; height: 20px; }
/* docs.css carried no :focus-visible rule at all, so every nav control fell back to the UA default blue,
   which is visible but not a Qity colour and reads badly against the brand-green pill. */
.nav-burger:focus-visible, .topnav-search-btn:focus-visible, .topnav-cta:focus-visible,
.topnav-logo:focus-visible, .search-sheet-close:focus-visible {
  outline: 2px solid var(--brand-deep); outline-offset: 2px;
}
/* The table scroll container becomes focusable only while it overflows (see TableWrap in docs-blocks.js),
   so it needs a ring of its own. Inset rather than offset: an outward ring on a full-width element would
   be clipped by the content column. */
.doc-table-wrap:focus-visible { outline: 2px solid var(--brand-deep); outline-offset: -2px; }

/* ==========================================================================
   SEARCH
   ========================================================================== */
.search { position: relative; width: clamp(220px, 30vw, 380px); flex: none; }
/* Full-width search sheet, opened by .topnav-search-btn at 560px and below. It has to sit outside
   .topnav in the markup: .topnav has a backdrop-filter, which makes it a containing block for fixed
   descendants, so a fixed sheet nested inside it would be positioned against the 60px nav rather than
   the viewport. TopNav returns a fragment for that reason. */
.search-sheet { position: fixed; inset: var(--nav-h) 0 0; z-index: 75; background: rgba(9,30,66,.4); }
.search-sheet-in {
  background: #fff; border-bottom: 1px solid var(--line);
  padding: 14px clamp(16px, 3vw, 28px);
  display: flex; align-items: flex-start; gap: 10px;
}
/* Overrides the nav width clamp: in the sheet the box takes the room it is given. */
.search-sheet-in .search { width: auto; flex: 1; min-width: 0; }
.search-sheet-close {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 44px; height: 44px; border: 1px solid var(--line); background: #fff;
  border-radius: var(--r-sm); color: var(--ink); cursor: pointer;
}
.search-sheet-close svg { width: 18px; height: 18px; }
.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;
}
/* The ring is --brand-deep rather than a tint of --brand-bright. 1.4.11 asks a state indicator for 3:1
   against what it sits on: the old rgba(70,221,143,.18) composited to about 1.11:1 on white, and even
   solid --brand #2FB874 only reaches 2.55:1. --brand-deep #0C7A48 is 5.40:1 and is already in the token
   set, so this needs no new colour. */
.search-box:focus-within { background: #fff; border-color: var(--brand-deep); box-shadow: 0 0 0 2px var(--brand-deep); }
.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 ---------- */
/* overflow-x is auto, not hidden: a table wider than the content column has to scroll rather than lose
   its right-hand columns. With `overflow: hidden` the widest tables silently destroyed a whole column at
   narrow widths (95px of dsc-needs at 360px, 184px of dsc-specifications), and nothing could recover it,
   which failed WCAG 1.4.10 Reflow. Both axes are stated deliberately: `overflow-y: visible` computes to
   `auto` when the other axis is not visible, which would quietly make this a vertical scroll container
   too. The rounded corners still clip, because any non-visible overflow clips to the padding box and the
   padding box follows border-radius. */
.doc-table-wrap { margin: 0 0 22px; border: 1px solid var(--line); border-radius: var(--r-card); overflow-x: auto; overflow-y: 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 ---------- */
/* The two tracks live on the list, not on the row, because a per-row grid sizes max-content from that
   row alone: every description then starts at its own lozenge's width and the column goes ragged. One
   grid for the whole list means the lozenge track is the widest label in the list and every description
   still lines up. .statrow is display: contents so its children join this grid directly, which is chosen
   over subgrid for support breadth, since this site ships no build step and no polyfills. The row's old
   4px of vertical padding is folded into the row gap here, and .statrow is a plain div, so nothing
   semantic is lost by removing its box. */
.statlist { margin: 0 0 22px; display: grid; grid-template-columns: max-content 1fr;
  gap: 18px 14px; align-items: start; }
/* The lozenge column fits its content instead of a fixed 160px. Two things were wrong with the fixed
   track. A grid item defaults to justify-self: stretch, so every lozenge was forced to the full 160px:
   short labels became over-wide pills, and any label past 160px had its text spill straight out of the
   coloured box, since .loz is white-space: nowrap. IMMEDIATE CORRECTIVE ACTION needs 218px and was
   spilling 58px on qe-deviations and qe-nonconformities; CLARIFICATION REQUIRED and READY FOR
   DEVELOPMENT were spilling 17px and 14px on dsc-specifications. max-content sizes the track to the
   widest label in each list, so every description in a list still lines up, without picking a fixed
   number that the next long status breaks all over again. */
.statrow { display: contents; }
/* justify-self: start is what makes the pill hug its text. A grid item defaults to stretch, so before
   this every lozenge was forced to the full track width: short labels became over-wide pills, and any
   label past the track had its text spill straight out of the coloured box, because .loz is nowrap.
   IMMEDIATE CORRECTIVE ACTION needs 218px in what was a 160px track and was spilling 58px on
   qe-deviations and qe-nonconformities; CLARIFICATION REQUIRED and READY FOR DEVELOPMENT were spilling
   17px and 14px on dsc-specifications. */
.statrow .loz { align-self: start; justify-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 {
  /* The top padding has to clear the fixed nav the way .content does. With a bare clamp the h1 slid
     under the frosted bar at every width below about 857px, which is where 7vw stops exceeding 60px:
     12px of overlap at 360px, still 6.3px at 768px. It read as a washed-out ghost rather than a hard
     cut, because the nav is rgba(255,255,255,.86) over a blur, which is why it survived this long. */
  padding: calc(var(--nav-h) + clamp(28px, 5vw, 40px)) 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; }
/* min-height carries the touch target. The text is 13px, so the anchor box was 20px tall, under the
   24px WCAG 2.5.8 floor. 24px here, lifted to 44px on touch widths in the 560px block below. The gap
   on .pc-actions keeps the two links from merging into one target. */
.prod-card .pc-foot { display: inline-flex; align-items: center; gap: 6px; font-size: 13px;
  min-height: 24px; 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); }
/* width: auto is required, not decorative. The logo is 480x244, so without it the width attribute
   applies and the mark renders 480px wide at 22px tall. */
.docfooter .ft-left img { height: 22px; width: auto; }
.docfooter .ft-links { display: flex; gap: 18px; font-size: 13.5px; }
/* Same touch-target reasoning as .pc-foot: 13.5px text gave a 17-21px box. */
.docfooter .ft-links a { color: var(--muted-2); font-weight: 500;
  display: inline-flex; align-items: center; min-height: 24px; }
.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; }
  /* The tag and the tighter gap start here, not at 560px. Once .topnav-cta stopped shrinking, the
     561-699px band had no give left: it needs 583px at 561px even with the search box at its 160px
     floor, so it overflowed by 66px. Dropping "Support" frees 69.1px and the gap frees 32px, which
     leaves 35px of slack at 561px instead of the ~10px that keeping the tag would have left. The
     wordmark survives in the title, the hero and the logo lockup. */
  .topnav { gap: 12px; }
  .topnav-tag { 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 { grid-template-columns: 1fr; gap: 6px; }
  /* The row gets its box back below 920px. The list stacks to one column here, and if .statrow stayed
     display: contents the lozenges and descriptions would alternate down a single 22-item column with
     nothing to show where one status ends and the next begins. */
  .statlist { grid-template-columns: 1fr; gap: 10px; }
  .statrow { display: grid; 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) {
  /* The nav budget at 320px is 320 - 32 of padding = 288px for four controls and their gaps. The inline
     search box cannot be part of that: its own clamp floor is 160px and it was being hard-clipped by
     45.2px at 360px. It collapses to a 44x44 button and a sheet instead, which frees about 116px.
     The gap and the tag are already handled by the 920px block above. */
  .topnav > .search { display: none; }
  .topnav-search-btn { display: inline-flex; }
  /* Label off, icon on, so the pill becomes a square 44x44 target instead of a 34x18 sliver. The
     accessible name comes from the aria-label on the anchor, not from the hidden span. */
  .topnav-cta span { display: none; }
  .topnav-cta { width: 44px; height: 44px; padding: 0; justify-content: center; }
  /* Releasing nowrap is the other half of the table fix. The nowrap first column is an independent
     overflow cause: it set the floor that pushed seven tables past the content column, and at this width
     a bounded label column costs less than the lost text did. */
  .doc-table td:first-child { white-space: normal; }
  .pager { flex-direction: column; }
  .home-help { flex-direction: column; align-items: flex-start; }
  /* Touch widths, so the standalone links get the full 44px rather than the 24px WCAG floor they
     carry on a pointer device. The inline email inside .home-help copy is deliberately left alone:
     a link in a sentence is exempt, and padding it would break the line rhythm. */
  .prod-card .pc-foot, .docfooter .ft-links a, .topnav-logo { min-height: 44px; }
  /* The two card links are 44px each now, so the 9px gap would add height without adding
     separation. 6px still reads as two rows and 44px targets need no spacing allowance. */
  .prod-card .pc-actions { gap: 6px; }
}

/* 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; }