/* Preinvite: one stylesheet for the whole site. */

/* ------------------------------------------------------------ Colors and type */

:root {
  --paper: #fbf7f1;
  --card: #ffffff;
  --ink: #231c36;
  --muted: #675f7b;
  --line: #e7dfd3;
  --field: #ffffff;
  --field-line: #cfc5b6;
  --brand: #d9383f;
  --brand-hover: #bd2b33;
  --brand-ink: #ffffff;
  --link: #b42d35;
  --logo-pre: #d9383f;
  --soft: #fbe9e5;
  --sun: #f5b83d;
  --teal: #1f9e8f;
  --plum: #5b3fa8;
  --ok: #17754d;
  --ok-soft: #e2f3ea;
  --info-soft: #ece8f8;
  --error: #b42318;
  --error-soft: #fdeceb;
  --warn: #8a5300;
  --warn-soft: #fdf1d8;
  --focus: #5b3fa8;
  /* the stats chart (checked for contrast and color-blind safety) */
  --series: #6a4fc4;
  --series-hover: #8a73dc;
  --grid: #eee8df;
  --axis: #cfc5b6;
  --switch-off: #8a8199;
  --switch-on: #17866f;
  --shadow: 0 1px 2px rgba(35, 28, 54, .05), 0 12px 32px rgba(35, 28, 54, .07);
  --radius: 18px;
  --radius-small: 10px;
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #17131f;
    --card: #221c2f;
    --ink: #f4f0f9;
    --muted: #aba3be;
    --line: #372f49;
    --field: #1b1626;
    --field-line: #4d4363;
    --link: #ff9095;
    --logo-pre: #ff7a7e;
    --soft: #3b2230;
    --ok: #62d49f;
    --ok-soft: #163327;
    --info-soft: #2b2446;
    --error: #ff8f84;
    --error-soft: #3b1d1f;
    --warn: #f5c56b;
    --warn-soft: #3a2e14;
    --focus: #b9a0ff;
    --series: #8f76e8;
    --series-hover: #a892f2;
    --grid: #322a43;
    --axis: #4d4363;
    --switch-off: #6f6585;
    --switch-on: #24a487;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 32px rgba(0, 0, 0, .3);
    color-scheme: dark;
  }
}

/* ------------------------------------------------------------ Basics */

*, *::before, *::after { box-sizing: border-box; }

/* "hidden" always wins, even over a button's own display. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh; /* the visible height on phones, whose 100vh runs under the toolbar */
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  font: 17px/1.55 var(--body);
  -webkit-font-smoothing: antialiased;
}

main { flex: 1; }

h1, h2, h3 {
  margin: 0 0 .45em;
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.01em;
  text-wrap: balance;
  overflow-wrap: break-word; /* a very long word in an event's name still fits a phone */
}
h1 { font-size: clamp(1.9rem, 1.45rem + 1.8vw, 2.5rem); }
h2 { font-size: 1.45rem; }
h3 { font-size: 1.15rem; }

p { margin: 0 0 1em; }

a { color: var(--link); text-underline-offset: .15em; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

svg { max-width: 100%; }

.muted { color: var(--muted); }
.center { text-align: center; }
.small { font-size: .9rem; }

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: 8px;
  left: -9999px;
  z-index: 10;
  padding: 8px 14px;
  border-radius: 8px;
  background: var(--card);
}
.skip-link:focus { left: 8px; }

/* ------------------------------------------------------------ Layout */

.wrap {
  width: 100%;
  max-width: 780px;
  margin: 0 auto;
  padding: 0 20px;
}
.page-home .wrap { max-width: 1080px; }
main.wrap { padding-top: 28px; padding-bottom: 56px; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 5;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--ink);
  font-family: var(--display);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -.02em;
  text-decoration: none;
}
.logo-mark { width: 40px; height: 40px; flex: none; }
.logo-pre { color: var(--logo-pre); }
/* The small ™ after the name, its top level with the dot of the i. */
.tm { font-size: .5em; font-weight: 600; vertical-align: .8em; }
/* In the header it hangs past the name, so the menu keeps its room on small phones. */
.logo .tm { display: inline-block; width: 0; }
.header-nav {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: .95rem;
}
.header-nav a:not(.btn) { color: var(--ink); font-weight: 500; text-decoration: none; }
.header-nav a:not(.btn):hover { color: var(--link); }
.header-nav form { margin: 0; }

.site-footer {
  padding: 22px 0 30px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: .9rem;
}
.footer-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
}
.footer-row p { margin: 0; }
.footer-logo { color: var(--ink); font-family: var(--display); font-weight: 700; text-decoration: none; }
.footer-links { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.footer-links a { color: var(--muted); }
.footer-links .link-button { color: var(--muted); font-size: inherit; font-weight: 400; }

/* The first-visit cookie question, pinned to the bottom of the screen. */
.cookie-banner {
  position: fixed;
  right: 16px;
  bottom: 16px;
  left: 16px;
  z-index: 30;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  max-width: 640px;
  margin: 0 auto;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--card);
  color: var(--ink);
  box-shadow: 0 16px 48px rgba(35, 28, 54, .22);
}
.cookie-banner p { flex: 1 1 280px; margin: 0; font-size: .95rem; }
.cookie-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* The Buy Me a Coffee button, added by its script (see footer.php). The script
   sizes its cup icon with a style attribute, which the site's security policy
   blocks, so the size is set here. The button steps aside while the cookie
   question is showing (it would cover "Allow cookies" on phones), and the
   footer leaves room so the button never sits on its links. */
