/* ==========================================================================
   IRON — Individual Account Opening
   Light theme only. Three-column workspace: steps, form, widgets.
   ========================================================================== */

:root {
  /* Brand — IRON crimson, kept as the accent where the reference used blue */
  --brand-700: #6E1416;
  --brand-600: #8B1A1A;
  --brand-500: #AA2023;
  --brand-100: #F7DDDD;
  --brand-50:  #FDF0F0;

  /* Surfaces */
  --canvas:    #EFF1F4;
  --surface:   #FFFFFF;
  --field:     #F7F8FA;
  --field-alt: #F2F4F7;

  /* Ink */
  --ink-900: #16191D;
  --ink-800: #272B32;
  --ink-700: #3D4350;
  --ink-600: #5A6270;
  /* Hints and helper text carry real instructions ("dated within the last
     3 months", "11 digits"), so they have to clear WCAG AA at 12px. The old
     #7A8290 measured 3.87:1 on white; this is 4.95:1 on the darkest surface
     it ever sits on. */
  --ink-500: #626A78;
  --ink-400: #838B99;

  /* Lines */
  --line:      #E3E6EB;
  --line-soft: #EDEFF3;

  /* Status */
  --ok:   #1E7F4E; --ok-bg:   #E7F5EE;
  --warn: #9A6100; --warn-bg: #FFF3DC;
  --err:  #C42B2B; --err-bg:  #FDECEC;
  --info: #1F5FA9; --info-bg: #E8F0FA;

  --sh-card: 0 1px 2px rgba(22,25,29,.04), 0 8px 28px -14px rgba(22,25,29,.16);
  --sh-pop:  0 8px 28px -6px rgba(22,25,29,.22);

  --r-sm: 7px;
  --r:    9px;
  --r-lg: 14px;

  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

/* An explicit display below would otherwise beat the browser's [hidden]. */
[hidden] { display: none !important; }

html { background: var(--canvas); }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-800);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; font-weight: 640; letter-spacing: -.016em; color: var(--ink-900); }

:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; border-radius: 5px; }

.tiny { font-size: 12px; }
.muted { color: var(--ink-500); }

/* --------------------------------------------------------------------------
   Shell
   -------------------------------------------------------------------------- */

.app {
  max-width: 1340px;
  margin: 22px auto 40px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-card);
  overflow: hidden;
}

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

.app-head {
  display: flex; align-items: center; gap: 14px;
  padding: 0 18px; height: 64px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  position: sticky; top: 0; z-index: 40;
}

.head-close {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center;
  border: 0; background: transparent; border-radius: 8px;
  color: var(--ink-500); cursor: pointer;
  transition: background .14s, color .14s;
}
.head-close:hover { background: var(--field-alt); color: var(--ink-900); }
.head-close svg { width: 17px; height: 17px; }

.head-brand { display: flex; align-items: center; gap: 11px; min-width: 0; }
.head-mark {
  width: 32px; height: 32px; flex: none;
  display: grid; place-items: center;
  background: var(--field); border: 1px solid var(--line); border-radius: 8px;
}
.head-mark img { width: 20px; height: 20px; object-fit: contain; display: block; }

.head-titles { min-width: 0; line-height: 1.25; }
.head-titles h1 { font-size: 15.5px; font-weight: 620; }
.head-titles span { display: block; font-size: 12px; color: var(--ink-500); }

.head-actions { margin-left: auto; display: flex; align-items: center; gap: 9px; }

/* ---- body grid ---- */

.app-body {
  display: grid;
  grid-template-columns: 218px minmax(0, 1fr) 306px;
  align-items: start;
}

/* --------------------------------------------------------------------------
   Left rail — steps
   -------------------------------------------------------------------------- */

.steps {
  position: sticky; top: 64px;
  padding: 22px 14px 28px;
  border-right: 1px solid var(--line);
  min-height: calc(100vh - 64px);
}

.steps-label {
  font-size: 10.5px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-500); padding: 0 10px 10px;
}

.step {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 9px 11px; margin-bottom: 2px;
  border: 0; border-radius: 8px; background: transparent;
  font: inherit; font-size: 13.5px; color: var(--ink-600);
  text-align: left; cursor: pointer;
  transition: background .14s, color .14s;
}
/* WCAG exempts disabled controls from contrast, but these are the names of
   the steps still to come — people read them to know what is ahead. The
   disabled state is already carried by the bullet colour and the missing
   pill, so the text can be readable. */
