/* SiKick buttons: ONE look for every button on the personal site (2026-11-03). Loaded LAST on every page (app-flow,
   app-board, rec, join, welcome, start, login, download, guide), so the families below all speak the Found card's
   "✓ Accept" (.fl-acc, flowboard.css): a pill, 1px border, Space Grotesk 600.
     primary   lime tint pill: border --kb-ln, fill --kb-bg, text --kb-lm; hover / focus = solid lime, dark text
     secondary hairline pill, tx2 text; hover = a subtle fill
     ghost     the same pill with no border (Not today, ⋯, Show all)
     danger    the same pill in a red tint (never a solid red block; only a confirm's final destructive button is solid)
     icon      round ghost (×, ‹ ›, ⋯ in a header)
   New markup can use the classes directly: .skb + .skb-p / .skb-s / .skb-g / .skb-d / .skb-i, sizes .skb-sm (26) and
   .skb-lg (40, 32 by default). The older family classes (.fl-btn, .btn, .ki-b, .wl-btn, …) are mapped onto the same
   skins here, so their markup stays as it is. The skins only paint (radius, border, fill, colour, font face and weight);
   the height and padding stay with each page's own rule, the context sizes (26 Found, 32 rows and sheets, 40 the Now
   card and the phone). #skb inside :is() is a selector that never matches: it lifts the skins over the families'
   older paint rules (hover, .on, body.paper …) without !important, so this file wins wherever it is linked. */
