/* The order flow: templates → details → preview → register → checkout → done.
   Built on style.css (tokens, buttons, chips, blobs) and the same rules as
   the landing: navy-edged paper stickers, hard shadows falling down-left,
   Marhey speaks, Baloo reads, yellow and orange only on what is tapped or
   chosen. Mobile first; one breakpoint at 54rem. */

:root {
  --error: #C4201B;
}

.flow-head,
.flow,
.done {
  position: relative;
  z-index: 1;
}

.flow-head {
  padding-top: 1.25rem;
}

.btn--back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.btn--back svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Room at the bottom so the floating dock never covers the last field */
.flow {
  padding-bottom: 8.5rem;
}

/* Where you are: "الخطوة ١", the step's name under it, and a line of dots
   for the whole order. Done dots are navy (and link back), the current one
   is a bigger yellow dot, the path ahead is dashed like the landing's
   steps. On phones it is one row; on desktop a sidebar with the names. */
.rail {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1rem;
}

.rail__now {
  display: grid;
  line-height: 1.35;
}

.rail__step {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.3rem;
}

.rail__name {
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--muted);
}

.rail__dots {
  display: flex;
  align-items: center;
}

.rail__dots li {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.75rem;
}

/* The line to the next dot: solid behind you, dashed ahead */
.rail__dots li:not(:last-child)::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  width: 100%;
  border-top: var(--edge) dashed var(--ink);
  translate: 0 -50%;
}

.rail__dots li.is-done::after {
  border-top-style: solid;
}

.rail__dots a,
.rail__spot {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: var(--ink);
  text-decoration: none;
}

.rail__dots i {
  display: block;
  width: 0.9rem;
  height: 0.9rem;
  border: var(--edge) solid var(--ink);
  border-radius: 50%;
  background: var(--paper);
}

.rail__dots .is-done i {
  background: var(--ink);
}

.rail__dots [aria-current] i {
  width: 1.45rem;
  height: 1.45rem;
  background: var(--sun);
  box-shadow: -2px 2px 0 var(--ink);
}

/* Names show beside the dots only on desktop */
.rail__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Step heading */
.step-head {
  padding-block: clamp(1.75rem, 5vw, 3rem) 1.5rem;
}

.step-head h1 {
  font-size: 2.5rem;
  line-height: 1.3;
}

.step-head .lede {
  margin-top: 0.35rem;
  font-size: 1.2rem;
}

/* Section stamps, the landing's chapter labels */
.flow .stamp {
  margin-bottom: 1rem;
}

/* ---------- Step 1: the designs ---------- */

.filters {
  display: grid;
  gap: 1rem;
  margin-bottom: 2rem;
}

/* The occasions run in one line that scrolls sideways, to the screen edge */
.chips--scroll {
  flex-wrap: nowrap;
  margin: 0 calc(-1 * clamp(1.25rem, 4vw, 3rem));
  padding: 0.25rem clamp(1.25rem, 4vw, 3rem) 0.85rem;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--ink) transparent;
  overscroll-behavior-x: contain;
}

.chips--scroll .chip {
  flex: none;
  min-height: 2.75rem;
  white-space: nowrap;
}

.chip__n {
  display: inline-grid;
  place-items: center;
  min-width: 1.5rem;
  height: 1.5rem;
  margin-inline-start: 0.4rem;
  padding-inline: 0.3rem;
  border-radius: 999px;
  background: var(--sun);
  color: var(--ink);
  font-size: 0.95rem;
  line-height: 1;
}

/* Mood: one paper pill, the chosen mood turns yellow (like the landing's
   before / day / after pill) */
.seg {
  display: flex;
  width: fit-content;
  max-width: 100%;
  padding: 0.25rem;
  border: var(--edge) solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  box-shadow: -4px 4px 0 var(--ink);
}

.seg button {
  min-height: 2.6rem;
  padding: 0.25rem 0.95rem;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--ink);
  font-family: var(--display);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.4;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s;
}

.seg button[aria-pressed="true"] {
  background: var(--sun);
}

.group + .group {
  margin-top: 2.75rem;
}

.group h2 {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
  font-size: 1.9rem;
}

.group__n {
  font-family: var(--text);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--muted);
}

.picks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem 1.1rem;
  padding-inline-end: 0.5rem;
}

/* A design card: the whole card is one toggle (the button is stretched
   over it), so a tap anywhere takes the design or puts it back */
.pick {
  position: relative;
  padding: 0.45rem 0.45rem 0;
  border: var(--edge) solid var(--ink);
  border-radius: 1.25rem;
  background: var(--paper);
  rotate: -1deg;
  box-shadow: -4px 4px 0 var(--ink);
  transition: translate 0.15s, box-shadow 0.15s, background-color 0.15s;
}

.picks li:nth-child(even) .pick {
  rotate: 1.2deg;
}

.thumb {
  display: block;
  container-type: inline-size;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border: 2px solid var(--ink);
  border-radius: 0.85rem;
}

.thumb .inv {
  width: 21em;
  min-height: 0;
  font-size: calc(100cqw / 21);
  pointer-events: none;
}

.pick__btn {
  display: block;
  width: 100%;
  padding: 0.5rem 0.4rem 0.55rem;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.pick__btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.pick__btn:focus-visible {
  outline: 0;
}

.pick:has(.pick__btn:focus-visible) {
  outline: 3px solid var(--ink);
  outline-offset: 5px;
}

.pick__name {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.4;
}

.pick__tags {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--muted);
}

/* The order number badge: navy circle, stuck on the corner when picked */
.pick__check {
  position: absolute;
  inset-block-start: -0.8rem;
  inset-inline-end: -0.8rem;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border: var(--edge) solid var(--ink);
  border-radius: 50%;
  background: var(--sun);
  font-family: var(--display);
  font-weight: 700;
  line-height: 1;
  rotate: 8deg;
  box-shadow: -3px 3px 0 var(--ink);
  opacity: 0;
  scale: 0.4;
  transition: opacity 0.15s, scale 0.3s var(--spring, ease-out);
  pointer-events: none;
}

.pick.is-on {
  background: var(--sun);
  translate: -4px 4px;
  box-shadow: 0 0 0 var(--ink);
}

.pick.is-on .pick__tags {
  color: var(--ink);
}

.pick__check svg {
  width: 1.25rem;
  fill: none;
  stroke: var(--ink);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pick.is-on .pick__check {
  opacity: 1;
  scale: 1;
}

@media (hover: hover) {
  .pick:not(.is-on):not(.pick--locked):hover {
    translate: 2px -2px;
    box-shadow: -6px 6px 0 var(--ink);
  }
}

.empty {
  max-width: 30rem;
  padding: 1.75rem 1.5rem;
  border: var(--edge) dashed var(--ink);
  border-radius: 1.5rem;
  background: var(--paper);
  text-align: center;
}

.empty p {
  margin-bottom: 1.25rem;
  font-size: 1.15rem;
  font-weight: 600;
}

/* The occasion, changeable from a dropdown without going back */
.occ {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  width: fit-content;
}

.occ__label {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.1rem;
}

.occ__pick {
  position: relative;
}

.occ__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  min-height: 2.9rem;
  padding: 0.25rem 1.1rem 0.25rem 0.95rem;
  border: var(--edge) solid var(--ink);
  border-radius: 999px;
  background: var(--sun);
  color: var(--ink);
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1.5;
  box-shadow: -4px 4px 0 var(--ink);
  cursor: pointer;
  transition: translate 0.12s, box-shadow 0.12s;
}

.occ__btn:active,
.occ__btn[aria-expanded="true"] {
  translate: -4px 4px;
  box-shadow: 0 0 0 var(--ink);
}

.occ__btn svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: var(--ink);
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: rotate 0.2s;
}

.occ__btn[aria-expanded="true"] svg {
  rotate: 180deg;
}

/* The open menu: a paper sticker under the button */
.occ__menu {
  position: absolute;
  inset-block-start: calc(100% + 0.9rem);
  inset-inline-start: -0.25rem;
  z-index: 8;
  width: max-content;
  min-width: 15rem;
  max-width: calc(100vw - 2.5rem);
  padding: 0.5rem;
  border: var(--edge) solid var(--ink);
  border-radius: 1.4rem;
  background: var(--paper);
  rotate: -1deg;
  box-shadow: -6px 6px 0 var(--ink);
  transform-origin: top right;
  animation: menu-in 0.18s var(--ease, ease-out);
}

.occ__menu[hidden] {
  display: none;
}

