/*
 * The applicant's own page at /driver-joining: the status card and the steps.
 *
 * Page-scoped, on top of site.css and the training page's card (driver-training.css), whose shell
 * it shares: the frame, the language switch, the buttons and the notices are the `dt-` ones. Every
 * colour is a site.css token; this file declares none. Everything here is prefixed `jn-`.
 */

.jn-frame { min-height: auto; max-width: 600px; }

/* Who the page is for, beside the way out. */
.jn-who { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 26px; font-size: 14px; color: var(--muted); }
.jn-who form { margin: 0; }
.jn-link { background: none; border: none; padding: 6px 0; font: inherit; font-weight: 600; color: var(--brand-d); cursor: pointer; text-decoration: underline; }

/* The status card: a heading, one sentence, at most one button. */
.jn-card { border-radius: 20px; padding: 18px 20px; background: color-mix(in srgb, var(--brand) 7%, #fff); border: 1px solid color-mix(in srgb, var(--brand) 18%, #fff); }
.jn-card h2 { margin: 0 0 6px; }
.jn-card p { color: var(--ink); }
.jn-card--complete { background: color-mix(in srgb, var(--green-t) 8%, #fff); border-color: color-mix(in srgb, var(--green-t) 22%, #fff); }
.jn-btn { display: inline-block; margin-top: 14px; }

/* The steps, numbered by the list itself so a screen reader counts them too. */
.jn-steps { margin-top: 22px; }
.jn-list { margin: 8px 0 0; padding-left: 1.5em; }
.jn-list li::marker { color: var(--muted); font-weight: 600; }
.jn-step { padding: 12px 0; border-bottom: 1px solid var(--line); }
.jn-step:last-child { border-bottom: none; }
/* The one line under the steps that opens the whole joining as a diagram (/how-it-works/drivers). */
.jn-how { margin: 20px 0 0; font-size: 15px; }
.jn-how a { color: var(--brand-d); font-weight: 600; }
.jn-step-head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 10px; flex-wrap: wrap; }
.jn-step h3 { margin: 0; font-size: 16px; font-weight: 600; color: var(--ink); }
.jn-step--later h3 { color: var(--muted); }
.jn-step p { margin: 4px 0 0; font-size: 14.5px; }
.jn-state { font-size: 12.5px; font-weight: 700; padding: 3px 10px; border-radius: var(--radius-pill); white-space: nowrap; }
.jn-state--done { background: color-mix(in srgb, var(--green-t) 12%, #fff); color: var(--green-t); }
.jn-state--your_turn { background: var(--brand-d); color: #fff; }
.jn-state--checking { background: color-mix(in srgb, var(--blue-t) 10%, #fff); color: var(--blue-t); }
.jn-state--later { background: color-mix(in srgb, var(--line) 45%, #fff); color: var(--muted); }
.jn-stores { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.jn-stores a { color: var(--brand-d); font-weight: 600; }

.jn-form { margin-top: 4px; }
.jn-error { color: var(--danger); font-size: 14px; margin-top: 6px; }
.dt-field input[aria-invalid="true"] { border-color: var(--danger); }

@media (max-width: 460px) {
  .jn-who { padding: 0 18px; }
}

/* The step pages: the way back, and the documents page's papers and their forms. */
.jn-back { margin: 0 0 4px; font-size: 14px; }
.jn-back a { color: var(--brand-d); font-weight: 600; }
.jn-paper { margin-top: 18px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.jn-paper:focus { outline: 2px solid var(--brand-d); outline-offset: 2px; }
.jn-paper h3 { margin: 0; font-size: 17px; font-weight: 600; color: var(--ink); }
.jn-paper > * + * { margin-top: 10px; }
.jn-caption { font-size: 14px; color: var(--muted); }
.jn-kind { margin: 16px 0 0; font-size: 15px; font-weight: 600; color: var(--ink); }
.jn-note { font-size: 14px; color: var(--ink-70); }
.jn-slot { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.jn-slot .dt-field { margin-top: 8px; }
.jn-side-state { margin-left: 6px; font-weight: 600; text-transform: none; letter-spacing: 0; }
.jn-slot input[type="file"], .jn-slot input[type="date"] { padding: 10px 12px; font-size: 15px; }
.jn-chip--valid { background: color-mix(in srgb, var(--green-t) 12%, #fff); color: var(--green-t); }
.jn-chip--expiring { background: color-mix(in srgb, var(--yellow) 30%, #fff); color: var(--ink); }
.jn-chip--missing, .jn-chip--expired, .jn-chip--rejected { background: color-mix(in srgb, var(--danger) 9%, #fff); color: var(--danger); }

/* Joining flow v2: the document camera (site.joining.capture, public/js/document-capture.js). */
.jn-side { font-weight: 600; color: var(--ink); }
.jn-qr { width: min(260px, 70vw); }
.jn-qr svg { display: block; width: 100%; height: auto; }
.dc-overlay { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; z-index: 2147483000; background: #000; color: #fff; overflow: hidden; overscroll-behavior: contain; }
.dc-overlay[hidden] { display: none; }
.dc-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.dc-shade { position: absolute; border-radius: 14px; border: 2.5px solid #fff; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .55); pointer-events: none; }
.dc-shade.is-ready { border: 4px solid var(--green-t, #4f7d0e); }
.dc-found { position: absolute; border: 2px solid #b98cef; pointer-events: none; }
.dc-top { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 8px; padding: 14px 12px; }
.dc-title { flex: 1; margin: 0; font-size: 16px; font-weight: 600; text-align: center; color: #fff; }
.dc-icon { width: 48px; height: 48px; border: 0; border-radius: 999px; background: rgba(0, 0, 0, .35); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.dc-icon[aria-pressed="true"] { background: rgba(255, 255, 255, .3); }
.dc-bottom { position: absolute; left: 0; right: 0; bottom: 28px; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 0 20px; }
.dc-line, .dc-error { margin: 0; padding: 8px 18px; border-radius: 999px; background: rgba(0, 0, 0, .6); font-weight: 600; text-align: center; color: #fff; }
.dc-error { background: rgba(140, 20, 20, .85); border-radius: 14px; }
.dc-shutter { width: 76px; height: 76px; border-radius: 50%; border: 4px solid #fff; background: #fff; background-clip: content-box; padding: 6px; cursor: pointer; }
.dc-shutter:disabled { opacity: .35; cursor: default; }
.dc-review { position: absolute; inset: 0; background: #000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 24px; }
.dc-review img { max-width: 100%; max-height: 60vh; border-radius: 12px; }
.dc-actions { display: flex; gap: 12px; width: 100%; max-width: 420px; }
.dc-actions .dt-btn { flex: 1; }
.dc-review .dc-title { flex: none; }

/* Joining flow v2's papers, one card per paper (site.joining.paper-v2). */
.jn-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.jn-card-hint { margin: 6px 0 0; font-size: 14px; color: var(--ink-70); }
.jn-chip--later { background: var(--bg, #f4f1fa); color: var(--brand-d, #6b2fb3); }
.jn-seg { display: flex; margin-top: 14px; padding: 4px; border-radius: 999px; background: #f1ecfa; }
.jn-seg-option { flex: 1; position: relative; }
.jn-seg-option input { position: absolute; opacity: 0; inset: 0; }
.jn-seg-option span { display: block; padding: 9px 12px; border-radius: 999px; text-align: center; font-weight: 600; font-size: 15px; color: var(--ink-70); cursor: pointer; }
.jn-seg-option input:checked + span { background: #fff; color: var(--ink); box-shadow: 0 1px 4px rgba(40, 20, 80, .12); }
.jn-seg-option input:focus-visible + span { outline: 2px solid var(--brand-d); outline-offset: 2px; }
/* The kind not chosen is hidden; with no support for :has, the script does the same. */
.jn-card:has(.jn-seg input[value="passport"]:checked) .jn-tiles[data-kind="id_card"],
.jn-card:has(.jn-seg input[value="id_card"]:checked) .jn-tiles[data-kind="passport"] { display: none; }
.jn-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-top: 14px; }
.jn-tile { margin: 0; }
.jn-tile-btn { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; padding: 10px 10px 12px; border: 1.5px dashed #c9b6ef; border-radius: 16px; background: #fbf9ff; cursor: pointer; font: inherit; color: var(--ink); }
.jn-tile-btn img { width: 100%; max-width: 160px; height: auto; aspect-ratio: 1; border-radius: 12px; }
.jn-tile-label { font-weight: 600; font-size: 15px; }
.jn-tile-state { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; color: var(--brand-d, #6b2fb3); font-weight: 600; }
.jn-tile.is-sent .jn-tile-btn { border-style: solid; border-color: #b9d99a; background: #f7fbf2; }
.jn-tile.is-sent .jn-tile-state { color: var(--green-t, #4f7d0e); }
.jn-tile.is-rejected .jn-tile-btn { border-style: solid; border-color: #e3a3a3; }
.jn-tile.is-rejected .jn-tile-state { color: #a32020; }
.jn-expiry { margin-top: 14px; }
.jn-expiry label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.jn-expiry-row { display: flex; gap: 8px; }
.jn-expiry-row input { flex: 1; min-width: 0; }
.jn-tile-row { display: flex; gap: 12px; align-items: center; margin-top: 12px; }
.jn-tile-row img { width: 72px; height: 72px; border-radius: 12px; flex: none; }
.jn-tile-row .dt-field { flex: 1; min-width: 0; margin: 0; }
.jn-later { margin-top: 12px; }
.jn-later-check { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; cursor: pointer; }
.jn-later-check input { margin-top: 3px; width: 20px; height: 20px; flex: none; }
.jn-qr-expired[hidden] { display: none !important; }

/* Phones: every /driver-joining page fills the screen, as the training page's frame does there. */
@media (max-width: 460px) {
  .jn-frame { min-height: 100vh; min-height: 100dvh; }
}
.jn-continue-other { margin-top: 18px; }
/* The switch and the "send it later" line read as sentences, not as the field labels' small caps. */
.jn-seg-option, .jn-later-check, .jn-expiry label { text-transform: none; letter-spacing: normal; }
.jn-later-check span { font-size: 15px; font-weight: 400; color: var(--ink); }
.jn-seg-option, .jn-later-check { margin: 0; color: inherit; font-weight: inherit; }
.jn-seg-option { display: flex; } .jn-seg-option span { flex: 1; display: flex; align-items: center; justify-content: center; }
.dt-stage p.jn-continue-other, .dt-stage .jn-continue-other { margin-top: 22px; }
/* The side tile: picture, title, (state), then the action as its own pill. */
.jn-tile-btn { gap: 8px; }
.jn-tile-art { display: block; background: #efe8fb; }
.jn-tile-title { display: block; font-weight: 600; font-size: 16px; color: var(--ink); }
.jn-tile-done { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: var(--green-t, #4f7d0e); }
.jn-tile-done.is-rejected { color: #a32020; }
.jn-tile-action { display: block; margin-top: 2px; padding: 8px 14px; border-radius: 999px; background: var(--brand, #994fe7); color: #fff; font-weight: 600; font-size: 14px; }
.jn-tile.is-sent .jn-tile-action { background: #fff; color: var(--brand-d, #6b2fb3); border: 1.5px solid #d9c8f5; }
/* The card's header: title left, chip right on one row, centred with the title; a long title wraps
   and the chip stays top right. Then the one hint line, muted, 4px under the title, 14px to the tiles. */
.jn-card > .jn-card-head { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 12px; margin: 0; }
.jn-card > .jn-card-head h3 { flex: 1 1 auto; min-width: 0; margin: 0; line-height: 1.3; }
.jn-card > .jn-card-head .jn-state { flex: none; align-self: center; white-space: nowrap; }
.jn-card > .jn-card-hint { margin-top: 4px; font-size: 14px; color: var(--ink-70); }
.jn-card > .jn-seg, .jn-card > .jn-tiles { margin-top: 14px; }
/* The certificate's file tile (the real input sits inside it, visually hidden but focusable). */
.jn-file-tile { display: flex; align-items: center; gap: 12px; margin: 14px 0 0; padding: 10px; border: 1.5px dashed #c9b6ef; border-radius: 16px; background: #fbf9ff; cursor: pointer; text-transform: none; letter-spacing: normal; color: var(--ink); font-size: 15px; position: relative; }
.jn-file-tile .jn-tile-art { width: 72px; height: 72px; border-radius: 12px; flex: none; }
.jn-file-text { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.jn-file-tile .jn-tile-done { overflow-wrap: anywhere; }
.jn-file-tile.is-sent { border-style: solid; border-color: #b9d99a; background: #f7fbf2; }
.jn-file-tile.is-sent .jn-tile-action { background: #fff; color: var(--brand-d, #6b2fb3); border: 1.5px solid #d9c8f5; }
.jn-file-tile.is-rejected { border-style: solid; border-color: #e3a3a3; }
.jn-file-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); }
.jn-file-tile:focus-within { outline: 2px solid var(--brand-d); outline-offset: 2px; }
.jn-card[aria-busy="true"] { opacity: .6; transition: opacity .15s; }
/* Joining flow v2's way off the papers page (site.joining.papers-finish): one full-width button,
   greyed as the application form's Next is while a paper is still to send, the paper named under it. */
.jn-finish { margin-top: 26px; }
.jn-finish .dt-btn { display: block; }
.jn-finish .dt-btn[aria-disabled="true"] { opacity: .5; box-shadow: none; transform: none; cursor: not-allowed; }
.jn-finish-hint { margin: 10px 0 0; font-size: 14px; color: var(--muted); text-align: center; }