.step:disabled { cursor: default; color: #6E7684; }
.step:not(:disabled):hover { background: var(--field); color: var(--ink-900); }

.step .bullet {
  width: 8px; height: 8px; flex: none; border-radius: 50%;
  background: var(--line); box-shadow: 0 0 0 3px transparent;
  transition: background .18s, box-shadow .18s;
}
.step .txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.step.is-on {
  background: var(--brand-50); color: var(--brand-700); font-weight: 560;
}
.step.is-on .bullet { background: var(--brand-600); box-shadow: 0 0 0 3px var(--brand-100); }

.step.is-done { color: var(--ink-700); }
.step.is-done .bullet { background: var(--ok); }

/* --------------------------------------------------------------------------
   Centre — the form
   -------------------------------------------------------------------------- */

.main { padding: 26px 30px 40px; min-width: 0; }

.panel-head { margin-bottom: 4px; }
.panel-head h2 { font-size: 19px; }
.panel-head p { margin: 5px 0 0; font-size: 13.5px; color: var(--ink-500); max-width: 62ch; }

.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 26px; }

.field { grid-column: 1 / -1; padding-top: 20px; min-width: 0; }
.field.half { grid-column: span 1; }

.f-heading {
  grid-column: 1 / -1;
  font-size: 15px; font-weight: 620; color: var(--ink-900);
  margin: 30px 0 -8px; padding-top: 22px;
  border-top: 1px solid var(--line-soft);
}
.f-heading:first-child { margin-top: 12px; padding-top: 0; border-top: 0; }

.f-note {
  grid-column: 1 / -1; margin: 14px 0 -6px;
  font-size: 13px; color: var(--ink-600);
  background: var(--info-bg); border-radius: var(--r); padding: 11px 13px;
}

.f-label {
  display: block; font-size: 13px; font-weight: 550;
  color: var(--ink-700); margin-bottom: 7px;
}
.req { color: var(--err); margin-left: 2px; }
.f-hint { margin: 7px 0 0; font-size: 12px; color: var(--ink-500); line-height: 1.45; }
.f-error { margin: 7px 0 0; font-size: 12px; font-weight: 500; color: var(--err); }

/* ---- inputs ---- */

input[type="text"], input[type="email"], input[type="tel"], input[type="date"],
input[type="number"], select, textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--field);
  color: var(--ink-900);
  font: inherit; font-size: 14px;
  padding: 11px 13px;
  transition: border-color .14s, background .14s, box-shadow .14s;
}
textarea { resize: vertical; min-height: 88px; line-height: 1.5; }

input::placeholder, textarea::placeholder { color: var(--ink-400); }

