/* Cookie Policy — frames cookie-policy-page (19:5) and mobile-cookie-policy
 * (44:1019). Overrides on top of pages/legal.css: dark workspace on desktop,
 * light on mobile; metadata band with the document search; consent preview.
 * Numbers from fig-spec. */

.lhero--cookie { justify-content: center; min-height: 280px; padding: 64px var(--container-pad); }
.lhero--cookie .lhero__content { display: flex; flex-direction: column; gap: 16px; }
.lhero--cookie .lhero__eyebrow { letter-spacing: 1px; }
.lhero--cookie .lhero__text { display: contents; }
.lhero--cookie .lhero__title { font-size: 56px; line-height: 60px; }

/* ── 04 document metadata + search ────────────────────────────────────── */
.cmeta { display: flex; flex-direction: column; gap: 24px; padding: 48px var(--container-pad); background: var(--color-card-2); box-shadow: inset 0 -1px 0 var(--color-border); }
.cmeta__block { display: contents; }
.cmeta__head { display: flex; flex-direction: column; gap: 8px; }
.cmeta__title { font-family: var(--font-display); font-size: 18px; line-height: 20px; text-transform: uppercase; color: var(--color-surface); }
.cmeta__line { height: 1px; margin: 0 0 -1px; border: 0; background: var(--color-border); }   /* Figma LINE */
.cmeta__rows { display: flex; flex-direction: column; gap: 16px; }
.cmeta__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.cmeta__label { font-weight: 700; font-size: 12px; line-height: 16px; text-transform: uppercase; color: var(--color-muted-2); }
.cmeta__value { font-family: var(--font-mono); font-weight: 700; font-size: 12px; line-height: 16px; color: var(--color-surface); }

/* ── 05 workspace ─────────────────────────────────────────────────────── */
.doc--cookie { --doc-gap: 48px; --doc-line: var(--color-border); padding: 64px var(--container-pad) 96px; background: var(--color-bg); }
.doc--cookie .doc__nav { gap: 8px; }
.doc--cookie .doc__nav-title { font-size: 12px; line-height: 13px; letter-spacing: 1px; color: var(--color-muted-2); }
.doc--cookie .doc-toc { gap: 4px; }
.doc--cookie .doc-toc__link { gap: 12px; padding: 8px 12px; border-radius: 0; box-shadow: inset 0 0 0 1px var(--color-border); font-weight: 700; color: var(--color-muted); }
.doc--cookie .doc-toc__link:hover { background: var(--color-surface); color: var(--color-text); }
.doc--cookie .doc-toc__link.is-active { background: var(--color-purple); box-shadow: none; color: var(--color-text); }
.doc--cookie .doc-toc__num { font-family: var(--font-mono); font-size: 12px; line-height: 16px; color: var(--color-muted-2); }
.doc--cookie .doc-toc__link.is-active .doc-toc__num { color: var(--color-brand); }

