/* The site chrome (Roy, 2026-10-03: one header, one banner, one footer on every page): the design mockup's
 * four-column footer (docs/design/daily-scout-design-mockups5.zip, app/globals.css), which app.css does not have.
 * Loaded after app.css by both layouts. Every rule is scoped under .site-footer--public, so app.css's older footer
 * rules (no longer used by any page) cannot reach it and nothing else on a page is touched. The header and the banner
 * are app.css's own (the mockup did not change them). */

/* ---------- Footer ---------- */

.site-footer--public {
  text-align: start;
  border-top: 1px solid var(--rule);
  margin-top: 96px;
  padding: 64px var(--gutter) 56px;
}

.site-footer--public .site-footer__inner {
  max-width: 1120px;
  margin: 0 auto;
}

.site-footer--public .site-footer__mark {
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 48px;
}

.site-footer--public .footer-cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px 32px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--rule-light);
}

.site-footer--public .footer-col__title {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 18px;
}

.site-footer--public .footer-col ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.site-footer--public .footer-col a {
  font-size: 14px;
  color: var(--ink-2);
  transition: color 160ms ease;
}

.site-footer--public .footer-col a:hover {
  color: var(--ink);
}

.site-footer--public .site-footer__base {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding-top: 36px;
  text-align: center;
  font-size: 14px;
}

.site-footer--public .site-footer__disclaimer {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 15px;
  color: var(--ink-3);
}

.site-footer--public .site-footer__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

@media (max-width: 760px) {
  .site-footer--public .footer-cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------- Header (home page round 2, approved by Roy 17 Oct 2026) ----------
 * Two rows at every width: the wordmark with the right side (Log in and Sign up, or the account menu), then the menu:
 * Monitor, Investor days (a <details> dropdown: hover opens it on a desktop pointer through the header's script, a tap
 * or Enter on any device; on a phone the open panel stacks full width under the menu row), Executive purchases, IPOs,
 * Pricing. The current item: a 1 px rust underline. The beta banner above is app.css's, unchanged. */

.site-header__inner {
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "mark account"
    "nav nav";
  row-gap: 16px;
  padding-bottom: 0;
}

.wordmark {
  grid-area: mark;
  justify-self: start;
  align-items: flex-start;
}

.site-nav {
  grid-area: nav;
  position: relative;
  align-items: center;
  justify-self: stretch;
  border-top: 1px solid var(--rule-light);
  padding: 12px 0;
  gap: 8px 32px;
  flex-wrap: wrap;
}

.site-nav > a {
  white-space: nowrap;
  color: var(--ink);
}

.nav-menu {
  position: relative;
}

.nav-menu summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 4px 0;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
  transition: border-color 160ms ease;
}

.nav-menu summary::-webkit-details-marker {
  display: none;
}

/* the small ▾ after "Investor days" */
.nav-menu__caret {
  font-family: "Segoe UI Symbol", "Apple Symbols", "DejaVu Sans", Arial, sans-serif;
  font-size: 13px;
  letter-spacing: 0;
  line-height: 1;
  transition: transform 160ms ease;
}

.nav-menu[open] .nav-menu__caret {
  transform: rotate(180deg);
}

.nav-menu summary:focus-visible {
  outline: 1px solid var(--ink);
  outline-offset: 4px;
}

.nav-menu.is-current summary {
  border-bottom-color: var(--sellier);
}

/* a split item (Monitor's, only with HOW_IT_WORKS_PAGE_ENABLED): the label keeps its own link and a separate ▾ button
   beside it opens the menu, whose panel hangs from the item as the other menus' hang from their label */
.nav-split {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
}

.site-nav .nav-split > a {
  white-space: nowrap;
  color: var(--ink);
}

.nav-split.is-current .nav-split__link {
  border-bottom-color: var(--sellier);
}

.nav-menu--split {
  position: static;
}

.nav-menu--split summary {
  justify-content: center;
  min-width: 24px;
  padding: 4px;
}

/* the items: the menu's own type (11 px caps, ink) on a white panel with a 1 px rule */
.nav-menu__panel {
  position: absolute;
  left: -20px;
  top: 100%;
  margin-top: 0;
  min-width: 240px;
  background: #ffffff;
  border: 1px solid var(--rule);
  padding: 8px 0;
  z-index: 20;
}

/* the hover bridge: the gap between the label and the panel keeps the menu open */
.nav-menu__panel::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -14px;
  height: 14px;
}

.nav-menu[open] .nav-menu__panel {
  margin-top: 14px;
}

.site-nav .nav-menu__panel a {
  display: block;
  padding: 10px 20px;
  border-bottom: 0;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}

.site-nav .nav-menu__panel a:hover,
.site-nav .nav-menu__panel a:focus-visible {
  background: var(--paper);
}

.site-nav .nav-menu__panel a[aria-current="page"] {
  color: var(--sellier);
}

/* the right side */
.header-account {
  grid-area: account;
  display: flex;
  align-items: center;
  gap: 20px;
  /* the Sign up button's height, so the logo row is as tall signed in as signed out (CC-3 fix 2) */
  min-height: 42px;
}

