/* Readiness page: five stage cards, a note on what the page is, and the requirement register.
   Colours come from tokens.css; sizes from the type scale. Breakpoints: 1100 tablet, 700 phone. */
.evr-page {display: flex; flex-direction: column; gap: 18px;}
.evr-page .ev-card {margin: 0;}

/* Stage cards: a row of five that also filter the register. */
.evr-stages {display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px;}
.evr-stage {display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; padding: 16px 16px 14px; text-align: left; font: inherit; color: var(--ink); background: var(--panel2); border: 1px solid var(--line); border-radius: var(--ev-radius); box-shadow: var(--ev-shadow); cursor: pointer;}
.evr-stage:hover {border-color: var(--line2); box-shadow: var(--ev-shadow-hover);}
.evr-stage[aria-pressed="true"] {border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--ev-shadow);}
.evr-stage:focus-visible {outline: 3px solid var(--focus); outline-offset: 2px;}
.evr-stage-top {display: flex; align-items: flex-start; gap: 10px; width: 100%;}
.evr-stage-mark {display: grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 50%; color: var(--ev-warn); background: var(--ev-warn-bg);}
.evr-stage.ready .evr-stage-mark {color: var(--ev-ok); background: var(--ev-ok-bg);}
.evr-stage-mark svg {width: 15px; height: 15px;}
.evr-stage b {font-size: var(--text-sm); line-height: var(--leading-snug); font-weight: 700; padding-top: 3px;}
.evr-stage-count {font-size: var(--text-xs); color: var(--dim);}
.evr-stage-count strong {font-size: var(--text-xl); color: var(--ink); font-weight: 750; margin-right: 2px;}
.evr-stage .ev-meter {flex: none; width: 100%;}
.evr-stage-pills {display: flex; flex-wrap: wrap; gap: 6px; min-height: 22px;}
.evr-stage-pills .ev-pill {font-size: var(--text-2xs);}

/* What this page is: one line that always shows that the page does not certify anything, and a native
   disclosure for the rest of the note. When it opens, the note takes the full width under the line. */
.evr-about .ev-card-body {display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 2px 12px; padding: 8px 12px 8px 20px; background: var(--ev-info-bg);}
.evr-about .ev-card-body > svg {width: 20px; height: 20px; color: var(--ev-info);}
.evr-about-line {margin: 0; padding: 6px 0; font-size: var(--text-ui); line-height: var(--leading-normal); color: var(--ink);}
.evr-about-line b {display: inline-flex; align-items: center; margin-right: 6px; font-size: var(--text-sm);}
.evr-about-line b .ev-help-q {margin-left: 6px;}
.evr-about-more[open] {grid-column: 2 / -1;}
.evr-about-more summary {display: inline-flex; align-items: center; gap: 8px; min-height: var(--btn-h); padding: 0 10px; border-radius: var(--btn-r); font-size: var(--text-ui); font-weight: 650; color: var(--ev-info); white-space: nowrap; cursor: pointer; list-style: none;}
.evr-about-more summary::-webkit-details-marker {display: none;}
.evr-about-more summary::after {content: ''; width: 6px; height: 6px; margin-top: -3px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg);}
.evr-about-more[open] summary::after {margin-top: 3px; transform: rotate(-135deg);}
.evr-about-more summary:hover {background: #ffffff99;}
.evr-about-more summary:focus-visible {outline: 3px solid var(--focus); outline-offset: 0;}
.evr-about-more p {margin: 0 0 8px 10px; font-size: var(--text-ui); line-height: var(--leading-relaxed); color: var(--ink); max-width: 860px;}

/* Register */
.evr-register .ev-card-head .ev-btn {margin: 0;}
.evr-table th, .evr-table td {padding: 12px 14px; vertical-align: top;}
.evr-table thead th {font-size: var(--text-2xs); color: var(--dim);}
.evr-table .evr-group th {padding: 14px 14px 10px; font-size: var(--text-xs); letter-spacing: 0; text-transform: none; color: var(--ink); background: var(--panel); border-bottom: 1px solid var(--line);}
.evr-table .evr-group th span {margin-left: 6px; font-weight: 500; color: var(--dim);}
.evr-table tbody:not(:last-child) tr:last-child td {border-bottom: 1px solid var(--line);}
.evr-req {min-width: 220px;}
.evr-req b {font-size: var(--text-ui); line-height: var(--leading-snug); font-weight: 650;}
.evr-req .ev-help-q {vertical-align: middle; margin-left: 4px;}
.evr-table td small {font-size: var(--text-2xs);}
.evr-table .ev-pill {display: inline-block; font-size: var(--text-2xs);}
.evr-table .ev-input, .evr-table .ev-select {width: 100%; padding: 8px 10px; font-size: var(--text-xs);}
.evr-table .evr-note {margin-top: 8px; color: var(--field-ink);}
.evr-table td[data-label="Owner"] {min-width: 140px;}
.evr-table td[data-label="Applies to"] {min-width: 96px;}
.evr-table td[data-label="Due"] {min-width: 132px;}
.evr-state {min-width: 140px;}
.evr-state .ev-btn {margin-top: 8px;}
.evr-recheck {color: var(--ev-bad);}
.evr-row.recheck {background: var(--ev-bad-bg);}
.evr-overdue {color: var(--ev-warn); font-weight: 650;}
.evr-act {width: 1%; white-space: nowrap; text-align: right;}
.evr-act .ev-btn {margin: 0; gap: 6px;}

/* Tablets: stage cards in rows of three, and each requirement stacks as a small card so nothing scrolls sideways. */
@media (max-width: 1100px) {
 .evr-stages {grid-template-columns: repeat(3, minmax(0, 1fr));}
 .evr-table-wrap {overflow: visible; background: none;}
 .evr-table, .evr-table tbody, .evr-table tr, .evr-table td, .evr-table .evr-group th {display: block; width: auto;}
 .evr-table thead {display: none;}
 .evr-table .evr-row {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 14px; padding: 14px 18px; border-bottom: 1px solid var(--line);}
 .evr-table .evr-row td {padding: 0; border: 0; min-width: 0;}
 .evr-table .evr-req {grid-column: 1 / 4; grid-row: 1;}
 .evr-table .evr-act {grid-column: 4; grid-row: 1; width: auto; justify-self: end; align-self: start;}
 .evr-table .evr-row td[data-label="Applies to"] {grid-column: 1;}
 .evr-table .evr-row td[data-label]::before {content: attr(data-label); display: block; margin-bottom: 4px; font-size: var(--text-2xs); font-weight: 650; letter-spacing: .5px; text-transform: uppercase; color: var(--dim);}
 .evr-table .evr-row.auto td[data-label="Due"], .evr-table .evr-row.auto td[data-label="Owner"] {display: none;}
 .evr-table td[data-label="Owner"], .evr-table td[data-label="Due"], .evr-table td[data-label="Applies to"], .evr-state, .evr-req {min-width: 0;}
 .evr-act:empty {display: none;}
}

/* Phones: the stage cards scroll sideways and the requirement cards take two columns. */
@media (max-width: 700px) {
 .evr-stages {display: flex; overflow-x: auto; gap: 10px; padding: 2px 2px 8px; margin: 0 -2px; scroll-snap-type: x proximity;}
 .evr-stage {flex: 0 0 72%; scroll-snap-align: center;}
 .evr-about .ev-card-body {padding: 8px 12px 8px 16px;}
 .evr-about-more {grid-column: 2 / -1; justify-self: start; margin-left: -10px;}
 .evr-about-more p {margin-left: 10px;}
 .evr-register .ev-card-head {flex-wrap: wrap;}
 .evr-table .evr-row {grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 14px 16px;}
 .evr-table .evr-req {grid-column: 1 / -1;}
 .evr-table .evr-act {grid-column: 1 / -1; grid-row: auto; justify-self: start;}
 .evr-table .evr-row .ev-input, .evr-table .evr-row .ev-select {font-size: var(--text-base);}
}