input:hover, select:hover, textarea:hover { border-color: #D3D7DE; }
input:focus, select:focus, textarea:focus {
  outline: none; background: var(--surface);
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px rgba(170,32,35,.12);
}

.field.has-error input, .field.has-error select, .field.has-error textarea,
.field.has-error .drop, .field.has-error .f-radios, .field.has-error .sig {
  border-color: var(--err); background: var(--err-bg);
}
.field.has-error input:focus, .field.has-error select:focus, .field.has-error textarea:focus {
  box-shadow: 0 0 0 3px rgba(196,43,43,.13);
}

select {
  appearance: none; padding-right: 36px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A8290' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 15px;
}

/* ---- input with a trailing unit, as in the reference ---- */

.with-suffix { position: relative; display: flex; align-items: stretch; }
.with-suffix input { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: 0; }
.with-suffix .suffix {
  flex: none; display: grid; place-items: center;
  min-width: 62px; padding: 0 12px;
  border: 1px solid var(--line); border-left: 1px solid var(--line);
  border-radius: 0 var(--r) var(--r) 0;
  background: var(--field-alt);
  font-size: 12.5px; font-weight: 600; color: var(--ink-600);
  letter-spacing: .02em;
}

/* ---- date with a clear link ---- */

.with-clear { display: flex; align-items: center; gap: 10px; }
.with-clear input { flex: 1; min-width: 0; }
.date-clear {
  flex: none; border: 0; background: none; padding: 0;
  font: inherit; font-size: 12.5px; font-weight: 550;
  color: var(--brand-600); cursor: pointer;
}
.date-clear:hover { text-decoration: underline; }

/* ---- radio & checkbox ---- */

.f-radios { display: flex; flex-wrap: wrap; gap: 20px; padding: 3px 0; }
.f-radio {
  display: inline-flex; align-items: center; gap: 9px;
  cursor: pointer; font-size: 14px; color: var(--ink-700);
}
.f-radio input {
  appearance: none; width: 19px; height: 19px; margin: 0; flex: none;
  border: 1.5px solid #C7CCD5; border-radius: 50%; background: var(--surface);
  cursor: pointer; position: relative;
  transition: border-color .14s;
}
.f-radio input:checked { border-color: var(--brand-600); border-width: 5.5px; }
.f-radio:hover input { border-color: var(--brand-500); }
.f-radio:has(input:checked) { color: var(--ink-900); font-weight: 500; }

.f-check {
  display: flex; align-items: flex-start; gap: 11px; cursor: pointer;
  font-size: 13.5px; line-height: 1.55; color: var(--ink-700);
}
.f-check input {
  appearance: none; width: 19px; height: 19px; margin: 1px 0 0; flex: none;
  border: 1.5px solid #C7CCD5; border-radius: 5px; background: var(--surface);
  cursor: pointer; position: relative; transition: all .14s;
}
.f-check input:checked { background: var(--brand-600); border-color: var(--brand-600); }
.f-check input:checked::after {
  content: ''; position: absolute; left: 5.5px; top: 2px;
  width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* ---- file drop ---- */

.drop {
  position: relative;
  border: 1.5px dashed #D5D9E0; border-radius: var(--r);
  background: var(--field);
  transition: border-color .14s, background .14s;
}
.drop:hover, .drop.is-over { border-color: var(--brand-500); background: var(--brand-50); }
.drop-input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }

.drop-idle { display: grid; place-items: center; gap: 2px; padding: 22px 14px; text-align: center; pointer-events: none; }
.drop-idle svg { width: 24px; height: 24px; color: var(--ink-400); margin-bottom: 5px; }
.drop-idle b { font-size: 13.5px; font-weight: 550; color: var(--ink-800); }
.drop-idle span { font-size: 12px; color: var(--ink-500); }

.drop-filled { display: flex; align-items: center; gap: 12px; padding: 12px; }
.drop-filled .thumb {
  width: 46px; height: 46px; flex: none; border-radius: 7px;
  background: var(--field-alt); overflow: hidden;
  display: grid; place-items: center;
  font-size: 9.5px; font-weight: 700; letter-spacing: .04em; color: var(--ink-500);
  border: 1px solid var(--line);
}
.drop-filled .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.drop-filled .meta { min-width: 0; flex: 1; }
.drop-filled .meta b { display: block; font-size: 13px; font-weight: 550; color: var(--ink-900);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drop-filled .meta span { font-size: 11.5px; color: var(--ink-500); }
.drop-clear {
  flex: none; width: 28px; height: 28px; border-radius: 7px;
  border: 1px solid var(--line); background: var(--surface);
  color: var(--ink-500); font-size: 17px; line-height: 1; cursor: pointer;
  position: relative; z-index: 2;
}
.drop-clear:hover { background: var(--err-bg); color: var(--err); border-color: var(--err); }

/* ---- signature ---- */

.sig { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--surface); }
.sig-tabs { display: flex; gap: 3px; padding: 4px; background: var(--field-alt); }
.sig-tab {
  flex: 1; border: 0; background: transparent; border-radius: 6px;
  font: inherit; font-size: 13px; font-weight: 500; color: var(--ink-600);
  padding: 8px; cursor: pointer; transition: all .14s;
}
.sig-tab.is-on { background: var(--surface); color: var(--ink-900); font-weight: 600;
  box-shadow: 0 1px 2px rgba(22,25,29,.08); }
.sig-pane { padding: 13px; }

.sig-canvas {
  width: 100%; height: 160px; display: block;
  border: 1px dashed #D5D9E0; border-radius: 7px; background: var(--field);
  touch-action: none; cursor: crosshair;
}
.sig-actions { display: flex; align-items: center; margin-top: 9px; }
.sig-hint { font-size: 12px; color: var(--ink-500); }
.sig-actions .btn { margin-left: auto; }

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

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font: inherit; font-size: 13.5px; font-weight: 550;
  border-radius: 8px; cursor: pointer; white-space: nowrap;
  padding: 10px 18px; border: 1px solid transparent;
  transition: background .14s, border-color .14s, color .14s, transform .06s;
}
.btn svg { width: 15px; height: 15px; flex: none; }
.btn:active { transform: translateY(.5px); }
.btn[disabled] { opacity: .55; pointer-events: none; }

.btn-primary { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }
.btn-primary:hover { background: var(--brand-700); border-color: var(--brand-700); }

.btn-soft { background: var(--brand-50); border-color: transparent; color: var(--brand-700); }
.btn-soft:hover { background: var(--brand-100); }

.btn-ghost { background: var(--surface); border-color: var(--line); color: var(--ink-700); }
.btn-ghost:hover { background: var(--field); }

.btn-lg { padding: 12px 24px; font-size: 14px; }

/* ---- step nav ---- */