.header-account__login {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}

.header-account__login:hover {
  color: var(--sellier);
}

.header-account__signup {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--ink);
  padding: 11px 18px;
  line-height: 20px;
  white-space: nowrap;
}

.header-account__signup:hover {
  background: #000000;
  color: var(--paper);
}

/* the account menu's trigger: the email, then "My account" (CC-2 ruling 5); the panel is app.css's */
.account-menu summary {
  gap: 20px;
}

.account-menu summary .account-email {
  font-size: 13px;
  letter-spacing: 0;
  color: var(--ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 28ch;
}

.account-menu__trigger {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}

.account-menu summary::after {
  margin-left: -12px;
}

@media (max-width: 760px) {
  .header-account {
    gap: 14px;
  }

  .header-account__login,
  .header-account__signup {
    font-size: 11px;
    letter-spacing: 0.1em;
  }

  .header-account {
    min-height: 40px;
  }

  .header-account__signup {
    padding: 10px 12px;
  }

  .wordmark__name {
    font-size: 19px;
    letter-spacing: 0.12em;
    white-space: nowrap;
  }

  /* on a phone the trigger is "My account" alone (CC-3 fix 3): the email shows inside the menu, under "Signed in as" */
  .account-menu summary {
    gap: 12px;
  }

  .account-menu summary .account-email {
    display: none;
  }

  .account-menu__trigger {
    font-size: 11px;
    letter-spacing: 0.1em;
  }

  .account-menu summary::after {
    margin-left: -6px;
  }

  /* five items: they wrap onto a second line on a phone */
  .site-nav {
    justify-content: flex-start;
    gap: 8px 18px;
  }

  .nav-menu {
    position: static;
  }

  .site-nav > a,
  .nav-menu summary,
  .site-nav .nav-split > a {
    font-size: 10.5px;
    letter-spacing: 0.08em;
  }

  /* the split item's ▾: a 44 px tap target that does not make the nav row taller; its menu stacks full width as the others */
  .nav-split {
    position: static;
  }

  .nav-menu--split summary {
    min-width: 44px;
    min-height: 44px;
    margin: -12px -10px;
  }

  /* on a phone the open menu stacks full width under the nav row */
  .nav-menu__panel {
    left: 0;
    right: 0;
    top: 100%;
    min-width: 0;
  }

  .nav-menu[open] .nav-menu__panel {
    margin-top: 0;
  }

  .nav-menu__panel::before {
    display: none;
  }

  .site-nav .nav-menu__panel a {
    padding: 14px 20px;
    white-space: normal;
  }
}

/* ---------- The longer name (rename-2; claude/RENAME-WORDMARK-DESIGN.md points 1, 2 and 4) ----------
 * Only with BRAND_ASSETS set: the layouts' body then carries .chrome-brand (src/web/brand-assets.ts); unset, nothing
 * below applies and the header, footer and banner are as above. Today's markup: the name is one span with a real
 * space, so it stacks on a phone by its width (min-content: as wide as its longest word), with no code splitting it.
 * The wordmark: one line, 26 px tracked 0.2em from 1024 px, 21 px tracked 0.16em from 640 px; under 640 px two lines,
 * 17 px tracked 0.18em, line height 1.12, the logo row at least 72 px. Its word space is the mockup's gap between the
 * words (0.34em with the tracking): Cormorant's space is 0.234em, so word-spacing is 0.34em less that and the tracking.
 * The footer mark one line, 20 px tracked 0.2em, 16 px tracked 0.18em under 640 px. The banner under 640 px: tracking
 * 0.16em, side padding 12 px. The weight stays 500 (Roy's ruling). The admin pages share the header, so its rule. */

.chrome-brand .site-header .wordmark__name {
  font-size: 26px;
  letter-spacing: 0.2em;
  word-spacing: -0.094em;
  white-space: nowrap;
}

.chrome-brand .site-footer--public .site-footer__mark {
  font-size: 20px;
  letter-spacing: 0.2em;
  white-space: nowrap;
}

@media (max-width: 1023px) {
  .chrome-brand .site-header .wordmark__name {
    font-size: 21px;
    letter-spacing: 0.16em;
    word-spacing: -0.054em;
  }
}

@media (max-width: 639px) {
  .chrome-brand .site-header .wordmark__name {
    font-size: 17px;
    letter-spacing: 0.18em;
    line-height: 1.12;
    white-space: normal;
    width: min-content;
  }

  /* the logo row at least 72 px: the header's 18 px above it, the row, the 16 px gap to the menu's rule */
  .chrome-brand .site-header__inner {
    grid-template-rows: minmax(38px, auto) auto;
  }

  .chrome-brand .beta-banner {
    letter-spacing: 0.16em;
    padding-left: 12px;
    padding-right: 12px;
  }

  .chrome-brand .site-footer--public .site-footer__mark {
    font-size: 16px;
    letter-spacing: 0.18em;
  }
}