/* action ai · Sharing (REDESIGN-R8-SHARING-2026-10-07).
   LIFTED from BUILD HANDOVER 2026-10-05: mockups/Sharing (35 states) (review round 4).html, built by
   src/areas/sharing/sharing.py on src/kit/kit.css (+ fx3.css E03 E04 E05 E06 E08 E11). Every value is the mockup's:
   the kit's parts (.sheet .scrim .grab .sh-hd .qb .ib .pc .field .ln .ch .seg .cta .go .sec .link .ghost .note .eb .sl
   .panel .stat .bar .tag .empty .orb .pubc .wm) and sharing.py's own CSS block, copied value for value.
   Adapted for the app only (WIRING.md §5): the kit parts are mapped onto the classes each real component already
   renders (ComposeSheet, ComposeSheetIntro, IntroComposerBody, NudgeModalBody, NoSamplesPointer, BulkFollowupSheet,
   SharesSheet, NoteLinkPage, ClaimHandoffPage, AcceptHandoffSheet, HandoffPage) so nothing is added, removed or
   reworded. EVERY rule is rooted at an R8 element carrying .sh8 (with the R1 opt-in .kx), so the shared class names
   (nl-page, nl-cta, cc-ledger, cc-lrow, join-sheet-*, modal-backdrop, modal-card, modal-overlay, capture-sheet,
   lb-pick-*, upgrade-nudge, share-prompt-head, compose-intro-preview) keep their look everywhere else.
   Custom properties are the R1 kit's (kit-tokens.css: --t1 --t2 --t3 --t4 --card --card2 --glass --kx-line
   --kx-line2 --edge --conic --mint --peri2; fx3.css: --sheet --spring --out); keyframes are R1's (fxsheet fxfade fxpop
   fxbar kx-spin) or carry the r8- prefix, so no name collides with the app's (KIT-1).
   Choice ticks (bulk rows, accept keep / drop, intro "Confirmed") are drawn from the native control's own state
   (:checked / aria-pressed), never .check.on: they pop (E11, .5s on --spring) and fire NO W01 wave (SH-11).
   Reduced motion: no animation (fx3.css already stops .kx .sheet; the rest is stopped at the end of this file). */