body {
  --kb-hi: #c6ff3d; --kb-on: #0b0d07;                                     /* the solid hover: lime, dark text, both modes */
  --kb-lm: #c6ff3d; --kb-ln: rgba(198,255,61,.32); --kb-bg: rgba(198,255,61,.06);
  --kb-tx: #f3f5f8; --kb-tx2: #a3a8b0; --kb-tx3: #6a7079;
  --kb-hl: rgba(255,255,255,.12); --kb-hl2: rgba(255,255,255,.22); --kb-fill: rgba(255,255,255,.06);
  --kb-dn: #ff6b78; --kb-dn-ln: rgba(255,77,94,.38); --kb-dn-bg: rgba(255,77,94,.07); --kb-dn-bg2: rgba(255,77,94,.14);
  --kb-ff: 'Space Grotesk', 'Inter', system-ui, sans-serif;
}
body.light {                                                                /* light mode (the toast follows the page's mode, 2026-11-03) */
  --kb-lm: #4a8a00; --kb-ln: rgba(74,138,0,.36); --kb-bg: rgba(198,255,61,.16);
  --kb-tx: #101317; --kb-tx2: #4e545d; --kb-tx3: #8b919a;
  --kb-hl: rgba(16,19,23,.14); --kb-hl2: rgba(16,19,23,.28); --kb-fill: rgba(16,19,23,.05);
  --kb-dn: #d0283c; --kb-dn-ln: rgba(208,40,60,.34); --kb-dn-bg: rgba(208,40,60,.05); --kb-dn-bg2: rgba(208,40,60,.11);
}
body.paper { --kb-hi: #c5ec5a; --kb-on: #1d2405; }
/* pages that follow the system theme (no server-set mode, e.g. the join page): <body class="sk-sys">. Opt-in, because a
   dark /app page carries no class at all, and a bare media query would turn a chosen Dark light on a light-mode OS.
   An explicit choice still wins: body.dark / html[data-theme="dark"] stay dark, html[data-theme="light"] goes light. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) body.sk-sys:not(.dark) {
    --kb-lm: #4a8a00; --kb-ln: rgba(74,138,0,.36); --kb-bg: rgba(198,255,61,.16);
    --kb-tx: #101317; --kb-tx2: #4e545d; --kb-tx3: #8b919a;
    --kb-hl: rgba(16,19,23,.14); --kb-hl2: rgba(16,19,23,.28); --kb-fill: rgba(16,19,23,.05);
    --kb-dn: #d0283c; --kb-dn-ln: rgba(208,40,60,.34); --kb-dn-bg: rgba(208,40,60,.05); --kb-dn-bg2: rgba(208,40,60,.11);
  }
}
:root[data-theme="light"] body.sk-sys:not(.dark) {
  --kb-lm: #4a8a00; --kb-ln: rgba(74,138,0,.36); --kb-bg: rgba(198,255,61,.16);
  --kb-tx: #101317; --kb-tx2: #4e545d; --kb-tx3: #8b919a;
  --kb-hl: rgba(16,19,23,.14); --kb-hl2: rgba(16,19,23,.28); --kb-fill: rgba(16,19,23,.05);
  --kb-dn: #d0283c; --kb-dn-ln: rgba(208,40,60,.34); --kb-dn-bg: rgba(208,40,60,.05); --kb-dn-bg2: rgba(208,40,60,.11);
}

/* ---------- the new classes (geometry included) ---------- */
.skb { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 14px; font-size: 12.5px; white-space: nowrap; cursor: pointer; text-decoration: none; }
.skb.skb-sm { height: 26px; padding: 0 11px; font-size: 12px; }
.skb.skb-lg { height: 40px; padding: 0 16px; font-size: 13.5px; }
.skb.skb-i { width: 32px; padding: 0; } .skb.skb-i.skb-sm { width: 26px; } .skb.skb-i.skb-lg { width: 40px; }

/* ---------- every skin: the pill, the face ---------- */
:is(.skb, .fl-acc, .fl-btn, .fl-ab, .fl-sc, .fl-tal, .fl-up, .btn, .clp .cb, .tm-c, .tm-btn, .tms-zb, .fw-ab, .fw-sw button, .fm-shell .fw-seg button,
    .nf-b, .skc-b, .ki-b, .ki-fmb, .jn-b, .wl-btn, .wl-chips button, .wl-seg button, .fm-btn, .fm-sc, .fm-tal, .fm-cu, .fm-add-go, .fr-btn, .fr-toast button, .bd-toast button,
    .sk-dcf-a button, .ft-ft button, .tr-b button, button.bd-mc, label.bd-mc, .tchip, .rec-page .who-chip, #skb) {
  border-radius: 999px; border-width: 1px; border-style: solid; font-family: var(--kb-ff); font-weight: 600; letter-spacing: 0; text-transform: none;
  box-shadow: none; filter: none; transition: background-color .15s ease, border-color .15s ease, color .15s ease, opacity .15s ease;
}

/* primary: the Found card's Accept */
:is(.skb-p, .fl-acc, .fl-btn.pri, .fl-sc.is-pri, .btn.pri, .clp .cb.pri, .tm-c.tm-go, .tm-btn, .tms-zb.is-go, .fw-ab.is-pri, .nf-b.is-pri, .skc-b.pri,
    .ki-b.pri, .jn-b.pri, .wl-btn.is-go, .fm-btn:not(.ghost), .fm-sc.is-pri, .fm-add-go, .fr-toast button, .bd-toast button, .ft-ft .ft-nx, .tr-b .tr-nx, #skb) {
  border-color: var(--kb-ln); background: var(--kb-bg); color: var(--kb-lm);
}
:is(.skb-p, .fl-acc, .fl-btn.pri, .fl-sc.is-pri, .btn.pri, .clp .cb.pri, .tm-c.tm-go, .tm-btn, .tms-zb.is-go, .fw-ab.is-pri, .nf-b.is-pri, .skc-b.pri,
    .ki-b.pri, .jn-b.pri, .wl-btn.is-go, .fm-btn:not(.ghost), .fm-sc.is-pri, .fm-add-go, .fr-toast button, .bd-toast button, .ft-ft .ft-nx, .tr-b .tr-nx, #skb):is(:hover, :focus-visible):not(:disabled, [aria-disabled="true"]) {
  border-color: transparent; background: var(--kb-hi); color: var(--kb-on); outline: 0;
}
:is(.fl-sc.is-pri, .fm-sc.is-pri, #skb) em { color: inherit; opacity: .8; }

/* secondary: a hairline pill */
:is(.skb-s, .fl-btn:not(.pri, .ghost), .fl-sc:not(.is-pri, .is-bad), .fl-tal, .fl-up, .fl-eodrun .fl-ab, .fr-retry, .fr-la .fl-ab, .btn:not(.pri), .clp .cb:not(.pri, .ghost, .danger),
    .tm-c:not(.tm-go, .is-bad), .tms-zb:not(.is-go), .fw-ab:not(.is-pri), .nf-b:not(.is-pri), .skc-b:not(.pri), .ki-b.ghost, .ki-b:not(.pri, .ghost, .rec, .stop), .ki-fmb,
    .jn-b:not(.pri, .stop), .wl-btn:not(.is-go), .wl-chips button, .wl-seg button, .fm-sc:not(.is-pri, .is-bad), .sk-dcf-x, .ft-ft .ft-bk, .tr-b button:not(.tr-nx),
    button.bd-mc, label.bd-mc, .tchip, .rec-page .who-chip, .fr-btn:not(.ghost, .danger), .fm-btn.ghost:not(.is-bad), .fm-tal, .fm-cu, #skb) {
  border-color: var(--kb-hl); background: transparent; color: var(--kb-tx2);
}
/* ghost: no hairline */
:is(.skb-g, .fl-btn.ghost, .fl-ab:not(.fl-eodrun .fl-ab, .fr-retry, .fr-la .fl-ab), .clp .cb.ghost, .fr-btn.ghost, .ft-ft .ft-skip,
    .fw-sw button, .fm-shell .fw-seg button, #skb) {
  border-color: transparent; background: transparent; color: var(--kb-tx2);
}
:is(.fl-ab:not(.fr-retry, .fr-la .fl-ab), #skb) { color: var(--kb-tx3); }                                /* Found's quiet ⋯ / Later keep their tx3 */
:is(.skb-s, .skb-g, .fl-btn:not(.pri), .fl-sc:not(.is-pri, .is-bad), .fl-tal, .fl-up, .fl-ab, .btn:not(.pri), .clp .cb:not(.pri, .danger), .tm-c:not(.tm-go, .is-bad),
    .tms-zb:not(.is-go), .fw-ab:not(.is-pri), .nf-b:not(.is-pri), .skc-b:not(.pri), .ki-b:not(.pri, .rec, .stop), .ki-fmb:not(.is-rec), .jn-b:not(.pri, .stop),
    .wl-btn:not(.is-go), .wl-chips button, .wl-seg button, .fm-btn.ghost:not(.is-bad), .fm-sc:not(.is-pri, .is-bad), .fm-tal, .fm-cu, .fr-btn:not(.danger), .sk-dcf-x, .ft-ft .ft-bk, .ft-ft .ft-skip,
    .tr-b button:not(.tr-nx), button.bd-mc, label.bd-mc, .tchip, .rec-page .who-chip, .fw-sw button, .fm-shell .fw-seg button, #skb):is(:hover, :focus-visible, [aria-expanded="true"]):not(:disabled, [aria-disabled="true"]) {
  background: var(--kb-fill); color: var(--kb-tx); outline: 0;
}
:is(.skb-s, .fl-btn:not(.pri, .ghost), .fl-sc:not(.is-pri, .is-bad), .fl-tal, .fl-up, .btn:not(.pri), .clp .cb:not(.pri, .ghost, .danger), .tm-c:not(.tm-go, .is-bad),
    .tms-zb:not(.is-go), .fw-ab:not(.is-pri), .nf-b:not(.is-pri), .skc-b:not(.pri), .ki-b:not(.pri, .rec, .stop), .ki-fmb:not(.is-rec), .jn-b:not(.pri, .stop),
    .wl-btn:not(.is-go), .wl-chips button, .wl-seg button, .fm-sc:not(.is-pri, .is-bad), .sk-dcf-x, .ft-ft .ft-bk, .tr-b button:not(.tr-nx), button.bd-mc, label.bd-mc,
    .tchip, .rec-page .who-chip, .fm-btn.ghost:not(.is-bad), .fr-btn:not(.ghost, .danger), .fm-tal, .fm-cu, #skb):is(:hover, :focus-visible, [aria-expanded="true"]):not(:disabled, [aria-disabled="true"]) { border-color: var(--kb-hl2); }
/* selected / on (a chip that is chosen, a pressed toggle, the open tab): the primary tint, not a solid block */
:is(.skb-s, .skb-g, .fl-btn:not(.pri), .fl-sc:not(.is-pri, .is-bad), .fl-tal, .fl-ab, .btn:not(.pri), .tm-c:not(.tm-go, .is-bad), .tms-zb, .fw-ab, .nf-b, .skc-b, .ki-b,
    .wl-btn:not(.is-go), .wl-chips button, .wl-seg button, .fm-sc, .fm-tal, .fm-cu, button.bd-mc, label.bd-mc, .tchip, .rec-page .who-chip, .fw-sw button, .fm-shell .fw-seg button, #skb):is(.on, .is-on, [aria-pressed="true"], [aria-checked="true"], [aria-selected="true"]) {
  border-color: var(--kb-ln); background: var(--kb-bg); color: var(--kb-lm);
}

/* danger: a red tint pill */
:is(.skb-d, .fl-sc.is-bad, .clp .cb.danger, .fr-btn.danger, .fm-btn.ghost.is-bad, .fm-sc.is-bad, .btn.rec-danger, .ki-b.stop, .ki-b.rec, .ki-fmb.is-rec, .jn-b.stop, .tm-c.is-bad, .nf-b[data-tr="purge"], #skb) {
  border-color: var(--kb-dn-ln); background: var(--kb-dn-bg); color: var(--kb-dn);
}
:is(.skb-d, .fl-sc.is-bad, .clp .cb.danger, .fr-btn.danger, .fm-btn.ghost.is-bad, .fm-sc.is-bad, .btn.rec-danger, .ki-b.stop, .ki-b.rec, .ki-fmb.is-rec, .jn-b.stop, .tm-c.is-bad, .nf-b[data-tr="purge"], #skb):is(:hover, :focus-visible):not(:disabled, [aria-disabled="true"]) {
  border-color: var(--kb-dn); background: var(--kb-dn-bg2); color: var(--kb-dn); outline: 0;
}
:is(.ki-b.rec, #skb) .ki-dot { background: currentColor; }
/* the one solid red: a confirm's final destructive button (Remove for everyone) */
:is(.skb-dx, .sk-dcf-go, #skb) { border-radius: 999px; border: 1px solid transparent; background: var(--kb-dn); color: #fff; font-family: var(--kb-ff); font-weight: 600; }
:is(.skb-dx, .sk-dcf-go, #skb):is(:hover, :focus-visible) { filter: brightness(1.08); outline: 0; }

/* icon-only: round ghost */
:is(.skb-i, .fl-x, .fl-add, .fl-ib, .tm-ib, .fw-ib, .fw-x, .fw-mb, .nf-x, .ki-x, .ki-ib, .skc-x, .wl-x, .st-x, .tr-x, .ft-x, .bd-mx, .bd-got-x, .bd-cm, .fm-ib.ai-ib, #skb) {
  border-radius: 999px; border: 1px solid transparent; background: transparent; color: var(--kb-tx3); box-shadow: none;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
:is(.skb-i, .fl-x, .fl-add, .fl-ib, .tm-ib, .fw-ib, .fw-x, .fw-mb, .nf-x, .ki-x, .ki-ib, .skc-x, .wl-x, .st-x, .tr-x, .ft-x, .bd-mx, .bd-got-x, .bd-cm, .fm-ib.ai-ib, #skb):is(:hover, :focus-visible, [aria-expanded="true"]):not(:disabled) {
  background: var(--kb-fill); color: var(--kb-tx); border-color: transparent; outline: 0;
}
:is(.fw-ib.fw-now, #skb) { font-family: var(--kb-ff); font-weight: 600; border-color: var(--kb-hl); color: var(--kb-tx2); }   /* "From today": a word, so a hairline pill */

/* disabled: faded, no hover */
:is(.skb, .fl-acc, .fl-btn, .fl-ab, .fl-sc, .btn, .clp .cb, .tm-c, .tm-btn, .tms-zb, .fw-ab, .nf-b, .skc-b, .ki-b, .jn-b, .wl-btn, .fm-btn, .fm-sc, .fr-btn, .tm-ib, .fw-ib, #skb):is(:disabled, [aria-disabled="true"]) {
  opacity: .45; cursor: default;
}

/* ---------- split buttons keep their joined corners ---------- */
:is(.fl-accs, #skb) > .fl-acc:first-child, :is(.fl-alls, #skb) > .fl-all-b:first-child { border-radius: 999px 0 0 999px; }
:is(.fl-accs, .fl-alls, #skb) > .fl-accd { border-radius: 0 999px 999px 0; }

/* ---------- sizes: the 26 / 32 / 40 steps where a family sat in between ---------- */
.btn { height: 32px; font-size: 12.5px; }
.btn.sm { height: 26px; padding: 0 11px; font-size: 12px; }
.fl-tal, .fl-up, .fl-ab { padding-left: 10px; padding-right: 10px; }
:is(.fl-run, #skb) { border-radius: 999px; }                              /* Running 12:04: the Now card's pill, not a button */
.bd-toast button { padding: 0 12px; height: 28px; font-size: 12px; }
.wl-btn { font-size: 13px; line-height: 1; padding: 10px 18px; }
.wl-btn.is-big { font-size: 14px; padding: 13px 22px; }
.tr-b button { font-size: 12.5px; padding: 8px 15px; }
/* choice chips (a time, a day, a meal length, a status) read lighter than an action */
:is(.tm-c:not(.tm-go), .wl-chips button, .wl-seg button, .tchip, button.bd-mc, label.bd-mc, .rec-page .who-chip, #skb) { font-weight: 500; }