/* Goal 79: the consent banner steps aside.

   Restyles vanilla-cookieconsent's first layer (layout "bar", position
   "bottom", set in components/cookie_consent.html) into one compact bottom bar:
   one line of copy above one row of three equal controls. At 390x667 the pack
   hero CTA ends at y 566, so the bar must start below 574; this sheet makes it
   84px tall (top 583). Measured in goals/evidence/79/measurements.md.

   Every rule the bar depends on lives in THIS sheet (split-cache-busted-sheets
   landmine): nothing here relies on styles.css or proto.css. The vendored
   sheet is never edited; its phone rules carry !important, so the overrides
   that meet them do too, at higher specificity (html #cc-main).

   Equal prominence (UK GDPR / PECR: reject as easy as accept): Accept all,
   Reject all and Manage preferences share one style and a 44px minimum. */

html #cc-main .cm.cm--bar {
  background: #FFFEFB;
  border-top: 1px solid #E9E0CF;
  box-shadow: none;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #2C2418;
}

html #cc-main .cm--bar .cm__body {
  flex-direction: row;
  align-items: center;
  max-width: 1120px;
  padding: 8px 20px;
}

html #cc-main .cm--bar .cm__texts {
  padding: 0;
  flex: 1 1 auto;
}

html #cc-main .cm--bar .cm__desc {
  color: #2C2418;
  font-size: 14px;
  line-height: 20px;
  max-height: none;
  margin: 0;
  padding: 0 16px 0 0;
  overflow: visible;
}

html #cc-main .cm--bar .cm__desc a {
  color: #1F5540;
  text-decoration: underline;
  font-weight: 600;
}

html #cc-main .cm--bar .cm__btns {
  border-top: none;
  flex-direction: row;
  flex: 0 0 auto;
  padding: 0;
}

html #cc-main .cm--bar .cm__btn-group {
  display: flex;
  flex-direction: row;
}

html #cc-main .cm--bar .cm__btn,
html #cc-main .cm--bar .cm__btn.cm__btn--secondary {
  background: #FFFFFF;
  border: 1px solid #2D6A4F;
  border-radius: 10px;
  color: #1F5540;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  min-height: 44px;
  min-width: 0;
  padding: 0 14px;
  white-space: nowrap;
}

html #cc-main .cm--bar .cm__btn:hover,
html #cc-main .cm--bar .cm__btn.cm__btn--secondary:hover {
  background: #D8E6DD;
  border-color: #24503C;
  color: #1F5540;
}

html #cc-main .cm--bar .cm__btn + .cm__btn,
html #cc-main .cm--bar .cm__btn-group + .cm__btn-group {
  margin: 0 0 0 6px;
}

/* Phones: text line on top, the three controls in one row beneath it. The
   vendored sheet stacks everything in a column at this width with !important. */
@media screen and (max-width: 640px) {
  html #cc-main .cm.cm--bar .cm__body {
    flex-direction: column !important;
    align-items: stretch;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom)) !important;
  }

  html #cc-main .cm--bar .cm__desc {
    font-size: 12px;
    line-height: 16px;
    padding: 0 !important;
    white-space: normal;
  }

  html #cc-main .cm.cm--bar .cm__btns {
    flex-direction: row !important;
    border-top: none !important;
    padding: 6px 0 0 !important;
  }

  html #cc-main .cm.cm--bar .cm__btn-group {
    flex-direction: row !important;
  }

  html #cc-main .cm.cm--bar .cm__btn-group:first-child {
    flex: 1 1 auto;
  }

  html #cc-main .cm.cm--bar .cm__btn {
    flex: 1 1 auto !important;
    font-size: 13px;
    padding: 0 8px;
  }

  html #cc-main .cm.cm--bar .cm__btn + .cm__btn,
  html #cc-main .cm.cm--bar .cm__btn-group + .cm__btn-group {
    margin: 0 0 0 6px !important;
  }
}

/* /generate keeps its primary action in a fixed band at the foot of the
   viewport (components/generate-v2.css .gv2-cta-area). While the bar is
   showing, lift that band above it, so a first-time visitor to the app never
   has "Begin the adventure" hidden behind a question. The heights are this
   sheet's own bar (61px wide, 84px on a phone, both measured), which is why the
   rule lives here and not in generate-v2.css: it depends on nothing in that
   sheet but a class name, and it goes away the moment the visitor answers
   (the library removes show--consent). */
html.show--consent .gv2-cta-area {
  bottom: 62px;
}

@media screen and (max-width: 767px) {
  html.show--consent .gv2-cta-area {
    bottom: calc(62px + env(safe-area-inset-bottom, 0px));
  }
}

@media screen and (max-width: 640px) {
  html.show--consent .gv2-cta-area {
    bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  }
}