/* ==========================================================================
   Klar – shared chrome & primitives (2027)
   Floating pill navigation, footer card, the black pill CTA with its round arrow
   badge, and a handful of primitives every page uses. Markup: tools/lib/chrome.mjs
   (written into every page by tools/sync-meta.mjs). Only k-* classes live here, so
   page styles can never collide with them. Values come from tokens.css only.
   ========================================================================== */

:where(.k-nav, .k-footer) [hidden] { display: none !important; }
.k-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* ---------- Primitives ---------- */
.k-glyph { width: 1em; height: 1em; flex: none; display: inline-block; vertical-align: -.125em; }
.k-hand { font-family: var(--font-hand); font-size: var(--fs-hand); font-weight: var(--w-medium); line-height: 1; letter-spacing: 0; color: var(--ink-2); }
.k-label { font-family: var(--font-sans); font-size: var(--fs-label); font-weight: var(--w-medium); line-height: 1.2; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-3); }
.k-tag {
  display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border: var(--hair) solid currentColor; border-radius: var(--r-pill);
  font-size: var(--fs-label); font-weight: var(--w-semibold); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink);
}
/* The architectural grid of the canvas. Put it on a section (or a pseudo-element) – decorative only. */
.k-grid-bg {
  background-image: linear-gradient(var(--grid-line) var(--hair), transparent var(--hair)), linear-gradient(90deg, var(--grid-line) var(--hair), transparent var(--hair));
  background-size: var(--grid-cell) var(--grid-cell);
  background-position: calc(var(--page-x) - 1px) -1px;
}

/* Focus: ink ring with a lime halo – visible on canvas, paper, tiles and the black CTA alike. */
:where(.k-nav, .k-footer, .k-cta, .k-pill, .k-theme) :focus-visible,
.k-cta:focus-visible, .k-pill:focus-visible, .k-theme:focus-visible {
  outline: 2px solid var(--focus); outline-offset: 3px; box-shadow: 0 0 0 6px var(--focus-halo); border-radius: var(--r-pill);
}

/* ---------- CTA: black pill + round arrow badge ---------- */
.k-cta {
  --cta-h: 44px;
  display: inline-flex; align-items: center; gap: 2px; min-height: var(--cta-h); max-width: 100%; flex: none;
  color: var(--canvas); text-decoration: none; font-family: var(--font-sans); font-size: var(--fs-small); font-weight: var(--w-medium); letter-spacing: var(--track-body);
  border-radius: var(--r-pill); -webkit-tap-highlight-color: transparent;
}
.k-cta__badge {
  flex: none; display: grid; place-items: center; width: var(--cta-h); height: var(--cta-h); border-radius: 46% 54% 52% 48% / 50% 46% 54% 50%;
  background: var(--ink); transition: transform var(--dur-m) var(--ease-spring), border-radius var(--dur-m) var(--ease-out);
}
.k-cta__badge svg { width: 44%; height: 44%; fill: none; stroke: currentColor; stroke-width: 12; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--dur-m) var(--ease-spring); }
/* The label stays on one line while it fits and wraps (balanced) instead of running past a narrow column. */
.k-cta__label { display: inline-flex; align-items: center; align-self: stretch; min-width: 0; padding: 6px 22px; border-radius: var(--r-pill); background: var(--ink); line-height: 1.2; text-wrap: balance; transition: transform var(--dur-m) var(--ease-spring); }
.k-cta:hover .k-cta__badge { transform: translateX(3px) rotate(-8deg); border-radius: 50%; }
.k-cta:hover .k-cta__badge svg { transform: rotate(45deg); }
.k-cta:active .k-cta__label, .k-cta:active .k-cta__badge { transform: scale(.97); }
.k-cta--lg { --cta-h: 56px; font-size: var(--fs-body); }
.k-cta--lg .k-cta__label { padding: 6px 28px; }
/* On a lime or dark surface the CTA keeps black on light – or flips with --cta-ink/--cta-text. */
.k-cta--on-stage { color: var(--stage); }
.k-cta--on-stage .k-cta__badge, .k-cta--on-stage .k-cta__label { background: var(--stage-ink); }

/* Secondary pill (outline) */
.k-pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px;
  border: var(--hair) solid var(--field); border-radius: var(--r-pill); background: transparent; color: var(--ink);
  font: var(--w-medium) var(--fs-small)/1 var(--font-sans); letter-spacing: var(--track-body); text-decoration: none; cursor: pointer;
  transition: background-color var(--dur-s) var(--ease-out), border-color var(--dur-s) var(--ease-out);
}
.k-pill:hover { background: var(--canvas-2); border-color: var(--ink); }

/* ---------- Theme switch ---------- */
.k-theme {
  display: grid; place-items: center; width: 40px; height: 40px; flex: none; padding: 0; cursor: pointer;
  border: var(--hair) solid var(--rule-2); border-radius: 50%; background: transparent; color: var(--ink);
  transition: background-color var(--dur-s) var(--ease-out), transform var(--dur-m) var(--ease-spring);
}
.k-theme:hover { background: var(--canvas-2); transform: rotate(-20deg); }
.k-theme svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.k-theme .moon { display: none; }
:root[data-theme="dark"] .k-theme .sun, :root[data-theme="dark"] .k-theme .rays { display: none; }
:root[data-theme="dark"] .k-theme .moon { display: block; fill: currentColor; stroke: none; }

/* ---------- Navigation: a floating pill ----------
   At the top it spans the page like a ruler line; once the page scrolls (is-scrolled, set by
   common.js initNav) it contracts to a centred white pill with a soft shadow. */
.k-nav {
  position: fixed; z-index: var(--z-nav); top: var(--nav-top); left: var(--page-x); right: var(--page-x);
  pointer-events: none; font-family: var(--font-sans);
}
.k-nav__bar {
  --inset: 0px;
  position: relative; isolation: isolate; pointer-events: auto;
  display: flex; align-items: center; gap: var(--s-3); height: var(--nav-h); max-width: calc(var(--max) - 2 * var(--page-x)); margin: 0 auto; padding: 0 6px 0 20px;
}
/* The pill itself is a pseudo-element anchored at the centre: it narrows by width while brand and
   actions slide in by transform – the contraction moves no layout box (no layout shift). */
.k-nav__bar::before {
  content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: calc(100% - 2 * var(--inset)); transform: translateX(-50%);
  border: var(--hair) solid var(--rule-2); border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--canvas) 72%, transparent); -webkit-backdrop-filter: var(--blur-glass); backdrop-filter: var(--blur-glass);
  transition: width var(--dur-l) var(--ease-klar), background-color var(--dur-m) var(--ease-out), box-shadow var(--dur-m) var(--ease-out), border-color var(--dur-m) var(--ease-out);
}
.k-nav__brand, .k-nav__section, .k-nav__actions { transition: transform var(--dur-l) var(--ease-klar); }
.k-nav__brand, .k-nav__section { transform: translateX(var(--inset)); }
.k-nav__actions { transform: translateX(calc(-1 * var(--inset))); }
.k-nav.is-scrolled .k-nav__bar { --inset: max(0px, calc((min(100vw - 2 * var(--page-x), var(--max) - 2 * var(--page-x)) - 880px) / 2)); }
.k-nav.is-scrolled .k-nav__bar::before { background: color-mix(in srgb, var(--paper) 97%, transparent); border-color: var(--rule); box-shadow: var(--shadow-float); }
.k-nav__brand { display: inline-flex; align-items: center; height: 40px; padding: 0 4px; margin-left: -4px; color: var(--ink); border-radius: var(--r-s); }
.k-wordmark { display: block; height: 22px; width: auto; fill: currentColor; }
.k-nav__section { padding-left: var(--s-3); margin-left: var(--s-1); border-left: var(--hair) solid var(--rule-2); font-size: var(--fs-small); font-weight: var(--w-medium); color: var(--ink-3); line-height: 20px; }
.k-nav__links { flex: 1; display: flex; justify-content: center; gap: 2px; }
.k-nav__links a, .k-nav__back {
  display: inline-flex; align-items: center; height: 36px; padding: 0 12px; border-radius: var(--r-pill);
  color: var(--ink); text-decoration: none; font-size: var(--fs-micro); font-weight: var(--w-medium); letter-spacing: var(--track-body); white-space: nowrap;
  transition: background-color var(--dur-s) var(--ease-out);
}
.k-nav__links a:hover, .k-nav__back:hover { background: var(--canvas-2); }
.k-nav__links a[aria-current="page"] { background: var(--canvas-2); }
.k-nav__actions { display: flex; align-items: center; gap: var(--s-2); margin-left: auto; }
.k-nav__account { display: none; }
.k-nav__burger { display: none; }

