/* =====================================================================
   KRATEO HEADER AND FOOTER (homepage#107)
   The one header and the one footer of every page on krateo.me, the
   SetMaster pages included. Their markup is stamped into each page from
   site-src/header.html and site-src/footer.html by site-src/stamp.py;
   this file styles it, and every stamped page links it.

   Colours are the page's own, read by name: the greys from tokens.css on
   the hub, the green-tinted ones from the SetMaster shell, which keeps
   them for now (Lorenz, 2026-09-15). The accent is --accent where a page
   has one (SetMaster), else --amber (the hub, KRATEO DJ, Pulse). So the
   header brings no colour of its own and cannot drift from either family.

   The geometry is the header's own, never the page's: the same row width,
   gutters and heights on every page, so that in a page transition the bar
   stands still and only what is in it changes.

   Two levels, read without being told (homepage#136): the bar is the
   site's, with the switch in its centre on every page, the way the hub's
   tabs were before #107; the product bar is the product's. What ties the
   product bar to the product is its name in the bar: the name stands in
   the product's colour, and the product's pages hang from it, starting
   on its left edge, in a bar tinted with the same colour, set smaller
   and dimmer than the switch. The one accent line in the header marks
   where the reader is: the section in the switch, the page in the
   product bar. The name carries no line of its own (Lorenz, 2026-09-17:
   "nur unter dem Umschalter, nicht unter dem Toolnamen").
   ===================================================================== */

:root {
  --kr-accent:  var(--accent, var(--amber));
  --kr-display: 'Bebas Neue', Impact, 'Arial Narrow Bold', sans-serif;
  --kr-body:    'Barlow Condensed', 'Arial Narrow', 'Helvetica Neue', sans-serif;
  --kr-mono:    'DM Mono', ui-monospace, Menlo, monospace;
  --kr-max:     1440px;   /* the hub's .page-wrap, so the bar lines up with the hub's content */
  --kr-gutter:  48px;
  --kr-bar-h:   56px;
  --kr-sub-h:   40px;
  --kr-mark:    22px;     /* the wordmark */
  /* Where the product's name starts, after KRATEO and the space: 3.3
     wordmark sizes (measured 2026-09-15, Bebas Neue at 22px: 66.4px and
     6.1px). The product's pages start there too. */
  --kr-sub-x:   calc(var(--kr-mark) * 3.3);
  /* How much of the window the pinned header covers, for in-page links. */
  --kr-pinned:  var(--kr-bar-h);
  /* A page that pads its body sideways (the SetMaster shell, 24px) names
     the amount in --page-pad, and the bars and the footer reach past it
     to the window's edges. */
  --kr-bleed:   var(--page-pad, 0px);
}
:root:has(.kr-sub) { --kr-pinned: calc(var(--kr-bar-h) + var(--kr-sub-h)); }
@media (max-width: 1024px) { :root { --kr-gutter: 32px; } }
@media (max-width: 768px)  { :root { --kr-gutter: 20px; } }

html { scroll-padding-top: calc(var(--kr-pinned) + env(safe-area-inset-top, 0px) + 12px); }

.kr-row {
  box-sizing: border-box; width: 100%; max-width: var(--kr-max);
  margin-inline: auto; padding-inline: var(--kr-gutter);
  display: flex; align-items: center;
}

/* ---- Skip link: the first stop for a keyboard, out of sight until then ---- */
.kr-skip {
  position: absolute; z-index: 300; top: 10px; left: var(--kr-gutter);
  padding: 12px 16px; border-radius: 4px;
  background: var(--white); color: var(--bg); text-decoration: none;
  font: 500 11px/1 var(--kr-mono); letter-spacing: 0.14em; text-transform: uppercase;
  transform: translateY(-160%);
}
.kr-skip:focus { transform: none; }