@keyframes menu-in {
  from {
    opacity: 0;
    scale: 0.94;
  }
}

.occ__ready {
  display: grid;
  gap: 0.3rem;
}

.occ__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  min-height: 2.9rem;
  padding: 0.2rem 1rem;
  border: var(--edge) solid transparent;
  border-radius: 999px;
  background: none;
  color: var(--ink);
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1.5;
  text-align: start;
  cursor: pointer;
}

.occ__item:hover,
.occ__item:focus-visible {
  background: var(--peach);
}

.occ__item:focus-visible {
  outline: 0;
  border-color: var(--ink);
}

.occ__item[aria-current="true"] {
  border-color: var(--ink);
  background: var(--sun);
}

.occ__item svg {
  width: 1.2rem;
  fill: none;
  stroke: var(--ink);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.occ__soon {
  margin: 0.75rem 0.75rem 0.4rem;
  padding-top: 0.6rem;
  border-top: var(--edge) dashed var(--ink);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--muted);
}

.occ__locked {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  max-width: 16rem;
  padding: 0 0.6rem 0.5rem;
}

.occ__locked li {
  padding: 0 0.7rem;
  border: 2px dashed var(--muted);
  border-radius: 999px;
  color: var(--muted);
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.9rem;
  line-height: 1.8;
  cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
  .occ__menu {
    animation: none;
  }
}

.group__n--top {
  margin-bottom: 1.25rem;
}

/* Designs still being drawn: flat (no shadow, so nothing says "press me"),
   a dark screen with a "؟" */
.pick--locked {
  box-shadow: none;
}

.pick--locked .pick__btn {
  cursor: default;
}

.thumb--locked {
  display: grid;
  place-items: center;
  background: var(--ink);
}

.thumb--locked b,
.occ-card--locked .occ-card__art b {
  font-family: var(--display);
  font-weight: 700;
  font-size: 4rem;
  line-height: 1;
  color: var(--background);
}

/* ---------- Step 1: the occasions ---------- */

.occs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem 1.1rem;
  padding-inline-end: 0.5rem;
}

.occ-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0.45rem 0.45rem 0.7rem;
  border: var(--edge) solid var(--ink);
  border-radius: 1.25rem;
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
  rotate: -1deg;
  box-shadow: -4px 4px 0 var(--ink);
  transition: translate 0.15s, box-shadow 0.15s, background-color 0.15s;
}

.occs li:nth-child(even) .occ-card {
  rotate: 1.2deg;
}

.occ-card__art {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  margin-bottom: 0.5rem;
  border: 2px solid var(--ink);
  border-radius: 0.85rem;
  background: var(--ink);
  color: var(--sun);
}

.occ-card__art svg {
  width: 3.6rem;
  height: 3.6rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.occ-card--birthday .occ-card__art {
  background: var(--coral);
  color: var(--ink);
}

.occ-card__name {
  padding-inline: 0.4rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.35rem;
  line-height: 1.4;
}

.occ-card__n {
  padding-inline: 0.4rem;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--muted);
}

a.occ-card:active,
.occ-card.is-on {
  translate: -4px 4px;
  box-shadow: 0 0 0 var(--ink);
}

.occ-card.is-on {
  background: var(--sun);
}

.occ-card.is-on .occ-card__n {
  color: var(--ink);
}

.occ-card.is-on .pick__check {
  opacity: 1;
  scale: 1;
}

.occ-card--locked {
  box-shadow: none;
}

@media (hover: hover) {
  a.occ-card:not(.is-on):not(:active):hover {
    translate: 2px -2px;
    box-shadow: -6px 6px 0 var(--ink);
  }
}

/* ---------- The dock: each step's one action, floating at the bottom ---------- */

.dock {
  position: fixed;
  z-index: 6;
  inset-inline: 0.75rem;
  inset-block-end: max(0.75rem, env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  max-width: 40rem;
  margin-inline: auto;
  padding: 0.55rem 1rem 0.55rem 0.7rem;
  border: var(--edge) solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  box-shadow: -5px 5px 0 var(--ink);
  transition: translate 0.3s var(--ease, ease-out), opacity 0.2s;
}

.dock[hidden] {
  display: flex;
  opacity: 0;
  translate: 0 160%;
  pointer-events: none;
}

.dock__note {
  min-width: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1.35;
}

.dock__note small {
  display: block;
  font-family: var(--text);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--muted);
}

.dock .btn {
  flex: none;
  padding: 0.4rem 1.4rem;
  font-size: 1.25rem;
}

/* The little fan of picked designs inside the dock */
.dock__fan {
  display: flex;
  flex: none;
}

.dock__fan i {
  width: 1.5rem;
  height: 2rem;
  border: 2px solid var(--ink);
  border-radius: 0.35rem;
  rotate: calc(var(--i) * 9deg - 9deg);
}

.dock__fan i + i {
  margin-inline-start: -0.7rem;
}

.dock__fan .sw-t1 { background: var(--ink); }
.dock__fan .sw-t2 { background: var(--sun); }
.dock__fan .sw-t3 { background: var(--coral); }

.dock__start {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

/* ---------- Step 2: the details form ---------- */

.form {
  display: grid;
  gap: 2.25rem;
  max-width: 34rem;
}

.form fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.form legend {
  float: inline-start;
  width: auto;
  padding: 0;
}

.form legend + * {
  clear: both;
}

.fields {
  display: grid;
  gap: 1.25rem;
}

.field {
  display: grid;
  gap: 0.4rem;
}

.field__label {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1.5;
}

.need,
.maybe {
  font-family: var(--text);
  font-weight: 600;
  font-size: 0.85rem;
  line-height: 1.6;
}

.need {
  padding: 0 0.6rem;
  border-radius: 999px;
  background: var(--ink);
  color: var(--background);
}

.maybe {
  color: var(--muted);
}

.field__hint {
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--muted);
}

.input {
  width: 100%;
  min-height: 3.1rem;
  padding: 0.45rem 1rem;
  border: var(--edge) solid var(--ink);
  border-radius: 1rem;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-weight: 600;
  font-size: 1.15rem;
  line-height: 1.5;
  box-shadow: -4px 4px 0 var(--ink);
  caret-color: var(--coral);
  transition: translate 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.input::placeholder {
  color: var(--muted);
  font-weight: 400;
  opacity: 1;
}

/* Focus: no ring and no new colour. The field lifts off its shadow a little (the same move as a button under the pointer) and keeps its navy edge. A mistake turns the border and shadow red. */
.input:focus,
.input:focus-visible {
  outline: 0;
  translate: 2px -2px;
  box-shadow: -6px 6px 0 var(--ink);
}

.input[aria-invalid="true"] {
  border-color: var(--error);
  box-shadow: -4px 4px 0 var(--error);
}

.input[aria-invalid="true"]:focus {
  box-shadow: -6px 6px 0 var(--error);
}

.field__error {
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--error);
}

.field[hidden],
.names__and[hidden],
.field__error[hidden] {
  display: none;
}

textarea.input {
  min-height: 6.5rem;
  resize: none;
}

.input[dir="ltr"] {
  text-align: left;
}

.input[dir="ltr"]::placeholder {
  text-align: left;
}

/* The two names with the orange "و" between them, as on the invite */
.names {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: end;
  gap: 0.6rem;
  transition: margin-bottom 0.15s;
}

/* The "write the name" line hangs under its field, so the two fields and
   the "و" stay level; the row makes room for it */
.names .field {
  position: relative;
}

.names .field__error {
  position: absolute;
  inset-block-start: calc(100% + 0.45rem);
  inset-inline-start: 0.25rem;
}

.names:has([aria-invalid="true"]) {
  margin-bottom: 1.5rem;
}

.names__and {
  padding-bottom: 0.2rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: 2.2rem;
  line-height: 1;
  color: var(--coral);
  text-shadow: -0.045em 0.045em 0 var(--ink);
}

.pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

/* Switches: a pill with a knob that slides over and turns yellow */
.switch {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-height: 2.75rem;
  font-weight: 600;
  font-size: 1.1rem;
  line-height: 1.45;
  cursor: pointer;
}

.switch input {
  position: relative;
  flex: none;
  width: 3.6rem;
  height: 2.1rem;
  margin: 0;
  border: var(--edge) solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  box-shadow: -3px 3px 0 var(--ink);
  appearance: none;
  cursor: pointer;
  transition: background-color 0.2s;
}

