. */ .skip-link{position:absolute;left:8px;top:-44px;z-index:200;background:var(--teal);color:#fff;padding:8px 14px;border-radius:0 0 6px 6px;font-size:13px;font-weight:600;text-decoration:none;transition:top .12s} .skip-link:focus{top:0} /* @ds: Commands.html — the canonical product shell: a full-bleed STICKY masthead over a single full-width content column on plain --paper. No box, no dotted canvas (those are mockup-only). */ header.bar{background:var(--sheet);border-bottom:1px solid var(--line);padding:0 22px;display:flex;gap:16px;align-items:center;min-height:54px;position:sticky;top:0;z-index:5} header .r{font-family:var(--serif);font-weight:600;font-size:19px;color:var(--ink);display:inline-flex;align-items:center;gap:8px;text-decoration:none} header a.r:hover{color:var(--ink);text-decoration:none;opacity:.8} header .sub{color:var(--ink-mute);font-size:11.5px;font-family:var(--mono);letter-spacing:.02em} header nav{display:flex;gap:20px;margin-left:auto;align-self:stretch} header nav a{color:var(--ink-mute);font-family:var(--mono);font-size:11px;letter-spacing:.07em;text-transform:uppercase;display:flex;align-items:center;border-bottom:2px solid transparent} header nav a:hover{color:var(--ink);text-decoration:none} header nav a.on{color:var(--teal);border-bottom-color:var(--teal)} /* Secondary "help" links (Commands, Guide) — grouped + set off from the primary lenses. */ header nav .nav-help{display:inline-flex;gap:16px;align-items:stretch;margin-left:6px;padding-left:16px;border-left:1px solid var(--line)} /* ── v2 grouped header nav (DS portal-nav.js): Overview · Catalog ▾ · Compliance ▾ · Help ▾. Server-rendered by navBar(); layout() adds only the dropdown-wiring + spine scripts. Dropdowns open on hover (CSS) and click/touch (JS) — JS-degradable. */ nav.rxnav{display:flex;gap:2px;margin-left:auto;align-self:stretch;align-items:stretch} .rxnav .rx-top{font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-mute);text-decoration:none;display:flex;align-items:center;gap:5px;border:0;background:none;cursor:pointer;padding:0 10px;border-bottom:2px solid transparent;white-space:nowrap} .rxnav .rx-top:hover{color:var(--teal);text-decoration:none} .rxnav .rx-top.on{color:var(--teal);border-bottom-color:var(--teal)} .rxnav .rx-top .cv{font-size:8px;opacity:.55;transform:translateY(1px)} .rxnav .rx-grp{position:relative;display:flex;align-items:stretch} /* .rx-right is spacing only — the divider before Help. It must NOT own the menu alignment. */ .rxnav .rx-grp.rx-right{margin-left:6px;padding-left:8px;border-left:1px solid var(--line)} /* EVERY menu right-anchors to its own button, so it grows LEFTWARDS, into the page. nav.rxnav{margin-left:auto} parks all buttons against the viewport's right edge, so a menu anchored left:0 runs off-screen: Compliance overflowed by 42px at a 1500px window, and Catalog cleared by only 37px — inheriting the same bug the moment Compliance is hidden (catalog-only) and it slides right. Only .rx-right carried right:0, which fixed Help alone and left the bug to migrate to whichever group ends up beside it. Anchoring right by default makes overflow impossible for ANY group at ANY viewport, with no dependence on how many groups render. */ .rxnav .rx-menu{position:absolute;top:100%;right:0;margin-top:-1px;min-width:236px;background:var(--sheet);border:1px solid var(--line);border-radius:11px;box-shadow:0 18px 44px -20px rgba(20,30,30,.55);padding:7px;display:none;flex-direction:column;gap:1px;z-index:60} .rxnav .rx-grp:hover .rx-menu,.rxnav .rx-grp.open .rx-menu{display:flex} .rxnav .rx-menu a{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-transform:none;letter-spacing:0;font-family:var(--sans);font-size:13px;color:var(--ink);text-decoration:none;padding:8px 11px;border-radius:8px;border-bottom:0;background:none} .rxnav .rx-menu a:hover{background:var(--wash);text-decoration:none} .rxnav .rx-menu a.on{background:var(--teal-wash)} .rxnav .rx-menu a .rx-l{font-weight:600;color:var(--ink);display:flex;align-items:center;gap:8px} .rxnav .rx-menu a.on .rx-l{color:var(--teal-press)} .rxnav .rx-menu a .rx-here{font-family:var(--mono);font-size:8.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--teal-press);background:var(--sheet);border:1px solid var(--teal-line);border-radius:20px;padding:0 6px} .rxnav .rx-menu a .rx-d{font-family:var(--sans);font-size:11px;font-weight:400;color:var(--ink-mute);text-transform:none;letter-spacing:0;line-height:1.35} /* An external destination (Documentation, Contact for help) leaves the portal. The arrow marks it; it is aria-hidden and paired with a visually-hidden "(opens in a new tab)", because a glyph is not a word and a screen reader must not be the one reader who is surprised by the new tab. .rx-l is a flex row with gap:8px (it spaces the "you are here" pill), which is too wide for an arrow sitting against its label — the negative margin pulls it back to 4px. Colour is a token, not an opacity, so the pair stays measurable against AA. */ .rxnav .rx-menu a .rx-ext{margin-left:-4px;font-size:10.5px;font-weight:400;color:var(--ink-mute)} .rxnav .rx-menu a:hover .rx-ext{color:var(--teal)} /* The line between "screens in this portal" and "pages on the internet". Rendered as a flex item in the .rx-menu column, so it needs its own height. */ .rxnav .rx-menu .rx-sep{height:1px;background:var(--line);margin:6px 9px} @media (max-width:760px){.rxnav{gap:0}.rxnav .rx-top{padding:0 6px;font-size:10px}.rxnav .rx-menu{min-width:200px}} /* Below ~480px the brand + ~8-item nav no longer fit one row; contain the masthead so it scrolls horizontally WITHIN itself instead of pushing the whole page (no page-level horizontal scroll). */ @media (max-width:479px){header.bar{overflow-x:auto;scrollbar-width:none}header.bar::-webkit-scrollbar{display:none}} /* Claim-scoped two-tab strip (Record · DORA) — NOT the host nav; only the two forwarded artifacts. */ .claimtabs{display:flex;gap:8px;align-items:center;margin:0 0 16px;border-bottom:1px solid var(--line);padding-bottom:0} .claimtabs a{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;color:var(--ink-mute);font-weight:600;font-size:14px;border-bottom:2px solid transparent;margin-bottom:-1px} .claimtabs a:hover{color:var(--ink);text-decoration:none} .claimtabs a.on{color:var(--teal);border-bottom-color:var(--teal)} /* Claim-record header chrome (ported from the Private Portal RoPA Record design — named classes replacing the builder's former one-off inline styles). Claim-only selectors; no global conflict. */ .claimhead{background:var(--teal-wash);border:1px solid var(--teal-line);border-radius:8px;padding:14px 18px;margin:0 0 16px} .claimhead .ttl{font-weight:700;margin:0 0 2px} .claimhead .prov{color:var(--ink-mute);margin:8px 0 0;font-size:12.5px;line-height:1.5} /* strong inside muted banners stays muted (the design has no global strong colour; it inherits). */ .claimhead .prov strong{color:inherit} .statusbox{border:1px solid var(--gold-line);border-left:4px solid var(--gold);background:var(--warn-wash);border-radius:8px;padding:12px 15px;margin:0 0 14px;font-size:13.5px;line-height:1.5;color:var(--ink)} /* @ds success = GREEN (Payment & Checkout + Account & Billing mockups agree; the RoPA-claim mockup's teal here is drift) — a "✓ done" box must read as success, not information. */ .statusbox.ok{border-color:var(--ok-line);border-left-color:var(--ok);background:var(--ok-wash);color:var(--ok-ink)} .statusbox ul{margin:6px 0 0;padding-left:20px} .firstclaim{border:1px solid var(--teal-line);border-left:4px solid var(--teal);background:var(--teal-wash);border-radius:8px;padding:12px 15px;margin:0 0 14px;font-size:13.5px;line-height:1.5;color:var(--teal-press)} /* The make-official card — the design's collapsible .official details (summary teaser → .o-body). The product keeps its richer 3-step flow (osteps) inside o-body; superset preserved. */ .official{border:1px solid var(--teal-line);border-top:3px solid var(--teal);border-radius:12px;background:var(--sheet);margin:16px 0 0;box-shadow:0 16px 40px -32px rgba(20,30,30,.4);overflow:hidden} .official>summary{cursor:pointer;list-style:none;padding:18px 22px;display:flex;align-items:center;gap:14px;flex-wrap:wrap} .official>summary::-webkit-details-marker{display:none} .official .o-txt{flex:1;min-width:240px} .official .o-txt h2{margin:0 0 3px;font-family:var(--serif)} .official .o-txt p{font-size:13.5px} .official .o-act{display:inline-flex;align-items:center;gap:8px;background:var(--teal);color:#fff;border-radius:9px;padding:11px 20px;font-weight:600;font-size:15px} .official[open] .o-act{display:none} .official[open]>summary{border-bottom:1px solid var(--line);padding-bottom:14px} .o-body{padding:6px 22px 20px} .o-body>p{font-size:13.5px;line-height:1.55} .gw{margin:16px 0} .gw .gw-h{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-mute);font-weight:700;margin:0 0 10px} .gw ul{list-style:none;margin:0;padding:0;display:grid;gap:9px} .gw li{position:relative;padding-left:25px;font-size:14px;color:var(--ink-soft);line-height:1.45} .gw li::before{content:'✓';position:absolute;left:0;top:0;width:17px;height:17px;border-radius:50%;background:var(--ok-wash);color:var(--ok);font-size:10px;font-weight:700;display:grid;place-items:center;margin-top:1px} /* Sign-in to act (claim views) — the design's .signin-act card + .ssobtn/.ssodiv SSO + .roledefs. */ .signin-act{border:1px solid var(--teal-line);background:var(--teal-wash);border-radius:11px;padding:15px 18px;margin:0 0 16px} .signin-act .sia-txt{font-size:13px;color:var(--ink-soft);line-height:1.5;margin:0 0 11px;max-width:72ch} .signin-act .sia-form{display:flex;gap:8px;flex-wrap:wrap;align-items:center} .signin-act .sia-form input{font:inherit;font-size:13.5px;padding:9px 12px;border:1px solid var(--line-strong);border-radius:8px;background:var(--sheet);color:var(--ink);min-width:220px;flex:1 1 220px;max-width:320px} .signin-act .sia-sso{display:inline-block;margin:9px 0 0;font-size:12px;color:var(--teal)} .ssobtn{display:block;width:100%;max-width:380px;text-align:center;font:inherit;font-weight:600;font-size:13.5px;background:var(--sheet);border:1px solid var(--line-strong);color:var(--ink);border-radius:8px;padding:9px 12px;cursor:pointer;text-decoration:none;margin:0 0 6px} .ssobtn:hover{border-color:var(--ink-mute);text-decoration:none} .ssodiv{font-size:11.5px;color:var(--ink-mute);margin:0 0 8px} .roledefs{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:6px} .roledefs li{position:relative;padding-left:16px;font-size:12.5px;color:var(--ink-soft);line-height:1.45} .roledefs li::before{content:'';position:absolute;left:3px;top:8px;width:5px;height:5px;border-radius:50%;background:var(--teal)} .roledefs li strong{color:var(--ink)} /* D39 claim-side fill — the design's .fillform (ff-grid fields + ff-check confirm). The product's fill is a form panel (one interaction) rather than the mockup's inline per-cell .gap editors. */ .fillform{border:1px solid var(--teal-line);border-top:3px solid var(--teal);border-radius:12px;background:var(--sheet);padding:18px 20px;margin:16px 0 0;box-shadow:0 16px 40px -32px rgba(20,30,30,.4)} .fillform h2{font-family:var(--serif);font-weight:500;font-size:18px;margin:0 0 4px} .fillform .ff-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px} .fillform .ff-grid .ff-val{grid-column:1/-1} .fillform label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-soft);margin:0} .fillform select,.fillform input[type=text]{display:block;width:100%;max-width:none;margin-top:4px;font:inherit;font-size:13.5px;padding:8px 11px;border:1px solid var(--line-strong);border-radius:8px;background:var(--sheet);color:var(--ink)} .fillform .ff-check{display:block;font-weight:400;font-size:13px;color:var(--ink-soft);margin:12px 0 0} /* A post-seal fill on a sealed row — saved to the live record, waiting for a re-sign. */ .pendfill{margin:6px 0 2px;font-size:12px;line-height:1.5;color:var(--ink-soft);background:var(--teal-wash);border:1px solid var(--teal-line);border-left:3px solid var(--teal);border-radius:8px;padding:6px 10px;max-width:56ch} /* C-D fill-in-place — the row's own

editor. Same visual family as .fillform (teal-edged panel), scaled down to live inside a detail-table cell. */ .fedit{display:inline-block;vertical-align:baseline} .fedit>summary{list-style:none;cursor:pointer;display:inline-block} .fedit>summary::-webkit-details-marker{display:none} .fedit>summary::marker{content:""} .fedit[open]{display:block;margin-top:6px} .fedit[open]>summary{margin-bottom:2px} .fedit .fedit-form{margin:6px 0 4px;display:grid;gap:8px;max-width:56ch;background:var(--sheet);border:1px solid var(--teal-line);border-left:3px solid var(--teal);border-radius:10px;padding:12px 14px;box-shadow:0 12px 30px -26px rgba(20,30,30,.45)} .fedit .fedit-form select,.fedit .fedit-form input:not([type=checkbox]):not([type=hidden]){font:inherit;font-size:13px;width:100%;padding:7px 10px;border:1px solid var(--line-strong);border-radius:8px;background:var(--paper);color:var(--ink)} .fedit .fedit-form label{font-size:12.5px;font-weight:400;line-height:1.45;color:var(--ink-soft)} .fedit .fedit-form .fedit-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap} /* Shape B (2026-07-17): the per-activity "confirm all its awaiting calls" act. A calm teal action row under the activity's detail table — the deliberate, named confirmation the approver makes after reviewing the whole activity above it. Reuses the token palette; no global change. */ .confirm-act{margin:14px 0 0;padding:12px 14px;border:1px solid var(--teal-line);border-left:3px solid var(--teal);border-radius:10px;background:var(--teal-wash)} .confirm-act .btn{margin:0} .confirm-act .ca-note{margin:8px 0 0;font-size:12px;line-height:1.5;color:var(--ink-soft)} /* The in-page confirm-intent panel for a legal confirmation (replaces window.confirm, 2026-07-16): the pause before a legal act, in the product's own dialect - gold callout family, injected inside the editor form at the moment of intent. */ .cfi{border:1px solid var(--gold-line,var(--line-strong));border-left:4px solid var(--gold);border-radius:8px;background:var(--warn-wash);padding:10px 12px} .cfi .cfi-t{margin:0 0 8px;font-size:12.8px;line-height:1.5;color:var(--ink)} .cfi .cfi-row{display:flex;gap:8px;flex-wrap:wrap} /* A-C plan questions on the claim pay card — bordered option rows, the picked one tinted. */ .planq{border:1px solid var(--line);border-radius:10px;padding:10px 14px 12px;margin:0 0 10px;background:var(--sheet)} .planq legend{font-size:13px;font-weight:600;padding:0 6px} .planopt{display:flex;gap:9px;align-items:baseline;margin:4px 0 0;padding:7px 10px;cursor:pointer;border:1px solid var(--line);border-radius:8px;background:var(--paper)} .planopt:hover{border-color:var(--ink-mute)} .planopt:has(input:checked){border-color:var(--teal);background:var(--teal-wash)} /* A-C €12k licence-key hand-off (paid receipt + admin/approver sessions). */ .keyhand{margin-top:10px;border:1px solid var(--teal-line);border-left:3px solid var(--teal);border-radius:10px;padding:12px 15px;background:var(--teal-wash)} .keyhand .keysteps{margin:2px 0 8px;padding-left:20px;font-size:12.8px;line-height:1.55;color:var(--ink-soft)} .keyhand .keysteps li{padding:1px 0} .keyhand .keyval{display:block;overflow-wrap:anywhere;font-family:var(--mono);font-size:11.5px;user-select:all;background:var(--paper);border:1px solid var(--line-strong);border-radius:8px;padding:9px 11px;margin-top:2px} /* B-C seal version history — card treatment matching the record's other sections. */ .verhist{margin-top:20px;border:1px solid var(--line);border-radius:12px;background:var(--sheet);padding:16px 20px;box-shadow:0 16px 40px -36px rgba(20,30,30,.5)} .verhist h2{font-family:var(--serif);font-weight:500;font-size:18px;margin:0 0 2px} /* D39 DORA per-cell fill — quiet aligned forms (the save wakes up once there is something to save; saves stay per-cell on purpose: each cell carries its own by/at provenance). */ .cellform{display:flex;gap:6px;align-items:center;margin:0} .cellform input[name=value]{font:inherit;font-size:12.5px;flex:1;min-width:0;padding:5px 9px;border:1px solid var(--line);border-radius:7px;background:var(--paper);color:var(--ink)} .cellform input[name=value]:focus{border-color:var(--teal);outline:none} .cellform .btn.sm{opacity:.4} .cellform input[name=value]:not(:placeholder-shown)~.btn.sm,.cellform input[name=value]:focus~.btn.sm{opacity:1} summary.addrow{list-style:none;cursor:pointer;display:inline-block;font-size:12.5px;font-weight:600;color:var(--teal-press);border:1px dashed var(--teal-line);border-radius:8px;padding:4px 11px;background:var(--teal-wash)} summary.addrow::-webkit-details-marker{display:none} summary.addrow::marker{content:""} .claimtabs .needs-pill{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.04em;text-transform:none;color:var(--proj);background:var(--proj-wash);border:1px solid var(--proj-line);border-radius:999px;padding:1px 8px} main{max-width:1140px;margin:0 auto;padding:26px 32px 48px} /* Prose reads at a comfortable measure; tables/grids/cards still use the full shell width. */ main>p,main>.legend{max-width:var(--measure)} main>h1{margin-top:4px} main>h2{margin-top:var(--s5)} main>.banner:first-child,main>.ov-glance,main>.handoff,main>table,main>.md{max-width:none} /* The first stat strip / banner sits flush under the masthead — no double top gap. */ main>.ov-glance:first-child{margin-top:0} table{border-collapse:collapse;width:100%;background:var(--sheet);border:1px solid var(--line);border-radius:0;overflow:hidden;margin:0} th,td{text-align:left;padding:10px 13px;font-size:13px;border-bottom:1px solid var(--line);vertical-align:top} /* @ds: tokens/tables.css helper classes — denser inventories (.compact) and scannable, hoverable rows (.rows-hover) for the long columns ledger on the Data Map. */ table.compact th,table.compact td{padding:8px 12px} table.compact{font-size:13px} table.rows-hover tbody tr{transition:background .1s} table.rows-hover tbody tr:hover{background:var(--teal-wash)} /* Plain, readable tables — legibility over decoration. Headers and the row-labels in key/value tables are sentence-case sans (not tiny all-caps monospace), so they read at a glance. */ thead th{font-family:var(--sans);font-size:12.5px;font-weight:600;color:var(--ink-soft);background:var(--wash)} tbody th{font-family:var(--sans);font-size:12.5px;font-weight:600;color:var(--ink-soft);background:transparent;white-space:nowrap;width:172px} tbody tr:last-child td,tbody tr:last-child th{border-bottom:0} /* ONE badge system — consistent shape/size; semantic colour used identically everywhere: teal = Regixo found/auto · red = personal data · gold = special-category / needs-you / DRAFT. */ .tag{display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.04em;text-transform:uppercase;font-weight:700;line-height:1.5;padding:2px 8px;border-radius:20px;white-space:nowrap;border:1px solid transparent;vertical-align:middle} /* A badge that carries a plain-English tooltip (wired up by the script at the end of the page). The dotted underline + help cursor signal "hover me to see what this means". */ .tag.has-tip{cursor:help;text-decoration:underline dotted;text-underline-offset:2px;text-decoration-thickness:1px} /* THE tooltip — the one panel every hint on every page opens (src/tooltip.ts). Appended to , so it is never clipped by a table/card overflow. Light card (not a dark block), positioned by the script. The old dark .htip bubble behind the "?" buttons is gone; there is one look now. max-width is clamped to the viewport so a long dataset id cannot push a 320px phone sideways, and the id itself may break anywhere (a chip's tooltip carries a full app-db/public/users id). NOTE: no backticks in this file — one would close the CSS template literal. */ #tip{position:absolute;z-index:60;max-width:min(270px,calc(100vw - 16px));overflow-wrap:anywhere;background:var(--sheet);color:var(--ink);font:13px/1.5 var(--sans);text-transform:none;letter-spacing:0;font-weight:400;padding:9px 12px;border:1px solid var(--line-strong);border-radius:8px;box-shadow:0 12px 30px -8px rgba(20,30,30,.3);pointer-events:none;display:none} /* A tooltip is live-only chrome: it never belongs on paper, and neither does the off-screen bag of description nodes that aria-describedby points at. */ @media print{#tip,#tipdesc{display:none!important}} .tag.auto{background:var(--teal-wash);color:var(--teal);border-color:var(--teal-line)} .tag.pii{background:var(--risk-wash);color:var(--risk);border-color:var(--risk-line)} .tag.special,.tag.art9,.tag.art10{background:var(--gold-wash);color:var(--gold-ink);border-color:var(--gold-line)} .tag.needs,.tag.draft,.tag.unknown{background:var(--gold-wash);color:var(--gold-ink);border-color:var(--gold-line)} /* Slice 6 trust chips (quiet-default): a muted, non-alarming chip for "✎ undescribed" — a gap to fill, not a risk. --ink-mute on --wash clears WCAG AA (the GAP-08 darkened value). */ .tag.dim{background:var(--wash);color:var(--ink-mute);border-color:var(--line)} /* @ds: DORA Register.html — the cell/section fill states the register adds to the tag system: provided = a person filled it (ok-green) · partly = part auto, part needs-you (slate proj) · official = sealed (deep ok-green). The auto/needs/draft tones above already cover the rest. */ .tag.provided{background:var(--ok-wash);color:var(--ok);border-color:var(--ok-line)} .tag.partly{background:var(--proj-wash);color:var(--proj);border-color:var(--proj-line)} .tag.sent{background:var(--proj-wash);color:var(--proj);border-color:var(--proj-line)} .tag.ok{background:var(--ok-wash);color:var(--ok-ink);border-color:var(--ok-line)} /* @ds Account & Billing.html — the gold (expires-soon) + risk (expired) tag variants (portal-wide ADDITIVE). */ .tag.gold{background:var(--gold-wash);color:var(--gold-ink);border-color:var(--gold-line)} .tag.risk{background:var(--risk-wash);color:var(--risk);border-color:var(--risk-line)} .tag.official{background:var(--ok-wash);color:var(--ok-ink);border-color:var(--ok-line)} /* @ds: RoPA Record.html .guardrail + Data Map.html — A6 legal-boundary band. Calm slate (--proj), NOT a red/gold warning, so it reads as guidance: "a person confirms legal fields, not Regixo". */ .guardrail{display:flex;gap:10px;align-items:flex-start;background:var(--proj-wash);border:1px solid var(--proj-line);border-left:3px solid var(--proj);border-radius:8px;padding:10px 13px;margin:11px 0 2px;font-size:12.5px;line-height:1.55;color:var(--ink-soft)} .guardrail .gi{flex:none;width:17px;height:17px;color:var(--proj);margin-top:1px} .guardrail b{color:var(--ink)} .guardrail a{color:var(--proj);font-weight:600} /* @ds: components/core/Tag.jsx — the neutral "none / not applicable" badge (no personal data). */ .tag.none{background:var(--wash);color:var(--ink-soft);border-color:var(--line-strong)} /* @ds Account & Billing.html — the muted "○ Not licensed" badge (portal-wide ADDITIVE variant). */ .tag.mute{background:var(--wash);color:var(--ink-mute);border-color:var(--line-strong)} .why{color:var(--ink-mute);font-size:11.5px} /* @ds: components/feedback/Banner.jsx — flex row, hairline, gold by default; ok=mono green, warn=gold. */ .banner{display:flex;align-items:center;gap:13px;font-size:13.5px;line-height:1.5;padding:13px 16px;border-radius:8px;margin:0 0 16px;border:1px solid} .banner.warn{background:var(--gold-wash);border-color:var(--gold-line);color:var(--gold-ink)} .banner.ok{font-family:var(--mono);font-size:12.5px;letter-spacing:.02em;background:var(--ok-wash);border-color:var(--ok-line);color:var(--ok)} /* @ds: components/feedback/Banner.jsx — the neutral "info" tone (the warn/ok tones already exist). */ .banner.info{background:var(--wash);border-color:var(--line);color:var(--ink-soft)} /* @ds: Overview.html — verbatim component CSS (search · glance/gtile · progress · draftcard · explore). */ /* UNREFERENCED since 2026-07-10: the Overview's search bar was removed (owner call — see overviewPage); the Map's rail styles its own input. Flagged, not deleted. .ta/.ta-menu below are still live. */ .search{display:flex;gap:10px;align-items:stretch;max-width:560px;margin:0 0 22px} .search .ta{flex:1;display:flex} .search input{flex:1;font:inherit;font-size:15px;padding:11px 14px;border:1px solid var(--line-strong);border-radius:8px;background:var(--sheet);color:var(--ink)} .search input::placeholder{color:var(--ink-mute)} .search button{flex:none;font:inherit;font-weight:600;font-size:14px;background:var(--teal);color:#fff;border:0;border-radius:8px;padding:0 18px;cursor:pointer} .glance{display:grid;grid-template-columns:repeat(var(--cols,4),1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:8px;overflow:hidden;margin:0 0 16px} .gtile{background:var(--sheet);padding:18px 18px;text-decoration:none;color:inherit;transition:background .12s} a.gtile:hover{background:var(--teal-wash);text-decoration:none} .gtile .n{font-family:var(--serif);font-size:30px;font-weight:600;line-height:1;color:var(--teal)} .gtile .n.risk{color:var(--risk)} .gtile .n.gold{color:var(--gold-ink)} .gtile .n.ok{color:var(--ok)} .gtile .l{font-size:12.5px;color:var(--ink-mute);margin-top:9px;line-height:1.4} /* @ds: the Overview progress line spans the full content width — opt it out of the global readable measure cap on main paragraphs (which was wrapping it at ~half width). */ .progress{font-size:13px;color:var(--ink-mute);margin:0 0 18px;max-width:none} /* @ds: the Overview landing h1 is the larger 31px (the RoPA record h1 stays the global 29px). */ body.ov h1{font-size:29px} /* Overview mockup fidelity — the shared globals (.banner/.btn/input) differ from THIS screen's mockup; scoped to body.ov so other screens (which have their own values) are untouched. Banner: the global .banner is chunkier (gap13/font13.5/pad13-16/r8/m16) than the Overview mockup (gap9/font13/pad9-14/r7/m18). .btn: global 14px/10-18/r8 vs Overview mockup 15px/11-19/r7 (.btn genuinely varies per mockup). Search input: our .search input(15px) was overridden by the later, equal-specificity global input[type=search] (font:inherit→16px, pad 8-11); a body.ov selector reclaimed the mockup's 15px/11-14 — UNREFERENCED since the Overview's search bar was removed (2026-07-10). Flagged, not deleted. */ body.ov .banner{gap:9px;padding:9px 14px;border-radius:7px;margin:0 0 18px} body.ov .banner.warn{font-size:13px} /* @ds: Data Map.html — coverage banner uses the same compact variant as Overview (box only, so the mono .banner.ok override is preserved); warn drops to 13px. */ body.map .banner{gap:9px;padding:9px 14px;border-radius:7px;margin:0 0 16px} body.map .banner.warn{font-size:13px} body.ov .btn{font-size:14px;padding:10px 18px;border-radius:8px} body.ov .search input{font-size:15px;padding:11px 14px} /* The intro's own 12px bottom margin used to be followed by the search bar (which carried the 22px). With the bar removed (2026-07-10) the intro sat 12px from a bordered card while every other block boundary on this page is 16-24px. Reclaim the rhythm — holds whether the next block is the "New here?" card or, once dismissed, the .glance tiles. */ body.ov h1 + p.muted{margin-bottom:20px} /* actions-row command chip: global .cmd is 13px/500/6-11 vs the Overview mockup's 12.5px/600/5-10. Scoped to .add .cmd so the bigger .cmd.lg chips in the "next" section (which already match) are untouched. */ body.ov .add .cmd{font-size:12.5px;font-weight:600;padding:5px 10px} /* DORA uses the canonical 1140px page width + global h1/chip sizes (consistent with every other screen); only the register TABLES stay dense (scoped under .sec-body). The unlock/export card text is 12.5px. */ .unlock.dora p{font-size:12.5px;color:var(--ink-soft);line-height:1.5} .tip{cursor:help;text-decoration:underline dotted;text-underline-offset:3px;text-decoration-color:var(--ink-mute)} .draftcard{display:flex;align-items:flex-start;gap:16px;border-radius:10px;padding:16px 20px;margin:24px 0 0;background:var(--teal-wash);border:1px solid var(--teal-line)} .draftcard.sent{background:var(--proj-wash);border-color:var(--proj-line)} .draftcard.sealed{background:var(--ok-wash);border-color:var(--ok-line)} .draftcard.none{background:var(--wash);border-color:var(--line)} .draftcard .dc-ico{flex:none;width:34px;height:34px;border-radius:8px;background:var(--sheet);border:1px solid var(--teal-line);display:grid;place-items:center;color:var(--teal);font-family:var(--serif);font-size:18px;margin-top:2px} .draftcard.sent .dc-ico{border-color:var(--proj-line);color:var(--proj)} .draftcard.sealed .dc-ico{border-color:var(--ok-line);color:var(--ok)} .draftcard.none .dc-ico{border-color:var(--line);color:var(--ink-mute)} .draftcard .dc-body{flex:1;min-width:0} .draftcard .dc-h{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:0 0 4px} .draftcard .dc-h b{font-size:15px;color:var(--ink)} .draftcard .dc-body>p{margin:0;font-size:13px;color:var(--ink-soft);line-height:1.5;max-width:82ch} .draftcard .dc-links{margin:9px 0 0;font-size:13px;display:flex;gap:16px;flex-wrap:wrap;align-items:center} .draftcard .dc-links .sep{color:var(--ink-mute)} .empty{background:var(--sheet);border:1px dashed var(--line-strong);border-radius:10px;padding:46px 30px;text-align:center} .empty h1,.empty h2{margin:0 0 8px} .empty p{max-width:52ch;margin:0 auto;color:var(--ink-mute);font-size:14px} .empty .run{margin-top:16px;font-size:13px} .empty .run{margin-top:16px;font-size:13px} /* @ds: components/core/StatStrip.jsx — the signature "glance": serif numbers on the sheet, hairline-separated, each over a small label. Teal by default; tone classes colour an at-risk figure; an tile washes teal on hover (the drill-in). Mirrors the existing .ov-glance look. */ .statstrip{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:8px;overflow:hidden;margin:0 0 18px} .stat-tile{background:var(--sheet);padding:18px;text-decoration:none;color:inherit;transition:background .12s;display:block} a.stat-tile:hover{background:var(--teal-wash);text-decoration:none} .stat-n{font-family:var(--serif);font-size:29px;font-weight:600;line-height:1;color:var(--teal)} .stat-n.risk{color:var(--risk)} .stat-n.gold{color:var(--gold)} .stat-n.proj{color:var(--proj)} .stat-n.ok{color:var(--ok)} .stat-l{font-size:12.5px;color:var(--ink-mute);margin-top:8px;line-height:1.4} /* @ds: RoPA Record.html .statstrip .st — the record's four-number glance (serif 25px tone numbers). */ .statstrip .st{background:var(--sheet);padding:14px 16px} .statstrip .st .n{font-family:var(--serif);font-size:25px;font-weight:600;line-height:1;color:var(--teal)} .statstrip .st .n.risk{color:var(--risk)} .statstrip .st .n.gold{color:var(--gold-ink)} .statstrip .st .n.mute{color:var(--ink-mute)} .statstrip .st .l{font-size:12px;color:var(--ink-mute);margin-top:7px;line-height:1.35} /* D60: four 1fr tracks cannot fit a phone — the grid overflowed by 22px at 320px even with a one-character label (measured), so the fourth tile has always been clipped there. It is the tile that now carries the owner split ("7 yours - 3 your compliance team's"), and a clipped ownership line is worse than none. Two-up on a phone; the four-up glance is unchanged everywhere else. */ @media(max-width:560px){.statstrip{grid-template-columns:repeat(2,1fr)}} /* @ds: RoPA Record.html .rtitle / .lede — the record title row (h1 + DRAFT/OFFICIAL tag) + lead. */ .rtitle{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 8px} .lede{font-size:15px;color:var(--ink-soft);max-width:72ch;margin:0 0 18px;line-height:1.6} .lede strong,.lede b{color:var(--ink)} /* @ds: components/core/Card.jsx — a sheet lifted off the canvas. flat=border-only · elevated=soft shadow · accent=teal top-rule (the premium step). */ .ds-card{background:var(--sheet);border:1px solid var(--line);border-radius:8px;padding:18px 20px;margin:var(--s4) 0} .ds-card.elevated{box-shadow:0 12px 32px -26px rgba(20,30,30,.55)} .ds-card.accent{border:1px solid var(--teal-line);border-top:3px solid var(--teal);border-radius:12px;padding:20px 22px;box-shadow:0 16px 40px -30px rgba(20,30,30,.4)} /* @ds: components/feedback/EmptyState.jsx — the calm "nothing here yet" panel: a glyph, a plain serif title, an honest one-line explanation, and an optional action. */ .emptystate{background:var(--sheet);border:1px dashed var(--line-strong);border-radius:8px;padding:40px 28px;text-align:center} .emptystate .es-glyph{font-size:26px;color:var(--ink-mute);line-height:1;margin-bottom:12px} .emptystate .es-title{font-family:var(--serif);font-weight:500;font-size:19px;color:var(--ink);margin:0 0 6px} .emptystate .es-desc{margin:0 auto;max-width:46ch;font-size:13.5px;color:var(--ink-mute);line-height:1.5} .emptystate .es-action{margin-top:16px;display:flex;justify-content:center;gap:10px;flex-wrap:wrap} input[type=search]{font:inherit;padding:8px 11px;width:300px;max-width:100%;border:1px solid var(--line-strong);border-radius:8px;background:var(--sheet);color:var(--ink)} /* One form-control look (2026-06-15 form polish): text/email/select share a comfortable height, a soft 8px radius, and a clear focus RING (border colour + shadow, not the bare OS outline). */ input[type=text],input[type=email],input[type=password],select{font:inherit;font-size:14px;line-height:1.4;padding:9px 12px;width:100%;max-width:380px;border:1px solid var(--line-strong);border-radius:8px;background:var(--sheet);color:var(--ink);transition:border-color .12s,box-shadow .12s} input::placeholder{color:var(--ink-mute);opacity:.75} input[type=text]:hover,input[type=email]:hover,input[type=password]:hover,select:hover{border-color:var(--ink-mute)} input[type=search]:focus,input[type=text]:focus,input[type=email]:focus,input[type=password]:focus,select:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-wash)} button:focus-visible{outline:2px solid var(--teal);outline-offset:2px} /* A field + its button read as ONE unit: equal height (align-items:stretch), the button never shrinks, both wrap cleanly on narrow screens. */ .fieldrow{display:flex;gap:10px;align-items:stretch;flex-wrap:wrap;margin:6px 0 0;max-width:480px} .fieldrow input{flex:1 1 240px;width:auto;min-width:0;max-width:none} .fieldrow select{flex:0 0 auto;width:auto} .fieldrow button{flex:0 0 auto;padding:10px 18px;font-size:14px;white-space:nowrap} /* Team card: align the role select + its row buttons (set/remove) on one baseline, matched heights. */ .teamtbl td{vertical-align:middle} .rolerow{display:inline-flex;gap:8px;align-items:center} .rolerow select{width:auto;min-width:150px;max-width:210px} .btn-inrow{min-height:42px;padding:0 14px;font-size:13px;display:inline-flex;align-items:center} /* ── signed-in records dashboard (the hosted home) ───────────────────────── */ .home-sub{margin:2px 0 0;color:var(--ink-mute)} /* attention-strip: stat tiles that double as filter links (number prominent, label under) */ .home-strip{display:flex;gap:10px;flex-wrap:wrap;margin:var(--s4) 0 0} .stat{display:inline-flex;align-items:baseline;gap:8px;padding:9px 15px;border:1px solid var(--line);border-radius:10px;background:var(--sheet);text-decoration:none;transition:border-color .12s,box-shadow .12s} .stat:hover{border-color:var(--ink-mute);text-decoration:none;box-shadow:0 6px 18px -14px rgba(20,30,30,.45)} .stat .n{font-family:var(--serif);font-size:20px;font-weight:600;line-height:1;color:var(--ink)} .stat .l{font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-mute)} .stat.warn{border-color:var(--gold-line);background:var(--gold-wash)} .stat.warn .n{color:var(--gold-ink)} .stat.ok{border-color:var(--teal-line);background:var(--teal-wash)} .stat.ok .n{color:var(--teal-press)} /* toolbar: a segmented filter control on the left, search + sort grouped on the right */ .home-bar{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin:var(--s3) 0 0;padding-bottom:var(--s3);border-bottom:1px solid var(--line)} .segctl{display:inline-flex;border:1px solid var(--line-strong);border-radius:9px;overflow:hidden;background:var(--sheet)} .segctl a{font-family:var(--mono);font-size:11.5px;letter-spacing:.02em;padding:7px 13px;color:var(--ink-soft);text-decoration:none;border-left:1px solid var(--line)} .segctl a:first-child{border-left:0} .segctl a:hover{background:var(--wash);text-decoration:none} .segctl a[aria-current]{background:var(--ink);color:#fff} .segctl.sm a{padding:6px 10px;font-size:11px} .home-right{margin-left:auto;display:flex;gap:16px;align-items:center;flex-wrap:wrap} .home-search{display:inline-flex;gap:8px;align-items:center} .home-search input{width:210px;padding:8px 12px} @media(max-width:640px){.home-search input{width:140px}} .home-sort{display:inline-flex;gap:8px;align-items:center;font-family:var(--mono);font-size:11px;color:var(--ink-mute)} /* record rows: a status-accented card; the title link is the row's primary action */ .recs{list-style:none;padding:0;margin:var(--s3) 0 0;display:flex;flex-direction:column;gap:12px} .rec{background:var(--sheet);border:1px solid var(--line);border-left:3px solid var(--line-strong);border-radius:10px;padding:15px 18px;transition:box-shadow .12s} .rec:hover{box-shadow:0 8px 26px -18px rgba(20,30,30,.5)} .rec.s-revoked,.rec.s-expired{border-left-color:var(--risk)} .rec.s-needs-re-sign,.rec.s-expires-soon,.rec.s-sync-stale{border-left-color:var(--gold)} .rec.s-official-clean{border-left-color:var(--teal)} .rec.archived{opacity:.6} .rec-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .rec-title{font-size:15.5px;font-weight:600;color:var(--ink)} .rec-title a{color:var(--ink)} .rec-title a:hover{color:var(--teal);text-decoration:none} .rec-role{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--ink-mute);white-space:nowrap} .rec-meta{color:var(--ink-mute);font-size:13px;margin:6px 0 0} .rec-meta .art{color:var(--risk);font-weight:600} .rec-foot{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:11px 0 0} .rec-attn{font-size:13.5px;color:var(--ink-soft);flex:1 1 220px;min-width:0} .rec-actions{display:inline-flex;gap:6px;align-items:center;flex-wrap:wrap} .labelform{display:inline-flex;gap:6px;align-items:center} .labelform input{width:150px;font-size:12.5px;padding:6px 10px} /* row-action button weights: the title is the primary action, so these stay SECONDARY (soft) and the destructive request stays QUIET (text) until hovered — never three filled buttons competing. */ .btn-soft{font:inherit;font-size:12.5px;font-weight:600;background:var(--wash);color:var(--ink-soft);border:1px solid var(--line-strong);border-radius:7px;padding:6px 12px;cursor:pointer} .btn-soft:hover{background:var(--sheet);border-color:var(--ink-mute);color:var(--ink)} .btn-quiet{font:inherit;font-size:12.5px;font-weight:600;background:transparent;color:var(--ink-soft);border:1px solid transparent;border-radius:7px;padding:6px 10px;cursor:pointer} .btn-quiet:hover{color:var(--risk);background:var(--risk-wash)} .btn-quiet:focus-visible{outline:2px solid var(--risk);outline-offset:2px} /* @ds: "Sign-in & Records Front" — the PUBLIC hosted portal's distinct, focused look. Scoped under body.hosted so it never touches the in-product screens (which keep the shared 29px/sans scale). The page keeps its evolved features (status states, roles, the records toolbar) — this is look only. */ body.hosted h1{font-size:26px;line-height:1.08} /* the hosted masthead's session control (design header.bar .sess): right-aligned sign-in / signed-in-as. */ body.hosted .bar .sess,body.claim .bar .sess{margin-left:auto;font-size:12px;color:var(--ink-mute);display:inline-flex;align-items:center;gap:5px} body.hosted .bar .sess a,body.hosted .bar .sess button,body.hosted .bar .sess label,body.claim .bar .sess a,body.claim .bar .sess button{color:var(--teal);text-decoration:underline;cursor:pointer;background:none;border:0;padding:0;font:inherit} body.hosted .bar .sess strong,body.claim .bar .sess strong{color:var(--ink-soft)} body.hosted .lede{font-family:var(--serif);font-size:17px;color:var(--ink-soft);line-height:1.5;margin:0 0 18px;max-width:60ch} body.hosted .btn{border-radius:8px;padding:10px 18px;font-size:14px} body.hosted label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-soft);margin:0 0 5px} body.hosted input[type=email]{font:inherit;font-size:14px;padding:10px 13px;width:100%;border:1px solid var(--line-strong);border-radius:8px;background:var(--sheet);color:var(--ink)} body.hosted .fieldrow{display:flex;gap:8px;flex-wrap:wrap} body.hosted .fieldrow input{flex:1;min-width:200px} body.hosted .fineprint{font-size:12px;color:var(--ink-mute);line-height:1.5;margin:16px 0 0} body.hosted .backlink{font-size:12.5px;margin:14px 0 0} /* the guided chooser — no-JS: each choice is a