#bmc-wbtn img { width: 36px; height: 36px; margin: 0; padding: 0; }
.cookie-banner:not([hidden]) ~ #bmc-wbtn { display: none !important; }
body:has(#bmc-wbtn) .site-footer { padding-bottom: 100px; }

@media (max-width: 420px) {
  .logo-word { font-size: 1.25rem; }
  .header-nav { gap: 12px; }
}
/* The smallest phones (iPhone SE, 320px): room for Admin · My events · Account. */
@media (max-width: 360px) {
  .wrap { padding: 0 14px; }
  .header-row { gap: 10px; }
  .logo-mark { width: 34px; height: 34px; }
  .logo-word { font-size: 1.15rem; }
  .header-nav { gap: 10px; font-size: .9rem; }
}

/* ------------------------------------------------------------ Buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid var(--field-line);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  font: 600 1rem/1.2 var(--body);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s, border-color .15s, transform .1s;
}
.btn:hover { border-color: var(--ink); }
.btn:active { transform: translateY(1px); }
.btn-primary { border-color: var(--brand); background: var(--brand); color: var(--brand-ink); }
.btn-primary:hover { border-color: var(--brand-hover); background: var(--brand-hover); }
.btn-danger { border-color: currentColor; background: transparent; color: var(--error); }
.btn-danger:hover { border-color: var(--error); background: var(--error-soft); }
.btn-small { min-height: 36px; padding: 6px 14px; font-size: .9rem; }
.btn-big { min-height: 52px; padding: 14px 26px; font-size: 1.05rem; }
.btn-block { display: flex; width: 100%; }

.link-button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}
.link-button:hover { color: var(--link); text-decoration: underline; }
.link-button.danger { color: var(--error); font-size: .9rem; }

.button-row { display: flex; flex-wrap: wrap; gap: 8px; }

/* ------------------------------------------------------------ Cards and messages */

.card {
  margin: 0 0 24px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
}
.narrow { max-width: 460px; margin-left: auto; margin-right: auto; }
@media (max-width: 520px) {
  .card { padding: 22px 18px; border-radius: 16px; }
}

.alert {
  margin: 0 0 20px;
  padding: 12px 16px;
  border-radius: var(--radius-small);
  font-weight: 500;
}
.alert-ok { background: var(--ok-soft); color: var(--ok); }
.alert-error { background: var(--error-soft); color: var(--error); }
.alert-info { background: var(--info-soft); color: var(--ink); }

.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--line);
  color: var(--muted);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  vertical-align: 2px;
}
.badge-open { background: var(--ok-soft); color: var(--ok); }

.pill {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 9px;
  border-radius: 999px;
  background: var(--soft);
  color: var(--link);
  font-size: .8rem;
  font-weight: 700;
  vertical-align: 2px;
}

.kicker {
  margin: 0 0 12px;
  color: var(--link);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.debug {
  overflow: auto;
  padding: 12px;
  border-radius: 8px;
  background: var(--paper);
  font-size: .8rem;
  text-align: left;
  white-space: pre-wrap;
}

/* ------------------------------------------------------------ Forms */

.field { margin: 0 0 18px; }
.field label { display: block; margin: 0 0 6px; font-weight: 600; }
.optional { color: var(--muted); font-weight: 400; }

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
textarea,
select {
  width: 100%;
  min-height: 48px;
  padding: 11px 14px;
  border: 1px solid var(--field-line);
  border-radius: var(--radius-small);
  background: var(--field);
  color: var(--ink);
  font: inherit;
  font-size: 16px; /* 16px or more stops iPhones zooming in on the box */
}
textarea { min-height: 110px; line-height: 1.5; resize: vertical; }
select {
  padding-right: 42px;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%238a8199' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: right 16px center;
  background-repeat: no-repeat;
  background-size: 12px 8px;
}
::placeholder { color: var(--muted); opacity: .75; }
input:focus,
textarea:focus,
select:focus {
  border-color: var(--focus);
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 25%, transparent);
}
.has-error input,
.has-error textarea,
.has-error select { border-color: var(--error); }

.hint { margin: 6px 0 0; color: var(--muted); font-size: .9rem; }
.error { margin: 6px 0 0; color: var(--error); font-size: .9rem; font-weight: 600; }
.form-hint { margin: -8px 0 18px; }

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 16px;
}
@media (max-width: 560px) {
  .field-row { grid-template-columns: 1fr; }
}

