/* ⚠ SURFACES COME FROM --surface-0..3, WHICH BOTH HOSTS DEFINE. This file spent
this whole session painting rows with var(--bg-card) and var(--bg-subtle), and
NEITHER TOKEN EXISTS ANYWHERE — not in index.html, not in my-package.html, not
in any stylesheet. Eleven uses and three uses, resolving to nothing, so every
plan row, benefit row, filter pill and held block has been transparent.
check-token-only-styles.js passed it the whole time, correctly: it asks whether
a colour is hardcoded, not whether the token behind var() is real.
check-both-hosts-define-every-token.js is the one that asks the second
question. */
/* ═══════════════════════════════════════════════════════════════════════════
THE BENEFIT PACKAGE BUILDER — COMPONENT STYLES
═══════════════════════════════════════════════════════════════════════════
⚠ TOKENS ONLY, NO LITERAL COLOURS. This file is loaded by BOTH hosts: the
CRM, where the tokens carry the CRM's dark-and-light values, and
my-package.html, where the same names carry MyIApro's. A hex code here would
look right in one of them and wrong in the other — which is the fault the
analysis skin was rebuilt to avoid.
═══════════════════════════════════════════════════════════════════════════ */
#pk-app { max-width: 1180px; margin: 0 auto; padding: 26px 22px 120px; }
/* ── the five steps ───────────────────────────────────────────────────────
Named, not numbered alone: an employer who cannot see how far this goes
assumes the worst. */
.pk-steps { display: flex; gap: 6px; list-style: none; margin: 0 0 22px; padding: 0;
flex-wrap: wrap; }
.pk-steps li { display: flex; align-items: center; gap: 8px; font-size: 12.5px;
font-weight: 600; color: var(--text-muted); padding: 7px 14px 7px 8px;
border-radius: 99px; background: var(--surface-2); white-space: nowrap; }
.pk-steps li span { display: inline-flex; width: 21px; height: 21px; border-radius: 50%;
align-items: center; justify-content: center; font-size: 11px; font-weight: 700;
background: var(--surface-3); color: var(--text-muted); }
.pk-steps li.now { background: var(--fill-accent); color: var(--on-accent); }
.pk-steps li.now span { background: var(--surface-1); color: var(--fill-accent); }
.pk-steps li.done span { background: var(--text-success); color: var(--on-accent); }
.pk-steps li.later { opacity: .62; }
/* ── the banner that counts what is left ─────────────────────────────────── */
.pk-banner { border: 1px solid var(--border-warning); background: var(--bg-warning);
color: var(--text-warning); border-radius: var(--radius); padding: 11px 16px;
font-size: 13px; margin-bottom: 20px; }
.pk-banner.is-done { border-color: var(--border); background: var(--surface-2);
color: var(--text-secondary); }
.pk-banner.is-error { border-color: var(--border-warning); }
/* ── the four cards ──────────────────────────────────────────────────────── */
.pk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
gap: 18px; align-items: start; }
.pk-card { background: var(--surface-1); border: 1px solid var(--border);
border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.pk-card > header { padding: 15px 18px 12px; border-bottom: 1px solid var(--border); }
.pk-card h2 { margin: 0; font-size: 14.5px; font-weight: 700; color: var(--text-primary);
letter-spacing: .01em; }
.pk-card > header p { margin: 4px 0 0; font-size: 11.5px; color: var(--text-muted);
line-height: 1.5; }
.pk-body { padding: 6px 18px 18px; }
/* ── a field, in its two states ───────────────────────────────────────────
⚠ THE WHOLE ARGUMENT OF THIS SCREEN IS IN THESE TWO RULES. A fact we hold is
a quiet row of text; a fact we need is a control that looks like work. */
.pk-f { padding: 10px 0; border-bottom: 1px solid var(--border); }
.pk-f:last-child { border-bottom: 0; }
.pk-f.is-known { display: flex; align-items: baseline; gap: 10px; }
.pk-f.is-known .pk-lab { flex: 0 0 34%; }
.pk-f.is-known .pk-val { flex: 1 1 auto; font-size: 13.5px; color: var(--text-primary);
font-weight: 600; word-break: break-word; }
.pk-lab { display: block; font-size: 11px; font-weight: 700; letter-spacing: .05em;
text-transform: uppercase; color: var(--text-muted); margin-bottom: 5px; }
.pk-f.is-known .pk-lab { margin-bottom: 0; }
.pk-change { background: none; border: 0; padding: 0; cursor: pointer; font: inherit;
font-size: 11.5px; font-weight: 600; color: var(--text-accent); flex: 0 0 auto; }
.pk-change:hover { text-decoration: underline; }
.pk-f input, .pk-f select, .pk-role input, .pk-role select {
width: 100%; box-sizing: border-box; font: inherit; font-size: 13.5px;
padding: 8px 11px; border-radius: 8px; border: 1px solid var(--border);
background: var(--surface-1); color: var(--text-primary); }
.pk-f input:focus, .pk-f select:focus, .pk-role input:focus, .pk-role select:focus {
outline: 2px solid var(--fill-accent); outline-offset: 1px; border-color: var(--fill-accent); }
/* A gap wears the colour this brand already uses for "something wants you". */
.pk-f.is-gap input, .pk-f.is-gap select { border-color: var(--border-warning);
background: var(--bg-warning); }
.pk-why { display: block; font-size: 11px; color: var(--text-warning); margin-top: 5px;
line-height: 1.45; }
/* ── who we talk to ──────────────────────────────────────────────────────── */
.pk-role { padding: 12px 0; border-bottom: 1px solid var(--border);
display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pk-role:last-child { border-bottom: 0; }
.pk-role-h { grid-column: 1 / -1; }
.pk-role select { grid-column: 1 / -1; }
.pk-role.is-gap select { border-color: var(--border-warning); background: var(--bg-warning); }
/* ── locations ───────────────────────────────────────────────────────────── */
.pk-note { font-size: 12.5px; color: var(--text-muted); margin: 12px 0 0; }
.pk-locs { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.pk-loc { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap;
background: var(--surface-2); border-radius: 8px; padding: 9px 12px; font-size: 12.5px; }
.pk-loc strong { color: var(--text-primary); }
.pk-loc span { color: var(--text-muted); flex: 1 1 auto; }
.pk-loc em { font-style: normal; color: var(--text-muted); font-size: 11.5px; }
.pk-add { margin-top: 12px; background: none; border: 1px dashed var(--border);
color: var(--text-accent); border-radius: 8px; padding: 8px 13px; cursor: pointer;
font: inherit; font-size: 12.5px; font-weight: 600; width: 100%; }
.pk-add:hover { background: var(--bg-hover); }
/* ── what we worked out rather than asked ────────────────────────────────── */
.pk-stats { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px;
background: var(--surface-1); border: 1px solid var(--border);
border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow); }
.pk-stat { flex: 1 1 120px; min-width: 110px; }
.pk-stat strong { display: block; font-size: 21px; font-weight: 700;
color: var(--text-primary); font-variant-numeric: tabular-nums; line-height: 1.15; }
.pk-stat span { display: block; font-size: 11px; color: var(--text-muted); margin-top: 2px;
line-height: 1.35; }
.pk-stat[title] { cursor: help; }
.pk-stat.is-word strong { font-size: 17px; }
/* ── the save bar ────────────────────────────────────────────────────────── */
.pk-savebar { position: sticky; bottom: 0; margin-top: 22px; display: flex;
align-items: center; gap: 12px; padding: 14px 18px;
background: var(--surface-1); border: 1px solid var(--border);
border-radius: var(--radius); box-shadow: var(--shadow); }
.pk-saved { flex: 1 1 auto; font-size: 11.5px; color: var(--text-muted); }
/* ⚠ BACK IS LEFT-JUSTIFIED ON EVERY SCREEN. Ken, 2026-08-26: "on all of the
screens in this builder module, can we LEFT justify the Back button".
It is emitted FIRST in pkBarHTML_ so the growing note pushes the forward
actions right; this pins it even if a bar is ever built by hand. */
.pk-savebar .pk-back { order:-1; margin-right:auto; }
.pk-saved.is-error { color: var(--text-warning); font-weight: 600; }
.pk-savebar.is-dirty { border-color: var(--border-accent); }
.pk-savebar.is-saving { opacity: .6; pointer-events: none; }
@media (max-width: 620px) {
#pk-app { padding: 18px 14px 120px; }
.pk-role { grid-template-columns: 1fr; }
.pk-f.is-known { flex-wrap: wrap; }
.pk-f.is-known .pk-lab { flex-basis: 100%; }
}
/* ── stage 5b: employee classes ───────────────────────────────────────────── */
/* A single-class employer gets one card, not a grid of one. */
.pk-grid-1 { grid-template-columns: minmax(0, 560px); }
/* The compliance read spans the width — its rows are sentences, not columns. */
.pk-wide { grid-column: 1 / -1; }
/* A class with no stated basis wears the same crimson edge a missing field does,
so "something wants you" means one thing on every screen. */
.pk-card.is-gap { border-color: var(--border-warning); }
/* A hint that is only guidance sits back; one that is a warning does not. */
.pk-why.is-quiet { color: var(--text-muted); }
.pk-val.is-warn { color: var(--text-warning); font-weight: 700; }
/* A finished step in the rail is a way back, so it looks like one. */
.pk-steps li.done:hover { background: var(--bg-accent); }
/* ── the explanation ──────────────────────────────────────────────────────
The one screen where prose IS the work: a control means nothing until the
idea lands, and an employer who does not know what a class is cannot answer
whether they want one. */
.pk-explain { grid-column: 1 / -1; margin-bottom: 18px; }
/* ⚠ TWO COLUMNS ON A WIDE SCREEN, NOT ONE TALL ONE. Ken, 2026-08-26: "it looks
like it is just one column and word wrapping. can we extend it so that the
paragraph isn t so long and takes up half the screen?" He is describing a
65-character measure inside an 1180px card — correct for a book, wrong here,
because it left the right half empty and made the reader scroll past the
thing they came to answer. Two columns halve the height and use the width
that was already paid for.
⚠ AND NOTHING BREAKS ACROSS THE GAP. A paragraph or a bullet split between
columns is read twice and understood once. */
.pk-explain .pk-body, .pk-explain-fold .pk-cols { column-gap: 42px; }
@media (min-width: 900px) {
.pk-explain .pk-body, .pk-explain-fold .pk-cols { column-count: 2; }
}
.pk-explain .pk-body p, .pk-explain-fold p { font-size: 13.5px; line-height: 1.65;
color: var(--text-secondary); margin: 0 0 11px; break-inside: avoid; }
.pk-explain .pk-body p:last-child, .pk-explain-fold p:last-child { margin-bottom: 0; }
.pk-explain ul, .pk-explain-fold ul { margin: 0 0 11px; padding-left: 20px;
font-size: 13.5px; line-height: 1.65; color: var(--text-secondary);
break-inside: avoid; }
.pk-explain li, .pk-explain-fold li { margin-bottom: 5px; break-inside: avoid; }
.pk-explain-fold { margin-bottom: 18px; }
.pk-explain-fold > summary { display: inline-flex; align-items: center; gap: 7px;
cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--text-accent);
list-style: none; padding: 4px 0; user-select: none; }
.pk-explain-fold > summary::-webkit-details-marker { display: none; }
.pk-explain-fold > summary::before { content: ''; border: 5px solid transparent;
border-left-color: currentColor; border-right-width: 0; transition: transform .15s;
transform-origin: 2px 50%; }
.pk-explain-fold[open] > summary::before { transform: rotate(90deg); }
.pk-explain-fold > summary:hover { text-decoration: underline; }
.pk-explain-fold > summary:focus-visible { outline: 2px solid var(--fill-accent);
outline-offset: 3px; border-radius: 4px; }
.pk-explain-fold > *:not(summary) { margin-top: 10px; }
/* ── the two-way question a new group is asked ───────────────────────────── */
.pk-choose { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 12px; padding-top: 14px; }
.pk-choice { text-align: left; background: var(--surface-1); cursor: pointer;
border: 1px solid var(--border); border-radius: var(--radius); padding: 15px 17px;
font: inherit; display: flex; flex-direction: column; gap: 5px; transition: border-color .13s; }
.pk-choice:hover { border-color: var(--fill-accent); background: var(--bg-hover); }
.pk-choice:focus-visible { outline: 2px solid var(--fill-accent); outline-offset: 2px; }
.pk-choice strong { font-size: 14px; color: var(--text-primary); }
.pk-choice span { font-size: 12px; color: var(--text-muted); line-height: 1.5; }
/* ── stage 5c: who qualifies ──────────────────────────────────────────────── */
/* A tier that offers nothing is still real and still holds people — it sits
back rather than disappearing, because an employer needs to see where the
people they are NOT covering have gone. */
.pk-card.is-quiet-card { background: var(--surface-2); }
.pk-card.is-quiet-card > header h2 { color: var(--text-muted); }
.pk-note.is-warn { color: var(--text-warning); font-weight: 600; }
.pk-note + .pk-note { margin-top: 10px; }
/* The plan-wide floor is a conclusion, not a field — it sits apart from the
control above it and reads as a statement. */
.pk-f.pk-floor { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 12px; }
.pk-f.pk-floor .pk-val { display: block; font-size: 17px; font-weight: 700;
color: var(--text-primary); }
/* ═══ STAGE 5d — YOUR PEOPLE ═══════════════════════════════════════════════
⚠ NO LITERAL COLOUR IN THIS FILE, not even in a comment — the guard greps the
whole file and it is right to. Both the CRM and MyIApro load this stylesheet
and only the token values differ: --on-accent resolves to black in one host
and white in the other, so a hard-coded white here is unreadable in the CRM. */
.pk-people { display:flex; flex-direction:column; gap:6px; }
.pk-person { border:1px solid var(--border); border-radius:8px; overflow:hidden;
background:var(--surface-1); }
.pk-person.is-open { border-color:var(--accent); }
.pk-person.has-gap { border-left:3px solid var(--text-warning); }
/* ⚠ NO `auto` TRACK HERE. Ken, 2026-08-26: "if the employee is waiving it
appears that the class column and the eligibility class column gets pushed to
the left and doesn't line up properly."
Each row is its OWN grid — they are separate elements, not a shared one — so
an `auto` track sizes to THAT row's content. A waiving row carries an extra
chip, so its chip track grew and stole width from the columns before it, and
no two rows could agree on where a column starts. Every track is now a
fraction of the container, which is identical for every row, so the columns
line up by construction and the chips wrap inside their own box. */
.pk-person-h { display:grid; align-items:center; gap:10px; padding:10px 12px;
cursor:pointer;
grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.7fr) 22px; }
.pk-person-h:hover { background:var(--bg-hover); }
.pk-person-h:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
.pk-person-n { font-weight:650; min-width:0; overflow:hidden; text-overflow:ellipsis;
white-space:nowrap; }
.pk-person-n em { font-style:normal; font-weight:400; color:var(--text-muted);
font-size:12px; margin-left:8px; }
.pk-person-m { color:var(--text-muted); font-size:13px; min-width:0;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pk-person-x { text-align:center; color:var(--text-muted); font-size:18px; line-height:1; }
.pk-chips { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.pk-chip { font-size:11px; padding:2px 8px; border-radius:999px; white-space:nowrap;
background:var(--surface-2); color:var(--text-muted); border:1px solid var(--border); }
.pk-chip.is-warn { background:var(--bg-warning); color:var(--text-warning);
border-color:var(--text-warning); }
.pk-chip.is-gap { background:var(--bg-warning); color:var(--text-warning);
border-color:var(--text-warning); font-weight:600; }
.pk-person-b { padding:4px 12px 14px; border-top:1px solid var(--border); }
/* ⚠ TERMINATE IN CRIMSON. Ken, 2026-09-14. --crimson and --crimson-pale are
defined on both hosts and swap for dark mode (rose on dark), so the words
stay readable on either theme. */
.pk-person-acts .btn.pk-btn-crimson { background:var(--crimson); color:var(--crimson-pale);
border-color:var(--crimson); font-weight:600; }
.pk-person-acts .btn.pk-btn-crimson:hover { background:var(--crimson-dark);
border-color:var(--crimson-dark); color:var(--crimson-pale); }
/* At the TOP of the person now (Ken, 2026-09-14), so the rule sits under it. */
.pk-person-f { display:flex; align-items:center; justify-content:space-between;
gap:12px; margin:8px 0 12px; padding-bottom:10px; border-bottom:1px dashed var(--border);
flex-wrap:wrap; }
/* ⚠ A GRID, NOT A WRAPPING FLEX ROW. Ken, 2026-08-26: the label "is word
wrapping and is split apart from its check box".
It was `display:flex; flex-wrap:wrap` with the checkbox block on
`flex:1 1 320px`. When the "Why" dropdown appeared the two competed for
width, the basis squeezed the label into a narrow column, and because the
input had no `flex:0 0 auto` the box itself could shrink — so the text wrapped
hard and drifted away from the tick box it belongs to.
Two explicit columns instead: the statement takes what is left, the dropdown
takes what it needs, and neither can starve the other. */
.pk-waive { margin-top:10px; padding:10px 12px; border-radius:8px;
background:var(--surface-2); display:grid; gap:12px 16px; align-items:start;
grid-template-columns:minmax(0,1fr) auto; }
/* The box never shrinks; the words wrap inside their own box, beside it. */
.pk-check em { display:block; font-style:normal; color:var(--text-muted);
font-size:12px; margin-top:2px; line-height:1.5; }
/* ⚠ THEIR FAMILY IN A COLOR OF ITS OWN. Ken, 2026-09-14: "another distinguishing
color" — the accent tint, so it reads apart from the gray Employment panel. */
.pk-deps { margin-top:16px; padding:8px 14px 8px; border-radius:8px;
background:var(--bg-accent); border:1px solid var(--border-accent); }
.pk-deps input, .pk-deps select { background:var(--surface-1); }
.pk-deps-h { display:flex; align-items:center; justify-content:space-between;
gap:12px; margin-bottom:6px; }
/* First, last, relationship, date of birth, SSN (and Show), remove — a wrapping
row now that the name is two boxes and the SSN is on it (2026-09-14). */
.pk-dep { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-bottom:6px; }
.pk-dep > input[type="text"] { flex:1 1 130px; min-width:0; }
.pk-dep > select, .pk-dep > input[type="date"] { flex:0 1 150px; }
.pk-dep > .pk-dep-ssn { flex:0 1 150px; }
.pk-dep > .pk-x { flex:0 0 28px; }
.pk-x { border:1px solid var(--border); background:var(--surface-1);
color:var(--text-muted); border-radius:6px; cursor:pointer; height:30px;
font-size:16px; line-height:1; }
.pk-x:hover { color:var(--text-warning); border-color:var(--text-warning); }
/* Removing somebody who is insured. Deliberately loud — this is the one action
on the screen that reaches a carrier. */
.pk-term { margin-top:12px; padding:12px; border-radius:8px;
background:var(--bg-warning); border:1px solid var(--text-warning); }
.pk-term p { margin:6px 0 10px; line-height:1.6; }
.pk-term-r { display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; }
.pk-term-r .pk-f { margin:0; }
.pk-term-acts { display:flex; gap:8px; justify-content:flex-end; margin-top:10px; flex-wrap:wrap; }
/* ═══ THE PEOPLE STEP, 2026-09-14 — sections, address, phones, SSN, terminated ═══ */
.pk-subh { margin:16px 0 6px; font-size:11px; font-weight:700; letter-spacing:.05em;
text-transform:uppercase; color:var(--text-muted); }
.pk-grid .pk-f.is-wide { grid-column:1 / -1; }
.pk-mail-same { margin:6px 0 2px; }
.pk-phones { display:flex; flex-direction:column; gap:6px; }
.pk-phone { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.pk-phone input[type="tel"] { flex:1 1 180px; min-width:0; }
.pk-phone .pk-x { flex:0 0 28px; }
.pk-add.pk-add-sm { align-self:flex-start; }
/* Ken, 2026-09-14: the name on one row; date of birth, SSN and personal email on
the next. Fractions of the row, so every person's rows line up. */
.pk-row-name { display:grid; gap:0 14px;
grid-template-columns:minmax(0,2fr) minmax(0,.7fr) minmax(0,2fr) minmax(0,.9fr); }
.pk-row-id { display:grid; gap:0 14px;
grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) minmax(0,1.5fr); }
.pk-lab abbr[title] { text-decoration:none; cursor:help; }
/* Ken, 2026-09-14: street, city, state, ZIP on one row; the secondary line
(kind + number) and "Mailing address is the same" on the next. */
.pk-addr-row { display:grid; gap:0 14px;
grid-template-columns:minmax(0,2.2fr) minmax(0,1.4fr) minmax(0,.6fr) minmax(0,.9fr); }
.pk-addr-row2 { display:grid; gap:0 14px; align-items:end;
grid-template-columns:minmax(0,1.6fr) minmax(0,2fr); }
.pk-addr-row2 .pk-mail-same { padding:10px 0 12px; margin:0; }
.pk-unit { display:flex; gap:8px; }
.pk-unit select { flex:0 0 120px; }
.pk-unit input { flex:1 1 auto; min-width:0; }
.pk-subh.pk-subh-lg { font-size:12.5px; color:var(--text-primary); margin-top:22px;
padding-top:14px; border-top:1px solid var(--border); }
/* Ken, 2026-09-14: Employment Information in its own offset panel. Tokens only,
so both hosts paint it in their own palette. */
.pk-emp { margin-top:22px; padding:2px 16px 14px; background:var(--surface-2);
border:1px solid var(--border); border-radius:var(--radius); }
.pk-emp .pk-subh.pk-subh-lg { margin-top:12px; padding-top:0; border-top:0; }
.pk-emp-row1 { display:grid; gap:0 14px;
grid-template-columns:minmax(0,1fr) minmax(0,1.6fr) minmax(0,1.4fr) minmax(0,1.4fr); }
.pk-emp-row2 { display:grid; gap:0 14px;
grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.6fr); }
.pk-emp-row3 { display:grid; gap:0 14px; grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.pk-emp .pk-waive { background:var(--surface-1); }
.pk-ro { padding-block:7px; font-weight:600; color:inherit; }
/* Ken, 2026-09-14: include employees not eligible for benefits — at the top of the list. */
.pk-ppl-inelig { display:flex; align-items:center; gap:8px; margin-bottom:12px;
font-size:13px; cursor:pointer; }
.pk-ppl-inelig input { margin:0; flex:0 0 auto; }
.pk-ppl-inelig span { min-width:0; }
/* …and when they are shown, a light yellow row (Ken, 2026-09-14). The warning
token, so it holds in both themes. */
.pk-person.is-inelig { background:var(--bg-warning); }
/* The People step's count as chip cards (Ken, 2026-09-14): the builder's stat card,
each in its own tile inside the people card. */
.pk-ppl-stats { margin:0 0 14px; padding:0; background:none; border:0; box-shadow:none; }
.pk-ppl-stats .pk-stat { background:var(--surface-2); border:1px solid var(--border);
border-radius:10px; padding:10px 14px; }
.pk-ppl-stats .pk-stat.is-inelig { background:var(--bg-warning); border-color:var(--border-warning); }
/* Label on top, figure underneath (Ken, 2026-09-14). */
.pk-ppl-stats .pk-stat span { margin:0 0 3px; text-transform:uppercase; letter-spacing:.05em;
font-weight:600; font-size:10.5px; }
/* The employer's own Save on the People step (their walkthrough hides the bar). */
.pk-ppl-save { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:14px; }
.pk-emp .pk-payclass { margin:2px 0 10px; }
.pk-pay-hint { display:block; margin-top:4px; min-height:1em; font-size:11.5px;
color:var(--text-muted); font-variant-numeric:tabular-nums; }
.pk-ssn { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.pk-ssn input { flex:1 1 140px; min-width:0; }
@media (max-width:720px) {
.pk-row-name { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.pk-row-id { grid-template-columns:minmax(0,1fr); }
.pk-addr-row { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.pk-addr-row2 { grid-template-columns:minmax(0,1fr); }
.pk-emp-row1, .pk-emp-row2 { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.pk-emp-row3 { grid-template-columns:minmax(0,1fr); }
}
.pk-ssn-v { font-variant-numeric:tabular-nums; font-weight:600; letter-spacing:.04em; }
.pk-linkbtn { background:none; border:0; padding:0; font:inherit; font-size:12px;
color:var(--text-accent); cursor:pointer; white-space:nowrap; }
.pk-linkbtn:hover { text-decoration:underline; }
.pk-linkbtn:focus-visible { outline:2px solid var(--text-accent); outline-offset:2px; }
.pk-person-acts { display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
.pk-terminated { margin-top:14px; }
/* Inside the people card, under Add an employee (Ken, 2026-09-14): a quieter box. */
.pk-body > .pk-terminated { background:var(--surface-2); }
.pk-body > .pk-terminated > summary { padding:10px 14px; }
.pk-body > .pk-terminated > summary h2 { font-size:14px; }
.pk-terminated > summary { display:flex; align-items:center; gap:10px; cursor:pointer;
list-style:none; padding:14px 18px; }
.pk-terminated > summary::-webkit-details-marker { display:none; }
.pk-terminated > summary h2 { margin:0; }
.pk-terminated > summary em { font-style:normal; font-size:11px; font-weight:600;
padding:1px 8px; border-radius:999px; background:var(--surface-2); color:var(--text-muted); }
.pk-tt-wrap { overflow-x:auto; }
.pk-tt { width:100%; border-collapse:collapse; font-size:12.5px; font-variant-numeric:tabular-nums; }
.pk-tt th, .pk-tt td { padding:6px 10px 6px 0; border-bottom:1px solid var(--border);
text-align:left; vertical-align:top; }
.pk-tt thead th { font-size:10.5px; letter-spacing:.03em; text-transform:uppercase;
color:var(--text-muted); font-weight:600; }
@media (max-width:720px) {
.pk-waive { grid-template-columns:minmax(0,1fr); }
.pk-person-h { grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) 22px; }
.pk-person-m { display:none; }
.pk-dep > input[type="text"], .pk-dep > select, .pk-dep > input[type="date"],
.pk-dep > .pk-dep-ssn { flex:1 1 45%; }
}
/* ═══ STAGE 5e — THREE PHASES INSIDE ONE STEP ═══════════════════════════════
No literal colour, not even in a comment — both hosts load this and only the
token values differ. */
.pk-phases { display:flex; align-items:center; gap:8px; flex-wrap:wrap;
margin:0 0 16px; font-size:12.5px; }
.pk-phases span { padding:4px 10px; border-radius:999px; border:1px solid var(--border);
color:var(--text-muted); background:var(--surface-1); }
.pk-phases span.now { border-color:var(--accent); color:var(--accent); font-weight:650; }
.pk-phases span.done { cursor:pointer; }
.pk-phases span.done:hover { border-color:var(--accent); }
.pk-phases i { color:var(--text-muted); font-style:normal; }
/* Phase 1 — the benefit types */
/* Phase 2 — the plan menu */
.pk-tabs { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px; }
.pk-tabs button { padding:7px 14px; border-radius:999px; cursor:pointer;
border:1px solid var(--border); background:var(--surface-1); color:var(--text);
font-size:13px; }
.pk-tabs button.is-on { border-color:var(--accent); color:var(--accent); font-weight:650; }
.pk-tabs button i { font-style:normal; margin-left:6px; padding:1px 6px; font-size:11px;
border-radius:999px; background:var(--accent); color:var(--on-accent); }
/* ═══ NARROWING THE LIST — A TOOLBAR, NOT A PANEL ════════════════════
Ken, 2026-08-27: "the search and filter bar is WAY too big it takes up half
the screen! What part of PROFESSIONAL and EASY do you not understand???"
⚠ IT WAS ABOUT 130px OF CHROME TO NARROW A LIST, and every pixel of it was a
choice I made: an uppercase caption stacked above each control, a BLANK
caption above each button to keep the baselines aligned, and a border and fill
around the lot so it read as a section of the page. Gone — the placeholder and
the "All networks" option say what each control is, at no height at all, and
the strip now sits over the list instead of boxing it in. About 34px a row. */
.pk-filter { display:flex; flex-direction:column; gap:6px; margin-bottom:12px; }
.pk-filter-r { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
/* ⚠ SIZED WITH flex-basis, NEVER width, AND THIS IS NOT A STYLE PREFERENCE.
index.html carries
input:not([type=checkbox]):not([type=radio]), select, textarea { width:100% }
which scores (0,2,1) — the two attribute selectors inside :not() both count —
and therefore beats any plain class of mine at (0,1,0). So `.pk-f-d
{ width:132px }` LOST, the Max Deductible field stretched to the full width of
the bar, and everything after it was pushed onto its own line. Ken, 2026-08-28:
"Does the deductible search filter have to be spanned all the way across the
fucking page."
flex-basis is immune: it sets the main size of a flex item and the cascade on
`width` cannot reach it, whatever the specificity. The same blanket rule is
what stretched every tick box in the CRM on 2026-08-27 — that half was fixed
at the time and this half was left live. */
.pk-f-q { flex:1 1 220px; min-width:0; }
.pk-f-d { flex:0 0 130px; min-width:0; }
/* The network names are long — "Blue Preferred PPO Network" — and a select left
to itself grows to fit its widest option. The full name is still there when it
is open, and on every plan row beneath. */
.pk-f-s { flex:0 1 150px; min-width:0; }
.pk-filter input, .pk-filter select { font-size:12.5px; padding:5px 8px; }
.pk-filter-n { display:flex; align-items:baseline; gap:8px; margin-left:auto;
flex-wrap:wrap; font-size:11.5px; color:var(--text-muted); }
.pk-filter-n strong { font-size:11.5px; font-variant-numeric:tabular-nums;
white-space:nowrap; color:var(--text); }
/* ⚠ SAID OUT LOUD, because a plan held back from a filter looks like a filter
that does not work. */
.pk-filter-n em { font-style:normal; }
.pk-linkish { background:none; border:0; padding:0; font-size:11.5px;
color:var(--accent); cursor:pointer; text-decoration:underline; }
/* A mark somebody put on a plan, offered as a filter — pressed or not, with the
count on it so they can see what it would leave. */
.pk-toggle { display:inline-flex; align-items:center; gap:5px; cursor:pointer;
font-size:11.5px; padding:4px 9px; border-radius:999px; white-space:nowrap;
border:1px solid var(--border); background:var(--surface-1); color:inherit; }
.pk-toggle:hover { border-color:var(--accent); }
.pk-toggle.is-on { border-color:var(--accent); color:var(--accent); font-weight:600; }
.pk-toggle i { font-style:normal; font-size:10.5px; opacity:.7;
font-variant-numeric:tabular-nums; }
/* ═══ WHAT THEY HOLD, WHERE IT CANNOT BE CHOSEN ════════════════════════════
Medical and the gap re-quote every year, so last year's plan is reference
rather than an option. Closed by default, and carrying no tick box at all. */
.pk-held { border:1px solid var(--border); border-radius:8px;
background:var(--surface-1); margin-bottom:12px; }
.pk-held-h { display:flex; align-items:baseline; gap:8px; width:100%;
padding:9px 12px; background:none; border:0; cursor:pointer; text-align:left;
color:inherit; font:inherit; }
.pk-held-h i { font-style:normal; color:var(--text-muted); }
.pk-held-h strong { font-size:12px; letter-spacing:.04em; text-transform:uppercase;
white-space:nowrap; }
.pk-held-h em { font-style:normal; font-size:11px; color:var(--text-muted);
min-width:0; }
.pk-held-b { padding:0 12px 10px 30px; }
.pk-held-p { padding:6px 0; border-top:1px solid var(--border); }
.pk-held-p strong { display:block; font-size:12.5px; font-weight:500; }
.pk-held-p em { display:block; font-style:normal; font-size:11px;
color:var(--text-muted); margin-top:1px; }
/* What the carrier has come back with for this plan — the reason the block
opened itself. */
.pk-held-p b { display:block; font-weight:500; font-size:11px; line-height:1.4;
color:var(--accent); margin-top:2px; }
.pk-held-w { margin:8px 0 0; font-size:11.5px; color:var(--text-muted); }
/* ⚠ WHAT THEY HOLD, GROUPED BY WHO HOLDS IT. Ken, 2026-09-07: "list them by
class like the selections pane." TJ's two current medical plans are one plan
for Owners & Managers and a different one for Regular Employees; a flat list
of two says nothing about that, and the same is true of their two gap plans. */
.pk-held-g { margin-top:10px; }
.pk-held-g:first-child { margin-top:0; }
.pk-held-gh { font-size:10.5px; font-weight:600; letter-spacing:.07em;
text-transform:uppercase; color:var(--text-muted); margin-bottom:5px; }
.pk-held-one { padding:6px 0; border-top:1px solid var(--border); }
.pk-held-g .pk-held-one:first-child { border-top:0; }
/* ⚠ THE CARRIER'S ANSWER IS INDENTED UNDER THE PLAN IT ANSWERS, so the two read
as one decision rather than as two more rows in a list of eighty. */
.pk-held-o { margin:8px 0 2px 14px; padding-left:12px;
border-left:2px solid var(--border); }
.pk-held-oh { display:flex; align-items:baseline; gap:8px; margin-bottom:5px;
font-size:10.5px; font-weight:600; letter-spacing:.07em;
text-transform:uppercase; color:var(--text-accent); }
.pk-held-oh i { font-style:normal; font-size:10.5px; color:var(--text-muted);
font-variant-numeric:tabular-nums; }
.pk-held-ow { margin:0 0 6px; font-size:11.5px; line-height:1.45;
color:var(--text-muted); }
.pk-filter-n strong { font-size:12px; font-variant-numeric:tabular-nums;
white-space:nowrap; }
/* ⚠ SAID OUT LOUD, because a plan held back from a filter looks like a filter
that does not work. */
.pk-filter-n em { font-style:normal; font-size:11px; color:var(--text-muted); }
.pk-filter-n button, .pk-linkish { background:none; border:0; padding:0;
font-size:11.5px; color:var(--accent); cursor:pointer; text-decoration:underline; }
/* ═══ CHOOSING PLANS — GROUPED, BECAUSE 46 IS A WALL ════════════════════
What they hold leads, then one group per funding arrangement — the fact that
decides whether a rate is even real yet. */
.pk-pgroup { margin-top:16px; }
.pk-pgroup:first-child { margin-top:0; }
.pk-pgroup-h { display:flex; align-items:baseline; gap:8px; margin-bottom:6px;
padding-bottom:5px; border-bottom:1px solid var(--border); }
.pk-pgroup-h strong { font-size:12px; letter-spacing:.04em; text-transform:uppercase; }
.pk-pgroup-h i { font-style:normal; font-size:11px; color:var(--text-muted);
font-variant-numeric:tabular-nums; }
/* The underwriting caution, once for the group rather than once per row. */
.pk-pgroup-w { margin:0 0 7px; font-size:11.5px; line-height:1.45;
color:var(--text-warning); }
.pk-plans { display:flex; flex-direction:column; gap:6px; }
/* ⚠ THREE COLUMNS, AND THE MIDDLE ONE HOLDS ITS WIDTH WHETHER OR NOT IT HAS
ANYTHING IN IT. Ken, 2026-08-28: the class dropdown "needs to be in its own
column and on the same row as the plan name… and Yardstick radio button, to
the right of that." It used to sit among the chips, so its width moved every
time a chip appeared or a plan was ticked, and nothing lined up down the list.
An empty cell still reserves the track — that is what makes a column a column. */
.pk-plan { display:grid; gap:10px; align-items:center; padding:9px 12px;
border:1px solid var(--border); border-radius:8px; background:var(--surface-1);
grid-template-columns:minmax(0,1fr) auto; }
/* ⚠ FIVE THINGS ON ONE ROW, AND ONLY ONE OF THEM IS FLEXIBLE. Name, who it is
for, how it is rated, what it costs, and the marks. Everything but the name
takes the width it needs, so the columns line up down the list — and the whole
row wraps rather than crushing the name when the window is narrow. */
.pk-plan:has(.pk-plan-c) { grid-template-columns:minmax(0,1fr) 200px auto; }
.pk-plan:has(.pk-plan-m) { grid-template-columns:minmax(0,1fr) 144px minmax(0,auto) auto; }
.pk-plan:has(.pk-plan-c):has(.pk-plan-m) {
grid-template-columns:minmax(0,1fr) 200px 144px minmax(0,auto) auto; }
/* How the carrier prices it. Greyed where they only quoted one way. */
.pk-plan-m { min-width:0; }
.pk-plan-m select.pk-rated { display:block; width:100%; font-size:12px; padding:5px 8px; }
.pk-plan-m .pk-rated.is-fixed { display:block; font-size:11.5px; padding:5px 0;
color:var(--text-muted); font-style:italic; white-space:nowrap; }
.pk-plan-m em { font-style:normal; font-size:11px; color:var(--text-muted); }
/* ⚠ WHAT IT COSTS, AND WHAT KIND OF NUMBER IT IS. A tier rate is the rate; an
age-banded figure is an average over real people and says so beneath. */
.pk-plan-x { min-width:0; }
.pk-tiers { display:flex; flex-wrap:wrap; gap:4px 10px; }
.pk-tiers span { display:flex; align-items:baseline; gap:4px; white-space:nowrap; }
.pk-tiers i { font-style:normal; font-size:10px; letter-spacing:.04em;
text-transform:uppercase; color:var(--text-muted); }
.pk-tiers b { font-size:12.5px; font-weight:600;
font-variant-numeric:tabular-nums; }
.pk-plan-x.is-average .pk-tiers b { color:var(--text-accent); }
.pk-plan-x em { display:block; font-style:normal; font-size:10.5px; line-height:1.35;
color:var(--text-muted); margin-top:3px; max-width:320px; }
/* ⚠ THE TWO WAYS THIS COLUMN IS NOT A ROW OF FIGURES, both of which used to be
an empty box: still asking, and nothing to ask for. */
.pk-plan-x.is-pricing em { margin-top:0; opacity:.7; }
.pk-plan-x.is-untiered em { margin-top:0; }
/* ⚠ THE ONE QUESTION ON THIS SCREEN THAT CAN QUIETLY COST SOMEBODY THEIR HSA,
so the consequence sits under the answer rather than behind a tooltip. */
.pk-design-why { display:block; font-style:normal; font-size:10.5px;
line-height:1.35; color:var(--text-muted); margin-top:4px; max-width:260px; }
.pk-design-why.is-warn { color:var(--text-warning); }
/* ⚠ WHAT THIS SELECTION WOULD BREAK. Three steps and three looks: the law
refuses, the carrier will not issue, and the rest is worth knowing.
⚠ EVERY TOKEN HERE IS DEFINED BY BOTH HOSTS. package.css is served to the
CRM and to the employer workspace, which carry different palettes — the
danger and success BORDER tokens exist on the CRM only, so the crimson edge
is drawn with --text-danger, which both of them have. */
.pk-conflicts { display:flex; flex-direction:column; gap:10px; margin-bottom:14px; }
.pk-conflict { border:1px solid var(--border); border-left-width:4px;
border-radius:8px; padding:12px 14px; background:var(--surface-2); }
.pk-conflict.is-blocker { background:var(--bg-danger); border-left-color:var(--text-danger); }
.pk-conflict.is-carrier { background:var(--bg-warning); border-left-color:var(--border-warning); }
.pk-conflict.is-caution { background:var(--surface-2); border-left-color:var(--border); }
.pk-conflict-h { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.pk-conflict-h strong { font-size:13.5px; }
.pk-conflict-h em { font-style:normal; font-size:11px; padding:1px 7px;
border-radius:999px; background:var(--surface-1); color:var(--text-secondary); }
.pk-sev { font-size:10px; letter-spacing:.06em; text-transform:uppercase;
font-weight:700; }
.is-blocker .pk-sev { color:var(--text-danger); }
.is-carrier .pk-sev { color:var(--text-warning); }
.is-caution .pk-sev { color:var(--text-muted); }
.pk-conflict p { margin:6px 0 0; font-size:12px; line-height:1.5;
color:var(--text-secondary); }
.pk-conflict-plans { list-style:none; margin:8px 0 0; padding:0;
display:flex; flex-wrap:wrap; gap:6px; }
.pk-conflict-plans li { font-size:11.5px; padding:3px 9px; border-radius:6px;
background:var(--surface-1); border:1px solid var(--border); }
.pk-conflict-plans li span { color:var(--text-muted); font-size:10px;
text-transform:uppercase; letter-spacing:.04em; margin-left:5px; }
/* The chip that says a plan is spoken for by the package, and the sentence
that says why unticking it here would not help. Tokens only. */
/* ⚠ WHO THE PLAN IS FOR, READ AS A CHIP rather than as another grey word in the
line. On a rule about employee classes it is the fact the reader came for, so
it does not get the same weight as the funding label beside it. */
.pk-conflict-plans li span.pk-conflict-k { font-weight:600;
color:var(--text-accent); }
/* ⚠ AND NOBODY NAMED IS A STATE, NOT A BLANK. This is the plan whose position
under the rule cannot be worked out at all. */
.pk-conflict-plans li span.pk-conflict-k.is-owed { color:var(--text-danger); }
.pk-conflict-plans li span.pk-inpkg { color:var(--accent);
border:1px solid var(--border); border-radius:4px; padding:0 4px; }
.pk-conflict-note { margin:8px 0 0; font-size:11.5px; line-height:1.5;
color:var(--text-muted); }
.pk-conflict-fix { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.pk-conflict small, .pk-dialog small { display:block; margin-top:8px;
font-size:10.5px; color:var(--text-muted); }
/* Ken asked for a pop-up. It sits on the same rung of the ladder as the CRM's
own dialogs — 350 — so a panel stays open behind it rather than fighting it. */
.pk-scrim { position:fixed; inset:0; z-index:350; display:flex;
align-items:center; justify-content:center; padding:20px;
background:var(--scrim, rgba(0,0,0,.55)); }
.pk-dialog { background:var(--surface-1); border:1px solid var(--border);
border-top:4px solid var(--border); border-radius:12px; padding:20px 22px;
width:100%; max-width:560px; max-height:88vh; overflow-y:auto; }
.pk-dialog.is-blocker { border-top-color:var(--text-danger); }
.pk-dialog.is-carrier { border-top-color:var(--border-warning); }
.pk-dialog h3 { margin:0; font-size:15px; display:flex; align-items:baseline;
gap:8px; flex-wrap:wrap; }
.pk-dialog p { margin:10px 0 0; font-size:12.5px; line-height:1.55;
color:var(--text-secondary); }
.pk-dialog-who strong { color:var(--text); }
.pk-dialog-what { font-weight:600; color:var(--text) !important; }
.pk-dialog-act { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
/* ⚠ THE LAST LOOK BEFORE THE MONEY — every benefit type they asked for, and
what they have chosen against it. An empty one is stated, not alarmed at. */
.pk-review { max-width:640px; }
.pk-review-list { margin-top:14px; display:flex; flex-direction:column; gap:8px;
max-height:46vh; overflow-y:auto; }
.pk-review-line { border:1px solid var(--border); border-radius:8px;
padding:10px 12px; background:var(--surface-2); }
/* ⚠ THREE KINDS OF EMPTY, AND ONLY ONE OF THEM IS A GAP. Waiting on quotes
and carrying on unchanged are the system working; nothing chosen where the
quotes are already in is the one to look at. */
.pk-review-line.is-empty { background:var(--bg-warning);
border-color:var(--border-warning); }
.pk-review-line.is-awaiting,
.pk-review-line.is-continuing { background:var(--surface-0); }
.pk-review-line.is-empty .pk-review-h span { color:var(--text-warning); }
.pk-review-why { font-size:11.5px; color:var(--text-muted); margin:6px 0 0; }
.pk-review-h { display:flex; align-items:baseline; justify-content:space-between;
gap:10px; }
.pk-review-h strong { font-size:13px; }
.pk-review-h span { font-size:10.5px; color:var(--text-muted);
text-transform:uppercase; letter-spacing:.04em; white-space:nowrap; }
.pk-review-line ul { list-style:none; margin:8px 0 0; padding:0;
display:flex; flex-direction:column; gap:4px; }
.pk-review-line li { display:flex; align-items:baseline; gap:10px;
justify-content:space-between; font-size:12px; }
.pk-review-p i { font-style:normal; color:var(--text-muted); font-size:11px; }
.pk-review-c { font-size:10.5px; padding:1px 8px; border-radius:999px;
background:var(--surface-1); border:1px solid var(--border);
color:var(--text-secondary); white-space:nowrap; }
.pk-review-note { font-size:11.5px; color:var(--text-muted); margin-top:12px; }
.pk-review-note.is-gap { color:var(--text-warning); font-weight:600; }
@media (max-width:1200px) {
/* Below this the five tracks stop fitting; the row becomes two lines rather
than squeezing the plan name to nothing. */
.pk-plan, .pk-plan:has(.pk-plan-c), .pk-plan:has(.pk-plan-m),
.pk-plan:has(.pk-plan-c):has(.pk-plan-m) {
grid-template-columns:minmax(0,1fr) auto; }
.pk-plan-c, .pk-plan-m { grid-column:1 / -1; }
.pk-plan-x { grid-column:1 / -1; }
}
.pk-plan-c { min-width:0; }
/* ⚠ flex-basis, NOT width — index.html's blanket `select { width:100% }` scores
(0,2,1) and beats a plain class, which is what stretched the Max Deductible
field across the whole filter bar on 2026-08-27. A select that is not a flex
item needs the same care by another route. */
/* ⚠ LEFT-JUSTIFIED IN ITS COLUMN, so it sits close to the plan it is about.
Ken, 2026-08-28: "justify that drop down to the left of its column so that it
shows closer to the plan name". */
.pk-plan-c { text-align:left; }
.pk-plan-c select { display:block; width:100%; max-width:232px; font-size:12px;
padding:5px 8px; }
/* ⚠ CRIMSON UNTIL SOMEBODY ANSWERS. Not decoration — employer_save_plan_picks
refuses a chosen plan whose offered_to is still null, so this is the screen
showing what the save will not accept. */
.pk-plan-c select.is-unanswered { border-color:var(--text-danger);
background:var(--bg-danger); color:var(--text-danger); font-weight:600; }
.pk-plan-c select.is-answered { border-color:var(--text-success);
background:var(--bg-success); color:var(--text-success); }
.pk-plan.is-on { border-color:var(--accent); }
.pk-plan-t em { display:block; font-style:normal; font-size:11.5px;
color:var(--text-muted); margin-top:1px; }
.pk-plan-r { display:flex; gap:8px; align-items:center; flex-wrap:wrap;
justify-content:flex-end; }
.pk-base { display:flex; gap:5px; align-items:center; font-size:11.5px;
color:var(--text-muted); cursor:pointer; white-space:nowrap; }
/* Phase 3 — the money */
/* Which plan the employer's share is measured from — asked here because here is
where the answer is used, and only where a line offers more than one plan. */
.pk-baseline { display:flex; align-items:center; flex-wrap:wrap; gap:6px 10px;
margin-bottom:10px; font-size:12px; }
.pk-baseline > span { color:var(--text-muted); white-space:nowrap; }
.pk-baseline select { flex:0 1 260px; min-width:0; font-size:12px; padding:4px 8px; }
.pk-baseline em { flex:1 1 100%; font-style:normal; font-size:11.5px;
color:var(--text-muted); }
.pk-chosen { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; }
.pk-chip.is-base { border-color:var(--accent); color:var(--accent); font-weight:650; }
/* The agent's own advice, and the mark somebody left while comparing. */
.pk-chip.is-rec { border-color:var(--accent); color:var(--accent); font-weight:650; }
.pk-chip.is-tag { border-color:var(--border); color:var(--text-muted); }
.pk-money { display:grid; gap:10px; align-items:center; padding:9px 0;
border-top:1px dashed var(--border);
grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) auto minmax(0,1fr); }
.pk-money.is-gap { background:var(--bg-warning); border-radius:6px;
padding-left:8px; padding-right:8px; }
.pk-money.is-none { grid-template-columns:minmax(0,1fr) minmax(0,3fr); opacity:.75; }
.pk-money span { font-size:12px; color:var(--text-muted); }
.pk-money em { font-style:normal; font-size:11.5px; color:var(--text-muted); }
.pk-money-v { display:flex; align-items:center; gap:4px; white-space:nowrap; }
.pk-money-v input { width:78px; }
@media (max-width:720px) {
.pk-plan { grid-template-columns:minmax(0,1fr); }
.pk-plan-r { justify-content:flex-start; }
.pk-money { grid-template-columns:minmax(0,1fr); }
.pk-money.is-none { grid-template-columns:minmax(0,1fr); }
}
/* The budget mark, and the level that lands on it. */
.pk-budget { padding:10px 12px; border-radius:8px; background:var(--surface-2);
margin-bottom:12px; border:1px solid var(--border); }
.pk-budget.is-quiet { background:transparent; }
.pk-budget.is-over { border-color:var(--text-warning); }
.pk-budget.is-within { border-color:var(--accent); }
.pk-mark { display:flex; align-items:center; gap:6px; flex-wrap:wrap;
font-size:12.5px; }
.pk-mark i { font-style:normal; }
.pk-mark input { width:110px; }
.pk-solve { display:flex; gap:22px; flex-wrap:wrap; margin-top:10px; }
.pk-solve div { display:flex; flex-direction:column; }
.pk-solve strong { font-size:15px; font-variant-numeric:tabular-nums; }
.pk-solve span { font-size:11px; color:var(--text-muted); }
.pk-solve .over strong { color:var(--text-warning); }
.pk-solve .ok strong { color:var(--accent); }
.pk-budget .pk-why { display:block; margin-top:8px; line-height:1.6; }
/* Phase 4 — the review */
.pk-totals { display:flex; gap:26px; flex-wrap:wrap; margin-bottom:16px;
padding-bottom:14px; border-bottom:1px solid var(--border); }
.pk-totals div { display:flex; flex-direction:column; }
.pk-totals strong { font-size:19px; font-variant-numeric:tabular-nums; }
.pk-totals span { font-size:11px; color:var(--text-muted); }
.pk-totals .wide strong { color:var(--accent); }
/* ⚠ THE FINAL REVIEW'S TOTALS ARE CARDS OF THEIR OWN. Ken, 2026-09-13: "Make
all of these their own like Chip Cards with a border and color to the theme,
like our blue color". Scoped to the review; the other screen that uses
.pk-totals keeps its plain row. */
.pk-rev-totals .pk-totals { gap:12px; }
.pk-rev-totals .pk-totals > div { flex:1 1 180px; gap:3px; padding:12px 16px;
background:var(--bg-accent); border:1px solid var(--border-accent);
border-radius:var(--radius); }
.pk-rev-totals .pk-totals > div { gap:6px; padding:14px 18px; }
.pk-rev-totals .pk-totals span { font-size:10.5px; font-weight:600; letter-spacing:.06em;
text-transform:uppercase; color:var(--text-secondary); }
.pk-rev-totals .pk-totals strong { display:flex; align-items:baseline; flex-wrap:wrap;
font-size:22px; font-weight:700; line-height:1.15; letter-spacing:-.01em;
color:var(--text-accent); font-variant-numeric:tabular-nums; white-space:nowrap; }
.pk-rev-totals .pk-totals strong em { font-style:normal; font-size:12px; font-weight:500;
letter-spacing:0; color:var(--text-muted); margin:0 7px; }
.pk-lines { display:flex; flex-direction:column; }
.pk-lrow { display:grid; gap:12px; align-items:center; padding:9px 0;
border-bottom:1px dashed var(--border);
grid-template-columns:minmax(0,1fr) auto minmax(0,140px); }
.pk-lrow.is-prov { border-left:3px solid var(--text-warning); padding-left:8px; }
.pk-lrow-n em { display:block; font-style:normal; font-size:11.5px;
color:var(--text-muted); margin-top:1px; }
.pk-lrow-c { font-variant-numeric:tabular-nums; white-space:nowrap; text-align:right; }
.pk-lrow-c i { font-style:normal; font-size:10.5px; color:var(--text-muted);
display:block; }
.pk-lrow-b { text-align:right; }
.pk-stops { margin:8px 0 8px 18px; padding:0; line-height:1.7; }
@media (max-width:720px) {
.pk-lrow { grid-template-columns:minmax(0,1fr) auto; }
.pk-lrow-b { grid-column:1 / -1; text-align:left; }
}
/* ══ PHASE 4, REBUILT — 2026-09-12 ══════════════════════════════════
Ken: "I want it CLEAN and easy to read for the user and tells them exactly
what they have chosen and what is left out there to accomplish."
So: one benefit per card, cards gathered under a heading that answers "can
this go to a carrier or not", and every colour carried on the card's own
left edge so the answer is legible before a word is read.
⚠ EVERY COLOUR IS A TOKEN BOTH HOSTS DECLARE. package.css is served to the
CRM and to MyIApro, and a token only one of them defines simply does not
paint on the other — which has now happened five times on this page.
check-both-hosts-define-every-token.js is what stops the sixth. */
.pk-rev-why { font-size:12px; color:var(--text-muted); line-height:1.65;
margin:0 0 6px; }
.pk-rev-why.is-warn { color:var(--text-warning); }
.pk-rev-grp { margin:22px 0 0; }
/* The totals close the page now (Ken, 2026-09-12), so they need room above
them from the banner they follow. */
.pk-rev-totals { margin-top:18px; }
.pk-rev-grp h3 { font-size:13px; letter-spacing:.04em; text-transform:uppercase;
margin:0 0 2px; display:flex; align-items:center; gap:8px; }
.pk-rev-grp h3 em { font-style:normal; font-size:11px; font-weight:600;
padding:1px 8px; border-radius:999px; background:var(--surface-2);
color:var(--text-muted); font-variant-numeric:tabular-nums; }
.pk-rev-gnote { font-size:12px; color:var(--text-muted); margin:0 0 10px;
line-height:1.6; }
.pk-rev-grp.is-ready h3 { color:var(--text-success); }
.pk-rev-grp.is-todo h3 { color:var(--text-warning); }
.pk-rev-grp.is-ready_pending_rates h3 { color:var(--gold-deep); }
.pk-rev-grp.is-quotes h3 { color:var(--gold-deep); }
.pk-rev-b { border:1px solid var(--border); border-radius:var(--radius);
border-left-width:4px; padding:12px 14px; margin-bottom:10px;
background:var(--surface-2); }
.pk-rev-b.is-ready { border-left-color:var(--text-success); }
.pk-rev-b.is-todo { border-left-color:var(--text-warning); }
.pk-rev-b.is-ready_pending_rates { border-left-color:var(--gold-deep); }
.pk-rev-b.is-quotes { border-left-color:var(--gold-deep); }
.pk-rev-b > header { display:flex; align-items:center; gap:8px; flex-wrap:wrap;
margin-bottom:8px; }
.pk-rev-b h4 { margin:0; font-size:15px; flex:1 1 auto; }
.pk-rev-b .pk-chip.is-ready { color:var(--text-success);
border-color:var(--text-success); }
.pk-rev-b .pk-chip.is-todo { color:var(--text-warning);
border-color:var(--text-warning); }
.pk-rev-b .pk-chip.is-ready_pending_rates,
.pk-rev-b .pk-chip.is-quotes { color:var(--gold-deep); border-color:var(--gold-deep); }
.pk-rev-plans, .pk-rev-covers ul { list-style:none; margin:0 0 8px; padding:0; }
.pk-rev-plans li, .pk-rev-covers li { display:flex; align-items:baseline;
gap:8px; flex-wrap:wrap; padding:3px 0; font-size:13px; }
.pk-rev-plans li b, .pk-rev-covers li b { font-weight:600; }
.pk-rev-plans li i, .pk-rev-covers li i { font-style:normal; font-size:11.5px;
color:var(--text-muted); }
.pk-rev-plans li em { font-style:normal; font-size:11px; color:var(--text-muted);
border:1px solid var(--border); border-radius:999px; padding:1px 7px; }
.pk-rev-covers { margin-top:2px; }
.pk-rev-covers h5 { margin:0 0 3px; font-size:11px; letter-spacing:.03em;
text-transform:uppercase; color:var(--text-muted); font-weight:600; }
/* ⚠ LABEL ABOVE VALUE, NOT A TABLE. Three of these sit side by side on a wide
screen and stack on a narrow one, and the value is the thing being read. */
.pk-rev-money { display:flex; flex-wrap:wrap; gap:8px 26px; margin:10px 0 0; }
.pk-rev-money > div { display:flex; flex-direction:column; min-width:0; }
.pk-rev-money dt { font-size:10.5px; letter-spacing:.03em; text-transform:uppercase;
color:var(--text-muted); margin-bottom:2px; }
.pk-rev-money dd { margin:0; font-size:13px; line-height:1.55; }
.pk-rev-money dd.num { font-variant-numeric:tabular-nums; font-weight:600; }
.pk-rev-money dd i { font-style:normal; font-weight:400; font-size:11px;
color:var(--text-muted); }
/* ⚠ ONE ROW PER SENTENCE. Ken, 2026-09-13: the contribution line should fit
"on one row instead of wrapping"; a narrow screen may still wrap it. */
.pk-rev-money dd span { display:block; white-space:nowrap; }
@media (max-width: 760px) { .pk-rev-money dd span { white-space:normal; } }
/* Ken, 2026-09-13: "Medical Applications Required", beside the benefit name,
and "Gathering Med Apps" once it has been started. */
.pk-rev-medapps { font:inherit; font-size:12px; font-weight:600; padding:4px 12px;
border-radius:999px; cursor:pointer; white-space:nowrap;
border:1px solid var(--text-warning); background:var(--bg-warning); color:var(--text-warning); }
.pk-rev-medapps:hover { filter:brightness(.96); text-decoration:underline; }
.pk-rev-medapps:focus-visible { outline:2px solid var(--text-warning); outline-offset:2px; }
.pk-rev-b .pk-chip.is-gathering { color:var(--text-accent); border-color:var(--text-accent);
background:var(--bg-accent); }
.pk-rev-uw { margin:2px 0 10px; font-size:12.5px; color:var(--text-secondary); }
.pk-rev-uw p { margin:0 0 4px; }
.pk-rev-uw .is-ask, .pk-rev-uw.is-ask { color:var(--text-warning); }
.pk-rev-uw summary { cursor:pointer; color:var(--text-accent); font-size:12px; }
.pk-rev-uw ul { list-style:none; margin:6px 0 0; padding:0; columns:2 220px; }
.pk-rev-uw li { display:flex; justify-content:space-between; gap:8px; padding:2px 0; break-inside:avoid; }
.pk-rev-uw li em { font-style:normal; color:var(--text-muted); font-size:11.5px; }
.pk-rev-uw li.is-done em { color:var(--text-success); font-weight:600; }
.pk-rev-instr { margin:2px 0 8px; font-size:12.5px; font-style:italic;
color:var(--crimson, var(--text-danger)); }
.pk-rev-instr.is-done { font-style:normal; font-weight:700; color:var(--text-success); }
.pk-rev-money dd span + span { margin-top:2px; }
/* ══ FINAL REVIEW AS A MENU — 2026-09-13 ══════════════════════════════════
Benefit, then each employee class, then its plans with a sign-off box and the
rates behind a disclosure. Ken: the pending note does not wrap. */
.pk-rev-grp.is-ready_pending_rates .pk-rev-gnote { white-space:nowrap; max-width:none;
overflow-x:auto; }
.pk-rev-cls { margin:6px 0 10px; }
.pk-rev-cls + .pk-rev-cls { border-top:1px dashed var(--border); padding-top:8px; }
.pk-rev-cls h5 { margin:0 0 2px; font-size:13px; font-weight:650; }
.pk-rev-rule { margin:0 0 6px; font-size:12px; color:var(--text-muted); line-height:1.6; }
.pk-rev-rule i { font-style:normal; font-size:10.5px; letter-spacing:.03em;
text-transform:uppercase; margin-right:6px; }
.pk-rev-rule span { display:block; color:var(--text-secondary); }
/* ⚠ TWO CLASSES, BECAUSE `.pk-rev-plans li` IS display:flex AND OUTRANKS ONE.
With a lone `.pk-rev-plan` the plan's row and its rate table sat side by side
when they fitted and dropped to the left when they did not — which is the
"right in one area, down to the left on others" Ken saw. */
.pk-rev-plans li.pk-rev-plan, .pk-rev-covers li.pk-rev-plan { display:block; padding:4px 0; }
.pk-rev-prow { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:13px; }
.pk-rev-right { margin-left:auto; display:inline-flex; align-items:center; gap:16px; }
.pk-rev-det-btn { background:none; border:0; padding:0; font:inherit; font-size:12px;
color:var(--text-accent); cursor:pointer; white-space:nowrap; }
.pk-rev-det-btn:hover { text-decoration:underline; }
.pk-rev-det-btn:focus-visible { outline:2px solid var(--text-accent); outline-offset:2px; }
.pk-rev-det-btn[aria-expanded="true"] { font-weight:600; }
.pk-rev-lock { position:relative; min-width:58px; text-align:right; font-size:11px; font-weight:700;
letter-spacing:.08em; color:var(--text-success); cursor:default; }
.pk-rev-lock[data-tip] { cursor:help; border-radius:3px; }
.pk-rev-lock[data-tip]:focus-visible { outline:2px solid var(--text-accent); outline-offset:2px; }
/* Who and when, the moment the pointer lands on LOCKED (or it takes focus). */
.pk-rev-lock[data-tip]:hover::after,
.pk-rev-lock[data-tip]:focus-visible::after {
content:attr(data-tip); position:absolute; right:0; bottom:calc(100% + 6px); z-index:30;
white-space:nowrap; pointer-events:none;
background:var(--text-primary); color:var(--surface-0);
font-size:11.5px; font-weight:500; letter-spacing:0; line-height:1.3;
padding:5px 9px; border-radius:6px; box-shadow:var(--shadow); }
.pk-rev-prow b { font-weight:600; }
.pk-rev-prow i { font-style:normal; font-size:11.5px; color:var(--text-muted); }
.pk-rev-sign { width:16px; height:16px; margin:0; align-self:center; cursor:pointer;
accent-color:var(--text-success); }
.pk-rev-sign:disabled { cursor:not-allowed; opacity:.45; }
.pk-rev-plan.is-signed .pk-rev-prow b { color:var(--text-success); }
/* Every rate table's right edge on the row's right edge, so they line up. */
.pk-rev-det { display:flex; flex-direction:column; align-items:flex-end; margin:4px 0 2px; }
.pk-rev-det > p { text-align:right; }
.pk-rev-det .pk-rev-tt-wrap { max-width:100%; }
.pk-rev-load { font-size:12px; color:var(--text-muted); margin:6px 0; }
.pk-rev-frozen { font-size:11px; color:var(--text-success); margin:6px 0 0; font-weight:600; }
.pk-rev-tt-wrap { overflow-x:auto; margin-top:6px; }
.pk-rev-tt { border-collapse:collapse; font-size:12.5px; font-variant-numeric:tabular-nums; }
.pk-rev-tt th, .pk-rev-tt td { padding:4px 12px 4px 0; text-align:right;
border-bottom:1px solid var(--border); white-space:nowrap; }
.pk-rev-tt thead th { font-size:10.5px; letter-spacing:.03em; text-transform:uppercase;
color:var(--text-muted); font-weight:600; }
.pk-rev-tt tbody th { text-align:left; font-weight:600; }
.pk-rev-todo, .pk-rev-cav { margin:10px 0 0 18px; padding:0; font-size:12.5px;
line-height:1.7; }
.pk-rev-todo { color:var(--text-warning); }
.pk-rev-cav { color:var(--text-muted); }
/* The classes side by side against one mark. */
.pk-classes { display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; }
.pk-cls { flex:1 1 220px; min-width:0; padding:10px 12px; border-radius:8px;
border:1px solid var(--border); background:var(--surface-1); }
.pk-cls.is-over { border-color:var(--text-warning); }
.pk-cls strong { display:block; }
.pk-cls span { display:block; font-size:11px; color:var(--text-muted); margin-top:1px; }
.pk-cls b { display:block; font-size:20px; margin-top:6px;
font-variant-numeric:tabular-nums; }
.pk-cls.is-over b { color:var(--text-warning); }
.pk-cls em { display:block; font-style:normal; font-size:11px; color:var(--text-muted); }
.pk-cls-s { margin-top:6px !important; padding-top:6px;
border-top:1px dashed var(--border); }
.pk-why.is-warn { color:var(--text-warning); font-weight:600; }
/* Stage 6 — contracts */
.pk-terms { display:flex; flex-direction:column; }
.pk-trow { display:grid; gap:12px; align-items:center; padding:9px 0;
border-bottom:1px dashed var(--border);
grid-template-columns:minmax(0,1fr) auto minmax(0,150px); }
.pk-trow.is-diff { border-left:3px solid var(--text-warning); padding-left:8px; }
.pk-trow-n em { display:block; font-style:normal; font-size:11.5px;
color:var(--text-muted); margin-top:1px; }
.pk-trow-h { display:flex; align-items:center; gap:6px; font-size:11.5px;
color:var(--text-muted); white-space:nowrap; }
.pk-trow-h input { width:86px; }
.pk-trow i { font-style:normal; font-size:11px; color:var(--text-warning);
text-align:right; }
.pk-sign { margin-top:14px; padding-top:14px; border-top:1px solid var(--border); }
@media (max-width:720px) {
.pk-trow { grid-template-columns:minmax(0,1fr); }
.pk-trow i { text-align:left; }
}
/* ═══ WHICH BENEFITS — ONE ALIGNED LIST, FOUR COLUMNS ═════════════════
Ken, 2026-08-27: "just TAKE out the TODAY column altogether. just clutters
things up!" — so the counts are one column, the available quotes.
⚠ ONE DEFINITION, NOT TWO. An earlier attempt appended new rules and left the
old ones in place, so two different .pk-type grids fought each other — a
three-column layout underneath a two-column one — while rules for elements the
markup no longer emits went on reserving space.
⚠ AND THE COLUMNS ARE SIZED, NOT SHARED. Fractions let a long phrase in one
column squeeze the benefit name in another, which is how "everything lines up"
quietly stops being true. Every column but the name is a fixed width. */
.pk-types { display:flex; flex-direction:column; gap:5px; }
.pk-type { display:grid; align-items:center; gap:12px; padding:10px 14px;
border:1px solid var(--border); border-radius:8px; background:var(--surface-1);
grid-template-columns:minmax(0,1fr) 104px 196px 132px; }
.pk-type.is-on { border-color:var(--accent); }
.pk-type.is-off { opacity:.62; }
/* The heading is a row of the same grid, so the columns cannot drift apart. */
.pk-type.is-head { border-color:transparent; background:none; padding-top:2px;
padding-bottom:2px; opacity:1; font-size:10px; letter-spacing:.06em;
text-transform:uppercase; color:var(--text-muted); }
.pk-type.is-head span { display:block; }
.pk-type.is-head .pk-type-num, .pk-type.is-head .pk-type-amt { text-align:right; }
/* ⚠ THE PACKAGE AND ITS PARTS. Ken: "All of the plans that are in the package
should be line item rows (indented) UNDER Defined Contribution!" The package
row and its plans read as one block, so the indent has to be unmistakable and
the join between them unbroken. */
.pk-type.is-pkg { border-bottom-left-radius:0; border-bottom-right-radius:0;
margin-bottom:-5px; }
.pk-type.is-sub { border-top:0; border-radius:0; margin-bottom:-5px;
padding-top:7px; padding-bottom:7px; background:var(--surface-2); }
.pk-type.is-sub + :not(.is-sub) { margin-top:5px; }
.pk-type.is-sub:last-child { border-bottom-left-radius:8px;
border-bottom-right-radius:8px; margin-bottom:0; }
/* The indent, and the absence of a tick box — a plan inside the package is not
a separate offer to accept or decline. */
.pk-type.is-sub .pk-type-l { padding-left:30px; position:relative; }
.pk-type.is-sub .pk-type-l::before { content:"\21B3"; position:absolute; left:10px;
top:0; color:var(--text-muted); opacity:.55; font-size:12px; }
.pk-type.is-sub .pk-type-l strong { font-size:12.5px; font-weight:500; }
.pk-type-l strong { display:block; font-size:13.5px; line-height:1.35;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pk-type-l b { display:block; font-weight:400; font-size:11px; line-height:1.4;
color:var(--text-muted); margin-top:1px;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* How many are on offer — a number in a numeric column, so the eye runs down it. */
.pk-type-num { text-align:right; font-size:13px; font-variant-numeric:tabular-nums;
white-space:nowrap; }
.pk-type-num i { font-style:normal; color:var(--text-muted); opacity:.5; }
.pk-type-pay { font-size:11.5px; line-height:1.3; color:var(--text-muted); }
.pk-type-amt { display:flex; align-items:center; justify-content:flex-end; gap:3px;
font-size:11px; color:var(--text-muted); white-space:nowrap; }
.pk-type-amt i { font-style:normal; }
.pk-type-amt input { width:92px; }
/* ⚠ THE ROWS WHERE THE QUESTION IS NOT ASKED, and there are two reasons for it:
a benefit paid wholly from the allowance may not hold a contribution at all
(dc_and_line_contributions_are_exclusive refuses one), and the package itself
already HAS its figure — the allowance. Either way both columns give way to
the reason, spanning the space they would have taken. */
.pk-type-none { grid-column:span 2; text-align:right; font-size:11px;
color:var(--text-muted); font-style:italic; white-space:nowrap;
overflow:hidden; text-overflow:ellipsis; }
@media (max-width:900px) {
/* The budget columns drop to their own line rather than crushing the name; the
count stays beside it, because that is what it describes. */
.pk-type { grid-template-columns:minmax(0,1fr) 104px; }
.pk-type-pay { grid-column:1 / -1; order:4; }
.pk-type-amt { grid-column:1 / -1; order:5; justify-content:flex-start; }
.pk-type-none { grid-column:1 / -1; order:4; text-align:left; }
.pk-type.is-head .pk-type-pay, .pk-type.is-head .pk-type-amt { display:none; }
.pk-type-l strong, .pk-type-l b { white-space:normal; }
}
/* ═══ A TICK BOX AND ITS WORDS ═════════════════════════════════════════════
Ken, 2026-08-27: "Whats up with the check boxes and its corresponding text
lately Claude. You seem to do this whenever there is a checkbox involved???"
He is right that it keeps happening, and it is one cause every time. A label
laid out with `display:flex` has two children that both misbehave by default:
· the has no flex-basis of its own, so it is allowed to SHRINK —
and a tick box squeezed toward zero drifts away from the words it belongs
to, which is what "split apart from its check box" looked like;
· the text has `min-width:auto`, which means it refuses to shrink below its
own content — so instead of wrapping tidily inside its column it pushes
the row wider and forces everything around it to wrap.
Neither is obvious, both are invisible until the container is narrow, and I
had been fixing them one class at a time after he spotted each one. So the
rule lives ONCE, and check-a-tick-box-keeps-its-words.js fails any new label
that wraps a checkbox without it. */
.pk-check, .pk-type-l, .pk-type-pay, .pk-plan-t {
display:flex; gap:10px; cursor:pointer; min-width:0; }
.pk-check, .pk-plan-t { align-items:flex-start; }
.pk-type-l, .pk-type-pay { align-items:center; }
.pk-type-pay { gap:7px; }
/* The box keeps its size. */
.pk-check > input, .pk-type-l > input, .pk-type-pay > input,
.pk-plan-t > input, .pk-base > input { flex:0 0 auto; }
.pk-check > input, .pk-plan-t > input { margin-top:3px; }
/* The words wrap inside their own box, beside it — never through it. */
.pk-check > span, .pk-type-l > span, .pk-type-pay > span,
.pk-plan-t > span { flex:1 1 auto; min-width:0; }
/* ═══ PHASE 3 — THE CONTRIBUTIONS DESK ══════════════════════════════
Ken's layout, 2026-08-29: the benefit types down the left, the one they are
working on to the right. */
/* ⚠ ONE ROW, AND IT DOES NOT WRAP. Ken, 2026-08-29: "its all over the place…
everything there should be no wider than one row all perfectly aligned." It was
a wrapping flex line with the explanation set to flex:1 1 240px, so on any pane
narrower than about 700px the note dropped to a second line and dragged the
question, the box and the word after it out of line with each other.
Four tracks, one per part, and align-items:center rather than baseline — an
input and 11px text have different baselines, and lining THOSE up is what made
it look ragged even before it wrapped. The note is the only thing that gives:
it shrinks and ellipsises rather than pushing anything onto a second row. */
.pk-total { display:grid; align-items:center;
grid-template-columns:max-content max-content max-content minmax(0, 1fr);
gap:0 10px; padding:11px 16px; margin-bottom:14px; border-radius:10px;
background:var(--surface-2); border:1px solid var(--border); }
.pk-total.is-differs { background:var(--bg-warning); border-color:var(--border-warning); }
.pk-total-q { font-size:13px; white-space:nowrap; }
.pk-total-v { display:inline-flex; align-items:center; gap:2px;
color:var(--text-muted); }
.pk-total-v input { width:104px; text-align:right; }
.pk-total-u { font-size:13px; white-space:nowrap; }
.pk-total em { font-style:normal; font-size:11.5px; color:var(--text-muted);
min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pk-total.is-differs em { color:var(--text-warning); }
.pk-desk { display:grid; grid-template-columns:232px minmax(0,1fr); gap:16px;
align-items:start; }
.pk-desk-nav { position:sticky; top:12px; display:flex; flex-direction:column;
gap:2px; }
.pk-desk-nav h4 { margin:0 0 6px; font-size:10px; letter-spacing:.06em;
text-transform:uppercase; color:var(--text-muted); }
.pk-desk-nav h4.pk-desk-held { margin-top:14px; }
.pk-desk-item { display:grid; grid-template-columns:18px minmax(0,1fr);
gap:2px 6px; text-align:left; padding:8px 10px; border-radius:8px;
border:1px solid transparent; background:none; cursor:pointer;
color:var(--text); font:inherit; }
.pk-desk-item:hover:not(:disabled) { background:var(--bg-hover); }
.pk-desk-item.is-on { background:var(--surface-2); border-color:var(--border); }
.pk-desk-item:disabled { cursor:default; opacity:.62; }
.pk-desk-tick { grid-row:1 / span 2; font-size:13px; line-height:1.2;
color:var(--text-success); }
.pk-desk-name { font-size:12.5px; font-weight:600; }
.pk-desk-note { font-size:10.5px; color:var(--text-muted); }
.pk-desk-item.is-awaiting .pk-desk-note { color:var(--text-warning); }
.pk-desk-plans { list-style:none; margin:0 0 14px; padding:0;
display:flex; flex-direction:column; gap:4px; }
.pk-desk-plans li { display:flex; align-items:baseline; gap:10px;
flex-wrap:wrap; font-size:12px; }
.pk-desk-plans li i { font-style:normal; color:var(--text-muted); font-size:11px; }
/* ⚠ WENT WITH THE LABEL IT DIMMED. A plan the carrier will not take employer
money for is no longer a greyed row with a warning on it: where every plan is
like that the banner says so once, and where only some are they are named
together under the list as .pk-desk-vol. Ken, 2026-09-11: "we are saying the
same thing here TWICE again!" */
.pk-desk-c { font-size:10.5px; padding:1px 8px; border-radius:999px;
background:var(--surface-2); border:1px solid var(--border);
color:var(--text-secondary); }
.pk-desk-vol { margin-top:6px; }
.pk-rule { border:1px solid var(--border); border-radius:8px; padding:12px 14px;
margin-bottom:10px; background:var(--surface-2); }
/* A benefit type nobody has answered yet, so it reads as still open. */
.pk-rule.is-gap { background:var(--surface-0); border-style:dashed; }
.pk-rule.is-none { opacity:.72; }
/* ⚠ ONE ROW, HARD LEFT, VERTICALLY CENTRED. Ken, 2026-08-28: "move them to the
SAME line as the Text all center justified vertically within the row. (Left
justified for the whole row.)"
This is the original layout MINUS justify-content:space-between, which was the
whole fault: it pinned the name to the left edge and the options to the right,
so the gap between them was whatever the card happened to be wide — and it
moved with the window. Putting them on their own line fixed the SIDE they were
on and not the spacing; this fixes both, because the row now packs to the
start and the gap is a fixed one.
The pair itself is a max-content grid (see .pk-elect), so the two options sit
at the same x on every card down the page. */
.pk-rule-h { display:flex; flex-direction:row; align-items:center;
justify-content:flex-start; gap:6px 20px; flex-wrap:wrap;
margin-bottom:6px; }
.pk-rule-h strong { font-size:13px; }
/* The inherit note takes its own line between the two, which is where it belongs
— it is about whose answer this is, so it reads before the answer. */
.pk-rule-h .pk-inherit { margin:-2px 0 0; }
/* ⚠ THE RADIO AND ITS WORDS ARE ONE THING. A flex row let the browser put the
control on the text baseline, which sits it slightly high against the cap
height; a two-track inline grid centres it on the line instead.
⚠ AND THE PAIRS LINE UP DOWN THE PAGE. Ken, 2026-08-28: "The radio buttons
STILL do not line up VERTICALLY to one another!!!!"
Moving them under the group name fixed which SIDE they were on and not this.
As a flex row each label is only as wide as its own words, so the SECOND radio
started wherever the first label's text happened to end — a different x on
every card, because "No contribution" and the elect wording are not the same
length as each other and the cards do not all show the same pair. Reading down
the page, nothing lined up with anything.
Fixed tracks instead: both options get the same width on every card, so the
first radio and the second radio each sit at one x all the way down. minmax
keeps it from overflowing a narrow pane, where they wrap to their own lines
and are still aligned. */
/* ⚠ AND THE FIX FOR THAT WAS ITSELF WRONG. Ken, 2026-08-28, with a screenshot:
"DO these radio buttons look like they are 'lined up' to you???" — no. Fixed
12.5rem tracks did make the second radio land at the same x on every card, and
left a canyon between a 7em label and the option after it. Aligned and ugly.
The premise was wrong. These two labels are ALWAYS the same two strings on
every premium rule, so their natural widths are already identical card to card
— there was never anything to force. max-content tracks put them side by side
at a readable distance AND land at the same x down the page, because the same
words are the same width everywhere. justify-content keeps the pair at the
left rather than spread across whatever width the card happens to be. */
.pk-elect { display:grid; grid-template-columns:max-content max-content;
justify-content:start; gap:6px 22px; font-size:11.5px;
color:var(--text-secondary); align-items:center; }
.pk-elect label { display:inline-grid; grid-template-columns:auto 1fr;
align-items:center; gap:6px; white-space:nowrap; cursor:pointer; }
.pk-elect input[type=radio] { margin:0; }
/* ═══ THE THREE PARTS OF THE ANSWER ═════════════════════════════
Ken, 2026-08-28: who is being paid for, then TOWARD EMPLOYEE CONTRIBUTION,
then TOWARD DEPENDENTS — "with a line feed and a 5 or 10 space indent for the
remaining selections". The indent is in ems rather than spaces so it holds
whatever the font does. */
.pk-say { margin-top:12px; }
.pk-say h6 { margin:0 0 2px; font-size:10px; font-weight:700; letter-spacing:.06em;
text-transform:uppercase; color:var(--text-muted); }
.pk-say .pk-rule-line { margin-top:2px; }
.pk-rule-line.pk-indent { margin-left:2.5em; }
/* ⚠ THE SENTENCE HAS TO READ AS A SENTENCE, so the controls sit ON the line of
text rather than in a form grid beside it. */
.pk-rule-line { margin:6px 0 0; font-size:12.5px; line-height:2.1;
color:var(--text-secondary); }
.pk-rule-line b { color:var(--text); }
.pk-rule-line select { display:inline-block; width:auto; vertical-align:baseline;
margin:0 2px; }
.pk-rule-line .pk-v { display:inline-flex; align-items:baseline; gap:1px;
margin:0 2px; }
.pk-rule-line .pk-v input { width:62px; text-align:right; display:inline-block; }
.pk-rule-line.is-quiet { color:var(--text-muted); line-height:1.5; }
.pk-rule-line.is-locked em { display:block; font-style:normal; font-size:10.5px;
color:var(--text-muted); line-height:1.4; margin-top:2px; }
@media (max-width:900px) {
/* Below this the nav stops earning a column of its own. */
.pk-desk { grid-template-columns:minmax(0,1fr); }
.pk-desk-nav { position:static; flex-direction:row; flex-wrap:wrap; }
.pk-desk-nav h4 { flex:1 0 100%; }
}
/* ═══ WHICH CLASS AM I ANSWERING FOR? ════════════════════════════
Ken, 2026-08-28: keep this in line with the deal card's dialog. The class is a
MODE at the top of the pane — a strip of chips — and the cards below are the
eligibility groups, unchanged whichever chip is on.
What was here was the opposite: an indented grid of radio pairs nested inside
every card, one row per class, with a whole second rule form unfolding beneath
each. It is gone, and so is .pk-rule-sub, which existed only to restyle a form
drawn inside another one. */
.pk-answerbar { border:1px solid var(--border); border-radius:10px;
padding:10px 12px; margin:0 0 14px; background:var(--surface-0); }
/* ⚠ THE LABEL AND THE COUNT SHARE A ROW, and the count is not shouted — it is
context for the chips underneath, not a heading of its own. Ken, 2026-08-28:
"move that blurp next to the Answering For text of the class buttons header." */
.pk-answerbar h5 { margin:0 0 7px; font-size:10px; letter-spacing:.06em;
text-transform:uppercase; color:var(--text-muted); font-weight:700;
display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.pk-answerbar h5 em { font-style:normal; font-weight:500; font-size:11px;
letter-spacing:0; text-transform:none; color:var(--text-secondary); }
.pk-answerchips { display:flex; flex-wrap:wrap; gap:6px; }
.pk-answerchip { cursor:pointer; font:inherit; font-size:12px; line-height:1.4;
white-space:nowrap; padding:3px 12px; border-radius:99px;
border:1px solid var(--border); background:transparent;
color:var(--text-primary); }
.pk-answerchip:hover { border-color:var(--border-accent); }
.pk-answerchip.is-on { border-color:var(--border-accent);
background:var(--bg-accent); color:var(--text-accent); }
.pk-answerchip:focus-visible { outline:2px solid var(--border-accent);
outline-offset:2px; }
.pk-answernote { margin:7px 0 0; font-size:11px; line-height:1.5;
color:var(--text-muted); }
/* Said on the card, beside the group it belongs to — never as a second heading
competing with the group's own name. */
.pk-inherit { font-size:10.5px; line-height:1.4; color:var(--text-warning);
font-weight:400; }
.pk-inherit.is-own { color:var(--text-accent); }
.pk-inherit a { color:var(--text-muted); margin-left:6px; }
/* ═══ WHAT APPLIES WHEN TWO CLASSES ARE PAID DIFFERENTLY ═══════════════════
Ken, 2026-08-28: "we have to follow the rules and regulations of what and what
cannot be done". Drawn where the money is decided, and only once somebody is
actually paying two classes differently — a note that is always there is
wallpaper. */
.pk-law { border:1px solid var(--border); border-left:3px solid var(--border-accent);
border-radius:10px; padding:0; margin:0 0 14px; background:var(--surface-0); }
/* ⚠ SHUT BY DEFAULT, AND CHEAP TO OPEN. Ken, 2026-08-28: above the plans, on a
collapsible control, collapsed. The whole summary is the hit area — a triangle
on its own is a target nobody can hit. */
.pk-law > summary { cursor:pointer; list-style:none; padding:10px 13px;
display:flex; align-items:baseline; gap:6px 14px; flex-wrap:wrap; }
.pk-law > summary::-webkit-details-marker { display:none; }
.pk-law > summary::before { content:'\25B8'; font-size:10px; line-height:1;
color:var(--text-muted); transition:transform .12s ease; }
.pk-law[open] > summary::before { transform:rotate(90deg); }
.pk-law > summary span { font-size:10px; letter-spacing:.06em;
text-transform:uppercase; color:var(--text-muted); font-weight:700; }
/* ⚠ THE COUNT SITS BESIDE THE LABEL, NOT AT THE FAR EDGE. Ken, 2026-08-28:
"adjust the spacing between the text and where you add on the number of
'things apply'. It is all run together!" margin-left:auto shoved it to the
right-hand edge of the card, so on a narrow pane it wrapped straight under the
label with no space at all — the same "the gap moves with the window" fault as
the radios. A fixed gap, and its own breathing room when it does wrap. */
.pk-law > summary em { font-style:normal; font-size:11px; color:var(--text-muted);
padding-left:2px; }
.pk-law > summary:hover span { color:var(--text-primary); }
.pk-law > summary:focus-visible { outline:2px solid var(--border-accent);
outline-offset:-2px; border-radius:9px; }
/* ⚠ SHUT IS THE LOUD STATE. Ken, 2026-08-28: "IF there is a LAW block and is
Collapsed, we need a different color to draw the users attention to maybe take
a look at the block."
The block only exists at all when two classes are being paid differently, so
its presence IS the news — and folded away in the page's own colours it reads
as furniture. Accented while shut, quiet once opened: the colour is there to
get it read, and it has done its job the moment it has been. Driven off
:not([open]), so it follows the person's own opening rather than a flag of
mine that the next repaint would reset. */
/* ⚠ CRIMSON WHILE SHUT. Ken, 2026-08-28: "if your showing the law block and it
is COLLAPSED, turn the text to CRIMSON RED!!!" The accent was the CRM's own
gold, which is the colour of everything else on the page — it did not read as
"look at this", it read as more furniture. --text-danger is the crimson the
token set already carries, and it has a light and a dark value, so this stays
theme-aware rather than one literal colour that would vanish on one of them.
(Naming that literal even inside a comment trips the no-hex guard, which is
the guard doing its job — it cannot tell a comment from a declaration and
should not have to.) */
.pk-law:not([open]) { border-color:var(--border-danger);
background:var(--bg-danger); }
.pk-law:not([open]) > summary::before,
.pk-law:not([open]) > summary span,
.pk-law:not([open]) > summary em { color:var(--text-danger); }
.pk-law:not([open]) > summary em { font-weight:600; }
/* ⚠ A REFUSAL DOES NOT CALM DOWN WHEN YOU OPEN IT. Marked either way, because
"you cannot do this" does not stop being true once it has been read — and this
one starts open for the same reason. */
.pk-law.is-blocking { border-left-color:var(--border-warning); }
.pk-law.is-blocking:not([open]) { border-color:var(--border-warning);
background:var(--bg-warning); }
.pk-law.is-blocking > summary::before,
.pk-law.is-blocking > summary span,
.pk-law.is-blocking > summary em { color:var(--text-warning); }
.pk-law .pk-law-item { padding:0 13px 11px; }
.pk-law .pk-law-item:first-of-type { padding-top:2px; }
.pk-law-item + .pk-law-item { padding-top:11px;
border-top:0.5px dashed var(--border); }
.pk-law-item strong { display:block; font-size:12.5px; line-height:1.45;
color:var(--text-primary); }
.pk-law-item p { margin:4px 0 0; font-size:11.5px; line-height:1.6;
color:var(--text-muted); }
.pk-law-item cite { display:block; margin-top:4px; font-style:normal;
font-size:10.5px; letter-spacing:.02em; color:var(--text-muted); opacity:.85; }
/* A blocker is not a warning about tax — it is the arrangement refusing. */
.pk-law-item.is-blocker strong { color:var(--text-warning); }
/* ═══ WHAT IT LOOKS LIKE ═══════════════════════════════════════════════════
Ken, 2026-08-28: the true numbers, below the contributions, for the benefit
type and the class in view. It reads as a small statement rather than a table
— three figures and a sentence saying what they depend on, because a figure
whose basis is not stated is a figure somebody will budget against wrongly. */
.pk-look { margin-top:14px; border:1px solid var(--border);
border-left:3px solid var(--border-accent); border-radius:10px;
padding:11px 13px; background:var(--surface-0); }
.pk-look h5 { margin:0 0 8px; font-size:10px; letter-spacing:.06em;
text-transform:uppercase; color:var(--text-muted); font-weight:700;
display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.pk-look h5 em { font-style:normal; font-weight:500; font-size:11px;
letter-spacing:0; text-transform:none; color:var(--text-secondary); }
.pk-look-row { display:flex; align-items:baseline; justify-content:space-between;
gap:16px; padding:4px 0; font-size:12.5px; color:var(--text-secondary);
border-bottom:0.5px dashed var(--border); }
.pk-look-row:last-of-type { border-bottom:0; }
/* ⚠ TABULAR FIGURES, because these are read down a column against each other
and proportional digits make $11,540 and $13,020 look different widths. */
.pk-look-row b { font-variant-numeric:tabular-nums; font-size:13px;
color:var(--text-primary); }
.pk-look-row.is-employer b { color:var(--text-accent); }
.pk-look-why { margin:8px 0 0; font-size:11px; line-height:1.55;
color:var(--text-muted); }
/* ═══ THE RECOMMENDATION BESIDE EACH BENEFIT ═══════════════════════════════
Ken, 2026-08-28: the contribution that keeps this benefit inside the budget,
in the tree, with the reason in a TOOLTIP so the tree stays a tree. */
.pk-adv { margin-left:auto; font-size:10.5px; font-weight:600; line-height:1.3;
padding:1px 7px; border-radius:99px; white-space:nowrap; cursor:help;
font-variant-numeric:tabular-nums; }
/* Inside the budget is not a warning — it is the answer, and often the useful
one: TJ can afford to pay far more than they are. */
.pk-adv.is-room { color:var(--text-success); background:var(--bg-success); }
.pk-adv.is-over { color:var(--text-danger); background:var(--bg-danger); }
.pk-adv.is-none { color:var(--text-muted); background:transparent; font-weight:400; }
/* ═══ WHAT THE PLAN PAYS, UNDER THE PLAN ══════════════════════════════════════
Ken, 2026-09-05. Opens in place inside the row rather than over it: this is a
wizard with unsaved ticks on it, and the employer's page has no dialog stack
at all. Every colour is a token, so it follows the theme like everything else. */
.pk-chip.is-link { background:transparent; border:1px solid var(--border);
color:var(--text-muted); cursor:pointer; font:inherit; font-size:11px;
padding:2px 8px; border-radius:999px; }
.pk-chip.is-link:hover { color:var(--text); border-color:var(--text-muted); }
.pk-plan-d { grid-column:1 / -1; margin:8px 0 2px; padding:10px 12px;
border:1px solid var(--border); border-radius:9px; background:var(--surface-2); }
.pk-plan-d-h { font-size:11px; color:var(--text-muted); margin-bottom:6px; }
.pk-plan-d-g { font-size:10px; letter-spacing:.09em; text-transform:uppercase;
font-weight:700; color:var(--text-muted); margin:9px 0 3px; }
.pk-plan-d-r { display:grid; grid-template-columns:1fr 1.4fr; gap:12px;
padding:4px 0; border-bottom:0.5px solid var(--border); font-size:12.5px; }
.pk-plan-d-r > span:first-child { color:var(--text-muted); }
.pk-plan-d-r span span { display:block; font-size:11px; color:var(--text-muted); }
.pk-plan-d em { color:var(--text-muted); font-size:11.5px; }
.pk-plan-d .pk-warn { color:var(--text-warning); font-size:12px; }
.pk-plan-d .pk-chip.is-link { margin-top:10px; display:inline-block; }
/* ═══ THE WALKTHROUGH SHELL ═════════════════════════════════════════════════
Ken, 2026-09-05: an intro page, a lede on every screen, and a rail whose
ticks mean FINISHED rather than "you walked past this". */
/* A stage reached but not finished: open to click, but no tick and not dimmed
like one still locked. Without this state "open" fell through to `later` and
the screen you were allowed to visit looked identical to the one you were
not. */
.pk-steps li.open { opacity: 1; }
.pk-steps li.open span { background: var(--surface-2); color: var(--text-muted);
box-shadow: inset 0 0 0 1px var(--border); }
.pk-steps li.open:hover { background: var(--bg-accent); }
/* ⚠ LOCKED IS NOT MERELY FAINT. A step that cannot be opened must not look like
one that can, or every locked step reads as a dead link. */
.pk-steps li.later { cursor: not-allowed; }
.pk-lede { margin: -12px 0 20px; font-size: 13px; line-height: 1.6;
color: var(--text-muted); }
.pk-intro h2 { margin: 0 0 10px; font-size: 22px; }
.pk-intro > p { font-size: 14px; line-height: 1.65; color: var(--text-secondary);
margin: 0 0 18px; }
.pk-intro-steps { margin: 0 0 18px; padding: 0 0 0 22px; }
.pk-intro-steps li { margin-bottom: 11px; font-size: 13.5px; line-height: 1.55; }
.pk-intro-steps li strong { display: block; }
.pk-intro-steps li span { color: var(--text-muted); font-size: 12.5px; }
/* ⚠ THE TIERS THAT ARE OFFERED NOTHING, SAID ONCE AND QUIETLY. It used to be a
full .pk-rule card each, which read like a question waiting to be answered —
Ken, 2026-09-06: "not show them things that do not apply". It is still stated,
because a tier silently getting nothing is worse; it just no longer looks like
work. Sits apart from the cards above it rather than among them. */
.pk-notoffered {
margin: 10px 2px 0;
padding-top: 10px;
border-top: 1px solid var(--border);
}
/* ⚠ A CARRIER'S CONDITION READS DIFFERENTLY FROM A LAW. .pk-banner already
carries the warning ground; this one is a caution about how the market
behaves, so it takes the same shape and says so in words rather than by
shouting louder than the compliance blocks above it. */
.pk-mix { margin-bottom: 10px; }
.pk-mix strong { font-weight: 600; }
/* ⚠ THE CARRIER ROW, ABOVE THE REST OF THE FILTER. Which carrier is in force is
the one filter an employer needs to see WITHOUT opening a control, because it
can be set for them by what they have ticked. */
.pk-filter-r.is-carriers { flex-wrap: wrap; gap: 6px; align-items: center; }
.pk-f-lab { font-size: 10.5px; font-weight: 600; letter-spacing: .07em;
text-transform: uppercase; color: var(--text-muted); margin-right: 2px; }
.pk-chipf {
display: inline-flex; align-items: baseline; gap: 6px;
padding: 5px 11px; border: 1px solid var(--border); border-radius: 999px;
background: var(--surface-1); color: var(--text-primary);
font: inherit; font-size: 12px; cursor: pointer;
}
.pk-chipf i { font-style: normal; font-size: 10.5px; color: var(--text-muted);
font-variant-numeric: tabular-nums; }
.pk-chipf:hover { border-color: var(--accent); }
.pk-chipf.is-on { border-color: var(--accent); background: var(--bg-accent, var(--surface-2));
font-weight: 600; }
.pk-chipf.is-on i { color: inherit; }
/* ⚠ SET BY WHAT THEY TICKED, NOT BY THEM — a dashed edge, because a control that
changed on its own must not look identical to one they pressed. */
.pk-chipf.is-auto { border-style: dashed; }
.pk-f-why { flex: 1 1 100%; font-size: 11.5px; line-height: 1.45;
color: var(--text-muted); }
/* ⚠ THE HEADING AND THE FILTER BAR PIN AS ONE BLOCK. Ken, 2026-09-07 asked for
the top to lock once "Alternative Carriers and Plan Options" reaches it. With
77 quotes underneath, a filter that scrolls away is one people scroll back up
to reach — and the carrier chips are what say which carrier the list is
currently showing.
⚠ AN OPAQUE GROUND, NOT A TINT. Everything under a sticky element scrolls
BEHIND it, so a translucent background shows plan rows travelling through the
controls. --surface-0 is the page's own ground. */
.pk-stick {
position: sticky;
top: 0;
z-index: 4;
background: var(--surface-0);
padding-top: 6px;
margin-bottom: 4px;
box-shadow: 0 8px 10px -10px rgba(0, 0, 0, .35);
}
.pk-stick .pk-others { margin-top: 6px; }
/* ⚠ WHERE THE FIGURES COME FROM. Quiet, above the numbers, and said once — the
count is EMPLOYEES while the money carries their dependents, and that is the
one thing this panel could otherwise be misread about. */
.pk-look-basis {
margin: 0 0 9px;
font-size: 11.5px;
line-height: 1.45;
color: var(--text-muted);
}
/* ⚠ THREE LINES, NOT A PANEL. Ken, 2026-09-07: "I am NOT sure how to display it
on the page that will not take up a ton of space." Each row is one way of
answering, the number to type, what it costs, and a button that types it —
read left to right, in one pass, with nothing to open. */
/* ⚠ LIGHT CRIMSON, AND OPEN. Ken asked for the brand's soft danger ground on
this section; --bg-danger is a tint, so it needs an opaque layer under it or
it would take its colour from whatever card it happens to sit on. */
.pk-advise {
margin: 0 0 14px;
border: 1px solid var(--border);
border-left: 3px solid var(--text-danger);
border-radius: 8px;
background-color: var(--surface-1);
background-image: linear-gradient(var(--bg-danger), var(--bg-danger));
padding: 11px 13px;
}
/* The way out of being advised, at the foot of the advice. */
/* The split, in words rather than as a bare percentage nobody can decode. */
/* ⚠ ONE COLUMN PER CLASS, SCROLLING SIDEWAYS WHEN THERE ARE TOO MANY. Ken,
2026-09-07 asked for exactly this so that "the user is looking at all
contributions across all classes and eligibility tiers" rather than
remembering which ones they have visited.
⚠ A COLUMN HOLDS THE WHOLE ANSWER, which is why it is 420px and not narrower.
A strip of summaries you still have to click into would defeat the point of
putting them side by side. */
.pk-cols {
display: flex;
gap: 16px;
overflow-x: auto;
padding-bottom: 8px;
scroll-snap-type: x proximity;
}
.pk-col {
flex: 0 0 420px;
min-width: 0;
scroll-snap-align: start;
border: 1px solid var(--border);
border-radius: 10px;
background: var(--surface-1);
padding: 10px 12px 12px;
}
.pk-col-h {
display: flex;
align-items: baseline;
gap: 8px;
margin: 0 0 8px;
padding-bottom: 7px;
border-bottom: 2px solid var(--accent);
font-size: 14px;
font-weight: 700;
}
.pk-col-h em {
margin-left: auto;
font-style: normal;
font-size: 11px;
font-weight: 400;
color: var(--text-muted);
}
.pk-col-t { margin-top: 10px; }
.pk-col-t:first-of-type { margin-top: 0; }
/* The eligibility tier, named only where there is more than one to tell apart. */
.pk-col-th {
font-size: 10.5px;
font-weight: 600;
letter-spacing: .07em;
text-transform: uppercase;
color: var(--text-muted);
margin-bottom: 5px;
}
/* Inside a column the rule card is the whole width and needs no card chrome of
its own — the column is the card. */
.pk-col .pk-rule { border: 0; padding: 0; background: transparent; }
@media (max-width: 900px) {
.pk-col { flex: 0 0 86vw; }
}
.pk-advise-split {
margin: 0 0 9px;
font-size: 11.5px;
line-height: 1.5;
color: var(--text-muted);
}
/* What is set right now — the sentence that makes hiding the boxes safe. */
.pk-advise-now {
margin: 10px 0 0;
padding: 7px 10px;
border-radius: 7px;
background: var(--surface-1);
font-size: 12px;
line-height: 1.45;
}
.pk-advise-now b { font-weight: 600; display: block; margin-bottom: 4px; }
/* ⚠ ONE ROW PER CLASS, IN TRACKS, so two classes read as two answers to the
same question rather than a sentence with a semicolon in it. */
.pk-advise-now ul {
margin: 0;
padding: 0;
list-style: none;
display: grid;
grid-template-columns: max-content minmax(0, 1fr);
gap: 2px 10px;
}
.pk-advise-now li { display: contents; }
.pk-advise-now li i {
font-style: normal;
font-weight: 600;
color: var(--text-muted);
}
.pk-advise-gap {
display: block;
margin-top: 5px;
font-style: normal;
color: var(--text-danger);
}
/* ⚠ THE INTENT, ABOVE THE OPTIONS IT ORDERS. Every option costs about the same,
so the list was never a ranking until somebody said what they were trying to
achieve; this is the question that turns a menu into an answer. */
/* ⚠ THE BUDGET, EDITABLE, AT THE TOP OF THE THING IT DRIVES. */
.pk-advise-bud {
display: inline-flex;
align-items: baseline;
gap: 3px;
margin-left: 8px;
font-weight: 700;
}
/* ⚠ WIDE ENOUGH FOR THE FIGURE, PLUS THE STEPPER. Ken, 2026-09-07: "the Budget
field is not wide enough to accommodate the input and gets cutoff." 8ch fits
the digits of 15000 and nothing else — a number input also draws its own
stepper inside that width, so the last digit sat under the arrows. */
.pk-advise-bud input {
width: 12ch;
text-align: right;
padding: 3px 6px;
border: 1px solid var(--border);
border-radius: 6px;
background: var(--surface-1);
font: inherit;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.pk-advise-bud i { font-style: normal; font-size: 11px; font-weight: 400;
color: var(--text-muted); }
/* One answer for the whole benefit, and the per-class refinement under it. */
/* ⚠ THE PACK OWNS THE COLUMNS, so "Employer Contribution Ranges" sits over the
ranges it names (Ken, 2026-09-11). Each row used to be its own grid, which
meant three grids that happened to look alike and a heading that could only
be shoved rightwards and hoped over. With subgrid the heading and every row
are measured together: the money column is as wide as the widest thing in
it, heading included, and everything in it lines up by construction. */
.pk-advise-pack {
margin-top: 4px;
display: grid;
grid-template-columns: minmax(0, 1fr) max-content max-content;
column-gap: 12px;
}
.pk-advise-pack > * { grid-column: 1 / -1; }
.pk-advise-pack > .pk-advise-h,
.pk-advise-pack > .pk-advise-r {
display: grid;
grid-template-columns: subgrid;
/* the same gap the pack sets, or a subgrid re-gaps its own lines and the
columns it was borrowing no longer line up */
column-gap: 12px;
}
/* the column name is the column-s, not a note pushed to the far edge */
.pk-advise-pack > .pk-advise-h em {
grid-column: 2;
margin-left: 0;
text-align: right;
}
.pk-advise-one {
margin-top: 14px;
padding-top: 11px;
border-top: 1px dashed var(--border);
}
.pk-advise-h2 { font-size: 12px; font-weight: 600; margin-bottom: 6px; }
/* ⚠ THE SPLIT, ON THE ROW — what each class ends up costing under that setting.
That is the thing an employer is choosing between, not the percentage. */
.pk-advise-split-r {
display: block;
margin-top: 4px;
font-size: 11px;
color: var(--text-muted);
}
.pk-advise-split-r b { font-weight: 600; color: var(--text-primary); }
/* ⚠ ONE CLASS PER ROW. Ken, 2026-09-11 — the classes used to be joined by a
middot into one wrapping line, which read as a sentence rather than as two
figures to compare. */
.pk-advise-split-l { display: block; }
/* ⚠ ON THE ROW, NOT UNDER IT. `.pk-advise-l i` is display:block for the long
sentence that explains an option; this is three words of money and Ken
wants it beside the range it divides, not on a line of its own.
⚠ AND IT NEEDS THE PARENT CLASS TO WIN. `.pk-advise-split-r i` and
`.pk-advise-l i` are both one class and one type — identical specificity —
so the later one takes it, and the block rule is ninety lines further down.
I wrote the short selector first and the figure stayed exactly where it
was; the browser told me, not the stylesheet. */
.pk-advise-l .pk-advise-split-r i { display: inline; font-style: normal; }
.pk-advise-r.is-pack { align-items: start; }
.pk-advise-r.is-pack .pk-advise-c { text-align: right; }
.pk-advise-c i {
display: block;
font-style: normal;
font-size: 10.5px;
font-weight: 400;
color: var(--text-muted);
}
.pk-intent { margin: 0 0 10px; }
.pk-intent-q {
display: block;
font-size: 11.5px;
font-weight: 600;
color: var(--text-muted);
margin-bottom: 6px;
}
.pk-intent-b { display: flex; flex-wrap: wrap; gap: 6px; }
.pk-intent-i {
padding: 6px 12px;
border: 1px solid var(--border);
border-radius: 999px;
background: var(--surface-1);
color: var(--text-primary);
font: inherit;
font-size: 12px;
cursor: pointer;
}
.pk-intent-i:hover { border-color: var(--accent); }
.pk-intent-i.is-on {
border-color: var(--accent);
background: var(--accent);
color: var(--on-accent);
font-weight: 600;
}
/* ⚠ NOTHING IS HIDDEN WITHOUT A WAY BACK. An intent that quietly removed the
option somebody wanted would be the tool making the decision. */
.pk-advise-more {
margin: 8px 0 0;
font-size: 11.5px;
color: var(--text-muted);
}
/* ⚠ THE TWO DOORS OUT OF THE BUDGET LINE, side by side. Ken, 2026-09-11:
"Show Recommendations for Setting Your Contributions" — which only exists
once there is a budget to solve against — and "Define My Own Contributions"
to the right of it. The recommender below stays shut until the first is
pressed. Both buttons inherit the look of the old lone one below; the
recommended path is the accent one, so which is the offer and which is the
fallback reads without being explained. */
.pk-advise-gate {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
margin-top: 10px;
padding-top: 9px;
border-top: 1px solid var(--border);
}
.pk-advise-gate button {
padding: 8px 16px;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--surface-1);
color: var(--text-primary);
font-size: 13px;
cursor: pointer;
}
.pk-advise-gate button:hover { border-color: var(--accent); color: var(--text-accent); }
.pk-advise-gate .pk-advise-cgo {
background: var(--bg-accent);
border-color: var(--accent);
color: var(--text-accent);
font-weight: 600;
}
.pk-advise-own {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
margin-top: 10px;
padding-top: 9px;
border-top: 1px solid var(--border);
}
.pk-advise-own button {
padding: 8px 16px;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--surface-1);
color: var(--text-primary);
font: inherit;
font-size: 13px;
font-weight: 600;
cursor: pointer;
}
.pk-advise-own button:hover { border-color: var(--accent); color: var(--text-accent); }
.pk-advise-own span { font-size: 11.5px; color: var(--text-muted); }
.pk-advise.is-quiet {
border-left-color: var(--border);
color: var(--text-muted);
font-size: 12px;
}
.pk-advise-h {
display: flex;
align-items: baseline;
gap: 10px;
flex-wrap: wrap;
font-size: 13px;
font-weight: 600;
margin-bottom: 7px;
}
.pk-advise-h em {
margin-left: auto;
font-style: normal;
font-size: 11.5px;
font-weight: 400;
color: var(--text-muted);
}
.pk-advise-r {
display: grid;
grid-template-columns: minmax(0, 1fr) max-content max-content;
align-items: center;
gap: 4px 12px;
padding: 5px 0;
border-top: 1px solid var(--border);
font-size: 12.5px;
}
.pk-advise-l i {
display: block;
font-style: normal;
font-size: 11px;
color: var(--text-muted);
}
.pk-advise-c { font-weight: 600; font-variant-numeric: tabular-nums; }
.pk-advise-r button {
padding: 5px 12px;
border: 1px solid var(--accent);
border-radius: 7px;
background: transparent;
color: var(--text-accent);
font: inherit;
font-size: 12px;
font-weight: 600;
white-space: nowrap;
cursor: pointer;
}
/* Both hosts declare --on-accent, because the CRM-s accent is light and
MyIApro-s is dark; a literal here would be right in one and unreadable in the
other. */
.pk-advise-r button:hover { background: var(--accent); color: var(--on-accent); }
.pk-advise-w {
margin: 8px 0 0;
font-size: 11px;
line-height: 1.45;
color: var(--text-muted);
}
/* ⚠ THE BASE PLAN IS ITS OWN FACT ON THE ROW. Ken, 2026-09-07: the recommender
was not "saying what the base plan should be" — it was, as three trailing
words inside a sentence about percentages, which is not the same thing. */
.pk-advise-base {
display: inline-flex;
align-items: baseline;
gap: 6px;
margin-top: 3px;
padding: 2px 7px;
border-radius: 999px;
background: var(--surface-2);
font-size: 11px;
line-height: 1.5;
color: var(--text-muted);
}
.pk-advise-base i {
font-style: normal;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
font-size: 9px;
}
.pk-advise-base.is-named { color: var(--text); font-weight: 600; }
/* ⚠ AND THE COST IS A RANGE WHEREVER THE CLASS HAS MORE THAN ONE PLAN, because
which plan each person takes is theirs to decide, not the employer's. */
.pk-advise-spread {
display: block;
font-style: normal;
font-size: 9px;
font-weight: 400;
color: var(--text-muted);
}
/* ⚠ EVERY CLASS SIDE BY SIDE, IN ITS OWN BLOCK, ON ITS OWN GROUND. Ken,
2026-09-07: "the recommender for the individual classes should be collapsed
and we should list all of the recommendations for those in blocks
side-by-side as well and maybe have a different background colour for them."
⚠ AND IT OPENS ITSELF WHILE A CLASS IS UNANSWERED, because the whole point of
the block is the class somebody would otherwise walk past. */
.pk-advise-cls {
margin-top: 12px;
padding: 10px 12px;
border-radius: 9px;
background: var(--surface-2);
border: 1px solid var(--border);
}
.pk-advise-cls > summary {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
cursor: pointer;
font-size: 12px;
}
.pk-advise-cls > summary span { color: var(--text-muted); font-size: 11px; }
.pk-advise-cw {
margin: 8px 0 0;
font-size: 11px;
line-height: 1.5;
color: var(--text-muted);
}
/* One row of blocks, scrolling sideways rather than squeezing four classes into
a column each too narrow to read. */
.pk-advise-cbs {
display: flex;
gap: 10px;
margin-top: 10px;
padding-bottom: 4px;
overflow-x: auto;
}
.pk-advise-cb {
flex: 0 0 260px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
padding: 10px 11px;
border-radius: 8px;
background: var(--surface-0);
border: 1px solid var(--border-danger);
}
.pk-advise-cb.is-set { border-color: var(--border); }
.pk-advise-cb > b { font-size: 12px; }
.pk-advise-cb > em {
font-style: normal;
font-size: 11px;
color: var(--text-muted);
}
.pk-advise-cs { margin-top: 3px; font-size: 12px; font-weight: 600; }
.pk-advise-cs.is-none { font-weight: 400; color: var(--text-muted); }
.pk-advise-cc { font-size: 12px; font-variant-numeric: tabular-nums; }
/* ⚠ THE FOOT OF EVERY BLOCK, ON ONE LINE ACROSS THE ROW. Ken, 2026-09-11:
"line up the buttons… and justify them to the bottom of the block". The
blocks are already equal height — .pk-advise-cbs is a flex row and stretches
them — so one auto margin above the footer is the whole mechanism. */
.pk-advise-cbf {
margin-top: auto;
align-self: stretch;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 5px;
padding-top: 9px;
}
.pk-advise-cb button {
padding: 5px 10px;
border: 1px solid var(--border);
border-radius: 7px;
background: var(--surface-1);
font: inherit;
font-size: 11px;
cursor: pointer;
}
.pk-advise-cst {
font-style: normal;
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-danger);
}
.pk-advise-cb.is-set .pk-advise-cst { color: var(--text-success); }
.pk-advise-cf {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
margin-top: 10px;
}
.pk-advise-cf span { font-size: 11px; color: var(--text-muted); }
.pk-advise-cgo {
padding: 7px 13px;
border: 0;
border-radius: 7px;
background: var(--accent);
color: var(--on-accent);
font: inherit;
font-size: 12px;
font-weight: 600;
cursor: pointer;
}
/* ⚠ THE ONE LINE THAT SURVIVES THE FOLD BEING SHUT. */
/* The carrier-floor shortfall: a caution, not an error — the options below it
are real and may still be written, they just sit under what the carrier asks.
Tokens only; the CRM has two themes. feedback-theme-aware-ui. */
.pk-advise-short {
margin: 6px 0 0;
padding: 6px 9px;
border-left: 2px solid var(--text-warning);
background: var(--surface-2);
border-radius: 0 6px 6px 0;
font-size: 11px;
line-height: 1.55;
color: var(--text-primary);
}
.pk-advise-owed {
margin: 10px 0 0;
padding: 7px 10px;
border-radius: 7px;
background: var(--bg-danger);
font-size: 12px;
line-height: 1.5;
color: var(--text-danger);
}
.pk-advise-owed b { font-weight: 600; }
/* ⚠ ONE ANSWER, THEN THE ALTERNATIVES BEHIND ONE FOLD. Ken, 2026-09-07: "The
entire page is not making ANY sense to me anymore!!!" He was reading three
recommendation lists and two intent pickers, because each was added on its
own and nobody ever looked at the assembled page. */
.pk-advise-pick { margin-top: 10px; }
.pk-advise-r.is-top {
border: 1px solid var(--border-accent);
border-radius: 8px;
padding: 10px 11px;
background: var(--surface-0);
}
.pk-advise-alt {
margin-top: 12px;
padding-top: 10px;
border-top: 1px dashed var(--border);
}
.pk-advise-alt > summary {
cursor: pointer;
font-size: 12px;
color: var(--text-muted);
}
.pk-advise-alt[open] > summary { margin-bottom: 8px; }
/* ⚠ THE PLANS A CLASS IS OFFERED, IN THE BLOCK THAT SETS THEIR MONEY. Ken,
2026-09-07 asked for them "INSIDE the contributions definer blocks above each
class" — which is also what let the class chips go: a list that followed a
chip could only ever show one class. */
.pk-advise-cp {
margin: 6px 0 2px;
padding: 0;
list-style: none;
font-size: 11px;
line-height: 1.5;
color: var(--text-muted);
border-top: 1px dashed var(--border);
padding-top: 6px;
align-self: stretch;
}
.pk-advise-cp li { display: block; }
.pk-advise-cp i { font-style: normal; opacity: 0.75; }
.pk-advise-cp li.is-no { text-decoration: line-through; }
.pk-advise-cp li.is-no em {
font-style: normal;
text-decoration: none;
color: var(--text-danger);
}
/* ⚠ THE PROOF: EVERY PLAN, EVERY TIER, AT THE SETTINGS ON THIS PAGE. Ken,
2026-09-07: "like we did in the advisor recommendation paper where we listed
each plan for each class and showed the cost to the employee using the tier
structures and what it would cost if they Bought up or down to a different
plan." Reading ACROSS a row is the buy-up and buy-down. */
.pk-proof-w {
margin-top: 16px;
padding-top: 12px;
border-top: 1px solid var(--border);
}
.pk-proof-w > h5 { margin: 0 0 4px; font-size: 13px; }
.pk-proof-why {
margin: 0 0 10px;
font-size: 11px;
line-height: 1.55;
color: var(--text-muted);
}
.pk-proof-c { margin-top: 12px; }
/* An eligibility split the plan-by-plan table cannot draw yet: what IS set, said
plainly, instead of a table of zeroes. Tokens only — the CRM has a dark theme
and a light one, and a literal colour here is a bug in one of them.
feedback-theme-aware-ui. */
.pk-proof-split {
border: 1px solid var(--border-accent);
border-radius: 9px;
padding: 10px 12px;
background: var(--surface-2);
}
.pk-proof-sl { list-style: none; margin: 0; padding: 0; }
.pk-proof-sl li {
display: flex;
gap: 10px;
align-items: baseline;
flex-wrap: wrap;
padding: 3px 0;
font-size: 12px;
}
.pk-proof-sl li b { min-width: 150px; font-weight: 600; }
.pk-proof-sl li span { flex: 1; color: var(--text-primary); }
.pk-proof-sw {
margin: 7px 0 0;
font-size: 11px;
line-height: 1.55;
color: var(--text-muted);
}
.pk-proof-c > h6 {
margin: 0 0 6px;
font-size: 12px;
display: flex;
align-items: baseline;
gap: 8px;
flex-wrap: wrap;
}
.pk-proof-c > h6 em {
font-style: normal;
font-weight: 400;
font-size: 11px;
color: var(--text-muted);
}
/* Wide tables scroll inside their own box; the page never scrolls sideways. */
.pk-proof-scroll { overflow-x: auto; }
/* ⚠ EVERY TABLE ON ONE GRID, WHATEVER IS IN IT. Ken, 2026-09-11: "Can't we
line up all of the columns, (even though there may be two separate tables
because there happens to be 2 classes) but it does not read well for the
overall visual!… we just need to get them lined up and consistent through
all of the tables."
Each class is its own
, and an auto layout sizes each one to ITS own
contents — so "B6E1BLC — Expanded Bronze HSA" made one table's columns wide
and "ClearPay" made the next one's narrow, and two tables one under the
other agreed about nothing. Fixed layout with declared widths puts every
column at the same x in every table, however many plans a class has and
however long their names are.
⚠ AND THE TABLE IS AS WIDE AS ITS COLUMNS, not as wide as the panel. The
`min-width: 100%` it used to carry would stretch the declared widths back
out again by whatever slack was going, which is the same drift by another
route — a class with two plans would stretch further than a class with
four. A class with more plans than fit simply scrolls, as before. */
table.pk-proof {
border-collapse: collapse;
table-layout: fixed;
font-size: 12px;
font-variant-numeric: tabular-nums;
}
table.pk-proof th:first-child { width: 152px; }
table.pk-proof thead th + th { width: 158px; }
table.pk-proof th,
table.pk-proof td {
padding: 5px 9px;
text-align: right;
border-bottom: 1px solid var(--border);
white-space: nowrap;
}
/* ⚠ AND THE PLAN NAME WRAPS INSTEAD OF SETTING THE WIDTH — Ken's own
suggestion: "Even if you have to do a two row header". A fixed column and
nowrap would spill a long name across its neighbour. */
table.pk-proof thead th {
text-align: right;
font-size: 11px;
font-weight: 600;
vertical-align: bottom;
white-space: normal;
overflow-wrap: anywhere;
}
table.pk-proof thead th i {
display: block;
font-style: normal;
font-weight: 400;
font-size: 10px;
color: var(--text-accent);
}
table.pk-proof tbody th,
table.pk-proof tfoot th { text-align: left; font-weight: 600; }
table.pk-proof tbody th i {
display: block;
font-style: normal;
font-weight: 400;
font-size: 10px;
color: var(--text-muted);
}
table.pk-proof td b { font-weight: 600; }
table.pk-proof td i {
display: block;
font-style: normal;
font-size: 10px;
color: var(--text-muted);
}
table.pk-proof td.is-none { color: var(--text-muted); }
table.pk-proof tfoot th,
table.pk-proof tfoot td {
border-bottom: 0;
border-top: 1px solid var(--border-accent);
font-weight: 600;
}
/* ⚠ WHEN ONE CLASS IS FUNDED FAR HARDER THAN ANOTHER, PER PERSON. Ken,
2026-09-08: "6 employees getting 50% or more of the company's budgeted money
... does not scream Fairness to me." It is not always wrong — so it reads as
a fact stated plainly, not as an error. */
.pk-advise-fair {
margin: 8px 0 0;
padding: 7px 10px;
border-radius: 7px;
background: var(--bg-warning);
font-size: 12px;
line-height: 1.55;
color: var(--text-warning);
}
.pk-advise-fair b { font-weight: 600; }
/* ⚠ WHAT THE LAW AND THE CARRIERS SAY ABOUT A RECOMMENDATION. Ken, 2026-09-07:
"IF Not then the contribution recommendation should NOT be recommended." A
refusal is never silent — the count and the reason ride on the panel, because
a list that quietly shortens teaches nobody anything. */
.pk-comply {
margin: 8px 0 0;
padding: 7px 10px;
border-radius: 7px;
font-size: 12px;
line-height: 1.55;
}
.pk-comply.is-asking {
background: var(--surface-2);
color: var(--text-muted);
}
.pk-comply.is-refused {
background: var(--bg-danger);
color: var(--text-danger);
}
.pk-comply b { font-weight: 600; }
/* Something still to confirm, riding on the option it is about. */
.pk-comply-f {
display: block;
margin-top: 4px;
padding: 5px 8px;
border-radius: 6px;
background: var(--bg-warning);
font-size: 11px;
line-height: 1.5;
color: var(--text-warning);
}
.pk-comply-f b { font-weight: 600; }
.pk-comply-f i { font-style: normal; opacity: 0.8; }
/* ⚠ THE PLANS A CLASS IS OFFERED, INSIDE THE BLOCK THAT SETS THEIR MONEY. Ken,
2026-09-08: a count of plans is not a list of them, and the base-plan dropdown
directly underneath is asking which of these to measure against. */
.pk-col-plans {
margin: 4px 0 8px;
padding: 0;
list-style: none;
font-size: 11px;
line-height: 1.5;
color: var(--text-muted);
}
.pk-col-plans li { display: block; }
.pk-col-plans i { font-style: normal; opacity: 0.75; }
.pk-col-plans li.is-no { text-decoration: line-through; }
.pk-col-plans li.is-no em {
font-style: normal;
text-decoration: none;
color: var(--text-danger);
}
/* ⚠ THE SAVED ANSWER, WHERE THE SCREEN HAS MOVED ON FROM IT. Ken, 2026-09-08
distrusted this panel because it showed the figure on file while every other
number on the page had moved to what he had typed. Both were true; nothing
said which was which. */
.pk-advise-unsaved {
display: block;
margin: 3px 0 5px;
font-style: normal;
font-size: 11px;
line-height: 1.5;
color: var(--text-warning);
}