/* profile/profile.css -- page-owned, hand-written, not vendored, not baked. * * Task 5 reskin (2026-09-19): profile/profile.js's markup now follows _design/profile.html's * classes (ct-hero, ct-section, ct-windows, ct-table, ct-media, ct-card, ct-note, ...), all of * which are styled entirely by assets/ct/design-system.css and assets/ct/shell.css. This file * exists only for what neither of those covers, and every rule below is either a bare * structural need (no visual value of its own) or built from --ct-* tokens. No raw hex, and * no cms.css/tokens.js variable (--font-display, --font-ui, --font-body, --radius, --ink*, * --border*) appears anywhere here. Page-only classes are pf- prefixed, per this repo's rule * that a page-local class must never shadow a .ct-* design-system name. * * Dark mode needs nothing extra here: every value below is a --ct-* custom property, and * design-system.css already redefines those under html[data-mode="dark"] and, for * html[data-mode="system"], under prefers-color-scheme. Removed entirely in this pass: the * whole hand-rolled --pi-* light/dark palette this file used to carry (--pi-ink, --pi-body, * --pi-rule, --pi-action, ... and their @media (prefers-color-scheme: dark) overrides), the * .pf-hero/.pf-section/.pf-timeline/.pf-window family the old ribbon view used, and every * .ms-based icon rule -- profile.js now emits .material-symbols-rounded like the rest of the * shell, so nothing here needs to redeclare that font face. */ /* Shown before any script runs (the literal markup in profile/index.html) and, briefly, * while the real session check is still in flight. --ct-* only, so it needs no .pi-member * bridge class on to render correctly either before or after that class is added. */ .pf-loading { color: var(--ct-text-secondary); margin: var(--ct-space-8) auto; max-width: 28rem; text-align: center; } /* Anchor targets (the hero's "Edit profile" jump and the right rail's On this page nav) sit * under the sticky topbar. shell.css defines no scroll-margin for .ct-section because no * other of the four member routes jumps to an in-page id the way Profile's rail does, so this * is scoped to #profile-app rather than redefining .ct-section globally. */ #profile-app .ct-section { scroll-margin-top: calc(var(--ct-topbar-height) + var(--ct-space-4)); } /* Row editor cards for What works for me / What I'm focusing on / This feels like me: a * label+input stack per field plus a trailing remove button. Nothing in design-system.css * gives this exact shape (its .ct-table rows are for Your rhythms' fixed five columns), so it * is page-owned, built from --ct-* tokens and --ct- spacing only. */ .pf-edit-card { display: grid; gap: var(--ct-space-3); grid-template-columns: minmax(12rem, 1.4fr) minmax(9rem, 0.8fr) auto; align-items: end; padding: var(--ct-space-4) 0; border-top: var(--ct-border-width) solid var(--ct-border-subtle); } .pf-edit-card:first-child { border-top: 0; padding-top: 0; } /* Row order is always name, category, [remove button], reason/detail: the trailing textarea * label is the last