/* Registration Desk Organic replacement.
 * Composition authority: Registration Desk Organic.dc.html, turn 6a.
 */
.desk-organic-page {
  min-height: 100vh;
  color: var(--color-text);
  background:
    radial-gradient(
      circle at 88% 5%,
      var(--color-accent-200) 0,
      transparent 28rem
    ),
    var(--color-bg);
}

.desk-organic-page [hidden] {
  display: none !important;
}

.desk-organic-page .atmosphere {
  display: none;
}

.desk-organic-page > header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding: 24px 40px 16px;
  justify-content: space-between;
  background: transparent;
  border: 0;
}

/* The artboard's left header group: brand and surface badge baselined against
   each other, taking the free space so the links stay hard right. */
.desk-organic-page .desk-identity {
  display: inline-flex;
  /* Wraps, like the link rail beside it. At 200% zoom on a 390px phone the
     layout viewport is 195px and the brand plus the badge do not fit on one
     line; without this they forced a 517px document and the surface needed
     horizontal scrolling, which is the reflow gate `v2-event-day.spec.js`
     guards. The artboard's baselined row is what this still is wherever there
     is room for it. */
  flex: 1;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3);
  min-width: 0;
}

.desk-organic-page .role-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  gap: var(--space-4);
}

.desk-organic-page .brand,
.desk-organic-page h1,
.desk-organic-page h2,
.desk-organic-page h3,
.desk-organic-page .record-balance {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  letter-spacing: -0.035em;
}

.desk-organic-page .brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--color-text);
  font-size: 1.5rem;
  text-decoration: none;
}

.desk-organic-page .role {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 var(--space-3);
  border: 0;
  border-radius: 999px;
  color: var(--color-accent-2-800);
  background: var(--color-accent-2-100);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.desk-organic-page .text-button {
  min-height: 44px;
  padding: 0;
  border: 0;
  color: var(--color-accent-700);
  background: transparent;
  font: inherit;
  cursor: pointer;
}

.desk-organic-page
  :is(input, select, textarea, button, a):is(:focus, :focus-visible),
.desk-organic-page
  :is(.tender-choice, .identity-choice)
  label:has(input:is(:focus, :focus-visible)) {
  outline: 3px solid var(--color-accent-700);
  outline-offset: 3px;
}

.desk-organic-page > main {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding: 0 40px 40px;
}

.desk-organic-page .desk-intro {
  margin: 0 0 12px;
  padding: 0;
  border: 0;
  background: transparent;
}

/* `Registration Desk.dc.html:58` sets this greeting at 2.125rem/1.1 flat. The
   clamp ran it from 36px to 60px, so at desk width it was drawn at 57.6px —
   nearly half again the artboard's 34px — and it is the first thing in the
   working column, so every step below it started lower than drawn. The reasons
   the masthead was shrunk from `.intro`'s 48px in the first place (rule 49:
   `Find Guest` above the fold on a phone) all point the same way. */
.desk-organic-page .desk-intro h1 {
  max-width: none;
  margin: 0;
  font-size: 2.125rem;
  line-height: 1.1;
}

.desk-organic-page .desk-intro p {
  max-width: 58ch;
  margin-top: 10px;
}

.desk-organic-page .connectivity-status {
  position: static;
  width: auto;
  max-width: 80ch;
  margin: 0 0 12px;
}

.desk-organic-page .status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.desk-organic-page .role-sign-in,
.desk-organic-page .event-lock {
  max-width: 620px;
  margin-inline: auto;
  border-radius: 32px;
  background: var(--color-neutral-100);
}

.desk-organic-page .desk-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 460px);
  grid-template-areas:
    "sequence strip"
    "sequence record";
  align-items: start;
  gap: 14px 24px;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.desk-organic-page
  :is(
    .desk-workspace,
    .desk-sequence,
    .sequence-step,
    .step-body,
    .desk-form,
    .desk-form label
  ) {
  min-width: 0;
}

