/* 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) {
  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;
}

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

.desk-organic-page .primary {
  min-height: 52px;
  padding-inline: 24px;
  border: 0;
  color: var(--color-neutral-100);
  background: var(--color-accent-600);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.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;
}

.desk-organic-page #guest-search button[type="submit"] {
  grid-row: 2;
  grid-column: 1;
  justify-self: start;
}

.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-search button[type="submit"],
.desk-organic-page #guest-register button[type="submit"] {
  color: var(--color-accent-700);
  background: transparent;
}

.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);
}

.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,
.desk-organic-page .guest-recovery {
  border-radius: 24px;
  background: var(--color-surface);
}

/* 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);
}

.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: 24px;
  overflow: visible;
  border: 0;
  border-radius: 30px;
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
}

.desk-organic-page .guest-record .record-heading {
  font-size: 1.75rem;
}

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

@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 > 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;
  }

  .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 (NAVIGATION.md). */
.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;
}