@media (max-width: 899px) {
  .k-nav__links--inline { display: none; }
  .k-nav[data-variant="home"] .k-nav__links {
    position: absolute; top: calc(100% + var(--s-2)); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0; padding: var(--s-3);
    background: var(--paper); border: var(--hair) solid var(--rule); border-radius: var(--r-l); box-shadow: var(--shadow-lift);
    opacity: 0; visibility: hidden; transform: translateY(-8px) scale(.98); transform-origin: top center;
    transition: opacity var(--dur-s) var(--ease-out), transform var(--dur-m) var(--ease-klar), visibility 0s linear var(--dur-m);
  }
  .k-nav[data-variant="home"] .k-nav__links.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .k-nav[data-variant="home"] .k-nav__links a { height: auto; padding: 14px 16px; border-radius: var(--r-m); font-size: var(--fs-h3); letter-spacing: var(--track-h3); }
  .k-nav__account { display: inline-flex; }
  .k-nav__burger {
    display: grid; place-content: center; gap: 5px; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
    background: var(--canvas-2); color: var(--ink); cursor: pointer;
  }
  .k-nav__burger i { display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor; transition: transform var(--dur-m) var(--ease-klar); }
  .k-nav__burger[aria-expanded="true"] i:first-of-type { transform: translateY(3.5px) rotate(45deg); }
  .k-nav__burger[aria-expanded="true"] i:last-of-type { transform: translateY(-3.5px) rotate(-45deg); }
  .k-nav__bar { padding-left: 16px; }
}
@media (max-width: 479px) {
  .k-nav .k-cta__label { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .k-nav .k-theme { display: none; }
  .k-nav[data-variant="konto"] .k-theme { display: grid; }
  .k-nav__back { padding: 0 8px; }
  .k-wordmark { height: 19px; }
}
/* Without JavaScript the burger cannot open the menu – show the links in a row that may scroll. */
:root:not(.js) .k-nav__burger { display: none; }
@media (max-width: 899px) {
  :root:not(.js) .k-nav[data-variant="home"] .k-nav__links { position: static; opacity: 1; visibility: visible; transform: none; flex-direction: row; padding: 0; border: 0; box-shadow: none; background: none; overflow-x: auto; }
}

/* ---------- Footer: white card on a sky-blue pixel field ---------- */
.k-footer {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(56px, 2rem + 8vw, 160px) var(--page-x) clamp(24px, 1rem + 3vw, 64px);
  background: var(--tile-sky); color: var(--ink); font-family: var(--font-sans);
}
/* Dithered field: two offset dot grids, faded towards the card. Decorative; builders may paint
   pixel figures on top with <canvas> (docs/DESIGN.md §3.13). */
.k-footer__field {
  position: absolute; inset: 0; z-index: -1;
  background-image:
    radial-gradient(circle at center, color-mix(in srgb, var(--tile-steel) 80%, var(--klar-black) 6%) 1.4px, transparent 1.8px),
    radial-gradient(circle at center, color-mix(in srgb, var(--klar-white) 55%, transparent) 1.1px, transparent 1.5px);
  background-size: 8px 8px, 8px 8px;
  background-position: 0 0, 4px 4px;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 40%, transparent 22%, #000 70%);
  mask-image: radial-gradient(120% 90% at 50% 40%, transparent 22%, #000 70%);
}
.k-footer__card {
  max-width: 760px; margin: 0 auto; background: var(--paper); border-radius: var(--r-m); box-shadow: var(--shadow-lift);
}
.k-footer__hero {
  position: relative; display: grid; justify-items: center; gap: var(--s-3); text-align: center;
  padding: clamp(56px, 2rem + 6vw, 112px) var(--s-6);
  /* corner dots of the drafting frame */
  background:
    linear-gradient(var(--grid-dot), var(--grid-dot)) 14px 14px / 6px 6px no-repeat,
    linear-gradient(var(--grid-dot), var(--grid-dot)) calc(100% - 14px) 14px / 6px 6px no-repeat,
    linear-gradient(var(--grid-dot), var(--grid-dot)) 14px calc(100% - 14px) / 6px 6px no-repeat,
    linear-gradient(var(--grid-dot), var(--grid-dot)) calc(100% - 14px) calc(100% - 14px) / 6px 6px no-repeat;
}
.k-footer__hero::before { content: ""; position: absolute; inset: 16px 17px; border: var(--hair) solid var(--rule); pointer-events: none; }
.k-footer__hand { font-family: var(--font-hand); font-size: var(--fs-hand); font-weight: var(--w-medium); line-height: 1; color: var(--ink-2); margin: 0; order: 2; }
.k-footer__claim { margin: 0; font-size: var(--fs-h2); font-weight: var(--w-medium); line-height: var(--lh-heading); letter-spacing: var(--track-h2); text-wrap: balance; order: 1; }
.k-footer__hero .k-cta { order: 3; margin-top: var(--s-4); }
.k-footer__nav {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5);
  padding: var(--s-6) var(--s-6) var(--s-5); border-top: var(--hair) solid var(--rule);
}
.k-footer__nav div { display: grid; align-content: start; gap: 2px; }
.k-footer__head { margin: 0 0 var(--s-2); font-size: var(--fs-label); font-weight: var(--w-medium); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-3); }
.k-footer__nav a { justify-self: start; padding: 5px 0; color: var(--ink); text-decoration: none; font-size: var(--fs-small); letter-spacing: var(--track-body); line-height: 1.3; border-radius: var(--r-xs); }
.k-footer__nav a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.k-footer__base {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-4) var(--s-6); border-top: var(--hair) solid var(--rule); font-size: var(--fs-micro); color: var(--ink-3);
}
.k-footer__base p { margin: 0; }
.k-footer__brand { display: inline-flex; color: var(--ink); border-radius: var(--r-xs); }
.k-footer__brand .k-wordmark { height: 18px; }
@media (max-width: 639px) {
  .k-footer__nav { grid-template-columns: 1fr 1fr; padding: var(--s-5); }
  .k-footer__nav div:last-child { grid-column: 1 / -1; }
  .k-footer__base { padding: var(--s-4) var(--s-5); }
  .k-footer__hero { padding-left: var(--s-5); padding-right: var(--s-5); }
}
@media (max-width: 359px) {
  .k-footer__nav { grid-template-columns: 1fr; }
}

/* ---------- Reduced motion: chrome stays, movement goes ---------- */
@media (prefers-reduced-motion: reduce) {
  .k-nav__bar, .k-nav__bar::before, .k-nav__brand, .k-nav__actions, .k-nav__links, .k-nav__burger i, .k-cta__badge, .k-cta__badge svg, .k-cta__label, .k-theme { transition: none !important; }
  .k-cta:hover .k-cta__badge, .k-theme:hover { transform: none; }
}

/* Plain footer (cancellation page): no claim, no CTA – the link card keeps its rounded top. */
.k-footer--plain .k-footer__nav { border-top: 0; }