/* ---- The bar: wordmark and the switch, on every page ---- */
.kr-bar {
  position: sticky; top: 0; z-index: 100;
  box-sizing: border-box; height: calc(var(--kr-bar-h) + env(safe-area-inset-top, 0px));
  margin-inline: calc(-1 * var(--kr-bleed));
  padding-top: env(safe-area-inset-top, 0px);
  border-bottom: 1px solid var(--rule);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  view-transition-name: kr-bar;
}
/* Wordmark left, the switch in the centre of the row, the right third
   empty: the hub's own grid from before #107. The switch is centred on
   the row, not between the wordmark and the edge, so it is at the same
   x whether the wordmark says KRATEO or KRATEO SETMASTER, and stands
   still in a transition. That holds while the wordmark fits its third,
   which is why the two-row layout below starts at 699px and not 599:
   between 600 and 659px KRATEO SETMASTER (174px) would widen its column
   and push the switch off centre on SetMaster's pages alone. No column
   gap: with 24px the same shift was measured at 700px (2026-09-16). */
.kr-bar .kr-row { height: 100%; display: grid; grid-template-columns: 1fr auto 1fr; gap: 0; }

/* KRATEO never changes. On a product's pages the product's name follows
   it in the product's colour, and that name is the one thing that moves
   between pages. Both names stand the full height of the bar: the whole
   height is the link, and the focus ring has room inside it. */
.kr-mark {
  display: flex; align-self: stretch; align-items: stretch; gap: 0.28em; margin: 0;
  font-family: var(--kr-display); font-weight: 400; font-size: var(--kr-mark);
  line-height: 1; letter-spacing: 0.12em; white-space: nowrap;
}
/* 4px of side padding, taken back by the margin so nothing moves: room
   for the focus ring, which is drawn inside these full-height boxes. */
.kr-mark a { display: flex; align-items: center; padding-inline: 4px; margin-inline: -4px; text-decoration: none; }
.kr-home   { color: var(--white); }
.kr-suffix { color: var(--kr-accent); }
.kr-suffix-dj        { view-transition-name: kr-suffix-dj; }
.kr-suffix-setmaster { view-transition-name: kr-suffix-setmaster; }
.kr-suffix-pulse     { view-transition-name: kr-suffix-pulse; }

/* The switch keeps the hub's segmented tabs. The page itself is filled
   white; a product's page marks Tools as the section it is in: lit, with
   the product's colour under it, but not filled, because the page is not
   the Tools overview. */
.kr-switch { display: flex; justify-self: center; border: 1px solid var(--rule); }
.kr-switch a {
  display: flex; align-items: center; justify-content: center;
  height: 30px; padding: 0 20px;
  font: 500 10.5px/1 var(--kr-mono); letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--mid); text-decoration: none;
  transition: color 0.15s, background-color 0.15s;
}
.kr-switch a + a { border-left: 1px solid var(--rule); }
.kr-switch a[aria-current="page"] { color: var(--bg); background: var(--white); }
.kr-switch a[aria-current="true"] { color: var(--white); background: var(--bg3); box-shadow: inset 0 -2px 0 var(--kr-accent); }
@media (hover: hover) {
  .kr-switch a:not([aria-current]):hover { color: var(--white); background: var(--bg3); }
}

/* ---- The product bar: a product's pages and its one action, hanging
   from the product's name. A step down from the bar in every dimension
   the eye ranks by: shorter, tinted in the product's colour, its labels
   a size smaller, tracked tighter and one grey dimmer than the switch,
   and starting on the left edge of the name. ---- */
