/* cozybutter.com chrome for the tools (2026-11-07).
   Amanda: "change the site's branding to match the rest of it." Every tool page
   carries the same header, nav and footer as cozybutter.com, on the same white
   ground, with the same Urbanist 500 titles and DM Sans body, so walking from
   the homepage into a tool feels like one site.

   Everything here is namespaced cbx- so it never touches a tool's own classes,
   and the header and footer are divs, because the tools style bare `footer`
   and `header` elements. Inside an iframe (Circle embeds, ?embed=1) the chrome
   is hidden: the host page already has its own.

   Palette mirrors cozybutter.com/styles.css: white page, sage #46574E, ink
   #243029, rose links, butter pill buttons with ink text (never white on
   butter, never butter behind the word Butter). Text on green is #FFFFFF. */

:root {
  --cbx-white: #FFFFFF;
  --cbx-ink: #243029;
  --cbx-body: #33433C;
  --cbx-sage: #46574E;
  --cbx-sage-quiet: #5E7364;
  --cbx-rose: #C3796D;
  --cbx-butter: #FAD88B;
  --cbx-amber: #F0C046;
  --cbx-hairline: #E8DFD5;
  --cbx-foot: #FBF8F5;
}

/* ---------- page ground and type, matched to the homepage ---------- */
body { background: var(--cbx-white); -webkit-font-smoothing: antialiased; }
.display { font-weight: 500; letter-spacing: -.015em; }
header.hero h1, header.hero h1.display { font-weight: 500; letter-spacing: -.026em; line-height: 1.07; }
header.hero > .eyebrow {
  color: var(--cbx-rose);
  letter-spacing: .2em;
  display: flex;
  align-items: center;
  gap: 12px;
}
header.hero > .eyebrow::before {
  content: "";
  width: 26px; height: 1px; flex: none;
  background: var(--cbx-rose);
}

/* ---------- header ---------- */
.cbx-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--cbx-hairline);
  font-family: "DM Sans", system-ui, sans-serif;
}
.cbx-row {
  max-width: 1080px; margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; gap: 28px; min-height: 72px;
}
.cbx-logo { display: inline-flex; align-items: center; line-height: 0; flex: none; }
/* 46px tall keeps the logo at its true shape and lets the full nav fit the
   1080 row (the homepage squeezes a 60px logo to fit, which flattens it). */
.cbx-logo img { display: block; height: 46px; width: auto; max-width: none; }
.cbx-nav { display: flex; gap: 24px; margin-left: auto; }
.cbx-header .cbx-nav a {
  font-size: 15px; font-weight: 500; line-height: 1.4;
  color: var(--cbx-body); text-decoration: none; white-space: nowrap;
}
.cbx-header .cbx-nav a:hover,
.cbx-header .cbx-nav a[aria-current="page"] { color: var(--cbx-ink); }
.cbx-header .cbx-nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--cbx-sage); }

/* the site's butter pill: ink text, amber on hover */
.cbx-btn,
a.cbx-btn {
  display: inline-block; flex-shrink: 0;
  background: var(--cbx-butter); color: var(--cbx-ink);
  border: 0; border-radius: 999px;
  padding: 11px 22px;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 15px; font-weight: 600; line-height: 1.4;
  text-decoration: none;
  transition: background-color .15s ease;
}
.cbx-btn:hover { background: var(--cbx-amber); }

@media (max-width: 860px) {
  .cbx-row { justify-content: space-between; flex-wrap: wrap; row-gap: 6px; padding-bottom: 10px; }
  .cbx-nav { order: 3; flex-basis: 100%; margin-left: 0; flex-wrap: wrap; justify-content: center; gap: 6px 18px; }
  .cbx-header .cbx-nav a { font-size: 14px; }
}
@media (max-width: 560px) {
  .cbx-logo img { height: 46px; }
  .cbx-row { padding: 0 16px 10px; }
}

/* ---------- footer ---------- */
.cbx-footer {
  margin-top: 40px;
  background: var(--cbx-foot);
  border-top: 1px solid var(--cbx-hairline);
  padding: 34px 0 30px;
  font-family: "DM Sans", system-ui, sans-serif;
  line-height: 1.65;
}
.cbx-shell { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.cbx-foot-top { display: flex; align-items: baseline; justify-content: space-between; gap: 20px 32px; flex-wrap: wrap; }
.cbx-footer .cbx-logo img { height: 46px; }
.cbx-foot-links { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.cbx-footer .cbx-foot-links a { color: var(--cbx-body); text-decoration: none; font-size: 14px; font-weight: 400; }
.cbx-footer .cbx-foot-links a:hover { color: var(--cbx-rose); }
.cbx-disclaimer {
  margin-top: 22px; padding-top: 18px;
  border-top: 1px solid var(--cbx-hairline);
  color: var(--cbx-sage); font-size: 14px;
}
.cbx-copy { margin-top: 12px; font-size: 13px; color: var(--cbx-sage-quiet); line-height: 1.6; }
@media (max-width: 620px) {
  .cbx-foot-top { flex-direction: column; align-items: flex-start; gap: 16px; }
  .cbx-foot-links { gap: 8px 18px; }
  .cbx-shell { padding: 0 16px; }
}

/* ---------- inside an iframe the host page brings its own chrome ---------- */
.cbx-framed .cbx-header,
.cbx-framed .cbx-footer { display: none !important; }
/* framed: keep the blush ground the embeds have always had, to match Circle */
.cbx-framed body { background: var(--page, #F4EAE1); }

/* ---------- 2026-11-08 (Amanda): nothing narrow and smashed to the left, readable charts, room around the disclaimer ---------- */
/* text runs the full width of its section instead of a narrow left column */
body p, body .lede, body .sub, body .intro, body .about, body h1, body h2 { max-width: none !important; }
/* charts and diagrams stay a readable size and sit centered, instead of stretching to the full page */
main svg[viewBox], .wrap svg[viewBox] { max-width: 760px; margin-left: auto; margin-right: auto; }
main canvas { max-width: 760px; margin-left: auto; margin-right: auto; display: block; }
/* the tool's own disclaimer: full width, with space above the site footer */
body > footer:not(.site-footer), footer.tools-foot { max-width: 1100px !important; margin: 48px auto 72px !important; padding: 26px 24px 0 !important; border-top: 1px solid #ECC798; text-align: left !important; }
body > footer:not(.site-footer) *, footer.tools-foot * { max-width: none !important; }
/* boxes never touch: space between stacked boxes, and paired boxes sit side by side (Amanda 2026-11-08) */
.card + .card, .card + .dose-pair, .dose-pair + .card, .dose-pair + .dose-pair { margin-top: 28px !important; }
.dose-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; margin: 28px 0; }
.dose-pair > .card { margin: 0 !important; min-width: 0; }
/* boxes that sit next to each other in a row line up top and bottom, same height (Amanda 2026-11-10) */
.answers > .card, .pair > .card, .grid2 > .card, .grid3 > .card, .two > .card, .halves > .card, .trio > .card, .tiles > .card, .vs > .card { margin-top: 0 !important; }
.answers, .pair, .grid2, .grid3, .two, .halves, .trio, .tiles, .vs { align-items: stretch; }
@media (max-width: 820px) { .dose-pair { grid-template-columns: 1fr; } }