.doc--cookie .doc__body { gap: 96px; }                          /* 48 + LINE + 48 between sections */
.doc--cookie .doc-sec { gap: 16px; }
.doc--cookie .doc-sec--gap20 { gap: 20px; }
.doc--cookie .doc-sec--gap24 { gap: 24px; }
.doc--cookie .doc-sec__head { min-height: 44px; }
.doc--cookie .doc-sec__num { font-family: var(--font-display); font-weight: 400; font-size: 40px; line-height: 44px; color: var(--color-brand); }
.doc--cookie .doc-sec__title { font-size: 24px; line-height: 26px; color: var(--color-text); }
.doc--cookie .doc-sec__line { display: none; }
.doc--cookie .doc-sec__end { display: block; position: absolute; left: 0; right: 0; bottom: -48px; height: 1px; background: var(--doc-line); }
.doc--cookie .doc-p { max-width: none; font-size: 15px; line-height: 24px; color: var(--color-muted); }
.doc--cookie .doc-list { gap: 8px; max-width: none; }
.doc--cookie .doc-list__item { gap: 8px; }
.doc--cookie .doc-list__marker { font-weight: 400; font-size: 15px; line-height: 20px; color: var(--color-brand); }
.doc--cookie .doc-list__text { line-height: 22px; color: var(--color-muted); }
.doc--cookie .doc-sub { gap: 12px; max-width: none; }
.doc--cookie .doc-sub__title { font-size: 16px; line-height: 17px; text-transform: none; color: var(--color-text); }
.doc--cookie .doc-sub__text { font-size: 15px; line-height: 24px; color: var(--color-muted); }
.doc--cookie .doc-btn { padding: 8px 16px; border-radius: 0; background: var(--color-purple); font-size: 13px; line-height: 17px; text-transform: none; }
.doc--cookie .doc-btn:hover { background: var(--color-purple-btn); }
.doc--cookie .doc-btn--outline { background: none; box-shadow: inset 0 0 0 1px var(--color-border-2); color: var(--color-brand); }
.doc--cookie .doc-btn--outline:hover { background: var(--color-surface); }
.doc--cookie .doc-btn--dark { background: var(--color-surface); box-shadow: inset 0 0 0 1px var(--color-border-2); color: var(--color-brand); }
.doc--cookie .doc-btn--dark:hover { background: var(--color-surface-2); }

/* consent preview (section 04) */
.consent { display: flex; flex-direction: column; gap: 20px; padding: 24px; background: var(--color-bg); box-shadow: inset 0 0 0 1px var(--color-border); }
.consent__head { display: flex; flex-direction: column; gap: 4px; }
.consent__title { font-family: var(--font-display); font-size: 14px; line-height: 15px; text-transform: uppercase; color: var(--color-text); }
.consent__text { font-size: 12px; line-height: 16px; color: var(--color-muted); }
.consent__line { height: 1px; margin: 0 0 -1px; border: 0; background: var(--color-border); }
.consent__rows { display: flex; flex-direction: column; gap: 12px; }
.consent__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.consent__name { font-weight: 700; font-size: 14px; line-height: 18px; text-transform: uppercase; color: var(--color-text); cursor: pointer; }
.consent__always { font-family: var(--font-mono); font-weight: 700; font-size: 12px; line-height: 16px; color: var(--color-brand); }
.consent__switch .switch__track { width: 40px; height: 20px; padding: 2px; border-radius: 10px; background: var(--color-muted-2); }
.consent__switch .switch__knob { width: 16px; height: 16px; box-shadow: none; }
.consent__switch .switch__input:checked + .switch__track { background: var(--color-green); }
.consent__switch .switch__input:checked + .switch__track .switch__knob { transform: translateX(20px); }
.consent__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.consent__btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 10px 16px; border: 0; border-radius: 0;
  background: none; box-shadow: inset 0 0 0 1px var(--color-border-2); color: var(--color-text); cursor: pointer;
  font-weight: 700; font-size: 12px; line-height: 16px; text-transform: uppercase;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.consent__btn:hover { background: var(--color-surface-2); }
.consent__btn:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--color-border-2), var(--focus-ring); }
.consent__btn--all { background: var(--color-brand); box-shadow: none; color: var(--color-bg); font-weight: 800; }
.consent__btn--all:hover { background: var(--color-brand-hover); }
.consent__btn--dark { background: var(--color-surface); }
.consent__done { font-weight: 700; font-size: 13px; line-height: 18px; color: var(--color-green); }