/* ── kit parts, rooted at .sh8 (kit.css values) ─────────────────────────────────────────────── */
.sh8{--sh8-bg:#0f0f12}
.sh8,.sh8 button,.sh8 input,.sh8 textarea{font-family:'Hanken Grotesk',system-ui,sans-serif}
.sh8 .fr{font-family:'Fraunces',serif;font-style:italic;font-weight:600;letter-spacing:-.02em}
.sh8 .grab{width:40px;height:5px;border-radius:3px;background:rgba(255,255,255,.22);margin:0 auto 12px;flex:none}
.sh8 .eb{font-size:14px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--t3)}
.sh8 .ib{width:44px;height:44px;min-width:44px;border-radius:50%;display:grid;place-items:center;flex:none;padding:0;border:0;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);color:var(--t1);font-size:16px}
.sh8 .ib svg{width:20px;height:20px}
.sh8 .ib::after{content:none}
.sh8 .qb{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;padding:0;border:0;color:var(--t2);background:var(--glass);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.sh8 .qb svg{width:18px;height:18px}
.sh8 .pc{position:relative;display:flex;align-items:center;gap:12px;padding:14px;border-radius:18px;background:var(--card);box-shadow:inset 0 0 0 1px var(--kx-line);border:0;text-align:left;width:100%;color:var(--t1)}
.sh8 .pc+.pc{margin-top:10px}
.sh8 .pc .m{flex:1;min-width:0}
.sh8 .t1{font-size:16px;font-weight:600;color:var(--t1)}
.sh8 .s{font-size:16px;color:var(--t3)}
.sh8 .center,.sh8 .c{text-align:center}
.sh8 .note{margin:8px 2px 0}
.sh8 .panel{position:relative;border-radius:22px;overflow:hidden;background:rgba(20,20,24,.55);box-shadow:inset 0 0 0 1px var(--kx-line);padding:16px;border:0}
.sh8 .cta{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;background:#fff;color:#0b0b12;font-weight:800;font-size:17px;border-radius:18px;min-height:56px;padding:0 18px;position:relative;isolation:isolate;border:0;box-shadow:0 0 0 2px var(--kx-bg),0 18px 40px -16px rgba(162,155,254,.6);text-decoration:none;cursor:pointer}
.sh8 .cta::after{content:"";position:absolute;inset:-3px;border-radius:21px;padding:2.5px;background:var(--conic);-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}
.sh8 .cta[disabled],.sh8 .cta:disabled{opacity:.5}
.sh8 .go{flex:none;min-width:76px;height:44px;padding:0 16px;border-radius:99px;background:#F4F4F5;color:#0b0b12;font-weight:800;font-size:15px;position:relative;isolation:isolate;border:0;cursor:pointer}
.sh8 .go::before{content:"";position:absolute;inset:-4px;border-radius:99px;padding:1.5px;background:var(--conic);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:kx-spin 12s linear infinite;opacity:.75;pointer-events:none}
.sh8 .go[disabled],.sh8 .go:disabled{opacity:.5}
.sh8 .sec{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:52px;padding:0 16px;border-radius:16px;background:var(--glass);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);border:0;font-size:16px;font-weight:600;color:var(--t2);cursor:pointer}
.sh8 .sec+.sec,.sh8 .cta+.sec{margin-top:12px}
.sh8 .ghost{min-height:44px;padding:0 12px;font-size:16px;font-weight:600;color:var(--t3);background:none;border:0}
.sh8 .link{color:var(--peri2);font-weight:700;font-size:16px;min-height:44px;display:inline-flex;align-items:center;gap:4px;background:none;border:0;padding:0 2px;cursor:pointer;align-self:flex-start}
.sh8 .ln{flex:none;height:44px;padding:0 16px;border-radius:99px;font-size:14px;font-weight:600;color:var(--t2);background:transparent;border:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);display:inline-flex;align-items:center;gap:6px;text-decoration:none;cursor:pointer}
.sh8 .ln.on{background:#F4F4F5;color:#0b0b0d;box-shadow:none}
.sh8 .seg{display:flex;padding:3px;border-radius:14px;background:#121215;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.sh8 .seg button{flex:1;height:44px;padding:0 12px;border-radius:11px;font-size:14px;font-weight:700;color:var(--t3);background:transparent;border:0}
.sh8 .seg button.on{background:#26262b;color:#fff}
.sh8 .tag{display:inline-flex;align-items:center;height:28px;padding:0 10px;border-radius:99px;font-size:14px;font-weight:700;color:var(--peri2);background:rgba(162,155,254,.14);border:0}
.sh8 .field{display:flex;align-items:center;gap:10px;min-height:52px;padding:0 14px;border-radius:16px;background:var(--glass);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);border:0;transition:box-shadow .2s var(--out)}
.sh8 .field:focus-within{box-shadow:inset 0 0 0 1px rgba(162,155,254,.55),0 0 24px -8px rgba(162,155,254,.55)}
.sh8 .field input,.sh8 .field textarea{flex:1;min-width:0;min-height:44px;color:#fff;font-size:16px;background:none;border:0;outline:0;box-shadow:none;margin:0;padding:0;width:auto}
.sh8 .field input::placeholder,.sh8 .field textarea::placeholder{color:var(--t4)}
.sh8 .field textarea{padding:14px 0;resize:none;line-height:1.5;font-family:inherit}
.sh8 .field>svg{width:20px;height:20px;flex:none;color:var(--t3)}
.sh8 .sl{display:flex;align-items:center;gap:12px;margin:20px 0 10px;font-size:14px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--t3)}
.sh8 .sl::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.14),transparent)}
.sh8 .empty{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:48px 24px;color:var(--t3);font-size:16px}
.sh8 .PA{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:15px;color:#fff;flex:none;position:relative}
.sh8 .wm{font-weight:700;font-size:19px;letter-spacing:-.01em}

/* sheet header (sharing.py) */
.sh8 .sh-hd{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.sh8 .sh-hd .m{flex:1;min-width:0}
.sh8 .sh-hd h2,.sh8 .sh-hd .sh8-h2{font-size:22px;line-height:1.15;font-weight:800;letter-spacing:-.02em;color:var(--t1);margin:0}
.sh8 .sh-hd .fr{font-weight:600}
.sh8 .sh-hd .sub{font-size:16px;color:var(--t3);margin-top:2px}
.sh8 .sh-hd .qb{pointer-events:none}
.sh8 .avs{display:flex;align-items:center;flex:none}

/* the kit scrim (a parent overlay, or ComposeSheet's sibling layer) and the kit sheet inside it */
.sh8.sh8-scrim,.sh8-scrim.scrim{position:fixed;inset:0;background:rgba(3,3,5,.75);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);animation:fxfade .35s var(--out) both;transition:background .4s,opacity .4s}
.sh8.sh8-scrim{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-end;padding:0 0 var(--aa-kbh,0px);margin:0}
.sh8.sh8-scrim>.sheet{position:relative;left:auto;right:auto;bottom:auto;top:auto;transform:none;width:100%;max-width:none;max-height:92%;margin:0;overflow:auto;border:0;border-radius:28px 28px 0 0;background:var(--sh8-bg);box-shadow:inset 0 1px 0 rgba(255,255,255,.08);padding:10px 16px 28px;color:var(--t1);text-align:left;animation:fxsheet .55s var(--sheet) both}
.sh8 .sheet p{font-size:16px;line-height:1.5;color:var(--t2)}
.sh8.sh8-scrim>.sheet.fxdrag{animation:none;transition:none}
.sh8.sh8-scrim>.sheet.fxback{transition:transform .5s var(--sheet)}
.sh8-scrim.h5out{background:transparent!important;-webkit-backdrop-filter:none;backdrop-filter:none}
.scrim.sh8-scrim.h5out{opacity:0}

/* ── ComposeSheet · recap / follow-up (states compose-recap, -followup, -picker, -confirm, -ask, -nochannel) ── */
/* the ComposeSheet root keeps no scrim of its own: the layer drawn before it lets every tap through
   (pointer-events:none), so App's outside-tap dismissal still reaches the page behind */
.scrim.sh8-scrim{position:fixed;z-index:7499;pointer-events:none}
.share-prompt.compose-sheet.sh8.kx:not(.compose-intro){position:fixed;z-index:7500;left:0;right:0;bottom:var(--aa-kbh,0px);top:auto;transform:none;width:auto;max-width:none;max-height:92%;overflow:auto;margin:0;border:0;border-radius:28px 28px 0 0;background:var(--sh8-bg);box-shadow:inset 0 1px 0 rgba(255,255,255,.08);padding:10px 16px 24px;color:var(--t1);font-size:16px;line-height:1.45;animation:fxsheet .55s var(--sheet) both}
.share-prompt.compose-sheet.sh8.kx.fxdrag{animation:none;transition:none}
.share-prompt.compose-sheet.sh8.kx.fxback{transition:transform .5s var(--sheet)}
.share-prompt.compose-sheet.sh8.kx.collapsed{padding:10px 16px 16px;cursor:pointer}
.share-prompt.compose-sheet.sh8.kx.collapsed .grab{display:none}
:is(.share-prompt.sh8.kx,.compose-intro-scrim.sh8) .share-prompt-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
:is(.share-prompt.sh8.kx,.compose-intro-scrim.sh8) .share-prompt-icon{width:44px;height:44px;background:var(--glass);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);color:var(--t2);display:grid;place-items:center;pointer-events:none}
:is(.share-prompt.sh8.kx,.compose-intro-scrim.sh8) .share-prompt-icon svg{width:18px;height:18px}
:is(.share-prompt.sh8.kx,.compose-intro-scrim.sh8) .share-prompt-text{flex:1;min-width:0}
:is(.share-prompt.sh8.kx,.compose-intro-scrim.sh8) .share-prompt-title{font-size:22px;line-height:1.15;font-weight:800;letter-spacing:-.02em;color:var(--t1)}
:is(.share-prompt.sh8.kx,.compose-intro-scrim.sh8) .share-prompt-title.fr{font-weight:600}
.share-prompt.sh8.kx.collapsed .share-prompt-title{font-size:16px}
:is(.share-prompt.sh8.kx,.compose-intro-scrim.sh8) .share-prompt-sub{font-size:16px;color:var(--t3);margin-top:2px}
:is(.share-prompt.sh8.kx,.compose-intro-scrim.sh8) .share-prompt-skip{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);color:var(--t1);display:grid;place-items:center}
:is(.share-prompt.sh8.kx,.compose-intro-scrim.sh8) .share-prompt-skip svg{width:20px;height:20px}
:is(.share-prompt.sh8.kx,.compose-intro-scrim.sh8) .share-prompt-skip::after{content:none}
/* attachments: .att rows of .pc, a 44px remove, "Swap or add a second" as .link */
:is(.share-prompt.sh8.kx,.compose-intro-scrim.sh8) .compose-attach{display:flex;flex-direction:column;gap:8px;margin:0}
:is(.share-prompt.sh8.kx,.compose-intro-scrim.sh8) .att-row{padding:6px 6px 6px 14px;margin:0}
:is(.share-prompt.sh8.kx,.compose-intro-scrim.sh8) .att-row .aic{color:var(--t2);display:grid;flex:none}
:is(.share-prompt.sh8.kx,.compose-intro-scrim.sh8) .att-row .aic svg{width:20px;height:20px}
:is(.share-prompt.sh8.kx,.compose-intro-scrim.sh8) .tapr{min-height:44px;display:flex;align-items:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}
:is(.share-prompt.sh8.kx,.compose-intro-scrim.sh8) .att-row .qb{color:var(--t3)}
/* the link picker and LbDisambiguate's ask: rows as .pc 52px (LbDisambiguate is not edited; styled here only) */
:is(.share-prompt.sh8.kx,.compose-intro-scrim.sh8) .compose-picker,:is(.share-prompt.sh8.kx,.compose-intro-scrim.sh8) .lb-ask{margin:8px 0 4px;border:0;border-radius:0;overflow:visible;background:none;box-shadow:none;padding:0;position:static}
:is(.share-prompt.sh8.kx,.compose-intro-scrim.sh8) .compose-picker .pc,:is(.share-prompt.sh8.kx,.compose-intro-scrim.sh8) .lb-ask .lb-pick-item{min-height:52px}
:is(.share-prompt.sh8.kx,.compose-intro-scrim.sh8) .lb-ask-title{margin:6px 2px 8px;font-size:14px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--t3)}
:is(.share-prompt.sh8.kx,.compose-intro-scrim.sh8) .lb-ask .lb-pick-item{position:relative;display:flex;align-items:center;gap:12px;padding:14px;border-radius:18px;background:var(--card);box-shadow:inset 0 0 0 1px var(--kx-line);border:0;text-align:left;width:100%;color:var(--t1)}
:is(.share-prompt.sh8.kx,.compose-intro-scrim.sh8) .lb-ask .lb-pick-item+.lb-pick-item{margin-top:10px}
:is(.share-prompt.sh8.kx,.compose-intro-scrim.sh8) .lb-ask .lb-pick-name{flex:1;min-width:0;font-size:16px;font-weight:600;color:var(--t1)}
:is(.share-prompt.sh8.kx,.compose-intro-scrim.sh8) .lb-ask .lb-pick-meta{font-size:16px;color:var(--t3)}
/* the draft: .field.ta, 16px (the wrapper keeps its own class string: spec 83-followups-actionable-pins reads it) */
:is(.share-prompt.sh8.kx,.compose-intro-scrim.sh8) .share-recap{margin:0}
:is(.share-prompt.sh8.kx,.compose-intro-scrim.sh8) .share-recap-hairline{display:flex;align-items:flex-start;gap:10px;min-height:52px;margin-top:10px;padding:0 14px;border-radius:16px;background:var(--glass);border:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);transition:box-shadow .2s var(--out)}
:is(.share-prompt.sh8.kx,.compose-intro-scrim.sh8) .share-recap-hairline:focus-within{box-shadow:inset 0 0 0 1px rgba(162,155,254,.55),0 0 24px -8px rgba(162,155,254,.55)}
:is(.share-prompt.sh8.kx,.compose-intro-scrim.sh8) .share-recap-hairline .share-recap-text{flex:1;width:100%;font-size:16px;line-height:1.5;background:none;border:0;border-radius:0;padding:14px 0;min-height:44px;color:#fff;resize:none;outline:0}
:is(.share-prompt.sh8.kx,.compose-intro-scrim.sh8) .share-recap-hairline .share-recap-text:focus{border:0}
/* NoSamplesPointer as the mockup's .nos row (the component is not edited) */
.sh8.kx .compose-nosamples-row{display:flex;align-items:center;gap:10px;margin-top:8px}
.sh8.kx .compose-nosamples-note{flex:1;font-size:16px;color:var(--t3);line-height:1.45}
.sh8.kx .compose-nosamples{color:var(--peri2);font-weight:700;font-size:16px;min-height:44px;display:inline-flex;align-items:center;background:none;border:0;padding:0 2px;flex:none}
/* the locked footer: 16px under a top hairline (its own inline style is the app's; the look is set here) */
:is(.share-prompt.sh8.kx,.compose-intro-scrim.sh8) [aria-label="Locked footer (always sent)"]{margin-top:8px!important;padding:10px 12px 0!important;border-top:1px solid var(--kx-line2)!important;font-size:16px!important;color:var(--t3)!important;white-space:pre-wrap!important;line-height:1.45!important}
/* channel chips: .ln.ch, flex 1, unavailable at .35 */
:is(.share-prompt.sh8.kx,.compose-intro-scrim.sh8) .share-prompt-channels{display:flex;gap:8px;margin-top:14px}
:is(.share-prompt.sh8.kx,.compose-intro-scrim.sh8) .share-channel{flex:1;flex-direction:row;justify-content:center;padding:0 8px;height:44px;min-height:44px;border-radius:99px;border:0;background:transparent;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);font-size:14px;font-weight:600;color:var(--t2);gap:6px;letter-spacing:0}
:is(.share-prompt.sh8.kx,.compose-intro-scrim.sh8) .share-channel.unavailable,:is(.share-prompt.sh8.kx,.compose-intro-scrim.sh8) .share-channel:disabled{opacity:.35}
:is(.share-prompt.sh8.kx,.compose-intro-scrim.sh8) .share-channel-icon{width:20px;height:20px;display:grid;place-items:center}
:is(.share-prompt.sh8.kx,.compose-intro-scrim.sh8) .share-channel-icon svg{width:20px;height:20px}
:is(.share-prompt.sh8.kx,.compose-intro-scrim.sh8) .share-channel-label{font-size:14px}
/* actions: Schedule as .sec beside the one .cta (their class strings are the app's: run-share-v2, run-compose-copy-control and
   check-claim-link-removed slice the row by them, so the kit look is set on those classes here) */
