/* THE TOKENS, ONCE (d-layout-design-system-first): every token framework/interface/experience/truth/tokens.js declares, with the value pollux's spec measured from Morris's prototype (studio/design-system/morris-design-system.json).
   No other sheet sets a colour of its own in a component: components/ds-*.css read these and nothing else (studio/the-design-system-is-built-from-tokens.test.js).
   --fg, --fill, --line and --danger keep the values they had before this root was whole, because screens already read them (network.css); the component sheets derive their fills and edges from --fg instead of reading --fill and --line.
   --danger has no spec value (Morris draws no error on the 20 routes measured): it is the prototype's own down-chip red. A quieter ink than --fg is not declared; the sheets mix it from --fg. Neither is a new token, and a declaration of them is a design decision for James. */
:root{
--font:"Pitagon Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--font-sans:"Pitagon Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--font-mono:ui-monospace,SFMono-Regular,Menlo,monospace;
--fs:15px;--fs-sm:13px;--fs-lg:18px;--fs-xl:44px;--lh:1.4667;--weight-strong:600;
--sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--page-pad:24px;--maxw:1300px;
--scheme:dark;--bg:var(--m-1,rgb(6,11,20));--graph-edge:var(--m-24,#94A6C2);--graph-edge-bridge:var(--m-29,#00F9CF);--graph-label:var(--m-14,#9AA6B4);--surface:rgba(var(--m-ink-rgb,255,255,255),0.04);--card:var(--m-4,rgb(14,21,34));--raised:var(--m-4,rgb(14,21,34));--inset:var(--m-0,rgb(3,7,14));
--fill:rgba(var(--m-1-rgb,6,11,20),0.78);--fill-2:rgba(var(--m-ink-rgb,255,255,255),0.12);--hl:rgba(0,146,233,0.14);--overlay:rgba(var(--m-0-rgb,3,7,14),0.7);--surface-light:var(--m-9,#F4F7FA);--paper:#FFFFFF;
--line:rgba(var(--m-ink-rgb,255,255,255),0.1);--line-soft:rgba(var(--m-ink-rgb,255,255,255),0.06);--line-faint:rgba(var(--m-ink-rgb,255,255,255),0.04);
--fg:var(--m-10,#EEF2F6);--fg-soft:var(--m-12,#C9D3DE);
--notification-ground:var(--m-7,#16223A);--notification-ink:var(--fg);--notification-ring:var(--line);--notification-shadow:rgba(0,0,0,0.6);--notification-action:var(--accent-2);--notification-action-fill:var(--line);--notification-action-hover:rgba(var(--m-ink-rgb,255,255,255),0.16);--notification-alert:var(--m-28,#FFB4A6);
--accent:rgb(0,146,233);--accent-2:var(--m-18,rgb(124,196,255));--accent-fg:var(--m-10,rgb(238,242,246));--teal:var(--m-29,rgb(0,249,207));--amber:var(--m-30,rgb(238,178,61));--amber-soft:var(--m-21,rgb(250,221,173));--violet:var(--m-25,rgb(209,168,255));--danger:var(--m-28,#FFB4A6);--ok:var(--m-20,rgb(124,242,220));--trend-rising:var(--m-22,#A8CE5F);--trend-cooling:var(--m-24,#94A6C2);
--radius:12px;--radius-lg:20px;
--shadow:0 0 0 1px rgba(var(--m-ink-rgb,255,255,255),0.05),0 18px 40px rgba(0,0,0,0.4);--shadow-lg:0 0 0 1px rgba(var(--m-ink-rgb,255,255,255),0.09),0 30px 80px rgba(0,0,0,0.55),0 0 60px rgba(0,146,233,0.06);
--sidebar-bg:var(--bg);--sidebar-fg:var(--m-14,rgb(154,166,180));--sidebar-line:rgba(var(--m-ink-rgb,255,255,255),0.06);--topbar-bg:var(--bg)}
a{color:var(--m-18,#7CC4FF);text-decoration:none}
a:not([class]):hover{color:var(--m-19,#BFE3FF)}
a[data-pulse-link]:hover{color:var(--m-19,#BFE3FF)}
[role="tab"]{cursor:pointer}
/* A MOVE BETWEEN OUR SCREENS IS A SHORT CROSS-FADE (feel-panel-pending-transitions): the browser holds the old screen while the new one arrives and fades between them; a person who asks for reduced motion gets none. */
@media (prefers-reduced-motion: no-preference){@view-transition{navigation:auto}}
@keyframes fx-vt-out{to{opacity:0}}
@keyframes fx-vt-in{from{opacity:0}}
::view-transition-old(root){animation:fx-vt-out 140ms ease both}
::view-transition-new(root){animation:fx-vt-in 140ms ease both}
/* ONE PENDING STATE (components/pending.js): a thing being acted on in place is dimmed, shows it is working and takes no press until it is done. */
.is-pending,[aria-busy="true"]{cursor:progress}
.is-pending{opacity:.62;transition:opacity 120ms ease}
.is-pending button,.is-pending [role="button"]{pointer-events:none}
@media (prefers-reduced-motion: reduce){.is-pending{transition:none}}
/* EVERY CLICKABLE THING SAYS SO ON HOVER (review-ui-batch, James and Jeremy, Alpha Review 29 Oct: "Add Hover Indicators on clickable elements"): a quiet lift for each link, button, summary, role=button, menu item and label for an input. It sets no colour - a tab, link, segment or button of Settings keeps
   its colour on hover, as Morris's do (a-shared-cause-is-fixed-once-for-every-screen) - and is left off what already says it: the selected, the current, the pressed, the disabled. Zero specificity on the kinds, so a control's own hover still wins where it sets a filter. */
:where(a[href],button,summary,[role=button],[role=menuitem],label[for]):not(.is-selected,[aria-current],[aria-pressed="true"],:disabled,[disabled],[aria-disabled="true"],.st-seg-btn,.st-tab,.st-link,.st-btn):hover{filter:brightness(1.18)}
/* A SEARCH INPUT'S CLEAR x IS THERE ON HOVER ONLY (jt-input-clear-x-on-hover-only; James 3 Nov): the browser draws it whenever the box has text and focus, which put a second x beside the dialog's close and left one showing in the idle rail field */
input[type=search]::-webkit-search-cancel-button{opacity:0;cursor:pointer}
input[type=search]:hover::-webkit-search-cancel-button{opacity:1}

/* ALL FILTERS IS MORRIS'S SHEET (James, sizing-05, 28 Oct: "way off and being covered in some overflow hidden way"): the same <details>, drawn fixed over the page - 780px, or the window less a margin - with a backdrop, a head with a close x, a body that scrolls and a foot with Reset all and Show N people. Two banners, labelled rows of chips with dots in the tie's own tones. */
.fx-drop[data-filters][open]::before{content:"";position:fixed;inset:0;z-index:18;background:rgba(var(--m-1-rgb,6,11,20),0.62);backdrop-filter:blur(6px)}
.fp-bar .fx-drop[data-filters][open]>.fp-sheet{position:fixed;left:max(20px,calc((100vw - 780px)/2));top:80px;right:auto;z-index:30;width:min(780px,calc(100vw - 40px));max-height:calc(100vh - 128px);padding:0;gap:0;display:flex;flex-direction:column;align-items:stretch;border-radius:24px;background:#111B2E;box-shadow:0 0 0 1px rgba(var(--m-ink-rgb,255,255,255),0.08),0 30px 80px rgba(0,0,0,0.6)}
.fp-sheet-head{display:flex;align-items:center;justify-content:space-between;padding:0 22px;height:72px;box-sizing:border-box;border-bottom:1px solid rgba(var(--m-ink-rgb,255,255,255),0.07);flex:none}
.fp-sheet-title{margin:0;font-size:17px;font-weight:600;color:var(--m-10,#EEF2F6)}
.fp-sheet-x{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;background:rgba(var(--m-ink-rgb,255,255,255),0.07);color:var(--m-10,#EEF2F6);text-decoration:none}
.fp-sheet-body{overflow-y:auto;padding:18px 22px 6px;flex:1 1 auto;min-height:0}
.fp-sheet-foot{display:flex;align-items:center;justify-content:space-between;padding:0 22px;height:72px;box-sizing:border-box;border-top:1px solid rgba(var(--m-ink-rgb,255,255,255),0.07);flex:none}
.fp-sheet-reset{color:var(--m-18,#7CC4FF);font-size:13px;font-weight:600;text-decoration:none;padding:0 14px}
.fp-sheet-show{display:inline-flex;align-items:center;height:44px;padding:0 22px;border-radius:999px;background:var(--m-9,#F4F7FA);color:var(--m-1,#060B14);font-size:15px;font-weight:600;text-decoration:none}
.fp-banner{display:flex;align-items:center;gap:12px;min-height:58px;padding:0 14px;box-sizing:border-box;border-radius:16px;margin-bottom:14px;font-size:13px;color:var(--m-57,#C9D4E2)}
.fp-banner b{color:var(--m-10,#EEF2F6);font-weight:600}
.fp-banner--new{background:rgba(0,146,233,0.12);box-shadow:inset 0 0 0 1px rgba(0,146,233,0.28)}
.fp-banner--dups{background:rgba(var(--m-27-rgb,255,178,122),0.07);box-shadow:inset 0 0 0 1px rgba(var(--m-ink-rgb,255,255,255),0.12)}
.fp-banner-dot{flex:none;width:9px;height:9px;border-radius:50%}
.fp-banner--new .fp-banner-dot{background:#0092E9;box-shadow:0 0 8px rgba(0,146,233,.7)}
.fp-banner--dups .fp-banner-dot{background:var(--m-27,#FFB27A);box-shadow:0 0 8px rgba(var(--m-27-rgb,255,178,122),.6)}
.fp-banner-text{flex:1 1 auto}
.fp-banner-act{flex:none;display:inline-flex;align-items:center;height:34px;padding:0 14px;border-radius:999px;font-size:12px;font-weight:600;text-decoration:none;color:var(--m-10,#EEF2F6)}
.fp-banner--new .fp-banner-act{background:#0A4A7A}
.fp-banner--dups .fp-banner-act{background:#6B4A40}
.fp-sheet-group{margin:24px 0 0}
/* NO LARGE EMPTY BAND (07b): where no banner stands above it, the first group starts under the header's rule. */
.fp-sheet-body>.fp-sheet-group:first-child{margin-top:0}
.fp-sheet-label{margin:0 0 10px;font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--m-16,#6F7E90)}
.fp-sheet-chips{display:flex;flex-wrap:wrap;gap:8px}
.fp-sheet-chips .fx-chip{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px;border-radius:12px;background:rgba(var(--m-ink-rgb,255,255,255),0.05);color:var(--m-10,#EEF2F6);font-size:13px;font-weight:600;text-decoration:none}
.fp-sheet-chips .fx-chip[data-on="true"]{background:var(--m-9,#F4F7FA);color:var(--m-1,#060B14)}
.fp-sheet-chips .fx-chip::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--m-16,#6F7E90)}
.fp-sheet-chips .fx-chip [data-count]{font-weight:400;opacity:.65}
.fp-sheet-chips [data-filter="inner-circle"]::before{background:#FFFFFF}
.fp-sheet-chips [data-filter-momentum="rising"]::before{background:var(--trend-rising,var(--m-22,#A8CE5F))}
.fp-sheet-chips [data-filter-momentum="steady"]::before{background:#4A5668}
.fp-sheet-chips [data-filter-momentum="cooling"]::before{background:var(--trend-cooling,var(--m-24,#94A6C2))}
.fp-sheet-chips [data-filter="favorites"]::before{background:var(--m-21,#FADDAD)}
.fp-sheet-chips [data-filter="new"]::before{background:#0092E9}
.fp-sheet-chips [data-filter="duplicates"]::before{background:var(--m-27,#FFB27A)}
.fp-sheet-aside{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:18px;padding-top:12px;border-top:1px solid rgba(var(--m-ink-rgb,255,255,255),0.07);font-size:13px;color:var(--m-14,#9AA6B4)}
.fp-sheet-aside a{color:var(--m-14,#9AA6B4)}

@font-face{font-family:"Pitagon Sans";src:url(/assets/pitagon-sans-400.6ea783e7f1.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
/* NO WEIGHT-600 FACE (demo-onboarding-last-step, 2 Nov): assets/pitagon-sans-600.woff2 is served and well formed but does not load in Chromium (document.fonts: error), and every element set in weight 600 then laid out at zero width: the onboarding's last chapter lost its heading, its brand and its "Take me to Feather". Weight 600 is asked of the regular face, which the browser draws bold, until a 600 file is seen to load (studio/design-system/fonts-seen-to-load.json holds what was seen). */

/* THE FRAME'S OWN BOXES (frame.js; d-layout-design-system-first): the page, the main column beside the rail, the backdrop and the way back. A colour is a token (base.css :root); the one the tokens do not name - the ground of a menu, Morris's var(--m-7,#16223A) -
   is declared once here as --fr-menu, which the rail's menus read. A declaration of it as a token is a design decision for tokens.js, not this sheet's.
   The main column is written `.fr-page .fr-main` so that it holds against a screen's own `main[...]` rule exactly as the inline style it replaces did. */
 /* THE PAGE'S MINIMUM WIDTH (frame-min-width; James, sizing-01): Morris's prototype holds 1024px and scrolls sideways below it - body{min-width:1024px;overflow-x:auto} - so content never shrinks, wraps or collapses
   when the window is half a screen. Said once, here, for every page the frame spells; there is no mobile layout (the phone layout stays deferred). 1024px is 256 of the spacing unit. */
/* NO OVERSCROLL (review-ui-batch, 29 Oct): the window is not pulled past its ends, and a scroll inside a panel or menu does not chain on to it; the rail stays stuck to the frame (rail.css). */
html,body{overscroll-behavior:none}
/* THE MESSAGE TO COPY (email-client-setting-b part 3; components/mail-client.js): shown when a mail link opened no app, in the page's own tokens. */
.fr-mailcopy{position:fixed;right:24px;bottom:24px;z-index:80;width:360px;max-width:90vw;box-sizing:border-box;padding:16px;border-radius:18px;background:var(--card);color:var(--fg);box-shadow:inset 0 0 0 1px var(--line),0 24px 60px color-mix(in srgb, var(--inset) 60%, transparent);display:flex;flex-direction:column;gap:10px;font:inherit}
.fr-mailcopy-says{margin:0;padding-right:40px;font-size:14px;line-height:21px;color:var(--fg)}
.fr-mailcopy-text{width:100%;box-sizing:border-box;border:0;border-radius:12px;padding:10px 12px;background:var(--surface);color:inherit;font:inherit;font-size:14px;line-height:21px;resize:none}
.fr-mailcopy-soft{align-self:flex-start;height:40px;padding:0 16px;border:0;border-radius:999px;background:color-mix(in srgb, var(--fg) 8%, transparent);color:var(--fg);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.fr-mailcopy-soft:hover{background:color-mix(in srgb, var(--fg) 16%, transparent)}
.fr-mailcopy-x{position:absolute;top:12px;right:12px;width:36px;height:36px;border:0;border-radius:50%;background:color-mix(in srgb, var(--fg) 7%, transparent);color:var(--fg);display:grid;place-items:center;font:inherit;font-size:20px;line-height:1;cursor:pointer}
body{min-width:calc(var(--sp-1) * 256);overflow-x:auto}
.fr-page{--fr-menu:var(--m-7,rgb(22,34,58));position:relative;min-height:100vh;width:100%;box-sizing:border-box;color:var(--fg);font-family:var(--font);font-size:var(--fs);line-height:calc(var(--fs) * var(--lh))}
.fr-page--app{background:var(--bg);display:flex}
.fr-page--entry,.fr-page--focus{background:var(--inset);position:fixed;inset:0;min-height:0;overflow:hidden}
/* THE STAGE (Morris's artboard for the way in and onboarding): 1440 x 1000, fitted to the window by components/stage.js, from its top-left corner; nothing on it reflows */
.fr-stage{position:absolute;left:0;top:0;width:1440px;height:1000px;transform-origin:0 0;display:flex;flex-direction:column;overflow:hidden}
.fr-glow{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:hidden}
.fr-stars{position:absolute;inset:0;overflow:hidden}
.fr-back{position:absolute;top:var(--sp-4);right:calc(var(--sp-1) * 5);z-index:2;font-size:var(--fs-sm);color:color-mix(in srgb, var(--fg) 63%, transparent)}
.fr-page .fr-main{position:relative;flex:999 1 560px;min-width:0;box-sizing:border-box;padding:calc(var(--sp-1) * 7) calc(var(--sp-1) * 8) calc(var(--sp-1) * 8);display:flex;flex-direction:column;gap:calc(var(--sp-1) * 5)}
.fr-page .fr-main--tight{gap:calc(var(--sp-1) * 4.5)}
.fr-page .fr-main--container{container-type:inline-size}
.fr-focus{position:relative;width:100%;max-width:calc(var(--sp-1) * 180);padding:calc(var(--sp-1) * 9) calc(var(--sp-1) * 8);box-sizing:border-box;flex:1;display:flex;flex-direction:column}
.fr-focus--wide{max-width:none;padding:0}

/* ARC GAUGE (design system: score ring, shared by Pulse and Goals): the rules of components/arc-gauge.js live HERE, in the shared sheet, because a screen's own sheet is only loaded for that screen (Goals' gauges drew black when these sat in pulse.css). The two colours of the arcs have no token (a declaration of them as tokens is a design decision): they are declared once, here, for every screen. */
:root{--pu-teal:var(--m-29,rgb(0,249,207));--pu-deep:rgb(0,91,198)}
/* THE GAUGE: the design system's ring, the arc in the score's two colours, the marker in the ink with the card's gap, the number and its change in the middle. */
.pu-gauge{--pu-g1:var(--accent);--pu-g2:var(--pu-teal);position:relative;display:block;flex:none;width:calc(var(--sp-1) * 35);height:calc(var(--sp-1) * 35)}
.pu-gauge[data-pulse-gauge="network"]{--pu-g1:var(--pu-deep);--pu-g2:var(--accent)}
.pu-gs1{stop-color:var(--pu-g1)}
.pu-gs2{stop-color:var(--pu-g2)}
.pu-marker{fill:var(--fg);stroke:var(--card)}
.pu-gauge-in{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.pu-gauge-num{font-size:var(--fs-xl);line-height:1.0909;font-weight:var(--weight-strong);letter-spacing:-0.02em}
.pu-gauge-num--none{font-size:calc(var(--fs-lg) + 2px)}
.pu-gauge-change{font-size:calc(var(--fs-sm) - 1px);line-height:1.33;color:color-mix(in srgb, var(--fg) 63%, transparent)}
.pu-gauge-change.is-up{color:var(--ok)}

/* BRIDGES YOU TO (conversions-people-person-network-a; the audit: bold words and a comma list in inline style): the panel's small heading, then each person a row that opens them. */
.pn-bridges{margin-top:14px}
.pn-bridges-h{margin:0 0 6px;font-size:11px;line-height:16px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--m-14,#9AA6B4)}
.pn-bridge-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.pn-bridge{display:flex;padding:10px 12px;border-radius:16px;background:rgba(var(--m-ink-rgb,255,255,255),0.03)}
.pn-bridge-link{flex:1;min-width:0;font-size:13px;line-height:18px;font-weight:600;color:inherit;text-decoration:none}.pn-bridge-link:hover{text-decoration:underline}

/* THE CONFLICT IS A CARD (conversions-people-person-network-a; the audit: this banner had no rule at all): a blue-tinted card, a short headline, the two values on their own rows, Keep mine the primary choice and Use theirs the soft one. */
.pn-conflicts{display:flex;flex-direction:column;gap:10px;margin:12px 0}
.pn-conflict{display:flex;flex-direction:column;gap:6px;padding:14px 16px;border-radius:16px;background:color-mix(in srgb,var(--accent-2) 10%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent-2) 22%,transparent)}
.pn-conflict-head{font-size:14px;line-height:20px;font-weight:600}
.pn-conflict-row{display:flex;gap:10px;font-size:13px;line-height:18px}
.pn-conflict-who{flex:none;min-width:56px;color:color-mix(in srgb,var(--fg) 63%,transparent)}
.pn-conflict-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}.pn-conflict-actions form{margin:0}
.pn-conflict-actions button{border:0;border-radius:999px;padding:8px 14px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;background:color-mix(in srgb,var(--fg) 10%,transparent);color:var(--fg)}
.pn-conflict-actions [data-offer-for$=":keep"] button{background:var(--fg);color:var(--bg)}

fieldset[disabled]{opacity:.5}
.fx-go{position:absolute;left:-9999px}
.fx-fold > summary{list-style:none}
.fx-fold[open] > summary{display:none}

/* AVATAR (design system: avatar): a round photo, or initials on the deep accent ground; chosen, it wears the accent ring with the surface's own gap. */
.ds-avatar{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:calc(var(--sp-1) * 8.5);height:calc(var(--sp-1) * 8.5);border-radius:50%;object-fit:cover;overflow:hidden;box-shadow:0 0 0 2px var(--card),0 0 0 calc(2px + 1px) color-mix(in srgb, var(--fg) 18%, transparent)}
.ds-avatar--initials{width:calc(var(--sp-1) * 9);height:calc(var(--sp-1) * 9);background:color-mix(in srgb, var(--accent) 22%, var(--bg));color:var(--fg);font:var(--weight-strong) var(--fs)/1 var(--font)}
.ds-avatar.is-selected{box-shadow:0 0 0 2px var(--card),0 0 0 calc(2px + 1px) color-mix(in srgb, var(--accent) 60%, transparent)}
/* hero: the large avatar the account and the person header wear (132, measured from the prototype), a multiple of the spacing token. */
.ds-avatar--hero,.ds-avatar--hero.ds-avatar--initials{width:calc(var(--sp-1) * 33);height:calc(var(--sp-1) * 33)}
.ds-avatar--hero.ds-avatar--initials{font-size:var(--fs-xl)}

/* BUTTON (design system: button, icon): the round control that holds one glyph. */
.ds-button{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:calc(var(--sp-1) * 7.5);height:calc(var(--sp-1) * 7.5);padding:0;border:0;border-radius:50%;font:inherit;font-size:var(--fs-sm);color:var(--fg);background:color-mix(in srgb, var(--fg) 8%, transparent);cursor:pointer}
.ds-button:hover{background:color-mix(in srgb, var(--fg) 16%, transparent)}
.ds-button--glyph{font-size:calc(var(--fs-lg) + 2px);line-height:1;text-decoration:none}
/* CARD (the person card's round buttons: 28px, the ink at 10%). */
.ds-button--card{width:calc(var(--sp-1) * 7);height:calc(var(--sp-1) * 7);background:color-mix(in srgb, var(--fg) 10%, transparent);list-style-type:none}

/* CARD (design system: card): a raised surface with the large corner; the lift is a hover state, and a person's or goal's card moves up a step. The source card is the quiet variant. */
.ds-card{box-sizing:border-box;padding:var(--sp-4);border-radius:var(--radius-lg);background:var(--card);color:var(--fg);box-shadow:var(--shadow);transition:transform .15s ease}
.ds-card--lift:hover{transform:translateY(calc(var(--sp-1) * -1))}
.ds-card--source{background:color-mix(in srgb, var(--fg) 3%, transparent);box-shadow:none;border-radius:calc(var(--radius-lg) - 2px)}
.ds-card--settings{padding:calc(var(--sp-1) * 5) calc(var(--sp-1) * 5.5);border-radius:calc(var(--radius-lg) + var(--sp-1))}
@media (prefers-reduced-motion: reduce){.ds-card{transition:none}.ds-card--lift:hover{transform:none}}
/* PERSON (the grid's person card: 288 high, the corner a step above the card's, clipping; the tie's direction tints its top). */
.ds-card--person{position:relative;display:flex;flex-direction:column;align-items:center;height:calc(var(--sp-1) * 72);border-radius:calc(var(--radius-lg) + var(--sp-1));overflow:hidden}
.ds-card--person[data-tint="rising"]{background:linear-gradient(180deg, color-mix(in srgb, var(--trend-rising) 18%, transparent) 0%, var(--card) 60%), var(--card)}
.ds-card--person[data-tint="steady"]{background:linear-gradient(180deg, color-mix(in srgb, var(--accent-2) 18%, transparent) 0%, var(--card) 60%), var(--card)}
.ds-card--person[data-tint="cooling"]{background:linear-gradient(180deg, color-mix(in srgb, var(--trend-cooling) 18%, transparent) 0%, var(--card) 60%), var(--card)}

/* CHIP (design system: chip / pill button): the filter pill, the tag chip and the action button, drawn from tokens only. Selected swaps ink and ground. Hover lifts the fill from 8% to 16% of the ink. */
.ds-chip{display:inline-flex;align-items:center;gap:var(--sp-2);box-sizing:border-box;height:calc(var(--sp-1) * 8);padding:0 calc(var(--sp-1) * 3);border:0;border-radius:999px;font:var(--weight-strong) var(--fs-sm)/var(--lh) var(--font);color:color-mix(in srgb, var(--fg) 63%, transparent);background:color-mix(in srgb, var(--fg) 8%, transparent);cursor:pointer;white-space:nowrap}
.ds-chip:hover{background:color-mix(in srgb, var(--fg) 16%, transparent);color:var(--fg)}
.ds-chip[aria-pressed="true"],.ds-chip.is-selected{background:var(--fg);color:var(--bg)}
.ds-chip--tag{height:calc(var(--sp-1) * 6);padding:0 var(--sp-3);font-weight:400;cursor:default;background:var(--hl);color:var(--accent-2)}
.ds-chip--tag:hover{background:var(--hl);color:var(--accent-2)}
.ds-chip--action{height:calc(var(--sp-1) * 8.5);padding:0 calc(var(--sp-1) * 3.5)}
.ds-chip--range{height:calc(var(--sp-1) * 7);padding:0 var(--sp-3);font-size:calc(var(--fs-sm) - 1px);line-height:calc(var(--fs) * var(--lh));color:var(--fg-soft)}
.ds-chip--range:hover{background:transparent;color:var(--fg-soft)}
.ds-chip--range.is-selected,.ds-chip--range[aria-pressed="true"]{background:var(--surface-light);color:var(--bg)}
/* TOOLBAR (People's filter, sort and Select pills: 42px), CTA (the one white call to action, 44px) and TAB (the view switch's Grid, List and Network: 34px, the one that is on is the light surface). */
.ds-chip--toolbar{line-height:calc(var(--fs) * var(--lh));height:calc(var(--sp-1) * 10.5);padding:0 var(--sp-4);gap:calc(var(--sp-1) * 1.5);background:color-mix(in srgb, var(--fg) 5%, transparent);color:var(--fg);cursor:pointer;list-style-type:none}
.ds-chip--toolbar:hover{background:color-mix(in srgb, var(--fg) 5%, transparent);color:var(--fg)}
.ds-chip--cta{line-height:calc(var(--fs) * var(--lh));height:calc(var(--sp-1) * 11);min-width:calc(var(--sp-1) * 36);padding:0 calc(var(--sp-1) * 5);justify-content:center;font-size:var(--fs);background:var(--surface-light);color:var(--bg);cursor:pointer;list-style-type:none}
.ds-chip--cta:hover{background:var(--surface-light);color:var(--bg)}
.ds-chip--tab{line-height:calc(var(--fs) * var(--lh));height:calc(var(--sp-1) * 8.5);padding:0 calc(var(--sp-1) * 3.5);gap:calc(var(--sp-1) * 1.5);justify-content:center;background:transparent;color:var(--fg-soft);text-decoration:none}
.ds-chip--tab:hover{background:transparent;color:var(--fg-soft)}
.ds-chip--tab[data-on]{background:var(--surface-light);color:var(--bg)}
.ds-chip--tab[data-on]:hover{background:var(--surface-light);color:var(--bg)}

/* HEADING (design system: section heading): the page title and card heading at the heading step, the hero at the largest, and the small caps label. */
.ds-heading{margin:0;font:var(--weight-strong) var(--fs-lg)/1.3334 var(--font);color:var(--fg)}
.ds-heading--hero{font-size:var(--fs-xl);line-height:1.0909;letter-spacing:-0.02em}
.ds-heading--label{font-size:calc(var(--fs-sm) - 1px);line-height:1.3333;letter-spacing:.08em;text-transform:uppercase;color:color-mix(in srgb, var(--fg) 63%, transparent)}

/* PANEL (design system: panel): the docked person panel's surface - the large corner, the panel's lift, and the room above the first line. */
.ds-panel{box-sizing:border-box;padding:calc(var(--sp-1) * 11) var(--sp-4) var(--sp-4);border-radius:calc(var(--radius-lg) + 2px);background:var(--raised);color:var(--fg);box-shadow:var(--shadow-lg)}
.ds-panel--docked{padding:calc(var(--sp-1) * 14) calc(var(--sp-1) * 6) calc(var(--sp-1) * 6)}

/* RAIL ITEM (design system: rail item): one place in the rail. Quiet by default, a fill of the ink at 6% under the pointer, 9% when it is where you are. */
.ds-rail-item{display:flex;align-items:center;gap:calc(var(--sp-1) * 3.5);box-sizing:border-box;height:calc(var(--sp-1) * 11);padding:0 var(--sp-3);border-radius:var(--radius);font:400 var(--fs)/var(--lh) var(--font);white-space:nowrap;text-decoration:none;color:color-mix(in srgb, var(--fg) 63%, transparent);background:transparent}
.ds-rail-item:hover{background:color-mix(in srgb, var(--fg) 6%, transparent);color:var(--fg)}
.ds-rail-item[aria-current="page"],.ds-rail-item.is-selected{background:color-mix(in srgb, var(--fg) 9%, transparent);color:var(--fg)}

/* RING (design system: ring / gauge): the track, the arc and the gap that separates a ring from what it sits on. The size is the one the prototype measures for a pulse ring (140); the goal ring is the small variant. */
.ds-ring{display:inline-block;width:calc(var(--sp-1) * 35);height:calc(var(--sp-1) * 35);color:var(--accent)}
.ds-ring--small{width:calc(var(--sp-1) * 28);height:calc(var(--sp-1) * 28)}
.ds-ring__track{fill:none;stroke:color-mix(in srgb, var(--fg) 9%, transparent)}
.ds-ring__arc{fill:none;stroke:currentColor;stroke-linecap:round}
.ds-ring__gap{fill:none;stroke:var(--inset)}

/* SEARCH BOX (design system: search box): the rail item that takes text; its field has no border of its own. */
.ds-search-box{display:flex;align-items:center;gap:calc(var(--sp-1) * 3.5);box-sizing:border-box;height:calc(var(--sp-1) * 11);padding:0 var(--sp-3);border-radius:var(--radius);background:color-mix(in srgb, var(--fg) 5%, transparent);color:color-mix(in srgb, var(--fg) 63%, transparent)}
.ds-search-box input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:color-mix(in srgb, var(--fg) 63%, transparent);font:400 var(--fs-sm)/var(--lh) var(--font)}

/* MORRIS'S "IS THIS THE SAME PERSON?" CARD (index.html:1993; conversions-people-follow-prototype): a card tinted with the accent and ringed by it, the question in 600, who and why, a white Merge pill beside a quiet Not the same. Colours are the tokens', never raw. */
.pn-duplicates{display:flex;flex-direction:column;gap:10px;padding:14px 16px;border-radius:16px;background:color-mix(in srgb,var(--accent) 8%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 28%,transparent);font-size:14px;line-height:20px;color:var(--fg)}
.pn-dup-q{font-weight:600}
.pn-dups{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.pn-dups li{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.pn-dups a{color:var(--fg);font-weight:600;text-decoration:none}
.pn-dup-why{color:var(--fg-soft);flex:1 1 220px}
.pn-dup-acts{display:flex;gap:8px}
.pn-dup-acts form{margin:0}

/* THE DUST BEHIND A SCREEN (James 3 Nov; Morris's tiny drifting dots over a screen's glow, components/backdrop.js dustOf): three drifts, and a twinkle on every sixth. The paths are starfield.css's (dd1-dd3); a dot that twinkles keeps its drift and adds the twinkle.
   NOT HIS DEFECTS: the layer takes no pointer and is clipped to its screen (.fr-glow in frame.css), and it stands still under the system's reduced motion (starfield.css) and under the product's own Reduce motion setting (below). */
@keyframes tw{0%,100%{opacity:1}50%{opacity:.25}}
.dd1.tw{animation:dr1 14s ease-in-out infinite,tw 5s ease-in-out infinite}
.dd2.tw{animation:dr2 18s ease-in-out infinite,tw 6s ease-in-out infinite}
.dd3.tw{animation:dr3 22s ease-in-out infinite,tw 7s ease-in-out infinite}
@media (prefers-reduced-motion: reduce){.dd1.tw,.dd2.tw,.dd3.tw{animation:none}}
html[data-reduce-motion="on"] .dd1,html[data-reduce-motion="on"] .dd2,html[data-reduce-motion="on"] .dd3,html[data-reduce-motion="on"] .dd1.tw,html[data-reduce-motion="on"] .dd2.tw,html[data-reduce-motion="on"] .dd3.tw{animation:none}

@keyframes t6fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.t6-fade{animation:t6fade .4s cubic-bezier(.2,.6,.2,1)}
/* REDUCED MOTION is the fade's own (styles-into-components-search): it was carried by Search's sheet. */
@media (prefers-reduced-motion: reduce){.t6-fade{animation:none}}
/* A CARD THAT LEAVES SLIDES LEFT AND FADES, AND A CHECK PRESSED TURNS GREEN (jeremy-nudge-done-loops; James, shots 76-78 of 4 Nov, the prototype's Done). The check's own inline colours are overridden: it is the design system's rising green (--trend-rising), the prototype's. */
.t6-leaving{transition:transform .32s cubic-bezier(.4,0,.2,1),opacity .32s cubic-bezier(.4,0,.2,1);transform:translateX(-32px);opacity:0;pointer-events:none}
.t6-checked button:disabled{opacity:1 !important}
.t6-checked fieldset[disabled]{opacity:1}
.t6-checked button{background:var(--trend-rising) !important;border-color:var(--trend-rising) !important;color:var(--bg) !important;transition:background .12s ease}
@media (prefers-reduced-motion: reduce){.t6-leaving{transition:none;transform:none}.t6-checked button{transition:none}}

/* THE FEEDBACK CARD, AS MORRIS DRAWS IT (shell-and-feedback-looks; components/../help.js): four icon tiles for the kinds, a box, the screen held inside the card, a Send pill. In the shared sheet because the card is docked by every screen that has the rail, and none of those carries the settings sheet. */
.fb-card{display:flex;flex-direction:column;gap:var(--sp-4);color:var(--fg)}
.fb-title{margin:0;font-size:calc(var(--fs) + 3px);line-height:calc(var(--fs) + 9px);font-weight:var(--weight-strong)}
.fb-form{margin:0}
.fb-fields{border:0;margin:0;padding:0;min-width:0;display:flex;flex-direction:column;gap:var(--sp-4)}
.fb-kinds{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-2)}
.fb-tile{--tone:var(--accent-2);position:relative;display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);padding:var(--sp-3) var(--sp-1);border-radius:calc(var(--sp-1) * 4);border:1px solid transparent;text-align:center;cursor:pointer;font-size:calc(var(--fs) - 2px);line-height:calc(var(--fs) + 1px)}
.fb-tile[data-kind-tile="broke"]{--tone:var(--danger)}
.fb-tile[data-kind-tile="idea"]{--tone:var(--fb-amber)}
.fb-tile[data-kind-tile="liked"]{--tone:var(--ok)}
.fb-tile input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.fb-tile:has(input:checked){border-color:color-mix(in srgb,var(--fg) 28%,transparent);background:color-mix(in srgb,var(--fg) 7%,transparent)}
.fb-tile:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.fb-ico{display:grid;place-items:center;width:calc(var(--sp-1) * 11);height:calc(var(--sp-1) * 11);border-radius:50%;color:var(--tone);background:color-mix(in srgb,var(--tone) 16%,transparent)}
.fb-ask{font-size:calc(var(--fs) - 2px);color:color-mix(in srgb,var(--fg) 63%,transparent)}
.fb-said{box-sizing:border-box;width:100%;min-height:calc(var(--sp-1) * 28);padding:var(--sp-3) calc(var(--sp-1) * 3.5);border-radius:calc(var(--sp-1) * 4);border:0;background:color-mix(in srgb,var(--fg) 5%,transparent);box-shadow:inset 0 0 0 1px var(--line);color:var(--fg);font:inherit;font-size:var(--fs);line-height:calc(var(--fs) + 7px);outline:0;resize:none}
.fb-said::placeholder{color:color-mix(in srgb,var(--fg) 45%,transparent)}
.fb-attach{display:flex;flex-direction:column;gap:calc(var(--sp-1) * 2.5);padding:calc(var(--sp-1) * 2.5);border-radius:calc(var(--sp-1) * 4);background:color-mix(in srgb,var(--fg) 3%,transparent);box-shadow:inset 0 0 0 1px var(--line-soft)}
.fb-shot{display:block;box-sizing:border-box;width:100%;max-height:calc(var(--sp-1) * 47.5);object-fit:contain;border-radius:calc(var(--sp-1) * 2.5);background:var(--bg);box-shadow:inset 0 0 0 1px var(--line)}
.fb-live{position:relative;box-sizing:border-box;width:100%;height:calc(var(--sp-1) * 47.5);overflow:hidden;border-radius:calc(var(--sp-1) * 2.5);background:var(--bg);box-shadow:inset 0 0 0 1px var(--line)}
.fb-live-in{position:absolute;top:0;left:50%;width:calc(var(--sp-1) * 360);height:calc(var(--sp-1) * 250);margin-left:calc(var(--sp-1) * -34.2);transform:scale(.19);transform-origin:0 0;pointer-events:none}
.fb-live-in>*{min-height:0;height:100%}
.fb-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2)}
.fb-p{flex:1;min-width:0;font-size:calc(var(--fs) - 2px);line-height:calc(var(--fs) + 3px);color:var(--fg-soft)}
.fb-btn{display:inline-flex;align-items:center;height:calc(var(--sp-1) * 8);padding:0 var(--sp-3);border:0;border-radius:999px;background:color-mix(in srgb,var(--fg) 7%,transparent);color:var(--fg-soft);font:inherit;font-size:calc(var(--fs) - 2px);cursor:pointer}
.fb-btn[hidden],.fb-p[hidden],.fb-shot[hidden],.fb-live[hidden]{display:none}
.fb-foot{display:flex;justify-content:flex-end}
.fb-send{height:calc(var(--sp-1) * 11);padding:0 calc(var(--sp-1) * 5.5);border:0;border-radius:999px;background:var(--surface-light);color:var(--bg);font:inherit;font-weight:var(--weight-strong);cursor:pointer}
.fb-send[disabled]{opacity:.5;cursor:default}
:root{--fb-amber:var(--m-54,#F3C77E)}
/* THE SENT STATE (conversions-settings-and-sign-in, set 4; the prototype's: a 56 px tick in a soft green disc, "Thank you." at 28/34, a line, and a Close pill) - read from the tokens, no raw colour */
.fb-sent{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:8px 0}
.fb-tick{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--hl);color:var(--teal, var(--accent-2));box-shadow:0 0 30px var(--hl)}.fb-tick svg{width:24px;height:24px}
.fb-thanks{margin:0;font-size:28px;line-height:34px;font-weight:600;letter-spacing:-0.01em}.fb-line{margin:0;color:var(--fg-soft)}
.fb-close{height:40px;padding:0 16px;border-radius:999px;border:0;background:var(--fill-2);color:var(--fg);font:inherit;font-size:13px;font-weight:600;cursor:pointer}

/* THE ROUND GLYPH OF A SETTINGS ROW (components/glyph.js). Moved from the Settings screen's sheet. */
.st-gico{width:32px;height:32px;flex:none;border-radius:10px;display:grid;place-items:center;background:rgba(var(--m-ink-rgb,255,255,255),0.07);color:var(--m-10,#EEF2F6)}
.st-gico-lg{width:40px;height:40px;border-radius:12px}

.t6-goal-chip { font-size: 12px; line-height: 16px; padding: 4px 10px; border-radius: 999px; font-weight: 600; color: var(--m-21,rgb(250, 221, 173)); background: rgba(var(--m-30-rgb,238,178,61),0.14); }
.t6-goal-chip-kind { color: var(--m-18,rgb(124, 196, 255)); background: rgba(0, 146, 233, 0.14); }

/* THE GOAL PANEL, ONE COMPONENT WITH ONE STYLESHEET (jr-goal-panel-one-component, James 3 Nov; Morris's dc-Panel "GOAL (active)", W01 of the 2 Nov walkthrough): the rules of goal-page.js's panel, in the shared sheet every page links, so the panel looks the same on Goals, on Today and wherever it is docked and no screen names it. Every colour is a token of the product (or a mix of one), as a component's colours are: held by studio/proofs/WT-goal-panel-as-morris.proof.mjs and JR-goal-flyout-styles-on-today.proof.mjs. */
.gp-panel{display:flex;flex-direction:column;gap:14px;max-width:none;position:relative}
/* THE GLOW OF ITS KIND across the top of the flyout (Morris's panel: radial-gradient(110% 35% at 0% 0%, kind 0.20 -> none), amber for Warm activation, blue for Relationship protection, violet for Intentional presence): drawn behind the panel's content, out to the flyout's edges (goal-flyout-header-gradient-subtype; James, batch 4, screenshots 67-68) */
.gp-panel::before{content:'';position:absolute;inset:-80px -24px auto -24px;height:340px;background:radial-gradient(110% 100% at 0% 0%,var(--glow) 0%,transparent 70%);pointer-events:none;z-index:0;border-radius:inherit}
.gp-panel>*{position:relative;z-index:1}
/* the eyebrow is not the ellipsis's anchor: the line above made it position:relative, which pulled .gp-more off the Close row (goal-panel-ellipsis-in-header); .gp-more anchors to the panel */
.gp-panel>.gp-eyebrow{position:static}
.gp-eyebrow{display:flex;align-items:center;gap:8px;min-height:40px}
.gp-goal{display:inline-flex;align-items:center;gap:6px;font-size:12px;line-height:16px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--kind)}
.gp-kind{font-size:12px;color:color-mix(in srgb,var(--fg-soft) 78%,var(--bg))}
.gp-fill{flex:1}
.gp-chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;line-height:16px;font-weight:600;padding:4px 10px;border-radius:999px;background:color-mix(in srgb,var(--fg) 7%,transparent);color:var(--fg-soft)}
.gp-chip-up{background:color-mix(in srgb,var(--teal) 12%,transparent);color:var(--ok)}
.gp-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* THE ELLIPSIS SITS ON THE ROW WITH THE X (flyout-ellipsis-aligned; James, alpha vs prototype batch 4, screenshots 54-55): it was in the eyebrow row, a row under the x and off its column (top 56, 24 from the right); it is on the Close's row (12px from the top) and left of the panel's buttons by the room they take, as the contact flyout's is. */
/* the panel is the anchor now (the glow needs it relative) and sits 56px below the flyout's top, so the Close row is 56px up: 12px from the flyout top, as the Close is */
.gp-more{position:absolute;top:-44px;right:var(--fx-panel-bar-w,38px);z-index:3}
.gp-more summary{list-style:none}.gp-more summary::-webkit-details-marker{display:none}
.gp-ibtn{width:40px;height:40px;border-radius:50%;background:color-mix(in srgb,var(--fg) 8%,transparent);color:var(--fg);display:grid;place-items:center;cursor:pointer;transition:background .15s ease}
.gp-ibtn:hover{background:color-mix(in srgb,var(--fg) 16%,transparent)}
.gp-menu{position:absolute;right:0;top:46px;z-index:20;width:260px;box-sizing:border-box;display:flex;flex-direction:column;align-items:stretch;gap:2px;padding:8px;margin:0;border-radius:18px;background:var(--raised);box-shadow:0 0 0 1px color-mix(in srgb,var(--fg) 10%,transparent),0 16px 40px color-mix(in srgb,black 50%,transparent)}
.gp-menu a,.gp-menu button,.gp-menu summary{width:100%;box-sizing:border-box;justify-content:flex-start;background:transparent}
.gp-menu a:hover,.gp-menu button:hover,.gp-menu summary:hover{background:color-mix(in srgb,var(--fg) 8%,transparent)}
.gp-menu details{width:100%}
.gp-head{display:flex;flex-direction:column;gap:2px}
.gp-name{margin:0;font-size:36px;line-height:42px;font-weight:600;letter-spacing:-0.02em}
.gp-statement{margin:0;font-size:14px;line-height:20px;color:var(--fg-soft)}
.gp-figure{display:flex;flex-direction:column;gap:8px}
.gp-number{display:flex;align-items:baseline;gap:8px}
.gp-big{font-size:44px;line-height:48px;font-weight:600;letter-spacing:-0.02em;color:var(--kind)}
.gp-unit{font-size:13px;color:color-mix(in srgb,var(--fg-soft) 78%,var(--bg))}
.gp-bar-track{height:8px;border-radius:999px;background:color-mix(in srgb,var(--fg) 7%,transparent);overflow:hidden}
.gp-bar-fill{height:8px;width:var(--w);border-radius:999px;background:var(--bar)}
.gp-doneline{display:flex;justify-content:space-between;gap:12px;font-size:12px;line-height:16px;color:color-mix(in srgb,var(--fg-soft) 78%,var(--bg))}
.gp-points{font-size:13px;line-height:18px;color:var(--ok)}
.gp-points-failed{color:var(--danger)}
.gp-history{font-size:13px;line-height:18px;color:var(--accent-2);align-self:flex-start}
.gp-actions{display:flex;flex-wrap:wrap;align-items:flex-start;gap:6px}
.gp-actions details{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.gp-actions a,.gp-actions button,.gp-actions summary{height:44px;padding:0 20px;border-radius:999px;background:var(--surface-light);color:var(--bg);font-weight:600;display:inline-flex;align-items:center;gap:8px;box-sizing:border-box;cursor:pointer}
.gp-actions a:hover,.gp-actions button:hover,.gp-actions summary:hover{background:color-mix(in srgb,var(--surface-light) 70%,white)}
/* THE ADD ACTION PILL IS THE PROTOTYPE'S (js-today-goal-panel-add-action-button; his .p2-act-main: 40px high, 0 11px, 6px to a 15px plus): the Save inside the opened form stays the 44px button it is. */
.gp-actions summary{list-style:none;height:40px;padding:0 11px;gap:6px}.gp-actions summary::-webkit-details-marker{display:none}
.gp-actions summary::before{content:"";width:15px;height:15px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/contain no-repeat}
/* THE TABS: underlined, with their counts (Morris's t.line is a 2px line under the chosen one); the radios choose, no script. */
.gp input{position:absolute;left:-9999px}
.gp-bar{display:flex;gap:4px;margin-top:8px;border-bottom:1px solid color-mix(in srgb,var(--fg) 7%,transparent)}
.gp-bar label{position:relative;height:40px;padding:0 12px;box-sizing:border-box;display:flex;align-items:center;gap:4px;font-size:13px;font-weight:600;color:color-mix(in srgb,var(--fg-soft) 78%,var(--bg));cursor:pointer;border-radius:0}
.gp-n{font-weight:400;color:color-mix(in srgb,var(--fg-soft) 62%,var(--bg))}
.gp-info{margin-left:6px;cursor:help;text-transform:none;letter-spacing:0;font-weight:400;color:color-mix(in srgb,var(--fg-soft) 62%,var(--bg))}
.gp-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);align-self:flex-start;margin-top:10px}
/* THE TAB THAT IS CHECKED IS SHOWN, and underlined: written out, one rule each. */
#gp-moved:checked ~ .gp-body .gp-tab-moved{display:flex !important}#gp-people:checked ~ .gp-body .gp-tab-people{display:flex !important}#gp-nudges:checked ~ .gp-body .gp-tab-nudges{display:flex !important}
#gp-moved:checked ~ .gp-bar label[for=gp-moved]{color:var(--fg);box-shadow:inset 0 -2px 0 var(--surface-light)}#gp-people:checked ~ .gp-bar label[for=gp-people]{color:var(--fg);box-shadow:inset 0 -2px 0 var(--surface-light)}#gp-nudges:checked ~ .gp-bar label[for=gp-nudges]{color:var(--fg);box-shadow:inset 0 -2px 0 var(--surface-light)}
.gp-tab{padding:18px 0 24px;gap:18px}
.gp-tab section{display:flex;flex-direction:column;gap:8px}
.gp-h{margin:0;font-size:13px;line-height:18px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;color:color-mix(in srgb,var(--fg-soft) 78%,var(--bg))}
.gp-rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.gp-row{display:flex;align-items:flex-start;gap:12px;padding:10px 12px;border-radius:16px;background:color-mix(in srgb,var(--fg) 3%,transparent);color:var(--fg);transition:background .15s ease}
.gp-row:hover{background:color-mix(in srgb,var(--fg) 7%,transparent)}
.gp-person,.gp-nudge{align-items:center}
.gp-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.gp-title{font-size:13px;line-height:18px;font-weight:600}.gp-title b{font-weight:600}
.gp-person .gp-title,.gp-nudge .gp-title{font-size:14px;line-height:20px}
.gp-with,.gp-quiet{font-weight:400;color:var(--fg-soft)}
.gp-sub{font-size:12px;line-height:16px;color:color-mix(in srgb,var(--fg-soft) 78%,var(--bg))}
.gp-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.gp-mark{width:32px;height:32px;flex:none;border-radius:50%;background:color-mix(in srgb,var(--teal) 16%,transparent);display:grid;place-items:center;color:var(--ok)}
.gp-face{width:40px;height:40px;flex:none;border-radius:50%;background:color-mix(in srgb,var(--accent) 22%,var(--bg));color:var(--fg);display:grid;place-items:center;font-size:14px;font-weight:600;box-shadow:0 0 0 2px var(--card),0 0 0 3.5px color-mix(in srgb,var(--fg) 22%,transparent)}
.gp-face::before{content:attr(data-face)}
.gp-none{margin:0;font-size:13px;line-height:18px;color:color-mix(in srgb,var(--fg-soft) 78%,var(--bg))}
.gp-nots{display:flex;flex-direction:column;gap:8px}

/* EDIT GOAL, in the flyout: drawn over what the flyout says, inside it (the :target of its opener), never over the page */
.gp-edit{display:none}.gp-edit:target{display:block;position:absolute;inset:0;z-index:30;overflow:auto;overscroll-behavior:contain;background:var(--raised);border-radius:inherit}
.gp-edit .gp-edit-in{padding:24px;width:auto;max-width:none;max-height:none;background:transparent;border-radius:0}
.gp-h-row{display:flex;align-items:baseline;gap:6px}.gp-h-row .gp-link{margin-left:auto;font-size:12px;font-weight:600;text-transform:none;letter-spacing:0}
.gp-aside{display:flex;align-items:center;gap:8px;flex:none}.gp-state{font-size:12px;line-height:16px;font-weight:600}

.gp-nudge{position:relative}.gp-nudge [data-nudge-cover]{position:absolute;inset:0;z-index:1;border-radius:inherit;cursor:pointer}

.ng-field{width:100%;box-sizing:border-box;height:52px;padding:0 16px;border-radius:14px;border:0;background:rgba(var(--m-ink-rgb,255,255,255),0.05);box-shadow:inset 0 0 0 1px rgba(var(--m-18-rgb,124,196,255),0.5);color:var(--m-10,#EEF2F6);font:inherit;font-size:18px;outline:0}
.ng-field:focus,.ng-field:focus-within{box-shadow:inset 0 0 0 1.5px #0092E9}

/* THE GOALS SCREENS' OWN RULES, lifted out of inline style (d-layout-design-system-first; James, overnight push): one class per distinct declaration set, named for its content (gs-<hash>), so a set
   that is the same everywhere is one rule. Shared by the Goals, goal and past-goals screens (control() is shared). Dynamic values (a kind's colour) stay out: they ride a custom property. */
.gs-2c9efbe8{display: flex; flex-direction: column; align-items: center; gap: 4px}
.gs-1a8c699d{display: flex; flex-wrap: wrap; gap: 24px}
.gs-0e83be3d{margin: 0; font-size: 18px; line-height: 24px; font-weight: 600}
.gs-11fca241{display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; border-radius: 16px; background: rgba(var(--m-ink-rgb,255,255,255),0.05)}
.gs-127e62fc{border: 0; margin: 0; padding: 16px 24px 20px; display: flex; flex-direction: column; gap: 12px}
.gs-14d68197{list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 12px; line-height: 16px; color: var(--m-14,#9AA6B4)}
.gs-163749d4{margin: 0; font-size: 13px; line-height: 18px; color: var(--m-14,#9AA6B4)}
.gs-164dba88{display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 999px; background: rgba(var(--m-ink-rgb,255,255,255),0.07); font-size: 13px}
.gs-192902f9{display: flex; flex-wrap: wrap; gap: 8px}
.gs-19705a85{margin: 0; display: flex; flex-direction: column; min-height: 0; flex: 1}
.gs-1e02d579{border: 0; margin: 0; padding: 0; display: inline-flex; flex-wrap: wrap; max-width: 100%; gap: 6px; align-items: center}
.gs-1f693f16{display: block; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis}
.gs-2185fd5a{font-size: 34px; line-height: 40px; font-weight: 600; letter-spacing: -0.02em}
.gs-21a1be8a{font-weight: 600}
.gs-2703cfdf{font-size: 12px; line-height: 16px; font-weight: 600; color: var(--ok)}
.gs-29b04799{flex: 1; font-size: 13px; color: var(--m-14,#9AA6B4)}
.gs-2a0ca835{margin: 0}
.gs-2bf69bb6{display: flex; flex-wrap: wrap; gap: 6px}
.gs-2c3d173a{margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px}
.gs-3820655b{display: flex; flex-wrap: wrap; align-items: center; gap: 16px}
.gs-3ab25864{padding: 6px 12px; border-radius: 999px; background: rgba(var(--m-ink-rgb,255,255,255),0.07); font-size: 13px}
.gs-3b3ed516{margin: 0 0 6px; font-size: 15px; line-height: 22px; font-weight: 600; color: var(--m-14,#9AA6B4)}
.gs-3bd58a3f{position: absolute; width: 0; height: 0; padding: 0; border: 0; opacity: 0; overflow: hidden}
.gs-403da348{flex: none; text-align: right; font-size: 12px; line-height: 16px}
.gs-420e35ae{display: flex; flex-direction: column; gap: 14px; max-width: 760px; padding: 22px; border-radius: 26px; background: linear-gradient(180deg, var(--m-7,#16223A) 0%, var(--m-6,#101A2C) 100%); box-shadow: 0 0 0 1px rgba(var(--m-ink-rgb,255,255,255),0.1)}
.gs-42173796{display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px}
.gs-459f5b67{display: flex; align-items: baseline; gap: 12px; flex: 1 1 320px}
.gs-47dffa19{display: inline; margin: 0}
.gs-4a0fea08{margin: 24px 0; font-size: 15px; color: var(--m-14,#9AA6B4)}
.gs-4b41f8cf{display: flex; flex-wrap: wrap; align-items: center; gap: 8px}
.gs-551db6c1{list-style: none; margin: 0; padding: 0}
.gs-5629dd8d{font-size: 14px; color: var(--m-37,#B6C1CD)}
.gs-57215d8f{display: flex; flex-direction: column; gap: 20px; max-width: 760px}
.gs-59ef674b{display: flex; align-items: baseline; gap: 10px; margin: 4px 0}
.gs-5b09de83{height: 42px; padding: 0 20px; border-radius: 999px; border: 0; background: var(--m-9,#F4F7FA); color: var(--bg); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer}
.gs-5b3c848b{margin: 0; font-size: 22px; line-height: 30px}
.gs-5bb4c9ca{width: 26px; height: 26px; flex: none; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok)}
.gs-5be72f40{display: inline-flex}
.gs-5cae008b{color: var(--m-37,#B6C1CD)}
.gs-5e0f3c35{display: flex; flex-direction: column; gap: 6px; max-width: 760px}
.gs-5f84ca12{font-size: 20px; line-height: 28px; font-weight: 600}
.gs-5f900eb8{margin: 8px 0; color: var(--m-14,#9AA6B4)}
.gs-62019705{display: block; font-size: 14px; font-weight: 600}
.gs-620e22a4{display: flex; flex-direction: column; gap: 8px}
.gs-62686bb5{height: 6px; width: 14px; border-radius: 999px; background: rgba(var(--m-ink-rgb,255,255,255),0.18)}
.gs-634a28be{flex: 1}
.gs-6356986a{display: flex; flex-direction: column; gap: 2px; padding: 10px 0; border-top: 1px solid var(--line-soft)}
.gs-6a0cb53a{font-weight: 600; color: var(--m-30,#EEB23D)}
.gs-6b832182{font-size: 12px; line-height: 16px; color: var(--m-30,#EEB23D); font-weight: 600}
.gs-706b7758{display: flex; justify-content: space-between; align-items: baseline}
.gs-7139651c{width: 560px; max-width: calc(100% - 48px); max-height: calc(100vh - 48px); box-sizing: border-box; border-radius: 26px; background: linear-gradient(180deg, var(--m-7,#16223A) 0%, var(--m-6,#101A2C) 100%); box-shadow: 0 0 0 1px var(--line), 0 40px 100px rgba(0,0,0,0.65); display: flex; flex-direction: column; overflow: hidden}
.gs-77a3bd62{height: 42px; padding: 0 16px; border-radius: 999px; background: rgba(var(--m-ink-rgb,255,255,255),0.08); color: var(--fg); font-size: 14px; font-weight: 600; display: inline-flex; align-items: center}
.gs-802be5d3{margin: 0 0 4px; font-size: 14px}
.gs-80cfc3b3{margin: 0; display: inline-flex; max-width: 100%}
.gs-8792cc31{margin: 0; overflow-y: auto}
.gs-884a76c7{font-size: 13px; color: var(--m-14,#9AA6B4)}
.gs-8a526037{color: var(--m-14,#9AA6B4); font-size: 13px}
.gs-8b4ab7f0{flex: 1; min-width: 0}
.gs-8ca88575{display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px}
.gs-8cbff44a{display: flex; align-items: center; gap: 14px; padding: 20px 24px 0}
.gs-8cdcd88b{margin-left: 6px}
.gs-8d2caf02{width: 560px; max-width: calc(100% - 48px); max-height: calc(100vh - 48px); box-sizing: border-box; border-radius: 26px; background: linear-gradient(180deg, var(--m-7,#16223A) 0%, var(--m-6,#101A2C) 100%); box-shadow: 0 0 0 1px var(--line), 0 40px 100px rgba(0,0,0,0.65); display: flex; flex-direction: column; overflow-y: auto}
.gs-90543b1c{display: flex; flex-direction: column; gap: 10px}
.gs-9424d423{display: flex; align-items: center; gap: 10px; list-style: none}
.gs-9519e419{width: 760px; max-width: calc(100% - 48px); max-height: calc(100vh - 48px); box-sizing: border-box; border-radius: 26px; background: linear-gradient(180deg, var(--m-7,#16223A) 0%, var(--m-6,#101A2C) 100%); box-shadow: 0 0 0 1px var(--line), 0 40px 100px rgba(0,0,0,0.65); display: flex; flex-direction: column; overflow: hidden}
.gs-956bde14{grid-column: span 4}
.gs-95dff2d3{display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 14px; background: var(--line-soft); font-size: 13px; line-height: 18px}
.gs-962b5bc2{display: flex; justify-content: space-between; align-items: center; gap: 8px}
.gs-974ab8bb{display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 8px; border-radius: 12px; color: var(--fg)}
.gs-978fe345{height: 42px; padding: 0 20px; border-radius: 999px; border: 0; background: rgba(var(--m-ink-rgb,255,255,255),0.08); color: var(--fg); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer}
.gs-9843ee46{font-size: 13px; line-height: 18px; color: var(--m-14,#9AA6B4)}
.gs-989f1414{color: var(--m-14,#9AA6B4)}
.gs-9b4128ce{display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; line-height: 16px; color: var(--m-14,#9AA6B4)}
.gs-9d7ac4bf{font-size: 14px; color: var(--m-25,#D1A8FF)}
.gs-9e79b66b{display: flex; align-items: center; gap: 6px}
.gs-9fbe65e8{display: none; flex-direction: column; gap: 14px; padding: 16px 0}
.gs-9fd05887{flex: 1; min-width: 0; font-size: 14px}
.gs-a4ea67e8{display: flex; justify-content: space-between; gap: 12px; font-size: 12px; line-height: 16px; color: var(--m-14,#9AA6B4)}
.gs-a5418807{font-size: 13px}
.gs-acee1212{display: flex; gap: 8px; align-items: center; margin-top: 12px}
.gs-b00169db{list-style: none; margin: 0; padding: 0; color: var(--m-37,#B6C1CD); font-size: 13px}
.gs-b05508f3{grid-column: span 8; grid-row: span 2}
.gs-b198df02{padding: 18px 20px; border-radius: 16px; background: rgba(255,90,90,0.1); box-shadow: inset 0 0 0 1px rgba(255,90,90,0.35)}
.gs-b2e09f4a{font-size: 18px; line-height: 24px; font-weight: 600}
.gs-b36eaf78{display: flex; flex-wrap: wrap; align-items: center; gap: 6px}
.gs-b9b7b537{display: flex; gap: 8px}
.gs-bd293c76{display: block}
.gs-bd8cb9ec{display: flex; align-items: baseline; gap: 8px; margin-top: 2px}
.gs-c5aa2d64{display: flex; flex-direction: column; gap: 4px; max-width: 720px}
.gs-c673fe88{color: var(--m-14,#9AA6B4); font-weight: 400}
.gs-c964ed42{font-size: 13px; font-weight: 600; color: var(--ok)}
.gs-cb4e1c4a{display: flex; align-items: center; gap: 10px; padding: 16px 24px 20px; border-top: 1px solid rgba(var(--m-ink-rgb,255,255,255),0.08)}
.gs-cd15ae88{margin: 0; font-size: 13px; color: var(--m-14,#9AA6B4)}
.gs-cf017302{font-size: 16px; font-weight: 600}
.gs-d08feb79{display: flex; flex-direction: column; gap: 6px}
.gs-d1956ddc{display: flex; gap: 10px}
.gs-d4bbccdb{height: 30px; padding: 0 12px; border-radius: 999px; border: 0; background: rgba(var(--m-ink-rgb,255,255,255),0.08); color: var(--fg); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer}
.gs-d7e6f1b5{margin: 0 0 6px; font-size: 14px}
.gs-d86700de{background: var(--m-9,#F4F7FA); color: var(--bg)}
.gs-d8c85d6b{display: flex; flex-direction: column; gap: 4px; padding: 12px 16px; border-radius: 14px; background: rgba(var(--m-30-rgb,238,178,61),0.08)}
.gs-d90cb1d7{font-size: 52px; line-height: 56px; font-weight: 600; letter-spacing: -0.02em; color: var(--m-21,#FADDAD)}
.gs-d938a7c6{cursor: grab; color: var(--m-14,#9AA6B4); display: inline-grid; place-items: center; width: 18px; height: 18px}
/* THE PLACEHOLDER WHILE A TILE IS MOVED (James 3 Nov): the tile left in its place is drawn at 30% - much lighter than the others - and fades in; the script marks it just after the browser has taken the ghost, so the ghost is whole. */
.fg-tile{transition: opacity .15s ease}
.fg-tile[data-dragging]{opacity: .3}
.gs-e1edd16b{font-size: 12px; color: var(--m-14,#9AA6B4)}
.gs-e666dbdf{border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; min-height: 0}
.gs-e66adf7c{display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0}
.gs-e684574c{display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-left: auto}
.gs-e79d2db2{flex: 1; min-height: 0; overflow-y: auto; padding: 4px 24px}
.gs-e84bd5a7{display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; color: var(--fg)}
.gs-e97fa0e4{display: flex; flex-direction: column; gap: 12px; padding: 18px 0; border-bottom: 1px solid var(--line-soft)}
.gs-e9d77f0f{display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 16px}
.gs-ea4d31ef{display: inline-flex; align-items: center; gap: 4px}
.gs-eca3f1ab{font-size: 12px; line-height: 16px; color: var(--m-14,#9AA6B4)}
.gs-ed5b003a{margin: 0; color: var(--m-14,#9AA6B4); font-size: 13px}
.gs-edccc283{display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: auto}
.gs-efdcb95f{height: 8px; border-radius: 999px; background: rgba(var(--m-ink-rgb,255,255,255),0.07); overflow: hidden}
.gs-f265ed37{display: flex; align-items: center; gap: 10px}
.gs-f5aaf8fd{flex: 1; font-size: 12px; color: var(--m-15,#7D8896)}
.gs-f5c1e623{display: flex; justify-content: space-between; align-items: baseline; gap: 10px}
.gs-f95a522c{display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--m-37,#B6C1CD)}
.gs-f9ac1815{grid-column: span 4; background: radial-gradient(90% 50% at 100% 0%, rgba(var(--m-29-rgb,0,249,207),0.12) 0%, rgba(var(--m-29-rgb,0,249,207),0) 60%), linear-gradient(180deg, var(--m-5,#0F1826) 0%, var(--m-3,#0B121E) 100%)}
.gs-fa479f03{display: block; font-size: 12px; line-height: 16px; color: var(--m-14,#9AA6B4)}
.gs-fb979963{display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; align-items: stretch}
.gs-fca134e1{width: 36px; height: 36px; border-radius: 50%; background: rgba(var(--m-ink-rgb,255,255,255),0.07); color: var(--fg); display: grid; place-items: center}
/* THE SCORES' GAUGES, as the prototype lays them (dc-Goals-5): two columns a hair apart, each a ring over its name; the band word is ours (the prototype has none) and sits under the name. */
.gs-gauges{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-1)}
.gs-gauge{display:flex;flex-direction:column;align-items:center;gap:var(--sp-1);padding:2px 0;border-radius:16px;color:var(--fg);text-align:center}
.gs-gauge-name{font-size:var(--fs-sm);line-height:18px}
.gs-gauge-band{font-size:var(--fs-sm);line-height:18px}
/* WHAT THE KIND OF A GOAL PAINTS (its colour, its bar, its ground and edge) rides a custom property on the element: the value is the goal's, the rule is the screen's. */
.gs-kind-big{font-size:34px;line-height:40px;font-weight:var(--weight-strong);letter-spacing:-0.02em;color:var(--kind)}
.gs-kind-label{display:inline-flex;align-items:center;gap:6px;font-size:12px;line-height:16px;color:var(--kind);font-weight:var(--weight-strong)}
.gs-bar-fill{height:8px;width:var(--w);border-radius:999px;background:var(--bar)}
.gs-always-on{font-size:11px;line-height:14px;font-weight:var(--weight-strong);padding:3px 9px;border-radius:999px;background:rgba(var(--m-25-rgb,209,168,255),0.14);color:var(--m-26,#E9D9FF)}
.gs-reorder-link{font-size:var(--fs-sm);line-height:22px;font-weight:600;color:var(--m-14,#9AA6B4);padding:4px 6px;margin-left:auto}
.gs-new-goal{height:44px;padding:0 20px;border-radius:999px;border:0;background:var(--m-9,#F4F7FA);color:var(--bg);font:inherit;font-weight:var(--weight-strong);display:inline-flex;align-items:center;gap:8px}
.gs-new-goal:disabled{opacity:.5}
.fg-tile{position:relative;display:flex;flex-direction:column;gap:10px;border-radius:var(--radius-lg);padding:18px;color:var(--fg);background:var(--ground);box-shadow:0 0 0 1px var(--edge);overflow:hidden}

/* THE PAST CARD'S LINK keeps its colour on hover, as the prototype's does (its All past goals is a plain button in the accent, not a link that lightens). */
.g5-past [data-past-link],.g5-past [data-past-link]:hover{color:var(--accent-2)}
/* AN INLINE COLOUR ON A LINK BEAT THE PAGE'S a:hover; a class does not, so the link keeps its colour on hover as it always did (the prototype's New goal stays dark). */
.gs-77a3bd62:hover{color:var(--fg)}
.gs-fca134e1:hover{color:var(--fg)}
.gs-new-goal:hover{color:var(--bg)}
/* A RING NEVER LEAVES ITS CELL (collapse-by-cause; spica's find: the Your scores card's two rings collided where the column is narrower than two rings): the shared gauge is a fixed width, so here it may shrink with the cell and stay round. */
.gs-gauge .pu-gauge{width:min(calc(var(--sp-1) * 35),100%);height:auto;aspect-ratio:1 / 1}
.gs-gauge .pu-gauge > svg{width:100%;height:100%}

/* THE NEW GOAL POP-UP, ONE STEP AT A TIME: the form keeps every step (so the form posts whole); only the current one shows. The dot of the current step is lit. */
[data-new-goal-form] .ng-step:not([data-current]){display:none}
.gs-dot-now{background:var(--accent-2)}
[data-sets-goal][hidden]{display:none}
.ng-note{font-size:var(--fs-sm);line-height:16px;color:color-mix(in srgb, var(--fg) 63%, transparent)}
.g5-open{color:inherit;text-decoration:none}.g5-open:hover{text-decoration:underline}
/* WHAT MORRIS'S CARD DOES NOT DRAW (goals-page-looks): the Open and More buttons, the likelihood and points, the stage counts, the quality line and the list of what Feather saw stay in the markup (the screen's specification reads them) and are not drawn; the goal's own page carries all of them. */
[data-off-card]{display:none !important}
/* In reorder mode the card draws its Move up and Move down beside the drag handle, for the person who cannot drag. */
.g5-moves{display:flex;gap:8px;flex-wrap:wrap}
/* THE CARD, AS MORRIS DRAWS IT (parity-final-goals): the number with its unit beside it, the bar, "N done" and the weeks left on one row, the quality line, and one foot - nudges, Add action, the faces at the right. */
.g5-numberline{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.g5-numberline [data-deadline-of]{font-size:13px;line-height:18px;color:var(--m-14,#9AA6B4);font-weight:400}
.g5-doneline{display:flex;justify-content:space-between;gap:12px;font-size:11px;line-height:16px;color:var(--m-14,#9AA6B4)}
[data-points-of]{display:block;font-size:11px;line-height:16px;color:var(--m-14,#9AA6B4)}
[data-points-of] b{color:var(--m-10,#EEF2F6);font-weight:600}
.g5-foot{display:flex;align-items:center;gap:8px;margin-top:auto;flex-wrap:nowrap}
.g5-foot [data-faces-of]{margin-left:auto}
.g5-pager{display:inline-flex;align-items:center;gap:2px;font-size:13px;color:var(--m-14,#9AA6B4)}
.g5-pager [data-page-of]{padding:0 6px}
.g5-arrow{width:30px;padding:0;justify-content:center}
.g5-arrow.off{opacity:.4;cursor:default}
/* A PAST ROW, AS MORRIS DRAWS IT: the result in bold over what it added, in his teal, at the right. */
.g5-past-right{flex:none;text-align:right;font-size:12px;line-height:16px;display:flex;flex-direction:column}
.g5-past-right b{font-weight:600}
.g5-past-added{color:var(--m-20,#7CF2DC);font-size:12px}
/* THE SCORES' RINGS AS MORRIS DRAWS THEM: 100 px with their number at 30 px (84 and 24 beside a panel, in goals.css), the name under each and no band line. */
.g5-scores .gs-gauge .pu-gauge{width:100px;height:100px;aspect-ratio:auto}
.g5-scores .gs-gauge .pu-gauge > svg{width:100px;height:100px}
.g5-scores .gs-gauge .pu-gauge-num{font-size:30px;line-height:32px}
/* PAST SHOWS THREE (Morris: his card lists three and then All past goals; two beside a panel, in goals.css). */
.g5-past > article:nth-of-type(n+4){display:none}
/* WHAT THE COMPACT VIEW NEEDS AT EVERY WIDTH: the unit wraps beside the number; the foot is one row at the card's bottom; a Past row cuts its name and date short with an ellipsis. */
.g5-numberline [data-deadline-of]{flex:1 1 90px;min-width:0}
.g5-foot{flex-wrap:nowrap}
.g5-past .fg-row .gs-1f693f16,.g5-past .fg-row .gs-fa479f03{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.g5-foot .g5-nudges,.g5-foot .fg-btn,.g5-foot .g5-open{white-space:nowrap;flex:none}
.g5-foot [data-faces-of]{min-width:56px;overflow:hidden}
/* THE CARD'S LINKS INTO ITS GOAL (crawl-controls-goals): the nudges chip and the faces are links; a Past row has a link over it, under its own controls. */
a.g5-nudges{text-decoration:none;color:inherit}
.g5-faces-link{display:contents}
.fg-row{position:relative}
.g5-row-open{position:absolute;inset:0;z-index:1;border-radius:12px;color:var(--m-10,#EEF2F6)}
.fg-row .fg-acts,.fg-row details,.fg-row form{position:relative;z-index:2}
/* A DARK NOTICE (conversions-goals-pulse-onboarding-a): the people a typed name may mean, on the product's card, with its line, as every other notice; it was white with a salmon edge on a dark app */
.fg-said{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin:0 0 16px;padding:12px 16px;border:1px solid var(--line);border-radius:16px;background:var(--card)}
.fg-said-text{margin:0;flex:1 1 100%}
.fg-said-way{margin:0}
/* THE ROW'S OPEN LINK covers the row and has nothing to lift: the row itself says it is a link */
.g5-row-open:hover{background:color-mix(in srgb, var(--fg) 5%, transparent)}
/* A REFUSAL IS ABOUT A FIELD (goal-action-modal-defects): the input the domain names (goals/action.js `field`) carries an amber ring and the instruction the domain gave (`fix`) sits above it, in amber, so the dialog says which one is wrong. Morris's dialog has no error text; nothing here changes what it draws when nothing is wrong. */
.ng-in .ng-field.ng-field[aria-invalid=true]{box-shadow:inset 0 0 0 1.5px var(--amber)}
.ng-in [data-wrong-field]{display:block;margin:2px 0 6px;font-size:13px;line-height:18px;font-weight:600;color:var(--amber)}
/* THE GOAL CONTROLS' PILL, IN THE COMPONENT'S OWN SHEET (jr-goal-flyout-styles-on-today): a goal's controls are drawn in it wherever the goal panel is docked - Today, People, Network, Search as well as Goals - so it is not the Goals screen's rule. Moved here from styles/screens/goals.css; its two fills are the ink token at 8% and 16% (the same to the eye as white at those alphas) so the raw colours of the components do not rise (a-colour-has-one-meaning). */
.fg-btn{height:34px;padding:0 14px;border-radius:999px;border:0;background:color-mix(in srgb,var(--fg) 8%,transparent);color:var(--fg);font:inherit;font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:6px;cursor:pointer;transition:background .2s ease;box-sizing:border-box}
.fg-btn:hover{background:color-mix(in srgb,var(--fg) 16%,transparent);color:var(--fg)}
/* THE EDIT GOAL DIALOG WEARS THE NEW GOAL POP-UP'S PIECES (edit-goal-dialog-and-columns-chooser-a): a label over each field in sentence case. */
.ed-label{font-size:13px;line-height:18px;font-weight:600;color:var(--fg)}

/* WHO COULD HELP, AS IDEA CARDS (conversions-today-and-nudges-e; Morris's NewGoalModal ideas, proto 2413-2428): three to a row, each centred - a 58px face, the name, the reason in one line - and a round + at its corner */
.gh-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:1fr;gap:10px}
.gh-card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:12px 8px;border-radius:16px;background:rgba(var(--m-ink-rgb,255,255,255),0.04);box-shadow:inset 0 0 0 1px rgba(var(--m-ink-rgb,255,255,255),0.07);min-width:0;text-align:center}
.gh-face{width:58px;height:58px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--m-7,#16223A);color:var(--m-38,#BFD6EE);font-weight:600;box-shadow:0 0 0 2px #121C2D,0 0 0 3.5px rgba(var(--m-ink-rgb,255,255,255),0.22)}
.gh-name{font-size:14px;line-height:18px;font-weight:600}
.gh-why{font-size:12px;line-height:15px;color:var(--m-14,#9AA6B4);max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gh-add{margin:0}
.gh-plus{position:absolute;top:8px;right:8px;width:28px;height:28px;border-radius:50%;border:0;background:rgba(0,146,233,0.25);color:var(--m-18,#7CC4FF);display:grid;place-items:center;cursor:pointer;padding:0}
.gh-plus[disabled]{opacity:.55;cursor:default}
@media (max-width:640px){.gh-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* THE EDIT GOAL DIALOG AT MORRIS'S SIZES (edit-goal-people-chips-a; index.html:2231-2262, Panel-7): the title 28/34, the date with the calendar at its right end, the people as chips in a field with "Add someone" after them. */
.ng-top .ed-title{font-size:28px;line-height:34px;font-weight:600;letter-spacing:-0.01em}
/* in the dialog over the page the foot stays in view and the fields scroll above it (in the flyout the whole panel scrolls, as it did) */
.ng-in > .gs-8792cc31{display:flex;flex-direction:column;min-height:0;overflow:hidden}
.ng-in > .gs-8792cc31 > .gs-127e62fc{flex:1 1 auto;min-height:0;overflow-y:auto}
.ng-in > .gs-8792cc31 > .ng-foot{flex:none}
.ed-date{position:relative;display:flex;align-items:center}
.ed-date input[type="date"]{padding-right:44px}
.ed-date svg{position:absolute;right:16px;pointer-events:none}
.ed-date input[type="date"]::-webkit-calendar-picker-indicator{position:absolute;right:0;top:0;width:48px;height:100%;opacity:0;cursor:pointer}
.ed-people.ng-field{display:flex;flex-wrap:wrap;align-items:center;gap:6px;height:auto;min-height:52px;padding:8px 10px}
.ed-chips{display:contents;list-style:none;margin:0;padding:0}
.ed-chip{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px 0 3px;border-radius:999px;background:color-mix(in srgb,var(--fg) 8%,transparent);font-size:13px;color:var(--fg)}
.ed-chip-x{display:inline-grid;place-items:center;border:0;background:transparent;color:var(--m-14,#9AA6B4);padding:0;cursor:pointer}
.ed-chip-x[hidden]{display:none}
.ed-initial{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--m-7,#16223A);color:var(--m-38,#BFD6EE);font-size:9px;font-weight:600;flex:none}
.ed-people:not(.ed-js) .ed-chips{display:none}
.ed-people .ed-people-in{flex:1 1 100%;min-width:0;height:36px;font-size:14px;box-shadow:none;background:transparent}
.ed-people.ed-js .ed-people-in{display:none}
.ed-add{flex:1 1 120px;min-width:0;border:0;background:transparent;color:var(--fg);font:inherit;font-size:13px;padding:0 6px;outline:0}
.ed-add[hidden]{display:none}


/* THE ADD-A-GOAL WIZARD, drawn as Morris draws it (dc-NewGoalModal): a sheet of five asked steps and a read-back, the kind's colour carried through, one footer (Back, the step's name, Next). Tokens only (d-new-sets-follow-canon): the kinds are --amber, --accent and --violet. */
.ng-tone-start{--kind:var(--accent-2)}
.ng-tone-amber{--kind:var(--amber)}
.ng-tone-accent{--kind:var(--accent)}
.ng-tone-violet{--kind:var(--violet)}
.ng-in.ng-sheet{position:relative;width:760px;max-width:calc(100% - 48px);height:660px;max-height:calc(100vh - 48px);box-sizing:border-box;border-radius:26px;display:flex;flex-direction:column;overflow:hidden}
.ng-in.ng-sheet:not(.ng-tone-start)::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(70% 40% at 100% 0%,color-mix(in srgb,var(--kind) 16%,transparent) 0%,transparent 70%)}
.ng-in.ng-sheet > *{position:relative}
.ng-in:not(.ng-tone-start) .ng-field{box-shadow:inset 0 0 0 1px var(--kind)}
.ng-in .ng-field:focus,.ng-in .ng-field:focus-within{box-shadow:inset 0 0 0 1.5px var(--accent)}
.ng-top{display:flex;align-items:center;gap:14px;padding:20px 24px 0}
.ng-title{margin:0;font-size:18px;line-height:24px;font-weight:600}
.ng-dots{display:flex;align-items:center;gap:6px}
.ng-dot{height:6px;width:6px;border-radius:999px;background:color-mix(in srgb,var(--fg) 18%,transparent);transition:width .3s ease}
.ng-dot.done,.ng-dot.now{background:var(--kind)}
.ng-dot.now{width:24px}
.ng-close{width:36px;height:36px;border-radius:50%;background:color-mix(in srgb,var(--fg) 7%,transparent);color:var(--fg);display:grid;place-items:center}
.ng-close:hover{color:var(--fg)}
.ng-summary{display:flex;flex-wrap:wrap;gap:6px;padding:14px 24px 0}
.ng-summary-chip{height:28px;padding:0 11px;border-radius:999px;display:inline-flex;align-items:center;font-size:12px;color:var(--fg);background:color-mix(in srgb,var(--kind) 16%,transparent);box-shadow:inset 0 0 0 1px var(--kind)}
.ng-summary-chip:hover{color:var(--fg)}
.ng-form{margin:0;display:flex;flex-direction:column;min-height:0;flex:1}
.ng-fieldset{border:0;margin:0;padding:0;display:flex;flex-direction:column;min-height:0;flex:1}
.ng-body{flex:1;min-height:0;overflow-y:auto;padding:22px 24px}
.ng-stepbox{display:flex;flex-direction:column;gap:16px}
.ng-sub{font-size:13px;line-height:18px;color:color-mix(in srgb,var(--fg) 63%,transparent)}
.ng-sub-body{font-size:14px;line-height:20px;color:var(--fg-soft)}
.ng-ask{display:flex;flex-direction:column;gap:10px}
.ng-narrow{max-width:260px}
.ng-datebox{position:relative;display:flex;align-items:center;gap:10px;color:color-mix(in srgb,var(--fg) 63%,transparent)}
.ng-cal{display:inline-flex;align-items:center;justify-content:center;border:0;background:transparent;color:inherit;padding:0;cursor:pointer}
.ng-native-date{position:absolute;right:0;bottom:0;width:1px;height:1px;opacity:0;pointer-events:none;border:0;padding:0}
.ng-bare{flex:1;min-width:0;border:0;background:transparent;color:var(--fg);font:inherit;font-size:18px;outline:0;height:auto}
/* STEP ONE: the kinds */
.ng-kinds{border:0;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.ng-kind{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:18px;border-radius:18px;min-height:250px;box-sizing:border-box;cursor:pointer;background:color-mix(in srgb,var(--fg) 4%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--fg) 7%,transparent);color:var(--fg)}
.ng-kind:hover{background:color-mix(in srgb,var(--fg) 9%,transparent)}
.ng-kind:has(.ng-pick:checked){background:color-mix(in srgb,var(--accent) 12%,transparent);box-shadow:inset 0 0 0 1.5px var(--accent-2)}
.ng-kind:has(.ng-pick:focus-visible){outline:2px solid var(--accent-2);outline-offset:2px}
.ng-pick{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.ng-kind-icon{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--kind) 16%,transparent);color:var(--kind)}
.ng-kind-name{font-size:16px;font-weight:600}
.ng-kind-words{font-size:13px;line-height:19px;color:var(--fg-soft)}
.ng-kind-note{margin-top:auto;font-size:12px;line-height:16px;color:var(--kind)}
/* CHIPS: the wins, the numbers, the dates, the ideas (his ng-chip) */
.ng-chips{display:flex;flex-wrap:wrap;gap:8px}
.ng-chip{height:36px;padding:0 14px 0 11px;border-radius:999px;display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;background:color-mix(in srgb,var(--fg) 6%,transparent);color:var(--fg)}
.ng-chip:hover{color:var(--fg);filter:brightness(1.15)}
.ng-chip.on{background:var(--kind,var(--accent-2));color:var(--bg)}
.ng-tone-start .ng-chip.on{background:var(--fg)}
.ng-chip-n{padding:0;width:36px;justify-content:center}
.ng-chip-date{padding:0 14px}
.ng-ideas{display:flex;flex-direction:column;gap:10px}
/* STEP FIVE: the people */
.ng-people{display:flex;flex-direction:column;gap:14px}
.ng-picked{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-height:40px}
.ng-person{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 6px 0 3px;border-radius:999px;font-size:13px;font-weight:600;background:color-mix(in srgb,var(--kind) 16%,transparent);box-shadow:inset 0 0 0 1px var(--kind)}
.ng-person-x{width:22px;height:22px;border-radius:50%;border:0;background:transparent;color:color-mix(in srgb,var(--fg) 63%,transparent);display:grid;place-items:center;cursor:pointer;padding:0}
.ng-count{font-size:12px;color:color-mix(in srgb,var(--fg) 50%,transparent)}
.ng-none{font-size:13px;color:color-mix(in srgb,var(--fg) 50%,transparent)}
.ng-search{position:relative}
.ng-search-box{display:flex;align-items:center;gap:10px;height:44px;color:color-mix(in srgb,var(--fg) 63%,transparent)}
.ng-search-box .ng-bare{font-size:15px;color:var(--fg)}
.ng-hits{list-style:none;margin:6px 0 0;padding:6px;position:absolute;left:0;right:0;z-index:5;border-radius:14px;background:color-mix(in srgb,var(--accent-2) 10%,var(--bg));box-shadow:var(--shadow-lg);display:flex;flex-direction:column}
.ng-hit{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;font-size:14px}
.ng-hit:hover,.ng-hit[aria-selected="true"]{background:color-mix(in srgb,var(--fg) 6%,transparent)}
.ng-hit-name{flex:1}
.ng-hit-add{border:0;background:transparent;color:var(--kind);font:inherit;font-size:12px;font-weight:600;cursor:pointer;padding:0 0 0 8px}
.ng-ideas-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.ng-idea{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:12px 8px;border-radius:16px;min-width:0;background:color-mix(in srgb,var(--fg) 4%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--fg) 7%,transparent)}
.ng-idea-name{font-size:14px;line-height:18px;font-weight:600}
.ng-idea-add{position:absolute;top:8px;right:8px;width:28px;height:28px;border-radius:50%;border:0;background:color-mix(in srgb,var(--kind) 16%,transparent);color:var(--kind);display:grid;place-items:center;cursor:pointer;padding:0}
.ng-sr{position:absolute;width:1px;height:1px;padding:0;border:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* THE FOOTER: Back, the step's name, Next */
.ng-foot{display:flex;align-items:center;gap:10px;padding:16px 24px 20px;border-top:1px solid color-mix(in srgb,var(--fg) 8%,transparent)}
.ng-foot-label{flex:1;font-size:12px;color:color-mix(in srgb,var(--fg) 50%,transparent)}
.ng-back,.ng-next{height:42px;border-radius:999px;border:0;font:inherit;font-size:14px;font-weight:600;display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.ng-back{padding:0 16px;background:color-mix(in srgb,var(--fg) 8%,transparent);color:var(--fg)}
.ng-next{padding:0 20px;background:var(--fg);color:var(--bg)}
.ng-next[hidden]{display:none}
.ng-next[disabled]{opacity:.4;cursor:not-allowed}
.ng-pill{height:30px;padding:0 12px;border-radius:999px;border:0;background:color-mix(in srgb,var(--fg) 8%,transparent);color:var(--fg);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
@media (max-width:820px){.ng-over{align-items:end}.ng-in.ng-sheet{width:100%;max-width:none;border-radius:26px 26px 0 0}}
.ng-stepbox[data-step="1"]{gap:18px}
.ng-stepbox[data-step="4"]{gap:20px}
.ng-stepbox[data-step="5"]{gap:14px}
/* THE READ-BACK: "Here is your goal." - the goal as a card, two columns */
.ng-card{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:22px;border-radius:22px;padding:22px 24px;flex:1;background:radial-gradient(90% 80% at 100% 0%,color-mix(in srgb,var(--kind) 16%,transparent) 0%,transparent 60%),linear-gradient(180deg,color-mix(in srgb,var(--bg) 94%,var(--accent-2)) 0%,var(--bg) 100%);box-shadow:0 0 0 1px color-mix(in srgb,var(--fg) 8%,transparent),var(--shadow-lg)}
.ng-card-main,.ng-card-side{display:flex;flex-direction:column;gap:14px;min-width:0}
.ng-card-side{gap:8px}
.ng-card-kind{display:inline-flex;align-items:center;gap:6px;font-size:12px;line-height:16px;color:color-mix(in srgb,var(--fg) 63%,transparent)}
.ng-card-ico{display:inline-flex;color:var(--kind)}
.ng-card-ico svg{width:15px;height:15px}
.ng-card-name{font-size:24px;line-height:30px;font-weight:600}
.ng-card-count{font-size:52px;line-height:56px;font-weight:600;letter-spacing:-0.02em;color:var(--kind)}
.ng-card-win{font-size:13px;line-height:18px;color:var(--fg-soft)}
.ng-card-bar{height:8px;border-radius:999px;margin-top:auto;background:color-mix(in srgb,var(--fg) 7%,transparent)}
.ng-card-foot{display:flex;justify-content:space-between;font-size:12px;line-height:16px;color:color-mix(in srgb,var(--fg) 63%,transparent)}
.ng-card-faces{display:flex;align-items:center;padding-left:12px}
.ng-stack-face{display:inline-flex;margin-left:-12px;border-radius:50%;box-shadow:0 0 0 3px var(--bg),0 0 0 4.5px color-mix(in srgb,var(--fg) 28%,transparent)}
.ng-card-more{margin-left:10px;font-size:15px;font-weight:600;color:var(--fg-soft)}
.ng-card-who{font-size:13px;line-height:18px;color:var(--fg-soft)}
.ng-card-note{margin-top:auto;font-size:13px;line-height:18px;color:color-mix(in srgb,var(--fg) 63%,transparent)}
.ng-card-refused{padding:14px 16px;border-radius:14px;background:color-mix(in srgb,var(--danger) 12%,transparent);color:var(--danger)}
.ng-stepbox[data-step="6"]{flex:1}
.ng-card-sentence{font-size:14px;line-height:20px;color:var(--fg-soft)}
/* ADD AN ACTION, AS MORRIS DRAWS IT (ss-add-action-panel): chips, the inline person match, Optional, a date, the app's round close */
.aa-sheet{width:600px;max-width:calc(100% - 48px);box-sizing:border-box;border-radius:26px;padding:26px 28px;background:linear-gradient(180deg,var(--fr-menu,var(--bg)) 0%,var(--bg) 100%);box-shadow:0 0 0 1px var(--line),0 40px 100px color-mix(in srgb,var(--inset,var(--bg)) 90%,transparent);display:flex;flex-direction:column;gap:20px;color:var(--fg);max-height:calc(100vh - 48px);overflow-y:auto}
.aa-head{display:flex;align-items:flex-start;gap:12px}
.aa-title{flex:1;min-width:0}
.aa-title h2{margin:0;font-size:24px;line-height:30px;font-weight:600}
.aa-title p{margin:4px 0 0;font-size:13px;line-height:18px;color:color-mix(in srgb,var(--fg) 63%,transparent)}
.aa-form,.aa-fields{margin:0;border:0;padding:0;min-width:0}
.aa-fields{display:flex;flex-direction:column;gap:20px}
.aa-q{display:flex;flex-direction:column;gap:8px;min-width:0}
.aa-ql{font-size:13px;font-weight:600}
.aa-opt{font-weight:400;color:color-mix(in srgb,var(--fg) 63%,transparent)}
.aa-in{height:44px;border-radius:14px;border:0;padding:0 14px;box-sizing:border-box;width:100%;font:inherit;color:var(--fg);background:color-mix(in srgb,var(--fg) 6%,transparent);box-shadow:inset 0 0 0 1px var(--line)}
.aa-in[aria-invalid="true"]{box-shadow:inset 0 0 0 1px var(--warn,var(--accent-2))}
.aa-chips{display:flex;flex-wrap:wrap;gap:8px}
.aa-chip{position:relative;cursor:pointer}
.aa-chip input{position:absolute;opacity:0;pointer-events:none}
.aa-chip span{display:inline-flex;align-items:center;height:40px;padding:0 16px;border-radius:999px;font-size:13px;font-weight:600;background:color-mix(in srgb,var(--fg) 8%,transparent);color:var(--fg)}
.aa-chip input:checked + span{background:var(--fg);color:var(--bg)}
.aa-chip input:focus-visible + span{outline:2px solid var(--accent-2);outline-offset:2px}
.aa-js:not(.aa-else-on) .aa-what{display:none}
.aa-pair{display:flex;flex-wrap:wrap;gap:16px}
.aa-pair > .aa-q{flex:1 1 220px}
.aa-match[hidden]{display:none}
.aa-match{display:flex;align-items:center;gap:12px;border-radius:16px;padding:12px 14px;background:color-mix(in srgb,var(--fg) 5%,transparent);box-shadow:inset 0 0 0 1px var(--line)}
.aa-face{width:40px;height:40px;flex:none;border-radius:50%;display:grid;place-items:center;font-weight:600;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:var(--bg)}
.aa-mwords{flex:1;min-width:0;display:flex;flex-direction:column}
.aa-mwhy{font-size:13px;line-height:18px;color:color-mix(in srgb,var(--fg) 63%,transparent)}
.aa-yes,.aa-else-link,.aa-cancel,.aa-see,.aa-add{display:inline-flex;align-items:center;justify-content:center;height:36px;padding:0 16px;border-radius:999px;border:0;font:inherit;font-size:13px;font-weight:600;cursor:pointer;text-decoration:none}
.aa-yes{background:var(--fg);color:var(--bg)}
.aa-else-link,.aa-cancel,.aa-see{background:color-mix(in srgb,var(--fg) 8%,transparent);color:var(--fg)}
.aa-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:12px;padding-top:16px;border-top:1px solid color-mix(in srgb,var(--fg) 8%,transparent)}
.aa-foot .aa-cancel,.aa-foot .aa-see,.aa-foot .aa-add{height:44px;padding:0 20px}
.aa-kind{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--fg-soft);margin-bottom:6px}.aa-kind svg{width:15px;height:15px}
.aa-counts{flex:1 1 100%;font-size:13px;color:var(--fg-soft)}.aa-counts b{color:var(--fg)}
.aa-add{background:var(--fg);color:var(--bg)}
.aa-fields [data-preview]{display:contents}
.aa-fields [data-preview] ul{list-style:none;margin:0;padding:0;font-size:13px;line-height:18px;color:color-mix(in srgb,var(--fg) 85%,transparent)}

/* THE GRAPH-SAYS CARD (styles-into-components-people): drawn by the component, so it looks the same wherever a person's panel is docked. Moved here from the Person screen's sheet unchanged. */
.pn-card{border-radius:16px;padding:12px 14px;background:rgba(var(--m-ink-rgb,255,255,255),0.04);box-shadow:inset 0 0 0 1px rgba(var(--m-ink-rgb,255,255,255),0.06)}

/* AN EDIT IN PLACE (components/in-place.js): its input. Moved from the Settings screen's sheet. */
.st-input{height:38px;padding:0 12px;border:0;border-radius:10px;background:rgba(var(--m-ink-rgb,255,255,255),0.05);box-shadow:inset 0 0 0 1px rgba(var(--m-ink-rgb,255,255,255),0.1);color:var(--m-10,#EEF2F6);font:inherit;font-size:15px;line-height:20px;outline:none;flex:1;min-width:0}
.st-tile .st-input{flex:1 1 160px;min-width:0}
.st-input:focus{box-shadow:inset 0 0 0 1px #0092E9}
.st-input{max-width:100%}
/* THE SETTINGS AND ACCOUNT LOOKS' OWN LAYOUT, from the tokens (d-layout-design-system-first): what settings.js, general.js, account.js and sources.js used to say inline. */
select.st-input{flex:none;width:auto}

/* A VALUE PILL STANDS AT THE TOP RIGHT OF ITS ROW (jt-settings-general-alignment-r; alpha-vs-prototype 49/50): "Included" and the held "How far back" sit level with the row's title, not in the middle of its two lines. */
.st-tile > [data-cleaning], .st-tile > [data-window]{align-self:flex-start}

/* THE INLINE SECTION (components/inline-section.js): a heading and its body, in the page's own flow. */
.fx-section{margin:0 0 var(--sp-3,12px)}
.fx-section-h{margin:0 0 8px;font-size:13px;font-weight:600;color:var(--fg-soft)}

.mn { position: relative; align-self: stretch; flex: 1 1 auto; min-height: 126px; max-height: 126px; margin: 4px 6px; }
.mn-spokes { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mn-spoke { stroke: rgba(var(--m-20-rgb,124,242,220),0.55); stroke-width: 1.2; }
.mn-glow { position: absolute; left: 50%; top: 52%; width: 150px; height: 150px; margin: -75px 0 0 -75px; border-radius: 50%; background: radial-gradient(circle, rgba(0, 146, 233, 0.35) 0%, rgba(0, 146, 233, 0) 70%); }
.mn-you { position: absolute; left: 50%; top: 52%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 146, 233, 0.28); color: var(--m-10,rgb(238, 242, 246)); font-size: 12px; font-weight: 600; box-shadow: 0 0 0 2px rgba(var(--m-18-rgb,124,196,255),0.5); }
.mn-node { position: absolute; width: 34px; height: 34px; margin: -17px 0 0 -17px; }
.mn-face { width: 100%; height: 100%; border-radius: 50%; box-shadow: 0 0 0 2px var(--m-0,rgb(3, 7, 14)), 0 0 0 3px var(--m-18,rgb(124, 196, 255)); overflow: hidden; display: grid; place-items: center; background: var(--m-7,rgb(22, 34, 58)); color: var(--m-38,rgb(191, 214, 238)); font-size: 11px; font-weight: 600; }
.mn-face img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* THE ONE MODAL (components/modal.js): Morris's shell - a dialog over a scrim, a card, and a 36 px round close at its top right. */
.fx-modal{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:24px}
.fx-modal-scrim{position:absolute;inset:0;background:color-mix(in srgb,var(--bg) 66%,transparent);backdrop-filter:blur(6px)}
.fx-modal-box{position:relative;width:min(640px,100%);max-height:calc(100vh - 48px);overflow:auto;border-radius:24px;padding:28px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line)}
.fx-modal-x{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:50%;background:color-mix(in srgb,var(--fg) 7%,transparent);color:var(--fg);display:grid;place-items:center;font-size:20px;line-height:1;text-decoration:none}

.ng-label{font-size:12px;line-height:16px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--m-14,#9AA6B4)}

/* THE NOT-YET CHIP, DRAWN ONCE (conversions-shared-pieces-b): the name of what is coming and Morris's quiet "Coming soon" tag (his .st-tag: 12px/600, 4/10 padding, 8% white). It was a 28 to 42px pill with a blue or dashed ring, its height set by each screen's own sheet; it is the same on every screen now, and no screen's sheet sizes it. */
.fx-ny{display:inline-flex;align-items:center;gap:8px;max-width:100%;white-space:normal;color:color-mix(in srgb,var(--fg) 55%,transparent);font-size:13px;line-height:18px;font-weight:600;cursor:default}
.fx-ny-tag{flex:none;font-size:12px;line-height:16px;font-weight:600;padding:4px 10px;border-radius:999px;background:color-mix(in srgb,var(--fg) 8%,transparent);color:var(--fg-soft)}

/* THE ONE NOTICE (components/notice.js): the red of .fr-said, as a component any screen can draw. */
.fx-notice{margin:0 0 var(--sp-3,12px);padding:12px 16px;border-radius:16px;background:color-mix(in srgb,var(--danger) 10%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--danger) 28%,transparent);color:color-mix(in srgb,var(--danger) 70%,var(--fg));font-size:13px;line-height:20px}
.fx-notice b{color:var(--danger);font-weight:600}
/* A NOTICE AMONG OTHER THINGS (a failure among filters, a line under a map): the same red, set in the line, with no margin of its own. */
.fx-notice[data-inline]{display:inline-block;margin:0;padding:4px 10px;border-radius:12px;font-size:13px;line-height:18px}

/* A NOTIFICATION, AS MORRIS'S TOAST IS (the prototype's #fxToast; notifications-match-prototype, James 4 Nov). A pill at the bottom centre, 28 px up, on the ground the tokens name, in the 14/20 600 face, above everything, ONE at a time; shown for four seconds and gone (the stylesheet takes it away: no script is needed), with an Undo where there is a way back. A refusal is the same pill and stays until it is dismissed. */
.ds-notification{position:fixed;left:50%;bottom:28px;transform:translate(-50%,0);z-index:300;display:flex;align-items:center;gap:16px;padding:10px 10px 10px 20px;border-radius:999px;background:var(--notification-ground);color:var(--notification-ink);font:600 14px/20px 'Pitagon Sans',Inter,-apple-system,system-ui,sans-serif;box-shadow:0 0 0 1px var(--notification-ring),0 20px 50px var(--notification-shadow);margin:0}
.ds-notification[hidden]{display:none}
.ds-notification[data-fades]{animation:ds-notification-life 4s ease forwards}
@keyframes ds-notification-life{0%{opacity:0;transform:translate(-50%,16px)}6%{opacity:1;transform:translate(-50%,0)}94%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,0);visibility:hidden}}
.ds-notification__text{min-width:0}
.ds-notification__text:has(.ds-notification__head){display:flex;flex-direction:column;gap:2px}
.ds-notification__icon{flex:none;color:var(--notification-alert)}
.ds-notification__head{font-weight:600}
.ds-notification__reason{font-weight:400;color:color-mix(in srgb,var(--notification-ink) 78%,transparent)}
.ds-notification--inline{position:static;transform:none;margin:var(--sp-2,8px) 0;z-index:auto;width:fit-content;max-width:100%;box-sizing:border-box}
.ds-notification__undo,.ds-notification__close{height:32px;padding:0 16px;border-radius:999px;border:0;background:var(--notification-action-fill);color:var(--notification-action);font:inherit;font-size:13px;cursor:pointer}
.ds-notification__close{width:32px;padding:0;display:grid;place-items:center}
.ds-notification__undo:hover,.ds-notification__close:hover{background:var(--notification-action-hover)}
/* A NOTICE'S DISMISS IS MORRIS'S TOAST CLOSE (create-goal-closes-on-success-a; James, 9 Nov: the confirmation's dismiss drew as a lone tiny "x" chip UNDER the text). The older notice spelling (experience/realization/html.js `notice`) puts its dismiss control inside the words' span as a text button; it is drawn here as the banner's close is: the words and the close in one row, the close an icon in a 32 px round button at the end, the glyph the same two strokes. */
.ds-notification__text:has(> .ds-notification__close){display:flex;align-items:center;gap:16px}
.ds-notification__text > .ds-notification__close{flex:none;margin-left:auto;font-size:0;line-height:0;display:grid;place-items:center}
.ds-notification__text > .ds-notification__close::before{content:"";width:16px;height:16px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center/contain no-repeat}
.ds-notification form{margin:0}
@media (prefers-reduced-motion: reduce){.ds-notification[data-fades]{animation:ds-notification-still 4s linear forwards}@keyframes ds-notification-still{0%,99%{opacity:1}100%{opacity:0;visibility:hidden}}}

.np-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; line-height: 16px; font-weight: 600; padding: 4px 10px; border-radius: 999px; }
.np-chip-up { color: var(--m-20,rgb(124, 242, 220)); background: rgba(44, 196, 177, 0.14); }
.np-chip-net { color: var(--m-18,rgb(124, 196, 255)); background: rgba(0, 146, 233, 0.14); }
.np-chip-none { color: var(--m-14,rgb(154, 166, 180)); background: rgba(var(--m-ink-rgb,255,255,255), 0.06); }

/* THE NUDGE PANEL (components/nudge-panel.js): the rules of its icon buttons and its three tabs, here with the component, so it looks the same on whichever screen opens it (they were Today's own sheet's). */
.t6-ib{transition:background-color .15s ease}
.t6-ib:hover{background:rgba(var(--m-ink-rgb,255,255,255),0.16)}
@media (prefers-reduced-motion: reduce){.t6-ib{transition:none}}
/* THE OPENED NUDGE'S THREE TABS (parity-gap-04): the radio decides which one is open, as the person card's do */
.nt-tabs input{position:absolute;left:-9999px}
.nt-tabbar{display:flex;gap:4px;border-bottom:1px solid rgba(var(--m-ink-rgb,255,255,255),0.07);flex-wrap:wrap}
.nt-tabbar label{height:40px;padding:0 12px;display:inline-flex;align-items:center;gap:4px;box-sizing:border-box;color:var(--m-14,#9AA6B4);font-size:13px;font-weight:600;cursor:pointer}
.nt-n{font-weight:400;color:var(--m-15,#7D8896)}
.nt-tab{display:none;padding:18px 0;flex-direction:column;gap:12px}
#nt-who:checked ~ .nt-body .nt-tab-who,#nt-why:checked ~ .nt-body .nt-tab-why,#nt-draft:checked ~ .nt-body .nt-tab-draft{display:flex}
#nt-who:checked ~ .nt-tabbar label[for=nt-who],#nt-why:checked ~ .nt-tabbar label[for=nt-why],#nt-draft:checked ~ .nt-tabbar label[for=nt-draft]{color:var(--m-10,#EEF2F6);box-shadow:inset 0 -2px 0 #0092E9}
#nt-who:focus-visible ~ .nt-tabbar label[for=nt-who],#nt-why:focus-visible ~ .nt-tabbar label[for=nt-why],#nt-draft:focus-visible ~ .nt-tabbar label[for=nt-draft]{outline:2px solid var(--m-48,#7DB8F0)}
/* A ROW OF WORDS in the panel's More menu (nudge-flyout-ellipsis-menu): the prototype's row hover */
.t6-menu-row{transition:background-color .15s ease}
.t6-menu-row:hover,details[open]>summary.t6-menu-row{background:rgba(var(--m-ink-rgb,255,255,255),0.08)!important}
.t6-menu-row::-webkit-details-marker{display:none}

/* "WHY THIS PERSON" IS A ROW FOR EACH REASON (nudge-flyout-subsections-and-snooze-g, set 2; the prototype's): a soft rounded bar with a dot, the words at the left and the source muted at the far end. Read from the tokens. */
.nt-reasons{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:13px;line-height:20px}
.nt-reason{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;border-radius:14px;background:var(--line-soft);color:var(--fg)}
.nt-reason-text{flex:1;min-width:0;display:flex;align-items:center;gap:10px}.nt-reason-text::before{content:"";flex:none;width:5px;height:5px;border-radius:50%;background:var(--sidebar-fg)}
.nt-reason-src{flex:none;color:var(--sidebar-fg);font-size:12px}.nt-reason-src a{color:inherit}

.oe-num{width:26px;height:26px;flex:none;border-radius:50%;background:#0092E9;color:#fff;display:grid;place-items:center;font-size:12px;font-weight:600}

/* A panel docked beside a screen (components/panel.js): at the right, about 480 wide, the full height of the window; the screen beside it narrows and keeps to what fits. */
/* IT STAYS FIXED WHILE THE PAGE SCROLLS BEHIND IT (flyout-stays-fixed-on-scroll; James, 4 Nov: "The flyout panel is supposed to stay fixed when scrolling"; Morris's prototype): sticky at the top of its row, as the rail beside it is, so the page scrolls and the panel does not, and its own content scrolls inside it (it was relative: a page scrolled 300px carried it 300px up; its top is its own margin, 12px, so it rests where it sticks and does not slide). */
.fx-panel { position: sticky; top: 12px; align-self: flex-start; flex: 0 0 480px; width: 480px; max-width: 100%; box-sizing: border-box; margin: 12px 12px 12px 4px; min-height: calc(100vh - 24px); max-height: calc(100vh - 24px); overflow-y: auto; overscroll-behavior: contain; }
.fx-panel[hidden] { display: none; }
.fx-panel-x { position: absolute; top: 12px; right: 16px; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 0; text-decoration: none; }
main[data-docked] { flex-basis: 480px; }
[data-panel-open] { outline: 2px solid var(--accent); outline-offset: 2px; }
/* A LINK THAT OPENS A PERSON (their face, their name) WEARS NO OUTLINE FROM BEING CLICKED (review-ui-batch, James and Jeremy, Alpha Review 29 Oct: "Remove Avatar Border"): the mark above stays for every other opener, and keyboard focus keeps its own ring. */
[data-panel-open][data-control="open-a-contact"] { outline: none; }
/* THE PERSON OPEN IN A LIST IS NOT RINGED (people-list-row-one-click; James 5 Nov: "the little avatar on list has what looks like a default border on focus or selection ... that it should not have"): the face and the name of an open row are links like the rest of the row; the prototype draws no ring there */
[data-panel-open][data-face-link], tr[data-person] [data-panel-open] { outline: none; }
@media (max-width: 640px) { .fx-panel { flex-basis: 100%; width: 100%; margin: 0; border-radius: 0; max-height: none; } }
/* EXPANDED (parity-person-panel-b, B-person-panel-controls): the bar carries expand and close; an expanded panel is wider. Only the frame's script sets it. wt-remove-flyout-minimize: the collapse button, the strip it became and their styles are gone. */
.fx-panel-bar { position: absolute; top: 12px; right: 16px; display: inline-flex; gap: calc(var(--sp-1) * 1.5); }
.fx-panel-bar .fx-panel-b { width: calc(var(--sp-1) * 10); height: calc(var(--sp-1) * 10); padding: 0; border-radius: 50%; display: grid; place-items: center; }
.fx-panel-bar .fx-panel-b svg { width: 17px; height: 17px; }
.fx-panel-b[aria-pressed="true"] { background: color-mix(in srgb, var(--accent) 35%, transparent); }
.fx-panel[data-expanded] { flex-basis: 720px; width: 720px; }
main[data-docked][data-wide] { flex-basis: 360px; }
/* IT SLIDES IN AS THE PROTOTYPE'S DOES (its p2in: 0.45s, 24px from the right); not where motion is reduced. */
@keyframes fx-panel-in { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
.fx-panel:not([data-modal]) { animation: fx-panel-in 0.45s cubic-bezier(0.2, 0.6, 0.2, 1); }
@media (prefers-reduced-motion: reduce) { .fx-panel { animation: none; } }
/* THE RESIZE HANDLE (parity-person-panel-rest, B-person-panel-controls): a strip down the panel's left edge, added by the frame's script; none on a narrow screen, where the panel is the full width. */
.fx-panel-grip { position: absolute; top: 0; bottom: 0; left: 0; width: 10px; cursor: col-resize; touch-action: none; border-radius: calc(var(--radius-lg) + 2px) 0 0 calc(var(--radius-lg) + 2px); }
.fx-panel-grip:hover, .fx-panel-grip:focus-visible { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 55%, transparent) 0, color-mix(in srgb, var(--accent) 55%, transparent) 2px, transparent 2px); outline: none; }
@media (max-width: 900px) { .fx-panel-grip { display: none; } }
/* A POP-UP (parity-today-history, today-history-1): a panel that asks to be one (data-panel-modal) is centred over a dimmed screen, about 760 by 645, and the screen beside it is not narrowed. */
[data-panel-backdrop] { position: fixed; inset: 0; z-index: 40; background: color-mix(in srgb, var(--inset) 62%, transparent); }
.fx-panel[data-modal] { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 41; flex: none; width: min(760px, calc(100vw - 48px)); max-width: calc(100vw - 48px); min-height: 0; max-height: 645px; margin: 0; }
/* NO PHONE LAYOUT FOR A POP-UP (James, 29 Oct: the prototype keeps a minimum width and the page scrolls; mobile is not in scope): it keeps its size at half a screen. */
/* SEND FEEDBACK IS A CARD BESIDE ITS BUTTON, as Morris draws it (his ff-pop): 420 wide, at the rail's edge, rising from the bottom, over a screen dimmed a little (shot 04 of 28 Oct: his backdrop is 45%); a press elsewhere or Escape shuts it. Only its close is kept of the bar. */
[data-panel-backdrop="feedback"] { background: color-mix(in srgb, var(--inset) 45%, transparent); }
.fx-panel[data-modal="feedback"] { top: auto; left: calc(var(--sp-1) * 23); bottom: calc(var(--sp-1) * 21); transform: none; width: calc(var(--sp-1) * 105); max-width: calc(100vw - var(--sp-1) * 25); max-height: calc(100vh - var(--sp-1) * 25); padding: calc(var(--sp-1) * 5.5); border-radius: calc(var(--radius-lg) + var(--sp-1)); background: linear-gradient(180deg, var(--fr-menu) 0%, color-mix(in srgb, var(--fr-menu) 85%, var(--inset)) 100%); }
/* MORRIS'S CLOSE (sizing-03): a 32px round button holding a 14px cross, on the row of the title - the card's 22px padding, less the 4px a 32px button is taller than the title's 24px line, down and in from the corner */
.fx-panel[data-modal="feedback"] .fx-panel-bar { top: calc(var(--sp-1) * 4.5); right: calc(var(--sp-1) * 5.5); }
.fx-panel[data-modal="feedback"] [data-panel-shut] { width: calc(var(--sp-1) * 8); height: calc(var(--sp-1) * 8); padding: 0; border-radius: 50%; border: 0; display: grid; place-items: center; background: color-mix(in srgb, var(--fg) 7%, transparent); color: var(--fg); cursor: pointer; }
.fx-panel[data-modal="feedback"] [data-panel-shut] svg { width: calc(var(--sp-1) * 3.5); height: calc(var(--sp-1) * 3.5); }
.fx-panel[data-modal="feedback"] [data-panel-expand], .fx-panel[data-modal="feedback"] .fx-panel-grip { display: none; }
@media (max-width: 640px) { .fx-panel[data-modal="feedback"] { left: 0; bottom: 0; width: 100%; max-width: 100%; border-radius: 0; } }
/* A PANEL OPENS AT ONCE (feel-panel-pending-transitions): while the panel is read the slot shows a sized placeholder (components/panel.js skeleton()); it settles at the panel's own size, so nothing jumps. */
.fx-panel[aria-busy="true"] { min-height: calc(100vh - 24px); }
.fx-panel[data-modal][aria-busy="true"] { min-height: 420px; }
.fx-panel[aria-busy="true"] .fx-panel-skel-x { position: absolute; top: 12px; right: 16px; width: calc(var(--sp-1) * 10); height: calc(var(--sp-1) * 10); padding: 0; border-radius: 50%; display: grid; place-items: center; z-index: 2; }
.fx-panel-skel { display: flex; flex-direction: column; gap: 14px; padding: 28px 24px; }
.fx-panel-skel > i { display: block; height: 16px; border-radius: 8px; background: var(--fill-2); animation: fx-skel-pulse 1.1s ease-in-out infinite alternate; }
.fx-panel-skel > i:nth-child(1) { width: 48%; height: 22px; }
.fx-panel-skel > i:nth-child(2) { width: 90%; }
.fx-panel-skel > i:nth-child(3) { width: 74%; }
.fx-panel-skel > i:nth-child(4) { width: 82%; height: 96px; border-radius: 14px; }
@keyframes fx-skel-pulse { from { opacity: 0.45; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .fx-panel-skel > i { animation: none; } }
/* A POP-UP IS CLOSED, NOT EXPANDED (today-scorecard-b): his History drawer has no Expand; the button stays in the page for a docked panel. */
.fx-panel[data-modal] [data-panel-expand] { display: none; }
/* NO EXPAND ON A DOCKED PANEL (network-scorecard-b): his person, nudge and goal panels carry More and Close and no Expand; the button and its script stay in the page. */
.fx-panel [data-panel-expand] { display: none; }

/* THE WIDTH OF THE PANEL'S OWN BAR (the Close link alone, or the script's Expand and Close and the gaps), so a panel can leave room for it in its own top row. */
.fx-panel { --fx-panel-bar-w: 36px; }
.fx-panel:has(.fx-panel-bar) { --fx-panel-bar-w: calc(var(--sp-1) * 9.5); }
/* A DIALOG OPENED FROM THE FLYOUT (Add action, Edit goal: CSS :target, drawn inside the panel) is over the page, not under what the page draws above the panel: the panel that holds the one open is raised while it is */
.fx-panel:has(.ng-over:target) { z-index: 100; }

/* A CARD THAT ARRIVES AS A PART IS ONE PLACE, NOT A BOX (perf-contact-split-by-context): the wrappers that let the part script swap a card whole take no room of their own */
.pn-contents{display:contents}

.fp-card{transition:transform .2s cubic-bezier(.2,.6,.2,1),box-shadow .2s ease;box-shadow:0 0 0 1px rgba(var(--m-ink-rgb,255,255,255),0.05),0 18px 40px rgba(0,0,0,0.4)}
.fp-card:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 0 0 1px rgba(var(--m-ink-rgb,255,255,255),0.12),0 28px 60px rgba(0,0,0,0.55)}
.fp-card .fp-acts{opacity:0;transition:opacity .2s ease;position:relative;z-index:2}
.fp-card:hover .fp-acts,.fp-card:focus-within .fp-acts{opacity:1}
@keyframes fpfade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.fp-fade{animation:fpfade .35s cubic-bezier(.2,.6,.2,1)}
/* REDUCED MOTION is the card's own (styles-into-components-search): it was carried by Search's sheet. */
@media (prefers-reduced-motion: reduce){.fp-card{transition:none}.fp-fade{animation:none}}
/* A FAVOURITE IS ONE STAR, IN THE STAR BUTTON'S PLACE (people-grid-star-aligned; James, batch 5, screenshots 72-73): at rest the card shows its star button alone (not the email button), without its circle; hovered, the row and the circle come, and the star has not moved. The star is the prototype's gold. */
.fp-card[data-favorite] .fp-acts{opacity:1}
.fp-card[data-favorite]:not(:hover):not(:focus-within) .fp-acts>*:not(form){opacity:0;pointer-events:none}
.fp-card[data-favorite]:not(:hover):not(:focus-within) .fp-star{background:transparent;box-shadow:none}
.fp-star[aria-pressed="true"]{color:var(--m-21,#FADDAD)}

.fx-pill{height:42px;padding:0 16px;border-radius:999px;background:rgba(var(--m-ink-rgb,255,255,255),0.05);color:var(--m-10,#EEF2F6);font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:8px;box-sizing:border-box;border:0;cursor:pointer;list-style:none}
.fx-dot{width:8px;height:8px;border-radius:50%;background:#0092E9;display:inline-block}
.fx-drop{position:relative}
.fx-drop>summary{list-style:none}
.fx-drop[open]>.fx-menu{position:absolute;right:0;top:48px;z-index:20;min-width:200px;display:flex;flex-direction:column;align-items:stretch;gap:6px;padding:10px;border-radius:16px;background:var(--m-3,#0B121E);box-shadow:0 0 0 1px rgba(var(--m-ink-rgb,255,255,255),0.08),0 24px 60px rgba(0,0,0,0.55)}
.fx-add-pill{height:44px;min-width:144px;padding:0 20px;border-radius:999px;background:#FFFFFF;color:var(--m-1,#060B14);font-size:15px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;cursor:pointer;list-style:none}

/* THE PLAN CARD (components/plan-card.js): the plan's name (its beta tag is in settings-card.css beside .st-tag, which it modifies). Moved from the Settings screen's sheet. */
.st-plan-name{font-size:36px;line-height:40px;font-weight:600;letter-spacing:-0.02em}

/* THE PRESSED BUTTON AND ITS EDIT FORM'S BOX (styles-into-components-people): moved here from the Person screen's sheet unchanged. The rules that name a pill or an edit INSIDE the person's own parts (.pn-addtag[open]>.pn-edit, .pn-more-item .pn-edit) stay in that sheet: they are the person screen's. */
/* THE CARD'S BUTTONS AND BOXES, by class (person-card-contents; Morris's p2-soft pill and p2-field box). A press is a soft pill; a box to type in is a field; a menu that opens under its pill holds what the capability offers. */
.pn-edit{margin:0}
.pn-pill{display:inline-flex;align-items:center;gap:var(--sp-2);box-sizing:border-box;height:calc(var(--sp-1) * 9);padding:0 calc(var(--sp-1) * 4);border:0;border-radius:999px;font:inherit;font-size:var(--fs-sm);font-weight:600;color:var(--fg);background:color-mix(in srgb, var(--fg) 8%, transparent);cursor:pointer;list-style:none}
.pn-pill:hover{background:color-mix(in srgb, var(--fg) 16%, transparent)}
.pn-pill::-webkit-details-marker{display:none}
/* HOVER (EXP-24: everything clickable has one): the pill lightens. */
.pn-pill:hover{filter:brightness(1.25)}
.pn-pill--main{background:var(--surface-light);color:var(--bg)}

.fx-preview,.fx-preview-on{border:1px dashed rgba(var(--m-30-rgb,238,178,61),0.65);background:rgba(var(--m-30-rgb,238,178,61),0.07);border-radius:14px}
.fx-preview{display:inline-flex;flex-direction:column;align-items:center;gap:4px;padding:6px 10px 8px}
.fx-preview-on{position:relative}
.fx-preview-on>.fx-preview-tag{position:absolute;top:8px;right:12px}
.fx-preview-tag{font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;line-height:14px;color:var(--m-30,#EEB23D)}

/* THE RAIL OPENS ON HOVER AND FOR A KEYBOARD, NOT FOR A MOUSE PRESS (shot 15 of 28 Oct: Morris's rail stays the strip after a click): :focus-visible is what a key or a text box has, a press on a link is not. */
/* THE RAIL HOLDS THE WINDOW'S HEIGHT, however long the page is: it sticks to the top and is as tall as the window, so the places at the foot of the rail stay at the bottom of what is seen. */
.fr{position:sticky;top:0;align-self:flex-start;height:100vh;flex:0 0 76px;z-index:30}
.fr-in{position:absolute;top:0;left:0;bottom:0;width:76px;box-sizing:border-box;padding:22px 16px;display:flex;flex-direction:column;gap:6px;background:var(--bg);border-right:1px solid var(--line-soft);overflow:hidden;transition:width .25s cubic-bezier(.2,.6,.2,1),box-shadow .25s ease}
.fr-in:hover,.fr-open .fr-in,.fr-in:has(:focus-visible){width:240px;box-shadow:24px 0 60px color-mix(in srgb, var(--inset) 55%, transparent)}
.fr-item{position:relative;flex:none}
.fr-dot{position:absolute;left:27px;top:9px;width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px var(--inset)}
.fr-label{opacity:0;transition:opacity .15s ease;font-size:var(--fs);font-weight:var(--weight-strong)}
.fr-in:hover .fr-label,.fr-open .fr-label,.fr-in:has(:focus-visible) .fr-label{opacity:1}
.fr-search input{flex:1 1 auto;min-width:0;width:100%;background:transparent;border:0;outline:0;padding:1px 2px;color:var(--fg);font:inherit;font-size:var(--fs-sm);font-weight:400}
.fr-search input::placeholder{color:color-mix(in srgb, var(--fg) 45%, transparent)}
.fr-search input:-webkit-autofill,.fr-search input:-webkit-autofill:focus,.fr-search input:-webkit-autofill:hover{-webkit-text-fill-color:var(--fg);caret-color:var(--fg);transition:background-color 600000s 0s,color 600000s 0s;box-shadow:none;border-radius:inherit}
.fr-search:focus-within{background:color-mix(in srgb, var(--fg) 9%, transparent);color:var(--fg)}
@media (max-width:640px){
.fr{position:fixed;left:0;right:0;bottom:0;flex:none;width:100%;height:60px;z-index:50}
.fr-in{position:static;width:100%;height:60px;flex-direction:row;justify-content:space-around;align-items:center;gap:0;padding:6px 8px;border-right:0;border-top:1px solid var(--line);overflow:visible;transition:none}
.fr-in:hover,.fr-open .fr-in,.fr-in:has(:focus-visible){width:100%;box-shadow:none}
.fr-brand,.fr-search,.fr-gap,.fr-pop{display:none}
.fr-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.fr ~ main{padding-bottom:84px!important}
}
.fr-glyph{flex:none}
.fr-brand{padding:0 5px;margin-bottom:10px}
.fr-mark{width:calc(var(--sp-1) * 8.5);height:calc(var(--sp-1) * 8.5);flex:none}
.fr-wordmark{font-size:var(--fs-lg);color:var(--fg)}
.fr-gap{height:calc(var(--sp-1) * 4.5);flex:none}
.fr-gap.fr-fill{height:auto;flex:1 1 auto}
.fr-form{margin:0;flex:none}
.fr-you{position:relative}
.fr-you-sum{list-style:none;cursor:pointer}
.fr-you-fig{width:calc(var(--sp-1) * 8);height:calc(var(--sp-1) * 8);flex:none;margin-left:calc(var(--sp-1) * -1.5);background:color-mix(in srgb, var(--fg) 8%, transparent);overflow:hidden;box-shadow:0 0 0 2px var(--bg),0 0 0 calc(2px + 1px) color-mix(in srgb, var(--fg) 18%, transparent)}
.fr-you-img{width:100%;height:100%;object-fit:cover;display:block}
.fr-you-initials{font-size:calc(var(--fs-sm) - 1px);font-weight:var(--weight-strong);color:var(--fg)}
.fr-menu{position:fixed;left:calc(var(--sp-1) * 21);bottom:calc(var(--sp-1) * 4);width:calc(var(--sp-1) * 50);box-sizing:border-box;padding:calc(var(--sp-1) * 1.5);border-radius:calc(var(--sp-1) * 4.5);background:var(--fr-menu);box-shadow:0 0 0 1px var(--line),0 24px 60px color-mix(in srgb, var(--inset) 60%, transparent);z-index:60;display:flex;flex-direction:column}
/* A CLOSED ACCOUNT MENU HAS NO BOX: a fixed panel inside a closed <details> is not painted but is still laid out, and the parity crawl took it for an open overlay on every screen (crawl-controls-pulse). His menu is not drawn until it is open. */
.fr-you:not([open]) > .fr-menu{display:none}
.fr-menu-row{display:flex;align-items:center;gap:var(--sp-3);padding:calc(var(--sp-1) * 2.5) var(--sp-3);border-radius:var(--sp-3);color:var(--fg);font-size:calc(var(--fs) - 1px);font-weight:var(--weight-strong);text-decoration:none;white-space:nowrap}
.fr-menu-ico{display:grid;place-items:center;width:calc(var(--sp-1) * 8.5);height:calc(var(--sp-1) * 8.5);flex:none;border-radius:calc(var(--sp-1) * 2.5);background:color-mix(in srgb, var(--fg) 6%, transparent);color:var(--fg-soft)}
.fr-menu-row:hover{background:color-mix(in srgb, var(--fg) 7%, transparent)}
.fr-reasons{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.fr-reason{display:flex;align-items:center;gap:calc(var(--sp-1) * 2.5);padding:var(--sp-2) var(--sp-3);border-radius:var(--radius);font-size:calc(var(--fs) - 1px);cursor:pointer}
/* WHILE THE YOU MENU IS OPEN THE RAIL STAYS THE NARROW STRIP IT IS (shots 03 of 28 Oct): the focus the press leaves on the avatar must not open the drawer under a popover that stands beside it. */
.fr-in:has([data-you-menu][open]),.fr-in:has([data-you-menu][open]):hover,.fr-in:has([data-you-menu][open]):has(:focus-visible){width:76px;box-shadow:none}
.fr-in:has([data-you-menu][open]) .fr-label{opacity:0}
/* REDUCED MOTION is the rail's own (styles-into-components-search): it was carried by Search's sheet, word for word, beside the network, people and person sheets. */
@media (prefers-reduced-motion: reduce){.fr-in,.fr-label{transition:none}}

/* THE REACH ACTIONS (styles-into-components-people): the row of ways to reach somebody, its buttons and what is said when one is refused. Moved here from the Person screen's sheet unchanged. */
.pn-reach{display:flex;gap:var(--sp-3);align-items:center;justify-content:center;flex-wrap:wrap}
.pn-reach-btn{width:48px;height:48px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;background:color-mix(in srgb,var(--fg) 8%,transparent);color:var(--fg);text-decoration:none;cursor:pointer}
.pn-reach-btn[aria-disabled=true]{opacity:.45;cursor:default}
.pn-reach-refused{font-size:var(--fs-sm);color:color-mix(in srgb,var(--fg) 63%,transparent)}

/* A STANDING NOTE, SAID WHERE THE FRAME HOLDS IT (a disconnected source). The notifications are the shared component (notification.css); this is a condition that stays, drawn as the frame has always drawn it. */
.fr-gone{margin:0 0 var(--sp-3,12px);padding:10px 16px;border-radius:16px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);color:var(--fg-soft);font-size:var(--fs-sm,13px);line-height:20px}
.fr-gone a{color:var(--accent-2)}

/* THE FIGURES OF A METRIC TILE ARE TABULAR (AF-026, Andrew: "Metric tiles per §2.12 - sentence-case captions, surface ladder, tabular figures"; §2.12: "tabular figures"): the big value and the change under it of a score gauge (Today's tiles, Pulse's gauges) are set so the digits are one width and do not shift as a score changes. The gauge numbers are the text of an svg, and Pulse's are spans inside the ring (the property inherits), so the rule is for both. */
[data-score] text, [data-score-change], [data-pulse-gauge] .pu-gauge-in { font-variant-numeric: tabular-nums; }

.st-segs{display:inline-flex;gap:4px;padding:4px;border-radius:999px;background:rgba(var(--m-ink-rgb,255,255,255),0.05);box-shadow:inset 0 0 0 1px rgba(var(--m-ink-rgb,255,255,255),0.06)}
.st-seg-btn{height:32px;padding:0 14px;border:0;border-radius:999px;background:transparent;color:var(--m-12,#C9D3DE);font:inherit;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap}
.st-seg-btn.on{background:var(--m-9,#F4F7FA);color:var(--m-1,#060B14)}
.st-seg-btn:disabled{opacity:.5;cursor:not-allowed}
.st-segs-full{display:flex}
.st-segs-full .st-seg-btn{flex:1}
.se-form:has(.st-segs-full),.se-fieldset:has(.st-segs-full){display:flex;width:100%}
.st-segs-full > form{flex:1 1 0;min-width:0;display:flex}
.st-segs-full > form > fieldset{flex:1;display:flex}
.st-segs-full > .st-seg-btn{flex:1}
.st-segs-full > form .st-seg-btn{flex:1;white-space:normal}
/* HOVER (EXP-24: everything clickable has one): the segment takes a faint wash of the ink. */
.st-seg-btn:hover{background:color-mix(in srgb, var(--fg) 7%, transparent)}

/* A SETTINGS CARD (components/settings-card.js): the box, its head and its words, as the Settings screens draw them. Moved from the Settings screen's sheet; only the Settings screens and this component carry these classes. */
.st-card{display:flex;flex-direction:column;gap:14px;border-radius:24px;padding:20px 22px;background:linear-gradient(180deg,var(--m-5,#0F1826) 0%,var(--m-3,#0B121E) 100%);box-shadow:0 0 0 1px rgba(var(--m-ink-rgb,255,255,255),0.05),0 24px 60px rgba(0,0,0,0.45);min-width:0}
.st-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.st-h{margin:0;font-size:18px;line-height:24px;font-weight:600}
.st-p{margin:0;font-size:14px;line-height:20px;color:var(--m-12,#C9D3DE)}
.st-tag{flex:none;font-size:12px;line-height:16px;font-weight:600;padding:4px 10px;border-radius:999px;background:rgba(var(--m-ink-rgb,255,255,255),0.08);color:var(--m-12,#C9D3DE)}
/* The beta tag is a .st-tag with its own colours: it is laid after .st-tag in this one file, as it was, because one element carries both classes (class="st-tag st-tag-beta") and the later rule wins. */
.st-tag-beta{color:var(--m-18,#7CC4FF);background:rgba(0,146,233,0.14)}
/* A CARD THAT IS RECOMMENDED (Morris's "Recommended for you"): its own accent - a blue edge and wash, and a lit dot before its title */
.st-card[data-recommended-card]{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 30%,transparent);background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 14%,transparent) 0%,var(--card) 70%)}
.st-card[data-recommended-card] .st-h::before{content:"";display:inline-block;width:7px;height:7px;margin-right:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent);vertical-align:middle}
/* A SOURCE CARD'S TOP (sources-cards-layout): the title and its status share a line where they fit; the status drops under the name where they do not */
.se-src-top{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;min-width:0}
.se-grow{flex:1;min-width:0}
.se-src-top .se-grow{flex:1 1 140px;overflow-wrap:anywhere}
.se-src-top .st-tag{flex:none}

/* THE SHEET THAT OPENS OVER A SCREEN BY ITS ADDRESS (components/sheet-back.js; `:target`). Its rules sat in the Goals screen's sheet. */
.ng-over{display:none;position:fixed;inset:0;z-index:60;place-items:center;background:rgba(4,8,15,0.66);backdrop-filter:blur(6px)}
.ng-over:target{display:grid}

/* MORRIS'S NIGHT, SHARED BY THE SCREENS THAT DRAW IT (Welcome, and the right half of every Onboarding chapter): the drifting stars and the faded faces floating among them (components/starfield.js). */
@keyframes dr1{0%{transform:translate(0,0)}50%{transform:translate(14px,-10px)}100%{transform:translate(0,0)}}
@keyframes dr2{0%{transform:translate(0,0)}50%{transform:translate(-12px,12px)}100%{transform:translate(0,0)}}
@keyframes dr3{0%{transform:translate(0,0)}33%{transform:translate(8px,10px)}66%{transform:translate(-8px,4px)}100%{transform:translate(0,0)}}
.dd1{animation:dr1 14s ease-in-out infinite}
.dd2{animation:dr2 18s ease-in-out infinite}
.dd3{animation:dr3 22s ease-in-out infinite}
.ob-face{position:absolute;border-radius:50%;object-fit:cover;opacity:.28;filter:grayscale(.5);box-shadow:0 0 0 2px var(--bg)}
.gi-stars{position:absolute;inset:0;width:100%;height:100%}
.gi-line{stroke:var(--accent-2);stroke-opacity:.07;stroke-width:1}
.gi-dot{fill:color-mix(in srgb,var(--accent-2) 80%,var(--fg));animation-delay:var(--delay);transform-box:fill-box}
.ob-face{left:var(--x);top:var(--y);width:var(--size);height:var(--size);animation-delay:var(--delay)}
@media (prefers-reduced-motion: reduce){.dd1,.dd2,.dd3{animation:none}}
/* in a panel that holds its own content (Onboarding's right half), the night sits behind it */
.ob-right > .gi-stars,.ob-right > .ob-face{z-index:0}
.ob-right > .ob-win,.ob-right > .ob-cap{position:relative;z-index:1}

.st-switch{flex:none;position:relative;width:46px;height:26px;padding:0;border:0;border-radius:999px;background:rgba(var(--m-ink-rgb,255,255,255),0.14);cursor:pointer;transition:background .15s ease}
.st-switch span{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#FFFFFF;transition:transform .15s ease}
.st-switch[aria-checked="true"]{background:#0092E9}
.st-switch[aria-checked="true"] span{transform:translateX(20px)}
.st-switch:disabled{opacity:.5;cursor:not-allowed}
.st-tile form:has(.st-switch){width:auto;flex:none}

/* THE TODAY DRAWN BEHIND EACH ONBOARDING STEP (components/today-behind.js; Morris: the step is a panel over Today). The component's own rules, which sat in the Onboarding screen's sheet although only this component draws these classes. */
/* Today drawn behind each step (Morris's prototype: the step is a panel over Today) */
.ob-behind{position:absolute;inset:0;overflow:hidden;display:flex;pointer-events:none;user-select:none;background:var(--m-2,#050A14)}
.ob-b-rail{width:88px;flex:none;display:flex;flex-direction:column;gap:14px;padding:28px 12px;color:var(--m-16,#6F7E90);font-size:13px;box-shadow:1px 0 0 rgba(var(--m-ink-rgb,255,255,255),0.05)}
.ob-b-main{flex:1;display:flex;flex-direction:column;gap:16px;padding:32px 40px;color:var(--m-14,#9AA6B4)}
.ob-b-h{margin:0;font-size:28px;font-weight:600;color:var(--m-10,#EEF2F6)}
.ob-b-move{margin:0;font-size:18px;color:var(--m-12,#C9D3DE)}
.ob-b-chips{display:flex;gap:8px}
.ob-b-chip{height:32px;padding:0 12px;border-radius:999px;background:rgba(var(--m-ink-rgb,255,255,255),0.06);display:inline-flex;align-items:center;font-size:13px}
.ob-b-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.ob-b-card{padding:18px;border-radius:20px;background:rgba(var(--m-ink-rgb,255,255,255),0.04);font-weight:600}

.t13-scores-head { display: flex; justify-content: space-between; align-items: baseline; }
.t13-history { gap: 6px; }
.t6-hero-measure { max-width: 16ch; text-wrap: balance; }
[data-pager-card][hidden] { display: none !important; }
[data-quiet] { display: none !important; }
.t6-date { text-transform: uppercase; letter-spacing: 0.04em; }
.t6-net-chip { position: relative; z-index: 1; align-self: flex-start; height: 40px; padding: 0 16px; border-radius: 999px; background: rgba(0, 146, 233, 0.18); color: var(--m-10,rgb(238, 242, 246)); font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.t13-hrow-fields { border: 0; margin: 0; padding: 0; min-width: 0; }
.t13-hrow-act { margin: 4px 0 0; }
/* THE NETWORK CARD'S SUBTITLE IS ONE LINE, as his (today-layout-c, today-design-d): the new people and the way to see them; the count of the people the network holds is in the page, quiet. */
.t6-net-lines { display: flex; flex-wrap: wrap; column-gap: 6px; row-gap: 0; align-items: baseline; }
/* HIS "THIS WEEK" TOP RIGHT OF YOUR SCORES (today-design-d). */
.t13-scores-week { font-size: 13px; color: var(--m-14,rgb(154, 166, 180)); }
/* THE SELECTED MOVE OF THE STRIP IS OUTLINED IN ITS TIE'S COLOUR, WITH A NOTCH UP TO THE HERO (his queue card, index.html 703-707; today-looks-e). The colours are the rings': rising green, steady blue, cooling grey; none for a tie with no direction. */
.t6-card[data-selected] { background: rgba(var(--m-ink-rgb,255,255,255), 0.08) !important; box-shadow: 0 0 0 1.5px var(--sel, rgba(var(--m-10-rgb,238,242,246),0.55)) !important; }
.t6-card[data-selected]::before { content: ""; position: absolute; top: -11px; left: 42px; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid var(--sel, rgba(var(--m-10-rgb,238,242,246),0.55)); }
.t6-card[data-tone="rising"] { --sel: var(--trend-rising); }
.t6-card[data-tone="steady"] { --sel: var(--accent-2); }
.t6-card[data-tone="cooling"] { --sel: var(--trend-cooling); }
/* THE HISTORY WINDOW IS HIS ("Your nudges", the prototype's dialog; nudge-history-looks-b): 80 px from the top, centred across; one header row with a line under it; the frame's Close at its right as a 36 px circle; the rows under it. */
.fx-panel[data-modal="history"] { top: 80px; transform: translateX(-50%); padding: 0; border-radius: 26px; }
.fx-panel[data-modal="history"] .fx-panel-bar { top: 19px; right: 20px; }
.fx-panel[data-modal="history"] [data-panel-shut] { top: 19px; right: 20px; width: 36px; height: 36px; border-radius: 50%; background: rgba(var(--m-ink-rgb,255,255,255), 0.07); }
[data-history-head] { display: flex; align-items: center; gap: 12px; padding: 16px 64px 16px 20px; border-bottom: 1px solid rgba(var(--m-ink-rgb,255,255,255), 0.07); }
.t13-hsub { flex: 1; margin: 0; font-size: 13px; line-height: 18px; color: var(--m-14,rgb(154, 166, 180)); }
[data-history-body] { max-height: 640px; overflow-y: auto; padding: 8px 14px 16px; }
/* HIS GAUGE IS A LINK TO THE PULSE (crawl-controls-today): the tile is the link, so it keeps the tile's own colour and rounding. */
.t13-gauge-link { display: block; color: inherit; text-decoration: none; border-radius: 18px; }

/* HIS "Email Dana | v" IS ONE WHITE PILL SPLIT BY A LINE (morris-world-moves; the prototype's reach split): the address and the menu of other ways to reach are two parts of one pill, the menu's part a shade darker. */
.t6-split { display: inline-flex; align-items: center; }
.t6-split > a[data-email] { border-radius: 999px 0 0 999px !important; }
.t6-split > [data-reach-split] { margin-left: 1px; }
.t6-split > [data-reach-split] > summary, .t6-split > span[data-reach-split] { width: 40px !important; border-radius: 0 999px 999px 0 !important; background: var(--m-59,rgb(228, 234, 240)) !important; color: var(--m-1,rgb(6, 11, 20)) !important; }
/* HIS WHITE CIRCLE IS THE SELECTED CARD'S (his strip: the move shown above has the white Email, the others the translucent one); the pager moves data-selected, so the sheet does. */
.t6-card[data-selected] a[data-email] { background: var(--m-9,rgb(244, 247, 250)) !important; color: var(--m-1,rgb(6, 11, 20)) !important; }

/* THE WHOLE NUDGE CARD OPENS ITS NUDGE (nudge-card-whole-click-no-arrow): the cover is an empty link laid over the card, under its content; what is not another control lets the click fall through to it, and every control keeps its own. */
[data-nudge-cover] { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
[data-nudge-cover] ~ * { pointer-events: none; }
[data-nudge-cover] ~ * :is(a, button, summary, input, textarea, select, label, form, details, [role="button"]), [data-nudge-cover] ~ * :is(a, button, summary, input, textarea, select, label, form, details, [role="button"]) * { pointer-events: auto; }

.fp-bar{display:grid;grid-template-columns:1fr minmax(0,304px) 1fr;align-items:center;gap:12px}
.fp-bar-l{display:flex;align-items:center;justify-self:start}
.fp-bar-c{min-width:0}
.fp-bar-c form{flex:1 1 auto !important;width:100%}
.fp-bar-r{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:10px}
@media (max-width:900px){.fp-bar{grid-template-columns:minmax(0,1fr)}.fp-bar-r{justify-content:flex-start}}
/* THE TOOLBAR'S RIGHT SIDE DRAWS NO NOT-YET CHIP (styles-into-components-people): moved here from the Network screen's sheet unchanged. */
.fp-bar-r [data-not-yet]{display:none}
/* THE TWO BARS OF THE TOOLBAR (styles-into-components-people): People's - a flex row in which the middle grows from 260 and centres the filter field - and the Network's (.nbar), whose middle is its own. Moved here from the People and Network screens' sheets unchanged: the selectors are the same, so nothing but where they are written has changed. */
/* PEOPLE'S TOOLBAR IS MORRIS'S: a flex row in which the middle grows from 260 and centres the filter field, which is up to 360 wide (hub-dev against the prototype, 28 Oct: the field was 304 wide and off-centre). The Network's bar (.nbar) keeps its own grid. */
.fp-bar:not(.nbar){display:flex;flex-wrap:nowrap;align-items:center;gap:10px}
/* THE PILLS KEEP THEIR SIZE AND THE FILTER FIELD GIVES WAY (ss-people-grid-filters 06c): Select stays on the one row down to a narrow window; only a phone wraps. */
.fp-bar:not(.nbar)>:not(.fp-bar-c){flex:none}
@media (max-width:760px){.fp-bar:not(.nbar){flex-wrap:wrap}}
.fp-bar:not(.nbar) .fp-bar-c{flex:1 1 260px;display:flex;justify-content:center;align-items:center;gap:10px;min-width:0}
.fp-bar:not(.nbar) .fp-bar-c form{flex:0 1 360px !important;width:auto !important;min-width:0}
.fp-bar:not(.nbar) .fp-bar-c input{min-width:0}
.nbar .fp-bar-c{flex:1 1 260px;display:flex;justify-content:center;align-items:center;min-width:0}
/* The same for the menus of the toolbar pills: closed, their chips (16px wider than the menu they sit in) drew a box nobody had opened. */
.fp-bar .fx-drop:not([open])>.fx-menu{display:none}
/* ON A PAGE WHOSE HEADER STICKS (wt-sticky-header-rule-table-scroll-m: People and Network), THE BAR OF BUTTONS RIGHT UNDER THE PAGE HEADER STICKS BELOW IT (the header is 88px, the screen's own rule) and carries the 1px rule, in the left menu bar's line colour, under the last of them; the header draws none where a bar follows. The column's padding is taken back inside the bar, so the content slides under it with nothing showing around. */
header + .fp-bar{position:sticky;top:88px;z-index:19;background:transparent;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);margin:calc(var(--sp-1) * -4.5) calc(var(--sp-1) * -8) calc(var(--sp-1) * -1.5);padding:calc(var(--sp-1) * 1.5) calc(var(--sp-1) * 8);box-shadow:0 1px 0 var(--line-soft)}
header:has(+ .fp-bar){box-shadow:none}
/* ALL FILTERS STANDS IN THE WINDOW (all-filters-modal-fits; James, batch 5, screenshot 74): the toolbar blurs what is behind it, and a box with a backdrop-filter is where its fixed children are placed: the sheet's 80px and its backdrop were counted from the toolbar and the sheet ended below the window. While it is open the toolbar does not blur, and it stands over the sticky header (20) and the rail (30; 50 as the bottom bar), so the sheet is not under the header's blur nor beside the rail's buttons. */
.fp-bar:has(.fx-drop[data-filters][open]){backdrop-filter:none;-webkit-backdrop-filter:none;z-index:55}

.fx-seg{display:inline-flex;align-items:center;gap:2px;padding:4px;border-radius:999px;background:rgba(var(--m-ink-rgb,255,255,255),0.05);box-sizing:border-box}
.fx-seg-view{gap:4px}

.fx-why{font-size:12px;color:var(--m-14,#9AA6B4)}