:root{
  --bg: #191512;
  --bg-2: #211a15;
  --surface-1: #241b14;
  --surface-2: #2c2119;
  --surface-3: #362818;
  --text-primary: #f2e9dc;
  --text-body: #d6cbba;
  --text-secondary: #c0b2a0;
  --text-muted: #a4957f;
  --accent: #e3a978;
  --accent-strong: #d2915f;
  --accent-tint: rgba(227,169,120,0.14);
  --glow: #f5cd8a;
  --glow-tint: rgba(245,205,138,0.14);
  --border: rgba(255,240,225,0.10);
  --border-strong: rgba(255,240,225,0.18);
  --btn-ink: #2a1b0f;
  --halo: #3a2c1c;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --font-display: 'Fraunces', 'Fraunces Fallback', serif;
  --font-body: 'Inter', 'Inter Fallback', -apple-system, sans-serif;
  color-scheme: dark;
}

/* Metric-matched fallback for Inter (body text). Fixes the 2026-09-12
   font-swap CLS regression: fixed line-height on headings/labels doesn't stop
   multi-line <p> body copy re-wrapping into a different number of lines when
   Inter swaps in over the fallback, because the fallback's glyph widths don't
   match Inter's. This gives Arial the same box metrics as Inter (size-adjust
   scales its width to Inter's average character width; the overrides match
   Inter's own ascent/descent/line-gap) so text occupies the same space before
   and after the swap and doesn't re-wrap. Values computed from exact OS/2
   metrics (Inter vs Arial, capsizecss/metrics dataset) — not estimated. */
/* 2026-10-16 (test-web M3, CLS 0.115 on the dark-mornings page): metric-matched Georgia for Fraunces, from the capsize metrics
   (Fraunces upm 2000, ascent 1956, descent 510, xWidthAvg 938; Georgia upm 2048, xWidthAvg 913): size-adjust 105.20%. */
@font-face{
  font-family: 'Fraunces Fallback';
  src: local('Georgia'), local('Georgia Regular');
  size-adjust: 105.2%;
  ascent-override: 92.97%;
  descent-override: 24.24%;
  line-gap-override: 0%;
}
@font-face{
  font-family: 'Inter Fallback';
  src: local('Arial'), local('Helvetica Neue'), local('Helvetica'), local('Arimo');
  size-adjust: 107.12%;
  ascent-override: 90.43%;
  descent-override: 22.52%;
  line-gap-override: 0%;
}

/* "Ember" palette — warm charcoal-brown ground, clay accent, warm-gold
   highlight, cream ink. Applied via <body class="theme-ember">, now used
   site-wide (including the calculator on index.html) as the studio's single
   theme. Colour tokens only — layout, type and spacing are unchanged.
   Reference: marketing/palette-mockup.html. */
/* R2 E3 (2026-11-12): the Ember values are now the :root tokens; the old navy :root palette and this override are gone. */

*{ box-sizing:border-box; }

body{
  margin:0;
  min-height:100vh;
  background:
    radial-gradient(ellipse 900px 500px at 50% -10%, var(--halo) 0%, transparent 60%),
    var(--bg);
  font-family: var(--font-body);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
}

a{ color: var(--accent); }
a:focus-visible, button:focus-visible, summary:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Site header + top nav (2026-09-13 redesign). Slim by design — a compact
   single row on desktop, logo + toggle on mobile — so it never pushes the
   homepage calculator below the fold. position:relative + z-index so the
   header's own stacking context (dropdown included) always paints above any
   later position:relative section regardless of DOM order (see patterns.md
   standing lesson on mobile-nav stacking). */
.site-header{
  max-width: 680px;
  margin: 0 auto;
  padding: 12px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  flex-wrap: wrap;
  position: relative;
  z-index: 20;
}
.site-header .logo{
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
  line-height: 1.2;
  color: var(--text-primary);
  text-decoration:none;
  flex: none;
}
.site-header .cta{
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  color: var(--btn-ink);
  background: var(--accent);
  padding: 0 14px;
  /* Owner 2026-10-08: smaller painted area; transparent top/bottom border keeps the 44 px tap box */
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  background-clip: padding-box;
  border-radius: calc(var(--radius-sm) + 5px); /* visible fill keeps the 10 px corner */
  text-decoration:none;
  white-space:nowrap;
  display:none;
}
.site-header .cta:hover{ background: var(--accent-strong); }

.main-nav{ display:none; align-items:center; gap:18px; order:1; flex:1; justify-content:flex-end; }
.main-nav a{
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px;
  padding: 6px 2px;
  text-decoration:none;
}
.main-nav a:hover, .main-nav a.active{ color: var(--accent); }
.nav-dropdown-btn.active{ color: var(--accent); }

.nav-dropdown{ position:relative; }
.nav-dropdown-btn{
  background:none;
  border:none;
  padding:6px 2px;
  margin:0;
  font-family: var(--font-body);
  color: var(--text-secondary);
  font-weight:500;
  font-size: 16px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:5px;
}
.nav-dropdown-btn::after{
  content:"";
  width:6px; height:6px;
  border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  flex:none;
}
.nav-dropdown-btn:hover, .nav-dropdown.open .nav-dropdown-btn{ color: var(--accent); }
.main-nav .nav-dropdown-menu{
  display:none;
  position:absolute;
  top:100%; left:0;
  margin-top:10px;
  min-width:210px;
  background: var(--surface-1);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 10px 30px -14px rgba(0,0,0,0.55);
  padding:8px;
  z-index:60;
}
.main-nav .nav-dropdown.open .nav-dropdown-menu{ display:block; }
.nav-dropdown-menu a, .nav-dropdown-link-btn{
  display:block;
  width:100%;
  padding:8px 10px;
  border-radius:8px;
  color: var(--text-secondary);
  font-weight:500;
  font-size: 16px;
  font-family: var(--font-body);
  background:none;
  border:none;
  text-align:left;
  cursor:pointer;
  text-decoration:none;
}
.nav-dropdown-menu a:hover, .nav-dropdown-menu a.active, .nav-dropdown-link-btn:hover{
  background: var(--surface-2);
  color: var(--accent);
}

.nav-toggle{
  width:38px; height:38px;
  border-radius: var(--radius-sm);
  border: 0.5px solid var(--border);
  background: var(--surface-1);
  color: var(--text-secondary);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  flex:none;
}
.nav-toggle svg{ width:18px; height:18px; }

.mobile-nav{
  display:none;
  flex-direction:column;
  gap:2px;
  max-width:680px;
  margin:0 auto;
  padding: 0 20px 16px;
}
.mobile-nav.open{ display:flex; }
.mobile-nav a{
  padding:11px 10px;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-weight:500;
  font-size: 16px;
  text-decoration:none;
}
.mobile-nav a:hover, .mobile-nav a.active{ background: var(--surface-1); color: var(--accent); }
.mobile-nav-heading{
  padding:14px 10px 4px;
  font-size: 16px;
  font-weight:600;
  
  letter-spacing:0.05em;
  color: var(--text-muted);
}
.mobile-nav-link-btn{
  display:block;
  width:100%;
  text-align:left;
  background:none;
  border:none;
  font-family: var(--font-body);
  padding:11px 10px;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-weight:500;
  font-size: 16px;
  cursor:pointer;
}
.mobile-nav-link-btn:hover{ background: var(--surface-1); color: var(--accent); }

@media (min-width:760px){
  .main-nav{ display:flex; }
  .site-header .cta{ display:inline-block; }
  .nav-toggle{ display:none; }
  .mobile-nav{ display:none !important; }
}

/* Article */
.article{
  max-width: 680px;
  margin: 0 auto;
  padding: 30px 20px 8px;
}
/* Page stamp (R0.7 per-page date; R2 D-2 2026-11-12): "Page updated <date>", first line of <main> on every page but 404 and the
   guides (one Published date). Only methodology.html adds " · Changelog". Muted ember ink (#a4957f on #191512, 6.2:1). */
.article .page-stamp{ margin: -14px 0 6px; font-size: 16px; line-height: 24px; color: var(--text-muted); text-align: right; }
.article .page-stamp a{ display: inline-block; color: var(--text-muted); text-decoration: underline; text-underline-offset: .15em; }
.article .page-stamp a:hover{ color: var(--accent); }
.article .eyebrow{
  font-size: 16px;
  color: var(--text-muted);
  
  letter-spacing: 0.06em;
  margin: 0 0 10px;
}
.article h1{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 30px;
  line-height: 1.25;
  color: var(--text-primary);
  margin: 0 0 14px;
}
.article .lede{
  font-size: 16px;
  color: var(--text-secondary);
  line-height: 1.65;
  margin: 0 0 4px;
}
.article h2{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.3;
  color: var(--text-primary);
  margin: 34px 0 12px;
}
.article p{
  font-size: 17px;
  line-height: 1.75;
  color: var(--text-body);
  margin: 0 0 16px;
}
.article ul, .article ol{
  font-size: 17px;
  line-height: 1.75;
  color: var(--text-body);
  padding-left: 20px;
  margin: 0 0 16px;
}
.article li{ margin-bottom: 6px; }
.article strong{ font-weight: 500; color: var(--text-primary); }

/* Comparison table */
.compare-table{
  width:100%;
  border-collapse: collapse;
  margin: 4px 0 22px;
  font-size: 16px;
  background: var(--surface-1);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-md);
  overflow:hidden;
}
.compare-table th, .compare-table td{
  padding: 10px 12px;
  text-align:left;
  border-bottom: 0.5px solid var(--border);
}
.compare-table thead th{
  color: var(--text-muted);
  font-weight: 500;
  font-size: 16px;
  
  letter-spacing: 0.04em;
  background: var(--bg-2);
}
.compare-table tbody th{
  color: var(--text-secondary);
  font-weight: 500;
  white-space: nowrap;
}
.compare-table tbody td{ color: var(--text-body); }
.compare-table tr:last-child th, .compare-table tr:last-child td{ border-bottom: none; }
@media (max-width: 420px){
  .compare-table{ font-size: 16px; }
  .compare-table th, .compare-table td{ padding: 8px 8px; }
}

/* Ad slot (reused across guides) */
.ad-slot{
  max-width: 680px;
  margin: 28px auto;
  padding: 10px 20px;
}
.ad-slot .ad-inner{
  padding: 10px;
  background: var(--surface-1);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-md);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 6px;
  min-height: 0; /* REVIEW-WINDOW ONLY — restore to 110px after AdSense approval (and the @media rule below to 250px). Reserving height while nothing fills = a guaranteed CLS when the unfilled slot collapses. */
}
.ad-slot .ad-label{
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  align-self:flex-start;
  margin: 0 0 2px 2px;
}
/* While a unit is still loading, show the panel surface, not white. */
.ad-slot ins.adsbygoogle{ width: 100%; background: var(--surface-1); }
@media (min-width: 460px){
  .ad-slot .ad-inner{ min-height: 0; } /* REVIEW-WINDOW ONLY — restore to 250px after AdSense approval */
}
/* Collapse a unit AdSense has reported unfilled — responsive units
   (data-ad-format="auto") otherwise leave a ~280px blank iframe that never
   collapses on its own. NEVER display:none anywhere in the chain: a display:none
   (or zero-width) <ins> makes AdSense's page scan throw
   "adsbygoogle.push() error: No slot size for availableWidth=0". Instead the
   <ins> keeps its width and only its height + the panel chrome go to zero.
   Only matches data-ad-status="unfilled" (no ad served, no impression) — filled
   and still-loading units keep their space. Both rules are .ad-slot-scoped so
   Google's page-level/anchor auto-ad <ins> (a direct <body> child) is untouched. */
.ad-slot ins.adsbygoogle[data-ad-status="unfilled"]{ height: 0 !important; min-height: 0 !important; overflow: hidden !important; }
.ad-slot:has(ins.adsbygoogle[data-ad-status="unfilled"]){ margin: 0; padding: 0; }
.ad-slot:has(ins.adsbygoogle[data-ad-status="unfilled"]) .ad-inner{ padding: 0; border-width: 0; background: none; }
.ad-slot:has(ins.adsbygoogle[data-ad-status="unfilled"]) .ad-label{ display: none; }

/* FAQ */
.faq-block{ margin-top: 8px; }
.faq-block details{
  border-top: 0.5px solid var(--border);
  padding: 14px 0;
}
.faq-block details:last-child{ border-bottom: 0.5px solid var(--border); }
.faq-block summary{
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  color: var(--text-primary);
  cursor:pointer;
  list-style:none;
}
.faq-block summary::-webkit-details-marker{ display:none; }
.faq-block summary:before{ content: "＋ "; color: var(--accent); }
.faq-block details[open] summary:before{ content: "－ "; }
.faq-block p{
  margin: 10px 0 0;
  font-size: 16px;
  color: var(--text-secondary);
}

/* CTA box */
.cta-box{
  margin: 36px 0;
  padding: 24px 22px;
  background: var(--surface-1);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  text-align:center;
}
.cta-box p{
  margin: 0 0 14px;
  font-size: 16px;
  color: var(--text-secondary);
}
.cta-box a.btn{
  display:inline-block;
  padding: 14px 22px;
  min-height: 48px;
  box-sizing: border-box;
  background: var(--accent);
  color: var(--btn-ink);
  font-weight: 600;
  font-size: 16px;
  text-decoration:none;
  border-radius: var(--radius-sm);
}
.cta-box a.btn:hover{ background: var(--accent-strong); }

.article .source-note{
  margin: 30px 0 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-muted);
  text-align: center;
}
.article .source-note a{ color: var(--text-secondary); white-space: nowrap; }

/* Related links */
.related{ margin: 30px 0 10px; }
.related h3{
  font-size: 16px;
  
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin: 0 0 10px;
}
.related ul{ list-style:none; padding:0; margin:0; }
.related li{ margin: 0; }
.related a{
  font-size: 16px;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  display:block;
  padding: 10px 0;
  border-top: 0.5px solid var(--border);
}
.related a:hover{ color: var(--accent-strong); }

/* Site footer (2026-09-13 redesign) — a small, scaled-down grid, not a
   CalcThat-sized multi-column wall (one free calculator, not a SaaS product).
   The existing attribution line (.disclaimer) is untouched. */