/* When: the box, with a calendar button at its right end (app.js) */
.date-row { position: relative; }
.date-row input[type="text"] { padding-right: 52px; }
.date-holder { position: absolute; top: 4px; right: 4px; bottom: 4px; width: 42px; }
.date-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--brand);
  cursor: pointer;
}
.date-button:hover { background: var(--soft); }
/* The browser's own date box sits under the button, so its calendar opens there. */
.date-picker {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
}
.date-button .icon { width: 22px; height: 22px; }

/* Where: town suggestions under the box (app.js, towns.php) */
.town-box { position: relative; }
.town-list {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  left: 0;
  z-index: 20;
  max-height: 300px;
  margin: 0;
  padding: 4px;
  overflow-y: auto;
  border: 1px solid var(--field-line);
  border-radius: var(--radius-small);
  background: var(--card);
  box-shadow: 0 16px 40px rgba(35, 28, 54, .18);
  list-style: none;
}
.town-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 7px;
  cursor: pointer;
}
.town-list li:hover,
.town-list li[aria-selected="true"] { background: var(--soft); }
.town-state { color: var(--muted); font-size: .88rem; white-space: nowrap; }

.form-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.form-foot { margin: 20px 0 0; }
.fine-print { margin: 14px 0 0; color: var(--muted); font-size: .85rem; text-align: center; }

/* A box only robots fill in: kept off-screen for people. */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ------------------------------------------------------------ Page tops */

.back { margin: 0 0 12px; font-size: .95rem; }
.back a { color: var(--muted); text-decoration: none; }
.back a:hover { color: var(--link); }

.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 16px;
  margin-bottom: 22px;
}
.page-head h1 { margin: 0 0 6px; }
.page-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; }

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.section-head h2 { margin: 0; }

/* ------------------------------------------------------------ QR codes */

.qr {
  aspect-ratio: 1;
  border-radius: 12px;
  background: #fff;
}
.qr svg { display: block; width: 100%; height: auto; border-radius: 12px; }

.copy-row { display: flex; gap: 8px; margin: 14px 0; }
.copy-row input { flex: 1; min-width: 0; background: var(--paper); font-size: 16px; /* under 16px, iPhones zoom in on a tap */ }

/* ------------------------------------------------------------ Home page */

.hero {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  align-items: center;
  gap: 40px;
  padding: 36px 0 56px;
}
.hero h1 {
  font-size: clamp(2.3rem, 1.4rem + 3.4vw, 3.7rem);
  font-weight: 700;
  line-height: 1.04;
}
.hero h1 em { color: var(--link); }
.lead { max-width: 34em; color: var(--muted); font-size: 1.15rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 0; }

.hero-art {
  display: flex;
  justify-content: center;
  padding: 24px 0;
  /* a little confetti behind the card */
  background:
    radial-gradient(circle at 8% 18%, var(--sun) 0 7px, transparent 8px),
    radial-gradient(circle at 92% 10%, var(--teal) 0 6px, transparent 7px),
    radial-gradient(circle at 96% 70%, var(--brand) 0 8px, transparent 9px),
    radial-gradient(circle at 4% 82%, var(--plum) 0 6px, transparent 7px),
    radial-gradient(circle at 20% 96%, var(--brand) 0 4px, transparent 5px),
    radial-gradient(circle at 78% 94%, var(--sun) 0 5px, transparent 6px);
}
.demo-card {
  width: min(330px, 100%);
  padding: 28px 26px 22px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--card);
  box-shadow: var(--shadow);
  text-align: center;
  transform: rotate(2deg);
}
.demo-title { margin: 0 0 6px; font-family: var(--display); font-size: 1.65rem; font-weight: 700; line-height: 1.1; }
.demo-facts { margin: 0; color: var(--muted); font-size: .95rem; }
.demo-qr { width: 150px; margin: 18px auto 14px; }
.demo-count { margin: 0; font-size: .95rem; }
.demo-count strong { color: var(--link); font-size: 1.2rem; }

.step-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.step-list li {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
}
.step-list p { margin: 0; color: var(--muted); }
.step-number {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-bottom: 12px;
  border-radius: 50%;
  background: var(--soft);
  color: var(--link);
  font-weight: 800;
}
.closing { margin-top: 44px; padding: 40px 24px; }

.uses { margin-top: 56px; }
.uses h2, .faq h2 { margin: 0 0 18px; text-align: center; }
.use-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0 auto;
  padding: 0;
  max-width: 820px;
  list-style: none;
}
.use-list li {
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  font-weight: 500;
}

.faq { margin-top: 56px; }
.faq-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 40px;
  margin: 0;
}
.faq-list div { padding: 16px 0; border-top: 1px solid var(--line); }
.faq-list dt { margin: 0 0 6px; font-weight: 700; }
.faq-list dd { margin: 0; color: var(--muted); }

