/* ════════════════════════════════════════════════════════════════════════════ FIX_WWK_PEOPLE_S1_2026_06_10 — People Manager Command Overview styles, scoped under #page-people. Built TO design_samples/people/people_1_command_overview.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). ════════════════════════════════════════════════════════════════════════════ */ /* FIX_TEXT_INK_SLICE1_PEOPLE_2026_08_16 -- text-ink contrast remediation, slice 1 of 6. ASCII-only per the region convention above. WHAT: 235 secondary-text ink declarations, on 234 distinct lines of this #page-people region, moved off a hardcoded warm-grey literal onto the global subordinate-text token --dim (value 959595, declared once in the first :root block of this file). 235 sites on 234 lines because one line carries two rules. NOT pattern-matched and NOT line-ranged: every site is an enumerated failing record from tools/text_ink_contrast_scan.js -- the instrument shipped under FIX_TEXT_INK_ANCHOR_2026_07_28 -- driven at the base commit, then compared as a SET across the pin advance against two controls proven able to detect a difference. WHY --dim AND NOT --text-dim: same role, not two roles -- one declaring comment says secondary text, the other subordinate text. What separates them is COMPLIANCE. --text-dim records itself as measured NOT WCAG AA compliant on three of the four dark backdrops it paints on, and carries a standing in-source instruction not to move its declared value until the anchored per-site set exists, so raising it globally is prohibited here by source rather than by preference. --dim is documented at its own declaration as deliberately not --text-dim: the binary-searched MINIMUM neutral grey clearing 4.5:1 on all 46 backdrops measured for FIX_TOKEN_SCOPE_GLOBAL_2026_07_28. Decided 2026-08-24 under the founder's delegation of technical decision-points. MEASURED: across the 12 painted backdrops the scanner resolved for these sites, worst post-change ratio is 4.6389:1 against a 4.5:1 AA floor; zero sites remain below it; zero of those backdrops is lighter than the new ink, so lightening never reduces contrast here; and the lightest is darker than the 0.007-margin binding site named in the --dim declaration comment. HONEST LIMIT -- DO NOT READ THE SCANNER AS PROOF THESE PASS: it does not track the token idiom, so these sites LEAVE its field of view rather than become provably passing. Its count falling measures DEPARTURE, not correctness. Rendered contrast is what evidences legibility, and no mechanical gate on this project covers CSS cascade, specificity or contrast at all. */ #page-people .po-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 4px; } #page-people .po-head-row h1 .po-pin { font-size: 10.5px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: #C9A84C; background: linear-gradient(180deg, rgba(201,168,76,0.16), rgba(201,168,76,0.05)); border: 1px solid rgba(201,168,76,0.35); border-radius: 999px; padding: 5px 11px; font-family: 'Montserrat', sans-serif; } #page-people .po-head-row .po-sub { color: var(--dim); font-size: 13px; margin-top: 5px; } /* FIX_KPIWIN_P2_ROLLOUT_2026_07_01 — People snapshot "as of today" marker (surface twin of #page-crm .co-asof). Rendered on People SNAPSHOT tiles (Team / Payroll / Coverage gaps / Time-off) only when a NON-MTD window is active — a point-in-time count has no period form. */ #page-people .po-asof { font-size: 10px; color: var(--dim); font-style: italic; margin-left: 4px; border: 1px solid rgba(255,255,255,0.08); border-radius: 999px; padding: 1px 7px; white-space: nowrap; } #page-people .po-statusline { display: inline-flex; align-items: center; gap: 10px; background: #1C1A17; border: 1px solid rgba(255,255,255,0.07); border-radius: 999px; padding: 9px 16px 9px 14px; font-size: 12.5px; color: #C4BFB6; white-space: nowrap; box-shadow: 0 8px 32px rgba(0,0,0,0.45); margin: 14px 0 18px; } #page-people .po-statusline .po-dot { width: 9px; height: 9px; border-radius: 50%; background: #E8943A; box-shadow: 0 0 0 4px rgba(232,148,58,0.16); animation: poPulse 2.6s cubic-bezier(0.4,0,0.2,1) infinite; } #page-people .po-statusline .po-over { color: #E8943A; font-weight: 700; } /* KPI strip — 6 tiles */ #page-people .po-kpis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 13px; margin-bottom: 16px; } #page-people .po-kpi { background: #232120; border: 1px solid rgba(255,255,255,0.07); border-radius: 10px; padding: 15px 16px 14px; position: relative; overflow: hidden; box-shadow: 0 8px 32px rgba(0,0,0,0.45); } #page-people .po-kpi .po-lbl { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--dim); font-weight: 600; margin-bottom: 8px; } #page-people .po-kpi .po-val { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 26px; color: #F0EBE2; line-height: 1; letter-spacing: -0.01em; } #page-people .po-kpi.po-k-labor .po-val { color: #E8943A; } #page-people .po-kpi .po-foot { font-size: 11px; color: var(--dim); margin-top: 7px; } #page-people .po-kpi .po-tag, #page-people .truecost-refused-body .po-tag { font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 2px 7px; border-radius: 5px; } /* FIX_PEOPLE_RAIL_STORELESS_2026_09_14 — WIDENED, not duplicated: renderPeopleTrueCost's books-refusal card (src/render_people.js) reuses __viqRefusedFoot() verbatim, the SAME server-authored .po-tag.po-due chip the People Overview KPI tiles already render, but its card lives under #page-people OUTSIDE any .po-kpi ancestor — the selector above was scoped to .po-kpi only, so the chip rendered with NO background/color at all (measured: computed backgroundColor/color both empty string) even though source-verify and every mechanical gate passed. Render-verify caught it; a source-verify-only check structurally cannot. */ #page-people .po-kpi .po-tag.po-over { color: #E8943A; background: rgba(232,148,58,0.14); } #page-people .po-kpi .po-tag.po-due, #page-people .truecost-refused-body .po-tag.po-due { color: #5B9BD5; background: rgba(91,155,213,0.14); } #page-people .po-kpi .po-tag.po-warn { color: #E05555; background: rgba(224,85,85,0.14); } #page-people .po-kpi .po-tag.po-ok { color: #4CAF7D; background: rgba(76,175,125,0.14); } #page-people .po-kpi.po-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); } #page-people .po-kpi .po-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-people .po-kpi:hover .po-expand { opacity: .9; transform: scale(1.12); } #page-people .po-kpi .po-hint-i { position: absolute; left: 16px; bottom: 11px; font-size: 8.5px; letter-spacing: .04em; color: var(--dim); opacity: 0; transition: opacity .2s cubic-bezier(0.4,0,0.2,1); font-weight: 600; white-space: nowrap; pointer-events: none; } #page-people .po-kpi:hover .po-hint-i { opacity: .7; } /* Who's on now presence bar */ #page-people .po-onnow { display: flex; align-items: center; gap: 16px; background: linear-gradient(180deg, rgba(76,175,125,0.05), rgba(76,175,125,0.015)); border: 1px solid rgba(76,175,125,0.18); border-radius: 10px; padding: 13px 18px; margin-bottom: 22px; box-shadow: 0 8px 32px rgba(0,0,0,0.45); } #page-people .po-onnow .po-live { display: inline-flex; align-items: center; gap: 8px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #4CAF7D; font-family: 'Montserrat', sans-serif; flex-shrink: 0; } #page-people .po-onnow .po-blink { width: 8px; height: 8px; border-radius: 50%; background: #4CAF7D; box-shadow: 0 0 8px #4CAF7D; animation: poBlink 1.8s ease-in-out infinite; } #page-people .po-onnow .po-who-list { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } #page-people .po-onnow .po-who-empty { font-size: 12.5px; color: var(--dim); } #page-people .po-who { display: flex; align-items: center; gap: 9px; } #page-people .po-av { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 12px; color: #1a160c; box-shadow: 0 2px 8px rgba(0,0,0,0.35); } #page-people .po-av.po-av-gold { background: linear-gradient(160deg, #C9A84C, #9c7f33); } #page-people .po-av.po-av-green { background: linear-gradient(160deg, #6fcf9a, #3a8a63); color: #0f1f17; } #page-people .po-av.po-av-blue { background: linear-gradient(160deg, #84b8e6, #3f6f9e); color: #0d1722; } #page-people .po-who .po-who-name { font-size: 12.5px; color: #F0EBE2; font-weight: 600; } #page-people .po-who .po-who-out { font-size: 11px; color: var(--dim); } /* Main two-column grid */ #page-people .po-main { display: grid; grid-template-columns: 1.55fr 1fr; gap: 22px; align-items: start; } #page-people .po-sec-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; gap: 10px; } #page-people .po-sec-head h2 .po-count { font-size: 11px; font-weight: 700; color: #C9A84C; background: rgba(201,168,76,0.12); border: 1px solid rgba(201,168,76,0.3); border-radius: 999px; padding: 2px 9px; font-family: 'Montserrat', sans-serif; } #page-people .po-sec-head .po-hint { font-size: 11px; color: var(--dim); } /* Attention queue */ #page-people .po-queue { display: flex; flex-direction: column; gap: 11px; } #page-people .po-att { display: flex; align-items: center; gap: 14px; background: #232120; border: 1px solid rgba(255,255,255,0.07); border-radius: 10px; padding: 14px 16px; box-shadow: 0 8px 32px rgba(0,0,0,0.45); position: relative; transition: border-color 0.2s cubic-bezier(0.4,0,0.2,1), transform 0.2s cubic-bezier(0.4,0,0.2,1); } #page-people .po-att .po-sev { width: 4px; align-self: stretch; border-radius: 4px; flex-shrink: 0; margin: -2px 0; } #page-people .po-att.po-crit .po-sev { background: #E05555; box-shadow: 0 0 12px rgba(224,85,85,0.5); } #page-people .po-att.po-watch .po-sev { background: #E8943A; } #page-people .po-att.po-info .po-sev { background: #5B9BD5; } #page-people .po-att .po-ic { width: 40px; height: 40px; border-radius: 7px; flex-shrink: 0; display: grid; place-items: center; } #page-people .po-att.po-crit .po-ic { background: rgba(224,85,85,0.13); } #page-people .po-att.po-watch .po-ic { background: rgba(232,148,58,0.13); } #page-people .po-att.po-info .po-ic { background: rgba(91,155,213,0.13); } #page-people .po-att .po-att-body { flex: 1; min-width: 0; } #page-people .po-att .po-a-cat { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 3px; font-family: 'Montserrat', sans-serif; color: var(--dim); } #page-people .po-att.po-crit .po-a-cat { color: #E05555; } #page-people .po-att.po-watch .po-a-cat { color: #E8943A; } #page-people .po-att.po-info .po-a-cat { color: #5B9BD5; } #page-people .po-att .po-a-line { font-size: 13.5px; color: #F0EBE2; font-weight: 600; } #page-people .po-att .po-a-line span { color: var(--dim); font-weight: 400; } #page-people .po-att .po-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } #page-people .po-btn { font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 600; border-radius: 7px; padding: 8px 14px; cursor: pointer; border: 1px solid rgba(255,255,255,0.12); background: #1C1A17; color: #C4BFB6; transition: all 0.18s cubic-bezier(0.4,0,0.2,1); white-space: nowrap; } #page-people .po-btn.po-primary { background: linear-gradient(180deg, #C9A84C, #9c7f33); color: #1a160c; border-color: transparent; font-weight: 700; box-shadow: 0 4px 14px -4px rgba(201,168,76,0.28); } #page-people .po-btn.po-ghost { background: transparent; color: var(--dim); } /* Right column minis */ #page-people .po-rcol { display: flex; flex-direction: column; gap: 22px; } #page-people .po-card { background: #232120; border: 1px solid rgba(255,255,255,0.07); border-radius: 16px; padding: 18px 18px 20px; box-shadow: 0 8px 32px rgba(0,0,0,0.45); } #page-people .po-mini-row { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 9px; } #page-people .po-mini-row .po-big { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 30px; color: #E8943A; line-height: 1; letter-spacing: -0.01em; } #page-people .po-mini-row .po-util-big { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 30px; color: #5B9BD5; line-height: 1; letter-spacing: -0.01em; } #page-people .po-mini-row .po-tgt { font-size: 12px; color: var(--dim); text-align: right; } #page-people .po-track { position: relative; height: 12px; border-radius: 999px; background: rgba(255,255,255,0.05); overflow: hidden; margin: 6px 0 4px; } #page-people .po-track .po-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; transition: width 1.1s cubic-bezier(0.4,0,0.2,1); } #page-people .po-track .po-fill.po-fill-labor { background: linear-gradient(90deg, #d9a14a, #E8943A); } #page-people .po-track .po-fill.po-fill-util { background: linear-gradient(90deg, #3f6f9e, #5B9BD5); } #page-people .po-mini-foot { font-size: 11px; color: var(--dim); display: flex; justify-content: space-between; margin-top: 8px; } #page-people .po-mini-foot .po-over { color: #E8943A; font-weight: 600; } /* Quick-access tiles */ #page-people .po-tools { margin-top: 26px; } #page-people .po-section-label { font-family: 'Montserrat', sans-serif; font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--dim); font-weight: 700; margin-bottom: 14px; } #page-people .po-tile-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; } #page-people .po-tile { background: #232120; border: 1px solid rgba(255,255,255,0.07); border-radius: 10px; padding: 18px 16px 16px; box-shadow: 0 8px 32px rgba(0,0,0,0.45); cursor: pointer; position: relative; overflow: hidden; transition: border-color 0.2s cubic-bezier(0.4,0,0.2,1), transform 0.2s cubic-bezier(0.4,0,0.2,1); } #page-people .po-tile.po-tile-coming { cursor: default; opacity: 0.82; } #page-people .po-tile .po-t-ico { width: 42px; height: 42px; border-radius: 7px; margin-bottom: 14px; display: grid; place-items: center; background: rgba(201,168,76,0.1); border: 1px solid rgba(201,168,76,0.22); } #page-people .po-tile .po-t-name { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 15px; color: #F0EBE2; margin-bottom: 4px; } #page-people .po-tile .po-t-stat { font-size: 12px; color: var(--dim); display: flex; align-items: center; gap: 6px; } #page-people .po-tile .po-pip { width: 6px; height: 6px; border-radius: 50%; display: inline-block; } #page-people .po-tile .po-pip.po-amber { background: #E8943A; } #page-people .po-tile .po-pip.po-blue { background: #5B9BD5; } #page-people .po-tile .po-pip.po-green { background: #4CAF7D; } #page-people .po-tile .po-pip.po-dim { background: #8A857D; } #page-people .po-footnote { font-size: 11px; color: var(--dim); margin-top: 24px; } @media (max-width: 1080px) { #page-people .po-kpis { grid-template-columns: repeat(3, 1fr); } #page-people .po-main { grid-template-columns: 1fr; } #page-people .po-tile-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 640px) { #page-people .po-kpis { grid-template-columns: repeat(2, 1fr); } #page-people .po-tile-grid { grid-template-columns: repeat(2, 1fr); } } @media (prefers-reduced-motion: reduce) { #page-people .po-statusline .po-dot, #page-people .po-onnow .po-blink { animation: none !important; } } /* ════════════════════════════════════════════════════════════════════════════ FIX_PEOPLE_C1_ANALYTICS_2026_06_16 (v1.25) — People → Analytics (Workforce Analytics, people_4) scoped style block. Built TO design_samples/people/people_4_workforce_analytics.html at ultra-HD fidelity. NAMESPACE: the sample uses generic classnames (.kpi/.panel/.cov/.head) that WOULD collide with existing surfaces, so EVERY selector here is prefixed pa-* ("people analytics") and scoped under #page-people. C1a ships scaffold + KPI band + hero trend + hours bars; C1b adds the donut / coverage / retention panels + modal layer (those CSS rules ship with C1b alongside their renderers). DERIVE-ONLY surface — CSS only, no behaviour. */ /* FIX_SHELL_FULLWIDTH_S1_2026_06_17 (Rule 6) — relax page-wrapper max-width so content fills width; was max-width:1320px. CSS-only, content byte-unchanged. */ #page-people .pa-wrap { max-width: none; margin: 0 auto; } #page-people .pa-tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } /* breadcrumb + header */ #page-people .pa-crumb { display: flex; align-items: center; gap: 9px; font-size: 12px; color: var(--dim); letter-spacing: .04em; font-weight: 500; margin-bottom: 18px; flex-wrap: wrap; } #page-people .pa-crumb .pa-sep { opacity: .4; } #page-people .pa-crumb .pa-here { color: #C9A84C; } #page-people .pa-crumb .pa-chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border: 1px solid rgba(255,255,255,0.07); border-radius: 100px; background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(0,0,0,0.15)); } #page-people .pa-crumb .pa-cdot { width: 6px; height: 6px; border-radius: 50%; background: #C9A84C; box-shadow: 0 0 8px rgba(201,168,76,0.45); } #page-people .pa-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 26px; } #page-people .pa-head h1 .pa-accent { background: linear-gradient(92deg, #E7CE82, #C9A84C 55%, #9d7e2f); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } #page-people .pa-head .pa-sub { margin-top: 10px; font-size: 13.5px; color: var(--dim); display: flex; flex-wrap: wrap; align-items: center; gap: 9px; } #page-people .pa-pill { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px; border-radius: 100px; font-size: 12px; font-weight: 600; border: 1px solid rgba(255,255,255,0.07); } #page-people .pa-pill.pa-over { color: #E8943A; background: rgba(232,148,58,0.09); } #page-people .pa-pill.pa-util { color: #5B9BD5; background: rgba(91,155,213,0.09); } #page-people .pa-pill .pa-arrow { font-size: 11px; } #page-people .pa-head .pa-feeds { font-size: 11.5px; color: var(--dim); letter-spacing: .03em; margin-top: 8px; } #page-people .pa-head .pa-feeds span { color: #5B9BD5; font-weight: 600; } /* KPI tiles */ #page-people .pa-kpis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; margin-bottom: 20px; } #page-people .pa-kpi { position: relative; background: linear-gradient(160deg, #26221D, #1A1714); border: 1px solid rgba(255,255,255,0.07); border-radius: 12px; padding: 15px 15px 14px; overflow: hidden; cursor: pointer; box-shadow: 0 1px 0 rgba(255,255,255,0.03) inset, 0 18px 34px -26px rgba(0,0,0,0.9); transition: transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s ease, border-color .18s ease; } #page-people .pa-kpi:focus-visible { outline: 2px solid #C9A84C; outline-offset: 2px; } #page-people .pa-kpi[data-pa-accent=gold] { --pa-accent: #C9A84C; } #page-people .pa-kpi[data-pa-accent=green] { --pa-accent: #4CAF7D; } #page-people .pa-kpi[data-pa-accent=blue] { --pa-accent: #5B9BD5; } #page-people .pa-kpi[data-pa-accent=amber] { --pa-accent: #E8943A; } #page-people .pa-kpi[data-pa-accent=red] { --pa-accent: #E05555; } #page-people .pa-kpi .pa-lab { font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--dim); font-weight: 600; } #page-people .pa-kpi .pa-val { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 26px; color: #F0EBE2; margin-top: 8px; letter-spacing: -.01em; } #page-people .pa-kpi .pa-val .pa-cur, #page-people .pa-kpi .pa-val .pa-u { font-size: 14px; color: var(--dim); font-weight: 600; } #page-people .pa-kpi .pa-val .pa-cur { margin-right: 1px; vertical-align: 4px; } #page-people .pa-kpi .pa-val .pa-u { margin-left: 2px; } #page-people .pa-kpi .pa-meta { margin-top: 6px; font-size: 11px; color: var(--dim); display: flex; align-items: center; gap: 5px; } #page-people .pa-kpi .pa-meta.pa-ctxt { color: var(--pa-accent, #C9A84C); } #page-people .pa-kpi .pa-gaugewrap { position: absolute; right: 12px; top: 11px; } #page-people .pa-kpi .pa-ringwrap { position: absolute; right: 12px; top: 12px; } #page-people .pa-kpi .pa-coming { font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: var(--dim); font-weight: 600; border: 1px solid rgba(255,255,255,0.08); border-radius: 5px; padding: 1px 6px; display: inline-block; } /* layout grid */ #page-people .pa-row2 { display: grid; grid-template-columns: 1.38fr 1fr; gap: 18px; margin-bottom: 18px; } @media (max-width: 980px) { #page-people .pa-row2 { grid-template-columns: 1fr; } } #page-people .pa-panel { position: relative; background: linear-gradient(160deg, #26221D, #1A1714); border: 1px solid rgba(255,255,255,0.07); border-radius: 22px; padding: 20px 22px 22px; box-shadow: 0 26px 50px -34px rgba(0,0,0,0.95), 0 1px 0 rgba(255,255,255,0.03) inset; } #page-people .pa-ph { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 16px; } #page-people .pa-ph .pa-t { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 16px; color: #F0EBE2; letter-spacing: -.01em; } #page-people .pa-ph .pa-d { font-size: 12px; color: var(--dim); margin-top: 3px; } #page-people .pa-ph .pa-legend { display: flex; gap: 14px; font-size: 11.5px; color: var(--dim); flex-wrap: wrap; align-items: center; } #page-people .pa-ph .pa-lg { display: flex; align-items: center; gap: 6px; } #page-people .pa-ph .pa-sw { width: 14px; height: 8px; border-radius: 3px; } #page-people .pa-ph .pa-sw.pa-line { background: linear-gradient(90deg, #E7CE82, #C9A84C); } #page-people .pa-ph .pa-sw.pa-target { background: repeating-linear-gradient(90deg, #E05555 0 4px, transparent 4px 7px); } /* hero trend chart */ #page-people .pa-hero-wrap { position: relative; width: 100%; height: 340px; } #page-people .pa-hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; } #page-people .pa-hero-foot { display: flex; justify-content: space-between; margin-top: 9px; font-size: 11px; color: var(--dim); letter-spacing: .04em; } /* hours by person bars */ #page-people .pa-hbars { display: flex; flex-direction: column; gap: 11px; margin-top: 2px; } #page-people .pa-hrow { display: grid; grid-template-columns: 88px 1fr 52px; align-items: center; gap: 11px; } #page-people .pa-hrow .pa-hnm { font-size: 12.5px; color: #C4BFB6; font-weight: 600; display: flex; align-items: center; gap: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #page-people .pa-htrack { position: relative; height: 18px; border-radius: 6px; background: rgba(255,255,255,0.035); overflow: hidden; } #page-people .pa-hfill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 6px; transition: width 1s cubic-bezier(.2,.7,.3,1); } #page-people .pa-hfill.pa-g { background: linear-gradient(90deg, #5fc295, #4CAF7D); } #page-people .pa-hfill.pa-gold { background: linear-gradient(90deg, #E7CE82, #C9A84C); } #page-people .pa-hval { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 13px; color: #F0EBE2; text-align: right; } /* honest-empty panel/tile state (shared) */ #page-people .pa-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 120px; text-align: center; color: var(--dim); font-size: 12.5px; padding: 20px; } #page-people .pa-empty .pa-empty-ic { font-size: 22px; opacity: .5; } /* FIX_PEOPLE_C1B_ANALYTICS_2026_06_16 (v1.25) — C1b additions: row3 grid + cost-by-role donut + coverage neutral strip + retention/tenure + clickable-panel affordance + modal layer. Built TO the people_4 sample at ultra-HD fidelity; every selector pa-*-prefixed + #page-people-scoped. ASCII-only comments (a non-ASCII char silently drops the rule from the CSSOM — the L18.8 lesson). */ #page-people .pa-row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; margin-bottom: 18px; } @media (max-width: 980px) { #page-people .pa-row3 { grid-template-columns: 1fr; } } /* clickable panel + open-hint (drill affordance) */ #page-people .pa-panel.pa-click { cursor: pointer; } #page-people .pa-panel.pa-click { transition: transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s ease, border-color .18s ease; } #page-people .pa-openhint { font-size: 10.5px; color: var(--dim); letter-spacing: .04em; display: inline-flex; align-items: center; gap: 5px; opacity: .85; } #page-people .pa-openhint .pa-ar { color: #C9A84C; } /* donut cost by role */ #page-people .pa-donut-grid { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; } #page-people .pa-donut-wrap { position: relative; width: 188px; height: 188px; flex: 0 0 auto; } #page-people .pa-donut-canvas { width: 188px; height: 188px; } #page-people .pa-donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; } #page-people .pa-donut-center .pa-dcl { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); font-weight: 600; } #page-people .pa-donut-center .pa-dct { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 23px; color: #F0EBE2; margin-top: 2px; } #page-people .pa-donut-center .pa-dcs { font-size: 10.5px; color: var(--dim); margin-top: 1px; } #page-people .pa-clegend { flex: 1 1 160px; display: flex; flex-direction: column; gap: 9px; min-width: 150px; } #page-people .pa-cl { display: grid; grid-template-columns: 12px 1fr auto auto; align-items: center; gap: 9px; font-size: 12.5px; } #page-people .pa-cdot2 { width: 11px; height: 11px; border-radius: 3px; } #page-people .pa-cnm { color: #C4BFB6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #page-people .pa-cvl { color: #F0EBE2; font-weight: 600; } #page-people .pa-cpc { color: var(--dim); font-size: 11.5px; min-width: 32px; text-align: right; } /* coverage neutral strip */ #page-people .pa-cov { display: flex; flex-direction: column; gap: 7px; margin-top: 2px; } #page-people .pa-covrow { display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: 10px; } #page-people .pa-cday { font-size: 11px; color: var(--dim); font-weight: 600; letter-spacing: .03em; } #page-people .pa-covbars { display: flex; gap: 3px; height: 30px; align-items: flex-end; } #page-people .pa-covcell { flex: 1; border-radius: 4px 4px 2px 2px; position: relative; transition: height .7s cubic-bezier(.2,.7,.3,1); } #page-people .pa-covcell.pa-staffed { background: linear-gradient(180deg, rgba(76,175,125,0.55), rgba(76,175,125,0.30)); } #page-people .pa-covcell.pa-nostaff { background: rgba(255,255,255,0.06); } #page-people .pa-cov-key { display: flex; gap: 16px; font-size: 11px; color: var(--dim); margin-top: 12px; flex-wrap: wrap; } #page-people .pa-cov-key .pa-k { display: flex; align-items: center; gap: 6px; } #page-people .pa-cov-key .pa-ks { width: 12px; height: 10px; border-radius: 3px; } #page-people .pa-cov-key .pa-ks.pa-staffed { background: linear-gradient(180deg, rgba(76,175,125,0.55), rgba(76,175,125,0.30)); } #page-people .pa-cov-key .pa-ks.pa-nostaff { background: rgba(255,255,255,0.06); } #page-people .pa-covsig { margin-top: 14px; } #page-people .pa-covsig .pa-coming-note { display: flex; gap: 9px; align-items: flex-start; font-size: 12px; padding: 9px 11px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.07); background: rgba(255,255,255,0.02); color: var(--dim); } /* retention & tenure */ #page-people .pa-ret { display: flex; flex-direction: column; gap: 14px; } #page-people .pa-ret-big { display: flex; align-items: baseline; gap: 8px; } #page-people .pa-ret-big .pa-rv { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 42px; color: #F0EBE2; letter-spacing: -.02em; } #page-people .pa-ret-big .pa-ru { font-size: 14px; color: var(--dim); font-weight: 600; } #page-people .pa-tenbars { display: flex; gap: 4px; align-items: flex-end; height: 46px; margin-top: 2px; } #page-people .pa-tenbar { flex: 1; border-radius: 3px; background: linear-gradient(180deg, rgba(201,168,76,0.55), rgba(201,168,76,0.18)); height: 0; transition: height .7s cubic-bezier(.2,.7,.3,1); } #page-people .pa-ret-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } #page-people .pa-rstat { background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.045); border-radius: 10px; padding: 11px 12px; } #page-people .pa-rstat .pa-rsl { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); font-weight: 600; } #page-people .pa-rstat .pa-rsv { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 19px; color: #F0EBE2; margin-top: 5px; } #page-people .pa-rstat .pa-rsv .pa-coming { font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: var(--dim); font-weight: 600; border: 1px solid rgba(255,255,255,0.08); border-radius: 5px; padding: 1px 6px; display: inline-block; } @media (max-width: 1140px) { #page-people .pa-kpis { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 660px) { #page-people .pa-kpis { grid-template-columns: repeat(2, 1fr); } } /* ════════════════════════════════════════════════════════════════════════════ FIX_PEOPLE_C2A_INTELLIGENCE_2026_06_16 (v1.25) — People Intelligence surface styles, scoped under #page-people (the pi- = "people intelligence" prefix, so nothing collides with the People pa-/po- blocks above OR bleeds to other surfaces — the FIX_PEOPLEFOOTNOTE_BLEED scope-gate lesson). Built TO design_samples/people/people_5_people_intelligence.html at ultra-HD fidelity (the founder sample is the spec). Literal hex values mirror the sample's :root tokens. ASCII-only comments throughout (a non-ASCII char silently drops the rule from the CSSOM — the established L18.8 lesson, mirrored from the pa- block). C2a is a DERIVE-ONLY surface (read/compose) — these are presentation rules only, no behaviour. The C2b what-if scenario engine + rebalance-apply CSS (the .pi-scn / .pi-meter cluster) ships with C2b alongside those renderers. There is NO body-level overlay/modal in C2a (the recs panel extends inline; no pi- drill modal) so no un-scoping is required here — all C2a pi- rules stay #page-people-scoped. FIX_PEOPLE_C2B_COMMENT_TRUEUP_2026_07_24 (v1.25) -- CITATION TRUE-UP: the sample cited above is the SUPERSEDED generation. The current spec is design_samples/people/people_intelligence.html. The retired citation is retained as build provenance -- it records what these rules were built to -- and is annotated, not rewritten. */ /* FIX_SHELL_FULLWIDTH_S1_2026_06_17 (Rule 6) — relax page-wrapper max-width so content fills width; was max-width:1180px. CSS-only, content byte-unchanged. */ #page-people .pi-wrap { max-width: none; margin: 0 auto; } #page-people .pi-tnum { font-variant-numeric: tabular-nums; } /* breadcrumb */ #page-people .pi-crumb { display: flex; align-items: center; gap: 9px; font-size: 12px; color: var(--dim); text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; margin-bottom: 18px; flex-wrap: wrap; } #page-people .pi-crumb .pi-sep { opacity: 0.5; } #page-people .pi-crumb .pi-here { color: #C9A84C; } /* hero / Head of People */ #page-people .pi-hero { position: relative; background: linear-gradient(135deg, rgba(201,168,76,0.07), transparent 45%), #232120; border: 1px solid rgba(255,255,255,0.07); border-radius: 18px; padding: 28px 32px 30px; box-shadow: 0 18px 54px rgba(0,0,0,0.55); overflow: hidden; margin-bottom: 24px; } #page-people .pi-hero-top { display: flex; align-items: center; gap: 16px; position: relative; } #page-people .pi-avatar { position: relative; width: 56px; height: 56px; flex: 0 0 56px; border-radius: 50%; background: radial-gradient(circle at 32% 28%, #E7D08A, #C9A84C 55%, #8C6F2A); display: grid; place-items: center; box-shadow: 0 0 0 2px rgba(201,168,76,0.30), 0 0 30px rgba(201,168,76,0.45); } #page-people .pi-who { display: flex; flex-direction: column; gap: 2px; } #page-people .pi-who .pi-name { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 16px; color: #F0EBE2; } #page-people .pi-who .pi-role { font-size: 11.5px; color: #C9A84C; text-transform: uppercase; letter-spacing: 0.11em; font-weight: 600; } #page-people .pi-live-dot { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; font-size: 11.5px; color: var(--dim); } #page-people .pi-hero .pi-hsub { color: var(--dim); font-size: 13px; margin-bottom: 18px; } #page-people .pi-narration { position: relative; font-size: 17px; line-height: 1.72; color: #C4BFB6; max-width: 880px; font-weight: 400; border-left: 2px solid #C9A84C; padding-left: 18px; } #page-people .pi-narration .pi-good { color: #4CAF7D; font-weight: 600; } #page-people .pi-narration .pi-warn { color: #E8943A; font-weight: 600; } #page-people .pi-narration .pi-bad { color: #E05555; font-weight: 600; } /* FIX_PEOPLE_P1_SCHEDULED_BASIS_2026_07_03 (v1.25) — #12: the deterministic recommendation-body paragraph under the narration hook. Mirrors .pi-narration (color/width/left-rule alignment) at a lighter weight + top spacing so it reads as the follow-through to "…Here's what I'd do." rather than a new block. */ #page-people .pi-narration-body { position: relative; font-size: 15.5px; line-height: 1.68; color: #B7B2A9; max-width: 880px; font-weight: 400; border-left: 2px solid #C9A84C; padding-left: 18px; margin-top: 12px; } /* section scaffold */ #page-people .pi-section { margin-top: 28px; } #page-people .pi-sec-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; } #page-people .pi-sec-head .pi-tag { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.12em; color: #C9A84C; background: rgba(201,168,76,0.16); padding: 3px 10px; border-radius: 999px; font-weight: 700; } #page-people .pi-sec-head .pi-note { margin-left: auto; font-size: 12px; color: var(--dim); } #page-people .pi-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; } @media (max-width: 940px) { #page-people .pi-grid2 { grid-template-columns: 1fr; } } #page-people .pi-panel { background: #232120; border: 1px solid rgba(255,255,255,0.07); border-radius: 18px; padding: 22px 24px; box-shadow: 0 2px 14px rgba(0,0,0,0.30); } /* KPI strip */ #page-people .pi-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } @media (max-width: 940px) { #page-people .pi-kpis { grid-template-columns: repeat(2, 1fr); } } #page-people .pi-kpi { background: linear-gradient(160deg, #26221D, #1A1714); border: 1px solid rgba(255,255,255,0.07); border-radius: 12px; padding: 16px 18px; position: relative; overflow: hidden; transition: transform 0.24s cubic-bezier(0.2,0.7,0.3,1), border-color 0.24s ease; } #page-people .pi-kpi .pi-lbl { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--dim); font-weight: 600; } #page-people .pi-kpi .pi-val { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 25px; color: #F0EBE2; margin-top: 7px; line-height: 1; letter-spacing: -0.01em; } #page-people .pi-kpi .pi-val .pi-u { font-size: 14px; color: var(--dim); font-weight: 600; margin-left: 1px; } #page-people .pi-kpi .pi-meta { font-size: 11.5px; margin-top: 8px; color: var(--dim); } #page-people .pi-kpi .pi-meta.pi-good { color: #4CAF7D; } #page-people .pi-kpi .pi-meta.pi-warn { color: #E8943A; } #page-people .pi-kpi .pi-meta.pi-bad { color: #E05555; } #page-people .pi-kpi .pi-coming { font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--dim); font-weight: 600; border: 1px solid rgba(255,255,255,0.08); border-radius: 5px; padding: 1px 6px; display: inline-block; } /* coverage heatmap (read-only, neutral staffed-count scale) */ #page-people .pi-heat { width: 100%; } #page-people .pi-heat-grid { display: grid; grid-template-columns: 64px repeat(7, 1fr); gap: 6px; } #page-people .pi-heat-cell { position: relative; height: 38px; border-radius: 8px; display: grid; place-items: center; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; border: 1px solid rgba(255,255,255,0.05); } #page-people .pi-heat-cell.pi-hd { background: transparent; border: none; color: var(--dim); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; height: 24px; } #page-people .pi-heat-cell.pi-rowlbl { background: transparent; border: none; color: var(--dim); font-size: 11px; font-weight: 600; justify-content: flex-end; padding-right: 8px; text-align: right; } /* NEUTRAL staffed-count scale (NO demand judgement — no demand baseline exists; C1b decision). */ #page-people .pi-lvl-staffed { background: rgba(76,175,125,0.16); color: #BFE6D2; border-color: rgba(76,175,125,0.32); } #page-people .pi-lvl-light { background: rgba(255,255,255,0.04); color: var(--dim); } #page-people .pi-lvl-none { background: rgba(255,255,255,0.02); color: #6A655D; } #page-people .pi-heat-legend { display: flex; gap: 18px; flex-wrap: wrap; font-size: 11px; color: var(--dim); margin-top: 12px; } #page-people .pi-heat-legend .pi-li-staffed { background: rgba(76,175,125,0.16); } #page-people .pi-heat-legend .pi-li-none { background: rgba(255,255,255,0.02); } #page-people .pi-cov-note { margin-top: 14px; padding: 12px 15px; border-radius: 12px; background: #1C1A17; border: 1px solid rgba(255,255,255,0.07); font-size: 12.5px; line-height: 1.55; color: #C4BFB6; } /* benchmark panel (honest-COMING; your figure + a "peer coming" placeholder) */ #page-people .pi-ratio { margin-bottom: 18px; } #page-people .pi-ratio .pi-rtop { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 7px; } #page-people .pi-ratio .pi-rname { font-size: 13.5px; color: #F0EBE2; font-weight: 600; } #page-people .pi-ratio .pi-rval { font-size: 13.5px; color: #C4BFB6; font-weight: 700; } #page-people .pi-ratio .pi-rval .pi-coming { font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--dim); font-weight: 600; border: 1px solid rgba(255,255,255,0.08); border-radius: 5px; padding: 1px 6px; display: inline-block; } #page-people .pi-track { position: relative; height: 26px; border-radius: 8px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); overflow: hidden; } #page-people .pi-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 8px 0 0 8px; transition: width 1s cubic-bezier(0.22,1,0.36,1); } #page-people .pi-fill.pi-good { background: linear-gradient(90deg, rgba(76,175,125,0.35), rgba(76,175,125,0.65)); } #page-people .pi-fill.pi-warn { background: linear-gradient(90deg, rgba(232,148,58,0.35), rgba(232,148,58,0.66)); } #page-people .pi-fill.pi-bad { background: linear-gradient(90deg, rgba(224,85,85,0.35), rgba(224,85,85,0.66)); } #page-people .pi-fill.pi-neutral { background: linear-gradient(90deg, rgba(255,255,255,0.10), rgba(255,255,255,0.18)); } #page-people .pi-bench-coming { margin-top: 14px; padding: 12px 15px; border-radius: 12px; background: #1C1A17; border: 1px solid rgba(255,255,255,0.07); font-size: 12.5px; line-height: 1.55; color: #C4BFB6; } #page-people .pi-panel-empty { display: flex; align-items: center; gap: 13px; padding: 18px; border-radius: 12px; background: rgba(255,255,255,0.02); border: 1px dashed rgba(255,255,255,0.10); color: var(--dim); font-size: 13px; line-height: 1.5; } #page-people .pi-panel-empty .pi-ee-ic { font-size: 22px; flex: 0 0 auto; } /* recommendations (EXTEND the renderPeopleAttention severity-ranked pattern) */ #page-people .pi-recs { display: flex; flex-direction: column; gap: 14px; } #page-people .pi-rec { display: flex; gap: 16px; align-items: flex-start; padding: 17px 19px; background: #232120; border: 1px solid rgba(255,255,255,0.07); border-radius: 12px; position: relative; overflow: hidden; transition: transform 0.24s cubic-bezier(0.22,1,0.36,1), border-color 0.24s ease, box-shadow 0.24s ease; } #page-people .pi-rec .pi-rank { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 17px; color: #16140F; background: radial-gradient(circle at 35% 30%, #E7D08A, #C9A84C 60%, #9A7C30); box-shadow: 0 0 18px rgba(201,168,76,0.45); } #page-people .pi-rec .pi-rbody { flex: 1; min-width: 0; } #page-people .pi-rec .pi-rttl { font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 14.5px; color: #F0EBE2; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; } #page-people .pi-rec .pi-rttl .pi-pill { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 2px 9px; border-radius: 999px; } #page-people .pi-pill-impact { color: #4CAF7D; background: rgba(76,175,125,0.14); } #page-people .pi-pill-easy { color: #5B9BD5; background: rgba(91,155,213,0.14); } #page-people .pi-pill-watch { color: #E8943A; background: rgba(232,148,58,0.14); } #page-people .pi-rec .pi-rdesc { font-size: 13px; color: #C4BFB6; margin-top: 6px; line-height: 1.6; } #page-people .pi-rec .pi-ractions { display: flex; gap: 10px; margin-top: 13px; } #page-people .pi-btn { font-family: 'Open Sans', sans-serif; font-weight: 600; font-size: 12.5px; padding: 8px 15px; border-radius: 8px; border: 1px solid transparent; cursor: pointer; transition: transform 0.18s cubic-bezier(0.22,1,0.36,1), background 0.2s ease, border-color 0.2s ease; } #page-people .pi-btn-primary { background: #C9A84C; color: #1A140A; box-shadow: 0 0 18px rgba(201,168,76,0.25); } #page-people .pi-btn-ghost { background: transparent; color: #C4BFB6; border-color: rgba(255,255,255,0.12); } #page-people .pi-recs-empty { padding: 16px 4px; color: var(--dim); font-size: 13px; line-height: 1.5; } /* FIX_PEOPLE_C2B_WHATIF_2026_06_16 (v1.25) — what-if scenario engine + rebalance toggle. READ-ONLY projection surface (persists NOTHING). Built TO the sample's SCENARIO/WHAT-IF block (sample CSS L264-344): forecast-wrap (scenarios | proj-card), scn toggle rows, projection meters, coverage chip. pi-* prefixed, #page-people-scoped (no body-level overlay/modal in C2b -> NO un-scoped rules needed; the C1b ancestor-selector lesson applies only to body-level elements, and C2b adds none). ASCII-only comments (the non-ASCII-drops-rule lesson). Literal hex mirrors the sample :root tokens. */ #page-people .pi-fc-wrap { display: grid; grid-template-columns: 330px 1fr; gap: 26px; } @media (max-width: 940px) { #page-people .pi-fc-wrap { grid-template-columns: 1fr; } } #page-people .pi-scns { display: flex; flex-direction: column; gap: 11px; } #page-people .pi-scn { display: flex; align-items: center; gap: 13px; padding: 13px 14px; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.07); border-radius: 12px; cursor: pointer; user-select: none; transition: border-color 0.22s ease, background 0.22s ease, transform 0.2s cubic-bezier(0.22,1,0.36,1); } #page-people .pi-scn .pi-sw { flex: 0 0 38px; width: 38px; height: 22px; border-radius: 999px; background: rgba(255,255,255,0.10); position: relative; transition: background 0.22s ease; } #page-people .pi-scn.on .pi-sw { background: #C9A84C; } #page-people .pi-scn.pi-smart.on .pi-sw { background: #4CAF7D; } #page-people .pi-scn .pi-scn-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; } #page-people .pi-scn .pi-scn-name { font-size: 13.5px; color: #F0EBE2; font-weight: 600; display: flex; align-items: center; gap: 8px; } #page-people .pi-scn .pi-scn-name .pi-star { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: #4CAF7D; background: rgba(76,175,125,0.14); padding: 1px 7px; border-radius: 999px; } #page-people .pi-scn .pi-scn-eff { font-size: 11.5px; color: var(--dim); } #page-people .pi-scn.on .pi-scn-eff { color: #C9A84C; } #page-people .pi-scn.pi-smart.on .pi-scn-eff { color: #4CAF7D; } #page-people .pi-scn.pi-xlink .pi-scn-eff { color: #5B9BD5; } #page-people .pi-proj { background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.07); border-radius: 14px; padding: 20px 22px; position: relative; } #page-people .pi-proj-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; } #page-people .pi-proj-head .pi-pt { font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 14px; color: #F0EBE2; } #page-people .pi-proj-head .pi-pt span { color: var(--dim); font-weight: 400; font-size: 12px; } #page-people .pi-impact { text-align: right; } #page-people .pi-impact .pi-big { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 24px; color: #4CAF7D; transition: color 0.3s ease; line-height: 1; } #page-people .pi-impact .pi-big.neg { color: #E05555; } #page-people .pi-impact .pi-small { font-size: 12px; color: var(--dim); margin-top: 4px; } #page-people .pi-meters { display: flex; flex-direction: column; gap: 18px; } #page-people .pi-meter .pi-mtop { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 7px; } #page-people .pi-meter .pi-mname { font-size: 13px; color: #C4BFB6; font-weight: 600; } #page-people .pi-meter .pi-mvals { font-size: 12.5px; color: var(--dim); } #page-people .pi-meter .pi-mvals .pi-mto { color: #F0EBE2; font-weight: 700; } #page-people .pi-meter .pi-mvals .pi-mto.up { color: #4CAF7D; } #page-people .pi-meter .pi-mvals .pi-mto.down { color: #E05555; } #page-people .pi-meter .pi-mtrack { position: relative; height: 22px; border-radius: 8px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); overflow: hidden; } #page-people .pi-meter .pi-mfill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 8px 0 0 8px; transition: width 0.65s cubic-bezier(0.22,1,0.36,1), background 0.4s ease; } #page-people .pi-meter .pi-mfill.good { background: linear-gradient(90deg, rgba(76,175,125,0.4), rgba(76,175,125,0.7)); } #page-people .pi-meter .pi-mfill.warn { background: linear-gradient(90deg, rgba(232,148,58,0.4), rgba(232,148,58,0.7)); } #page-people .pi-meter .pi-mfill.bad { background: linear-gradient(90deg, rgba(224,85,85,0.4), rgba(224,85,85,0.7)); } /* FIX_PEOPLE_UTIL_BAND_SOURCE_2026_08_10 — NON-VERDICT meter fill. .pi-mfill carries no background of its own, so a fill with no tone class is INVISIBLE — an empty track indistinguishable from a broken render. When no industry band resolves the verdict colour is withheld, but the projection bar must still be readable, so it paints the neutral token this stylesheet already defines for the benchmark bars (symbol anchor: .pi-fill.pi-neutral). Same token, second host — not a new class family. */ #page-people .pi-meter .pi-mfill.pi-neutral { background: linear-gradient(90deg, rgba(255,255,255,0.10), rgba(255,255,255,0.18)); } #page-people .pi-meter .pi-mtarget { position: absolute; top: -3px; bottom: -3px; width: 2px; background: #F0EBE2; box-shadow: 0 0 8px rgba(240,235,226,0.55); opacity: 0.75; } #page-people .pi-meter .pi-mtarget::after { content: attr(data-lbl); position: absolute; top: -15px; left: 50%; transform: translateX(-50%); font-size: 9px; text-transform: uppercase; letter-spacing: 0.06em; color: #F0EBE2; white-space: nowrap; opacity: 0.75; } #page-people .pi-cov-chip { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 999px; transition: background 0.4s ease, color 0.4s ease; } #page-people .pi-cov-chip .pi-cdot { width: 8px; height: 8px; border-radius: 50%; } #page-people .pi-cov-chip.gaps { background: rgba(224,85,85,0.14); color: #F0B7B7; } #page-people .pi-cov-chip.gaps .pi-cdot { background: #E05555; box-shadow: 0 0 8px #E05555; } #page-people .pi-cov-chip.fixed { background: rgba(76,175,125,0.16); color: #BFE6D2; } #page-people .pi-cov-chip.fixed .pi-cdot { background: #4CAF7D; box-shadow: 0 0 8px #4CAF7D; } /* rebalance toggle (heatmap apply) — READ-ONLY paint-state swap; persists nothing. */ #page-people .pi-cov-toggle { display: flex; align-items: center; gap: 13px; padding: 12px 14px; margin-top: 14px; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.07); border-radius: 12px; cursor: pointer; user-select: none; transition: border-color 0.22s ease, background 0.22s ease; } #page-people .pi-cov-toggle .pi-sw { flex: 0 0 38px; width: 38px; height: 22px; border-radius: 999px; background: rgba(255,255,255,0.10); position: relative; transition: background 0.22s ease; } #page-people .pi-cov-toggle.on .pi-sw { background: #4CAF7D; } #page-people .pi-cov-toggle .pi-ct-label { font-size: 13px; color: #F0EBE2; font-weight: 600; } #page-people .pi-readonly-note { margin-top: 10px; font-size: 11.5px; color: var(--dim); line-height: 1.5; } #page-people .pi-whatif-empty { display: flex; align-items: center; gap: 13px; padding: 20px 22px; border-radius: 14px; background: rgba(255,255,255,0.02); border: 1px dashed rgba(255,255,255,0.10); color: var(--dim); font-size: 13px; line-height: 1.55; } #page-people .pi-whatif-empty .pi-cb-ic { font-size: 24px; flex: 0 0 auto; } #page-people .pi-foot { margin-top: 32px; text-align: center; font-size: 11px; color: var(--dim); letter-spacing: 0.03em; } @media (max-width: 940px) { #page-people .pi-hero { padding: 22px 20px 24px; } } @media (prefers-reduced-motion: reduce) { #page-people .pi-kpi, #page-people .pi-rec, #page-people .pi-fill, #page-people .pi-btn { transition: none !important; } } /* ════════════════════════════════════════════════════════════════════════════ FIX_PEOPLE_PAYROLL_S1_2026_06_22 (v1.25) — People Payroll Facilitation surface styles, scoped under #page-people (the pay- prefix, so nothing collides with the People pa-/pi-/po- blocks above OR bleeds to other surfaces). Built TO design_samples/people/people_payroll.html at ultra-HD fidelity (the founder sample is the spec). Literal hex values mirror the sample's :root tokens (page #16140F, card #232120, gold #C9A84C, green #4CAF7D, amber #E8943A, blue #5B9BD5, text #C4BFB6, dim #8A857D, bright #F0EBE2). ASCII-only comments throughout (a non-ASCII char silently drops the rule from the CSSOM — the established L18.8 lesson, mirrored from the pa-/pi- blocks). This is a READ/RENDER surface (presentation rules only, no behaviour). */ /* breadcrumb + page header */ /* FIX_PEOPLE_PAYROLL_FULLWIDTH_S1_2026_06_22 — founder standing rule: specialist surfaces build FULL-WIDTH (no narrow max-width cap on the surface wrapper). Relax pay-wrap max-width so the Payroll surface fills the content host like the Sales surfaces (Pipeline/Forecast carry NO wrapper cap; cards fill #sales-content minus the .crm-content gutter). Was max-width:1240px (capped narrower than the ~1547px host). Mirror of the .pa-wrap L14085 / .pi-wrap L14268 FIX_SHELL_FULLWIDTH_S1_2026_06_17 precedent; the host's own padding supplies the gutter, so NO extra padding is added here. CSS-only, Payroll content/markup/handlers byte-unchanged. */ #page-people .pay-wrap { max-width: none; margin: 0 auto; } #page-people .pay-breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--dim); margin-bottom: 16px; letter-spacing: 0.02em; } #page-people .pay-breadcrumb .spec { color: #C9A84C; font-weight: 600; font-family: 'Montserrat', sans-serif; } #page-people .pay-breadcrumb .sep { opacity: 0.5; } #page-people .pay-breadcrumb .back { color: #C4BFB6; text-decoration: none; cursor: pointer; } #page-people .pay-pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 22px; flex-wrap: wrap; } #page-people .pay-pagehead .lede h1 { font-family: 'Montserrat', sans-serif; font-size: 34px; font-weight: 800; color: #F0EBE2; letter-spacing: -0.02em; line-height: 1.05; display: flex; align-items: center; gap: 14px; } #page-people .pay-pagehead .lede h1 .pin { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #C9A84C; background: linear-gradient(180deg, rgba(201,168,76,0.16), rgba(201,168,76,0.05)); border: 1px solid rgba(201,168,76,0.35); border-radius: 999px; padding: 5px 12px; } #page-people .pay-pagehead .lede .sub { color: var(--dim); font-size: 14.5px; margin-top: 6px; max-width: 640px; } #page-people .pay-statusline { display: inline-flex; align-items: center; gap: 11px; background: #1C1A17; border: 1px solid rgba(255,255,255,0.07); border-radius: 999px; padding: 9px 16px 9px 14px; font-size: 13px; color: #C4BFB6; white-space: nowrap; box-shadow: 0 8px 32px rgba(0,0,0,0.45); } #page-people .pay-statusline .dot { width: 9px; height: 9px; border-radius: 50%; background: #5B9BD5; box-shadow: 0 0 0 4px rgba(91,155,213,0.16); } /* boundary banner (the privacy posture, made explicit at the top) */ #page-people .pay-boundary { display: flex; align-items: flex-start; gap: 13px; background: linear-gradient(180deg, rgba(91,155,213,0.06), rgba(91,155,213,0.02)); border: 1px solid rgba(91,155,213,0.22); border-radius: 10px; padding: 14px 18px; margin-bottom: 22px; box-shadow: 0 8px 32px rgba(0,0,0,0.45); } #page-people .pay-boundary .b-ic { color: #5B9BD5; flex-shrink: 0; margin-top: 1px; } #page-people .pay-boundary .b-txt { font-size: 13px; color: #C4BFB6; line-height: 1.55; } #page-people .pay-boundary .b-txt .no { color: #E8943A; font-weight: 600; } #page-people .pay-kpi { background: #232120; border: 1px solid rgba(255,255,255,0.07); border-radius: 10px; padding: 15px 16px 14px; position: relative; overflow: hidden; box-shadow: 0 8px 32px rgba(0,0,0,0.45); } #page-people .pay-kpi .k-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--dim); font-weight: 600; margin-bottom: 8px; } #page-people .pay-kpi .k-val { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 25px; color: #F0EBE2; line-height: 1; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; } #page-people .pay-kpi .k-val .unit { font-size: 14px; font-weight: 700; color: var(--dim); margin-left: 2px; } #page-people .pay-kpi .k-val.muted { color: var(--dim); font-size: 17px; font-weight: 700; } #page-people .pay-kpi .k-foot { font-size: 11.5px; color: var(--dim); margin-top: 7px; } /* section heads + tags */ #page-people .pay-sec-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; gap: 10px; margin-top: 4px; } #page-people .pay-sec-head h2 .count { font-size: 12px; font-weight: 700; color: #C9A84C; background: rgba(201,168,76,0.12); border: 1px solid rgba(201,168,76,0.3); border-radius: 999px; padding: 2px 9px; } #page-people .pay-sec-head .hint { font-size: 11.5px; color: var(--dim); } /* FIX_PAYROLL_CADENCE_S3_2026_06_25 — cadence-setter affordance + inline editor (no-reflow idiom). */ #page-people .pay-cadence-aff { font-size: 11.5px; color: #C4BFB6; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.09); border-radius: 999px; padding: 4px 10px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; } #page-people .pay-cadence-aff .pca-edit { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #C9A84C; } #page-people .pay-cadence-setter { background: #232120; border: 1px solid rgba(201,168,76,0.25); border-radius: 14px; padding: 16px 18px; margin-bottom: 18px; box-shadow: 0 8px 32px rgba(0,0,0,0.4); } #page-people .pay-cadence-setter .pcs-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; } #page-people .pay-cadence-setter .pcs-fld { display: flex; flex-direction: column; gap: 6px; } #page-people .pay-cadence-setter .pcs-fld > span { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--dim); font-weight: 700; } #page-people .pay-cadence-setter .pcs-input { background: #1C1A17; border: 1px solid rgba(255,255,255,0.12); border-radius: 8px; padding: 8px 11px; color: #F0EBE2; font-size: 13px; min-width: 170px; } #page-people .pay-cadence-setter .pcs-actions { display: flex; gap: 9px; } #page-people .pay-cadence-setter .pcs-status { font-size: 12px; color: var(--dim); margin-top: 10px; min-height: 14px; } #page-people .pay-tag { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 7px; border-radius: 5px; } #page-people .pay-tag.due { color: #5B9BD5; background: rgba(91,155,213,0.14); } #page-people .pay-tag.muted { color: var(--dim); background: rgba(255,255,255,0.05); } /* pay-period summary card */ #page-people .pay-period-card { background: #232120; border: 1px solid rgba(255,255,255,0.07); border-radius: 16px; padding: 20px 22px; box-shadow: 0 8px 32px rgba(0,0,0,0.45); margin-bottom: 26px; display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 26px; align-items: center; } #page-people .pay-period-card .pp-block .pp-lab { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--dim); font-weight: 600; margin-bottom: 7px; } #page-people .pay-period-card .pp-range { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 22px; color: #F0EBE2; letter-spacing: -0.01em; } #page-people .pay-period-card .pp-meta { font-size: 12.5px; color: var(--dim); margin-top: 6px; } #page-people .pay-period-card .pp-big { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 32px; color: #C9A84C; line-height: 1; font-variant-numeric: tabular-nums; } #page-people .pay-period-card .pp-big.muted { color: var(--dim); font-size: 18px; } #page-people .pay-period-card .pp-sub { font-size: 12px; color: var(--dim); margin-top: 7px; } /* per-staff expected-pay table */ /* FIX_PAYROLL_T4127_WIDTH_2026_07_27 — the clipped last column and the missing scrollbar were ONE defect: `overflow: hidden` clipped the overflowing table with no way to reach it. overflow-x now scrolls; overflow-y stays hidden so the border-radius still clips the corners. ⚠ THIS SINGLE RULE HAS THREE MARKUP CONSUMERS — the owner payroll table, the People payroll table, and a BONUS LIST that is not a table at all. overflow-x:auto is inert for the bonus list (its content never exceeds the wrap, so no scrollbar is painted), which is why the shared rule is safe to change rather than needing a modifier class. ⛔ Verify all three if this rule changes again. */ #page-people .pay-table-wrap { background: #232120; border: 1px solid rgba(255,255,255,0.07); border-radius: 16px; box-shadow: 0 8px 32px rgba(0,0,0,0.45); overflow-x: auto; overflow-y: hidden; margin-bottom: 26px; } /* FIX_PAYROLL_T4127_WIDTH_2026_07_27 — Employee column pinned while the money columns scroll under it. Without an opaque background the scrolled cells show THROUGH the sticky column. */ #page-people table.pay-table thead th:first-child { position: sticky; left: 0; z-index: 3; background: #1C1A17; } #page-people table.pay-table tbody td:first-child { position: sticky; left: 0; z-index: 2; background: #232120; } #page-people table.pay-table tfoot td:first-child { position: sticky; left: 0; z-index: 2; background: #232120; } #page-people table.pay-table { width: 100%; border-collapse: collapse; font-size: 13px; } /* FIX_PAYROLL_T4127_WIDTH_2026_07_27 — `white-space: nowrap` forced every multi-word header ("Expected gross", "Tips / Other", "Federal tax") onto one line, which is a large part of why the table overflowed. Letting them wrap to two lines reclaims real width at no legibility cost, since each header already carries a second line underneath. */ #page-people table.pay-table thead th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.09em; color: var(--dim); font-weight: 700; padding: 14px 16px; border-bottom: 1px solid rgba(255,255,255,0.12); background: #1C1A17; white-space: normal; } #page-people table.pay-table thead th.num { text-align: right; } #page-people table.pay-table tbody td { padding: 13px 16px; border-bottom: 1px solid rgba(255,255,255,0.07); vertical-align: middle; } #page-people table.pay-table tbody tr:last-child td { border-bottom: none; } #page-people table.pay-table tbody tr:hover { background: rgba(255,255,255,0.018); } #page-people table.pay-table td.num { text-align: right; font-variant-numeric: tabular-nums; } #page-people .pay-table .pt-staff { display: flex; align-items: center; gap: 11px; } #page-people .pay-table .pt-av { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 11px; color: #1a160c; flex-shrink: 0; background: linear-gradient(160deg, #C9A84C, #9c7f33); } #page-people .pay-table .pt-av.g { background: linear-gradient(160deg, #6fcf9a, #3a8a63); color: #0f1f17; } #page-people .pay-table .pt-av.b { background: linear-gradient(160deg, #84b8e6, #3f6f9e); color: #0d1722; } #page-people .pay-table .pt-name { font-size: 13.5px; color: #F0EBE2; font-weight: 600; } #page-people .pay-table .pt-role { font-size: 11px; color: var(--dim); } #page-people .pay-table .pt-rate { color: #C4BFB6; font-weight: 600; } #page-people .pay-table .pt-hours { color: #C4BFB6; } #page-people .pay-table .pt-gross { color: #F0EBE2; font-weight: 700; font-family: 'Montserrat', sans-serif; } #page-people .pay-table .pt-na { color: #E8943A; font-weight: 600; font-size: 12px; } #page-people .pay-table .pt-na .why { color: var(--dim); font-weight: 400; font-size: 11px; display: block; } /* FIX_RATE_SOURCE_VISIBLE_2026_09_08 — the rate-source sub-line on the COMPUTABLE rate cell. A THIRD wrapper context for .why, and it is added HERE rather than discovered later because the sibling comment eight rules down (FIX_PAYROLL_CADENCE_RENDER_2026_08_31, Finding C) records the exact failure a missing rule produces: every .why rule on this table is parent-scoped, there is no generic .why rule, so a .why emitted inside .pt-rate would inherit .pt-rate's own colour and 600 weight, stay inline, and FUSE to the "$32.50/hr" figure with no separator — the phantom-percentage shape that block already had to diagnose after the fact. Declarations MATCH the four sibling rules deliberately, so the new context is visually identical to the styled ones. CSS-only. Symbol-anchor cross-ref: __rateSourceNote, renderPeoplePayroll. */ #page-people .pay-table .pt-rate .why { color: var(--dim); font-weight: 400; font-size: 11px; display: block; margin-top: 2px; } /* FIX_PEOPLE_P9_STAT_HOLIDAY_2026_07_03 — the additive statutory-holiday-pay sub-line under Expected gross. */ #page-people .pay-table .pt-sthol { display: block; margin-top: 5px; padding-top: 5px; border-top: 1px dashed rgba(212,175,110,0.28); font-size: 12px; } #page-people .pay-table .pt-sthol .sthol-lbl { color: #D4AF6E; font-weight: 600; } #page-people .pay-table .pt-sthol .sthol-amt { color: #F0EBE2; font-weight: 700; font-family: 'Montserrat', sans-serif; margin-left: 6px; } #page-people .pay-table .pt-sthol.na .sthol-lbl { color: #E8943A; } #page-people .pay-table .pt-sthol .why { color: var(--dim); font-weight: 400; font-size: 11px; display: block; margin-top: 2px; } #page-people .pay-table .pt-deduct { color: var(--dim); font-style: italic; font-size: 12px; } /* Province-withholding REFUSAL cell (owner People payroll). A refusal is a SENTENCE, not a figure, and it lands in one column of an 18-column table — so it needs an explicit wrap and width or it forces a horizontal blow-out. ⛔ Visually DISTINCT from .pt-deduct on purpose: .pt-deduct is the honest-empty "not computable" state, and a refusal is "we will not guess". Three states, three appearances — if these two ever render identically the surface is back to asserting an absence it does not mean. Scoped #page-people to match every sibling rule in this block. */ #page-people .pay-table .pt-refuse { display: block; white-space: normal; text-align: left; max-width: 34ch; color: #C4BFB6; font-size: 11.5px; font-style: normal; line-height: 1.5; } /* FIX_PAYROLL_BONUS_WINDOW_2026_07_05 — additive bonus sub-line in the Expected-gross cell (mirrors .pt-sthol). */ #page-people .pay-table .pt-bonus { display: block; margin-top: 5px; padding-top: 5px; border-top: 1px dashed rgba(212,175,110,0.28); font-size: 12px; } #page-people .pay-table .pt-bonus .bonus-lbl { color: #D4AF6E; font-weight: 600; } #page-people .pay-table .pt-bonus .bonus-amt { color: #F0EBE2; font-weight: 700; font-family: 'Montserrat', sans-serif; margin-left: 6px; } #page-people .pay-table .pt-bonus.pending .bonus-lbl { color: var(--dim); } #page-people .pay-table .pt-bonus.pending .bonus-amt { color: var(--dim); font-weight: 600; } #page-people .pay-table .pt-bonus .why { color: var(--dim); font-weight: 400; font-size: 11px; display: block; margin-top: 2px; } #page-people .pay-table .tf-grand { color: var(--dim); font-weight: 400; font-size: 11px; margin-top: 3px; } /* FIX_PAYROLL_DEDUCT_ESTIMATE_2026_07_05 — estimated net cell + inline CPP/EI/Fed/BC breakdown. */ #page-people .pay-table .pt-net { display: block; color: #F0EBE2; font-weight: 700; font-family: 'Montserrat', sans-serif; font-size: 13px; } #page-people .pay-table .pt-net .net-est { color: var(--dim); font-weight: 600; font-size: 10px; font-family: 'Open Sans', sans-serif; letter-spacing: 0.04em; } #page-people .pay-table .pt-net .why { color: var(--dim); font-weight: 400; font-size: 11px; display: block; margin-top: 2px; } #page-people .pay-table .pt-net .ded-brk { color: #A39C90; font-weight: 400; font-size: 10.5px; display: block; margin-top: 2px; } /* FIX_PAYROLL_CADENCE_RENDER_2026_08_31 (v1.25) — Finding C: the two UNSTYLED .why wrapper contexts on the owner pay table. Every .why rule here is parent-scoped and there is no generic .why rule, so a label emitted inside a wrapper that has no rule of its own fell back to the span default of inline and FUSED to the figure with no separator. Two contexts were uncovered: - a bare td.num — the vacation cell (dollar figure + its rate label) and the accrued label; - the gross wrapper, which read acceptably only BY LUCK, because its label starts with a letter. The fused vacation cell is also the whole of the phantom "71.6%" reported on another staff row: that is not a rate at all, it is the tail of that person's vacation DOLLAR figure running into the rate label with no gap. No staff member has a 71% vacation rate, and the rate labeller cannot emit a value above its override ceiling. THE DATA IS CORRECT; ONLY THE SEPARATION WAS MISSING — the dollar figure, the 4% rate and its qualifier are all right and none of them is touched here. ⛔ The qualifier suffix on the vacation label is a FEATURE and must survive: it is appended precisely when tenure cannot be worked out, flagging that the rate is the BC ESA statutory minimum applied as a floor rather than a resolved figure. Do not "fix" the label, the rate, or the dollar. Declarations MATCH the four sibling rules above, deliberately, so the new contexts are visually identical to the styled ones. CSS-only: no emitted markup changes, so the blast radius is the cascade and nothing else. ⛔ The accountant lens uses its own wrapper class and already has a rule — it is out of scope and untouched. Symbol-anchor cross-ref: __vacationRateLabel, vacation_pay_period, __composePayrollPeriod. */ #page-people .pay-table .pt-gross .why { color: var(--dim); font-weight: 400; font-size: 11px; display: block; margin-top: 2px; } #page-people .pay-table td.num .why { color: var(--dim); font-weight: 400; font-size: 11px; display: block; margin-top: 2px; } #page-people .pay-kpi .net-est { color: var(--dim); font-weight: 600; font-size: 10px; letter-spacing: 0.04em; } #page-people .pay-table tfoot td { padding: 14px 16px; border-top: 1px solid rgba(255,255,255,0.12); background: #1C1A17; font-weight: 700; } #page-people .pay-table tfoot td.label { color: var(--dim); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; } #page-people .pay-table tfoot td.total { color: #C9A84C; font-family: 'Montserrat', sans-serif; font-size: 16px; text-align: right; } #page-people .pay-table tfoot td.muted { color: var(--dim); font-style: italic; font-weight: 400; text-align: right; font-size: 12px; } #page-people .pay-table-note { font-size: 11.5px; color: var(--dim); padding: 12px 16px 14px; background: #1C1A17; border-top: 1px solid rgba(255,255,255,0.07); line-height: 1.55; } /* FIX_PAYROLL_ONLINE_BOTH_2026_07_06 — owner Bonuses section: per-bonus detail rows below the table (amount rides slim on the row above). */ #page-people .pay-bonus-list { display: flex; flex-direction: column; } #page-people .pay-bonus-row { display: grid; grid-template-columns: 170px minmax(0,1fr) minmax(0,1.4fr); gap: 16px; align-items: baseline; padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,0.07); font-size: 13px; } #page-people .pay-bonus-row .pb-emp { color: #E7E2D9; font-weight: 600; } #page-people .pay-bonus-row .pb-nm { color: #E7E2D9; } #page-people .pay-bonus-row .pb-why { color: var(--dim); font-size: 12px; } /* two-column lower grid + panels */ #page-people .pay-lower { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; } /* FIX_PAYROLL_ONLINE_BOTH_2026_07_06 — single-panel variant (gross→net box removed → timeline spans full width). */ #page-people .pay-lower.pay-lower--single { grid-template-columns: 1fr; } #page-people .pay-panel { background: #232120; border: 1px solid rgba(255,255,255,0.07); border-radius: 16px; padding: 20px 20px 22px; box-shadow: 0 8px 32px rgba(0,0,0,0.45); } /* gross / deductions / net breakdown */ #page-people .pay-panel .gdn-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.07); } #page-people .pay-panel .gdn-lab { font-size: 13px; color: #C4BFB6; display: flex; align-items: center; gap: 8px; } #page-people .pay-panel .gdn-lab .lic { color: var(--dim); display: inline-flex; } #page-people .pay-panel .gdn-val { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 16px; color: #F0EBE2; } #page-people .pay-panel .gdn-val.computed { color: #4CAF7D; } #page-people .pay-panel .gdn-val.notcomp { color: var(--dim); font-style: italic; font-weight: 600; font-size: 12.5px; font-family: 'Open Sans', sans-serif; } #page-people .pay-panel .gdn-why { font-size: 11px; color: var(--dim); margin-top: 3px; max-width: 320px; } #page-people .pay-panel .gdn-net { background: rgba(91,155,213,0.06); border: 1px solid rgba(91,155,213,0.18); border-radius: 7px; padding: 13px 14px; margin-top: 14px; } #page-people .pay-panel .gdn-net .nlab { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: #5B9BD5; font-weight: 700; margin-bottom: 5px; } #page-people .pay-panel .gdn-net .nval { font-size: 13px; color: #C4BFB6; line-height: 1.5; } #page-people .pay-panel .gdn-net .nval b { color: #F0EBE2; } /* pay-run timeline */ #page-people .pay-timeline { display: flex; flex-direction: column; gap: 2px; position: relative; padding-left: 6px; } #page-people .pay-timeline .tl-item { display: flex; gap: 14px; padding: 4px 0; } #page-people .pay-timeline .tl-rail { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; width: 18px; } #page-people .pay-timeline .tl-dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.12); background: #1C1A17; margin-top: 4px; flex-shrink: 0; } #page-people .pay-timeline .tl-item.done .tl-dot { background: #4CAF7D; border-color: #4CAF7D; box-shadow: 0 0 8px rgba(76,175,125,0.45); } #page-people .pay-timeline .tl-item.now .tl-dot { background: #C9A84C; border-color: #C9A84C; box-shadow: 0 0 10px rgba(201,168,76,0.28); } #page-people .pay-timeline .tl-item.future .tl-dot { background: transparent; } #page-people .pay-timeline .tl-line { width: 2px; flex: 1; background: rgba(255,255,255,0.07); margin: 3px 0 0; min-height: 16px; } #page-people .pay-timeline .tl-item:last-child .tl-line { display: none; } #page-people .pay-timeline .tl-body { padding-bottom: 16px; flex: 1; } #page-people .pay-timeline .tl-date { font-size: 11px; color: var(--dim); font-weight: 600; letter-spacing: 0.03em; margin-bottom: 2px; } #page-people .pay-timeline .tl-item.now .tl-date { color: #C9A84C; } #page-people .pay-timeline .tl-title { font-size: 13.5px; color: #F0EBE2; font-weight: 600; } #page-people .pay-timeline .tl-item.future .tl-title { color: #C4BFB6; } #page-people .pay-timeline .tl-desc { font-size: 12px; color: var(--dim); margin-top: 3px; line-height: 1.5; } #page-people .pay-timeline .tl-badge { font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 7px; border-radius: 5px; margin-left: 8px; vertical-align: middle; } #page-people .pay-timeline .tl-badge.done { color: #4CAF7D; background: rgba(76,175,125,0.14); } #page-people .pay-timeline .tl-badge.now { color: #C9A84C; background: rgba(201,168,76,0.14); } #page-people .pay-timeline .tl-badge.coming { color: var(--dim); background: rgba(255,255,255,0.05); } /* handoff / export footer band */ #page-people .pay-handoff { background: linear-gradient(180deg, rgba(201,168,76,0.05), rgba(201,168,76,0.015)); border: 1px solid rgba(201,168,76,0.18); border-radius: 16px; padding: 20px 22px; box-shadow: 0 8px 32px rgba(0,0,0,0.45); margin-top: 26px; display: flex; align-items: center; justify-content: space-between; gap: 22px; flex-wrap: wrap; } #page-people .pay-handoff .ho-txt { flex: 1; min-width: 280px; } #page-people .pay-handoff .ho-h { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 15px; color: #F0EBE2; margin-bottom: 5px; } #page-people .pay-handoff .ho-sub { font-size: 12.5px; color: var(--dim); line-height: 1.55; } #page-people .pay-handoff .ho-actions { display: flex; gap: 10px; flex-shrink: 0; } /* buttons (shared pay-btn) */ #page-people .pay-btn { font-family: 'Montserrat', sans-serif; font-size: 12.5px; font-weight: 600; border-radius: 7px; padding: 10px 16px; cursor: pointer; border: 1px solid rgba(255,255,255,0.12); background: #1C1A17; color: #C4BFB6; transition: all 0.18s cubic-bezier(0.4,0,0.2,1); white-space: nowrap; } #page-people .pay-btn.primary { background: linear-gradient(180deg, #C9A84C, #9c7f33); color: #1a160c; border-color: transparent; font-weight: 700; box-shadow: 0 4px 14px -4px rgba(201,168,76,0.28); } /* FIX_DISABLED_LEGIBILITY_SIBLINGFORM_2026_07_26 (F-2) — Rule 1 (labelled control, and the label is money-adjacent: pay-run actions). Was 0.45, which faded the label itself. */ #page-people .pay-btn.disabled, #page-people .pay-btn[disabled] { background: var(--disabled-surface); color: var(--disabled-ink); border: 1px solid var(--border, rgba(255,255,255,0.12)); box-shadow: none; filter: none; opacity: 1; cursor: not-allowed; transform: none; } #page-people .pay-btn.disabled:hover, #page-people .pay-btn[disabled]:hover { background: var(--disabled-surface); border-color: rgba(255,255,255,0.12); color: var(--disabled-ink); transform: none; } /* honest-empty whole-surface fallback */ #page-people .pay-empty-state { background: #232120; border: 1px dashed rgba(255,255,255,0.12); border-radius: 16px; padding: 34px; text-align: center; box-shadow: 0 8px 32px rgba(0,0,0,0.45); } #page-people .pay-empty-state .es-ic { color: var(--dim); margin-bottom: 12px; } #page-people .pay-empty-state .es-h { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 16px; color: #F0EBE2; margin-bottom: 7px; } #page-people .pay-empty-state .es-sub { font-size: 13px; color: var(--dim); max-width: 460px; margin: 0 auto 16px; line-height: 1.6; } @media (max-width: 920px) { #page-people .pay-kpi-strip { grid-template-columns: repeat(2, 1fr); } #page-people .pay-period-card { grid-template-columns: 1fr; gap: 18px; } #page-people .pay-lower { grid-template-columns: 1fr; } } /* pay-period status tracker (Open -> Approved -> Sent) */ #page-people .pay-period-track { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; background: linear-gradient(168deg, #252220, #1e1b18); border: 1px solid rgba(255,255,255,0.07); border-radius: 16px; padding: 15px 20px; margin-bottom: 22px; box-shadow: 0 24px 56px -42px #000, inset 0 1px 0 rgba(255,255,255,0.05); } #page-people .pay-period-track .pt-nav { display: flex; align-items: center; gap: 12px; } #page-people .pay-period-track .pt-arrow { width: 34px; height: 34px; border-radius: 9px; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.03); display: grid; place-items: center; } #page-people .pay-period-track .pt-arrow[disabled] { opacity: 0.4; cursor: not-allowed; } #page-people .pay-period-track .pt-mid { text-align: center; min-width: 190px; } #page-people .pay-period-track .pt-cap { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); } #page-people .pay-period-track .pt-range { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 18px; color: #F0EBE2; margin-top: 2px; } #page-people .pay-period-track .pt-range.muted { color: var(--dim); font-size: 15px; } #page-people .pay-period-track .pt-meta { display: flex; align-items: center; gap: 26px; } #page-people .pay-period-track .pt-item .pt-k { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); } #page-people .pay-period-track .pt-item .pt-v { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 13px; color: #F0EBE2; margin-top: 3px; } #page-people .pay-period-track .pt-stepper { margin-left: auto; display: flex; align-items: center; gap: 0; } #page-people .pay-period-track .step { display: flex; align-items: center; gap: 9px; } #page-people .pay-period-track .step .s-dot { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; border: 2px solid rgba(255,255,255,0.12); background: #1C1A17; } #page-people .pay-period-track .step.now .s-dot { background: #E8943A; border-color: #E8943A; box-shadow: 0 0 12px rgba(232,148,58,0.5); } #page-people .pay-period-track .step .s-lab { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--dim); white-space: nowrap; } #page-people .pay-period-track .step.now .s-lab { color: #f0c08a; } /* FIX_METRIC_HONESTY_SWEEP_2026_07_22 — completed-stage treatment (green) for the now-live approval stepper (was hardcoded stuck at Open with no done state). Applies to a stage the period has moved past. */ #page-people .pay-period-track .step.done .s-dot { background: #4CAF7D; border-color: #4CAF7D; } #page-people .pay-period-track .step.done .s-lab { color: #9ad9b4; } #page-people .pay-period-track .step-link { width: 38px; height: 2px; margin: 0 12px; background: rgba(255,255,255,0.12); border-radius: 2px; flex-shrink: 0; } #page-people .pay-period-track .step-link.done { background: #4CAF7D; } /* exception-resolution panel ("Needs your attention") — rendered honest-empty (no exception store) */ #page-people .pay-attn { position: relative; overflow: hidden; border-radius: 16px; margin-bottom: 26px; background: linear-gradient(118deg, rgba(76,175,125,0.10), rgba(76,175,125,0.02) 60%); border: 1px solid rgba(76,175,125,0.34); box-shadow: 0 24px 56px -42px #000, inset 0 1px 0 rgba(255,255,255,0.05); } #page-people .pay-attn .attn-head { display: flex; align-items: center; gap: 14px; padding: 17px 20px; border-bottom: 1px solid rgba(255,255,255,0.07); } #page-people .pay-attn .attn-ic { width: 42px; height: 42px; border-radius: 11px; flex-shrink: 0; display: grid; place-items: center; background: rgba(76,175,125,0.14); border: 1px solid rgba(76,175,125,0.34); } #page-people .pay-attn .attn-h { flex: 1; min-width: 0; } #page-people .pay-attn .attn-empty { display: flex; align-items: center; gap: 13px; padding: 18px 20px; } #page-people .pay-attn .attn-empty .ae-tx b { font-family: 'Montserrat', sans-serif; font-weight: 700; color: #F0EBE2; font-size: 13.5px; display: block; } #page-people .pay-attn .attn-empty .ae-tx span { font-size: 12px; color: var(--dim); } /* scheduled/actual/variance table additions (extends the pay-table block above) */ #page-people .pay-ts-tools { display: flex; align-items: center; gap: 10px; margin: 4px 0 12px; flex-wrap: wrap; } #page-people .pay-ts-tools .filt { display: flex; border-radius: 9px; border: 1px solid rgba(255,255,255,0.12); overflow: hidden; background: rgba(0,0,0,0.2); } #page-people .pay-ts-tools .filt button { padding: 8px 13px; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 11px; color: var(--dim); } #page-people .pay-ts-tools .filt button.on { color: #F0EBE2; background: rgba(201,168,76,0.14); } #page-people .pay-ts-tools .filt button[disabled] { opacity: 0.5; cursor: not-allowed; } #page-people .pay-ts-tools .ts-spacer { margin-left: auto; } #page-people .pay-ts-tools .ts-hint { font-size: 11.5px; color: var(--dim); } #page-people .pay-table th .sub { display: block; font-weight: 600; font-size: 8px; color: var(--dim); opacity: 0.7; letter-spacing: 0.04em; margin-top: 2px; } #page-people .pay-table th.ctr, #page-people .pay-table td.ctr { text-align: center; } #page-people .pay-table .pt-sched { color: var(--dim); font-weight: 600; } #page-people .pay-table .pt-actual { color: #C4BFB6; font-weight: 700; } #page-people .pay-table .var-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 12px; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 11.5px; color: var(--dim); background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); } /* FIX_SCHEDULE_PAYROLL_BRIDGE_2026_06_26 (v1.25) — sign-driven variance chip (actual−scheduled): over schedule=green, under=amber, on-schedule=neutral. Replaces the prior per-row-index decorative class with real-data styling. */ #page-people .pay-table .var-chip.vpos { color: #4CAF7D; background: rgba(76,175,125,0.10); border-color: rgba(76,175,125,0.28); } #page-people .pay-table .var-chip.vneg { color: #E0A23C; background: rgba(224,162,60,0.10); border-color: rgba(224,162,60,0.28); } #page-people .pay-table .var-chip.vzero { color: var(--dim); } #page-people .pay-table .pt-src { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; color: var(--dim); padding: 2px 8px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.07); background: rgba(255,255,255,0.02); white-space: nowrap; } #page-people .pay-table .pt-src .sd { width: 6px; height: 6px; border-radius: 50%; } #page-people .pay-table .pt-src .sd.clock { background: #4CAF7D; } #page-people .pay-table .pt-src .sd.sched { background: #5B9BD5; } #page-people .pay-table .ap-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 14px; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 10px; letter-spacing: 0.02em; white-space: nowrap; color: var(--dim); background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.09); } #page-people .pay-table .row-act { padding: 7px 12px; border-radius: 8px; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 10.5px; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.03); color: var(--dim); white-space: nowrap; } #page-people .pay-table .row-act[disabled] { opacity: 0.55; cursor: not-allowed; } /* FIX_PAYROLL_LINE_REVIEW_ADJUST_2026_08_04 — per-line correction affordance + provenance. Scoped under #page-people .pay-table to match the specificity of the rules above (an unscoped kit rule would lose to the ID-scoped legacy block and render as a silent no-op). The corrected figure is GOLD and the original is struck through beside it — the operator must be able to tell a corrected number from a measured one at a glance, which is the entire point of preserving the original. */ #page-people .pay-table .row-act.live { border-color: rgba(201,169,110,0.42); background: rgba(201,169,110,0.10); color: #C9A96E; cursor: pointer; } #page-people .pay-table .row-act.live:hover { background: rgba(201,169,110,0.18); border-color: rgba(201,169,110,0.60); } #page-people .pay-table .ap-pill.adj { color: #C9A96E; background: rgba(201,169,110,0.12); border-color: rgba(201,169,110,0.34); } #page-people .pay-table .pay-adj { display: inline-flex; align-items: baseline; gap: 5px; justify-content: flex-end; } #page-people .pay-table .pay-adj-was { text-decoration: line-through; color: #6E6960; font-size: 11px; } #page-people .pay-table .pay-adj-arrow { color: #6E6960; font-size: 10px; } #page-people .pay-table .pay-adj-now { color: #C9A96E; font-weight: 700; } #page-people .pay-table .pay-rvw { display: inline-block; margin-left: 6px; padding: 2px 7px; border-radius: 10px; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 9px; letter-spacing: 0.03em; text-transform: uppercase; color: #E8943A; background: rgba(232,148,58,0.12); border: 1px solid rgba(232,148,58,0.34); cursor: help; } /* FIX_PAYROLL_OPENPUNCH_VISIBILITY_2026_08_15 — the open-punch chip takes the SAME visual treatment as .pay-rvw directly above (same class of disclosure: a figure that is not what it looks like), in the amber caution ramp rather than the green/gold affirmative ramp. The period notice below it is the WHY; both selectors sit inside #page-people so they carry the surface's own ID specificity. */ #page-people .pay-table .pay-open { display: inline-block; margin-left: 6px; padding: 2px 7px; border-radius: 10px; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 9px; letter-spacing: 0.03em; text-transform: uppercase; color: #E8943A; background: rgba(232,148,58,0.12); border: 1px solid rgba(232,148,58,0.34); cursor: help; white-space: nowrap; } /* Dual-clock-in build — the WITHHELD-HOURS chip. Same geometry, weight and affordance as the open-punch chip directly above so the two read as one family on the row; a distinct hue only because the two states are different claims (an open punch has no duration yet; a withheld punch has one and is being held back). Colour is SEMANTIC, never decorative. Both selectors are scoped under #page-people the same way, so neither out-specifies the other. */ #page-people .pay-table .pay-withheld { display: inline-block; margin-left: 6px; padding: 2px 7px; border-radius: 10px; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 9px; letter-spacing: 0.03em; text-transform: uppercase; color: #D9C27A; background: rgba(217,194,122,0.12); border: 1px solid rgba(217,194,122,0.34); cursor: help; white-space: nowrap; } /* FIX_TIMEOFF_APPROVAL_CASCADE_2026_09_02 — the approved-leave chip on a payroll row. Same geometry and the SAME ID-scoped host as .pay-withheld directly above (#page-people .pay-table, specificity (1,2,0)) so it cannot be beaten by an ID-scoped rule the way an unscoped class would be; muted rather than gold because it reports a fact about the period, not a warning. */ #page-people .pay-table .pay-leave { display: inline-block; margin-left: 6px; padding: 2px 7px; border-radius: 10px; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 9px; letter-spacing: 0.03em; text-transform: uppercase; color: #C4BFB6; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.16); cursor: help; white-space: nowrap; } #page-people .pay-openbasis { display: flex; align-items: flex-start; gap: 13px; padding: 15px 18px; margin: 0 0 14px; border-radius: 14px; background: linear-gradient(118deg, rgba(232,148,58,0.10), rgba(232,148,58,0.02) 60%); border: 1px solid rgba(232,148,58,0.34); } #page-people .pay-openbasis .pob-ic { flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: #E8943A; background: rgba(232,148,58,0.14); border: 1px solid rgba(232,148,58,0.34); } #page-people .pay-openbasis .pob-lim { display: block; margin-top: 7px; font-size: 11px; color: var(--dim); line-height: 1.5; } /* the editor popover. position:relative on the host cell + absolute here keeps it out of the table's layout flow so opening it cannot reflow the row grid. NO `sa-reveal` — that class sets opacity:0 and is revealed by an observer that does not run on this surface (the bug fixed twice on the staff-app popovers); this renders visible on append. */ #page-people .pay-table td { position: relative; } #page-people .pay-table .pay-adj-pop { position: absolute; right: 8px; top: calc(100% - 4px); z-index: 40; width: 288px; padding: 14px; text-align: left; background: #221F1B; border: 1px solid rgba(201,169,110,0.34); border-radius: 12px; box-shadow: 0 18px 44px rgba(0,0,0,0.55); } #page-people .pay-table .pay-adj-pop h3 { margin: 0 0 8px; font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 700; color: #E8E3DA; letter-spacing: 0.02em; } #page-people .pay-table .pay-adj-orig { font-size: 11.5px; color: var(--dim); margin-bottom: 11px; line-height: 1.5; } #page-people .pay-table .pay-adj-lab { display: block; font-family: 'Montserrat', sans-serif; font-size: 9.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--dim); margin: 0 0 5px; } #page-people .pay-table .pay-adj-hrs, #page-people .pay-table .pay-adj-why { width: 100%; box-sizing: border-box; margin-bottom: 11px; padding: 8px 10px; font-family: 'Open Sans', sans-serif; font-size: 12.5px; color: #E8E3DA; background: rgba(0,0,0,0.28); border: 1px solid rgba(255,255,255,0.14); border-radius: 8px; resize: vertical; } #page-people .pay-table .pay-adj-hrs:focus, #page-people .pay-table .pay-adj-why:focus { outline: none; border-color: rgba(201,169,110,0.60); } #page-people .pay-table .pay-adj-note { font-size: 10.5px; color: #6E6960; line-height: 1.5; margin-bottom: 10px; } #page-people .pay-table .pay-adj-err { font-size: 11px; color: #E05555; line-height: 1.45; margin-bottom: 9px; } #page-people .pay-table .pay-adj-actions { display: flex; gap: 8px; } #page-people .pay-table .pay-adj-save { flex: 1; padding: 8px 12px; border-radius: 8px; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 10.5px; color: #1C1A17; background: #C9A96E; border: 1px solid #C9A96E; cursor: pointer; } #page-people .pay-table .pay-adj-cancel { padding: 8px 12px; border-radius: 8px; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 10.5px; color: var(--dim); background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.12); cursor: pointer; } #page-people .pay-table-dailynote { font-size: 11.5px; color: var(--dim); padding: 13px 16px; background: #1C1A17; border-top: 1px solid rgba(255,255,255,0.07); line-height: 1.55; } /* approve + send control bar (buttons DISABLED — honest "ships later", no fake-success) */ #page-people .pay-approve-bar { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; padding: 17px 20px; border-radius: 16px; flex-wrap: wrap; background: linear-gradient(168deg, #26231f, #1d1a17); border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 24px 56px -42px #000, inset 0 1px 0 rgba(255,255,255,0.05); } #page-people .pay-approve-bar .ab-summary { font-size: 12px; color: var(--dim); line-height: 1.5; max-width: 60ch; } #page-people .pay-approve-bar .ab-spacer { margin-left: auto; } #page-people .pay-approve-bar .send-blocker { display: flex; align-items: center; gap: 7px; font-size: 11px; color: #f0c08a; font-family: 'Montserrat', sans-serif; font-weight: 600; } #page-people .pay-approve-bar .approve-all { display: flex; align-items: center; gap: 8px; padding: 11px 17px; border-radius: 10px; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 12px; border: 1px solid rgba(76,175,125,0.4); background: rgba(76,175,125,0.08); color: #9fe0bd; } #page-people .pay-approve-bar .approve-all[disabled] { opacity: 0.45; cursor: not-allowed; } #page-people .pay-approve-bar .btn-send { display: flex; align-items: center; gap: 9px; padding: 12px 20px; border-radius: 11px; font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 12.5px; color: #1a160c; background: linear-gradient(150deg, #C9A84C, #9c7f33); } #page-people .pay-approve-bar .btn-send[disabled] { opacity: 0.42; cursor: not-allowed; filter: grayscale(0.3); } /* FIX_PAYROLL_PAYMENT_RECORDS_2026_08_31 — the payment-record block (receipt / honest-absent / labelled forecast). ⛔ SCOPED UNDER #page-people TO MATCH ITS HOST: every payroll rule in this region is ID-scoped, and an unscoped class rule would lose the cascade to the ID-scoped siblings around it and render as an unstyled block. The absent state is deliberately NOT styled as an error — it is the COMMON case at launch (no period has records yet) and must read as informative, not broken. */ #page-people .pay-record-block { margin-bottom: 26px; padding: 18px 20px; border-radius: 16px; background: linear-gradient(168deg, #23201c, #1b1815); border: 1px solid rgba(255,255,255,0.10); box-shadow: 0 24px 56px -42px #000, inset 0 1px 0 rgba(255,255,255,0.04); } #page-people .pay-record-head { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 12.5px; letter-spacing: 0.02em; color: #F0EBE2; margin-bottom: 10px; } #page-people .pay-record-total { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 22px; color: #9fe0bd; display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; } #page-people .pay-record-tag { font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #4CAF7D; border: 1px solid rgba(76,175,125,0.4); background: rgba(76,175,125,0.10); border-radius: 6px; padding: 3px 7px; } #page-people .pay-record-list { list-style: none; margin: 0 0 10px; padding: 0; } #page-people .pay-record-list li { display: flex; align-items: center; gap: 12px; padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,0.06); font-size: 12.5px; color: #D6CFC4; } #page-people .pay-record-list li:last-child { border-bottom: 0; } #page-people .pay-record-who { flex: 1 1 auto; color: #F0EBE2; } #page-people .pay-record-amt { font-family: 'Montserrat', sans-serif; font-weight: 700; color: #9fe0bd; } #page-people .pay-record-when { font-size: 11px; color: var(--dim); min-width: 12ch; text-align: right; } #page-people .pay-record-foot, #page-people .pay-record-absent, #page-people .pay-record-forecast { font-size: 12px; line-height: 1.55; color: var(--dim); max-width: 76ch; } #page-people .pay-record-forecast strong { color: #f0c08a; font-weight: 700; } #page-people .pay-record-absent-cta { margin-top: 9px; font-size: 12px; color: #f0c08a; font-family: 'Montserrat', sans-serif; font-weight: 600; } /* FIX_TIMEOFF_BACKFILL_2026_09_04 — the retroactive-correction note. Sibling of the payment block above, in the same #page-people scope and reusing its existing type scale + var(--dim) body colour rather than introducing a second one. Colour is SEMANTIC only: the paid-period variant borrows the amber already used by .pay-record-absent-cta and .pay-record-forecast strong for "needs your attention", and the ordinary corrected note stays dim body text because a correction that landed cleanly is information, not a warning. */ #page-people .pay-backfill-block { margin: 0 0 26px; padding: 14px 18px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.09); background: rgba(255,255,255,0.02); } #page-people .pay-backfill-note { font-size: 12px; line-height: 1.55; color: var(--dim); max-width: 76ch; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.06); } #page-people .pay-backfill-note--paid { color: #f0c08a; } #page-people .pay-record-entry { margin-top: 14px; padding-top: 13px; border-top: 1px solid rgba(255,255,255,0.08); display: flex; flex-direction: column; gap: 9px; } #page-people .pay-record-entry-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } #page-people .pay-record-entry-who { flex: 1 1 16ch; font-size: 12.5px; color: #F0EBE2; } #page-people .pay-record-input, #page-people .pay-record-date { padding: 8px 11px; border-radius: 9px; font-size: 12.5px; color: #F0EBE2; background: rgba(0,0,0,0.28); border: 1px solid rgba(255,255,255,0.14); } #page-people .pay-record-input { width: 14ch; } #page-people .pay-record-btn { padding: 9px 16px; border-radius: 10px; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 12px; color: #1a160c; background: linear-gradient(150deg, #C9A84C, #9c7f33); border: 0; cursor: pointer; } /* owner -> bookkeeper hand-off flow band */ #page-people .pay-handoff-band { position: relative; overflow: hidden; margin-bottom: 26px; padding: 22px; border-radius: 16px; border: 1px solid rgba(91,155,213,0.3); background: linear-gradient(118deg, rgba(91,155,213,0.12), rgba(91,155,213,0.03) 60%, rgba(201,168,76,0.05)); box-shadow: 0 24px 56px -42px #000, inset 0 1px 0 rgba(255,255,255,0.05); } #page-people .pay-handoff-band .ho-top { display: flex; align-items: center; gap: 15px; } #page-people .pay-handoff-band .ho-ic { width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0; display: grid; place-items: center; background: rgba(91,155,213,0.16); border: 1px solid rgba(91,155,213,0.36); } #page-people .pay-handoff-band .ho-h { flex: 1; min-width: 0; } #page-people .pay-handoff-band .ho-h h3 { font-family: 'Montserrat', sans-serif; font-size: 16px; color: #F0EBE2; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } #page-people .pay-handoff-band .ho-h .ho-mini { padding: 2px 9px; border-radius: 13px; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 9px; letter-spacing: 0.07em; text-transform: uppercase; color: #9cc4ea; background: rgba(91,155,213,0.14); border: 1px solid rgba(91,155,213,0.34); } #page-people .pay-handoff-band .ho-h p .ext { color: #9cc4ea; font-weight: 700; } #page-people .pay-handoff-band .ho-h p .never { color: #f0c08a; font-weight: 600; } #page-people .pay-handoff-band .ho-flow { display: flex; align-items: stretch; gap: 0; margin-top: 18px; flex-wrap: wrap; } #page-people .pay-handoff-band .ho-node { flex: 1; min-width: 230px; display: flex; align-items: center; gap: 13px; padding: 14px 16px; border-radius: 13px; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.02); } #page-people .pay-handoff-band .ho-node.us { border-color: rgba(201,168,76,0.34); background: linear-gradient(150deg, rgba(201,168,76,0.1), rgba(201,168,76,0.02)); } #page-people .pay-handoff-band .ho-node.book { border-color: rgba(76,175,125,0.32); background: linear-gradient(150deg, rgba(76,175,125,0.08), rgba(76,175,125,0.015)); } #page-people .pay-handoff-band .ho-node .hn-ic { width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0; display: grid; place-items: center; font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 13px; } #page-people .pay-handoff-band .ho-node.us .hn-ic { background: linear-gradient(150deg, rgba(201,168,76,0.95), rgba(156,127,51,0.65)); color: #1a160c; } #page-people .pay-handoff-band .ho-node.book .hn-ic { background: linear-gradient(150deg, #6fcf9a, #2f8a5e); color: #0c2c20; } #page-people .pay-handoff-band .ho-node.ext .hn-ic { background: linear-gradient(150deg, #5fce97, #2f8a5e); color: #0c2c20; } #page-people .pay-handoff-band .ho-node .hn-tx b { display: block; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 12.5px; color: #F0EBE2; line-height: 1.2; } #page-people .pay-handoff-band .ho-node .hn-tx span { display: block; font-size: 10.5px; color: var(--dim); margin-top: 3px; line-height: 1.4; } #page-people .pay-handoff-band .ho-node .hn-tx .role-tag { display: inline-block; margin-top: 6px; padding: 2px 8px; border-radius: 11px; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 8.5px; letter-spacing: 0.06em; text-transform: uppercase; } #page-people .pay-handoff-band .ho-node.us .role-tag { color: #e8cd86; background: rgba(201,168,76,0.14); border: 1px solid rgba(201,168,76,0.34); } #page-people .pay-handoff-band .ho-node.book .role-tag { color: #9fe0bd; background: rgba(76,175,125,0.14); border: 1px solid rgba(76,175,125,0.34); } #page-people .pay-handoff-band .ho-node.ext .role-tag { color: #9cc4ea; background: rgba(91,155,213,0.14); border: 1px solid rgba(91,155,213,0.34); } #page-people .pay-handoff-band .ho-arrow { flex-shrink: 0; align-self: center; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0 12px; } #page-people .pay-handoff-band .ho-arrow span { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 8.5px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--dim); white-space: nowrap; } #page-people .pay-handoff-band .ho-dest { display: flex; align-items: center; gap: 14px; margin-top: 18px; padding: 14px 16px; border-radius: 13px; flex-wrap: wrap; border: 1px solid rgba(255,255,255,0.07); background: rgba(0,0,0,0.18); } #page-people .pay-handoff-band .ho-dest .hd-meta { font-size: 11.5px; color: var(--dim); line-height: 1.5; max-width: 52ch; } #page-people .pay-handoff-band .ho-dest .hd-meta b { color: #C4BFB6; font-family: 'Montserrat', sans-serif; font-weight: 600; } #page-people .pay-handoff-band .ho-dest .hd-spacer { margin-left: auto; } #page-people .pay-handoff-band .ho-alt { display: flex; align-items: center; gap: 9px; font-size: 11px; color: var(--dim); padding: 9px 14px; border-radius: 10px; border: 1px dashed rgba(255,255,255,0.12); background: rgba(255,255,255,0.015); } #page-people .pay-handoff-band .ho-alt .alt-disabled { color: var(--dim); font-weight: 600; } /* audit / trust strip (REAL DAL.getActivityLog rows, honest-empty when none) */ #page-people .pay-audit-strip { margin-bottom: 26px; border-radius: 16px; overflow: hidden; background: #232120; border: 1px solid rgba(255,255,255,0.07); box-shadow: 0 8px 32px rgba(0,0,0,0.45); } #page-people .pay-audit-strip .as-head { display: flex; align-items: center; gap: 11px; padding: 15px 18px; border-bottom: 1px solid rgba(255,255,255,0.07); } #page-people .pay-audit-strip .as-head span { margin-left: auto; font-size: 11px; color: var(--dim); } #page-people .pay-audit-strip .audit-note { padding: 14px 18px; font-size: 12.5px; color: #C4BFB6; line-height: 1.6; border-bottom: 1px solid rgba(255,255,255,0.07); } #page-people .pay-audit-strip .audit-note .never { color: #E8943A; font-weight: 600; } #page-people .pay-audit-strip .as-row { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid rgba(255,255,255,0.07); font-size: 12px; } #page-people .pay-audit-strip .as-row.empty { color: var(--dim); } #page-people .pay-audit-strip .as-row .as-dot { width: 7px; height: 7px; border-radius: 50%; background: #C9A84C; flex-shrink: 0; box-shadow: 0 0 8px rgba(201,168,76,0.28); } #page-people .pay-audit-strip .as-row .as-actor { font-family: 'Montserrat', sans-serif; font-weight: 700; color: #C9A84C; flex-shrink: 0; min-width: 110px; } #page-people .pay-audit-strip .as-row .as-what { color: #C4BFB6; flex: 1; min-width: 0; } #page-people .pay-audit-strip .as-row .as-what b { color: #F0EBE2; font-weight: 600; } #page-people .pay-audit-strip .as-row .as-time { color: var(--dim); flex-shrink: 0; font-variant-numeric: tabular-nums; } @media (max-width: 980px) { #page-people .pay-handoff-band .ho-arrow { transform: rotate(90deg); padding: 8px 0; } } /* ════════════════════════════════════════════════════════════════════════════ FIX_RATE_ENGINE_S1_2026_06_29 (v1.25) — "Roles & Pay Rules" config-panel styles, scoped under #page-people (the rpr- = "roles pay rules" prefix, so nothing collides with the People pa-/pi-/ po-/pay-/ph- blocks above OR bleeds to other surfaces). Built TO design_samples/people/ roles_pay_rules.html at the sample's visual language (its :root tokens ported inline). The two editors swap in-layout via .rpr-view show/hide (NOT drawers/modals). ════════════════════ */ /* FIX_RATE_ENGINE_S1_FULLWIDTH_2026_06_29 — lift 1180px shell cap so the Roles & Pay Rules surface (incl. both in-layout editors) fills available content width on wide monitors; footer-inner lifted in lockstep below */ #page-people .rpr-app { max-width: none; margin: 0 auto; padding-bottom: 120px; } #page-people .rpr-topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; } #page-people .rpr-crumbs { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--dim); letter-spacing: .04em; flex-wrap: wrap; font-weight: 500; font-family: 'Montserrat', sans-serif; } #page-people .rpr-crumb { color: var(--dim); text-decoration: none; cursor: pointer; background: none; border: none; font: inherit; padding: 0; } #page-people .rpr-crumb:hover, #page-people .rpr-pv-line .rpr-pvl { color: #C4BFB6; } #page-people .rpr-crumb.current, #page-people .rpr-req { color: #C9A84C; } #page-people .rpr-crumb-sep { color: #564f45; } #page-people .rpr-crumb.chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border: 1px solid rgba(255,255,255,0.10); border-radius: 100px; background: linear-gradient(180deg,rgba(255,255,255,0.025),rgba(0,0,0,0.15)); color: #C4BFB6; } #page-people .rpr-crumb .rpr-dot { width: 6px; height: 6px; border-radius: 50%; background: #C9A84C; box-shadow: 0 0 8px rgba(201,168,76,0.45); } #page-people .rpr-pill { font-size: 11px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: var(--dim); border: 1px solid rgba(255,255,255,0.10); border-radius: 999px; padding: 5px 11px; font-family: 'Montserrat', sans-serif; } #page-people .rpr-pill.gold { color: #C9A84C; border-color: rgba(201,168,76,.4); } #page-people .rpr-pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 22px; flex-wrap: wrap; } #page-people .rpr-pagehead h1 .rpr-accent { background: linear-gradient(92deg,#E7CE82,#C9A84C 55%,#9d7e2f); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } #page-people .rpr-pagehead .rpr-sub { margin-top: 9px; font-size: 13.5px; color: var(--dim); max-width: 620px; line-height: 1.55; } #page-people .rpr-head-actions, #page-people .rpr-footer .rpr-factions { display: flex; gap: 10px; flex-wrap: wrap; } #page-people .rpr-access { display: flex; gap: 13px; align-items: center; background: linear-gradient(180deg,rgba(201,168,76,0.08),rgba(201,168,76,0.015)); border: 1px solid rgba(201,168,76,0.28); border-radius: 16px; padding: 13px 18px; margin-bottom: 22px; } #page-people .rpr-access .rpr-an-ico { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 9px; background: rgba(201,168,76,0.14); color: #C9A84C; display: flex; align-items: center; justify-content: center; } #page-people .rpr-access .rpr-an-text, #page-people .rpr-sec-titles { flex: 1; min-width: 200px; } #page-people .rpr-access .rpr-an-text b, #page-people .rpr-foot-note b { color: #F0EBE2; font-family: 'Montserrat', sans-serif; font-weight: 600; } #page-people .rpr-access .rpr-an-text span { font-size: 12px; color: var(--dim); display: block; margin-top: 1px; } #page-people .rpr-boundary { display: flex; gap: 14px; align-items: flex-start; background: linear-gradient(180deg,rgba(91,155,213,0.08),rgba(91,155,213,0.02)); border: 1px solid rgba(91,155,213,0.28); border-radius: 16px; padding: 18px 20px; margin-bottom: 22px; } #page-people .rpr-boundary .rpr-b-ico { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 10px; background: rgba(91,155,213,0.12); color: #5B9BD5; display: flex; align-items: center; justify-content: center; } #page-people .rpr-boundary .rpr-b-text { flex: 1; min-width: 240px; } #page-people .rpr-boundary .rpr-b-text .rpr-hand { color: #5B9BD5; font-weight: 600; } #page-people .rpr-card { position: relative; background: linear-gradient(160deg,#26221D,#1A1714); border: 1px solid rgba(255,255,255,0.10); border-radius: 16px; padding: 22px 24px 24px; margin-bottom: 20px; box-shadow: 0 26px 50px -36px rgba(0,0,0,0.9), 0 1px 0 rgba(255,255,255,0.03) inset; } #page-people .rpr-sec-head { display: flex; align-items: flex-start; gap: 13px; margin-bottom: 18px; flex-wrap: wrap; } #page-people .rpr-sec-num { width: 28px; height: 28px; flex: 0 0 28px; border-radius: 8px; background: rgba(201,168,76,0.14); color: #C9A84C; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; font-family: 'Montserrat', sans-serif; } #page-people .rpr-sec-title { margin: 0; font-family: 'Montserrat', sans-serif; font-size: 16px; font-weight: 700; color: #F0EBE2; letter-spacing: -.01em; } #page-people .rpr-sec-desc { margin: 3px 0 0; font-size: 12.5px; color: var(--dim); line-height: 1.5; } #page-people .rpr-sh-actions { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; } #page-people .rpr-tbl-wrap { border: 1px solid rgba(255,255,255,0.10); border-radius: 10px; overflow: hidden; overflow-x: auto; } #page-people table.rpr-tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; } #page-people table.rpr-tbl thead th { text-align: left; font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--dim); background: #1C1A17; padding: 11px 14px; border-bottom: 1px solid rgba(255,255,255,0.10); white-space: nowrap; } #page-people table.rpr-tbl thead th.r { text-align: right; } #page-people table.rpr-tbl tbody td { padding: 13px 14px; border-bottom: 1px solid rgba(255,255,255,0.06); vertical-align: middle; } #page-people table.rpr-tbl tbody tr:last-child td { border-bottom: none; } #page-people table.rpr-tbl tbody tr:hover { background: rgba(255,255,255,0.013); } #page-people table.rpr-tbl tbody tr.inactive { opacity: .5; } #page-people table.rpr-tbl td.r { text-align: right; } #page-people .rpr-role-name { font-family: 'Montserrat', sans-serif; font-weight: 600; color: #F0EBE2; font-size: 14px; } #page-people .rpr-role-key { font-size: 11px; color: var(--dim); font-family: 'Montserrat', sans-serif; letter-spacing: .3px; margin-top: 2px; } #page-people .rpr-rate-val { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 15px; color: #F0EBE2; } #page-people .rpr-rate-val .rpr-cur { font-size: 11px; color: var(--dim); font-weight: 600; margin-right: 1px; vertical-align: 2px; } #page-people .rpr-rate-val .rpr-per, #page-people .rpr-amt-add .rpr-per { font-size: 11px; color: var(--dim); font-weight: 500; } #page-people .rpr-rate-unset { font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 12px; color: #E8943A; display: inline-flex; align-items: center; gap: 6px; } #page-people .rpr-rate-unset .rpr-udot { width: 6px; height: 6px; border-radius: 50%; background: #E8943A; box-shadow: 0 0 8px rgba(232,148,58,0.55); } #page-people .rpr-row-actions { display: flex; gap: 7px; justify-content: flex-end; } #page-people .rpr-trig { display: inline-flex; align-items: center; gap: 7px; flex-wrap: wrap; } #page-people .rpr-trig .rpr-tdim { font-family: 'Montserrat', sans-serif; font-size: 10.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: #5B9BD5; background: rgba(91,155,213,0.12); border: 1px solid rgba(91,155,213,0.25); border-radius: 6px; padding: 3px 8px; } #page-people .rpr-trig .rpr-teq { color: var(--dim); font-size: 12px; } #page-people .rpr-trig .rpr-tmatch { font-family: 'Montserrat', sans-serif; font-size: 12.5px; font-weight: 600; color: #F0EBE2; } #page-people .rpr-trig .rpr-tcond { font-family: 'Montserrat', sans-serif; font-size: 10.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: #E8943A; background: rgba(232,148,58,0.14); border: 1px solid rgba(232,148,58,0.25); border-radius: 6px; padding: 3px 8px; } #page-people .rpr-amt-add { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 14px; color: #4CAF7D; } #page-people .rpr-amt-add .rpr-cur { font-size: 11px; color: var(--dim); font-weight: 600; vertical-align: 2px; } #page-people .rpr-mode-chip { font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--dim); border: 1px solid rgba(255,255,255,0.10); border-radius: 6px; padding: 3px 8px; } #page-people .rpr-mode-chip.active-mode { color: #C9A84C; border-color: rgba(201,168,76,0.35); background: rgba(201,168,76,0.14); } #page-people .rpr-badge { display: inline-flex; align-items: center; gap: 5px; font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; } #page-people .rpr-badge.green { color: #4CAF7D; background: rgba(76,175,125,0.14); } #page-people .rpr-badge.green .rpr-bdot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; display: inline-block; } #page-people .rpr-badge.dim { color: var(--dim); background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.10); } #page-people .rpr-icon-btn { background: none; border: 1px solid rgba(255,255,255,0.10); border-radius: 7px; width: 32px; height: 32px; color: var(--dim); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: color .15s, border-color .15s, background .15s; } #page-people .rpr-foot-note { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; font-size: 12.5px; color: #C4BFB6; background: rgba(232,148,58,0.06); border: 1px solid rgba(232,148,58,0.20); border-radius: 10px; padding: 11px 14px; } #page-people .rpr-hint { font-size: 11.5px; color: var(--dim); margin-top: 7px; font-family: 'Open Sans', sans-serif; text-transform: none; letter-spacing: 0; font-weight: 400; line-height: 1.5; } #page-people .rpr-btn { font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 13px; letter-spacing: .2px; border-radius: 7px; padding: 10px 16px; cursor: pointer; border: 1px solid transparent; display: inline-flex; align-items: center; gap: 7px; transition: background .15s, color .15s, border-color .15s, transform .05s; } #page-people .rpr-btn:active { transform: translateY(1px); } #page-people .rpr-btn.primary { background: #C9A84C; color: #1A1610; border-color: #C9A84C; } #page-people .rpr-btn.ghost { background: transparent; color: #C4BFB6; border-color: rgba(255,255,255,0.10); } #page-people .rpr-btn.subtle { background: #232120; color: #C4BFB6; border-color: rgba(255,255,255,0.10); } #page-people .rpr-btn.sm { padding: 7px 12px; font-size: 12px; } #page-people .rpr-field { margin-bottom: 18px; } #page-people .rpr-label { display: block; font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--dim); margin-bottom: 7px; } #page-people .rpr-input { width: 100%; background: #1C1A17; border: 1px solid rgba(255,255,255,0.10); border-radius: 7px; color: #F0EBE2; font-family: 'Open Sans', sans-serif; font-size: 14px; padding: 11px 12px; transition: border-color .15s ease, box-shadow .15s ease; } #page-people select.rpr-input { appearance: none; background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; cursor: pointer; background-image: url("data:image/svg+xml;utf8,"); } #page-people .rpr-row2 { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; } @media (max-width: 620px) { #page-people .rpr-row2 { grid-template-columns: 1fr; } } #page-people .rpr-affix { position: relative; display: flex; } #page-people .rpr-affix-prefix { display: flex; align-items: center; padding: 0 13px; background: #232120; border: 1px solid rgba(255,255,255,0.10); border-right: none; border-radius: 7px 0 0 7px; color: var(--dim); font-size: 14px; font-family: 'Montserrat', sans-serif; font-weight: 600; } #page-people .rpr-affix .rpr-input { border-radius: 0; } #page-people .rpr-affix-suffix { display: flex; align-items: center; padding: 0 13px; background: #232120; border: 1px solid rgba(255,255,255,0.10); border-left: none; border-radius: 0 7px 7px 0; color: var(--dim); font-size: 12.5px; white-space: nowrap; } #page-people .rpr-seg { display: flex; gap: 8px; flex-wrap: wrap; } #page-people .rpr-seg-btn { font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 600; background: #1C1A17; border: 1.5px solid rgba(255,255,255,0.10); color: #C4BFB6; border-radius: 7px; padding: 9px 14px; cursor: pointer; transition: border-color .15s, background .15s, color .15s; } #page-people .rpr-mode-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; } @media (max-width: 620px) { #page-people .rpr-mode-grid { grid-template-columns: 1fr; } } #page-people .rpr-mode-card { text-align: left; background: #1C1A17; border: 1.5px solid rgba(255,255,255,0.10); border-radius: 10px; padding: 13px 14px; cursor: pointer; color: #C4BFB6; transition: border-color .15s, background .15s; display: flex; flex-direction: column; gap: 5px; position: relative; } #page-people .rpr-mode-card.locked { opacity: .45; cursor: not-allowed; } #page-people .rpr-mode-card .rpr-mc-name { font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 700; color: #F0EBE2; display: flex; align-items: center; gap: 8px; } #page-people .rpr-mode-card .rpr-mc-desc { font-size: 11.5px; color: var(--dim); line-height: 1.45; } #page-people .rpr-mode-card .rpr-soon { font-family: 'Montserrat', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--dim); border: 1px solid rgba(255,255,255,0.10); border-radius: 5px; padding: 2px 6px; } #page-people .rpr-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; background: #1C1A17; border: 1px solid rgba(255,255,255,0.10); border-radius: 10px; padding: 13px 15px; } #page-people .rpr-toggle-row .rpr-tr-text { font-size: 13.5px; color: #F0EBE2; font-weight: 600; font-family: 'Montserrat', sans-serif; } #page-people .rpr-toggle-row .rpr-tr-sub { font-size: 11.5px; color: var(--dim); margin-top: 2px; font-family: 'Open Sans', sans-serif; font-weight: 400; } #page-people .rpr-switch { position: relative; width: 42px; height: 24px; flex: 0 0 42px; } #page-people .rpr-switch input { opacity: 0; width: 0; height: 0; position: absolute; } #page-people .rpr-slider { position: absolute; inset: 0; background: #3a342c; border-radius: 999px; cursor: pointer; transition: background .2s; } #page-people .rpr-preview { background: #1C1A17; border: 1px solid rgba(255,255,255,0.10); border-radius: 10px; padding: 16px 18px; margin-top: 4px; } #page-people .rpr-preview .rpr-pv-k { font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--dim); } #page-people .rpr-pv-line { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.06); font-size: 13px; } #page-people .rpr-pv-line .rpr-pvl small { color: var(--dim); } #page-people .rpr-pv-line .rpr-pvv { font-family: 'Montserrat', sans-serif; font-weight: 600; color: #F0EBE2; font-variant-numeric: tabular-nums; } #page-people .rpr-pv-line.total .rpr-pvl { color: #C9A84C; font-weight: 600; } #page-people .rpr-pv-line.total .rpr-pvv { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 17px; color: #F0EBE2; } #page-people .rpr-footer { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: rgba(22,20,15,0.93); backdrop-filter: blur(10px); border-top: 1px solid rgba(255,255,255,0.10); } /* FIX_RATE_ENGINE_S1_FULLWIDTH_2026_06_29 — footer-inner cap lifted in lockstep with .rpr-app above so the sticky footer content stays aligned with the now-full-width body */ /* FIX_DESIGNKIT_FABRESERVE_2026_09_12 — the sticky footer CONSUMES the launcher's published footprint. .sup-btn (src/support_panel.js) is viewport-fixed bottom-right above ordinary page chrome and nothing reserved space for it, so it took the hit test over this footer's right-aligned Save role button: the click opened Support and the role was not saved. THE ADDED TERM IS DERIVED, NOT TYPED. --viq-fab-reserve is measured off the launcher's own rect at runtime; the clamp() restated inside the calc is THIS RULE'S OWN pre-existing inset, preserved rather than invented, and it doubles as the gap between Save and the launcher — which is why the publisher adds no gutter constant. A FOLLOWING LONGHAND, not a rewritten shorthand: one declaration, the other three sides untouched, and a later longhand of equal specificity wins over the earlier shorthand with no specificity change. The 0px fallback is the no-regression guarantee — unset (signed out, suppressed page, module absent) resolves to 0px and this padding is byte-identical to pre-ship. ONE DECLARATION COVERS BOTH EMITTERS: src/rpr.js (Roles & Pay Rules) and src/bn.js (Bonuses library) both emit class="rpr-footer", so neither module is edited. */ #page-people .rpr-footer-inner { max-width: none; margin: 0 auto; padding: 14px clamp(18px,4vw,40px); padding-right: calc(clamp(18px,4vw,40px) + var(--viq-fab-reserve, 0px)); display: flex; align-items: center; gap: 12px; } #page-people .rpr-footer .rpr-fleft { flex: 1; font-size: 12px; color: var(--dim); } #page-people .rpr-view.rpr-hide { display: none; } @media (max-width: 720px) { #page-people .rpr-footer-inner { flex-wrap: wrap; } #page-people .rpr-footer .rpr-factions { width: 100%; } } /* FIX_POSITIONS_S1_2026_09_15 (ARC_POSITIONS_COC_2026_09_15) — Positions S1 CSS. Namespaced under #page-people per the standing kit-scoping discipline (LANE_E_BRIEF_BOILERPLATE.md §17): none of the sample's drail/hcard/dayrow/toggle-row/pgrid/ledg/tray/empty/sec-head classes exist under #page-people today, so this is emission, not reuse. Sized from the sample's own visual language but every value here is authored, not copied verbatim. */ #page-people .pos-toptabs { display: flex; gap: 4px; margin: 14px 0 2px; border-bottom: 1px solid rgba(255,255,255,0.10); } #page-people .pos-toptab { background: none; border: none; border-bottom: 2px solid transparent; color: var(--dim); font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 13px; padding: 10px 6px; cursor: pointer; } #page-people .pos-pghead { display: flex; gap: 14px; align-items: flex-start; margin: 18px 0 10px; } #page-people .pos-ph-icon { color: #C9A84C; flex: none; margin-top: 2px; } #page-people .pos-ph-title { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 20px; color: #F0EBE2; margin: 0 0 4px; } #page-people .pos-ph-sub { font-size: 13px; color: var(--dim); max-width: 640px; line-height: 1.5; } #page-people .pos-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; } #page-people .pos-seg { display: flex; gap: 2px; background: #1C1A17; border-radius: 8px; padding: 3px; } #page-people .pos-seg-btn { background: none; border: none; color: var(--dim); font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 6px; cursor: pointer; } #page-people .pos-statusline { font-size: 12px; color: var(--dim); margin-bottom: 14px; } #page-people .pos-warnchip { color: #E8943A; font-weight: 600; } #page-people .pos-panel { background: #1C1A17; border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 16px; margin-bottom: 16px; } #page-people .pos-ledg { width: 100%; border-collapse: collapse; font-size: 13px; } #page-people .pos-ledg thead th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--dim); padding: 0 8px 8px; } #page-people .pos-ledg tbody tr.pos-row { cursor: pointer; } #page-people .pos-ledg tbody tr.pos-row:hover { background: rgba(255,255,255,0.04); } #page-people .pos-ledg tbody tr.pos-row-owner { cursor: default; opacity: .85; } #page-people .pos-ledg tbody td { padding: 9px 8px; border-top: 1px solid rgba(255,255,255,0.06); color: #F0EBE2; } #page-people .pos-chip { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: #2c2820; color: #cfc8bb; border: 1px solid rgba(255,255,255,0.10); } #page-people .pos-chip-level { background: rgba(201,168,76,0.15); color: #C9A84C; border-color: rgba(201,168,76,0.3); } #page-people .pos-chip-primary { border-style: solid; border-color: #C9A84C; color: #C9A84C; background: rgba(201,168,76,0.1); } #page-people .pos-chip-acting { border-style: dashed; border-color: #7aa8d6; color: #7aa8d6; background: rgba(122,168,214,0.1); } #page-people .pos-muted { color: var(--dim); font-size: 12px; } #page-people .pos-ava { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: #3a352d; color: #F0EBE2; font-size: 10px; font-weight: 700; margin-right: 3px; } #page-people .pos-icon-btn { background: none; border: none; color: var(--dim); cursor: pointer; padding: 4px; } #page-people .pos-tray-head { font-size: 12px; font-weight: 600; color: var(--dim); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 10px; } #page-people .pos-tray-card { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid rgba(255,255,255,0.06); font-size: 13px; color: #F0EBE2; } #page-people .pos-tray-card:first-child { border-top: none; } #page-people .pos-tray-card button { margin-left: auto; } #page-people .pos-empty { text-align: center; padding: 60px 20px; } #page-people .pos-empty-icon { color: #C9A84C; margin-bottom: 12px; } #page-people .pos-empty-actions { display: flex; gap: 10px; justify-content: center; margin-top: 16px; } #page-people .pos-loading { padding: 40px 0; text-align: center; color: var(--dim); font-size: 13px; } #page-people .pos-rail { background: #1C1A17; border: 1px solid rgba(255,255,255,0.10); border-radius: 12px; padding: 18px; margin-top: 4px; } #page-people .pos-rail-eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--dim); margin-bottom: 6px; } #page-people .pos-input { width: 100%; box-sizing: border-box; padding: 9px 11px; background: #1a1815; border: 1px solid #3a352d; border-radius: 8px; color: #EFEAE1; font-size: 14px; margin-bottom: 6px; } #page-people .pos-fhint { font-size: 11px; color: var(--dim); margin-bottom: 10px; } #page-people .pos-rail-sec { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.08); } #page-people .pos-rail-sec-title { font-size: 12px; font-weight: 700; color: #cfc8bb; margin-bottom: 8px; display: block; } #page-people .pos-profile-pill { font-size: 13px; color: #F0EBE2; margin-bottom: 10px; } #page-people .pos-pgrid { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; margin-bottom: 8px; } #page-people .pos-pgrid-row { display: contents; } #page-people .pos-pgrid-row span:first-child { font-size: 12px; color: var(--dim); } #page-people .pos-hcard { display: flex; align-items: center; gap: 8px; padding: 10px 0; border-top: 1px solid rgba(255,255,255,0.06); flex-wrap: wrap; } #page-people .pos-hcard:first-of-type { border-top: none; } #page-people .pos-hcard-name { font-size: 13px; color: #F0EBE2; } #page-people .pos-hcard-state { font-size: 11px; color: var(--dim); width: 100%; } #page-people .pos-add-holder { display: flex; gap: 6px; align-items: center; margin-top: 8px; flex-wrap: wrap; } #page-people .pos-add-holder .pos-input { width: auto; flex: 1; margin-bottom: 0; } #page-people .pos-danger-note { font-size: 11px; color: var(--dim); margin-top: 16px; } #page-people .pos-rail-foot { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.08); } #page-people .rpr-btn.danger { background: transparent; border: 1px solid #C2483B; color: #C2483B; } #page-people .pos-sa-card { margin-top: 8px; } #page-people .pos-sa-line { font-size: 12px; color: #F0EBE2; margin-bottom: 6px; } /* FIX_POSITIONS_S1_FIXFWD_2026_09_16 -- F2, the acting/situational trigger editor (§3.9). */ #page-people .pos-trigger-editor { width: 100%; margin-top: 6px; padding: 8px; border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; } #page-people .pos-trigger-label { font-size: 11px; font-weight: 600; color: var(--dim); margin: 6px 0 4px; } #page-people .pos-trigger-sub { font-weight: 400; color: var(--dim); opacity: .75; } #page-people .pos-dayrow, #page-people .pos-hcard-dayrow { display: flex; gap: 4px; } #page-people .pos-day { width: 24px; height: 22px; display: grid; place-items: center; border-radius: 6px; border: 1px solid rgba(255,255,255,0.12); font-size: 10px; font-weight: 700; color: var(--dim); cursor: pointer; } #page-people .pos-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 0; } #page-people .pos-tr-t { font-size: 11.5px; font-weight: 600; color: #F0EBE2; } #page-people .pos-tr-s { font-size: 10px; color: var(--dim); } #page-people .pos-hcard-trigger { font-size: 11px; color: var(--dim); width: 100%; margin: 2px 0; } #page-people .pos-switch { position: relative; display: inline-block; width: 34px; height: 19px; flex: none; } #page-people .pos-switch input { opacity: 0; width: 0; height: 0; } #page-people .pos-slider { position: absolute; inset: 0; background: rgba(255,255,255,0.12); border-radius: 999px; cursor: pointer; } /* FIX_POSITIONS_S2_2026_09_16 -- §3.9, org-chart visual (self-contained pos-chart- prefix). Reuses the .pos-chip/.pos-ava colour tokens already established above (S1); never the bare kit .kpi/.kpis/.node/.edge classes (W1 -- those collide with an unrelated .vk-scoped PO-KPI surface under this same #page-people host, per the §0 WITNESS row). Citing FIX_POSITIONS_S1_2026_09_15. */ #page-people .pos-chart-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 4px 0 16px; } #page-people .pos-chart-kpi { background: #1C1A17; border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 14px 14px 13px; } #page-people .pos-chart-klbl { font-size: 10px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--dim); } #page-people .pos-chart-kval { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 24px; color: #F0EBE2; margin: 8px 0 6px; } #page-people .pos-chart-ksub { font-size: 11px; color: var(--dim); line-height: 1.35; } #page-people .pos-chart-layout { display: grid; grid-template-columns: minmax(0,1fr) 352px; gap: 16px; align-items: start; } #page-people .pos-chart-canvas-wrap { position: relative; background: #1C1A17; border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; overflow: auto; } #page-people .pos-chart-bar { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-bottom: 1px solid rgba(255,255,255,0.08); position: sticky; left: 0; } #page-people .pos-chart-bar-t { font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 700; color: #F0EBE2; } #page-people .pos-chart-bar-s { font-size: 11px; color: var(--dim); } #page-people .pos-chart-bar-r { margin-left: auto; display: flex; gap: 8px; align-items: center; } #page-people .pos-chart-zoom { display: inline-flex; border: 1px solid rgba(255,255,255,0.12); border-radius: 8px; overflow: hidden; } #page-people .pos-chart-zoom button { background: rgba(255,255,255,0.03); border: none; color: var(--dim); width: 28px; height: 26px; cursor: pointer; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 13px; } #page-people .pos-chart-zoom button:hover { color: #F0EBE2; background: rgba(255,255,255,0.07); } #page-people .pos-chart-zoom-pct { display: grid; place-items: center; padding: 0 8px; font-size: 11px; color: #F0EBE2; border-left: 1px solid rgba(255,255,255,0.10); border-right: 1px solid rgba(255,255,255,0.10); } #page-people .pos-chart-canvas { position: relative; margin: 0 auto; transform-origin: top left; background-image: radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px); background-size: 22px 22px; } #page-people .pos-chart-edges { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; } #page-people .pos-chart-edge { fill: none; stroke: rgba(255,255,255,0.22); stroke-width: 1.6; } #page-people .pos-chart-edge.sel { stroke: rgba(201,168,76,0.7); stroke-width: 2; } #page-people .pos-chart-edge.acting { stroke: rgba(122,168,214,0.85); stroke-width: 1.6; stroke-dasharray: 5 5; } #page-people .pos-chart-node { position: absolute; width: 214px; background: #211f1b; border: 1px solid rgba(255,255,255,0.12); border-radius: 10px; padding: 11px 12px 10px; cursor: pointer; transition: border-color .14s ease, transform .14s ease; } #page-people .pos-chart-node.sel { border-color: #C9A84C; box-shadow: 0 0 0 3px rgba(201,168,76,0.18); } #page-people .pos-chart-node.root { border-color: rgba(201,168,76,0.4); background: linear-gradient(168deg, rgba(201,168,76,0.14), #1C1A17); } #page-people .pos-chart-node.cycle { border-color: rgba(227,106,99,0.5); } #page-people .pos-chart-ntop { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; } #page-people .pos-chart-nname { font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 700; color: #F0EBE2; line-height: 1.2; } #page-people .pos-chart-nsub { font-size: 10.5px; color: var(--dim); margin-top: 2px; } #page-people .pos-chart-nchips { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 8px; } #page-people .pos-chart-nholders { display: flex; flex-direction: column; gap: 5px; margin-top: 9px; padding-top: 8px; border-top: 1px dashed rgba(255,255,255,0.10); } #page-people .pos-chart-holder { display: flex; align-items: center; gap: 8px; min-width: 0; } #page-people .pos-chart-ava { width: 24px; height: 24px; border-radius: 8px; flex: none; display: grid; place-items: center; font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 10px; color: #1C1A17; background: #C9A84C; } #page-people .pos-chart-ava.acting { background: transparent; border: 1.5px dashed #7aa8d6; color: #7aa8d6; } #page-people .pos-chart-hname { font-size: 11.5px; font-weight: 600; color: #F0EBE2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #page-people .pos-chart-hmeta { font-size: 10px; color: var(--dim); margin-top: -1px; } #page-people .pos-chart-holder .pos-chip { margin-left: auto; } #page-people .pos-chart-holder.vacant { color: #E8943A; font-size: 11px; font-weight: 600; } #page-people .pos-chart-holder.vacant .pos-chart-ava { background: transparent; border: 1.5px dashed rgba(232,148,58,0.6); color: #E8943A; } #page-people .pos-chart-ncount { position: absolute; top: -9px; right: 12px; font-family: 'Montserrat', sans-serif; font-size: 9px; font-weight: 800; color: #1C1A17; background: #C9A84C; border-radius: 999px; padding: 2px 7px; } #page-people .pos-chart-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; padding: 10px 14px; border-top: 1px solid rgba(255,255,255,0.08); font-size: 11px; color: var(--dim); } #page-people .pos-chart-lg { display: inline-flex; align-items: center; gap: 7px; } #page-people .pos-chart-ln { width: 24px; height: 0; border-top: 2px solid rgba(255,255,255,0.3); } #page-people .pos-chart-ln.dash { border-top: 2px dashed #7aa8d6; } #page-people .pos-chart-lg-t { font-family: 'Montserrat', sans-serif; font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); margin-right: 2px; } #page-people .pos-chart-drail { position: sticky; top: 80px; } #page-people .pos-chart-drail:empty { display: none; } @media (max-width: 1180px) { #page-people .pos-chart-layout { grid-template-columns: 1fr; } } /* ════════════════════════════════════════════════════════════════════════════ FIX_PEOPLE_P7A_BONUS_2026_07_03 (v1.25) — Bonuses setup surface atoms (bn- prefix), scoped under #page-people. Reuses the rpr- card / table / badge / button / field / affix / toggle / preview classes; these bn- classes cover the archetype gallery, eligibility pills, trigger + payout cells, the payout mode-card grid, the worked-example formula chip, and the pending-queue paid-note. Literal hex mirrors the sample :root tokens (gold #C9A84C, green #4CAF7D, amber #E8943A, blue #5B9BD5, purple #9D8BD6, bright #F0EBE2, dim #8A857D, text #C4BFB6, input-bg #1C1A17, line rgba). ASCII-only comments (a non-ASCII char silently drops the rule from the CSSOM — the L18.8 lesson). */ #page-people .bn-arch-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; } @media (max-width: 820px) { #page-people .bn-arch-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { #page-people .bn-arch-grid { grid-template-columns: 1fr; } } #page-people .bn-arch-card { text-align: left; background: #1C1A17; border: 1.5px solid rgba(255,255,255,0.10); border-radius: 10px; padding: 14px 15px; cursor: pointer; color: #C4BFB6; transition: border-color .15s, background .15s; display: flex; flex-direction: column; gap: 6px; } #page-people .bn-arch-card .bn-ac-top { display: flex; align-items: center; gap: 9px; } #page-people .bn-arch-card .bn-ac-ico { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 8px; background: rgba(201,168,76,0.14); color: #C9A84C; display: flex; align-items: center; justify-content: center; } #page-people .bn-arch-card .bn-ac-name { font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 700; color: #F0EBE2; } #page-people .bn-arch-card .bn-ac-desc { font-size: 11.5px; color: var(--dim); line-height: 1.45; } #page-people .bn-arch-card .bn-ac-egs { font-size: 11px; color: #C4BFB6; margin-top: 2px; } #page-people .bn-elig { display: inline-flex; align-items: center; gap: 6px; font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; border-radius: 6px; padding: 3px 9px; } #page-people .bn-elig.role { color: #5B9BD5; background: rgba(91,155,213,0.12); border: 1px solid rgba(91,155,213,0.25); } #page-people .bn-elig.team { color: #9D8BD6; background: rgba(157,139,214,0.14); border: 1px solid rgba(157,139,214,0.28); } #page-people .bn-elig.indiv { color: #C9A84C; background: rgba(201,168,76,0.14); border: 1px solid rgba(201,168,76,0.28); } #page-people .bn-elig.company { color: #4CAF7D; background: rgba(76,175,125,0.14); border: 1px solid rgba(76,175,125,0.25); } /* FIX_PAYROLL_ROLE_SALARY_2026_09_03 — the Commission identity pill (item 3.2), reusing .bn-elig's existing chip shape/scope exactly (same #page-people ancestor, same modifier-class pattern as its four eligibility-mode siblings above). Teal is deliberately a FIFTH, unused hue — not gold (already .indiv) and not green (already .company/.bn-payout) — since a Commission pill and an eligibility pill are different concerns that can legitimately render in the same view. */ #page-people .bn-elig.commission { color: #4FB8C4; background: rgba(79,184,196,0.13); border: 1px solid rgba(79,184,196,0.27); } #page-people .bn-trig { display: inline-flex; align-items: center; gap: 7px; flex-wrap: wrap; } #page-people .bn-trig .bn-metric { font-family: 'Montserrat', sans-serif; font-size: 12.5px; font-weight: 600; color: #F0EBE2; } #page-people .bn-trig .bn-op { color: var(--dim); font-size: 12px; } #page-people .bn-trig .bn-thr { font-family: 'Montserrat', sans-serif; font-size: 12.5px; font-weight: 700; color: #C9A84C; } #page-people .bn-payout { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 14px; color: #4CAF7D; white-space: nowrap; font-variant-numeric: tabular-nums; } #page-people .bn-payout .bn-cur { font-size: 11px; color: var(--dim); font-weight: 600; vertical-align: 2px; } #page-people .bn-payout.formula .bn-fx { color: #C9A84C; } #page-people .bn-mode-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; } @media (max-width: 620px) { #page-people .bn-mode-grid { grid-template-columns: 1fr; } } #page-people .bn-mode-card { text-align: left; background: #1C1A17; border: 1.5px solid rgba(255,255,255,0.10); border-radius: 10px; padding: 13px 14px; cursor: pointer; color: #C4BFB6; transition: border-color .15s, background .15s; display: flex; flex-direction: column; gap: 5px; } #page-people .bn-mode-card.active { border-color: #C9A84C; background: linear-gradient(180deg, rgba(201,168,76,0.10), rgba(201,168,76,0.02)); box-shadow: 0 0 0 1px #C9A84C inset; } #page-people .bn-mode-card .bn-mc-name { font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 700; color: #F0EBE2; } #page-people .bn-mode-card .bn-mc-desc { font-size: 11.5px; color: var(--dim); line-height: 1.45; } #page-people .bn-row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; } @media (max-width: 660px) { #page-people .bn-row3 { grid-template-columns: 1fr; } } #page-people .bn-preview-formula { font-family: 'Montserrat', sans-serif; font-size: 13px; color: #C4BFB6; background: rgba(201,168,76,0.05); border: 1px solid rgba(201,168,76,0.14); border-radius: 7px; padding: 10px 13px; margin: 10px 0 4px; line-height: 1.6; } #page-people .bn-paid-note { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; font-size: 12px; color: var(--dim); background: rgba(76,175,125,0.05); border: 1px solid rgba(76,175,125,0.18); border-radius: 7px; padding: 10px 13px; } /* ════════════════════════════════════════════════════════════════════════════ FIX_PEOPLE_P7B_BONUSDOSSIER_2026_07_03 (v1.25) — P7b: staff-dossier Bonuses tab (sample Piece 2, L826-910 CSS). Scoped under #page-people (P7a's Piece-1 convention) with hardcoded hex matching the shipped Piece-1 palette (dim #8A857D, bright #F0EBE2, text #C4BFB6, gold #C9A84C, green #4CAF7D, amber #E8943A) — the sample's CSS-var names (--input-bg/--line/--green-soft/--amber-soft) are NOT defined in index.html, so the sample values are inlined. Class names kept from the sample for fidelity; the sample's bare .badge/.bdot/.hint/.tbl-wrap are re-namespaced to bn-badge/bn-bdot/ bn-hist-hint and .sd-bonuses-pane .tbl-wrap to avoid any global-scope collision. ════════════════════════════════════════════════════════════════════════════ */ /* gated framing strip (sample .access-note L69-73) */ #page-people .sd-bonuses-pane .access-note { display: flex; gap: 13px; align-items: center; background: linear-gradient(180deg, rgba(201,168,76,0.08), rgba(201,168,76,0.015)); border: 1px solid rgba(201,168,76,0.28); border-radius: 12px; padding: 13px 18px; margin-bottom: 20px; } #page-people .sd-bonuses-pane .access-note .an-ico { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 9px; background: rgba(201,168,76,0.14); color: #C9A84C; display: flex; align-items: center; justify-content: center; } #page-people .sd-bonuses-pane .access-note .an-text { flex: 1; min-width: 200px; } #page-people .sd-bonuses-pane .access-note .an-text b { color: #F0EBE2; font-family: 'Montserrat', sans-serif; font-weight: 600; } #page-people .sd-bonuses-pane .access-note .an-text span { font-size: 12px; color: var(--dim); display: block; margin-top: 1px; } /* stat hero (sample .bn-hero/.bn-stat L269-275) */ #page-people .sd-bonuses-pane .bn-hero { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; } #page-people .sd-bonuses-pane .bn-stat { flex: 1; min-width: 150px; background: #1C1A17; border: 1px solid rgba(255,255,255,0.10); border-radius: 10px; padding: 15px 17px; } #page-people .sd-bonuses-pane .bn-stat .k { font-size: 10px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--dim); font-family: 'Montserrat', sans-serif; } #page-people .sd-bonuses-pane .bn-stat .v { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 24px; color: #F0EBE2; margin-top: 5px; line-height: 1; } #page-people .sd-bonuses-pane .bn-stat .v.pending { color: #E8943A; } #page-people .sd-bonuses-pane .bn-stat .v.approved { color: #4CAF7D; } #page-people .sd-bonuses-pane .bn-stat .sub { font-size: 11px; color: var(--dim); margin-top: 5px; } /* lifecycle stepper (sample .life/.life-step/.life-link L277-287) */ #page-people .sd-bonuses-pane .life { display: flex; align-items: center; gap: 0; background: #1C1A17; border: 1px solid rgba(255,255,255,0.10); border-radius: 10px; padding: 14px 16px; margin-bottom: 20px; overflow-x: auto; } #page-people .sd-bonuses-pane .life-step { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 88px; text-align: center; } #page-people .sd-bonuses-pane .life-step .ls-dot { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1.5px solid rgba(255,255,255,0.10); color: var(--dim); } #page-people .sd-bonuses-pane .life-step .ls-lab { font-family: 'Montserrat', sans-serif; font-size: 10.5px; font-weight: 700; letter-spacing: .2px; color: var(--dim); text-transform: uppercase; } #page-people .sd-bonuses-pane .life-step.done .ls-dot { border-color: #4CAF7D; color: #4CAF7D; background: rgba(76,175,125,0.14); } #page-people .sd-bonuses-pane .life-step.done .ls-lab { color: #4CAF7D; } #page-people .sd-bonuses-pane .life-step.now .ls-dot { border-color: #E8943A; color: #E8943A; background: rgba(232,148,58,0.14); box-shadow: 0 0 0 4px rgba(232,148,58,0.10); } #page-people .sd-bonuses-pane .life-step.now .ls-lab { color: #E8943A; } #page-people .sd-bonuses-pane .life-link { flex: 1; min-width: 20px; height: 2px; background: rgba(255,255,255,0.10); margin: 0 2px; position: relative; top: -9px; } #page-people .sd-bonuses-pane .life-link.done { background: #4CAF7D; } /* section label (sample inline uppercase heads L852/875/898) */ #page-people .sd-bonuses-pane .bn-sectlab { font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; margin: 20px 0 10px; } #page-people .sd-bonuses-pane .bn-sectlab.dim { color: var(--dim); } /* per-bonus item card (sample .bn-item L289-297) */ #page-people .sd-bonuses-pane .bn-item { border: 1px solid rgba(255,255,255,0.10); border-radius: 10px; margin-bottom: 14px; overflow: hidden; } #page-people .sd-bonuses-pane .bn-item.bn-item-pending { border-color: rgba(232,148,58,0.30); } #page-people .sd-bonuses-pane .bn-item-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: rgba(255,255,255,0.014); } #page-people .sd-bonuses-pane .bn-item-head.bn-head-pending { background: rgba(232,148,58,0.05); } #page-people .sd-bonuses-pane .bn-item-head .bi-ico { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 9px; background: rgba(201,168,76,0.14); color: #C9A84C; display: flex; align-items: center; justify-content: center; } #page-people .sd-bonuses-pane .bn-item-head .bi-ico.bi-ico-green { background: rgba(76,175,125,0.14); color: #4CAF7D; } #page-people .sd-bonuses-pane .bn-item-head .bi-tt { flex: 1; min-width: 140px; } #page-people .sd-bonuses-pane .bn-item-head .bi-name { font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 700; color: #F0EBE2; } #page-people .sd-bonuses-pane .bn-item-head .bi-meta { font-size: 11.5px; color: var(--dim); margin-top: 2px; } #page-people .sd-bonuses-pane .bn-item-head .bi-meta .bi-await { color: #E8943A; } #page-people .sd-bonuses-pane .bn-item-head .bi-amt { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 17px; color: #F0EBE2; text-align: right; white-space: nowrap; } #page-people .sd-bonuses-pane .bn-item-body { padding: 0 16px 15px; } /* formula breakdown (sample .bn-formula/.fx-* L298-301) */ #page-people .sd-bonuses-pane .bn-formula { font-family: 'Montserrat', sans-serif; font-size: 12.5px; color: #C4BFB6; background: rgba(201,168,76,0.05); border: 1px solid rgba(201,168,76,0.14); border-radius: 7px; padding: 9px 12px; margin: 12px 0; line-height: 1.6; } #page-people .sd-bonuses-pane .bn-formula .fx-var { color: #C9A84C; font-weight: 700; } #page-people .sd-bonuses-pane .bn-formula .fx-op { color: var(--dim); } #page-people .sd-bonuses-pane .bn-formula .fx-eq { color: #F0EBE2; font-weight: 700; } /* per-input rows (sample .bn-line L302-306) */ #page-people .sd-bonuses-pane .bn-line { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,0.055); font-size: 12.5px; } #page-people .sd-bonuses-pane .bn-line .l { color: #C4BFB6; } #page-people .sd-bonuses-pane .bn-line .l small { color: var(--dim); } #page-people .sd-bonuses-pane .bn-line .v { font-family: 'Montserrat', sans-serif; font-weight: 600; color: #F0EBE2; } /* approve bar (sample .bn-approvebar/.ab-txt L307-309) */ #page-people .sd-bonuses-pane .bn-approvebar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: rgba(232,148,58,0.05); border: 1px solid rgba(232,148,58,0.22); border-radius: 7px; padding: 11px 14px; margin-top: 12px; } #page-people .sd-bonuses-pane .bn-approvebar .ab-txt { flex: 1; min-width: 200px; font-size: 12px; color: #C4BFB6; } #page-people .sd-bonuses-pane .bn-approvebar .ab-txt b { color: #F0EBE2; font-family: 'Montserrat', sans-serif; font-weight: 600; } #page-people .sd-bonuses-pane .btn.btn-green { background: #4CAF7D; color: #0e1712; border-color: #4CAF7D; } #page-people .sd-bonuses-pane .btn.btn-green:hover { background: #5cc08e; } /* paid-history table (sample .tbl-wrap/.bn-history-tbl L85/900-909) */ #page-people .sd-bonuses-pane .tbl-wrap { border: 1px solid rgba(255,255,255,0.10); border-radius: 10px; overflow: hidden; overflow-x: auto; } #page-people .sd-bonuses-pane .bn-history-tbl { width: 100%; border-collapse: collapse; } #page-people .sd-bonuses-pane .bn-history-tbl th { padding: 11px 14px; font-size: 10px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--dim); font-family: 'Montserrat', sans-serif; text-align: left; background: rgba(255,255,255,0.02); border-bottom: 1px solid rgba(255,255,255,0.08); } #page-people .sd-bonuses-pane .bn-history-tbl th.r, #page-people .sd-bonuses-pane .bn-history-tbl td.r { text-align: right; } #page-people .sd-bonuses-pane .bn-history-tbl td { padding: 11px 14px; font-size: 12.5px; color: #C4BFB6; border-bottom: 1px solid rgba(255,255,255,0.055); } #page-people .sd-bonuses-pane .bn-history-tbl tbody tr:last-child td { border-bottom: none; } #page-people .sd-bonuses-pane .bn-history-tbl tbody tr.inactive { opacity: .5; } #page-people .sd-bonuses-pane .bn-badge { display: inline-flex; align-items: center; gap: 5px; font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; } #page-people .sd-bonuses-pane .bn-badge.dim { color: var(--dim); background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.10); } #page-people .sd-bonuses-pane .bn-badge .bn-bdot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } #page-people .sd-bonuses-pane .bn-hist-hint { font-size: 11.5px; color: var(--dim); margin-top: 14px; font-family: 'Open Sans', sans-serif; line-height: 1.5; } /* ════════════════════════════════════════════════════════════════════════════ FIX_PEOPLE_HIRING_S1_2026_06_22 — People Manager Hiring (recruiting pipeline) display surface styles, scoped under #page-people (the ph- = "people hiring" prefix, so nothing collides with the People pa-/pi-/po-/pay- blocks above OR bleeds to other surfaces, the FIX_PEOPLEFOOTNOTE_BLEED scope-gate lesson). Built TO design_samples/people/people_hiring.html at ultra-HD fidelity (the founder sample is the spec). Literal hex values mirror the sample's :root tokens (page #16140F, surface-a #1C1A17, card #232120, gold #C9A84C, gold-soft #9c7f33, green #4CAF7D, amber #E8943A, red #E05555, blue #5B9BD5, violet #8B6FD6, text #C4BFB6, dim #8A857D, bright #F0EBE2). ASCII-only comments throughout (a non-ASCII char silently drops the rule from the CSSOM — the established L18.8 lesson, mirrored from the pa-/pi-/pay- blocks). This is a READ/RENDER surface (presentation rules only, no behaviour). FULL-WIDTH: .ph-wrap is max-width:none from the start (founder standing rule — no narrow wrapper cap; the host's own .crm-content gutter supplies the side padding, matching Pipeline/Forecast/Payroll). */ #page-people .ph-wrap { max-width: none; margin: 0 auto; font-variant-numeric: tabular-nums; } /* breadcrumb */ #page-people .ph-crumb { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--dim); margin-bottom: 16px; letter-spacing: 0.02em; } #page-people .ph-crumb .back { color: var(--dim); cursor: pointer; display: inline-flex; align-items: center; gap: 5px; } #page-people .ph-crumb .spec { color: #C9A84C; font-weight: 600; font-family: 'Montserrat', sans-serif; } #page-people .ph-crumb .sep { opacity: 0.5; } #page-people .ph-crumb .here { color: #C4BFB6; } /* header */ #page-people .ph-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 22px; flex-wrap: wrap; } #page-people .ph-head .lede h1 { font-family: 'Montserrat', sans-serif; font-size: 34px; font-weight: 800; color: #F0EBE2; letter-spacing: -0.02em; line-height: 1.05; display: flex; align-items: center; gap: 14px; } #page-people .ph-head .lede h1 .pin { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #C9A84C; background: linear-gradient(180deg, rgba(201,168,76,0.16), rgba(201,168,76,0.05)); border: 1px solid rgba(201,168,76,0.35); border-radius: 999px; padding: 5px 12px; font-family: 'Montserrat', sans-serif; } #page-people .ph-head .lede .sub { color: var(--dim); font-size: 14.5px; margin-top: 6px; max-width: 640px; } #page-people .ph-statusline { display: inline-flex; align-items: center; gap: 11px; background: #1C1A17; border: 1px solid rgba(255,255,255,0.07); border-radius: 999px; padding: 9px 16px 9px 14px; font-size: 13px; color: #C4BFB6; white-space: nowrap; box-shadow: 0 8px 32px rgba(0,0,0,0.45); } #page-people .ph-statusline .dot { width: 9px; height: 9px; border-radius: 50%; background: #4CAF7D; box-shadow: 0 0 0 4px rgba(76,175,125,0.16); } /* KPI strip — 5 tiles */ #page-people .ph-kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-bottom: 22px; } #page-people .ph-kpi { background: #232120; border: 1px solid rgba(255,255,255,0.07); border-radius: 10px; padding: 15px 16px 14px; position: relative; overflow: hidden; box-shadow: 0 8px 32px rgba(0,0,0,0.45); } #page-people .ph-kpi .k-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--dim); font-weight: 600; margin-bottom: 8px; } #page-people .ph-kpi .k-val { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 27px; color: #F0EBE2; line-height: 1; letter-spacing: -0.01em; } #page-people .ph-kpi .k-val .unit { font-size: 15px; font-weight: 700; color: var(--dim); margin-left: 2px; } #page-people .ph-kpi .k-foot { font-size: 11.5px; color: var(--dim); margin-top: 7px; display: flex; align-items: center; gap: 5px; } #page-people .ph-kpi.amber .k-val { color: #E8943A; } #page-people .ph-kpi .tag { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 7px; border-radius: 5px; } #page-people .ph-kpi .tag.over { color: #E8943A; background: rgba(232,148,58,0.14); } #page-people .ph-kpi .tag.ok { color: #4CAF7D; background: rgba(76,175,125,0.14); } #page-people .ph-kpi .tag.due { color: #5B9BD5; background: rgba(91,155,213,0.14); } #page-people .ph-kpi .tag.warn { color: #E05555; background: rgba(224,85,85,0.14); } /* section heads */ #page-people .ph-sechead { display: flex; align-items: baseline; justify-content: space-between; margin: 26px 0 14px; gap: 10px; } #page-people .ph-sechead h2 .count { font-size: 12px; font-weight: 700; color: #C9A84C; background: rgba(201,168,76,0.12); border: 1px solid rgba(201,168,76,0.3); border-radius: 999px; padding: 2px 9px; font-family: 'Montserrat', sans-serif; } #page-people .ph-sechead .hint { font-size: 11.5px; color: var(--dim); } /* buttons (ph-scoped, carried from the sample) */ #page-people .ph-btn { font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 600; border-radius: 7px; padding: 8px 14px; cursor: pointer; border: 1px solid rgba(255,255,255,0.12); background: #1C1A17; color: #C4BFB6; transition: all 0.18s cubic-bezier(0.4,0,0.2,1); white-space: nowrap; } #page-people .ph-btn.primary { background: linear-gradient(180deg, #C9A84C, #9c7f33); color: #1a160c; border-color: transparent; font-weight: 700; box-shadow: 0 4px 14px -4px rgba(201,168,76,0.28); } #page-people .ph-btn.sm { padding: 6px 11px; font-size: 11px; } /* filter / segment bar */ #page-people .ph-filtbar { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 18px; } #page-people .ph-filtgroup { display: flex; align-items: center; gap: 7px; } #page-people .ph-filtlbl { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--dim); font-weight: 700; font-family: 'Montserrat', sans-serif; } #page-people .ph-chip { font-size: 12px; color: #C4BFB6; background: #1C1A17; border: 1px solid rgba(255,255,255,0.07); border-radius: 999px; padding: 5px 12px; cursor: pointer; transition: all 0.16s cubic-bezier(0.4,0,0.2,1); } /* FIX_SPECIALIST_HONESTY_2026_07_14 — inert modifier for the Hiring filter chips that are display-only (no filter wired yet): removes the clickable pointer/hover affordance so they don't look interactive. */ #page-people .ph-chip.ph-chip-inert { cursor: default; } #page-people .ph-filtspacer { flex: 1; } /* KANBAN board (5 stages) */ #page-people .ph-board { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; align-items: start; } #page-people .ph-col { background: rgba(255,255,255,0.012); border: 1px solid rgba(255,255,255,0.07); border-radius: 10px; padding: 12px 11px 14px; min-height: 220px; } #page-people .ph-colh { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; padding: 0 2px; } #page-people .ph-colh .cn { display: flex; align-items: center; gap: 8px; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 13px; color: #F0EBE2; } #page-people .ph-colh .cmeta { font-size: 11px; color: var(--dim); text-align: right; line-height: 1.25; } #page-people .ph-cand { background: #232120; border: 1px solid rgba(255,255,255,0.07); border-left: 3px solid #5B9BD5; border-radius: 7px; padding: 11px 12px; margin-bottom: 10px; box-shadow: 0 8px 32px rgba(0,0,0,0.45); cursor: pointer; transition: border-color 0.2s cubic-bezier(0.4,0,0.2,1), transform 0.2s cubic-bezier(0.4,0,0.2,1), box-shadow 0.2s cubic-bezier(0.4,0,0.2,1); } #page-people .ph-cand .cand-top { display: flex; align-items: center; gap: 9px; margin-bottom: 6px; } #page-people .ph-cand .av { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 11px; color: #1a160c; background: linear-gradient(160deg, #C9A84C, #9c7f33); } #page-people .ph-cand .cand-name { font-size: 13px; color: #F0EBE2; font-weight: 600; line-height: 1.2; } #page-people .ph-cand .cand-role { font-size: 11px; color: var(--dim); } #page-people .ph-cand .cand-foot { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 8px; } #page-people .ph-cand .ctag { font-size: 10px; font-weight: 700; letter-spacing: 0.04em; padding: 2px 7px; border-radius: 5px; background: rgba(255,255,255,0.05); color: var(--dim); } #page-people .ph-cand .ctag.age { color: #C4BFB6; } #page-people .ph-cand .ctag.stall { color: #E8943A; background: rgba(232,148,58,0.14); } #page-people .ph-cand .ctag.src { color: #5B9BD5; background: rgba(91,155,213,0.12); } #page-people .ph-cand .cand-next { font-size: 11px; color: #C4BFB6; margin-top: 8px; display: flex; align-items: center; gap: 6px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.07); } #page-people .ph-cand.hired { border-left-color: #4CAF7D; background: linear-gradient(180deg, rgba(76,175,125,0.05), rgba(76,175,125,0.012)); } #page-people .ph-cand.hired .av { background: linear-gradient(160deg,#6fcf9a,#3a8a63); color: #0f1f17; } #page-people .ph-colempty { font-size: 12px; color: var(--dim); padding: 14px 6px; text-align: center; line-height: 1.5; } /* requisitions list */ #page-people .ph-reqlist { display: flex; flex-direction: column; gap: 11px; } #page-people .ph-req { display: grid; grid-template-columns: 1fr auto auto auto; align-items: center; gap: 16px; background: #232120; border: 1px solid rgba(255,255,255,0.07); border-radius: 10px; padding: 14px 16px; box-shadow: 0 8px 32px rgba(0,0,0,0.45); } #page-people .ph-req .r-title { font-size: 14px; color: #F0EBE2; font-weight: 600; } #page-people .ph-req .r-meta { font-size: 11.5px; color: var(--dim); margin-top: 3px; } /* FIX_ROLE_STRUCTURED_REQS_2026_08_04 — duties line, inside the ph-req grid's FIRST cell (never a fifth column; the grid stays 1fr auto auto auto). Reuses the .r-meta type tokens deliberately so the two secondary lines read as one block, with its own slightly larger top margin to separate them. Emitted only when the role carries duties. */ #page-people .ph-req .r-duties { font-size: 11.5px; color: var(--dim); margin-top: 5px; } #page-people .ph-req .r-stat { text-align: center; } #page-people .ph-req .r-stat .n { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 18px; color: #C4BFB6; line-height: 1; } #page-people .ph-req .r-stat .l { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--dim); margin-top: 4px; } #page-people .ph-req .r-state { font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; } #page-people .ph-req .r-state.open { color: #4CAF7D; background: rgba(76,175,125,0.14); } #page-people .ph-req .r-state.draft { color: var(--dim); background: rgba(255,255,255,0.05); } #page-people .ph-req .r-state.onhold { color: #E8943A; background: rgba(232,148,58,0.14); } /* funnel / time-to-hire */ #page-people .ph-lower { display: grid; grid-template-columns: 1.3fr 1fr; gap: 22px; align-items: start; margin-top: 8px; } #page-people .ph-panel { background: #232120; border: 1px solid rgba(255,255,255,0.07); border-radius: 16px; padding: 18px 18px 20px; box-shadow: 0 8px 32px rgba(0,0,0,0.45); } #page-people .ph-panelh { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 4px; } #page-people .ph-panelh .hint { font-size: 11px; color: var(--dim); } #page-people .ph-panelsub { font-size: 12px; color: var(--dim); margin-bottom: 16px; line-height: 1.5; } #page-people .ph-fbar { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; } #page-people .ph-fbar .fb-l { width: 120px; font-size: 12px; color: #C4BFB6; display: flex; align-items: center; gap: 7px; flex-shrink: 0; } #page-people .ph-fbar .fb-track { flex: 1; height: 12px; border-radius: 999px; background: rgba(255,255,255,0.05); overflow: hidden; } #page-people .ph-fbar .fb-v { width: 56px; text-align: right; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 13px; color: #C4BFB6; flex-shrink: 0; } #page-people .ph-tthbig { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 38px; color: #C9A84C; line-height: 1; letter-spacing: -0.01em; } #page-people .ph-tthrow { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; } #page-people .ph-tthrow .tgt { font-size: 12.5px; color: var(--dim); } #page-people .ph-tthlist { display: flex; flex-direction: column; gap: 9px; } #page-people .ph-tthitem { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; padding: 7px 0; border-top: 1px solid rgba(255,255,255,0.07); } #page-people .ph-tthitem:first-child { border-top: none; } #page-people .ph-tthitem .lab { color: #C4BFB6; } #page-people .ph-tthitem .v { font-family: 'Montserrat', sans-serif; font-weight: 700; color: #F0EBE2; } /* honest-empty (when no roles/candidates) */ #page-people .ph-empty { text-align: center; padding: 54px 28px; background: #232120; border: 1px solid rgba(255,255,255,0.07); border-radius: 16px; box-shadow: 0 8px 32px rgba(0,0,0,0.45); } @media (max-width: 1080px) { #page-people .ph-kpis { grid-template-columns: repeat(3, 1fr); } #page-people .ph-board { grid-template-columns: repeat(2, 1fr); } #page-people .ph-lower { grid-template-columns: 1fr; } #page-people .ph-req { grid-template-columns: 1fr auto; } } @media (max-width: 640px) { #page-people .ph-kpis { grid-template-columns: repeat(2, 1fr); } #page-people .ph-board { grid-template-columns: 1fr; } } /* == FIX_HIRING_PIPELINE_FIXES_2026_07_05 -- Issue 2 back-move button + Issue 3 detail card ========= */ #page-people .ph-cand .cand-move { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; } #page-people .ph-cand-move { font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 600; color: #C9A84C; background: rgba(201,168,76,0.1); border: 1px solid rgba(201,168,76,0.28); border-radius: 6px; padding: 5px 9px; cursor: pointer; transition: all 0.16s cubic-bezier(0.4,0,0.2,1); } #page-people .ph-cand-move.back { color: var(--dim); background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.1); font-weight: 500; } /* Issue 3 detail card (standalone in-surface, breadcrumb-back). */ #page-people .ph-detail { background: #232120; border: 1px solid rgba(255,255,255,0.07); border-radius: 16px; padding: 24px 26px; box-shadow: 0 8px 32px rgba(0,0,0,0.45); max-width: 760px; } #page-people .ph-det-head { display: flex; align-items: center; gap: 15px; margin-bottom: 22px; padding-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,0.07); } #page-people .ph-det-head .av { width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 16px; color: #1a160c; background: linear-gradient(160deg, #C9A84C, #9c7f33); } #page-people .ph-det-name { font-family: 'Montserrat', sans-serif; font-size: 22px; font-weight: 800; color: #F0EBE2; letter-spacing: -0.01em; line-height: 1.1; } #page-people .ph-det-sub { font-size: 13px; color: var(--dim); margin-top: 4px; } #page-people .ph-det-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 30px; } #page-people .ph-det-row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.06); font-size: 13.5px; } #page-people .ph-det-row .l { color: var(--dim); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; } #page-people .ph-det-row .v { color: #F0EBE2; font-weight: 600; text-align: right; word-break: break-word; } #page-people .ph-det-foot { font-size: 12px; color: var(--dim); margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.07); line-height: 1.5; } @media (max-width: 640px) { #page-people .ph-det-grid { grid-template-columns: 1fr; } } #page-people .ph-kpi.ph-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_ORPHAN_CSS_FAMILIES_2026_07_29 -- People-Hub form-field wrapper and its label. ASCII-only comment (a non-ASCII char silently drops the following rule from the CSSOM). Both had zero rules while __renderPostRoleForm and __renderAddCandidateForm emit the wrapper at 12 sites, so every field label rendered as bare inherited body type. PROVENANCE: NEAREST-SIBLING, NOT SAMPLE-ATTESTED -- neither People sample covers a form at all (people/hiring.html mentions posting a role only as empty-state prose, with no label or field CSS). Adapted from legal/waivers.html L210 (.fld-lbl), var(--mut) resolved to this block's #8A857D and the Sora face plus letter-spacing dropped; corroborated in-file by #page-people .rpr-label, which matches on block/11px/600/#8A857D/7px but ALSO carries Montserrat, letter-spacing .5px and uppercase -- none copied: these are field prompts. Anchored #page-people because ph- is OVERLOADED: the page-header family is a .pghead descendant, this People-Hub family is page-scoped, and an unanchored rule would collide across both. DELIBERATELY NO margin-top: 10 of 12 sites carry it inline (nine 14px, one 16px) and 2 do not, so a class margin-top would reach only those 2 and turn uniform spacing into uneven spacing. The add-candidate dropzone label keeps its inline 6px; fixing that means editing emission markup. */ #page-people .ph-formfield { display: block; } #page-people .ph-formfield > label { display: block; font-size: 11px; font-weight: 600; color: var(--dim); margin: 0 0 7px; } /* ════════════════════════════════════════════════════════════════════════════ FIX_PEOPLE_TRAINING_S1_2026_06_22 (v1.25) — People Manager Training & Compliance Readiness surface styles, scoped under #page-people (the trc- = "training compliance" prefix, so nothing collides with the People pay-/pa-/pi-/po- blocks above OR bleeds to other surfaces; the tr- prefix is already taken by the roster ultra-HD grid, so trc- is used). Built TO design_samples/people/people_training.html at ultra-HD fidelity (the founder sample is the spec). Literal hex values mirror the sample's :root tokens (page #16140F, surface-a #1C1A17, card #232120, gold #C9A84C, green #4CAF7D, amber #E8943A, red #E05555, blue #5B9BD5, text #C4BFB6, dim #8A857D, bright #F0EBE2). ASCII-only comments throughout (a non-ASCII char silently drops the rule from the CSSOM — the established lesson, mirrored from the pay-/pa-/pi- blocks). FULL-WIDTH per founder standing rule (no max-width cap on the wrapper; the host's own padding supplies the gutter). This is a READ/RENDER surface (presentation only). */ /* wrapper FULL-WIDTH (mirror of pay-wrap/pa-wrap/pi-wrap) + breadcrumb + header (sample .breadcrumb / .pagehead) */ #page-people .trc-wrap { max-width: none; margin: 0 auto; } #page-people .trc-breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--dim); margin-bottom: 16px; letter-spacing: 0.02em; } #page-people .trc-breadcrumb .spec { color: #C9A84C; font-weight: 600; font-family: 'Montserrat', sans-serif; } #page-people .trc-breadcrumb .sep { opacity: 0.5; } #page-people .trc-breadcrumb .back { color: #C4BFB6; text-decoration: none; cursor: pointer; } #page-people .trc-pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 22px; flex-wrap: wrap; } #page-people .trc-pagehead .lede h1 { font-family: 'Montserrat', sans-serif; font-size: 34px; font-weight: 800; color: #F0EBE2; letter-spacing: -0.02em; line-height: 1.05; display: flex; align-items: center; gap: 14px; } #page-people .trc-pagehead .lede h1 .pin { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #C9A84C; background: linear-gradient(180deg, rgba(201,168,76,0.16), rgba(201,168,76,0.05)); border: 1px solid rgba(201,168,76,0.35); border-radius: 999px; padding: 5px 12px; } #page-people .trc-pagehead .lede .sub { color: var(--dim); font-size: 14.5px; margin-top: 6px; max-width: 640px; } #page-people .trc-statusline { display: inline-flex; align-items: center; gap: 11px; background: #1C1A17; border: 1px solid rgba(255,255,255,0.07); border-radius: 999px; padding: 9px 16px 9px 14px; font-size: 13px; color: #C4BFB6; white-space: nowrap; box-shadow: 0 8px 32px rgba(0,0,0,0.45); } #page-people .trc-statusline .dot { width: 9px; height: 9px; border-radius: 50%; background: #4CAF7D; box-shadow: 0 0 0 4px rgba(76,175,125,0.16); } #page-people .trc-statusline .over { color: #E8943A; font-weight: 700; } #page-people .trc-statusline .crit { color: #E05555; font-weight: 700; } /* KPI strip (sample .kpi-strip / .kpi) */ #page-people .trc-kpi-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-bottom: 22px; } #page-people .trc-kpi { background: #232120; border: 1px solid rgba(255,255,255,0.07); border-radius: 10px; padding: 15px 16px 14px; position: relative; overflow: hidden; box-shadow: 0 8px 32px rgba(0,0,0,0.45); } #page-people .trc-kpi .k-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--dim); font-weight: 600; margin-bottom: 8px; } #page-people .trc-kpi .k-val { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 27px; color: #F0EBE2; line-height: 1; letter-spacing: -0.01em; } #page-people .trc-kpi .k-val .unit { font-size: 15px; font-weight: 700; color: var(--dim); margin-left: 2px; } #page-people .trc-kpi .k-val.muted { color: var(--dim); } #page-people .trc-kpi .k-foot { font-size: 11.5px; color: var(--dim); margin-top: 7px; display: flex; align-items: center; gap: 5px; } #page-people .trc-kpi.amber .k-val { color: #E8943A; } #page-people .trc-kpi.green .k-val { color: #4CAF7D; } #page-people .trc-kpi.red .k-val { color: #E05555; } #page-people .trc-kpi.blue .k-val { color: #5B9BD5; } #page-people .trc-tag { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 7px; border-radius: 5px; } #page-people .trc-tag.unmeasured { color: var(--dim); background: rgba(255,255,255,0.05); } /* section heads (sample .sec-head) + generic card */ #page-people .trc-sec-head { display: flex; align-items: baseline; justify-content: space-between; margin: 30px 0 14px; gap: 10px; } #page-people .trc-sec-head h2 .count { font-size: 12px; font-weight: 700; color: #C9A84C; background: rgba(201,168,76,0.12); border: 1px solid rgba(201,168,76,0.3); border-radius: 999px; padding: 2px 9px; font-family: 'Montserrat', sans-serif; } #page-people .trc-sec-head .hint { font-size: 11.5px; color: var(--dim); } #page-people .trc-card { background: #232120; border: 1px solid rgba(255,255,255,0.07); border-radius: 16px; padding: 18px 18px 20px; box-shadow: 0 8px 32px rgba(0,0,0,0.45); } /* cert matrix (staff x required cert) — sample .cmatrix / .pipc */ #page-people .trc-matrix-wrap { overflow-x: auto; } #page-people .trc-cmatrix { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 720px; } #page-people .trc-cmatrix thead th { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--dim); font-weight: 700; padding: 0 8px 13px; text-align: center; white-space: nowrap; font-family: 'Open Sans', sans-serif; } #page-people .trc-cmatrix thead th.staff-h { text-align: left; padding-left: 4px; } #page-people .trc-cmatrix tbody td { padding: 9px 8px; border-bottom: 1px solid rgba(255,255,255,0.07); text-align: center; } #page-people .trc-cmatrix tbody tr:last-child td { border-bottom: none; } #page-people .trc-cmatrix tbody tr:hover td { background: rgba(255,255,255,0.018); } #page-people .trc-cmatrix .staff-cell { text-align: left; padding-left: 4px; } #page-people .trc-staff-id { display: flex; align-items: center; gap: 10px; } #page-people .trc-staff-id .mono { width: 30px; height: 30px; border-radius: 50%; flex: none; display: grid; place-items: center; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 11px; background: rgba(255,255,255,0.04); color: #F0EBE2; border: 1px solid rgba(255,255,255,0.07); } #page-people .trc-staff-id .sname { font-size: 13.5px; color: #F0EBE2; font-weight: 600; line-height: 1.2; } #page-people .trc-staff-id .srole { font-size: 11px; color: var(--dim); } #page-people .trc-pipc { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 10.5px; letter-spacing: 0.02em; border: 1px solid rgba(255,255,255,0.07); } #page-people .trc-pipc.held { background: rgba(76,175,125,0.13); color: #4CAF7D; border-color: rgba(76,175,125,0.32); } #page-people .trc-pipc.soon { background: rgba(232,148,58,0.13); color: #E8943A; border-color: rgba(232,148,58,0.35); } #page-people .trc-pipc.expired { background: rgba(224,85,85,0.14); color: #E05555; border-color: rgba(224,85,85,0.4); } #page-people .trc-pipc.missing { background: rgba(255,255,255,0.03); color: var(--dim); border-style: dashed; } #page-people .trc-pipc.na { color: rgba(138,133,125,0.4); border: none; background: transparent; } #page-people .trc-matrix-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 14px; font-size: 11.5px; color: var(--dim); } #page-people .trc-matrix-legend .lg { display: inline-flex; align-items: center; gap: 7px; } #page-people .trc-matrix-legend .sw { width: 14px; height: 14px; border-radius: 4px; border: 1px solid rgba(255,255,255,0.07); flex: none; } #page-people .trc-matrix-legend .sw.held { background: rgba(76,175,125,0.25); border-color: rgba(76,175,125,0.5); } #page-people .trc-matrix-legend .sw.soon { background: rgba(232,148,58,0.25); border-color: rgba(232,148,58,0.5); } #page-people .trc-matrix-legend .sw.expired { background: rgba(224,85,85,0.28); border-color: rgba(224,85,85,0.55); } #page-people .trc-matrix-legend .sw.missing { background: rgba(255,255,255,0.03); border-style: dashed; } /* expiring-soon watch list (reuses dossier .cert vocabulary) — sample .watch-list / .cert */ #page-people .trc-watch-list { display: flex; flex-direction: column; gap: 10px; } #page-people .trc-cert { display: flex; align-items: center; gap: 13px; padding: 13px 15px; background: #1C1A17; border: 1px solid rgba(255,255,255,0.07); border-radius: 10px; } #page-people .trc-cert.expired { border-color: rgba(224,85,85,0.3); } #page-people .trc-cert .badge { width: 38px; height: 38px; flex: none; border-radius: 9px; display: grid; place-items: center; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 11px; } #page-people .trc-cert .badge.soon { background: rgba(232,148,58,0.12); color: #E8943A; border: 1px solid rgba(232,148,58,0.35); } #page-people .trc-cert .badge.expired { background: rgba(224,85,85,0.12); color: #E05555; border: 1px solid rgba(224,85,85,0.4); } #page-people .trc-cert .cmain { flex: 1; min-width: 0; } #page-people .trc-cert .cname { font-size: 14px; font-weight: 600; color: #F0EBE2; } #page-people .trc-cert .cmeta { font-size: 12px; color: var(--dim); margin-top: 2px; } #page-people .trc-cert .cmeta strong.amber { color: #E8943A; } #page-people .trc-cert .cmeta strong.red { color: #E05555; } #page-people .trc-cert .ctag { font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px; white-space: nowrap; } #page-people .trc-cert .ctag.soon { background: rgba(232,148,58,0.14); color: #E8943A; } #page-people .trc-cert .ctag.expired { background: rgba(224,85,85,0.14); color: #E05555; } #page-people .trc-cert .btn-renew { font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 600; border-radius: 7px; padding: 8px 13px; cursor: default; white-space: nowrap; border: 1px solid rgba(255,255,255,0.12); background: #232120; color: #C4BFB6; } /* required-by-role reference (sample .role-grid / .role-card / .req-chip) */ #page-people .trc-role-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } #page-people .trc-role-card { background: #1C1A17; border: 1px solid rgba(255,255,255,0.07); border-radius: 10px; padding: 15px 16px; } #page-people .trc-role-card .rc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 11px; gap: 10px; } #page-people .trc-role-card .rc-role { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 14px; color: #F0EBE2; display: inline-flex; align-items: center; gap: 9px; } #page-people .trc-role-card .rc-readiness { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; } #page-people .trc-role-card .rc-readiness.full { color: #4CAF7D; background: rgba(76,175,125,0.12); } #page-people .trc-role-card .rc-readiness.gap { color: #E8943A; background: rgba(232,148,58,0.14); } #page-people .trc-role-card .rc-readiness.crit { color: #E05555; background: rgba(224,85,85,0.14); } #page-people .trc-req-chip-row { display: flex; flex-wrap: wrap; gap: 8px; } #page-people .trc-req-chip { display: inline-flex; align-items: center; gap: 7px; border-radius: 999px; padding: 5px 11px; font-size: 12px; font-weight: 600; border: 1px solid rgba(255,255,255,0.07); background: rgba(255,255,255,0.025); color: #C4BFB6; } #page-people .trc-req-chip .cpip { width: 7px; height: 7px; border-radius: 50%; flex: none; } #page-people .trc-req-chip .cpip.held { background: #4CAF7D; } #page-people .trc-req-chip .cpip.soon { background: #E8943A; } #page-people .trc-req-chip .cpip.gap { background: #E05555; } /* coverage-gap finding row (absence-visible) — sample .gap-row + the all-clear green honest row (never an absent section) */ #page-people .trc-gap-row { display: flex; align-items: center; gap: 13px; padding: 12px 15px; margin-bottom: 10px; background: rgba(224,85,85,0.05); border: 1px solid rgba(224,85,85,0.22); border-radius: 10px; } #page-people .trc-gap-row .gr-ic { width: 34px; height: 34px; flex: none; border-radius: 8px; display: grid; place-items: center; color: #E05555; background: rgba(224,85,85,0.1); } /* FIX_TRC_GAPCLEAR_GRMAIN_2026_08_18 — host scope was one selector too narrow. THREE of the four emission sites for the gr-main wrapper sit inside the .trc-gap-clear card (the "nothing expiring", "all required certifications accounted for" and "no required-set yet" rows); only the fourth, the red finding row, sits inside .trc-gap-row and was reached. .trc-gap-clear is itself a flex container whose other child is fixed-width, so without flex:1 and min-width:0 the text block does not grow to fill the row and min-width:auto stops it shrinking below its content — long certification or staff names can overflow rather than wrap. Sibling left behind: the row rule got the wrapper declaration, the clear rule never did. */ #page-people .trc-gap-row .gr-main, #page-people .trc-gap-clear .gr-main { flex: 1; min-width: 0; } #page-people .trc-gap-row .gr-h { font-size: 13.5px; color: #F0EBE2; font-weight: 600; } #page-people .trc-gap-row .gr-sub { font-size: 12px; color: var(--dim); margin-top: 1px; } #page-people .trc-gap-row .gr-tag { font-size: 10.5px; font-weight: 700; color: #E05555; background: rgba(224,85,85,0.14); padding: 3px 9px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; } #page-people .trc-gap-clear { display: flex; align-items: center; gap: 13px; padding: 12px 15px; background: rgba(76,175,125,0.05); border: 1px solid rgba(76,175,125,0.22); border-radius: 10px; } #page-people .trc-gap-clear .gc-ic { width: 34px; height: 34px; flex: none; border-radius: 8px; display: grid; place-items: center; color: #4CAF7D; background: rgba(76,175,125,0.1); } #page-people .trc-gap-clear .gc-h { font-size: 13.5px; color: #F0EBE2; font-weight: 600; } #page-people .trc-gap-clear .gc-sub { font-size: 12px; color: var(--dim); margin-top: 1px; } /* industry-adaptive note (sample .note-box) */ #page-people .trc-note-box { background: rgba(91,155,213,0.06); border: 1px solid rgba(91,155,213,0.22); border-radius: 10px; padding: 14px 16px; font-size: 13px; color: #C4BFB6; line-height: 1.6; margin-top: 18px; } #page-people .trc-note-box .nh { color: #5B9BD5; font-weight: 700; font-family: 'Montserrat', sans-serif; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; display: flex; align-items: center; gap: 7px; } #page-people .trc-note-box em { color: #F0EBE2; font-style: normal; font-weight: 600; } /* honest-empty / absence-visible (sample .empty-state) + shared icons */ #page-people .trc-empty-state { text-align: center; padding: 40px 28px; border: 1px dashed rgba(255,255,255,0.12); border-radius: 16px; background: rgba(255,255,255,0.012); } #page-people .trc-empty-state .es-ic { width: 54px; height: 54px; border-radius: 50%; margin: 0 auto 16px; display: grid; place-items: center; color: var(--dim); background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); } #page-people .trc-empty-state .es-h { font-family: 'Montserrat', sans-serif; font-size: 16px; font-weight: 700; color: #F0EBE2; } #page-people .trc-empty-state .es-sub { font-size: 13px; color: var(--dim); margin: 8px auto 0; max-width: 52ch; line-height: 1.6; } #page-people .trc-empty-state .es-sub em { color: #C4BFB6; font-style: normal; font-weight: 600; } #page-people .trc-ico { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; } #page-people .trc-ico-lg { width: 26px; height: 26px; stroke: currentColor; stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; } @media (max-width: 1080px) { #page-people .trc-kpi-strip { grid-template-columns: repeat(3, 1fr); } #page-people .trc-role-grid { grid-template-columns: 1fr; } } @media (max-width: 640px) { #page-people .trc-kpi-strip { grid-template-columns: repeat(2, 1fr); } } /* ════════════════════════════════════════════════════════════════════════════ FIX_PEOPLE_TIMEOFF_S1_2026_06_22 (v1.25) — People Manager Time Off (coverage-against- schedule leave lens) styles, scoped under #page-people (the to- = "time off" prefix). Authored TO design_samples/people/people_time_off.html at ultra-HD fidelity (class set + tokens carried verbatim from the sample). FULL-WIDTH BY CONSTRUCTION (feedback_specialist_surfaces_full_width): .to-wrap carries max-width:none — the shared .crm-content vdd-page-railed host supplies the gutter (matches Pipeline/Payroll/Training, ~1394px); grids use repeat(N,1fr) / minmax(0,1fr). NO narrow cap even though the sample is drawn at 1320px. Tokens reuse the People region's --gold/--green/--amber/--blue (the sample's :root vars resolve to the same hexes already used across the People CSS). ── */ #page-people .to-wrap { max-width: none; margin: 0 auto; } #page-people .to-breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--dim); margin-bottom: 16px; letter-spacing: 0.02em; } #page-people .to-breadcrumb .spec { color: #C9A84C; font-weight: 600; font-family: 'Montserrat', sans-serif; } #page-people .to-breadcrumb .sep { opacity: 0.5; } #page-people .to-breadcrumb .back { color: #C4BFB6; text-decoration: none; cursor: pointer; } /* page header + status line + feeds + month selector (sample .page-head / .status-line / .feeds / .mon-sel) */ #page-people .to-pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 18px; flex-wrap: wrap; } #page-people .to-pagehead h1 .accent { color: #C9A84C; } #page-people .to-statusline { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 13px; color: var(--dim); } #page-people .to-statusline .si { display: inline-flex; align-items: center; gap: 7px; } #page-people .to-statusline .si.pending b { color: #E8943A; } #page-people .to-statusline .si.pending .ic { width: 7px; height: 7px; border-radius: 50%; background: #E8943A; box-shadow: 0 0 8px rgba(232,148,58,0.7); } #page-people .to-statusline .si.out b { color: #5B9BD5; } #page-people .to-statusline .si.out .ic { width: 7px; height: 7px; border-radius: 50%; background: #5B9BD5; box-shadow: 0 0 8px rgba(91,155,213,0.6); } #page-people .to-statusline .si.gap b { color: #E05555; } #page-people .to-statusline .si.gap .ic { width: 7px; height: 7px; border-radius: 50%; background: #E05555; box-shadow: 0 0 8px rgba(224,85,85,0.7); } #page-people .to-statusline .vsep { width: 1px; height: 13px; background: rgba(255,255,255,0.12); } #page-people .to-feeds { font-size: 11px; color: var(--dim); margin-top: 6px; } #page-people .to-monsel { display: inline-flex; align-items: stretch; background: #232120; border: 1px solid rgba(255,255,255,0.12); border-radius: 10px; box-shadow: 0 6px 18px rgba(0,0,0,0.32); overflow: hidden; } #page-people .to-monsel button { background: none; border: none; color: var(--dim); cursor: default; padding: 0 14px; font-size: 18px; line-height: 1; display: flex; align-items: center; } #page-people .to-monsel .ms-mid { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 8px 18px; border-left: 1px solid rgba(255,255,255,0.07); border-right: 1px solid rgba(255,255,255,0.07); min-width: 148px; } #page-people .to-monsel .ms-tag { font-family: 'Montserrat', sans-serif; font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: #C9A84C; } #page-people .to-monsel .ms-range { font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 700; color: #F0EBE2; } /* two-col layout: hero + right rail (full-width hero via minmax(0,1fr); fixed 300px rail) */ #page-people .to-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; } @media (max-width: 1120px) { #page-people .to-layout { grid-template-columns: 1fr; } } /* panel chrome (sample .panel) */ #page-people .to-panel { background: #232120; border: 1px solid rgba(255,255,255,0.07); border-radius: 16px; box-shadow: 0 18px 50px rgba(0,0,0,0.45); overflow: hidden; position: relative; margin-bottom: 18px; } #page-people .to-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 15px 20px; border-bottom: 1px solid rgba(255,255,255,0.07); background: linear-gradient(180deg, #26231F 0%, #232120 100%); } #page-people .to-panel-title { font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #F0EBE2; display: flex; align-items: center; gap: 10px; } #page-people .to-panel-title .hd { width: 7px; height: 7px; border-radius: 50%; background: #C9A84C; box-shadow: 0 0 9px rgba(201,168,76,0.35); } #page-people .to-panel-sub { font-size: 11px; color: var(--dim); } #page-people .to-legend { display: flex; align-items: center; gap: 14px; font-size: 11px; color: var(--dim); flex-wrap: wrap; } #page-people .to-legend .lg { display: inline-flex; align-items: center; gap: 6px; } #page-people .to-legend .sw { width: 11px; height: 11px; border-radius: 3px; } /* FIX_FINANCIAL_ENGINES_REAL_2026_07_21 — New leave-request affordance + inline create form. */ #page-people .to-newreq-btn { font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.03em; color: #1a160c; background: #C9A84C; border: none; border-radius: 7px; padding: 7px 13px; cursor: pointer; transition: filter 0.15s; } #page-people .to-newreq { padding: 16px 20px; border-bottom: 1px solid rgba(255,255,255,0.07); background: rgba(255,255,255,0.02); } #page-people .to-nr-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; } #page-people .to-nr-f { display: flex; flex-direction: column; gap: 5px; font-size: 11px; color: var(--dim); } #page-people .to-nr-f.to-nr-wide { grid-column: 1 / -1; } #page-people .to-nr-f select, #page-people .to-nr-f input { background: #1c1a18; border: 1px solid rgba(255,255,255,0.12); border-radius: 7px; color: #F0EBE2; font-size: 13px; padding: 8px 10px; font-family: 'Open Sans', sans-serif; } #page-people .to-nr-f select:focus, #page-people .to-nr-f input:focus { outline: none; border-color: rgba(201,168,76,0.55); } #page-people .to-nr-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; } #page-people .to-nr-cancel { font-size: 12px; font-weight: 600; color: #C7C1B6; background: transparent; border: 1px solid rgba(255,255,255,0.14); border-radius: 7px; padding: 8px 16px; cursor: pointer; } #page-people .to-nr-submit { font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 700; color: #1a160c; background: #4CAF7D; border: none; border-radius: 7px; padding: 8px 18px; cursor: pointer; } /* FIX_LEAVE_WORKING_DAYS_2026_08_27 - extra date rows on the new-request form. ID-scoped into the SAME #page-people .to-nr-* family on purpose: an unscoped class rule is (0,1,0) and would lose to every shipped (1,1,0) rule around it, rendering the new controls unstyled. */ #page-people #to-nr-spans { display: flex; flex-direction: column; gap: 10px; } #page-people .to-nr-span { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) auto; gap: 12px; align-items: end; } #page-people .to-nr-addspan { align-self: flex-start; font-size: 12px; font-weight: 600; color: #C9A84C; background: transparent; border: 1px dashed rgba(201,168,76,0.45); border-radius: 7px; padding: 7px 14px; cursor: pointer; } #page-people .to-nr-rmspan { font-size: 11px; font-weight: 600; color: #C7C1B6; background: transparent; border: 1px solid rgba(255,255,255,0.14); border-radius: 7px; padding: 8px 12px; cursor: pointer; height: 35px; } #page-people .to-nr-hint { font-size: 11px; color: var(--dim); margin-top: 6px; line-height: 1.5; } /* SECTION 1 · balances band (4 cells, repeat(4,1fr)) */ #page-people .bal-band { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; } @media (max-width: 760px) { #page-people .bal-band { grid-template-columns: 1fr 1fr; } } #page-people .bal { padding: 16px 18px 15px; border-right: 1px solid rgba(255,255,255,0.07); position: relative; } #page-people .bal .bk { font-family: 'Montserrat', sans-serif; font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); margin-left: 9px; } #page-people .bal .bv { font-family: 'Montserrat', sans-serif; font-size: 26px; font-weight: 800; color: #F0EBE2; line-height: 1; margin: 7px 0 0 9px; } #page-people .bal .bv small { font-size: 13px; font-weight: 600; color: var(--dim); } #page-people .bal .bv .coming { font-size: 12px; font-weight: 600; color: #5B9BD5; letter-spacing: 0.06em; text-transform: uppercase; } #page-people .bal .bsub { font-size: 10.5px; color: var(--dim); margin: 5px 0 0 9px; } /* SECTION 2 · requests list */ #page-people .req-list { display: flex; flex-direction: column; } #page-people .to-panel .req { display: flex; align-items: center; gap: 13px; padding: 13px 20px; border-bottom: 1px solid rgba(255,255,255,0.07); } #page-people .to-panel .av { width: 38px; height: 38px; border-radius: 11px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 13px; color: #1B1810; background: linear-gradient(145deg, #E2C56A, #A9853A); box-shadow: 0 0 0 1px rgba(0,0,0,0.25), 0 5px 12px rgba(201,168,76,0.16); } #page-people .to-panel .av.role-coach { background: linear-gradient(145deg, #7FC4A4, #3F8C66); color: #0F1A14; } #page-people .to-panel .av.role-desk { background: linear-gradient(145deg, #8BBDE6, #4178A8); color: #0C1620; } #page-people .to-panel .av.role-fac { background: linear-gradient(145deg, #C9C2B5, #8B857A); color: #1A1814; } #page-people .req-meta { flex: 1; min-width: 0; } #page-people .req-name { font-family: 'Montserrat', sans-serif; font-size: 13.5px; font-weight: 700; color: #F0EBE2; line-height: 1.15; } #page-people .req-name .rn-role { font-size: 11px; font-weight: 500; color: var(--dim); margin-left: 7px; } #page-people .req-when { font-size: 11.5px; color: #C4BFB6; margin-top: 3px; } #page-people .req-type { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--dim); margin-top: 3px; } #page-people .req-type .tdot { width: 6px; height: 6px; border-radius: 50%; } #page-people .tdot.vac { background: #4CAF7D; } #page-people .tdot.sick { background: #E8943A; } #page-people .tdot.per { background: #5B9BD5; } #page-people .tdot.unpaid { background: #8A857D; } #page-people .req-days { font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 800; color: #C4BFB6; text-align: right; min-width: 54px; } #page-people .req-days small { display: block; font-size: 9.5px; font-weight: 600; color: var(--dim); letter-spacing: 0.08em; text-transform: uppercase; margin-top: 2px; } #page-people .req-status { display: inline-flex; align-items: center; gap: 6px; font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 0.04em; padding: 4px 10px; border-radius: 999px; line-height: 1.3; white-space: nowrap; } #page-people .req-status .sdot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; } #page-people .st-pending { color: #E8943A; background: rgba(232,148,58,0.12); border: 1px solid rgba(232,148,58,0.3); } #page-people .st-approved { color: #4CAF7D; background: rgba(76,175,125,0.1); border: 1px solid rgba(76,175,125,0.28); } #page-people .st-declined { color: #E05555; background: rgba(224,85,85,0.1); border: 1px solid rgba(224,85,85,0.3); } /* FIX_TIMEOFF_APPROVAL_LIFECYCLE_2026_09_05 — a withdrawn request/leave is a distinct fourth status, never a reuse of pending/approved/declined; muted-grey signals "no longer active", matching the existing .st-closed tone used elsewhere in this file rather than inventing a new palette entry. */ #page-people .st-withdrawn { color: #8A857D; background: rgba(138,133,125,0.1); border: 1px solid rgba(138,133,125,0.28); } /* FIX_PEOPLE_TIMEOFF_P5_2026_07_03 — Backdate historical leave panel (manager-side writer). */ #page-people .to-bd-body { padding: 16px 20px; } #page-people .to-bd-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; } #page-people .to-bd-f { display: flex; flex-direction: column; gap: 5px; font-size: 11px; color: var(--dim); font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; } #page-people .to-bd-f em { text-transform: none; letter-spacing: 0; color: #6E6960; font-style: normal; } #page-people .to-bd-f select, #page-people .to-bd-f input { background: #1B1917; border: 1px solid rgba(255,255,255,0.12); border-radius: 8px; color: #F0EBE2; font-size: 13px; padding: 8px 10px; font-family: inherit; } #page-people .to-bd-f select:focus, #page-people .to-bd-f input:focus { outline: none; border-color: #C9A84C; } #page-people .to-bd-actions { display: flex; align-items: center; gap: 14px; margin-top: 14px; } #page-people .to-bd-submit { background: #C9A84C; color: #1B1917; border: none; border-radius: 8px; font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 9px 18px; cursor: pointer; } #page-people .to-bd-msg { font-size: 12px; color: var(--dim); } #page-people .to-bd-msg.ok { color: #4CAF7D; } #page-people .to-bd-msg.err { color: #E05555; } /* approval affordances — DISPLAY ONLY this round (cursor:default, no persistence) */ #page-people .req-act { display: flex; gap: 7px; } #page-people .req-act button { font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 700; border-radius: 7px; padding: 6px 12px; cursor: default; } #page-people .act-approve { color: #1B1810; background: linear-gradient(150deg, #5FC18F, #3F8C66); border: 1px solid rgba(255,255,255,0.18); } #page-people .act-decline { color: #C4BFB6; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12); } /* FIX_TIMEOFF_APPROVAL_LIFECYCLE_2026_09_05 — the Withdraw action, sibling to Approve/Decline above. Gold accent (matches .ms-tag elsewhere on this page) reads as "a deliberate management action", distinct from decline's neutral tone — a withdrawal reverses something that DID happen. */ #page-people .act-withdraw { color: #C9A84C; background: rgba(201,168,76,0.08); border: 1px solid rgba(201,168,76,0.28); } /* FIX_TIMEOFF_APPROVAL_CASCADE_2026_09_02 — the paid/unpaid election on a pending request row. ID-SCOPED to match the three siblings directly above rather than a bare .act-paid: those are (1,1,0) under #page-people, so an unscoped (0,1,0) rule would be beaten by any later ID-scoped select styling and the control would silently render unstyled. The select is a sibling of the two buttons inside the existing .req-act flex row, so no layout rule changes. */ #page-people .act-paid { font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 700; border-radius: 7px; padding: 6px 8px; color: #C4BFB6; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12); cursor: pointer; } /* FIX_LEAVE_SNAPSHOT_RECOVERY_2026_09_05 — the "Previous versions" affordance. ⛔ EVERY RULE IS ID-SCOPED UNDER #page-people, for the reason the .act-paid note directly above states in terms: the host rules here are (1,1,0), so a bare (0,1,0) class rule is beaten by any later ID-scoped styling and the control renders unstyled while grepping as present — the additive-emission-is-inert failure. The panel is a NEW block with no pre-existing ID-scoped rule of its own, so it owns its layout outright. ⛔⛔ .act-prev CARRIES ITS OWN SIZING RATHER THAN INHERITING IT, and this was CORRECTED BY RENDER MEASUREMENT, not assumed: the shared sizing on this surface comes from `#page-people .req-act button`, which reaches the two REQUEST-ROW sites (they sit inside .req-act) and does NOT reach the LEAVE-POLICY site (it sits inside .to-bd-actions). Measured on the loopback render before this line existed, the policy-card control came back with border-radius 0px, font-weight 400, font-size 13.33px and padding 0 — browser defaults — while colour, background and border did apply. The values below are the SAME values .req-act button sets, so the two hosts render identically and nothing conflicts where both rules reach (that rule is (1,1,1) and this one is (1,1,0), so inside .req-act the button rule still wins — with the same values, which is why they must be kept identical rather than merely similar). Neutral tone deliberately: viewing previous versions is a READ, not a management action, so it must not compete with Approve (green) or Withdraw (gold) for attention in the same row. */ #page-people .act-prev { font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 700; border-radius: 7px; padding: 6px 12px; cursor: default; color: #A9A29A; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.10); } /* The mount is inert and takes NO space until opened — it is emitted on every row, so a resting margin here would shift the whole list. */ #page-people .lvpv-mount { display: block; } #page-people .lvpv-mount[data-open="1"] { padding: 0 20px 14px; } #page-people .lvpv-panel { border: 1px solid rgba(255,255,255,0.10); border-radius: 10px; background: rgba(255,255,255,0.02); padding: 12px 14px; } #page-people .lvpv-head { font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #C9A84C; margin-bottom: 9px; } #page-people .lvpv-row { display: flex; align-items: center; gap: 12px; padding: 7px 0; border-top: 1px solid rgba(255,255,255,0.06); font-size: 12px; color: #C4BFB6; } #page-people .lvpv-when { min-width: 92px; font-weight: 600; color: #E4DFD6; } #page-people .lvpv-who { min-width: 120px; color: var(--dim); overflow-wrap: anywhere; } #page-people .lvpv-why { flex: 1 1 auto; color: var(--dim); overflow-wrap: anywhere; } #page-people .lvpv-restore { font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 700; border-radius: 7px; padding: 6px 12px; cursor: default; color: #C9A84C; background: rgba(201,168,76,0.08); border: 1px solid rgba(201,168,76,0.28); } /* The honest empty / unreadable / unknown line. Never a bare spinner and never a silent blank. */ #page-people .lvpv-note { font-size: 12px; line-height: 1.6; color: var(--dim); padding: 4px 0; } #page-people .req-conflict { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; color: #E05555; margin-top: 4px; } #page-people .req-conflict .cdot { width: 5px; height: 5px; border-radius: 50%; background: #E05555; box-shadow: 0 0 6px rgba(224,85,85,0.6); } /* honest-empty state (preserve-structure; mirrors .staff-empty) */ #page-people .to-empty { padding: 30px 22px; text-align: center; color: var(--dim); font-size: 13px; line-height: 1.6; } #page-people .to-empty .te-icon { width: 42px; height: 42px; border-radius: 12px; margin: 0 auto 12px; display: flex; align-items: center; justify-content: center; background: rgba(201,168,76,0.08); border: 1px solid rgba(201,168,76,0.22); color: #C9A84C; font-size: 20px; } /* SECTION 3 · coverage calendar (staff-rows x 7-day grid; full-width via minmax(0,1fr) columns) */ #page-people .cal-scroll { overflow-x: auto; } #page-people .cal { display: grid; grid-template-columns: 188px repeat(7, minmax(116px, 1fr)); min-width: 980px; } #page-people .cal-corner { position: sticky; left: 0; z-index: 3; background: #1C1A17; border-bottom: 1px solid rgba(255,255,255,0.12); padding: 11px 16px; display: flex; align-items: center; font-family: 'Montserrat', sans-serif; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); } #page-people .day-head { border-bottom: 1px solid rgba(255,255,255,0.12); border-left: 1px solid rgba(255,255,255,0.07); padding: 9px 8px; display: flex; flex-direction: column; align-items: center; gap: 2px; font-family: 'Montserrat', sans-serif; } #page-people .day-head .dn { font-size: 12px; font-weight: 700; color: #C4BFB6; letter-spacing: 0.05em; } #page-people .day-head .dd { font-size: 10.5px; color: var(--dim); } #page-people .day-head.today { background: rgba(201,168,76,0.08); } #page-people .day-head.today .dn { color: #C9A84C; } #page-people .day-head.today .dd { color: #E2C56A; opacity: 0.8; } #page-people .staff-cell { position: sticky; left: 0; z-index: 2; background: #232120; border-bottom: 1px solid rgba(255,255,255,0.07); padding: 11px 16px; display: flex; align-items: center; gap: 11px; min-height: 64px; } #page-people .sc-meta { min-width: 0; flex: 1; } #page-people .sc-name { font-size: 13px; font-weight: 700; color: #F0EBE2; line-height: 1.15; font-family: 'Montserrat', sans-serif; } #page-people .sc-role { font-size: 10.5px; color: var(--dim); line-height: 1.2; } #page-people .day-cell { border-bottom: 1px solid rgba(255,255,255,0.07); border-left: 1px solid rgba(255,255,255,0.07); padding: 8px 7px; min-height: 64px; display: flex; align-items: center; justify-content: center; position: relative; } #page-people .day-cell.today { background: rgba(201,168,76,0.028); } #page-people .day-cell.weekend { background: rgba(0,0,0,0.14); } #page-people .off { width: 100%; border-radius: 7px; padding: 7px 9px; text-align: center; font-family: 'Montserrat', sans-serif; font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.2; } #page-people .off.vac { background: linear-gradient(155deg, rgba(95,193,143,0.9), rgba(63,140,102,0.9)); color: #0F1A14; border: 1px solid rgba(255,255,255,0.18); } #page-people .off.sick { background: linear-gradient(155deg, rgba(232,185,106,0.9), rgba(181,112,31,0.9)); color: #1B1810; border: 1px solid rgba(255,255,255,0.18); } #page-people .off.per { background: linear-gradient(155deg, rgba(139,189,230,0.9), rgba(65,120,168,0.9)); color: #0C1620; border: 1px solid rgba(255,255,255,0.18); } #page-people .off.req { background: repeating-linear-gradient(45deg, rgba(232,148,58,0.45), rgba(232,148,58,0.45) 5px, transparent 5px, transparent 10px); border: 1px dashed rgba(232,148,58,0.6); color: #E8943A; } /* coverage strip under the calendar (staffed/needed per day; real from _aggregateCoverage) */ #page-people .cov-strip { border-top: 1px solid rgba(255,255,255,0.12); background: #1C1A17; } #page-people .cov-grid { display: grid; grid-template-columns: 188px repeat(7, minmax(116px, 1fr)); min-width: 980px; } #page-people .cov-label { position: sticky; left: 0; z-index: 2; background: #1C1A17; padding: 12px 16px; display: flex; flex-direction: column; justify-content: center; gap: 2px; } #page-people .cov-label .cl-t { font-family: 'Montserrat', sans-serif; font-size: 10px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--dim); } #page-people .cov-label .cl-s { font-size: 11px; color: #C4BFB6; } #page-people .cov-day { border-left: 1px solid rgba(255,255,255,0.07); padding: 11px 10px; display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; } #page-people .cov-day.today { background: rgba(201,168,76,0.028); } #page-people .cov-num { font-family: 'Montserrat', sans-serif; font-size: 16px; font-weight: 800; line-height: 1; } #page-people .cov-num.ok { color: #4CAF7D; } #page-people .cov-num.tight { color: #E8943A; } #page-people .cov-num.gap { color: #E05555; text-shadow: 0 0 10px rgba(224,85,85,0.4); } #page-people .cov-cap { font-size: 9.5px; color: var(--dim); letter-spacing: 0.06em; text-transform: uppercase; } #page-people .cov-flag { display: inline-flex; align-items: center; gap: 5px; font-family: 'Montserrat', sans-serif; font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: 999px; line-height: 1.3; } #page-people .cov-flag.gap { color: #E05555; background: rgba(224,85,85,0.13); border: 1px solid rgba(224,85,85,0.35); } #page-people .cov-flag .fdot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; } /* right rail (full-width-stacked under 1120px via .to-layout collapse) */ #page-people .to-rail { display: flex; flex-direction: column; gap: 18px; } #page-people .rail-card { background: #232120; border: 1px solid rgba(255,255,255,0.07); border-radius: 16px; box-shadow: 0 18px 50px rgba(0,0,0,0.45); overflow: hidden; position: relative; } #page-people .rail-head { padding: 13px 17px; border-bottom: 1px solid rgba(255,255,255,0.07); background: linear-gradient(180deg, #26231F, #232120); font-family: 'Montserrat', sans-serif; font-size: 11px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--dim); display: flex; align-items: center; gap: 9px; } #page-people .rail-head .rh-dot { width: 6px; height: 6px; border-radius: 50%; background: #C9A84C; box-shadow: 0 0 8px rgba(201,168,76,0.35); } #page-people .rail-body { padding: 15px 17px; } #page-people .out-list { display: flex; flex-direction: column; gap: 9px; } #page-people .out-row { display: flex; align-items: center; gap: 10px; background: rgba(91,155,213,0.06); border: 1px solid rgba(91,155,213,0.22); border-radius: 7px; padding: 9px 11px; } #page-people .out-row .oav { width: 28px; height: 28px; border-radius: 8px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 11px; color: #0C1620; background: linear-gradient(145deg, #8BBDE6, #4178A8); } #page-people .out-row .om { flex: 1; min-width: 0; } #page-people .out-row .od { font-size: 10.5px; color: #5B9BD5; } #page-people .up-list { display: flex; flex-direction: column; gap: 0; } #page-people .up-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,0.07); } #page-people .up-row .ud { font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 800; color: #C9A84C; min-width: 46px; text-align: center; line-height: 1.1; } #page-people .up-row .ud small { display: block; font-size: 8.5px; font-weight: 600; color: var(--dim); letter-spacing: 0.08em; text-transform: uppercase; } #page-people .up-row .um { flex: 1; min-width: 0; font-size: 11.5px; color: #C4BFB6; } #page-people .up-tag { font-size: 9.5px; color: var(--dim); } #page-people .policy-note { font-size: 11px; color: var(--dim); line-height: 1.55; } #page-people .coming-pill { display: inline-flex; align-items: center; gap: 6px; font-family: 'Montserrat', sans-serif; font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #5B9BD5; background: rgba(91,155,213,0.1); border: 1px solid rgba(91,155,213,0.3); border-radius: 999px; padding: 3px 9px; margin-bottom: 9px; } #page-people .coming-pill .cp-dot { width: 5px; height: 5px; border-radius: 50%; background: #5B9BD5; } /* FIX_TIMEOFF_APPROVAL_CALENDAR_2026_09_11 — month-scale approval calendar (renderTimeOffCalendar, src/to.js): standalone-card nav row + month grid + day popover. Colour tokens reuse the who's-off grid's own .tdot vocabulary above (never a second palette); .tdot.req is the one new variant, using the same amber #E8943A the who's-off legend's own "Requested" swatch already carries, with a dashed ring so a dot reads as pending rather than decided at a glance. */ #page-people .to-cal-nav { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; } #page-people .to-cal-navbtn { background: #232120; border: 1px solid rgba(255,255,255,0.12); color: #C4BFB6; border-radius: 8px; padding: 7px 13px; font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 700; cursor: pointer; transition: filter 0.15s, border-color 0.15s; } #page-people .tdot.req { background: #E8943A; border: 1px dashed rgba(255,255,255,0.5); } #page-people .tcm-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: rgba(255,255,255,0.07); } #page-people .tcm-dow { background: #1C1A17; padding: 9px 8px; text-align: center; font-family: 'Montserrat', sans-serif; font-size: 10px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--dim); } #page-people .tcm-cell { background: #232120; min-height: 88px; padding: 7px; position: relative; } #page-people .tcm-cell.out { background: #1C1A17; opacity: 0.5; } #page-people .tcm-cell.today { background: rgba(201,168,76,0.06); } #page-people .tcm-cell.gap { box-shadow: inset 0 0 0 1px rgba(224,85,85,0.35); } #page-people .tcm-cell[role="button"] { cursor: pointer; } #page-people .tcm-cell[role="button"]:hover, #page-people .tcm-cell[role="button"]:focus { background: rgba(201,168,76,0.1); outline: none; } #page-people .tcm-daynum { font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 700; color: #C4BFB6; } #page-people .tcm-cell.today .tcm-daynum { color: #C9A84C; } #page-people .tcm-gap { font-size: 8.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #E05555; margin-top: 2px; } #page-people .tcm-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; } #page-people .tcm-more { font-size: 9.5px; color: var(--dim); } #page-people .to-cal-daypop { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 400; background: #232120; border: 1px solid rgba(255,255,255,0.14); border-radius: 14px; box-shadow: 0 24px 60px rgba(0,0,0,0.55); max-width: 420px; width: calc(100% - 40px); max-height: 70vh; overflow-y: auto; } #page-people .tcp-inner { padding: 18px 20px; position: relative; } #page-people .tcp-close { position: absolute; top: 10px; right: 12px; background: none; border: none; color: var(--dim); font-size: 20px; line-height: 1; cursor: pointer; } #page-people .tcp-date { font-family: 'Montserrat', sans-serif; font-size: 15px; font-weight: 800; color: #F0EBE2; margin-bottom: 12px; } #page-people .tcp-empty { font-size: 12px; color: var(--dim); } #page-people .tcp-row { padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.07); display: flex; flex-direction: column; gap: 6px; } #page-people .tcp-who { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; color: #F0EBE2; font-family: 'Montserrat', sans-serif; } /* FIX_SCHEDULE_COVERAGE_HEATMAP_2026_09_11 (v1.25) — §3.4/§3.5(CSS): the Density-view weekday × time-band coverage overlay (build_schedule_coverage_heatmap_overlay_brief.md REV 2). New, #page-people-scoped class names ONLY (§7 — never a borrow of Operations' own heat-cell classes verbatim; the visual palette intentionally echoes Ops's gold-density scale for product coherence, the class names do not). Layout mirrors .b1sc-sched's own 188px-corner + 7-column grid shape at half the row count (5 bands vs 7 staff rows). Symbol-anchor: .b1sc-sched, __schedCoverageDensity, __opsHeatBands. */ #page-people .sched-heat-grid { display: grid; grid-template-columns: 132px repeat(7, minmax(96px,1fr)); min-width: 820px; } #page-people .sched-heat-corner { border-bottom: 1px solid var(--sd-border-strong); background: var(--sd-surface-a); } #page-people .sched-heat-dayhead { border-bottom: 1px solid var(--sd-border-strong); border-left: 1px solid var(--sd-border); padding: 9px 8px; display: flex; flex-direction: column; align-items: center; gap: 2px; font-family: 'Montserrat', sans-serif; } #page-people .sched-heat-dayhead .sched-heat-dn { font-size: 12px; font-weight: 700; color: var(--text); letter-spacing: 0.05em; } #page-people .sched-heat-dayhead .sched-heat-dd { font-size: 10.5px; color: var(--text-dim); } #page-people .sched-heat-dayhead.sched-heat-today { background: rgba(201,168,76,0.08); } #page-people .sched-heat-rowlabel { border-bottom: 1px solid var(--sd-border); background: var(--sd-surface-b); padding: 10px 12px; display: flex; align-items: center; font-family: 'Montserrat', sans-serif; font-size: 11px; color: var(--text-dim); } #page-people .sched-heat-cell { border-bottom: 1px solid var(--sd-border); border-left: 1px solid var(--sd-border); min-height: 48px; display: flex; align-items: center; justify-content: center; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 12px; color: #1B1810; } #page-people .sched-heat-cell-empty { color: var(--text-dim); font-weight: 400; } @media (max-width: 920px) { #page-people .sched-heat-grid { overflow-x: auto; } } /* FIX_SCHED_MONTHVIEW_2026_08_27 (v1.25) — §3.2/§3.5(CSS): the Month view calendar grid. NEW, #page-people-scoped class names, mirroring .sched-heat-grid's own scoping convention (never a bare unscoped class on this surface). ⛔ b1sc-stat / b1sc-hol are the SHIPPED statutory-holiday classes REUSED (P9 row) — their own base rules are compound-selector-scoped to .b1sc-dayhead, so this file adds the matching compound rule for the month cell's OWN structural class rather than re-declaring the semantic (colour/weight) styling a second time. Symbol-anchor cross-ref: __buildShiftMonthMatrix, __isStatHoliday, .b1sc-dayhead.b1sc-stat, .b1sc-dayhead .b1sc-hol. */ #page-people .sched-month-grid { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap: 1px; background: var(--sd-border); border: 1px solid var(--sd-border-strong); border-radius: var(--sd-r-md, 10px); overflow: hidden; } #page-people .sched-month-dayhead { background: var(--sd-surface-a); padding: 8px 6px; text-align: center; font-family: 'Montserrat', sans-serif; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); } #page-people .sched-month-cell { background: var(--sd-surface-b); min-height: 84px; padding: 6px 7px; display: flex; flex-direction: column; gap: 4px; position: relative; } #page-people .sched-month-cell.sched-month-muted { background: rgba(255,255,255,0.015); opacity: 0.42; } #page-people .sched-month-cell.sched-month-today { box-shadow: inset 0 0 0 1.5px var(--gold); } #page-people .sched-month-cell.b1sc-stat { background: rgba(232,148,58,0.10); } #page-people .sched-month-cell-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 4px; } #page-people .sched-month-daynum { font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 700; color: var(--text); } #page-people .sched-month-cell.sched-month-muted .sched-month-daynum { color: var(--text-dim); font-weight: 400; } #page-people .sched-month-cell .b1sc-hol { font-size: 9px; font-weight: 700; color: #E8943A; letter-spacing: 0.02em; max-width: 72px; text-align: right; line-height: 1.15; } /* FIX_SCHED_MONTHVIEW_REV3_SHOW_2026_09_13 — §3.2/§3.6(CSS): the per-cell summary line and the per-cell bulk-select checkbox (both S2-shipped) are RETIRED by the founder's ruling on DP item 27 — "not on the month calendar, only when a day is selected" / "not selects, it shows them". Their base rules (`.sched-month-summary`, `.sched-month-sel`) are REMOVED here rather than left as dead CSS, since no markup anywhere emits either class after this REV (rows 15/16 of the brief's own `## 0` block hold this at 0 in src/render_misc.js). Replaced by: (a) a cursor/hover affordance on the now-clickable cell itself, scoped to `[role="button"]` so muted/empty cells (which never carry the attribute) are unaffected; (b) `.sched-month-cell-shown`, the "currently shown" visual marker named in §3.2; (c) the day-detail panel (§3.6), which reuses the SHIPPED `.b1sc-shift`/`.b1sc-sel` styling verbatim (no new chip CSS) and needs only its own small wrapper/header rules below. */ #page-people .sched-month-cell[role="button"] { cursor: pointer; } #page-people .sched-month-cell[role="button"]:hover { box-shadow: inset 0 0 0 1.5px var(--sd-border-strong); } #page-people .sched-month-cell[role="button"]:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; } #page-people .sched-month-cell-shown { box-shadow: inset 0 0 0 1.5px var(--gold); } #page-people .sched-month-cell.sched-month-today.sched-month-cell-shown { box-shadow: inset 0 0 0 2.5px var(--gold); } #page-people .sched-month-empty { color: var(--text-muted); font-size: 12px; padding: 16px 20px; text-align: center; } #page-people .sched-month-daydetail { border-top: 1px solid var(--sd-border); padding: 12px 20px; } #page-people .sched-month-daydetail-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer; margin-bottom: 10px; } #page-people .sched-month-daydetail-head:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } #page-people .sched-month-daydetail-title { font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 600; color: var(--text); } #page-people .sched-month-daydetail-close { color: var(--text-dim); font-size: 16px; line-height: 1; } #page-people .sched-month-daydetail-head:hover .sched-month-daydetail-close { color: var(--text-bright); } #page-people .sched-month-daydetail-list { display: flex; flex-direction: column; gap: 8px; } @media (max-width: 720px) { #page-people .sched-month-grid { overflow-x: auto; } } /* FIX_STAFFCARD_ROLES_CONTRACT_S1_2026_09_02 — __statutoryReferralNote has no CSS anywhere scoped to reach #page-people; its two #page-people call sites (Payroll averaging-agreements + __staffHrPane) render the at the browser's unconstrained intrinsic default size — the giant broken glyph reported on the staff card. Follows the Session-Packages host's grid+plain- svg icon+text row shape for this class pair (NOT the badge-box-chip shape the other two hosts of this class pair use — the statutory-referral markup's two children, .fd-ic then a text div, match the grid-row shape exactly). The two other existing host-scoped rules for this class pair are unedited and out of scope — reused unchanged. */ #page-people .statutory-referral { display: grid; grid-template-columns: auto 1fr; gap: 10px; padding: 14px 16px; border-top: 1px solid var(--sd-border-strong); color: var(--text-dim); font-size: 11.5px; line-height: 1.5; margin-top: 14px; } #page-people .statutory-referral .fd-ic svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2; fill: none; }