/* Sidewave shared shell — header + footer used by Sidewave (data-brand="sidewave") and 1K (data-brand="1k").
   Self-contained: no dependency on tokens.css / base.css. Everything is scoped to .sh (header) and .sh-foot (footer).
   Markup (see shell.js for the full template and the data-shell auto-render):
     <header class="sh" data-brand="sidewave|1k" data-float>…</header>
     <footer class="sh-foot" data-brand="sidewave|1k">…</footer>
   States set by shell.js: [data-scrolled] on the header once the page has scrolled; [data-open] while the mobile menu is open. */

.sh, .sh-foot {
  --sh-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --sh-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  /* Sidewave: navy / white / silver */
  --sh-fg: #f3f6fa;
  --sh-fg-2: #b4c1d3;
  --sh-fg-3: #8494ab;
  --sh-bg: #040b18;
  --sh-bar: rgba(4, 11, 24, .72);
  --sh-line: rgba(255, 255, 255, .12);
  --sh-accent: #a7d6ed;
  --sh-pill-fg: #040b18;
  --sh-pill-bg: #f3f6fa;
  --sh-focus: #a7d6ed;
  --sh-menu-bg: #0b1a33;
  --sh-radius: 999px;
  --sh-h: 64px;
  font-family: var(--sh-font);
  color: var(--sh-fg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.sh[data-brand="1k"], .sh-foot[data-brand="1k"] {
  --sh-fg: #ffffff;
  --sh-fg-2: #b3b3b3;
  --sh-fg-3: #8a8a8a; /* ≥ 5.7:1 on the 1K blacks (#000 / #070707 / #0b0b0b): the 10 px lockup and footer base text */
  --sh-bg: #000000;
  --sh-bar: rgba(0, 0, 0, .8);
  --sh-line: rgba(255, 255, 255, .14);
  --sh-accent: #e0271b;
  --sh-pill-fg: #000000;
  --sh-pill-bg: #ffffff;
  --sh-focus: #ffffff;
  --sh-menu-bg: #0a0a0a;
  --sh-radius: 0;
}
.sh *, .sh *::before, .sh *::after, .sh-foot *, .sh-foot *::before, .sh-foot *::after { box-sizing: border-box; }
.sh a, .sh-foot a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.sh button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.sh :focus { outline: none; }
.sh :focus-visible, .sh-foot :focus-visible { outline: 2px solid var(--sh-focus); outline-offset: 3px; }
.sh [hidden], .sh-foot [hidden] { display: none !important; }
.sh svg, .sh-foot svg, .sh img, .sh-foot img { display: block; }

/* Light (paper) pages: ink on paper, never a grey bar. */
body.light .sh, .sh[data-tone="light"] {
  --sh-fg: #0b0b0b; --sh-fg-2: #4a4a4a; --sh-fg-3: #5f5f5f; --sh-bg: #f4f2ed; --sh-bar: rgba(244, 242, 237, .92);
  --sh-line: rgba(0, 0, 0, .14); --sh-pill-fg: #ffffff; --sh-pill-bg: #0b0b0b; --sh-menu-bg: #ffffff; --sh-focus: #0b0b0b;
}
body.light .sh .sh-panel { box-shadow: 0 24px 60px rgba(0, 0, 0, .14); }
body.light .sh .sh-panel a:hover, body.light .sh .sh-panel button:hover { background: rgba(0, 0, 0, .05); }

/* ── Header ─────────────────────────────────────────────── */
.sh {
  position: sticky; top: 0; z-index: 40;
  height: var(--sh-h);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .35s ease, border-color .35s ease, backdrop-filter .35s ease;
}
.sh[data-float] { position: fixed; left: 0; right: 0; box-sizing: border-box; height: calc(var(--sh-h) + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top); }   /* under a notch or the Dynamic Island when there is one */
.sh:not([data-float]) { background: var(--sh-bg); border-bottom-color: var(--sh-line); }
/* Sidewave's ribbon (/sw/ribbon.js) across the top of a project's page: the header and the page come down under it */
html[data-sidewave-ribbon] { --sidewave-ribbon-h: 26px; --sw-rb: calc(var(--sidewave-ribbon-h) + env(safe-area-inset-top)); scroll-padding-top: var(--sw-rb); }
html[data-sidewave-ribbon] body { padding-top: var(--sw-rb); }
html[data-sidewave-ribbon] .sh { top: var(--sw-rb); }
html[data-sidewave-ribbon] .sh[data-float] { height: var(--sh-h); padding-top: 0; }
@media (max-width: 720px) { html[data-sidewave-ribbon] { --sidewave-ribbon-h: 24px; } }
.sh[data-scrolled] {
  background: var(--sh-bar);
  border-bottom-color: var(--sh-line);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);
}
.sh-in {
  height: 100%; max-width: 1440px; margin: 0 auto;
  padding: 0 max(clamp(16px, 3.4vw, 48px), env(safe-area-inset-right)) 0 max(clamp(16px, 3.4vw, 48px), env(safe-area-inset-left));
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px;
}
.sh-brand { display: inline-flex; align-items: center; height: 44px; }
.sh-brand img { height: 22px; width: auto; }
.sh[data-brand="1k"] .sh-brand { font-weight: 800; font-size: 20px; letter-spacing: -.04em; }
.sh-nav { display: flex; justify-content: center; gap: 4px; }
.sh-nav a, .sh-end > a {
  display: inline-flex; align-items: center; height: 36px; padding: 0 12px; white-space: nowrap;
  font-size: 14px; font-weight: 500; letter-spacing: -.005em; color: var(--sh-fg-2);
  border-radius: var(--sh-radius); transition: color .2s ease, background-color .2s ease;
}
.sh-nav a:hover, .sh-end > a:hover { color: var(--sh-fg); }
.sh-nav a[aria-current="page"] { color: var(--sh-fg); }
.sh-end { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.sh .sh-signin, .sh .sh-account-entry {
  display: inline-flex; align-items: center; height: 36px; padding: 0 16px; white-space: nowrap;
  font-size: 14px; font-weight: 600; color: var(--sh-pill-fg); background: var(--sh-pill-bg);
  border-radius: var(--sh-radius); transition: transform .2s ease, opacity .2s ease;
}
/* 0,3,0: beats `.sh-end > a:hover` (0,2,1), so the pill keeps its own label colour on hover in every header state. */
.sh .sh-signin:hover, .sh .sh-signin:focus-visible, .sh .sh-account-entry:hover { color: var(--sh-pill-fg); background: var(--sh-pill-bg); opacity: .9; transform: translateY(-1px); }
.sh[aria-busy="true"] .sh-signin { opacity: .6; }

/* Account menu (signed in) */
.sh-account { position: relative; }
.sh-account > summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px 0 4px; border-radius: var(--sh-radius); border: 1px solid var(--sh-line); cursor: pointer; color: var(--sh-fg); }
.sh-account > summary::-webkit-details-marker { display: none; }
.sh-account > summary:hover { border-color: var(--sh-fg-3); }
.sh-avatar { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--sh-pill-fg); background: var(--sh-pill-bg); }
.sh[data-brand="1k"] .sh-avatar { border-radius: 0; }
.sh-account-name { font-size: 14px; font-weight: 500; max-width: 12ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-panel {
  position: absolute; right: 0; top: calc(100% + 10px); min-width: 240px;
  background: var(--sh-menu-bg); border: 1px solid var(--sh-line); border-radius: calc(var(--sh-radius) * .02 + 12px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45); padding: 6px; z-index: 50;
}
.sh[data-brand="1k"] .sh-panel { border-radius: 0; }
.sh-identity { padding: 10px 12px 12px; display: grid; gap: 2px; border-bottom: 1px solid var(--sh-line); margin-bottom: 6px; }
.sh-identity strong { font-size: 14px; font-weight: 600; }
.sh-identity span { font-size: 12px; color: var(--sh-fg-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-panel a, .sh-panel button { display: flex; align-items: center; width: 100%; height: 38px; padding: 0 12px; font-size: 14px; color: var(--sh-fg-2); border-radius: 8px; text-align: left; }
.sh[data-brand="1k"] .sh-panel a, .sh[data-brand="1k"] .sh-panel button { border-radius: 0; }
.sh-panel a:hover, .sh-panel button:hover { color: var(--sh-fg); background: rgba(255, 255, 255, .06); }
.sh-panel-group { padding: 4px 0; }
.sh-panel-group + .sh-panel-group { border-top: 1px solid var(--sh-line); }
.sh-error { margin: 6px 12px 8px; font-size: 12px; color: #e0271b; }
body.light .sh .sh-error { color: #e0271b; }

/* Mobile menu */
.sh-burger { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; color: var(--sh-fg); border-radius: var(--sh-radius); }
.sh-burger svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; }
.sh-burger .x { display: none; }
.sh[data-open] .sh-burger .x { display: block; }
.sh[data-open] .sh-burger .bars { display: none; }
.sh-sheet { display: none; }
@media (max-width: 860px) {
  .sh-in { grid-template-columns: auto 1fr; }
  .sh-nav { display: none; }
  .sh-burger { display: inline-flex; }
  .sh-sheet {
    position: fixed; left: 0; right: 0; top: calc(var(--sh-h) + var(--sw-rb, 0px)); bottom: 0; z-index: 39;
    background: var(--sh-bg); padding: 20px clamp(16px, 5vw, 32px) 32px; overflow: auto;
    display: none; flex-direction: column; gap: 4px;
  }
  .sh[data-open] .sh-sheet { display: flex; }
  .sh[data-open] { background: var(--sh-bg); border-bottom-color: var(--sh-line); }
  .sh-sheet a { display: flex; align-items: center; height: 56px; font-size: 24px; font-weight: 600; letter-spacing: -.02em; color: var(--sh-fg); border-bottom: 1px solid var(--sh-line); }
  .sh-sheet a[aria-current="page"] { color: var(--sh-fg-2); }
}
@media (max-width: 400px) { .sh .sh-signin, .sh .sh-account-entry { padding: 0 12px; } .sh-in { gap: 12px; } }

/* 1K lockup caption ("w SIDEWAVE") follows the shell tokens on every surface. */
.sh .k-lockup .k-by { color: var(--sh-fg-3); border-left-color: var(--sh-line); }
.sh .k-lockup .k-by:hover { color: var(--sh-fg); }

/* ── Footer ─────────────────────────────────────────────── */
.sh-foot { position: relative; z-index: 2; background: var(--sh-bg); border-top: 1px solid var(--sh-line); }
.sh-foot-row { max-width: 1440px; margin: 0 auto; padding: 28px clamp(16px, 3.4vw, 48px) clamp(28px, 4vw, 48px); display: flex; justify-content: space-between; align-items: baseline; gap: 24px; font-family: var(--sh-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--sh-fg-3); }
.sh-foot--sea .sh-foot-row { padding-top: 0; padding-bottom: calc(clamp(28px, 4vw, 48px) + env(safe-area-inset-bottom)); padding-left: max(clamp(16px, 3.4vw, 48px), env(safe-area-inset-left)); padding-right: max(clamp(16px, 3.4vw, 48px), env(safe-area-inset-right)); }   /* clear of the home indicator */
.sh-foot-links { display: flex; gap: 4px clamp(18px, 2.4vw, 32px); flex-wrap: wrap; }
.sh-foot-links a { color: var(--sh-fg-2); min-height: 32px; display: inline-flex; align-items: center; transition: color .2s ease; }
.sh-foot-links a:hover { color: var(--sh-fg); }
@media (max-width: 720px) { .sh-foot-row { font-size: 11px; letter-spacing: .06em; } }
@media (prefers-reduced-motion: reduce) { .sh, .sh *, .sh-foot * { transition: none !important; } }