/* =========================================================
   KZ2 shell — header, bottom nav (mobile), left rail (desktop),
   persistent capture button, user menu, skip link.

   Self-contained: does not require style.css. find/house/handoff
   and any future KZ2 page load this file alone for their chrome.
   ========================================================= */

:root {
  /* Brand palette — same values as style.css's :root, redeclared here
     so this file has no dependency on the legacy stylesheet. */
  --kz2-forest:        #1d3a2e;
  --kz2-forest-dark:   #111f18;
  --kz2-clay:          #c96a2a;
  --kz2-clay-light:    #e07a35;
  /* --kz2-clay-dark: for clay-as-text on light backgrounds only. Plain
     --kz2-clay measures ~3.5:1 on --kz2-off-white at nav-label size (11.52px)
     -- fails 4.5:1. This variant measures ~4.9:1. Never use for fills/borders,
     those already pass against off-white at the sizes they're used. */
  --kz2-clay-dark:     #a85620;
  --kz2-off-white:     #faf8f4;
  --kz2-warm-gray:     #f0ede7;
  --kz2-text:          #1d2520;
  --kz2-muted:         #686f64;
  --kz2-border:        #d8d5cf;
  --kz2-font-sans:     'Poppins', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* Nav text on --kz2-forest-dark. --kz2-nav-text-dim is alpha 0.62,
     computed to ~7.2:1 against #111f18 (WCAG AA needs 4.5:1) — the
     previous rgba(255,255,255,0.4) pattern elsewhere in the app is
     ~3.8:1 and does not pass; do not copy that value here. */
  --kz2-nav-text:        rgba(255,255,255,0.92);
  --kz2-nav-text-dim:    rgba(255,255,255,0.62);
  --kz2-nav-text-active: #ffffff;

  --kz2-space-1: 4px;
  --kz2-space-2: 8px;
  --kz2-space-3: 12px;
  --kz2-space-4: 16px;
  --kz2-space-5: 24px;
  --kz2-space-6: 32px;

  --kz2-header-h:      56px;
  --kz2-bottom-nav-h:  60px;
  --kz2-rail-w:        84px;
  --kz2-capture-size:  56px;

  --kz2-z-header:   100;
  --kz2-z-nav:      100;
  --kz2-z-capture:  110;
  --kz2-z-menu:     120;
  --kz2-z-skiplink: 200;

  --kz2-radius-sm:   3px;
  --kz2-radius-md:   8px;
  --kz2-radius-pill: 999px;

  --kz2-font-sm:   0.72rem;
  --kz2-font-base: 0.88rem;
  --kz2-font-md:   0.95rem;
  --kz2-font-lg:   1.1rem;

  --kz2-breakpoint: 760px;
}

/* Reset — these pages don't load style.css, so this file owns it. */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--kz2-off-white); }

/* KZ2 F3: no :focus-visible rule existed anywhere in the kz2-* system --
   same fix as style.css's, kept in sync. Keyboard focus only. */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible,
select:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--kz2-clay);
  outline-offset: 2px;
}

/* ── Skip link ─────────────────────────────────────────── */

.kz2-skip-link {
  position: absolute;
  top: -100%;
  left: 8px;
  z-index: var(--kz2-z-skiplink);
  background: var(--kz2-clay-dark); /* KZ2 F3: plain --kz2-clay was 3.76:1 -- fails 4.5:1 */
  color: #fff;
  font-family: var(--kz2-font-sans);
  font-size: var(--kz2-font-base);
  font-weight: 600;
  padding: 10px 16px;
  border-radius: var(--kz2-radius-sm);
  text-decoration: none;
  transition: top 0.15s;
}

.kz2-skip-link:focus {
  top: 8px;
}

/* ── Page scaffolding ──────────────────────────────────── */

.kz2-app {
  min-height: 100vh;
  padding-top: var(--kz2-header-h);
  padding-bottom: var(--kz2-bottom-nav-h);
}

@media (min-width: 760px) {
  .kz2-app {
    padding-left: var(--kz2-rail-w);
    padding-bottom: 0;
  }
}

.kz2-main {
  font-family: var(--kz2-font-sans);
  color: var(--kz2-text);
  padding: var(--kz2-space-5) var(--kz2-space-4);
}

@media (min-width: 760px) {
  .kz2-main {
    padding: var(--kz2-space-6) var(--kz2-space-6);
  }
}

/* ── Header — single row, every breakpoint, no wrap ───────
   Two flex children only (wordmark+page on the left, user menu
   on the right) so there is nothing in the middle that can force
   a second line; the page label truncates instead of wrapping. */

.kz2-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--kz2-header-h);
  z-index: var(--kz2-z-header);
  background: var(--kz2-forest-dark);
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--kz2-space-2);
  padding: 0 var(--kz2-space-4);
  font-family: var(--kz2-font-sans);
}

@media (min-width: 760px) {
  .kz2-header { left: var(--kz2-rail-w); }
}

.kz2-header-left {
  display: flex;
  align-items: center;
  gap: var(--kz2-space-3);
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
}

