:root {
  /* brand tokens (from the product's Branding.css) */
  --font: 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --primary: #0B1212;
  --secondary: #9A0DF9;
  --accent: #D1F434;
  --lightest: #F7f7f7;
  --light: #E7E7E7;
  --dark: #25282D;

  /* derived colour - every value mixed from a brand token */
  --bg: #ffffff;
  --ink: var(--primary);
  --ink-soft: color-mix(in oklab, var(--primary) 72%, var(--bg));
  /* 56%, not 52%: the lightest share that keeps small text at WCAG AA (4.5:1)
     on white AND on the grey panels (5.09 and 4.75; 52% gave 4.43 and 4.14) */
  --ink-muted: color-mix(in oklab, var(--primary) 56%, var(--bg));
  --surface: var(--lightest);
  --line: color-mix(in oklab, var(--primary) 9%, var(--bg));
  --line-strong: color-mix(in oklab, var(--primary) 16%, var(--bg));
  --tint: color-mix(in oklab, var(--secondary) 8%, var(--bg));
  --tint-line: color-mix(in oklab, var(--secondary) 22%, var(--bg));
  --glass: color-mix(in srgb, var(--bg) 72%, transparent);
  --shadow-color: color-mix(in srgb, var(--primary) 14%, transparent);

  /* 2026 layer: layout values the brand file does not define */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --radius-s: 8px; --radius-m: 12px; --radius-l: 16px; --radius-pill: 999px;
  --bar-h: 44px;
  --bar-top: 12px;
  --brand-dot: 10px;          /* the logo's dot; the eyebrow above it lines up with the name */
  --stack-top: 80px;          /* bar-top + bar-h + space-5: where panels start */
  --nav-w: 288px;
  --nav-pad: 12px;            /* contents panel padding */
  --link-pad: 12px;           /* padding inside each contents link */
  --toggle-w: 24px;           /* the open/close arrow beside a section's link */
  --nav-indent: 24px;         /* how far each level of children steps in */
  --rail: color-mix(in oklab, var(--primary) 26%, var(--surface)); /* connector colour */
  --rail-mid: 16px;           /* link padding-top + half a 14px/1.45 line: the label's first line */
  --rail-lead: 8px;           /* gap from the parent's label down to its first child */
  --rail-radius: 8px;         /* the rounded corner */
  --rail-reach: 2px;          /* how far the line runs into the item, short of its label */
  --onpage-w: 288px;          /* same as the nav, so the reading column sits
                                 dead centre, under the search bar */
  --measure: 720px;
  --card-icon: 40px;          /* a card's icon (the Help Center home page's product tiles) */
  --blur-glass: 18px;
  --blur-behind: 6px;
  --shadow-float: 0 1px 2px var(--shadow-color), 0 12px 32px -12px var(--shadow-color);
  --shadow-lift: 0 2px 4px var(--shadow-color), 0 18px 40px -14px var(--shadow-color);
  /* the search bar sits on every page, so it gets a quiet shadow of its own:
     the edge and the glass carry it; --shadow-float read as harsh up there */
  --shadow-bar: 0 1px 2px color-mix(in srgb, var(--primary) 5%, transparent),
                0 6px 20px -10px color-mix(in srgb, var(--primary) 12%, transparent);
  --ease: cubic-bezier(.2, .7, .2, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--stack-top); }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 16px/1.7 var(--font); -webkit-font-smoothing: antialiased;
}
a { color: var(--secondary); text-decoration: none; cursor: pointer; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* a link inside a sentence must not rely on colour alone (WCAG 1.4.1): purple
   against body text is 1.6:1, so it carries a light underline as well */
.prose :is(p, li, td, th, blockquote) a:not(.card a) {
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
  text-decoration-color: color-mix(in oklab, var(--secondary) 40%, transparent);
}
.prose :is(p, li, td, th, blockquote) a:not(.card a):hover { text-decoration-color: currentColor; }
/* one visible focus ring for keyboard users, everywhere */
:is(a, button, summary, input, [tabindex]):focus-visible {
  outline: 2px solid var(--secondary); outline-offset: 2px; border-radius: var(--radius-s);
}
button { font: inherit; cursor: pointer; }

/* -------------------------------------------------------------- top bar */
/* content fades out as it scrolls up to the search box */
body::before {
  content: ''; position: fixed; inset: 0 0 auto; height: var(--stack-top);
  background: linear-gradient(var(--bg) 55%, transparent); z-index: 20; pointer-events: none;
}
/* The bar is laid out on the page's own grid - same columns, same gaps, same
   max width - so the logo sits over the contents and the search box spans
   exactly the reading column below it, at every screen width. Nothing is
   matched by hand, so nothing can drift. */
.bar, .shell {
  display: grid; grid-template-columns: var(--nav-w) minmax(0, 1fr) var(--onpage-w);
  column-gap: var(--space-7); max-width: 1440px; margin: 0 auto;
  padding-left: var(--space-5); padding-right: var(--space-5);
}
.bar {
  position: sticky; top: 0; z-index: 40; align-items: center;
  padding-top: var(--bar-top); padding-bottom: var(--space-5);
  pointer-events: none;       /* the empty parts of the bar don't block the page */
}
/* the logo starts where the contents' text starts: panel border + panel
   padding + link padding */
/* a flex box, not a line of text: a line box would add the body text's
   27.2px strut around the logo and push it to a fractional pixel */
/* Where you are, big, with its parent as a small grey eyebrow above it:
   "RIVAL HELP CENTER" over "Recruit"; on the Help Center's own pages and the
   hub, "RIVAL" over "Help Center". Every page has the same two lines, so the
   logo keeps its shape and place from site to site. 14px + 24px = 38px,
   centred on the 44px search box. */
.bar-brand { display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  padding-left: calc(1px + var(--nav-pad) + var(--link-pad)); }
.brand {
  pointer-events: auto; display: inline-flex; align-items: center; gap: var(--space-2);
  white-space: nowrap; color: var(--ink); font-weight: 600; font-size: 16px; line-height: 24px;
  letter-spacing: -0.01em;
}
.brand:hover { text-decoration: none; }
.brand-parent {
  pointer-events: auto; padding-left: calc(var(--brand-dot) + var(--space-2));
  white-space: nowrap; color: var(--ink-muted); font-weight: 600; font-size: 11px; line-height: 14px;
  letter-spacing: .06em; text-transform: uppercase;
}
a.brand-parent { transition: color .15s var(--ease); }
a.brand-parent:hover { color: var(--ink); text-decoration: none; }
.brand .dot { width: var(--brand-dot); height: var(--brand-dot); border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 35%, transparent); }
/* same box as .prose: full column width, capped at the reading measure */
.bar-search { position: relative; width: 100%; max-width: var(--measure); margin: 0 auto; }
.search {
  pointer-events: auto; position: relative; display: flex; align-items: center; height: var(--bar-h);
  background: var(--glass); border: 1px solid var(--line-strong); border-radius: var(--radius-pill);
  -webkit-backdrop-filter: blur(var(--blur-glass)) saturate(1.6);
  backdrop-filter: blur(var(--blur-glass)) saturate(1.6);
  box-shadow: var(--shadow-bar); transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.search:focus-within { border-color: var(--secondary);
  box-shadow: var(--shadow-bar), 0 0 0 4px color-mix(in oklab, var(--secondary) 16%, transparent); }
.search svg { position: absolute; left: var(--space-4); width: 16px; height: 16px; color: var(--ink-muted); pointer-events: none; }
#q {
  width: 100%; height: 100%; padding: 0 64px 0 44px; border: 0; outline: none;
  border-radius: inherit; background: transparent; font: 15px var(--font); color: var(--ink);
}
#q::placeholder { color: var(--ink-muted); }
#q::-webkit-search-cancel-button { display: none; }
.kbd {
  position: absolute; right: var(--space-3); padding: 0 var(--space-2); height: 22px;
  display: grid; place-items: center; font-size: 12px; color: var(--ink-muted);
  border: 1px solid var(--line-strong); border-radius: var(--radius-s); background: var(--bg);
  pointer-events: none;
}
.bar-end { display: flex; justify-content: flex-end; }
.menu-btn {
  pointer-events: auto; display: none; height: var(--bar-h); padding: 0 var(--space-4);
  border-radius: var(--radius-pill); border: 1px solid var(--line-strong);
  background: var(--glass); -webkit-backdrop-filter: blur(var(--blur-glass)); backdrop-filter: blur(var(--blur-glass));
  color: var(--ink); font-size: 14px;
}

