/* Phosphor icons — the nav set only, self-hosted and subsetted. * * WHY A FONT AND NOT MORE INLINE SVG. The redesign handoff asks for Phosphor and the mockup's * own nav is built on it (its PH map names the glyph for every item), so this is the icon the * design was drawn with. Jose chose self-hosting over the mockup's unpkg link on 2026-10-12. * * WHY SELF-HOSTED IS THE ONLY OPTION HERE, not a preference: /login/ and every public page run a * strict `default-src 'self'` Content-Security-Policy. A font or stylesheet fetched from a CDN is * blocked outright, and on /login/ that locks every user out of the platform — the same reason the * brand faces sit in public/fonts/ rather than on fonts.googleapis.com. * * 94 GLYPHS, NOT FIFTEEN HUNDRED. The shipped file is subsetted to exactly the codepoints * the coach rail uses: 146 KB of Phosphor-Bold becomes a few KB. Adding an icon means adding its * codepoint and re-subsetting — see public/fonts/README.txt — never swapping in the full font. * * font-display:block, NOT swap. swap paints the fallback face first, and for an icon font the * fallback for U+E2C2 is whatever the system does with an unmapped private-use character: a box, * or a random glyph, in the middle of the navigation. block holds the space blank for a moment * instead, which is the right failure for an icon sitting next to its own text label. */ /* THE VERSION IS IN THE FILENAME, and it has to be. * * The CDN holds static files for a year and only a different URL defeats that. Every asset PHP * writes carries ?v=CLCM_VERSION; these two cannot, because their URLs live HERE, in a plain text * file PHP never runs over. And this font is REBUILT whenever an icon is added — four times so far * — under what used to be the same name, so the versioned stylesheet would arrive asking for * glyphs that only exist in the new font while the edge still served the old one. Those icons * render as empty boxes, for whoever holds the stale copy, for as long as it lives. * * The tag is the release the font was last REBUILT in, not the current one: tools/subset-phosphor.py * stamps it and rewrites the two url() lines below in the same run, so a release that does not * touch the icons does not churn this file. Never rename the font by hand — the script keeps the * two halves in step, and tests/test-icon-font-versioned-v2268.php fails if they ever drift. */ @font-face{ font-family:'Phosphor'; font-style:normal; font-weight:400; font-display:block; src:url('../fonts/phosphor-bold.2-317-0.woff2') format('woff2'); } /* The FILLED weight, for the nav item you are currently on — the handoff asks for it by name ("Bold weight, filled for the active nav item"). The mockup's own Bold mode marks the active item with colour alone and leaves the glyph bold; Jose chose the handoff's wording on 2026-10-12. Both weights use the SAME codepoint per icon — tools/subset-phosphor.py refuses the job if bold and fill disagree on any of them, so it is checked on every rebuild rather than asserted once against a count that then went stale, so the content rules below are shared and only the family swaps. */ @font-face{ font-family:'Phosphor-Fill'; font-style:normal; font-weight:400; font-display:block; src:url('../fonts/phosphor-fill.2-317-0.woff2') format('woff2'); } /* The carries no text of its own and every icon here sits beside its real label, so it is aria-hidden at the call site and contributes nothing to the accessible name. */ .ph{ font-family:'Phosphor' !important; speak:none; font-style:normal; font-weight:400; font-variant:normal; text-transform:none; line-height:1; letter-spacing:0; display:inline-block; vertical-align:middle; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } /* Swaps the family only; the glyph's codepoint is unchanged. */ .ph.ph-fill{ font-family:'Phosphor-Fill' !important; } .ph-globe-hemisphere-west:before{content:"\e28c"} /* All Organizations */ .ph-sliders-horizontal:before{content:"\e434"} /* Appointment setup */ .ph-calendar-blank:before{content:"\e10a"} /* Appointments */ .ph-briefcase:before{content:"\e0ee"} /* Business Center */ .ph-certificate:before{content:"\e766"} /* Certification */ .ph-users:before{content:"\e4d6"} /* Clients */ .ph-book-open:before{content:"\e0e6"} /* Courses */ .ph-warning:before{content:"\e4e0"} /* Notice component, WARNING tone — the triangle. Must stay a different SHAPE from the alert octagon below: the design carries tone by icon shape and a word, never by colour alone. */ .ph-warning-octagon:before{content:"\e4e4"} /* Crisis Alerts */ .ph-users-three:before{content:"\e68e"} /* Groups */ .ph-lifebuoy:before{content:"\e63a"} /* Help */ .ph-house:before{content:"\e2c2"} /* Home */ .ph-tray:before{content:"\e4aa"} /* Inbox (designed, not built) */ .ph-folder-simple:before{content:"\e25a"} /* Library */ .ph-identification-card:before{content:"\e2c8"} /* Membership */ .ph-pulse:before{content:"\e000"} /* Metrics */ .ph-buildings:before{content:"\e102"} /* My Organization */ .ph-receipt:before{content:"\e3ec"} /* Orgs. Billing */ .ph-check-square:before{content:"\e186"} /* Portal: Actions */ .ph-notebook:before{content:"\e34e"} /* Portal: Journal */ .ph-chat-circle-text:before{content:"\e16e"} /* Portal: Messages */ .ph-dots-three-outline:before{content:"\e204"} /* Portal: More */ .ph-user-circle:before{content:"\e4c4"} /* Portal: My Profile */ .ph-chart-line-up:before{content:"\e156"} /* Portal: Progress */ .ph-clipboard-text:before{content:"\e198"} /* Portal: Worksheets */ .ph-chart-bar:before{content:"\e150"} /* Reports */ .ph-shield-check:before{content:"\e40c"} /* Security */ .ph-gear-six:before{content:"\e272"} /* Settings */ .ph-chalkboard-simple:before{content:"\e5fe"} /* Whiteboards */ .ph-magnifying-glass:before{content:"\e30c"} /* the rail's search control and the command palette */ .ph-plus:before{content:"\e3d4"} /* the header bar's "+ New" */ .ph-bell:before{content:"\e0ce"} /* the header bar's notifications */ .ph-calendar-plus:before{content:"\e714"} /* Inbox: a booking request */ .ph-hourglass-medium:before{content:"\e2b8"} /* Inbox: a client running low on sessions */ .ph-paper-plane-tilt:before{content:"\e398"} /* Inbox: send a reply */ /* ── The Feather sweep, v2.267.0: the glyphs the admin screens now ask for. Each was identified from the old inline path AND from what its control does, then checked against upstream's name list — a class with no glyph renders an empty box. ── */ .ph-arrow-counter-clockwise:before{content:"\e038"} /* Row action clcmMarkAppt(id,'confirmed'), title "Reopen this session" — u */ .ph-arrow-left:before{content:"\e058"} /* The "Back to Clients" link above the client profile header — backwards n */ .ph-arrow-square-out:before{content:"\e5de"} /* The "Join" link on an appointment row */ .ph-calendar-x:before{content:"\e10c"} /* Row action clcmCancelAppt(id, cancel_count), title "Cancel" — cancels th */ .ph-caret-left:before{content:"\e138"} /* Breadcrumb link to admin.php?page=clcm-business&biz_tab=agreements, labe */ .ph-caret-right:before{content:"\e13a"} /* The "Next day" link in the same day-navigation strip (aria-label 'Next d */ .ph-chat:before{content:"\e15c"} /* Marks the "Texts OK · " row, title "This client consented to text */ .ph-check:before{content:"\e182"} /* Row action clcmMarkAppt(id,'completed'), title "Mark completed" */ .ph-check-circle:before{content:"\e184"} /* Stat-card icon above the 'Completed' count on the sage card — agreements */ .ph-clock:before{content:"\e19a"} /* Stat-card icon above the 'Outstanding' count (agreements sent but not ye */ .ph-copy:before{content:"\e1ca"} /* Duplicate a course (clcmDuplicateCourse), title="Duplicate" */ .ph-download:before{content:"\e20a"} /* The "Export Record" link — downloads the client's full record (details, */ .ph-download-simple:before{content:"\e20c"} /* Link titled 'Download signed copy' hitting admin-ajax clcm_download_agre */ .ph-envelope-simple:before{content:"\e218"} /* Marks the email address row in the client profile meta list (display onl */ .ph-eye:before{content:"\e220"} /* Ghost icon button titled 'View' — opens clcmViewAgreement() to read one */ .ph-file-csv:before{content:"\eb1c"} /* Trigger button labelled 'CSV' with a caret */ .ph-file-text:before{content:"\e23a"} /* 32px empty-state illustration for 'No agreements sent yet.' */ .ph-graduation-cap:before{content:"\e62c"} /* Marks the "Promoted to coach " row, title "Promoted from client to */ .ph-info:before{content:"\e2ce"} /* Leading glyph of a .clcm-notice-info banner telling coaches two-way Goog */ .ph-link-simple:before{content:"\e2e6"} /* "Connect with Stripe" button */ .ph-lock-simple:before{content:"\e308"} /* Marks a locked course day button (clcm-day-btn--locked, aria-disabled, t */ .ph-monitor:before{content:"\e32e"} /* Secondary button 'Platform view' (clcm_chrome=coach) — shows the workspa */ .ph-note:before{content:"\e348"} /* Empty-state illustration in the Session Notes panel, above 'No session n */ .ph-note-pencil:before{content:"\e34c"} /* The "Add Note" button */ .ph-package:before{content:"\e390"} /* Large clcm-empty-icon for the 'No packages yet' empty state of the packa */ .ph-pencil-simple:before{content:"\e3b4"} /* Row action on a session-type table row */ .ph-phone:before{content:"\e3b8"} /* Marks the phone-number row in the client profile meta list */ .ph-prohibit:before{content:"\e3de"} /* Row action clcmMarkAppt(id,'no_show'), title "Mark no show" */ .ph-receipt-x:before{content:"\ed40"} /* Row action clcmRefundAppt(id), title "Refund and cancel" — refunds the p */ .ph-repeat:before{content:"\e3f6"} /* Header button calling clcmBookRecurring(), labelled "Book Recurring" — b */ .ph-rows:before{content:"\e5a2"} /* Decorative .clcm-empty-icon in the library empty state, above "No worksh */ .ph-share-network:before{content:"\e408"} /* Row action on a whiteboard, title="Share" — calls clcmToggleShare() to s */ .ph-signature:before{content:"\ebac"} /* The dashboard's "To sign" strip — an agreement the client has not signed */ .ph-signpost:before{content:"\e89c"} /* Marks the "Source: