/* Shared header and footer of every public page (Mina's batch 1: B1-04, B1-05, B1-06; 2026-10-10).
   The markup is stamped into each page between <!--chrome:...--> markers by scripts/stamp_site_chrome.py from one
   template (scripts/chrome/); tests/test_site_chrome.py keeps every copy identical.
   Tokens only (tokens.css), no new colours. Clicks must feel instant (B1-09): nothing here animates, and nothing
   changes size once painted (the logged-in swap is decided in <head> before first paint). */

html{scroll-padding-top:84px;}
.sh-skip{position:absolute;left:12px;top:-60px;z-index:60;background:var(--panel-2);color:var(--text-accent);border:1px solid var(--edge-accent);
  border-radius:999px;padding:10px 16px;font-size:14px;font-weight:600;text-decoration:none;}
.sh-skip:focus{top:10px;}

/* ---- header ---- */
.site-header{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--ink) 66%,transparent);
  -webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid transparent;font-family:var(--font-body);}
.site-header.scrolled{border-bottom-color:var(--line-soft);}
.sh-in{position:relative;max-width:1200px;margin:0 auto;min-height:68px;display:flex;align-items:center;gap:4px;
  padding:env(safe-area-inset-top) max(20px,env(safe-area-inset-right)) 0 max(20px,env(safe-area-inset-left));}
.sh-brand{display:flex;align-items:center;gap:10px;min-height:44px;margin-right:12px;text-decoration:none;color:var(--paper);}
.sh-brand img{display:block;flex:none;}
.sh-brand b{font-family:var(--font-display);font-weight:750;font-size:1rem;letter-spacing:.07em;line-height:1;}
.sh-nav{display:flex;align-items:center;gap:2px;}
.sh-actions{display:flex;align-items:center;gap:2px;margin-left:auto;}
.sh-link{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 12px;border-radius:999px;border:0;background:none;
  font:inherit;font-size:14.5px;font-weight:550;line-height:1;white-space:nowrap;color:var(--paper-dim);text-decoration:none;cursor:pointer;}
.sh-link:hover,.sh-link[aria-expanded="true"]{color:var(--paper);}
.sh-link[aria-current="page"]{color:var(--paper);position:relative;}
.sh-link[aria-current="page"]::after{content:"";position:absolute;left:12px;right:12px;bottom:3px;height:2px;border-radius:2px;background:var(--text-accent);}
.sh-chev{flex:none;stroke:currentColor;fill:none;}
.sh-tools-btn[aria-expanded="true"] .sh-chev{transform:rotate(180deg);}

/* Tools menu: same surface as the app's dropdown lists (.te-pop). */
.sh-tools{position:relative;}
.sh-tools-panel{display:none;position:absolute;left:0;top:calc(100% + 8px);z-index:50;width:min(480px,calc(100vw - 32px));
  background:var(--panel);border:1px solid var(--line-soft);border-radius:var(--r-panel);box-shadow:var(--pop-shadow);padding:8px;
  grid-template-columns:1fr 1fr;gap:4px 8px;}
.sh-tools.open .sh-tools-panel{display:grid;}
.sh-group{min-width:0;}
.sh-group-l{margin:0;padding:8px 10px 4px;font-size:12px;font-weight:650;color:var(--paper-faint);letter-spacing:.01em;}
.sh-group ul{list-style:none;margin:0;padding:0;}
.sh-group li{margin:0;max-width:none;}
.sh-tools-panel a{display:flex;align-items:center;min-height:40px;padding:0 10px;border-radius:8px;font-size:14.5px;font-weight:550;color:var(--paper-dim);text-decoration:none;white-space:nowrap;}
.sh-tools-panel a:hover{background:var(--panel-2);color:var(--paper);}
.sh-tools-panel .sh-open-app{grid-column:1 / -1;margin-top:4px;border-top:1px solid var(--line-soft);border-radius:0 0 8px 8px;padding-top:2px;height:46px;color:var(--text-accent);font-weight:600;}

.sh-theme{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin:0 2px;border-radius:999px;
  border:1px solid var(--line-soft);background:none;color:var(--paper-dim);cursor:pointer;}
.sh-theme:hover{color:var(--paper);border-color:var(--edge-accent);}
:root[data-theme="light"] .sh-theme .i-sun,:root:not([data-theme="light"]) .sh-theme .i-moon{display:none;}

.sh-cta{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 18px;margin-left:8px;border-radius:999px;
  border:1px solid transparent;background:var(--btn-primary-fill);box-shadow:var(--btn-primary-shadow);color:var(--on-accent);
  font-size:14px;font-weight:600;line-height:1;white-space:nowrap;text-decoration:none;}
.sh-cta:hover{filter:brightness(1.07);color:var(--on-accent);}
.sh-cta:active{transform:scale(.97);}
.sh-cta-app{display:none;}
/* Signed in (a saved sign-in key, set in <head> before first paint): one filled "Open the app" instead of Log in + Try it free (2026-10-11: "Open app" read as a label for the website itself). */
html[data-session] .sh-login,html[data-session] .sh-login-panel,html[data-session] .sh-cta-guest{display:none;}
html[data-session] .sh-cta-app{display:inline-flex;}
.sh-login-panel,.sh-menu{display:none;}
.sh-menu{align-items:center;justify-content:center;gap:8px;min-height:44px;margin-left:2px;padding:0 12px;border-radius:999px;border:1px solid var(--line-soft);
  background:none;color:var(--paper);font:inherit;font-size:14px;font-weight:600;cursor:pointer;}