.switch input::before {
  content: "";
  position: absolute;
  inset-block-start: 0.2rem;
  inset-inline-start: 0.2rem;
  width: 1.15rem;
  height: 1.15rem;
  border: var(--edge) solid var(--ink);
  border-radius: 50%;
  background: var(--paper);
  transition: translate 0.2s var(--spring, ease-out);
}

.switch input:checked {
  background: var(--sun);
}

.switch input:checked::before {
  background: var(--ink);
  translate: -1.5rem 0;
}

/* Desktop: a live preview of the first picked design beside the form */
.live {
  display: none;
}

/* ---------- The invite preview box ---------- */

.screen {
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: var(--edge) solid var(--ink);
  border-radius: 1.75rem;
  background: var(--paper);
}

/* The scrollbar stays inside the rounded card: a slim navy pill that stops
   short of the corners (the page's own scrollbar colours are switched off
   here, or the browser ignores the pill). Phones scroll by finger and show
   no bar; so do browsers that cannot draw the pill, and the cards waiting
   behind the top one. */
.screen {
  scrollbar-width: auto;
  scrollbar-color: auto;
}

.screen::-webkit-scrollbar {
  width: 0.7rem;
}

.screen::-webkit-scrollbar-track {
  margin-block: 1.5rem;
  background: transparent;
}

.screen::-webkit-scrollbar-thumb {
  border: 0.2rem solid transparent;
  border-radius: 999px;
  background: var(--bar, var(--ink));
  background-clip: padding-box;
}

/* The strip the bar runs in takes the invite's own colour */
.screen:has(.inv--t1) {
  --bar: var(--background);
  background: var(--ink);
}

.screen:has(.inv--t2) {
  background: var(--sun);
}

.screen::-webkit-scrollbar-button {
  display: none;
}

@supports not selector(::-webkit-scrollbar) {
  .screen {
    scrollbar-width: none;
  }
}

.deck__card[inert] .screen {
  scrollbar-width: none;
}

.deck__card[inert] .screen::-webkit-scrollbar {
  display: none;
}

@media (pointer: coarse) {
  .screen {
    scrollbar-width: none;
  }

  .screen::-webkit-scrollbar {
    display: none;
  }
}

.screen .inv {
  min-height: 100%;
}

/* ---------- Step 3: the swipe deck ---------- */

.deck-wrap {
  display: grid;
  justify-items: center;
}

.deck-wrap {
  position: relative;
  padding-top: 1.4rem;
}

.deck {
  position: relative;
  width: min(100%, 25rem);
  height: calc(100svh - 16.5rem);
  min-height: 24rem;
  max-height: 46rem;
  margin-inline: auto;
  touch-action: pan-y;
}

.deck__card {
  position: absolute;
  inset: 0;
  border-radius: 1.75rem;
  background: var(--paper);
  box-shadow: -6px 6px 0 var(--ink);
  transition: translate 0.3s var(--ease, ease-out), rotate 0.3s var(--ease, ease-out), scale 0.3s var(--ease, ease-out), opacity 0.25s;
  user-select: none;
  -webkit-user-select: none;
}

.deck__card[data-k="0"] { z-index: 3; }
.deck__card[data-k="1"] { z-index: 2; translate: -0.9rem 0.6rem; rotate: -3.5deg; scale: 0.96; }
.deck__card[data-k="2"] { z-index: 1; translate: 0.7rem 0.9rem; rotate: 3deg; scale: 0.93; }
.deck__card[data-k="3"] { z-index: 0; opacity: 0; scale: 0.9; }

.deck__card.is-flying {
  transition: transform 0.28s cubic-bezier(0.4, 0, 1, 1), opacity 0.28s;
}

.deck__card.is-back {
  opacity: 0;
  transition: none;
}

/* The design's name, a stamp stuck on the frame */
.deck__tag {
  position: absolute;
  inset-block-start: -0.95rem;
  inset-inline-start: 1.25rem;
  z-index: 2;
  padding: 0.1rem 0.95rem;
  border-radius: 0.6rem;
  background: var(--ink);
  color: var(--sun);
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1.6;
  rotate: -3deg;
}

.deck__card:not([data-k="0"]) .deck__tag {
  opacity: 0;
}

.deck-dock .dock__start {
  gap: 0.35rem;
}

.arrow {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: var(--edge) solid var(--ink);
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  box-shadow: -3px 3px 0 var(--ink);
  cursor: pointer;
  transition: translate 0.12s, box-shadow 0.12s;
}

.arrow:active {
  translate: -3px 3px;
  box-shadow: 0 0 0 var(--ink);
}

.arrow svg {
  width: 1.15rem;
  height: 1.15rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.count {
  min-width: 3.4rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
  text-align: center;
  white-space: nowrap;
}

.edit-link {
  display: inline-block;
  margin-top: 1.5rem;
  font-weight: 600;
  text-decoration-color: var(--coral);
  text-decoration-thickness: 3px;
  text-underline-offset: 0.35em;
}

/* ---------- Step 4: the account ---------- */

.auth[hidden] {
  display: none;
}

.auth {
  display: grid;
  gap: 1.5rem;
  max-width: 28rem;
}

.btn--google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
  background: var(--paper);
  font-size: 1.3rem;
  cursor: pointer;
}

.btn--google svg {
  width: 1.6rem;
  height: 1.6rem;
}

.or {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
}

.or::before,
.or::after {
  content: "";
  flex: 1;
  border-top: var(--edge) dashed var(--ink);
}

/* After "continue with Google": a paper sticker that says you're in */
.signed {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 1.1rem;
  border: var(--edge) solid var(--ink);
  border-radius: 1.25rem;
  background: var(--paper);
  rotate: -1deg;
  box-shadow: -4px 4px 0 var(--ink);
}

.signed[hidden] {
  display: none;
}

.signed__mark {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border: var(--edge) solid var(--ink);
  border-radius: 50%;
  background: var(--sun);
}

.signed__mark svg {
  width: 1.3rem;
  fill: none;
  stroke: var(--ink);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.signed p {
  flex: 1;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.4;
}

.signed small {
  display: block;
  font-family: var(--text);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--muted);
}

.text-btn {
  min-height: 2.75rem;
  padding: 0 0.25rem;
  border: 0;
  background: none;
  color: var(--ink);
  font-family: var(--text);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: underline;
  text-decoration-color: var(--coral);
  text-decoration-thickness: 3px;
  text-underline-offset: 0.35em;
  cursor: pointer;
}

/* The phone number with its +20 sticker */
.phone {
  display: grid;
  /* the code button comes first (order: -1), so the first column is its own size */
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.6rem;
  direction: ltr;
}

.cc {
  position: relative;
  display: grid;
  order: -1;
}

.phone__cc {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--ink);
  cursor: pointer;
  transition: translate 0.12s, box-shadow 0.12s;
  padding-inline: 0.9rem;
  border: var(--edge) solid var(--ink);
  border-radius: 1rem;
  background: var(--peach);
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.1rem;
  box-shadow: -4px 4px 0 var(--ink);
}

.phone__cc:active,
.phone__cc[aria-expanded="true"] {
  translate: -4px 4px;
  box-shadow: 0 0 0 var(--ink);
}

.phone__cc svg {
  width: 0.95rem;
  height: 0.95rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: rotate 0.2s;
}

.phone__cc[aria-expanded="true"] svg {
  rotate: 180deg;
}

/* The codes: the occasion menu again, opening over the field so it never
   runs off the screen. A search box stays on top; the list scrolls under it. */
.cc__menu {
  inset-block-start: auto;
  inset-block-end: calc(100% + 0.9rem);
  inset-inline-start: auto;
  left: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  width: 17.5rem;
  min-width: 0;
  max-height: min(21rem, 60vh);
  rotate: none;
  transform-origin: bottom left;
}

.cc__menu[hidden] {
  display: none;
}

.cc__find {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: none;
  padding: 0 0.85rem;
  border: var(--edge) solid var(--ink);
  border-radius: 999px;
  background: var(--background);
}

.cc__find svg {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.6;
  stroke-linecap: round;
}

.cc__find input {
  flex: 1;
  min-width: 0;
  min-height: 2.6rem;
  padding: 0;
  border: 0;
  outline: 0;
  background: none;
  color: var(--ink);
  font-family: var(--text);
  font-weight: 600;
  font-size: 1.05rem;
  caret-color: var(--coral);
}

.cc__find input::placeholder {
  color: var(--muted);
  font-weight: 400;
  opacity: 1;
}

.cc__find input::-webkit-search-cancel-button {
  display: none;
}

