/* FIX_ULTRAMARATHON_PROC_PO_2026_06_19 - end Purchase Orders scoped CSS. */ /* FIX_ULTRAMARATHON_PROCUREMENT_2026_06_19 — end Procurement Command Centre scoped CSS. */ /* FIX_APPSHELL_COLLAPSE_S2A_2026_06_19 — the .crm-railnav per-item styling + label/title/status reveal-on-hover blocks + the #page-intelligence .crm-railnav-active active-state rules are DELETED (not suppressed). The 11 specialist surfaces now render the SHARED .vdd-qa-item markup via mountAppShell; the per-item presentation (item / icon / coming-dot / label-reveal / status-reveal / active-state) lives at the .viq-app-shell .vdd-qa-* block (L20057+) + the S2a vocabulary-extension CSS there (status/amber reveal + .vdd-qa-item-active). No element carries .crm-railnav-* anymore (grep-zero on class emission in any render fn). DELETE, not suppress (arc constraint). */ /* ════════════════════════════════════════════════════════════════════════════ FIX_WWK_LEGAL_S1_2026_06_10 — Legal & Compliance Command Centre (Overview) styles, scoped under #page-legal. Built TO design_samples/legal/legal_landing_command.html at ultra-HD fidelity (the founder sample is the spec). Literal hex values mirror the sample's :root tokens (the platform's own :root names differ; inlining the sample's exact palette preserves the sample aesthetic). ASCII-only comments throughout (a non-ASCII char silently drops the rule from the CSSOM — the established L18.8 lesson). ════════════════════════════════════════════════════════════════════════════ */ #page-legal .lg-head-row { display: flex; align-items: flex-end; gap: 16px; } #page-legal .lg-head-row .lg-when { font-size: 11.5px; color: #8A857D; padding-bottom: 2px; } #page-legal .lg-statusline { display: flex; align-items: center; gap: 10px; margin: 10px 0 18px; font-size: 13.5px; color: #C4BFB6; } #page-legal .lg-statusline .lg-dot { width: 10px; height: 10px; border-radius: 50%; background: #E8943A; box-shadow: 0 0 11px #E8943A; position: relative; flex: 0 0 auto; } #page-legal .lg-statusline .lg-fix { color: #E8943A; font-weight: 600; } #page-legal .lg-statusline .lg-posture { color: #8A857D; font-size: 12px; font-style: italic; } /* FIX_LEGAL_JURIS_CHIP_2026_06_11 — jurisdiction-awareness affordance (demo-only, render-only; COPY PENDING REVIEWER RATIFICATION first-cut). Subtle awareness row between statusline and KPI band; reuses the established Legal palette tokens (#F0EBE2 headline / #C4BFB6 body / #8A857D muted / #E8943A amber accent; dark panel surface). NOT a hero, NOT a KPI. No new colour introduced. */ #page-legal .lg-juris { margin: 0 0 16px; } #page-legal .lg-juris-chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px 5px 10px; border-radius: 999px; background: rgba(232,148,58,0.08); border: 1px solid rgba(232,148,58,0.32); font-size: 12.5px; font-weight: 600; color: #F0EBE2; letter-spacing: .01em; } #page-legal .lg-juris-chip .lg-juris-pin { color: #E8943A; font-size: 12.5px; line-height: 1; flex: 0 0 auto; } #page-legal .lg-juris-note { margin: 7px 0 0; font-size: 12px; line-height: 1.5; color: #8A857D; max-width: 760px; } /* KPI band */ #page-legal .lg-kpis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 13px; margin-bottom: 18px; } #page-legal .lg-kpi { position: relative; overflow: hidden; background: linear-gradient(165deg, #262320, #1f1c19); border: 1px solid rgba(255,255,255,0.07); border-radius: 14px; padding: 15px 16px 14px; box-shadow: 0 16px 34px -28px #000, inset 0 1px 0 rgba(255,255,255,0.05); transition: transform .2s cubic-bezier(0.4,0,0.2,1), box-shadow .2s cubic-bezier(0.4,0,0.2,1), border-color .2s cubic-bezier(0.4,0,0.2,1); } #page-legal .lg-kpi .lg-lbl { font-size: 9.5px; letter-spacing: 1.2px; text-transform: uppercase; color: #8A857D; font-weight: 700; margin-bottom: 7px; } #page-legal .lg-kpi .lg-val { font-family: 'Montserrat', sans-serif; font-size: 23px; font-weight: 800; color: #F0EBE2; line-height: 1; font-variant-numeric: tabular-nums; } #page-legal .lg-kpi .lg-sub { font-size: 11.5px; margin-top: 7px; color: #8A857D; display: flex; align-items: center; gap: 5px; } #page-legal .lg-kpi .lg-sub .lg-delta { font-weight: 700; } #page-legal .lg-kpi .lg-sub .lg-pos { color: #4CAF7D; } #page-legal .lg-kpi .lg-sub .lg-warn { color: #E8943A; } #page-legal .lg-kpi .lg-sub .lg-blue { color: #5B9BD5; } /* expand affordance chevron (S1 inert — visual fidelity only; click/hover wiring is S2) */ #page-legal .lg-kpi .lg-expand { position: absolute; right: 11px; bottom: 11px; width: 16px; height: 16px; opacity: .38; transition: opacity .2s cubic-bezier(0.4,0,0.2,1), transform .2s cubic-bezier(0.4,0,0.2,1); } #page-legal .lg-kpi:hover .lg-expand { opacity: .9; transform: scale(1.12); } #page-legal .lg-kpi .lg-hint-i { position: absolute; left: 16px; bottom: 11px; font-size: 8.5px; letter-spacing: .04em; color: #8A857D; opacity: 0; transition: opacity .2s cubic-bezier(0.4,0,0.2,1); font-weight: 600; white-space: nowrap; pointer-events: none; } #page-legal .lg-kpi:hover .lg-hint-i { opacity: .7; } /* layout: timeline hero + attention / risk-matrix tile */ #page-legal .lg-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 18px; } #page-legal .lg-grid-2 { display: grid; grid-template-columns: 1.5fr 1fr; gap: 18px; margin-top: 18px; } #page-legal .lg-panel { background: linear-gradient(170deg, #252220, #1e1b19); border: 1px solid rgba(255,255,255,0.07); border-radius: 16px; padding: 18px 20px; box-shadow: 0 22px 50px -36px #000, inset 0 1px 0 rgba(255,255,255,0.05); } #page-legal .lg-panel-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 3px; } #page-legal .lg-panel-h .lg-hint { font-size: 11px; color: #8A857D; } #page-legal .lg-panel-sub { font-size: 11.5px; color: #8A857D; margin: 2px 0 14px; } /* compliance timeline key visual */ #page-legal .lg-tl-wrap { position: relative; padding: 4px 2px 2px; } #page-legal #lg-tlSvg { width: 100%; height: 298px; display: block; } #page-legal .lg-tl-legend { display: flex; gap: 18px; margin-top: 12px; font-size: 10.5px; color: #8A857D; flex-wrap: wrap; } #page-legal .lg-tl-legend .lg-sw { width: 10px; height: 10px; border-radius: 3px; display: inline-block; } /* risk-matrix fold-in tile */ #page-legal .lg-matrix-wrap { position: relative; padding: 4px 2px 2px; } #page-legal #lg-matrixSvg { width: 100%; height: 240px; display: block; } #page-legal .lg-matrix-legend { display: flex; gap: 14px; margin-top: 10px; font-size: 10px; color: #8A857D; flex-wrap: wrap; } #page-legal .lg-matrix-legend .lg-sw { width: 10px; height: 10px; border-radius: 3px; display: inline-block; } /* needs-attention list */ #page-legal .lg-att-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } #page-legal .lg-att-head h3 .lg-glyph { width: 24px; height: 24px; border-radius: 8px; background: linear-gradient(150deg, rgba(224,85,85,0.24), rgba(232,148,58,0.12)); display: grid; place-items: center; box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); } #page-legal .lg-att-head .lg-count { font-family: 'Montserrat', sans-serif; font-size: 10.5px; font-weight: 700; color: #F0EBE2; background: rgba(232,148,58,0.16); border: 1px solid rgba(232,148,58,0.36); border-radius: 999px; padding: 3px 11px; letter-spacing: .03em; } #page-legal .lg-att-list { display: flex; flex-direction: column; gap: 9px; } #page-legal .lg-att { display: flex; align-items: center; gap: 12px; padding: 11px 13px; border-radius: 12px; background: rgba(255,255,255,0.018); border: 1px solid rgba(255,255,255,0.07); transition: .18s cubic-bezier(0.4,0,0.2,1); position: relative; overflow: hidden; } #page-legal .lg-att.lg-p1 { --lg-lvl: #E05555; border-color: rgba(224,85,85,0.36); background: linear-gradient(108deg, rgba(224,85,85,0.12), rgba(255,255,255,0.018) 46%); padding: 14px 15px; } #page-legal .lg-att.lg-amber { --lg-lvl: #E8943A; } #page-legal .lg-att.lg-red { --lg-lvl: #E05555; } #page-legal .lg-att.lg-blue { --lg-lvl: #5B9BD5; } /* FIX_DEMO_DEADLINE_CLOCK_2026_09_06 — fourth urgency band. Deeper than .lg-red because this surface had already spent plain red on "due within 30 days", so overdue must escalate WITHIN the red family to stay distinguishable from imminent. Colour is never the only signal: every row that takes this class also renders the literal word "Overdue". */ #page-legal .lg-att.lg-overdue { --lg-lvl: #B3282D; } #page-legal .lg-att .lg-rank { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 12px; color: #8A857D; width: 16px; text-align: center; flex-shrink: 0; z-index: 1; } #page-legal .lg-att.lg-p1 .lg-rank { font-size: 17px; color: #E05555; width: 20px; } #page-legal .lg-att .lg-ico { width: 32px; height: 32px; border-radius: 9px; flex: none; display: flex; align-items: center; justify-content: center; z-index: 1; } #page-legal .lg-att.lg-p1 .lg-ico { width: 40px; height: 40px; border-radius: 11px; box-shadow: 0 0 18px -4px rgba(224,85,85,0.45); } #page-legal .lg-att.lg-p1 .lg-ico svg { width: 20px; height: 20px; } #page-legal .lg-att .lg-ic-amber { background: rgba(232,148,58,0.14); } #page-legal .lg-att .lg-ic-gold { background: rgba(201,168,76,0.14); } #page-legal .lg-att .lg-ic-red { background: rgba(224,85,85,0.14); } #page-legal .lg-att .lg-ic-blue { background: rgba(91,155,213,0.14); } /* FIX_DEMO_DEADLINE_CLOCK_2026_09_06 — icon treatment for the overdue band (sibling of the three above). */ #page-legal .lg-att .lg-ic-overdue { background: rgba(179,40,45,0.18); } #page-legal .lg-att-body { flex: 1; min-width: 0; z-index: 1; } #page-legal .lg-att-top { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; } #page-legal .lg-att-top .lg-tt { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 12.5px; color: #F0EBE2; } #page-legal .lg-att.lg-p1 .lg-att-top .lg-tt { font-size: 14.5px; } #page-legal .lg-att-top .lg-amt { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 12.5px; } #page-legal .lg-att .lg-desc { font-size: 11.5px; color: #8A857D; margin-top: 3px; line-height: 1.4; } #page-legal .lg-att.lg-p1 .lg-desc { font-size: 12px; color: #C4BFB6; } #page-legal .lg-footnote { font-size: 10px; color: #8A857D; margin-top: 18px; text-align: center; opacity: .7; } /* FIX_LEGAL_INSURANCE_COVERAGE_2026_08_18 — page-scoped vocabulary for the Legal Insurance & Coverage surface. AUTHORED because the classes the first cut borrowed were INERT here: .lg-lic*, .lg-stat-row and .lg-sr-* exist ONLY under '.lg-popover' (which mounts at BODY level, so a #page-legal-hosted surface never has that ancestor), .lg-hint only under '#page-legal .lg-panel-h', and .add-pol only under '#page-risk'. Every one of them mounted with a real rect and ZERO declared properties applying — "Coverage on file" was a styled-looking shell. PROVING A RULE EXISTS DOES NOT PROVE IT APPLIES IN THE ANCESTOR CONTEXT YOU EMIT INTO; only a per-property render measurement settles it, and a non-zero rect proves mounting, not styling. Named 'lg-ins-*' rather than re-scoping the shared names, so these can never collide with the popover or Risk vocabulary. Treatment mirrors those originals so the contexts read consistently. */ #page-legal .lg-ins-list { display: flex; flex-direction: column; gap: 9px; margin: 2px 0 4px; } #page-legal .lg-ins-card { padding: 11px 13px; border-radius: 10px; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.07); } #page-legal .lg-ins-card .lg-ins-name { display: flex; align-items: center; gap: 9px; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 13px; color: #F0EBE2; margin-bottom: 4px; } #page-legal .lg-ins-card .lg-ins-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: #C9A84C; } #page-legal .lg-ins-row { display: flex; align-items: baseline; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.07); font-size: 12px; } #page-legal .lg-ins-row:last-of-type { border-bottom: none; } #page-legal .lg-ins-row .lg-ins-l { color: #8A857D; } #page-legal .lg-ins-row .lg-ins-v { font-family: 'Montserrat', sans-serif; font-weight: 700; color: #F0EBE2; font-size: 12.5px; } #page-legal .lg-ins-row .lg-ins-v.lg-ins-warn { color: #E8943A; } #page-legal .lg-ins-hint { font-size: 11px; color: #8A857D; margin-top: 10px; line-height: 1.5; } #page-legal .lg-ins-add { display: inline-flex; align-items: center; gap: 7px; background: transparent; border: 1px dashed rgba(201,168,76,0.4); color: #C9A84C; font-size: 12px; font-weight: 600; padding: 9px 14px; border-radius: 9px; cursor: pointer; margin-top: 14px; font-family: 'Montserrat', sans-serif; transition: background .15s, border-color .15s; } @media (max-width: 920px) { #page-legal .lg-kpis { grid-template-columns: repeat(3, 1fr); } #page-legal .lg-grid, #page-legal .lg-grid-2 { grid-template-columns: 1fr; } } #page-legal .lg-kpi.lg-pop-open { border-color: rgba(201,168,76,0.32); box-shadow: 0 22px 44px -26px #000, 0 0 0 1px rgba(201,168,76,0.22), 0 0 30px -10px rgba(201,168,76,0.5); } /* FIX_WAIVERS_UI_S1_2026_06_12 - Waivers tool home (tracking header + three fulfilment paths + audit flow + classify-correct) and the lg-* report shell that wraps the da-* report. Built TO the legal Command Centre aesthetic; reuses the established Legal palette tokens (#F0EBE2 headline / #C4BFB6 body / #8A857D muted / #C9A84C gold / #E8943A amber / #4CAF7D green / #E05555 red; dark panel surface). Zero new design tokens. ASCII-ONLY in this comment block (a non-ASCII char silently drops a rule from the CSSOM - the established L18.8 / L5736 lesson). */ /* 3a tracking header - awareness counts band + waiver-related requirement rows */ #page-legal .lg-wv-track { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; margin: 4px 0 16px; } #page-legal .lg-wv-track-empty { display: block; } #page-legal .lg-wv-tile { position: relative; overflow: hidden; background: linear-gradient(165deg, #262320, #1f1c19); border: 1px solid rgba(255,255,255,0.07); border-radius: 14px; padding: 15px 16px 14px; box-shadow: 0 16px 34px -28px #000, inset 0 1px 0 rgba(255,255,255,0.05); } #page-legal .lg-wv-tile-lbl { font-size: 9.5px; letter-spacing: 1.2px; text-transform: uppercase; color: #8A857D; font-weight: 700; margin-bottom: 7px; } #page-legal .lg-wv-tile-val { font-family: 'Montserrat', sans-serif; font-size: 23px; font-weight: 800; color: #F0EBE2; line-height: 1; font-variant-numeric: tabular-nums; } #page-legal .lg-wv-tile-sub { font-size: 11.5px; margin-top: 7px; color: #8A857D; } #page-legal .lg-wv-reqlist { display: flex; flex-direction: column; gap: 8px; margin: 0 0 18px; } #page-legal .lg-wv-req { display: flex; align-items: center; gap: 11px; padding: 11px 14px; border-radius: 12px; background: rgba(255,255,255,0.018); border: 1px solid rgba(255,255,255,0.07); } #page-legal .lg-wv-req-glyph { color: #C9A84C; font-size: 13px; line-height: 1; flex: 0 0 auto; } #page-legal .lg-wv-req-lbl { font-size: 12.5px; color: #C4BFB6; } #page-legal .lg-wv-req-sub { color: #8A857D; opacity: .85; } /* 3b three fulfilment paths (action cards) */ #page-legal .lg-wv-paths { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 20px; } #page-legal .lg-wv-path-primary { border-color: rgba(201,168,76,0.34); background: linear-gradient(170deg, #2b2620, #211d18); } #page-legal .lg-wv-path-ic { font-size: 22px; line-height: 1; } #page-legal .lg-wv-path-t { font-family: 'Montserrat', sans-serif; font-size: 14.5px; font-weight: 800; color: #F0EBE2; letter-spacing: .2px; } #page-legal .lg-wv-path-d { font-size: 12px; color: #8A857D; line-height: 1.5; } #page-legal .lg-wv-path-go { margin-top: auto; padding-top: 4px; font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 700; color: #C9A84C; } #page-legal .lg-wv-path-primary .lg-wv-path-go { color: #E0C878; } #page-legal .lg-wv-path-go.lg-wv-soon { color: #8A857D; } /* 3b stub panels (generate / mark-on-file) */ #page-legal .lg-wv-stub { margin-top: 4px; } #page-legal .lg-wv-stub-h { font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 800; color: #F0EBE2; margin-bottom: 8px; } #page-legal .lg-wv-stub-b { font-size: 12.5px; color: #8A857D; line-height: 1.6; max-width: 720px; } /* ============================================================ FIX_LEGAL_GENERATOR_2026_07_01 — Waivers path 2 "Generate a compliant version" generator flow. Adapts design_samples/legal/legal_generator.html to the shipped #page-legal idiom (scoped .lg-gen-* classes). COUNSEL-GATE: draft-only, watermarked, for-your-lawyer-to-review; never a verdict/assurance of legal sufficiency. ============================================================ */ #page-legal .lg-gen { margin-top: 4px; } /* counsel-gate status chips */ #page-legal .lg-gen-chips { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin: 0 0 16px; } #page-legal .lg-gen-chip { display: inline-flex; align-items: center; gap: 7px; font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .02em; padding: 6px 12px; border-radius: 999px; border: 1px solid; } #page-legal .lg-gen-chip-draft { color: #16140F; background: linear-gradient(180deg, #E8943A, #c9772a); border-color: transparent; box-shadow: 0 4px 14px -6px rgba(232,148,58,0.6); } #page-legal .lg-gen-chip-lawyer { color: #C9A84C; background: rgba(201,168,76,0.12); border-color: rgba(201,168,76,0.36); } #page-legal .lg-gen-chip-notadvice { color: #E05555; background: rgba(224,85,85,0.10); border-color: rgba(224,85,85,0.32); } /* loud counsel-gate banner (the spine) */ #page-legal .lg-gen-banner { display: flex; align-items: flex-start; gap: 13px; margin: 0 0 20px; padding: 14px 17px; border-radius: 13px; background: linear-gradient(120deg, rgba(232,148,58,0.11), rgba(255,255,255,0.012) 62%); border: 1px solid rgba(232,148,58,0.34); } #page-legal .lg-gen-banner-ic { width: 32px; height: 32px; border-radius: 9px; flex: none; display: grid; place-items: center; background: rgba(232,148,58,0.16); font-size: 17px; } #page-legal .lg-gen-banner-t { font-size: 12.5px; color: #C4BFB6; line-height: 1.55; } #page-legal .lg-gen-banner-t .u { color: #E8943A; font-weight: 700; } /* three-path flow stepper */ #page-legal .lg-gen-flow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0 0 18px; } #page-legal .lg-gen-fstep { display: inline-flex; align-items: center; gap: 9px; padding: 9px 14px; border-radius: 11px; border: 1px solid rgba(255,255,255,0.07); background: rgba(255,255,255,0.018); } #page-legal .lg-gen-fn { width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 10px; flex: none; background: rgba(255,255,255,0.06); color: #8A857D; } #page-legal .lg-gen-ft { font-family: 'Montserrat', sans-serif; font-size: 11.5px; font-weight: 700; color: #8A857D; } #page-legal .lg-gen-fmeta { font-size: 9.5px; color: #8A857D; } #page-legal .lg-gen-fstep.done { border-color: rgba(76,175,125,0.34); background: rgba(76,175,125,0.07); } #page-legal .lg-gen-fstep.done .lg-gen-fn { background: rgba(76,175,125,0.18); color: #4CAF7D; } #page-legal .lg-gen-fstep.done .lg-gen-ft { color: #4CAF7D; } #page-legal .lg-gen-fstep.here { border-color: rgba(232,148,58,0.4); background: rgba(232,148,58,0.09); box-shadow: 0 4px 16px -8px rgba(232,148,58,0.5); } #page-legal .lg-gen-fstep.here .lg-gen-fn { background: rgba(232,148,58,0.2); color: #E8943A; } #page-legal .lg-gen-fstep.here .lg-gen-ft { color: #F0EBE2; } #page-legal .lg-gen-farrow { color: #8A857D; opacity: .5; font-size: 13px; } /* two-column: input+output | change rail */ #page-legal .lg-gen-grid { display: grid; grid-template-columns: 1fr 340px; gap: 18px; align-items: start; } @media (max-width: 1180px) { #page-legal .lg-gen-grid { grid-template-columns: 1fr; } } /* source doc chip */ #page-legal .lg-gen-src { display: flex; align-items: center; gap: 13px; padding: 13px 15px; border-radius: 12px; background: rgba(91,155,213,0.05); border: 1px solid rgba(91,155,213,0.22); margin-bottom: 16px; } #page-legal .lg-gen-src-ic { width: 38px; height: 38px; border-radius: 10px; flex: none; display: grid; place-items: center; background: rgba(91,155,213,0.13); font-size: 19px; } #page-legal .lg-gen-src-body { min-width: 0; flex: 1; } #page-legal .lg-gen-src-name { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 13px; color: #F0EBE2; } #page-legal .lg-gen-src-meta { font-size: 11px; color: #8A857D; margin-top: 3px; } #page-legal .lg-gen-src-tag { font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #5B9BD5; background: rgba(91,155,213,0.12); border: 1px solid rgba(91,155,213,0.3); border-radius: 999px; padding: 4px 10px; font-family: 'Montserrat', sans-serif; flex: none; } /* audit gap rows */ #page-legal .lg-gen-gaps-h { display: flex; align-items: center; gap: 9px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .12em; color: #8A857D; font-weight: 700; margin: 4px 0 10px; } #page-legal .lg-gen-gaps-h .gc { color: #E8943A; } #page-legal .lg-gen-gaps { display: flex; flex-direction: column; gap: 9px; } #page-legal .lg-gen-gap { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: flex-start; padding: 11px 13px; border-radius: 11px; background: rgba(255,255,255,0.018); border: 1px solid rgba(255,255,255,0.07); position: relative; overflow: hidden; } #page-legal .lg-gen-gap-sev { width: 26px; height: 26px; border-radius: 8px; flex: none; display: grid; place-items: center; font-size: 13px; } #page-legal .lg-gen-gap.sev-high { --gsv: #E05555; } #page-legal .lg-gen-gap.sev-high .lg-gen-gap-sev { background: rgba(224,85,85,0.14); } #page-legal .lg-gen-gap.sev-med { --gsv: #E8943A; } #page-legal .lg-gen-gap.sev-med .lg-gen-gap-sev { background: rgba(232,148,58,0.14); } #page-legal .lg-gen-gap.sev-low { --gsv: #5B9BD5; } #page-legal .lg-gen-gap.sev-low .lg-gen-gap-sev { background: rgba(91,155,213,0.14); } #page-legal .lg-gen-gap-body { min-width: 0; } #page-legal .lg-gen-gap-title { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 12.5px; color: #F0EBE2; } #page-legal .lg-gen-gap-desc { font-size: 11.5px; color: #8A857D; margin-top: 3px; line-height: 1.5; } #page-legal .lg-gen-gap-addr { font-size: 10.5px; color: #C9A84C; margin-top: 6px; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; } #page-legal .lg-gen-gap-sevlbl { font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; font-family: 'Montserrat', sans-serif; padding: 3px 8px; border-radius: 999px; flex: none; align-self: flex-start; } #page-legal .lg-gen-gap.sev-high .lg-gen-gap-sevlbl { color: #E05555; background: rgba(224,85,85,0.12); border: 1px solid rgba(224,85,85,0.3); } #page-legal .lg-gen-gap.sev-med .lg-gen-gap-sevlbl { color: #E8943A; background: rgba(232,148,58,0.12); border: 1px solid rgba(232,148,58,0.3); } #page-legal .lg-gen-gap.sev-low .lg-gen-gap-sevlbl { color: #5B9BD5; background: rgba(91,155,213,0.12); border: 1px solid rgba(91,155,213,0.3); } /* the generated DRAFT document (the hero) */ #page-legal .lg-gen-doc { background: linear-gradient(170deg, #252220, #1e1b19); border: 1px solid rgba(232,148,58,0.28); border-radius: 16px; padding: 18px 20px 20px; box-shadow: 0 22px 50px -36px #000, 0 0 0 1px rgba(232,148,58,0.06); margin-bottom: 18px; position: relative; overflow: hidden; } #page-legal .lg-gen-doc-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; } #page-legal .lg-gen-doc-title { font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 700; color: #F0EBE2; display: flex; align-items: center; gap: 9px; } #page-legal .lg-gen-step { width: 22px; height: 22px; border-radius: 7px; background: rgba(201,168,76,0.14); border: 1px solid rgba(201,168,76,0.32); color: #C9A84C; display: grid; place-items: center; font-size: 11px; font-weight: 800; font-family: 'Montserrat', sans-serif; } #page-legal .lg-gen-doc-spacer { flex: 1; } #page-legal .lg-gen-tog { display: inline-flex; border: 1px solid rgba(255,255,255,0.07); border-radius: 9px; overflow: hidden; } #page-legal .lg-gen-tog button { font-family: 'Montserrat', sans-serif; font-size: 10.5px; font-weight: 700; color: #8A857D; background: transparent; border: none; padding: 6px 12px; cursor: pointer; transition: .15s; } /* doc metabar */ #page-legal .lg-gen-doc-meta { display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 13px; font-size: 11px; } #page-legal .lg-gen-dm { display: flex; flex-direction: column; gap: 2px; } #page-legal .lg-gen-dl { font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: #8A857D; font-weight: 700; } #page-legal .lg-gen-dv { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 12px; color: #F0EBE2; } /* the "paper" — watermarked draft */ #page-legal .lg-gen-paper-wrap { position: relative; border-radius: 12px; overflow: hidden; border: 1px solid rgba(255,255,255,0.13); } #page-legal .lg-gen-paper { position: relative; background: linear-gradient(180deg, #f4f0e6, #efe9dc); color: #2a2620; padding: 34px 40px 40px; font-family: 'Open Sans', serif; font-size: 12.5px; line-height: 1.7; max-height: 560px; overflow-y: auto; } #page-legal .lg-gen-wm { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; } #page-legal .lg-gen-pp { position: relative; z-index: 1; } #page-legal .lg-gen-ribbon { display: inline-flex; align-items: center; gap: 7px; font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 10px; letter-spacing: .14em; color: #a5341f; background: rgba(200,60,40,0.10); border: 1px solid rgba(200,60,40,0.35); border-radius: 6px; padding: 5px 11px; margin-bottom: 16px; } #page-legal .lg-gen-doc-t { font-family: 'Montserrat', sans-serif; font-size: 17px; color: #241f18; text-align: center; letter-spacing: .5px; margin-bottom: 3px; font-weight: 700; } #page-legal .lg-gen-doc-org { text-align: center; font-size: 11px; color: #6b6255; margin-bottom: 2px; letter-spacing: .03em; } #page-legal .lg-gen-doc-loc { text-align: center; font-size: 10.5px; color: #8a8072; margin-bottom: 22px; } #page-legal .lg-gen-doc-rule { height: 1px; background: linear-gradient(90deg, transparent, rgba(0,0,0,0.18), transparent); margin: 18px 0; } #page-legal .lg-gen-cl { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 12.5px; color: #241f18; margin: 18px 0 6px; letter-spacing: .02em; } #page-legal .lg-gen-cl .n { color: #9c7f33; } #page-legal .lg-gen-sig { margin-top: 26px; display: grid; grid-template-columns: 1fr 1fr; gap: 22px 30px; } #page-legal .lg-gen-sig .sl { border-top: 1px solid rgba(0,0,0,0.4); padding-top: 6px; font-size: 10.5px; color: #6b6255; } /* inserted / amended clause highlight (tracked-changes feel) */ #page-legal .lg-gen-ins { background: rgba(76,175,125,0.16); border-left: 2px solid rgba(60,150,100,0.65); border-radius: 0 4px 4px 0; padding: 2px 8px 2px 10px; box-shadow: inset 0 0 0 1px rgba(60,150,100,0.12); position: relative; } #page-legal .lg-gen-ins-tag { position: absolute; top: -9px; right: 6px; font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 8px; letter-spacing: .08em; color: #2f7a54; background: #e7f2ea; border: 1px solid rgba(60,150,100,0.4); border-radius: 5px; padding: 1px 6px; } #page-legal .lg-gen-amend { background: rgba(232,148,58,0.15); border-bottom: 2px solid rgba(200,120,40,0.55); border-radius: 3px; padding: 0 3px; } #page-legal .lg-gen-mn { margin: 6px 0 14px; padding: 9px 12px; border-radius: 9px; background: #e9e2d2; border: 1px dashed rgba(150,120,50,0.5); font-family: 'Open Sans', sans-serif; font-size: 10.5px; color: #5f5647; line-height: 1.5; } #page-legal .lg-gen-mn-h { display: inline-flex; align-items: center; gap: 6px; font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 8.5px; letter-spacing: .09em; text-transform: uppercase; color: #9c7f33; margin-bottom: 4px; } #page-legal .lg-gen-paper-foot { margin-top: 24px; padding-top: 14px; border-top: 1px dashed rgba(0,0,0,0.22); font-size: 10px; color: #8a8072; line-height: 1.55; font-style: italic; } /* clean view hides margin notes + tracked-change styling */ #page-legal .lg-gen-paper.clean .lg-gen-mn { display: none; } #page-legal .lg-gen-paper.clean .lg-gen-ins-tag { display: none; } #page-legal .lg-gen-paper.clean .lg-gen-ins { background: transparent; box-shadow: none; border-left: none; padding: 0; } #page-legal .lg-gen-paper.clean .lg-gen-amend { background: transparent; border-bottom: none; padding: 0; } /* change rail (right column) */ #page-legal .lg-gen-rail { position: sticky; top: 0; } #page-legal .lg-gen-rail-panel { background: linear-gradient(170deg, #252220, #1e1b19); border: 1px solid rgba(255,255,255,0.07); border-radius: 16px; padding: 16px 17px; box-shadow: 0 22px 50px -36px #000; margin-bottom: 18px; } #page-legal .lg-gen-rail-sub { font-size: 10.5px; color: #8A857D; margin-bottom: 13px; line-height: 1.5; } #page-legal .lg-gen-chg-list { display: flex; flex-direction: column; gap: 9px; } #page-legal .lg-gen-chg { padding: 11px 12px; border-radius: 11px; background: rgba(255,255,255,0.018); border: 1px solid rgba(255,255,255,0.07); position: relative; } #page-legal .lg-gen-chg.type-add { --cc: #4CAF7D; } #page-legal .lg-gen-chg.type-amend { --cc: #E8943A; } #page-legal .lg-gen-chg-top { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; } #page-legal .lg-gen-chg-badge { font-size: 8.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; font-family: 'Montserrat', sans-serif; padding: 2px 7px; border-radius: 5px; flex: none; } #page-legal .lg-gen-chg.type-add .lg-gen-chg-badge { color: #2f7a54; background: rgba(76,175,125,0.16); border: 1px solid rgba(76,175,125,0.34); } #page-legal .lg-gen-chg.type-amend .lg-gen-chg-badge { color: #E8943A; background: rgba(232,148,58,0.14); border: 1px solid rgba(232,148,58,0.32); } #page-legal .lg-gen-chg-t { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 12px; color: #F0EBE2; line-height: 1.3; } #page-legal .lg-gen-chg-why { font-size: 11px; color: #8A857D; line-height: 1.5; } #page-legal .lg-gen-chg-src { font-size: 9.5px; color: #8A857D; margin-top: 7px; display: flex; align-items: flex-start; gap: 6px; border-top: 1px solid rgba(255,255,255,0.07); padding-top: 7px; font-style: italic; } #page-legal .lg-gen-rail-note { padding: 12px 13px; border-radius: 12px; background: rgba(224,85,85,0.06); border: 1px solid rgba(224,85,85,0.24); font-size: 11px; color: #C4BFB6; line-height: 1.55; } #page-legal .lg-gen-rail-note .rn-h { display: flex; align-items: center; gap: 8px; font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: #E05555; margin-bottom: 7px; } /* actions */ #page-legal .lg-gen-actions { background: linear-gradient(170deg, #252220, #1e1b19); border: 1px solid rgba(255,255,255,0.07); border-radius: 16px; padding: 18px 20px; box-shadow: 0 22px 50px -36px #000; margin-bottom: 18px; } #page-legal .lg-gen-ap-note { display: flex; align-items: flex-start; gap: 11px; padding: 12px 14px; border-radius: 11px; background: rgba(201,168,76,0.08); border: 1px solid rgba(201,168,76,0.28); margin-bottom: 15px; font-size: 12px; color: #C4BFB6; line-height: 1.55; } #page-legal .lg-gen-btn-row { display: flex; gap: 11px; flex-wrap: wrap; align-items: center; } #page-legal .lg-gen-btn { font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 700; cursor: pointer; border-radius: 10px; padding: 11px 18px; border: 1px solid rgba(255,255,255,0.13); background: rgba(255,255,255,0.04); color: #C4BFB6; transition: all .16s; display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; } #page-legal .lg-gen-btn.ghost { color: #8A857D; border-style: dashed; } /* seam to mark-on-file */ #page-legal .lg-gen-seam { display: flex; align-items: center; gap: 13px; padding: 13px 16px; border-radius: 13px; background: rgba(91,155,213,0.05); border: 1px solid rgba(91,155,213,0.22); margin-bottom: 18px; } #page-legal .lg-gen-seam-ic { width: 30px; height: 30px; border-radius: 9px; flex: none; display: grid; place-items: center; background: rgba(91,155,213,0.14); font-size: 15px; } #page-legal .lg-gen-seam-t { font-size: 12px; color: #C4BFB6; line-height: 1.5; flex: 1; } #page-legal .lg-gen-seam-go { font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 700; color: #5B9BD5; cursor: pointer; white-space: nowrap; } /* loud footer disclaimer */ #page-legal .lg-gen-footer-disc { margin: 22px 0 6px; padding: 16px 20px; border-radius: 14px; background: linear-gradient(120deg, rgba(224,85,85,0.07), rgba(232,148,58,0.05)); border: 1px solid rgba(224,85,85,0.24); display: flex; gap: 14px; align-items: flex-start; } #page-legal .lg-gen-footer-disc-ic { width: 34px; height: 34px; border-radius: 10px; flex: none; display: grid; place-items: center; background: rgba(224,85,85,0.13); font-size: 18px; } #page-legal .lg-gen-footer-disc-t { font-size: 12px; color: #C4BFB6; line-height: 1.6; } #page-legal .lg-gen-footer-disc-t .u { color: #E8943A; font-weight: 700; } /* honest-empty state (no audit to remediate) */ #page-legal .lg-gen-empty { text-align: center; padding: 40px 30px; } #page-legal .lg-gen-empty-ic { width: 56px; height: 56px; border-radius: 15px; margin: 0 auto 16px; display: grid; place-items: center; background: rgba(91,155,213,0.1); border: 1px solid rgba(91,155,213,0.24); font-size: 26px; } /* 3c audit flow - dropzone + paste + actions */ #page-legal .lg-wv-flow { margin-top: 4px; } #page-legal .lg-wv-audit-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; } #page-legal .lg-da-notlegal { font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; color: #8A857D; font-weight: 700; } #page-legal .lg-wv-audit-sub { font-size: 12px; color: #8A857D; line-height: 1.5; margin-bottom: 16px; max-width: 760px; } #page-legal .lg-wv-drop { border: 1.5px dashed rgba(201,168,76,0.32); border-radius: 14px; padding: 26px 20px; text-align: center; background: rgba(201,168,76,0.03); cursor: pointer; transition: border-color .18s, background .18s; } #page-legal .lg-wv-drop:hover, #page-legal .lg-wv-drop:focus-visible { border-color: rgba(201,168,76,0.55); background: rgba(201,168,76,0.06); outline: none; } #page-legal .lg-wv-drop-over { border-color: #C9A84C; background: rgba(201,168,76,0.10); } #page-legal .lg-wv-drop-ic { font-size: 30px; line-height: 1; margin-bottom: 10px; } #page-legal .lg-wv-drop-t { font-size: 13px; color: #C4BFB6; } #page-legal .lg-wv-drop-link { color: #C9A84C; font-weight: 700; cursor: pointer; } #page-legal .lg-wv-drop-sub { font-size: 11px; color: #8A857D; margin-top: 6px; } #page-legal .lg-wv-or { text-align: center; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: #8A857D; margin: 14px 0 10px; } #page-legal .lg-wv-paste { width: 100%; min-height: 150px; resize: vertical; box-sizing: border-box; background: #1A1916; color: #E8E3DA; border: 1px solid rgba(255,255,255,0.10); border-radius: 12px; padding: 13px 15px; font-family: 'Open Sans', sans-serif; font-size: 12.5px; line-height: 1.55; } #page-legal .lg-wv-paste:focus { outline: none; border-color: rgba(201,168,76,0.45); } #page-legal .lg-wv-audit-actions { display: flex; align-items: center; gap: 14px; margin-top: 14px; } #page-legal .lg-wv-btn { font-family: 'Montserrat', sans-serif; font-size: 12.5px; font-weight: 700; cursor: pointer; border-radius: 10px; padding: 11px 20px; border: 1px solid rgba(255,255,255,0.13); background: rgba(255,255,255,0.04); color: #C4BFB6; transition: transform .16s, box-shadow .16s, border-color .16s; } #page-legal .lg-wv-btn-primary { color: #16140F; border: none; background: linear-gradient(180deg, #C9A84C, #9c7f33); box-shadow: 0 8px 22px -8px rgba(201,168,76,0.55), inset 0 1px 0 rgba(255,255,255,0.3); } /* FIX_LEGAL_WAIVER_SAVE_GUARD_2026_09_08 — honest-disable look for the mark-on-file save control. Mirrors #page-legal .cag-write-locked (agreements) in shape; a page-scoped class rather than a reuse of that one, because a cag-prefixed name on a waiver control would misdescribe it. */ #page-legal .lg-wv-write-locked { opacity: .5; cursor: not-allowed; pointer-events: none; filter: grayscale(.5); } #page-legal .lg-wv-status { font-size: 12px; color: #8A857D; } #page-legal .lg-wv-status-busy { color: #C9A84C; } #page-legal .lg-wv-status-warn { color: #E8943A; } #page-legal .lg-wv-result { margin-top: 18px; } /* classify-correct step */ #page-legal .lg-wv-classify { margin-bottom: 4px; } #page-legal .lg-wv-classify-low { border-color: rgba(232,148,58,0.5); box-shadow: 0 22px 50px -36px #000, 0 0 0 1px rgba(232,148,58,0.22), inset 0 1px 0 rgba(255,255,255,0.05); } #page-legal .lg-wv-classify-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; } #page-legal .lg-wv-classify-method { font-size: 10.5px; letter-spacing: .03em; text-transform: uppercase; color: #8A857D; font-weight: 700; } #page-legal .lg-wv-classify-sub { font-size: 12px; color: #8A857D; line-height: 1.5; margin-bottom: 16px; max-width: 720px; } #page-legal .lg-wv-classify-warn { font-size: 12.5px; color: #F4D8A8; line-height: 1.5; margin-bottom: 16px; padding: 11px 14px; border-radius: 10px; background: rgba(232,148,58,0.10); border: 1px solid rgba(232,148,58,0.32); } #page-legal .lg-wv-classify-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 18px; } #page-legal .lg-wv-cl-field { display: flex; flex-direction: column; gap: 6px; } #page-legal .lg-wv-cl-label { font-size: 10px; letter-spacing: .8px; text-transform: uppercase; color: #8A857D; font-weight: 700; } #page-legal .lg-wv-cl-select { background: #1A1916; color: #E8E3DA; border: 1px solid rgba(255,255,255,0.12); border-radius: 10px; padding: 9px 11px; font-family: 'Open Sans', sans-serif; font-size: 12.5px; cursor: pointer; } #page-legal .lg-wv-cl-select:focus { outline: none; border-color: rgba(201,168,76,0.45); } #page-legal .lg-wv-classify-actions { display: flex; } /* FIX_ORPHAN_CSS_FAMILIES_2026_07_29 -- the waivers mark-on-file panel. ASCII-only comment (a non-ASCII char silently drops the following rule from the CSSOM). All 16 classes emitted by __waiversMarkOnFileStub had ZERO rules, so the whole panel rendered as unstyled stacked divs. Same sibling-left-behind shape as the .ph-when gap patched by FIX_LEGAL_REDO_CSS_2026_07_24. PROVENANCE IS MIXED and must stay legible to the next reader: SAMPLE-ATTESTED from design_samples/legal/waivers.html -- the sub (L159 .panel-sub), the form (L259 .mof-form), the list (L260 .mof-list), the label (L210 .fld-lbl) and the field rules (L211-L216 .fld and textarea.fld, including placeholder and focus states). NEAREST-SIBLING, NOT SAMPLE-ATTESTED -- the header, the actions row, the list header and ALL SIX row classes. That sample renders only the honest-empty state: it never draws a populated on-file row, so it specifies 5 of the 16 classes and says nothing about the rest. The row block is modelled on the shipped #page-legal .lg-wv-req family (same icon plus label plus sub shape, same block), the header on .lg-panel-h, the list header on .lg-wv-tile-lbl, the actions row on .lg-wv-classify-actions directly above. Its one deviation from .lg-wv-req is align-items flex-start rather than center, because this row stacks title, note and timestamp where .lg-wv-req holds a single line. Sample custom properties are resolved to the literals this block already uses, and the input chrome follows this block's own .lg-wv-cl-select convention rather than the sample's, so no var() token this block does not define is introduced. NOT RESTYLED, already shipped and out of scope: .lg-panel, .fm-state (the empty branch), .lg-wv-status, .lg-da-notlegal, .lg-wv-btn. */ #page-legal .lg-wv-mof { margin-top: 14px; } #page-legal .lg-wv-mof-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 3px; } #page-legal .lg-wv-mof-sub { font-size: 11.5px; color: #8A857D; line-height: 1.45; margin: 2px 0 16px; } #page-legal .lg-wv-mof-form { margin-top: 2px; } #page-legal .lg-wv-mof-lbl { display: block; font-size: 11px; font-weight: 600; color: #8A857D; letter-spacing: .02em; margin: 0 0 7px; } #page-legal .lg-wv-mof-input, #page-legal .lg-wv-mof-note { width: 100%; box-sizing: border-box; background: #1A1916; color: #E8E3DA; border: 1px solid rgba(255,255,255,0.12); border-radius: 10px; padding: 9px 11px; font-family: 'Open Sans', sans-serif; font-size: 12.5px; margin-bottom: 14px; transition: border-color .16s ease; } #page-legal .lg-wv-mof-input::placeholder, #page-legal .lg-wv-mof-note::placeholder { color: #6E6961; } #page-legal .lg-wv-mof-input:focus, #page-legal .lg-wv-mof-note:focus { outline: none; border-color: rgba(201,168,76,0.45); } #page-legal .lg-wv-mof-input:focus-visible, #page-legal .lg-wv-mof-note:focus-visible { outline: 2px solid #C9A84C; outline-offset: 1px; } #page-legal .lg-wv-mof-note { resize: vertical; min-height: 120px; line-height: 1.55; display: block; } #page-legal .lg-wv-mof-actions { display: flex; align-items: center; gap: 12px; } #page-legal .lg-wv-mof-list { margin-top: 20px; } #page-legal .lg-wv-mof-list-h { font-size: 9.5px; letter-spacing: 1.2px; text-transform: uppercase; color: #8A857D; font-weight: 700; margin-bottom: 7px; } #page-legal .lg-wv-mof-row { display: flex; align-items: flex-start; gap: 11px; padding: 11px 14px; border-radius: 12px; background: rgba(255,255,255,0.018); border: 1px solid rgba(255,255,255,0.07); margin-bottom: 8px; } #page-legal .lg-wv-mof-row-ic { color: #C9A84C; font-size: 13px; line-height: 1.5; flex: 0 0 auto; } #page-legal .lg-wv-mof-row-b { flex: 1 1 auto; min-width: 0; } #page-legal .lg-wv-mof-row-t { font-size: 12.5px; color: #C4BFB6; } #page-legal .lg-wv-mof-row-note { font-size: 11.5px; color: #8A857D; opacity: .85; margin-top: 3px; } #page-legal .lg-wv-mof-row-when { font-size: 10.5px; color: #8A857D; opacity: .85; margin-top: 4px; } /* lg-* report shell wrapping the da-* report */ #page-legal .lg-da-report { margin-top: 2px; } #page-legal .lg-da-head-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } #page-legal .lg-da-report .da-report { padding: 4px 2px; } /* FIX_LEGAL_CONTRACTS_S1_2026_06_22 - Contracts register / key-date tracker / risk-flag layer (renderContractsTool). Built TO design_samples/legal/legal_contracts.html, re-prefixed lg-ct-* to match the S1/S2 lg-* convention and scoped under #page-legal so it never collides with the Procurement contracts surface or any global class. Reuses the established Legal palette tokens (no new design tokens) + the existing .lg-head-row / .lg-statusline / .lg-panel / .lg-panel-h / .lg-panel-sub / .lg-hint / .lg-footnote / .fm-state idioms. COUNSEL-GATE surface: the .lg-ct-banner is the loud spine; every card body label is awareness/prep, never a verdict. ASCII-ONLY in this comment block (a non-ASCII char silently drops the rule from the CSSOM - the established L18.8 lesson). */ /* loud counsel-gate banner (the spine of this counsel-gated surface) */ #page-legal .lg-ct-banner { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 18px; padding: 13px 16px; border-radius: 13px; background: linear-gradient(120deg, rgba(201,168,76,0.10), rgba(255,255,255,0.012) 60%); border: 1px solid rgba(201,168,76,0.30); box-shadow: inset 0 1px 0 rgba(255,255,255,0.05); } #page-legal .lg-ct-banner .lg-ct-bi { width: 30px; height: 30px; border-radius: 9px; flex: none; display: grid; place-items: center; background: rgba(201,168,76,0.16); } #page-legal .lg-ct-banner .lg-ct-bt { font-size: 12.5px; color: #C4BFB6; line-height: 1.5; } /* KPI summary band (4 portfolio aggregates) - own 4-col grid (the shared .lg-kpis is 6-col) */ #page-legal .lg-ct-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; margin-bottom: 18px; } #page-legal .lg-ct-kpi { position: relative; overflow: hidden; background: linear-gradient(165deg,#262320,#1f1c19); border: 1px solid rgba(255,255,255,0.07); border-radius: 14px; padding: 15px 16px 14px; box-shadow: 0 16px 34px -28px #000, inset 0 1px 0 rgba(255,255,255,0.05); } #page-legal .lg-ct-kpi .lg-ct-lbl { font-size: 9.5px; letter-spacing: 1.2px; text-transform: uppercase; color: #8A857D; font-weight: 700; margin-bottom: 7px; } #page-legal .lg-ct-kpi .lg-ct-val { font-size: 23px; font-weight: 800; color: #F0EBE2; line-height: 1; font-family: 'Montserrat', sans-serif; font-variant-numeric: tabular-nums; } #page-legal .lg-ct-kpi .lg-ct-sub { font-size: 11.5px; margin-top: 7px; color: #8A857D; } #page-legal .lg-ct-kpi .lg-ct-sub .lg-ct-delta { font-weight: 700; } /* review-status filter chips */ #page-legal .lg-ct-filters { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 14px; } #page-legal .lg-ct-filters .lg-ct-fl-lbl { font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; color: #8A857D; font-weight: 700; margin-right: 2px; } #page-legal .lg-ct-chip { font-size: 11.5px; font-weight: 600; color: #C4BFB6; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); border-radius: 999px; padding: 6px 13px; cursor: pointer; transition: .16s cubic-bezier(0.4,0,0.2,1); font-family: 'Montserrat', sans-serif; } #page-legal .lg-ct-chip.lg-ct-on { background: linear-gradient(180deg,rgba(201,168,76,0.2),rgba(201,168,76,0.06)); border-color: rgba(201,168,76,0.4); color: #F0EBE2; box-shadow: 0 4px 16px -8px rgba(201,168,76,0.28); } #page-legal .lg-ct-chip .lg-ct-ct { margin-left: 6px; opacity: .7; font-weight: 700; } /* contract register cards (per-entity state) */ #page-legal .lg-ct-list { display: flex; flex-direction: column; gap: 11px; } #page-legal .lg-ct-card.lg-ct-fl-counsel { --lg-ct-lvl: #E05555; } #page-legal .lg-ct-card.lg-ct-fl-renewal { --lg-ct-lvl: #E8943A; } #page-legal .lg-ct-card.lg-ct-fl-auto { --lg-ct-lvl: #8B6FD6; } #page-legal .lg-ct-card.lg-ct-fl-ok { --lg-ct-lvl: #4CAF7D; } #page-legal .lg-ct-card .lg-ct-ic { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: rgba(91,155,213,0.12); } #page-legal .lg-ct-card.lg-ct-fl-counsel .lg-ct-ic { background: rgba(224,85,85,0.14); } #page-legal .lg-ct-card.lg-ct-fl-counsel .lg-ct-ic svg { stroke: #E05555; } #page-legal .lg-ct-card.lg-ct-fl-renewal .lg-ct-ic { background: rgba(232,148,58,0.14); } #page-legal .lg-ct-card.lg-ct-fl-renewal .lg-ct-ic svg { stroke: #E8943A; } #page-legal .lg-ct-card.lg-ct-fl-auto .lg-ct-ic { background: rgba(139,111,214,0.14); } #page-legal .lg-ct-card.lg-ct-fl-auto .lg-ct-ic svg { stroke: #8B6FD6; } #page-legal .lg-ct-body { min-width: 0; } #page-legal .lg-ct-top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } #page-legal .lg-ct-name { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 13.5px; color: #F0EBE2; } #page-legal .lg-ct-type { font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #8A857D; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); border-radius: 999px; padding: 2px 8px; font-family: 'Montserrat', sans-serif; } /* FIX_COMMERCIAL_AGREEMENTS_S2_2026_09_06 — the per-row SOURCE label on the contracts register. ID-scoped to #page-legal exactly like every sibling rule on this surface: an unprefixed .lg-ct-src would be (0,1,0) against the host's (1,1,0) declarations and would render completely unstyled. Two semantic-only colours, reusing the tokens already on this sheet — no new palette. */ #page-legal .lg-ct-src { font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; border-radius: 999px; padding: 2px 8px; font-family: 'Montserrat', sans-serif; } #page-legal .lg-ct-src-gen { color: #C9A84C; background: rgba(201,168,76,0.12); border: 1px solid rgba(201,168,76,0.30); } #page-legal .lg-ct-src-doc { color: #5B9BD5; background: rgba(91,155,213,0.10); border: 1px solid rgba(91,155,213,0.26); } #page-legal .lg-ct-party { font-size: 11.5px; color: #C4BFB6; margin-top: 3px; } #page-legal .lg-ct-meta { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 9px; } #page-legal .lg-ct-meta .lg-ct-m { display: flex; flex-direction: column; gap: 1px; } #page-legal .lg-ct-meta .lg-ct-m .lg-ct-ml { font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: #8A857D; font-weight: 700; } #page-legal .lg-ct-meta .lg-ct-m .lg-ct-mv { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 12px; color: #F0EBE2; } #page-legal .lg-ct-meta .lg-ct-m .lg-ct-mv.lg-ct-amber { color: #E8943A; } #page-legal .lg-ct-meta .lg-ct-m .lg-ct-mv.lg-ct-red { color: #E05555; } /* risk-flag pills */ #page-legal .lg-ct-flags { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 10px; } #page-legal .lg-ct-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 600; border-radius: 8px; padding: 4px 9px; border: 1px solid; } #page-legal .lg-ct-pill.lg-ct-p-counsel { color: #E05555; background: rgba(224,85,85,0.10); border-color: rgba(224,85,85,0.3); } #page-legal .lg-ct-pill.lg-ct-p-auto { color: #8B6FD6; background: rgba(139,111,214,0.10); border-color: rgba(139,111,214,0.3); } #page-legal .lg-ct-pill.lg-ct-p-expiring { color: #E8943A; background: rgba(232,148,58,0.10); border-color: rgba(232,148,58,0.3); } #page-legal .lg-ct-pill.lg-ct-p-unsigned { color: #E05555; background: rgba(224,85,85,0.10); border-color: rgba(224,85,85,0.3); } #page-legal .lg-ct-pill.lg-ct-p-tracked { color: #5B9BD5; background: rgba(91,155,213,0.10); border-color: rgba(91,155,213,0.3); } /* FIX_DENSITY_LEGAL_CONTRACTS_2026_09_16 — advisory chip (informational, not a risk flag; distinct gold accent per arc_surface_density_uniformity_brief.md §3.1). Margin matches the retired lg-ct-banner's own bottom margin (visual rhythm unchanged). */ #page-legal .lg-ct-advisory-row { margin: 0 0 18px; } #page-legal .lg-ct-pill.lg-ct-p-info { color: #C9A84C; background: rgba(201,168,76,0.10); border-color: rgba(201,168,76,0.3); } #page-legal .lg-ct-side { display: flex; flex-direction: column; align-items: flex-end; gap: 9px; flex: none; } #page-legal .lg-ct-status { font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-family: 'Montserrat', sans-serif; padding: 4px 10px; border-radius: 999px; } #page-legal .lg-ct-status.lg-ct-st-review { color: #E8943A; background: rgba(232,148,58,0.14); border: 1px solid rgba(232,148,58,0.32); } #page-legal .lg-ct-status.lg-ct-st-tracked { color: #5B9BD5; background: rgba(91,155,213,0.14); border: 1px solid rgba(91,155,213,0.3); } #page-legal .lg-ct-action { font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 700; cursor: pointer; border-radius: 8px; padding: 8px 14px; border: 1px solid rgba(255,255,255,0.13); background: rgba(255,255,255,0.04); color: #C4BFB6; transition: all .16s cubic-bezier(0.4,0,0.2,1); white-space: nowrap; box-shadow: inset 0 1px 0 rgba(255,255,255,0.05); } #page-legal .lg-ct-action.lg-ct-a-counsel { background: linear-gradient(180deg,rgba(201,168,76,0.9),#9c7f33); color: #1a160c; border-color: transparent; } /* per-contract counsel-prep note (the prep, never the opinion) */ #page-legal .lg-ct-note { grid-column: 2 / -1; margin-top: 11px; padding-top: 11px; border-top: 1px solid rgba(255,255,255,0.07); font-size: 11.5px; color: #8A857D; line-height: 1.5; display: none; } #page-legal .lg-ct-card.lg-ct-open .lg-ct-note { display: block; } #page-legal .lg-ct-note .lg-ct-nh { font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: #C9A84C; font-weight: 700; margin-bottom: 5px; display: block; font-family: 'Montserrat', sans-serif; } /* renewal & key-date calendar strip */ #page-legal .lg-ct-cal-list { display: flex; flex-direction: column; gap: 8px; } #page-legal .lg-ct-cal { display: flex; align-items: center; gap: 13px; padding: 10px 12px; border-radius: 11px; background: rgba(255,255,255,0.018); border: 1px solid rgba(255,255,255,0.07); position: relative; overflow: hidden; } #page-legal .lg-ct-cal .lg-ct-cal-d { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 11px; width: 64px; flex: none; } #page-legal .lg-ct-cal .lg-ct-cal-d.lg-ct-red { color: #E05555; } #page-legal .lg-ct-cal .lg-ct-cal-d.lg-ct-amber { color: #E8943A; } #page-legal .lg-ct-cal .lg-ct-cal-d.lg-ct-blue { color: #5B9BD5; } #page-legal .lg-ct-cal .lg-ct-cal-n { flex: 1; color: #C4BFB6; font-size: 12px; } #page-legal .lg-ct-cal .lg-ct-cal-when { font-size: 11px; color: #8A857D; font-family: 'Montserrat', sans-serif; font-weight: 600; } #page-legal .lg-ct-cal.lg-ct-red { --lg-ct-cl: #E05555; } #page-legal .lg-ct-cal.lg-ct-amber { --lg-ct-cl: #E8943A; } #page-legal .lg-ct-cal.lg-ct-blue { --lg-ct-cl: #5B9BD5; } /* FIX_DEMO_DEADLINE_CLOCK_2026_09_06 — the contract-register calendar interpolates the urgency band straight into its class name, so the new overdue band needs both rules or the chip renders unstyled. Symbol anchor: __legalUrgency. */ #page-legal .lg-ct-cal .lg-ct-cal-d.lg-ct-overdue { color: #B3282D; } #page-legal .lg-ct-cal.lg-ct-overdue { --lg-ct-cl: #B3282D; } /* obligations-seam mini panel */ #page-legal .lg-ct-seam { display: flex; align-items: center; gap: 13px; padding: 13px 16px; border-radius: 13px; background: rgba(91,155,213,0.05); border: 1px solid rgba(91,155,213,0.22); } #page-legal .lg-ct-seam .lg-ct-s-ic { width: 30px; height: 30px; border-radius: 9px; flex: none; display: grid; place-items: center; background: rgba(91,155,213,0.14); } #page-legal .lg-ct-seam .lg-ct-s-t { font-size: 12px; color: #C4BFB6; line-height: 1.5; flex: 1; } #page-legal .lg-ct-seam .lg-ct-s-go { font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 700; color: #5B9BD5; cursor: pointer; white-space: nowrap; } @media (max-width: 920px) { #page-legal .lg-ct-kpis { grid-template-columns: repeat(2, 1fr); } } /* FIX_LEGAL_PRIVACY_S1_2026_06_22 - Privacy sub-surface (S1) styles, scoped under #page-legal, ported from design_samples/legal/legal_privacy.html (the SPEC) at ultra-HD fidelity. The shared lg-* idioms (lg-head-row / lg-statusline / lg-juris / lg-grid / lg-panel / lg-kpi / fm-state) are REUSED from the Overview block above; the counsel-gate banner reuses the SHIPPED .lg-ct-banner class (Contracts S1). The genuinely-new pieces below are the 4-tile KPI band wrapper, the 4 privacy KPI accent classes, and the pv-* family (readiness checklist + composite ring, applicable-regime panel, data-handling inventory, gap findings). ASCII-only comments (a non-ASCII char silently drops the rule from the CSSOM - the L9562 Legal-CSS-banner lesson). Tokens are the literal hex the Legal block already inlines; NO new color introduced. Symbol-anchor: renderPrivacyTool. COUNSEL-GATE: every glyph/tag/flag is awareness, never a verdict. */ #page-legal .pv-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; margin-bottom: 18px; } /* readiness checklist rows (empty/half/filled glyph, never a red X) */ #page-legal .pv-check { display: flex; flex-direction: column; gap: 8px; } #page-legal .pv-row { display: flex; align-items: flex-start; gap: 11px; padding: 11px 13px; border-radius: 11px; background: rgba(255,255,255,0.018); border: 1px solid rgba(255,255,255,0.07); } #page-legal .pv-row .pv-glyph { flex: 0 0 auto; width: 20px; text-align: center; font-size: 15px; line-height: 1.4; } #page-legal .pv-row.pv-have .pv-glyph { color: #4CAF7D; } #page-legal .pv-row.pv-partial .pv-glyph { color: #E8943A; } #page-legal .pv-row.pv-gap .pv-glyph { color: #8A857D; } #page-legal .pv-row .pv-b { flex: 1; min-width: 0; } #page-legal .pv-row .pv-t { font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 12.5px; color: #F0EBE2; } #page-legal .pv-row .pv-d { font-size: 11.5px; color: #8A857D; margin-top: 3px; line-height: 1.45; } #page-legal .pv-row .pv-state { flex: 0 0 auto; font-family: 'Montserrat', sans-serif; font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; align-self: center; } #page-legal .pv-state.s-have { color: #4CAF7D; background: rgba(76,175,125,0.13); border: 1px solid rgba(76,175,125,0.32); } #page-legal .pv-state.s-partial { color: #E8943A; background: rgba(232,148,58,0.13); border: 1px solid rgba(232,148,58,0.32); } #page-legal .pv-state.s-gap { color: #8A857D; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); } #page-legal .pv-src { font-size: 10.5px; font-style: italic; color: #8A857D; opacity: .8; margin-top: 5px; } /* readiness composite ring (deterministic tracking metric, never a verdict) */ #page-legal .pv-readi { display: flex; align-items: center; gap: 16px; margin-bottom: 4px; } #page-legal .pv-ring { position: relative; width: 104px; height: 104px; flex: 0 0 auto; } #page-legal .pv-ring-c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; } #page-legal .pv-ring-c .v { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 25px; color: #F0EBE2; line-height: 1; } #page-legal .pv-ring-c .m { font-size: 9px; letter-spacing: .06em; text-transform: uppercase; color: #8A857D; margin-top: 3px; } #page-legal .pv-readi-notes { flex: 1; display: flex; flex-direction: column; gap: 8px; } #page-legal .pv-readi-notes .n { display: flex; align-items: center; gap: 9px; font-size: 11.5px; color: #C4BFB6; } #page-legal .pv-readi-notes .n .dotc { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; } #page-legal .pv-readi-notes .n .lbl { flex: 1; color: #8A857D; } #page-legal .pv-readi-notes .n .st { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 11px; color: #F0EBE2; } /* applicable-regime panel rows (jurisdiction-resolved, unknown -> FLAG) */ #page-legal .pv-regime { display: flex; flex-direction: column; gap: 9px; } #page-legal .pv-reg { padding: 11px 13px; border-radius: 11px; background: rgba(255,255,255,0.018); border: 1px solid rgba(255,255,255,0.07); } #page-legal .pv-reg .pv-reg-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } #page-legal .pv-reg .pv-reg-n { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 12.5px; color: #F0EBE2; } #page-legal .pv-reg .pv-reg-tag { font-family: 'Montserrat', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; } #page-legal .pv-reg-tag.t-prov { color: #5B9BD5; background: rgba(91,155,213,0.14); border: 1px solid rgba(91,155,213,0.32); } #page-legal .pv-reg-tag.t-fed { color: #C9A84C; background: rgba(201,168,76,0.14); border: 1px solid rgba(201,168,76,0.32); } #page-legal .pv-reg-tag.t-flag { color: #E8943A; background: rgba(232,148,58,0.14); border: 1px solid rgba(232,148,58,0.32); } #page-legal .pv-reg .pv-reg-d { font-size: 11.5px; color: #8A857D; margin-top: 4px; line-height: 1.45; } /* data-handling inventory table */ #page-legal .pv-inv { display: flex; flex-direction: column; gap: 0; } #page-legal .pv-inv-row { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 12px; align-items: center; padding: 10px 4px; border-bottom: 1px solid rgba(255,255,255,0.07); font-size: 12px; } #page-legal .pv-inv-row.head { font-family: 'Montserrat', sans-serif; font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #8A857D; } #page-legal .pv-inv-row .pv-inv-cat { color: #F0EBE2; font-weight: 600; } #page-legal .pv-inv-row .pv-inv-purpose { color: #C4BFB6; } #page-legal .pv-inv-row .pv-inv-basis { color: #8A857D; } #page-legal .pv-inv-row .flagmini { color: #E8943A; font-weight: 600; } /* gap findings (absence-visible; unmeasured -> visible gap, never a non-compliance verdict) */ #page-legal .pv-gaps { display: flex; flex-direction: column; gap: 9px; } #page-legal .pv-gap { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,0.018); border: 1px solid rgba(255,255,255,0.07); position: relative; overflow: hidden; } #page-legal .pv-gap .pv-gap-ic { width: 30px; height: 30px; border-radius: 9px; flex: 0 0 auto; display: grid; place-items: center; background: rgba(232,148,58,0.14); } #page-legal .pv-gap.g-blue .pv-gap-ic { background: rgba(91,155,213,0.14); } #page-legal .pv-gap.g-blue .pv-gap-ic svg { stroke: #5B9BD5; } #page-legal .pv-gap .pv-gap-b { flex: 1; min-width: 0; } #page-legal .pv-gap .pv-gap-t { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 12.5px; color: #F0EBE2; } #page-legal .pv-gap .pv-gap-d { font-size: 11.5px; color: #8A857D; margin-top: 3px; line-height: 1.45; } @media (max-width: 920px) { #page-legal .pv-kpis { grid-template-columns: repeat(2, 1fr); } } /* FIX_LEGAL_COUNSEL_PREP_S1_2026_06_23 - Counsel Prep surface (renderCounselPrepTool) net-new classes. Built TO design_samples/legal/legal_counsel_prep.html, re-prefixed lg-cp-* to match the S1/S2 lg-* convention and scoped under #page-legal so it never collides with a global class. Reuses the established Legal palette tokens (no new design tokens) + the SHIPPED .lg-head-row / .lg-statusline / .lg-posture / .lg-footnote / .fm-state idioms AND the SHIPPED body-level .lg-modal family (L10810+) verbatim (the sample redraws that family; here the packet renders INTO the shipped shell, so only the packet-BODY classes lg-cp-pkt-* / lg-cp-tl* are added, top-level under .lg-modal). COUNSEL-GATE surface: the lg-cp-gate banner is the loud spine; every card/packet label is awareness/ prep, never a verdict, never an opinion. ASCII-ONLY in this comment block (a non-ASCII char silently drops the rule from the CSSOM - the established L18.8 lesson). */ /* counsel-gate banner (the gate made concrete; blue-tinted, parallel to Risk rk-cg-gate) */ #page-legal .lg-cp-gate { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 13px; margin: 0 0 18px; background: linear-gradient(120deg, rgba(91,155,213,0.12), rgba(37,34,32,0.5) 62%); border: 1px solid rgba(91,155,213,0.3); box-shadow: inset 0 1px 0 rgba(255,255,255,0.05); } #page-legal .lg-cp-gate .lg-cp-gaic { width: 30px; height: 30px; border-radius: 9px; flex: none; display: grid; place-items: center; background: rgba(91,155,213,0.16); } /* count / readiness strip (3 non-interactive tiles, mirror rk-cg-kpis) */ #page-legal .lg-cp-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; margin-bottom: 18px; } #page-legal .lg-cp-gk { position: relative; overflow: hidden; background: linear-gradient(165deg,#262320,#1f1c19); border: 1px solid rgba(255,255,255,0.07); border-radius: 14px; padding: 15px 16px 14px; box-shadow: 0 16px 34px -28px #000, inset 0 1px 0 rgba(255,255,255,0.05); } #page-legal .lg-cp-gk .lg-cp-gkl { font-size: 9.5px; letter-spacing: 1.1px; text-transform: uppercase; color: #8A857D; font-weight: 700; margin-bottom: 7px; } #page-legal .lg-cp-gk .lg-cp-gkv { font-size: 23px; font-weight: 800; color: #F0EBE2; line-height: 1; font-family: 'Montserrat', sans-serif; font-variant-numeric: tabular-nums; } #page-legal .lg-cp-gk .lg-cp-gks { font-size: 11px; margin-top: 7px; color: #8A857D; } /* 2-col grid: matter stack (main) + how-prep rail */ #page-legal .lg-cp-grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: 18px; } #page-legal .lg-cp-stack-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } #page-legal .lg-cp-stack-head h3 .lg-cp-glyph { width: 24px; height: 24px; border-radius: 8px; background: linear-gradient(150deg,rgba(91,155,213,0.24),rgba(201,168,76,0.10)); display: grid; place-items: center; } #page-legal .lg-cp-count-b { font-size: 10.5px; font-weight: 700; color: #F0EBE2; background: rgba(91,155,213,0.16); border: 1px solid rgba(91,155,213,0.36); border-radius: 999px; padding: 3px 11px; font-family: 'Montserrat', sans-serif; } #page-legal .lg-cp-stack { display: flex; flex-direction: column; gap: 13px; } /* a matter card - one Band 3-4 question prepped for counsel */ #page-legal .lg-cp-card { position: relative; overflow: hidden; background: linear-gradient(170deg,#252220,#1e1b19); border: 1px solid rgba(255,255,255,0.07); border-radius: 16px; padding: 16px 18px; box-shadow: 0 22px 50px -36px #000, inset 0 1px 0 rgba(255,255,255,0.05); } #page-legal .lg-cp-top { display: flex; align-items: flex-start; gap: 12px; } #page-legal .lg-cp-ic { width: 36px; height: 36px; border-radius: 10px; flex: none; display: grid; place-items: center; box-shadow: inset 0 1px 0 rgba(255,255,255,0.05); } #page-legal .lg-cp-ic.lg-cp-blue { background: rgba(91,155,213,0.14); } #page-legal .lg-cp-ic.lg-cp-amber { background: rgba(232,148,58,0.14); } #page-legal .lg-cp-ic.lg-cp-red { background: rgba(224,85,85,0.14); } #page-legal .lg-cp-tw { flex: 1; min-width: 0; } #page-legal .lg-cp-title { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 13.5px; color: #F0EBE2; line-height: 1.3; } #page-legal .lg-cp-tagrow { display: flex; align-items: center; gap: 8px; margin-top: 6px; flex-wrap: wrap; } #page-legal .lg-cp-band { font-family: 'Montserrat', sans-serif; font-size: 9px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 2px 7px; border-radius: 6px; } #page-legal .lg-cp-band.b4 { color: #E05555; background: rgba(224,85,85,0.13); border: 1px solid rgba(224,85,85,0.32); } #page-legal .lg-cp-band.b3 { color: #E8943A; background: rgba(232,148,58,0.13); border: 1px solid rgba(232,148,58,0.32); } #page-legal .lg-cp-route { font-size: 10px; color: #8A857D; } #page-legal .lg-cp-q { font-size: 12px; color: #C4BFB6; line-height: 1.5; margin: 11px 0 0; } /* readiness checklist - the five packet pieces, each present/absent */ #page-legal .lg-cp-ready { display: flex; flex-direction: column; gap: 6px; margin: 12px 0 0; } #page-legal .lg-cp-rrow { display: flex; align-items: center; gap: 9px; font-size: 11px; color: #C4BFB6; } #page-legal .lg-cp-rdot { width: 14px; height: 14px; border-radius: 50%; flex: none; display: grid; place-items: center; } #page-legal .lg-cp-rdot.miss { background: rgba(232,148,58,0.16); } #page-legal .lg-cp-rl { flex: 1; } #page-legal .lg-cp-rl .lg-cp-rk { color: #8A857D; } #page-legal .lg-cp-rs { font-size: 10px; font-family: 'Montserrat', sans-serif; font-weight: 700; } #page-legal .lg-cp-rs.miss { color: #E8943A; } #page-legal .lg-cp-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding-top: 13px; border-top: 1px solid rgba(255,255,255,0.07); } #page-legal .lg-cp-detected { display: flex; align-items: center; gap: 8px; font-size: 10.5px; color: #8A857D; max-width: 60%; } #page-legal .lg-cp-btn-prep { display: inline-flex; align-items: center; gap: 8px; font-family: 'Montserrat', sans-serif; font-size: 11.5px; font-weight: 700; cursor: pointer; border: none; border-radius: 9px; padding: 9px 16px; color: #16140F; background: linear-gradient(180deg,#C9A84C,#9c7f33); box-shadow: 0 8px 22px -8px rgba(201,168,76,0.55), inset 0 1px 0 rgba(255,255,255,0.3); transition: transform .16s cubic-bezier(0.4,0,0.2,1); white-space: nowrap; } /* the "how a packet is assembled" rail (parallel to rk-cg-explain) */ #page-legal .lg-cp-panel { background: linear-gradient(170deg,#252220,#1e1b19); border: 1px solid rgba(255,255,255,0.07); border-radius: 16px; padding: 18px 20px; box-shadow: 0 22px 50px -36px #000, inset 0 1px 0 rgba(255,255,255,0.05); align-self: start; } #page-legal .lg-cp-panel-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 3px; } #page-legal .lg-cp-panel-sub { font-size: 11.5px; color: #8A857D; margin: 2px 0 16px; } #page-legal .lg-cp-flow { display: flex; flex-direction: column; gap: 0; } #page-legal .lg-cp-step { display: flex; gap: 13px; position: relative; padding-bottom: 16px; } #page-legal .lg-cp-srail { position: absolute; left: 13px; top: 26px; bottom: 0; width: 1px; background: linear-gradient(180deg,rgba(201,168,76,0.3),transparent); } #page-legal .lg-cp-step:last-child .lg-cp-srail { display: none; } #page-legal .lg-cp-num { width: 26px; height: 26px; border-radius: 8px; flex: none; display: grid; place-items: center; font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 12px; color: #C9A84C; background: rgba(201,168,76,0.1); border: 1px solid rgba(201,168,76,0.28); z-index: 1; } #page-legal .lg-cp-sb { flex: 1; padding-top: 2px; } #page-legal .lg-cp-st { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 12px; color: #F0EBE2; } #page-legal .lg-cp-sd { font-size: 11px; color: #8A857D; margin-top: 3px; line-height: 1.5; } #page-legal .lg-cp-srcs { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; } #page-legal .lg-cp-srcchip { font-family: 'Montserrat', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: .03em; color: #5B9BD5; background: rgba(91,155,213,0.08); border: 1px solid rgba(91,155,213,0.26); border-radius: 6px; padding: 2px 7px; } #page-legal .lg-cp-railnote { display: flex; align-items: flex-start; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.07); font-size: 10.5px; color: #8A857D; line-height: 1.5; } /* ════════════════════════════════════════════════════════════════════════════ FIX_LEGAL_INTELLIGENCE_S1_2026_06_23 — Legal Intelligence (synthesis / DERIVE surface) styles, scoped under #page-legal. TRANSPLANTED VERBATIM from design_samples/legal/legal_intelligence.html