/* ---------------------------------------------------------------- shell */
/* the space under the page is the footer's own (.foot), inside the grid:
   space below the grid would end the area the contents panel is pinned in
   short of the window, and at the end of a page the panel slid 48px up
   under the bar */
.shell {
  padding-bottom: var(--space-4);
  transition: filter .25s var(--ease), opacity .25s var(--ease);
}

/* contents: a floating panel, not a full-height rail */
nav.toc {
  position: sticky; top: var(--stack-top); align-self: start;
  max-height: calc(100vh - var(--stack-top) - var(--space-4)); overflow: auto;
  padding: var(--nav-pad); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-l);
  font-size: 14px; line-height: 1.45; scrollbar-width: thin;
}
nav.toc ul { list-style: none; margin: 0; padding: 0; }
/* spacing as padding, not margin: a margin on the last nested list leaks out
   of its item, and the parent's line - which fills the item - stops short */
nav.toc ul ul { margin: 0; padding: 2px 0 var(--space-2) var(--nav-indent); }
nav.toc a, nav.toc .sec {
  position: relative; display: block; padding: 6px var(--link-pad); border-radius: var(--radius-s);
  color: var(--ink-soft);
}
nav.toc a:hover { background: color-mix(in oklab, var(--primary) 5%, transparent); text-decoration: none; color: var(--ink); }
nav.toc a[aria-current="page"], nav.toc a.holds-current { color: var(--secondary); font-weight: 600; }
/* top-level current page: no parent to draw from, so a dot at its edge */
nav.toc > ul > li > a[aria-current="page"]::before {
  content: ''; position: absolute; top: 50%; left: -3px; width: 6px; height: 6px; margin-top: -3px;
  border-radius: 50%; background: var(--secondary);
}

