holding two controls, not one clickable card: the name is a link to the project's own page and Quick edit is a button that opens the drawer. The hover lift above is scoped to a.tool and stays off this one — a card that rises under the cursor but does nothing when pressed is a worse lie than a flat one. */ .tool__name[href]{color:var(--text)} .tool__name[href]:hover{color:var(--accent);text-decoration:underline} .tool__actions{display:flex;justify-content:flex-end} /* The project page's Record section. The drawer stacks these same fields because it is a narrow slide-over; this page is not, and ten full-width boxes down a 1200px column reads as a form waiting to be filled in rather than a record to be read. */ .record-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:12px 16px} /* A challenge or an appreciation: a line of somebody's own words with its provenance under it. Not a table row — the text is a sentence of variable length and a column would either clip it or leave every other column ragged. */ .note{padding:10px 0;border-bottom:1px solid var(--border)} .note:last-child{border-bottom:0;padding-bottom:0} .note__text{font-size:14px;text-wrap:pretty} .note__meta{font-size:12.5px;color:var(--text-muted);margin-top:3px} .note__form{display:flex;align-items:center;gap:8px;margin-top:8px;flex-wrap:wrap} .note__form .input{flex:1;min-width:180px} /* ---- Project detail ---------------------------------------------------- Figures are drawn rather than listed. Every bar here is greyscale; the accent marks three things and nothing else — hours past the high estimate, hours the roster could not place, and a count waiting on somebody. An accent that appears everywhere means nothing. No coloured card edges anywhere below: the brand's card is a flat fill with a 1px hairline, and a thick coloured border on one side is the tell this codebase should not carry. Where a panel has to stand out it gets a short accent rule above its heading instead. */ .pd-head{display:flex;flex-direction:column;gap:8px;margin-bottom:var(--sp-5)} .pd-head__meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:13px;color:var(--text-muted)} /* A middle dot between facts, drawn rather than written, so the separator never reaches a screen reader as a word. */ .pd-head__fact + .pd-head__fact::before{content:"·";color:var(--border-strong);margin-right:10px} .pd-record__toggle{font-size:12px;color:var(--text-muted);cursor:pointer;width:max-content; letter-spacing:.04em;text-transform:uppercase} .pd-record__toggle:hover{color:var(--text)} .record-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:12px 16px} .pd-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--sp-4); margin-bottom:var(--sp-4)} .pd-tile{padding:15px 18px;display:flex;flex-direction:column;gap:6px} .pd-tile__label{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint)} .pd-tile__value{font-size:32px;line-height:1;letter-spacing:-.03em;font-weight:500; font-variant-numeric:tabular-nums} /* A grey dash and a black zero are different tiles on purpose: one says the dashboard could not read this, the other says it read it and there are none. */ .pd-tile__value--none{color:var(--border-strong)} .pd-tile__note{font-size:12.5px;color:var(--text-muted)} .pd-gate .card__body{display:flex;flex-direction:column;gap:6px} .pd-gate__rule{display:block;width:34px;height:2px;background:var(--accent);margin-bottom:6px} .pd-gate__title{font-size:15px;font-weight:700} /* The status scale. Four segments, one filled — a band on its own is a word, and seeing where it sits between At risk and Excellent is what makes it a measurement. */ .pd-scale{display:flex;gap:3px} .pd-scale__seg{flex:1;height:8px;background:var(--wrg-grey-200)} .pd-scale__seg:first-child{border-radius:var(--r-pill) 0 0 var(--r-pill)} .pd-scale__seg:last-child{border-radius:0 var(--r-pill) var(--r-pill) 0} .pd-scale__seg--on{background:var(--text)} .pd-scale__seg--risk{background:var(--accent)} .pd-scale__labels{display:flex;margin-top:6px;font-size:10px;letter-spacing:.06em; text-transform:uppercase;color:var(--text-faint)} .pd-scale__labels span{flex:1} .pd-scale__labels span:last-child{text-align:right} .pd-scale__label--on{color:var(--text)} .ledger{display:grid;gap:4px} .ledger__line{display:flex;align-items:baseline;gap:12px;font-size:13.5px} .ledger__score{margin-left:auto;font-variant-numeric:tabular-nums;flex:none} .ledger__score--down{color:var(--text-muted)} /* The estimate as a range, not a percentage. The source holds a Low–High band, so the bar draws the band: reducing it to "75% of the high figure" throws away the half of the estimate that says how uncertain it was. */ .pd-range{position:relative;height:40px} .pd-range__window{position:absolute;right:0;top:0;bottom:16px;background:var(--bg-subtle); border-left:1px solid var(--wrg-grey-400);border-right:1px solid var(--wrg-grey-400)} .pd-range__track{position:absolute;left:0;right:0;top:10px;height:11px;border-radius:var(--r-pill); background:var(--wrg-grey-200)} .pd-range__fill{position:absolute;left:0;top:10px;height:11px;border-radius:var(--r-pill); background:var(--text)} .pd-range__fill--over{background:linear-gradient(90deg,var(--text) 0 88%,var(--accent) 88% 100%)} .pd-range__now{position:absolute;top:2px;bottom:16px;width:2px;background:var(--accent)} .pd-range__tick{position:absolute;bottom:0;font-size:11px;color:var(--text-muted); font-variant-numeric:tabular-nums} .pd-range__tick--start{left:0;color:var(--text-faint)} .pd-range__tick--end{right:0} /* One stacked bar in place of a column of percentages. A share IS a bar, and reading five numbers to learn that one team did three quarters of the work is work the screen should have done for the reader. */ .pd-split{display:flex;height:14px;border-radius:var(--r-pill);overflow:hidden; background:var(--wrg-grey-200)} .pd-split__seg{display:block;height:100%} .pd-split__seg--unmapped{background:var(--accent)} .pd-legend{display:flex;align-items:center;gap:18px;margin-top:10px;font-size:12.5px; color:var(--text-muted)} .pd-legend--wrap{flex-wrap:wrap;gap:6px 18px} .pd-legend__item{display:inline-flex;align-items:center;gap:7px} .pd-legend__swatch{width:18px;height:6px;border-radius:var(--r-pill);background:var(--text);flex:none} .pd-legend__swatch--window{width:18px;height:12px;border-radius:0;background:var(--bg-subtle); border-left:1px solid var(--wrg-grey-400);border-right:1px solid var(--wrg-grey-400)} .pd-legend__swatch--now{width:2px;height:14px;border-radius:0;background:var(--accent)} .pd-legend__figure{font-weight:500;color:var(--text);font-variant-numeric:tabular-nums} /* A workstream is a row with its share of the folder, and its tasks fold away behind it. Closed-over-total was the obvious bar and the wrong one: 84 of the live folder's 86 tasks are open, so every project would show an empty track. */ .pd-ws{border-top:1px solid var(--border)} .pd-ws__row{display:flex;align-items:center;gap:var(--sp-4);padding:11px 16px;cursor:pointer; list-style:none} .pd-ws__row::-webkit-details-marker{display:none} .pd-ws__row:hover{background:var(--bg-hover)} .pd-ws__name{width:280px;flex:none;font-size:13.5px;font-weight:700;min-width:0; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .pd-ws__track{flex:1;height:8px;border-radius:var(--r-pill);background:var(--bg-subtle); overflow:hidden} .pd-ws__fill{display:block;height:100%;background:var(--text)} .pd-ws__count{width:120px;flex:none;text-align:right;font-size:12px;color:var(--text-muted); font-variant-numeric:tabular-nums} /* The three note sections sit side by side only while all three are empty, which is every project today. The moment one carries writing it needs the full width to be read. */ .pd-notes{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--sp-4); margin-bottom:var(--sp-4)} /* The cards inside give up their own bottom margin to the grid's gap — so the grid has to carry the margin that separates it from the section below, or Workstreams butts straight up against it. */ .pd-notes .card{margin-bottom:0} .card__meta--none{color:var(--text-faint);font-variant-numeric:tabular-nums} .pd-waiting{color:var(--accent);font-weight:700} /* A band computed from three of five signals is not the claim a band computed from five is. The qualifier sits with the band, not at the foot of the card where a reader has already moved on. */ .pd-partial{font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:10px; color:var(--warn);border:1px solid var(--warn-soft);background:var(--warn-soft); padding:2px 6px;border-radius:var(--r-pill)} .pd-partial__why{margin-top:10px} @media (max-width:900px){ .pd-ws__name{width:150px} .pd-ws__count{width:92px} } /* The health ledger. One line per thing that scored, its cost right-aligned against it — a band with no ledger is a verdict nobody can argue with, and this one is computed by us. */ .ledger{display:grid;gap:4px} .ledger__line{display:flex;align-items:baseline;gap:12px;font-size:13.5px} .ledger__score{margin-left:auto;font-variant-numeric:tabular-nums;flex:none} .btn--sm{padding:3px 9px;font-size:12.5px} .btn--ghost{background:none;border:1px solid transparent;color:var(--text-muted);border-radius:var(--r-sm);cursor:pointer} .btn--ghost:hover{background:var(--bg-subtle);color:var(--text);border-color:var(--border)} /* 15. Login ============================================================== */ .auth{min-height:100vh;background:var(--bg-shell);display:grid;place-items:center;padding:24px} .auth__card{width:100%;max-width:372px;background:var(--bg-surface);border-radius:var(--r-lg); box-shadow:var(--sh-3);padding:30px 28px 22px} .auth__mark{width:46px;height:46px;border-radius:11px;background:var(--wrg-grey-900); display:grid;place-items:center;margin:0 auto 14px} .auth__mark svg{width:26px;height:26px} .auth__title{font-size:19px;text-align:center} .auth__sub{font-size:13.5px;color:var(--text-muted);text-align:center;margin:4px 0 20px} .auth__form{display:flex;flex-direction:column;gap:12px} .auth__meta{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:13px} .auth__meta a{white-space:nowrap} .auth__or{display:flex;align-items:center;gap:10px;color:var(--text-faint);font-size:12px; text-transform:uppercase;letter-spacing:.1em;margin:4px 0} .auth__or::before,.auth__or::after{content:"";flex:1;height:1px;background:var(--border)} .auth__foot{text-align:center;font-size:12.5px;color:var(--text-muted);margin-top:16px} .auth__legal{text-align:center;font-size:11.5px;color:var(--text-faint);margin-top:18px} /* split variant */ .auth--split{display:grid;grid-template-columns:1fr 1fr;place-items:stretch;padding:0} .auth__brand{background:var(--wrg-grey-900);color:#fff;padding:44px;display:flex; flex-direction:column;justify-content:flex-end;position:relative;overflow:hidden} .auth__brand-copy{position:relative;z-index:1} .auth__brand-mark{width:38px;height:38px} .auth__quote{font-size:25px;font-weight:300;line-height:1.32;letter-spacing:-.015em;max-width:16ch; position:relative;z-index:1;margin-bottom:14px} .auth__quote b{font-weight:700} .auth__brand-foot{font-size:12.5px;color:var(--side-muted);position:relative;z-index:1} .auth__ghost{position:absolute;top:50%;left:50%;transform:translate(-50%,-58%); width:min(58%,230px);opacity:.9;z-index:0} .auth__pane{background:var(--bg-app);display:grid;place-items:center;padding:24px} .auth__pane .auth__card{box-shadow:var(--sh-2);border:1px solid var(--border)} /* compact variant on the dark shell */ .auth--bare .auth__card{box-shadow:none;background:transparent;max-width:330px} .auth--bare .auth__title,.auth--bare .auth__sub{color:#fff} .auth--bare .auth__sub{color:var(--side-muted)} .auth--bare .input{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);color:#fff} .auth--bare .input::placeholder{color:rgba(255,255,255,.35)} .auth--bare .label{color:rgba(255,255,255,.75)} .auth--bare .auth__mark{background:rgba(255,255,255,.08)} .auth--bare .choice span{color:rgba(255,255,255,.7)} /* 16. Utilities ========================================================== */ .u-muted{color:var(--text-muted)} .u-right{margin-left:auto} .u-mono{font-variant-numeric:tabular-nums} .u-mb0{margin-bottom:0} .u-mb4{margin-bottom:var(--sp-4)} .u-flex{display:flex;align-items:center;gap:var(--sp-2)} .u-wrap{flex-wrap:wrap} .u-scroll-y{max-height:290px;overflow-y:auto} .icon{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.7; stroke-linecap:round;stroke-linejoin:round} .section-label{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--text-muted); margin:22px 0 10px} /* 18. Overlays =========================================================== All overlays are CSS-only. Pattern: <- trigger state Open <- any opener

<- must be the NEXT SIBLING of the input

In a real app, drop the input/label and toggle a .is-open class instead. ======================================================================== */ .ovl-in{position:absolute;opacity:0;pointer-events:none} .ovl{display:none} .ovl-in:checked+.ovl{display:block} .ovl__scrim{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.45); animation:ovlFade .16s ease} @keyframes ovlFade{from{opacity:0}to{opacity:1}} @keyframes ovlPop{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}} /* centred variants — keep the centring transform inside the keyframes so the element never animates from an off-centre position */ @keyframes ovlPopC{from{opacity:0;transform:translate(-50%,-50%) translateY(8px) scale(.985)} to{opacity:1;transform:translate(-50%,-50%)}} @keyframes ovlPopX{from{opacity:0;transform:translateX(-50%) translateY(8px) scale(.985)} to{opacity:1;transform:translateX(-50%)}} @keyframes ovlSlideR{from{transform:translateX(100%)}to{transform:none}} @keyframes ovlSlideU{from{transform:translateY(100%)}to{transform:none}} /* --- modal / dialog --- */ .modal{position:fixed;z-index:101;top:50%;left:50%;transform:translate(-50%,-50%); width:min(520px,calc(100vw - 32px));max-height:calc(100vh - 64px);overflow:auto; background:var(--bg-surface);border-radius:var(--r-lg);box-shadow:var(--sh-3); animation:ovlPopC .18s ease} .modal--sm{width:min(400px,calc(100vw - 32px))} .modal--lg{width:min(760px,calc(100vw - 32px))} .modal__head{display:flex;align-items:flex-start;gap:12px;padding:16px 18px 12px} .modal__title{font-size:15.5px} .modal__sub{font-size:12.5px;color:var(--text-muted);margin-top:3px;text-wrap:pretty} .modal__x{margin-left:auto;flex:none;width:28px;height:28px;display:grid;place-items:center; border-radius:var(--r-sm);color:var(--text-muted);cursor:pointer} .modal__x:hover{background:var(--bg-subtle);color:var(--text)} .modal__body{padding:0 18px 16px;font-size:13.5px} .modal__foot{display:flex;align-items:center;gap:9px;padding:12px 18px; border-top:1px solid var(--border);background:var(--bg-subtle); border-radius:0 0 var(--r-lg) var(--r-lg)} .modal__foot .spacer{flex:1} .modal__icon{width:34px;height:34px;flex:none;border-radius:9px;display:grid;place-items:center} .modal__icon svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.7; stroke-linecap:round;stroke-linejoin:round} .modal__icon--danger{background:var(--wrg-red-soft);color:var(--accent)} .modal__icon--warn{background:var(--warn-soft);color:var(--warn)} .modal__icon--ok{background:var(--ok-soft);color:var(--ok)} /* --- drawer / side panel --- */ .drawer{position:fixed;z-index:101;top:0;right:0;height:100vh; width:min(420px,calc(100vw - 40px));background:var(--bg-surface); box-shadow:var(--sh-3);display:flex;flex-direction:column;animation:ovlSlideR .2s ease} .drawer--left{right:auto;left:0;animation-name:ovlSlideL} @keyframes ovlSlideL{from{transform:translateX(-100%)}to{transform:none}} .drawer--wide{width:min(620px,calc(100vw - 40px))} .drawer__head{display:flex;align-items:center;gap:10px;padding:14px 18px; border-bottom:1px solid var(--border)} .drawer__title{font-size:14.5px} .drawer__body{flex:1;overflow-y:auto;padding:16px 18px} .drawer__foot{display:flex;align-items:center;gap:9px;padding:12px 18px; border-top:1px solid var(--border);background:var(--bg-subtle)} .drawer__foot .spacer{flex:1} /* The log-a-concern overlay wraps its body and footer in a

, so the column layout above stops at that element and the footer floats wherever the content ends rather than sitting on the bottom edge. Passing the flex through it puts the commit bar where every other drawer has it. */ .drawer > form{flex:1;min-height:0;display:flex;flex-direction:column} /* The commit bar. Save lives here rather than in .drawer__body, which scrolls: the primary action of a form must not be the one control that can leave the screen while the destructive one stays. The dot and the count are the whole feedback loop — they say the drawer noticed the typing, and they say what is at stake in closing it. */ .drawer__dirty{display:inline-flex;align-items:center;gap:7px;font-size:12.5px; color:var(--wrg-grey-700)} .drawer__dirty::before{content:"";width:6px;height:6px;border-radius:var(--r-pill); background:var(--accent)} /* Grey while the write is in flight: red means "unsent", and the moment it is sent that stops being true even though the count has not changed yet. */ .drawer__dirty--busy{color:var(--text-muted)} .drawer__dirty--busy::before{background:var(--border-strong)} /* The discard confirm takes over the same strip rather than opening a second overlay, which is the shape confirmBlock already set for delete. Tinted, not red-filled: the design system keeps #fa4c4f off large fills. */ .drawer__foot--discard{background:var(--wrg-red-soft);border-top-color:var(--accent)} .drawer__discard{font-size:12.5px;color:var(--text)} /* field() captions a readonly row with `.label` (13px, medium) and formLabel captions an editable one with `.section-label` (11px mono caps). Side by side in one Record grid that read as two different kinds of thing for no reason anybody could name — and the bolder of the two was on the half nobody can touch. Matched here rather than by changing either helper: `.label` is the form kit's own caption and is right everywhere else it is used. */ .drawer .form-grid .label{font-size:11px;font-weight:400;text-transform:uppercase; letter-spacing:.12em;color:var(--text-muted)} /* A group heading inside the drawer body: a label and a hairline running to the edge, so the editable half and the read-only half read as two things rather than one long form. */ .drawer__rule{display:flex;align-items:center;gap:10px;margin:18px 0 10px} .drawer__rule:first-child{margin-top:0} .drawer__rule .section-label{margin:0;flex:none} .drawer__rule::after{content:"";flex:1;height:1px;background:var(--border)} /* --- bottom sheet (mobile-first pattern) --- */ .sheet{position:fixed;z-index:101;left:0;right:0;bottom:0;background:var(--bg-surface); border-radius:var(--r-lg) var(--r-lg) 0 0;box-shadow:var(--sh-3);padding:8px 18px 18px; max-height:80vh;overflow:auto;animation:ovlSlideU .2s ease} .sheet__grab{width:36px;height:4px;border-radius:2px;background:var(--wrg-grey-200); margin:2px auto 12px} /* --- command palette --- */ .palette{position:fixed;z-index:101;top:14vh;left:50%;transform:translateX(-50%); width:min(560px,calc(100vw - 32px));background:var(--bg-surface);border-radius:var(--r-lg); box-shadow:var(--sh-3);overflow:hidden;animation:ovlPopX .18s ease} .palette__search{display:flex;align-items:center;gap:10px;padding:13px 16px; border-bottom:1px solid var(--border)} .palette__search svg{width:16px;height:16px;flex:none;stroke:var(--text-muted);fill:none; stroke-width:1.7;stroke-linecap:round} .palette__search input{flex:1;border:0;outline:0;font-size:14.5px;background:none} .palette__search input::placeholder{color:var(--text-faint)} .palette__list{max-height:330px;overflow-y:auto;padding:6px} .palette__group{font-size:10.5px;text-transform:uppercase;letter-spacing:.12em; color:var(--text-faint);padding:8px 10px 4px} .palette__item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r-sm); font-size:13.5px;color:var(--text)} .palette__item:hover,.palette__item.is-active{background:var(--bg-subtle);text-decoration:none} .palette__item.is-active{background:var(--wrg-red-soft);color:var(--accent)} .palette__item svg{width:15px;height:15px;flex:none;opacity:.6;stroke:currentColor;fill:none; stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .palette__item .kbd{margin-left:auto} .palette__foot{display:flex;align-items:center;gap:14px;padding:9px 14px; border-top:1px solid var(--border);background:var(--bg-subtle);font-size:11.5px; color:var(--text-muted)} .kbd{font-size:10.5px;padding:1px 6px;border-radius:4px;border:1px solid var(--border-strong); background:var(--bg-surface);color:var(--text-muted);font-variant-numeric:tabular-nums} /* --- toasts --- */ .toast-stack{position:fixed;z-index:110;right:18px;bottom:18px;display:flex; flex-direction:column;gap:9px;width:min(340px,calc(100vw - 32px))} .toast-stack--inline{position:static;width:100%} .toast{display:flex;align-items:flex-start;gap:10px;padding:11px 12px;border-radius:var(--r); background:var(--wrg-grey-900);color:#fff;box-shadow:var(--sh-3);font-size:13px; animation:ovlPop .2s ease} .toast svg{width:16px;height:16px;flex:none;margin-top:1px;stroke:currentColor;fill:none; stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .toast__body{flex:1;min-width:0;text-wrap:pretty} .toast__body b{display:block;font-weight:500} .toast__body small{color:rgba(255,255,255,.62);font-size:11.5px} .toast__x{flex:none;width:22px;height:22px;display:grid;place-items:center;border-radius:5px; color:rgba(255,255,255,.6);cursor:pointer} .toast__x:hover{background:rgba(255,255,255,.12);color:#fff} .toast--ok svg{color:#7FD3A6} .toast--danger svg{color:var(--accent)} .toast--warn svg{color:#E8C071} .toast--light{background:var(--bg-surface);color:var(--text);border:1px solid var(--border)} .toast--light .toast__body small{color:var(--text-muted)} .toast--light .toast__x{color:var(--text-faint)} .toast--light .toast__x:hover{background:var(--bg-subtle);color:var(--text)} .toast__bar{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--accent); border-radius:0 0 var(--r) var(--r)} /* --- tooltip (hover, no JS) --- */ .tip{position:relative;display:inline-flex} .tip::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 7px);left:50%; transform:translateX(-50%) translateY(3px);white-space:nowrap;pointer-events:none; background:var(--wrg-grey-900);color:#fff;font-size:11.5px;padding:4px 8px; border-radius:5px;opacity:0;transition:opacity .13s,transform .13s;z-index:60} .tip::before{content:"";position:absolute;bottom:calc(100% + 2px);left:50%; transform:translateX(-50%);border:5px solid transparent;border-top-color:var(--wrg-grey-900); opacity:0;transition:opacity .13s;pointer-events:none;z-index:60} .tip:hover::after,.tip:focus-within::after{opacity:1;transform:translateX(-50%)} .tip:hover::before,.tip:focus-within::before{opacity:1} .tip--right::after{bottom:auto;top:50%;left:calc(100% + 9px);transform:translateY(-50%)} .tip--right::before{bottom:auto;top:50%;left:100%;transform:translateY(-50%); border-top-color:transparent;border-right-color:var(--wrg-grey-900)} /* --- popover / dropdown (details-based, reusable) --- */ .pop{position:relative;display:inline-flex} .pop>summary{list-style:none;cursor:pointer} .pop>summary::-webkit-details-marker{display:none} .pop__panel{position:absolute;z-index:70;top:calc(100% + 6px);left:0;min-width:210px; background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--r); box-shadow:var(--sh-3);padding:5px;animation:ovlPop .14s ease} .pop__panel--right{left:auto;right:0} .pop__panel--pad{padding:13px} .pop__title{font-size:10.5px;text-transform:uppercase;letter-spacing:.12em; color:var(--text-faint);padding:6px 9px 4px} .pop__item{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:var(--r-sm); font-size:13.5px;color:var(--text);white-space:nowrap;cursor:pointer} .pop__item:hover{background:var(--bg-subtle);color:var(--text);text-decoration:none} .pop__item svg{width:15px;height:15px;flex:none;opacity:.6;stroke:currentColor;fill:none; stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .pop__item .kbd{margin-left:auto} .pop__item--danger{color:var(--accent)} .pop__item--danger:hover{background:var(--wrg-red-soft)} .pop__sep{display:block;height:1px;background:var(--border);margin:4px 2px} /* --- loading / blocking overlay --- */ .loader{position:fixed;z-index:101;top:50%;left:50%;transform:translate(-50%,-50%);animation:ovlPopC .18s ease; display:flex;flex-direction:column;align-items:center;gap:12px;padding:24px 30px; background:var(--bg-surface);border-radius:var(--r-lg);box-shadow:var(--sh-3)} .spinner{width:26px;height:26px;border-radius:50%;border:2.5px solid var(--wrg-grey-200); border-top-color:var(--accent);animation:spin .7s linear infinite} .spinner--sm{width:15px;height:15px;border-width:2px} .spinner--invert{border-color:rgba(255,255,255,.2);border-top-color:#fff} @keyframes spin{to{transform:rotate(360deg)}} .loader__text{font-size:13px;color:var(--text-muted)} .skeleton{background:linear-gradient(90deg,var(--wrg-grey-100) 25%,#EDEDED 37%,var(--wrg-grey-100) 63%); background-size:400% 100%;animation:shimmer 1.3s ease infinite;border-radius:5px;height:11px} @keyframes shimmer{from{background-position:100% 0}to{background-position:0 0}} /* --- inline banner (page-level, dismissible) --- */ .banner{display:flex;align-items:center;gap:11px;padding:10px 14px;background:var(--wrg-grey-900); color:#fff;font-size:13px} .banner svg{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7; stroke-linecap:round;stroke-linejoin:round} .banner__body{flex:1;text-wrap:pretty} .banner a{color:#fff;text-decoration:underline} .banner--accent{background:var(--accent)} .banner__x{width:24px;height:24px;display:grid;place-items:center;border-radius:5px; color:rgba(255,255,255,.7);cursor:pointer} .banner__x:hover{background:rgba(255,255,255,.14);color:#fff} @media (max-width:640px){ .toast-stack{left:16px;right:16px;bottom:16px;width:auto} .drawer{width:100vw} /* The commit bar stacks rather than squeezing: at this width the count and two buttons in one row leave targets well under 44px. */ .drawer__foot{flex-wrap:wrap} .drawer__foot .drawer__dirty,.drawer__foot .drawer__discard{width:100%} .drawer__foot .btn{flex:1;padding-top:11px;padding-bottom:11px} } /* 19. Responsive ========================================================= Sidebar collapses behind a burger below 900px. Driven by a single checkbox (#nav-toggle) placed as the first child of — no JS. ======================================================================== */ #nav-toggle{position:absolute;opacity:0;pointer-events:none} .nav-scrim{display:none} @media (max-width:1240px){ .grid--4{grid-template-columns:repeat(2,minmax(0,1fr))} .grid--main,.grid--side{grid-template-columns:minmax(0,1fr)} } @media (max-width:900px){ .burger{display:grid} .app__main{border-radius:0;box-shadow:none} .topbar{border-radius:0;padding:0 var(--sp-4)} .app__body{padding:var(--sp-4) var(--sp-4) 32px} .sidebar{position:fixed;left:0;top:0;z-index:40;transform:translateX(-100%); transition:transform .2s ease;box-shadow:12px 0 34px rgba(0,0,0,.4)} #nav-toggle:checked~.app .sidebar{transform:none} #nav-toggle:checked~.nav-scrim{display:block;position:fixed;inset:0;z-index:30; background:rgba(0,0,0,.45)} .grid--3{grid-template-columns:repeat(2,minmax(0,1fr))} .auth--split{grid-template-columns:1fr} .auth--split .auth__brand{display:none} } @media (max-width:640px){ .grid--4,.grid--3,.grid--2{grid-template-columns:minmax(0,1fr)} .form-grid{grid-template-columns:minmax(0,1fr)} .page-head{flex-wrap:wrap} .page-head__actions{margin-left:0;width:100%} .topbar__tabs{overflow-x:auto} } /* print — keep the shell out of the way */ @media print{ body{background:#fff} .sidebar,.topbar,.bulkbar,.burger{display:none !important} .app__main{box-shadow:none;border-radius:0} .card{break-inside:avoid} } /* 20. Audit & report ===================================================== Shared by audit.html (internal, inside the shell) and report.html (standalone, client-facing). Grades: A/B pass, C caution, D/F fail. ======================================================================== */ .grade{font-weight:800;letter-spacing:-.03em;line-height:1} .grade--a,.grade--b{color:var(--ok)} .grade--c{color:var(--warn)} .grade--d,.grade--f{color:var(--accent)} .grade--na{color:var(--text-faint);font-weight:700;font-size:12px;letter-spacing:.06em} /* internal audit header */ .audit-eyebrow{display:flex;align-items:center;gap:8px;font-size:10.5px;letter-spacing:.14em; text-transform:uppercase;color:var(--accent);margin-bottom:6px} .audit-eyebrow span{color:var(--text-faint)} .audit-head{display:flex;align-items:center;gap:12px} .audit-head h1{font-size:24px} .audit-head .btn-row{margin-left:auto} .audit-meta{display:flex;flex-wrap:wrap;gap:18px;font-size:12px;color:var(--text-muted); margin:6px 0 18px} .audit-meta b{font-weight:500;color:var(--text)} .score-card{display:flex;gap:20px;padding:18px;align-items:flex-start} .score-badge{width:118px;flex:none;border:1px solid var(--border);border-radius:var(--r); padding:16px 10px;text-align:center;background:var(--bg-subtle)} .score-badge .grade{font-size:46px;display:block} .score-badge b{display:block;font-size:14px;font-weight:700;margin-top:6px} .score-badge__cap{display:block;font-size:10px;letter-spacing:.12em;text-transform:uppercase; color:var(--text-muted)} .score-body{flex:1;min-width:0} .score-body p{font-size:13.5px;text-wrap:pretty;max-width:74ch} .score-note{font-size:12px;color:var(--text-muted);margin-top:10px} /* pillar summary strip */ .pillars{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:14px 0} .pillar{background:var(--bg-surface);border:1px solid var(--border);border-left:3px solid var(--border-strong); border-radius:var(--r);padding:12px 14px} .pillar--pass{border-left-color:var(--ok)} .pillar--warn{border-left-color:var(--warn)} .pillar--fail{border-left-color:var(--accent)} .pillar--na{border-left-color:var(--wrg-grey-200)} .pillar__name{display:block;font-size:10px;letter-spacing:.12em;text-transform:uppercase; color:var(--text-muted)} .pillar__row{display:flex;align-items:baseline;gap:7px;margin-top:5px} .pillar__row .grade{font-size:26px} .pillar__score{font-size:13px;color:var(--text-muted);font-variant-numeric:tabular-nums} .pillar__notes{display:flex;flex-wrap:wrap;gap:10px;font-size:11.5px;color:var(--text-muted);margin-top:3px} .pillar__notes b{color:var(--accent);font-weight:500} /* talking points */ .points{padding:14px 16px} .points li{display:flex;gap:10px;font-size:13px;padding:5px 0;text-wrap:pretty} .points li::before{content:"→";color:var(--accent);flex:none} /* findings tables */ .finding{margin-bottom:12px} .finding>summary{display:flex;align-items:center;gap:9px;padding:11px 16px;cursor:pointer; list-style:none;border-bottom:1px solid var(--border)} .finding>summary::-webkit-details-marker{display:none} .finding__caret{width:12px;height:12px;flex:none;stroke:var(--text-muted);fill:none;stroke-width:2.4; stroke-linecap:round;stroke-linejoin:round;transition:transform .15s} .finding[open] .finding__caret{transform:rotate(90deg)} .finding__name{font-size:14px;font-weight:700} .finding__tally{margin-left:auto;font-size:11.5px;color:var(--text-muted)} .finding__grade{font-size:16px} .table--checks{min-width:640px} .table--checks td{vertical-align:top;padding:10px 14px} .check__name{display:block;font-size:13px;font-weight:500} .check__rule{display:block;font-size:11.5px;color:var(--text-faint)} .status{display:inline-block;padding:2px 7px;border-radius:4px;font-size:10px;font-weight:700; letter-spacing:.08em;text-transform:uppercase} .status--pass{background:var(--ok-soft);color:var(--ok)} .status--fail{background:var(--wrg-red-soft);color:var(--accent)} .status--partial{background:var(--warn-soft);color:var(--warn)} .status--na{background:var(--bg-subtle);color:var(--text-faint)} .status--unknown{background:var(--info-soft);color:var(--info)} .evidence>summary{list-style:none;cursor:pointer;font-size:10.5px;letter-spacing:.1em; text-transform:uppercase;color:var(--accent)} .evidence>summary::-webkit-details-marker{display:none} .evidence pre{margin-top:7px;padding:10px 12px;background:var(--bg-subtle);border:1px solid var(--border); border-radius:var(--r-sm);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px; line-height:1.55;color:var(--text-muted);overflow-x:auto;white-space:pre-wrap;word-break:break-all} .pillar-flag{display:flex;gap:9px;margin:10px 14px;padding:9px 12px;border-radius:var(--r-sm); background:var(--wrg-red-soft);border:1px solid #F3CFCB;color:#8E3A32;font-size:12.5px} .pillar-note{margin:10px 14px;padding:9px 12px;border-radius:var(--r-sm);background:var(--bg-subtle); border:1px solid var(--border);color:var(--text-muted);font-size:12.5px} /* ---- public report (standalone page) ---- */ .report{background:var(--bg-app);min-height:100vh} /* --- banner: full-bleed black, editorial display type --- */ .report__banner{position:relative;overflow:hidden;background:#0A0A0A;color:#fff; padding:34px 24px 60px} .report__banner::after{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(90% 120% at 100% 0%,rgba(228,103,91,.20),transparent 62%), radial-gradient(70% 90% at 0% 100%,rgba(255,255,255,.045),transparent 60%)} .report__inner{width:min(980px,100%);margin:0 auto;position:relative;z-index:1} .report__nav{display:flex;align-items:center;gap:12px;padding-bottom:78px} .report__nav img{width:36px;height:42px} .report__nav .report__nav-tag{margin-left:auto;font-size:12px;letter-spacing:.14em; text-transform:uppercase;color:rgba(255,255,255,.42)} .report__back{display:inline-flex;align-items:center;gap:6px;margin-left:18px;color:#fff; font-size:13px;text-decoration:none;border:1px solid rgba(255,255,255,.28); border-radius:9px;padding:7px 13px;transition:background .13s,border-color .13s} .report__back:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.5); color:#fff;text-decoration:none} .report__back svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2; stroke-linecap:round;stroke-linejoin:round} @media (max-width:560px){ .report__back{margin-left:12px;padding:6px 10px;font-size:12px} } .report__slash{font-size:15px;color:var(--accent);margin-bottom:18px;letter-spacing:-.01em} .report__slash span{color:rgba(255,255,255,.42);margin-left:8px} .report__title{font-size:clamp(42px,6.4vw,74px);line-height:1.02;letter-spacing:-.035em; font-weight:800;max-width:15ch;text-wrap:balance} .report__title em{font-style:normal;color:var(--accent)} .report__sub{font-size:16px;color:rgba(255,255,255,.55);margin-top:20px} /* headline score row (replaces the old boxed hero) */ .report__hero{display:flex;gap:34px;align-items:flex-end;flex-wrap:wrap;margin-top:52px; padding-top:26px;border-top:1px solid rgba(255,255,255,.14)} .report__score{display:flex;align-items:baseline;gap:12px;flex:none} .report__score b{font-size:78px;font-weight:800;letter-spacing:-.05em;line-height:.86} .report__score i{font-style:normal;font-size:19px;color:rgba(255,255,255,.4)} .report__score .grade{font-size:30px;padding-left:14px;margin-left:6px; border-left:1px solid rgba(255,255,255,.16);color:#F09A90} .report__hero p{flex:1;min-width:300px;font-size:17px;line-height:1.55; color:rgba(255,255,255,.72);text-wrap:pretty;max-width:58ch} .report__hero b{color:#fff;font-weight:700} .report__main{padding:56px 24px 72px} .report__label{font-size:14px;letter-spacing:-.01em;color:var(--accent);margin:52px 0 18px; text-transform:none} .report__label::before{content:"// "} .report__label:first-child{margin-top:0} .report__lede{font-size:19px;line-height:1.62;text-wrap:pretty;max-width:66ch} .area-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px} .area{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--r); padding:16px 18px} .area__top{display:flex;align-items:center;gap:12px;margin-bottom:9px} .area__name{font-size:14.5px;font-weight:700} .area__top .grade{margin-left:auto;font-size:24px} .area p{font-size:13px;color:var(--text-muted);text-wrap:pretty} .opps{display:flex;flex-direction:column;gap:10px} .opp{display:flex;gap:16px;align-items:flex-start;background:var(--bg-surface); border:1px solid var(--border);border-radius:var(--r);padding:14px 18px} .opp__n{font-size:22px;font-weight:800;color:var(--accent);line-height:1;flex:none;width:20px} .opp__t{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap} .opp__t b{font-size:15px;font-weight:500} .opp__area{display:block;font-size:12.5px;color:var(--text-muted);margin-top:3px} .opp__sev{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint)} .note-card{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--r); padding:16px 18px;font-size:14px;line-height:1.55;color:var(--text-muted);text-wrap:pretty;margin-bottom:10px} .report__foot{border-top:1px solid var(--border);margin-top:46px;padding-top:20px; font-size:14px;line-height:1.6;color:var(--text-muted);text-wrap:pretty} .report__foot-row{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap; margin-top:16px;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-faint)} @media (max-width:1100px){ .pillars{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:900px){ } @media (max-width:640px){ .pillars,.area-grid{grid-template-columns:minmax(0,1fr)} .score-card{flex-direction:column} .report__title{font-size:28px} .report__banner{padding:30px 18px 38px} .report__main{padding:28px 18px 40px} } @media print{ .report__banner{-webkit-print-color-adjust:exact;print-color-adjust:exact} .finding{break-inside:avoid} } /* 21. Client report v2 =================================================== Explanatory, client-facing report. Standalone page (no app shell). ======================================================================== */ .verdict-chip{display:inline-flex;align-items:center;gap:7px;padding:4px 11px;border-radius:var(--r-pill); font-size:11.5px;font-weight:500;letter-spacing:.04em;text-transform:uppercase; background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.18)} .verdict-chip::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor} .verdict-chip--risk{color:#F09A90} .verdict-chip--ok{color:#8FD6AE} /* score scale */ .scale{margin-top:30px;position:relative} .scale__track{position:relative;height:9px;display:flex} .scale__track i{height:100%} .scale__track i:first-child{border-radius:5px 0 0 5px} .scale__track i:last-child{border-radius:0 5px 5px 0} .scale__marker{position:absolute;top:-1px;width:0;height:11px; border-left:2px solid #fff;transform:translateX(-1px)} .scale__marker::before{content:"";position:absolute;left:50%;top:-8px;transform:translateX(-50%); border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid #fff} .scale__legend{display:flex;justify-content:space-between;margin-top:11px;font-size:11.5px; letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.45)} .scale__legend b{color:#fff;font-weight:500} /* verdict cards */ .verdicts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px} .verdict{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--r); padding:20px 22px;border-top:3px solid var(--border-strong)} .verdict--good{border-top-color:var(--ok)} .verdict--watch{border-top-color:var(--warn)} .verdict--risk{border-top-color:var(--accent)} .verdict__label{display:block;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase; color:var(--text-muted);margin-bottom:6px} .verdict__head{display:block;font-size:18px;font-weight:700;letter-spacing:-.015em;margin-bottom:6px} .verdict p{font-size:15px;line-height:1.55;color:var(--text-muted);text-wrap:pretty} /* pillar explainers */ .pillar-list{display:flex;flex-direction:column;gap:12px} .pl{display:grid;grid-template-columns:64px minmax(0,1fr) 168px;gap:22px;align-items:start; background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--r);padding:20px 22px} .pl__grade{text-align:center} .pl__grade .grade{font-size:40px;display:block} .pl__grade small{display:block;font-size:11.5px;color:var(--text-faint);margin-top:2px; font-variant-numeric:tabular-nums} .pl__name{display:flex;align-items:center;gap:9px;font-size:18px;font-weight:700;margin-bottom:5px} .pl__what{font-size:15px;line-height:1.55;color:var(--text-muted);text-wrap:pretty} .pl__why{display:flex;gap:8px;margin-top:9px;padding:9px 11px;border-radius:var(--r-sm); background:var(--bg-subtle);font-size:14.5px;line-height:1.55;text-wrap:pretty} .pl__why b{font-weight:500} .pl__why svg{width:14px;height:14px;flex:none;margin-top:2px;stroke:var(--text-muted);fill:none; stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .pl__side{display:flex;flex-direction:column;gap:9px;font-size:13.5px} .pl__side>span{display:flex;justify-content:space-between;gap:8px;color:var(--text-muted)} .pl__side>span>b{font-weight:500;color:var(--text);text-align:right} .impact{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700; letter-spacing:.09em;text-transform:uppercase;padding:2px 8px;border-radius:4px} .impact--high{background:var(--wrg-red-soft);color:var(--accent)} .impact--med{background:var(--warn-soft);color:var(--warn)} .impact--low{background:var(--bg-subtle);color:var(--text-muted)} /* visibility chain */ .chain{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px} .chain__col{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--r);padding:20px 22px} .chain__ico{width:32px;height:32px;border-radius:8px;background:var(--wrg-grey-900);color:#fff; display:grid;place-items:center;margin-bottom:11px} .chain__ico svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.6; stroke-linecap:round;stroke-linejoin:round} .chain__col h3{font-size:17px;margin-bottom:5px} .chain__col p{font-size:14.5px;line-height:1.55;color:var(--text-muted);text-wrap:pretty;margin-bottom:11px} .chain__feeds{display:flex;flex-wrap:wrap;gap:6px} .chain__feeds span{font-size:12.5px;padding:2px 8px;border-radius:var(--r-pill); border:1px solid var(--border);color:var(--text-muted)} .chain__feeds span.is-weak{border-color:#F3CFCB;background:var(--wrg-red-soft);color:var(--accent)} .chain__verdict{margin-top:13px;padding-top:12px;border-top:1px solid var(--border);font-size:14.5px;line-height:1.55} .chain__verdict b{font-weight:700} /* drawbacks */ .draw{display:flex;flex-direction:column;gap:12px} .draw__item{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--r); border-left:3px solid var(--accent);padding:20px 22px} .draw__top{display:flex;align-items:baseline;gap:11px;flex-wrap:wrap;margin-bottom:6px} .draw__n{font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--text-faint)} .draw__title{font-size:18px;font-weight:700;letter-spacing:-.01em} .draw__area{font-size:13px;color:var(--text-muted)} .draw p{font-size:15px;line-height:1.55;color:var(--text-muted);text-wrap:pretty;max-width:76ch} .draw__cost{display:flex;flex-wrap:wrap;gap:26px;margin-top:14px;padding-top:13px; border-top:1px solid var(--border);font-size:13.5px} .draw__cost span{display:flex;flex-direction:column;gap:2px} .draw__cost em{font-style:normal;font-size:10px;letter-spacing:.1em;text-transform:uppercase; color:var(--text-faint)} .draw__cost b{font-weight:500} .draw--minor{border-left-color:var(--warn)} /* strengths */ .wins{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px} .win{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--r);padding:18px 20px} .win b{display:flex;align-items:center;gap:7px;font-size:15.5px;margin-bottom:5px} .win b svg{width:15px;height:15px;stroke:var(--ok);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round} .win p{font-size:14px;line-height:1.55;color:var(--text-muted);text-wrap:pretty} /* projection */ .projection{display:flex;gap:22px;align-items:center;flex-wrap:wrap;background:var(--wrg-grey-900); color:#fff;border-radius:var(--r-lg);padding:22px 24px} .projection__now,.projection__then{text-align:center;flex:none} .projection__now b,.projection__then b{display:block;font-size:42px;font-weight:800;letter-spacing:-.03em;line-height:1} .projection__now span,.projection__then span{display:block;font-size:10.5px;letter-spacing:.12em; text-transform:uppercase;color:rgba(255,255,255,.45);margin-top:5px} .projection__now b{color:#F09A90} .projection__then b{color:#8FD6AE} .projection__arrow{color:rgba(255,255,255,.3);font-size:22px;flex:none} .projection p{flex:1;min-width:240px;font-size:15.5px;line-height:1.55;color:rgba(255,255,255,.78);text-wrap:pretty} .projection p b{color:#fff;font-weight:700} /* CTA */ .cta{display:flex;gap:18px;align-items:center;flex-wrap:wrap;border:1px solid var(--border); border-radius:var(--r-lg);background:var(--bg-surface);padding:20px 24px;margin-top:16px} .cta h2{font-size:21px;margin-bottom:4px} .cta p{font-size:15px;line-height:1.55;color:var(--text-muted);max-width:56ch;text-wrap:pretty} .cta .btn-row{margin-left:auto} /* ---- access gate: blurred report behind a lock dialog ---- */ .gate{position:relative;min-height:100vh;overflow:hidden} .gate__behind{filter:blur(9px) saturate(.85);transform:scale(1.03);pointer-events:none; user-select:none;height:100vh;overflow:hidden} .gate__veil{position:fixed;inset:0;background:rgba(38,38,38,.55); backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)} .gate__dialog{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%); width:min(420px,calc(100vw - 32px));background:var(--bg-surface);border-radius:var(--r-lg); box-shadow:0 30px 70px rgba(0,0,0,.45);padding:34px 34px 26px;text-align:center; animation:ovlPopC .25s ease} .gate__lock{width:48px;height:48px;border-radius:13px;background:var(--wrg-grey-900);color:#fff; display:grid;place-items:center;margin:0 auto 14px} .gate__lock svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.7; stroke-linecap:round;stroke-linejoin:round} .gate__dialog h1{font-size:22px;letter-spacing:-.02em} .gate__for{font-size:14px;color:var(--text-muted);margin:5px 0 4px} .gate__site{font-size:15px;font-weight:700;margin-bottom:16px} .gate__peek{display:flex;justify-content:center;gap:22px;padding:13px 0;margin-bottom:18px; border-top:1px solid var(--border);border-bottom:1px solid var(--border)} .gate__peek span{display:flex;flex-direction:column;gap:4px;font-size:11px;letter-spacing:.1em; text-transform:uppercase;color:var(--text-faint)} .gate__peek b{font-size:22px;font-weight:800;letter-spacing:-.02em;color:var(--text)} .gate__peek .blurred{filter:blur(6px);color:var(--text-muted)} .gate__form{display:flex;flex-direction:column;gap:11px;text-align:left} .gate__foot{font-size:13px;color:var(--text-muted);margin-top:15px} .gate__brand{position:fixed;top:24px;left:50%;transform:translateX(-50%);color:#fff} .gate__brand img{width:30px;height:35px} @media (max-width:900px){ .verdicts,.chain,.wins{grid-template-columns:minmax(0,1fr)} .pl{grid-template-columns:44px minmax(0,1fr);gap:14px} .pl__side{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;gap:16px;padding-top:10px; border-top:1px solid var(--border)} .pl__side>span{display:inline-flex;gap:6px} } /* banner responsive */ @media (max-width:640px){ .report__banner{padding:24px 18px 40px} .report__nav{padding-bottom:44px} .report__nav .report__nav-tag{display:none} .report__hero{margin-top:34px;gap:22px} .report__score b{font-size:58px} .report__hero p{font-size:15.5px;min-width:0} .report__lede{font-size:17px} .report__main{padding:36px 18px 48px} } /* ============================================================ ADA Testing Tool — tool-specific classes (on top of the kit) ============================================================ */ .req{color:var(--accent);font-weight:700} .text-muted{color:var(--text-muted)} /* New-project action inside a nav-group label */ .nav-group__label{display:flex;align-items:center;justify-content:space-between} .nav-group__action{background:none;border:0;color:var(--side-text);font:inherit;font-size:10px;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;padding:2px 4px;border-radius:var(--r-sm)} .nav-group__action:hover{background:var(--side-hover);color:#fff} /* Selected-project header card */ .project-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px} .project-header__name{font-size:18px;font-weight:700;margin:0} .project-header__meta{margin:2px 0 0;font-size:12.5px} .project-header__actions{display:flex;gap:8px;flex-shrink:0} /* Scan form + summary layout */ .scan-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:20px;align-items:start;margin-bottom:24px} .crawl-opts{grid-column:1/-1;padding:10px 0px 25px 25px;margin-top:-4px} @media (max-width:900px){.scan-grid{grid-template-columns:1fr}} /* Summary list */ .summary-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px} .summary-list li{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:13px} .summary-list li span{color:var(--text-muted)} .summary-list li b{font-weight:600;text-align:right} /* Scan history */ .history-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column} .history-list li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 4px;border-bottom:1px solid var(--border);cursor:pointer;font-size:13px} .history-list li:last-child{border-bottom:0} .history-list li:hover{background:var(--bg-hover)} /* Report */ .report-actions{margin-bottom:14px} .pdf-sets{display:contents} .card--flush{padding:0;overflow:hidden} #report-frame{width:100%;height:78vh;min-height:600px;border:0;display:block;background:#fff} /* Project modal internals */ .modal__form{display:flex;flex-direction:column;gap:16px} .auth-fields{margin-top:10px} /* The kit's component classes set display, which overrides the `hidden` attribute the app uses to toggle sections. Make `hidden` authoritative again. */ [hidden]{display:none !important} /* Scan history rows */ .history-list li{gap:14px} .h-score{flex-shrink:0;width:42px;height:42px;border-radius:var(--r);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;background:var(--bg-subtle);color:var(--text)} .h-score--good{background:var(--ok-soft);color:var(--ok)} .h-score--mid{background:var(--warn-soft);color:var(--warn)} .h-score--bad{background:var(--wrg-red-soft);color:var(--accent-hover)} .h-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px} .h-url{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .h-when{color:var(--text-muted);font-size:11.5px} .h-delta{margin-left:6px;font-weight:600} .h-delta.up{color:var(--ok)} .h-delta.down{color:var(--accent-hover)} .h-actions{flex-shrink:0} /* Native