/*
 * Compact consent UI. Re-skins the existing arttohang-operations dialog (#ath-cookie-choice).
 * Behaviour stays in the plugin; this file and consent-ui.js only change presentation.
 * Preferences (the two checkboxes + Save) are collapsed until the visitor asks for them.
 */
html body #ath-cookie-choice {
  position: fixed;
  left: 16px;
  right: auto;
  bottom: 16px;
  z-index: 999999;
  width: min(400px, calc(100% - 32px));
  max-width: none;
  box-sizing: border-box;
  padding: 16px 18px;
  background: var(--ath-white);
  color: var(--ath-charcoal);
  border: 1px solid var(--ath-line);
  border-radius: var(--ath-radius-lg);
  box-shadow: var(--ath-shadow);
  font: var(--ath-text-sm)/1.5 var(--ath-font-ui);
  max-height: 80vh;
  overflow: auto;
}
html body #ath-cookie-choice[hidden] { display: none; }
html body #ath-cookie-choice > strong {
  display: block;
  margin: 0 0 4px;
  font: 600 1.0625rem/1.3 var(--ath-font-display);
}
html body #ath-cookie-choice > p {
  margin: 0 0 12px;
  font-size: var(--ath-text-xs);
  line-height: 1.5;
  color: var(--ath-muted);
}
html body #ath-cookie-choice > p#ath-privacy-status:empty { display: none; }

/* preferences panel is collapsed by default */
html body #ath-cookie-choice label {
  display: none;
  margin: 0 0 8px;
  font-size: var(--ath-text-sm);
}
html body #ath-cookie-choice.is-open label { display: block; }
html body #ath-cookie-choice:not(.is-open) button[data-ath-consent="save"] { display: none; }
html body #ath-cookie-choice:not(.is-open) > p#ath-privacy-status { display: none; }

/* action row: equal-weight Accept / Reject */
html body #ath-cookie-choice p:has(> button[data-ath-consent]) {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
html body #ath-cookie-choice button[data-ath-consent] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  min-height: 44px;
  padding: 0 14px;
  border-radius: var(--ath-radius);
  border: 1px solid var(--ath-olive);
  font: 600 var(--ath-text-sm)/1 var(--ath-font-ui);
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
  transition: background var(--ath-dur-fast) var(--ath-ease), color var(--ath-dur-fast) var(--ath-ease);
}
html body #ath-cookie-choice [data-ath-consent="all"] { order: 1; background: var(--ath-olive); color: var(--ath-white); }
html body #ath-cookie-choice [data-ath-consent="none"] { order: 2; background: var(--ath-white); color: var(--ath-olive-dark); }
html body #ath-cookie-choice [data-ath-consent="save"] { order: 3; grid-column: 1 / -1; background: var(--ath-white); color: var(--ath-charcoal); border-color: var(--ath-charcoal); }
html body #ath-cookie-choice [data-ath-consent="all"]:hover { background: var(--ath-olive-dark); }
html body #ath-cookie-choice [data-ath-consent="none"]:hover { background: var(--ath-paper); }

html body #ath-cookie-choice > a,
html body #ath-cookie-choice .ath-consent-prefs {
  display: inline-block;
  margin: 10px 14px 0 0;
  padding: 6px 0;
  font-size: var(--ath-text-xs);
  color: var(--ath-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  background: none;
  border: 0;
  cursor: pointer;
  letter-spacing: 0;
  text-transform: none;
}
html body #ath-cookie-choice input[type="checkbox"] {
  accent-color: var(--ath-olive);
  width: 18px;
  height: 18px;
  margin-right: 8px;
  vertical-align: -3px;
}

/* Mobile: slim bottom sheet */
@media (max-width: 640px) {
  html body #ath-cookie-choice {
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    border-radius: var(--ath-radius-lg) var(--ath-radius-lg) 0 0;
    border-width: 1px 0 0;
    padding: 10px 14px calc(8px + env(safe-area-inset-bottom));
  }
  html body #ath-cookie-choice > strong { display: none; }
  html body #ath-cookie-choice > p { margin-bottom: 8px; }
  html body #ath-cookie-choice:not(.is-open) > strong + p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  html body #ath-cookie-choice.is-open > strong { display: block; }
  html body #ath-cookie-choice > a,
  html body #ath-cookie-choice .ath-consent-prefs { margin: 2px 14px 0 0; padding: 4px 0; min-height: 0; line-height: 1.3; }
}

/* Wide screens: one quiet bar along the bottom edge instead of a card covering the hero button and the gallery */
@media (min-width: 900px) {
  html body #ath-cookie-choice {
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%);
    width: min(1080px, calc(100% - 48px));
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 24px;
    padding: 12px 20px;
  }
  html body #ath-cookie-choice:not(.is-open) > strong { display: none; }
  html body #ath-cookie-choice > strong { flex: 1 0 100%; margin: 0; }
  html body #ath-cookie-choice > p { order: 1; flex: 1 1 340px; margin: 0; }
  html body #ath-cookie-choice label { order: 2; flex: 1 0 100%; margin: 0; }
  html body #ath-cookie-choice p:has(> button[data-ath-consent]) {
    order: 3;
    flex: 0 0 auto;
    display: flex;
    gap: 10px;
    margin: 0;
  }
  html body #ath-cookie-choice button[data-ath-consent] { min-height: 42px; padding: 0 22px; white-space: nowrap; }
  html body #ath-cookie-choice > a,
  html body #ath-cookie-choice .ath-consent-prefs { order: 4; margin: 0; padding: 4px 0; }
}

/* The two utility buttons become quiet footer links instead of floating pills. */
html body #ath-cookie-settings,
html body #ath-do-not-share {
  position: static;
  display: inline-block;
  margin: 0 14px 0 0;
  padding: 13px 0;
  background: none;
  border: 0;
  border-radius: 0;
  color: inherit;
  font: var(--ath-text-xs)/1.4 var(--ath-font-ui);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  letter-spacing: 0;
  text-transform: none;
  opacity: 0.85;
}
html body .ath-privacy-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 0;
  padding: 12px 0 calc(16px + var(--ath-sticky-h));
  font-size: var(--ath-text-xs);
}
html body .ath-footer-base .ath-privacy-links {
  padding: 0;
  gap: 0;
}
/* Fallback when no footer exists: tiny and out of the way of bottom CTAs */
html body #ath-cookie-settings:not(.ath-moved),
html body #ath-do-not-share:not(.ath-moved) {
  position: fixed;
  left: 8px;
  bottom: calc(var(--ath-consent-h) + var(--ath-sticky-h) + 8px);
  z-index: 9990;
  background: var(--ath-white);
  padding: 4px 10px;
  border: 1px solid var(--ath-line);
  border-radius: 999px;
}
html body #ath-do-not-share:not(.ath-moved) { display: none; }

/* While the menu drawer or the filter panel is open the dialog steps aside (it would cover their bottom buttons). */
html.ath-lock body #ath-cookie-choice {
  visibility: hidden;
}