@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; padding-top: 8px; }
  .step-list { grid-template-columns: 1fr; }
  .faq-list { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------ My events */

.event-list { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.event-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  padding: 20px 22px;
  color: inherit;
  text-decoration: none;
  transition: border-color .15s, transform .15s;
}
.event-row:hover { border-color: var(--field-line); transform: translateY(-1px); }
.event-row-main { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.event-row-title { color: var(--ink); font-family: var(--display); font-size: 1.25rem; font-weight: 600; }
.event-row-stats {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  color: var(--muted);
  font-size: .95rem;
}
.event-row-stats strong { color: var(--ink); font-size: 1.1rem; }
.empty-state { padding: 44px 24px; }

@media (max-width: 560px) {
  .event-row { flex-direction: column; align-items: flex-start; }
}

/* ------------------------------------------------------------ One event (for its host) */

.share {
  display: grid;
  grid-template-columns: 190px 1fr;
  align-items: center;
  gap: 28px;
}
.share-qr { border: 1px solid var(--line); }
.share-body h2 { margin-bottom: .3em; }
.share-body > p { margin: 0; }
.share-body > .share-stats { margin-top: 8px; color: var(--muted); font-size: .92rem; }
.share-stats strong { color: var(--ink); }

@media (max-width: 620px) {
  .share { grid-template-columns: 1fr; gap: 18px; }
  .share-qr { width: 200px; margin: 0 auto; }
}

/* On a phone the code can be tapped to show it full screen (app.js). */
.qr-zoomable { cursor: zoom-in; -webkit-tap-highlight-color: transparent; }
.qr-zoomable:active { transform: scale(.98); }
.qr-hint { margin: 8px 0 0; color: var(--muted); font-size: .85rem; line-height: 1.35; text-align: center; }

/* The code full screen: always black on white, the way cameras read it best,
   even in dark mode. As big as fits with the event's name and link around it. */
.qr-full {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 20px 20px calc(20px + env(safe-area-inset-bottom));
  border: 0;
  background: #fff;
  color: #1c1629;
  text-align: center;
  cursor: zoom-out;
}
.qr-full[open] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.qr-full:focus { outline: none; }
.qr-full::backdrop { background: #fff; }
.qr-full p { margin: 0; }
.qr-full-title {
  max-width: 22em;
  font-family: var(--display);
  font-size: clamp(1.5rem, 1rem + 2.6vw, 2.2rem);
  font-weight: 700;
  line-height: 1.1;
  overflow-wrap: break-word;
}
.qr-full-code { width: min(100%, 560px, calc(100vh - 250px)); width: min(100%, 560px, calc(100dvh - 250px)); }
.qr-full-code svg { display: block; width: 100%; height: auto; }
.qr-full-cta { font-size: 1.15rem; font-weight: 600; }
.qr-full-link { color: #4e4760; overflow-wrap: anywhere; }
.qr-full-hint { color: #6b647a; font-size: .88rem; }
.qr-full-close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #f1ede6;
  color: #1c1629;
  cursor: pointer;
}
.qr-full-close .icon { width: 22px; height: 22px; }
/* A phone on its side: the code on the left, as tall as the screen; the words beside it. */
@media (orientation: landscape) and (max-height: 540px) {
  .qr-full[open] { display: grid; grid-template-columns: auto minmax(0, 18em); grid-auto-rows: min-content; align-content: center; justify-content: center; column-gap: 28px; row-gap: 8px; text-align: left; }
  .qr-full-code { grid-column: 1; grid-row: 1 / span 4; width: calc(100vh - 40px); width: calc(100dvh - 40px); }
  .qr-full-title, .qr-full-cta, .qr-full-link, .qr-full-hint { grid-column: 2; }
}

.icon { flex: none; width: 18px; height: 18px; }

/* Share ▾: Text message, WhatsApp, Facebook, Email, Copy link, More apps */
.share-menu-wrap { position: relative; }
.share-menu-wrap summary { list-style: none; }
.share-menu-wrap summary::-webkit-details-marker { display: none; }
.share-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  min-width: 210px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  box-shadow: 0 16px 40px rgba(35, 28, 54, .18);
}
.share-menu a,
.share-menu button {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  border: 0;
  border-radius: 9px;
  background: none;
  color: var(--ink);
  font: 500 .98rem/1.2 var(--body);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.share-menu a:hover,
.share-menu button:hover { background: var(--soft); }
.share-menu .icon { width: 20px; height: 20px; color: var(--brand); }
/* Text message only where there's a phone to send it from */
@media (hover: hover) and (pointer: fine) {
  .share-menu .share-sms { display: none; }
}

/* Delete this page: a small link at the bottom right, opening the YES box */
.delete-page { margin: -8px 0 24px; text-align: right; }
.delete-page summary {
  display: inline-block;
  padding: 4px 2px;
  color: var(--muted);
  font-size: .85rem;
  cursor: pointer;
  list-style: none;
}
.delete-page summary::-webkit-details-marker { display: none; }
.delete-page summary:hover,
.delete-page[open] summary { color: var(--error); text-decoration: underline; }
.delete-form {
  max-width: 400px;
  margin: 8px 0 0 auto;
  padding: 16px 18px;
  border: 1px solid var(--error);
  border-radius: var(--radius-small);
  background: var(--card);
  text-align: left;
}
.delete-form p { margin: 0 0 12px; font-size: .95rem; }
.delete-form label { display: block; margin: 0 0 6px; font-weight: 600; font-size: .95rem; }
.delete-row { display: flex; gap: 8px; }
.delete-row input { flex: 1; min-width: 0; min-height: 40px; padding: 8px 12px; text-transform: uppercase; }
.delete-row .btn { flex: none; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn:disabled:hover { background: transparent; }

.tally { margin: 0 0 16px; color: var(--muted); }
.tally strong { color: var(--ink); font-size: 1.15rem; }

.empty-note {
  margin: 0;
  padding: 22px;
  border: 1px dashed var(--field-line);
  border-radius: var(--radius-small);
  color: var(--muted);
  text-align: center;
}

.guest-list { margin: 0; padding: 0; list-style: none; }
.guest {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
}
.guest-main { min-width: 0; }
.guest-name { margin: 0 0 2px; font-weight: 700; overflow-wrap: anywhere; }
.guest-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 16px;
  margin: 0;
  font-size: .95rem;
  overflow-wrap: anywhere;
}
.guest-note {
  margin: 8px 0 0;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--paper);
  font-size: .95rem;
}
.guest-side {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  color: var(--muted);
  font-size: .85rem;
}
.guest-side form { margin: 0; }

/* The star in front of each guest: tap to make them a favorite (event.php puts favorites first). */
.guest .guest-main { flex: 1; }
.guest-star { flex: none; margin: -8px -10px 0 -8px; }
.star-button {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--muted);
  cursor: pointer;
}
.star-button:hover { background: var(--soft); color: var(--ink); }
.star-button .icon { width: 24px; height: 24px; }
.star-button[aria-pressed="true"] { color: var(--warn); }
.star-button[aria-pressed="true"] path { fill: var(--sun); }

.setting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
}
h2 + .setting { padding-top: 4px; border-top: 0; }
.setting p { margin: 2px 0 0; }
.setting form { flex: none; margin: 0; }

@media (max-width: 560px) {
  .setting { flex-direction: column; align-items: flex-start; }
}

/* ------------------------------------------------------------ The public event page */

.invite {
  position: relative;
  overflow: hidden;
  padding-top: 44px;
  text-align: center;
}
.invite::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 8px;
  background: linear-gradient(90deg, var(--brand) 0 25%, var(--sun) 25% 50%, var(--teal) 50% 75%, var(--plum) 75%);
}
.invite-title {
  margin-bottom: 10px;
  font-size: clamp(2.1rem, 1.5rem + 3vw, 3.1rem);
  font-weight: 700;
  line-height: 1.06;
}
.invite-host { margin: 0; color: var(--muted); font-size: 1.05rem; }
.invite-facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 36px;
  margin: 24px 0 0;
}
.invite-facts dt {
  color: var(--muted);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.invite-facts dd { margin: 2px 0 0; font-size: 1.1rem; font-weight: 600; }
.invite-message {
  max-width: 32em;
  margin: 26px auto 0;
  padding-top: 22px;
  border-top: 1px dashed var(--line);
  font-size: 1.08rem;
  overflow-wrap: anywhere;
}

.signup-card h2 { margin-bottom: .25em; }

.thanks { text-align: center; }
.thanks h2 { margin-bottom: .3em; }
.thanks p:last-child { margin: 0; }
.thanks-icon { display: block; width: 56px; height: 56px; margin: 0 auto 12px; color: var(--ok); }

.share-page { margin: 8px 0 0; text-align: center; }
.share-page summary {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  color: var(--muted);
  font-weight: 600;
  cursor: pointer;
}
.share-page summary:hover { color: var(--link); }
.share-page-body { max-width: 420px; margin: 12px auto 0; }
.share-page .qr { width: 200px; margin: 0 auto; border: 1px solid var(--line); }

/* ------------------------------------------------------------ Home Screen app and notifications */

/* "Add Preinvite to your Home Screen", at the bottom of every page (app.js shows it) */
.footer-app { margin-bottom: 18px; }
.app-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  max-width: 100%;
  padding: 12px 18px 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-size: .95rem;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
}
.app-link:hover { border-color: var(--field-line); }
.app-link .icon {
  box-sizing: content-box;
  width: 20px;
  height: 20px;
  padding: 8px;
  border-radius: 10px;
  background: var(--soft);
  color: var(--brand);
}
.app-link-why { color: var(--muted); }

