/* Oh My Track banner + preference center — generated by build/build.mjs from brand tokens. Do not edit. */

/* ---- token layer: CONTRACT fallbacks < inthTheme < brand/tokens.json.
   Runtime OHMY_BRAND_TOKENS overrides these as inline custom properties. ---- */
.ohmy-banner,
.ohmy-dialog,
.ohmy-settings {
  --ohmy-primary: #440000;
  --ohmy-bg: #FFF2D9;
  --ohmy-text: #0D0D0D;
  --ohmy-accent: #FF0200;
  --ohmy-font: Switzer, system-ui, sans-serif;
  --ohmy-radius: 16px;
  --ohmy-line: color-mix(in srgb, var(--ohmy-text) 12%, transparent);
}

.ohmy-banner *, .ohmy-banner *::before, .ohmy-banner *::after,
.ohmy-dialog *, .ohmy-dialog *::before, .ohmy-dialog *::after { box-sizing: border-box; }
.ohmy-banner[hidden], .ohmy-dialog[hidden] { display: none !important; }

/* ---- shared buttons ---- */
.ohmy-btn {
  appearance: none;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  padding: 11px 18px;
  border-radius: calc(var(--ohmy-radius) * 0.6);
  border: 1px solid transparent;
  transition: opacity 0.15s ease, background-color 0.15s ease;
}
.ohmy-btn:hover { opacity: 0.85; }
.ohmy-btn:focus-visible { outline: 2px solid var(--ohmy-accent); outline-offset: 2px; }
/* Two variants only. PTS requires accept and reject to be designed alike, so both use
   --secondary and the "other" options are the outlined --ghost; there is deliberately no
   accent-filled variant (white on the Piteå accent is 3.99:1 and fails WCAG AA). */
.ohmy-btn--secondary { background: var(--ohmy-primary); color: var(--ohmy-bg); }
.ohmy-btn--ghost {
  background: transparent;
  color: var(--ohmy-text);
  border-color: color-mix(in srgb, var(--ohmy-text) 40%, transparent);
}

/* ---- inline text link (privacy policy), banner + dialog ---- */
.ohmy-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ohmy-link:hover { text-decoration-thickness: 2px; }
.ohmy-link:focus-visible { outline: 2px solid var(--ohmy-accent); outline-offset: 2px; }

/* ---- banner ---- */
.ohmy-banner {
  position: fixed;
  z-index: 2147483000;
  inset-inline: 0;
  inset-block-end: 0;
  padding: 16px;
  font-family: var(--ohmy-font);
  color: var(--ohmy-text);
  /* Only the card itself is interactive — the empty strip beside it must not
     swallow clicks meant for the page (or for the settings link). */
  pointer-events: none;
}
.ohmy-banner__inner { pointer-events: auto; }

.ohmy-banner__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  max-width: 1040px;
  margin: 0 auto;
  padding: 20px;
  background: var(--ohmy-bg);
  border: 1px solid var(--ohmy-line);
  border-radius: var(--ohmy-radius);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.14);
}

.ohmy-banner__brand {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ohmy-banner__logo { display: flex; align-items: center; }
.ohmy-banner__logo svg { display: block; width: auto; height: 28px; }
.ohmy-banner__wordmark {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: var(--ohmy-primary);
}

.ohmy-banner__copy { flex: 1 1 320px; min-width: 240px; }
.ohmy-banner__title {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ohmy-primary);
}
.ohmy-banner__text { margin: 0; font-size: 14px; line-height: 1.5; opacity: 0.85; }
/* Right-to-withdraw notice + privacy-policy link, stated before the choice. */
.ohmy-banner__revoke { margin: 6px 0 0; font-size: 13px; line-height: 1.5; opacity: 0.8; }

.ohmy-banner__actions { display: flex; flex-wrap: wrap; gap: 8px; flex: 0 0 auto; }

