/* ==========================================================================
   "Your guest list is part of the design."

   The panel that shows one wedding seen three ways. Shared, verbatim, by the
   compiled homepage and by a design's own page.

   The version this grew from was hard to read, and the cause was not the
   typeface: the event dates were 7px mono at 48% opacity and the headcounts
   7px, on a dark green ground. Nothing on a marketing page should be set at
   7px. Everything here is at a size somebody can read at arm's length, and
   the two figures the section exists to show -- how many events a guest is
   invited to, and how many of them are expected at each one -- are the
   loudest things in it after the event names.

   Three things were added, because the point was being described rather than
   shown: the guest's own link, spelled out; the count of events they can see
   out of all of them; and a headcount per event rather than one figure for
   the whole household. That last one is the whole argument -- Khala's family
   is nine people at the mehndi and four at the nikkah, and there is no way to
   say that with a single invitation card.
   ========================================================================== */

.gp {
  --gp-cream: #f8ecd9;
  --gp-gold: #e1a84d;
  --gp-line: rgba(248, 236, 217, .18);
  overflow: hidden;
  padding: 24px;
  border: 1px solid rgba(248, 236, 217, .2);
  border-radius: 28px;
  background: #24553f;
  color: var(--gp-cream);
  box-shadow: 0 18px 35px rgba(15, 45, 31, .2);
}

/* ---- the heading of the panel ---- */
.gp-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}
.gp-kicker {
  font-family: var(--app-font-mono, 'Space Mono', monospace);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gp-gold);
}
/* Two classes, because theme.css reaches every storefront h3 through
   `body.is-storefront h3` -- one class and two elements, which outranks one
   class and one element. Same trap the bento tiles fell into. */
.gp .gp-head h3 {
  margin: 8px 0 0;
  font-family: var(--app-font-serif, 'Cormorant Garamond', Georgia, serif);
  font-size: 30px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--gp-cream);
}
.gp .gp-head h3 em { font-style: italic; color: var(--gp-gold); }
.gp-no {
  font-family: var(--app-font-mono, 'Space Mono', monospace);
  font-size: 11.5px;
  letter-spacing: .1em;
  color: rgba(248, 236, 217, .86);
}

/* ---- the three guests ---- */
.gp-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 20px;
}
.gp-tab {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  column-gap: 9px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--gp-line);
  border-radius: 13px;
  background: transparent;
  color: var(--gp-cream);
  text-align: left;
  cursor: pointer;
  transition: border-color .3s ease, background .3s ease, transform .3s cubic-bezier(.2, .8, .2, 1);
}
.gp-tab:hover { transform: translateY(-2px); border-color: rgba(225, 168, 77, .7); }
.gp-tab.is-on { border-color: var(--gp-gold); background: rgba(225, 168, 77, .16); }
.gp-tab:focus-visible { outline: 2px solid var(--gp-gold); outline-offset: 2px; }

.gp-face {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: #c65d55;
  font-family: var(--app-font-serif, 'Cormorant Garamond', Georgia, serif);
  font-size: 13px;
  color: var(--gp-cream);
}
.gp-tab:nth-child(2) .gp-face { background: var(--gp-gold); color: #4c2029; }
.gp-tab:nth-child(3) .gp-face { background: #9b3144; }

.gp-tab-name {
  overflow: hidden;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gp-tab-sub {
  overflow: hidden;
  margin-top: 2px;
  font-family: var(--app-font-mono, 'Space Mono', monospace);
  font-size: 10.5px;
  letter-spacing: .04em;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(248, 236, 217, .86);
}

/* ---- their own link ----

   Spelled out, because "everyone gets their own link" is the sentence the
   whole section rests on and it was being asserted rather than shown. The
   slug changes as you move between guests, which is the demonstration. */
.gp-link {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 18px;
  padding: 10px 12px;
  border: 1px solid var(--gp-line);
  border-radius: 11px;
  background: rgba(76, 32, 41, .22);
}
.gp-link svg { flex: none; color: var(--gp-gold); }
.gp-link-url {
  overflow: hidden;
  min-width: 0;
  font-family: var(--app-font-mono, 'Space Mono', monospace);
  font-size: 11.5px;
  letter-spacing: -.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(248, 236, 217, .72);
}
/* The part that differs from every other guest's link. */
.gp-link-url b {
  font-weight: 700;
  color: var(--gp-cream);
}
.gp-link-tag {
  flex: none;
  margin-left: auto;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(225, 168, 77, .18);
  font-family: var(--app-font-mono, 'Space Mono', monospace);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gp-gold);
}

/* ---- what that link opens ---- */
.gp-table {
  margin-top: 12px;
  border: 1px solid rgba(248, 236, 217, .16);
  border-radius: 11px;
  background: rgba(76, 32, 41, .14);
}
.gp-table-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 13px;
  border-bottom: 1px solid rgba(248, 236, 217, .16);
  font-family: var(--app-font-mono, 'Space Mono', monospace);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.gp-table-head b { color: var(--gp-gold); }
.gp-table-head span { color: rgba(248, 236, 217, .8); }

.gp-row {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 10px 13px;
  border-bottom: 1px solid rgba(248, 236, 217, .1);
}
.gp-row:last-child { border-bottom: 0; }

.gp-check {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--gp-gold);
  font-family: var(--app-font-mono, 'Space Mono', monospace);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1;
  color: #4c2029;
}
.gp-name {
  display: block;
  font-family: var(--app-font-serif, 'Cormorant Garamond', Georgia, serif);
  font-size: 21px;
  font-weight: 500;
  line-height: 1.05;
}
.gp-date {
  display: block;
  margin-top: 3px;
  font-family: var(--app-font-mono, 'Space Mono', monospace);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(248, 236, 217, .86);
}
/* The headcount for this event, for this guest. The section's whole claim. */
.gp-seats {
  font-family: var(--app-font-mono, 'Space Mono', monospace);
  font-size: 11.5px;
  font-weight: 700;
  font-style: normal;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--gp-gold);
}

