/* Form 7-K — "Application for Service": the onboarding paper form, the
   "under consideration" docket and the assignment letter.

   Deliberately outside the daisyUI "business" theme the rest of the app
   wears: this is a self-contained paper aesthetic (desk, card stock,
   typewriter ink, rubber stamp) and borrowing theme tokens would only
   drag it back toward the UI it is pretending not to be. No border radius
   anywhere; shadows only on the paper cards. */

:root {
  --f7-desk: #23261f;
  --f7-desk-lit: #2c3028;
  --f7-paper: #ece3cd;
  --f7-manila: #d9c791;
  --f7-letter: #f2ead6;
  --f7-tint-notice: #e2d6b8;
  --f7-tint-declaration: #e7ddc2;
  --f7-tint-assignment: #ece0c4;
  --f7-ink: #2c2620;
  --f7-muted: #4a4438;
  --f7-faint: #8d8168;
  --f7-rule: #9b8f76;
  --f7-typewriter: #253a63;
  --f7-stamp: #a4243b;
  --f7-link: #7a2430;
  --f7-done: #5a6e4a;
}

@keyframes f7-spin { to { transform: rotate(360deg); } }
@keyframes f7-blink { 50% { opacity: 0; } }
@keyframes f7-stamp-in {
  0%   { transform: rotate(-8deg) scale(2.4); opacity: 0; }
  70%  { transform: rotate(-8deg) scale(0.94); opacity: 1; }
  100% { transform: rotate(-8deg) scale(1); opacity: 1; }
}

body.f7-body {
  margin: 0;
  background: var(--f7-desk);
  color: var(--f7-ink);
  font-family: 'Special Elite', 'Courier New', monospace;
}

body.f7-body main { display: block; }

.f7-desk {
  min-height: 100vh;
  background: var(--f7-desk);
  background-image: radial-gradient(ellipse at 50% 0%, var(--f7-desk-lit) 0%, var(--f7-desk) 70%);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 44px 16px 90px;
}

/* --- shared paper ------------------------------------------------- */

.f7-paper {
  width: 100%;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}

.f7-form {
  max-width: 790px;
  background: var(--f7-paper);
  background-image: repeating-linear-gradient(
    0deg,
    rgba(120, 100, 60, 0.035) 0px,
    rgba(120, 100, 60, 0.035) 1px,
    transparent 1px,
    transparent 3px
  );
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 2px 0 #d8cdb2 inset;
  padding: 34px 40px 40px;
}

/* --- phase 0: notice of decease -------------------------------------- */

.f7-notice-card {
  max-width: 560px;
  background: var(--f7-manila);
  padding: 34px 36px 30px;
  border-top: 3px double var(--f7-ink);
  border-bottom: 3px double var(--f7-ink);
}

.f7-notice-card__kicker {
  font-family: Oswald, sans-serif;
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 2.5px;
  color: var(--f7-muted);
}

.f7-notice-card__title {
  font-family: Oswald, sans-serif;
  font-weight: 600;
  font-size: 26px;
  letter-spacing: 3px;
  margin-top: 6px;
}

.f7-notice-card__ref {
  font-size: 11.5px;
  color: var(--f7-muted);
  margin-top: 2px;
  border-bottom: 1.5px solid var(--f7-ink);
  padding-bottom: 14px;
}

.f7-notice-card__body {
  font-size: 14px;
  line-height: 1.85;
  margin-top: 18px;
}

.f7-notice-card__body p { margin: 0 0 12px; }

.f7-notice-card__name { color: var(--f7-typewriter); }

.f7-notice-card__ledger {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
  margin-top: 6px;
  border-top: 1px dotted var(--f7-rule);
  padding-top: 12px;
}

.f7-notice-card__figure-label {
  font-family: Oswald, sans-serif;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--f7-muted);
}

.f7-notice-card__figure-value {
  font-size: 21px;
  color: var(--f7-typewriter);
}

.f7-notice-card__foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 28px;
}

/* The bookend to the letter's APPROVED: the same rubber stamp at the
   other end of a life. It does not thunk in — the notice was already on
   the desk when the applicant arrived, not stamped in front of them. */
.f7-stamp--closed {
  animation: none;
  opacity: 0.85;
}


