/* Nav (shared by index.html and privacy.html). Paper: Nav 48px desktop, 56px mobile. */
html{scroll-padding-top:64px}
/* Lenis base rules (from lenis.css 1.1.20) */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}

.nav{position:sticky;top:0;z-index:50;background:var(--color-bg);height:48px;border-bottom:1px solid var(--color-border)}
.nav__inner{width:calc(100% - 2 * var(--line-gutter) - 2 * var(--edge));height:100%;margin-inline:auto;padding-inline:0;display:flex;align-items:center;justify-content:space-between}
.nav__left{display:flex;align-items:center;gap:12px}   /* 12 + 10 link padding + ~4 empty in the wordmark = the 26px between nav items */
.nav__brand{display:flex;align-items:center;gap:2px;text-decoration:none;color:var(--color-ink);font-family:var(--font-heading);font-size:var(--text-base);font-weight:var(--weight-bold);letter-spacing:var(--tracking-display);line-height:20px;border-radius:var(--radius-sm)}
.logo__icon{display:block;flex:none;width:18px;height:20px}
.logo__word{display:block;flex:none;width:72px;height:22px;color:var(--color-ink)}   /* lockup sizes: Paper p-K-0 Feedback 2 (owner approved 2026-11-01); wordmark follows the theme ink */
/* Logo animation (owner 2026-11-01, concept A "cards deal, pen signs"): back cards fly in and fan out, the front card slides on, the pen follows the chart line as it draws, then the wordmark letters stroke-trace one by one.
   Every lockup carries .lg (header + footer, both pages). js/nav.js adds .lg-play: header on load, footer when it scrolls into view, and again on every hover (class removed + re-added restarts it).
   `.js .lg` = hidden start state, only when JS runs and motion is allowed, so without JS the logo just shows. */