.sh-menu:hover{border-color:var(--edge-accent);}
.sh-menu .i-x,.sh-menu[aria-expanded="true"] .i-bars{display:none;}
.sh-menu[aria-expanded="true"] .i-x{display:block;}
.sh-menu svg{stroke:currentColor;fill:none;}
.sh-link:focus-visible,.sh-tools-panel a:focus-visible,.sh-theme:focus-visible,.sh-menu:focus-visible,.sh-cta:focus-visible,.sh-brand:focus-visible{outline:2px solid var(--text-accent);outline-offset:2px;border-radius:999px;}
.sh-tools-panel a:focus-visible{border-radius:8px;outline-offset:-2px;}

/* Without script the Tools menu is just a plain list of links. */
html:not(.js) .sh-tools-btn{display:none;}
html:not(.js) .sh-tools-panel{display:grid;position:static;box-shadow:none;border:0;background:none;padding:0;width:auto;grid-template-columns:repeat(2,auto);}

@media (pointer:coarse){ .sh-link{min-height:44px;} .sh-cta{min-height:44px;} }
@media (max-width:640px){
  .sh-in{min-height:60px;}
  .sh-brand{margin-right:auto;min-width:44px;}   /* the name is hidden under 430px: the logo alone still needs a 44px target */
  .sh-actions{margin-left:0;}
  .sh-login{display:none;}
  .sh-menu{display:inline-flex;}
  .sh-cta{margin-left:4px;padding:0 14px;min-height:44px;}
  /* The menu panel: under the bar, not a dialog; Tools list, Pricing, About, Log in. */
  .sh-nav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;max-height:calc(100dvh - 60px);overflow-y:auto;
    background:var(--rail);border-bottom:1px solid var(--line-soft);box-shadow:var(--pop-shadow);padding:6px max(16px,env(safe-area-inset-left)) 14px;}
  .site-header.menu-open .sh-nav{display:flex;}
  .sh-nav .sh-link{min-height:48px;border-radius:0;padding:0 4px;font-size:16px;color:var(--paper);border-top:1px solid var(--line-soft);}
  .sh-login-panel{display:inline-flex;}
  .sh-tools-btn{display:none;}
  .sh-tools-panel{display:block;position:static;width:auto;border:0;box-shadow:none;background:none;padding:0;}
  .sh-group-l{padding:12px 4px 2px;}
  .sh-tools-panel a{min-height:48px;padding:0 4px;border-radius:0;font-size:16px;color:var(--paper);}
  .sh-tools-panel .sh-open-app{margin-top:0;border-top:0;height:auto;border-radius:0;padding-top:0;}
  .sh-link[aria-current="page"]::after{left:4px;right:auto;width:28px;bottom:8px;}
  .sh-theme{margin:0 0 0 4px;}
  html:not(.js) .sh-nav{display:flex;position:static;max-height:none;box-shadow:none;}
  html:not(.js) .sh-menu{display:none;}
}
/* Just above the phone layout the bar is tight: 641px used to scroll sideways by up to 25px. */
@media (min-width:641px) and (max-width:700px){ .sh-link{padding:0 8px;} .sh-brand{margin-right:4px;} .sh-in{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right));} }
@media (max-width:430px){ .sh-brand b{display:none;} }
@media (max-width:360px){ .sh-menu{font-size:0;gap:0;padding:0 11px;min-width:44px;} .sh-cta{padding:0 11px;} .sh-in{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right));} }

/* ---- footer ---- */
.site-footer{border-top:1px solid var(--line-soft);font-family:var(--font-body);}
.sf-in{max-width:1200px;margin:0 auto;display:grid;gap:12px;
  padding:26px max(20px,env(safe-area-inset-right)) calc(36px + env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));}
.sf-links{display:flex;flex-wrap:wrap;gap:0 22px;}
.sf-links a{display:inline-flex;align-items:center;min-height:36px;font-size:14px;color:var(--paper-dim);text-decoration:none;}
.sf-links a:hover{color:var(--paper);text-decoration:underline;}
.sf-note{margin:0;max-width:84ch;font-size:13px;line-height:1.6;color:var(--paper-dim);}
.sf-note a{color:var(--text-accent);}
.sf-copy{color:var(--paper-faint);}
@media (pointer:coarse){ .sf-links a{min-height:44px;} }
@media (max-width:640px){ .sf-in{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right));} }
@media print{ .site-header,.sh-skip{display:none;} }

/* iPhone Safari zooms the page in when a field with text under 16px gets focus, which reads as a glitch (Mina's sign-up report;
   iPhone sweep S4-3, 2026-10-12). On touch screens every field shows 16px text; desktop is unchanged. */
@media (pointer: coarse){
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="button"]):not([type="submit"]), select, textarea{font-size:16px !important;}
  /* Account pages: 44 px to press (phone test P1-5). "html" outranks each page's own inline sizes; links inside sentences stay inline. */
  html .pw-toggle{min-height:44px;}
  html .label-row a,html .label-row button,html .auth-link,html .auth-switch:not([data-help-line]) a{min-height:44px;display:inline-flex;align-items:center;}
}