.cc__find:focus-within {
  background: var(--paper);
  box-shadow: -3px 3px 0 var(--ink);
}

.cc__list {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.1rem;
}

.cc__none {
  padding: 0.75rem 0.5rem 1rem;
  font-weight: 600;
  text-align: center;
  color: var(--muted);
}

.cc__none[hidden] {
  display: none;
}

.cc__flag {
  flex: none;
  font-size: 1.25em;
  line-height: 1;
}

.cc__menu .occ__item {
  justify-content: flex-start;
  gap: 0.65rem;
  min-height: 2.6rem;
  font-size: 1.05rem;
}

.cc__menu .occ__item svg {
  flex: none;
}

.cc__code {
  margin-inline-start: auto;
  font-family: var(--text);
  font-weight: 600;
  color: var(--muted);
}

.cc__menu [aria-current="true"] .cc__code {
  color: var(--ink);
}

/* ---------- Step 5: checkout ---------- */

.check {
  display: grid;
  gap: 2.5rem;
}

.check__invite {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: 1.1rem;
  align-items: start;
}

.check__invite .thumb {
  rotate: -2deg;
  box-shadow: -4px 4px 0 var(--ink);
  border-width: var(--edge);
}

.check__name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.35;
}

.check__facts {
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.6;
}

.check__facts li::before {
  content: "";
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  margin-inline-end: 0.5rem;
  border-radius: 50%;
  background: var(--coral);
  vertical-align: middle;
}

.check__edits {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.25rem;
}

.check__edits .edit-link {
  margin-top: 0.5rem;
  font-size: 1rem;
}

/* "See it whole": a native disclosure that opens the full preview box */
.whole {
  margin-top: 1.25rem;
}

.whole summary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.25rem 1.1rem;
  border: var(--edge) solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
  list-style: none;
  cursor: pointer;
  box-shadow: -3px 3px 0 var(--ink);
}

.whole summary::-webkit-details-marker {
  display: none;
}

.whole summary svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: var(--ink);
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: rotate 0.2s;
}

.whole[open] summary svg {
  rotate: 180deg;
}

.whole .screen {
  height: 32rem;
  max-width: 24rem;
  margin-top: 1.25rem;
  box-shadow: -6px 6px 0 var(--ink);
}

/* Who ordered: a short list with an edit link */
.who {
  display: grid;
  gap: 0.2rem;
  font-weight: 600;
  font-size: 1.1rem;
}

.who span {
  color: var(--muted);
  font-size: 0.95rem;
}

/* Payment methods: sticker options, the chosen one yellow and pressed in,
   with its own few fields opening under it */
.pays {
  display: grid;
  gap: 1rem;
  padding-inline-end: 0.5rem;
}

.pay {
  border: var(--edge) solid var(--ink);
  border-radius: 1.25rem;
  background: var(--paper);
  box-shadow: -4px 4px 0 var(--ink);
  transition: translate 0.15s, box-shadow 0.15s, background-color 0.15s;
}

.pay:has(input:checked) {
  background: var(--sun);
  translate: -4px 4px;
  box-shadow: 0 0 0 var(--ink);
}

.pay:has(input:focus-visible) {
  outline: 3px solid var(--ink);
  outline-offset: 5px;
}

.pay > label {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-height: 3.75rem;
  padding: 0.6rem 1rem;
  cursor: pointer;
}

.pay input[type="radio"] {
  position: relative;
  flex: none;
  width: 1.6rem;
  height: 1.6rem;
  margin: 0;
  border: var(--edge) solid var(--ink);
  border-radius: 50%;
  background: var(--paper);
  appearance: none;
  cursor: pointer;
}

.pay input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  inset: 0.2rem;
  border-radius: 50%;
  background: var(--ink);
}

.pay input[type="radio"]:focus-visible {
  outline: 0;
}

.pay__name {
  flex: 1;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.4;
}

.pay__name small {
  display: block;
  font-family: var(--text);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--muted);
}

.pay:has(input:checked) .pay__name small {
  color: var(--ink);
}

.pay__icon {
  flex: none;
  width: 2rem;
  height: 2rem;
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.6;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.pay__more {
  display: none;
  gap: 1rem;
  padding: 0.25rem 1rem 1.25rem;
}

.pay:has(input:checked) .pay__more {
  display: grid;
}

.pay__more p {
  font-weight: 600;
  font-size: 1.02rem;
  line-height: 1.6;
}

.code {
  display: inline-block;
  padding: 0.1rem 0.8rem;
  border: 2px solid var(--ink);
  border-radius: 0.6rem;
  background: var(--paper);
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.pay .input {
  box-shadow: -3px 3px 0 var(--ink);
}

.total {
  display: grid;
  gap: 0.6rem;
  max-width: 28rem;
  padding: 1.25rem 1.4rem;
  border: var(--edge) dashed var(--ink);
  border-radius: 1.25rem;
}

.total div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-weight: 600;
}

.total .total__sum {
  padding-top: 0.6rem;
  border-top: var(--edge) solid var(--ink);
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.35rem;
}

.total__note {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--muted);
}

/* ---------- Done ---------- */

.done {
  padding-block: 1.5rem 4rem;
}

.done__card {
  --focus: var(--sun);
  position: relative;
  max-width: 34rem;
  margin: clamp(2rem, 6vw, 4rem) auto 0;
  padding: clamp(2.5rem, 7vw, 3.5rem) clamp(1.25rem, 5vw, 2.5rem);
  border: var(--edge) solid var(--ink);
  border-radius: 2.5rem;
  background: var(--ink);
  color: var(--background);
  text-align: center;
  rotate: -1deg;
  box-shadow: -10px 10px 0 var(--coral);
}

.done__card h1 {
  font-size: clamp(2.8rem, 12vw, 4rem);
  line-height: 1.2;
  color: var(--sun);
}

.done__card > p {
  margin-block: 0.5rem 1.75rem;
  font-size: 1.2rem;
  font-weight: 600;
}

.done__thumb {
  width: 8.5rem;
  margin: 0 auto 1.5rem;
  rotate: 4deg;
  border: var(--edge) solid var(--background);
  box-shadow: -5px 5px 0 var(--sun);
}

.link-box {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  max-width: 22rem;
  margin: 0 auto 1.5rem;
  padding: 0.35rem 0.35rem 0.35rem 1rem;
  border: var(--edge) solid var(--background);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  direction: ltr;
}

.link-box code {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.1rem;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.link-box button {
  flex: none;
  min-height: 2.75rem;
  padding: 0 1.1rem;
  border: var(--edge) solid var(--ink);
  border-radius: 999px;
  background: var(--sun);
  color: var(--ink);
  font-family: var(--display);
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  direction: rtl;
}

.done__actions {
  display: grid;
  justify-items: center;
  gap: 1rem;
}

.done__card .burst {
  inset-block-start: 7rem;
}

.done__again {
  display: block;
  width: fit-content;
  margin: 2.5rem auto 0;
  font-weight: 600;
  text-decoration-color: var(--coral);
  text-decoration-thickness: 3px;
  text-underline-offset: 0.35em;
}

/* ================= The invitations (mockup designs) =================
   Sized in em so the same invite renders full size in a preview box and as
   a miniature in a card (where its font-size follows the card's width). */

.inv {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1em;
  padding: 1.5em 1.25em 1.25em;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: 1rem;
  line-height: 1.6;
  text-align: center;
}

.inv svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linejoin: round;
  stroke-linecap: round;
}

/* Where the host's photo will go (most often the couple): a dashed slot,
   so it reads as a mockup */
.inv__art {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0.3em;
  width: 100%;
  min-height: 9.5em;
  padding: 0.8em;
  border: 0.16em dashed currentColor;
  border-radius: 1.25em;
}

.inv__art svg {
  width: 4em;
  height: 3.4em;
}

.inv__slot {
  font-size: 0.8em;
  font-weight: 600;
}

.inv__title {
  margin-top: 0.4em;
  font-weight: 600;
  font-size: 1.1em;
}

.inv .inv__names {
  margin-top: -0.4em;
  font-family: var(--display);
  font-weight: 700;
  font-size: 2.6em;
  line-height: 1.25;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

.inv__and {
  color: var(--coral);
}

.inv__facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5em;
  font-weight: 600;
}

.inv__facts li {
  padding: 0.1em 0.9em;
  border: 0.13em solid var(--ink);
  border-radius: 999px;
  background: var(--peach);
  color: var(--ink);
}