.desk-organic-page .sequence-heading {
  grid-area: heading;
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

/* The rail before anyone is found (artboard 6a). Same grid area as the strip
   it gives way to, in the surface ground rather than the strip's dark sage:
   the artboard reserves that treatment for a Guest actually being worked with. */
.desk-organic-page .guest-strip-empty {
  grid-area: strip;
  margin: 0;
  padding: var(--space-6);
  border-radius: 32px;
  background: var(--color-surface);
}

.desk-organic-page .guest-strip-empty[hidden] {
  display: none;
}

.desk-organic-page .guest-strip-empty .strip-eyebrow {
  margin: 0;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent-700);
}

.desk-organic-page .guest-strip-empty-name {
  margin: var(--space-2) 0 0;
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 1.375rem;
}

.desk-organic-page .guest-strip-empty .hint {
  margin: var(--space-2) 0 0;
  font-size: 0.8438rem;
}

.desk-organic-page .guest-strip {
  grid-area: strip;
  margin: 0;
  padding: var(--space-6);
  color: var(--color-neutral-100);
  background: var(--color-accent-2-800);
  border: 0;
  border-radius: 32px;
  box-shadow: none;
}

.desk-organic-page .guest-strip .strip-eyebrow,
.desk-organic-page .guest-strip #guest-balance-row dt {
  margin: 0;
  color: var(--color-accent-2-300);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.desk-organic-page .guest-strip #guest-balance-row {
  margin-top: var(--space-4);
}

.desk-organic-page .guest-strip .guest-detail {
  display: grid;
  gap: 2px;
  margin: var(--space-3) 0 0;
}

/*
 * One contact per row, label beside value in a fixed 58px column, as the
 * artboard draws it: the eye runs down the values while the labels answer
 * "did we get their phone?" without being read.
 */
.desk-organic-page .guest-strip .guest-contact-row {
  display: flex;
  gap: var(--space-2);
  font-size: 0.875rem;
}

.desk-organic-page .guest-strip .guest-contact-row dt {
  flex: none;
  width: 58px;
  color: var(--color-accent-2-300);
}

.desk-organic-page .guest-strip .guest-contact-row dd {
  margin: 0;
  min-width: 0;
  /* A long registration address is one unbroken token; without this it sets the
     track's width and the page scrolls sideways. */
  overflow-wrap: anywhere;
}

/* The name is the strip's heading now, so it carries the heading treatment the
 * `#guest-name` rule below already gives it, with no label above it. */
.desk-organic-page .guest-strip-name {
  margin: var(--space-2) 0 0;
  line-height: 1.1;
}

/* Two different sizes, as the artboard draws them: the name is a heading, the
 * balance is the figure a Guest is asking about. */
.desk-organic-page #guest-name,
.desk-organic-page #guest-balance {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
}

.desk-organic-page #guest-name {
  font-size: 1.75rem;
}

.desk-organic-page .guest-strip #guest-balance {
  display: block;
  margin: 4px 0 0;
  font-size: 3rem;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.desk-organic-page .strip-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.desk-organic-page .strip-actions button {
  min-height: 44px;
  padding-inline: 18px;
  border: 1px solid var(--color-accent-2-300);
  border-radius: 999px;
  color: var(--color-neutral-100);
  background: transparent;
  font-size: 0.875rem;
}

/* `Open Guest record` is the filled half of the pair. */
.desk-organic-page .strip-actions .strip-action-primary {
  border-color: var(--color-neutral-100);
  color: var(--color-accent-2-900);
  background: var(--color-neutral-100);
  font-weight: 600;
}

/*
 * Credit history, demoted from a third rail action to an underlined link
 * beneath the pair (DECISIONS.md, 11 September 2026). It keeps a 44px target
 * even though it reads as text.
 */
