/* ui/cmfront.css — owned by W14. EVERY selector is .cmf-* prefixed (SHELL_CONTRACT §3.2). Concatenated into styles.css at build; an unprefixed rule silently restyles somebody else's surface and the last one loaded wins. Loop IQ chrome: electric indigo #4330F5, depth #271257 / #1A0B3D, Poppins body, Onest display. Andrew's note on Integrations applies here: sleek, simple, fewer words. Don't explain — show. */ .cmf-wrap { --cmf-indigo:#4330F5; --cmf-depth:#271257; --cmf-deep:#1A0B3D; --cmf-rn:#4330F5; --cmf-non:#C9C2FB; --cmf-line:#E5E7EB; --cmf-muted:#6B7280; --cmf-ok:#1E7735; --cmf-ok-bg:rgb(241,252,243); --cmf-bad:#B45309; --cmf-bad-bg:rgb(255,251,235); --cmf-crit:#9F1239; font-family:Poppins,system-ui,sans-serif; color:#111827; } .cmf-head { display:flex; justify-content:space-between; align-items:flex-start; gap:24px; flex-wrap:wrap; margin-bottom:20px; } .cmf-tenancy { font-size:12px; font-weight:600; letter-spacing:.4px; text-transform:uppercase; color:var(--cmf-indigo); margin:0 0 4px; } .cmf-h1 { font-family:var(--font-head, 'Sansation', 'Poppins', sans-serif); font-size:28px; font-weight:700; margin:0; } .cmf-sub { color:var(--cmf-muted); font-size:13px; margin:4px 0 0; } .cmf-picker { border:0.67px solid var(--cmf-line); border-radius:10px; padding:10px 14px; font-family:inherit; font-size:14px; background:#FFF; min-width:300px; } /* ---------- THE VERDICT. First, above everything. ---------- */ .cmf-verdict { border-radius:14px; padding:22px 26px; margin:0 0 24px; color:#FFF; background:var(--cmf-depth); } .cmf-v-eyebrow { font-size:11px; font-weight:700; letter-spacing:.7px; text-transform:uppercase; color:#C4B5FD; margin-bottom:8px; } .cmf-v-head { margin:0; font-family:var(--font-head, 'Sansation', 'Poppins', sans-serif); font-size:20px; line-height:1.5; font-weight:600; max-width:104ch; } .cmf-v-sub { margin:10px 0 0; font-size:14px; line-height:1.6; color:#E9E4FF; max-width:96ch; } .cmf-v-act { margin:14px 0 0; font-size:15px; font-weight:600; color:#FFF; border-left:3px solid var(--cmf-indigo); padding-left:12px; } .cmf-v-ok .cmf-v-act { border-left-color:#34D399; } /* CM-07 — a statutory breach. It does not look like a warning, because it is not one. */ .cmf-v-statute { background:#7F1D1D; border:2px solid #DC2626; } .cmf-v-statute .cmf-v-eyebrow { color:#FCA5A5; } .cmf-v-statute .cmf-v-act { border-left-color:#DC2626; } .cmf-v-floor { background:#881337; } .cmf-v-floor .cmf-v-eyebrow { color:#FDA4AF; } .cmf-v-nodata { background:#374151; } .cmf-v-nodata .cmf-v-eyebrow { color:#D1D5DB; } /* ---------- panels ---------- */ .cmf-panel { background:#FFF; border:0.67px solid var(--cmf-line); border-radius:12px; padding:24px; margin-bottom:20px; } .cmf-panel-h { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:18px; } .cmf-panel-h h2 { font-family:var(--font-head, 'Sansation', 'Poppins', sans-serif); font-size:17px; font-weight:600; margin:0; } .cmf-chip { font-size:12px; font-weight:600; border-radius:9999px; padding:6px 12px; background:#F3F0FE; color:var(--cmf-indigo); } .cmf-chip-clock { background:var(--cmf-depth); color:#FFF; } /* ---------- the big readouts: both axes, both named ---------- */ .cmf-big { display:flex; gap:14px; flex-wrap:wrap; margin-bottom:22px; } .cmf-big-item { flex:1 1 200px; border:0.67px solid var(--cmf-line); border-radius:12px; padding:16px 18px; background:#FFF; } .cmf-big-item b { display:block; font-family:var(--font-head, 'Sansation', 'Poppins', sans-serif); font-size:30px; line-height:1.1; margin-bottom:6px; } .cmf-big-item b i { font-size:20px; font-style:normal; margin-left:2px; } .cmf-big-item span { display:block; font-size:12px; color:var(--cmf-muted); line-height:1.5; } .cmf-big-item.ok { background:var(--cmf-ok-bg); border-color:#A7E3B8; } .cmf-big-item.ok b { color:var(--cmf-ok); } .cmf-big-item.bad { background:var(--cmf-bad-bg); border-color:#FCD9A0; } .cmf-big-item.bad b { color:var(--cmf-bad); } .cmf-both b { color:var(--cmf-depth); font-size:20px; } /* ---------- THE STACK. total = RN + EN + PCW, drawn as one bar. ---------- */ .cmf-stackwrap { margin-top:6px; } .cmf-stack { position:relative; display:flex; height:52px; border-radius:8px; overflow:visible; background:#F9FAFB; border:0.67px solid var(--cmf-line); } .cmf-seg { position:relative; display:flex; align-items:center; overflow:hidden; } .cmf-seg i { font-style:normal; font-size:11px; font-weight:700; letter-spacing:.3px; padding-left:10px; white-space:nowrap; } .cmf-seg-rn { background:var(--cmf-rn); border-radius:7px 0 0 7px; } .cmf-seg-rn i { color:#FFF; } .cmf-seg-non { background:var(--cmf-non); } .cmf-seg-non i { color:var(--cmf-depth); } .cmf-mark { position:absolute; top:-6px; bottom:-6px; width:0; border-left:2px dashed var(--cmf-depth); } .cmf-mark span { position:absolute; top:-19px; left:4px; font-size:10px; font-weight:700; white-space:nowrap; color:var(--cmf-depth); } .cmf-mark-rn { border-left-color:#FFF; } .cmf-mark-rn span { color:var(--cmf-depth); background:#FFF; padding:1px 4px; border-radius:4px; } .cmf-mark-tot { border-left-color:var(--cmf-deep); border-left-style:solid; } /* The sector reference sits BELOW the axis, in grey, so it can never be read as this home's bar. Two labels on one tick is how a chart starts lying by accident. */ .cmf-mark-ref { border-left-color:#D1D5DB; } .cmf-mark-ref span { color:#9CA3AF; font-weight:600; top:auto; bottom:-19px; } .cmf-mark-cmp { border-left-color:var(--cmf-bad); } .cmf-mark-cmp span { color:var(--cmf-bad); top:auto; bottom:-19px; } .cmf-stacknote { margin:34px 0 0; font-size:13px; line-height:1.6; color:#374151; max-width:96ch; } .cmf-stacknote b { color:var(--cmf-depth); } .cmf-basis { margin:8px 0 0; font-size:12px; line-height:1.6; color:var(--cmf-muted); max-width:100ch; } .cmf-prov { margin:6px 0 0; font-size:11px; line-height:1.6; color:#9CA3AF; max-width:100ch; } .cmf-vintage { margin:10px 0 0; font-size:12px; line-height:1.6; color:var(--cmf-bad); background:var(--cmf-bad-bg); border-radius:8px; padding:10px 12px; max-width:100ch; } /* ---------- CM-07 · the statutory RN floor (s176-15) ---------- */ .cmf-statute-breach { border:2px solid #DC2626; background:#FFFBFB; } .cmf-chip-breach { background:#DC2626; color:#FFF; letter-spacing:.5px; } .cmf-chip-ok { background:var(--cmf-ok-bg); color:var(--cmf-ok); } .cmf-statute-head { margin:0 0 18px; font-family:var(--font-head, 'Sansation', 'Poppins', sans-serif); font-size:17px; font-weight:700; line-height:1.5; color:#991B1B; max-width:100ch; } .cmf-statute-note { margin:14px 0 0; font-size:13px; line-height:1.65; color:#7F1D1D; background:#FEF2F2; border-left:3px solid #DC2626; border-radius:0 8px 8px 0; padding:12px 14px; max-width:100ch; } .cmf-statute-note b { color:#991B1B; } /* THE COST OF COMPLIANCE. (v10.01) It is a real number on a real screen and it is allowed to look like one — but it is deliberately NOT styled like the money elsewhere on this page, which is money you can trade. This is money you owe. Sober, not celebratory: no green, no upside. */ .cmf-v-cost { margin:14px 0 0; padding:12px 14px; max-width:100ch; background:#FFF7ED; border-left:3px solid #C2410C; border-radius:0 8px 8px 0; font-size:13px; line-height:1.6; color:#7C2D12; } .cmf-v-cost b { color:#7C2D12; } .cmf-limb-scope { margin:0 0 12px; font-size:12px; color:var(--cmf-muted); } .cmf-limb-scope b { color:#991B1B; } /* The average, DEMOTED. It used to be the hero — "103.6%, above the floor, IT DOES" — printed above the home that doesn't. It is kept because a CFO will ask for it, and it is styled as the caveat it always was, never as the answer. (W33) */ .cmf-avg-demoted { padding:8px 10px; border-left:3px solid var(--cmf-line); background:var(--cmf-wash, #F8FAFC); font-style:italic; } .cmf-limbs { display:flex; gap:12px; flex-wrap:wrap; } .cmf-limb { flex:1 1 280px; border:0.67px solid var(--cmf-line); border-radius:12px; padding:16px 18px; } .cmf-limb-rule { display:block; font-size:10px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--cmf-muted); margin-bottom:8px; } /* DIRECT CHILD ONLY. `.cmf-limb b` also matched the nested inside the caption, and rendered the words "Upper bound." as a 30px Onest headline in the middle of a paragraph. Found by looking; invisible to every gate on this project. */ .cmf-limb > b { display:block; font-family:var(--font-head, 'Sansation', 'Poppins', sans-serif); font-size:30px; line-height:1.1; margin-bottom:4px; } .cmf-limb em b { font-weight:700; color:#374151; } .cmf-limb-test { display:block; font-size:12px; color:#374151; margin-bottom:8px; } .cmf-limb-test u { text-decoration-thickness:2px; } .cmf-limb em { display:block; font-style:normal; font-size:11px; line-height:1.55; color:var(--cmf-muted); } .cmf-limb.ok { background:var(--cmf-ok-bg); border-color:#A7E3B8; } .cmf-limb.ok b { color:var(--cmf-ok); } .cmf-limb.bad { background:#FEF2F2; border-color:#FCA5A5; } .cmf-limb.bad b { color:#DC2626; } .cmf-breach-tbl { width:100%; border-collapse:collapse; margin-top:14px; font-size:12px; } .cmf-breach-tbl th { text-align:left; font-size:10px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--cmf-muted); padding:8px 10px; border-bottom:0.67px solid var(--cmf-line); } .cmf-breach-tbl td { padding:9px 10px; border-bottom:0.67px solid #F3F4F6; color:#374151; } .cmf-breach-tbl td.bad b { color:#DC2626; } /* ---------- the comparison slicer ---------- */ .cmf-tabs { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; } .cmf-tab { border:0.67px solid var(--cmf-line); background:#FFF; border-radius:9999px; padding:9px 16px; font-family:inherit; font-size:13px; font-weight:600; color:#374151; cursor:pointer; } .cmf-tab:hover { border-color:var(--cmf-indigo); color:var(--cmf-indigo); } .cmf-tab.on { background:var(--cmf-indigo); border-color:var(--cmf-indigo); color:#FFF; } .cmf-cmp-verdict { margin:0 0 16px; font-size:15px; line-height:1.65; color:#111827; max-width:100ch; font-weight:500; } .cmf-deltas { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:12px; } .cmf-delta { border:0.67px solid var(--cmf-line); border-radius:10px; padding:12px 16px; min-width:170px; } .cmf-delta b { display:block; font-family:var(--font-head, 'Sansation', 'Poppins', sans-serif); font-size:22px; } .cmf-delta span { font-size:11px; color:var(--cmf-muted); text-transform:uppercase; letter-spacing:.4px; font-weight:600; } .cmf-delta.up b { color:var(--cmf-ok); } .cmf-delta.down b { color:var(--cmf-bad); } /* ---------- the daily tracker ---------- */ .cmf-chart { width:100%; height:auto; display:block; overflow:visible; } .cmf-b-rn { fill:var(--cmf-rn); } .cmf-b-non { fill:var(--cmf-non); } /* PLANNED, NOT DELIVERED — and it must be unmistakable. Set by class, because CSS beats an SVG fill="" presentation attribute and would otherwise silently paint the forward roster as if it had already happened. */ .cmf-bar.cmf-planned.cmf-b-non { fill:url(#cmfHatchNon); } .cmf-bar.cmf-planned.cmf-b-rn { fill:url(#cmfHatchRn); } /* The weekend dip is in the DATA (the bars are shorter). The tint only names it. */ .cmf-bar.cmf-wknd { opacity:.78; } .cmf-tgt { stroke:var(--cmf-deep); stroke-width:1.5; stroke-dasharray:6 4; } /* The RN target line runs THROUGH the bars, so it needs to read against indigo, not white. */ .cmf-tgt-rn { stroke:#0B0620; stroke-width:1.6; stroke-dasharray:5 3; } .cmf-tgt-t { font-size:11px; font-weight:700; fill:var(--cmf-deep); font-family:Poppins,sans-serif; paint-order:stroke; stroke:#FFF; stroke-width:3px; stroke-linejoin:round; } .cmf-tgt-t-rn { fill:#0B0620; } .cmf-cum { fill:none; stroke:#0B0620; stroke-width:2.6; stroke-linejoin:round; paint-order:stroke; } .cmf-cum-rn { stroke:#6D28D9; stroke-width:2; } /* Planned, therefore dashed. A projection drawn like a record is a lie told with a line. */ .cmf-cum-plan { stroke-dasharray:5 4; opacity:.75; } /* The weekend rhythm, named. The dip lives in the data; this only helps the eye find it. */ .cmf-wkband { fill:#F4F2FA; } .cmf-today { stroke:var(--cmf-bad); stroke-width:2; } .cmf-today-t { font-size:10px; font-weight:700; fill:var(--cmf-bad); text-anchor:middle; font-family:Poppins,sans-serif; } .cmf-plan-t { font-size:9px; font-weight:700; fill:#7C6BF8; text-anchor:middle; letter-spacing:.6px; text-transform:uppercase; font-family:Poppins,sans-serif; } .cmf-ev { stroke:#9F1239; stroke-width:1.2; stroke-dasharray:3 3; } .cmf-ev-t { font-size:10px; font-weight:700; fill:#9F1239; font-family:Poppins,sans-serif; } .cmf-ax { font-size:10px; fill:var(--cmf-muted); font-family:Poppins,sans-serif; } /* Not empty space — the part of the quarter that is still winnable. */ .cmf-rest { fill:#FAFAFC; stroke:#EDEBF6; stroke-width:1; stroke-dasharray:4 4; } .cmf-rest-t { font-size:12px; font-weight:700; fill:#B9B4C9; text-anchor:middle; font-family:Poppins,sans-serif; } .cmf-rest-t2 { font-size:10px; font-weight:500; fill:#C9C5D6; } .cmf-legend { display:flex; gap:16px; flex-wrap:wrap; font-size:11px; color:var(--cmf-muted); font-weight:600; } .cmf-legend span { display:flex; align-items:center; gap:6px; } .cmf-legend i { width:12px; height:12px; border-radius:3px; display:inline-block; } .cmf-legend .k-rn { background:var(--cmf-rn); } .cmf-legend .k-non { background:var(--cmf-non); } .cmf-legend .k-plan { background:repeating-linear-gradient(45deg,#B7ADFB 0 2px,#EEEBFE 2px 5px); } .cmf-legend .k-cum { background:#111827; height:3px; border-radius:2px; } /* ---------- projection ---------- */ .cmf-counter { margin:16px 0 0; font-size:14px; line-height:1.65; color:#111827; background:#F3F0FE; border-radius:10px; padding:14px 16px; max-width:100ch; } .cmf-counter b { color:var(--cmf-indigo); } .cmf-lever { margin:10px 0 0; font-size:13px; line-height:1.65; color:#374151; border-left:3px solid var(--cmf-indigo); padding-left:12px; max-width:100ch; } .cmf-lever b { color:var(--cmf-depth); } .cmf-money { display:flex; gap:12px; flex-wrap:wrap; margin-top:18px; } .cmf-m-item { flex:1 1 240px; border:0.67px solid var(--cmf-line); border-radius:12px; padding:16px 18px; } .cmf-m-item b { display:block; font-family:var(--font-head, 'Sansation', 'Poppins', sans-serif); font-size:24px; margin-bottom:4px; } .cmf-m-item span { display:block; font-size:11px; font-weight:600; color:var(--cmf-muted); text-transform:uppercase; letter-spacing:.4px; margin-bottom:8px; } .cmf-m-item em { display:block; font-style:normal; font-size:12px; line-height:1.55; color:#4B5563; } .cmf-m-item.ok { background:var(--cmf-ok-bg); border-color:#A7E3B8; } .cmf-m-item.ok b { color:var(--cmf-ok); } .cmf-m-item.bad { background:var(--cmf-bad-bg); border-color:#FCD9A0; } .cmf-m-item.bad b { color:var(--cmf-bad); } .cmf-waiting { margin:16px 0 0; font-size:14px; line-height:1.65; color:#7F1D1D; background:#FEF2F2; border-radius:10px; padding:14px 16px; max-width:100ch; } .cmf-waiting b { color:var(--cmf-crit); } /* The money, second and quieter — because on this panel the money is the column that DOESN'T move, and leading with it is exactly the mistake every spreadsheet in this market makes. */ .cmf-waiting-m { display:block; margin-top:6px; font-size:12.5px; color:var(--cmf-muted); font-weight:500; } /* TWO NUMBERS, ONE HOME. The home page says "act, $16k". This panel says "$202,342, don't". Both are right; they answer different questions over different periods. The reconciliation is not a footnote — when they disagree, the stale number is the REASSURING one. */ .cmf-basis { margin:12px 0 0; font-size:13px; line-height:1.65; color:var(--cmf-muted); border-left:3px solid var(--cmf-line); padding:10px 0 10px 14px; max-width:100ch; } .cmf-basis b { color:var(--cmf-ink); } .cmf-basis-warn { border-left-color:var(--cmf-crit); color:var(--cmf-ink); } /* ---------- occupancy: the denominator, made visible and editable ---------- */ .cmf-occ-h { display:flex; align-items:center; gap:10px; flex-wrap:wrap; } .cmf-occ-h label { font-family:var(--font-head, 'Sansation', 'Poppins', sans-serif); font-size:15px; font-weight:600; } .cmf-occ-in { width:88px; border:0.67px solid var(--cmf-line); border-radius:8px; padding:8px 10px; font-family:inherit; font-size:15px; font-weight:600; text-align:right; } .cmf-occ-pct { font-weight:600; color:var(--cmf-muted); margin-left:-4px; } .cmf-badge { font-size:10px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; border-radius:9999px; padding:4px 10px; background:#F3F4F6; color:#6B7280; } .cmf-badge-proda { background:#EEF2FF; color:var(--cmf-indigo); } /* ---------- ABSENCE IS NOT ZERO. Visibly distinct from any real value. ---------- */ .cmf-nodata { font-style:italic; color:#9CA3AF; font-weight:500; } .cmf-nodata-panel { background:#F9FAFB; border:0.67px dashed #D1D5DB; border-radius:12px; padding:18px 22px; margin-bottom:20px; } .cmf-nodata-panel p { margin:0; font-size:13px; line-height:1.65; color:#374151; max-width:100ch; } /* ================= B-66 / B-67 · THE DEMO MARKER, AND IT DOES NOT SCROLL AWAY ========== The old marker was a chip at the top of the page. It left the viewport in one thumb-swipe and left ~4,200px of synthetic numbers with nothing on them, and it died completely at the download. These are invented daily care-minute records attached to a REAL, NAMED home. */ .cmf-demobar { position:sticky; top:0; z-index:40; margin:-8px -8px 16px; padding:8px 14px; background:repeating-linear-gradient(135deg,#4C1D95 0 14px,#5B21B6 14px 28px); color:#EDE9FE; font-size:11px; font-weight:700; letter-spacing:.8px; text-transform:uppercase; border-radius:8px; text-align:center; } /* Inside the SVG, behind the bars: survives a screenshot and an export of the chart itself. */ .cmf-wm-t { font-family:Poppins,sans-serif; font-size:15px; font-weight:700; fill:#000; opacity:.055; letter-spacing:2px; } .cmf-demo-line { margin:14px 0 0; font-size:12px; line-height:1.65; color:#5B21B6; background:#F5F3FF; border:0.67px dashed #C4B5FD; border-radius:8px; padding:10px 12px; max-width:100ch; } .cmf-demo-line b { color:#4C1D95; } /* ================= B-39 · THE LADDER, WITH YOUR CELL ON IT ============================= */ .cmf-mx-scroll { overflow-x:auto; } .cmf-mx { border-collapse:collapse; font-size:12px; width:100%; min-width:640px; } .cmf-mx th { font-size:10px; font-weight:700; letter-spacing:.4px; color:var(--cmf-muted); padding:8px 6px; text-align:center; white-space:nowrap; } .cmf-mx-corner { text-align:left !important; color:#111827 !important; } .cmf-mx tbody th { text-align:right; padding-right:10px; color:#111827; } .cmf-mx td { position:relative; padding:10px 6px; text-align:center; border:1px solid #EEF0F4; color:#6B7280; font-variant-numeric:tabular-nums; } .cmf-mx td i { display:block; font-style:normal; font-size:8px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; margin-top:2px; } /* You are here. The whole point of the panel. */ .cmf-mx td.here { background:var(--cmf-indigo); color:#FFF; font-weight:700; box-shadow:inset 0 0 0 2px #1A0B3D; } .cmf-mx td.here i { color:#C4B5FD; } .cmf-mx td.landing { background:#FEF2F2; color:#991B1B; font-weight:700; box-shadow:inset 0 0 0 2px #DC2626; } .cmf-mx td.landing i { color:#DC2626; } .cmf-mx td.goal { background:var(--cmf-ok-bg); color:var(--cmf-ok); font-weight:700; box-shadow:inset 0 0 0 2px #1E7735; } .cmf-mx td.goal i { color:var(--cmf-ok); } .cmf-mx-note { margin:16px 0 0; font-size:13px; line-height:1.65; color:#374151; border-left:3px solid var(--cmf-indigo); padding-left:12px; max-width:100ch; } .cmf-mx-note b { color:var(--cmf-depth); } /* ================= WGS-72 dedup: one clean cross-link to QI, not a data panel ========== */ .cmf-qi-link a { font-size:13px; font-weight:600; color:var(--cmf-indigo); text-decoration:none; } .cmf-qi-link a:hover { text-decoration:underline; } /* ================= LESS WORDS: the reasoning is discoverable, not declaimed ============= */ .cmf-why { margin-top:12px; } .cmf-why summary { cursor:pointer; font-size:12px; font-weight:600; color:var(--cmf-indigo); list-style:none; display:inline-flex; align-items:center; gap:5px; padding:4px 0; } .cmf-why summary::-webkit-details-marker { display:none; } .cmf-why summary::before { content:"›"; font-size:15px; line-height:1; transition:transform .15s; display:inline-block; } .cmf-why[open] summary::before { transform:rotate(90deg); } .cmf-why p { margin:8px 0 0; font-size:12px; line-height:1.65; color:var(--cmf-muted); max-width:100ch; } .cmf-verdict .cmf-why summary { color:#C4B5FD; } .cmf-verdict .cmf-why p { color:#E9E4FF; } /* ================= MOVE THE ASSUMPTIONS, WATCH THE MONEY MOVE ========================== */ .cmf-assume { background:#FBFAFF; } .cmf-reset { border:0.67px solid var(--cmf-line); background:#FFF; border-radius:9999px; padding:7px 14px; font-family:inherit; font-size:12px; font-weight:600; color:var(--cmf-muted); cursor:pointer; } .cmf-reset:hover { border-color:var(--cmf-indigo); color:var(--cmf-indigo); } .cmf-live { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:22px; } .cmf-live-item { flex:1 1 200px; border:0.67px solid var(--cmf-line); border-radius:12px; padding:14px 16px; background:#FFF; } .cmf-live-item span { display:block; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.4px; color:var(--cmf-muted); margin-bottom:4px; } .cmf-live-item b { display:block; font-family:var(--font-head, 'Sansation', 'Poppins', sans-serif); font-size:26px; line-height:1.1; transition:color .2s; } .cmf-live-item em { display:block; font-style:normal; font-size:11px; color:var(--cmf-muted); margin-top:4px; line-height:1.5; } .cmf-live-item.ok { background:var(--cmf-ok-bg); border-color:#A7E3B8; } .cmf-live-item.ok b { color:var(--cmf-ok); } .cmf-live-item.bad { background:var(--cmf-bad-bg); border-color:#FCD9A0; } .cmf-live-item.bad b { color:var(--cmf-bad); } .cmf-live-locked { background:#FEF2F2; border:1px solid #FCA5A5; border-radius:12px; padding:14px 16px; font-size:13px; line-height:1.6; color:#7F1D1D; margin-bottom:22px; } .cmf-live-locked b { color:#991B1B; } .cmf-sl-grid { display:flex; gap:24px; flex-wrap:wrap; } .cmf-sl-col { flex:1 1 260px; } .cmf-sl-col h3 { font-family:var(--font-head, 'Sansation', 'Poppins', sans-serif); font-size:13px; font-weight:600; margin:0 0 12px; display:flex; align-items:center; gap:8px; } .cmf-sl-col h3 i { font-style:normal; font-size:10px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; border-radius:9999px; padding:3px 8px; background:#F3F4F6; color:#6B7280; } .cmf-sl-col h3 i.cmf-badge-proda { background:#EEF2FF; color:var(--cmf-indigo); } .cmf-slider { display:block; margin-bottom:14px; cursor:help; } .cmf-sl-top { display:flex; justify-content:space-between; align-items:baseline; font-size:12px; margin-bottom:4px; } .cmf-sl-top b { font-weight:500; color:#374151; border-bottom:1px dotted #C7C2D8; } .cmf-sl-top output { font-family:var(--font-head, 'Sansation', 'Poppins', sans-serif); font-weight:700; font-size:13px; color:var(--cmf-indigo); } .cmf-slider input[type=range] { width:100%; accent-color:var(--cmf-indigo); cursor:grab; } .cmf-slider input[type=range]:active { cursor:grabbing; } /* Dim only what is about to change. Redrawing the whole page on every pixel of a drag makes the surface strobe; the user's eye must be allowed to stay where they put it. */ .cmf-wrap.busy .cmf-live-item b, .cmf-wrap.busy .cmf-m-item b { opacity:.35; } /* ================= SCRUB THE FORWARD ROSTER ============================================ */ .cmf-scrub { display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .cmf-sbtn { width:30px; height:30px; border-radius:8px; border:0.67px solid var(--cmf-line); background:#FFF; font-size:17px; font-weight:700; line-height:1; cursor:pointer; color:var(--cmf-indigo); } .cmf-sbtn:hover:not(:disabled) { background:var(--cmf-indigo); color:#FFF; border-color:var(--cmf-indigo); } .cmf-sbtn:disabled { opacity:.35; cursor:not-allowed; } .cmf-scrub-v { font-family:var(--font-head, 'Sansation', 'Poppins', sans-serif); font-size:13px; font-weight:700; min-width:120px; text-align:center; } .cmf-scrub em { font-style:normal; font-size:11px; color:var(--cmf-muted); } .cmf-scrub-note { flex-basis:100%; font-size:11px; color:var(--cmf-indigo); font-weight:600; } .cmf-bar.cmf-scrubbed { stroke:#4330F5; stroke-width:1; } .cmf-bar[data-day] { cursor:pointer; } .cmf-bar[data-day]:hover { opacity:.6; } /* ================= THE SIMULATOR'S CONSCIENCE (W33 — P0) ================================ Sits directly under the +/- stepper, because the person cutting the shift must find out what the cut IS at the moment they make it — not at the top of the page, not one scroll away. A statutory breach and a physical impossibility get the SAME weight: both are STOP. */ .cmf-guard { margin:12px 0 0; border-radius:10px; padding:12px 14px; border:1px solid var(--cmf-line); background:#FFF; } .cmf-guard.cmf-g-stop { border:1.5px solid var(--cmf-crit); background:#FEF2F2; } .cmf-guard.cmf-g-warn { border:1.5px solid #B45309; background:#FFFBEB; } .cmf-guard.cmf-g-note { border:1px solid var(--cmf-line); background:var(--cmf-wash, #F8FAFC); } /* The label that makes a hypothetical impossible to mistake for an accusation. */ .cmf-g-tag { font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--cmf-muted); margin-bottom:8px; } .cmf-g-stop .cmf-g-tag { color:var(--cmf-crit); } .cmf-g-facts { display:flex; flex-wrap:wrap; gap:16px; margin-bottom:10px; font-size:12px; color:var(--cmf-ink); } .cmf-g-facts b { font-family:var(--font-head, 'Sansation', 'Poppins', sans-serif); font-size:14px; font-weight:700; } .cmf-g-stop .cmf-g-facts b { color:var(--cmf-crit); } .cmf-g-row + .cmf-g-row { margin-top:10px; padding-top:10px; border-top:1px dashed var(--cmf-line); } .cmf-g-row b { display:block; font-family:var(--font-head, 'Sansation', 'Poppins', sans-serif); font-size:14px; font-weight:700; margin-bottom:4px; } .cmf-g-stop .cmf-g-row b { color:var(--cmf-crit); } .cmf-g-row p { margin:0; font-size:12.5px; line-height:1.6; color:var(--cmf-ink); } /* The sentence that refuses to price what a breach "saves". It is the most important line in the block and it must not read as fine print. */ .cmf-g-np { margin-top:6px !important; padding-left:10px; border-left:2px solid var(--cmf-crit); font-weight:600; color:#7F1D1D !important; } .cmf-g-cav { margin-top:6px !important; font-size:11.5px !important; color:var(--cmf-muted) !important; font-style:italic; } /* ================= CLICK A DAY ========================================================= */ .cmf-daycard { position:relative; margin-top:16px; border:0.67px solid var(--cmf-line); border-radius:12px; padding:18px 20px; background:#FBFAFF; } .cmf-dayx { position:absolute; top:10px; right:12px; border:0; background:transparent; font-size:20px; line-height:1; color:var(--cmf-muted); cursor:pointer; } .cmf-day-h { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:14px; } .cmf-day-h b { font-family:var(--font-head, 'Sansation', 'Poppins', sans-serif); font-size:15px; } .cmf-tag { font-size:10px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; border-radius:9999px; padding:3px 9px; background:#F3F4F6; color:#6B7280; } .cmf-tag-plan { background:#EEEBFE; color:#4330F5; } .cmf-tag-done { background:var(--cmf-ok-bg); color:var(--cmf-ok); } .cmf-tag-scrub { background:#FEF3C7; color:#92400E; } .cmf-day-grid { display:flex; gap:20px; flex-wrap:wrap; } .cmf-day-grid div { min-width:110px; } .cmf-day-grid b { display:block; font-family:var(--font-head, 'Sansation', 'Poppins', sans-serif); font-size:20px; } .cmf-day-grid span { display:block; font-size:11px; color:var(--cmf-muted); } .cmf-day-ev { margin:14px 0 0; font-size:12px; color:#9F1239; } .cmf-skel { height:420px; border-radius:12px; background:linear-gradient(90deg,#F3F4F6 25%,#E5E7EB 37%,#F3F4F6 63%); background-size:400% 100%; animation:cmf-sh 1.2s ease-in-out infinite; } @keyframes cmf-sh { 0% { background-position:100% 50%; } 100% { background-position:0 50%; } } @media (max-width:900px) { .cmf-chart { height:280px; } .cmf-picker { min-width:100%; } } /* ---- THE PROVENANCE HOVER --------------------------------------------------------- Andrew: "signify via a hover over which product / integration data is coming from... and the last refresh date / time." A number a CFO can trace to its source and its freshness is the whole value proposition. var(--cmf-*) here, because that is THIS file's convention (142 of them). I shipped var() into ui/support.css earlier, whose gate demands literal hex only, and got a deserved red — a convention is a property of the file you are in, not of the last file you edited. So: check, then write. It is DELIBERATELY QUIET. This is not a warning and it is not an apology — it is a label on a number, and it earns its place by being true. Muted until you look at it. */ .cmf-source { display: inline-flex; align-items: center; gap: 6px; position: relative; margin: 6px 0 0; padding: 2px 0; font-size: 11.5px; color: var(--cmf-muted); cursor: help; width: fit-content; } .cmf-source-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cmf-muted); flex: none; } /* LIVE is the only state that gets colour. Today nothing is live, so nothing is green — the dot is grey and the sentence says why. When a real pull lands it turns itself. */ .cmf-source.is-live .cmf-source-dot { background: var(--cmf-ok); } .cmf-source.is-live { color: var(--cmf-ok); } .cmf-source-name { text-decoration: underline dotted; text-underline-offset: 3px; } /* The tooltip. `title` carries it too, so it survives with CSS off and for a screen reader; this is the readable version. */ .cmf-source-tip { position: absolute; left: 0; top: calc(100% + 8px); z-index: 40; width: max-content; max-width: 340px; padding: 9px 11px; border-radius: 8px; background: var(--cmf-ink, #1F2937); color: #fff; font-size: 12px; line-height: 1.5; box-shadow: 0 6px 20px rgba(0,0,0,.18); opacity: 0; visibility: hidden; transform: translateY(-3px); transition: opacity .12s ease, transform .12s ease, visibility .12s; } .cmf-source:hover .cmf-source-tip, .cmf-source:focus .cmf-source-tip, .cmf-source:focus-within .cmf-source-tip { opacity: 1; visibility: visible; transform: none; }