/* /who — who to go to for what. * * The `wp-` prefix is left over from the preview this was built from and is kept rather than * churned: it is unique to this page, nothing else matches it, and a rename would touch every * selector here and every class in who.js for no reader's benefit. */ /* Dimension hues, reusing the palette the certification tracker already uses for vendors and the DISC board for quadrants, so the app keeps one color vocabulary. */ .d-tech { --dim-bg:var(--ms-bg); --dim-ink:var(--ms-ink); --dim-line:var(--ms-line); } .d-client { --dim-bg:var(--green-bg); --dim-ink:var(--green-ink); --dim-line:var(--green-line); } .d-process { --dim-bg:var(--amber-bg); --dim-ink:var(--amber-ink); --dim-line:var(--amber-line); } .d-team { --dim-bg:var(--oth-bg); --dim-ink:var(--oth-ink); --dim-line:var(--oth-line); } /* ---- the top row: what is selected, and the way to change it ---- Two controls side by side above the columns. The page heading that used to sit here is gone: the masthead says "Who do I go to" two inches above, and repeating it pushed everything that does work below the fold. The selected box was inside the right-hand column, which made the page read as one long list with a banner on it rather than as a choice and its result. Stacks on a narrow screen, selection first, because knowing what you are looking at matters more than being able to change it. */ .wp-top{ display:grid; gap:1rem; grid-template-columns:1fr; align-items:stretch; margin:0 0 1.6rem; } @media (min-width:900px){ .wp-top{ grid-template-columns:1.35fr 1fr; gap:1.4rem; } } .wp-topsel{ margin:0 !important; display:flex; flex-direction:column; justify-content:center; } /* ---- search ---- space-between, not center. The two panels in the top row are rarely the same height, and a centred column put a band of empty panel under the input at most widths. Pushing the input to the bottom sits it on the same baseline as the selected box beside it and puts the explanation where an explanation belongs, above the thing it explains. */ .wp-search{ margin:0; display:flex; flex-direction:column; justify-content:space-between; gap:.6rem; padding:.85rem 1rem .9rem; border:1px solid var(--rule); border-radius:12px; background:var(--paper); } .wp-sasktop{ min-width:0; } .wp-slab{ display:block; font-size:.66rem; text-transform:uppercase; letter-spacing:.07em; font-weight:700; color:var(--muted); margin:0 0 .25rem; } .wp-search input{ width:100%; max-width:none; font:inherit; font-size:.95rem; padding:.65rem .85rem; border-radius:10px; border:1px solid var(--rule); background:var(--paper); color:var(--ink); } .wp-search input:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; } .wp-hint{ margin:0; font-size:.78rem; color:var(--muted); line-height:1.45; max-width:46ch; } .wp-grid{ display:grid; gap:1.6rem; grid-template-columns:1fr; align-items:start; } @media (min-width:900px){ .wp-grid{ grid-template-columns:16rem 1fr; gap:2.2rem; } } /* ---- collapsing the filter column ---- Collapsed leaves a rail rather than nothing: a control that removes itself cannot be got back, and an unlabelled chevron floating over the tiles would be worse than the column. Below 900px the grid is already one column, so there is nothing to collapse and the toggle hides itself. */ /* ---- the bar above the columns ---- One row holding the filter toggle and a count of what is on screen. It exists so the toggle has somewhere to live that is not the column it hides, and so the left edge of the content lines up whether the filters are shown or not. */ /* The bar shows at EVERY width, because it now carries the way back to the directory and that must not be desktop-only. Only the filters toggle inside it is desktop-only, since below 900px the grid is a single column with no rail to collapse. */ .wp-bar{ display:flex; align-items:center; gap:.9rem; margin:0 0 .7rem; flex-wrap:wrap; } .wp-barcount{ margin:0; font-size:.76rem; color:var(--muted); } .wp-showdir{ font:inherit; font-size:.76rem; font-weight:600; cursor:pointer; padding:.3rem .7rem; border-radius:8px; border:1px solid var(--blue); background:transparent; color:var(--blue); } .wp-showdir:hover{ background:var(--blue); color:var(--on-blue); } :root[data-theme="dark"] .wp-showdir{ border-color:var(--bluesub); color:var(--bluesub); } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .wp-showdir{ border-color:var(--bluesub); color:var(--bluesub); } } .wp-catstoggle{ display:none; } @media (min-width:900px){ .wp-catstoggle{ display:inline-flex; align-items:center; gap:.4rem; margin:0; padding:.3rem .6rem; font:inherit; font-size:.76rem; font-weight:600; color:var(--muted); background:var(--paper); border:1px solid var(--rule); border-radius:8px; cursor:pointer; text-align:left; } .wp-catstoggle:hover{ color:var(--blue); border-color:var(--blue); } .wp-catschev{ font-size:.6rem; line-height:1; transition:transform .15s ease; } /* Points right when the filters are away, which is the direction they would come back from. Keyed on aria-expanded, which the toggle already sets, rather than on a :has() reaching across siblings: the state is on the button, so the selector should be too. */ .wp-catstoggle[aria-expanded="false"] .wp-catschev{ transform:rotate(180deg); } /* Collapsed means GONE, not narrowed to a stub. The old rule kept a 2.6rem column holding a lone chevron, so the page read as a broken three-column layout rather than a two-column one with the filters put away. The control is in the bar above and stays reachable. */ .wp-grid.cats-off{ grid-template-columns:1fr; } .wp-grid.cats-off .wp-cats{ display:none; } /* The column came back as width, so spend it on more tiles rather than wider ones. */ .wp-grid.cats-off .wp-tiles{ grid-template-columns:repeat(4, 1fr); } } @media (min-width:1500px){ .wp-grid.cats-off .wp-tiles{ grid-template-columns:repeat(5, 1fr); } } /* ---- the rail ---- A full-width tinted band per section, not a colored left rule. Alex, 2026-09-14: "remove funky looking design like the left colored border". He is right that a 3px bar floating beside small text is decoration pretending to be structure. A band is what a section divider actually looks like, and it is far more visible. SOLID, not tinted, and that was not the first attempt. A tinted band using --dim-bg measured 1.00 to 1.02 against the page canvas in light mode, which is to say invisible: the pale tints and the cream canvas sit at the same luminance. That IS the "it is a lot of cream" complaint, so repeating it in the fix would have been absurd. Filled with the dimension ink and reversed out in paper, each section reads at a glance and the four are unmistakably different. */ .wp-cats h2{ display:block; margin:1.5rem 0 .45rem; padding:.4rem .65rem; font-size:.73rem; text-transform:uppercase; letter-spacing:.07em; font-weight:700; color:var(--paper); background:var(--dim-ink); border-radius:8px; } .wp-cats h2:first-child{ margin-top:0; } .wp-cats ul{ list-style:none; margin:0; padding:0; } .wp-cats li{ margin:0 0 .12rem; } .wp-cat{ display:flex; width:100%; align-items:center; gap:.5rem; text-align:left; font:inherit; font-size:.86rem; color:var(--ink); background:none; cursor:pointer; border:1px solid transparent; border-radius:7px; padding:.33rem .5rem .33rem .55rem; } .wp-cat:hover{ background:var(--dim-bg); } .wp-cat.on{ background:var(--dim-bg); border-color:var(--dim-line); font-weight:700; color:var(--dim-ink); } .wp-cn{ min-width:0; } /* The count is claims only. A dash where a category has none is the honest signal that it has no answer yet, and it reads as absence rather than as zero people existing. */ .wp-n{ margin-left:auto; font-size:.72rem; font-weight:700; color:var(--dim-ink); background:var(--dim-bg); border:1px solid var(--dim-line); border-radius:999px; min-width:1.5rem; text-align:center; padding:0 .3rem; font-variant-numeric:tabular-nums; } .wp-n.none{ color:var(--muted); background:transparent; border-color:var(--rule); font-weight:400; } /* ---- the heading you land on ---- */ .wp-cathead{ margin:0 0 1.3rem; padding:.9rem 1rem; border-radius:12px; background:var(--dim-bg); border:1px solid var(--dim-line); } .wp-dim{ display:block; font-size:.66rem; text-transform:uppercase; letter-spacing:.07em; font-weight:700; color:var(--dim-ink); opacity:.85; } .wp-cathead h2{ margin:.1rem 0 0; font-size:1.45rem; color:var(--dim-ink); } .wp-cathead p{ margin:.35rem 0 0; font-size:.86rem; color:var(--ink); max-width:70ch; } /* ---- relationship sections ---- A claim gets the brand navy and a solid rule. Certifications get neither, and sit behind a disclosure. That contrast is the page's main argument, so it is the strongest on the page. */ .wp-rel{ margin:0 0 1.5rem; } .wp-rel h3{ display:flex; align-items:baseline; gap:.65rem; flex-wrap:wrap; margin:0 0 .6rem; padding-bottom:.35rem; border-bottom:2px solid var(--rule); font-size:.8rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink); font-weight:700; } .wp-rel.claim h3{ color:var(--blue); border-bottom-color:var(--blue); } :root[data-theme="dark"] .wp-rel.claim h3{ color:var(--bluesub); border-bottom-color:var(--bluesub); } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .wp-rel.claim h3{ color:var(--bluesub); border-bottom-color:var(--bluesub); } } .wp-rel h3 span{ text-transform:none; letter-spacing:0; font-weight:400; font-size:.79rem; color:var(--muted); } .wp-people, .wp-catlist{ list-style:none; margin:0; padding:0; display:grid; gap:.45rem; } @media (min-width:680px){ .wp-people{ grid-template-columns:1fr 1fr; } } .wp-catlist{ display:flex; flex-wrap:wrap; gap:.4rem; } .wp-person{ display:flex; width:100%; align-items:flex-start; gap:.65rem; text-align:left; font:inherit; background:var(--paper); border:1px solid var(--rule); border-radius:10px; padding:.6rem .75rem; cursor:pointer; color:var(--ink); } .wp-person:hover{ border-color:var(--blue); background:var(--hover); } /* No left bar here either. The navy section heading above these rows already says they are a claim, so the bar was saying it twice in the shape Alex asked to remove. */ .wp-av{ flex:0 0 auto; width:32px; height:32px; border-radius:50%; background:var(--blue); color:var(--on-blue); display:flex; align-items:center; justify-content:center; font-size:.72rem; font-weight:700; } .wp-pn{ min-width:0; } .wp-pn b{ display:block; font-size:.9rem; } .wp-pn em{ display:block; font-style:normal; font-size:.75rem; color:var(--blue); font-weight:600; margin-top:.05rem; } :root[data-theme="dark"] .wp-pn em{ color:var(--bluesub); } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .wp-pn em{ color:var(--bluesub); } } /* A team standing in for a missing job title is muted and plain, so it never reads as one. */ .wp-pn em.team{ color:var(--muted); font-weight:400; } .wp-pn span{ display:block; font-size:.75rem; color:var(--muted); margin-top:.12rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .wp-pn span i{ font-style:normal; font-variant-numeric:tabular-nums; opacity:.8; } /* ---- the honest empties ---- */ .wp-noclaim{ margin:0 0 1.2rem; padding:.7rem .9rem; border-radius:10px; font-size:.85rem; background:var(--note-bg); color:var(--note-ink); border:1px solid var(--note-line); } .wp-empty{ font-size:.85rem; color:var(--muted); } .wp-gap{ margin:0 0 1.2rem; padding:.7rem .9rem; border-radius:10px; font-size:.83rem; background:var(--amber-bg); color:var(--amber-ink); border:1px solid var(--amber-line); } /* ---- certifications, below the line ---- Deliberately the quietest thing on the page. It was the loudest, which is what made the directory look like it had twenty answers when it had two. */ .wp-cert{ border-top:1px solid var(--rule); padding-top:.8rem; margin-top:1.6rem; } .wp-cert > summary{ cursor:pointer; font-size:.78rem; color:var(--muted); font-weight:600; } .wp-cert > summary:hover{ color:var(--ink); } .wp-certnote{ margin:.5rem 0 .7rem; font-size:.78rem; color:var(--muted); max-width:66ch; } .wp-cert[open] > summary{ margin-bottom:.2rem; } /* ---- the card ---- */ /* Large on purpose. Alex, 2026-09-15: "I want that image to be large enough for people to see." Half the card is getting to know a colleague, and a 52px disc was a favicon of a person. */ /* SQUARE, not a circle. A circle crops a face to a disc and throws away the corners of a photo somebody chose; a rounded square keeps the whole frame and reads as a portrait rather than an avatar. The radius is small enough to be a square with the edge taken off, not a squircle. */ /* A FACE IS THE POINT OF THE CARD, so it gets the room. Alex: "this is an important part of connecting people with other people so that they can see who they are working with." 128, and the header has space for it because the three lines of name, department and title sit beside it rather than under it. Backed by a 240px source, so it is sharp on a 2x display rather than a 96px file stretched over a bigger box. */ .card-av{ flex:0 0 auto; width:128px; height:128px; border-radius:14px; background:var(--blue); color:var(--on-blue); display:flex; align-items:center; justify-content:center; font-size:1.8rem; font-weight:700; align-self:center; overflow:hidden; } /* Name, department, title: one rhythm, and MUTUALLY centred against the photo. align-items:center on the row does the whole job -- whichever of the two is taller, the other centres against it, so a person with a long wrapped title and a person with none both look deliberate. The photo used to be pinned with align-self:flex-start, which meant the three lines hung off the top of it. */ .sheet-head{ align-items:center; } .card-team, .card-title, .card-notitle{ display:block; } /* The same gap between all three, rather than none then .1rem. Three lines at one spacing read as one block; three at two spacings read as a name with an afterthought. */ .sheet-head .id > *{ margin:0; } /* Two levels, because the markup has two: the name is an h3 and the department and title are spans inside the p beneath it. One rule for each keeps all three gaps identical without restructuring markup the DISC board also renders. */ .sheet-head .id > * + *{ margin-top:.22rem; } #card-role > * + *{ margin-top:.22rem; } .card-team{ font-size:.78rem; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.05em; } .card-title{ font-size:.95rem; color:var(--ink); } .card-notitle{ font-size:.78rem; color:var(--muted); font-style:italic; } .card-note{ margin:0 0 1rem; font-size:.86rem; } .card-note.empty{ color:var(--muted); font-style:italic; border:1px dashed var(--rule); border-radius:8px; padding:.55rem .7rem; } .card-row{ display:grid; grid-template-columns:1fr; gap:.15rem; border-top:1px solid var(--rule); padding:.75rem 0; } @media (min-width:520px){ .card-row{ grid-template-columns:10rem 1fr; gap:1rem; align-items:baseline; } } .card-k{ font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--blue); font-weight:700; } :root[data-theme="dark"] .card-k{ color:var(--bluesub); } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .card-k{ color:var(--bluesub); } } .card-v{ min-width:0; } .card-chip{ display:inline-block; font-size:.79rem; padding:.18rem .55rem; margin:0 .25rem .28rem 0; border-radius:999px; border:1px solid var(--ms-line); background:var(--ms-bg); color:var(--ms-ink); font-weight:600; } .card-certs{ list-style:none; margin:0; padding:0; font-size:.82rem; } .card-certs li{ padding:.1rem 0; } .card-certs i{ font-style:normal; color:var(--muted); font-variant-numeric:tabular-nums; } .card-prov{ display:block; font-size:.73rem; color:var(--muted); margin-top:.25rem; } /* ---- overview: everyone, four to a row ---- The landing view. Four across on a wide window, stepping down rather than shrinking, because a tile narrower than about 190px cannot hold a name and a job title on separate lines. */ .wp-toplist{ list-style:none; margin:0 0 .3rem; padding:0; } .wp-overview{ font-weight:700; } .wp-overview .wp-n{ color:var(--on-blue); background:var(--blue); border-color:var(--blue); } .wp-overview.on{ background:var(--hover); border-color:var(--blue); color:var(--blue); } :root[data-theme="dark"] .wp-overview.on{ color:var(--bluesub); border-color:var(--bluesub); } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .wp-overview.on{ color:var(--bluesub); border-color:var(--bluesub); } } .wp-tiles{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem; grid-template-columns:1fr; } @media (min-width:520px){ .wp-tiles{ grid-template-columns:repeat(2, 1fr); } } @media (min-width:860px){ .wp-tiles{ grid-template-columns:repeat(3, 1fr); } } @media (min-width:1180px){ .wp-tiles{ grid-template-columns:repeat(4, 1fr); } } .wp-tile{ display:flex; flex-direction:column; align-items:flex-start; gap:.1rem; width:100%; height:100%; text-align:left; font:inherit; color:var(--ink); background:var(--paper); border:1px solid var(--rule); border-radius:12px; padding:.75rem .8rem; cursor:pointer; } .wp-tile:hover{ border-color:var(--blue); background:var(--hover); } /* No bar on vouched tiles. The tile already says it in words: chips naming what somebody put them down for, or "Nobody has listed them for anything" in its place. A colored edge repeating that was noise, and it was the specific thing that read as funky. */ /* Bigger on the tile too: the overview is the "get to know people" half of the page, and a 32px circle carries no face at all. */ /* Photo and identity on one row. min-width:0 on the text side so a long job title wraps instead of pushing the photo out of the tile. */ .wp-thead{ display:flex; align-items:center; gap:.7rem; width:100%; margin-bottom:.5rem; } .wp-tid{ min-width:0; } /* Square here too. Two surfaces showing the same colleague as a disc on one and a portrait on the other is the kind of small inconsistency that makes an app feel unfinished. */ .wp-tile .wp-av{ width:92px; height:92px; font-size:1.6rem; margin-bottom:0; border-radius:10px; } /* Three lines beside the photo now, so they are tightened to sit against a 92px circle without the row growing taller than the face. */ .wp-tid b{ line-height:1.25; } .wp-tid em{ display:block; line-height:1.3; } .wp-tid em.team{ font-size:.7rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); font-weight:700; margin-top:.15rem; } .wp-tid em:not(.team){ font-size:.76rem; margin-top:.05rem; } .wp-tile b{ font-size:.92rem; line-height:1.2; } .wp-tile em{ display:block; font-style:normal; font-size:.74rem; color:var(--blue); font-weight:600; margin-top:.1rem; } :root[data-theme="dark"] .wp-tile em{ color:var(--bluesub); } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .wp-tile em{ color:var(--bluesub); } } .wp-tile em.team{ color:var(--muted); font-weight:400; } .wp-tchips{ display:flex; flex-wrap:wrap; gap:.22rem; margin-top:.45rem; } .wp-tchip{ font-size:.68rem; padding:.1rem .4rem; border-radius:999px; background:var(--ms-bg); color:var(--ms-ink); border:1px solid var(--ms-line); font-weight:600; } .wp-tmore{ font-size:.68rem; color:var(--muted); align-self:center; } /* Said plainly rather than left blank, because an empty tile reads as a rendering fault and this is the page's most important gap. */ .wp-tnone{ display:block; margin-top:.45rem; font-size:.7rem; color:var(--muted); font-style:italic; } .wp-tcerts{ display:block; margin-top:auto; padding-top:.45rem; font-size:.68rem; color:var(--muted); font-variant-numeric:tabular-nums; } /* ---- profile photo ---- The initials sit underneath the image rather than being replaced by it, so a photo that fails to load (no photo on file, no SharePoint session, a changed endpoint) reveals the initials instead of a broken image icon. onerror removes the img and the letters are already there. */ .wp-av.has-photo{ position:relative; overflow:hidden; padding:0; } .wp-av.has-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; } .wp-av.has-photo i{ font-style:normal; } /* ---- the assistant's reply ---- Sits above the columns, above the records it was built from, so a name and the evidence for it are on screen together. Deliberately not styled as a chat bubble: it is one answer to one question, not a conversation, and a transcript would invite people to argue with it rather than check it. */ .wp-answer{ margin:0 0 1.4rem; padding:.9rem 1.1rem; border-radius:12px; background:var(--paper); border:1px solid var(--blue); } .wp-answer.off{ border-color:var(--rule); } .wp-answer.thinking{ border-style:dashed; border-color:var(--rule); } .wp-alab{ margin:0 0 .35rem; font-size:.66rem; text-transform:uppercase; letter-spacing:.07em; font-weight:700; color:var(--blue); } :root[data-theme="dark"] .wp-alab{ color:var(--bluesub); } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .wp-alab{ color:var(--bluesub); } } .wp-answer.off .wp-alab{ color:var(--muted); } .wp-atext{ margin:0; font-size:.92rem; line-height:1.55; max-width:78ch; } .wp-athink{ margin:0; font-size:.85rem; color:var(--muted); } .wp-anames{ margin:.7rem 0 0; font-size:.8rem; color:var(--muted); } /* A name in the answer opens that person's card: the working has to be inspectable. */ .wp-aname{ font:inherit; font-size:.8rem; font-weight:600; cursor:pointer; background:var(--hover); border:1px solid var(--rule); border-radius:999px; padding:.1rem .5rem; color:var(--ink); margin:0 .1rem; } .wp-aname:hover{ border-color:var(--blue); } /* The asterisk is load-bearing: it marks a record nobody has confirmed, which is most of them while the directory is seeded from ticket history. */ .wp-anames i{ font-style:normal; color:var(--amber-ink); font-weight:700; margin-left:.1rem; } .wp-afoot{ margin:.5rem 0 0; font-size:.75rem; color:var(--muted); } /* ---- the card, v2 ---- Order carries the argument: their own words, then what they work on, then what a lead made them accountable for, then the exams. Certifications used to be first and fully unfolded, which made a card look like eight answers when it held none. */ .card-known{ margin:0 0 1rem; } .card-klab{ margin:0 0 .35rem; font-size:.66rem; text-transform:uppercase; letter-spacing:.07em; font-weight:700; color:var(--blue); } :root[data-theme="dark"] .card-klab{ color:var(--bluesub); } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .card-klab{ color:var(--bluesub); } } .card-known ul{ margin:0; padding:0 0 0 1.1rem; } .card-known li{ font-size:.95rem; line-height:1.5; margin:0 0 .2rem; } .card-about{ margin:0 0 1.1rem; font-size:.88rem; line-height:1.55; color:var(--ink); max-width:74ch; } /* A plain chip: no navy fill. A technology somebody listed is a fact about them, not a claim a lead has vouched for, and the two must not look identical. */ .card-chip.plain{ background:var(--tint); color:var(--ink); border:1px solid var(--rule); } .card-certwrap{ border-top:1px solid var(--rule); margin-top:1.2rem; padding-top:.7rem; } .card-certwrap > summary{ cursor:pointer; font-size:.78rem; color:var(--muted); font-weight:600; } .card-certwrap > summary:hover{ color:var(--ink); } .card-certwrap .card-row{ border:0; padding-top:.6rem; } .card-src{ margin:1.1rem 0 0; padding-top:.6rem; border-top:1px solid var(--rule); font-size:.74rem; color:var(--muted); } .card-src.derived{ color:var(--amber-ink); } /* ---- responsibilities ---- One block with a heading, sub-labelled by verb, and the provenance said once at the bottom. It was three sibling rows each repeating "A lead put them here. Confirmed 2026-09-14.", which is the same sentence three times and trains the eye to skip the line that matters. */ .card-respwrap{ margin:1.2rem 0 0; padding-top:.9rem; border-top:1px solid var(--rule); } .card-resp{ display:grid; grid-template-columns:9.5rem 1fr; gap:.6rem; align-items:baseline; margin:0 0 .5rem; } @media (max-width:560px){ .card-resp{ grid-template-columns:1fr; gap:.2rem; } } .card-resp .card-k{ font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; font-weight:700; color:var(--muted); } .card-resp .card-v{ display:flex; flex-wrap:wrap; gap:.3rem; } .card-prov.block{ margin:.6rem 0 0; font-size:.74rem; color:var(--muted); } /* ---- what somebody works on ---- Label above, chips across the full width. The shared .card-row gives its label a 10rem gutter, which suits a certification list of long single lines and starves a row of chips: four client names wrapped three deep against an empty third of the card. Client names are both the longest strings here and the ones people scan for. */ .card-smewrap{ border-top:1px solid var(--rule); margin-top:1.1rem; padding-top:.9rem; } .card-sme + .card-sme{ margin-top:.8rem; } .card-smek{ margin:0 0 .35rem; font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; font-weight:700; color:var(--muted); } .card-smev{ display:flex; flex-wrap:wrap; gap:.3rem; } /* ---- who the answer came from ---- People, not tokens. The question is "who do I go to" and the answer to that is a face and a team, so this reuses the tile's identity block rather than inventing a third one. */ .wp-astrip{ list-style:none; margin:.8rem 0 0; padding:0; display:grid; gap:.4rem; grid-template-columns:1fr; } @media (min-width:640px){ .wp-astrip{ grid-template-columns:1fr 1fr; } } @media (min-width:1080px){ .wp-astrip{ grid-template-columns:1fr 1fr 1fr; } } .wp-aperson{ display:flex; width:100%; align-items:center; gap:.6rem; text-align:left; font:inherit; background:var(--paper); border:1px solid var(--rule); border-radius:10px; padding:.45rem .55rem; cursor:pointer; color:var(--ink); } .wp-aperson:hover{ border-color:var(--blue); background:var(--hover); } .wp-aav{ width:46px; height:46px; font-size:.85rem; border-radius:8px; } .wp-apn{ min-width:0; } .wp-apn b{ display:block; font-size:.86rem; line-height:1.25; } .wp-apn em{ display:block; font-style:normal; line-height:1.3; } .wp-apn em.team{ font-size:.66rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); font-weight:700; margin-top:.1rem; } .wp-apn em:not(.team){ font-size:.73rem; color:var(--blue); font-weight:600; } :root[data-theme="dark"] .wp-apn em:not(.team){ color:var(--bluesub); } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .wp-apn em:not(.team){ color:var(--bluesub); } } /* Load-bearing: the difference between a colleague vouching and a ticket count implying. */ .wp-apn b i{ font-style:normal; color:var(--amber-ink); font-weight:700; margin-left:.15rem; } /* The reason sits under the person it belongs to, not in a paragraph above a row of faces. That separation was the confusion Alex reported: two different claims rendered as one row. */ .wp-awhy{ display:block; font-size:.76rem; color:var(--ink); line-height:1.4; margin-top:.25rem; } .wp-aperson{ align-items:flex-start; } .wp-anote{ margin:.7rem 0 0; font-size:.82rem; color:var(--ink); } /* The working, not the conclusion. Quiet on purpose, and clickable so it can be checked. */ .wp-aalso{ margin:.7rem 0 0; font-size:.76rem; color:var(--muted); } .wp-aname{ font:inherit; font-size:.76rem; cursor:pointer; background:none; border:0; padding:0; color:var(--muted); text-decoration:underline; text-underline-offset:2px; } .wp-aname:hover{ color:var(--blue); } /* ---- the card, grown ---- 560px was sized for the DISC sheet, which is a chart and a paragraph. This one carries three lines somebody wrote about themselves, and at 560 each of them wrapped onto two -- a sentence that wraps mid-clause reads as two half-thoughts. 760 puts almost all of them on one line and gives the photograph room to be a face rather than a stamp. Only /who's card grows; the DISC sheet keeps the width it was designed at. */ /* 960, and the text capped to go with it. Alex, 2026-09-18: "is it worth making the card a bit wider to bring more content up to single lines reducing vertical spend on screen?" Measured on a 30 entry record rather than guessed. 760 to 960 takes the authority section from 589px to 507 and the whole card from 1349 to 1266, so it is worth about six per cent. Going further is not: 1160 only reaches 1205, because the long role names still take a line each whatever the width, and the returns fall off fast. The catch is that width alone makes the card WORSE. The prose was already running 87 characters to the line at 760, which is past comfortable, and 960 would take it to 113. So the text blocks are capped at 72ch and only the chip rows spend the new width. A capped measure inside a wider panel is ordinary typography and reads better than either half of the change alone. */ /* Back to 860. Alex: "maybe bring the card width back in a bit if possible." It is possible now, and it costs nothing, which was not true an hour ago. The width was pushed to 960 to stop the authority chips wrapping; one line per area does that outright instead, so the section is 432px at every width between 760 and 960 and the only thing width still buys is how many chips are visible before the count. Measured: 12 at 860 and 12 at 960, so the last 100px was buying nothing at all. Below 860 it starts to cost, 11 at 820 and 9 at 760. */ #card.sheet{ max-width:860px; } /* THE CAP IS FOR PROSE, NOT FOR THE NOTES UNDER IT. Alex, 2026-09-21: "in the enjoys most, in the authority and access, and at the very bottom of the pop out we have descriptive text that cascades to two lines ... those three areas are all two lines where they could fit on one." All three were caught by the 72ch cap added for readability, and at .74rem 72ch is only about 430px, so a sentence that would sit comfortably on one line at the card's full width was folded in half. The cap belongs on the paragraphs somebody reads, and these are one line of metadata under a section, so they take the width they are given. */ #card .card-known li, #card .card-enjoys li, #card .card-about{ max-width:72ch; } /* And explicitly NOT the notes, which sit under a section rather than being read as a paragraph. */ #card .card-src, #card .card-prov, #card .card-respnote, #card .card-enjoysnote{ max-width:none; } /* 144 on the card, which is where somebody is actually looking at a colleague. Alex: "this is an important part of connecting people with other people so that they can see who they are working with." The header is 743px wide and the three lines of identity sit beside the photograph rather than under it, so the room is there. Backed by the 240px rendition the API now asks Graph for, so this is a bigger photograph and not a bigger box around the same pixels. */ #card .card-av{ width:144px; height:144px; border-radius:16px; font-size:2.5rem; } /* ---- four layers, and each has to be visible as one ---- * * Alex, 2026-09-16: "card layer is one, the section layer is two, the item layer is three, and * where there are a lot of items maybe a see more creating a fourth." * * The first attempt failed for a reason worth naming: tan sections on a white card is a two-value * palette doing three jobs, so nothing read as contained by anything. The ground and the sections * are now INVERTED -- the card body is the tan canvas and each section is white on top of it -- * which is the ordinary way a surface says "I am on top", and it costs no new color. * * 1 the card white head, tan body, a shadow against the page * 2 the section white block on the tan body, its own heading bar * 3 the item a chip on the white block * 4 the overflow hidden until asked for */ #card .sheet-body{ background:var(--canvas); } #card .card-smewrap, #card .card-respwrap, #card .card-certwrap, #card .card-known{ border:1px solid var(--rule); border-radius:12px; background:var(--paper); padding:0 1rem .9rem; margin:0 0 .8rem; overflow:hidden; } /* LAYER TWO'S NAME. A small uppercase line floating inside a block is not a heading, it is a label that happens to be first. A filled bar spanning the block's width is one, and it also draws the top edge so the block reads as contained. */ #card .card-smek, #card .card-klab, #card .card-respwrap > .card-klab, #card .card-certwrap > summary{ display:flex; align-items:center; gap:.4rem; margin:0 -1rem .7rem; padding:.45rem 1rem; background:var(--tint); border-bottom:1px solid var(--rule); font-size:.7rem; text-transform:uppercase; letter-spacing:.07em; font-weight:700; color:var(--muted); } /* The count beside a section name, so the size of a list is legible before it is read. */ #card .card-smek i{ font-style:normal; font-weight:700; opacity:.75; font-variant-numeric:tabular-nums; } #card .card-known ul{ padding-left:1.1rem; } #card .card-sme + .card-sme{ margin-top:.9rem; } #card .card-respwrap .card-resp:first-of-type{ margin-top:0; } /* The certifications half of the same leftover, removed for the same reason: an open section's header had a bottom margin the rebuilt rules do not give it, so its body started 11px below a header the other three sit flush against. */ #card .card-certwrap{ padding-bottom:0; } #card .card-certwrap > summary{ cursor:pointer; } #card .card-src{ margin:0; padding:.7rem 0 0; border:0; } /* LAYER FOUR. Quiet, counted, and it removes itself once used -- a control that stays after it has done its job is a control somebody clicks twice. */ .card-showmore{ font:inherit; font-size:.72rem; font-weight:600; cursor:pointer; padding:.2rem .55rem; border-radius:999px; border:1px dashed var(--rule); background:transparent; color:var(--muted); } .card-showmore:hover{ border-color:var(--blue); color:var(--blue); border-style:solid; } .card-more{ display:contents; } /* The chip count: the evidence for the rollup, so it is legible rather than decorative. */ #card .card-chip i{ font-style:normal; font-weight:700; margin-left:.35rem; padding:0 .3rem; border-radius:999px; background:var(--blue); color:var(--on-blue); font-size:.7rem; font-variant-numeric:tabular-nums; } @media (max-width:820px){ #card .card-av{ width:104px; height:104px; font-size:2rem; } } /* ---- the ranked answer ---- Equal heights, because three tiles of three different depths read as three different KINDS of result rather than as a first, second and third. The grid rows already stretch; what was uneven was the content, so the reason line grows and the tile does not. */ .wp-astrip{ align-items:stretch; } .wp-astrip > li{ display:flex; } .wp-aperson{ height:100%; position:relative; padding-left:2.6rem; } /* The rank, said rather than implied. A grid that wraps cannot convey an order by position. */ .wp-arank{ position:absolute; left:.6rem; top:.6rem; width:1.4rem; height:1.4rem; border-radius:50%; background:var(--blue); color:var(--on-blue); display:flex; align-items:center; justify-content:center; font-size:.7rem; font-weight:700; font-variant-numeric:tabular-nums; } :root[data-theme="dark"] .wp-arank{ background:var(--bluesub); } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .wp-arank{ background:var(--bluesub); } } .wp-apn{ display:flex; flex-direction:column; } .wp-awhy{ margin-top:.3rem; } /* MY TEAM, THEN EVERYBODY ELSE. A heading over each half of the strip, quiet enough that it groups the results without competing with them for the eye. */ /* A TEAM ANSWER. No avatar, because a team has no face. The headcount is drawn rather than left to the prose, because a confident summary of fifteen people can be built from four records and the reader cannot tell unless the page says so. */ /* Overrides .wp-about's two-column grid. That column exists to stand prose beside a 120px photograph, and a team has no face to put there, so the head bands across the top instead and the prose runs beneath it. Capped at 74ch or the line length on a 1560px page is unreadable. */ /* .wp-about.wp-team, not .wp-team: these rules sit EARLIER in the sheet than .wp-about, so at equal specificity .wp-about's `display:grid` wins on source order and the override silently does nothing. Measured, not guessed -- the head was still sharing a row with the prose. */ .wp-about.wp-team{ display:block; border:1px solid var(--rule); border-radius:12px; overflow:hidden; background:var(--paper); } .wp-team .wp-aboutbody{ padding:.85rem; max-width:74ch; } .wp-teamhead{ padding:.7rem .85rem; border-bottom:1px solid var(--rule); background:var(--hover); } .wp-teamhead b{ display:block; font-size:1rem; line-height:1.25; } .wp-teamhead span{ display:block; margin-top:.15rem; font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); font-weight:700; } /* THE ROSTER SITS BESIDE THE PROSE, not under it. Alex, 2026-09-21: the members were listed at the foot of the left column while the right half of the card was empty, and a name in a list is not how somebody recognises a colleague they have only met on a call. Prose is capped so the line length stays readable and the roster takes the rest. Below 760 the two stack, roster last, because on a phone the answer should come before the register. */ .wp-teambody{ display:grid; grid-template-columns:1fr; gap:1rem; padding:.85rem; } /* 1150, and it went 760 to 880 to here as each was measured. Below this both columns end up too narrow to be worth having: at 880 the prose measured sixty-three characters a line while the roster fell to two tiles a row and ran 1124px deep against 244px of text, which reads as broken rather than as a layout. Stacked, the roster gets the full width and lays out seven or more a row in three rows. Measured at 375, 880, 1024, 1150, 1280 and 1500. */ @media (min-width:1150px){ /* THE GAP WAS BETWEEN THE TEXT AND THE ROSTER, not after it. The prose column was 1fr while the prose itself is capped for readability, so the surplus opened up inside the left column and pushed the roster to the far edge. Alex: "allow the right section to come over closer to the text border so there is not wasted space and it looks funny." Now the prose column is sized to its own cap and the ROSTER takes what is left, so the surplus turns into more tiles a row instead of empty space. */ /* 60ch, not 68: at 68 the prose took so much of a 1024 card that the roster fell to two tiles a row and ran eight rows deep, far taller than the text beside it. 60ch is still a comfortable measure and it leaves the roster enough to lay out three or more. Measured at 880, 1024, 1280 and 1500. */ /* Half each. Alex: "the content and people columns should take about half that section each." The prose keeps its own cap inside its half so the measure stays readable on a wide screen. */ .wp-teambody{ grid-template-columns:1fr 1fr; gap:1.5rem; align-items:start; } } /* The cap matters most when the two STACK, because then nothing else constrains the measure and the prose ran to 136 characters a line at 1149. In two-column mode the grid track caps it at 60ch before this ever applies. */ .wp-about.wp-team .wp-aboutbody{ padding:0; max-width:68ch; } .wp-tside{ min-width:0; } @media (min-width:1150px){ .wp-tside{ border-left:1px solid var(--rule); padding-left:1.1rem; } } .wp-tcount{ margin:0 0 .5rem; font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; font-weight:700; color:var(--muted); } /* Photograph with the name under it, in a box. Three across in the side column, and the tile is deliberately smaller than the directory tile because this is a roster beside an answer rather than the answer itself. */ /* --tcols is set in who.js from the headcount, so nobody is left alone on the last row. Narrow screens override it, because four 84px tiles do not fit on a phone whatever the arithmetic says. */ .wp-tmembers{ display:grid; grid-template-columns:repeat(var(--tcols, 4), minmax(0, 1fr)); gap:.55rem; } @media (max-width:560px){ .wp-tmembers{ grid-template-columns:repeat(var(--tcolsn, 3), minmax(0, 1fr)); } } .wp-tmember{ display:flex; flex-direction:column; align-items:center; gap:.4rem; font:inherit; cursor:pointer; color:var(--ink); text-align:center; background:var(--paper); border:1px solid var(--rule); border-radius:10px; padding:.55rem .3rem; } .wp-tmember:hover{ border-color:var(--blue); background:var(--hover); } .wp-tmember > span{ font-size:.76rem; line-height:1.25; overflow-wrap:anywhere; } /* 84px is the intent, but the tile can be narrower than that when five have to fit in half a card at 1150, where the tile measured 87px against an 84px avatar and it overflowed. Capped to the tile and kept square, so it shrinks rather than spilling. */ .wp-tav{ width:84px; max-width:100%; height:auto; aspect-ratio:1; border-radius:12px; font-size:1.3rem; } /* Nothing on file yet. Dimmed rather than hidden, because the gap is the useful part. */ .wp-tmember.quiet{ border-style:dashed; } .wp-tmember.quiet > span{ color:var(--muted); } /* `> i`, AND THE CHILD COMBINATOR IS THE WHOLE POINT. avatarInner paints the initials into an and lays the photograph on top of it, so that an onerror can drop the image and reveal what is already underneath. A bare `.wp-tmember i` also matched THAT and set it to var(--blue), on an avatar whose background is var(--blue), so every person whose photo 404d rendered as a solid blue square. Alex, 2026-09-21: "some of them are blue images." Five of fifteen on the help desk, all recent starters with no photo in Entra. This is the second selector in two days to match more than it was written for. */ .wp-tmember > i{ font-style:normal; font-weight:700; color:var(--blue); font-size:.6rem; text-transform:uppercase; letter-spacing:.04em; } :root[data-theme="dark"] .wp-tmember > i{ color:var(--bluesub); } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .wp-tmember > i{ color:var(--bluesub); } } /* Said once, quietly. It explains a short answer; it is not the answer. */ .wp-amine{ margin:.8rem 0 0; font-size:.8rem; color:var(--muted); font-style:italic; } .wp-agrp{ margin:1rem 0 0; font-size:.66rem; text-transform:uppercase; letter-spacing:.07em; font-weight:700; color:var(--muted); padding-bottom:.3rem; border-bottom:1px solid var(--rule); } .wp-alab + .wp-agrp{ margin-top:.8rem; } .wp-agrp + .wp-astrip{ margin-top:.5rem; } /* HOW STRONG, NOT JUST HOW HIGH. The rank says a teammate came fourth; this says whether fourth was close. Without it the team split reads as a recommendation, which is the one thing it must not do when the real expert is in the section below. Drawn along the foot of the tile so it does not crowd the rank badge, which is a different number and must not be mistaken for this. Relative to the best match found, so the leader is always 100. */ .wp-aperson{ padding-bottom:1.35rem; } .wp-astr{ position:absolute; left:2.6rem; right:.55rem; bottom:.45rem; display:grid; grid-template-columns:1fr auto; align-items:center; gap:.4rem; } .wp-astr > span{ height:4px; border-radius:2px; background:var(--rule); overflow:hidden; } .wp-astr i{ display:block; height:100%; border-radius:2px; background:var(--blue); } .wp-astr b{ font-size:.7rem; font-weight:700; color:var(--muted); font-variant-numeric:tabular-nums; line-height:1; } :root[data-theme="dark"] .wp-astr i{ background:var(--bluesub); } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .wp-astr i{ background:var(--bluesub); } } /* ---- the card, reordered around the person ---- */ #card .card-enjoys, #card .card-aboutwrap{ border:1px solid var(--rule); border-radius:12px; background:var(--paper); padding:0 1rem .9rem; margin:0 0 .8rem; overflow:hidden; } #card .card-enjoys > .card-klab, #card .card-aboutwrap > .card-klab{ display:flex; align-items:center; margin:0 -1rem .7rem; padding:.45rem 1rem; background:var(--tint); border-bottom:1px solid var(--rule); font-size:.7rem; text-transform:uppercase; letter-spacing:.07em; font-weight:700; color:var(--muted); } #card .card-enjoys ol{ margin:0; padding-left:1.2rem; } #card .card-enjoys li{ font-size:.92rem; line-height:1.5; margin:0 0 .15rem; } #card .card-enjoysnote{ margin:.5rem 0 0; font-size:.74rem; color:var(--muted); } #card .card-about{ margin:0; } /* The detail sections now open rather than sit open. */ /* THE COUNT SITS WHERE THE CERTIFICATIONS COUNT SITS, and the rules that stopped it doing so are gone rather than adjusted. Alex, 2026-09-16: "move the 35 over to the right to be aligned with the 8." It was already meant to. The rebuilt section rules at the foot of this file give every badge margin-left:auto, but they address it as `#card summary > i` while this block addressed it as `#card details.card-smewrap > summary i` -- one class more specific, so the old margin won and one of the two badges sat against its own label. Same story for the arrow's extra margin and the open summary's bottom margin: each was a leftover that drew this section unlike its three siblings for no reason anybody chose. Deleted rather than patched, so the unified rules are the only rules and one description of a header draws all four. */ /* ---- heading bars that are actually a third value ---- * Alex: "still a tan header on a tan background with a white section underneath, it's difficult * to distinguish." * The bar was --tint (#FAF8F4), which is white with the lights off: on a white block it is not a * band, it is a slightly grubby patch. Three surfaces need three values, so the bar takes the * page's own tan and the block keeps white. The type goes to full ink as well -- a heading set in * --muted is asking to be skipped. */ #card .card-smek, #card .card-klab, #card details.card-smewrap > summary, #card .card-certwrap > summary, #card .card-enjoys > .card-klab, #card .card-aboutwrap > .card-klab{ background:var(--canvas); color:var(--ink); border-bottom:1px solid var(--rule); } /* ---- square, not pill ---- * Alex: "the rounded bubbles feel and look a little cheap, a square look might be better." * He is right about why: a pill's width is its content plus two half-circles, so nothing ever * lines up with anything below it. Square edges give every chip the same left and right stop, and * a row of them reads as a set rather than as scattered lozenges. 4px, not 0 -- a true right * angle against a rounded block edge looks like a rendering fault. */ #card .card-chip, #card .card-chip.plain, #card .card-chip i, #card .card-showmore{ border-radius:4px; } #card .card-chip{ padding:.24rem .55rem; } #card .card-chip i{ padding:0 .28rem; margin-left:.4rem; } /* ---- inside an expanded section, stop repeating the section treatment ---- * * "What they work on" opened onto three more blocks styled exactly like itself: same tan bar, * same full-bleed row, same weight. Four bars of equal rank, alternating tan and white, and * nothing saying which contained which -- so the eye counted edges instead of reading content. * * A container and the things inside it must not look the same. The outer bar keeps its job of * naming the section; the three inside become plain labels, because a label is what they are. No * fill, no rule, no full-bleed. That leaves exactly two things drawn inside the section: a word, * and the chips under it. */ #card details.card-smewrap .card-sme{ background:none; border:0; padding:0; margin:0; } #card details.card-smewrap .card-sme + .card-sme{ margin-top:1rem; padding-top:.9rem; border-top:1px solid var(--rule); } #card details.card-smewrap .card-smek{ display:block; margin:0 0 .5rem; padding:0; background:none; border:0; font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; font-weight:700; color:var(--muted); } /* The count stops being a badge and becomes what it is: a number after a word. */ #card details.card-smewrap .card-smek i{ background:none; color:var(--muted); font-weight:400; padding:0; margin-left:.3rem; opacity:.8; } /* The chips are then the only boxed things in here, which is the whole point -- they are the content and everything else is scaffolding. */ #card details.card-smewrap .card-smev{ gap:.35rem; } #card details.card-smewrap[open]{ padding:0 1rem 1rem; } /* ================================================================================ THE CARD'S SECTIONS, REBUILT RATHER THAN PATCHED AGAIN ================================================================================ Three passes of adjustment had left a header bleeding out of a padded container with negative margins, which is where the pale corners on the collapsed bar came from: a square bar pushed to the edge of a rounded box never meets the curve, so the container shows through at both ends. Negative margins to escape a padding box are the cause of that whole family of bug. So the container carries NO padding. The header and the body each own theirs, both span the full width by simply being block children, and the container clips them to its own radius. Nothing has to escape anything. The rules below are deliberately last in the file and deliberately complete: they replace the earlier section rules rather than adjusting them, so there is one place that says how a section looks instead of four places that have to agree. ================================================================================ */ #card .card-known, #card .card-enjoys, #card .card-aboutwrap, #card details.card-smewrap, #card .card-respwrap, #card details.card-certwrap{ padding:0; margin:0 0 .75rem; border:1px solid var(--rule); border-radius:10px; background:var(--paper); overflow:hidden; } /* The header. One rule for every section, open or shut, details or div. */ #card .card-known > .card-klab, #card .card-enjoys > .card-klab, #card .card-aboutwrap > .card-klab, #card details.card-smewrap > summary, #card .card-respwrap > .card-klab, #card details.card-certwrap > summary{ display:flex; align-items:center; gap:.45rem; margin:0; padding:.55rem .85rem; background:var(--canvas); border:0; border-bottom:1px solid var(--rule); font-size:.7rem; text-transform:uppercase; letter-spacing:.07em; font-weight:700; color:var(--ink); list-style:none; } #card details > summary::-webkit-details-marker{ display:none; } /* A closed section has no body, so its header should not draw a line under nothing. */ #card details:not([open]) > summary{ border-bottom:0; } /* The disclosure arrow, and the count beside a header. */ #card details > summary::before{ content:'\25b8'; font-size:.8em; opacity:.6; transition:transform .12s ease; } #card details[open] > summary::before{ transform:rotate(90deg); } /* Every section's body gets its padding from one rule. */ #card .card-known > ul, #card .card-enjoys > ol, #card .card-aboutwrap > .card-about, #card .card-enjoys > .card-enjoysnote, #card details.card-smewrap > .card-sme, #card .card-respwrap > .card-resp, #card .card-respwrap > .card-prov, #card details.card-certwrap > .card-row{ margin:0; padding:.7rem .85rem; } #card .card-known > ul, #card .card-enjoys > ol{ padding-left:2rem; } #card .card-enjoys > .card-enjoysnote{ padding-top:0; } #card .card-respwrap > .card-prov{ padding-top:0; } /* Inside an expanded section: a label and its chips, nothing else drawn. The rule between groups is the only separator, and it spans the padding so it reads as a divider rather than a box. */ #card details.card-smewrap > .card-sme + .card-sme{ border-top:1px solid var(--rule); } #card details.card-smewrap .card-smek{ display:block; margin:0 0 .45rem; padding:0; background:none; border:0; font-size:.66rem; text-transform:uppercase; letter-spacing:.08em; font-weight:700; color:var(--muted); } #card details.card-smewrap .card-smek i{ background:none; color:var(--muted); font-weight:400; margin-left:.3rem; padding:0; } /* THE CHIPS NEED A SURFACE. Outlined-white on white is a shape you have to look for; a filled chip is an object you see. Same reason the picker's options are filled. */ #card .card-chip, #card .card-chip.plain{ background:var(--canvas); border:1px solid var(--rule); color:var(--ink); border-radius:4px; padding:.26rem .55rem; font-size:.78rem; } /* The note under the chips it explains, not beside them: it is a sentence and the chips are labels, and setting a sentence on a chip row makes both harder to read. */ #card .card-respnote{ flex-basis:100%; margin-top:.35rem; font-size:.78rem; line-height:1.45; color:var(--muted); } /* One sentence in somebody's own words, which is the whole point of it: a tile that says what a colleague does beats one that lists the drawers they file under. Two lines, clamped, because a tile grid only works if every tile agrees roughly how tall it is. */ .wp-tsay{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:.8rem; line-height:1.45; color:var(--ink); margin:.1rem 0 0; } /* The marker that separates a self-description from one a lead has vouched for. */ .wp-tsay i{ font-style:normal; color:var(--amber-ink); font-weight:700; margin-left:.15rem; } .wp-tnone{ font-style:italic; } /* ---- one layout for "a label and its chips", used in both places ---- * * "What they work on" and "Responsibilities" carry the same shape of content -- a short label and * a row of chips -- and were drawn two different ways. Responsibilities put the label in a column * and reads fine. The other stacked its labels and separated them with full-width rules, which * banded the panel into stripes and made three short lists look like three sections of a form. * Alex kept calling that one messy and not the other, which is the tell. * * So they share a layout now. The label sits in its own column, the chips flow beside it, and the * rules go: with the labels aligned there is already a grid, and a rule across it is a second * separator doing the first one's job. */ #card details.card-smewrap > .card-sme{ display:grid; grid-template-columns:8.5rem 1fr; gap:.75rem; align-items:baseline; padding:.55rem .85rem; } #card details.card-smewrap > .card-sme + .card-sme{ border-top:0; padding-top:0; } #card details.card-smewrap > .card-sme:first-of-type{ padding-top:.75rem; } #card details.card-smewrap > .card-sme:last-of-type{ padding-bottom:.85rem; } #card details.card-smewrap .card-smek{ margin:0; text-align:left; } @media (max-width:640px){ #card details.card-smewrap > .card-sme{ grid-template-columns:1fr; gap:.3rem; } #card details.card-smewrap > .card-sme + .card-sme{ padding-top:.55rem; } } /* And one chip. The two sections had two treatments -- tan fill with a grey edge in one, a blue edge in the other -- so the same object looked like two kinds of thing a hundred pixels apart. The blue edge is the one that reads, so it wins. */ #card .card-chip, #card .card-chip.plain, #card .card-resp .card-chip{ background:var(--paper); border:1px solid var(--sec); color:var(--ink); border-radius:4px; padding:.24rem .55rem; font-size:.78rem; } /* The rebuild said the container carries no padding; an earlier rule was still putting 1rem on the open details, so its rows sat 16px right of the Responsibilities rows directly below them. Two sections with the same layout have to share the same left edge or the layout is not shared, it is coincidental. Same grid column too, so the chips line up as well as the labels. */ #card details.card-smewrap[open]{ padding:0; } #card details.card-smewrap > .card-sme, #card .card-respwrap > .card-resp{ grid-template-columns:9.5rem 1fr; padding-left:.85rem; padding-right:.85rem; } /* ================================================================================ A COLOUR PER SECTION, FROM ONE TOKEN ================================================================================ Alex, 2026-09-16: "I like that come to them for has a different color for that header and the line around that box. Is it possible to use the other colors for Infinite? ... so potentially have a separate color for each section paired with the white body of each section and the cream background." Each section sets ONE custom property and everything else reads it: the header bar, the box outline, the count badge, and the chips inside. That is the whole mechanism. Before this there were four separate places saying "the known block is blue", which is how the count ended up misaligned last time -- so the color of a section is now stated once, per section, and every rule that needs it inherits it. WHY THESE TOKENS AND NOT --blue, --accent, --moss, --amber DIRECTLY. The -ink tokens flip with the theme: dark in light mode, light in dark mode. So `background:var(--sec); color:var(--paper)` is correct in BOTH themes without a single dark-mode override -- paper is white on a dark bar in light mode, and near-black on a light bar in dark mode. The raw brand values do not flip that way: --blue is dark in both, and the old dark rule put cream text on pale --bluesub, which measured about 1.8:1 and was unreadable. Nobody reported it because few people run the card in dark mode, which is exactly why it survived three rounds of work on this card. Contrast measured for every pair, bar against --paper: blue 8.15 / 8.64 green 6.25 / 9.52 rust 8.37 / 8.46 gray 8.90 / 8.30 amber 6.90 / 10.63 (light / dark) All above AA for small text, most above AAA. --accent and --moss at their raw values would have been 4.55 and 4.68 in light mode and 3.65 for --amber, which fails; the -ink variants are the same hues at a weight that passes. FIVE HUES, SIX SECTIONS, on purpose. "Come to them for" and "In their words" are the two sections a person writes about themselves, so they share the blue: the color says whose voice this is, and splitting them would be decoration rather than meaning. The other four each get their own -- what they enjoy, what they are accountable for, what the tickets say, what they have passed. ================================================================================ */ /* Each section names a brand bar and the text that goes on it. Two tokens, not one, because the bright orange takes charcoal text and everything else takes white -- see the note in app.css. */ /* ONE COLOUR PER SECTION, seven of them, ordered so the weight of the bar tracks how much the section is worth. Blue and rust are vouched for, the orange family is the person's own voice, slate is a lead's judgement, charcoal is ticket history, and the palest is the weakest evidence on the card, which §3.4 of the design doc says a certification is. */ #card .card-known { --sec:var(--bar-blue); --sec-on:var(--on-bar-blue); --sec-line:var(--line-bar-blue); } #card .card-enjoys { --sec:var(--bar-orange); --sec-on:var(--on-bar-orange); --sec-line:var(--line-bar-orange); } #card .card-aboutwrap { --sec:var(--bar-peach); --sec-on:var(--on-bar-peach); --sec-line:var(--line-bar-peach); } #card .card-respwrap { --sec:var(--bar-slate); --sec-on:var(--on-bar-slate); --sec-line:var(--line-bar-slate); } #card .card-authwrap { --sec:var(--bar-rust); --sec-on:var(--on-bar-rust); --sec-line:var(--line-bar-rust); } #card details.card-smewrap { --sec:var(--bar-char); --sec-on:var(--on-bar-char); --sec-line:var(--line-bar-char); } #card details.card-certwrap{ --sec:var(--bar-pale); --sec-on:var(--on-bar-pale); --sec-line:var(--line-bar-pale); } #card .card-known, #card .card-enjoys, #card .card-aboutwrap, #card details.card-smewrap, #card .card-respwrap, #card details.card-certwrap{ border-color:var(--sec-line, var(--sec)); } #card .card-known > .card-klab, #card .card-enjoys > .card-klab, #card .card-aboutwrap > .card-klab, #card details.card-smewrap > summary, #card .card-respwrap > .card-klab, #card details.card-certwrap > summary{ background:var(--sec); color:var(--sec-on); border-bottom-color:var(--sec); } /* The count sits ON the colored bar, so it reverses out of it rather than repeating it. */ #card summary > i, #card .card-klab > i{ font-style:normal; font-weight:700; margin-left:auto; padding:.05rem .4rem; border-radius:4px; /* Reversed out of the bar using the bar's OWN text colour, so it stays legible on the orange too -- white on #EE7522 measures 2.92 and would have been the one unreadable thing left. */ background:var(--sec-on); color:var(--sec); font-size:.7rem; font-variant-numeric:tabular-nums; } /* Chips take the section's color too, so a section is one object rather than a colored header with somebody else's blue boxes under it. */ #card .card-resp .card-chip{ background:var(--paper); border-color:var(--sec); } #card .card-chip i{ background:var(--sec); color:var(--sec-on); border-radius:3px; margin-left:.4rem; padding:0 .3rem; font-size:.7rem; } #card .card-smek i{ color:var(--muted); } /* ---- the responsibilities rows sat too far apart ---- Alex: "owns and hands on with probably has too much spacing between them." Right: each row carried .7rem of padding top and bottom AND .5rem of margin, so two rows of one list were 30px apart -- further than the gap between two different sections. They are one list, so they are spaced like one: the block keeps its outer padding and the rows inside it breathe about a third as much. */ #card .card-respwrap > .card-resp{ margin:0; padding-top:.35rem; padding-bottom:.35rem; } #card .card-respwrap > .card-resp:first-of-type{ padding-top:.75rem; } #card .card-respwrap > .card-resp:last-of-type{ padding-bottom:.55rem; } /* Authority and access takes the rust of Responsibilities: both answer "what is this person allowed to do", and giving them two colors would suggest they are different kinds of claim. */ #card .card-authwrap{ padding:0; margin:0 0 .75rem; border:1px solid var(--sec-line, var(--sec)); border-radius:10px; background:var(--paper); overflow:hidden; } #card .card-authwrap > .card-klab{ display:flex; align-items:center; gap:.45rem; margin:0; padding:.55rem .85rem; background:var(--sec); color:var(--sec-on); border:0; border-bottom:1px solid var(--sec); font-size:.7rem; text-transform:uppercase; letter-spacing:.07em; font-weight:700; } #card .card-authwrap > .card-resp{ margin:0; grid-template-columns:9.5rem 1fr; padding:.35rem .85rem; } #card .card-authwrap > .card-resp:first-of-type{ padding-top:.75rem; } #card .card-authwrap > .card-prov{ margin:0; padding:.35rem .85rem .7rem; } /* ---- editing your own lines, on your own card ---- Reuses the section shell so the editor does not look like a different application: same boxes, same headers, same colors, with inputs where the text was. */ .card-editbtn{ margin-left:auto; align-self:flex-start; font-size:.78rem; padding:.35rem .75rem; border-radius:8px; border:1px solid var(--blue); background:transparent; color:var(--blue); cursor:pointer; white-space:nowrap; } .card-editbtn:hover{ background:var(--blue); color:var(--on-blue); } :root[data-theme="dark"] .card-editbtn{ border-color:var(--bluesub); color:var(--bluesub); } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .card-editbtn{ border-color:var(--bluesub); color:var(--bluesub); } } #card .card-edit .ce-fine{ margin:0; padding:.7rem .85rem 0; font-size:.78rem; color:var(--muted); line-height:1.5; } #card .card-edit .ce-list{ display:grid; gap:.4rem; padding:.7rem .85rem; } #card .card-edit .ce-headline{ display:block; width:calc(100% - 1.7rem); margin:.55rem .85rem .8rem; } #card .card-edit input, #card .card-edit textarea{ font:inherit; font-size:.9rem; line-height:1.5; padding:.5rem .6rem; border:1px solid var(--rule); border-radius:7px; background:var(--paper); color:var(--ink); resize:vertical; } #card .card-edit input:focus-visible, #card .card-edit textarea:focus-visible{ outline:2px solid var(--sec, var(--blue)); outline-offset:1px; } /* The "your lead sets these" panel, in the brand's own pale tint rather than the app's amber. */ #card .ce-gated{ margin:0 0 .85rem; padding:.6rem .85rem; border-radius:10px; background:var(--brand-tint); border:1px solid var(--bar-rust); color:var(--ink); font-size:.8rem; line-height:1.5; } #card .ce-foot{ display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; } #card .ce-state{ font-size:.8rem; color:var(--muted); line-height:1.45; flex:1 1 14rem; } #card .ce-state.err{ color:var(--bar-rust); font-weight:600; } /* The scope on an authority chip. "Global Administrator" means two different things depending on which bucket it sits in, so the bucket travels with the role rather than living only in a heading a reader may have scrolled past. Quiet, because the role is the noun. */ /* INVISIBLE FOR A DAY, and worth recording why. This is an inside a .card-chip, so it picked up the count badge's `background:var(--sec)` from further up the file, and the rule here then set `color:var(--sec)` on top of it. Rust text on a rust fill: the word was rendered, at zero contrast, and it read as a solid orange bar. Alex: "why are there 2 orange bars?" The lesson is narrower than "be careful with specificity": a rule that sets only a colour is trusting whatever it inherits to be sensible, and `i` inside a chip already meant something. Both halves of the pair are stated here, so this cannot come apart again. */ #card .card-authwrap .card-scope{ font-style:normal; font-weight:700; font-size:.62rem; text-transform:uppercase; letter-spacing:.05em; border-radius:3px; padding:.05rem .32rem; background:var(--sec); color:var(--sec-on); margin:0 .4rem 0 0; } #card .card-authwrap .card-chip.client{ background:var(--brand-tint); } /* The "this one is not on your card" note under the learning boxes. Quieter than the hint above it, because it answers a question the reader has not asked yet. */ /* More specific than .ce-fine on purpose: the element carries both classes, and .ce-fine is addressed through .card-edit, so a shorter selector here lost the font-size silently. */ #card .card-edit .ce-quiet{ color:var(--muted); font-size:.72rem; font-style:italic; padding-top:0; padding-bottom:.75rem; } /* ---- an account of one person, laid out as one ---- The shortlist grid is right for five people with a line each. For one person and four sentences it squeezed the sentences into a third of the width and left the rest of the panel empty. Here the identity keeps the shape the directory uses and the account takes the room beside it. */ .wp-about{ display:grid; gap:1rem; margin:.8rem 0 0; grid-template-columns:1fr; align-items:start; } /* 20rem, not 17: the identity now sits beside the photograph rather than under it, so the column has to hold 120px of face plus a job title without breaking it across four lines. */ @media (min-width:760px){ .wp-about{ grid-template-columns:20rem minmax(0,1fr); gap:1.6rem; } } .wp-aboutwho{ display:flex; flex-direction:column; align-items:flex-start; gap:.55rem; width:100%; text-align:left; font:inherit; cursor:pointer; padding:.9rem; border:1px solid var(--rule); border-radius:12px; background:var(--paper); color:var(--ink); } .wp-aboutwho:hover{ border-color:var(--blue); } :root[data-theme="dark"] .wp-aboutwho:hover{ border-color:var(--bluesub); } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .wp-aboutwho:hover{ border-color:var(--bluesub); } } /* Square and generous, the same treatment the directory tile gives a face. */ .wp-aboutav{ width:84px; height:84px; border-radius:10px; font-size:1.5rem; } .wp-aboutid{ min-width:0; } .wp-aboutid b{ display:block; font-size:1rem; line-height:1.3; } .wp-aboutid em{ display:block; font-style:normal; line-height:1.35; } .wp-aboutid em.team{ font-size:.66rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:700; } .wp-aboutid em:not(.team){ font-size:.8rem; color:var(--blue); font-weight:600; } :root[data-theme="dark"] .wp-aboutid em:not(.team){ color:var(--bluesub); } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .wp-aboutid em:not(.team){ color:var(--bluesub); } } .wp-aboutopen{ font-size:.74rem; color:var(--blue); font-weight:600; } :root[data-theme="dark"] .wp-aboutopen{ color:var(--bluesub); } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .wp-aboutopen{ color:var(--bluesub); } } /* The account. Capped at 72ch because a line much longer than that is hard to track back from, and the panel is wide. */ .wp-aboutbody{ min-width:0; max-width:72ch; } .wp-aboutbody p{ margin:0 0 .8rem; font-size:.92rem; line-height:1.65; } .wp-aboutbody p:last-child{ margin-bottom:0; } .wp-aboutbody .wp-anote{ margin-top:1rem; padding-top:.7rem; border-top:1px solid var(--rule); font-size:.82rem; color:var(--muted); } .wp-aboutsay{ font-size:.82rem; line-height:1.5; color:var(--ink); } .wp-aboutcerts{ font-size:.74rem; color:var(--muted); } /* Bigger again in the answer, where the photograph and three lines of identity are the whole left column and there is nothing competing with them. */ #answer .wp-aboutav{ width:120px; height:120px; border-radius:12px; font-size:2rem; } /* The four questions above the catch-all box. Numbered rather than bulleted would imply an order that does not exist, and a reader is meant to answer whichever ones they can. */ #card .card-edit .ce-prompts{ margin:0 .85rem .7rem; padding:0 0 0 1.1rem; font-size:.82rem; line-height:1.6; color:var(--muted); } /* The worked example under its own prompt. Quiet, because it shows the SHAPE of an answer and is not itself one, and a person skimming should read the questions first. */ .ce-prompts li i{ display:block; margin-top:.15rem; font-style:normal; font-size:.76rem; line-height:1.4; color:var(--muted); } #card .card-edit .ce-prompts li{ margin:0 0 .15rem; } #card .card-edit .ce-about{ display:block; width:calc(100% - 1.7rem); margin:0 .85rem .3rem; } /* The identity row: photograph, then name, department and title beside it. Matches the directory tile, which the answer card was the only thing on the page not doing. */ #answer .wp-abouthead{ display:flex; align-items:center; gap:.75rem; width:100%; min-width:0; } #answer .wp-abouthead .wp-aboutav{ flex:0 0 auto; } #answer .wp-aboutid{ min-width:0; flex:1 1 auto; } /* A one line row: chips and their count on a single row, nothing wrapping. The chips are trimmed by fitAuthorityRows rather than by overflow, so nothing is ever half cut. */ #card .card-v.oneline{ flex-wrap:wrap; align-items:center; } #card .card-v.oneline .card-showmore{ flex:0 0 auto; } /* A chip that had to give up space so the count could sit beside it. Full text on hover. */ #card .card-chip.trunc{ display:inline-block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; vertical-align:middle; } #card .card-chip.trunc .card-scope{ display:inline; } /* ---- the close button belongs beside the edit button, not under it ---- Alex: "the closeout x button at the very top should be up next to edit your lines, so it doesn't look goofy." Both carried margin-left:auto, and in one flex row the first of those eats all the free space, so the second had nowhere to go but the next line. They are one group now with one auto margin between the identity and them. */ #card .sheet-actions{ display:flex; align-items:center; gap:.5rem; margin-left:auto; align-self:flex-start; flex:0 0 auto; } #card .sheet-actions .card-editbtn, #card .sheet-actions .sheet-close{ margin-left:0; align-self:auto; } /* ---- the authority rows, tightened and aligned ---- Alex: "can we tighten those seven areas vertically a bit, bring those closer together, and also line up the centre vertically of the two columns ... I would want the values in the second column to vertically centre with column one." Three separate fixes and they are easy to confuse: 1 baseline alignment lined up the first line of TEXT in each column, so a two line label sat visibly high against a single row of chips. Centre is what was wanted and what reads right whichever column happens to be taller. 2 text-wrap:balance stops "DECISIONS THEY CAN MAKE" breaking as three words and then one. Balanced, it reads "DECISIONS THEY" over "CAN MAKE" with no stranded word. It degrades to ordinary wrapping in a browser that does not support it, which is the current behaviour, so nothing is lost where it is unsupported. 3 the padding comes in, since one line per area means a row is now a known height and does not need the breathing room a wrapping row did. */ /* 13rem, because at 9.5 four of the seven labels wrapped and the widest of them needs 202px. Measured every label: the longest, "Endpoints and remote access", is 202 on one line, so 208 puts all seven on one line and the question of where to break them stops existing. That is a better answer than tuning the break, because text-wrap:balance turned "Decisions they can make" into "Decisions" over "they can make", which still strands a word, just a different one. It costs the chips 56px, which moves at most one chip per row behind the count, and it buys back more than that: four rows that were two lines tall are now one. */ #card .card-authwrap > .card-resp{ align-items:center; grid-template-columns:13rem 1fr; padding-top:.2rem; padding-bottom:.2rem; gap:.5rem; } #card .card-authwrap > .card-resp:first-of-type{ padding-top:.6rem; } #card .card-authwrap > .card-resp:last-of-type{ padding-bottom:.45rem; } #card .card-authwrap .card-k{ line-height:1.25; align-self:center; } #card .card-authwrap .card-v{ align-items:center; min-height:1.9rem; } /* Responsibilities is the same shape, so it gets the same alignment. */ #card .card-respwrap > .card-resp{ align-items:center; } #card .card-respwrap .card-k{ text-wrap:balance; line-height:1.25; } /* The 13rem label column is a desktop measure and it outranks the narrow rule that .card-resp already had, so on a phone it took 208 of a 314px row and left the chips 105. Below 560 the row stacks, the same as every other .card-resp. */ @media (max-width:560px){ #card .card-authwrap > .card-resp{ grid-template-columns:1fr; gap:.2rem; } #card .card-authwrap .card-v{ min-height:0; } }