:root {
    --dc-blue: #075985;
    --dc-blue-strong: #0c4a6e;
    --dc-sky: #e0f2fe;
    --dc-gold: #f5b700;
    --dc-ink: #102a43;
    --dc-muted: #52677a;
    --dc-line: #c8d9e7;
    --dc-success: #047857;
    --dc-warning: #9a6700;
    --dc-danger: #b42318;
}

.dc-wizard {
    display: grid;
    gap: 1.25rem;
}

.dc-wizard-progress {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dc-wizard-progress li {
    display: grid;
    align-content: center;
    min-height: 3.4rem;
    padding: .65rem .75rem;
    border: 1px solid var(--dc-line);
    border-radius: .9rem;
    background: #fff;
    color: var(--dc-muted);
}

.dc-wizard-progress li small {
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .04em;
}

.dc-wizard-progress li strong {
    font-size: .9rem;
}

.dc-wizard-progress li.is-active {
    border-color: var(--dc-blue);
    background: linear-gradient(135deg, var(--dc-blue), var(--dc-blue-strong));
    color: #fff;
    box-shadow: 0 12px 28px rgba(7, 89, 133, .16);
}

.dc-wizard-progress li.is-complete {
    border-color: #86d1b2;
    background: #ecfdf5;
    color: #065f46;
}

.dc-wizard-panel {
    display: grid;
    gap: 1rem;
    animation: dc-panel-in .2s ease-out;
}

.dc-wizard-panel[hidden] {
    display: none !important;
}

.dc-step-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: .9rem;
    border-bottom: 1px solid var(--dc-line);
}

.dc-step-heading h2,
.dc-step-heading h3 {
    margin: 0;
    color: var(--dc-ink);
}

.dc-step-heading p {
    margin: .25rem 0 0;
    color: var(--dc-muted);
}

.dc-service-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .75rem;
    padding: 1rem;
    border: 1px solid #93c5dd;
    border-radius: 1rem;
    background: linear-gradient(135deg, #f0f9ff, #fffaf0);
}

.dc-service-summary[hidden] {
    display: none !important;
}

.dc-service-summary > header {
    grid-column: 1 / -1;
}

.dc-service-summary h3 {
    margin: 0;
    color: var(--dc-blue-strong);
}

.dc-service-summary p {
    margin: .35rem 0 0;
    color: var(--dc-muted);
}

.dc-service-fact {
    min-height: 4.8rem;
    padding: .75rem;
    border: 1px solid rgba(7, 89, 133, .14);
    border-radius: .75rem;
    background: rgba(255, 255, 255, .85);
}

