.readiness-choice{display:flex;gap:.75rem;align-items:center;border:1px solid var(--line);border-radius:12px;padding:1rem;margin-bottom:.75rem}.readiness-choice input{width:1.2rem;height:1.2rem;flex-shrink:0}.readiness-note{white-space:pre-wrap}.readiness-badge{margin:1rem 0;padding:1.25rem;background:var(--paper);border:1px solid var(--line);border-left:4px solid var(--green);border-radius:12px;overflow-wrap:anywhere}.readiness-badge strong,.readiness-badge span{display:block}.readiness-badge p{font-size:.8rem;margin:.7rem 0 0}.readiness-badge span{font-size:.85rem;margin-top:.2rem}progress{width:100%;max-width:500px;height:12px;accent-color:var(--green)}

.readiness-badge-heading { display: flex; align-items: center; gap: 1rem; }
.readiness-badge-details { min-width: 0; }
.readiness-badge-mark {
    position: relative;
    display: grid;
    place-items: center;
    flex: 0 0 4rem;
    width: 4rem;
    height: 4rem;
    border: 1px solid var(--brand-mint);
    border-radius: 1rem;
    background: var(--status-success-bg);
    color: var(--brand-navy);
}
.readiness-badge-mark .readiness-badge-code { font-size: 1.65rem; font-weight: 800; line-height: 1; margin: 0; }
.readiness-compact-badges { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1rem; padding: .5rem .5rem 0 0; }
.readiness-compact-badge { display: inline-block; border-radius: 1rem; text-decoration: none; }
.readiness-compact-badge:focus-visible { outline: 3px solid var(--brand-teal); outline-offset: 4px; }
.readiness-compact-badge:hover .readiness-badge-mark { border-color: var(--brand-emerald); }
.dashboard-readiness .panel-heading { flex-wrap: wrap; gap: .75rem; }
.readiness-badge-check {
    position: absolute;
    top: -.5rem;
    right: -.5rem;
    width: 1.9rem;
    height: 1.9rem;
    padding: .2rem;
    border: 1px solid var(--brand-mint);
    border-radius: 50%;
    background: var(--brand-white);
    color: var(--brand-emerald);
}

.readiness-item {
    padding: 1.25rem;
    margin-top: 1rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--brand-white);
    overflow-wrap: anywhere;
}
/* Saved completion also colors read-only views. Checkbox feedback needs no JS;
   sorting happens only after Save, so focus and unsaved edits stay in place. */
.readiness-item--completed,
.readiness-item:has([data-readiness-completion]:checked) {
    background: var(--status-success-bg);
    border-color: var(--brand-mint);
}
.readiness-item:has([data-readiness-completion]:not(:checked)) {
    background: var(--brand-white);
    border-color: var(--line);
}
.readiness-save-bar {
    position: sticky;
    bottom: 1rem;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    margin: 1rem 0 1.5rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--brand-white);
    box-shadow: var(--brand-shadow);
    font-size: .9rem;
}
.readiness-save-bar .btn { flex-shrink: 0; }
@media (max-width: 700px) {
    .readiness-item { padding: 1rem; }
    .readiness-save-bar { bottom: .5rem; padding: .75rem; font-size: .8rem; }
}