/* ---- preference center dialog ---- */
.ohmy-dialog {
  position: fixed;
  z-index: 2147483001; /* above the banner */
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  font-family: var(--ohmy-font);
  color: var(--ohmy-text);
  background: rgba(17, 17, 17, 0.55);
}

.ohmy-dialog__panel {
  width: 100%;
  max-width: 560px;
  max-height: min(88vh, 720px);
  overflow-y: auto;
  padding: 24px;
  background: var(--ohmy-bg);
  border: 1px solid var(--ohmy-line);
  border-radius: var(--ohmy-radius);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.28);
}

.ohmy-dialog__head { display: flex; align-items: flex-start; gap: 12px; }
.ohmy-dialog__title {
  flex: 1 1 auto;
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--ohmy-primary);
}
.ohmy-dialog__close {
  flex: 0 0 auto;
  appearance: none;
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  font-size: 22px;
  line-height: 1;
  color: var(--ohmy-text);
  background: transparent;
  border: 1px solid var(--ohmy-line);
  border-radius: calc(var(--ohmy-radius) * 0.5);
}
.ohmy-dialog__close:hover { background: color-mix(in srgb, var(--ohmy-text) 6%, transparent); }
.ohmy-dialog__close:focus-visible { outline: 2px solid var(--ohmy-accent); outline-offset: 2px; }

.ohmy-dialog__desc { margin: 8px 0 8px; font-size: 14px; line-height: 1.55; opacity: 0.85; }
/* Right-to-withdraw notice + privacy-policy link. */
.ohmy-dialog__legal { margin: 0 0 20px; font-size: 13px; line-height: 1.5; opacity: 0.8; }

.ohmy-dialog__list { margin: 0; padding: 0; list-style: none; }
.ohmy-dialog__row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 0;
  border-block-start: 1px solid var(--ohmy-line);
}
.ohmy-dialog__row:last-child { border-block-end: 1px solid var(--ohmy-line); }
.ohmy-dialog__rowcopy { flex: 1 1 auto; min-width: 0; }
.ohmy-dialog__rowhead { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ohmy-dialog__rowtitle { font-size: 15px; font-weight: 600; color: var(--ohmy-primary); }
.ohmy-dialog__badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  color: color-mix(in srgb, var(--ohmy-text) 70%, transparent);
  background: color-mix(in srgb, var(--ohmy-text) 9%, transparent);
}
.ohmy-dialog__rowdesc { margin: 4px 0 0; font-size: 13.5px; line-height: 1.5; opacity: 0.8; }

.ohmy-dialog__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin-block-start: 20px;
}

/* Discreet attribution, rendered only when brand tokens set poweredBy: true. */
.ohmy-dialog__poweredby {
  margin: 18px 0 0;
  padding-block-start: 12px;
  border-block-start: 1px solid var(--ohmy-line);
  font-size: 11.5px;
  line-height: 1.4;
  text-align: center;
  letter-spacing: 0.01em;
  color: color-mix(in srgb, var(--ohmy-text) 55%, transparent);
}

/* ---- switches ---- */
.ohmy-switch {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  margin-block-start: 2px;
  cursor: pointer;
}
.ohmy-switch--locked { cursor: not-allowed; }
/* The real checkbox sits invisibly ON TOP of the drawn switch, so a click (or an
   automated click on [data-ohmy-toggle]) always hits the input itself. */
.ohmy-switch__input {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: inherit;
}
.ohmy-switch__track {
  pointer-events: none;
  display: block;
  width: 44px;
  height: 26px;
  padding: 3px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ohmy-text) 22%, transparent);
  transition: background-color 0.15s ease;
}
.ohmy-switch__knob {
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transform: translateX(0);
  transition: transform 0.15s ease;
}
.ohmy-switch__input:checked + .ohmy-switch__track { background: var(--ohmy-accent); }
.ohmy-switch__input:checked + .ohmy-switch__track .ohmy-switch__knob { transform: translateX(18px); }
.ohmy-switch__input:focus-visible + .ohmy-switch__track {
  outline: 2px solid var(--ohmy-accent);
  outline-offset: 2px;
}
/* Disabled (necessary): visibly locked — muted, dashed edge, no pointer. */
.ohmy-switch__input:disabled + .ohmy-switch__track {
  background: color-mix(in srgb, var(--ohmy-accent) 38%, var(--ohmy-bg));
  border: 1px dashed color-mix(in srgb, var(--ohmy-text) 35%, transparent);
  padding: 2px;
  opacity: 0.75;
}
.ohmy-switch__input:disabled + .ohmy-switch__track .ohmy-switch__knob {
  background: color-mix(in srgb, #fff 80%, var(--ohmy-text));
  box-shadow: none;
}

/* ---- persistent footer link (rendered by the plugin via wp_footer) ---- */
.ohmy-settings {
  position: fixed;
  z-index: 2147482000; /* below the banner and the dialog */
  inset-block-end: 12px;
  inset-inline-start: 12px;
  display: inline-block;
  padding: 6px 12px;
  font-family: var(--ohmy-font);
  font-size: 12px;
  line-height: 1.2;
  text-decoration: none;
  color: var(--ohmy-text);
  background: color-mix(in srgb, var(--ohmy-bg) 92%, transparent);
  border: 1px solid var(--ohmy-line);
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  opacity: 0.72;
}
/* While the banner is up the link is hidden: the banner itself offers every choice, and a
   pill floating above it read as misplaced. It reappears once a choice has been saved. */
[data-ohmy-banner-open] .ohmy-settings { display: none; }
.ohmy-settings:hover, .ohmy-settings:focus-visible { opacity: 1; text-decoration: underline; }
.ohmy-settings:focus-visible { outline: 2px solid var(--ohmy-accent); outline-offset: 2px; }
/* Inside a real footer/widget area the link is inline, not floating. */
footer .ohmy-settings, .widget .ohmy-settings, .ohmy-settings--inline {
  position: static;
  box-shadow: none;
  background: transparent;
  border-color: transparent;
  padding: 0;
}

@media (max-width: 720px) {
  .ohmy-banner { padding: 8px; }
  .ohmy-banner__inner { flex-direction: column; align-items: stretch; gap: 12px; padding: 16px; max-width: 100%; }
  /* In a column the 320px flex-basis would become HEIGHT and the min-width would
     overflow narrow viewports — reset both so the card hugs its content. */
  .ohmy-banner__copy { flex: 0 0 auto; min-width: 0; overflow-wrap: anywhere; }
  .ohmy-banner__text { font-size: 13px; }
  .ohmy-banner__actions { min-width: 0; }
  /* Four buttons stacked would eat most of a phone screen, so they grid into three rows.
     Reject-all and accept-all share the FIRST row at the same width — same variant, same
     size, same prominence (PTS: yes and no must be designed alike) — with the two other
     options full-width below them. */
  .ohmy-banner__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .ohmy-banner__actions .ohmy-btn { width: 100%; }
  .ohmy-banner__actions [data-ohmy-reject-all],
  .ohmy-banner__actions [data-ohmy-accept-all] { order: -3; }
  .ohmy-banner__actions [data-ohmy-accept-measurement] { grid-column: 1 / -1; order: -2; }
  .ohmy-banner__actions [data-ohmy-customize] { grid-column: 1 / -1; }

  /* Full-width sheet on mobile. */
  .ohmy-dialog { padding: 0; align-items: flex-end; }
  .ohmy-dialog__panel {
    max-width: none;
    max-height: 92vh;
    padding: 20px 18px 24px;
    border-inline: 0;
    border-block-end: 0;
    border-radius: var(--ohmy-radius) var(--ohmy-radius) 0 0;
  }
  .ohmy-dialog__actions { flex-direction: column-reverse; }
  .ohmy-dialog__actions .ohmy-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .ohmy-btn, .ohmy-switch__track, .ohmy-switch__knob { transition: none; }
}