:is(.share-prompt.sh8.kx,.compose-intro-scrim.sh8) .draft-sheet-actions{display:flex;gap:10px;margin-top:14px!important;align-items:center}
:is(.share-prompt.sh8.kx,.compose-intro-scrim.sh8) .draft-sheet-btn-primary{display:flex;align-items:center;justify-content:center;gap:10px;flex:1;width:auto;background:#fff;color:#0b0b12;font-weight:800;font-size:17px;border-radius:18px;min-height:56px;padding:0 18px;position:relative;isolation:isolate;border:0;box-shadow:0 0 0 2px var(--kx-bg),0 18px 40px -16px rgba(162,155,254,.6);transition:scale var(--fx-fast) var(--out)}
:is(.share-prompt.sh8.kx,.compose-intro-scrim.sh8) .draft-sheet-btn-primary::after{content:"";position:absolute;inset:-3px;border-radius:21px;padding:2.5px;background:var(--conic);-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}
:is(.share-prompt.sh8.kx,.compose-intro-scrim.sh8) .draft-sheet-btn-primary:active{scale:.98;box-shadow:0 0 0 2px var(--kx-bg),0 18px 54px -10px rgba(162,155,254,.9)}
:is(.share-prompt.sh8.kx,.compose-intro-scrim.sh8) .draft-sheet-btn-ghost{display:flex;align-items:center;justify-content:center;gap:8px;width:auto;flex:0 0 auto;margin:0;min-height:52px;padding:0 18px;border-radius:16px;background:var(--glass);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);border:0;font-size:16px;font-weight:600;color:var(--t2);transition:scale var(--fx-fast) var(--out)}
:is(.share-prompt.sh8.kx,.compose-intro-scrim.sh8) .draft-sheet-btn-ghost:active{scale:.98}
:is(.share-prompt.sh8.kx,.compose-intro-scrim.sh8) .share-prompt-status,:is(.share-prompt.sh8.kx,.compose-intro-scrim.sh8) .share-prompt-reassure{font-size:16px;color:var(--t3);margin:8px 2px 0;line-height:1.45}
:is(.share-prompt.sh8.kx,.compose-intro-scrim.sh8) .share-prompt-done{display:block;margin:8px auto 0;min-height:44px;padding:0 12px;font-size:16px;font-weight:600;color:var(--t3);background:none;border:0;text-decoration:none}