/* --- form header --------------------------------------------------- */

.f7-header {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  border-bottom: 3px double var(--f7-ink);
  padding-bottom: 18px;
}

.f7-emblem {
  width: 58px;
  height: 58px;
  flex: none;
  border: 2px solid var(--f7-ink);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 0 3px var(--f7-paper), inset 0 0 0 4px var(--f7-ink);
  font-family: Oswald, sans-serif;
  font-size: 26px;
  line-height: 1;
}

.f7-header__mid { flex: 1; min-width: 0; }

.f7-agency {
  font-family: Oswald, sans-serif;
  font-size: 12px;
  letter-spacing: 3px;
  color: var(--f7-muted);
  line-height: 1.5;
}

/* The bureau sits under the administration that owns it, not beside it. */
.f7-agency--bureau {
  font-weight: 500;
  color: var(--f7-ink);
}

.f7-title {
  font-family: Oswald, sans-serif;
  font-weight: 600;
  font-size: 27px;
  letter-spacing: 1.5px;
  line-height: 1.15;
  margin-top: 4px;
}

.f7-subtitle { font-size: 12.5px; color: var(--f7-muted); margin-top: 4px; }

.f7-header__meta {
  flex: none;
  text-align: right;
  font-size: 11.5px;
  color: var(--f7-muted);
  line-height: 1.7;
}

.f7-header__meta-form { font-family: Oswald, sans-serif; letter-spacing: 1px; }

/* --- notice strip -------------------------------------------------- */

.f7-notice {
  margin-top: 16px;
  border: 1.5px solid var(--f7-ink);
  padding: 9px 14px;
  font-size: 12.5px;
  background: var(--f7-tint-notice);
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.f7-notice__tag {
  font-family: Oswald, sans-serif;
  font-weight: 600;
  letter-spacing: 2px;
  font-size: 11px;
  flex: none;
}

.f7-notice__text { flex: 1; min-width: 220px; }

/* --- sections and rows --------------------------------------------- */

.f7-section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  flex-wrap: wrap;
}

.f7-section-title {
  font-family: Oswald, sans-serif;
  font-size: 13px;
  letter-spacing: 2.5px;
  font-weight: 600;
}

.f7-section {
  margin-top: 22px;
}

.f7-section > .f7-section-title {
  border-bottom: 1.5px solid var(--f7-ink);
  padding-bottom: 5px;
}

