/* --------------------------------------------------------------------------- MY PROFILE This stylesheet has real structure to work with. `tcf-church/includes/ profile-form.php` hooks WP-Members' `wpmem_register_form_rows` and wraps every row, so the fieldset's children are:
one section

its heading, spanning both columns

one line under it, where it needs one

one field, or a field and the switches that govern it, as a single block Everything below styles those four. The earlier version of this file counted grid rows by hand and pinned `label[for="x"]` to `grid-area: 9 / 1`, which put two "do not show" switches on the same row as each other rather than each under its own field, and which broke the moment a field moved. Nothing here depends on the order of anything. --------------------------------------------------------------------------- */ /* ---- the frame ------------------------------------------------------------ */ /* * EVERY MEASURE ON THIS PAGE IS DERIVED, NOT DECLARED. * * `--tcf-pf-fields` is two `md` fields with a gutter between them - 320 + 40 + * 320 = 680 - and it is the width of the controls, of the privacy panel and of * the saved message. It is not a number somebody liked: it is what a row of two * paired fields comes to, so the frame is the content's own width rather than a * box the content floats around in. That is DESIGN_SYSTEM_FIELDS.md §3.1 taken * literally - "it is never sized from its container; when the two disagree, the * container moves". * * It replaced a flat 760px. Measured before that change, the widest thing inside * the 760 was the 548px address box, so the form's right edge was 212px away * from anything that could reach it and every row ended somewhere different. * * `--tcf-pf-rail` IS ONE MORE BAND OFF THE SAME LADDER, and that is the whole * argument for its width. The rail holds the words - the section heading, its * explanation, the derived listing name, one action - and a rail has no natural * measure of its own, so rather than pick one it takes `md`: the same 320 a * person's name gets. The composition is then three bands of the field ladder * and nothing invented. * * 320 rather than anything wider, and the page is deliberately NOT filled to * 1280. A rail at 528 would fill the band exactly and would also be one lede * measure of prose standing beside 680 of controls - words weighing as much as * the form, which inverts what the member came for. The rail is subordinate and * is sized to look it. * * `--tcf-space-8` between them, not `--tcf-space-6`: 40 is the gutter BETWEEN * TWO FIELDS and using it here would make the heading read as a third field * column. 72 is what `.tcf-hub-split` already puts between content and its * aside, and it is the same step this page already uses between sections. * * So: 320 + 72 + 680 = 1072 of the band's 1280 at 1440. Before this the form was * 680 of 1280 - 600px of the page was empty paper, which is what Jay saw. */ body.page-my-profile { --tcf-pf-rail: var(--tcf-field-measure-md); --tcf-pf-fields: calc(var(--tcf-field-measure-md) * 2 + var(--tcf-space-6)); --tcf-pf-measure: calc(var(--tcf-pf-rail) + var(--tcf-space-8) + var(--tcf-pf-fields)); } /* * `:has(.tcf-pf-sec)` IS A BUG FIX, and it was a visible one. * * /members/my-profile/ serves four different WP-Members forms off that one URL: * the profile editor, `?a=pwdchange`, and - to a SIGNED-OUT visitor - * `?a=pwdreset` and `?a=getusername`. Only the first has the wrappers this * layout is built for; the other three have a bare label and input. * * The two-column grid used to be applied to all four. Measured on the build * site at 1440: the password-reset email field rendered 180px wide, pushed into * the right-hand column of a 400px sign-in card with nothing in the left one; * `?a=pwdchange` put both password boxes in the right half of a 760px form with * the whole left column empty. Both looked broken and neither was reachable by * any gate, because check_design.py could not see the member area at all * (MAINTAINABILITY_REVIEW M-7). * * `.tcf-pf-sec` is emitted only by tcf-church's profile-form.php, so this * applies exactly where the markup it assumes exists. * * THE OUTER FIELDSET IS NOT THE GRID ANY MORE. Each section owns its own, which * is what makes a pair a decision rather than an accident: under one grid for * the whole form, what ended up beside what depended on how many full-width * groups happened to precede it. */ body.page-my-profile form.form fieldset:has(.tcf-pf-sec) { border: 0; margin: 0; padding: 0; max-width: var(--tcf-pf-measure); } /* * `#wpmem_reg` IS 75% OF THE BAND, AND IT HAD TO BE FOUND BY MEASURING. * * WP-Members' own stylesheet sets `#wpmem_reg { width: 75%; }` on the div it * wraps every form in. Inside a 1280px band that is 960px, and while the form * was 680 wide nothing ever touched the edge, so the rule was invisible for as * long as this page has existed. The moment the composition went to 1072 it * clipped: measured, the fieldset's `max-width` computed to the right 1072px and * its `width` to 960, the field tracks fell from 320 to 264, and the privacy * panel came out 568 wide. * * It is the same plugin habit that made `.wpmem_msg` three quarters of whatever * the band happened to be - see the note on the saved message at the foot of * this file. A percentage of a container is exactly the sizing * DESIGN_SYSTEM_FIELDS.md §3.1 rules out: "it is never sized from its container; * when the two disagree, the container moves". * * Scoped by `:has()` to the wrapper that actually holds the profile editor, so * the sign-in card, `?a=pwdchange` and the two recovery forms - which share this * URL and have measures of their own - keep the plugin's behaviour. */ body.page-my-profile #wpmem_reg:has(.tcf-pf-sec) { width: 100%; } /* ---- a section: the words, then the controls ------------------------------- */ /* * THE SECTION IS TWO COLUMNS OF ONE THING EACH, and this is the change Jay asked * for. On a wide screen a section's heading, its explanation and anything the * church derived about the member sit in a rail to the LEFT of the fields * instead of stacked on top of them. * * What that fixes, in order of how much it was hurting: * * 1. The page used the width. 680 of 1280 became 1072 of 1280. * 2. A heading stopped floating. "In the church directory" used to sit above a * column it did not touch, its right edge 600px short of the band's; now the * hairline above it spans the whole composition and the heading labels the * block beside it, which is what containment on a flat design looks like * when §1.4 forbids shadows and the one card on the page is already spoken * for. * 3. The section's own words got somewhere to live. The intro used to be a * 56ch paragraph lying across the top of a 680px form; in the rail it is a * column of prose beside the controls it describes. * * WHY NOT CARD THE THREE SECTIONS INSTEAD. Because the privacy panel is a card, * and it is a card in order to say "this one decision is not like the others" * (UX_MY_PROFILE §4). Framing all three sections would leave that panel as a * card inside a card, or - if it took `--tcf-surface` on a `--tcf-surface` * section - invisible. The one meaningful frame on this page has to stay the * only one. * * TWO GRIDS AND NOT ONE. The fields keep their own grid inside `.tcf-pf-fields`, * because a three-column grid with the heading pinned to column 1 puts the THIRD * field group back into column 1 underneath it: grid auto-placement moves its * cursor forward and never back. profile-form.php emits the two wrappers. * * `align-items: start` so a short rail does not stretch beside a tall section. * * ONE OWNER PER GAP. `row-gap` is deliberately 0: the heading, the intro and the * groups carry their own top margins, so every vertical distance on this page is * a single number you can read in one place. It used to be `row-gap` PLUS a * margin, which is how 28 + 56 became an 84px dead band above every section rule * and how a section intro ended up 36px from the heading it belongs to. * * Grid item margins never collapse, so each value below is exact. * * 72 above the rule against 28 below it is what makes a rule read as belonging * to the section beneath it rather than floating between two - and 72 is the * section step (`--tcf-space-8`), where a row of fields is 28. */ body.page-my-profile .tcf-pf-sec { display: grid; grid-template-columns: minmax(0, var(--tcf-pf-rail)) minmax(0, var(--tcf-pf-fields)); column-gap: var(--tcf-space-8); row-gap: 0; justify-content: start; align-items: start; margin-top: var(--tcf-space-8); padding-top: var(--tcf-space-5); border-top: 1px solid var(--tcf-rule); } /* * THE TRACKS ARE BANDS, NOT FRACTIONS. `minmax(0, var(--tcf-field-measure-md))` * rather than `1fr`: a track is exactly as wide as the field it is drawn for, so * a paired row shares its edges instead of leaving each field floating in a * column 40px wider than itself. Measured before this rule existed, "First name" * was a 320px box adrift in a 360px column and nothing on the form lined up with * anything else. * * `justify-content: start`, so on a wide page the pair stays left rather than * spreading to fill the band. */ /* * `row-gap` HERE, AND A MARGIN ON THE GROUP EVERYWHERE ELSE, and the difference * is which box owns the gap. * * The outer grid keeps `row-gap: 0` because it mixes a heading, a paragraph and * blocks of fields, and a single gap between three different kinds of thing is * how 28 + 56 once became an 84px dead band. This grid contains ONLY field * groups, so `row-gap` is exactly the right owner: it is 28 between every pair of * rows and, unlike a margin on each group, IT IS NOT DRAWN ABOVE THE FIRST ONE. * * That last part is a bug this replaced, and it was visible: with 6px on the * first group and 28 on all the others, "First name" sat 22px higher than "Last * name" - the two halves of the very first row of the form out of line with each * other, which is precisely the fault the whole layout exists to remove. */ body.page-my-profile .tcf-pf-fields { display: grid; grid-template-columns: repeat(2, minmax(0, var(--tcf-field-measure-md))); column-gap: var(--tcf-space-6); row-gap: var(--tcf-space-5); justify-content: start; align-items: start; min-width: 0; /* * Beside the rail the fields start level with the heading, less an optical * nudge: a 15px label and a 28-30px Newsreader heading set their cap heights * different distances below their own line boxes, so two boxes with the same * top do not read as starting together. 4px is `--tcf-space-1`, judged at 1440 * rather than computed - the two faces have different cap ratios and the * heading is on a clamp, so there is no one number that is right at every * width. It is small enough that being a pixel out at 1280 costs nothing. */ padding-top: var(--tcf-space-1); } /* * The first section has the page's own lede above it and needs no rule of its * own. The class comes from PHP rather than from `:first-of-type`, which would * be asking "the first
in the fieldset" - and WP-Members is free to put a *
of its own in front of ours at any point. */ body.page-my-profile .tcf-pf-sec--first { margin-top: 0; padding-top: 0; border-top: 0; } /* The heading and the intro are in the rail now, so the only thing left that has to span both field columns is a group that says it does. */ body.page-my-profile .tcf-pf-group--wide { grid-column: 1 / -1; } /* * WHERE THE RAIL FOLDS, AND WHY 1199 AND NOT 1023. * * The composition is 1072 wide and the band caps its children at * `min(1280, 100vw - 2 * --tcf-gutter)`, with the gutter at 32px below 1280. So * the rail stops fitting at about 1136px of viewport. Folding it at 1023 - the * breakpoint every other split on this site uses - would leave 113px of window * in which the fields are squeezed out of their own measure, which is exactly * the fault HUB_POLISH F-1 found in `.tcf-hub-split` ("the split collapses at * 1023px, one pixel too late to save it"). 1199 leaves 64px of slack at the * first width that keeps the rail, which is enough to absorb a scrollbar. * * Folded, the rail is simply the block above the fields - which is the layout * this page had before, and it is the right one when there is no width to put * anything beside anything. */ @media (max-width: 1199px) { body.page-my-profile { --tcf-pf-measure: var(--tcf-pf-fields); } body.page-my-profile .tcf-pf-sec { grid-template-columns: minmax(0, 1fr); row-gap: 0; } /* Folded, there is prose directly above the fields again, so the gap goes back to the row step. The optical nudge was for standing beside a heading and has nothing to do here. */ body.page-my-profile .tcf-pf-fields { padding-top: var(--tcf-space-5); } } /* One column on a phone. The field measures are all `max-width`, so they stop binding on their own and every field becomes the width of the column. */ @media (max-width: 767px) { body.page-my-profile .tcf-pf-fields { grid-template-columns: minmax(0, 1fr); } } /* ---- section headings ----------------------------------------------------- */ /* * Real headings, not pseudo-elements: `content` is not read by every screen * reader, and these are

s a screen reader can navigate by. They are also * what names each section's `role="group"`, so the accessible name of "Phone" is * now "In the church directory" rather than the whole form's legend. * * `--tcf-text-card` (24 -> 30) rather than the 26px literal, and rather than * `--tcf-text-section` (28 -> 40): three 40px serif headings inside one form is a * page pretending to be three pages. * * WEIGHT 400, STATED. §1.2 forbids Newsreader at 500 and above - the variable * font stops at 400 and the browser fakes the rest - and Blocksy's heading * default is 600. This is the same failure the form's shipped with once * already. */ body.page-my-profile .tcf-pf-section { margin: 0; font-family: var(--tcf-font-serif); font-size: var(--tcf-text-card); font-weight: 400; line-height: var(--tcf-leading-card); /* `--tcf-tracking-heading`, not the -0.01em literal it replaces. Same value, but §1.2 sets tracking by rendered size and this clamp tops out at 30px, so the rule belongs to the token that owns the 24-39px band rather than being restated here where nothing connects it to the rule. */ letter-spacing: var(--tcf-tracking-heading); color: var(--tcf-ink); } /* 8px, so the intro belongs to the heading above it rather than sitting halfway between the heading and the fields. The lede measure still caps it, because folded below 1200 the rail is the full width of the form and a 680px line of 17px type is past the point where an eye finds the next line reliably. */ body.page-my-profile .tcf-pf-intro { margin: var(--tcf-space-2) 0 0; max-width: var(--tcf-measure-lede); font-family: var(--tcf-font-ui); font-size: var(--tcf-text-body); line-height: var(--tcf-leading-sm); color: var(--tcf-muted); } /* ---- the rail -------------------------------------------------------------- */ body.page-my-profile .tcf-pf-rail { min-width: 0; } /* * THE DERIVED LISTING NAME. * * It used to be a `.tcf-field-help` under Last name: 15.5px, `--tcf-muted`, the * seventh line on the form set exactly like the six lines of advice around it. * It is not advice. It is the only value on this page the church works out * rather than asks for, and it answers the question the directory section * exists to answer, so it opens that section instead of trailing a field two * rows above it. The sentence still names the field it comes from. * * 16px above it separates it from the paragraph without opening a gap the size * of the one between a section and the next. */ body.page-my-profile .tcf-pf-rail__note { margin: var(--tcf-space-4) 0 0; max-width: var(--tcf-measure-lede); font-family: var(--tcf-font-ui); font-size: var(--tcf-text-body-sm); line-height: var(--tcf-leading-sm); color: var(--tcf-muted); } /* The value itself in `--tcf-ink` at 600 - the same weight and colour as a field label, because that is what it is: the name of something, not a sentence about it. No size change; §1.2 sets emphasis by weight and colour on this site, and a third type size inside one paragraph would be the invented step §1.2 keeps catching. */ body.page-my-profile .tcf-pf-rail__value { font-weight: 600; color: var(--tcf-ink); } /* * One action, and only where the section is about the thing it does. * * `.tcf-arrow-link` is the site's own treatment (style.css), so nothing about * the link is drawn here - only where it sits. 16px, the same step as the note, * because both are things hanging off the section rather than parts of it. */ body.page-my-profile .tcf-pf-rail__action { margin: var(--tcf-space-4) 0 0; font-family: var(--tcf-font-ui); font-size: var(--tcf-text-body-sm); line-height: var(--tcf-leading-sm); } /* ---- a group, and the fields in it ---------------------------------------- */ /* The gap between rows is `.tcf-pf-fields`'s `row-gap` now, not a margin here. A margin on every group is drawn above the FIRST row as well, which is a gap between the fields and nothing at all. */ body.page-my-profile .tcf-pf-group { margin-top: 0; display: flex; flex-direction: column; min-width: 0; } /* * THE MEASURE IS ON THE FIELD, NOT ON THE INPUT, and that is the fix for the * loosest thing on the page. * * The bands themselves are already applied to the controls by member-forms.css, * which owns every WP-Members input on the site. What was missing is that a * field is a LABEL, an INPUT and a NOTE, and only the middle one was measured - * so "Which group you are part of, if any." was set to 56ch and ran 531px wide, * out of its own 320px column, underneath the Phone field in the next one. A * note wider than the control it explains is most of what makes this form read * as unconsidered. * * Capping the wrapper squares each field off: label, control and note share one * right edge, and each field reads as a unit. It also means the control needs no * `!important` measure of its own here - `width: 100%` of a capped parent cannot * exceed it, whatever Blocksy's inline `max-width: 100%` says - so the duplicate * ladder this file used to carry beside member-forms.css is gone. Two sets of * rules for one control, disagreeing, is how the 24px/17px checkbox happened. * * The bands, and why each field has the one it has (DESIGN_SYSTEM_FIELDS.md §3): * * sm 160 phone, apartment bounded, known shape - `(859) 555-0134` is 112px, * or unit, state, `Apt 12B` is 60px, `KY` is 19px, `40513-1234` is * ZIP code 93px. Four fields, one edge. * md 320 first, last, the default: a value a person types about * email, home themselves. 31 characters of email is 245px. * group, street, * city * * TWO BANDS ON THIS FORM NOW, NOT THREE, AND THE STREET IS `md`. * * §3.4 puts a street address in `lg` (384). Applied here it would be the only * field on the page whose right edge shared with nothing - which is the exact * ground on which Jay ruled "How to list us" down from `lg` to `md` on * 2026-08-09, on this same grid, hours before the street field existed. The * tracks are two `md` columns; a 384px field inside a 680px wide group is 384px * of nothing lining up. `1589 Wellesley Dr` is 137px of glyphs and the longest * street a member here will type is comfortably inside 320. * * The `lg` band is not gone from the site, it simply has no field on this form. * * "How to list us" itself is gone: the directory name is derived from the * member's last name (`tcf_directory_listing_name()`), so there is no control to * measure and its 320px rule went with it rather than being left behind as a * justification for a selector that matches nothing. * * The address is five inputs and no longer a textarea, so the `56ch` lede * measure has gone with it. */ body.page-my-profile .tcf-pf-field { min-width: 0; /* `ch` resolves against the ELEMENT'S OWN font, so the wrapper has to be set in the same face and size as the control for a `ch` measure to agree with it. Measured before this line existed: the address wrapper computed 56ch as 498.3px while its own textarea computed the same 56ch as 548.2px, because the wrapper was inheriting WP-Members' Arial from the plugin's stylesheet and the textarea was not. Two rules, one measure, two answers - and the smaller one silently won. */ font-family: var(--tcf-font-ui); font-size: var(--tcf-field-text); max-width: var(--tcf-field-measure-md); } /* The four bounded values. Everything else takes the `md` default above - including the street and the city, which are the two parts of an address with no natural upper bound. */ body.page-my-profile .tcf-pf-field--tcf_phone { max-width: var(--tcf-field-measure-sm); } body.page-my-profile .tcf-pf-field--tcf_address2 { max-width: var(--tcf-field-measure-sm); } body.page-my-profile .tcf-pf-field--tcf_state { max-width: var(--tcf-field-measure-sm); } body.page-my-profile .tcf-pf-field--tcf_zip { max-width: var(--tcf-field-measure-sm); } /* A switch is not a measured field: its label is the target and wants the row. */ body.page-my-profile .tcf-pf-field--switch { max-width: none; } /* * §1.2 has no form-label step, so this takes the nearest defined role: `ui`, * 15px Public Sans 500-600, which is what the handoff gives a control's own text. * The 13px it replaces was below both `meta` (14) and §1.2's 15px floor. * * SENTENCE CASE, and not the login card's 12.5px uppercase - a deliberate * divergence, reasoned in docs/reviews/UX_MY_PROFILE.md §3. Do not reconcile * these two by making this one shout: directory-fields.php relabels WP-Members' * fields to sentence case IN THE OPTION, on purpose, and `text-transform` here * would fake a register the data layer went to trouble to remove. * * Tracking is 0 because §1.2 sets tracking by rendered size and this is under * 24px. */ body.page-my-profile .tcf-pf-field > label { display: block; margin: 0 0 var(--tcf-space-2); font-family: var(--tcf-font-ui); font-size: var(--tcf-text-ui); font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--tcf-ink); } body.page-my-profile .tcf-pf-field .req { color: var(--tcf-accent); } /* * THE CONTROL ITSELF IS NOT STYLED HERE, AND THAT IS THE POINT. * * `css/member-forms.css` owns every WP-Members control on the site - the height, * the padding, the 16px type, the `--tcf-field-border` at 3.45:1, the textarea's * height fix, and the three measure bands, all against `form.form`, which is on * every form the plugin renders. This file used to restate all of it, one band * at a time, with `!important` on each. Every declaration was identical, so * nothing rendered differently and nothing said so - which is exactly the shape * of the 24px/17px checkbox that shipped when two files styled one tick and * alphabetical load order decided which won. * * The measures now live on `.tcf-pf-field` above, where they also bound the * label and the note. `width: 100%` inside a capped wrapper cannot exceed it, so * the `!important` those rules needed to beat Blocksy's inline `max-width: 100%` * is no longer needed here at all. * * If a control on this page ever needs to differ from every other control on the * site, that is the moment to write a rule here - and to say why. */ /* `--tcf-ink` on hover, not the `var(--tcf-ink-quiet, ...)` this replaces: `--tcf-ink-quiet` is not defined anywhere in :root and only ever resolved to its fallback. A phantom token that happens to work is a trap for the next person. */ body.page-my-profile .tcf-pf-field input:hover, body.page-my-profile .tcf-pf-field textarea:hover, body.page-my-profile .tcf-pf-field select:hover { border-color: var(--tcf-ink); } body.page-my-profile .tcf-pf-field input:focus-visible, body.page-my-profile .tcf-pf-field textarea:focus-visible, body.page-my-profile .tcf-pf-field select:focus-visible { outline: 2px solid var(--tcf-accent); outline-offset: 2px; border-color: var(--tcf-accent); } /* ---- a checkbox and the words beside it ------------------------------------ */ /* * WP-Members emits the