/* The pop-up (footer.php). On phones it comes up from the bottom, in reach of a thumb. */
.app-dialog {
  width: min(440px, calc(100% - 32px));
  max-width: none;
  max-height: calc(100% - 32px);
  margin: auto;
  padding: 28px 24px 22px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--card);
  color: var(--ink);
  box-shadow: 0 24px 64px rgba(23, 19, 31, .32);
  text-align: center;
}
.app-dialog::backdrop { background: rgba(23, 19, 31, .5); }
.app-dialog:focus { outline: none; }
.app-dialog h2 { margin: 14px 0 8px; font-size: 1.5rem; }
.app-dialog p { margin: 0; color: var(--muted); }
.app-dialog-icon { display: block; width: 64px; height: 64px; margin: 0 auto; border-radius: 15px; box-shadow: 0 4px 14px rgba(35, 28, 54, .18); }
.app-dialog-close {
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.app-dialog-close:hover { background: var(--paper); color: var(--ink); }
.app-dialog-close .icon { width: 20px; height: 20px; }
.app-steps { margin: 18px 0 0; padding: 0; list-style: none; text-align: left; }
.app-steps li { display: flex; align-items: center; gap: 14px; padding: 11px 0; border-top: 1px solid var(--line); }
.app-steps li:first-child { border-top: 0; }
.app-step-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--soft);
  color: var(--brand);
}
.app-step-icon .icon { width: 22px; height: 22px; }
.app-step-icon img { display: block; border-radius: 6px; }
.app-dialog .app-dialog-note {
  margin: 16px 0 0;
  padding: 10px 14px;
  border-radius: var(--radius-small);
  background: var(--info-soft);
  color: var(--ink);
  font-size: .95rem;
}
.app-dialog-actions { display: grid; gap: 10px; margin-top: 20px; }

