/* ==========================================================================
   My First Bicycle – application styles
   ========================================================================== */
:root {
  --bg-1: #f6f9ff;
  --bg-2: #e2ecfe;
  --brand: #466bb6;
  --brand-dark: #35508a;
  --ink: #1f1f1f;
  --ink-soft: #6c6c6c;
  --muted: #757575;
  --line: #e6e6e6;
  --card: #ffffff;
  --focus: #466bb6;
  --ok: #16a34a;
  --ok-bg: #e9f9ef;
  --err: #dc2626;
  --err-bg: #fdecec;
  --warn: #d97706;
  --radius: 14px;
  --shadow: 0 10px 30px rgba(31, 31, 31, .08), 0 2px 6px rgba(31, 31, 31, .05);
  --font: "Quicksand", "Segoe UI", system-ui, -apple-system, sans-serif;
  /* milestone colours */
  --m0: #466bb6; --m1: #537fd9; --m2: #ef6b51; --m3: #4f8a7d; --m4: #8aa0cf; --m5: #35508a;
  --espresso: #35508a; --espresso-2: #466bb6; --cream: #f6f9ff;
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: var(--font);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.5;
  background: linear-gradient(160deg, var(--bg-1) 0%, var(--bg-2) 100%) fixed;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--focus); }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Decorative bicycle wheels in the background */