/* ── ComposeSheetIntro + IntroComposerBody + NudgeModalBody (intro-ask, intro-joint, intro-nudge) ── */
.compose-intro-scrim.sh8{z-index:9000}
.compose-intro-scrim.sh8>.share-prompt.compose-intro{padding:10px 16px 24px}
.compose-intro .lead{font-size:16px;color:var(--t2);margin:0 0 12px}
.compose-intro .stg{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:12px}
.compose-intro .stg .arr{color:var(--t3);font-size:14px}
.compose-intro .party{margin-top:10px;display:flex;flex-direction:column;gap:8px;padding:14px}
.compose-intro .party .eb{margin-bottom:2px}
.compose-intro .stack{display:flex;flex-direction:column;gap:8px}
.compose-intro .ta{align-items:flex-start;margin-top:10px}
.compose-intro .ta textarea{width:100%;font-size:16px;line-height:1.5}
.compose-intro .party .ta{margin-top:0}
.compose-intro .party textarea{padding:12px 0}
.compose-intro .prow{display:flex;align-items:center;gap:8px;margin:10px 0 4px;flex-wrap:wrap}
.compose-intro .conf{margin-left:auto;display:flex;align-items:center;gap:2px;font-size:14px;color:var(--t2);min-height:44px;position:relative;cursor:pointer}
.compose-intro .quote{font-size:16px;color:var(--t3);font-style:italic;margin-bottom:10px}
.compose-intro .prev{margin:10px 0 14px;font-size:16px;color:var(--t2);white-space:pre-wrap;line-height:1.5;max-height:220px;overflow:auto;font-family:inherit}
.compose-intro .two2{display:flex;gap:10px;margin-top:12px}
.compose-intro .two2 .sec{margin:0}