.kr-sub {
  position: sticky; top: calc(var(--kr-bar-h) + env(safe-area-inset-top, 0px)); z-index: 99;
  box-sizing: border-box; height: var(--kr-sub-h);
  margin-inline: calc(-1 * var(--kr-bleed));
  border-bottom: 1px solid var(--rule);
  background: color-mix(in srgb, color-mix(in srgb, var(--kr-accent) 8%, var(--bg)) 92%, transparent);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  view-transition-name: kr-sub;
}
.kr-sub .kr-row { height: 100%; gap: 20px; }
.kr-sections {
  display: flex; align-self: stretch; min-width: 0; gap: 0 24px;
  margin: 0; padding: 0 0 0 var(--kr-sub-x); list-style: none;
}
.kr-sections li { display: flex; }
.kr-sections a {
  display: flex; align-items: center; padding-top: 2px; border-bottom: 2px solid transparent;
  font: 500 10px/1 var(--kr-mono); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--dim); text-decoration: none; white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
}
.kr-sections a[aria-current="page"] { color: var(--white); border-bottom-color: var(--kr-accent); }
@media (hover: hover) { .kr-sections a:hover { color: var(--white); } }
.kr-cta {
  margin-left: auto; flex: none;
  display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px;
  border-radius: 4px; background: var(--kr-accent); color: var(--bg); text-decoration: none;
  font: 500 10px/1 var(--kr-mono); letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap;
  transition: background-color 0.15s;
}
@media (hover: hover) { .kr-cta:hover { background: color-mix(in srgb, var(--kr-accent) 78%, white); } }

/* ---- Keyboard focus: the page's accent, drawn inside the tabs so a
   neighbour cannot cover it ---- */
.kr-skip:focus-visible,
.kr-bar a:focus-visible, .kr-sub a:focus-visible, .kr-ftr a:focus-visible {
  outline: 2px solid var(--kr-accent); outline-offset: 3px;
}
.kr-mark a:focus-visible, .kr-switch a:focus-visible, .kr-sections a:focus-visible { outline-offset: -2px; }

/* ---- Footer: the product's legal line, then KRATEO's ---- */
.kr-ftr {
  margin-inline: calc(-1 * var(--kr-bleed));
  padding-block: 36px calc(44px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--rule);
}
.kr-ftr .kr-row { flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 28px 48px; }
.kr-ftr p { margin: 0; }
.kr-ftr-mark {
  font-family: var(--kr-display); font-weight: 400; font-size: var(--kr-mark);
  line-height: 1; letter-spacing: 0.12em; color: var(--white); white-space: nowrap;
}
.kr-ftr-mark span { color: var(--kr-accent); }
.kr-slogan { margin-top: 10px; font: 300 17px/1.3 var(--kr-body); color: var(--mid); }
/* One row per owner, the owner's name in the first column, so the two
   Privacy links on a SetMaster page cannot be mistaken for each other. */
.kr-legal { display: grid; grid-template-columns: max-content minmax(0, auto); gap: 12px 28px; }
.kr-legal nav { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: baseline; }
.kr-owner, .kr-links a, .kr-copy {
  font: 500 10.5px/1.6 var(--kr-mono); letter-spacing: 0.16em; text-transform: uppercase;
}
.kr-owner { color: var(--dim); }
.kr-owner-product { color: var(--kr-accent); }
.kr-links { display: flex; flex-wrap: wrap; gap: 6px 24px; }
.kr-links a {
  color: var(--mid); text-decoration: none; border-bottom: 1px solid var(--rule);
  transition: color 0.15s, border-color 0.15s;
}
.kr-links a[aria-current="page"] { color: var(--white); }
@media (hover: hover) { .kr-links a:hover { color: var(--white); border-bottom-color: var(--kr-accent); } }
.kr-copy { color: var(--dim); }

/* ---- Phones, and windows up to 699px ---- */
@media (max-width: 699px) {
  :root { --kr-mark: 20px; --kr-bar-h: 87px; }
  /* Two rows on every page: the wordmark, then the switch across the
     width. One row holds KRATEO DJ and the switch but not KRATEO
     SETMASTER (measured 2026-09-15: 159px and 197px in 350px), and the bar
     must be the same shape on every page or it jumps in a transition. */
  .kr-bar .kr-row { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding-inline: 0; }
  .kr-mark { height: 48px; align-self: auto; padding-inline: var(--kr-gutter); }
  .kr-switch { height: 38px; border: 0; border-top: 1px solid var(--rule); }
  .kr-switch a { flex: 1; height: auto; padding: 0; letter-spacing: 0.16em; }
  /* The product bar scrolls away with the page here, so what stays pinned
     is as tall as the hub's header has been on phones. */
  :root:has(.kr-sub) { --kr-pinned: var(--kr-bar-h); }
  .kr-sub { position: relative; top: auto; }
  /* From the left edge, and tighter, so SetMaster's three pages and its
     button share one row: indented under the name they needed 384px of
     350 at 390px wide. Narrower than a row can hold, the pages scroll
     sideways under the button. */
  .kr-sections { gap: 0 16px; padding-left: 0; overflow-x: auto; scrollbar-width: none; }
  .kr-sections a, .kr-cta { letter-spacing: 0.12em; }
  .kr-cta { padding: 0 10px; }
  .kr-ftr .kr-row { flex-direction: column; }
}