.inv__place {
  display: grid;
  justify-items: center;
  gap: 0.15em;
  width: 100%;
  padding: 1.1em 1em 1.25em;
  border: 0.19em solid currentColor;
  border-radius: 1.25em;
}

.inv__place svg {
  width: 2em;
  height: 2em;
}

.inv__venue {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.35em;
  line-height: 1.4;
}

.inv__addr {
  font-size: 0.98em;
}

.inv__btn,
.inv__upload {
  display: inline-block;
  margin-top: 0.65em;
  padding: 0.3em 1.3em;
  border: 0.19em solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--display);
  font-weight: 700;
  font-size: 1em;
  line-height: 1.6;
  text-decoration: none;
  box-shadow: -0.22em 0.22em 0 var(--ink);
}

.inv__msg {
  max-width: 18em;
  font-weight: 600;
  font-size: 1.05em;
}

/* The answer: a small form (name, phone if they like, a word for the
   hosts) and two buttons. Sized in em like the rest of the invite. */
.inv__rsvp {
  display: grid;
  gap: 0.7em;
  width: 100%;
  padding: 1.1em 1em 1.2em;
  border: 0.16em solid currentColor;
  border-radius: 1.25em;
  text-align: start;
}

.inv__ask {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.25em;
  text-align: center;
}

.inv__field {
  display: grid;
  gap: 0.25em;
  font-weight: 600;
  font-size: 0.95em;
}

.inv__field small {
  font-weight: 400;
  font-size: 0.85em;
  opacity: 0.8;
}

.inv__field input,
.inv__field textarea {
  width: 100%;
  min-height: 2.6em;
  padding: 0.35em 0.8em;
  border: 0.16em solid var(--ink);
  border-radius: 0.85em;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 1.05em;
  resize: none;
  caret-color: var(--coral);
}

.inv__field input:focus,
.inv__field textarea:focus {
  outline: 0;
  box-shadow: -0.2em 0.2em 0 var(--coral);
}

.inv__field input[aria-invalid="true"] {
  border-color: var(--error);
  box-shadow: -0.2em 0.2em 0 var(--error);
}

.inv__field input[dir="ltr"] {
  text-align: left;
}

.inv__answers {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.9em 1em;
  margin-top: 0.35em;
}

.inv__no {
  padding: 0.3em 0.4em;
  border: 0;
  background: none;
  color: inherit;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1em;
  text-decoration: underline;
  text-decoration-color: var(--coral);
  text-decoration-thickness: 0.16em;
  text-underline-offset: 0.3em;
  cursor: pointer;
}

.inv__rsvp.is-answered > :not(.inv__said) {
  display: none;
}

.inv__rsvp.is-answered .inv__said {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.15em;
}

.inv__sent:empty,
.inv__mine:empty {
  display: none;
}

.inv__sent {
  font-weight: 600;
}

.inv__mine {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.4em;
  width: 100%;
  margin-top: 0.4em;
}

.inv__mine img,
.inv__mine span {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  width: 100%;
  border: 0.13em solid var(--ink);
  border-radius: 0.6em;
  background: var(--paper);
  color: var(--ink);
  object-fit: cover;
  font-size: 0.75em;
  font-weight: 600;
}

label.inv__upload {
  cursor: pointer;
}

.inv__yes {
  padding: 0.4em 1.6em;
  border: 0.19em solid var(--ink);
  border-radius: 999px;
  background: var(--sun);
  color: var(--ink);
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.2em;
  line-height: 1.5;
  box-shadow: -0.3em 0.3em 0 var(--ink);
  cursor: pointer;
  transition: translate 0.12s, box-shadow 0.12s;
}

.inv__yes:active,
.inv__yes[aria-pressed="true"] {
  translate: -0.3em 0.3em;
  box-shadow: 0 0 0 var(--ink);
}

.inv__yes[aria-pressed="true"] {
  background: var(--ink);
  color: var(--background);
}

.inv__said {
  font-size: 0.95em;
  font-weight: 600;
  text-align: center;
}

.inv__said:empty {
  display: none;
}

.inv__after {
  display: grid;
  justify-items: center;
  gap: 0.25em;
  width: 100%;
  padding: 1.1em 1em 1.3em;
  border: 0.16em dashed currentColor;
  border-radius: 1.25em;
}

.inv__after svg {
  width: 2.2em;
  height: 2.2em;
}

.inv__when {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.2em;
}

.inv__after p:not(.inv__when) {
  max-width: 17em;
  font-size: 0.98em;
}

.inv__call {
  font-weight: 600;
}

.inv__call a {
  text-decoration-color: var(--coral);
  text-decoration-thickness: 0.15em;
}

.inv__foot {
  margin-top: 0.25em;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.6em;
  line-height: 1;
}

/* دعوة ١ (wedding, calm): the wedding night, navy and sand, yellow names */
.inv--t1 {
  background: var(--ink);
  color: var(--background);
}

.inv--t1 .inv__names {
  color: var(--sun);
}

.inv--t1 .inv__yes {
  box-shadow: -0.3em 0.3em 0 var(--coral);
}

.inv--t1 .inv__yes[aria-pressed="true"] {
  border-color: var(--background);
  background: var(--background);
  color: var(--ink);
}

.inv--t1 .inv__btn,
.inv--t1 .inv__upload {
  background: var(--sun);
  box-shadow: -0.22em 0.22em 0 var(--coral);
}

.inv--t1 .inv__call a {
  color: var(--sun);
}

/* دعوة ٢ (wedding, loud): a yellow sheet, names stacked big on the start
   side, tilted stickers */
.inv--t2 {
  align-items: stretch;
  background: var(--sun);
  text-align: start;
}

.inv--t2 .inv__art {
  min-height: 7.5em;
  rotate: -2deg;
}

.inv--t2 .inv__names {
  font-size: 3.2em;
  line-height: 1.15;
}

/* The "و" gets its own short line with room above and below, so the
   tall letters of the second name (ك ل أ ط) never touch it */
.inv--t2 .inv__and {
  display: block;
  width: fit-content;
  margin-block: 0.1em 0.62em;
  color: var(--coral);
  line-height: 0.8;
  text-shadow: -0.045em 0.045em 0 var(--ink);
  rotate: -6deg;
}

.inv--t2 .inv__facts {
  justify-content: flex-start;
}

.inv--t2 .inv__facts li {
  background: var(--paper);
  rotate: -2deg;
  box-shadow: -0.2em 0.2em 0 var(--ink);
}

.inv--t2 .inv__facts li + li {
  background: var(--coral);
  rotate: 2deg;
}

.inv--t2 .inv__place {
  justify-items: start;
  border-color: var(--ink);
  background: var(--paper);
  rotate: 1deg;
  box-shadow: -0.3em 0.3em 0 var(--ink);
}

.inv--t2 .inv__rsvp {
  justify-items: stretch;
}

.inv--t2 .inv__yes {
  background: var(--coral);
}

.inv--t2 .inv__after {
  justify-items: start;
  border-style: solid;
  background: var(--coral);
  rotate: -1deg;
}

.inv--t2 .inv__foot {
  align-self: center;
}

/* دعوة ٣ (birthday, loud): paper, an orange top with confetti dots, the
   name on a yellow sticker */
.inv--t3 .inv__art {
  position: relative;
  min-height: 10em;
  border-style: solid;
  border-color: var(--ink);
  background: var(--coral);
  rotate: 1.5deg;
}

.inv--t3 .inv__art::before,
.inv--t3 .inv__art::after {
  content: "";
  position: absolute;
  width: 0.9em;
  height: 0.9em;
  border-radius: 50%;
  background: var(--sun);
  box-shadow: -13em 1.5em 0 var(--paper), -3em 6.6em 0 var(--ink), -14.5em 6em 0 var(--sun);
  inset-block-start: 1.2em;
  inset-inline-start: 1.6em;
}

.inv--t3 .inv__art::after {
  width: 0.6em;
  height: 1.1em;
  border-radius: 0.2em;
  background: var(--ink);
  box-shadow: 11em 2em 0 var(--paper), 2.5em 5.6em 0 var(--sun);
  inset-inline-start: auto;
  inset-inline-end: 2.4em;
  inset-block-start: 1.6em;
}

.inv--t3 .inv__names {
  margin-top: 0;
  padding: 0.05em 0.55em;
  border: 0.07em solid var(--ink);
  border-radius: 999px;
  background: var(--sun);
  rotate: -3deg;
  box-shadow: -0.1em 0.1em 0 var(--ink);
}