.f7-identity {
  display: flex;
  gap: 28px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.f7-identity__rows { flex: 1; min-width: 280px; }

.f7-row {
  display: grid;
  grid-template-columns: minmax(118px, 34%) minmax(0, 1fr) 32px;
  gap: 10px;
  align-items: end;
  padding: 8px 0;
  border-bottom: 1px dotted var(--f7-rule);
}

.f7-row__label {
  font-family: Oswald, sans-serif;
  font-size: 11px;
  letter-spacing: 1.5px;
  color: var(--f7-muted);
  text-transform: uppercase;
  padding-bottom: 2px;
}

.f7-row__value { min-width: 0; }

.f7-value {
  font-size: 15px;
  color: var(--f7-typewriter);
  overflow-wrap: break-word;
}

.f7-value--blank { font-size: 13px; color: var(--f7-faint); }

/* --- buttons -------------------------------------------------------- */

/* Every button here centres its die with flex rather than leaning on the
   UA's `button { text-align: center }` — Tailwind's preflight (app.css,
   loaded before this file) resets that to `inherit`, which left the icon
   flush against the left border. */
.f7-btn-roll {
  width: 28px;
  height: 28px;
  border: 1.5px solid var(--f7-ink);
  background: transparent;
  color: var(--f7-ink);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.f7-btn-roll:hover:not(:disabled) {
  background: var(--f7-stamp);
  border-color: var(--f7-stamp);
  color: var(--f7-paper);
}

/* Disabled while the register of names is being consulted: the dice do
   not roll until the Bureau knows which names are free. */
.f7-btn-roll:disabled,
.f7-btn-outline:disabled {
  opacity: 0.4;
  cursor: default;
}

.f7-btn-outline {
  font-family: Oswald, sans-serif;
  font-size: 11px;
  letter-spacing: 2px;
  font-weight: 500;
  padding: 7px 14px;
  background: transparent;
  border: 1.5px solid var(--f7-ink);
  color: var(--f7-ink);
  cursor: pointer;
  text-transform: uppercase;
  /* The die sits beside the label, not above it: one line, and `flex:none`
     so the section head squeezes the row rather than the button. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  white-space: nowrap;
  flex: none;
}

.f7-btn-outline:hover:not(:disabled) { background: var(--f7-ink); color: var(--f7-paper); }

.f7-btn-dashed {
  width: 158px;
  margin-top: 8px;
  font-family: Oswald, sans-serif;
  font-size: 10.5px;
  /* 1px rather than the form's usual 1.5px tracking, and 5px side padding:
     at the 158px the photograph slot pins this button to, the label is
     9px too wide to sit on one line beside the die at 1.5px. Kept as a
     wrap (not nowrap) so a font fallback breaks the label in two rather
     than pushing it out of the box. */
  letter-spacing: 1px;
  padding: 7px 5px;
  background: transparent;
  border: 1.5px dashed #6b6250;
  color: var(--f7-muted);
  cursor: pointer;
  text-transform: uppercase;
  /* Pinned to the photograph slot's 158px. The die stays on the label's
     row, centred against it. */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  line-height: 1.45;
}

.f7-btn-dashed:hover { border-color: var(--f7-ink); color: var(--f7-ink); }

/* The die itself, and the slot holding it in the two labelled buttons —
   never squeezed or wrapped away from its label. */
.f7-icon { display: block; flex: none; }
.f7-icon-slot { display: flex; flex: none; }
.f7-icon--spinning { animation: f7-spin 0.6s linear infinite; }

/* --- form fields (login / claim-username) --------------------------- */

/* Form 7-K itself has no free-text entry (see file header) — this is for
   the two pages outside it that do: the sign-in desk and the username
   declaration. */

.f7-field { margin-top: 18px; }

.f7-field__label {
  display: block;
  font-family: Oswald, sans-serif;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--f7-muted);
  margin-bottom: 6px;
}

.f7-input {
  width: 100%;
  box-sizing: border-box;
  font-family: 'Special Elite', 'Courier New', monospace;
  font-size: 15px;
  color: var(--f7-ink);
  background: var(--f7-letter);
  border: 1.5px solid var(--f7-ink);
  border-radius: 0;
  padding: 9px 12px;
}

.f7-input:focus {
  outline: none;
  border-color: var(--f7-stamp);
}

.f7-field__hint {
  font-size: 11.5px;
  color: var(--f7-muted);
  margin-top: 6px;
  line-height: 1.5;
}

/* The Clerk-mounted sign-in/sign-up widget: no card of its own (it sits
   inside an .f7-form already). `padding-top` rather than `margin-top`
   deliberately — margin on this wrapper can collapse against Clerk's own
   root element and vanish, leaving the widget flush against the notice
   strip above it. The dotted rule matches the one Form 7-K itself uses
   between sections (.f7-section-head). */
.f7-clerk-mount {
  padding-top: 20px;
  margin-top: 16px;
  border-top: 1px dotted var(--f7-rule);
}

/* --- photograph slot ------------------------------------------------ */

.f7-photo-col { flex: none; width: 158px; }

.f7-photo {
  box-sizing: border-box;
  width: 158px;
  height: 196px;
  border: 1.5px solid var(--f7-ink);
  background: repeating-linear-gradient(
    45deg,
    #ded3b6 0px,
    #ded3b6 8px,
    #e6dcc2 8px,
    #e6dcc2 16px
  );
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  padding: 10px;
  font-family: 'Courier New', monospace;
  font-size: 11px;
  color: var(--f7-muted);
  line-height: 1.6;
}

.f7-photo-note {
  margin-top: 6px;
  font-size: 10.5px;
  color: var(--f7-link);
  line-height: 1.5;
}

/* --- declaration and submit ----------------------------------------- */

.f7-declaration {
  margin-top: 26px;
  border: 1.5px solid var(--f7-ink);
  padding: 14px 16px;
  font-size: 13px;
  line-height: 1.7;
  background: var(--f7-tint-declaration);
}

.f7-declaration__tag {
  font-family: Oswald, sans-serif;
  font-size: 11px;
  letter-spacing: 2px;
  font-weight: 600;
  display: block;
  margin-bottom: 6px;
}

.f7-tickbox {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--f7-ink);
  text-align: center;
  line-height: 13px;
  font-size: 11px;
  margin-right: 8px;
  vertical-align: -2px;
}

.f7-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 26px;
  flex-wrap: wrap;
}

.f7-footer__note {
  font-size: 11.5px;
  color: var(--f7-muted);
  line-height: 1.6;
  /* Capped at 380px, but allowed to give back the last few pixels rather
     than wrap the stamp onto its own line: the note and the stamp want
     713px of a 710px row at the form's full width. */
  flex: 1 1 200px;
  max-width: 380px;
}

.f7-btn-submit {
  font-family: Oswald, sans-serif;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 3px;
  padding: 13px 26px;
  background: transparent;
  border: 3px double var(--f7-stamp);
  color: var(--f7-stamp);
  cursor: pointer;
  transform: rotate(-1.5deg);
  text-transform: uppercase;
}

.f7-btn-submit:hover { background: var(--f7-stamp); color: var(--f7-paper); }

.f7-submit-placeholder {
  font-family: Oswald, sans-serif;
  font-size: 12px;
  letter-spacing: 2px;
  padding: 13px 26px;
  border: 3px double var(--f7-faint);
  color: var(--f7-faint);
  transform: rotate(-1.5deg);
  text-transform: uppercase;
}

.f7-error {
  margin-top: 16px;
  border: 1.5px solid var(--f7-stamp);
  color: var(--f7-link);
  background: var(--f7-tint-notice);
  padding: 9px 14px;
  font-size: 12.5px;
}

/* --- phase 2: under consideration ------------------------------------ */

.f7-docket {
  max-width: 560px;
  background: var(--f7-manila);
  padding: 38px 36px 34px;
  text-align: center;
  margin-top: 40px;
}

.f7-docket__spinner {
  width: 46px;
  height: 46px;
  margin: 0 auto;
  border: 2px solid var(--f7-ink);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  animation: f7-spin 3.2s linear infinite;
}

.f7-docket__title {
  font-family: Oswald, sans-serif;
  font-weight: 600;
  font-size: 21px;
  letter-spacing: 3px;
  margin-top: 16px;
}

.f7-docket__sub { font-size: 12.5px; color: var(--f7-muted); margin-top: 6px; }

.f7-docket__log {
  text-align: left;
  margin-top: 22px;
  border-top: 1.5px solid var(--f7-ink);
  padding-top: 14px;
  min-height: 150px;
}

.f7-docket__step { font-size: 13px; line-height: 1.5; padding: 4px 0; }

.f7-docket__done { color: var(--f7-done); }

.f7-cursor {
  display: inline-block;
  width: 9px;
  height: 15px;
  background: var(--f7-ink);
  vertical-align: -2px;
  animation: f7-blink 1s steps(1) infinite;
}

.f7-docket__warning {
  font-size: 11px;
  color: var(--f7-muted);
  margin-top: 14px;
  border-top: 1px dotted var(--f7-rule);
  padding-top: 10px;
}

/* --- phase 3: assignment letter --------------------------------------- */

.f7-letter {
  max-width: 660px;
  background: var(--f7-letter);
  padding: 44px 52px 40px;
  position: relative;
}

.f7-letterhead {
  text-align: center;
  border-bottom: 3px double var(--f7-ink);
  padding-bottom: 16px;
}

.f7-letterhead__office {
  font-family: Oswald, sans-serif;
  font-size: 24px;
  letter-spacing: 2px;
  font-weight: 600;
}

.f7-letterhead__address {
  font-family: Oswald, sans-serif;
  font-size: 11px;
  letter-spacing: 3px;
  color: var(--f7-muted);
  margin-top: 4px;
}