/* Connectors. Each one starts in the column under the parent's first
   letter, runs down, turns a rounded corner and runs right to the child,
   stopping just short of its label:
     ::before  the corner and the run to the child
     ::after   the straight line on down to the next child (not on the last)
   'all' draws them under every open section; 'path' only on the way to the
   current page (see LINES in design_2026.py). */
nav.toc[data-lines="all"] ul ul > li,
nav.toc[data-lines="path"] li.rail { position: relative; }
nav.toc[data-lines="all"] ul ul > li::before, nav.toc[data-lines="all"] ul ul > li::after,
nav.toc[data-lines="path"] li.rail::before, nav.toc[data-lines="path"] li.rail::after {
  content: ''; position: absolute; pointer-events: none;
  left: calc(var(--link-pad) - var(--nav-indent));            /* parent's text column */
}
nav.toc[data-lines="all"] ul ul > li::before, nav.toc[data-lines="path"] li.rail::before {
  top: 0; height: var(--rail-mid);
  width: calc(var(--nav-indent) - var(--link-pad) + var(--rail-reach));
  border-left: 1px solid var(--rail); border-bottom: 1px solid var(--rail);
  border-bottom-left-radius: var(--rail-radius);
}
/* the first child's line reaches up to the parent's title */
nav.toc[data-lines="all"] ul ul > li:first-child::before,
nav.toc[data-lines="path"] li.rail.first::before { top: calc(-1 * var(--rail-lead)); height: calc(var(--rail-mid) + var(--rail-lead)); }
nav.toc[data-lines="all"] ul ul > li:not(:last-child)::after,
nav.toc[data-lines="path"] li.rail:not(.end)::after { top: 0; bottom: 0; border-left: 1px solid var(--rail); }
nav.toc[data-lines="all"] ul ul > li:first-child:not(:last-child)::after,
nav.toc[data-lines="path"] li.rail.first:not(.end)::after { top: calc(-1 * var(--rail-lead)); }
/* the current page: purple, with a dot where its line ends */
nav.toc ul ul a[aria-current="page"]::before, nav.toc ul ul a.holds-current::before {
  content: ''; position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--secondary);
  top: calc(var(--rail-mid) - 3px); left: calc(var(--rail-reach) - 1px);
}
/* a section's name looks like any row at its level (bold only at the top):
   whether it also has a page of its own is not the reader's concern */