.inv--t3 .inv__place {
  border-color: var(--ink);
  box-shadow: -0.3em 0.3em 0 var(--sun);
}

.inv--t3 .inv__after {
  border-color: var(--ink);
}


/* ---------- The host's photos inside the invite ---------- */

.inv__photos {
  display: grid;
  gap: 0.45em;
  width: 100%;
}

.inv--t2 .inv__photos {
  rotate: -1.5deg;
}

.inv__main {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 0.19em solid currentColor;
  border-radius: 1.1em;
}

.inv--t2 .inv__main,
.inv--t3 .inv__main {
  border-color: var(--ink);
  box-shadow: -0.3em 0.3em 0 var(--ink);
}

.inv__strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.35em;
}

.inv__thumb {
  aspect-ratio: 1;
  padding: 0;
  overflow: hidden;
  border: 0.13em solid currentColor;
  border-radius: 0.6em;
  background: none;
  cursor: pointer;
}

.inv--t2 .inv__thumb,
.inv--t3 .inv__thumb {
  border-color: var(--ink);
}

.inv__thumb[aria-pressed="true"] {
  border-width: 0.22em;
  border-color: var(--coral);
}

.inv__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.inv__add {
  display: inline-flex;
  align-items: center;
  justify-self: center;
  gap: 0.4em;
  margin-top: 0.4em;
  padding: 0.2em 1em;
  border: 0.16em solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.95em;
  line-height: 1.7;
  box-shadow: -0.2em 0.2em 0 var(--ink);
  cursor: pointer;
}

.inv--t1 .inv__add {
  background: var(--sun);
  box-shadow: -0.2em 0.2em 0 var(--coral);
}

.inv__add:has(input:focus-visible) {
  outline: 3px solid currentColor;
  outline-offset: 4px;
}

.inv__add svg {
  width: 1.1em;
  height: 1.1em;
  stroke-width: 3.2;
}

/* ---------- The photos in the details form ---------- */

.photos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem 0.85rem;
  padding-inline-end: 0.5rem;
}

.ph {
  position: relative;
  aspect-ratio: 1;
  border: var(--edge) solid var(--ink);
  border-radius: 1rem;
  background: var(--paper);
  box-shadow: -4px 4px 0 var(--ink);
}

/* Reordering: tiles slide to their new places; the one being dragged is
   picked up (bigger, tilted, a longer shadow) and follows the pointer */
.ph:not(.ph--add) {
  transition: translate 0.5s var(--ease, ease-out), scale 0.2s, box-shadow 0.2s;
  touch-action: pan-y;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
}

.ph:not(.ph--add) .ph__img {
  cursor: grab;
}

.ph.is-dragging {
  z-index: 3;
  scale: 1.08;
  rotate: 4deg;
  box-shadow: -9px 9px 0 var(--ink);
  transition: scale 0.15s, box-shadow 0.15s;
}

.ph.is-dragging .ph__img {
  cursor: grabbing;
}

.is-sorting .ph__x {
  opacity: 0;
}

/* Dropping photos from the computer: an inset dashed card over the page */
.dropzone {
  position: fixed;
  z-index: 20;
  inset: 1.25rem;
  display: grid;
  place-items: center;
  border: var(--edge) dashed var(--ink);
  border-radius: 2rem;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  pointer-events: none;
}

.dropzone[hidden] {
  display: none;
}

.dropzone p {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 1.75rem;
  border: var(--edge) solid var(--ink);
  border-radius: 999px;
  background: var(--sun);
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.6rem;
  rotate: -2deg;
  box-shadow: -5px 5px 0 var(--ink);
}

.dropzone svg {
  width: 1.6rem;
  height: 1.6rem;
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ph:nth-child(odd) { rotate: -1.5deg; }
.ph:nth-child(even) { rotate: 1.5deg; }

.ph__img {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: calc(1rem - 3px);
  background: none;
  cursor: pointer;
}

.ph__img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ph__x {
  position: absolute;
  inset-block-start: -0.7rem;
  inset-inline-end: -0.7rem;
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border: var(--edge) solid var(--ink);
  border-radius: 50%;
  background: var(--paper);
  cursor: pointer;
  box-shadow: -2px 2px 0 var(--ink);
}

.ph__x svg {
  width: 1rem;
  fill: none;
  stroke: var(--ink);
  stroke-width: 3.5;
  stroke-linecap: round;
}

.ph__main {
  position: absolute;
  inset-block-end: 0.4rem;
  inset-inline-start: 0.4rem;
  padding: 0 0.55rem;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--sun);
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.8rem;
  line-height: 1.7;
  pointer-events: none;
}

.ph--add {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0.25rem;
  border-style: dashed;
  box-shadow: none;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1rem;
  text-align: center;
  cursor: pointer;
}

.ph--add:has(input:focus-visible) {
  outline: 3px solid var(--ink);
  outline-offset: 5px;
}

.ph--add svg {
  width: 1.8rem;
  height: 1.8rem;
  fill: none;
  stroke: var(--ink);
  stroke-width: 3;
  stroke-linecap: round;
}

/* ---------- Date and time pickers ---------- */

.names--one {
  grid-template-columns: minmax(0, 1fr);
}

.input--pick {
  display: flex;
  min-width: 0;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  text-align: start;
  cursor: pointer;
}

.input--pick.is-empty .pick-val {
  color: var(--muted);
  font-weight: 400;
}

.input--pick svg {
  flex: none;
  width: 1.35rem;
  height: 1.35rem;
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.input--pick[aria-expanded="true"] {
  translate: 2px -2px;
  box-shadow: -6px 6px 0 var(--ink);
}

.pick-val {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The picker itself: a paper sticker under the field on desktop, a sheet
   at the bottom of the screen on phones (inset and rounded, never a band) */
.pop {
  position: absolute;
  z-index: 30;
  width: 22rem;
  padding: 1rem;
  border: var(--edge) solid var(--ink);
  border-radius: 1.5rem;
  background: var(--paper);
  color: var(--ink);
  box-shadow: -6px 6px 0 var(--ink);
  animation: pop-in 0.18s var(--ease, ease-out);
}

.pop--sheet {
  position: fixed;
  inset-inline: 0.75rem;
  inset-block-end: max(0.75rem, env(safe-area-inset-bottom));
  width: auto;
  max-width: 26rem;
  max-height: calc(100svh - 1.5rem);
  margin-inline: auto;
  overflow-y: auto;
  animation-name: sheet-in;
}

@keyframes pop-in {
  from { opacity: 0; scale: 0.95; }
}

@keyframes sheet-in {
  from { opacity: 0; translate: 0 2rem; }
}

.pop .arrow:disabled {
  border-style: dashed;
  box-shadow: none;
  color: var(--muted);
  cursor: default;
}

.cal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cal__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.3rem;
}

.cal__week,
.cal__days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  text-align: center;
}

.cal__week {
  margin-top: 0.75rem;
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--muted);
}

.cal__days {
  gap: 0.2rem;
  margin-top: 0.3rem;
}

.cal__day {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  min-height: 2.6rem;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 50%;
  background: none;
  color: var(--ink);
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
  cursor: pointer;
}

.cal__days > span {
  aspect-ratio: 1;
  min-height: 2.6rem;
}

.cal__day.is-today {
  border: 2px dashed var(--ink);
}

.cal__day:not(:disabled):hover {
  background: var(--peach);
}

.cal__day[aria-pressed="true"] {
  border: var(--edge) solid var(--ink);
  background: var(--sun);
  box-shadow: -2px 2px 0 var(--ink);
}

.cal__day:disabled {
  color: var(--muted);
  font-weight: 400;
  font-family: var(--text);
  cursor: default;
}

.pop__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: var(--edge) dashed var(--ink);
}

.pop__val {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.25rem;
}

.btn--pop {
  padding: 0.3rem 1.5rem;
  font-size: 1.2rem;
  cursor: pointer;
}

/* Morning or evening: a big two-way switch with words and a sun / moon,
   first, so it can never be mistaken for seconds */
.tp__period {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.25rem;
  padding: 0.25rem;
  border: var(--edge) solid var(--ink);
  border-radius: 999px;
}

.tp__period button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.9rem;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--ink);
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.15rem;
  cursor: pointer;
}

.tp__period button[aria-pressed="true"] {
  background: var(--sun);
}

