/* Help Center layout — colors and type come from ds.css tokens (the design
   system source of truth). No raw hex here except token fallbacks. */
/* Heebo, served from here (site/fonts, Google's own variable files, latin
   and latin extended) rather than from Google Fonts: one connection fewer
   before the first paint, kept for a year by the browser, and the text shows
   in the fallback face until it arrives (performance audit, E, 2026-10-16).
   The latin file is preloaded by every page (tools/build.mjs). */
@font-face { font-family: 'Heebo'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(fonts/heebo-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Heebo'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(fonts/heebo-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
* { box-sizing: border-box; }
body { margin: 0; font-family: var(--fs-font-sans, 'Heebo', sans-serif); color: var(--fs-fg); background: var(--fs-bg-0); }
.wrap { max-width: 74rem; margin: 0 auto; padding: 0 1.5rem; }
a { color: var(--fs-accent-blue); text-decoration: none; }
a:hover { text-decoration: underline; }

.beta-strip { background: var(--fs-error-50); color: var(--fs-error-200); font-size: .8rem; font-weight: 600; text-align: center; padding: .4rem 1rem; }
.topbar { background: var(--fs-navy-900); }
/* The header wraps rather than overflows. Measured unconstrained, the brand
   is 347px (a 911x70 wordmark scaled to 18px tall is 234px, plus the gap and
   the HELP CENTER lockup) and the nav 615px, so the two fit on one row only
   above about 1010px. Below that they used to be forced onto a single line
   anyway: the brand text wrapped to two lines to make room and the nav still
   hung past the viewport, by 87px at 375px and 42px at 900px, so every page
   scrolled sideways. Wrapping is unconditional and needs no breakpoint: the
   nav drops to its own row exactly when it stops fitting.
   `justify-content: space-between` still puts brand left and nav right on
   one row, and places a lone wrapped row at the start, so the nav lines up
   under the wordmark. */
.topbar-in { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.5rem; flex-wrap: wrap; row-gap: .75rem; }
.brand { display: flex; align-items: center; gap: .75rem; color: var(--fs-bg-0); letter-spacing: .18em; font-size: .75rem; font-weight: 500; }
.brand:hover { text-decoration: none; }
.topbar nav { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
/* The green underline is the ACTIVE PAGE mark, not decoration: it follows
   aria-current, which the build sets on one nav item per page (and app.js
   moves on the browse page as the format filter changes). Every link
   reserves the same 2px, so the row does not shift between pages. The
   wireframe's own "this one" treatment is white text plus the green rule;
   inactive section links take --fs-navy-5, the design system's nav-text-on-
   dark token, which measures 8.55:1 on --fs-navy-900. Neither action is
   ever a page, so neither can hold the mark. CONTACT SUPPORT is the header's
   one call to action and reads as an outlined pill: a help center has a
   single escalation path and it should be findable without hunting. SIGN IN
   is a utility, relevant only to gated articles, and sits as a plain link at
   the far right where every help center puts it (E's call, 2026-09-02). One
   pill, never two: a second would leave neither primary. */
.topbar nav a { color: var(--fs-navy-5); font-size: .8rem; letter-spacing: .08em; font-weight: 500; white-space: nowrap; border-bottom: 2px solid transparent; padding-bottom: .15rem; }
/* Hover brightens; only the active page draws a rule. Weight never changes,
   so the row keeps the same widths on every page. */
.topbar nav a:hover { color: var(--fs-bg-0); text-decoration: none; }
.topbar nav a[aria-current="page"] { color: var(--fs-bg-0); border-bottom-color: var(--fs-green-10); }
/* Outlined, not filled: a white pill on the navy leaves the wordmark's green
   as the only colour in the bar. Hover inverts. The pill drops the shared
   2px reserve since it draws its own box; align-items:center keeps the row
   level. Bold is only ever on the pill, so the other links keep one width. */
.topbar .cta { color: var(--fs-bg-0); font-weight: 700; border: 1.5px solid var(--fs-bg-0); border-radius: 999px; padding: .45rem .95rem; }
.topbar .cta:hover { background: var(--fs-bg-0); color: var(--fs-navy-900); }
.topbar nav a:focus-visible { outline: 2px solid var(--fs-green-10); outline-offset: 3px; }
/* Tighter gaps once the nav is wrapping, and it aligns to the start: on its
   own row the nav box fills the line, so flex-end would leave its rows
   ragged-left under a left-aligned wordmark. */
@media (max-width: 860px) { .topbar nav { gap: .75rem; justify-content: flex-start; } }
/* Below 420px even the brand alone exceeds its row (347px against the 272px
   of content width a 320px screen leaves), so the wordmark scales down and
   the letter-spacing tightens. Height only: the image carries no width
   attribute, so it keeps its aspect ratio. Nothing is hidden, so the product
   name stays readable. */
@media (max-width: 420px) {
  .brand { gap: .5rem; letter-spacing: .12em; }
  .brand img { height: 15px; }
}

/* The hero band. Gradient values are the design's own
   (Wireframes.dc.html), which is why they are literal rather than tokens:
   the design system has no token for this tint. */
.hero { text-align: center; padding: 4.5rem 0 4.25rem; background: linear-gradient(180deg, #E4EEF9, #F1F6FC); border-bottom: 1px solid var(--fs-border-soft); }
.hero h1 { font-size: 2.4rem; margin: 0 0 .5rem; }
.hero p { color: var(--fs-fg-muted); margin: 0 0 1.5rem; }
.searchbar { display: flex; gap: .5rem; justify-content: center; max-width: 40rem; margin: 0 auto; }
.searchbar input { flex: 1; padding: .8rem 1rem; border: 1px solid var(--fs-border); border-radius: .3rem; font: inherit; }
/* White text on a deeper green (E, 2026-10-14). The brand green
   --fs-green-10 measures 2.4:1 with white, far under the 4.5:1 floor, and
   the first build answered with dark green text on it, which read as a label.
   --fs-green-15 (#238E30) is 3.5:1 with white; one shade darker, #20882E,
   clears 4.54:1 and still reads as a green button. Hover steps up to
   --fs-green-15. The shade sits a hair off the design system's ramp, noted
   for design. */
:root { --hc-btn: #20882E; }
.searchbar button, .btn { background: var(--hc-btn); color: #fff; border: 0; padding: .8rem 1.4rem; border-radius: .3rem; font-weight: 700; letter-spacing: .06em; cursor: pointer; display: inline-block; }
.searchbar button:hover, .btn:hover { background: var(--fs-green-15); text-decoration: none; }
/* Two colours by audience (E, 2026-10-14): green is the reader's "get help"
   action (search, a ticket, support); navy, the header's colour, is the staff
   side (sign-in, My content, register), with its secondary buttons white on a
   navy border, so staff pages read as one family with the staff bar. */
.staff .btn, .signin .btn { background: var(--fs-navy-900); color: #fff; }
.staff .btn:hover, .signin .btn:hover { background: var(--fs-navy-800); }
.staff .btn-quiet, .staff .btn-second, .signin .btn-quiet { background: #fff; color: var(--fs-navy-900); border: 1px solid var(--fs-navy-900); }
.staff .btn-quiet:hover, .staff .btn-second:hover, .signin .btn-quiet:hover { background: var(--fs-bg-2); border-color: var(--fs-navy-900); }
.staff .btn-danger { color: var(--fs-error-200); border-color: var(--fs-error-200); }

/* .hero .popular, not .popular: this is a <p> inside .hero, and the generic
   `.hero p` rule above outranks a bare class, which silently ate the margin. */
.hero .popular { margin: 1.9rem 0 0; font-size: .85rem; color: var(--fs-fg-muted); display: flex; flex-wrap: wrap; gap: .55rem; justify-content: center; align-items: baseline; }
.popular .sep { color: var(--fs-border); }
.rolelinks { display: flex; flex-direction: column; gap: .3rem; margin: .6rem 0 .2rem; padding-top: .7rem; border-top: 1px solid var(--fs-border-soft); }
/* One line per link (E, 2026-10-16): a long title is cut with an ellipsis, never wrapped. */
.rolelinks a { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rolelinks a { font-size: .88rem; line-height: 1.35; }
.btn-quiet { background: var(--fs-bg-2); color: var(--fs-fg); border: 1px solid var(--fs-border); font-size: .78rem; padding: .55rem 1rem; margin-top: .6rem; text-align: center; }
/* A quiet button stays a light surface on hover: only its border takes the green. */
.btn-quiet:hover { background: var(--fs-bg-2); border-color: var(--fs-green-15); text-decoration: none; }
.rolecount { font-size: .75rem; color: var(--fs-fg-muted); margin-top: .4rem; }
.updates { display: flex; flex-direction: column; }
.update { display: grid; grid-template-columns: 6.5rem 1fr auto; gap: .6rem; align-items: baseline; padding: .65rem 0; border-bottom: 1px solid var(--fs-border-soft); color: var(--fs-fg); }
.update:hover { text-decoration: none; }
.update:hover .utitle { text-decoration: underline; }
.udate { font-size: .78rem; color: var(--fs-fg-muted); }
.utitle { color: var(--fs-accent-blue); font-size: .9rem; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.umark { display: inline-flex; align-items: center; gap: .45rem; justify-self: end; }
.newmark { color: var(--fs-green-20); font-size: .68rem; font-weight: 700; letter-spacing: .08em; }
.badge-new { background: var(--fs-green-1); color: var(--fs-green-20); border: 1px solid var(--fs-green-2); }

.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; padding: 1.5rem 1.5rem 2rem; align-items: start; }
.kicker { font-size: .72rem; letter-spacing: .18em; color: var(--fs-fg-muted); font-weight: 600; }

/* Icon treatment lifted from the prototype's .mi rule (Wireframes.dc.html):
   the design's green gradient, on Material Symbols Rounded drawn inline as
   SVG (site/brand/icons) rather than the icon font. The gradient stops are
   the prototype's own values; the gradient itself is defined once on the
   home page (tools/build.mjs ICON_DEFS), with the mid green as the fallback. */
.mi { display: inline-block; width: 1.4rem; height: 1.4rem; }
.mi path { fill: url(#hc-icon-grad) #5CB85B; }
.hc-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.sechead { display: flex; align-items: baseline; gap: .75rem; margin: 2.5rem 0 1rem; }
/* The older product updates, behind one line (tools/build.mjs). */
.relolder { border-top: 1px solid var(--fs-border-soft); margin-top: 1.5rem; padding-top: 1rem; }
.relolder > summary { cursor: pointer; font-weight: 600; color: var(--fs-accent-blue); list-style: none; padding: .4rem 0; }
.relolder > summary::-webkit-details-marker { display: none; }
.relolder > summary::before { content: '+'; display: inline-block; width: 1.2rem; font-weight: 700; }
.relolder[open] > summary::before { content: '\2013'; }
.relolder > summary .relcount { font-weight: 400; color: var(--fs-fg-muted); margin-left: .4rem; }
.sechead .kicker { margin: 0; }
.hairline { flex: 1; height: 1px; background: var(--fs-border-soft); }
.alllink { font-size: .8rem; font-weight: 600; }
.rolecards { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; padding-top: 3rem; }
.rolecard { display: flex; flex-direction: column; gap: .45rem; border: 1px solid var(--fs-border); border-radius: .6rem; padding: 1.2rem 1.3rem; background: var(--fs-bg-0); color: var(--fs-fg); box-shadow: 0 1px 2px var(--fs-shadow, rgba(16,24,40,.05)); }
.rolecard:hover { border-color: var(--fs-green-10); text-decoration: none; }
.rolecard strong { font-size: 1.05rem; }
.rolecard p { margin: 0; font-size: .85rem; color: var(--fs-fg-muted); line-height: 1.45; }
.rolecard .more { font-size: .8rem; font-weight: 600; margin-top: .3rem; }
.rolecard .arrow { color: var(--fs-green-10); }
.pgrid { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.pcard { display: flex; flex-direction: column; gap: .35rem; border: 1px solid var(--fs-border); border-radius: .6rem; padding: 1rem 1.2rem; background: var(--fs-bg-0); color: var(--fs-fg); box-shadow: 0 1px 2px var(--fs-shadow, rgba(16,24,40,.05)); }
.pcard:hover { border-color: var(--fs-green-10); text-decoration: none; }
.pcard strong { font-size: .95rem; }
.pcard .plogo { display: block; align-self: flex-start; height: 2rem; width: auto; max-width: 100%; margin: .1rem 0 .4rem; }
/* The same lockup as the product wordmarks, with ALLi's own mark where the
   stepped E sits: FRONTSTEPS small above the name, the name in the same
   bold navy, the mark bottom-aligned beside it (E, 2026-10-15). */
.pcard .plogo-mark { display: flex; align-items: flex-end; gap: .3rem; height: 2rem; }
.pcard .plogo-mark-m { height: 1.55rem; width: auto; margin-bottom: .05rem; }
.pcard .plogo-mark-t { display: flex; flex-direction: column; align-items: flex-start; gap: .18rem; }
.pcard .plogo-mark-w { height: .42rem; width: auto; margin-left: .04rem; }
.pcard .plogo-mark-n { display: flex; align-items: center; gap: .5rem; }
.pcard .plogo-mark strong { font-size: 1.3rem; font-weight: 700; color: #fff; letter-spacing: -.01em; line-height: .95; }
.pcard .plogo-badge { font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: var(--hc-btn); border-radius: 1rem; padding: .12rem .5rem; line-height: 1.3; white-space: nowrap; }
/* The one dark tile: the navy of the header, white lockup, green mark. */
.pcard-dark { background: var(--fs-navy-900); border-color: var(--fs-navy-900); color: #fff; }
.pcard-dark:hover { border-color: var(--fs-green-10); }
.pcard.pcard-dark .pdesc { color: #fff; }
/* The green tile: the inverse of the dark one, the buttons' deeper green with the kit's white wordmark. */
.pcard-green { background: var(--hc-btn); border-color: var(--hc-btn); color: #fff; }
.pcard-green:hover { border-color: var(--fs-navy-900); }
.pcard.pcard-green .pdesc { color: #fff; }
/* The coloured tiles carry their weight in the mark, not the fill (E,
   2026-10-15): more air inside, the wordmark a step larger. */
.pcard-dark, .pcard-green { padding: 1.3rem 1.4rem 1.25rem; gap: .5rem; }
.pcard-dark .plogo, .pcard-green .plogo, .pcard-dark .plogo-mark { height: 2.35rem; }
.pcard-dark .plogo-mark-m { height: 1.8rem; }
.pcard-dark .plogo-mark strong { font-size: 1.5rem; }
.pcard-dark .plogo-mark-w { height: .48rem; }
.pcard .pdesc { font-size: .8rem; color: var(--fs-fg-muted); }
.notyet { border: 1px dashed var(--fs-border); border-radius: .5rem; padding: 1.1rem 1.3rem; color: var(--fs-fg-muted); font-size: .9rem; background: var(--fs-bg-2); }
.stuck { border: 1px solid var(--fs-border); border-radius: .5rem; padding: .95rem 1.3rem 1rem; background: var(--fs-bg-2); }
.stuckphone { font-weight: 700; color: var(--fs-fg); white-space: nowrap; }
.stuckphone:hover { color: var(--fs-accent-blue); }
.stuck p { margin: 0 0 .45rem; }
.stuckhours { list-style: none; padding: 0; margin: 0 0 .75rem; }
.stuckhours li { margin: .25rem 0; }
.stuck-actions { display: flex; gap: .7rem; }
.stuck-actions .btn { flex: 1; text-align: center; padding-left: .6rem; padding-right: .6rem; }
/* the side step beside the main action: same size, quiet colours */
.btn-second { background: var(--fs-bg-2); color: var(--fs-fg); border: 1px solid var(--fs-border); box-shadow: none; }
.btn-second:hover { background: var(--fs-bg); }

.rule { border-bottom: 2px solid var(--fs-green-10); padding-bottom: .4rem; margin: 2.5rem 0 1.2rem; font-size: 1.3rem; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 1rem; }
.tile { display: flex; justify-content: space-between; align-items: center; border: 1px solid var(--fs-border); border-radius: .5rem; padding: 1rem 1.2rem; color: var(--fs-fg); background: var(--fs-bg-0); }
.tile:hover { border-color: var(--fs-green-10); text-decoration: none; }
.pill { background: var(--fs-bg-2); border-radius: 1rem; padding: .1rem .6rem; font-size: .8rem; color: var(--fs-fg-muted); }

.crumbs { padding: 1rem 1.5rem; font-size: .85rem; color: var(--fs-fg-muted); }
.article { max-width: 52rem; padding-bottom: 3rem; }
.article h1 { font-size: 2rem; margin: .6rem 0; }
.article .meta { color: var(--fs-fg-muted); font-size: .85rem; }
.article .body img { max-width: 100%; height: auto; border: 1px solid var(--fs-border-soft); border-radius: .3rem; }
/* A span pasted from Word around an image shrink-wraps it, and a percentage
   max-width cannot shrink what its container is sized by; the build removes
   the usual wrapper (tools/article-images.mjs) and this holds any other. */
.article .body span[style*="inline-block"] { max-width: 100%; }
.article .body { line-height: 1.65; }
.tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip { background: var(--fs-bg-2); border: 1px solid var(--fs-border-soft); border-radius: 1rem; padding: .15rem .7rem; font-size: .75rem; font-weight: 600; }
.badge { border-radius: .25rem; padding: .15rem .5rem; font-size: .7rem; font-weight: 700; letter-spacing: .05em; }
.badge-live { background: var(--fs-green-1); color: var(--fs-green-20); }
.badge-review { background: var(--fs-warning-50, var(--fs-bg-2)); color: var(--fs-warning-200, var(--fs-fg)); }
.badge-internal { background: var(--fs-error-50); color: var(--fs-error-200); }
.badge-src, .badge-tax { background: var(--fs-bg-2); color: var(--fs-fg-muted); }
.badge-cf { background: var(--fs-info-50); color: var(--fs-info-200); }
.cf-banner { border: 1px solid var(--fs-info-100); background: var(--fs-info-50); border-radius: .5rem; padding: 1rem 1.2rem; margin: 1rem 0; font-size: .9rem; }
.cf-banner pre { white-space: pre-wrap; max-height: 24rem; overflow: auto; background: var(--fs-bg-0); padding: 1rem; }

.browse { display: grid; grid-template-columns: 15rem 1fr; gap: 2.5rem; padding-bottom: 3rem; }
#facets h4 { font-size: .72rem; letter-spacing: .18em; color: var(--fs-fg-muted); margin: 1.2rem 0 .4rem; }
#facets label { display: flex; justify-content: space-between; align-items: flex-start; gap: .6rem; font-size: .88rem; padding: .2rem 0; cursor: pointer; }
/* A long value wraps beside its radio, not under it. */
#facets label > span:first-child { display: flex; align-items: flex-start; gap: .35rem; }
#facets label input { margin-top: .2rem; flex: none; }
#facets label.off { opacity: .35; }
#facets .fcount { color: var(--fs-fg-muted); }
.browse-top { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.browse-top input { flex: 1; padding: .6rem .9rem; border: 1px solid var(--fs-border); border-radius: .3rem; font: inherit; }
.ans { border: 1px solid var(--fs-border); border-left: 3px solid var(--fs-green-10); border-radius: .5rem; padding: 1rem 1.2rem; margin-bottom: 1.2rem; background: var(--fs-bg-2); }
.ans-loading { color: var(--fs-fg-muted); font-size: .85rem; }
/* A Confluence page as Confluence holds it (tools/confluence-storage.mjs): its panels and the note where its images would be. */
.article .body .cf-panel { border: 1px solid var(--fs-border); border-left: 3px solid var(--fs-green-10); border-radius: .4rem; padding: .7rem 1rem; margin: 1rem 0; background: var(--fs-bg-2); }
.article .body .cf-images-note { color: var(--fs-fg-muted); font-size: .85rem; font-style: italic; }
/* While the answer is on its way (E, 2026-10-14): lines where its text will
   be, and a status line that moves on with the wait. Still for anyone whose
   device asks for less motion. */
.ans-asked { margin: 0 0 .7rem; color: var(--fs-fg-muted); font-style: italic; font-size: .9rem; overflow-wrap: anywhere; }
.ans-line { height: .45rem; border-radius: .25rem; background: var(--fs-bg-0); border: 1px solid var(--fs-border-soft); margin-bottom: .8rem; overflow: hidden; }
.ans-line span { display: block; height: 100%; border-radius: .25rem; background: linear-gradient(90deg, var(--fs-green-10) 0%, var(--fs-green-5) 45%, var(--fs-green-10) 100%); background-size: 200% 100%; animation: ans-shimmer 1.6s linear infinite; transition: width 1.2s cubic-bezier(.2, .7, .3, 1); }
.ans-step { margin: 0; display: flex; align-items: center; gap: .55rem; font-size: .85rem; color: var(--fs-fg-muted); }
.ans-dots { display: inline-flex; gap: .2rem; }
.ans-dots i { width: .38rem; height: .38rem; border-radius: 50%; background: var(--fs-green-10); animation: ans-dot 1.2s ease-in-out infinite; }
.ans-dots i:nth-child(2) { animation-delay: .2s; }
.ans-dots i:nth-child(3) { animation-delay: .4s; }
@keyframes ans-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@keyframes ans-dot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-.15rem); } }
@media (prefers-reduced-motion: reduce) { .ans-line span, .ans-dots i { animation: none; } .ans-line span { transition: none; } .ans-dots i { opacity: .6; } }
/* Still need help: after a No, and when nothing matched. */
.ans-help { margin-top: .7rem; padding: .8rem 1rem; border: 1px solid var(--fs-border); border-radius: .5rem; background: var(--fs-bg-0); display: flex; align-items: center; justify-content: space-between; gap: .8rem 1rem; flex-wrap: wrap; }
.ans-help p { margin: 0; color: var(--fs-fg); font-size: .88rem; }
.ans-help .btn { padding: .55rem 1.1rem; font-size: .78rem; }
.ans-fb.ans-done { display: block; color: var(--fs-fg); }
.ans-fb.ans-done > p { margin: 0; }
.ans .kicker { margin: 0 0 .6rem; }
.ans-text { line-height: 1.55; margin-bottom: .8rem; }
.ans-text p { margin: 0 0 .6rem; }
.ans-text ul { margin: 0 0 .6rem; padding-left: 1.2rem; }
.ans-text li { margin: .15rem 0; }
/* Citations are soft gray chips (E, 2026-10-21, option B): white on the
   panel's gray, a hairline edge, muted figures, so they mark a source
   without competing with the green buttons. Hover and focus darken them. */
.ans-cite { display: inline-block; box-sizing: border-box; vertical-align: .12em; min-width: 1.25rem; height: 1.2rem; line-height: calc(1.2rem - 2px); padding: 0 .25rem; text-align: center; border-radius: .3rem; background: var(--fs-bg-0); border: 1px solid var(--fs-border); color: var(--fs-fg-muted); font-size: .75rem; font-weight: 600; margin: 0 .1em; text-decoration: none; }
.ans-cite:hover, .ans-cite:focus-visible { border-color: var(--fs-navy-10); color: var(--fs-fg); text-decoration: none; outline: none; }
.ans-cite:focus-visible { box-shadow: 0 0 0 2px var(--fs-green-10); }
.ans-p-hit { animation: ans-hit 1.6s ease-out; }
@keyframes ans-hit { 0% { background: var(--fs-green-1); } 100% { background: transparent; } }
.ans-text code { background: var(--fs-bg-0); border: 1px solid var(--fs-border-soft); border-radius: .2rem; padding: 0 .25rem; font-size: .9em; }
.ans-srcline { font-size: .72rem; letter-spacing: .14em; color: var(--fs-fg-muted); font-weight: 600; margin-bottom: .2rem; }
/* The Sources list numbers match the citations in the text. */
.ans-n { display: inline-block; box-sizing: border-box; min-width: 1.25rem; height: 1.2rem; line-height: calc(1.2rem - 2px); padding: 0 .25rem; text-align: center; border-radius: .3rem; background: var(--fs-bg-0); border: 1px solid var(--fs-border); color: var(--fs-fg-muted); font-size: .75rem; font-weight: 600; margin-right: .4rem; }
.ans-p:hover .ans-n { border-color: var(--fs-navy-10); color: var(--fs-fg); }
.ans-p { display: block; padding: .5rem 0; border-top: 1px solid var(--fs-border-soft); color: var(--fs-fg); }
.ans-p[hidden] { display: none; }
.ans-p:hover { text-decoration: none; }
.ans-p:hover strong { text-decoration: underline; }
.ans-p-head { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.ans-p strong { color: var(--fs-accent-blue); font-size: .92rem; flex: 1; min-width: 0; }
.ans-p .ans-n { flex: none; margin: 0; }
/* A page cited under two numbers shows both, apart (server/answer.mjs mergeSamePage). */
.ans-p .ans-n + .ans-n { margin-left: .2rem; }
.ans-prod { flex: none; font-size: .68rem; font-weight: 600; letter-spacing: .04em; color: var(--fs-fg-muted); background: var(--fs-bg-0); border: 1px solid var(--fs-border-soft); border-radius: 1rem; padding: .05rem .55rem; white-space: nowrap; }
.ans-p .ans-snip { display: block; margin: .2rem 0 0 1.6rem; color: var(--fs-fg-muted); font-size: .82rem; line-height: 1.4; }
.ans-more { display: block; width: 100%; margin-top: .2rem; padding: .45rem 0; border: 0; border-top: 1px solid var(--fs-border-soft); background: transparent; color: var(--fs-accent-blue); font: inherit; font-size: .82rem; font-weight: 600; text-align: left; cursor: pointer; }
.ans-more:hover { text-decoration: underline; }
/* A source with nothing to quote says so, in a voice that is visibly not a quotation. */
.ans-p .ans-empty { font-style: italic; }
.ans-note { margin-top: .7rem; font-size: .75rem; color: var(--fs-fg-muted); }
.ans-fb { margin-top: .7rem; padding-top: .6rem; border-top: 1px solid var(--fs-border-soft); font-size: .82rem; color: var(--fs-fg-muted); display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.ans-fb button { font: inherit; font-size: .78rem; font-weight: 600; color: var(--fs-accent-blue); background: transparent; border: 1px solid var(--fs-border); border-radius: .3rem; padding: .15rem .7rem; cursor: pointer; }
.ans-fb button:hover:not(:disabled) { border-color: var(--fs-accent-blue); }
.ans-fb button:disabled { opacity: .5; cursor: default; }
.ans-fb.ans-why { display: block; color: var(--fs-fg); }
.ans-why-h { font-weight: 600; margin-bottom: .4rem; }
.ans-why-tags { display: flex; flex-wrap: wrap; gap: .3rem .9rem; margin-bottom: .5rem; }
.ans-why-tags label { display: inline-flex; align-items: center; gap: .3rem; cursor: pointer; }
.ans-why textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: .82rem; padding: .4rem .5rem; border: 1px solid var(--fs-border); border-radius: .3rem; background: var(--fs-bg-0); color: var(--fs-fg); resize: vertical; }
.ans-why-act { display: flex; gap: .5rem; margin-top: .45rem; }
.ans-fb .ans-why-skip { color: var(--fs-fg-muted); }
/* The owner field's people list (publishers): the fleet's matches, under
   the input, each a button. */
.authform label.owner { position: relative; }
.authform .people { position: absolute; left: 0; right: 0; top: 100%; z-index: 30; margin-top: .2rem; background: var(--fs-bg-0); border: 1px solid var(--fs-border); border-radius: .4rem; box-shadow: 0 10px 28px rgba(11, 31, 74, .14); max-height: 16rem; overflow-y: auto; }
.authform .people .person { display: block; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--fs-border-soft); padding: .55rem .8rem; font: inherit; font-size: .9rem; cursor: pointer; color: var(--fs-fg); }
.authform .people .person:last-child { border-bottom: 0; }
.authform .people .person:hover, .authform .people .person:focus-visible { background: var(--fs-bg-2); outline: none; }
/* The register page's "suggested" tag sits beside its field's label as a
   small badge, never stretched to the field's width. */
.authform .sugg { align-self: flex-start; margin: .1rem 0 .25rem; }
/* A source that is a held original: the Salesforce page, said so in a tag,
   because the link leaves the help center. */
.ans-tag { display: inline-block; margin: .1rem 0 .2rem; font-size: .66rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--fs-warning-200, var(--fs-fg-muted)); background: var(--fs-warning-50, var(--fs-bg-2)); border-radius: .25rem; padding: 0 .4rem; line-height: 1.6; }
.result { border-bottom: 1px solid var(--fs-border-soft); padding: .8rem 0; }
.result .rmeta { font-size: .78rem; color: var(--fs-fg-muted); }
table { border-collapse: collapse; width: 100%; font-size: .88rem; margin-bottom: 2rem; }
td, th { border-bottom: 1px solid var(--fs-border-soft); text-align: left; padding: .45rem .6rem; vertical-align: top; }
th { font-size: .72rem; letter-spacing: .1em; color: var(--fs-fg-muted); }
/* A table inside an article or the editor keeps the look of a document
   table: a header row in the brand navy with white text, banded rows below.
   A registered Word document arrives with its header row marked (mammoth
   writes th for Word's repeat-header rows); the site's own index tables above
   keep their quiet labels. */
.article .body th, .ed-host .ProseMirror th { font-size: .82rem; letter-spacing: 0; text-transform: none; font-weight: 700; color: var(--fs-bg-0, #fff); background: var(--fs-navy-900); border-bottom: 0; }
.article .body th p, .ed-host .ProseMirror th p, .article .body td p, .ed-host .ProseMirror td p { margin: 0; }
.article .body th + th, .ed-host .ProseMirror th + th { border-left: 1px solid var(--fs-navy-800, var(--fs-navy-200)); }
.article .body tbody tr:nth-child(even) td { background: var(--fs-bg-2); }
.ed-host .ProseMirror th { border-color: var(--fs-navy-800, var(--fs-navy-200)); }

.footer { background: var(--fs-navy-900); color: var(--fs-navy-100); margin-top: 3rem; }
.foot-in { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2rem; padding: 2.5rem 1.5rem 1.5rem; }
.footer h4 { font-size: .7rem; letter-spacing: .18em; color: var(--fs-navy-200); margin: 0 0 .6rem; }
.footer a { display: block; color: var(--fs-navy-100); font-size: .85rem; padding: .15rem 0; }
.foot-legal { border-top: 1px solid var(--fs-navy-800, var(--fs-navy-200)); padding: 1rem 1.5rem; font-size: .78rem; }
@media (max-width: 720px) { .cols, .browse, .foot-in { grid-template-columns: 1fr; } }
.img-missing { display: block; border: 1px dashed var(--fs-border); background: var(--fs-bg-2); color: var(--fs-fg-muted); border-radius: .3rem; padding: 1.4rem; text-align: center; font-size: .8rem; margin: .5rem 0; }

/* Click-to-load video. The poster and control are ours; the third party iframe
   is created only on activation, so a reader who never plays a video sends no
   request to YouTube or Vimeo. */
.video-holder { margin: 1.2rem 0; }
.video-cta { display: block; position: relative; width: 100%; max-width: 42rem; padding: 0; border: 1px solid var(--fs-border); border-radius: .5rem; background: var(--fs-bg-2); cursor: pointer; overflow: hidden; text-align: left; }
.video-cta:hover { border-color: var(--fs-green-10); }
.video-cta img { display: block; width: 100%; height: auto; }
.video-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 3.2rem; height: 3.2rem; border-radius: 50%; background: rgba(16, 24, 40, .72); color: #fff; font-size: 1.1rem; line-height: 3.2rem; text-align: center; }
.video-cta:hover .video-play { background: var(--fs-green-15); }  /* 4.21:1 with the white glyph, clears the 3:1 non-text minimum */
.video-title { display: block; padding: .6rem .9rem; font-size: .9rem; font-weight: 600; color: var(--fs-fg); }
.video-cta:not(:has(img)) { min-height: 7rem; }
.video-player { display: block; width: 100%; max-width: 42rem; aspect-ratio: 16 / 9; border: 0; border-radius: .5rem; background: #000; }
.video-alt { display: inline-block; margin-top: .4rem; font-size: .8rem; }

/* Authoring forms */
.authform { display: flex; flex-direction: column; gap: .9rem; margin: 1.2rem 0; }
.authform label { display: flex; flex-direction: column; gap: .3rem; font-size: .8rem; letter-spacing: .06em; font-weight: 600; color: var(--fs-fg-muted); text-transform: uppercase; }
.authform input, .authform select, .authform textarea { font: inherit; padding: .55rem .7rem; border: 1px solid var(--fs-border); border-radius: .3rem; text-transform: none; letter-spacing: normal; color: var(--fs-fg); background: var(--fs-bg-0); }
.authform textarea { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85rem; line-height: 1.5; }
.authform .tax { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .8rem; }
/* The body is not a label: a label wrapping the editor hands every click on
   its non-interactive content (a table cell, say) to its first button, the
   HTML source toggle, so editing a table flipped the editor to source
   (E, 2026-10-02). A field with a caption behaves. */
.authform .field { display: flex; flex-direction: column; gap: .3rem; }
.authform .lbl { font-size: .8rem; letter-spacing: .06em; font-weight: 600; color: var(--fs-fg-muted); text-transform: uppercase; }
.authform .tools { display: flex; gap: .5rem; margin-bottom: .3rem; }
.authform .tools button { font: inherit; font-size: .78rem; padding: .35rem .7rem; border: 1px solid var(--fs-border); border-radius: .3rem; background: var(--fs-bg-2); cursor: pointer; }
.authform .tools button:hover { border-color: var(--fs-green-10); }
.authform .actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-top: .3rem; }
/* One row, one size: the primary (green) and quiet buttons share a height,
   type size and baseline; only the colour says which is which. Delete
   stands apart at the end, in the error colour, so it is never the button
   next to the one you meant. */
.authform .actions .btn, .authform .actions .btn-quiet { margin: 0; box-sizing: border-box; min-height: 2.5rem; padding: .55rem 1.1rem; font-size: .78rem; font-weight: 700; letter-spacing: .06em; line-height: 1.2; border: 1px solid transparent; border-radius: .3rem; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; }
.authform .actions .btn-quiet { border-color: var(--fs-border); }
.authform .actions .btn-danger { margin-left: auto; color: var(--fs-error-200); border-color: var(--fs-error-200); background: transparent; }
.authform .actions .btn-danger:hover { background: var(--fs-error-50); border-color: var(--fs-error-200); }
.authform .actions #msg { flex-basis: 100%; }
.authform .actions #msg:empty { display: none; }

/* ---- authoring editor (Tiptap) ---- */
.ed-bar { display: flex; flex-wrap: wrap; gap: .15rem; align-items: center; padding: .4rem; border: 1px solid var(--fs-border); border-bottom: 0; border-radius: .3rem .3rem 0 0; background: var(--fs-bg-2); }
.ed-bar button { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; padding: 0; border: 1px solid transparent; border-radius: .25rem; background: transparent; cursor: pointer; }
.ed-bar button:hover { border-color: var(--fs-border); background: var(--fs-bg-0); }
.ed-bar button.on { background: var(--fs-green-1); border-color: var(--fs-green-10); }
.ed-bar .mi { font-size: 1.15rem; background: none; -webkit-text-fill-color: currentColor; color: var(--fs-fg); }
.ed-bar .ed-sep { width: 1px; height: 1.4rem; margin: 0 .3rem; background: var(--fs-border); }
.ed-host .ProseMirror { min-height: 22rem; max-height: 60vh; overflow: auto; padding: 1rem 1.1rem; border: 1px solid var(--fs-border); border-radius: 0 0 .3rem .3rem; background: var(--fs-bg-0); line-height: 1.65; text-transform: none; letter-spacing: normal; font-weight: 400; color: var(--fs-fg); }
.ed-host .ProseMirror:focus { outline: 2px solid var(--fs-green-10); outline-offset: -2px; }
.ed-host .ProseMirror > * + * { margin-top: .7rem; }
.ed-host .ProseMirror h2 { font-size: 1.4rem; }
.ed-host .ProseMirror h3 { font-size: 1.15rem; }
.ed-host .ProseMirror img { max-width: 100%; height: auto; border: 1px solid var(--fs-border-soft); border-radius: .3rem; }
.ed-host .ProseMirror table { border-collapse: collapse; width: 100%; }
.ed-host .ProseMirror th, .ed-host .ProseMirror td { border: 1px solid var(--fs-border); padding: .35rem .5rem; }
.ed-host .ProseMirror pre { background: var(--fs-bg-2); padding: .7rem .9rem; border-radius: .3rem; overflow: auto; }
.ed-host .ProseMirror .panel { border-left: 3px solid var(--fs-accent-blue); background: var(--fs-bg-2); padding: .7rem .9rem; border-radius: .3rem; }
.ed-host .ProseMirror details { border: 1px solid var(--fs-border); border-radius: .3rem; padding: .5rem .8rem; }
.ed-video { display: flex; align-items: center; gap: .6rem; padding: .7rem .9rem; border: 1px dashed var(--fs-border); border-radius: .4rem; background: var(--fs-bg-2); }
.ed-video-t { font-weight: 600; }
.ed-video-m { font-size: .78rem; color: var(--fs-fg-muted); }

/* Article rendering of a callout, so authored panels look right on the page */
.article .body .panel { border-left: 3px solid var(--fs-accent-blue); background: var(--fs-bg-2); padding: .8rem 1rem; border-radius: .3rem; margin: 1rem 0; }
.article .body .panel-warning { border-left-color: var(--fs-error-200); }
.article .body .panel-success { border-left-color: var(--fs-green-10); }
.article .body details { border: 1px solid var(--fs-border); border-radius: .3rem; padding: .6rem .9rem; margin: 1rem 0; }
.article .body summary { cursor: pointer; font-weight: 600; }

/* ---- video insert dialog ---- */
.vd-back { position: fixed; inset: 0; background: rgba(16,24,40,.5); display: flex; align-items: flex-start; justify-content: center; padding: 4vh 1rem; z-index: 50; overflow: auto; }
.vd { background: var(--fs-bg-0); border-radius: .6rem; padding: 1.4rem 1.5rem; width: 100%; max-width: 34rem; box-shadow: 0 12px 40px rgba(16,24,40,.25); }
.vd h2 { margin: 0 0 1rem; font-size: 1.2rem; }
.vd label { display: block; font-size: .75rem; letter-spacing: .06em; font-weight: 600; text-transform: uppercase; color: var(--fs-fg-muted); margin-bottom: .9rem; }
.vd input[type=text], .vd input:not([type]) { width: 100%; margin-top: .3rem; font: inherit; padding: .55rem .7rem; border: 1px solid var(--fs-border); border-radius: .3rem; text-transform: none; letter-spacing: normal; color: var(--fs-fg); }
.vd-hint { font-size: .78rem; color: var(--fs-fg-muted); font-weight: 400; text-transform: none; letter-spacing: normal; }
.vd-detect { font-size: .8rem; color: var(--fs-fg-muted); margin: -.4rem 0 .9rem; }
.vd-detect.ok { color: var(--fs-green-20); font-weight: 600; }
.vd-preview { margin-bottom: 1rem; }
.vd-preview iframe, .vd-preview video { width: 100%; aspect-ratio: 16/9; border: 0; border-radius: .4rem; background: #000; }
.vd-poster { border: 1px solid var(--fs-border); border-radius: .4rem; padding: .8rem .9rem; margin-bottom: 1rem; }
.vd-poster legend { font-size: .75rem; letter-spacing: .06em; font-weight: 600; text-transform: uppercase; color: var(--fs-fg-muted); padding: 0 .3rem; }
.vd-poster-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .5rem; }
.vd-poster-row button, .vd-actions button { font: inherit; font-size: .8rem; padding: .45rem .8rem; border: 1px solid var(--fs-border); border-radius: .3rem; background: var(--fs-bg-2); cursor: pointer; }
.vd-poster-row button:hover, .vd-actions button:hover { border-color: var(--fs-green-10); }
.vd-poster-img { display: block; max-width: 14rem; margin-top: .5rem; border: 1px solid var(--fs-border-soft); border-radius: .3rem; }
.vd-actions { display: flex; justify-content: flex-end; gap: .6rem; align-items: center; }
.vd-actions .btn { border: 0; }
.vd-actions .btn:disabled { opacity: .5; cursor: not-allowed; }

/* Video-first panel: when format is Video, the video leads the page */
/* A light accent tint behind dark text, not a saturated block. The green ramp
   names its light tints -1 and -2; -5 (#6DD26D) is a mid tone, and using it as
   a background put dark text on saturated green and made the panel shout. */
/* ---- writing help in the editor ---- */
.authform .tools .wh { position: relative; display: inline-block; }
.wh-menu { position: absolute; z-index: 20; top: calc(100% + .3rem); left: 0; min-width: 15rem; background: var(--fs-bg-0); border: 1px solid var(--fs-border); border-radius: .4rem; box-shadow: 0 6px 20px rgba(0,0,0,.12); padding: .3rem; display: flex; flex-direction: column; }
.wh-menu[hidden] { display: none; }
.authform .tools .wh-menu button { border: 0; background: transparent; text-align: left; padding: .45rem .6rem; border-radius: .25rem; font-size: .82rem; }
.authform .tools .wh-menu button:hover, .authform .tools .wh-menu button:focus { background: var(--fs-bg-2); }
.wh-panel { border: 1px solid var(--fs-border); border-left: 3px solid var(--fs-accent-blue); border-radius: .5rem; background: var(--fs-bg-2); padding: .9rem 1rem; margin: .8rem 0; }
.wh-head { margin-bottom: .5rem; }
.wh-preview { background: var(--fs-bg-0); border: 1px solid var(--fs-border-soft); border-radius: .3rem; padding: .8rem 1rem; max-height: 28rem; overflow: auto; }
.wh-ask { width: 100%; box-sizing: border-box; font: inherit; font-size: .88rem; padding: .5rem; border: 1px solid var(--fs-border); border-radius: .3rem; background: var(--fs-bg-0); color: var(--fs-fg); resize: vertical; }
.wh-act { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-top: .7rem; }
.wh-act .btn, .wh-act .btn-quiet { margin: 0; min-height: 2.3rem; padding: .5rem 1rem; font-size: .78rem; display: inline-flex; align-items: center; }
.wh-act .meta { flex-basis: 100%; }
.vpanel { border: 1px solid var(--fs-green-2); border-left: 3px solid var(--fs-green-10); border-radius: .5rem; background: var(--fs-green-1); padding: .9rem 1rem; margin-bottom: 1rem; }
.vpanel-empty, .vpanel-item { display: flex; align-items: center; gap: .9rem; }
.vpanel-item + .vpanel-item { margin-top: .7rem; padding-top: .7rem; border-top: 1px solid var(--fs-border-soft); }
.vpanel-empty > div, .vpanel-item > div { flex: 1; }
.vpanel-empty strong, .vpanel-item strong { font-size: .95rem; text-transform: none; letter-spacing: normal; }
.vpanel-hint { margin: .15rem 0 0; font-size: .78rem; color: var(--fs-fg-muted); font-weight: 400; text-transform: none; letter-spacing: normal; }
.vpanel-item img { width: 7rem; height: auto; border-radius: .3rem; border: 1px solid var(--fs-border-soft); }
.vpanel-noposter { display: inline-block; width: 7rem; padding: 1.2rem 0; text-align: center; font-size: .7rem; color: var(--fs-fg-muted); border: 1px dashed var(--fs-border); border-radius: .3rem; }
.vpanel .btn, .vpanel .btn-quiet { margin-top: 0; white-space: nowrap; }
.vd-orrow { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: -.4rem 0 1rem; }
.vd-orrow button { font: inherit; font-size: .8rem; padding: .45rem .8rem; border: 1px solid var(--fs-border); border-radius: .3rem; background: var(--fs-bg-2); cursor: pointer; }
.vd-orrow button:hover { border-color: var(--fs-green-10); }
.vd-poster-row button:disabled { opacity: .45; cursor: not-allowed; }

/* ---------- /videos/ ----------
   A grid of posters, because a video listed as a title is invisible. Each
   card's poster is the harvested thumbnail or one from the committed cache,
   never a hotlink, so the page sends nothing to a provider until someone
   presses play. video.js upgrades the poster link in place, so the player
   opens inside the card; the rules below let the article-page player fill a
   card instead of its 42rem column. */
.pagehead { padding: 1.5rem 1.5rem 0; }
.pagehead h1 { margin: 0 0 .4rem; font-size: 1.9rem; }
.pagehead p { margin: 0; color: var(--fs-fg-muted); font-size: .95rem; max-width: 46rem; }
.pills { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.1rem 0 .5rem; }
.pillbtn { display: inline-flex; align-items: center; gap: .35rem; font: inherit; font-size: .8rem; font-weight: 600; color: var(--fs-fg); background: var(--fs-bg-0); border: 1px solid var(--fs-border); border-radius: 999px; padding: .35rem .85rem; cursor: pointer; text-decoration: none; }
.pillbtn span { color: var(--fs-fg-muted); font-weight: 500; }
.pillbtn:hover { border-color: var(--fs-green-10); text-decoration: none; }
.pillbtn:focus-visible { outline: 2px solid var(--fs-green-10); outline-offset: 2px; }
.pillbtn.is-on { background: var(--fs-navy-25); border-color: var(--fs-navy-25); color: var(--fs-bg-0); }
.pillbtn.is-on span { color: var(--fs-navy-5); }
.vsection { padding: 0 1.5rem; }
.vsection .rule { margin-top: 2.2rem; font-size: 1.15rem; }
.vsection .rule small { font-weight: 500; color: var(--fs-fg-muted); font-size: .8rem; margin-left: .5rem; }
.vgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1.4rem 1.25rem; padding-bottom: 1rem; }
.vcard { display: flex; flex-direction: column; gap: .45rem; min-width: 0; }
.vposterwrap { position: relative; border: 1px solid var(--fs-border); border-radius: .5rem; overflow: hidden; background: var(--fs-bg-2); box-shadow: var(--fs-shadow-card, 0 1px 2px rgba(16,24,40,.06)); }
.vposterwrap:hover, .vposterwrap:focus-within { border-color: var(--fs-green-10); }
.vposterwrap .cs-video-card, .vposterwrap .cs-video-link { display: block; position: relative; }
.vposterwrap .is-gone .vnoposter { color: var(--fs-fg-muted); background: var(--fs-bg-2); text-transform: none; letter-spacing: 0; font-weight: 500; }
.vposterwrap .cs-video-card img, .vposterwrap .cs-video-link img, .vposterwrap .video-cta img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }  /* crops YouTube's 4:3 letterbox to the 16:9 frame inside it */
.vposterwrap .video-holder, .vposterwrap .video-cta, .vposterwrap .video-player { margin: 0; max-width: none; border: 0; border-radius: 0; width: 100%; }
.vposterwrap .video-cta { background: var(--fs-bg-2); }
.vposterwrap .video-player { aspect-ratio: 16 / 9; }
.vposterwrap .video-alt { display: block; padding: .35rem .7rem .45rem; font-size: .75rem; }
.vnoposter { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; padding: 1rem; text-align: center; color: var(--fs-fg-muted); font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; background: linear-gradient(180deg, var(--fs-navy-1), var(--fs-bg-2)); }
.cs-video-play, .vposterwrap .video-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 3rem; height: 3rem; border-radius: 50%; background: rgba(16, 24, 40, .72); color: #fff; font-size: 1rem; line-height: 3rem; text-align: center; pointer-events: none; }
.vposterwrap:hover .cs-video-play, .vposterwrap:hover .video-play { background: var(--fs-green-15); }
.vdur { position: absolute; right: .5rem; bottom: .5rem; z-index: 1; background: rgba(16, 24, 40, .78); color: #fff; font-size: .72rem; font-weight: 600; padding: .1rem .45rem; border-radius: .25rem; pointer-events: none; font-variant-numeric: tabular-nums; }
.vposterwrap:has(iframe, video) .vdur { display: none; }  /* the badge is for the poster; once the player is in the card it would sit over the picture */
.vtitle { margin: 0; font-size: .95rem; line-height: 1.35; font-weight: 600; }
.vtitle a { color: var(--fs-fg); }
.vmeta { font-size: .78rem; color: var(--fs-fg-muted); }
.vnote { margin: 1.2rem 1.5rem 0; }

/* ---------- /updates/ ----------
   A changelog, because a release note is a date with changes under it, not a
   title. Month headings carry the chronology; each entry shows the note's own
   headline, product, version string when it printed one, and the itemised
   changes it listed, in its own words. Nothing is summarised by us. */
.relwrap { padding: 0 1.5rem 3rem; max-width: 52rem; }
.relstatus { font-size: .85rem; color: var(--fs-fg-muted); margin: .2rem 0 0; min-height: 1.2rem; }
.relmonth h2 { font-size: 1.05rem; margin: 2.2rem 0 .3rem; padding-bottom: .4rem; border-bottom: 2px solid var(--fs-green-10); display: flex; align-items: baseline; gap: .6rem; }
.relmonth h2 small { font-size: .75rem; font-weight: 500; color: var(--fs-fg-muted); }
.rel { padding: 1rem 0 1.1rem; border-bottom: 1px solid var(--fs-border-soft); }
.relhead { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .7rem; font-size: .8rem; color: var(--fs-fg-muted); }
.reldate { font-weight: 600; color: var(--fs-fg); font-variant-numeric: tabular-nums; }
.relver { font-size: .75rem; }
.relhl { margin: .35rem 0 .15rem; font-size: 1.02rem; line-height: 1.35; font-weight: 600; }
.relhl a { color: var(--fs-accent-blue); }
/* Harvested notes can carry an unbroken token, a rule of underscores or a
   long path; wrap it rather than let one note widen the page. */
.relhl, .relex, .relsec li, .relver, .vtitle { overflow-wrap: anywhere; }
.relmore { margin-top: .35rem; }
.relmore summary { cursor: pointer; font-size: .82rem; font-weight: 600; color: var(--fs-fg); list-style: none; display: inline-flex; align-items: center; gap: .4rem; }
.relmore summary::-webkit-details-marker { display: none; }
.relmore summary::before { content: '▸'; color: var(--fs-green-15); transition: transform .12s; }
.relmore[open] summary::before { transform: rotate(90deg); }
.relmore summary:focus-visible { outline: 2px solid var(--fs-green-10); outline-offset: 2px; border-radius: .2rem; }
.relcount { color: var(--fs-fg-muted); font-weight: 500; }
.relsec h4 { margin: .8rem 0 .25rem; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--fs-fg-muted); font-weight: 600; }
.relsec ul { margin: 0; padding-left: 1.15rem; font-size: .9rem; line-height: 1.5; }
.relsec li { margin: .15rem 0; }
.relfull { display: inline-block; margin-top: .7rem; font-size: .82rem; font-weight: 600; }
.relex { margin: .25rem 0 0; font-size: .9rem; line-height: 1.5; color: var(--fs-fg-muted); }
.relempty { margin-top: 1.5rem; }
@media (max-width: 720px) { .vgrid { grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); } }
@media (max-width: 480px) { .vgrid { grid-template-columns: 1fr; } .pagehead h1 { font-size: 1.5rem; } }

/* ---------- editor: migration brief ----------
   What the migration document asked of this draft, shown above the editor so
   the owner sees the reason, the persona to confirm, and, for a hub, the
   sources to take in and in what order. Read only; the decision stays theirs. */
.mbrief { border: 1px solid var(--fs-border); border-left: 3px solid var(--fs-green-10); border-radius: .5rem; padding: 1rem 1.2rem; margin: 1rem 0 1.2rem; background: var(--fs-bg-2); }
.mbrief .kicker { margin: 0 0 .5rem; }
.mbrief-facts { display: grid; grid-template-columns: max-content 1fr; gap: .25rem 1rem; margin: 0 0 .6rem; font-size: .88rem; }
.mbrief-facts dt { color: var(--fs-fg-muted); }
.mbrief-facts dd { margin: 0; }
.mbrief-text p { margin: 0 0 .5rem; font-size: .9rem; line-height: 1.5; }
.mbrief-absorbs { margin: .3rem 0 0; padding-left: 1.2rem; font-size: .88rem; line-height: 1.45; }
.mbrief-absorbs li { margin: .35rem 0; }

/* ---------- signature: a page that no longer matches its Salesforce original ---------- */
.badge-diverged { background: var(--fs-info-50, #E8EBF5); color: var(--fs-navy-500, #2855C5); border: 1px solid var(--fs-navy-100, #C5CFEB); }
.signature { margin: .2rem 0 0; font-size: .82rem; color: var(--fs-fg-muted); }
.sfsync { border: 1px solid var(--fs-border); border-radius: .5rem; padding: .9rem 1.2rem; margin: 0 0 1.2rem; background: var(--fs-bg-0); }
.sfsync .kicker { margin: 0 0 .4rem; }
.sfsync-list { margin: .4rem 0 0; padding-left: 1.1rem; font-size: .85rem; line-height: 1.45; }
.sfsync-list li { margin: .3rem 0; }

/* ---------- home per the migration document (tools/home.mjs) ---------- */
.otherdoor { margin: .9rem auto 0; padding: 0 1.5rem; font-size: .88rem; color: var(--fs-fg-muted); }
.otherdoor a { font-weight: 600; }
.pgrid.six { grid-template-columns: repeat(3, 1fr); }
.cgrid { grid-template-columns: repeat(3, 1fr); }
.tile-empty { color: var(--fs-fg-muted); border-style: dashed; }
.subnav { display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: center; margin: 1rem 0 0; font-size: .85rem; color: var(--fs-fg-muted); }
.subnav a { font-weight: 600; display: inline-flex; gap: .4rem; align-items: center; }
.cols.one { grid-template-columns: 1fr; max-width: 40rem; }
.stucklink { display: inline-block; margin: .75rem 0 0; font-size: .85rem; font-weight: 600; }
.legacy { max-width: 52rem; padding-bottom: 3rem; }
.legacy h1 { font-size: 2rem; margin: .6rem 0; }
.legacy .lead { color: var(--fs-fg-muted); line-height: 1.5; }
.legacy .rule { display: flex; align-items: center; gap: .6rem; }
.legacylist { list-style: none; padding: 0; margin: 0; }
.legacylist li { padding: .45rem 0; border-bottom: 1px solid var(--fs-border-soft); font-size: .95rem; }
.legacynote { margin: 1.4rem 0 .4rem; padding-top: .9rem; border-top: 1px solid var(--fs-border-soft); font-size: .82rem; color: var(--fs-fg-muted); }
@media (max-width: 900px) { .pgrid.six, .cgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .pgrid.six, .cgrid { grid-template-columns: 1fr; } }

/* ---------- Confluence twins ---------- */
.cf-approved { border-color: var(--fs-green-10); background: var(--fs-green-5, #eef8ef); }
.cf-cands { font-size: .85rem; color: var(--fs-fg-muted); border-left: 3px solid var(--fs-border); padding: .3rem .8rem; margin: .6rem 0 1rem; }
tr.cf-newer td { background: var(--fs-info-50, #E8EBF5); }
.mbrief-cf { margin: .8rem 0; border: 1px solid var(--fs-border); border-radius: .4rem; padding: .5rem .9rem; background: var(--fs-bg-0); }
.mbrief-cf summary { cursor: pointer; font-weight: 600; font-size: .8rem; letter-spacing: .08em; }
.mbrief-cftext { max-height: 28rem; overflow: auto; font-size: .9rem; line-height: 1.5; margin-top: .5rem; }

.feedlink { font-size: .85rem; color: var(--fs-fg-muted); margin: .4rem 0 0; }
.feedlink a { font-weight: 600; }

.sitenotes .update .chip { margin-left: auto; }
.updates .update { align-items: center; }

/* ---------- staff bar (site/fleet-staff.js) ----------
   A slim bar above the header, shown only to signed-in staff. It lives outside
   the header so the header keeps one row: at 1000px the header has 952px, the
   brand takes 347 and the reader menu 574, and the staff controls (283px) no
   longer compete for that row (E, 2026-09-23). Readers never see the bar. */
.staffbar { background: var(--fs-navy-800, #0b1f4a); border-bottom: 1px solid rgba(255, 255, 255, .08); }
.staffbar-in { display: flex; align-items: center; justify-content: flex-end; gap: 1.25rem; padding: .4rem 1.5rem; flex-wrap: wrap; row-gap: .3rem; font-size: .75rem; }
.staffbar .staff-label { color: var(--fs-navy-200); letter-spacing: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.staffbar .staff-who { color: var(--fs-bg-0); font-weight: 600; }
.staffbar a, .staffbar .staff-out { color: var(--fs-navy-5); font-size: .72rem; letter-spacing: .08em; font-weight: 600; white-space: nowrap; }
.staffbar a:hover, .staffbar .staff-out:hover { color: var(--fs-bg-0); text-decoration: none; }
.staffbar .staff-out { background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; }
.staffbar a:focus-visible, .staffbar .staff-out:focus-visible { outline: 2px solid var(--fs-green-10); outline-offset: 3px; }
.staffbar .staff-out[disabled] { opacity: .5; cursor: default; }
/* The app switcher (E, 2026-09-23): One App's list of the fleet apps this
   person can open, as a small dropdown styled like the links beside it. A
   native details element, so it opens from the keyboard without script. */
.staffbar .staff-switch { position: relative; }
.staffbar .staff-switch > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .4rem; color: var(--fs-navy-5); font-size: .72rem; letter-spacing: .08em; font-weight: 600; white-space: nowrap; }
.staffbar .staff-switch > summary::-webkit-details-marker { display: none; }
.staffbar .staff-switch > summary::after { content: ""; width: .34rem; height: .34rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-.12rem) rotate(45deg); }
.staffbar .staff-switch[open] > summary::after { transform: translateY(.1rem) rotate(-135deg); }
.staffbar .staff-switch > summary:hover, .staffbar .staff-switch[open] > summary { color: var(--fs-bg-0); }
.staffbar .staff-switch > summary:focus-visible { outline: 2px solid var(--fs-green-10); outline-offset: 3px; }
.staffbar .staff-menu { position: absolute; right: 0; top: calc(100% + .5rem); z-index: 40; min-width: 15rem; max-width: calc(100vw - 2rem); max-height: 70vh; overflow-y: auto; padding: .35rem 0; background: var(--fs-bg-0); border: 1px solid var(--fs-border); border-radius: .5rem; box-shadow: 0 10px 28px rgba(11, 31, 74, .18); }
.staffbar .staff-menu .staff-item { display: flex; align-items: center; gap: .5rem; padding: .45rem .95rem; color: var(--fs-fg); font-size: .85rem; letter-spacing: 0; font-weight: 500; }
.staffbar .staff-menu .staff-item:hover, .staffbar .staff-menu .staff-item:focus-visible { background: var(--fs-bg-2); color: var(--fs-fg); outline: none; }
.staffbar .staff-menu .is-child { padding-left: 1.9rem; }
.staffbar .staff-menu .is-grandchild { padding-left: 2.85rem; }
.staffbar .staff-menu .is-here { font-weight: 600; }
.staffbar .staff-group { margin-top: .3rem; padding: .6rem .95rem .25rem; border-top: 1px solid var(--fs-border-soft); color: var(--fs-fg-muted); font-size: .66rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.staffbar .staff-tag { flex: none; font-size: .6rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--fs-fg-muted); border: 1px solid var(--fs-border); border-radius: .25rem; padding: 0 .3rem; line-height: 1.5; }
.staffbar .staff-item > span:first-child { margin-right: auto; }
.staffbar .staff-tag-here { color: var(--fs-green-20); border-color: currentColor; }
.staffbar .sw-short { display: none; }
/* The operational links on the bar (E, 2026-10-01), left of the switcher.
   They take the room the name and the buttons leave; the current page is
   underlined in the brand green, like the header's active mark. */
.staffbar .staff-links { display: flex; align-items: center; gap: 1.25rem; min-width: 0; margin-right: auto; overflow-x: auto; scrollbar-width: none; }
.staffbar .staff-links::-webkit-scrollbar { display: none; }
.staffbar .staff-link { display: inline-flex; align-items: center; gap: .35rem; }
.staffbar .staff-link[aria-current="page"] { color: var(--fs-bg-0); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .4em; text-decoration-color: var(--fs-green-10); }
.staffbar .staff-link .staff-tag { color: var(--fs-navy-5); border-color: var(--fs-navy-200); }
/* Narrow screens: one line still. "Signed in as" goes, the switcher reads
   APPS, a long name shortens with an ellipsis rather than wrapping, and the
   open list spans the bar instead of hanging off the left edge. */
@media (max-width: 560px) {
  .staffbar .staff-as { display: none; }
  .staffbar-in { gap: 1rem; padding: .4rem 1rem; flex-wrap: nowrap; position: relative; }
  .staffbar-in > * { flex: none; }
  /* The link row is the one thing that gives: it scrolls sideways, as the
     fleet header's row does on a phone, so the name and SIGN OUT stay put. */
  .staffbar .staff-links { flex: 1 1 auto; gap: 1rem; }
  .staffbar .staff-label { flex: 0 1 auto; }
  .staffbar .staff-switch { position: static; }
  .staffbar .staff-menu { left: 1rem; right: 1rem; min-width: 0; max-width: none; top: calc(100% + .25rem); }
  .staffbar .sw-name { display: none; }
  .staffbar .sw-short { display: inline; }
}
/* The staff door is styled exactly like the product sign-ins beside it (E, 2026-09-23). */

/* ---------- the sign-in page: staff only, in the site's own language ---------- */
.signin { max-width: 26rem; margin: 10vh auto 4rem; padding: 0 1.5rem; }
.signin .card { border: 1px solid var(--fs-border); border-radius: .6rem; background: var(--fs-bg-0); padding: 1.6rem 1.7rem; box-shadow: 0 1px 2px var(--fs-shadow, rgba(16, 24, 40, .05)); }
.signin h1 { font-size: 1.5rem; margin: 0 0 .3rem; }
.signin .kicker { margin: 0 0 .8rem; }
.signin p { margin: .3rem 0 .9rem; color: var(--fs-fg-muted); font-size: .9rem; line-height: 1.5; }
.signin label { display: block; font-size: .8rem; font-weight: 600; margin-top: .6rem; }
.signin input { width: 100%; padding: .7rem .9rem; margin: .3rem 0 .4rem; border: 1px solid var(--fs-border); border-radius: .4rem; font: inherit; background: var(--fs-bg-0); color: var(--fs-fg); }
.signin input:focus-visible { outline: 2px solid var(--fs-green-10); outline-offset: 1px; }
.signin .btn { width: 100%; margin-top: .8rem; }
.signin .err { color: var(--fs-red-60, #b42318); font-size: .85rem; min-height: 1.2em; margin-top: .5rem; }
.signin .notice { border: 1px solid var(--fs-border); border-left: 3px solid var(--fs-green-10); border-radius: .4rem; padding: .8rem 1rem; background: var(--fs-bg-2); font-size: .9rem; }
.signin .notice.warn { border-left-color: var(--fs-amber-50, #d69a00); }
.signin .who { font-weight: 600; color: var(--fs-fg); }
.signin .links { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
.signin .reader { text-align: center; font-size: .85rem; margin-top: 1.4rem; }

/* ---------- tables in their own scroll box ----------
   The build wraps every table (tools/build.mjs scrollTables). A wide table
   scrolls inside the box; the page itself never widens. Four or more columns
   get a floor width so they stay readable rather than squeezing to one word
   per column. The table's own bottom margin moves to the box, so the layout
   below it does not change. */
.tscroll { overflow-x: auto; margin-bottom: 2rem; -webkit-overflow-scrolling: touch; }
.tscroll table { margin-bottom: 0; }
.tscroll-wide table { min-width: 44rem; }

/* ---------- phones (E's fleet standard, 2026-09-29) ----------
   Every app's own content works on a phone: no sideways scroll, nothing cut
   off, every action reachable, tap targets big enough, text readable without
   zoom. Checked at 390px (iPhone) and 320px (smallest phones). 720px is the
   width where this layout already stacks its side panels (.browse, .cols,
   .foot-in above), so the phone rules share that breakpoint rather than
   adding a second one. */

/* The browse filters. On a wide screen the panel sits beside the results and
   is always open; the summary line exists only for phones, where the panel
   starts closed (app.js) so the answer and the results come first. */
.facets-box > summary { display: none; }
.facets-box .fsum { font-weight: 500; letter-spacing: 0; color: var(--fs-fg-muted); }

@media (max-width: 720px) {
  .browse { gap: 1rem; }
  .facets-box > summary { display: flex; align-items: center; gap: .5rem; list-style: none; cursor: pointer; min-height: 44px; padding: .5rem .9rem; border: 1px solid var(--fs-border); border-radius: .3rem; font-size: .72rem; font-weight: 600; letter-spacing: .18em; color: var(--fs-fg-muted); }
  .facets-box > summary::-webkit-details-marker { display: none; }
  .facets-box > summary::after { content: ""; margin-left: auto; width: .4rem; height: .4rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-.1rem) rotate(45deg); }
  .facets-box[open] > summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
  .facets-box[open] > summary::after { transform: translateY(.15rem) rotate(-135deg); }
  .facets-box #facets { border: 1px solid var(--fs-border); border-top: 0; border-radius: 0 0 .3rem .3rem; padding: 0 .9rem .6rem; }
  #facets h4 { margin-top: 1rem; }
  #facets label { padding: .45rem 0; }

  /* Latest updates: the product chip overflowed the 6.5rem + 1fr + auto grid
     by 13px at 320px, the one sideways scroll on the home page. On a phone
     the date and the chip share the first line and the title takes the
     second, with the chip allowed to shorten. */
  .update { grid-template-columns: auto 1fr; grid-template-areas: "date chip" "title title"; align-items: center; row-gap: .15rem; padding: .7rem 0; }
  .udate { grid-area: date; }
  .utitle { grid-area: title; }
  .update .umark { grid-area: chip; justify-self: start; min-width: 0; max-width: 100%; }
  .update .chip { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .utitle { white-space: normal; }
  .stuck-actions { flex-direction: column; }
  .cols > div + div .sechead { margin-top: 0; }

  /* Tap targets. Text links keep their place in the line; the hit area grows
     with padding and the matching negative margin, so nothing moves. Rows
     (results, facet labels, updates, answer sources, menu items) grow their
     padding outright. The active-page mark moves from a border on the box,
     which a taller box would push away from the text, to an underline. */
  .brand span { white-space: nowrap; }
  .topbar nav { gap: 0 1.25rem; }
  .topbar nav a { display: inline-flex; align-items: center; min-height: 44px; padding-bottom: 0; border-bottom: 0; }
  .topbar nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .45em; text-decoration-color: var(--fs-green-10); }
  .topbar .cta { min-height: 40px; }
  .staffbar-in { padding: 0 1rem; }
  .staffbar a, .staffbar .staff-out, .staffbar .staff-switch > summary { min-height: 44px; display: inline-flex; align-items: center; }
  .staffbar .staff-menu .staff-item { padding-top: .7rem; padding-bottom: .7rem; }
  .crumbs a, .article .meta a, .alllink, .feedlink a, .subnav a, .rolelinks a, .popular a, .stucklink, .relstatus a, .rel a, .foot-legal a { display: inline-block; padding: .7rem 0; margin: -.7rem 0; }
  .footer a { padding: .6rem 0; }
  .result { padding: 1rem 0; }
  .ans-p { padding: .7rem 0; }
  /* A long title keeps its width: the number sits at its first line and the
     product moves under it. */
  .ans-p-head { flex-wrap: wrap; align-items: flex-start; }
  .ans-p .ans-n { margin-top: .15rem; }
  .ans-p strong { flex: 1 0 calc(100% - 1.6rem); }
  .ans-prod { margin-left: 1.6rem; }
  .tags .chip { padding: .45rem .8rem; }
}
/* the live system status line in the STILL STUCK? card (site/status.js sets data-level) */
.stuck .fsstatus-line { display: flex; align-items: center; gap: .55rem; margin: 0 0 .75rem; font-weight: 600; }
.fsstatus .sdot { width: .7rem; height: .7rem; border-radius: 50%; background: var(--fs-fg-muted); flex: none; }
.fsstatus[data-level="none"] .sdot { background: #2fa84f; }
.fsstatus[data-level="minor"] .sdot { background: #e8b500; }
.fsstatus[data-level="major"] .sdot { background: #e8730c; }
.fsstatus[data-level="critical"] .sdot { background: #d6332b; }
.fsstatus[data-level="maintenance"] .sdot { background: #2f7fd6; }
/* the line under an empty browse list (site/app.js emptyLine) */
.noresults { color: var(--fs-fg-muted); margin: .4rem 0; }

/* the customer view carries the staff matters in a panel (tools/build.mjs staffDetails) */
.notpublic { margin: 0 0 .8rem; padding: .5rem .9rem; border-left: 3px solid var(--fs-warning-200, #b7791f); background: var(--fs-warning-50, var(--fs-bg-2)); color: var(--fs-fg); font-size: .85rem; border-radius: .3rem; }
.staff-details { margin: 1rem 0 1.4rem; padding: 1rem 1.2rem 1.1rem; border: 1px solid var(--fs-border); border-radius: .5rem; background: var(--fs-bg-2); font-size: .88rem; }
.staff-details .sd-head { display: flex; align-items: baseline; gap: .75rem; margin: 0 0 .8rem; }
.staff-details .sd-head .kicker { margin: 0; }
.staff-details .sd-edit { font-size: .82rem; font-weight: 600; white-space: nowrap; }
.sd-grid { display: grid; grid-template-columns: 8rem 1fr; gap: .35rem 1rem; align-items: baseline; }
.sd-k { color: var(--fs-fg-muted); font-size: .78rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.sd-v { min-width: 0; overflow-wrap: anywhere; }
.sd-none { color: var(--fs-fg-muted); font-style: italic; }
.sd-why { color: var(--fs-fg-muted); font-size: .82rem; }
.sd-note { margin: .8rem 0 0; font-size: .85rem; color: var(--fs-fg-muted); }
.staff-details .cf-banner { margin: .9rem 0 0; }
.staff-details .cf-cands { margin: .8rem 0 0; }
@media (max-width: 720px) { .sd-grid { grid-template-columns: 1fr; gap: .1rem; } .sd-k { margin-top: .5rem; } }

/* View as (One App, 2026-10-09): the fleet header's amber strip, drawn here */
.viewas { background: #fff4d6; color: #5a4300; border-bottom: 1px solid #f0d58a; font-size: 13px; font-weight: 600; }
.viewas-in { display: flex; align-items: center; justify-content: center; gap: .6rem 1rem; flex-wrap: wrap; padding: .35rem 1rem; text-align: center; }
.viewas-text { min-width: 0; overflow-wrap: anywhere; }
.viewas-return { font: inherit; font-size: 12px; font-weight: 700; letter-spacing: .04em; color: #5a4300; background: #fff; border: 1px solid #e0b94a; border-radius: .3rem; padding: .25rem .7rem; cursor: pointer; }
.viewas-return:hover { background: #fffaf0; }
.viewas-return[disabled] { opacity: .6; cursor: default; }

/* pages of the browse list (site/app.js) */
.pager { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: 1.2rem 0 .4rem; font-size: .85rem; }
.prange { color: var(--fs-fg-muted); }
.pnav { display: flex; align-items: center; gap: .25rem; flex-wrap: wrap; }
.pnav a, .pnav .pcur, .pnav .poff { display: inline-block; min-width: 2.1rem; padding: .4rem .6rem; text-align: center; border-radius: .3rem; font-weight: 600; }
.pnav a { border: 1px solid var(--fs-border); color: var(--fs-accent-blue); }
.pnav a:hover { background: var(--fs-bg-2); text-decoration: none; }
.pnav .pcur { background: var(--fs-navy-800, #0b1f4a); color: #fff; }
.pnav .poff { color: var(--fs-fg-muted); }
.pnav .pgap { padding: 0 .2rem; color: var(--fs-fg-muted); }
.pnav .pprev, .pnav .pnext { margin: 0 .4rem; }
@media (max-width: 720px) { .pager { justify-content: center; } }

/* My content (server/authoring-ui.mjs): a pass-through of Cornerstone's read */
.mc { max-width: 64rem; }
.mc-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.mc-top h1 { margin-bottom: .3rem; }
.mc-top .meta { max-width: 40rem; margin: 0; }
.mc-actions { display: flex; gap: .6rem; flex-wrap: wrap; }
.mc-actions .btn { font-size: .78rem; padding: .65rem 1.1rem; }
.mc-counts { display: grid; grid-template-columns: repeat(4, 1fr); gap: .7rem; margin: 1.6rem 0 .4rem; }
.mc-counts a { display: flex; flex-direction: column; gap: .1rem; padding: .8rem 1rem; border: 1px solid var(--fs-border); border-radius: .5rem; background: var(--fs-bg-2); color: var(--fs-fg); }
.mc-counts a:hover { border-color: var(--fs-green-10); text-decoration: none; }
.mc-counts strong { font-size: 1.5rem; line-height: 1.1; }
.mc-counts span { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--fs-fg-muted); font-weight: 600; }
.mc-section { margin-top: 2rem; }
.mc-h { display: flex; align-items: center; gap: .6rem; font-size: 1.15rem; margin: 0 0 .4rem; padding-bottom: .5rem; border-bottom: 2px solid var(--fs-green-10); }
.mc-n { font-size: .75rem; font-weight: 700; background: var(--fs-bg-2); border: 1px solid var(--fs-border); border-radius: 1rem; padding: .05rem .55rem; color: var(--fs-fg-muted); }
.mc-list { list-style: none; margin: 0; padding: 0; }
.mc-item { display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: start; padding: .85rem 0; border-bottom: 1px solid var(--fs-border-soft); }
.mc-cs { font-size: .78rem; color: var(--fs-fg-muted); white-space: nowrap; }
.mc-cs:hover { color: var(--fs-accent-blue); }
.mc-review-line { margin: .2rem 0 1.2rem; color: var(--fs-fg-muted); font-size: .9rem; }
.mc-main { min-width: 0; }
.mc-title { font-weight: 600; font-size: .98rem; color: var(--fs-accent-blue); overflow-wrap: anywhere; }
.mc-out { font-size: .8em; margin-left: .3rem; color: var(--fs-fg-muted); }
.mc-meta { display: flex; flex-wrap: wrap; gap: .25rem .9rem; margin-top: .3rem; font-size: .8rem; color: var(--fs-fg-muted); }
.mc-meta span:not(:last-child)::after { content: "·"; margin-left: .9rem; color: var(--fs-fg-muted); opacity: .6; }
.mc-missing { font-style: italic; }
.mc-note { margin-top: .3rem; font-size: .78rem; color: var(--fs-fg-muted); }
.mc-side { display: flex; flex-direction: column; align-items: flex-end; gap: .35rem; white-space: nowrap; }
.mc-date { font-size: .78rem; color: var(--fs-fg-muted); }
.mc-empty { color: var(--fs-fg-muted); font-size: .9rem; margin: .6rem 0; }
.mc-fold > summary { list-style: none; cursor: pointer; }
.mc-fold > summary::-webkit-details-marker { display: none; }
.mc-fold > summary .mc-h::after { content: "Show"; margin-left: auto; font-size: .75rem; font-weight: 600; color: var(--fs-accent-blue); }
.mc-fold[open] > summary .mc-h::after { content: "Hide"; }
.mc-foot { margin-top: 2.2rem; font-size: .82rem; }
@media (max-width: 720px) {
  .mc-counts { grid-template-columns: repeat(2, 1fr); }
  .mc-item { grid-template-columns: 1fr; gap: .4rem; }
  .mc-side { flex-direction: row; align-items: center; gap: .7rem; }
}
/* Dropdowns (E, 2026-10-13): the browser's own arrow sits against the right
   border, so draw a chevron with room around it, the same fix sent to Ops
   Intel for Cornerstone's dropdowns. */
select, .authform select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  padding-right: 2.5rem !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%236b7280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .9rem center; background-size: .75rem;
  background-color: var(--fs-bg-0, #fff); cursor: pointer;
}
select:focus-visible, .authform select:focus-visible { outline: 2px solid var(--fs-green-10); outline-offset: 1px; }
select::-ms-expand { display: none; }

/* ---------- Responsive audit, 2026-10-21 (phone 375, tablet 768, desktop 1280) ---------- */

/* Embedded players in article bodies (raw YouTube and Vimeo iframes carried
   from Salesforce) were a fixed 560px and scrolled a phone sideways. They
   fill the column at 16:9, never wider than our own player. */
.article .body iframe { display: block; width: 100%; max-width: 42rem; height: auto; aspect-ratio: 16 / 9; border: 0; }

/* All articles: below 900px the search box takes its own row and the count
   sits under it, instead of squeezing the question into half the column. */
@media (max-width: 900px) {
  .browse-top { flex-wrap: wrap; gap: .4rem; }
  .browse-top input { flex: 1 1 100%; }
  #rcount { flex: 1 1 100%; }
}

/* An answer source cited under two numbers: the badges are one unit beside
   the title, and the title shrinks before it wraps under them. */
.ans-ns { display: inline-flex; gap: .2rem; flex: none; }
.ans-p .ans-ns .ans-n + .ans-n { margin-left: 0; }
.ans-p-head > strong { flex: 1 1 0; min-width: 0; }

/* The header on a phone: CONTACT SUPPORT reads SUPPORT there, so it shares
   the nav row and the header is two rows, not three. */
@media (max-width: 480px) {
  .topbar .cta-long { display: none; }
  .topbar .cta { padding: .35rem .75rem; }
  .topbar nav { gap: 0 .75rem; }
  .topbar nav a { letter-spacing: .05em; }
  .topbar-in { row-gap: .25rem; padding: .75rem 1rem; }
}

/* Home "Popular" on a phone: the links wrap one or two to a line, so the dot
   between them would dangle at each line's end. */
@media (max-width: 560px) {
  .hero .popular .sep { display: none; }
  .hero .popular { gap: .35rem 1rem; }
}

/* Nothing under 12px. */
.pcard .plogo-badge { font-size: .75rem; }
.facets-box .fsum { font-size: .75rem; }
.vdur { font-size: .75rem; }

/* Video titles on a phone are tap targets of their own. */
@media (max-width: 720px) {
  .vtitle a { display: inline-block; padding: .35rem 0; }
}

/* Page not found. */
.notfound { padding-top: 3rem; padding-bottom: 4rem; text-align: center; }
.notfound h1 { margin: 0 0 .6rem; }
.notfound p { color: var(--fs-fg-muted); margin: 0 auto 1.4rem; max-width: 34rem; }
.notfound form { display: flex; gap: .5rem; max-width: 32rem; margin: 0 auto 1.4rem; }
.notfound input { flex: 1; min-width: 0; padding: .6rem .9rem; border: 1px solid var(--fs-border); border-radius: .3rem; font: inherit; }
.notfound .links { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: center; }

/* ---------- Staff views audit, 2026-10-21 (phone 375, tablet 768, desktop 1280) ---------- */

/* Nothing under 12px on the staff bar or in My content. */
.staffbar a, .staffbar .staff-out, .staffbar .staff-switch > summary { font-size: .75rem; }
.staffbar .staff-group, .staffbar .staff-tag { font-size: .75rem; }
.mc-counts span, .mc-out { font-size: .75rem; }

/* Who is signed in, at the top of the open apps list, on a phone only
   (site/fleet-staff.js render). */
.staffbar .staff-menu-who { display: none; margin-bottom: .3rem; padding: .55rem .95rem .65rem; border-bottom: 1px solid var(--fs-border-soft); color: var(--fs-fg-muted); font-size: .8rem; overflow-wrap: anywhere; }
.staffbar .staff-menu-who strong { color: var(--fs-fg); font-weight: 600; }

/* The staff bar on a phone: the links never clip. REGISTER A DOCUMENT reads
   REGISTER, the name gives way before the links do, and when the apps list
   is there the name moves into it. */
@media (max-width: 560px) {
  .staffbar .sl-more { display: none; }
  .staffbar .staff-links { flex-shrink: 0; }
  .staffbar .staff-label { min-width: 0; }
  .staffbar-in:has(.staff-switch:not([hidden])) .staff-label { display: none; }
  .staffbar .staff-menu-who { display: block; }
  /* View as: the text on the left, Return beside it, so the strip is two
     lines, not three and a button. */
  .viewas-in { flex-wrap: nowrap; justify-content: space-between; text-align: left; }
  .viewas-return { flex: none; }
}
@media (max-width: 380px) {
  .staffbar-in, .staffbar .staff-links { gap: .75rem; }
}

/* Touch screens up to a tablet's landscape width get the phone's 44px tap
   targets on the bar, in the apps list, on Return and on My content's
   Cornerstone and Confluence links. The links grow their hit area with
   padding and the matching negative margin, so nothing moves. */
@media (max-width: 1024px), (pointer: coarse) {
  .staffbar-in { padding-top: 0; padding-bottom: 0; }
  .staffbar a, .staffbar .staff-out, .staffbar .staff-switch > summary { min-height: 44px; display: inline-flex; align-items: center; }
  .staffbar .staff-menu .staff-item { padding-top: .7rem; padding-bottom: .7rem; }
  .viewas-return { min-height: 44px; }
  .mc-cs { display: inline-block; padding: .85rem 0; margin: -.85rem 0; }
}

/* My content on a phone: the three counts share one row. */
@media (max-width: 720px) {
  .mc-counts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
  .mc-counts a { padding: .7rem .75rem; }
}