@media (prefers-reduced-motion:no-preference){
  .js .lg .lg-c1,.js .lg .lg-c2,.js .lg .lg-front,.js .lg .lg-pen,.js .lg .logo__word rect{opacity:0}
  .js .lg polyline,.js .lg .logo__word path{stroke-dasharray:1;stroke-dashoffset:1}
  .lg-play .lg-c1{animation:lg-deal .55s cubic-bezier(.3,1.35,.5,1) both}
  .lg-play .lg-c2{animation:lg-deal .55s .08s cubic-bezier(.3,1.35,.5,1) both}
  .lg-play .lg-front{animation:lg-slide .5s .2s cubic-bezier(.3,1.35,.5,1) both}
  .lg-play polyline{animation:lg-draw .6s .7s linear forwards}
  .lg-play .lg-pen{animation:lg-pen .6s .7s linear both}
  .lg-play .logo__word path{animation:lg-draw .45s calc(1.1s + var(--i) * .08s) cubic-bezier(.45,0,.25,1) forwards}
  .lg-play .logo__word path:nth-child(1){--i:0}.lg-play .logo__word path:nth-child(2){--i:1}.lg-play .logo__word path:nth-child(3){--i:2}.lg-play .logo__word path:nth-child(4){--i:3}.lg-play .logo__word path:nth-child(5){--i:4}.lg-play .logo__word path:nth-child(6){--i:5}.lg-play .logo__word path:nth-child(7){--i:6}
  .lg-play .logo__word rect{animation:lg-fade .3s 1.75s ease-out both}
}
@keyframes lg-deal{from{opacity:0;transform:translateX(34px)}to{opacity:1;transform:none}}
@keyframes lg-slide{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes lg-draw{to{stroke-dashoffset:0}}
@keyframes lg-fade{from{opacity:0}to{opacity:1}}
@keyframes lg-pen{0%{opacity:0;transform:translate(-38px,40px)}8%{opacity:1}36%{transform:translate(-22px,18px)}58%{transform:translate(-10px,30px)}100%{opacity:1;transform:none}}
.nav__links{display:flex;align-items:center;gap:6px;margin:0;padding:0;list-style:none}
.nav__links a{display:block;padding:8px 10px;border-radius:var(--radius-sm);color:var(--color-body);font-size:var(--text-sm);font-weight:var(--weight-medium);letter-spacing:var(--tracking-tight);line-height:var(--leading-label);text-decoration:none;transition:color .12s}
.nav__links a:hover{color:var(--color-ink)}
.nav__right{display:flex;align-items:center;gap:12px}
.nav__cta{position:relative;display:flex;align-items:center;gap:6px;padding:5px 10px;border:1px solid var(--cta-ghost-border);border-radius:var(--radius-sm);background:transparent;color:var(--color-ink);font-family:var(--font-body);font-size:12px;font-weight:var(--weight-medium);letter-spacing:var(--tracking-tight);line-height:15px;text-decoration:none;white-space:nowrap;transition:border-color .12s,background-color .12s}
.nav__cta::before{content:"";flex:none;width:13px;height:13px;background:var(--cta-logo-img) center/contain no-repeat}
.nav__cta::after{content:"";position:absolute;inset:-4px}   /* hit area >= 34px tall, drawing stays 27px */
.nav__cta:hover{border-color:var(--cta-ghost-border-hover)}
.nav__cta:active{background:var(--cta-ghost-bg-hover)}

/* Wall light switch (Paper: "Wall switch"). Dark page = OFF (O half pressed), light page = ON (I half pressed). */
.wsw{position:relative;flex-shrink:0;display:block;width:30px;height:36px;padding:0;border:0;background:none;border-radius:6px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.wsw::after{content:"";position:absolute;inset:-5px -7px}
.wsw__plate{display:flex;width:30px;height:36px;padding:4px;box-sizing:border-box;border-radius:6px;background:linear-gradient(180deg,#262C35 0%,#13171D 100%);box-shadow:#FFFFFF1A 0 0 0 1px inset,#000 0 1px 2px}
.wsw__rocker{display:flex;flex-direction:column;width:22px;height:28px;box-sizing:border-box;border:1px solid #3A4656;border-radius:3px;overflow:clip}
.wsw__half{display:flex;align-items:center;justify-content:center;width:20px;height:13px;flex-shrink:0}
.wsw__half--on{background:linear-gradient(180deg,#323A46 0%,#222831 100%)}
.wsw__half--off{background:linear-gradient(180deg,#0A0D12 0%,#14181F 100%);box-shadow:#00000099 0 2px 3px inset}
.wsw__i{display:block;width:2px;height:7px;border-radius:1px;background:#A8B0C0}
.wsw__o{display:block;width:7px;height:7px;box-sizing:border-box;border:1.5px solid #A8B0C0;border-radius:4px}
:root[data-theme="light"] .wsw__plate{background:linear-gradient(180deg,#F1F2F4 0%,#CDD1D8 100%);box-shadow:#FFFFFF99 0 0 0 1px inset,#00000040 0 1px 2px}
:root[data-theme="light"] .wsw__rocker{border-color:#A3A9B3}
:root[data-theme="light"] .wsw__half--on{background:linear-gradient(180deg,#B4BAC4 0%,#CFD3DA 100%);box-shadow:#00000040 0 2px 3px inset}
:root[data-theme="light"] .wsw__half--off{background:linear-gradient(180deg,#FFFFFF 0%,#E6E9ED 100%);box-shadow:none}
:root[data-theme="light"] .wsw__i{background:#6B7280}
:root[data-theme="light"] .wsw__o{border-color:#6B7280}

.nav a:focus-visible,.wsw:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}

/* Padding pass (owner 2026-11-01, Paper: both column lines run through the header to the top of the page). The nav background would hide them, so it draws the same two lines at the same x. Desktop + tablet; phone later. */
@media (min-width:600px){
  .nav{background-image:var(--lines-img);background-repeat:no-repeat;background-size:1px 100%;background-position:var(--lines-pos)}
}

/* nav content width = line to line (--line-gutter, see base.css / scale90.css): 1080 desktop, 730 tablet tier, 358 phone */
.nav .nav__cta:focus-visible{outline:0;box-shadow:var(--cta-focus)}
@media (max-width:599px){
  .nav{height:56px}
  .nav__inner{width:calc(100% - 32px)}
  .nav__links{display:none}
  .logo__icon{width:16px;height:18px}
  .logo__word{width:65px;height:20px}
  .nav__right{gap:10px}
  /* phone nav (Paper 2026-10-30): smaller switch, logo + "Add" button */
  .wsw,.wsw__plate{width:22px;height:27px}
  .wsw__plate{padding:3px;border-radius:6px}
  .wsw__rocker{width:16px;height:21px}
  .wsw__half{width:14px;height:9.5px}
  .wsw__i{width:2px;height:5px}
  .wsw__o{width:5px;height:5px}
  .nav__cta{height:28px;padding:0 9px;gap:5px;border-radius:7px;box-sizing:border-box}
  .nav__cta::before{order:2}   /* phone: "Add to" + Chrome logo after it (Paper option B as edited by owner) */
  .nav__cta-rest{display:none}
}
/* desktop header (Paper 2026-10-30, option C, owner pick in c-r6uk1p): bar 64, logo 32, Scout 17, links 14, button 14. Tablet and phone unchanged. */
@media (min-width:1200px){
  html{scroll-padding-top:80px}
  .nav{height:64px}
  .nav__left{gap:16px}   /* 16 + 14 padding + ~4 = the 34px between nav items */
  .nav__links{gap:2px}   /* 14 + 2 + 14 = 30px between nav items, same as logo to first link (Paper 2026-11-01) */
  .nav__links a{padding:10px 14px;font-size:14px;line-height:17px}
  .nav__right{gap:16px}
  .nav__cta{gap:8px;padding:9px 16px;border-radius:6px;font-size:14px;line-height:17px}
  .nav__cta::before{width:16px;height:16px}
}
}