/* ── mobile ───────────────────────────────────────────────────────────── */
@media (max-width: 1199px) {
  .lhero--cookie { min-height: 0; padding: 32px var(--container-pad); }
  .lhero--cookie .lhero__content { display: contents; }
  .lhero--cookie .lhero__eyebrow { margin-bottom: -4px; }        /* mobile gap is 16, the hero's 20 */
  .lhero--cookie .lhero__text { display: flex; }
  .lhero--cookie .lhero__title { font-size: 38px; line-height: 42px; }

  .cmeta { gap: 0; padding: 0; box-shadow: none; }
  .cmeta__block { display: flex; flex-direction: column; gap: 12px; padding: 16px var(--container-pad); background: var(--color-card-2); box-shadow: inset 0 -1px 0 var(--color-border-light); }
  .cmeta__head { gap: 12px; }
  .cmeta__title { font-size: 14px; line-height: 15px; color: var(--color-ink); }
  .cmeta__line { background: var(--color-border-light); }
  .cmeta__rows { gap: 8px; }
  .cmeta__label, .cmeta__value { color: var(--color-ink); }
  .cmeta__search { padding: 16px var(--container-pad); background: var(--color-card-2); box-shadow: inset 0 -1px 0 var(--color-border-light); }

  .doc--cookie { padding: 0; background: var(--color-card-2); }
  .doc--cookie .doc__nav { gap: 12px; }
  .doc--cookie .doc__nav-title { font-size: 14px; line-height: 15px; letter-spacing: 0; color: var(--color-text); }
  .doc--cookie .doc-toc__link { padding: 8px; border-radius: var(--radius-sm); box-shadow: none; font-weight: 500; }
  .doc--cookie .doc-toc__link.is-active { background: var(--color-purple-btn); font-weight: 700; }
  .doc--cookie .doc-toc__num { font-weight: 800; color: var(--color-muted); }
  .doc--cookie .doc-toc__label { text-transform: none; }

  .doc--cookie .doc__body { gap: 32px; }
  .doc--cookie .doc-sec, .doc--cookie .doc-sec--gap20 { gap: 16px; }
  .doc--cookie .doc-sec--gap24 { gap: 24px; }
  .doc--cookie .doc-sec__head { min-height: 0; }
  .doc--cookie .doc-sec__num { font-family: var(--font-mono); font-weight: 800; font-size: 24px; line-height: 31px; color: var(--color-purple-btn); }
  .doc--cookie .doc-sec__title { font-size: 20px; line-height: 22px; color: var(--color-ink); }
  .doc--cookie .doc-sec__line { display: block; background: var(--color-border-light); }
  .doc--cookie .doc-sec__end { display: none; }
  .doc--cookie .doc-p, .doc--cookie .doc-list__text, .doc--cookie .doc-sub__text { color: var(--color-ink); }
  .doc--cookie .doc-list__marker { color: var(--color-purple-btn); }
  .doc--cookie .doc-subs { display: contents; }
  .doc--cookie .doc-sub { gap: 8px; padding: 0; box-shadow: none; }
  .doc--cookie .doc-sub__title { font-size: 16px; line-height: 17px; color: var(--color-ink); }
  .doc--cookie .doc-btn, .doc--cookie .doc-btn--outline, .doc--cookie .doc-btn--dark { align-self: flex-start; min-height: 0; padding: 8px 16px; border-radius: var(--radius-sm); background: var(--color-surface); box-shadow: inset 0 0 0 1px var(--color-border); color: var(--color-brand); font-weight: 700; font-size: 13px; line-height: 17px; }
  .doc--cookie .doc-btn:hover { background: var(--color-surface-2); }
  .doc-foot { gap: 4px; height: 38px; padding: 24px 0 0; }   /* frame FIXED 38: the bottom padding is clipped */
  .doc-foot__end, .doc-foot__top { white-space: nowrap; }
  .doc-foot__end { font-size: 11px; line-height: 14px; color: var(--color-muted); }
  .doc-foot__top { font-size: 11px; line-height: 14px; color: var(--color-purple-btn); }

  .consent { gap: 16px; padding: 20px; border-radius: var(--radius-sm); }
  .consent__title { font-size: 13px; line-height: 14px; }
  .consent__text { font-size: 11px; line-height: 14px; }
  .consent__name { font-size: 13px; line-height: 17px; }
  .consent__always { font-size: 11px; line-height: 14px; }
  .consent__actions { flex-direction: column; }
  .consent__btn { min-height: 37px; font-size: 13px; line-height: 17px; }
}
@media (max-width: 389px) {
  .doc-foot__end, .doc-foot__top { white-space: normal; }
}