nav.toc .sec { color: var(--ink-soft); }
nav.toc li.sec-only > details > summary:hover .sec { color: var(--ink); }
/* A section with pages under it: its own link, and beside it the arrow that
   opens and closes the list (the <summary>, holding nothing else) */
nav.toc li.has-kids { position: relative; }
nav.toc li.has-kids > a, nav.toc li.has-kids > .sec { padding-right: calc(var(--link-pad) + var(--toggle-w)); }
nav.toc details > summary {
  list-style: none; position: absolute; top: 0; right: 0;
  width: var(--toggle-w); height: calc(2 * var(--rail-mid));
  display: grid; place-items: center; border-radius: var(--radius-s); cursor: pointer;
}
nav.toc details > summary:hover { background: color-mix(in oklab, var(--primary) 5%, transparent); }
nav.toc details > summary::-webkit-details-marker { display: none; }
nav.toc details > summary::after {
  content: ''; width: 7px; height: 7px;
  border-right: 2px solid var(--ink-muted); border-bottom: 2px solid var(--ink-muted);
  transform: rotate(-45deg); transition: transform .2s var(--ease);
}
nav.toc details[open] > summary::after { transform: rotate(45deg); }
/* A section with no page of its own: the whole row is its <summary>, with the
   same hover and pointer as a link; the arrow stays exactly where the
   stand-alone one is (centred in a toggle-wide, two-rail-mid-tall box) */
nav.toc li.sec-only > details > summary {
  position: relative; width: auto; height: auto; display: block; place-items: normal;
}
nav.toc li.sec-only > details > summary::after {
  position: absolute; top: calc(var(--rail-mid) - 7px / 2); right: calc((var(--toggle-w) - 7px) / 2);
}
nav.toc li.sec-only .sec { padding-right: calc(var(--link-pad) + var(--toggle-w)); }
nav.toc > ul > li > .sec,
nav.toc > ul > li > details > summary > .sec,
nav.toc > ul > li > a { color: var(--ink); font-weight: 600; }
nav.toc > ul > li > a[aria-current="page"] { color: var(--secondary); }
nav.toc > ul > li + li { margin-top: 2px; }

/* --------------------------------------------------------- reading column */
main { min-width: 0; }
.prose { max-width: var(--measure); margin: 0 auto; }
/* One line, always: a trail too long for the column scrolls sideways (shown
   from its end, where the reader is, with the start fading out) instead of
   wrapping - on a phone a second line pushed the headline down 24px */
.crumbs { display: flex; flex-wrap: nowrap; white-space: nowrap; overflow-x: auto; scrollbar-width: none;
  gap: var(--space-1) var(--space-2); align-items: center;
  margin: var(--space-4) 0 var(--space-4); font-size: 13px; line-height: 20px; color: var(--ink-muted); }
.crumbs::-webkit-scrollbar { display: none; }
.crumbs > * { flex-shrink: 0; }
.crumbs.clipped { -webkit-mask-image: linear-gradient(to right, transparent, black var(--space-6));
  mask-image: linear-gradient(to right, transparent, black var(--space-6)); }
/* inside the scrolling trail the usual outside ring would be cut off */
.crumbs a:focus-visible { outline-offset: -2px; }
.crumbs a { color: var(--ink-muted); }
.crumbs a:hover { color: var(--ink); }
.crumbs .sep { width: 6px; height: 6px; border-right: 1px solid currentColor; border-top: 1px solid currentColor;
  transform: rotate(45deg); opacity: .6; }

/* whole-pixel line heights from the logo down to the first paragraph, so the
   headline lands on a whole pixel on every page (it was at 134.1px) */