.desk-organic-page .credit-history-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: var(--space-2);
  padding: 0;
  border: 0;
  color: var(--color-accent-2-300);
  background: transparent;
  font: inherit;
  font-size: 0.8125rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.desk-organic-page .desk-sequence {
  grid-area: sequence;
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

/*
 * The step cards, measured off the artboard: 26.4px of padding in a 32px
 * radius, and a step that is not current sits transparent behind a divider
 * border rather than in a tinted well. The tint it used to carry was a
 * hard-coded `rgb(255 248 238 / 58%)` — a colour no token holds.
 */
.desk-organic-page .sequence-step {
  margin: 0;
  padding: var(--space-6);
  border: 1px solid var(--color-divider);
  border-radius: 32px;
  background: transparent;
  box-shadow: none;
}

.desk-organic-page .sequence-step[data-state="current"] {
  border-color: var(--color-accent-300);
  background: var(--color-bg);
  box-shadow: var(--shadow-md);
}

.desk-organic-page .step-index {
  color: var(--color-accent-700);
  letter-spacing: 0.08em;
}

.desk-organic-page .step-name {
  font-size: clamp(1.55rem, 2.5vw, 2.25rem);
}

.desk-organic-page .sequence-step:not([data-state="current"]) .step-name {
  font-size: 1.35rem;
}

.desk-organic-page input,
.desk-organic-page select,
.desk-organic-page textarea {
  min-width: 0;
  min-height: 52px;
  max-width: 100%;
  width: 100%;
  padding: 0 var(--space-4);
  /* The system's `.input`: a 999px well on `--color-surface` behind a divider
     hairline. 14px corners on a surface whose own containers run 26-32px read
     as a different system's control. */
  border: 1px solid var(--color-divider);
  border-radius: 999px;
  color: var(--color-text);
  background: var(--color-surface);
  caret-color: var(--color-accent);
  font: inherit;
}

.desk-organic-page .desk-form label {
  display: grid;
  gap: var(--space-1);
}

.desk-organic-page fieldset {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  border: 0;
}

.desk-organic-page .choice {
  display: flex;
  align-items: center;
  min-height: 44px;
  gap: var(--space-2);
}

.desk-organic-page .choice input[type="radio"] {
  flex: 0 0 20px;
  width: 20px;
  min-height: 20px;
  margin: 0;
}

/* The tender pills, `Registration Desk.dc.html:148-151` and 373-377, and the
   identity check in Recover access first (`:184-185`, OVE-48). The radio each
   wraps is hidden but stays focusable, so the pill carries the desk's own
   focus ring (above) and the group keeps its single tab stop and arrow keys. */
.desk-organic-page :is(.tender-choice, .identity-choice) {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.desk-organic-page .tender-choice {
  margin-top: var(--space-3);
}

.desk-organic-page .tender-choice legend,
.desk-organic-page :is(.tender-choice, .identity-choice) input {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.desk-organic-page :is(.tender-choice, .identity-choice) label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 20px;
  border: 1px solid var(--color-neutral-500);
  border-radius: 999px;
  color: var(--color-text);
  background: var(--color-bg);
  font-size: 0.9375rem;
  cursor: pointer;
}

.desk-organic-page .tender-choice label:has(input:checked) {
  border-color: var(--color-accent-700);
  color: var(--color-bg);
  background: var(--color-accent-600);
}

/* Filled one step darker than the tender pill: --color-bg on accent-600 is
   3.77:1, under the 4.5:1 this label needs; on accent-700 it is 5.72:1. */
.desk-organic-page .identity-choice label:has(input:checked) {
  border-color: var(--color-accent-700);
  color: var(--color-bg);
  background: var(--color-accent-700);
}

/* The legend names the group out loud and on screen (`:183`). A rendered
   legend is not a flex item, so its distance to the pills is its own. */
.desk-organic-page .identity-choice legend {
  margin-bottom: var(--space-2);
  padding: 0;
  font-size: 0.875rem;
}

/* One --space-3 under the pills, as the artboard spaces the block after the
   tender row, so the balance reads as status rather than part of the choice. */
.desk-organic-page .fund-balance-line {
  margin: var(--space-3) 0 0;
}

.desk-organic-page button,
.desk-organic-page .clipped {
  min-height: 44px;
  border-radius: 999px;
  clip-path: none;
}

/* The label is 15px/600, so it needs 4.5:1 (WCAG 1.4.3) in every state:
   neutral-100 on accent-700 is 6.22:1, where accent-600 measured 4.10:1.
   Hover and press darken toward neutral-900 rather than lighten, so neither
   drops below rest. Disabled is the system's one treatment (`.btn:disabled`). */
.desk-organic-page .primary {
  min-height: 52px;
  padding-inline: 24px;
  border: 0;
  color: var(--color-neutral-100);
  background: var(--color-accent-700);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.desk-organic-page .primary:hover {
  background: color-mix(
    in srgb,
    var(--color-accent-700) 88%,
    var(--color-neutral-900)
  );
}

.desk-organic-page .primary:active {
  background: color-mix(
    in srgb,
    var(--color-accent-700) 76%,
    var(--color-neutral-900)
  );
}

.desk-organic-page .primary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.desk-organic-page .credit-load input:disabled {
  opacity: 1;
  color: var(--color-neutral-700);
  border-color: var(--color-neutral-500);
  border-style: dashed;
  background: var(--color-neutral-200);
  cursor: not-allowed;
}

.desk-organic-page .credit-load button:disabled {
  opacity: 1;
  color: var(--color-neutral-700);
  border: 2px dashed var(--color-neutral-500);
  background: var(--color-neutral-300);
  box-shadow: inset 0 0 0 1px var(--color-neutral-400);
  cursor: not-allowed;
}

/* `Registration Desk.dc.html:73-80` gives the field a row of its own, capped
   at 420px, and puts `Find Guest` on the row beneath it with the branch
   guidance beside the button. The field and the commit shared a row here, which
   stretched the input across the whole working column and left the guidance
   stranded on a third row under both.

   Rows are placed explicitly rather than left to auto-flow: `#guest-search-state`
   sits between the button and the guidance in the markup, where it belongs for
   reading order, and auto-placement would put it between their two rows. */
.desk-organic-page #guest-search {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3);
}

.desk-organic-page #guest-search > label {
  grid-row: 1;
  grid-column: 1 / -1;
  max-width: 420px;
  margin: 0;
}

/* Artboard measure, `Registration Desk.dc.html:78`: `Find Guest` is the
   desk's one 56px primary with 28px inline padding, larger than the shared
   52px/24px because it opens every Guest's sequence. */
.desk-organic-page #guest-search button[type="submit"] {
  grid-row: 2;
  grid-column: 1;
  justify-self: start;
  min-height: 56px;
  padding-inline: 28px;
}

