/*
 * Road Death Tipp — sitewide invitation ("the door").
 *
 * HOST-SAFETY CONTRACT:
 *  - Every selector is prefixed .rdt-invitation / .rdt-inv-*.
 *  - No element selectors, no `*`, no resets, no @font-face overrides of host type.
 *  - All colour/size tokens are declared on .rdt-invitation itself, so host
 *    variables cannot leak in and these cannot leak out.
 *  - pointer-events are enabled only on the component.
 */

.rdt-invitation {
  --rdt-paper: #f3eee4;
  --rdt-raised: #e7e0d3;
  --rdt-ink: #16140f;
  --rdt-ink-muted: #5c564a;
  --rdt-rule: #c9c0b0;
  --rdt-copper: #8c4a22;
  --rdt-wick: #e8d7a8;
  --rdt-display: "Fraunces", "Source Serif 4", Georgia, serif;
  --rdt-ui: "IBM Plex Sans", system-ui, -apple-system, sans-serif;

  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2147482000; /* above page content, deliberately below a host assistant */
  pointer-events: none;
  font-family: var(--rdt-ui);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

@media (prefers-color-scheme: dark) {
  .rdt-invitation {
    --rdt-paper: #0c0b09;
    --rdt-raised: #171511;
    --rdt-ink: #e6dfd2;
    --rdt-ink-muted: #a39a8c;
    --rdt-rule: #2a261f;
    --rdt-copper: #c8763a;
    --rdt-wick: #f0e1b0;
  }
}

.rdt-invitation[data-rdt-theme="light"] {
  --rdt-paper: #f3eee4;
  --rdt-raised: #e7e0d3;
  --rdt-ink: #16140f;
  --rdt-ink-muted: #5c564a;
  --rdt-rule: #c9c0b0;
  --rdt-copper: #8c4a22;
  --rdt-wick: #e8d7a8;
}

.rdt-invitation[data-rdt-theme="dark"] {
  --rdt-paper: #0c0b09;
  --rdt-raised: #171511;
  --rdt-ink: #e6dfd2;
  --rdt-ink-muted: #a39a8c;
  --rdt-rule: #2a261f;
  --rdt-copper: #c8763a;
  --rdt-wick: #f0e1b0;
}

.rdt-inv-link,
.rdt-inv-link:visited {
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-sizing: border-box;
  width: 72px;
  padding: 16px 12px;
  text-decoration: none;
  color: var(--rdt-ink);
  background: var(--rdt-paper);
  border: 1px solid var(--rdt-rule);
  border-left: none;
  border-radius: 0 2px 2px 0;
  align-items: center;
  transition:
    width 480ms cubic-bezier(0.22, 1, 0.36, 1),
    padding 480ms cubic-bezier(0.22, 1, 0.36, 1),
    background 240ms ease;
  overflow: hidden;
}

.rdt-inv-link:hover,
.rdt-inv-link:focus-visible,
.rdt-invitation[data-rdt-open="true"] .rdt-inv-link {
  width: 252px;
  padding: 22px 20px;
  align-items: flex-start;
  background: var(--rdt-raised);
}

.rdt-inv-link:focus-visible {
  outline: 2px solid var(--rdt-copper);
  outline-offset: 2px;
}

.rdt-inv-glyph {
  display: block;
  width: 34px;
  height: 46px;
  flex: none;
  transition: width 480ms cubic-bezier(0.22, 1, 0.36, 1), height 480ms cubic-bezier(0.22, 1, 0.36, 1);
}

.rdt-inv-link:hover .rdt-inv-glyph,
.rdt-inv-link:focus-visible .rdt-inv-glyph,
.rdt-invitation[data-rdt-open="true"] .rdt-inv-glyph {
  width: 64px;
  height: 88px;
}

.rdt-inv-glyph-shape {
  fill: none;
  stroke: var(--rdt-copper);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.rdt-inv-glyph-wash {
  fill: var(--rdt-ink);
  opacity: 0.06;
  stroke: none;
}

.rdt-inv-wick {
  fill: var(--rdt-wick);
  stroke: var(--rdt-copper);
  stroke-width: 0.75;
}

.rdt-inv-rail-word {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rdt-ink-muted);
  margin: 0;
}

.rdt-inv-link:hover .rdt-inv-rail-word,
.rdt-inv-link:focus-visible .rdt-inv-rail-word,
.rdt-invitation[data-rdt-open="true"] .rdt-inv-rail-word {
  display: none;
}

.rdt-inv-body {
  display: none;
  min-width: 208px;
}

.rdt-inv-link:hover .rdt-inv-body,
.rdt-inv-link:focus-visible .rdt-inv-body,
.rdt-invitation[data-rdt-open="true"] .rdt-inv-body {
  display: block;
}

.rdt-inv-title {
  font-family: var(--rdt-display);
  font-size: 21px;
  font-weight: 500;
  margin: 0;
  color: var(--rdt-ink);
}

.rdt-inv-sub {
  font-size: 12.5px;
  margin: 4px 0 0;
  color: var(--rdt-ink-muted);
}

.rdt-inv-figure {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--rdt-rule);
}

