/* ============================================================================ spotlight.css — the Spotlight layer on top of the shared kit. LOAD ORDER MATTERS: scend-client.css first, then people.css, then this file. Every page links all three, in that order. This is a THIN LAYER, exactly like people.css. The kit owns the shell, cards, buttons, KPIs, pills, chips, skeletons and both themes; this file owns only what is specific to a staff noticeboard — the people grid, the photo/monogram, the list row and the provenance markers. LAYOUT ONLY. No literal colours, no rgba(). An unresolved var() invalidates the whole declaration silently — the background disappears and the text stays — so every colour here resolves to a kit token and dark mode works for free. ============================================================================ */ /* people grid — 262px, not less: a 64px photo plus "Despatch Supervisor" needs it, and at 228px the NAME wrapped. */ .pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(262px,1fr));gap:16px} .pcard{padding:18px 20px} .pcard .top{display:flex;align-items:center;gap:13px} .pcard .top .who{flex:1;min-width:0} .pcard .nm{font-size:14.5px;font-weight:650;letter-spacing:-.1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pcard .rl{font-size:12.5px;color:var(--muted);margin-top:2px} .pcard .dp{font-size:11.5px;color:var(--faint);margin-top:1px} .pcard .chips{margin-top:12px} /* 64px square, cropped to the TOP of the image, not the centre — faces, not chins. Aysha's brief calls this out as a deliberate earlier fix and it is right. */ .thumb{width:64px;height:64px;border-radius:var(--r-sm);object-fit:cover;object-position:top;flex:none;background:var(--line-2);display:block} /* Monogram stand-in when there is no photo. Round like the kit's own .avatar so it reads as a person rather than a broken image. Most of the roster has no photo and this means the team page is complete on day one instead of after a photo round-up. */ .mono{width:64px;height:64px;border-radius:50%;flex:none;display:grid;place-items:center; background:var(--accent-soft);color:var(--accent-ink);font-size:17px;font-weight:700;letter-spacing:-.3px} .mono.sm,.thumb.sm{width:40px;height:40px;font-size:13px} /* list row inside a card — the kit's .row shape plus a right-hand slot */ .lrow{display:flex;align-items:center;gap:12px;padding:11px 0;border-top:1px solid var(--line-2)} .lrow:first-child{border-top:none} .lrow .m{flex:1;min-width:0} .lrow .t{font-size:13.5px;font-weight:600} .lrow .s{font-size:12px;color:var(--muted)} /* provenance marker: this came from the QMS and nobody maintains it here. A .chip variant so it inherits the kit's shape rather than adding a component. */ .src{border-color:var(--accent);color:var(--accent-ink);background:var(--accent-soft)} .src svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2;vertical-align:-2px;margin-right:4px} .sec{margin-bottom:22px} .sec-h{display:flex;align-items:center;gap:10px;margin:0 0 12px;flex-wrap:wrap} .sec-h h2{font-size:14px;font-weight:650;margin:0;letter-spacing:-.1px} .sec-h .n{font-size:12px;color:var(--faint);font-weight:600;font-variant-numeric:tabular-nums} .sec-h .sp{margin-left:auto} .fld{display:block;margin-bottom:13px} .fld > span{display:block;font-size:12px;font-weight:600;color:var(--muted);margin-bottom:5px} textarea.in{min-height:84px;resize:vertical;font-family:inherit} .check{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--ink-2);margin-bottom:15px} .check input{width:auto;accent-color:var(--accent)} .reply{margin-top:12px;padding:12px 14px;border-radius:var(--r-sm);background:var(--accent-soft)} .reply .rh{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--accent-ink);margin-bottom:4px} .reply .rb{font-size:13px;color:var(--ink-2)} .pinned{display:inline-flex;align-items:center;gap:5px;color:var(--accent-ink);font-size:11.5px;font-weight:650} .pinned svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.8} /* admin-only affordances. Hidden by default and revealed by the shell adding .is-admin to , so a non-admin never sees a control the database will refuse — the RLS policy is the boundary, this is just not lying to people. */ .admin-only{display:none} body.is-admin .admin-only{display:inline-flex} body.is-admin .admin-only.blk{display:block} .stack > .card{margin-bottom:14px} .rowacts{display:flex;gap:6px;align-items:center} @media(max-width:900px){ .grid2{grid-template-columns:1fr} .kpis{grid-template-columns:repeat(2,1fr)} } /* MOBILE NAV — every page, not the first five. The kit's .mobile-tabs is `grid-template-columns:repeat(5,1fr)` and the shell fed it NAV.slice(0,5). With nine pages that silently made Calendar, Update board, Suggestion box and Kudos UNREACHABLE on a phone — no error, no overflow, they simply were not there, and the floor is phone-first. The kit's own answer is a drawer behind a "More" tab; a scroll strip is the smaller change and needs no new component. Scroll-snap and a shrunk label keep it from feeling like a mistake. */ @media(max-width:860px){ .mobile-tabs{ display:flex !important; grid-template-columns:none !important; overflow-x:auto; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; scrollbar-width:none; } .mobile-tabs::-webkit-scrollbar{display:none} .mobile-tabs .mobile-tab{ flex:0 0 auto; min-width:72px; scroll-snap-align:center; font-size:10px; } } /* ============================================================================ SPOTLIGHT PALETTE — Aysha's design, as tokens rather than as a fork. Kyle, 14/09/2026: "give her the colours she wants." THIS IS A TOKEN OVERRIDE, NOT A SECOND STYLESHEET, and the distinction is the whole point. scend-client.css reads every colour from these custom properties, so re-pointing them re-skins the rail, cards, buttons, pills, chips, KPIs and skeletons in one block — and a future kit fix (a contrast retune, a new component) still lands here automatically. Forking the kit is what the CS portal did, and every fix there has to be made twice; one of them gets missed. It is repeated across all four of the kit's token selectors on purpose. The kit declares tokens on :root, on :root:not([data-theme]) inside a prefers-color-scheme:dark media query, and on [data-theme="dark"]/["light"]. Overriding only :root loses to the media query the moment a viewer's phone is in dark mode — Spotlight would flip to the house palette for half the floor and nobody would be able to say why. Spotlight is dark in every case. CONTRAST IS MEASURED, NOT EYEBALLED. Every foreground below clears 4.5:1 against BOTH grounds that carry text — the page #052A28 and the card #124C46: ink #E4FBF5 14.19 / 9.04 muted #AAD2CB 9.35 / 5.95 ink-2 #C9E8E2 11.78 / 7.51 faint #93BEB7 7.52 / 4.79 accent #2FDCC9 8.92 / 5.68 amber #F4BD6E 9.03 / 5.75 rose #F4B7A4 8.88 / 5.66 Three of Aysha's originals failed and were lifted: the rose First-Aider badge (3.63 on the lighter card), --muted (3.41) and --faint (2.74). The ramp is still a ramp — ink > ink-2 > muted > faint, each visibly dimmer than the last — because simply pushing the failures up to 4.5 collapsed muted and faint into one colour. #165A52 is her secondary SURFACE (pills, hovers, --line-2); it never carries body text, which is why the ramp is measured against the other two grounds. Re-measure after changing anything here. ============================================================================ */ :root, :root[data-theme="dark"], :root[data-theme="light"] { --bg:#052A28; --canvas:#124C46; --rail:#042220; --rail-2:#0A3A36; --rail-ink:#AAD2CB; --rail-ink-strong:#E4FBF5; --rail-lbl:#93BEB7; --ink:#E4FBF5; --ink-2:#C9E8E2; --muted:#AAD2CB; --faint:#93BEB7; --line:#1E5F58; --line-2:#165A52; --accent:#2FDCC9; --accent-ink:#2FDCC9; --accent-soft:#0E3B38; --on-accent:#052A28; --skel-1:#165A52; --skel-2:#1E6B62; --good:#6FE3B0; --good-soft:#0C3A2B; --warn:#F4BD6E; --warn-soft:#3C2F13; --crit:#FF9C9C; --crit-soft:#3E1C1C; --card-shadow:0 1px 2px rgba(0,0,0,.28), 0 8px 22px rgba(0,0,0,.22); /* her spec: 20px cards */ --r:20px; --r-sm:12px; } @media (prefers-color-scheme:dark){ :root, :root:not([data-theme]) { --bg:#052A28; --canvas:#124C46; --rail:#042220; --rail-2:#0A3A36; --rail-ink:#AAD2CB; --rail-ink-strong:#E4FBF5; --rail-lbl:#93BEB7; --ink:#E4FBF5; --ink-2:#C9E8E2; --muted:#AAD2CB; --faint:#93BEB7; --line:#1E5F58; --line-2:#165A52; --accent:#2FDCC9; --accent-ink:#2FDCC9; --accent-soft:#0E3B38; --on-accent:#052A28; --skel-1:#165A52; --skel-2:#1E6B62; --good:#6FE3B0; --good-soft:#0C3A2B; --warn:#F4BD6E; --warn-soft:#3C2F13; --crit:#FF9C9C; --crit-soft:#3E1C1C; --card-shadow:0 1px 2px rgba(0,0,0,.28), 0 8px 22px rgba(0,0,0,.22); /* her spec: 20px cards */ --r:20px; --r-sm:12px; } } /* Her spec also calls for pill buttons and small uppercase mono metadata labels. Component tweaks, not new components — the kit still owns the behaviour. */ .btn{border-radius:999px} .btn.sm{border-radius:999px} .navlbl,.kpi .lbl,.sec-h .n,.src,.chip.sq{ font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace; letter-spacing:.08em; } .navlbl{text-transform:uppercase} /* Capability badges, coloured as Aysha drew them — rose First Aider, amber Fire Marshal, turquoise FLT. I had these neutral on the argument that the kit reserves colour for data STATE and "holds a current certificate" is the normal case. Kyle overruled toward her design on 14/09, and she is right that on a wall-mounted team page the badges ARE the content, not decoration. The renewal warning still uses the amber pill, so a lapsing certificate is still the thing that shouts. --sp-rose is Aysha's #F0987E lifted to #F4B7A4: hers measured 3.63 on the card and these are small text, so it failed where it mattered most. */ :root, :root[data-theme="dark"], :root[data-theme="light"]{ --sp-rose:#F4B7A4; } @media (prefers-color-scheme:dark){:root, :root:not([data-theme]){ --sp-rose:#F4B7A4; }} .chip.cap-fa { color:var(--sp-rose); border-color:var(--sp-rose); background:var(--crit-soft) } .chip.cap-fm { color:var(--warn); border-color:var(--warn); background:var(--warn-soft) } .chip.cap-flt{ color:var(--accent); border-color:var(--accent); background:var(--accent-soft) } /* Kudos rendered as a feed post (Activity). The heart sits top-right so the card reads as praise at a glance without a coloured border competing with a personal best. */ .kudospost .kmark{color:var(--accent);flex:none} .kudospost .kmark svg{width:18px;height:18px;stroke:currentColor;fill:currentColor} .kudospost .cap2{font-size:13.5px;color:var(--ink-2);line-height:1.55} /* ---------------------------------------------------------------- modal Panels used to be injected after the page's .h1, which meant clicking Edit on somebody halfway down the team grid scrolled nothing and put the panel offscreen above you — the control worked and appeared to do nothing. Centre it instead. Layout only; every colour is a token, so it follows the palette. */ .sp-back{position:fixed;inset:0;z-index:2147483000;background:rgba(0,0,0,.55); display:grid;place-items:center;padding:24px;overflow-y:auto} .sp-modal{width:100%;max-width:540px;max-height:calc(100vh - 48px);overflow-y:auto; animation:sp-rise var(--t) var(--ease)} /* the card inside keeps its own background; this just stops a long panel running off */ @keyframes sp-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} @media(prefers-reduced-motion:reduce){.sp-modal{animation:none}} body.sp-open{overflow:hidden} @media(max-width:560px){ .sp-back{padding:12px;align-items:start} } /* Admin action row under a page heading. Was a .chips div with display:block forced on it by .admin-only.blk — which killed the flex layout — plus a -14px top margin to close the gap under .sub. The two together dropped the buttons on top of the subtitle text. Its own class, normal flow, no negative margins. */ .adminbar{display:none;gap:9px;flex-wrap:wrap;margin:0 0 20px} body.is-admin .adminbar.blk{display:flex} /* the verb chip that labels a brand row — quieter than the brands it introduces */ .chip.vb{background:transparent;border-color:transparent;color:var(--faint); text-transform:uppercase;letter-spacing:.08em;font-size:10px;padding-left:0} /* A floor activity on a wall post — a sentence, not a stat block. Secondary to picking and packing on a day somebody did both; the whole post when it is all they did. */ .actrow{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;padding:8px 18px 0;font-size:13px} .actrow .ac{font-weight:700;color:var(--ink-2)} .actrow b{font-weight:750;font-variant-numeric:tabular-nums} .actrow .au{color:var(--muted);font-size:12px} .actrow .abr{color:var(--faint);font-size:12px} .actrow:last-of-type{padding-bottom:6px} /* Multi-person picker (spotlight-ui.js pickerMulti). A scroll box rather than a growing list: 28 people is taller than the form it sits in, and a form you have to scroll past to reach its own submit button is one people abandon. */ .multipick{max-height:216px;overflow-y:auto;border:1px solid var(--line);border-radius:var(--r-sm); background:var(--card);padding:4px} .multipick .mp{display:flex;align-items:center;gap:9px;padding:5px 7px;border-radius:var(--r-sm); cursor:pointer;font-size:13px} .multipick .mp:hover{background:var(--accent-soft)} .multipick .mp input{flex:none;margin:0} .multipick .mp .thumb,.multipick .mp .mono{width:26px;height:26px;border-radius:50%;font-size:10px} .multipick .mp span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* A row of faces for a group achievement. Overlapped, so five people take the width of about three and the card does not reflow when a sixth is added. */ .facepile{display:flex;align-items:center} .facepile .thumb,.facepile .mono{width:34px;height:34px;border-radius:50%;font-size:12px; margin-left:-9px;box-shadow:0 0 0 2px var(--card)} .facepile .thumb:first-child,.facepile .mono:first-child{margin-left:0} /* An achievement's own photo, shown at size rather than shrunk into an avatar slot. contain, not cover — see the feed: these are pictures of people, and cover crops whoever is standing at the edge straight out of the frame. */ .achshot{display:block;margin:10px auto 2px;max-width:100%;max-height:360px;width:auto; border-radius:var(--r-sm)} /* Update board photo. Two goes at this: it was an inline max-width:320px thumbnail, then a full-width object-fit:contain box — which for a PORTRAIT product shot painted two enormous slabs of empty ground either side of the pouch and looked worse than the thumbnail did. Kyle, 17/09: "this still looks ugly". No frame at all now. The image is simply as large as it can be within a height cap, centred, keeping its own shape — so a tall pack shot is tall and a wide team photo is wide, and neither gets a letterbox drawn around it. There is no background because there is no box to fill. */ .updshot{display:block;margin:0 auto 11px;max-width:100%;max-height:380px;width:auto; border-radius:var(--r-sm)} /* Post headers, bigger. Aysha, 17/09: "can I have the writing on the headers of the posts bigger?" — looking at the update board, where "New Client Incoming" was 14px against a 660px card and read as a caption rather than a headline. OVERRIDDEN HERE, not edited in scend-client.css. That file is the house kit and the client and CS portals render their own cards through the same rule; a 2px bump made there would move every table header in the estate to satisfy one page in this portal. spotlight.css loads last, so a scoped override is enough. Same reasoning as the palette: re-point, never fork. */ .card-h h3{font-size:16px;font-weight:700} .post-h .nm{font-size:16px} /* ---------------------------------------------------------------- kudos + comments Styles the markup SPOT_SOCIAL emits. These lived inside feed.html's own