/* Site chrome: the top navbar (partials/nav.html) and the site footer
   (partials/footer.html). Loaded on every page that can show them, after
   porcelain-marketing.css, so these rules win ties by source order.

   What it does:
   1. One content grid. The bar and the footer sit on the same measure as the
      landing page's .mk-shell: 1260px of content plus a max(20px, 6.25vw)
      gutter, so the logo, the footer box and page content share one left
      edge (and one right edge) at every width.
   2. One primary button. The navbar's call to action (Get Started, or
      Dashboard when signed in) is the landing page's white-on-blue pill at
      its compact size; .chrome-cta--block is the drawer's full-width one.
   3. Working interaction states: desktop link hover, the quiet Log in
      button's hover in both themes, and a drawer that is visible (so it can
      take focus) the moment it opens.
   4. Footer touch targets: the small legal-row links reach 44px on phones
      and touch screens.

   Nothing here styles app screens: every selector is .chrome-*, or scoped to
   #main-navbar / #nav-drawer. Colours are Porcelain tokens only, which
   redefine themselves under .dark, so there are no separate dark rules. */

/* 1. The grid ------------------------------------------------------------ */
.chrome-shell{
  --chrome-max:1260px;
  --chrome-gutter:max(20px, 6.25vw);
  box-sizing:border-box;
  width:100%;
  max-width:calc(var(--chrome-max) + 2 * var(--chrome-gutter));
  margin-inline:auto;
  padding-inline:var(--chrome-gutter);
}

/* 2. The primary pill ------------------------------------------------------ */
.chrome-cta{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:36px;padding:0 14px;
  border-radius:var(--cls-pill,999px);
  background:var(--cls-blue,#2b8cee);
  border:1px solid var(--cls-blue-deep,#1a6bbd);
  color:var(--cls-on-lead,#fff);
  font-size:13px;line-height:1.2;font-weight:600;letter-spacing:-.005em;
  text-decoration:none;white-space:nowrap;cursor:pointer;
  box-shadow:var(--cls-lit-on,inset 0 1px 0 rgba(255,255,255,.42));
  transition:background-color var(--cls-dur-fast,120ms) var(--cls-ease-out,cubic-bezier(0,0,.2,1));
}
.chrome-cta:hover{background:var(--cls-blue-hover,#3f97f0);color:var(--cls-on-lead,#fff)}
.chrome-cta:active{box-shadow:var(--cls-recess,inset 0 2px 5px rgba(74,62,44,.10))}
.chrome-cta:focus{outline:none}
.chrome-cta:focus-visible{outline:none;box-shadow:var(--cls-focus,0 0 0 2px #fff,0 0 0 4px #1a6bbd);transition:none}
/* The drawer's version: full width, the landing's full button height. */
.chrome-cta.chrome-cta--block{display:flex;width:100%;min-height:48px;padding:0 24px;font-size:15.5px}
@media (pointer:coarse){.chrome-cta{min-height:44px}.chrome-cta.chrome-cta--block{min-height:48px}}

/* The current page's nav link: the deep blue reads at AA on the bar in both themes (the bright fill blue does not). */
#main-navbar .nav-active,#main-navbar .nav-active:hover,#nav-drawer .nav-active,#nav-drawer .nav-active:hover{color:var(--cls-blue-deep,#1a6bbd)!important}

/* The quiet partner that sits beside it (Log in). */
.chrome-quiet{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:36px;padding:0 14px;
  border-radius:var(--cls-pill,999px);
  color:var(--cls-ink,#1c1a17);
  font-size:13px;line-height:1.2;font-weight:600;letter-spacing:-.005em;
  text-decoration:none;white-space:nowrap;
  transition:background-color var(--cls-dur-fast,120ms) var(--cls-ease-out,cubic-bezier(0,0,.2,1));
}
.chrome-quiet:hover{background:var(--cls-tray,#f4f2ee);color:var(--cls-ink,#1c1a17)}
.chrome-quiet:active{box-shadow:var(--cls-recess,inset 0 2px 5px rgba(74,62,44,.10))}
.chrome-quiet:focus{outline:none}
.chrome-quiet:focus-visible{outline:none;box-shadow:var(--cls-focus,0 0 0 2px #fff,0 0 0 4px #1a6bbd);transition:none}
@media (pointer:coarse){.chrome-quiet{min-height:44px}}
@media (prefers-reduced-motion:reduce){.chrome-cta,.chrome-quiet{transition:none}}

/* 3. Interaction states -------------------------------------------------- */
/* Desktop links: the links carry an !important ink colour class, which also
   swallowed their hover colour, so hover gave no feedback at all. The hover
   ink is the landing's link blue (AA on the bar in both themes). A current
   page's link keeps its own active colour. Taller hit area, same layout. */
#main-navbar .nav-primary-links > a{padding-block:10px}
#main-navbar .nav-primary-links > a:not(.nav-active):hover{color:var(--cls-blue-deep,#1a6bbd)!important}

/* The drawer: visible the instant it opens (it still slides), so focus can
   move into it on the same frame; it keeps its fade-out on close. */
.nav-drawer[aria-hidden="false"]{transition:visibility 0s}
@media (prefers-reduced-motion:reduce){
  .nav-drawer,.nav-drawer .nav-drawer-panel,.nav-drawer .nav-drawer-backdrop{transition:none}
}
#nav-drawer .chrome-drawer-cta{margin-top:12px}

/* 4. Footer touch targets ----------------------------------------------------- */
/* The legal row's links (Privacy Policy, Terms of Service) are small type;
   on phones and touch screens they get the same 44px target as every other
   footer link, without changing their size or the row's order. */
@media (max-width:767.98px),(pointer:coarse){
  .mkt-footer-legal-link{display:inline-flex;align-items:center;min-height:44px}
}