.rdt-inv-numeral {
  font-family: var(--rdt-display);
  font-size: 40px;
  line-height: 1;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--rdt-ink);
  display: block;
}

.rdt-inv-caption {
  font-size: 12.5px;
  margin: 6px 0 0;
  color: var(--rdt-ink);
}

.rdt-inv-micro {
  font-size: 11.5px;
  margin: 4px 0 0;
  color: var(--rdt-ink-muted);
}

.rdt-inv-cta {
  display: inline-block;
  margin-top: 14px;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--rdt-copper);
  border-bottom: 1px solid var(--rdt-copper);
  padding-bottom: 2px;
}

.rdt-inv-quiet {
  font-size: 11.5px;
  margin: 12px 0 0;
  color: var(--rdt-ink-muted);
}

.rdt-inv-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Visible action affordance, present in the collapsed state too, so the
   door never reads as a passive header strip. */
.rdt-inv-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: none;
  box-sizing: border-box;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rdt-paper);
  background: var(--rdt-copper);
  border-radius: 999px;
  white-space: nowrap;
}

.rdt-inv-chip-arrow {
  font-size: 12px;
  line-height: 1;
}

@media (min-width: 721px) {
  .rdt-inv-bar-count {
    display: none;
  }

  .rdt-inv-chip {
    width: 30px;
    height: 30px;
    padding: 0;
  }

  .rdt-inv-chip-label {
    display: none;
  }

  .rdt-inv-link:hover .rdt-inv-chip,
  .rdt-inv-link:focus-visible .rdt-inv-chip,
  .rdt-invitation[data-rdt-open="true"] .rdt-inv-chip {
    display: none;
  }
}

/* 360px and other small screens: a compact floating door anchored to the
   LEFT edge, low on the screen. It never spans the width and never sits
   over the host header, its navigation or its theme control, and it stays
   clear of a host's bottom-right assistant. */
@media (max-width: 720px) {
  .rdt-invitation {
    left: 0;
    right: auto;
    top: auto;
    /* --rdt-lift is measured from the host's own visible bottom navigation by
       entry.js; with no bottom bar it stays 0px and nothing moves. */
    bottom: calc(18px + var(--rdt-lift, 0px) + env(safe-area-inset-bottom, 0px));
    transform: none;
    max-width: 100%;
  }

  .rdt-inv-link,
  .rdt-inv-link:hover,
  .rdt-inv-link:focus-visible,
  .rdt-invitation[data-rdt-open="true"] .rdt-inv-link {
    width: auto;
    max-width: calc(100vw - 14px);
    min-height: 48px;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 7px 14px 7px 10px;
    border-left: none;
    border-radius: 0 999px 999px 0;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.24);
  }

  .rdt-inv-rail-word {
    display: none;
  }

  .rdt-inv-glyph,
  .rdt-inv-link:hover .rdt-inv-glyph,
  .rdt-invitation[data-rdt-open="true"] .rdt-inv-glyph {
    width: 20px;
    height: 30px;
  }

  .rdt-inv-body,
  .rdt-inv-link:hover .rdt-inv-body,
  .rdt-invitation[data-rdt-open="true"] .rdt-inv-body {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
  }

  .rdt-inv-title {
    font-size: 14px;
    line-height: 1.2;
  }

  .rdt-inv-sub,
  .rdt-inv-figure,
  .rdt-inv-quiet,
  .rdt-inv-cta,
  .rdt-inv-current {
    display: none;
  }

  .rdt-inv-bar-count {
    font-size: 11.5px;
    color: var(--rdt-ink-muted);
    font-variant-numeric: tabular-nums;
  }

  .rdt-inv-chip {
    padding: 6px 11px;
  }
}


.rdt-inv-current {
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rdt-copper);
  margin: 10px 0 0;
}

@media (prefers-reduced-motion: reduce) {
  .rdt-inv-link,
  .rdt-inv-glyph {
    transition: none;
  }
}

/* ---------------------------------------------------------------
 * Bundled type for host pages. Same-origin only; no font service is
 * contacted. Names are scoped by the tokens above, so a host that has
 * its own Fraunces / IBM Plex Sans is unaffected either way.
 * --------------------------------------------------------------- */
@font-face {
  font-family: "Fraunces";
  src: url("./fonts/fraunces-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("./fonts/ibm-plex-sans-var-latin.woff2") format("woff2");
  font-weight: 100 700;
  font-display: swap;
}