/* Applicant form additions (loaded after app.css, before theme.css) */
.brand-row { display: flex; align-items: center; gap: 12px }
.brand-row img.logo { height: 48px; width: auto; max-width: 160px; object-fit: contain; background: #fff; border-radius: 10px; padding: 4px }
.band .intro { margin-top: 10px; opacity: .88; font-size: 14px; white-space: pre-line; max-width: 52ch }
.lift-first:empty { display: none }
.two { display: grid; grid-template-columns: 1fr; gap: 14px }
@media (min-width: 520px) { .two { grid-template-columns: 1fr 1fr } }
.date-row { display: grid; grid-template-columns: 1fr 1.5fr 1.2fr; gap: 8px }
.date-row .input { padding-inline: 10px 28px }
select.input { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6D70' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-position: left 10px center; background-size: 16px; background-repeat: no-repeat; padding-left: 32px }
.age-pill { display: inline-block; font-size: 12px; font-weight: 700; padding: 0 10px; border-radius: 99px; background: var(--brass-soft); color: var(--fg); margin-inline-start: 6px }
.suffix-wrap { position: relative }
.suffix-wrap .input { padding-left: 52px }
.suffix { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 14px; pointer-events: none }
fieldset.levels { border: 0; padding: 0; margin: 0; min-width: 0 }
fieldset.levels legend { font-weight: 500; font-size: 14.5px; padding: 0; margin-bottom: 6px }
.level-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px }
@media (max-width: 360px) { .level-grid { grid-template-columns: 1fr } }
.lv { position: relative; display: flex; flex-direction: column; gap: 4px; border: 1.5px solid var(--line-2); border-radius: 14px; padding: 14px 12px 12px; cursor: pointer; background: var(--surface-2); transition: border-color .15s, box-shadow .15s, background .15s; min-height: 108px }
.lv input { position: absolute; opacity: 0; pointer-events: none }
.lv .lv-name { font-weight: 800; font-size: 15.5px; direction: ltr; text-align: right; letter-spacing: .01em }
.lv .lv-name em { font-style: normal; color: var(--brass) }
.lv .lv-desc { font-size: 12.5px; color: var(--muted); line-height: 1.7 }
.lv .lv-dots { display: flex; gap: 3px; direction: ltr; justify-content: flex-end }
.lv .lv-dots i { width: 14px; height: 4px; border-radius: 2px; background: var(--line-2) }
.lv .lv-dots i.on { background: var(--brass) }
.lv .lv-tick { position: absolute; top: 10px; left: 10px; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--line-2); display: grid; place-items: center; color: #fff }
.lv .lv-tick svg { width: 14px; height: 14px; opacity: 0 }
.lv:has(input:checked) { border-color: var(--ink-3); background: var(--surface); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink-3) 20%, transparent) }
.lv:has(input:checked) .lv-tick { background: var(--ink-3); border-color: var(--ink-3) }
.lv:has(input:checked) .lv-tick svg { opacity: 1 }
.lv:has(input:focus-visible) { outline: 2px solid var(--brass); outline-offset: 2px }
.lv .lv-sug { position: absolute; top: -9px; right: 10px; font-size: 11px; font-weight: 700; background: var(--brass); color: #fff; padding: 0 8px; border-radius: 99px }
.field.err .level-grid .lv { border-color: var(--bad) }
.lbl { font-weight: 500; font-size: 14.5px }
.opt { color: var(--muted); font-weight: 400; font-size: 13px }
.drop { display: flex; align-items: center; gap: 12px; border: 2px dashed var(--line-2); border-radius: 14px; padding: 14px; cursor: pointer; background: var(--surface-2); transition: border-color .15s, background .15s }
.drop:hover, .drop.over { border-color: var(--ink-3); background: var(--surface) }
.drop-ic { width: 44px; height: 44px; border-radius: 12px; background: var(--brass-soft); display: grid; place-items: center; color: var(--brass); flex-shrink: 0 }
.drop-ic svg { width: 22px; height: 22px }
.drop-txt b { display: block; font-size: 14.5px }
.drop-txt small { color: var(--muted); font-size: 12.5px }
.file-chip { display: flex; align-items: center; gap: 10px; border: 1.5px solid var(--ok); background: var(--ok-bg); border-radius: 12px; padding: 10px 12px }
.file-chip .fi { color: var(--ok); width: 24px; height: 24px; flex-shrink: 0 }
.file-chip .fi svg { width: 24px; height: 24px }
.file-chip b { display: block; font-size: 14px; word-break: break-all; line-height: 1.5 }
.file-chip small { color: var(--muted); font-size: 12px }
.field.err .drop { border-color: var(--bad) }
.hp { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip-path: inset(50%); pointer-events: none }
.progress { height: 8px; border-radius: 99px; background: var(--line); overflow: hidden }
.progress i { display: block; height: 100%; width: 0; background: var(--brass); transition: width .2s }
.foot p { white-space: pre-line; margin-bottom: 8px }
/* content blocks */
.blk { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow) }
.blk img { width: 100%; height: auto; display: block }
.blk .blk-body { padding: 16px 18px }
.blk h3 { font-size: 17px; margin-bottom: 4px }
.blk p { white-space: pre-line; color: var(--muted); font-size: 14px; line-height: 1.9 }
.blk a.more { display: inline-block; margin-top: 8px; font-weight: 700; color: var(--ink-3) }
.blk.img-only .blk-body { display: none }
/* success page */
.done-card { text-align: center }
.done-tick { width: 72px; height: 72px; border-radius: 50%; background: var(--ok-bg); color: var(--ok); display: grid; place-items: center; margin: 0 auto 10px }
.done-tick svg { width: 38px; height: 38px }
.done-card h1 { font-size: 23px }
.done-card .msg-big { color: var(--muted); margin-top: 8px; white-space: pre-line; line-height: 2 }
.track { margin: 18px auto 0; border: 1.5px dashed var(--brass); border-radius: 14px; padding: 12px; max-width: 320px; background: var(--brass-soft) }
.track span { font-size: 12.5px; color: var(--muted) }
.track b { display: block; font-size: 22px; letter-spacing: .08em; direction: ltr; font-variant-numeric: tabular-nums }
.summary { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; text-align: right; margin: 16px auto 0; max-width: 320px; font-size: 14px }
.summary dt { color: var(--muted) }
.summary dd { margin: 0; font-weight: 700 }