.nav {
  display: flex; align-items: center; gap: 12px;
  margin-top: 30px; padding-top: 20px;
  border-top: 1px solid var(--line-soft);
}
.nav .spacer { flex: 1; }
.nav .count { font-size: 12.5px; color: var(--ink-500); }

/* --------------------------------------------------------------------------
   Right rail — widgets
   -------------------------------------------------------------------------- */

.rail {
  position: sticky; top: 64px;
  border-left: 1px solid var(--line);
  background: #FAFBFC;
  padding: 16px 16px 28px;
  min-height: calc(100vh - 64px);
}

.rail-tabs {
  display: flex; gap: 3px; padding: 3px;
  background: var(--field-alt); border-radius: 9px; margin-bottom: 14px;
}
.rail-tab {
  flex: 1; border: 0; background: transparent; border-radius: 7px;
  font: inherit; font-size: 12.5px; font-weight: 550; color: var(--ink-600);
  padding: 8px; cursor: pointer; transition: all .14s;
}
.rail-tab.is-on { background: var(--surface); color: var(--ink-900); font-weight: 600;
  box-shadow: 0 1px 2px rgba(22,25,29,.09); }

.widget {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 15px;
  margin-bottom: 12px;
}
.widget-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.widget-head h3 { font-size: 14px; font-weight: 620; }

.pill {
  font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 5px;
}
.pill.warn { background: var(--warn-bg); color: var(--warn); }
.pill.ok   { background: var(--ok-bg);   color: var(--ok); }

/* progress ring */
.ring-wrap { display: grid; place-items: center; padding: 6px 0 12px; }
.ring { position: relative; width: 116px; height: 116px; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring .track { fill: none; stroke: var(--field-alt); stroke-width: 11; }
.ring .bar {
  fill: none; stroke: var(--brand-600); stroke-width: 11; stroke-linecap: round;
  /* The stroke colour is set from script and walks crimson -> green, so it
     animates alongside the arc rather than snapping between bands. */
  transition: stroke-dashoffset .5s cubic-bezier(.4,0,.2,1), stroke .5s ease;
}
.ring .pct { transition: color .4s ease; }
.ring .pct {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 23px; font-weight: 680; letter-spacing: -.02em; color: var(--ink-900);
}

.rail-meta { border-top: 1px solid var(--line-soft); padding-top: 12px; }
.rail-meta .k {
  font-size: 10.5px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-500); margin-bottom: 3px;
}
.rail-meta .v { font-size: 14px; font-weight: 580; color: var(--ink-900); }
.rail-meta .s { font-size: 12.5px; color: var(--ink-500); margin-top: 1px; overflow-wrap: anywhere; }