.desk-organic-page #guest-search .branch-guidance {
  grid-row: 2;
  grid-column: 2;
  margin: 0;
}

.desk-organic-page #guest-search-state {
  grid-row: 3;
  grid-column: 1 / -1;
}

.desk-organic-page #guest-contacts {
  white-space: nowrap;
}

.desk-organic-page .hint {
  color: var(--color-neutral-700);
}

.desk-organic-page .outbound-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--color-accent-700);
}

/* The QR card's actions are one row of text buttons, --space-3 apart. */
.desk-organic-page .access-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.desk-organic-page .access-qr {
  width: 100%;
  min-width: 0;
  max-width: 240px;
  padding: 10px;
  border: 1px solid var(--color-neutral-300);
  background: var(--color-neutral-100);
}

.desk-organic-page .access-qr svg {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

.desk-organic-page .access-details {
  margin-top: var(--space-4);
}

.desk-organic-page .register-branch,
.desk-organic-page .registration-review,
.desk-organic-page .access-details {
  border-radius: 24px;
  background: var(--color-surface);
}

.desk-organic-page .register-branch,
.desk-organic-page .registration-review {
  border-radius: var(--radius-lg);
}

.desk-organic-page .register-branch {
  margin-top: var(--space-4);
  padding: var(--space-4);
}

.desk-organic-page .register-branch h3 {
  margin: 0;
  font-size: 1.375rem;
}

.desk-organic-page .branch-reason {
  margin: var(--space-1) 0 0;
  color: var(--color-accent-700);
  font-size: 0.8438rem;
}

.desk-organic-page #guest-register {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.desk-organic-page #guest-register > .hint:first-child,
.desk-organic-page #guest-register > .hint:not(:first-child),
.desk-organic-page #guest-register > button {
  grid-column: 1 / -1;
}

.desk-organic-page #guest-register > .hint {
  margin: 0;
  font-size: 0.8125rem;
}

.desk-organic-page #guest-register > label:first-of-type {
  grid-column: 1 / -1;
  max-width: 420px;
}

.desk-organic-page #guest-register > button {
  justify-self: start;
}

/* The review is a new reading block below the registration form. Keep the
   heading clear of the form's submit target and let its decisions reflow
   without shrinking their touch targets at narrow Desk widths. */
.desk-organic-page .registration-review {
  margin-top: var(--space-4);
  padding: var(--space-4);
  background: var(--color-accent-100);
}

.desk-organic-page .registration-review h3 {
  font-size: 1.375rem;
}

.desk-organic-page .review-detail {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
}

.desk-organic-page .review-detail > div {
  display: grid;
  grid-template-columns: minmax(6rem, 9.375rem) minmax(0, 1fr);
  align-items: baseline;
  gap: var(--space-3);
}

.desk-organic-page .review-detail dt {
  color: var(--color-neutral-700);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.desk-organic-page .review-detail dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  font-size: 1rem;
}

.desk-organic-page .review-detail > div:first-child dd {
  font-family: var(--font-heading);
  font-size: 1.25rem;
}

@media (max-width: 480px) {
  .desk-organic-page .review-detail > div {
    grid-template-columns: minmax(4.5rem, 6rem) minmax(0, 1fr);
  }
}

.desk-organic-page #credit-form > label {
  max-width: 260px;
}

.desk-organic-page #credit-amount {
  font-family: var(--font-heading);
  font-size: 1.375rem;
}

.desk-organic-page #credit-amount[aria-invalid="true"] {
  border-color: var(--color-accent-700);
  box-shadow: 0 0 0 1px var(--color-accent-700);
}

.desk-organic-page #load-credit {
  max-width: 100%;
  white-space: normal;
}

.desk-organic-page .review-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.desk-organic-page .guest-record {
  grid-area: record;
  position: static;
  width: auto;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: var(--space-6);
  overflow: visible;
  border: 0;
  /* Artboard 6a's literal; no radius token sits at 32px. */
  border-radius: 32px;
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
}

/* The Guest record, `Registration Desk.dc.html:268-298`. */
.desk-organic-page .record-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.desk-organic-page .credit-history {
  border-color: var(--color-neutral-300);
}

.desk-organic-page .record-title {
  min-width: 0;
}

.desk-organic-page .guest-record .record-heading {
  margin: 0;
  font-size: 1.625rem;
  line-height: 1.1;
}

/* The artboard's 4px subject gap, a literal like the radius above. */
.desk-organic-page .record-subject {
  margin: 4px 0 0;
  font-size: 0.8125rem;
}

.desk-organic-page .record-close {
  flex: none;
  width: 44px;
  height: 44px;
}

/* The heading and Credit are where focus lands for a screen reader when the
   record opens. Neither is operable, so a ring there would signal a control
   that does not exist; every real control keeps the 3px ring above. */
.desk-organic-page .guest-record [tabindex="-1"]:focus {
  outline: none;
}

.desk-organic-page .credit-history h3 {
  margin: var(--space-4) 0 0;
  font-size: 1.1875rem;
}

.desk-organic-page .record-balance-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin: var(--space-2) 0 0;
}

.desk-organic-page .record-balance-label {
  font-size: 0.8125rem;
}

.desk-organic-page .guest-record .record-balance {
  font-weight: 400;
  font-size: 1.625rem;
  font-variant-numeric: tabular-nums;
}

.desk-organic-page .credit-movements {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}

/* With no movements the empty state stands in for the list; an empty list
   kept its margin and doubled the gap above the scope note. */
.desk-organic-page .credit-movements:empty {
  display: none;
}

.desk-organic-page .credit-movement {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-divider);
  font-size: 0.9375rem;
}

.desk-organic-page .movement-detail {
  display: grid;
  min-width: 0;
}

.desk-organic-page .movement-meta {
  font-size: 0.8125rem;
}

.desk-organic-page .movement-amount {
  flex: none;
  font-family: var(--font-heading);
  font-variant-numeric: tabular-nums;
}

.desk-organic-page .credit-history-empty {
  margin: var(--space-3) 0 0;
  font-size: 0.8438rem;
}

.desk-organic-page .credit-history-scope {
  margin: var(--space-3) 0 0;
  font-size: 0.8125rem;
  line-height: 1.5;
}

/* Recover access first, inline in step three under the refused button
   (`Registration Desk.dc.html:176-195`, OVE-48): one surface panel whose
   blocks keep a --space-3 rhythm. */
.desk-organic-page .guest-recovery:not([hidden]) {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding: var(--space-4);
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.desk-organic-page .guest-recovery > header {
  display: grid;
  gap: var(--space-1);
}

.desk-organic-page .guest-recovery h3,
.desk-organic-page .guest-recovery .hint {
  margin: 0;
}

.desk-organic-page .guest-recovery h3 {
  font-size: 1.1875rem;
}

.desk-organic-page #recovery-form {
  display: grid;
  gap: var(--space-3);
}

.desk-organic-page .recovery-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.desk-organic-page .recovery-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
}

@media (max-width: 800px) {
  /* The artboard is a 1440x900 desk. Below 800px there is no room to set the
     branch guidance beside `Find Guest`, so the lookup returns to one column
     and the guidance follows the button in the reading order it always had. */
  .desk-organic-page #guest-search {
    grid-template-columns: minmax(0, 1fr);
  }

  .desk-organic-page #guest-search > label {
    max-width: none;
  }

  .desk-organic-page #guest-search .branch-guidance {
    grid-row: 3;
    grid-column: 1;
  }

  .desk-organic-page #guest-search-state {
    grid-row: 4;
  }

  .desk-organic-page #guest-contacts {
    white-space: normal;
  }

  .desk-organic-page #guest-register,
  .desk-organic-page .recovery-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .desk-organic-page #guest-register > label:first-of-type {
    grid-column: 1;
  }

  .desk-organic-page #guest-register > .hint:first-child,
  .desk-organic-page #guest-register > .hint:not(:first-child),
  .desk-organic-page #guest-register > button {
    grid-column: 1;
  }

  .desk-organic-page > header {
    padding: 18px 16px 12px;
  }

  .desk-organic-page > main {
    padding: 0 16px 24px;
  }

  .desk-organic-page .desk-intro h1 {
    font-size: 2.35rem;
  }

  .desk-organic-page .desk-workspace {
    display: block;
  }

  .desk-organic-page .guest-strip {
    margin-bottom: 14px;
    padding: 20px;
  }

  .desk-organic-page .desk-sequence {
    gap: 12px;
  }

  .desk-organic-page .sequence-step {
    padding: 20px;
    border-radius: 26px;
  }

  /* No room for the step beside the record, so the record replaces it. */
  .desk-organic-page
    .desk-workspace:has(.guest-record:not([hidden]))
    .step-body {
    display: none;
  }

  .desk-organic-page .guest-record {
    position: fixed;
    inset: 0;
    z-index: 20;
    width: 100%;
    max-height: 100dvh;
    padding: max(20px, env(safe-area-inset-top)) 20px
      max(20px, env(safe-area-inset-bottom));
    overflow-y: auto;
    border-radius: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .desk-organic-page *,
  .desk-organic-page *::before,
  .desk-organic-page *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

@media (forced-colors: active) {
  .desk-organic-page .guest-strip,
  .desk-organic-page .sequence-step,
  .desk-organic-page .guest-record {
    border: 1px solid CanvasText;
  }
}

/* Operations, the hub. Same shape as the link every other staff surface
 * carries, so the bar reads the same wherever you are. */
.desk-organic-page .desk-operations {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--color-accent-200);
  border-radius: 999px;
  color: var(--color-accent-700);
  font-size: 13px;
  text-decoration: none;
}