.site-footer{
  max-width: 680px;
  margin: 10px auto 0;
  padding: 18px 20px 44px;
}
.footer-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 22px;
  padding-top: 20px;
  border-top: 0.5px solid var(--border);
  margin-bottom: 16px;
}
@media (min-width:560px){
  .footer-grid{ grid-template-columns: 1.3fr 1fr 1fr 1fr; gap:20px; }
}
.footer-logo{
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 19px;
  line-height: 1.2;
  color: var(--text-primary);
  text-decoration:none;
}
.footer-blurb{
  font-size: 16px;
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 8px 0 0;
}
.footer-review-note{
  font-size: 16px;
  color: var(--text-muted);
  line-height: 1.55;
  margin: 10px 0 0;
}
.footer-review-note a{ color: var(--text-secondary); text-decoration:underline; text-underline-offset:2px; }
.footer-col h2{
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin: 0 0 10px;
}
.footer-col ul{ list-style:none; margin:0; padding:0; }
.footer-col li{ margin: 0 0 8px; }
.footer-col a{ font-size: 16px; color: var(--text-secondary); text-decoration:none; }
.footer-col a:hover{ color: var(--accent); }
.footer-link-btn{
  display:block;
  background:none;
  border:none;
  padding:0;
  margin:0;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--text-secondary);
  cursor:pointer;
  text-align:left;
}
.footer-link-btn:hover{ color: var(--accent); }
.site-footer .disclaimer{
  font-size: 16px;
  color: var(--text-muted);
}

/* WCAG 2.2 AA contrast fix (2026-09-10). The navy palette's --text-muted
   (#6b7099) renders these 10–13px muted-text spots at only 3.5:1 (on
   --surface-1) to 3.9:1 (on --bg) — below the 4.5:1 minimum for normal text.
   Lift them to #8388b1: same blue-grey hue, ~13% lighter, 4.8:1 on --surface-1
   and 5.4:1 on --bg. Scoped away from body.theme-ember, whose warmer muted ink
   (#a4957f) already clears 4.5:1 on every guide-page surface (6.2:1 / 5.8:1).
   In practice this only repaints index.html (the sole navy page using this
   sheet). */

/* Visually-hidden but crawlable/accessible heading */
.sr-only{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* Breadcrumbs */
.breadcrumbs{
  max-width: 680px;
  margin: 18px auto 0;
  padding: 0 20px;
  font-size: 16px;
  color: var(--text-muted);
}
.breadcrumbs a{ color: var(--text-muted); text-decoration:none; }
.breadcrumbs a:hover{ color: var(--accent); }
.breadcrumbs .sep{ margin: 0 6px; color: var(--text-muted); }
.breadcrumbs [aria-current="page"]{ color: var(--text-secondary); }

/* Byline / dates */
.byline{
  font-size: 16px;
  color: var(--text-muted);
  margin: -6px 0 22px;
}
.byline strong{ color: var(--text-secondary); font-weight: 500; }

/* Guide cards (used on homepage teaser and Guides hub) */
.guides-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 4px 0 0;
}
@media (min-width: 520px){
  .guides-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
.guide-card{
  display:block;
  padding: 16px 18px;
  background: var(--surface-1);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-md);
  text-decoration:none;
  transition: border-color .15s ease;
}
.guide-card:hover{ border-color: var(--border-strong); }
.guide-card .eyebrow{
  font-size: 16px;
  color: var(--text-muted);
  
  letter-spacing: 0.06em;
  margin: 0 0 6px;
}
.guide-card h3{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 16.5px;
  color: var(--text-primary);
  margin: 0 0 6px;
  line-height:1.3;
}
.guide-card p{
  font-size: 16px;
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0;
}

/* Guide search (guides hub page) */
.site-search{
  margin: 4px 0 8px;
  position: relative;
}
.site-search input[type="search"]{
  width:100%;
  padding: 13px 40px 13px 14px;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--text-body);
  background: var(--surface-2);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-sm);
  outline: none;
  -webkit-appearance: none;
}
.site-search input[type="search"]::placeholder{ color: var(--text-muted); }
.site-search input[type="search"]:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }
.site-search input[type="search"]::-webkit-search-cancel-button{ filter: invert(0.6); cursor:pointer; }
.site-search .search-icon{
  position:absolute;
  right:14px; top:50%;
  transform:translateY(-50%);
  pointer-events:none;
  color: var(--text-muted);
}
.site-search .result-count{
  font-size: 16px;
  color: var(--text-muted);
  margin: 8px 2px 0;
  min-height: 16px;
}

.guide-category{ margin: 0; }
.search-empty{
  font-size: 16px;
  color: var(--text-secondary);
  padding: 18px 2px 6px;
  line-height: 1.6;
}

/* Human-readable sitemap page */
.sitemap-list{ margin: 0 0 30px; }
.sitemap-list h2{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.3;
  margin: 30px 0 10px;
}
.sitemap-list ul{ list-style:none; padding:0; margin:0; }
.sitemap-list li{
  padding: 9px 0;
  border-top: 0.5px solid var(--border);
}
.sitemap-list a{ font-size: 16px; text-decoration:none; color: var(--text-body); }
.sitemap-list a:hover{ color: var(--accent); }
.sitemap-list .desc{ display:block; font-size: 16px; color: var(--text-muted); margin-top: 2px; }

/* 404 page */
.error-page{
  max-width: 500px;
  margin: 0 auto;
  padding: 70px 20px 40px;
  text-align:center;
}
.error-page .code{
  font-family: var(--font-display);
  font-style: italic;
  font-size: 54px;
  line-height: 1.1;
  color: var(--accent);
  margin: 0 0 6px;
}
.error-page h1{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.3;
  margin: 0 0 10px;
}
.error-page p{
  font-size: 16px;
  color: var(--text-secondary);
  line-height:1.6;
  margin: 0 0 24px;
}

