/* ---------------------------------------------------------------------------
   The attendee portal.

   Inherits the site's tokens from styles.css - palette, typefaces, spacing -
   so it reads as part of RegSymp rather than a separate application bolted
   on. Only the layout of the signed-in pages lives here.
   --------------------------------------------------------------------------- */

.p-body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--off-white);
  color: var(--text-dark);
  font-family: var(--sans);
}

/* ------------------------------------------------------------------ chrome */

.p-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px clamp(20px, 5vw, 48px);
  border-bottom: 1px solid var(--border);
  background: var(--white);
}

.p-wordmark {
  font-family: var(--display);
  font-size: 19px;
  letter-spacing: 0.16em;
  color: var(--navy);
  text-decoration: none;
}

.p-nav {
  display: flex;
  align-items: center;
  gap: 22px;
}

.p-nav a,
.p-linkbutton {
  font-size: 14px;
  color: var(--text-muted);
  text-decoration: none;
  letter-spacing: 0.02em;
}

.p-nav a:hover,
.p-linkbutton:hover {
  color: var(--navy);
}

.p-linkbutton {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
}

.p-inline {
  display: inline;
  margin: 0;
}

.p-main {
  flex: 1;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(28px, 6vw, 56px) clamp(20px, 5vw, 32px);
  box-sizing: border-box;
}

.p-main--wide {
  max-width: 1040px;
}

.p-footer {
  padding: 24px clamp(20px, 5vw, 48px);
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 13px;
  text-align: center;
}

.p-footer p {
  margin: 0;
}

/* ------------------------------------------------------------------- cards */

.p-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: clamp(24px, 5vw, 40px);
}

.p-card--narrow {
  max-width: 440px;
  margin: 0 auto;
}

.p-centre {
  text-align: center;
}

.p-card h1 {
  font-family: var(--serif);
  font-size: clamp(24px, 4vw, 30px);
  font-weight: 400;
  margin: 0 0 10px;
  color: var(--navy);
}

.p-lede {
  color: var(--text-muted);
  margin: 0 0 26px;
}

.p-note {
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.6;
  margin: 22px 0 0;
}

.p-quiet {
  color: var(--text-muted);
  font-size: 14px;
}

.p-quiet:hover {
  color: var(--navy);
}

.p-badge {
  display: inline-block;
  background: var(--gold-soft);
  color: var(--gold-text);
  border-radius: 2px;
  padding: 2px 8px;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------------- forms */

.p-form--grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 20px;
}

.p-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 18px;
}

.p-form--grid .p-field {
  margin-bottom: 0;
}

.p-field--full {
  grid-column: 1 / -1;
}

.p-field label {
  font-size: 13px;
  font-weight: 500;
  color: var(--navy);
}

.p-field input,
.p-field textarea {
  font-family: inherit;
  font-size: 15px;
  color: var(--text-dark);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 10px 12px;
  width: 100%;
  box-sizing: border-box;
}

.p-field input:focus,
.p-field textarea:focus {
  outline: 2px solid var(--blue-soft);
  outline-offset: -1px;
  border-color: var(--blue);
}

.p-help {
  font-size: 12px;
  color: var(--text-muted);
}

.p-check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14px;
  font-weight: 400;
}

.p-check input {
  width: auto;
  margin-top: 2px;
}

.p-consent {
  padding-top: 6px;
  border-top: 1px solid var(--border);
}

.p-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 22px;
}

.p-form--grid .p-actions {
  margin-top: 4px;
}

.p-btn {
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.02em;
  background: var(--navy);
  color: var(--white);
  border: 0;
  border-radius: 3px;
  padding: 12px 24px;
  cursor: pointer;
}

.p-btn:hover {
  background: var(--navy-light);
}

/* ----------------------------------------------------------------- notices */

.p-flash {
  border-left: 3px solid var(--blue);
  background: var(--white);
  border-radius: 3px;
  padding: 12px 16px;
  margin: 0 0 24px;
  font-size: 14px;
}

.p-flash--ok {
  border-left-color: #2f6b3a;
  background: #f1f7f2;
}

.p-flash--error {
  border-left-color: #9b2c2c;
  background: #fbeded;
}

/* ------------------------------------------------------------------ ticket */

.p-ticketstrip {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  text-decoration: none;
  background: var(--gold-soft);
  border: 1px solid #e8dfc6;
  border-radius: 3px;
  padding: 16px 18px;
  margin: 0 0 30px;
}

/* Who built it, under a hairline at the foot of the card. */
.p-credit {
  margin: 22px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--rule, #e8e4dc);
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
}

