/* ════════════════════════════════════════════════════════════════════════
   The site header and footer — the look half of views/site/header.html and
   views/site/footer.html, which lib/shared/site-chrome.js writes into every
   marketing page. James 2026-09-22 designed this bar for the desktop landing
   (a plain bar in poke.com's shape); on 2026-09-24 it became the one bar for
   the whole site.

   Self-contained on purpose: every page has its own fonts and ink colours, so
   the tokens the bar and footer use are set on the bar and footer themselves,
   not on :root. A page's own --ink is untouched.

   Two states for the bar:
     .kd-nav            clear and fixed over a hero; the homepage's
                        landing-day.js adds .is-scrolled as the page moves
     .kd-nav.is-static  every other page: sticky, always frosted, in the
                        flow, so the page needs no top padding for it
   ════════════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@400..600&display=swap');
@import url('https://cdn.jsdelivr.net/npm/@fontsource/open-runde@5.3.0/latin-400.css');
@import url('https://cdn.jsdelivr.net/npm/@fontsource/open-runde@5.3.0/latin-500.css');
@import url('https://cdn.jsdelivr.net/npm/@fontsource/open-runde@5.3.0/latin-600.css');

.kd-nav, .kd-footer {
    --paper: #fbfaf7;
    --ink: #111114;
    --ink-2: rgba(17, 17, 20, .64);
    --ink-3: rgba(17, 17, 20, .45);
    --display: 'Crimson Pro', Georgia, 'Times New Roman', serif;
    --sans: 'Open Runde', 'Inter', system-ui, sans-serif;
    --gutter: clamp(20px, 5vw, 72px);
    --ease: cubic-bezier(.22, 1, .36, 1);
    --frost: rgba(251, 250, 247, .72);
    --frost-line: rgba(17, 17, 20, .07);
    --panel: rgba(251, 250, 247, .96);
    --hover: rgba(17, 17, 20, .045);
    font-family: var(--sans);
    color: var(--ink);
    box-sizing: border-box;
}
.kd-nav *, .kd-footer * { box-sizing: border-box; }
.kd-nav a, .kd-footer a { text-decoration: none; }
.kd-nav a:not(.kd-btn), .kd-footer a { color: inherit; }

/* ── Buttons: tactile, as on the landing ──────────────────────────────── */
.kd-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 20px; border: 0; border-radius: 14px; font: 500 16px/1 var(--sans); color: #fff; white-space: nowrap; cursor: pointer;
    background: linear-gradient(#3a3a3a 0%, #3a3a3a 52%, #2c2c2c 80%, #1f1f1f 100%);
    box-shadow: 0 .5px 1px rgba(0, 0, 0, .08), 0 1px 3px rgba(0, 0, 0, .1), 0 4px 12px rgba(0, 0, 0, .08), inset 0 0 0 1.25px #353535, inset 0 0 12px rgba(255, 255, 255, .1);
    transition: transform .18s var(--ease), filter .2s ease; }
