/* action ai · the Follow-ups screen (REDESIGN-R4-FOLLOWUPS-PEOPLE-2026-10-06).
   LIFTED from BUILD HANDOVER 2026-10-05 mockups/Follow-ups Interactive v22 (review round 4).html
   (page CSS from src/followups/fu10.py, v6 house style F21-F29, round 2-4 review values from
   src/review-tools/build_people_followups.py). Every value is the mockup's; only the SELECTORS change,
   from the mockup's own classes to the app's (WIRING.md §5): .hd -> .learn-header, .ln -> .tasks-filter-btn,
   .row -> .task-card, .sw -> .task-swipe-wrap, .fold -> .fup-sec head rows, .toast -> .fu4-toast.
   Everything is scoped to .scene-tasks.fu4 so no other screen moves. Keyframes carry the fu4- prefix
   (KIT-1: never redefine a global name). Reduced motion: every animation and transition off. */

.scene-tasks.fu4 { position: relative; isolation: isolate; color: #F4F4F5; font-family: 'Hanken Grotesk', system-ui, sans-serif; padding: 0 0 110px; }
.scene-tasks.fu4 > *:not(.fu4-runs):not(.fu4-runbg):not(.fu4-hsky):not(.lt-sentinel) { position: relative; z-index: 1; } /* FUP-FLOW: the batch sheet and its scrim keep their own position:fixed and z-index (a bare > * made the sheet relative, which put Snooze off screen) */
/* the large-title sentinel stays out of the flow (index.html .lt-sentinel: absolute, 41px); the rule above made it a
   41px in-flow block that pushed the whole page down (found by spec 84 pin A's control, R4 finish) */
.scene-tasks.fu4 > .lt-sentinel { position: absolute; }
.scene-tasks.fu4 > .fu4-hsky { position: absolute; left: 0; right: 0; top: 0; height: 460px; z-index: 0; pointer-events: none; -webkit-mask: linear-gradient(#000 55%, transparent); mask: linear-gradient(#000 55%, transparent); }
.fu4-hsky .sky1, .fu4-hsky .sky2 { position: absolute; inset: 0; background-repeat: repeat; }
.fu4-hsky .sky1 { background-image: radial-gradient(.6px .6px at 150px 20px,#fff9,transparent),radial-gradient(.6px .6px at 280px 120px,#fff7,transparent),radial-gradient(1px 1px at 20px 30px,#fff8,transparent),radial-gradient(1px 1px at 120px 80px,#fff6,transparent),radial-gradient(1.4px 1.4px at 200px 160px,#fffa,transparent),radial-gradient(1px 1px at 300px 40px,#fff5,transparent),radial-gradient(1px 1px at 60px 200px,#fff7,transparent); background-size: 340px 240px; opacity: .28; }
.fu4-hsky .sky2 { background-image: radial-gradient(1.6px 1.6px at 80px 60px,#C7C0FF,transparent),radial-gradient(1.2px 1.2px at 260px 190px,#FFE7B0,transparent),radial-gradient(1.2px 1.2px at 170px 120px,#B6F5E4,transparent); background-size: 360px 280px; opacity: .25; }

/* F21 · header: small-caps label left, ember chip + search right */
.scene-tasks.fu4 .learn-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 16px 16px 2px; min-height: 0; background: none; border: 0; position: relative; }
.scene-tasks.fu4 .learn-header > div:first-child[style] { display: none; }
.scene-tasks.fu4 .learn-header .dash-title { font-family: 'Hanken Grotesk', system-ui, sans-serif; font-style: normal; font-size: 14px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: rgba(255,255,255,.56); margin: 0; flex: 1; text-align: left; }
.fu4-hr { display: flex; gap: 8px; align-items: center; }
.fu4-rb { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); color: #F4F4F5; border: 0; padding: 0; cursor: pointer; flex: none; }
.fu4-rb svg { width: 20px; height: 20px; }
/* R4-FIX-PHONE · FX-4 / FX-7: "Plan my week" left the header (it wrapped the header onto a second row
   that overlapped the lanes) for its own row above "The rest", at the page's 16px gutter. */
.fu4-plan { display: flex; padding: 14px 16px 0; }
.scene-tasks.fu4 .tasks-plan-btn { height: 44px; padding: 0 14px; border-radius: 99px; font-size: 14px; font-weight: 600; color: rgba(255,255,255,.75); background: transparent; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); border: 0; white-space: nowrap; }

/* F15 · F28 · F30 · the ember chip: a 22px ring (3.5px stroke, spectral arc on 14% white) + embers to the next Spark */
.fu4-emb { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px 0 8px; border-radius: 99px; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); position: relative; border: 0; color: #F4F4F5; cursor: pointer; }
.fu4-emb .er { width: 22px; height: 22px; transform: rotate(-90deg); }
.fu4-emb .er circle { fill: none; stroke: rgba(255,255,255,.14); stroke-width: 3.5; }
.fu4-emb .er .ep { stroke: url(#fu4emg); stroke-linecap: round; transition: stroke-dasharray .8s cubic-bezier(.2,.8,.2,1); }
.fu4-emb .en { font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; color: #F4F4F5; }
.fu4-emtip { position: absolute; z-index: 5; right: 16px; top: 66px; padding: 8px 12px; border-radius: 12px; background: #1b1b20; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 10px 30px rgba(0,0,0,.5); font-size: 14px; font-weight: 600; color: rgba(255,255,255,.7); opacity: 0; transform: translateY(-6px); transition: all .3s cubic-bezier(.2,.8,.2,1); pointer-events: none; }
.fu4-emtip b { color: #FDCB6E; }
.fu4-emtip.on { opacity: 1; transform: none; }

/* search: the sky search-bar treatment (52px, blur, periwinkle focus ring) */
.scene-tasks.fu4 .tasks-search-wrap { margin: 14px 16px 0; padding: 0; }
.scene-tasks.fu4 .tasks-search-input { width: 100%; height: 52px; border-radius: 16px; padding: 0 44px 0 16px; background: rgba(20,20,24,.75); border: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff; font: 500 16px 'Hanken Grotesk', sans-serif; outline: 0; transition: box-shadow .25s; }
.scene-tasks.fu4 .tasks-search-input:focus { box-shadow: inset 0 0 0 1.5px #A29BFE; }
.scene-tasks.fu4 .tasks-search-input::placeholder { color: rgba(255,255,255,.45); }
.scene-tasks.fu4 .tasks-search-clear { width: 44px; height: 44px; border-radius: 50%; color: rgba(255,255,255,.6); top: 4px; right: 4px; }
.scene-tasks.fu4 .tasks-search-note { font-size: 14px; color: rgba(255,255,255,.56); padding: 8px 2px 0; }

/* lanes and goal buttons: 44px pills, white when active (.ln) */
.scene-tasks.fu4 .fup-sec { margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
.scene-tasks.fu4 .fup-sec--list { padding: 0; }
.scene-tasks.fu4 .tasks-filter { display: flex; gap: 8px; padding: 8px 16px 0; margin: 0; overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; background: none; border: 0; }
.scene-tasks.fu4 .tasks-filter::-webkit-scrollbar { display: none; }
.scene-tasks.fu4 .tasks-filter-btn { flex: none; height: 44px; min-height: 44px; padding: 0 16px; border-radius: 99px; font-size: 14px; font-weight: 600; color: rgba(255,255,255,.74); background: transparent; border: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); display: inline-flex; align-items: center; gap: 4px; }
.scene-tasks.fu4 .tasks-filter-btn.active { background: #F4F4F5; color: #0b0b0d; box-shadow: none; }
.scene-tasks.fu4 .tasks-filter-count { font-style: normal; margin-left: 4px; color: rgba(255,255,255,.56); background: none; padding: 0; font-size: 14px; font-weight: 600; min-width: 0; }
.scene-tasks.fu4 .tasks-filter-btn.active .tasks-filter-count { color: rgba(0,0,0,.5); }
.scene-tasks.fu4 .tasks-filter-btn svg { width: 16px; height: 16px; }
.scene-tasks.fu4 [data-goal-not] { margin: 10px 16px 0; }

/* F23 · F29 · Next up: a 150px panel holding the constellation */
.fu4-next { padding: 14px 16px 0; }
.fu4-panel { position: relative; height: 150px; border-radius: 22px; overflow: hidden; background: rgba(20,20,24,.55); box-shadow: inset 0 0 0 1px rgba(255,255,255,.09); }
.fu4-neb { position: absolute; left: 50%; top: 42%; width: 260px; height: 110px; translate: -50% -50%; border-radius: 50%; filter: blur(30px); transition: opacity 1s; }
.fu4-panel svg.psky { position: absolute; left: 0; right: 0; top: 6px; width: 100%; height: 110px; overflow: visible; }
.fu4-pt { position: absolute; left: 18px; bottom: 12px; font-family: 'Fraunces', serif; font-style: italic; font-size: 30px; font-weight: 600; letter-spacing: -.025em; line-height: 1; margin: 0; color: #F4F4F5; }
.fu4-panel .psky .new { animation: fu4-pop .7s cubic-bezier(.2,1.6,.4,1); transform-box: fill-box; transform-origin: center; }
@keyframes fu4-pop { from { transform: scale(0); } }
.fu4-panel .psky .tgt { fill: none; stroke: #fff; stroke-width: 1; transform-box: fill-box; transform-origin: center; animation: fu4-tgt 2s ease-out infinite; }
@keyframes fu4-tgt { from { transform: scale(1); opacity: .7; } to { transform: scale(3.2); opacity: 0; } }
.fu4-panel .psky .sl { transition: opacity .6s; }
/* FOLLOWUPS-STARS-1: open stars stay present before any follow-up is kept.
   Use the theme's spectral tokens; only opacity twinkles, never size or position. */
.fu4-panel .psky g[data-open] { --fu4-star: var(--spectral-periwinkle); opacity: .8; animation: fu4-flash 1s ease-out both, fu4-twinkle 2.8s ease-in-out 1s infinite; }
.fu4-panel .psky g[data-open]:nth-of-type(5n + 1) { --fu4-star: var(--spectral-coral); }
.fu4-panel .psky g[data-open]:nth-of-type(5n + 2) { --fu4-star: var(--spectral-amber); }
.fu4-panel .psky g[data-open]:nth-of-type(5n + 3) { --fu4-star: var(--spectral-mint); }
.fu4-panel .psky g[data-open]:nth-of-type(5n + 4) { --fu4-star: var(--spectral-sky); }
.fu4-panel .psky g[data-open]:nth-of-type(2n) { animation-delay: 0s, 1s; }
.fu4-panel .psky g[data-open]:nth-of-type(3n) { animation-delay: 0s, 1s; }
.fu4-panel .psky g[data-open] > circle:not(.tgt) { fill: var(--fu4-star); stroke: var(--fu4-star); }
/* FOLLOWUPS-STARS-2: two bright spectral flashes on opening, then the slow shimmer. */
/* FOLLOWUPS-STARS-3: one shared bright mount flash, then visible shimmer. */
@keyframes fu4-flash {
  0%, 65% { opacity: 1; filter: drop-shadow(0 0 7px var(--fu4-star)); }
  100% { opacity: .8; filter: none; }
}
.fu4-panel .psky g[data-id] { animation: fu4-flash 1s ease-out both, fu4-twinkle 2.8s ease-in-out 1s infinite; --fu4-star: var(--spectral-periwinkle); }
.fu4-stars-info { position: absolute; top: 4px; right: 4px; width: 44px; height: 44px; display: grid; place-items: center; color: var(--spectral-periwinkle); background: var(--surface-2); border: 1px solid var(--line); border-radius: 50%; z-index: 2; cursor: pointer; }
.scene-tasks.fu4 .fu4-stars-info svg { width: 20px; height: 20px; }
.fu4-stars-explainer .hcsheetbg { pointer-events: auto; }
.fu4-stars-explainer .hcsheet .row { padding-top: 40px; }
@keyframes fu4-twinkle { 0%, 100% { opacity: .65; } 50% { opacity: 1; } }
/* the star's own shockwave: r 6, scale 0.4 -> 10 over 1s (60px), clipped at the panel edge as built (EFFECTS.md §W) */
.fu4-panel .psky .ring { fill: none; transform-box: fill-box; transform-origin: center; animation: fu4-ring 1s ease-out forwards; vector-effect: non-scaling-stroke; stroke-width: 1.5; }
@keyframes fu4-ring { from { transform: scale(.4); opacity: .9; } to { transform: scale(10); opacity: 0; } }

/* F24 · the one loud button: full-width white .cta, 56px, radius 18, spinning spectral ring 4s */
.fu4-hero { margin-top: 16px; }
/* R4-FIX-PHONE · FX-10 (Fable amendment C, Alex's phone 2026-10-08: "lake introduction to know — Emily Youngs
   · 161d lat", clipped at BOTH edges). The mockup's rule is `.nx-hero .cta{width:100%;font-size:17px;
   padding:0 18px;gap:0;white-space:pre}` on a centred flex box: a label wider than the button overflows both
   sides and overflow:hidden cuts both ends. The label is now one centred block of text that WRAPS inside the
   same 18px padding (16px + a 24px line = the mockup's 56px for one line), so a long title takes a second
   line and nothing is clipped. A short title renders as before. */
.fu4-hero .cta { display: block; text-align: center; line-height: 24px; white-space: normal; overflow-wrap: break-word; width: 100%; min-height: 56px; padding: 16px 18px; border: 0; border-radius: 18px; background: #fff; color: #0b0b12; font-family: 'Hanken Grotesk', system-ui, sans-serif; font-size: 16px; font-weight: 600; position: relative; isolation: isolate; box-shadow: 0 0 0 2px #07070a, 0 18px 40px -16px rgba(162,155,254,.6); cursor: pointer; }
.fu4-hero .cta::after { content: ""; position: absolute; inset: -3px; border-radius: 21px; padding: 2.5px; background: conic-gradient(from var(--a), #FF7676, #FDCB6E, #55EFC4, #74B9FF, #A29BFE, #FF7676); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: kx-spin 4s linear infinite; pointer-events: none; }
.fu4-hero .cta b { font-weight: 800; }
.fu4-hero .cta span { font-weight: 600; color: #3a3a46; }

/* section labels (.evlab) and "The rest" head with the one view toggle (F20) */
.fu4-allhd { display: flex; align-items: center; justify-content: space-between; padding: 22px 16px 2px; }
.fu4-eb, .scene-tasks.fu4 .tasks-lane-label, .scene-tasks.fu4 .fup-sec-label { font-size: 14px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: rgba(255,255,255,.56); }
.fu4-eb em { font-style: normal; color: rgba(255,255,255,.35); margin-left: 4px; }
.scene-tasks.fu4 .tasks-lane-label { padding: 20px 16px 10px; margin: 0; }
.fu4-vt { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: rgba(255,255,255,.75); background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); border: 0; padding: 0; cursor: pointer; }
.fu4-vt svg { width: 18px; height: 18px; }

/* F25 · cards = .pc (padding 14, radius 18, #111114, 9% hairline, 10px gap) */
.scene-tasks.fu4 .tasks-group, .scene-tasks.fu4 .promise-group { margin: 0 16px 10px; padding: 14px; border-radius: 18px; background: #111114; border: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.09); }
.scene-tasks.fu4 .tasks-group--late { box-shadow: inset 0 0 0 1px rgba(255,255,255,.09); }
.scene-tasks.fu4 .tasks-group-head, .scene-tasks.fu4 .promise-group-head { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 0; background: none; border: 0; color: #F4F4F5; text-align: left; }
.scene-tasks.fu4 .tasks-group-name, .scene-tasks.fu4 .promise-group-title { font-family: 'Hanken Grotesk', system-ui, sans-serif; font-style: normal; font-size: 16px; font-weight: 700; color: #fff; }
.scene-tasks.fu4 .tasks-group-sub, .scene-tasks.fu4 .promise-group-sub { font-size: 14px; color: rgba(255,255,255,.56); }
.scene-tasks.fu4 .tasks-group-role, .scene-tasks.fu4 .tasks-group-wait, .scene-tasks.fu4 .promise-group-count { font-size: 14px; }
.scene-tasks.fu4 .tasks-group-count { flex: none; min-width: 28px; height: 28px; padding: 0 9px; border-radius: 99px; display: grid; place-items: center; font-size: 14px; font-weight: 700; color: #C7C0FF; background: rgba(162,155,254,.14); }
.scene-tasks.fu4 .tasks-list, .scene-tasks.fu4 .promise-group-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; padding: 0; border: 0; }
.scene-tasks.fu4 .face-more { font-size: 14px; }

/* F26 · avatar: the person's colour at 33% to #26262b, white 15/700 (Avatar tone prop) */
.PA[data-avatar="pa"] { --c: var(--pa-c); border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 14px; color: #fff; flex: none; position: relative; }
.PA[data-avatar="pa"].on::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; box-shadow: 0 0 0 2px var(--c), 0 0 12px var(--c); z-index: 1; }

/* the row: one line (F16), swipe (Polish), lateness as {n}d (F17), one quiet circle per row (F18) */
.scene-tasks.fu4 .task-swipe-wrap { position: relative; overflow: hidden; border-radius: 14px; transition: max-height .4s .12s cubic-bezier(.2,.8,.2,1), opacity .3s; max-height: 420px; }
.scene-tasks.fu4 .task-swipe-wrap.menu-open { overflow: visible; }
.scene-tasks.fu4 .task-card { display: block; min-height: 0; padding: 8px 0; border: 0; border-radius: 14px; background: #111114; box-shadow: none; touch-action: pan-y; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.scene-tasks.fu4 .task-card.done { opacity: .7; }
.scene-tasks.fu4 .task-card-line1 { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.scene-tasks.fu4 .task-check { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(20,20,24,.75); border: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); color: #0b0b12; }
.scene-tasks.fu4 .task-check::after { display: none; }
.scene-tasks.fu4 .task-check.on { background: #55EFC4; box-shadow: none; }
.scene-tasks.fu4 .task-check svg { width: 18px; height: 18px; }
/* R4-FIX-PHONE · FX-7: a title never shrinks below one short word's width (it broke "Introduce" into
   "Introdu / ce" beside a labelled control); when the row cannot hold it, the control cluster wraps as
   a unit under the title (.task-card-line1 already wraps), as the v66.4 comment on that cluster says. */
.scene-tasks.fu4 .task-title-display { flex: 1; min-width: 6.5em; padding: 0; background: none; border: 0; text-align: left; font-family: 'Hanken Grotesk', system-ui, sans-serif; font-size: 16px; font-weight: 500; color: rgba(255,255,255,.72); line-height: 1.35; cursor: pointer; }
.scene-tasks.fu4 .task-title-display b { color: #fff; font-weight: 700; }
.scene-tasks.fu4 .task-card.done .task-title-display { text-decoration: none; }
.fu4-late { flex: none; font-size: 14px; font-weight: 700; color: #FDCB6E; font-variant-numeric: tabular-nums; }
.scene-tasks.fu4 .task-row-controls { display: flex; align-items: center; gap: 8px; flex: none; }
.scene-tasks.fu4 .task-do, .scene-tasks.fu4 .task-overflow { flex: none; width: 44px; height: 44px; min-width: 44px; padding: 0; border-radius: 50%; display: grid; place-items: center; color: rgba(255,255,255,.82); background: rgba(20,20,24,.75); border: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); font-size: 14px; }
.scene-tasks.fu4 .task-do svg, .scene-tasks.fu4 .task-overflow svg { width: 18px; height: 18px; }
.scene-tasks.fu4 .task-overflow { background: transparent; box-shadow: none; color: rgba(255,255,255,.56); }
.scene-tasks.fu4 .task-overflow::after { content: ""; position: absolute; inset: 0 -6px; }
.scene-tasks.fu4 .task-overflow-wrap { position: relative; }
.scene-tasks.fu4 .task-intro-btn { height: 44px; padding: 0 14px; border-radius: 99px; font-size: 14px; font-weight: 600; color: rgba(255,255,255,.82); background: rgba(20,20,24,.75); border: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); white-space: nowrap; }
.scene-tasks.fu4 .task-menu { border-radius: 14px; background: #1b1b20; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 10px 30px rgba(0,0,0,.5); }
.scene-tasks.fu4 .task-menu button { min-height: 44px; font-size: 16px; }
/* F16: the second line stays shut until the row is tapped, then rises in (.3s) */
.scene-tasks.fu4 .task-card-line2 { display: none; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 0 2px 56px; font-size: 14px; color: rgba(255,255,255,.46); }
.scene-tasks.fu4 .task-swipe-wrap.fu4-open .task-card-line2 { display: flex; animation: fu4-rin .3s cubic-bezier(.2,.8,.2,1); }
@keyframes fu4-rin { from { opacity: 0; transform: translateY(16px); filter: blur(6px); } }
.scene-tasks.fu4 .task-card-line2 button, .scene-tasks.fu4 .task-card-line2 .task-person-static { min-height: 44px; font-size: 14px; }
/* FUP-FONT · the person chip on a row (TaskRow) and the Parked / Kept rows' avatar printed "about" and the avatar initials at the 11px eyebrow step, under every
   other line on the page (14/16/18). The word (an inline 11px on TaskRow's first span, a locked symbol, so it is beaten here with !important and TaskRow is untouched) is 14px on this page and the disc grows to 28px so a
   14px initial fits it, the same disc the group count uses. */
.scene-tasks.fu4 .task-person > span:first-child:not(:last-child) { font-size: 14px !important; }
.scene-tasks.fu4 .task-card-line2 .aa-avatar-initials, .scene-tasks.fu4 .tasks-quiet-row .aa-avatar-initials { width: 28px !important; height: 28px !important; font-size: 14px; }
.scene-tasks.fu4 .task-due { font-size: 14px; }
.scene-tasks.fu4 .task-due.over { color: #FDCB6E; }
.scene-tasks.fu4 .task-due.kept { color: #55EFC4; }
/* the swipe washes: right past 90px = Done (mint, check), left past 90px = Snooze +3d (amber, clock) */
.scene-tasks.fu4 .task-swipe-zone { position: absolute; inset: 0; display: flex; align-items: center; gap: 8px; padding: 0 20px; font-weight: 800; font-size: 14px; opacity: 0; border-radius: 14px; transition: none; }
.scene-tasks.fu4 .task-swipe-zone.done { background: linear-gradient(90deg, rgba(85,239,196,.25), transparent); color: #55EFC4; justify-content: flex-start; }
.scene-tasks.fu4 .task-swipe-zone.snooze { background: linear-gradient(270deg, rgba(253,203,110,.22), transparent); color: #FDCB6E; justify-content: flex-end; }
.scene-tasks.fu4 .task-swipe-zone svg { width: 20px; height: 20px; }
.scene-tasks.fu4 .task-swipe-zone.visible { opacity: 1; }
/* the card leaves (380ms) when it is done or put off */
.scene-tasks.fu4 .task-swipe-wrap.fu4-gone { max-height: 0; opacity: 0; transition: max-height .38s cubic-bezier(.2,.8,.2,1), opacity .38s; }
.scene-tasks.fu4 .task-swipe-wrap.fu4-gone .task-card { transform: translateX(110%); transition: transform .38s cubic-bezier(.2,.8,.2,1); }
.scene-tasks.fu4 .task-swipe-wrap.fu4-snz .task-card { transform: translateX(-110%); }

/* the Pro rank band and the Ready-to-send queue: the same cards */
.scene-tasks.fu4 .fup-smart { padding: 14px 16px 0; }
.scene-tasks.fu4 .fup-smart-list { display: flex; flex-direction: column; gap: 10px; }
.scene-tasks.fu4 .fup-smart-row, .scene-tasks.fu4 .fup-smart-tip, .scene-tasks.fu4 .ready-queue-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 14px; border-radius: 18px; background: #111114; border: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.09); color: #F4F4F5; text-align: left; }
.scene-tasks.fu4 .fup-smart-tip { margin-top: 10px; min-height: 52px; }
.scene-tasks.fu4 .fup-smart-rank { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; font-weight: 700; color: #C7C0FF; background: rgba(162,155,254,.14); }
.scene-tasks.fu4 .fup-smart-name, .scene-tasks.fu4 .ready-queue-name { font-size: 16px; font-weight: 700; color: #fff; }
.scene-tasks.fu4 .fup-smart-tip-text, .scene-tasks.fu4 .ready-queue-reason { font-size: 14px; color: rgba(255,255,255,.6); }
.scene-tasks.fu4 .fup-smart-go, .scene-tasks.fu4 .fup-smart-tip-go { font-size: 18px; color: rgba(255,255,255,.5); }
.scene-tasks.fu4 .ready-queue { padding: 14px 16px 0; }
.scene-tasks.fu4 .fup-sec-head { display: flex; align-items: center; gap: 8px; padding: 0 0 10px; }
.scene-tasks.fu4 .fup-sec-count { font-size: 14px; font-weight: 600; color: rgba(255,255,255,.35); background: none; }
.scene-tasks.fu4 .ready-queue-send { height: 44px; padding: 0 16px; border-radius: 99px; background: #F4F4F5; color: #0b0b12; font-weight: 800; font-size: 14px; border: 0; }

/* the all-clear sentence and the empty lane */
.scene-tasks.fu4 .aa-empty { padding: 28px 16px; color: rgba(255,255,255,.5); font-size: 16px; text-align: left; background: none; border: 0; }
.scene-tasks.fu4 .tasks-showmore { display: flex; align-items: center; justify-content: center; margin: 0 16px 10px; width: calc(100% - 32px); min-height: 52px; border-radius: 16px; background: rgba(20,20,24,.75); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); border: 0; color: rgba(255,255,255,.62); font-size: 14px; }

/* F27 · Upcoming and Parked as .sec2 rows */
.scene-tasks.fu4 .tasks-upcoming, .scene-tasks.fu4 .tasks-parked { margin-top: 10px; padding: 0 16px; }
.scene-tasks.fu4 .tasks-upcoming > .fup-sec-head, .scene-tasks.fu4 .tasks-parked > .fup-sec-head { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 0 16px; margin: 0 0 10px; border-radius: 16px; background: rgba(20,20,24,.75); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); border: 0; color: rgba(255,255,255,.62); font-size: 14px; text-align: left; }
.scene-tasks.fu4 .tasks-upcoming .fup-sec-label, .scene-tasks.fu4 .tasks-parked .fup-sec-label { flex: 1; font-size: 14px; font-weight: 400; letter-spacing: 0; text-transform: none; color: rgba(255,255,255,.62); }
.scene-tasks.fu4 .fup-sec-aside { font-size: 14px; color: rgba(255,255,255,.38); }
.scene-tasks.fu4 .tasks-quiet-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 14px; margin-bottom: 10px; border-radius: 18px; background: #111114; border: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.09); color: #F4F4F5; text-align: left; }
.scene-tasks.fu4 .tasks-quiet-row-title { font-size: 16px; color: rgba(255,255,255,.8); }
.scene-tasks.fu4 .tasks-quiet-row-meta { font-size: 14px; color: rgba(255,255,255,.46); }
.scene-tasks.fu4 .tasks-quiet-restore { height: 44px; padding: 0 14px; border-radius: 99px; font-size: 14px; font-weight: 600; color: rgba(255,255,255,.82); background: rgba(20,20,24,.75); border: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.scene-tasks.fu4 .tasks-upcoming-list, .scene-tasks.fu4 .tasks-parked-list { padding: 0; }

/* F2 · the Undo toast: glass, 10s, a Spectral line draining over 10s (DECISIONS.md round 3) */
/* R4 finish: the host is its own stacking context, so ITS z-index is the one that counts. At 999998 it sat under
   the App toast (999999), whose "Promise kept…" line then swallowed the Undo tap for its whole life. 1000000 is
   above the App toast and level with the confirm sheet's scrim, which opens later in the page and so stays on top.
   The mockup's own place, 92px up: it clears the dock (top edge 78px up at 375x812), so F-8 (e) does not apply. */
.fu4-toast-host { position: fixed; left: 0; right: 0; bottom: 0; height: 0; z-index: 1000000; }
.fu4-toast-host .toast.fu4-toast { position: fixed; left: 50%; bottom: calc(92px + env(safe-area-inset-bottom, 0px)); z-index: 1000001; transform: translateX(-50%); display: flex; align-items: center; gap: 14px; padding: 8px 8px 8px 16px; border-radius: 16px; background: rgba(27,27,32,.78); -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); font-weight: 600; font-size: 14px; color: #F4F4F5; white-space: nowrap; overflow: hidden; pointer-events: auto; }
.fu4-toast .toast-undo { height: 44px; padding: 0 14px; border-radius: 11px; background: rgba(255,255,255,.08); border: 0; font: inherit; font-weight: 800; color: #C7C0FF; cursor: pointer; }
.fu4-toast .tl { position: absolute; left: 14px; right: 14px; bottom: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #FF7676, #FDCB6E, #55EFC4, #74B9FF, #A29BFE); transform-origin: left; animation: fu4-tl 10s linear forwards; }
@keyframes fu4-tl { to { transform: scaleX(0); } }

/* the batch sheet (F7) */
.fu4-runbg { position: fixed; inset: 0; z-index: 9990; background: rgba(3,3,5,.8); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); animation: fu4-fade .35s both; }
@keyframes fu4-fade { from { opacity: 0; } }
.fu4-runs { position: fixed; left: 0; right: 0; bottom: 0; top: 28px; z-index: 9991; border-radius: 28px 28px 0 0; background: #0f0f12; box-shadow: inset 0 1px 0 rgba(255,255,255,.08); padding: 10px 16px 22px; display: flex; flex-direction: column; color: #F4F4F5; animation: fu4-sheet .55s cubic-bezier(.32,.72,0,1) both; }
@keyframes fu4-sheet { from { transform: translateY(105%); } }
.fu4-runs .grab2 { width: 40px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.22); margin: 0 auto 10px; }
.fu4-runs .run-hd { display: flex; align-items: center; gap: 12px; }
.fu4-runs .run-t { flex: 1; font-weight: 800; font-size: 18px; }
.fu4-runs .rstars { display: flex; align-items: center; margin: 16px 4px 4px; height: 22px; }
.fu4-runs .rstars i { width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.4); flex: none; transition: all .5s cubic-bezier(.2,1.4,.4,1); }
.fu4-runs .rstars b { flex: 1; height: 1px; background: rgba(255,255,255,.1); }
.fu4-runs .rstars i.lit { background: #fff; box-shadow: 0 0 0 3px var(--fu4-c), 0 0 12px 3px var(--fu4-c); }
.fu4-runs .rstars i.skip { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.16); }
.fu4-runs .rstars b.lit { background: linear-gradient(90deg, var(--fu4-c1), var(--fu4-c2)); }
.fu4-runs .blist { flex: 1; overflow-y: auto; margin: 8px -16px 0; overscroll-behavior: contain; }
.fu4-runs .bc { padding: 16px; border-bottom: 1px solid rgba(255,255,255,.06); transition: all .45s cubic-bezier(.2,.8,.2,1); max-height: 420px; overflow: hidden; }
.fu4-runs .bc-p { display: flex; gap: 12px; align-items: center; }
.fu4-runs .bc-p .t { font-size: 16px; color: rgba(255,255,255,.72); }
.fu4-runs .bc-p .t b { color: #fff; }
.fu4-runs .bc-st { margin-left: auto; font-size: 14px; font-weight: 700; color: rgba(255,255,255,.45); display: none; }
.fu4-runs .bc-a { display: flex; gap: 8px; margin-top: 12px; }
.fu4-runs .bc-a .go { flex: 1; height: 46px; border-radius: 99px; background: #F4F4F5; color: #0b0b12; font-weight: 800; font-size: 14px; border: 0; }
.fu4-runs .bc-a .sm { height: 46px; padding: 0 16px; border-radius: 99px; background: none; border: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); font-weight: 600; color: rgba(255,255,255,.75); font-size: 14px; }
.fu4-runs .bc.sent, .fu4-runs .bc.later { max-height: 72px; }
.fu4-runs .bc.sent .bc-a, .fu4-runs .bc.later .bc-a { display: none; }
.fu4-runs .bc.sent .bc-st, .fu4-runs .bc.later .bc-st { display: block; }
.fu4-runs .bc.sent .bc-st { color: #C7C0FF; }
.fu4-runs .bfoot { padding-top: 10px; }
.fu4-runs .bfoot .cta { width: 100%; min-height: 56px; border: 0; border-radius: 18px; background: #fff; color: #0b0b12; font-weight: 800; font-size: 18px; }
.fu4-bat { display: flex; align-items: center; gap: 4px; height: 44px; padding: 0 4px; font-size: 14px; font-weight: 700; color: #C7C0FF; background: none; border: 0; cursor: pointer; }
.fu4-bat svg { width: 16px; height: 16px; }
/* FU-9 (R4 finish, Fable F-2): the list label, the "Open batch" row above a group, the batch sheet's close button and
   card text. Values from Follow-ups Interactive v22 (.all-hd .eb, .eb em, .grp, .rb, .bc-p b / small). */
.fu4-allhd .eb { font-size: 14px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: rgba(255,255,255,.56); }
.fu4-allhd .eb em { font-style: normal; color: rgba(255,255,255,.35); margin-left: 4px; }
.fu4-grp { display: flex; align-items: center; justify-content: flex-end; padding: 10px 16px 0; }
/* R4-FIX-PHONE · FX-7: the mockup's group head is ONE row, label left and "Open batch ›" right
   (.grp{padding:16px 16px 4px}, a 44px line). The app drew the "Waiting on you" label and then a second
   54px row holding only "Open batch", which read as a hole in the page. Same two elements, one row. */
.scene-tasks.fu4 .tasks-lane-label:has(+ .fu4-grp) { padding: 16px 16px 4px; line-height: 44px; }
.scene-tasks.fu4 .tasks-lane-label + .fu4-grp { margin: -48px 0 4px; padding-top: 0; }
.fu4-runs .rb { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.06); border: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); color: #F4F4F5; }
.fu4-runs .rb svg { width: 16px; height: 16px; }
.fu4-runs .bc-w { min-width: 0; }
.fu4-runs .bc-p .t { display: block; font-size: 16px; }
.fu4-runs .bc-p .t b { display: inline; font-size: inherit; }
.fu4-runs .bc-p small { display: block; font-size: 14px; color: rgba(255,255,255,.46); }
.fu4-runs .bc-a .go { display: grid; place-items: center; }
.fu4-runs .bc-a .go svg { width: 20px; height: 20px; }

@media (prefers-reduced-motion: reduce) {
  .scene-tasks.fu4 *, .scene-tasks.fu4 *::before, .scene-tasks.fu4 *::after, .fu4-toast, .fu4-toast *, .fu4-runs, .fu4-runs *, .fu4-runbg { animation: none !important; transition: none !important; }
}
.fu4-vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* the screen's own rule sizes every svg here to 16px (index.html); the sky is the panel's full width */
.scene-tasks.fu4 .fu4-panel svg.psky { width: 100% !important; height: 110px !important; }
.scene-tasks.fu4 .learn-header.lt-header { padding: 16px 16px 2px !important; margin: 0 !important; }
/* the app's account button sits fixed at the top right of every tab; the header's controls stop short of it */
.scene-tasks.fu4 .fu4-hr { margin-right: 52px; }
.scene-tasks.fu4 .fu4-emb svg.er { width: 22px !important; height: 22px !important; }
/* the Undo sits above the app's own toast line (bottom 60px + its height), so a toast App raises at the same moment
   (an achievement, the check-in the completion spawned) can never cover it */

/* FOLLOWUPS-SEARCH-LABEL-1: retain the shared button tokens and touch target. */
.fu4-rb.fu4-search { width: auto; min-width: 44px; display: flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 0 var(--space-3); border-radius: var(--r-pill); font: inherit; }