.prose h1 { font-size: 40px; line-height: 44px; letter-spacing: -0.025em; font-weight: 700; margin: 0 0 var(--space-4); }
.prose h1 + p { font-size: 18px; line-height: 28px; color: var(--ink-soft); margin-bottom: var(--space-6); }
.prose h2 { font-size: 24px; line-height: 1.25; letter-spacing: -0.015em; margin: var(--space-8) 0 var(--space-3); }
.prose h3 { font-size: 18px; line-height: 1.35; margin: var(--space-6) 0 var(--space-2); }
.prose p, .prose ul, .prose ol { margin: 0 0 var(--space-4); }
.prose li { margin-bottom: var(--space-2); }
.prose li > ul, .prose li > ol { margin: var(--space-2) 0 0; }
.prose strong { font-weight: 600; color: var(--ink); }
.prose code { font-size: .88em; padding: 2px 6px; border-radius: 6px; background: var(--surface); border: 1px solid var(--line); }

/* numbered steps: the backbone of a help page, so they get the emphasis */
.prose > ol { list-style: none; padding: 0; counter-reset: step; }
.prose > ol > li { position: relative; padding-left: 44px; counter-increment: step; margin-bottom: var(--space-4); }
.prose > ol > li::before {
  content: counter(step); position: absolute; left: 0; top: 1px;
  width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%;
  font-size: 13px; font-weight: 700; color: var(--secondary);
  background: var(--tint); border: 1px solid var(--tint-line);
}
.prose > ol > li:not(:last-child)::after {
  content: ''; position: absolute; left: 13px; top: 34px; bottom: -14px; width: 2px;
  background: linear-gradient(var(--tint-line), transparent);
}
.prose > ul { padding-left: var(--space-5); }
.prose > ul > li::marker { color: var(--secondary); }

.prose img {
  display: block; max-width: 100%; height: auto; margin: var(--space-5) 0;
  border-radius: var(--radius-m); border: 1px solid var(--line); box-shadow: var(--shadow-float);
}
.prose li img { margin: var(--space-3) 0; }
/* a UI icon inside a sentence ("Click [icon] and select ...") stays in the line */
.prose img.icon { display: inline-block; vertical-align: middle; margin: 0 var(--space-1);
  border: 0; border-radius: 0; box-shadow: none; }

/* "In this section": the pages below a hub page (cap_toc) */
.prose .in-section { margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid var(--line); }
/* a section page with nothing else on it: the list is the page, so no divider */
.prose h1 + .in-section { margin-top: 0; padding-top: 0; border-top: 0; }
.prose h1 + .in-section h2 { margin-top: var(--space-6); }
.prose .in-section ul { list-style: none; padding-left: 0; }
.prose .in-section ul ul { padding-left: var(--space-5); margin-top: var(--space-1); }
.prose .in-section li { margin: var(--space-2) 0; }
.prose .in-section a { font-weight: 600; text-decoration: none; }
.prose .in-section a:hover { text-decoration: underline; }

.prose blockquote, .prose .callout {
  margin: var(--space-5) 0; padding: var(--space-4) var(--space-5);
  background: var(--tint); border: 1px solid var(--tint-line); border-radius: var(--radius-m);
  color: var(--ink-soft);
}
.prose blockquote p:last-child { margin-bottom: 0; }
.prose .callout strong:first-child { color: var(--secondary); }

.table-scroll { overflow-x: auto; margin: var(--space-5) 0; border: 1px solid var(--line); border-radius: var(--radius-m); }
.prose table { border-collapse: collapse; width: 100%; font-size: 14px; }
.prose th, .prose td { text-align: left; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); vertical-align: top; }
.prose th { background: var(--surface); font-weight: 600; white-space: nowrap; }
.prose tr:last-child td { border-bottom: 0; }
/* a cell holding several lines or a list (each its own line in the source) */
.prose td p { margin: 0 0 var(--space-2); }
.prose td p:last-child, .prose td :is(ul, ol):last-child { margin-bottom: 0; }
.prose td :is(ul, ol) { margin: 0 0 var(--space-2); padding-left: var(--space-5); }
.prose td li { margin-bottom: var(--space-1); }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-4); margin: var(--space-5) 0; }
.card {
  position: relative; cursor: pointer;
  padding: var(--space-5); border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--bg);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); border-color: var(--line-strong); }
