/* The site's chrome: the header bar and the footer, shared by the home
   page's copies (built into home.html by tools/build_home.py), the legal
   pages and the app pages. Brand basics v0.1: cream, ink, deep green,
   Newsreader for language, Plex Mono for labels. Moved out of legal.css
   2026-09-06 when the app pages got the same header and footer. */
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/newsreader-400-normal-latin.woff2") format("woff2"); }
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/newsreader-500-normal-latin.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/ibmplexmono-400-normal-latin.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/ibmplexmono-500-normal-latin.woff2") format("woff2"); }

.sitebar { --m: max(0px, (100% - 1440px) / 2); height: 88px; display: flex; align-items: center; justify-content: space-between; padding: 0 calc(var(--m) + 44px) 0 calc(var(--m) + 56px); box-sizing: border-box; }
.sitebar .wm { display: flex; align-items: baseline; gap: 3px; text-decoration: none; }
.sitebar .n { font-size: 21px; font-weight: 500; letter-spacing: -0.01em; color: #14161A; }
.sitebar .d { font-family: "IBM Plex Mono", monospace; font-size: 12px; color: #1F4D3A; }
.sitebar .menu { display: flex; align-items: center; gap: 16px; font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.sitebar .menu .sep { color: rgba(20,22,26,0.22); }
.sitebar .menu a { color: #8C857A; text-decoration: none; }
.sitebar .menu a:hover { color: #14161A; }
.sitebar .menu a.menu-in { margin-left: 12px; color: #1F4D3A; padding: 9px 14px; border: 1px solid rgba(31,77,58,0.35); border-radius: 2px; }
.sitebar .menu a.menu-in:hover { color: #FBFAF7; background: #1F4D3A; border-color: #1F4D3A; }
/* the account, on pages that only open signed in */
.sitebar .menu .acct { font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: 0.04em; text-transform: none; color: #8C857A; margin-left: 10px; }
/* the app pages frame their content at 1560 with 48px gutters (22 below
   1500), so their bar (.sitebar.appbar) takes the same gutters and the
   wordmark lines up with the eyebrow under it */
.sitebar.appbar { max-width: 1560px; margin: 0 auto; padding: 0 48px; }
@media (max-width: 1500px) { .sitebar.appbar { padding: 0 22px; } }

/* the home page footer, copied from web/rows/footer.html */
  #foot { --m: max(0px, (100% - 1440px) / 2); background: #F3F0E8; border-top: 1px solid rgba(20,22,26,0.12); }   /* the panel tint, so it reads as a footer (Robert, 2026-09-05) */
  #foot .inner { padding: 76px calc(var(--m) + 56px) 0; }
  #foot .top { display: grid; grid-template-columns: 360px 1fr; gap: 88px; align-items: start; padding-bottom: 56px; }
  #foot .wordmark { display: flex; align-items: baseline; gap: 3px; margin-bottom: 18px; text-decoration: none; }
  #foot .wordmark .name { font-size: 26px; font-weight: 500; letter-spacing: -0.01em; color: #14161A; }
  #foot .wordmark .tld { font-family: "IBM Plex Mono", monospace; font-size: 13px; color: #1F4D3A; }
  #foot .top p { margin: 0; max-width: 360px; font-size: 16px; line-height: 1.5; color: rgba(20,22,26,0.76); }
  #foot .cta { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
  #foot .cta-btn { display: inline-block; text-decoration: none; font-family: "IBM Plex Mono", monospace; font-size: 13px; letter-spacing: 0.03em; background: #1F4D3A; color: #FBFAF7; border: 0; border-radius: 2px; padding: 17px 26px; cursor: pointer; }
  #foot .cta-btn:hover { background: #163828; color: #FBFAF7; }
  #foot .fine { font-family: "IBM Plex Mono", monospace; font-size: 11px; line-height: 1.6; color: #8C857A; }
  #foot .cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; padding: 6px 0 0; }
  #foot .col { display: flex; flex-direction: column; gap: 14px; }
  #foot .label { font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: #9A9186; }
  #foot .col a { font-size: 16px; color: rgba(20,22,26,0.82); text-decoration: none; }
  #foot .col a:hover { color: #1F4D3A; }
  #foot .col a.mono { font-family: "IBM Plex Mono", monospace; font-size: 13px; color: #1F4D3A; border-bottom: 1px solid rgba(31,77,58,0.3); padding-bottom: 2px; align-self: flex-start; }
  #foot .col a.mono:hover { color: #14161A; border-bottom-color: rgba(20,22,26,0.4); }
  #foot .col p { margin: 4px 0 0; font-family: "IBM Plex Mono", monospace; font-size: 11px; line-height: 1.7; color: #8C857A; }
  #foot .strip { padding: 20px calc(var(--m) + 56px); background: #E2DDD0; border-top: 1px solid rgba(20,22,26,0.14); display: flex; justify-content: space-between; align-items: center; gap: 40px; font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: 0.04em; color: #8C857A; }
  #foot .strip .set { display: flex; align-items: center; gap: 22px; }
  #foot .strip .sep { width: 1px; height: 12px; background: rgba(20,22,26,0.18); }

/* the section links need about 820px beside the wordmark: below 900 only
   Sign in stays, as on the home page (red team, 2026-09-05) */
@media (max-width: 900px) {
  .sitebar { padding: 0 20px; }
  .sitebar .menu a:not(.menu-in), .sitebar .menu .sep { display: none; }
  .sitebar .menu a.menu-in { padding: 12px 14px; }
  #foot .col a { padding: 5px 0; }
  #foot .col { gap: 8px; }
}
@media (max-width: 900px) { .sitebar .menu .acct { display: none; } }

/* tablets (2026-09-05): four footer columns need about 1000px */
@media (max-width: 1200px) {
  #foot .cols { grid-template-columns: 1fr 1fr; gap: 32px; }
  #foot .col a.mono { word-break: break-all; }
}
/* phones (2026-09-05): the footer stacks like the home page's */
@media (max-width: 900px) {
  #foot .inner { padding: 48px 20px 0; }
  #foot .top { grid-template-columns: 1fr; gap: 32px; padding-bottom: 40px; }
  #foot .cols { grid-template-columns: 1fr 1fr; gap: 28px; }
  #foot .strip { flex-direction: column; align-items: flex-start; gap: 10px; padding-left: 20px; padding-right: 20px; }
  #foot .strip .set { flex-wrap: wrap; gap: 10px 14px; }
  #foot .strip .sep { display: none; }
}
@media (max-width: 480px) {
  #foot .cols { grid-template-columns: 1fr; }
}

/* the signed-in pages' own row under the site bar: Search and Your key,
   in the brand green (Robert, 2026-09-06: the site nav stays, this is a
   sub-menu below it in a different colour) */
.subbar { --m: max(0px, (100% - 1440px) / 2); background: #1F4D3A; }
.subbar nav { height: 44px; display: flex; align-items: center; gap: 28px; padding: 0 calc(var(--m) + 56px); box-sizing: border-box; font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }
.subbar a { color: rgba(251,250,247,0.72); text-decoration: none; padding: 4px 0; border-bottom: 1px solid transparent; }
.subbar a:hover { color: #FBFAF7; }
.subbar a.now { color: #FBFAF7; border-bottom-color: #FBFAF7; }
.subbar.appbar nav { max-width: 1560px; margin: 0 auto; padding: 0 48px; }
@media (max-width: 1500px) { .subbar.appbar nav { padding: 0 22px; } }
@media (max-width: 900px) { .subbar nav { padding: 0 20px; height: 42px; gap: 22px; } }

/* "Important, before you start" in the sub-menu, and its pop-up (Robert,
   2026-09-06: a warning people click, so they learn how the key and the
   reports live on the device before it surprises them) */
.subbar a.warn { margin-left: auto; color: #F0D48A; }
.subbar a.warn::before { content: "!"; display: inline-block; width: 15px; height: 15px; margin-right: 8px; border: 1px solid #F0D48A; border-radius: 50%; text-align: center; line-height: 14px; font-size: 10px; }
.subbar a.warn:hover { color: #FBFAF7; }
.dn-scrim { position: fixed; inset: 0; z-index: 95; display: none; align-items: flex-start; justify-content: center; padding: 24px; background: rgba(20,22,26,0.34); overflow-y: auto; -webkit-overflow-scrolling: touch; }
.dn-scrim.on { display: flex; }
.dn { position: relative; width: min(560px, 100%); margin-top: 6vh; background: #FBFAF7; border: 1px solid rgba(20,22,26,0.14); padding: 36px 40px 32px; box-sizing: border-box; font-family: "Newsreader", Georgia, serif; }
.dn .rule { display: block; width: 88px; height: 3px; background: #1F4D3A; margin-bottom: 22px; }
.dn h2 { margin: 0 0 18px; font-weight: 400; font-size: 27px; line-height: 1.12; letter-spacing: -0.015em; color: #14161A; }
.dn p { margin: 0 0 14px; font-size: 16.5px; line-height: 1.52; color: rgba(20,22,26,0.8); }
.dn p:last-child { margin-bottom: 0; }
.dn .x { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border: 1px solid rgba(20,22,26,0.18); border-radius: 2px; background: #FBFAF7; color: #14161A; font-size: 18px; line-height: 1; cursor: pointer; }
.dn .x:hover { border-color: #1F4D3A; color: #1F4D3A; }
@media (max-width: 900px) {
  .subbar a.warn { margin-left: 0; }
  .subbar nav { flex-wrap: wrap; height: auto; padding-top: 10px; padding-bottom: 10px; gap: 10px 22px; }
  .dn-scrim { padding: 12px; }
  .dn { margin-top: 0; padding: 28px 22px 24px; }
  .dn h2 { font-size: 24px; }
}

/* the phone menu (Robert, 2026-09-06: signed in on his phone there was no
   way back to the home page). Below 900 the section links are hidden and
   a hamburger beside the button opens them, with Home first, as a panel
   under the bar. Built by chrome.js on every page with a site bar. */
.burger { display: none; width: 40px; height: 40px; margin-right: 6px; padding: 0; border: 1px solid rgba(20,22,26,0.18); border-radius: 2px; background: #FBFAF7; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.burger span { display: block; width: 18px; height: 2px; background: #14161A; }
.burger[aria-expanded="true"] { border-color: #1F4D3A; }
.mnav { display: none; flex-direction: column; background: #F3F0E8; border-bottom: 1px solid rgba(20,22,26,0.12); }
.mnav.open { display: flex; }
.mnav a { padding: 14px 20px; font-family: "Newsreader", Georgia, serif; font-size: 18px; color: #14161A; text-decoration: none; border-top: 1px solid rgba(20,22,26,0.1); }
.mnav a:first-child { border-top: 0; }
.mnav a:hover { color: #1F4D3A; }
@media (max-width: 900px) {
  .burger { display: inline-flex !important; }   /* the home page's own menu rules set its children to block */
}

/* the phone bar is one line: nothing in it wraps */
@media (max-width: 900px) {
  .sitebar > :first-child, #bar > :first-child, .sitebar .menu, #bar .menu, .menu-in { white-space: nowrap; }
  .sitebar .menu, #bar .menu { flex-shrink: 0; }
}
/* the narrowest phones: Sign out beside the hamburger ran 6px past 320 */
@media (max-width: 360px) {
  .sitebar, #bar { padding-left: 14px !important; padding-right: 14px !important; }
  .menu-in { padding-left: 10px !important; padding-right: 10px !important; }
  .burger { margin-right: 4px; margin-left: 10px; }
  .sitebar .n, #bar .n, #bar .name { font-size: 18px !important; }   /* room between .app and the hamburger */
}

/* Buttons never inherit the underline used for prose links. */
button,button:hover,button:focus,a.btn,a.btn:hover,a.btn:focus,a.wk-btn,a.wk-btn:hover,a.cta-btn,a.cta-btn:hover,a.primary,a.primary:hover,a.action,a.action:hover,a[role="button"],a[role="button"]:hover,a.upgrade-button,a.list-open{ text-decoration:none!important; }