/* Tool pages (2026-09-23): calculator forms + results. Tokens only, no new palette. */
.tool{ margin: 22px 0 8px; padding: 20px 18px; background: var(--surface-1); border: 0.5px solid var(--border); border-radius: var(--radius-lg); }
.tool h2{ margin: 0 0 14px; font-size: 19px; line-height: 1.3; }
.tool .row{ display:grid; grid-template-columns: 1fr; gap: 12px; margin: 0 0 14px; }
@media (min-width: 520px){ .tool .row{ grid-template-columns: repeat(2, minmax(0,1fr)); } .tool .row.three{ grid-template-columns: repeat(3, minmax(0,1fr)); } }
.tool label, .tool .lbl{ display:block; font-size: 16px; font-weight: 500; color: var(--text-secondary); margin: 0 0 5px; }
.tool input, .tool select{
  width:100%; box-sizing:border-box; padding: 11px 12px; min-height: 48px;
  font-family: var(--font-body); font-size: 16px; line-height: 1.3;
  color: var(--text-primary); background: var(--surface-2);
  border: 0.5px solid var(--border-strong); border-radius: var(--radius-sm);
}
.tool input:focus-visible, .tool select:focus-visible, .tool button:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }
.tool .hint{ font-size: 16px; line-height: 1.5; color: var(--text-muted); margin: 5px 0 0; }
.tool .btn-sm{
  min-height: 48px; padding: 10px 16px; font-family: var(--font-body); font-size: 16px; font-weight: 600;
  color: var(--btn-ink); background: var(--accent); border: 0; border-radius: var(--radius-sm); cursor: pointer;
}
.tool .btn-sm:hover{ background: var(--accent-strong); }
.tool .btn-ghost{ color: var(--accent); background: transparent; border: 0.5px solid var(--border-strong); }
.tool .btn-ghost:hover{ background: var(--surface-2); }
.drink-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items:end; padding: 12px 0; border-top: 0.5px solid var(--border); }
.drink-row .wide{ grid-column: 1 / -1; }
@media (min-width: 560px){ .drink-row{ grid-template-columns: 2fr 1fr 1fr auto; } .drink-row .wide{ grid-column: auto; } }
.nights{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; margin: 0 0 14px; }
@media (min-width: 520px){ .nights{ grid-template-columns: repeat(4, minmax(0,1fr)); } }
.result{ margin: 16px 0 0; padding: 18px; background: var(--surface-2); border: 0.5px solid var(--border-strong); border-radius: var(--radius-md); }
.result h3{ margin: 0 0 6px; font-family: var(--font-display); font-weight: 500; font-size: 17px; line-height: 1.3; color: var(--text-primary); }
.result .big{ font-family: var(--font-display); font-size: 30px; line-height: 1.2; font-weight: 500; color: var(--glow); margin: 0 0 4px; }
.result p{ margin: 0 0 10px; font-size: 16px; line-height: 1.6; color: var(--text-body); }
.stat-grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; margin: 0 0 14px; }
@media (min-width: 520px){ .stat-grid{ grid-template-columns: repeat(4, minmax(0,1fr)); } }
.stat{ padding: 10px 12px; background: var(--surface-1); border: 0.5px solid var(--border); border-radius: var(--radius-sm); }
.stat b{ display:block; font-family: var(--font-display); font-size: 20px; line-height: 1.25; font-weight: 500; color: var(--text-primary); }
.stat span{ font-size: 16px; color: var(--text-muted); }
.tbl-wrap{ overflow-x:auto; margin: 10px 0; }
.tbl{ width:100%; border-collapse: collapse; font-size: 16px; }
.tbl th, .tbl td{ text-align:left; padding: 8px 10px; border-bottom: 0.5px solid var(--border); color: var(--text-body); vertical-align: top; }
.tbl th{ font-size: 16px; letter-spacing: .04em;  color: var(--text-muted); font-weight: 600; }
.tbl tfoot td{ color: var(--text-primary); font-weight: 500; }
.curve{ display:block; width:100%; height:auto; margin: 6px 0 4px; }
.curve .axis{ stroke: var(--border-strong); stroke-width: 1; }
.curve .thr{ stroke: var(--glow); stroke-width: 1; stroke-dasharray: 4 3; }
.curve .line{ fill: none; stroke: var(--accent); stroke-width: 2; }
.curve text{ fill: var(--text-secondary); font-size: 10px; font-family: var(--font-body); }
.note-line{ font-size: 16px; color: var(--text-muted); line-height: 1.55; }
.warn{ color: var(--glow); }
.tool-card .arrow{ display:inline-block; margin-top: 8px; font-size: 16px; color: var(--accent); text-decoration: underline; text-underline-offset: .15em; }
.hub-intro-grid{ display:grid; gap: 10px; grid-template-columns: 1fr; margin: 6px 0 0; }
@media (min-width: 520px){ .hub-intro-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* Mobile pass (2026-09-23): 44px targets, compact tool forms, sticky answer bar (top, so it never sits under bottom ads/consent). */
.nav-toggle{ width:44px; height:44px; }
.site-header .logo{ display:inline-flex; align-items:center; min-height: 48px; min-width: 48px; }
.breadcrumbs a{ display:inline-block; padding:15px 8px; margin:0 -6px; }
.footer-review-note a{ display:inline-flex; align-items:center; min-height: 48px; }
.faq-block summary{ display:flex; align-items:center; min-height: 48px; }
.footer-col li{ margin:0; }
.footer-col a{ display:inline-flex; align-items:center; min-height: 48px; }
.footer-logo{ display:inline-flex; align-items:center; min-height: 48px; min-width: 48px; }
/* R4 (Owner): side-by-side footer columns: the 44 px tap box centred the word, so "Lull" sat ~10 px below the Explore/Company/Social headings; top-align it (tap box unchanged) */
@media (min-width:560px){ .footer-logo{ align-items:flex-start; margin-bottom:-14px; } }
.footer-link-btn{ min-height: 48px; }
.tool .row .full{ grid-column: 1 / -1; }
.answer-bar{ position:sticky; top:0; z-index:5; margin:0 -18px 12px; padding:10px 18px; background: var(--surface-2); border-bottom: 0.5px solid var(--border-strong); font-family: var(--font-display); font-size:16px; line-height:1.3; color: var(--glow); }
.answer-bar:empty{ display:none; }
.drink-row{ grid-template-columns: minmax(84px,.8fr) minmax(0,1.2fr) auto; }
.drink-row .wide{ grid-column: 1 / -1; }
@media (max-width: 519px){
  .tool{ padding: 16px 14px; }
  .answer-bar{ margin:0 -14px 12px; padding:10px 14px; }
  .tool .row.three{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  main.article h1{ font-size: 28px; line-height: 1.2; }
}
@media (min-width: 560px){ .drink-row{ grid-template-columns: 2fr 1fr 1fr auto; } .drink-row .wide{ grid-column: auto; } }

/* Stacked result table on narrow screens: labelled lines instead of sideways scroll */
@media (max-width: 519px){
  .tbl.stack thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
  .tbl.stack, .tbl.stack tbody, .tbl.stack tfoot, .tbl.stack tr, .tbl.stack td{ display:block; width:100%; box-sizing:border-box; }
  .tbl.stack tr{ padding: 8px 0; border-bottom: 0.5px solid var(--border); }
  .tbl.stack td{ display:flex; justify-content:space-between; gap:12px; border:0; padding:3px 0; text-align:right; }
  .tbl.stack td[data-l]::before{ content: attr(data-l); color: var(--text-muted); text-align:left; flex:none; }
  .tbl.stack tfoot td[colspan]{ justify-content:flex-start; }
}

/* Selector controls (2026-09-23): one shared selected + pressed state for tabs, chips and result cards.
   Selected = accent border + tint + inset bar + check mark (not colour alone). Body-prefixed to beat inline page CSS. */
body .tab[aria-selected="true"]{ box-shadow: inset 0 -3px 0 var(--accent), 0 0 0 1px var(--accent); font-weight: 600; }
body .chip[aria-pressed="true"], body .alt-card[aria-pressed="true"]{
  background: var(--accent-tint); border: 1.5px solid var(--accent); color: var(--text-primary); position: relative;
}
body .chip[aria-pressed="true"]::after, body .alt-card[aria-pressed="true"]::after{
  content: "\2713"; position: absolute; top: 3px; right: 6px; font-size: 16px; font-weight: 700; color: var(--accent); line-height: 1;
}
body .alt-card[aria-pressed="true"] .alt-label{ color: var(--accent); }
body .alt-card{ min-height: 48px; }
body .tab:active, body .chip:active, body .alt-card:active, body .now-btn:active, .tool .btn-sm:active{
  transform: scale(.96); filter: brightness(1.15);
}
body .tab, body .chip, body .alt-card, body .now-btn, .tool .btn-sm{ -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
@media (prefers-reduced-motion: reduce){ body .tab:active, body .chip:active, body .alt-card:active, body .now-btn:active, .tool .btn-sm:active{ transform: none; } }

/* Nap planner (2026-09-23): segmented goal selector. Selected = accent border + tint + check (not colour alone). */
.tool .seg{ display:grid; grid-template-columns:1fr; gap:8px; }
@media (min-width:520px){ .tool .seg{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.tool .seg button{ position:relative; min-height: 48px; padding:10px 12px; text-align:left; font-family:var(--font-body); font-size:16px; line-height:1.3; color:var(--text-body); background:var(--surface-2); border:0.5px solid var(--border-strong); border-radius:var(--radius-sm); cursor:pointer; touch-action:manipulation; }
.tool .seg button small{ display:block; font-size: 16px; color:var(--text-muted); }
.tool .seg button[aria-pressed="true"] small{ color: var(--text-secondary); } /* muted #a4957f on the selected tint was 4.39:1; secondary is well above 4.5:1 */
.tool .seg button[aria-pressed="true"]{ background:var(--accent-tint); border:1.5px solid var(--accent); color:var(--text-primary); font-weight:600; }
.tool .seg button[aria-pressed="true"]::after{ content:"\2713"; position:absolute; top:6px; right:10px; font-size: 16px; font-weight:700; color:var(--accent); }
/* jet lag planner: night-by-night list (no horizontal scroll at 375 px) */
.night-list{ list-style:none; margin:10px 0; padding:0; }
.night-list li{ margin:0 0 8px; padding:10px 12px; background:var(--surface-1); border:0.5px solid var(--border); border-radius:var(--radius-sm); font-size: 16px; line-height:1.5; color:var(--text-body); }
.night-list b{ display:block; color:var(--text-primary); }
.night-list span{ display:block; }
.night-list .odd{ display:block; margin-top:4px; padding-left:8px; border-left:3px solid var(--accent); font-style:normal; font-weight:600; color:var(--text-primary); }

/* Checkbox list in tools (melatonin check, 2026-09-24): 44px targets, real checkboxes. */
.tool .chk-set{ border:0; padding:0; margin:0 0 14px; min-width:0; }
.tool .chk{ display:flex; align-items:center; gap:10px; min-height: 48px; padding:6px 0; font-size:16px; color:var(--text-body); cursor:pointer; }
.tool .chk input[type="checkbox"]{ width:22px; height:22px; min-height:0; flex:none; margin:0; padding:0; accent-color:var(--accent); }

/* Design pass 2026-09-26 (design-brief sections 7 and 9): night strip, figures, method panel, tool glyphs.
   Colours are tokens only. Nothing here changes layout height after paint (SVGs carry a viewBox). */
.night-strip{ display:block; width:100%; max-width:420px; height:auto; margin:10px auto 6px; }
.night-strip .ns-seg-a{ fill: var(--glow); }
.night-strip .ns-seg-b{ fill: var(--accent); }
.night-strip .ns-num{ fill: var(--btn-ink); font: 600 13px/1 var(--font-body); }
.night-strip .ns-tm{ fill: var(--text-secondary); font: 500 12.5px/1 var(--font-body); }
.night-strip .ns-fall{ stroke: var(--text-secondary); stroke-width:1.5; stroke-dasharray:2 3; }
.night-strip .ns-dot{ fill: var(--bg); stroke: var(--glow); stroke-width:2; }
.night-strip .ns-alarm{ fill: var(--text-primary); stroke: var(--text-primary); stroke-width:2; stroke-linejoin:round; }
.night-strip .ns-txt{ fill: var(--text-secondary); font: 500 12px/1 var(--font-body); }
p.ns-legend, .article p.ns-legend, .result p.ns-legend{ margin: 2px 0 10px; font-size: 16px; line-height: 1.5; color: var(--text-secondary); text-align: center; }

.viz{ margin: 18px 0 22px; padding: 14px 14px 12px; background: var(--surface-1); border: 0.5px solid var(--border); border-radius: var(--radius-md); }
.viz svg{ display:block; width:100%; max-width:460px; height:auto; margin:0 auto; overflow:visible; }
.viz figcaption{ margin: 10px 0 0; font-size: 16px; line-height: 1.55; color: var(--text-secondary); }
.viz .v-txt{ fill: var(--text-secondary); font: 500 11px/1 var(--font-body); }
.viz .v-sm{ font-size: 10.5px; } /* SVG user units (320 viewBox), scaled with the chart: S1b put back, 16 clipped labels */
.viz .v-strong{ fill: var(--text-primary); font: 600 11px/1 var(--font-body); }
.viz .v-ink{ fill: var(--btn-ink); font: 600 11px/1 var(--font-body); }
.viz .v-axis{ stroke: var(--border-strong); stroke-width:1; fill:none; }
.viz .v-line{ stroke: var(--glow); stroke-width:2; fill:none; stroke-linejoin:round; stroke-linecap:round; }
.viz .v-target{ stroke: var(--text-secondary); stroke-width:1.2; stroke-dasharray:4 3; fill:none; }
.viz .v-mark{ stroke: var(--text-secondary); stroke-width:1.5; fill:none; stroke-linejoin:round; stroke-linecap:round; }
.viz .v-gold{ fill: var(--glow); }
.viz .v-clay{ fill: var(--accent); }
.viz .v-dot{ fill: var(--bg); stroke: var(--glow); stroke-width:2; }
.viz .v-mid{ fill: var(--text-primary); }
.viz .v-box{ fill: none; stroke: var(--accent); stroke-width:1.5; }
.viz .v-box-solid{ fill: var(--accent-tint); }
.night-strip-wrap{ margin: 4px 0 2px; }

/* How this is calculated panel */
.method-panel{ margin: 34px 0 10px; padding: 4px 18px 8px; background: var(--surface-1); border: 0.5px solid var(--border); border-left: 3px solid var(--glow); border-radius: var(--radius-md); }
.method-panel h2{ margin-top: 18px; }
.method-panel h3{ font-family: var(--font-display); font-weight: 500; font-size: 16px; line-height: 1.3; color: var(--text-primary); margin: 20px 0 8px; }
.mp-checked{ margin: -4px 0 14px; font-size: 16px; color: var(--text-secondary); }
.mp-sources{ margin: 0 0 12px; padding: 0; list-style: none; counter-reset: src; }
.mp-sources li{ counter-increment: src; position: relative; padding: 10px 0 10px 34px; border-top: 0.5px solid var(--border); font-size: 16px; line-height: 1.5; color: var(--text-body); }
.mp-sources li::before{ content: counter(src); position: absolute; left: 0; top: 10px; width: 24px; height: 24px; border: 1px solid var(--glow); border-radius: 50%; font: 600 16px/22px var(--font-body); text-align: center; color: var(--glow); }
.mp-sources a{ color: var(--accent); text-decoration: underline; text-underline-offset: .15em; }
.mp-date{ display:block; margin-top: 2px; font-size: 16px; color: var(--text-muted); }
.article .checked-line{ margin: -8px 0 22px; font-size: 16px; color: var(--text-secondary); }

/* Tool card glyphs (gold line, one per tool) */
.tool-glyph{ display:block; width:32px; height:32px; margin: 0 0 10px; }
.tool-glyph svg{ display:block; width:32px; height:32px; fill:none; stroke: var(--glow); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.tool-card{ position: relative; }
/* [hidden] must win over the display set on these link-style buttons (the footer cookie-settings button has no CMP behind it on this site yet) */
.footer-link-btn[hidden], .nav-dropdown-link-btn[hidden], .mobile-nav-link-btn[hidden]{ display: none !important; }
.guide-card.tool-card .tool-glyph + .eyebrow{ margin-top: 0; }
@media (prefers-reduced-motion: no-preference){ .tool-card:hover .tool-glyph svg{ stroke: var(--accent); } }

/* Shared tool template (R1 restructure, 2026-10-05): home sleep calculator + night-shift planner. Tokens only.
   Visual base = the old home calculator (serif time readout, segmented buttons, chips, night strip), now in Ember. */
:root{ --ad-surface: #2a1f17; }
.ad-slot .ad-inner{ background: var(--ad-surface, var(--surface-1)); }
.ad-slot ins.adsbygoogle{ background: var(--ad-surface, var(--surface-1)); }
.tp .tp-intro{ margin-bottom: 6px; }
.tp-tool .seg-2{ grid-template-columns: 1fr 1fr; }
.tp-tool .seg-2 button{ font-size: 16px; }
.tp-cross{ margin: 10px 0 0; font-size: 16px; color: var(--text-secondary); }
.tp-cross a, .tp-why a, .tp-whatif a, .limits a{ text-decoration: underline; text-underline-offset: .15em; }
.tp-cross a{ display:inline-flex; align-items:center; min-height: 48px; }
.tp-time-wrap{ margin: 16px 0 6px; text-align:center; }
.tp-time-wrap label{ text-align:center; }
.tool input.tp-time{ font-family: var(--font-display); font-size: 42px; font-weight: 500; line-height: 1.2; text-align:center; background: transparent; border: 0; padding: 4px 0; min-height: 60px; color-scheme: dark; }
.tool input.tp-time:focus-visible{ outline: 2px solid var(--accent); outline-offset: 4px; }
.now-btn{ font: 500 16px/1.2 var(--font-body); color: var(--accent); background: none; border: 0; cursor: pointer; min-height: 48px; padding: 4px 10px; text-decoration: underline; text-underline-offset: .15em; }
.now-btn[hidden]{ display:none !important; }
.chip-grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; margin: 0 0 16px; }
.chip-grid .chip:last-child:nth-child(odd){ grid-column: 1 / -1; }
@media (min-width: 560px){ .chip-grid{ grid-template-columns: repeat(5, minmax(0,1fr)); } .chip-grid .chip:last-child:nth-child(odd){ grid-column: auto; } }
.chip{ min-height: 48px; padding: 10px 8px; font: 500 16px/1.3 var(--font-body); color: var(--text-secondary); background: var(--surface-2); border: 0.5px solid var(--border-strong); border-radius: var(--radius-sm); cursor: pointer; text-align: center; }
.chip .sub{ display:block; font-size: 16px; font-weight: 400; color: var(--text-muted); margin-top: 2px; }
body .chip[aria-pressed="true"] .sub{ color: var(--text-secondary); }
.tp-actions{ display:flex; flex-wrap: wrap; gap: 10px; align-items:center; margin: 4px 0 0; }
.tp-actions #go{ flex: 1 1 180px; }
.tp-clock[aria-pressed="true"]{ background: var(--accent-tint); border: 1.5px solid var(--accent); color: var(--text-primary); }
.tp-clock[aria-pressed="true"]::before{ content: "\2713  "; color: var(--accent); }
#err:empty{ display:none; }
.readout{ text-align:center; margin: 4px 0 6px; }
/* R2b: .result p (0,1,1) used to win over .readout-time (0,1,0), so the answer rendered at 14 px; this selector is (0,2,1) */
.result p.readout-time, .readout-time{ font-family: var(--font-display); font-size: 44px; line-height: 1.15; font-weight: 500; color: var(--glow); margin: 0; }
.result p.readout-sub{ font-size: 16px; color: var(--text-secondary); margin: 2px 0 0; }
.result p.readout-meta{ font-size: 16px; color: var(--text-secondary); margin: 2px 0 0; }
.alt-row{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; margin: 6px 0 12px; }
@media (min-width: 520px){ .alt-row{ grid-template-columns: repeat(4, minmax(0,1fr)); } }
.alt-card{ min-width:0; padding: 10px 12px; border-radius: var(--radius-sm); text-align:center; background: var(--surface-1); border: 0.5px solid var(--border); cursor:pointer; font-family: var(--font-body); color: var(--text-primary); }
.alt-card .alt-label{ display:block; font-size: 16px; color: var(--text-secondary); }
.alt-card .alt-time{ display:block; font-size: 16px; font-weight: 600; margin-top: 2px; }
.tp-why-h{ margin: 14px 0 6px; font: 600 16px/1.3 var(--font-body); letter-spacing: .04em;  color: var(--text-muted); }
.result ul.tp-why{ margin: 0 0 10px; padding-left: 18px; font-size: 16px; line-height: 1.6; color: var(--text-body); }
.result ul.tp-why li{ margin-bottom: 6px; }
.result p.tp-whatif{ padding: 10px 12px; background: var(--surface-1); border-left: 3px solid var(--glow); border-radius: var(--radius-sm); }
.limits, .share{ margin: 22px 0 8px; padding: 4px 18px 10px; background: var(--surface-1); border: 0.5px solid var(--border); border-radius: var(--radius-md); }
.limits{ border-left: 3px solid var(--accent); }
.limits h2, .share h2{ margin: 16px 0 10px; font-size: 18px; }
.limits p, .share p{ font-size: 16px; }
.share-row{ display:flex; gap: 8px; }
.share-row input{ flex: 1 1 auto; min-width: 0; min-height: 48px; padding: 10px 12px; font: 16px/1.3 var(--font-body); color: var(--text-primary); background: var(--surface-2); border: 0.5px solid var(--border-strong); border-radius: var(--radius-sm); }
.share .btn-sm{ min-height: 48px; padding: 10px 16px; font: 600 16px/1.2 var(--font-body); color: var(--btn-ink); background: var(--accent); border: 0; border-radius: var(--radius-sm); cursor: pointer; flex: none; }
.share .btn-sm:disabled{ opacity: .55; cursor: default; }
.share .hint{ font-size: 16px; color: var(--text-muted); }
.tbl.vals q{ color: var(--text-secondary); }
.tbl.vals tr:target{ outline: 2px solid var(--glow); outline-offset: -2px; }
.tier{ display:inline-block; padding: 1px 7px; border: 0.5px solid var(--border-strong); border-radius: 999px; font-size: 16px; color: var(--text-primary); white-space: nowrap; }
.tp-steps li{ margin-bottom: 10px; }
.tool-card--hi{ border-color: var(--glow); box-shadow: inset 0 0 0 1px var(--glow); }
@media (max-width: 519px){ .tbl.stack.vals td{ display:block; text-align:left; } .tbl.stack.vals td[data-l]::before{ display:block; margin-bottom: 2px; font-size: 16px;  letter-spacing: .04em; } }

/* R2b: 404 links reach 44 px (gate tap-target rule) */
.error-page .related a, .error-page .btn{ display:inline-flex; align-items:center; min-height: 48px; }
/* R2b (CEO call on qa-audience S8): on a 375 x 812 first screen a tool page shows its first input and its Calculate button.
   Less space above the tool, a smaller h1 and intro, the nap goals in one row, and the settings most people keep (pre-filled)
   folded into a "More settings" panel that opens by itself when a share link or a change uses them. */
@media (max-width: 519px){
  .breadcrumbs{ margin-top: 0; }
  main.article.tp{ padding-top: 6px; }
  main.article.tp .page-stamp{ margin: -18px 0 0; } /* with the date line, Calculate stays inside the 375 x 812 first screen (2026-10-06) */
  main.article.tp h1{ font-size: 23px; line-height: 1.22; margin-bottom: 8px; }
  .tp .tp-intro{ font-size: 16px; line-height: 1.5; }
  .tp .tool{ margin-top: 8px; }
  .tool .seg.seg-3{ grid-template-columns: repeat(3, minmax(0,1fr)); gap: 6px; }
  .tool .seg.seg-3 button{ padding: 8px 8px; font-size: 16px; }
  .tool .seg.seg-3 button[aria-pressed="true"]::after{ top: 4px; right: 6px; }
  .tp-tool .tp-time-wrap{ margin: 10px 0 4px; }
  .tp-tool .chip-grid{ gap: 6px; margin-bottom: 12px; }
  .tp-tool .chip{ padding: 7px 6px; }
}
.tool details.tp-opts{ margin: 0; border: 0.5px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); }
.tool details.tp-opts > summary{ display:flex; align-items:center; min-height: 48px; padding: 0 12px; cursor:pointer; font-size: 16px; color: var(--text-secondary); }
.tool details.tp-opts > summary .hint{ margin: 0 0 0 6px; }
.tool details.tp-opts > .row{ margin: 0; padding: 4px 12px 12px; }
.tp-add{ margin: 8px 0 12px; }
@media (max-width: 519px){
  /* drinks: the type on its own line, then mg, time and remove; labels shown on the first drink only (each input keeps its label) */
  .tp-tool .drink-row{ gap: 6px 8px; padding: 8px 0; }
  .tp-tool .drink-row + .drink-row label{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
  .tp-tool .nights{ grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px; }
}
@media (max-width: 519px){ .tp-tool .row{ margin-bottom: 10px; } .tp-add{ margin: 4px 0 8px; } }
/* R2b (qa-technical m15): header controls reach 44 px where the desktop nav shows (tablets included) */
.nav-dropdown-btn{ min-height: 48px; }
.site-header .cta{ min-height: 48px; box-sizing: border-box; align-items: center; }
@media (min-width: 760px){ .site-header .cta{ display: inline-flex; } }
/* caffeine: bedtime and its settings panel share a row; the settings stack inside the half column */
.tool .row.caf-top{ align-items: start; }
.tool details.tp-opts.half{ margin-top: 22px; }
.tool details.tp-opts.half > .row{ grid-template-columns: 1fr; }
.tool details.tp-opts.half[open]{ grid-column: 1 / -1; margin-top: 0; }
@media (max-width: 519px){
  .tp-tool .drink-row{ grid-template-columns: minmax(64px,.6fr) minmax(0,1.4fr) 44px; }
  .tp-tool .drink-row .btn-sm{ min-width: 48px; padding-left: 0; padding-right: 0; font-size: 0; }
  .tp-tool .drink-row .btn-sm::before{ content: "\00d7"; font-size: 22px; line-height: 1; }
}

/* Ad reserve during the AdSense review window (playbook 5.2; test-web pre-publish 5.4). AdSense stamps height:auto / min-height:0 on
   every ancestor of the <ins>, so only a pseudo-element can hold the space: .ad-reserve::before reserves it and the .ad-slot sits
   over it, absolutely positioned. A fill or an unfilled collapse then moves nothing. The box and label stay when unfilled.
   REVERT AFTER ADSENSE APPROVAL: delete this block and the wrapper in build-tool-pages.mjs (AD), then restore the min-heights. */
.ad-reserve{ position: relative; overflow: hidden; max-width: 680px; margin: 28px auto; }
.ad-reserve::before{ content: ""; display: block; height: 300px; }
.ad-reserve .ad-slot{ position: absolute; inset: 0; margin: 0; padding: 0 20px; }
.ad-reserve .ad-slot .ad-inner{ height: 100%; box-sizing: border-box; overflow: hidden; }
.ad-reserve .ad-slot:has(ins.adsbygoogle[data-ad-status="unfilled"]){ padding: 0 20px; }
.ad-reserve .ad-slot:has(ins.adsbygoogle[data-ad-status="unfilled"]) .ad-inner{ padding: 10px; border-width: 0.5px; background: var(--surface-1); }
.ad-reserve .ad-slot:has(ins.adsbygoogle[data-ad-status="unfilled"]) .ad-label{ display: block; }

/* R3: after-approval below-result unit (built OFF in <template class="ad-off">, so none of this renders during review).
   Fixed 300x250 on phones, 728x90 from 768 px (Google's per-breakpoint fixed-size pattern: no data-ad-format, sizes set on the ins).
   The margin keeps the wrapper top, label included, >=150 px from Calculate / "Use current time" / Copy link in the input state. */
.ad-below{ max-width: 728px; margin: var(--ad-gap, 136px) auto 0; padding: 8px 0 12px; background: var(--ad-surface, var(--surface-1)); border-radius: var(--radius-md); text-align: center; }
.ad-below .ad-label{ display: block; margin: 0 0 6px; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.ad-fixed{ display: inline-block; width: 300px; height: 250px; }
@media (min-width: 768px){ .ad-fixed{ width: 728px; height: 90px; } }
/* R3d (test-web M1): tool-mid sits right before the FAQ; its own 150 px bottom margin keeps the first FAQ control >= 150 px away at switch-on (inside <template> while ads are off: no visible change) */
.ad-reserve--prefaq{ margin-bottom: 150px; }
/* R4 (2026-10-08, Owner): Play visibility. Header "Android app" link: icon-only at every width (label visually hidden, still the
   accessible name; title = hover hint; same 44 px row, so nothing moves and the header keeps its R3 width). Official Google Play badge
   (unmodified file, Google's clear space included) in the footer; a labelled row in the phone menu. R4c: no Play line inside the calculator box. */
.nav-app{ display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height: 48px; min-width: 48px; margin-left:auto; padding:0 4px; box-sizing:border-box; border-radius: var(--radius-sm); color: var(--text-secondary); font: 500 16px/1.2 var(--font-body); text-decoration:none; white-space:nowrap; }
.nav-app:hover{ color: var(--accent); }
.nav-app .android-icon{ flex:none; color: var(--accent); }
.nav-app-label{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
@media (min-width:760px){ .nav-app{ order:2; margin-left:0; padding:0; } }
.mobile-nav-app{ display:flex; align-items:center; gap:8px; min-height: 48px; box-sizing:border-box; }
.mobile-nav-app .android-icon{ flex:none; color: var(--accent); }
.footer-badge{ display:inline-block; line-height:0; border-radius:8px; }
/* the PNG has Google's transparent clear space (41 of 646 px each side): pull it left so the visible badge lines up with the text above */
.footer-badge{ margin:6px 0 0 calc(-140px * 41 / 646); }
.footer-badge img{ display:block; width:140px; height:auto; }
/* R4e (2026-10-08, Owner): QR code for Lull on Google Play beside the badge, desktop only, no caption. Hidden below 760 px.
   From 760 px the brand column is widened to fit badge + QR on one row (238 = visible badge 122 + 16 gap + QR 98, plus the
   badge's 9 px right clear space); Explore/Company/Social columns sized to their longest link so none wraps. */
.footer-qr{ display:none; }
@media (min-width:760px){
  .footer-grid{ grid-template-columns: 238px 160px 110px 1fr; }
  /* R4f (2026-10-09, Owner): QR stacked above the badge, left-aligned with the text */
  .footer-play{ display:flex; flex-direction:column; align-items:flex-start; margin-top:6px; }
  .footer-play .footer-badge{ margin-top:0; }
  .footer-qr{ display:block; flex:none; order:-1; line-height:0; margin:4px 0 10px; }
  .footer-qr img{ display:block; width:98px; height:98px; }
}
.footer-tm{ font-size: 16px; }
/* 2026-10-11 (Owner, web-playbook 5.4): footer columns Calculators · How we work · About · Legal · Social. From 760 px: brand column
   (badge + QR unchanged) | Calculators | the other four stacked in one column, so no link wraps inside the 680 px footer. */
@media (min-width:760px){
  .footer-grid{ grid-template-columns: 238px 160px 1fr; }
  .footer-brand-col{ grid-row: 1 / span 4; }
  /* 2026-10-22 (Owner): App column first. App sits on top of Calculators in column 2; the rest stack in column 3. */
  .footer-grid > .footer-col:nth-child(2){ grid-column: 2; grid-row: 1; }
  .footer-grid > .footer-col:nth-child(3){ grid-column: 2; grid-row: 2 / span 3; }
  .footer-grid > .footer-col:nth-child(n+4){ grid-column: 3; }
}
/* top-level Contact link: same 44 px tap box as the dropdown buttons */
.main-nav > a:not(.cta){ display:inline-flex; align-items:center; min-height: 48px; box-sizing:border-box; }
/* bottom-bar Site map link: 44 px tap box without changing the line height; phone menu rows 44 px */
.footer-sitemap{ display:inline-block; padding:16px 0; margin:-16px 0; color: var(--text-secondary); text-decoration:underline; text-underline-offset:2px; }
.mobile-nav a{ display:flex; align-items:center; min-height: 48px; box-sizing:border-box; }

/* ---- /learn/ guides (2026-10-16, content plan 2a/2b). Hub cards: compact rows on a phone, image on top from 560 px. */
.learn .byline{ margin: 6px 0 8px; }
.learn .learn-tool{ margin: 0 0 18px; }
.learn .tbl caption, .learn-hub .tbl caption{ caption-side: top; text-align: left; font-size: 16px; color: var(--text-muted); padding: 0 0 6px; }
.learn .tbl th{ color: var(--text-secondary); font-weight: 600; }
.learn-calc h3{ margin: 0 0 12px; font-size: 17px; color: var(--text-primary); }
.printable{ margin: 16px 0 8px; padding: 14px 16px 6px; background: var(--surface-1); border: 0.5px solid var(--border); border-radius: var(--radius-md); }
.printable h3{ margin: 0 0 4px; font-size: 16.5px; color: var(--text-primary); }
.printable h3:focus{ outline: none; }
.print-list{ margin: 10px 0; padding-left: 20px; }
.print-list li{ margin: 0 0 6px; }
.print-row{ display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 10px 0 8px; }
.print-row a{ display: inline-flex; align-items: center; min-height: 48px; }
.print-foot{ display: none; }
.lg-grid{ display: grid; grid-template-columns: 1fr; gap: 12px; margin: 8px 0 18px; }
.lg-card a{ display: grid; grid-template-columns: 112px 1fr; grid-template-rows: auto auto 1fr; column-gap: 12px; min-height: 72px; padding: 10px; background: var(--surface-2); border: 0.5px solid var(--border); border-radius: var(--radius-md); text-decoration: none; }
.lg-card a:hover{ border-color: var(--border-strong); }
.lg-card img{ grid-row: 1 / span 3; width: 112px; height: 63px; object-fit: cover; border-radius: 8px; background: var(--surface-1); }
.lg-card h3{ margin: 0 0 2px; font-family: var(--font-display); font-weight: 500; font-size: 16px; line-height: 1.3; color: var(--text-primary); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lg-card p{ margin: 0; font-size: 16px; line-height: 1.45; color: var(--text-secondary); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lg-card .lg-meta{ grid-column: 2; margin-top: 4px; font-size: 16px; color: var(--text-muted); }
@media (min-width: 560px){
  .lg-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .lg-card a{ display: block; padding: 0 0 12px; overflow: hidden; }
  .lg-card img{ width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 0; margin: 0 0 10px; }
  .lg-card h3, .lg-card p, .lg-card .lg-meta{ display: block; padding: 0 14px; }
  .lg-card h3, .lg-card p{ display: -webkit-box; }
}
.lg-list{ list-style: none; padding: 0; }
.lg-list li{ margin: 0 0 10px; }

/* print: a page with a .printable section prints only that section and its dated footer (the PDF is made from this view) */
@media print{
  :root{ --text-primary:#111; --text-body:#222; --text-secondary:#333; --text-muted:#444; --accent:#111; --surface-1:#fff; --surface-2:#fff; --border:#999; --border-strong:#666; }
  body{ background: #fff !important; color: #111; }
  .site-header, .mobile-nav, .breadcrumbs, .site-footer, .page-stamp, .print-row, .ad-reserve, template{ display: none !important; }
  main.learn:has(.printable) > *:not(.printable):not(.print-foot):not(h1){ display: none !important; }
  .printable{ border: 1px solid #999; break-inside: avoid; }
  .print-foot{ display: block; margin-top: 18px; padding-top: 8px; border-top: 1px solid #999; font-size: 10pt; color: #333; }
  .print-foot p{ margin: 0 0 3px; font-size: 10pt; color: #333; }
  .tbl.stack thead{ position: static; width: auto; height: auto; clip: auto; }
  .tbl.stack, .tbl.stack tbody, .tbl.stack tr{ display: table-row-group; }
  .tbl.stack{ display: table; } .tbl.stack tr{ display: table-row; } .tbl.stack td{ display: table-cell; text-align: left; border-bottom: 1px solid #ccc; }
  .tbl.stack td[data-l]::before{ content: none; }
  a{ color: #111; text-decoration: none; }
  @page{ margin: 16mm 14mm; }
}
.viz .v-line2{ stroke: var(--text-secondary); stroke-width: 2; fill: none; stroke-linejoin: round; stroke-linecap: round; }
@media (max-width: 519px){ .tbl.stack caption{ display: block; width: 100%; } }
/* 2026-10-16: the Guides link joins the top menu; tighter gaps keep the 680 px header on one row */
@media (min-width:760px){ .site-header{ gap: 8px; } .main-nav{ gap: 8px; } .main-nav a, .main-nav .nav-dropdown-btn{ white-space: nowrap; } .site-header .cta{ padding: 0 10px; } }

/* ---- /learn/ fix round 1 (2026-10-16): comparison tables stay tables on phones (sticky first column, sideways scroll), full card text,
   44 px print buttons, the personal result line, branded printables */
.tbl.cmp{ font-size: 16px; width: auto; min-width: 100%; }
.tbl.cmp th, .tbl.cmp td{ padding: 7px 8px; white-space: nowrap; }
.tbl.cmp tbody th{ text-align: left; font-weight: 600; color: var(--text-primary); }
.cmp-wrap .tbl.cmp th:first-child, .cmp-wrap .tbl.cmp td:first-child{ position: sticky; left: 0; z-index: 1; background: var(--surface-1); }
.tbl.cmp tr.lead th, .tbl.cmp tr.lead td{ background: var(--accent-tint); }
.cmp-wrap .tbl.cmp tr.lead th:first-child{ background: var(--surface-2); }
.scroll-cue{ display: none; margin: -4px 0 12px; font-size: 16px; color: var(--text-muted); }
@media (max-width: 680px){ .scroll-cue{ display: block; } }
.tbl.sunrise th, .tbl.sunrise td{ padding: 6px 6px; font-size: 16px; }
.rule-list{ font-size: 16px; }
.table-note{ margin-top: 2px; }
.learn-result{ margin: 12px 0 4px; font-weight: 600; color: var(--text-primary); font-size: 16px; line-height: 1.5; }
.learn-result:empty{ display: none; }
.print-row .btn-sm{ min-height: 48px; padding: 0 16px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text-primary); font: 600 16px/1 var(--font-body); cursor: pointer; }
.print-row .btn-sm:hover{ border-color: var(--accent); }
.print-brand{ margin: 0 0 6px; font-size: 16px; color: var(--text-muted); }
.print-mark{ font-family: var(--font-display); font-style: italic; font-size: 17px; color: var(--glow); margin-right: 6px; }
.printable h3 + .tbl-wrap, .printable h3 + ol{ margin-top: 6px; }
.print-dates{ font-size: 16px; }
.lg-card h3, .lg-card p{ display: block; -webkit-line-clamp: unset; overflow: visible; }
.lg-card a{ grid-template-columns: 128px 1fr; }
.lg-card img{ width: 128px; height: 72px; }
@media (min-width: 560px){ .lg-card img{ width: 100%; height: auto; } .lg-card h3, .lg-card p{ display: block; } }
@media print{
  .learn h1, .printable h3{ font-family: Arial, Helvetica, sans-serif; }
  .learn h1{ font-size: 18pt; margin: 0 0 8px; }
  .print-mark{ color: #111; }
  .tbl.cmp th, .tbl.cmp td{ position: static; white-space: normal; }
  .printable{ padding: 10px 14px; }
}
@media print{
  body{ font-size: 10.5pt; }
  .printable p, .printable li, .print-dates{ font-size: 10pt; line-height: 1.35; margin: 4px 0; }
  .printable .tbl th, .printable .tbl td{ padding: 3px 8px; font-size: 10pt; }
  .printable .tbl caption{ font-size: 9pt; padding: 0 0 2px; }
  .printable h3{ font-size: 12pt; margin: 8px 0 2px; }
  .print-foot{ break-inside: avoid; margin-top: 10px; }
  .print-foot p{ font-size: 9pt; }
  @page{ margin: 12mm; }
}
/* test-web M3 (CLS 0.115): the tool link in the guides' first-screen line was an inline-flex 44 px box; when the web font swapped in it
   jumped to another line and changed the paragraph height. Links inside a sentence are exempt from the target-size rule (WCAG 2.5.8). */
.learn .learn-tool a{ display: inline; min-height: 0; padding: 0; }
/* test-web M3, second cause: on phones the first-screen tool line sat on a 2-or-3-line wrap edge, so the font swap changed its height.
   Reserve three lines below 520 px (every guide's tool line is two or three lines there). */
@media (max-width: 519px){ .learn .learn-tool{ min-height: calc(3 * 1.85em); } }
/* comparison tables: from 560 px cells wrap so the table fits the column; below it the first column sticks and the rest scrolls.
   The jet lag tables have three columns and wrap at every width. */
@media (min-width: 560px){ .tbl.cmp th, .tbl.cmp td{ white-space: normal; } .tbl.cmp{ width: 100%; } .tbl.sunrise th, .tbl.sunrise td{ padding: 6px 4px; } }
.tbl.jetdays th, .tbl.jetdays td, .tbl.jetdays3 th, .tbl.jetdays3 td{ white-space: normal; }

/* fix round 2 (R5): comparison-table captions sit above the scrolling wrapper, so they never scroll away or clip */
.tbl-cap{ margin: 12px 0 4px; font-size: 16px; color: var(--text-muted); }
.tbl-cap + .tbl-wrap{ margin-top: 0; }
.tbl.cmp tbody th abbr{ text-decoration: none; }
.printable .tbl small{ color: var(--text-muted); font-size: 16px; }
.tbl.cmp td.wrap{ white-space: normal; min-width: 5.2em; } /* C1: the nap range wraps so nap + caffeine fit beside the sticky shift column at 375 */

/* ===== /app/ page (2026-10-22, approved mockup context/mockups/app-page-20261022/) ===== */
/* phone frame: copied from WEB-onecalc.co/site-v3/static/style.css (Samsung Galaxy A36, v4) */
/* phone frame: Samsung Galaxy A36, matched to the Owner's photo of the real phone (2026-10-20).
   Body 78.2 x 162.9 mm (ratio 2.083), 19.5:9 screen. Sizes in % of the phone width (cqw), so every phone looks the same:
   light aluminium edge 1.3 + black bezel 2.6 (even all round), body corner 12, screen corner 8.1, status bar 9 with a 5 cqw
   punch hole, Samsung 3-button nav bar 11.5. Phones always show the full screen; .crop only sets the width.
   2.0.0 screenshots: crop below Android's status bar and above its nav bar (the frame draws both).
   Revert copies: _work/pre-phone-frame-20261020/ (style.css = thick 1st frame, style-v1-rounded, style-v2-a36-cropped, style-v3-thin). */
.phone { --sb: 9cqw; --nb: 11.5cqw; --ph: 4.6cqw; --icons: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 10'%3E%3Cpath d='M2 8.5 6 3.5 10 8.5Z' fill='%231C1C1A'/%3E%3Cpath d='M12 8.5h1.6v-2H12zm2.6 0h1.6v-3.5h-1.6zm2.6 0h1.6V3h-1.6z' fill='%231C1C1A'/%3E%3Crect x='22.5' y='2' width='9.5' height='6.5' rx='1.6' fill='none' stroke='%231C1C1A' stroke-width='1'/%3E%3Crect x='24' y='3.5' width='5.5' height='3.5' rx='.6' fill='%231C1C1A'/%3E%3Cpath d='M32.6 4.2v2.1' stroke='%231C1C1A' stroke-width='1'/%3E%3C/svg%3E"); --nav: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 92 10' fill='none' stroke='%23555752' stroke-width='.5' stroke-linecap='round'%3E%3Cpath d='M19.3 3.2v3.6M21 3.2v3.6M22.7 3.2v3.6'/%3E%3Crect x='44' y='3' width='4' height='4' rx='1.4'/%3E%3Cpath d='M71.4 3 69.4 5l2 2'/%3E%3C/svg%3E");
  container-type: inline-size; position: relative; aspect-ratio: 782 / 1629; border-radius: 12% / 5.76%; overflow: hidden;
  background: linear-gradient(100deg, #AEB6BC, #DCE2E6 22%, #C3CBD0 50%, #E2E7EA 78%, #A9B1B7);
  box-shadow: 0 0 0 1px #8E979E, 0 18px 34px -16px #1C1C1A70; }
.phone::before { content: ""; position: absolute; inset: 3.9cqw 3.9cqw 4cqw; border-radius: 8.1cqw; background: #fff; box-shadow: 0 0 0 2.6cqw #0A0A0B; }
.phone img, .phone .shot-todo { position: absolute; z-index: 1; left: 3.9cqw; top: calc(3.9cqw + var(--sb)); width: 92.2cqw; height: calc(100% - 7.9cqw - var(--sb) - var(--nb)); object-fit: contain; object-position: top; background: #fff; }
.phone::after { content: "12:30"; position: absolute; z-index: 2; inset: 3.9cqw 3.9cqw 4cqw; padding-left: 8cqw; font: 600 3.6cqw/var(--sb) Inter, system-ui, sans-serif; color: #1C1C1A; pointer-events: none;
  background:
    radial-gradient(circle 2.75cqw at 50% var(--ph), #0A0A0B 2.3cqw, #26282C 2.55cqw, #0000 2.75cqw),
    var(--icons) right 7cqw top calc(var(--sb) / 2 - 1.8cqw) / 13cqw 3.6cqw no-repeat,
    var(--nav) center bottom calc(var(--nb) / 2 - 5cqw) / 92.2cqw 10cqw no-repeat; }
/* .crop = a full phone at a set width (was a cut-off top; Owner 2026-10-20: full screens only) */
.crop { width: min(var(--cw, 200px), 100%); margin: 0 auto; }
.crop.short { --cw: 170px; }

/* Lull is always dark: dark status + nav bars on the A36 frame (light icons), so the bars match the app screens */
.phone { --icons: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 10'%3E%3Cpath d='M2 8.5 6 3.5 10 8.5Z' fill='%23ECE8E1'/%3E%3Cpath d='M12 8.5h1.6v-2H12zm2.6 0h1.6v-3.5h-1.6zm2.6 0h1.6V3h-1.6z' fill='%23ECE8E1'/%3E%3Crect x='22.5' y='2' width='9.5' height='6.5' rx='1.6' fill='none' stroke='%23ECE8E1' stroke-width='1'/%3E%3Crect x='24' y='3.5' width='5.5' height='3.5' rx='.6' fill='%23ECE8E1'/%3E%3Cpath d='M32.6 4.2v2.1' stroke='%23ECE8E1' stroke-width='1'/%3E%3C/svg%3E"); --nav: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 92 10' fill='none' stroke='%23B9B4AC' stroke-width='.5' stroke-linecap='round'%3E%3Cpath d='M19.3 3.2v3.6M21 3.2v3.6M22.7 3.2v3.6'/%3E%3Crect x='44' y='3' width='4' height='4' rx='1.4'/%3E%3Cpath d='M71.4 3 69.4 5l2 2'/%3E%3C/svg%3E"); }
.phone::before, .phone img { background: #05060B; }
.phone::after { color: #ECE8E1; }

.app .crumbs{ font-size:16px; color:var(--text-muted); margin:0 0 6px; }
.app .crumbs a{ color:var(--text-secondary); display:inline-flex; align-items:center; min-height:48px; }
.app .crumbs span[aria-hidden]{ margin:0 8px; }
.app{ padding-top:6px; }
.app .steps, .app .adv, .app .feat{ padding-left:0; }
.app p, .app li{ font-size:16px; }
.app .lede{ font-size:17px; line-height:1.65; color:var(--text-body); margin:0 0 6px; }
.app h3{ font-family:var(--font-display); font-weight:500; font-size:19px; line-height:1.3; color:var(--text-primary); margin:0 0 6px; }

.app .play{ display:inline-flex; align-items:center; line-height:0; margin:6px 0 0 calc(-200px * 41 / 646); border-radius:10px; }
.app .play img{ width:200px; height:auto; display:block; }
.app .play-row{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 18px; margin:10px 0 4px; }
.app .micro{ font-size:16px; line-height:1.5; color:var(--text-secondary); margin:6px 0 0; }

.app /* hero visual: the 6:45 result card → the timer line it sets, .app next to the full screen */
.hero-vis{ display:grid; grid-template-columns:minmax(0,1fr) 168px; gap:14px; align-items:center; margin:22px 0 6px; }
.app .hero-vis .pair{ display:flex; flex-direction:column; gap:6px; }
.app .hero-vis .chip-shot{ margin:0; }
.app .hero-vis .chip-shot img{ display:block; width:100%; height:auto; border-radius:12px; box-shadow:0 10px 24px -14px #000; }
.app .hero-vis .chip-shot figcaption{ font-size:16px; line-height:1.35; color:var(--text-secondary); margin:6px 0 0; }
.app .hero-vis .arrow{ display:flex; align-items:center; gap:8px; color:var(--glow); font-size:16px; padding-left:4px; }
.app .hero-vis .arrow svg{ flex:none; }
.app .hero-vis .crop{ --cw:168px; }
.app .hero-cap{ font-size:16px; color:var(--text-muted); margin:4px 0 0; }

.app /* steps */
.steps{ list-style:none; padding:0; margin:8px 0 0; display:grid; gap:26px; counter-reset:s; }
.app .steps > li{ display:grid; grid-template-columns:minmax(0,1fr) 136px; gap:16px; align-items:center; margin:0; }
.app .steps .crop{ --cw:136px; }
.app .steps .n{ display:inline-grid; place-items:center; width:32px; height:32px; border-radius:50%; background:var(--glow-tint); color:var(--glow); font-weight:600; font-size:16px; margin-bottom:8px; }
.app .steps p{ margin:0; color:var(--text-body); }

.app /* advantages, .app ranked */
.adv{ list-style:none; padding:0; margin:6px 0 0; display:grid; gap:12px; }
.app .adv li{ margin:0; padding:14px 16px 14px 58px; position:relative; background:var(--surface-1); border:.5px solid var(--border); border-radius:var(--radius-md); }
.app .adv li::before{ counter-increment:a; content:counter(a); position:absolute; left:16px; top:14px; width:28px; height:28px; border-radius:50%; border:1px solid var(--glow); color:var(--glow); display:grid; place-items:center; font-size: 16px; font-weight:600; }
.app .adv{ counter-reset:a; }
.app .adv strong{ display:block; font-family:var(--font-display); font-size:18px; line-height:1.35; margin-bottom:4px; }
.app .adv p{ margin:0; color:var(--text-body); line-height:1.6; }
.app .adv li:first-child{ border-color:var(--glow); background:linear-gradient(var(--glow-tint), var(--glow-tint)), var(--surface-1); }

.app .feat{ list-style:none; padding:0; margin:6px 0 0; display:grid; gap:12px; }
.app .feat li{ margin:0; padding:14px 16px; background:var(--surface-1); border:.5px solid var(--border); border-radius:var(--radius-md); }
.app .feat strong{ display:block; font-family:var(--font-display); font-size:18px; line-height:1.35; margin-bottom:4px; }
.app .feat p{ margin:0; color:var(--text-body); line-height:1.6; }
.app .feat-a li{ border:1px solid var(--glow); background:linear-gradient(var(--glow-tint), var(--glow-tint)), var(--surface-1); }
.app .feat-b li{ padding-left:44px; position:relative; }
.app .feat-b li::before{ content:""; position:absolute; left:16px; top:21px; width:12px; height:7px; border-left:2px solid var(--glow); border-bottom:2px solid var(--glow); transform:rotate(-45deg); }
.app .foot{ font-size:16px; color:var(--text-muted); margin:10px 0 0; }
.app .flow{ margin:22px 0 0; padding:14px 16px; border-left:3px solid var(--glow); background:var(--surface-1); border-radius:0 var(--radius-sm) var(--radius-sm) 0; }
.app .flow p{ margin:0; color:var(--text-primary); }
.app .looks{ margin:22px 0 0; padding:18px 14px 16px; background:var(--surface-1); border:.5px solid var(--border); border-radius:var(--radius-lg); }
.app .looks-phones{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.app .looks .crop{ --cw:150px; }
.app .looks figcaption{ font-size:16px; line-height:1.6; color:var(--text-body); margin:14px 2px 0; }
.app .looks figcaption strong{ font-family:var(--font-display); font-size:18px; color:var(--text-primary); }
@media (min-width:768px){ .app .feat{ grid-template-columns:1fr 1fr; } .app .looks .crop{ --cw:200px; } }

.app /* comparison: Lull fixed + one rival at a time under 768 px; full grid from 768 px */
.cmp{ margin:6px 0 0; }
.app .cmp > input{ position:absolute; opacity:0; width:1px; height:1px; pointer-events:none; }
.app .cmp fieldset{ border:0; margin:0 0 10px; padding:0; }
.app .cmp legend{ font-size:16px; color:var(--text-secondary); margin-bottom:8px; padding:0; }
.app .cmp .tabs{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.app .cmp .tabs label{ display:flex; align-items:center; justify-content:center; text-align:center; min-height:48px; padding:6px 10px; border-radius:var(--radius-sm); border:1px solid var(--border-strong); color:var(--text-secondary); font-size:16px; font-weight:500; cursor:pointer; }
.app #r1:checked ~ fieldset label[for=r1], .app #r2:checked ~ fieldset label[for=r2], .app #r3:checked ~ fieldset label[for=r3], .app #r4:checked ~ fieldset label[for=r4]{ background:var(--accent); border-color:var(--accent); color:var(--btn-ink); }
.app #r1:focus-visible ~ fieldset label[for=r1], .app #r2:focus-visible ~ fieldset label[for=r2], .app #r3:focus-visible ~ fieldset label[for=r3], .app #r4:focus-visible ~ fieldset label[for=r4]{ outline:2px solid var(--glow); outline-offset:2px; }
.app .cmp table{ width:100%; border-collapse:collapse; font-size:16px; line-height:1.45; }
.app .cmp td{ width:31%; }
.app .cmp th, .app .cmp td{ text-align:left; vertical-align:top; padding:10px 8px; border-bottom:.5px solid var(--border); color:var(--text-body); }
.app .cmp thead th{ font-size:16px; color:var(--text-primary); font-weight:600; border-bottom:1px solid var(--border-strong); }
.app .cmp thead th a{ color:var(--accent); display:inline-flex; align-items:center; min-height:48px; margin:-12px 0; }
.app .faq-block p a{ padding:15px 0; }
.app .cmp tbody th{ font-weight:500; color:var(--text-primary); width:38%; }
.app .cmp .lull{ background:var(--glow-tint); color:var(--text-primary); }
.app .cmp .grp th{ padding-top:18px; font-family:var(--font-display); font-size:17px; font-weight:500; color:var(--glow); border-bottom:0; }
.app .cmp .c1, .app .cmp .c2, .app .cmp .c3, .app .cmp .c4{ display:none; }
.app #r1:checked ~ .tw .c1, .app #r2:checked ~ .tw .c2, .app #r3:checked ~ .tw .c3, .app #r4:checked ~ .tw .c4{ display:table-cell; }
.app .cmp .yes{ color:var(--glow); font-weight:600; }
.app .stamp{ font-size:16px; color:var(--text-muted); margin:12px 0 0; }
.app .fit{ margin:18px 0 0; padding:14px 16px; border-left:3px solid var(--accent); background:var(--surface-1); border-radius:0 var(--radius-sm) var(--radius-sm) 0; }
.app .fit p{ margin:0; color:var(--text-primary); }
@media (min-width:768px){
  .app .cmp fieldset{ display:none; }
  .app .cmp .c1, .app .cmp .c2, .app .cmp .c3, .app .cmp .c4{ display:table-cell !important; }
  .app .cmp tbody th{ width:22%; }
  .app .cmp table{ font-size: 16px; table-layout:fixed; }
  .app .cmp td{ width:auto; }
  .app .cmp-wide{ width:min(940px, calc(100vw - 40px)); margin-left:50%; transform:translateX(-50%); }
}

.app /* price */
.price{ margin:6px 0 0; padding:6px 18px 14px; background:var(--surface-1); border:.5px solid var(--border); border-radius:var(--radius-md); }
.app .price .big{ font-family:var(--font-display); font-size:22px; color:var(--text-primary); margin:12px 0 6px; }
.app .price ul{ margin:0; padding-left:20px; }
.app .price li{ color:var(--text-body); }

.app /* questions */
.faq details{ border-bottom:.5px solid var(--border); }
.app .faq-block summary{ min-height:48px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; cursor:pointer; font-size:17px; font-weight:500; color:var(--text-primary); list-style:none; }
.app .faq-block summary::-webkit-details-marker{ display:none; }
.app .faq-block summary::after{ content:"+"; font-size:22px; color:var(--accent); flex:none; }
.app .faq-block details[open] summary::after{ content:"\2212"; }
.app .faq-block details p{ margin:0 0 14px; }

.app /* closing */
.closing{ margin:34px 0 10px; padding:22px 18px; text-align:left; background:radial-gradient(ellipse at 20% 0%, var(--halo), transparent 70%), var(--surface-1); border:.5px solid var(--border); border-radius:var(--radius-lg); }
.app .closing h2{ margin:0 0 6px; }
.app .closing .qr{ display:none; }
@media (min-width:768px){
  .app .closing{ display:grid; grid-template-columns:1fr auto; gap:24px; align-items:center; }
  .app .closing .qr{ display:flex; align-items:center; gap:14px; color:var(--text-secondary); font-size:16px; max-width:230px; }
  .app .closing .qr img{ width:98px; height:98px; background:#fff; padding:6px; border-radius:10px; }
  .app .steps{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:22px; }
  .app .steps > li{ grid-template-columns:1fr; align-items:start; }
  .app .steps .crop{ --cw:190px; order:2; }
  .app .adv{ grid-template-columns:1fr 1fr; }
  .app .hero-vis{ grid-template-columns:minmax(0,1fr) 220px; gap:28px; }
  .app .hero-vis .crop{ --cw:220px; }
}
/* tool results + home: one text link to /app/ (2026-10-22) */
.article .res-app{ margin:14px 0 0; font-size:16px; color:var(--text-secondary); }
.res-app a{ color:var(--accent); text-decoration:underline; text-underline-offset:.15em; display:flex; align-items:center; min-height:48px; line-height:1.5; }
.app .faq-block summary:before, .app .faq-block details[open] summary:before{ content:none; }
/* 2026-10-22: the desktop "App" item needs ~70 px more header row; header only, the content column stays 680 px */
@media (min-width:760px){ .site-header{ max-width:760px; } }
/* /app/ has its own tagged QR in the closing block: no footer QR there (2026-10-22, test-web) */
body.app-page .footer-qr{ display:none !important; }

/* ---- 2026-10-22 fix round (tool-index diagnosis F1-F4) + funnel plan A3-A7 ---- */
/* F1: the static quick answer under each tool's intro */
.article .tp-quick{ margin: 4px 0 14px; padding: 10px 14px; font-size: 16px; line-height: 1.55; color: var(--text-body); background: var(--surface-1); border-left: 3px solid var(--glow); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.tp-quick strong{ color: var(--text-primary); }
/* F2: static answer tables (nap, caffeine, sleep debt) wrap at every width, so no sideways scroll at 375 */
.tp-answers{ margin-top: 26px; }
.tbl.ans th, .tbl.ans td{ white-space: normal; }
.tbl.ans tbody th{ text-transform: none; letter-spacing: 0; font-size: inherit; font-weight: 600; text-align: left; color: var(--text-primary); }
/* F3: the share box label is no longer an h2 */
.share .share-h{ margin: 0 0 6px; font: 600 17px/1.3 var(--font-display); color: var(--text-primary); }
/* F4: home's short tool list; the hub's question table */
.tp-more-list{ margin: 8px 0 12px; padding-left: 1.2em; }
.tp-more-list li{ margin: 0; }
.tp-more-list a{ display: inline-flex; align-items: center; min-height: 48px; color: var(--accent); text-decoration: underline; text-underline-offset: .15em; }
@media (min-width: 560px){ .tp-more-list{ columns: 2; column-gap: 28px; } }
.tbl.qa td{ vertical-align: middle; }
.tbl.qa td a{ display: inline-flex; align-items: center; min-height: 48px; }
/* test-web nit (C1): the shift labels ("6p–6a") stay lower case */
.tbl.shifts tbody th{ text-transform: none; letter-spacing: 0; }
/* A7: the app line inside a guide, and the DST PDF line (print only) */
.article .learn-app{ margin: 18px 0; padding: 2px 16px; border-left: 3px solid var(--glow); background: var(--surface-1); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.print-only{ display: none; }
@media print{ .print-only{ display: block; } }
/* A5: /app/ hero Android line, the way back to the calculators, anchors below the sticky header */
.app .android-only{ margin: 0; font-size: 16px; color: var(--text-secondary); }
.app .app-tools{ margin: 6px 0 0; font-size: 16px; }
.app .app-tools a{ display: inline-flex; align-items: center; min-height: 48px; color: var(--accent); text-decoration: underline; text-underline-offset: .15em; }
.app [id]{ scroll-margin-top: 80px; }

/* ---- image round 2026-10-22: Unsplash photos (16:9, lazy) and the tool charts ---- */
.article .photo{ margin: 22px 0 26px; }
.article .photo img{ display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: var(--radius-md); background: var(--surface-1); }
.article .photo figcaption{ margin: 8px 0 0; font-size: 16px; line-height: 1.5; color: var(--text-secondary); }
.photo .credit{ display: block; margin-top: 2px; font-size: 16px; color: var(--text-muted); }
.photo .credit a{ color: var(--text-muted); text-decoration: underline; text-underline-offset: .15em; }
.tool-chart svg{ max-width: 520px; }

/* ---- learn batch 1b (2026-10-23) ---- */
/* "Latest guides" (content plan 2b, mockup variant B): inside the reading column; phones = compact rows, >=760 px = 2x2 cards */
.latest{ margin: 34px 0 0; }
.latest-head{ display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
.article .latest-head h2{ margin: 0; }
.latest-all{ display: inline-block; padding: 14px 0; font-size: 16px; color: var(--accent); text-decoration: underline; text-underline-offset: .15em; white-space: nowrap; }
.latest-all:hover{ color: var(--glow); }
.latest-grid{ display: grid; grid-template-columns: minmax(0,1fr); gap: 10px; }
.latest-card{ margin: 0; min-width: 0; }
.latest-link{ display: grid; grid-template-columns: 112px minmax(0,1fr); gap: 12px; align-items: start; min-height: 72px; padding: 10px 12px 10px 10px;
  background: var(--surface-1); border: 0.5px solid var(--border); border-radius: var(--radius-md); text-decoration: none; color: inherit; transition: border-color .15s ease; }
.latest-link:hover{ border-color: var(--border-strong); }
.latest-link:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }
.latest-link:hover h3, .latest-link:focus-visible h3{ text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: .15em; }
.latest-img{ display: block; width: 112px; height: 63px; border-radius: var(--radius-sm); background: var(--bg); object-fit: cover; }
.latest-body{ min-width: 0; }
.article .latest-card h3{ font-family: var(--font-display); font-weight: 500; font-size: 17px; line-height: 1.3; color: var(--text-primary); margin: 0 0 4px; } /* phone-first rule (text >= 16 px): titles and hooks wrap instead of being cut */
.article .latest-card .latest-hook{ font-size: 16px; line-height: 1.4; color: var(--text-secondary); margin: 0; }
.article .latest-card .latest-meta{ display: none; }
@media (min-width: 760px){
  .latest-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .latest-link{ display: flex; flex-direction: column; gap: 0; height: 100%; padding: 0; overflow: hidden; align-items: stretch; }
  .latest-img{ width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 0; border-bottom: 0.5px solid var(--border); }
  .latest-body{ display: flex; flex-direction: column; flex: 1; padding: 14px 18px 16px; }
  .article .latest-card h3{ font-size: 16.5px; margin-bottom: 6px; white-space: normal; }
  .article .latest-card .latest-hook{ font-size: 16px; line-height: 1.5; }
  .article .latest-card .latest-meta{ display: block; margin: auto 0 0; padding-top: 10px; font-size: 16px; line-height: 1.4; letter-spacing: .06em;  color: var(--text-muted); }
}
@media (prefers-reduced-motion: reduce){ .latest-link{ transition: none; } }
.tp-trust h2{ margin-top: 34px; }
/* each guide's own "Published" date (CalcThat rule, Owner 2026-10-16) and the 1b "In short" box (upgrade A1) */
.learn .published{ margin: -4px 0 10px; font-size: 16px; color: var(--text-muted); }
.in-short{ margin: 14px 0 16px; padding: 12px 16px 8px; background: var(--surface-1); border: 0.5px solid var(--border); border-left: 3px solid var(--glow); border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.article .in-short .in-short-h{ margin: 0 0 4px; font-family: var(--font-display); font-size: 16px; line-height: 1.3; color: var(--text-primary); }
.in-short ul{ margin: 0; padding-left: 18px; }
.article .in-short li{ margin: 0 0 6px; font-size: 16px; line-height: 1.5; }
/* /learn/ hub: Data / Guide tag on each card */
.lg-tag{ display: inline-block; margin-right: 6px; padding: 0 8px; border: 1px solid var(--border-strong); border-radius: 999px; font-size: 16px; line-height: 1.5; color: var(--text-secondary); }
/* the 1b mini-calcs and routine tables */
.learn-result + .learn-result{ margin-top: 4px; }
.tbl.f1 td small{ font-size: 16px; color: var(--text-muted); }
.tbl.f1 td{ white-space: nowrap; }
@media print{ .in-short, .published{ display: none !important; } }
.tbl.f1 tbody th{ text-transform: none; letter-spacing: 0; white-space: nowrap; }
@media print{
  .printable .tbl-wrap{ overflow: visible !important; }
  .tbl.f1{ width: 100%; table-layout: fixed; }
  .tbl.f1 th, .tbl.f1 td{ white-space: normal !important; font-size: 9.5pt !important; padding: 3px 5px !important; }
  .tbl.f1 thead th:first-child{ width: 13%; }
}
/* 1b fix round (test-web m3): the G1 three-week table at 375 px: row headers wrap, so a data column shows before the swipe */
.tbl.g1 tbody th{ text-transform: none; letter-spacing: 0; white-space: normal; min-width: 0; width: 34%; max-width: 128px; }
@media (max-width: 559.98px){ .tbl.g1 tbody th{ width: 112px; max-width: 112px; } }
.tbl.g1 td{ white-space: normal; min-width: 7.5em; }
@media print{ .tbl.f1 td small{ font-size: 8.5pt !important; } }

/* ---------------------------------------------------------------------------
   R2 S1 site-wide (2026-11-12): A7 taps/text, B2 three surfaces, B7 small fixes, S1/S2 menus, skip link.
   --------------------------------------------------------------------------- */
body{ font-size: 17px; }
.skip-link{ position:absolute; left:12px; top:-100px; z-index:100; padding:12px 16px; min-height:48px; box-sizing:border-box; background: var(--surface-2); color: var(--text-primary); border-radius: var(--radius-sm); font-weight:600; text-decoration:none; }
.skip-link:focus{ top:8px; }
/* header tagline (10-final-text): wide screens only */
.site-header .logo-tag{ display:none; }
@media (min-width: 1180px){ .site-header .logo-tag{ display:inline; margin-left:10px; font-family: var(--font-body); font-style:normal; font-size:16px; font-weight:400; color: var(--text-muted); } }
/* B7: moon "App" pill (was the Android robot) */
.nav-app{ gap:6px; padding:0 14px; border:1px solid var(--border-strong); border-radius:999px; color: var(--text-primary); font-weight:600; text-decoration:none; }
.nav-app svg{ flex:none; color: var(--glow); }
.nav-app .nav-app-label{ position:static; width:auto; height:auto; margin:0; overflow:visible; clip:auto; font-size:16px; }
.nav-toggle{ width:48px; height:48px; }
/* A7: chrome taps >= 48 px (menu, footer, crumbs, stamp link) */
.nav-dropdown-menu a, .nav-dropdown-link-btn, .mobile-nav a, .mobile-nav-link-btn{ display:flex; align-items:center; min-height:48px; box-sizing:border-box; }
.footer-col a, .footer-link-btn, .footer-review-note a, .disclaimer a{ display:inline-flex; align-items:center; min-height:48px; }
.breadcrumbs a{ display:inline-flex; align-items:center; min-height:48px; padding:0 8px; }
.article .page-stamp{ line-height:48px; }
.article .page-stamp a{ display:inline-flex; align-items:center; min-height:48px; }
/* S1: Calculators by situation (V3 glyphs); S2: Guides by topic */
.nav-sit{ gap:12px; }
.nav-sit-g{ flex:none; display:inline-flex; color: var(--glow); }
.nav-sit-t{ display:flex; flex-direction:column; line-height:1.3; color: var(--text-primary); }
.nav-sit-t small{ font-size:16px; font-weight:400; color: var(--text-muted); }
.nav-all{ font-weight:600; }
.nav-topic{ margin:10px 0 0; padding:8px 10px 2px; font-size:16px; font-weight:600; color: var(--text-muted); }
.main-nav #navCalcMenu{ min-width:300px; }
.main-nav #navGuideMenu{ min-width:320px; max-height:75vh; overflow-y:auto; }
.mobile-nav .nav-sit{ padding:8px 10px; }
/* B2: three surfaces (lit tool card, notes without a box, sharp tables): no gold left stripes, no boxed note inside a card */
.method-panel, .result p.tp-whatif, .limits, .app .flow, .app .fit, .article .tp-quick, .article .learn-app, .in-short{
  background:none; border:0; border-top:1px solid var(--border); border-radius:0; padding-left:0; padding-right:0; box-shadow:none; }
.night-list .odd{ border-left:0; padding-left:0; }
/* B7: guide links lighter than body text (were darker), accent underline keeps them findable */
.article.learn p a, .article.learn li a, .article.learn td a{ color: var(--text-primary); text-decoration-color: var(--accent); }

/* R2 S1b (2026-11-12): 375 walk fixes. Short links (footer, crumbs) and table links reach 48 px; "All" link 47 -> 48. */
.footer-col a, .crumbs a{ min-width:48px; justify-content:center; }
.footer-col a{ justify-content:flex-start; }
td a{ display:inline-flex; align-items:center; min-height:48px; min-width:48px; }
.article h2 > a, .latest-all{ display:inline-flex; align-items:center; min-height:48px; }

/* ---- R2 S2 shared result components (2026-11-12): the R1 home card, result, Why, Share and app card, moved here from
   home-page.mjs HOME_CSS (page-scoped in R1) so the home and the 7 tools use one copy. .hm = the home <main> and each tool shell. */
.hm p,.hm ul,.hm ol{font-size:17px;line-height:1.6}
.hm-more{display:inline-flex;align-items:center;min-height:48px}
.hm h1{font-size:27px;line-height:1.16;margin:2px 0 6px}
.hm .hm-lede{font-size:17px;line-height:1.5;color:var(--text-body);margin:0 0 16px}
.hm .num{font-variant-numeric:tabular-nums;white-space:nowrap}
.hm .hm-card{position:relative;border-radius:24px;border:1px solid var(--border);padding:18px 16px 16px;background:radial-gradient(ellipse 120% 70% at 50% 0%,rgba(255,217,138,.075) 0%,rgba(255,217,138,0) 70%),var(--surface-1)}
.hm .hm-res{margin-top:12px}
.hm button{font-family:var(--font-body);cursor:pointer}
.hm button:focus-visible,.hm a:focus-visible,.hm input:focus-visible,.hm summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.hm .hm-now{width:100%;min-height:68px;display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:16px;background:var(--surface-3);border:0;color:var(--text-primary);text-align:left}
.hm .hm-ic{width:34px;height:34px;border-radius:50%;background:var(--glow-tint);display:grid;place-items:center;color:var(--glow);flex:none}
.hm .hm-now b{display:block;font:600 18px/1.25 var(--font-body)}
.hm .hm-now small{display:block;font-size:16px;line-height:1.3;color:var(--text-secondary);margin-top:2px}
.hm .hm-now[aria-pressed="true"]{box-shadow:inset 0 0 0 1px rgba(245,205,138,.38)}
.hm .hm-helper{font-size:16px;line-height:1.45;color:var(--text-secondary);margin:9px 2px 0}
.hm .hm-or{display:flex;align-items:center;gap:10px;color:var(--text-muted);font:italic 500 16px/1 var(--font-display);margin:12px 0 6px}
.hm .hm-or::before,.hm .hm-or::after{content:"";flex:1;height:1px;background:var(--border)}
.hm .hm-lbl{display:block;font-size:16px;font-weight:500;color:var(--text-secondary);margin:0 0 6px}
.hm .hm-field{position:relative}
.hm .hm-field input{width:100%;height:64px;border-radius:16px;background:var(--bg-2);border:1px solid var(--border-strong);color:var(--text-primary);padding:0 84px 0 16px;font:500 32px/1 var(--font-display);font-variant-numeric:tabular-nums;color-scheme:dark;min-width:0}
.hm .hm-field input::-webkit-calendar-picker-indicator{opacity:0;position:absolute;inset:0;width:auto;height:auto;cursor:pointer}
.hm .hm-chg{position:absolute;right:16px;top:50%;transform:translateY(-50%);font-size:16px;color:var(--accent);pointer-events:none}
.hm .hm-chips{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin:10px 0 0}
.hm .hm-chips[hidden]{display:none}
.hm .hm-chip{height:48px;border-radius:12px;border:1px solid var(--border-strong);background:transparent;color:var(--text-body);font:500 17px var(--font-body);font-variant-numeric:tabular-nums;padding:0}
.hm .hm-chip[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-tint);color:var(--text-primary);box-shadow:inset 0 0 0 1px var(--accent)}
.hm .hm-age{margin-top:12px;border-radius:12px;border:1px solid var(--border-strong)}
.hm .hm-age summary{list-style:none;min-height:48px;display:flex;align-items:center;justify-content:space-between;padding:0 14px;font-size:17px;color:var(--text-body);cursor:pointer}
.hm .hm-age summary::-webkit-details-marker{display:none}
.hm .hm-age summary b{color:var(--text-primary);font-weight:600}
.hm .hm-age-v{color:var(--accent);display:flex;align-items:center;gap:6px;font-size:16px}
.hm .hm-age[open] .hm-age-v svg{transform:rotate(180deg)}
.hm .hm-bands{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:4px 10px 12px}
.hm .hm-band{min-height:56px;padding:8px;border-radius:12px;border:1px solid var(--border-strong);background:transparent;color:var(--text-body);font:500 16px/1.3 var(--font-body);text-align:center}
.hm .hm-band:last-child{grid-column:1/-1}
.hm .hm-band .sub{display:block;font-size:16px;font-weight:400;color:var(--text-muted)}
.hm .hm-band[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-tint);color:var(--text-primary)}
.hm .hm-go{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:56px;border:0;border-radius:16px;background:var(--accent);color:var(--btn-ink);font:600 18px var(--font-body);margin-top:14px;text-decoration:none}
.hm .hm-go:hover{background:var(--accent-strong)}
.hm .hm-switch{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;min-height:48px;margin-top:2px;background:none;border:0;color:var(--accent);font-size:17px}
.hm .hm-switch small{color:var(--text-muted);font-size:16px}
.hm .hm-err{margin:6px 0 0;font-size:16px;color:var(--accent)}
.hm .hm-err:empty{display:none}
.hm .hm-res-h{font:500 21px/1.25 var(--font-display);margin:0;color:var(--text-primary)}
.hm .hm-res-h:focus{outline:none}
.hm .hm-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:2px 0 14px}
.hm .hm-date{font-size:16px;color:var(--text-muted);margin:0}
.hm .hm-tog{min-height:48px;min-width:48px;margin:-12px -6px -12px 0;padding:0 6px;background:none;border:0;color:var(--accent);font:500 16px var(--font-body);text-decoration:underline dotted;text-underline-offset:.28em;white-space:nowrap;flex:none}
.hm .hm-tog[aria-pressed="true"]{text-decoration-style:solid}
.hm .hm-best{display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.hm .hm-big{font:500 52px/1 var(--font-display);font-variant-numeric:tabular-nums;color:var(--glow);letter-spacing:-.01em;white-space:nowrap;margin:0}
.hm .hm-big small{font-size:26px;margin-left:5px}
.hm .hm-badge{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;border-radius:15px;background:var(--glow-tint);color:var(--glow);font:600 16px var(--font-body);border:1px solid rgba(245,205,138,.35);white-space:nowrap;margin-bottom:6px}
.hm .hm-sub{font-size:17px;color:var(--text-secondary);margin:8px 0 2px}
.hm .hm-sub b{color:var(--text-primary);font-weight:600}
.hm .hm-strip{margin:10px 0 0}
.hm .hm-strip svg{display:block;width:100%;height:auto}
.hm .hm-ends{display:flex;justify-content:space-between;font-size:16px;font-weight:600;color:var(--text-primary);margin:2px 0 0}
.hm .hm-cap{font-size:16px;color:var(--text-muted);margin:2px 0 0;text-align:center}
.hm .hm-olbl{font-size:16px;color:var(--text-muted);margin:14px 0 6px}
.hm .hm-olbl:empty{display:none}
.hm .hm-opts{list-style:none;margin:0;padding:0;background:var(--bg-2);border:1px solid var(--border);border-radius:4px}
.hm .hm-opts:empty{display:none}
.hm .hm-opts li{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:56px;padding:6px 14px;margin:0;border-bottom:1px solid var(--border)}
.hm .hm-opts li:last-child{border-bottom:0}
.hm .hm-ot{font:500 23px/1 var(--font-display);font-variant-numeric:tabular-nums;color:var(--text-primary);white-space:nowrap}
.hm .hm-oc{text-align:right;font-size:16px;color:var(--text-body);line-height:1.3}
.hm .hm-oc em{display:block;font-style:normal;color:var(--text-muted)}
.hm .hm-two{margin:14px 0 0;color:var(--text-body)}
.hm .hm-onset{margin:8px 0 0;color:var(--text-body)}
.hm .hm-onset b{color:var(--text-primary);font-weight:600;white-space:nowrap}
.hm .hm-why{margin-top:6px;border-top:1px solid var(--border)}
.hm .hm-why summary{list-style:none;min-height:52px;display:flex;align-items:center;justify-content:space-between;font-size:17px;font-weight:500;color:var(--text-primary);cursor:pointer}
.hm .hm-why summary::-webkit-details-marker{display:none}
.hm .hm-why summary svg{color:var(--accent)}
.hm .hm-why[open] summary svg{transform:rotate(180deg)}
.hm .hm-why ul{margin:0 0 10px;padding-left:20px}
.hm .hm-share{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:48px;margin-top:6px;border-radius:16px;background:transparent;color:var(--accent);border:1px solid var(--border-strong);font:600 17px var(--font-body)}
.hm .hm-msg{margin:8px 0 0;font-size:16px;color:var(--text-secondary);overflow-wrap:anywhere}
.hm .hm-msg:empty{display:none}
.hm .hm-quick{margin:16px 2px 0;color:var(--text-body)}
.hm .hm-quick[hidden]{display:none}
.hm .hm-wd{margin-top:22px}
.hm .hm-wd[hidden]{display:none}
.hm .hm-wd-h{display:flex;align-items:center;gap:9px;font:500 20px/1.25 var(--font-display);margin:0 0 4px}
.hm .hm-wd-h svg,.hm .hm-note h2 svg,.hm .hm-tg{color:var(--glow);flex:none}
.hm .hm-wd-row{display:grid;grid-template-columns:96px 1fr;align-items:center;min-height:52px;border-bottom:1px solid var(--border);gap:8px}
.hm .hm-wd-row[hidden]{display:none}
.hm .hm-wt{font:500 19px var(--font-display);font-variant-numeric:tabular-nums;color:var(--glow);white-space:nowrap}
.hm .hm-wl{font-size:17px;color:var(--text-primary);line-height:1.3;padding:6px 0}
.hm .hm-wl a{display:flex;align-items:center;font-size:16px;min-height:48px;margin:-8px 0 -6px} /* Q2b P3-2: 48 px tap, the negative margins keep the row close to its old height */
.hm .hm-wd-more{display:flex;align-items:center;min-height:48px;font-size:17px}
.hm .related a{display:flex;align-items:center;min-height:48px;font-size:16px}
.hm .faq-block summary{display:flex;align-items:center;gap:4px;min-height:48px;font-size:16px}
.hm .hm-app{border-top:1px solid var(--border);padding-top:20px;margin-top:22px}
.hm .hm-crop{border-radius:12px;overflow:hidden;border:1px solid var(--border-strong);background:#000;margin:0 0 14px}
.hm .hm-crop img{display:block;width:100%;height:auto}
.hm .hm-ser{font:italic 500 21px/1.28 var(--font-display);color:var(--text-primary);margin:0 0 8px}
.hm .hm-app p{color:var(--text-body)}
.hm .hm-app .hm-app-btn{min-height:48px;font-size:17px;margin-top:0}
.hm .hm-note{border-top:1px solid var(--border);padding:18px 0 4px;margin-top:22px}
.hm .limits.hm-note{padding:16px 18px 6px}
.hm .hm-note h2{display:flex;align-items:center;gap:9px;font-size:20px;margin:0 0 8px}
.hm .hm-tiles-s h2{font-size:23px}
.hm .hm-tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.hm .hm-tile{position:relative;background:var(--bg-2);border-radius:4px;padding:14px 12px 12px;display:flex;flex-direction:column;justify-content:space-between;gap:14px;text-decoration:none;min-height:48px}
.hm .hm-tile b{font:500 18px/1.25 var(--font-display);color:var(--text-primary);padding-right:28px}
.hm .hm-tn{font-size:16px;line-height:1.25;color:var(--accent)}
.hm .hm-tg{position:absolute;top:14px;right:12px;display:inline-flex}
.hm .hm-tile-wide{grid-column:1/-1}
.hm .hm-proof{font:italic 16px/1.5 var(--font-display);color:var(--text-secondary)}
.hm .hm-money{font:italic 17px/1.5 var(--font-display);color:var(--text-secondary)}
.hm .tbl,.hm .faq-block summary{font-size:16px}
@media (min-width:760px){.hm h1{font-size:36px}.hm .hm-tiles{grid-template-columns:repeat(4,1fr)}.hm .hm-tile-wide{grid-column:1/-1}}
/* R2 S2 tool shell (the 7 tools): result card first on answer-first tools, inputs card, C5 guide link, app card; B4 two columns >= 1024 px */
.tp-shell{margin:18px 0 8px}
.tp-shell .tool{margin:12px 0 0}
.tp-shell .hm-res .hm-top{margin:0 0 10px}
.tp-shell .hm-res .readout{text-align:left;margin:0 0 4px}
.tp-shell .hm-res .readout-time{font-size:44px;line-height:1.1;font-variant-numeric:tabular-nums}
.tp-shell .hm-res .tp-whatif{background:none;border:0;padding:0;margin:14px 0 6px}
.tp-shell .hm-res .hm-why ul.tp-why{margin:0 0 10px}
.tp-shell .stat-grid{display:block;background:var(--bg-2);border:1px solid var(--border);border-radius:4px;margin:14px 0 0}
.tp-shell .stat{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:56px;padding:6px 14px;background:none;border:0;border-bottom:1px solid var(--border);border-radius:0}
.tp-shell .stat:last-child{border-bottom:0}
.tp-shell .stat b{order:2;font-size:20px;white-space:nowrap;font-variant-numeric:tabular-nums}
.tp-shell .stat span{font-size:16px;line-height:1.3;color:var(--text-body)}
.tp-shell .tp-guide{margin:18px 0 0}
.tp-shell .tp-guide a{display:flex;align-items:center;min-height:48px;font-size:17px}
@media (min-width:1024px){
  .tp-shell{display:grid;grid-template-columns:minmax(420px,1fr) minmax(0,1fr);column-gap:28px;align-items:start;margin-inline:calc(50% - min(540px, 50vw - 24px))}
  .tp-shell > *{grid-column:1}
  .tp-shell > .hm-res{grid-column:2;grid-row:1 / span 3;position:static;top:16px;margin-top:12px}
  .tp-shell > .hm-res.fits{position:sticky} /* R2 S4: sticky only when the card fits the window (nav.js), never an inner scroll */
}
/* R2 S2 (mockup 04, README Q10b): no visible crumb on a tool page under 768 px (BreadcrumbList JSON-LD stays); one line from 768 px */
@media (max-width:767px){.breadcrumbs.tp-crumbs{display:none}}
.tp-shell + .tp-quick{margin:18px 0 0}
.tp-af .hm-res.is-stale{opacity:.45}
.tp-af .hm-res.is-stale .hm-share{pointer-events:none}
/* answer-first: the sticky answer bar keeps its line while a stale result is cleared, so the form does not jump under the finger */
.tp-af .answer-bar{min-height:41px;box-sizing:border-box}
.tp-af .answer-bar:empty{visibility:hidden}
/* R2 S3 (2026-11-12) tool specifics: nap (mockup 04), by-age (05), caffeine (06 + 08). Charts are drawn at the box width, so their
   SVG units are CSS px: 16 px labels on phones; the caffeine curve's axis labels drop to 14 px only from 1024 px (README Q14). */
.tp-shell .tp-tool-h{font:500 19px/1.25 var(--font-display);color:var(--text-primary);margin:0 0 12px}
.tp-shell .tp-chg{display:inline-flex;align-items:center;min-height:48px;min-width:48px;justify-content:flex-end;font-size:16px;color:var(--accent)}
.tp-shell .hm-res .hm-top .hm-res-h{flex:1;min-width:0}
.tp-shell .hm-best .hm-tog{margin-bottom:-6px}
.tp-shell .tool .seg.tp-rows{grid-template-columns:1fr}
.tp-shell .tool .seg.tp-rows button{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:56px;padding:8px 40px 8px 14px}
.tp-shell .tool .seg.tp-rows button small{display:inline}
.tp-shell .tool .seg.tp-rows button[aria-pressed="true"]::after{top:50%;transform:translateY(-50%);right:14px}
.tp-shell .tool details.hm-age{margin:4px 0 0}
.tp-shell .tool details.hm-age > .row{padding:4px 12px 12px}
.tp-shell .tp-stats{margin:14px 0 0}
.tp-shell .tp-stats .hm-oc{text-align:left}
.tp-shell .tp-stats .hm-oc + .hm-oc{text-align:right}
.tp-shell .tp-stats .hm-ot{font-size:20px}
.tp-shell .tp-muted{color:var(--text-muted)}
.tp-shell .tp-stats b{color:var(--text-primary);font-weight:600}
.tp-shell .hm-note.tp-guide h2{font:500 20px/1.3 var(--font-display)}
.tp-shell p.tp-guide{display:flex;gap:10px;align-items:center}
.tp-shell p.tp-guide svg{color:var(--glow);flex:none}
.tp-shell .hm-two:empty{display:none}
/* by-age B5 range chart */
.tp-range{margin:8px 0 0;min-height:1px}
.tp-range svg{display:block;max-width:100%;height:auto;font-family:var(--font-body);font-size:16px}
.tp-shell .tp-you{color:var(--text-primary);margin-top:8px}
.tp-shell .tp-table{margin-top:12px}
.tp-shell .tp-table .tbl-wrap{margin:0 0 10px}
/* caffeine: label row, "By 4:25 PM", two-line drink picker, the folded curve */
.tp-shell .tp-lbl-row{margin:0 0 6px}
.tp-shell .tp-eyebrow{margin:0;font-size:16px;font-weight:600;color:var(--text-secondary)}
.tp-shell .tp-by .tp-by-w{font-size:30px}
.tp-shell .tp-by{white-space:normal}
.tp-shell .caf-sel{position:relative;min-height:56px;border:0.5px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--surface-2);display:flex;align-items:center;justify-content:space-between;padding:6px 12px;color:var(--accent)}
.tp-shell .caf-sel:focus-within{outline:2px solid var(--accent);outline-offset:2px}
.tp-shell .caf-face b{display:block;font-size:17px;font-weight:600;color:var(--text-primary);line-height:1.25}
.tp-shell .caf-face small{display:block;font-size:16px;color:var(--text-secondary);line-height:1.3}
.tp-shell .caf-sel select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;min-height:0}
.tp-shell .drink-row:not(.is-custom) .caf-mg{display:none}
.tp-shell .drink-row{grid-template-columns:minmax(0,1fr) 128px 48px}
.tp-shell .drink-row .wide{grid-column:auto}
.tp-shell .drink-row .caf-mg{grid-column:1 / -1;grid-row:2}
.tp-shell .caf-twrap{position:relative;display:block}
.tp-shell .caf-empty{display:none;position:absolute;inset:1px;align-items:center;padding:0 12px;border-radius:var(--radius-sm);background:var(--surface-2);color:var(--text-muted);font-size:16px;pointer-events:none}
.tp-shell .caf-tw.is-empty .caf-empty{display:flex}
.tp-shell .caf-tw input{min-height:56px}
.tp-shell .tp-curve-d #curve{margin:4px 0 0}
.tp-curve{display:block;max-width:100%;height:auto;font-family:var(--font-body);font-size:16px}
.tp-curve text{fill:#c0b2a0}
@media (min-width:1024px){ .tp-curve text{font-size:14px} }
@media (min-width:560px){ .tp-shell .drink-row{grid-template-columns:minmax(0,1fr) 150px 48px} }
.tp-shell .hm-tog{min-width:48px}

/* R2 S3b: static tool charts (tool-charts.mjs, viewBox 300) drawn near 1:1, so every label is 16 px CSS at 375 and up; no 10.5 px text */
.viz.tool-chart svg{ max-width: 340px; }
.viz.tool-chart text{ font-size: 16px; }
/* R2 S4b: the 10 guide charts get the same rule (viewBox 300 in the learn-*.mjs modules, 16 px labels at 375 and up) */
.viz.guide-chart svg{ max-width: 340px; }
.viz.guide-chart text{ font-size: 16px; }

/* R2 S4: guide top per screen 07 (crumb "Guides > topic", one meta block, sources line, In short as a note, "On this page" 48 px rows) */
.gd-crumb .sep{ margin: 0 2px; }
.gd-meta{ margin: 4px 0 14px; }
.learn .gd-meta p{ margin: 0; font-size: 16px; line-height: 1.5; color: var(--text-secondary); }
.learn .gd-meta .gd-src a{ display: inline-block; min-height: 48px; line-height: 48px; margin: -12px 0; }
.article .in-short{ background: none; border: 0; border-top: 1px solid var(--border); border-radius: 0; padding: 16px 0 2px; margin: 8px 0 16px; }
.article .in-short .in-short-h{ display: flex; align-items: center; gap: 9px; margin: 0 0 8px; font: italic 500 20px/1.3 var(--font-display); color: var(--text-primary); }
.in-short-h svg{ color: var(--glow); flex: none; }
.article .in-short li{ font-size: 17px; margin: 0 0 10px; }
.gd-toc{ margin: 8px 0 24px; }
.article .gd-toc .gd-toc-h{ margin: 0 0 4px; font: italic 500 18px/1.3 var(--font-display); color: var(--text-secondary); }
.gd-toc ul{ list-style: none; margin: 0; padding: 0; }
.gd-toc li{ margin: 0; }
.gd-toc a{ display: flex; align-items: center; min-height: 48px; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 17px; line-height: 1.35; text-decoration: none; }
@media print{ .gd-toc, .gd-src{ display: none !important; } }
/* R2 S4 (/app/ U2): the 8 calculators listed under the browser line, 48 px rows */
.app .app-tools p{ margin: 0; }
.app .app-tools ul{ list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: 1fr; column-gap: 20px; }
.app .app-tools li{ margin: 0; }
.app .app-tools li a{ font-size: 17px; }
@media (min-width:520px){ .app .app-tools ul{ grid-template-columns: 1fr 1fr; } }

/* ---- R2 F1b (2026-11-13) ---- */
/* Q-13: anchor targets ("On this page", About #why) land with room above the heading */
h2[id], h3[id], section[id]{ scroll-margin-top: 16px; }
/* Q-12: the focusable table scrollers show the site focus ring */
.cmp-wrap:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }
/* Q-11: the scroll hint shows only while its table really scrolls (nav.js sets .no-scroll); school-night + weekend tables fit from 1024 px */
.scroll-cue.no-scroll{ display: none !important; }
@media (min-width: 1024px){
  .tbl.f1 td, .tbl.f1 tbody th{ white-space: normal; }
  .tbl.g1 td{ min-width: 0; }
}
/* Q-9: Guides menu in two columns from 1024 px when the window is tall enough, so "All guides" is in view without an inner scroll */
@media (min-width: 1024px) and (min-height: 700px){
  .main-nav #navGuideMenu{ width: 600px; max-height: none; overflow: visible; columns: 2; column-gap: 8px; }
  .main-nav #navGuideMenu > *{ break-inside: avoid; }
  .main-nav #navGuideMenu .nav-topic{ break-after: avoid; }
}
/* Q-9: caffeine drink rows under 560 px: drink + Remove on one line, the time under them at full width (no clipped "08:00 AM",
   the two-line drink face no longer wraps to four lines) */
@media (max-width: 559.98px){
  .tp-shell .drink-row{ grid-template-columns: minmax(0,1fr) 48px; }
  .tp-shell .drink-row .caf-pick{ grid-column: 1; grid-row: 1; }
  .tp-shell .drink-row .caf-rm{ grid-column: 2; grid-row: 1; }
  .tp-shell .drink-row .caf-tw{ grid-column: 1 / -1; grid-row: 2; }
  .tp-shell .drink-row .caf-mg{ grid-column: 1 / -1; grid-row: 3; }
}