.tp__period svg {
  width: 1.35rem;
  height: 1.35rem;
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tp__label {
  margin: 1rem 0 0.45rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1rem;
}

.tp__hours,
.tp__mins {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.45rem;
}

.tp__mins {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.tp__chip {
  min-height: 2.75rem;
  padding: 0;
  border: var(--edge) solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.1rem;
  box-shadow: -2px 2px 0 var(--ink);
  cursor: pointer;
  transition: translate 0.12s, box-shadow 0.12s;
}

.tp__chip[aria-pressed="true"] {
  background: var(--sun);
  translate: -2px 2px;
  box-shadow: 0 0 0 var(--ink);
}

/* ---------- First visit to the deck: wiggle, stars, arrows light up ---------- */

.spark {
  position: absolute;
  inset-block-start: 45%;
  z-index: 5;
  width: 2.4rem;
  height: 2.4rem;
  opacity: 0;
  pointer-events: none;
}

.spark svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: var(--sun);
  stroke: var(--ink);
  stroke-width: 2.5;
  stroke-linejoin: round;
}

.spark--a { inset-inline-start: calc(50% - 14rem); }
.spark--b { inset-inline-end: calc(50% - 14rem); }

@media (max-width: 30rem) {
  .spark--a { inset-inline-start: -0.4rem; }
  .spark--b { inset-inline-end: -0.4rem; }
}

@media (prefers-reduced-motion: no-preference) {
  .is-hinting .spark--b { animation: spark 0.7s 0.2s var(--ease, ease-out) both; }
  .is-hinting .spark--a { animation: spark 0.7s 0.75s var(--ease, ease-out) both; }

  .deck__card.is-wiggling {
    animation: wiggle 1.2s cubic-bezier(0.45, 0, 0.25, 1);
  }

  .is-hinting .deck-dock .arrow {
    animation: glow 0.6s 1.1s 2 ease-in-out;
  }
}

.is-hinting .deck-dock .arrow {
  background: var(--sun);
}

@keyframes spark {
  0% { opacity: 0; scale: 0.2; rotate: 0deg; }
  45% { opacity: 1; scale: 1.15; }
  100% { opacity: 0; scale: 0.6; rotate: 90deg; }
}

@keyframes wiggle {
  0%, 100% { transform: none; }
  30% { transform: translateX(-2.2rem) rotate(-4deg); }
  65% { transform: translateX(1.6rem) rotate(3deg); }
  85% { transform: translateX(-0.4rem) rotate(-0.5deg); }
}

@keyframes glow {
  50% { scale: 1.15; }
}

@media (prefers-reduced-motion: reduce) {
  .pop,
  .pop--sheet {
    animation: none;
  }
}

/* ================= Desktop ================= */

@media (min-width: 54rem) {
  .step-head h1 {
    font-size: 3.25rem;
  }

  .step-head {
    padding-top: 1.75rem;
  }

  .flow-grid {
    display: grid;
    grid-template-columns: 11rem minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 4rem);
    align-items: start;
  }

  .rail {
    position: sticky;
    inset-block-start: 1.5rem;
    display: block;
    padding-top: 1.75rem;
  }

  .rail__now {
    margin-bottom: 1rem;
  }

  .rail__step {
    font-size: 1.6rem;
  }

  .rail__dots {
    flex-direction: column;
    align-items: stretch;
  }

  .rail__dots li {
    display: block;
    width: auto;
    height: 3rem;
  }

  .rail__dots li:not(:last-child)::after {
    inset-inline-start: calc(0.725rem - 1.5px);
    width: 0;
    height: 100%;
    border-top: 0;
    border-inline-start: var(--edge) dashed var(--ink);
    translate: none;
  }

  .rail__dots li.is-done::after {
    border-inline-start-style: solid;
  }

  .rail__dots a,
  .rail__spot {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }

  .rail__dots i {
    flex: none;
    margin-inline: 0.275rem;
  }

  .rail__dots [aria-current] i {
    margin-inline: 0;
  }

  .rail__label {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
    font-family: var(--display);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--muted);
  }

  .rail__dots .is-done .rail__label {
    color: var(--ink);
    text-decoration: underline;
    text-decoration-color: var(--coral);
    text-decoration-thickness: 3px;
    text-underline-offset: 0.35em;
  }

  .rail__dots [aria-current] .rail__label {
    color: var(--ink);
  }

  .occs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.25rem 2rem;
  }

  .filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem 2rem;
  }

  .chips--scroll {
    margin: 0;
    padding: 0.25rem 0 0.85rem;
  }

  .chips--scroll .chip {
    padding-inline: 0.95rem;
  }

  .picks {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding-inline-end: 0;
    gap: 2.25rem 2rem;
  }

  /* The dock sits under the page's content column, not under the middle
     of the screen (the step rail takes the right side) */
  .dock {
    --shift: calc((11rem + clamp(2rem, 4vw, 4rem)) / -2);
    inset-block-end: 1.25rem;
    translate: var(--shift) 0;
  }

  .dock[hidden] {
    translate: var(--shift) 160%;
  }

  /* Register: every field sits on the same two columns, so labels and
     boxes line up across the page. The Google button and the "or" line
     run the full width above the email and password pair. */
  .form--wide,
  .form--wide .auth {
    max-width: none;
  }

  .form--wide {
    gap: 1.25rem;
  }

  .form--wide .auth--pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem clamp(2rem, 4vw, 3.5rem);
    align-items: start;
  }

  .form--wide .btn--google,
  .form--wide .or {
    grid-column: 1 / -1;
  }

  .details {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 23rem;
    gap: clamp(3rem, 6vw, 6rem);
    align-items: start;
  }

  .pop:not(.pop--sheet) {
    width: 23rem;
  }

  .live {
    position: sticky;
    inset-block-start: 5.5rem;
    display: block;
    height: min(calc(100vh - 12rem), 44rem);
  }

  .live .screen {
    rotate: 1.5deg;
    box-shadow: -8px 8px 0 var(--ink);
  }

  .live .deck__tag {
    inset-inline-start: 1.5rem;
  }

  .live {
    padding-top: 1rem;
  }

  .live > div {
    position: relative;
    height: 100%;
  }

  .deck {
    height: min(calc(100vh - 13rem), 52rem);
  }

  .check {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(3rem, 6vw, 6rem);
    align-items: start;
  }

  .check__side {
    position: sticky;
    inset-block-start: 5.5rem;
  }

  .check__side .whole .screen {
    height: min(calc(100vh - 22rem), 36rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .deck__card,
  .dock,
  .pick,
  .pick__check,
  .ph:not(.ph--add),
  .switch input::before {
    transition: none;
  }
}

/* ================= The account: login, dashboard, an order, the guest link =================
   Operate surfaces from the same system: paper stickers with navy edges and
   hard down-left shadows, Marhey for names and actions, Baloo for reading.
   Yellow means published or chosen, peach means waiting, dashed means not
   finished. Nothing here tilts except the stamps: it is a place to work. */

.dash {
  padding-bottom: 5rem;
}

.dash-head {
  display: grid;
  gap: 1.1rem;
  padding-block: clamp(1.5rem, 4vw, 2.5rem) 1.5rem;
}

.dash-head h1 {
  font-size: 2.4rem;
  line-height: 1.3;
}

.dash-head .lede {
  font-size: 1.15rem;
}

.dash-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
}

.seg--scroll {
  overflow-x: auto;
  scrollbar-width: none;
}

.seg button small {
  font-family: var(--text);
  font-weight: 600;
  opacity: 0.75;
}

.top-links {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.top-link {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
  text-decoration: underline;
  text-decoration-color: var(--coral);
  text-decoration-thickness: 3px;
  text-underline-offset: 0.35em;
}

.panel[hidden] {
  display: none;
}

/* An order */
.ords {
  display: grid;
  gap: 1.5rem;
}

.ord {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: 0.9rem 1rem;
  align-items: start;
  padding: 1rem;
  border: var(--edge) solid var(--ink);
  border-radius: 1.5rem;
  background: var(--paper);
  box-shadow: -5px 5px 0 var(--ink);
}

.ord--draft {
  border-style: dashed;
  box-shadow: none;
}

.ord__main {
  display: grid;
  gap: 0.3rem;
  min-width: 0;
}

.ord__name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.35rem;
  line-height: 1.4;
}

.ord__meta {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--muted);
}

.state {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  width: fit-content;
  padding: 0 0.75rem;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.9rem;
  line-height: 1.8;
  white-space: nowrap;
}

.state--done { background: var(--sun); }
.state--pending { background: var(--peach); }
.state--draft { border-style: dashed; }
.state--review { background: var(--ink); color: var(--background); }
.state--no { background: var(--background); }