/* Not invited: still listed, so you can see what they will not be shown. */
.gp-row.is-out .gp-check {
  background: rgba(248, 236, 217, .12);
  color: rgba(248, 236, 217, .45);
}
.gp-row.is-out .gp-name,
.gp-row.is-out .gp-date { color: rgba(248, 236, 217, .38); }
.gp-row.is-out .gp-seats { color: rgba(248, 236, 217, .38); }

.gp-foot {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 14px;
  font-family: var(--app-font-mono, 'Space Mono', monospace);
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(248, 236, 217, .86);
}
.gp-foot svg { flex: none; color: var(--gp-gold); }

@media (max-width: 560px) {
  .gp { padding: 18px; }
  .gp-tabs { grid-template-columns: 1fr; }
  /* Two columns, same as desktop -- not three. A third (unused) track here
     used to pull .gp-tab-sub onto the same row as .gp-tab-name instead of
     stacking under it, squeezing the name column down to nothing and
     truncating every guest name on a real phone ("Chachu fa...", "Khala's
     fami..."). */
  .gp-tab { grid-template-columns: 30px minmax(0, 1fr); }
  .gp-name { font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  .gp-tab { transition: none; }
  .gp-tab:hover { transform: none; }
}

/* ==========================================================================
   The interactive half.

   The panel is a toy: cross an event off, add a seat, change the shape of the
   address. It is the product's own mechanic in miniature, and letting somebody
   press the buttons argues for it better than a paragraph can.
   ========================================================================== */

/* ---- where the invitation lives ----

   Three real forms. The path one works the moment a card is bought; the
   subdomain puts the couple's name first; a domain they own is connected in
   the panel and every link on the card moves onto it at once.
*/
.gp-styles {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 18px;
}
.gp-style {
  padding: 6px 11px;
  border: 1px solid var(--gp-line);
  border-radius: 999px;
  background: transparent;
  color: rgba(248, 236, 217, .7);
  font-family: var(--app-font-mono, 'Space Mono', monospace);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color .25s ease, background .25s ease, color .25s ease;
}
.gp-style:hover { border-color: rgba(225, 168, 77, .7); color: var(--gp-cream); }
.gp-style.is-on {
  border-color: var(--gp-gold);
  background: rgba(225, 168, 77, .16);
  color: var(--gp-gold);
}
.gp-style:focus-visible { outline: 2px solid var(--gp-gold); outline-offset: 2px; }

.gp-link { margin-top: 10px; }
.gp-style-note {
  margin: 8px 0 0;
  font-family: var(--app-font-mono, 'Space Mono', monospace);
  font-size: 10.5px;
  line-height: 1.5;
  letter-spacing: .05em;
  color: rgba(248, 236, 217, .86);
}

/* ---- the tick, now a control ---- */
.gp-check {
  padding: 0;
  border: 0;
  cursor: pointer;
  transition: background .22s ease, color .22s ease, transform .22s cubic-bezier(.2, .8, .2, 1);
}
.gp-check:hover { transform: scale(1.12); }
.gp-check:focus-visible { outline: 2px solid var(--gp-gold); outline-offset: 2px; }

/* ---- the stepper ----

   Sits where the headcount already was, so the number stays the thing you
   read and the buttons are what you notice second.
*/
.gp-count {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.gp-step {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid rgba(225, 168, 77, .4);
  border-radius: 999px;
  background: transparent;
  color: var(--gp-gold);
  font-family: var(--app-font-mono, 'Space Mono', monospace);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background .22s ease, color .22s ease, border-color .22s ease;
}
.gp-step:hover:not(:disabled) { background: var(--gp-gold); color: #24553f; }
.gp-step:focus-visible { outline: 2px solid var(--gp-gold); outline-offset: 2px; }
.gp-step:disabled { opacity: .3; cursor: default; }

.gp-seats {
  min-width: 9ch;
  text-align: right;
}
/* A row nobody is coming to has no headcount to step, so the buttons go and
   the words take the space. */
.gp-row.is-out .gp-count .gp-step { display: none; }
.gp-row.is-out .gp-seats { min-width: 0; }

/* The figures that change as you press things. A brief lift, so a number
   that has just moved is the one your eye goes to. */
.gp-live {
  transition: color .25s ease;
}
.gp-live.is-fresh { color: var(--gp-cream); }

.gp-reset {
  margin-left: auto;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--app-font-mono, 'Space Mono', monospace);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(248, 236, 217, .86);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.gp-reset:hover { color: var(--gp-gold); }

@media (max-width: 560px) {
  .gp-seats { min-width: 0; }
  .gp-row { grid-template-columns: 22px minmax(0, 1fr) auto; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .gp-check, .gp-step, .gp-style, .gp-live { transition: none; }
  .gp-check:hover { transform: none; }
}