.f7-letter__meta {
  font-size: 13px;
  margin-top: 22px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.f7-letter__body { font-size: 14.5px; line-height: 1.85; margin-top: 18px; }
.f7-letter__body p { margin: 0 0 14px; }
.f7-letter__ink { color: var(--f7-typewriter); }

.f7-assignment {
  border: 2px solid var(--f7-ink);
  padding: 16px 20px;
  margin: 8px 0 18px;
  background: var(--f7-tint-assignment);
}

.f7-assignment__kicker {
  font-family: Oswald, sans-serif;
  font-size: 11px;
  letter-spacing: 2.5px;
  color: var(--f7-muted);
}

.f7-assignment__ministry {
  font-family: Oswald, sans-serif;
  font-weight: 600;
  font-size: 25px;
  letter-spacing: 2px;
  margin-top: 4px;
}

.f7-assignment__post { font-size: 13.5px; margin-top: 8px; }

.f7-assignment__rank {
  font-family: Oswald, sans-serif;
  font-weight: 600;
  letter-spacing: 1px;
}

.f7-letter__closing { font-size: 13.5px; line-height: 1.8; }

.f7-signoff {
  margin-top: 30px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
}

.f7-signature {
  font-family: 'Special Elite', monospace;
  font-size: 19px;
  transform: rotate(-3deg);
  color: #3a3630;
}

.f7-signoff__title {
  border-top: 1px solid var(--f7-ink);
  padding-top: 4px;
  font-size: 11.5px;
  color: var(--f7-muted);
}

.f7-stamp {
  border: 3px double var(--f7-stamp);
  color: var(--f7-stamp);
  padding: 10px 18px;
  text-align: center;
  font-family: Oswald, sans-serif;
  letter-spacing: 2px;
  transform: rotate(-8deg);
  animation: f7-stamp-in 0.38s ease-out both;
  opacity: 0.9;
  flex: none;
}

.f7-stamp__word { font-weight: 600; font-size: 20px; }
.f7-stamp__body { font-size: 10px; letter-spacing: 1.5px; }

.f7-letter__cta { display: flex; justify-content: center; margin-top: 34px; }

.f7-btn-report {
  font-family: Oswald, sans-serif;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 3px;
  padding: 13px 30px;
  background: var(--f7-ink);
  border: none;
  color: var(--f7-paper);
  cursor: pointer;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-block;
}

.f7-btn-report:hover { background: var(--f7-stamp); color: var(--f7-paper); }

/* The dice never spin for anyone who has asked the machine to hold
   still; the values still land, just without the flicker. */
@media (prefers-reduced-motion: reduce) {
  .f7-icon--spinning,
  .f7-docket__spinner,
  .f7-cursor,
  .f7-stamp {
    animation: none;
  }
}

/* The board proper is desktop-only (plan §0), and so is this form — but a
   player who opens the link on a phone should still be able to read and
   file it, so the letterhead stacks rather than collides. */
@media (max-width: 640px) {
  .f7-desk { padding: 24px 10px 60px; }
  .f7-form { padding: 24px 20px 30px; }
  .f7-letter { padding: 30px 24px 28px; }
  .f7-notice-card { padding: 24px 22px 22px; }

  .f7-header { flex-wrap: wrap; gap: 14px; }
  .f7-header__mid { flex: 1 1 100%; min-width: 0; }
  .f7-header__meta { flex: 1 1 100%; text-align: left; }
  .f7-agency { letter-spacing: 1.5px; }
  .f7-title { font-size: 22px; }

  /* The photograph slot moves under the identity rows instead of beside
     them, and the rows take the full width back. */
  .f7-identity { gap: 18px; }
  .f7-identity__rows { min-width: 0; flex: 1 1 100%; }
  .f7-photo-col { width: 100%; }
  .f7-photo, .f7-btn-dashed { width: 100%; }

  /* Three columns don't fit a phone: a long particular wraps and ends up
     floating above its own label. Stack label over value instead, with
     the die held to the right of both. */
  .f7-row {
    grid-template-columns: minmax(0, 1fr) 32px;
    grid-template-areas: "label die" "value die";
    align-items: center;
    row-gap: 1px;
  }
  .f7-row__label { grid-area: label; padding-bottom: 0; }
  .f7-row__value { grid-area: value; }
  .f7-row .f7-btn-roll { grid-area: die; }
  .f7-btn-submit { font-size: 14px; letter-spacing: 2px; padding: 12px 18px; }
}