.states {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.ord__more {
  grid-column: 1 / -1;
  display: grid;
  gap: 0.85rem;
}

.ord__note {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--muted);
}

/* The link: a strip with the address and its two buttons */
.linkbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.35rem 0.3rem 0.9rem;
  border: var(--edge) solid var(--ink);
  border-radius: 999px;
  background: var(--background);
}

.linkbar code {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  direction: ltr;
}

.mini {
  flex: none;
  min-height: 2.3rem;
  padding: 0 0.9rem;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 2.1;
  text-decoration: none;
  cursor: pointer;
}

.mini--sun { background: var(--sun); }

.mini--danger {
  border-color: var(--error);
  color: var(--error);
}

.acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 0.75rem;
}

.acts .btn {
  cursor: pointer;
}

/* Payments */
.bills {
  display: grid;
  gap: 1rem;
}

.bill {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.35rem 1rem;
  align-items: center;
  padding: 0.9rem 1.1rem;
  border: var(--edge) solid var(--ink);
  border-radius: 1.25rem;
  background: var(--paper);
  box-shadow: -4px 4px 0 var(--ink);
}

.bill__sum {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.25rem;
  white-space: nowrap;
}

.bill .acts {
  grid-column: 1 / -1;
}

/* Settings: three small forms */
.sets {
  display: grid;
  gap: 2.25rem;
  max-width: 30rem;
}

.sets form {
  display: grid;
  gap: 1rem;
}

.sets .btn {
  justify-self: start;
  cursor: pointer;
}

.saved {
  font-weight: 600;
  color: var(--muted);
}

.saved:empty {
  display: none;
}

/* Answers */
.tally {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.answers {
  display: grid;
  gap: 1rem;
}

.answer-card {
  display: grid;
  gap: 0.3rem;
  padding: 0.9rem 1.1rem;
  border: var(--edge) solid var(--ink);
  border-radius: 1.25rem;
  background: var(--paper);
  box-shadow: -4px 4px 0 var(--ink);
}

.answer-card__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem 1rem;
}

.answer-card__name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.2rem;
}

.answer-card__word {
  font-size: 1.1rem;
}

.answer-card__meta {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--muted);
}

/* Photos and videos from the guests */
.tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem 1rem;
}

.tile {
  display: grid;
  gap: 0.5rem;
  padding: 0.5rem 0.5rem 0.65rem;
  border: var(--edge) solid var(--ink);
  border-radius: 1.25rem;
  background: var(--paper);
  box-shadow: -4px 4px 0 var(--ink);
}

.tile__pic {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1;
  border: 2px solid var(--ink);
  border-radius: 0.85rem;
  background: var(--background);
}

.tile__pic img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tile__pic .state {
  position: absolute;
  inset-block-start: 0.4rem;
  inset-inline-start: 0.4rem;
}

.tile__by {
  padding-inline: 0.25rem;
  font-weight: 600;
  font-size: 0.95rem;
}

.tile .acts {
  gap: 0.4rem;
}

/* The "are you sure" card */
.ask {
  width: min(26rem, calc(100vw - 2rem));
  padding: 1.5rem 1.4rem 1.3rem;
  border: var(--edge) solid var(--ink);
  border-radius: 1.75rem;
  background: var(--paper);
  color: var(--ink);
  box-shadow: -7px 7px 0 var(--ink);
}

.ask::backdrop {
  background: rgb(23 32 63 / 0.55);
}

.ask h2 {
  font-size: 1.6rem;
  line-height: 1.4;
}

.ask p {
  margin-top: 0.5rem;
  font-size: 1.1rem;
}

.ask .acts {
  justify-content: flex-start;
  margin-top: 1.25rem;
}

.btn--danger {
  background: var(--error);
  color: var(--paper);
}

.ask dl {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.35rem 1.25rem;
  margin: 1rem 0 0;
  font-size: 1.05rem;
}

.ask dt {
  font-weight: 600;
  color: var(--muted);
}

.ask dd {
  margin: 0;
  font-weight: 600;
}

/* Login */
.login {
  display: grid;
  gap: 1.5rem;
  max-width: 26rem;
  margin-inline: auto;
}

.login .btn {
  cursor: pointer;
}

.login__alt {
  font-weight: 600;
  text-align: center;
}

/* Editing an order from the dashboard: no step rail, it is not a new order */
.is-editing .rail {
  display: none;
}

.is-editing .flow-grid {
  display: block;
}

.edit-note {
  padding: 0.7rem 1rem;
  border: var(--edge) dashed var(--ink);
  border-radius: 1rem;
  background: var(--paper);
  font-weight: 600;
}

.edit-note[hidden] {
  display: none;
}

/* The guest link: the invitation itself, edge to edge on a phone */
.guest {
  min-height: 100svh;
  background: var(--ink);
}

.guest .inv {
  width: 100%;
  max-width: 30rem;
  min-height: 100svh;
  margin-inline: auto;
  padding: 2rem 1.4rem 2.5rem;
  font-size: 1.08rem;
}

@media (min-width: 54rem) {
  .dash-head h1 {
    font-size: 3rem;
  }

  .ords {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
    align-items: start;
  }

  .ord {
    grid-template-columns: 7rem minmax(0, 1fr);
    padding: 1.25rem;
  }

  .bills,
  .answers {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    align-items: start;
  }

  .tiles {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.75rem 1.5rem;
  }

  .guest {
    padding-block: 2.5rem;
  }

  .guest .inv {
    min-height: 0;
    border: var(--edge) solid var(--ink);
    border-radius: 2rem;
    box-shadow: -8px 8px 0 var(--coral);
  }
}

.done__next {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 2rem;
}

.link-box a {
  flex: 1;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.form > .text-btn {
  justify-self: start;
}

.done__next {
  margin-top: 2.5rem;
}

.done__next .done__again {
  margin: 0;
}

.link-box a code {
  display: block;
}

.tile .acts {
  flex-wrap: nowrap;
}

.tile .mini {
  flex: 1;
  padding: 0 0.4rem;
  text-align: center;
}

/* Quiet actions on a card: text links beside the one real button */
.ord .acts {
  gap: 0.4rem 1.1rem;
}

.text-btn--danger {
  color: var(--error);
  text-decoration-color: var(--error);
}

.top-link--btn {
  margin-inline-start: auto;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  cursor: pointer;
}

.sound + .top-link--btn {
  margin-inline-start: 0;
}

.more summary {
  display: inline-flex;
  align-items: center;
  list-style: none;
}

.more summary::-webkit-details-marker {
  display: none;
}

.more[open] summary {
  margin-bottom: 0.75rem;
}

form.sets {
  gap: 1.25rem;
}

.top-link,
.text-btn {
  text-decoration-skip-ink: none;
}

/* ---------- Show the password, and the blob that watches ---------- */
.pw {
  position: relative;
  display: block;
}

.pw .input {
  padding-right: 3.25rem;
}

.pw__btn {
  position: absolute;
  top: 50%;
  right: 0.3rem;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--ink);
  translate: 0 -50%;
  cursor: pointer;
  transition: translate 0.15s;
}

.pw:focus-within .pw__btn {
  translate: 2px calc(-50% - 2px);
}

.pw__btn svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pw__btn circle {
  fill: currentColor;
  stroke: none;
}

.pw__btn[aria-pressed="true"] .pw__slash {
  display: none;
}

.pw__btn:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: -4px;
}

/* The eyes: shut (two small arcs) until a password is shown */
.blob__eyes {
  display: none;
  stroke: var(--ink);
  stroke-width: 2.4;
  stroke-linecap: round;
}

.has-eyes .blob__eyes {
  display: inline;
}

.eye__shut {
  fill: none;
  transition: opacity 0.12s;
}

.eye__open {
  fill: var(--paper);
  scale: 1 0.05;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transition: scale 0.28s var(--spring, ease-out), opacity 0.1s;
}

.eye__dot {
  fill: var(--ink);
  stroke: none;
}

.is-peeking .eye__shut {
  opacity: 0;
}

.is-peeking .eye__open {
  scale: 1;
  opacity: 1;
}

/* On a phone the order flow's step dots cross the blob where the eyes
   sit, so there the eyes move down beside the heading */
@media (max-width: 53.99rem) {
  html:has(.rail) .blob__eyes {
    translate: -4px 46px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .eye__open,
  .eye__shut,
  .pw__btn {
    transition: none;
  }
}