/* Audit readiness (§6.3) — rebuilt to "10 Audit readiness.html". * * Every width, radius and padding below is taken VERBATIM from the export's own * inline styles, read out of the behavioural source rather than eyeballed: * * header row 'display:flex; align-items:flex-end; gap:16px; * margin-bottom:14px' * page body 'display:grid; grid-template-columns:1fr 330px; gap:16px; * align-items:start' * columns 'display:flex; flex-direction:column; gap:14px' * cards 'border-radius:20px; padding:15px 16px' * figure 'font-size:28px; font-weight:500; letter-spacing:-0.02em' * tile strip 'display:flex; gap:22px; padding-left:20px; * border-left:1px solid var(--p-line)' * tile label 10.5px; tile value 16px/600 * condition row readyItems[].rowStyle — 'display:flex; align-items:center; * gap:12px; padding:13px 16px; * border-bottom:1px solid var(--p-line)' * icon tile readyItems[].iconStyle — 30×30, border-radius 8px * numeric column readyItems[] amount span — 'flex:none; width:104px; * text-align:right; font-size:12.5px; font-weight:600' * fix control readyItems[].fixStyle — 'border-radius:999px; * padding:7px 14px; font-size:11.5px; font-weight:600' * rail rows 'padding:9px 0; border-top:1px solid var(--p-line)' * * WHAT IS NOT HERE, and why. The prototype's 28px figure is a percentage over a * progress bar (`readyPct` / `readyBarStyle`). There is no score on the wire and * none is synthesised — the slot draws the transaction total instead. See * core/api/readiness-view.js. * * Logical properties throughout; the Arabic build flips on alone. * `width:104px` becomes `inline-size`, `text-align:right` becomes `end`, and * the tile strip's left rule becomes `border-inline-start`. */ /* ---- header ------------------------------------------------------------- */ .ready__head { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; } .ready__head-text { flex: 1; min-inline-size: 0; } .ready__title { font-family: var(--font-display); font-size: 20px; font-weight: 600; letter-spacing: -0.02em; margin: 0; } .ready__lead { font-size: 12.5px; color: var(--p-ink-2); margin: 3px 0 0; } /* Both header controls are present and refused. 44px min so the target is reachable even though the action is not — a control that explains itself has to be hoverable and focusable to do so. */ .ready__ctl { display: inline-flex; align-items: center; gap: 7px; flex: none; border-radius: 999px; padding: 9px 13px; font-size: 12.5px; font-weight: 500; min-block-size: 44px; } .ready__ctl--quiet { background: var(--p-surface); border: 1px solid var(--p-line-2); color: var(--p-ink); } .ready__ctl--primary { border: none; font-weight: 600; } /* aria-disabled, not disabled: the control keeps its place in the tab order so the reason in `title` can actually be reached. */ .ready__ctl[aria-disabled='true'] { background: var(--p-line-2); color: var(--p-ink-3); cursor: not-allowed; } .ready__ctl--quiet[aria-disabled='true'] { background: var(--p-surface); } /* ---- body --------------------------------------------------------------- */ .ready__grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 16px; align-items: start; } .ready__main, .ready__rail { display: flex; flex-direction: column; gap: 14px; } /* The side rail drops under the counts before the sidebar collapses, so the condition rows never lose their width to a 330px column on a narrow desktop. */ @media (max-width: 1199px) { .ready__grid { grid-template-columns: minmax(0, 1fr); } } /* ---- counts card -------------------------------------------------------- */ .ready__counts { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 15px 16px; } .ready__counts-lead { flex: 1; min-inline-size: 0; } .ready__counts-figure { display: flex; align-items: baseline; gap: 9px; } .ready__counts-n { font-family: var(--font-display); font-size: 28px; font-weight: 500; letter-spacing: -0.02em; color: var(--p-ink); } .ready__counts-label { font-size: 12px; color: var(--p-ink-2); } /* Occupies the prototype's progress-bar position and says why there is none. */ .ready__counts-noscore { font-size: 11.5px; color: var(--p-ink-3); line-height: 1.45; margin: 9px 0 0; max-inline-size: 52ch; } .ready__counts-scope { display: grid; grid-template-columns: auto auto; gap: 3px 12px; margin: 10px 0 0; } .ready__counts-scope dt { font-size: 10.5px; color: var(--p-ink-3); } .ready__counts-scope dd { font-size: 12px; margin: 0; } .ready__tiles { display: flex; gap: 22px; flex-wrap: wrap; padding-inline-start: 20px; border-inline-start: 1px solid var(--p-line); } .ready__tile { min-inline-size: 0; } .ready__tile-label { font-size: 10.5px; color: var(--p-ink-3); } .ready__tile-value { font-size: 16px; font-weight: 600; margin-top: 3px; } .ready__tile-value--attention { color: var(--p-warn); } .ready__tile-value--watch { color: var(--p-ink); } @media (max-width: 899px) { .ready__tiles { padding-inline-start: 0; border-inline-start: none; } } /* ---- conditions --------------------------------------------------------- */ .ready__conditions { overflow: hidden; padding: 0; } .ready__conditions-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 13px 16px; border-bottom: 1px solid var(--p-line); } .ready__row-list, .ready__withheld-list, .ready__rail-list { list-style: none; margin: 0; padding: 0; } .ready__row { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--p-line); } .ready__row-tile { inline-size: 30px; block-size: 30px; flex: none; border-radius: 8px; display: flex; align-items: center; justify-content: center; } .ready__row-tile--attention { background: var(--p-warn-soft); color: var(--p-warn); } .ready__row-tile--watch { background: var(--p-surface-2); color: var(--p-ink-2); } .ready__row-body { flex: 1; min-inline-size: 0; } .ready__row-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .ready__row-title { font-size: 13px; font-weight: 500; } .ready__row-detail { display: block; font-size: 11.5px; color: var(--p-ink-2); margin-top: 3px; line-height: 1.45; } /* The prototype's amount column, at its width, carrying the count instead — no amount is served. The card header names it so it is never read as money. */ .ready__row-count { flex: none; inline-size: 104px; text-align: end; font-size: 12.5px; font-weight: 600; color: var(--p-ink); } .ready__row-fix { flex: none; border: 1px solid var(--p-line-2); border-radius: 999px; padding: 7px 14px; font-size: 11.5px; font-weight: 600; color: var(--p-brand-ink); background: var(--p-surface); text-decoration: none; min-block-size: 44px; display: inline-flex; align-items: center; } .ready__row-fix:hover { background: var(--p-surface-2); } .ready__clear, .ready__unplaceable { font-size: 12.5px; color: var(--p-ink-2); margin: 0; padding: 18px 16px; } .ready__unplaceable { color: var(--p-warn); padding-top: 0; } /* Withheld is visually quieter than a condition and is never a row in the same list: it is not a count, it is the absence of one we refuse to report. */ .ready__withheld { display: flex; align-items: flex-start; gap: 10px; padding: 11px 16px; border-top: 1px solid var(--p-line); background: var(--p-surface-2); } .ready__withheld-icon { color: var(--p-ink-3); flex: none; margin-top: 2px; } .ready__withheld-title { font-size: 12px; font-weight: 600; display: block; } .ready__withheld-why { font-size: 11.5px; color: var(--p-ink-2); line-height: 1.45; display: block; } /* The prototype conditions nothing computes. Quiet, and below everything that is counted, so they are never mistaken for outstanding work. */ .ready__unbacked { padding: 12px 16px; border-top: 1px solid var(--p-line); } .ready__unbacked-title { display: block; font-size: 11.5px; font-weight: 600; color: var(--p-ink-3); } .ready__unbacked-list { list-style: none; margin: 6px 0 0; padding: 0; font-size: 11.5px; color: var(--p-ink-3); line-height: 1.5; } /* ---- rail --------------------------------------------------------------- */ .ready__rail-card { padding: 15px 16px; } .ready__rail-card .card__title { font-size: 13.5px; } .ready__rail-body, .ready__rail-note { font-size: 11.5px; color: var(--p-ink-2); line-height: 1.45; margin: 10px 0 0; } .ready__rail-note { color: var(--p-ink-3); } .ready__rail-list { margin: 10px 0 0; } .ready__rail-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--p-line); font-size: 12px; } .ready__rail-label, .ready__rail-row > .num { flex: 1; min-inline-size: 0; }