/* Cookie consent bar, settings dialog and the launch-notify form.
 *
 * Own stylesheet on purpose (website-notalune skill): a new URL cannot be served stale,
 * only the pages that need it pay for it, and it is small enough to read end to end when
 * checking what the server actually has. Do NOT fold this into site.css.
 *
 * Tokens come from site.css :root. This file adds no colours of its own.
 */

/* ---- the bar ------------------------------------------------------------------- */
.consent-bar {
  position: fixed;
  z-index: 60;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--cream-alt);
  border-top: 1px solid var(--hairline);
  box-shadow: 0 -6px 24px rgba(12, 9, 7, 0.14);
}

/* Kept deliberately short: one sentence, one row, small type. A consent bar is a toll
   gate, not a page. David, 2026-07-30: "make it smaller". */
.consent-wrap {
  max-width: 1060px;
  margin: 0 auto;
  padding: 11px 22px;
  display: flex;
  gap: 18px;
  align-items: center;
  flex-wrap: wrap;
}

.consent-copy { flex: 1 1 320px; min-width: 0; }
.consent-copy p { margin: 0; font-size: var(--t-micro); line-height: 1.45; }

.consent-acts {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

/* ---- buttons -------------------------------------------------------------------- */
/* Reject and Accept are deliberately the SAME size and weight. Making reject quieter
   than accept is the specific pattern EU regulators fine people for, and it is also
   just dishonest. Only "Let me choose" is quieter, because it is not a decision. */
.consent-btn {
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--t-micro);
  color: var(--ink);
  background: rgba(243, 231, 207, 0.9);
  border: 1px solid var(--hairline);
  padding: 8px 17px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}
.consent-btn:hover { background: var(--cream-warm); }

.consent-btn-primary {
  color: var(--cream);
  background: var(--primary);
  border-color: transparent;
  box-shadow: var(--shadow-lift);
}
.consent-btn-primary:hover { background: var(--primary-deep); }

.consent-btn-quiet {
  background: none;
  border-color: transparent;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding-left: 6px;
  padding-right: 6px;
}
.consent-btn-quiet:hover { background: none; color: var(--sienna); }

/* ---- settings dialog ------------------------------------------------------------ */
.consent-scrim {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(12, 9, 7, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow-y: auto;
}

.consent-panel {
  background: var(--cream);
  border-radius: var(--radius-sheet);
  box-shadow: 0 18px 60px rgba(12, 9, 7, 0.4);
  max-width: 520px;
  width: 100%;
  padding: 28px;
  /* A long dialog on a short phone must scroll inside itself, not push the page. */
  max-height: calc(100vh - 40px);
  overflow-y: auto;
}

.consent-panel-title { margin: 0 0 8px; font-size: var(--t-h3); }
.consent-panel-intro {
  margin: 0 0 20px;
  font-size: var(--t-ui);
  color: rgba(59, 44, 28, 0.75);
}

.consent-row {
  padding: 14px 0;
  border-top: 1px solid var(--hairline);
}
.consent-row-head {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
.consent-row-head input { width: 17px; height: 17px; accent-color: var(--primary); flex: none; }
.consent-row-head input:disabled { cursor: default; }
.consent-row-name { font-family: var(--display); font-weight: 600; font-size: var(--t-body); }
.consent-row-fixed {
  font-size: var(--t-micro);
  color: rgba(59, 44, 28, 0.55);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 2px 9px;
  margin-left: auto;
  white-space: nowrap;
}
.consent-row-desc {
  margin: 6px 0 0 27px;
  font-size: var(--t-ui);
  color: rgba(59, 44, 28, 0.72);
  line-height: 1.45;
}

/* Moved here off the bar, where it was making every phone visit two lines taller. */
.consent-appnote {
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--hairline);
  font-size: var(--t-micro);
  font-style: italic;
  color: rgba(59, 44, 28, 0.62);
}

.consent-panel-foot {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--hairline);
  flex-wrap: wrap;
}
.consent-panel-link { font-size: var(--t-ui); margin-right: auto; }

/* ---- launch-notify form --------------------------------------------------------- */
/* Lives inside #get, the final call to action, replacing the dead "Coming soon" pill.
   It was originally its own section before </main>, which on the EN landing put it at
   y=18349 of a 19245px page: present, correct, and findable by nobody (David could not
   see it at all). A signup belongs at the page's existing conversion point. */
.notify {
  max-width: 34rem;
  margin: 22px auto 0;
  text-align: left;
}
.notify-intro { margin: 0 0 16px; font-size: var(--t-ui); }

.notify-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-start; }
.notify-row input[type="email"] {
  flex: 1 1 260px;
  min-width: 0;
  font-family: var(--body);
  font-size: var(--t-body);
  color: var(--ink);
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 12px 20px;
}
.notify-row input[type="email"]:focus {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}
.notify-row button {
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--t-body);
  color: var(--cream);
  background: var(--primary);
  border: none;
  border-radius: 999px;
  padding: 13px 26px;
  cursor: pointer;
  box-shadow: var(--shadow-lift);
  white-space: nowrap;
}
.notify-row button:hover { background: var(--primary-deep); }
.notify-row button[disabled] { opacity: 0.55; cursor: default; }

.notify-consent {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  margin-top: 14px;
  font-size: var(--t-ui);
  line-height: 1.45;
}
.notify-consent input { width: 17px; height: 17px; accent-color: var(--primary); flex: none; margin-top: 3px; }

.notify-fine { margin-top: 12px; font-size: var(--t-micro); color: rgba(59, 44, 28, 0.6); }
.notify-msg { margin-top: 14px; font-size: var(--t-ui); font-weight: 600; }
.notify-msg.ok { color: var(--success); }
.notify-msg.err { color: var(--danger); }

/* The honeypot must be reachable by a naive bot's DOM walk and invisible to a person,
   including a screen reader user, so it is hidden AND aria-hidden AND not tabbable. */
.notify-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (max-width: 640px) {
  .consent-wrap { padding: 16px; gap: 14px; }
  .consent-acts { width: 100%; }
  /* Accept last in the DOM, but the two real choices stay side by side and equal. */
  .consent-acts .consent-btn { flex: 1 1 auto; text-align: center; }
  .consent-acts .consent-btn-quiet { flex: 1 1 100%; order: 3; }
  .consent-panel { padding: 22px; }
  /* The input already wrapped to its own line here, which left the button as a small
     left-aligned lozenge under a full-width field. Full width is both tidier and a
     bigger tap target. */
  .notify-row button { flex: 1 1 100%; }
}