.p-credit a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.p-credit a:hover {
  color: var(--navy, #1c2b4a);
}

/* A badge waiting to be claimed should not look settled. */
.p-ticketstrip--unclaimed {
  background: #fff;
  border-style: dashed;
  border-color: #cfc4a4;
}

.p-ticket-claim {
  border-top: 1px solid var(--rule, #e8e4dc);
  padding: 18px 22px 22px;
  margin: 0;
}

.p-ticket-claim .p-note {
  margin: 0 0 14px;
}

.p-ticket-claimed {
  border-top: 1px solid var(--rule, #e8e4dc);
  padding: 16px 22px 20px;
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
}

.p-ticket-claimed p {
  margin: 0 0 14px;
}

.p-ticket-claimed .p-help {
  margin: 10px 0 0;
  display: block;
}

/* The badge is already valid, so this is an extra way to carry it rather than
   the thing to do next. Outlined, not filled. */
.p-btn--wallet {
  background: transparent;
  color: var(--navy, #1c2b4a);
  border: 1px solid var(--navy, #1c2b4a);
}

.p-ticketstrip-label {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-text);
}

.p-ticketstrip-number {
  font-family: var(--serif);
  font-size: 22px;
  color: var(--navy);
}

.p-ticket {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  max-width: 520px;
  margin: 0 auto;
}

.p-ticket-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 24px;
  /* Colour and text colour are set on the element: they come from the badge
     category, and the text has to stay readable on a pale one. */
  background: var(--navy);
  color: var(--white);
}

.p-ticket-kind {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 2px;
  padding: 4px 10px;
}

.p-ticket-kind--vip {
  border-color: var(--gold);
  color: #f2dfa8;
}

.p-ticket-number {
  font-family: var(--serif);
  font-size: 26px;
  margin: 0;
}

.p-ticket-head .p-ticket-number {
  color: inherit;
}

.p-ticket-body {
  display: flex;
  gap: clamp(18px, 4vw, 32px);
  padding: clamp(20px, 4vw, 30px);
  align-items: flex-start;
  flex-wrap: wrap;
}

.p-qr {
  flex: 0 0 auto;
  line-height: 0;
}

.p-qr svg {
  display: block;
  width: clamp(180px, 45vw, 240px);
  height: auto;
}

.p-ticket-meta {
  margin: 0;
  /* 160px, not 200: the card is 520px wide and at 200 the QR plus the gap
     plus this basis exceeded the content box, so the two wrapped and stacked
     on desktop instead of sitting side by side. */
  flex: 1 1 160px;
  font-size: 14px;
}

.p-ticket-meta dt {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 12px;
}

.p-ticket-meta dt:first-child {
  margin-top: 0;
}

.p-ticket-meta dd {
  margin: 3px 0 0;
  color: var(--text-dark);
}

.p-ticket-foot {
  margin: 0;
  padding: 14px 24px 20px;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.6;
}

/* -------------------------------------------------------------- one column */

@media (max-width: 620px) {
  .p-form--grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .p-ticket-body {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .p-ticket-meta {
    text-align: left;
  }
}

/* ---------------------------------------------------------------- printing */

@media print {
  .p-header,
  .p-footer,
  .p-ticket-foot,
  .p-note {
    display: none;
  }

  .p-body {
    background: #fff;
  }

  .p-ticket {
    border-color: #999;
    max-width: none;
  }
}

/* Long values must never widen the page. A ticket code is 32 random
   characters and pushed the viewport sideways on a phone. */
.p-backlink { margin-top: 22px; }

.p-card,
.p-ticket,
.p-note {
  overflow-wrap: anywhere;
}

/* A honeypot: off-screen rather than display:none, because some bots skip
   hidden fields but happily fill one they can compute a position for. */
.p-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --------------------------------------------------------------- buying one

   The seats on sale, side by side. A card per badge category, in the
   category's own colour, so the thing being bought is recognisable as the
   badge it becomes. */

.p-buys {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  margin: 24px 0 0;
}

.p-buy {
  background: var(--white);
  border: 1px solid var(--border);
  border-top: 3px solid var(--seat, var(--navy));
  border-radius: 4px;
  padding: 24px;
  display: flex;
  flex-direction: column;
}

.p-buy-head {
  margin: 0 0 4px;
}

.p-buy h2 {
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 400;
  margin: 0;
  color: var(--navy);
}

.p-buy-price {
  font-size: 28px;
  font-weight: 600;
  color: var(--navy);
  margin: 6px 0 0;
}

.p-buy-note {
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.6;
  margin: 10px 0 0;
}

/* The button sits at the bottom of every card whatever the note above it
   says, so three cards of different lengths still line up. */
.p-buy-form {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.p-buy-form .p-btn {
  margin-top: auto;
  width: 100%;
}

.p-fineprint {
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.6;
  margin: 24px 0 0;
  text-align: center;
}

.p-btn--quiet {
  display: inline-block;
  text-decoration: none;
  background: transparent;
  color: var(--navy);
  border: 1px solid var(--border);
}

.p-btn--quiet:hover {
  background: var(--paper, #f6f3ec);
}

/* ------------------------------------------------- a badge for each event

   Somebody may hold a seat at Palma and a seat bought for Davos. The profile
   lists them; the ticket page shows one and offers the others. Both have to
   say which event, or two badges are worse than one. */

/* Stacked rather than one strip with 30px under it: several in a row want a
   gap between them, not a margin under the last. */
.p-ticketstrip + .p-ticketstrip {
  margin-top: -18px;
}

.p-ticketstrip {
  border-left: 3px solid var(--seat, #e8dfc6);
}

.p-ticketstrip-event {
  display: block;
  margin-top: 3px;
  letter-spacing: 0.02em;
  text-transform: none;
  font-size: 13px;
  color: var(--navy);
}

.p-ticketswitch {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 16px;
  margin: 0 0 18px;
  font-size: 13px;
}

.p-ticketswitch a {
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.p-ticketswitch-on {
  font-weight: 600;
  color: var(--navy);
}