.card p { margin: 0 0 var(--space-2); font-size: 14px; color: var(--ink-muted); }
.card p:last-child { margin-bottom: 0; }
.card .card-title { font-size: 16px; font-weight: 600; }
/* whole card opens the title link; other links in the card stay clickable */
.card .card-title a::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.card p:not(.card-title) a { position: relative; z-index: 1; }
.cards-quicklink .card { background: var(--surface); }
/* a card can open with an icon: a picture of the product, not a screenshot,
   so no frame, and one height so the titles line up */
.prose .card-icon { margin: 0 0 var(--space-3); line-height: 0; }
.prose .card-icon img { height: var(--card-icon); width: auto; margin: 0; border: 0; border-radius: 0; box-shadow: none; }

.draft-banner { margin: var(--space-4) 0 0; padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill);
  display: inline-block; background: var(--accent); color: var(--primary); font-size: 13px; font-weight: 600; }

/* --------------------------------------------------------------- footer */
/* On every page, as on the Flare sites: where to get help, and the feedback
   form behind Randi's HC Feedback Tracker. It is the page grid's second row,
   under the reading column (same box as .prose); the contents panel spans
   both rows, so it stays pinned to the end of the page. */
nav.toc { grid-row: 1 / span 2; }
.foot {
  grid-column: 2; width: 100%; max-width: var(--measure); margin: var(--space-8) auto 0;
  padding: var(--space-5) 0 var(--space-7); border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2) var(--space-5);
  font-size: 14px; line-height: 1.5; color: var(--ink-muted);
}
.foot p { margin: 0; }
/* the Flare footer's layout: help on the left, feedback on the right; on a
   phone the two stack, both from the left */
.foot .foot-feedback { text-align: right; }
.foot strong { font-weight: 600; color: var(--ink-soft); }
/* an address or a link label never breaks inside itself (support@rival- / hr.com) */
.foot a { white-space: nowrap; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
  text-decoration-color: color-mix(in oklab, var(--secondary) 40%, transparent); }
.foot a:hover { text-decoration-color: currentColor; }

/* A site with no contents (the Help Center home site, help.rival-hr.com):
   no empty panel, and no Contents button on phones. The column stays, so
   the page keeps the same centre as every other site. */
nav.toc:not(:has(a, .sec)) { visibility: hidden; }
body:not(:has(nav.toc :is(a, .sec))) .bar-end { display: none; }

/* ----------------------------------------------------------- on this page */
.onpage { position: sticky; top: var(--stack-top); align-self: start; padding-top: var(--space-6); font-size: 13px;
  max-width: 220px; }
.onpage p { margin: 0 0 var(--space-3); font-weight: 600; color: var(--ink); letter-spacing: .02em; }
.onpage ul { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line-strong); }
.onpage a { display: block; padding: 5px 0 5px var(--space-3); margin-left: -1px; color: var(--ink-muted);
  border-left: 2px solid transparent; line-height: 1.4; }
.onpage a:hover { color: var(--ink); text-decoration: none; }
.onpage a.on { color: var(--secondary); border-left-color: var(--secondary); }