.dc-service-fact small {
    display: block;
    margin-bottom: .25rem;
    color: var(--dc-muted);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.dc-service-fact strong {
    color: var(--dc-ink);
}

.dc-purpose-chips,
.dc-session-grid,
.dc-payment-grid {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
}

.dc-choice {
    position: relative;
}

.dc-choice input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.dc-choice span {
    display: grid;
    gap: .2rem;
    min-width: 8.5rem;
    min-height: 3rem;
    align-content: center;
    padding: .7rem .9rem;
    border: 1px solid var(--dc-line);
    border-radius: .8rem;
    background: #fff;
    color: var(--dc-ink);
    cursor: pointer;
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.dc-choice span small {
    color: var(--dc-muted);
}

.dc-choice input:checked + span {
    border-color: var(--dc-blue);
    background: var(--dc-sky);
    box-shadow: 0 0 0 3px rgba(7, 89, 133, .12);
}

.dc-choice input:focus-visible + span {
    outline: 3px solid rgba(245, 183, 0, .65);
    outline-offset: 2px;
}

.dc-choice input:disabled + span {
    cursor: not-allowed;
    opacity: .55;
    background: #f3f6f8;
}

.dc-requirements {
    display: grid;
    gap: .8rem;
}

.dc-requirement-card {
    display: grid;
    gap: .65rem;
    padding: 1rem;
    border: 1px solid var(--dc-line);
    border-radius: .9rem;
    background: #fff;
}

.dc-requirement-card.is-ready {
    border-color: #75c8a2;
    background: #f0fdf7;
}

.dc-requirement-head {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.dc-requirement-head strong {
    color: var(--dc-ink);
}

.dc-requirement-head span {
    flex: 0 0 auto;
    color: var(--dc-danger);
    font-size: .78rem;
    font-weight: 800;
}

.dc-file-preview {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}

.dc-file-preview span {
    max-width: 100%;
    padding: .38rem .55rem;
    border-radius: .55rem;
    background: #edf6fb;
    color: var(--dc-blue-strong);
    font-size: .82rem;
    overflow-wrap: anywhere;
}

.dc-availability-status {
    min-height: 1.5rem;
    color: var(--dc-muted);
}

.dc-availability-status.is-error {
    color: var(--dc-danger);
}

.dc-review-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
}

.dc-review-card {
    padding: .9rem;
    border: 1px solid var(--dc-line);
    border-radius: .8rem;
    background: #f8fbfd;
}

.dc-review-card small {
    display: block;
    color: var(--dc-muted);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.dc-review-card strong,
.dc-review-card span {
    display: block;
    margin-top: .2rem;
    color: var(--dc-ink);
    overflow-wrap: anywhere;
}

.dc-wizard-actions {
    position: sticky;
    bottom: .75rem;
    z-index: 3;
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    padding: .8rem;
    border: 1px solid rgba(7, 89, 133, .2);
    border-radius: 1rem;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 14px 36px rgba(15, 42, 67, .13);
    backdrop-filter: blur(10px);
}

.dc-save-state {
    align-self: center;
    color: var(--dc-muted);
    font-size: .84rem;
}

.dc-network-state {
    padding: .85rem 1rem;
    border: 1px solid #f0b429;
    border-left: .38rem solid var(--dc-warning);
    border-radius: .8rem;
    background: #fffbeb;
    color: #6b4f00;
    font-weight: 750;
}

.dc-network-state[hidden] {
    display: none !important;
}

.dc-representative-panel {
    border-left: .38rem solid var(--dc-blue);
}

.dc-waitlist-card,
.dc-queue-state {
    display: grid;
    gap: .65rem;
    padding: 1rem;
    border: 1px solid var(--dc-line);
    border-radius: .9rem;
    background: #f8fbfd;
}

.dc-queue-state dl {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .55rem;
    margin: 0;
}

.dc-queue-state dl > div {
    padding: .7rem;
    border-radius: .7rem;
    background: #fff;
}

.dc-queue-state dt {
    color: var(--dc-muted);
    font-size: .76rem;
    font-weight: 800;
    text-transform: uppercase;
}

.dc-queue-state dd {
    margin: .2rem 0 0;
    color: var(--dc-ink);
    font-weight: 900;
}

.dc-waitlist-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
}

.dc-compliance-proof,
.dc-decision-notice,
.dc-appeal-state,
.dc-eboss-state,
.dc-ftj-state {
    border-inline-start: .3rem solid #0f7a5f;
}

.dc-decision-notice {
    border-inline-start-color: #b96915;
}

.dc-privacy-notice p,
.dc-decision-notice p,
.dc-appeal-state p,
.dc-eboss-state p,
.dc-ftj-state p {
    overflow-wrap: anywhere;
}

.dc-privacy-rights {
    margin-block: 1rem;
}

.dc-privacy-rights > summary,
.dc-cancel-details > summary {
    min-height: 44px;
    cursor: pointer;
}

.public-service-body :is(button, .btn, input, select, textarea, summary) {
    touch-action: manipulation;
}

.public-service-body :is(button, .btn, input, select, textarea, summary):focus-visible {
    outline: 3px solid rgba(245, 183, 0, .72);
    outline-offset: 2px;
}

@media (pointer: coarse) {
    .public-service-body :is(button, .btn, input:not([type="checkbox"]):not([type="radio"]), select, summary) {
        min-height: 48px;
    }
}

.citizen-service-next-action {
    display: grid;
    gap: .25rem;
    margin: .9rem 0;
    padding: 1rem;
    border: 1px solid #79bcd6;
    border-left: .38rem solid var(--dc-gold);
    border-radius: .85rem;
    background: linear-gradient(135deg, #f0f9ff, #fffbeb);
}

.citizen-service-next-action small {
    color: var(--dc-blue);
    font-weight: 900;
    letter-spacing: .07em;
}

.citizen-service-next-action strong {
    color: var(--dc-ink);
    font-size: 1.08rem;
}

.citizen-service-next-action p {
    margin: 0;
    color: var(--dc-muted);
}

.citizen-service-status-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .55rem;
    margin: .8rem 0;
}

.citizen-service-status-grid > div {
    padding: .7rem;
    border: 1px solid var(--dc-line);
    border-radius: .7rem;
    background: #fff;
}

.citizen-service-status-grid dt {
    margin-bottom: .35rem;
    color: var(--dc-muted);
    font-size: .76rem;
    font-weight: 800;
    text-transform: uppercase;
}

.citizen-service-status-grid dd {
    margin: 0;
    color: var(--dc-ink);
    font-weight: 700;
}

.citizen-service-document-checklist {
    display: grid;
    gap: .55rem;
}

.citizen-service-document-checklist article {
    display: grid;
    grid-template-columns: 1.8rem minmax(0, 1fr) auto;
    align-items: center;
    gap: .6rem;
    padding: .65rem;
    border: 1px solid var(--dc-line);
    border-radius: .7rem;
    background: #fff;
}

.citizen-service-document-checklist article > span:first-child {
    display: grid;
    width: 1.8rem;
    height: 1.8rem;
    place-items: center;
    border-radius: 50%;
    background: var(--dc-sky);
    color: var(--dc-blue);
    font-weight: 900;
}

.citizen-service-document-checklist article small {
    display: block;
    margin-top: .15rem;
    color: var(--dc-danger);
}

.dc-language-switch {
    display: inline-flex;
    gap: .25rem;
    padding: .25rem;
    border: 1px solid var(--dc-line);
    border-radius: 999px;
    background: #fff;
}

.dc-language-switch button {
    min-height: 2.5rem;
    padding: .45rem .75rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--dc-muted);
    font-weight: 800;
}

.dc-language-switch button[aria-pressed="true"] {
    background: var(--dc-blue);
    color: #fff;
}

.dc-tracker-appointment {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: .8rem;
    padding: .9rem;
    border: 1px solid #9ed3ec;
    border-radius: .9rem;
    background: linear-gradient(135deg, #f0faff, #fff);
}

.dc-tracker-appointment h3,
.dc-tracker-appointment p {
    margin: .15rem 0 0;
}

.dc-tracker-appointment small {
    color: var(--dc-blue);
    font-weight: 900;
    letter-spacing: .06em;
}

.citizen-official-output {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid #8bd6b5;
    border-radius: .95rem;
    background: linear-gradient(135deg, #edfff7, #fff);
}

.citizen-official-output h3,
.citizen-official-output p {
    margin: .2rem 0 0;
}

.citizen-official-output small {
    color: #08785a;
    font-weight: 900;
    letter-spacing: .06em;
}

.dc-appointment-pass {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(12rem, 17rem);
    gap: clamp(1rem, 3vw, 2rem);
    align-items: center;
    overflow: hidden;
    background:
        radial-gradient(circle at 95% 5%, rgba(20, 151, 201, .15), transparent 30%),
        #fff;
}

.dc-appointment-pass-copy h2 {
    margin: .35rem 0;
    color: var(--dc-navy);
    font-size: clamp(1.55rem, 4vw, 2.4rem);
}

.dc-appointment-qr {
    display: grid;
    justify-items: center;
    gap: .5rem;
    padding: 1rem;
    border: 1px dashed var(--dc-line);
    border-radius: 1rem;
    background: #fff;
    text-align: center;
}

.dc-appointment-qr svg {
    width: min(100%, 14rem);
    height: auto;
}

.dc-appointment-qr small {
    color: var(--dc-muted);
    line-height: 1.4;
}

.dc-cancel-details {
    margin-top: 1rem;
    padding: .85rem;
    border: 1px solid var(--dc-line);
    border-radius: .8rem;
    background: #fffaf6;
}

.dc-cancel-details summary {
    cursor: pointer;
    color: var(--dc-danger);
    font-weight: 800;
}

.dc-csm-form summary {
    color: var(--dc-blue-strong);
}

.dc-csm-rating-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
    margin: .85rem 0;
    padding: .85rem;
    border: 1px solid var(--dc-line);
    border-radius: .75rem;
}

.dc-csm-rating-grid legend {
    padding: 0 .35rem;
    color: var(--dc-navy);
    font-weight: 800;
}

.dc-public-verification {
    max-width: 58rem;
    padding-top: clamp(1rem, 6vw, 4rem);
}

html[data-citizen-theme="dark"] body.public-service-body .dc-wizard {
    --dc-ink: #f2f2f7;
    --dc-muted: #b8cbbd;
    --dc-line: #355b44;
    --dc-sky: #173b2a;
    --dc-blue: #64d2ff;
    --dc-blue-strong: #8ee5af;
    --dc-success: #61e6c3;
    --dc-warning: #ffd166;
    --dc-danger: #ff9f9a;
}

html[data-citizen-theme="dark"] body.public-service-body :is(
    .dc-wizard-progress li,
    .dc-service-fact,
    .dc-choice span,
    .dc-requirement-card,
    .dc-review-card,
    .citizen-service-status-grid > div,
    .citizen-service-document-checklist article,
    .dc-language-switch,
    .dc-appointment-pass,
    .dc-appointment-qr
) {
    border-color: var(--dc-line);
    background: #172a20;
    color: var(--dc-ink);
}

html[data-citizen-theme="dark"] body.public-service-body .dc-wizard-progress li.is-active {
    border-color: #64d2ff;
    background: linear-gradient(135deg, #075985, #17472e);
    color: #fff;
}

html[data-citizen-theme="dark"] body.public-service-body .dc-wizard-progress li.is-complete {
    border-color: #3f8b68;
    background: #173b2a;
    color: #8ee5af;
}

html[data-citizen-theme="dark"] body.public-service-body :is(
    .dc-service-summary,
    .citizen-service-next-action,
    .dc-tracker-appointment,
    .citizen-official-output
) {
    border-color: var(--dc-line);
    background: linear-gradient(135deg, #13291e, #252414);
}

html[data-citizen-theme="dark"] body.public-service-body .dc-requirement-card.is-ready {
    border-color: #3f8b68;
    background: #153326;
}

html[data-citizen-theme="dark"] body.public-service-body .dc-choice input:checked + span {
    border-color: #64d2ff;
    background: #173b2a;
    box-shadow: 0 0 0 3px rgba(100, 210, 255, .16);
}

html[data-citizen-theme="dark"] body.public-service-body .dc-choice input:disabled + span {
    background: #111c16;
}

html[data-citizen-theme="dark"] body.public-service-body .dc-file-preview span {
    background: #173b2a;
    color: #8ee5af;
}

html[data-citizen-theme="dark"] body.public-service-body :is(
    .dc-review-card strong,
    .dc-review-card span,
    .dc-requirement-head strong,
    .dc-service-fact strong,
    .dc-step-heading h2,
    .dc-step-heading h3,
    .citizen-service-next-action strong,
    .citizen-service-status-grid dd
) {
    color: var(--dc-ink) !important;
}

html[data-citizen-theme="dark"] body.public-service-body :is(
    .dc-review-card small,
    .dc-choice span small,
    .dc-service-summary p,
    .dc-step-heading p,
    .dc-save-state,
    .dc-availability-status,
    .citizen-service-next-action p,
    .citizen-service-status-grid dt,
    .dc-appointment-qr small
) {
    color: var(--dc-muted) !important;
}

html[data-citizen-theme="dark"] body.public-service-body .dc-wizard-actions {
    border-color: var(--dc-line);
    background: rgba(16, 35, 25, .96);
    color: var(--dc-ink);
    box-shadow: 0 14px 36px rgba(0, 0, 0, .3);
}

html[data-citizen-theme="dark"] body.public-service-body .dc-cancel-details {
    border-color: var(--dc-line);
    background: #2b2017;
}

html[data-citizen-theme="dark"] body.public-service-body .dc-csm-rating-grid {
    border-color: var(--dc-line);
}

html[data-citizen-theme="dark"] body.public-service-body .dc-csm-rating-grid legend {
    color: var(--dc-ink);
}

html[data-citizen-theme="dark"] body.public-service-body :is(.dc-network-state, .dc-waitlist-card, .dc-queue-state) {
    border-color: var(--dc-line);
    background: #2b2816;
    color: var(--dc-ink);
}

html[data-citizen-theme="dark"] body.public-service-body .dc-queue-state dl > div {
    background: #172a20;
}

@keyframes dc-panel-in {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 800px) {
    .dc-wizard-progress {
        grid-template-columns: repeat(5, minmax(2.6rem, 1fr));
    }

    .dc-wizard-progress li {
        min-height: 2.8rem;
        padding: .45rem;
        text-align: center;
    }

    .dc-wizard-progress li strong {
        display: none;
    }

    .dc-service-summary,
    .citizen-service-status-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dc-review-grid {
        grid-template-columns: 1fr;
    }

    .dc-appointment-pass {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    .dc-step-heading,
    .dc-requirement-head {
        display: grid;
    }

    .dc-service-summary,
    .citizen-service-status-grid {
        grid-template-columns: 1fr;
    }

    .dc-choice,
    .dc-choice span {
        width: 100%;
    }

    .dc-wizard-actions {
        position: static;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dc-wizard-actions .btn {
        width: 100%;
        min-height: 3rem;
    }

    .dc-save-state {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .citizen-service-document-checklist article {
        grid-template-columns: 1.8rem minmax(0, 1fr);
    }

    .citizen-service-document-checklist article > :last-child {
        grid-column: 2;
    }

    .dc-tracker-appointment {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .citizen-official-output {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .dc-queue-state dl {
        grid-template-columns: 1fr;
    }

    .dc-csm-rating-grid {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dc-wizard-panel {
        animation: none;
    }
}