.bg-decor { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.wheel {
  position: absolute; border-radius: 50%;
  border: 26px solid rgba(255, 255, 255, .55);
  box-shadow: inset 0 0 0 14px rgba(255, 255, 255, .25);
  background: repeating-conic-gradient(rgba(255,255,255,.35) 0 1.2deg, transparent 1.2deg 22.5deg);
  animation: spin 120s linear infinite;
}
.wheel.w1 { width: 760px; height: 760px; left: -380px; top: 80px; }
.wheel.w2 { width: 980px; height: 980px; right: -420px; bottom: -560px; animation-direction: reverse; }
.wheel.w3 { width: 520px; height: 520px; right: -160px; top: -240px; animation-duration: 90s; }
@keyframes spin { to { transform: rotate(360deg); } }
.stripes {
  position: absolute; display: none; border-radius: 50%;
  background: repeating-linear-gradient(180deg, var(--sc) 0 18px, transparent 18px 34px);
  animation: drift 18s ease-in-out infinite alternate;
}
.stripes.s1 { --sc: rgba(120, 160, 230, .30); width: 560px; height: 560px; left: -300px; top: 120px; }
.stripes.s2 { --sc: rgba(155, 190, 245, .32); width: 520px; height: 520px; left: -110px; top: 260px; animation-delay: -6s; }
.stripes.s3 { --sc: rgba(120, 160, 230, .22); width: 760px; height: 760px; right: -380px; bottom: -380px; animation-delay: -3s; }
.stripes.s4 { --sc: rgba(155, 190, 245, .26); width: 420px; height: 420px; right: -150px; top: -170px; animation-delay: -9s; }
body.admin-mode .wheel { display: none; }
body.admin-mode .stripes { display: block; }
@keyframes drift { to { transform: translateY(24px); } }

/* Top bar */
/* Light header that merges into the page, like myfirstbicycle.ca. It is sticky, so it keeps a near-opaque tint
   of the page colour (and a hairline) to stay legible over content that scrolls underneath. */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 18px;
  padding: 12px 28px;
  background: rgba(246, 249, 255, .94);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 1px 0 rgba(70, 107, 182, .12);
}
/* logo.png is transparent, so it sits directly on the page with no box around it. */
.brand { display: flex; align-items: center; text-decoration: none; border-radius: 8px; }
.brand:focus-visible { outline: 3px solid rgba(70, 107, 182, .35); outline-offset: 4px; }
.brand-logo { display: block; height: 60px; width: auto; }
.topbar-title { margin: 0; font-family: var(--serif); font-size: 24px; font-weight: 500; color: var(--ink); letter-spacing: .4px; flex: 1; }
.topbar-user { display: flex; align-items: center; gap: 14px; color: var(--ink-soft); font-weight: 600; }
/* Admin view switch: one segmented control instead of two heavy buttons */
.top-switch { display: inline-flex; padding: 4px; border-radius: 999px; background: #e2ecfe; border: 1px solid #d3e2fe; }
.top-switch a { display: inline-flex; align-items: center; gap: 7px; padding: 8px 16px; border-radius: 999px; font-size: 14px; font-weight: 700;
  color: var(--brand-dark); text-decoration: none; transition: background .18s, color .18s, box-shadow .18s; }
.top-switch a:hover:not(.on) { background: rgba(255,255,255,.6); }
.top-switch a.on { background: linear-gradient(135deg, var(--brand), var(--brand-dark)); color: #fff; box-shadow: 0 6px 14px rgba(70,107,182,.32); }
.top-switch a:focus-visible { outline: 3px solid rgba(70,107,182,.35); outline-offset: 2px; }
/* Signed-in user: avatar, name and role, sign-out in one capsule */
.user-chip { display: flex; align-items: center; gap: 10px; padding: 4px 4px 4px 4px; border-radius: 999px; background: #fff; border: 1px solid #d3e2fe; box-shadow: 0 2px 10px rgba(70,107,182,.08); }
.user-chip .name { display: flex; flex-direction: column; line-height: 1.2; padding-right: 4px; }
.user-chip .name b { font-size: 13.5px; color: var(--ink); }
.user-chip .name small { font-size: 11.5px; color: var(--ink-soft); font-weight: 600; }
.uc-out { width: 36px; height: 36px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer;
  background: #f1f5fd; color: var(--brand-dark); transition: background .18s, color .18s; }
.uc-out:hover { background: var(--err-bg); color: var(--err); }
.uc-out:focus-visible { outline: 3px solid rgba(70,107,182,.35); outline-offset: 2px; }
.avatar {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 36px;
  background: linear-gradient(135deg, var(--brand), var(--brand-dark)); color: #fff; font-weight: 700;
}

main { position: relative; z-index: 1; padding: 26px 22px 120px; max-width: 1280px; margin: 0 auto; outline: none; }

/* Cards & typography */
.card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); }
.muted { color: var(--ink-soft); }
.small { font-size: 13px; }
h2 { font-family: var(--serif); font-size: 30px; font-weight: 600; margin: 0 0 6px; letter-spacing: .2px; }
h3 { font-size: 17px; margin: 0 0 4px; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 22px; border-radius: 999px; border: 2px solid transparent;
  font-weight: 700; letter-spacing: .4px; cursor: pointer; text-decoration: none;
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease, border-color .2s;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn:focus-visible { outline: 3px solid rgba(70, 107, 182,.35); outline-offset: 2px; }
.btn-primary { background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%); color: #fff; box-shadow: 0 6px 16px rgba(70,107,182,.30); }
.btn-primary:hover { box-shadow: 0 8px 22px rgba(70,107,182,.42); }
.btn-success { background: linear-gradient(135deg, #22c55e, #16a34a); color: #fff; box-shadow: 0 6px 16px rgba(22,163,74,.35); }
.btn-outline { background: #fff; border-color: var(--brand); color: var(--brand-dark); }
.btn-outline:hover { background: #f6f9ff; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { background: #fff; }
.btn-link { background: none; border: none; color: var(--focus); padding: 4px 6px; font-weight: 600; cursor: pointer; }
.btn-light { background: var(--brand); color: #fff; border-color: transparent; padding: 8px 18px; }
.btn-light:hover { background: #537fd9; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.btn .spinner { width: 16px; height: 16px; border-width: 2px; }

.spinner {
  width: 22px; height: 22px; border-radius: 50%;
  border: 3px solid rgba(0,0,0,.12); border-top-color: currentColor;
  animation: spin .8s linear infinite; display: inline-block;
}

/* ---------------- Landing / auth ---------------- */
/* Light-blue hero with the striped disc motif; the bicycle illustration sits on a glowing card */
.hero {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center;
  padding: 52px 56px; margin-bottom: 22px; border-radius: 28px;
  background: radial-gradient(90% 120% at 100% 0%, #d3e2fe 0%, rgba(211,226,254,0) 60%),
              linear-gradient(135deg, #ffffff 0%, #f1f6ff 50%, #e2ecfe 100%);
  border: 1px solid #d3e2fe; color: var(--ink);
  box-shadow: 0 24px 60px rgba(70,107,182,.16), 0 2px 6px rgba(70,107,182,.06);
}
.hero > * { position: relative; z-index: 1; }
.hero-stripes { position: absolute !important; z-index: 0 !important; border-radius: 50%; pointer-events: none;
  background: repeating-linear-gradient(180deg, var(--sc) 0 14px, transparent 14px 28px); animation: drift 16s ease-in-out infinite alternate; }
.hero-stripes.s1 { --sc: rgba(83,127,217,.16); width: 420px; height: 420px; left: -230px; bottom: -200px; }
.hero-stripes.s2 { --sc: rgba(155,190,245,.30); width: 360px; height: 360px; right: -140px; top: -170px; animation-delay: -7s; }
.hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; margin-bottom: 18px; border-radius: 999px;
  background: #fff; border: 1px solid #d3e2fe; color: var(--brand-dark); font-size: 13px; font-weight: 700; box-shadow: 0 4px 12px rgba(70,107,182,.10); }
.hero-eyebrow i { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px rgba(22,163,74,.18); animation: pulse-dot 2s ease-in-out infinite; }
@keyframes pulse-dot { 50% { box-shadow: 0 0 0 7px rgba(22,163,74,0); } }
.hero h2 { font-size: 56px; font-weight: 600; line-height: 1.05; color: var(--brand-dark); margin-bottom: 14px; }
.hero h2 em { font-style: italic; background: linear-gradient(90deg, #ff914c, #ef6b51); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero p { font-size: 17px; color: var(--ink-soft); max-width: 540px; margin: 0; }
.hero-actions { display: flex; gap: 12px; margin-top: 26px; flex-wrap: wrap; }
.hero .btn { padding: 13px 24px; }
.hero .btn-primary:hover { transform: translateY(-1px); }
.hero .btn-outline { background: rgba(255,255,255,.8); border-color: #c9d9f7; color: var(--brand-dark); }
.hero .btn-outline:hover { background: #fff; border-color: var(--brand); }
.hero-points { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 0; margin: 24px 0 0; font-size: 13.5px; font-weight: 600; color: var(--ink-soft); }
.hero-points li { display: inline-flex; align-items: center; gap: 7px; }
.hero-points svg { flex: 0 0 auto; width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: #e2ecfe; color: var(--brand); }
.hero-art-wrap { position: relative; }
.hero-art-wrap::before { content: ""; position: absolute; inset: 8% 6%; border-radius: 50%; background: radial-gradient(circle, rgba(255,145,76,.22), transparent 70%); filter: blur(20px); }
.hero-art { position: relative; padding: 30px; display: grid; place-items: center; border-radius: 24px; background: #fff; border: 1px solid #e3ecfd;
  box-shadow: 0 18px 40px rgba(70,107,182,.14); }
.hero-art svg { width: 100%; max-width: 420px; }
.hero-art .spin-wheel { transform-box: fill-box; transform-origin: center; animation: spin 2.4s linear infinite; }
.hero-float { position: absolute; display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; background: #fff;
  font-size: 13px; font-weight: 700; color: var(--ink); box-shadow: 0 10px 26px rgba(70,107,182,.20); animation: float 5s ease-in-out infinite; }
.hero-float svg { color: #fff; width: 20px; height: 20px; padding: 3px; border-radius: 50%; }
.hero-float.f1 { left: -18px; top: 18px; } .hero-float.f1 svg { background: var(--ok); }
.hero-float.f2 { right: -14px; bottom: 22px; animation-delay: -2.5s; } .hero-float.f2 svg { background: #ff914c; }
@keyframes float { 50% { transform: translateY(-8px); } }
/* Logo-style landing bicycle: spinning wheels, pedalling leg, gentle bob, speed lines */
.mfb-ride { overflow: visible; }
.mfb-ride .wheel-spin { transform-box: fill-box; transform-origin: center; animation: spin 1.4s linear infinite; }
.mfb-ride .rider { animation: ride-bob .7s ease-in-out infinite; }
.mfb-ride .leg { transform-box: view-box; transform-origin: 158px 146px; animation: ride-pedal .7s ease-in-out infinite; }
.mfb-ride .ride-speed path { animation: ride-speed 1s ease-in-out infinite; }
.mfb-ride .ride-speed path:nth-child(2) { animation-delay: .18s; }
.mfb-ride .ride-speed path:nth-child(3) { animation-delay: .36s; }
.mfb-ride .ride-shadow { transform-box: fill-box; transform-origin: center; animation: ride-shadow .7s ease-in-out infinite; }
@keyframes ride-bob { 50% { transform: translateY(-3px); } }
@keyframes ride-pedal { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
@keyframes ride-speed { 0%, 100% { opacity: .15; transform: translateX(10px); } 50% { opacity: 1; transform: translateX(0); } }
@keyframes ride-shadow { 50% { transform: scaleX(.96); } }
/* How it works */
.steps-strip { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 22px; }
.step { position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 18px; border-radius: 18px;
  background: rgba(255,255,255,.75); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid #dfe9fc; }
.step b { display: block; font-size: 15px; margin-bottom: 2px; }
.step p { margin: 0; font-size: 13px; color: var(--ink-soft); }
.step-ic { flex: 0 0 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--brand), var(--brand-dark)); box-shadow: 0 6px 14px rgba(70,107,182,.28); }
.step-n { position: absolute; top: 12px; right: 14px; font-family: var(--serif); font-size: 30px; font-weight: 700; line-height: 1; color: #d3e2fe; }
.step:last-child .step-ic { background: linear-gradient(135deg, #ff914c, #ef6b51); box-shadow: 0 6px 14px rgba(239,107,81,.3); }
/* Info cards */
.info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 10px; }
.info-card { position: relative; overflow: hidden; padding: 24px; border: 1px solid #e3ecfd; transition: transform .2s, box-shadow .2s; }
.info-card::after { content: ""; position: absolute; right: -50px; top: -50px; width: 130px; height: 130px; border-radius: 50%; pointer-events: none;
  background: repeating-linear-gradient(180deg, color-mix(in srgb, var(--c) 14%, transparent) 0 8px, transparent 8px 16px); }
.info-card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(70,107,182,.16); }
.info-card .ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 14%, white); color: var(--c); margin-bottom: 14px; }
.info-card h3 { font-size: 17px; margin-bottom: 6px; }
.info-card p { margin: 0; line-height: 1.6; }

.auth-wrap { display: grid; place-items: center; padding: 20px 0; }
/* Two-panel card: light-blue brand panel with the striped motif, form on the right */
.auth-shell { width: 100%; max-width: 980px; display: grid; grid-template-columns: 360px minmax(0, 1fr); overflow: hidden;
  border-radius: 26px; border: 1px solid #dfe9fc; box-shadow: 0 24px 60px rgba(70,107,182,.16), 0 2px 6px rgba(70,107,182,.06); animation: fadeUp .35s ease; }
.auth-aside { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 26px; padding: 36px 32px;
  background: linear-gradient(160deg, #466bb6 0%, #35508a 70%, #2c4475 100%); color: #fff; }
.auth-aside > :not(.aa-stripes) { position: relative; z-index: 1; }
.aa-stripes { position: absolute; border-radius: 50%; pointer-events: none; background: repeating-linear-gradient(180deg, var(--sc) 0 12px, transparent 12px 24px); animation: drift 16s ease-in-out infinite alternate; }
.aa-stripes.s1 { --sc: rgba(155,190,245,.20); width: 320px; height: 320px; left: -150px; bottom: -120px; }
.aa-stripes.s2 { --sc: rgba(211,226,254,.14); width: 220px; height: 220px; right: -90px; top: -80px; animation-delay: -8s; }
.aa-badge { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; margin-bottom: 14px;
  background: linear-gradient(135deg, #ff914c, #ef6b51); box-shadow: 0 10px 24px rgba(239,107,81,.4); }
.aa-top h3 { font-family: var(--serif); font-size: 28px; font-weight: 600; margin: 0 0 4px; }
.aa-top p { margin: 0; color: rgba(255,255,255,.75); font-size: 14.5px; }
.aa-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.aa-steps li { display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: 14px; color: rgba(255,255,255,.6); }
.aa-steps li span { flex: 0 0 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700;
  border: 2px solid rgba(255,255,255,.3); transition: all .3s; }
.aa-steps li.cur { color: #fff; }
.aa-steps li.cur span { background: #fff; border-color: #fff; color: var(--brand-dark); box-shadow: 0 0 0 5px rgba(255,255,255,.15); }
.aa-steps li.done { color: rgba(255,255,255,.85); }
.aa-steps li.done span { background: #22c55e; border-color: #22c55e; color: #fff; }
.aa-points { list-style: none; margin: auto 0 0; padding: 18px 0 0; border-top: 1px solid rgba(255,255,255,.14); display: grid; gap: 12px; font-size: 13.5px; color: rgba(255,255,255,.85); }
.aa-points li { display: flex; gap: 10px; align-items: flex-start; }
.aa-points svg { flex: 0 0 28px; width: 28px; height: 28px; padding: 6px; border-radius: 9px; background: rgba(255,255,255,.12); margin-top: -4px; }

.auth-card { width: 100%; padding: 38px 42px; background: #fff; }
.auth-card .head { text-align: center; margin-bottom: 22px; }
.auth-card .head .badge-ic { width: 60px; height: 60px; border-radius: 18px; margin: 0 auto 12px; display: grid; place-items: center;
  background: linear-gradient(135deg, #eef4ff, #d3e2fe); color: var(--brand-dark); box-shadow: 0 8px 20px rgba(70,107,182,.15); }
.auth-card .head p { margin: 4px 0 0; }
.auth-card .switch { text-align: center; margin-top: 18px; }
.auth-card .btn-primary { width: 100%; margin-top: 12px; padding: 14px; font-size: 15px; }
.auth-card .btn-primary:hover:not([disabled]) { transform: translateY(-1px); }
.auth-card .input, .auth-card .control input { background: #f7faff; border-color: #dfe9fc; border-radius: 12px; }
.auth-card .control input:hover { border-color: #c9d9f7; }

/* Email code */
.otp-card { animation: fadeUp .35s ease; }
.otp-ic { animation: otp-pop .5s ease; }
@keyframes otp-pop { 0% { transform: scale(.6); opacity: 0; } 70% { transform: scale(1.08); } 100% { transform: none; opacity: 1; } }
.otp-boxes { display: flex; justify-content: center; gap: 10px; margin: 8px 0 4px; }
.otp-boxes.shake { animation: shake .35s ease; }
.otp-box { width: 52px; height: 60px; text-align: center; font-size: 26px; font-weight: 700; border-radius: 14px;
  border: 2px solid #dfe9fc; background: #f7faff; color: var(--brand-dark); caret-color: var(--brand); transition: border-color .15s, box-shadow .15s, background .15s, transform .15s; }
.otp-box:nth-child(3) { margin-right: 10px; }
.otp-box:focus { outline: none; border-color: var(--brand); background: #fff; box-shadow: 0 0 0 4px rgba(70,107,182,.16); transform: translateY(-2px); }
.otp-box.filled { border-color: #9bb4e6; background: #fff; }
.otp-msg { min-height: 20px; margin: 8px 0 0; text-align: center; font-size: 13.5px; font-weight: 600; }
.otp-msg.err { color: var(--err); }
.otp-msg.ok { color: var(--ok); }
.otp-meta { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 14px; font-size: 13px; color: var(--ink-soft); }
.otp-meta span { display: inline-flex; align-items: center; gap: 6px; }
.otp-meta .btn-link { font-weight: 700; text-decoration: none; }
.otp-meta .btn-link[disabled] { color: var(--muted); cursor: default; }
.otp-tip { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 14px 0 0; padding: 10px; border-radius: 12px; background: #f1f6ff; font-size: 12.5px; color: var(--ink-soft); }
.auth-card .switch .btn-link { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; font-weight: 600; }
@media (max-width: 860px) {
  .auth-shell { grid-template-columns: 1fr; max-width: 560px; }
  .auth-aside { padding: 22px 24px; gap: 16px; }
  .aa-points { display: none; }
  .aa-steps { grid-auto-flow: column; justify-content: start; gap: 18px; }
}
.pw-meter { height: 6px; border-radius: 6px; background: #e6e6e6; overflow: hidden; margin-top: 6px; }
.pw-meter span { display: block; height: 100%; width: 0; transition: width .3s ease, background .3s; }
.pw-rules { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 6px; font-size: 12.5px; color: var(--muted); padding: 0; list-style: none; }
.pw-rules li::before { content: "○ "; }
.pw-rules li.ok { color: var(--ok); }
.pw-rules li.ok::before { content: "✓ "; }

/* ---------------- Form fields ---------------- */
.grid { display: grid; gap: 16px 22px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.span-2 { grid-column: span 2; }
.span-all { grid-column: 1 / -1; }

.field { position: relative; }
.field > label:not(.checkbox), .field-label { display: block; font-weight: 600; font-size: 13.5px; margin-bottom: 6px; color: var(--ink); }
.req { color: var(--err); margin-left: 2px; }
.opt { color: var(--muted); font-weight: 500; font-size: 12px; margin-left: 4px; }
.control { position: relative; display: flex; align-items: center; }
.control .prefix { position: absolute; left: 14px; color: var(--muted); font-weight: 600; pointer-events: none; }
.control .prefix + input { padding-left: 30px; }
.input, .control input, .control select, .control textarea {
  width: 100%; padding: 12px 40px 12px 14px;
  background: #fcfdff; border: 1.5px solid var(--line); border-radius: 10px;
  transition: border-color .2s, box-shadow .2s, background .2s;
  appearance: none; -webkit-appearance: none;
}
.control textarea { min-height: 90px; resize: vertical; }
.control select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2355627d' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; cursor: pointer;
}
.control input::placeholder, .control textarea::placeholder { color: #8a8a8a; font-style: italic; }
.control input:focus, .control select:focus, .control textarea:focus { outline: none; border-color: var(--focus); background: #fff; box-shadow: 0 0 0 4px rgba(70, 107, 182,.14); }
.control input[readonly] { background: #f4f4f4; color: var(--ink-soft); }
.state-icon { position: absolute; right: 12px; width: 18px; height: 18px; border-radius: 50%; display: none; place-items: center; font-size: 11px; color: #fff; font-weight: 700; pointer-events: none; }
.control select ~ .state-icon { right: 34px; }
.hint { font-size: 12.5px; color: var(--muted); margin-top: 5px; }
.msg { font-size: 12.5px; color: var(--err); margin-top: 5px; min-height: 0; display: none; align-items: center; gap: 5px; }
.field.is-invalid .msg { display: flex; animation: slideIn .25s ease; }
.field.is-invalid .control input, .field.is-invalid .control select, .field.is-invalid .control textarea { border-color: var(--err); background: #fff8f8; }
.field.is-invalid .state-icon { display: grid; background: var(--err); }
.field.is-invalid .state-icon::after { content: "!"; }
.field.is-valid .control input, .field.is-valid .control select { border-color: #86d8a4; background: #fbfffc; }
.field.is-valid .state-icon { display: grid; background: var(--ok); }
.field.is-valid .state-icon::after { content: "✓"; }
.field.shake { animation: shake .35s ease; }
@keyframes slideIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes shake { 0%,100% { transform: none; } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

.checkbox { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; user-select: none; }
.checkbox input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.checkbox .box { flex: 0 0 22px; height: 22px; border-radius: 7px; border: 2px solid #b8b8b8; background: #fff; display: grid; place-items: center; transition: all .2s; margin-top: 1px; }
.checkbox .box::after { content: ""; width: 6px; height: 11px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) scale(0); transition: transform .18s ease; margin-top: -2px; }
.checkbox input:checked + .box { background: var(--c, var(--brand)); border-color: var(--c, var(--brand)); }
.checkbox input:checked + .box::after { transform: rotate(45deg) scale(1); }
.checkbox input:focus-visible + .box { box-shadow: 0 0 0 4px rgba(70, 107, 182,.2); }
.field.is-invalid .checkbox .box { border-color: var(--err); }

.section-title { display: flex; align-items: center; gap: 10px; margin: 26px 0 14px; font-size: 15px; font-weight: 700; color: var(--ink); }
.section-title::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.section-title .pill { font-size: 11px; padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--c) 14%, white); color: var(--c); }

.note { display: flex; gap: 12px; padding: 14px 16px; border-radius: 12px; background: #e2ecfe; border: 1px solid #d3e2fe; color: #1f1f1f; font-size: 14px; }
.note.warn { background: #fff7ec; border-color: #fbd9a8; color: #7a4a06; }
.note.ok { background: var(--ok-bg); border-color: #b8ebc9; color: #14532d; }
.note svg { flex: 0 0 20px; margin-top: 1px; }

/* ---------------- Address autocomplete ---------------- */
.ac { position: relative; }
.ac-badge { position: absolute; right: 40px; top: 50%; transform: translateY(-50%); font-size: 11px; font-weight: 700; color: #c8102e; background: #fff0f2; padding: 2px 8px; border-radius: 999px; pointer-events: none; }
.ac-list {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30;
  background: #fff; border-radius: 12px; box-shadow: 0 16px 40px rgba(31, 31, 31,.18); border: 1px solid var(--line);
  max-height: 320px; overflow: auto; padding: 6px; margin: 0; list-style: none; animation: slideIn .15s ease;
}
.ac-item { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 9px; cursor: pointer; }
.ac-item .pin { flex: 0 0 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #e2ecfe; color: var(--focus); }
.ac-item.container .pin { background: #fef8f6; color: var(--brand-dark); }
.ac-item b { display: block; font-weight: 600; }
.ac-item b mark { background: #fff4c1; color: inherit; border-radius: 3px; padding: 0 1px; }
.ac-item small { color: var(--muted); }
.ac-item .chev { margin-left: auto; color: var(--muted); }
.ac-item.active, .ac-item:hover { background: #f6f9ff; }
.ac-status { padding: 12px; color: var(--muted); font-size: 13px; display: flex; gap: 8px; align-items: center; }
.ac-foot { padding: 8px 12px 4px; font-size: 11px; color: var(--muted); border-top: 1px solid var(--line); margin-top: 4px; display: flex; justify-content: space-between; }
.ac-crumb { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; padding: 6px 10px; background: #f6f9ff; border: 1px solid #d3e2fe; border-radius: 8px; font-size: 12.5px; color: var(--ink-soft); }
/* [hidden] ties with the class rule on specificity, so without this the empty bar stays visible. */
.ac-crumb[hidden] { display: none; }
.ac-crumb-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-crumb button { flex: 0 0 auto; border: 0; background: none; padding: 0; color: var(--brand-dark); font-weight: 600; text-decoration: underline; cursor: pointer; }
.ac-crumb:not([hidden]) ~ .ac-list { top: calc(100% + 44px); }

/* ---------------- Uploads ---------------- */
.upload { --c: var(--focus); }
.dropzone {
  position: relative; display: flex; align-items: center; gap: 14px; padding: 16px 18px;
  border: 2px dashed #b9ccf0; border-radius: 14px; background: linear-gradient(180deg, #fafcff, #f1f6ff);
  cursor: pointer; transition: border-color .2s, background .2s, transform .15s;
}
.dropzone:hover, .dropzone:focus-visible { border-color: var(--c); background: #f6f9ff; outline: none; }
.dropzone.drag { border-color: var(--c); background: #e2ecfe; transform: scale(1.01); }
.dropzone .cloud { flex: 0 0 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 14%, white); color: var(--c); }
.dropzone .dz-text b { display: block; font-size: 14.5px; }
.dropzone .dz-text b u { color: var(--c); text-decoration: none; border-bottom: 2px solid currentColor; }
.dropzone .dz-text small { color: var(--muted); font-size: 12.5px; }
.dropzone .types { margin-left: auto; display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.ftype { font-size: 10px; font-weight: 700; padding: 3px 7px; border-radius: 6px; color: #fff; letter-spacing: .5px; }
.ftype.pdf { background: #e5484d; } .ftype.doc { background: #466bb6; } .ftype.jpeg, .ftype.jpg { background: #16a34a; } .ftype.png { background: #8b5cf6; }
.field.is-invalid .dropzone { border-color: var(--err); background: #fff8f8; }

.file-chip { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 14px; background: #fff; border: 1.5px solid #b8ebc9; box-shadow: 0 2px 8px rgba(22,163,74,.08); animation: slideIn .25s ease; }
.file-chip .thumb { flex: 0 0 48px; height: 48px; border-radius: 10px; overflow: hidden; display: grid; place-items: center; font-weight: 800; font-size: 12px; color: #fff; }
.file-chip .thumb img { width: 100%; height: 100%; object-fit: cover; }
.file-chip .thumb.pdf { background: #e5484d; } .file-chip .thumb.doc { background: #466bb6; } .file-chip .thumb.jpeg, .file-chip .thumb.jpg { background: #16a34a; } .file-chip .thumb.png { background: #8b5cf6; }
.file-chip .meta { min-width: 0; flex: 1; }
.file-chip .meta b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-chip .meta small { color: var(--ok); font-weight: 600; }
.file-chip .actions { display: flex; gap: 4px; }
.icon-btn { width: 34px; height: 34px; border-radius: 10px; border: none; background: #e2ecfe; color: var(--ink-soft); display: grid; place-items: center; cursor: pointer; transition: background .2s, color .2s; text-decoration: none; }
.icon-btn:hover { background: #d3e2fe; color: var(--ink); }
.icon-btn.danger:hover { background: var(--err-bg); color: var(--err); }
.up-progress { height: 6px; border-radius: 6px; background: #e6e6e6; overflow: hidden; margin-top: 8px; }
.up-progress span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--c), #9bb4e6); transition: width .2s; }

/* ---------------- Wizard layout ---------------- */
.wizard { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 24px; align-items: start; }
.rail { position: sticky; top: 92px; padding: 22px 18px; }
.rail-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.rail-head b { font-size: 14px; }
.rail-head .pct { font-size: 22px; font-weight: 700; color: var(--brand-dark); font-variant-numeric: tabular-nums; }
.rail .appid { font-size: 12.5px; color: var(--muted); margin-bottom: 14px; }

/* Animated road progress bar with a riding bicycle */
.road { position: relative; height: 46px; margin: 4px 6px 22px; }
.road-track { position: absolute; left: 0; right: 0; bottom: 6px; height: 10px; border-radius: 10px; background: repeating-linear-gradient(90deg, #e6e6e6 0 14px, #f0f0f0 14px 22px); overflow: hidden; }
.road-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 10px; background: linear-gradient(90deg, var(--m0), var(--m1), var(--m2), var(--m3), var(--m4), var(--m5)); background-size: 290px 100%; transition: width 1s cubic-bezier(.6,.1,.2,1); }
.road-fill::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); animation: shimmer 2s linear infinite; }
@keyframes shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.road-bike { position: absolute; bottom: 12px; left: 0; width: 46px; transform: translateX(-50%); transition: left 1s cubic-bezier(.6,.1,.2,1); }
.road-bike svg { display: block; width: 46px; height: 34px; }
.road-bike .w { transform-box: fill-box; transform-origin: center; }
.road-bike.moving .w { animation: spin .5s linear infinite; }
.road-bike.moving svg { animation: bob .25s ease-in-out infinite alternate; }
@keyframes bob { to { transform: translateY(-1.5px); } }
.road-flag { position: absolute; right: -6px; bottom: 14px; font-size: 18px; }

.milestones { list-style: none; margin: 0; padding: 0; position: relative; }
.milestones::before { content: ""; position: absolute; left: 21px; top: 22px; bottom: 22px; width: 4px; border-radius: 4px; background: #e6e6e6; }
.ms-fill { position: absolute; left: 21px; top: 22px; width: 4px; border-radius: 4px; height: 0; background: linear-gradient(180deg, var(--m0), var(--m1), var(--m2), var(--m3), var(--m4), var(--m5)); transition: height 1s cubic-bezier(.6,.1,.2,1); }
.ms { position: relative; --c: var(--muted); }
.ms button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 6px 8px 0; background: none; border: none; text-align: left; cursor: pointer; border-radius: 12px; transition: background .2s; }
.ms button:hover:not([disabled]) { background: #f6f9ff; }
.ms button[disabled] { cursor: default; }
.ms-dot {
  position: relative; z-index: 1; flex: 0 0 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; font-size: 15px;
  background: #fff; border: 3px solid #d0d0d0; color: var(--muted); transition: all .35s ease;
}
.ms-text b { display: block; font-size: 14px; }
.ms-text small { font-size: 12px; color: var(--muted); font-weight: 600; }
.ms.current .ms-dot { border-color: var(--c); color: var(--c); box-shadow: 0 0 0 6px color-mix(in srgb, var(--c) 18%, transparent); animation: pulse 1.8s ease-out infinite; }
.ms.current .ms-text b { color: var(--c); }
.ms.current .ms-text small { color: var(--c); }
.ms.done .ms-dot { background: var(--c); border-color: var(--c); color: #fff; }
.ms.done .ms-text small { color: var(--ok); }
.ms.error .ms-dot { background: #fff; border-color: var(--err); color: var(--err); }
.ms.error .ms-text small { color: var(--err); }
.ms.error.current .ms-dot { animation: pulseErr 1.8s ease-out infinite; }
.ms .count { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--err); color: #fff; font-size: 11px; display: grid; place-items: center; border: 2px solid #fff; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c) 40%, transparent); } 100% { box-shadow: 0 0 0 12px transparent; } }
@keyframes pulseErr { 0% { box-shadow: 0 0 0 0 rgba(220,38,38,.35); } 100% { box-shadow: 0 0 0 12px transparent; } }
.rail-legend { display: flex; flex-wrap: wrap; gap: 8px 12px; margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line); font-size: 11.5px; color: var(--ink-soft); }
.rail-legend span::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; background: var(--d); }

.panel { overflow: visible; }
.panel-head { padding: 22px 28px 18px; border-bottom: 1px solid var(--line); display: flex; gap: 16px; align-items: center; border-radius: var(--radius) var(--radius) 0 0; background: linear-gradient(90deg, color-mix(in srgb, var(--c) 9%, white), #fff 70%); }
.panel-head .ph-ic { flex: 0 0 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--c); color: #fff; box-shadow: 0 8px 18px color-mix(in srgb, var(--c) 35%, transparent); }
.panel-head .step-of { margin-left: auto; font-size: 12.5px; font-weight: 700; color: var(--c); background: color-mix(in srgb, var(--c) 12%, white); padding: 5px 12px; border-radius: 999px; white-space: nowrap; }
.panel-body { padding: 24px 28px 30px; animation: fadeUp .35s ease; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.actionbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 15;
  background: rgba(255,255,255,.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--line); box-shadow: 0 -6px 20px rgba(31, 31, 31,.06);
}
.actionbar-inner { max-width: 1280px; margin: 0 auto; padding: 12px 22px calc(12px + env(safe-area-inset-bottom)); display: flex; gap: 12px; align-items: center; }
.actionbar .spacer { flex: 1; }
.autosave { font-size: 12.5px; color: var(--muted); display: flex; align-items: center; gap: 6px; }

/* Children */
.child-card { position: relative; border: 1.5px solid var(--line); border-left: 5px solid var(--m2); border-radius: 14px; padding: 18px 20px; margin-bottom: 16px; background: #fafcff; animation: fadeUp .3s ease; }
.child-card .child-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.child-card .child-num { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--m2); color: #fff; font-weight: 700; }
.child-card .child-head .icon-btn { margin-left: auto; }
.add-child { width: 100%; padding: 16px; border: 2px dashed #f7b9ac; border-radius: 14px; background: #fef8f6; color: #c4452c; font-weight: 700; cursor: pointer; display: flex; justify-content: center; gap: 8px; align-items: center; transition: background .2s; }
.add-child:hover { background: #fcebe6; }
.size-guide { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 18px; border-radius: 14px; background: #eef4ff; margin-top: 18px; }
.size-guide .sg { text-align: center; padding: 12px; background: #fff; border-radius: 12px; }
.size-guide svg { width: 100%; max-width: 180px; height: 150px; }
.size-guide b { display: block; }

/* Option cards (deployment, referral) */
.options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.option { position: relative; display: block; cursor: pointer; }
.option input { position: absolute; opacity: 0; }
.option .opt-body { height: 100%; padding: 20px; border-radius: 16px; border: 2px solid var(--line); background: #fff; transition: all .2s ease; display: flex; flex-direction: column; gap: 6px; }
.option .opt-body:hover { border-color: color-mix(in srgb, var(--c) 60%, white); }
.option input:checked + .opt-body { border-color: var(--c); background: color-mix(in srgb, var(--c) 6%, white); box-shadow: 0 8px 20px color-mix(in srgb, var(--c) 18%, transparent); }
.option input:focus-visible + .opt-body { box-shadow: 0 0 0 4px rgba(70, 107, 182,.2); }
.option input:disabled + .opt-body { opacity: .5; cursor: not-allowed; }
.option .opt-top { display: flex; align-items: center; gap: 12px; }
.option .opt-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 14%, white); color: var(--c); }
.option .radio { margin-left: auto; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #b8b8b8; display: grid; place-items: center; }
.option input:checked + .opt-body .radio { border-color: var(--c); }
.option input:checked + .opt-body .radio::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.option .price { font-size: 22px; font-weight: 700; color: var(--c); }
.field.is-invalid .option .opt-body { border-color: #f3b4b4; }

/* Notice */
.ack { display: flex; gap: 16px; align-items: center; padding: 16px 18px; border-radius: 14px; border: 1.5px solid var(--line); background: #fff; margin-bottom: 12px; transition: border-color .2s, background .2s; }
.ack.checked { border-color: color-mix(in srgb, var(--m4) 50%, white); background: #fff7fb; }
.ack .ack-ic { flex: 0 0 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: #fde7f3; color: var(--m4); }
.ack .ack-body { flex: 1; }
.sig-wrap { position: relative; border: 2px dashed #e9b7d3; border-radius: 14px; background: #fff; overflow: hidden; touch-action: none; }
.sig-wrap canvas { display: block; width: 100%; height: 180px; cursor: crosshair; }
.sig-wrap .sig-placeholder { position: absolute; inset: 0; display: grid; place-items: center; color: #d7b2c6; font-family: "Caveat", cursive; font-size: 34px; pointer-events: none; transition: opacity .2s; }
.sig-wrap .sig-line { position: absolute; left: 24px; right: 24px; bottom: 38px; border-bottom: 1.5px solid #f0d4e3; pointer-events: none; }
.sig-wrap .sig-x { position: absolute; left: 26px; bottom: 42px; color: #e5a8c8; font-weight: 700; pointer-events: none; }
.sig-tools { position: absolute; top: 10px; right: 10px; display: flex; gap: 6px; }
.field.is-invalid .sig-wrap { border-color: var(--err); }

/* Review */
.review-hero { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 22px; }
.stat { padding: 16px 18px; border-radius: 14px; background: linear-gradient(135deg, color-mix(in srgb, var(--c) 12%, white), #fff); border: 1px solid color-mix(in srgb, var(--c) 25%, white); }
.stat small { display: block; color: var(--ink-soft); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .6px; }
.stat b { font-size: 20px; color: var(--ink); }
.rv-section { border: 1px solid #dfe9fc; border-radius: 18px; box-shadow: 0 6px 20px rgba(70,107,182,.06); margin-bottom: 18px; overflow: hidden; background: #fff; animation: fadeUp .35s ease both; }
.rv-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: linear-gradient(90deg, color-mix(in srgb, var(--c) 10%, white), #fff); border-bottom: 1px solid var(--line); }
.rv-head .rv-ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--c); color: #fff; }
.rv-head h3 { margin: 0; }
.rv-head .status { margin-left: auto; }
.badge { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; padding: 4px 11px; border-radius: 999px; }
.badge.ok { background: var(--ok-bg); color: var(--ok); }
.badge.err { background: var(--err-bg); color: var(--err); }
.badge.info { background: #e2ecfe; color: #35508a; }
.badge.draft { background: #e6e6e6; color: #6c6c6c; }
.rv-body { padding: 16px 18px; }
.kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
.kv > div { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px dashed #e6e6e6; }
.kv dt { color: var(--ink-soft); font-size: 13.5px; }
.kv dd { margin: 0; font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.kv dd.missing { color: var(--err); font-weight: 600; }
.kv dd.addr-dd { display: flex; align-items: flex-start; justify-content: flex-end; gap: 10px; }
.kv dd.addr-dd .btn { flex: 0 0 auto; }
.addr-warn { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; color: var(--warn); font-size: 12.5px; font-weight: 600; }
.kv .full { grid-column: 1 / -1; }
/* Check and Send, Guardian 2: incomes side by side, each label above its amount. */
.kv.gd-compact { gap: 0 16px; align-content: start; }
.kv.gd-compact > div:not(.full) { flex-direction: column; justify-content: flex-start; gap: 2px; }
.kv.gd-compact > div:not(.full) dd { text-align: left; }
.doc-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
/* Check and Send: the guardians' columns share rows (heading, details, papers) so both paper lists start level. */
.gd-cols { row-gap: 0; }
.gd-cols > .gd-col { display: grid; grid-row: span 3; grid-template-rows: subgrid; align-content: start; }
.gd-cols .doc-list { align-content: start; }
.doc-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: #fafcff; border: 1px solid #e6e6e6; }
.doc-item.missing { background: #fff7f7; border-color: #f6caca; color: var(--err); }
.doc-item .thumb { flex: 0 0 36px; height: 36px; border-radius: 8px; display: grid; place-items: center; font-size: 10px; font-weight: 800; color: #fff; background: #94a3b8; }
.doc-item .thumb.pdf { background: #e5484d; } .doc-item .thumb.doc { background: #466bb6; } .doc-item .thumb.jpeg, .doc-item .thumb.jpg { background: #16a34a; } .doc-item .thumb.png { background: #8b5cf6; }
.doc-item .meta { min-width: 0; flex: 1; }
.doc-item .meta b { display: block; font-size: 13px; }
.doc-item .meta small { display: block; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-item.has-ai { flex-wrap: wrap; }
.doc-item button.icon-btn { border: 0; cursor: pointer; font: inherit; }
.ai-check { flex-basis: 100%; display: grid; gap: 4px; padding: 8px 10px; border-radius: 10px; border: 1px solid #cdeedd; background: #f2fbf6; }
.ai-check.warn { border-color: #f5dfa8; background: #fffaf0; }
.ai-check .ai-head { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.ai-check.ok .ai-head svg { color: #16a34a; } .ai-check.warn .ai-head svg { color: #b7791f; }
.ai-check .ai-facts { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.ai-check .ai-issues { margin: 0; padding-left: 18px; }
.ai-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.ai-bar > span { flex: 1; }
.rv-children { display: grid; grid-template-columns: 1fr; gap: 12px; }
/* One line per child: details left, ID paper right; they wrap onto two lines on narrow screens. */
.rv-child { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 14px; border-radius: 12px; background: #fef8f6; border: 1px solid #f9d5cc; }
.rv-child-info { flex: 1 1 220px; min-width: 0; }
.rv-child > .doc-list { flex: 1 1 260px; grid-template-columns: 1fr; margin-top: 0; }
.rv-child b { font-size: 15px; }
.rv-sig { max-width: 320px; height: 100px; object-fit: contain; background: #fff; border-radius: 10px; border: 1px solid var(--line); }
.err-inline { color: var(--err); font-size: 12.5px; margin-top: 8px; display: flex; flex-direction: column; gap: 3px; }

/* Confirmation */
.done-card { max-width: 760px; margin: 10px auto; padding: 40px 36px; text-align: center; }
.check-anim { width: 130px; height: 130px; margin: 0 auto 10px; }
.check-anim circle { stroke-dasharray: 380; stroke-dashoffset: 380; animation: draw .8s ease forwards; }
.check-anim path { stroke-dasharray: 100; stroke-dashoffset: 100; animation: draw .5s .7s ease forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.done-card .app-no { font-family: var(--serif); display: inline-block; margin: 14px 0; padding: 10px 22px; border-radius: 12px; background: #e2ecfe; color: var(--brand-dark); font-size: 26px; font-weight: 700; letter-spacing: 2px; }
.timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 26px 0; text-align: center; }
.timeline .tl { position: relative; padding-top: 44px; font-size: 13px; }
.timeline .tl::before { content: attr(data-n); position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #e6e6e6; color: var(--ink-soft); font-weight: 700; }
.timeline .tl.on::before { background: var(--ok); color: #fff; content: "✓"; }
.timeline .tl::after { content: ""; position: absolute; top: 16px; left: calc(50% + 22px); right: calc(-50% + 22px); height: 3px; background: #e6e6e6; border-radius: 3px; }
.timeline .tl:last-child::after { display: none; }
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 50; overflow: hidden; }
.confetti i { position: absolute; top: -12px; width: 9px; height: 14px; border-radius: 2px; animation: fall linear forwards; }
@keyframes fall { to { transform: translateY(110vh) rotate(720deg); } }

/* Dashboard */
.dash-head { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.dash-head .spacer { flex: 1; }
.app-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px; }
.app-card { padding: 20px; display: flex; flex-direction: column; gap: 12px; border-top: 4px solid var(--c); transition: transform .2s, box-shadow .2s; }
.app-card:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(31, 31, 31,.12); }
.app-card .top { display: flex; align-items: center; gap: 10px; }
.app-card .top .badge, .app-card .top .st-pill { margin-left: auto; }
.card-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* Applicant status pills: one colour per stage, and per step once approved */
.st-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; padding: 5px 12px; border-radius: 999px; white-space: nowrap; }
.st-pill i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.st-progress  { background: #e6e6e6; color: #555; }
.st-submitted { background: #e2ecfe; color: #35508a; }
.st-review    { background: #fef3c7; color: #8a5a00; }
.st-attention { background: #ffedd5; color: #9a3412; }
.st-approved  { background: var(--ok-bg); color: #15803d; }
.st-allotted  { background: #ede9fe; color: #5b21b6; }
.st-payment   { background: #ffe8dc; color: #b4441b; }
.st-pickup    { background: #ccfbf1; color: #0f766e; }
.st-done      { background: #16a34a; color: #fff; }
.st-denied    { background: var(--err-bg); color: #b91c1c; }

/* Two-level status tracker */
.tracker { display: grid; gap: 10px; }
.tracker ol { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
.tr-step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; min-width: 0; }
.tr-step small { font-size: 12px; font-weight: 600; color: var(--muted); line-height: 1.25; }
.tr-node { position: relative; z-index: 1; }
.tr-dot { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: #fff; border: 2px solid #d0d0d0; color: var(--muted); }
.tr-step + .tr-step::before { content: ""; position: absolute; top: 13px; right: 50%; width: 100%; height: 3px; background: #e6e6e6; }
.tr-step.done .tr-dot { background: var(--ok); border-color: var(--ok); color: #fff; }
.tr-step.done + .tr-step::before, .tr-step.done + .tr-step.done::before { background: var(--ok); }
.tr-step.cur .tr-dot { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: 0 0 0 5px rgba(70, 107, 182, .18); }
.tr-step.ended .tr-dot { background: var(--err); border-color: var(--err); color: #fff; }
.tr-step.done small, .tr-step.cur small { color: var(--ink); }
.tr-step.ended small { color: var(--err); }
.tr-sub { margin-left: 50% !important; padding: 10px 12px !important; border-radius: 12px; background: var(--ok-bg); border: 1px dashed #b8ebc9; }
.tr-sub.pending { background: #f4f4f4; border-color: #e6e6e6; opacity: .75; }
.tr-sub .tr-dot { width: 22px; height: 22px; font-size: 11px; }
.tr-sub .tr-step + .tr-step::before { top: 10px; }
.tr-sub .tr-step small { font-size: 11.5px; }
.tracker.compact .tr-sub { margin-left: 0 !important; }
.tracker.compact .tr-dot { width: 22px; height: 22px; font-size: 11px; }
.tracker.compact .tr-step + .tr-step::before { top: 10px; }
.tracker.compact .tr-step small { font-size: 11px; }
.status-panel { padding: 18px 20px; margin-bottom: 18px; }
.sp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.sp-head h3 { margin: 0 0 2px; }
.mini-bar { height: 8px; border-radius: 8px; background: #e6e6e6; overflow: hidden; }
.mini-bar span { display: block; height: 100%; border-radius: 8px; background: linear-gradient(90deg, var(--m0), var(--m2), var(--m5)); }
.empty { padding: 50px 30px; text-align: center; }
.empty .btn { margin-top: 14px; }

/* Toasts & modal */
#toast-root { position: fixed; top: 84px; right: 18px; z-index: 60; display: flex; flex-direction: column; gap: 10px; }
.toast { display: flex; gap: 10px; align-items: flex-start; min-width: 260px; max-width: 380px; padding: 13px 16px; border-radius: 12px; background: #fff; box-shadow: 0 14px 34px rgba(31, 31, 31,.18); border-left: 5px solid var(--focus); animation: toastIn .3s ease; font-weight: 600; font-size: 14px; }
.toast.success { border-color: var(--ok); } .toast.error { border-color: var(--err); }
.toast.out { animation: toastOut .3s ease forwards; }
@keyframes toastIn { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateX(30px); } }
.modal-backdrop { position: fixed; inset: 0; z-index: 70; background: rgba(20, 32, 60, .45); display: grid; place-items: center; padding: 20px; animation: fade .2s ease; }
@keyframes fade { from { opacity: 0; } }
.modal { width: 100%; max-width: 640px; max-height: 86vh; display: flex; flex-direction: column; background: #fff; border-radius: 18px; box-shadow: 0 30px 70px rgba(0,0,0,.25); animation: fadeUp .25s ease; }
.modal-head { padding: 18px 22px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 10px; }
.modal-head h3 { margin: 0; flex: 1; }
.modal-body { padding: 18px 22px; overflow: auto; }
.modal-foot { padding: 14px 22px; border-top: 1px solid var(--line); display: flex; gap: 10px; justify-content: flex-end; }
.err-steps { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.err-steps li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: #fff7f7; border: 1px solid #f6caca; }
.err-steps li .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--c); }
.err-steps li .btn-link { margin-left: auto; }

.loading-screen { display: grid; place-items: center; min-height: 50vh; color: var(--brand-dark); }

/* ---------------- Responsive (tablets / Android app) ---------------- */
@media (max-width: 980px) {
  .wizard { grid-template-columns: 1fr; }
  .rail { position: relative; top: 0; padding: 16px; }
  .milestones { display: flex; justify-content: space-between; }
  .milestones::before, .ms-fill { display: none; }
  .ms button { flex-direction: column; gap: 4px; padding: 4px; text-align: center; }
  .ms-text b { font-size: 11px; }
  .ms-text small { display: none; }
  .ms-dot { flex-basis: auto; width: 40px; height: 40px; font-size: 13px; }
  .rail-legend { display: none; }
  .hero { grid-template-columns: 1fr; }
  .steps-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .info-grid { grid-template-columns: 1fr; }
  .review-hero { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  main { padding: 16px 12px 130px; }
  .topbar { padding: 8px 12px; gap: 10px; }
  .brand-logo { height: 40px; }
  .topbar-title { font-size: 15px; }
  .topbar-user .name { display: none; }
  .top-switch a { padding: 7px 10px; font-size: 0; gap: 0; }
  .grid-2, .grid-3, .options, .kv, .doc-list, .rv-children, .size-guide { grid-template-columns: 1fr; }
  .span-2 { grid-column: auto; }
  .panel-head { padding: 16px; }
  .panel-head .step-of { display: none; }
  .panel-body { padding: 18px 16px 24px; }
  .ms-text b { display: none; }
  .dropzone .types { display: none; }
  .actionbar-inner { padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); gap: 8px; }
  .actionbar .btn { padding: 10px 14px; font-size: 13px; }
  .autosave { display: none; }
  .hero { padding: 30px 22px; }
  .hero h2 { font-size: 36px; }
  .steps-strip { grid-template-columns: 1fr; }
  .hero-float { display: none; }
  .timeline { grid-template-columns: repeat(2, 1fr); }
  .timeline .tl::after { display: none; }
  .auth-card { padding: 24px 18px; }
  .otp-box { width: 42px; height: 52px; font-size: 22px; }
  .otp-boxes { gap: 6px; }
  .otp-box:nth-child(3) { margin-right: 6px; }
}
/* ============================================================ Admin Portal */
/* Admin mode: the portal spans the full viewport width instead of the centered 1280px column. */
html { scrollbar-gutter: auto; }
body.admin-mode main { max-width: none; padding: 0; margin: 0; }

.admin-portal {
  min-height: calc(100vh - var(--topbar-h, 62px));
}

/* Sidebar: deep-blue gradient, grouped items, pill highlight, striped disc at the bottom (same motif as the page) */
.admin-nav {
  position: fixed; top: var(--topbar-h, 62px); left: 0; bottom: 0; width: 236px; z-index: 15;
  display: flex; flex-direction: column; gap: 2px; padding: 18px 14px 14px;
  overflow-y: auto; overflow-x: hidden;
  background: linear-gradient(185deg, #3d5fa6 0%, #35508a 55%, #2c4475 100%);
  box-shadow: 6px 0 24px rgba(31, 52, 99, .16);
}
.admin-nav::after {
  content: ""; position: absolute; left: -90px; bottom: -110px; width: 300px; height: 300px; border-radius: 50%; pointer-events: none;
  background: repeating-linear-gradient(180deg, rgba(155, 190, 245, .16) 0 12px, transparent 12px 24px);
}
.admin-nav > * { position: relative; z-index: 1; }
.admin-nav-brand { display: flex; align-items: center; gap: 12px; padding: 6px 8px 16px; margin-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,.10); color: #fff; }
.anb-ic { flex: 0 0 38px; height: 38px; border-radius: 12px; display: grid; place-items: center;
  background: linear-gradient(135deg, #9bb4e6, #d3e2fe); color: var(--brand-dark); box-shadow: 0 6px 16px rgba(0,0,0,.18); }
.admin-nav-brand b { display: block; font-size: 15px; letter-spacing: .2px; }
.admin-nav-brand small { display: block; font-size: 11.5px; color: rgba(255,255,255,.6); font-weight: 600; }
.admin-nav-head {
  font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(211, 226, 254, .55); padding: 14px 10px 6px;
}
.admin-nav-item {
  display: flex; align-items: center; gap: 12px; padding: 7px 10px; border-radius: 12px;
  color: rgba(255,255,255,.78); text-decoration: none; font-size: 14px; font-weight: 600;
  transition: background .18s, color .18s, transform .18s;
}
.ani-ic { flex: 0 0 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: rgba(255,255,255,.08); transition: background .18s, color .18s; }
.ani-label { flex: 1; }
.ani-badge { min-width: 22px; height: 20px; padding: 0 7px; border-radius: 999px; display: grid; place-items: center;
  font-size: 11px; font-weight: 700; background: #ff914c; color: #fff; box-shadow: 0 2px 8px rgba(255,145,76,.45); }
.admin-nav-item:hover { background: rgba(255,255,255,.09); color: #fff; transform: translateX(2px); }
.admin-nav-item:hover .ani-ic { background: rgba(255,255,255,.16); }
.admin-nav-item.active { background: #fff; color: var(--brand-dark); box-shadow: 0 8px 20px rgba(0,0,0,.16); transform: none; }
.admin-nav-item.active .ani-ic { background: linear-gradient(135deg, var(--brand), var(--brand-dark)); color: #fff; }
.admin-nav-item:focus-visible { outline: 3px solid rgba(211,226,254,.6); outline-offset: 1px; }
.admin-nav-foot { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 14px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.10); color: #fff; }
.admin-nav-foot .who-av { color: var(--brand-dark); background: linear-gradient(135deg, #d3e2fe, #9bb4e6); }
.anf-text { min-width: 0; }
.anf-text b { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.anf-text small { display: block; font-size: 11px; color: rgba(255,255,255,.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.admin-content {
  margin-left: 236px;
  padding: 28px 40px 60px;
  min-width: 0;
  max-width: 1400px;
}

.admin-section-head { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; flex-wrap: wrap; }
.admin-section-head > :first-child { margin-right: auto; }
.admin-section-head h2 { margin: 0; }

/* Search box in section heads */
.search { display: flex; align-items: center; gap: 8px; min-width: 260px; padding: 9px 14px; border-radius: 999px;
  background: #fff; border: 1.5px solid #d3e2fe; color: var(--brand); box-shadow: 0 2px 8px rgba(70,107,182,.06); transition: border-color .2s, box-shadow .2s; }
.search:focus-within { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(70,107,182,.14); }
.search input { border: 0; outline: 0; background: none; flex: 1; min-width: 0; font-size: 14px; color: var(--ink); }

/* Dashboard */
.dash-hero {
  position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding: 26px 30px; margin-bottom: 26px; border-radius: 20px;
  background: linear-gradient(120deg, #ffffff 0%, #eef4ff 55%, #dbe7fd 100%); border: 1px solid #d3e2fe;
  box-shadow: 0 10px 30px rgba(70,107,182,.10);
}
/* Striped half-disc in the corner, echoing the page decoration */
.dash-hero::after { content: ""; position: absolute; right: -60px; top: -70px; width: 240px; height: 240px; border-radius: 50%;
  background: repeating-linear-gradient(180deg, rgba(83,127,217,.20) 0 10px, transparent 10px 20px); pointer-events: none; }
.dash-hero > * { position: relative; z-index: 1; }
.dash-hero p { margin: 0; color: var(--ink-soft); }
.dash-date { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); margin-bottom: 4px; }
.dash-title { font-size: 28px; margin: 0 0 4px; }
.dash-clear { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; background: var(--ok-bg); color: #15803d; font-weight: 700; }
.dash-block { margin-bottom: 22px; }
.dash-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--brand-dark); margin-bottom: 10px; display: flex; align-items: center; gap: 10px; }
.dash-label::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, #c9d9f7, transparent); }
.dash-row { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 16px; margin-top: 6px; }
.dash-card { padding: 20px 22px; border: 1px solid #e3ecfd; }
.card-head { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; margin-bottom: 14px; color: var(--ink); }
.card-head svg { color: var(--brand); }
.card-link { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; text-decoration: none; }
.inv { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 24px; align-items: center; }
.inv-total { display: grid; place-items: center; text-align: center; padding: 18px 10px; border-radius: 16px; background: linear-gradient(135deg, #eef4ff, #dbe7fd); }
.inv-total b { font-size: 40px; line-height: 1; color: var(--brand-dark); }
.inv-total span { font-size: 12.5px; color: var(--ink-soft); font-weight: 600; margin-top: 4px; }
.inv-row { display: flex; justify-content: space-between; font-size: 14px; margin-top: 6px; }
.inv-bar { height: 10px; border-radius: 10px; background: #edf2fb; overflow: hidden; margin: 6px 0 8px; }
.inv-bar span { display: block; height: 100%; border-radius: 10px; background: linear-gradient(90deg, color-mix(in srgb, var(--c) 65%, white), var(--c)); transition: width .8s cubic-bezier(.6,.1,.2,1); }
.quick { display: flex; flex-direction: column; gap: 6px; }
.ql { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; text-decoration: none; color: var(--ink); font-weight: 600; font-size: 14px; transition: background .15s, color .15s; }
.ql svg { color: var(--brand); }
.ql:hover { background: #eef4ff; color: var(--brand-dark); }
.ql.off { opacity: .5; }

/* KPI tiles: white, calm, one accent colour each */
.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.kpi-tile {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 14px; padding: 18px 18px;
  border-radius: 16px; background: #fff; border: 1px solid #e3ecfd; color: var(--ink); text-decoration: none;
  box-shadow: 0 4px 14px rgba(70,107,182,.07); transition: transform .15s, box-shadow .15s, border-color .15s;
}
.kpi-tile::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--c); opacity: .85; }
.kpi-tile.link:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--c) 40%, white); box-shadow: 0 10px 24px color-mix(in srgb, var(--c) 18%, transparent); }
.kpi-tile.link:focus-visible { outline: 3px solid rgba(70,107,182,.35); outline-offset: 2px; }
.kt-ic { flex: 0 0 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 12%, white); }
.kt-body { display: flex; flex-direction: column; min-width: 0; }
.kt-val { font-size: 28px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kt-label { font-size: 13px; color: var(--ink-soft); font-weight: 600; }
.kt-sub { font-size: 12px; color: var(--c); font-weight: 700; }
.kt-go { margin-left: auto; color: color-mix(in srgb, var(--c) 70%, white); transition: transform .15s, color .15s; }
.kpi-tile.link:hover .kt-go { transform: translateX(3px); color: var(--c); }

/* Filter chips (replace tabs) */
.chipbar { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px; margin-bottom: 16px; border-radius: 16px; background: rgba(226,236,254,.65); border: 1px solid #d3e2fe; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 12px; border-radius: 999px; border: 1px solid transparent;
  background: transparent; color: var(--ink-soft); font-size: 13px; font-weight: 600; cursor: pointer; transition: background .15s, color .15s, box-shadow .15s;
}
.chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.chip:hover { background: #fff; color: var(--ink); }
.chip.on { background: #fff; color: var(--ink); border-color: color-mix(in srgb, var(--c) 35%, white); box-shadow: 0 3px 10px color-mix(in srgb, var(--c) 18%, transparent); }
.chip-n { min-width: 22px; padding: 1px 7px; border-radius: 999px; font-size: 11.5px; font-weight: 700; text-align: center; background: #fff; color: var(--ink-soft); }
.chip.on .chip-n { background: var(--c); color: #fff; }
.chip:focus-visible { outline: 3px solid rgba(70,107,182,.35); outline-offset: 1px; }

/* Segmented control */
.seg { display: inline-flex; padding: 4px; border-radius: 999px; background: rgba(226,236,254,.65); border: 1px solid #d3e2fe; }
.seg button { border: 0; background: none; padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--ink-soft); cursor: pointer; }
.seg button.on { background: #fff; color: var(--brand-dark); box-shadow: 0 2px 8px rgba(70,107,182,.15); }
.log-filters { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.log-filters > div:first-child { flex: 1; min-width: 0; }

/* Table: soft light-blue frame instead of the dark header box */
.admin-table-wrap { overflow-x: auto; border-radius: 18px; background: #fff; border: 1px solid #dfe9fc; box-shadow: 0 8px 26px rgba(70,107,182,.08); }
.admin-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
.admin-table th {
  background: linear-gradient(180deg, #eef4ff, #e6eefd); color: var(--brand-dark); text-align: left; padding: 12px 16px;
  font-weight: 700; white-space: nowrap; font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px solid #d3e2fe;
}
.admin-table td { padding: 12px 16px; border-bottom: 1px solid #eef2fa; vertical-align: middle; transition: background .15s; }
.admin-table tr:last-child td { border-bottom: none; }
.admin-table tbody tr:hover td { background: #f5f8ff; }
.admin-table .center { text-align: center; }
.admin-table .right { text-align: right; }
.empty-cell { text-align: center; color: var(--muted); padding: 40px !important; }
.empty-cell svg { color: #b9ccf0; margin-bottom: 6px; }
.app-no { font-weight: 700; font-size: 13px; color: var(--brand-dark); text-decoration: none; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
a.app-no:hover { text-decoration: underline; }
.who { display: flex; align-items: center; gap: 10px; }
.who > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.who-av { flex: 0 0 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700;
  color: var(--brand-dark); background: linear-gradient(135deg, #e2ecfe, #c9d9f7); }
.who-av.staff { color: #fff; background: linear-gradient(135deg, #8b5cf6, #6d28d9); }

.btn-sm { padding: 5px 12px; font-size: 12px; }
.btn-link { background: none; border: none; cursor: pointer; color: var(--focus); font-size: 13px; padding: 0; text-decoration: underline; }
.btn-link.danger { color: var(--err); }

/* Badges: one tone per status, with a dot */
.badge i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.warn { background: #fef9c3; color: #92400e; }
.badge.err { background: var(--err-bg); color: var(--err); }
.badge.review { background: #fef3c7; color: #92400e; }
.badge.attn { background: #ffedd5; color: #9a3412; }
.badge.violet { background: #ede9fe; color: #5b21b6; }
.badge.pink { background: #fce7f3; color: #9d174d; }
.badge.teal { background: #ccfbf1; color: #0f766e; }
.badge { white-space: nowrap; }

/* Bicycle deployment progress */
.bk-flow { padding: 18px 22px; margin-bottom: 18px; border: 1px solid #e3ecfd; }
.flow-bar { display: flex; gap: 3px; height: 14px; border-radius: 10px; overflow: hidden; background: #edf2fb; }
.flow-bar span { background: linear-gradient(90deg, color-mix(in srgb, var(--c) 70%, white), var(--c)); }
.flow-legend { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 12px; font-size: 13px; color: var(--ink-soft); }
.flow-legend span { display: inline-flex; align-items: center; gap: 6px; }
.flow-legend i { width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
.flow-legend b { color: var(--ink); }

/* Audit log */
.act-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; white-space: nowrap;
  color: color-mix(in srgb, var(--c) 80%, black); background: color-mix(in srgb, var(--c) 11%, white); }
.chg { display: inline; overflow-wrap: anywhere; }
.chg s { color: var(--muted); }
.role-pill { font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px; text-transform: uppercase; letter-spacing: .04em; }
.role-pill.staff { background: #ede9fe; color: #5b21b6; }

/* Previous applications */
.rv-count { display: inline-grid; place-items: center; min-width: 24px; height: 22px; padding: 0 7px; margin-left: 6px; border-radius: 999px;
  font-size: 12px; background: color-mix(in srgb, var(--c) 14%, white); color: var(--c); vertical-align: middle; }
.hist-list { display: grid; gap: 8px; }
.hist-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; text-decoration: none; color: var(--ink);
  background: #f7faff; border: 1px solid #e3ecfd; transition: background .15s, border-color .15s, transform .15s; }
.hist-item:hover { background: #eef4ff; border-color: #c9d9f7; transform: translateX(2px); }
.hist-item .spacer { flex: 1; }
.hist-item > svg { color: var(--brand); }

.grid-1 { display: grid; grid-template-columns: 1fr; }
.fw-med { font-weight: 500; }
.row-link { cursor: pointer; }
.input-sm { padding: 6px 10px; font-size: 13px; min-height: 0; width: auto; }
.btn-danger { background: linear-gradient(135deg, #ef4444, #dc2626); color: #fff; box-shadow: 0 6px 16px rgba(220,38,38,.3); }
.note.err { background: var(--err-bg); border-color: #f5c2c2; color: #7f1d1d; }

/* Application review */
.rv-top { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.rv-top .spacer { flex: 1; }
.rv-title h2 { margin: 0; font-size: 26px; }
.rv-track { display: flex; background: var(--card); border-radius: 18px; border: 1px solid #dfe9fc; box-shadow: 0 6px 20px rgba(70,107,182,.06); padding: 16px 12px; margin-bottom: 18px; }
.rv-step { flex: 1; text-align: center; position: relative; color: var(--ink-soft); font-size: 12px; }
.rv-step .dot { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 6px;
  background: #e6e6e6; font-weight: 700; font-size: 13px; position: relative; z-index: 1; }
.rv-step::before { content: ''; position: absolute; top: 15px; left: -50%; width: 100%; height: 3px; background: #e6e6e6; }
.rv-step:first-child::before { display: none; }
.rv-step.done .dot { background: var(--ok); color: #fff; }
.rv-step.done::before, .rv-step.cur::before { background: var(--ok); }
.rv-step.cur .dot { background: #466bb6; color: #fff; box-shadow: 0 0 0 5px rgba(70,107,182,.18); }
.rv-step.cur small { color: var(--ink); font-weight: 700; }
.rv-size { display: flex; align-items: center; gap: 10px; margin: 10px 0 4px; }
.rv-size .small { color: var(--ink-soft); }

/* Last block of the review page, after the audit log. */
.decision-bar {
  margin-top: 24px; padding: 22px 24px;
  background: linear-gradient(180deg, #ffffff, #f5f8ff); border-radius: 18px;
  border: 1px solid #d3e2fe; box-shadow: 0 10px 30px rgba(70,107,182,.12);
  border-top: 4px solid var(--brand);
}
.decision-bar:empty { display: none; }
.db-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.db-head h3 { margin: 0; font-size: 18px; }
.db-head .badge { margin-left: auto; }
.db-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.db-opt {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px; border-radius: 12px; border: 2px solid var(--line); background: #fff;
  font: inherit; font-weight: 700; cursor: pointer; color: var(--ink);
  transition: border-color .15s, background .15s, transform .1s;
}
.db-opt:hover { transform: translateY(-1px); }
.db-ic { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #fff; }
.db-opt.ok .db-ic { background: var(--ok); }
.db-opt.warn .db-ic { background: var(--warn); }
.db-opt.err .db-ic { background: var(--err); }
.db-opt.ok.on { border-color: var(--ok); background: #effaf3; }
.db-opt.warn.on { border-color: var(--warn); background: #fff8eb; }
.db-opt.err.on { border-color: var(--err); background: var(--err-bg); }
.db-hint { margin: 14px 0 10px; color: var(--ink-soft); font-size: 14px; }
.decision-bar textarea { width: 100%; resize: vertical; font: inherit; }
.db-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 12px; flex-wrap: wrap; }

@media (max-width: 900px) {
  .admin-nav { position: sticky; top: var(--topbar-h, 62px); bottom: auto; width: 100%; flex-direction: row; flex-wrap: wrap; padding: 8px 12px; gap: 4px; }
  .admin-nav-head, .admin-nav-brand, .admin-nav-foot, .admin-nav::after { display: none; }
  .admin-nav-item { padding: 5px 10px 5px 6px; }
  .ani-ic { flex-basis: 28px; height: 28px; }
  .admin-content { margin-left: 0; padding: 16px; }
  .db-options { grid-template-columns: 1fr; }
  .rv-track { overflow-x: auto; }
  .rv-step { min-width: 70px; }
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-row, .inv { grid-template-columns: 1fr; }
  .search { min-width: 0; flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* Address review card after an address was read from an uploaded document */
.ai-address { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.ai-address > span:first-of-type { flex: 1; min-width: 220px; }
.ai-address-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }

/* Status marks: green check (good), orange hourglass (needs review), red cross (rejected), grey dash (not checked) */
.sti { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; vertical-align: middle; flex: 0 0 20px; color: #fff; }
.sti svg { stroke-width: 3; }
.sti.green { background: #16a34a; }
.sti.yellow { background: #f59e0b; }
.sti.yellow svg { stroke-width: 2.4; }
.sti.red { background: #dc2626; }
.sti.none { background: #fff; color: #94a3b8; box-shadow: inset 0 0 0 1.5px #cbd5e1; }
.btn-warn { background: linear-gradient(135deg, #facc15, #eab308); color: #422006; }
.val-strip { border: 1px solid #dfe9fc; border-radius: 16px; background: #fff; padding: 12px 16px; margin-bottom: 14px; }
.val-summary { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; font-size: 14.5px; }
.val-summary .val-legend { margin-left: auto; }
.val-checks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 18px; }
.val-checks li { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; }
.val-checks li > div { display: grid; min-width: 0; }
.val-strip .note { margin-top: 10px; }
.val-why { margin: 10px 0 0; } .val-why summary { cursor: pointer; font-weight: 600; font-size: 13px; }
.val-legend { display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.val-legend .sti, .tally .sti { width: 16px; height: 16px; flex-basis: 16px; }
.val-legend .sti svg, .tally .sti svg { width: 10px; height: 10px; }

/* Compact review page */
.review-hero.compact { gap: 10px; margin-bottom: 14px; }
.review-hero.compact .stat { padding: 10px 14px; }
.review-hero.compact .stat b { font-size: 16px; }
.rv-section .rv-head { padding: 10px 16px; }
.rv-section .rv-head .rv-ic { width: 32px; height: 32px; border-radius: 9px; }
.rv-section .rv-head h3 { font-size: 16px; }
.rv-section .rv-body { padding: 12px 16px 14px; }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 20px; margin: 0; }
.fact { min-width: 0; }
.fact.wide { grid-column: span 3; }
.fact dt { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); margin-bottom: 2px; }
.fact dd { margin: 0; font-weight: 600; font-size: 14px; overflow-wrap: anywhere; display: flex; align-items: center; gap: 6px; }
.fact dd.addr-dd { justify-content: space-between; align-items: flex-start; }
.facts.income { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fact.total dd { color: var(--brand-dark, #1e3a8a); font-size: 16px; }
.rv-sig { max-width: 220px; height: 64px; }
.err-text { color: var(--err); font-weight: 600; }

.rv-table-wrap { overflow-x: auto; }
.rv-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.rv-table th { text-align: left; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft);
  padding: 8px 10px; background: #f7f9fe; border-bottom: 1px solid var(--line); }
.rv-table td { padding: 8px 10px; border-bottom: 1px solid #eef2fa; vertical-align: middle; }
.rv-table tbody tr:hover td { background: #fafcff; }
.rv-table .input-sm { padding: 5px 8px; min-height: 0; }
.rv-table.audit td:first-child { color: var(--ink-soft); }
.rv-table-wrap.collapsed tbody tr:nth-child(n+9) { display: none; }
#rv-audit + .btn { margin-top: 8px; }

.dr-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 16px 0 8px; }
.dr-head .small { margin-left: auto; }
.tally { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; }
.tally .sti { margin-left: 6px; }
.dr-list { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.dr + .dr { border-top: 1px solid #eef2fa; }
.dr-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; }
.dr:hover { background: #fafcff; }
.dr.missing { background: #fff8f8; }
.dr.missing small { color: var(--err); }
.dr-marks { display: inline-flex; gap: 4px; flex: 0 0 44px; }
.dr-main { flex: 1; min-width: 0; display: grid; }
.dr-main b { font-size: 13.5px; }
.dr-main small { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 6px; }
.dr-main .ext { flex: 0 0 auto; font-size: 9.5px; font-weight: 800; color: #fff; background: #94a3b8; padding: 1px 5px; border-radius: 4px; }
.dr-main .ext.pdf { background: #e5484d; } .dr-main .ext.doc { background: #466bb6; } .dr-main .ext.jpeg, .dr-main .ext.jpg { background: #16a34a; } .dr-main .ext.png { background: #8b5cf6; }
.dr-acts { display: inline-flex; align-items: center; gap: 2px; flex: 0 0 auto; }
.dr-acts button.icon-btn { border: 0; cursor: pointer; font: inherit; }
.mk-group { display: inline-flex; margin-left: 8px; border: 1px solid var(--line); border-radius: 999px; padding: 2px; gap: 2px; background: #fff; }
.mk { width: 26px; height: 26px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; background: transparent; color: #94a3b8; transition: background .15s, color .15s; }
.mk svg { stroke-width: 2.6; }
.mk.ok:hover { color: #16a34a; background: #effaf3; } .mk.ok.on { background: #16a34a; color: #fff; }
.mk.warn:hover { color: #d97706; background: #fff8eb; } .mk.warn.on { background: #f59e0b; color: #fff; }
.mk.err:hover { color: #dc2626; background: #fef2f2; } .mk.err.on { background: #dc2626; color: #fff; }
.dr-more { padding: 0 12px 10px 66px; font-size: 13px; }
.dr-more[hidden] { display: none; }
.dr-acts [data-more][aria-expanded="true"] { color: var(--brand); background: #eef4ff; }
.dr-reasons { margin: 6px 0; padding-left: 18px; }
.dr-note { color: var(--ink); }

/* Information requests: one point per requested item */
.pt-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pt { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; }
.pt > div { min-width: 0; flex: 1; }
.pt p { margin: 0; }
.pt-answer { margin-top: 4px !important; padding: 6px 10px; border-left: 3px solid #86efac; background: #f3fbf6; border-radius: 0 8px 8px 0; }
.pt-files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.pt-files a { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: #eef4ff; text-decoration: none; }

/* Request more info: document checklist */
.rq { margin-top: 4px; }
.rq-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.rq-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
.rq-opt { position: relative; display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; cursor: pointer; font-size: 13.5px; transition: border-color .15s, background .15s; }
.rq-opt:hover { border-color: #f5c46b; }
.rq-opt input { position: absolute; opacity: 0; pointer-events: none; }
.rq-box { flex: 0 0 18px; height: 18px; border-radius: 5px; border: 1.5px solid #cbd5e1; display: grid; place-items: center; color: transparent; background: #fff; }
.rq-box svg { stroke-width: 3.2; }
.rq-opt.on { border-color: var(--warn); background: #fff8eb; }
.rq-opt.on .rq-box { background: var(--warn); border-color: var(--warn); color: #fff; }
.rq-opt input:focus-visible + .rq-box { outline: 2px solid var(--brand); outline-offset: 2px; }
.rq-label { flex: 1; min-width: 0; font-weight: 600; }
.rq-flag { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: #fee2e2; color: #b91c1c; white-space: nowrap; }
.rq-opt.other { border-style: dashed; }
.rq textarea { width: 100%; resize: vertical; font: inherit; }

@media (max-width: 760px) {
  .facts, .facts.income, .val-checks, .rq-grid { grid-template-columns: 1fr 1fr; }
  .fact.wide { grid-column: 1 / -1; }
  .dr-row { flex-wrap: wrap; }
  .dr-acts { width: 100%; justify-content: flex-end; }
  .dr-more { padding-left: 12px; }
}
@media (max-width: 480px) {
  .facts, .facts.income, .val-checks, .rq-grid { grid-template-columns: 1fr; }
}
.route-auto { color: #15803d; font-weight: 700; }
.nowrap { white-space: nowrap; }

/* In-page document viewer */
.modal.modal-doc { max-width: min(1000px, 96vw); height: 90vh; max-height: 90vh; }
.modal-doc .modal-head h3 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.modal-doc .modal-body { flex: 1; padding: 0; display: flex; background: #eef3fc; overflow: auto; }
.dv-frame { flex: 1; width: 100%; border: 0; background: #fff; }
.dv-stage { flex: 1; display: grid; place-items: center; padding: 20px; overflow: auto;
  background: repeating-conic-gradient(#e8eefa 0 25%, #f4f7fd 0 50%) 0 0 / 22px 22px; }
.dv-stage img { max-width: 100%; max-height: calc(90vh - 180px); border-radius: 10px; box-shadow: 0 10px 30px rgba(31,52,99,.2); cursor: zoom-in; transition: transform .2s; background: #fff; }
.dv-stage img.zoom { max-width: none; max-height: none; cursor: zoom-out; }
.dv-none { flex: 1; display: grid; place-items: center; align-content: center; gap: 6px; padding: 40px; text-align: center; color: var(--ink-soft); }
.dv-none svg { color: var(--brand); }
.dv-none b { color: var(--ink); font-size: 16px; }

/* Uploader: clickable thumbnail and a live preview while the file saves */
.file-chip button.thumb { border: 0; padding: 0; cursor: zoom-in; font: inherit; font-weight: 800; font-size: 12px; color: #fff; transition: transform .15s, box-shadow .15s; }
.file-chip button.thumb:hover { transform: scale(1.05); box-shadow: 0 4px 12px rgba(31,52,99,.2); }
.dropzone.uploading { cursor: default; border-style: solid; border-color: #c9d9f7; background: #f7faff; }
.up-thumb { position: relative; flex: 0 0 48px; height: 48px; border-radius: 10px; overflow: hidden; display: grid; place-items: center; font-weight: 800; font-size: 12px; color: #fff; background: #94a3b8; }
.up-thumb.pdf { background: #e5484d; } .up-thumb.doc { background: #466bb6; } .up-thumb.jpeg, .up-thumb.jpg { background: #16a34a; } .up-thumb.png { background: #8b5cf6; }
.up-thumb img { width: 100%; height: 100%; object-fit: cover; }
.up-thumb .spinner { position: absolute; width: 20px; height: 20px; border-width: 2px; color: #fff; border-color: rgba(255,255,255,.4); border-top-color: #fff; }
.up-thumb::after { content: ""; position: absolute; inset: 0; background: rgba(31,52,99,.35); }
.up-thumb .spinner { z-index: 1; }
.up-pct { color: var(--brand); font-variant-numeric: tabular-nums; }
.dropzone.uploading small { display: block; margin-top: 4px; }

/* Review: one block per child (decision, bike size, ID, serial number) */
.kid { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.kid + .kid { margin-top: 10px; }
.kid.declined { background: #fffafa; border-color: #f6caca; }
.kid-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
/* Admin review: a child's details and their ID on one line, wrapping to two on narrow screens. */
.kid-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.kid-line > .kid-head { flex: 1 1 360px; margin-bottom: 0; }
.kid-line > .dr-list { flex: 1 1 420px; margin-top: 0; }
/* Admin review, in a guardian's column and beside a child's details: the name, file and finding top left, the
   buttons and OK / Reject top right, the AI chip on its own line below. A column too narrow for that (laptop widths)
   puts the chip, buttons and OK / Reject together on the second line instead. */
.gd-cols .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gd-cols .dr-list, .kid-line > .dr-list { container-type: inline-size; }
.gd-cols .dr-row, .kid-line .dr-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto;
  grid-template-areas: "ic main acts staff" ". chip chip chip"; align-items: start; row-gap: 6px; }
.gd-cols .dr-row > .dr-ic, .kid-line .dr-row > .dr-ic { grid-area: ic; align-self: center; }
.gd-cols .dr-row > .dr-main, .kid-line .dr-row > .dr-main { grid-area: main; }
.gd-cols .dr-row > .ai-chip, .kid-line .dr-row > .ai-chip { grid-area: chip; justify-self: start; }
.gd-cols .dr-row > .dr-acts, .kid-line .dr-row > .dr-acts { grid-area: acts; }
.gd-cols .dr-row > .dr-seg, .gd-cols .dr-row > .dr-verdict,
.kid-line .dr-row > .dr-seg, .kid-line .dr-row > .dr-verdict { grid-area: staff; }
@container (max-width: 620px) {
  .gd-cols .dr-row, .kid-line .dr-row { grid-template-columns: auto auto auto minmax(0, 1fr);
    grid-template-areas: "ic main main main" ". chip acts staff"; align-items: center; }
  .gd-cols .dr-row > .dr-seg, .gd-cols .dr-row > .dr-verdict,
  .kid-line .dr-row > .dr-seg, .kid-line .dr-row > .dr-verdict { justify-self: end; }
}
.gd-cols .dr-list { margin-top: 12px; align-self: start; }
.kid-num { flex: 0 0 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800;
  color: var(--c, #e0603c); background: color-mix(in srgb, var(--c, #e0603c) 12%, white); }
.kid-id { flex: 1; min-width: 180px; display: grid; }
.kid-id small { color: var(--muted); }
.kid-size { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .05em; }
.kid-size .input-sm { padding: 5px 8px; min-height: 0; text-transform: none; letter-spacing: 0; }
.kid-dec { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 2px; gap: 2px; background: #fff; }
.kd { display: inline-flex; align-items: center; gap: 4px; border: 0; background: transparent; border-radius: 999px; padding: 5px 12px;
  font: inherit; font-size: 13px; font-weight: 600; color: var(--ink-soft); cursor: pointer; }
.kd svg { stroke-width: 2.6; }
.kd.ok:hover { color: #15803d; background: #effaf3; } .kd.ok.on { background: #16a34a; color: #fff; }
.kd.err:hover { color: #b91c1c; background: #fef2f2; } .kd.err.on { background: #dc2626; color: #fff; }
/* Prior bike: a small card inside the child's block (red when a bike was handed over before, green when none) */
.kid-prior { margin: 4px 0 10px 38px; padding: 10px 14px; border: 1px solid; border-radius: 12px; font-size: 13px; }
.kid-prior.bad { background: #fef5f5; border-color: #f5c9c9; color: #991b1b; }
.kid-prior.ok { background: #f3fbf6; border-color: #c4e8d1; color: #166534; }
.kid-prior p { margin: 4px 0 0; }
.kid-prior a { color: inherit; font-weight: 600; }
.kp-head { display: flex; align-items: center; gap: 8px; }
.kp-head .muted { margin-left: auto; }
.kp-facts { display: flex; flex-wrap: wrap; gap: 6px 24px; margin: 8px 0 0; }
.kp-facts dt { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; opacity: .75; }
.kp-facts dd { margin: 0; font-weight: 600; color: var(--ink, #1f2433); }
.kp-more { padding-top: 6px; border-top: 1px dashed currentColor; border-color: #f5c9c9; }
@media (max-width: 640px) { .kid-prior { margin-left: 0; } }
.kid-note { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #b91c1c; margin: -2px 0 8px 38px; }
.kid-serial { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 13px; }
.kid-sum { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; }
.kid-sum .sti { width: 16px; height: 16px; flex-basis: 16px; margin-left: 6px; }
.kid-sum .sti svg { width: 10px; height: 10px; }
.link-btn { border: 0; background: none; padding: 0; color: var(--brand); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; }

/* Fulfillment: handover steps */
.ho-docs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.ho-step { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 14px 0 8px; font-size: 14px; }
.ho-sched { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ho-sched .input { flex: 1; min-width: 160px; }
/* The pickup / delivery date and time box is only as wide as the date needs. */
.ho-sched #ho-at { flex: 0 0 auto; width: 230px; min-width: 0; }
.ho-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.ho-row + .ho-row { margin-top: 6px; }
.ho-row.done { border-color: #bfe8cf; background: #f6fcf8; }
.ho-n { flex: 0 0 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; background: #fff3db; color: #b45309; }
.ho-row.done .ho-n { background: #16a34a; color: #fff; }
.ho-n svg { stroke-width: 3; }
.ho-who { display: grid; min-width: 140px; flex: 1; }
.ho-who small { color: var(--muted); }
.ho-size, .ho-method { width: auto; padding: 4px 28px 4px 8px; font-size: 12.5px; }
.ho-who .ho-size { justify-self: start; margin-top: 4px; }
.ho-step .ho-method { font-weight: 700; margin-left: 4px; }
.ho-serial { width: 180px; flex: 0 1 180px; text-transform: uppercase; }
.ho-photo.picked { border-color: #16a34a; color: #15803d; }
.ho-file { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 640px) {
  .ho-serial { flex: 1 1 100%; width: auto; }
  .kid-dec { width: 100%; justify-content: stretch; } .kd { flex: 1; justify-content: center; }
}

/* Guardian info as plain lines, no labels */
.who-lines { display: grid; gap: 3px; font-size: 14px; line-height: 1.45; margin-bottom: 4px; }
.who-income { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Validation beside what it checks: in the free space of each document row, and beside the income line */
.dr-main { flex: 0 1 auto; }
.dr-gap { flex: 1; min-width: 0; font-size: 13px; color: var(--muted); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.35; padding: 0 8px; }
.dr-gap.good { color: #15803d; }
.dr-gap.bad { color: #b91c1c; }
.chk { display: flex; align-items: flex-start; gap: 6px; font-size: 13px; margin-bottom: 6px; }
.chk.inline { display: inline-flex; margin: 0; align-items: center; }
.chk.red { color: #b91c1c; } .chk.green { color: #15803d; }
.chk .sti { width: 16px; height: 16px; flex-basis: 16px; } .chk .sti svg { width: 10px; height: 10px; }
.chg-flag { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: #b91c1c; cursor: help; }
@media (max-width: 760px) { .dr-gap { flex-basis: 100%; order: 3; padding: 0; } }

/* Users */
.u-bulk { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.u-check { width: 36px; }
.u-check input { width: 16px; height: 16px; cursor: pointer; }
.u-table tr.u-off td { color: var(--muted); }
.u-table tr.u-picked td { background: #f1f6ff; }
.th-sort { border: 0; background: none; padding: 0; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; }
.th-sort.on { color: var(--brand); }
.th-sort.on::after { content: attr(data-dir); margin-left: 4px; }


/* Red warning box (Users: disable sign-in) */
.danger-box { display: flex; gap: 10px; padding: 12px 14px; border-radius: 10px; background: #fef2f2; border: 1px solid #fca5a5; color: #7f1d1d; margin-bottom: 14px; }
.danger-box > svg { color: #dc2626; flex: 0 0 auto; }

/* Documents: project documentation in tabs */
.doc-tabs { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--line); margin-bottom: 14px; scrollbar-width: none; }
.doc-tabs::-webkit-scrollbar { display: none; }
.doc-tab { flex: 0 0 auto; border: 0; background: none; padding: 9px 14px; font: inherit; font-weight: 600; font-size: 14px; color: var(--ink-soft);
  border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; white-space: nowrap; }
.doc-tab:hover { color: var(--ink); }
.doc-tab.on { color: var(--brand); border-bottom-color: var(--brand); }
.doc-view { padding: 22px 28px 28px; font-size: 14.5px; line-height: 1.6; max-width: 980px; }
.doc-view h1 { font-size: 24px; margin: 0 0 12px; }
.doc-view h2 { font-size: 19px; margin: 26px 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.doc-view h3 { font-size: 16px; margin: 18px 0 6px; }
.doc-view p, .doc-view ul, .doc-view ol { margin: 0 0 10px; }
.doc-view code { font-family: Consolas, monospace; font-size: 12.5px; background: #f4f6fc; padding: 1px 5px; border-radius: 4px; }
.doc-view pre { background: #f4f6fc; padding: 10px 12px; border-radius: 8px; overflow-x: auto; }
.doc-view pre code { background: none; padding: 0; }
.doc-view blockquote { margin: 10px 0; padding: 8px 14px; border-left: 4px solid #f59e0b; background: #fff8eb; border-radius: 0 8px 8px 0; }
.doc-table { overflow-x: auto; margin: 8px 0 14px; }
.doc-view table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
.doc-view th, .doc-view td { border: 1px solid var(--line); padding: 6px 10px; text-align: left; vertical-align: top; }
.doc-view th { background: #f7f9fe; }
.doc-view .mermaid { text-align: center; margin: 12px 0; overflow-x: auto; }
@media (max-width: 760px) { .doc-view { padding: 16px; } }

/* Audit Logs: tab counts and the email viewer */
.doc-tab .tab-n { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--bg-2); color: var(--ink-soft); font-size: 12px; font-weight: 700; }
.doc-tab.on .tab-n { background: #e2ecfe; color: var(--brand-dark); }
.email-subject { max-width: 420px; overflow-wrap: anywhere; margin-bottom: 4px; }
.modal.email-view { max-width: 780px; }
.email-meta { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; margin: 0 0 16px; font-size: 14px; }
.email-meta dt { color: var(--muted); font-weight: 600; }
.email-meta dd { margin: 0; overflow-wrap: anywhere; }
.email-files { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.email-files li { display: flex; align-items: center; gap: 6px; }
.email-frame { width: 100%; height: 420px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.email-text { margin: 0; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-1); white-space: pre-wrap; overflow-wrap: anywhere; font: 13px/1.5 var(--font); }

/* Notices of Assessment: one full-width tile per year, the income box under its notice */
.noa-tiles { display: grid; gap: 22px; }
.noa-tile { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 20px 22px; box-shadow: var(--shadow); }

/* Income step: the children to apply for */
.pick-list { display: grid; gap: 10px; margin-bottom: 14px; }
.pick-child { padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }

/* Bike size page: the pictures are the choice; sizes outside the age are greyed out */
.size-guide.pick { margin-top: 0; }
.size-guide.pick .sg { position: relative; cursor: pointer; border: 2px solid transparent; transition: border-color .15s, box-shadow .15s; }
.size-guide.pick .sg:hover { box-shadow: var(--shadow); }
.size-guide.pick .sg.on { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(47, 91, 227, .15); }
.size-guide.pick .sg.off { opacity: .45; filter: grayscale(1); cursor: not-allowed; box-shadow: none; }
.size-guide.pick input { position: absolute; opacity: 0; width: 0; height: 0; }
.size-picked { display: flex; align-items: center; gap: 6px; margin: 12px 0 0; font-weight: 600; color: var(--ok); }

/* Admin: tablet Handover screen. Big touch targets, one task per screen, no sidebar (body.kiosk). */
body.kiosk .admin-nav, body.kiosk .admin-tabbar { display: none !important; }
body.kiosk .admin-content { margin-left: 0; padding: 16px; }
.hv { max-width: 760px; margin: 0 auto; display: grid; gap: 14px; }
.hv-big { min-height: 56px; font-size: 17px; padding: 0 22px; justify-content: center; }
.hv-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.hv-tile { display: grid; place-items: center; gap: 8px; min-height: 120px; border: 2px solid var(--line); border-radius: 18px; background: #fff; color: var(--ink); font-size: 20px; cursor: pointer; }
.hv-tile.on { border-color: var(--brand); background: #eef2ff; color: var(--brand-dark); }
.hv-find { display: grid; grid-template-columns: auto 1fr; gap: 10px; }
.hv-q { min-height: 56px; font-size: 17px; }
.hv-cam { display: grid; gap: 8px; justify-items: center; }
.hv-cam video { width: 100%; max-height: 50vh; border-radius: 14px; background: #000; object-fit: cover; }
.hv-list { display: grid; gap: 8px; }
.hv-order { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 12px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: #fff; color: var(--ink); text-decoration: none; }
.hv-order:hover { border-color: var(--brand); }
.hv-num { font-size: 22px; font-weight: 800; color: var(--navy); }
.hv-name { font-size: 18px; font-weight: 600; }
.hv-empty { text-align: center; padding: 24px; }
.hv-head { display: flex; justify-content: space-between; align-items: center; }
.hv-head .btn svg { transform: rotate(180deg); }
.hv-who { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.hv-who .hv-num { font-size: 32px; }
.hv-who .hv-name { font-size: 24px; }
.hv-sum { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--ink-soft); }
.hv-sum span { display: inline-flex; align-items: center; gap: 6px; }
.hv-check { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 2px solid var(--line); border-radius: 14px; background: #fff; cursor: pointer; font-size: 16px; }
.hv-check input { width: 24px; height: 24px; flex: none; }
.hv-check .hv-stack { display: grid; gap: 2px; }
.hv-check.on { border-color: #16a34a; background: #f0fdf4; }
.hv-bike { display: grid; gap: 10px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.hv-bike.done { border-color: #86efac; }
.hv-bike-head { display: flex; align-items: center; gap: 10px; font-size: 17px; }
.hv-serial { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; }
.hv-serial .btn, .hv-sn { min-height: 48px; }
.hv-sn { font-size: 17px; letter-spacing: .04em; text-transform: uppercase; }
.hv-sn::placeholder { text-transform: none; letter-spacing: 0; }
.hv-shot.picked { border-color: #16a34a; color: #15803d; }
.hv-helmet { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.hv-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.hv-seg button { min-height: 44px; min-width: 76px; padding: 0 14px; border: 0; border-left: 1px solid var(--line); background: #fff; color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; }
.hv-seg button:first-child { border-left: 0; }
.hv-seg button.on { background: var(--brand); color: #fff; }
.hv-hint { text-align: center; margin: -6px 0 0; }
.hv-parent h2, .hv-thanks h2 { margin: 0; font-size: 26px; }
.hv-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.hv-items li { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.hv-pick { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.hv-pick legend { font-weight: 700; margin-bottom: 8px; }
.hv-radio { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 16px; border: 2px solid var(--line); border-radius: 14px; background: #fff; font-size: 17px; font-weight: 600; cursor: pointer; }
.hv-radio:has(input:checked) { border-color: var(--brand); background: #eef2ff; }
.hv-radio input { width: 22px; height: 22px; }
.hv-parent .sig-wrap canvas { height: 220px; }
.hv-actions { display: flex; justify-content: space-between; gap: 10px; }
.hv-thanks { justify-items: center; text-align: center; padding: 40px 0; }
.hv-thanks > svg { color: #16a34a; }
@media (max-width: 560px) {
  .hv-find, .hv-serial { grid-template-columns: 1fr; }
  .hv-order { grid-template-columns: 1fr auto; }
}

/* Admin review, ready for pickup or delivery: only the Deployment Method form until "View application" */
.rv-layout.handover-only { grid-template-columns: minmax(0, 1fr); }
.rv-layout.handover-only .rv-side,
.rv-layout.handover-only .rv-main > :not(#decision-bar) { display: none; }
/* Admin: delivery by our team, the address with its Edit button */
.ho-addr { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 4px 0 8px; }
.ho-addr > span { flex: 1; min-width: 200px; }
/* Admin: Ship step, Canpar shipment actions */
.ho-canpar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 4px 0 8px; }
.ho-canpar > span { flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; }
.ho-canpar-off { margin: 2px 0 8px; }
.upload .field-label { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
/* Handover: shipping boxes, the Canpar price and the printed documents */
.hv-docs { display: flex; flex-wrap: wrap; gap: 8px; }
.hv-manual { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hv-manual .input { min-height: 48px; }
.hv-box { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.hv-box .input { width: 96px; min-height: 44px; text-align: center; padding-left: 6px; padding-right: 6px; }
.hv-price { display: flex; justify-content: center; align-items: baseline; gap: 12px; }
.hv-price b { font-size: 34px; color: var(--navy); }
@media (max-width: 560px) { .hv-manual { grid-template-columns: 1fr; } }
.admin-table .total-row td { border-top: 2px solid var(--line); }
#hv-ship { display: grid; gap: 14px; }
.hv-idline { display: block; }
.hv-expired { color: var(--err, #dc2626); font-weight: 700; display: inline-flex; align-items: center; gap: 3px; }
.hv-order.today { border-color: #86efac; background: #f0fdf4; }
.hv-name .hv-when { display: block; font-size: 13px; font-weight: 500; }
.hv-today { color: #15803d; font-weight: 700 !important; }
.hv-overdue { color: var(--err, #dc2626); display: flex !important; align-items: center; gap: 4px; }
.hv-quote-why { text-align: center; margin: -8px 0 0; }

/* Handover animations: short, so the desk never waits on them; off when the device asks for less motion. */
@keyframes hv-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes hv-slide { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
@keyframes hv-pop { 0% { transform: scale(.4); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }
@keyframes hv-glow { 0% { box-shadow: 0 0 0 0 rgba(22, 163, 74, .45); } 100% { box-shadow: 0 0 0 14px rgba(22, 163, 74, 0); } }
@keyframes hv-draw { to { stroke-dashoffset: 0; } }
.hv-enter { animation: hv-in .28s ease-out; }
.hv-enter .hv-order { animation: hv-in .3s ease-out both; animation-delay: calc(var(--i, 0) * 45ms); }
.hv-parent { animation: hv-slide .35s ease-out; }
.hv-tile, .hv-order, .hv-check, .hv-radio, .hv-seg button, .hv-big { transition: transform .12s ease, background-color .2s ease, border-color .2s ease, color .2s ease; }
.hv-tile:active, .hv-order:active, .hv-radio:active, .hv-seg button:active, .hv-big:not(:disabled):active { transform: scale(.97); }
.hv-bike { transition: border-color .3s ease; }
.hv-bike.just-done { animation: hv-glow .7s ease-out; }
.hv-bike.just-done .ho-n { animation: hv-pop .4s ease-out; }
.hv-done:not(:disabled) { animation: hv-glow .9s ease-out; }
.hv-cam:not([hidden]) { animation: hv-in .25s ease-out; }
.hv-thanks > * { animation: hv-in .4s ease-out both; }
.hv-thanks > :nth-child(2) { animation-delay: .25s; }
.hv-thanks > :nth-child(3) { animation-delay: .35s; }
.hv-thanks > :nth-child(4) { animation-delay: .45s; }
.hv-tick { display: grid; place-items: center; width: 88px; height: 88px; border-radius: 50%; background: #dcfce7; color: #16a34a;
  animation: hv-pop .45s ease-out both !important; }
.hv-tick svg path { stroke-dasharray: 30; stroke-dashoffset: 30; animation: hv-draw .45s .3s ease-out forwards; }
@media (prefers-reduced-motion: reduce) {
  .hv *, .hv { animation: none !important; transition: none !important; }
  .hv-tick svg path { stroke-dashoffset: 0; }
}
/* Reports: filters above the table */
.rp-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; margin: 4px 0 16px; }
.rp-filters label { display: grid; gap: 4px; font-size: 12px; font-weight: 600; color: var(--ink-soft, #626a86); }
.rp-filters .input { min-width: 140px; }
.rp-over { color: var(--err, #dc2626); font-weight: 600; }
/* Rules page: LICO on the left, Notice of Assessment and Requires More Information stacked on the right; one column
   on narrow screens. Fields keep a width that fits their data. */
.rules-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.rules-side { display: grid; gap: 16px; }
.rule-sec { padding: 16px 18px; }
.rule-sec h3 { margin: 0 0 4px; font-size: 15px; }
.rule-sec .muted.small { margin: 8px 0 0; }
.rule-def { margin: 0 0 12px; font-size: 13px; line-height: 1.45; color: var(--ink-soft, #626a86); }
.rule-field { display: inline-grid; gap: 4px; font-size: 12px; font-weight: 600; color: var(--ink-soft, #626a86); }
.rule-field .input { width: 200px; max-width: 100%; }
.rule-pair { display: flex; flex-wrap: wrap; gap: 12px 16px; }
.rule-pair .input { width: 140px; }
.rule-table { width: 100%; max-width: 380px; border-collapse: collapse; margin-top: 12px; font-size: 13px; }
.rule-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft, #626a86); padding: 4px 6px; }
.rule-table td { padding: 3px 6px; border-top: 1px solid var(--line, #e7e9f2); }
.rule-money { display: inline-flex; align-items: center; gap: 4px; }
.rule-money .input { width: 110px; }
.rule-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
@media (max-width: 1000px) { .rules-layout { grid-template-columns: minmax(0, 1fr); } }
/* Activity report: section headings, two sections side by side (stacked on narrow screens), five totals in a row */
.rp-h { margin: 22px 0 10px; font-size: 15px; }
.rp-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.rp-cols > .card { margin-top: 0; }
.kpi-grid.kpi-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
#rp-data { margin-top: 18px; }
@media (max-width: 1200px) { .rp-cols { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) {
  .kpi-grid.kpi-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Helmet: each choice labelled (Colour, Size) above its buttons */
.hv-helmet { align-items: flex-end; gap: 10px 16px; }
.hv-helmet-title { align-self: center; min-width: 56px; }
.hv-helmet-pick { display: grid; gap: 4px; }
.hv-helmet-label { font-size: 12px; font-weight: 600; color: var(--ink-soft, #626a86); text-transform: uppercase; letter-spacing: .04em; }
/* Handover, delivery by our team: where the bikes go, under the name */
.hv-addr { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 12px; background: #ecfeff; color: #155e75; font-size: 15px; }
@media (max-width: 560px) { .hv-tiles { grid-template-columns: 1fr 1fr 1fr; gap: 8px; } .hv-tile { min-height: 96px; font-size: 16px; } }
/* Review step: signing and attesting comes last, after the summary */
.rv-sign { margin-top: 22px; }
.rv-attest { margin: 6px 0 12px; line-height: 1.55; }
/* Upload on one half, the example beside it on the other half, in one 60 px row (phones too). */
.up-row.with-sample { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.up-row.with-sample .up-slot { display: flex; flex-direction: column; justify-content: center; min-width: 0; min-height: 60px; }
.up-row.with-sample .dropzone { flex: 1; height: 60px; padding: 0 12px; gap: 10px; }
.up-row.with-sample .dropzone .cloud { flex: 0 0 34px; height: 34px; border-radius: 10px; }
.up-row.with-sample .dropzone .cloud svg { width: 18px; height: 18px; }
.up-row.with-sample .dropzone .dz-text b { font-size: 13px; line-height: 1.25; }
.up-row.with-sample .file-chip { min-height: 60px; padding: 8px 10px; gap: 10px; }
.up-row.with-sample .file-chip .meta { min-width: 0; flex: 1 1 auto; }
.up-row.with-sample .file-chip .meta b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* No box: the eye and "Example" sit right beside the upload, like a link. */
.up-sample { justify-self: start; align-self: center; display: inline-flex; align-items: center; padding: 6px 4px; border: 0;
  background: none; cursor: pointer; font: inherit; }
.up-sample:hover span, .up-sample:focus-visible span { text-decoration: underline; }
.up-sample:focus-visible { outline: 2px solid var(--focus, #2f5be3); outline-offset: 2px; border-radius: 6px; }
/* A small eye icon and the word in the brand colour. */
.up-sample span { display: inline-flex; align-items: center; gap: 4px; color: var(--brand, #2f5bd3); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
@media (max-width: 560px) {
  .up-row.with-sample { gap: 8px; }
  .up-row.with-sample .dropzone { padding: 0 8px; gap: 6px; }
  .up-row.with-sample .dropzone .cloud { flex-basis: 28px; height: 28px; }
  .up-row.with-sample .dropzone .dz-text b { font-size: 12px; }
}
/* Tablet pickup: switch to delivery when the family cannot take the bike home */
.hv-switch { margin-top: 10px; }
/* Application panel: an application's key facts over the page */
.app-panel .ap-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 12px; }
.ap-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px 18px; margin: 0 0 14px; }
.ap-facts dt { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft, #626a86); }
.ap-facts dd { margin: 2px 0 0; font-size: 14px; overflow-wrap: anywhere; }
.ap-kids { width: 100%; border-collapse: collapse; font-size: 13px; }
.ap-kids th { text-align: left; font-size: 11px; text-transform: uppercase; color: var(--ink-soft, #626a86); padding: 4px 6px; }
.ap-kids td { padding: 6px; border-top: 1px solid var(--line, #e7e9f2); }
/* Data import: the staged file, its actions and rows with problems */
.hi-staged { padding: 16px 18px; margin-bottom: 18px; }
.hi-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 10px; }
.hi-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; margin-bottom: 10px; }
.hi-only { margin-right: auto; font-size: 13px; display: inline-flex; gap: 6px; align-items: center; }
.admin-table tr.hi-bad td { background: #fff6f6; }
.hi-staged td:last-child { min-width: 260px; }
.hi-staged td:nth-child(4), .hi-staged td:nth-child(7) { white-space: nowrap; }
/* Activity report: the workbook sheet downloads under the data button */
.rp-sheets { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 12px; }
.rp-sheets > .muted { flex-basis: 100%; }