/* Generated by scripts/build-bisbe-kb.mjs — do not edit by hand.
   THE DOCUMENTATION PAGES WEAR THE HOMEPAGE'S SYSTEM. Palette: Brand B "Full Stop" — navy and gold on
   white — which home/home-brand-b.css defines as --navy --ink --muted --line --mist --gold --accent-soft
   --night-note. Type: the homepage's two faces (Newsreader for headings, Familjen for text), loaded by
   home/final-cut.css and home/home-fonts.css. Header and footer: read from public/b-os/index.html when
   the pages are built, so they cannot drift from it.
   THIS SHEET ADDS LAYOUT ONLY. It declares no color of its own, no typeface and no file reference: every color
   below is a variable the homepage's palette files already set, or white. Gold is decoration (a rule, an
   underline, a rail) and never carries text, because gold on white does not reach AA. Nothing is set
   below 13.5px. */

body.bb-doc{background:#fff}
body.bb-doc .doc{padding:40px 0 88px}
body.bb-doc .doc-col{max-width:680px;margin-inline:auto}
body.bb-doc .doc-col.wide{max-width:1040px}
body.bb-doc .doc-col.wide p{max-width:68ch}

/* ── current page in the header ─────────────────────────────────────────────────────
   The homepage styles aria-current="page" with a gold underline. An article sits INSIDE the Docs
   section rather than being its index, so it marks Docs with aria-current="true" — styled the same,
   so the reader sees where they are in either case. */
body.bb-doc .bb-night-head .site-nav a[aria-current="true"]{box-shadow:inset 0 -2px 0 var(--gold)}
body.bb-doc .bb-night-head .site-nav .ps-menu-list a[aria-current="true"]{font-weight:700;box-shadow:none}
body.bb-doc .site-footer .footer-links a[aria-current="page"]{text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:2px;text-underline-offset:6px}

/* ── headings: the homepage's display face, sized for a reading page ────────────────── */
body.bb-home.bb-doc h1{font-family:var(--display);font-weight:500;font-size:clamp(36px,4.6vw,58px);line-height:1.05;
  letter-spacing:-.02em;color:var(--ink);margin:0 0 14px;text-wrap:balance}
body.bb-home.bb-doc h2{font-family:var(--display);font-weight:500;font-size:clamp(24px,2.4vw,30px);line-height:1.15;
  letter-spacing:-.015em;color:var(--ink);margin:0 0 14px;display:flex;flex-wrap:wrap;align-items:baseline;gap:0 12px}
/* a printed section mark: a short gold rule ABOVE the words, one element, no extra markup */
body.bb-home.bb-doc h2::before{content:"";flex:0 0 100%;height:3px;margin:0 0 14px;
  background:linear-gradient(to right,var(--gold) 0 42px,transparent 42px)}
body.bb-home.bb-doc h2 .cnt{margin-left:auto;font-family:var(--sans);font-style:normal;font-size:14px;font-weight:500;
  color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
body.bb-doc p{font-size:17.5px;line-height:1.65;margin:0 0 14px}
body.bb-doc .kb-sub{font-size:20px;line-height:1.55;color:var(--muted);margin:0 0 26px;max-width:56ch}
body.bb-doc .kb-crumb{font-size:15px;color:var(--muted);margin:0 0 6px}
body.bb-doc .kb-crumb a{display:inline-flex;align-items:center;min-height:44px;color:var(--muted);
  text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:4px}
body.bb-doc .kb-crumb a:hover{color:var(--ink);text-decoration-color:var(--ink)}
/* Links in running text are underlined. :where() keeps this rule at the LOWEST specificity, so the rows, the
   crumb, the button and the "ways on" list below can each set their own decoration and win. */
body.bb-doc .doc :where(a:not(.kb-cta)){text-decoration:underline;text-decoration-color:var(--line);text-decoration-thickness:1px;text-underline-offset:4px}
body.bb-doc .doc :where(a:not(.kb-cta)):hover{text-decoration-color:var(--navy)}
body.bb-doc .doc :where(a:not(.kb-cta)):focus-visible{text-decoration:none}
body.bb-doc .kb-body p{font-size:18px;line-height:1.72;margin:0 0 18px}
/* Designer review (DOORS, the first look at these pages as pixels): every section that follows other content opens with the same air;
   running text holds a reading measure (680px at 18px ran to about 87 characters a line); a paragraph's last line keeps more than one
   word. */
body.bb-home.bb-doc .doc-col > * + h2{margin-top:56px}
body.bb-doc .doc-col > ul.kb-list + p{margin-top:20px}
body.bb-doc .doc-col:not(.wide) > :is(p,ul,ol):not(.sub),body.bb-doc .kb-body :is(p,ul,ol){max-width:32em}   /* about 75 characters at 18px */
body.bb-doc :is(p,li){text-wrap:pretty}
body.bb-doc .kb-cat{margin:0 0 40px}
body.bb-doc .kb-cats{display:grid;grid-template-columns:minmax(0,1fr);gap:0 56px;margin-top:8px}
@media (min-width:1000px){body.bb-doc .kb-cats{grid-template-columns:repeat(2,minmax(0,1fr))}}
body.bb-doc .kb-sect{margin:48px 0 0}

/* ── the rows are the page ─────────────────────────────────────────────────────────────
   A 3px rail is ALWAYS there and only changes color, so nothing moves under the pointer. The preview is
   clamped to two lines so one long row cannot double the height of its neighbors. */
body.bb-doc .kb-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
body.bb-doc .kb-list li{border-bottom:1px solid var(--line)}
body.bb-doc .kb-list a{display:block;padding:14px 14px 14px 16px;min-height:44px;text-decoration:none;
  border-left:3px solid transparent;border-radius:0 10px 10px 0}
body.bb-doc .kb-list a:hover,body.bb-doc .kb-list a:focus-visible{background:var(--mist);border-left-color:var(--navy)}
body.bb-doc .kb-list a:focus-visible{outline-offset:-3px}
body.bb-doc .kb-list b{display:block;font-size:17px;font-weight:600;line-height:1.35;color:var(--ink)}
body.bb-doc .kb-list span{display:-webkit-box;margin-top:3px;font-size:15.5px;line-height:1.5;color:var(--muted);
  -webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media (min-width:900px){body.bb-doc .kb-list.cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:48px}}

/* ── panels ────────────────────────────────────────────────────────────────────────── */
body.bb-doc .kb-receipt{border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:0 12px 12px 0;
  background:var(--mist);padding:16px 20px;margin:28px 0 0}
body.bb-doc .kb-receipt p{margin:0 0 4px;font-size:15.5px}
body.bb-doc .kb-receipt p:last-child{margin-bottom:0}
body.bb-doc .kb-receipt .kb-r-meta{color:var(--muted)}
body.bb-doc .kb-note{border:1px solid var(--line);border-radius:12px;background:var(--mist);padding:16px 20px;margin:28px 0}
body.bb-doc .kb-note p:last-child{margin-bottom:0}
body.bb-doc .kb-end{border-top:1px solid var(--line);margin-top:48px;padding-top:20px}
body.bb-doc .kb-end p{font-size:15px;color:var(--muted);margin:0 0 8px}
/* The "Ask us" door is the one navy panel on a page, as the closing band is on the homepage. */
body.bb-doc .kb-door{background:var(--navy);color:#fff;border-radius:16px;padding:26px 28px;margin:22px 0 8px;max-width:640px}
body.bb-doc .kb-door p{color:#fff;margin:0 0 12px}
body.bb-doc .kb-door p:last-child{margin-bottom:0}
body.bb-doc .kb-door b,body.bb-doc .kb-door a:not(.kb-cta){color:#fff}
body.bb-doc .kb-door a:not(.kb-cta){text-decoration:underline;text-decoration-color:#fff;text-underline-offset:4px}
body.bb-doc .kb-door :is(a,button):focus-visible{outline:3px solid #fff;outline-offset:3px}
body.bb-doc .kb-cta{display:inline-flex;align-items:center;min-height:48px;padding:10px 22px;border-radius:999px;
  background:#fff;color:var(--navy);font-weight:600;font-size:16px;text-decoration:none}
body.bb-doc .kb-cta:hover{background:var(--mist);text-decoration:none}

/* ── SEARCH · the slot is reserved before first paint, and only if a script ran ─────────
   An inline snippet in every head sets data-js="on" on <html>. The height below is held ONLY under that
   attribute, so with script the field appears into space already reserved for it (no shift) and without
   script there is no gap for a field that will never arrive. The two numbers are the injected control's
   real height: label 25 + gap 8 + field 52 on an index, 52 alone on an article, where the label is
   visually hidden. */
body.bb-doc #kb-find-slot{min-height:0}
html[data-js="on"] body.bb-doc #kb-find-slot{min-height:52px;margin:0 0 18px}
html[data-js="on"] body.bb-doc #kb-find-slot[data-labelled]{min-height:85px;margin:0 0 22px}
/* On an article the field sits between the crumb and the title: the title gets its own air (it read as wedged under a form). */
html[data-js="on"] body.bb-doc #kb-find-slot:not([data-labelled]){margin:6px 0 40px}
body.bb-doc .kb-find-lab{display:block;font-size:15px;font-weight:600;line-height:25px;margin:0 0 8px}
body.bb-doc .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
body.bb-doc .kb-find{display:flex;align-items:center;gap:10px;border:1px solid var(--muted);border-radius:12px;
  background:#fff;padding:0 12px 0 14px;height:52px}
body.bb-doc .kb-find:focus-within{border-color:var(--navy);outline:3px solid var(--navy);outline-offset:2px}
body.bb-doc .kb-find .gl{color:var(--muted);font-size:19px;line-height:1;flex:none}
/* NEVER below 16px: iOS zooms the whole page on focus of a smaller field. */
body.bb-doc .kb-find input{flex:1;min-width:0;border:0;background:none;color:var(--ink);font:inherit;
  font-size:16.5px;line-height:1.4;padding:0;outline:none;-webkit-appearance:none;appearance:none}
body.bb-doc .kb-find input:focus-visible{outline:none}
body.bb-doc .kb-find input::placeholder{color:var(--muted)}
body.bb-doc .kb-find input[type="search"]::-webkit-search-cancel-button,
body.bb-doc .kb-find input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;display:none}
body.bb-doc .kb-find .kbd{font-size:13.5px;color:var(--muted);border:1px solid var(--line);border-radius:6px;padding:2px 7px;flex:none}
@media (max-width:700px){body.bb-doc .kb-find .kbd{display:none}}
body.bb-doc .kb-find .clr{min-height:44px;min-width:44px;border:0;background:none;color:var(--muted);font:inherit;
  font-size:15px;cursor:pointer;border-radius:8px;flex:none}
body.bb-doc .kb-find .clr:hover{color:var(--ink);background:var(--mist)}

/* Results are CONTENT, not chrome: no glass, no floating panel. They are added above the list, never
   instead of it, and rows are a fixed shape (title one line, lede clamped to two, meta one) so
   re-ranking on the next keystroke cannot re-flow the page under a reader's thumb. */
body.bb-doc .kb-res{border:1px solid var(--line);border-left:3px solid var(--navy);border-radius:0 14px 14px 0;
  background:#fff;padding:16px 18px;margin:0 0 30px}
body.bb-doc .kb-res-h{display:flex;align-items:baseline;gap:14px;margin:0 0 4px;flex-wrap:wrap}
/* min-width:0 + overflow-wrap:anywhere — the count line echoes WHATEVER was typed; as a flex item its
   min-width:auto forbids breaking, and one unbroken token drags the page sideways at phone widths. */
body.bb-doc .kb-res-h b{font-size:17px;font-weight:600;min-width:0;overflow-wrap:anywhere}
body.bb-doc .kb-res-h .clear2{margin-left:auto;min-height:44px;padding:0 12px;border:1px solid var(--muted);
  border-radius:9px;background:none;color:var(--ink);font:inherit;font-size:14.5px;cursor:pointer}
body.bb-doc .kb-res-h .clear2:hover{background:var(--mist)}
body.bb-doc .kb-res ul{list-style:none;margin:10px 0 0;padding:0}
body.bb-doc .kb-res li{border-top:1px solid var(--line)}
body.bb-doc .kb-res li:first-child{border-top:0}
body.bb-doc .kb-res li a{display:block;padding:13px 12px 13px 14px;text-decoration:none;
  border-left:3px solid transparent;border-radius:0 10px 10px 0;min-height:44px}
body.bb-doc .kb-res li a:hover,body.bb-doc .kb-res li a:focus-visible{background:var(--mist);border-left-color:var(--navy)}
body.bb-doc .kb-res li a:focus-visible{outline-offset:-3px}
body.bb-doc .kb-res p.door a{text-decoration:underline;text-underline-offset:3px}
body.bb-doc .kb-res b.t{display:block;font-size:17px;font-weight:600;line-height:1.35;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.bb-doc .kb-res span.l{display:-webkit-box;margin-top:3px;font-size:15.5px;line-height:1.5;color:var(--muted);
  -webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
body.bb-doc .kb-res span.met{display:block;margin-top:5px;font-size:13.5px;color:var(--muted);
  font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.bb-doc .kb-res .stale{border:1px solid var(--muted);border-radius:6px;padding:1px 7px;font-size:13.5px;
  margin-left:8px;color:var(--muted)}
/* A match is marked by a wash and an underline, never by a hue alone. */
body.bb-doc .kb-res mark{background:var(--accent-soft);color:inherit;box-shadow:inset 0 -2px 0 var(--navy);
  border-radius:2px;padding:0 1px}
body.bb-doc .kb-res p.said{font-size:15.5px;color:var(--muted);margin:6px 0 0;max-width:60ch}
body.bb-doc .kb-res p.door{font-size:16px;margin:16px 0 0}
body.bb-doc .kb-res h3{font-size:15px;font-weight:600;margin:18px 0 0}

/* ── THE TWO HAND-AUTHORED PAGES (privacy.html, 404.html) share this sheet ───────────────
   Their markup keeps its own class names (.sub, .note, a bare <footer>, .ways) so the words and the
   structure of those pages do not move — only what they look like. Plain lists and code are styled here
   for the same reason. */
body.bb-doc .sub{font-size:20px;line-height:1.55;color:var(--muted);margin:0 0 26px;max-width:56ch}
body.bb-doc .note{border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:0 12px 12px 0;
  background:var(--mist);padding:16px 20px;margin:24px 0}
body.bb-doc .note p:last-child{margin-bottom:0}
body.bb-doc .doc-col>footer{border-top:1px solid var(--line);margin-top:48px;padding-top:20px}
body.bb-doc .doc-col>footer p{font-size:15px;color:var(--muted);margin:0 0 8px}
body.bb-doc .doc-col>ul:not(.kb-list):not(.ways){margin:0 0 18px;padding-left:24px}
body.bb-doc .doc-col>ul:not(.kb-list):not(.ways) li{font-size:17.5px;line-height:1.6;margin:0 0 8px}
body.bb-doc code{font-family:var(--mono);font-size:.92em;background:var(--mist);padding:1px 6px;border-radius:5px}
body.bb-doc .doc-404 .doc-col{padding:56px 0 40px}
body.bb-doc main.doc-404{min-height:calc(100vh - 300px)}   /* the footer sits near the bottom of a short screen, not mid-screen */
body.bb-doc .ways{margin:10px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:10px 28px}
body.bb-doc .ways li{display:inline-flex;align-items:baseline;gap:8px}
body.bb-doc .doc .ways a:not(.kb-cta){display:inline-flex;align-items:center;min-height:44px;font-size:17.5px;font-weight:600;
  text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:2px;text-underline-offset:6px}
body.bb-doc .ways i{font-style:normal;color:var(--muted);font-size:15px}

/* ── small screens ─────────────────────────────────────────────────────────────────── */
@media (max-width:700px){
  body.bb-doc .doc{padding:20px 0 64px}
  body.bb-home.bb-doc .doc-col > * + h2{margin-top:40px}
  html[data-js="on"] body.bb-doc #kb-find-slot:not([data-labelled]){margin:4px 0 32px}
  body.bb-doc .kb-door{padding:22px 20px}
  body.bb-doc .kb-body p{font-size:17.5px}
  body.bb-doc .doc-col,body.bb-doc .doc-col.wide{overflow-wrap:anywhere}
  /* Creative Director M5: no footer link wraps inside itself on a phone; the line wraps between links. The homepage sheet carries the same rule. */
  .footer-line{flex-wrap:wrap;row-gap:6px}
  .footer-links{flex-wrap:wrap;gap:0 20px}
  .footer-links a{white-space:nowrap}
}