@media print {
  .kr-skip { display: none; }
  .kr-bar, .kr-sub { position: static; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ---- The page transition ----
   Cross-document View Transitions: when both pages link this file, the
   browser keeps the named parts in place and animates only what differs.
   Chrome, Edge and Safari do; Firefox loads the page as before. Opted into
   only when the reader has not asked for less motion, so under
   prefers-reduced-motion every navigation is an ordinary page load. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
::view-transition-group(root) { animation-duration: 0.28s; }

/* The product's name leaves and enters at the edge after KRATEO, like a
   record pulled from the crate and pushed back: it moves right, and only
   the part past that edge shows, so it never crosses KRATEO. Within one
   product the name is on both pages and stays still.
   Both ends of every clip are written out as inset(). From inset() to the
   element's own clip-path, none, there is no interpolation: the clip
   jumps at the halfway point, and in the first prototype the name slid
   across KRATEO in plain sight (frozen frame, 2026-09-15). */
@keyframes kr-suffix-in {
  from { transform: translateX(-100%); clip-path: inset(0 0 0 100%); }
  to   { transform: translateX(0);     clip-path: inset(0 0 0 0); }
}
@keyframes kr-suffix-out {
  from { transform: translateX(0);     clip-path: inset(0 0 0 0); }
  to   { transform: translateX(-100%); clip-path: inset(0 0 0 100%); }
}
::view-transition-new(kr-suffix-dj):only-child,
::view-transition-new(kr-suffix-setmaster):only-child,
::view-transition-new(kr-suffix-pulse):only-child {
  animation: kr-suffix-in 0.46s cubic-bezier(0.2, 0.8, 0.2, 1) 0.14s both;
}
::view-transition-old(kr-suffix-dj):only-child,
::view-transition-old(kr-suffix-setmaster):only-child,
::view-transition-old(kr-suffix-pulse):only-child {
  animation: kr-suffix-out 0.2s cubic-bezier(0.6, 0, 0.9, 0.5) both;
}

/* The product bar unfolds from under the bar when a product is entered,
   and folds back up when it is left. */
@keyframes kr-unfold { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes kr-fold   { from { clip-path: inset(0 0 0 0); }    to { clip-path: inset(0 0 100% 0); } }
::view-transition-new(kr-sub):only-child { animation: kr-unfold 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
::view-transition-old(kr-sub):only-child { animation: kr-fold 0.2s ease-in both; }

/* Between two products the product bar hands over instead of blending
   (Lorenz, 2026-09-15). Its ground, kr-sub above, stays and only changes its
   tint; its row, the product's own links and button, is named per product.
   The old row is gone at 150ms and the new one starts there, so no frame
   shows both. Entering a product from elsewhere, the row comes in as the
   ground finishes unfolding; within one product it stays. */
.kr-sub-dj .kr-row        { view-transition-name: kr-sub-dj; }
.kr-sub-setmaster .kr-row { view-transition-name: kr-sub-setmaster; }
@keyframes kr-row-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes kr-row-in  { from { opacity: 0; } to { opacity: 1; } }
::view-transition-old(kr-sub-dj):only-child,
::view-transition-old(kr-sub-setmaster):only-child { animation: kr-row-out 0.15s ease-in both; }
::view-transition-new(kr-sub-dj):only-child,
::view-transition-new(kr-sub-setmaster):only-child { animation: kr-row-in 0.15s ease-out 0.15s both; }