/* AIOT application journey — the same HXS journey form language as the ADR-SRI /enquire desk,
   painted with the AIOT academic palette. States carry meaning, never decoration:
   grey = not reached, blue = where you are, green = saved and correct, amber = needs you.
   Without JavaScript every panel stays visible and the form posts whole-page. */
.aiot-journey {
    --j-navy: var(--aiot-navy, #08275b);
    --j-blue: var(--aiot-blue, #1959bd);
    --j-bright: var(--aiot-bright, #2779e8);
    --j-gold: var(--aiot-gold, #f9bd16);
    --j-pale: var(--aiot-pale, #eef5ff);
    --j-line: var(--aiot-line, #d7e2f1);
    --j-ink: var(--aiot-ink, #11223f);
    --j-muted: var(--aiot-muted, #5d6c83);
    --j-ok: #0f7b4f;
    --j-alert: #c2410c;
    --j-alert-soft: rgba(194, 65, 12, .08);
}

/* ---------- apply page: the homepage shell, scaled for a form ---------- */
.aiot-apply-page { background: #f9fbff; }
.aiot-apply-hero { padding: clamp(2.1rem, 4.5vw, 3.4rem) clamp(1rem, 3vw, 2rem) clamp(1.6rem, 3vw, 2.4rem); }
.aiot-apply-hero h1 { max-width: 780px; font-size: clamp(1.85rem, 3.6vw, 3rem); line-height: 1.06; }
.aiot-apply-hero p { max-width: 720px; font-size: clamp(.98rem, 1.3vw, 1.1rem); }
.aiot-apply-section { display: grid; gap: 1.15rem; max-width: 940px; padding-top: clamp(1.4rem, 3vw, 2.2rem); padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.aiot-apply-section .aiot-note { margin: 0; }
.aiot-apply-alt { margin: 0; text-align: center; color: var(--j-muted); font-size: .92rem; }
.aiot-apply-alt a { color: var(--j-blue); font-weight: 800; }

.aiot-j-card {
    position: relative;
    margin-top: 0;
    padding: 1.5rem clamp(1.05rem, 3vw, 2.2rem) 1.9rem;
    background: #fff;
    border: 1px solid var(--j-line);
    border-radius: 10px;
    box-shadow: var(--aiot-shadow, 0 16px 42px rgba(8, 39, 91, .12));
}

/* Server refusals land in the house error language, not a second design system. */
.aiot-j-alert {
    margin: 0 0 1.5rem;
    padding: .9rem 1rem;
    border: 1px solid #f0c4c4;
    border-left: 4px solid #c62828;
    border-radius: 7px;
    background: #fff1f1;
    color: #8d1b1b;
    font-size: .92rem;
}
.aiot-j-alert strong { display: block; margin-bottom: .35rem; color: #8d1b1b; }
.aiot-j-alert ul { margin: 0; padding-left: 1.1rem; }
.aiot-j-alert li + li { margin-top: .25rem; }

/* ---------- progress: a measured bar plus a step rail ---------- */
.aiot-j-progress { margin-bottom: 1.5rem; }
.aiot-j-track {
    height: 10px;
    border-radius: 999px;
    background: var(--j-pale);
    border: 1px solid rgba(8, 39, 91, .1);
    overflow: hidden;
}
.aiot-j-fill {
    display: block;
    height: 100%;
    width: calc(var(--j-percent, 0) * 1%);
    border-radius: 999px;
    background: linear-gradient(90deg, var(--j-navy) 0%, var(--j-bright) 58%, var(--j-gold) 100%);
    transition: width .45s cubic-bezier(.22, .61, .36, 1), background .3s ease;
}
.aiot-j-fill[data-j-state="error"] {
    background: linear-gradient(90deg, var(--j-navy) 0%, var(--j-bright) 55%, var(--j-alert) 100%);
}
.aiot-j-fill[data-j-state="done"] {
    background: linear-gradient(90deg, var(--j-ok) 0%, #34a06f 60%, var(--j-gold) 100%);
}

.aiot-j-rail {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem 1.15rem;
    margin: .95rem 0 .35rem;
    padding: 0;
    list-style: none;
}
.aiot-j-rail-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: var(--j-muted);
    font-size: .86rem;
    font-weight: 800;
    letter-spacing: .005em;
}
.aiot-j-dot {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--j-pale);
    border: 2px solid rgba(8, 39, 91, .16);
    color: var(--j-navy);
    font-size: .8rem;
    font-weight: 900;
    transition: background .25s ease, border-color .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.aiot-j-rail-item[data-j-step="current"] .aiot-j-dot {
    background: var(--j-bright);
    border-color: var(--j-blue);
    color: #fff;
    transform: scale(1.09);
    box-shadow: 0 0 0 4px rgba(39, 121, 232, .22);
}
.aiot-j-rail-item[data-j-step="current"] { color: var(--j-navy); }
.aiot-j-rail-item[data-j-step="complete"] .aiot-j-dot {
    background: var(--j-ok);
    border-color: var(--j-ok);
    color: #fff;
}
.aiot-j-rail-item[data-j-step="complete"] { color: var(--j-ok); }
.aiot-j-rail-item[data-j-step="error"] .aiot-j-dot {
    background: var(--j-alert);
    border-color: var(--j-alert);
    color: #fff;
}
.aiot-j-rail-item[data-j-step="error"] { color: var(--j-alert); }
.aiot-j-rail-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    cursor: pointer;
}
.aiot-j-rail-btn:disabled { cursor: default; }
.aiot-j-rail-btn:not(:disabled):hover { color: var(--j-blue); }
.aiot-j-read { margin: .25rem 0 0; font-size: .84rem; color: var(--j-muted); }
.aiot-j-read strong { color: var(--j-navy); }

/* ---------- panels ---------- */
.aiot-j-panel { border-top: 1px solid var(--j-line); padding-top: 1.15rem; margin-bottom: 1.15rem; }
.aiot-j-panel:first-of-type { border-top: 0; padding-top: 0; }
.aiot-journey.is-journey .aiot-j-panel { display: none; }
.aiot-journey.is-journey .aiot-j-panel.is-active { display: block; animation: aiot-j-rise .26s ease both; }
@keyframes aiot-j-rise { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
.aiot-j-panel h2 {
    position: relative;
    margin: 0 0 .3rem;
    color: var(--j-navy);
    font-size: 1.14rem;
    font-weight: 900;
}
/* The journey focuses this heading to announce a step change; the UA ring reads as a
   defect, and the announcement itself is the accessible affordance. */
.aiot-j-panel h2:focus { outline: none; }
.aiot-j-panel h2:focus-visible { outline: 3px solid rgba(39, 121, 232, .3); outline-offset: 3px; border-radius: 4px; }
.aiot-j-panel h2::after {
    content: "";
    display: block;
    width: 46px;
    height: 3px;
    margin-top: .45rem;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--j-blue), var(--j-gold));
}
.aiot-j-lede { margin: .55rem 0 1.1rem; color: var(--j-muted); font-size: .93rem; }

/* ---------- fields ---------- */
.aiot-j-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.15rem; }
.aiot-j-field { position: relative; display: block; }
.aiot-j-field.full { grid-column: 1 / -1; }
.aiot-j-label {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: .35rem;
    color: var(--j-navy);
    font-size: .87rem;
    font-weight: 800;
}
.aiot-j-optional { color: var(--j-muted); font-weight: 650; font-size: .76rem; }
.aiot-j-field input:not([type="checkbox"]),
.aiot-j-field select,
.aiot-j-field textarea {
    width: 100%;
    padding: .78rem .85rem;
    border: 1px solid #b9c9df;
    border-radius: 7px;
    background: #fff;
    color: var(--j-ink);
    font: inherit;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.aiot-j-field input:hover, .aiot-j-field select:hover { border-color: #9db6d6; }
.aiot-j-field input:focus, .aiot-j-field select:focus, .aiot-j-field textarea:focus {
    outline: none;
    border-color: var(--j-bright);
    box-shadow: 0 0 0 3px rgba(39, 121, 232, .3);
}
.aiot-j-field input::placeholder { color: #9aabcc; }

/* The tick is a verdict, not ornament: it appears only when the rule the server will
   apply is already satisfied on this device. */
.aiot-j-mark {
    position: absolute;
    right: .62rem;
    top: 2.05rem;
    display: grid;
    place-items: center;
    width: 23px;
    height: 23px;
    border-radius: 50%;
    background: var(--j-ok);
    color: #fff;
    font-size: .74rem;
    font-weight: 900;
    pointer-events: none;
}
.aiot-j-mark[hidden] { display: none; }
.aiot-j-field.is-ok input, .aiot-j-field.is-ok select { border-color: rgba(15, 123, 79, .55); }
.aiot-j-field.is-bad input, .aiot-j-field.is-bad select {
    border-color: var(--j-alert);
    box-shadow: 0 0 0 3px rgba(194, 65, 12, .13);
}
.aiot-j-note { display: block; margin: .3rem 0 0; font-size: .79rem; color: var(--j-muted); }
.aiot-j-note.is-ok { color: var(--j-ok); font-weight: 700; }
.aiot-j-note.is-bad { color: var(--j-alert); font-weight: 700; }
.aiot-j-field.is-slid { animation: aiot-j-hint 1.6s ease-out 1; border-radius: 8px; }
@keyframes aiot-j-hint {
    0% { box-shadow: 0 0 0 0 rgba(39, 121, 232, .45); }
    55% { box-shadow: 0 0 0 7px rgba(39, 121, 232, .2); }
    100% { box-shadow: 0 0 0 0 rgba(39, 121, 232, 0); }
}

/* ---------- password strength: two honest signals, no gamification ---------- */
.aiot-j-meter { display: flex; align-items: center; gap: .55rem; margin-top: .4rem; }
.aiot-j-meter-track {
    flex: 1 1 auto;
    height: 6px;
    border-radius: 999px;
    background: var(--j-pale);
    overflow: hidden;
}
.aiot-j-meter-fill {
    display: block;
    height: 100%;
    width: calc(var(--j-strength, 0) * 1%);
    border-radius: 999px;
    background: var(--j-alert);
    transition: width .3s ease, background .3s ease;
}
.aiot-j-meter-fill[data-strength="ok"] { background: var(--j-ok); }
.aiot-j-meter-fill[data-strength="mid"] { background: var(--j-gold); }
.aiot-j-meter-text { flex: 0 0 auto; font-size: .76rem; font-weight: 800; color: var(--j-muted); }

.aiot-j-check {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    margin-top: 1.15rem;
    padding: .9rem 1rem;
    border: 1px solid var(--j-line);
    border-radius: 8px;
    background: var(--j-pale);
    color: var(--j-ink);
    font-size: .9rem;
    font-weight: 650;
}
.aiot-j-check input { margin-top: .18rem; width: 1.05rem; height: 1.05rem; accent-color: var(--j-blue); flex: 0 0 auto; }
.aiot-j-check.is-bad { border-color: var(--j-alert); background: var(--j-alert-soft); }

.aiot-j-aside {
    margin: 1.15rem 0 0;
    padding: .85rem 1rem;
    border-left: 4px solid var(--j-gold);
    border-radius: 0 7px 7px 0;
    background: var(--j-pale);
    color: var(--j-navy);
    font-size: .87rem;
}

/* ---------- review ---------- */
.aiot-j-review {
    margin: 0 0 1.15rem;
    padding: 1rem 1.15rem;
    border: 1px solid var(--j-line);
    border-radius: 8px;
    background: #fbfdff;
}
.aiot-j-review-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin: 0 0 .7rem;
    color: var(--j-navy);
    font-size: .96rem;
    font-weight: 900;
}
.aiot-j-edit {
    padding: .28rem .7rem;
    border: 1px solid rgba(8, 39, 91, .2);
    border-radius: 999px;
    background: #fff;
    color: var(--j-blue);
    font-size: .76rem;
    font-weight: 800;
    cursor: pointer;
}
.aiot-j-edit:hover { border-color: var(--j-blue); background: var(--j-pale); }
.aiot-j-review dl { display: grid; grid-template-columns: minmax(120px, 34%) 1fr; gap: .4rem .9rem; margin: 0; font-size: .89rem; }
.aiot-j-review dt { color: var(--j-muted); }
.aiot-j-review dd { margin: 0; color: var(--j-navy); font-weight: 750; overflow-wrap: anywhere; }
.aiot-j-review dd.is-empty { color: var(--j-alert); font-weight: 750; }

/* ---------- actions ---------- */
.aiot-j-actions { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-top: 1.35rem; }
.aiot-j-actions [hidden] { display: none !important; }
.aiot-j-count { font-size: .82rem; color: var(--j-muted); margin-left: auto; }
.aiot-j-count strong { color: var(--j-navy); }

/* ---------- toasts: they name what is missing and each line is the jump link to it ---------- */
.aiot-j-toast-region {
    position: fixed;
    right: 1.1rem;
    bottom: 1.1rem;
    z-index: 95;
    display: grid;
    gap: .6rem;
    width: min(390px, calc(100vw - 2.2rem));
    pointer-events: none;
}
.aiot-j-toast {
    pointer-events: auto;
    padding: .85rem 1rem;
    border: 1px solid var(--j-line);
    border-left: 5px solid var(--j-blue);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 16px 34px -22px rgba(8, 39, 91, .5);
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .28s ease, transform .28s cubic-bezier(.22, .61, .36, 1);
}
.aiot-j-toast.is-shown { opacity: 1; transform: translateY(0); }
.aiot-j-toast[data-tone="error"] { border-left-color: var(--j-alert); background: #fffaf7; }
.aiot-j-toast[data-tone="ok"] { border-left-color: var(--j-ok); }
.aiot-j-toast[data-tone="info"] { border-left-color: var(--j-blue); }
.aiot-j-toast strong { display: block; margin-bottom: .35rem; color: var(--j-navy); font-size: .9rem; }
.aiot-j-toast[data-tone="error"] strong { color: var(--j-alert); }
.aiot-j-toast[data-tone="ok"] strong { color: var(--j-ok); }
.aiot-j-toast p { margin: 0; font-size: .86rem; color: var(--j-ink); }
.aiot-j-toast ul { list-style: none; margin: 0; padding: 0; }
.aiot-j-toast li + li { margin-top: .25rem; }
.aiot-j-toast-link {
    display: block;
    width: 100%;
    padding: .2rem 0;
    border: 0;
    background: none;
    text-align: left;
    font: inherit;
    font-size: .84rem;
    color: var(--j-blue);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
.aiot-j-toast-link:hover { color: var(--j-navy); }

@media (max-width: 720px) {
    .aiot-j-grid { grid-template-columns: 1fr; }
    .aiot-j-rail { gap: .5rem .8rem; }
    .aiot-j-toast-region { left: .8rem; right: .8rem; bottom: .8rem; width: auto; }
}
@media (prefers-reduced-motion: reduce) {
    .aiot-j-fill, .aiot-j-dot, .aiot-j-toast, .aiot-j-meter-fill { transition: none; }
    .aiot-journey.is-journey .aiot-j-panel.is-active { animation: none; }
    .aiot-j-field.is-slid { animation: none; }
}
@media (forced-colors: active) {
    .aiot-j-dot, .aiot-j-mark { border: 2px solid ButtonText; }
}