/* ── the choice tick (SH-11): the kit's round check drawn from the NATIVE control's state ──
   44px tap area, 24px circle, mint fill + tick when chosen (kit.css .check values); the native checkbox stays in
   the label, on top, transparent, so its label, semantics and keyboard are unchanged. Pops (E11) and nothing else. */
.sh8 .r8chk{width:44px;height:44px;flex:none;display:grid;place-items:center;position:relative}
.sh8 .r8chk>input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;z-index:1}
.sh8 .r8chk>i{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35);color:#07070a;transition:background .25s var(--out),box-shadow .25s var(--out)}
.sh8 .r8chk>i svg{width:14px;height:14px;opacity:0}
.sh8 .r8chk>input:checked+i{background:var(--mint);box-shadow:0 0 12px rgba(85,239,196,.5);animation:fxpop .5s var(--spring)}
.sh8 .r8chk>input:checked+i svg{opacity:1}
.sh8 .r8chk>input:focus-visible+i{outline:2px solid var(--peri2);outline-offset:3px}

/* ── BulkFollowupSheet "Plan my week" (bulk, bulk-custom, bulk-empty) ── */
.modal-backdrop.sh8{z-index:50}
.sh8 .bulk-sheet .sh-hd{margin-bottom:0}
.sh8 .bulk-sheet .bulk-help{margin:6px 0 14px}
.sh8 .bulk-sheet .bulk-date{margin-top:10px}
.sh8 .bulk-sheet .blist{margin-top:14px}
.sh8 .bulk-sheet .bl{cursor:pointer;padding:14px 14px 14px 4px}
.sh8 .bulk-sheet .bl .t{font-size:16px;font-weight:700;color:#fff}
.sh8 .bulk-sheet .bl .s{font-size:16px;color:var(--t3);margin-top:1px}
.sh8 .bulk-sheet .acts{display:flex;gap:10px;margin-top:14px;align-items:center}
.sh8 .bulk-sheet .acts .cta{flex:1;width:auto}
.sh8 .bulk-sheet .acts .sec{width:auto;flex:0 0 112px;margin:0}

/* ── SharesSheet "Your Reach" (shares, shares-zero, shares-loading) ── */
.modal-overlay.sh8.sh8-scrim{z-index:var(--z-sheet)}
.sh8 .shares-sheet{padding:10px 16px 28px}
.sh8 .shares-sheet .shares-header{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.sh8 .shares-sheet .shares-title{flex:1;min-width:0;font-family:'Fraunces',serif;font-style:italic;font-weight:600;letter-spacing:-.02em;font-size:22px;line-height:1.15;color:var(--t1)}
.sh8 .shares-sheet .shares-close{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;flex:none;padding:0;border:0;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);color:var(--t1);font-size:16px}
.sh8 .shares-sheet .shares-close svg{width:20px;height:20px}
.sh8 .shares-sheet .shares-loading{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:48px 24px;color:var(--t3);font-size:16px}
.sh8 .shares-sheet .shares-loading::before{content:"";width:72px;height:72px;border-radius:50%;margin:0 auto 6px;background:radial-gradient(circle at 50% 40%,rgba(162,155,254,.25),rgba(7,7,10,.9) 70%);box-shadow:0 0 0 3px rgba(162,155,254,.45),0 0 28px rgba(162,155,254,.25)}
.sh8 .shares-sheet .shares-tier-row{display:flex;align-items:center;gap:10px;margin:0}
.sh8 .shares-sheet .shares-tier-pill{display:inline-flex;align-items:center;height:28px;padding:0 10px;border-radius:99px;font-size:14px;font-weight:700;color:var(--peri2);background:rgba(162,155,254,.14);border:0;letter-spacing:0;text-transform:none}
.sh8 .shares-sheet .shares-tier-source{font-size:16px;color:var(--t3)}
.sh8 .shares-sheet .shares-section{margin:0;padding:0;border:0}
.sh8 .shares-sheet .shares-section-label{display:flex;align-items:center;gap:12px;margin:20px 0 10px;font-size:14px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--t3)}
.sh8 .shares-sheet .shares-section-label::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.14),transparent)}
.sh8 .shares-sheet .shares-human-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sh8 .shares-sheet .shares-human-stat{padding:12px;border-radius:14px;background:var(--card2);box-shadow:inset 0 0 0 1px var(--kx-line);font-size:14px;color:var(--t3)}
.sh8 .shares-sheet .shares-human-stat b{display:block;font-size:22px;font-weight:800;letter-spacing:-.02em;color:var(--t1)}
.sh8 .shares-sheet .shares-vault-row{position:relative;display:flex;align-items:center;gap:14px;padding:14px;border-radius:18px;background:var(--card);box-shadow:inset 0 0 0 1px var(--kx-line)}
.sh8 .shares-sheet .shares-vault-count{font-size:34px;font-weight:800;color:#fff;min-width:36px;text-align:center;line-height:1.45}
.sh8 .shares-sheet .shares-vault-meta{flex:1;min-width:0;font-size:16px;color:var(--t3)}
.sh8 .shares-sheet .shares-apply-row{display:block;margin-top:10px}
.sh8 .shares-sheet .shares-apply-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:52px;padding:0 16px;border-radius:16px;background:var(--glass);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);border:0;font-size:16px;font-weight:600;color:var(--t2)}
.sh8 .shares-sheet .shares-apply-btn+.shares-apply-btn{margin-top:12px}
.sh8 .shares-sheet .shares-pending-note{font-size:16px;color:var(--t3);margin:8px 2px 0;font-style:normal}
.sh8 .shares-sheet .shares-month-row{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px;border-radius:18px;background:var(--card);box-shadow:inset 0 0 0 1px var(--kx-line);font-size:16px;color:var(--t2)}
.sh8 .shares-sheet .shares-month-row span+span{color:var(--t3);font-size:14px}
.sh8 .shares-sheet .reach-bar-track+.shares-month-row span+span{font-size:16px}
.sh8 .shares-sheet .shares-month-row b{color:#fff}
.sh8 .shares-sheet .reach-bar-track{height:6px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden;border:0}
.sh8 .shares-sheet .reach-bar-fill{display:block;height:100%;border-radius:inherit;background:var(--edge);transform-origin:left;animation:fxbar .9s .12s var(--out) both}
/* the Next Spark numbers under the bar are the mockup's .kv2 line, not a card */
.sh8 .shares-sheet .reach-bar-track+.shares-month-row{padding:0;background:none;box-shadow:none;border-radius:0;margin-top:8px!important}
.sh8 .shares-sheet .shares-invite-blurb{font-size:16px;color:var(--t3);line-height:1.45}
.sh8 .shares-sheet .shares-invite-row{display:flex;align-items:center;gap:10px;min-height:52px;padding:0 4px 0 14px;border-radius:16px;background:var(--glass);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);border:0;margin-top:12px}
.sh8 .shares-sheet .shares-invite-url{flex:1;min-width:0;font-size:14px;color:var(--t2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:inherit;background:none;padding:0;border:0}
.sh8 .shares-sheet .shares-copy-btn{flex:none;height:44px;padding:0 16px;border-radius:99px;font-size:14px;font-weight:600;color:var(--t2);background:transparent;border:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.sh8 .shares-sheet .shares-qr{display:grid;place-items:center;margin:16px auto 0;width:176px;height:176px;border-radius:18px;background:#fff;padding:0}
.sh8 .shares-sheet .shares-invite-loading{font-size:16px;color:var(--t3);margin:10px 2px 0}
.sh8 .shares-sheet .shares-footer{margin-top:18px;font-size:16px;color:var(--t3);line-height:1.5;border:0;padding:0}

/* ── AcceptHandoffSheet (accept, accept-busy) ── */
.sh8 .hx-sheet{gap:0}
.sh8 .hx-sheet .hx-name{font-family:'Fraunces',serif;font-style:italic;font-weight:600;letter-spacing:-.02em;font-size:22px;line-height:1.15;color:var(--t1)}
.sh8 .hx-sheet .hx-sub{font-size:16px;line-height:1.5;color:var(--t2)}
.sh8 .hx-sheet .hx-list{margin-top:14px;display:block}
.sh8 .hx-sheet .hx-row{position:relative;display:flex;align-items:center;gap:12px;padding:14px;border-radius:18px;background:var(--card);box-shadow:inset 0 0 0 1px var(--kx-line);border:0}
.sh8 .hx-sheet .hx-row+.hx-row{margin-top:10px}
.sh8 .hx-sheet .hx-row.is-off{opacity:.55}
.sh8 .hx-sheet .hx-tick{width:44px;height:44px;flex:none;display:grid;place-items:center;padding:0;border:0;background:none}
.sh8 .hx-sheet .hx-box{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35);color:#07070a;background:transparent;border:0;transition:background .25s var(--out),box-shadow .25s var(--out)}
.sh8 .hx-sheet .hx-box svg{width:14px;height:14px;opacity:0}
.sh8 .hx-sheet .hx-tick[aria-pressed="true"] .hx-box{background:var(--mint);box-shadow:0 0 12px rgba(85,239,196,.5);animation:fxpop .5s var(--spring)}
.sh8 .hx-sheet .hx-tick[aria-pressed="true"] .hx-box svg{opacity:1}
.sh8 .hx-sheet .hx-item{flex:1;min-width:0}
.sh8 .hx-sheet .hx-owner{font-weight:700;font-size:14px;color:var(--t3)}
.sh8 .hx-sheet .hx-text{width:100%;min-height:44px;font-size:16px;color:#fff;background:none;border:0;padding:0;outline:0}
.sh8 .hx-sheet .hx-actions{display:flex;gap:10px;margin-top:14px;align-items:center}
.sh8 .hx-sheet .join-sheet-cancel{display:flex;align-items:center;justify-content:center;flex:0 0 120px;width:auto;min-height:52px;margin:0;padding:0 16px;border-radius:16px;background:var(--glass);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);border:0;font-size:16px;font-weight:600;color:var(--t2)}
.sh8 .hx-sheet .join-sheet-go{display:flex;align-items:center;justify-content:center;flex:1;width:auto;background:#fff;color:#0b0b12;font-weight:800;font-size:17px;border-radius:18px;min-height:56px;padding:0 18px;position:relative;isolation:isolate;border:0;box-shadow:0 0 0 2px var(--kx-bg),0 18px 40px -16px rgba(162,155,254,.6)}
.sh8 .hx-sheet .join-sheet-go::after{content:"";position:absolute;inset:-3px;border-radius:21px;padding:2.5px;background:var(--conic);-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}
.sh8 .hx-sheet .join-sheet-go:disabled,.sh8 .hx-sheet .join-sheet-cancel:disabled{opacity:.5}

/* ── the recipient pages: NoteLinkPage, ClaimHandoffPage, HandoffPage (note-*, claim-*, handoff-*) ──
   the night page, one centred .pubc panel (radius 22), the Wordmark, a 30px Fraunces title, 16px lines, no dock */
.sh8.sh8-pub{position:relative;min-height:100dvh;display:block;padding:40px 16px 40px;background:var(--kx-bg);color:var(--t1);isolation:isolate}
.sh8.sh8-pub::before,.sh8.sh8-pub::after{content:"";position:absolute;left:0;right:0;top:0;height:460px;z-index:-1;pointer-events:none;background-repeat:repeat;-webkit-mask:linear-gradient(#000 55%,transparent);mask:linear-gradient(#000 55%,transparent)}
.sh8.sh8-pub::before{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}
.sh8.sh8-pub::after{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}
.sh8.sh8-pub .nl-card,.sh8.sh8-pub .handoff-card{width:auto;max-width:none;margin:0;border:0;border-radius:22px;background:rgba(20,20,24,.55);box-shadow:inset 0 0 0 1px var(--kx-line);padding:28px 20px;text-align:left;color:var(--t1);opacity:0;transform:translateY(14px);filter:blur(8px);animation:rise .7s var(--ease) forwards}
.sh8.sh8-pub .nl-wordmark,.sh8.sh8-pub .handoff-brand{text-align:center;margin:0 0 22px;display:block}
.sh8.sh8-pub .nl-eyebrow{display:block;text-align:center;font-size:14px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--t3);margin:0}
.sh8.sh8-pub .nl-title,.sh8.sh8-pub .handoff-name{font-family:'Fraunces',serif;font-style:italic;font-weight:600;letter-spacing:-.02em;font-size:30px;line-height:1.05;margin:8px 0 4px;text-align:center;color:var(--t1)}
.sh8.sh8-pub .nl-sub,.sh8.sh8-pub .handoff-sub{font-size:16px;color:var(--t3);text-align:center;margin:0}
.sh8.sh8-pub .nl-discussed{font-size:16px;color:var(--t2);margin-top:10px;text-align:center;background:none;border:0;padding:0;font-style:normal}
.sh8.sh8-pub .cc-ledger{margin-top:20px;padding:0;border:0;background:none}
.sh8.sh8-pub .cc-lrow{position:relative;display:flex;align-items:center;gap:14px;padding:14px;border-radius:18px;background:var(--card);box-shadow:inset 0 0 0 1px var(--kx-line);border:0;margin:0}
.sh8.sh8-pub .cc-lrow+.cc-lrow{margin-top:10px}
.sh8.sh8-pub .cc-ld{width:10px;height:10px;border-radius:50%;background:#fff;flex:none;display:inline-block;--c:#A29BFE;box-shadow:0 0 0 3px var(--c),0 0 12px 3px var(--c)}
.sh8.sh8-pub .cc-ld.you{--c:#55EFC4}
.sh8.sh8-pub .cc-ld.them{--c:#A29BFE}
.sh8.sh8-pub .nl-ltext{flex:1;min-width:0;font-size:16px;color:var(--t1)}
.sh8.sh8-pub .hx-owner{color:var(--t3);font-weight:700;margin-right:6px}
.sh8.sh8-pub .nl-cta,.sh8.sh8-pub .handoff-cta{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;margin-top:22px;background:#fff;color:#0b0b12;font-weight:800;font-size:17px;border-radius:18px;min-height:56px;padding:0 18px;position:relative;isolation:isolate;border:0;box-shadow:0 0 0 2px var(--kx-bg),0 18px 40px -16px rgba(162,155,254,.6);text-decoration:none;cursor:pointer}
.sh8.sh8-pub .nl-cta::after,.sh8.sh8-pub .handoff-cta::after{content:"";position:absolute;inset:-3px;border-radius:21px;padding:2.5px;background:var(--conic);-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}
.sh8.sh8-pub .handoff-cta:disabled{opacity:.5}
.sh8.sh8-pub .nl-foot,.sh8.sh8-pub .handoff-foot{margin-top:18px;font-size:16px;color:var(--t3);text-align:center;line-height:1.45}
.sh8.sh8-pub .handoff-foot a{display:inline-flex;align-items:center;min-height:44px;color:var(--peri2);font-weight:700;font-size:14px;text-decoration:none}
.sh8.sh8-pub .nl-loading{display:grid;place-items:center;margin:40px auto}
.sh8.sh8-pub .nl-loading .chroma-orb{width:72px!important;height:72px!important;border-radius:50%}
.sh8.sh8-pub .handoff-loading{font-size:16px;color:var(--t3);text-align:center;padding:52px 20px}
.sh8.sh8-pub .handoff-links{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:16px}
.sh8.sh8-pub .handoff-link{flex:none;height:44px;padding:0 16px;border-radius:99px;font-size:14px;font-weight:600;color:var(--t2);background:transparent;border:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);display:inline-flex;align-items:center;gap:6px;text-decoration:none}
.sh8.sh8-pub .handoff-qr{display:grid;place-items:center;margin:20px auto;width:176px;height:176px;border-radius:18px;background:#fff;padding:0}

/* ── H5 · the success card (sharing.py CSS block, value for value) ── */
.sh8 .h5card{display:flex;flex-direction:column;align-items:center;gap:18px;padding:22px 12px 26px;text-align:center}
.sh8 .h5card p{font-size:17px;font-weight:600;color:#F4F4F5;max-width:300px;line-height:1.45;margin:0}
.sh8 .h5tick{width:72px;height:72px;border-radius:50%;background:#55EFC4;color:#07070a;display:grid;place-items:center;box-shadow:0 0 28px rgba(85,239,196,.5);scale:.6;opacity:0}
.sh8 .h5tick i{display:grid;place-items:center}
.sh8 .h5card .h5tick svg{width:34px;height:34px} /* R8-LEFTOVERS: one class more than index.html svg:not([width]) (1em), which tied and won in Plan my week */
.sh8 .h5tick.pop{animation:r8-h5pop .55s cubic-bezier(.34,1.56,.64,1) forwards}
@keyframes r8-h5pop{0%{scale:.6;opacity:0}60%{scale:1.15;opacity:1}100%{scale:1;opacity:1}}
/* while the card shows, the sheet's own content steps aside (it is never removed: React owns it) */
.sh8.h5on>:not(.h5card):not(.grab),.sh8 .h5on>:not(.h5card):not(.grab){display:none!important}

@media (prefers-reduced-motion:reduce){
.sh8-scrim,.sh8.sh8-scrim>.sheet,.share-prompt.compose-sheet.sh8.kx,.sh8 .draft-sheet-btn-primary::after,.sh8 .cta::after,.sh8 .go::before,.sh8 .r8chk>input:checked+i,.sh8 .hx-sheet .hx-tick[aria-pressed="true"] .hx-box,.sh8 .shares-sheet .reach-bar-fill,.sh8 .hx-sheet .join-sheet-go::after,.sh8.sh8-pub .nl-cta::after,.sh8.sh8-pub .handoff-cta::after{animation:none!important}
.sh8.sh8-pub .nl-card,.sh8.sh8-pub .handoff-card{animation:none;opacity:1;transform:none;filter:none}
.sh8 .h5tick{scale:1;opacity:1}}
/* the accept sheet's grip wears the grab look but is not a drag handle: a drag there would hide the sheet with no
   decision taken (Accept and Decline are the only ways out today) */
.sh8 .hx-sheet .join-sheet-grip{width:40px;height:5px;border-radius:3px;background:rgba(255,255,255,.22);margin:0 auto 12px;flex:none}
/* the ledger is the mockup's stack of .pc rows: the app's own spine line and gap are not drawn inside the panel */
.sh8.sh8-pub .cc-ledger{display:block;gap:0;position:static}
.sh8.sh8-pub .cc-ledger::before,.sh8.sh8-pub .cc-ledger::after{content:none;display:none}
.sh8.sh8-pub .nl-foot,.sh8.sh8-pub .handoff-foot{letter-spacing:0}
.sh8.sh8-pub .handoff-brand .aai-wordmark,.sh8.sh8-pub .nl-wordmark .aai-wordmark{font-size:19px!important}
/* the handoff page: the app's own column of links, its 160px padded QR box and its dimmed brand / foot give way to the
   mockup's row of .ln pills, a 176px white tile holding the 160px code, and full-strength lines */
.sh8.sh8-pub .handoff-links{flex-direction:row}
.sh8.sh8-pub .handoff-link{width:auto}
.sh8.sh8-pub .handoff-brand,.sh8.sh8-pub .handoff-foot,.sh8.sh8-pub .handoff-loading{opacity:1}
.sh8.sh8-pub .handoff-qr,.sh8 .shares-sheet .shares-qr{padding:8px;box-sizing:border-box;overflow:hidden}
.sh8.sh8-pub .handoff-qr svg,.sh8 .shares-sheet .shares-qr svg{width:160px;height:160px;display:block}
.sh8 .qb svg,.sh8 .ib svg{flex:none}
:is(.share-prompt.sh8.kx,.compose-intro-scrim.sh8) .att-row .qb svg{width:18px!important;height:18px!important}