.kz2-wordmark {
  flex-shrink: 0;
  font-size: var(--kz2-font-md);
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
}

.kz2-header-page {
  flex-shrink: 1;
  min-width: 0;
  font-size: var(--kz2-font-sm);
  color: var(--kz2-nav-text-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kz2-header-right {
  flex-shrink: 0;
  position: relative;
  display: flex;
  align-items: center;
}

/* KZ2 connectivity audit — the shell (header/rail/bottom-nav/capture button)
   used to mount unconditionally and sat, fully clickable, behind the login
   gate overlay. A signed-out visitor could open the account menu or tap
   Household/Handoff and land on that page's own gate instead of anything
   real. Hide the chrome outright while the gate is showing; :has() already
   does this same job for kz2-toast/kz2-undo bottom-offset elsewhere. */
body:has(#kz2-login-screen:not([hidden])) .kz2-header-right,
body:has(#kz2-login-screen:not([hidden])) .kz2-bottom-nav,
body:has(#kz2-login-screen:not([hidden])) .kz2-rail {
  display: none;
}

.kz2-user-btn {
  flex-shrink: 0;
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  border: none;
  color: #fff;
  font-family: var(--kz2-font-sans);
  font-size: var(--kz2-font-base);
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
/* KZ2 F3: 32px visible button, invisible 44px hit-area centered on it */
.kz2-user-btn::before { content: ''; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }

.kz2-user-btn:hover { background: rgba(255,255,255,0.2); }

.kz2-user-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: var(--kz2-z-menu);
  background: #fff;
  border: 1px solid var(--kz2-border);
  border-radius: var(--kz2-radius-md);
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  min-width: 200px;
  overflow: hidden;
}

.kz2-user-menu[hidden] { display: none; }

.kz2-user-email {
  padding: var(--kz2-space-3) var(--kz2-space-4);
  font-size: var(--kz2-font-sm);
  color: var(--kz2-muted);
  border-bottom: 1px solid var(--kz2-border);
  word-break: break-all;
}

.kz2-user-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: var(--kz2-space-3) var(--kz2-space-4);
  font-family: var(--kz2-font-sans);
  font-size: var(--kz2-font-base);
  color: var(--kz2-text);
  cursor: pointer;
  text-decoration: none;
}

.kz2-user-menu-item:hover { background: var(--kz2-warm-gray); }

/* ── Nav items — shared between bottom nav and rail ───────── */

.kz2-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-decoration: none;
  color: var(--kz2-muted);
  font-family: var(--kz2-font-sans);
  font-size: var(--kz2-font-sm);
  font-weight: 600;
}

.kz2-nav-item-icon {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kz2-nav-item.is-active { color: var(--kz2-clay-dark); } /* KZ2 F3: plain --kz2-clay was ~3.5:1 at this size */

/* ── Bottom nav — under 760px ──────────────────────────── */

.kz2-bottom-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: calc(var(--kz2-bottom-nav-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  z-index: var(--kz2-z-nav);
  background: var(--kz2-off-white);
  border-top: 1px solid var(--kz2-border);
  display: flex;
  box-sizing: border-box;
}

.kz2-bottom-nav .kz2-nav-item { flex: 1; }

@media (min-width: 760px) {
  .kz2-bottom-nav { display: none; }
}

/* ── Left rail — 760px and up ──────────────────────────── */

.kz2-rail {
  display: none;
}

@media (min-width: 760px) {
  .kz2-rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: var(--kz2-rail-w);
    background: var(--kz2-forest-dark);
    padding-top: calc(var(--kz2-header-h) + var(--kz2-space-5));
    gap: var(--kz2-space-2);
    z-index: var(--kz2-z-nav);
  }

  .kz2-rail .kz2-nav-item {
    width: 100%;
    padding: var(--kz2-space-3) 0;
    color: var(--kz2-nav-text-dim);
  }

  .kz2-rail .kz2-nav-item.is-active { color: var(--kz2-nav-text-active); }

  .kz2-rail .kz2-capture-btn {
    position: static;
    margin-bottom: var(--kz2-space-4);
  }
}

/* ── Capture button — floating on mobile, in the rail on desktop ── */

.kz2-capture-btn {
  position: fixed;
  right: calc(var(--kz2-space-4) + env(safe-area-inset-right, 0px));
  bottom: calc(var(--kz2-bottom-nav-h) + var(--kz2-space-3) + env(safe-area-inset-bottom, 0px));
  width: var(--kz2-capture-size);
  height: var(--kz2-capture-size);
  border-radius: 50%;
  background: var(--kz2-clay);
  color: #fff;
  border: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  z-index: var(--kz2-z-capture);
  transition: background 0.15s;
}

.kz2-capture-btn:hover { background: var(--kz2-clay-light); }

@media (min-width: 760px) {
  .kz2-capture-btn {
    position: static;
    width: 48px;
    height: 48px;
    font-size: 1.3rem;
    box-shadow: none;
  }
}