.widget p.body { margin: 0; font-size: 13px; line-height: 1.6; color: var(--ink-600); }
.widget .more {
  border: 0; background: none; padding: 0; margin-top: 9px;
  font: inherit; font-size: 12px; font-weight: 650; letter-spacing: .04em;
  text-transform: uppercase; color: var(--brand-600); cursor: pointer;
}
.widget .more:hover { text-decoration: underline; }
.clamped { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* documents checklist */
.docs { list-style: none; margin: 0; padding: 0; }
.docs li {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 9px 0; border-bottom: 1px solid var(--line-soft);
  font-size: 13px; color: var(--ink-600);
}
.docs li:last-child { border-bottom: 0; }
.docs .box {
  width: 18px; height: 18px; flex: none; margin-top: 1px;
  border: 1.5px solid #D5D9E0; border-radius: 5px; background: var(--surface);
  display: grid; place-items: center;
}
.docs .box svg { width: 11px; height: 11px; color: #fff; opacity: 0; }
.docs li.done { color: var(--ink-900); }
.docs li.done .box { background: var(--ok); border-color: var(--ok); }
.docs li.done .box svg { opacity: 1; }

.rail-foot { font-size: 11.5px; color: var(--ink-500); line-height: 1.55; padding: 4px 2px; }

/* --------------------------------------------------------------------------
   Mobile progress strip — the widget rail has no room on a phone, so this
   carries the same information and opens the rail as a sheet.
   -------------------------------------------------------------------------- */

.m-status { display: none; }
.rail-close { display: none; }

@media (max-width: 1180px) {
  .m-status {
    display: block; width: 100%;
    border: 0; border-bottom: 1px solid var(--line);
    background: var(--surface); padding: 0; cursor: pointer;
    font: inherit; text-align: left;
    position: sticky; top: 64px; z-index: 25;
  }
  .m-bar { display: block; height: 3px; background: var(--field-alt); }
  .m-bar span {
    display: block; height: 100%; width: 0;
    background: var(--brand-600);
    transition: width .4s cubic-bezier(.4,0,.2,1), background .4s ease;
  }
  .m-row {
    display: flex; align-items: center; gap: 9px;
    padding: 11px 16px; min-height: 46px;
  }
  .m-row b { font-size: 14px; font-weight: 680; color: var(--ink-900); flex: none; }
  .m-row > span:not(.m-docs) {
    font-size: 13px; color: var(--ink-600);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .m-docs {
    margin-left: auto; flex: none;
    font-size: 11.5px; font-weight: 600;
    background: var(--field-alt); color: var(--ink-600);
    padding: 4px 9px; border-radius: 999px;
  }
  .m-docs.done { background: var(--ok-bg); color: var(--ok); }
  .m-row svg { width: 16px; height: 16px; flex: none; color: var(--ink-400); }

  /* The rail becomes a bottom sheet. */
  .rail {
    display: block;
    position: fixed; left: 0; right: 0; bottom: 0; top: auto;
    z-index: 70; min-height: 0; max-height: 82vh; overflow-y: auto;
    border-left: 0; border-top: 1px solid var(--line);
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    background: #FAFBFC;
    box-shadow: var(--sh-pop);
    padding: 18px 16px calc(22px + env(safe-area-inset-bottom));
    transform: translateY(101%);
    transition: transform .28s cubic-bezier(.2,.8,.3,1);
    visibility: hidden;
  }
  body.rail-open .rail { transform: none; visibility: visible; }
  body.rail-open { overflow: hidden; }

  body.rail-open::after {
    content: ''; position: fixed; inset: 0; z-index: 69;
    background: rgba(22,25,29,.45);
  }

  .rail-close {
    display: grid; place-items: center;
    position: absolute; top: 12px; right: 12px;
    width: 34px; height: 34px; border-radius: 8px;
    border: 1px solid var(--line); background: var(--surface);
    color: var(--ink-600); cursor: pointer; z-index: 2;
  }
  .rail-close svg { width: 16px; height: 16px; }
}

/* --------------------------------------------------------------------------
   Sheets
   -------------------------------------------------------------------------- */

.sheet {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(22,25,29,.5);
  display: grid; place-items: center; padding: 20px;
  animation: fade .16s ease;
}
@keyframes fade { from { opacity: 0 } }

.sheet-card {
  background: var(--surface); border-radius: var(--r-lg);
  box-shadow: var(--sh-pop); padding: 24px;
  width: 100%; max-width: 430px;
  animation: rise .22s cubic-bezier(.2,.8,.3,1);
}
@keyframes rise { from { transform: translateY(10px); opacity: 0 } }
.sheet-card.center { text-align: center; }
.sheet-card h3 { font-size: 18px; margin-bottom: 6px; }
.sheet-card p { margin: 0 0 14px; font-size: 13.5px; color: var(--ink-600); }
.sheet-card .tiny { color: var(--ink-500); }
.sheet-card .btn-ghost { width: 100%; margin-top: 8px; }

.linkrow { display: flex; gap: 8px; margin-bottom: 12px; }
.linkrow input { flex: 1; min-width: 0; font-size: 12.5px; }

/* The submitted moment.
   A seal being applied, in the brand's own mark. The stamp comes down out of
   focus and lands with weight, its shadow drawing in tight underneath; the
   impact is what snaps the clamp's two jaws shut on the body; a crimson rim
   then sweeps round from twelve o'clock, one soft halo rides outward, and a
   green approval dot lands on the corner. The words follow underneath in
   reading order.

   The clamp is three detached pieces in iron-mark.png - jaw, body, jaw, with
   transparent gaps between them - so the file is drawn three times and each
   copy clipped to one piece along the gaps already there. Nothing is traced,
   so the mark stays exactly the mark.

   Vector and one 5KB PNG you already ship, rather than a rendered clip: sharp
   at any density, no extra download at the moment the applicant is waiting on
   the network, and it can be switched off for anyone who asks for less motion.
   No confetti: what happens next is a compliance review, so the register is
   "received and recorded", not "you won". */
.seal {
  position: relative;
  width: 76px; height: 76px; margin: 0 auto 18px;
}

/* The stamp. Blur and shadow do the depth: it arrives out of focus and too
   large, with its shadow thrown wide, and lands sharp with the shadow pulled
   in underneath it. */
.seal-disc {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: var(--field); border: 1px solid var(--line);
  color: var(--brand-600);
  animation: seal-press .46s cubic-bezier(.2,.9,.28,1) .08s both;
}
@keyframes seal-press {
  from {
    opacity: 0; transform: scale(1.34); filter: blur(2.6px);
    box-shadow: 0 20px 34px rgba(22,25,29,.30);
  }
  to {
    opacity: 1; transform: scale(1); filter: blur(0);
    box-shadow: 0 3px 9px rgba(22,25,29,.10);
  }
}

.seal-ring {
  position: absolute; inset: 0; width: 100%; height: 100%;
  /* 2 * PI * 35.4 */
  stroke-dasharray: 222.4; stroke-dashoffset: 222.4;
  animation: seal-sweep .52s cubic-bezier(.65,0,.35,1) .40s forwards;
}
@keyframes seal-sweep { to { stroke-dashoffset: 0; } }

/* Box matches the PNG's 203x256 so the clip percentages land on the real
   gaps rather than on letterboxing. */
.seal-mark {
  position: absolute; left: 50%; top: 50%;
  width: 27px; height: 34px; transform: translate(-50%, -50%);
}
.mk { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.mk-top  { clip-path: inset(0 0 85% 0);      animation: jaw-shut .34s cubic-bezier(.34,1.5,.64,1) .30s both; }
.mk-body { clip-path: inset(15% 0 17.4% 0);  animation: mark-in  .30s ease-out .16s both; }
.mk-btm  { clip-path: inset(82.6% 0 0 0);    animation: jaw-shut .34s cubic-bezier(.34,1.5,.64,1) .30s both; }

/* Both jaws use one keyframe set; the bottom one is flipped so "out" is down
   for it and up for the top, which keeps them exactly in step. */
.mk-btm  { --out: 150%; }
.mk-top  { --out: -150%; }
@keyframes jaw-shut {
  from { opacity: 0; transform: translateY(var(--out)); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes mark-in { from { opacity: 0; } to { opacity: 1; } }

.seal-halo {
  position: absolute; inset: 0; border-radius: 50%;
  background: var(--brand-600); opacity: 0;
  animation: seal-halo .78s ease-out .44s;
}
@keyframes seal-halo {
  from { transform: scale(.92); opacity: .22; }
  to   { transform: scale(1.95); opacity: 0; }
}

/* The green is kept to this one dot. People scan a confirmation for a tick,
   so it has to be here, but the seal itself stays in the brand's grey and
   crimson rather than turning the whole mark green. */
.seal-check {
  position: absolute; right: -3px; bottom: -3px;
  width: 27px; height: 27px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--ok); color: #fff;
  box-shadow: 0 0 0 3px var(--surface), 0 2px 5px rgba(22,25,29,.18);
  animation: check-pop .38s cubic-bezier(.34,1.6,.64,1) .70s both;
}
.seal-check svg { width: 15px; height: 15px; }
@keyframes check-pop {
  from { opacity: 0; transform: scale(.2); }
  to   { opacity: 1; transform: scale(1); }
}

/* The words land after the mark, in reading order, so the eye is led rather
   than asked to take in a whole card at once. */
@keyframes lift {
  from { opacity: 0; transform: translateY(9px); }
  to   { opacity: 1; transform: none; }
}
.sheet-card.center > h3     { animation: lift .34s ease-out .52s both; }
.sheet-card.center > p      { animation: lift .34s ease-out .60s both; }
.sheet-card.center > .refbox{ animation: lift .38s ease-out .68s both; }
.sheet-card.center > .tiny  { animation: lift .34s ease-out .78s both; }

/* Confetti. Asked for explicitly, so it is here, but kept to the brand's own
   colours, to one short burst thrown from the seal rather than a shower from
   the top of the screen, and to paper-like strips rather than cartoon dots.
   It is one canvas with ~64 pieces that removes itself when the burst is over,
   not sixty DOM nodes, and it never takes pointer events. */
.confetti {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none; z-index: 2;
}

/* Actions under the reference. */
.done-acts { margin-top: 18px; display: flex; gap: 10px; }
.done-acts .btn { flex: 1; gap: 8px; min-height: 46px; }
.done-acts .btn svg { width: 16px; height: 16px; }

/* ----------------------------------------------------------------------
   Evidence of submission — a screen-hidden block laid out for paper.
   ---------------------------------------------------------------------- */
#receipt {
  color: #16191D; background: #fff;
  font-size: 12px; line-height: 1.55;
}

/* Reading it on screen before committing it to paper. The receipt itself does
   not move in the DOM - a scrim goes behind it and a toolbar above it, and the
   three are siblings - so the print rule keeps working from in here. */
body.viewing-receipt { overflow: hidden; }

.rc-scrim {
  position: fixed; inset: 0; z-index: 95;
  background: rgba(22,25,29,.55);
  animation: fade .16s ease;
}
.rc-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 97;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 16px;
  background: var(--surface); border-bottom: 1px solid var(--line);
}
.rc-bar > b { font-size: 14px; font-weight: 650; }
.rc-bar-acts { display: flex; gap: 8px; }
.rc-bar .btn { min-height: 40px; gap: 7px; }
.rc-bar .btn svg { width: 15px; height: 15px; }

body.viewing-receipt #receipt {
  position: fixed; z-index: 96;
  top: 72px; left: 50%; transform: translateX(-50%);
  width: min(760px, calc(100% - 28px));
  max-height: calc(100vh - 92px); overflow: auto;
  padding: 36px 40px;
  /* A touch larger than the paper size, which is set for density not screens. */
  font-size: 13px;
  border-radius: 10px;
  box-shadow: 0 20px 54px rgba(22,25,29,.34);
  animation: rise .22s cubic-bezier(.2,.8,.3,1);
}
.rc-head {
  display: flex; align-items: center; gap: 16px;
  padding-bottom: 14px; margin-bottom: 20px;
  border-bottom: 2px solid var(--brand-600);
}
.rc-head img { width: 46px; height: auto; }
.rc-head h1 { font-size: 19px; font-weight: 680; margin: 0; letter-spacing: -.01em; }
.rc-head p  { margin: 2px 0 0; font-size: 12px; color: #55606F; }

.rc-keys { width: 100%; border-collapse: collapse; margin-bottom: 22px; }
.rc-keys th {
  text-align: left; font-weight: 600; color: #55606F;
  width: 150px; padding: 6px 12px 6px 0; vertical-align: top;
  border-bottom: 1px solid #E3E6EB;
}
.rc-keys td { padding: 6px 0; border-bottom: 1px solid #E3E6EB; }
.rc-keys b  { font-size: 15px; letter-spacing: .02em; color: var(--brand-600); }

#receipt h2 {
  font-size: 12px; font-weight: 680; text-transform: uppercase;
  letter-spacing: .08em; color: #55606F;
  margin: 0 0 8px;
}
#receipt > p { margin: 0 0 20px; max-width: 46em; }

.rc-docs { list-style: none; margin: 0 0 22px; padding: 0; }
.rc-docs li { padding: 5px 0 5px 20px; position: relative; border-bottom: 1px solid #EDEFF3; }
.rc-docs li::before {
  content: '\2713'; position: absolute; left: 0; top: 5px;
  color: var(--ok); font-weight: 700;
}

.rc-note {
  font-size: 10.5px; line-height: 1.5; color: #55606F;
  border-top: 1px solid #E3E6EB; padding-top: 12px; margin-top: 4px;
}

.refbox {
  background: var(--field); border: 1px solid var(--line);
  border-radius: var(--r); padding: 13px; margin: 16px 0 10px;
}
.refbox span {
  display: block; font-size: 10.5px; font-weight: 650; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-500); margin-bottom: 3px;
}
.refbox b { font-size: 19px; font-weight: 660; letter-spacing: .02em; color: var(--brand-600); }

.notice { padding: 40px 28px; text-align: center; }
.notice h2 { font-size: 18px; margin-bottom: 8px; }
.notice p { margin: 0; color: var(--ink-600); }

.decoy { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1180px) {
  /* The rail leaves the grid here; the block above re-homes it as a sheet, so
     it must not be display:none or the sheet can never open. */
  .app-body { grid-template-columns: 200px minmax(0, 1fr); }
}

@media (max-width: 860px) {
  .app { margin: 0; border-radius: 0; border-left: 0; border-right: 0; border-top: 0; }
  .app-body { grid-template-columns: 1fr; }

  /* iOS Safari zooms the page whenever a focused field is under 16px. The
     form is unusable once that happens, so every control goes to 16px. */
  input[type="text"], input[type="email"], input[type="tel"], input[type="date"],
  input[type="number"], select, textarea {
    font-size: 16px; padding: 13px 14px;
  }

  /* Comfortable touch targets. */
  .f-radio { padding: 11px 0; gap: 12px; min-height: 46px; }
  .f-radio input { width: 24px; height: 24px; }
  .f-radio input:checked { border-width: 7px; }
  .f-check { padding: 8px 0; min-height: 44px; align-items: center; }
  .f-check input { width: 24px; height: 24px; margin: 0; }
  .f-check input:checked::after { left: 7.5px; top: 3.5px; width: 6px; height: 11px; }
  .head-close { width: 42px; height: 42px; }
  .date-clear { padding: 12px 6px; }
  .drop-clear { width: 38px; height: 38px; font-size: 20px; }
  .sig-tab, .rail-tab { padding: 12px 8px; }
  .sig-canvas { height: 190px; }

  /* Every step on screen at once. Seven scrolling pills meant you could only
     ever see two of them; numbered dots fit the lot, and the name of the step
     you are on is spelled out in the progress strip directly beneath. */
  .steps {
    position: static; min-height: 0;
    border-right: 0; border-bottom: 1px solid var(--line);
    padding: 10px 12px 12px;
    display: flex; align-items: flex-start; gap: 0;
    overflow: visible;
  }
  .steps-label { display: none; }

  .step {
    flex: 1 1 0; min-width: 0; width: auto; margin: 0;
    flex-direction: column; gap: 0;
    padding: 4px 0; min-height: 44px;
    background: none; position: relative;
  }
  .step .txt { display: none; }

  .done-acts { flex-direction: column; }
  .rc-bar { padding: 9px 12px; }
  .rc-bar > b { font-size: 13px; }
  body.viewing-receipt #receipt {
    top: 76px; width: calc(100% - 20px);
    max-height: calc(100vh - 92px);
    padding: 22px 20px; font-size: 12.5px;
  }
  .rc-keys th { width: 108px; }

  /* the rail between the dots */
  .step::before {
    content: ''; position: absolute; top: 19px; right: 50%;
    width: 100%; height: 2px; background: var(--line);
  }
  .step:first-of-type::before { display: none; }
  .step.is-done::before, .step.is-on::before { background: var(--ok); }

  .step .bullet {
    position: relative; z-index: 1;
    width: 30px; height: 30px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--surface); border: 1.5px solid var(--line);
    box-shadow: none;
    font-size: 12px; font-weight: 650; color: var(--ink-500);
  }
  .step .bullet::after { content: attr(data-n); }

  .step.is-on { background: none; }
  .step.is-on .bullet {
    background: var(--brand-600); border-color: var(--brand-600); color: #fff;
    box-shadow: 0 0 0 3px var(--brand-100);
  }
  .step.is-done .bullet { background: var(--ok); border-color: var(--ok); color: #fff; }
  .step.is-done .bullet::after { content: '\2713'; font-size: 14px; }

  .main { padding: 20px 16px 28px; }
  .grid { grid-template-columns: 1fr; gap: 0; }
  .field.half { grid-column: 1 / -1; }

  .nav {
    position: sticky; bottom: 0; z-index: 20;
    background: var(--surface); margin: 24px -16px 0;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
  }
  .nav .count { display: none; }
  .btn { padding: 12px 18px; }

  .m-status { top: 58px; }
  .head-titles span { display: none; }
  .head-titles h1 {
    font-size: 14.5px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .head-brand { min-width: 0; flex: 1; }
  .app-head { padding: 0 10px; gap: 8px; height: 58px; }
  .head-actions { gap: 7px; }
}

@media (max-width: 420px) {
  .head-actions .btn { padding: 10px 13px; font-size: 13px; }
}

/* A phone held sideways has very little height. The header, progress strip
   and step buttons together were taking about half of it, so the strip stands
   down — progress is still one tap away in the sheet. */
@media (max-height: 460px) and (orientation: landscape) {
  .m-status { display: none; }
  .app-head { height: 50px; position: static; }
  .steps { padding: 8px 12px; }
  .step { padding: 8px 12px; min-height: 38px; }
  .nav { position: static; }
  .main { padding: 14px 16px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }

  /* Turning the animation off must not turn the content off with it: the seal,
     its rim, the clamp's jaws, the approval dot and every line below them only
     reach their final state at the end of one. */
  .seal-ring { stroke-dashoffset: 0 !important; }
  .seal-halo { display: none; }
  .seal-disc, .mk, .seal-check,
  .sheet-card.center > * { opacity: 1 !important; transform: none !important; }
  .seal-disc { filter: none !important; box-shadow: 0 3px 9px rgba(22,25,29,.10) !important; }
  .seal-mark { transform: translate(-50%, -50%) !important; }
  .confetti { display: none; }
}

@media print {
  .steps, .rail, .nav, .app-head { display: none !important; }
  .app { box-shadow: none; border: 0; margin: 0; }
  .confetti { display: none !important; }

  /* Set by the Print evidence button, cleared again afterwards. Without it,
     Ctrl+P still prints the application itself, as before. */
  body.printing-receipt > *:not(#receipt) { display: none !important; }
  /* Printing can start from inside the viewer, so every screen-only rule the
     viewer applied has to be undone here or the page prints as a floating,
     clipped, shadowed card. */
  body.printing-receipt #receipt {
    display: block !important;
    position: static !important; transform: none !important;
    width: auto !important; max-height: none !important; overflow: visible !important;
    font-size: 12px !important;
    padding: 0 !important; margin: 0 !important;
    border-radius: 0 !important; box-shadow: none !important;
    animation: none !important;
  }
  @page { margin: 16mm; }
}