@media (max-width: 560px) {
  .app-dialog {
    width: 100%;
    max-height: calc(100% - 24px);
    margin: auto 0 0;
    padding: 26px 20px calc(18px + env(safe-area-inset-bottom));
    border-width: 1px 0 0;
    border-radius: 22px 22px 0 0;
  }
  .app-dialog[open] { animation: sheet-up .22s ease-out; }
}
@keyframes sheet-up {
  from { transform: translateY(40px); opacity: 0; }
  to { transform: none; opacity: 1; }
}

/* On/off switches (Account → Notifications) */
.switch {
  position: relative;
  flex: none;
  width: 52px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--switch-off);
  cursor: pointer;
  transition: background-color .15s;
}
.switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
  transition: transform .15s;
}
.switch[aria-checked="true"] { background: var(--switch-on); }
.switch[aria-checked="true"]::after { transform: translateX(20px); }
.switch:disabled { opacity: .45; cursor: not-allowed; }
.setting-switch .muted { font-size: .95rem; }
@media (max-width: 560px) {
  .setting.setting-switch { flex-direction: row; align-items: center; }
}

.push-more { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 8px; }
.push-status { color: var(--muted); font-size: .92rem; }
.push-status:empty { display: none; }

.device-heading { margin: 20px 0 2px; font-family: var(--body); font-size: 1rem; font-weight: 700; }
.device-list { margin: 0; padding: 0; list-style: none; }
.device {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
.device p { margin: 0; }
.device-name { font-weight: 600; }
.device form { flex: none; margin: 0; }

.status-ok { color: var(--ok); font-weight: 600; }
.status-bad { color: var(--error); font-weight: 600; }

/* ------------------------------------------------------------ Privacy, terms and cookie pages */

.legal h2 { margin: 1.6em 0 .5em; font-size: 1.3rem; }
.legal h3 { margin: 1.3em 0 .4em; font-family: var(--body); font-size: 1.02rem; font-weight: 700; }
.legal ul { margin: 0 0 1em; padding-left: 1.3em; }
.legal li { margin: 0 0 .45em; }
.legal-intro { font-size: 1.08rem; }
.legal-summary { margin: 0 0 8px; padding: 18px 22px 6px; border-radius: var(--radius-small); background: var(--paper); }
.legal-summary h2 { margin: 0 0 .5em; font-size: 1.1rem; }
.legal-more { color: var(--muted); text-align: center; }

.legal .cookie-list { padding: 0; list-style: none; }
.cookie-list li { margin: 0; padding: 14px 0; border-top: 1px solid var(--line); }
.cookie-list li:last-child { border-bottom: 1px solid var(--line); }
.cookie-list p { margin: 0 0 4px; }
.cookie-name code { font-size: 1rem; font-weight: 700; }
.cookie-life { color: var(--muted); font-size: .92rem; }
.badge-optional { background: var(--info-soft); color: var(--focus); }

/* ------------------------------------------------------------ Admin → Stats */

.page-admin .wrap { max-width: 1040px; }

.range-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; }
.range-tabs a {
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  font-size: .92rem;
  font-weight: 600;
  text-decoration: none;
}
.range-tabs a:hover { border-color: var(--field-line); }
.range-tabs a[aria-current="page"] { border-color: var(--ink); background: var(--ink); color: var(--paper); }

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  margin: 0 0 12px;
}
.tile {
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
}
.tile-label { margin: 0 0 4px; color: var(--muted); font-size: .85rem; font-weight: 600; }
.tile-value { margin: 0; font-family: var(--body); font-size: 1.9rem; font-weight: 650; line-height: 1.1; }
.totals { margin: 0 0 24px; }

