/* AASB S2 walkthrough v2.7: the shell and the six product screens, to the tenant captures (tenant-capture/screens.md and screens/*.png). Loaded after index.html's inline styles, so the shell rules here override them. Tokens from index.html :root only (NDS palette); type sizes follow the capture (15 / 13 / 12 / 11 px body sizes, serif display titles). */ /* ================================ Shell ================================ */ /* Rail (v3.6, spec v3.6-entrance-rail-closing.md section 3): the product's expanded rail, 212px, off-white. The Drova wordmark and "Collapse navigation" at the top; the six modules as rows (icon, the name, the product's sub-label beneath in the caption size). Selected (and lit by the walk, .tour-lit): grey row, orange glyph, the name in the semibold weight. Under 1100px, and at any width under body.rail-collapsed, the rail is today's 58px icon rail: nav.side is a size container and the icon-only rules below key off its width, so the two triggers share one set of rules. body.viewer still hides it (entry.css). v5.2 (spec v4/spec/v5.2-guide-card.md section 1): nothing is painted below the six modules (no bottom group, Labs, dividers or user block). nav.side#rail is the frame around #sidenav (the painted part) and the guide card (#guide); the frame does not scroll, #sidenav does (entry.css, with the card's own rules), so the overflow rules left this file. */ nav.side { width: 212px; background: var(--solar-100); container-type: inline-size; container-name: rail; } body.rail-collapsed nav.side { width: 58px; } @media (max-width: 1100px) { nav.side { width: 58px; } } .v2-rail-logo { height: 60px; display: flex; align-items: center; justify-content: space-between; gap: var(--s2); padding: 0 var(--s2) 0 var(--s4); border-bottom: 1px solid var(--dawn-500); flex-shrink: 0; } .v2-rail-home { display: flex; align-items: center; text-decoration: none; } .v2-rail-home .v2-wm { display: block; width: 92px; height: 20px; } .v2-wm .wm-e { fill: var(--earth-500); } .v2-wm .wm-d { fill: var(--dawn-500); } .v2-rail-home .v2-ring { display: none; } .v2-rail-home .v2-ring svg { width: 30px; height: 30px; display: block; } .v2-rail-fold { width: 32px; height: 32px; flex-shrink: 0; border: none; border-radius: var(--radius); background: transparent; display: inline-flex; align-items: center; justify-content: center; color: var(--text-medium); } .v2-rail-fold .ic { width: 20px; height: 20px; } .v2-rail-fold:hover { background: var(--solar-300); color: var(--text-base); } .v2-rail-fold:focus-visible, nav.side .ni.v2-ni:focus-visible { outline: 2px solid var(--earth-500); outline-offset: -2px; } nav.side .modules.v2-rail-top { padding: var(--s3) 0 0; flex: 1 0 auto; display: flex; flex-direction: column; align-items: stretch; overflow: visible; } nav.side .ni.v2-ni { width: 100%; height: 52px; min-height: 52px; margin: 0; padding: 0 var(--s3) 0 var(--s4); gap: var(--s3); border-radius: 0; display: flex; align-items: center; justify-content: flex-start; color: var(--text-base); text-decoration: none; cursor: pointer; } nav.side .ni.v2-ni svg { width: 20px; height: 20px; color: var(--earth-500); } nav.side .ni.v2-ni:hover { background: var(--solar-300); } nav.side .ni.v2-ni.active, nav.side .ni.v2-ni.tour-lit { background: var(--grey-200); } nav.side .ni.v2-ni.active svg, nav.side .ni.v2-ni.tour-lit svg { color: var(--dawn-500); } .v2-ni-t { display: flex; flex-direction: column; min-width: 0; flex: 1; } .v2-ni-n { font-family: 'NeutrifPro Regular', sans-serif; font-size: 14px; line-height: 18px; color: var(--text-base); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .v2-ni-s { font-family: 'NeutrifPro Regular', sans-serif; font-size: 12px; line-height: 16px; color: var(--text-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } nav.side .ni.v2-ni.active .v2-ni-n, nav.side .ni.v2-ni.tour-lit .v2-ni-n { font-family: 'NeutrifPro SemiBold', sans-serif; } /* v3.6 review (E4), kept in v5.2: on a short window (720px or less) the module rows tighten to 44px so the six modules and the guide card at the rail's foot fit a 650px laptop window; if they still do not, #sidenav scrolls above the card (entry.css). Before the icon-rail rules, which win in a narrow rail. */ @media (max-height: 720px) { nav.side .modules.v2-rail-top { padding-top: var(--s2); } nav.side .ni.v2-ni { height: 44px; min-height: 44px; } } /* The icon rail: under 1100px or under body.rail-collapsed (nav.side is then 58px wide). Labels live in aria-label and the hover balloon. */ @container rail (max-width: 120px) { .v2-rail-logo { justify-content: center; padding: 0; } .v2-rail-home .v2-wm { display: none; } .v2-rail-home .v2-ring { display: flex; } nav.side .ni.v2-ni { height: 40px; min-height: 40px; padding: 0; justify-content: center; } .v2-ni-t { display: none; } } /* Collapsed by the visitor on a wide screen: the ring above the control that expands the rail again (mirrored glyph). Under 1100px the control is not drawn: the width decides there. */ body.rail-collapsed .v2-rail-logo { flex-direction: column; justify-content: center; height: auto; min-height: 60px; gap: var(--s1); padding: var(--s3) 0 var(--s2); } body.rail-collapsed .v2-rail-fold .ic { transform: scaleX(-1); } @media (max-width: 1100px) { .v2-rail-fold { display: none; } body.rail-collapsed .v2-rail-logo { height: 60px; padding: 0; } } /* Top bar: 12px grey breadcrumb above a ~32px serif orange title, ← on detail pages, right links, ?, the Sheila AI pill */ .topbar { height: auto; min-height: 104px; padding: var(--s4) var(--s6); align-items: center; border-bottom: 1px solid var(--divider); } .v2-tb-left { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: var(--s2); } .v2-crumb { color: var(--text-medium); display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .v2-crumb-sep { color: var(--text-light); } .v2-tb-title { display: flex; align-items: center; gap: var(--s3); min-width: 0; } .v2-tb-title .title { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .v2-tb-back { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; color: var(--text-base); border-radius: var(--radius); flex-shrink: 0; } .v2-tb-back:hover { background: var(--solar-300); } .v2-tb-back svg.ic { width: 20px; height: 20px; } .topbar .actions { gap: var(--s4); } .v2-tlink { display: inline-flex; align-items: center; gap: var(--s2); color: var(--text-base); text-decoration: none; font-size: 16px; line-height: 20px; white-space: nowrap; } .v2-tlink span { text-decoration: underline; text-underline-offset: 3px; } .v2-tlink svg.ic { width: 18px; height: 18px; } .topbar .icon-btn.help svg.ic { width: 20px; height: 20px; color: var(--text-base); } .sheila-pill { height: 38px; border-radius: 19px; padding: 0 var(--s4) 0 var(--s3); background: linear-gradient(90deg, var(--dawn-100) 0%, var(--purple-50) 100%); border: 1px solid var(--purple-400); font-size: 16px; } .sheila-pill .v2-sav { width: 20px; height: 20px; } @media (max-width: 767px) { .topbar { min-height: 72px; padding: var(--s3) var(--s4); } .topbar .v2-tlink { display: none; } } /* ================================ Shared ================================ */ .v2-block { display: block; } .v2-sb { font-family: 'NeutrifPro SemiBold', sans-serif; } .v2-t15 { font-size: 15px; line-height: 20px; color: var(--text-base); } .v2-t13 { font-size: 13px; line-height: 18px; } .v2-t12 { font-size: 12px; line-height: 16px; } .v2-t11 { font-size: 11px; line-height: 15px; } .v2-clamp1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .v2-clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .v2-clamp3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .grow { flex: 1; min-width: 0; } .v2-sav { width: 24px; height: 24px; display: inline-block; vertical-align: middle; flex-shrink: 0; } .v2-sav.sm { width: 18px; height: 18px; } .v2-sav.lg { width: 56px; height: 56px; } /* Page canvas: a warm band for summaries and insights, white below; both fill the content's padding */ .v2p { margin: calc(-1 * var(--s6)); min-height: calc(100% + 2 * var(--s6)); background: var(--solar-50); } .v2-band { background: var(--solar-500); padding: var(--s6); border-bottom: 1px solid var(--divider); } .v2-band-full { min-height: 100%; border-bottom: none; } .v2-home { background: var(--solar-500); } .v2-body { padding: var(--s6); } @media (max-width: 767px) { .v2p { margin: calc(-1 * var(--s4)); min-height: calc(100% + 2 * var(--s4)); } .v2-band, .v2-body { padding: var(--s4); } } .v2-pagetag { margin: calc(-1 * var(--s3)) 0 var(--s4); } .v2-band > .v2-pagetag:last-child { margin-bottom: 0; } /* v5.5 fixer: a band holding the tag alone (the one-card landings) */ .v2-pagetag .sample-tag { height: 22px; } .v2-card { background: var(--solar-50); border: 1px solid var(--divider); border-radius: var(--radius); padding: var(--s5); min-width: 0; } .v2-card-t { font-size: 20px; line-height: 24px; color: var(--text-base); display: inline-flex; align-items: center; gap: var(--s2); } .v2-card-th { display: flex; align-items: center; gap: var(--s3); padding-bottom: var(--s3); border-bottom: 1px solid var(--divider); } .v2-ovl { display: block; font-size: 11px; line-height: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-light); } .v2-h1 { font-family: 'RecklessNeue Regular', serif; font-size: 30px; line-height: 36px; color: var(--text-base); font-weight: normal; margin-top: var(--s2); } .v2-x, .v2-add { width: 28px; height: 28px; border: none; background: transparent; border-radius: var(--radius); display: inline-flex; align-items: center; justify-content: center; color: var(--text-base); flex-shrink: 0; padding: 0; } .v2-x:hover, .v2-add:hover { background: var(--solar-300); } .v2-x svg.ic, .v2-add svg.ic { width: 18px; height: 18px; } .v2-ulink { color: var(--text-base); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; } .v2-empty { color: var(--text-light); padding: var(--s4) 0; } /* v4.9 tenant data (spec v4.9-tenant-data.md 5.7): the requirement's evidence empty state, under the table head */ .v2-evempty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s2); padding: var(--s6) var(--s4); } .v2-evempty p { margin: 0; max-width: 520px; color: var(--text-medium); font-size: 14px; line-height: 20px; } .v2-evempty-t { font-size: 18px; line-height: 24px; color: var(--text-base); font-family: 'NeutrifPro SemiBold', sans-serif; } .v2-evempty-b { display: flex; gap: var(--s3); margin-top: var(--s3); flex-wrap: wrap; justify-content: center; } .v2-chev { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--text-base); transition: transform .15s ease; } .v2-chev svg.ic { width: 20px; height: 20px; } details[open] > summary > .v2-chev { transform: rotate(90deg); } details > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--s3); } details > summary::-webkit-details-marker { display: none; } details > summary:focus-visible { outline: 2px solid var(--earth-500); outline-offset: 2px; } /* Chips: the captured outline pills */ .v2c { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 11px; border: 1px solid var(--grey-500); color: var(--text-medium); background: var(--solar-50); font-size: 12px; line-height: 16px; white-space: nowrap; flex-shrink: 0; } .v2c.ok { border-color: var(--fn-success); color: var(--ft-success); background: var(--green-50); } .v2c.err { border-color: var(--fn-error); color: var(--ft-error); background: var(--red-50); } .v2c.part { border-color: var(--fn-info); color: var(--ft-info); background: var(--sky-50); } .v2c.review { border-color: var(--purple-400); color: var(--purple-700); background: var(--purple-50); } .v2c.na { border-color: var(--grey-500); color: var(--text-medium); background: var(--grey-100); } .v2c.grey { border-color: var(--grey-600); color: var(--text-medium); background: transparent; } .v2c.high { border-color: var(--fn-error); color: var(--ft-error); background: var(--pink-50); } .v2c.med { border-color: var(--yellow-600); color: var(--yellow-900); background: var(--yellow-50); } .v2-fpill, .v2-fchip { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 var(--s2); border-radius: 12px; background: var(--solar-600); color: var(--text-base); font-size: 12px; line-height: 16px; white-space: nowrap; cursor: pointer; } .v2-fpill svg.ic { width: 14px; height: 14px; } .v2-fchip svg.ic { width: 13px; height: 13px; } .v2-cpill { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 3px 0 var(--s2); border-radius: 11px; background: var(--solar-600); font-size: 12px; line-height: 16px; white-space: nowrap; color: var(--text-base); } .v2-cpill b { font-family: 'NeutrifPro Regular', sans-serif; font-size: 12px; background: var(--solar-50); border-radius: 8px; padding: 0 6px; line-height: 16px; } .v2-pills { display: inline-flex; gap: var(--s2); flex-shrink: 0; } .v2-pills-row { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s4); } .v2-pills-row.end { justify-content: flex-end; } .v2-tag { display: inline-flex; align-items: center; height: 22px; padding: 0 var(--s2); border-radius: 11px; border: 1px solid var(--grey-500); background: var(--grey-100); color: var(--text-medium); font-size: 12px; line-height: 16px; } .v2-own { color: var(--text-base); white-space: nowrap; } .v2-own-s { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 14px; } .v2-assign { display: inline-flex; align-items: center; height: 22px; padding: 0 var(--s2); border-radius: 11px; background: var(--solar-600); color: var(--text-base); white-space: nowrap; } .v2-assign-o { display: inline-flex; align-items: center; height: 22px; padding: 0 10px; border-radius: 11px; border: 1px solid var(--earth-500); color: var(--text-base); white-space: nowrap; } /* Sheila callouts: lilac-to-peach with a purple border (Home); peach card (Compliance); pale green (Clause) */ .v2-sbanner { display: flex; gap: var(--s4); align-items: flex-start; border: 1px solid var(--purple-400); border-radius: var(--radius); padding: var(--s4); background: linear-gradient(90deg, var(--dawn-50) 0%, var(--purple-50) 100%); margin-bottom: var(--s5); } .v2-sbanner p { flex: 1; font-size: 15px; line-height: 20px; color: var(--text-base); } .v2-sbanner.sm { margin: var(--s3) 0 var(--s2); padding: var(--s3) var(--s4); } .v2-peach { position: relative; background: var(--dawn-50); border: 1px solid var(--dawn-100); border-radius: var(--radius); padding: var(--s5); margin-bottom: var(--s6); } .v2-peach .v2-x { position: absolute; right: var(--s4); top: var(--s4); } .v2-peach-t { font-size: 20px; line-height: 24px; margin-top: var(--s4); } .v2-peach p { font-size: 15px; line-height: 20px; color: var(--text-base); margin-top: var(--s3); max-width: 820px; } .v2-navy { margin-top: var(--s4); height: 34px; padding: 0 var(--s4); border-radius: 17px; border: none; background: var(--earth-500); color: var(--solar-50); font-size: 15px; } .v2-gbanner { display: flex; gap: var(--s4); align-items: flex-start; background: var(--green-50); border: 1px solid var(--green-100); border-radius: var(--radius); padding: var(--s5); margin-bottom: var(--s4); } .v2-gbanner-t { font-size: 18px; line-height: 24px; color: var(--text-base); } .v2-gbanner p { font-size: 15px; line-height: 20px; color: var(--text-base); margin-top: var(--s2); } /* Folder tabs joined to their panel, the dashed info bar */ .v2-ftabs { display: flex; gap: var(--s2); position: relative; z-index: 1; } .v2-ftab { height: 44px; padding: 0 var(--s3); border: 1px solid transparent; border-bottom: none; border-radius: var(--radius) var(--radius) 0 0; background: var(--solar-500); color: var(--text-medium); font-size: 16px; min-width: 88px; text-align: left; } .v2-ftab.on, .v2-ftab.tour-lit { background: var(--solar-50); border-color: var(--divider); color: var(--text-base); margin-bottom: -1px; } .v2-fpanel { border: 1px solid var(--divider); border-radius: 0 var(--radius) var(--radius) var(--radius); background: var(--solar-50); padding: var(--s5); } .v2-info { display: flex; align-items: center; gap: var(--s3); border: 1px dashed var(--fn-info); border-radius: var(--radius); background: var(--sky-50); padding: var(--s3) var(--s4); margin-bottom: var(--s4); font-size: 12px; line-height: 16px; } .v2-info svg.ic { width: 20px; height: 20px; color: var(--ft-info); } /* Tables: uppercase 12px heads, a dark rule under the head, horizontal fade at the right edge */ .v2-tw { position: relative; overflow-x: auto; } .v2-tw { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); } .v2-table { width: 100%; border-collapse: collapse; } .v2-table th { font-size: 12px; line-height: 16px; letter-spacing: .02em; color: var(--text-medium); text-transform: uppercase; padding: var(--s4) var(--s2); border-bottom: 1px solid var(--earth-500); white-space: nowrap; text-align: left; font-family: 'NeutrifPro Regular', sans-serif; } .v2-table td { font-size: 15px; line-height: 20px; padding: var(--s3) var(--s2); border-bottom: 1px solid var(--divider); vertical-align: middle; } .v2-table tr.row:hover td, .v2-table tr.row.tour-lit td, .v2-table tr.v2-hover td { background: var(--solar-500); } .v2-no { white-space: nowrap; color: var(--text-base); font-size: 15px; } .v2-sort { width: 12px !important; height: 12px !important; color: var(--text-light); vertical-align: -1px; } .v2-meta { font-size: 11px; line-height: 15px; color: var(--text-medium); margin-top: 2px; } .v2-meta b { font-size: 11px; line-height: 15px; } .v2-namecell { min-width: 380px; } /* v4.9 review F4: in the walk the spotlit tables at stops 3 and 5 keep their cited columns (Score, Rating; Status, Result) in view beside Sheila's pane: tighter cells, no description lines, no add column, a narrower name column. */ body.walking #req-controls .v2-table th, body.walking #req-controls .v2-table td, body.walking #materiality-risks .v2-table th, body.walking #materiality-risks .v2-table td { padding-left: 4px; padding-right: 4px; } body.walking #req-controls .v2-ctrl-t .v2-t12, body.walking #materiality-risks .v2-meta { display: none; } body.walking #req-controls .v2-th-add, body.walking #req-controls tbody td:last-child { display: none; } body.walking #req-controls .v2-ctrl-t { min-width: 120px; } body.walking #materiality-risks .v2-namecell { min-width: 140px; } body.walking #materiality-risks .v2-table th, body.walking #materiality-risks .v2-table td.nowrap, body.walking #req-controls .v2-table th { white-space: normal; } .v2-reqcell { min-width: 360px; } .v2-reqcell .v2-t15 { margin-bottom: 2px; } .v2-evname { display: inline-flex; align-items: center; gap: var(--s2); } .v2-schip { display: inline-flex; align-items: center; gap: 3px; height: 18px; padding: 0 6px; border-radius: 9px; background: var(--pink-50); color: var(--pink-700); font-size: 11px; line-height: 14px; margin-top: 4px; } .v2-schip svg.ic { width: 11px; height: 11px; } .v2-ctrl-t { min-width: 280px; } /* Insight cards: donut, legend, bars */ .v2-ins-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); } .v2-ins-row.two { grid-template-columns: repeat(2, minmax(0, 1fr)); } @container (max-width: 760px) { .v2-ins-row, .v2-ins-row.two { grid-template-columns: minmax(0, 1fr); } } .v2-ins { background: var(--solar-50); border: 1px solid var(--divider); border-radius: var(--radius); padding: var(--s5); min-width: 0; display: flex; flex-direction: column; } .v2-ins-h { display: flex; align-items: center; gap: var(--s2); } .v2-ins-t { flex: 1; font-size: 16px; line-height: 20px; color: var(--text-base); } .v2-ins-sel { display: flex; justify-content: center; margin: var(--s4) 0; } .v2-donut { position: relative; width: 156px; height: 156px; margin: 0 auto; } .v2-donut svg { width: 100%; height: 100%; display: block; } .v2-donut-c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; } .v2-donut-n { font-family: 'RecklessNeue Regular', serif; font-size: 36px; line-height: 40px; color: var(--text-base); } .v2-donut-l { font-size: 12px; line-height: 16px; color: var(--text-medium); } .v2-legend { list-style: none; margin-top: var(--s4); display: flex; flex-direction: column; gap: 4px; font-size: 12px; line-height: 16px; color: var(--text-base); } .v2-legend li { display: flex; align-items: center; gap: var(--s2); } .v2-legend i { width: 10px; height: 10px; border-radius: 50%; display: block; flex-shrink: 0; } .v2-bars { height: 156px; display: flex; align-items: flex-end; justify-content: center; gap: var(--s3); } .v2-bar { width: 30px; height: 120px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; } .v2-bar i { display: block; width: 100%; min-height: 0; } .v2-bar-p { font-size: 12px; line-height: 16px; color: var(--text-base); font-family: 'NeutrifPro SemiBold', sans-serif; } /* Skeletons: [data-skel][data-loading="1"] paints a grey block; content keeps its size and ids */ [data-skel][data-loading="1"] { position: relative; } [data-skel][data-loading="1"] > * { visibility: hidden; } [data-skel][data-loading="1"]::before { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: var(--radius); background: linear-gradient(90deg, var(--solar-600) 0%, var(--solar-300) 50%, var(--solar-600) 100%); background-size: 200% 100%; animation: v2-skel 1.2s ease-in-out infinite; } details[data-skel][data-loading="1"] > summary { visibility: visible; } @keyframes v2-skel { from { background-position: 100% 0; } to { background-position: -100% 0; } } /* ================================ Home ================================ */ .v2-filterrow { display: flex; align-items: center; justify-content: space-between; margin: var(--s4) 0 var(--s5); } .v2-filters { display: flex; gap: var(--s2); } .v2-fchip { background: var(--solar-600); } /* The plan's two Sheila surfaces slide down when Sheila has built the plan (data-plan, WT.views.home.setPlan) */ .v2-plan-wrap { display: grid; grid-template-rows: 1fr; opacity: 1; transition: grid-template-rows .3s ease, opacity .3s ease, visibility 0s; } .v2-plan-in { min-height: 0; overflow: hidden; } #home-root[data-plan="pending"] .v2-plan-wrap { grid-template-rows: 0fr; opacity: 0; visibility: hidden; transition: grid-template-rows .3s ease, opacity .3s ease, visibility 0s .3s; } .v2-next { padding: var(--s4) var(--s4) var(--s2); margin-bottom: var(--s5); } .v2-ns { list-style: none; } .v2-ns-row { display: flex; align-items: flex-start; gap: var(--s3); padding: var(--s2) var(--s4); } .v2-ns-row .v2-t13 { margin-top: 2px; } .v2-ns-row .v2-t11 { margin-top: 4px; } .v2-objs { display: flex; flex-direction: column; gap: var(--s3); } .v2-obj { background: var(--solar-50); border: 1px solid var(--divider); border-radius: var(--radius); } .v2-obj > summary { padding: var(--s3) var(--s4) var(--s3) var(--s3); } .v2-obj-t { font-size: 20px; line-height: 26px; color: var(--text-base); margin-top: 2px; } .v2-obj-body { padding: 0 var(--s4) var(--s4); display: flex; flex-direction: column; gap: var(--s3); } .v2-sub { background: var(--solar-500); border: 1px solid var(--divider); border-radius: var(--radius); } .v2-sub > summary { padding: var(--s3) var(--s4) var(--s3) var(--s3); } .v2-sub-body { padding: 0 var(--s4) var(--s4) var(--s6); } .v2-goal { background: var(--solar-50); border: 1px solid var(--divider); border-radius: var(--radius); overflow: hidden; } .v2-goal > summary { padding: var(--s3) var(--s4) var(--s3) var(--s3); background: var(--solar-600); } .v2-goal-body { padding: var(--s3) var(--s4) var(--s4) var(--s7); display: flex; flex-direction: column; gap: var(--s3); } .v2-group { border: 1px solid var(--divider); border-radius: var(--radius); padding: var(--s4); background: var(--solar-50); } .v2-group-t { font-family: 'NeutrifPro SemiBold', sans-serif; font-size: 15px; line-height: 20px; color: var(--text-base); } .v2-group-steps { list-style: none; margin-top: var(--s3); display: flex; flex-direction: column; gap: var(--s3); } .v2-group-steps li { display: flex; align-items: flex-start; gap: var(--s3); padding-left: var(--s4); } .v2-group-steps .v2-t11 { margin-top: 2px; } @container (max-width: 640px) { .v2-obj > summary { flex-wrap: wrap; } .v2-pills { width: 100%; padding-left: 36px; } .v2-goal-body, .v2-sub-body { padding-left: var(--s4); } } /* ================================ Sustainability ================================ */ .v2-intro { font-size: 18px; line-height: 24px; color: var(--text-base); } .v2-intro b { font-size: 18px; line-height: 24px; } .v2-intro2 { font-size: 15px; line-height: 20px; color: var(--text-base); margin-top: var(--s1); } .v2-mx-card { max-width: 576px; margin: var(--s5) auto 0; } .v2-mx { width: 100%; height: auto; display: block; margin-top: var(--s3); } .v2-mx-grid { stroke: var(--grey-400); stroke-width: 1; stroke-dasharray: 4 4; } .v2-mx-axis { stroke: var(--text-medium); stroke-width: 1; stroke-dasharray: 3 3; } .v2-mx-arrow { fill: none; stroke: var(--text-medium); stroke-width: 1.2; } .v2-mx-lab { fill: var(--text-medium); font-size: 12px; font-family: 'NeutrifPro Regular', sans-serif; } .v2-mx-axt { fill: var(--text-base); font-size: 11px; letter-spacing: .12em; font-family: 'NeutrifPro Regular', sans-serif; } .v2-mx-dot circle { stroke: var(--solar-50); stroke-width: 2; } .v2-mx-dot.high circle { fill: var(--pink-700); } .v2-mx-dot.med circle { fill: var(--yellow-500); } .v2-mx-dot text { font-size: 10px; font-family: 'NeutrifPro SemiBold', sans-serif; } .v2-mx-dot.high text { fill: var(--solar-50); } .v2-mx-dot.med text { fill: var(--text-base); } .v2-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); margin-top: var(--s5); } @container (max-width: 700px) { .v2-two { grid-template-columns: minmax(0, 1fr); } } .v2-sumlist, .v2-tasklist { list-style: none; margin-top: var(--s4); display: flex; flex-direction: column; gap: var(--s3); } .v2-sumlist li { display: flex; align-items: center; gap: var(--s3); font-size: 15px; } /* v4.9 review F2: the product's results summary lines above the chips */ .v2-sumhead { display: flex; flex-direction: column; gap: var(--s2); margin-top: var(--s3); } .v2-sumhead > div { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; } .v2-tasklist li { display: flex; align-items: flex-start; gap: var(--s3); } .v2-tasklist .v2-t11 { margin-top: 2px; } .v2-tcard { border: 1px solid var(--divider); border-radius: var(--radius); padding: 0 var(--s4) var(--s3); margin-bottom: var(--s5); background: var(--solar-50); } .v2-tcard > summary { padding: var(--s4) 0; border-bottom: 1px solid var(--divider); } .v2-tcard-t { font-size: 20px; line-height: 24px; } .v2-tcard .v2-sav.sm { width: 20px; height: 20px; } /* ================================ Compliance ================================ */ .v2-secs { display: flex; flex-direction: column; gap: var(--s3); } .v2-sec { border: 1px solid var(--divider); border-radius: var(--radius); background: var(--solar-50); } .v2-sec > summary { padding: var(--s4); } .v2-sec-t { font-size: 20px; line-height: 24px; color: var(--text-base); } .v2-sec-body { padding: 0 var(--s4) var(--s4); display: flex; flex-direction: column; gap: var(--s3); } .v2-subhead { font-family: 'NeutrifPro SemiBold', sans-serif; font-size: 15px; line-height: 20px; color: var(--text-base); margin-top: var(--s2); } .v2-crow { display: block; border: 1px solid var(--divider); border-radius: var(--radius); padding: var(--s3) var(--s4) var(--s3) var(--s6); text-decoration: none; color: var(--text-base); background: var(--solar-50); } .v2-crow:hover, .v2-crow.tour-lit { background: var(--solar-500); } .v2-crow-h { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; } .v2-crow-code { font-family: 'NeutrifPro SemiBold', sans-serif; font-size: 15px; line-height: 20px; } .v2-crow-t { font-size: 15px; line-height: 20px; margin: var(--s1) 0 var(--s2); } /* ================================ Clause and requirement ================================ */ .v2-hcard { padding: var(--s5); margin-bottom: var(--s5); } .v2-hrow { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; padding-bottom: var(--s3); border-bottom: 1px solid var(--divider); } .v2-hcode { font-size: 22px; line-height: 28px; color: var(--text-base); } .v2-readmore { display: inline-flex; align-items: center; gap: 4px; color: var(--text-base); text-decoration: none; } .v2-readmore span { text-decoration: underline; text-underline-offset: 3px; } .v2-readmore svg.ic { width: 14px; height: 14px; } .v2-htext { font-size: 15px; line-height: 20px; color: var(--text-base); margin-top: var(--s3); } .v2-req-title { font-size: 22px; line-height: 28px; color: var(--text-base); margin-top: var(--s3); } .v2-panel-h { display: flex; align-items: flex-start; gap: var(--s3); } .v2-panel-t { flex: 1; font-size: 18px; line-height: 24px; color: var(--text-base); } .v2-panel-p { font-size: 15px; line-height: 20px; color: var(--text-base); margin: var(--s2) 0 var(--s3); max-width: 820px; } .v2-tabpanel[hidden] { display: none; } /* ================================ Reporting ================================ */ .v2-strip-t { font-size: 15px; line-height: 20px; color: var(--text-base); margin-bottom: var(--s3); } .v2-strip { display: flex; gap: var(--s5); overflow-x: auto; padding-bottom: var(--s2); } .v2-tile { flex: 0 0 176px; cursor: pointer; } .v2-tile-art { width: 176px; height: 124px; border-radius: 2px; padding: var(--s3); display: flex; align-items: flex-start; font-size: 18px; line-height: 22px; color: var(--solar-50); } .v2-tile-art span { max-width: 132px; } .v2-tile-art.tone-teal { background: var(--teal-900); } .v2-tile-art.tone-orange { background: var(--dawn-500); } .v2-tile-art.tone-dark { background: var(--earth-500); } .v2-tile-art.tone-navy { background: var(--sky-900); } .v2-tile-art.tone-grey { background: var(--grey-200); color: var(--text-base); } .v2-tile-n { font-size: 13px; line-height: 18px; color: var(--text-base); margin-top: var(--s2); } .v2-tile-k { font-size: 12px; line-height: 16px; color: var(--text-light); } .v2-docs .v2-doc-t { font-family: 'NeutrifPro SemiBold', sans-serif; font-size: 15px; min-width: 320px; } .v2-docs td { white-space: nowrap; } .v2-docs td.v2-doc-t { white-space: normal; } @media (prefers-reduced-motion: reduce) { .v2-plan-wrap, #home-root[data-plan="pending"] .v2-plan-wrap, .v2-chev { transition: none; } [data-skel][data-loading="1"]::before { animation: none; } } /* ================================ v3 slice 1: explore (spec v3/spec/v3-explore.md section 3) ================================ */ /* Controls that became buttons keep the captured look */ button.v2-fpill, button.v2-fchip, .v2-chipbtn, .v2-sglyph { border: none; font: inherit; } .v2-fpill.on, .v2-fchip.on, .v2-fpill[aria-pressed="true"], .v2-fchip[aria-pressed="true"] { background: var(--earth-500); color: var(--solar-50); } .v2-fpill-l { white-space: nowrap; } .v2-chipbtn { background: transparent; padding: 0; display: inline-flex; border-radius: 11px; } .v2-sglyph { width: 28px; height: 28px; background: transparent; padding: 0; border-radius: var(--radius); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .v2-sglyph:hover { background: var(--solar-300); } .v2-x-static { cursor: default; } .v2-x-static:hover { background: transparent; } a.v2-navy { display: inline-flex; align-items: center; text-decoration: none; } /* Filtered rows and dismissed banners leave the page (the captured rows and banners set their own display) */ [data-frow][hidden], [data-dismiss][hidden], .v2-tasklist li[hidden], .v2-empty[hidden] { display: none !important; } /* Hide insights: the insight row folds away until Show insights */ body.v2-noins .v2-ins-row { display: none; } /* Read more: the clause text unclamped, then the sample's position under it */ .v2-hcard.v2-open .v2-htext.v2-clamp2 { display: block; -webkit-line-clamp: unset; overflow: visible; } .v2-why { color: var(--text-medium); } /* Hover on everything a visitor can open in explore */ .v2-hov { border-radius: var(--radius); } body.explore .v2-hov:hover, body.explore .v2-group-steps li:hover { background: var(--solar-300); } body.explore .v2-ns-row:hover { background: var(--solar-500); } body.explore .v2-mx-dot:hover circle { stroke: var(--earth-500); } body.explore .v2-tile:hover .v2-tile-art { box-shadow: 0 0 0 2px var(--earth-500); } body.explore .v2-sec > summary:hover, body.explore .v2-obj > summary:hover, body.explore .v2-sub > summary:hover { background: var(--solar-100); } .v2-mx-dot { cursor: pointer; } .v2-mx-dot:focus-visible circle { stroke: var(--earth-500); stroke-width: 3; } /* Overdue task dates (tenant capture 07): red with a clock */ .v2-overdue { color: var(--ft-error); } .v2-overdue svg.ic { width: 14px; height: 14px; vertical-align: -2px; color: var(--ft-error); } .v2-th-add { width: 40px; text-align: right; } .v2-th-add .v2-add { margin: -6px 0; } .v2-rm { width: 40px; text-align: right; } .v2-gbanner-ask .v2-navy { margin-top: var(--s3); } /* Menus: filter values, insight pickers, the Reporting row's Actions */ .v2-menu { position: fixed; z-index: 60; min-width: 180px; max-width: 280px; background: var(--solar-50); border: 1px solid var(--divider); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0,28,39,.16); padding: var(--s1) 0; display: flex; flex-direction: column; } .v2-mh { padding: var(--s2) var(--s4) var(--s1); color: var(--text-light); text-transform: uppercase; letter-spacing: .06em; } .v2-mi { display: flex; align-items: center; gap: var(--s2); width: 100%; min-height: 36px; padding: 0 var(--s4); border: none; background: transparent; text-align: left; font-size: 14px; line-height: 20px; color: var(--text-base); text-decoration: none; cursor: pointer; } .v2-mi:hover, .v2-mi:focus-visible { background: var(--solar-300); outline: none; } .v2-mi[aria-checked="true"] { font-family: 'NeutrifPro SemiBold', sans-serif; } .v2-mi[aria-checked="true"]::after { content: ''; margin-left: auto; width: 8px; height: 8px; border-radius: 50%; background: var(--earth-500); } /* The read-only risk dialog (tenant captures 18 and 19): a light product modal over the scrim */ .v2-dlg { width: 100%; max-width: 1100px; margin: auto; background: var(--solar-50); color: var(--text-base); border-radius: var(--radius); box-shadow: 0 20px 50px rgba(0,28,39,.35); display: flex; flex-direction: column; max-height: calc(100vh - 48px); overflow: hidden; } .v2-dlg-h { display: flex; align-items: center; justify-content: space-between; padding: var(--s5) var(--s6); border-bottom: 1px solid var(--earth-500); flex-shrink: 0; } .v2-dlg-t { font-size: 24px; line-height: 28px; color: var(--text-base); } .v2-dlg-b { display: grid; grid-template-columns: minmax(0, 1fr) 380px; min-height: 0; overflow-y: auto; } .v2-dlg-main { padding: var(--s6); display: flex; flex-direction: column; gap: var(--s4); } .v2-dlg-intro { font-size: 18px; line-height: 24px; padding-bottom: var(--s5); border-bottom: 1px solid var(--divider); } .v2-dlg-intro b { font-size: 18px; line-height: 24px; } .v2-dl-l { color: var(--text-medium); font-size: 14px; line-height: 20px; margin-bottom: var(--s1); } .v2-dl-v { font-size: 15px; line-height: 20px; padding: var(--s2) var(--s3); border: 1px solid var(--divider); border-radius: var(--radius); background: var(--solar-100); } .v2-dl-st { display: flex; gap: var(--s2); flex-wrap: wrap; } .v2-dl-st .v2c.dim { opacity: .55; } .v2-dl-st .v2c.fill.part { background: var(--fn-info); color: var(--solar-50); } .v2-dl-st .v2c.fill.review { background: var(--purple-400); color: var(--solar-50); } .v2-dl-st .v2c.fill.ok { background: var(--fn-success); color: var(--text-base); } .v2-dl-st .v2c.fill.grey { background: var(--grey-600); color: var(--solar-50); } .v2-dlg-side { background: var(--solar-500); padding: var(--s6) var(--s5); } .v2-dl-sum dl { margin-top: var(--s4); } .v2-dl-sum dl > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--s3); padding: var(--s3) 0; border-top: 1px solid var(--divider); align-items: center; } .v2-dl-sum dt { color: var(--text-medium); } .v2-dl-sum dd svg.ic { width: 13px; height: 13px; vertical-align: -2px; } .v2-score { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--grey-600); font-size: 12px; } .v2-score.high { border-color: var(--fn-error); color: var(--ft-error); } .v2-score.med { border-color: var(--yellow-600); color: var(--yellow-900); } .v2-dlg-f { display: flex; align-items: center; gap: var(--s3); padding: var(--s4) var(--s6); border-top: 1px solid var(--earth-500); flex-shrink: 0; } .v2-btn-o, .v2-btn-n { height: 38px; padding: 0 var(--s5); border-radius: 19px; font-size: 16px; } .v2-btn-o { border: 1px solid var(--earth-500); background: var(--solar-50); color: var(--text-base); } .v2-btn-o:hover { background: var(--solar-300); } .v2-btn-n { border: 1px solid var(--earth-500); background: var(--earth-500); color: var(--solar-50); } @media (max-width: 900px) { .v2-dlg-b { grid-template-columns: minmax(0, 1fr); } .v2-dlg-main, .v2-dlg-side { padding: var(--s4); } .v2-dlg-h, .v2-dlg-f { padding: var(--s4); } } /* ============ Rail balloon (v4.1, spec v4/spec/v4.1-rail-balloons.md section 1) ============ One element, #rail-tip, appended to #shell by views-v2.js (not inside nav.side, which clips and scrolls). views-v2.js sets left and top (beside the rail, centred on the hovered row, clamped inside the viewport) and --tip-caret (the row's centre measured from the balloon's top, which the caret follows). The guide dialog's dark card. z-index 55: above the rail and the content, below the row menus (60), the explore notice (77), the modal and the tour layer (70); the balloon also waits while a notice is open (tipBlocked in views-v2.js), so it never stacks under one. */ .rail-tip { position: fixed; z-index: 55; width: 272px; max-width: calc(100vw - 24px); box-sizing: border-box; padding: 12px 14px; background: var(--earth-500); color: var(--solar-500); border-radius: 8px; box-shadow: 0 12px 32px rgba(0,28,39,.35); pointer-events: none; text-align: left; } .rail-tip[hidden] { display: none; } .rail-tip::before { content: ''; position: absolute; left: -4px; top: calc(var(--tip-caret, 20px) - 4px); width: 8px; height: 8px; background: var(--earth-500); transform: rotate(45deg); border-radius: 1px; } .rail-tip-eyebrow { font-family: 'NeutrifPro Regular', sans-serif; font-size: 11px; line-height: 14px; color: var(--earth-100); } .rail-tip-title { margin-top: 2px; font-family: 'NeutrifPro SemiBold', sans-serif; font-size: 14px; line-height: 18px; color: var(--solar-500); } .rail-tip-body { margin-top: 6px; font-family: 'NeutrifPro Regular', sans-serif; font-size: 13px; line-height: 18px; color: var(--solar-500); } /* ---------- v5.0 (spec v4/spec/v5.0-four-stops.md sections 4.4 and 7.3): the stops' states and the in-content overlays ---------- An overlay (div.wt-ovl[data-ovl]) is drawn inside #content: absolute, its top following #content's scroll (views-v2.js sets top and height), so the spotlight, the tour card and Esc keep working and app.js's dispatcher sees its controls. The page behind it does not scroll while one is open. */ #content.content { position: relative; } #content:has(> .wt-ovl) { overflow: hidden; } /* a repaint of #content drops the overlay, and with it this rule */ .wt-ovl { position: absolute; left: 0; right: 0; top: 0; height: 100%; z-index: 40; display: flex; align-items: center; justify-content: center; padding: var(--s5); box-sizing: border-box; text-align: left; } .wt-ovl-scrim { position: absolute; inset: 0; background: rgba(0,28,39,.45); } .wt-ovl-box { position: relative; width: 100%; max-height: 100%; display: flex; justify-content: center; } .wt-ovl .v2-dlg { max-height: 100%; } .wt-ovl-drawer { justify-content: flex-end; align-items: stretch; padding: 0; } .wt-ovl-drawer .wt-ovl-scrim { background: rgba(0,28,39,.25); } @keyframes wt-ovl-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @keyframes wt-drawer-in { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } } .wt-ovl-dialog .wt-ovl-box { animation: wt-ovl-in .2s ease both; } .wt-ovl-drawer .sg-panel { animation: wt-drawer-in .22s ease both; } /* Stop 2: the Edit Risk dialog (the product's, recording of 2 Nov 2026) */ .rv-dlg .v2-dlg-main { gap: var(--s4); } .rv-f { display: flex; flex-direction: column; gap: var(--s1); } .rv-l { color: var(--text-medium); } .rv-dd { position: relative; } .rv-sel { width: 100%; height: 40px; display: flex; align-items: center; justify-content: space-between; gap: var(--s2); padding: 0 var(--s3); border: 1px solid var(--grey-500); border-radius: var(--radius); background: var(--solar-50); color: var(--text-base); font: inherit; font-size: 15px; line-height: 20px; text-align: left; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease; } .rv-sel .ic { width: 20px; height: 20px; } .rv-sel-v.light { color: var(--text-light); } .rv-active .rv-sel { border-color: var(--earth-500); box-shadow: 0 0 0 3px var(--purple-50); } .rv-set .rv-sel { border-color: var(--earth-500); } .rv-list { position: absolute; z-index: 3; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: var(--s1) 0; list-style: none; background: var(--solar-50); border: 1px solid var(--divider); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0,28,39,.16); } .rv-list[hidden] { display: none; } .rv-opt { padding: var(--s2) var(--s3); font-size: 14px; line-height: 20px; color: var(--text-base); } .rv-opt[aria-selected="true"] { background: var(--purple-50); } .rv-desc { color: var(--text-medium); } .rv-desc[hidden] { display: none; } .rv-ta { min-height: 72px; padding: var(--s2) var(--s3); border: 1px solid var(--grey-500); border-radius: var(--radius); font-size: 14px; line-height: 20px; } .rv-files { align-self: flex-start; display: inline-flex; align-items: center; gap: var(--s1); margin-top: var(--s2); height: 34px; font-size: 14px; } .rv-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s4); } .rv-in { height: 40px; display: flex; align-items: center; padding: 0 var(--s3); border: 1px solid var(--grey-500); border-radius: var(--radius); font-size: 14px; } /* v5.1 (spec v5.1-refinements.md section 6.1): the dialog fits the overlay at any viewport height from 720 px up. The box is a column that the overlay's height caps, the dialog shrinks inside it, and only the body (.v2-dlg-b) scrolls, so the header and the footer (Cancel, Save and Close) stay in view. The rail's contents stick to the top of the body while it scrolls, so the Results summary stays beside the fields. The dialog's own width (the content column, beside Sheila's pane) sets the layout. */ .wt-ovl .rv-box { flex-direction: column; align-items: center; min-height: 0; container-type: inline-size; } .wt-ovl .rv-box > .rv-dlg { flex: 0 1 auto; min-height: 0; max-height: 100%; margin: 0 auto; } .rv-dlg .v2-dlg-b { overscroll-behavior: contain; } .rv-rail { display: flex; flex-direction: column; gap: var(--s5); } .rv-rail-in { position: sticky; top: 0; display: flex; flex-direction: column; gap: var(--s5); max-height: var(--rv-rail-h, none); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; } .rv-rail-in > * { flex-shrink: 0; } /* v5.1 fix: the rail is never taller than the body's view (--rv-rail-h from views-v2.js); it scrolls inside */ @container (max-width: 860px) { .rv-dlg .v2-dlg-b { grid-template-columns: minmax(0, 1fr) 240px; } .rv-dlg .v2-dlg-main { padding: var(--s5); } .rv-dlg .v2-dlg-side { padding: var(--s5) var(--s4); } .rv-dlg .v2-dlg-main > .rv-two { grid-template-columns: minmax(0, 1fr); gap: var(--s4); } .rv-dlg .rv-ask { height: auto; min-height: 36px; padding: var(--s1) var(--s4); text-align: left; } .rv-dlg .v2-dlg-h, .rv-dlg .v2-dlg-f { padding: var(--s4) var(--s5); } .rv-dlg .rv-res-dl { flex-direction: column; gap: 0; } .rv-dlg .v2-dl-sum dl > div { grid-template-columns: 84px minmax(0, 1fr); } } @container (max-width: 520px) { .rv-dlg .v2-dlg-b { grid-template-columns: minmax(0, 1fr); } .rv-rail-in { position: static; max-height: none; overflow: visible; } } .rv-sheila { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3); } .rv-ask { display: inline-flex; align-items: center; gap: var(--s2); height: 36px; padding: 0 var(--s4); border: 1px solid var(--purple-400); border-radius: 18px; background: var(--bg-sheila-tint-50); color: var(--text-base); font: inherit; font-size: 14px; } .rv-ask .ic { fill: var(--purple-700); } .rv-greet { color: var(--text-medium); } .rv-empty { color: var(--text-medium); font-size: 14px; line-height: 20px; } .rv-res-dl { display: flex; gap: var(--s5); } .rv-res-dl dt { color: var(--text-medium); } .rv-res-dl dd { margin: var(--s1) 0 0; } .rv-res-p { margin-top: var(--s3); color: var(--text-medium); } @keyframes rv-flip { from { box-shadow: 0 0 0 3px var(--dawn-500); } to { box-shadow: 0 0 0 0 rgba(255,79,1,0); } } .rv-flip { animation: rv-flip .8s ease; } /* Stop 3: REQ224's Controls tab before the suggestions are added (the product's empty block) */ .v5-noctl { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s2); padding: var(--s7) var(--s4); border: 1px dashed var(--grey-400); border-radius: var(--radius); background: var(--solar-50); } .v5-noctl-i .ic { width: 40px; height: 40px; fill: var(--grey-600); } .v5-noctl-t { font-family: 'NeutrifPro SemiBold', sans-serif; font-size: 18px; line-height: 24px; color: var(--text-base); } .v5-noctl-p { color: var(--text-medium); font-size: 14px; line-height: 20px; } .v5-noctl-b { margin-top: var(--s3); } /* Stop 1: the plan's goal is in the markup from the start and shows once the plan is built (data-plan on #home-root) */ #home-root[data-plan="pending"] .v5-plan-only { display: none !important; } #home-root:not([data-plan="pending"]) .v5-pending-only { display: none !important; } .v5-ms-d { margin: calc(-1 * var(--s1)) 0 var(--s2); } /* The product's green Success toast (stop 3, Add all) */ .wt-success { position: fixed; top: var(--s5); right: var(--s5); z-index: 80; display: inline-flex; align-items: center; gap: var(--s2); padding: var(--s3) var(--s4); border-radius: var(--radius); background: var(--fn-success); color: #fff; font-size: 15px; line-height: 20px; box-shadow: 0 12px 32px rgba(0,28,39,.3); opacity: 0; transform: translateY(-8px); transition: opacity .2s ease, transform .2s ease; pointer-events: none; } .wt-success.on { opacity: 1; transform: none; } .wt-success[hidden] { display: none; } .wt-success .ic { width: 20px; height: 20px; } @media (max-width: 767px) { .wt-ovl { padding: var(--s3); } /* v5.1 fix (refuter, phones): while a screen plays the Edit Risk dialog (the pane band steps aside then: walk.css, wt-pane-off), the dialog ends above the callout sheet (--wt-sheet-h, set by app.js), so its header, the fields the callout names and Save and Close are in view. */ body.walking #content > .wt-ovl[data-ovl="risk-edit"] { padding-bottom: calc(var(--wt-sheet-h, 0px) + var(--s3)); } .rv-two { grid-template-columns: minmax(0, 1fr); } .wt-success { left: var(--s4); right: var(--s4); top: var(--s4); } } /* v5.13 fix (refuter, a phone held landscape, under 768 px wide and 450 px tall: 667 x 375, 740 x 360, 720 x 400): on screens 6 and 7 the callout sheet took most of the height, so the Edit Risk dialog had no room above it and Save and Close, screen 7's subject, was drawn under the sheet. While the dialog is open there the sheet is drawn compact (the callout line and its buttons; no crumb, dots or next line, as the dialog's title says where the visitor is), 8 px off the foot, and the overlay starts 4 px under #content's top, so the tight dialog's header, the top of its body and its footer end above the sheet. app.js measures the sheet each time it places the spotlight (--wt-sheet-h), so the overlay follows. v5.13 phone leftovers: short phones held portrait had the same fault (375 x 553, an iPhone SE in Safari with its bars; 375 x 548, 360 x 584, 360 x 560, 320 x 568, 360 x 520, 320 x 460: a dialog body of 0 to 9 px on screen 6 and 0 to 33 px on screen 7; Save and Close under the sheet at 320 x 460 and 360 x 520, and on screen 6 at 375 x 548 and 320 x 568), so the block reaches up to 640 px tall (360 x 640 went from a 65/89 px body to 132/156). Taller phones (390 x 664 and up), and every other screen, keep the sheet as it was. */ @media (max-width: 767px) and (max-height: 640px) { body.walking:has(#content > .wt-ovl[data-ovl="risk-edit"]) .tour-card[data-side="sheet"] { bottom: var(--s2); padding: var(--s3) var(--s5); } body.walking:has(#content > .wt-ovl[data-ovl="risk-edit"]) .tour-card[data-side="sheet"] :is(.tc-crumb, .prog, .tc-title, .tc-upnext) { display: none; } body.walking:has(#content > .wt-ovl[data-ovl="risk-edit"]) .tour-card[data-side="sheet"] .tc-text { margin-top: 0; padding-right: 40px; } /* v5.54: the eyebrow is hidden here, so the first line keeps clear of the Skip X */ body.walking:has(#content > .wt-ovl[data-ovl="risk-edit"]) .tour-card[data-side="sheet"] .act { margin-top: var(--s3); } body.walking #content > .wt-ovl[data-ovl="risk-edit"] { padding-top: var(--s1); padding-bottom: calc(var(--wt-sheet-h, 0px) + var(--s2)); } } /* v5.13 phone leftovers (a phone held landscape, 768 to 1099 px wide and at most 360 px tall: 780 x 330, 800 x 300, 812 x 340, 844 x 360, 896 x 360): the pane is still a band above the product there, so on screens 6 and 7 the Edit Risk dialog had no body and Save and Close ended below the viewport, or both were in view with only a few pixels of body. app.js (paneRoom) sets body.wt-pane-off on the same screens as on phones (Home's tree and the Edit Risk dialog), and the band steps aside; it comes back on every other screen. Taller, the band stays: it leaves screen 7's callout room above the dialog (844 x 390). */ @media (min-width: 768px) and (max-width: 1099px) and (max-height: 360px) { body.walking.wt-pane-off .sheila-panel { display: none !important; } } @media (prefers-reduced-motion: reduce) { .wt-ovl-dialog .wt-ovl-box, .wt-ovl-drawer .sg-panel, .rv-flip { animation: none; } .rv-sel, .wt-success { transition: none; } } @media print { .wt-ovl, .wt-success { display: none !important; } #content:has(> .wt-ovl) { overflow: visible; } } /* ==== v5.6: the Financial Materiality page (#/sustainability) ported from the product's source (BEGIN) ==== Spec v5.6-runsustainably-fidelity.md section 4. The values are the styled() and sx values of the canonical UI repo: apps/dma/src/@modules/materiality-financial/components (the page, the insights, the matrix, the results summary, the tasks card, the risks and opportunities), the task MFE's TaskTopCard, and libs/nds (BaseMatrix, RiskSpot, BaseSpot, BaseLozenge, SimpleLozenge, InformationLozenge, InputLozenge, InteractiveLozenge, Tabs, DetailAccordion, Table, TableCell, Button, IconButton, EmptyState). Colours are the palette tokens (walk.css), type the .t-* variants. The page's region is #content (a container): the product's page breakpoints (md 768, lg 1280, xl 1536, measured on the page) less its 64 px gutter. */ .fm-page, .fm-page *, .fm-page *::before, .fm-page *::after { box-sizing: border-box; } .fm-page { --fm-gut: 32px; background: var(--white); color: var(--text-base); } @container (max-width: 703.95px) { .fm-page { --fm-gut: 24px; } } @container (max-width: 366.95px) { .fm-page { --fm-gut: 12px; } } /* Palette families: a lozenge, a spot or an add button takes the steps of its colour. */ .fm-c-green { --fc-50: var(--green-50); --fc-100: var(--green-100); --fc-200: var(--green-200); --fc-400: var(--green-400); --fc-700: var(--green-700); } .fm-c-teal { --fc-50: var(--teal-50); --fc-100: var(--teal-100); --fc-200: var(--teal-200); --fc-400: var(--teal-400); --fc-700: var(--teal-700); } .fm-c-yellow { --fc-50: var(--yellow-50); --fc-100: var(--yellow-100); --fc-200: var(--yellow-200); --fc-400: var(--yellow-400); --fc-700: var(--yellow-700); } .fm-c-orange { --fc-50: var(--orange-50); --fc-100: var(--orange-100); --fc-200: var(--orange-200); --fc-400: var(--orange-400); --fc-700: var(--orange-700); } .fm-c-red { --fc-50: var(--red-50); --fc-100: var(--red-100); --fc-200: var(--red-200); --fc-400: var(--red-400); --fc-700: var(--red-700); } .fm-c-pink { --fc-50: var(--pink-50); --fc-100: var(--pink-100); --fc-200: var(--pink-200); --fc-400: var(--pink-400); --fc-700: var(--pink-700); } .fm-c-purple { --fc-50: var(--purple-50); --fc-100: var(--purple-100); --fc-200: var(--purple-200); --fc-400: var(--purple-400); --fc-700: var(--purple-700); } .fm-c-sky { --fc-50: var(--sky-50); --fc-100: var(--sky-100); --fc-200: var(--sky-200); --fc-400: var(--sky-400); --fc-700: var(--sky-700); } .fm-c-grey { --fc-50: var(--grey-100); --fc-100: var(--grey-100); --fc-200: var(--grey-200); --fc-400: var(--grey-400); --fc-700: var(--grey-600); } .fm-c-earth { --fc-50: var(--earth-50); --fc-100: var(--earth-100); --fc-200: var(--earth-200); --fc-400: var(--earth-400); --fc-700: var(--earth-300); } .fm-ic { width: 1em; height: 1em; fill: currentColor; flex-shrink: 0; display: inline-block; } .fm-ic20 { width: 20px; height: 20px; } .fm-center { text-align: center; } /* materiality-financial-insights.tsx: the drova-page-layout band ($solar 500, the page gutter, the divider under it). */ .fm-ins { background: var(--solar-500); padding: var(--fm-gut); border-bottom: 1px solid var(--divider); } .fm-intro { margin-bottom: 8px; } .fm-insrow { margin-top: 24px; display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 24px; } .fm-cell-mx { flex: 0 0 auto; max-width: 100%; overflow-x: auto; } .fm-cell-mx > * { height: 100%; } .fm-cell-400 { flex: 0 0 400px; min-width: 400px; max-width: 400px; } .fm-cell-400 > * { height: 100%; } .fm-cell-tk { min-height: 320px; display: flex; flex-direction: column; } .fm-cell-tk > * { flex-grow: 1; height: auto; } /* Phones (not in the source, whose 400 px cells overflow there): the two cards take the column. */ @container (max-width: 431px) { .fm-cell-400 { flex-basis: 100%; min-width: 0; max-width: 100%; } } /* The Risk Matrix: BaseMatrix (Paper, $solar 700 border, min-content, 24 below) with RiskMatrix's spots. The cell steps by the page's breakpoint (useResponsiveMatrixCellSize: 50, md 70, lg 80, xl 100). */ .fm-mx { --fm-cell: 50px; background: var(--white); border: 1px solid var(--solar-700); border-radius: 4px; width: min-content; padding-bottom: 24px; } @container (min-width: 704px) { .fm-mx { --fm-cell: 70px; } } @container (min-width: 1216px) { .fm-mx { --fm-cell: 80px; } } @container (min-width: 1472px) { .fm-mx { --fm-cell: 100px; } } .fm-mx-head { padding: 16px 24px 0; display: grid; grid-template-columns: auto max-content; } .fm-mx-hst { display: flex; flex-direction: column; min-width: 0; } .fm-mx-hact { display: flex; flex-direction: row; gap: 18px; align-items: center; } .fm-mx-grid { padding-top: 32px; padding-inline: 64px; display: grid; width: min-content; grid-template-columns: 16px 98px 1fr; grid-template-rows: 1fr max-content 24px; } .fm-mx-area { z-index: 1; position: relative; display: grid; width: max-content; height: max-content; grid-template-columns: 1fr calc(var(--fm-cell) / 2); grid-template-rows: calc(var(--fm-cell) / 2) 1fr; } .fm-mx-main { display: grid; gap: 1px; transform: translate(-2px, 1px); z-index: 1; position: relative; grid-template-columns: calc(var(--fm-cell) / 2) repeat(4, var(--fm-cell)); grid-template-rows: repeat(4, var(--fm-cell)) calc(var(--fm-cell) / 2); } .fm-mx-main > div { border-left: 1px dashed var(--solar-700); border-bottom: 1px dashed var(--solar-700); } .fm-mx-main > div:nth-of-type(5n + 1) { border-left: unset; } .fm-mx-main > div:nth-of-type(n + 21) { border-bottom: unset; } .fm-mx-d1, .fm-mx-d4 { display: grid; gap: 1px; } .fm-mx-d1 { grid-template-columns: calc(var(--fm-cell) / 2) repeat(4, var(--fm-cell)); } .fm-mx-d1 > div { border-bottom: 1px dashed var(--solar-700); border-right: 1px dashed var(--solar-700); } .fm-mx-d4 { transform: translate(-1px, -1px); grid-template-rows: repeat(4, var(--fm-cell)) calc(var(--fm-cell) / 2); } .fm-mx-d4 > div { border-top: 1px dashed var(--solar-700); border-left: 1px dashed var(--solar-700); } .fm-mx-yl { margin-right: 8px; display: grid; height: max-content; gap: 1px; transform: translate(-1px); padding-top: calc(var(--fm-cell) / 2); grid-template-rows: repeat(4, var(--fm-cell)) calc(var(--fm-cell) / 2); } .fm-mx-yl .t-caption { transform: translateY(-8px); text-align: right; color: var(--text-light); } .fm-mx-xl { margin-top: 8px; margin-bottom: 24px; display: grid; gap: 1px; transform: translateX(-2px); padding-right: calc(var(--fm-cell) / 2); grid-template-columns: calc(var(--fm-cell) / 2) repeat(4, var(--fm-cell)); } .fm-mx-xl > div { display: flex; justify-content: end; } .fm-mx-xt { display: inline-block; text-align: right; transform: translateX(50%); white-space: nowrap; max-width: var(--fm-cell); overflow: hidden; text-overflow: ellipsis; color: var(--text-light); } .fm-mx-axis { color: var(--text-base); position: relative; display: grid; gap: 4px; align-items: center; justify-content: center; grid-template-columns: 1fr max-content 1fr; grid-template-rows: 1fr max-content 1fr; } .fm-mx-axis::before, .fm-mx-axis::after { content: ''; } .fm-mx-arrow { position: absolute; width: 16px; height: 16px; fill: var(--earth-300); } .fm-mx-axx { width: calc(var(--fm-cell) * 5); } .fm-mx-axx::before, .fm-mx-axx::after { height: 1px; border-top: 1px dashed var(--earth-300); } .fm-mx-axx .fm-mx-arrow { bottom: 8px; right: -12px; } .fm-mx-axy { writing-mode: vertical-lr; rotate: 180deg; height: calc(var(--fm-cell) * 5); } .fm-mx-axy::before, .fm-mx-axy::after { width: 1px; border-left: 1px dashed var(--earth-300); } .fm-mx-axy .fm-mx-arrow { bottom: -12px; right: 0; rotate: 90deg; } @container (max-width: 703.95px) { .fm-mx-grid { padding-top: 24px; padding-inline: 24px; } .fm-mx-xl { margin-bottom: 16px; } } @container (max-width: 366.95px) { .fm-mx-grid { padding-inline: 12px; } } /* BaseSpot and RiskSpot: on the grid's crossings, 16 px for one risk, the tally on the matrix's hover, an add button per cell. */ .fm-spot { position: absolute; border-radius: 50%; transform: translate(-50%, 50%); display: grid; place-content: center; } .fm-spot:not(.fm-spot-empty) { cursor: pointer; } .fm-spot-empty { background: transparent; width: 32px; height: 32px; } .fm-dot-green { background: var(--green-400); } .fm-dot-teal { background: var(--teal-400); } .fm-dot-yellow { background: var(--yellow-400); } .fm-dot-orange { background: var(--orange-400); } .fm-dot-red { background: var(--red-400); } .fm-dot-earth { background: var(--grey-500); } .fm-spot-n { display: none; color: var(--text-base); } .fm-mx:hover .fm-spot:not(.fm-spot-empty) .fm-spot-n { display: inline; } .fm-spot:focus-visible { outline: 2px solid var(--earth-500); outline-offset: 2px; } .fm-spot-add { appearance: none; border: none; padding: 0; display: none; position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; border-radius: 50%; place-content: center; background: var(--white); cursor: pointer; transform: translate(calc(-50% - 10.7px), calc(-50% + 10.7px)); } .fm-spot-empty .fm-spot-add { width: 32px; height: 32px; transform: translate(-50%, -50%); } .fm-spot:hover .fm-spot-add { display: grid; } .fm-spot-add:hover, .fm-spot-add:focus-visible { background: var(--grey-100); } .fm-spot-add .fm-ic { width: 16px; height: 16px; fill: var(--fc-400); } /* overview-risk-matrix-empty-state.tsx with the default EmptyState (gap 24, the 200 px image). */ .fm-mx-empty { border-radius: 4px; border: 1px solid var(--solar-700); background: var(--white); width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px; } @container (min-width: 704px) { .fm-mx-empty { max-width: 800px; height: 650px; padding: 64px; } } .fm-es { display: flex; flex-direction: column; align-items: center; gap: 24px; width: max-content; max-width: 420px; } .fm-es-img { width: 200px; height: 200px; display: block; } .fm-es-bg { fill: var(--white); } .fm-es-grid path { fill: none; stroke: var(--solar-700); stroke-dasharray: 2 2; } .fm-es-teal { fill: var(--teal-600); } .fm-es-yellow { fill: var(--yellow-600); } .fm-es-green { fill: var(--green-600); } .fm-es-orange { fill: var(--orange-600); } .fm-es-pink { fill: var(--pink-600); } .fm-es-t, .fm-es-m { max-width: 460px; text-align: center; } .fm-es-cta { display: flex; flex-direction: row; gap: 8px; align-items: center; justify-content: center; } /* Buttons (libs/nds Button with the theme's MuiButton variants): 36 px pills; compact 20 px. */ .fm-btn { appearance: none; border: none; display: inline-flex; align-items: center; justify-content: center; height: 36px; min-width: 100px; padding: 6px 16px; border-radius: 100px; font-family: var(--ff-product-regular); font-size: 16px; line-height: 20px; font-weight: 500; letter-spacing: 0.457px; cursor: pointer; white-space: nowrap; } .fm-btn-p { background: var(--earth-500); color: var(--white); } .fm-btn-p:hover, .fm-btn-p:focus-visible { background: var(--earth-400); } .fm-btn-g { background: var(--white); color: var(--earth-500); text-decoration: underline; } .fm-btn-g:hover, .fm-btn-g:focus-visible { background: var(--solar-600); } .fm-btn-c { width: max-content; min-width: unset; height: 20px; padding: 0 12px; border-radius: 10px; font-size: 12px; line-height: 16px; } .fm-btn .fm-di { width: 20px; height: 20px; margin: 0 8px 0 -4px; } /* DrovaIcon (v2): the ring's upper half in earth 500 (white on a dark ground), the stars in the dawn to purple gradient. */ .fm-di-up { fill: var(--earth-500); } .fm-di-dark .fm-di-up { fill: var(--white); } .fm-di-s0 { stop-color: var(--dawn-500); } .fm-di-s1 { stop-color: var(--purple-400); } /* Lozenges (BaseLozenge: 20 px, radius 10, 4 10 padding, 12 on 12 with the caption label on a 16 line). */ .fm-lz { height: 20px; width: max-content; min-width: 32px; max-width: 100%; display: inline-flex; align-items: center; vertical-align: middle; color: var(--text-medium); background: transparent; border-radius: 10px; border: 1px solid var(--fc-700); padding: 4px 10px; font-family: var(--ff-product-regular); font-size: 12px; line-height: 12px; overflow: hidden; white-space: nowrap; margin: 0; } /* the weight inherits, as BaseLozenge's does (350 in a table cell) */ .fm-lz-t { display: inline-block; line-height: 16px; letter-spacing: 0.4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } .fm-sl { background: var(--fc-50); border-color: var(--fc-700); color: var(--text-base); } .fm-sl[role="button"] { cursor: pointer; } .fm-sl[role="button"]:hover { background: var(--fc-100); } .fm-tally { display: flex; justify-content: center; min-width: 20px; padding: 0; border: none; background: transparent; } .fm-tally .fm-lz-end { min-width: 20px; height: 20px; border-radius: 10px; display: grid; place-content: center; padding: 3px 4px; color: var(--text-medium); border: 1px solid var(--fc-700); } .fm-tally.fm-c-earth .fm-lz-end { border-color: var(--earth-100); } button.fm-lz { appearance: none; cursor: pointer; outline: none; } .fm-ilz { background: var(--earth-50); border: none; color: var(--earth-500); padding: 4px 2px 4px 10px; } .fm-ilz .fm-lz-end { border-radius: 10px; height: 16px; display: grid; place-content: center; color: var(--earth-400); margin-left: 10px; padding: 3px 2px; } .fm-ilz .fm-lz-end .fm-ic { width: 12px; height: 12px; } .fm-ilz:hover, .fm-ilz:focus-visible, .fm-ilz[aria-expanded="true"] { background: var(--earth-100); } .fm-ilz:hover .fm-lz-end, .fm-ilz:focus-visible .fm-lz-end, .fm-ilz[aria-expanded="true"] .fm-lz-end { background: var(--solar-50); } .fm-il { background: var(--fc-100); border: none; color: var(--text-base); padding-left: 6px; } .fm-il .fm-lz-start { width: 12px; height: 12px; margin-right: 4px; color: var(--text-base); } .fm-il:hover { background: var(--fc-200); } .fm-il:focus-visible, .fm-il[aria-expanded="true"] { background: var(--grey-300); } .fm-link { color: var(--text-base); text-decoration: underline; cursor: pointer; } /* Results summary (overview-results-summary.tsx): p 24, the conclusion on $solar 500, the 3fr 7fr rows between dividers. */ .fm-rs { display: flex; flex-direction: column; flex-shrink: 0; padding: 24px; border: 1px solid var(--solar-700); border-radius: 4px; background: var(--white); width: 100%; max-width: 400px; } .fm-rs-t { margin-bottom: 16px; } .fm-rs-conc { display: flex; flex-direction: row; align-items: center; justify-content: center; width: 100%; background: var(--solar-500); padding: 24px; margin-bottom: 12px; } .fm-rs-cin { display: flex; flex-direction: column; align-items: center; gap: 12px; } .fm-rs-cempty { display: flex; flex-direction: column; gap: 16px; } .fm-rs-rows { display: flex; flex-direction: column; border-top: 1px solid var(--divider); border-bottom: 1px solid var(--divider); } .fm-rs-rows > * + * { border-top: 1px solid var(--divider); } .fm-rs-row { display: grid; grid-template-columns: 3fr 7fr; padding: 12px 0; } .fm-rs-v { display: flex; flex-direction: row; gap: 8px; align-items: center; } .fm-rs-act { display: flex; flex-direction: row; gap: 4px; } .fm-who { display: inline-block; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; } .fm-rs-foot { margin-top: 12px; display: inline-block; color: var(--text-light); } /* The Tasks card (TaskTopCard in a StaticCard: p 24, white, divider border). */ .fm-tk { padding: 24px; background: var(--solar-50); border: 1px solid var(--divider); border-radius: 4px; display: flex; flex-direction: column; } .fm-tk-head { display: flex; flex-direction: row; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--divider); margin-bottom: 12px; padding-bottom: 12px; } .fm-tk-hl { display: flex; flex-direction: row; align-items: center; gap: 4px; min-width: 0; flex: 1; } .fm-tk-hr { display: flex; flex-direction: row; align-items: center; gap: 8px; } .fm-tk-empty { width: 100%; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 12px; } .fm-tk-empty p { max-width: 330px; } .fm-tk-sub { margin-bottom: 8px; } .fm-tk-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--divider); padding: 12px 0; } .fm-tk-row:last-of-type { border-bottom: none; } .fm-tk-t { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fm-tk-list[hidden] { display: none; } /* The Assessment | Tasks tabs (Tabs, size Large): 24 above, 32 below, the page gutter at the sides; MUI Tab 40 px, 90 wide at least. */ .fm-tabs { padding-inline: var(--fm-gut); margin-top: 24px; margin-bottom: 32px; } .fm-tabbar { display: flex; gap: 8px; margin-bottom: -1px; position: relative; z-index: 1; } .fm-tab { appearance: none; border: none; position: relative; display: inline-flex; flex-direction: row; justify-content: space-between; align-items: center; min-width: 90px; min-height: 40px; padding: 8px 12px; border-radius: 4px 4px 0 0; background: var(--solar-500); color: var(--text-medium); text-align: left; cursor: pointer; font-family: var(--ff-product-regular); font-size: 16px; line-height: 20px; font-weight: 500; letter-spacing: 0.457px; } /* MuiTab's root takes typography.button; its label is body2 */ .fm-tab::after { content: ''; position: absolute; width: 100%; height: 0.5px; bottom: 0.5px; left: 0; background: var(--solar-700); } .fm-tab:hover { color: var(--text-base); } .fm-tab.on, .fm-tab.tour-lit { background: var(--white); color: var(--text-base); border: 1px solid var(--solar-700); border-bottom: 1px solid var(--white); } .fm-tab.on::after, .fm-tab.tour-lit::after { bottom: -2px; background: var(--white); } .fm-tabpanel { min-width: 100%; background: var(--white); padding: 24px; border: 1px solid var(--solar-700); border-radius: 4px; border-top-left-radius: 0; } .fm-filters { display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; } .fm-accs { display: flex; flex-direction: column; gap: 24px; margin-top: 12px; } /* DetailAccordion, level 1 with toolbar actions: the 24 px thumb, the subtitle2 title, the Sheila and add icon buttons. */ .fm-acc { background: var(--white); border: 1px solid var(--divider); border-radius: 4px; min-width: 0; } details > summary.fm-acc-sum { display: grid; grid-template-columns: 24px minmax(0, 1fr); grid-template-rows: auto; align-items: center; column-gap: 24px; row-gap: 4px; padding: 16px; min-height: 56px; } .fm-acc-thumb { width: 24px; height: 24px; display: grid; place-content: center; border-radius: 50%; color: var(--text-base); rotate: -90deg; transition: rotate .2s ease-in-out; } details[open] > summary > .fm-acc-thumb { rotate: 0deg; } .fm-acc-thumb .fm-ic { width: 20px; height: 20px; } .fm-acc-sum:hover .fm-acc-thumb { background: var(--solar-600); } .fm-acc-main { display: grid; grid-template-columns: minmax(0, 1fr) max-content; gap: 0 24px; align-items: center; min-width: 0; } .fm-acc-t { overflow: hidden; } .fm-acc-tt { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .fm-acc-sub { color: var(--text-light); } .fm-acc-tools { display: flex; flex-direction: row; align-items: center; gap: 8px; margin: -9px -9px -9px 0; } .fm-acc-det { padding: 8px 16px 16px; display: flex; flex-direction: column; gap: 16px; } .fm-ib { appearance: none; border: none; background: transparent; padding: 9px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--earth-500); } .fm-ib .fm-ic, .fm-ib .fm-di { width: 20px; height: 20px; } .fm-ib:hover, .fm-ib:focus-visible { background: var(--solar-600); } .fm-ib-sm { padding: 2px; margin-block: -2px; } .fm-tab-es { display: flex; flex-direction: column; align-items: center; gap: 24px; margin: 24px 0; text-align: center; } /* AdvanceTable (fixed layout, the columns' sizes) in a TableContainer that scrolls sideways; the kebab column pinned right. */ .fm-tc { overflow: auto; background: var(--white); position: relative; } .fm-table { width: 100%; table-layout: fixed; border-collapse: collapse; border-spacing: 0; } .fm-th { font-family: var(--ff-product-regular); font-size: 12px; font-weight: 350; line-height: 16px; letter-spacing: -0.24px; text-transform: uppercase; color: var(--text-medium); padding: 16px 8px; text-align: left; vertical-align: middle; background: transparent; border-top: 1px solid var(--divider); border-bottom: 1px solid var(--earth-400); } .fm-td { font-family: var(--ff-product-regular); font-size: 16px; font-weight: 350; line-height: 20px; letter-spacing: -0.32px; color: var(--text-base); padding: 12px 8px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--divider); } .fm-table tbody tr:last-of-type > td { border-bottom: none; } .fm-tr { cursor: pointer; } .fm-tr:hover, .fm-tr.tour-lit, .fm-tr.v2-hover { background: var(--solar-600); --fm-pin-bg: var(--solar-600); } .fm-pin { position: sticky; right: 0; z-index: 1; background: var(--fm-pin-bg, var(--white)); } .fm-pin::before { content: ''; position: absolute; top: 0; bottom: 0; left: -8px; width: 8px; background: linear-gradient(to left, rgba(0, 0, 0, 0.15), transparent); pointer-events: none; } .fm-pin .fm-ib { float: right; } .fm-namec { display: flex; flex-direction: column; } .fm-meta { color: var(--text-light); } .fm-tempty { padding: 24px 0; text-align: center; } /* ==== v5.6 Financial Materiality page (END) ==== */ /* ==== v5.6 Edit Risk dialog (BEGIN). Spec v5.6-runsustainably-fidelity.md section 5. WT.views.riskEdit's dialog (#risk-edit-dialog, .red-*), ported from the product's source: apps/dma/src/@modules/materiality-financial/components/ dialog-risk/ and the NDS parts it uses (libs/nds/src/components/Dialog, patterns/FullscreenMutationDialog, TextField, Autocomplete, RichTextField, Lozenge, Button, IconButton, Menu; universal/sheila sheila-feedback-card). Values from the theme (libs/mui-themes/src/lib/drova/theme.ts) through the v5.6 tokens in walk.css. The frame is the replica's in-content overlay (div.wt-ovl[data-ovl="risk-edit"] inside #content), so "the window" of the source is #content here: the paper is #content less 32 px at each side and its full height. Nothing above this block was changed. ==== */ /* The window: MUI Dialog's backdrop (no theme override: rgba(0, 0, 0, 0.5)); the paper less 32 px at the sides (maxWidth calc(100% - 64px) on a fullScreen paper), 14 px all round on a phone (MOBILE_LAYOUT_MEDIA_QUERY: margin 14px). The phones' walking rule above (padding-bottom over the callout sheet) is more specific and still applies. */ .wt-ovl[data-ovl="risk-edit"] { padding: 14px; } @media (min-width: 768px) { .wt-ovl[data-ovl="risk-edit"] { padding: 0 var(--sp-6); } } .wt-ovl[data-ovl="risk-edit"] .wt-ovl-scrim { background: rgba(0, 0, 0, 0.5); } .wt-ovl[data-ovl="risk-edit"] .rv-box { height: 100%; } /* Dialog paper: white, 1 px $earth.$500 border, radius 4, the rows header / body / footer, no shadow (elevation 24 is "none" in the theme's shadows). It is its own query container, as the source's paper is. The source's rows are max-content 1fr 101px (85px on a phone) and max-content when the footer stacks; the footer here is exactly 101 (85) tall by its own padding, the 36 px buttons and the 1 px rule, so one max-content track serves all three. */ .red-dlg { container: red-paper / inline-size; box-sizing: border-box; width: 100%; height: 100%; max-height: 100%; min-height: 0; display: grid; grid-template-rows: max-content minmax(0, 1fr) max-content; grid-template-columns: 100%; background: var(--white); color: var(--text-base); border: 1px solid var(--earth-500); border-radius: var(--radius); text-align: left; } .red-dlg *, .red-dlg *::before, .red-dlg *::after { box-sizing: border-box; } /* MUI focuses the dialog itself when it opens (the walk's tour card keeps the focus instead); no ring on the paper. */ .red-dlg:focus { outline: none; } .red-ic { width: 20px; height: 20px; fill: currentColor; flex-shrink: 0; display: block; } /* Dialog__header: grid auto 1fr, gap 8, align end, padding 32, min-height 94, the $earth.$500 rule; the title h6. The product's header has no close button: #risk-edit-x (the walk's hook) is kept off screen and shows on keyboard focus only. */ .red-head { position: relative; display: grid; grid-template-columns: auto 1fr; gap: var(--sp-2); align-items: end; min-height: 94px; padding: var(--sp-6); border-bottom: 1px solid var(--earth-500); overflow-y: auto; } .red-title { color: var(--text-base); } .red-x { position: absolute; width: 1px; height: 1px; padding: 0; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; background: var(--white); color: var(--text-base); } .red-x:focus-visible { position: static; width: 28px; height: 28px; padding: 4px; clip-path: none; overflow: visible; justify-self: end; align-self: center; border-radius: 50%; outline: 2px solid var(--earth-500); } /* Dialog__body: Typography body2, padding 32, the only part that scrolls (the class v2-dlg-b is the walk's hook for it). */ #risk-edit-dialog .red-body { display: block; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; padding: var(--sp-6); color: var(--text-base); } /* FullscreenMutationDialog.HeaderAdditionalContent, hidden for this issue (no MSCI panel): margin -32 -32 32, the divider. */ .red-hac { margin: calc(-1 * var(--sp-6)) calc(-1 * var(--sp-6)) var(--sp-6); border-bottom: 1px solid var(--divider); visibility: hidden; } /* FullscreenMutationDialog__parentContainer: minmax(600px, 8fr) minmax(400px, 2fr); the right grid beige, padding 32 (81 on top at lg), margin -32 top, bottom and right; its Stack (gap 24) sticks to the top (.rv-rail-in, refitted by riskEdit.refit()). */ .red-grid { display: grid; grid-template-columns: minmax(600px, 8fr) minmax(400px, 2fr); } .red-left { min-width: 0; padding-right: var(--sp-6); } .red-right { position: relative; min-width: 0; height: calc(100% + 64px); background: var(--solar-500); padding: 81px var(--sp-6) var(--sp-6); margin-block: calc(-1 * var(--sp-6)); margin-right: calc(-1 * var(--sp-6)); } #risk-edit-rail .red-side { gap: var(--sp-5); } /* breakpoints.down('lg'): one column, the right grid under the form across the body's full width. Here the paper's own width decides (the two tracks' minimums, 600 + 400, and the body's padding and border: 1066 px), as the dialog is narrower than the window. */ @container red-paper (max-width: 1065.98px) { .red-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr max-content; } .red-left { padding-right: 0; padding-bottom: var(--sp-6); } .red-right { height: auto; margin: calc(-1 * var(--sp-6)); margin-top: 0; padding-top: var(--sp-6); } #risk-edit-rail .rv-rail-in { position: static; max-height: none; overflow: visible; } } /* The form: the intro subtitle2 with the issue in the SemiBold face, Divider my 5, TabRiskDetails and TabRiskEvaluation (Stack gap 24, the second mt 24). */ .red-intro { color: var(--text-base); } .red-hr { height: 0; margin: var(--sp-5) 0; border: 0; border-bottom: 1px solid var(--divider); } .red-stack { display: flex; flex-direction: column; gap: var(--sp-5); } .red-stack + .red-stack { margin-top: var(--sp-5); } .red-l { display: block; color: var(--text-medium); } .red-status { display: flex; flex-direction: column; gap: var(--sp-2); } .red-lzs { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--sp-2); } /* BaseLozenge + SimpleLozenge: 20 px, padding 4 10, radius 10, 12/12 NeutrifPro Regular, $text.base; background $50 ($grey: $100), border $700 ($grey: $600); selected and hover $100 ($grey: $200); disabled $text.disabled on $50 / $100 ($grey: $100 / $200). The label is a caption 12/16 (TruncatedTypographyWithTooltip). */ .red-lz { display: inline-flex; align-items: center; height: 20px; min-width: 32px; width: max-content; max-width: 100%; padding: 4px 10px; border: 1px solid var(--earth-300); border-radius: 10px; background: var(--earth-50); color: var(--text-base); font-family: var(--ff-product-regular); font-size: 12px; line-height: 12px; overflow: hidden; cursor: pointer; user-select: none; transition: width 150ms cubic-bezier(0.4, 0, 0.2, 1), min-width 150ms cubic-bezier(0.4, 0, 0.2, 1); } .red-lz-t { font-family: var(--ff-product-regular); font-size: 12px; line-height: 16px; letter-spacing: 0.03333em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .red-lz-static { cursor: default; } .red-lz-grey { background: var(--grey-100); border-color: var(--grey-600); } .red-lz-sky { background: var(--sky-50); border-color: var(--sky-700); } .red-lz-purple { background: var(--purple-50); border-color: var(--purple-700); } .red-lz-green { background: var(--green-50); border-color: var(--green-700); } .red-lz-yellow { background: var(--yellow-50); border-color: var(--yellow-700); } .red-lz-orange { background: var(--orange-50); border-color: var(--orange-700); } .red-lz-red { background: var(--red-50); border-color: var(--red-700); } .red-lz-teal { background: var(--teal-50); border-color: var(--teal-700); } .red-lz-pink { background: var(--pink-50); border-color: var(--pink-700); } .red-lz-grey:not(.red-lz-dis):not(.red-lz-static):hover, .red-lz-grey.red-lz-on { background: var(--grey-200); } .red-lz-sky:not(.red-lz-dis):not(.red-lz-static):hover, .red-lz-sky.red-lz-on { background: var(--sky-100); } .red-lz-purple:not(.red-lz-dis):not(.red-lz-static):hover, .red-lz-purple.red-lz-on { background: var(--purple-100); } .red-lz-green:not(.red-lz-dis):not(.red-lz-static):hover, .red-lz-green.red-lz-on { background: var(--green-100); } .red-lz-dis { color: var(--text-disabled); cursor: default; pointer-events: none; } .red-lz-dis.red-lz-grey { background: var(--grey-100); border-color: var(--grey-200); } .red-lz-dis.red-lz-sky { background: var(--sky-50); border-color: var(--sky-100); } .red-lz-dis.red-lz-purple { background: var(--purple-50); border-color: var(--purple-100); } .red-lz-dis.red-lz-green { background: var(--green-50); border-color: var(--green-100); } /* TextField: the label, then MUI's OutlinedInput (white, radius 4, the notched outline $solar.$800 drawn over the box, $solar.$900 on hover and while its menu is open; 36 px; the input 16 px on 23 with padding 6.5 12, the root 8 px on the right; multiline rows of 23 with padding 0 on the root). The root inherits body1's letter-spacing; the placeholder is $text.light. */ .red-tf { display: flex; flex-direction: column; min-width: 0; } .red-dd { position: relative; } .red-in { position: relative; display: flex; align-items: center; min-height: 36px; height: 36px; padding-right: var(--sp-2); background: var(--white); border-radius: var(--radius); color: var(--text-base); cursor: text; letter-spacing: 0.00938em; } .red-in::after { content: ''; position: absolute; inset: 0; border: 1px solid var(--solar-800); border-radius: inherit; pointer-events: none; } .red-tf:hover .red-in::after, .rv-active .red-in::after { border-color: var(--solar-900); } .red-in:focus-visible { outline: 2px solid var(--earth-500); outline-offset: 1px; } .red-in-t { flex: 1 1 auto; min-width: 0; display: block; padding: 6.5px var(--sp-3); font-family: var(--ff-product-regular); font-size: 16px; line-height: 23px; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .red-ph { color: var(--text-light); } .red-ph[hidden] { display: none; } .red-ph-face { font-family: var(--ff-product-wide-descent); } .red-in.red-ml { display: block; height: auto; padding: 0; cursor: text; } .red-ml .red-in-t { height: 128px; white-space: pre-wrap; overflow: hidden; text-overflow: clip; } /* Select: the value with MUI's 32 px right padding, IconComponent = InputAdornment (margin-left 8) holding the ghost icon button (padding 4, the 20 px KeyboardArrowRightOutlined turned 90deg, $text.base); the FormHelperText (margin-top 3) with the caption Link (underline always, $text.base, $earth.$400 on hover). */ .red-sel { cursor: pointer; } .red-sel .red-in-t { padding-right: 32px; } .red-adorn { display: flex; align-items: center; margin-left: var(--sp-2); } .red-ib { display: inline-flex; padding: 4px; border-radius: 50%; color: var(--text-base); } .red-chev { transform: rotate(90deg); } .red-help { margin: 3px 0 0; color: var(--text-light); line-height: 16px; } .red-link { color: var(--text-base); text-decoration: underline; text-decoration-color: currentColor; cursor: pointer; } .red-link:hover { color: var(--earth-400); } /* The Menu under a select (TextField selectMenu: margin-top 8, an inset 1 px divider ring, padding 12, radius 4) and its items (Menu.Item: padding 8, min-height 36, body2, $functional hovered; the selected one with the 13 x 12 $dawn.$500 tick). */ .red-menu { position: absolute; z-index: 3; left: 0; right: 0; top: calc(100% + var(--sp-2)); margin: 0; padding: var(--sp-3); list-style: none; background: var(--white); border-radius: var(--radius); box-shadow: inset 0 0 0 1px var(--divider); } .red-menu[hidden] { display: none; } .red-mi { display: grid; grid-template-columns: 1fr; gap: var(--sp-2); align-items: start; min-height: 36px; padding: var(--sp-2); color: var(--text-base); white-space: normal; cursor: pointer; } .red-mi:hover { background: var(--fn-hovered); } .red-mi-on { grid-template-columns: 1fr 24px; } .red-mi-t { overflow-wrap: break-word; } .red-tick { justify-self: center; margin-top: 4px; fill: var(--dawn-500); } /* Autocomplete (the value chain): the root padding 6.5 12 with 48 on the right, the popup indicator 8 px from the edge and turned 90deg; the paper margin-top 8, padding 16 8, a 1 px divider border; the options 16 px at weight 350. The values below the field (Stack mt 8, gap 8) as InputLozenges: $earth.$50, no border, $earth.$500, the 16 px end with the 12 px CloseOutlined in $earth.$400. MultipleSelectValueChains' Stack puts the help link 4 px under. */ .red-ac { cursor: pointer; padding-right: 48px; } .red-ac .red-in-t { padding: 6.5px 0 6.5px var(--sp-3); } .red-ac-end { position: absolute; right: var(--sp-2); top: 50%; transform: translateY(-50%); display: flex; } .red-ac-paper { padding: var(--sp-4) var(--sp-2); box-shadow: none; border: 1px solid var(--divider); } .red-ao { padding: 6px var(--sp-4); font-family: var(--ff-product-regular); font-size: 16px; line-height: 20px; font-weight: 350; color: var(--text-base); cursor: pointer; } .red-ao:hover, .red-ao-on:hover { background: var(--fn-hovered); } .red-ao-on { background: var(--white); } .red-ilzs { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); } .red-ilzs[hidden] { display: none; } .red-ilz { display: inline-flex; align-items: center; height: 20px; min-width: 32px; max-width: 100%; padding: 4px 2px 4px 10px; border-radius: 10px; background: var(--earth-50); color: var(--earth-500); font-family: var(--ff-product-regular); font-size: 12px; line-height: 12px; cursor: pointer; } .red-ilz:hover { background: var(--earth-100); } .red-ilz-t { font-size: 12px; line-height: 16px; letter-spacing: 0.03333em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .red-ilz-x { display: grid; place-content: center; height: 16px; margin-left: 10px; padding: 3px 2px; border-radius: 10px; color: var(--earth-400); } .red-ilz:hover .red-ilz-x { background: var(--solar-50); } .red-ilz-x .red-ic { width: 12px; height: 12px; } .red-chain .red-help { margin-top: var(--sp-1); } /* RichTextField (the justification): the label (noWrap), the inner box (1 px $solar.$800, radius 4, 20 px lines at weight 350), the Toolbar (padding 8 12, gap 8, the icon buttons with no padding and 20 px icons), the editor (min-height 150, padding 0 12 8) and its placeholder (absolute, top 40, left 12, 16 px $text.light). The field's Stack spacing 1 holds it. */ .red-reason { display: flex; flex-direction: column; gap: var(--sp-1); } .red-rtf-l { width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .red-rtf-in { position: relative; text-align: left; border: 1px solid var(--solar-800); border-radius: var(--radius); line-height: 20px; font-weight: 350; background: var(--white); } .red-rtf:hover .red-rtf-in { border-color: var(--solar-900); } .red-tb { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); } .red-tb-b { display: inline-flex; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--text-base); cursor: pointer; } .red-tb-b:disabled { color: var(--text-disabled); cursor: default; } .red-flip-x { transform: scaleX(-1); } .red-rtf-c { min-height: 150px; padding: 0 var(--sp-3) var(--sp-2); font-family: var(--ff-product-regular); font-size: 16px; color: var(--text-base); outline: 0; cursor: text; } .red-rtf-ph { position: absolute; top: 40px; left: 12px; width: calc(100% - 24px); overflow: hidden; text-overflow: ellipsis; font-family: var(--ff-product-regular); font-size: 16px; color: var(--text-light); pointer-events: none; user-select: none; } /* FieldRiskEvaluationEstimatedValue: Stack gap 4; the row (spacing 8) of two TextFields (caption labels, 220 px, flex 1) with the currency adornment ($text.light, margin-right 8, the root's 14 px start padding) and the Divider between them (12 wide, 10 tall with 35 px above, $grey.$700); the note (gap 4) with the 13 px InfoOutlined and the caption link. */ .red-est { display: flex; flex-direction: column; gap: var(--sp-1); } .red-est-row { display: flex; flex-direction: row; gap: var(--sp-2); } .red-est-f { width: 220px; flex: 1; } .red-est-in { padding-left: 14px; } .red-est-in .red-in-t { padding-left: 0; } .red-est-sym { margin-right: var(--sp-2); color: var(--text-light); font-family: var(--ff-product-regular); font-size: 16px; line-height: 23px; } .red-est-dash { flex-shrink: 0; box-sizing: content-box; width: 12px; height: 10px; padding-top: 35px; border-bottom: 1px solid var(--grey-700); } .red-est-note { display: flex; gap: var(--sp-1); } .red-est-i { width: 13px; height: 13px; margin: 0 2px -2px 0; color: var(--text-base); } /* SheilaFeedbackCard: padding 12, radius 4, the divider border, white; grid 50px 1fr 76px with gap 16; the DrovaIcon (v2) at 36 px on a $dawn.$50 circle of 50 with padding 7, moved 1 px right and down; the bold body1 prompt over Sheila's body2 line (gap 1ch); the two 38 px thumbs (IconButton padding 9, 20 px ThumbUp/ThumbDownOutlined) from 6 px down. */ .red-fb { padding: var(--sp-3); border: 1px solid var(--divider); border-radius: 4px; background: var(--white); } .red-fb-g { display: grid; grid-template-columns: 50px 1fr 76px; gap: var(--sp-4); } .red-fb-icon { width: 50px; height: 50px; padding: 7px; border-radius: 50%; background: var(--dawn-50); } .red-drova { width: 36px; height: 36px; display: block; transform: translate(1px, 1px); } .red-drova-u { fill: var(--earth-500); } .red-st-a { stop-color: var(--dawn-500); } .red-st-b { stop-color: var(--purple-400); } .red-fb-tc { display: flex; flex-direction: column; justify-content: center; gap: 1ch; min-width: 0; color: var(--text-base); } .red-fb-acts { display: flex; align-items: start; justify-content: end; padding-top: 6px; } .red-fb-w { display: inline-block; width: 38px; overflow: hidden; } .red-fb-b { display: inline-flex; padding: 9px; border: 0; border-radius: 50%; background: var(--white); color: var(--text-base); cursor: pointer; } .red-fb-b:hover { background: var(--solar-600); } /* TabRiskResults: p 24, white, radius 4, the divider border; the subtitle2 title (mb 24); the rows' Stack (min-height 200, the divider above, below and between) of grids 3fr 7fr with 12 px above and below, caption labels, the values' Stack (row, gap 8, centred); the score as a tally-only InformationLozenge (20 x 20, the colour's $700 ring, $text.medium); Activity with the 13 px ScheduleOutlined (gap 4); the caption footnote in $text.light, 12 px under. */ .red-res { padding: var(--sp-5); background: var(--white); border-radius: var(--radius); border: 1px solid var(--divider); } .red-dlg .red-res-t { margin-bottom: var(--sp-5); color: var(--text-base); } .red-res-rows { display: flex; flex-direction: column; min-height: 200px; border-top: 1px solid var(--divider); border-bottom: 1px solid var(--divider); } .red-res-r { display: grid; grid-template-columns: 3fr 7fr; padding: var(--sp-3) 0; color: var(--text-base); } .red-res-r + .red-res-r { border-top: 1px solid var(--divider); } .red-res-v { display: flex; flex-direction: row; align-items: center; gap: var(--sp-2); min-width: 0; flex-wrap: wrap; } .red-res-d { white-space: break-spaces; } .red-tally { display: inline-flex; align-items: center; justify-content: center; width: 20px; min-width: 20px; height: 20px; border-radius: 10px; border: 1px solid var(--earth-100); color: var(--text-medium); font-family: var(--ff-product-regular); font-size: 12px; line-height: 12px; } .red-tally-yellow { border-color: var(--yellow-700); } .red-tally-green { border-color: var(--green-700); } .red-tally-teal { border-color: var(--teal-700); } .red-tally-orange { border-color: var(--orange-700); } .red-tally-red { border-color: var(--red-700); } .red-res-act { display: flex; flex-direction: row; gap: var(--sp-1); align-items: flex-start; min-width: 0; } .red-res-ai { width: 13px; height: 13px; margin-top: 1px; color: var(--text-base); } .red-res-at { white-space: break-spaces; min-width: 0; } .red-res-foot { display: inline-block; margin-top: var(--sp-3); color: var(--text-light); } /* Dialog__footer: grid 1fr max-content, centred, padding 32, the $earth.$500 rule above; the secondary actions at the left and the primary ones at the right, 16 px apart. Button: 36 px, min-width 100 (regular), padding 6 16, radius 100, the button variant (16/20, weight 500). primary: $earth.$500 with white text ($earth.$400 on hover and focus); secondary: white with an inset 1 px $earth.$500 ring ($solar.$600 on hover); ghost_white: white, underlined ($solar.$600 on hover); compact: 20 px, padding 0 12, radius 10, 12/16, the 13 px start icon. Delete Risk shows from the md breakpoint up (window 768). */ .red-foot { display: grid; grid-template-columns: 1fr max-content; align-items: center; padding: var(--sp-6); border-top: 1px solid var(--earth-500); overflow-y: auto; } .red-foot-sec, .red-foot-pri { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--sp-4); } .red-foot-sec { justify-content: start; } .red-btn { display: inline-flex; align-items: center; justify-content: center; height: 36px; min-width: 100px; padding: 6px var(--sp-4); border: 0; border-radius: 100px; white-space: nowrap; cursor: pointer; } .red-btn-pri { background: var(--earth-500); color: var(--white); } .red-btn-pri:hover, .red-btn-pri:focus-visible { background: var(--earth-400); } .red-btn-sec { background: var(--white); color: var(--earth-500); box-shadow: inset 0 0 0 1px var(--earth-500); } .red-btn-sec:hover, .red-btn-sec:focus-visible { background: var(--solar-600); } .red-btn-ghost { background: var(--white); color: var(--earth-500); text-decoration: underline; } .red-btn-ghost:hover, .red-btn-ghost:focus-visible { background: var(--solar-600); } .red-btn-compact { width: max-content; min-width: 0; height: 20px; padding: 0 var(--sp-3); border-radius: 10px; font-family: var(--ff-product-regular); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.02857em; } .red-btn-i { width: 13px; height: 13px; margin: 0 var(--sp-2) 0 calc(-1 * var(--sp-1)); } /* Dialog__footer--actions-stacking (the buttons need more than one row has: measured in the source, here the widths they take with and without Delete Risk): one column, the primary actions on top at the right, the secondary under them. */ @media (min-width: 768px) { @container red-paper (max-width: 461.98px) { .red-foot { grid-template-columns: 1fr; grid-template-rows: max-content max-content; gap: var(--sp-4); } .red-foot-pri { grid-row: 1; justify-content: end; } .red-foot-sec { grid-row: 2; justify-content: end; } } } @media (max-width: 767px) { @container red-paper (max-width: 329.98px) { .red-foot { grid-template-columns: 1fr; grid-template-rows: max-content; } .red-foot-pri { grid-row: 1; justify-content: end; } } } @media (max-width: 767px) { .red-head { min-height: 78px; padding-block: var(--sp-5); } .red-foot { padding-block: var(--sp-5); } .red-foot-sec { display: none; } } @media (prefers-reduced-motion: reduce) { .red-lz { transition: none; } } /* ==== v5.6 Edit Risk dialog (END) ==== */ /* ==== v5.6 fixer pass (refuter findings 0, 1, 9, 12 and 15; the top bar title) ==== */ /* Finding 1: in explore the Edit Risk / Edit Opportunity dialog is the product's fullscreen MUI Dialog: drawn beside the shell at window size (the paper the window less 32 px at each side, 14 px on a phone, by the padding rules above), over the rail and the pane, under the explore door (#modal, z-index 72), the toasts and the notices. During the walk it stays inside #content. */ .wt-ovl.wt-ovl-win { position: fixed; inset: 0; height: auto; z-index: 71; } /* Finding 0: Edit Opportunity's potential benefits (field-opportunity-evaluation-benefits.tsx): the body2 label and the caption (my 1) in $text.medium over a Grid of NDS Checkboxes, one column, two from the sm breakpoint (431 px) up. The Checkbox: MUI's 9 px padding around the 24 px Icon (a 23 px square, radius 4, $solar.$800 stroke on white; checked, the $dawn.$500 tick on $solar.$500), the body2 label 3 px after it, $text.medium on hover. */ .red-ben { display: flex; flex-direction: column; } .red-ben-sub { margin: var(--sp-1) 0; color: var(--text-medium); } .red-ben-grid { display: grid; grid-template-columns: minmax(0, 1fr); } @media (min-width: 431px) { .red-ben-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .red-cb { display: flex; align-items: center; gap: 3px; min-width: 0; cursor: pointer; } .red-cb-b { display: inline-flex; flex-shrink: 0; padding: 9px; border-radius: 50%; } .red-cb-i { display: block; width: 24px; height: 24px; } .red-cb-i rect { fill: var(--white); stroke: var(--solar-800); } .red-cb-i path { display: none; fill: none; stroke: var(--dawn-500); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .red-cb-on .red-cb-i path { display: inline; } .red-cb-on .red-cb-i rect { fill: var(--solar-500); } .red-cb-l { min-width: 0; color: var(--text-base); } .red-cb:hover .red-cb-l { color: var(--text-medium); } .red-cb:focus-visible { outline: 2px solid var(--earth-500); outline-offset: 1px; } /* Finding 9: the Results summary's Activity clock is ScheduleOutlined at fontSize small (13 px), 1 px down, 4 px before the text. */ .fm-ic13 { width: 13px; height: 13px; margin-top: 1px; } /* Finding 15: a matrix spot's rows highlighted (NDS TableRow --highlight: $solar.$500); the hover fill still wins. */ .fm-tr.fm-tr-hl:not(:hover):not(.tour-lit):not(.v2-hover) { background: var(--solar-500); --fm-pin-bg: var(--solar-500); } /* The page title (universal/platform/src/components/header-layout: Typography h4 in palette.$dawn.$500, letter-spacing 0.2352 px at 32 px). The product's title wraps (no clamp, no max width) and the header grows; it matches both top bar painters. */ .topbar .title.feature { color: var(--dawn-500); letter-spacing: 0.00735em; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: break-word; } /* The header (universal/platform/src/components/header-layout: index.tsx, header-breadcrumbs.tsx, use-header-styling.tsx, constant.ts; libs/nds Breadcrumbs). The breadcrumbs: caption 12/16 with MUI's caption letter-spacing (0.03333em), the items and the "/" separator in $text.light, the separator 8 px from each word (MuiBreadcrumbs-separator margin 0 8). From md up: the bar min-height 124.5 with padding 21.5 at the top and the 32 px gutter at the sides and the bottom; a column of the breadcrumbs' 20 px row (kept when a page has none), 12 px (gap 3), then the title row (min-height 38: the 38 px back IconButton, 4 px, the h4); the actions in the second grid column, centred on the title row, 16 px after it (COLUMN_GAP). The bar grows with a wrapped title. Phones keep the replica's own top bar rule above. While the walk plays (body.walking) the bar keeps its earlier metrics, so the thirteen screens' callouts land exactly where they did (at 1456 x 829 the taller bar moved screen 5's callout from the left of the Risks card to above it); the product's metrics apply from the end of the walk. */ .v2-crumb { color: var(--text-light); gap: var(--sp-2); letter-spacing: 0.03333em; } .v2-crumb-sep { color: var(--text-light); } @media (min-width: 768px) { body:not(.walking) .topbar { min-height: 124.5px; padding: 21.5px var(--sp-6) var(--sp-6); align-items: stretch; gap: var(--sp-4); } body:not(.walking) .v2-tb-left { justify-content: flex-start; gap: var(--sp-3); } body:not(.walking) .v2-crumb { min-height: 20px; } body:not(.walking) .v2-tb-title { min-height: 38px; gap: var(--sp-1); } body:not(.walking) .v2-tb-back { width: 38px; height: 38px; border-radius: 50%; } body:not(.walking) .topbar .actions { margin-top: 32px; align-self: stretch; align-items: center; } } /* During the walk a page without a crumb keeps the earlier bar: no empty crumb row. */ body.walking .v2-crumb-none { display: none; } /* The Tasks card's View all (task-top-card: Button ghost_white, size compact): MUI's button letter-spacing is 0.02857em, so 0.343 px at the compact's 12 px, not the regular button's 0.457 px. */ .fm-btn-c { letter-spacing: 0.02857em; } /* ==== v5.7 Home block (BEGIN). Home ported from the product's source (apps/homepage/src/components/home-dashboard.tsx and step-status-lozenge.tsx; libs/nds/src patterns/DetailAccordion, patterns/FilterLozenge, patterns/FilterMenu, components/Menu, components/Lozenge, components/IconButton, components/Button, components/SheilaStarsIcon; libs/mui-themes/src/lib/drova theme.ts and color-palette.ts). Every rule is scoped to #home-root.h7 (or the menu's own .h7-menu), so no other page's rule changes; the tokens are the v5.6 theme block's. */ /* The canvas: $solar.$500. Two paddings nest in the source: home-canvas.tsx's canvas body ({ xs: '16px 16px 88px', sm: '24px 24px 88px' }) around home-dashboard.tsx's own ({ xs: 16, sm: 32 }), so 56 56 120 from sm 431 and 32 32 104 below; the 88px is the source's literal. It cancels #content's own padding like every .v2p page. */ #home-root.h7 { background: var(--solar-500); } #home-root.h7 .h7-page { min-height: 100%; padding: calc(var(--sp-5) + var(--sp-6)) calc(var(--sp-5) + var(--sp-6)) calc(88px + var(--sp-6)); } @media (max-width: 430.98px) { #home-root.h7 .h7-page { padding: calc(var(--sp-4) * 2) calc(var(--sp-4) * 2) calc(88px + var(--sp-4)); } } /* The column: maxWidth 920, centred. Its children keep the source's gap 5 (24px); the header's mb -2 and the plan's own spacing are folded into margins so the plan can collapse to nothing while it is pending (the walk's grid-rows transition). */ #home-root.h7 .h7-col { max-width: 920px; margin: 0 auto; } #home-root.h7 .h7-col > .v2-pagetag { margin: 0 0 var(--sp-4); } #home-root.h7 .h7-head { display: flex; flex-direction: column; gap: var(--sp-4); margin-bottom: var(--sp-4); } #home-root.h7 .h7-h1 { color: var(--text-base); } #home-root.h7 .h7-ctl { display: flex; flex-direction: row; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--sp-2); margin: 0; } #home-root.h7 .h7-chips { display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; gap: var(--sp-2); } #home-root.h7 .h7-plan { display: flex; flex-direction: column; gap: var(--sp-5); padding-bottom: var(--sp-5); } #home-root.h7 .h7-tree { display: flex; flex-direction: column; gap: var(--sp-3); } /* SVG icons: MUI SvgIcon (1em box, currentColor). */ #home-root.h7 .h7-svg, .h7-menu .h7-svg { display: block; width: 1em; height: 1em; flex-shrink: 0; fill: currentColor; } /* IconButton (theme.ts MuiIconButton): round, padding 9, the svg 20px; ghost_solar hover $solar.$600, active $solar.$700; compact 20 x 20, padding 2, the svg 16px. */ #home-root.h7 .h7-ib { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; box-sizing: border-box; width: 38px; height: 38px; padding: 9px; border: none; border-radius: 50%; background: transparent; color: var(--text-base); font-size: 20px; cursor: pointer; transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1); } #home-root.h7 .h7-ib:hover, #home-root.h7 .h7-ib:focus-visible { background: var(--solar-600); outline: none; } #home-root.h7 .h7-ib:active { background: var(--solar-700); } #home-root.h7 .h7-ib.h7-ib-c { width: 20px; height: 20px; padding: 2px; font-size: 16px; } /* The welcome banner and the note above the rows (Stack row, gap 3, bg_sheila_tint_50, 1px $purple.$500, radius 4, padding 4; the note py 3 px 4, mb 4); body2 in $text.base. */ #home-root.h7 .h7-banner { display: flex; flex-direction: row; gap: var(--sp-3); align-items: flex-start; background: var(--bg-sheila-tint-50); border: 1px solid var(--purple-500); border-radius: 4px; padding: var(--sp-4); } #home-root.h7 .h7-banner[hidden] { display: none; } #home-root.h7 .h7-banner-note { padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-4); } #home-root.h7 .h7-banner-t { flex: 1; min-width: 0; color: var(--text-base); } /* The Recommended next steps card (background.paper, the divider border, radius 4, padding 4); the overline row mb 3. */ #home-root.h7 .h7-card { background: var(--white); border: 1px solid var(--divider); border-radius: 4px; padding: var(--sp-4); } #home-root.h7 .h7-next-h { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-bottom: var(--sp-3); } #home-root.h7 .h7-ovl { display: block; color: var(--text-light); } /* actionRow: py 2 px 4, radius 4, gap 3, align flex-start, the $solar.$600 hover (background-color 300ms ease); the body2 title in $text.base; in the card the body2 value in $text.medium and the caption goal in $text.light (mt 1); in the tree the caption value in $text.medium. The recommended rows fade in (stepFadeIn, 0.3s ease-out). */ #home-root.h7 .h7-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } #home-root.h7 .h7-row { display: flex; flex-direction: row; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-2) var(--sp-4); border-radius: 4px; cursor: pointer; background: transparent; transition: background-color 300ms ease; } #home-root.h7 .h7-row:hover { background: var(--solar-600); } #home-root.h7 .h7-row:focus-visible { outline: 2px solid var(--earth-500); outline-offset: -2px; } #home-root.h7 .h7-row-m { flex: 1; min-width: 0; } #home-root.h7 .h7-row-s { flex-shrink: 0; } #home-root.h7 .h7-row-t { color: var(--text-base); } #home-root.h7 .h7-row-v { display: block; color: var(--text-medium); margin-top: var(--sp-0); } /* mt: 0 is spacing(0), 2px on Drova's scale */ #home-root.h7 .h7-row-g { display: block; color: var(--text-light); margin-top: var(--sp-1); } #home-root.h7 .h7-row-c { display: block; color: var(--text-medium); margin-top: var(--sp-0); } #home-root.h7 .h7-next .h7-row { animation: h7-step-in 0.3s ease-out both; } @keyframes h7-step-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { #home-root.h7 .h7-next .h7-row { animation: none; } } /* Lozenges (BaseLozenge: 20px, border-box, radius 10, padding 4px 10px, 12/12 NeutrifPro Regular, the caption label 12/16). */ #home-root.h7 .h7-loz { position: relative; display: inline-flex; align-items: center; box-sizing: border-box; height: 20px; width: max-content; min-width: 32px; max-width: 100%; padding: 4px 10px; border-radius: 10px; border: 1px solid transparent; background: transparent; color: var(--text-medium); font-family: var(--ff-product-regular); font-size: 12px; line-height: 12px; overflow: hidden; flex-shrink: 0; } #home-root.h7 .h7-loz-t { display: inline-block; font-family: var(--ff-product-regular); font-size: 12px; line-height: 16px; letter-spacing: 0.03333em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* InformationLozenge $earth with a tally: no border, $earth.$50, $text.base; the tally End ($solar.$50 pill, min 16 x 16, 3px 4px, $text.medium, 10px after the label), the root's right padding 2. */ #home-root.h7 .h7-loz-info { border: none; background: var(--earth-50); color: var(--text-base); justify-content: center; } #home-root.h7 .h7-loz-info:has(> .h7-loz-end) { padding-right: 2px; } #home-root.h7 .h7-loz-end { display: grid; place-content: center; box-sizing: border-box; min-width: 16px; height: 16px; margin-left: 10px; padding: 3px 4px; border-radius: 10px; background: var(--solar-50); color: var(--text-medium); } #home-root.h7 .h7-pw { display: inline-flex; } /* SimpleLozenge (StepStatusLozenge): $grey = $grey.$100 with the $grey.$600 border, $green = $green.$50 with $green.$700; $text.base; the interactive hover $grey.$200 / $green.$100. */ #home-root.h7 .h7-loz-simple { display: inline-flex; color: var(--text-base); } #home-root.h7 .h7-loz-grey { background: var(--grey-100); border-color: var(--grey-600); } #home-root.h7 .h7-loz-green { background: var(--green-50); border-color: var(--green-700); } /* The lozenge is the Status menu's anchor (SimpleLozenge --interactive): pointer; hover, focus, active and open $grey.$200 / $green.$100; the label no focus ring (the fill marks focus). */ #home-root.h7 .h7-loz-btn { cursor: pointer; outline: none; } #home-root.h7 .h7-loz-btn.h7-loz-grey:hover, #home-root.h7 .h7-loz-btn.h7-loz-grey:focus-visible, #home-root.h7 .h7-loz-btn.h7-loz-grey:active, #home-root.h7 .h7-loz-btn.h7-loz-grey[aria-expanded="true"] { background: var(--grey-200); } #home-root.h7 .h7-loz-btn.h7-loz-green:hover, #home-root.h7 .h7-loz-btn.h7-loz-green:focus-visible, #home-root.h7 .h7-loz-btn.h7-loz-green:active, #home-root.h7 .h7-loz-btn.h7-loz-green[aria-expanded="true"] { background: var(--green-100); } /* FilterLozenge's anchor (InteractiveLozenge $grey on InformationLozenge): $grey.$100, no border, $text.base, the 12px FilterListOutlined 4px before the label, padding-left 6; hover $grey.$200, focus and active $grey.$300. */ #home-root.h7 button.h7-loz-int { border: none; background: var(--grey-100); color: var(--text-base); padding-left: 6px; cursor: pointer; outline: none; font: inherit; font-family: var(--ff-product-regular); font-size: 12px; line-height: 12px; } #home-root.h7 button.h7-loz-int:hover { background: var(--grey-200); } #home-root.h7 button.h7-loz-int:focus-visible, #home-root.h7 button.h7-loz-int:active, #home-root.h7 button.h7-loz-int[aria-expanded="true"] { background: var(--grey-300); } #home-root.h7 .h7-loz-start { display: inline-flex; margin-right: 4px; font-size: 12px; color: var(--text-base); } /* DetailAccordion: the bordered card (the divider, radius 4, background.paper; the sub-objective $grey.$100). The summary: padding 4, min-height 56, a grid of the thumb column and the main content (column gap 5 at level 1, 3 at levels 2 and 3; the thumb 24px, 20px at level 3, none at level 4), the $solar.$600 hover. The main content: the title wrapper (the overline eyebrow above the title, gap 2) and the lozenges inline when they fit beside the title, else on their own row 8px below (the summary's measured lozengesInline, here by flex wrapping); the title wraps (titleWrap). The details: padding 2 4 4, a column with gap 4, inset 16px under level 1, 48px under level 2, 44px under level 3. */ #home-root.h7 .h7-acc { display: block; background: var(--white); border: 1px solid var(--divider); border-radius: 4px; margin: 0; padding: 0; } #home-root.h7 .h7-acc.v2-sub { background: var(--grey-100); } #home-root.h7 .h7-acc[hidden] { display: none; } #home-root.h7 .h7-sum { display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: center; column-gap: var(--sp-5); padding: var(--sp-4); min-height: 56px; box-sizing: border-box; list-style: none; cursor: pointer; background: transparent; transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1); } #home-root.h7 .h7-sum::-webkit-details-marker { display: none; } #home-root.h7 .h7-sum::marker { content: none; } #home-root.h7 .h7-sum:hover { background: var(--solar-600); } #home-root.h7 .h7-sum:focus-visible { outline: 2px solid var(--earth-500); outline-offset: -2px; } #home-root.h7 .h7-l2 > .h7-sum { padding: var(--sp-3); column-gap: var(--sp-3); } #home-root.h7 .h7-l3 > .h7-sum { padding: var(--sp-3); column-gap: var(--sp-3); grid-template-columns: 20px minmax(0, 1fr); } #home-root.h7 .h7-l4 > .h7-sum { padding: var(--sp-4); grid-template-columns: minmax(0, 1fr); } /* The thumb: IconButton ghost_white with KeyboardArrowDownOutlined, 24 x 24 (20 x 20 at level 3, the glyph 16px), turned -90deg while closed (ease-in-out 0.2s); hover $solar.$600 with the inset white ring. */ #home-root.h7 .h7-thumb { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; width: 24px; height: 24px; padding: 0; margin: 0; border: none; border-radius: 50%; background: transparent; color: var(--text-base); font-size: 20px; cursor: pointer; outline: none; rotate: -90deg; transition: ease-in-out 0.2s; } #home-root.h7 .h7-acc[open] > .h7-sum > .h7-thumb { rotate: 0deg; } /* ghost_white (theme.ts): hover, focus and focus-visible $solar.$600 with the inset 1px white ring (a clicked chevron keeps it while focused); active $solar.$700, no ring. */ #home-root.h7 .h7-thumb:hover, #home-root.h7 .h7-thumb:focus, #home-root.h7 .h7-thumb:focus-visible { background: var(--solar-600); box-shadow: inset 0 0 0 1px var(--white); } #home-root.h7 .h7-thumb:active { background: var(--solar-700); box-shadow: none; } /* The summary's subtitle row (DetailAccordion: the content grid's row gap spacing(1), the subtitle in columns 2 to the end); every goal passes one, empty when the goal has no why-now line, so the goal header carries the 4px gap. */ #home-root.h7 .h7-sum.h7-has-sub { row-gap: var(--sp-1); } #home-root.h7 .h7-subw { grid-column: 2 / -1; min-width: 0; overflow: hidden; } #home-root.h7 .h7-sub-t { margin: 0; color: var(--text-medium); } #home-root.h7 .h7-l3 > .h7-sum > .h7-thumb { width: 20px; height: 20px; font-size: 16px; } #home-root.h7 .h7-main { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--sp-5); row-gap: var(--sp-2); min-width: 0; } #home-root.h7 .h7-tw { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: var(--sp-2); } #home-root.h7 .h7-title { display: block; color: var(--text-base); white-space: normal; overflow: hidden; text-overflow: clip; overflow-wrap: anywhere; } #home-root.h7 .h7-tail { display: flex; align-items: center; flex: 0 0 auto; max-width: 100%; min-width: 0; } #home-root.h7 .h7-tailw { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--sp-2); overflow: auto; scrollbar-width: none; } #home-root.h7 .h7-tailw::-webkit-scrollbar { display: none; } #home-root.h7 .h7-det { display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-2) var(--sp-4) var(--sp-4); } #home-root.h7 .h7-l1 > .h7-det { padding-left: var(--sp-4); } #home-root.h7 .h7-l2 > .h7-det { padding-left: 48px; } #home-root.h7 .h7-l3 > .h7-det { padding-left: 44px; } #home-root.h7 .h7-det:empty { display: none; } /* The pending line under the plan's sub-objective (the walk's "No goals yet.") and the sample's own notes. */ #home-root.h7 .h7-note { color: var(--text-medium); margin: 0; } /* sheilaPromptCard: a column below sm (431), a centred row from sm, gap 3, the tint, 1px $purple.$500, radius 4, padding 4; the SheilaStarsIcon at 20px (the bg_sheila gradient through the stroked stars mask); the body2 text in $text.base; the sheila_secondary compact Button (20px, padding 0 12, radius 10, 12/16; bg the dawn 50 to purple 50 tint with the 1px $purple.$400 ring; hover $purple.$50; pressed the 100 tint). */ #home-root.h7 .h7-prompt { display: flex; flex-direction: row; align-items: center; gap: var(--sp-3); background: var(--bg-sheila-tint-50); border: 1px solid var(--purple-500); border-radius: 4px; padding: var(--sp-4); } @media (max-width: 430.98px) { #home-root.h7 .h7-prompt { flex-direction: column; align-items: flex-start; } } #home-root.h7 .h7-prompt-t { flex: 1; color: var(--text-base); margin: 0; } #home-root.h7 .h7-stars { display: inline-block; flex-shrink: 0; width: 20px; height: 20px; background: var(--bg-sheila); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='3.237 3.561 17.534 17.534'%3E%3Cpath d='M15.002%209.56445L15.1377%209.86426L15.4375%209.99902L17.8857%2011.0977L15.4355%2012.208L15.1367%2012.3428L15.002%2012.6416L13.8916%2015.0918L12.793%2012.6436L12.6582%2012.3438L12.3584%2012.208L9.90723%2011.0977L12.3555%209.99902L12.6572%209.86328L12.793%209.56152L13.8916%207.11328L15.002%209.56445Z' fill='none' stroke='black' stroke-width='1.73731'/%3E%3Cpath d='M8.17578%2015.0538L8.31055%2015.3556L8.6123%2015.4904L9.46387%2015.8722L8.6123%2016.255L8.31055%2016.3898L8.17578%2016.6915L7.79297%2017.5431L7.41113%2016.6915L7.27637%2016.3898L6.97461%2016.255L6.12207%2015.8722L6.97461%2015.4904L7.27637%2015.3556L7.41113%2015.0538L7.79297%2014.2013L8.17578%2015.0538Z' fill='none' stroke='black' stroke-width='1.73731'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='3.237 3.561 17.534 17.534'%3E%3Cpath d='M15.002%209.56445L15.1377%209.86426L15.4375%209.99902L17.8857%2011.0977L15.4355%2012.208L15.1367%2012.3428L15.002%2012.6416L13.8916%2015.0918L12.793%2012.6436L12.6582%2012.3438L12.3584%2012.208L9.90723%2011.0977L12.3555%209.99902L12.6572%209.86328L12.793%209.56152L13.8916%207.11328L15.002%209.56445Z' fill='none' stroke='black' stroke-width='1.73731'/%3E%3Cpath d='M8.17578%2015.0538L8.31055%2015.3556L8.6123%2015.4904L9.46387%2015.8722L8.6123%2016.255L8.31055%2016.3898L8.17578%2016.6915L7.79297%2017.5431L7.41113%2016.6915L7.27637%2016.3898L6.97461%2016.255L6.12207%2015.8722L6.97461%2015.4904L7.27637%2015.3556L7.41113%2015.0538L7.79297%2014.2013L8.17578%2015.0538Z' fill='none' stroke='black' stroke-width='1.73731'/%3E%3C/svg%3E") center / contain no-repeat; } #home-root.h7 .h7-btn-ss { position: relative; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; box-sizing: border-box; width: max-content; height: 20px; padding: 0 var(--sp-3); border: none; border-radius: 10px; background: linear-gradient(122deg, var(--dawn-50) 22.4%, var(--purple-50) 71.9%); box-shadow: 0 0 0 1px var(--purple-400); color: var(--earth-500); font-family: var(--ff-product-regular); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.02857em; text-transform: none; cursor: pointer; } #home-root.h7 .h7-btn-ss:hover, #home-root.h7 .h7-btn-ss:focus-visible { background: var(--purple-50); outline: none; } #home-root.h7 .h7-btn-ss:active { background: var(--bg-sheila-tint-100); } /* FilterMenu on NDS Menu: the Popover paper (background.paper, the inset 1px $solar.$700 ring, padding 3, radius 4, autoItemWidth), the group header (overline in $text.medium, padding 3 2, min-height 40), the divider between groups ($solar.$700, 10px above, 5px below), the items (padding 2, min-height 36, gap 2, body2 in $text.base; hover $functional hovered, active pressed; the selected item's $dawn.$500 tick in its own 24px column; "Clear filters" with CloseOutlined at 20px in a 24px column, disabled in $text.disabled). */ .h7-menu { position: fixed; z-index: 60; box-sizing: border-box; min-width: 200px; max-width: min(360px, calc(100vw - 32px)); max-height: min(60vh, 460px); overflow-y: auto; background: var(--white); box-shadow: inset 0 0 0 1px var(--solar-700); border-radius: 4px; padding: var(--sp-3); } .h7-menu .h7-mh { padding: var(--sp-3) var(--sp-2); min-height: 40px; box-sizing: border-box; color: var(--text-medium); } .h7-menu .h7-mdiv { border-top: 1px solid var(--solar-700); margin: 10px 0 5px; } .h7-menu .h7-mi { display: grid; grid-template-columns: 1fr; align-items: start; gap: var(--sp-2); width: 100%; box-sizing: border-box; min-height: 36px; padding: var(--sp-2); border: none; border-radius: 0; background: transparent; color: var(--text-base); text-align: left; cursor: pointer; font: inherit; white-space: normal; } .h7-menu .h7-mi:hover, .h7-menu .h7-mi:focus-visible { background: var(--fn-hovered); outline: none; } .h7-menu .h7-mi:active { background: var(--fn-pressed); } .h7-menu .h7-mi.h7-mi-sel { grid-template-columns: 1fr 24px; } .h7-menu .h7-mi.h7-mi-ic { grid-template-columns: 24px 1fr; } .h7-menu .h7-mi.h7-mi-ic .h7-svg { font-size: 20px; } .h7-menu .h7-mi-t { overflow-wrap: break-word; } .h7-menu .h7-mi-tick { display: grid; place-content: center; height: 20px; } .h7-menu .h7-mi-tick path { fill: var(--dawn-500); } .h7-menu .h7-mi:disabled { cursor: default; color: var(--text-disabled); background: transparent; } .h7-menu .h7-mi:disabled .h7-mi-t { color: var(--text-disabled); } /* Nothing matches the filters (home-dashboard.tsx filteredToEmpty): StaticCard (padding 5, $solar.$50, the divider border, radius 4) centring the NDS EmptyState at its defaults (a column, centred, gap 5; the 200 px default illustration; the subtitle2 title and the body2 message, centred, max 460 px). */ #home-root.h7 .h7-static { display: flex; justify-content: center; padding: var(--sp-5); background: var(--solar-50); border: 1px solid var(--divider); border-radius: 4px; } #home-root.h7 .h7-es { display: flex; flex-direction: column; align-items: center; gap: var(--sp-5); width: max-content; max-width: 100%; } #home-root.h7 .h7-es-img { display: block; flex-shrink: 0; width: 200px; height: 200px; } #home-root.h7 .h7-es-t, #home-root.h7 .h7-es-m { margin: 0; max-width: 460px; text-align: center; color: var(--text-base); } /* Phones (below sm 431), the replica's own rule, not the source's: the 48 and 44 px insets under levels 2 and 3 drop to 16 px and a step row puts its status lozenge under the text, so a step's title keeps a readable measure at 375 px. */ @media (max-width: 430.98px) { #home-root.h7 .h7-l2 > .h7-det, #home-root.h7 .h7-l3 > .h7-det { padding-left: var(--sp-4); } #home-root.h7 .h7-row { flex-wrap: wrap; row-gap: var(--sp-2); } #home-root.h7 .h7-row-m { flex: 1 1 100%; } } /* ==== v5.7 Home block (END) ==== */ /* v5.7.1 (4 Nov 2026): the Sheila AI pill carries the product's DrovaIcon at 20 px (the .v2-sav.sm 18 px rule used to win by order) */ .sheila-pill .v2-sav, .sheila-pill .v2-sav.sm { width: 20px; height: 20px; } /* v5.7.1 (4 Nov 2026, after the Sheila glyph was found to differ): the live element-by-element diff of Home against the product page. The Sheila AI pill is the product's IconButton color="sheila_secondary" (theme.ts): padding 6px 16px around a 20 px DrovaIcon and a button-type label (16/20, weight 500, letter-spacing 0.02857em); the lozenge roots carry the product's 0.15008px letter-spacing (the tally numbers inherit it; the labels keep the caption's 0.4px). */ .topbar .sheila-pill { padding: 0 var(--sp-4); } .sheila-pill .sp-pill-t { font-weight: 500; letter-spacing: 0.02857em; } #home-root.h7 .h7-loz { letter-spacing: 0.15008px; } /* v5.9 (4 Nov 2026): the top bar's actions sit 8 px apart, the product's header-layout GAP (universal/platform header-layout/constant.ts), not 16 */ .topbar .actions { gap: var(--sp-2); }