/* The report sheet (report.js), on whatsup.hr and pro.whatsup.hr alike. Every
   colour goes through a --wr-* token: here they take whatsup.hr's names, with
   its light values as fallbacks, and pro sets them from its own palette. */
.wr, .wrFlag {
  --wr-paper: var(--card, #ffffff); --wr-ground: var(--paper, #ffffff);
  --wr-ink: var(--ink, #102a2e); --wr-soft: var(--soft, #4d6266); --wr-faint: var(--faint, #8a9ea1);
  --wr-rule: var(--rule, #e2eced); --wr-rule-hard: var(--rule-hard, #c5d6d8);
  --wr-accent: var(--accent, #0b7a7c); --wr-accent-hover: var(--accent-hover, #096668); --wr-accent-ink: var(--accent-ink, #ffffff);
  --wr-pink: var(--pink, #d6246e); --wr-pink-wash: var(--pink-wash, #fde7f0); --wr-pink-ink: #ffffff;
  --wr-alert: var(--alert, #b42318);
  --wr-sans: var(--sans, "Familjen Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
  --wr-mono: var(--mono, "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
}

/* The flag: an outline icon in a 40 px tap target. */
.wrFlag { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--wr-faint); cursor: pointer; }
.wrFlag:hover { color: var(--wr-pink); background: var(--wr-pink-wash); }
.wrFlag:focus-visible { outline: 2px solid var(--wr-pink); outline-offset: -2px; }
.wrFlag svg { width: 16px; height: 16px; }

/* The sheet: a native dialog, a bottom sheet on a phone and a centred box on a desktop. */
.wr { padding: 0; border: 0; background: transparent; color: var(--wr-ink); font: 400 15px/1.45 var(--wr-sans); max-width: none; max-height: none; overflow: visible; }
.wr::backdrop { background: rgba(6, 20, 22, .5); }
.wrSheet { background: var(--wr-paper); box-shadow: 0 -8px 32px rgba(0, 0, 0, .2); overflow: auto; overscroll-behavior: contain; }
@media (max-width: 599px) {
  .wr { width: 100%; margin: auto 0 0; }
  .wrSheet { max-height: 90dvh; border-radius: 20px 20px 0 0; padding: 8px 16px calc(18px + env(safe-area-inset-bottom, 0px)); }
}
@media (min-width: 600px) {
  .wr { width: min(460px, calc(100% - 32px)); margin: auto; }
  .wrSheet { max-height: 85vh; border-radius: 20px; padding: 20px 22px 22px; box-shadow: 0 16px 48px rgba(0, 0, 0, .24); }
  .wrGrab { display: none; }
}
.wrGrab { width: 40px; height: 4px; margin: 0 auto 10px; border-radius: 2px; background: var(--wr-rule-hard); }
.wrHead { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.wrTitle { margin: 0; font: 700 20px/1.2 var(--wr-sans); letter-spacing: -.01em; color: var(--wr-ink); }
.wrClose { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-right: -8px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--wr-soft); cursor: pointer; }
.wrClose:hover { color: var(--wr-ink); background: var(--wr-rule); }
.wrRecap { display: flex; flex-direction: column; gap: 3px; margin-bottom: 14px; padding: 10px 12px; border: 1px solid var(--wr-rule); border-radius: 12px; background: var(--wr-ground); }
.wrRecap b { font-weight: 600; overflow-wrap: anywhere; }
.wrRecap span { font: 400 12px/1.4 var(--wr-mono); color: var(--wr-soft); overflow-wrap: anywhere; }
.wrChips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.wrChip { padding: 6px 12px; white-space: nowrap; border: 1px solid var(--wr-rule-hard); border-radius: 999px; background: transparent; color: var(--wr-ink); font: 500 13.5px/1.2 var(--wr-sans); cursor: pointer; }
.wrChip:hover { border-color: var(--wr-pink); color: var(--wr-pink); }
.wrChip[aria-pressed="true"] { border-color: var(--wr-pink); background: var(--wr-pink); color: var(--wr-pink-ink); }
.wrRows { display: flex; flex-direction: column; gap: 10px; }
.wrRows:has(.wrRow:not([hidden])) { margin-bottom: 12px; }
.wrRow[hidden] { display: none; }
.wrLabel { display: block; margin: 0 0 4px; font: 500 12px/1.3 var(--wr-mono); letter-spacing: .02em; color: var(--wr-soft); }
.wrInput { display: block; width: 100%; box-sizing: border-box; padding: 9px 12px; border: 1px solid var(--wr-rule-hard); border-radius: 10px; background: var(--wr-paper); color: var(--wr-ink); font: 400 15px/1.3 var(--wr-sans); }
.wrInput:focus { outline: 2px solid var(--wr-accent); outline-offset: -1px; border-color: var(--wr-accent); }
.wrComment { resize: vertical; min-height: 64px; }
.wrSeg { display: flex; border: 1px solid var(--wr-rule-hard); border-radius: 10px; overflow: hidden; }
.wrSeg button { flex: 1 1 0; padding: 9px 8px; border: 0; background: transparent; color: var(--wr-ink); font: 500 14px/1.2 var(--wr-sans); cursor: pointer; }
.wrSeg button + button { border-left: 1px solid var(--wr-rule-hard); }
.wrSeg button[aria-pressed="true"] { background: var(--wr-pink); color: var(--wr-pink-ink); }
.wrAs { margin: 10px 0 12px; font: 400 11.5px/1.4 var(--wr-mono); color: var(--wr-faint); overflow-wrap: anywhere; }
.wrError { margin: 0 0 10px; color: var(--wr-alert); font-size: 14px; }
.wrError[hidden] { display: none; }
.wrSend { display: block; width: 100%; padding: 12px 16px; border: 0; border-radius: 999px; background: var(--wr-accent); color: var(--wr-accent-ink); font: 600 15px/1.2 var(--wr-sans); cursor: pointer; }
.wrSend:hover { background: var(--wr-accent-hover); }
.wrSend:disabled { opacity: .45; cursor: default; background: var(--wr-accent); }
.wrThanks { margin: 6px 0 16px; font: 600 17px/1.35 var(--wr-sans); }
.wrGoogle { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 11px 16px; border: 1px solid #dadce0; border-radius: 999px; background: #ffffff; color: #3c4043; font: 500 15px/1.2 system-ui, -apple-system, "Segoe UI", sans-serif; cursor: pointer; }
.wrGoogle:disabled { opacity: .6; cursor: wait; }
.wr button:focus-visible, .wr select:focus-visible { outline: 2px solid var(--wr-pink); outline-offset: 2px; }