.chart-card h2 { margin-bottom: .2em; }
.chart { position: relative; margin-top: 14px; }
.chart svg { display: block; overflow: visible; }
.chart svg:focus { outline: none; }
.chart svg:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; border-radius: 6px; }
.chart-bar { fill: var(--series); }
.chart-bar.is-active { fill: var(--series-hover); }
.chart-grid { stroke: var(--grid); stroke-width: 1; }
.chart-base { stroke: var(--axis); stroke-width: 1; }
.chart-tick { fill: var(--muted); font: 12px var(--body); font-variant-numeric: tabular-nums; }
.chart-peak { fill: var(--ink); font: 600 12px var(--body); font-variant-numeric: tabular-nums; }
.chart-hit { fill: transparent; }
.chart-empty {
  position: absolute;
  top: 40%;
  left: 50%;
  margin: 0;
  color: var(--muted);
  transform: translate(-50%, -50%);
}
.chart-tip {
  position: absolute;
  z-index: 2;
  padding: 8px 11px;
  border-radius: 9px;
  background: var(--ink);
  color: var(--paper);
  font-size: .82rem;
  line-height: 1.4;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: var(--shadow);
  transform: translate(-50%, calc(-100% - 10px));
}
.chart-tip strong { font-size: 1.05rem; }
.chart-tip span { opacity: .75; }

