/* Partner kit — one-pagers and postcards for nonprofits (2026-10-09).
 *
 * Owner: "send them as link to pages that can be saved as PDF like the
 * briefings"; Letter by default with A4 as an option; postcards 6 × 4 in.
 * Each piece is one or two fixed-size sheets. On screen a toolbar (never
 * printed) saves the PDF, switches Letter / A4 and adds the organization's
 * name to a postcard (kit.js). Colours and type follow the website. */

:root {
  --ink: #0F172A;
  --body: #475569;
  --muted: #64748B;
  --faint: #94A3B8;
  --line: #E2E8F0;
  --indigo: #4F46E5;
  --indigo-dk: #3730A3;
  --indigo-lt: #EEF2FF;
  --lavender: #EDE9FE;
  --amber: #F59E0B;
  --amber-dk: #B45309;
  --amber-lt: #FFFBEB;
  --cream: #FFFBF5;
  --orange: #F97316;
  --emerald: #10B981;
  --font: 'Plus Jakarta Sans', system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
body { font-family: var(--font); color: var(--ink); background: #E2E8F0; }
img { display: block; max-width: 100%; }

/* ── Sheets ───────────────────────────────────────────────────────────── */
@page letter { size: 8.5in 11in; margin: 0; }
@page a4 { size: 210mm 297mm; margin: 0; }
@page card { size: 6in 4in; margin: 0; }

.sheet { position: relative; overflow: hidden; background: #FFFFFF; width: var(--w); height: var(--h); }
.sheet.letter { --w: 8.5in; --h: 11in; page: letter; }
.sheet.a4 { --w: 210mm; --h: 297mm; page: a4; }
.sheet.card { --w: 6in; --h: 4in; page: card; }

@media screen {
  body { padding: 0 16px 40px; }
  .sheet-wrap { display: flex; justify-content: center; margin: 0 auto 28px; overflow: hidden; }
  /* flex-shrink 0: the sheet keeps its paper size and kit.js scales it down to fit. */
  .sheet { flex-shrink: 0; box-shadow: 0 10px 40px rgba(15, 23, 42, 0.18); border-radius: 2px; transform-origin: top center; }
}
@media print {
  body { background: #FFFFFF; padding: 0; }
  .toolbar, .screen-only { display: none !important; }
  .sheet-wrap { height: auto !important; margin: 0; display: block; }
  .sheet { transform: none !important; break-after: page; }
  .sheet:last-child { break-after: auto; }
  /* Chrome's PDF flattens soft shadows into solid blocks (owner's PDF,
     2026-10-22: lavender rectangles behind the drawing and the phone). */
  .sheet, .sheet * { box-shadow: none !important; }
  /* The companion pages' gradient-clipped words print with a hairline around
     them: solid indigo on paper (only there: the postcard's words are yellow). */
  .cp-hero h1 em { background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; color: #4F46E5 !important; -webkit-text-fill-color: #4F46E5 !important; }
}

/* ── Toolbar (screen only) ────────────────────────────────────────────── */
.toolbar {
  position: sticky; top: 0; z-index: 10; margin: 0 -16px 24px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
  padding: 12px 20px; background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid var(--line); box-shadow: 0 4px 18px rgba(15, 23, 42, 0.06);
  font-size: 14px;
}
.toolbar a.back { color: var(--indigo); font-weight: 700; text-decoration: none; }
.toolbar .title { font-weight: 800; color: var(--ink); margin-right: auto; }
.toolbar .seg { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.toolbar .seg button { border: 0; background: #FFFFFF; padding: 7px 14px; font: 700 13px var(--font); color: var(--muted); cursor: pointer; }
.toolbar .seg button[aria-pressed="true"] { background: var(--indigo); color: #FFFFFF; }
/* Who the kit is for: a verified partner's name (kit.js), else "Generic version". */
.toolbar .kit-for { font-weight: 700; color: var(--muted); font-size: 13px; }
.toolbar .kit-for.on { color: var(--indigo); background: var(--indigo-lt); padding: 6px 12px; border-radius: 999px; }
.toolbar .save {
  border: 0; border-radius: 999px; background: var(--indigo); color: #FFFFFF; padding: 9px 18px;
  font: 800 14px var(--font); cursor: pointer;
}
.toolbar .hint { flex-basis: 100%; font-size: 12px; color: var(--muted); }
/* On a phone the toolbar is tall: it scrolls away with the page. Its links and
   buttons are 44 px tall there, a finger's size (2026-10-18: 18–36 px). */
@media (max-width: 720px) {
  .toolbar { position: static; }
  .toolbar a.back { display: inline-flex; align-items: center; min-height: 44px; }
  .toolbar .seg button, .toolbar .save { min-height: 44px; }
  .toolbar .hint { font-size: 13px; }
}

/* ── Shared pieces ────────────────────────────────────────────────────── */
.logo { height: 0.4in; width: auto; }
.pill {
  display: inline-block; padding: 0.05in 0.14in; border-radius: 999px;
  font-size: 7.5pt; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--indigo); background: var(--indigo-lt);
}
.qr { width: 100%; height: auto; }
.badges { display: flex; gap: 0.08in; align-items: center; }
.badges img { height: 0.3in; width: auto; }

/* ── One-pager ────────────────────────────────────────────────────────── */
.op {
  display: flex; flex-direction: column; gap: 0.135in;
  padding: 0.4in 0.5in 0.32in;
  background: linear-gradient(180deg, var(--cream) 0%, #FFFFFF 38%);
}
.op::before {
  content: ''; position: absolute; top: -2.2in; right: -2.2in; width: 5.2in; height: 5.2in; border-radius: 50%;
  background: radial-gradient(circle, rgba(237, 233, 254, 0.95) 0%, rgba(237, 233, 254, 0) 70%);
  pointer-events: none;
}
.op > * { position: relative; }
.op-top { display: flex; align-items: center; justify-content: space-between; }

.op-hero { display: grid; grid-template-columns: 1.42fr 1fr; gap: 0.26in; align-items: center; }
.op-hero h1 { font-size: 23pt; line-height: 1.08; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); }
.op-hero h1 em { font-style: normal; color: var(--indigo); }
.op-hero p { margin-top: 0.1in; font-size: 10pt; line-height: 1.5; color: var(--body); font-weight: 500; }
.op-hero .free { margin-top: 0.09in; display: inline-flex; align-items: center; gap: 0.06in; font-size: 9pt; font-weight: 800; color: var(--amber-dk); }
.op-hero .free::before { content: ''; width: 0.09in; height: 0.09in; border-radius: 50%; background: var(--amber); }
.op-hero .art { border-radius: 0.2in; overflow: hidden; height: 1.85in; box-shadow: 0 0.06in 0.2in rgba(79, 70, 229, 0.14); }
.op-hero .art img { width: 100%; height: 100%; object-fit: cover; }

.op h2 { font-size: 12.5pt; font-weight: 800; color: var(--ink); letter-spacing: -0.01em; }
.op .kicker { font-size: 7.5pt; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--indigo); margin-bottom: 0.05in; }

.op-ways .cards { margin-top: 0.09in; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.16in; }
.op-ways .card { background: #FFFFFF; border: 1px solid var(--line); border-radius: 0.16in; overflow: hidden; display: flex; flex-direction: column; }
.op-ways .card img { width: 100%; height: 0.86in; object-fit: cover; }
.op-ways .card .in { padding: 0.1in 0.13in 0.12in; }
.op-ways .card h3 { font-size: 10pt; font-weight: 800; color: var(--ink); margin-bottom: 0.04in; }
.op-ways .card p { font-size: 8pt; line-height: 1.42; color: var(--body); font-weight: 500; }
.op-ways .card p strong { color: var(--ink); font-weight: 700; }
.op-note { font-size: 8pt; line-height: 1.45; color: var(--muted); font-weight: 500; }
/* The donation-pools one-pager's card on when the money arrives is the longest
   (each donation as it is made, the payout at close; 2026-10-20): smaller card
   photos and section gaps keep it on one Letter page. */
.op.op-dense { gap: 0.1in; }
.op.op-dense .op-ways .card img { height: 0.62in; }
.op-note strong { color: var(--ink); font-weight: 700; }

.op-cols { display: grid; grid-template-columns: 1.05fr 1fr; gap: 0.22in; }
.op-box { background: #FFFFFF; border: 1px solid var(--line); border-radius: 0.16in; padding: 0.13in 0.16in; }
.op-box.tint { background: var(--indigo-lt); border-color: transparent; }
.steps { list-style: none; margin-top: 0.07in; display: flex; flex-direction: column; gap: 0.07in; counter-reset: step; }
.steps li { position: relative; padding-left: 0.3in; font-size: 8pt; line-height: 1.4; color: var(--body); font-weight: 500; counter-increment: step; }
.steps li::before {
  content: counter(step); position: absolute; left: 0; top: 0; width: 0.22in; height: 0.22in; border-radius: 50%;
  background: var(--indigo); color: #FFFFFF; font-size: 8pt; font-weight: 800; display: flex; align-items: center; justify-content: center;
}
.steps li strong, .facts li strong { color: var(--ink); font-weight: 800; }
.facts { list-style: none; margin-top: 0.07in; display: flex; flex-direction: column; gap: 0.05in; }
.facts li { position: relative; padding-left: 0.18in; font-size: 7.9pt; line-height: 1.4; color: var(--body); font-weight: 500; }
.facts li::before { content: ''; position: absolute; left: 0.02in; top: 0.055in; width: 0.075in; height: 0.075in; border-radius: 50%; background: var(--indigo); }
.chips { display: flex; flex-wrap: wrap; gap: 0.06in; margin-top: 0.09in; }
.chips span { font-size: 7.3pt; font-weight: 700; color: var(--indigo-dk); background: #FFFFFF; border: 1px solid #C7D2FE; border-radius: 999px; padding: 0.04in 0.11in; }

.op-quote { display: flex; gap: 0.16in; align-items: flex-start; padding: 0.1in 0.18in; border-left: 0.05in solid var(--amber); background: var(--amber-lt); border-radius: 0 0.14in 0.14in 0; }
.op-quote blockquote { font-size: 9.5pt; line-height: 1.45; font-weight: 700; color: var(--ink); }
.op-quote cite { display: block; margin-top: 0.05in; font-style: normal; font-size: 7.8pt; font-weight: 600; color: var(--muted); }

.op-foot { margin-top: auto; display: grid; grid-template-columns: 0.82in 1fr auto; gap: 0.2in; align-items: center; padding-top: 0.12in; border-top: 1px solid var(--line); }
.op-foot .scan { font-size: 9.5pt; font-weight: 800; color: var(--ink); }
.op-foot .scan span { display: block; margin-top: 0.03in; font-size: 11pt; color: var(--indigo); }
.op-foot .scan small { display: block; margin-top: 0.06in; font-size: 7.5pt; font-weight: 600; color: var(--muted); }
.op-foot .contact { text-align: right; font-size: 7.6pt; line-height: 1.55; color: var(--muted); font-weight: 600; }
.op-foot .contact strong { color: var(--ink); font-weight: 800; font-size: 8.4pt; }
.op-foot .contact .badges { justify-content: flex-end; margin-bottom: 0.07in; }


/* ── Postcard (6 × 4 in) ──────────────────────────────────────────────── */
.pc-front { color: #FFFFFF; }
.pc-front .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pc-front::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0) 32%, rgba(15, 23, 42, 0.78) 100%);
}
.pc-front .brand {
  position: absolute; z-index: 2; top: 0.18in; left: 0.18in; background: #FFFFFF; border-radius: 999px;
  padding: 0.05in 0.12in; display: flex; align-items: center;
}
.pc-front .brand img { height: 0.28in; width: auto; }
.pc-front .words { position: absolute; z-index: 2; left: 0.26in; right: 0.26in; bottom: 0.24in; }
.pc-front h1 { font-size: 21pt; line-height: 1.08; font-weight: 800; letter-spacing: -0.02em; text-shadow: 0 2px 10px rgba(15, 23, 42, 0.35); }
.pc-front h1 em { font-style: normal; color: #FCD34D; }
.pc-front .for { margin-top: 0.07in; font-size: 9pt; font-weight: 700; color: rgba(255, 255, 255, 0.9); }

.pc-back { display: grid; grid-template-columns: 1fr 1.68in; grid-template-rows: minmax(0, 1fr); gap: 0.2in; padding: 0.26in 0.26in 0.2in; background: linear-gradient(180deg, var(--cream) 0%, #FFFFFF 60%); }
.pc-back h2 { font-size: 14.5pt; line-height: 1.16; font-weight: 800; color: var(--ink); letter-spacing: -0.01em; }
.pc-back h2 .org { color: var(--indigo); }
.pc-back ul { list-style: none; margin-top: 0.13in; display: flex; flex-direction: column; gap: 0.1in; }
.pc-back li { position: relative; padding-left: 0.18in; font-size: 8.8pt; line-height: 1.42; color: var(--body); font-weight: 500; }
.pc-back li::before { content: ''; position: absolute; left: 0.01in; top: 0.055in; width: 0.075in; height: 0.075in; border-radius: 50%; background: var(--indigo); }
.pc-back li strong { color: var(--ink); font-weight: 800; }
.pc-back .main { display: flex; flex-direction: column; min-height: 0; }
/* Two reassurances on every back (owner, 2026-10-10): payments through Stripe,
   the organizer never holds the money; amounts private (the Privacy Shield —
   never its numbers). Light: two lines in a tinted box. */
.pc-back .trust { margin-top: auto; display: grid; gap: 0.06in; background: var(--indigo-lt); border-radius: 0.1in; padding: 0.09in 0.11in; }
.pc-back .trust div { display: flex; gap: 0.08in; align-items: flex-start; font-size: 7.3pt; line-height: 1.36; color: var(--body); font-weight: 500; }
.pc-back .trust svg { flex: none; width: 0.17in; height: 0.17in; margin-top: 0.01in; }
.pc-back .trust b { color: var(--ink); font-weight: 800; }
.pc-back .stripe { height: 0.22in; width: auto; }
.pc-back .main ul { margin-bottom: 0.12in; }
.pc-back .quote { text-align: center; font-size: 6pt; line-height: 1.4; color: var(--muted); font-weight: 600; }
.pc-back .quote b { color: var(--ink); font-weight: 700; }
/* Even space between the QR group, the store badges and the address (owner,
   2026-10-22: the column looked unbalanced without the quote). */
.pc-back .side { display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; text-align: center; gap: 0.06in; border-left: 1px dashed var(--line); padding-left: 0.2in; }
.pc-back .side .qr { width: 1in; }
.pc-back .side .cta { font-size: 8.6pt; font-weight: 800; color: var(--ink); line-height: 1.25; max-width: 100%; overflow-wrap: anywhere; }
/* A long partner name or page address wraps inside the column (2026-10-21:
   "Choose French American School of Princeton" ran past the card's edge). */
.pc-back .side .url { font-size: 7.2pt; font-weight: 800; color: var(--indigo); max-width: 100%; overflow-wrap: anywhere; line-height: 1.3; }
.pc-back .side .badges img { height: 0.22in; }
.pc-back .side .grp { display: flex; flex-direction: column; align-items: center; gap: 0.05in; width: 100%; min-width: 0; }
.pc-back .side .addr { font-size: 5.6pt; line-height: 1.45; color: var(--faint); font-weight: 600; }

/* ── The kit's index page (screen) ────────────────────────────────────── */
.kit-index { max-width: 980px; margin: 0 auto; }
.kit-index h1 { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; }
.kit-index > p { margin-top: 8px; color: var(--body); font-size: 16px; line-height: 1.55; font-weight: 500; max-width: 720px; }
/* The box spans the cards below (all three, or two without donation pools). */
.kit-index > p.kit-who { margin-top: 14px; padding: 12px 16px; border-radius: 14px; background: #FFFFFF; border: 1px solid var(--line); font-size: 14px; max-width: none; }
.kit-index > p.kit-who.on { background: var(--indigo-lt); border-color: transparent; color: var(--ink); }
.kit-index > p.kit-who a { color: var(--indigo); font-weight: 700; }
.kit-index > p[hidden] { display: none; }
.kit-groups { margin-top: 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.kit-group { background: #FFFFFF; border-radius: 22px; overflow: hidden; box-shadow: 0 8px 28px rgba(79, 70, 229, 0.1); display: flex; flex-direction: column; }
.kit-group img { height: 150px; width: 100%; object-fit: cover; }
.kit-group .in { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.kit-group h2 { font-size: 18px; font-weight: 800; }
.kit-group p { font-size: 14px; line-height: 1.5; color: var(--body); font-weight: 500; }
/* The two document tiles sit at the bottom of every card, so they line up
   across the cards whatever the length of the text above; each tile is the
   same two lines (the piece, then its size and audience). */
.kit-group a {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 11px 14px; border: 1px solid var(--line); border-radius: 14px; text-decoration: none;
  color: var(--ink); font-size: 14px;
}
/* The links follow the text, at the top of the tile (owner, 2026-10-22). */
.kit-group p + a { margin-top: 4px; }
/* The two kinds of donation pools, each its own shade: campaigns first,
   then in someone's honor (owner, 2026-10-22). */
.kit-group a.kit-campaign { background: #EEF2FF; border-color: #E0E7FF; }
.kit-group a.kit-honor { background: #FFFBEB; border-color: #FDE68A; }
.kit-group a.kit-campaign:hover, .kit-group a.kit-honor:hover { border-color: var(--indigo); }
.kit-group a b { font-weight: 800; }
.kit-group a span { font-weight: 600; color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.kit-group a:hover { border-color: var(--indigo); }

/* What a partner receives (2026-10-15): two cards like the kit's, a preview of
   a sample e-mail (kit/samples/) where the others have a photo. kit.js puts
   the sample in the iframe (srcdoc) and scales the 640 px e-mail to the card;
   the box keeps the proportions of the e-mail's top 720 px, so the preview
   never widens the page. inert + pointer-events: a picture, not a page to use;
   the links open the e-mail. */
.kit-receive { margin-top: 40px; }
.kit-receive h2 { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; }
.kit-samples { margin-top: 16px; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.kit-group h3 { font-size: 18px; font-weight: 800; }
.sample-preview {
  position: relative; overflow: hidden; aspect-ratio: 640 / 720; background: var(--lavender);
  border-bottom: 1px solid var(--line);
}
.sample-preview iframe {
  position: absolute; top: 0; left: 0; width: 640px; height: 720px; border: 0;
  transform-origin: 0 0; pointer-events: none; visibility: hidden;
}
.sample-preview.ready iframe { visibility: visible; }
/* The e-mail goes on below: it fades out. */
.sample-preview::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 22%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 92%);
}
/* A link tile's second line may wrap on a narrow phone. */
.kit-sample a span { white-space: normal; }

/* A verified partner's postcard: the QR code to its own page, drawn by kit.js
   in place of the /get-the-app file (2026-10-18). */
.qr-drawn { display: block; }
.qr-drawn svg { display: block; width: 100%; height: auto; }

/* Ready-to-send messages (2026-10-18): three cards, the text as it will be sent,
   a Copy button per part. On a phone the cards stack; buttons are 44 px tall. */
.kit-messages { margin-top: 40px; }
.kit-messages [hidden] { display: none !important; }
.kit-messages-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.kit-messages h2 { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; }
.msg-lang { display: inline-flex; gap: 3px; padding: 3px; background: var(--indigo-lt); border-radius: 999px; }
.msg-lang button { border: 0; background: transparent; min-height: 44px; padding: 0 16px; border-radius: 999px; font: 700 14px var(--font); color: var(--body); cursor: pointer; }
.msg-lang button[aria-pressed="true"] { background: #FFFFFF; color: var(--indigo); box-shadow: 0 2px 8px rgba(79, 70, 229, 0.16); }
.kit-messages-lead { margin-top: 10px; font-size: 15px; line-height: 1.55; color: var(--body); font-weight: 500; max-width: 760px; }
.kit-messages-lead strong { color: var(--ink); font-weight: 800; }
/* The messages stack, one per row, each folding (owner, 2026-10-21): open, a
   message gets the full width. */
.kit-msg-list { margin-top: 16px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.kit-msg > summary, .kit-sample > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.kit-msg > summary::-webkit-details-marker, .kit-sample > summary::-webkit-details-marker { display: none; }
.kit-msg > summary::after, .kit-sample > summary::after { content: ""; flex: none; width: 9px; height: 9px; border-right: 2.5px solid var(--indigo); border-bottom: 2.5px solid var(--indigo); transform: rotate(45deg); margin: -4px 4px 0 0; transition: transform .15s; }
.kit-msg[open] > summary::after, .kit-sample[open] > summary::after { transform: rotate(-135deg); margin-top: 4px; }
.kit-msg:not([open]) { gap: 0; }
.kit-sample > summary { padding: 18px 20px; }
.kit-sample[open] > summary { padding-bottom: 12px; }
.sample-head { display: grid; gap: 4px; }
.sample-head h3 { font-size: 18px; font-weight: 800; color: var(--ink); }
.sample-when { font-size: 14px; line-height: 1.45; color: var(--indigo); font-weight: 700; }
.kit-samples { align-items: start; }
.kit-msg { background: #FFFFFF; border-radius: 22px; padding: 18px 20px 20px; box-shadow: 0 8px 28px rgba(79, 70, 229, 0.1); display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.kit-msg h3 { font-size: 18px; font-weight: 800; }
/* The subject stands out: a labelled line of its own (owner, 2026-10-21: "we
   can barely see it"). */
.kit-msg-subject { font-size: 15px; line-height: 1.5; color: var(--ink); background: var(--indigo-lt); border-radius: 12px; padding: 10px 12px; }
.kit-msg-subject > span { display: inline-block; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #FFFFFF; background: var(--indigo); border-radius: 6px; padding: 2px 8px; margin-right: 8px; vertical-align: 1px; }
.kit-msg-subject b { color: var(--ink); font-weight: 800; }
.kit-msg-text {
  white-space: pre-line; overflow-wrap: anywhere; font-size: 15px; line-height: 1.55; color: var(--ink); font-weight: 500;
  background: var(--cream); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px;
}
.kit-msg mark { background: #FEF3C7; color: var(--amber-dk); font-weight: 700; border-radius: 4px; padding: 0 2px; }
.kit-msg .msg-link { color: var(--indigo); font-weight: 600; }
.kit-msg-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.kit-msg-actions button {
  border: 0; border-radius: 999px; background: var(--indigo); color: #FFFFFF; min-height: 44px; padding: 0 18px;
  font: 800 14px var(--font); cursor: pointer;
}
.kit-msg-actions button:hover { background: var(--indigo-dk); }
.kit-msg-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }