/* Sign-up: the landing page's language (Linen, centred display line, one sentence, white card, the same
   masthead and footer) on the design system's scale and tokens. */
:root[data-palette='daybreak'][data-theme='light'] {
  /* The landing page's Linen; the app keeps its own canvas. */
  --color-canvas: #f3efe7;
  --color-surface-raised: #ebe6dc;
  --color-surface-hover: #e4ded2;
  --color-divider: #e2dccf;
  --color-border: #d0c8b9;
  --color-control-border: #b2aa9d;
  --signup-card-shadow: 0 1px 2px rgb(27 35 48 / 5%), 0 12px 36px rgb(27 35 48 / 7%);
  --signup-dawn-end: #f7ead5;
}
.signup-start {
  --signup-width: 1184px; /* 1120px of content, as on the landing page */
  --signup-gutter: var(--space-8);
  --signup-form: 640px;
  --text-display: 3.25rem; /* one heading size through the whole flow, between the landing page's section title and display line */
  --line-display: 3.5rem;
  --text-display-phone: 2rem;
  --line-display-phone: 2.5rem;
  --signup-error-text: color-mix(in srgb, var(--color-alert) 82%, var(--color-text));
  --signup-error-focus: 0 0 0 3px color-mix(in srgb, var(--color-alert) 18%, transparent);
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  -webkit-font-smoothing: antialiased;
}
.signup-start main { flex: 1; display: flex; flex-direction: column; width: 100%; max-width: none; padding: 0; }
.signup-start h1, .signup-start h2, .signup-start h3 { margin-top: 0; }
.signup-start h1 { letter-spacing: -.015em; }

/* The same header and footer as the landing page. */
.signup-start .signup-masthead { background: var(--color-transparent); border-bottom-color: var(--color-transparent); }
.signup-start .masthead-inner { height: 100%; max-width: var(--signup-width); padding-inline: var(--signup-gutter); }
/* On phones the avatar is a menu: a caret says so, as on the select fields. */
.account-menu summary { position: relative; }
.account-menu summary::after { content: ''; position: absolute; right: -6px; top: 50%; margin-top: -2px; border: 4px solid var(--color-transparent); border-top-color: var(--color-text-muted); border-bottom: 0; }
.signup-start #signout { color: var(--color-text-muted); margin-right: calc(-1 * (var(--button-padding) + 1px)); } /* a quiet link: on the landing page the header's one button is the main action */
.signup-start .site-nav { margin-right: calc(-1 * var(--space-3)); }
.signup-start .site-footer { display: block; width: 100%; max-width: none; margin: 0; padding: 0; border-top: 1px solid var(--color-divider); font-size: var(--text-ui); line-height: var(--line-ui); color: var(--color-text-muted); }
.site-footer > div { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4) var(--space-7); max-width: var(--signup-width); min-height: 72px; margin-inline: auto; padding-inline: var(--signup-gutter); }
.site-footer nav { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-5); }
.site-footer a { color: inherit; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer a[href^='mailto'] { color: var(--color-accent-text); font-weight: var(--weight-semibold); }

/* Every state: the landing page's closing scene, a Linen page warming towards the footer. */
body.signup-start { background: linear-gradient(180deg, var(--color-canvas), var(--signup-dawn-end, var(--color-canvas))); }

.display-line, .request-heading h1 { margin: 0; font-size: var(--text-display); line-height: var(--line-display); font-weight: var(--weight-semibold); letter-spacing: -.022em; text-wrap: balance; }

#signin { flex: 1; display: flex; flex-direction: column; align-items: center; padding: max(var(--space-8), 50svh - 229px) var(--signup-gutter) 96px; text-align: center; } /* the status pages start at this same line */
.signin-lede { margin: var(--space-5) 0 0; color: var(--color-text-muted); font-size: var(--text-heading); line-height: var(--line-heading); text-wrap: balance; }
#signin > .notice { margin: var(--space-5) 0 0; max-width: 46ch; text-align: left; }
#turnstile { margin: var(--space-7) 0 0; max-width: 100%; }
#google { width: min(100%, 320px); margin-top: var(--space-7); }
#turnstile:has(iframe) + #google { margin-top: var(--space-4); }
.has-account #signin { display: none; }

/* The request */
.request-heading, #application, #errors, #new-application { width: 100%; max-width: calc(var(--signup-form) + 2 * var(--signup-gutter)); margin-inline: auto; padding-inline: var(--signup-gutter); }
.request-heading { padding-top: var(--space-8); text-align: center; } /* a fixed start, so the heading stays put when the form grows */
.request-heading h1:focus { outline: 0; }
.request-intro:empty { display: none; }
.request-intro { margin: var(--space-2) auto 0; color: var(--color-text-muted); text-wrap: balance; }
body:has(#signin:not([hidden])) .request-heading-text { display: none; }
body:has(#signin:not([hidden])):not(.signin-notice) .request-heading { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); padding: 0; }
body.signin-notice:has(#signin:not([hidden])) .request-heading { order: -1; padding-top: var(--space-4); }
#status-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 var(--space-2); margin: var(--space-3) 0 0; color: var(--color-text-muted); font-size: var(--text-meta); line-height: var(--line-meta); }
#status-line #message { min-height: 0; }
#status-line:has(#app-status:not([hidden])) #message:not(:empty)::before { content: '·'; margin-right: var(--space-2); }
.status-pill { font-weight: var(--weight-medium); white-space: nowrap; }
.status-pill[data-ready=true] { color: var(--color-accent-text); }
#errors { margin-block: var(--space-5) 0; padding-block: 0; border: 0; background: var(--color-transparent); }
#errors p { margin: 0; padding: var(--space-3) var(--space-4); border: 1px solid var(--color-alert); border-radius: var(--radius-card); background: var(--color-surface); color: var(--signup-error-text); font-size: var(--text-ui); line-height: var(--line-ui); }
#new-application { padding-block: var(--space-8); text-align: center; }
.request-layout { margin-top: var(--space-6); padding-bottom: var(--space-8); }
#request-content { min-width: 0; }
#section-form { padding: var(--space-7); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-dialog); box-shadow: var(--signup-card-shadow, var(--shadow-dialog)); }
#fields > .notice { margin: 0 0 var(--space-5); }
.field-card { margin: 0; padding: 0; border: 0; min-width: 0; }
.review-card { margin: var(--space-4) 0 0; padding: var(--space-6); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); min-width: 0; }
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-4); }
.signup-start .field { display: grid; align-content: start; gap: var(--space-2); margin: 0; grid-column: 1 / -1; min-width: 0; }
.signup-start .field-half { grid-column: auto; }
.field-label-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); }
.signup-start label { margin-bottom: 0; }
.signup-start .label-optional { display: inline; color: var(--color-text-muted); font-size: var(--text-ui); line-height: var(--line-ui); font-weight: var(--weight-regular); }
.signup-start fieldset input { margin-bottom: 0; }
.signup-start small { font-size: var(--text-ui); line-height: var(--line-ui); }
/* An unanswered choice looks unanswered; the list itself stays in ink. */
.signup-start select:has(option[value='']:checked) { color: var(--color-text-muted); }
.signup-start select option { color: var(--color-text); }
.field-feedback { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.field-feedback:not(:has(:not([hidden]))) { display: none; }
.field-help { min-width: 0; }
.field-counter { margin-left: auto; flex: none; white-space: nowrap; }
.field-error ~ .field-feedback .field-help { display: none; }
.field-error ~ .field-feedback:not(:has(.field-counter:not([hidden]))) { display: none; }
#address-availability { flex: none; margin-left: auto; color: var(--color-accent-text); }
#address-availability[data-taken] { color: var(--signup-error-text); }
#address-availability:empty { display: none; }
/* An input with a fixed ending (".reveille.work"): one field, the ending shaded and not editable.
   A long value scrolls inside the input; the ending never shrinks. */
.input-affix { display: flex; align-items: stretch; min-width: 0; border-radius: var(--radius-small); }
.input-affix > input { flex: 1 1 0; min-width: 0; border-top-right-radius: var(--radius-none); border-bottom-right-radius: var(--radius-none); }
.input-suffix { flex: none; display: flex; align-items: center; padding-inline: var(--space-3); border: 1px solid var(--color-control-border); border-left: 0; border-radius: var(--radius-none) var(--radius-small) var(--radius-small) var(--radius-none); background: var(--color-canvas); color: var(--color-text-muted); font-size: var(--text-body); line-height: var(--line-body); white-space: nowrap; }
.input-affix:has(> [aria-invalid='true']) > .input-suffix { border: 2px solid var(--signup-error-text); border-left: 0; }
.input-affix:has(> input:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.input-affix > input:focus-visible { outline: 0; }
.checkbox-field { grid-template-columns: var(--space-6) minmax(0, 1fr); align-items: center; column-gap: var(--space-3); }
.checkbox-field .field-label-row { grid-column: 2; grid-row: 1; }
.checkbox-field > input { grid-column: 1; grid-row: 1; width: var(--space-6); height: var(--space-6); margin: 0; padding: 0; appearance: none; border: 1px solid var(--color-control-border); border-radius: var(--radius-small); background-color: var(--color-input); }
.checkbox-field > input:checked { border-color: var(--color-primary); background-color: var(--color-primary); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E"); background-size: contain; }
.checkbox-field > small, .checkbox-field > .field-feedback { grid-column: 1 / -1; }
[aria-invalid='true'] { border: 2px solid var(--signup-error-text); }
/* A focused error: the red border and a soft halo, not a second outline. */
[aria-invalid='true']:focus-visible, .input-affix:has(> [aria-invalid='true']:focus-visible) { outline: 0; box-shadow: var(--signup-error-focus); }
.field-error { display: flex; gap: var(--space-2); color: var(--signup-error-text); }
.error-icon { width: 14px; height: 14px; flex: none; margin-top: 2px; }
.review-card h3 { margin: 0 0 var(--space-3); font-size: var(--text-body); line-height: var(--line-body); }
.review-card dl { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: var(--space-2) var(--space-4); margin: 0; font-size: var(--text-ui); line-height: var(--line-ui); }
.review-card dt, .review-card dd { margin: 0; }
.review-card dt { font-weight: var(--weight-regular); }
.saved-consent { display: flex; align-items: center; gap: var(--space-3); margin: 0; font-size: var(--text-ui); line-height: var(--line-ui); grid-column: 1 / -1; }
.saved-consent > [aria-hidden] { color: var(--color-accent-text); }
.ds-callout { display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-4) var(--space-5); border: var(--border-width) solid var(--color-border); border-left: 4px solid var(--color-accent); border-radius: var(--radius-card); background: var(--color-surface); color: var(--color-text); font-size: var(--text-body); line-height: var(--line-body); margin-bottom: var(--space-5); }
.ds-callout h3 { font-size: var(--text-body); line-height: var(--line-body); margin-bottom: var(--space-2); }
.ds-callout p { margin: 0; }
.ds-callout p + p { margin-top: var(--space-2); color: var(--color-text-muted); }
.ds-callout, #confirmation-body, #new-application { overflow-wrap: anywhere; }
/* The request as sent: a receipt to read, not a form, starting where its status page does. */
.is-read-only .request-heading { padding-top: max(var(--space-8), 50svh - 229px); }
.receipt { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: var(--space-4); align-items: baseline; margin: 0; }
.receipt dt { margin: 0; color: var(--color-text-muted); font-size: var(--text-ui); line-height: var(--line-ui); font-weight: var(--weight-regular); }
.receipt dd { margin: 0; color: var(--color-text); font-size: var(--text-body); line-height: var(--line-body); }
#actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin: var(--space-6) 0 0; padding-top: var(--space-4); border-top: 1px solid var(--color-divider); }
/* Fixed places: Delete draft on the left; Submit on the right; the saved time or Save draft just before it. */
#actions #status-line { justify-content: flex-start; margin: 0 0 0 auto; }
#actions #status-line:has(#message:empty) { display: none; }
#actions #app-status { display: none; } /* the buttons already say what comes next; the time is what's left to say */
#actions #status-line #message:not(:empty)::before { display: none; }
.is-read-only #status-line { display: none; }
#actions [data-lifecycle=withdraw] { order: -1; margin-left: calc(-1 * (var(--button-padding) + 1px)); }
#save-draft { flex: none; }
#actions #save-draft { margin-left: auto; }
#actions #save { margin-left: auto; }
#actions:has(#message:not(:empty)) :is(#save-draft, #save), #actions #save-draft:not([hidden]) + #save { margin-left: 0; }
.ready-action { margin-top: var(--space-6); }
.verified-identity { font-size: var(--text-meta); line-height: var(--line-meta); }
.provider-notice { grid-column: 1 / -1; margin: 0; padding: var(--space-3) var(--space-4); font-size: var(--text-ui); line-height: var(--line-ui); }
#request-secondary-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin-top: var(--space-5); }
#request-secondary-actions:empty { display: none; }
[data-lifecycle=withdraw].button-danger-quiet { border-color: var(--color-transparent); background: var(--color-transparent); color: var(--color-text-muted); }
[data-lifecycle=withdraw].button-danger-quiet:hover { color: var(--color-alert); }
#saved-review { margin-top: var(--space-5); padding: 0; border: 0; }
/* Timezone reads like the fields around it: its label above, the value at field size, Change beside it. */
.timezone-summary { grid-column: 1 / -1; display: grid; grid-template-columns: max-content max-content; align-items: center; column-gap: var(--space-2); row-gap: var(--space-2); }
.timezone-label { grid-column: 1 / -1; font-size: var(--text-ui); line-height: var(--line-ui); font-weight: var(--weight-medium); }
.timezone-value { min-width: 0; overflow-wrap: anywhere; color: var(--color-text); font-size: var(--text-body); line-height: var(--line-body); }
.timezone-summary button { flex: none; margin-block: calc(-1 * var(--space-1)); }
#lifecycle-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; justify-content: center; margin-top: var(--space-4); }
#lifecycle-actions:empty { display: none; }

/* Request sent, approved, ready: the closing scene with the four steps in one card. */
.is-confirmation .request-layout, .is-confirmation .request-heading { display: none; }
.is-confirmation #application { flex: 1; display: flex; flex-direction: column; max-width: none; padding: 0; }
#confirmation { flex: 1; }
#confirmation-body { width: 100%; max-width: calc(760px + 2 * var(--signup-gutter)); margin-inline: auto; padding: max(var(--space-8), 50svh - 229px) var(--signup-gutter) 72px; text-align: center; } /* every status heading starts where the signed-out heading does */
.dawn-copy .display-line { color: var(--color-text); }
.dawn-line { margin: var(--space-5) auto 0; max-width: 46ch; color: var(--color-text-muted); font-size: var(--text-heading); line-height: var(--line-heading); text-wrap: balance; }
.dawn-line strong { color: var(--color-text); font-weight: var(--weight-medium); }
.question-card { max-width: var(--signup-form); margin: var(--space-6) auto 0; padding: var(--space-5) var(--space-6); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-dialog); box-shadow: var(--signup-card-shadow, var(--shadow-dialog)); }
.question-card .dawn-line { max-width: none; margin-top: var(--space-2); font-size: var(--text-ui); line-height: var(--line-ui); }
.dawn-question { margin: 0; text-wrap: balance; color: var(--color-text); font-size: var(--text-heading); line-height: var(--line-heading); font-weight: var(--weight-semibold); overflow-wrap: anywhere; }
.dawn-hint { margin: var(--space-2) 0 0; text-wrap: balance; color: var(--color-text-muted); font-size: var(--text-ui); line-height: var(--line-ui); }
.dawn-hint strong { color: var(--color-text); font-weight: var(--weight-medium); }
.next-steps { margin-top: 40px; }
.next-steps .timeline-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: 0; }
.request-timeline { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.request-timeline li { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); text-align: center; }
.request-timeline li:not(:last-child)::before { content: ''; position: absolute; left: calc(50% + 18px); right: calc(-50% + 18px); top: 11px; height: 2px; background: var(--color-border); }
.request-timeline .is-done:not(:last-child)::before { background: var(--color-accent); }
.timeline-marker { width: var(--space-6); height: var(--space-6); flex: none; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--color-control-border); border-radius: var(--radius-pill); background: var(--color-transparent); color: var(--color-text); font-size: var(--text-micro); line-height: var(--line-micro); font-weight: var(--weight-semibold); }
.is-current .timeline-marker { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-accent-contrast); }
.is-done .timeline-marker { background: var(--color-selected-surface); border-color: var(--color-accent); color: var(--color-accent-text); }
.check-icon { width: 14px; height: 14px; }
.request-timeline h3 { margin: 0; font-size: var(--text-ui); line-height: var(--line-ui); font-weight: var(--weight-medium); color: var(--color-text-muted); }
.request-timeline .is-done h3 { color: var(--color-text); }
.request-timeline .is-current h3 { color: var(--color-text); font-weight: var(--weight-semibold); }
.confirmation-primary-actions { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--space-3); width: 100%; }

@media (max-width: 767px) {
  .signup-start { --signup-gutter: var(--space-5); }
  .signup-start .signup-masthead { height: var(--masthead-height); min-height: var(--masthead-height); }
  .signup-start .site-brand { gap: var(--space-2); }
  .signup-start .site-brand::before { width: 28px; height: 21px; }
  .signup-start .site-brand span { width: 108px; }
  .display-line, .request-heading h1 { font-size: var(--text-display-phone); line-height: var(--line-display-phone); }
  #google { width: 100%; }
  #signin { padding-block: max(var(--space-8), 50svh - 240px) 72px; }
  .signin-lede, .dawn-line { font-size: var(--text-body); line-height: var(--line-body); }
  .site-footer > div { min-height: 0; padding-block: var(--space-4); gap: var(--space-2) var(--space-7); }
  .request-heading { padding-top: var(--space-4); }
  .wide-break { display: none; }
  .confirmation-primary-actions .button-primary { width: 100%; }
  .request-layout { margin-top: var(--space-4); padding-bottom: var(--space-8); }
  #section-form { padding: var(--space-5); }
  .field-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .is-read-only .request-heading { padding-top: var(--space-4); }
  .signup-start .field-half { grid-column: 1 / -1; }
  .signup-start input:not([type=checkbox], [type=radio]), .signup-start select { height: 44px; }
  .review-card { padding: var(--space-4); }
  .review-card dl { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
  .review-card dd { margin-bottom: var(--space-2); }
  /* Submit, then one quiet centred line of everything else. */
  #actions { justify-content: center; gap: var(--space-2) var(--space-1); }
  #actions #save, #actions #save-draft:not([hidden]) + #save, #actions:has(#message:not(:empty)) #save { order: -3; width: 100%; margin: 0; }
  #actions #save-draft, #actions:has(#message:not(:empty)) #save-draft { order: -2; width: 100%; margin: 0; }
  #actions #status-line { order: -1; margin: 0; }
  #actions #status-line { width: 100%; justify-content: center; }
  #actions [data-lifecycle=withdraw] { order: 0; margin: 0; }
  #confirmation-body { padding-block: max(var(--space-8), 50svh - 240px) var(--space-8); }
  .next-steps { margin-top: var(--space-8); }
  .request-timeline h3 { font-size: var(--text-meta); line-height: var(--line-meta); }
  .receipt { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
  .receipt dd { margin-bottom: var(--space-3); }
  .receipt dd:last-child { margin-bottom: 0; }
}