.table-view { margin-top: 14px; }
.table-view summary { color: var(--muted); font-size: .92rem; font-weight: 600; cursor: pointer; }
/* position: relative keeps everything in the table, even screen-reader-only labels, inside the sideways scroll */
.table-wrap { position: relative; overflow-x: auto; margin: 8px 0 0; }
table { width: 100%; border-collapse: collapse; font-size: .93rem; }
th,
td { padding: 9px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th {
  color: var(--muted);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
tbody tr:last-child td { border-bottom: 0; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

.admin-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
@media (max-width: 760px) {
  .admin-columns { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------ Admin → Setup check */

.check-list { margin: 0; padding: 0; list-style: none; }
.check {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 2px 12px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}
.check:first-child { padding-top: 4px; border-top: 0; }
.check-mark {
  display: grid;
  grid-row: span 2;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: .85rem;
  font-weight: 700;
}
.check-ok .check-mark { background: var(--ok-soft); color: var(--ok); }
.check-bad .check-mark { background: var(--error-soft); color: var(--error); }
.check-warn .check-mark { background: var(--warn-soft); color: var(--warn); }
.check-title { margin: 0; font-weight: 700; }
.check-detail { margin: 0; color: var(--muted); font-size: .93rem; overflow-wrap: anywhere; }
.dns-table code { font-size: .88rem; overflow-wrap: anywhere; }

/* ------------------------------------------------------------ The Feedback button and pop-up */

/* Feedback's own red: the logo's envelope red, which white text reads well on (5.5:1). */
:root {
  --feedback: #c2333e;
  --feedback-hover: #a82935;
}

/* Bottom left, across from the Buy Me a Coffee button. Like that one, it steps
   aside while the cookie question is showing (footer.php puts it after the
   banner for this), and the footer leaves room so it never sits on its links.
   24px up, so its middle lines up with the taller coffee button's. */
.feedback-button {
  position: fixed;
  bottom: 24px;
  left: 18px;
  z-index: 20;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 22px 0 18px;
  border-radius: 999px;
  background: var(--feedback);
  color: #fff;
  font: 700 1rem/1 var(--body);
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(35, 28, 54, .18), 0 10px 26px rgba(168, 41, 53, .32);
  transition: background-color .15s, transform .15s;
}
.feedback-button:hover { background: var(--feedback-hover); transform: translateY(-2px); }
.feedback-button:active { transform: translateY(0); }
.feedback-button .icon { width: 22px; height: 22px; }
.cookie-banner:not([hidden]) ~ .feedback-button { display: none; }
body:has(.feedback-button) .site-footer { padding-bottom: 100px; }

.btn-feedback { border-color: var(--feedback); background: var(--feedback); color: #fff; }
.btn-feedback:hover { border-color: var(--feedback-hover); background: var(--feedback-hover); }

.feedback-dialog {
  width: min(480px, calc(100% - 24px));
  max-height: calc(100% - 24px);
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: var(--card);
  color: var(--ink);
  box-shadow: 0 24px 70px rgba(23, 19, 31, .4);
  overflow: auto;
  overscroll-behavior: contain;
}
.feedback-dialog::backdrop { background: rgba(23, 19, 31, .55); }
.feedback-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 12px 14px 24px;
  background: var(--feedback);
  color: #fff;
}
.feedback-head h2 { margin: 0; font-size: 1.35rem; }
.feedback-close {
  display: grid;
  flex: none;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  cursor: pointer;
}
.feedback-close:hover { background: rgba(255, 255, 255, .18); }
.feedback-close:focus-visible { outline-color: #fff; outline-offset: -4px; }
.feedback-close .icon { width: 22px; height: 22px; }
.feedback-body { padding: 20px 24px 22px; }
.feedback-intro { margin: 0 0 16px; color: var(--muted); font-size: .95rem; }
.feedback-body .alert { margin-bottom: 16px; }
.feedback-body .field { margin-bottom: 14px; }
.feedback-sent { padding: 6px 0 2px; text-align: center; }
.feedback-sent:focus { outline: none; }
.feedback-sent h3 { margin: 0 0 .3em; font-size: 1.45rem; }
.feedback-sent .thanks-icon,
.feedback-page .thanks-icon { color: var(--feedback); }

@media (max-width: 520px) {
  .feedback-head { padding-left: 18px; }
  .feedback-body { padding: 18px 18px 20px; }
}
@media (prefers-reduced-motion: no-preference) {
  .feedback-dialog[open] { animation: feedback-in .2s ease-out; }
  .feedback-dialog[open]::backdrop { animation: feedback-fade .2s ease-out; }
}
@keyframes feedback-in { from { opacity: 0; transform: translateY(16px) scale(.98); } }
@keyframes feedback-fade { from { opacity: 0; } }

/* ------------------------------------------------------------ Admin → Messages */

/* How many messages are new, on the Admin link and the Stats page's Messages button */
.nav-count {
  display: inline-block;
  min-width: 1.6em;
  margin-left: 3px;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--feedback);
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  vertical-align: 1px;
}
/* In the menu it sits on the corner of "Admin", so the menu still fits a small phone. */
.header-nav .has-count { position: relative; }
.header-nav .nav-count {
  position: absolute;
  top: -11px;
  right: -8px;
  min-width: 18px;
  margin: 0;
  padding: 1px 5px;
  font-size: .68rem;
}
.badge-new { background: var(--feedback); color: #fff; }

.message { padding: 22px 24px; }
.message-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 4px 16px;
  margin: 0 0 12px;
}
.message-name { margin: 0 0 2px; font-family: var(--body); font-size: 1.05rem; font-weight: 700; letter-spacing: 0; }
.message-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 14px;
  margin: 0;
  color: var(--muted);
  font-size: .92rem;
  overflow-wrap: anywhere;
}
.message-when { margin: 0; color: var(--muted); font-size: .9rem; white-space: nowrap; }
.message-text { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.message > .message-text {
  padding: 14px 16px;
  border-left: 4px solid var(--feedback);
  border-radius: 0 var(--radius-small) var(--radius-small) 0;
  background: var(--paper);
}
.message-page { margin: 8px 0 0; color: var(--muted); font-size: .88rem; overflow-wrap: anywhere; }
.message-page a { color: var(--muted); }
.message-reply { margin: 12px 0 0 24px; padding: 12px 16px; border-radius: var(--radius-small); background: var(--info-soft); }
.message-reply-head { margin: 0 0 4px; color: var(--muted); font-size: .88rem; }
.message-reply-head strong { color: var(--ink); }
.message-unsent { color: var(--error); font-weight: 600; }

/* Reply on the left (its box opens under it), Close and Delete on the right */
.message-actions {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: start;
  gap: 10px 8px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.message-actions form { margin: 0; }
.message-answer summary { list-style: none; }
.message-answer summary::-webkit-details-marker { display: none; }
.message-answer form { margin-top: 14px; }
.message-answer label { display: block; margin: 0 0 6px; font-weight: 600; }
.message-answer .hint { margin: 6px 0 12px; }
.message-no-reply { margin: 0; align-self: center; color: var(--muted); font-size: .9rem; }

@media (max-width: 560px) {
  .message { padding: 18px 16px; }
  .message-reply { margin-left: 12px; }
  .message-answer[open] { grid-column: 1 / -1; }
}

/* ------------------------------------------------------------ The printable sign */

.page-sign main.wrap { max-width: 720px; }
.sign-tools {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}
.sign {
  padding: 48px 32px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  color: #1c1629;
  text-align: center;
}
.sign .kicker { color: #b42d35; }
.sign-title {
  margin: 0 0 8px;
  font-size: clamp(2.2rem, 1.4rem + 4vw, 3.6rem);
  font-weight: 700;
  line-height: 1.05;
}
.sign-facts { margin: 0; color: #4e4760; font-size: 1.25rem; }
.sign-qr { width: min(340px, 80%); margin: 30px auto 20px; }
.sign-cta { margin: 0 0 4px; font-size: 1.35rem; font-weight: 600; }
.sign-link { margin: 0 0 18px; color: #4e4760; font-size: 1.1rem; overflow-wrap: anywhere; }
.sign-host { margin: 0; color: #4e4760; }

@media print {
  @page { margin: .6in; }
  body { display: block; background: #fff; }
  .site-header,
  .site-footer,
  .skip-link,
  .alert,
  .cookie-banner,
  #bmc-wbtn,
  #bmc-iframe,
  .no-print { display: none !important; }
  main.wrap { max-width: none; padding: 0; }
  .sign { padding: 0; border: 0; }
  .sign-qr { width: 4.2in; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}