/* ==== src/accordion/accordion.css ==== */
/* accordion.css — STCT-8777. Text tokens on the surface (accordion.test.js measures them over 44
   brand-modes). The chevron is drawn in CSS in the text colour and rotates with the open state. */

.pk-accordion {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  border-radius: var(--pk-card-radius, var(--pk-radius-m, 12px));
  border: var(--pk-bw-hairline, 1px) solid var(--pk-sem-border-primary, #E6E6E6);
  background: var(--pk-sem-bg-surface-secondary, #ffffff);
  font-family: var(--pk-font-sans, system-ui, sans-serif);
  color: var(--pk-text-primary, #191919);
  overflow: hidden;
  --pk-accordion-icon-size: 1.25em;
  --pk-accordion-faq-title-size: calc(var(--pk-space-md, 16px) + 2px);
  --pk-accordion-faq-line-height: 1.6;
  --pk-accordion-faq-glyph-size: calc(var(--pk-space-md, 16px) + 4px);
  --pk-accordion-disabled-opacity: 0.6;
}
.pk-accordion-item + .pk-accordion-item { border-top: var(--pk-bw-hairline, 1px) solid var(--pk-sem-border-primary, #E6E6E6); }

.pk-accordion-summary {
  display: flex;
  align-items: center;
  gap: var(--pk-space-sm, 10px);
  padding: var(--pk-space-sm, 10px) var(--pk-space-md, 16px);
  cursor: pointer;
  list-style: none;
}
.pk-accordion-summary::-webkit-details-marker { display: none; }
.pk-accordion-summary::after {
  content: "";
  flex: 0 0 auto;
  margin-left: auto;
  width: 8px; height: 8px;
  border: solid var(--pk-text-secondary, #666666);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  transition: transform .15s ease;
}
.pk-accordion-item[open] > .pk-accordion-summary::after { transform: rotate(-135deg); }
@media (prefers-reduced-motion: reduce) { .pk-accordion-summary::after { transition: none; } }
.pk-accordion-summary:focus-visible { outline: 2px solid var(--pk-text-primary, #191919); outline-offset: -2px; }

.pk-accordion .pk-accordion-title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: normal;
  text-transform: none;
  color: var(--pk-text-primary, #191919);
  overflow-wrap: break-word;
  min-width: 0;
}
.pk-accordion .pk-accordion-content {
  padding: 0 var(--pk-space-md, 16px) var(--pk-space-md, 16px);
  font-size: 14px;
  line-height: 1.5;
  color: var(--pk-text-secondary, #666666);
}

/* with icons: a bundled SVG drawn as a mask over the title colour (the link/stat-tile precedent), decorative. */
.pk-accordion-icon {
  flex: 0 0 auto;
  width: var(--pk-accordion-icon-size);
  height: var(--pk-accordion-icon-size);
  background: var(--pk-text-primary, #191919);
  -webkit-mask: var(--pk-icon) center / contain no-repeat;
  mask: var(--pk-icon) center / contain no-repeat;
}

/* disabled: aria-disabled + tabindex=-1 carry the state; the missing chevron and the dimming repeat it. */
.pk-accordion-item-disabled > .pk-accordion-summary { cursor: default; opacity: var(--pk-accordion-disabled-opacity); }
.pk-accordion-item-disabled > .pk-accordion-summary::after { display: none; }

/* faq: the question is a larger heading with generous line-height; the marker is a +/− glyph, not a chevron. */
.pk-accordion-faq .pk-accordion-summary { padding: var(--pk-space-md, 16px); align-items: flex-start; }
.pk-accordion-faq .pk-accordion-title { font-size: var(--pk-accordion-faq-title-size); line-height: var(--pk-accordion-faq-line-height); }
.pk-accordion-faq .pk-accordion-summary::after {
  content: "+";
  width: auto; height: auto;
  border: 0;
  transform: none;
  font-size: var(--pk-accordion-faq-glyph-size);
  line-height: var(--pk-accordion-faq-line-height);
  color: var(--pk-text-secondary, #666666);
}
.pk-accordion-faq .pk-accordion-item[open] > .pk-accordion-summary::after { content: "\2212"; transform: none; }
.pk-accordion-faq .pk-accordion-item-disabled > .pk-accordion-summary::after { display: none; }
.pk-accordion-faq .pk-accordion-content { font-size: var(--pk-accordion-faq-title-size); line-height: var(--pk-accordion-faq-line-height); }

/* ==== src/account-summary-strip/account-summary-strip.css ==== */
/* account-summary-strip.css — the header row of figures + account + connection (STCT-8777).
 *
 * Load stat-tile/stat-tile.css and status-indicator/status-indicator.css as well: this sheet only
 * lays the composed parts out and tightens the tiles for a header. */

.pk-account-summary-strip {
  /* No theme token for these yet (STCT-8782 follow-up): declared here so a brand can override them.
   * The figure floors are 9rem / 7rem (see the tile note below); the value type is fluid on the
   * tile's container width (cqi) between two rem stops. */
  --pk-account-summary-strip-figure-min-width: 9rem;
  --pk-account-summary-strip-compact-figure-min-width: 7rem;
  --pk-account-summary-strip-label-font-size: 0.75rem;
  --pk-account-summary-strip-compact-label-font-size: 0.6875rem;
  --pk-account-summary-strip-value-font-size: clamp(1rem, 11cqi, 1.25rem);
  --pk-account-summary-strip-compact-value-font-size: clamp(0.875rem, 10cqi, 1rem);
  display: flex;
  align-items: center;
  gap: var(--pk-space-md, 16px);
  padding: var(--pk-space-sm, 8px) var(--pk-space-md, 16px);
  background: var(--pk-sem-bg-surface-secondary, #F7F7F8);
  border-bottom: var(--pk-bw-hairline, 1px) solid var(--pk-sem-border-primary, #E6E6E6);
  font-family: var(--pk-font-sans, system-ui, sans-serif);
  color: var(--pk-text-primary, #191919);
}

/* The figures scroll sideways on a narrow header rather than wrapping the account and status
 * off the row — the connection status must stay visible, it is the point of the strip. */
.pk-account-summary-strip-figures {
  display: flex;
  flex: 1 1 auto;
  gap: var(--pk-space-sm, 8px);
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: thin;
}

/* A header tile is smaller than a dashboard tile. The stat-tile floor is 12rem because it is a
 * containment context (see stat-tile.css); 9rem still holds "$12,400.00" plus a caption at the
 * reduced type size below, and five of them fit a 1024px header. */
.pk-account-summary-strip .pk-stat.pk-account-summary-strip-figure {
  min-width: var(--pk-account-summary-strip-figure-min-width);
  padding: var(--pk-space-xs, 4px) var(--pk-space-sm, 8px);
  gap: 0;
  background: transparent;
  border: 0;
  border-right: var(--pk-bw-hairline, 1px) solid var(--pk-sem-border-primary, #E6E6E6);
  border-radius: 0;
}
.pk-account-summary-strip .pk-account-summary-strip-figure:last-child { border-right: 0; }

.pk-account-summary-strip .pk-account-summary-strip-figure .pk-stat-label { font-size: var(--pk-account-summary-strip-label-font-size); }
.pk-account-summary-strip .pk-account-summary-strip-figure .pk-stat-value {
  font-size: var(--pk-account-summary-strip-value-font-size);
}
.pk-account-summary-strip .pk-account-summary-strip-figure .pk-stat-delta { font-size: var(--pk-account-summary-strip-label-font-size); }

.pk-account-summary-strip-side {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--pk-space-md, 16px);
  margin-left: auto;
}

.pk-account-summary-strip-account { min-width: 0; }

/* compact: one tighter row for a dense terminal header */
.pk-account-summary-strip-compact {
  gap: var(--pk-space-sm, 8px);
  padding: var(--pk-space-xs, 4px) var(--pk-space-sm, 8px);
}
.pk-account-summary-strip-compact .pk-stat.pk-account-summary-strip-figure {
  min-width: var(--pk-account-summary-strip-compact-figure-min-width);
  padding: 0 var(--pk-space-sm, 8px);
}
.pk-account-summary-strip-compact .pk-account-summary-strip-figure .pk-stat-value {
  font-size: var(--pk-account-summary-strip-compact-value-font-size);
}
.pk-account-summary-strip-compact .pk-account-summary-strip-figure .pk-stat-label { font-size: var(--pk-account-summary-strip-compact-label-font-size); }

/* STCT-8777 — Mobile. In a container narrower than 600px (a phone) the figures WRAP two per row
   instead of scrolling sideways, and the account + status move to their own row below. The strip
   declares no container-type: the frame (or the app's parent — see README, "Desktop and mobile")
   provides it. */
@container (max-width: 600px) {
  .pk-account-summary-strip { flex-wrap: wrap; }
  .pk-account-summary-strip-figures {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    flex: 1 1 100%;
    overflow-x: visible;
  }
  .pk-account-summary-strip .pk-stat.pk-account-summary-strip-figure,
  .pk-account-summary-strip-compact .pk-stat.pk-account-summary-strip-figure { min-width: 0; }
  .pk-account-summary-strip .pk-account-summary-strip-figure:nth-child(2n) { border-right: 0; }
  .pk-account-summary-strip-side { flex: 1 1 100%; margin-left: 0; justify-content: space-between; }
}

/* ==== src/app-shell/app-shell.css ==== */
/* @paprika/skyten-foundation/app-shell — the application frame (STCT-8667, brand contract STCT-8770).
 *
 * ⛔ EVERY VALUE IS A BRAND-CONTRACT TOKEN (src/brands/theme-<brand>.css). A literal here is a colour,
 * space, size or radius that cannot follow a brand, and it fails silently: the frame keeps rendering,
 * wearing whichever brand the literal was taken from. The only literals below are structural (0, 1fr,
 * 100%, percentages, flex factors) — quantities with no brand meaning.
 *
 * ⚠ The var() fallbacks are LAST-RESORT, not defaults. If a brand sheet is loaded they never apply;
 * with no sheet they keep the frame legible instead of collapsing to inherited colour.
 *
 * THE BAR is `.pk-appbar` in the tools-brands reference: --pk-appbar-bg / -fg / -height / -gap, the
 * brand's wordmark at --pk-logo-height (max --pk-logo-max-width) placed left / center / right per the
 * brand JSON (data-pk-logo-placement), and the nav items in menu-modes' row look (--pk-nav-*). */

/* STCT-9112: THE DOCUMENT'S FONT IS THE BRAND'S. Every component sets its own font, and the shell's content
   area inherits it, but nothing gave <html> one: an app's own text outside those (its layout, a <p> on
   <body>) rendered in the browser default, Times New Roman, the first thing PM_Adm saw on the scaffold.
   Keyed on data-pk-brand, which every brand application stamps on <html>; (0,1,1), so an app overrides it.
   THE DOCUMENT'S GROUND IS THE BRAND'S TOO (STCT-9234, qc3 AdminWeb): .pk-shell paints the page ground,
   but only as tall as its content when its host has no height, so under a short view the browser's white
   canvas showed below the dark frame. <html> takes the same ground as .pk-shell (the same token chain). */
html[data-pk-brand] {
  font-family: var(--pk-font-sans);
  background-color: var(--pk-page-bg, var(--pk-sem-bg-page, #fff));
}


.pk-shell {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  font-family: var(--pk-font-sans, system-ui, sans-serif);
  font-size: var(--pk-fs-base, 1rem);
  line-height: var(--pk-lh, 1.5);
  color: var(--pk-text-primary, #191919);
  background: var(--pk-page-bg, var(--pk-sem-bg-page, #fff));   /* the page ground the brand DECLARES (layout.pageBackground -> --pk-page-bg, contract 1.1, STCT-8908) */
  /* STCT-9229: a brand's PATTERN over its ground (qc3.at's soft radial glows on a 100px tile); none / auto elsewhere */
  background-image: var(--pk-page-bg-image, none);
  background-size: var(--pk-page-bg-size, auto);
}

/* ---- top bar: the brand's app bar ---- */
.pk-shell-bar {
  display: flex;
  align-items: center;
  gap: var(--pk-appbar-gap, 1rem);
  /* ⛔ ONE ROW (STCT-8755): the nav is the elastic member (min-width:0 below); it folds into "More" to
     the space the other members leave it, and under the breakpoint it collapses to a drawer / icon rail. */
  flex-wrap: nowrap;
  min-height: var(--pk-appbar-height, 4rem);
  box-sizing: border-box;
  padding: 0 var(--pk-appbar-gap, 1rem);
  background: var(--pk-appbar-bg, #E7E7EB);
  /* STCT-9225: the bar's type face — the brand's text face unless it sets its bars in another (xberry: Dosis) */
  font-family: var(--pk-appbar-font);
  /* STCT-9229: the bar's bottom rule where the brand declares one (qc3: a 1px primary hairline under a see-through bar) */
  border-bottom: var(--pk-appbar-border, none);
  /* STCT-9229: a see-through bar's backdrop (qc3: no fill, the page blurred 8px behind it); none elsewhere */
  -webkit-backdrop-filter: var(--pk-appbar-backdrop, none);
  backdrop-filter: var(--pk-appbar-backdrop, none);
  /* the bar's INK is the page's (tools-brands `.pk-appbar` inherits it); --pk-appbar-fg is the
     resting nav colour and is painted by menu-modes on the items themselves */
  color: var(--pk-text-primary, #191919);
  /* the "More" popover hangs below the bar and must never be clipped by it */
  overflow: visible;
}
/* ⛔ STCT-9252: A NAV NOBODY FOLDS WRAPS INSTEAD OF OVERLAPPING. The bar's one-row rule relies on renderNav's JS fold
   into "More". Bar markup emitted WITHOUT the renderer (a printed page, a PDF, a static template) got no fold: at A4
   width (794px) the last item ran under the CTA. renderNav stamps data-pk-folded on its nav and the app shell on its
   bar; an unstamped nav in an unstamped bar wraps to more rows. Measured at 794 and 480 px
   (ci/probes/static-bar-wrap-probe.py). A bar-level wrap was tried as well and removed: no measurement could tell it
   mattered. Scoped to the bar on purpose, and it lives HERE (the sheet that owns the bar), not in menu-modes.css: that keeps
   the menu's hook contract unchanged, and renderMenu's navs and vertical menus elsewhere are untouched (a column flex
   that wraps would spill into a second column). HowTo 6 forbids a consumer from adding this wrap, so the library owns it. */
.pk-shell-bar:not([data-pk-folded]) .pk-nav:not([data-pk-folded]) { flex-wrap: wrap; }
/* ---- STCT-9003 (operator): BOX layout — the bar's ground stays full width, its CONTENTS sit in the
        brand's centred container (skytraders.trading: content = min(viewport - 2·gutter, 1150px)).
        Both numbers are the brand's tokens (--pk-container-max-width, --pk-container-gutter). ---- */
.pk-shell[data-pk-bar-width="boxed"] > .pk-shell-bar,
.pk-shell[data-pk-page-width="boxed"] > .pk-shell-bar {
  padding-inline: max(var(--pk-container-gutter), calc((100% - var(--pk-container-max-width)) / 2));
}
/* STCT-9035 (operator, image 67): the BOX layout boxes the page too — the BODY (rail + content column,
   STCT-9057: the rail is inside the box, not at the page edge) sits in the same container as the bar's
   contents; the grounds (bar, page) stay full width. */
.pk-shell[data-pk-page-width="boxed"] > .pk-shell-body {
  padding-inline: max(var(--pk-container-gutter), calc((100% - var(--pk-container-max-width)) / 2));
}
/* STCT-9058: a collapsed nav (drawer / popup) is its hamburger, and the hamburger LEADS the bar — left of
   the logo, the app-bar standard (Material top app bar, iOS navigation bar) */
.pk-shell > .pk-shell-bar > .pk-shell-nav:has(> .pk-nav[data-pk-menu-collapsed="drawer"]),
.pk-shell > .pk-shell-bar > .pk-shell-nav:has(> .pk-nav[data-pk-menu-collapsed="popup"]) { order: -1; flex: 0 0 auto; min-width: 0; }
/* STCT-9036: the CTA action — the brand's pill at the end of the bar, the same look as the menu's CTA item:
   in the APPLICATION bar the vendored --pk-appbar-cta-* (STCT-9225; a brand that states none gets the primary
   button pair it had before), in the WEBSITE kind (STCT-9053, below) the website's own pill (--pk-webnav-cta-*).
   STCT-9225: a SECOND call to action (menu.json attributes.kind 'cta2', data-pk-kind="cta2" — xberry's
   "Sign up" beside "Log in") takes the -cta2- tokens; a brand without one paints it like the first. */
.pk-shell-cta { display: flex; align-items: center; gap: var(--pk-appbar-gap); }
.pk-shell-cta[hidden] { display: none; }
.pk-shell-cta-button {
  border: var(--pk-appbar-cta-border); cursor: pointer; font: inherit; white-space: nowrap;
  background-color: var(--pk-appbar-cta-bg); color: var(--pk-appbar-cta-fg);
  border-radius: var(--pk-appbar-cta-radius); padding: var(--pk-pad-y-sm) var(--pk-appbar-cta-pad-x);
  font-weight: var(--pk-appbar-cta-weight); font-size: var(--pk-appbar-cta-fs);
  /* a stated height is the pill's OUTER height (border-box); a brand that states none keeps auto + its padding */
  box-sizing: border-box; height: var(--pk-appbar-cta-height);
  box-shadow: var(--pk-appbar-cta-edge, none);   /* WEB-1559: the light-surface edge, INSET (the height is auto) */
}
/* WEB-1559: hover and press, the brand's optional --pk-appbar-cta-hover-bg / -pressed-bg; unstated = the rest fill (the
   pair kept, as before) */
.pk-shell-cta-button:hover { background-color: var(--pk-appbar-cta-hover-bg, var(--pk-appbar-cta-bg)); }
.pk-shell-cta-button:active { background-color: var(--pk-appbar-cta-pressed-bg, var(--pk-appbar-cta-bg)); }
/* WEB-1564: the slot is a button face, so it wears the BUTTON focus ring (button.css): an outline that replaces the
   browser default, on :focus-visible only */
.pk-shell-cta-button:focus-visible {
  outline: var(--pk-ring, 2px) solid var(--pk-button-focus-ring, var(--pk-ring-color, currentColor));
  outline-offset: var(--pk-ring-offset, 2px);
}
.pk-shell-cta-button[data-pk-kind="cta2"],
.pk-shell-cta-button[data-pk-kind="cta2"]:hover {
  background-color: var(--pk-appbar-cta2-bg); color: var(--pk-appbar-cta2-fg); border: var(--pk-appbar-cta2-border);
}
/* one CTA at any width: in a ROW the in-nav copy is hidden (the slot shows it); in the OPEN drawer the
   in-nav copy shows and the slot is hidden under the phone breakpoint (STCT-9058) */
/* STCT-9415: only ABOVE 720px, where the slot actually shows. Under it the sheet hides the slot (below), so a nav
   that stays a ROW there (a phone profile's icon row) must keep its copy: hidden in both places, the CTA was pinned
   in the row at width 0, the fold read that as "fits", and the call to action was reachable nowhere */
@media (min-width: 721px) {
  .pk-shell > .pk-shell-bar .pk-nav:not([data-pk-drawer-open]) > .pk-nav-item.pk-nav-cta { display: none; }
}
/* STCT-9415: …unless the bar's CTA slot has yielded to make room (fitRight): then the nav's copy is the CTA */
/* STCT-9415: the nav's copy IS the call to action, so it wears the slot's paint at rest AND on hover, wherever it
   shows (row, More, drawer). Without this the nav's hover style won on specificity (tint: 3.22:1 measured) and the
   copy wore the primary pair instead of the bar's own CTA tokens. */
.pk-shell > .pk-shell-bar .pk-nav .pk-nav-item.pk-nav-cta,
.pk-shell > .pk-shell-bar .pk-nav .pk-nav-item.pk-nav-cta:hover {
  background-color: var(--pk-appbar-cta-bg); color: var(--pk-appbar-cta-fg); border: var(--pk-appbar-cta-border);
  background-image: none; box-shadow: var(--pk-appbar-cta-edge, none);
}
/* WEB-1559: the nav's copy wears the slot's hover and press too (unstated = the rest fill, as before) */
.pk-shell > .pk-shell-bar .pk-nav .pk-nav-item.pk-nav-cta:hover { background-color: var(--pk-appbar-cta-hover-bg, var(--pk-appbar-cta-bg)); }
.pk-shell > .pk-shell-bar .pk-nav .pk-nav-item.pk-nav-cta:active { background-color: var(--pk-appbar-cta-pressed-bg, var(--pk-appbar-cta-bg)); }
.pk-shell > .pk-shell-bar .pk-nav .pk-nav-item.pk-nav-cta[data-pk-kind="cta2"],
.pk-shell > .pk-shell-bar .pk-nav .pk-nav-item.pk-nav-cta[data-pk-kind="cta2"]:hover {
  background-color: var(--pk-appbar-cta2-bg); color: var(--pk-appbar-cta2-fg); border: var(--pk-appbar-cta2-border);
}
.pk-shell[data-pk-webnav-layout] > .pk-shell-bar .pk-nav .pk-nav-item.pk-nav-cta,
.pk-shell[data-pk-webnav-layout] > .pk-shell-bar .pk-nav .pk-nav-item.pk-nav-cta:hover {
  background-color: var(--pk-webnav-cta-bg); color: var(--pk-webnav-cta-fg); border: var(--pk-webnav-cta-border);
  box-shadow: none;   /* WEB-1586: the website pill's one edge is its border; the app bar's inset edge is not drawn too */
}
.pk-shell[data-pk-webnav-layout] > .pk-shell-bar .pk-nav .pk-nav-item.pk-nav-cta[data-pk-kind="cta2"],
.pk-shell[data-pk-webnav-layout] > .pk-shell-bar .pk-nav .pk-nav-item.pk-nav-cta[data-pk-kind="cta2"]:hover {
  background-color: var(--pk-webnav-cta2-bg); color: var(--pk-webnav-cta2-fg);
}
/* only in the ROW: a collapsed nav (drawer / popup) shows its copy when opened, as before */
.pk-shell[data-pk-cta-yielded] > .pk-shell-bar .pk-nav:not([data-pk-drawer-open]):not([data-pk-menu-collapsed]) > .pk-nav-item.pk-nav-cta { display: flex; }   /* .pk-nav-item's own display */
@media (max-width: 720px) { .pk-shell > .pk-shell-bar > .pk-shell-right > .pk-shell-cta { display: none; } }
/* WEB-1541: a WEBSITE bar whose menu has collapsed into the drawer (its own responsive switch, e.g. 861px) shows the logo
   and the burger only, at any width; the open drawer carries the call to action (the in-nav copy above) */
.pk-shell[data-pk-webnav-layout] > .pk-shell-bar:has(.pk-nav[data-pk-menu-collapsed]) > .pk-shell-right > .pk-shell-cta { display: none; }
/* WEB-1549 (PO decision b, 2026-10-11): webCollapsed 'dropdown' (data-pk-web-collapsed) is skytraders.trading's COLLAPSED
   website bar, measured on the site at 390, 500 and 860px: one arrangement at every collapsed width.
   - The brand's LOCKUP stays at the start; there is no phone-width mark (STCT-9226). The collapsed bar holds the lockup
     and the burger only, so the logo's share cap is lifted, and the bar's side padding is the website's at every width.
   - The burger sits at the END, its glyph on the bar's edge: the button's own inset is optical, not a gap.
   - OPEN, the menu drops DOWN under the bar, across its width, on the page ground. The burger turns into its close
     glyph in place. Rows are stacked in the website's ink and size, and the current section takes the hover ink.
     There is no scrim (the page stays visible below the panel); the panel has the brand's menu shadow and its subtle
     rule on top.
   - Its call to action is the library's button at its natural size (PO c.146754: buttons and button sizes only from
     the library): the brand's SELECTED face (data-pk-web-collapsed-cta="selected", the default) or the bar's own CTA
     pair ("bar").
   Without the option, not one rule below applies. */
.pk-shell[data-pk-webnav-layout][data-pk-web-collapsed="dropdown"] > .pk-shell-bar:has(.pk-nav[data-pk-menu-collapsed="drawer"]) { position: relative; }
.pk-shell[data-pk-webnav-layout][data-pk-web-collapsed="dropdown"]:not([data-pk-bar-width="boxed"]):not([data-pk-page-width="boxed"]) > .pk-shell-bar:has(.pk-nav[data-pk-menu-collapsed="drawer"]) {
  padding-inline: var(--pk-webnav-pad-x);
}
.pk-shell[data-pk-webnav-layout][data-pk-web-collapsed="dropdown"] > .pk-shell-bar:has(.pk-nav[data-pk-menu-collapsed="drawer"]) > .pk-shell-logo { max-width: none; flex: 0 1 auto; min-width: 0; margin-inline-end: auto; }
.pk-shell[data-pk-webnav-layout][data-pk-web-collapsed="dropdown"] > .pk-shell-bar > .pk-shell-logo[data-pk-has-mark] > .pk-shell-logo-img:not(.pk-shell-logo-markimg) { display: block; }
.pk-shell[data-pk-webnav-layout][data-pk-web-collapsed="dropdown"] > .pk-shell-bar > .pk-shell-logo[data-pk-has-mark] > .pk-shell-logo-markimg { display: none; }
.pk-shell[data-pk-webnav-layout][data-pk-web-collapsed="dropdown"] > .pk-shell-bar > .pk-shell-nav:has(> .pk-nav[data-pk-menu-collapsed="drawer"]) {
  order: 99; position: static;
  margin-inline-end: calc((var(--pk-nav-icon-size) - var(--pk-nav-item-w)) / 2);
}
/* the burger and the close glyph in the website's ink, like the rows */
.pk-shell[data-pk-webnav-layout][data-pk-web-collapsed="dropdown"] > .pk-shell-bar .pk-nav[data-pk-menu-collapsed="drawer"] > .pk-nav-toggle { color: var(--pk-webnav-fg); }
.pk-shell[data-pk-webnav-layout][data-pk-web-collapsed="dropdown"] > .pk-shell-bar .pk-nav[data-pk-menu-collapsed="drawer"][data-pk-drawer-open] {
  position: absolute; inset: 100% 0 auto 0; width: auto; z-index: 1000; overflow: visible;
  flex-direction: column; align-items: stretch; gap: var(--pk-space-xs);
  padding: var(--pk-space-sm) var(--pk-webnav-pad-x) var(--pk-space-lg);
  background: var(--pk-sem-bg-page);
  border-top: var(--pk-stroke) solid var(--pk-sem-border-subtle);
  box-shadow: var(--pk-menu-shadow);
}
/* the close button stays where the burger was: above the panel, on the bar's middle and its end */
.pk-shell[data-pk-webnav-layout][data-pk-web-collapsed="dropdown"] > .pk-shell-bar .pk-nav[data-pk-menu-collapsed="drawer"][data-pk-drawer-open] > .pk-nav-toggle {
  position: absolute; align-self: auto;
  /* WEB-1541 pass 4 (the PO's 'decision a', board D44): while the menu is OPEN the close X wears the hover ink, the arctic the
     current row uses, as on skytraders.trading (measured with no focus and no hover); the closed burger keeps the
     website ink */
  color: var(--pk-webnav-hover-fg);
  right: calc(var(--pk-webnav-pad-x) + (var(--pk-nav-icon-size) - var(--pk-nav-item-w)) / 2);
  bottom: calc(100% + var(--pk-stroke) + (var(--pk-webnav-height) - var(--pk-nav-item-h)) / 2);
}
.pk-shell[data-pk-webnav-layout][data-pk-web-collapsed="dropdown"] > .pk-shell-bar .pk-nav[data-pk-drawer-open] .pk-nav-item:not(.pk-nav-cta) {
  min-height: var(--pk-button-height); align-items: center; padding: 0 var(--pk-space-xs);
  font-size: var(--pk-webnav-fs); font-weight: var(--pk-webnav-weight); color: var(--pk-webnav-fg);
  background: none; border-top: 0; border-bottom: 0; text-decoration: none;
}
.pk-shell[data-pk-webnav-layout][data-pk-web-collapsed="dropdown"] > .pk-shell-bar .pk-nav[data-pk-drawer-open] .pk-nav-item:not(.pk-nav-cta):hover,
.pk-shell[data-pk-webnav-layout][data-pk-web-collapsed="dropdown"] > .pk-shell-bar .pk-nav[data-pk-drawer-open] .pk-nav-item.pk-active:not(.pk-nav-cta) {
  color: var(--pk-webnav-hover-fg); background: none;
}
.pk-shell[data-pk-webnav-layout][data-pk-web-collapsed="dropdown"] > .pk-shell-bar .pk-nav[data-pk-drawer-open] .pk-nav-item.pk-nav-cta {
  /* WEB-1549 (PO c.146754): the LIBRARY button at its NATURAL geometry: the brand's button height, padding and type,
     its own width, NOT stretched across the panel (live's full-width row is a decided divergence) */
  margin-top: var(--pk-space-sm); align-self: flex-start; width: auto; box-sizing: border-box; height: var(--pk-button-height);
  justify-content: center; padding: var(--pk-button-selected-pad); border-radius: var(--pk-button-radius);
  font-size: var(--pk-button-fs); font-weight: var(--pk-button-weight);
  border: var(--pk-stroke) solid var(--pk-button-selected-border);
  background: var(--pk-button-selected-bg); background-image: var(--pk-button-selected-bg-image, none);
  color: var(--pk-button-selected-fg);
}
.pk-shell[data-pk-webnav-layout][data-pk-web-collapsed="dropdown"] > .pk-shell-bar .pk-nav[data-pk-drawer-open] .pk-nav-item.pk-nav-cta:hover {
  border-color: var(--pk-button-selected-hover-bg); background: var(--pk-button-selected-hover-bg);
  background-image: var(--pk-button-selected-hover-bg-image, none); color: var(--pk-button-selected-hover-fg);
}
.pk-shell[data-pk-webnav-layout][data-pk-web-collapsed="dropdown"][data-pk-web-collapsed-cta="bar"] > .pk-shell-bar .pk-nav[data-pk-drawer-open] .pk-nav-item.pk-nav-cta {
  border-color: var(--pk-webnav-cta-bg); background: var(--pk-webnav-cta-bg); background-image: var(--pk-webnav-cta-bg-image, none);
  color: var(--pk-webnav-cta-fg);
}
.pk-shell[data-pk-webnav-layout][data-pk-web-collapsed="dropdown"][data-pk-web-collapsed-cta="bar"] > .pk-shell-bar .pk-nav[data-pk-drawer-open] .pk-nav-item.pk-nav-cta:hover {
  border-color: var(--pk-webnav-cta-hover-bg); background: var(--pk-webnav-cta-hover-bg);
  background-image: var(--pk-webnav-cta-hover-bg-image, none); color: var(--pk-webnav-cta-hover-fg);
}
/* ---- logo slot: the brand's image (per mode, from <brand>.json) when it has one; the letter-mark +
        word only as the fallback for a brand that ships no file ---- */
.pk-shell-logo {
  /* STCT-9226: the logo NEVER shrinks — it was squeezed to 0px in the boxed bar; the nav folds into More instead */
  display: flex; align-items: center; gap: var(--pk-space-xs, 4px); flex: 0 0 auto; order: 0;
  /* --pk-logo-max-width is a share of the BAR (a flex item's percentage resolves against the bar's
     width); on the image itself it would resolve against the shrink-to-fit slot and collapse to 0 */
  max-width: var(--pk-logo-max-width, 20%);
}
/* STCT-9225: the logo's height IN THE BAR (--pk-appbar-logo-height; equal to --pk-logo-height unless the brand sizes its
   bar logo apart — xberry's 70px gem, while its user-menu avatar keeps the 28px logo height) */
.pk-shell-logo-img { height: var(--pk-appbar-logo-height, 28px); width: auto; max-width: 100%; display: block; object-fit: contain; }
/* STCT-9226: the lockup on a wide bar, the brand's square mark on a phone-width bar */
.pk-shell-logo-markimg { display: none; }
@media (max-width: 720px) {
  .pk-shell-logo[data-pk-has-mark] > .pk-shell-logo-img:not(.pk-shell-logo-markimg) { display: none; }
  .pk-shell-logo[data-pk-has-mark] > .pk-shell-logo-markimg { display: block; }
}
/* placement per the brand JSON: left (default) | center | right */
.pk-shell[data-pk-logo-placement="center"] > .pk-shell-bar > .pk-shell-logo { order: 1; margin: 0 auto; }
.pk-shell[data-pk-logo-placement="center"] > .pk-shell-bar > .pk-shell-nav { order: 0; flex: 1 1 0; }
.pk-shell[data-pk-logo-placement="center"] > .pk-shell-bar > .pk-shell-right { order: 2; flex: 1 1 0; justify-content: flex-end; }
.pk-shell[data-pk-logo-placement="right"] > .pk-shell-bar > .pk-shell-logo { order: 3; }
.pk-shell[data-pk-logo-placement="right"] > .pk-shell-bar > .pk-shell-right { margin-left: auto; }
.pk-shell-logo-mark {
  display: grid; place-items: center; width: var(--pk-logo-height, 28px); height: var(--pk-logo-height, 28px);
  border-radius: var(--pk-radius-s, 6px);
  background: var(--pk-primary, #49bae4);
  color: var(--pk-on-primary, #fff);
  font-weight: var(--pk-fw-heading, 700); font-size: var(--pk-fs-small, 13px); line-height: 1;
}
.pk-shell-logo-word { font-weight: var(--pk-fw-heading, 600); }
/* STCT-9229: the brand's lockup text beside a mark-only logo file (qc3): word over tagline, the brand's sizes and
   inks inline from <brand>.json; the tagline goes with the lockup on a phone-width bar (the mark alone stays) */
.pk-shell-logo-text { display: flex; flex-direction: column; justify-content: center; line-height: var(--pk-lh-heading, 1.2); white-space: nowrap; margin-left: var(--pk-space-xs, 4px); }
.pk-shell-logo-text .pk-shell-logo-word { color: var(--pk-text-primary, #191919); }
.pk-shell-logo-text .pk-shell-logo-tagline { color: var(--pk-text-secondary, #666); font-weight: var(--pk-fw-body, 400); }
@media (max-width: 720px) {
  .pk-shell-logo[data-pk-has-mark] > .pk-shell-logo-text .pk-shell-logo-tagline { display: none; }
}
/* ⛔ NOT overflow-x:auto (STCT-8755): the slot shrinks (min-width:0) and renderNav folds. */
/* STCT-9054: the nav never drops below one item + "More" (its own item tokens). STCT-9056: the shell then makes the
   right cluster give way itself (whole metrics, then a squeezed status; fitRight in index.js) instead of leaving
   the consumer to shed them. */
.pk-shell-nav { flex: 1 1 auto; min-width: calc(2 * var(--pk-nav-item-w) + var(--pk-nav-item-gap)); overflow: visible; }
/* STCT-9415: on a phone the floor is ONE button, "More" alone (renderNav's fold already goes down to it: one button
   that holds everything beats two that overflow); a 375px bar with a logo, actions and the avatar has no room for two */
@media (max-width: 480px) { .pk-shell-nav { min-width: var(--pk-nav-item-w); } }
.pk-shell-right {
  display: flex; align-items: center; gap: var(--pk-appbar-gap, 16px);
  margin-left: auto; flex: 0 0 auto; flex-wrap: nowrap;
}
/* STCT-9056: squeezed (the nav is short of its share with every metric already hidden): the status badge, text
   not a number, ellipsizes rather than pushing the nav out; its full text is its title */
.pk-shell-right[data-pk-squeezed] .pk-shell-status { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 0 1 auto;
  /* STCT-9415: a CAP, because the right cluster does not shrink as a box: its first words stay ("build 5bd7…") */
  max-width: calc(12 * var(--pk-badge-fs, 12px)); }   /* 12 badge-ems, from the badge's own type token (STCT-9236: no literal) */
.pk-shell-right[data-pk-squeezed="hard"] .pk-shell-status { max-width: calc(5 * var(--pk-badge-fs, 12px)); }
/* STCT-9415: after the metrics and the squeeze, the CTA slot yields, then the status (fitRight; the page never scrolls) */
.pk-shell-right[data-pk-yield~="cta"] > .pk-shell-cta,
.pk-shell-right[data-pk-yield~="status"] > .pk-shell-status { display: none; }   /* status: phone bars only (fitRight) */
.pk-shell-right[data-pk-yield~="user"] .pk-usermenu-name { display: none; }
/* the bar's nav wears the brand's row look from menu-modes.css (--pk-nav-*); the shell adds only the bar's type face
   (STCT-9225: --pk-appbar-font, the website kind's --pk-webnav-font — the text face unless the brand sets its bars
   in another; menu-modes gives .pk-nav the text face, so the bar restates it) */
.pk-shell > .pk-shell-bar .pk-nav { font-family: var(--pk-appbar-font); }
.pk-shell[data-pk-webnav-layout] > .pk-shell-bar .pk-nav { font-family: var(--pk-webnav-font); }

/* ---- account metrics: label OVER value, as the trading app shows them ---- */
.pk-shell-metrics { display: flex; gap: var(--pk-appbar-gap, 16px); flex-wrap: nowrap; }
.pk-shell-metric { display: flex; flex-direction: column; line-height: var(--pk-lh-heading, 1.3); }
/* STCT-9056: a metric the shell folded away (the nav needs the room). display:flex above would beat [hidden] */
.pk-shell-metrics > [hidden] { display: none; }
/* the label is the bar's own ink at caption size: --pk-text-secondary on the bar is 4.09:1 on skyten (axe), and a
   label is text, so it takes the text token that is guaranteed against the ground it sits on */
.pk-shell-metric-label { font-size: var(--pk-fs-caption, 12px); color: var(--pk-text-primary, #191919); white-space: nowrap; }
.pk-shell-metric-value { font-variant-numeric: tabular-nums; font-size: var(--pk-fs-small, 13px); white-space: nowrap; }
.pk-shell-metric-value[data-tone="up"] { color: var(--pk-price-up, #28667D); }
.pk-shell-metric-value[data-tone="down"] { color: var(--pk-price-down, #A92E32); }

/* ---- bar actions (account selector, notifications) — STCT-8735 ---- */
.pk-shell-actions { display: flex; align-items: center; gap: var(--pk-space-sm, 8px); }

/* ---- connection status: the brand's --pk-status-* (tools-brands components.status). Unset = the neutral
   badge pill; skyten's is `plain` — no ground, no padding, the dot and the word on the bar (2026-09-29). ---- */
.pk-shell-status {
  font-size: var(--pk-status-fs, var(--pk-badge-fs, 12px)); font-weight: var(--pk-status-weight, var(--pk-badge-weight, 400));
  padding: var(--pk-status-pad, var(--pk-badge-pad, 2px 8px));
  border-radius: var(--pk-status-radius, var(--pk-badge-radius, 999px));
  background: var(--pk-status-bg, var(--pk-badge-neutral-bg, #F7F7F8));
  color: var(--pk-status-fg, var(--pk-badge-neutral-fg, #191919));
}
.pk-shell-status[data-tone="ok"] { background: var(--pk-badge-success-bg, #E9F7FC); color: var(--pk-badge-success-fg, #557F00); }
.pk-shell-status[data-tone="warn"] { background: var(--pk-badge-warning-bg, #FEF7E0); color: var(--pk-badge-warning-fg, #876A00); }
.pk-shell-status[data-tone="down"] { background: var(--pk-badge-danger-bg, #fbe8e8); color: var(--pk-badge-danger-fg, #A92E32); }

/* ---- STCT-9820 (PM_Dgn, REQ-573 AC1): the CONTEXT slot, after the logo — the ROLE and the VIEW TITLE.
        Ink: --pk-sem-header-fg, the brand's header ink (PM_Dgn on #345). On --pk-appbar-bg it reads >= 4.5:1 in all 166
        brand-modes (measured 2026-09-30); --pk-text-primary, the bar's own colour, failed 6 (the barbie/ikea/postbank/
        ford/milka/_default dark bars) and --pk-appbar-fg 10. context-contrast.test.js measures every brand x mode.
        The role is TEXT in an outlined chip plus a visually hidden "Role:" prefix: never colour alone. It is never cut;
        the title ellipsizes, squeezes, and on a phone bar gives way, and a role too long for a phone bar takes a row
        of its own (below). ---- */
.pk-shell-context {
  display: flex; align-items: center; gap: var(--pk-space-sm, 8px);
  /* ⛔ NOT SHRINKABLE: with flex-shrink the host went to 0px at 390 while the role overflowed it, so the shell measured
     an empty slot and yielded nothing (context-slot-probe.py). The title narrows by the shell's squeeze / yield instead. */
  flex: 0 0 auto; white-space: nowrap;
  font-size: var(--pk-fs-small, 13px);   /* the metric values' size: no new knob (tokens:probe) */
  color: var(--pk-sem-header-fg, #191919);
}
.pk-shell-context[hidden] { display: none; }
.pk-shell-context-role {
  flex: 0 0 auto; font-weight: var(--pk-fw-heading, 700); padding: var(--pk-badge-pad, 2px 8px);
  border: var(--pk-stroke, 1px) solid currentColor; border-radius: var(--pk-badge-radius, 999px);
  color: var(--pk-sem-header-fg, #191919);
}
.pk-shell-context-title {
  min-width: 0; max-inline-size: 40ch; overflow: hidden; text-overflow: ellipsis;
  color: var(--pk-sem-header-fg, #191919);
}
.pk-shell-context[data-pk-squeezed] .pk-shell-context-title { max-inline-size: 16ch; }
.pk-shell-context[data-pk-yield~="title"] .pk-shell-context-title { display: none; }
.pk-shell-context-label {
  /* visually hidden, read by assistive technology: a box one hairline wide (the brand's card border width —
     the only size it has is "exists"), clipped away; no size of its own (css:invented, STCT-8782) */
  position: absolute; width: var(--pk-card-border-w, 1px); height: var(--pk-card-border-w, 1px);
  margin: calc(-1 * var(--pk-card-border-w, 1px)); padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
/* a centred or right-hand logo keeps its place; the slot then sits before the right cluster (center) or after it */
.pk-shell[data-pk-logo-placement="center"] > .pk-shell-bar > .pk-shell-context,
.pk-shell[data-pk-logo-placement="right"] > .pk-shell-bar > .pk-shell-context { order: 2; }
/* the last resort on a phone bar (a long role that does not fit): the slot takes a ROW OF ITS OWN under the bar, whole
   role and title, rather than cutting the role or scrolling the page. Placed after the placement rules and as specific,
   so its order wins in every placement. */
.pk-shell > .pk-shell-bar[data-pk-context-row] { flex-wrap: wrap; row-gap: 0; }
.pk-shell > .pk-shell-bar > .pk-shell-context[data-pk-row] {
  order: 100; flex: 1 0 100%; min-width: 0; padding-block-end: var(--pk-space-xs, 4px);
}
.pk-shell > .pk-shell-bar > .pk-shell-context[data-pk-row] .pk-shell-context-title { max-inline-size: none; flex: 0 1 auto; }

/* ---- body / rail / content ---- */
.pk-shell-body { display: flex; flex: 1 1 auto; min-height: 0; }
/* STCT-8755: the rail STAYS ON SCREEN and scrolls inside itself — sticky under the bar, capped at the
   viewport. Its width and surface are the brand's vertical menu (--pk-rail-width, --pk-menu-bg). */
.pk-shell-rail {
  flex: 0 0 auto; width: var(--pk-rail-width, 14rem); min-width: 0; overflow-y: auto;
  position: sticky; top: 0; align-self: flex-start; max-height: 100vh; box-sizing: border-box;
  padding: var(--pk-space-sm, 8px) 0;
  background: var(--pk-menu-bg, #fff);
  border-right: var(--pk-stroke, 1px) solid var(--pk-sem-border-primary, #E6E6E6);
}
.pk-shell-content { flex: 1 1 auto; min-width: 0; padding: var(--pk-pad-container, 16px); }

/* Rail layout: the nav moves out of the bar and down the side. */
.pk-shell[data-pk-shell-layout="rail"] .pk-shell-body { flex-direction: row; }
.pk-shell[data-pk-shell-layout="rail"] .pk-shell-nav { flex: 0 0 auto; }

/* ---- a destination that is not built yet (STCT-8633) — NOT COLOUR ALONE: dimmed AND marked ---- */
.pk-shell-nav-disabled { opacity: 0.55; cursor: default; pointer-events: none; }
.pk-shell-nav-soon {
  font-size: var(--pk-fs-caption, 11px); font-weight: var(--pk-badge-weight, 600);
  padding: 0 var(--pk-space-xs, 4px);
  border-radius: var(--pk-badge-radius, 999px);
  border: var(--pk-stroke, 1px) solid currentColor;
}

/* ---- phone width: the bar stays one row (the nav has collapsed), the metrics leave, the rail becomes
        a band above the content. A frame that makes the PAGE scroll sideways on a phone is the defect. */
@media (max-width: 767.98px) {
  .pk-shell-bar { gap: var(--pk-space-sm, 8px); padding-inline: var(--pk-space-sm, 8px); }
  .pk-shell-metrics { display: none; }
  .pk-shell-body, .pk-shell[data-pk-shell-layout="rail"] .pk-shell-body { flex-direction: column; }
  .pk-shell-rail {
    position: static; width: auto; max-height: 40vh;
    border-right: 0;
    border-bottom: var(--pk-stroke, 1px) solid var(--pk-sem-border-primary, #E6E6E6);
  }
}

/* ---- STCT-8838: the tab strip under the bar (`submenus: 'tabs-underline'` in the top-bar layout): the current
        page's GROUP as the brand's tabs (menu-modes' tabs-underline submenu), on the page surface ---- */
.pk-shell-tabs {
  padding: 0 var(--pk-appbar-gap, 1rem);
  background: var(--pk-sem-bg-surface-primary, #fff);
  border-bottom: var(--pk-stroke, 1px) solid var(--pk-sem-border-primary, #E6E6E6);
  overflow-x: auto;
}
.pk-shell-tabs[hidden] { display: none; }
.pk-shell-tabs > .pk-nav-submenu { border-bottom: 0; }

/* ---- STCT-8838 / STCT-9053: the WEBSITE menu (data-pk-webnav-layout on .pk-shell, from renderAppShell({ webLayout })):
        logo-left = wordmark left, items right-aligned; logo-right = the mirror; split-centre = the logo between
        the items and the account cluster; centred-group (STCT-9228) = logo, items and actions as one centred
        group. Painted from the vendored --pk-webnav-* (brand contract foundation-1.2):
        skyten's is skytraders.trading's header — no ground of its own (transparent: the page ground shows), 58px
        high, the 19px two-blue lockup, the content in a 1280px box, the navy "Apply now" pill. Only the website
        kind reads these; the application bar keeps --pk-appbar-*. ---- */
.pk-shell[data-pk-webnav-layout] > .pk-shell-bar {
  /* STCT-9228: the brand's DECORATION of the bar (--pk-webnav-decoration-image / -height, brand contract
     foundation-1.2) — Bosch's multicolour "supergraphic", an 8px band ABOVE the white bar. It is the bar's
     TOP background layer over its ground, and the bar's content row starts under it (padding-top), so the
     bar is --pk-webnav-height tall below the band. A brand without one ships `none` / 0px: the layer draws
     nothing and adds nothing — no element, no positioning, no pixel moves for it. The image is cut to the band
     the way the site cuts it (background-size: cover of a full-width band: the file's own
     preserveAspectRatio slice keeps its middle strip). */
  background:
    var(--pk-webnav-decoration-image) top center / 100% var(--pk-webnav-decoration-height) no-repeat,
    var(--pk-webnav-bg);
  color: var(--pk-webnav-fg);
  min-height: var(--pk-webnav-height);
  border-bottom: var(--pk-webnav-border, var(--pk-appbar-border, none));   /* STCT-9229: the website's own rule, else the app bar's */
  -webkit-backdrop-filter: var(--pk-webnav-backdrop, var(--pk-appbar-backdrop, none));
  backdrop-filter: var(--pk-webnav-backdrop, var(--pk-appbar-backdrop, none));
  /* STCT-9225: the website's type face (a brand that states none keeps the app bar's) */
  font-family: var(--pk-webnav-font);
  padding-top: var(--pk-webnav-decoration-height);
  min-height: calc(var(--pk-webnav-height) + var(--pk-webnav-decoration-height));
}
/* WEB-1540 (D28) — the bar's height while its menu is EXPANDED: --pk-webnav-height-wide, an OPTIONAL brand token that
   falls back to --pk-webnav-height. skytraders.trading (measured 2026-10-10): 72px from 861px up, 58px below, where
   the burger shows; the height switches WITH the menu's collapse, so the rule keys on the collapse (the app's
   responsive.below), not on a fixed media query. A brand that ships no such token keeps one height. */
.pk-shell[data-pk-webnav-layout] > .pk-shell-bar:not(:has(.pk-nav[data-pk-menu-collapsed])) {
  min-height: calc(var(--pk-webnav-height-wide, var(--pk-webnav-height)) + var(--pk-webnav-decoration-height));
}
/* STCT-9225: the website's side padding above the phone breakpoint (a brand that states none keeps the app bar's
   gap; under it the bar keeps its phone padding) */
@media (min-width: 768px) {
  .pk-shell[data-pk-webnav-layout] > .pk-shell-bar { padding-inline: var(--pk-webnav-pad-x); }
}
/* the boxed width is the WEBSITE's content box (skytraders.trading: 1280px), not the application container */
.pk-shell[data-pk-webnav-layout][data-pk-bar-width="boxed"] > .pk-shell-bar,
.pk-shell[data-pk-webnav-layout][data-pk-page-width="boxed"] > .pk-shell-bar,
.pk-shell[data-pk-webnav-layout][data-pk-page-width="boxed"] > .pk-shell-body {
  padding-inline: max(var(--pk-container-gutter), calc((100% - var(--pk-webnav-container-max-width)) / 2));
}
.pk-shell[data-pk-webnav-layout] > .pk-shell-bar > .pk-shell-logo .pk-shell-logo-img { height: var(--pk-webnav-logo-height); }
.pk-shell[data-pk-webnav-layout] > .pk-shell-bar > .pk-shell-nav { display: flex; }
.pk-shell[data-pk-webnav-layout="logo-left"] > .pk-shell-bar > .pk-shell-nav { justify-content: flex-end; }
.pk-shell[data-pk-webnav-layout="logo-right"] > .pk-shell-bar > .pk-shell-nav { justify-content: flex-start; }
.pk-shell[data-pk-webnav-layout="split-centre"] > .pk-shell-bar > .pk-shell-nav { justify-content: center; }
/* 2026-09-29 (pfreview, tools-brands nav.website layout centred): no logo in the bar, the menu in the middle */
.pk-shell[data-pk-webnav-layout="centred"] > .pk-shell-bar > .pk-shell-logo { display: none; }
.pk-shell[data-pk-webnav-layout="centred"] > .pk-shell-bar > .pk-shell-nav { justify-content: center; }
/* a FLOATING website bar (data-pk-webnav-float from the brand's nav.website.layouts.<x>.floating): an island
   inset from the page edges, rounded, on its own fill, with the brand's soft shadow — every value the brand's */
.pk-shell[data-pk-webnav-layout][data-pk-webnav-float] > .pk-shell-bar {
  box-sizing: border-box;
  width: calc(100% - 2 * var(--pk-webnav-float-inset));
  max-width: var(--pk-webnav-float-max-width);
  margin: var(--pk-webnav-float-inset) auto 0;
  background: var(--pk-webnav-float-bg);
  border: var(--pk-webnav-float-border);
  border-radius: var(--pk-webnav-float-radius);
  box-shadow: var(--pk-webnav-float-shadow);
}
/* STCT-9225: the room between the last item and the bar's actions is the website's (xberry: 91px); a brand
   that states none keeps the bar's own gap (the margin is then 0) */
.pk-shell[data-pk-webnav-layout="logo-left"] > .pk-shell-bar > .pk-shell-right { margin-left: calc(var(--pk-webnav-actions-gap) - var(--pk-appbar-gap)); }
/* STCT-9228: centred-group (bosch-ebike.com) — the logo, the menu and the actions are ONE group in the middle of
   the bar: the group is the website's content box (--pk-webnav-container-max-width, Bosch 1072px, centred), its
   three members spread over it with at least --pk-webnav-actions-gap between them (Bosch: 74px), the menu
   content-wide between the two. Measured on the site: identical px at 1440 and 2000 (the box is fixed). */
.pk-shell[data-pk-webnav-layout="centred-group"] > .pk-shell-bar {
  justify-content: space-between;
  column-gap: var(--pk-webnav-actions-gap);
  padding-inline: max(var(--pk-webnav-pad-x), calc((100% - var(--pk-webnav-container-max-width)) / 2));
}
.pk-shell[data-pk-webnav-layout="centred-group"] > .pk-shell-bar > .pk-shell-nav { flex: 0 1 auto; justify-content: center; }
.pk-shell[data-pk-webnav-layout="centred-group"] > .pk-shell-bar > .pk-shell-right { margin-left: 0; }
/* WEB-1574: stacked (post.at, porsche.at — STCT-9068) — the TWO-ROW header: row 1 = the logo and the actions, row 2 =
   the menu as a full-width row under them (the context row's wrap, STCT-9820). Only while the menu is EXPANDED: under
   the breakpoint the menu collapses and the bar is the one row with the toggle, as in every layout.
   WEB-1576: the rows take the brand's OWN geometry (seed nav.website.logo_row / menu_row, optional tokens): row one
   --pk-webnav-stacked-logo-row-height with its ground (-bg) and the rule under it (-hairline), row two
   --pk-webnav-stacked-menu-row-height. Every fallback is what WEB-1574 painted (the bar height, no ground, no rule), so a
   brand that states none does not move. Row one's ground and rule are a pseudo LAYER of the expanded bar (isolated, so
   it sits above the bar's ground and under its content), full bar width. */
.pk-shell[data-pk-webnav-layout="stacked"] > .pk-shell-bar:not(:has(.pk-nav[data-pk-menu-collapsed])) {
  flex-wrap: wrap;
  row-gap: 0;
  position: relative;
  isolation: isolate;
}
.pk-shell[data-pk-webnav-layout="stacked"] > .pk-shell-bar:not(:has(.pk-nav[data-pk-menu-collapsed]))::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: var(--pk-webnav-decoration-height) 0 auto 0;
  box-sizing: border-box;
  height: var(--pk-webnav-stacked-logo-row-height, var(--pk-webnav-height));
  background: var(--pk-webnav-stacked-logo-row-bg, transparent);
  border-bottom: var(--pk-webnav-stacked-logo-row-hairline, none);
  pointer-events: none;
}
.pk-shell[data-pk-webnav-layout="stacked"] > .pk-shell-bar:not(:has(.pk-nav[data-pk-menu-collapsed])) > .pk-shell-logo {
  order: 0; margin: 0; min-height: var(--pk-webnav-stacked-logo-row-height, var(--pk-webnav-height));
}
.pk-shell[data-pk-webnav-layout="stacked"] > .pk-shell-bar:not(:has(.pk-nav[data-pk-menu-collapsed])) > .pk-shell-right {
  order: 1; flex: 0 0 auto; margin-left: auto; min-height: var(--pk-webnav-stacked-logo-row-height, var(--pk-webnav-height));
}
.pk-shell[data-pk-webnav-layout="stacked"] > .pk-shell-bar:not(:has(.pk-nav[data-pk-menu-collapsed])) > .pk-shell-nav {
  order: 2; flex: 1 0 100%; min-width: 0; justify-content: flex-start;
  min-height: var(--pk-webnav-stacked-menu-row-height, var(--pk-webnav-height));
}
/* WEB-1576: porsche.at's wordmark is CENTRED on row one (seed nav.website logo_position centre ->
   nav.website.layouts.stacked.logoPosition, stamped by the shell as data-pk-webnav-logo="center"); the actions stay at
   the end of the row */
.pk-shell[data-pk-webnav-layout="stacked"][data-pk-webnav-logo="center"] > .pk-shell-bar:not(:has(.pk-nav[data-pk-menu-collapsed])) > .pk-shell-logo {
  position: absolute; left: 50%; transform: translateX(-50%);
  top: var(--pk-webnav-decoration-height);
  height: var(--pk-webnav-stacked-logo-row-height, var(--pk-webnav-height)); min-height: 0;
  display: flex; align-items: center;
}
/* the CTA action in the website kind: the website's pill, one menu gap after the last item (it is the last
   member of the row on the site, so the gap before it is the items' gap) */
.pk-shell[data-pk-webnav-layout] > .pk-shell-bar .pk-shell-cta-button {
  background-color: var(--pk-webnav-cta-bg); color: var(--pk-webnav-cta-fg);
  border-radius: var(--pk-webnav-cta-radius);
  font-size: var(--pk-webnav-cta-fs); font-weight: var(--pk-webnav-cta-weight);
  box-sizing: border-box; height: var(--pk-webnav-cta-height);
  padding: var(--pk-pad-y-sm) var(--pk-webnav-cta-pad-x);
  border: var(--pk-webnav-cta-border);   /* STCT-9225: an OUTLINED pill (xberry's "Log in") */
  background-image: var(--pk-webnav-cta-bg-image, none);   /* STCT-9229: a gradient CTA (qc3's ramp) */
  /* WEB-1586: ONE definition edge. The website pill draws its edge as the border above (--pk-webnav-cta-border); the
     base .pk-shell-cta-button rule also paints the APPLICATION bar's inset edge (--pk-appbar-cta-edge), which on the
     website pill drew a second 1px line in the same colour (skyten light: border + inset, read up to 2px). A shadow
     takes no layout room, so dropping it leaves the box unchanged; no brand states that inset edge without a webnav
     border (census 2026-10-12, 87 brands x 2 modes), so no website pill loses its only edge. */
  box-shadow: none;
}
.pk-shell[data-pk-webnav-layout] > .pk-shell-bar .pk-shell-cta-button:hover {
  background-color: var(--pk-webnav-cta-hover-bg); color: var(--pk-webnav-cta-hover-fg);
  background-image: var(--pk-webnav-cta-hover-bg-image, none);
}
/* WEB-1555: PRESSED, the brand's optional --pk-webnav-cta-pressed-bg (skyten: grasshopper-60 #88CA00, spec 1487994953);
   unstated = the hover fill, which is what a press painted before (a press is a hover held down) */
.pk-shell[data-pk-webnav-layout] > .pk-shell-bar .pk-shell-cta-button:active {
  background-color: var(--pk-webnav-cta-pressed-bg, var(--pk-webnav-cta-hover-bg)); color: var(--pk-webnav-cta-hover-fg);
}
/* STCT-9225: the website's SECOND call to action (xberry's white "Sign up" pill beside the outlined "Log in") */
.pk-shell[data-pk-webnav-layout] > .pk-shell-bar .pk-shell-cta-button[data-pk-kind="cta2"] {
  background-color: var(--pk-webnav-cta2-bg); color: var(--pk-webnav-cta2-fg); border: var(--pk-webnav-cta2-border);
  border-radius: var(--pk-webnav-cta2-radius); font-weight: var(--pk-webnav-cta2-weight);
  height: var(--pk-webnav-cta2-height); padding: var(--pk-pad-y-sm) var(--pk-webnav-cta2-pad-x);
}
.pk-shell[data-pk-webnav-layout] > .pk-shell-bar .pk-shell-cta-button[data-pk-kind="cta2"]:hover {
  background-color: var(--pk-webnav-cta2-hover-bg); color: var(--pk-webnav-cta2-hover-fg);
}
/* WEB-1587: cta2's PRESSED fill, the brand's optional --pk-webnav-cta2-pressed-bg (skyten: grasshopper-70 #88CA00, the
   first CTA's, since skyten's cta2 copies it); unstated = cta2's hover fill, what a pressed cta2 painted before.
   After the :hover rule at the same specificity, so it wins while pressed. */
.pk-shell[data-pk-webnav-layout] > .pk-shell-bar .pk-shell-cta-button[data-pk-kind="cta2"]:active {
  background-color: var(--pk-webnav-cta2-pressed-bg, var(--pk-webnav-cta2-hover-bg)); color: var(--pk-webnav-cta2-hover-fg);
}

/* ---- STCT-9225: the application bar's items CENTRED (the brand's nav.application.itemsAlign, xberry's web app) ---- */
.pk-shell[data-pk-nav-align="center"] > .pk-shell-bar > .pk-shell-nav > .pk-nav { justify-content: center; }

/* ---- STCT-9225: the light/dark TOGGLE (renderAppShell({ themeToggle }), or the brand's bar declares one) — a
        round outlined button at the end of the bar; its size, edge and ink are the bar's tokens ---- */
.pk-shell-theme-toggle {
  display: inline-grid; place-items: center; flex: 0 0 auto;
  box-sizing: border-box; inline-size: var(--pk-appbar-toggle-size); block-size: var(--pk-appbar-toggle-size);
  padding: 0; border: var(--pk-appbar-toggle-border); border-radius: 50%;
  background: transparent; color: var(--pk-appbar-toggle-fg); cursor: pointer;
}
.pk-shell-theme-toggle[hidden] { display: none; }
.pk-shell-theme-toggle:focus-visible { outline: var(--pk-ring, 2px) solid var(--pk-ring-color, currentColor); outline-offset: var(--pk-ring-offset); }
.pk-shell-theme-toggle-icon {
  inline-size: var(--pk-nav-icon-size); block-size: var(--pk-nav-icon-size);
  background: currentColor;
  -webkit-mask: var(--pk-icon) center / contain no-repeat;
  mask: var(--pk-icon) center / contain no-repeat;
}
.pk-shell[data-pk-webnav-layout] > .pk-shell-bar .pk-shell-theme-toggle {
  inline-size: var(--pk-webnav-toggle-size); block-size: var(--pk-webnav-toggle-size);
  border: var(--pk-webnav-toggle-border); color: var(--pk-webnav-toggle-fg);
}
.pk-shell[data-pk-webnav-layout] > .pk-shell-bar .pk-shell-theme-toggle-icon { inline-size: var(--pk-space-md); block-size: var(--pk-space-md); }

/* STCT-9044: the Theme button (renderAppShell({ themePicker })) — opens the theme selection service */
.pk-shell-theme-button {
  display: inline-flex;
  align-items: center;
  gap: var(--pk-space-xs);
  padding: var(--pk-space-xs) var(--pk-space-sm);
  background: transparent;
  color: inherit;
  font: inherit;
  border: var(--pk-input-border-w) solid var(--pk-sem-border-primary);
  border-radius: var(--pk-button-radius, var(--pk-radius-button));
  cursor: pointer;
}
.pk-shell-theme-button:focus-visible { outline: var(--pk-ring, 2px) solid var(--pk-ring-color, currentColor); outline-offset: var(--pk-ring-offset); }
.pk-shell-theme-icon {
  inline-size: var(--pk-space-md);
  block-size: var(--pk-space-md);
  background: currentColor;
  -webkit-mask: var(--pk-icon) center / contain no-repeat;
  mask: var(--pk-icon) center / contain no-repeat;
}
@media (max-width: 767px) {
  /* phone: the glyph alone; the accessible name stays on the button */
  .pk-shell-theme-label { display: none; }
}

/* ============================================================================================================
   STCT-9355 (PM_Opt, OS-258): THE TAB BAR ON MOBILE (STCT-5855's vocabulary: "the top bar on web; the tab bar on
   mobile"). A profile with bottomNav (ios / android) anchors the navigation to the BOTTOM of the viewport:
   fixed, full width, above the safe-area inset, on the bar's own ground. The content reserves the measured height
   (--pk-bottom-nav-h, set by the shell) so nothing is covered, and "More" opens UPWARD from it.
   ============================================================================================================ */
.pk-shell[data-pk-bottom-nav] > .pk-shell-bar > .pk-shell-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  min-width: 0; max-width: 100vw; box-sizing: border-box;
  display: flex; justify-content: center;
  background: var(--pk-appbar-bg, #E7E7EB);
  border-top: var(--pk-stroke, 1px) solid var(--pk-sem-border-primary, rgba(0, 0, 0, 0.12));
  padding: var(--pk-space-xs, 4px) var(--pk-appbar-gap, 1rem) calc(var(--pk-space-xs, 4px) + env(safe-area-inset-bottom, 0px));
}
.pk-shell[data-pk-bottom-nav] > .pk-shell-body {
  padding-bottom: calc(var(--pk-bottom-nav-h, 4rem) + env(safe-area-inset-bottom, 0px));
}
/* a ROW's "More" is absolute in the nav: it opens upward from it */
.pk-shell[data-pk-bottom-nav] > .pk-shell-bar > .pk-shell-nav .pk-nav:not([data-pk-menu-collapsed="rail"]):not([data-pk-menu-mode="vertical"]):not([data-pk-drawer-open]) > .pk-nav-submenu:not([hidden]) {
  top: auto; bottom: 100%;
}
/* a phone's icon RAIL puts "More" in a FIXED panel spanning the viewport (menu-modes.css, STCT-8770): from a bottom
   tab bar it spans UP to just above the bar, never from the top of the screen down behind it */
.pk-shell[data-pk-bottom-nav] > .pk-shell-bar > .pk-shell-nav .pk-nav[data-pk-menu-collapsed="rail"]:not([data-pk-drawer-open]):not([data-pk-menu-mode="vertical"]) > .pk-nav-submenu:not([hidden]) {
  top: auto; bottom: calc(var(--pk-bottom-nav-h, 4rem) + env(safe-area-inset-bottom, 0px));
  max-height: calc(100dvh - var(--pk-bottom-nav-h, 4rem) - var(--pk-space-sm) - env(safe-area-inset-bottom, 0px));
}


/* ============================================================================================================
   STCT-9737 (operator): MAIN NAVIGATION AUTO-HIDE — a setting every brand ships OFF (nav.autoHide false,
   --pk-nav-auto-hide 0) and the USER switches on (createApp remembers it; the settings modal offers it).
   Every rule here is scoped under data-pk-nav-auto-hide, so with the setting off not one of them applies and
   every page renders exactly as before. ON: the top-bar layout's bar is FIXED over the page (the content takes
   the full height; that is the point of hiding the bar) and slides up out of view when hidden; the rail layout's
   rail slides left and gives its column to the content. A fixed sentinel at the screen edge (.pk-shell-nav-edge,
   one --pk-space-xs thick) is the hover target that brings it back; focus into it does the same (app-shell
   index.js). The motion is the drawer's (.18s ease-out, drawer.css), and none under prefers-reduced-motion.
   Never on a phone width: under 768px the bar / rail is in flow and shown whatever the setting.
   ============================================================================================================ */
.pk-shell-nav-edge { position: fixed; inset: 0 0 auto 0; block-size: var(--pk-space-xs, 4px); z-index: 30; }
.pk-shell-nav-edge[hidden] { display: none; }
.pk-shell[data-pk-nav-auto-hide][data-pk-shell-layout="rail"] > .pk-shell-nav-edge { inset: 0 auto 0 0; block-size: auto; inline-size: var(--pk-space-xs, 4px); }
.pk-shell[data-pk-nav-auto-hide][data-pk-shell-layout="top-bar"] > .pk-shell-bar {
  position: fixed; inset: 0 0 auto 0; z-index: 30;
}
.pk-shell[data-pk-nav-auto-hide][data-pk-shell-layout="top-bar"][data-pk-nav-auto-hidden] > .pk-shell-bar {
  transform: translateY(-100%);
}
.pk-shell[data-pk-nav-auto-hide][data-pk-shell-layout="rail"][data-pk-nav-auto-hidden] > .pk-shell-body > .pk-shell-rail {
  transform: translateX(-100%);
  margin-inline-end: calc(-1 * var(--pk-rail-width, 14rem));
}
@media (prefers-reduced-motion: no-preference) {
  .pk-shell[data-pk-nav-auto-hide] > .pk-shell-bar { transition: transform .18s ease-out; }
  .pk-shell[data-pk-nav-auto-hide] > .pk-shell-body > .pk-shell-rail { transition: transform .18s ease-out, margin-inline-end .18s ease-out; }
}
@media (max-width: 767.98px) {
  .pk-shell[data-pk-nav-auto-hide] > .pk-shell-nav-edge { display: none; }
  .pk-shell[data-pk-nav-auto-hide][data-pk-shell-layout="top-bar"] > .pk-shell-bar { position: static; transform: none; }
  .pk-shell[data-pk-nav-auto-hide][data-pk-shell-layout="rail"] > .pk-shell-body > .pk-shell-rail { transform: none; margin-inline-end: 0; }
}

/* ==== src/auth-page/auth-page.css ==== */
/* @paprika/skyten-foundation/auth-page — the standard sign-in / sign-up / reset page (STCT-8670), on
 * the BRAND CONTRACT (STCT-8770).
 *
 * LAYOUT AND FRAME ONLY. Everything inside the card is form-fields, the rule checklist and the
 * button, each with its own stylesheet — this sheet owns the centred card (the brand's card family),
 * the brand's LOGO (the image the brand JSON names for the mode, at --pk-logo-height), the heading
 * pair, the error region and the link row. The card is as wide as ~28 characters of the base type. */

.pk-auth {
  /* STCT-9100: the positioned stacking context an animated background (z-index -1) sits in, behind the card */
  position: relative;
  isolation: isolate;
  min-height: 100%;
  display: flex; align-items: center; justify-content: center;
  padding: var(--pk-pad-container, 16px);
  box-sizing: border-box;
  /* STCT-9893: NO ground of its own. Painted, the page colour made a SQUARE box behind the ROUNDED card wherever
     the page is not the whole document (a route outlet, a showcase stage, a backdrop photo): xberry dark showed a
     near-black square around its card. The page ground is the document's (html[data-pk-brand], app-shell.css);
     only an auth page mounted as the document's body paints it itself (below). */
  background: transparent;
  font-family: var(--pk-font-sans, system-ui, sans-serif);
  font-size: var(--pk-fs-base, 15px);
  line-height: var(--pk-lh, 1.5);
  color: var(--pk-text-primary, #191919);
}

/* the auth page IS the document: it paints the page ground the brand DECLARES (layout.pageBackground ->
   --pk-page-bg, contract 1.1, STCT-8908) */
body > .pk-auth { background: var(--pk-page-bg, var(--pk-sem-bg-page, #F2F2F2)); }

.pk-auth-card {
  width: 100%; max-width: calc(28 * var(--pk-fs-base, 15px)); box-sizing: border-box;
  display: flex; flex-direction: column; gap: var(--pk-space-sm, 8px);
  padding: var(--pk-card-pad, 16px);
  background: var(--pk-card-bg, #fff);
  border: var(--pk-card-border-w, 1px) solid var(--pk-card-border, #E6E6E6);
  border-radius: var(--pk-card-radius, 12px);
  box-shadow: var(--pk-card-shadow, none);
}

.pk-auth-logo { display: flex; align-items: center; gap: var(--pk-space-xs, 4px); }
.pk-auth-logo-img { height: var(--pk-logo-height, 28px); width: auto; max-width: 100%; object-fit: contain; display: block; }
/* the letter-mark is the fallback for a brand that ships no logo file */
.pk-auth-logo-mark {
  display: grid; place-items: center; width: var(--pk-logo-height, 28px); height: var(--pk-logo-height, 28px);
  border-radius: var(--pk-radius-s, 6px);
  background: var(--pk-primary, #49bae4);
  color: var(--pk-on-primary, #fff);
  font-weight: var(--pk-fw-heading, 700); font-size: var(--pk-fs-small, 14px); line-height: 1;
}
.pk-auth-logo-word { font-weight: var(--pk-fw-heading, 600); }

.pk-auth-heading { margin: var(--pk-space-sm, 8px) 0 0; font-size: var(--pk-fs-h3, 23px); line-height: var(--pk-lh-heading, 1.25); font-weight: var(--pk-fw-heading, 700); color: var(--pk-text-heading, inherit); }
.pk-auth-subheading { margin: 0; color: var(--pk-text-secondary, #666); font-size: var(--pk-fs-small, 14px); }

/* ⛔ THE ERROR REGION IS ALWAYS IN THE DOM (hidden), because aria-live only announces changes to
   a region it is already watching. The BORDER carries the severity alongside the colour (1.4.1). */
.pk-auth-error {
  margin: var(--pk-space-xs, 4px) 0 0;
  padding: var(--pk-pad-y-sm, 5px) var(--pk-pad-x-sm, 10px);
  border: var(--pk-stroke, 1px) solid var(--pk-danger-border, #F2AEB0);
  /* STCT-9224: no accent edge — no brand and no default defines one (a one-sided thick border was a library invention) */
  border-radius: var(--pk-card-radius, var(--pk-radius-s, 6px));
  background: var(--pk-danger-bg, #F7F7F8);
  color: var(--pk-text-primary, #191919);
  font-size: var(--pk-fs-small, 14px);
}

.pk-auth-form { display: flex; flex-direction: column; gap: var(--pk-space-sm, 8px); }

/* The input is the page's, because form-fields deliberately takes a Node rather than owning one;
   `.pk-field-input input` (form-fields.css) owns the box at higher specificity. */
.pk-auth-input {
  width: 100%; box-sizing: border-box;
  font: inherit; font-family: var(--pk-font-sans, system-ui, sans-serif);
  color: var(--pk-input-fg, #191919);
  background: var(--pk-input-bg, #fff);
  border-radius: var(--pk-input-radius, 6px);
  padding: var(--pk-input-pad, 8px 12px);
}
.pk-auth-input:focus-visible { outline-offset: var(--pk-ring-offset, 1px); }
.pk-auth-input:disabled { opacity: 0.55; cursor: default; }

.pk-auth-links { display: flex; flex-wrap: wrap; gap: var(--pk-space-md, 16px); }
.pk-auth-link {
  font-size: var(--pk-fs-small, 14px);
  color: var(--pk-text-link, #004f6f);
  /* ⛔ UNDERLINED, not colour-only (WCAG 1.4.1). */
  text-decoration: underline;
}
.pk-auth-footer { margin: 0; color: var(--pk-text-secondary, #666); font-size: var(--pk-fs-caption, 13px); }

/* operator 2026-10-09 — the card's PLACE on the page (data-pk-auth-panel-x / -y from the brand contract's
   background.loginPanel, or the page's `panel`): a third-width lane on the left or right, the card centred in it;
   top / bottom along the other axis. skyten: right third, centred, over its clouds. */
.pk-auth[data-pk-auth-panel-x="left-third"] { justify-content: flex-start; }
.pk-auth[data-pk-auth-panel-x="right-third"] { justify-content: flex-end; }
.pk-auth[data-pk-auth-panel-x="left-third"] > .pk-auth-card,
.pk-auth[data-pk-auth-panel-x="right-third"] > .pk-auth-card {
  /* the lane: a third of the page minus the page's own inset; the card keeps its max-width and sits in the lane's middle */
  margin-inline: max(0px, calc((100% / 3 - 28 * var(--pk-fs-base, 15px)) / 2));   /* the card is 28 × --pk-fs-base wide (above) */
}
.pk-auth[data-pk-auth-panel-y="top"] { align-items: flex-start; }
.pk-auth[data-pk-auth-panel-y="bottom"] { align-items: flex-end; }

@media (max-width: 480px) {
  .pk-auth, .pk-auth[data-pk-auth-panel-y] { align-items: flex-start; padding: var(--pk-space-sm, 8px); }
  .pk-auth[data-pk-auth-panel-x] { justify-content: center; }
  .pk-auth-card, .pk-auth[data-pk-auth-panel-x] > .pk-auth-card { max-width: none; margin-inline: 0; }
}

/* ==== src/avatar/avatar.css ==== */
/*
 * skyten-foundation — avatar (STCT-8284), on the BRAND CONTRACT (STCT-8770). Hooks: .pk-avatar,
 * .pk-avatar-initials, .pk-avatar-img, data-pk-size (sm | md | lg), data-pk-avatar-index (0..9), data-pk-has-image.
 * The background is the user's bucket colour, --pk-avatar-<index>, one of the ten slots the brand ships;
 * with no user id it is the brand's dark neutral. The initials are the slot's own ink, --pk-avatar-<index>-fg (STCT-9916:
 * the contract walks it to 4.5:1 on its slot — on-primary where that reads, else white/black, else on-primary walked);
 * without a slot (no user id) the brand's on-primary (STCT-9940: #000000 in 58 of 166 brand-modes, so NOT always white). The three
 * sizes are derived from the brand's type scale (h1 / h2 / h4), so a brand with larger type gets a larger mark.
 * --_pk-avatar-bg / --_pk-avatar-size are PRIVATE per-element properties, not part of the --pk-* contract.
 */
.pk-avatar {
  --_pk-avatar-size: var(--pk-fs-h2, 29px);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--_pk-avatar-size); height: var(--_pk-avatar-size); flex: 0 0 auto;
  border-radius: 50%; overflow: hidden;
  background: var(--_pk-avatar-bg, var(--pk-sem-skyten-black, #191919));
  color: var(--_pk-avatar-fg, var(--pk-on-primary, #ffffff));
  font-family: var(--pk-font-sans, sans-serif);
  font-weight: var(--pk-fw-heading, 600);
  font-size: calc(var(--_pk-avatar-size) * 0.4);
  line-height: 1;
  user-select: none;
}
/* STCT-9149: explicit 3-letter initials (an identity roster: ADM, INV, MPX) take a smaller scale so the widest letters stay
   inside the circle at every size; avatar-initials.test and the browser measurement on the PR hold it. */
.pk-avatar[data-pk-initials-length="3"] { font-size: calc(var(--_pk-avatar-size) * 0.27); }
/* STCT-9149, PM_Dgn's follow-up ruling c.106814: one letter at 0.55 of the diameter, so the lone letter at sm (19px) is
   10.45px, over the 10px floor (at 0.4 it was 7.6px). A lone glyph at about half the diameter is the usual proportion. */
.pk-avatar[data-pk-initials-length="1"] { font-size: calc(var(--_pk-avatar-size) * 0.55); }
.pk-avatar[data-pk-size="sm"] { --_pk-avatar-size: var(--pk-fs-h4, 19px); }
.pk-avatar[data-pk-size="lg"] { --_pk-avatar-size: var(--pk-fs-h1, 46px); }
.pk-avatar-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pk-avatar[data-pk-has-image] .pk-avatar-initials { visibility: hidden; }

/* ==== src/badge/badge.css ==== */
/* badge.css — the brand's status pill, on the BRAND CONTRACT (STCT-8770).
   Every tone paints the pair the brand authored, per mode: --pk-badge-<tone>-bg / -fg (the sheet's dark
   block carries the dark pair, so no swap rule lives here any more — STCT-8743's swap was the library
   standing in for a token that now exists). Shape, size, weight and padding are the brand's too:
   --pk-badge-radius / -fs / -weight / -pad. Contrast of a brand's own pair is a tools-brands finding
   (badge-contrast.test.js measures and reports it), not a value this sheet may replace. */

.pk-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--pk-space-xs, 4px);
  padding: var(--pk-badge-pad, 2px 10px);
  border-radius: var(--pk-badge-radius, 999px);
  font-family: var(--pk-font-sans, sans-serif);
  font-size: var(--pk-badge-fs, 12px);
  font-weight: var(--pk-badge-weight, 400);
  line-height: var(--pk-lh, 1.4);
  white-space: nowrap;
}

/* STCT-9941: the decorative glyph, in the tone's own ink (currentColor = the tone's --pk-badge-<tone>-fg), at the text's
   size. aria-hidden in the markup: the label carries the meaning. */
.pk-badge-icon {
  /* the glyph is the badge's own type size (--pk-badge-fs): no size of its own (css:invented, STCT-8782) */
  width: var(--pk-badge-fs, 1em); height: var(--pk-badge-fs, 1em); flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask: var(--pk-icon) center / contain no-repeat;
  mask: var(--pk-icon) center / contain no-repeat;
}

.pk-badge-neutral {
  background: var(--pk-badge-neutral-bg, #F7F7F8);
  color: var(--pk-badge-neutral-fg, #666666);
}

.pk-badge-success {
  background: var(--pk-badge-success-bg, #F8FCFE);
  color: var(--pk-badge-success-fg, #75AF00);
}

.pk-badge-warning {
  background: var(--pk-badge-warning-bg, #FFFCF5);
  color: var(--pk-badge-warning-fg, #D8A900);
}

.pk-badge-danger {
  background: var(--pk-badge-danger-bg, #FBE8E8);
  color: var(--pk-badge-danger-fg, #DF3D42);
}

.pk-badge-info {
  background: var(--pk-badge-info-bg, #E0F2F9);
  color: var(--pk-badge-info-fg, #0090C9);
}

/* STCT-9229: the BRAND badge — an outlined pill in the brand's colour (qc3's hero "Simulate a Magnitude
   Faster": a 20 % primary tint, the primary as ink, a 1px 30 % primary rule). Every brand exports the
   three; one that states none gets its primary tint / primary ink and no border. */
.pk-badge-brand {
  background: var(--pk-badge-brand-bg, var(--pk-primary-bg, #E0F2F9));
  color: var(--pk-badge-brand-fg, var(--pk-primary, #0090C9));
  border: var(--pk-badge-brand-border, none);
}

/* STCT-9229: a glyph before the label — a bundled icon as a mask in the tone's ink */
.pk-badge-icon {
  display: inline-block;
  flex: none;
  width: var(--pk-badge-fs, 12px);
  height: var(--pk-badge-fs, 12px);
  background: currentColor;
  -webkit-mask: var(--pk-icon) center / contain no-repeat;
  mask: var(--pk-icon) center / contain no-repeat;
}

/* ==== src/breadcrumbs/breadcrumbs.css ==== */
/* breadcrumbs.css — STCT-8777. Text tokens (breadcrumbs.test.js measures them over 44 brand-modes on the
   surface and on the page background — a breadcrumb sits on either). The separator is CSS, so it is not
   read aloud.
   STCT-8777: `.pk-breadcrumbs-icon` is a decorative glyph drawn with the bundled icon as a mask in
   currentColor (--pk-icon is set PER ELEMENT by index.js, like menu-modes); `.pk-breadcrumbs-more` is the
   "…" button that expands a truncated path — a real button with the user-agent focus ring kept. */

.pk-breadcrumbs { --pk-breadcrumbs-icon-size: 1em; --pk-breadcrumbs-icon-gap: 0.35em; min-width: 0; font-family: var(--pk-font-sans, system-ui, sans-serif); font-size: 13px; }
.pk-breadcrumbs-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; row-gap: 2px; }
.pk-breadcrumbs-item { display: inline-flex; align-items: baseline; min-width: 0; }   /* a wrapped label keeps its separator on its first line */
.pk-breadcrumbs-item + .pk-breadcrumbs-item::before {
  content: "/";
  margin: 0 8px;
  color: var(--pk-text-secondary, #666666);
}
.pk-breadcrumbs .pk-breadcrumbs-link { color: var(--pk-text-secondary, #666666); text-decoration: underline; text-underline-offset: 2px; }
.pk-breadcrumbs .pk-breadcrumbs-link:hover { color: var(--pk-text-primary, #191919); }
.pk-breadcrumbs .pk-breadcrumbs-link:focus-visible { outline: 2px solid var(--pk-text-primary, #191919); outline-offset: 2px; border-radius: var(--pk-radius-xs, 2px); }
/* STCT-9098: the page you are on reads like its heading — the brand's heading ink and heading weight
   (skyten: marine #383B5B, 700); never a literal weight. */
.pk-breadcrumbs .pk-breadcrumbs-current { color: var(--pk-text-heading, var(--pk-text-primary, #191919)); font-weight: var(--pk-fw-heading, 700); overflow-wrap: anywhere; }
.pk-breadcrumbs .pk-breadcrumbs-icon {
  display: inline-block;
  width: var(--pk-breadcrumbs-icon-size);
  height: var(--pk-breadcrumbs-icon-size);
  margin-right: var(--pk-breadcrumbs-icon-gap);
  vertical-align: -0.125em;
  background: currentColor;
  -webkit-mask: var(--pk-icon) no-repeat center / contain;
  mask: var(--pk-icon) no-repeat center / contain;
}
.pk-breadcrumbs .pk-breadcrumbs-more {
  appearance: none;
  border: 0;
  margin: 0;
  padding: 0 var(--pk-space-xs, 4px);
  background: transparent;
  font: inherit;
  line-height: inherit;
  color: var(--pk-text-secondary, #666666);
  cursor: pointer;
  border-radius: var(--pk-radius-xs, 4px);
}
.pk-breadcrumbs .pk-breadcrumbs-more:hover { color: var(--pk-text-primary, #191919); background: var(--pk-sem-bg-surface-secondary, #ffffff); }
.pk-breadcrumbs .pk-breadcrumbs-more:focus-visible { outline: 2px solid var(--pk-text-primary, #191919); outline-offset: 2px; }

/* ==== src/bug-report/bug-report.css ==== */
/* @paprika/skyten-foundation/bug-report — load this sheet plus button.css, modal.css,
 * form-fields.css, textarea.css and select.css for the parts it composes; the library does not
 * inject it. Every colour and size is a --pk-* token with a fallback: the brand's light and dark
 * sheets carry the component, this file states no mode of its own (STCT-8782). */

.pk-bug-report {
  --pk-bug-report-icon: none;
  --pk-bug-report-icon-size: 1rem;
  --pk-bug-report-thumb-size: 6rem;
  display: inline-flex;
  font-family: var(--pk-font-sans, system-ui, sans-serif);
}
.pk-bug-report[hidden] { display: none; }

/* floating (the default): always in reach, bottom-right, above the page but under the dialog's top layer */
.pk-bug-report[data-pk-bug-report-placement='floating'] {
  position: fixed;
  right: var(--pk-space-md, 16px);
  bottom: var(--pk-space-md, 16px);
  z-index: 30;
}
.pk-bug-report[data-pk-bug-report-placement='inline'] { position: static; }

.pk-bug-report-icon {
  display: inline-block;
  width: var(--pk-bug-report-icon-size, 1rem);
  height: var(--pk-bug-report-icon-size, 1rem);
  background: currentColor;
  -webkit-mask: var(--pk-bug-report-icon) center / contain no-repeat;
  mask: var(--pk-bug-report-icon) center / contain no-repeat;
}

/* the dialog card: a form column, not the modal's centred 50vw info box */
.pk-bug-report-dialog .pk-modal-card {
  min-height: 0;
  max-width: min(92vw, calc(var(--pk-container-max-width, 1280px) / 2));
  text-align: start;
}
.pk-bug-report-dialog .pk-modal-content { text-align: start; }

.pk-bug-report-form {
  display: flex;
  flex-direction: column;
  gap: var(--pk-space-md, 16px);
  color: var(--pk-text-primary, #191919);
  font-family: var(--pk-font-sans, system-ui, sans-serif);
}
.pk-bug-report-form[data-pk-bug-report-dragging='true'] {
  outline: var(--pk-bw-primary, 2px) dashed var(--pk-text-secondary, #666);
  outline-offset: var(--pk-space-xs, 4px);
}

.pk-bug-report-title {
  box-sizing: border-box;
  width: 100%;
  height: var(--pk-input-height, 40px);
  padding: 0 var(--pk-space-sm, 8px);
  font: inherit;
  font-size: var(--pk-input-fs, 14px);
  color: var(--pk-input-fg, var(--pk-text-primary, #191919));
  background: var(--pk-input-bg, #fff);
  border: var(--pk-bw-hairline, 1px) solid var(--pk-input-border, var(--pk-sem-border-primary, #E6E6E6));
  border-radius: var(--pk-input-radius, var(--pk-radius-s, 6px));
}
.pk-bug-report-title[aria-invalid='true'] { border-color: var(--pk-ramp-red-60, #A92E32); }

/* ── screenshots ── */
.pk-bug-report-shots {
  display: flex;
  flex-direction: column;
  gap: var(--pk-space-sm, 8px);
}
.pk-bug-report-shots-label {
  margin: 0;
  font-size: var(--pk-fs-caption, 12px);
  font-weight: var(--pk-fw-heading, 600);
  color: var(--pk-text-secondary, #666);
}
.pk-bug-report-shot-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--pk-space-sm, 8px);
}
.pk-bug-report-shot-list[hidden] { display: none; }
.pk-bug-report-shot {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--pk-space-xs, 4px);
  width: var(--pk-bug-report-thumb-size, 6rem);
}
.pk-bug-report-shot-img {
  display: block;
  width: var(--pk-bug-report-thumb-size, 6rem);
  height: var(--pk-bug-report-thumb-size, 6rem);
  object-fit: cover;
  background: var(--pk-sem-bg-surface-secondary, #F7F7F8);
  border: var(--pk-bw-hairline, 1px) solid var(--pk-sem-border-primary, #E6E6E6);
  border-radius: var(--pk-radius-s, 6px);
}
.pk-bug-report-shot-name {
  font-size: var(--pk-fs-caption, 12px);
  color: var(--pk-text-secondary, #666);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* the remove button sits on the thumbnail's corner; its hit box stays the button's own (≥ 44px with min-* below) */
.pk-bug-report-shot-remove {
  position: absolute;
  top: var(--pk-space-xs, 4px);
  right: var(--pk-space-xs, 4px);
}
.pk-bug-report-shot-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pk-space-sm, 8px);
}
.pk-bug-report-file {
  position: absolute;
  width: var(--pk-bw-primary, 1px);
  height: var(--pk-bw-primary, 1px);
  margin: calc(-1 * var(--pk-bw-primary, 1px));
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
/* the file label is styled as a button (the input is visually hidden, the label is its control) */
.pk-bug-report-pick { cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.pk-bug-report-file:focus-visible + .pk-bug-report-pick,
.pk-bug-report-file:focus + .pk-bug-report-pick,
.pk-bug-report :focus-visible {
  outline: var(--pk-ring, 2px) solid var(--pk-ring-color, currentColor);
  outline-offset: 1px;
}
.pk-bug-report-shots-hint {
  margin: 0;
  font-size: var(--pk-fs-caption, 12px);
  color: var(--pk-text-secondary, #666);
}
/* after a clipboard read that found no image: the hint is the instruction, in the text ink */
.pk-bug-report-shots-hint[data-pk-bug-report-hint='paste'] {
  color: var(--pk-text-primary, #191919);
  font-weight: var(--pk-fw-heading, 600);
}
.pk-bug-report-shots-error {
  margin: 0;
  font-size: var(--pk-fs-caption, 12px);
  color: var(--pk-ramp-red-100, #7b2224);
}
.pk-bug-report-shots-error[hidden] { display: none; }

/* every tap target in the dialog and the launcher is at least 44px (WCAG 2.5.8 / Apple HIG) */
.pk-bug-report-dialog .pk-button,
.pk-bug-report-dialog .pk-bug-report-pick,
.pk-bug-report-launcher {
  min-height: var(--pk-button-height, 44px);
  min-width: var(--pk-button-height, 44px);
}

/* ── context: read-only, what is sent ── */
.pk-bug-report-context {
  padding: var(--pk-space-sm, 8px) var(--pk-space-md, 16px);
  background: var(--pk-sem-bg-surface-secondary, #F7F7F8);
  border: var(--pk-bw-hairline, 1px) solid var(--pk-sem-border-primary, #E6E6E6);
  border-radius: var(--pk-radius-s, 6px);
  font-size: var(--pk-fs-caption, 12px);
}
.pk-bug-report-context-summary {
  cursor: pointer;
  font-weight: var(--pk-fw-heading, 600);
  color: var(--pk-text-primary, #191919);
}
.pk-bug-report-context-list {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--pk-space-xs, 4px) var(--pk-space-md, 16px);
  margin: var(--pk-space-sm, 8px) 0 0;
}
.pk-bug-report-context-list dt {
  color: var(--pk-text-secondary, #666);
}
.pk-bug-report-context-list dd {
  margin: 0;
  overflow-wrap: anywhere;
}

/* ── outcome: words, never colour alone ── */
.pk-bug-report-status {
  margin: 0;
  font-weight: var(--pk-fw-heading, 600);
}
.pk-bug-report-status[hidden] { display: none; }
.pk-bug-report-error {
  margin: 0;
  padding: var(--pk-space-sm, 8px) var(--pk-space-md, 16px);
  color: var(--pk-ramp-red-100, #7b2224);
  background: var(--pk-ramp-red-10, #fbe8e8);
  border-radius: var(--pk-radius-s, 6px);
}
.pk-bug-report-error[hidden] { display: none; }

/* ── tickets submitted (this session) ── */
.pk-bug-report-submitted {
  padding-top: var(--pk-space-sm, 8px);
  border-top: var(--pk-bw-hairline, 1px) solid var(--pk-sem-border-primary, #E6E6E6);
}
.pk-bug-report-submitted[hidden] { display: none; }
.pk-bug-report-submitted-title {
  margin: 0 0 var(--pk-space-xs, 4px);
  font-size: var(--pk-fs-caption, 12px);
  font-weight: var(--pk-fw-heading, 600);
  color: var(--pk-text-secondary, #666);
}
.pk-bug-report-submitted-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--pk-space-xs, 4px);
  font-size: var(--pk-fs-caption, 12px);
}
.pk-bug-report-submitted-key,
.pk-bug-report-status-link {
  font-weight: var(--pk-fw-heading, 600);
  color: var(--pk-text-link, var(--pk-text-primary, #191919));
}
.pk-bug-report-submitted-time { color: var(--pk-text-secondary, #666); }
.pk-bug-report-submitted-note {
  margin: var(--pk-space-xs, 4px) 0 0;
  font-size: var(--pk-fs-caption, 12px);
  color: var(--pk-text-secondary, #666);
}

/* a phone (360px): the source buttons stack full width, the context rows too. The modal's card has
   no container-type; the viewport query covers it. */
@media (max-width: 600px) {
  .pk-bug-report-dialog .pk-modal-card { max-width: 100vw; min-width: 0; width: 100vw; }
  .pk-bug-report-context-list { grid-template-columns: 1fr; }
  .pk-bug-report-shot-actions { flex-direction: column; align-items: stretch; }
  .pk-bug-report-shot-actions > .pk-button,
  .pk-bug-report-shot-actions > .pk-bug-report-pick { flex: 1 1 auto; width: 100%; box-sizing: border-box; }
}

/* ==== src/button/button.css ==== */
/* button.css — the brand's button, on the BRAND CONTRACT (STCT-8770): --pk-button-bg / -fg / -hover /
   -active / -disabled / -secondary-bg / -secondary-fg / -secondary-border / -radius / -height / -pad /
   -border-w / -fs / -weight / -transform / -ls / -shadow. STCT-9856 (operator 2026-09-29): the default button
   (no flag) is the brand's STANDARD button — "the layout if somebody just creates a button" — painted from
   --pk-button-bg / -fg / -hover / -active / -disabled (the contract's standard set; --pk-button-standard-* are
   its aliases); `.pk-button-active` (active: true) is the PRIMARY / selected set (--pk-button-selected-*);
   `.pk-button-secondary` is its outlined secondary; danger paints the brand's --pk-danger / --pk-on-danger
   pair (--pk-button-error-*: its own fill, ink and edge). The small step is --pk-button-small-*. STCT-9906 /
   STCT-9229: a GLOSSY or ramp fill paints --pk-button-standard-bg-image / --pk-button-selected-bg-image over the
   flat colour, and a selected button may glow at rest (--pk-button-selected-shadow); none for every other brand.
   Nothing here invents a value. */

.pk-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border: var(--pk-button-border-w, 1px) solid var(--pk-button-standard-border, #383b5b);
  border-radius: var(--pk-button-radius, 999px);
  background: var(--pk-button-bg, #383b5b);
  background-image: var(--pk-button-standard-bg-image, none);
  background-origin: border-box;   /* STCT-9229: a ramp lies under the transparent edge instead of tiling into it */
  color: var(--pk-button-fg, #fff);
  font-family: var(--pk-font-sans, sans-serif);
  font-size: var(--pk-button-fs, 14px);
  font-weight: var(--pk-button-weight, 600);
  text-transform: var(--pk-button-transform, none);
  letter-spacing: var(--pk-button-ls, 0);
  line-height: var(--pk-lh, 1.5);
  box-shadow: var(--pk-button-shadow, none);
  padding: var(--pk-button-pad, 0 16px);
  height: var(--pk-button-height, 40px);
  white-space: nowrap;
  cursor: pointer;
}

/* contract 1.1 (STCT-8925): each state paints the label MEASURED for its own fill. One label on three
   fills put black on the darker hover in 66 brands; the old sheets fall back to the rest label. */
/* the STANDARD button's states (STCT-9856) */
.pk-button:hover:not(:disabled):not(.pk-button-loading) {
  background: var(--pk-button-hover, #2B2D45);
  border-color: var(--pk-button-standard-border, #2B2D45);
  color: var(--pk-button-hover-fg, #fff);
}
/* SELECTED (.pk-button-active) is its own face — the brand's --pk-button-selected-* pair (skyten: the
   app bar's active lozenge, marin with the arctic label; a brand that declares none vendors its hover
   pair, which is what this class painted before). Hovering a selected button paints the brand's
   selected-hover pair and its glow token — none on skyten (operator: no grasshopper on a button). */
.pk-button.pk-button-active {
  background: var(--pk-button-selected-bg, #383B5B);
  background-image: var(--pk-button-selected-bg-image, none);
  border-color: var(--pk-button-selected-border, var(--pk-button-selected-bg, #383B5B));
  color: var(--pk-button-selected-fg, #61BADE);
  box-shadow: var(--pk-button-selected-shadow, none);
}
.pk-button.pk-button-active:hover:not(:disabled):not(.pk-button-loading) {
  background: var(--pk-button-selected-hover-bg, #383B5B);
  background-image: var(--pk-button-selected-hover-bg-image, none);
  border-color: var(--pk-button-selected-hover-bg, #383B5B);
  color: var(--pk-button-selected-hover-fg, #61BADE);
  box-shadow: var(--pk-button-selected-glow, none);
}
.pk-button.pk-button-active:active:not(:disabled):not(.pk-button-loading) {
  background: var(--pk-button-selected-hover-bg, #383B5B);
  background-image: var(--pk-button-selected-hover-bg-image, none);
  border-color: var(--pk-button-selected-hover-bg, #383B5B);
  color: var(--pk-button-selected-hover-fg, #61BADE);
  box-shadow: var(--pk-button-selected-glow, none);
}
/* CT-2130 / WEB-1532: the ACTION face (action: true), a page call to action, NOT a selected state. It paints the
   brand's CTA pair, the same one the application bar's CTA paints (.pk-shell-cta-button): --pk-appbar-cta-*
   (skyten: navy #383B5B + white; every shipped theme writes it). Like the bar's CTA, hover and press keep the
   pair (app-shell.css paints no CTA hover change either). No new token: the pair is the brand's existing one.
   WEB-1559 (guide v2, Confluence 1487994953): a brand MAY state the CTA's own STATES, OPTIONAL --pk-appbar-cta-*
   tokens shared with the app bar's CTA slot (app-shell.css): a hover fill, a pressed fill, an INSET 1px definition
   edge (a box-shadow, so no box moves) and its own disabled face. Each is read with what the face painted before as
   its fallback (the pair kept on hover and press, no edge, the generic disabled face), so a brand that states none
   does not change. skyten: grasshopper #9AE600 + the marin #383B5B label, #ACEA2E hover, #88CA00 pressed, the same
   face light and dark, a #639300 edge in light. Loading keeps the ENABLED face (setLoading never sets `disabled`). */
.pk-button.pk-button-action {
  background: var(--pk-appbar-cta-bg, #383b5b);
  background-image: none;
  border-color: var(--pk-appbar-cta-bg, #383b5b);
  color: var(--pk-appbar-cta-fg, #fff);
  box-shadow: var(--pk-appbar-cta-edge, none);
}
.pk-button.pk-button-action:hover:not(:disabled):not(.pk-button-loading) {
  background: var(--pk-appbar-cta-hover-bg, var(--pk-appbar-cta-bg, #383b5b));
  border-color: var(--pk-appbar-cta-hover-bg, var(--pk-appbar-cta-bg, #383b5b));
  color: var(--pk-appbar-cta-fg, #fff);
}
.pk-button.pk-button-action:active:not(:disabled):not(.pk-button-loading) {
  background: var(--pk-appbar-cta-pressed-bg, var(--pk-appbar-cta-bg, #383b5b));
  border-color: var(--pk-appbar-cta-pressed-bg, var(--pk-appbar-cta-bg, #383b5b));
  color: var(--pk-appbar-cta-fg, #fff);
}
/* the disabled action face: the brand's own disabled face, its edge drawn INSET; unstated = the generic disabled face
   it painted before (the inset edge then takes the fill: no visible line) */
.pk-button.pk-button-action:disabled {
  background: var(--pk-appbar-cta-disabled-bg, var(--pk-button-disabled, #CFD0D8));
  border-color: var(--pk-appbar-cta-disabled-bg, var(--pk-button-disabled, #CFD0D8));
  color: var(--pk-appbar-cta-disabled-fg, var(--pk-button-disabled-fg, var(--pk-text-disabled, #999)));
  box-shadow: inset 0 0 0 1px var(--pk-appbar-cta-disabled-border, var(--pk-button-disabled, #CFD0D8));
}
/* WEB-1532 (D6): the HERO face (hero: true), a website hero's call to action. Measured on the live trading hero
   (WEB-1531 G4): arctic #49BAE4 ground, navy #383B5B label, 52px, 16px, a pill. That is the website bar CTA's own
   pair INVERTED (--pk-webnav-cta-*: navy ground, arctic label), so it reads those tokens swapped; no new token.
   The brand's dark selected pair (#49BAE4 + #0F1924) was the other candidate and does not match the measured label.
   Hover and press keep the pair, like the bar's CTA. Box measured too (desktop and phone alike): padding 0 34px,
   weight 700, NO border, 52px outer, so the face drops the border width rather than the padding.
   WEB-1555 (PO's variant C + the CTA state spec, Confluence 1487994953, 2026-10-11): a brand MAY state the hero's own
   STATES, --pk-webnav-hero-* (OPTIONAL contract tokens): the fill and label, a lighter hover, a darker press, an INSET
   1px definition edge (a box-shadow, so the measured box does not move) and its own disabled face. Each is read with
   what the hero painted before as its fallback (the inverted pair at every state, no edge, the generic disabled
   face), so a brand that states none does not change. skyten: grasshopper-50 #9AE600 with the marin #383B5B label,
   #ACEA2E on hover, #88CA00 pressed, the same face light and dark, a #639300 edge on a light surface. Loading keeps
   the ENABLED face (setLoading never sets `disabled`). */
.pk-button.pk-button-hero {
  background: var(--pk-webnav-hero-bg, var(--pk-webnav-cta-fg, #49bae4));
  background-image: none;
  border-color: var(--pk-webnav-hero-bg, var(--pk-webnav-cta-fg, #49bae4));
  color: var(--pk-webnav-hero-fg, var(--pk-webnav-cta-bg, #383b5b));
  box-shadow: var(--pk-webnav-hero-edge, none);
}
.pk-button.pk-button-hero:hover:not(:disabled):not(.pk-button-loading) {
  background: var(--pk-webnav-hero-hover-bg, var(--pk-webnav-cta-fg, #49bae4));
  border-color: var(--pk-webnav-hero-hover-bg, var(--pk-webnav-cta-fg, #49bae4));
  color: var(--pk-webnav-hero-fg, var(--pk-webnav-cta-bg, #383b5b));
}
.pk-button.pk-button-hero:active:not(:disabled):not(.pk-button-loading) {
  background: var(--pk-webnav-hero-pressed-bg, var(--pk-webnav-cta-fg, #49bae4));
  border-color: var(--pk-webnav-hero-pressed-bg, var(--pk-webnav-cta-fg, #49bae4));
  color: var(--pk-webnav-hero-fg, var(--pk-webnav-cta-bg, #383b5b));
}
/* the disabled hero: the brand's own disabled face, its edge drawn INSET like the enabled one (the hero has no border
   width); unstated = the generic disabled face it painted before (the inset edge then takes the fill: no visible line) */
.pk-button.pk-button-hero:disabled {
  background: var(--pk-webnav-hero-disabled-bg, var(--pk-button-disabled, #CFD0D8));
  border-color: var(--pk-webnav-hero-disabled-bg, var(--pk-button-disabled, #CFD0D8));
  color: var(--pk-webnav-hero-disabled-fg, var(--pk-button-disabled-fg, var(--pk-text-disabled, #999)));
  box-shadow: inset 0 0 0 1px var(--pk-webnav-hero-disabled-border, var(--pk-button-disabled, #CFD0D8));
}
.pk-button.pk-button-hero {
  height: 52px;
  padding: 0 34px;
  border-width: 0;
  font-size: 16px;
  font-weight: 700;   /* WEB-1541: the hero's own measured weight; the bar CTA's is 500 since the 2026-10-10 re-measure */
  border-radius: var(--pk-webnav-cta-radius, 999px);
}
.pk-button:active:not(:disabled):not(.pk-button-loading) {
  background: var(--pk-button-active, #24263B);
  border-color: var(--pk-button-standard-border, #24263B);
  color: var(--pk-button-active-fg, #fff);
}

.pk-button.pk-button-secondary {
  background: var(--pk-button-secondary-bg, #fff);
  color: var(--pk-button-secondary-fg, #191919);
  border-color: var(--pk-button-secondary-border, #E6E6E6);
}
.pk-button.pk-button-secondary:hover:not(:disabled):not(.pk-button-loading) {
  /* the brand's own hover fill (mbc 2026-10-09: a FILLED black secondary with a white label hovered to the sunken
     page plane, 1.08:1 — the sunken plane is the hover of an OUTLINED secondary only); sunken stays the fallback */
  background: var(--pk-button-secondary-hover-bg, var(--pk-sem-bg-sunken, #F7F7F8));
  border-color: var(--pk-button-secondary-border, #E6E6E6);
  /* the generic hover/active rules set the PRIMARY's state label (STCT-8925); a secondary keeps its own */
  color: var(--pk-button-secondary-hover-fg, var(--pk-button-secondary-fg, #191919));
}
/* WEB-1560 (button guide v2, Confluence 1487994953): the quiet button's PRESSED face. A brand MAY state it,
   --pk-button-secondary-pressed-* (OPTIONAL contract tokens); each is read with what a pressed quiet button painted
   before (the hover pair, the quiet edge), so a brand that states none does not change. skyten: light charcoal-20
   #EBEBEB with a charcoal-40 #CCCCCC edge and a charcoal-90 #222222 label; dark marin-70 #2B2D45 with a white label.
   Its own rule (it shared the hover rule): without one a pressed secondary took the primary's active fill. */
.pk-button.pk-button-secondary:active:not(:disabled):not(.pk-button-loading) {
  background: var(--pk-button-secondary-pressed-bg, var(--pk-button-secondary-hover-bg, var(--pk-sem-bg-sunken, #F7F7F8)));
  border-color: var(--pk-button-secondary-pressed-border, var(--pk-button-secondary-border, #E6E6E6));
  color: var(--pk-button-secondary-pressed-fg, var(--pk-button-secondary-hover-fg, var(--pk-button-secondary-fg, #191919)));
}

/* the ERROR face (danger): the brand's --pk-button-error-* set — fill, ink and its own edge (skyten:
   pale red with a red border, red b40 label; error pressed red with a white label). A brand that
   declares none vendors its --pk-danger / --pk-on-danger pairs, so nothing moves elsewhere. */
.pk-button.pk-button-danger {
  background: var(--pk-button-error-bg, #F7D0D2);
  border-color: var(--pk-button-error-border, #DF3D42);
  color: var(--pk-button-error-fg, #91282B);
}
.pk-button.pk-button-danger:hover:not(:disabled):not(.pk-button-loading) {
  background: var(--pk-button-error-hover-bg, #F7D0D2);
  border-color: var(--pk-button-error-border, #DF3D42);
  color: var(--pk-button-error-hover-fg, #91282B);
}
/* a pressed danger button keeps the error family: without this rule the generic :active painted the
   PRIMARY's active fill under the error label */
.pk-button.pk-button-danger:active:not(:disabled):not(.pk-button-loading) {
  background: var(--pk-button-error-pressed-bg, #C4363A);
  border-color: var(--pk-button-error-pressed-bg, #C4363A);
  color: var(--pk-button-error-pressed-fg, #fff);
}

.pk-button:disabled {
  cursor: default;
  background-image: none;
  background: var(--pk-button-disabled, #CFD0D8);
  /* no gloss on a disabled face: the contract has no disabled bg-image for the standard button (tokens:probe) */
  background-image: none;
  background-origin: border-box;
  border-color: var(--pk-button-disabled, #CFD0D8);
  color: var(--pk-button-disabled-fg, var(--pk-text-disabled, #999));
  box-shadow: none;
}
/* the ramp and its label belong to the PRIMARY: a disabled secondary or danger button keeps the flat
   disabled pair it always had */
.pk-button.pk-button-secondary:disabled,
.pk-button.pk-button-danger:disabled {
  background-image: none;
  border-color: var(--pk-button-disabled, #CFD0D8);
  color: var(--pk-button-disabled-fg, var(--pk-text-disabled, #999));
  box-shadow: none;
}

/* the SMALL step: the brand's --pk-button-small-* (skyten: 32px, 13px, 0 16px — the template's second
   size; a brand that states none vendors auto / the caption size / the small paddings, as before) */
.pk-button.pk-button-small {
  font-size: var(--pk-button-small-fs, 12px);
  padding: var(--pk-button-small-pad, 4px 10px);
  height: var(--pk-button-small-height, auto);
}

/* An icon with NO label is as wide as it is tall (operator, 2026-09-28): under a pill radius that is a
   circle, under a square radius a square; the label's side padding made it an ellipse. The width is the
   brand's own button height; a small one is square on its own block padding. */
.pk-button.pk-button-icon-only {
  padding: 0;
  width: var(--pk-button-height, 40px);
  aspect-ratio: 1;
}
.pk-button.pk-button-icon-only.pk-button-small {
  padding: var(--pk-pad-y-sm, 4px);
  width: auto;
}
.pk-button-icon-only .pk-button-label:empty {
  display: none;
}

.pk-button-content {
  display: inline-flex;
  align-items: center;
  gap: var(--pk-gap, 8px);
}

.pk-button-content-hidden {
  visibility: hidden;
}

.pk-button-icon {
  display: inline-flex;
  align-items: center;
}

/* WEB-1564 (button guide v2, Confluence 1487994953): FOCUS is the face plus a RING, never a face change (M3 / REQ-717).
   One rule for every face (standard, primary, quiet, danger, action, hero, small, icon-only, loading). It is an OUTLINE:
   the same property as the browser's default focus outline, so it REPLACES it (nothing to double), and it leaves the
   faces' box-shadows (the hero / action edges, the selected glow) alone. :focus-visible, so a mouse click or a tap
   leaves none. The colour is the brand's OPTIONAL --pk-button-focus-ring (skyten: arctic-50 #49BAE4, both modes), else
   the ring every other control of the brand wears (--pk-ring-color). */
.pk-button:focus-visible {
  outline: var(--pk-ring, 2px) solid var(--pk-button-focus-ring, var(--pk-ring-color, currentColor));
  outline-offset: var(--pk-ring-offset, 2px);
}

.pk-button-spinner {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: var(--pk-button-fs, 14px);
  height: var(--pk-button-fs, 14px);
  border: var(--pk-stroke-strong, 2px) solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  opacity: 0.7;
  animation: pk-button-spin 0.7s linear infinite;
}

@keyframes pk-button-spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ---- WEB-1602: buttons on a website page (.pk-website-frame, and the out-of-frame cookie card) take the named sizes/weight ---- */
.pk-website-frame .pk-button,
:root:has(.pk-website-frame) .pk-cookie-banner .pk-button {
  --pk-button-fs: var(--pk-ts-m);
  --pk-button-small-fs: var(--pk-ts-s);
  --pk-button-weight: var(--pk-tw-semibold);
}
.pk-website-frame .pk-button.pk-button-hero { font-size: var(--pk-ts-m); font-weight: var(--pk-tw-semibold); }

/* ==== src/card/card.css ==== */
/* card.css — a content card (STCT-8777). Text uses only TEXT tokens on the secondary surface, the
   pair that reads in every brand-mode (card.test.js measures it); no ramp step is used for text,
   because ramps do not flip with the mode (STCT-8743 / STCT-8767). */

.pk-card {
  position: relative;               /* the stretched link's containing block */
  display: flex;
  flex-direction: column;
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
  border-radius: var(--pk-card-radius, var(--pk-radius-m, 12px));
  border: var(--pk-bw-hairline, 1px) solid var(--pk-sem-border-primary, #E6E6E6);
  background: var(--pk-card-bg, var(--pk-sem-bg-surface-secondary, #ffffff));   /* STCT-9251: the card's OWN ground (contract --pk-card-bg); today it equals the secondary surface, the export steps it off the page */
  font-family: var(--pk-font-sans, system-ui, sans-serif);
  color: var(--pk-text-primary, #191919);
  /* ELEVATED: the only shadow this component draws. Its colour is the brand's scrim token, so it
     is never an invented grey (STCT-8782); the offsets are structure, the colour is the theme's. */
  --pk-card-shadow: 0 2px 8px var(--pk-sem-nav-scrim, rgba(31,32,50, 0.8));
  --pk-card-check-size: 20px;
}
.pk-card-horizontal { flex-direction: row; flex-wrap: wrap; }

/* ELEVATED — lifted off the page by the token-coloured shadow. The hairline stays: on a dark surface
   a shadow alone can vanish, and the border keeps the card's edge readable. */
.pk-card-elevated { box-shadow: var(--pk-card-shadow); }

/* WEB-1588 / WEB-1590 (PO 2026-10-12): two OPT-IN faces a site asks for per card. STROKE 'primary' draws the edge at
   the brand's PRIMARY border width (--pk-bw-primary, skyten 1px) instead of the hairline (skyten 0.5px); TITLE weight
   'regular' sets the title in the body weight. A card that states neither is unchanged. Placed BEFORE the selected
   rule, at one class, so a selected card still takes the active width. */
.pk-card-stroke-primary { border-width: var(--pk-bw-primary, 1px); }
.pk-card-title-regular .pk-card-title { font-weight: 400; }

/* SELECTED — three cues: aria-current (announced), the check glyph top-right, the ACTIVE border width
   in the text colour. The padding does not move: the extra border width is taken from the radius side,
   and the glyph is absolutely positioned above the stretched link. */
.pk-card-selected {
  border-width: var(--pk-bw-active, 2px);
  border-color: var(--pk-text-primary, #191919);
}
.pk-card-check {
  display: none;
  position: absolute;
  top: var(--pk-space-sm, 8px);
  right: var(--pk-space-sm, 8px);
  width: var(--pk-card-check-size);
  height: var(--pk-card-check-size);
  border-radius: var(--pk-radius-pill, 30px);
  background: var(--pk-card-bg, var(--pk-sem-bg-surface-secondary, #ffffff));   /* the check sits on the card: same ground */
  z-index: 2;                       /* above the stretched link and the media */
}
.pk-card-check::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: var(--pk-text-primary, #191919);
  -webkit-mask: var(--pk-icon) center / contain no-repeat;
  mask: var(--pk-icon) center / contain no-repeat;
}
.pk-card-selected .pk-card-check { display: block; }

/* The wrapper rendered with `contain: true`: it IS the container the query below measures. */
.pk-card-container { container-type: inline-size; min-width: 0; }

.pk-card-media { flex: 0 0 auto; background: var(--pk-sem-bg-surface-primary, #E7E7EB); }
.pk-card-media img, .pk-card-media > * { display: block; width: 100%; height: 100%; object-fit: cover; }
.pk-card-vertical .pk-card-media { aspect-ratio: 16 / 9; }
/* ⛔ The horizontal card decides by ITS OWN width, not the viewport's: in a 206px grid cell a
   viewport breakpoint left a 38% picture and a text column of one word per line. With flex-wrap,
   media and body sit side by side while the card has room (>= ~380px) and stack when it does not. */
.pk-card-horizontal .pk-card-media { flex: 1 1 140px; min-height: 120px; }
.pk-card-horizontal .pk-card-body { flex: 3 1 220px; }

.pk-card-body {
  display: flex;
  flex-direction: column;
  gap: var(--pk-space-xs, 8px);
  padding: var(--pk-space-md, 16px);
  min-width: 0;
  flex: 1 1 auto;
}

.pk-card-eyebrow {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--pk-text-secondary, #666666);
}

.pk-card-title { margin: 0; font-size: 18px; line-height: 1.3; font-weight: 600; color: var(--pk-text-primary, #191919); }
.pk-card-text { font-size: 14px; line-height: 1.5; color: var(--pk-text-secondary, #666666); }
.pk-card-text > :first-child { margin-top: 0; }
.pk-card-text > :last-child { margin-bottom: 0; }

.pk-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pk-space-xs, 8px);
  margin-top: auto;                 /* actions sit at the bottom of equal-height cards in a grid */
  padding-top: var(--pk-space-xs, 8px);
  position: relative;               /* ⛔ above the stretched link, so they stay their own controls */
  z-index: 1;
}

/* A LINKED card: the title is the one link; ::after stretches its hit area over the whole card. */
.pk-card-link { color: inherit; text-decoration: none; }
.pk-card-link::after { content: ""; position: absolute; inset: 0; }
.pk-card-linked:hover { border-color: var(--pk-text-secondary, #666666); }
.pk-card-linked:hover .pk-card-link { text-decoration: underline; }
/* The focus ring is drawn on the CARD (the link's box is only the title), and only for keyboard. */
.pk-card-link:focus-visible { outline: none; }
.pk-card-linked:has(.pk-card-link:focus-visible) { outline: 2px solid var(--pk-text-primary, #191919); outline-offset: 2px; }


/* ---- Desktop vs Mobile (STCT-8777 frames). The horizontal card stacks its media ABOVE the text
   when its CONTAINER is 600px or narrower — a phone, a drawer, a sidebar — regardless of viewport.
   The container is whatever ancestor sets `container-type: inline-size` (the app's grid, or the
   `.pk-card-container` wrapper from `contain: true`). Without one, the flex-wrap rule above still
   folds the card by its own width. */
@container (max-width: 600px) {
  .pk-card-horizontal { flex-direction: column; }
  .pk-card-horizontal .pk-card-media { flex: 0 0 auto; aspect-ratio: 16 / 9; min-height: 0; }
  .pk-card-horizontal .pk-card-body { flex: 1 1 auto; }
}

/* ---- WEB-1602: cards on a website page (.pk-website-frame) - the named type, and the CARD PATCH of 2026-10-12 (PO: website
   pages only; design-system README 'Card patch'): (a) a regular-weight title in the secondary ink; (b) the body padding
   one step larger (--pk-space-lg, was --pk-space-md); (c) one empty text line under a title that has something after it
   (a title-only card does not grow). A card outside a website page is unchanged. ---- */
.pk-website-frame .pk-card-title { font-size: var(--pk-ts-l); font-weight: var(--pk-tw-bold); line-height: var(--pk-tlh-title); }
.pk-website-frame .pk-card-title-regular .pk-card-title { font-weight: var(--pk-tw-regular); color: var(--pk-tc-text-secondary); }
.pk-website-frame .pk-card-text { font-size: var(--pk-ts-s); line-height: var(--pk-tlh-text); }
.pk-website-frame .pk-card-eyebrow { font-size: var(--pk-ts-xs); font-weight: var(--pk-tw-bold); letter-spacing: var(--pk-tls-label); }
.pk-website-frame .pk-card-body { padding: var(--pk-space-lg, 20px); }
.pk-website-frame .pk-card-title:not(:last-child) { margin-bottom: calc(var(--pk-ts-l) * var(--pk-tlh-text)); }
/* DS PATCH 2026-10-13 (PO): on website pages every box takes the soft two-step shadow of the skytraders.community final
   design (its site.css section 9), the same values as the framed contact form's own shadow (library contact-form css,
   "the grid as a card"), which has no token. Written out, not as a variable, so it resolves at the box (in a light
   region the text colour is the light one). An ELEVATED card keeps its own stronger shadow. Not yet in
   @paprika/skyten-foundation. */
/* Extended the same day (PO): the website boxes that are not cards take it too, on the light and white grounds only
   (on navy and dark sections the shadow would read as a light haze): item cards (filled and accent faces included),
   the framed key-value list and the panel card. The step cards, which live on navy, stay as they are. */
.pk-website-frame .pk-card:not(.pk-card-elevated),
.pk-website-frame .pk-stat,
.pk-website-frame :is(.pk-website-ground-light, .pk-website-ground-white) :is(.pk-website-card, .pk-website-kv-framed, .pk-website-panel) {
  box-shadow: 0 1px 2px color-mix(in srgb, var(--pk-text-primary) 4%, transparent), 0 8px 24px color-mix(in srgb, var(--pk-text-primary) 6%, transparent);
}

/* ==== src/carousel/carousel.css ==== */
/* carousel.css — STCT-8777. A native horizontal scroller with scroll-snap; the controls use text tokens
   on the surface (carousel.test.js measures them over 44 brand-modes).

   Layout (Desktop + Mobile frames): the controls row WRAPS — prev/status/next, the indicator dots and
   the Pause/Play toggle sit on one line when there is room and fold onto two or three lines in a
   390px container. Intrinsic wrapping, no container-type needed on the parent. */

.pk-carousel {
  /* declared before they are read (theme.test.js): the component's own knobs */
  --pk-carousel-dot-size: 0.625rem;
  --pk-carousel-peek-basis: 85%;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--pk-space-xs, 8px);
  font-family: var(--pk-font-sans, system-ui, sans-serif);
  background: var(--pk-sem-bg-surface-secondary, #ffffff);
  color: var(--pk-text-primary, #191919);
  border-radius: var(--pk-card-radius, var(--pk-radius-m, 12px));
  padding: var(--pk-space-sm, 10px);
}

.pk-carousel-track {
  display: flex;
  gap: var(--pk-space-sm, 10px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  border-radius: var(--pk-radius-s, 6px);
}
.pk-carousel-track::-webkit-scrollbar { display: none; }
.pk-carousel-track:focus-visible { outline: 2px solid var(--pk-text-primary, #191919); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .pk-carousel-track { scroll-behavior: auto; } }

/* STCT-11796: scroll-snap-stop always — a fling of any speed moves ONE slide (a purchase choice is one plan per gesture) */
.pk-carousel-slide { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; box-sizing: border-box; }

.pk-carousel-peek .pk-carousel-slide { flex-basis: var(--pk-carousel-peek-basis); }

.pk-carousel-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--pk-space-sm, 10px); }
.pk-carousel-controls[hidden] { display: none; }
.pk-carousel .pk-carousel-prev,
.pk-carousel .pk-carousel-next {
  width: 36px; height: 36px; padding: 0;
  border-radius: 50%;
  border: var(--pk-bw-primary, 1px) solid var(--pk-text-secondary, #666666);
  background: transparent;
  font-size: 22px; line-height: 1;
  color: var(--pk-text-primary, #191919);
  cursor: pointer;
}
.pk-carousel-prev:disabled, .pk-carousel-next:disabled { opacity: .4; cursor: default; }
.pk-carousel-prev:focus-visible, .pk-carousel-next:focus-visible { outline: 2px solid var(--pk-text-primary, #191919); outline-offset: 2px; }
.pk-carousel .pk-carousel-status { min-width: 4.5em; text-align: center; font-size: 13px; color: var(--pk-text-secondary, #666666); }

/* Indicators: a tab per slide. The selected dot is a longer pill AND filled — shape, not colour alone. */
.pk-carousel .pk-carousel-dots { display: flex; align-items: center; gap: var(--pk-space-xs, 8px); padding: 0 var(--pk-space-xs, 8px); }
.pk-carousel .pk-carousel-dot {
  width: var(--pk-carousel-dot-size); height: var(--pk-carousel-dot-size); padding: 0;
  border-radius: var(--pk-radius-pill, 999px);
  border: var(--pk-bw-primary, 1px) solid var(--pk-text-secondary, #666666);
  background: transparent;
  cursor: pointer;
}
.pk-carousel .pk-carousel-dot-active { width: calc(var(--pk-carousel-dot-size) * 2.4); background: var(--pk-text-primary, #191919); border-color: var(--pk-text-primary, #191919); }
.pk-carousel-dot:focus-visible { outline: 2px solid var(--pk-text-primary, #191919); outline-offset: 2px; }

/* The Pause/Play toggle is the library button (small); it is always visible when autoplay is set. */
.pk-carousel .pk-carousel-toggle { margin-left: var(--pk-space-xs, 8px); }

/* ==== src/chart-canvas/chart-canvas.css ==== */
/* chart-canvas.css — the frame around an app-drawn chart (STCT-8777). Every colour is a token that
   every brand-mode writes; the canvas itself is painted by the app's draw() with colours read from
   the same tokens, so frame and chart change brand together. */

.pk-chart {
  margin: 0;
  /* ⛔ width:100% — measured, not assumed: without it the figure shrinks to its content inside a
     grid or flex cell, the plot came out 100px wide, and a centred message wrapped one word per
     line. A chart takes the width it is given; the app sets only the height. */
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--pk-space-xs, 8px);
  min-width: 0;
  font-family: var(--pk-font-sans, system-ui, sans-serif);
  color: var(--pk-text-primary, #191919);
  /* Component-local sizes, declared here so nothing below reads an undeclared name. */
  --pk-chart-legend-font-size: 12px;
  --pk-chart-swatch-width: 18px;
}

.pk-chart-header {
  display: flex;
  /* WRAP rather than squeeze: in a 206px showcase cell a three-button toolbar left the title one
     letter ("V"olume). When both do not fit, the toolbar drops below the title. */
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--pk-space-sm, 10px);
  min-width: 0;
}

.pk-chart-title {
  /* The title is the flexible item, so the toolbar keeps its size and the title ellipsises. Without
     flex/min-width a three-button toolbar cut "Volume" down to "V". */
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--pk-text-secondary, #666666);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pk-chart-toolbar { display: flex; align-items: center; gap: var(--pk-space-xs, 8px); flex: 0 0 auto; }

/* The PLOT box is what the app sizes (height) and what the ResizeObserver watches; the canvas fills
   it and is re-rasterised at devicePixelRatio, so it is never scaled by CSS (which blurs it). */
.pk-chart-plot {
  position: relative;
  min-width: 0;
  border-radius: var(--pk-radius-s, 6px);
  background: var(--pk-sem-bg-surface-primary, #E7E7EB);
  overflow: hidden;
}

.pk-chart-canvas { display: block; position: absolute; inset: 0; }

.pk-chart-overlay {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--pk-space-sm, 10px);
  text-align: center;
  font-size: 14px;
  color: var(--pk-text-secondary, #666666);
}
.pk-chart-loading .pk-chart-overlay,
.pk-chart-empty .pk-chart-overlay,
.pk-chart-error .pk-chart-overlay { display: flex; }
/* ⛔ NOT an alert colour. Measured over all 44 brand-modes against the plot surface: --pk-ramp-alert-100
   reads in 23 (1.44:1 in ptrain dark, because ramps do not flip with the mode), and --pk-error and
   alert-60 in 2. Only the text tokens read everywhere, so the error is carried by weight and a glyph,
   which is also what WCAG 1.4.1 asks: state is not conveyed by colour alone (chart-canvas.test.js). */
.pk-chart-error .pk-chart-overlay { color: var(--pk-text-primary, #191919); font-weight: 600; }
.pk-chart-error .pk-chart-overlay::before { content: "\26A0\FE0E\00A0"; }
.pk-chart-loading .pk-chart-canvas,
.pk-chart-empty .pk-chart-canvas,
.pk-chart-error .pk-chart-canvas { visibility: hidden; }

/* ---- kind: sparkline — a micro-chart in a row (gap-pass §1). No header, 80x20 by default, inline
   so it sits in a table cell or beside a figure; that neighbour is its caption. The plot keeps the
   surface colour so the line has a ground in every mode. */
.pk-chart-kind-sparkline {
  display: inline-flex;
  width: auto;
  vertical-align: middle;
  gap: 0;
}
.pk-chart-kind-sparkline .pk-chart-plot { border-radius: var(--pk-radius-xs, 4px); }
.pk-chart-kind-sparkline .pk-chart-overlay { font-size: var(--pk-chart-legend-font-size); padding: 0; }

/* ---- legend — under the canvas. Each entry carries a colour swatch AND a line style or marker
   (solid / dashed / dotted / marker), so two series are never told apart by colour alone. The
   swatch colours are the same series tokens draw() receives, in the same order. */
.pk-chart-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pk-space-xs, 8px) var(--pk-space-md, 16px);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--pk-chart-legend-font-size);
  color: var(--pk-text-secondary, #666666);
}
.pk-chart-legend-item { display: inline-flex; align-items: center; gap: var(--pk-space-xs, 8px); min-width: 0; }
.pk-chart-swatch {
  flex: 0 0 auto;
  display: inline-block;
  width: var(--pk-chart-swatch-width);
  height: 0;
  border-top: var(--pk-bw-active, 2px) solid var(--pk-chart-swatch-color);
}
.pk-chart-swatch-dashed { border-top-style: dashed; }
.pk-chart-swatch-dotted { border-top-style: dotted; }
.pk-chart-swatch-marker {
  width: var(--pk-space-sm, 8px);
  height: var(--pk-space-sm, 8px);
  border-top: 0;
  border-radius: var(--pk-radius-pill, 30px);
  background: var(--pk-chart-swatch-color);
}
.pk-chart-swatch-0 { --pk-chart-swatch-color: var(--pk-ramp-primary-60, #49bae4); }
.pk-chart-swatch-1 { --pk-chart-swatch-color: var(--pk-ramp-secondary-60, #0090c9); }
.pk-chart-swatch-2 { --pk-chart-swatch-color: var(--pk-ramp-tertiary-60, #383b5b); }
.pk-chart-swatch-3 { --pk-chart-swatch-color: var(--pk-ramp-tertiary-80, #9ae600); }
.pk-chart-swatch-4 { --pk-chart-swatch-color: var(--pk-ramp-orange-70, #f6c000); }
.pk-chart-swatch-5 { --pk-chart-swatch-color: var(--pk-ramp-red-60, #df3d42); }

/* ==== src/checkbox/checkbox.css ==== */
/* @paprika/skyten-foundation/checkbox — a token-styled native checkbox (STCT-8670), on the BRAND
 * CONTRACT (STCT-8770): the CHECKBOX family --pk-checkbox-* (STCT-9237).
 *
 * ⛔ THE INPUT IS STYLED, NOT HIDDEN. appearance:none turns the input itself into the box the
 * user sees, so the element the browser focuses and the element the user looks at are the same
 * one — and the focus ring lands where it should.
 *
 * The box is the brand's: --pk-checkbox-size / -radius / -bg / -border / -border-w at rest,
 * -hover-bg / -hover-border under the pointer, -checked-bg / -checked-border / -checked-border-w /
 * -checked-fg when on (skyten: a solid arctic box with a white tick; a brand that declares none
 * keeps its input surface with the primary as a 2px border and the tick in the input's ink),
 * -invalid-bg / -invalid-border / -invalid-border-w when wrong. The tick is the bundled `check`
 * icon (Lucide) drawn as a mask in currentColor, so it takes -checked-fg rather than being a
 * second colour to keep in sync; the dash is a shape of its own.
 */

.pk-checkbox {
  display: inline-flex; align-items: center; gap: var(--pk-gap, 8px);
  font-family: var(--pk-font-sans, system-ui, sans-serif);
  font-size: var(--pk-fs-small, 14px);
  color: var(--pk-text-primary, #191919);
  cursor: pointer; min-width: 0;
}
.pk-checkbox-bare { gap: 0; }

.pk-checkbox-control {
  appearance: none; -webkit-appearance: none;
  flex: 0 0 auto;
  box-sizing: border-box;
  width: var(--pk-checkbox-size, var(--pk-fs-base, 16px)); height: var(--pk-checkbox-size, var(--pk-fs-base, 16px)); margin: 0;
  display: grid; place-content: center;
  background: var(--pk-checkbox-bg, var(--pk-input-bg, #fff));
  border: var(--pk-checkbox-border-w, var(--pk-input-border-w, 1px)) solid var(--pk-checkbox-border, var(--pk-input-border, #808080));
  border-radius: var(--pk-checkbox-radius, var(--pk-input-radius, var(--pk-radius-xs, 3px)));
  cursor: pointer;
}

/* hover, unchecked: the brand's hover fill and border (unset = the resting box, so nothing moves) */
.pk-checkbox-control:hover:not(:checked):not(:indeterminate):not(:disabled) {
  background: var(--pk-checkbox-hover-bg, var(--pk-checkbox-bg, var(--pk-input-bg, #fff)));
  border-color: var(--pk-checkbox-hover-border, var(--pk-checkbox-border, var(--pk-input-border, #808080)));
}

/* ⛔ THE GLYPH IS A MASK IN currentColor, not a second colour token. */
.pk-checkbox-control::before {
  content: ""; width: var(--pk-checkbox-glyph, var(--pk-fs-caption, 10px)); height: var(--pk-checkbox-glyph, var(--pk-fs-caption, 10px));
  transform: scale(0); transform-origin: center;
  background-color: currentColor;
  -webkit-mask: var(--pk-check) center / contain no-repeat;
  mask: var(--pk-check) center / contain no-repeat;
}
/* checked: the brand's checked fill, border and glyph ink; the state is carried by the glyph's
   SHAPE as well as by colour (WCAG 1.4.1). */
.pk-checkbox-control:checked,
.pk-checkbox-control:indeterminate {
  background: var(--pk-checkbox-checked-bg, var(--pk-input-bg, #fff));
  border-color: var(--pk-checkbox-checked-border, var(--pk-primary, #49bae4));
  border-width: var(--pk-checkbox-checked-border-w, var(--pk-stroke-strong, 2px));
  color: var(--pk-checkbox-checked-fg, var(--pk-input-fg, #191919));
}
.pk-checkbox-control:checked::before,
.pk-checkbox-control:indeterminate::before { transform: scale(1); }

/* the bundled `check` (src/icons/svg/generic/check.svg, Lucide), as a stroke mask */
.pk-checkbox-control:checked {
  --pk-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
/* ⛔ A DASH, NOT A SECOND TICK: indeterminate must be distinguishable from checked by SHAPE. */
.pk-checkbox-control:indeterminate {
  --pk-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
}

/* the ring is the brand's; :focus-visible, so a mouse click leaves none behind */
.pk-checkbox-control:focus-visible {
  outline: var(--pk-ring, 2px) solid var(--pk-ring-color, currentColor);
  outline-offset: var(--pk-ring-offset, 2px);
}

/* invalid: the brand's invalid fill, border and border width (2px unless the brand says
   otherwise — skyten's reference is 1px); aria-invalid and form-fields' message carry it in words. */
.pk-checkbox-invalid .pk-checkbox-control,
.pk-checkbox-invalid .pk-checkbox-control:hover {
  background: var(--pk-checkbox-invalid-bg, var(--pk-checkbox-bg, var(--pk-input-bg, #fff)));
  border-color: var(--pk-checkbox-invalid-border, var(--pk-input-border-invalid, #A92E32));
  border-width: var(--pk-checkbox-invalid-border-w, var(--pk-stroke-strong, 2px));
}

/* WCAG 1.4.3 exempts inactive controls from the contrast minimum; the cursor changes too. */
.pk-checkbox-disabled { cursor: default; opacity: 0.55; }
.pk-checkbox-control:disabled { cursor: default; }

.pk-checkbox-label { min-width: 0; }

/* ==== src/chip/chip.css ==== */
/* chip.css — STCT-8777. chip.test.js measures every pair in every brand-mode (140 on 2026-09-24):
     label text on the chip fill                    >= 4.5:1  (brand-data failures recorded: 8 on 2026-09-24)
     the chip's border against page and surfaces    >= 3:1    (WCAG 1.4.11; brand-data failures recorded, STCT-8889)
     selected: text on the inverse fill             >= 4.5:1  (none recorded on 2026-09-24)
   ⛔ The border is --pk-text-secondary, NOT --pk-sem-border-primary: measured 2026-09-23 the border
   token is 1.00:1 against the page in 7oceans light and fails 3:1 in 123 of 132 pairs (STCT-8681).
   A chip whose edge cannot be seen is not identifiable as a control. */

.pk-chip {
  display: inline-flex; align-items: center; max-width: 100%; box-sizing: border-box;
  min-width: 0;          /* as a flex item (chips usually sit in a wrapping row) it may shrink, so the label truncates */
  border-radius: var(--pk-radius-pill, 999px);
  font-family: var(--pk-font-sans, system-ui, sans-serif);
  font-size: 13px; line-height: 1.2;
  vertical-align: middle;
}
.pk-chip { background: var(--pk-sem-bg-surface-primary, #E7E7EB); color: var(--pk-text-primary, #2d2c31); }
.pk-chip { border: 1px solid var(--pk-text-secondary, #666666); }
.pk-chip-label {
  display: inline-flex; align-items: center; gap: 4px; min-width: 0;
  padding: 4px 10px; margin: 0; border: 0; background: none; color: inherit; font: inherit;
  border-radius: inherit;
}
button.pk-chip-label { cursor: pointer; min-height: 28px; }
.pk-chip-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pk-chip-check { display: none; }
/* selected (STCT-8777): the bundled circle-check icon (iconMask, set as --pk-icon by index.js) drawn as a
   mask over the text colour, plus a heavier border — a check and a shape, never colour alone. */
.pk-chip { --pk-chip-check-size: 1em; --pk-chip-selected-border-width: 2px; }
.pk-chip-selected .pk-chip-check {
  display: inline-block; flex: none;
  width: var(--pk-chip-check-size, 1em); height: var(--pk-chip-check-size, 1em);
  background: currentColor;
  -webkit-mask: var(--pk-icon) center / contain no-repeat;
  mask: var(--pk-icon) center / contain no-repeat;
}
.pk-chip-selected .pk-chip-check:not([style*="--pk-icon"])::before { content: "\2713"; }   /* icon missing: text check */
.pk-chip.pk-chip-selected { background: var(--pk-text-primary, #2d2c31); color: var(--pk-sem-bg-surface-secondary, #ffffff); border-color: var(--pk-text-primary, #2d2c31); }
.pk-chip.pk-chip-selected { border-width: var(--pk-chip-selected-border-width, 2px); }
/* choice group: a wrapping row, one tab stop (see renderChipGroup) */
.pk-chip-group { --pk-chip-group-gap: 8px; }
.pk-chip-group { display: flex; flex-wrap: wrap; gap: var(--pk-chip-group-gap, 8px); min-width: 0; }
.pk-chip-removable .pk-chip-label { padding-right: 2px; }
.pk-chip-remove {
  display: inline-grid; place-items: center; flex: none;
  width: 24px; height: 24px; margin: 0 2px 0 0; padding: 0; border: 0; border-radius: 50%;
  background: none; color: inherit; cursor: pointer; font: inherit;
}
.pk-chip-remove::before { content: "\00d7"; font-size: 16px; line-height: 1; }
.pk-chip-remove:hover { background: color-mix(in srgb, currentColor 12%, transparent); }
.pk-chip-label:focus-visible, .pk-chip-remove:focus-visible { outline: 2px solid var(--pk-text-primary, #2d2c31); outline-offset: 2px; }
.pk-chip-disabled { opacity: 0.6; }
.pk-chip-disabled button { cursor: not-allowed; }

/* ==== src/command-palette/command-palette.css ==== */
/* Command palette (STCT-9769). Every value is a brand/theme token or the modal's own precedent (z-index 100, the
   fixed full-viewport layer): no invented colour, radius or shadow (operator rule, STCT-8770). */
.pk-command-palette[hidden] { display: none; }
.pk-command-palette {
  position: fixed;
  inset: 0;
  z-index: 100;                                   /* the same layer as .pk-modal-overlay */
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: var(--pk-space-lg);
  background: var(--pk-sem-nav-scrim);
  font-family: var(--pk-font-sans);
}
.pk-command-palette-input,
.pk-command-palette-list,
.pk-command-palette-status {
  width: min(40rem, calc(100vw - 2 * var(--pk-space-md)));
  box-sizing: border-box;
  margin: 0;
}
.pk-command-palette > * { background: var(--pk-pane-bg); color: var(--pk-text-primary); }
.pk-command-palette-input {
  display: block;
  padding: var(--pk-space-sm) var(--pk-space-md);
  border: var(--pk-bw-hairline) solid var(--pk-input-border);
  border-radius: var(--pk-radius-m) var(--pk-radius-m) 0 0;
  font: inherit;
  box-shadow: var(--pk-shadow-modal, none);
}
.pk-command-palette-input:focus { outline: var(--pk-bw-primary) solid var(--pk-primary); outline-offset: 0; }
.pk-command-palette-list {
  list-style: none;
  max-height: 60vh;
  overflow-y: auto;
  padding: var(--pk-space-xs) 0;
  border-inline: var(--pk-bw-hairline) solid var(--pk-sem-border-primary);
}
.pk-command-palette-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pk-space-md);
  padding: var(--pk-space-xs) var(--pk-space-md);
  cursor: pointer;
}
.pk-command-palette-option[aria-selected="true"] { background: var(--pk-sem-bg-surface-primary); }
.pk-command-palette-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-command-palette-shortcut {
  flex: none;
  font-family: var(--pk-font-mono);
  color: var(--pk-text-secondary);
  border: var(--pk-bw-hairline) solid var(--pk-sem-border-primary);
  border-radius: var(--pk-radius-s);
  padding: 0 var(--pk-space-xs);
}
.pk-command-palette-status {
  padding: var(--pk-space-xs) var(--pk-space-md);
  color: var(--pk-text-secondary);
  border: var(--pk-bw-hairline) solid var(--pk-sem-border-primary);
  border-top: 0;
  border-radius: 0 0 var(--pk-radius-m) var(--pk-radius-m);
}
.pk-command-palette-status:empty { display: none; }

/* ==== src/contact-form/contact-form.css ==== */
/* @paprika/skyten-foundation/contact-form — layout and frame only (STCT-8833).
 *
 * Every control inside is another component's (form-fields, select, checkbox, textarea,
 * file-upload, button, inline-alert), each with its own sheet. This sheet owns the four layouts
 * (card / grid / dialog / split), the header block, the status region, the files row, the action
 * row and the link row — nothing that paints a field.
 *
 * Every value is a token or a token fallback; the few structural sizes this component needs
 * (card widths, the heading scale) are declared as --pk-contact-form-{n} properties on the root
 * so a brand sheet can override them, and so nothing here is an invented literal (STCT-8782).
 * Colours only from theme tokens; light and dark come from data-pk-theme, not from this file.
 *
 * STCT-9229: the FRAME (card / dialog panels, the aside cards) is the brand's form panel —
 * --pk-form-panel-bg / -border / -border-w / -radius / -pad. A brand whose forms are its cards
 * (qc3: components.card.forms) exports its card there; every other brand exports exactly the
 * secondary surface / primary border / primary stroke / radius-l / space-lg this sheet painted
 * before, so it does not move. Glyphs (the title icon, the aside tiles) are --pk-icon-accent on
 * --pk-icon-tile-bg.
 *
 * A container query stacks every layout at 600px and under. The root IS an inline-size
 * container, so an app needs no wrapper; the showcase's device frame is one too. A container
 * query cannot resolve against the element it styles, which is why the layout rules sit on the
 * inner .pk-contact-form-body and never on the root. */

.pk-contact-form {
  --pk-contact-form-card-width: 26rem;
  --pk-contact-form-dialog-width: 32rem;
  --pk-contact-form-intro-width: 22rem;
  --pk-contact-form-file-min: 12rem;
  --pk-contact-form-title-size: 1.5rem;
  --pk-contact-form-title-weight: 700;
  --pk-contact-form-eyebrow-size: 0.75rem;
  --pk-contact-form-eyebrow-weight: 600;
  --pk-contact-form-eyebrow-spacing: 0.08em;
  --pk-contact-form-eyebrow-transform: uppercase;
  --pk-contact-form-text-size: 0.9375rem;
  --pk-contact-form-small-size: 0.8125rem;
  --pk-contact-form-line: 1.5;
  --pk-contact-form-split-padding: 3rem;
  --pk-contact-form-aside-columns: minmax(0, 2fr) minmax(0, 1fr);
  --pk-contact-form-glyph-size: 1.25em;
  --pk-contact-form-tile-size: 2.5rem;
  --pk-contact-form-tile-glyph: 1.25rem;

  container-type: inline-size;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  font-family: var(--pk-font-sans, system-ui, sans-serif);
  color: var(--pk-text-primary, #191919);
}
.pk-contact-form *, .pk-contact-form *::before, .pk-contact-form *::after { box-sizing: border-box; }

.pk-contact-form-panel { display: flex; flex-direction: column; gap: var(--pk-space-md, 16px); min-width: 0; }

/* ---- header ------------------------------------------------------------------------------ */
.pk-contact-form-header { display: flex; gap: var(--pk-space-sm, 8px); align-items: flex-start; }
.pk-contact-form-heading { display: flex; flex-direction: column; gap: var(--pk-space-xs, 4px); min-width: 0; }
.pk-contact-form-brand { display: flex; align-items: center; flex: none; font-weight: var(--pk-contact-form-title-weight); }
.pk-contact-form-eyebrow {
  margin: 0;
  font-size: var(--pk-contact-form-eyebrow-size);
  font-weight: var(--pk-contact-form-eyebrow-weight);
  letter-spacing: var(--pk-contact-form-eyebrow-spacing);
  text-transform: var(--pk-contact-form-eyebrow-transform);
  /* the accent as TEXT: primary-60 is the anchor colour and passes on both surfaces (select.css) */
  color: var(--pk-ramp-primary-60, #0090C9);
}
.pk-contact-form-title { margin: 0; font-size: var(--pk-contact-form-title-size); font-weight: var(--pk-contact-form-title-weight); line-height: var(--pk-contact-form-line); }
.pk-contact-form-description { margin: 0; color: var(--pk-text-secondary, #666); font-size: var(--pk-contact-form-text-size); line-height: var(--pk-contact-form-line); }

/* ---- status region (always in the DOM, see index.js) ------------------------------------- */
.pk-contact-form-status:empty { display: none; }
.pk-contact-form-summary {
  margin: 0;
  padding: var(--pk-space-sm, 8px);
  /* the word "attention" plus the leading edge carry the meaning; colour is supplementary */
  /* STCT-9224: no accent edge — no brand and no default defines one (a one-sided thick border was a library invention) */
  border-radius: 0 var(--pk-input-radius, var(--pk-radius-s, 6px)) var(--pk-input-radius, var(--pk-radius-s, 6px)) 0;
  background: var(--pk-sem-bg-surface-primary, #F7F7F8);
  color: var(--pk-text-primary, #191919);
  font-size: var(--pk-contact-form-small-size);
}

/* ---- fields: a two-column grid; span=2 rows and the files row take both ------------------- */
.pk-contact-form-form { display: flex; flex-direction: column; gap: var(--pk-space-md, 16px); min-width: 0; }
.pk-contact-form-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--pk-space-md, 16px);
  row-gap: var(--pk-space-xs, 4px);
}
.pk-contact-form-fields > [data-pk-contact-form-span="2"] { grid-column: 1 / -1; }
.pk-contact-form-field { min-width: 0; }
.pk-contact-form-hint { font-size: var(--pk-contact-form-small-size); color: var(--pk-text-secondary, #666); }
.pk-contact-form-field-checkbox .pk-field-input { display: flex; align-items: flex-start; }
/* the checkbox keeps its own box (form-fields no longer sizes a checkbox, STCT-9716), and its sentence (the consent
   text) wraps beside it rather than under the control */
.pk-contact-form-field-checkbox .pk-checkbox { display: flex; align-items: flex-start; }
/* the select wrap is inline-flex by design; in a form column it takes the column */
.pk-contact-form .pk-select { width: 100%; }

/* the card and dialog are narrow: one column unless the field asked for half width via span=1
   on a dialog (waitlist: first / last name side by side) */
.pk-contact-form-card .pk-contact-form-fields { grid-template-columns: minmax(0, 1fr); }

/* file cards: compact upload instances in one row (screen 32) */
.pk-contact-form-files {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--pk-contact-form-file-min), 1fr));
  gap: var(--pk-space-md, 16px);
  margin-bottom: var(--pk-space-sm, 8px);
}
.pk-contact-form-field-file {
  padding: var(--pk-space-md, 16px);
  border: var(--pk-bw-primary, 1px) solid var(--pk-sem-border-primary, #E6E6E6);
  border-radius: var(--pk-input-radius, var(--pk-radius-m, 10px));
  background: var(--pk-sem-bg-surface-primary, #fff);
  margin-bottom: 0;
}
.pk-contact-form-field-file .pk-field-label { color: var(--pk-text-primary, #191919); font-weight: var(--pk-contact-form-eyebrow-weight); }

/* ---- actions + links -------------------------------------------------------------------- */
.pk-contact-form-actions { display: flex; gap: var(--pk-space-sm, 8px); align-items: center; flex-wrap: wrap; }
.pk-contact-form-card .pk-contact-form-actions .pk-contact-form-submit { width: 100%; }
.pk-contact-form-dialog .pk-contact-form-actions { justify-content: space-between; }
.pk-contact-form-links { display: flex; flex-wrap: wrap; gap: var(--pk-space-md, 16px); font-size: var(--pk-contact-form-small-size); }
/* STCT-9571: the text ink, underlined. --pk-ramp-primary-60 does not flip with the mode and read 1.74:1 on the dark card;
   --pk-text-link fails in 103 of 280 surface cells (brand data, STCT-9566). The underline marks the link (WCAG 1.4.1). */
.pk-contact-form-link { color: var(--pk-text-primary, #191919); text-decoration: underline; }
.pk-contact-form-link:focus-visible { outline-offset: 1px; }

/* ---- layouts ---------------------------------------------------------------------------- */
/* card: centred on the page ground — the panel is a centred block, so it stays centred whatever the
   body's display (a device frame or a page column) resolves to */
.pk-contact-form-card > .pk-contact-form-body,
.pk-contact-form-dialog > .pk-contact-form-body { display: flex; justify-content: center; width: 100%; }
.pk-contact-form-card .pk-contact-form-panel,
.pk-contact-form-dialog .pk-contact-form-panel { margin-inline: auto; }
.pk-contact-form-mark { display: block; height: var(--pk-logo-height); width: auto; }
.pk-contact-form-card .pk-contact-form-panel,
.pk-contact-form-dialog .pk-contact-form-panel,
.pk-contact-form-has-aside .pk-contact-form-panel,
.pk-contact-form-aside-card {
  width: 100%;
  padding: var(--pk-form-panel-pad, var(--pk-space-lg, 24px));
  background: var(--pk-form-panel-bg, var(--pk-sem-bg-surface-secondary, #fff));
  border: var(--pk-form-panel-border-w, var(--pk-bw-primary, 1px)) solid var(--pk-form-panel-border, var(--pk-sem-border-primary, #E6E6E6));
  border-radius: var(--pk-form-panel-radius, var(--pk-radius-l, 12px));
}
.pk-contact-form-card .pk-contact-form-panel { max-width: var(--pk-contact-form-card-width); }
/* dialog: the CONTENT of a modal — the app opens it; the brand mark sits beside the heading */
.pk-contact-form-dialog .pk-contact-form-panel { max-width: var(--pk-contact-form-dialog-width); }

/* grid: on the page, no frame */
.pk-contact-form-grid .pk-contact-form-panel { max-width: 100%; }

/* split: intro left, form right, on the footer ground (theme-written, dark in both modes) */
.pk-contact-form-split > .pk-contact-form-body {
  display: grid;
  grid-template-columns: minmax(0, var(--pk-contact-form-intro-width)) minmax(0, 1fr);
  gap: var(--pk-space-xl, 32px);
  padding: var(--pk-contact-form-split-padding);
  background: var(--pk-sem-footer-surface, #383B5B);
  color: var(--pk-sem-footer-text, #fff);
}
.pk-contact-form-intro {
  display: flex; flex-direction: column; gap: var(--pk-space-md, 16px);
  padding-right: var(--pk-space-lg, 24px);
  border-right: var(--pk-bw-hairline, 1px) solid var(--pk-sem-footer-border-muted, #60627C);
}
.pk-contact-form-intro-title { margin: 0; font-size: var(--pk-contact-form-title-size); font-weight: var(--pk-contact-form-title-weight); line-height: var(--pk-contact-form-line); }
.pk-contact-form-intro-text { margin: 0; font-size: var(--pk-contact-form-text-size); line-height: var(--pk-contact-form-line); color: var(--pk-sem-footer-text, #fff); }
/* labels, hints and links read on the dark ground; the controls keep their own surface */
.pk-contact-form-split .pk-field-label,
.pk-contact-form-split .pk-contact-form-title,
.pk-contact-form-split .pk-contact-form-description,
.pk-contact-form-split .pk-contact-form-hint,
.pk-contact-form-split .pk-checkbox-label { color: var(--pk-sem-footer-text, #fff); }
/* STCT-9551: the required marker takes the ground's ink too. --pk-danger on the dark split ground did not read
   (black on black under the e-paper display; a red on the footer ground in the brands); the '*' carries the meaning. */
.pk-contact-form-split .pk-field-required { color: var(--pk-sem-footer-text, #fff); }
.pk-contact-form-split .pk-contact-form-link,
.pk-contact-form-split .pk-contact-form-eyebrow { color: var(--pk-sem-footer-text-secondary, #CFD0D8); }
.pk-contact-form-split .pk-contact-form-summary { color: var(--pk-text-primary, #191919); }

/* ---- glyphs (STCT-9229): a bundled icon as a mask in the brand's icon colour ---------------- */
.pk-contact-form-glyph {
  display: inline-block;
  flex: none;
  width: var(--pk-contact-form-glyph-size);
  height: var(--pk-contact-form-glyph-size);
  background: var(--pk-icon-accent, var(--pk-ramp-primary-60, #0090C9));
  -webkit-mask: var(--pk-icon) center / contain no-repeat;
  mask: var(--pk-icon) center / contain no-repeat;
}
.pk-contact-form-title-with-icon,
.pk-contact-form-aside-title { display: flex; align-items: center; gap: var(--pk-space-sm, 8px); }
/* the submit's glyph takes the LABEL colour, like any button icon */
.pk-contact-form-submit-icon.pk-contact-form-glyph { background: currentColor; width: var(--pk-button-fs, 14px); height: var(--pk-button-fs, 14px); }

/* ---- aside (STCT-9229): contact details beside the form ------------------------------------- */
.pk-contact-form-has-aside > .pk-contact-form-body {
  display: grid;
  grid-template-columns: var(--pk-contact-form-aside-columns);
  gap: var(--pk-space-xl, 32px);
  align-items: stretch;
}
.pk-contact-form-card.pk-contact-form-has-aside .pk-contact-form-panel { max-width: none; }
.pk-contact-form-aside { display: flex; flex-direction: column; gap: var(--pk-space-lg, 24px); min-width: 0; }
.pk-contact-form-aside-card { display: flex; flex-direction: column; gap: var(--pk-space-md, 16px); flex: 1 1 auto; }
.pk-contact-form-aside-title { margin: 0; font-size: var(--pk-fs-h4, 1.125rem); font-weight: var(--pk-fw-heading, 600); line-height: var(--pk-lh-heading, 1.2); }
.pk-contact-form-methods { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--pk-space-md, 16px); }
.pk-contact-form-method { display: flex; gap: var(--pk-space-sm, 12px); align-items: flex-start; }
.pk-contact-form-tile {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--pk-contact-form-tile-size);
  height: var(--pk-contact-form-tile-size);
  border-radius: var(--pk-form-panel-radius, var(--pk-radius-l, 12px));
  background: var(--pk-icon-tile-bg, var(--pk-sem-bg-sunken, #F7F7F8));
}
.pk-contact-form-tile[hidden] { display: none; }
.pk-contact-form-tile .pk-contact-form-glyph { width: var(--pk-contact-form-tile-glyph); height: var(--pk-contact-form-tile-glyph); }
.pk-contact-form-method-text { display: flex; flex-direction: column; gap: var(--pk-space-xs, 4px); min-width: 0; }
.pk-contact-form-method-label,
.pk-contact-form-method-value { margin: 0; font-size: var(--pk-contact-form-small-size); line-height: var(--pk-contact-form-line); color: var(--pk-text-primary, #191919); }
.pk-contact-form-method-label { font-weight: var(--pk-contact-form-eyebrow-weight); }
a.pk-contact-form-method-value { color: var(--pk-text-link, #0090C9); text-decoration: none; }
a.pk-contact-form-method-value:hover { text-decoration: underline; }
.pk-contact-form-method-description,
.pk-contact-form-aside-note { margin: 0; font-size: var(--pk-fs-caption, 12px); line-height: var(--pk-contact-form-line); color: var(--pk-text-secondary, #666); }
.pk-contact-form-hours { margin: 0; display: flex; flex-direction: column; gap: var(--pk-space-sm, 8px); font-size: var(--pk-contact-form-small-size); }
.pk-contact-form-hours-row { display: flex; justify-content: space-between; gap: var(--pk-space-md, 16px); color: var(--pk-text-primary, #191919); }
.pk-contact-form-hours-row dt, .pk-contact-form-hours-row dd { margin: 0; }
.pk-contact-form-hours-muted { color: var(--pk-text-secondary, #666); }
.pk-contact-form-aside-note { padding-top: var(--pk-space-sm, 8px); border-top: var(--pk-bw-hairline, 1px) solid var(--pk-form-panel-border, var(--pk-sem-border-primary, #E6E6E6)); }

/* ---- WEB-1547: skytraders.trading's application form (measured 2026-10-10) ------------------- */
/* the type-to-search Country: a listbox under the input */
.pk-contact-form-combobox { position: relative; }
.pk-contact-form-combobox > .pk-input { width: 100%; box-sizing: border-box; }
.pk-contact-form-combobox-list {
  position: absolute; z-index: 5; top: calc(100% + 4px); left: 0; right: 0; max-height: 240px; overflow-y: auto;
  margin: 0; padding: var(--pk-space-xs, 4px) 0; list-style: none;
  background: var(--pk-sem-bg-surface-primary); border: var(--pk-bw-hairline, 1px) solid var(--pk-sem-border-primary);
  border-radius: var(--pk-radius-input); box-shadow: var(--pk-shadow-overlay);
}
.pk-contact-form-combobox-list[hidden] { display: none; }
.pk-contact-form-combobox-option { padding: var(--pk-space-sm, 8px) var(--pk-space-md, 16px); cursor: pointer; color: var(--pk-text-primary); }
.pk-contact-form-combobox-option[hidden] { display: none; }
.pk-contact-form-combobox-option[aria-selected="true"], .pk-contact-form-combobox-option:hover { background: var(--pk-sem-bg-sunken); }
/* a link inside the form (the consent's privacy policy): the brand's secondary ink, not the browser default */
.pk-contact-form-form a:not(.pk-button) { color: var(--pk-ramp-secondary-60); }
/* the honeypot: kept in the form, out of sight and reach */
.pk-contact-form-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* small print under the actions */
.pk-contact-form-footnote { margin: 14px 0 0; font-size: 13px; color: var(--pk-ramp-primary-40); }
/* the grid as a card: ground, hairline rule, 16px radius, a soft two-step shadow, 40px padding (24px narrow) */
.pk-contact-form-framed > .pk-contact-form-body {
  padding: 40px; border-radius: 16px; background: var(--pk-sem-bg-surface-primary);
  border: var(--pk-bw-hairline, 1px) solid var(--pk-sem-border-primary);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--pk-text-primary) 4%, transparent), 0 8px 24px color-mix(in srgb, var(--pk-text-primary) 6%, transparent);
}
@container (max-width: 600px) { .pk-contact-form-framed > .pk-contact-form-body { padding: 24px; } }

/* ---- ≤ 600px: one column everywhere ------------------------------------------------------ */
@container (max-width: 600px) {
  .pk-contact-form-fields { grid-template-columns: minmax(0, 1fr); }
  .pk-contact-form-files { grid-template-columns: minmax(0, 1fr); }
  .pk-contact-form-split > .pk-contact-form-body { grid-template-columns: minmax(0, 1fr); padding: var(--pk-space-lg, 24px); }
  .pk-contact-form-intro { padding-right: 0; padding-bottom: var(--pk-space-md, 16px); border-right: 0; border-bottom: var(--pk-bw-hairline, 1px) solid var(--pk-sem-footer-border-muted, #60627C); }
  .pk-contact-form-card .pk-contact-form-panel,
  .pk-contact-form-dialog .pk-contact-form-panel,
  .pk-contact-form-has-aside .pk-contact-form-panel,
  .pk-contact-form-aside-card { padding: var(--pk-space-md, 16px); }
  .pk-contact-form-has-aside > .pk-contact-form-body { grid-template-columns: minmax(0, 1fr); }
  .pk-contact-form-actions .pk-button { flex: 1 1 auto; }
}

/* ---- WEB-1602: the contact form on a website page on the named tokens ---- */
.pk-website-frame .pk-contact-form {
  --pk-contact-form-title-size: var(--pk-ts-xl);
  --pk-contact-form-title-weight: var(--pk-tw-bold);
  --pk-contact-form-eyebrow-size: var(--pk-ts-xs);
  --pk-contact-form-eyebrow-weight: var(--pk-tw-bold);
  --pk-contact-form-text-size: var(--pk-ts-m);
  --pk-contact-form-small-size: var(--pk-ts-s);
}
.pk-website-frame .pk-contact-form-footnote { font-size: var(--pk-ts-s); color: var(--pk-tc-text-secondary); }
.pk-website-frame .pk-contact-form-form a:not(.pk-button) { color: var(--pk-tc-text-accent); }
/* in the dark half of a split contact form the accent ink is the on-dark one */
.pk-website-frame .pk-contact-form-split .pk-contact-form-form a:not(.pk-button) { color: var(--pk-tc-text-accent-on-dark); }

/* ==== src/cookie-banner/cookie-banner.css ==== */
/* @paprika/skyten-foundation/cookie-banner — load this sheet (plus button.css, checkbox.css and
 * link.css for the parts it composes); the library does not inject it.
 *
 * A bar on the page surface with a hairline and a shadow — not a scrim, not a modal: a consent
 * notice must not block the page. The shadow is declared HERE (no --pk-shadow token exists — see
 * theme.test.js); its colour is the theme's scrim, thinned to the 12% a bar shadow needs, so no
 * colour is invented (STCT-8782). */

.pk-cookie-banner {
  --pk-cookie-banner-shadow-color: color-mix(in srgb, var(--pk-sem-nav-scrim, rgba(31,32,50, 0.8)) 15%, transparent);
  --pk-cookie-banner-shadow: 0 -2px 12px var(--pk-cookie-banner-shadow-color);
  /* No theme token for these yet (STCT-8782 follow-up): declared here so a brand can override them. */
  --pk-cookie-banner-title-font-size: 1rem;
  --pk-cookie-banner-title-font-weight: 600;
  --pk-cookie-banner-message-font-size: 0.9375rem;
  --pk-cookie-banner-compact-message-font-size: 0.875rem;
  --pk-cookie-banner-message-line-height: 1.5;
  --pk-cookie-banner-caption-font-size: 0.75rem;
  --pk-cookie-banner-caption-transform: uppercase;
  --pk-cookie-banner-caption-letter-spacing: 0.04em;
  --pk-cookie-banner-desc-font-size: 0.8125rem;
  position: fixed;
  left: 0;
  right: 0;
  z-index: 30;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pk-space-sm, 8px) var(--pk-space-lg, 24px);
  padding: var(--pk-space-md, 16px) var(--pk-space-lg, 24px);
  font-family: var(--pk-font-sans, system-ui, sans-serif);
  color: var(--pk-text-primary, #191919);
  background: var(--pk-sem-bg-surface-secondary, #fff);
  border-top: var(--pk-bw-hairline, 1px) solid var(--pk-sem-border-primary, #E6E6E6);
  box-shadow: var(--pk-cookie-banner-shadow);
}
.pk-cookie-banner[data-pk-cookie-banner-position='bottom'] { bottom: 0; }
/* WEB-1548: the floating card in the lower-left corner. WEB-1541 (PMO D33): its FACE is skytraders.trading's, measured
   2026-10-10 at 1360 and 390 — 540px wide, NO border, a 28px radius, a 0 4px 20px shadow at 20% of
   the ink, padding 14px 18px, one row (icon, text, buttons 10px apart), the message 14px / 1.4. On a phone (<= 600px)
   it sits 10px off three edges, padding 14px 16px, and stacks icon / text / buttons with the buttons side by side.
   It reserves no body padding (index.js): a corner card must not move the page's own bottom. */
.pk-cookie-banner[data-pk-cookie-banner-position='bottom-left'] {
  bottom: var(--pk-space-lg, 24px); left: var(--pk-space-lg, 24px); right: auto; max-width: min(540px, calc(100vw - 2 * var(--pk-space-lg, 24px)));
  border: 0; border-radius: 28px;
  /* WEB-1541 (PO c.146746): a SOLID card on the brand's surface white. There is no translucency and no backdrop blur;
     live's frosted glass (95% white over blur(10px)) is a DECIDED divergence. */
  background: var(--pk-sem-bg-surface-secondary);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  /* live's shadow is BLACK at 20%: the theme's black scrim (--pk-cover-scrim, 35%) thinned to it (WEB-1541, PMO D34) */
  box-shadow: 0 4px 20px color-mix(in srgb, var(--pk-cover-scrim, rgba(0, 0, 0, 0.35)) 57.142857%, transparent);
  padding: 14px 18px;
  flex-wrap: nowrap;
  gap: 12px;
}
.pk-cookie-banner[data-pk-cookie-banner-position='bottom-left'] .pk-cookie-banner-body { flex: 1 1 auto; }
.pk-cookie-banner[data-pk-cookie-banner-position='bottom-left'] .pk-cookie-banner-message {
  font-size: 14px; line-height: 1.4; color: var(--pk-text-primary);
}
.pk-cookie-banner[data-pk-cookie-banner-position='bottom-left'] .pk-cookie-banner-actions {
  flex: 0 0 auto; flex-direction: row; align-items: center; gap: 10px;
}
.pk-cookie-banner[data-pk-cookie-banner-position='bottom-left'] .pk-cookie-banner-actions > .pk-button { flex: 0 0 auto; width: auto; }
@media (max-width: 600px) {
  .pk-cookie-banner[data-pk-cookie-banner-position='bottom-left'] {
    left: 10px; right: 10px; bottom: 10px; max-width: none;
    padding: 14px 16px; flex-direction: column; align-items: flex-start;
  }
  .pk-cookie-banner[data-pk-cookie-banner-position='bottom-left'] .pk-cookie-banner-message { font-size: 13px; }
}
/* the decorative glyph: a 32px disc of black at 10% (the black scrim thinned, as live), the cookie drawn in the ink with
   crumbs in the surface */
.pk-cookie-banner-icon {
  flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--pk-cover-scrim, rgba(0, 0, 0, 0.35)) 28.571429%, transparent);
}
.pk-cookie-banner-icon svg { display: block; }
.pk-cookie-banner-icon-disc { fill: var(--pk-text-primary); }
.pk-cookie-banner-icon-crumb { fill: var(--pk-sem-bg-surface-primary); }
.pk-cookie-banner[data-pk-cookie-banner-position='top'] {
  top: 0;
  border-top: 0;
  border-bottom: var(--pk-bw-hairline, 1px) solid var(--pk-sem-border-primary, #E6E6E6);
  --pk-cookie-banner-shadow: 0 2px 12px var(--pk-cookie-banner-shadow-color);
}

/* inside a position: relative host (the showcase, a preview) */
.pk-cookie-banner-inline { position: absolute; }

.pk-cookie-banner-body {
  flex: 1 1 24rem;
  min-width: 0;
}

.pk-cookie-banner-title {
  margin: 0 0 var(--pk-space-xs, 4px);
  font-weight: var(--pk-cookie-banner-title-font-weight);
  font-size: var(--pk-cookie-banner-title-font-size);
}

.pk-cookie-banner-message {
  margin: 0;
  font-size: var(--pk-cookie-banner-message-font-size);
  line-height: var(--pk-cookie-banner-message-line-height);
  color: var(--pk-text-secondary, #666);
}

.pk-cookie-banner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pk-space-sm, 8px);
  align-items: center;
}

/* ⛔ ACCEPT AND REJECT ARE THE SAME SIZE. A reject rendered as a text link beside a filled accept
   is the EDPB's named deceptive pattern; the button component's `active` already marks accept as
   the primary, and that is the only difference allowed. */
.pk-cookie-banner-actions > .pk-button { flex: 0 0 auto; }

/* the preferences panel takes a full row under the text and buttons */
.pk-cookie-banner-prefs {
  flex: 1 1 100%;
  padding-top: var(--pk-space-sm, 8px);
  border-top: var(--pk-bw-hairline, 1px) solid var(--pk-sem-border-primary, #E6E6E6);
}

.pk-cookie-banner-prefs-list {
  list-style: none;
  margin: 0 0 var(--pk-space-sm, 8px);
  padding: 0;
  display: grid;
  gap: var(--pk-space-sm, 8px);
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
}

.pk-cookie-banner-pref {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pk-space-xs, 4px) var(--pk-space-sm, 8px);
}

/* "Always on" is a WORD beside the disabled box — the disabled look alone does not say why */
.pk-cookie-banner-pref-required {
  font-size: var(--pk-cookie-banner-caption-font-size);
  text-transform: var(--pk-cookie-banner-caption-transform);
  letter-spacing: var(--pk-cookie-banner-caption-letter-spacing);
  color: var(--pk-text-secondary, #666);
}

.pk-cookie-banner-pref-desc {
  flex: 1 1 100%;
  margin: 0;
  font-size: var(--pk-cookie-banner-desc-font-size);
  color: var(--pk-text-secondary, #666);
}

/* the confirmation replaces the buttons: a sentence, so the outcome is never a colour or an icon */
.pk-cookie-banner-status {
  margin: 0;
  font-size: var(--pk-cookie-banner-message-font-size);
  font-weight: var(--pk-cookie-banner-title-font-weight);
}

/* compact: one line, denser padding, small buttons (set by the component) */
.pk-cookie-banner-compact {
  padding: var(--pk-space-sm, 8px) var(--pk-space-md, 16px);
  gap: var(--pk-space-sm, 8px) var(--pk-space-md, 16px);
}
.pk-cookie-banner-compact .pk-cookie-banner-message { font-size: var(--pk-cookie-banner-compact-message-font-size); }
.pk-cookie-banner-compact .pk-cookie-banner-body { flex-basis: 16rem; }

/* the user-agent ring, deliberately — see select.css */
.pk-cookie-banner :focus-visible { outline-offset: 1px; }

/* STCT-8777 — Mobile. In a container narrower than 600px (a phone) the message sits ABOVE the
   buttons and each button takes the full width, in the same order. The banner declares no
   container-type: the frame (or the app's parent — see README, "Desktop and mobile") provides it. */
@container (max-width: 600px) {
  .pk-cookie-banner-body,
  .pk-cookie-banner-compact .pk-cookie-banner-body { flex: 1 1 100%; }
  .pk-cookie-banner-actions { flex: 1 1 100%; flex-direction: column; align-items: stretch; }
  .pk-cookie-banner-actions > .pk-button { flex: 1 1 auto; width: 100%; }
}

/* ---- WEB-1602: the cookie card on a website page. It is rendered OUTSIDE .pk-website-frame (on <body>), so the website page
   opts it in through :root:has(.pk-website-frame); an application page (no frame) is unchanged. The card declares
   the website names it, its buttons and its links read (the same definitions as website.css, pinned by
   website/named-type-1602.test.js), resolved against the card's own theme ---- */
:root:has(.pk-website-frame) .pk-cookie-banner {
  --pk-ts-xs: var(--pk-fs-caption);
  --pk-ts-s: var(--pk-fs-small);
  --pk-ts-m: var(--pk-fs-base);
  --pk-tw-semibold: var(--pk-button-weight);
  --pk-tc-text-accent: var(--pk-accent-text);
  --pk-cookie-banner-title-font-size: var(--pk-ts-m);
  --pk-cookie-banner-title-font-weight: var(--pk-tw-semibold);
  --pk-cookie-banner-message-font-size: var(--pk-ts-m);
  --pk-cookie-banner-compact-message-font-size: var(--pk-ts-s);
  --pk-cookie-banner-caption-font-size: var(--pk-ts-xs);
  --pk-cookie-banner-desc-font-size: var(--pk-ts-s);
}
:root:has(.pk-website-frame) .pk-cookie-banner[data-pk-cookie-banner-position='bottom-left'] .pk-cookie-banner-message { font-size: var(--pk-ts-s); }

/* ==== src/date-field/date-field.css ==== */
/* @paprika/skyten-foundation/date-field — load this sheet; the library does not inject it.
 * On the BRAND CONTRACT (STCT-8770): the INPUT family --pk-input-*, extended STCT-9237 — the date
 * field wears EXACTLY the text input's chrome (height per size, radius, border, fill, focus ring,
 * hover / valid / invalid / disabled), never a value of its own.
 *
 * ⛔ WHAT IS DELIBERATELY NOT STYLED HERE.
 * 1. THE CALENDAR POPUP. The browser draws it and it cannot be themed — same boundary as the
 *    native select's option list. The ISO / locale placeholder text is the browser's too.
 * 2. THE FIELD BOX when this input sits in renderField(). `.pk-field-input > input` (0,1,1) already
 *    sets the border, radius, padding, colours and every state and it BEATS a class selector on
 *    specificity, so the shared rule owns the box and this sheet does not restate it. The
 *    standalone rule below is scoped with :not() so the two cannot fight.
 */

/* Standalone use, i.e. NOT inside a .pk-field-input slot. */
.pk-field-input .pk-datefield { /* the shared form-fields rule owns this case entirely */ }

.pk-daterange .pk-datefield,
:not(.pk-field-input) > .pk-datefield {
  font: inherit;
  font-size: var(--pk-input-fs, 15px);
  min-height: var(--pk-input-height, 38px);
  box-sizing: border-box;
  padding: var(--pk-input-pad, 8px 12px);
  border-radius: var(--pk-input-radius, 4px);
  border: var(--pk-input-border-w, 1px) solid var(--pk-input-border, #808080);
  background: var(--pk-input-bg, #fff);
  color: var(--pk-input-fg, #191919);
  min-width: 0;
}
.pk-datefield::placeholder { color: var(--pk-input-placeholder, #999); }

/* the SMALL size (renderDateField({ size: 'sm' })): the brand's small step, the same one the text
   input and the numeric stepper use */
.pk-daterange .pk-datefield-sm,
:not(.pk-field-input) > .pk-datefield-sm {
  min-height: var(--pk-input-height-sm, 30px);
  padding: var(--pk-input-pad-sm, 5px 10px);
  font-size: var(--pk-input-fs-sm, 14px);
}

.pk-datefield:hover:not(:disabled):not(:focus-visible) { border-color: var(--pk-input-border-hover, var(--pk-input-border, #808080)); }

/* focus: the focus border plus the brand's ring hugging it (the browser outline is replaced) */
.pk-datefield:focus-visible {
  border-color: var(--pk-input-border-focus, #383b5b);
  outline: none;
  box-shadow: 0 0 0 var(--pk-input-ring-w, 2px) var(--pk-input-ring, var(--pk-ring-color, currentColor));
}

/* invalid, when the caller says so (form-fields sets the message and aria-invalid) */
.pk-datefield[aria-invalid='true'] { border-color: var(--pk-input-border-invalid, #C4363A); }

/* disabled: the brand's disabled border / fill / ink (1.4.3 exempts an inactive control; the state
   is still announced, because the attribute is on the input) */
.pk-datefield:disabled {
  border-color: var(--pk-input-border-disabled, var(--pk-input-border, #808080));
  background: var(--pk-input-bg-disabled, var(--pk-input-bg, #fff));
  color: var(--pk-input-fg-disabled, var(--pk-text-disabled, #999));
  cursor: not-allowed;
}

/* The calendar glyph is the browser's; it follows the colour scheme, so on the dark ground the
   dark scheme keeps it visible on the dark field. WEB-1532 (D5 AC4): the descendant form, under either theming
   attribute, instead of the one :root-anchored mode rule; and a LIGHT region inside a dark page (the mixed recipe:
   html dark + a [data-pk-theme="light"] wrapper) takes the light scheme back, so the glyph is not drawn for a dark
   field on a light one. */
:is([data-pk-mode="dark"], [data-pk-theme="dark"]) .pk-datefield { color-scheme: dark; }
:is([data-pk-mode="dark"], [data-pk-theme="dark"]) :is([data-pk-mode="light"], [data-pk-theme="light"]) .pk-datefield { color-scheme: light; }

.pk-daterange {
  display: flex;
  align-items: center;
  gap: var(--pk-gap, 8px);
  flex-wrap: wrap;
  font-family: var(--pk-font-sans, system-ui, sans-serif);
}

.pk-daterange-sep {
  color: var(--pk-text-secondary, #666);
  /* A DECORATIVE divider, exempt from 1.4.11 — the two inputs carry their own accessible names. */
}

.pk-daterange-presets {
  display: flex;
  gap: var(--pk-gap, 8px);
  flex-wrap: wrap;
  flex-basis: 100%;   /* its own row, so a long preset list never squeezes the two inputs */
}

/* a preset is the brand's SECONDARY button, small */
.pk-daterange-preset {
  font: inherit;
  font-size: var(--pk-fs-caption, 13px);
  font-weight: var(--pk-button-weight, 600);
  padding: var(--pk-pad-y-sm, 4px) var(--pk-pad-x-sm, 10px);
  border-radius: var(--pk-button-radius, 999px);
  border: var(--pk-button-border-w, 1px) solid var(--pk-button-secondary-border, #808080);
  background: var(--pk-button-secondary-bg, transparent);
  color: var(--pk-button-secondary-fg, #191919);
  cursor: pointer;
}

.pk-daterange-preset:hover {
  background: var(--pk-sem-bg-sunken, #F2F2F2);
}

/* ==== src/drawer/drawer.css ==== */
/* drawer.css — STCT-8777. The panel is the secondary surface with text tokens (drawer.test.js measures
   the pairs over 44 brand-modes); the backdrop is the theme's own scrim, --pk-sem-nav-scrim.
   Component-local sizes are DECLARED here (--pk-drawer-*) and read below; colours only from the theme. */

.pk-drawer {
  --pk-drawer-size: min(50dvh, 100dvh);     /* bottom drawer height; inline drawer extent */
  --pk-drawer-peek-size: 48px;               /* inline `peek`: handle + header */
  --pk-drawer-handle-size: 20px;             /* inline `collapsed`: the grab handle alone */
  --pk-drawer-grip-length: 40px;
  --pk-drawer-grip-thickness: 4px;
}

.pk-drawer {
  --pk-drawer-width: min(420px, 100vw);
  box-sizing: border-box;
  width: var(--pk-drawer-width);
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0 0 0 auto;              /* end side */
  padding: 0;
  border: 0;
  background: var(--pk-sem-bg-surface-secondary, #ffffff);
  color: var(--pk-text-primary, #191919);
  font-family: var(--pk-font-sans, system-ui, sans-serif);
  box-shadow: 0 0 24px rgba(0, 0, 0, .25);
}
.pk-drawer-start { margin: 0 auto 0 0; }
/* Bottom: full width, slides UP, height from `size` (--pk-drawer-size). */
.pk-drawer-bottom { width: 100vw; max-width: 100vw; height: var(--pk-drawer-size); max-height: 100dvh; margin: auto 0 0 0; }
.pk-drawer::backdrop { background: var(--pk-sem-nav-scrim, rgba(0, 0, 0, .45)); }

.pk-drawer-panel { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.pk-drawer .pk-drawer-header {
  display: flex; align-items: center; gap: var(--pk-space-sm, 10px);
  padding: var(--pk-space-md, 16px);
  border-bottom: var(--pk-bw-hairline, 1px) solid var(--pk-sem-border-primary, #E6E6E6);
}
.pk-drawer .pk-drawer-title { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 18px; font-weight: 600; color: var(--pk-text-primary, #191919); overflow-wrap: break-word; }
.pk-drawer .pk-drawer-close {
  flex: 0 0 auto; width: 32px; height: 32px; padding: 0;
  border: 0; border-radius: var(--pk-button-radius, var(--pk-radius-s, 6px)); background: transparent;
  font-size: 22px; line-height: 1; cursor: pointer;
  color: var(--pk-text-secondary, #666666);
}
.pk-drawer .pk-drawer-close:hover { color: var(--pk-text-primary, #191919); }
.pk-drawer .pk-drawer-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: var(--pk-space-md, 16px); color: var(--pk-text-primary, #191919); }
.pk-drawer .pk-drawer-actions {
  display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--pk-space-xs, 8px);
  padding: var(--pk-space-sm, 10px) var(--pk-space-md, 16px);
  border-top: var(--pk-bw-hairline, 1px) solid var(--pk-sem-border-primary, #E6E6E6);
}

@media (prefers-reduced-motion: no-preference) {
  .pk-drawer[open] { animation: pk-drawer-in-end .18s ease-out; }
  .pk-drawer-start[open] { animation-name: pk-drawer-in-start; }
  .pk-drawer-bottom[open] { animation-name: pk-drawer-in-bottom; }
  .pk-drawer-inline { transition: transform .18s ease-out; }
}
@keyframes pk-drawer-in-bottom { from { transform: translateY(100%); } to { transform: none; } }
@keyframes pk-drawer-in-end { from { transform: translateX(100%); } to { transform: none; } }
@keyframes pk-drawer-in-start { from { transform: translateX(-100%); } to { transform: none; } }

/* ---- INLINE (non-modal) data drawer — an <aside> inside a `position: relative; overflow: hidden` host.
   data-pk-drawer-state = collapsed (handle only) | peek (--pk-drawer-peek-size) | open. The state is
   carried by the attribute, the handle's aria-expanded and its label — never by position alone. */
.pk-drawer-inline {
  position: absolute;
  margin: 0;
  height: auto;
  max-height: 100%;
  max-width: 100%;
  overflow: hidden;
  z-index: 1;
}
.pk-drawer-inline.pk-drawer-bottom { left: 0; right: 0; bottom: 0; width: 100%; height: var(--pk-drawer-size); }
.pk-drawer-inline.pk-drawer-end { top: 0; bottom: 0; right: 0; width: var(--pk-drawer-width); }
.pk-drawer-inline.pk-drawer-start { top: 0; bottom: 0; left: 0; width: var(--pk-drawer-width); }

.pk-drawer-inline.pk-drawer-bottom[data-pk-drawer-state="collapsed"] { transform: translateY(calc(100% - var(--pk-drawer-handle-size))); }
.pk-drawer-inline.pk-drawer-bottom[data-pk-drawer-state="peek"] { transform: translateY(calc(100% - var(--pk-drawer-peek-size))); }
.pk-drawer-inline.pk-drawer-end[data-pk-drawer-state="collapsed"] { transform: translateX(calc(100% - var(--pk-drawer-handle-size))); }
.pk-drawer-inline.pk-drawer-end[data-pk-drawer-state="peek"] { transform: translateX(calc(100% - var(--pk-drawer-peek-size))); }
.pk-drawer-inline.pk-drawer-start[data-pk-drawer-state="collapsed"] { transform: translateX(calc(var(--pk-drawer-handle-size) - 100%)); }
.pk-drawer-inline.pk-drawer-start[data-pk-drawer-state="peek"] { transform: translateX(calc(var(--pk-drawer-peek-size) - 100%)); }
.pk-drawer-inline[data-pk-drawer-state="open"] { transform: none; }

/* The grab handle: a real <button> (aria-expanded, aria-controls, Arrow keys). */
.pk-drawer .pk-drawer-handle {
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto; padding: 0; border: 0; background: transparent; cursor: pointer;
  color: var(--pk-text-secondary, #666666);
}
.pk-drawer .pk-drawer-handle:focus-visible { outline-offset: -2px; }
.pk-drawer-grip { display: block; border-radius: var(--pk-radius-pill, 999px); background: currentColor; }
.pk-drawer-bottom .pk-drawer-handle { width: 100%; height: var(--pk-drawer-handle-size); }
.pk-drawer-bottom .pk-drawer-grip { width: var(--pk-drawer-grip-length); height: var(--pk-drawer-grip-thickness); }
.pk-drawer-inline.pk-drawer-end .pk-drawer-handle, .pk-drawer-inline.pk-drawer-start .pk-drawer-handle {
  position: absolute; top: 0; bottom: 0; width: var(--pk-drawer-handle-size);
}
.pk-drawer-inline.pk-drawer-end .pk-drawer-handle { left: 0; }
.pk-drawer-inline.pk-drawer-start .pk-drawer-handle { right: 0; }
.pk-drawer-inline.pk-drawer-end .pk-drawer-grip, .pk-drawer-inline.pk-drawer-start .pk-drawer-grip { width: var(--pk-drawer-grip-thickness); height: var(--pk-drawer-grip-length); }
.pk-drawer-inline.pk-drawer-end .pk-drawer-panel { padding-left: var(--pk-drawer-handle-size); }
.pk-drawer-inline.pk-drawer-start .pk-drawer-panel { padding-right: var(--pk-drawer-handle-size); }
.pk-drawer-inline .pk-drawer-header { padding-block: var(--pk-space-xs, 8px); }

/* MOBILE (a 390px container): an inline side drawer takes the full host width, and the action bar
   stacks its buttons full-width. The host (or the showcase frame) is the container. */
@container (max-width: 600px) {
  .pk-drawer-inline.pk-drawer-end, .pk-drawer-inline.pk-drawer-start { --pk-drawer-width: 100%; }
  .pk-drawer-inline .pk-drawer-actions { flex-direction: column; }
  .pk-drawer-inline .pk-drawer-actions > * { flex: 1 1 100%; }
}

/* ==== src/empty-content/empty-content.css ==== */
/* empty-content.css — on the BRAND CONTRACT (STCT-8770). tools-brands `.pk-empty-content`: centred,
   subtle text, a dashed stroke border in the brand's border colour, the card radius, container padding;
   the create action is the brand's primary button. */

.pk-empty-content {
  display: flex;
  flex-direction: column;
  row-gap: var(--pk-space-lg, 20px);
  align-items: center;
  justify-content: center;
  font-family: var(--pk-font-sans, sans-serif);
  font-size: var(--pk-fs-base, 15px);
  line-height: var(--pk-lh, 1.5);
  color: var(--pk-text-subtle, #666666);
  padding: var(--pk-space-lg, 20px);
  border: var(--pk-stroke, 1px) dashed var(--pk-sem-border-primary, #ccc);
  border-radius: var(--pk-card-radius, 8px);
  text-align: center;
}

.pk-empty-content-create {
  background: var(--pk-button-bg, #383b5b);
  color: var(--pk-button-fg, #fff);
  font-family: var(--pk-font-sans, sans-serif);
  font-size: var(--pk-button-fs, 14px);
  font-weight: var(--pk-button-weight, 600);
  text-transform: var(--pk-button-transform, none);
  letter-spacing: var(--pk-button-ls, 0);
  border: var(--pk-button-border-w, 1px) solid var(--pk-button-bg, #383b5b);
  border-radius: var(--pk-button-radius, 999px);
  height: var(--pk-button-height, 40px);
  padding: var(--pk-button-pad, 0 16px);
  box-shadow: var(--pk-button-shadow, none);
  cursor: pointer;
}

.pk-empty-content-create:hover {
  background: var(--pk-button-hover, #2B2D45);
  border-color: var(--pk-button-hover, #2B2D45);
}

/* ==== src/error-state/error-state.css ==== */
/* @paprika/skyten-foundation/error-state — load this sheet; the library does not inject it.
 * On the BRAND CONTRACT (STCT-8770): the danger family for the cue, the type scale, the mono face.
 *
 * ⛔ THE TWO VARIANTS ARE DIFFERENT SHAPES, NOT DIFFERENT SKINS. A banner is a strip that sits
 * above content it does not replace; a takeover owns the viewport. */

.pk-errorstate {
  font-family: var(--pk-font-sans, system-ui, sans-serif);
  font-size: var(--pk-fs-base, 15px);
  line-height: var(--pk-lh, 1.5);
  color: var(--pk-text-primary, #191919);
}

/* ---- banner: additive, strictly a strip ---- */

.pk-errorstate-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pk-space-md, 16px);
  flex-wrap: wrap;
  padding: var(--pk-pad-y, 8px) var(--pk-pad-x, 16px);
  background: var(--pk-danger-bg, #F2F2F2);
  /* The LEADING EDGE is the cue that this strip is a problem: a shape (a strong stroke) as well as a colour. */
  /* STCT-9224: no accent edge — no brand and no default defines one (a one-sided thick border was a library invention) */
  border-block: var(--pk-stroke, 1px) solid var(--pk-danger-border, #E6E6E6);
}

.pk-errorstate-banner .pk-errorstate-body {
  display: flex;
  align-items: baseline;
  gap: var(--pk-gap, 8px);
  flex-wrap: wrap;
  min-width: 0;
}

.pk-errorstate-banner .pk-errorstate-heading { font-size: var(--pk-fs-small, 14px); font-weight: var(--pk-fw-heading, 700); }
.pk-errorstate-banner .pk-errorstate-message,
.pk-errorstate-banner .pk-errorstate-code { display: none; }

/* ---- page: a takeover ---- */

.pk-errorstate-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--pk-space-md, 16px);
  /* min-height, not height:100vh — a takeover inside a shell must not push the shell's chrome off. */
  min-height: 60vh;
  padding: var(--pk-space-2xl, 48px) var(--pk-pad-container, 16px);
  text-align: center;
}

.pk-errorstate-page .pk-errorstate-body {
  display: flex;
  flex-direction: column;
  gap: var(--pk-gap, 8px);
  max-width: calc(36 * var(--pk-fs-base, 15px));   /* ~65 characters: past that a paragraph is harder to read */
}

.pk-errorstate-code {
  margin: 0;
  font-family: var(--pk-font-sans, system-ui, sans-serif);   /* the status number is a UI headline, not code */
  font-size: var(--pk-fs-h1, 46px);
  font-weight: var(--pk-fw-heading, 600);
  line-height: 1;
  /* --pk-text-secondary, not the danger hue: a large numeral in red reads as the SUBJECT of the page. */
  color: var(--pk-text-secondary, #666);
}

.pk-errorstate-page .pk-errorstate-heading {
  margin: 0;
  font-size: var(--pk-fs-h3, 23px);
  font-weight: var(--pk-fw-heading, 700);
  line-height: var(--pk-lh-heading, 1.25);
  color: var(--pk-text-heading, inherit);
  text-wrap: balance;
}

.pk-errorstate-message {
  margin: 0;
  color: var(--pk-text-primary, #191919);
}

/* The DETAIL is what the user quotes to support: monospace, selectable, wraps anywhere. */
.pk-errorstate-detail {
  margin: 0;
  font-family: var(--pk-font-mono, ui-monospace, monospace);
  font-size: var(--pk-fs-caption, 13px);
  line-height: var(--pk-lh, 1.45);
  color: var(--pk-text-secondary, #666);
  overflow-wrap: anywhere;
  user-select: all;
}

.pk-errorstate-reference {
  margin: 0;
  font-size: var(--pk-fs-caption, 12px);
  color: var(--pk-text-secondary, #666);
  overflow-wrap: anywhere;
  user-select: all;
}

.pk-errorstate-actions {
  display: flex;
  align-items: center;
  gap: var(--pk-gap, 8px);
  flex-wrap: wrap;
}

.pk-errorstate-link {
  font-size: var(--pk-fs-small, 14px);
  color: var(--pk-text-link, #191919);
  /* Underlined, because a link identified only by colour fails 1.4.1. */
  text-decoration: underline;
  text-underline-offset: var(--pk-stroke-strong, 2px);
}

/* A retry in flight is announced by the button's own label; this is the quiet visual echo. */
.pk-errorstate[data-pk-retrying='true'] .pk-errorstate-detail { opacity: 0.6; }

@media (max-width: 480px) {
  .pk-errorstate-banner { align-items: flex-start; }
  .pk-errorstate-code { font-size: var(--pk-fs-h2, 29px); }
}

/* ==== src/file-upload/file-upload.css ==== */
/* @paprika/skyten-foundation/file-upload — drop zone, queue and states (STCT-8777).
 * Load this sheet AND button/button.css (the browse / remove / retry buttons are the library's);
 * the library injects neither.
 *
 * --pk-upload-icon is the one component-local name: declared here, set inline per glyph from
 * the bundled icon set (icons/index.js iconMask). */

.pk-upload {
  --pk-upload-icon: none;
  /* No theme token for these yet (STCT-8782 follow-up): declared here so a brand can override them. */
  --pk-upload-icon-size: 1rem;
  --pk-upload-zone-icon-size: 1.5rem;
  --pk-upload-text-font-size: 0.9375rem;
  --pk-upload-hint-font-size: 0.75rem;
  --pk-upload-small-font-size: 0.8125rem;
  --pk-upload-status-font-weight: 600;
  --pk-upload-progress-height: var(--pk-space-sm, 8px);
  display: flex;
  flex-direction: column;
  gap: var(--pk-space-sm, 8px);
  width: 100%;
  min-width: 0;
  font-family: var(--pk-font-sans, system-ui, sans-serif);
  color: var(--pk-text-primary, #191919);
}

.pk-upload-icon {
  display: inline-block;
  flex: 0 0 auto;
  width: var(--pk-upload-icon-size);
  height: var(--pk-upload-icon-size);
  background: currentColor;
  -webkit-mask: var(--pk-upload-icon) center / contain no-repeat;
  mask: var(--pk-upload-icon) center / contain no-repeat;
}

/* The zone is a pointer target, not a control: it has no role, no tabindex. The dashed border is
 * the long-standing convention for "drop here"; --pk-text-secondary so it passes 3:1 as a boundary
 * (the hairline token does not, on 45 of 48 brand-modes). */
.pk-upload-zone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--pk-space-xs, 4px);
  padding: var(--pk-space-lg, 24px) var(--pk-space-md, 16px);
  text-align: center;
  background: var(--pk-sem-bg-surface-secondary, #fff);
  border: var(--pk-bw-active, 2px) dashed var(--pk-text-secondary, #666);
  border-radius: var(--pk-card-radius, var(--pk-radius-m, 8px));
}

.pk-upload-zone-icon { width: var(--pk-upload-zone-icon-size); height: var(--pk-upload-zone-icon-size); color: var(--pk-text-secondary, #666); }

/* While a drag is over the zone ("selecting"): the border goes solid and takes the accent, the
 * surface takes the accent tint, and the status line says "Release to add" — three cues. */
.pk-upload[data-pk-upload-state='selecting'] .pk-upload-zone {
  border-style: solid;
  border-color: var(--pk-ramp-primary-60, #007FB1);
  background: var(--pk-ramp-primary-10, #E9F7FC);
}

/* A rejection is shown on the zone too: alert hue on the dashed border. The reason is the list. */
.pk-upload[data-pk-upload-state='rejected'] .pk-upload-zone { border-color: var(--pk-ramp-red-60, #A92E32); }

/* ⛔ The input is visually hidden, NOT display:none — it must stay focusable so keyboard users
 * reach the picker with Tab + Enter, and the browser's focus ring is then drawn on the zone. */
.pk-upload-input {
  position: absolute;
  width: var(--pk-bw-primary, 1px);
  height: var(--pk-bw-primary, 1px);
  margin: calc(-1 * var(--pk-bw-primary, 1px));
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.pk-upload-zone:has(.pk-upload-input:focus-visible) {
  outline: auto;
  outline-offset: 1px;
}

.pk-upload-text { font-size: var(--pk-upload-text-font-size); cursor: pointer; }
.pk-upload-hint {
  margin: 0;
  font-size: var(--pk-upload-hint-font-size);
  color: var(--pk-text-secondary, #666);
}

.pk-upload-disabled .pk-upload-zone { opacity: 0.55; }

/* WEB-1547 compact: the tile around it carries the label; no drop-zone art, the zone text for assistive tech only */
.pk-upload-compact .pk-upload-zone { align-items: flex-start; text-align: start; padding: 0; border: 0; background: none; }
.pk-upload-compact .pk-upload-zone-icon { display: none; }
.pk-upload-compact .pk-upload-text {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.pk-upload-compact .pk-upload-hint { order: -1; }
.pk-upload-disabled .pk-upload-text { cursor: default; }

/* WEB-1541 (2026-10-11): every part the component HIDES stays hidden. The status line, its icon, the rejection list
   and the queue carry the hidden attribute in the states that do not show them. Each also has a class rule that sets
   display, and an author rule beats the browser's [hidden] { display: none }. In the idle state a 16px loader glyph
   and the empty rejection list's tinted ground painted under the button (measured on the website pilot: 3 of 3 cards,
   3 hidden parts each). (0,2,0) beats every single-class display rule below. */
.pk-upload [hidden] { display: none; }

/* The status line: a word, an icon, and in the uploading state a <progress> plus its percentage. */
.pk-upload-status {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--pk-space-sm, 8px);
  font-size: var(--pk-upload-small-font-size);
}
.pk-upload-status-word { font-weight: var(--pk-upload-status-font-weight); }
.pk-upload[data-pk-upload-state='rejected'] .pk-upload-status { color: var(--pk-ramp-red-100, #7b2224); }
.pk-upload[data-pk-upload-state='done'] .pk-upload-status { color: var(--pk-ramp-tertiary-100, #557f00); }

.pk-upload-progress {
  flex: 1 1 6rem;
  height: var(--pk-upload-progress-height);
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  border-radius: var(--pk-radius-pill, 999px);
  background: var(--pk-sem-bg-surface-secondary, #F2F2F2);
  overflow: hidden;
}
.pk-upload-progress::-webkit-progress-bar { background: var(--pk-sem-bg-surface-secondary, #F2F2F2); }
.pk-upload-progress::-webkit-progress-value { background: var(--pk-ramp-primary-60, #007FB1); }
.pk-upload-progress::-moz-progress-bar { background: var(--pk-ramp-primary-60, #007FB1); }
.pk-upload-progress-text { font-variant-numeric: tabular-nums; min-width: 3ch; text-align: right; }

/* Rejection reasons: an alert list. Each reason is a sentence with the file and the rule. */
.pk-upload-alert {
  margin: 0;
  padding: var(--pk-space-sm, 8px) var(--pk-space-md, 16px);
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--pk-space-xs, 4px);
  font-size: var(--pk-upload-small-font-size);
  color: var(--pk-ramp-red-100, #7b2224);
  background: var(--pk-ramp-red-10, #fbe8e8);
  border-radius: var(--pk-card-radius, var(--pk-radius-s, 6px));
}
.pk-upload-reason { display: flex; align-items: center; gap: var(--pk-space-xs, 4px); }

/* The queue: name, size, status word + icon, actions. Rows divide with the hairline (correct use). */
.pk-upload-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border: var(--pk-bw-hairline, 1px) solid var(--pk-sem-border-primary, #E6E6E6);
  border-radius: var(--pk-card-radius, var(--pk-radius-s, 6px));
  background: var(--pk-sem-bg-surface-primary, #fff);
}
.pk-upload-item {
  display: flex;
  align-items: center;
  gap: var(--pk-space-sm, 8px);
  padding: var(--pk-space-xs, 4px) var(--pk-space-sm, 8px);
  font-size: var(--pk-upload-small-font-size);
}
.pk-upload-item + .pk-upload-item { border-top: var(--pk-bw-hairline, 1px) solid var(--pk-sem-border-primary, #E6E6E6); }
.pk-upload-item-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pk-upload-item-size { color: var(--pk-text-secondary, #666); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pk-upload-item-status {
  display: inline-flex;
  align-items: center;
  gap: var(--pk-space-xs, 4px);
  white-space: nowrap;
}
.pk-upload-item-done .pk-upload-item-status { color: var(--pk-ramp-tertiary-100, #557f00); }
.pk-upload-item-error .pk-upload-item-status { color: var(--pk-ramp-red-100, #7b2224); }
.pk-upload-item-uploading .pk-upload-item-status .pk-upload-icon { animation: pk-upload-spin 1s linear infinite; }
@keyframes pk-upload-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .pk-upload-item-uploading .pk-upload-item-status .pk-upload-icon { animation: none; }
}

/* ==== src/footer/footer.css ==== */
/* footer.css — STCT-8777. ⛔ ONLY the --pk-sem-footer-* family may colour this component: it is a matched
   set that reads in 44/44 brand-modes; the page's text tokens on the footer surface read in 21 (1.00:1 in
   skyten light). footer.test.js enforces both the pairs and the family. */

.pk-footer {
  box-sizing: border-box;
  width: 100%;
  container-type: inline-size;
  /* ⛔ PERCENT, not cqi, for the footer's OWN padding: a container's own cqi falls back to the viewport
     (48px of side padding in a 206px cell, measured). Percent padding is relative to the containing
     block's width, which is the footer's width here. Descendants use cqi against the footer. */
  padding: clamp(24px, 4%, 48px) clamp(16px, 4%, 48px) clamp(16px, 2.5%, 24px);
  background: var(--pk-sem-footer-surface, #2d2c31);
  font-family: var(--pk-font-sans, system-ui, sans-serif);
  font-size: 14px;
  line-height: 1.5;
  color: var(--pk-sem-footer-text, #E6E6E6);
}

.pk-footer .pk-footer-top {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 5cqi, 48px);
  padding-bottom: clamp(16px, 4cqi, 32px);
}
.pk-footer .pk-footer-brand { flex: 2 1 220px; min-width: 0; }
.pk-footer .pk-footer-column { flex: 1 1 140px; min-width: 0; }

.pk-footer .pk-footer-brand-name { margin: 0 0 6px; font-size: 18px; font-weight: 700; color: var(--pk-sem-footer-text, #E6E6E6); }
.pk-footer .pk-footer-tagline { margin: 0; color: var(--pk-sem-footer-text-secondary, #ABADBA); }
.pk-footer .pk-footer-column-title {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--pk-sem-footer-text-secondary, #ABADBA);
}

.pk-footer .pk-footer-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pk-footer .pk-footer-link { color: var(--pk-sem-footer-text, #E6E6E6); text-decoration: none; }
.pk-footer .pk-footer-link:hover { text-decoration: underline; }
/* WEB-1548: a button item (onClick, no href) looks exactly like a link */
.pk-footer button.pk-footer-link { background: none; border: 0; padding: 0; margin: 0; font: inherit; text-align: start; cursor: pointer; }
.pk-footer .pk-footer-link:focus-visible { outline: 2px solid var(--pk-sem-footer-text, #E6E6E6); outline-offset: 2px; border-radius: var(--pk-radius-xs, 2px); }
.pk-footer-link svg, .pk-footer-link img { display: block; width: 20px; height: 20px; }

.pk-footer .pk-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
  padding-top: clamp(12px, 3cqi, 20px);
  border-top: var(--pk-bw-hairline, 1px) solid var(--pk-sem-footer-border-muted, #808080);
  font-size: 13px;
}
.pk-footer .pk-footer-copyright { margin: 0 auto 0 0; color: var(--pk-sem-footer-text-secondary, #ABADBA); }
.pk-footer .pk-footer-legal .pk-footer-links,
.pk-footer .pk-footer-social .pk-footer-links { flex-direction: row; flex-wrap: wrap; gap: 6px 16px; }

/* ---- STCT-8777 (operator, #/footer): brand mark, legal line, compact, align, and the two device layouts ----
   Every value below is a --pk-* token with a fallback, a calc() over one, or a --pk-footer-* property
   DECLARED here (no font-weight / letter-spacing token exists in the themes yet). Colours: footer family only. */
.pk-footer {
  --pk-footer-wordmark-weight: 800;
  --pk-footer-wordmark-size: 22px;
  --pk-footer-wordmark-tracking: -0.02em;
  --pk-footer-wordmark-leading: 1;
  --pk-footer-mark-height: 28px;
  --pk-footer-brand-max: 440px;
  --pk-footer-legal-line-size: 12px;
}

/* brand mark: the caller's <img>/<svg> (its own white wordmark) or the inline text wordmark, in footer text colour */
.pk-footer .pk-footer-brand-mark { margin: 0 0 var(--pk-space-sm, 8px); color: var(--pk-sem-footer-text, #E6E6E6); }
.pk-footer .pk-footer-brand-mark img,
.pk-footer .pk-footer-brand-mark svg { display: block; height: var(--pk-footer-mark-height); width: auto; }
.pk-footer .pk-footer-wordmark {
  display: inline-block;
  font-size: var(--pk-footer-wordmark-size);
  font-weight: var(--pk-footer-wordmark-weight);
  font-style: italic;
  letter-spacing: var(--pk-footer-wordmark-tracking);
  line-height: var(--pk-footer-wordmark-leading);
  color: var(--pk-sem-footer-text, #E6E6E6);
}
.pk-footer .pk-footer-brand .pk-footer-copyright { margin: var(--pk-space-xs, 4px) 0 0; }
.pk-footer .pk-footer-brand .pk-footer-tagline { max-width: var(--pk-footer-brand-max); }

/* align: 'end' — the brand block takes the left, the columns hug the right (the operator's reference) */
.pk-footer-align-end .pk-footer-brand { flex: 0 1 var(--pk-footer-brand-max); margin-right: auto; }
.pk-footer-align-end .pk-footer-column { flex: 0 0 auto; }

/* legal line — a regulatory sentence on its own line of the bottom bar */
.pk-footer .pk-footer-legal-line {
  flex: 1 0 100%;
  margin: 0;
  font-size: var(--pk-footer-legal-line-size);
  color: var(--pk-sem-footer-text-secondary, #ABADBA);
}

/* compact — one row: brand + legal + links + copyright */
.pk-footer-compact { padding: var(--pk-space-md, 16px) var(--pk-space-lg, 24px); }
.pk-footer-compact .pk-footer-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pk-space-sm, 8px) var(--pk-space-lg, 24px); }
.pk-footer-compact .pk-footer-brand { flex: 0 0 auto; }
.pk-footer-compact .pk-footer-brand-mark { margin: 0; }
.pk-footer-compact .pk-footer-brand-name { margin: 0; }
.pk-footer-compact .pk-footer-column { flex: 0 0 auto; }
.pk-footer-compact .pk-footer-links { flex-direction: row; flex-wrap: wrap; gap: var(--pk-space-xs, 4px) var(--pk-space-md, 16px); }
.pk-footer-compact .pk-footer-copyright { margin: 0 0 0 auto; }
.pk-footer-compact .pk-footer-legal-line { flex: 1 0 100%; }

/* Mobile (≤ 600px container, e.g. the showcase's 390px frame): everything stacks. The footer is its own
   inline-size container, so no wrapper is needed. */
@container (max-width: 600px) {
  .pk-footer .pk-footer-top { flex-direction: column; }
  .pk-footer .pk-footer-brand,
  .pk-footer .pk-footer-column { flex: 0 0 auto; margin: 0; }
  .pk-footer .pk-footer-bottom { flex-direction: column; align-items: flex-start; }
  .pk-footer .pk-footer-copyright { margin: 0; }
  .pk-footer-compact .pk-footer-row { flex-direction: column; align-items: flex-start; }
}

/* STCT-8777: the brand's own wordmark (dark-ground cut) — sized by the brand's logo height. */
/* WEB-1541: contained, left-aligned - when --pk-logo-max-width clamps a wide lockup the height stays, so without this
   the picture was squashed (skyten: 512x61 drawn at 200x28, 0.851 of its aspect) */
.pk-footer-logo { display: block; width: auto; height: var(--pk-logo-height); max-width: var(--pk-logo-max-width); object-fit: contain; object-position: left center; }

/* ---- WEB-1602: the website footer on the named tokens ---- */
.pk-website-frame .pk-footer { font-size: var(--pk-ts-s); --pk-footer-legal-line-size: var(--pk-ts-xs); }
.pk-website-frame .pk-footer .pk-footer-column-title { font-size: var(--pk-ts-xs); font-weight: var(--pk-tw-bold); letter-spacing: var(--pk-tls-label); }
.pk-website-frame .pk-footer .pk-footer-bottom { font-size: var(--pk-ts-xs); }
.pk-website-frame .pk-footer .pk-footer-brand-name { font-size: var(--pk-ts-l); font-weight: var(--pk-tw-bold); }

/* ==== src/form-fields/form-fields.css ==== */
/* DO NOT LET A COMMENT-TERMINATOR SEQUENCE APPEAR INSIDE THIS COMMENT - not even inside a
   glob such as `--pk-ramp-alert-` followed by star-slash. It ENDS THE COMMENT there, and the
   prose after it is then parsed as CSS, which swallows the next rule whole (css-parses-fully.test.js).
   Write `-{n}` instead of a star, or space the slash away from the star.

   form-fields.css — field / label / hint / error / rule-checklist / search input, on the BRAND
   CONTRACT (STCT-8770, extended STCT-9237): the INPUT family --pk-input-bg / -fg / -border /
   -border-w / -border-hover / -border-focus / -ring / -ring-w / -border-valid / -border-invalid /
   -border-disabled / -bg-disabled / -fg-disabled / -placeholder / -hint-fg / -hint-valid-fg /
   -hint-invalid-fg / -radius / -height / -height-sm / -pad / -pad-sm / -fs / -fs-sm, the type scale
   for labels and messages, --pk-danger / --pk-success for the rule checklist. Nothing here invents
   a value. */

.pk-field {
  display: flex;
  flex-direction: column;
  gap: var(--pk-space-xs, 4px);
  font-family: var(--pk-font-sans, sans-serif);
  margin-bottom: var(--pk-space-sm, 10px);
}

.pk-field-label {
  font-size: var(--pk-fs-caption, 13px);
  color: var(--pk-text-secondary, #666);
}

.pk-field-required {
  /* STCT-9571: the label's own ink. --pk-danger read 3.1-3.8:1 as text (it fails 4.5 in all 140 brand-modes, being a
     fill colour); the '*' carries the meaning, colour never did (it is aria-hidden, see form-fields.test.js). */
  color: var(--pk-text-primary, #191919);
  margin-left: var(--pk-space-xs, 2px);
}

/* THE FIELD CHROME (STCT-9237) — one scale for every field-like control: the text input here, the
   textarea, the select, the date field, the numeric stepper and the search box each read the SAME
   --pk-input-* family, so a brand states its field once (components.input.geometry) and every
   control follows: height per size (md / sm), radius, border, fill, focus ring, the six states.
   Direct children only: a composed control (select, checkbox, stepper, date range) paints its own
   inner input and must not inherit a second border from here. */
/* STCT-9716: the TEXT-control box. A checkbox or radio in a field slot keeps its own component's box: this rule's
   min-height (38px beats checkbox.css's 16px height) and white background turned the contact form's consent
   checkbox into a 16x38 white pill. :where() keeps the exclusion at zero specificity, so every rule that overrides
   `.pk-field-input input` today still does. */
/* WEB-1541: `.pk-field-combo` is a control's own positioning wrapper (a combobox and its list); the text control inside
   it is the field's control and wears the same box in every state below. */
.pk-field-input > input:where(:not([type="checkbox"], [type="radio"])),
.pk-field-input > .pk-field-combo > input,
.pk-field-input > select,
.pk-field-input > textarea {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  font-size: var(--pk-input-fs, 15px);
  min-height: var(--pk-input-height, 38px);
  padding: var(--pk-input-pad, 8px 12px);
  border-radius: var(--pk-input-radius, 4px);
  border: var(--pk-input-border-w, 1px) solid var(--pk-input-border, #ccc);
  background: var(--pk-input-bg, #fff);
  color: var(--pk-input-fg, #191919);
}
.pk-field-input > input::placeholder,
.pk-field-input > .pk-field-combo > input::placeholder,
.pk-field-input > textarea::placeholder { color: var(--pk-input-placeholder, #999); }

/* hover: the brand's hover border (unset in the contract = the resting border, so nothing moves) */
.pk-field-input > input:hover:not(:disabled):not(:focus-visible),
.pk-field-input > .pk-field-combo > input:hover:not(:disabled):not(:focus-visible),
.pk-field-input > select:hover:not(:disabled):not(:focus-visible),
.pk-field-input > textarea:hover:not(:disabled):not(:focus-visible) { border-color: var(--pk-input-border-hover, var(--pk-input-border, #ccc)); }

/* focus: the focus border plus the brand's ring, hugging the border (the browser outline is replaced,
   not doubled) */
.pk-field-input > input:focus-visible,
.pk-field-input > .pk-field-combo > input:focus-visible,
.pk-field-input > select:focus-visible,
.pk-field-input > textarea:focus-visible {
  border-color: var(--pk-input-border-focus, #383b5b);
  outline: none;
  box-shadow: 0 0 0 var(--pk-input-ring-w, 2px) var(--pk-input-ring, var(--pk-ring-color, currentColor));
}

/* autofill: a browser paints an autofilled field in ITS colours (Chrome's pale yellow / Firefox's pale blue with
   the system ink) — a typed e-mail address became unreadable on dark sign-in pages (operator 2026-10-01, GAS).
   The brand's own field ink and fill win: the inset shadow covers the whole control (the brand's field height),
   the fill colour of the text follows the field ink, and the caret too. No value here is invented. */
.pk-field-input > input:-webkit-autofill,
.pk-field-input > .pk-field-combo > input:-webkit-autofill,
.pk-field-input > input:-webkit-autofill:hover,
.pk-field-input > input:-webkit-autofill:focus,
.pk-field-input > textarea:-webkit-autofill,
.pk-field-input > select:-webkit-autofill {
  -webkit-text-fill-color: var(--pk-input-fg, #191919);
  caret-color: var(--pk-input-fg, #191919);
  box-shadow: inset 0 0 0 var(--pk-input-height, 38px) var(--pk-input-bg, #fff);
}
.pk-field-input > input:autofill,
.pk-field-input > .pk-field-combo > input:autofill,
.pk-field-input > textarea:autofill,
.pk-field-input > select:autofill {
  color: var(--pk-input-fg, #191919);
  background: var(--pk-input-bg, #fff);
  box-shadow: inset 0 0 0 var(--pk-input-height, 38px) var(--pk-input-bg, #fff);
}

/* disabled: the brand's disabled border / fill / ink (1.4.3 exempts an inactive control) */
.pk-field-input > input:disabled,
.pk-field-input > .pk-field-combo > input:disabled,
.pk-field-input > select:disabled,
.pk-field-input > textarea:disabled {
  border-color: var(--pk-input-border-disabled, var(--pk-input-border, #ccc));
  background: var(--pk-input-bg-disabled, var(--pk-input-bg, #fff));
  color: var(--pk-input-fg-disabled, var(--pk-text-disabled, #999));
  cursor: default;
}

/* the SMALL size: the same control on the brand's small step */
.pk-field-sm .pk-field-input > input,
.pk-field-sm .pk-field-input > .pk-field-combo > input,
.pk-field-sm .pk-field-input > select,
.pk-field-sm .pk-field-input > textarea {
  min-height: var(--pk-input-height-sm, 30px);
  padding: var(--pk-input-pad-sm, 5px 10px);
  font-size: var(--pk-input-fs-sm, 14px);
}

/* STCT-8763: a textarea is width:100% of its column; a user dragging it WIDER breaks the layout. */
.pk-field-input > textarea { resize: vertical; min-height: calc(3 * var(--pk-input-height, 38px)); }

/* valid / invalid: the state border (form-fields sets aria-invalid and the message as well, so the
   state is never colour alone) */
.pk-field-valid .pk-field-input > input,
.pk-field-valid .pk-field-input > .pk-field-combo > input,
.pk-field-valid .pk-field-input > select,
.pk-field-valid .pk-field-input > textarea { border-color: var(--pk-input-border-valid, var(--pk-success, #557F00)); }
.pk-field-invalid .pk-field-input > input,
.pk-field-invalid .pk-field-input > .pk-field-combo > input,
.pk-field-invalid .pk-field-input > select,
.pk-field-invalid .pk-field-input > textarea { border-color: var(--pk-input-border-invalid, #C4363A); }

/* helper copy below a field: neutral, valid, invalid — the brand's hint inks */
.pk-field-hint {
  font-size: var(--pk-fs-caption, 12px);
  color: var(--pk-input-hint-fg, var(--pk-text-secondary, #666));
}
.pk-field-hint-valid { color: var(--pk-input-hint-valid-fg, var(--pk-text-primary, #191919)); }
.pk-field-error {
  font-size: var(--pk-fs-caption, 12px);
  /* STCT-9571: the text ink. --pk-danger is a FILL colour and fails 4.5:1 as text in all 140 brand-modes (3.76:1 on
     white for skyten). The message's words say what is wrong; the field's invalid border stays the danger colour. */
  color: var(--pk-text-primary, #191919);   /* STCT-9571: the text ink (the message says what is wrong; the border carries the danger colour) */
}

.pk-rule-checklist {
  display: flex;
  flex-direction: column;
  gap: var(--pk-space-xs, 4px);
  font-family: var(--pk-font-sans, sans-serif);
  font-size: var(--pk-fs-caption, 12.5px);
}

.pk-rule {
  display: flex;
  align-items: center;
  gap: var(--pk-gap, 8px);
  color: var(--pk-text-secondary, #666);
}

.pk-rule-icon {
  display: inline-flex;
  width: var(--pk-fs-small, 14px);
  justify-content: center;
  font-size: var(--pk-fs-caption, 12px);
}

.pk-rule-pass .pk-rule-icon {
  color: var(--pk-success, #557F00);
}

.pk-rule-fail .pk-rule-icon {
  color: var(--pk-danger, #C4363A);
}

.pk-search-input {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-family: var(--pk-font-sans, sans-serif);
}

.pk-search-input-field {
  font: inherit;
  font-size: var(--pk-input-fs, 15px);
  min-height: var(--pk-input-height, 38px);
  box-sizing: border-box;
  padding: var(--pk-input-pad, 8px 12px);
  padding-right: calc(var(--pk-input-height, 38px));   /* room for the clear button */
  border-radius: var(--pk-input-radius, var(--pk-radius-pill, 999px));
  border: var(--pk-input-border-w, 1px) solid var(--pk-input-border, #ccc);
  background: var(--pk-input-bg, #fff);
  color: var(--pk-input-fg, #191919);
  width: 100%;
}
.pk-search-input-field::placeholder { color: var(--pk-input-placeholder, #999); }
.pk-search-input-field:hover:not(:disabled):not(:focus-visible) { border-color: var(--pk-input-border-hover, var(--pk-input-border, #ccc)); }
.pk-search-input-field:focus-visible {
  border-color: var(--pk-input-border-focus, #383b5b);
  outline: none;
  box-shadow: 0 0 0 var(--pk-input-ring-w, 2px) var(--pk-input-ring, var(--pk-ring-color, currentColor));
}
.pk-search-input-field:disabled {
  border-color: var(--pk-input-border-disabled, var(--pk-input-border, #ccc));
  background: var(--pk-input-bg-disabled, var(--pk-input-bg, #fff));
  color: var(--pk-input-fg-disabled, var(--pk-text-disabled, #999));
}

.pk-search-input-clear {
  position: absolute;
  right: var(--pk-space-sm, 8px);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--pk-text-secondary, #666);
  font-size: var(--pk-input-fs, 14px);
  line-height: 1;
  padding: var(--pk-space-xs, 2px);
}

.pk-search-input-clear::before {
  content: '\2715'; /* × */
}

/* ---------------------------------------------------------------------------------------
   renderForm (STCT-8777) — a <form> of composed .pk-field rows plus an actions row. The rows
   keep their own styling above; this block only owns the arrangement. */

.pk-form {
  display: flex;
  flex-direction: column;
  gap: var(--pk-space-xs, 4px);
  font-family: var(--pk-font-sans, sans-serif);
  min-width: 0;
}

/* grid = two columns; a textarea always spans both, since a half-width text box is not a box */
.pk-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--pk-space-md, 16px);
}
.pk-form-grid .pk-form-row-textarea,
.pk-form-grid .pk-form-actions { grid-column: 1 / -1; }

.pk-form-hint {
  font-size: var(--pk-fs-caption, 12px);
  color: var(--pk-input-hint-fg, var(--pk-text-secondary, #666));
}

/* A checkbox row: the bare control sits under its field label like any other control. */
.pk-form-row-checkbox .pk-field-input { display: flex; align-items: center; min-height: 2rem; }

.pk-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--pk-space-sm, 8px);
  padding-top: var(--pk-space-sm, 8px);
  /* a divider, so it may take the hairline token */
  border-top: var(--pk-bw-hairline, 1px) solid var(--pk-sem-border-primary, #E6E6E6);
}

/* ==== src/grid-canvas/grid-canvas.css ==== */
/* @paprika/skyten-foundation/grid-canvas — load this sheet; the library does not inject it.
 *
 * The grid takes its shape from three custom properties the renderer sets on the root
 * (columns, row height, gap) and declares defaults here so the sheet is self-contained. A cell's
 * position is inline (grid-column / grid-row) because it IS the data. */

.pk-grid-canvas {
  --pk-grid-canvas-columns: 12;
  --pk-grid-canvas-row: 80px;
  --pk-grid-canvas-gap: var(--pk-space-sm, 8px);
  /* No theme token for these yet (STCT-8782 follow-up): declared here so a brand can override them. */
  --pk-grid-canvas-caption-font-size: 0.6875rem;
  --pk-grid-canvas-caption-transform: uppercase;
  --pk-grid-canvas-caption-letter-spacing: 0.06em;
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--pk-grid-canvas-columns), minmax(0, 1fr));
  grid-auto-rows: var(--pk-grid-canvas-row);
  gap: var(--pk-grid-canvas-gap);
  padding: var(--pk-grid-canvas-gap);
  box-sizing: border-box;
  background: var(--pk-sem-bg-page, #F7F7F8);
  border-radius: var(--pk-card-radius, var(--pk-radius-m, 8px));
  font-family: var(--pk-font-sans, system-ui, sans-serif);
  color: var(--pk-text-primary, #191919);
}

.pk-grid-canvas-cell {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border-radius: var(--pk-card-radius, var(--pk-radius-m, 8px));
}
/* A pane inside a cell fills it; the pane's own inline size (from its resize handle) is the
 * pane's business when it is placed alone, but in a grid the CELL is the size. */
.pk-grid-canvas-cell > * { flex: 1 1 auto; min-height: 0; width: auto; height: auto; }

/* Editing: every cell shows its outline and can take focus. The outline is a dashed control
 * boundary (text-secondary, which clears 3:1 — see select.css), not the hairline token. */
.pk-grid-canvas-editing .pk-grid-canvas-cell {
  outline: var(--pk-bw-primary, 1px) dashed var(--pk-text-secondary, #666);
  outline-offset: 2px;
  cursor: move;
}
/* The browser's focus ring, on purpose (select.css). offset 1px so it reads as a ring. */
.pk-grid-canvas-cell:focus-visible {
  outline: auto;
  outline-offset: 1px;
}

/* Empty slots: a dashed box with the WORD "Empty", so an unfilled slot is never just a gap. */
.pk-grid-canvas-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  border: var(--pk-bw-hairline, 1px) dashed var(--pk-sem-border-primary, #ccc);
  border-radius: var(--pk-card-radius, var(--pk-radius-s, 6px));
  color: var(--pk-text-secondary, #666);
  font-size: var(--pk-grid-canvas-caption-font-size);
  text-transform: var(--pk-grid-canvas-caption-transform);
  letter-spacing: var(--pk-grid-canvas-caption-letter-spacing);
  overflow: hidden;
  user-select: none;
}

/* An overlap is REPORTED: the cells involved get a thick dashed alert outline AND the canvas
 * prints the ids under the grid. Never resolved silently — see stat-tile. */
.pk-grid-canvas-cell-overlap {
  outline: var(--pk-bw-active, 2px) dashed var(--pk-ramp-red-60, #df3d42);
  outline-offset: 2px;
}
.pk-grid-canvas-report {
  grid-column: 1 / -1;
  margin: 0;
  font-family: var(--pk-font-mono, ui-monospace, monospace);
  font-size: var(--pk-grid-canvas-caption-font-size);
  color: var(--pk-text-primary, #191919);
}
.pk-grid-canvas-report[hidden] { display: none; }

/* ==== src/header-hero/header-hero.css ==== */
/* header-hero.css — STCT-8777. Text tokens on the surface only (header-hero.test.js measures every pair
   over 44 brand-modes).
   ⛔ SIZED BY ITS OWN WIDTH, NOT THE VIEWPORT. The first version used vw: in a 206px column of a
   1360px page the title came out 48px and broke mid-word ("Foll/ow"). .pk-hero is a size container
   and the inner wrapper, title and text use container units (cqi), so the same hero fits a showcase
   cell, a phone and a full page.
   ⛔ TWO-CLASS SELECTORS for the text. A page's own scoped heading rule (the showcase styles its h2
   labels uppercase at 0.8em) beat a single class and restyled the section hero's title. */
/* STCT-8777 variants. Sizes are DECLARED as --pk-hero-* below and read with var(), so `compact` only
   redefines the properties. Backgrounds: `tint` = --pk-ramp-primary-10 with --pk-text-on-anchor text
   (measured >= 9:1 in all 44 brand-modes); `image` = the picture as a cover layer under --pk-sem-nav-scrim
   with --pk-sem-footer-text (>= 6:1 on the scrim over black or white). --pk-text-on-anchor is NOT used
   on the scrim: it is the dark anchor text and measured 1.2:1 there. */

.pk-hero {
  --pk-hero-pad-y: clamp(16px, 7cqi, 64px);
  --pk-hero-pad-x: clamp(16px, 6cqi, 56px);
  --pk-hero-gap: clamp(16px, 5cqi, 40px);
  --pk-hero-title-size: clamp(22px, 7cqi, 48px);
  --pk-hero-text-size: clamp(15px, 2.6cqi, 18px);
  --pk-hero-eyebrow-size: 13px;
  position: relative;
  overflow: hidden;
  container-type: inline-size;
  /* ⛔ width:100% is REQUIRED with inline-size containment: a size container contributes no
     intrinsic width, so in a shrink-to-fit parent it collapsed to 0 and the hero vanished. */
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
  border-radius: var(--pk-card-radius, var(--pk-radius-l, 20px));
  background: var(--pk-sem-bg-surface-secondary, #ffffff);
  font-family: var(--pk-font-sans, system-ui, sans-serif);
  color: var(--pk-text-primary, #191919);
}

.pk-hero .pk-hero-inner {
  display: flex;
  flex-wrap: wrap;                     /* split -> stacked by the hero's own width, like card */
  align-items: center;
  gap: var(--pk-hero-gap);
  padding: var(--pk-hero-pad-y) var(--pk-hero-pad-x);
}

.pk-hero .pk-hero-body { display: flex; flex-direction: column; gap: var(--pk-space-sm, 10px); flex: 1 1 320px; min-width: 0; max-width: 72ch; }
.pk-hero-align-center .pk-hero-inner { justify-content: center; text-align: center; }
.pk-hero-align-center .pk-hero-body { align-items: center; margin-inline: auto; }

.pk-hero .pk-hero-eyebrow {
  margin: 0;
  font-size: var(--pk-hero-eyebrow-size);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--pk-text-secondary, #666666);
}
.pk-hero .pk-hero-title {
  margin: 0;
  font-size: var(--pk-hero-title-size);
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -.01em;
  text-transform: none;
  color: var(--pk-text-primary, #191919);
  overflow-wrap: break-word;           /* NOT anywhere: that broke ordinary words mid-word */
  hyphens: auto;
}
.pk-hero .pk-hero-text { font-size: var(--pk-hero-text-size); line-height: 1.55; color: var(--pk-text-secondary, #666666); }
.pk-hero-text > :first-child { margin-top: 0; }
.pk-hero-text > :last-child { margin-bottom: 0; }
.pk-hero .pk-hero-actions { display: flex; flex-wrap: wrap; gap: var(--pk-space-sm, 10px); padding-top: var(--pk-space-sm, 10px); }
.pk-hero-align-center .pk-hero-actions { justify-content: center; }

.pk-hero .pk-hero-media { flex: 1 1 280px; min-width: 0; border-radius: var(--pk-radius-m, 12px); overflow: hidden; }
.pk-hero-media > * { display: block; width: 100%; }
.pk-hero-stacked .pk-hero-media { flex-basis: 100%; }

/* compact: smaller type and padding, same structure. */
/* STCT-9229: the heading filled with the brand's ramp (qc3.at .hero-title-gradient: left to right, periwinkle → lilac →
   violet). The ramp lies OVER a currentColor layer and both are clipped to the glyphs, so a brand whose token is `none`
   paints its heading ink exactly as before — no branch on the value. */
.pk-hero .pk-hero-title.pk-hero-title-gradient {
  background-image: var(--pk-heading-gradient, none), linear-gradient(currentColor, currentColor);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;   /* the clip box is the text, not the whole row */
}

.pk-hero-compact {
  --pk-hero-pad-y: clamp(12px, 3cqi, 24px);
  --pk-hero-pad-x: clamp(12px, 4cqi, 32px);
  --pk-hero-gap: clamp(12px, 3cqi, 24px);
  --pk-hero-title-size: clamp(18px, 4cqi, 28px);
  --pk-hero-text-size: clamp(14px, 2cqi, 16px);
  --pk-hero-eyebrow-size: 12px;
}
.pk-hero-compact .pk-hero-body { gap: var(--pk-space-xs, 4px); }

/* background: 'tint' — the primary ramp's lightest step as the ground, anchor text on it. */
.pk-hero-bg-tint { background: var(--pk-ramp-primary-10, #e9f7fc); }
.pk-hero-bg-tint .pk-hero-eyebrow,
.pk-hero-bg-tint .pk-hero-title,
.pk-hero-bg-tint .pk-hero-text { color: var(--pk-text-on-anchor, #2d2c31); }
/* STCT-9551: under the e-paper display the anchor ink is WHITE (it sits on the black anchor everywhere else), and
   the tint is the lightest step (white). The tint alone pairs them, so here the ink is the page's text colour. */
[data-pk-display="epaper"] .pk-hero-bg-tint { --pk-text-on-anchor: var(--pk-text-primary); }

/* background: 'image' — the picture covers the hero; the inner wrapper IS the scrim, so the text always
   sits on the scrim and never on the bare picture. */
.pk-hero-bg-image { background: var(--pk-sem-nav-scrim, rgba(31,32,50, 0.8)); }
.pk-hero .pk-hero-bg-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.pk-hero-bg-image .pk-hero-inner { position: relative; z-index: 1; background: var(--pk-sem-nav-scrim, rgba(31,32,50, 0.8)); }
.pk-hero-bg-image .pk-hero-eyebrow,
.pk-hero-bg-image .pk-hero-title,
.pk-hero-bg-image .pk-hero-text { color: var(--pk-sem-footer-text, #ffffff); }

/* WEB-1532 G4: size 'feature', the website hero at the reference size. Values measured on skytraders.trading
   2026-10-10: the hero ~600px tall at 1360 and at 390; heading 40px in a 1224px hero and 26px in a 351px hero
   (clamp 26..40 over 3.3cqi gives both); lead 20px/1.6 and 16px; text inset ~78px. The body is centred vertically. */
.pk-hero.pk-hero-size-feature {
  --pk-hero-pad-y: clamp(32px, 6cqi, 72px);
  --pk-hero-pad-x: clamp(20px, 6.4cqi, 78px);
  --pk-hero-title-size: clamp(26px, 3.3cqi, 40px);
  --pk-hero-text-size: clamp(16px, 1.64cqi, 20px);
  --pk-hero-min-height: 600px;
  min-height: var(--pk-hero-min-height);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.pk-hero.pk-hero-size-feature .pk-hero-title { letter-spacing: -.02em; }
.pk-hero.pk-hero-size-feature .pk-hero-text { line-height: 1.6; }
.pk-hero.pk-hero-size-feature .pk-hero-body { max-width: 780px; }
.pk-hero.pk-hero-size-feature.pk-hero-bg-image .pk-hero-inner { flex: 1 1 auto; }
/* WEB-1532 G4: scrim 'baked' — the picture carries its own darkening, so no scrim layer is drawn; the text keeps
   the scrim's ink (--pk-sem-footer-text). */
.pk-hero.pk-hero-scrim-baked,
.pk-hero.pk-hero-scrim-baked .pk-hero-inner { background: transparent; }
/* WEB-1533 (run 2, U6): the baked picture IS the live website hero, whose heading is pure white (measured #FFFFFF;
   the scrim's ink, --pk-sem-footer-text, is #E6E6E6 on skyten). The heading takes the anchor ink, the brand's white
   on its dark accents; the lead and eyebrow keep the scrim's ink. A full-scrim hero is unchanged. */
.pk-hero.pk-hero-bg-image.pk-hero-scrim-baked .pk-hero-title { color: var(--pk-text-on-anchor, #ffffff); }

/* WEB-1544 (+ CT-2133) — skytraders.trading's hero, measured 2026-10-10: a word of the title in the brand ink, the
   highlight full stop; a note 18px under the actions (14px, 80% of the hero's ink); the registration strip at the
   lower right (12px / 700, 0.1em, uppercase), 40px from the bottom and 56px from the right edge. */
.pk-hero .pk-hero-title .pk-hero-accent-brand { color: var(--pk-brand-swatch); -webkit-text-fill-color: var(--pk-brand-swatch); }
.pk-hero .pk-hero-title .pk-hero-accent-stop { color: var(--pk-highlight); -webkit-text-fill-color: var(--pk-highlight); }
.pk-hero .pk-hero-note { margin: 18px 0 0; font-size: 14px; color: var(--pk-text-secondary); }
.pk-hero-bg-image .pk-hero-note { color: color-mix(in srgb, var(--pk-sem-footer-text) 80%, transparent); }
.pk-hero.pk-hero-bg-image.pk-hero-scrim-baked .pk-hero-note { color: color-mix(in srgb, var(--pk-text-on-anchor) 80%, transparent); }
.pk-hero:has(> .pk-hero-strip) { position: relative; }
.pk-hero .pk-hero-strip {
  position: absolute; right: 56px; bottom: 40px; z-index: 1; margin: 0;
  font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--pk-text-secondary);
}
.pk-hero-bg-image .pk-hero-strip { color: var(--pk-sem-footer-text); }
.pk-hero.pk-hero-bg-image.pk-hero-scrim-baked .pk-hero-strip { color: var(--pk-text-on-anchor); }
@media (max-width: 860px) { .pk-hero .pk-hero-strip { left: 20px; right: 20px; bottom: 24px; } }

/* STCT-8777 Desktop/Mobile: .pk-hero is the size container, so this reads the hero's own width. Under
   600px the split layout stacks — text above the picture — instead of squeezing two columns. */
@container (max-width: 600px) {
  .pk-hero-split .pk-hero-inner { flex-direction: column; align-items: stretch; }
  .pk-hero-split .pk-hero-body { flex-basis: auto; max-width: none; }
  .pk-hero-split .pk-hero-media { flex-basis: auto; width: 100%; }
}

/* WEB-1591 (PO 2026-10-12, live skytraders.fund measured): RULED — a 1px rule in the heading's own ink down its left
   edge, the text set off it (24px; 20px on a phone). And a WIDE-ONLY line break ({ br: 'wide' }): the heading keeps
   the author's lines on a wide screen and flows on a phone. Both opt-in; a hero that states neither is unchanged. */
.pk-hero.pk-hero-ruled .pk-hero-title { border-left: 1px solid currentColor; padding-left: 24px; }
@media (max-width: 860px) {
  .pk-hero.pk-hero-ruled .pk-hero-title { padding-left: 20px; }
  .pk-hero .pk-hero-title br.pk-hero-br-wide { display: none; }
}

/* ---- WEB-1602: the hero's text on the named tokens, on a website page (.pk-website-frame): fixed scale steps in place of the
   fluid clamp; a compact hero opens a section and takes the section heading's step ---- */
.pk-website-frame .pk-hero,
.pk-website-frame .pk-hero.pk-hero-size-feature {
  --pk-hero-title-size: var(--pk-ts-display);
  --pk-hero-text-size: var(--pk-ts-l);
  --pk-hero-eyebrow-size: var(--pk-ts-xs);
}
.pk-website-frame .pk-hero.pk-hero-compact {
  --pk-hero-title-size: var(--pk-ts-heading);
  --pk-hero-text-size: var(--pk-ts-m);
  --pk-hero-eyebrow-size: var(--pk-ts-xs);
}
.pk-website-frame .pk-hero .pk-hero-eyebrow { font-weight: var(--pk-tw-bold); letter-spacing: var(--pk-tls-label); }
.pk-website-frame .pk-hero .pk-hero-title { font-weight: var(--pk-tw-bold); line-height: var(--pk-tlh-title); }
.pk-website-frame .pk-hero .pk-hero-text,
.pk-website-frame .pk-hero.pk-hero-size-feature .pk-hero-text { line-height: var(--pk-tlh-text); }
.pk-website-frame .pk-hero .pk-hero-note { font-size: var(--pk-ts-s); }
.pk-website-frame .pk-hero-bg-image .pk-hero-note,
.pk-website-frame .pk-hero.pk-hero-bg-image.pk-hero-scrim-baked .pk-hero-note { color: var(--pk-tc-text-on-dark-primary); }
.pk-website-frame .pk-hero .pk-hero-strip { font-size: var(--pk-ts-xs); letter-spacing: var(--pk-tls-label); }

/* ==== src/inline-alert/inline-alert.css ==== */
/* inline-alert.css — STCT-8777. Text and icon are TEXT tokens on the surface, so they read in all
   44 brand-modes (inline-alert.test.js measures it). The tone colour is only the leading EDGE, and
   the tone is also given by the icon shape and a spoken prefix — not by colour alone (WCAG 1.4.1). */

.pk-inline-alert {
  --pk-inline-alert-edge: var(--pk-ramp-primary-60, #49bae4);
  display: flex;
  align-items: flex-start;
  gap: var(--pk-space-sm, 10px);
  box-sizing: border-box;
  min-width: 0;
  padding: var(--pk-space-sm, 10px) var(--pk-space-md, 16px);
  border: var(--pk-bw-hairline, 1px) solid var(--pk-sem-border-primary, #E6E6E6);
  /* STCT-9224: no accent edge — no brand and no default defines one (a one-sided thick border was a library invention) */
  border-radius: var(--pk-card-radius, var(--pk-radius-s, 6px));
  background: var(--pk-sem-bg-surface-secondary, #ffffff);
  font-family: var(--pk-font-sans, system-ui, sans-serif);
  font-size: 14px;
  line-height: 1.45;
  color: var(--pk-text-primary, #191919);
}
.pk-inline-alert-success { --pk-inline-alert-edge: var(--pk-ramp-tertiary-80, #9ae600); }
.pk-inline-alert-warning { --pk-inline-alert-edge: var(--pk-ramp-orange-70, #f6c000); }
.pk-inline-alert-danger  { --pk-inline-alert-edge: var(--pk-ramp-red-60, #df3d42); }

.pk-inline-alert-icon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  background-color: currentColor;               /* the icon IS the text colour */
  -webkit-mask: var(--pk-icon) center / contain no-repeat;
  mask: var(--pk-icon) center / contain no-repeat;
}

.pk-inline-alert-content { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pk-inline-alert-title { margin: 0; font-weight: 600; color: var(--pk-text-primary, #191919); }
.pk-inline-alert-text { color: var(--pk-text-primary, #191919); }
.pk-inline-alert-text > :first-child { margin-top: 0; }
.pk-inline-alert-text > :last-child { margin-bottom: 0; }
.pk-inline-alert-actions { display: flex; flex-wrap: wrap; gap: var(--pk-space-xs, 8px); padding-top: 4px; }

.pk-inline-alert-close {
  flex: 0 0 auto;
  display: inline-flex;
  padding: 4px;
  margin: -4px -8px -4px 0;
  border: 0;
  border-radius: var(--pk-radius-xs, 3px);
  background: transparent;
  color: var(--pk-text-secondary, #666666);
  cursor: pointer;
}
.pk-inline-alert-close:hover { color: var(--pk-text-primary, #191919); }

.pk-inline-alert-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ==== src/keymap/keymap.css ==== */
/* @paprika/skyten-foundation — canonical Keymap display CSS (STCT-5969/STCT-5970), on the BRAND
   CONTRACT (STCT-8770): the card family, the type scale, the brand's mono face for the keys. Structure
   (title + key/label table) unchanged from renderKeymap()'s DOM (.pk-keymap > h3 + table > tr > td.k/td). */

.pk-keymap {
  background: var(--pk-card-bg);
  color: var(--pk-text-primary);
  border: var(--pk-card-border-w) solid var(--pk-card-border);
  border-radius: var(--pk-card-radius);
  box-shadow: var(--pk-card-shadow);
  padding: var(--pk-card-pad);
  font-family: var(--pk-font-sans);
  font-size: var(--pk-fs-small);
  line-height: var(--pk-lh);
  width: min(calc(var(--pk-container-max-width) / 2.4), 92vw);
}
.pk-keymap h3 {
  margin: 0 0 var(--pk-space-sm);
  font-size: var(--pk-fs-h4);
  font-weight: var(--pk-fw-heading);
  line-height: var(--pk-lh-heading);
  color: var(--pk-text-heading);
}
.pk-keymap table { border-collapse: collapse; width: 100%; }
.pk-keymap td {
  padding: var(--pk-space-xs) var(--pk-space-sm) var(--pk-space-xs) 0;
  border: 0;
  text-align: left;
  font-size: var(--pk-fs-small);
  color: var(--pk-text-secondary);
}
.pk-keymap td.k {
  color: var(--pk-text-primary);
  font-weight: var(--pk-fw-heading);
  white-space: nowrap;
  font-family: var(--pk-font-mono, monospace);
}

/* ==== src/language-picker/language-picker.css ==== */
/* @paprika/skyten-foundation/language-picker — load this sheet; the library does not inject it.
 * The `select` variant is styled by select.css (load that too); this sheet owns the wrapper,
 * the menu trigger and the listbox. */

.pk-language-picker {
  /* No theme token for these yet (STCT-8782 follow-up): declared here so a brand can override them.
   * The chevron is a CSS triangle: its half-width is the xs step, its height 5px (token-based). */
  --pk-language-picker-icon-size: 1rem;
  --pk-language-picker-chevron-half: var(--pk-space-xs, 4px);
  --pk-language-picker-small-font-size: 0.8125rem;
  --pk-language-picker-code-letter-spacing: 0.04em;
  --pk-language-picker-selected-font-weight: 700;
  --pk-language-picker-list-max-height: calc(var(--pk-space-3xl, 64px) * 4);
  /* The listbox is positioned against the wrapper, so the wrapper is the containing block. */
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--pk-space-xs, 4px);
  font-family: var(--pk-font-sans, system-ui, sans-serif);
  color: var(--pk-text-primary, #191919);
}

.pk-language-picker-icon {
  width: var(--pk-language-picker-icon-size);
  height: var(--pk-language-picker-icon-size);
  flex: 0 0 auto;
  /* Bundled icons are stroke-based; currentColor keeps them the text colour on every brand. */
  color: var(--pk-text-secondary, #666);
}

.pk-language-picker-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--pk-space-xs, 4px);
  font: inherit;
  color: inherit;
  background: var(--pk-sem-bg-surface-secondary, #fff);
  /* --pk-text-secondary, NOT the hairline: a control boundary needs 3:1 (STCT-8681). */
  border: var(--pk-bw-primary, 1px) solid var(--pk-text-secondary, #666);
  border-radius: var(--pk-button-radius, var(--pk-radius-s, 6px));
  padding: var(--pk-space-xs, 4px) var(--pk-space-sm, 8px);
  cursor: pointer;
}

.pk-language-picker-trigger:disabled { cursor: default; opacity: 0.55; }

/* The UA ring, deliberately — an authored brand ring fails 3:1 on 16 of 48 brand-modes (CT-1828). */
.pk-language-picker-trigger:focus-visible,
.pk-language-picker-option:focus-visible { outline-offset: 1px; }

.pk-language-picker-chevron {
  width: 0; height: 0;
  border-left: var(--pk-language-picker-chevron-half) solid transparent;
  border-right: var(--pk-language-picker-chevron-half) solid transparent;
  border-top: 5px solid var(--pk-text-secondary, #666);
}

.pk-language-picker-open .pk-language-picker-chevron { transform: rotate(180deg); }

/* Compact: the code is the only visible text; the full name stays in the accessible name. */
.pk-language-picker-compact .pk-language-picker-text {
  font-family: var(--pk-font-sans, system-ui, sans-serif);   /* "EN" is UI text in the brand's face, not code */
  font-size: var(--pk-language-picker-small-font-size);
  letter-spacing: var(--pk-language-picker-code-letter-spacing);
}

.pk-language-picker-list {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 10;
  min-width: 100%;
  margin: var(--pk-space-xs, 4px) 0 0;
  padding: var(--pk-space-xs, 4px) 0;
  list-style: none;
  background: var(--pk-sem-bg-surface-primary, #fff);
  border: var(--pk-bw-primary, 1px) solid var(--pk-text-secondary, #666);
  border-radius: var(--pk-menu-radius, var(--pk-radius-s, 6px));
  max-height: var(--pk-language-picker-list-max-height);
  overflow-y: auto;
}

.pk-language-picker-list[hidden] { display: none; }

.pk-language-picker-option {
  display: flex;
  align-items: baseline;
  gap: var(--pk-space-sm, 8px);
  padding: var(--pk-space-xs, 4px) var(--pk-space-sm, 8px);
  white-space: nowrap;
  cursor: pointer;
}

.pk-language-picker-option:hover,
.pk-language-picker-option-active {
  background: var(--pk-sem-bg-surface-secondary, #F2F2F2);
}

.pk-language-picker-alt {
  font-size: var(--pk-language-picker-small-font-size);
  color: var(--pk-text-secondary, #666);
}

/* The selected row is BOLD and carries a check glyph — two cues besides the accent tint,
 * so the choice survives a reader who cannot separate the two backgrounds. */
.pk-language-picker-check {
  margin-left: auto;
  visibility: hidden;
  color: var(--pk-ramp-primary-60, #49bae4);
}

.pk-language-picker-option-selected { font-weight: var(--pk-language-picker-selected-font-weight); }
.pk-language-picker-option-selected .pk-language-picker-check { visibility: visible; }

/* Screen-reader-only text: in the DOM and the accessibility tree, not on screen. */
.pk-language-picker-sr {
  position: absolute;
  width: var(--pk-bw-primary, 1px);
  height: var(--pk-bw-primary, 1px);
  margin: calc(-1 * var(--pk-bw-primary, 1px));
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ==== src/link/link.css ==== */
/* link.css — STCT-8777. link.test.js measures the colour on the page and on both surfaces over
   every brand x mode, with the dark rule applied in dark.

   Light: the secondary ramp at 100, the one brand-hued step that reaches 4.5:1 in all 22 light
   brand-modes (min 4.70, ptrain). Dark: ramps do NOT flip, and no ramp step reaches 4.5:1 in every
   dark brand (best primary-40, 4.25 on paprikafunds, measured 2026-09-23), so the primary text
   colour. The underline is what marks it (WCAG 1.4.1), in both modes.
   ⚠ The dark selector matches ANY dark ancestor: a light region nested under a dark root uses its
   own primary text colour for links (contrast holds; the brand hue is lost there). */

.pk-link {
  --pk-link-icon-size: 1em;
  --pk-link-standalone-weight: 600;
  --pk-link-disabled-opacity: 0.5;
  color: var(--pk-ramp-secondary-100, #004f6f);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
  border-radius: var(--pk-radius-xs, 2px);
}
:is([data-pk-mode="dark"], [data-pk-theme="dark"]) .pk-link { color: var(--pk-text-primary, #F7F7F8); }
.pk-link[href]:hover { text-decoration-thickness: 2px; }
.pk-link[href]:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.pk-link:not([href]) { color: inherit; text-decoration: none; }   /* a refused URL is plain text */
.pk-link[aria-current="page"] { font-weight: 600; }
.pk-link-external::after { content: "\2197"; content: "\2197" / ""; margin-left: 0.15em; text-decoration: none; display: inline-block; }
.pk-link-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* standalone (STCT-8777): its own line, accent colour, heavier weight; the underline arrives on hover/focus.
   Not in running text, so the block and the weight mark it — colour is not the only cue (WCAG 1.4.1). */
.pk-link-standalone {
  display: inline-flex;
  align-items: center;
  gap: var(--pk-space-xs, 4px);
  width: fit-content;
  max-width: 100%;
  font-weight: var(--pk-link-standalone-weight);
  text-decoration: none;
}
.pk-link-standalone[href]:hover, .pk-link-standalone[href]:focus-visible { text-decoration: underline; }
/* a leading icon: a bundled SVG drawn as a mask over the link colour (the accordion/card precedent), decorative. */
.pk-link-icon {
  flex: 0 0 auto;
  width: var(--pk-link-icon-size);
  height: var(--pk-link-icon-size);
  background: currentColor;
  -webkit-mask: var(--pk-icon) center / contain no-repeat;
  mask: var(--pk-icon) center / contain no-repeat;
}
/* disabled: aria-disabled + tabindex=-1 + no href carry the state; the dimming and the dropped
   underline repeat it. The external arrow stays so the destination is still described. */
.pk-link-disabled, .pk-link-disabled:not([href]) {
  color: var(--pk-text-secondary, #666666);
  opacity: var(--pk-link-disabled-opacity);
  text-decoration: none;
  cursor: not-allowed;
}

/* ---- WEB-1602: links on a website page take one accent ink by name (real links only, never a disabled one); on a navy or
   dark section the on-dark accent ---- */
.pk-website-frame .pk-link[href]:not(.pk-link-disabled),
:root:has(.pk-website-frame) .pk-cookie-banner .pk-link[href]:not(.pk-link-disabled) { color: var(--pk-tc-text-accent); }
.pk-website-frame .pk-website-ground-navy .pk-link[href]:not(.pk-link-disabled),
.pk-website-frame .pk-website-ground-dark .pk-link[href]:not(.pk-link-disabled) { color: var(--pk-tc-text-accent-on-dark); }
.pk-website-frame .pk-link-standalone,
:root:has(.pk-website-frame) .pk-cookie-banner .pk-link-standalone { --pk-link-standalone-weight: var(--pk-tw-semibold); }

/* ==== src/list-content/list-content.css ==== */
/* list-content.css — STCT-8777. Text tokens on the surface only (list-content.test.js measures every
   pair over 44 brand-modes). Rows are a flex line that WRAPS: when the row is too narrow, meta and
   actions move under the text instead of squeezing it to one word per line. */

.pk-list {
  list-style: none;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  border-radius: var(--pk-card-radius, var(--pk-radius-m, 12px));
  background: var(--pk-sem-bg-surface-secondary, #ffffff);
  font-family: var(--pk-font-sans, system-ui, sans-serif);
  color: var(--pk-text-primary, #191919);
}

.pk-list-item {
  position: relative;               /* the stretched link's containing block */
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--pk-space-xs, 8px) var(--pk-space-sm, 10px);
  padding: var(--pk-space-sm, 10px) var(--pk-space-md, 16px);
  min-width: 0;
}
.pk-list-compact .pk-list-item { padding-block: 6px; }
.pk-list-dividers .pk-list-item + .pk-list-item { border-top: var(--pk-bw-hairline, 1px) solid var(--pk-sem-border-primary, #E6E6E6); }

.pk-list-item-media { flex: 0 0 auto; width: 44px; height: 44px; border-radius: var(--pk-radius-s, 6px); overflow: hidden; }
.pk-list-compact .pk-list-item-media { width: 28px; height: 28px; }
.pk-list-item-media > * { display: block; width: 100%; height: 100%; object-fit: cover; }

.pk-list-item-body { flex: 1 1 100px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pk-list .pk-list-item-title { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--pk-text-primary, #191919); overflow-wrap: break-word; }
.pk-list .pk-list-item-description { font-size: 14px; line-height: 1.45; color: var(--pk-text-secondary, #666666); overflow-wrap: break-word; }
.pk-list .pk-list-item-meta { flex: 0 0 auto; margin-left: auto; font-size: 13px; color: var(--pk-text-secondary, #666666); white-space: nowrap; }
.pk-list-item-actions { flex: 0 0 auto; display: flex; gap: var(--pk-space-xs, 8px); position: relative; z-index: 1; }

.pk-list-item-link { color: inherit; text-decoration: none; }
.pk-list-item-link::after { content: ""; position: absolute; inset: 0; }
.pk-list-item-linked:hover .pk-list-item-link { text-decoration: underline; }
.pk-list-item-link:focus-visible { outline: none; }
.pk-list-item-linked:has(.pk-list-item-link:focus-visible) { outline: 2px solid var(--pk-text-primary, #191919); outline-offset: -2px; }

.pk-list .pk-list-empty { padding: var(--pk-space-md, 16px); text-align: center; font-size: 14px; color: var(--pk-text-secondary, #666666); }

/* ---- STCT-8777 variants: leading / trailing slots, dense, selectable ------------------------------
   Component-local sizes are DECLARED here (--pk-list-*) and read below; colours only from the theme. */
.pk-list {
  --pk-list-slot-size: 24px;
  --pk-list-dense-padding-block: 4px;
  --pk-list-dense-title-size: 14px;
  --pk-list-dense-text-size: 13px;
  --pk-list-check-size: 18px;
}

/* Leading: an icon (by bundled name → mask), a Node (avatar, badge) or a short text (an initial). */
.pk-list-item-leading { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; min-width: var(--pk-list-slot-size); min-height: var(--pk-list-slot-size); color: var(--pk-text-secondary, #666666); }
.pk-list-item-icon {
  display: inline-block; width: var(--pk-list-slot-size); height: var(--pk-list-slot-size);
  background: currentColor;
  -webkit-mask: var(--pk-icon) center / contain no-repeat;
  mask: var(--pk-icon) center / contain no-repeat;
}
/* Trailing: a badge, a price, a chevron — on a wide row it sits at the end after the meta. */
.pk-list-item-trailing { flex: 0 0 auto; display: flex; align-items: center; gap: var(--pk-space-xs, 8px); position: relative; z-index: 1; color: var(--pk-text-secondary, #666666); }
.pk-list .pk-list-item-meta + .pk-list-item-trailing { margin-left: 0; }
.pk-list-item:not(:has(.pk-list-item-meta)) > .pk-list-item-trailing { margin-left: auto; }

/* Dense: tighter rows and smaller type for long data lists (watchlists, order books). */
.pk-list-dense .pk-list-item { padding-block: var(--pk-list-dense-padding-block); gap: 0 var(--pk-space-xs, 8px); }
.pk-list-dense .pk-list-item-body { gap: 0; }
.pk-list-dense .pk-list-item-title { font-size: var(--pk-list-dense-title-size); }
.pk-list-dense .pk-list-item-description, .pk-list-dense .pk-list-item-meta { font-size: var(--pk-list-dense-text-size); }
.pk-list-dense .pk-list-item-media { width: var(--pk-list-slot-size); height: var(--pk-list-slot-size); }

/* Selectable: role="listbox" rows. The selected row shows a CHECK GLYPH plus a tint and an accent
   edge — never colour alone. :focus-visible keeps the user-agent ring (no rule removes the outline). */
.pk-list-selectable .pk-list-item { cursor: pointer; }
/* STCT-8989: hover and selection use the brand's SEMANTIC menu pair, which the contract defines per
   mode — a ramp step (primary-10) is a light tint in both modes and left white text on it in dark. */
.pk-list-selectable .pk-list-item:hover { background: var(--pk-menu-hover-bg); }
.pk-list-item-check {
  flex: 0 0 auto; width: var(--pk-list-check-size); height: var(--pk-list-check-size);
  align-self: center; visibility: hidden;
  background: var(--pk-ramp-primary-60, #006D99);
  -webkit-mask: var(--pk-icon) center / contain no-repeat;
  mask: var(--pk-icon) center / contain no-repeat;
}
.pk-list-item-selected .pk-list-item-check { visibility: visible; }
.pk-list-selectable .pk-list-item-selected,
.pk-list-selectable .pk-list-item-selected:hover {
  background: var(--pk-menu-active-bg); color: var(--pk-menu-active-fg);
  /* STCT-9224: no invented accent edge (the selected/active state is its tint and its glyph) */
}
.pk-list-selectable .pk-list-item:focus-visible { outline-offset: -2px; }

/* MOBILE (a 390px container): the trailing slot and the meta drop UNDER the text as a full-width
   line instead of squeezing the title. The parent (or the showcase frame) is the container. */
@container (max-width: 600px) {
  .pk-list-item > .pk-list-item-trailing,
  .pk-list-item > .pk-list-item-meta { flex: 1 1 100%; margin-left: 0; white-space: normal; }
  .pk-list-item-leading ~ .pk-list-item-trailing,
  .pk-list-item-leading ~ .pk-list-item-meta,
  .pk-list-item-media ~ .pk-list-item-trailing,
  .pk-list-item-media ~ .pk-list-item-meta { padding-left: calc(var(--pk-list-slot-size) + var(--pk-space-sm, 10px)); }
}

/* ==== src/loader/loader.css ==== */
/* loader.css — plain CSS spinner (no Angular Material dependency), on the BRAND CONTRACT (STCT-8770):
   a strong stroke in the brand's border colour, the moving arc in its primary. */

.pk-loader {
  border-radius: 50%;
  border: var(--pk-stroke-strong, 2px) solid var(--pk-sem-border-primary, #ccc);
  border-top-color: var(--pk-primary, #49bae4);
  animation: pk-loader-spin 0.8s linear infinite;
}

@keyframes pk-loader-spin {
  to { transform: rotate(360deg); }
}

/* ==== src/log-viewer/log-viewer.css ==== */
/* log-viewer.css — STCT-9137. Lines are the brand's mono face on the surface, in TEXT tokens so they read in every
   brand-mode. The level is carried by its word and an icon (inline-alert's), and the colour is only supplementary:
   the icon takes the tone ramp, the word stays text-primary. */

.pk-log-viewer {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  border: var(--pk-bw-hairline, 1px) solid var(--pk-sem-border-primary, #E6E6E6);
  border-radius: var(--pk-radius-s, 6px);
  background: var(--pk-sem-bg-surface-secondary, #ffffff);
  color: var(--pk-text-primary, #191919);
  font-family: var(--pk-font-sans, system-ui, sans-serif);
}

.pk-log-viewer-bar {
  display: flex;
  align-items: center;
  gap: var(--pk-space-sm, 10px);
  padding: var(--pk-space-xs, 8px) var(--pk-space-sm, 10px);
  border-bottom: var(--pk-bw-hairline, 1px) solid var(--pk-sem-border-primary, #E6E6E6);
  font-size: var(--pk-fs-small);
}
/* STCT-9714: the filter paints the input tokens (as form-fields does), not the browser's field: dark mode showed a white
   box with light-inked text in it */
.pk-log-viewer-filter {
  flex: 1 1 auto; min-width: 0; font: inherit;
  padding: 0 var(--pk-space-xs, 8px);   /* the bar pads vertically; --pk-space-xs is the scale's smallest step */
  border: var(--pk-input-border-w, 1px) solid var(--pk-input-border, #cccccc);
  border-radius: var(--pk-input-radius, 4px);
  background: var(--pk-input-bg, #ffffff);
  color: var(--pk-input-fg, #191919);
}
.pk-log-viewer-filter::placeholder { color: var(--pk-input-placeholder, #999999); }
.pk-log-viewer-count { color: var(--pk-text-secondary, #666666); white-space: nowrap; }
.pk-log-viewer-resume { font: inherit; white-space: nowrap; }

.pk-log-viewer-lines {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  margin: 0;
  padding: var(--pk-space-xs, 8px) var(--pk-space-sm, 10px);
  list-style: none;
  font-family: var(--pk-font-mono, ui-monospace, monospace);
  font-size: var(--pk-fs-small);
  line-height: var(--pk-lh);
}
/* STCT-9714: the line WRAPS as a row. Time, source and level never shrink, so in a narrow panel the message was left
   ~0px and overflow-wrap broke it after every character; now, with less than 16ch left, it moves to its own row */
.pk-log-viewer-line { display: flex; flex-wrap: wrap; column-gap: var(--pk-space-sm, 10px); white-space: pre-wrap; overflow-wrap: anywhere; }
.pk-log-viewer-line[hidden] { display: none; }
.pk-log-viewer-time, .pk-log-viewer-source { flex: 0 0 auto; color: var(--pk-text-secondary, #666666); }
.pk-log-viewer-level { flex: 0 0 auto; display: inline-flex; align-items: center; gap: var(--pk-space-xs, 8px); }
.pk-log-viewer-text { flex: 1 1 16ch; min-width: min(16ch, 100%); }

.pk-log-viewer-icon {
  width: var(--pk-fs-small);                  /* sized to the line's own text (stat-tile's pattern) */
  height: var(--pk-fs-small);
  background-color: var(--pk-log-viewer-tone, currentColor);
  -webkit-mask: var(--pk-icon) center / contain no-repeat;
  mask: var(--pk-icon) center / contain no-repeat;
}
.pk-log-viewer-line[data-pk-level="info"]  { --pk-log-viewer-tone: var(--pk-ramp-primary-60, #49bae4); }
.pk-log-viewer-line[data-pk-level="warn"]  { --pk-log-viewer-tone: var(--pk-ramp-orange-70, #f6c000); }
.pk-log-viewer-line[data-pk-level="error"] { --pk-log-viewer-tone: var(--pk-ramp-red-60, #df3d42); }

/* the throttled "n new lines" status: the 1px visually-hidden box, sized by the primary border-width token (1px) */
.pk-log-viewer-sr {
  position: absolute;
  width: var(--pk-bw-primary, 1px);
  height: var(--pk-bw-primary, 1px);
  margin: calc(-1 * var(--pk-bw-primary, 1px));
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ==== src/markdown-document/markdown-document.css ==== */
/* STCT-9045 — a markdown document in ITS brand's theme. The article carries the brand's tokens as its own
   custom properties (renderMarkdownDocument), so everything below resolves to that brand, whatever the page
   around it wears. No literal colour or size (css:invented). */
.pk-markdown-document {
  background: var(--pk-page-bg);
  color: var(--pk-text-primary);
  font-family: var(--pk-font-sans);
  padding: var(--pk-space-xl);
}
.pk-markdown-document-accounting {
  display: flex;
  flex-direction: column;
  gap: var(--pk-space-md);
  margin-block: var(--pk-space-md);
}
/* FAIL LOUD: the report is the first thing in the document, and a missing block marks its own place */
.pk-markdown-document-problems {
  margin-block-end: var(--pk-space-lg);
  padding: var(--pk-space-md);
  border: var(--pk-input-border-w) solid var(--pk-input-border-invalid);
  border-radius: var(--pk-card-radius, var(--pk-radius-card));
  background: var(--pk-sem-bg-surface-primary);
  color: var(--pk-text-primary);
}
.pk-markdown-document-missing {
  padding: var(--pk-space-sm) var(--pk-space-md);
  border: var(--pk-input-border-w) dashed var(--pk-input-border-invalid);
  border-radius: var(--pk-card-radius, var(--pk-radius-card));
  font-family: var(--pk-font-mono);
}
/* print / PDF: every accounting page starts a printed page; the page's own header, footer and
   "Page n of N" are in its lines, so a printout carries them without browser headers */
@media print {
  .pk-markdown-document { padding: 0; }
  .pk-markdown-document-accounting { display: block; }
  .pk-markdown-document-accounting .pk-table-accounting-page { break-before: page; break-inside: avoid; }
  /* the LAST page of a statement does not end the printed page: what follows it (the totals) belongs
     under it. skyten-table.css ends every accounting page with break-after: page, which pushed an
     invoice's "Total due" onto a page of its own (measured: 4 printed pages instead of 3). */
  .pk-markdown-document-accounting .pk-table-accounting-page:last-child { break-after: auto; }
}

/* ==== src/markdown/markdown.css ==== */
/* @paprika/skyten-foundation/markdown — load this sheet; the library does not inject it.
 *
 * The renderer emits plain semantic HTML (h1–h6, p, ul/ol, blockquote, pre/code, table, a) inside
 * <article class="pk-markdown">, so this sheet styles ELEMENTS scoped to the article rather than
 * a class per node — the output is then also readable with no sheet at all, and an app that wants
 * its own typography overrides element rules, not a private class vocabulary. */

.pk-markdown {
  /* No theme token for these yet (STCT-8782 follow-up): declared here so a brand can override them. */
  --pk-markdown-line-height: 1.55;
  --pk-markdown-heading-line-height: 1.25;
  --pk-markdown-heading-weight: 600;
  --pk-markdown-h1-size: 1.75rem;
  --pk-markdown-h2-size: 1.4rem;
  --pk-markdown-h3-size: 1.15rem;
  --pk-markdown-h4-size: 1rem;
  --pk-markdown-code-size: 0.9em;
  --pk-markdown-code-pad-y: 0.1em;
  --pk-markdown-code-pad-x: 0.35em;
  --pk-markdown-pre-size: 0.875rem;
  --pk-markdown-pre-line-height: 1.5;
  --pk-markdown-table-size: 0.9375rem;
  --pk-markdown-empty-min-height: 1em;
  --pk-markdown-sr-size: 1px;
  font-family: var(--pk-font-sans, system-ui, sans-serif);
  color: var(--pk-text-primary, #191919);
  line-height: var(--pk-markdown-line-height);
  /* long URLs and unbroken strings wrap inside the article rather than widening it */
  overflow-wrap: break-word;
}

.pk-markdown > :first-child { margin-top: 0; }
.pk-markdown > :last-child { margin-bottom: 0; }

.pk-markdown h1, .pk-markdown h2, .pk-markdown h3,
.pk-markdown h4, .pk-markdown h5, .pk-markdown h6 {
  margin: var(--pk-space-lg, 24px) 0 var(--pk-space-sm, 8px);
  line-height: var(--pk-markdown-heading-line-height);
  font-weight: var(--pk-markdown-heading-weight);
}
.pk-markdown h1 { font-size: var(--pk-markdown-h1-size); }
.pk-markdown h2 { font-size: var(--pk-markdown-h2-size); }
.pk-markdown h3 { font-size: var(--pk-markdown-h3-size); }
.pk-markdown h4, .pk-markdown h5, .pk-markdown h6 { font-size: var(--pk-markdown-h4-size); }

.pk-markdown p { margin: 0 0 var(--pk-space-md, 16px); }

.pk-markdown ul, .pk-markdown ol {
  margin: 0 0 var(--pk-space-md, 16px);
  padding-left: var(--pk-space-lg, 24px);
}
/* a nested list belongs to its item, so it takes no bottom margin of its own */
.pk-markdown li > ul, .pk-markdown li > ol { margin-bottom: 0; }
.pk-markdown li { margin: var(--pk-space-xs, 4px) 0; }

/* ⛔ Links inside running text are ALWAYS underlined (WCAG 1.4.1): colour alone would not
   separate them from the body for a reader who cannot see the hue. */
.pk-markdown a {
  /* STCT-9752 (PM_Dgn): the brand's link ink, which tools-brands #44 made 4.5:1 on every text ground.
     It was --pk-ramp-primary-60, a ramp step with no such guarantee (skyten dark: #383B5B on #171717). */
  color: var(--pk-text-link, #007FB1);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.pk-markdown a:hover { text-decoration-thickness: var(--pk-bw-active, 2px); }
.pk-markdown a:focus-visible { outline-offset: 1px; }

/* a refused link (javascript:, data:) is its text plus a dotted underline — visibly "not a link"
   but visibly "something was here", so a content reviewer notices */
.pk-markdown-link-refused {
  text-decoration: underline dotted;
  color: var(--pk-text-secondary, #666);
}

.pk-markdown code {
  font-family: var(--pk-font-mono, ui-monospace, monospace);
  font-size: var(--pk-markdown-code-size);
  background: var(--pk-sem-bg-surface-primary, #F2F2F2);
  border: var(--pk-bw-hairline, 1px) solid var(--pk-sem-border-primary, #E6E6E6);
  border-radius: var(--pk-radius-xs, 3px);
  padding: var(--pk-markdown-code-pad-y) var(--pk-markdown-code-pad-x);
}

.pk-markdown pre {
  margin: 0 0 var(--pk-space-md, 16px);
  padding: var(--pk-space-sm, 8px) var(--pk-space-md, 16px);
  background: var(--pk-sem-bg-surface-primary, #F2F2F2);
  border: var(--pk-bw-hairline, 1px) solid var(--pk-sem-border-primary, #E6E6E6);
  border-radius: var(--pk-radius-s, 6px);
  overflow-x: auto;
  /* keep tab stops sane in code samples */
  tab-size: 2;
}
.pk-markdown pre code {
  background: none;
  border: 0;
  padding: 0;
  font-size: var(--pk-markdown-pre-size);
  line-height: var(--pk-markdown-pre-line-height);
}

/* ⛔ --pk-bw-active for the quote rule, not a hairline: a blockquote is a structural mark, and a
   1px hairline at 45/48 brand-modes under 3:1 disappears into the page. */
.pk-markdown blockquote {
  margin: 0 0 var(--pk-space-md, 16px);
  padding: var(--pk-space-xs, 4px) var(--pk-space-md, 16px);
  /* STCT-9224: no quote bar — no brand or default typography defines one (a follow-up can add typography.blockquote) */
  color: var(--pk-text-secondary, #666);
}
.pk-markdown blockquote > :last-child { margin-bottom: 0; }

.pk-markdown hr {
  border: 0;
  border-top: var(--pk-bw-hairline, 1px) solid var(--pk-sem-border-primary, #E6E6E6);
  margin: var(--pk-space-lg, 24px) 0;
}

/* a wide table scrolls inside its wrapper, never the page */
.pk-markdown-table-wrap { overflow-x: auto; margin: 0 0 var(--pk-space-md, 16px); }
.pk-markdown table {
  border-collapse: collapse;
  width: 100%;
  font-size: var(--pk-markdown-table-size);
}
.pk-markdown th, .pk-markdown td {
  padding: var(--pk-space-xs, 4px) var(--pk-space-sm, 8px);
  border-bottom: var(--pk-bw-hairline, 1px) solid var(--pk-sem-border-primary, #E6E6E6);
  text-align: left;
  vertical-align: top;
}
/* STCT-9513: a right-aligned column is a column of numbers (an invoice's amounts): tabular figures, so the decimal
   points line up. Proportional digits left them ragged down the column. */
.pk-markdown td[data-pk-align="right"], .pk-markdown th[data-pk-align="right"] { font-variant-numeric: tabular-nums; }
.pk-markdown th {
  font-weight: var(--pk-markdown-heading-weight);
  color: var(--pk-text-secondary, #666);
  border-bottom-width: var(--pk-bw-active, 2px);
}

.pk-markdown img {
  max-width: 100%;
  height: auto;
  border-radius: var(--pk-radius-s, 6px);
}
/* an image that was NOT rendered (images: false) is shown as its alt in brackets, muted */
.pk-markdown-img-alt { color: var(--pk-text-secondary, #666); font-style: italic; }

.pk-markdown-empty { min-height: var(--pk-markdown-empty-min-height); }

/* screen-reader-only: stays in the accessibility tree, off the canvas */
.pk-markdown-sr {
  position: absolute;
  width: var(--pk-markdown-sr-size);
  height: var(--pk-markdown-sr-size);
  margin: calc(-1 * var(--pk-markdown-sr-size));
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ==== src/media-player/media-player.css ==== */
/* media-player.css — STCT-8777. The controls are the browser's; this styles the frame, the title and
   the transcript with text tokens on the surface (media-player.test.js measures the pairs).

   Layout (Desktop + Mobile frames): the frame WRAPS. The main column (stage, title, status) has a
   20rem basis and the transcript a 14rem one, so at ≥ 900px they sit side by side and in a 390px
   container the transcript folds under the player — intrinsic wrapping, no container-type needed. */

.pk-media {
  /* declared before they are read (theme.test.js): the component's own knobs, sized from tokens */
  --pk-media-main-basis: 20rem;
  --pk-media-transcript-basis: 14rem;
  --pk-media-cc-font-size: 0.6875rem;
  --pk-media-play-size: 1.125rem;
  --pk-media-cc-weight: 700;
  --pk-media-overlay-title-weight: 600;
  --pk-media-status-font-size: 0.875rem;
  margin: 0;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--pk-space-xs, 8px);
  padding: var(--pk-space-sm, 10px);
  border-radius: var(--pk-card-radius, var(--pk-radius-m, 12px));
  background: var(--pk-sem-bg-surface-secondary, #ffffff);
  font-family: var(--pk-font-sans, system-ui, sans-serif);
  color: var(--pk-text-primary, #191919);
}
.pk-media .pk-media-main { flex: 1 1 var(--pk-media-main-basis); min-width: 0; display: flex; flex-direction: column; gap: var(--pk-space-xs, 8px); }
.pk-media-stage { position: relative; min-width: 0; }
.pk-media-element { display: block; width: 100%; max-width: 100%; border-radius: var(--pk-radius-s, 6px); }
.pk-media-video .pk-media-element { aspect-ratio: 16 / 9; background: #000; }

.pk-media .pk-media-title { display: flex; align-items: center; gap: var(--pk-space-xs, 8px); font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--pk-text-primary, #191919); overflow-wrap: break-word; }
.pk-media .pk-media-transcript { flex: 1 1 var(--pk-media-transcript-basis); min-width: 0; font-size: 14px; color: var(--pk-text-primary, #191919); }
.pk-media-transcript summary { cursor: pointer; font-weight: 600; }
.pk-media-transcript summary:focus-visible { outline: 2px solid var(--pk-text-primary, #191919); outline-offset: 2px; }
.pk-media .pk-media-transcript-body { margin-top: 6px; max-height: 16em; overflow: auto; line-height: 1.5; color: var(--pk-text-secondary, #666666); white-space: pre-line; }

/* Poster overlay: sits on the video, centres the title, the CC badge and the Play button. A URL poster
   is its background image under the theme's scrim; `poster: true` is a token-tinted placeholder. */
.pk-media-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--pk-space-sm, 10px);
  padding: var(--pk-space-md, 16px);
  border-radius: var(--pk-radius-s, 6px);
  background-color: var(--pk-sem-nav-scrim, rgba(0, 0, 0, 0.5));
  background-size: cover;
  background-position: center;
  color: var(--pk-text-on-anchor, #ffffff);
  text-align: center;
}
.pk-media-overlay::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--pk-sem-nav-scrim, rgba(0, 0, 0, 0.5)); }
.pk-media-overlay-placeholder { background-image: linear-gradient(135deg, var(--pk-ramp-primary-60, #49bae4), var(--pk-ramp-tertiary-60, #383b5b)); }
.pk-media-overlay > * { position: relative; }
.pk-media-overlay[hidden] { display: none; }
.pk-media-overlay .pk-media-overlay-title { font-weight: var(--pk-media-overlay-title-weight); color: var(--pk-text-on-anchor, #ffffff); overflow-wrap: anywhere; }
.pk-media-overlay .pk-media-play { font-size: var(--pk-media-play-size); }

/* "CC" badge: a bordered, worded chip (the word, not a colour, carries the meaning). */
.pk-media-cc {
  display: inline-block;
  padding: 0 var(--pk-space-xs, 8px);
  border: var(--pk-bw-primary, 1px) solid currentColor;
  border-radius: var(--pk-radius-xs, 3px);
  font-size: var(--pk-media-cc-font-size);
  font-weight: var(--pk-media-cc-weight);
  line-height: calc(var(--pk-media-cc-font-size) * 1.6);
  color: inherit;
}
.pk-media-meta { display: flex; gap: var(--pk-space-xs, 8px); color: var(--pk-text-secondary, #666666); }

/* Loading / error status line. */
.pk-media .pk-media-status { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pk-space-xs, 8px); font-size: var(--pk-media-status-font-size); color: var(--pk-text-secondary, #666666); }
.pk-media .pk-media-status[hidden] { display: none; }
.pk-media .pk-media-status-error { color: var(--pk-text-primary, #191919); }
.pk-media .pk-media-status-error .pk-media-status-text { /* STCT-9224: no invented accent edge */ }

/* The controls are the BROWSER'S, drawn in its light scheme unless told otherwise: in dark mode the
   audio bar came out as a bright pill on a dark page (seen in the ptrain-dark screenshot). color-scheme
   makes the native controls follow the mode, under either theming attribute. */
:is([data-pk-mode="dark"], [data-pk-theme="dark"]) .pk-media-element { color-scheme: dark; }
/* WEB-1532: a LIGHT region inside a dark page (the mixed recipe) takes the light scheme back. */
:is([data-pk-mode="dark"], [data-pk-theme="dark"]) :is([data-pk-mode="light"], [data-pk-theme="light"]) .pk-media-element { color-scheme: light; }

/* ==== src/menu-modes/menu-modes.css ==== */
/* ⇒ THE HOOK CONTRACT THIS SHEET KEYS ON IS ./HOOKS.md, and ./hooks.json is the same thing
   machine-readable. Read it before adding a selector: a hook no surface emits is a rule that
   never applies. `npm run hooks:check` asks a real browser how many rules it KEPT.

   ⛔ pk-nav-* is canonical (PMO, STCT-7545 c.86563). The pk-menu-* spellings in the base rules are
   LEGACY co-selectors kept so existing adopters keep working -- nothing new emits them.

   ⛔ DO NOT EDIT THE SELECTORS WITH A LINE TRANSFORM. That is what put comment fragments inside
   five selector lists in baca2b9 and silently killed 5 of 18 rules (STCT-7479). */

/* ================================================================================================
   STCT-8770 — EVERY VALUE BELOW IS A BRAND-CONTRACT TOKEN (src/brands/theme-<brand>.css, vendored
   from tools-brands). Operator 2026-09-23: "changing the theme just changes the colour — it has to
   change radius, shadow, default menu, horizontal/vertical, dark/light default, font, spacing";
   "no invented CSS values: every value comes from the default theme, the brand, or the app developer".

   Two families, one per layout family, exactly as tools-brands renders its reference pages:

     ROW layouts (horizontal | centered | icon-horizontal — the APP BAR, `.pk-appnav a` in the reference)
       --pk-nav-item-w / -h / -gap / -radius / -fs   the lozenge geometry (44 x 36, 12px apart, pill for skyten)
       --pk-nav-icon-size                            22px
       --pk-nav-fg                                   the resting glyph / label colour (#929497 on skyten's bar)
       --pk-nav-active-bg / -fg / -weight            the current page (navy lozenge + blue glyph on skyten)
       --pk-nav-underline / -underline-w             an underline ONLY where the brand authored one
                                                     (transparent on skyten, #990000 on paprikafunds)
       --pk-nav-hover-bg / -fg / -underline / -glow  hover (skyten: the lozenge + a lime glow; bmw: no glow)
     VERTICAL layout (the side menu, `.pk-vmenu-item` in the reference)
       --pk-menu-item-pad / -fs / -fg, --pk-menu-hover-bg / -rule / -rule-w, --pk-menu-active-bg / -fg
     The drawer / "More" popover: --pk-menu-bg / -radius / -shadow, --pk-rail-width, --pk-sem-nav-scrim.

   ⛔ THE INDICATOR KIND IS NOT ASSUMED. With no data-pk-menu-active the item paints the brand's own
   --pk-nav-active-* (+ its underline token, which is transparent unless the brand says otherwise), so
   a brand whose JSON says activeIndicator:"underline" gets an underline and NO lozenge, and one that
   says "fill" gets the lozenge — with no rule here choosing between them. The data-pk-menu-active axis
   (STCT-8651) stays for an APP that overrides the brand: fill | tint | underline | none, each painted
   from a brand token (--pk-nav-fill-*, --pk-secondary-bg, --pk-tabs-rule).
   ================================================================================================ */

.pk-menu,
.pk-nav {
  display: flex;
  font-family: var(--pk-font-sans);
  font-size: var(--pk-nav-item-fs);
  gap: var(--pk-nav-item-gap);
}
.pk-menu-item,
.pk-nav-item {
  display: flex;
  align-items: center;
  gap: var(--pk-gap);
  padding: var(--pk-pad-y-sm) var(--pk-pad-x-sm);
  border-radius: var(--pk-nav-item-radius); /* STCT-8651: renderNav({itemRadius}) overrides per nav */
  color: var(--pk-nav-fg);
  text-decoration: none;
  cursor: pointer;
  background-color: transparent;
  /* --pk-nav-underline is the ACTIVE underline (tools-brands paints it as `box-shadow: inset 0 -2px 0
     <rule>` on .pk-active and on :hover, never at rest); it is transparent where the brand authored
     none. On hover the glow shares the shadow slot (a box-shadow list cannot hold `none`), so the
     hover underline is a bottom-anchored gradient instead. */
  box-shadow: none;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100% var(--pk-nav-underline-w);
  border: none;
  font: inherit;
  font-size: var(--pk-nav-item-fs);
  white-space: nowrap;
  box-sizing: border-box;
}
.pk-menu-item:hover,
.pk-nav-item:hover {
  background-color: var(--pk-nav-hover-bg);
  background-image: linear-gradient(var(--pk-nav-hover-underline), var(--pk-nav-hover-underline));
  color: var(--pk-nav-hover-fg);
  box-shadow: var(--pk-nav-hover-glow);
}
/* the ACTIVE state: the brand's own indicator — lozenge, tint, underline or nothing, per its tokens;
   plus the brand's active weight and aria-current="page" from the renderer. */
.pk-menu-item.pk-active,
.pk-nav-item.pk-active {
  color: var(--pk-nav-active-fg);
  font-weight: var(--pk-nav-active-weight);
  background-color: var(--pk-nav-active-bg);
  /* STCT-9906 (ruby): a GLOSSY active item (the brand's ramp over its fill) and its GLOW; none on every other brand.
     The underline stays the ::after rule below (STCT-9218), so the only shadow here is the brand's glow. */
  background-image: var(--pk-nav-active-bg-image, none);
  box-shadow: var(--pk-nav-active-glow, none);
  --pk-nav-rule: var(--pk-nav-underline); --pk-nav-rule-w: var(--pk-nav-underline-w);
}
.pk-menu-item .pk-menu-icon,
.pk-nav-item .pk-nav-icon {
  width: var(--pk-nav-icon-size); height: var(--pk-nav-icon-size); flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask: var(--pk-icon) center / contain no-repeat;
  mask: var(--pk-icon) center / contain no-repeat;
}
/* STCT-9859 (PM_Fe): a FONT icon (Material ligatures, an icon font) in the icon slot. The mask above paints a glyph
   box in currentColor, which turns a ligature into a solid block, so an app had to undo it with a rule keyed on this
   library's class. data-pk-icon-kind="font" on the icon element draws its text instead: no mask, no background, at
   the icon size, in the item's colour. ⛔ It sets NO display: the labeling / icons-off rules hide icons with the same
   specificity, and a display here would decide by source order which one wins. */
.pk-menu-item .pk-menu-icon[data-pk-icon-kind="font"],
.pk-nav-item .pk-nav-icon[data-pk-icon-kind="font"] {
  background: none;
  -webkit-mask: none;
  mask: none;
  color: inherit;
  font-size: var(--pk-nav-icon-size);
  line-height: var(--pk-nav-icon-size);
  text-align: center;
  overflow: hidden;
}

/* --- data-pk-menu-mode: vertical (default) — the side menu, on the --pk-menu-* family ---
   STCT-11530: a SECTION's items (.pk-nav-section > .pk-nav-section-body > .pk-nav-item) are rail items like any other. */
.pk-menu[data-pk-menu-mode="vertical"],
.pk-nav[data-pk-menu-mode="vertical"] { flex-direction: column; align-items: stretch; gap: 0; font-size: var(--pk-menu-item-fs); background: var(--pk-menu-bg); }
.pk-nav[data-pk-menu-mode="vertical"] > .pk-nav-item,
.pk-nav[data-pk-menu-mode="vertical"] > .pk-nav-submenu .pk-nav-item,
.pk-nav[data-pk-menu-mode="vertical"] > .pk-nav-section > .pk-nav-section-body > .pk-nav-item {
  padding: var(--pk-menu-item-pad);
  font-size: var(--pk-menu-item-fs);
  color: var(--pk-menu-item-fg);
  border-radius: 0;
  gap: var(--pk-nav-item-gap);
  border-top: var(--pk-menu-hover-rule-w) solid transparent;
  border-bottom: var(--pk-menu-hover-rule-w) solid transparent;
  background-image: none;
  box-shadow: none;
}
.pk-nav[data-pk-menu-mode="vertical"] > .pk-nav-item:hover,
.pk-nav[data-pk-menu-mode="vertical"] > .pk-nav-submenu .pk-nav-item:hover,
.pk-nav[data-pk-menu-mode="vertical"] > .pk-nav-section > .pk-nav-section-body > .pk-nav-item:hover {
  background-color: var(--pk-menu-hover-bg);
  border-top-color: var(--pk-menu-hover-rule);
  border-bottom-color: var(--pk-menu-hover-rule);
  color: var(--pk-menu-item-fg);
}
.pk-nav[data-pk-menu-mode="vertical"] > .pk-nav-item.pk-active,
.pk-nav[data-pk-menu-mode="vertical"] > .pk-nav-submenu .pk-nav-item.pk-active,
.pk-nav[data-pk-menu-mode="vertical"] > .pk-nav-section > .pk-nav-section-body > .pk-nav-item.pk-active {
  background-color: var(--pk-menu-active-bg);
  color: var(--pk-menu-active-fg);
  border-top-color: var(--pk-menu-hover-rule);
  border-bottom-color: var(--pk-menu-hover-rule);
}
.pk-nav[data-pk-menu-mode="vertical"] .pk-nav-icon { width: var(--pk-nav-icon-size); height: var(--pk-nav-icon-size); }

/* --- horizontal — the app bar --- */
.pk-menu[data-pk-menu-mode="horizontal"],
.pk-nav[data-pk-menu-mode="horizontal"] { flex-direction: row; align-items: center; }
/* STCT-9490: a standalone FLAT menu (renderMenu) wraps its row instead of widening the page (3 items made a 390px
   page 481px wide). Only the flat menu: renderNav's bar folds into More and stays one row (STCT-8755). */
.pk-nav[data-pk-menu-flat][data-pk-menu-mode="horizontal"],
.pk-nav[data-pk-menu-flat][data-pk-menu-mode="centered"],
.pk-nav[data-pk-menu-flat][data-pk-menu-mode="icon-horizontal"] { flex-wrap: wrap; }
/* STCT-8735: a ROW nav may shrink below its content (min-width:0) and never exceeds its container;
   items keep their size and the overflow fold moves the tail into "More". */
.pk-nav[data-pk-menu-mode="horizontal"],
.pk-nav[data-pk-menu-mode="centered"],
.pk-nav[data-pk-menu-mode="icon-horizontal"] { min-width: 0; max-width: 100%; flex-wrap: nowrap; }
.pk-nav[data-pk-menu-mode="horizontal"] > .pk-nav-item,
.pk-nav[data-pk-menu-mode="centered"] > .pk-nav-item,
.pk-nav[data-pk-menu-mode="icon-horizontal"] > .pk-nav-item {
  flex: none;
  height: var(--pk-nav-item-h);
  padding: 0 var(--pk-pad-x);   /* a labelled row item: the brand's horizontal pad (tools-brands `.pk-appnav a { padding: 0 14px }`) */
  justify-content: center;
}

/* --- centered: same as horizontal, but the row centers within its container --- */
.pk-menu[data-pk-menu-mode="centered"],
.pk-nav[data-pk-menu-mode="centered"] {
  flex-direction: row; align-items: center; justify-content: center; margin: 0 auto;
}

/* --- icon-horizontal: horizontal + icon-only (label visually hidden, not display:none, so
       aria-label keeps it accessible) --- */
.pk-menu[data-pk-menu-mode="icon-horizontal"],
.pk-nav[data-pk-menu-mode="icon-horizontal"] { flex-direction: row; align-items: center; }
/* STCT-9618: the lozenge and the hidden label apply only to an item that HAS an icon. An item with none (no
   `icon`, a name that resolved to nothing) keeps its label at its natural width; hiding every label made the
   showcase's own specimen three invisible 44x36 links still in the tab order. The same rule as the labeling
   axis below ("an item with NO icon keeps its label"). Without :has() the label shows: fails visible. */
.pk-menu[data-pk-menu-mode="icon-horizontal"] .pk-menu-item:has(> .pk-menu-icon),
.pk-nav[data-pk-menu-mode="icon-horizontal"] .pk-nav-item:has(> .pk-nav-icon) {
  flex-direction: column; width: var(--pk-nav-item-w, 44px); height: var(--pk-nav-item-h, 36px); padding: 0;
}
/* the fallbacks below are STRUCTURAL (a 1px visually-hidden box), so the rule holds with no sheet loaded */
.pk-menu[data-pk-menu-mode="icon-horizontal"] .pk-menu-item:has(> .pk-menu-icon) .pk-menu-label,
.pk-nav[data-pk-menu-mode="icon-horizontal"] .pk-nav-item:has(> .pk-nav-icon) .pk-nav-label {
  position: absolute; width: var(--pk-stroke, 1px); height: var(--pk-stroke, 1px); overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* --- data-pk-menu-icons: off / on --- */
.pk-menu[data-pk-menu-icons="off"] .pk-menu-icon,
.pk-nav[data-pk-menu-icons="off"] .pk-nav-icon { display: none; }
.pk-menu[data-pk-menu-icons="on"] .pk-menu-icon,
.pk-nav[data-pk-menu-icons="on"] .pk-nav-icon { display: inline-block; }
.pk-menu[data-pk-menu-mode="icon-horizontal"] .pk-menu-icon,
.pk-nav[data-pk-menu-mode="icon-horizontal"] .pk-nav-icon { display: inline-block; }

/* --- data-pk-menu-labeling: the THREE-state axis (STCT-5849): icon | text | icon-text ---
     Orthogonal to mode; keyed on the root and a descendant. display:none here (the user ASKED for
     icon-only; the item still carries its aria-label from the renderer). --- */
.pk-menu[data-pk-menu-labeling="text"] .pk-menu-icon,
.pk-nav[data-pk-menu-labeling="text"] .pk-nav-icon { display: none; }
.pk-menu[data-pk-menu-labeling="icon"] .pk-menu-label,
.pk-nav[data-pk-menu-labeling="icon"] .pk-nav-label { display: none; }
/* an icon-only item in a ROW is the brand's lozenge: --pk-nav-item-w x --pk-nav-item-h (44 x 36 on
   skyten), the glyph centred — `.pk-appnav a` in the tools-brands reference */
.pk-nav[data-pk-menu-labeling="icon"]:not([data-pk-menu-mode="vertical"]) .pk-nav-item:has(> .pk-nav-icon) {
  justify-content: center;
  width: var(--pk-nav-item-w); height: var(--pk-nav-item-h); padding: 0;
}
/* …and an item with NO icon keeps its label rather than rendering as an empty button */
.pk-nav[data-pk-menu-labeling="icon"] .pk-nav-item:not(:has(> .pk-nav-icon)) .pk-nav-label { display: inline; }

/* --- submenu container: tabs-underline is the CSS mode; the tab family's tokens --- */
.pk-submenu[data-pk-submenu-mode="tabs-underline"],
.pk-nav-submenu[data-pk-submenu-mode="tabs-underline"] {
  display: flex; gap: var(--pk-tabs-gap);
  border-bottom: var(--pk-stroke) solid var(--pk-sem-border-primary);
}
.pk-submenu[data-pk-submenu-mode="tabs-underline"] .pk-menu-item,
.pk-nav-submenu[data-pk-submenu-mode="tabs-underline"] .pk-nav-item {
  padding: var(--pk-tabs-pad); border-radius: var(--pk-tabs-radius);
  color: var(--pk-tabs-fg); font-size: var(--pk-tabs-fs); font-weight: var(--pk-tabs-weight);
  background-image: none;
  border-bottom: var(--pk-tabs-rule-w) solid transparent;
  margin-bottom: calc(-1 * var(--pk-stroke)); /* sit on top of the container's border */
}
.pk-submenu[data-pk-submenu-mode="tabs-underline"] .pk-menu-item:hover,
.pk-nav-submenu[data-pk-submenu-mode="tabs-underline"] .pk-nav-item:hover { background: none; box-shadow: none; color: var(--pk-tabs-hover-fg); }
.pk-submenu[data-pk-submenu-mode="tabs-underline"] .pk-menu-item.pk-active,
.pk-nav-submenu[data-pk-submenu-mode="tabs-underline"] .pk-nav-item.pk-active {
  border-bottom-color: var(--pk-tabs-rule);
  color: var(--pk-tabs-active-fg); font-weight: var(--pk-tabs-active-weight);
  background: var(--pk-tabs-active-bg); box-shadow: none;
  /* STCT-9730: in parity with src/tabs/tabs.css — the label ink through the glyphs (the brand's ramp, else a flat
     layer of the label colour), the ramp strip over the flat rule (::after); `none` paints nothing */
  position: relative;
  background-image: var(--pk-tabs-active-gradient, none), linear-gradient(currentColor, currentColor), none;
  -webkit-background-clip: text, text, border-box; background-clip: text, text, border-box;
  -webkit-text-fill-color: transparent;
}
/* STCT-9938 (PM_Nft): PRINT. The label above is painted THROUGH its glyphs (a transparent fill over background layers),
   and a browser printing without background graphics (the default) drops those layers: the active label printed
   BLANK in every brand (0 ink vs 3519 for a plain label). In print it is a plain fill of its own colour; the ramp
   and the clip go (the clip reset keeps a pill's ground a ground when backgrounds DO print). */
@media print {
  .pk-submenu[data-pk-submenu-mode="tabs-underline"] .pk-menu-item.pk-active,
  .pk-nav-submenu[data-pk-submenu-mode="tabs-underline"] .pk-nav-item.pk-active { -webkit-text-fill-color: currentColor; background-image: none; -webkit-background-clip: border-box; background-clip: border-box; }
}
.pk-submenu[data-pk-submenu-mode="tabs-underline"] .pk-menu-item.pk-active::after,
.pk-nav-submenu[data-pk-submenu-mode="tabs-underline"] .pk-nav-item.pk-active::after {
  content: ""; position: absolute; left: 0; right: 0;
  bottom: calc(-1 * var(--pk-tabs-rule-w)); height: var(--pk-tabs-rule-w);
  background: var(--pk-tabs-rule-gradient, none); pointer-events: none;
}

/* --- STCT-8663: a COLLAPSED submenu is hidden (an author `display` beats the UA's [hidden] rule) --- */
.pk-nav-submenu[hidden] { display: none; }

/* --- STCT-8633: a NOT-YET-IMPLEMENTED entry: dim (1.4.3 exempts an inactive control) PLUS a cue that
       is not colour (1.4.1): a dashed underline on the label, and a not-allowed cursor. --- */
.pk-nav-item.pk-disabled { opacity: .55; cursor: not-allowed; }
.pk-nav-item.pk-disabled:hover { background: none; box-shadow: none; }
.pk-nav-item.pk-disabled .pk-nav-label { text-decoration: underline dashed; text-underline-offset: var(--pk-stroke-strong); }

/* ================================================================================================
   STCT-8664 — PHONE WIDTH. data-pk-menu-collapsed="drawer" | "rail" below the breakpoint; overflow
   folds a row that does not fit into "More". Appended LAST so these win at equal specificity.
   ================================================================================================ */

/* --- the hamburger (rendered only in the drawer state) --- */
.pk-nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--pk-nav-item-w); height: var(--pk-nav-item-h); flex: 0 0 auto; padding: 0;
  border: 0; border-radius: var(--pk-nav-item-radius); background: none; cursor: pointer;
  color: var(--pk-nav-fg);
}
.pk-nav-toggle:hover { background: var(--pk-nav-hover-bg); color: var(--pk-nav-hover-fg); }
.pk-nav-toggle .pk-nav-icon {
  width: var(--pk-nav-icon-size); height: var(--pk-nav-icon-size); background-color: currentColor;
  -webkit-mask: var(--pk-icon) center / contain no-repeat;
  mask: var(--pk-icon) center / contain no-repeat;
}
/* WEB-1533: the hamburger's glyph is the button's ONLY content, not an item icon, so the labeling and icons axes
   (which hide .pk-nav-icon in a text-only nav) must not hide it. A text-only bar collapsed to its drawer showed an
   empty menu button (measured on the trading website pilot at 390px). 0,4,0 beats both hide rules (0,3,0). */
.pk-nav[data-pk-menu-labeling] .pk-nav-toggle .pk-nav-icon,
.pk-nav[data-pk-menu-icons] .pk-nav-toggle .pk-nav-icon { display: block; }

/* --- drawer / popup, closed: only the hamburger shows --- */
.pk-nav[data-pk-menu-collapsed="drawer"],
.pk-nav[data-pk-menu-collapsed="popup"] { flex-direction: row; align-items: center; }
.pk-nav[data-pk-menu-collapsed="drawer"]:not([data-pk-drawer-open]) > :not(.pk-nav-toggle),
.pk-nav[data-pk-menu-collapsed="popup"]:not([data-pk-drawer-open]) > :not(.pk-nav-toggle) { display: none; }

/* --- STCT-8994 popup, open: a CARD hung under the trigger, on the brand's menu surface with its radius and
   shadow (the tools-brands `popup` kind — the user menu hung under the avatar). Absolute WITHOUT an inset,
   so it hangs from the trigger's own place in the bar; no scrim, the page stays where it is. --- */
.pk-nav[data-pk-menu-collapsed="popup"][data-pk-drawer-open] {
  position: absolute; inset: auto; z-index: 1000;
  width: max-content; min-width: var(--pk-rail-width); max-height: calc(100dvh - 2 * var(--pk-appbar-height)); overflow-y: auto;
  /* STCT-8994: never wider than the viewport minus a gutter each side; renderNav clamps the exact left/right on
     open (placePopup: aligned to the trigger's place, pulled inside the viewport, spanning at phone width) */
  max-width: calc(100vw - 2 * var(--pk-space-sm)); box-sizing: border-box;
  flex-direction: column; align-items: stretch; gap: 0;
  padding: var(--pk-space-xs);
  background: var(--pk-menu-bg);
  border: var(--pk-stroke) solid var(--pk-sem-border-primary);
  border-radius: var(--pk-menu-radius);
  box-shadow: var(--pk-menu-shadow);
}

/* --- drawer, open: a side panel over the page (the brand's menu surface); the page behind is scrimmed --- */
.pk-nav[data-pk-drawer-open] {
  position: fixed; inset: 0 auto 0 0; z-index: 1000;
  width: min(85vw, var(--pk-rail-width)); overflow-y: auto;
  flex-direction: column; align-items: stretch; gap: 0;
  padding: var(--pk-space-sm);
  background: var(--pk-menu-bg);
  box-shadow: 0 0 0 100vmax var(--pk-sem-nav-scrim);
}
.pk-nav[data-pk-drawer-open] > .pk-nav-toggle { align-self: flex-start; }
/* in the drawer every item reads as a full row with its label — the vertical menu's look — whatever the
   configured mode; the second selector outranks the icon-only lozenge rule (STCT-8755) */
.pk-nav[data-pk-drawer-open] .pk-nav-item,
.pk-nav[data-pk-drawer-open][data-pk-menu-labeling="icon"] .pk-nav-item:has(> .pk-nav-icon) {
  flex-direction: row; justify-content: flex-start; padding: var(--pk-menu-item-pad); width: auto; height: auto; aspect-ratio: auto;
  font-size: var(--pk-menu-item-fs); color: var(--pk-menu-item-fg); border-radius: 0; background-image: none; box-shadow: none;
  /* the brand's menu hover rule above and below the item (--pk-menu-hover-rule/-w; skyten: 1px arctic),
     transparent at rest so the item does not move — the same as the vertical menu (STCT-9098) */
  border-top: var(--pk-menu-hover-rule-w) solid transparent;
  border-bottom: var(--pk-menu-hover-rule-w) solid transparent;
}
.pk-nav[data-pk-drawer-open] .pk-nav-item:hover {
  background-color: var(--pk-menu-hover-bg);
  border-top-color: var(--pk-menu-hover-rule); border-bottom-color: var(--pk-menu-hover-rule);
}
.pk-nav[data-pk-drawer-open] .pk-nav-item.pk-active {
  background-color: var(--pk-menu-active-bg); color: var(--pk-menu-active-fg);
  border-top-color: var(--pk-menu-hover-rule); border-bottom-color: var(--pk-menu-hover-rule);
}
.pk-nav[data-pk-drawer-open] .pk-nav-label {
  display: inline; position: static; width: auto; height: auto; overflow: visible; clip: auto;
  clip-path: none; margin: 0;
}

/* --- rail: icons only (labels stay for assistive tech, like icon-horizontal) --- */
.pk-nav[data-pk-menu-collapsed="rail"] .pk-nav-icon { display: inline-block; }
.pk-nav[data-pk-menu-collapsed="rail"] .pk-nav-label {
  position: absolute; width: var(--pk-stroke, 1px); height: var(--pk-stroke, 1px); overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.pk-nav[data-pk-menu-collapsed="rail"] .pk-nav-item { justify-content: center; width: var(--pk-nav-item-w); height: var(--pk-nav-item-h); padding: 0; }

/* --- in a ROW, a submenu is a POPOVER (the "More" of a folded bar) on the brand's menu surface --- */
.pk-nav:not([data-pk-menu-mode="vertical"]):not([data-pk-drawer-open]) { position: relative; }
/* ⚠ `:not([hidden])` is load-bearing: the two :not() above raise this rule to (0,4,0), which would
   otherwise beat `.pk-nav-submenu[hidden]` and show every "More" OPEN at page load. */
.pk-nav:not([data-pk-menu-mode="vertical"]):not([data-pk-drawer-open]) > .pk-nav-submenu:not([hidden]) {
  position: absolute; top: 100%; right: 0; z-index: 20;
  display: flex; flex-direction: column; min-width: var(--pk-rail-width);
  padding: var(--pk-space-xs);
  background: var(--pk-menu-bg);
  border: var(--pk-stroke) solid var(--pk-sem-border-primary);
  border-radius: var(--pk-menu-radius);
  box-shadow: var(--pk-menu-shadow);
  /* never taller than the screen — a long "More" scrolls inside itself (renderNav sets the exact room on open) */
  max-height: calc(100dvh - 2 * var(--pk-appbar-height)); overflow-y: auto; overscroll-behavior: contain;
  box-sizing: border-box;
}
.pk-nav:not([data-pk-menu-mode="vertical"]):not([data-pk-drawer-open]) > .pk-nav-submenu .pk-nav-label {
  display: inline; position: static; width: auto; height: auto; overflow: visible; clip: auto;
  clip-path: none; margin: 0;
}
/* every entry in the popover is a full ROW — icon then name — in the vertical menu's look, whatever
   the bar's labeling or mode (the icon-only choice is about the bar, not about a list that exists to be read) */
.pk-nav:not([data-pk-menu-mode="vertical"]):not([data-pk-drawer-open]) > .pk-nav-submenu .pk-nav-item {
  flex-direction: row; justify-content: flex-start; gap: var(--pk-nav-item-gap);
  width: auto; height: auto; aspect-ratio: auto; padding: var(--pk-menu-item-pad);
  font-size: var(--pk-menu-item-fs); color: var(--pk-menu-item-fg); border-radius: 0;
  background-image: none; box-shadow: none;
  /* the brand's menu hover rule above and below the row (--pk-menu-hover-rule/-w; skyten: 1px arctic),
     transparent at rest so the row does not move — the same as the vertical menu (STCT-9098) */
  border-top: var(--pk-menu-hover-rule-w) solid transparent;
  border-bottom: var(--pk-menu-hover-rule-w) solid transparent;
}
.pk-nav:not([data-pk-menu-mode="vertical"]):not([data-pk-drawer-open]) > .pk-nav-submenu .pk-nav-item:hover {
  background-color: var(--pk-menu-hover-bg);
  border-top-color: var(--pk-menu-hover-rule); border-bottom-color: var(--pk-menu-hover-rule);
}
.pk-nav:not([data-pk-menu-mode="vertical"]):not([data-pk-drawer-open]) > .pk-nav-submenu .pk-nav-item.pk-active {
  background-color: var(--pk-menu-active-bg); color: var(--pk-menu-active-fg);
  border-top-color: var(--pk-menu-hover-rule); border-bottom-color: var(--pk-menu-hover-rule);
}
.pk-nav:not([data-pk-menu-mode="vertical"]):not([data-pk-drawer-open]) > .pk-nav-submenu .pk-nav-icon {
  display: inline-block;
}
/* a collapsed ICON RAIL is a phone bar: its "More" popover spans the viewport under the bar (fixed,
   the brand's gutter each side) — anchored to the 44px item it ran off-screen either way at 375px and
   scrolled the page sideways, which made every folded page unreachable (STCT-8770) */
/* …a ROW's icon rail only: in a VERTICAL rail collapsed to icons a group's list stays inline — the fixed panel
   covered the groups below it (STCT-8838, measured: 13 pages unreachable at 390px) */
.pk-nav[data-pk-menu-collapsed="rail"]:not([data-pk-drawer-open]):not([data-pk-menu-mode="vertical"]) > .pk-nav-submenu:not([hidden]) {
  position: fixed; top: var(--pk-appbar-height); left: var(--pk-space-sm); right: var(--pk-space-sm);
  min-width: 0; max-width: none; max-height: calc(100dvh - var(--pk-appbar-height) - var(--pk-space-sm));
}
/* a row parent whose popover holds the current page is marked like the active item itself */
.pk-nav-item[data-pk-contains-active] {
  color: var(--pk-nav-active-fg);
  background-color: var(--pk-nav-active-bg);
  box-shadow: none;   /* STCT-9218: the underline is the ::after rule below, never clipped by the item radius */
  --pk-nav-rule: var(--pk-nav-underline); --pk-nav-rule-w: var(--pk-nav-underline-w);
}

/* --- STCT-8651: the ACTIVE-INDICATOR axis, data-pk-menu-active on .pk-nav — an APP's override of the
   brand default above. Absent = the brand's own tokens. Every value paints a brand token:
     fill      --pk-nav-fill-bg / -fg (the brand's contrast-guarded fill pair)
     tint      --pk-secondary-bg (the brand's tint surface) with the brand's active text
     underline --pk-tabs-rule (the brand's rule colour) under the item, no fill
     none      no marker but the weight (aria-current stays)                                           --- */
.pk-nav[data-pk-menu-active="tint"] .pk-nav-item.pk-active,
.pk-nav[data-pk-menu-active="tint"] .pk-nav-item[data-pk-contains-active] {
  background-color: var(--pk-secondary-bg); box-shadow: none; color: var(--pk-text-primary);
}
.pk-nav[data-pk-menu-active="underline"] .pk-nav-item.pk-active,
.pk-nav[data-pk-menu-active="underline"] .pk-nav-item[data-pk-contains-active] {
  background-color: transparent;
  box-shadow: none;   /* STCT-9218: the ::after rule, straight, never clipped by the item radius */
  --pk-nav-rule: var(--pk-tabs-rule); --pk-nav-rule-w: var(--pk-tabs-rule-w);
  /* STCT-8838: the bar's INK (--pk-text-primary), not the resting glyph colour — --pk-nav-fg is #929497 on
     skyten's #E9E9E9 bar, 2.5:1; an active page must read at 4.5:1 (the menu-options probe measures it) */
  color: var(--pk-text-primary);
}
.pk-nav[data-pk-menu-active="underline"][data-pk-menu-mode="vertical"] .pk-nav-item.pk-active::after {
  inset: 0 auto 0 0; width: var(--pk-nav-rule-w); height: auto;   /* the leading-edge rule, straight */
}
.pk-nav[data-pk-menu-active="none"] .pk-nav-item.pk-active,
.pk-nav[data-pk-menu-active="none"] .pk-nav-item[data-pk-contains-active] { background-color: transparent; box-shadow: none; color: var(--pk-text-primary); }
.pk-nav[data-pk-menu-active="fill"] .pk-nav-item.pk-active,
.pk-nav[data-pk-menu-active="fill"] .pk-nav-item[data-pk-contains-active] {
  background-color: var(--pk-nav-fill-bg); box-shadow: none; color: var(--pk-nav-fill-fg);
}
/* WEB-1540 — ink: the current item takes the HOVER ink and nothing else (no fill, no rule): skytraders.trading marks
   the current section exactly as it marks hover. The website kind's own rule is below, with the website tokens. */
.pk-nav[data-pk-menu-active="ink"] .pk-nav-item.pk-active,
.pk-nav[data-pk-menu-active="ink"] .pk-nav-item[data-pk-contains-active] {
  background-color: transparent; background-image: none; box-shadow: none; color: var(--pk-nav-hover-fg);
}

/* ================================================================================================
   STCT-8838 — THE REMAINING MENU OPTIONS, each a data hook the renderer stamps, each painted from a
   brand token (operator rule: no invented values).
   ================================================================================================ */

/* --- data-pk-menu-hover on .pk-nav: an APP's override of the brand's hover (--pk-nav-hover-*). The
       same four kinds as the active axis, from the same tokens; the active item keeps its own look. --- */
.pk-nav[data-pk-menu-hover="none"] .pk-nav-item:not(.pk-active):hover {
  background-color: transparent; background-image: none; color: var(--pk-nav-fg);
  border-top-color: transparent; border-bottom-color: transparent;
}
.pk-nav[data-pk-menu-hover="tint"] .pk-nav-item:not(.pk-active):hover {
  background-color: var(--pk-secondary-bg); background-image: none; color: var(--pk-nav-active-fg);
}
.pk-nav[data-pk-menu-hover="fill"] .pk-nav-item:not(.pk-active):hover {
  background-color: var(--pk-nav-fill-bg); background-image: none; color: var(--pk-nav-fill-fg);
}
.pk-nav[data-pk-menu-hover="underline"] .pk-nav-item:not(.pk-active):hover {
  background-color: transparent; color: var(--pk-nav-fg);
  background-image: linear-gradient(var(--pk-tabs-rule), var(--pk-tabs-rule));
  background-size: 100% var(--pk-tabs-rule-w);
}
/* --- data-pk-menu-glow: the brand's --pk-nav-hover-glow forced on or off (absent = as the brand paints it) --- */
.pk-nav[data-pk-menu-glow="off"] .pk-nav-item:hover { box-shadow: none; }
.pk-nav[data-pk-menu-glow="on"] .pk-nav-item:not(.pk-active):hover { box-shadow: var(--pk-nav-hover-glow); }

/* --- data-pk-labeling on ONE item (the "More" item, overflow.labeling): its own variant, whatever
       the bar's axis says. `> .pk-nav-label` outranks the axis rules on the root. --- */
.pk-nav .pk-nav-item[data-pk-labeling="icon"] > .pk-nav-label { display: none; }
.pk-nav .pk-nav-item[data-pk-labeling="text"] > .pk-nav-icon { display: none; }
.pk-nav .pk-nav-item[data-pk-labeling="icon-text"] > .pk-nav-icon { display: inline-block; }
.pk-nav .pk-nav-item[data-pk-labeling="icon-text"] > .pk-nav-label,
.pk-nav .pk-nav-item[data-pk-labeling="text"] > .pk-nav-label {
  display: inline; position: static; width: auto; height: auto; overflow: visible; clip: auto;
}
/* a labelled "More" in an icon-only row is a labelled row item, not a 44px lozenge */
.pk-nav[data-pk-menu-labeling="icon"]:not([data-pk-menu-mode="vertical"]) .pk-nav-item[data-pk-labeling="icon-text"],
.pk-nav[data-pk-menu-labeling="icon"]:not([data-pk-menu-mode="vertical"]) .pk-nav-item[data-pk-labeling="text"],
.pk-nav[data-pk-menu-mode="icon-horizontal"] .pk-nav-item[data-pk-labeling="icon-text"],
.pk-nav[data-pk-menu-mode="icon-horizontal"] .pk-nav-item[data-pk-labeling="text"] {
  flex-direction: row; width: auto; height: var(--pk-nav-item-h); padding: 0 var(--pk-pad-x);
}
/* …and an icon-only "More" in a labelled row is the lozenge */
.pk-nav:not([data-pk-menu-mode="vertical"]) .pk-nav-item[data-pk-labeling="icon"]:has(> .pk-nav-icon) {
  justify-content: center; width: var(--pk-nav-item-w); height: var(--pk-nav-item-h); padding: 0;
}

/* --- data-pk-submenu-mode="expanded" | "accordion" | "collapsible" in a COLUMN: the group's children
       are a nested list, indented by the brand's item pad (the vertical menu's own geometry) --- */
.pk-nav[data-pk-menu-mode="vertical"] > .pk-nav-submenu:not([data-pk-submenu-mode="tabs-underline"]) .pk-nav-item,
.pk-nav[data-pk-drawer-open] > .pk-nav-submenu:not([data-pk-submenu-mode="tabs-underline"]) .pk-nav-item {
  padding-left: calc(2 * var(--pk-nav-item-gap) + var(--pk-nav-icon-size));
}
/* a column parent that holds the current page (open or closed) is marked like the active item */
.pk-nav[data-pk-menu-mode="vertical"] > .pk-nav-item[aria-expanded] { justify-content: flex-start; }

/* --- tabs-underline INSIDE a column (rail / drawer): the brand's tab strip under the group heading --- */
.pk-nav[data-pk-menu-mode="vertical"] > .pk-nav-submenu[data-pk-submenu-mode="tabs-underline"] {
  display: flex; flex-wrap: wrap; gap: var(--pk-tabs-gap);
  padding: 0 var(--pk-nav-item-gap);
  border-bottom: var(--pk-stroke) solid var(--pk-sem-border-primary);
}
.pk-nav[data-pk-menu-mode="vertical"] > .pk-nav-submenu[data-pk-submenu-mode="tabs-underline"] .pk-nav-item {
  padding: var(--pk-tabs-pad); border-top: 0; border-bottom: var(--pk-tabs-rule-w) solid transparent;
  color: var(--pk-tabs-fg); font-size: var(--pk-tabs-fs); background: none;
}
.pk-nav[data-pk-menu-mode="vertical"] > .pk-nav-submenu[data-pk-submenu-mode="tabs-underline"] .pk-nav-item.pk-active {
  border-bottom-color: var(--pk-tabs-rule); color: var(--pk-tabs-active-fg); background: var(--pk-tabs-active-bg);
}

/* a CLOSED drawer shows its hamburger and nothing else — the tabs-underline rule above set display on its
   submenus and painted 69 items in a 1613px row at 390px (STCT-8838, measured).
   ⚠ `:not([hidden])` is load-bearing (STCT-8994, operator image 168): the row-popover rule
   (`…:not([data-pk-drawer-open]) > .pk-nav-submenu:not([hidden])`, 0,5,0) outranked this one at 0,4,0, so the
   group that holds the current page — opened at load, never `hidden` — painted as a stray popover card hung from
   the closed hamburger's RIGHT edge, 230px wide, i.e. at x = -103 on a 390px phone: the "popup outside the
   screen". At equal specificity this later rule wins. */
.pk-nav[data-pk-menu-collapsed="drawer"]:not([data-pk-drawer-open]) > .pk-nav-submenu:not([hidden]),
.pk-nav[data-pk-menu-collapsed="popup"]:not([data-pk-drawer-open]) > .pk-nav-submenu:not([hidden]) { display: none; }
/* the open drawer is a column from the top: the centred mode's justify-content: center overflowed a long
   list BOTH ways (the first items at y = -274, measured at 390px) */
.pk-nav[data-pk-drawer-open] { justify-content: flex-start; }

/* ================================================================================================
   STCT-8838 / STCT-9053 — THE WEBSITE MENU (data-pk-webnav-layout on .pk-nav): the brand seed's
   components.nav.website, vendored as the --pk-webnav-* set (brand contract foundation-1.2). skyten's is
   skytraders.trading's logo-left header: 13px / 400 items in #D4D4D4, 28px apart, no padding, arctic on hover,
   the navy "Apply now" pill last. Every value below is a vendored token; a brand that describes no website
   bar gets, from tools-brands, the tokens this menu was painted with before (its app bar, page ink, tab rule
   and primary button pair), so nothing moved for it. ONLY the website kind reads --pk-webnav-*: the
   application bar (no data-pk-webnav-layout) is untouched.
   ================================================================================================ */
.pk-nav[data-pk-webnav-layout] {
  gap: var(--pk-webnav-gap);
  font-size: var(--pk-webnav-fs);
  color: var(--pk-webnav-fg);
}
/* ⛔ CONTENT-SIZED, never justify-content on a full-width row: items pushed to the end (or centred) overflow
   on the START side, where scrollWidth cannot see them, and the fold never ran — measured: nine groups at
   x = -613 on a 290px nav. A fit-content nav overflows at its end, the fold sees it, and the auto margins place it. */
/* ⛔ NOT width: fit-content either: a content-sized nav never overflows ITSELF, so the fold saw a fit while the
   row ran under the account cluster (measured: the CTA over "Balance"). As a shrinkable flex item of its host
   (flex 0 1 auto, min-width 0) the nav is content-wide when there is room and host-wide — overflowing, so the
   fold runs — when there is not; the host's justify-content (app-shell.css) places it. */
.pk-nav[data-pk-webnav-layout] { flex: 0 1 auto; width: auto; min-width: 0; max-width: 100%; justify-content: flex-start; }
/* STCT-9225: logo-left means the items sit RIGHT, against the actions — a row in the `centered` mode (the showcase's
   website kind) kept its `margin: 0 auto` on the other side and floated to the middle of the slot */
.pk-nav[data-pk-webnav-layout="logo-left"] { margin-left: auto; margin-right: 0; }
.pk-nav[data-pk-webnav-layout="logo-right"] { margin-right: auto; margin-left: 0; }
.pk-nav[data-pk-webnav-layout="split-centre"] { margin-left: auto; margin-right: auto; }
/* STCT-9228: centred-group — the nav is the middle member of ONE centred group (logo, menu, actions); the shell
   bar spreads the group (app-shell.css), the nav itself keeps no auto margin */
.pk-nav[data-pk-webnav-layout="centred-group"] { margin-left: 0; margin-right: 0; }
.pk-nav[data-pk-webnav-layout] > .pk-nav-item:not(.pk-nav-cta) {
  padding: 0 var(--pk-webnav-item-pad-x); width: auto; height: auto;
  font-size: var(--pk-webnav-fs);
  font-weight: var(--pk-webnav-weight);
  color: var(--pk-webnav-fg);
  background-color: transparent; box-shadow: none; border-radius: 0;
  background-image: none;
}
.pk-nav[data-pk-webnav-layout] > .pk-nav-item:not(.pk-nav-cta):hover {
  color: var(--pk-webnav-hover-fg);
  background-color: transparent; box-shadow: none;
}
/* active = the thin underline, offset below the text (skyten: 1px, offset 14px, at the resting weight) */
.pk-nav[data-pk-webnav-layout] > .pk-nav-item.pk-active:not(.pk-nav-cta),
.pk-nav[data-pk-webnav-layout] > .pk-nav-item[data-pk-contains-active]:not(.pk-nav-cta) {
  background-color: transparent; box-shadow: none;
  color: var(--pk-webnav-active-fg);
  font-weight: var(--pk-webnav-active-weight);
  text-decoration: underline;
  text-decoration-thickness: var(--pk-webnav-underline-w);
  text-decoration-color: var(--pk-webnav-underline);
  text-underline-offset: var(--pk-webnav-underline-offset);
}
/* WEB-1540 — an app's explicit indicator wins over the website's underline. `none`: no marker (the underline was never
   reset: this rule outranks the generic 'none' rule, which sets no text-decoration). `ink`: the website hover ink,
   no underline — skytraders.trading, measured 2026-10-10: the current section is arctic, as on hover. */
.pk-nav[data-pk-webnav-layout][data-pk-menu-active="none"] > .pk-nav-item.pk-active:not(.pk-nav-cta),
.pk-nav[data-pk-webnav-layout][data-pk-menu-active="none"] > .pk-nav-item[data-pk-contains-active]:not(.pk-nav-cta) {
  text-decoration: none; color: var(--pk-webnav-fg);
}
.pk-nav[data-pk-webnav-layout][data-pk-menu-active="ink"] > .pk-nav-item.pk-active:not(.pk-nav-cta),
.pk-nav[data-pk-webnav-layout][data-pk-menu-active="ink"] > .pk-nav-item[data-pk-contains-active]:not(.pk-nav-cta) {
  text-decoration: none; color: var(--pk-webnav-hover-fg);
}
/* WEB-1551 (found by rendering every value in the showcase): 'tint' and 'fill' were silently the website underline.
   The website's base active rule above (0,5,0) out-ranked the app rules (0,4,0), so a website menu with active: 'tint'
   or 'fill' painted no tint and no fill. These rules paint the SAME brand tokens the app rules use, without the
   website underline. And 'underline' keeps ONE mark: the website's own text underline; the app's ::after rule, which
   painted a second 2px line under it, is cleared. */
.pk-nav[data-pk-webnav-layout][data-pk-menu-active="tint"] > .pk-nav-item.pk-active:not(.pk-nav-cta),
.pk-nav[data-pk-webnav-layout][data-pk-menu-active="tint"] > .pk-nav-item[data-pk-contains-active]:not(.pk-nav-cta) {
  text-decoration: none; background-color: var(--pk-secondary-bg); color: var(--pk-text-primary);
}
.pk-nav[data-pk-webnav-layout][data-pk-menu-active="fill"] > .pk-nav-item.pk-active:not(.pk-nav-cta),
.pk-nav[data-pk-webnav-layout][data-pk-menu-active="fill"] > .pk-nav-item[data-pk-contains-active]:not(.pk-nav-cta) {
  text-decoration: none; background-color: var(--pk-nav-fill-bg); color: var(--pk-nav-fill-fg);
}
.pk-nav[data-pk-webnav-layout][data-pk-menu-active="underline"] > .pk-nav-item.pk-active:not(.pk-nav-cta),
.pk-nav[data-pk-webnav-layout][data-pk-menu-active="underline"] > .pk-nav-item[data-pk-contains-active]:not(.pk-nav-cta) {
  --pk-nav-rule: transparent;
}
/* STCT-9053: the label's overflow:hidden (the ellipsis of a squeezed item) CLIPPED that underline — it sits
   --pk-webnav-underline-offset below the text, outside the label's box (measured: skyten's 14px rule was
   computed and never painted). A website item is content-wide and the row folds into "More" instead of
   squeezing it, so the label has nothing to ellipsize and may paint outside itself. */
.pk-nav[data-pk-webnav-layout] > .pk-nav-item:not(.pk-nav-cta) .pk-nav-label { overflow: visible; }
/* the CTA: the brand's pill button as the last item ("Apply now"). Outside a website menu it is the brand's
   PRIMARY button pair; inside one (below) the website's own pill (--pk-webnav-cta-*). */
.pk-nav-item.pk-nav-cta {
  background-color: var(--pk-primary);
  color: var(--pk-on-primary);
  border-radius: var(--pk-button-radius, var(--pk-radius-button));
  padding: var(--pk-pad-y-sm) var(--pk-pad-x);
  font-weight: var(--pk-nav-active-weight);
  box-shadow: none; background-image: none;
}
.pk-nav-item.pk-nav-cta:hover { color: var(--pk-on-primary); background-color: var(--pk-primary); box-shadow: none; }
.pk-nav-item.pk-nav-cta .pk-nav-label { display: inline; position: static; width: auto; height: auto; overflow: visible; clip: auto; }
.pk-nav-item.pk-nav-cta .pk-nav-icon { display: none; }
.pk-nav[data-pk-menu-mode="icon-horizontal"] .pk-nav-item.pk-nav-cta,
.pk-nav[data-pk-menu-labeling="icon"]:not([data-pk-menu-mode="vertical"]) .pk-nav-item.pk-nav-cta:has(> .pk-nav-icon) {
  flex-direction: row; width: auto; height: var(--pk-nav-item-h); padding: 0 var(--pk-pad-x);
}

/* the CTA keeps its pill in the DRAWER and the phone RAIL too (their item rules are as specific as .pk-nav-cta's
   and come later — the drawer painted the CTA's label in the menu ink over the primary fill, 2.1:1; the rail
   squeezed it to a 44px lozenge under a 102px label) */
.pk-nav .pk-nav-item.pk-nav-cta,
.pk-nav[data-pk-drawer-open] .pk-nav-item.pk-nav-cta,
.pk-nav[data-pk-menu-collapsed="rail"] .pk-nav-item.pk-nav-cta,
.pk-nav:not([data-pk-menu-mode="vertical"]):not([data-pk-drawer-open]) > .pk-nav-submenu .pk-nav-item.pk-nav-cta {   /* …and folded into "More" (axe: 1.26:1 before) */
  color: var(--pk-on-primary); background-color: var(--pk-primary); border-radius: var(--pk-button-radius, var(--pk-radius-button));
  width: auto; padding: var(--pk-pad-y-sm) var(--pk-pad-x); justify-content: center;
}
.pk-nav .pk-nav-item.pk-nav-cta:hover,
.pk-nav:not([data-pk-menu-mode="vertical"]):not([data-pk-drawer-open]) > .pk-nav-submenu .pk-nav-item.pk-nav-cta:hover { color: var(--pk-on-primary); background-color: var(--pk-primary); }
/* STCT-9053: in a WEBSITE menu the CTA is the website's pill — skyten: #383B5B / #49BAE4, 13px / 700, 30px high,
   0 16px, 999px; #E0F6FF / #0090C9 on hover. Same selectors as above behind [data-pk-webnav-layout], so it wins. */
.pk-nav[data-pk-webnav-layout] .pk-nav-item.pk-nav-cta,
.pk-nav[data-pk-webnav-layout][data-pk-drawer-open] .pk-nav-item.pk-nav-cta,
.pk-nav[data-pk-webnav-layout][data-pk-menu-collapsed="rail"] .pk-nav-item.pk-nav-cta,
.pk-nav[data-pk-webnav-layout]:not([data-pk-menu-mode="vertical"]):not([data-pk-drawer-open]) > .pk-nav-submenu .pk-nav-item.pk-nav-cta {
  color: var(--pk-webnav-cta-fg); background-color: var(--pk-webnav-cta-bg); border-radius: var(--pk-webnav-cta-radius);
  font-size: var(--pk-webnav-cta-fs); font-weight: var(--pk-webnav-cta-weight);
  /* a stated height is the pill's OUTER height (border-box); a brand that states none keeps auto + its padding */
  box-sizing: border-box; height: var(--pk-webnav-cta-height);
  padding: var(--pk-pad-y-sm) var(--pk-webnav-cta-pad-x);
  background-image: var(--pk-webnav-cta-bg-image, none);   /* STCT-9229: a gradient CTA (qc3's ramp) */
}
.pk-nav[data-pk-webnav-layout] .pk-nav-item.pk-nav-cta:hover,
.pk-nav[data-pk-webnav-layout]:not([data-pk-menu-mode="vertical"]):not([data-pk-drawer-open]) > .pk-nav-submenu .pk-nav-item.pk-nav-cta:hover {
  color: var(--pk-webnav-cta-hover-fg); background-color: var(--pk-webnav-cta-hover-bg);
  background-image: var(--pk-webnav-cta-hover-bg-image, none);
}
/* WEB-1555: PRESSED (--pk-webnav-cta-pressed-bg, optional; unstated = the hover fill it painted before) */
.pk-nav[data-pk-webnav-layout] .pk-nav-item.pk-nav-cta:active,
.pk-nav[data-pk-webnav-layout]:not([data-pk-menu-mode="vertical"]):not([data-pk-drawer-open]) > .pk-nav-submenu .pk-nav-item.pk-nav-cta:active {
  color: var(--pk-webnav-cta-hover-fg); background-color: var(--pk-webnav-cta-pressed-bg, var(--pk-webnav-cta-hover-bg));
}
.pk-nav .pk-nav-item.pk-nav-cta .pk-nav-label { display: inline; position: static; width: auto; height: auto; overflow: visible; clip: auto; }
/* the CTA's label shows in an ICON bar too (the label rules of the icon axis and icon-horizontal are as specific) */
.pk-nav[data-pk-menu-labeling="icon"] .pk-nav-item.pk-nav-cta .pk-nav-label,
.pk-nav[data-pk-menu-mode="icon-horizontal"] .pk-nav-item.pk-nav-cta .pk-nav-label,
.pk-nav[data-pk-menu-collapsed="rail"] .pk-nav-item.pk-nav-cta .pk-nav-label {
  display: inline; position: static; width: auto; height: auto; overflow: visible; clip: auto;
}
/* re-assert last: a collapsed submenu stays hidden even where the rules above set display */
.pk-nav-submenu[hidden] { display: none; }

/* STCT-9050: a COUNT on a nav item (item.badge / nav.setBadge). The brand's badge pair per tone
   (--pk-badge-<tone>-bg/-fg, written by every theme); the pill is aria-hidden and the item's name carries it. */
.pk-nav-badge {
  display: inline-flex;
  align-items: center;
  margin-inline-start: var(--pk-space-xs);
  padding: var(--pk-badge-pad);
  border-radius: var(--pk-badge-radius);
  font-size: var(--pk-badge-fs);
  font-weight: var(--pk-badge-weight);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  background: var(--pk-badge-neutral-bg);
  color: var(--pk-badge-neutral-fg);
}
.pk-nav-badge[data-pk-tone="info"] { background: var(--pk-badge-info-bg); color: var(--pk-badge-info-fg); }
.pk-nav-badge[data-pk-tone="success"] { background: var(--pk-badge-success-bg); color: var(--pk-badge-success-fg); }
.pk-nav-badge[data-pk-tone="warning"] { background: var(--pk-badge-warning-bg); color: var(--pk-badge-warning-fg); }
.pk-nav-badge[data-pk-tone="danger"] { background: var(--pk-badge-danger-bg); color: var(--pk-badge-danger-fg); }
/* an icon-only bar has no label to sit beside: the count sits on the icon's corner */
.pk-nav[data-pk-menu-labeling="icon"] .pk-nav-item[data-pk-badge] { position: relative; }
.pk-nav[data-pk-menu-labeling="icon"] .pk-nav-badge {
  position: absolute;
  inset-block-start: calc(-1 * var(--pk-space-xs));
  inset-inline-end: calc(-1 * var(--pk-space-xs));
  margin: 0;
}

/* STCT-9063 (microsoft, operator image 204 "Explore ⌄"): a PARENT item announces its submenu with the
   bundled chevron-down after its label — the label's ink and size, the brand's icon box, turned while the
   submenu is open. Keyed on data-pk-submenu-indicator="chevron" (the brand contract's
   nav.application.submenuIndicator); renderNav sets --pk-nav-submenu-icon (the icon mask) with the value.
   On the LABEL's ::after, not the item's: the item's ::after is the active underline (STCT-9218). */
.pk-nav[data-pk-submenu-indicator="chevron"] .pk-nav-item[aria-expanded] > .pk-nav-label::after {
  content: ""; display: inline-block; vertical-align: middle;
  width: var(--pk-nav-icon-size); height: var(--pk-nav-icon-size); margin-left: var(--pk-space-xs);
  background: currentColor;
  -webkit-mask: var(--pk-nav-submenu-icon) center / contain no-repeat;
  mask: var(--pk-nav-submenu-icon) center / contain no-repeat;
}
.pk-nav[data-pk-submenu-indicator="chevron"] .pk-nav-item[aria-expanded="true"] > .pk-nav-label::after { transform: rotate(180deg); }

/* STCT-9218 (operator, images 100 / 107): the ACTIVE underline is its OWN element under the item — a
   straight rule of the brand's token and width. As an inset shadow it followed the corner radius, and as a
   background it was clipped by a pill (999px) into a tapered arc: both read as a "bracket" no brand defines. */
.pk-nav-item.pk-active, .pk-nav-item[data-pk-contains-active] { position: relative; }
.pk-nav-item.pk-active::after, .pk-nav-item[data-pk-contains-active]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: var(--pk-nav-rule-w, 0); background: var(--pk-nav-rule, transparent); pointer-events: none;
}

/* ==== src/menu-modes/nav-shared.css ==== */
/* @paprika/skyten-foundation — THE SHARED NAV APPEARANCE (WEB-1113), on the BRAND CONTRACT (STCT-8770).
 *
 * ⛔ WHAT THIS IS AND WHAT IT CANNOT DO. This sheet decides APPEARANCE only. It styles the
 * class vocabulary the surfaces already emit (.pk-nav-item, .pk-nav-item.pk-active, .pk-nav-section-*,
 * .pk-nav-label, .pk-nav-icon — tools-skyten-admin and webapp-optionssimulator); it renders nothing
 * and wires nothing. nav-engine EMITS NO DOM; a surface adopting the engine alone changes no appearance.
 *
 * The values are the brand's VERTICAL MENU family (--pk-menu-*) and its section type; nothing here is
 * invented. LAYERING — see CASCADE.md. A layered shared sheet LOSES to unlayered surface CSS, so a
 * surface wraps its own nav CSS in @layer legacy before loading this.
 */
@layer legacy, skytraders-nav;

@layer skytraders-nav {
  /* ---- items ------------------------------------------------------------------ */
  .pk-nav-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pk-nav-item-gap, 12px);
    padding: var(--pk-menu-item-pad, 11px 22px);
    border: none;
    border-top: var(--pk-menu-hover-rule-w, 1px) solid transparent;
    border-bottom: var(--pk-menu-hover-rule-w, 1px) solid transparent;
    background: none;
    color: var(--pk-menu-item-fg, #2D2C31);
    font: inherit;
    font-size: var(--pk-menu-item-fs, 15px);
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
  }
  .pk-nav-item:hover {
    background: var(--pk-menu-hover-bg, #F7F7F8);
    border-top-color: var(--pk-menu-hover-rule, transparent);
    border-bottom-color: var(--pk-menu-hover-rule, transparent);
  }
  /* Reached by Tab only: a programmatic focus() never matches :focus-visible (CT-1828). */
  .pk-nav-item:focus-visible {
    outline: var(--pk-ring, 2px) solid var(--pk-ring-color, #0090c9);
    outline-offset: var(--pk-ring-offset, 2px);
  }
  /* WEB-1564: the CTA pill is a button face, so it rings in the BUTTON ring; a brand that states none keeps its
     --pk-ring-color (this pill unchanged). Every other item keeps the menu's ring. */
  .pk-nav-item.pk-nav-cta:focus-visible {
    outline-color: var(--pk-button-focus-ring, var(--pk-ring-color, #0090c9));
  }
  .pk-nav-item.pk-active {
    background: var(--pk-menu-active-bg, #F7F7F8);
    color: var(--pk-menu-active-fg, #383B5B);
    border-top-color: var(--pk-menu-hover-rule, transparent);
    border-bottom-color: var(--pk-menu-hover-rule, transparent);
    font-weight: var(--pk-nav-active-weight, 600);
  }
  .pk-nav-label { overflow: hidden; text-overflow: ellipsis; }
  .pk-nav-icon {
    width: var(--pk-nav-icon-size, 18px); height: var(--pk-nav-icon-size, 18px); flex: 0 0 auto;
    background-color: currentColor;
    -webkit-mask: var(--pk-icon) center / contain no-repeat;
    mask: var(--pk-icon) center / contain no-repeat;
  }

  /* ---- sections --------------------------------------------------------------- */
  .pk-nav-section-head {
    display: flex; align-items: center; gap: var(--pk-nav-item-gap, 12px);
    width: 100%; padding: var(--pk-menu-item-pad, 11px 22px);
    border: none; background: none;
    color: var(--pk-text-secondary, #666666);
    font: inherit; font-weight: var(--pk-fw-heading, 700); font-size: var(--pk-fs-caption, 12px);
    letter-spacing: var(--pk-ls, .06em);
    cursor: pointer;
  }
  .pk-nav-section-head:hover {
    background: var(--pk-menu-hover-bg, #F7F7F8);
    color: var(--pk-text-primary, #2D2C31);
  }
  .pk-nav-section-body { display: flex; flex-direction: column; padding-left: var(--pk-space-md, 16px); }
  .pk-nav-section-body[hidden] { display: none; }
  .pk-nav-divider {
    border: none;
    border-top: var(--pk-bw-hairline, .5px) solid var(--pk-sem-border-primary, #E6E6E6);
    margin: var(--pk-space-sm, 8px) 0;
  }

  /* ---- render modes, repointed from menu-modes.css onto .pk-nav-* -------------- */
  /* STCT-9552 (PM_Opt): SCOPED TO THE NAV ROOT. The pk-menu-prefs contract (STCT-5853/6001) puts data-pk-menu-mode on
     <html> on purpose; a bare [data-pk-menu-mode] rule made the DOCUMENT a flex row, so <body> shrank to its content
     (a ~290px blank strip at 1440 in 3 of 4 modes). :where() keeps the specificity at 0. */
  :where(.pk-nav[data-pk-menu-mode="vertical"], .pk-menu[data-pk-menu-mode="vertical"])   { display: flex; flex-direction: column; }
  :where(.pk-nav[data-pk-menu-mode="horizontal"], .pk-menu[data-pk-menu-mode="horizontal"]) { display: flex; flex-direction: row; align-items: center; }
  :where(.pk-nav[data-pk-menu-mode="centered"], .pk-menu[data-pk-menu-mode="centered"])   { display: flex; flex-direction: row; justify-content: center; }
  :where(.pk-nav[data-pk-menu-mode="icon-horizontal"], .pk-menu[data-pk-menu-mode="icon-horizontal"]) { display: flex; flex-direction: row; align-items: center; }
  /* icon-only by construction. The label is visually-hidden rather than display:none, so the
     accessible name survives — a screen reader must still announce the item.
     STCT-9618: ONLY where a visible icon stands in for it — an item that has a .pk-nav-icon, in a nav whose
     icons are not "off". Hiding every label made an icon-less item (no `icon`, an icon name that resolved to
     nothing, or icons: false) an invisible 44x36 link still in the tab order; the showcase's own specimen
     rendered three of them. Without :has() (an old WebView) this matches nothing and the label shows: the
     failure direction is a visible label, never an invisible control. */
  :where(.pk-nav[data-pk-menu-mode="icon-horizontal"]:not([data-pk-menu-icons="off"]), .pk-menu[data-pk-menu-mode="icon-horizontal"]:not([data-pk-menu-icons="off"])) :where(.pk-nav-item:has(.pk-nav-icon)) .pk-nav-label {
    position: absolute; width: var(--pk-stroke, 1px); height: var(--pk-stroke, 1px);
    margin: calc(-1 * var(--pk-stroke, 1px)); padding: 0; border: 0;
    clip-path: inset(50%); overflow: hidden; white-space: nowrap;
  }
  :where([data-pk-menu-icons="off"]) .pk-nav-icon { display: none; }
  :where([data-pk-menu-icons="on"])  .pk-nav-icon { display: block; }

  /* ---- submenu modes: the brand's tabs family ---------------------------------- */
  :where([data-pk-submenu-mode="tabs-underline"]) {
    display: flex; flex-direction: row; gap: var(--pk-tabs-gap, 24px);
    border-bottom: var(--pk-stroke, 1px) solid var(--pk-sem-border-primary, #E6E6E6);
  }
  :where([data-pk-submenu-mode="tabs-underline"]) .pk-nav-item {
    border-top: none;
    border-bottom: var(--pk-tabs-rule-w, 2px) solid transparent;
    border-radius: var(--pk-tabs-radius, 0);
    padding: var(--pk-tabs-pad, 8px 2px);
    font-size: var(--pk-tabs-fs, 15px);
    color: var(--pk-tabs-fg, #2D2C31);
  }
  :where([data-pk-submenu-mode="tabs-underline"]) .pk-nav-item:hover {
    color: var(--pk-tabs-hover-fg, #383B5B);
    background: none;
  }
  :where([data-pk-submenu-mode="tabs-underline"]) .pk-nav-item.pk-active {
    border-bottom-color: var(--pk-tabs-rule, #0090c9);
    color: var(--pk-tabs-active-fg, #383b5b);
    font-weight: var(--pk-tabs-active-weight, 700);
    background: var(--pk-tabs-active-bg, transparent);
    /* STCT-9730: the brand's ramp through the label and over the rule (src/tabs/tabs.css, in parity) */
    position: relative;
    background-image: var(--pk-tabs-active-gradient, none), linear-gradient(currentColor, currentColor), none;
    -webkit-background-clip: text, text, border-box; background-clip: text, text, border-box;
    -webkit-text-fill-color: transparent;
  }
  /* STCT-9938 (PM_Nft): PRINT. The label above is painted THROUGH its glyphs (a transparent fill over background layers),
     and a browser printing without background graphics (the default) drops those layers: the active label printed
     BLANK in every brand (0 ink vs 3519 for a plain label). In print it is a plain fill of its own colour; the ramp
     and the clip go (the clip reset keeps a pill's ground a ground when backgrounds DO print). */
  @media print {
    :where([data-pk-submenu-mode="tabs-underline"]) .pk-nav-item.pk-active { -webkit-text-fill-color: currentColor; background-image: none; -webkit-background-clip: border-box; background-clip: border-box; }
  }
  :where([data-pk-submenu-mode="tabs-underline"]) .pk-nav-item.pk-active::after {
    content: ""; position: absolute; left: 0; right: 0;
    bottom: calc(-1 * var(--pk-tabs-rule-w, 2px)); height: var(--pk-tabs-rule-w, 2px);
    background: var(--pk-tabs-rule-gradient, none); pointer-events: none;
  }
}

/* ==== src/menu-prefs/menu-prefs.css ==== */
/* STCT-9674: the user's menu choice (renderMenuPrefsControl). Painted from the brand's own tokens only. */
.pk-menu-prefs { display: grid; gap: var(--pk-space-md, 16px); margin: 0 0 var(--pk-space-lg, 24px); color: var(--pk-text-primary); }
.pk-menu-prefs-group { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--pk-space-xs, 6px) var(--pk-space-md, 16px); }
.pk-menu-prefs-group > legend { width: 100%; padding: 0; margin: 0 0 var(--pk-space-xs, 6px); font-weight: var(--pk-fw-heading); }
.pk-menu-prefs-option { display: inline-flex; align-items: center; gap: var(--pk-space-xs, 6px); cursor: pointer; min-height: var(--pk-space-lg, 24px); }
.pk-menu-prefs-option input { margin: 0; accent-color: var(--pk-primary); }
.pk-menu-prefs-reset { justify-self: start; font: inherit; padding: var(--pk-space-xs, 6px) var(--pk-space-md, 16px); border-radius: var(--pk-radius-pill, 999px);
  border: var(--pk-bw-primary, 1px) solid var(--pk-input-border); background: transparent; color: var(--pk-text-primary); cursor: pointer; }
.pk-menu-prefs-reset:disabled { opacity: 0.6; cursor: default; }

/* ==== src/meter/meter.css ==== */
/* meter.css — STCT-9138. Only the label and the width: the bar, the figure, the marker chip and "no value" are
   progressCell's styles (skyten-table/skyten-table.css), measured over all 140 brand x mode sheets there, so a
   meter and a table cell read the same everywhere. */
.pk-meter {
  display: flex;
  flex-direction: column;
  gap: var(--pk-space-xs, 8px);
  /* STCT-9703: the meter takes its container's width. In a flex row (a toolbar, a card row) it shrank to its content,
     and the bar, the 1fr leftover beside the figure, went to 0px exactly when usage was over the limit. */
  inline-size: 100%;
  min-inline-size: 8rem;
  font-family: var(--pk-font-sans, system-ui, sans-serif);
  color: var(--pk-text-primary, #191919);
}
.pk-meter-label { font-size: var(--pk-fs-small); color: var(--pk-text-secondary, #666666); }
/* standalone, the bar takes the width it is given (in a table cell it is capped instead) */
/* the bar keeps a minimum, as the table cell's does (minmax(3rem, 6rem)): it can never be the leftover of nothing */
.pk-meter .pk-progress-cell { display: grid; grid-template-columns: minmax(4rem, 1fr) auto; inline-size: 100%; }

/* ==== src/modal/modal.css ==== */
/* modal.css — the brand's modal, on the BRAND CONTRACT (STCT-8770). tools-brands `.pk-modal-card`:
   `background: surface; border: stroke solid border; border-radius: radius; padding: pad-container`,
   with the brand's modal shadow and scrim. */

/* STCT-8817: the overlay IS the native <dialog> (showModal), filling the viewport as the scrim, with
   the card centred inside it. The browser's own dialog box (border, padding, max-width/-height,
   margin, background) is reset here so it looks exactly as the old <div> did. ⚠ An author rule
   beats the browser's `dialog:not([open]) { display: none }` whatever its specificity, so the
   closed state is hidden explicitly. */
.pk-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  color: inherit;
  background: var(--pk-sem-nav-scrim, rgba(25,25,25, 0.55));
  display: flex;
  align-items: center;
  justify-content: center;
}
.pk-modal-overlay:not([open]) { display: none; }
.pk-modal-overlay::backdrop { background: transparent; }   /* the dialog itself paints the scrim */

.pk-modal-card {
  background: var(--pk-card-bg, #fff);
  color: var(--pk-text-primary, #191919);
  border: var(--pk-card-border-w, 1px) solid var(--pk-card-border, #E6E6E6);
  border-radius: var(--pk-card-radius, 8px);
  box-shadow: var(--pk-shadow-modal, none);
  padding: var(--pk-pad-container, 15px);
  box-sizing: border-box;
  min-height: 60vh;
  min-width: 50vw;
  max-width: 92vw;
  max-height: 90vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-family: var(--pk-font-sans, sans-serif);
  font-size: var(--pk-fs-base, 15px);
  line-height: var(--pk-lh, 1.5);
}

.pk-modal-close-row {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}

.pk-modal-close {
  background: none;
  border: none;
  color: inherit;
  font-size: var(--pk-fs-h4, 19px);
  cursor: pointer;
  padding: var(--pk-space-xs, 4px);
}

.pk-modal-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.pk-modal-title {
  font-size: var(--pk-fs-h3, 23px);
  font-weight: var(--pk-fw-heading, 700);
  line-height: var(--pk-lh-heading, 1.25);
  color: var(--pk-text-heading, inherit);
  margin: 0 0 var(--pk-space-sm, 10px);
}

.pk-modal-content {
  flex: 1;
  font-size: var(--pk-fs-base, 15px);
}

.pk-modal-actions {
  display: flex;
  gap: var(--pk-gap, 10px);
  padding: var(--pk-space-md, 16px) 0 0;
}

/* ==== src/not-found/not-found.css ==== */
/* @paprika/skyten-foundation/not-found — the standard "page not found" page (STCT-8670), on the BRAND
 * CONTRACT (STCT-8770): the card family, the type scale (the code is the brand's h1, the heading its h3),
 * the secondary button family for the links. Layout and frame only. */

.pk-notfound {
  min-height: 100%; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  padding: var(--pk-pad-container, 16px);
  background: var(--pk-page-bg, var(--pk-sem-bg-page, #F2F2F2));   /* the page ground the brand DECLARES (layout.pageBackground -> --pk-page-bg, contract 1.1, STCT-8908) */
  font-family: var(--pk-font-sans, system-ui, sans-serif);
  font-size: var(--pk-fs-base, 15px);
  line-height: var(--pk-lh, 1.5);
  color: var(--pk-text-primary, #191919);
}
.pk-notfound-card {
  width: 100%; max-width: calc(34 * var(--pk-fs-base, 15px)); box-sizing: border-box;
  display: flex; flex-direction: column; gap: var(--pk-space-sm, 8px);
  padding: var(--pk-card-pad, 16px);
  background: var(--pk-card-bg, #fff);
  border: var(--pk-card-border-w, 1px) solid var(--pk-card-border, #E6E6E6);
  border-radius: var(--pk-card-radius, 12px);
  box-shadow: var(--pk-card-shadow, none);
}

/* ⛔ THE CODE IS DRAWN IN THE MUTED TEXT TOKEN, NOT THE BRAND COLOUR: it is decoration. */
.pk-notfound-code {
  font-size: var(--pk-fs-h1, 46px); font-weight: var(--pk-fw-heading, 700); line-height: 1;
  color: var(--pk-text-secondary, #666);
  font-variant-numeric: tabular-nums;
}
.pk-notfound-heading { margin: 0; font-size: var(--pk-fs-h3, 23px); line-height: var(--pk-lh-heading, 1.25); font-weight: var(--pk-fw-heading, 700); color: var(--pk-text-heading, inherit); text-wrap: balance; }
.pk-notfound-body { margin: 0; color: var(--pk-text-secondary, #666); max-width: 46ch; }

.pk-notfound-path {
  margin: var(--pk-space-xs, 4px) 0 0;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--pk-space-xs, 4px);
  font-size: var(--pk-fs-caption, 13px); color: var(--pk-text-secondary, #666);
}
/* ⚠ A URL has no spaces: `anywhere` is what breaks it. */
.pk-notfound-path-value {
  font-family: var(--pk-font-mono, ui-monospace, monospace);
  color: var(--pk-text-primary, #191919);
  background: var(--pk-sem-bg-sunken, #f2f2f2);
  padding: 0 var(--pk-space-xs, 4px);
  border-radius: var(--pk-radius-xs, 3px);
  min-width: 0; word-break: break-all; overflow-wrap: anywhere;
}

.pk-notfound-actions {
  display: flex; flex-wrap: wrap; gap: var(--pk-gap, 8px);
  margin-top: var(--pk-space-sm, 8px);
}
/* A navigation target stays an <a> — styled as the brand's secondary button, to sit beside a button. */
.pk-notfound-link {
  display: inline-flex; align-items: center;
  font: inherit; font-size: var(--pk-button-fs, 14px); font-weight: var(--pk-button-weight, 600); text-decoration: none;
  padding: var(--pk-button-pad, 0 16px); height: var(--pk-button-height, 40px); box-sizing: border-box;
  border-radius: var(--pk-button-radius, 6px);
  border: var(--pk-button-border-w, 1px) solid var(--pk-button-secondary-border, #808080);
  background: var(--pk-button-secondary-bg, transparent);
  color: var(--pk-button-secondary-fg, #191919);
}
.pk-notfound-link-primary {
  background: var(--pk-button-bg, #383b5b);
  border-color: var(--pk-button-bg, #383b5b);
  color: var(--pk-button-fg, #fff);
}
.pk-notfound-link:focus-visible { outline-offset: var(--pk-ring-offset, 2px); }
.pk-notfound-footer { margin: 0; color: var(--pk-text-secondary, #666); font-size: var(--pk-fs-caption, 13px); }

@media (max-width: 480px) {
  .pk-notfound { align-items: flex-start; }
  .pk-notfound-code { font-size: var(--pk-fs-h2, 29px); }
}

/* ==== src/numeric-stepper/numeric-stepper.css ==== */
/* @paprika/skyten-foundation/numeric-stepper — ± buttons and a number field as one control
 * (STCT-8777). Load this sheet; the library does not inject it.
 *
 * ONE BORDER, THREE PARTS. The group draws the border and the parts sit inside it, so the control
 * reads as one field with two ends rather than three adjacent widgets — which is the whole point
 * of a stepper over a number input beside two buttons.
 *
 * STCT-9237: the group wears the INPUT chrome — the brand's field scale (--pk-input-height /
 * -height-sm, -fs / -fs-sm, -radius, -border, -bg, -fg) and its states (hover, focus ring, invalid,
 * disabled) — so it is exactly the text input's and the date field's box, in the same two sizes. */

.pk-numeric-stepper {
  /* No theme token for these yet (STCT-8782 follow-up): declared here so a brand can override them. */
  --pk-numeric-stepper-btn-min-width: calc(var(--pk-input-height, 38px) - var(--pk-space-xs, 4px));
  --pk-numeric-stepper-btn-font-size: 1.125em;
  --pk-numeric-stepper-btn-line-height: 1;
  --pk-numeric-stepper-input-width: 5.5em;
  --pk-numeric-stepper-unit-font-size: 0.8125em;
  --pk-numeric-stepper-sm-btn-min-width: calc(var(--pk-input-height-sm, 30px) - var(--pk-space-xs, 4px));
  --pk-numeric-stepper-sm-input-width: 4.5em;
  --pk-numeric-stepper-sr-size: 1px;
  display: inline-flex;
  align-items: stretch;
  position: relative;
  box-sizing: border-box;
  min-height: var(--pk-input-height, 38px);
  font-family: var(--pk-font-sans, system-ui, sans-serif);
  font-size: var(--pk-input-fs, 15px);
  color: var(--pk-input-fg, #191919);
  background: var(--pk-input-bg, #fff);
  border: var(--pk-input-border-w, 1px) solid var(--pk-input-border, #666);
  border-radius: var(--pk-input-radius, var(--pk-radius-s, 6px));
  min-width: 0;
}

.pk-numeric-stepper:hover:not(.pk-numeric-stepper-disabled):not(:focus-within) { border-color: var(--pk-input-border-hover, var(--pk-input-border, #666)); }

/* focus: the group carries the focus border and the brand's ring, since the inner input has no
   border of its own; the inner outline is dropped so the ring is not doubled. */
.pk-numeric-stepper:focus-within {
  border-color: var(--pk-input-border-focus, #383b5b);
  box-shadow: 0 0 0 var(--pk-input-ring-w, 2px) var(--pk-input-ring, var(--pk-ring-color, currentColor));
}

.pk-numeric-stepper-btn {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* the field's own height as a square: comfortably above the 24px target minimum of 2.5.8 */
  min-width: var(--pk-numeric-stepper-btn-min-width);
  padding: 0 var(--pk-space-sm, 8px);
  border: 0;
  border-radius: inherit;
  background: transparent;
  color: var(--pk-input-fg, #191919);
  font: inherit;
  font-size: var(--pk-numeric-stepper-btn-font-size);
  line-height: var(--pk-numeric-stepper-btn-line-height);
  cursor: pointer;
}

.pk-numeric-stepper-btn:hover { background: var(--pk-sem-bg-sunken, #E9F7FC); }

/* At a bound the button is aria-disabled, kept in the tree, and greyed. The value it would
 * produce is the same as the current one, so nothing is lost by leaving it in place. */
.pk-numeric-stepper-btn[aria-disabled='true'] {
  cursor: default;
  opacity: 0.4;
  background: transparent;
}

/* The group draws the ring on :focus-within; the parts draw none of their own. */
.pk-numeric-stepper-btn:focus-visible,
.pk-numeric-stepper-input:focus-visible { outline: none; }

.pk-numeric-stepper-input {
  appearance: textfield;
  -moz-appearance: textfield;
  font: inherit;
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: inherit;
  background: transparent;
  border: 0;
  border-left: var(--pk-bw-hairline, 1px) solid var(--pk-input-border, #E6E6E6);
  border-right: var(--pk-bw-hairline, 1px) solid var(--pk-input-border, #E6E6E6);
  padding: 0 var(--pk-space-sm, 8px);
  width: var(--pk-numeric-stepper-input-width);
  min-width: 0;
}

/* The native spin buttons are removed: the component's own ± ARE the spin buttons, and two sets
 * would step the value twice. Keyboard stepping is still handled (ArrowUp/Down, PageUp/Down). */
.pk-numeric-stepper-input::-webkit-outer-spin-button,
.pk-numeric-stepper-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* The unit sits inside the field's right edge, on the same hairline as the input. */
.pk-numeric-stepper-unit {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--pk-space-sm, 8px) 0 0;
  font-size: var(--pk-numeric-stepper-unit-font-size);
  color: var(--pk-text-secondary, #666);
  border-right: var(--pk-bw-hairline, 1px) solid var(--pk-input-border, #E6E6E6);
  white-space: nowrap;
}
.pk-numeric-stepper-unit + .pk-numeric-stepper-inc { border-left: 0; }
.pk-numeric-stepper-input:has(+ .pk-numeric-stepper-unit) { border-right: 0; }

/* disabled: the brand's disabled border / fill / ink (1.4.3 exempts an inactive control) */
.pk-numeric-stepper-disabled {
  border-color: var(--pk-input-border-disabled, var(--pk-input-border, #666));
  background: var(--pk-input-bg-disabled, var(--pk-input-bg, #fff));
  color: var(--pk-input-fg-disabled, var(--pk-text-disabled, #999));
}
.pk-numeric-stepper-disabled .pk-numeric-stepper-btn { cursor: default; color: inherit; }

/* invalid: the input's invalid border; aria-invalid and form-fields' message carry it in words */
.pk-numeric-stepper-invalid,
.pk-numeric-stepper-invalid:hover { border-color: var(--pk-input-border-invalid, #A92E32); }

/* the SMALL size: the brand's small step, the same one the text input and the date field use */
.pk-numeric-stepper-sm { min-height: var(--pk-input-height-sm, 30px); font-size: var(--pk-input-fs-sm, 14px); }
.pk-numeric-stepper-sm .pk-numeric-stepper-btn { min-width: var(--pk-numeric-stepper-sm-btn-min-width); }
.pk-numeric-stepper-sm .pk-numeric-stepper-input { width: var(--pk-numeric-stepper-sm-input-width); }

/* Screen-reader-only live region; it must stay in the DOM and must not be display:none. */
.pk-numeric-stepper-live {
  position: absolute;
  width: var(--pk-numeric-stepper-sr-size);
  height: var(--pk-numeric-stepper-sr-size);
  margin: calc(-1 * var(--pk-numeric-stepper-sr-size));
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ==== src/page-title-bar/page-title-bar.css ==== */
/* page-title-bar.css — STCT-8777. It sits on the PAGE background, not a card, so every text colour is
   measured against --pk-sem-bg-page as well as the surface (page-title-bar.test.js, 44 brand-modes).
   The title and actions share a row while they fit and wrap when they do not.
   STCT-8777 variants: sizes are DECLARED as --pk-page-title-bar-* and read with var(), so `compact` only
   redefines them; `sticky` pins the bar on the page background; under 600px of the CONTAINER's width the
   actions leave the title row and sit under it (the frame in the showcase, or the app's wrapper with
   `container-type: inline-size`). Without a container the row still wraps intrinsically. */

.pk-page-title-bar {
  --pk-page-title-bar-title-size: 24px;
  --pk-page-title-bar-text-size: 14px;
  --pk-page-title-bar-small-size: 13px;
  --pk-page-title-bar-pad-y: var(--pk-space-md, 16px);
  --pk-page-title-bar-gap: 6px;
  --pk-page-title-bar-row-gap: 4px;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--pk-page-title-bar-gap);
  padding: var(--pk-page-title-bar-pad-y) 0;
  font-family: var(--pk-font-sans, system-ui, sans-serif);
  color: var(--pk-text-primary, #191919);
}
.pk-page-title-bar-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--pk-space-sm, 10px) var(--pk-space-md, 16px); }
.pk-page-title-bar-main { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: var(--pk-page-title-bar-row-gap); }

.pk-page-title-bar .pk-page-title-bar-back { align-self: flex-start; font-size: var(--pk-page-title-bar-small-size); color: var(--pk-text-secondary, #666666); text-decoration: none; }
.pk-page-title-bar .pk-page-title-bar-back:hover { text-decoration: underline; color: var(--pk-text-primary, #191919); }
.pk-page-title-bar .pk-page-title-bar-back:focus-visible { outline: 2px solid var(--pk-text-primary, #191919); outline-offset: 2px; border-radius: var(--pk-radius-xs, 2px); }
.pk-page-title-bar .pk-page-title-bar-title {
  margin: 0;
  font-size: var(--pk-page-title-bar-title-size);
  line-height: 1.2;
  font-weight: 700;
  text-transform: none;
  letter-spacing: normal;
  color: var(--pk-text-primary, #191919);
  overflow-wrap: break-word;
}
.pk-page-title-bar .pk-page-title-bar-description { font-size: var(--pk-page-title-bar-text-size); color: var(--pk-text-secondary, #666666); }
.pk-page-title-bar .pk-page-title-bar-actions { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: var(--pk-space-xs, 8px); }

/* compact: a denser bar for list screens and drawers. */
.pk-page-title-bar-compact {
  --pk-page-title-bar-title-size: 18px;
  --pk-page-title-bar-text-size: 13px;
  --pk-page-title-bar-small-size: 12px;
  --pk-page-title-bar-pad-y: var(--pk-space-xs, 4px);
  --pk-page-title-bar-gap: var(--pk-space-xs, 4px);
  --pk-page-title-bar-row-gap: 0;
}
.pk-page-title-bar-compact .pk-page-title-bar-row { align-items: center; }

/* sticky: pins to the top of the scrolling ancestor on the page background, above the content it heads. */
.pk-page-title-bar-sticky {
  --pk-page-title-bar-layer: 5;
  --pk-page-title-bar-hairline: 1px;
  position: sticky;
  top: 0;
  z-index: var(--pk-page-title-bar-layer);
  background: var(--pk-sem-bg-page, #F7F7F8);
  border-bottom: var(--pk-page-title-bar-hairline) solid var(--pk-sem-border-primary, #E6E6E6);
}

/* STCT-8777 Desktop/Mobile: at phone width the actions leave the title row and sit UNDER the title,
   full width, so a long title is never squeezed beside three buttons. */
@container (max-width: 600px) {
  .pk-page-title-bar-row { flex-direction: column; align-items: stretch; }
  .pk-page-title-bar-main { flex-basis: auto; }
  .pk-page-title-bar .pk-page-title-bar-actions { width: 100%; }
}

/* ==== src/pagination/pagination.css ==== */
/* pagination.css — on the BRAND CONTRACT (STCT-8770). tools-brands `.pk-pagination`: `gap: space-xs;`
   controls padded `pad-y-sm pad-x-sm`, radius, a stroke border, `font-size: fs-small`, muted text; the
   active page in the brand's primary / on-primary pair. */

.pk-pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--pk-space-xs, 8px);
  font-family: var(--pk-font-sans, sans-serif);
  font-size: var(--pk-fs-small, 14px);
}

.pk-pagination-text {
  font-size: var(--pk-fs-small, 14px);
  color: var(--pk-text-secondary, #666);
}

.pk-pagination-select {
  font: inherit;
  font-size: var(--pk-fs-small, 14px);
  line-height: var(--pk-lh, 1.5);
  padding: var(--pk-pad-y-sm, 4px) var(--pk-pad-x-sm, 8px);
  border-radius: var(--pk-input-radius, 6px);
  border: var(--pk-input-border-w, 1px) solid var(--pk-input-border, #ccc);
  background: var(--pk-input-bg, #fff);
  color: var(--pk-input-fg, #191919);
}

.pk-pagination-btn {
  background: none;
  border: var(--pk-stroke, 1px) solid var(--pk-sem-border-primary, #ccc);
  border-radius: var(--pk-button-radius, var(--pk-radius-s, 4px));
  cursor: pointer;
  color: var(--pk-text-secondary, #666);
  font-size: var(--pk-fs-small, 14px);
  line-height: var(--pk-lh, 1.5);
  padding: var(--pk-pad-y-sm, 4px) var(--pk-pad-x-sm, 6px);
}
.pk-pagination-btn:hover:not(:disabled) { color: var(--pk-text-primary, #191919); background: var(--pk-sem-bg-sunken, #F7F7F8); }
.pk-pagination-btn.pk-active, .pk-pagination-btn[aria-current="page"] {
  background: var(--pk-primary, #383b5b);
  color: var(--pk-on-primary, #fff);
  border-color: var(--pk-primary, #383b5b);
}

.pk-pagination-btn:disabled {
  color: var(--pk-text-disabled, #999);
  cursor: default;
}

/* ==== src/panel/panel.css ==== */
/* panel.css — the brand's panel, on the BRAND CONTRACT (STCT-8770): --pk-panel-bg / -radius for the
   panel surface (tools-brands `.pk-panel`), --pk-card-* where the panel is a card, --pk-pad-container
   for its padding, the type scale for its text. */

.pk-panel {
  border-radius: var(--pk-panel-radius, 8px);
  background-color: var(--pk-panel-bg, #fff);
  padding: var(--pk-pad-container, 15px);
  font-family: var(--pk-font-sans, sans-serif);
  font-size: var(--pk-fs-base, 15px);
  line-height: var(--pk-lh, 1.5);
  color: var(--pk-text-primary, #191919);
}

.pk-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pk-gap, 8px);
  border-bottom: var(--pk-stroke, 1px) solid var(--pk-sem-border-primary, #ccc);
  padding: 0 var(--pk-pad-container, 15px) var(--pk-pad-y, 8px);
  margin: 0 calc(var(--pk-pad-container, 15px) * -1) var(--pk-pad-y, 8px);
}

.pk-panel-header-title {
  font-size: var(--pk-fs-h4, 19px);
  font-weight: var(--pk-fw-heading, 700);
  line-height: var(--pk-lh-heading, 1.25);
  color: var(--pk-text-heading, #383b5b);
  display: flex;
  align-items: center;
  gap: var(--pk-gap, 8px);
}

.pk-panel-header-actions {
  display: flex;
  align-items: center;
  gap: var(--pk-gap, 8px);
}

.pk-panel-collapse-btn {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  font-size: var(--pk-fs-small, 14px);
  padding: 0 var(--pk-space-xs, 5px);
  line-height: 1;
}

.pk-panel-collapse-btn::before {
  content: '\2212'; /* minus */
}

.pk-panel-collapsed .pk-panel-collapse-btn::before {
  content: '+';
}

.pk-panel-body {
  font-size: var(--pk-fs-base, 15px);
}

.pk-panel-collapsed .pk-panel-body,
.pk-panel-collapsed .pk-panel-footer {
  display: none;
}

.pk-panel-footer {
  border-top: var(--pk-stroke, 1px) solid var(--pk-sem-border-primary, #ccc);
  margin: var(--pk-pad-y, 8px) calc(var(--pk-pad-container, 15px) * -1) 0;
  padding: var(--pk-pad-y, 8px) var(--pk-pad-container, 15px) 0;
  font-size: var(--pk-fs-small, 14px);
  color: var(--pk-text-secondary, #666);
}

/* ==== src/percent-circle/percent-circle.css ==== */
.pk-percent-circle-track {
  stroke: var(--pk-sem-border-primary, #ccc);
  opacity: 0.5;
}

.pk-percent-circle-value {
  stroke: var(--pk-ramp-primary-60, #49bae4);
  stroke-linecap: round;
  transition: stroke-dashoffset 0.3s ease;
}

/* ==== src/promo-box/promo-box.css ==== */
/* promo-box.css — a promotion / advertisement box (STCT-8777, HM_AD).
 *
 * Deliberately NOT a panel: no header divider, a stronger eyebrow, room for an image on the left.
 * The accent tone sits on the same surface as every other box and is told apart by its active CTA
 * (STCT-8997: a ramp tint does not flip with the mode — --pk-ramp-primary-10 put light text on a
 * near-white ground in dark). Load button/button.css as well when the CTA has no href. */

.pk-promo-box {
  /* No theme token for these yet (STCT-8782 follow-up): declared here so a brand can override them. */
  --pk-promo-box-media-width: 6.5rem;
  --pk-promo-box-compact-media-width: 4rem;
  --pk-promo-box-eyebrow-font-size: 0.6875rem;
  --pk-promo-box-eyebrow-letter-spacing: 0.08em;
  --pk-promo-box-eyebrow-transform: uppercase;
  --pk-promo-box-strong-weight: 700;
  --pk-promo-box-title-font-size: 1rem;
  --pk-promo-box-title-line-height: 1.3;
  --pk-promo-box-compact-title-font-size: 0.9375rem;
  --pk-promo-box-text-font-size: 0.875rem;
  --pk-promo-box-text-line-height: 1.45;
  --pk-promo-box-compact-text-font-size: 0.8125rem;
  --pk-promo-box-close-size: 1.75rem;
  --pk-promo-box-close-font-size: 1.25rem;
  --pk-promo-box-close-line-height: 1;
  position: relative;
  display: flex;
  align-items: stretch;
  gap: var(--pk-space-md, 16px);
  padding: var(--pk-space-md, 16px);
  border: var(--pk-bw-hairline, 1px) solid var(--pk-sem-border-primary, #E6E6E6);
  border-radius: var(--pk-card-radius, var(--pk-radius-m, 8px));
  background: var(--pk-sem-bg-surface-primary, #fff);
  font-family: var(--pk-font-sans, system-ui, sans-serif);
  color: var(--pk-text-primary, #191919);
  overflow-wrap: break-word;
}

.pk-promo-box-accent {
  background: var(--pk-sem-bg-surface-secondary);
  /* STCT-9224: no accent edge — no brand and no default defines one (a one-sided thick border was a library invention) */
}

.pk-promo-box-compact {
  gap: var(--pk-space-sm, 8px);
  padding: var(--pk-space-sm, 8px) var(--pk-space-md, 16px);
}

.pk-promo-box-media {
  flex: 0 0 auto;
  width: var(--pk-promo-box-media-width);
  display: flex;
  align-items: center;
}
.pk-promo-box-compact .pk-promo-box-media { width: var(--pk-promo-box-compact-media-width); }
.pk-promo-box-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--pk-radius-s, 6px);
  object-fit: cover;
}

.pk-promo-box-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--pk-space-xs, 4px);
  /* leave room for the close button so a long title never sits under it */
  padding-right: var(--pk-space-lg, 24px);
}

/* The eyebrow is the honesty label ("Sponsored"): small caps, secondary colour, always a word. */
.pk-promo-box-eyebrow {
  font-size: var(--pk-promo-box-eyebrow-font-size);
  font-weight: var(--pk-promo-box-strong-weight);
  letter-spacing: var(--pk-promo-box-eyebrow-letter-spacing);
  text-transform: var(--pk-promo-box-eyebrow-transform);
  color: var(--pk-text-secondary, #666);
}

.pk-promo-box-title {
  margin: 0;
  font-size: var(--pk-promo-box-title-font-size);
  font-weight: var(--pk-promo-box-strong-weight);
  line-height: var(--pk-promo-box-title-line-height);
}
.pk-promo-box-compact .pk-promo-box-title { font-size: var(--pk-promo-box-compact-title-font-size); }
.pk-promo-box-title[hidden],
.pk-promo-box-text[hidden] { display: none; }

.pk-promo-box-text {
  font-size: var(--pk-promo-box-text-font-size);
  line-height: var(--pk-promo-box-text-line-height);
  color: var(--pk-text-primary, #191919);
}
.pk-promo-box-compact .pk-promo-box-text { font-size: var(--pk-promo-box-compact-text-font-size); }

.pk-promo-box-cta { margin-top: var(--pk-space-xs, 4px); }

/* A CTA with an href is a real link: underlined, in the accent, so it reads as a link. */
.pk-promo-box-link {
  color: var(--pk-ramp-primary-60, #49bae4);
  font-weight: var(--pk-promo-box-strong-weight);
  font-size: var(--pk-promo-box-text-font-size);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.pk-promo-box-link:hover { color: var(--pk-text-primary, #191919); }

.pk-promo-box-close {
  position: absolute;
  top: var(--pk-space-xs, 4px);
  right: var(--pk-space-xs, 4px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--pk-promo-box-close-size);
  height: var(--pk-promo-box-close-size);
  padding: 0;
  border: 0;
  border-radius: var(--pk-radius-xs, 4px);
  background: transparent;
  color: var(--pk-text-secondary, #666);
  font: inherit;
  font-size: var(--pk-promo-box-close-font-size);
  line-height: var(--pk-promo-box-close-line-height);
  cursor: pointer;
}
.pk-promo-box-close:hover {
  background: var(--pk-sem-bg-surface-secondary, #F2F2F2);
  color: var(--pk-text-primary, #191919);
}

/* The ring is the browser's, deliberately — see select.css for the 16-of-48 measurement. */
.pk-promo-box-close:focus-visible,
.pk-promo-box-link:focus-visible,
.pk-promo-box-button:focus-visible { outline-offset: 1px; }

/* ==== src/radio/radio.css ==== */
/* radio.css — the visual is the NATIVE INPUT, styled (STCT-8718: never hidden off-screen, so the
   platform's focus ring lands on the thing the user is looking at), on the BRAND CONTRACT (STCT-8770):
   the INPUT family for the circle, the brand's primary for the checked state, the type scale for the
   label. tools-brands `.pk-radio`: `gap: var(--gap); font-size: var(--fs-small); accent-color: primary`. */

.pk-radio {
  display: inline-flex;
  align-items: center;
  gap: var(--pk-gap, 8px);
  cursor: pointer;
  font-family: var(--pk-font-sans, sans-serif);
  font-size: var(--pk-fs-small, 14px);
  padding: var(--pk-space-xs, 3px) 0;
}

.pk-radio input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: var(--pk-fs-base, 16px);
  height: var(--pk-fs-base, 16px);
  margin: 0;
  border: var(--pk-input-border-w, 1px) solid var(--pk-input-border, #808080);
  border-radius: 50%;
  background: var(--pk-input-bg, #fff);
  cursor: pointer;
  /* No outline rule of any kind beyond the brand's ring below: `outline: none` here is precisely
     the defect this file used to carry. */
}
.pk-radio input[type="radio"]:focus-visible {
  outline: var(--pk-ring, 2px) solid var(--pk-ring-color, currentColor);
  outline-offset: var(--pk-ring-offset, 2px);
}

/* The dot is drawn as a background, not a pseudo-element: an `input::after` is not reliable
   across engines for a replaced control. The dot's radius is a third of the control. */
.pk-radio input[type="radio"]:checked {
  border-color: var(--pk-primary, #49bae4);
  background-image: radial-gradient(circle at center,
                    var(--pk-primary, #49bae4) 0 calc(var(--pk-fs-base, 16px) / 3),
                    transparent calc(var(--pk-fs-base, 16px) / 3));
}

.pk-radio label {
  cursor: pointer;
  line-height: var(--pk-lh, 1.5);
  font-size: var(--pk-fs-small, 14px);
  color: var(--pk-text-primary, #191919);
}

.pk-radio input[type="radio"]:checked + label {
  color: var(--pk-text-primary, #191919);
  font-weight: var(--pk-fw-heading, 600);
}

.pk-radio input[type="radio"]:disabled {
  opacity: 0.5;
  cursor: default;
}

.pk-radio input[type="radio"]:disabled + label {
  opacity: 0.5;
  cursor: default;
}

/* ==== src/report-viewer/report-viewer.css ==== */
/* @paprika/skyten-foundation/report-viewer — the monospaced report viewer (operator 2026-10-06).
   Load after one brand sheet, with segmented-toggle.css and button.css. Every value is a --pk-* token: the sheet is
   paper (the brand's document ground), the lines the brand's mono face at the caption size, the stripe the brand's
   REPORT stripe (--pk-report-viewer-row-alt, never the table's zebra), the logo at the brand's document position. */

.pk-report-viewer {
  display: flex;
  flex-direction: column;
  gap: var(--pk-space-md);
  min-height: 0;
  color: var(--pk-text-primary);
  font-family: var(--pk-font-sans);
  font-size: var(--pk-fs-base);
}
.pk-report-viewer-fullscreen,
.pk-report-viewer:fullscreen { position: fixed; inset: 0; z-index: 60; background: var(--pk-page-bg); padding: var(--pk-space-md); }

/* ---- toolbar: groups of segmented pills, the pager, the actions at the end ---- */
.pk-report-viewer-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--pk-space-sm) var(--pk-space-md);
}
.pk-report-viewer-toolbar-group { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pk-space-sm) var(--pk-space-md); }
.pk-report-viewer-toolbar-group-end { margin-left: auto; }
.pk-report-viewer-pager { display: inline-flex; align-items: center; gap: var(--pk-space-xs); }
.pk-report-viewer-pager-label { color: var(--pk-text-secondary); font-size: var(--pk-fs-small); margin-right: var(--pk-space-xs); }
.pk-report-viewer-pager-no { min-width: 2ch; text-align: center; font-weight: var(--pk-fw-heading); }
.pk-report-viewer-pager-of { color: var(--pk-text-secondary); font-size: var(--pk-fs-small); }

/* ---- the stage: the ground the sheet lies on; scrolls in both directions at 100 % ---- */
.pk-report-viewer-stage {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: var(--pk-space-lg);
  background: var(--pk-sem-bg-sunken);
  border-radius: var(--pk-radius-l);
  touch-action: pan-x pan-y;
}
.pk-report-viewer[data-pk-zoom="actual"] .pk-report-viewer-stage { cursor: grab; }
.pk-report-viewer-stage-panning { cursor: grabbing !important; user-select: none; }

/* ---- the sheet: paper, a hairline, a shadow, the printed page ----
   width: 'page-width' fills the stage; 'page-full' keeps the whole sheet in view (height-limited); 'actual' is
   1ch per column at the mono size, so the text is at its real size and the stage pans. */
.pk-report-viewer-sheet {
  --pk-report-viewer-ch: 1ch;
  box-sizing: border-box;
  margin: 0 auto;
  background: var(--pk-doc-paper, #FFFFFF);
  color: var(--pk-doc-ink, #191919);
  border: var(--pk-bw-hairline) solid var(--pk-sem-border-subtle);
  box-shadow: var(--pk-shadow-raised);
  padding: var(--pk-space-xl) var(--pk-space-xl) var(--pk-space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--pk-space-md);
  font-family: var(--pk-font-mono);
  font-size: var(--pk-fs-caption);
  line-height: var(--pk-table-lh, 1.5);
}
.pk-report-viewer[data-pk-zoom="page-width"] .pk-report-viewer-sheet { width: 100%; }
/* page-width: the lines scale to the stage — the renderer sets font-size on .pk-report-viewer-lines from the column count (inline) */
.pk-report-viewer[data-pk-zoom="page-full"] .pk-report-viewer-sheet { max-height: 100%; }   /* width: set inline by the renderer from the column count */
.pk-report-viewer[data-pk-zoom="actual"] .pk-report-viewer-sheet { width: max-content; }   /* min-width: set inline by the renderer */
.pk-report-viewer-stage { container-type: inline-size; }
/* portrait: a taller, narrower sheet (A4 upright); landscape the wide one */
.pk-report-viewer[data-pk-orientation="portrait"] .pk-report-viewer-sheet { max-width: var(--pk-container-max-width); }   /* the page container, not an invented sheet width */

/* ---- the logo at the brand's document position (documents.logo.position / widthPct) ---- */
.pk-report-viewer-sheet-head { display: flex; }
.pk-report-viewer-sheet[data-pk-logo="left"] .pk-report-viewer-sheet-head { justify-content: flex-start; }
.pk-report-viewer-sheet[data-pk-logo="center"] .pk-report-viewer-sheet-head { justify-content: center; }
.pk-report-viewer-sheet[data-pk-logo="right"] .pk-report-viewer-sheet-head { justify-content: flex-end; }
.pk-report-viewer-logo { height: auto; max-width: 100%; max-height: var(--pk-logo-height); object-fit: contain; object-position: left center; }   /* width: set inline from documents.logo.widthPct */
.pk-report-viewer-sheet[data-pk-logo="right"] .pk-report-viewer-logo { object-position: right center; }

/* ---- the lines: never wrap, number first, the stripe on every second one ---- */
.pk-report-viewer-lines {
  margin: 0;
  white-space: pre;
  overflow-wrap: normal;
  font: inherit;
  display: flex;
  flex-direction: column;
}
.pk-report-viewer-line { display: flex; gap: var(--pk-space-xs); padding: 0 var(--pk-space-xs); min-height: calc(1em * var(--pk-lh)); }
.pk-report-viewer-lines[data-pk-zebra="true"] .pk-report-viewer-line[data-pk-stripe="alt"] { background: var(--pk-report-row-alt); }
.pk-report-viewer-no { color: var(--pk-text-subtle); user-select: none; flex: 0 0 3ch; text-align: right; }
.pk-report-viewer-text { flex: 1 1 auto; }

/* ---- the footer line ---- */
.pk-report-viewer-sheet-foot {
  display: flex;
  justify-content: space-between;
  gap: var(--pk-space-md);
  padding-top: var(--pk-space-sm);
  border-top: var(--pk-bw-hairline) solid var(--pk-sem-border-subtle);
  color: var(--pk-text-secondary);
  font-size: var(--pk-fs-caption);
}

/* ---- print: the sheet only, on its own page, no toolbar, no stage ground ---- */
@media print {
  .pk-report-viewer-toolbar, .pk-report-viewer-pager { display: none !important; }
  .pk-report-viewer-stage { overflow: visible; padding: 0; background: none; border-radius: 0; }
  .pk-report-viewer-sheet { box-shadow: none; border: 0; width: 100% !important; min-width: 0 !important; break-after: page; }
  .pk-report-viewer[data-pk-orientation="landscape"] .pk-report-viewer-sheet { font-size: var(--pk-fs-caption); }   /* the smallest text step the scale answers for; 132 columns fit A4 landscape at it */
}

/* ==== src/scroll-to-top/scroll-to-top.css ==== */
/* @paprika/skyten-foundation/scroll-to-top — load this sheet; the library does not inject it.
 *
 * The button is `hidden` (attribute) below the threshold, so there is no opacity trick that leaves
 * a focusable, invisible control on the page. It is a BUTTON, so its shadow is the brand's button
 * shadow (--pk-button-shadow; none for skyten) — never a library-declared offset/blur (STCT-9098). */

.pk-scroll-to-top {
  /* No theme token for these yet (STCT-8782 follow-up): declared here so a brand can override them. */
  --pk-scroll-to-top-target-size: 44px;   /* WCAG 2.5.8 target size */
  --pk-scroll-to-top-font-size: 0.875rem;
  --pk-scroll-to-top-weight: 600;
  --pk-scroll-to-top-icon-size: 1.25rem;
  position: fixed;
  bottom: var(--pk-space-lg, 24px);
  z-index: 20;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pk-space-xs, 4px);
  min-width: var(--pk-scroll-to-top-target-size);
  min-height: var(--pk-scroll-to-top-target-size);
  padding: 0 var(--pk-space-sm, 8px);
  font-family: var(--pk-font-sans, system-ui, sans-serif);
  font-size: var(--pk-scroll-to-top-font-size);
  font-weight: var(--pk-scroll-to-top-weight);
  color: var(--pk-text-on-anchor, #fff);
  background: var(--pk-ramp-primary-60, #007FB1);
  /* --pk-text-secondary, not a hairline: a CONTROL boundary must hold 3:1 (see select.css) */
  border: var(--pk-bw-primary, 1px) solid var(--pk-text-secondary, #666);
  border-radius: var(--pk-radius-pill, 999px);
  box-shadow: var(--pk-button-shadow, none);
  cursor: pointer;
}

.pk-scroll-to-top-right { right: var(--pk-space-lg, 24px); }
.pk-scroll-to-top-left { left: var(--pk-space-lg, 24px); }

/* inside a position: relative host (a scrolling panel, the showcase stage) */
.pk-scroll-to-top-inline { position: absolute; }

.pk-scroll-to-top:hover { filter: brightness(1.08); }

/* the USER-AGENT ring, deliberately — see select.css */
.pk-scroll-to-top:focus-visible { outline-offset: 2px; }

.pk-scroll-to-top-icon {
  flex: 0 0 auto;
  width: var(--pk-scroll-to-top-icon-size);
  height: var(--pk-scroll-to-top-icon-size);
  background: currentColor;
  -webkit-mask: var(--pk-icon) center / contain no-repeat;
  mask: var(--pk-icon) center / contain no-repeat;
}
/* the bundled set has no chevron-up: chevron-down, turned around */
.pk-scroll-to-top-icon-flipped { transform: rotate(180deg); }

.pk-scroll-to-top-label {
  padding-right: var(--pk-space-xs, 4px);
  white-space: nowrap;
}

/* ==== src/search-results/search-results.css ==== */
/* search-results.css — STCT-8777. search-results.test.js measures every text colour on the page
   and on both surfaces over 44 brand-modes: title and snippet >= 4.5:1 (text-primary), status and
   meta >= 4.5:1 (text-secondary, min 5.20). No ramp colour is used, so nothing needs a dark rule.
   Result titles are links in a LIST, not in running text, so WCAG 1.4.1 does not require a
   permanent underline; they are underlined on hover and focus. */

.pk-search-results { font-family: var(--pk-font-sans, system-ui, sans-serif); min-width: 0; }
.pk-search-status { margin: 0 0 12px; font-size: 13px; color: var(--pk-text-secondary, #666666); }
.pk-search-status:empty { display: none; }
.pk-search-results[data-state="error"] .pk-search-status { font-weight: 600; }
.pk-search-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.pk-search-result { min-width: 0; }
.pk-search-result-heading { margin: 0; font-size: 15px; line-height: 1.35; font-weight: 600; }
.pk-search-results .pk-search-result-title { color: var(--pk-text-primary, #2d2c31); text-decoration: none; overflow-wrap: anywhere; }
.pk-search-results .pk-search-result-title[href]:hover { text-decoration: underline; }
.pk-search-results .pk-search-result-title[href]:focus-visible { text-decoration: underline; outline: 2px solid currentColor; outline-offset: 2px; border-radius: var(--pk-radius-xs, 2px); }
.pk-search-result-snippet { margin: 4px 0 0; font-size: 14px; line-height: 1.45; color: var(--pk-text-primary, #2d2c31); overflow-wrap: anywhere; }
.pk-search-result-meta { margin: 4px 0 0; font-size: 12px; color: var(--pk-text-secondary, #666666); }
/* Bold, not a fill: not colour alone, and no colour to fail in either mode. */
.pk-search-mark { background: none; color: inherit; font-weight: 700; }
.pk-search-result-heading .pk-search-mark { text-decoration: underline; text-decoration-thickness: 2px; }

/* ---- STCT-8777 variants: layout frames, grouped, empty, selected --------------------------------
   Component-local sizes are DECLARED here (--pk-search-*) and read below; colours only from the theme. */
.pk-search-results {
  --pk-search-group-font-size: 13px;
  --pk-search-group-font-weight: 600;
  --pk-search-check-size: 18px;
  width: 100%;
  box-sizing: border-box;
}

/* DESKTOP: a result is a grid — title left, meta on the same line at the right, snippet under both.
   MOBILE (a 390px container, see @container below): everything stacks. The parent (or the showcase's
   device frame) is the container; the component sets no container-type of its own. */
.pk-search-result {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "heading meta" "snippet snippet";
  column-gap: var(--pk-space-md, 16px);
  align-items: baseline;
}
.pk-search-result-heading { grid-area: heading; }
.pk-search-result-snippet { grid-area: snippet; }
.pk-search-result-meta { grid-area: meta; white-space: nowrap; }

/* Grouped: an <h3> per group (role="group" + aria-labelledby); result headings become <h4>. */
.pk-search-group { min-width: 0; }
.pk-search-group-heading {
  margin: 0 0 var(--pk-space-sm, 8px);
  padding-bottom: var(--pk-space-xs, 4px);
  font-size: var(--pk-search-group-font-size);
  font-weight: var(--pk-search-group-font-weight);
  color: var(--pk-text-secondary, #666666);
  border-bottom: var(--pk-bw-hairline, 1px) solid var(--pk-sem-border-primary, #E6E6E6);
}
.pk-search-group-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--pk-space-md, 16px); }

/* Empty: the status line IS the empty state (always in the DOM, role="status"); it gets room. */
.pk-search-results[data-state="empty"] .pk-search-status { padding: var(--pk-space-md, 16px) 0; }

/* Selected: role="listbox" rows. The selected row shows a CHECK GLYPH plus a tint and an accent edge —
   never colour alone. :focus-visible keeps the user-agent ring (no rule removes the outline). */
.pk-search-selectable .pk-search-result {
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "check heading meta" "check snippet snippet";
  padding: var(--pk-space-sm, 8px) var(--pk-space-md, 16px);
  border-radius: var(--pk-card-radius, var(--pk-radius-s, 6px));
  cursor: pointer;
}
.pk-search-selectable .pk-search-result:hover { background: var(--pk-ramp-primary-05, #F5FBFD); }
.pk-search-selectable .pk-search-result:focus-visible { outline-offset: calc(-1 * var(--pk-bw-active, 2px)); }
.pk-search-result-check {
  grid-area: check;
  align-self: start;
  width: var(--pk-search-check-size);
  height: var(--pk-search-check-size);
  visibility: hidden;
  background: var(--pk-ramp-primary-60, #006D99);
  -webkit-mask: var(--pk-icon) center / contain no-repeat;
  mask: var(--pk-icon) center / contain no-repeat;
}
.pk-search-result-selected .pk-search-result-check { visibility: visible; }
.pk-search-selectable .pk-search-result-selected,
.pk-search-selectable .pk-search-result-selected:hover {
  background: var(--pk-menu-active-bg); color: var(--pk-menu-active-fg);   /* STCT-8989 pattern: the semantic pair, per mode */
  /* STCT-9224: no invented accent edge (the selected/active state is its tint and its glyph) */
}

/* MOBILE (a 390px container): the meta drops under the snippet as its own line. */
@container (max-width: 600px) {
  .pk-search-result { grid-template-columns: minmax(0, 1fr); grid-template-areas: "heading" "snippet" "meta"; }
  .pk-search-selectable .pk-search-result { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "check heading" "check snippet" "check meta"; }
  .pk-search-result-meta { white-space: normal; }
}

/* ==== src/segmented-toggle/segmented-toggle.css ==== */
/* @paprika/skyten-foundation/segmented-toggle — load this sheet; the library does not inject it.
 *
 * ONE control, not N buttons: the track carries the border and the pill radius, the segments have
 * none of their own. The checked segment is a filled pill INSIDE the track — filled background,
 * bolder weight and aria-checked, so the state survives a monochrome brand (epaper).
 *
 * ⛔ --pk-text-secondary for the track border, NOT --pk-sem-border-primary (a hairline that fails
 * 3:1 as a control boundary on 45 of 48 brand-modes, STCT-8681). */

.pk-segtoggle {
  /* No theme token for these yet (STCT-8782 follow-up): declared here so a brand can override them. */
  --pk-segtoggle-inset: calc(var(--pk-space-xs, 4px) / 2);
  --pk-segtoggle-segment-min-height: 28px;
  --pk-segtoggle-font-size: 0.875rem;
  --pk-segtoggle-weight: 500;
  --pk-segtoggle-line-height: 1;
  --pk-segtoggle-sm-segment-min-height: 22px;
  --pk-segtoggle-sm-font-size: 0.75rem;
  --pk-segtoggle-checked-weight: 700;
  --pk-segtoggle-icon-size: 1.1em;
  --pk-segtoggle-sr-size: 1px;
  display: inline-flex;
  align-items: stretch;
  box-sizing: border-box;
  padding: var(--pk-segtoggle-inset);
  gap: var(--pk-segtoggle-inset);
  border: var(--pk-bw-primary, 1px) solid var(--pk-text-secondary, #666);
  border-radius: var(--pk-button-radius, var(--pk-radius-pill, 999px));
  background: var(--pk-sem-bg-surface-secondary, #F2F2F2);
  font-family: var(--pk-font-sans, system-ui, sans-serif);
}

.pk-segtoggle-fullwidth { display: flex; width: 100%; }
.pk-segtoggle-fullwidth .pk-segtoggle-segment { flex: 1 1 0; }

.pk-segtoggle-segment {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pk-space-xs, 4px);
  min-height: var(--pk-segtoggle-segment-min-height);
  padding: 0 var(--pk-space-md, 16px);
  border: 0;
  border-radius: var(--pk-button-radius, var(--pk-radius-pill, 999px));
  background: transparent;
  color: var(--pk-text-secondary, #666);
  font: inherit;
  font-size: var(--pk-segtoggle-font-size);
  font-weight: var(--pk-segtoggle-weight);
  line-height: var(--pk-segtoggle-line-height);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 120ms, color 120ms;
}

.pk-segtoggle-sm .pk-segtoggle-segment {
  min-height: var(--pk-segtoggle-sm-segment-min-height);
  padding: 0 var(--pk-space-sm, 8px);
  font-size: var(--pk-segtoggle-sm-font-size);
}

/* The browser's ring, deliberately — see select.css for the measured reason. */
.pk-segtoggle-segment:focus-visible { outline-offset: 1px; }

.pk-segtoggle-segment:hover:not(:disabled):not(.pk-segtoggle-segment-checked) {
  color: var(--pk-text-primary, #191919);
}

/* Checked: fill + weight. The checked segment IS a selected button, so it paints the brand's
   --pk-button-selected-bg / -fg pair (skyten: marin with the arctic label, the app bar's active
   lozenge; operator 2026-09-25) — not the primary ramp step and the anchor ink it used before. */
.pk-segtoggle-segment-checked {
  background: var(--pk-button-selected-bg, #383B5B);
  color: var(--pk-button-selected-fg, #61BADE);
  font-weight: var(--pk-segtoggle-checked-weight);
}

.pk-segtoggle-segment:disabled { cursor: default; }
.pk-segtoggle-disabled,
.pk-segtoggle-segment:disabled { opacity: 0.55; }
/* a disabled segment inside an enabled control: dim once, not twice */
.pk-segtoggle-disabled .pk-segtoggle-segment:disabled { opacity: 1; }

.pk-segtoggle-icon {
  display: inline-flex;
  flex: 0 0 auto;
  width: var(--pk-segtoggle-icon-size);
  height: var(--pk-segtoggle-icon-size);
}
.pk-segtoggle-icon svg { width: 100%; height: 100%; stroke: currentColor; }

/* iconOnly: the label stays in the DOM for the accessible name, visually hidden. */
.pk-segtoggle-icononly .pk-segtoggle-label {
  position: absolute;
  width: var(--pk-segtoggle-sr-size);
  height: var(--pk-segtoggle-sr-size);
  margin: calc(-1 * var(--pk-segtoggle-sr-size));
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.pk-segtoggle-icononly .pk-segtoggle-segment { padding: 0 var(--pk-space-sm, 8px); }

/* ==== src/select/select.css ==== */
/* @paprika/skyten-foundation/select — a token-styled native <select> (STCT-8670), on the BRAND
 * CONTRACT (STCT-8770): the INPUT family --pk-input-*, extended STCT-9237 — the select wears
 * EXACTLY the text input's chrome (height per size, radius, border, fill, focus ring, hover /
 * invalid / disabled), never a value of its own.
 *
 * ⚠ WHAT THIS SHEET CANNOT STYLE, so nobody files it as a bug: the OPEN option list is drawn by
 * the operating system. appearance:none removes the native arrow from the closed control and
 * nothing more. A design that needs styled options needs a listbox, not this component.
 */

.pk-select { position: relative; display: inline-flex; align-items: center; min-width: 0; }

.pk-select-control {
  appearance: none; -webkit-appearance: none;
  font: inherit;
  font-family: var(--pk-font-sans, system-ui, sans-serif);
  font-size: var(--pk-input-fs, 15px);
  color: var(--pk-input-fg, #191919);
  background: var(--pk-input-bg, #fff);
  border: var(--pk-input-border-w, 1px) solid var(--pk-input-border, #E6E6E6);
  border-radius: var(--pk-input-radius, 4px);
  min-height: var(--pk-input-height, 38px);
  box-sizing: border-box;
  /* right padding leaves room for the arrow the component draws */
  padding: var(--pk-input-pad, 8px 12px);
  padding-right: var(--pk-input-height, 38px);
  width: 100%; min-width: 0;
  cursor: pointer;
}

.pk-select-control:hover:not(:disabled):not(:focus-visible) { border-color: var(--pk-input-border-hover, var(--pk-input-border, #E6E6E6)); }

/* The focus ring: the input's ring, hugging the focus border (the browser outline is replaced, not
   doubled); :focus-visible so a mouse click leaves none behind. */
.pk-select-control:focus-visible {
  border-color: var(--pk-input-border-focus, #383b5b);
  outline: none;
  box-shadow: 0 0 0 var(--pk-input-ring-w, 2px) var(--pk-input-ring, var(--pk-ring-color, currentColor));
}

/* disabled: the brand's disabled border / fill / ink (1.4.3 exempts an inactive control) */
.pk-select-control:disabled {
  cursor: default;
  border-color: var(--pk-input-border-disabled, var(--pk-input-border, #E6E6E6));
  background: var(--pk-input-bg-disabled, var(--pk-input-bg, #fff));
  color: var(--pk-input-fg-disabled, var(--pk-text-disabled, #999));
}

/* invalid: the input's invalid border; aria-invalid and form-fields' message carry it in words */
.pk-select-invalid .pk-select-control,
.pk-select-invalid .pk-select-control:hover { border-color: var(--pk-input-border-invalid, #A92E32); }

/* the arrow: a CSS triangle sized from the brand's space scale, in the control's text colour */
.pk-select-arrow {
  position: absolute; right: var(--pk-space-sm, 8px);
  width: 0; height: 0; pointer-events: none;
  border-left: var(--pk-space-xs, 4px) solid transparent;
  border-right: var(--pk-space-xs, 4px) solid transparent;
  border-top: var(--pk-space-xs, 5px) solid var(--pk-input-fg, #666);
}
.pk-select-control:disabled + .pk-select-arrow { border-top-color: var(--pk-input-fg-disabled, var(--pk-text-disabled, #999)); }

/* the SMALL size (renderSelect({ small: true })): the brand's small step, the same one the text
   input, the date field and the numeric stepper use */
.pk-select-small .pk-select-control {
  min-height: var(--pk-input-height-sm, 30px);
  padding: var(--pk-input-pad-sm, 5px 10px);
  padding-right: var(--pk-input-height-sm, 30px);
  font-size: var(--pk-input-fs-sm, 14px);
}

/* ==== src/separator/separator.css ==== */
/* separator.css — on the BRAND CONTRACT (STCT-8770). tools-brands `.pk-separator`: a horizontal stroke in
   the brand's subtle border colour with the brand's vertical pad around it. `data-pk-orientation="vertical"`
   (renderSeparator({ vertical: true })) is the inline divider, a line of the base type tall. */

.pk-separator {
  display: block;
  height: var(--pk-stroke, 1px);
  /* STCT-9098: the brand's PRIMARY border — the divider ink every rule in the library uses (pane bar,
     menu separator); the subtle border is invisible on the card (skyten light: #F2F3F3 on white). */
  background: var(--pk-sem-border-primary, #E6E6E6);
  margin: var(--pk-pad-y, 8px) 0;
  border: 0;
}
.pk-separator[data-pk-orientation="vertical"] {
  display: inline-block;
  height: calc(var(--pk-fs-base, 15px) * var(--pk-lh, 1.5));
  width: var(--pk-stroke, 1px);
  margin: 0 var(--pk-pad-x-sm, 8px);
  vertical-align: middle;
}

/* ==== src/settings-modal/settings-modal.css ==== */
/* @paprika/settings-modal — canonical Settings modal CSS (STCT-5970, APP-767/APP-762 R3), extracted
   from OptSim's nav.css (webapp-optionssimulator @4aeb6d2b) and re-based on the BRAND CONTRACT
   (STCT-8770): the card family for the dialog, the scrim token, the type scale, the brand's primary /
   on-primary pair for a selected option. Same .pk-settings-* class names. */

/* STCT-8817: #pk-settings is the native <dialog> (showModal). The browser's own dialog box is reset
   so it looks as the old <div> did; the closed state is hidden explicitly because an author rule
   beats the browser's dialog:not([open]) { display: none }. */
#pk-settings {
  position: fixed; inset: 0; z-index: 100;
  box-sizing: border-box; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; color: inherit;
  background: var(--pk-sem-nav-scrim);
  display: flex; align-items: center; justify-content: center;
}
#pk-settings:not([open]) { display: none; }
#pk-settings::backdrop { background: transparent; }
.pk-settings-card {
  background: var(--pk-card-bg);
  color: var(--pk-text-primary);
  border: var(--pk-card-border-w) solid var(--pk-card-border);
  border-radius: var(--pk-card-radius);
  box-shadow: var(--pk-shadow-modal);
  width: min(calc(var(--pk-container-max-width) / 2), 92vw);
  max-height: 84vh; overflow-y: auto;
  padding: var(--pk-card-pad);
  font-family: var(--pk-font-sans);
  font-size: var(--pk-fs-base);
  line-height: var(--pk-lh);
}
.pk-settings-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: var(--pk-space-sm);
}
.pk-settings-close {
  background: none; border: none; color: inherit; font-size: var(--pk-fs-h4); cursor: pointer;
}
.pk-settings-group h4 {
  margin: var(--pk-space-sm) 0 var(--pk-space-xs);
  font-size: var(--pk-fs-caption); letter-spacing: var(--pk-ls); font-weight: var(--pk-fw-heading);
  color: var(--pk-text-secondary);
}
.pk-settings-row {
  display: flex; flex-wrap: wrap; gap: var(--pk-gap); align-items: center; margin-bottom: var(--pk-gap);
}
.pk-settings-label { flex: 0 0 calc(10 * var(--pk-fs-base)); font-size: var(--pk-fs-small); }
.pk-settings-btn {
  background: var(--pk-button-secondary-bg); color: var(--pk-button-secondary-fg); font: inherit;
  font-size: var(--pk-fs-small);
  border: var(--pk-button-border-w) solid var(--pk-button-secondary-border);
  border-radius: var(--pk-button-radius);
  padding: var(--pk-pad-y-sm) var(--pk-pad-x-sm); cursor: pointer;
}
.pk-settings-btn.pk-on {
  background: var(--pk-primary); color: var(--pk-on-primary); border-color: var(--pk-primary);
}
/* STCT-9511: the swatch brand grid (.pk-brand-*) is gone; the Theme section hosts the theme picker
   (theme-picker/theme-picker.css). */

/* ==== src/side-rail-toggle/side-rail-toggle.css ==== */
/* @paprika/skyten-foundation/side-rail-toggle — load this sheet; the library does not inject it.
 *
 * A quiet icon button: no fill at rest, a tint on hover, and the state carried by the chevron's
 * direction and the accessible name — never by colour. */

.pk-side-rail-toggle {
  /* No theme token for these yet (STCT-8782 follow-up): declared here so a brand can override them. */
  --pk-side-rail-toggle-size: 32px;
  --pk-side-rail-toggle-font-size: 0.8125rem;
  --pk-side-rail-toggle-line-height: 1;
  --pk-side-rail-toggle-icon-size: 1.125rem;
  --pk-side-rail-toggle-sm-size: 24px;
  --pk-side-rail-toggle-sm-font-size: 0.75rem;
  --pk-side-rail-toggle-sm-icon-size: 0.875rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pk-space-xs, 4px);
  height: var(--pk-side-rail-toggle-size);
  min-width: var(--pk-side-rail-toggle-size);
  padding: 0 var(--pk-space-xs, 4px);
  border: 0;
  border-radius: var(--pk-button-radius, var(--pk-radius-s, 6px));
  background: transparent;
  color: var(--pk-text-secondary, #666);
  font-family: var(--pk-font-sans, system-ui, sans-serif);
  font-size: var(--pk-side-rail-toggle-font-size);
  line-height: var(--pk-side-rail-toggle-line-height);
  cursor: pointer;
}
.pk-side-rail-toggle:hover {
  background: var(--pk-ramp-primary-10, #E0F2F9);
  color: var(--pk-text-primary, #191919);
}
/* The browser's ring, on purpose — see select.css for the 16-of-48 brand measurement. */
.pk-side-rail-toggle:focus-visible { outline-offset: 1px; }

.pk-side-rail-toggle-sm { height: var(--pk-side-rail-toggle-sm-size); min-width: var(--pk-side-rail-toggle-sm-size); font-size: var(--pk-side-rail-toggle-sm-font-size); }

.pk-side-rail-toggle-icon { display: inline-flex; width: var(--pk-side-rail-toggle-icon-size); height: var(--pk-side-rail-toggle-icon-size); }
.pk-side-rail-toggle-sm .pk-side-rail-toggle-icon { width: var(--pk-side-rail-toggle-sm-icon-size); height: var(--pk-side-rail-toggle-sm-icon-size); }
.pk-side-rail-toggle-icon svg { width: 100%; height: 100%; }

/* With a visible label the button widens into a text button; the label stays on one line. */
.pk-side-rail-toggle-label { white-space: nowrap; padding-right: var(--pk-space-xs, 4px); }

/* ==== src/skyten-table/skyten-table.css ==== */
/* @paprika/skyten-foundation — canonical skyten-table CSS (STCT-5970, APP-762 R3), on the BRAND
   CONTRACT (STCT-8770). Depends on a brands/theme-<brand>.css being linked.

   The complete table family comes from the brand: --pk-table-header-bg / -fg / -weight / -transform /
   -ls / -align / -pad / -fs / -rule / -rule-w, --pk-table-fs / -lh / -pad, --pk-table-rule-top / -bottom,
   --pk-table-row-rule / -row-alt (zebra: transparent where the brand has none) / -row-hover,
   --pk-table-vertical-rule, --pk-table-radius, --pk-table-numeric-align, and the two variants the
   brand JSON lists: compact (--pk-table-pad-compact / -fs-compact) and bordered (--pk-table-border).
   renderTable({ density: 'compact', bordered: true }) selects them; nothing here invents a value. */

.pk-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--pk-font-sans);
  font-size: var(--pk-table-fs);
  line-height: var(--pk-table-lh);
  color: var(--pk-text-primary);
  background: var(--pk-sem-bg-surface-secondary);
  border-top: var(--pk-table-rule-top);
  border-bottom: var(--pk-table-rule-bottom);
  border-radius: var(--pk-table-radius);
}
.pk-table thead th {
  text-align: var(--pk-table-header-align);
  font-size: var(--pk-table-header-fs);
  font-weight: var(--pk-table-header-weight);
  text-transform: var(--pk-table-header-transform);
  letter-spacing: var(--pk-table-header-ls);
  color: var(--pk-table-header-fg);
  background: var(--pk-table-header-bg);
  padding: var(--pk-table-header-pad);
  border-bottom: var(--pk-table-header-rule-w) solid var(--pk-table-header-rule);
}
.pk-table tbody td {
  padding: var(--pk-table-pad);
  border-bottom: var(--pk-table-row-rule);
}
.pk-table tbody tr:nth-child(even) { background: var(--pk-table-row-alt); }
.pk-table tbody tr:hover { background: var(--pk-table-row-hover); }
/* STCT-9906 (ruby): the hovered row between two hairlines (inset, so nothing moves); transparent elsewhere */
.pk-table tbody tr:hover > td { box-shadow: inset 0 1px 0 var(--pk-table-row-hover-hairline, transparent), inset 0 -1px 0 var(--pk-table-row-hover-hairline, transparent); }
.pk-table tbody tr:last-child td { border-bottom: none; }
.pk-table th + th, .pk-table td + td { border-left: var(--pk-table-vertical-rule); }
.pk-table tfoot td {
  padding: var(--pk-table-pad);
  border-top: var(--pk-table-header-rule-w) solid var(--pk-table-header-rule);
  font-weight: var(--pk-table-header-weight);
}
/* numeric columns (type decimal / integer / percent…): the brand's numeric alignment */
.pk-table [data-pk-numeric] { text-align: var(--pk-table-numeric-align); font-variant-numeric: tabular-nums; }
.pk-table .pk-table-empty {
  text-align: center;
  color: var(--pk-text-secondary);
  padding: var(--pk-pad-container);
}
.pk-table-img-cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pk-table-img-cell img {
  width: var(--pk-nav-icon-size);
  height: var(--pk-nav-icon-size);
  object-fit: contain;
  border-radius: var(--pk-radius-pill);
}

/* STCT-9512 — overflow: 'scroll'. Every column keeps its natural width (max-content), the table fills the
   region when it is narrower, and a wider table scrolls INSIDE the region: the page never scrolls sideways.
   Without this, a 100%-wide table in a narrow container shrinks cells of controls until their values are clipped. */
.pk-table-scroll {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.pk-table-scroll > .pk-table { width: max-content; min-width: 100%; }
.pk-table-scroll:focus-visible { outline: var(--pk-ring, 2px) solid var(--pk-ring-color, currentColor); outline-offset: var(--pk-ring-offset); }

/* ---- the brand's two variants (brand JSON table.variants) ---- */
.pk-table-compact tbody td, .pk-table-compact tfoot td { padding: var(--pk-table-pad-compact); font-size: var(--pk-table-fs-compact); }
.pk-table-compact thead th { padding: var(--pk-table-pad-compact); }
.pk-table-bordered { border: var(--pk-table-border); }
.pk-table-bordered th, .pk-table-bordered td { border: var(--pk-table-border); }

/* v2: sort (STCT-5970/STCT-5891, PM_Int-ratified 2026-09-04, Confluence 1373798402) */
.pk-table thead th.pk-table-sortable {
  cursor: pointer;
  user-select: none;
}
/* STCT-9047: the control is a <button> (keyboard), styled as the header it sits in */
.pk-table-sort-button {
  display: inline-flex;
  align-items: center;
  gap: var(--pk-space-xs);
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  cursor: pointer;
}
.pk-table-sort-button:focus-visible { outline: var(--pk-ring, 2px) solid var(--pk-ring-color, currentColor); outline-offset: var(--pk-ring-offset); }
/* STCT-9526: a Node label sits beside the button (which then holds only the arrow), never inside it */
.pk-table-sort-label + .pk-table-sort-button { margin-inline-start: var(--pk-space-xs); }
/* the unsorted glyph is a visible ink, not 30% opacity of the header text: it is the only sign a column
   sorts (STCT-9047; the operator saw "no table sort controls") */
.pk-table-sort-arrow {
  display: inline-block;
  width: var(--pk-space-sm);
  color: var(--pk-text-secondary);
}
.pk-table-sort-arrow::after {
  content: '\2195'; /* neutral up-down */
}
.pk-table-sort-asc .pk-table-sort-arrow,
.pk-table-sort-desc .pk-table-sort-arrow {
  color: inherit;
}
.pk-table-sort-asc .pk-table-sort-arrow::after {
  content: '\2191'; /* up */
}
.pk-table-sort-desc .pk-table-sort-arrow::after {
  content: '\2193'; /* down */
}

/* v2: group (same ratification) */
.pk-table-group-header td {
  background: var(--pk-sem-bg-sunken);
  font-weight: var(--pk-table-header-weight);
  font-size: var(--pk-table-header-fs);
  color: var(--pk-text-secondary);
  padding: var(--pk-table-pad-compact);
}
/* STCT-8974: a multi-level grouping (groupBy: [a, b, c]) draws one header per level, data-pk-group-level
   1..3. Each inner level is indented by one --pk-space-lg step from the brand (the level is also in the
   attribute and in the label text, so the hierarchy is never position alone), and the outermost band
   keeps the header weight while inner bands step down to the body weight. */
.pk-table-group-header { --pk-table-group-level: 1; }   /* the row overrides it inline: 1, 2 or 3 */
/* `.pk-table tbody tr… td` outranks the compact variant's `.pk-table-compact tbody td` padding, which
   otherwise reset this indent to the plain compact padding (measured in chromium + firefox). */
.pk-table tbody tr.pk-table-group-header td {
  padding-left: calc(var(--pk-space-sm) + var(--pk-space-lg) * (var(--pk-table-group-level, 1) - 1));
}
.pk-table-group-header[data-pk-group-level="2"] td,
.pk-table-group-header[data-pk-group-level="3"] td {
  font-weight: inherit;
  background: var(--pk-sem-bg-surface-secondary);
}
.pk-table-group-header[data-pk-group-level="3"] td { color: var(--pk-text-subtle); }

/* STCT-8992 — variant 'accounting': fixed-width statement pages. The text is laid out to an exact
   character width (132 or 80) by layoutAccounting(), so the font MUST be monospaced: a proportional face
   breaks every column. The brand's mono token first, then the platform's. */
.pk-table-accounting { display: flex; flex-direction: column; gap: var(--pk-space-lg, 16px); max-width: 100%; }
.pk-table-accounting-page {
  margin: 0;
  padding: var(--pk-space-md, 12px);
  font-family: var(--pk-font-mono, ui-monospace, "Courier New", monospace);
  font-size: var(--pk-fs-caption, 12px);
  line-height: var(--pk-table-lh);   /* STCT-8992 follow-up: the brand's table line height, not a literal (css:invented) */
  white-space: pre;
  overflow-x: auto;
  color: var(--pk-text-primary, #191919);
  background: var(--pk-sem-bg-surface-secondary, #fff);
  border: var(--pk-stroke, 1px) solid var(--pk-sem-border-primary, #E6E6E6);
  break-after: page;
}
/* ⛔ A statement line NEVER wraps. A host's generic `main pre { white-space: pre-wrap }` (0,1,1) beat the rule
   above (0,1,0) and folded every 80/132-column line (found in the showcase, STCT-9045); this one (0,2,0) holds. */
.pk-table-accounting .pk-table-accounting-page { white-space: pre; overflow-wrap: normal; overflow-x: auto; }
.pk-table-accounting-problem { color: var(--pk-text-primary, #191919); padding: var(--pk-space-sm, 8px) var(--pk-space-md, 12px); }

/* STCT-9019 — a row that opens something: the pointer, a hover tint from the row family, and a visible
   focus ring (the row is focusable; Enter / Space activate it). */
.pk-table-row-activatable { cursor: pointer; }
.pk-table-row-activatable:hover > td { background: var(--pk-table-row-hover, var(--pk-sem-bg-sunken, #F7F7F8)); }
.pk-table-row-activatable:focus-visible { outline: var(--pk-ring, 2px) solid var(--pk-text-primary, #191919); outline-offset: -2px; }

/* STCT-9083 — progressCell: a fill bar, the number with its state marker, an optional detail line.
   ⛔ THE FILL IS ALWAYS NEUTRAL; THE STATE IS THE MARKER CHIP. Measured over all 140 brand x mode sheets:
   --pk-warning as a fill on the track is under 3:1 in 74 of them, so a warning-coloured bar would make the
   LENGTH unreadable exactly when it matters. --pk-price-neutral on --pk-sem-bg-surface-secondary is >= 3:1
   in 140/140 (min 4.02). The chip (~ warning, ! danger) is the ramp pair, >= 4.5:1 in 138/140 and 140/140;
   progress-cell-contrast.test.js measures every pair and records the brand-data near-misses. */
.pk-progress-cell {
  display: inline-grid;
  grid-template-columns: minmax(3rem, 6rem) auto;
  align-items: center;
  column-gap: var(--pk-space-sm, 8px);
  min-inline-size: 0;
}
.pk-progress-bar {
  display: block;
  block-size: var(--pk-space-sm, 8px);
  border-radius: var(--pk-radius-pill, 999px);
  background: var(--pk-sem-bg-surface-secondary, #fff);
  box-shadow: inset 0 0 0 var(--pk-stroke, 1px) var(--pk-price-neutral, #808080);
  overflow: hidden;
}
.pk-progress-fill {
  display: block;
  block-size: 100%;
  background: var(--pk-price-neutral, #808080);
}
.pk-progress-figure {
  display: inline-flex;
  align-items: center;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pk-progress-marker:empty { display: none; }
.pk-progress-marker {
  display: inline-block;
  min-inline-size: 1.25em;
  margin-inline-start: var(--pk-space-xs, 4px);
  padding-inline: var(--pk-space-xs, 4px);
  border-radius: var(--pk-radius-pill, 999px);
  font-weight: var(--pk-fw-heading, 600);
  text-align: center;
}
.pk-progress-cell[data-pk-state='warning'] .pk-progress-marker {
  color: var(--pk-ramp-orange-100, #7B2224);
  background: var(--pk-ramp-orange-10, #FDF0C2);
}
.pk-progress-cell[data-pk-state='danger'] .pk-progress-marker {
  color: var(--pk-ramp-red-100, #7B2224);
  background: var(--pk-ramp-red-10, #FBE8E8);
}
.pk-progress-detail {
  grid-column: 1 / -1;
  font-size: var(--pk-fs-caption, 12px);
  color: var(--pk-text-secondary, #666);
  white-space: nowrap;
}
.pk-progress-cell-problem {
  display: inline;
  font-style: italic;
  color: var(--pk-text-secondary, #666);
}

/* STCT-9124: a headerless table (header: false). The header row stays a real table-header-group in the
   accessibility tree (its labels name the cells). Nothing on the thead or its cells is positioned: a positioned
   thead is blockified, and WebKit builds table semantics from the render tree (PM_Fe's review of #201). So the
   cells collapse to nothing, and each LABEL is the 1px visually-hidden box (primary border-width token, 1px). */
.pk-table thead.pk-table-head-hidden th {
  padding: 0;
  border: 0;
  height: 0;
  line-height: 0;
}
.pk-table thead.pk-table-head-hidden .pk-table-head-label {
  position: absolute;
  width: var(--pk-bw-primary, 1px);
  height: var(--pk-bw-primary, 1px);
  margin: calc(-1 * var(--pk-bw-primary, 1px));
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ==== src/slider/slider.css ==== */
/* @paprika/skyten-foundation/slider — token-styled range control (STCT-8777).
 * Load this sheet; the library does not inject it.
 *
 * The native input is transparent and sits over a track the component draws, so the fill can use
 * the brand accent and the thumb can carry a border. --pk-slider-lo / --pk-slider-hi are DECLARED
 * here and set inline by the script as percentages; they are the only component-local names. */

.pk-slider {
  --pk-slider-lo: 0%;
  --pk-slider-hi: 0%;
  --pk-slider-thumb: 1.125rem;
  --pk-slider-track: 0.375rem;
  /* No theme token for these yet (STCT-8782 follow-up): declared here so a brand can override them. */
  --pk-slider-min-width: calc(var(--pk-space-xl, 32px) * 4);
  --pk-slider-scale-height: var(--pk-space-lg, 24px);
  --pk-slider-font-size: 0.8125rem;
  --pk-slider-font-size-sm: 0.75rem;
  --pk-slider-font-weight: 600;
  display: flex;
  flex-direction: column;
  gap: var(--pk-space-xs, 4px);
  width: 100%;
  min-width: var(--pk-slider-min-width);
  font-family: var(--pk-font-sans, system-ui, sans-serif);
  color: var(--pk-text-primary, #191919);
}

.pk-slider-rail {
  position: relative;
  height: var(--pk-slider-thumb);
  display: flex;
  align-items: center;
}

/* The rail is a UI boundary, not a divider: the text token at reduced opacity keeps it visible
 * on both modes (the hairline token fails 3:1 as a boundary on 45/48 brand-modes). The tint is
 * on a ::before so the fill, a sibling, is not dimmed with it. */
.pk-slider-track {
  position: absolute;
  left: 0;
  right: 0;
  height: var(--pk-slider-track);
  border-radius: var(--pk-radius-pill, 999px);
  pointer-events: none;
}
.pk-slider-track::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--pk-text-secondary, #666);
  opacity: 0.35;
}

/* The filled part: the brand's --pk-slider-fill (STCT-9237), with --pk-slider-fill-image laid over
 * it when the brand declares a gradient (skyten: arctic to marin, left to right). The image spans
 * this element's own box, so on a two-thumb range it runs across the SELECTED segment. */
.pk-slider-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pk-slider-lo);
  right: calc(100% - var(--pk-slider-hi));
  border-radius: inherit;
  background-color: var(--pk-slider-fill, var(--pk-ramp-primary-60, #007FB1));
  background-image: var(--pk-slider-fill-image, none);
}

.pk-slider-input {
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  left: 0;
  width: 100%;
  height: var(--pk-slider-thumb);
  margin: 0;
  background: transparent;
  cursor: pointer;
}
.pk-slider-input:disabled { cursor: default; }

/* ⛔ THE THUMB HAS A BORDER so it exists on both modes: a solid accent disc vanishes into a dark
 * accent-tinted page. Border = the text token (text-grade contrast by construction); inner = the
 * surface, so the disc reads as a ring on any background. */
.pk-slider-input::-webkit-slider-runnable-track { background: transparent; height: var(--pk-slider-thumb); }
.pk-slider-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: var(--pk-slider-thumb);
  height: var(--pk-slider-thumb);
  border-radius: var(--pk-radius-pill, 999px);
  background: var(--pk-sem-bg-surface-primary, #fff);
  border: var(--pk-bw-active, 2px) solid var(--pk-ramp-primary-60, #007FB1);
  box-shadow: 0 0 0 var(--pk-bw-hairline, 1px) var(--pk-text-secondary, #666);
}
.pk-slider-input::-moz-range-track { background: transparent; height: var(--pk-slider-thumb); }
.pk-slider-input::-moz-range-thumb {
  width: var(--pk-slider-thumb);
  height: var(--pk-slider-thumb);
  border-radius: var(--pk-radius-pill, 999px);
  background: var(--pk-sem-bg-surface-primary, #fff);
  border: var(--pk-bw-active, 2px) solid var(--pk-ramp-primary-60, #007FB1);
  box-shadow: 0 0 0 var(--pk-bw-hairline, 1px) var(--pk-text-secondary, #666);
  box-sizing: border-box;
}

/* The browser's focus ring, on purpose (select.css). It is drawn around the whole input, which is
 * the platform's convention for a range control. */
.pk-slider-input:focus-visible { outline-offset: 1px; }

/* Two stacked inputs: only the THUMBS take the pointer, so both are draggable — an input on top
 * that also took the track would block the one underneath. */
.pk-slider-range .pk-slider-input { pointer-events: none; }
.pk-slider-range .pk-slider-input::-webkit-slider-thumb { pointer-events: auto; }
.pk-slider-range .pk-slider-input::-moz-range-thumb { pointer-events: auto; }

.pk-slider-disabled { opacity: 0.55; }

/* The scale: tick marks and labelled marks positioned by percentage under the rail. */
.pk-slider-scale {
  position: relative;
  height: var(--pk-slider-scale-height);
  margin: 0 calc(var(--pk-slider-thumb) / 2);
  font-size: var(--pk-slider-font-size-sm);
  color: var(--pk-text-secondary, #666);
}
.pk-slider-tick {
  position: absolute;
  top: 0;
  width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.pk-slider-tick::before {
  content: '';
  display: block;
  width: var(--pk-bw-hairline, 1px);
  height: var(--pk-slider-track);   /* the tick is as tall as the track is thick */
  background: var(--pk-text-secondary, #666);
}
.pk-slider-mark::before { width: var(--pk-bw-active, 2px); background: var(--pk-text-primary, #191919); }
.pk-slider-mark { color: var(--pk-text-primary, #191919); font-weight: var(--pk-slider-font-weight); }
.pk-slider-tick-label {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  transform: translateX(-50%);
  margin-left: 50%;
}
/* STCT-9237: a label centred on the FIRST or LAST tick hangs half outside the rail and is clipped by
 * the container ("Low" read as "w"). The end labels sit inside the rail instead: the first starts at
 * its tick, the last ends at its tick. */
.pk-slider-tick-first .pk-slider-tick-label { transform: none; margin-left: 0; }
.pk-slider-tick-last .pk-slider-tick-label { transform: translateX(-100%); margin-left: 0; }

/* The value as text: what the position on the track can only approximate. */
.pk-slider-value {
  align-self: flex-end;
  font-size: var(--pk-slider-font-size);
  font-variant-numeric: tabular-nums;
  font-weight: var(--pk-slider-font-weight);
  color: var(--pk-text-primary, #191919);
}

/* ==== src/sortable-list/sortable-list.css ==== */
/* @paprika/skyten-foundation/sortable-list — load this sheet; the library does not inject it (STCT-12001).
 *
 * The list's rows carry a 44 × 44 grab handle (the button height token, the same size every touch target in
 * the library uses), an outline in --pk-text-secondary, and while lifted a drop indicator in --pk-ring-color,
 * two strong strokes thick (4 px under the default theme). The focus ring is the full ring
 * (`var(--pk-ring) solid var(--pk-ring-color)`, STCT-11444). No colour, size or radius is invented: every
 * value is a theme token with its default-theme fallback, or a component knob declared here (STCT-8782). */

.pk-sortable {
  --pk-sortable-handle-size: var(--pk-button-height, 44px);
  --pk-sortable-indicator-w: calc(2 * var(--pk-stroke-strong, 2px));
  --pk-sortable-dy: 0px;
  --pk-sortable-lifted-opacity: 0.9;
  --pk-sortable-glyph-size: 1.25rem;
  --pk-sortable-step-min-width: 2.5rem;
  --pk-sortable-step-font-weight: 600;
  position: relative;
  font-family: var(--pk-font-sans, system-ui, sans-serif);
  color: var(--pk-text-primary, #191919);
}

.pk-sortable-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--pk-space-xs, 4px);
  position: relative;
}

.pk-sortable-item {
  position: relative;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--pk-space-sm, 8px);
  min-height: var(--pk-sortable-handle-size);
  padding: 0 var(--pk-space-sm, 8px) 0 0;
  background: var(--pk-sem-bg-surface-primary, #fff);
  border: var(--pk-stroke, 1px) solid var(--pk-text-secondary, #666);
  border-radius: var(--pk-radius-s, 4px);
  /* touch: the row is a long-press target. These stop the callout and the selection; the SCROLL is stopped by the
     non-passive touchmove listener in index.js — touch-action alone does not cancel a gesture iOS has begun. */
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
}

/* the 44 × 44 handle: a real button, the user-agent focus target */
.pk-sortable-handle {
  flex: 0 0 auto;
  box-sizing: border-box;
  width: var(--pk-sortable-handle-size);
  height: var(--pk-sortable-handle-size);
  margin: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--pk-radius-s, 4px);
  background: transparent;
  color: var(--pk-text-secondary, #666);
  cursor: grab;
  touch-action: none;
}
.pk-sortable-handle:hover { color: var(--pk-text-primary, #191919); }
.pk-sortable-handle[aria-pressed='true'] { cursor: grabbing; color: var(--pk-text-primary, #191919); }
.pk-sortable-handle[aria-disabled='true'] { cursor: default; color: var(--pk-text-disabled, #999); }
.pk-sortable-handle:focus-visible {
  outline: var(--pk-ring, 2px) solid var(--pk-ring-color, currentColor);
  outline-offset: calc(-1 * var(--pk-ring, 2px));
}

.pk-sortable-handle-glyph {
  display: inline-block;
  width: var(--pk-sortable-glyph-size);
  height: var(--pk-sortable-glyph-size);
  background: currentColor;
  -webkit-mask: var(--pk-icon) center / contain no-repeat;
  mask: var(--pk-icon) center / contain no-repeat;
}

.pk-sortable-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--pk-fs-base, 15px);
}

.pk-sortable-slot { flex: 0 1 auto; min-width: 0; }

/* pinned: the row is a wall; its handle is a visual anchor, not a grip */
.pk-sortable-item[data-pk-sortable-pinned='true'] {
  background: var(--pk-sem-bg-sunken, #F7F7F8);
  border-style: dashed;
}

/* lifted: follows the pointer (mouse) or sits where the arrows moved it (keyboard) above its siblings */
.pk-sortable-item[data-pk-sortable-lifted='true'] {
  z-index: 1;
  transform: translateY(var(--pk-sortable-dy));
  opacity: var(--pk-sortable-lifted-opacity);
  box-shadow: var(--pk-shadow-raised, none);
  outline: var(--pk-stroke-strong, 2px) solid var(--pk-text-secondary, #666);
  outline-offset: 0;
}
.pk-sortable[data-pk-sortable-dragging='pointer'] { cursor: grabbing; }
.pk-sortable[data-pk-sortable-dragging='pointer'] .pk-sortable-item[data-pk-sortable-lifted='true'] { pointer-events: none; }

/* the drop indicator: a zero-height row whose line overflows the gap, so nothing shifts while it is shown */
.pk-sortable-indicator {
  position: relative;
  height: 0;
  margin: calc(-1 * var(--pk-space-xs, 4px) / 2) 0;
  pointer-events: none;
  overflow: visible;
}
.pk-sortable-indicator::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: calc(-1 * var(--pk-sortable-indicator-w) / 2);
  height: var(--pk-sortable-indicator-w);
  border-radius: var(--pk-radius-pill, 999px);
  background: var(--pk-ring-color, currentColor);
}
.pk-sortable-indicator[data-pk-sortable-indicator-denied='true']::before { background: var(--pk-danger, #DF3D42); }

/* the per-item step control: − value + ; the buttons are the handle's size */
.pk-sortable-step {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--pk-space-xs, 4px);
}
.pk-sortable-step-button {
  box-sizing: border-box;
  width: var(--pk-sortable-handle-size);
  height: var(--pk-sortable-handle-size);
  margin: 0;
  padding: 0;
  border: var(--pk-stroke, 1px) solid var(--pk-sem-border-primary, #E6E6E6);
  border-radius: var(--pk-radius-s, 4px);
  background: var(--pk-sem-bg-surface-secondary, #fff);
  color: var(--pk-text-primary, #191919);
  font: inherit;
  cursor: pointer;
}
.pk-sortable-step-button:disabled { color: var(--pk-text-disabled, #999); cursor: default; }
.pk-sortable-step-button:focus-visible {
  outline: var(--pk-ring, 2px) solid var(--pk-ring-color, currentColor);
  outline-offset: var(--pk-ring-offset, 2px);
}
.pk-sortable-step-value {
  min-width: var(--pk-sortable-step-min-width);
  text-align: center;
  font-family: var(--pk-font-numeric, var(--pk-font-sans, system-ui, sans-serif));
  font-weight: var(--pk-sortable-step-font-weight);
  font-variant-numeric: tabular-nums;
}

/* the live region: present for assistive technology, clipped away (the app-shell's pattern — its only size is
   "exists", so it borrows the hairline width rather than inventing one; css:invented, STCT-8782) */
.pk-sortable-live {
  position: absolute;
  width: var(--pk-bw-primary, 1px);
  height: var(--pk-bw-primary, 1px);
  margin: calc(-1 * var(--pk-bw-primary, 1px));
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── the drop tray ── */
.pk-drop-tray {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--pk-space-sm, 8px);
  padding: var(--pk-space-md, 16px);
  font-family: var(--pk-font-sans, system-ui, sans-serif);
  color: var(--pk-text-primary, #191919);
  background: var(--pk-sem-bg-sunken, #F7F7F8);
  border: var(--pk-stroke, 1px) dashed var(--pk-text-secondary, #666);
  border-radius: var(--pk-radius-m, 8px);
}
.pk-drop-tray[data-pk-drop-tray-over='true'] {
  border-style: solid;
  border-color: var(--pk-ring-color, currentColor);
  box-shadow: 0 0 0 var(--pk-ring, 2px) var(--pk-ring-color, currentColor);
}
.pk-drop-tray[data-pk-drop-tray-deny='true'] {
  border-color: var(--pk-danger, #DF3D42);
  box-shadow: 0 0 0 var(--pk-ring, 2px) var(--pk-danger, #DF3D42);
  background: var(--pk-danger-bg, #FBE8E8);
}

.pk-drop-tray-title {
  margin: 0;
  font-size: var(--pk-fs-small, 14px);
  font-weight: var(--pk-fw-heading, 700);
  color: var(--pk-text-heading, var(--pk-text-primary, #191919));
}

.pk-drop-tray-hint,
.pk-drop-tray-empty {
  margin: 0;
  font-size: var(--pk-fs-small, 14px);
  color: var(--pk-text-secondary, #666);
}
.pk-drop-tray[data-pk-drop-tray-deny='true'] .pk-drop-tray-hint { color: var(--pk-text-danger, #C4363A); }

.pk-drop-tray-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--pk-space-xs, 4px);
}
.pk-drop-tray-list:empty { display: none; }

.pk-drop-tray-item {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--pk-space-sm, 8px);
  min-height: var(--pk-button-height, 44px);
  padding: 0 0 0 var(--pk-space-sm, 8px);
  background: var(--pk-sem-bg-surface-primary, #fff);
  border: var(--pk-stroke, 1px) solid var(--pk-sem-border-primary, #E6E6E6);
  border-radius: var(--pk-radius-s, 4px);
}
.pk-drop-tray-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--pk-fs-base, 15px);
}

/* "Add": a 44 px target, the brand's standard button face */
.pk-drop-tray-add {
  flex: 0 0 auto;
  box-sizing: border-box;
  min-width: var(--pk-button-height, 44px);
  height: var(--pk-button-height, 44px);
  margin: 0;
  padding: var(--pk-button-standard-pad, 0 24px);
  border: var(--pk-button-border-w, 1px) solid var(--pk-button-standard-border, #ccc);
  border-radius: var(--pk-button-radius, 999px);
  background: var(--pk-button-standard-bg, #E6E6E6);
  color: var(--pk-button-standard-fg, #2d2c31);
  font-family: inherit;
  font-size: var(--pk-button-fs, 16px);
  font-weight: var(--pk-button-weight, 600);
  cursor: pointer;
}
.pk-drop-tray-add:hover {
  background: var(--pk-button-standard-hover-bg, #b2b2b2);
  color: var(--pk-button-standard-hover-fg, #fff);
}
.pk-drop-tray-add:focus-visible {
  outline: var(--pk-ring, 2px) solid var(--pk-ring-color, currentColor);
  outline-offset: var(--pk-ring-offset, 2px);
}

/* ==== src/stat-tile/stat-tile.css ==== */
/* @paprika/skyten-foundation/stat-tile — load this sheet; the library does not inject it.
 * On the BRAND CONTRACT (STCT-8770): the card family for the tile, the type scale for its text, the
 * brand's price and status colours for the cues.
 *
 * ⛔ COLOUR IS THE THIRD CUE HERE, NEVER THE FIRST. The sign and the glyph carry the direction and
 * the accessible name says the word; the figure itself never takes a price token. */

.pk-stat {
  /* The tile is the query container, so the FIGURE sizes itself to the tile rather than to the
   * viewport. `container-type: inline-size` applies inline-size CONTAINMENT, so min-width is a real
   * floor, not 0: a tile narrower than ~12 characters of the base type cannot hold a figure and a
   * caption, and the floor is derived from the brand's type, not a fixed pixel. */
  container-type: inline-size;
  min-width: calc(12 * var(--pk-fs-base, 15px));
  display: flex;
  flex-direction: column;
  gap: var(--pk-space-xs, 4px);
  padding: var(--pk-card-pad, 16px);
  background: var(--pk-card-bg, #fff);
  border: var(--pk-card-border-w, 1px) solid var(--pk-card-border, #E6E6E6);
  border-radius: var(--pk-card-radius, 8px);
  box-shadow: var(--pk-card-shadow, none);
  font-family: var(--pk-font-sans, system-ui, sans-serif);
  color: var(--pk-text-primary, #191919);
}

.pk-stat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pk-space-xs, 4px);
  min-width: 0;
}

.pk-stat-label {
  font-size: var(--pk-fs-caption, 12px);
  color: var(--pk-text-secondary, #666);
  overflow-wrap: break-word;
}

.pk-stat-icon {
  flex: 0 0 auto;
  width: var(--pk-fs-base, 16px);
  height: var(--pk-fs-base, 16px);
  background: var(--pk-text-secondary, #666);
  -webkit-mask: var(--pk-icon) center / contain no-repeat;
  mask: var(--pk-icon) center / contain no-repeat;
}

/* ⛔ A NUMBER MUST NOT BREAK MID-DIGIT: the figure stays on one line and SHRINKS to the tile, via a
 * container query on the tile itself, between the brand's h4 and h2 sizes. */
.pk-stat-value {
  font-variant-numeric: tabular-nums;
  font-size: clamp(var(--pk-fs-h4, 19px), 12cqi, var(--pk-fs-h2, 29px));
  line-height: var(--pk-lh-heading, 1.25);
  font-weight: var(--pk-fw-heading, 700);
  color: var(--pk-text-heading, inherit);
  white-space: nowrap;
  overflow-wrap: normal;
}

.pk-stat-delta {
  display: flex;
  align-items: baseline;
  gap: var(--pk-space-xs, 4px);
  font-size: var(--pk-fs-caption, 12px);
  flex-wrap: wrap;
}

.pk-stat-arrow {
  align-self: center;
  flex: 0 0 auto;
  width: var(--pk-fs-caption, 12px);
  height: var(--pk-fs-caption, 12px);
  background: var(--pk-price-neutral, #666);
  -webkit-mask: var(--pk-icon) center / contain no-repeat;
  mask: var(--pk-icon) center / contain no-repeat;
}

.pk-stat-deltanum {
  font-variant-numeric: tabular-nums;
  /* NOT a price token: see the header. The sign in the text carries the direction. */
  color: var(--pk-text-primary, #191919);
  font-weight: var(--pk-fw-heading, 600);
}

.pk-stat-period { color: var(--pk-text-secondary, #666); }

[data-pk-direction='up'] .pk-stat-arrow { background: var(--pk-price-up, #557f00); }
[data-pk-direction='down'] .pk-stat-arrow { background: var(--pk-price-down, #c4363a); }
[data-pk-direction='flat'] .pk-stat-arrow { background: var(--pk-price-neutral, #666); }

.pk-stat-note {
  margin: 0;
  font-size: var(--pk-fs-caption, 12px);
  color: var(--pk-text-secondary, #666);
}

/* A status is a word, and the marker is a shape beside it. */
.pk-stat-status {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: var(--pk-space-xs, 4px);
  font-size: var(--pk-fs-caption, 12px);
  letter-spacing: var(--pk-ls, 0);
  color: var(--pk-text-secondary, #666);
}

.pk-stat-status::before {
  content: '';
  width: var(--pk-space-sm, 8px);
  height: var(--pk-space-sm, 8px);
  border-radius: var(--pk-radius-pill, 999px);
  background: var(--pk-price-neutral, #666);
}

.pk-stat-status[data-pk-status='good']::before { background: var(--pk-success, #557F00); }
.pk-stat-status[data-pk-status='warning']::before { background: var(--pk-warning, #A07D00); }
.pk-stat-status[data-pk-status='danger']::before { background: var(--pk-danger, #df3d42); }

/* Screen-reader-only, and it must stay in the DOM. Not display:none. */
.pk-stat-sr {
  position: absolute;
  width: var(--pk-stroke, 1px);
  height: var(--pk-stroke, 1px);
  margin: calc(-1 * var(--pk-stroke, 1px));
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* A mis-declared delta is SHOWN, like skyten-table's unknown column type. */
.pk-stat[data-pk-stat-problem] {
  outline: var(--pk-stroke-strong, 2px) dashed var(--pk-danger, #df3d42);
  outline-offset: var(--pk-ring-offset, 2px);
}
.pk-stat[data-pk-stat-problem]::after {
  content: attr(data-pk-stat-problem);
  font-size: var(--pk-fs-caption, 12px);
  font-family: var(--pk-font-mono, ui-monospace, monospace);
  color: var(--pk-text-primary, #191919);
}

/* ==== src/status-indicator/status-indicator.css ==== */
/* status-indicator.css — a dot plus a word for LIVE connection state (STCT-8777, AS_CONN).
 *
 * THE SHAPE CARRIES THE STATUS, THE COLOUR CONFIRMS IT. --pk-ramp-success-60 and
 * --pk-ramp-alert-60 are a green/red pair, so they are indistinguishable by luminance to a
 * reader who cannot separate the hues (see stat-tile.css for the measurement of the price pair).
 * Each status therefore draws a different dot — filled / hollow / half / diamond — and the word
 * is always in the DOM. The colour is used at 1.4.11's 3:1 non-text level only. */

.pk-status-indicator {
  /* No theme token for these yet (STCT-8782 follow-up): declared here so a brand can override them. */
  --pk-status-indicator-font-size: 0.8125rem;
  --pk-status-indicator-font-size-sm: 0.75rem;
  --pk-status-indicator-line-height: 1.3;
  --pk-status-indicator-font-weight: 600;
  --pk-status-indicator-dot: 0.625rem;
  --pk-status-indicator-dot-sm: 0.5rem;
  display: inline-flex;
  align-items: center;
  gap: var(--pk-space-xs, 4px);
  font-family: var(--pk-font-sans, system-ui, sans-serif);
  font-size: var(--pk-status-indicator-font-size);
  line-height: var(--pk-status-indicator-line-height);
  color: var(--pk-text-primary, #191919);
  white-space: nowrap;
}
.pk-status-indicator-sm { font-size: var(--pk-status-indicator-font-size-sm); }

.pk-status-indicator-dot {
  position: relative;
  flex: 0 0 auto;
  box-sizing: border-box;
  width: var(--pk-status-indicator-dot);
  height: var(--pk-status-indicator-dot);
  border-radius: var(--pk-radius-pill, 999px);
  /* default = unknown: neutral text-secondary, and the shape below makes it a diamond */
  background: var(--pk-text-secondary, #666);
  color: var(--pk-text-secondary, #666);
}
.pk-status-indicator-sm .pk-status-indicator-dot { width: var(--pk-status-indicator-dot-sm); height: var(--pk-status-indicator-dot-sm); }

/* connected — a FILLED circle */
.pk-status-indicator-connected .pk-status-indicator-dot {
  /* the brand's connection dot (--pk-status-dot, tools-brands components.status.dot; default the success ramp) */
  background: var(--pk-status-dot, var(--pk-ramp-tertiary-80, #88CA00));
  color: var(--pk-status-dot, var(--pk-ramp-tertiary-80, #88CA00));
}

/* live — a filled circle in the accent colour; the pulse ring is added below */
.pk-status-indicator-live .pk-status-indicator-dot {
  background: var(--pk-ramp-primary-60, #49bae4);
  color: var(--pk-ramp-primary-60, #49bae4);
}

/* disconnected — a HOLLOW ring: the absence is the shape */
.pk-status-indicator-disconnected .pk-status-indicator-dot {
  background: transparent;
  border: var(--pk-bw-active, 2px) solid var(--pk-ramp-red-60, #df3d42);
  color: var(--pk-ramp-red-60, #df3d42);
}

/* degraded — a HALF-filled circle: the left half is drawn by the border, the right is the fill */
.pk-status-indicator-degraded .pk-status-indicator-dot {
  background: linear-gradient(90deg, transparent 50%, currentColor 50%);
  border: var(--pk-bw-primary, 1px) solid var(--pk-ramp-orange-70, #D8A900);
  color: var(--pk-ramp-orange-70, #D8A900);
}

/* unknown — a DIAMOND, so "we do not know" is not the same shape as any known state */
.pk-status-indicator-unknown .pk-status-indicator-dot {
  border-radius: 0;
  transform: rotate(45deg) scale(0.8);
}

/* live pulse: an expanding ring drawn in the dot's own colour. Motion is opt-in by the OS. */
.pk-status-indicator-pulse .pk-status-indicator-dot::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  border: var(--pk-bw-primary, 1px) solid currentColor;
  animation: pk-status-indicator-pulse 1.6s ease-out infinite;
}
@keyframes pk-status-indicator-pulse {
  0%   { transform: scale(1);   opacity: 0.9; }
  100% { transform: scale(2.2); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .pk-status-indicator-pulse .pk-status-indicator-dot::after {
    animation: none;
    /* a static ring still says "live" without moving */
    transform: scale(1.6);
    opacity: 0.6;
  }
}

.pk-status-indicator-label { font-weight: var(--pk-status-indicator-font-weight); }

.pk-status-indicator-detail {
  color: var(--pk-text-secondary, #666);
  font-variant-numeric: tabular-nums;   /* a latency that ticks must not jitter */
}
.pk-status-indicator-detail[hidden] { display: none; }

/* hideLabel: the word stays in the DOM for the live region and screen readers; only sight loses it */
.pk-status-indicator-nolabel .pk-status-indicator-label {
  position: absolute;
  /* the 1px visually-hidden box, sized by the primary border-width token (1px) */
  width: var(--pk-bw-primary, 1px);
  height: var(--pk-bw-primary, 1px);
  margin: calc(-1 * var(--pk-bw-primary, 1px));
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ==== src/stepper/stepper.css ==== */
/* stepper.css — STCT-8777. Text tokens on the surface (stepper.test.js measures the pairs over 44
   brand-modes). The number circle for done/current is text-primary with the surface colour inside,
   the same inherited guarantee as the neutral badge (STCT-8767); the current step also has a heavier
   label and aria-current, so state never rests on colour.
   The steps sit in a row while they fit and WRAP when they do not — no viewport breakpoint.

   Layout (operator, #/footer): the list is its own inline-size container. At 600px and below a
   HORIZONTAL stepper keeps the markers in a row and shows only the current step's label (the others
   stay in `title` and for AT); a VERTICAL stepper (.pk-stepper-vertical) stacks at every width.
   `error` draws the bundled triangle-alert as a mask (ramp-alert-100 on a ramp-alert-10 disc, the
   badge pairing, >= 4.48:1 in all 44 brand-modes — stepper.test.js). */

.pk-stepper {
  --pk-stepper-clip: 1px;
  container-type: inline-size;
  list-style: none;
  margin: 0;
  padding: var(--pk-space-sm, 10px);
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--pk-space-xs, 8px) var(--pk-space-md, 16px);
  counter-reset: none;
  background: var(--pk-sem-bg-surface-secondary, #ffffff);
  font-family: var(--pk-font-sans, system-ui, sans-serif);
  color: var(--pk-text-primary, #191919);
}
.pk-stepper-step { flex: 1 1 120px; min-width: 0; }

.pk-stepper-box {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--pk-space-xs, 8px);
  align-items: center;
  width: 100%;
  padding: 4px;
  margin: 0;
  border: 0;
  border-radius: var(--pk-card-radius, var(--pk-radius-s, 6px));
  background: transparent;
  font: inherit;
  text-align: left;
  color: inherit;
}
button.pk-stepper-box { cursor: pointer; }
button.pk-stepper-box:hover .pk-stepper-label { text-decoration: underline; }
button.pk-stepper-box:focus-visible { outline: 2px solid var(--pk-text-primary, #191919); outline-offset: 1px; }

.pk-stepper-number {
  grid-row: span 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  box-sizing: border-box;
  border-radius: 50%;
  border: 2px solid var(--pk-text-secondary, #666666);
  font-size: 13px;
  font-weight: 700;
  color: var(--pk-text-secondary, #666666);
}
.pk-stepper-done .pk-stepper-number,
.pk-stepper-current .pk-stepper-number {
  border-color: var(--pk-text-primary, #191919);
  background: var(--pk-text-primary, #191919);
  color: var(--pk-sem-bg-surface-secondary, #ffffff);
}

.pk-stepper .pk-stepper-label { font-size: 14px; line-height: 1.3; color: var(--pk-text-secondary, #666666); overflow-wrap: break-word; }
.pk-stepper-current .pk-stepper-label,
.pk-stepper-done .pk-stepper-label { color: var(--pk-text-primary, #191919); }
.pk-stepper-current .pk-stepper-label { font-weight: 700; }
.pk-stepper .pk-stepper-description { font-size: 12px; color: var(--pk-text-secondary, #666666); }

/* error: the marker is a tinted disc with the triangle-alert glyph; the label is text-primary like
   a completed step (the user has to come back to it). The hidden word is "has an error". */
.pk-stepper-error .pk-stepper-number {
  border-color: var(--pk-ramp-red-10, #fbe8e8);
  background: var(--pk-ramp-red-10, #fbe8e8);
  color: var(--pk-ramp-red-100, #7b2224);
}
.pk-stepper-number.pk-stepper-number-glyph { position: relative; }
.pk-stepper-number.pk-stepper-number-glyph::after {
  content: "";
  position: absolute;
  inset: 3px;
  background-color: currentColor;
  -webkit-mask: var(--pk-icon) center / contain no-repeat;
  mask: var(--pk-icon) center / contain no-repeat;
}
.pk-stepper-error .pk-stepper-label { color: var(--pk-text-primary, #191919); }

/* vertical: one step per row, at every width */
.pk-stepper-vertical { flex-direction: column; flex-wrap: nowrap; }
.pk-stepper-vertical .pk-stepper-step { flex: 0 0 auto; width: 100%; }

/* mobile (a 390px frame, or any host narrower than 600px): a horizontal stepper keeps the markers
   in a row and shows only the CURRENT label; the others are clipped for sighted users only. */
@container (max-width: 600px) {
  .pk-stepper-horizontal { flex-wrap: nowrap; align-items: flex-start; }
  .pk-stepper-horizontal .pk-stepper-step { flex: 0 1 auto; }
  .pk-stepper-horizontal .pk-stepper-step[aria-current="step"] { flex: 1 1 auto; }
  .pk-stepper-horizontal .pk-stepper-step:not([aria-current="step"]) .pk-stepper-box { grid-template-columns: auto; }
  .pk-stepper-horizontal .pk-stepper-step:not([aria-current="step"]) .pk-stepper-label,
  .pk-stepper-horizontal .pk-stepper-step:not([aria-current="step"]) .pk-stepper-description {
    position: absolute; width: var(--pk-stepper-clip); height: var(--pk-stepper-clip); padding: 0;
    margin: calc(-1 * var(--pk-stepper-clip));
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
}

.pk-stepper-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------------------------------------
   STCT-9235 — `size: 'large'`: the large horizontal ICON stepper (skyten's token checkout,
   images/134-135, and its "My progress" card, images/136). Painted ONLY from the vendored brand
   contract, components.stepper.large -> --pk-stepper-lg-* (geometry: size, line-w, halo-w,
   outline-w, num-fs, icon-size, label-gap, label-fs, label-lh, label-weight, detail-fs,
   detail-weight, bar-h; colours by role: done-bg/-fg, current-bg/-fg, halo, todo-bg/-border/-fg,
   line-done, line-todo, label-fg, label-todo-fg, detail-fg) and the default theme's spacing and
   pill radius. Nothing here is a value of this library's own: the number's weight is the label's,
   the glyph inset is (size - icon-size) / 2, the pill is --pk-radius-pill.

   Geometry: every step is an equal column; the connector is two half-lines per step (::before to
   the disc's centre, ::after from it) so it runs from the row's left edge to its right edge as the
   design draws it. A step BEFORE the current one paints both halves in line-done, the CURRENT step
   its left half only, an UPCOMING step neither. The disc sits above the line; the current disc's
   halo is a box-shadow of --pk-stepper-lg-halo (translucent, so it tints the line under it like
   the design). A label wraps centred and clamps at three lines with an ellipsis; the full text
   stays in the box's `title` and for assistive technology.
   The progress block (an optional bar under the row) reuses the connector colours: line-done is the
   fill, line-todo the track; there is no linear meter component in the library to compose
   (percent-circle is the only meter and it is circular), so the bar is this sheet's. */

.pk-stepper-large { display: block; width: 100%; min-width: 0; font-family: var(--pk-font-sans, system-ui, sans-serif); }
.pk-stepper.pk-stepper-lg {
  flex-wrap: nowrap;
  gap: 0;
  padding: 0;
  overflow-x: auto;   /* on a phone the tokens' discs may not fit five abreast; the row scrolls, never shrinks */
}
.pk-stepper-lg .pk-stepper-step {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
}
.pk-stepper-lg .pk-stepper-step::before,
.pk-stepper-lg .pk-stepper-step::after {
  content: "";
  position: absolute;
  top: calc(var(--pk-stepper-lg-size) / 2 - var(--pk-stepper-lg-line-w) / 2);
  height: var(--pk-stepper-lg-line-w);
  width: 50%;
  background: var(--pk-stepper-lg-line-todo);
}
.pk-stepper-lg .pk-stepper-step::before { left: 0; }
.pk-stepper-lg .pk-stepper-step::after { right: 0; }
.pk-stepper-lg .pk-stepper-done::before,
.pk-stepper-lg .pk-stepper-done::after,
.pk-stepper-lg .pk-stepper-error::before,
.pk-stepper-lg .pk-stepper-error::after,
.pk-stepper-lg .pk-stepper-current::before { background: var(--pk-stepper-lg-line-done); }

.pk-stepper-lg .pk-stepper-box {
  position: relative;
  grid-template-columns: 1fr;
  justify-items: center;
  column-gap: 0;
  padding: 0;
  text-align: center;
}
.pk-stepper-lg .pk-stepper-number {
  grid-row: auto;
  width: var(--pk-stepper-lg-size);
  height: var(--pk-stepper-lg-size);
  border: var(--pk-stepper-lg-outline-w) solid var(--pk-stepper-lg-todo-border);
  background: var(--pk-stepper-lg-todo-bg);
  color: var(--pk-stepper-lg-todo-fg);
  font-size: var(--pk-stepper-lg-num-fs);
  font-weight: var(--pk-stepper-lg-label-weight);
  line-height: 1;
  position: relative;
  z-index: 1;   /* above the step's ::after half-line, which follows the box in paint order */
}
.pk-stepper-lg .pk-stepper-done .pk-stepper-number {
  border-color: var(--pk-stepper-lg-done-bg);
  background: var(--pk-stepper-lg-done-bg);
  color: var(--pk-stepper-lg-done-fg);
}
.pk-stepper-lg .pk-stepper-current .pk-stepper-number {
  border-color: var(--pk-stepper-lg-current-bg);
  background: var(--pk-stepper-lg-current-bg);
  color: var(--pk-stepper-lg-current-fg);
  box-shadow: 0 0 0 var(--pk-stepper-lg-halo-w) var(--pk-stepper-lg-halo);
}
/* error keeps the default stepper's tinted disc and glyph (the badge pairing), at the large size */
.pk-stepper-lg .pk-stepper-error .pk-stepper-number {
  border-color: var(--pk-ramp-red-10, #fbe8e8);
  background: var(--pk-ramp-red-10, #fbe8e8);
  color: var(--pk-ramp-red-100, #7b2224);
}
.pk-stepper-lg .pk-stepper-number.pk-stepper-number-glyph::after {
  inset: calc((var(--pk-stepper-lg-size) - var(--pk-stepper-lg-icon-size)) / 2 - var(--pk-stepper-lg-outline-w));
}

.pk-stepper-lg .pk-stepper-label {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  margin-top: var(--pk-stepper-lg-label-gap);
  font-size: var(--pk-stepper-lg-label-fs);
  line-height: var(--pk-stepper-lg-label-lh);
  font-weight: var(--pk-stepper-lg-label-weight);
  color: var(--pk-stepper-lg-label-todo-fg);
}
.pk-stepper-lg .pk-stepper-done .pk-stepper-label,
.pk-stepper-lg .pk-stepper-current .pk-stepper-label,
.pk-stepper-lg .pk-stepper-error .pk-stepper-label { color: var(--pk-stepper-lg-label-fg); }
.pk-stepper-lg .pk-stepper-description {
  font-size: var(--pk-stepper-lg-detail-fs);
  line-height: var(--pk-stepper-lg-label-lh);
  font-weight: var(--pk-stepper-lg-detail-weight);
  color: var(--pk-stepper-lg-detail-fg);
}
.pk-stepper-lg button.pk-stepper-box:focus-visible { outline-color: var(--pk-stepper-lg-label-fg); }

/* the progress block: bar (fill = line-done, track = line-todo, pill ends) and two captions */
.pk-stepper-progress { margin-top: var(--pk-space-lg, 20px); }
.pk-stepper-bar {
  height: var(--pk-stepper-lg-bar-h);
  border-radius: var(--pk-radius-pill, 999px);
  background: var(--pk-stepper-lg-line-todo);
  overflow: hidden;
}
.pk-stepper-bar-fill { height: 100%; border-radius: inherit; background: var(--pk-stepper-lg-line-done); }
.pk-stepper-captions {
  display: flex;
  justify-content: space-between;
  gap: var(--pk-space-md, 15px);
  margin-top: var(--pk-space-sm, 10px);
  font-size: var(--pk-stepper-lg-detail-fs);
  line-height: var(--pk-stepper-lg-label-lh);
  font-weight: var(--pk-stepper-lg-detail-weight);
  color: var(--pk-stepper-lg-detail-fg);
}
.pk-stepper-captions .pk-stepper-pct { font-weight: var(--pk-stepper-lg-label-weight); color: var(--pk-stepper-lg-line-done); }
.pk-stepper-caption-next { text-align: right; }

/* a phone (<= 600px): the base rule already keeps only the current label; the large row scrolls */
@container (max-width: 600px) {
  .pk-stepper.pk-stepper-lg .pk-stepper-step,
  .pk-stepper.pk-stepper-lg .pk-stepper-step[aria-current="step"] { flex: 1 0 auto; min-width: var(--pk-stepper-lg-size); }
  .pk-stepper-lg .pk-stepper-step:not([aria-current="step"]) .pk-stepper-box { grid-template-columns: 1fr; }
}

/* ==== src/surface/surface.css ==== */
/* @paprika/skyten-foundation/surface — load this sheet; the library does not inject it.
 *
 * Three grounds, one component. The kinds differ only in background and edge, so the shared rules
 * live on .pk-surface and each kind adds a ground:
 *   surface  --pk-page-bg                  no edge      (the page: the ground the brand declares)
 *   pane     --pk-pane-bg                   hairline + radius-m  (a raised region on the page; falls back to
 *            --pk-sem-bg-surface-secondary, STCT-9251: the pane reads its OWN ground so the export can step it
 *            off the page ground, which it equals by construction in 140 of 140 brand-modes today)
 *   section  transparent                    optional hairline rule ABOVE (divides a pane)
 *
 * The hairline token IS right here — these are dividers and region edges, not control boundaries
 * (see select.css for the control-border rule). */

.pk-surface {
  --pk-surface-pad: var(--pk-space-md, 16px);
  /* Declared here because no brand theme writes a shadow token; a subtle inset for the `inset`
     variant. The colour is the theme's scrim token (alpha black in every brand), so it reads on
     every ground, light or dark, and is never a colour the component made up (STCT-8782). */
  --pk-shadow-inset: inset 0 1px 3px var(--pk-sem-nav-scrim, rgba(0, 0, 0, 0.12));
  /* No theme token for these yet (STCT-8782 follow-up): declared here so a brand can override them. */
  --pk-surface-title-font-size: 1rem;
  --pk-surface-title-font-weight: 700;
  --pk-surface-title-line-height: 1.3;
  --pk-surface-pane-title-font-size: 1.0625rem;
  --pk-surface-section-title-font-size: 0.8125rem;
  --pk-surface-section-title-transform: uppercase;
  --pk-surface-section-title-tracking: 0.06em;
  --pk-surface-text-line-height: 1.5;
  box-sizing: border-box;
  display: block;
  padding: var(--pk-surface-pad);
  font-family: var(--pk-font-sans, system-ui, sans-serif);
  color: var(--pk-text-primary, #191919);
}

.pk-surface-pad-none { --pk-surface-pad: 0; }
.pk-surface-pad-sm   { --pk-surface-pad: var(--pk-space-sm, 8px); }
.pk-surface-pad-md   { --pk-surface-pad: var(--pk-space-md, 16px); }
.pk-surface-pad-lg   { --pk-surface-pad: var(--pk-space-lg, 24px); }

.pk-surface-surface {
  background: var(--pk-page-bg, var(--pk-sem-bg-page, #F2F2F2));   /* the page ground the brand DECLARES (layout.pageBackground -> --pk-page-bg, contract 1.1, STCT-8908) */
}

.pk-surface-pane {
  background: var(--pk-pane-bg, var(--pk-sem-bg-surface-secondary, #fff));
  border: var(--pk-bw-hairline, 1px) solid var(--pk-sem-border-primary, #E6E6E6);
  border-radius: var(--pk-panel-radius, var(--pk-radius-m, 8px));
}

.pk-surface-section {
  background: transparent;
  /* a section's padding is vertical only: it inherits its pane's horizontal inset */
  padding-left: 0;
  padding-right: 0;
}
.pk-surface-section.pk-surface-rule {
  border-top: var(--pk-bw-hairline, 1px) solid var(--pk-sem-border-primary, #E6E6E6);
}

/* inset: more room inside and a sunken edge — a well the content sits in. Extra padding is a
   second cue beside the shadow, so the variant is still visible where the shadow is faint. */
.pk-surface-inset {
  padding: calc(var(--pk-surface-pad) + var(--pk-space-sm, 8px));
  box-shadow: var(--pk-shadow-inset);
}
.pk-surface-surface.pk-surface-inset { border-radius: var(--pk-panel-radius, var(--pk-radius-m, 8px)); }

.pk-surface-title {
  margin: 0 0 var(--pk-space-sm, 8px);
  font-size: var(--pk-surface-title-font-size);
  font-weight: var(--pk-surface-title-font-weight);
  line-height: var(--pk-surface-title-line-height);
  color: var(--pk-text-primary, #191919);
}
.pk-surface-pane > .pk-surface-title { font-size: var(--pk-surface-pane-title-font-size); }
.pk-surface-section > .pk-surface-title {
  font-size: var(--pk-surface-section-title-font-size);
  text-transform: var(--pk-surface-section-title-transform);
  letter-spacing: var(--pk-surface-section-title-tracking);
  color: var(--pk-text-secondary, #666);
}
.pk-surface-title[hidden] { display: none; }

.pk-surface-body {
  display: flex;
  flex-direction: column;
  gap: var(--pk-space-md, 16px);
  min-width: 0;
}
.pk-surface-section > .pk-surface-body { gap: var(--pk-space-sm, 8px); }

.pk-surface-text {
  margin: 0;
  color: var(--pk-text-secondary, #666);
  line-height: var(--pk-surface-text-line-height);
}

/* Nesting: sections stacked inside a pane share the pane's gap, and the first needs no rule gap. */
.pk-surface-pane > .pk-surface-body > .pk-surface-section:first-child { padding-top: 0; }
.pk-surface-pane > .pk-surface-body > .pk-surface-section:last-child { padding-bottom: 0; }

/* ==== src/table-toolbar/table-toolbar.css ==== */
/* @paprika/skyten-foundation/table-toolbar — STCT-8974. Load this sheet AND button/button.css,
 * chip/chip.css, select/select.css (the buttons, chips and selects are the library's own); the table
 * below it needs skyten-table/skyten-table.css. The library injects none of them.
 *
 * Every value is a brand token with a fallback (STCT-8782: no invented values). The popover borrows the
 * toolbar's overflow-panel shape: surface-primary fill, --pk-text-secondary edge (the border token is
 * 1.00:1 against the page in several brands, STCT-8681), --pk-radius-m. */

.pk-table-toolbar {
  display: flex;
  flex-direction: column;
  gap: var(--pk-space-xs, 4px);
  font-family: var(--pk-font-sans, system-ui, sans-serif);
  font-size: var(--pk-table-fs, 15px);
  color: var(--pk-text-primary, #191919);
}
.pk-table-toolbar-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pk-space-xs, 4px);
}
.pk-table-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pk-space-xs, 4px);
}
/* a button and its popover share one positioned box, so the panel opens under ITS button */
.pk-table-toolbar-anchor { position: relative; display: inline-flex; }

/* The toolbar's buttons paint the brand's --pk-table-toolbar-* set (components.toolbar_button): a brand
   that declares none vendors its plain button (fill, ink, hover pair, edge, --pk-button-radius — the
   STCT-9234 rule, qc3 keeps its rounder corner); skyten gives them the SELECTED button's face (marin,
   arctic label and glyph) and the FIELD's corner, because they sit in a row with fields. */
.pk-table-toolbar .pk-table-toolbar-button {
  min-width: 0;
  background: var(--pk-table-toolbar-bg, #383B5B);
  border-color: var(--pk-table-toolbar-border, #383B5B);
  color: var(--pk-table-toolbar-fg, #61BADE);
  border-radius: var(--pk-table-toolbar-radius, var(--pk-button-radius, 8px));
}
.pk-table-toolbar .pk-table-toolbar-button:hover:not(:disabled):not(.pk-button-loading) {
  background: var(--pk-table-toolbar-hover-bg, #313450);
  border-color: var(--pk-table-toolbar-hover-bg, #313450);
  color: var(--pk-table-toolbar-hover-fg, #61BADE);
}
.pk-table-toolbar-glyph {
  display: inline-flex;
  width: var(--pk-nav-icon-size, 1em);
  height: var(--pk-nav-icon-size, 1em);
}
.pk-table-toolbar-glyph svg { width: 100%; height: 100%; stroke: currentColor; }

/* ---- popover ---- */
.pk-table-toolbar-popover {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: var(--pk-space-sm, 8px);
  min-width: calc(var(--pk-space-3xl, 60px) * 5);   /* the anchor is only as wide as its button: never size by it */
  margin-top: var(--pk-space-xs, 4px);
  padding: var(--pk-space-sm, 8px);
  background: var(--pk-sem-bg-surface-primary, #fff);
  color: var(--pk-text-primary, #191919);
  border: var(--pk-bw-primary, 1px) solid var(--pk-text-secondary, #666);
  border-radius: var(--pk-panel-radius, var(--pk-radius-m, 8px));
  box-shadow: var(--pk-menu-shadow, none);
}
.pk-table-toolbar-popover[hidden] { display: none; }

/* the chooser's fields sit on one line and fold on a phone (the popover is a flex column, so a 390px
   frame wraps them) */
.pk-table-toolbar-fields {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--pk-space-sm, 8px);
}
.pk-table-toolbar-field {
  display: flex;
  flex-direction: column;
  gap: var(--pk-space-xs, 4px);
  min-width: 0;
  flex: 1 1 auto;
}
.pk-table-toolbar-field-label {
  font-size: var(--pk-table-fs-compact, 13px);
  color: var(--pk-text-secondary, #666);
}
.pk-table-toolbar-field .pk-select { width: 100%; }
.pk-table-toolbar-hint {
  margin: 0;
  font-size: var(--pk-table-fs-compact, 13px);
  color: var(--pk-text-secondary, #666);
}

/* ---- group-by levels: an ordered list, the number is part of the text ---- */
.pk-table-toolbar-levels {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--pk-space-xs, 4px);
}
.pk-table-toolbar-levels:empty { display: none; }
.pk-table-toolbar-level {
  display: flex;
  align-items: center;
  gap: var(--pk-space-xs, 4px);
  padding: var(--pk-table-pad-compact, 4px 8px);
  background: var(--pk-sem-bg-sunken, #F7F7F8);
  border-radius: var(--pk-radius-s, 4px);
}
.pk-table-toolbar-level-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-table-toolbar-level-action {
  flex: none;
  display: inline-grid;
  place-items: center;
  min-width: var(--pk-input-height, 38px);
  height: var(--pk-input-height, 38px);
  padding: 0;
  margin: 0;
  border: var(--pk-input-border-w, 1px) solid var(--pk-input-border, #E6E6E6);
  border-radius: var(--pk-input-radius, 4px);
  background: var(--pk-input-bg, #fff);
  color: var(--pk-input-fg, #191919);
  font: inherit;
  cursor: pointer;
}
.pk-table-toolbar-level-action:disabled { color: var(--pk-text-disabled, #B2B2B2); cursor: not-allowed; }

/* ---- active state: chips + the live status line ---- */
.pk-table-toolbar-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pk-space-xs, 4px);
}
.pk-table-toolbar-chips[hidden] { display: none; }
.pk-table-toolbar-status {
  margin: 0;
  font-size: var(--pk-table-fs-compact, 13px);
  color: var(--pk-text-secondary, #666);
}

/* The browser's ring, deliberately — see select.css for the measured reason. */
.pk-table-toolbar :focus-visible { outline-offset: 1px; }

/* ==== src/tabs/tabs.css ==== */
/* tabs.css — the brand's tabs, on the BRAND CONTRACT (STCT-8770): --pk-tabs-bg / -fg / -active-fg /
   -active-bg / -hover-fg / -rule / -rule-w / -rule-offset / -gap / -pad / -fs / -weight / -active-weight /
   -radius. The underline is the brand's rule colour at the brand's width, offset as the brand says.
   STCT-9730: a brand may paint the ACTIVE label and its underline as a RAMP (--pk-tabs-active-gradient /
   --pk-tabs-rule-gradient, `none` for every brand without one — then the flat tokens above paint as before). */

.pk-tabs {
  display: flex;
  gap: var(--pk-tabs-gap, 24px);
  margin-bottom: var(--pk-space-lg, 20px);
  background: var(--pk-tabs-bg, transparent);
  border-bottom: var(--pk-stroke, 1px) solid var(--pk-sem-border-primary, #ccc);
}

.pk-tab {
  background: var(--pk-tabs-active-bg, transparent);
  background: none;
  border: none;
  border-bottom: var(--pk-tabs-rule-w, 2px) solid transparent;
  border-radius: var(--pk-tabs-radius, 0);
  padding: var(--pk-tabs-pad, 8px 2px);
  padding-bottom: calc(var(--pk-pad-y-sm, 5px) + var(--pk-tabs-rule-offset, 0px));
  font-family: var(--pk-font-sans, sans-serif);
  font-size: var(--pk-tabs-fs, 15px);
  font-weight: var(--pk-tabs-weight, 400);
  color: var(--pk-tabs-fg, #191919);
  cursor: pointer;
  position: relative;                                 /* the ramp strip (::after) is placed on the rule */
  margin-bottom: calc(-1 * var(--pk-stroke, 1px));   /* the rule sits on the container's border */
}

.pk-tab:hover { color: var(--pk-tabs-hover-fg, #191919); }

.pk-tab.pk-tab-active {
  color: var(--pk-tabs-active-fg, #383b5b);
  font-weight: var(--pk-tabs-active-weight, 700);
  background: var(--pk-tabs-active-bg, transparent);
  border-bottom-color: var(--pk-tabs-rule, #61BADE);
  /* STCT-9730: the label ink is painted THROUGH the glyphs — the brand's ramp when it declares one, else a flat
     layer of the label colour above. The active ground (a pill's fill) stays a plain ground: only the two ink
     layers clip to the text, the last (empty) layer keeps the background-color on the box. */
  background-image: var(--pk-tabs-active-gradient, none), linear-gradient(currentColor, currentColor), none;
  -webkit-background-clip: text, text, border-box;
  background-clip: text, text, border-box;
  -webkit-text-fill-color: transparent;
}
/* STCT-9938 (PM_Nft): PRINT. The label above is painted THROUGH its glyphs (a transparent fill over background layers),
   and a browser printing without background graphics (the default) drops those layers: the active label printed
   BLANK in every brand (0 ink vs 3519 for a plain label). In print it is a plain fill of its own colour; the ramp
   and the clip go (the clip reset keeps a pill's ground a ground when backgrounds DO print). */
@media print {
  .pk-tab.pk-tab-active { -webkit-text-fill-color: currentColor; background-image: none; -webkit-background-clip: border-box; background-clip: border-box; }
}
/* the ramp under the current tab, on top of the flat rule; paints nothing while the token is `none` */
.pk-tab.pk-tab-active::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: calc(-1 * var(--pk-tabs-rule-w, 2px));
  height: var(--pk-tabs-rule-w, 2px);
  background: var(--pk-tabs-rule-gradient, none);
  pointer-events: none;
}

.pk-tab.pk-tab-disabled {
  color: var(--pk-text-disabled, #999);
  cursor: default;
}

/* STCT-9245 — the workspace strip (PM_Fe's corrected list): a marker dot per tab, overflow that scrolls (with or
   without arrows), and ONE trailing action. A plain strip (no overflow, no action) is unchanged; with either, the
   tablist sits in a .pk-tabs-viewport inside a .pk-tabs-bar, because arrow and action buttons are not tabs. */
.pk-tab-marker {
  display: inline-block;
  inline-size: var(--pk-space-sm, 10px);
  block-size: var(--pk-space-sm, 10px);
  margin-inline-end: var(--pk-space-xs, 5px);
  border-radius: var(--pk-radius-pill, 999px);
  background: var(--pk-tab-marker-color, currentColor);
  vertical-align: middle;
}
.pk-tabs-bar {
  display: flex;
  align-items: center;
  gap: var(--pk-space-xs, 5px);
  min-inline-size: 0;
}
.pk-tabs-viewport {
  flex: 1 1 auto;
  min-inline-size: 0;
  overflow-x: auto;
}
.pk-tabs-viewport > .pk-tabs { flex-wrap: nowrap; inline-size: max-content; min-inline-size: 100%; }
.pk-tabs-viewport .pk-tab { white-space: nowrap; }
.pk-tabs-bar[data-pk-tabs-overflow="arrows"] .pk-tabs-viewport { scrollbar-width: none; }
.pk-tabs-bar[data-pk-tabs-overflow="arrows"] .pk-tabs-viewport::-webkit-scrollbar { display: none; }
.pk-tabs-scroll,
.pk-tabs-action {
  flex: 0 0 auto;
  display: inline-flex;
  inline-size: var(--pk-tabs-fs, 15px);
  block-size: var(--pk-tabs-fs, 15px);
  padding: 0;
  border: none;
  background-color: currentColor;
  color: var(--pk-tabs-fg, #191919);
  -webkit-mask: var(--pk-icon) center / contain no-repeat;
  mask: var(--pk-icon) center / contain no-repeat;
  cursor: pointer;
}
.pk-tabs-scroll:hover,
.pk-tabs-action:hover { color: var(--pk-tabs-hover-fg, #191919); }
.pk-tabs-scroll:disabled { opacity: 0.3; cursor: default; }

/* ---- WEB-1602: tabs on a website page take the named size and weights ---- */
.pk-website-frame .pk-tab { font-size: var(--pk-ts-m); font-weight: var(--pk-tw-regular); }
.pk-website-frame .pk-tab.pk-tab-active { font-weight: var(--pk-tw-semibold); }

/* ==== src/textarea/textarea.css ==== */
/* @paprika/skyten-foundation/textarea — token-styled multi-line control (STCT-8777).
 * Load this sheet; the library does not inject it. Every value is a --pk-* token with a fallback.
 *
 * STCT-9237: the control wears the INPUT chrome — the brand's field scale (--pk-input-fs, -radius,
 * -border, -bg, -fg, -pad) and its states (hover, focus ring, invalid, disabled) — so it is the
 * text input's box, taller. It no longer borrows --pk-text-secondary as a border: the brand's
 * input border is the boundary the brand chose, and its contrast is the brand's (and measured). */

.pk-textarea {
  /* No theme token for these yet (STCT-8782 follow-up): declared here so a brand can override them. */
  --pk-textarea-line-height: 1.4;
  --pk-textarea-counter-font-size: 0.75rem;
  --pk-textarea-counter-font-weight: 700;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--pk-space-xs, 4px);
  min-width: 0;
  width: 100%;
  font-family: var(--pk-font-sans, system-ui, sans-serif);
}

.pk-textarea-control {
  font: inherit;
  font-size: var(--pk-input-fs, 15px);
  line-height: var(--pk-textarea-line-height);
  color: var(--pk-input-fg, #191919);
  background: var(--pk-input-bg, #fff);
  border: var(--pk-input-border-w, 1px) solid var(--pk-input-border, #666);
  border-radius: var(--pk-input-radius, var(--pk-radius-s, 6px));
  padding: var(--pk-input-pad, 8px 12px);
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  resize: vertical;
}

.pk-textarea-control::placeholder { color: var(--pk-input-placeholder, #666); }

/* resize is a variant class on the wrapper so the control keeps one rule set. `both` is allowed
 * but the wrapper is width:100% of its column, so a wider drag overflows — that is the caller's
 * choice, made explicitly (form-fields locks it to vertical for the same reason). */
.pk-textarea-resize-none .pk-textarea-control { resize: none; }
.pk-textarea-resize-both .pk-textarea-control { resize: both; }
/* Auto-grow sets the height from script; a manual resize handle would fight it. */
.pk-textarea-autogrow .pk-textarea-control { resize: none; overflow-y: auto; }

.pk-textarea-control:hover:not(:disabled):not(:focus-visible) { border-color: var(--pk-input-border-hover, var(--pk-input-border, #666)); }

/* focus: the input's focus border and ring, hugging it (the browser outline is replaced) */
.pk-textarea-control:focus-visible {
  border-color: var(--pk-input-border-focus, #383b5b);
  outline: none;
  box-shadow: 0 0 0 var(--pk-input-ring-w, 2px) var(--pk-input-ring, var(--pk-ring-color, currentColor));
}

/* disabled: the brand's disabled border / fill / ink (1.4.3 exempts an inactive control) */
.pk-textarea-control:disabled {
  cursor: default;
  border-color: var(--pk-input-border-disabled, var(--pk-input-border, #666));
  background: var(--pk-input-bg-disabled, var(--pk-input-bg, #fff));
  color: var(--pk-input-fg-disabled, var(--pk-text-disabled, #999));
}

/* Read-only is NOT dimmed: the text is still meant to be read (1.4.3 exempts only inactive
 * controls). The page surface and a dashed border say "not editable" instead. */
.pk-textarea-control:read-only:not(:disabled) {
  background: var(--pk-sem-bg-page, #F8FCFE);
  border-style: dashed;
}

/* invalid and over-limit: the input's invalid border; aria-invalid, the message and the counter's
 * own word "over" carry it in words, never colour alone (WCAG 1.4.1). */
.pk-textarea-invalid .pk-textarea-control,
.pk-textarea-over .pk-textarea-control,
.pk-textarea-invalid .pk-textarea-control:hover,
.pk-textarea-over .pk-textarea-control:hover { border-color: var(--pk-input-border-invalid, #A92E32); }

.pk-textarea-counter {
  align-self: flex-end;
  font-size: var(--pk-textarea-counter-font-size);
  font-variant-numeric: tabular-nums;
  color: var(--pk-input-hint-fg, var(--pk-text-secondary, #666));
}

/* Over the limit the counter carries the word "over" in its text; the weight and the alert
 * colour are additions to that word. */
.pk-textarea-over .pk-textarea-counter {
  color: var(--pk-input-hint-invalid-fg, var(--pk-ramp-red-100, #7b2224));
  font-weight: var(--pk-textarea-counter-font-weight);
}

/* ==== src/theme-picker/theme-picker.css ==== */
/* STCT-9044 — theme picker: live preview cards. STCT-9215 — two layouts: 'pair' (the standard: one entry per
   brand, its light and dark cards stacked, the front one offset over the back one) and 'grid' (one flat card
   per brand x mode). STCT-9219 — the default card FACE is the brand's rendered preview image (cards: 'preview',
   data-pk-face="preview"), stacked like the tools-brands index card: the back card up-right, the front card
   lower-left with the deeper shadow, a mode chip on each, the brand's name and visibility under the pair.
   ⛔ Every colour, radius and font INSIDE a card comes from the --pk-* values the card sets on itself
   (its theme's own tokens, generated from the brand sheets). The picker's frame (gaps, focus ring, the
   front card's shadow, the toggle) is the app's current theme. No literal colour or size is invented here
   (css:invented); the stacking offsets are percentages of the card, i.e. structure, not a size. */
.pk-theme-picker {
  /* fills its container: as a flex item it would otherwise shrink to one card's width */
  box-sizing: border-box;
  inline-size: 100%;
  outline: none;
  /* THE T-SHIRT SIZES (STCT-9215): the card column is a step of the spacing scale, GEOMETRIC (x1.3 per step:
     xs..xl = 2.4 / 3.1 / 4 / 5.2 / 6.8 x --pk-space-3xl; m is the grid's width before sizes existed), the small
     card of 'list' / 'menu' 1.5 / 1.9 / 2.5 / 3.2 / 4.2 x. Never pixels.
     ⛔ THE COLUMN TRACK IS THE CARD (operator, the showcase Theme popover: M and L looked the same, XL jumped).
     The first version's `minmax(col, 1fr)` let every track STRETCH to share the row, so the card's width was
     the container's width over the column COUNT, not the size: in a 760px panel m (240) and l (300) both
     rounded to two columns of 344px, and xl (360) to one of 702px. Now the track is exactly the column
     (`repeat(auto-fill, col)`, the rows centred), so a size is the same width in every container, and the
     five steps are visibly distinct: 144 / 186 / 240 / 312 / 408 for a 60px --pk-space-3xl. */
  --pk-theme-picker-col: calc(var(--pk-space-3xl) * 4);
  --pk-theme-picker-thumb: calc(var(--pk-space-3xl) * 2.5);
}
.pk-theme-picker[data-pk-size="xs"] { --pk-theme-picker-col: calc(var(--pk-space-3xl) * 2.4); --pk-theme-picker-thumb: calc(var(--pk-space-3xl) * 1.5); }
.pk-theme-picker[data-pk-size="s"] { --pk-theme-picker-col: calc(var(--pk-space-3xl) * 3.1); --pk-theme-picker-thumb: calc(var(--pk-space-3xl) * 1.9); }
.pk-theme-picker[data-pk-size="l"] { --pk-theme-picker-col: calc(var(--pk-space-3xl) * 5.2); --pk-theme-picker-thumb: calc(var(--pk-space-3xl) * 3.2); }
.pk-theme-picker[data-pk-size="xl"] { --pk-theme-picker-col: calc(var(--pk-space-3xl) * 6.8); --pk-theme-picker-thumb: calc(var(--pk-space-3xl) * 4.2); }
/* ...and the type scale follows the size, so a large card is READABLE, not just wider */
.pk-theme-picker[data-pk-size="xs"] .pk-theme-card,
.pk-theme-picker[data-pk-size="s"] .pk-theme-card { padding: var(--pk-space-xs); gap: var(--pk-space-xs); }
.pk-theme-picker[data-pk-size="xs"] .pk-theme-card-head,
.pk-theme-picker[data-pk-size="xs"] .pk-theme-card-text,
.pk-theme-picker[data-pk-size="s"] .pk-theme-card-head,
.pk-theme-picker[data-pk-size="s"] .pk-theme-card-text { font-size: var(--pk-fs-caption); }
.pk-theme-picker[data-pk-size="m"] .pk-theme-card-text { font-size: var(--pk-fs-small); }
.pk-theme-picker[data-pk-size="l"] .pk-theme-card,
.pk-theme-picker[data-pk-size="xl"] .pk-theme-card { padding: var(--pk-space-md); gap: var(--pk-space-sm); }
.pk-theme-picker[data-pk-size="l"] .pk-theme-card-head { font-size: var(--pk-fs-base); }
.pk-theme-picker[data-pk-size="l"] .pk-theme-card-sample { font-size: var(--pk-fs-small); }
.pk-theme-picker[data-pk-size="xl"] .pk-theme-card-head { font-size: var(--pk-fs-h4); }
.pk-theme-picker[data-pk-size="xl"] .pk-theme-card-sample { font-size: var(--pk-fs-base); }
.pk-theme-picker[data-pk-size="xl"] .pk-theme-card-text { font-size: var(--pk-fs-h4); }
/* an xs card is a swatch strip: its name, colours and button; the text, menu and table do not fit it */
.pk-theme-picker[data-pk-size="xs"] .pk-theme-swatch { flex: 1 1 0; width: auto; min-width: 0; }
.pk-theme-picker[data-pk-size="xs"] .pk-theme-card-text,
.pk-theme-picker[data-pk-size="xs"] .pk-theme-card-nav,
.pk-theme-picker[data-pk-size="xs"] .pk-theme-card-table,
.pk-theme-picker[data-pk-layout="list"][data-pk-size="xs"] .pk-theme-card-button,
.pk-theme-picker[data-pk-layout="menu"][data-pk-size="xs"] .pk-theme-card-button { display: none; }

/* ---- 'grid': one flat card per brand x mode (a listbox) ---- */
.pk-theme-picker[data-pk-layout="grid"] {
  display: grid;
  grid-template-columns: repeat(auto-fill, min(var(--pk-theme-picker-col), 100%));   /* the track IS the card; see the sizes */
  justify-content: center;
  gap: var(--pk-space-md);
}
.pk-theme-picker:focus-visible .pk-theme-card-active,
.pk-theme-card-active:focus-visible {
  outline: var(--pk-ring, 2px) solid var(--pk-ring-color, currentColor);
  outline-offset: var(--pk-ring-offset);
}

/* ---- 'pair' / 'list' / 'menu': one entry per brand, light and dark stacked ---- */
.pk-theme-picker[data-pk-layout="pair"],
.pk-theme-picker[data-pk-layout="list"],
.pk-theme-picker-panel {
  display: flex;
  flex-direction: column;
  gap: var(--pk-space-md);
}
.pk-theme-picker-group { display: flex; flex-direction: column; gap: var(--pk-space-sm); }
.pk-theme-picker-group[hidden], .pk-theme-picker-pair[hidden], .pk-theme-picker-panel[hidden] { display: none; }
.pk-theme-picker-group-title {
  margin: 0;
  font-size: var(--pk-fs-caption);
  color: var(--pk-text-secondary);
}
.pk-theme-picker-search {
  box-sizing: border-box;
  inline-size: 100%;
  padding: var(--pk-space-xs) var(--pk-space-sm);
  font: inherit;
  color: var(--pk-text-primary);
  background: var(--pk-page-bg);
  border: var(--pk-input-border-w) solid var(--pk-sem-border-primary);
  border-radius: var(--pk-radius-xs);
}
.pk-theme-picker-pairs {
  display: grid;
  grid-template-columns: repeat(auto-fill, min(var(--pk-theme-picker-col), 100%));   /* the track IS the card; see the sizes */
  justify-content: center;
  gap: var(--pk-space-md);
}
.pk-theme-picker-pair { position: relative; min-width: 0; border-radius: var(--pk-card-radius, var(--pk-radius-card)); outline: none; }
/* STCT-9219 — THE TOOLS-BRANDS GEOMETRY (measured on its index: the card 78% of the row, the back one at the top
   right, the front one at the bottom left; here as percentages of the stack, never pixels). The card is 82% of the
   stack; the back card is shifted RIGHT by 22% of its own width (= 18% of the stack, the room kept on the right)
   and UP by the room kept on top. A live card is square: 18% on top, shifted up 22% of its height. A rendered
   card is 16:10: 9% on top, which is 17.56% of its height (0.09 / (0.82 x 0.625)); the stack is then 100:60, the
   tools-brands row's ratio. The padding is on the STACK because a percentage padding is taken from the
   containing block: the thumb. */
.pk-theme-picker-thumb { position: relative; min-width: 0; }
.pk-theme-picker-stack { display: grid; padding: 18% 18% 0 0; }
.pk-theme-picker-pair[data-pk-face="preview"] .pk-theme-picker-stack { padding: 9% 18% 0 0; }
.pk-theme-picker-stack > .pk-theme-card {
  grid-area: 1 / 1;
  aspect-ratio: 1;
  overflow: hidden;
  box-sizing: border-box;
  min-width: 0;
}
.pk-theme-picker-pair[data-pk-face="preview"] .pk-theme-picker-stack > .pk-theme-card { aspect-ratio: 16 / 10; }
.pk-theme-picker-stack > .pk-theme-card[data-pk-role="back"] { transform: translate(22%, -22%); box-shadow: var(--pk-shadow-overlay); }
.pk-theme-picker-pair[data-pk-face="preview"] .pk-theme-picker-stack > .pk-theme-card[data-pk-role="back"] { transform: translate(22%, -17.56%); }
.pk-theme-picker-stack > .pk-theme-card[data-pk-role="front"] {
  position: relative;
  z-index: 1;
  box-shadow: var(--pk-shadow-modal);
}
.pk-theme-picker-stack > .pk-theme-card[aria-checked="true"] {
  box-shadow: 0 0 0 var(--pk-space-xs) var(--pk-button-bg), var(--pk-shadow-modal);
}
.pk-theme-picker-stack > .pk-theme-card[data-pk-role="back"][aria-checked="true"] { box-shadow: 0 0 0 var(--pk-space-xs) var(--pk-button-bg), var(--pk-shadow-overlay); }
/* 'pair' wears the tools-brands index card: a framed entry, the stack on a sunken ground, the caption under it */
.pk-theme-picker[data-pk-layout="pair"] .pk-theme-picker-pair {
  overflow: hidden;
  background: var(--pk-sem-bg-surface-secondary);
  border: var(--pk-bw-primary) solid var(--pk-sem-border-subtle);
  border-radius: var(--pk-card-radius, var(--pk-radius-l));
}
.pk-theme-picker[data-pk-layout="pair"] .pk-theme-picker-thumb { padding: var(--pk-space-sm); background: var(--pk-sem-bg-sunken); }
.pk-theme-picker-caption {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--pk-space-sm);
  padding: var(--pk-space-xs) var(--pk-space-sm);
  font-size: var(--pk-fs-small);
  color: var(--pk-text-secondary);
}
.pk-theme-picker-caption-name { min-width: 0; overflow-wrap: anywhere; font-weight: var(--pk-fw-heading); color: var(--pk-text-primary); }
.pk-theme-picker[data-pk-size="xs"] .pk-theme-picker-caption,
.pk-theme-picker[data-pk-size="s"] .pk-theme-picker-caption { font-size: var(--pk-fs-caption); }
.pk-theme-picker[data-pk-size="xl"] .pk-theme-picker-caption { font-size: var(--pk-fs-base); }
.pk-theme-picker-pair:focus-visible .pk-theme-card[data-pk-role="front"] {
  outline: var(--pk-ring, 2px) solid var(--pk-ring-color, currentColor);
  outline-offset: var(--pk-ring-offset);
}
.pk-theme-picker-pair .pk-theme-card-sample { gap: var(--pk-space-xs); }
/* the light/dark toggle sits in the corner the offset leaves free: right of the front card, under the back one */
.pk-theme-picker-toggle {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--pk-space-xs);
  color: var(--pk-text-primary);
  background: var(--pk-sem-bg-surface-primary);
  border: var(--pk-input-border-w) solid var(--pk-sem-border-primary);
  border-radius: var(--pk-radius-xs);
  cursor: pointer;
}
.pk-theme-picker[data-pk-layout="pair"] .pk-theme-picker-toggle { right: var(--pk-space-xs); bottom: var(--pk-space-xs); }
.pk-theme-picker-toggle:disabled { cursor: not-allowed; color: var(--pk-text-secondary); }
.pk-theme-picker-toggle:focus-visible { outline: var(--pk-ring, 2px) solid var(--pk-ring-color, currentColor); outline-offset: var(--pk-ring-offset); }
.pk-theme-picker-toggle-icon {
  display: block;
  width: var(--pk-space-md);
  height: var(--pk-space-md);
  background: currentColor;
  -webkit-mask: var(--pk-icon) center / contain no-repeat;
  mask: var(--pk-icon) center / contain no-repeat;
}
.pk-theme-picker[data-pk-size="xs"] .pk-theme-picker-toggle { padding: 0; }
.pk-theme-picker[data-pk-size="xs"] .pk-theme-picker-toggle-icon { width: var(--pk-space-sm); height: var(--pk-space-sm); }

/* ---- 'list' and 'menu': small pairs in ONE column; 'list' says what each brand is next to it ---- */
.pk-theme-picker[data-pk-layout="list"] .pk-theme-picker-pairs,
.pk-theme-picker[data-pk-layout="menu"] .pk-theme-picker-pairs { grid-template-columns: 1fr; gap: var(--pk-space-sm); }
.pk-theme-picker[data-pk-layout="list"] .pk-theme-picker-pair,
.pk-theme-picker[data-pk-layout="menu"] .pk-theme-picker-pair {
  display: flex;
  align-items: flex-start;
  gap: var(--pk-space-md);
}
.pk-theme-picker[data-pk-layout="list"] .pk-theme-picker-thumb,
.pk-theme-picker[data-pk-layout="menu"] .pk-theme-picker-thumb { flex: 0 0 min(var(--pk-theme-picker-thumb), 40%); }
/* a small card is a swatch strip whatever the size says: the thumb is half the column */
.pk-theme-picker[data-pk-layout="list"] .pk-theme-card,
.pk-theme-picker[data-pk-layout="menu"] .pk-theme-card { padding: var(--pk-space-xs); gap: var(--pk-space-xs); }
.pk-theme-picker[data-pk-layout="list"] .pk-theme-card-head,
.pk-theme-picker[data-pk-layout="menu"] .pk-theme-card-head { font-size: var(--pk-fs-caption); }
.pk-theme-picker[data-pk-layout="list"] .pk-theme-swatch,
.pk-theme-picker[data-pk-layout="menu"] .pk-theme-swatch { flex: 1 1 0; width: auto; min-width: 0; height: var(--pk-space-md); }
/* the brand's name is next to the small card already; the card keeps its mode */
.pk-theme-picker[data-pk-layout="list"] .pk-theme-card-head > .pk-theme-card-name,
.pk-theme-picker[data-pk-layout="menu"] .pk-theme-card-head > .pk-theme-card-name,
.pk-theme-picker[data-pk-layout="list"] .pk-theme-card-text,
.pk-theme-picker[data-pk-layout="list"] .pk-theme-card-nav,
.pk-theme-picker[data-pk-layout="list"] .pk-theme-card-table,
.pk-theme-picker[data-pk-layout="menu"] .pk-theme-card-text,
.pk-theme-picker[data-pk-layout="menu"] .pk-theme-card-nav,
.pk-theme-picker[data-pk-layout="menu"] .pk-theme-card-table { display: none; }
.pk-theme-picker-about { display: flex; flex-direction: column; gap: var(--pk-space-xs); min-width: 0; overflow-wrap: break-word; color: var(--pk-text-primary); }
.pk-theme-picker-about-name { font-weight: var(--pk-fw-heading); font-size: var(--pk-fs-base); }
.pk-theme-picker-about-meta { font-size: var(--pk-fs-small); color: var(--pk-text-secondary); }
.pk-theme-picker-about-text { font-size: var(--pk-fs-small); }
.pk-theme-picker[data-pk-size="xl"] .pk-theme-picker-about-name { font-size: var(--pk-fs-h4); }
.pk-theme-picker[data-pk-size="xs"] .pk-theme-picker-about-name { font-size: var(--pk-fs-small); }
.pk-theme-picker[data-pk-size="xs"] .pk-theme-picker-about-meta,
.pk-theme-picker[data-pk-size="xs"] .pk-theme-picker-about-text { font-size: var(--pk-fs-caption); }
/* 'menu': the button and the panel it opens (anchored under it, in the app's theme) */
.pk-theme-picker[data-pk-layout="menu"] { position: relative; display: inline-block; inline-size: auto; }
.pk-theme-picker-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--pk-space-xs);
  padding: var(--pk-space-xs) var(--pk-space-sm);
  font: inherit;
  color: var(--pk-text-primary);
  background: var(--pk-sem-bg-surface-primary);
  border: var(--pk-input-border-w) solid var(--pk-sem-border-primary);
  border-radius: var(--pk-button-radius);
  cursor: pointer;
}
.pk-theme-picker-trigger:focus-visible { outline: var(--pk-ring, 2px) solid var(--pk-ring-color, currentColor); outline-offset: var(--pk-ring-offset); }
.pk-theme-picker-panel {
  position: absolute;
  z-index: 1000;   /* the same layer as the library's other popovers (menu-modes) */
  top: 100%;
  inset-inline-end: 0;
  box-sizing: border-box;
  inline-size: calc(var(--pk-theme-picker-col) * 1.5);
  max-inline-size: 90vw;
  max-block-size: 70vh;
  overflow: auto;
  margin-top: var(--pk-space-xs);
  padding: var(--pk-space-sm);
  background: var(--pk-page-bg);
  border: var(--pk-input-border-w) solid var(--pk-sem-border-primary);
  border-radius: var(--pk-panel-radius, var(--pk-radius-card));
  box-shadow: var(--pk-shadow-overlay);
}
.pk-theme-picker-panel .pk-theme-picker-about-name { align-self: center; font-size: var(--pk-fs-small); }

/* ---- the card (every layout) ---- */
.pk-theme-card {
  display: flex;
  flex-direction: column;
  gap: var(--pk-space-sm);
  padding: var(--pk-space-md);
  background: var(--pk-page-bg);
  color: var(--pk-text-primary);
  font-family: var(--pk-font-sans);
  border: var(--pk-input-border-w) solid var(--pk-sem-border-primary);
  border-radius: var(--pk-card-radius, var(--pk-radius-card));
  cursor: pointer;
}
.pk-theme-card[aria-selected="true"] {
  box-shadow: 0 0 0 var(--pk-space-xs) var(--pk-button-bg);
}
.pk-theme-card-head { display: flex; justify-content: space-between; gap: var(--pk-space-sm); font-size: var(--pk-fs-small); }
.pk-theme-card-name { font-weight: var(--pk-fw-heading); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-theme-card-mode { color: var(--pk-text-secondary); }
.pk-theme-card-sample { display: flex; flex-direction: column; gap: var(--pk-space-sm); font-size: var(--pk-fs-caption); }
.pk-theme-picker-pair .pk-theme-card-sample { gap: var(--pk-space-xs); }
.pk-theme-card-swatches { display: flex; gap: var(--pk-space-xs); }
.pk-theme-swatch {
  width: var(--pk-space-xl);
  height: var(--pk-space-lg);
  border: var(--pk-input-border-w) solid var(--pk-sem-border-primary);
  border-radius: var(--pk-radius-xs);
}
.pk-theme-swatch-page { background: var(--pk-page-bg); }
.pk-theme-swatch-surface { background: var(--pk-sem-bg-surface-primary); }
.pk-theme-swatch-accent { background: var(--pk-button-bg); }
.pk-theme-card-text { font-size: var(--pk-fs-base); }
.pk-theme-card-nav { display: flex; gap: var(--pk-space-xs); }
.pk-theme-card-pill { padding: var(--pk-space-xs) var(--pk-space-sm); border-radius: var(--pk-nav-item-radius, var(--pk-radius-nav-item)); color: var(--pk-text-secondary); }
.pk-theme-card-pill-active { background: var(--pk-nav-active-bg); color: var(--pk-nav-active-fg); }
.pk-theme-card-button {
  align-self: flex-start;
  padding: var(--pk-space-xs) var(--pk-space-md);
  background: var(--pk-button-bg);
  color: var(--pk-button-fg);
  border-radius: var(--pk-button-radius);
}
.pk-theme-card-table { display: flex; flex-direction: column; font-variant-numeric: tabular-nums; white-space: pre; }
.pk-theme-card-th { background: var(--pk-table-header-bg); color: var(--pk-table-header-fg); padding: var(--pk-space-xs); }
.pk-theme-card-td { background: var(--pk-sem-bg-surface-primary); padding: var(--pk-space-xs); border-bottom: var(--pk-input-border-w) solid var(--pk-table-row-rule-color); }
/* an incomplete theme: named, explained, never selectable */
.pk-theme-card-error { cursor: not-allowed; border-style: dashed; }
.pk-theme-card-problem { font-size: var(--pk-fs-caption); }

/* ---- STCT-9219: the RENDERED face (cards: 'preview', the default) — the brand's own render of the mode ----
   The image is tools-brands' picture of the brand (brandPreview); the frame around it (border, chip, caption) is
   the app's current theme, as on the tools-brands index. These rules come last: they undo the live card's
   padding for every size and layout. */
.pk-theme-picker .pk-theme-card[data-pk-face="preview"] {
  position: relative;
  padding: 0;
  gap: 0;
  overflow: hidden;
  color: var(--pk-text-primary);
  background: var(--pk-sem-bg-surface-secondary);
  border-color: var(--pk-sem-border-subtle);
}
.pk-theme-card-img {
  display: block;
  inline-size: 100%;
  max-inline-size: 100%;   /* the 320 / 1280 render scales with its card, never the other way round */
  block-size: 100%;
  min-block-size: 0;
  object-fit: cover;
  object-position: left top;
}
.pk-theme-card-chip {
  position: absolute;
  z-index: 1;
  right: var(--pk-space-xs);
  bottom: var(--pk-space-xs);
  padding: 0 var(--pk-space-xs);
  font-size: var(--pk-fs-caption);
  color: var(--pk-text-secondary);
  background: var(--pk-sem-bg-surface-secondary);
  border: var(--pk-bw-primary) solid var(--pk-sem-border-subtle);
  border-radius: var(--pk-radius-pill);
  pointer-events: none;
}
/* the back card's chip is at its top, where the front card leaves it visible (tools-brands) */
.pk-theme-picker-stack > .pk-theme-card[data-pk-role="back"] > .pk-theme-card-chip { top: var(--pk-space-xs); bottom: auto; }
/* a stack names the brand under the pair; only the grid's flat card carries its own caption */
.pk-theme-card-caption { display: none; }
.pk-theme-picker[data-pk-layout="grid"] .pk-theme-card-img { block-size: auto; aspect-ratio: 16 / 10; }
.pk-theme-picker[data-pk-layout="grid"] .pk-theme-card-chip { top: var(--pk-space-xs); bottom: auto; }
.pk-theme-picker[data-pk-layout="grid"] .pk-theme-card-caption {
  display: block;
  padding: var(--pk-space-xs) var(--pk-space-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--pk-fs-small);
  font-weight: var(--pk-fw-heading);
}
.pk-theme-picker[data-pk-layout="grid"][data-pk-size="xs"] .pk-theme-card-caption,
.pk-theme-picker[data-pk-layout="grid"][data-pk-size="s"] .pk-theme-card-caption { font-size: var(--pk-fs-caption); }

/* STCT-9232 part B, reshaped by STCT-12283 (L1–L3, PM_Dgn): the picker's two GROUPS — APPLICATION (the
   "Application size" row) and BRANDS (the "Preview size" row, then the cards) — each row STACKED: label / helper /
   full-width toggle, capped at --pk-theme-picker-row-max (34rem: a toggle wider than that is four far-apart words).
   The helper's ink is --pk-text-secondary: measured >= 4.5:1 on every brand-mode's page, surface and drawer grounds
   (theme-panel-12283.test.js). The STCT-11955 wrap rules stay (harmless under a column). */
.pk-theme-picker-sections { display: flex; flex-direction: column; gap: var(--pk-space-lg); inline-size: 100%; min-width: 0; }
.pk-theme-picker-section { display: flex; flex-direction: column; gap: var(--pk-space-sm); min-width: 0; }
.pk-theme-picker-section-title {
  margin: 0;
  font-size: var(--pk-fs-caption);
  font-weight: var(--pk-fw-heading);
  color: var(--pk-text-secondary);
}
.pk-theme-picker-panel > .pk-theme-picker-section { margin-block-end: var(--pk-space-sm); }
.pk-theme-picker-row {
  --pk-theme-picker-row-max: 34rem;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;                 /* STCT-11955: kept; under a column it never fires */
  align-items: stretch;
  gap: var(--pk-space-xs);
  box-sizing: border-box;
  inline-size: 100%;
  max-inline-size: var(--pk-theme-picker-row-max);
  min-width: 0;
}
.pk-theme-picker-size { margin-block-end: var(--pk-space-xs); }
.pk-theme-picker-row .pk-segtoggle { flex: 1 1 auto; inline-size: 100%; min-width: 0; max-inline-size: 100%; box-sizing: border-box; }
.pk-theme-picker-row .pk-segtoggle-segment { flex: 1 1 0; min-width: 0; }
.pk-theme-picker-row-label {
  font-size: var(--pk-fs-small);
  font-weight: var(--pk-fw-heading);
  color: var(--pk-text-primary);
}
.pk-theme-picker-row-helper {
  margin: 0;
  font-size: var(--pk-fs-caption);
  color: var(--pk-text-secondary);
}
/* L5: no brand in the document — the row is disabled and SAYS why (the same text as its title / aria-describedby) */
.pk-theme-picker-size-reason {
  margin: 0;
  font-size: var(--pk-fs-caption);
  color: var(--pk-text-primary);
}
.pk-theme-picker-size-reason[hidden] { display: none; }
.pk-theme-picker-row[data-pk-disabled="true"] .pk-segtoggle { cursor: not-allowed; }

/* ---- STCT-12283 (L4): THE THEME PANEL — the drawer a third of the screen wide at >= 1024px, the whole screen
   below; the MAXIMIZE button (44 x 44, in the drawer header) widens it to the screen and is absent below 1024px. ---- */
.pk-theme-panel.pk-drawer {
  --pk-theme-panel-width: 100vw;
  --pk-theme-panel-max-size: 44px;
  --pk-drawer-width: var(--pk-theme-panel-width);
}
.pk-theme-panel .pk-drawer-body { padding: var(--pk-space-md); }
.pk-theme-panel-content { display: flex; flex-direction: column; gap: var(--pk-space-lg); min-width: 0; }
.pk-theme-panel-max {
  flex: 0 0 auto;
  display: none;                   /* shown at >= 1024px only */
  align-items: center;
  justify-content: center;
  inline-size: var(--pk-theme-panel-max-size);
  block-size: var(--pk-theme-panel-max-size);
  padding: 0;
  color: var(--pk-text-secondary);
  background: transparent;
  border: 0;
  border-radius: var(--pk-button-radius, var(--pk-radius-s));
  cursor: pointer;
}
.pk-theme-panel-max:hover { color: var(--pk-text-primary); }
.pk-theme-panel-max:focus-visible { outline: var(--pk-ring, 2px) solid var(--pk-ring-color, currentColor); outline-offset: var(--pk-ring-offset); }
.pk-theme-panel-max-icon {
  display: block;
  width: var(--pk-space-md);
  height: var(--pk-space-md);
  background: currentColor;
  -webkit-mask: var(--pk-icon) center / contain no-repeat;
  mask: var(--pk-icon) center / contain no-repeat;
}
@media (min-width: 1024px) {
  .pk-theme-panel.pk-drawer { --pk-theme-panel-width: clamp(420px, 33.34vw, 100vw); }
  .pk-theme-panel.pk-drawer[data-pk-max="true"] { --pk-theme-panel-width: 100vw; }
  .pk-theme-panel-max { display: inline-flex; }
  .pk-theme-panel-max[hidden] { display: none; }
}

/* STCT-9715: the package version, last in the picker, in the muted ink. */
.pk-theme-picker-version {
  margin: 0;
  margin-block-start: var(--pk-space-md);
  font-size: var(--pk-fs-caption);
  color: var(--pk-text-subtle);
}

/* ---- favourites (operator 2026-10-06): the star in the free corner, the Favourites | All row above the entries ---- */
.pk-theme-picker-star {
  position: absolute;
  z-index: 2;
  left: 0;
  bottom: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--pk-space-xs);
  color: var(--pk-text-secondary);
  background: var(--pk-sem-bg-surface-primary);
  border: var(--pk-input-border-w) solid var(--pk-sem-border-primary);
  border-radius: var(--pk-radius-xs);
  cursor: pointer;
}
.pk-theme-picker[data-pk-layout="pair"] .pk-theme-picker-star { left: var(--pk-space-xs); bottom: var(--pk-space-xs); }
.pk-theme-picker-star[aria-pressed="true"] { color: var(--pk-highlight); }
.pk-theme-picker-star:focus-visible { outline: var(--pk-ring, 2px) solid var(--pk-ring-color, currentColor); outline-offset: var(--pk-ring-offset); }
.pk-theme-picker[data-pk-size="xs"] .pk-theme-picker-star { padding: 0; }
.pk-theme-picker-favourites { display: flex; align-items: center; gap: var(--pk-space-sm); margin-bottom: var(--pk-space-sm); }
.pk-theme-picker-favourites-empty { margin: 0 0 var(--pk-space-sm); color: var(--pk-text-secondary); font-size: var(--pk-fs-small); }

/* ==== src/timeframe-selector/timeframe-selector.css ==== */
/* @paprika/skyten-foundation/timeframe-selector — load this sheet; the library does not inject it.
 * With `custom: true` also load date-field/date-field.css for the from/to pair. */

.pk-timeframe {
  /* No theme token for these yet (STCT-8782 follow-up): declared here so a brand can override them. */
  --pk-timeframe-font-size: 0.8125rem;
  --pk-timeframe-font-size-sm: 0.75rem;
  --pk-timeframe-font-weight-checked: 700;
  --pk-timeframe-option-min-width: 2.25rem;
  --pk-timeframe-option-min-width-sm: 1.75rem;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--pk-space-sm, 8px);
  font-family: var(--pk-font-sans, system-ui, sans-serif);
  color: var(--pk-text-primary, #191919);
}

.pk-timeframe-group {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0;
  /* One boundary around the whole row: --pk-text-secondary, not the hairline, because a control
   * boundary needs 3:1 and the hairline fails it on 45 of 48 brand-modes (STCT-8681). */
  border: var(--pk-bw-primary, 1px) solid var(--pk-text-secondary, #666);
  /* STCT-9098: a row of buttons wears the brand's button radius (skyten: pill), like the segmented toggle */
  border-radius: var(--pk-button-radius, var(--pk-radius-s, 6px));
  background: var(--pk-sem-bg-surface-secondary, #fff);
  overflow: hidden;
}

.pk-timeframe-option {
  font: inherit;
  font-size: var(--pk-timeframe-font-size);
  /* tabular figures so 1D / 1W / 1M line up when the row is stacked in a table */
  font-variant-numeric: tabular-nums;
  color: var(--pk-text-primary, #191919);
  background: transparent;
  border: 0;
  padding: var(--pk-space-xs, 4px) var(--pk-space-sm, 8px);
  min-width: var(--pk-timeframe-option-min-width);
  cursor: pointer;
  white-space: nowrap;
}

.pk-timeframe-option + .pk-timeframe-option {
  /* a divider between segments is a divider, so it may take the hairline token */
  border-left: var(--pk-bw-hairline, 1px) solid var(--pk-sem-border-primary, #E6E6E6);
}

.pk-timeframe-option:hover:not(:disabled):not(.pk-timeframe-option-checked) {
  background: var(--pk-sem-bg-surface-primary, #F2F2F2);
}

/* ⛔ THE CHECKED SEGMENT IS FILLED AND BOLD. Two cues besides aria-checked, so the choice
 * survives a monochrome brand (epaper) and a reader who cannot separate two tints. */
.pk-timeframe-option-checked {
  /* the checked option IS a selected button: the brand's --pk-button-selected-* pair (skyten: marin
     with the arctic label — the same colour as the selected app-bar item), operator 2026-09-25 */
  background: var(--pk-button-selected-bg, #383B5B);
  color: var(--pk-button-selected-fg, #61BADE);
  font-weight: var(--pk-timeframe-font-weight-checked);
}

/* The UA ring, deliberately (CT-1828); inset so it is not clipped by the group's overflow. */
.pk-timeframe-option:focus-visible {
  outline-offset: -2px;
}

.pk-timeframe-option:disabled { cursor: default; opacity: 0.55; }

/* "Custom…" is a different kind of segment — it opens a row rather than naming a period. */
.pk-timeframe-option-custom { font-style: italic; }

.pk-timeframe-custom {
  display: flex;
  align-items: center;
  gap: var(--pk-space-xs, 4px);
}

.pk-timeframe-custom[hidden] { display: none; }

/* sizes */
.pk-timeframe-sm .pk-timeframe-option {
  font-size: var(--pk-timeframe-font-size-sm);
  padding: calc(var(--pk-space-xs, 4px) / 2) var(--pk-space-xs, 4px);
  min-width: var(--pk-timeframe-option-min-width-sm);
}

/* compact: fewer paddings, tighter gap to the custom row */
.pk-timeframe-compact { gap: var(--pk-space-xs, 4px); }
.pk-timeframe-compact .pk-timeframe-option {
  padding-left: var(--pk-space-xs, 4px);
  padding-right: var(--pk-space-xs, 4px);
  min-width: 0;
}

/* ==== src/timeline/timeline.css ==== */
/* timeline.css — STCT-8777. Text tokens on the surface (timeline.test.js measures the pairs over 44
   brand-modes). The rail and markers are supplementary: state is also spoken and, for `current`,
   exposed as aria-current. The done marker's check is drawn in the SURFACE colour on a text-primary
   fill, the same inherited-guarantee trick as the neutral badge (STCT-8767).

   Layout (operator, #/footer): the list is its own inline-size container. Wider than 600px the date
   sits in a left column beside the title; at 600px and below it stacks above the title. Component-
   local sizes are DECLARED here as --pk-timeline-* (theme.test.js / css-invented-values). */

.pk-timeline {
  --pk-timeline-time-col: 6.5rem;
  --pk-timeline-status-size: 0.875rem;
  --pk-timeline-dense-title: 0.875rem;
  --pk-timeline-dense-text: 0.8125rem;
  --pk-timeline-dense-time: 0.6875rem;
  list-style: none;
  margin: 0;
  padding: var(--pk-space-sm, 10px) 0;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  container-type: inline-size;
  font-family: var(--pk-font-sans, system-ui, sans-serif);
  background: var(--pk-sem-bg-surface-secondary, #ffffff);
  color: var(--pk-text-primary, #191919);
}

.pk-timeline-item { position: relative; display: flex; gap: var(--pk-space-sm, 10px); padding: 0 var(--pk-space-md, 16px) var(--pk-space-md, 16px); }
.pk-timeline-item:last-child { padding-bottom: 0; }
/* the rail: from this marker down to the next one */
.pk-timeline-item:not(:last-child)::before {
  content: "";
  position: absolute;
  left: calc(var(--pk-space-md, 16px) + 7px);
  top: 18px;
  bottom: 0;
  width: 2px;
  background: var(--pk-sem-border-primary, #E6E6E6);
}

.pk-timeline-marker {
  flex: 0 0 auto;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  border-radius: 50%;
  border: 2px solid var(--pk-text-secondary, #666666);
  background: var(--pk-sem-bg-surface-secondary, #ffffff);
}
.pk-timeline-done .pk-timeline-marker { border-color: var(--pk-text-primary, #191919); background: var(--pk-text-primary, #191919); }
.pk-timeline-done .pk-timeline-marker::after {
  content: "";
  position: absolute;
  left: 3px; top: 0;
  width: 4px; height: 7px;
  border: solid var(--pk-sem-bg-surface-secondary, #ffffff);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.pk-timeline-current .pk-timeline-marker { border-color: var(--pk-ramp-primary-60, #49bae4); border-width: 4px; }

/* with status: the marker is a tinted disc (ramp-10) carrying a bundled glyph (ramp-100, drawn as a
   mask like inline-alert's icon) — the badge pairing, >= 4.48:1 in all 44 brand-modes
   (timeline.test.js). The hidden word before the title is what carries the status. */
.pk-timeline-item .pk-timeline-marker-glyph::after {
  content: "";
  position: absolute;
  inset: 1px;
  width: auto;
  height: auto;
  border: 0;
  transform: none;
  background-color: currentColor;
  -webkit-mask: var(--pk-icon) center / contain no-repeat;
  mask: var(--pk-icon) center / contain no-repeat;
}
.pk-timeline-status-success .pk-timeline-marker { border-color: var(--pk-ramp-arctic-10, #f3fce0); background: var(--pk-ramp-arctic-10, #f3fce0); color: var(--pk-ramp-tertiary-100, #557f00); }
.pk-timeline-status-warning .pk-timeline-marker { border-color: var(--pk-ramp-orange-10, #fef7e0); background: var(--pk-ramp-orange-10, #fef7e0); color: var(--pk-ramp-orange-100, #876a00); }
.pk-timeline-status-danger .pk-timeline-marker { border-color: var(--pk-ramp-red-10, #fbe8e8); background: var(--pk-ramp-red-10, #fbe8e8); color: var(--pk-ramp-red-100, #7b2224); }

/* desktop: date column | title + text */
.pk-timeline-body { flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: var(--pk-timeline-time-col) 1fr; column-gap: var(--pk-space-sm, 10px); row-gap: 0; }
.pk-timeline-main { grid-column: 2; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pk-timeline .pk-timeline-time { font-size: 12px; color: var(--pk-text-secondary, #666666); grid-column: 1; }
.pk-timeline .pk-timeline-title { margin: 0; font-size: 15px; font-weight: 600; color: var(--pk-text-primary, #191919); overflow-wrap: break-word; }
.pk-timeline-upcoming .pk-timeline-title { font-weight: 400; }
.pk-timeline .pk-timeline-text { font-size: 14px; line-height: 1.45; color: var(--pk-text-secondary, #666666); overflow-wrap: break-word; }

/* mobile (a 390px frame, or any host narrower than 600px): the date stacks above the title */
@container (max-width: 600px) {
  .pk-timeline-body { grid-template-columns: 1fr; }
  .pk-timeline-main { grid-column: 1; }
  .pk-timeline .pk-timeline-time { grid-column: 1; }
}

/* dense: tighter rows and a step down in type */
.pk-timeline-dense .pk-timeline-item { padding: 0 var(--pk-space-sm, 10px) var(--pk-space-sm, 10px); }
.pk-timeline-dense .pk-timeline-item:last-child { padding-bottom: 0; }
.pk-timeline-dense .pk-timeline-item:not(:last-child)::before { left: calc(var(--pk-space-sm, 10px) + 7px); }
.pk-timeline-dense .pk-timeline-title { font-size: var(--pk-timeline-dense-title); }
.pk-timeline-dense .pk-timeline-text { font-size: var(--pk-timeline-dense-text); }
.pk-timeline-dense .pk-timeline-time { font-size: var(--pk-timeline-dense-time); }

/* empty / loading: one notice row, role="status", no marker and no rail */
.pk-timeline-notice { padding: 0 var(--pk-space-md, 16px); }
.pk-timeline-status { display: flex; align-items: center; gap: var(--pk-space-sm, 10px); font-size: var(--pk-timeline-status-size); color: var(--pk-text-secondary, #666666); }
.pk-timeline-status .pk-loader { flex: 0 0 auto; }

.pk-timeline-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* STCT-9016 — who wrote an entry, and the entry's own actions */
.pk-timeline-author {
  display: flex; align-items: center; gap: var(--pk-space-xs, 6px);
  margin: 0 0 var(--pk-space-xs, 6px);
  font-size: var(--pk-fs-small, 13px);
  /* primary, not secondary: --pk-text-secondary fails 4.5:1 on the page in every light brand (STCT-8889) */
  color: var(--pk-text-primary, #191919);
}
.pk-timeline-author-name { font-weight: var(--pk-fw-heading, 600); }
.pk-timeline-actions { display: flex; flex-wrap: wrap; gap: var(--pk-space-sm, 8px); margin-top: var(--pk-space-xs, 6px); }

/* ==== src/toast/toast.css ==== */
/* toast.css — the brand's toast, on the BRAND CONTRACT (STCT-8770). tools-brands `.pk-toast`:
   `padding: var(--pad-y) var(--pad-x); border-radius: var(--radius); border: var(--stroke) solid`,
   the tone's -bg / border pair (--pk-success-bg / --pk-success-border …), the overlay shadow, the type
   scale. Its width follows the brand's base type (a line of ~24 characters), not a fixed pixel. */

.pk-toast {
  position: fixed;
  right: var(--pk-pad-container, 15px);
  display: flex;
  align-items: center;
  gap: var(--pk-gap, 7px);
  width: calc(24 * var(--pk-fs-base, 15px));
  max-width: calc(100vw - 2 * var(--pk-pad-container, 15px));
  box-sizing: border-box;
  padding: var(--pk-pad-y, 8px) var(--pk-pad-x, 10px);
  border-radius: var(--pk-panel-radius, var(--pk-radius-m, 8px));
  border: var(--pk-stroke, 1px) solid var(--pk-sem-border-primary, #ccc);
  box-shadow: var(--pk-shadow-overlay, none);
  font-family: var(--pk-font-sans, sans-serif);
  font-size: var(--pk-fs-small, 14px);
  line-height: var(--pk-lh, 1.5);
  color: var(--pk-text-primary, #191919);
  background: var(--pk-sem-bg-surface-secondary, #fff);
  z-index: 1000;
}

.pk-toast-success { background: var(--pk-success-bg, #e7f9c2); border-color: var(--pk-success-border, #B3E2F4); }
.pk-toast-info    { background: var(--pk-info-bg, #d3eef9);    border-color: var(--pk-info-border, #94D0E8); }
.pk-toast-warning { background: var(--pk-warning-bg, #fdf0c2); border-color: var(--pk-warning-border, #FBE594); }
.pk-toast-error   { background: var(--pk-danger-bg, #f7d0d2);  border-color: var(--pk-danger-border, #F2AEB0); }

.pk-toast-icon {
  display: inline-flex;
  align-items: center;
  font-size: var(--pk-fs-h3, 23px);
  margin-right: var(--pk-space-sm, 10px);
}
.pk-toast-success .pk-toast-icon { color: var(--pk-success, #75AF00); }
.pk-toast-info    .pk-toast-icon { color: var(--pk-info, #0090C9); }
.pk-toast-warning .pk-toast-icon { color: var(--pk-warning, #D8A900); }
.pk-toast-error   .pk-toast-icon { color: var(--pk-danger, #DF3D42); }

.pk-toast-text {
  display: flex;
  flex-direction: column;
  gap: var(--pk-space-xs, 3px);
  flex: 1;
  min-width: 0;
}

.pk-toast-title {
  font-size: var(--pk-fs-small, 14px);
  font-weight: var(--pk-fw-heading, 700);
  line-height: var(--pk-lh-heading, 1.25);
}

.pk-toast-message {
  font-size: var(--pk-fs-caption, 12px);
  line-height: var(--pk-lh, 1.5);
}

.pk-toast-close {
  display: flex;
  align-items: center;
}

.pk-toast-close button {
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  font-size: var(--pk-fs-small, 14px);
  padding: var(--pk-space-xs, 2px);
}

/* ==== src/toggle/toggle.css ==== */
/* toggle.css — the brand's switch, on the BRAND CONTRACT (STCT-8770). tools-brands `.pk-toggle`:
   the on-track is the brand's primary, the off-track its border, the knob its input surface; the
   geometry is derived from the brand's base type size (track = a line of text tall, twice as wide),
   so a brand with larger type gets a larger switch — nothing here is a fixed pixel. */

.pk-toggle {
  --_pk-toggle-h: calc(var(--pk-fs-base, 15px) + 2 * var(--pk-space-xs, 4px));
  --_pk-toggle-inset: calc(var(--pk-space-xs, 4px) / 2);
  position: relative;
  display: inline-block;
  width: calc(2 * var(--_pk-toggle-h));
  height: var(--_pk-toggle-h);
  /* the element IS the track (tools-brands `.pk-toggle { background: primary | border; border-radius: round }`) */
  background: var(--pk-input-border, #ccc);
  border-radius: var(--pk-radius-pill, 999px);
  cursor: pointer;
}
.pk-toggle:has(input:checked) { background: var(--pk-primary, #49bae4); }

.pk-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.pk-toggle-track {
  position: absolute;
  inset: 0;
  background-color: var(--pk-input-border, #ccc);
  border-radius: var(--pk-radius-pill, 999px);
  transition: 0.2s;
}

.pk-toggle-track::before {
  content: '';
  position: absolute;
  width: calc(var(--_pk-toggle-h) - 2 * var(--_pk-toggle-inset));
  height: calc(var(--_pk-toggle-h) - 2 * var(--_pk-toggle-inset));
  left: var(--_pk-toggle-inset);
  top: var(--_pk-toggle-inset);
  background: var(--pk-input-bg, #fff);
  border-radius: 50%;
  transition: 0.2s;
}

.pk-toggle input:checked + .pk-toggle-track {
  background: var(--pk-primary, #49bae4);
}

.pk-toggle input:checked + .pk-toggle-track::before {
  transform: translateX(var(--_pk-toggle-h));
}

.pk-toggle input:focus-visible + .pk-toggle-track {
  outline: var(--pk-ring, 2px) solid var(--pk-ring-color, currentColor);
  outline-offset: var(--pk-ring-offset, 2px);
}

.pk-toggle input:disabled + .pk-toggle-track {
  opacity: 0.5;
  cursor: default;
}

.pk-toggle:has(input:disabled) {
  cursor: default;
}

/* ==== src/toolbar/toolbar.css ==== */
/* @paprika/skyten-foundation/toolbar — load this sheet (and button/button.css; the buttons are the
 * library's). The library does not inject either.
 *
 * The toolbar is a ROW, not a box: no border of its own, a hairline between groups (a separator is
 * a divider, so --pk-sem-border-primary is correct here — it is not a control boundary). */

.pk-toolbar {
  /* No theme token for these yet (STCT-8782 follow-up): declared here so a brand can override them. */
  --pk-toolbar-button-height-sm: 26px;
  --pk-toolbar-font-size-sm: 12px;
  --pk-toolbar-glyph: 1em;
  --pk-toolbar-panel-min-width: calc(var(--pk-space-xl, 32px) * 5);
  position: relative;   /* the overflow panel is positioned against the toolbar */
  display: flex;
  align-items: center;
  gap: var(--pk-space-xs, 4px);
  padding: var(--pk-space-xs, 4px);
  font-family: var(--pk-font-sans, system-ui, sans-serif);
  color: var(--pk-text-primary, #191919);
}

.pk-toolbar-items {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: var(--pk-space-xs, 4px);
  min-width: 0;
}

.pk-toolbar-vertical,
.pk-toolbar-vertical .pk-toolbar-items,
.pk-toolbar-vertical .pk-toolbar-group {
  flex-direction: column;
  align-items: stretch;
}

.pk-toolbar-group {
  display: flex;
  align-items: center;
  gap: var(--pk-space-xs, 4px);
}

/* Toolbar buttons are the library button at its small size, squared off slightly so a run of them
   reads as a strip rather than a row of pills. */
.pk-toolbar .pk-toolbar-button {
  min-width: 0;
  border-radius: var(--pk-button-radius, var(--pk-radius-s, 6px));
}
.pk-toolbar-sm .pk-toolbar-button {
  height: var(--pk-toolbar-button-height-sm);
  padding: 0 var(--pk-space-sm, 8px);
  font-size: var(--pk-toolbar-font-size-sm);
}

.pk-toolbar-glyph {
  display: inline-flex;
  width: var(--pk-toolbar-glyph);
  height: var(--pk-toolbar-glyph);
}
.pk-toolbar-glyph svg { width: 100%; height: 100%; stroke: currentColor; }

/* icon-only: the label stays in the DOM (aria-label mirrors it); hide the visible text only. */
.pk-toolbar-button-icononly .pk-button-label {
  position: absolute;
  /* the 1px visually-hidden box, sized by the primary border-width token (1px) */
  width: var(--pk-bw-primary, 1px);
  height: var(--pk-bw-primary, 1px);
  margin: calc(-1 * var(--pk-bw-primary, 1px));
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.pk-toolbar-button-icononly .pk-button-icon { margin: 0; }

.pk-toolbar-separator {
  flex: 0 0 auto;
  align-self: stretch;
  width: var(--pk-bw-hairline, 1px);
  margin: 0 var(--pk-space-xs, 4px);
  background: var(--pk-sem-border-primary, #E6E6E6);
}
.pk-toolbar-vertical .pk-toolbar-separator {
  width: auto;
  height: var(--pk-bw-hairline, 1px);
  margin: var(--pk-space-xs, 4px) 0;
}

.pk-toolbar-spacer { flex: 1 1 auto; }

.pk-toolbar-custom { display: inline-flex; align-items: center; }

/* Overflow panel: absolutely positioned INSIDE the toolbar, under (or beside) the ellipsis. */
.pk-toolbar-panel {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--pk-space-xs, 4px);
  min-width: var(--pk-toolbar-panel-min-width);
  margin-top: var(--pk-space-xs, 4px);
  padding: var(--pk-space-xs, 4px);
  background: var(--pk-sem-bg-surface-primary, #fff);
  border: var(--pk-bw-primary, 1px) solid var(--pk-text-secondary, #666);
  border-radius: var(--pk-panel-radius, var(--pk-radius-m, 8px));
}
.pk-toolbar-panel[hidden] { display: none; }
.pk-toolbar-vertical .pk-toolbar-panel {
  top: auto;
  right: auto;
  bottom: 0;
  left: 100%;
  margin: 0 0 0 var(--pk-space-xs, 4px);
}
.pk-toolbar-panel .pk-toolbar-button { justify-content: flex-start; }
.pk-toolbar-panel .pk-toolbar-separator {
  width: auto;
  height: var(--pk-bw-hairline, 1px);
  margin: var(--pk-space-xs, 4px) 0;
}

/* The browser's ring, deliberately — see select.css for the measured reason. */
.pk-toolbar :focus-visible { outline-offset: 1px; }

.pk-toolbar-disabled { opacity: 0.7; }

/* ==== src/tooltip/tooltip.css ==== */
/* tooltip.css — STCT-8777. An inverse box: the primary TEXT colour as the background and the
   secondary surface as the text, so it stands off every surface it can float over. tooltip.test.js
   measures the text against the box and the box against the page over 44 brand-modes. */

.pk-tooltip {
  position: fixed;
  inset: auto;            /* a popover is centred by the UA sheet (inset: 0; margin: auto); place() sets top/left */
  margin: 0;
  border: 0;
  z-index: 1000;          /* the fallback path; a popover is in the top layer and ignores it */
  box-sizing: border-box;
  max-width: min(280px, calc(100vw - 16px));
  padding: 6px 10px;
  border-radius: var(--pk-menu-radius, var(--pk-radius-s, 4px));
  font-family: var(--pk-font-sans, system-ui, sans-serif);
  font-size: 12px;
  line-height: 1.4;
  overflow-wrap: anywhere;
  pointer-events: auto;   /* hoverable (WCAG 1.4.13): the pointer must be able to rest on it */
}
.pk-tooltip { background: var(--pk-text-primary, #2d2c31); color: var(--pk-sem-bg-surface-secondary, #F7F7F8); }
.pk-tooltip[hidden] { display: none; }

/* ==== src/user-menu/user-menu.css ==== */
/* @paprika/skyten-foundation/user-menu — the account menu in the app bar (STCT-8670), on the BRAND
 * CONTRACT (STCT-8770): the trigger wears the bar's ink (--pk-appbar-fg), the panel is the brand's
 * MENU surface (--pk-menu-bg / -radius / -shadow, items on --pk-menu-item-*), the avatar is the brand's
 * mark size (--pk-logo-height), and every size comes from the type scale. */

.pk-usermenu { position: relative; display: inline-flex; font-family: var(--pk-font-sans, system-ui, sans-serif); }

.pk-usermenu-trigger {
  display: inline-flex; align-items: center; gap: var(--pk-space-xs, 4px);
  font: inherit; cursor: pointer;
  padding: var(--pk-space-xs, 4px);
  background: none; border: 0;
  border-radius: var(--pk-radius-pill, 999px);
  color: inherit;
}
.pk-usermenu-trigger:focus-visible { outline: var(--pk-ring, 2px) solid var(--pk-ring-color, currentColor); outline-offset: var(--pk-ring-offset, 2px); }
.pk-usermenu-name { font-size: var(--pk-fs-small, 14px); max-width: 12ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pk-usermenu-avatar {
  position: relative; flex: 0 0 auto;
  width: var(--pk-logo-height, 28px); height: var(--pk-logo-height, 28px); overflow: hidden;
  display: grid; place-items: center;
  border-radius: var(--pk-radius-pill, 999px);
  /* STCT-8886: the ring IS the avatar's 1.4.11 boundary (its surface fill does not stand out from the bar ground). The
     field-border ink failed 3:1 on that ground in 134 of 140 brand-modes; the secondary text ink fails in 7, the same
     brand values already routed to tools-brands (measured in Chromium over all 70 brands x 2 modes). */
  border: var(--pk-stroke, 1px) solid var(--pk-text-primary, #191919);
  background: var(--pk-sem-bg-surface-secondary, #fff);
  color: var(--pk-text-primary, #191919);
}
.pk-usermenu-initials { font-family: var(--pk-font-sans, system-ui, sans-serif); font-weight: var(--pk-fw-heading, 600); font-size: var(--pk-fs-caption, 11px); line-height: 1; letter-spacing: var(--pk-ls, 0); }
/* The image sits OVER the initials, so a failed load reveals them with no layout shift. */
.pk-usermenu-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* ⛔ the UA's `[hidden] { display: none }` is low-specificity and the `display: flex` below overrode
   it (STCT-8735); any component that sets `display` on an element it also toggles needs this line. */
.pk-usermenu-panel[hidden] { display: none; }

.pk-usermenu-panel {
  position: absolute; top: calc(100% + var(--pk-space-xs, 4px)); right: 0; z-index: 20;
  min-width: var(--pk-rail-width, 14rem); max-width: min(2 * var(--pk-rail-width, 14rem), calc(100vw - 2 * var(--pk-space-md, 16px)));
  box-sizing: border-box;
  display: flex; flex-direction: column;
  background: var(--pk-menu-bg, #fff);
  border: var(--pk-stroke, 1px) solid var(--pk-sem-border-primary, #808080);
  border-radius: var(--pk-menu-radius, 6px);
  box-shadow: var(--pk-menu-shadow, none);
  padding: var(--pk-space-xs, 4px);
  color: var(--pk-menu-item-fg, #191919);
}

.pk-usermenu-head {
  display: flex; flex-direction: column;
  padding: var(--pk-menu-item-pad, 8px 12px);
  border-bottom: var(--pk-bw-hairline, 1px) solid var(--pk-sem-border-primary, #F2F2F2);
  margin-bottom: var(--pk-space-xs, 4px);
}
.pk-usermenu-head-name { font-weight: var(--pk-fw-heading, 600); font-size: var(--pk-fs-small, 14px); }
.pk-usermenu-head-secondary { font-size: var(--pk-fs-caption, 12px); color: var(--pk-text-secondary, #666);
  font-variant-numeric: tabular-nums; }

.pk-usermenu-list { display: flex; flex-direction: column; }
.pk-usermenu-item {
  display: flex; align-items: center; gap: var(--pk-nav-item-gap, 8px);
  font: inherit; font-size: var(--pk-menu-item-fs, 14px); text-align: left; text-decoration: none; cursor: pointer;
  padding: var(--pk-menu-item-pad, 8px 12px);
  border: 0; background: none;
  border-radius: 0;
  color: var(--pk-menu-item-fg, #191919);
}
.pk-usermenu-item:hover { background: var(--pk-menu-hover-bg, #F2F2F2); }
.pk-usermenu-item:focus-visible { outline: var(--pk-ring, 2px) solid var(--pk-ring-color, currentColor); outline-offset: calc(-1 * var(--pk-ring-offset, 2px)); }
/* ⛔ A DESTRUCTIVE ITEM IS NOT MARKED BY COLOUR ALONE (WCAG 1.4.1): it is outlined on all four sides in the
   brand's MENU danger ink (--pk-menu-danger-fg, STCT-9985) at the theme's hairline width — a shape cue, the box,
   that must meet 1.4.11's 3:1 as non-text ON THE MENU GROUND. --pk-danger alone did not: 1.06-2.50:1 in 5 dark
   brand-modes (_default, bosch, ford, hapaglloyd, milka), while tools-brands already exported the legible menu
   danger ink (STCT-9092) and nothing read it. --pk-danger stays as the fallback for a sheet without the token.
   Not a one-sided accent edge (STCT-9224): no brand defines one. The label keeps the ordinary item colour. */
.pk-usermenu-item-danger {
  border: var(--pk-bw-hairline, 1px) solid var(--pk-menu-danger-fg, var(--pk-danger, #df3d42));
}
.pk-usermenu-icon {
  width: var(--pk-fs-base, 16px); height: var(--pk-fs-base, 16px); flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask: var(--pk-icon) center / contain no-repeat;
  mask: var(--pk-icon) center / contain no-repeat;
}
.pk-usermenu-separator { border: 0; height: var(--pk-bw-hairline, 1px);
  background: var(--pk-sem-border-primary, #F2F2F2);
  margin: var(--pk-space-xs, 4px) var(--pk-space-sm, 8px); }
.pk-usermenu-footer { font-size: var(--pk-fs-caption, 12px); color: var(--pk-text-secondary, #666);
  padding: var(--pk-menu-item-pad, 8px 12px); }

/* At phone width the panel keeps its RIGHT anchor (the trigger is at the right end of nearly every bar — STCT-11746:
   left: 0 opened it rightward, off the screen) and is capped to the viewport; a left-hand trigger says so with
   data-pk-usermenu-align="start" on the host and opens from the left. */
@media (max-width: 480px) {
  .pk-usermenu-panel { min-width: 0; width: max-content; max-width: calc(100vw - 2 * var(--pk-space-sm, 8px)); }
  [data-pk-usermenu-align="start"] .pk-usermenu-panel { right: auto; left: 0; }
  .pk-usermenu-name { display: none; }
}

/* ==== src/website/website.css ==== */
/* website — the section-level blocks of a one-page marketing website (WEB-1542..1546), measured on skytraders.trading
   2026-10-10 at 1360 / 390. Colours: the stable ramp steps and the brand / highlight tokens, so a light region paints
   the same under a dark page (mixed mode); geometry: the reference's computed values. Under 861px (the reference's
   menu collapse) sections tighten and splits stack. */

/* ---- the page frame (WEB-1542): 5vw gutters, never narrower than centring the website content box; a 36px gap
        under the rounded frame, on the page ground. The bar sits in the gutters too, above the frame. ---- */
/* WEB-1571 (PO 2026-10-11: "the padding ruling should be applied to the page frame component"): the FRAME owns the
   website's CONTENT COLUMN, defined once. Measured on live skytraders.trading 2026-10-11 (pm_web section_padding.mjs,
   table on WEB-1571): every band's content, the footer's included, starts on one column, the 1068px content box
   centred in the frame with a 56px minimum gutter (20px under 861px). The section, the footer and the feature hero
   INHERIT it from here; each keeps only its own block padding (section 104 / 64, footer 48, the hero its own). */
.pk-website-frame {
  --pk-website-content-max: 1068px;
  --pk-website-content-narrow: 820px;   /* live's application form: inset 202 at 1360 */
  --pk-website-gutter: 56px;
  /* the column's inset from a full-width band's edge: the gutter, or what centres the content box */
  --pk-website-inset: max(var(--pk-website-gutter), calc((100% - var(--pk-website-content-max)) / 2));
  box-sizing: border-box;
  /* WEB-1739 (PO 2026-10-16, DS v48 "Page margins on phones"): the NAV gutter is the bar's, at every width; the
     FRAME gutter is the content container's (the same on desktop, 0 on phones); the FOOT is the gap under it. */
  --pk-website-nav-gutter: max(5vw, calc((100% - var(--pk-webnav-container-max-width)) / 2));
  --pk-website-frame-gutter: var(--pk-website-nav-gutter);
  --pk-website-frame-foot: 36px;
  padding: 0 var(--pk-website-frame-gutter) var(--pk-website-frame-foot);
  /* WEB-1562 (PO, option c): the frame is the component-free dark AREA, so it is painted by a TOKEN, not by a theme
     scope: the brand's --pk-sem-bg-website-frame (skyten: #131214 in both blocks), else the page ground as before */
  background: var(--pk-sem-bg-website-frame, var(--pk-sem-bg-page));
  min-height: 100vh;
}
.pk-website-frame-bar { position: sticky; top: 0; z-index: 20;
  /* WEB-1739: the bar keeps the nav gutter where the frame's is smaller (0 on desktop, the nav gutter on phones) */
  margin-left: calc(var(--pk-website-nav-gutter) - var(--pk-website-frame-gutter));
  margin-right: calc(var(--pk-website-nav-gutter) - var(--pk-website-frame-gutter)); }
/* WEB-1571: bare = the column scope alone (a block shown outside a page); the column properties above still apply */
.pk-website-frame.pk-website-frame-bare { padding: 0; min-height: 0; background: none; }
.pk-website-frame-bare > .pk-website-frame-inner { border-radius: 0; }
.pk-website-frame-inner { border-radius: 16px; overflow: clip; }

/* ---- a section (WEB-1542) ---- */
/* the section's own knob is its block padding; the gutter and the column are the frame's */
.pk-website-section { --pk-website-section-block: 104px; box-sizing: border-box; padding: var(--pk-website-section-block) var(--pk-website-gutter); font-family: var(--pk-font-sans); }
/* an anchor jump (a menu item's #id) lands the section's top under the sticky website bar, not behind it */
.pk-website-section[id] { scroll-margin-top: var(--pk-webnav-height-wide, var(--pk-webnav-height)); }
.pk-website-section.pk-website-bleed { padding: 0; }
.pk-website-section-inner { max-width: var(--pk-website-content-max); margin: 0 auto; }
.pk-website-bleed > .pk-website-section-inner { max-width: none; }
.pk-website-narrow > .pk-website-section-inner { max-width: var(--pk-website-content-narrow); }
.pk-website-ground-light { background: var(--pk-ramp-primary-05); color: var(--pk-text-primary); }
.pk-website-ground-white { background: var(--pk-sem-bg-surface-primary); color: var(--pk-text-primary); }
.pk-website-ground-navy { background: var(--pk-ramp-primary-60); color: var(--pk-text-on-anchor); }
.pk-website-ground-dark { background: var(--pk-ramp-primary-100); color: var(--pk-text-on-anchor); }

.pk-website-header { margin-bottom: 40px; }
.pk-website-center .pk-website-header { text-align: center; }
.pk-website-eyebrow {
  margin: 0; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--pk-ramp-secondary-60);
}
.pk-website-ground-navy .pk-website-eyebrow { color: var(--pk-brand-swatch); }
.pk-website-title {
  margin: 14px 0 24px; font-size: 30px; font-weight: 700; line-height: 1.15; letter-spacing: -0.01em;
  color: var(--pk-ramp-primary-60);
}
.pk-website-ground-navy .pk-website-title, .pk-website-ground-dark .pk-website-title { color: var(--pk-text-on-anchor); }
.pk-website-lead { margin: 0; font-size: 16px; line-height: 1.65; color: var(--pk-ramp-primary-40); }
.pk-website-ground-navy .pk-website-lead { color: color-mix(in srgb, var(--pk-text-on-anchor) 72%, transparent); }
.pk-website-ground-dark .pk-website-lead { color: color-mix(in srgb, var(--pk-text-on-anchor) 82%, transparent); }
.pk-website-accent-brand { color: var(--pk-brand-swatch); }
.pk-website-accent-stop { color: var(--pk-highlight); }

/* ---- split (WEB-1543) ---- */
.pk-website-split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.pk-website-split.pk-website-weight-text { grid-template-columns: 1.2fr 1fr; }
.pk-website-split.pk-website-weight-media { grid-template-columns: 1fr 1.2fr; }
.pk-website-split.pk-website-media-start > .pk-website-split-media { order: -1; }
.pk-website-split.pk-website-split-top { align-items: start; }
/* WEB-1588 (PO 2026-10-12): 'stretch' — two boxes side by side are the same height: both columns take the row's
   height and a card that is a column's only box fills it. Under the phone breakpoint the columns stack (one per row),
   so nothing is equalised there. */
.pk-website-split.pk-website-split-stretch { align-items: stretch; }
.pk-website-split-stretch > .pk-website-split-text, .pk-website-split-stretch > .pk-website-split-media { display: flex; flex-direction: column; }
.pk-website-split-stretch > .pk-website-split-text > .pk-card:only-child,
.pk-website-split-stretch > .pk-website-split-media > .pk-card:only-child { flex: 1 1 auto; }
.pk-website-split-bleed { gap: 0; align-items: stretch; }
.pk-website-split-bleed > .pk-website-split-text { padding: 96px var(--pk-website-gutter); max-width: 620px; box-sizing: border-box; }
.pk-website-split-bleed > .pk-website-split-media { min-height: 100%; }
.pk-website-split-text > .pk-website-header { margin-bottom: 24px; }

/* ---- media figure (WEB-1543) ---- */
.pk-website-figure { position: relative; margin: 0; display: flex; flex-direction: column; align-items: center; }
.pk-website-figure-frame { width: 100%; border-radius: 20px; overflow: hidden; line-height: 0; }
.pk-website-figure-frame > img { display: block; width: 100%; height: auto; border-radius: 20px; object-fit: cover; }
.pk-website-figure-framed {
  border: 1px solid var(--pk-sem-border-primary);
  box-shadow: 0 30px 60px -30px color-mix(in srgb, var(--pk-ramp-primary-60) 45%, transparent);
}
/* a cover picture FILLS its cell and never sets the cell's height (the reference band is as tall as its copy) */
.pk-website-figure-cover { height: 100%; min-height: inherit; }
.pk-website-figure-cover > .pk-website-figure-frame { position: absolute; inset: 0; border-radius: 0; }
.pk-website-figure-cover > .pk-website-figure-frame > img { height: 100%; object-fit: cover; border-radius: 0; }
.pk-website-split-media:has(> .pk-website-figure-cover) { position: relative; }
.pk-website-figure-badge {
  position: absolute; right: -8px; bottom: -20px; max-width: 220px; padding: 18px 22px; border-radius: 16px;
  background: var(--pk-ramp-primary-60); color: var(--pk-text-on-anchor);
  box-shadow: 0 20px 40px -20px color-mix(in srgb, var(--pk-ramp-primary-60) 60%, transparent);
}
.pk-website-figure-badge-label {
  margin-bottom: 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--pk-brand-swatch);
}
.pk-website-figure-badge-text { font-size: 15px; font-weight: 700; line-height: 1.35; }
.pk-website-figure-caption {
  margin-top: 12px; padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 700;
  background: var(--pk-ramp-secondary-10); color: var(--pk-ramp-secondary-60);
}

/* ---- callout, checklist, item cards (WEB-1545) ---- */
.pk-website-callout {
  margin: 24px 0 0; padding-left: 18px; border-left: 3px solid var(--pk-highlight);
  font-size: 18px; font-weight: 700; line-height: 1.65; color: var(--pk-text-primary);
}
.pk-website-ground-navy .pk-website-callout, .pk-website-ground-dark .pk-website-callout { color: var(--pk-text-on-anchor); }
.pk-website-checklist { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 12px; }
.pk-website-check { position: relative; padding-left: 34px; font-size: 16px; line-height: 24px; }
.pk-website-check::before {
  content: "\2713"; position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 6px;   /* WEB-1541: rounded squares, as measured */
  display: grid; place-items: center; font-size: 13px; line-height: 1.5; font-weight: 700;   /* WEB-1541 (PO c.146746): live's 13px / 19.5px glyph; the row's 24px line height no longer reaches the marker */
  background: var(--pk-ramp-secondary-10); color: var(--pk-ramp-secondary-60);
}
.pk-website-check-reward::before { background: var(--pk-ramp-tertiary-20); color: var(--pk-ramp-tertiary-90); }
.pk-website-cards { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 12px; }
.pk-website-card {
  padding: 16px 20px; border-radius: 12px; border: 1px solid var(--pk-sem-border-primary);
  background: var(--pk-sem-bg-surface-primary); font-size: 15px; line-height: 21px;
}
.pk-website-card-filled {
  background: var(--pk-ramp-primary-60); border-color: var(--pk-ramp-primary-60); color: var(--pk-text-on-anchor); font-weight: 700;
}
.pk-website-card-accent { background: var(--pk-ramp-tertiary-05); border-color: var(--pk-highlight); font-weight: 700; }

/* ---- step cards, key-value, panel, fine print (WEB-1546) ---- */
.pk-website-steps {
  list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 28px;
}
.pk-website-step {
  padding: 26px; border-radius: 20px;
  background: color-mix(in srgb, var(--pk-text-on-anchor) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--pk-text-on-anchor) 12%, transparent);
}
.pk-website-step-highlight {
  background: color-mix(in srgb, var(--pk-highlight) 10%, transparent);
  border-color: color-mix(in srgb, var(--pk-highlight) 35%, transparent);
}
.pk-website-step-num { display: block; margin-bottom: 16px; font-size: 40px; font-weight: 700; line-height: 1; color: var(--pk-brand-swatch); }
.pk-website-step-highlight .pk-website-step-num { color: var(--pk-highlight); }
.pk-website-step-title { margin: 0 0 8px; font-size: 18px; font-weight: 700; }
.pk-website-step-text { margin: 0; font-size: 14px; line-height: 1.55; color: color-mix(in srgb, var(--pk-text-on-anchor) 72%, transparent); }
.pk-website-kv { margin: 0; }
.pk-website-kv-framed, .pk-website-panel {
  padding: 28px; border-radius: 20px; border: 1px solid var(--pk-sem-border-primary); background: var(--pk-ramp-primary-05);
}
.pk-website-kv-row {
  display: flex; justify-content: space-between; gap: 16px; padding: 14px 0;
  border-bottom: 1px solid var(--pk-sem-border-primary); font-size: 13px;
}
.pk-website-kv-key { margin: 0; color: var(--pk-ramp-primary-40); }
.pk-website-kv-value { margin: 0; text-align: right; color: var(--pk-text-primary); }
.pk-website-panel-label { margin: 0 0 20px; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.pk-website-panel > img { display: block; width: 100%; height: auto; }
.pk-website-fineprint { margin: 20px 0 0; max-width: 900px; font-size: 12px; line-height: 1.6; color: var(--pk-ramp-primary-40); }

/* ---- under the reference site's menu collapse ---- */
@media (max-width: 860px) {
  /* WEB-1571: the frame's phone gutter (every block follows) and the section's phone block */
  /* WEB-1739: no frame margin, square corners (the hero too) and no strip under the container on phones */
  .pk-website-frame { --pk-website-gutter: 20px; --pk-website-frame-gutter: 0px; --pk-website-frame-foot: 0px; }
  .pk-website-frame-inner, .pk-website-frame .pk-hero { border-radius: 0; }
  /* WEB-1741: the bar's black runs edge to edge on phones, also while stuck; the nav gutter is its inner padding */
  .pk-website-frame-bar { margin-left: 0; margin-right: 0; }
  .pk-website-frame-bar .pk-shell[data-pk-webnav-layout] { --pk-webnav-pad-x: var(--pk-website-nav-gutter); }
  .pk-website-section { --pk-website-section-block: 64px; }
  .pk-website-section.pk-website-bleed { padding: 0; }
  .pk-website-title { font-size: 22px; }
  .pk-website-split, .pk-website-split.pk-website-weight-text, .pk-website-split.pk-website-weight-media { grid-template-columns: 1fr; gap: 32px; }
  .pk-website-split:not(.pk-website-media-start) > .pk-website-split-media { order: 1; }
  .pk-website-split-bleed { gap: 0; }
  .pk-website-split-bleed > .pk-website-split-media { min-height: 380px; }
  .pk-website-split-bleed > .pk-website-split-text { padding: 56px var(--pk-website-gutter); max-width: none; }
  .pk-website-figure-badge { right: 8px; }
  .pk-website-kv-framed, .pk-website-panel { padding: 20px; }
  .pk-website-steps { grid-template-columns: 1fr; }
}

/* ---- WEB-1571 / WEB-1572: the FOOTER and the feature HERO of a website stand on the sections' content column ----
   Measured 2026-10-11: live's footer content starts at the sections' x (146 at 1360, 39.5 at 390), 48px top and
   bottom, its three link columns evenly spread to the column's right edge; the library footer's own padding (48px
   sides, 24px bottom: an app footer's) put it 30px left of every section. Inside a website frame only: an app's
   footer and a hero elsewhere are unchanged. align 'end' still packs the columns to the end. */
/* the footer's own brand-width knob, at live's measure (tagline 300px wide at 1360, 2026-10-11) */
.pk-website-frame .pk-footer:not(.pk-footer-compact) { --pk-website-footer-block: 48px; --pk-footer-brand-max: 300px; padding: var(--pk-website-footer-block) var(--pk-website-inset); }
.pk-website-frame .pk-footer:not(.pk-footer-compact) .pk-footer-top { justify-content: space-between; }
.pk-website-frame .pk-footer:not(.pk-footer-compact) .pk-footer-brand { flex: 0 1 auto; }
.pk-website-frame .pk-footer:not(.pk-footer-compact) .pk-footer-column { flex: 0 0 auto; }
/* the feature hero's text starts on the same column (its own vertical rhythm stays the hero's) */
.pk-website-frame .pk-hero.pk-hero-size-feature { --pk-hero-pad-x: var(--pk-website-inset); }

/* ---- WEB-1602 (PO 2026-10-12, final skytraders type and colour): the NAMED sizes, weights, line-heights and text colours ----
   Aliases of existing library tokens only: every size is a --pk-fs-* scale step, every colour a --pk-* token, so no new
   value. Scoped to the website (.pk-website-frame), so applications and other callers are unchanged; the cookie
   card, which sits outside the frame, declares the few it reads itself (cookie-banner.css). Declared again on every themed region
   inside the scope, because a custom property that refers to another resolves where it is declared (a light region
   inside a dark page resolves the light values). The two display roles step down one size at 860px and narrower (the
   width the website sections change at). */
.pk-website-frame,
.pk-website-frame [data-pk-theme] {
  --pk-ts-xs: var(--pk-fs-caption);    /* 12px */
  --pk-ts-s: var(--pk-fs-small);       /* 14px */
  --pk-ts-m: var(--pk-fs-base);        /* 15px */
  --pk-ts-l: var(--pk-fs-h4);          /* 19px */
  --pk-ts-xl: var(--pk-fs-h3);         /* 23px */
  --pk-ts-2xl: var(--pk-fs-h2);        /* 29px */
  --pk-ts-3xl: var(--pk-fs-h1);        /* 46px */
  --pk-ts-display: var(--pk-ts-3xl);   /* hero title, step numeral */
  --pk-ts-heading: var(--pk-ts-2xl);   /* section heading */
  --pk-tlh-text: var(--pk-lh);         /* 1.55 */
  --pk-tlh-title: var(--pk-lh-heading);/* 1.25 */
  --pk-tw-regular: var(--pk-fw-body);  /* 400 */
  --pk-tw-semibold: var(--pk-button-weight); /* 600: the library has no general semibold token; the button's is the one it uses */
  --pk-tw-bold: var(--pk-fw-heading);  /* 700 */
  --pk-tls-label: 0.08em;              /* the eyebrow tracking the website section already uses */
  --pk-tc-text-primary: var(--pk-text-primary);
  --pk-tc-text-secondary: var(--pk-text-secondary);
  --pk-tc-text-heading: var(--pk-text-heading);
  --pk-tc-text-accent: var(--pk-accent-text);
  --pk-tc-text-on-dark-heading: var(--pk-text-on-anchor);
  --pk-tc-text-on-dark-primary: var(--pk-sem-footer-text);
  --pk-tc-text-on-dark-secondary: var(--pk-sem-footer-text-secondary);
  --pk-tc-text-accent-on-dark: var(--pk-brand-swatch);
}
@media (max-width: 860px) {
  .pk-website-frame,
  .pk-website-frame [data-pk-theme] {
    --pk-ts-display: var(--pk-ts-2xl);  /* 46 -> 29 */
    --pk-ts-heading: var(--pk-ts-xl);   /* 29 -> 23 */
  }
}

/* ---- WEB-1602: the website text roles on the named tokens (final.css section 3 + 4, scope .pk-website-frame) ---- */
/* the website bar: sizes and the call-to-action weight through the bar's own tokens, set on the bar */
.pk-website-frame .pk-shell[data-pk-webnav-layout],
.pk-website-frame .pk-nav[data-pk-webnav-layout] {
  --pk-webnav-fs: var(--pk-ts-m);
  --pk-webnav-cta-fs: var(--pk-ts-m);
  --pk-webnav-cta-weight: var(--pk-tw-semibold);
  --pk-webnav-cta2-weight: var(--pk-tw-semibold);
  --pk-button-fs: var(--pk-ts-m);
  --pk-button-weight: var(--pk-tw-semibold);
}
/* the bar's ink on a dark bar: the on-dark text grey */
.pk-website-frame[data-pk-theme="dark"] .pk-shell[data-pk-webnav-layout],
[data-pk-theme="dark"] .pk-website-frame .pk-shell[data-pk-webnav-layout],
.pk-website-frame [data-pk-theme="dark"] .pk-shell[data-pk-webnav-layout],
.pk-website-frame[data-pk-theme="dark"] .pk-nav[data-pk-webnav-layout],
[data-pk-theme="dark"] .pk-website-frame .pk-nav[data-pk-webnav-layout],
.pk-website-frame [data-pk-theme="dark"] .pk-nav[data-pk-webnav-layout] {
  --pk-webnav-fg: var(--pk-tc-text-on-dark-primary);
  --pk-webnav-active-fg: var(--pk-tc-text-on-dark-primary);
}
.pk-website-frame .pk-website-section { font-size: var(--pk-ts-m); line-height: var(--pk-tlh-text); }
.pk-website-frame .pk-website-eyebrow { font-size: var(--pk-ts-xs); font-weight: var(--pk-tw-bold); letter-spacing: var(--pk-tls-label); color: var(--pk-tc-text-accent); }
.pk-website-frame .pk-website-ground-navy .pk-website-eyebrow,
.pk-website-frame .pk-website-ground-dark .pk-website-eyebrow { color: var(--pk-tc-text-accent-on-dark); }
.pk-website-frame .pk-website-title { font-size: var(--pk-ts-heading); font-weight: var(--pk-tw-bold); line-height: var(--pk-tlh-title); }
.pk-website-frame .pk-website-lead { font-size: var(--pk-ts-l); line-height: var(--pk-tlh-text); color: var(--pk-tc-text-secondary); }
.pk-website-frame .pk-website-ground-navy .pk-website-lead,
.pk-website-frame .pk-website-ground-dark .pk-website-lead { color: var(--pk-tc-text-on-dark-primary); }
.pk-website-frame .pk-website-callout { font-size: var(--pk-ts-l); font-weight: var(--pk-tw-bold); line-height: var(--pk-tlh-text); }
.pk-website-frame .pk-website-check { font-size: var(--pk-ts-m); }
.pk-website-frame .pk-website-card { font-size: var(--pk-ts-m); }
.pk-website-frame .pk-website-step-num { font-size: var(--pk-ts-display); font-weight: var(--pk-tw-bold); }
.pk-website-frame .pk-website-step-title { font-size: var(--pk-ts-l); font-weight: var(--pk-tw-bold); line-height: var(--pk-tlh-title); }
.pk-website-frame .pk-website-step-text { font-size: var(--pk-ts-s); line-height: var(--pk-tlh-text); color: var(--pk-tc-text-on-dark-primary); }
.pk-website-frame .pk-website-kv-row { font-size: var(--pk-ts-s); }
.pk-website-frame .pk-website-kv-key { color: var(--pk-tc-text-secondary); }
.pk-website-frame .pk-website-panel-label { font-size: var(--pk-ts-xs); font-weight: var(--pk-tw-bold); letter-spacing: var(--pk-tls-label); }
.pk-website-frame .pk-website-fineprint { font-size: var(--pk-ts-xs); line-height: var(--pk-tlh-text); color: var(--pk-tc-text-secondary); }
.pk-website-frame .pk-website-figure-badge-label { font-size: var(--pk-ts-xs); letter-spacing: var(--pk-tls-label); }
.pk-website-frame .pk-website-figure-badge-text { font-size: var(--pk-ts-m); }
.pk-website-frame .pk-website-figure-caption { font-size: var(--pk-ts-s); color: var(--pk-tc-text-accent); }
/* section 4: on navy and dark sections the on-dark title ink, by name (light grounds keep the library's heading ink) */
.pk-website-frame .pk-website-ground-navy .pk-website-title,
.pk-website-frame .pk-website-ground-dark .pk-website-title { color: var(--pk-tc-text-on-dark-heading); }

/* ==== src/workspace-pane/workspace-pane.css ==== */
/* @paprika/skyten-foundation/workspace-pane — load this sheet; the library does not inject it.
 *
 * ⛔ FOCUS IS NOT A COLOUR. The focused pane gets a THICKER border (--pk-bw-active) and a HEAVIER
 * title, and only then an accent hue: on epaper the hue is a near-black and the weight still
 * says which pane has the keyboard. */

.pk-pane {
  /* No theme token for these yet (STCT-8782 follow-up): declared here so a brand can override them. */
  --pk-pane-font-size: 0.8125rem;
  --pk-pane-title-font-weight: 600;
  --pk-pane-title-font-weight-focused: 700;
  --pk-pane-bar-min-height: var(--pk-space-xl, 32px);
  --pk-pane-icon: var(--pk-space-md, 16px);
  --pk-pane-close: var(--pk-space-lg, 24px);
  --pk-pane-close-glyph: 0.875rem;
  --pk-pane-error-glyph: 1.25rem;
  --pk-pane-resize: var(--pk-space-md, 16px);
  position: relative;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
  /* STCT-9098: a pane is a CARD on the workspace — the brand's card surface (skyten: white on both
   * grounds' cards), not the primary surface (grey for skyten). The bar keeps the secondary surface. */
  background: var(--pk-card-bg, var(--pk-sem-bg-surface-primary, #fff));
  /* --pk-text-secondary for the boundary, NOT the hairline token: a pane edge is what a user
   * grabs, so it must clear 3:1 like a control (select.css, 45-of-48 measurement). */
  border: var(--pk-bw-primary, 1px) solid var(--pk-text-secondary, #666);
  border-radius: var(--pk-panel-radius, var(--pk-radius-m, 8px));
  font-family: var(--pk-font-sans, system-ui, sans-serif);
  color: var(--pk-text-primary, #191919);
  overflow: hidden;
}
.pk-pane:focus-visible { outline-offset: 1px; }

/* Focused: thicker + heavier + accent, in that order of importance. The padding shrinks by the
 * border delta so the content does not shift when focus moves between panes. */
.pk-pane[data-pk-pane-focused] {
  border-width: var(--pk-bw-active, 2px);
  border-color: var(--pk-ramp-primary-60, #006D99);
}
.pk-pane[data-pk-pane-focused] .pk-pane-title { font-weight: var(--pk-pane-title-font-weight-focused); }

.pk-pane-bar {
  display: flex;
  align-items: center;
  gap: var(--pk-space-xs, 4px);
  min-height: var(--pk-pane-bar-min-height);
  padding: 0 var(--pk-space-xs, 4px) 0 var(--pk-space-sm, 8px);
  background: var(--pk-sem-bg-surface-secondary, #F2F2F2);
  border-bottom: var(--pk-bw-hairline, 1px) solid var(--pk-sem-border-primary, #E6E6E6);
  /* The bar is what a layout host will let the user drag by; say so. */
  cursor: default;
  user-select: none;
}

.pk-pane-icon { display: inline-flex; flex: none; width: var(--pk-pane-icon); height: var(--pk-pane-icon); color: var(--pk-text-secondary, #666); }
.pk-pane-icon svg,
.pk-pane-close-glyph svg,
.pk-pane-error-glyph svg { width: 100%; height: 100%; }

.pk-pane-title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: var(--pk-pane-font-size);
  font-weight: var(--pk-pane-title-font-weight);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pk-pane-actions { display: flex; align-items: center; gap: var(--pk-space-xs, 4px); flex: none; }

.pk-pane-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--pk-pane-close);
  height: var(--pk-pane-close);
  padding: 0;
  border: 0;
  border-radius: var(--pk-radius-xs, 4px);
  background: transparent;
  color: var(--pk-text-secondary, #666);
  cursor: pointer;
}
.pk-pane-close:hover { background: var(--pk-ramp-primary-10, #E0F2F9); color: var(--pk-text-primary, #191919); }
.pk-pane-close:focus-visible,
.pk-pane-retry:focus-visible,
.pk-pane-resize:focus-visible { outline-offset: 1px; }
.pk-pane-close-glyph { display: inline-flex; width: var(--pk-pane-close-glyph); height: var(--pk-pane-close-glyph); }

.pk-pane-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: var(--pk-space-sm, 8px);
  font-size: var(--pk-pane-font-size);
}

/* STCT-9098: a state the pane is NOT in stays hidden. The rules below give the loading/error panels
   display:flex, which beats the UA's [hidden] rule, so every pane showed "Loading…" over its body. */
.pk-pane-body[hidden],
.pk-pane-loading[hidden],
.pk-pane-error[hidden] { display: none; }

/* Loading and error take the body's place and are centred; both carry WORDS. */
.pk-pane-loading,
.pk-pane-error {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--pk-space-sm, 8px);
  padding: var(--pk-space-md, 16px);
  font-size: var(--pk-pane-font-size);
  color: var(--pk-text-secondary, #666);
  text-align: center;
}
.pk-pane-error-glyph { display: inline-flex; width: var(--pk-pane-error-glyph); height: var(--pk-pane-error-glyph); color: var(--pk-ramp-red-60, #df3d42); }
.pk-pane-error-text { color: var(--pk-text-primary, #191919); }

.pk-pane-retry {
  font: inherit;
  padding: var(--pk-space-xs, 4px) var(--pk-space-md, 16px);
  border: var(--pk-bw-primary, 1px) solid var(--pk-text-secondary, #666);
  border-radius: var(--pk-button-radius, var(--pk-radius-s, 6px));
  background: var(--pk-sem-bg-surface-secondary, #F2F2F2);
  color: var(--pk-text-primary, #191919);
  cursor: pointer;
}
.pk-pane-retry:hover { background: var(--pk-ramp-primary-10, #E0F2F9); }

/* The resize handle: a corner grip drawn with two diagonal hairlines, so it needs no icon and
 * reads as "grab here" on every brand. It is a real button, so it takes focus and Arrow keys. */
.pk-pane-resize {
  position: absolute;
  right: 0;
  bottom: 0;
  width: var(--pk-pane-resize);
  height: var(--pk-pane-resize);
  padding: 0;
  border: 0;
  background:
    linear-gradient(135deg, transparent 0 55%, var(--pk-text-secondary, #666) 55% 62%, transparent 62% 72%,
      var(--pk-text-secondary, #666) 72% 79%, transparent 79%);
  cursor: nwse-resize;
  touch-action: none;
}
.pk-pane-resizing { user-select: none; }

/* ==== src/brands/theme-skyten.css ==== */
/* GENERATED by core/export_foundation.py (tools-brands @ 4d4578a745) from data/brands/skyten.yaml over data/brands/_default.yaml — DO NOT EDIT.
   Contract foundation-1.3: exports/foundation/contract.schema.json. Default mode: light.
   Regenerate: python3 core/export_foundation.py --brand skyten */

:root, :root[data-pk-theme="light"], [data-pk-theme="light"] {
  --pk-ramp-primary-05: #F7F7F8;
  --pk-ramp-primary-10: #E7E7EB;
  --pk-ramp-primary-20: #CFD0D8;
  --pk-ramp-primary-30: #ABADBA;
  --pk-ramp-primary-40: #848599;
  --pk-ramp-primary-50: #60627C;
  --pk-ramp-primary-60: #383B5B;
  --pk-ramp-primary-70: #313450;
  --pk-ramp-primary-80: #2B2D45;
  --pk-ramp-primary-90: #24263B;
  --pk-ramp-primary-100: #1F2032;
  --pk-ramp-secondary-05: #F5FBFD;
  --pk-ramp-secondary-10: #E0F2F9;
  --pk-ramp-secondary-20: #C2E4F2;
  --pk-ramp-secondary-30: #94D0E8;
  --pk-ramp-secondary-40: #61BADE;
  --pk-ramp-secondary-50: #33A6D4;
  --pk-ramp-secondary-60: #0090C9;
  --pk-ramp-secondary-70: #007FB1;
  --pk-ramp-secondary-80: #006D99;
  --pk-ramp-secondary-90: #005E83;
  --pk-ramp-secondary-100: #004F6F;
  --pk-ramp-tertiary-05: #FBFEF5;
  --pk-ramp-tertiary-10: #F3FCE0;
  --pk-ramp-tertiary-20: #E7F9C2;
  --pk-ramp-tertiary-30: #D5F494;
  --pk-ramp-tertiary-40: #C0F061;
  --pk-ramp-tertiary-50: #AEEB33;
  --pk-ramp-tertiary-60: #9AE600;
  --pk-ramp-tertiary-70: #88CA00;
  --pk-ramp-tertiary-80: #75AF00;
  --pk-ramp-tertiary-90: #649600;
  --pk-ramp-tertiary-100: #557F00;
  --pk-ramp-arctic-05: #F8FCFE;
  --pk-ramp-arctic-10: #E9F7FC;
  --pk-ramp-arctic-20: #D3EEF9;
  --pk-ramp-arctic-30: #B3E2F4;
  --pk-ramp-arctic-40: #8ED4EE;
  --pk-ramp-arctic-50: #6DC8E9;
  --pk-ramp-arctic-60: #49BAE4;
  --pk-ramp-arctic-70: #40A4C9;
  --pk-ramp-arctic-80: #378DAD;
  --pk-ramp-arctic-90: #2F7994;
  --pk-ramp-arctic-100: #28667D;
  --pk-ramp-graphite-05: #F7F7F7;
  --pk-ramp-graphite-10: #E6E6E6;
  --pk-ramp-graphite-20: #CDCCCE;
  --pk-ramp-graphite-30: #A7A6A8;
  --pk-ramp-graphite-40: #7D7C7F;
  --pk-ramp-graphite-50: #57565A;
  --pk-ramp-graphite-60: #2D2C31;
  --pk-ramp-graphite-70: #28272B;
  --pk-ramp-graphite-80: #222125;
  --pk-ramp-graphite-90: #1D1D20;
  --pk-ramp-graphite-100: #19181B;
  --pk-ramp-red-05: #FEF7F7;
  --pk-ramp-red-10: #FBE8E8;
  --pk-ramp-red-20: #F7D0D2;
  --pk-ramp-red-30: #F2AEB0;
  --pk-ramp-red-40: #EB878A;
  --pk-ramp-red-50: #E56468;
  --pk-ramp-red-60: #DF3D42;
  --pk-ramp-red-70: #C4363A;
  --pk-ramp-red-80: #A92E32;
  --pk-ramp-red-90: #91282B;
  --pk-ramp-red-100: #7B2224;
  --pk-ramp-orange-05: #FFFCF5;
  --pk-ramp-orange-10: #FEF7E0;
  --pk-ramp-orange-20: #FDF0C2;
  --pk-ramp-orange-30: #FBE594;
  --pk-ramp-orange-40: #F9D861;
  --pk-ramp-orange-50: #F8CD33;
  --pk-ramp-orange-60: #F6C000;
  --pk-ramp-orange-70: #D8A900;
  --pk-ramp-orange-80: #BB9200;
  --pk-ramp-orange-90: #A07D00;
  --pk-ramp-orange-100: #876A00;
  --pk-ramp-white-00: #FFFFFF;
  --pk-ramp-white-05: #F2F2F2;
  --pk-ramp-white-10: #E6E6E6;
  --pk-ramp-white-20: #CCCCCC;
  --pk-ramp-white-30: #B2B2B2;
  --pk-ramp-white-40: #999999;
  --pk-ramp-white-50: #808080;
  --pk-ramp-white-60: #666666;
  --pk-ramp-white-70: #4D4D4D;
  --pk-ramp-white-80: #333333;
  --pk-ramp-white-90: #191919;
  --pk-ramp-white-100: #000000;
  --pk-swatch-marin: var(--pk-ramp-primary-60);
  --pk-swatch-azure: var(--pk-ramp-secondary-60);
  --pk-swatch-arctic: var(--pk-ramp-arctic-60);
  --pk-swatch-grasshopper: var(--pk-ramp-tertiary-60);
  --pk-swatch-red: var(--pk-ramp-red-60);
  --pk-swatch-orange: var(--pk-ramp-orange-60);
  --pk-swatch-graphite: #2D2C31;
  --pk-swatch-white: var(--pk-ramp-white-00);
  --pk-sem-bg-page: #E7E7EB;
  --pk-sem-bg-website-frame: #191919;
  --pk-sem-bg-surface-primary: #FFFFFF;
  --pk-sem-bg-surface-secondary: #FFFFFF;
  --pk-page-bg: #E7E7EB;
  --pk-page-bg-image: none;
  --pk-page-bg-size: auto;
  --pk-sem-bg-sunken: #F7F7F8;
  --pk-sem-border-primary: #E6E6E6;
  --pk-sem-border-subtle: #F2F2F2;
  --pk-sem-header-bg: #E7E7EB;
  --pk-sem-header-fg: #191919;
  --pk-sem-header-fg-secondary: #666666;
  --pk-sem-footer-surface: #191919;
  --pk-sem-footer-text: #E6E6E6;
  --pk-sem-footer-text-secondary: #B2B2B2;
  --pk-sem-footer-border-muted: #808080;
  --pk-sem-frame-border: #191919;
  --pk-sem-nav-scrim: rgba(25,25,25,0.8);
  --pk-sem-ink-deep: #191919;
  --pk-sem-skyten-black: #191919;
  --pk-text-primary: #191919;
  --pk-text-secondary: #666666;
  --pk-text-subtle: #666666;
  --pk-brand-swatch: #49BAE4;
  --pk-doc-paper: #FFFFFF;
  --pk-doc-ink: #191919;
  --pk-doc-edge: #E6E6E6;
  --pk-text-disabled: #B2B2B2;
  --pk-text-on-anchor: #FFFFFF;
  --pk-text-link: #383B5B;
  --pk-sem-bg-surface-raised: #FFFFFF;
  --pk-text-danger: #C4363A;
  --pk-text-success: #557F00;
  --pk-text-warning: #876A00;
  --pk-accent-ink: #0090C9;
  --pk-accent-text: #006D99;
  --pk-text-heading: #383B5B;
  --pk-tint-bg: #CFD0D8;
  --pk-tint-fg: #191919;
  --pk-price-up: #557F00;
  --pk-price-down: #C4363A;
  --pk-price-neutral: #666666;
  --pk-price-up-fg: #E7E7EB;
  --pk-price-down-fg: #E7E7EB;
  --pk-primary: #383B5B;
  --pk-primary-hover: #2B2D45;
  --pk-primary-active: #24263B;
  --pk-primary-bg: #CFD0D8;
  --pk-primary-border: #ABADBA;
  --pk-on-primary: #FFFFFF;
  --pk-on-primary-hover: #FFFFFF;
  --pk-on-primary-active: #FFFFFF;
  --pk-secondary: #0090C9;
  --pk-secondary-hover: #006D99;
  --pk-secondary-active: #004F6F;
  --pk-secondary-bg: #E0F2F9;
  --pk-secondary-border: #94D0E8;
  --pk-on-secondary: #000000;
  --pk-on-secondary-hover: #FFFFFF;
  --pk-on-secondary-active: #FFFFFF;
  --pk-info: #0090C9;
  --pk-info-hover: #007FB1;
  --pk-info-active: #005E83;
  --pk-info-bg: #E0F2F9;
  --pk-info-border: #94D0E8;
  --pk-on-info: #000000;
  --pk-on-info-hover: #FFFFFF;
  --pk-on-info-active: #FFFFFF;
  --pk-success: #75AF00;
  --pk-success-hover: #649600;
  --pk-success-active: #557F00;
  --pk-success-bg: #F8FCFE;
  --pk-success-border: #B3E2F4;
  --pk-on-success: #000000;
  --pk-on-success-hover: #000000;
  --pk-on-success-active: #FFFFFF;
  --pk-warning: #D8A900;
  --pk-warning-hover: #BB9200;
  --pk-warning-active: #876A00;
  --pk-warning-bg: #FFFCF5;
  --pk-warning-border: #FBE594;
  --pk-on-warning: #000000;
  --pk-on-warning-hover: #000000;
  --pk-on-warning-active: #FFFFFF;
  --pk-danger: #DF3D42;
  --pk-danger-hover: #C4363A;
  --pk-danger-active: #91282B;
  --pk-danger-bg: #FBE8E8;
  --pk-danger-border: #F2AEB0;
  --pk-on-danger: #000000;
  --pk-on-danger-hover: #FFFFFF;
  --pk-on-danger-active: #FFFFFF;
  --pk-highlight: #9AE600;
  --pk-highlight-bg: #E7F9C2;
  --pk-on-highlight: #000000;
  --pk-ribbon-bg: #9AE600;
  --pk-ribbon-bg-image: none;
  --pk-ribbon-fg: #000000;
  --pk-ribbon-weight: 600;
  --pk-ribbon-size: 11px;
  --pk-ribbon-size-min: 9px;
  --pk-font-sans: 'Noto Sans', -apple-system, sans-serif;
  --pk-font-mono: "Courier New", Courier, monospace;
  --pk-font-display: 'Noto Sans', -apple-system, sans-serif;
  --pk-font-numeric: 'Noto Sans', -apple-system, sans-serif;
  --pk-fs-h1: 46px;
  --pk-fs-h2: 29px;
  --pk-fs-h3: 23px;
  --pk-fs-h4: 19px;
  --pk-fs-base: 15px;
  --pk-fs-small: 14px;
  --pk-fs-caption: 12px;
  --pk-lh: 1.55;
  --pk-lh-heading: 1.25;
  --pk-ls: 0.09em;
  --pk-fw-body: 400;
  --pk-fw-heading: 700;
  --pk-radius-xs: 2px;
  --pk-radius-s: 4px;
  --pk-radius-m: 8px;
  --pk-radius-l: 12px;
  --pk-radius-xl: 20px;
  --pk-radius-pill: 999px;
  --pk-radius-button: 999px;
  --pk-radius-card: 8px;
  --pk-radius-input: 8.0px;
  --pk-radius-nav-item: 999px;
  --pk-radius-badge: 999px;
  --pk-shadow-card: none;
  --pk-shadow-overlay: 0 8px 24px #1919192E;
  --pk-shadow-modal: 0px 3px 9px 0px rgba(0, 0, 0, 0.192);
  --pk-shadow-raised: 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --pk-ring: 2px;
  --pk-ring-offset: 2px;
  --pk-ring-color: #383B5B;
  --pk-stroke: 1px;
  --pk-stroke-strong: 2px;
  --pk-icon-stroke: 1.5;
  --pk-space-xs: 5px;
  --pk-space-sm: 10px;
  --pk-space-md: 15px;
  --pk-space-lg: 20px;
  --pk-space-xl: 30px;
  --pk-space-2xl: 45px;
  --pk-space-3xl: 60px;
  --pk-gap: 7px;
  --pk-gap-grid: 15px;
  --pk-pad-x: 10px;
  --pk-pad-y: 8px;
  --pk-pad-x-sm: 10px;
  --pk-pad-y-sm: 5px;
  --pk-pad-container: 15px;
  --pk-container-max-width: 1150px;
  --pk-cover-height: 320px;
  --pk-cover-fg: #E6E6E6;
  --pk-cover-scrim: rgba(0,0,0,0.35);
  --pk-block-accent: #FFFFFF;
  --pk-block-accent-w: 1px;
  --pk-container-gutter: 90px;
  --pk-bw-hairline: 0.5px;
  --pk-bw-primary: 1px;
  --pk-bw-active: 2px;
  --pk-appbar-bg: #E7E7EB;
  --pk-appbar-border: none;
  --pk-appbar-backdrop: none;
  --pk-appbar-fg: #666666;
  --pk-appbar-price-up: #557F00;
  --pk-appbar-price-down: #C4363A;
  --pk-appbar-height: 72px;
  --pk-appbar-gap: 18px;
  --pk-appbar-logo-height: 28px;
  --pk-nav-item-w: 44px;
  --pk-nav-item-h: 36px;
  --pk-nav-item-gap: 12px;
  --pk-nav-item-radius: 999px;
  --pk-nav-item-fs: 14px;
  --pk-nav-icon-size: 22px;
  --pk-nav-fg: #808080;
  --pk-nav-active-bg: #383B5B;
  --pk-nav-active-fg: #61BADE;
  --pk-nav-active-weight: 600;
  --pk-nav-underline: transparent;
  --pk-nav-underline-w: 2px;
  --pk-nav-hover-bg: #383B5B;
  --pk-nav-hover-fg: #61BADE;
  --pk-nav-hover-underline: transparent;
  --pk-nav-hover-glow: none;
  --pk-nav-active-bg-image: none;
  --pk-nav-active-glow: none;
  --pk-nav-submenu-indicator: none;
  --pk-nav-fill-bg: #383B5B;
  --pk-nav-fill-fg: #61BADE;
  --pk-tooltip-bg: #666666;
  --pk-tooltip-fg: #FFFFFF;
  --pk-menu-bg: #FFFFFF;
  --pk-menu-radius: 16px;
  --pk-menu-shadow: 0 8px 24px #1919192E;
  --pk-menu-border: transparent;
  --pk-menu-border-w: 0px;
  --pk-menu-item-fg: #2D2C31;
  --pk-menu-item-pad: 11px 22px;
  --pk-menu-item-fs: 15px;
  --pk-menu-item-radius: 0px;
  --pk-menu-item-min-h: 0px;
  --pk-menu-hover-bg: #F7F7F8;
  --pk-menu-hover-rule: #40A4C9;
  --pk-menu-hover-rule-w: 1px;
  --pk-menu-active-bg: #F7F7F8;
  --pk-menu-active-fg: #383B5B;
  --pk-rail-width: 230px;
  --pk-menu-danger-fg: #DF3D42;
  --pk-menu-success-fg: #649600;
  --pk-menu-warning-fg: #BB9200;
  --pk-menu-info-fg: #0090C9;
  --pk-tabs-bg: #E7E7EB;
  --pk-tabs-fg: #2D2C31;
  --pk-tabs-active-fg: #383B5B;
  --pk-tabs-active-bg: transparent;
  --pk-tabs-hover-fg: #383B5B;
  --pk-tabs-rule: #61BADE;
  --pk-tabs-rule-w: 2px;
  --pk-tabs-rule-offset: 6px;
  --pk-tabs-active-gradient: none;
  --pk-tabs-rule-gradient: none;
  --pk-tabs-gap: 24px;
  --pk-tabs-pad: 8px 2px;
  --pk-tabs-fs: 15px;
  --pk-tabs-weight: 400;
  --pk-tabs-active-weight: 700;
  --pk-tabs-radius: 0;
  --pk-tabs-row-rule: transparent;
  --pk-tabs-row-rule-w: 0px;
  --pk-badge-success-bg: #F8FCFE;
  --pk-badge-success-fg: #557F00;
  --pk-badge-warning-bg: #FFFCF5;
  --pk-badge-warning-fg: #876A00;
  --pk-badge-danger-bg: #F2AEB0;
  --pk-badge-danger-fg: #91282B;
  --pk-badge-info-bg: #E0F2F9;
  --pk-badge-info-fg: #007FB1;
  --pk-badge-neutral-bg: #F7F7F8;
  --pk-badge-neutral-fg: #666666;
  --pk-badge-brand-bg: #CFD0D8;
  --pk-badge-brand-fg: #383B5B;
  --pk-badge-brand-border: none;
  --pk-badge-radius: 999px;
  --pk-badge-fs: 12px;
  --pk-badge-pad: 2px 10px;
  --pk-badge-weight: 400;
  --pk-method-get-bg: #0090C9;
  --pk-method-get-fg: #000000;
  --pk-method-post-bg: #75AF00;
  --pk-method-post-fg: #000000;
  --pk-method-put-bg: #D8A900;
  --pk-method-put-fg: #000000;
  --pk-method-patch-bg: #D8A900;
  --pk-method-patch-fg: #000000;
  --pk-method-delete-bg: #DF3D42;
  --pk-method-delete-fg: #000000;
  --pk-method-head-bg: #F7F7F8;
  --pk-method-head-fg: #666666;
  --pk-method-options-bg: #F7F7F8;
  --pk-method-options-fg: #666666;
  --pk-method-fs: 12px;
  --pk-method-weight: 700;
  --pk-method-radius: 999px;
  --pk-method-pad: 2px 8px;
  --pk-method-transform: uppercase;
  --pk-button-bg: #E6E6E6;
  --pk-button-fg: #2D2C31;
  --pk-button-hover: #B2B2B2;
  --pk-button-active: #808080;
  --pk-button-hover-fg: #000000;
  --pk-button-active-fg: #000000;
  --pk-button-disabled: #F2F2F2;
  --pk-button-secondary-bg: #FFFFFF;
  --pk-button-secondary-fg: #191919;
  --pk-button-secondary-border: #E6E6E6;
  --pk-button-secondary-hover-bg: #F7F7F8;
  --pk-button-secondary-hover-fg: #191919;
  --pk-button-secondary-active-bg: #F7F7F8;
  --pk-button-secondary-active-fg: #191919;
  --pk-button-radius: 999px;
  --pk-button-height: 44px;
  --pk-button-pad: 0 24px;
  --pk-button-secondary-pad: 0 24px;
  --pk-button-standard-pad: 0 24px;
  --pk-button-selected-pad: 0 24px;
  --pk-button-border-w: 1px;
  --pk-button-fs: 16px;
  --pk-button-weight: 600;
  --pk-button-transform: none;
  --pk-button-ls: 0px;
  --pk-button-shadow: none;
  --pk-button-disabled-fg: #B2B2B2;
  --pk-button-selected-bg: #383B5B;
  --pk-button-selected-fg: #61BADE;
  --pk-button-selected-hover-bg: #383B5B;
  --pk-button-selected-hover-fg: #61BADE;
  --pk-button-selected-glow: none;
  --pk-button-error-bg: #F2AEB0;
  --pk-button-error-fg: #91282B;
  --pk-button-error-border: #C4363A;
  --pk-button-error-hover-bg: #F2AEB0;
  --pk-button-error-hover-fg: #91282B;
  --pk-button-error-pressed-bg: #C4363A;
  --pk-button-error-pressed-fg: #FFFFFF;
  --pk-button-secondary-pressed-bg: #E7E7EB;
  --pk-button-secondary-pressed-fg: #1F2032;
  --pk-button-secondary-pressed-border: #CCCCCC;
  --pk-button-focus-ring: #49BAE4;
  --pk-button-selected-bg-image: none;
  --pk-button-selected-hover-bg-image: none;
  --pk-button-selected-disabled-bg-image: none;
  --pk-button-selected-border: #383B5B;
  --pk-button-selected-shadow: none;
  --pk-button-standard-bg-image: none;
  --pk-button-standard-bg: #E6E6E6;
  --pk-button-standard-fg: #2D2C31;
  --pk-button-standard-border: #CCCCCC;
  --pk-button-standard-hover-bg: #B2B2B2;
  --pk-button-standard-hover-fg: #000000;
  --pk-button-standard-pressed-bg: #808080;
  --pk-button-standard-pressed-fg: #000000;
  --pk-button-standard-disabled-bg: #F2F2F2;
  --pk-button-standard-disabled-fg: #B2B2B2;
  --pk-button-small-height: 32px;
  --pk-button-small-fs: 13px;
  --pk-button-small-pad: 0 16px;
  --pk-table-toolbar-bg: #383B5B;
  --pk-table-toolbar-fg: #61BADE;
  --pk-table-toolbar-hover-bg: #313450;
  --pk-table-toolbar-hover-fg: #61BADE;
  --pk-table-toolbar-border: #383B5B;
  --pk-table-toolbar-radius: 8.0px;
  --pk-chip-bg: #F7F7F8;
  --pk-chip-fg: #191919;
  --pk-chip-border: transparent;
  --pk-chip-emphasis-bg: #383B5B;
  --pk-chip-emphasis-fg: #FFFFFF;
  --pk-chip-radius: 999px;
  --pk-chip-height: 22px;
  --pk-chip-pad: 1px 8px;
  --pk-chip-fs: 12px;
  --pk-chip-weight: 500;
  --pk-radio-size: 16px;
  --pk-radio-ring: #383B5B;
  --pk-radio-ring-w: 2px;
  --pk-radio-fill: #FFFFFF;
  --pk-radio-idle-fill: #FFFFFF;
  --pk-radio-idle-ring: #808080;
  --pk-radio-idle-ring-w: 1px;
  --pk-card-bg: #FFFFFF;
  --pk-card-hover-bg: #FFFFFF;
  --pk-card-border: #E6E6E6;
  --pk-card-border-w: 1px;
  --pk-card-radius: 8px;
  --pk-card-shadow: none;
  --pk-card-pad: 15px;
  --pk-card-feature-bg-image: none;
  --pk-card-feature-fg: #191919;
  --pk-card-feature-radius: 8px;
  --pk-card-feature-bg: #FFFFFF;
  --pk-card-feature-fg-secondary: #4D4D4D;
  --pk-panel-bg: #FFFFFF;
  --pk-pane-bg: #FFFFFF;
  --pk-panel-radius: 8.0px;
  --pk-form-panel-bg: #FFFFFF;
  --pk-form-panel-border: #E6E6E6;
  --pk-form-panel-border-w: 1px;
  --pk-form-panel-radius: 12px;
  --pk-form-panel-pad: 20px;
  --pk-icon-accent: #383B5B;
  --pk-icon-tile-bg: #F7F7F8;
  --pk-heading-gradient: none;
  --pk-input-bg: #FFFFFF;
  --pk-input-fg: #191919;
  --pk-input-border: #999999;
  --pk-input-border-w: 1px;
  --pk-input-border-hover: #666666;
  --pk-input-border-focus: #49BAE4;
  --pk-input-ring: #D3EEF9;
  --pk-input-ring-w: 3px;
  --pk-input-border-valid: #649600;
  --pk-input-border-invalid: #DF3D42;
  --pk-input-border-disabled: #F2F2F2;
  --pk-input-bg-disabled: #FFFFFF;
  --pk-input-fg-disabled: #666666;
  --pk-input-placeholder: #666666;
  --pk-input-hint-fg: #666666;
  --pk-input-hint-valid-fg: #191919;
  --pk-input-hint-invalid-fg: #C4363A;
  --pk-input-radius: 8.0px;
  --pk-input-height: 44px;
  --pk-input-height-sm: 32px;
  --pk-input-pad: 8px 16px;
  --pk-input-pad-sm: 5px 12px;
  --pk-input-fs: 16px;
  --pk-input-fs-sm: 14px;
  --pk-checkbox-size: 20px;
  --pk-checkbox-radius: 4.0px;
  --pk-checkbox-bg: #FFFFFF;
  --pk-checkbox-border: #808080;
  --pk-checkbox-border-w: 1px;
  --pk-checkbox-hover-bg: #E7E7EB;
  --pk-checkbox-hover-border: #49BAE4;
  --pk-toggle-knob-ring: #4D4D4D;
  --pk-toggle-knob-ring-on: #848599;
  --pk-checkbox-checked-bg: #49BAE4;
  --pk-checkbox-checked-border: #49BAE4;
  --pk-checkbox-checked-border-w: 1px;
  --pk-checkbox-checked-fg: #FFFFFF;
  --pk-checkbox-invalid-bg: #E7E7EB;
  --pk-checkbox-invalid-border: #C4363A;
  --pk-checkbox-invalid-border-w: 1px;
  --pk-checkbox-glyph: 18px;
  --pk-slider-fill: #383B5B;
  --pk-slider-fill-image: linear-gradient(90deg, #49BAE4, #383B5B);
  --pk-alert-info-bg: #E0F2F9;
  --pk-alert-info-border: #94D0E8;
  --pk-alert-info-icon: #0090C9;
  --pk-alert-info-fg: #191919;
  --pk-alert-success-bg: #F8FCFE;
  --pk-alert-success-border: #B3E2F4;
  --pk-alert-success-icon: #75AF00;
  --pk-alert-success-fg: #191919;
  --pk-alert-warning-bg: #FFFCF5;
  --pk-alert-warning-border: #FBE594;
  --pk-alert-warning-icon: #D8A900;
  --pk-alert-warning-fg: #191919;
  --pk-alert-danger-bg: #FBE8E8;
  --pk-alert-danger-border: #F2AEB0;
  --pk-alert-danger-icon: #DF3D42;
  --pk-alert-danger-fg: #191919;
  --pk-alert-neutral-bg: #F7F7F8;
  --pk-alert-neutral-border: #E6E6E6;
  --pk-alert-neutral-icon: #666666;
  --pk-alert-neutral-fg: #191919;
  --pk-alert-radius: 8px;
  --pk-alert-border-w: 1px;
  --pk-alert-pad: 8px 16px;
  --pk-alert-fs: 14px;
  --pk-alert-icon-size: 20px;
  --pk-table-header-bg: transparent;
  --pk-table-header-fg: #383B5B;
  --pk-table-header-weight: 700;
  --pk-table-header-transform: uppercase;
  --pk-table-header-ls: 1px;
  --pk-table-header-align: left;
  --pk-table-header-pad: 13px 16px;
  --pk-table-fs: 15px;
  --pk-table-header-fs: 12px;
  --pk-table-lh: 1.5;
  --pk-table-pad: 12px 16px;
  --pk-table-header-rule: #E6E6E6;
  --pk-table-header-rule-w: 1px;
  --pk-table-frame: 1px solid #E6E6E6;
  --pk-table-rule-top: 1px solid #E6E6E6;
  --pk-table-rule-bottom: 1px solid #E6E6E6;
  --pk-table-row-rule: 1px solid #E6E6E6;
  --pk-table-row-rule-color: #E6E6E6;
  --pk-table-row-alt: transparent;
  --pk-table-row-hover: #E9F7FC;
  --pk-report-row-alt: #F5FBFD;
  --pk-table-row-hover-hairline: transparent;
  --pk-table-vertical-rule: none;
  --pk-table-radius: 8px;
  --pk-table-numeric-align: right;
  --pk-table-pad-compact: 4px 8px;
  --pk-table-fs-compact: 14px;
  --pk-table-border: 1px solid #F2F2F2;
  --pk-table-col-divider: transparent;
  --pk-table-col-divider-h: 18px;
  --pk-table-sort-glyph: #666666;
  --pk-table-sort-glyph-active: #191919;
  --pk-table-select-border: #E6E6E6;
  --pk-table-select-size: 16px;
  --pk-filter-chip-bg: #F7F7F8;
  --pk-filter-chip-fg: #191919;
  --pk-filter-chip-border: #E6E6E6;
  --pk-filter-chip-border-w: 1px;
  --pk-filter-chip-radius: 4px;
  --pk-filter-chip-pad: 4px 10px;
  --pk-chart-1: #383B5B;
  --pk-chart-2: #007FB1;
  --pk-chart-3: #28667D;
  --pk-chart-4: #006D99;
  --pk-chart-5: #313450;
  --pk-chart-6: #557F00;
  --pk-chart-7: #191919;
  --pk-chart-8: #4D4D4D;
  --pk-logo-height: 28px;
  --pk-logo-max-width: 20%;
  --pk-logo-url: url("foundation-src/brands/assets/skyten/logo-coloured.svg");
  --pk-logo-mark-url: url("foundation-src/brands/assets/skyten/logo-square-coloured.svg");
  --pk-logo-footer-url: url("foundation-src/brands/assets/skyten/logo-white.png");
  --pk-avatar-0: #24263B;
  --pk-avatar-1: #1F2032;
  --pk-avatar-2: #006D99;
  --pk-avatar-3: #005E83;
  --pk-avatar-4: #004F6F;
  --pk-avatar-5: #AEEB33;
  --pk-avatar-6: #9AE600;
  --pk-avatar-7: #88CA00;
  --pk-avatar-8: #557F00;
  --pk-avatar-9: #876A00;
  --pk-avatar-0-fg: #FFFFFF;
  --pk-avatar-1-fg: #FFFFFF;
  --pk-avatar-2-fg: #FFFFFF;
  --pk-avatar-3-fg: #FFFFFF;
  --pk-avatar-4-fg: #FFFFFF;
  --pk-avatar-5-fg: #000000;
  --pk-avatar-6-fg: #000000;
  --pk-avatar-7-fg: #000000;
  --pk-avatar-8-fg: #FFFFFF;
  --pk-avatar-9-fg: #FFFFFF;
  --pk-webnav-bg: transparent;
  --pk-webnav-fg: #2D2C31;
  --pk-webnav-hover-fg: #383B5B;
  --pk-webnav-fs: 15px;
  --pk-webnav-weight: 400;
  --pk-webnav-gap: 28px;
  --pk-webnav-height: 58px;
  --pk-webnav-item-pad-x: 0px;
  --pk-webnav-active-fg: #2D2C31;
  --pk-webnav-active-weight: 400;
  --pk-webnav-underline: #61BADE;
  --pk-webnav-underline-w: 1px;
  --pk-webnav-underline-offset: 14px;
  --pk-webnav-cta-bg: #9AE600;
  --pk-webnav-cta-hover-bg: #AEEB33;
  --pk-webnav-cta-fg: #383B5B;
  --pk-webnav-cta-hover-fg: #383B5B;
  --pk-webnav-cta-radius: 999px;
  --pk-webnav-cta-weight: 500;
  --pk-webnav-cta-fs: 15px;
  --pk-webnav-cta-height: 37px;
  --pk-webnav-cta-pad-x: 20px;
  --pk-webnav-logo-height: 19px;
  --pk-webnav-container-max-width: 1280px;
  --pk-webnav-font: 'Noto Sans', -apple-system, sans-serif;
  --pk-webnav-pad-x: 0px;
  --pk-webnav-actions-gap: 18px;
  --pk-webnav-cta-border: 1px solid #649600;
  --pk-webnav-cta2-bg: #9AE600;
  --pk-webnav-cta2-hover-bg: #AEEB33;
  --pk-webnav-cta2-fg: #383B5B;
  --pk-webnav-cta2-hover-fg: #383B5B;
  --pk-webnav-cta2-border: 1px solid #649600;
  --pk-webnav-cta2-radius: 999px;
  --pk-webnav-cta2-weight: 500;
  --pk-webnav-cta2-height: 37px;
  --pk-webnav-cta2-pad-x: 20px;
  --pk-webnav-toggle-size: 36px;
  --pk-webnav-toggle-border: 1px solid #2D2C31;
  --pk-webnav-toggle-fg: #2D2C31;
  --pk-webnav-border: none;
  --pk-webnav-cta-bg-image: none;
  --pk-webnav-cta-hover-bg-image: none;
  --pk-webnav-backdrop: none;
  --pk-webnav-float: 0;
  --pk-webnav-float-bg: transparent;
  --pk-webnav-float-radius: 0;
  --pk-webnav-float-shadow: none;
  --pk-webnav-float-inset: 0px;
  --pk-webnav-float-max-width: none;
  --pk-webnav-float-border: none;
  --pk-webnav-seg-fg: #383B5B;
  --pk-webnav-seg-bg: transparent;
  --pk-webnav-seg-active-bg: #383B5B;
  --pk-webnav-seg-active-fg: #FFFFFF;
  --pk-webnav-seg-border: 1px solid #383B5B;
  --pk-webnav-seg-radius: 999px;
  --pk-webnav-seg-height: 36px;
  --pk-webnav-seg-fs: 14px;
  --pk-webnav-seg-weight: 600;
  --pk-webnav-seg-gap: 10px;
  --pk-webnav-decoration-image: none;
  --pk-webnav-decoration-height: 0px;
  --pk-webnav-height-wide: 72px;
  --pk-webnav-cta-pressed-bg: #88CA00;
  --pk-webnav-cta2-pressed-bg: #88CA00;
  --pk-webnav-hero-bg: #9AE600;
  --pk-webnav-hero-fg: #383B5B;
  --pk-webnav-hero-hover-bg: #AEEB33;
  --pk-webnav-hero-pressed-bg: #88CA00;
  --pk-webnav-hero-edge: inset 0 0 0 1px #649600;
  --pk-webnav-hero-disabled-bg: #E7E7EB;
  --pk-webnav-hero-disabled-fg: #808080;
  --pk-webnav-hero-disabled-border: #CCCCCC;
  --pk-appbar-font: 'Noto Sans', -apple-system, sans-serif;
  --pk-appbar-cta-bg: #9AE600;
  --pk-appbar-cta-fg: #383B5B;
  --pk-appbar-cta-border: none;
  --pk-appbar-cta-radius: 999px;
  --pk-appbar-cta-weight: 600;
  --pk-appbar-cta-fs: 15px;
  --pk-appbar-cta-height: auto;
  --pk-appbar-cta-pad-x: 10px;
  --pk-appbar-cta2-bg: #9AE600;
  --pk-appbar-cta2-fg: #383B5B;
  --pk-appbar-cta2-border: none;
  --pk-appbar-toggle-size: 36px;
  --pk-appbar-toggle-border: 1px solid #666666;
  --pk-appbar-toggle-fg: #666666;
  --pk-appbar-cta-hover-bg: #AEEB33;
  --pk-appbar-cta-pressed-bg: #88CA00;
  --pk-appbar-cta-edge: inset 0 0 0 1px #649600;
  --pk-appbar-cta-disabled-bg: #E7E7EB;
  --pk-appbar-cta-disabled-fg: #808080;
  --pk-appbar-cta-disabled-border: #CCCCCC;
  --pk-nav-auto-hide: 0;
  --pk-stepper-lg-size: 80px;
  --pk-stepper-lg-line-w: 7px;
  --pk-stepper-lg-halo-w: 10px;
  --pk-stepper-lg-outline-w: 2px;
  --pk-stepper-lg-num-fs: 26px;
  --pk-stepper-lg-icon-size: 32px;
  --pk-stepper-lg-label-gap: 10px;
  --pk-stepper-lg-label-fs: 22px;
  --pk-stepper-lg-label-lh: 1.3;
  --pk-stepper-lg-label-weight: 700;
  --pk-stepper-lg-detail-fs: 22px;
  --pk-stepper-lg-detail-weight: 400;
  --pk-stepper-lg-bar-h: 14px;
  --pk-stepper-lg-done-bg: #9AE600;
  --pk-stepper-lg-done-fg: #191919;
  --pk-stepper-lg-current-bg: #49BAE4;
  --pk-stepper-lg-current-fg: #FFFFFF;
  --pk-stepper-lg-halo: rgba(73,186,228,0.25);
  --pk-stepper-lg-todo-bg: #FFFFFF;
  --pk-stepper-lg-todo-border: #E6E6E6;
  --pk-stepper-lg-todo-fg: #666666;
  --pk-stepper-lg-line-done: #49BAE4;
  --pk-stepper-lg-line-todo: #E6E6E6;
  --pk-stepper-lg-label-fg: #191919;
  --pk-stepper-lg-label-todo-fg: #666666;
  --pk-stepper-lg-detail-fg: #666666;
  --pk-status-bg: transparent;
  --pk-status-fg: #666666;
  --pk-status-pad: 0;
  --pk-status-radius: 0;
  --pk-status-fs: 12px;
  --pk-status-weight: 400;
  --pk-status-gap: 10px;
  --pk-status-dot: #75AF00;
  --pk-status-dot-size: 12px;
  --pk-heatmap-1: #F2F2F2;
  --pk-heatmap-2: #E6E6E6;
  --pk-heatmap-3: #C2E4F2;
  --pk-heatmap-4: #CFD0D8;
  --pk-heatmap-5: #CCCCCC;
  --pk-heatmap-6: #B2B2B2;
  --pk-heatmap-7: #ABADBA;
  --pk-heatmap-8: #61BADE;
  --pk-heatmap-9: #999999;
  --pk-heatmap-10: #848599;
  --pk-heatmap-11: #378DAD;
  --pk-heatmap-12: #808080;
  --pk-heatmap-13: #2F7994;
  --pk-heatmap-14: #666666;
  --pk-heatmap-15: #60627C;
  --pk-heatmap-16: #28667D;
  --pk-heatmap-17: #4D4D4D;
  --pk-heatmap-18: #383B5B;
  --pk-heatmap-19: #313450;
  --pk-heatmap-20: #2B2D45;
  --pk-heatmap-21: #2D2C31;
  --pk-heatmap-22: #24263B;
  --pk-heatmap-23: #1F2032;
  --pk-heatmap-24: #191919;
  --pk-topo-1: #004F6F;
  --pk-topo-2: #005E83;
  --pk-topo-3: #006D99;
  --pk-topo-4: #007FB1;
  --pk-topo-5: #378DAD;
  --pk-topo-6: #0090C9;
  --pk-topo-7: #2F7994;
  --pk-topo-8: #49BAE4;
  --pk-topo-9: #33A6D4;
  --pk-topo-10: #40A4C9;
  --pk-topo-11: #61BADE;
  --pk-topo-12: #649600;
  --pk-topo-13: #88CA00;
  --pk-topo-14: #75AF00;
  --pk-topo-15: #BB9200;
  --pk-topo-16: #D8A900;
  --pk-topo-17: #F6C000;
  --pk-topo-18: #F2AEB0;
  --pk-topo-19: #A07D00;
  --pk-topo-20: #EB878A;
  --pk-topo-21: #999999;
  --pk-topo-22: #C4363A;
  --pk-topo-23: #E56468;
  --pk-topo-24: #DF3D42;
  --pk-diverging-1: #DF3D42;
  --pk-diverging-2: #C4363A;
  --pk-diverging-3: #E56468;
  --pk-diverging-4: #999999;
  --pk-diverging-5: #EB878A;
  --pk-diverging-6: #ABADBA;
  --pk-diverging-7: #B2B2B2;
  --pk-diverging-8: #F2AEB0;
  --pk-diverging-9: #CCCCCC;
  --pk-diverging-10: #F7D0D2;
  --pk-diverging-11: #E6E6E6;
  --pk-diverging-12: #C2E4F2;
  --pk-diverging-13: #CFD0D8;
  --pk-diverging-14: #B3E2F4;
  --pk-diverging-15: #94D0E8;
  --pk-diverging-16: #8ED4EE;
  --pk-diverging-17: #6DC8E9;
  --pk-diverging-18: #9AE600;
  --pk-diverging-19: #AEEB33;
  --pk-diverging-20: #88CA00;
  --pk-diverging-21: #75AF00;
  --pk-basic-1: #005E83;
  --pk-basic-2: #006D99;
  --pk-basic-3: #0090C9;
  --pk-basic-4: #49BAE4;
  --pk-basic-5: #B3E2F4;
  --pk-basic-6: #AEEB33;
  --pk-basic-7: #9AE600;
  --pk-basic-8: #649600;
  --pk-basic-9: #75AF00;
  --pk-basic-10: #88CA00;
  --pk-basic-11: #C0F061;
  --pk-basic-12: #F8CD33;
  --pk-basic-13: #BB9200;
  --pk-basic-14: #D8A900;
  --pk-basic-15: #A07D00;
  --pk-basic-16: #E56468;
  --pk-basic-17: #DF3D42;
}

:root[data-pk-theme="dark"], [data-pk-theme="dark"] {
  --pk-ramp-primary-05: #F7F7F8;
  --pk-ramp-primary-10: #E7E7EB;
  --pk-ramp-primary-20: #CFD0D8;
  --pk-ramp-primary-30: #ABADBA;
  --pk-ramp-primary-40: #848599;
  --pk-ramp-primary-50: #60627C;
  --pk-ramp-primary-60: #383B5B;
  --pk-ramp-primary-70: #313450;
  --pk-ramp-primary-80: #2B2D45;
  --pk-ramp-primary-90: #24263B;
  --pk-ramp-primary-100: #1F2032;
  --pk-ramp-secondary-05: #F5FBFD;
  --pk-ramp-secondary-10: #E0F2F9;
  --pk-ramp-secondary-20: #C2E4F2;
  --pk-ramp-secondary-30: #94D0E8;
  --pk-ramp-secondary-40: #61BADE;
  --pk-ramp-secondary-50: #33A6D4;
  --pk-ramp-secondary-60: #0090C9;
  --pk-ramp-secondary-70: #007FB1;
  --pk-ramp-secondary-80: #006D99;
  --pk-ramp-secondary-90: #005E83;
  --pk-ramp-secondary-100: #004F6F;
  --pk-ramp-tertiary-05: #FBFEF5;
  --pk-ramp-tertiary-10: #F3FCE0;
  --pk-ramp-tertiary-20: #E7F9C2;
  --pk-ramp-tertiary-30: #D5F494;
  --pk-ramp-tertiary-40: #C0F061;
  --pk-ramp-tertiary-50: #AEEB33;
  --pk-ramp-tertiary-60: #9AE600;
  --pk-ramp-tertiary-70: #88CA00;
  --pk-ramp-tertiary-80: #75AF00;
  --pk-ramp-tertiary-90: #649600;
  --pk-ramp-tertiary-100: #557F00;
  --pk-ramp-arctic-05: #F8FCFE;
  --pk-ramp-arctic-10: #E9F7FC;
  --pk-ramp-arctic-20: #D3EEF9;
  --pk-ramp-arctic-30: #B3E2F4;
  --pk-ramp-arctic-40: #8ED4EE;
  --pk-ramp-arctic-50: #6DC8E9;
  --pk-ramp-arctic-60: #49BAE4;
  --pk-ramp-arctic-70: #40A4C9;
  --pk-ramp-arctic-80: #378DAD;
  --pk-ramp-arctic-90: #2F7994;
  --pk-ramp-arctic-100: #28667D;
  --pk-ramp-graphite-05: #F7F7F7;
  --pk-ramp-graphite-10: #E6E6E6;
  --pk-ramp-graphite-20: #CDCCCE;
  --pk-ramp-graphite-30: #A7A6A8;
  --pk-ramp-graphite-40: #7D7C7F;
  --pk-ramp-graphite-50: #57565A;
  --pk-ramp-graphite-60: #2D2C31;
  --pk-ramp-graphite-70: #28272B;
  --pk-ramp-graphite-80: #222125;
  --pk-ramp-graphite-90: #1D1D20;
  --pk-ramp-graphite-100: #19181B;
  --pk-ramp-red-05: #FEF7F7;
  --pk-ramp-red-10: #FBE8E8;
  --pk-ramp-red-20: #F7D0D2;
  --pk-ramp-red-30: #F2AEB0;
  --pk-ramp-red-40: #EB878A;
  --pk-ramp-red-50: #E56468;
  --pk-ramp-red-60: #DF3D42;
  --pk-ramp-red-70: #C4363A;
  --pk-ramp-red-80: #A92E32;
  --pk-ramp-red-90: #91282B;
  --pk-ramp-red-100: #7B2224;
  --pk-ramp-orange-05: #FFFCF5;
  --pk-ramp-orange-10: #FEF7E0;
  --pk-ramp-orange-20: #FDF0C2;
  --pk-ramp-orange-30: #FBE594;
  --pk-ramp-orange-40: #F9D861;
  --pk-ramp-orange-50: #F8CD33;
  --pk-ramp-orange-60: #F6C000;
  --pk-ramp-orange-70: #D8A900;
  --pk-ramp-orange-80: #BB9200;
  --pk-ramp-orange-90: #A07D00;
  --pk-ramp-orange-100: #876A00;
  --pk-ramp-white-00: #FFFFFF;
  --pk-ramp-white-05: #F2F2F2;
  --pk-ramp-white-10: #E6E6E6;
  --pk-ramp-white-20: #CCCCCC;
  --pk-ramp-white-30: #B2B2B2;
  --pk-ramp-white-40: #999999;
  --pk-ramp-white-50: #808080;
  --pk-ramp-white-60: #666666;
  --pk-ramp-white-70: #4D4D4D;
  --pk-ramp-white-80: #333333;
  --pk-ramp-white-90: #191919;
  --pk-ramp-white-100: #000000;
  --pk-swatch-marin: var(--pk-ramp-primary-60);
  --pk-swatch-azure: var(--pk-ramp-secondary-60);
  --pk-swatch-arctic: var(--pk-ramp-arctic-60);
  --pk-swatch-grasshopper: var(--pk-ramp-tertiary-60);
  --pk-swatch-red: var(--pk-ramp-red-60);
  --pk-swatch-orange: var(--pk-ramp-orange-60);
  --pk-swatch-graphite: #2D2C31;
  --pk-swatch-white: var(--pk-ramp-white-00);
  --pk-sem-bg-page: #191919;
  --pk-sem-bg-website-frame: #191919;
  --pk-sem-bg-surface-primary: #2D2C31;
  --pk-sem-bg-surface-secondary: #191919;
  --pk-page-bg: #191919;
  --pk-page-bg-image: none;
  --pk-page-bg-size: auto;
  --pk-sem-bg-sunken: #191919;
  --pk-sem-border-primary: #4D4D4D;
  --pk-sem-border-subtle: #4D4D4D;
  --pk-sem-header-bg: #2D2C31;
  --pk-sem-header-fg: #F8FCFE;
  --pk-sem-header-fg-secondary: #CCCCCC;
  --pk-sem-footer-surface: #2D2C31;
  --pk-sem-footer-text: #E6E6E6;
  --pk-sem-footer-text-secondary: #CCCCCC;
  --pk-sem-footer-border-muted: #999999;
  --pk-sem-frame-border: #191919;
  --pk-sem-nav-scrim: rgba(25,25,25,0.8);
  --pk-sem-ink-deep: #191919;
  --pk-sem-skyten-black: #191919;
  --pk-text-primary: #F8FCFE;
  --pk-text-secondary: #CCCCCC;
  --pk-text-subtle: #999999;
  --pk-brand-swatch: #49BAE4;
  --pk-doc-paper: #FFFFFF;
  --pk-doc-ink: #191919;
  --pk-doc-edge: #E6E6E6;
  --pk-text-disabled: #666666;
  --pk-text-on-anchor: #FFFFFF;
  --pk-text-link: #999999;
  --pk-sem-bg-surface-raised: #333333;
  --pk-text-danger: #EB878A;
  --pk-text-success: #75AF00;
  --pk-text-warning: #D8A900;
  --pk-accent-ink: #0090C9;
  --pk-accent-text: #33A6D4;
  --pk-text-heading: #E0F2F9;
  --pk-tint-bg: #191919;
  --pk-tint-fg: #F8FCFE;
  --pk-price-up: #75AF00;
  --pk-price-down: #EB878A;
  --pk-price-neutral: #999999;
  --pk-price-up-fg: #191919;
  --pk-price-down-fg: #191919;
  --pk-primary: #383B5B;
  --pk-primary-hover: #60627C;
  --pk-primary-active: #808080;
  --pk-primary-bg: #000000;
  --pk-primary-border: #24263B;
  --pk-on-primary: #FFFFFF;
  --pk-on-primary-hover: #FFFFFF;
  --pk-on-primary-active: #000000;
  --pk-secondary: #0090C9;
  --pk-secondary-hover: #33A6D4;
  --pk-secondary-active: #49BAE4;
  --pk-secondary-bg: #1F2032;
  --pk-secondary-border: #004F6F;
  --pk-on-secondary: #000000;
  --pk-on-secondary-hover: #000000;
  --pk-on-secondary-active: #000000;
  --pk-info: #0090C9;
  --pk-info-hover: #33A6D4;
  --pk-info-active: #49BAE4;
  --pk-info-bg: #1F2032;
  --pk-info-border: #005E83;
  --pk-on-info: #000000;
  --pk-on-info-hover: #000000;
  --pk-on-info-active: #000000;
  --pk-success: #75AF00;
  --pk-success-hover: #88CA00;
  --pk-success-active: #88CA00;
  --pk-success-bg: #2D2C31;
  --pk-success-border: #557F00;
  --pk-on-success: #000000;
  --pk-on-success-hover: #000000;
  --pk-on-success-active: #000000;
  --pk-warning: #D8A900;
  --pk-warning-hover: #F6C000;
  --pk-warning-active: #F6C000;
  --pk-warning-bg: #333333;
  --pk-warning-border: #876A00;
  --pk-on-warning: #000000;
  --pk-on-warning-hover: #000000;
  --pk-on-warning-active: #000000;
  --pk-danger: #DF3D42;
  --pk-danger-hover: #E56468;
  --pk-danger-active: #EB878A;
  --pk-danger-bg: #191919;
  --pk-danger-border: #91282B;
  --pk-on-danger: #000000;
  --pk-on-danger-hover: #000000;
  --pk-on-danger-active: #000000;
  --pk-highlight: #9AE600;
  --pk-highlight-bg: #333333;
  --pk-on-highlight: #000000;
  --pk-ribbon-bg: #9AE600;
  --pk-ribbon-bg-image: none;
  --pk-ribbon-fg: #000000;
  --pk-ribbon-weight: 600;
  --pk-ribbon-size: 11px;
  --pk-ribbon-size-min: 9px;
  --pk-font-sans: 'Noto Sans', -apple-system, sans-serif;
  --pk-font-mono: "Courier New", Courier, monospace;
  --pk-font-display: 'Noto Sans', -apple-system, sans-serif;
  --pk-font-numeric: 'Noto Sans', -apple-system, sans-serif;
  --pk-fs-h1: 46px;
  --pk-fs-h2: 29px;
  --pk-fs-h3: 23px;
  --pk-fs-h4: 19px;
  --pk-fs-base: 15px;
  --pk-fs-small: 14px;
  --pk-fs-caption: 12px;
  --pk-lh: 1.55;
  --pk-lh-heading: 1.25;
  --pk-ls: 0.09em;
  --pk-fw-body: 400;
  --pk-fw-heading: 700;
  --pk-radius-xs: 2px;
  --pk-radius-s: 4px;
  --pk-radius-m: 8px;
  --pk-radius-l: 12px;
  --pk-radius-xl: 20px;
  --pk-radius-pill: 999px;
  --pk-radius-button: 999px;
  --pk-radius-card: 8px;
  --pk-radius-input: 8.0px;
  --pk-radius-nav-item: 999px;
  --pk-radius-badge: 999px;
  --pk-shadow-card: none;
  --pk-shadow-overlay: 0 8px 24px #1919192E;
  --pk-shadow-modal: 0px 3px 9px 0px rgba(0, 0, 0, 0.192);
  --pk-shadow-raised: 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --pk-ring: 2px;
  --pk-ring-offset: 2px;
  --pk-ring-color: #848599;
  --pk-stroke: 1px;
  --pk-stroke-strong: 2px;
  --pk-icon-stroke: 1.5;
  --pk-space-xs: 5px;
  --pk-space-sm: 10px;
  --pk-space-md: 15px;
  --pk-space-lg: 20px;
  --pk-space-xl: 30px;
  --pk-space-2xl: 45px;
  --pk-space-3xl: 60px;
  --pk-gap: 7px;
  --pk-gap-grid: 15px;
  --pk-pad-x: 10px;
  --pk-pad-y: 8px;
  --pk-pad-x-sm: 10px;
  --pk-pad-y-sm: 5px;
  --pk-pad-container: 15px;
  --pk-container-max-width: 1150px;
  --pk-cover-height: 320px;
  --pk-cover-fg: #E6E6E6;
  --pk-cover-scrim: rgba(0,0,0,0.35);
  --pk-block-accent: #191919;
  --pk-block-accent-w: 1px;
  --pk-container-gutter: 90px;
  --pk-bw-hairline: 0.5px;
  --pk-bw-primary: 1px;
  --pk-bw-active: 2px;
  --pk-appbar-bg: #2D2C31;
  --pk-appbar-border: none;
  --pk-appbar-backdrop: none;
  --pk-appbar-fg: #E7E7EB;
  --pk-appbar-price-up: #75AF00;
  --pk-appbar-price-down: #EB878A;
  --pk-appbar-height: 72px;
  --pk-appbar-gap: 18px;
  --pk-appbar-logo-height: 28px;
  --pk-nav-item-w: 44px;
  --pk-nav-item-h: 36px;
  --pk-nav-item-gap: 12px;
  --pk-nav-item-radius: 999px;
  --pk-nav-item-fs: 14px;
  --pk-nav-icon-size: 22px;
  --pk-nav-fg: #E7E7EB;
  --pk-nav-active-bg: #49BAE4;
  --pk-nav-active-fg: #191919;
  --pk-nav-active-weight: 600;
  --pk-nav-underline: transparent;
  --pk-nav-underline-w: 2px;
  --pk-nav-hover-bg: #383B5B;
  --pk-nav-hover-fg: #61BADE;
  --pk-nav-hover-underline: transparent;
  --pk-nav-hover-glow: none;
  --pk-nav-active-bg-image: none;
  --pk-nav-active-glow: none;
  --pk-nav-submenu-indicator: none;
  --pk-nav-fill-bg: #49BAE4;
  --pk-nav-fill-fg: #191919;
  --pk-tooltip-bg: #666666;
  --pk-tooltip-fg: #FFFFFF;
  --pk-menu-bg: #2D2C31;
  --pk-menu-radius: 16px;
  --pk-menu-shadow: 0 8px 24px #1919192E;
  --pk-menu-border: transparent;
  --pk-menu-border-w: 0px;
  --pk-menu-item-fg: #E7E7EB;
  --pk-menu-item-pad: 11px 22px;
  --pk-menu-item-fs: 15px;
  --pk-menu-item-radius: 0px;
  --pk-menu-item-min-h: 0px;
  --pk-menu-hover-bg: #383B5B;
  --pk-menu-hover-rule: #49BAE4;
  --pk-menu-hover-rule-w: 1px;
  --pk-menu-active-bg: #383B5B;
  --pk-menu-active-fg: #49BAE4;
  --pk-rail-width: 230px;
  --pk-menu-danger-fg: #DF3D42;
  --pk-menu-success-fg: #75AF00;
  --pk-menu-warning-fg: #D8A900;
  --pk-menu-info-fg: #0090C9;
  --pk-tabs-bg: transparent;
  --pk-tabs-fg: #E7E7EB;
  --pk-tabs-active-fg: #33A6D4;
  --pk-tabs-active-bg: transparent;
  --pk-tabs-hover-fg: #999999;
  --pk-tabs-rule: #0090C9;
  --pk-tabs-rule-w: 2px;
  --pk-tabs-rule-offset: 6px;
  --pk-tabs-active-gradient: none;
  --pk-tabs-rule-gradient: none;
  --pk-tabs-gap: 24px;
  --pk-tabs-pad: 8px 2px;
  --pk-tabs-fs: 15px;
  --pk-tabs-weight: 400;
  --pk-tabs-active-weight: 700;
  --pk-tabs-radius: 0;
  --pk-tabs-row-rule: transparent;
  --pk-tabs-row-rule-w: 0px;
  --pk-badge-success-bg: #2D2C31;
  --pk-badge-success-fg: #75AF00;
  --pk-badge-warning-bg: #333333;
  --pk-badge-warning-fg: #D8A900;
  --pk-badge-danger-bg: #7B2224;
  --pk-badge-danger-fg: #EB878A;
  --pk-badge-info-bg: #1F2032;
  --pk-badge-info-fg: #0090C9;
  --pk-badge-neutral-bg: #191919;
  --pk-badge-neutral-fg: #CCCCCC;
  --pk-badge-brand-bg: #000000;
  --pk-badge-brand-fg: #808080;
  --pk-badge-brand-border: none;
  --pk-badge-radius: 999px;
  --pk-badge-fs: 12px;
  --pk-badge-pad: 2px 10px;
  --pk-badge-weight: 400;
  --pk-method-get-bg: #0090C9;
  --pk-method-get-fg: #000000;
  --pk-method-post-bg: #75AF00;
  --pk-method-post-fg: #000000;
  --pk-method-put-bg: #D8A900;
  --pk-method-put-fg: #000000;
  --pk-method-patch-bg: #D8A900;
  --pk-method-patch-fg: #000000;
  --pk-method-delete-bg: #DF3D42;
  --pk-method-delete-fg: #000000;
  --pk-method-head-bg: #191919;
  --pk-method-head-fg: #CCCCCC;
  --pk-method-options-bg: #191919;
  --pk-method-options-fg: #CCCCCC;
  --pk-method-fs: 12px;
  --pk-method-weight: 700;
  --pk-method-radius: 999px;
  --pk-method-pad: 2px 8px;
  --pk-method-transform: uppercase;
  --pk-button-bg: #4D4D4D;
  --pk-button-fg: #F8FCFE;
  --pk-button-hover: #666666;
  --pk-button-active: #808080;
  --pk-button-hover-fg: #FFFFFF;
  --pk-button-active-fg: #000000;
  --pk-button-disabled: #24263B;
  --pk-button-secondary-bg: #191919;
  --pk-button-secondary-fg: #F8FCFE;
  --pk-button-secondary-border: #4D4D4D;
  --pk-button-secondary-hover-bg: #24263B;
  --pk-button-secondary-hover-fg: #F8FCFE;
  --pk-button-secondary-active-bg: #191919;
  --pk-button-secondary-active-fg: #F8FCFE;
  --pk-button-radius: 999px;
  --pk-button-height: 44px;
  --pk-button-pad: 0 24px;
  --pk-button-secondary-pad: 0 24px;
  --pk-button-standard-pad: 0 24px;
  --pk-button-selected-pad: 0 24px;
  --pk-button-border-w: 1px;
  --pk-button-fs: 16px;
  --pk-button-weight: 600;
  --pk-button-transform: none;
  --pk-button-ls: 0px;
  --pk-button-shadow: none;
  --pk-button-disabled-fg: #848599;
  --pk-button-selected-bg: #49BAE4;
  --pk-button-selected-fg: #191919;
  --pk-button-selected-hover-bg: #49BAE4;
  --pk-button-selected-hover-fg: #191919;
  --pk-button-selected-glow: none;
  --pk-button-error-bg: #7B2224;
  --pk-button-error-fg: #EB878A;
  --pk-button-error-border: #DF3D42;
  --pk-button-error-hover-bg: #7B2224;
  --pk-button-error-hover-fg: #EB878A;
  --pk-button-error-pressed-bg: #C4363A;
  --pk-button-error-pressed-fg: #FFFFFF;
  --pk-button-secondary-pressed-bg: #2B2D45;
  --pk-button-secondary-pressed-fg: #FFFFFF;
  --pk-button-secondary-pressed-border: #4D4D4D;
  --pk-button-focus-ring: #49BAE4;
  --pk-button-selected-bg-image: none;
  --pk-button-selected-hover-bg-image: none;
  --pk-button-selected-disabled-bg-image: none;
  --pk-button-selected-border: #49BAE4;
  --pk-button-selected-shadow: none;
  --pk-button-standard-bg-image: none;
  --pk-button-standard-bg: #4D4D4D;
  --pk-button-standard-fg: #F8FCFE;
  --pk-button-standard-border: #4D4D4D;
  --pk-button-standard-hover-bg: #666666;
  --pk-button-standard-hover-fg: #FFFFFF;
  --pk-button-standard-pressed-bg: #808080;
  --pk-button-standard-pressed-fg: #000000;
  --pk-button-standard-disabled-bg: #24263B;
  --pk-button-standard-disabled-fg: #848599;
  --pk-button-small-height: 32px;
  --pk-button-small-fs: 13px;
  --pk-button-small-pad: 0 16px;
  --pk-table-toolbar-bg: #49BAE4;
  --pk-table-toolbar-fg: #191919;
  --pk-table-toolbar-hover-bg: #378DAD;
  --pk-table-toolbar-hover-fg: #191919;
  --pk-table-toolbar-border: #49BAE4;
  --pk-table-toolbar-radius: 8.0px;
  --pk-chip-bg: #191919;
  --pk-chip-fg: #F8FCFE;
  --pk-chip-border: transparent;
  --pk-chip-emphasis-bg: #383B5B;
  --pk-chip-emphasis-fg: #FFFFFF;
  --pk-chip-radius: 999px;
  --pk-chip-height: 22px;
  --pk-chip-pad: 1px 8px;
  --pk-chip-fs: 12px;
  --pk-chip-weight: 500;
  --pk-radio-size: 16px;
  --pk-radio-ring: #808080;
  --pk-radio-ring-w: 2px;
  --pk-radio-fill: #191919;
  --pk-radio-idle-fill: #191919;
  --pk-radio-idle-ring: #808080;
  --pk-radio-idle-ring-w: 1px;
  --pk-card-bg: #2D2C31;
  --pk-card-hover-bg: #2D2C31;
  --pk-card-border: #4D4D4D;
  --pk-card-border-w: 1px;
  --pk-card-radius: 8px;
  --pk-card-shadow: none;
  --pk-card-pad: 15px;
  --pk-card-feature-bg-image: none;
  --pk-card-feature-fg: #F8FCFE;
  --pk-card-feature-radius: 8px;
  --pk-card-feature-bg: #2D2C31;
  --pk-card-feature-fg-secondary: #CCCCCC;
  --pk-panel-bg: #2D2C31;
  --pk-pane-bg: #2D2C31;
  --pk-panel-radius: 8.0px;
  --pk-form-panel-bg: #191919;
  --pk-form-panel-border: #4D4D4D;
  --pk-form-panel-border-w: 1px;
  --pk-form-panel-radius: 12px;
  --pk-form-panel-pad: 20px;
  --pk-icon-accent: #383B5B;
  --pk-icon-tile-bg: #191919;
  --pk-heading-gradient: none;
  --pk-input-bg: #191919;
  --pk-input-fg: #F8FCFE;
  --pk-input-border: #808080;
  --pk-input-border-w: 1px;
  --pk-input-border-hover: #999999;
  --pk-input-border-focus: #49BAE4;
  --pk-input-ring: #49BAE459;
  --pk-input-ring-w: 3px;
  --pk-input-border-valid: #9AE600;
  --pk-input-border-invalid: #DF3D42;
  --pk-input-border-disabled: #4D4D4D;
  --pk-input-bg-disabled: #191919;
  --pk-input-fg-disabled: #848599;
  --pk-input-placeholder: #999999;
  --pk-input-hint-fg: #CCCCCC;
  --pk-input-hint-valid-fg: #F8FCFE;
  --pk-input-hint-invalid-fg: #EB878A;
  --pk-input-radius: 8.0px;
  --pk-input-height: 44px;
  --pk-input-height-sm: 32px;
  --pk-input-pad: 8px 16px;
  --pk-input-pad-sm: 5px 12px;
  --pk-input-fs: 16px;
  --pk-input-fs-sm: 14px;
  --pk-checkbox-size: 20px;
  --pk-checkbox-radius: 4.0px;
  --pk-checkbox-bg: #191919;
  --pk-checkbox-border: #808080;
  --pk-checkbox-border-w: 1px;
  --pk-checkbox-hover-bg: #2D2C31;
  --pk-checkbox-hover-border: #49BAE4;
  --pk-toggle-knob-ring: #CFD0D8;
  --pk-toggle-knob-ring-on: #CCCCCC;
  --pk-checkbox-checked-bg: #49BAE4;
  --pk-checkbox-checked-border: #49BAE4;
  --pk-checkbox-checked-border-w: 1px;
  --pk-checkbox-checked-fg: #FFFFFF;
  --pk-checkbox-invalid-bg: #2D2C31;
  --pk-checkbox-invalid-border: #DF3D42;
  --pk-checkbox-invalid-border-w: 1px;
  --pk-checkbox-glyph: 18px;
  --pk-slider-fill: #383B5B;
  --pk-slider-fill-image: linear-gradient(90deg, #49BAE4, #383B5B);
  --pk-alert-info-bg: #1F2032;
  --pk-alert-info-border: #005E83;
  --pk-alert-info-icon: #0090C9;
  --pk-alert-info-fg: #F8FCFE;
  --pk-alert-success-bg: #2D2C31;
  --pk-alert-success-border: #557F00;
  --pk-alert-success-icon: #75AF00;
  --pk-alert-success-fg: #F8FCFE;
  --pk-alert-warning-bg: #333333;
  --pk-alert-warning-border: #876A00;
  --pk-alert-warning-icon: #D8A900;
  --pk-alert-warning-fg: #F8FCFE;
  --pk-alert-danger-bg: #191919;
  --pk-alert-danger-border: #91282B;
  --pk-alert-danger-icon: #DF3D42;
  --pk-alert-danger-fg: #F8FCFE;
  --pk-alert-neutral-bg: #191919;
  --pk-alert-neutral-border: #4D4D4D;
  --pk-alert-neutral-icon: #CCCCCC;
  --pk-alert-neutral-fg: #F8FCFE;
  --pk-alert-radius: 8px;
  --pk-alert-border-w: 1px;
  --pk-alert-pad: 8px 16px;
  --pk-alert-fs: 14px;
  --pk-alert-icon-size: 20px;
  --pk-table-header-bg: transparent;
  --pk-table-header-fg: #E0F2F9;
  --pk-table-header-weight: 700;
  --pk-table-header-transform: uppercase;
  --pk-table-header-ls: 1px;
  --pk-table-header-align: left;
  --pk-table-header-pad: 13px 16px;
  --pk-table-fs: 15px;
  --pk-table-header-fs: 12px;
  --pk-table-lh: 1.5;
  --pk-table-pad: 12px 16px;
  --pk-table-header-rule: #4D4D4D;
  --pk-table-header-rule-w: 1px;
  --pk-table-frame: 1px solid #4D4D4D;
  --pk-table-rule-top: 1px solid #4D4D4D;
  --pk-table-rule-bottom: 1px solid #4D4D4D;
  --pk-table-row-rule: 1px solid #4D4D4D;
  --pk-table-row-rule-color: #4D4D4D;
  --pk-table-row-alt: transparent;
  --pk-table-row-hover: #000000;
  --pk-report-row-alt: #2D2C31;
  --pk-table-row-hover-hairline: transparent;
  --pk-table-vertical-rule: none;
  --pk-table-radius: 8px;
  --pk-table-numeric-align: right;
  --pk-table-pad-compact: 4px 8px;
  --pk-table-fs-compact: 14px;
  --pk-table-border: 1px solid #4D4D4D;
  --pk-table-col-divider: transparent;
  --pk-table-col-divider-h: 18px;
  --pk-table-sort-glyph: #CCCCCC;
  --pk-table-sort-glyph-active: #F8FCFE;
  --pk-table-select-border: #4D4D4D;
  --pk-table-select-size: 16px;
  --pk-filter-chip-bg: #191919;
  --pk-filter-chip-fg: #F8FCFE;
  --pk-filter-chip-border: #4D4D4D;
  --pk-filter-chip-border-w: 1px;
  --pk-filter-chip-radius: 4px;
  --pk-filter-chip-pad: 4px 10px;
  --pk-chart-1: #49BAE4;
  --pk-chart-2: #33A6D4;
  --pk-chart-3: #0090C9;
  --pk-chart-4: #9AE600;
  --pk-chart-5: #E7E7EB;
  --pk-chart-6: #CCCCCC;
  --pk-chart-7: #E0F2F9;
  --pk-chart-8: #999999;
  --pk-logo-height: 28px;
  --pk-logo-max-width: 20%;
  --pk-logo-url: url("foundation-src/brands/assets/skyten/logo-coloured.svg");
  --pk-logo-mark-url: url("foundation-src/brands/assets/skyten/logo-square-coloured.svg");
  --pk-logo-footer-url: url("foundation-src/brands/assets/skyten/logo-white.png");
  --pk-avatar-0: #24263B;
  --pk-avatar-1: #1F2032;
  --pk-avatar-2: #006D99;
  --pk-avatar-3: #005E83;
  --pk-avatar-4: #004F6F;
  --pk-avatar-5: #AEEB33;
  --pk-avatar-6: #9AE600;
  --pk-avatar-7: #88CA00;
  --pk-avatar-8: #557F00;
  --pk-avatar-9: #876A00;
  --pk-avatar-0-fg: #FFFFFF;
  --pk-avatar-1-fg: #FFFFFF;
  --pk-avatar-2-fg: #FFFFFF;
  --pk-avatar-3-fg: #FFFFFF;
  --pk-avatar-4-fg: #FFFFFF;
  --pk-avatar-5-fg: #000000;
  --pk-avatar-6-fg: #000000;
  --pk-avatar-7-fg: #000000;
  --pk-avatar-8-fg: #FFFFFF;
  --pk-avatar-9-fg: #FFFFFF;
  --pk-webnav-bg: transparent;
  --pk-webnav-fg: #CFD0D8;
  --pk-webnav-hover-fg: #49BAE4;
  --pk-webnav-fs: 15px;
  --pk-webnav-weight: 400;
  --pk-webnav-gap: 28px;
  --pk-webnav-height: 58px;
  --pk-webnav-item-pad-x: 0px;
  --pk-webnav-active-fg: #CFD0D8;
  --pk-webnav-active-weight: 400;
  --pk-webnav-underline: #CCCCCC;
  --pk-webnav-underline-w: 1px;
  --pk-webnav-underline-offset: 14px;
  --pk-webnav-cta-bg: #9AE600;
  --pk-webnav-cta-hover-bg: #AEEB33;
  --pk-webnav-cta-fg: #383B5B;
  --pk-webnav-cta-hover-fg: #383B5B;
  --pk-webnav-cta-radius: 999px;
  --pk-webnav-cta-weight: 500;
  --pk-webnav-cta-fs: 15px;
  --pk-webnav-cta-height: 37px;
  --pk-webnav-cta-pad-x: 20px;
  --pk-webnav-logo-height: 19px;
  --pk-webnav-container-max-width: 1280px;
  --pk-webnav-font: 'Noto Sans', -apple-system, sans-serif;
  --pk-webnav-pad-x: 0px;
  --pk-webnav-actions-gap: 18px;
  --pk-webnav-cta-border: none;
  --pk-webnav-cta2-bg: #9AE600;
  --pk-webnav-cta2-hover-bg: #AEEB33;
  --pk-webnav-cta2-fg: #383B5B;
  --pk-webnav-cta2-hover-fg: #383B5B;
  --pk-webnav-cta2-border: none;
  --pk-webnav-cta2-radius: 999px;
  --pk-webnav-cta2-weight: 500;
  --pk-webnav-cta2-height: 37px;
  --pk-webnav-cta2-pad-x: 20px;
  --pk-webnav-toggle-size: 36px;
  --pk-webnav-toggle-border: 1px solid #CFD0D8;
  --pk-webnav-toggle-fg: #CFD0D8;
  --pk-webnav-border: none;
  --pk-webnav-cta-bg-image: none;
  --pk-webnav-cta-hover-bg-image: none;
  --pk-webnav-backdrop: none;
  --pk-webnav-float: 0;
  --pk-webnav-float-bg: transparent;
  --pk-webnav-float-radius: 0;
  --pk-webnav-float-shadow: none;
  --pk-webnav-float-inset: 0px;
  --pk-webnav-float-max-width: none;
  --pk-webnav-float-border: none;
  --pk-webnav-seg-fg: #383B5B;
  --pk-webnav-seg-bg: transparent;
  --pk-webnav-seg-active-bg: #383B5B;
  --pk-webnav-seg-active-fg: #FFFFFF;
  --pk-webnav-seg-border: 1px solid #383B5B;
  --pk-webnav-seg-radius: 999px;
  --pk-webnav-seg-height: 36px;
  --pk-webnav-seg-fs: 14px;
  --pk-webnav-seg-weight: 600;
  --pk-webnav-seg-gap: 10px;
  --pk-webnav-decoration-image: none;
  --pk-webnav-decoration-height: 0px;
  --pk-webnav-height-wide: 72px;
  --pk-webnav-cta-pressed-bg: #88CA00;
  --pk-webnav-cta2-pressed-bg: #88CA00;
  --pk-webnav-hero-bg: #9AE600;
  --pk-webnav-hero-fg: #383B5B;
  --pk-webnav-hero-hover-bg: #AEEB33;
  --pk-webnav-hero-pressed-bg: #88CA00;
  --pk-webnav-hero-edge: none;
  --pk-webnav-hero-disabled-bg: #2B2D45;
  --pk-webnav-hero-disabled-fg: #ABADBA;
  --pk-webnav-hero-disabled-border: #2B2D45;
  --pk-appbar-font: 'Noto Sans', -apple-system, sans-serif;
  --pk-appbar-cta-bg: #9AE600;
  --pk-appbar-cta-fg: #383B5B;
  --pk-appbar-cta-border: none;
  --pk-appbar-cta-radius: 999px;
  --pk-appbar-cta-weight: 600;
  --pk-appbar-cta-fs: 15px;
  --pk-appbar-cta-height: auto;
  --pk-appbar-cta-pad-x: 10px;
  --pk-appbar-cta2-bg: #9AE600;
  --pk-appbar-cta2-fg: #383B5B;
  --pk-appbar-cta2-border: none;
  --pk-appbar-toggle-size: 36px;
  --pk-appbar-toggle-border: 1px solid #E7E7EB;
  --pk-appbar-toggle-fg: #E7E7EB;
  --pk-appbar-cta-hover-bg: #AEEB33;
  --pk-appbar-cta-pressed-bg: #88CA00;
  --pk-appbar-cta-edge: none;
  --pk-appbar-cta-disabled-bg: #2B2D45;
  --pk-appbar-cta-disabled-fg: #ABADBA;
  --pk-appbar-cta-disabled-border: #2B2D45;
  --pk-nav-auto-hide: 0;
  --pk-stepper-lg-size: 80px;
  --pk-stepper-lg-line-w: 7px;
  --pk-stepper-lg-halo-w: 10px;
  --pk-stepper-lg-outline-w: 2px;
  --pk-stepper-lg-num-fs: 26px;
  --pk-stepper-lg-icon-size: 32px;
  --pk-stepper-lg-label-gap: 10px;
  --pk-stepper-lg-label-fs: 22px;
  --pk-stepper-lg-label-lh: 1.3;
  --pk-stepper-lg-label-weight: 700;
  --pk-stepper-lg-detail-fs: 22px;
  --pk-stepper-lg-detail-weight: 400;
  --pk-stepper-lg-bar-h: 14px;
  --pk-stepper-lg-done-bg: #9AE600;
  --pk-stepper-lg-done-fg: #191919;
  --pk-stepper-lg-current-bg: #49BAE4;
  --pk-stepper-lg-current-fg: #FFFFFF;
  --pk-stepper-lg-halo: rgba(73,186,228,0.25);
  --pk-stepper-lg-todo-bg: #191919;
  --pk-stepper-lg-todo-border: #4D4D4D;
  --pk-stepper-lg-todo-fg: #CCCCCC;
  --pk-stepper-lg-line-done: #49BAE4;
  --pk-stepper-lg-line-todo: #4D4D4D;
  --pk-stepper-lg-label-fg: #F8FCFE;
  --pk-stepper-lg-label-todo-fg: #CCCCCC;
  --pk-stepper-lg-detail-fg: #CCCCCC;
  --pk-status-bg: transparent;
  --pk-status-fg: #999999;
  --pk-status-pad: 0;
  --pk-status-radius: 0;
  --pk-status-fs: 12px;
  --pk-status-weight: 400;
  --pk-status-gap: 10px;
  --pk-status-dot: #75AF00;
  --pk-status-dot-size: 12px;
  --pk-heatmap-1: #191919;
  --pk-heatmap-2: #1F2032;
  --pk-heatmap-3: #24263B;
  --pk-heatmap-4: #2D2C31;
  --pk-heatmap-5: #2B2D45;
  --pk-heatmap-6: #313450;
  --pk-heatmap-7: #383B5B;
  --pk-heatmap-8: #4D4D4D;
  --pk-heatmap-9: #28667D;
  --pk-heatmap-10: #60627C;
  --pk-heatmap-11: #666666;
  --pk-heatmap-12: #2F7994;
  --pk-heatmap-13: #808080;
  --pk-heatmap-14: #378DAD;
  --pk-heatmap-15: #848599;
  --pk-heatmap-16: #999999;
  --pk-heatmap-17: #61BADE;
  --pk-heatmap-18: #ABADBA;
  --pk-heatmap-19: #B2B2B2;
  --pk-heatmap-20: #CCCCCC;
  --pk-heatmap-21: #CFD0D8;
  --pk-heatmap-22: #C2E4F2;
  --pk-heatmap-23: #E6E6E6;
  --pk-heatmap-24: #F2F2F2;
  --pk-topo-1: #004F6F;
  --pk-topo-2: #005E83;
  --pk-topo-3: #006D99;
  --pk-topo-4: #007FB1;
  --pk-topo-5: #378DAD;
  --pk-topo-6: #0090C9;
  --pk-topo-7: #2F7994;
  --pk-topo-8: #49BAE4;
  --pk-topo-9: #33A6D4;
  --pk-topo-10: #40A4C9;
  --pk-topo-11: #61BADE;
  --pk-topo-12: #649600;
  --pk-topo-13: #88CA00;
  --pk-topo-14: #75AF00;
  --pk-topo-15: #BB9200;
  --pk-topo-16: #D8A900;
  --pk-topo-17: #F6C000;
  --pk-topo-18: #F2AEB0;
  --pk-topo-19: #A07D00;
  --pk-topo-20: #EB878A;
  --pk-topo-21: #999999;
  --pk-topo-22: #C4363A;
  --pk-topo-23: #E56468;
  --pk-topo-24: #DF3D42;
  --pk-diverging-1: #E56468;
  --pk-diverging-2: #DF3D42;
  --pk-diverging-3: #EB878A;
  --pk-diverging-4: #C4363A;
  --pk-diverging-5: #A92E32;
  --pk-diverging-6: #91282B;
  --pk-diverging-7: #60627C;
  --pk-diverging-8: #7B2224;
  --pk-diverging-9: #313450;
  --pk-diverging-10: #383B5B;
  --pk-diverging-11: #333333;
  --pk-diverging-12: #4D4D4D;
  --pk-diverging-13: #004F6F;
  --pk-diverging-14: #28667D;
  --pk-diverging-15: #666666;
  --pk-diverging-16: #557F00;
  --pk-diverging-17: #876A00;
  --pk-diverging-18: #649600;
  --pk-diverging-19: #A07D00;
  --pk-diverging-20: #75AF00;
  --pk-diverging-21: #88CA00;
  --pk-basic-1: #005E83;
  --pk-basic-2: #006D99;
  --pk-basic-3: #0090C9;
  --pk-basic-4: #49BAE4;
  --pk-basic-5: #B3E2F4;
  --pk-basic-6: #AEEB33;
  --pk-basic-7: #9AE600;
  --pk-basic-8: #649600;
  --pk-basic-9: #75AF00;
  --pk-basic-10: #88CA00;
  --pk-basic-11: #C0F061;
  --pk-basic-12: #F8CD33;
  --pk-basic-13: #BB9200;
  --pk-basic-14: #D8A900;
  --pk-basic-15: #A07D00;
  --pk-basic-16: #E56468;
  --pk-basic-17: #DF3D42;
}

/* ==== src/brands/fonts-skyten.css ==== */
/* GENERATED by core/export_foundation.py (tools-brands @ d8bf7e25ec) from data/brands/skyten.yaml — DO NOT EDIT.
   Contract foundation-1.3: the brand's shipped faces. Link it beside theme-skyten.css. */
@font-face { font-family:"Noto Sans"; font-weight:700; font-style:normal; font-display:swap; src:url("foundation-src/brands/assets/skyten/fonts/noto-sans-bold.woff2") format("woff2"); }
@font-face { font-family:"Noto Sans"; font-weight:700; font-style:italic; font-display:swap; src:url("foundation-src/brands/assets/skyten/fonts/noto-sans-boldItalic.woff2") format("woff2"); }
@font-face { font-family:"Noto Sans"; font-weight:500; font-style:normal; font-display:swap; src:url("foundation-src/brands/assets/skyten/fonts/noto-sans-medium.woff2") format("woff2"); }
@font-face { font-family:"Noto Sans"; font-weight:500; font-style:italic; font-display:swap; src:url("foundation-src/brands/assets/skyten/fonts/noto-sans-mediumItalic.woff2") format("woff2"); }
@font-face { font-family:"Noto Sans"; font-weight:400; font-style:normal; font-display:swap; src:url("foundation-src/brands/assets/skyten/fonts/noto-sans-regular.woff2") format("woff2"); }
@font-face { font-family:"Noto Sans"; font-weight:400; font-style:italic; font-display:swap; src:url("foundation-src/brands/assets/skyten/fonts/noto-sans-regularItalic.woff2") format("woff2"); }
@font-face { font-family:"Noto Sans"; font-weight:600; font-style:normal; font-display:swap; src:url("foundation-src/brands/assets/skyten/fonts/noto-sans-semibold.woff2") format("woff2"); }
@font-face { font-family:"Noto Sans"; font-weight:600; font-style:italic; font-display:swap; src:url("foundation-src/brands/assets/skyten/fonts/noto-sans-semiboldItalic.woff2") format("woff2"); }

/* ==== DS PATCH 2026-10-13 (website light + dark, from the skytraders.io Version 1.2.0 and Version 1.2.0 dark designs) ====
   Added by hand at the end of the stylesheet so it wins over the rules above. Not yet in @paprika/skyten-foundation:
   the next re-vendor drops it unless it lands there (website.css, card.css, stat-tile.css, contact-form.css).
   Part A applies by itself to every website page whose content region is in the dark theme. Parts B and C are opt-in
   patterns: a page gets them by using the class names (recipes in the README, "Website patterns, 2026-10-13 (2)"). */

/* ---- A. Dark theme on website pages -------------------------------------------------------------------------------
   A white or light section whose nearest theme is dark (the page content carries data-pk-theme="dark"; a light region
   inside a dark one switches it off again):
   grounds from the Graphite ramp, inks from the white ramp, accents Arctic; every box outlined 1px in white-70
   (#4D4D4D) and flat (no shadow); form fields on the section's own ground with the same 1px white-70 outline. */
[data-pk-theme="dark"] .pk-website-ground-white:not([data-pk-theme="dark"] [data-pk-theme="light"] *) { --pk-ds-ground: var(--pk-ramp-graphite-80, #222125); }
[data-pk-theme="dark"] .pk-website-ground-light:not([data-pk-theme="dark"] [data-pk-theme="light"] *) { --pk-ds-ground: var(--pk-ramp-graphite-90, #1D1D20); }
[data-pk-theme="dark"] :is(.pk-website-ground-white, .pk-website-ground-light):not([data-pk-theme="dark"] [data-pk-theme="light"] *) { background: var(--pk-ds-ground); color: var(--pk-ramp-white-10, #E6E6E6); }
[data-pk-theme="dark"] :is(.pk-website-ground-white, .pk-website-ground-light):not([data-pk-theme="dark"] [data-pk-theme="light"] *) .pk-website-title { color: var(--pk-ramp-white-00, #FFFFFF); }
[data-pk-theme="dark"] :is(.pk-website-ground-white, .pk-website-ground-light):not([data-pk-theme="dark"] [data-pk-theme="light"] *) .pk-website-eyebrow { color: var(--pk-ramp-arctic-60, #49BAE4); }
[data-pk-theme="dark"] :is(.pk-website-ground-white, .pk-website-ground-light):not([data-pk-theme="dark"] [data-pk-theme="light"] *) .pk-website-lead { color: var(--pk-ramp-white-20, #CCCCCC); }
[data-pk-theme="dark"] :is(.pk-website-ground-white, .pk-website-ground-light):not([data-pk-theme="dark"] [data-pk-theme="light"] *) .pk-website-fineprint { color: var(--pk-ramp-white-30, #B2B2B2); }
[data-pk-theme="dark"] :is(.pk-card, .pk-stat, .pk-website-card, .pk-website-kv-framed, .pk-website-panel, .pk-contact-form-body):is(.pk-website-frame *):not([data-pk-theme="dark"] [data-pk-theme="light"] *) { box-shadow: none; }
[data-pk-theme="dark"] :is(.pk-card, .pk-stat, .pk-website-card, .pk-website-kv-framed, .pk-website-panel, .pk-contact-form-body):is(.pk-website-frame *):not(.pk-website-companies *):not([data-pk-theme="dark"] [data-pk-theme="light"] *) { border-color: var(--pk-ramp-white-70, #4D4D4D); }
[data-pk-theme="dark"] :is(.pk-website-ground-white, .pk-website-ground-light):not([data-pk-theme="dark"] [data-pk-theme="light"] *) :is(.pk-input, .pk-textarea-control, .pk-checkbox-control) {
  background-color: var(--pk-ds-ground);
}
[data-pk-theme="dark"] :is(.pk-website-ground-white, .pk-website-ground-light):not([data-pk-theme="dark"] [data-pk-theme="light"] *) :is(.pk-input:not(:focus), .pk-textarea-control:not(:focus), .pk-checkbox-control:not(:checked):not(:focus)) {
  border-color: var(--pk-ramp-white-70, #4D4D4D);
}

/* ---- B. Org chart: a holding card over equal pillar cards ---------------------------------------------------------
   <div class="pk-website-org">
     <div class="pk-website-org-holding">[renderCard: eyebrow, title, text]</div>
     <div class="pk-website-org-stem"></div>
     <div class="pk-website-org-tree"><span></span><span></span><span></span></div>   one span per pillar
     <div class="pk-website-org-pillars">[renderCard × 3, text = p.pk-website-org-lead + ul.pk-website-org-list]</div>
   </div>
   The horizontal line runs from the middle of the first pillar to the middle of the last, with a drop to each.
   All pillars are as tall as the tallest; every lead takes two lines, so the lists start on one level.
   ul.pk-website-org-list.pk-website-org-list-green marks a list with grasshopper bars (the default bar is Arctic). */
.pk-website-org { --pk-org-line: var(--pk-ramp-primary-20, #CFD0D8); --pk-org-gap: 36px; }
.pk-website-org-holding { width: min(600px, 100%); margin: 0 auto; }
.pk-website-frame .pk-website-org-holding .pk-card { text-align: center; border: 2px solid var(--pk-ramp-arctic-60, #49BAE4); border-radius: 16px; }
.pk-website-frame .pk-website-org-holding .pk-card-eyebrow { color: var(--pk-ramp-tertiary-100, #557F00); }
.pk-website-frame .pk-website-org .pk-card-title:not(:last-child) { margin-bottom: 6px; }
.pk-website-org-stem { width: 1px; height: 52px; margin: 0 auto; background: var(--pk-org-line); }
.pk-website-org-tree { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--pk-org-gap); height: 36px; }
.pk-website-org-tree::before { content: ""; position: absolute; top: 0; height: 1px; left: calc((100% - 2 * var(--pk-org-gap)) / 6); right: calc((100% - 2 * var(--pk-org-gap)) / 6); background: var(--pk-org-line); }
.pk-website-org-tree > span { display: block; width: 1px; height: 100%; margin: 0 auto; background: var(--pk-org-line); }
.pk-website-org-pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--pk-org-gap); align-items: stretch; }
.pk-website-frame .pk-website-org-pillars .pk-card { border-radius: 16px; border: 1px solid var(--pk-ramp-primary-10, #E7E7EB); }
.pk-website-org-lead { margin: 0; min-height: calc(2 * 1lh); color: var(--pk-ramp-white-60, #666666); }
.pk-website-org-list { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.pk-website-org-list li { padding-left: 18px; border-left: 2px solid var(--pk-ramp-arctic-60, #49BAE4); color: var(--pk-ramp-primary-60, #383B5B); line-height: 1.4; }
.pk-website-org-list.pk-website-org-list-green li { border-left-color: var(--pk-ramp-tertiary-60, #9AE600); }
/* dark theme */
[data-pk-theme="dark"] .pk-website-org:not([data-pk-theme="dark"] [data-pk-theme="light"] *) { --pk-org-line: var(--pk-ramp-white-70, #4D4D4D); }
[data-pk-theme="dark"] .pk-website-org:not([data-pk-theme="dark"] [data-pk-theme="light"] *) .pk-website-org-holding .pk-card { background: var(--pk-ds-ground, var(--pk-ramp-graphite-90, #1D1D20)); border-color: var(--pk-ramp-arctic-60, #49BAE4); }
[data-pk-theme="dark"] .pk-website-org:not([data-pk-theme="dark"] [data-pk-theme="light"] *) .pk-website-org-holding .pk-card-eyebrow { color: var(--pk-ramp-tertiary-60, #9AE600); }
[data-pk-theme="dark"] .pk-website-org:not([data-pk-theme="dark"] [data-pk-theme="light"] *) .pk-website-org-pillars .pk-card { background: var(--pk-ramp-graphite-60, #2D2C31); border-color: var(--pk-ramp-white-70, #4D4D4D); }
[data-pk-theme="dark"] .pk-website-org:not([data-pk-theme="dark"] [data-pk-theme="light"] *) .pk-card-title { color: var(--pk-ramp-white-00, #FFFFFF); }
[data-pk-theme="dark"] .pk-website-org:not([data-pk-theme="dark"] [data-pk-theme="light"] *) :is(.pk-card-text, .pk-website-org-lead) { color: var(--pk-ramp-white-30, #B2B2B2); }
[data-pk-theme="dark"] .pk-website-org:not([data-pk-theme="dark"] [data-pk-theme="light"] *) .pk-website-org-list li { color: var(--pk-ramp-white-10, #E6E6E6); }
@media (max-width: 860px) {
  .pk-website-org-tree, .pk-website-org-stem { display: none; }
  .pk-website-org-pillars { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 24px; }
  .pk-website-org-lead { min-height: 0; }
}

/* ---- C. Company cards: coloured link cards in a three-column grid -------------------------------------------------
   <div class="pk-website-companies">[renderCard({ eyebrow, title, text, href }) × n]</div>
   On each card: one fill class (below), .pk-website-company-wide to span two columns; text = a div holding the
   description p's and last a p.pk-website-company-url with the address without https://. The page sets
   target="_blank" rel="noopener noreferrer" on the card's a.pk-card-link so the site opens in a new tab.
   Every fill is a ramp step or a gradient between two steps of one ramp. The address sits at the same distance from
   every card's bottom-left corner. On a light page the cards take the website shadow; in the dark theme they are flat. */
.pk-website-companies { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.pk-website-companies .pk-website-company-wide { grid-column: span 2; }
.pk-website-frame .pk-website-companies .pk-card { display: flex; flex-direction: column; border-radius: 16px; border: 1px solid transparent; padding: 0; }
.pk-website-frame .pk-website-companies .pk-card-body { flex: 1 1 auto; display: flex; flex-direction: column; padding: 36px 36px 32px; }
.pk-website-frame .pk-website-companies .pk-card-text { flex: 1 1 auto; display: flex; flex-direction: column; font-size: 15px; line-height: 1.7; }
.pk-website-frame .pk-website-companies .pk-card-text > div { flex: 1 1 auto; display: flex; flex-direction: column; gap: 12px; }
.pk-website-frame .pk-website-companies .pk-card-text p { margin: 0; }
.pk-website-frame .pk-website-companies .pk-card-text p.pk-website-company-url { margin-top: auto; padding-top: 6px; font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.pk-website-frame .pk-website-companies .pk-card-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 6px; }
.pk-website-frame .pk-website-companies .pk-card-title { font-size: 21px; line-height: 1.25; }
.pk-website-frame .pk-website-companies .pk-website-company-wide .pk-card-title { font-size: 29px; }
.pk-website-frame .pk-website-companies .pk-website-company-wide .pk-card-text { max-width: 520px; }
.pk-website-frame .pk-website-companies .pk-card-title:not(:last-child) { margin-bottom: 12px; }
/* fills; dark fills take white ink, light fills Marin ink */
.pk-website-frame .pk-website-companies .pk-website-fill-marin { background: linear-gradient(135deg, var(--pk-ramp-primary-60, #383B5B), var(--pk-ramp-primary-90, #24263B)); border-color: var(--pk-ramp-primary-70, #313450); }
.pk-website-frame .pk-website-companies .pk-website-fill-azure { background: linear-gradient(135deg, var(--pk-ramp-secondary-90, #005E83), var(--pk-ramp-arctic-90, #2F7994)); border-color: var(--pk-ramp-arctic-80, #378DAD); }
.pk-website-frame .pk-website-companies .pk-website-fill-marin-light { background: linear-gradient(135deg, var(--pk-ramp-primary-50, #60627C), var(--pk-ramp-primary-70, #313450)); border-color: var(--pk-ramp-primary-50, #60627C); }
.pk-website-frame .pk-website-companies .pk-website-fill-graphite { background: var(--pk-ramp-graphite-90, #1D1D20); border-color: var(--pk-ramp-white-70, #4D4D4D); }
.pk-website-frame .pk-website-companies .pk-website-fill-graphite-light { background: linear-gradient(135deg, var(--pk-ramp-graphite-60, #2D2C31), var(--pk-ramp-graphite-70, #28272B)); border-color: var(--pk-ramp-graphite-60, #2D2C31); }
.pk-website-frame .pk-website-companies .pk-website-fill-arctic { background: linear-gradient(135deg, var(--pk-ramp-arctic-50, #6DC8E9), var(--pk-ramp-arctic-60, #49BAE4)); }
.pk-website-frame .pk-website-companies .pk-website-fill-grasshopper { background: linear-gradient(135deg, var(--pk-ramp-tertiary-40, #C0F061), var(--pk-ramp-tertiary-50, #AEEB33)); }
.pk-website-frame .pk-website-companies .pk-website-fill-arctic-pale { background: linear-gradient(135deg, var(--pk-ramp-arctic-10, #E9F7FC), var(--pk-ramp-arctic-20, #D3EEF9)); border-color: var(--pk-ramp-arctic-30, #B3E2F4); }
.pk-website-frame .pk-website-companies :is(.pk-website-fill-marin, .pk-website-fill-azure, .pk-website-fill-marin-light, .pk-website-fill-graphite, .pk-website-fill-graphite-light) .pk-card-title { color: var(--pk-ramp-white-00, #FFFFFF); }
.pk-website-frame .pk-website-companies :is(.pk-website-fill-marin, .pk-website-fill-azure, .pk-website-fill-marin-light, .pk-website-fill-graphite, .pk-website-fill-graphite-light) .pk-card-text { color: var(--pk-ramp-white-10, #E6E6E6); }
.pk-website-frame .pk-website-companies :is(.pk-website-fill-marin, .pk-website-fill-azure, .pk-website-fill-marin-light, .pk-website-fill-graphite, .pk-website-fill-graphite-light) .pk-card-eyebrow { color: var(--pk-ramp-white-20, #CCCCCC); }
.pk-website-frame .pk-website-companies :is(.pk-website-fill-marin, .pk-website-fill-azure, .pk-website-fill-marin-light, .pk-website-fill-graphite, .pk-website-fill-graphite-light) .pk-website-company-url { color: var(--pk-ramp-arctic-30, #B3E2F4); }
.pk-website-frame .pk-website-companies :is(.pk-website-fill-arctic, .pk-website-fill-grasshopper, .pk-website-fill-arctic-pale) :is(.pk-card-title, .pk-card-text, .pk-card-eyebrow, .pk-website-company-url) { color: var(--pk-ramp-primary-60, #383B5B); }
@media (max-width: 860px) {
  .pk-website-companies { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .pk-website-companies .pk-website-company-wide { grid-column: auto; }
  .pk-website-frame .pk-website-companies .pk-card-body { padding: 24px; }
}

/* DS PATCH 2026-10-13 (PO): on a website bar the SKYTRADERS logo turns white while the pointer is on it (and while it
   has keyboard focus). The colour cut stays the logo at rest. Drawn as a filter on the logo image, so every cut and
   size the bar shows (the lockup, and the square mark on a phone-width bar) turns pure white without a second file.
   WEB-1734 (PO 2026-10-15): keyboard focus is :focus-visible, not :focus-within. The logo is a focusable div, so a
   click focused it and :focus-within kept it white after the click; :focus-visible does not match a mouse click.
   Not yet in @paprika/skyten-foundation. */
.pk-shell[data-pk-webnav-layout] .pk-shell-logo-img { transition: filter 150ms cubic-bezier(.2, 0, 0, 1); }
.pk-shell[data-pk-webnav-layout] .pk-shell-logo:hover .pk-shell-logo-img,
.pk-shell[data-pk-webnav-layout] .pk-shell-logo:focus-visible .pk-shell-logo-img { filter: brightness(0) invert(1); }
@media (prefers-reduced-motion: reduce) {
  .pk-shell[data-pk-webnav-layout] .pk-shell-logo-img { transition: none; }
}

/* DS PATCH 2026-10-13 (PO): on website pages the footer's logo is the same size as the logo in the website bar: the
   footer mark takes the bar's logo height (--pk-webnav-logo-height, 19px in skyten) in place of its own 28px.
   Not yet in @paprika/skyten-foundation. */
.pk-website-frame .pk-footer { --pk-footer-mark-height: var(--pk-webnav-logo-height, 19px); }

/* DS PATCH 2026-10-13 (PO): the footer of a website page.
   1. Its logo is a link to the top of the page (the hero); on hover and keyboard focus it shows the two-blue colour cut
      in place of the white footer cut (the site wraps the mark in a.pk-footer-brand-link).
   2. Its menu links are not underlined on hover: they take the website bar's hover colour (--pk-webnav-hover-fg,
      #49BAE4 on dark), as the bar's own items do.
   3. The footer logo's height wins over a height the brand data sets inline on the image (with the size patch above).
   Not yet in @paprika/skyten-foundation. */
.pk-website-frame .pk-footer .pk-footer-brand-mark img { height: var(--pk-footer-mark-height) !important; }
.pk-website-frame .pk-footer-brand-link { display: inline-block; border-radius: var(--pk-radius-xs, 2px); }
[data-pk-brand="skyten"] .pk-website-frame .pk-footer-brand-link:hover .pk-footer-logo,
[data-pk-brand="skyten"] .pk-website-frame .pk-footer-brand-link:focus-visible .pk-footer-logo { content: url("foundation-src/brands/assets/skyten/logo-coloured.svg"); }
.pk-website-frame .pk-footer-brand-link:focus-visible { outline: 2px solid var(--pk-sem-footer-text, #E6E6E6); outline-offset: 4px; }
.pk-website-frame .pk-footer .pk-footer-link:hover { text-decoration: none; color: var(--pk-webnav-hover-fg, #49BAE4); }