/* --------------------------------------------------------- search panel */
.scrim { position: fixed; inset: 0; z-index: 30; display: none; cursor: pointer; }
body.searching .scrim { display: block; }
body.searching .shell { filter: blur(var(--blur-behind)) saturate(.85); opacity: .38; pointer-events: none; }
#results {
  position: absolute; top: calc(100% + var(--space-2)); left: 0; right: 0; pointer-events: auto;
  max-height: calc(100vh - var(--stack-top) - var(--space-5)); overflow: auto;
  padding: var(--space-5) var(--space-6);
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  -webkit-backdrop-filter: blur(var(--blur-glass)); backdrop-filter: blur(var(--blur-glass));
  border: 1px solid var(--line); border-radius: var(--radius-l); box-shadow: var(--shadow-lift);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility 0s .18s;
}
#results.on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
#results h1 { font-size: 20px; line-height: 1.3; letter-spacing: -0.01em; margin: 0 0 var(--space-2); }
#results mark { background: color-mix(in oklab, var(--accent) 70%, transparent); color: var(--primary); border-radius: 3px; padding: 0 1px; }
.r-fix, .r-intent { font-size: 13px; color: var(--ink-muted); margin: 0 0 var(--space-3); }
.r-fix b, .r-intent b { color: var(--secondary); font-weight: 600; }
.r-empty { color: var(--ink-muted); }
.answer {
  margin: var(--space-4) 0 var(--space-5); padding: var(--space-4) var(--space-5);
  background: var(--tint); border: 1px solid var(--tint-line); border-radius: var(--radius-m);
}
.ans-eyebrow { margin: 0 0 var(--space-2); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--secondary); }
.ans-steps { margin: 0 0 var(--space-3); padding-left: var(--space-5); }
.ans-steps li { margin-bottom: var(--space-1); }
.ans-steps li::marker { color: var(--secondary); font-weight: 700; }
.ans-lead, .ans-more { margin: 0 0 var(--space-3); }
.ans-more { font-size: 13px; color: var(--ink-muted); }
.ans-src { font-size: 13px; font-weight: 600; }
.ans-src .r-sec, .r-title .r-sec { font-weight: 400; color: var(--ink-muted); }
.r-list { list-style: none; margin: 0; padding: 0; }
.r-list li {
  position: relative; cursor: pointer;
  display: grid; grid-template-columns: 1fr auto; gap: 2px var(--space-3); align-items: baseline;
  padding: var(--space-3) var(--space-3); margin: 0 calc(-1 * var(--space-3)); border-radius: var(--radius-m);
}
.r-list li:hover { background: var(--surface); }
.r-path { grid-column: 1 / -1; font-size: 12px; color: var(--ink-muted); }
.r-title { font-size: 15px; font-weight: 600; }
/* the whole row is the link, as its hover state promises */
.r-title::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.r-snip { grid-column: 1 / -1; margin: 0; font-size: 14px; color: var(--ink-muted); line-height: 1.55; }
.r-kind { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  padding: 2px var(--space-2); border-radius: var(--radius-pill); background: var(--surface); color: var(--ink-muted);
  border: 1px solid var(--line); white-space: nowrap; }
.r-kind.k-procedure { background: color-mix(in oklab, var(--accent) 55%, var(--bg)); color: var(--primary); border-color: transparent; }
.hidden { /* the page stays visible, blurred, behind the results panel */ }

/* ------------------------------------------------------------- narrower */
@media (max-width: 1279px) {
  .bar, .shell { grid-template-columns: var(--nav-w) minmax(0, 1fr); column-gap: var(--space-6); }
  .bar-end, .onpage { display: none; }
}
@media (max-width: 999px) {
  .bar { display: flex; gap: var(--space-3); padding-left: var(--space-4); padding-right: var(--space-4); }
  .bar-brand { padding-left: 0; }
  /* no room for the name next to the search box on a phone; screen readers
     still get it, so the logo link keeps its name */
  .brand-parent { display: none; }    /* the breadcrumb's first link carries it on a phone */
  .brand .label { position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap; }
  .bar-search { flex: 1; max-width: none; margin: 0; }
  .bar-end { display: flex; }
  .menu-btn { display: block; }
  .kbd { display: none; }
  .shell { grid-template-columns: minmax(0, 1fr); padding-left: var(--space-4); padding-right: var(--space-4); }
  .foot { grid-column: auto; margin-top: var(--space-7); }
  .foot .foot-feedback { text-align: left; }
  nav.toc {
    position: fixed; z-index: 45; top: var(--stack-top); left: var(--space-4); right: var(--space-4);
    max-height: calc(100vh - var(--stack-top) - var(--space-4)); background: var(--bg);
    box-shadow: var(--shadow-lift); display: none;
  }
  body.menu-open nav.toc { display: block; }
  body.menu-open .scrim { display: block; background: color-mix(in srgb, var(--primary) 18%, transparent); }
  #results { position: fixed; top: var(--stack-top); left: var(--space-4); right: var(--space-4); padding: var(--space-4); }
  .prose h1 { font-size: 32px; line-height: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}