/* THE hidden ATTRIBUTE MUST WIN. Author CSS outranks the browser's own
[hidden]{display:none}, so any element whose class sets display — .pulse-btn
sets flex — stays visible with hidden on it. The "Conversation PDF" button
was added hidden, to be revealed only when a round has conversation themes,
and showed on every rated report instead, PulseS included. behr.css learned
this already and carries the same rule; this is Pulse catching up. */
[hidden]{display:none!important}
/* =====================================================================
Behavioral Pulse — console styles. Loaded ONLY by /pulse/index.html so the
feature-flagged module stays isolated from the live site (the anonymous
survey at /pulse/s keeps its own styles). Tokens come from styles.css.
===================================================================== */
/* ------------------------------ legacy kit ------------------------------ */
.pill { display:inline-block; font-size:0.74rem; font-weight:600; line-height:1;
padding:5px 9px; border-radius:999px; background:#f1ece5; border:1px solid #e3d9cc;
color:#5b5147; white-space:nowrap; }
.pulse-items { display:flex; flex-direction:column; gap:8px; }
.pulse-item { display:flex; align-items:flex-start; gap:10px; font-size:0.95rem;
padding:8px 0; border-bottom:1px solid #efe7dd; }
.pulse-item:last-child { border-bottom:0; }
.pulse-item-n { flex:0 0 auto; width:22px; height:22px; border-radius:50%;
background:#efe7dd; color:#5b5147; font-size:0.78rem; font-weight:600;
display:inline-flex; align-items:center; justify-content:center; margin-top:1px; }
.pulse-item-text { flex:1 1 auto; }
.pulse-chips { display:flex; flex-wrap:wrap; gap:8px; }
.pulse-chip { font-size:.9rem; font-weight:500; padding:9px 16px; border-radius:999px;
background:#fff; border:1.5px solid #e3d9cc; color:#5b5147; cursor:pointer;
transition:border-color .15s, background .15s, color .15s; }
.pulse-chip:hover { border-color:#d9a89c; }
.pulse-chip.on { background:#c80815; border-color:#c80815; color:#fff; }
.pulse-chip.soon { background:#f6f2ec; border-color:#e7ddd0; color:#9a9086; }
.pulse-chip.soon.on { background:#b5877f; border-color:#b5877f; color:#fff; }
.step-badge { flex:0 0 auto; width:26px; height:26px; border-radius:50%; background:#c80815;
color:#fff; font-size:.85rem; font-weight:700; display:inline-flex; align-items:center; justify-content:center; }
/* Wizard step indicator */
.wiz-steps { display:flex; gap:8px; margin-bottom:20px; flex-wrap:wrap; }
.wiz-step { display:flex; align-items:center; gap:8px; font-size:.9rem; color:#9a9086; font-weight:500;
padding:6px 14px 6px 6px; border-radius:999px; background:#f6f2ec; }
.wiz-step.on { color:#2b2320; background:#f1e4df; }
.wiz-step.done { color:#c80815; }
.wiz-step .wiz-num { width:22px; height:22px; border-radius:50%; background:#fff; border:1.5px solid #e3d9cc;
display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:.78rem; }
.wiz-step.on .wiz-num { background:#c80815; border-color:#c80815; color:#fff; }
.wiz-step.done .wiz-num { background:#c80815; border-color:#c80815; color:#fff; }
.wiz-footer { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-top:16px; flex-wrap:wrap; }
/* Category cards */
.cat-group { margin-bottom:20px; }
.cat-group-title { font-size:.74rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#c80815; margin-bottom:10px; }
.cat-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(270px, 1fr)); gap:10px; }
.cat-card { display:flex; gap:12px; align-items:flex-start; padding:14px 16px; border:1.5px solid #e3d9cc;
border-radius:14px; background:#fff; cursor:pointer; transition:border-color .15s, background .15s; }
.cat-card:hover { border-color:#d9a89c; }
.cat-card.on { border-color:#c80815; background:#fdf3f1; }
.cat-card.soon { opacity:.68; }
.cat-check { flex:0 0 auto; width:22px; height:22px; border-radius:6px; border:1.5px solid #cbbfae;
display:inline-flex; align-items:center; justify-content:center; color:#fff; font-size:.8rem; font-weight:700; margin-top:1px; }
.cat-card.on .cat-check { background:#c80815; border-color:#c80815; }
.cat-title { font-weight:600; font-size:.98rem; display:block; }
.cat-desc { font-size:.85rem; color:#7a7066; display:block; margin-top:3px; line-height:1.45; }
.cat-soon { font-size:.78rem; color:#a4740a; font-weight:500; }
/* Admin category cards (Instruments tab) — a readable responsive grid, so a
long label + description + signal chips never wrap one word per line. */
.cat-admin-group { margin-top:16px; }
.cat-admin-group + .cat-admin-group { margin-top:20px; }
.cat-admin-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:12px; }
.cat-admin-card { border:1px solid var(--glass-border); border-radius:14px; padding:14px 16px; background:#fff;
display:flex; flex-direction:column; gap:8px; box-shadow:0 1px 2px rgba(43,11,14,.04); }
.cat-admin-card .cah { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.cat-admin-title { font-weight:650; font-size:.98rem; line-height:1.32; }
.cat-admin-actions { display:flex; gap:6px; flex:0 0 auto; }
.cat-admin-desc { font-size:.85rem; color:var(--ink-soft); line-height:1.45; margin:0; }
.cat-admin-signals { display:flex; flex-wrap:wrap; gap:5px; margin-top:auto; }
.cat-admin-signals .pill { font-size:.72rem; padding:4px 8px; }
/* ------------------------------ new product ------------------------------ */
/* Cards */
.pulse-card { background:var(--glass); border:1px solid var(--glass-border); border-radius:var(--radius-lg); padding:20px 22px; }
.pulse-card--tinted { background:#fbf7f2; }
.pulse-card + .pulse-card { margin-top:14px; }
/* ...but ONLY in normal flow. Every gap-managed container below already spaces
its children, and the sibling margin above was landing on top of that gap:
each card after the first started 14px lower than its neighbours, so every
multi-card row began ragged while ending flush. Worse, a stretched grid item
with a top margin resolves SHORTER, so the cards in a row also came out
different heights — the rows looked hand-placed rather than aligned.
Specificity matches the rule above, so source order is what settles it. */
:where(.dash-kpis, .next-moves, .pulse-grid-2, .dash-tiles, .dash-move-grid, .ap-board)
> .pulse-card + .pulse-card { margin-top:0; }
.pulse-section-title { font-size:1.02rem; font-weight:650; margin:0 0 12px; }
/* =====================================================================
Plans page (pulse-subscribe.js): one size control, three edition columns,
one grouped feature matrix. Accent discipline — --red appears exactly twice
here, on the recommended column's rule and on the primary CTA; green
(#2e7d32) is only ever "included" in the matrix and never competes with it.
===================================================================== */
/* ---- the company-size control ---- */
.sz { background:#fbf7f2; border:1px solid var(--glass-border); border-radius:var(--radius-lg); padding:20px 22px 18px; }
.sz-q { display:block; font-size:1.06rem; font-weight:650; color:var(--ink); margin:0 0 6px; }
.sz-sub { font-size:.88rem; line-height:1.5; color:var(--ink-soft); margin:0 0 16px; max-width:74ch; }
.sz-row { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.sz-range { flex:1 1 320px; min-width:200px; height:26px; margin:0; background:transparent;
-webkit-appearance:none; appearance:none; cursor:pointer; }
.sz-range:focus-visible { outline:2px solid var(--red); outline-offset:4px; border-radius:100px; }
/* Track + thumb need vendor-split rules — a combined selector list is dropped
wholesale by whichever engine doesn't recognise its half. */
.sz-range::-webkit-slider-runnable-track { height:6px; border-radius:100px; background:var(--bg-2); border:1px solid var(--glass-border); }
.sz-range::-moz-range-track { height:6px; border-radius:100px; background:var(--bg-2); border:1px solid var(--glass-border); }
.sz-range::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:22px; height:22px; margin-top:-9px;
border-radius:50%; background:var(--glass); border:2px solid var(--ink-faint); box-shadow:var(--shadow-sm);
transition:border-color .16s var(--ease); }
.sz-range::-moz-range-thumb { width:22px; height:22px; border-radius:50%; background:var(--glass);
border:2px solid var(--ink-faint); box-shadow:var(--shadow-sm); transition:border-color .16s var(--ease); }
.sz-range:hover::-webkit-slider-thumb { border-color:var(--ink); }
.sz-range:hover::-moz-range-thumb { border-color:var(--ink); }
.sz-num { flex:0 0 108px; width:108px; height:44px; padding:0 12px; font-family:var(--font-ui); font-size:1rem;
font-variant-numeric:tabular-nums; color:var(--ink); background:var(--glass); border:1px solid var(--glass-border-strong);
border-radius:var(--radius-sm); }
.sz-num:focus { outline:none; border-color:var(--red); box-shadow:0 0 0 3px rgba(var(--red-rgb), .12); }
.sz-out { font-size:.95rem; color:var(--ink-soft); margin:14px 0 0; }
.sz-out strong { color:var(--ink); font-variant-numeric:tabular-nums; }
.sz-floor { font-size:.84rem; color:var(--ink-faint); margin:6px 0 0; max-width:74ch; }
/* ---- the edition columns ---- */
/* Minimum company size, stated on the card. `--off` is a column this company
cannot buy: the price stays legible (they may be planning to grow into it)
but every affordance to act on it is withdrawn, and the reason replaces the
button rather than sitting somewhere they have to hunt for it. */
/* What a step up actually buys: the instruments below it, in full. Marked with
the success colour rather than the accent — it is a statement of what is
included, not a call to act. */
.ed-incl { font-size:.83rem; line-height:1.5; color:#2e7d32; background:#eef6ef;
border-radius:10px; padding:8px 10px; margin:0 0 10px; }
.ed-min { font-family:var(--font-ui); font-size:.64rem; font-weight:700; letter-spacing:.09em;
text-transform:uppercase; color:var(--ink-faintest); margin:0 0 10px; }
.ed-min--off { color:var(--amber-ink, #a4740a); }
.ed-card--off { background:var(--bg-2); border-style:dashed; }
.ed-card--off .ed-price, .ed-card--off .ed-per, .ed-card--off .ed-price-per { opacity:.4; }
.ed-card--off .ed-blurb, .ed-card--off .ed-caveat { opacity:.6; }
/* An unavailable column is not the recommendation, so it drops the red top
rule — and the "Most chosen" badge that straddles that rule must mute by
COLOUR, not opacity. A 40%-opaque badge is translucent, so the red line
showed straight through the lower half of the word. Neutral, solid, opaque:
nothing behind it can bleed through. */
.ed-card--off.ed-card--rec { border-top:1px dashed var(--glass-border); padding-top:24px; }
.ed-card--off .ed-badge { background:var(--bg-2); border-color:var(--glass-border); color:var(--ink-faintest); box-shadow:none; }
.ed-card--off .ed-cur { color:var(--ink-faintest); }
.ed-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(215px, 1fr)); gap:14px; margin-top:22px; align-items:stretch; }
.ed-card { position:relative; display:flex; flex-direction:column; text-align:left; padding:24px 20px 20px;
background:var(--glass); border:1px solid var(--glass-border); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm);
transition:border-color .3s var(--ease), box-shadow .3s, background .3s; }
/* The one accent rule on the grid: the honest recommendation, never the
dearest tier. A 2px top rule rather than a full red frame, so the SELECTED
column can still be the loudest thing on the row. */
.ed-card--rec { border-top:2px solid var(--red); padding-top:23px; }
.ed-card--sel { border-color:var(--red); background:#fdf3f1; }
.ed-card--cur { box-shadow:var(--shadow); }
.ed-badge { position:absolute; top:-11px; left:18px; display:inline-flex; align-items:center;
font-family:var(--font-ui); font-size:.66rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
padding:5px 12px; border-radius:100px; background:var(--bg-1); border:1px solid var(--glass-border-strong);
color:var(--red-press); box-shadow:var(--shadow-sm); white-space:nowrap; }
.ed-cur { position:absolute; top:-11px; right:18px; font-family:var(--font-ui); font-size:.62rem; font-weight:700;
letter-spacing:.08em; text-transform:uppercase; padding:4px 10px; border-radius:100px; background:var(--bg-2);
border:1px solid var(--glass-border-strong); color:var(--ink-faint); white-space:nowrap; }
.ed-name { font-size:1.16rem; font-weight:700; letter-spacing:-.01em; color:var(--ink); }
/* Reserves two lines whether or not it needs them: "Numbers + words +
follow-up" wraps in a four-column row and the other three do not, and a
ragged price line across the columns makes them look mispriced. */
.ed-measures { font-family:var(--font-ui); text-transform:uppercase; letter-spacing:.08em; font-size:.68rem;
font-weight:700; line-height:1.25; color:var(--ink-faint); margin-top:5px; min-height:2.5em; }
.ed-price { font-family:var(--font-ui); font-size:1.85rem; font-weight:700; margin:16px 0 0; line-height:1;
letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:var(--ink); }
.ed-price .ed-price-per { font-family:var(--font-ui); font-size:.76rem; font-weight:500; color:var(--ink-faint); letter-spacing:0; }
.ed-per { font-size:.8rem; color:var(--ink-soft); margin-top:6px; min-height:1.2em; }
.ed-blurb { font-size:.87rem; line-height:1.5; color:var(--ink-soft); margin:14px 0 18px; }
/* The "why there are no numbers here" line on a conversation-only round.
Quiet, not alarming — it
explains a deliberate property, so it must not read like a warning. */
.ed-caveat { font-size:.82rem; line-height:1.5; color:var(--ink-faint); margin:-6px 0 18px;
padding-left:11px; border-left:2px solid var(--glass-border-strong); }
/* margin-top:auto pushes every CTA to a shared baseline, so four columns of
unequal prose still end on one line; the blurb's own bottom margin is the
minimum gap when there is no free space left to absorb. */
.ed-cta { margin-top:auto; align-self:flex-start; }
.ed-card--static .ed-blurb { margin-bottom:0; }
.ed-card--static { padding-bottom:24px; }
/* Small-company reality check under the grid. Deliberately not red and not
amber: it is information a buyer needs, not an error they have made. */
.ed-floor { margin-top:16px; padding:16px 18px; background:#fbf7f2; border:1px solid var(--glass-border);
border-left:3px solid var(--glass-border-strong); border-radius:var(--radius); }
.ed-floor-t { font-size:.98rem; font-weight:650; color:var(--ink); margin:0 0 6px; }
.ed-floor-b { font-size:.88rem; line-height:1.6; color:var(--ink-soft); margin:0; max-width:78ch; }
.ed-floor-b strong { color:var(--ink); }
/* ---- the grouped feature matrix ---- */
.pm-f .pm-note { display:block; font-size:.8rem; font-weight:400; color:var(--ink-faintest); margin-top:2px; }
.pm-wrap { margin-top:28px; }
.pm-title { font-size:1.06rem; font-weight:650; color:var(--ink); margin:0 0 12px; }
/* The one element wide enough to push the page sideways, so it scrolls inside
itself. tabindex on the container is what lets a keyboard user scroll it at
all — without it the columns past the fold are unreachable without a mouse. */
.pm-scroll { overflow-x:auto; border:1px solid var(--glass-border); border-radius:var(--radius-lg); background:var(--glass); }
.pm-scroll:focus-visible { outline:2px solid var(--red); outline-offset:2px; }
.pm { width:100%; min-width:720px; border-collapse:separate; border-spacing:0; font-size:.88rem; }
.pm th, .pm td { border-bottom:1px solid var(--glass-border); }
.pm tbody tr:last-child th, .pm tbody tr:last-child td { border-bottom:0; }
/* The pinned feature column. It needs an opaque background of its own or the
cells scrolling under it show through. */
.pm-f { position:sticky; left:0; z-index:1; width:290px; min-width:290px; text-align:left; font-weight:500;
line-height:1.45; color:var(--ink); background:var(--glass); padding:13px 18px;
border-right:1px solid var(--glass-border); }
.pm-f--head { background:var(--bg-2); font-family:var(--font-ui); text-transform:uppercase; letter-spacing:.08em;
font-size:.66rem; font-weight:700; color:var(--ink-faint); }
.pm-h { padding:13px 14px; text-align:center; background:var(--bg-2); font-size:.92rem; font-weight:700; color:var(--ink); white-space:nowrap; }
.pm-h .pm-h-m { display:block; font-family:var(--font-ui); text-transform:uppercase; letter-spacing:.07em;
font-size:.6rem; font-weight:700; color:var(--ink-faint); margin-top:4px; }
.pm-h--rec { box-shadow:inset 0 2px 0 var(--red); }
.pm-c { padding:13px 14px; text-align:center; }
.pm-c--rec { background:#fdf9f8; }
.pm-yes { color:#2e7d32; font-weight:700; font-size:1rem; line-height:1; }
.pm-no { color:var(--ink-faintest); font-weight:700; font-size:1rem; line-height:1; }
/* Section headers: the grouping is what stops an edition's empty run reading
as four missing features rather than a category it stays out of on purpose. */
.pm-sec > th { background:var(--bg-1); text-align:left; padding:18px 18px 10px; border-bottom:1px solid var(--glass-border-strong); }
.pm-sec .pm-sec-t { font-family:var(--font-ui); text-transform:uppercase; letter-spacing:.09em; font-size:.68rem;
font-weight:700; color:var(--red-press); }
.pm-sec .pm-sec-n { display:block; font-family:var(--font-body); text-transform:none; letter-spacing:0;
font-size:.83rem; font-weight:400; color:var(--ink-faint); margin-top:4px; }
/* The glyphs are decorative; this is the text that actually carries "included". */
.pm-sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
@media (max-width:560px) { .pm-f { width:200px; min-width:200px; padding:12px 14px; } }
/* Subscription — checkout-led activation, in the console's soft-card language */
.sub-pick { color:var(--ink-soft); font-size:.95rem; margin:0 0 16px; }
.sub-pick strong { color:var(--ink); }
.pay-primary { display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
background:var(--glass); border:1px solid var(--glass-border); border-radius:var(--radius-lg); padding:22px 24px; box-shadow:var(--shadow-sm); }
.pay-primary .pp-body { max-width:58ch; }
.pay-primary .pp-title { font-size:1.06rem; font-weight:650; margin:0 0 4px; }
/* A billing state that needs the customer (payment failed, change waiting). */
.bill-alert { border:1px solid #f0d9a8; background:#fff8e6; border-radius:12px; padding:12px 14px; margin:0 0 12px; }
.bill-alert--bad { border-color:#f0b9b3; background:#fdecea; }
.bill-alert-t { font-weight:700; margin:0 0 4px; color:var(--ink); }
/* The itemised plan-change breakdown inside the confirm dialog. */
.dialog-body { margin:4px 0 14px; }
.bd { border:1px solid #efe7dd; border-radius:10px; padding:2px 12px; }
.bd-row { display:flex; justify-content:space-between; gap:14px; padding:8px 0; font-size:.9rem; border-bottom:1px solid #f3ede6; }
.bd-row:last-child { border-bottom:0; }
.bd-amt { white-space:nowrap; font-variant-numeric:tabular-nums; }
.bd-total { font-weight:700; }
.bd-note { font-size:.86rem; color:var(--ink-soft); margin:8px 0 0; }
.other-pay { margin-top:24px; }
.other-pay-h { font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint);
display:flex; align-items:center; gap:14px; margin:0 0 14px; }
.other-pay-h::after { content:""; flex:1; height:1px; background:var(--glass-border); }
.pay-opts { display:grid; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); gap:14px; max-width:720px; }
.pay-opt { display:flex; align-items:flex-start; gap:14px; background:var(--glass); border:1px solid var(--glass-border);
border-radius:var(--radius); padding:18px 20px; box-shadow:var(--shadow-sm); }
.pay-opt-title { font-weight:650; font-size:.98rem; margin-bottom:3px; }
.plan-enterprise { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
background:var(--bg-1); border:1px solid var(--glass-border); border-radius:var(--radius-lg); padding:16px 22px; margin-top:14px; box-shadow:var(--shadow-sm); }
.plan-ent-l { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
.plan-ent-tier { font-weight:700; font-size:1rem; }
.plan-ent-desc { font-size:.9rem; color:var(--ink-soft); }
/* Grids */
.pulse-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:14px; }
.pulse-grid-3 { display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:14px; margin-top:14px; }
@media (max-width:720px) { .pulse-grid-2 { grid-template-columns:1fr; } }
/* Hero KPI row — extends the shared .dash-kpis kit */
.pulse-kpis { margin-top:14px; }
/* The 4 hero tiles go 2x2 earlier (not a 3+1 orphan) on tablets. Scoped to the
hero row so the shared admin portfolio strip (.dash-kpis) is unaffected. */
@media (max-width:720px) { .pulse-kpis { grid-template-columns:1fr 1fr; } }
.pulse-kpi-delta { font-size:.8rem; font-weight:600; }
.pulse-kpi-delta.up { color:#2e7d32; }
.pulse-kpi-delta.down { color:var(--red-press); }
/* Live wave strip */
.live-strip { border-left:3px solid #2563eb; display:flex; gap:20px; align-items:center; flex-wrap:wrap; margin-top:14px; }
/* Banners */
.pulse-banner { display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap;
padding:12px 16px; border-radius:12px; font-size:.9rem; margin-top:14px; }
.pulse-banner.warn { background:#fff7e8; border:1px solid #f0d78a; color:#5b4a1e; }
.pulse-banner.info { background:#eef4fd; border:1px solid #c8dcf6; color:#274b73; }
/* Signal list rows (needs attention / what's working) */
.sig-row { display:flex; justify-content:space-between; gap:10px; align-items:center; padding:9px 0; border-bottom:1px solid #f2ede6; }
.sig-row:last-child { border-bottom:0; }
.sig-row .sig-name { font-size:.94rem; flex:1 1 auto; min-width:0; }
.sig-row .sig-meta { display:flex; gap:8px; align-items:center; flex:0 0 auto; }
/* Pattern callouts */
.pattern-card { border-left:3px solid #a4740a; }
.pattern-card.high { border-left-color:var(--red-press); }
/* Action-plan momentum bar */
.ap-progress { margin:0 0 16px; padding:14px 16px; border:1px solid var(--glass-border); border-radius:12px; background:var(--glass); }
.ap-progress-track { height:8px; border-radius:999px; background:var(--track, #ede4d8); overflow:hidden; }
.ap-progress-fill { height:100%; border-radius:999px; background:#2e7d32; transition:width .3s var(--ease); }
/* Wizard "preview the survey" — a respondent's-eye view before launch */
.sp-overlay { position:fixed; inset:0; z-index:1200; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(29,21,24,.5); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); animation:fadeIn .18s var(--ease); }
.sp-card { width:100%; max-width:520px; max-height:85vh; display:flex; flex-direction:column; background:var(--glass); border:1px solid var(--glass-border); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); }
.sp-head { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; padding:20px 22px 14px; border-bottom:1px solid var(--glass-border); }
.sp-close { border:none; background:none; font-size:1.6rem; line-height:1; cursor:pointer; color:var(--ink-faint); padding:0 4px; }
.sp-body { overflow:auto; padding:6px 22px 20px; }
.sp-area { margin-top:16px; }
.sp-area-h { font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--red); margin-bottom:4px; }
.sp-q { display:flex; gap:10px; align-items:flex-start; padding:9px 0; border-top:1px solid var(--glass-border); }
.sp-area .sp-q:first-of-type { border-top:none; }
.sp-qnum { flex:0 0 auto; width:22px; height:22px; border-radius:50%; background:var(--glass-hover); color:var(--ink-faint); font-size:.72rem; font-weight:700; display:inline-flex; align-items:center; justify-content:center; margin-top:1px; }
.sp-q p { margin:0; font-size:.95rem; line-height:1.5; }
/* Report "what genuinely changed" — full-text rows, accent-bordered */
.change-list { display:flex; flex-direction:column; gap:8px; }
.change-row { display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:10px; border:1px solid var(--glass-border); border-left-width:3px; background:var(--glass); }
.change-row.up { border-left-color:#2e7d32; }
.change-row.down { border-left-color:var(--red); }
.change-row .cc-arrow { flex:0 0 auto; font-size:.8rem; line-height:1; }
.change-row.up .cc-arrow { color:#2e7d32; }
.change-row.down .cc-arrow { color:var(--red); }
.change-row .cc-label { flex:1; min-width:0; font-size:.95rem; line-height:1.4; }
.change-row .cc-delta { flex:0 0 auto; font-weight:700; white-space:nowrap; }
.change-row.up .cc-delta { color:#2e7d32; }
.change-row.down .cc-delta { color:var(--red); }
/* "What moved most" — biggest specific gain/decline under the dashboard hero */
.movers-row { display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:12px; }
.mover { display:flex; gap:10px; align-items:center; padding:14px 16px; border-radius:12px; border:1px solid var(--glass-border); background:var(--glass); }
.mover.up { border-left:3px solid #2e7d32; }
.mover.down { border-left:3px solid var(--red); }
.mover-icon { font-size:1.05rem; line-height:1; }
.mover.up .mover-icon { color:#2e7d32; }
.mover.down .mover-icon { color:var(--red); }
.mover-label { font-weight:600; font-size:.95rem; }
.mover-delta { font-size:.82rem; color:var(--ink-soft); margin-top:2px; }
/* Focus recommendation cards (report detail — ports the PDF card design) */
.focus-card { margin-bottom:12px; }
.focus-card .fc-label { display:block; font-weight:700; font-size:.66rem; line-height:1.2; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); margin-top:10px; }
.fc-analytic { font-style:italic; color:var(--ink-soft); font-size:.9rem; margin:0 0 8px; line-height:1.5; }
/* Watermarked "See an example report" demo */
.pulse-report-demo { position:relative; }
.pulse-report-demo::before { content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.55;
background-image:url("data:image/svg+xml;utf8,"); }
.pulse-report-demo > * { position:relative; z-index:1; }
.demo-banner { position:sticky; top:0; z-index:2; display:flex; gap:12px; align-items:center; justify-content:space-between;
background:#fff7e8; border:1px solid #f0d78a; border-radius:12px; padding:10px 14px; margin-bottom:14px; font-size:.9rem; }
/* Heatmap (CSS grid — text labels, hover titles, keyboard focus) */
.heatmap-wrap { overflow-x:auto; margin-top:12px; }
.heatmap { display:grid; gap:3px; font-size:.85rem; min-width:520px; }
.hm-head { font-size:.72rem; font-weight:600; line-height:1.25; color:var(--ink-soft);
display:flex; align-items:flex-end; padding:4px 6px; overflow-wrap:break-word; hyphens:auto; }
.hm-rowlabel { font-size:.86rem; font-weight:600; display:flex; align-items:center; padding:4px 8px 4px 0; color:var(--ink-soft); }
.hm-cell { padding:10px 6px; text-align:center; border-radius:8px; font-weight:600; }
.hm-cell.cell-suppressed { color:var(--ink-faintest); font-weight:400;
background:repeating-linear-gradient(45deg, var(--bg-2), var(--bg-2) 4px, transparent 4px, transparent 8px); }
/* Action plan */
.action-card { display:flex; flex-direction:column; gap:10px; }
.ap-note { margin:0; font-size:.86rem; line-height:1.5; color:var(--ink-soft);
background:#fbf7f2; border:1px solid #efe7dd; border-radius:10px; padding:9px 12px; }
.ap-note .linklike { font-size:.8rem; margin-left:6px; }
.action-card.is-done { opacity:.62; }
.status-seg { display:inline-flex; padding:3px; background:var(--bg-2); border:1px solid var(--glass-border); border-radius:100px; }
.status-seg button { border:0; background:none; padding:6px 14px; border-radius:100px; font-size:.8rem; font-weight:600;
color:var(--ink-faint); cursor:pointer; font-family:inherit; }
.status-seg button.on { background:var(--bg-1); color:var(--ink); box-shadow:var(--shadow-sm); }
.status-seg button:disabled { cursor:not-allowed; opacity:.55; }
/* Chrome */
.btn-icon { width:42px; height:42px; padding:0; display:grid; place-items:center; border-radius:50%; }
.btn-icon svg { width:20px; height:20px; }
/* The company's uploaded logo is the page headline (sits inside the h1). */
.pulse-title-logo { display:block; max-height:64px; max-width:300px; width:auto; height:auto; }
/* Report detail */
.report-back { display:inline-flex; align-items:center; gap:6px; font-size:.9rem; font-weight:600; color:var(--ink-faint);
background:none; border:0; cursor:pointer; padding:0; margin-bottom:14px; font-family:inherit; }
.report-back:hover { color:var(--ink); }
/* Clickable list rows (reports list) */
.pulse-rowlink { cursor:pointer; transition:border-color .15s, background .15s, transform .15s var(--ease), box-shadow .15s; }
.pulse-rowlink:hover { border-color:#d9a89c; background:var(--glass-hover); transform:translateY(-1px); box-shadow:var(--shadow-sm); }
/* ------------------------------ polish pass ------------------------------ */
/* View transition: each route fades/rises in. */
@keyframes pulseViewIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
.pulse-view-enter { animation:pulseViewIn .28s var(--ease); }
/* Tabs get small icons. */
#pulseTabs button { display:inline-flex; align-items:center; justify-content:center; gap:8px; }
#pulseTabs button svg { width:15px; height:15px; opacity:.7; flex:0 0 auto; }
#pulseTabs button.active svg { opacity:1; }
/* ---------------------- chrome refinement (v2) ---------------------- */
/* Tighter header rhythm: the eyebrow → title → controls read as one unit
instead of three loosely stacked rows, so content starts sooner. */
#appView .admin-head { margin-bottom:16px; align-items:flex-start; }
#appView .admin-head .eyebrow { margin-bottom:6px; }
/* The eyebrow doubles as a home link back to the dashboard. */
.eyebrow-home { cursor:pointer; display:inline-flex; align-items:center; transition:opacity .15s var(--ease); }
.eyebrow-home:hover { opacity:.7; }
.eyebrow-home:focus-visible { outline:2px solid var(--red); outline-offset:3px; border-radius:5px; }
#appView #pulseTitle { line-height:1.05; margin-top:2px; }
/* The "Pulse" dot gets a soft living pulse — a quiet nod to the product. */
#appView .admin-head .eyebrow .dot { position:relative; }
#appView .admin-head .eyebrow .dot::after {
content:""; position:absolute; inset:-4px; border-radius:50%;
border:1.5px solid var(--red); opacity:0; animation:pulseDot 2.6s var(--ease) infinite; }
@keyframes pulseDot { 0% { transform:scale(.5); opacity:.55; } 70%,100% { transform:scale(1.7); opacity:0; } }
@media (prefers-reduced-motion:reduce) { #appView .admin-head .eyebrow .dot::after { animation:none; } }
/* Company switcher — a compact, right-aligned control that reads as
"viewing X, tap to switch", not a second copy of the title. */
#orgPickerBar { display:flex; justify-content:flex-end; margin:-4px 0 2px; }
#orgPickerBar .row { margin:0 !important; gap:8px !important; align-items:center;
padding:5px 6px 5px 14px; background:var(--glass); border:1px solid var(--glass-border);
border-radius:100px; box-shadow:var(--shadow-sm); }
#orgPickerBar label { font-size:.68rem !important; font-weight:700 !important; letter-spacing:.08em;
text-transform:uppercase; color:var(--ink-faintest); }
#orgPickerSel { appearance:none; -webkit-appearance:none; height:34px !important; margin:0 !important;
padding:0 34px 0 13px !important; border-radius:100px !important; border:1px solid var(--glass-border) !important;
background-color:var(--bg-1); font-weight:650; font-size:.9rem; color:var(--ink); cursor:pointer;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a7f70' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat:no-repeat; background-position:right 13px center; transition:border-color .15s, box-shadow .15s; }
#orgPickerSel:hover { border-color:var(--glass-border-strong) !important; }
#orgPickerSel:focus { border-color:var(--red) !important; box-shadow:0 0 0 3px rgba(var(--red-rgb),.12) !important; }
/* Tab bar: left-aligned pills that size to their content and scroll on
mobile, with a clearer active state and an inactive hover. */
#pulseTabs { justify-content:flex-start; width:fit-content; max-width:100%; overflow-x:auto; scrollbar-width:none; }
#pulseTabs::-webkit-scrollbar { display:none; }
#pulseTabs button { flex:0 0 auto; padding:9px 18px; white-space:nowrap; }
#pulseTabs button:hover { color:var(--ink); background:var(--glass-hover); }
#pulseTabs button.active { color:var(--ink); font-weight:700; }
@media (max-width:560px) {
#orgPickerBar { justify-content:flex-start; margin-top:6px; }
#pulseTabs button { padding:9px 14px; }
}
/* Cards get a hair of depth; clickable signal rows invite the tap. */
.pulse-card { box-shadow:0 1px 2px rgba(43,11,14,.04); }
.sig-click { cursor:pointer; border-radius:8px; margin:0 -8px; padding-left:8px; padding-right:8px;
transition:background .12s; }
.sig-click:hover, .sig-click:focus-visible { background:var(--glass-hover); }
.sig-click .sig-name::after { content:"›"; margin-left:7px; color:var(--ink-faintest); font-weight:600; }
/* Getting-started checklist */
.pulse-checklist { counter-reset:steps; }
.pulse-checklist .chk-row { display:flex; gap:12px; align-items:center; padding:11px 0; border-bottom:1px solid #f2ede6; cursor:pointer; }
.pulse-checklist .chk-row:last-child { border-bottom:0; }
.pulse-checklist .chk-row[data-done="1"] { cursor:default; }
.pulse-checklist .chk-mark { flex:0 0 auto; width:26px; height:26px; border-radius:50%; border:1.5px solid #cbbfae;
display:inline-flex; align-items:center; justify-content:center; font-size:.8rem; font-weight:700; color:var(--ink-faint); background:#fff; }
.pulse-checklist .chk-row[data-done="1"] .chk-mark { background:#2e7d32; border-color:#2e7d32; color:#fff; }
.pulse-checklist .chk-row[data-done="1"] .chk-label { color:var(--ink-faint); text-decoration:line-through; text-decoration-color:rgba(0,0,0,.25); }
.pulse-checklist .chk-label { font-weight:600; font-size:.95rem; }
.pulse-checklist .chk-hint { font-size:.82rem; color:var(--ink-faint); }
.chk-progress { height:6px; background:var(--bg-2); border-radius:3px; overflow:hidden; margin:10px 0 4px; }
.chk-progress > div { height:100%; background:#2e7d32; transition:width .3s var(--ease); }
/* Signal deep-dive drawer */
@keyframes drawerIn { from { transform:translateX(40px); opacity:0; } to { transform:none; opacity:1; } }
.pulse-drawer-backdrop { position:fixed; inset:0; background:rgba(43,11,14,.30); z-index:998; }
.pulse-drawer { position:fixed; top:0; right:0; bottom:0; width:min(460px, 94vw); background:var(--bg-1);
z-index:999; box-shadow:-16px 0 48px rgba(43,11,14,.16); padding:26px 28px; overflow-y:auto;
animation:drawerIn .24s var(--ease); }
.pulse-drawer h3 { font-size:1.2rem; margin:0 46px 4px 0; }
.pulse-drawer-close { position:absolute; top:18px; right:18px; width:34px; height:34px; border-radius:50%;
border:1px solid var(--glass-border); background:var(--bg-1); font-size:1.05rem; line-height:1; cursor:pointer; color:var(--ink-soft); }
.pulse-drawer-close:hover { background:var(--glass-hover); }
.drawer-stat { display:flex; align-items:baseline; gap:10px; margin:12px 0 4px; }
.drawer-stat .n { font-family:var(--font-ui); font-weight:700; font-size:2.2rem; line-height:1; }
.drawer-block { margin-top:20px; padding-top:16px; border-top:1px solid #f2ede6; }
.drawer-block h4 { margin:0 0 8px; font-size:.95rem; }
/* Inline "how the numbers work" explainer */
.pulse-help { margin-top:14px; border:1px solid var(--glass-border); border-radius:12px; background:var(--bg-1); }
.pulse-help summary { cursor:pointer; padding:12px 16px; font-weight:600; font-size:.9rem; color:var(--ink-soft); list-style:none; display:flex; align-items:center; gap:8px; }
.pulse-help summary::-webkit-details-marker { display:none; }
.pulse-help summary::before { content:"?"; width:20px; height:20px; border-radius:50%; background:var(--bg-2);
display:inline-flex; align-items:center; justify-content:center; font-size:.75rem; font-weight:700; color:var(--ink-faint); }
.pulse-help[open] summary { border-bottom:1px solid #f2ede6; }
.pulse-help .help-body { padding:14px 16px; font-size:.88rem; color:var(--ink-soft); line-height:1.6; }
/* Dropdowns: replace the browser default with a quiet custom chevron. */
select.input {
appearance:none; -webkit-appearance:none; -moz-appearance:none;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat; background-position:right 13px center; background-size:14px;
padding-right:40px; cursor:pointer;
}
select.input:hover { border-color:#d9a89c; }
/* Compact pill select (chart pickers, filters). */
select.pulse-select { height:38px; padding-top:0; padding-bottom:0; border-radius:100px;
font-size:.86rem; font-weight:600; color:var(--ink-soft); background-color:var(--bg-1); width:auto; }
/* Mailing-list toolbar — filter + division filter + bulk actions on one row.
The shared .input padding (13px) clips text at a compact height, so give
every control the same 38px height with vertically-centred text and let the
filter grow while the selects/button size to their labels. */
.roster-tools { gap:10px; }
.roster-tools .input, .roster-tools .btn { height:38px; box-sizing:border-box; }
.roster-tools .input { padding-top:0; padding-bottom:0; }
.roster-tools .btn { display:inline-flex; align-items:center; white-space:nowrap; }
.roster-tools #rosterFilter { flex:1 1 200px; min-width:180px; }
.roster-tools select.input { width:auto; min-width:150px; flex:0 0 auto; }
/* Account-deletion confirmation-code field. Roomy padding so the text clears the
red focus ring, moderate tracking for the typed code, and a plain (non-caps,
non-tracked) placeholder so the hint fits instead of overflowing. */
.input.pulse-code-input {
max-width:280px; padding:15px 18px;
font-family:var(--font-ui, inherit); font-weight:700; font-size:1.02rem;
letter-spacing:.2em; text-transform:uppercase;
}
.input.pulse-code-input::placeholder {
font-weight:500; font-size:.86rem; letter-spacing:.01em; text-transform:none;
}
/* Sub-stat strip under the hero KPIs */
.pulse-substats { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.substat { display:inline-flex; align-items:center; gap:7px; font-size:.8rem; font-weight:600; color:var(--ink-soft);
background:var(--bg-1); border:1px solid var(--glass-border); border-radius:100px; padding:6px 13px; }
.substat .dot { width:7px; height:7px; border-radius:50%; flex:0 0 auto; }
/* "Where to act next" — forward-looking recommendation cards */
.next-moves { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:14px; margin-top:12px; }
.next-move { display:flex; flex-direction:column; gap:9px; cursor:pointer; }
.next-move:hover { border-color:#d9a89c; }
.nm-head { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.nm-num { flex:0 0 auto; width:24px; height:24px; border-radius:50%; background:var(--red-press); color:#fff;
display:inline-flex; align-items:center; justify-content:center; font-size:.8rem; font-weight:700; }
.nm-text { font-size:.9rem; line-height:1.55; color:var(--ink-soft); margin:0;
display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden; }
.nm-when { font-size:.8rem; color:var(--ink-faint); line-height:1.5; }
.nm-foot { display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap; margin-top:auto; }
/* The intervention bank writes sentence-length chips — never let a pill
overflow its card inside recommendation/action cards. */
.next-move .pill, .action-card .pill { white-space:normal; line-height:1.4; text-align:left; max-width:100%; }
/* Zone legend above the area cards — explains the two ticks on each bar */
.zone-legend { display:flex; flex-wrap:wrap; gap:16px; margin:8px 0 2px; font-size:.78rem; color:var(--ink-faint); }
.zone-legend span { display:inline-flex; align-items:center; gap:6px; }
.zone-legend em { font-style:normal; font-weight:600; color:var(--ink-soft); }
/* Domain cards that carry their signals as mini rows */
.domain-sig { padding:8px 0 2px; border-top:1px solid #f6f1ea; }
.domain-sig:first-of-type { border-top:0; }
.ds-top { display:flex; justify-content:space-between; gap:8px; align-items:baseline; font-size:.88rem; }
.ds-top .ds-name { flex:1; min-width:0; line-height:1.4; } /* full question, wrapping — never truncated */
.ds-top .ds-val { display:flex; gap:7px; align-items:center; flex:0 0 auto; font-weight:700; }
/* Old reports carry no domain groups → one flat "All areas" card; give it the full row. */
.pulse-grid-2 > .pulse-card:only-child { grid-column:1 / -1; }
.ds-bar { margin:5px 0 4px; }
/* Trend card */
.trend-summary { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:8px; }
.trend-legend { display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:8px; font-size:.78rem; color:var(--ink-faint); }
.trend-legend span { display:inline-flex; align-items:center; gap:6px; }
/* Mobile refinements */
@media (max-width:720px) {
.pulse-title-logo { max-height:44px; max-width:220px; }
.wiz-footer { flex-direction:column; align-items:stretch; }
.wiz-footer .btn { width:100%; justify-content:center; }
.drawer-stat .n { font-size:1.8rem; }
.next-moves { grid-template-columns:1fr; }
}
/* Phones — stack the new components + let a report's action toolbar wrap. */
@media (max-width:560px) {
.movers-row { grid-template-columns:1fr; }
.dash-kpis { grid-template-columns:1fr 1fr; }
.report-toolbar, .report-detail-toolbar { flex-wrap:wrap; }
}
/* Info "(i)" affordance + anchored popover (see ui.js infoDot/registerInfo). */
.dash-kpi { position:relative; }
.info-corner { position:absolute; top:9px; right:11px; }
.pulse-sec-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.pulse-sec-head .pulse-section-title { margin:0; }
.info-dot {
display:inline-flex; align-items:center; justify-content:center;
width:18px; height:18px; padding:0; flex:0 0 auto; border-radius:50%;
border:1px solid var(--glass-border); background:transparent;
color:var(--ink-faint); font:italic 700 11px/1 Georgia, "Times New Roman", serif;
cursor:pointer; transition:background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
}
.info-dot:hover, .info-dot[aria-expanded="true"] { background:#c80815; border-color:#c80815; color:#fff; }
.info-dot:focus-visible { outline:2px solid #c80815; outline-offset:2px; }
.info-pop {
position:fixed; z-index:1150; width:290px; max-width:calc(100vw - 24px);
background:var(--glass, #fff); border:1px solid var(--glass-border); border-radius:14px;
box-shadow:0 12px 34px rgba(29,21,24,.16); padding:14px 16px; animation:infoPopIn .14s var(--ease);
}
.info-pop h4 { margin:0 0 6px; font-size:.92rem; font-weight:650; color:var(--ink); padding-right:16px; }
.info-pop p { margin:0; font-size:.82rem; line-height:1.55; color:var(--ink-soft); }
.info-pop .info-close {
position:absolute; top:7px; right:9px; width:22px; height:22px; padding:0; line-height:1;
border:0; background:transparent; color:var(--ink-faint); font-size:19px; cursor:pointer; border-radius:6px;
}
.info-pop .info-close:hover { background:var(--track, #ede4d8); color:var(--ink); }
@keyframes infoPopIn { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } }
/* Clients roster + curated client detail (superadmin). */
.client-list { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:12px; }
.client-card { display:flex; justify-content:space-between; align-items:center; gap:14px; width:100%; text-align:left;
padding:16px 18px; background:var(--bg-1); border:1px solid var(--glass-border); border-radius:16px; cursor:pointer;
box-shadow:var(--shadow-sm); transition:border-color .15s, box-shadow .15s, transform .15s; font:inherit; color:inherit; }
.client-card:hover { border-color:var(--glass-border-strong); box-shadow:var(--shadow); transform:translateY(-1px); }
.client-card-main { min-width:0; }
.client-card-cta { display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.client-card-arrow { font-size:1.25rem; line-height:1; color:var(--ink-faint); }
.client-facts { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:16px 20px; margin-top:18px; }
.client-fact-label { font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faintest); }
.client-fact-val { margin-top:3px; font-size:.98rem; color:var(--ink); word-break:break-word; }
/* Print: a report detail prints clean (pulse.css loads only on /pulse). */
/* Pulse-only footer — discreet legal links at the bottom of the console.
NEVER the main site footer (that's `.footer`); this lives inside #appView. */
.pulse-foot { margin:44px 0 6px; padding-top:16px; border-top:1px solid var(--glass-border); text-align:center; font-size:.82rem; color:var(--ink-faint); }
.pulse-foot a { color:var(--ink-faint); text-decoration:none; }
.pulse-foot a:hover, .pulse-foot a:focus-visible { color:var(--red); text-decoration:underline; }
/* Legal pages (#privacy / #terms) */
.legal-doc { line-height:1.65; }
.legal-doc a { color:var(--red); }
@media print {
.nav, .footer, .pulse-foot, #pulseTabs, #orgPickerBar, .admin-head .row, .report-back,
/* .pulse-btn is the console's own button class and was never listed, so the
report toolbar — Download PDF, Export CSV, Print, Regenerate — printed
across the top of every paper copy. .rep-tab is the jump bar, which does
nothing on paper. */
.btn, .pulse-btn, .rep-tab, .pulse-help, .settings-nav, #settingsBtn, #signOutBtn,
.pulse-side, .pulse-side-toggle, .pulse-side-scrim { display:none !important; }
body { background:#fff; }
#appView.pulse-shell:not(.hidden) { display:block !important; }
.pulse-main { padding:0 !important; }
.dash-section, .pulse-card { border:0 !important; box-shadow:none !important; padding:0 0 14px !important; }
main.section { padding-top:0 !important; }
.info-dot { display:none !important; }
/* A collapsed prints as its summary alone. In the themes panel
that summary is "What to do about it" and the content is the action — so
the printed report listed every problem and not one response to any of
them. Opened for print in JS (pulse-reports-view.js) because the element's
own UA shadow styles ignore display rules on its children; this pair only
tidies the marker once it is open. */
details > summary { list-style:none; cursor:default; }
details > summary::-webkit-details-marker { display:none; }
}
/* =====================================================================
Console shell — persistent left sidebar (replaces the top #pulseTabs bar
and the gear-driven settings screen). Only /pulse loads this sheet, so
these rules never touch any other page. See [[pulse-sidebar-redesign]].
===================================================================== */
:root { --pulse-side-w:256px; --pulse-side-collapsed:66px; --pulse-content-maxw:1600px; --pulse-reading-maxw:820px; --pulse-doc-maxw:1040px; }
/* The signed-in app view is a full-width shell whose sidebar runs to the very
top; the shared site nav becomes a strip over the content (offset past the
sidebar, see below). The :not(.hidden) keeps the shared .hidden{display:none}
winning when the view is gated off. */
#appView.pulse-shell:not(.hidden) { display:flex; align-items:flex-start; min-height:100vh; }
/* Turn the shared, full-width site nav into the console's top strip: shift its
pills past the sidebar so the CBD logo + search/language/account sit over the
content, not in a separate band above the sidebar. Desktop + full console
only (mobile uses the drawer; bare public pages keep the centered nav). */
@media (min-width:901px) {
body.pulse-console:not(.pulse-bare) .nav .wrap { max-width:none; margin-inline:0;
padding-left:calc(var(--pulse-side-w) + 20px); padding-right:clamp(20px, 3vw, 40px); }
body.pulse-console.pulse-collapsed:not(.pulse-bare) .nav .wrap { padding-left:calc(var(--pulse-side-collapsed) + 20px); }
}
/* On the console the site-nav LEFT pill (hamburger + logo) is dropped entirely
— the Center logo now lives at the top of the sidebar, and the sidebar is the
navigation. Only the search/language/account pill remains, pinned right. Bare
public pages keep the normal full nav. */
body.pulse-console:not(.pulse-bare) .nav-pill-left { display:none; }
body.pulse-console:not(.pulse-bare) .nav-pill-right { margin-left:auto; }
/* The full console (sidebar present) hides the big marketing footer — its legal
links live in the sidebar. Bare public pages keep the site footer, since
their sidebar is hidden. */
body.pulse-console #appView:not(.pulse-bare) ~ #footer { display:none; }
/* Bare shell: signed-out public views (#subscribe / #example / legal) have no
company context, so the sidebar is hidden and the content fills the width. */
#appView.pulse-bare .pulse-side,
#appView.pulse-bare .pulse-side-toggle,
#appView.pulse-bare .pulse-side-scrim { display:none !important; }
/* ---- Sidebar (full height, runs to the top) ---- */
.pulse-side { position:sticky; top:0; align-self:flex-start; flex:0 0 var(--pulse-side-w); width:var(--pulse-side-w);
height:100vh; display:flex; flex-direction:column; background:var(--bg-1);
border-right:1px solid var(--glass-border); transition:width .22s var(--ease), flex-basis .22s var(--ease); z-index:2; }
/* Brand header — the Center for Behavioral Decisions logo on top (nav-height
tall so it lines up with the site-nav pills in the strip to its right), then
the client COMPANY identity below it. */
.pulse-brand { padding:0; border-bottom:1px solid var(--glass-border); display:flex; flex-direction:column; }
.pulse-cbd { display:flex; align-items:center; min-height:var(--nav-h); padding:0 16px; border-bottom:1px solid var(--glass-border); }
.pulse-cbd-full { height:30px; width:auto; max-width:100%; display:block; }
.pulse-cbd-icon { height:34px; width:34px; display:none; border-radius:9px; }
.pulse-brand-org { padding:14px 16px; display:flex; flex-direction:column; gap:11px; }
.pulse-brand-home { display:flex; align-items:center; gap:10px; background:none; border:0; padding:0; margin:0; cursor:pointer; text-align:left; width:100%; min-width:0; font:inherit; }
.pulse-brand-id { font-family:var(--font-display, Fraunces, Georgia, serif); font-weight:600; font-size:1.06rem; line-height:1.15; letter-spacing:-.01em; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.pulse-brand-home:hover .pulse-brand-id { opacity:.75; }
.pulse-brand-home:focus-visible { outline:2px solid var(--red); outline-offset:3px; border-radius:6px; }
.pulse-brand .pulse-title-logo { max-height:40px; max-width:200px; }
/* The live dot. It reads as a signal only if it is clearly NOT part of the
word — so it sits apart from the wordmark rather than beside its first
letter, and its halo is given room to complete its sweep. The ring scales to
1.7x of a 15px box, reaching ~9px past the dot; at the old 2px clearance it
swept through the "B" every 2.6 seconds, which read as a rendering fault
rather than as a pulse. 5px of its own margin plus the row's 10px gap puts
the wordmark outside that arc entirely. */
.pulse-brand-dot { position:relative; flex:0 0 auto; width:7px; height:7px; border-radius:50%;
background:var(--amber); margin:1px 5px 0 2px; }
.pulse-brand-dot::after { content:""; position:absolute; inset:-4px; border-radius:50%; border:1.5px solid var(--red); opacity:0; animation:pulseDot 2.6s var(--ease) infinite; }
@media (prefers-reduced-motion:reduce) { .pulse-brand-dot::after { animation:none; } }
/* Org switcher + viewer "start your own company" nudge sit in the sidebar brand
now — full width and stacked, not the old right-aligned header pill. */
.pulse-brand #orgPickerBar { display:block; margin:0; }
.pulse-brand #orgPickerBar .row { margin:0 !important; padding:0 !important; background:none !important;
border:0 !important; box-shadow:none !important; flex-direction:column; align-items:stretch !important; gap:6px !important; }
.pulse-brand #orgPickerBar label { font-size:.68rem !important; padding-left:2px; }
.pulse-brand #orgPickerSel { width:100% !important; max-width:none !important; }
.pulse-brand #orgPickerBar .btn { width:100%; }
/* Nav groups */
.pulse-nav { flex:1 1 auto; overflow-y:auto; padding:10px 12px 8px; display:flex; flex-direction:column; gap:2px; }
.pulse-nav-group { display:flex; flex-direction:column; gap:2px; margin-top:12px; }
.pulse-nav-group:first-child { margin-top:2px; }
.pulse-nav-label { font-weight:700; font-size:.66rem; text-transform:uppercase; letter-spacing:.09em; color:var(--ink-faintest); padding:6px 12px 4px; }
.pulse-nav-item { display:flex; align-items:center; gap:11px; width:100%; text-align:left; padding:9px 12px; border:0; background:none;
border-radius:var(--radius-sm); font-family:inherit; font-weight:600; font-size:.92rem; color:var(--ink-faint); cursor:pointer; transition:background .12s, color .12s; }
.pulse-nav-item svg { flex:0 0 auto; width:19px; height:19px; opacity:.72; }
.pulse-nav-lbl { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pulse-nav-item:hover { background:var(--glass-hover); color:var(--ink); }
.pulse-nav-item.on { background:rgba(var(--red-rgb), .07); color:var(--red-press); }
.pulse-nav-item.on svg { opacity:1; }
/* Sidebar footer */
.pulse-side-foot { border-top:1px solid var(--glass-border); padding:10px 12px; display:flex; flex-direction:column; gap:6px; }
.pulse-side-foot .pulse-foot { margin:0; padding:2px 4px; border-top:0; text-align:left; font-size:.75rem; display:flex; flex-wrap:wrap; gap:6px 8px; align-items:center; }
.pulse-collapse { display:flex; align-items:center; gap:9px; width:100%; padding:8px 10px; border:0; background:none; border-radius:var(--radius-sm);
color:var(--ink-faintest); font-family:inherit; font-weight:600; font-size:.82rem; cursor:pointer; }
.pulse-collapse:hover { background:var(--glass-hover); color:var(--ink-soft); }
.pulse-collapse svg { width:18px; height:18px; transition:transform .22s var(--ease); }
/* ---- Collapsed icon rail ---- */
#appView.pulse-collapsed .pulse-brand-org, #appView.pulse-collapsed .pulse-cbd-full,
#appView.pulse-collapsed .pulse-nav-label, #appView.pulse-collapsed .pulse-nav-lbl, #appView.pulse-collapsed .pulse-side-foot .pulse-foot,
#appView.pulse-collapsed .pulse-collapse-lbl { display:none; }
#appView.pulse-collapsed .pulse-side { width:var(--pulse-side-collapsed); flex-basis:var(--pulse-side-collapsed); }
/* Center logo becomes its icon, in the same spot. */
#appView.pulse-collapsed .pulse-cbd { justify-content:center; padding-inline:0; }
#appView.pulse-collapsed .pulse-cbd-icon { display:block; }
#appView.pulse-collapsed .pulse-nav-item { justify-content:center; padding-inline:0; }
#appView.pulse-collapsed .pulse-nav-label { height:9px; padding:0; margin:8px 12px 0; border-top:1px solid var(--glass-border); }
#appView.pulse-collapsed .pulse-collapse { justify-content:center; }
#appView.pulse-collapsed .pulse-collapse svg { transform:rotate(180deg); }
/* ---- Content column ---- */
/* Top padding clears the site-nav strip that floats over the content. */
.pulse-main { flex:1 1 auto; min-width:0; padding:calc(var(--nav-h) + 10px) clamp(20px, 3vw, 40px) 72px; }
.pulse-main > #pulseContent { width:100%; max-width:var(--pulse-content-maxw); margin-inline:auto; }
/* Reading-width views stay comfortable and CENTER inside the wide content
column (rather than pinning left with a right void on big screens). */
.legal-doc { max-width:var(--pulse-reading-maxw); margin-inline:auto; }
/* Settings forms/rosters keep a comfortable column; the card-heavy Check-ins
panel opts into a wider tier. */
.pulse-settings-panel { max-width:960px; margin-inline:auto; }
.pulse-settings-panel--wide { max-width:min(100%, 1200px); }
/* Mixed report/detail documents (header + table + grid + prose): a wide-ish doc
width, with prose lines held to a readable measure inside it. */
.pulse-report-doc { max-width:var(--pulse-doc-maxw); margin-inline:auto; }
.pulse-report-prose { max-width:72ch; }
/* Action plan reads top-to-bottom in priority order — one comfortable column. */
/* Full content width since the plan became a three-column board (2026-08-28).
The old 880px centred measure was right for a single reading column and left
the board floating in the middle of the page with a 230px gutter on one side
and none on the other. Individual prose inside still sets its own measure. */
.pulse-plan { max-width:none; }
/* Superadmin survey-run history — adaptive card grid. */
.pulse-history-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(380px, 1fr)); gap:12px; }
/* The mobile drawer toggle lives at the top of the content on narrow screens. */
.pulse-side-toggle { display:none; align-items:center; gap:8px; margin-bottom:18px; padding:9px 15px; border-radius:100px;
border:1px solid var(--glass-border); background:var(--bg-1); font-family:inherit; font-weight:600; font-size:.86rem; color:var(--ink); cursor:pointer; }
.pulse-side-toggle svg { width:18px; height:18px; }
.pulse-side-scrim { position:fixed; inset:var(--nav-h) 0 0 0; background:rgba(43,11,14,.30); z-index:40; }
/* ---- Responsive: off-canvas drawer below 900px ---- */
@media (max-width:900px) {
/* align-self: the desktop rule's flex-start also applies to a fixed box in
current Chrome, which then sizes the drawer to its content (1037px for an
owner) and shifts it up to y=0 instead of fitting it between top and
bottom — so the nav never scrolled and Help sat below the screen. */
.pulse-side { position:fixed; top:var(--nav-h); left:0; bottom:0; height:auto; align-self:stretch; z-index:50;
box-shadow:var(--shadow); transform:translateX(-100%); transition:transform .22s var(--ease); }
#appView.pulse-drawer-open .pulse-side { transform:translateX(0); }
#appView.pulse-collapsed .pulse-side { width:var(--pulse-side-w); flex-basis:var(--pulse-side-w); }
.pulse-side-toggle { display:inline-flex; }
}
@media (min-width:901px) { .pulse-side-scrim { display:none !important; } }
/* =====================================================================
Support / help centre (#support · pulse-support.js). Scoped under .sup so
these rules never touch another view. Editorial-Light: airy header, soft
cards with a red-on-hover lift, a quiet accordion — no SaaS trust rows.
===================================================================== */
.sup { max-width:1080px; margin-inline:auto; }
/* ---- hero ---- */
.sup-hero { text-align:center; padding:12px 0 30px; }
.sup-hero .eyebrow { justify-content:center; }
.sup-title { font-family:var(--font-display); font-weight:600; font-size:clamp(1.9rem, 4vw, 2.7rem);
line-height:1.08; letter-spacing:-.01em; color:var(--deep); margin:10px 0 0; }
.sup-lead { max-width:52ch; margin:14px auto 0; }
.sup-search { position:relative; max-width:560px; margin:26px auto 0; }
.sup-search-ic { position:absolute; left:18px; top:50%; transform:translateY(-50%); width:20px; height:20px;
color:var(--ink-faintest); pointer-events:none; }
.sup-search-ic svg { width:20px; height:20px; display:block; }
.sup-search-in { width:100%; height:56px; padding:0 20px 0 50px; border-radius:100px; border:1px solid var(--glass-border);
background:var(--glass); font-family:inherit; font-size:1rem; color:var(--ink); box-shadow:var(--shadow-sm);
transition:border-color .16s var(--ease), box-shadow .16s var(--ease); }
.sup-search-in::placeholder { color:var(--ink-faintest); }
.sup-search-in:hover { border-color:var(--glass-border-strong); }
.sup-search-in:focus { outline:none; border-color:var(--red); box-shadow:0 0 0 3px rgba(var(--red-rgb), .12); }
.sup-search-in::-webkit-search-cancel-button { -webkit-appearance:none; appearance:none; }
/* ---- section blocks ---- */
.sup-block { margin-top:38px; }
.sup-block-head { margin-bottom:16px; }
.sup-h2 { font-size:1.28rem; font-weight:650; margin:0; letter-spacing:-.01em; color:var(--ink); }
/* ---- topic cards ---- */
.sup-topics { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:14px; }
/* The live-search filter toggles the `hidden` attribute; an author `display`
beats the UA `[hidden]` rule, so restore it explicitly (cf. .acct-menu[hidden]). */
.sup-topic[hidden] { display:none; }
.sup-topic { display:flex; align-items:center; gap:15px; text-align:left; width:100%; padding:18px 18px;
background:var(--glass); border:1px solid var(--glass-border); border-radius:var(--radius-lg); cursor:pointer;
font-family:inherit; box-shadow:var(--shadow-sm);
transition:transform .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease); }
.sup-topic:hover { transform:translateY(-4px); border-color:var(--glass-border-strong); box-shadow:var(--shadow); }
.sup-topic:focus-visible { outline:2px solid var(--red); outline-offset:2px; }
.sup-topic-ic { flex:0 0 auto; width:46px; height:46px; border-radius:13px; display:grid; place-items:center;
background:#fbf1ef; color:var(--red); transition:background .18s var(--ease); }
.sup-topic:hover .sup-topic-ic { background:rgba(var(--red-rgb), .12); }
.sup-topic-ic svg { width:23px; height:23px; }
.sup-topic-body { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:3px; }
.sup-topic-tt { font-weight:650; font-size:1rem; color:var(--ink); transition:color .18s var(--ease); }
.sup-topic:hover .sup-topic-tt { color:var(--red); }
.sup-topic-dc { font-size:.86rem; color:var(--ink-soft); line-height:1.45; }
.sup-topic-arrow { flex:0 0 auto; color:var(--ink-faintest); transition:transform .18s var(--ease), color .18s var(--ease); }
.sup-topic-arrow svg { width:19px; height:19px; display:block; }
.sup-topic:hover .sup-topic-arrow { color:var(--red); transform:translateX(3px); }
/* ---- guide article (#support/{key}) ---- */
.sup-article { max-width:var(--pulse-reading-maxw); }
.sup-back { display:inline-flex; align-items:center; gap:8px; padding:8px 14px 8px 11px; margin-bottom:22px;
border:1px solid var(--glass-border); border-radius:100px; background:var(--glass); cursor:pointer;
font-family:inherit; font-weight:600; font-size:.86rem; color:var(--ink-soft);
transition:border-color .16s var(--ease), color .16s var(--ease); }
.sup-back:hover { border-color:var(--glass-border-strong); color:var(--red-press); }
.sup-back:focus-visible { outline:2px solid var(--red); outline-offset:2px; }
.sup-back svg { width:17px; height:17px; }
.sup-article-head { display:flex; align-items:center; gap:16px; margin-bottom:18px; }
.sup-article-ic { flex:0 0 auto; width:56px; height:56px; border-radius:16px; display:grid; place-items:center;
background:#fbf1ef; color:var(--red); }
.sup-article-ic svg { width:28px; height:28px; }
.sup-article-title { font-family:var(--font-display); font-weight:600; font-size:clamp(1.6rem, 3vw, 2.1rem);
line-height:1.1; letter-spacing:-.01em; color:var(--deep); margin:6px 0 0; }
.sup-article-lead { font-size:1.06rem; line-height:1.6; color:var(--ink-soft); margin:0 0 22px; }
.sup-article-body { font-size:.98rem; line-height:1.65; color:var(--ink); }
/* Numbered how-to steps with red counters */
.sup-steps { list-style:none; counter-reset:supstep; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
.sup-steps > li { counter-increment:supstep; position:relative; padding:2px 0 2px 46px; }
.sup-steps > li::before { content:counter(supstep); position:absolute; left:0; top:0; width:30px; height:30px;
border-radius:50%; display:grid; place-items:center; font-family:var(--font-ui); font-weight:700; font-size:.9rem;
color:var(--red); background:#fbf1ef; }
/* Non-sequential key points with a check marker */
.sup-points { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:13px; }
.sup-points > li { position:relative; padding-left:30px; }
.sup-points > li::before { content:""; position:absolute; left:2px; top:.5em; width:9px; height:9px; border-radius:3px;
background:var(--red); transform:rotate(45deg); }
.sup-article-body code { font-family:var(--font-ui); font-size:.85em; background:var(--bg-2); padding:1px 6px; border-radius:6px; }
.sup-article-body a { color:var(--red-press); text-decoration:underline; text-underline-offset:2px; }
.sup-article-body em { font-style:normal; font-weight:600; color:var(--ink); }
/* Tip callout */
.sup-tip { display:flex; gap:12px; align-items:flex-start; margin:24px 0 0; padding:16px 18px;
background:#fbf7f2; border:1px solid var(--glass-border); border-left:3px solid var(--red); border-radius:12px; }
.sup-tip-ic { flex:0 0 auto; color:var(--red); margin-top:1px; }
.sup-tip-ic svg { width:20px; height:20px; display:block; }
.sup-tip p { margin:0; font-size:.92rem; line-height:1.6; color:var(--ink-soft); }
.sup-tip strong { color:var(--ink); }
.sup-article-cta { display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:30px;
padding-top:24px; border-top:1px solid var(--glass-border); }
.sup-article-cta .btn { display:inline-flex; align-items:center; gap:9px; }
.sup-article-cta .btn svg { width:18px; height:18px; }
/* ---- FAQ accordion ---- */
.sup-faq-group { margin-top:22px; }
.sup-faq-group:first-child { margin-top:0; }
.sup-faq-label { font-size:.7rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--red-press);
margin:0 0 10px; padding-left:2px; }
.sup-q { border:1px solid var(--glass-border); border-radius:var(--radius); background:var(--glass); margin-bottom:10px;
overflow:hidden; transition:border-color .16s var(--ease), box-shadow .16s var(--ease); }
.sup-q:hover { border-color:var(--glass-border-strong); }
.sup-q[open] { border-color:var(--glass-border-strong); box-shadow:var(--shadow-sm); }
.sup-q summary { display:flex; align-items:center; justify-content:space-between; gap:14px; cursor:pointer;
padding:15px 18px; list-style:none; font-weight:600; font-size:.98rem; color:var(--ink); }
.sup-q summary::-webkit-details-marker { display:none; }
.sup-q summary:focus-visible { outline:2px solid var(--red); outline-offset:-2px; border-radius:var(--radius); }
.sup-q-t { flex:1 1 auto; min-width:0; }
.sup-q-ic { flex:0 0 auto; position:relative; width:20px; height:20px; }
.sup-q-ic::before, .sup-q-ic::after { content:""; position:absolute; background:var(--ink-faint); border-radius:2px;
transition:transform .2s var(--ease), background .2s var(--ease); }
.sup-q-ic::before { top:9px; left:3px; width:14px; height:2px; }
.sup-q-ic::after { left:9px; top:3px; width:2px; height:14px; }
.sup-q[open] .sup-q-ic::after { transform:rotate(90deg); }
.sup-q[open] .sup-q-ic::before, .sup-q[open] .sup-q-ic::after { background:var(--red); }
.sup-a { padding:0 18px 17px; font-size:.93rem; line-height:1.65; color:var(--ink-soft); }
.sup-a a { color:var(--red-press); text-decoration:underline; text-underline-offset:2px; }
.sup-a code { font-family:var(--font-ui); font-size:.85em; background:var(--bg-2); padding:1px 6px; border-radius:6px; }
/* ---- no-results state + SR-only live region for search announcements ---- */
.sup-empty { text-align:center; color:var(--ink-soft); font-size:.95rem; margin:26px 0 0; }
.sup-empty a { color:var(--red-press); text-decoration:underline; }
.sup-sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
/* ---- contact card ---- */
.sup-contact { display:flex; gap:30px; flex-wrap:wrap; align-items:stretch; margin-top:40px; padding:28px 30px;
border:1px solid var(--glass-border); border-radius:var(--radius-xl); background:#fbf7f2; }
.sup-contact-main { flex:1 1 320px; min-width:0; }
.sup-contact-h { font-family:var(--font-display); font-weight:600; font-size:1.5rem; color:var(--deep); margin:8px 0 0; }
.sup-contact-p { color:var(--ink-soft); font-size:.98rem; line-height:1.6; margin:8px 0 0; max-width:46ch; }
.sup-contact-actions { display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:20px; }
.sup-contact-actions .btn { display:inline-flex; align-items:center; gap:9px; }
.sup-contact-actions .btn svg { width:18px; height:18px; }
.sup-contact-link { font-family:var(--font-ui); font-size:.9rem; font-weight:600; color:var(--ink-soft);
text-decoration:underline; text-underline-offset:2px; }
.sup-contact-link:hover { color:var(--red-press); }
.sup-contact-aside { flex:0 0 auto; display:flex; flex-direction:column; gap:2px; padding-left:30px;
border-left:1px solid var(--glass-border); min-width:200px; }
.sup-aside-label { font-size:.7rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
color:var(--ink-faintest); margin-bottom:8px; }
.sup-aside-link { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 0;
font-size:.94rem; font-weight:500; color:var(--ink); border-bottom:1px solid var(--glass-border);
transition:color .16s var(--ease); }
.sup-aside-link:last-child { border-bottom:0; }
.sup-aside-link svg { width:16px; height:16px; color:var(--ink-faintest); transition:transform .16s var(--ease), color .16s var(--ease); }
.sup-aside-link:hover { color:var(--red); }
.sup-aside-link:hover svg { color:var(--red); transform:translateX(3px); }
@media (max-width:720px) {
.sup-contact { padding:22px; gap:22px; }
.sup-contact-aside { padding-left:0; border-left:0; border-top:1px solid var(--glass-border); padding-top:20px; flex-basis:100%; }
}
/* ---- "New to Pulse?" card at the top of the help centre → #manual ---- */
.sup-manual { max-width:760px; margin:16px auto 26px; padding:14px 18px; background:#fbf7f2;
border-left:3px solid var(--red); }
/* =====================================================================
User manual (#manual · pulse-manual.js). The landing page and the chapter
frame are built from the .sup parts so they read as part of Help; the
chapter text itself is .man-doc, the fragments build_web.mjs makes from the
print manual (their class names are the print source's). Titles and text
carry PulseS / PulseSX / PulseSX Max, so nothing here is uppercased.
===================================================================== */
.man { max-width:var(--pulse-doc-maxw); }
.man-head { display:flex; align-items:flex-start; gap:18px; }
.man-head-txt { min-width:0; }
.man-head .sup-article-title { margin:2px 0 0; }
.man-head [tabindex="-1"]:focus { outline:none; }
.man-lead { font-size:1.06rem; line-height:1.6; color:var(--ink-soft); margin:10px 0 0; max-width:62ch; }
.man-meta { display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 8px; min-height:1.4em;
font-family:var(--font-ui); font-size:.86rem; font-weight:600; color:var(--ink-faint); margin:10px 0 0; }
.man-meta-sep { color:var(--ink-faintest); }
.man-pdf { display:inline-flex; align-items:center; gap:5px; color:var(--red-press); text-decoration:underline;
text-underline-offset:2px; }
.man-pdf svg { width:15px; height:15px; flex:none; align-self:center; }
.man-pdf:hover { color:var(--red); }
.man-pdf-n { font-weight:500; color:var(--ink-faintest); }
.man-toc { list-style:none; margin:0; padding:0; display:grid;
grid-template-columns:repeat(auto-fill, minmax(min(340px, 100%), 1fr)); gap:12px; }
.man-toc > li { display:flex; min-width:0; }
.man-ch { align-items:flex-start; }
.man-ch .sup-topic-ic { width:42px; height:42px; border-radius:12px; }
.man-ch .sup-topic-ic svg { width:21px; height:21px; }
.man-ch .sup-topic-arrow { align-self:center; }
.man-ch-n { font-family:var(--font-ui); font-weight:700; font-size:1.02rem; line-height:1; }
.man-ch-aa { font-size:.9rem; letter-spacing:-.01em; }
.man-ch-k { font-size:.76rem; font-weight:600; color:var(--ink-faint); }
/* Punctuation for screen readers only, at the end of the kicker and title
lines. Clipped but left inline, so the link's name reads "Chapter 4: …"
without the space an out-of-flow span would add. */
.man-sep { clip-path:inset(50%); }
.man-tip { max-width:var(--pulse-reading-maxw); margin-top:30px; }
.man-tip em { font-style:normal; font-weight:600; color:var(--ink); }
.man-tip a { color:var(--ink); text-decoration:underline; text-underline-offset:2px; }
.man-tip a:hover { color:var(--red-press); }
.man-loading { margin:18px 0; font-size:.92rem; color:var(--ink-faint); animation:manLate .2s .25s both; }
@keyframes manLate { from { opacity:0; } to { opacity:1; } }
.man-failed { margin:18px 0; padding:16px 18px; border:1px solid var(--glass-border); border-left:3px solid var(--red);
border-radius:12px; background:#fbf7f2; }
.man-failed p { margin:0 0 12px; font-size:.94rem; color:var(--ink-soft); }
.man-failed strong { color:var(--ink); }
/* "New in the second edition", folded; the note's own label is the summary. */
.man-news { max-width:var(--pulse-reading-maxw); margin-top:30px; border:1px solid var(--glass-border);
border-radius:var(--radius); background:var(--glass); }
.man-news summary { display:flex; align-items:baseline; flex-wrap:wrap; gap:2px 12px; padding:14px 18px;
cursor:pointer; list-style:none; }
.man-news summary::-webkit-details-marker { display:none; }
.man-news summary::before { content:""; flex:none; align-self:center; width:7px; height:7px; margin-right:2px;
border-right:2px solid var(--red); border-bottom:2px solid var(--red); transform:rotate(-45deg);
transition:transform .18s var(--ease); }
.man-news[open] summary::before { transform:rotate(45deg); }
.man-news summary:focus-visible { outline:2px solid var(--red); outline-offset:-2px; border-radius:var(--radius); }
.man-news-t { font-weight:650; color:var(--ink); }
.man-news-hint { font-size:.86rem; color:var(--ink-faint); }
.man-news-body { padding:0 18px 4px; }
.man-news-body .note { margin-top:0; }
.man-news-body .note .lbl { display:none; }
/* ---- a chapter: the frame ---- */
.man-read { max-width:47rem; }
.man-read > .sup-back { margin-bottom:18px; }
.man-read > .sup-back svg { flex:none; }
.man-intoc { margin:0 0 28px; border:1px solid var(--glass-border); border-radius:var(--radius); background:#fbf7f2; }
.man-intoc summary { display:flex; align-items:baseline; gap:10px; padding:12px 16px; cursor:pointer; list-style:none; }
.man-intoc summary::-webkit-details-marker { display:none; }
.man-intoc summary::before { content:""; flex:none; align-self:center; width:7px; height:7px;
border-right:2px solid var(--red); border-bottom:2px solid var(--red); transform:rotate(-45deg);
transition:transform .18s var(--ease); }
.man-intoc[open] summary::before { transform:rotate(45deg); }
.man-intoc summary:focus-visible { outline:2px solid var(--red); outline-offset:-2px; border-radius:var(--radius); }
.man-intoc-h { font-family:var(--font-ui); font-weight:700; font-size:.88rem; color:var(--ink); }
.man-intoc-n { font-size:.8rem; color:var(--ink-faint); }
.man-intoc ol { list-style:none; margin:0; padding:0 16px 12px; columns:2 17rem; column-gap:28px; }
.man-intoc li { break-inside:avoid; margin:0; }
.man-doc .man-intoc a { display:flex; gap:10px; padding:5px 0; font-size:.9rem; line-height:1.4; color:var(--ink-soft);
text-decoration:none; }
.man-doc .man-intoc a:hover { color:var(--red-press); }
.man-doc .man-intoc a:hover .man-intoc-t { text-decoration:underline; text-underline-offset:2px; }
.man-intoc .n { flex:0 0 2.4em; font-family:var(--font-ui); font-weight:700; font-variant-numeric:tabular-nums; color:var(--red-press); }
.man-pager { display:grid; grid-template-columns:1fr auto 1fr; align-items:stretch; gap:12px; margin-top:44px;
padding-top:24px; border-top:1px solid var(--glass-border); }
.man-pg { display:flex; flex-direction:column; gap:4px; min-width:0; padding:14px 16px; border-radius:var(--radius);
border:1px solid var(--glass-border); background:var(--glass); color:var(--ink); text-decoration:none;
transition:border-color .16s var(--ease), box-shadow .16s var(--ease); }
.man-pg:hover { border-color:var(--glass-border-strong); box-shadow:var(--shadow-sm); }
.man-pg:focus-visible, .man-pg-all:focus-visible { outline:2px solid var(--red); outline-offset:2px; }
.man-pg-next { text-align:right; align-items:flex-end; }
.man-pg-none { visibility:hidden; }
.man-pg-k { display:inline-flex; align-items:center; gap:6px; font-family:var(--font-ui); font-size:.78rem;
font-weight:700; color:var(--red-press); }
.man-pg-k svg { width:15px; height:15px; flex:none; }
.man-pg-t { font-weight:600; font-size:.95rem; line-height:1.35; }
.man-pg-n { display:block; font-size:.78rem; font-weight:600; color:var(--ink-faint); }
.man-pg:hover .man-pg-t { color:var(--red-press); }
.man-pg-all { display:inline-flex; align-items:center; justify-content:center; gap:8px; align-self:center;
padding:9px 14px; border-radius:100px; border:1px solid var(--glass-border); background:var(--glass);
font-family:inherit; font-weight:600; font-size:.86rem; color:var(--ink-soft); text-decoration:none; white-space:nowrap; }
.man-pg-all:hover { border-color:var(--glass-border-strong); color:var(--red-press); }
.man-pg-all svg { width:16px; height:16px; flex:none; }
/* ---- a chapter: the text (fragments from build_web.mjs) ---- */
.man-doc { font-size:.98rem; line-height:1.66; color:var(--ink); overflow-wrap:break-word; }
.man-doc::after { content:""; display:table; clear:both; }
.man-doc p, .man-doc ul, .man-doc ol, .man-doc dl { margin:0 0 12px; }
.man-doc ul, .man-doc ol { padding-left:1.35em; }
.man-doc li { margin:0 0 5px; }
.man-doc li::marker { color:var(--red); }
.man-doc b, .man-doc strong { font-weight:650; color:var(--ink); }
.man-doc a { color:var(--red-press); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:2px; }
.man-doc a:hover { color:var(--red); }
.man-doc a.man-xref { font-variant-numeric:tabular-nums; white-space:nowrap; }
.man-doc .pn { text-transform:none; letter-spacing:normal; font-variant:normal; white-space:nowrap; }
.man-doc [tabindex="-1"]:focus { outline:none; }
.man-doc .ch-head { margin:0 0 22px; padding-bottom:18px; border-bottom:2px solid var(--red); }
.man-doc .ch-num { margin:0 0 6px; font-family:var(--font-ui); font-size:.84rem; font-weight:700; color:var(--red-press); }
.man-doc h1 { font-family:var(--font-display); font-weight:600; font-size:clamp(1.7rem, 3.2vw, 2.3rem); line-height:1.1;
letter-spacing:-.01em; color:var(--deep); margin:0; }
.man-doc .ch-lede { margin:12px 0 0; font-size:1.06rem; line-height:1.6; color:var(--ink-soft); }
.man-doc h2 { clear:both; font-family:var(--font-display); font-weight:600; font-size:clamp(1.3rem, 2.2vw, 1.5rem);
line-height:1.2; letter-spacing:-.01em; color:var(--deep); margin:40px 0 12px;
scroll-margin-top:calc(var(--nav-h) + 18px); border-radius:8px; }
.man-doc h2 .n { display:inline-block; min-width:2.2em; margin-right:.45em; font-family:var(--font-ui); font-weight:700;
font-size:.74em; letter-spacing:0; color:var(--red); vertical-align:.08em; }
.man-doc h3 { clear:both; font-family:var(--font-body); font-weight:700; font-size:1.02rem; line-height:1.35; color:var(--ink);
margin:26px 0 8px; }
.man-doc h2 + h3 { margin-top:12px; }
.man-doc .man-hit { animation:manHit 1.6s var(--ease); }
@keyframes manHit { from { background:rgba(var(--red-rgb), .10); box-shadow:0 0 0 8px rgba(var(--red-rgb), .10); }
to { background:transparent; box-shadow:0 0 0 8px transparent; } }
/* Tables sit on a white card and scroll sideways inside it when the screen
is narrower than the table; a table of three or more columns keeps a
readable width rather than squeezing each column to a word. */
.man-doc .tw { clear:both; margin:14px 0 20px; overflow-x:auto; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain;
border:1px solid var(--glass-border); border-radius:12px;
background:
linear-gradient(to right, #fff 30%, rgba(255,255,255,0)) left / 32px 100% no-repeat local,
linear-gradient(to left, #fff 30%, rgba(255,255,255,0)) right / 32px 100% no-repeat local,
radial-gradient(farthest-side at 0 50%, rgba(43,11,14,.16), rgba(43,11,14,0)) left / 12px 100% no-repeat scroll,
radial-gradient(farthest-side at 100% 50%, rgba(43,11,14,.16), rgba(43,11,14,0)) right / 12px 100% no-repeat scroll,
#fff;
position:relative; } /* holds the hidden .sup-sr words, so they scroll and clip with the table */
.man-doc .tw:focus-visible { outline:2px solid var(--red); outline-offset:2px; }
/* separate, not collapse: a pinned first column (phones, below) then carries
its own row lines instead of covering the table's. */
.man-doc table { width:100%; border-collapse:separate; border-spacing:0; font-size:.9rem; line-height:1.48; }
.man-doc table:has(tr > :nth-child(3)) { min-width:33rem; }
.man-doc table:has(tr > :nth-child(4)) { min-width:36rem; }
.man-doc table:has(tr > :nth-child(5)), .man-doc table.msg { min-width:42rem; }
.man-doc th { text-align:left; vertical-align:bottom; padding:10px 12px; font-family:var(--font-ui); font-size:.8rem;
font-weight:700; line-height:1.3; color:var(--ink-faint); border-bottom:2px solid rgba(var(--red-rgb), .75); }
.man-doc td { padding:9px 12px; vertical-align:top; border-bottom:1px solid var(--glass-border); }
/* A row's first cell is its header (| ), for screen readers;
it looks like the cells beside it. */
.man-doc tbody th { vertical-align:top; padding:9px 12px; font-family:inherit; font-size:inherit; font-weight:inherit;
line-height:inherit; color:inherit; border-bottom:1px solid var(--glass-border); }
.man-doc tbody tr:last-child :is(td, th) { border-bottom:0; }
.man-doc td.num, .man-doc th.num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.man-doc td.c, .man-doc th.c { text-align:center; }
.man-doc td.yes { text-align:center; font-weight:700; color:var(--red); }
.man-doc td.no { text-align:center; color:var(--ink-faintest); }
.man-doc tr.grp td { background:#f7f1ea; font-family:var(--font-ui); font-size:.82rem; font-weight:700; color:var(--ink-soft); }
.man-doc table.msg :is(th, td):first-child { width:42%; }
.man-doc table.msg td:nth-child(2) { width:29%; }
.man-doc .cap { margin:-10px 0 18px; }
.man-doc .small, .man-doc .cap { font-size:.87rem; line-height:1.55; color:var(--ink-faint); }
.man-doc .pill { font-size:.76rem; }
.man-doc .pill.p-g { background:#e3f0e4; border-color:#cfe3d1; color:#23602b; }
.man-doc .pill.p-a { background:#fbecd2; border-color:#f1dcb4; color:#7a4f05; }
.man-doc .pill.p-r { background:#f8dcdd; border-color:#f0c7c9; color:#9b0610; }
.man-doc .pill.p-n { background:#ebe6e7; border-color:#ddd5d7; color:#5d5356; }
.man-doc .note { clear:both; margin:18px 0 20px; padding:14px 18px 4px; border-radius:12px; background:#fbf7f2;
border:1px solid var(--glass-border); border-left:3px solid var(--red); }
.man-doc .note .lbl { display:block; margin-bottom:6px; font-family:var(--font-ui); font-size:.8rem; font-weight:700; color:var(--red-press); }
.man-doc .say { clear:both; margin:12px 0 16px; padding:12px 16px; border:1px solid var(--glass-border);
border-left:3px solid var(--glass-border-strong); border-radius:10px; background:#fff; color:var(--ink-soft); }
.man-doc .say p:last-child { margin-bottom:0; }
.man-doc ol.steps { list-style:none; counter-reset:manstep; padding:0; margin:10px 0 18px; }
.man-doc ol.steps > li { counter-increment:manstep; position:relative; margin:0 0 10px; padding-left:40px; }
.man-doc ol.steps > li::before { content:counter(manstep); position:absolute; left:0; top:0; width:27px; height:27px;
border-radius:50%; display:grid; place-items:center; font-family:var(--font-ui); font-weight:700; font-size:.84rem;
color:var(--red); background:#fbf1ef; }
.man-doc ol.steps ul { margin:6px 0 0; }
.man-doc .two { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); gap:0 28px; }
.man-doc .two h3 { margin-top:18px; }
.man-doc figure.shot { clear:both; margin:22px 0 24px; }
.man-doc figure.shot img { display:block; width:100%; height:auto; border:1px solid var(--glass-border); border-radius:12px;
background:#fff; box-shadow:var(--shadow-sm); }
.man-doc figcaption { margin-top:8px; font-size:.87rem; line-height:1.5; color:var(--ink-faint); }
.man-fig-k { font-weight:650; color:var(--ink-soft); }
/* A tall phone screenshot sits narrow on the right, the text running beside
it (as in print); tables, notes and headings that follow start below it. */
.man-doc figure.shot.phone { float:right; clear:right; width:38%; max-width:250px; margin:6px 0 16px 26px; }
/* Pulse at a glance */
/* The five steps, one row each: the number, then the step and its line
(not a grid — the line holds inline product names). */
.man-doc ol.flow { list-style:none; padding:0; margin:4px 0 26px; border-top:2px solid var(--red); }
.man-doc ol.flow li { position:relative; margin:0; padding:12px 0 12px 3rem; border-bottom:1px solid var(--glass-border);
font-size:.95rem; line-height:1.55; color:var(--ink-soft); }
.man-doc ol.flow li::marker { content:none; }
.man-doc .flow .fn { position:absolute; left:2px; top:12px; font-family:var(--font-display); font-size:1.7rem; line-height:1; color:var(--red); }
.man-doc .flow b { display:block; font-size:1rem; }
.man-doc .floors { display:grid; gap:10px; margin:12px 0 8px; grid-template-columns:repeat(auto-fit, minmax(min(9.5rem, 100%), 1fr)); }
.man-doc .floors div { padding:12px 14px; border-radius:12px; background:#fbf7f2; font-size:.88rem; line-height:1.5; color:var(--ink-soft); }
.man-doc .floors b { display:block; margin-bottom:4px; font-family:var(--font-display); font-weight:600; font-size:1.45rem; line-height:1.05; color:var(--red); }
/* Glossary */
.man-doc dl.gl { columns:2 18rem; column-gap:32px; margin-top:4px; }
.man-doc dl.gl > div { break-inside:avoid; margin:0 0 14px; }
.man-doc dl.gl dt { font-weight:700; color:var(--ink); }
.man-doc dl.gl dt::before { content:""; display:inline-block; width:7px; height:7px; margin:0 8px 2px 0; border-radius:2px; background:var(--red); }
.man-doc dl.gl dd { margin:2px 0 0; font-size:.93rem; color:var(--ink-soft); }
.man-doc .endmark { clear:both; margin-top:28px; padding-top:14px; border-top:1px solid var(--glass-border); font-size:.87rem; color:var(--ink-faint); }
@media (prefers-reduced-motion: reduce) {
.man-doc .man-hit, .man-loading { animation:none; }
}
/* Phones: the title sits beside the icon and the lead runs full width under
both; a phone screenshot is centred on its own line; the pager's two cards
sit side by side under "All chapters". */
@media (max-width:560px) {
.man-head { display:grid; grid-template-columns:auto 1fr; gap:0 14px; align-items:center; }
.man-head-txt { display:contents; }
.man-head .sup-article-title { margin:0; }
.man-lead, .man-meta { grid-column:1 / -1; }
.man-lead { font-size:1rem; margin-top:14px; }
.man-head .sup-article-ic { width:46px; height:46px; border-radius:13px; }
.man-head .sup-article-ic svg { width:23px; height:23px; }
.man-ch { gap:13px; padding:16px; }
.man-ch .sup-topic-ic { width:36px; height:36px; border-radius:10px; }
.man-ch .sup-topic-ic svg { width:19px; height:19px; }
.man-ch .sup-topic-arrow { display:none; }
.sup-manual { padding:13px 14px; gap:12px; }
.sup-manual .sup-topic-ic { width:40px; height:40px; }
.man-news summary { padding:13px 14px; }
.man-news-body { padding:0 14px 2px; }
.man-doc { font-size:1rem; }
.man-doc h2 { margin-top:34px; }
.man-doc figure.shot.phone { float:none; width:auto; max-width:min(250px, 78%); margin:20px auto 22px; }
.man-doc .note { padding:12px 14px 2px; }
.man-doc td, .man-doc th, .man-doc tbody th { padding:8px 10px; }
/* A table of four or more columns that scrolls keeps its first column in
view. Not one of three: the pinned column would take nearly half the box
and leave one data column readable. Nor a message table: its first
column is the long part. */
.man-doc .tw.man-scrolls table:not(.msg):has(tr > :nth-child(4)) :is(th, td):first-child { position:sticky; left:0; z-index:1;
width:9.5rem !important; min-width:9.5rem; background:#fff;
box-shadow:inset -1px 0 0 var(--glass-border), 6px 0 8px -6px rgba(43,11,14,.16); }
.man-doc .tw.man-scrolls table:not(.msg):has(tr > :nth-child(4)) tr.grp td:first-child { position:static; width:auto !important; min-width:0;
background:#f7f1ea; box-shadow:none; }
.man-doc .tw.man-scrolls tr.grp .grp-t { position:sticky; left:10px; display:inline-block; max-width:calc(100vw - 72px); }
.man-doc table:has(tr > :nth-child(3)) { min-width:26rem; }
.man-doc table:has(tr > :nth-child(4)) { min-width:31rem; }
.man-doc table:has(tr > :nth-child(5)) { min-width:40rem; }
.man-doc .tw table.msg:has(tr > :nth-child(3)) { min-width:36rem; }
.man-intoc summary { padding:12px 14px; }
.man-intoc ol { padding:0 14px 10px; }
.man-pager { grid-template-columns:1fr 1fr; gap:10px; }
.man-pg-all { grid-column:1 / -1; grid-row:1; justify-self:center; }
.man-pg { padding:12px 13px; }
.man-pg-none { display:none; }
.man-pager:has(.man-pg-none) .man-pg { grid-column:1 / -1; }
}
/* ── Rated / conversation check-in choice (wizard) ──────────────────── */
.pulse-products { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:0 0 6px; }
@media (max-width:560px) { .pulse-products { grid-template-columns:1fr; } }
.pulse-product {
text-align:left; font:inherit; color:inherit; cursor:pointer;
background:#fff; border:1.5px solid #EFE7DD; border-radius:14px;
padding:14px 16px; display:flex; flex-direction:column; gap:6px;
transition:border-color .15s, background .15s, box-shadow .15s;
}
.pulse-product:hover:not(:disabled) { border-color:#d8cfc2; }
.pulse-product.on { border-color:#c80815; background:#fdf6f6; box-shadow:0 1px 0 rgba(200,8,21,.06); }
.pulse-product:disabled { opacity:.55; cursor:not-allowed; }
.pp-head { display:flex; align-items:center; gap:8px; }
.pp-name { font-weight:700; font-size:1.05rem; letter-spacing:.01em; }
.pp-sub { color:#6c665e; font-size:.86rem; }
.pp-live { font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:#8c857b; font-weight:700; }
.pp-badge {
font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; font-weight:700;
color:#6c665e; background:#f2ede6; border:1px solid #e5ddd1; border-radius:999px; padding:2px 7px;
}
.pp-badge.sm { padding:1px 6px; vertical-align:middle; }
.pp-note { margin:2px 0 14px; color:#6c665e; font-size:.84rem; max-width:72ch; min-height:1.1em; }
/* ── Nav: disabled "Soon" editions + conversation mode banner ───────── */
.pulse-nav-item.is-disabled { opacity:.5; cursor:default; }
.pulse-nav-item.is-disabled:hover { background:none; color:var(--ink-faint); }
.pulse-nav-soon {
margin-left:auto; font-size:.6rem; letter-spacing:.08em; text-transform:uppercase;
font-weight:700; color:#8c857b; background:#f2ede6; border:1px solid #e5ddd1;
border-radius:999px; padding:1px 6px; white-space:nowrap;
}
#appView.pulse-collapsed .pulse-nav-soon { display:none; }
.pulse-mode-banner {
background:#fdf6f6; border:1px solid #f0d8da; border-radius:12px;
padding:12px 14px; margin:0 0 16px;
}
.pulse-mode-banner .pp-name { font-weight:700; font-size:1.05rem; }
.pulse-mode-banner .pp-badge { margin-left:8px; vertical-align:middle; }
|