+ a one-line lead (was: a 10.5px mono crumb, then

). / body.hosted .acct-h1{font-size:24px;line-height:1.12;margin:0 0 3px} body.hosted .acct-lead{font-size:13px;color:var(--ink-mute);line-height:1.5;margin:0 0 18px;max-width:66ch} / Navigable breadcrumb — the parent crumbs are links now (the only way up used to be the masthead logo). / body.hosted .crumbs a{color:var(--ink-mute);text-decoration:none} body.hosted .crumbs a:hover{color:var(--teal-press);text-decoration:underline} / reset the broad body.hosted label{} form rule (weight 600 + margin) — ours is a real , the DS's is a div / body.hosted .toggle{display:flex;align-items:center;gap:10px;padding:9px 0;margin:0;border-bottom:1px solid var(--line);font-weight:400} body.hosted .toggle:last-of-type{border-bottom:0} body.hosted .toggle .tt{flex:1;font-size:13px;color:var(--ink-soft);line-height:1.45} body.hosted .toggle .tt b{color:var(--ink)} body.hosted input.sw{appearance:none;flex:none;width:38px;height:22px;margin:0;border-radius:999px;background:var(--line-strong);position:relative;cursor:pointer} body.hosted input.sw:checked{background:var(--teal)} body.hosted input.sw::after{content:'';position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;transition:left .12s} body.hosted input.sw:checked::after{left:18px} body.hosted input.sw:focus-visible{outline:2px solid var(--teal);outline-offset:2px} body.hosted .privacy{font-size:12px;color:var(--ink-mute);background:var(--teal-wash);border:1px solid var(--teal-line);border-radius:8px;padding:11px 14px;margin:14px 0 0;line-height:1.5} body.hosted .privacy b{color:var(--teal-press)} body.hosted .reused{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--teal-wash);border:1px solid var(--teal-line);border-left:3px solid var(--teal);border-radius:10px;padding:13px 16px;margin:0 0 16px} body.hosted .reused .rn{flex:none;font-family:var(--serif);font-size:26px;font-weight:600;color:var(--teal-press);line-height:1} body.hosted .reused .rt{flex:1;min-width:220px;font-size:13px;color:var(--ink-soft);line-height:1.5} body.hosted .reused .rt b{color:var(--ink)} / @ds: Account & Billing (M6 E9-E11) — the billing table + renew card. / body.hosted .billtbl{width:100%;border-collapse:collapse;background:var(--sheet);border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:0 16px 40px -36px rgba(20,30,30,.5)} body.hosted .billtbl thead th{text-align:left;font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-mute);font-weight:700;padding:11px 16px;border-bottom:1px solid var(--line);background:var(--wash)} body.hosted .billtbl td{padding:13px 16px;border-bottom:1px solid var(--line);font-size:13px;vertical-align:middle} body.hosted .billtbl tr:last-child td{border-bottom:0} body.hosted .billtbl .rec-nm{font-weight:600;color:var(--ink)} body.hosted .billtbl .rec-sub{font-size:11.5px;color:var(--ink-mute);margin-top:2px} body.hosted .billtbl .pl{font-weight:600;color:var(--ink)} body.hosted .billtbl .pl.muted{color:var(--ink-mute)} body.hosted .billtbl .price{font-size:11.5px;color:var(--ink-mute)} body.hosted .payon{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:14px 0 0;padding:14px 18px;background:var(--sheet);border:1px solid var(--line);border-radius:12px} body.hosted .payon .po-t{flex:1;min-width:240px;font-size:13px;color:var(--ink-soft)} body.hosted .payon .po-t b{color:var(--ink)} body.hosted .hosted{font-size:11.5px;color:var(--ink-mute);margin:12px 0 0;line-height:1.5} body.hosted .hosted code{font-size:11px} body.hosted .statusbox.risk{border-color:var(--risk-line);border-left-color:var(--risk);background:var(--risk-wash)} body.hosted .renewcard{background:var(--sheet);border:1px solid var(--teal-line);border-top:3px solid var(--teal);border-radius:12px;padding:18px 20px;margin:14px 0 0;box-shadow:0 16px 40px -34px rgba(20,30,30,.4)} body.hosted .renewcard h2{font-family:var(--serif);font-weight:500;font-size:18px;margin:0 0 8px} body.hosted .rsum{display:flex;justify-content:space-between;gap:16px;font-size:13px;padding:7px 0;border-bottom:1px solid var(--line)} body.hosted .rsum:last-of-type{border-bottom:0} body.hosted .rsum .k{color:var(--ink-mute)} body.hosted .rsum .vv{color:var(--ink);font-weight:600;text-align:right} body.hosted .ractions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:14px} / the Account&Billing mockup's .statusbox is 13/16 (Payment + Claim mockups say 12/15 — known DS drift); scoped here / body.hosted .statusbox{padding:13px 16px} body.hosted .btn.ghost{background:var(--sheet);color:var(--ink);border-color:var(--ink-mute)} body.hosted .btn.ghost:hover{background:var(--wash);border-color:var(--ink)} body.hosted .btn.sm{padding:6px 12px;font-size:12.5px} / @ds: Payment & Checkout (M7 E12-E14) — the fixed pay-summary, the leaving interstitial, the return states. / .paysum{border:1px solid var(--teal-line);background:var(--teal-wash);border-radius:10px;padding:16px 18px;margin:14px 0 0} / @ds Payment & Checkout.html .btn.big — the primary checkout CTA is deliberately larger. / body.claim .btn.big{padding:12px 22px;font-size:15px} / @ds Payment & Checkout.html .nextstep — the post-payment hand-off bar closing the receipt. / / bottom margin: the mockup's stage ENDS at this bar, so it only sets a top margin — on the real page the record continues below and the bar must not sit flush against it. / body.claim .nextstep{margin:16px 0 16px;padding:14px 16px;border:1px solid var(--teal-line);background:var(--teal-wash);border-radius:10px;display:flex;align-items:center;gap:14px;flex-wrap:wrap} body.claim .nextstep .ns-t{flex:1;min-width:220px;font-size:13.5px;line-height:normal;color:var(--ink-soft)} body.claim .nextstep .ns-t strong{color:var(--ink)} body.claim .nextstep .btn{line-height:normal} .paysum .ps-row{display:flex;justify-content:space-between;gap:16px;font-size:13px;padding:5px 0;border-bottom:1px dashed var(--teal-line)} .paysum .ps-row:last-of-type{border-bottom:0} .paysum .ps-row .k{color:var(--ink-mute)} .paysum .ps-row .vv{color:var(--ink);font-weight:600;text-align:right} .paysum .ps-total{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-top:10px;padding-top:12px;border-top:1px solid var(--teal-line)} .paysum .ps-total .pt-l{font-size:13px;color:var(--ink-soft);font-weight:600} .paysum .ps-total .pt-v{font-family:var(--serif);font-size:28px;font-weight:600;color:var(--teal-press);line-height:1} .paysum .ps-total .pt-v small{font-family:var(--sans);font-size:13px;font-weight:600;color:var(--ink-mute)} .vatnote{font-size:11.5px;color:var(--ink-mute);margin:8px 0 0} .whyropa{margin:12px 0 0;padding:10px 13px;border:1px solid var(--teal-line);background:var(--teal-wash);border-radius:8px;font-size:12px;color:var(--ink-soft);line-height:1.5} .receipt{background:var(--sheet);border:1px solid var(--line);border-radius:12px;padding:18px 20px;margin:14px 0 0;box-shadow:0 16px 40px -34px rgba(20,30,30,.5)} .receipt h3{font-family:var(--serif);font-size:17px;font-weight:500;margin:0 0 10px} / line-height:normal — the DS private mockups set NO body line-height, so their dense receipt rows render tight (29px); our global 16px/1.6 base inflated the same rule to 36px. Scoped, not global. / .receipt .r-row{display:flex;justify-content:space-between;gap:16px;font-size:13px;line-height:normal;padding:7px 0;border-bottom:1px solid var(--line)} .receipt .r-row:last-child{border-bottom:0} .receipt .r-row .k{color:var(--ink-mute)} .receipt .r-row .vv{color:var(--ink);font-weight:600;text-align:right} .receipt .r-foot{margin-top:12px;display:flex;gap:14px;align-items:center;flex-wrap:wrap} .nextstep{margin:16px 0 0;padding:14px 16px;border:1px solid var(--teal-line);background:var(--teal-wash);border-radius:10px;display:flex;align-items:center;gap:14px;flex-wrap:wrap} .nextstep .ns-t{flex:1;min-width:220px;font-size:13.5px;color:var(--ink-soft)} .nextstep .ns-t strong{color:var(--ink)} .pending-bar{height:6px;border-radius:6px;background:var(--ok-line);overflow:hidden;margin:10px 0 2px} .pending-bar span{display:block;height:100%;width:40%;background:var(--ok);border-radius:6px;animation:rxsSlide 1.4s ease-in-out infinite} @keyframes rxsSlide{0%{margin-left:-40%}100%{margin-left:100%}} .leaving{max-width:480px;margin:42px auto;text-align:center} .leaving h2{margin:0 0 8px} .leaving p{font-size:13.5px;color:var(--ink-soft);margin:0 auto 6px;max-width:42ch} .leaving .ring{width:54px;height:54px;border-radius:50%;border:3px solid var(--teal-line);border-top-color:var(--teal);margin:0 auto 18px;animation:rxsSpin 1s linear infinite} @keyframes rxsSpin{to{transform:rotate(360deg)}} .leaving .stripe-by{font-family:var(--mono);font-size:11px;color:var(--ink-mute);margin:16px 0 0;display:inline-flex;align-items:center;gap:7px} .leaving .stripe-by .lock{color:var(--teal)} body.hosted .rec-meta{font-size:12px;color:var(--ink-mute);line-height:1.5} body.hosted .rec-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:9px;padding-top:9px;border-top:1px solid var(--line)} body.hosted .rec-attn{font-size:12.5px;color:var(--ink-soft)} body.hosted .rec.official .rec-attn{color:var(--ok)} body.hosted .rec-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center} body.hosted .btn-soft{font:inherit;font-size:11.5px;color:var(--ink-mute);background:none;border:1px solid var(--line);border-radius:7px;padding:5px 10px;cursor:pointer} body.hosted .btn-soft:hover{border-color:var(--ink-mute);color:var(--ink-soft)} body.hosted .btn-soft.danger{color:var(--risk)} body.hosted .btn-soft.danger:hover{border-color:var(--risk-line);color:var(--risk);background:var(--risk-wash)} / Rename = a disclosure (no permanent input): the summary is the "Rename" button; clicking it opens a small popover with the field, so the row stays clean and the action list matches the design. / body.hosted .rename{position:relative;display:inline-block} body.hosted .rename>summary{display:inline-flex;list-style:none} body.hosted .rename>summary::-webkit-details-marker{display:none} body.hosted .rename[open]>summary{border-color:var(--ink-mute);color:var(--ink-soft)} body.hosted .rename .labelform{position:absolute;top:calc(100% + 5px);left:0;z-index:10;display:flex;gap:6px;align-items:center;background:var(--sheet);border:1px solid var(--line);border-radius:9px;padding:7px;box-shadow:0 10px 30px -14px rgba(20,30,30,.45)} body.hosted .rename .labelform input{width:170px;font-size:12.5px;padding:6px 10px;border:1px solid var(--line-strong);border-radius:7px;background:var(--sheet);color:var(--ink)} / Request deletion = a two-step inline confirm (no browser confirm() dialog): the summary is the danger button; clicking it opens a popover explaining the action with an explicit Confirm. / body.hosted .confirm-del{position:relative;display:inline-block} body.hosted .confirm-del>summary{display:inline-flex;list-style:none} body.hosted .confirm-del>summary::-webkit-details-marker{display:none} body.hosted .confirm-del[open]>summary{background:var(--risk-wash);border-color:var(--risk-line);color:var(--risk)} body.hosted .confirm-panel{position:absolute;top:calc(100% + 5px);right:0;z-index:10;width:268px;background:var(--sheet);border:1px solid var(--risk-line);border-radius:9px;padding:12px 14px;box-shadow:0 10px 30px -14px rgba(20,30,30,.45)} body.hosted .confirm-panel p{font-size:12px;color:var(--ink-soft);margin:0 0 9px;line-height:1.5} body.hosted .empty{border:1px dashed var(--line-strong);border-radius:11px;background:var(--sheet);padding:36px 28px;text-align:center} body.hosted .empty h3{font-family:var(--serif);font-size:18px;font-weight:500;margin:0 0 8px} body.hosted .empty p{max-width:48ch;margin:0 auto 6px;color:var(--ink-mute);font-size:13px} body.hosted .trust{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:20px 0 0} body.hosted .trust .t{border:1px solid var(--line);border-radius:9px;padding:11px 14px;background:var(--sheet)} body.hosted .trust .t .th{display:flex;align-items:center;gap:7px;font-family:var(--serif);font-weight:600;color:var(--teal-press);font-size:14px} body.hosted .trust .t .td{font-size:11.5px;color:var(--ink-mute);margin-top:3px;line-height:1.4} .tag.t-ok{background:var(--teal-wash);color:var(--teal-press);border-color:var(--teal-line)} .tag.t-warn{background:var(--gold-wash);color:var(--gold-ink);border-color:var(--gold-line)} .tag.t-risk{background:var(--risk-wash);color:var(--risk);border-color:var(--risk-line)} .tag.t-mute{background:var(--wash);color:var(--ink-soft);border-color:var(--line-strong)} / Recovery / sign-in field group inside a step body — a clean block (no stray divider/centering). / .recover{margin:4px 0 0} .recover label,.ostep-b label{display:block;margin:0 0 5px;font-weight:600;color:var(--ink-soft);font-size:13px} / ── hosted-home trust tiles + recovery notices (Sign-in & Records Front mockup) ── / / @ds: "Sign-in & Records Front".trust — three reassurance tiles: a serif teal head + a small mute line. / .trust{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:20px 0 0} @media(max-width:560px){.trust{grid-template-columns:1fr}} .trust .t{border:1px solid var(--line);border-radius:9px;padding:11px 14px;background:var(--sheet)} .trust .t .th{display:flex;align-items:center;gap:7px;font-family:var(--serif);font-weight:600;color:var(--teal-press);font-size:14px} .trust .t .td{font-size:11.5px;color:var(--ink-mute);margin-top:3px;line-height:1.4} .trust-who{font-size:12.5px;color:var(--ink-mute);line-height:1.55;margin:16px 0 0} / @ds: "Sign-in & Records Front".notice — the privacy-preserving recovery / invalid-link callouts. / .notice{display:flex;gap:12px;align-items:flex-start;border-radius:11px;padding:16px 18px;margin:0 0 18px;border:1px solid} .notice .nic{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:15px;background:var(--sheet)} .notice h3{margin:0 0 3px;font-size:14px;font-weight:600} .notice p{margin:0;font-size:13px;line-height:1.5} .notice.ok{background:var(--ok-wash);border-color:var(--ok-line)} .notice.ok .nic{color:var(--ok)} .notice.ok h3{color:var(--ok-ink)} .notice.warn{background:var(--gold-wash);border-color:var(--gold-line)} .notice.warn .nic{color:var(--gold-ink)} .notice.warn h3{color:var(--gold-ink)} .answer .notice{margin:0} / @ds: state 6 pins the in-answer callout flush (mockup inline margin:0) / / Live typeahead — a dropdown of matching datasets + columns under the search box (script at page foot fetches /api/search). The .ta wrapper anchors the menu; it's the fast way to find anything. / .ta{position:relative;display:inline-block} .md-side .ta{display:block;width:100%} .ta-menu{position:absolute;z-index:40;top:calc(100% + 4px);left:0;min-width:260px;max-width:420px;width:max-content;max-height:340px;overflow:auto;background:var(--sheet);border:1px solid var(--line-strong);border-radius:9px;box-shadow:0 16px 40px -12px rgba(20,30,30,.32);display:none;padding:5px} .md-side .ta-menu{min-width:100%;width:100%} .ta-item{display:flex;align-items:baseline;gap:8px;padding:7px 9px;border-radius:6px;color:var(--ink);text-decoration:none;font-size:13.5px;white-space:nowrap} .ta-item b{font-weight:600} .ta-item small{color:var(--ink-mute);font-size:11.5px;margin-left:auto;font-family:var(--mono)} .ta-item:hover,.ta-item.on{background:var(--teal-wash);text-decoration:none} .ta-group{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-mute);padding:6px 9px 3px} .ta-empty{padding:9px;color:var(--ink-mute);font-size:13px} .filters{margin:0 0 14px;display:flex;gap:10px;align-items:center;flex-wrap:wrap} / Primary-button default applies ONLY to UNCLASSED