.kd-btn:hover { filter: brightness(1.14); }
.kd-btn:active { transform: translateY(1px) scale(.985); }
.kd-btn.is-light { color: #1c1c1c;
    background: linear-gradient(#edecea 0%, #edecea 65%, #dcdcdc 85%, #c4c4c4 100%);
    box-shadow: 0 .5px 1px rgba(0, 0, 0, .04), 0 1px 3px rgba(0, 0, 0, .06), 0 4px 12px rgba(0, 0, 0, .04), inset 0 0 0 1.25px #c9c7c4, inset 0 0 12px #fff; }
.kd-btn.is-light:hover { filter: brightness(1.03); }
.kd-btn.is-sm { height: 38px; padding: 0 16px; border-radius: 12px; font-size: 15px; }

/* ── The bar ──────────────────────────────────────────────────────────── */
.kd-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: 72px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 var(--gutter); margin: 0; transition: background-color .35s ease, box-shadow .35s ease, color .5s ease, transform .45s var(--ease); }
.kd-nav.is-scrolled, .kd-nav.is-static { background: var(--frost); -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6); box-shadow: 0 1px 0 var(--frost-line); }
.kd-nav.is-static { position: sticky; }
.kd-brand { display: inline-flex; align-items: center; gap: 9px; justify-self: start; }
.kd-brand img { width: 28px; height: 28px; transition: filter .5s ease; }
.kd-brand span { font-family: var(--display); font-size: 25px; font-weight: 600; letter-spacing: -.025em; line-height: 1; }
.kd-links { display: flex; align-items: center; gap: 4px; }
.kd-links > a, .kd-dd-trigger { display: inline-flex; align-items: center; gap: 5px; padding: 8px 14px; border: 0; border-radius: 10px; background: none; font: 500 16px/1 var(--sans); color: inherit; opacity: .85; cursor: pointer; transition: opacity .2s; }
.kd-links > a:hover, .kd-links > a[aria-current], .kd-dd:hover .kd-dd-trigger, .kd-dd:focus-within .kd-dd-trigger { opacity: 1; }
.kd-chev { width: 13px; height: 13px; opacity: .6; transition: transform .22s ease; }
.kd-dd { position: relative; }
.kd-dd:hover .kd-chev, .kd-dd:focus-within .kd-chev { transform: rotate(180deg); }
/* The menu: a soft paper panel with an icon, a title and one line per item,
   in poke.com's Product menu shape. Opens on hover and on keyboard focus. */
.kd-dd-panel { position: absolute; top: 100%; left: 50%; z-index: 60; margin-top: 10px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 8px; width: 560px; padding: 10px; border-radius: 22px; background: var(--panel); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); box-shadow: 0 0 0 1px rgba(17, 17, 20, .06), 0 24px 60px -24px rgba(17, 17, 20, .35); color: var(--ink); opacity: 0; visibility: hidden; transform: translate(-50%, 8px); transition: opacity .2s ease, transform .2s ease, visibility .2s; }
.kd-dd-panel::before { content: ''; position: absolute; bottom: 100%; left: 0; right: 0; height: 14px; }
.kd-dd:hover .kd-dd-panel, .kd-dd:focus-within .kd-dd-panel { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.kd-dd-col { display: flex; flex-direction: column; gap: 2px; }
.kd-dd-item { display: flex; align-items: flex-start; gap: 14px; padding: 12px 14px; border-radius: 14px; transition: background-color .15s; }
.kd-dd-item:hover { background: var(--hover); }
.kd-dd-item svg { flex: none; width: 22px; height: 22px; margin-top: 1px; color: var(--ink-2); }
.kd-dd-item span { display: flex; flex-direction: column; gap: 3px; }
.kd-dd-item b { font-size: 16px; font-weight: 500; line-height: 1.2; }
.kd-dd-item small { font-size: 14px; line-height: 1.3; color: var(--ink-3); }
.kd-nav-end { display: flex; align-items: center; gap: 8px; justify-self: end; }
.kd-login { padding: 8px 12px; font-size: 15px; font-weight: 500; }

/* The menu button and the list it opens, phones and narrow windows only. */
.kd-burger { display: none; width: 40px; height: 40px; margin-left: 2px; padding: 0; border: 0; border-radius: 12px; background: none; color: inherit; cursor: pointer; }
.kd-burger:hover { background: var(--hover); }
.kd-burger span, .kd-burger span::before, .kd-burger span::after { display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .22s ease, opacity .22s ease; }
.kd-burger span { position: relative; margin: 0 auto; }
.kd-burger span::before, .kd-burger span::after { content: ''; position: absolute; left: 0; }
.kd-burger span::before { top: -6px; }
.kd-burger span::after { top: 6px; }
.kd-nav.is-open .kd-burger span { background: transparent; }
.kd-nav.is-open .kd-burger span::before { transform: translateY(6px) rotate(45deg); }
.kd-nav.is-open .kd-burger span::after { transform: translateY(-6px) rotate(-45deg); }
.kd-menu { position: absolute; top: 100%; left: 0; right: 0; z-index: 60; display: flex; flex-direction: column; padding: 8px var(--gutter) 20px; background: var(--paper); box-shadow: 0 1px 0 var(--frost-line), 0 24px 60px -24px rgba(17, 17, 20, .35); }
.kd-menu[hidden] { display: none; }
.kd-menu > a { padding: 14px 4px; border-bottom: 1px solid var(--frost-line); font-size: 18px; font-weight: 500; }
.kd-menu > a[aria-current] { color: var(--ink-2); }
.kd-menu-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }

/* ── The footer ───────────────────────────────────────────────────────── */
.kd-footer { padding: 72px var(--gutter) 44px; }
.kd-footer-inner { display: flex; align-items: flex-start; justify-content: space-between; gap: 64px; max-width: 1240px; margin: 0 auto; }
.kd-footer-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 30px; }
.kd-footer-blurb { max-width: 340px; margin: -8px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.kf-status { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; line-height: 1; color: var(--ink-2); }
.kf-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); }
.kd-footer-cols { display: flex; gap: 88px; }
.kd-footer-col { display: flex; flex-direction: column; gap: 18px; }
.kd-footer-col h3 { margin: 0; font-family: var(--display); font-size: 18px; font-weight: 600; line-height: 1; letter-spacing: -.015em; }
.kd-footer-col a { font-size: 14px; line-height: 1; color: var(--ink-2); transition: color .2s; }
.kd-footer-col a:hover { color: var(--ink); }
.kd-footer-meta { max-width: 1240px; margin: 64px auto 0; padding-top: 22px; border-top: 1px solid rgba(15, 23, 42, .14); font-size: 13px; color: var(--ink-2); }

/* ── Dark pages ───────────────────────────────────────────────────────────
   Pages with a dark theme set data-theme="dark" on <html>; the bar and the
   footer follow it. Pages that are light only never set it. */
html[data-theme="dark"] .kd-nav, html[data-theme="dark"] .kd-footer {
    --paper: #131316;
    --ink: #f5f4f0;
    --ink-2: rgba(245, 244, 240, .64);
    --ink-3: rgba(245, 244, 240, .45);
    --frost: rgba(19, 19, 22, .72);
    --frost-line: rgba(255, 255, 255, .08);
    --panel: rgba(24, 24, 28, .97);
    --hover: rgba(255, 255, 255, .06);
}
html[data-theme="dark"] .kd-brand img { filter: invert(1); }
html[data-theme="dark"] .kd-footer-meta { border-top-color: rgba(255, 255, 255, .12); }
html[data-theme="dark"] .kd-btn { color: #1c1c1c; background: linear-gradient(#f4f3f1 0%, #edecea 65%, #d9d9d9 100%); box-shadow: inset 0 0 0 1.25px #c9c7c4, inset 0 0 12px #fff; }
html[data-theme="dark"] .kd-btn.is-light { color: #f5f4f0; background: linear-gradient(#3a3a3a 0%, #3a3a3a 52%, #2c2c2c 80%, #1f1f1f 100%); box-shadow: inset 0 0 0 1.25px #353535; }

/* ── In the app ───────────────────────────────────────────────────────────
   Inside the app shell's frame or the iOS WebView (life-shell.js and
   connections.html put khio-shelled on <html>) every link here is a marketing
   page with no way back, so the bar and footer stay out of the way. */
html.khio-shelled .kd-nav, html.khio-shelled .kd-footer { display: none; }

/* ── Narrow windows and phones ────────────────────────────────────────── */
@media (max-width: 1080px) {
    .kd-links { display: none; }
    .kd-nav { grid-template-columns: 1fr auto; }
    .kd-burger { display: inline-flex; align-items: center; justify-content: center; }
}
@media (max-width: 900px) {
    .kd-footer-inner { flex-direction: column; }
    .kd-footer-cols { flex-wrap: wrap; gap: 48px; }
}
@media (max-width: 640px) {
    .kd-login { display: none; }
    .kd-nav { height: 64px; }
}
@media (prefers-reduced-motion: reduce) {
    .kd-nav, .kd-dd-panel, .kd-burger span, .kd-burger span::before, .kd-burger span::after { transition: none; }
}