/* The signed-out gate, and the signed-in waiting room.
   ------------------------------------------------------------------------
   Both pages are the opposite of the marketing site: one thing to do, plenty
   of air around it, and no competing calls to action. */

/* ---- Sign in ------------------------------------------------------------ */

.order-gate {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 78vh;
  padding: var(--pp-space-6) var(--pp-gutter);
}

.order-gate__panel {
  width: min(680px, 100%);
}

.order-gate__title {
  font-family: var(--pp-font-display);
  font-size: clamp(40px, 6vw, 76px);
  line-height: 0.94;
  letter-spacing: var(--pp-display-track);
  text-transform: uppercase;
}

.order-gate__lede {
  max-width: 46ch;
  margin-top: var(--pp-space-4);
  color: var(--pp-ink);
  font-size: var(--pp-body-l);
  line-height: 1.5;
}

.order-gate__form {
  margin-top: var(--pp-space-5);
}

.order-gate__label {
  display: block;
  margin-bottom: 10px;
  font-family: var(--pp-font-ui);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.order-gate__input {
  width: 100%;
}

.order-gate__meta {
  margin-top: var(--pp-space-4);
  color: var(--pp-stone);
  font-size: var(--pp-body-s);
}

.order-gate__meta a,
.order-gate__sent a {
  color: var(--pp-ovenred);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.order-gate__error {
  margin-top: var(--pp-space-3);
  padding: 12px 14px;
  border-left: 5px solid var(--pp-ovenred);
  background: var(--pp-paper);
  font-size: var(--pp-body-s);
}

/* Loud on purpose: this must never be mistaken for production behaviour. */
.order-gate__devlink {
  margin-bottom: var(--pp-space-4);
  padding: 12px 14px;
  border: var(--pp-rule-solid) dashed var(--pp-ovenred);
  font-family: var(--pp-font-data);
  font-size: 12px;
  word-break: break-all;
}

.order-gate__devlink-label {
  margin-bottom: 6px;
  color: var(--pp-ovenred);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ---- The waiting room --------------------------------------------------- */

.round {
  min-height: 78vh;
  padding: var(--pp-space-4) var(--pp-gutter) var(--pp-space-7);
}

.round__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pp-space-4);
  padding-bottom: var(--pp-space-4);
  border-bottom: var(--pp-rule-hair) solid var(--pp-char-line);
}

.round__whoami {
  color: var(--pp-ash);
  font-family: var(--pp-font-data);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.round__signout button,
.round__signout {
  padding: 10px 16px;
  border: var(--pp-rule-solid) solid var(--pp-ash);
  background: transparent;
  color: var(--pp-semolina);
  cursor: pointer;
  font-family: var(--pp-font-data);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.round__signout:hover button,
.round__signout:hover {
  border-color: var(--pp-flame);
  color: var(--pp-flame);
}

.round__hero {
  padding: var(--pp-space-6) 0 var(--pp-space-5);
}

.round__title {
  font-family: var(--pp-font-display);
  font-size: clamp(44px, 8vw, 104px);
  line-height: 0.88;
  letter-spacing: var(--pp-display-track);
  text-transform: uppercase;
}

.round__postcode {
  color: var(--pp-flame);
}

.round__lede {
  max-width: 48ch;
  margin-top: var(--pp-space-4);
  color: var(--pp-ash);
  font-size: var(--pp-body-l);
  line-height: 1.5;
}

/* The tally is the hero of this page: it is the only number the visitor can
   move, so it gets display type and a whole band to itself. */
.round__tally {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--pp-space-5);
  align-items: center;
  padding: var(--pp-space-5) 0;
  border-block: var(--pp-rule-solid) solid var(--pp-char-line);
}

.round__tally-figure {
  display: flex;
  align-items: baseline;
  gap: var(--pp-space-3);
}

.round__tally-count {
  font-family: var(--pp-font-display);
  font-size: clamp(72px, 12vw, 148px);
  line-height: 0.8;
  color: var(--pp-flame);
}

.round__tally-unit {
  color: var(--pp-ash);
  font-family: var(--pp-font-data);
  font-size: 12px;
  letter-spacing: 0.12em;
  line-height: 1.5;
  text-transform: uppercase;
}

.round__tally-reward-label {
  color: var(--pp-ash);
  font-family: var(--pp-font-data);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.round__tally-reward-figure {
  margin-top: 4px;
  font-family: var(--pp-font-ui);
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.round__tally-reward-note {
  max-width: 44ch;
  margin-top: 8px;
  color: var(--pp-ash);
  font-size: var(--pp-body-s);
  line-height: 1.55;
}

.round__tally-reward-note a {
  color: var(--pp-flame);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.round__share {
  padding-top: var(--pp-space-6);
}

.round__share-title {
  font-family: var(--pp-font-display);
  font-size: clamp(28px, 4vw, 46px);
  line-height: 0.95;
  text-transform: uppercase;
}

.round__share-copy {
  max-width: 52ch;
  margin-top: var(--pp-space-3);
  color: var(--pp-ash);
  font-size: var(--pp-body-m);
  line-height: 1.55;
}

.round__share-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
  margin-top: var(--pp-space-4);
  max-width: 720px;
}

.round__link-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: var(--pp-space-4);
  max-width: 720px;
}

.round__link {
  flex: 1 1 320px;
  min-width: 0;
  font-family: var(--pp-font-data);
  font-size: 14px;
}

.round__status {
  min-height: 1.4em;
  margin-top: 8px;
  color: var(--pp-flame);
  font-family: var(--pp-font-data);
  font-size: 12px;
  letter-spacing: 0.06em;
}

.round__qr {
  margin-top: var(--pp-space-6);
  padding-top: var(--pp-space-5);
  border-top: var(--pp-rule-hair) solid var(--pp-char-line);
}

.round__qr img {
  display: block;
  padding: 10px;
  background: var(--pp-paper);
}

.round__qr figcaption {
  margin-top: 10px;
  color: var(--pp-ash);
  font-family: var(--pp-font-data);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.round__qr-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

@media (max-width: 760px) {
  .round__tally {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--pp-space-4);
  }
}

/* Two audiences reach this page: households already on a round, and visitors
   who followed "order" before they had anywhere to order from. The second
   group needs an action, not an apology. */
.order-gate__prospect {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--pp-space-2);
  margin-top: var(--pp-space-4);
  padding-top: var(--pp-space-4);
  border-top: var(--pp-rule-solid) solid var(--pp-crust);
}

.order-gate__prospect-title {
  font-family: var(--pp-font-ui);
  font-size: 16px;
  font-weight: 600;
}